/*!
 * Hellish Morph Lab — "Hellish Glass" front-end design system
 * Palette: Hellish Reptiles (olive-black, ember #d86431, brass #ccbe7a, cream #eee6ca)
 */

/* ================================================================ TOKENS */
.hml {
  --ink-0: #070805;
  --ink-1: #0d0e09;
  --ink-2: #14150e;
  --ink-3: #1c1d14;
  --olive: #434031;
  --sage: #a3a77a;
  --ember: #d86431;
  --ember-hi: #ee7a45;
  --ember-lo: #b44c1f;
  --brass: #ccbe7a;
  --brass-hi: #e3d79c;
  --cream: #eee6ca;
  --text: #f4f1e6;
  --text-2: #d9d6c8;
  --muted: #9c9a8a;
  --faint: #6f6d60;
  --red: #ef5a5f;
  --lethal: #c0262e;

  --glass: linear-gradient(180deg, rgba(255, 252, 235, .055) 0%, rgba(255, 252, 235, .018) 100%);
  --glass-strong: linear-gradient(180deg, rgba(255, 252, 235, .08) 0%, rgba(255, 252, 235, .03) 100%);
  --edge: rgba(204, 190, 122, .16);
  --edge-strong: rgba(204, 190, 122, .34);
  --hair: rgba(255, 250, 230, .07);
  --shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 24px 48px -28px rgba(0, 0, 0, .85);
  --glow-ember: 0 10px 30px -10px rgba(216, 100, 49, .65);

  --r-xl: 28px;
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;

  --f-display: "anton", "Anton", "Bebas Neue", Impact, sans-serif;
  --f-head: "montserrat", "Montserrat", "Inter", system-ui, sans-serif;
  --f-body: "open sans", "Open Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);

  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  max-width: 1400px;
  margin: 0 auto 48px;
  padding: clamp(18px, 3.4vw, 52px);
  border-radius: var(--r-xl);
  border: 1px solid var(--edge);
  color: var(--text-2);
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(900px 520px at 88% -8%, rgba(120, 128, 70, .22), transparent 60%),
    radial-gradient(700px 480px at -10% 105%, rgba(216, 100, 49, .12), transparent 60%),
    linear-gradient(180deg, var(--ink-1), var(--ink-0));
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .9);
  overflow: hidden;
  overflow: clip;
}
/* film grain */
.hml::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hml *, .hml *::before, .hml *::after { box-sizing: border-box; }
.hml img { max-width: 100%; height: auto; display: block; border: 0; }
.hml h2, .hml h3, .hml h4 { color: var(--text); font-family: var(--f-head); margin: 0 0 .4em; line-height: 1.15; border: 0; padding: 0; letter-spacing: -.01em; text-transform: none; }
.hml p { margin: 0 0 .8em; }
.hml button { font-family: inherit; }
.hml svg { width: 1em; height: 1em; flex: none; }
.hml a { color: var(--brass); }
.hml-muted { color: var(--muted); font-size: 13px; }

/* ================================================================ PRIMITIVES */
.hml-glass {
  background: var(--glass);
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
}
.hml-eyebrow { align-items: center; color: var(--brass); display: inline-flex; font-family: var(--f-head); font-size: 11px; font-weight: 700; gap: 9px; letter-spacing: .2em; margin: 0 0 14px !important; text-transform: uppercase; }
.hml-eyebrow i { background: var(--ember); border-radius: 50%; box-shadow: 0 0 0 4px rgba(216, 100, 49, .16), 0 0 14px var(--ember); display: inline-block; height: 7px; width: 7px; animation: hml-pulse 2.6s ease-in-out infinite; }
.hml-eyebrow.is-small { font-size: 10px; letter-spacing: .18em; margin-bottom: 6px !important; }
@keyframes hml-pulse { 50% { box-shadow: 0 0 0 7px rgba(216, 100, 49, .06), 0 0 18px var(--ember); } }

.hml-btn { align-items: center; border: 1px solid transparent; border-radius: 999px; cursor: pointer; display: inline-flex; font-family: var(--f-head); font-size: 12.5px; font-weight: 700; gap: 9px; justify-content: center; letter-spacing: .06em; line-height: 1; padding: 13px 20px; text-decoration: none !important; text-transform: uppercase; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s, border-color .2s, color .2s; white-space: nowrap; }
.hml-btn svg { font-size: 15px; }
.hml-btn-primary { background: linear-gradient(135deg, var(--ember-hi), var(--ember) 45%, var(--ember-lo)); color: #fff !important; box-shadow: var(--glow-ember), 0 1px 0 rgba(255, 255, 255, .25) inset; }
.hml-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -12px rgba(216, 100, 49, .8), 0 1px 0 rgba(255, 255, 255, .25) inset; }
.hml-btn-ghost { background: rgba(255, 252, 235, .04); border-color: var(--edge); color: var(--cream) !important; }
.hml-btn-ghost:hover { background: rgba(255, 252, 235, .08); border-color: var(--edge-strong); transform: translateY(-1px); }
.hml-iconbtn { align-items: center; background: var(--ink-2); border: 1px solid var(--edge); border-radius: 50%; color: var(--cream); cursor: pointer; display: inline-flex; font-size: 16px; height: 36px; justify-content: center; transition: all .25s var(--ease); width: 36px; }
.hml-iconbtn:hover { border-color: var(--brass); color: #fff; transform: rotate(180deg); }
.hml-link { align-items: center; background: none; border: 0; color: var(--brass); cursor: pointer; display: inline-flex; font-size: 12.5px; font-weight: 600; gap: 6px; padding: 0; text-decoration: none; transition: color .2s, gap .2s; }
.hml-link:hover { color: var(--cream); gap: 9px; }

.hml-chip { background: rgba(255, 252, 235, .035); border: 1px solid var(--edge); border-radius: 999px; color: var(--text-2); cursor: pointer; display: inline-flex; font-size: 12px; line-height: 1.3; margin: 0 6px 7px 0; padding: 6px 13px; transition: all .2s var(--ease); }
.hml-chip:hover { border-color: var(--edge-strong); color: #fff; }
.hml-chip[aria-pressed="true"] { background: linear-gradient(135deg, var(--brass-hi), var(--brass)); border-color: transparent; color: #17170f; font-weight: 700; box-shadow: 0 6px 16px -8px rgba(204, 190, 122, .7); }
.hml-chip.is-static { cursor: default; }
.hml-chip.is-both { border-color: var(--brass); color: var(--brass-hi); }

.hml-pill { border-radius: 999px; display: inline-flex; font-family: var(--f-head); font-size: 10px; font-weight: 700; letter-spacing: .08em; line-height: 1; padding: 5px 9px; text-transform: uppercase; white-space: nowrap; }
.hml-pill:empty { display: none; }
.hml-wel-caution { background: rgba(204, 190, 122, .14); border: 1px solid rgba(204, 190, 122, .45); color: var(--brass-hi); }
.hml-wel-severe { background: rgba(239, 90, 95, .14); border: 1px solid rgba(239, 90, 95, .55); color: #ffc2c4; }
.hml-wel-lethal { background: var(--lethal); border: 1px solid var(--lethal); color: #fff; }
.hml-wel-none { color: var(--sage); }

/* form controls */
.hml select, .hml input[type="search"] {
  -webkit-appearance: none; appearance: none;
  background: rgba(7, 8, 5, .55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23ccbe7a' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;
  border: 1px solid var(--edge); border-radius: var(--r-sm); box-shadow: none; color: var(--text);
  font-family: var(--f-body); font-size: 13.5px; height: auto; line-height: 1.35; margin: 0; min-height: 44px; padding: 10px 36px 10px 13px; transition: border-color .2s, box-shadow .2s, background-color .2s; width: 100%;
}
.hml input[type="search"] { background-image: none; padding-right: 14px; }
.hml select:hover { border-color: var(--edge-strong); }
.hml select:focus, .hml input:focus { border-color: var(--brass); box-shadow: 0 0 0 4px rgba(204, 190, 122, .14); outline: none; }
.hml button:focus-visible, .hml a:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.hml option { background: #14150e; color: #f4f1e6; }

.hml-switch { align-items: center; color: var(--text-2); cursor: pointer; display: inline-flex; font-size: 13px; gap: 11px; }
.hml-switch input { opacity: 0; pointer-events: none; position: absolute; }
.hml-switch-ui { background: rgba(255, 252, 235, .1); border: 1px solid var(--edge); border-radius: 999px; flex: none; height: 24px; position: relative; transition: background .25s; width: 42px; }
.hml-switch-ui::after { background: var(--cream); border-radius: 50%; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); content: ""; height: 18px; left: 2px; position: absolute; top: 2px; transition: transform .25s var(--ease), background .25s; width: 18px; }
.hml-switch input:checked + .hml-switch-ui { background: linear-gradient(135deg, var(--ember-hi), var(--ember-lo)); border-color: transparent; }
.hml-switch input:checked + .hml-switch-ui::after { background: #fff; transform: translateX(18px); }
.hml-switch input:focus-visible + .hml-switch-ui { box-shadow: 0 0 0 3px rgba(204, 190, 122, .35); }

/* ================================================================ HERO (lab + catalog) */
.hml-hero { align-items: flex-end; border-bottom: 1px solid var(--hair); display: flex; gap: 32px; justify-content: space-between; margin-bottom: clamp(22px, 3vw, 36px); padding-bottom: clamp(22px, 3vw, 36px); }
.hml-title { color: var(--text) !important; font-family: var(--f-display) !important; font-size: clamp(52px, 8.6vw, 124px) !important; font-weight: 400 !important; letter-spacing: -.005em !important; line-height: .88 !important; margin: 0 0 16px !important; text-transform: uppercase !important; }
.hml-title span { background: linear-gradient(100deg, var(--ember-hi) 0%, var(--ember) 40%, var(--brass) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hml-sub { color: var(--muted); font-size: 15.5px; margin: 0 !important; max-width: 560px; }
.hml-hero-meta { align-items: flex-end; display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
.hml-stat { align-items: baseline; background: var(--glass); border: 1px solid var(--edge); border-radius: 999px; color: var(--muted); display: inline-flex; font-size: 12px; gap: 8px; padding: 7px 14px; }
.hml-stat b { color: var(--cream); font-family: var(--f-head); font-size: 15px; }
.hml-version { color: var(--faint); font-family: var(--f-head); font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.hml-version em { color: var(--ember); font-style: normal; }

/* ================================================================ LAB */
.hml-work { align-items: start; display: grid; gap: clamp(18px, 2.4vw, 30px); grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); }
.hml-col-build, .hml-col-res { min-width: 0; }
.hml-col-res { position: sticky; top: 24px; }
body.admin-bar .hml-col-res { top: 56px; }

/* parent cards */
.hml-pair { align-items: stretch; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr) 0 minmax(0, 1fr); margin-bottom: 16px; }
.hml-pcard {
  background: var(--glass); border: 1px solid var(--edge); border-radius: var(--r-lg); box-shadow: var(--shadow);
  color: var(--text); cursor: pointer; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px; position: relative; text-align: left;
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s, background .3s;
}
.hml-pcard:hover { border-color: var(--edge-strong); transform: translateY(-3px); }
.hml-pcard:focus-visible { outline-color: var(--ember) !important; }
.hml-pcard.is-active { background: var(--glass-strong); border-color: rgba(216, 100, 49, .6); box-shadow: var(--shadow), 0 0 0 1px rgba(216, 100, 49, .25), 0 18px 40px -22px rgba(216, 100, 49, .55); }
.hml-pcard-top { align-items: center; display: flex; justify-content: space-between; }
.hml-role { color: var(--brass); font-family: var(--f-head); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.hml-role i { color: var(--muted); font-style: normal; }
.hml-pcard-edit { align-items: center; background: rgba(255, 252, 235, .05); border: 1px solid var(--hair); border-radius: 999px; color: var(--text-2); display: inline-flex; font-size: 11px; gap: 5px; padding: 4px 9px; transition: all .25s; }
.hml-pcard-edit em { font-style: normal; }
.hml-pcard.is-active .hml-pcard-edit { background: var(--ember); border-color: transparent; color: #fff; }
.hml-pcard-media { aspect-ratio: 4 / 3; background: radial-gradient(circle at 50% 40%, #2a2b1d, #0d0e09 70%); border-radius: var(--r-md); display: block; overflow: hidden; position: relative; }
.hml-pcard-media img { height: 100%; object-fit: cover; transition: transform .6s var(--ease), filter .4s; width: 100%; }
.hml-pcard:hover .hml-pcard-media img { transform: scale(1.05); }
.hml-pcard.is-wild .hml-pcard-media img { filter: grayscale(.65) brightness(.6); }
.hml-pcard-media .hml-pill { left: 10px; position: absolute; top: 10px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hml-pcard-name { color: var(--text); font-family: var(--f-head); font-size: 14.5px; font-weight: 700; letter-spacing: -.005em; line-height: 1.3; }
.hml-pcard-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.hml-pcard-chips span { background: rgba(204, 190, 122, .1); border-radius: 6px; color: var(--brass-hi); font-size: 11px; padding: 3px 7px; }
.hml-cross { align-items: center; align-self: center; display: flex; flex-direction: column; gap: 10px; position: relative; width: 0; z-index: 2; }
.hml-cross > span { align-items: center; background: linear-gradient(135deg, var(--brass-hi), var(--brass)); border-radius: 50%; box-shadow: 0 0 0 6px var(--ink-1), 0 10px 24px -8px rgba(204, 190, 122, .6); color: #16160e; display: flex; flex: none; font-family: var(--f-head); font-size: 26px; font-weight: 800; height: 50px; justify-content: center; line-height: 1; width: 50px; }
.hml-cross .hml-iconbtn { box-shadow: 0 0 0 5px var(--ink-1); }

/* editor */
.hml-editor { padding: clamp(16px, 2vw, 24px); }
.hml-editor-head { align-items: flex-end; display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; margin-bottom: 18px; }
.hml-editor-head h3 { font-size: 22px; margin: 0 !important; }
.hml-seg { background: rgba(7, 8, 5, .6); border: 1px solid var(--edge); border-radius: 999px; display: inline-flex; padding: 3px; }
.hml-seg button { background: none; border: 0; border-radius: 999px; color: var(--muted); cursor: pointer; font-size: 12.5px; font-weight: 600; padding: 7px 15px; transition: all .25s var(--ease); }
.hml-seg button[aria-selected="true"] { background: linear-gradient(135deg, var(--ember-hi), var(--ember-lo)); color: #fff; box-shadow: 0 6px 16px -8px rgba(216, 100, 49, .8); }
.hml-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hml-field > span { color: var(--text); font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.hml-field > span em { color: var(--faint); display: block; font-size: 11px; font-style: normal; font-weight: 400; margin-top: 2px; }
.hml-field-preset { background: rgba(216, 100, 49, .07); border: 1px solid rgba(216, 100, 49, .28); border-radius: var(--r-md); margin-bottom: 14px; padding: 12px; }
.hml-field-preset > span { color: var(--ember-hi); font-family: var(--f-head); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; }
.hml-group { border: 0; border-top: 1px solid var(--hair); margin: 0; min-width: 0; padding: 14px 0 6px; }
.hml-group legend { color: var(--sage); font-family: var(--f-head); font-size: 10.5px; font-weight: 700; letter-spacing: .2em; padding: 0 10px 0 0; text-transform: uppercase; }
.hml-genes { display: grid; gap: 12px 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 6px; }
.hml-gene.is-set select { border-color: rgba(216, 100, 49, .65); background-color: rgba(216, 100, 49, .08); }
.hml-fold { border-top: 1px solid var(--hair); margin-top: 8px; }
.hml-fold > summary { align-items: center; cursor: pointer; display: flex; justify-content: space-between; list-style: none; padding: 14px 0; }
.hml-fold > summary::-webkit-details-marker { display: none; }
.hml-fold > summary::after { border-bottom: 1.6px solid var(--brass); border-right: 1.6px solid var(--brass); content: ""; height: 7px; margin-right: 4px; transform: rotate(45deg); transition: transform .25s var(--ease); width: 7px; }
.hml-fold[open] > summary::after { transform: rotate(-135deg); }
.hml-fold > summary span { color: var(--cream); font-size: 13.5px; font-weight: 600; }
.hml-fold > summary em { color: var(--faint); display: block; font-size: 11px; font-style: normal; font-weight: 400; }
.hml-fold .hml-group:first-of-type { border-top: 0; padding-top: 0; }
.hml-fold .hml-chips { padding-bottom: 8px; }
.hml-editor-foot { border-top: 1px solid var(--hair); margin-top: 6px; padding-top: 14px; }
.hml-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; margin-top: 16px; }
.hml-actions-r { display: flex; flex-wrap: wrap; gap: 10px; }

/* results */
.hml-results { min-height: 560px; padding: clamp(16px, 2vw, 24px); }
.hml-empty { align-items: center; display: flex; flex-direction: column; justify-content: center; min-height: 500px; padding: 30px; text-align: center; }
.hml-empty-mark { color: var(--ember); filter: drop-shadow(0 0 22px rgba(216, 100, 49, .55)); font-size: 64px; margin-bottom: 24px; animation: hml-float 5s ease-in-out infinite; }
@keyframes hml-float { 50% { transform: translateY(-8px) rotate(8deg); } }
.hml-empty h3 { font-family: var(--f-display) !important; font-size: clamp(26px, 3vw, 36px) !important; font-weight: 400 !important; letter-spacing: .01em !important; text-transform: uppercase; }
.hml-empty p { color: var(--muted); max-width: 320px; }
.hml-res-head { align-items: flex-start; display: flex; gap: 16px; justify-content: space-between; }
.hml-res-head h3 { font-size: 24px; margin-bottom: 4px !important; }
.hml-tile { align-items: center; background: rgba(7, 8, 5, .5); border: 1px solid var(--edge); border-radius: var(--r-md); display: flex; flex: none; flex-direction: column; min-width: 96px; padding: 10px 16px; }
.hml-tile b { background: linear-gradient(135deg, var(--brass-hi), var(--ember)); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: var(--f-display); font-size: 36px; font-weight: 400; line-height: 1; }
.hml-tile span { color: var(--muted); font-size: 10.5px; text-align: center; }
.hml-warnings { display: grid; gap: 8px; list-style: none; margin: 16px 0 0; padding: 0; }
.hml-warn { border: 1px solid; border-radius: var(--r-sm); font-size: 13px; line-height: 1.5; margin: 0 !important; padding: 11px 14px 11px 40px; position: relative; }
.hml-warn::before { content: "!"; align-items: center; border-radius: 50%; display: flex; font-size: 11px; font-weight: 800; height: 18px; justify-content: center; left: 13px; position: absolute; top: 12px; width: 18px; }
.hml-warn-lethal { background: rgba(192, 38, 46, .2); border-color: rgba(192, 38, 46, .7); color: #fff; }
.hml-warn-lethal::before { background: var(--lethal); color: #fff; }
.hml-warn-severe { background: rgba(239, 90, 95, .1); border-color: rgba(239, 90, 95, .45); color: #ffd7d8; }
.hml-warn-severe::before { background: var(--red); color: #fff; }
.hml-warn-caution { background: rgba(204, 190, 122, .08); border-color: rgba(204, 190, 122, .4); color: var(--cream); }
.hml-warn-caution::before { background: var(--brass); color: #16160e; }
.hml-warn-info { background: rgba(163, 167, 122, .08); border-color: rgba(163, 167, 122, .35); }
.hml-warn-info::before { background: var(--sage); color: #16160e; content: "i"; }
.hml-tabs { border-bottom: 1px solid var(--hair); display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 22px 0 16px; }
.hml-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); cursor: pointer; font-size: 13px; font-weight: 600; margin-bottom: -1px; padding: 0 0 11px; transition: color .2s, border-color .2s; }
.hml-tabs button:hover { color: var(--text); }
.hml-tabs button[aria-selected="true"] { border-color: var(--ember); color: var(--text); }
.hml-pane[hidden] { display: none; }
.hml-ogrid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hml-ocard { animation: hml-rise .45s var(--ease) both; animation-delay: calc(var(--i) * 30ms); background: rgba(7, 8, 5, .45); border: 1px solid var(--hair); border-radius: var(--r-md); display: flex; flex-direction: column; min-width: 0; overflow: hidden; transition: border-color .25s, transform .3s var(--ease); }
.hml-ocard[hidden] { display: none; }
.hml-ocard:hover { border-color: var(--edge-strong); transform: translateY(-2px); }
@keyframes hml-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.hml-ocard-media { aspect-ratio: 1 / 1; background: #0b0c08; border: 0; cursor: pointer; display: block; overflow: hidden; padding: 0; position: relative; width: 100%; }
span.hml-ocard-media { cursor: default; }
.hml-ocard-media img { height: 100%; object-fit: cover; transition: transform .6s var(--ease); width: 100%; }
.hml-ocard:hover .hml-ocard-media img { transform: scale(1.06); }
.hml-ocard-media::after { background: linear-gradient(180deg, transparent 55%, rgba(7, 8, 5, .65)); content: ""; inset: 0; position: absolute; }
.hml-pct { background: linear-gradient(135deg, var(--cream), var(--brass)); border-radius: 10px; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .6); color: #16160e; font-family: var(--f-head); font-size: 15px; font-weight: 800; letter-spacing: -.01em; padding: 5px 10px; position: absolute; right: 10px; top: 10px; z-index: 1; }
.hml-ocard-media .hml-pill { bottom: 10px; left: 10px; position: absolute; z-index: 1; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hml-out-lethal { border-color: rgba(192, 38, 46, .55); }
.hml-out-lethal .hml-ocard-media img { filter: grayscale(.8) brightness(.55); }
.hml-out-lethal .hml-pct { background: var(--lethal); color: #fff; }
.hml-out-severe { border-color: rgba(239, 90, 95, .35); }
.hml-ocard-body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 12px 13px 14px; }
.hml-ocard-body h4 { font-size: 13.5px; font-weight: 700; line-height: 1.3; margin: 0 !important; }
.hml-hets { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 !important; }
.hml-hets span { background: rgba(204, 190, 122, .1); border-radius: 6px; color: var(--brass-hi); font-size: 10.5px; padding: 2px 6px; }
.hml-ometa { color: var(--muted); display: flex; flex-wrap: wrap; font-size: 11.5px; gap: 4px 10px; margin: auto 0 0 !important; padding-top: 4px; }
.hml-ometa span + span::before { color: var(--faint); content: "·"; margin-right: 10px; }
.hml-ocard-body .hml-link { font-size: 12px; margin-top: 4px; }
.hml-more-wrap { margin: 16px 0 0 !important; text-align: center; }
.hml-tablewrap { border: 1px solid var(--hair); border-radius: var(--r-md); overflow: auto; }
.hml-table { border-collapse: collapse; font-size: 13px; margin: 0; width: 100%; }
.hml-table th { background: rgba(7, 8, 5, .5); color: var(--brass); font-family: var(--f-head); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; padding: 11px 12px; text-align: left; text-transform: uppercase; white-space: nowrap; }
.hml-table td { border-top: 1px solid var(--hair); color: var(--text-2); padding: 11px 12px; vertical-align: top; }
.hml-table td strong { color: var(--text); }
.hml-table td small { color: var(--muted); display: block; font-size: 11.5px; margin-top: 3px; }
.hml-table .hml-num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.hml-table tr.hml-out-lethal td { background: rgba(192, 38, 46, .08); }
.hml-notes h4 { color: var(--brass) !important; font-size: 11px !important; letter-spacing: .16em !important; margin: 4px 0 10px !important; text-transform: uppercase !important; }
.hml-notes .hml-muted + h4 { margin-top: 18px !important; }
.hml-cta { margin: 20px 0 0 !important; text-align: center; }
.hml-foot { border-top: 1px solid var(--hair); display: flex; gap: 30px; margin-top: clamp(24px, 3vw, 36px); padding-top: 20px; }
.hml-foot strong { color: var(--ember); flex: none; font-family: var(--f-head); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; }
.hml-foot p { color: var(--faint); font-size: 12px; margin: 0 !important; max-width: 900px; }

/* toast */
.hml-toast { background: linear-gradient(135deg, var(--cream, #eee6ca), #ccbe7a); border-radius: 999px; bottom: 24px; box-shadow: 0 16px 40px -10px rgba(0, 0, 0, .7); color: #16160e; font: 700 13px/1 "montserrat", "Montserrat", system-ui, sans-serif; left: 50%; opacity: 0; padding: 13px 22px; pointer-events: none; position: fixed; transform: translate(-50%, 12px); transition: opacity .3s, transform .3s; z-index: 2147483001; }
.hml-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ================================================================ CATALOG */
.hml-toolbar { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) 210px 190px; margin-bottom: 14px; }
.hml-searchbox { align-items: center; display: flex; position: relative; }
.hml-searchbox svg { color: var(--brass); font-size: 17px; left: 15px; pointer-events: none; position: absolute; }
.hml-searchbox input[type="search"] { border-radius: 999px; padding-left: 44px; }
.hml-toolbar select { border-radius: 999px; }
.hml-filter-cat { display: flex; flex-wrap: wrap; margin-bottom: 8px; }
.hml-count { color: var(--faint); font-family: var(--f-head); font-size: 11px; font-weight: 700; letter-spacing: .18em; margin: 6px 0 16px !important; text-transform: uppercase; }
.hml-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.hml-card { animation: hml-rise .5s var(--ease) both; background: var(--glass); border: 1px solid var(--edge); border-radius: var(--r-lg); box-shadow: var(--shadow); display: flex; overflow: hidden; transition: transform .35s var(--ease), border-color .3s, box-shadow .35s; }
.hml-card[hidden] { display: none; }
.hml-card:hover { border-color: var(--edge-strong); box-shadow: var(--shadow), 0 22px 46px -26px rgba(216, 100, 49, .45); transform: translateY(-4px); }
.hml-card-btn { background: none; border: 0; color: inherit; cursor: pointer; display: flex; flex-direction: column; padding: 0; text-align: left; text-decoration: none !important; width: 100%; }
.hml-card-img { aspect-ratio: 1 / 1; background: #0b0c08; display: block; margin: 8px 8px 0; overflow: hidden; position: relative; border-radius: calc(var(--r-lg) - 6px); }
.hml-card-img img { height: 100%; object-fit: cover; transition: transform .7s var(--ease); width: 100%; }
.hml-card:hover .hml-card-img img { transform: scale(1.06); }
.hml-card-img .hml-pill { left: 10px; position: absolute; top: 10px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); background-color: rgba(7, 8, 5, .55); }
.hml-card-img .hml-pill.hml-wel-lethal { background: var(--lethal); }
.hml-card-body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.hml-card-kicker { color: var(--ember); font-family: var(--f-head); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.hml-card-body h3 { font-size: 16px !important; font-weight: 700 !important; margin: 0 !important; }
.hml-card-body p { -webkit-box-orient: vertical; color: var(--muted); display: -webkit-box; font-size: 13px; -webkit-line-clamp: 3; line-height: 1.5; margin: 0 !important; overflow: hidden; }
.hml-card-meta { align-items: center; border-top: 1px solid var(--hair); color: var(--brass); display: flex; font-size: 11px; gap: 10px; justify-content: space-between; margin-top: auto; padding-top: 10px; }
.hml-rarity { color: var(--ember); letter-spacing: 1px; white-space: nowrap; }
.hml-rarity i { color: var(--olive); font-style: normal; }
.hml-noresults { color: var(--muted); padding: 40px; text-align: center; }
.hml-catalog > .hml-foot p { max-width: none; }

/* ================================================================ MODAL */
.hml.hml-modal-host { background: none; border: 0; border-radius: 0; box-shadow: none; height: 0; isolation: auto; margin: 0; max-width: none; overflow: visible; padding: 0; position: relative; width: 0; z-index: 2147483000; }
.hml.hml-modal-host::before { display: none; }
.hml-modal { align-items: flex-start; animation: hml-fade .25s ease both; background: rgba(4, 4, 3, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: flex; inset: 0; justify-content: center; overflow-y: auto; padding: 5vh 16px; position: fixed; z-index: 2147483000; }
.hml-modal[hidden] { display: none; }
@keyframes hml-fade { from { opacity: 0; } }
.hml-modal-card { animation: hml-pop .4s var(--ease) both; background: radial-gradient(600px 400px at 100% 0, rgba(120, 128, 70, .16), transparent 60%), linear-gradient(180deg, #13140d, #0b0c08); border: 1px solid var(--edge); border-radius: var(--r-xl); box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .95); display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); max-width: 1140px; overflow: hidden; position: relative; width: 100%; }
@keyframes hml-pop { from { opacity: 0; transform: translateY(18px) scale(.98); } }
.hml-modal-close { align-items: center; background: rgba(7, 8, 5, .7); border: 1px solid var(--edge); border-radius: 50%; color: var(--cream); cursor: pointer; display: flex; font-size: 24px; height: 44px; justify-content: center; line-height: 1; position: absolute; right: 16px; top: 16px; transition: all .25s var(--ease); width: 44px; z-index: 3; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hml-modal-close:hover { background: var(--ember); border-color: transparent; color: #fff; transform: rotate(90deg); }
.hml-modal-media { padding: 14px 0 14px 14px; }
.hml-modal-media img { border-radius: calc(var(--r-xl) - 10px); position: sticky; top: 14px; width: 100%; }
.hml-imgnote { color: var(--faint); font-size: 11.5px; margin: 0 !important; padding: 12px 6px; }
.hml-modal-body { padding: clamp(24px, 3vw, 40px); }
.hml-modal-body .hml-kicker { color: var(--ember); font-family: var(--f-head); font-size: 11px; font-weight: 700; letter-spacing: .18em; margin: 0 0 10px !important; text-transform: uppercase; }
.hml-modal-body h3 { font-family: var(--f-display) !important; font-size: clamp(34px, 4.4vw, 54px) !important; font-weight: 400 !important; letter-spacing: .005em !important; line-height: .95 !important; margin-bottom: 10px !important; text-transform: uppercase; }
.hml-modal-body h4 { color: var(--brass) !important; font-size: 11px !important; letter-spacing: .16em !important; margin: 22px 0 8px !important; text-transform: uppercase !important; }
.hml-modal-body ul { margin: 0 !important; padding: 0 !important; list-style: none; }
.hml-modal-body li { margin-bottom: 6px; padding-left: 18px; position: relative; }
.hml-modal-body li::before { background: var(--brass); border-radius: 50%; content: ""; height: 5px; left: 2px; position: absolute; top: .62em; width: 5px; }
.hml-pros li::before { background: var(--sage) !important; }
.hml-cons li::before { background: var(--ember) !important; }
.hml-aka { color: var(--muted); font-size: 13px; }
.hml-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 18px; }
.hml-facts span { background: rgba(255, 252, 235, .035); border: 1px solid var(--hair); border-radius: var(--r-sm); color: var(--text); font-size: 13px; padding: 8px 12px; }
.hml-facts b { color: var(--brass); display: block; font-family: var(--f-head); font-size: 9.5px; font-weight: 700; letter-spacing: .16em; margin-bottom: 2px; text-transform: uppercase; }
.hml-facts i { color: var(--olive); font-style: normal; }
.hml-lead { color: var(--text); font-size: 16px; line-height: 1.65; }
.hml-health { background: rgba(163, 167, 122, .08); border: 1px solid rgba(163, 167, 122, .3); border-radius: var(--r-md); color: var(--text-2); font-size: 13.5px; padding: 12px 15px; }
.hml-health b { display: block; font-family: var(--f-head); font-size: 10.5px; letter-spacing: .14em; margin-bottom: 3px; text-transform: uppercase; color: var(--sage); }
.hml-health.hml-wel-caution { background: rgba(204, 190, 122, .08); border-color: rgba(204, 190, 122, .4); }
.hml-health.hml-wel-caution b { color: var(--brass-hi); }
.hml-health.hml-wel-severe { background: rgba(239, 90, 95, .1); border-color: rgba(239, 90, 95, .45); }
.hml-health.hml-wel-severe b { color: #ff9fa2; }
.hml-health.hml-wel-lethal { background: rgba(192, 38, 46, .22); border-color: rgba(192, 38, 46, .7); color: #fff; }
.hml-health.hml-wel-lethal b { color: #fff; }
.hml-cols { display: grid; gap: 22px; grid-template-columns: 1fr 1fr; }
.hml-related { display: flex; flex-wrap: wrap; }
.hml-modal-actions { border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; padding-top: 20px; }
.hml-modal-actions:empty { display: none; }
html.hml-noscroll, html.hml-noscroll body { overflow: hidden; }

/* ================================================================ SINGLE CARD */
.hml.hml-single-wrap { padding: clamp(16px, 2.4vw, 28px); }
.hml-single { align-items: center; display: grid; gap: clamp(18px, 3vw, 34px); grid-template-columns: minmax(200px, 320px) 1fr; }
.hml-single img { border-radius: var(--r-lg); width: 100%; }
.hml-single .hml-kicker { color: var(--ember); font-family: var(--f-head); font-size: 11px; font-weight: 700; letter-spacing: .16em; margin-bottom: 8px !important; text-transform: uppercase; }
.hml-single h3 { font-family: var(--f-display) !important; font-size: clamp(30px, 4vw, 46px) !important; font-weight: 400 !important; line-height: .95 !important; text-transform: uppercase; }

/* ================================================================ RESPONSIVE */
@media (max-width: 1080px) {
  .hml-work { grid-template-columns: 1fr; }
  .hml-col-res { position: static; }
  .hml-results, .hml-empty { min-height: 0; }
  .hml-empty { padding: 40px 20px; }
  .hml-ogrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hml-modal-card { grid-template-columns: 1fr; }
  .hml-modal-media { padding: 12px 12px 0; }
  .hml-modal-media img { position: static; }
  .hml-toolbar { grid-template-columns: 1fr 1fr; }
  .hml-toolbar .hml-searchbox { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .hml { border-radius: 20px; font-size: 14px; padding: 16px; }
  .hml-hero { align-items: flex-start; flex-direction: column; gap: 18px; }
  .hml-hero-meta { align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
  .hml-title { font-size: clamp(48px, 15vw, 72px) !important; }
  .hml-pair { gap: 26px; }
  .hml-editor, .hml-results { padding: 14px; border-radius: 16px; }
  .hml-tabs { flex-wrap: nowrap; gap: 18px; overflow-x: auto; scrollbar-width: none; }
  .hml-tabs::-webkit-scrollbar { display: none; }
  .hml-tabs button { flex: none; font-size: 12.5px; white-space: nowrap; }
  .hml-ometa span + span, .hml-ocard-body .hml-link { display: none; }
  .hml-res-head { flex-direction: column; gap: 10px; }
  .hml-tile { align-items: baseline; flex-direction: row; gap: 8px; }
  .hml-eyebrow { letter-spacing: .14em; }
  .hml-pcard { border-radius: 16px; padding: 10px; gap: 8px; }
  .hml-pcard-name { font-size: 12.5px; }
  .hml-pcard-chips span { font-size: 10px; }
  .hml-pcard-edit em { display: none; }
  .hml-role { font-size: 10px; letter-spacing: .1em; }
  .hml-cross { gap: 8px; }
  .hml-cross > span { font-size: 18px; height: 32px; width: 32px; box-shadow: 0 0 0 4px var(--ink-1); }
  .hml-cross .hml-iconbtn { height: 30px; width: 30px; font-size: 14px; box-shadow: 0 0 0 4px var(--ink-1); }
  .hml-genes { grid-template-columns: 1fr; }
  .hml-editor-head h3 { font-size: 19px; }
  .hml-actions { align-items: stretch; flex-direction: column; }
  .hml-actions-r .hml-btn { flex: 1; }
  .hml-ogrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .hml-ocard-body { padding: 10px; }
  .hml-ocard-body h4 { font-size: 12.5px; }
  .hml-pct { font-size: 13px; padding: 4px 8px; }
  .hml-res-head h3 { font-size: 20px; }
  .hml-tile { min-width: 76px; padding: 8px 10px; }
  .hml-tile b { font-size: 28px; }
  .hml-foot { flex-direction: column; gap: 8px; }
  .hml-grid { gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hml-card-img { margin: 6px 6px 0; }
  .hml-card-body { padding: 10px 12px 12px; }
  .hml-card-body h3 { font-size: 14px !important; }
  .hml-card-kicker { font-size: 9px; letter-spacing: .1em; }
  .hml-card-body p { display: none; }
  .hml-card-meta > span:first-child { display: none; }
  .hml-toolbar { grid-template-columns: 1fr 1fr; gap: 8px; }
  .hml-toolbar select { font-size: 12.5px; min-height: 40px; padding: 8px 30px 8px 12px; background-position: right 11px center; }
  .hml-filter-cat { flex-wrap: nowrap; margin: 0 -16px 4px; overflow-x: auto; padding: 0 16px 4px; scrollbar-width: none; }
  .hml-filter-cat::-webkit-scrollbar { display: none; }
  .hml-filter-cat .hml-chip { flex: none; }
  .hml-sub { font-size: 14px; }
  .hml-stat { font-size: 11px; padding: 5px 11px; }
  .hml-stat b { font-size: 13px; }
  .hml-hero-meta { gap: 6px; }
  .hml-cols { grid-template-columns: 1fr; gap: 0; }
  .hml-modal { padding: 0; }
  .hml-modal-card { border-radius: 0 0 24px 24px; min-height: 100%; }
  .hml-single { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  .hml-ogrid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .hml *, .hml-modal * { animation: none !important; transition: none !important; }
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .hml-glass, .hml-pcard, .hml-card { background: #15160f; }
}


/* ================================================================ THEME-PROOFING
   Enfold (and many themes) style form fields, headings, links and lists with
   high-specificity selectors such as "#top .main_color input[type=search]".
   These rules pin the plugin's own look. */
.hml select, .hml input[type="search"], .hml input[type="text"] {
  -webkit-appearance: none !important; appearance: none !important;
  background-color: rgba(7, 8, 5, .55) !important;
  border: 1px solid var(--edge) !important; border-radius: var(--r-sm) !important;
  box-shadow: none !important; color: var(--text) !important;
  display: block !important; float: none !important;
  font-family: var(--f-body) !important; font-size: 13.5px !important; font-weight: 400 !important;
  height: auto !important; letter-spacing: 0 !important; line-height: 1.35 !important;
  margin: 0 !important; max-width: 100% !important; min-height: 44px !important;
  padding: 10px 36px 10px 13px !important; text-transform: none !important; width: 100% !important;
}
.hml select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23ccbe7a' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") !important; background-position: right 14px center !important; background-repeat: no-repeat !important; cursor: pointer; }
.hml input[type="search"] { background-image: none !important; padding-right: 14px !important; }
.hml input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.hml input::placeholder { color: var(--faint) !important; opacity: 1 !important; }
.hml select:hover { border-color: var(--edge-strong) !important; }
.hml select:focus, .hml input:focus { border-color: var(--brass) !important; box-shadow: 0 0 0 4px rgba(204, 190, 122, .14) !important; outline: none !important; }
.hml .hml-gene.is-set select { background-color: rgba(216, 100, 49, .08) !important; border-color: rgba(216, 100, 49, .65) !important; }
.hml .hml-toolbar select, .hml .hml-searchbox input[type="search"] { border-radius: 999px !important; }

/* search field with icon */
.hml .hml-searchbox { align-items: center !important; display: flex !important; font-size: 1rem !important; font-weight: 400 !important; margin: 0 !important; padding: 0 !important; position: relative !important; width: 100% !important; }
.hml .hml-searchbox > svg { color: var(--brass) !important; fill: none !important; height: 18px !important; left: 16px !important; margin: 0 !important; pointer-events: none; position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; width: 18px !important; z-index: 1; }
.hml .hml-searchbox > input[type="search"] { padding-left: 46px !important; }

/* buttons */
.hml button { box-shadow: none; font-family: var(--f-body); line-height: inherit; margin: 0; min-height: 0; text-shadow: none; text-transform: none; }
.hml .hml-btn { border-radius: 999px !important; font-family: var(--f-head) !important; font-size: 12.5px !important; font-weight: 700 !important; letter-spacing: .06em !important; line-height: 1 !important; padding: 13px 20px !important; text-transform: uppercase !important; }
.hml .hml-btn-primary { background-image: linear-gradient(135deg, var(--ember-hi), var(--ember) 45%, var(--ember-lo)) !important; border: 1px solid transparent !important; color: #fff !important; }
.hml .hml-btn-ghost { background: rgba(255, 252, 235, .04) !important; border: 1px solid var(--edge) !important; color: var(--cream) !important; }
.hml .hml-btn-ghost:hover { background: rgba(255, 252, 235, .08) !important; border-color: var(--edge-strong) !important; }
.hml .hml-link { background: none !important; border: 0 !important; color: var(--brass) !important; padding: 0 !important; text-decoration: none !important; }
.hml .hml-link:hover { color: var(--cream) !important; }
.hml .hml-chip { background-color: rgba(255, 252, 235, .035) !important; border: 1px solid var(--edge) !important; border-radius: 999px !important; color: var(--text-2) !important; font-size: 12px !important; padding: 6px 13px !important; }
.hml .hml-chip[aria-pressed="true"] { background-image: linear-gradient(135deg, var(--brass-hi), var(--brass)) !important; border-color: transparent !important; color: #17170f !important; }
.hml .hml-chip.is-both { border-color: var(--brass) !important; color: var(--brass-hi) !important; }
.hml .hml-seg button, .hml .hml-tabs button { background-color: transparent !important; border-radius: 999px; color: var(--muted) !important; }
.hml .hml-tabs button { border-radius: 0 !important; border-width: 0 0 2px !important; border-style: solid !important; border-color: transparent !important; padding: 0 0 11px !important; }
.hml .hml-tabs button[aria-selected="true"] { border-color: var(--ember) !important; color: var(--text) !important; }
.hml .hml-seg button { border: 0 !important; padding: 7px 15px !important; }
.hml .hml-seg button[aria-selected="true"] { background-image: linear-gradient(135deg, var(--ember-hi), var(--ember-lo)) !important; color: #fff !important; }
.hml .hml-pcard, .hml .hml-card-btn, .hml .hml-ocard-media { font-family: var(--f-body) !important; text-transform: none !important; }
.hml .hml-pcard { background-color: transparent !important; color: var(--text) !important; }
.hml .hml-card-btn, .hml .hml-ocard-media { background-color: transparent !important; border: 0 !important; padding: 0 !important; }
.hml .hml-iconbtn { background: var(--ink-2) !important; border: 1px solid var(--edge) !important; border-radius: 50% !important; color: var(--cream) !important; padding: 0 !important; }

/* typography */
.hml h2, .hml h3, .hml h4 { color: var(--text) !important; text-shadow: none !important; }
.hml h3, .hml h4 { letter-spacing: normal; text-transform: none !important; }
.hml.hml .hml-title, .hml.hml .hml-empty h3, .hml.hml .hml-modal-body h3, .hml.hml .hml-single h3 { text-transform: uppercase !important; }
.hml .hml-title span { -webkit-text-fill-color: transparent; }
.hml.hml .hml-notes h4, .hml.hml .hml-modal-body h4 { color: var(--brass) !important; letter-spacing: .16em !important; text-transform: uppercase !important; }
.hml strong, .hml b { color: inherit; }
.hml p { color: inherit; }
.hml label { font-weight: inherit; }
.hml fieldset { background: none !important; }
.hml legend { background: none !important; border: 0 !important; }
.hml ul, .hml ol { list-style: none; }
.hml .hml-modal-body ul { margin: 0 !important; padding: 0 !important; }
.hml .hml-modal-body li { list-style: none !important; margin-left: 0 !important; }
.hml img { border-radius: 0; box-shadow: none; }
.hml .hml-table, .hml .hml-table th, .hml .hml-table td { background-color: transparent; border-left: 0; border-right: 0; }
.hml .hml-table th { background: rgba(7, 8, 5, .5) !important; color: var(--brass) !important; }
.hml .hml-table td { border-bottom: 0 !important; border-top: 1px solid var(--hair) !important; color: var(--text-2) !important; }

/* ---------------------------------------------------------------- theme-proofing: full element coverage */
/* every plugin button starts from a neutral reset (beats e.g. "#top button{background;padding;uppercase}") */
.hml button, .hml-modal button {
  background-color: transparent !important; background-image: none !important; border-radius: 0 !important; box-shadow: none !important;
  font-size: inherit !important; height: auto !important; letter-spacing: normal !important; line-height: inherit !important;
  margin: 0 !important; min-height: 0 !important; min-width: 0 !important; padding: 0 !important; text-shadow: none !important; text-transform: none !important; width: auto !important;
}
/* labels, fieldsets, lists, paragraphs, tables, strong */
.hml label { display: block; font-size: inherit !important; font-weight: inherit !important; margin: 0 !important; padding: 0 !important; }
.hml .hml-field { display: flex !important; }
.hml .hml-switch { display: inline-flex !important; font-size: 13px !important; font-weight: 400 !important; }
.hml fieldset { border: 0 !important; border-top: 1px solid var(--hair) !important; margin: 0 !important; padding: 14px 0 6px !important; }
.hml .hml-fold .hml-group:first-of-type { border-top: 0 !important; padding-top: 0 !important; }
.hml legend { color: var(--sage) !important; font-size: 10.5px !important; margin: 0 !important; padding: 0 10px 0 0 !important; width: auto !important; }
.hml ul, .hml ol, .hml-modal ul, .hml-modal ol { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.hml li, .hml-modal li { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.hml .hml-warnings { margin-top: 16px !important; }
.hml .hml-warn { margin: 0 !important; padding: 11px 14px 11px 40px !important; }
.hml .hml-modal-body li { margin: 0 0 6px !important; padding: 0 0 0 18px !important; }
.hml p, .hml-modal p { margin: 0 0 .8em; }
.hml strong, .hml b { color: inherit !important; font-weight: 700; }
.hml table, .hml th, .hml td { background: transparent !important; border: 0 !important; }
.hml .hml-table th { background: rgba(7, 8, 5, .5) !important; color: var(--brass) !important; padding: 11px 12px !important; }
.hml .hml-table td { border-top: 1px solid var(--hair) !important; color: var(--text-2) !important; padding: 11px 12px !important; }
.hml .hml-table td strong { color: var(--text) !important; }

/* headings: own sizes + spacing */
.hml h2, .hml h3, .hml h4 { letter-spacing: normal !important; margin-top: 0 !important; }
.hml .hml-editor-head h3 { font-size: 22px !important; margin: 0 !important; }
.hml .hml-res-head h3 { font-size: 24px !important; margin: 0 0 4px !important; }
.hml .hml-ocard-body h4 { font-size: 13.5px !important; margin: 0 !important; }
.hml .hml-card-body h3 { margin: 0 !important; }
.hml.hml .hml-title { letter-spacing: -.005em !important; }
.hml.hml .hml-empty h3 { letter-spacing: .01em !important; margin: 0 0 .4em !important; }
.hml.hml .hml-modal-body h3, .hml.hml .hml-single h3 { letter-spacing: .005em !important; }

/* coloured text that themes like to recolour */
.hml .hml-pcard-name { color: var(--text) !important; }
.hml .hml-foot strong { color: var(--ember) !important; }
.hml .hml-stat b { color: var(--cream) !important; }
.hml .hml-tile b { color: transparent !important; -webkit-text-fill-color: transparent; }
.hml .hml-facts b { color: var(--brass) !important; }
.hml .hml-health b { color: var(--sage) !important; }
.hml .hml-health.hml-wel-caution b { color: var(--brass-hi) !important; }
.hml .hml-health.hml-wel-severe b { color: #ff9fa2 !important; }
.hml .hml-health.hml-wel-lethal b { color: #fff !important; }
.hml a.hml-btn-primary, .hml a.hml-btn-primary:hover { color: #fff !important; }
.hml a.hml-btn-ghost { color: var(--cream) !important; }

/* buttons: each component re-declares its own look */
.hml .hml-btn { align-items: center !important; border: 1px solid transparent !important; display: inline-flex !important; gap: 9px; padding: 13px 20px !important; }
.hml .hml-btn-primary { background-image: linear-gradient(135deg, var(--ember-hi), var(--ember) 45%, var(--ember-lo)) !important; box-shadow: var(--glow-ember), 0 1px 0 rgba(255, 255, 255, .25) inset !important; color: #fff !important; }
.hml .hml-btn-primary:hover { box-shadow: 0 16px 36px -12px rgba(216, 100, 49, .8), 0 1px 0 rgba(255, 255, 255, .25) inset !important; }
.hml .hml-btn-ghost { background-color: rgba(255, 252, 235, .04) !important; border-color: var(--edge) !important; color: var(--cream) !important; }
.hml .hml-btn-ghost:hover { background-color: rgba(255, 252, 235, .08) !important; border-color: var(--edge-strong) !important; }
.hml .hml-pcard { background-image: var(--glass) !important; border: 1px solid var(--edge) !important; border-radius: var(--r-lg) !important; box-shadow: var(--shadow) !important; color: var(--text) !important; font-size: 14px !important; line-height: 1.5 !important; padding: 14px !important; width: 100% !important; }
.hml .hml-pcard:hover { border-color: var(--edge-strong) !important; }
.hml .hml-pcard.is-active { background-image: var(--glass-strong) !important; border-color: rgba(216, 100, 49, .6) !important; box-shadow: var(--shadow), 0 0 0 1px rgba(216, 100, 49, .25), 0 18px 40px -22px rgba(216, 100, 49, .55) !important; }
.hml .hml-iconbtn { background-color: var(--ink-2) !important; border: 1px solid var(--edge) !important; border-radius: 50% !important; color: var(--cream) !important; font-size: 16px !important; height: 36px !important; width: 36px !important; }
.hml .hml-cross .hml-iconbtn { box-shadow: 0 0 0 5px var(--ink-1) !important; }
.hml .hml-chip { background-color: rgba(255, 252, 235, .035) !important; border: 1px solid var(--edge) !important; border-radius: 999px !important; font-size: 12px !important; line-height: 1.3 !important; margin: 0 6px 7px 0 !important; padding: 6px 13px !important; }
.hml .hml-chip[aria-pressed="true"] { background-image: linear-gradient(135deg, var(--brass-hi), var(--brass)) !important; box-shadow: 0 6px 16px -8px rgba(204, 190, 122, .7) !important; }
.hml .hml-seg button { border-radius: 999px !important; font-size: 12.5px !important; font-weight: 600 !important; padding: 7px 15px !important; }
.hml .hml-seg button[aria-selected="true"] { box-shadow: 0 6px 16px -8px rgba(216, 100, 49, .8) !important; }
.hml .hml-tabs button { font-size: 13px !important; font-weight: 600 !important; margin-bottom: -1px !important; }
.hml .hml-link { font-size: 12.5px !important; font-weight: 600 !important; }
.hml .hml-ocard-body .hml-link { font-size: 12px !important; margin-top: 4px !important; }
.hml .hml-ocard-media { aspect-ratio: 1 / 1; display: block !important; width: 100% !important; }
.hml .hml-card-btn { display: flex !important; width: 100% !important; }
.hml .hml-modal-close { align-items: center !important; background-color: rgba(7, 8, 5, .7) !important; border: 1px solid var(--edge) !important; border-radius: 50% !important; color: var(--cream) !important; display: flex !important; font-size: 24px !important; height: 44px !important; justify-content: center !important; line-height: 1 !important; width: 44px !important; }
.hml .hml-modal-close:hover { background-color: var(--ember) !important; border-color: transparent !important; color: #fff !important; }
.hml .hml-tabs button:focus:not(:focus-visible), .hml .hml-pcard:focus:not(:focus-visible), .hml .hml-chip:focus:not(:focus-visible) { outline: none !important; }

@media (max-width: 720px) {
  .hml .hml-pcard { border-radius: 16px !important; padding: 10px !important; }
  .hml .hml-cross .hml-iconbtn { height: 30px !important; width: 30px !important; font-size: 14px !important; box-shadow: 0 0 0 4px var(--ink-1) !important; }
  .hml .hml-editor-head h3 { font-size: 19px !important; }
  .hml .hml-res-head h3 { font-size: 20px !important; }
  .hml .hml-ocard-body h4 { font-size: 12.5px !important; }
  .hml .hml-tabs button { font-size: 12.5px !important; }
  .hml .hml-toolbar select { font-size: 12.5px !important; min-height: 40px !important; padding: 8px 30px 8px 12px !important; background-position: right 11px center !important; }
}
.hml .hml-field-preset { margin: 0 0 14px !important; padding: 12px !important; }
.hml.hml .hml-modal-body h4 { margin: 22px 0 8px !important; }
.hml.hml .hml-notes h4 { margin: 4px 0 10px !important; }
.hml.hml .hml-notes .hml-muted + h4 { margin-top: 18px !important; }

/* ================================================================ 2.4.0 */
/* sex icons — SVG, optically centred (unicode ♂/♀ sat on the font baseline) */
.hml .hml-sex { display: block; flex: none; height: 14px; width: 14px; }
.hml .hml-role { align-items: center; display: inline-flex !important; gap: 7px; line-height: 1 !important; }
.hml .hml-role .hml-sex { color: var(--muted); height: 13px; width: 13px; }
.hml .hml-seg button { align-items: center !important; display: inline-flex !important; gap: 7px !important; justify-content: center !important; line-height: 1.1 !important; }
.hml .hml-seg button > span { display: block; line-height: 1.1; }
.hml .hml-seg button .hml-sex { opacity: .9; }

/* parent photos: square, never cropped */
.hml .hml-pcard-media { aspect-ratio: 1 / 1; }
.hml .hml-pcard-media img { object-fit: contain; }

/* gene field labels & hints */
.hml .hml-field > span { color: var(--text) !important; opacity: 1 !important; }
.hml .hml-field > span em { color: var(--muted) !important; }
.hml .hml-hint { color: var(--muted); display: block; font-size: 11px; line-height: 1.45; }

/* "may show" line on outcome cards */
.hml-may { align-items: center; display: flex; flex-wrap: wrap; gap: 4px; margin: 0 !important; }
.hml-may em { color: var(--faint); font-size: 10px; font-style: normal; font-weight: 700; letter-spacing: .08em; margin-right: 2px; text-transform: uppercase; }
.hml-may span { border: 1px dashed rgba(216, 100, 49, .45); border-radius: 6px; color: var(--ember-hi); font-size: 10.5px; padding: 1px 6px; }
.hml-may span.lvl-likely, .hml-may span.lvl-expected { background: rgba(216, 100, 49, .12); border-style: solid; }
.hml-may span.is-more { border-color: var(--edge); color: var(--muted); }

/* line-bred traits panel */
.hml-traits { border-top: 1px solid var(--hair); margin-top: 20px; padding-top: 18px; }
.hml-traits-head { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; margin-bottom: 12px; }
.hml.hml .hml-traits-head h4 { color: var(--brass) !important; font-size: 11px !important; letter-spacing: .16em !important; margin: 0 !important; text-transform: uppercase !important; }
.hml-nopct { border: 1px solid var(--edge); border-radius: 999px; color: var(--muted); font-size: 10.5px; letter-spacing: .04em; padding: 3px 9px; }
.hml-tlist { display: grid; gap: 10px; }
.hml-trait { align-items: start; background: rgba(7, 8, 5, .45); border: 1px solid var(--hair); border-radius: var(--r-md); display: grid; gap: 12px; grid-template-columns: 64px minmax(0, 1fr); padding: 10px; }
.hml .hml-trait-img { aspect-ratio: 1 / 1; background: #0b0c08 !important; border: 0 !important; border-radius: 10px !important; cursor: pointer; display: block !important; overflow: hidden; padding: 0 !important; width: 64px !important; }
.hml-trait-img img { display: block; height: 100%; object-fit: cover; width: 100%; }
.hml-trait-top { align-items: center; display: flex; flex-wrap: wrap; gap: 6px 10px; justify-content: space-between; }
.hml-trait-top strong { color: var(--text); font-size: 13.5px; }
.hml-lvl { align-items: center; color: var(--muted); display: inline-flex; font-size: 11px; font-weight: 700; gap: 7px; letter-spacing: .04em; white-space: nowrap; }
.hml-bars { display: inline-flex; gap: 2px; }
.hml-bars i { background: rgba(255, 250, 230, .12); border-radius: 2px; display: block; height: 10px; width: 5px; }
.hml-lvl.lvl-low .hml-bars i:nth-child(-n+1),
.hml-lvl.lvl-possible .hml-bars i:nth-child(-n+2),
.hml-lvl.lvl-likely .hml-bars i:nth-child(-n+3),
.hml-lvl.lvl-expected .hml-bars i { background: var(--ember); }
.hml-lvl.lvl-likely, .hml-lvl.lvl-expected { color: var(--ember-hi); }
.hml-lvl.lvl-possible { color: var(--brass-hi); }
.hml-lvl.lvl-possible .hml-bars i:nth-child(-n+2) { background: var(--brass); }
.hml-lvl.lvl-low .hml-bars i:nth-child(1) { background: var(--faint); }
.hml p.hml-trait-src { color: var(--brass-hi); font-size: 11px; margin: 3px 0 4px !important; }
.hml p.hml-trait-note { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 0 !important; }
.hml p.hml-traits-foot { font-size: 11.5px; margin: 12px 0 0 !important; }
@media (max-width: 720px) {
  .hml-trait { grid-template-columns: 48px minmax(0, 1fr); gap: 10px; }
  .hml .hml-trait-img { width: 48px !important; }
}

/* no tap flash on touch devices */
.hml, .hml *, .hml-modal, .hml-modal * { -webkit-tap-highlight-color: transparent; }
@media (hover: none) {
  .hml-card:hover, .hml-pcard:hover, .hml-ocard:hover { transform: none; }
  .hml-card:hover .hml-card-img img, .hml-pcard:hover .hml-pcard-media img, .hml-ocard:hover .hml-ocard-media img { transform: none; }
}

/* popup: reserve the image box (no layout jump while the large image loads) */
.hml-modal-media img { aspect-ratio: 1 / 1; background: #0b0c08; display: block; height: auto; object-fit: contain; }
@media (max-width: 720px) {
  /* full-screen sheet on phones: skip the costly page blur and fade, slide the sheet in instead */
  .hml-modal { animation: none; background: #0b0c08; -webkit-backdrop-filter: none; backdrop-filter: none; overscroll-behavior: contain; }
  .hml-modal-card { animation: hml-sheet .28s var(--ease) both; }
  @keyframes hml-sheet { from { transform: translateY(24px); opacity: .001; } }
}
/* a single outcome: one wide card, picture beside the text */
.hml .hml-ogrid.is-single { grid-template-columns: minmax(0, 1fr); }
.hml-ogrid.is-single .hml-ocard { display: grid; grid-template-columns: minmax(110px, 38%) minmax(0, 1fr); }
.hml-ogrid.is-single .hml-ocard-media { height: 100%; }
.hml-ogrid.is-single .hml-ocard-body { justify-content: center; }
.hml p.hml-onote { color: var(--muted); font-size: 11.5px; line-height: 1.45; margin: 0 !important; }
.hml-ogrid.is-single .hml-ometa span + span, .hml-ogrid.is-single .hml-ocard-body .hml-link { display: inline-flex; }