/* The website tools of ideas W9 / W10 / W11 / W13 / B13 / N3 (alerts, guild management, live broadcast, creator dashboard, combat reports, the Guide).
   Follows the taste layer (taste.css): surfaces stepped by tone instead of lines and boxes, no shadows, no gradients, one accent (gold) for the action and the
   live state, sharp corners from the shared radius tokens, tabular figures. Everything uses the shared tokens, so it follows site.css and taste.css alike.
   Class prefix: wh-. */

:where(.legacy) .wh-head { padding-bottom: clamp(20px, 3vw, 36px); }
:where(.legacy) .wh-note { margin: 0 0 var(--s-5, 24px); padding: 14px 18px; background: var(--surface-2); color: var(--text); }
:where(.legacy) .wh-block { display: block; }
:where(.legacy) .wh-pre { white-space: pre-line; overflow-wrap: anywhere; }
:where(.legacy) .wh-sub { display: grid; gap: 10px; padding: 16px 0 0; }
:where(.legacy) .wh-sub h3 { margin: 0; font-size: var(--step-0); font-weight: 600; }
:where(.legacy) .wh-code { margin: 0; padding: 14px 18px; background: var(--surface-2); font: 600 var(--step-1)/1.2 var(--ui); letter-spacing: .04em; font-variant-numeric: tabular-nums; user-select: all; }
:where(.legacy) .wh-textarea { height: auto; min-height: 120px; padding: 12px 14px; line-height: 1.5; resize: vertical; font: 400 var(--step-0)/1.5 var(--ui); }

:where(.legacy) .wh-checks { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 2px; }
:where(.legacy) .wh-check label { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 16px; background: var(--surface); cursor: pointer; }
:where(.legacy) .wh-check input { margin: 4px 0 0; width: 18px; height: 18px; accent-color: var(--gold); }
:where(.legacy) .wh-check strong { display: block; font-weight: 600; }
:where(.legacy) .wh-check small { display: block; color: var(--muted); font-size: var(--step--1); line-height: 1.45; }
:where(.legacy) .wh-check.off label { cursor: default; opacity: .62; }
@media (hover: hover) and (pointer: fine) { :where(.legacy) .wh-check:not(.off) label:hover { background: var(--surface-2); } }
:where(.legacy) .wh-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
:where(.legacy) .wh-switch input { width: 18px; height: 18px; accent-color: var(--gold); }

:where(.legacy) /* lists: the tools, :where(.legacy) the inbox, :where(.legacy) devices, :where(.legacy) live events, :where(.legacy) fights */
.wh-links, :where(.legacy) .wh-inbox, :where(.legacy) .wh-devices, :where(.legacy) .wh-live-list, :where(.legacy) .wh-fight-list, :where(.legacy) .wh-feed, :where(.legacy) .wh-notes, :where(.legacy) .wh-answers { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
:where(.legacy) .wh-links a { display: grid; gap: 2px; padding: 14px 16px; background: var(--surface); }
:where(.legacy) .wh-links a strong { font-weight: 600; }
:where(.legacy) .wh-links a span { color: var(--muted); font-size: var(--step--1); }
@media (hover: hover) and (pointer: fine) { :where(.legacy) .wh-links a:hover, :where(.legacy) .wh-live-item a:hover, :where(.legacy) .wh-fight-list a:hover, :where(.legacy) .wh-inbox a:hover { background: var(--surface-2); } :where(.legacy) .wh-links a:hover strong { color: var(--gold-strong); } }
:where(.legacy) .wh-inbox li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 16px; background: var(--surface); }
:where(.legacy) .wh-inbox li > a, :where(.legacy) .wh-inbox li > span { display: grid; gap: 2px; min-width: 0; }
:where(.legacy) .wh-inbox strong { font-weight: 600; }
:where(.legacy) .wh-inbox span span, :where(.legacy) .wh-inbox a span { color: var(--muted); font-size: var(--step--1); overflow-wrap: anywhere; }
:where(.legacy) .wh-inbox time, :where(.legacy) .wh-live-item time, :where(.legacy) .wh-fight-list time, :where(.legacy) .wh-feed time { color: var(--faint); font-size: var(--step--2); font-variant-numeric: tabular-nums; white-space: nowrap; }
:where(.legacy) .wh-devices { margin-top: 12px; }
:where(.legacy) .wh-devices li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; background: var(--surface); }
:where(.legacy) .wh-devices span { display: grid; }
:where(.legacy) .wh-devices small { color: var(--muted); }

:where(.legacy) .wh-guild { padding-bottom: var(--s-7, 48px); }
:where(.legacy) .wh-guild + .wh-guild { padding-top: var(--s-7, 48px); }
:where(.legacy) .wh-guild-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; }
:where(.legacy) .wh-guild-head p { margin: 6px 0 0; }
:where(.legacy) .wh-actions { white-space: nowrap; text-align: right; }
:where(.legacy) .wh-actions .btn { min-height: 32px; padding: 0 8px; font-size: var(--step--2); }
:where(.legacy) .wh-editor { margin-top: 16px; padding: 18px; background: var(--surface-2); }

:where(.legacy) .wh-live-item a { display: grid; grid-template-columns: minmax(120px, 170px) minmax(0, 1fr) auto auto; gap: 12px 18px; align-items: center; padding: 14px 16px; background: var(--surface); }
:where(.legacy) .wh-live-item.on a { background: var(--surface-2); }
:where(.legacy) .wh-live-kind { color: var(--muted); font-size: var(--step--1); }
:where(.legacy) .wh-board-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 16px; }
:where(.legacy) .wh-timer { font: 600 var(--step-2)/1 var(--ui); font-variant-numeric: tabular-nums; color: var(--gold-strong); }
:where(.legacy) .wh-board tr.out td { color: var(--faint); }
:where(.legacy) .wh-bracket { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 12px; overflow-x: auto; padding-top: 18px; }
:where(.legacy) .wh-round h3 { margin: 0 0 8px; font-size: var(--step--1); font-weight: 600; color: var(--muted); }
:where(.legacy) .wh-round ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
:where(.legacy) .wh-match { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 12px; background: var(--surface); font-size: var(--step--1); }
:where(.legacy) .wh-match.on { background: var(--surface-2); }
:where(.legacy) .wh-match span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
:where(.legacy) .wh-match span.win { color: var(--text); font-weight: 600; }
:where(.legacy) .wh-match b { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
:where(.legacy) .wh-match small { grid-column: 1 / -1; color: var(--faint); }
:where(.legacy) .wh-notes { margin-top: 14px; }
:where(.legacy) .wh-notes li { color: var(--muted); font-size: var(--step--1); }
:where(.legacy) .wh-feed li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 8px 0; }
:where(.legacy) .wh-feed li + li { border-top: 0; }

:where(.legacy) .wh-fight-list a { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; gap: 12px 16px; align-items: center; padding: 12px 16px; background: var(--surface); }
:where(.legacy) .wh-fight-list img, :where(.legacy) .wh-icon-empty { width: 32px; height: 32px; }
:where(.legacy) .wh-icon-empty { display: block; background: var(--surface-2); }
:where(.legacy) .wh-fight-list span { display: grid; min-width: 0; }
:where(.legacy) .wh-fight-list small { color: var(--muted); font-size: var(--step--1); }
:where(.legacy) .wh-fight td { vertical-align: middle; }
:where(.legacy) .wh-dmg { display: flex; justify-content: space-between; gap: 10px; font-variant-numeric: tabular-nums; }
:where(.legacy) .wh-dmg small { color: var(--muted); }
:where(.legacy) .wh-fight .bar { margin-top: 6px; min-width: 120px; }
:where(.legacy) .wh-fight .bar i { background: var(--gold); }

:where(.legacy) .wh-ask { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
:where(.legacy) .wh-examples { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
:where(.legacy) .wh-examples .filter-chip { cursor: pointer; font: inherit; font-size: var(--step--1); padding: 6px 12px; color: var(--muted); }
:where(.legacy) .wh-answers { gap: 18px; margin-top: 18px; }
:where(.legacy) .wh-q { margin: 0 0 6px; color: var(--muted); font-size: var(--step--1); }
:where(.legacy) .wh-q::before { content: "› "; color: var(--gold); }
:where(.legacy) .wh-a { padding: 18px 20px; background: var(--surface); display: grid; gap: 8px; }
:where(.legacy) .wh-a p { margin: 0; }
:where(.legacy) .wh-a-head { display: flex; align-items: center; gap: 10px; }
:where(.legacy) .wh-a-head strong { font-size: var(--step-1); font-weight: 600; }
:where(.legacy) .wh-a-unknown, :where(.legacy) .wh-a-resting { background: var(--surface-2); }
:where(.legacy) .wh-a-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
:where(.legacy) .wh-a-others a + a::before { content: " · "; color: var(--faint); }

@media (max-width: 720px) {
  :where(.legacy) .wh-live-item a { grid-template-columns: minmax(0, 1fr) auto; }
  :where(.legacy) .wh-live-kind { grid-column: 1 / -1; }
  :where(.legacy) .wh-fight-list a { grid-template-columns: 32px minmax(0, 1fr); }
  :where(.legacy) .wh-fight-list a > :nth-child(3), :where(.legacy) .wh-fight-list a > time { grid-column: 2; }
  :where(.legacy) .wh-ask { grid-template-columns: 1fr; }
  :where(.legacy) .wh-actions { white-space: normal; }
}