/* Ends of Elsewhere: the shared components (#273/#290; DECISIONS I36; docs/design/style-inventory.md §4). Every part of
   the game client wears one of these, on the tokens of dist/theme.css only (tests/style-guard.test.mjs). Each component
   names the parts that use it; dist/hud-shell.css only places them. Loaded after the older sheets and before
   hud-shell.css. The pages outside the game (the account page, the arrival page, the appearance detail page: r56 D,
   #322) set body.page and wear the same components: the generic ones are written for both (:is(body.hud,body.page),
   the same specificity as before). */

/* ---------- base type (decision 6): DM Sans everywhere, Barlow Condensed for titles and big numbers ---------- */
:is(body.hud,body.page){font-family:var(--ui-font);color:var(--ui-text)}
:is(body.hud,body.page) :is(button,input,select,textarea){font-family:var(--ui-font)}
body.hud :is(h1,h2,h3,.panel-title,.settings-dialog>header>h2){font-family:var(--ui-font-title);font-weight:var(--ui-fw-strong);letter-spacing:.3px}
body.hud :is(.vital-meter b,.plate-charges b,.plate-cd,.plate-magic-folded b,#rival-health,#armour-values,.combat-tracker dd,.xp-drop span,
  .own-armour strong,.own-armour small,.ammo-count,#equipped-reserves){font-variant-numeric:tabular-nums}

/* ---------- click-through (#241): an area over the game that lets clicks reach the game behind it ----------
   Only what can be used inside it takes a click: buttons, links, form fields, focusable things, and anything marked
   data-hit (a surface that needs hover or a click of its own: a tooltip's anchor, a panel, a notice). Give a container
   the class; never re-enable single controls by ID. An area that is click-through only in one state is listed here by
   that state. Parts: the vitals bar, the target frame, the bottom bar and its magic column, the notice strip, the bag's
   item layer; the menu column (desktop; phones while closed); the chat (phones while closed; desktop see-through).
   Guarded by tests/hud-clickable.test.mjs; hit-tested by scripts/perf/hud-modes-browser.mjs. */
:where(.click-through,
  body.hud:not(.mobile-mode) .workspace>aside>.kit-panel,
  body.mobile-mode:not(.panel-open) .kit-panel,
  body.hud.mobile-mode:not(.chat-open) .chat-panel,
  body.chat-see-through:not(.mobile-mode) .workspace>.chat-panel){pointer-events:none}
:where(.click-through,
  body.hud:not(.mobile-mode) .workspace>aside>.kit-panel,
  body.mobile-mode:not(.panel-open) .kit-panel,
  body.hud.mobile-mode:not(.chat-open) .chat-panel,
  body.chat-see-through:not(.mobile-mode) .workspace>.chat-panel)
  :where(button,a[href],input,select,textarea,[role=button],[tabindex]:not([tabindex="-1"]),[data-hit]){pointer-events:auto}

/* ---------- 1. button ---------- */
:is(body.hud,body.page) button{border-radius:var(--ui-radius-sm);border:var(--ui-border) solid var(--ui-line-control);background:var(--ui-surface-2);
  color:var(--ui-text);font-size:var(--ui-fs-md);font-weight:var(--ui-fw-control);
  transition:background var(--ui-dur-fast),border-color var(--ui-dur-fast)}
:is(body.hud,body.page) button:hover:not(:disabled){border-color:var(--ui-line-strong);background:var(--ui-surface-3)}
:is(body.hud,body.page) button:active:not(:disabled){background:var(--ui-pressed-bg)}
/* one disabled look (the global .5 opacity multiplied with the bar's icon dim: §5.8) */
:is(body.hud,body.page) button:disabled{opacity:1;color:var(--ui-text-faint);cursor:default}
/* one focus ring (§5.9) */
:is(body.hud,body.page) :is(button,select,input,textarea,a[href],summary,[tabindex]):focus-visible{outline:var(--ui-border-active) solid var(--ui-gold-bright);outline-offset:var(--ui-space-2xs)}
:is(body.hud,body.page) :is(button.selected,button.active,button[aria-selected=true],.appearance-sections button[aria-pressed=true]):not(.plate-btn):not([data-kit-tab]){
  background:var(--ui-selected-bg);border-color:var(--ui-selected-line);color:var(--ui-selected-text)}
:is(body.hud,body.page) :is(.logout-button,#header-logout,.sign-out){background:var(--ui-danger-bg);border-color:var(--ui-danger);color:var(--ui-text)}
/* the exit button (#170, L5; r56 H, Joseph 16 Oct: the desktop one "not the correct colour"): one look on both sizes, the
   phone's reddish leave; hover deepens it (never the plain buttons' grey), focus is the one focus ring. Where it sits and
   its shape are the layout sheets' */
body.hud .phone-logout{background:color-mix(in srgb,var(--ui-danger-bg) 90%,transparent);border:var(--ui-border) solid var(--pal-header-logout-line);color:var(--pal-header-logout-text)}
body.hud .phone-logout:hover:not(:disabled){background:var(--ui-danger-bg);border-color:var(--ui-danger);color:var(--ui-text)}

/* ---------- 4. chip: small inline actions ---------- */
body.hud :is(#clear-target,#run,.chat-state-button,.chat-expand-button,#open-world-map,#inspect-toggle,.inspect-actions button,
  .chat-filters button,.menu-subtabs button,.settings-actions>button){
  min-height:var(--ui-h-xs);padding:var(--ui-space-2xs) var(--ui-space-sm);border-radius:var(--ui-radius-sm);
  font-size:var(--ui-fs-xs);font-weight:var(--ui-fw-control);line-height:1.1}
body.hud #run[aria-pressed=true]{background:var(--ui-accent-bg);border-color:var(--ui-accent);color:var(--ui-accent-light)}

/* ---------- 3. pill ---------- */
body.hud :is(.plate-spell-label,#zone-status,#equipped-reserves,.coinweave-hint){min-height:var(--ui-pill);border-radius:var(--ui-radius-pill);
  background:var(--ui-glass-strong);border:var(--ui-border) solid var(--ui-line);font-size:var(--ui-fs-sm);box-shadow:var(--ui-shadow-float)}
body.hud .coinweave-hint{border-color:var(--ui-gold-bright);background:var(--ui-gold-bg);color:var(--ui-gold-light);
  font-weight:var(--ui-fw-control);padding:var(--ui-space-xs) var(--ui-space-lg);font-size:var(--ui-fs-md)}

/* ---------- 9 and 10. frame: the target frame and the inspect box (one style side by side, §5.4), vitals and armour ---- */
body.hud :is(#target-hud,.chat-inspect,.own-armour,.navigation-dock){background:var(--ui-glass);border:var(--ui-border) solid var(--ui-line);
  border-radius:var(--ui-radius-sm);color:var(--ui-text);box-shadow:none}
body.hud #target-hud{font-size:var(--ui-fs-sm)}
body.hud #target-hud #rival-health{color:var(--ui-text-2)}
body.hud .own-armour{font-size:var(--ui-fs-xs)}
body.hud .own-armour :is(small,h3,.armour-title){font-size:var(--ui-fs-badge);color:var(--ui-text-muted);letter-spacing:.6px}
body.hud .own-armour strong{font-family:var(--ui-font-title);font-size:var(--ui-fs-num)}

/* ---------- 12. meter: health and energy ---------- */
body.hud .vital-meter,body.hud .energy-controls #energy-hud{min-height:var(--ui-meter-h);border:var(--ui-border) solid var(--ui-line-control);
  border-radius:var(--ui-radius-xs);background:var(--ui-glass);color:var(--ui-text);font-size:var(--ui-fs-sm);text-shadow:none}
body.hud .health-meter>i{background:var(--ui-hp)}
body.hud .energy-meter>i{background:var(--ui-energy)}
/* the low warnings show again (§5.2: an older rule hid them) */
body.hud .vital-meter.health-meter.low-health{border-color:var(--ui-hp-low-line)}
body.hud .vital-meter.energy-meter.low-energy,body.hud .energy-controls #energy-hud.low-energy{border-color:var(--ui-energy-low-line)}

/* ---------- 5. panel: the open menu, the tab rail, chat, windows ---------- */
body.hud :is(.kit-panel>.dock-content,.chat-content){background:var(--ui-glass);border:var(--ui-border) solid var(--ui-line);
  border-radius:var(--ui-radius-md);color:var(--ui-text);font-size:var(--ui-fs-md)}
body.hud:not(.mobile-mode) .kit-panel .kit-tabs{background:var(--ui-glass);border:var(--ui-border) solid var(--ui-line);border-radius:var(--ui-radius-md)}
body.hud.chat-see-through .chat-content{background:var(--ui-glass-faint);border-color:var(--ui-line-subtle)}
body.hud .settings-dialog{background:var(--ui-glass-strong);border:var(--ui-border) solid var(--ui-line-strong);border-radius:var(--ui-radius-md);
  color:var(--ui-text);box-shadow:var(--ui-shadow-pop)}

/* ---------- 6. tab (decision 3: FLAT; gold border and glow when open) ---------- */
body.hud .kit-tabs button[data-kit-tab],body.hud .kit-tabs .mobile-more-tabs{background:var(--ui-surface-1);
  border:var(--ui-border) solid var(--ui-line-control);border-radius:var(--ui-radius-md);box-shadow:none;color:var(--ui-text);text-shadow:none}
body.hud .kit-tabs button[data-kit-tab]:hover{border-color:var(--ui-line-strong);background:var(--ui-surface-2)}
body.hud .kit-tabs button[data-kit-tab].active:not([hidden]),body.hud.tabs-more-open .kit-tabs .mobile-more-tabs{
  background:var(--ui-gold-bg);border:var(--ui-border-active) solid var(--ui-gold-bright);box-shadow:var(--ui-glow-gold)}
body.hud .kit-tabs:is([data-panel-shown=false]) button[data-kit-tab].active{box-shadow:none;border-color:var(--ui-gold-line)}
body.hud .kit-tabs button[data-kit-tab]::before{content:none!important}

/* ---------- badge: a tile's corner mark (AUTO on a spell tile, a bag cell's count) ----------
   Always inside its tile (Joseph, iPhone: "The word auto doesn't fit on the magic tiles"). A tile narrower than the word
   shows the short mark instead; the label above the spell strip still says AUTO. The tile is the container (a spell
   tile, or any .ui-badge-host such as a bag cell). Checked by the browser check's `escapes`. */
:where(.ui-badge-host,body.hud .plate-spell){container-type:inline-size}
.ui-badge{position:absolute;right:var(--ui-space-2xs);bottom:var(--ui-space-2xs);max-width:calc(100% - 2 * var(--ui-space-2xs));
  box-sizing:border-box;padding:0 var(--ui-space-2xs);border-radius:var(--ui-radius-xs);white-space:nowrap;pointer-events:none;
  font:800 var(--ui-fs-badge)/1.3 var(--ui-font)}
.ui-badge-short{display:none}
/* the bag's counts sit top left (they are badges too: Safari's toolbar can shrink a cell to 25 px) */
.ui-badge-tl{top:var(--ui-space-2xs);left:var(--ui-space-2xs);right:auto;bottom:auto}
@container (width < 44px){.ui-badge:has(.ui-badge-short) .ui-badge-long{display:none}.ui-badge .ui-badge-short{display:inline}}
/* a very narrow tile: the badge hugs the corner with no padding */
@container (width < 32px){.ui-badge-host .ui-badge{padding:0;top:1px;left:1px;font-size:var(--ui-fs-badge)}
  .ui-badge-host .ui-badge:not(.ui-badge-tl){top:auto;left:auto;right:1px;bottom:1px}}

/* ---------- 7. notice: one component, kinds by border; the gold celebratory kind (decision 4) ---------- */
/* The notice area (dist/notice-area.js, placed by hud-shell.css) lays out every notice it adopts: they flow in its
   column, as wide as their text up to the area's width (Joseph, 14 Oct: an area banner "way too thin"). A notice's own
   rules set colour and border only, never position, size or transform (tests/notice-layout.test.mjs). Each fades in;
   a timed one (data-notice-ms; the area sets --notice-ms when its turn comes) also fades out at the end. */
body.hud .hud-notice{position:static;inset:auto;transform:none;translate:none;margin:0;width:auto;max-width:100%;box-sizing:border-box;
  animation:ui-notice-in var(--ui-dur-base) var(--ui-ease-out)}
body.hud .hud-notice[data-notice-ms]{animation:ui-notice-timed var(--notice-ms,var(--ui-dur-banner)) ease forwards}
/* r56 H7: on phones a notice with buttons puts its words on their own row, its buttons under them (beside the words they
   left the words a narrow column) */
body.hud.mobile-mode .hud-notice:has(>button){flex-wrap:wrap;justify-content:flex-end}
body.hud.mobile-mode .hud-notice:has(>button)>span{flex:1 0 100%}
@keyframes ui-notice-in{from{opacity:0;translate:0 -6px}}
@keyframes ui-notice-timed{0%{opacity:0;translate:0 -6px}10%{opacity:1;translate:none}80%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){body.hud .hud-notice,body.hud .hud-notice[data-notice-ms]{animation:none}}
body.hud .hud-notice{background:var(--ui-glass-strong);border:var(--ui-border) solid var(--ui-line-strong);border-radius:var(--ui-radius-sm);
  color:var(--ui-text);font-size:var(--ui-fs-md);font-weight:var(--ui-fw-text);padding:var(--ui-space-sm) var(--ui-space-lg);
  box-shadow:var(--ui-shadow-float);text-shadow:none}
body.hud .hud-notice :is(strong,b,h3){color:var(--ui-text);font-weight:var(--ui-fw-strong)}
body.hud .hud-notice button{min-height:var(--ui-h-xs);font-size:var(--ui-fs-sm);padding:var(--ui-space-2xs) var(--ui-space-md)}
/* info (tips) */
body.hud .hud-notice:is(#graphics-notice,#sight-status,#coinweave-hint){border-color:var(--ui-accent)}
/* warning */
body.hud .hud-notice:is(#graphics-warning,.combat-notice,#idle-notice){border-color:var(--ui-danger)}
body.hud .hud-notice.combat-notice{background:var(--ui-danger-bg)}
/* pinned (course, boss trial, duel controls, connection) */
body.hud .hud-notice:is(#course-status,#boss-trial-panel,#arena-scene-controls){border-color:var(--ui-line-strong)}
body.hud .hud-notice#boss-trial-panel{border-color:var(--ui-danger);background:var(--ui-danger-bg)}
body.hud .hud-notice#boss-trial-panel :is(strong,b,.boss-trial-title){color:var(--ui-danger)}
/* the gold celebratory kind: unlocks (and the level-up beside the minimap, below) */
body.hud .hud-notice.unlock-notice{border-color:var(--ui-gold);background:linear-gradient(115deg,var(--ui-gold-bg),var(--ui-glass-strong));
  box-shadow:var(--ui-glow-celebrate)}
body.hud .unlock-notice strong{color:var(--ui-gold-bright);font-size:var(--ui-fs-lg)}
body.hud .unlock-notice span{color:var(--ui-gold-light);font-size:var(--ui-fs-md)}
/* phone: notices are compact chips with 44 px touch areas (decision 5) */
body.hud.mobile-mode .hud-notice{border-radius:var(--ui-radius-lg);padding:var(--ui-space-xs) var(--ui-space-md);font-size:var(--ui-fs-sm)}

/* ---------- 8. XP drop and level-up ---------- */
body.hud :is(#skilling-feed,.hud-spot) .xp-drop{color:var(--ui-gold-light);font-size:var(--ui-fs-sm);font-weight:var(--ui-fw-strong);
  text-shadow:var(--ui-text-shadow-world)}
body.hud :is(#skilling-feed,.hud-spot) .level-up{border:var(--ui-border) solid var(--ui-gold);border-radius:var(--ui-radius-md);
  background:linear-gradient(115deg,var(--ui-gold-bg),var(--ui-glass-strong));box-shadow:var(--ui-glow-celebrate);color:var(--ui-gold-light)}
body.hud :is(#skilling-feed,.hud-spot) .level-up small{font-size:var(--ui-fs-badge);color:var(--ui-gold-light);font-family:var(--ui-font)}
body.hud :is(#skilling-feed,.hud-spot) .level-up strong{font-family:var(--ui-font-title);font-size:var(--ui-fs-display);color:var(--ui-gold-bright);
  font-weight:var(--ui-fw-strong);letter-spacing:.4px}
body.hud :is(#skilling-feed,.hud-spot) .gathering-status{background:var(--ui-glass-strong);border:var(--ui-border) solid var(--ui-line);
  border-radius:var(--ui-radius-sm);font-size:var(--ui-fs-sm);box-shadow:var(--ui-shadow-float)}

/* ---------- 14. tooltip ---------- */
body.hud :is(.tooltip,.rail-tooltip,#item-detail){background:var(--ui-glass-strong);border:var(--ui-border) solid var(--ui-line-strong);
  border-radius:var(--ui-radius-sm);color:var(--ui-text-2);font-size:var(--ui-fs-md);box-shadow:var(--ui-shadow-pop)}
body.hud .rail-tooltip{color:var(--ui-gold-light);font-weight:var(--ui-fw-control)}

/* ---------- 15. menu (right-click and long-press) ---------- */
body.hud .item-menu{background:var(--ui-glass-strong);border:var(--ui-border) solid var(--ui-line-strong);border-radius:var(--ui-radius-sm);
  box-shadow:var(--ui-shadow-pop);backdrop-filter:none;z-index:var(--z-menu)}
body.hud .item-menu button{background:none;border:0;border-radius:var(--ui-radius-xs);min-height:var(--ui-h-sm);font-size:var(--ui-fs-md);
  font-weight:var(--ui-fw-text);color:var(--ui-text)}
body.hud .item-menu button:hover:not(:disabled){background:var(--ui-surface-3);color:var(--ui-selected-text)}
body.hud .item-menu button:disabled{color:var(--ui-text-faint)}
body.hud .item-menu .item-menu-name{color:var(--ui-gold-light);font-size:var(--ui-fs-sm);font-weight:var(--ui-fw-strong)}

/* ---------- touch areas and states (decision 5) ---------- */
/* a hidden or empty notice takes no room */
body.hud .hud-notice:is([hidden],:empty,:has(> *):not(:has(> :not([hidden])))){display:none!important}
body.hud .kit-tabs :is(button[data-kit-tab],.mobile-more-tabs){box-sizing:border-box}
/* phones: small chips keep their look; an invisible box extends each to a touch area of at least --ui-touch-min (r56 G) */
body.hud.mobile-mode :is(#clear-target,#run,.chat-state-button,#open-world-map,#inspect-toggle,.inspect-actions button){min-height:0}
:where(body.hud.mobile-mode) :where(#clear-target,#run,.chat-state-button,#open-world-map,#inspect-toggle,.inspect-actions button){position:relative}
body.hud.mobile-mode :is(#clear-target,#run,.chat-state-button,#open-world-map,#inspect-toggle,.inspect-actions button)::after{
  content:'';position:absolute;left:0;right:0;top:50%;height:max(100%,var(--ui-touch-min,var(--ui-touch)));transform:translateY(-50%)}

/* ---------- phone tab states: the older stone rule is more specific ---------- */
body.hud.mobile-mode.panel-open .kit-tabs:not([data-panel-shown=false]) button[data-kit-tab].active{
  background:var(--ui-gold-bg);border:var(--ui-border-active) solid var(--ui-gold-bright);box-shadow:var(--ui-glow-gold)}
body.hud.mobile-mode .kit-tabs button[data-kit-tab]{background:var(--ui-surface-1);border-color:var(--ui-line-control)}

/* ---------- compact panel contents (the planner's A2 note: no scrolling where possible) ---------- */
body.hud .kit-panel>.dock-content :is(h3,.section-title h3){font-size:var(--ui-fs-lg);margin:var(--ui-space-xs) 0}
body.hud .kit-panel>.dock-content :is(p,.subtle){margin:var(--ui-space-xs) 0}
body.hud .kit-panel>.dock-content .subtle{font-size:var(--ui-fs-sm);color:var(--ui-text-muted)}
/* Skills: one line a skill (icon, name, level), its progress a thin bar under it; the next level's XP is in its tooltip.
   Names never run into levels (§5.12, and the planner's 1366 picture) */
body.hud #kit-skills #discipline-levels{gap:var(--ui-space-2xs) var(--ui-space-xs);margin:var(--ui-space-xs) 0}
body.hud #kit-skills .discipline-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:var(--ui-space-xs);
  row-gap:var(--ui-space-2xs);padding:var(--ui-space-2xs) var(--ui-space-sm);min-height:0;border-radius:var(--ui-radius-sm);
  background:var(--ui-surface-1);border:var(--ui-border) solid var(--ui-line-subtle);text-align:left}
body.hud #kit-skills .discipline-row>span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:flex;align-items:center;
  gap:var(--ui-space-xs);font-size:var(--ui-fs-sm);font-weight:var(--ui-fw-control);line-height:1.5}
body.hud #kit-skills .discipline-row>span>svg{flex:none}
body.hud #kit-skills .discipline-row>b{font-family:var(--ui-font-title);font-size:var(--ui-fs-lg);font-weight:var(--ui-fw-strong);color:var(--ui-gold-light);
  font-variant-numeric:tabular-nums}
body.hud #kit-skills .discipline-row progress{grid-column:1/-1;height:var(--ui-track-h);border:0;border-radius:var(--ui-radius-xs);background:var(--ui-surface-sunk)}
body.hud #kit-skills .discipline-row progress::-webkit-progress-bar{background:var(--ui-surface-sunk)}
body.hud #kit-skills .discipline-row progress::-webkit-progress-value{background:var(--ui-accent-line)}
body.hud #kit-skills .discipline-row progress::-moz-progress-bar{background:var(--ui-accent-line)}
body.hud #kit-skills .discipline-row small{display:none}
body.hud #kit-skills .skills-overview{gap:var(--ui-space-2xs);font-size:var(--ui-fs-sm)}
body.hud #kit-skills #open-highscores{min-height:var(--ui-h-xs);padding:var(--ui-space-2xs) var(--ui-space-md);font-size:var(--ui-fs-sm)}
/* Attack: a smaller weapon card and chip-height buttons */
body.hud #kit-attack .attack-weapon{height:auto;gap:var(--ui-space-md);margin-bottom:var(--ui-space-sm);padding-bottom:var(--ui-space-xs)}
body.hud #kit-attack .attack-weapon-icon{width:calc(2 * var(--ui-h-sm));height:calc(2 * var(--ui-h-sm))}
body.hud #kit-attack .attack-weapon strong{font-size:var(--ui-fs-num)}
body.hud #kit-attack .attack-moves{display:flex;gap:var(--ui-space-sm)}
body.hud #kit-attack .attack-move{flex:1}
body.hud #kit-attack :is(#weapon-mode,#auto-retaliate,.weapon-mode,.attack-move){min-height:var(--ui-h-sm);padding:var(--ui-space-2xs) var(--ui-space-md);
  font-size:var(--ui-fs-md);margin:var(--ui-space-xs) 0}
body.hud #kit-attack :is(#attack-cycle,.cooldown){margin:var(--ui-space-xs) 0}
body.hud #kit-attack select{min-height:var(--ui-h-sm);font-size:var(--ui-fs-md)}
/* Worn: a smaller Protect items button and stats */
body.hud #kit-equipment #open-death-protection{min-height:var(--ui-h-sm);padding:var(--ui-space-2xs) var(--ui-space-md);font-size:var(--ui-fs-sm)}
body.hud #kit-equipment #gear-stats{font-size:var(--ui-fs-sm)}
/* Settings: the action row, sub-tabs that wrap instead of touching, short sections */
body.hud .settings-actions{gap:var(--ui-space-xs);margin:0 0 var(--ui-space-sm)}
body.hud .menu-subtabs{display:flex;flex-wrap:wrap;gap:var(--ui-space-xs);margin:0 0 var(--ui-space-sm)}
body.hud .menu-subtabs{flex-wrap:nowrap}
body.hud .menu-subtabs button{flex:1 1 0;min-width:0;white-space:normal;line-height:1.1;padding:var(--ui-space-2xs) var(--ui-space-xs);font-size:var(--ui-fs-xs)}
body.hud #kit-settings :is(label,.graphics-settings,.layout-settings,.hud-placement-settings,.chat-settings){font-size:var(--ui-fs-md)}
body.hud #kit-settings :is(select,input[type=range]){min-height:var(--ui-h-sm);font-size:var(--ui-fs-md);padding:var(--ui-space-2xs) var(--ui-space-sm)}
body.hud #kit-settings .menu-subtab-section>*+*{margin-top:var(--ui-space-xs)}
/* Settings > Display: the notes are their settings' tooltips (dist/performance-ui.js); the phones-only frame rate is
   not shown on desktop */
body.hud:not(.mobile-mode) .graphics-settings p.as-tooltip{display:none}
body.hud:not(.mobile-mode) .graphics-settings .power-fps{display:none}
/* Skills: Highscores beside the Combat Rank line, not a row of its own */
body.hud #kit-skills #open-highscores{float:right;margin:0 0 0 var(--ui-space-sm)}
body.hud #kit-skills #progression-panel>summary{min-height:var(--ui-h-xs);margin:0}

/* ---------- §5 fixes (A4) ---------- */
/* Bash's one pulse lives here now (it depended on the old sheet's keyframes) */
@keyframes ui-bash-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ui-gold-bright) 85%,transparent)}
  100%{box-shadow:0 0 0 var(--ui-space-md) color-mix(in srgb,var(--ui-gold-bright) 0%,transparent)}}
body.hud .plate-bash.bash-pulse{animation:ui-bash-pulse var(--ui-dur-pulse) ease-out}
/* the phone target frame is its own width, not the old 180 px minimum (it overlapped a pinned Inspect box) */
body.hud.mobile-mode #target-hud{min-width:0}
/* phones: every control has a 44 px touch area (decision 5); the visual keeps its size */
/* positioned relative only where nothing else positions it (zero specificity: a fixed or absolute part keeps its place) */
:where(body.hud.mobile-mode) :where(.plate-utility .plate-btn,.plate-spell,.plate-fold,.plate-magic-folded,.mobile-chat-toggle,
  .navigation-dock .minimap-panel button,.plate-take-off,.menu-subtabs button,.hud-notice button,.armour-strip,.mobile-combat-toggle,
  .mobile-map-toggle,.phone-logout){position:relative}
body.hud.mobile-mode :is(.plate-utility .plate-btn,.plate-spell,.plate-fold,.plate-magic-folded,.mobile-chat-toggle,
  .navigation-dock .minimap-panel button,.plate-take-off,.menu-subtabs button,.hud-notice button,.armour-strip,.mobile-combat-toggle,
  .mobile-map-toggle,.phone-logout,.hover-info .inspect-close)::after{content:'';position:absolute;left:50%;top:50%;
  width:max(100%,var(--ui-touch-min,var(--ui-touch)));height:max(100%,var(--ui-touch-min,var(--ui-touch)));transform:translate(-50%,-50%)}
/* the Inspect ✕ sits in the box's top-right corner: its touch area reaches left and down from there, inside the box
   (the box scrolls, so a touch area past its edge would add a scrollbar and could not be tapped) */
body.hud.mobile-mode .chat-inspect .hover-info .inspect-close::after{left:auto;top:-2px;right:-2px;transform:none}
body.hud #kit-settings h3{margin:var(--ui-space-2xs) 0}

/* the target frame, both sizes (the planner's review: the name was clipped to one letter; Joseph 15 Oct: the same ✕
   on desktop): name, rank and health get the frame; Stop targeting is an ✕ (its label for screen readers; on phones a
   44 px touch area), hidden with nothing targeted so "NO TARGET" shows in full; an ellipsis only for a genuinely long
   name */
body.hud #target-hud{display:flex;align-items:center;gap:var(--ui-space-xs);justify-content:flex-start}
body.hud #target-hud #target-name{flex:1 1 auto;min-width:0;max-width:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.hud #target-hud #rival-health{flex:none}
body.hud #target-hud #clear-target{flex:none;font-size:0;width:var(--ui-pill);height:var(--ui-pill);min-height:0;padding:0;
  display:flex;align-items:center;justify-content:center;border-radius:var(--ui-radius-round)}
body.hud #target-hud #clear-target::before{content:'\2715';font-size:var(--ui-fs-md);line-height:1}
body.hud #target-hud #clear-target:disabled{display:none}

/* phone touch boxes stay on their own control (hit-tested in scripts/perf/hud-modes-browser.mjs; geometry, not
   click-through): the chat pill's reaches up and down only, never over Coinweave and Return to town beside it; Run sits
   above the armour strip's touch box, which reaches up over it */
body.hud.mobile-mode .mobile-chat-toggle::after{width:100%}
body.hud.mobile-mode .vitals-bar #run{position:relative;z-index:var(--z-raised)}

/* ---------- 16. field (r56 D, #322): a label over a text input or a select; colour and range inputs; on the sunk
   surface, the shared focus ring. Parts: the account page's forms, the appearance editor (character creation and the
   cosmetics shop), the appearance detail page ---------- */
:is(body.hud,body.page) :is(#account-form,#character-form,.appearance-editor,.detail-controls) label:not([hidden]){display:block;margin:var(--ui-space-lg) 0 0;
  font-size:var(--ui-fs-md);color:var(--ui-text-2);text-align:left}
:is(body.hud,body.page) :is(#account-form,#character-form,.appearance-editor,.detail-controls)
  :is(input:not([type=checkbox],[type=radio],[type=range],[type=color]),select):not([hidden]){display:block;box-sizing:border-box;width:100%;
  min-height:var(--ui-h-md);margin-top:var(--ui-space-xs);padding:var(--ui-space-sm) var(--ui-space-lg);background:var(--ui-surface-sunk);
  color:var(--ui-text);border:var(--ui-border) solid var(--ui-line-field);border-radius:var(--ui-radius-sm);font-size:var(--ui-fs-num)}
:is(body.hud,body.page) :is(#account-form,#character-form,.appearance-editor,.detail-controls) input[type=color]{min-height:var(--ui-h-md);
  padding:var(--ui-space-2xs);background:var(--ui-surface-sunk);border:var(--ui-border) solid var(--ui-line-field);border-radius:var(--ui-radius-sm)}
:is(body.hud,body.page) :is(#account-form,#character-form,.appearance-editor,.detail-controls) input[type=range]:not([hidden]){display:block;width:100%;
  min-height:var(--ui-h-sm);margin-top:var(--ui-space-xs);accent-color:var(--ui-gold)}
:is(body.hud,body.page) :is(#account-form,#character-form,.appearance-editor,.detail-controls) input[type=checkbox]{accent-color:var(--ui-gold)}
/* a checkbox's label is its touch area */
:is(body.hud,body.page) :is(.appearance-editor,.detail-controls) label:not([hidden]):has(> input[type=checkbox]){display:inline-flex;align-items:center;
  gap:var(--ui-space-sm);min-height:var(--ui-h-sm)}

/* ---------- 17. button kinds (r56 D): primary (confirm: the accent fill and ink text, decision 8 and the style
   inventory) and quiet (text only). Parts: the game's .primary buttons (Begin practice, trade Accept, Send report), the
   account page's Log in / Create character / Enter world, the editor's Save; Highscores, the loading screen's Return
   to sign in. Colours here; each part keeps its size ---------- */
:is(body.hud,body.page) .primary,:is(body.hud,body.page) .appearance-footer [data-save]{background:var(--ui-accent);border-color:var(--ui-accent);color:var(--ui-accent-ink)}
:is(body.hud,body.page) .primary:hover:not(:disabled),:is(body.hud,body.page) .appearance-footer [data-save]:hover:not(:disabled){background:var(--ui-accent-light)}
/* the title pages' call to action (Joseph, 15 Oct: gold there; green stays the in-game confirm, decision 8). Parts: Log
   in / Create account, Create character, Enter world */
:is(body.hud,body.page) .ui-button--title{background:var(--ui-title-action-bg);border-color:var(--ui-title-action-line);color:var(--ui-ink);
  box-shadow:var(--ui-title-action-sheen)}
:is(body.hud,body.page) .ui-button--title:hover:not(:disabled){background:var(--ui-title-action-bg);filter:brightness(1.15)}
:is(body.hud,body.page) :is(.text-button,.connection-loading a,.arrival>main a){background:none;border:0;color:var(--ui-gold-light);text-decoration:none;cursor:pointer}
:is(body.hud,body.page) :is(.text-button,.connection-loading a,.arrival>main a):hover{color:var(--ui-gold-bright);text-decoration:underline}

/* ---------- 18. group (r56 D): a titled fieldset on the panel's lines. Parts: the appearance editor's option groups and
   head preview ---------- */
:is(body.hud,body.page) :is(.appearance-group,.head-preview){border:var(--ui-border) solid var(--ui-line);border-radius:var(--ui-radius-md);
  padding:var(--ui-space-md) var(--ui-space-xl) var(--ui-space-lg);margin:0 0 var(--ui-space-xl);min-width:0}
:is(body.hud,body.page) :is(.appearance-group,.head-preview)>:is(legend,summary){padding:0 var(--ui-space-md);color:var(--ui-gold-light);
  font-family:var(--ui-font-title);font-size:var(--ui-fs-h3);font-weight:var(--ui-fw-strong)}
:is(body.hud,body.page) .appearance-group>p,:is(body.hud,body.page) .head-preview p{font-size:var(--ui-fs-md);line-height:1.4;color:var(--ui-text-muted)}

/* ---------- 19. dialog (r56 D): the panel as a window over the page. Parts: the cosmetics shop (the account page's
   card keeps its own gold edge: apps/client/account.css) ---------- */
:is(body.hud,body.page) .cosmetics-dialog{background:var(--ui-glass-strong);border:var(--ui-border) solid var(--ui-line-strong);
  border-radius:var(--ui-radius-md);color:var(--ui-text);box-shadow:var(--ui-shadow-pop)}
:is(body.hud,body.page) :is(.cosmetics-dialog,.world-stay-dialog)::backdrop{background:var(--ui-backdrop)}

/* ---------- 20. phones (decision 5) on the pages and in the editor: every control at least the touch size, for real
   (these are forms with room, not the HUD's small chips) ---------- */
:is(body.page.mobile-mode,body.hud.mobile-mode .cosmetics-dialog)
  :is(button,select,input:not([type=checkbox],[type=radio]),summary,a[href]){min-height:var(--ui-touch)}
:is(body.page.mobile-mode,body.hud.mobile-mode .cosmetics-dialog) :is(button,a[href]){min-width:var(--ui-touch)}

/* ---------- 21. cost badge (r56 D3, Joseph, 15 Oct): what an action costs, coloured by what it spends. Parts: the focus
   attack (focus), Bash, Jump and Crouch (energy) on the bottom bar, the phone's round Jump and Crouch. The button is
   dim with its fill rising toward the cost until you have enough (hud-shell.css, as Bash) ---------- */
body.hud .cost-badge{position:absolute;bottom:var(--ui-space-2xs);right:var(--ui-space-2xs);z-index:var(--z-hud);min-width:var(--ui-fs-title);
  padding:0 var(--ui-space-2xs);border-radius:var(--ui-radius-pill);font:800 var(--ui-fs-badge)/1.4 var(--ui-font);text-align:center;
  color:var(--ui-ink);pointer-events:none}
body.hud .cost-badge:empty{display:none}
body.hud .cost-badge[data-kind=focus]{background:var(--ui-cost-focus)}
body.hud .cost-badge[data-kind=energy]{background:var(--ui-cost-energy)}
body.hud :is(.plate-jump,.plate-crouch,#mobile-jump,#mobile-crouch)[data-state=dim]>:is(svg,.cost-badge){opacity:.55}
/* the focus attack: your focus as a small number (top right; the key is top left), a pip for each attack it pays for
   (one or two, down the right edge) */
body.hud .plate-focus-count{position:absolute;right:var(--ui-space-2xs);top:var(--ui-space-2xs);z-index:var(--z-hud);
  font:700 var(--ui-fs-badge)/1 var(--ui-font);color:var(--ui-text-2);pointer-events:none;font-variant-numeric:tabular-nums}
body.hud .plate-pips{position:absolute;right:var(--ui-space-2xs);top:50%;transform:translateY(-50%);z-index:var(--z-hud);display:flex;flex-direction:column;
  gap:var(--ui-space-2xs);pointer-events:none}
body.hud .plate-pips i{width:var(--ui-space-sm);height:var(--ui-space-sm);border-radius:var(--ui-radius-round);background:var(--ui-cost-focus)}
body.hud .plate-pips[data-pips="0"] i,body.hud .plate-pips[data-pips="1"] i+i{display:none}
/* phones: round buttons, so the badge sits at the top centre, the focus count at the bottom centre over its ring */
body.hud.mobile-mode :is(.plate-combat .plate-btn,#mobile-jump,#mobile-crouch) .cost-badge{bottom:auto;top:var(--ui-space-sm);right:50%;transform:translateX(50%)}
body.hud.mobile-mode .plate-focus-count{top:auto;bottom:var(--ui-space-lg);right:50%;transform:translateX(50%)}
/* D3b (the planner, 15 Oct): on the phone's round focus attack the icon is a little smaller and higher, so your focus
   total sits clear of it, above the focus ring (measured on 844 and the iPhone 11: docs/reports/r56/D3/b/) */
body.hud.mobile-mode .plate-focus{align-items:flex-start;padding-top:var(--ui-space-sm)}
body.hud.mobile-mode .plate-focus .plate-icon{width:45%;height:45%}
body.hud.mobile-mode .plate-pips{right:var(--ui-space-sm)}
body.hud :is(#mobile-jump,#mobile-crouch){position:relative;overflow:hidden}

/* ---------- 22. card (r56 D3): a small card on an action button: its name, what it does, the cost, the recovery
   (dist/action-card.js; on hover on desktop, a long-press on phones) ---------- */
.ui-card{position:fixed;z-index:var(--z-popover);max-width:min(260px,calc(100vw - 16px));padding:var(--ui-space-md) var(--ui-space-lg);
  background:var(--ui-glass-strong);border:var(--ui-border) solid var(--ui-line-strong);border-radius:var(--ui-radius-md);
  box-shadow:var(--ui-shadow-pop);color:var(--ui-text);font-family:var(--ui-font);font-size:var(--ui-fs-md);pointer-events:none}
.ui-card[hidden]{display:none}
.ui-card .action-card-name{display:block;font-family:var(--ui-font-title);font-size:var(--ui-fs-title);color:var(--ui-gold-light)}
.ui-card p{margin:var(--ui-space-2xs) 0 0;line-height:1.35}
.ui-card .action-card-cost{color:var(--ui-text);font-weight:var(--ui-fw-control)}
.ui-card .action-card-recovery{color:var(--ui-text-muted)}

/* ---------- 23. visually hidden (r56 D3b): read by screen readers, never drawn (the action buttons' descriptions,
   dist/action-card.js) ---------- */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}


/* ---------- 24. trial row (r56 G6): a local-only trial's choice in Settings (the camera follow, the hover outline's
   colour): its presets in a row of chips ---------- */
body.hud .trial-presets{display:flex;flex-wrap:wrap;gap:var(--ui-space-xs);margin-top:var(--ui-space-xs)}
body.hud .trial-presets button{min-height:var(--ui-h-xs);padding:var(--ui-space-2xs) var(--ui-space-sm);font-size:var(--ui-fs-xs)}
body.hud .trial-presets button[aria-pressed=true]{background:var(--ui-selected-bg);border-color:var(--ui-selected-line);color:var(--ui-selected-text)}
body.hud .click-trial label{display:flex;align-items:center;gap:var(--ui-space-xs);margin-top:var(--ui-space-xs);font-size:var(--ui-fs-xs)}
body.hud .click-trial input[type=range]{flex:1;min-width:0}

/* ---------- 25. area line (r56 H): entering or leaving an area, one line beside the minimap's bottom-left corner
   (dist/zone-indicator.js places it); takes no clicks; shown, then it fades; its edge in the zone ring's colour ---------- */
body.hud .area-line{position:fixed;z-index:var(--z-hud);pointer-events:none;white-space:nowrap;max-width:none;
  padding:var(--ui-space-2xs) var(--ui-space-sm);border-radius:var(--ui-radius-pill);background:var(--ui-glass-strong);
  border:var(--ui-border) solid var(--zone-ring,var(--ui-line));color:var(--ui-text);font-size:var(--ui-fs-sm);font-weight:var(--ui-fw-strong);
  line-height:1.2;opacity:0;transition:opacity var(--ui-dur-base) var(--ui-ease-out)}
body.hud .area-line.area-line-shown{opacity:1}
body.hud .area-line[hidden]{display:none}
body.hud .area-line[data-kind^=pvp]{border-color:var(--ui-gold)}
body.hud .area-line[data-kind=pvp-multi]{border-color:var(--ui-hostile)}
body.hud .area-line[data-kind=safe]{border-color:var(--ui-safe)}
body.hud .area-line[data-kind=deadly]{border-color:var(--ui-deadly)}
/* ---------- 26. drawn icon (r56 I3): the HUD's small icons (dist/ui-icons.js), never an emoji: line art in the colour of
   the text it sits in, at --ui-icon ---------- */
.ui-icon{display:inline-block;width:var(--ui-icon);height:var(--ui-icon);flex:none;vertical-align:-.25em;overflow:visible}
.ui-lock-mark,:where(body.hud .plate-bash[data-state=locked],#bash[data-state=locked])::before{content:'';display:inline-block;
  width:var(--ui-icon);height:var(--ui-icon);background:currentColor;-webkit-mask:var(--ui-icon-lock) center/contain no-repeat;
  mask:var(--ui-icon-lock) center/contain no-repeat}