/* Optional About guide only. Boot loading has no briefing deck. */

/* Tokens */
.briefing{--b-accent:#dbc58e;--b-ink:#fff6dc;--b-text:#d9d8c6;--b-muted:#a7b09b;--b-line:#fff6dc26;--b-alert:#e8a58c;font-family:Field,'Arial Narrow',Arial,sans-serif;color:var(--b-text);container-type:inline-size}

/* Rail */
.briefing-rail{display:flex;gap:14px}
[data-mode="auto"] .briefing-rail{margin:18px 0 0}
[data-mode="static"] .briefing-rail{margin:0 0 18px}
.briefing-tab{flex:1 1 auto;background:transparent;border:0;padding:0;text-align:left;display:grid;gap:8px;align-content:end;min-height:28px;color:var(--b-muted);font:600 10px/1 Field,'Arial Narrow',Arial,sans-serif;letter-spacing:1.6px;cursor:pointer}
.briefing-tab:hover{color:var(--b-text)}
.briefing-tab[aria-selected="true"]{color:var(--b-ink)}
.briefing-tab:focus-visible{outline:2px solid var(--b-accent);outline-offset:4px}

/* Track (progress fill) */
.briefing-tab-track{display:block;height:2px;background:var(--b-line);overflow:hidden;border-radius:1px}
.briefing-tab-track i{display:block;height:100%;background:var(--b-accent);transform-origin:left;transform:scaleX(0)}
.briefing-tab[data-state="done"] .briefing-tab-track i{transform:scaleX(1);opacity:.4}

/* Dwell fill animation — drives rotation, preserved under reduced motion */
@keyframes briefing-dwell{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.briefing[data-mode="auto"][data-autoplay="true"] .briefing-tab[data-state="active"] .briefing-tab-track i{animation:briefing-dwell var(--briefing-dwell,8s) linear forwards}
.briefing[data-paused="true"] .briefing-tab[data-state="active"] .briefing-tab-track i{animation-play-state:paused}
.briefing[data-mode="auto"][data-autoplay="false"] .briefing-tab[data-state="active"] .briefing-tab-track i{transform:scaleX(1)}
.briefing[data-mode="static"] .briefing-tab[data-state="active"] .briefing-tab-track i{transform:scaleX(1)}

/* Alert dot */
.briefing-tab[data-alert="true"] .briefing-tab-label::after{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--b-alert);margin-left:6px;vertical-align:middle}
.briefing-panel[data-alert="true"] .briefing-kicker{color:var(--b-alert)}

/* Kicker */
.briefing-kicker{display:flex;align-items:center;gap:10px;margin:0 0 10px;font:600 10px/1.2 Field,'Arial Narrow',Arial,sans-serif;letter-spacing:2.4px;text-transform:uppercase;color:var(--b-accent)}
.briefing-count{font-variant-numeric:tabular-nums;color:var(--b-ink)}
.briefing-count::after{content:'';display:inline-block;width:18px;height:1px;background:var(--b-accent);vertical-align:middle;margin-left:10px}

/* Title */
.briefing-title{margin:0 0 10px;font:700 clamp(24px,2.4vw,34px)/1.05 Field,'Arial Narrow',Arial,sans-serif;font-stretch:condensed;letter-spacing:-.4px;color:var(--b-ink);text-wrap:balance;text-shadow:0 2px 18px #000a}

/* Body */
.briefing-body{margin:0;max-width:52ch;font:400 15px/1.5 Field,'Arial Narrow',Arial,sans-serif;color:var(--b-text);text-wrap:pretty}

/* Facts */
.briefing-facts{margin:16px 0 0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--b-line);padding:0}
.briefing-fact{padding:10px 14px 0 0}
.briefing-fact+.briefing-fact{padding-left:14px;border-left:1px solid var(--b-line)}
.briefing-fact dt{font:600 9px/1.2 Field,'Arial Narrow',Arial,sans-serif;letter-spacing:1.8px;color:var(--b-muted);margin-bottom:5px}
.briefing-fact dd{margin:0;font:500 13px/1.35 Field,'Arial Narrow',Arial,sans-serif;color:var(--b-ink)}

/* Layout switch (controls card) */
.briefing-layouts{display:inline-flex;margin:14px 0 12px;border:1px solid var(--b-line);border-radius:4px;overflow:hidden}
.briefing-layout{min-height:30px;padding:0 12px;font:600 10px/1 Field,'Arial Narrow',Arial,sans-serif;letter-spacing:1.4px;color:var(--b-muted);background:transparent;border:0;cursor:pointer}
.briefing-layout[aria-pressed="true"]{background:var(--b-accent);color:#172219}
@media(pointer:coarse){.briefing-layout{min-height:44px}}

/* Binds — 4-column: keys action keys action */
.briefing-binds{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr);column-gap:10px;row-gap:7px;align-items:center}
.briefing-bind{display:contents}
.briefing-keys{display:flex;gap:3px;justify-content:flex-end}
/* 20px gap before the second key column in each row */
.briefing-bind:nth-child(even) .briefing-keys{margin-left:10px}
.briefing-keys kbd{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border:1px solid #fff6dc40;border-bottom-width:2px;border-radius:4px;background:#fff6dc0f;font:600 10px/1 Field,'Arial Narrow',Arial,sans-serif;color:var(--b-ink);white-space:nowrap}
.briefing-keys kbd[data-kind="face"]{width:22px;height:22px;padding:0;border-radius:50%}
.briefing-keys kbd[data-kind="trigger"]{border-radius:7px 7px 4px 4px}
.briefing-keys kbd[data-kind="stick"]{width:22px;height:22px;padding:0;border-radius:50%;box-shadow:inset 0 0 0 3px #fff6dc1a}
.briefing-keys kbd[data-kind="touch"]{border-radius:11px}
.briefing-action{font:400 12.5px/1.3 Field,'Arial Narrow',Arial,sans-serif;color:var(--b-text)}

/* Maps */
.briefing-maps{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.briefing-map{min-height:74px;padding:12px 12px 10px;border:1px solid var(--b-line);display:grid;align-content:space-between;gap:6px}
.briefing-map-number{font:600 10px/1 Field,'Arial Narrow',Arial,sans-serif;letter-spacing:2px;color:var(--b-muted)}
.briefing-map-name{font:700 17px/1 Field,'Arial Narrow',Arial,sans-serif;text-transform:uppercase;letter-spacing:.3px;color:var(--b-ink)}
.briefing-map-status{font:600 9px/1 Field,'Arial Narrow',Arial,sans-serif;letter-spacing:1.6px;text-transform:uppercase;color:var(--b-muted)}
.briefing-map[data-live="true"]{border-color:#dbc58e66;background:linear-gradient(160deg,#dbc58e24,#dbc58e08)}
.briefing-map[data-live="true"] .briefing-map-status{color:var(--b-accent)}
.briefing-map[data-live="true"] .briefing-map-status::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--b-accent);margin-right:6px;vertical-align:middle}
.briefing-map[data-live="false"] .briefing-map-name{color:var(--b-muted)}
.briefing-map[data-live="false"]{background:repeating-linear-gradient(-45deg,transparent,transparent 6px,#fff6dc07 6px,#fff6dc07 7px)}

/* ≤560px — compact mobile */
@media(max-width:560px){
.briefing-title{font-size:22px}
.briefing-body{font-size:13.5px}
.briefing-facts{grid-template-columns:88px 1fr}
.briefing-fact{display:contents}
.briefing-fact dt{padding:8px 0 7px;border-bottom:1px solid var(--b-line)}
.briefing-fact dd{padding:8px 0 7px;border-bottom:1px solid var(--b-line)}
.briefing-fact+.briefing-fact{padding-left:0;border-left:0}
.briefing-map-name{font-size:14px}
/* Auto mode: hide tab labels, rail becomes slim pager segments */
.briefing[data-mode="auto"] .briefing-tab-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.briefing[data-mode="auto"] .briefing-tab{min-height:24px}
/* Touch binds: single column at narrow widths */
.briefing-binds[data-layout="touch"]{grid-template-columns:auto minmax(0,1fr)}
/* Keyboard/controller: compact keycaps */
.briefing-keys kbd{min-width:18px;height:18px;font-size:9px;padding:0 4px}
.briefing-keys kbd[data-kind="face"],.briefing-keys kbd[data-kind="stick"]{width:18px;height:18px}
.briefing-keys{gap:2px}
}
@media(max-width:560px) and (pointer:coarse){
.briefing[data-mode="auto"] .briefing-tab{min-height:32px}
}
/* Six labels need ~440px: any narrower column (short landscape phones) uses pager segments */
@container (max-width:460px){
.briefing[data-mode="auto"] .briefing-tab-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
}
/* ≤360px — tighter bind grid so long actions stay on one line */
@media(max-width:360px){
.briefing-binds{column-gap:6px}
.briefing-bind:nth-child(even) .briefing-keys{margin-left:6px}
.briefing-action{font-size:12px}
}

/* Landscape + short viewport */
@media(max-height:540px) and (orientation:landscape){
.briefing-facts,.briefing-layouts,.briefing-binds,.briefing-maps{display:none}
.briefing-title{font-size:20px}
.briefing-body{font-size:13px}
[data-mode="auto"] .briefing-rail{margin-top:12px}
}

/* Small portrait heights */
@media(max-height:700px) and (orientation:portrait){
.briefing-panel[data-card="controls"] .briefing-body{display:none}
.briefing-binds{row-gap:4px}
}

/* Static mode (About dialog, ~432px content width) */
.briefing[data-mode="static"]{margin:16px 0}
.briefing[data-mode="static"] .briefing-rail{display:grid;grid-template-columns:repeat(3,1fr);row-gap:12px}
.briefing[data-mode="static"] .briefing-tab-label{white-space:nowrap}
.briefing[data-mode="static"] .briefing-title{font-size:22px}
.briefing[data-mode="static"] .briefing-body{font-size:14px}
.briefing[data-mode="static"] .briefing-facts{grid-template-columns:96px 1fr}
.briefing[data-mode="static"] .briefing-fact{display:contents}
.briefing[data-mode="static"] .briefing-fact dt{padding:8px 0 7px;border-bottom:1px solid var(--b-line)}
.briefing[data-mode="static"] .briefing-fact dd{padding:8px 0 7px;border-bottom:1px solid var(--b-line)}
.briefing[data-mode="static"] .briefing-fact+.briefing-fact{padding-left:0;border-left:0}
.briefing[data-mode="static"] .briefing-map{min-height:60px}

/* Optional guide pager. */
.briefing[data-mode="auto"] .briefing-rail{gap:10px}
@container (max-width:630px){.briefing[data-mode="auto"] .briefing-tab-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}}
.briefing[data-mode="static"] .briefing-rail{grid-template-columns:repeat(3,1fr)}

/* Quickscope reflex mini-game. */
.reflex{display:flex;align-items:center;gap:14px;margin-top:14px}
.reflex-pad{position:relative;flex:0 0 auto;width:120px;height:64px;border:1px solid #fff6dc40;border-radius:4px;background:#0b0f0ecc;color:#fff6dc;font:600 12px/1 Field,'Arial Narrow',Arial,sans-serif;letter-spacing:1.6px;cursor:pointer;touch-action:manipulation}
.reflex[data-phase="waiting"] .reflex-pad{color:#a7b09b;border-style:dashed}
.reflex[data-phase="ready"] .reflex-pad{background:#1a150b;border-color:#dbc58e}
.reflex[data-phase="ready"] .reflex-pad::before,.reflex[data-phase="ready"] .reflex-pad::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%}
.reflex[data-phase="ready"] .reflex-pad::before{width:34px;height:34px;border:2px solid #e8a58c}
.reflex[data-phase="ready"] .reflex-pad::after{width:8px;height:8px;background:#e8a58c}
.reflex-pad:focus-visible{outline:2px solid #dbc58e;outline-offset:3px}
.reflex-status{margin:0;font:500 14px/1.35 Field,'Arial Narrow',Arial,sans-serif;color:#fff6dc;font-variant-numeric:tabular-nums}
@media(pointer:coarse){.reflex-pad{min-height:64px}}
@media(max-height:540px) and (orientation:landscape){.reflex{margin-top:8px}.reflex-pad{height:48px;width:100px}}
@media(max-height:540px) and (orientation:landscape){.briefing-panel[data-card="reflex"] .briefing-body{display:none}}