/* Dark is the default; the toggle in the top bar switches to light. Item tooltips stay dark in both, as in game. */
  :root, [data-theme="dark"] {
    color-scheme: dark;
    --bg: #0d0f14; --panel: #151922; --panel-2: #1b202b; --line: #2a3140; --line-strong: #3a4357;
    --text: #e8e6e1; --muted: #9aa3b2; --accent: #c79c6e; --accent-tint: rgba(199,156,110,.14); --good: #6fd36f;
    --stripe: rgba(255,255,255,.015); --tile-bg: rgba(13,15,20,.7); --frame-bg: #0a0c10;
    --doll-hi: #262c3a; --doll-lo: #10131a; --busy: #f0b232; --stat-gear: #1eff00;
    --horde-bg: #3a1616; --horde-text: #ff6b5b; --alliance-bg: #15243d; --alliance-text: #6ba6ff;
    --q-poor: #9d9d9d; --q-common: #ffffff; --q-uncommon: #1eff00;
    --q-rare: #0070dd; --q-rare-text: #3d9bff; --q-epic: #a335ee; --q-epic-text: #b871f5; --q-legendary: #ff8000;
    --coin-g: #ffd700; --coin-s: #c7c7cf; --coin-c: #eda55f;
  }
  /* The game's item colours are made for a dark background; on light they are deepened to stay readable. */
  [data-theme="light"] {
    color-scheme: light;
    --bg: #f3f4f6; --panel: #ffffff; --panel-2: #e9ecf0; --line: #d3d8e0; --line-strong: #b4bcc8;
    --text: #15181e; --muted: #5a6372; --accent: #8f5f2c; --accent-tint: rgba(143,95,44,.12); --good: #1d7f1d;
    --stripe: rgba(0,0,0,.025); --tile-bg: #ffffff; --frame-bg: #e3e6eb;
    --doll-hi: #ffffff; --doll-lo: #e7eaef; --busy: #a86b00; --stat-gear: #1d7f1d;
    --horde-bg: #fbe1de; --horde-text: #a8231a; --alliance-bg: #dde8fb; --alliance-text: #1c56b8;
    --q-poor: #6f6f6f; --q-common: #15181e; --q-uncommon: #1d7f1d;
    --q-rare: #0062c4; --q-rare-text: #0062c4; --q-epic: #8a2be2; --q-epic-text: #7b22c9; --q-legendary: #c25a00;
    --coin-g: #9a7b00; --coin-s: #6c6c74; --coin-c: #a8622a;
  }
  /* Game icons keep the game's soft corners; everything else on the site is square. */
  .frame, .icon, .src-icon, .race-icon, .chip img, .faction-switch label img, .faction-link img,
  .class-icon, .spec-icon, .promise-icon, .tabs label img, .queued-badge img { border-radius: 4px; }
  .hero-icon, .home-link img { border-radius: 6px; }
  * { box-sizing: border-box; }
  body { margin: 0; background: var(--bg); color: var(--text);
         font: 15px/1.45 "Segoe UI", system-ui, -apple-system, sans-serif; }
  main { max-width: 1180px; margin: 0 auto; padding: 32px 24px 40px; }
  header { margin-bottom: 20px; }
  .eyebrow { color: var(--accent); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; }
  h1 { margin: 4px 0 6px; font-size: 32px; font-weight: 700; letter-spacing: -.01em; }
  .sub { color: var(--muted); font-size: 14px; }
  .tile { background: var(--tile-bg); border: 1px solid var(--line); padding: 12px 22px; text-align: center; }
  .tile .v { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .tile .v span { font-size: 14px; font-weight: 500; color: var(--muted); }
  .doll { display: grid; grid-template-columns: 56px 1fr 56px; gap: 0 24px; max-width: 640px; margin: 0 auto;
          padding: 18px; border: 1px solid var(--line);
          background: radial-gradient(ellipse at 50% 42%, var(--doll-hi) 0%, var(--panel) 55%, var(--doll-lo) 100%); }
  .doll-col { display: grid; gap: 8px; align-content: start; }
  .doll-centre { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
  .centre-name { font-size: 20px; font-weight: 700; color: var(--accent); }
  .centre-who { color: var(--muted); font-size: 13px; margin-bottom: 10px; }
  .doll-bottom { grid-column: 1 / -1; display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
  .doll-slot { position: relative; width: 56px; height: 56px; }
  .frame { display: block; width: 56px; height: 56px; border: 2px solid var(--line);
           box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #000; background: var(--frame-bg); }
  .doll-slot.empty .frame { opacity: .45; }
  .has-tip { position: relative; }
  span.has-tip { display: inline-block; }
  .has-tip:hover, .has-tip:focus-visible, .has-tip.open { z-index: 20; }
  .has-tip { -webkit-tap-highlight-color: transparent; }
  .frame, .icon { -webkit-touch-callout: none; user-select: none; }
  .has-tip:focus:not(:focus-visible) { outline: none; }
  .tip { display: none; position: absolute; z-index: 20; top: 0; width: max-content; max-width: 320px;
         padding: 9px 11px; background: rgba(6,8,22,.97); border: 1px solid #8b93a8;
         box-shadow: 0 6px 18px rgba(0,0,0,.65); color: #fff; font-size: 13px; font-weight: 400; line-height: 1.38;
         text-align: left; white-space: normal; }
  /* The tip never takes the mouse: only the item itself keeps it open, so it cannot hold itself open by sitting
     under the cursor. focus-visible is keyboard focus only; plain :focus would pin the tip after a click. */
  .tip { pointer-events: none; }
  .has-tip:focus-visible > .tip, .has-tip.open > .tip { display: block; }
  @media (hover: hover) { .has-tip:hover > .tip { display: block; } }
  /* On a touch screen an open tooltip is a sheet along the bottom: never off screen, never under the thumb. */
  @media (hover: none) {
    body .has-tip.open > .tip { position: fixed; top: auto; bottom: 12px; left: 12px; right: 12px; transform: none;
                           width: auto; max-width: none; max-height: 70vh; overflow: auto; z-index: 50; font-size: 14px; }
    .doll-slot.open .frame { outline: 2px solid var(--accent); outline-offset: 1px; }
    .item-cell.open, span.has-tip.open { outline: 2px solid var(--accent); outline-offset: 3px; }
  }
  .doll-slot.left .tip { left: 64px; }
  .doll-slot.right .tip { right: 64px; }
  .doll-slot.bottom .tip { top: auto; bottom: 64px; left: 50%; transform: translateX(-50%); }
  .item-cell > .tip { top: 100%; left: 52px; }
  .alt .tip { top: 100%; right: 0; }
  .tip-name { font-size: 15px; }
  .tip-row { display: flex; justify-content: space-between; gap: 18px; }
  .tip-sources { margin-top: 6px; padding-top: 6px; border-top: 1px solid #333c52; color: var(--muted); }
  .tip-sources .src { font-size: 12.5px; }
  .tip-sources .kind { display: none; }
  .t-q { color: #ffd100; }   .t-q0, .t-poor { color: #9d9d9d; } .t-q1, .t-common { color: #fff; }
  .t-q2, .t-uncommon { color: #1eff00; } .t-q3, .t-rare { color: #0070dd; } .t-q4, .t-epic { color: #a335ee; }
  .t-q5, .t-legendary { color: #ff8000; }
  table { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 24px;
          background: var(--panel); border: 1px solid var(--line); }
  th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase;
       letter-spacing: .06em; padding: 10px 14px; background: var(--panel-2); border-bottom: 1px solid var(--line); }
  td { padding: 9px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
  tr:last-child td { border-bottom: 0; }
  tbody tr:nth-child(even) td { background: var(--stripe); }
  td.slot { color: var(--muted); font-size: 13px; width: 92px; white-space: nowrap; }
  .item-cell { display: flex; align-items: center; gap: 12px; }
  .icon { width: 40px; height: 40px; border: 2px solid var(--line); flex: none; }
  a.item { text-decoration: none; font-weight: 600; }
  a.item:hover { text-decoration: underline; }
  .q-poor { color: var(--q-poor); }         .qb-poor { border-color: var(--q-poor); }
  .q-common { color: var(--q-common); }     .qb-common { border-color: var(--line-strong); }
  .q-uncommon { color: var(--q-uncommon); } .qb-uncommon { border-color: var(--q-uncommon); }
  .q-rare { color: var(--q-rare-text); }    .qb-rare { border-color: var(--q-rare); }
  .q-epic { color: var(--q-epic-text); }    .qb-epic { border-color: var(--q-epic); }
  .q-legendary { color: var(--q-legendary); } .qb-legendary { border-color: var(--q-legendary); }
  .meta { color: var(--muted); font-size: 12.5px; }
  .enchant { color: var(--good); font-size: 12.5px; }
  /* The game's money text colours. */
  .coin-g { color: var(--coin-g); } .coin-s { color: var(--coin-s); } .coin-c { color: var(--coin-c); }
  .src { font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
  .src-icon { width: 18px; height: 18px; flex: none; }
  .kind { display: inline-block; min-width: 84px; color: var(--muted); font-size: 11px; font-weight: 600;
          text-transform: uppercase; letter-spacing: .05em; }
  .alts { width: 290px; }
  td.details { width: 1%; white-space: nowrap; text-align: right; }
  .details-link { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--line);
                  background: var(--panel-2); color: var(--text); font-size: 13px; font-weight: 600;
                  text-decoration: none; }
  .details-link:hover, .details-link:focus-visible { border-color: var(--accent); color: var(--accent); }
  .slot-table td { padding: 12px 14px; vertical-align: top; }
  .slot-table .rank { width: 44px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .slot-table tr.worn td { background: var(--accent-tint); }
  .slot-table .rank .bis { color: var(--accent); font-weight: 700; }
  .slot-table .icon { width: 48px; height: 48px; }
  .slot-dps { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .slot-delta { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
  .slot-delta.tie { color: var(--accent); font-weight: 600; }
  /* Stacked like the game's tooltip: one line per stat, in the tooltip's own colours. */
  .stats { max-width: 420px; font-size: 13px; line-height: 1.4; }
  .stat { display: flex; justify-content: space-between; gap: 18px; }
  .alt { font-size: 13px; white-space: nowrap; }
  .alt a.item { font-weight: 500; }
  .delta { display: inline-block; width: 40px; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; }
  .delta.tie, .tie-word { color: var(--accent); font-weight: 600; }
  .races { max-width: 640px; margin: 24px auto 0; }
  .races h2 { font-size: 18px; margin: 0 0 8px; }
  .races-note { color: var(--muted); font-size: 13px; font-weight: 500; }
  table.race-table { margin-top: 0; }
  .race-table td { padding: 6px 12px; }
  .race-name { white-space: nowrap; }
  .race-icon { border: 1px solid #000; vertical-align: -4px; margin-right: 6px; }
  .faction-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; }
  .f-horde .faction-dot, .f-horde rect { background: #d9473b; fill: #d9473b; }
  .f-alliance .faction-dot, .f-alliance rect { background: #3b7bd9; fill: #3b7bd9; }
  .race-bar { width: 116px; }
  .race-dps { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
  .race-delta { text-align: right; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; width: 56px; }
  .race-table tr.own td { background: var(--accent-tint); }
  .race-table tr.own .race-name { color: var(--accent); font-weight: 700; }
  @media (max-width: 420px) { .race-bar { display: none; } }
  .setup-box { border: 1px solid var(--line); background: var(--panel); padding: 4px 14px; }
  .setup-row { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .setup-row:last-child { border-bottom: 0; }
  .setup-label { color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; padding-top: 6px; }
  .chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border: 1px solid var(--line);
          background: var(--panel-2); color: var(--text); font-size: 13px; text-decoration: none; }
  .chip img { border: 1px solid #000; margin-left: -4px; }
  a.chip:hover, a.chip:focus-visible { border-color: var(--accent); }
  .chip .item { text-decoration: none; }
  .chip.none { color: var(--muted); border-style: dashed; background: none; }
  @media (max-width: 760px) { .setup-row { grid-template-columns: 1fr; gap: 6px; } .setup-label { padding-top: 0; } }
  .stat-table { width: 100%; }
  .stat-table th { padding: 8px 12px; }
  .stat-table th:not(:first-child), .stat-num { text-align: right; font-variant-numeric: tabular-nums; }
  .stat-name { font-weight: 600; }
  .stat-num { color: var(--muted); }
  .stat-gear { color: var(--stat-gear); }
  .stat-total { color: var(--text); font-weight: 700; }
  /* Tabs: equal squares in one row. Desktop puts the icon beside the label; phones stack a short label under it so
     every tab fits one row with a large tap target. */
  .tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin: 18px 0 22px; border: 1px solid var(--line);
          background: var(--panel); }
  .tabs input { position: absolute; opacity: 0; pointer-events: none; }
  .tabs label { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 6px 10px;
                border-right: 1px solid var(--line); border-bottom: 3px solid transparent; color: var(--muted);
                font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; }
  .tabs label:last-of-type { border-right: 0; }
  .tabs label img { flex: none; border: 1px solid #000; opacity: .7; }
  .tabs label:hover { color: var(--text); }
  .tabs input:checked + label { color: var(--text); background: var(--panel-2); border-bottom-color: var(--accent); }
  .tabs input:checked + label img { opacity: 1; }
  .tabs input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: -2px; }
  .tab-short { display: none; }
  .tab-panel { display: none; }
  body:has(#tab-results:checked) .tab-panel[data-tab="results"] { display: block; }
  body:has(#tab-new-gear:checked) .tab-panel[data-tab="new-gear"] { display: block; }
  body:has(#tab-queue:checked) .tab-panel[data-tab="queue"] { display: block; }
  body:has(#tab-how:checked) .tab-panel[data-tab="how"] { display: block; }
  body:has(#tab-gear:checked) .tab-panel[data-tab="gear"] { display: block; }
  body:has(#tab-stats:checked) .tab-panel[data-tab="stats"] { display: block; }
  body:has(#tab-races:checked) .tab-panel[data-tab="races"] { display: block; }
  body:has(#tab-setup:checked) .tab-panel[data-tab="setup"] { display: block; }
  .tab-panel > .races, .tab-panel > section:first-child { margin-top: 0; }
  footer { margin-top: 18px; color: var(--muted); font-size: 12.5px; display: grid; gap: 4px; }
  footer b { color: var(--text); font-weight: 600; }
  footer a { color: var(--text); }
  @media (max-width: 760px) {
    main { padding: 20px 14px 32px; }
    h1 { font-size: 24px; }
    .tabs { margin: 14px 0 18px; }
    .tabs label { flex-direction: column; gap: 4px; min-height: 60px; padding: 6px 2px; font-size: 12px; text-align: center; }
    .tab-label { display: none; }
    .tab-short { display: inline; }
    .doll { grid-template-columns: 56px 1fr 56px; gap: 0 10px; padding: 14px 10px; }
    .tile { padding: 8px 6px; }
    .tile .v { font-size: 20px; }
    .tip { max-width: 250px; }
    .alt .tip { right: auto; left: 0; }
    .item-cell > .tip { left: 0; }
    table, tbody, tr, td { display: block; width: auto; }
    thead { display: none; }
    tr { padding: 10px 12px; border-bottom: 1px solid var(--line); }
    td { border: 0; padding: 4px 0; }
    td.slot { width: auto; text-transform: uppercase; font-size: 11px; letter-spacing: .06em; }
    .alts { width: auto; }
    td.alts::before { content: "Next Best"; display: block; margin: 6px 0 2px; color: var(--muted); font-size: 11px;
                      font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
    .alt { padding: 5px 0; }
    table.race-table { display: table; width: 100%; } .race-table tbody { display: table-row-group; }
    .race-table tr { display: table-row; padding: 0; } .race-table td { display: table-cell; padding: 6px 8px; }
    .stat-table thead { display: table-header-group; }
    .doll { max-width: 420px; }
    .kind { min-width: 84px; }
  }

  /* A flat bar across the top: the way back up on the left, the light/dark switch on the right. */
  .topbar { background: var(--panel); border-bottom: 1px solid var(--line); }
  .topbar-in { display: flex; align-items: center; justify-content: space-between; gap: 12px;
               max-width: 1180px; margin: 0 auto; padding: 10px 24px; }
  .topbar + main { padding-top: 24px; }
  /* Two-way switches (faction, theme): equal halves in a track, and a thumb that slides under the chosen half. */
  .switch { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px;
            border: 1px solid var(--line); background: var(--panel); -webkit-tap-highlight-color: transparent; }
  .switch > .thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); }
  .switch.at-2 > .thumb { transform: translateX(100%); }
  .ready .switch > .thumb { transition: transform .22s ease, background-color .22s ease; }
  .ready .switch label, .ready .switch .opt, .ready .switch .faction-link { transition: color .22s ease; }
  @media (prefers-reduced-motion: reduce) { .ready .switch > .thumb { transition: none; } }
  .theme-toggle { display: none; flex: none; color: var(--muted); font: inherit; cursor: pointer; }
  .js .theme-toggle { display: inline-grid; }
  .theme-toggle .opt { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 32px; }
  .theme-toggle > .thumb { background: var(--accent-tint); outline: 1px solid var(--accent); outline-offset: -1px; }
  [data-theme="light"] .theme-toggle > .thumb { transform: translateX(100%); }
  [data-theme="dark"] .theme-toggle .opt-dark, [data-theme="light"] .theme-toggle .opt-light { color: var(--accent); }
  .theme-toggle:hover, .theme-toggle:focus-visible { border-color: var(--accent); }
  .crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin: 0; padding: 0; list-style: none;
               font-size: 14px; font-weight: 600; }
  .crumbs li { display: inline-flex; align-items: center; }
  .crumbs li + li::before { content: "\203A"; color: var(--muted); padding: 0 6px; font-weight: 400; font-size: 16px; }
  .crumbs a, .crumbs [aria-current] > span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px;
              border: 1px solid var(--line); background: var(--panel); color: var(--text);
              text-decoration: none; -webkit-tap-highlight-color: transparent; }
  .crumbs a:hover, .crumbs a:focus-visible { border-color: var(--accent); color: var(--accent); }
  .crumbs a:active { background: var(--panel-2); }
  .crumbs [aria-current] > span { border-color: var(--accent); background: var(--accent-tint); color: var(--accent); }
  main.wide, .topbar:has(+ main.wide) .topbar-in { max-width: 1500px; }
  /* Class colours are made for dark; on light they are deepened so the priest's white and the rogue's yellow read. */
  [data-theme="light"] .class-head { color: color-mix(in srgb, var(--class) 62%, #000); }
  [data-theme="light"] .class-group .card:not(.planned) { border-left-color: color-mix(in srgb, var(--class) 62%, #000); }
  .faction-switch { margin: 16px 0 10px; }
  .faction-switch input { position: absolute; opacity: 0; pointer-events: none; }
  .faction-switch label, .faction-link { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 40px;
                          padding: 0 16px 0 8px; color: var(--muted); font-weight: 600; cursor: pointer; text-decoration: none; }
  .faction-switch > .thumb, .faction-links > .thumb { background: var(--horde-bg); }
  .faction-switch:has(#faction-alliance:checked) > .thumb { transform: translateX(100%); background: var(--alliance-bg); }
  .faction-links.at-2 > .thumb { background: var(--alliance-bg); }
  #faction-horde:checked + label, .faction-link.on.f-horde { color: var(--horde-text); }
  #faction-alliance:checked + label, .faction-link.on.f-alliance { color: var(--alliance-text); }
  .faction-switch input:focus-visible + label, .faction-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  body:has(#faction-horde:checked) [data-faction="alliance"],
  body:has(#faction-alliance:checked) [data-faction="horde"] { display: none; }
  .faction-links { margin-top: 10px; }
  a.faction-link:not(.on):hover { color: var(--text); }
  .faction-link.off { opacity: .4; cursor: default; }
  .spec-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  .spec-tab { display: inline-flex; align-items: center; gap: 8px; padding: 5px 16px 5px 6px; border: 1px solid var(--line); background: var(--panel);
              color: var(--text); text-decoration: none; font-weight: 600; }
  a.spec-tab:hover { border-color: var(--accent); }
  .spec-tab.planned { opacity: .5; font-weight: 500; }
  .spec-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; align-items: start; }
  .spec-panel .doll { max-width: none; }
  .spec-panel .more { display: block; margin-top: 10px; text-align: center; color: var(--accent); text-decoration: none; font-weight: 600; }
  .spec-panel .more:hover { text-decoration: underline; }
  .planned-doll { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 604px;
                  border-style: dashed; opacity: .55; }
  .site-foot { max-width: 1180px; margin: 0 auto; padding: 0 24px 32px; color: var(--muted); font-size: 12px; }
  .site-foot a, .sub a { color: var(--muted); }
  h1 .byline { font-size: 16px; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-left: 6px; }
  .author { position: relative; cursor: default; border-bottom: 1px dotted currentColor; }
  .discord-card { display: none; position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); z-index: 10;
    align-items: center; gap: 8px; padding: 8px 12px; white-space: nowrap;
    background: #111; border: 1px solid #333; color: #fff; font-size: 14px; font-weight: 500; }
  .discord-logo { color: #5865f2; flex: none; }
  .author:hover .discord-card, .author:focus .discord-card { display: flex; }
  /* Classes sit side by side, each as wide as its specs, so a one-spec class does not take a whole row. */
  .home { text-align: center; padding-top: 12vh; }
  .home-link { display: inline-flex; align-items: center; gap: 16px; margin-top: 18px; padding: 14px 26px 14px 14px;
               border: 1px solid var(--line); background: var(--panel); color: var(--text);
               font-size: 22px; font-weight: 700; text-decoration: none; }
  .home-link:hover, .home-link:focus-visible { border-color: var(--accent); }
  .home-link img { border: 1px solid #000; }
  .hero { display: flex; align-items: center; gap: 16px; }
  .hero h1 { margin: 0; }
  .tagline { color: var(--muted); font-size: 15px; margin-top: 2px; }
  .hero-icon { border: 1px solid #000; box-shadow: 0 0 0 1px var(--line); flex: none; }
  @media (max-width: 760px) {
    .hero-icon { width: 44px; height: 44px; }
    /* On a phone the title fills the line, so the byline goes whole onto its own line under it. */
    h1 .byline { display: block; margin: 2px 0 0; white-space: nowrap; }
    .discord-card { left: 0; transform: none; }
  }
  .classes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 14px; margin-top: 12px; }
  .span-1 { grid-column: span 1; } .span-2 { grid-column: span 2; } .span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; }
  .span-1 .cards { grid-template-columns: minmax(0, 1fr); } .span-2 .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .span-3 .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .span-4 .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  @media (max-width: 1000px) {
    .classes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .span-3, .span-4 { grid-column: span 2; }
    .span-3 .cards, .span-4 .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  .class-head { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 9px; color: var(--class);
                font-size: 18px; font-weight: 700; text-decoration: none; }
  a.class-head:hover { text-decoration: underline; }
  .class-icon { border: 1px solid #000; }
  .class-group .card { border-left: 3px solid var(--class); }
  .class-group .card.planned { border-left-color: var(--line); }
  .c-warrior { --class: #c69b6d; }
  .c-paladin { --class: #f48cba; }
  .c-hunter { --class: #aad372; }
  .c-rogue { --class: #fff468; }
  .c-priest { --class: #ffffff; }
  .c-shaman { --class: #0070dd; }
  .c-mage { --class: #3fc7eb; }
  .c-warlock { --class: #8788ee; }
  .c-druid { --class: #ff7c0a; }
  .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
  .card { position: relative; display: block; background: var(--panel); border: 1px solid var(--line);
          padding: 16px 18px; text-decoration: none; color: var(--text); }
  a.card:hover { border-color: var(--accent); }
  .card-head { display: flex; align-items: center; gap: 12px; }
  .spec-icon { border: 1px solid #000; flex: none; }
  /* Every card has the same lines, none of which wraps, so all cards are the same size. */
  .card-head, .card-name, .card-meta { min-width: 0; }
  .card-name { font-weight: 700; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .card-dps { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; margin: 4px 0; }
  .card-dps span { font-size: 13px; color: var(--muted); font-weight: 500; }
  .card-meta { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .card-prof { margin-top: 3px; }
  .card-prof .prof + .prof { margin-left: 10px; }
  .card-spacer { visibility: hidden; }
  .card.planned { opacity: .55; border-style: dashed; }
  .planned .spec-icon { filter: grayscale(1); }
  .fresh { display: inline-flex; align-items: center; gap: 7px; margin-top: 6px; color: var(--muted); font-size: 12.5px; }
  /* The sim status light stays round, like a status lamp; it is the one non-icon exception to the square look. */
  .fresh .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 6px var(--good); }
  .fresh > .tip { top: 100%; left: 0; margin-top: 6px; }
  .fresh .resim-row { display: none; }
  /* A list waiting in the sim queue: a tag in the card's bottom right corner, level with "Simmed ...", the queue
     tab's icon beside the word. */
  .queued-badge { position: absolute; bottom: 12px; right: 12px; display: inline-flex; align-items: center; gap: 5px;
                  padding: 2px 7px 2px 3px; border: 1px solid var(--busy); background: var(--panel-2); color: var(--busy);
                  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
  .queued-badge img { border: 1px solid #000; }
  .queued-badge[hidden] { display: none; }
  .fresh.busy { color: var(--busy); }
  .fresh.busy .dot { background: var(--busy); box-shadow: 0 0 6px var(--busy); animation: pulse 1.4s ease-in-out infinite; }
  .fresh.busy .resim-row { display: flex; }
  @keyframes pulse { 50% { opacity: .35; } }
  @media (prefers-reduced-motion: reduce) { .fresh.busy .dot { animation: none; } }
  .new-gear { margin-top: 40px; }
  .new-gear h2 { font-size: 22px; margin: 0 0 12px; }
  .new-list { border: 1px solid var(--line); background: var(--panel); }
  .load-more { display: none; width: 100%; min-height: 48px; margin-top: -1px; border: 1px solid var(--line); background: var(--panel-2);
               color: var(--text); font: inherit; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .js .load-more { display: block; }
  .load-more:hover, .load-more:focus-visible { border-color: var(--accent); color: var(--accent); }
  .load-more:disabled { color: var(--muted); cursor: progress; }
  .new-item { display: grid; grid-template-columns: minmax(220px, 1.3fr) minmax(160px, 1.6fr) auto 96px; gap: 12px; align-items: center;
              padding: 9px 14px; border-bottom: 1px solid var(--line); }
  .new-item:last-child { border-bottom: 0; }
  .new-classes { display: flex; gap: 4px; }
  .new-when { color: var(--muted); font-size: 12.5px; text-align: right; white-space: nowrap; }
  @media (max-width: 760px) {
    .new-item { grid-template-columns: 1fr auto; }
    .new-source { grid-column: 1 / -1; order: 3; }
    .new-classes { grid-column: 1 / -1; order: 4; }
  }
  .jobs { margin-top: 40px; }
  .jobs h2 { font-size: 22px; margin: 0 0 12px; }
  .job-list { border: 1px solid var(--line); background: var(--panel); }
  .job { display: grid; grid-template-columns: minmax(220px, 1.4fr) 110px minmax(150px, 1fr) 80px; gap: 12px; align-items: center;
         padding: 9px 14px; border-bottom: 1px solid var(--line); }
  .job:last-child { border-bottom: 0; }
  .job-who { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .job-name { font-weight: 600; }
  .job-faction { display: inline-flex; align-items: center; gap: 2px; color: var(--muted); font-size: 12.5px; }
  .job-faction.f-horde { color: var(--horde-text); } .job-faction.f-alliance { color: var(--alliance-text); }
  .job-state { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; }
  .job-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
  .job.running .job-state { color: var(--busy); }
  .job.running .job-dot { background: var(--busy); box-shadow: 0 0 6px var(--busy); animation: pulse 1.4s ease-in-out infinite; }
  .job.finished .job-dot { background: var(--good); }
  .job.finished .job-runtime { color: var(--muted); font-weight: 400; }
  .jobs-sub { font-size: 16px; margin: 28px 0 10px; }
  @media (prefers-reduced-motion: reduce) { .job.running .job-dot { animation: none; } }
  .job-time { color: var(--muted); font-size: 12.5px; }
  .job-runtime { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
  .job-empty { padding: 12px 14px; color: var(--muted); }
  @media (max-width: 760px) {
    .job { grid-template-columns: 1fr auto; }
    .job-who { grid-column: 1 / -1; }
  }
  .how { margin-top: 40px; }
  .how h2 { font-size: 22px; margin: 0 0 14px; }
  .promises { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
  /* Plain text beside an icon, not a box: these are not links, so nothing about them may look pressable. */
  .how { border-top: 1px solid var(--line); padding-top: 26px; }
  .tab-panel > .how, .tab-panel > .new-gear, .tab-panel > .jobs { margin-top: 0; border-top: 0; padding-top: 0; }
  .promise { display: flex; gap: 14px; align-items: flex-start; padding: 4px 0; }
  .promise-icon { border: 1px solid #000; flex: none; }
  .promise-title { font-weight: 700; font-size: 16px; color: var(--accent); }
  .promise-text { color: var(--muted); font-size: 13.5px; margin-top: 2px; }
  .site-foot { padding-bottom: 14px; }
  .spec-tab { min-height: 40px; }
  @media (max-width: 760px) {
    .topbar-in { padding: 8px 14px; align-items: flex-start; }
    .crumbs a, .crumbs [aria-current] > span { min-height: 40px; padding: 0 12px; }
    .crumbs li + li::before { padding: 0 4px; }
    .site-foot { padding-left: 14px; padding-right: 14px; }
    .cards, .class-group .cards { grid-template-columns: 1fr; }
    .classes { grid-template-columns: 1fr; }
    .class-group { grid-column: auto; }
    .planned-doll { min-height: 0; padding: 22px; }
  }