/* Fonts are self-hosted (SIL Open Font License) so the portal makes no third-party requests. */
@font-face { font-family: "Saira Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/saira-condensed-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Saira Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/saira-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Saira Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/saira-condensed-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

/* Lyrebird portal, admin and Lyrebird mission software styles: the brand in docs/DESIGN.md (red is the enemy, so red is
   the brand). --accent is red for text, links and lines (lighter in dark so it stays readable); --fill is the logo red
   for anything filled, always with white text (--fill-ink), which keeps AA contrast in both modes. */
@font-face { font-family: "Archivo"; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url("fonts/archivo-latin-wdth-normal.woff2") format("woff2"); }
:root {
  --bg: #eef0ec; --panel: #fbfbf9; --alt: #e4e7e2; --ink: #11181c; --muted: #535e63; --line: #cdd2cd;
  --accent: #c41e2c; --accent-soft: #f6dfe1; --brand: #d3202f; --black: #0b0e10;
  --fill: var(--brand); --fill-ink: #ffffff; --accent-ink: var(--fill-ink);
  --shape: #d3d8d2;
  --draft: #8f2a12; --draft-soft: #f3e1d9;
  --faker: #b3261e; --faker-soft: #f5dcd9;
  --joker: #8a5f00; --joker-soft: #f5e9c8;
  --neutral: #23663a; --neutral-soft: #d9ecdc;   /* a shade darker than the website's #2c7a3f: AA on its soft chip */
  --ok: #1d5e2f; --dev: #6f4c00; --future: #5d6a62;
  /* Maps and diagrams (DESIGN §3): the threat red, what's defended blue. */
  --threat: #ef4452; --defended: #4fa3ff;
  --map-base: #5b5446; --map-leg: #ef4452; --map-orbit: #ffd23f; --map-term: #ff8a94; --map-brk: #ffffff; --map-ink: #ffffff; --map-halo: rgba(0,0,0,.65);
  --f-display: "Saira Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --f-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --f-logo: "Archivo", var(--f-display);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0e1215; --panel: #161b1f; --alt: #12171a; --ink: #eef0ec; --muted: #9aa4a8; --line: #2a3237;
  --accent: #ef4452; --accent-soft: #3a1a1e; --shape: #2c3438;
  --draft: #ec8a6c; --draft-soft: #3a231b;
  --faker: #f08a80; --faker-soft: #3d1f1c; --joker: #e3b545; --joker-soft: #392e14; --neutral: #79c98c; --neutral-soft: #1c3322;
  --ok: #79c98c; --dev: #e3b545; --future: #7d878b; color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg: #0e1215; --panel: #161b1f; --alt: #12171a; --ink: #eef0ec; --muted: #9aa4a8; --line: #2a3237;
  --accent: #ef4452; --accent-soft: #3a1a1e; --shape: #2c3438;
  --draft: #ec8a6c; --draft-soft: #3a231b;
  --faker: #f08a80; --faker-soft: #3d1f1c; --joker: #e3b545; --joker-soft: #392e14; --neutral: #79c98c; --neutral-soft: #1c3322;
  --ok: #79c98c; --dev: #e3b545; --future: #7d878b; color-scheme: dark; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { background: var(--bg); color: var(--ink); font: 15px/1.55 var(--f-body); }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 600; line-height: 1.1; text-wrap: balance; margin: 0; letter-spacing: .01em; }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); }
h2 { font-size: 1.55rem; }
h3 { font-size: 1.2rem; }
p { margin: 0; max-width: 68ch; }
.mono, code { font-family: var(--f-mono); font-size: .86em; }
.label { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.muted { color: var(--muted); }

/* top bar */
.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: var(--black); color: #eef0ec; border-bottom: 1px solid #1d2428; }
.bar-in { max-width: 1180px; margin: 0 auto; padding: 10px 16px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
/* The wordmark (DESIGN §5): L, the symbol as the Y, REBIRD in Archivo Bold 125%, DEFENCE in red beneath; then the app's name. */
.brand { color: #eef0ec; text-decoration: none; display: flex; gap: 12px; align-items: center; white-space: nowrap; }
.logo { display: grid; justify-items: start; gap: .22em; font: 700 1.3rem/1 var(--f-logo); font-stretch: 125%; letter-spacing: .02em; }
.logo .y { width: .686em; height: .686em; vertical-align: baseline; margin: 0 .06em 0 .08em; }
.logo .y .notch { stroke: var(--black); stroke-width: 1.6; }
.logo .sub { font-size: .55rem; font-weight: 600; letter-spacing: .42em; color: #ef4452; padding-left: .3em; }
.brand .prod { font: 500 .72rem var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: #9aa4a8; border-left: 1px solid #2a3237; padding-left: 12px; }
nav { display: flex; gap: 4px; flex-wrap: wrap; }
nav a { text-decoration: none; color: #b7c0c4; font-weight: 500; padding: 6px 10px; border-radius: 4px; font-size: .92rem; }
nav a[aria-current="page"] { color: #ffffff; box-shadow: inset 0 -2px 0 var(--brand); border-radius: 0; }   /* a red underline, as on the website */
nav a:hover:not([aria-current]) { color: #ffffff; background: rgba(255,255,255,.08); }

.draftband { background: var(--alt); color: var(--muted); font-family: var(--f-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; text-align: center; padding: 5px 16px; }

main { max-width: 1180px; margin: 0 auto; padding-inline: 16px; padding-block: 28px 80px; display: grid; gap: 36px; }
section { display: grid; gap: 16px; min-width: 0; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 18px; min-width: 0; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.scroll { overflow-x: auto; }

/* chips */
.chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.chip.FAKER { color: var(--faker); background: var(--faker-soft); }
.chip.JOKER { color: var(--joker); background: var(--joker-soft); }
.chip.NEUTRAL { color: var(--neutral); background: var(--neutral-soft); }
.chip.draft { color: var(--draft); background: var(--draft-soft); }
.st { font-family: var(--f-mono); font-size: .74rem; white-space: nowrap; }
.st::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 0; border: 1.5px solid currentColor; }
.st.available { color: var(--ok); } .st.available::before { background: currentColor; }
.st.prototype, .st.in-development, .st.specified { color: var(--dev); } .st.prototype::before, .st.in-development::before, .st.specified::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.st.future, .st.not-started, .st.concept { color: var(--future); }
.st.not-applicable { color: var(--future); } .st.not-applicable::before { border-style: dashed; }
.st.partner-platform { color: var(--accent); }

/* hero */
.hero { display: grid; gap: 18px; padding-block: 12px; }
.hero h1 span { color: var(--accent); }
.lede { font-size: 1.12rem; color: var(--muted); max-width: 60ch; }
.ask { display: flex; gap: 8px; flex-wrap: wrap; max-width: 640px; }
.ask input { flex: 1 1 240px; min-width: 0; font: inherit; padding: 11px 14px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--ink); }
.answer { font-family: var(--f-mono); font-size: .88rem; min-height: 1.4em; }
button, .btn { font: 500 .92rem var(--f-body); padding: 10px 16px; border-radius: 4px; border: 1px solid var(--accent); background: var(--fill); color: var(--fill-ink); cursor: pointer; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
button.ghost, .btn.ghost { background: transparent; color: var(--accent); }
button:disabled { opacity: .45; cursor: not-allowed; }

/* axes diagram */
.axes { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 760px) { .axes { grid-template-columns: 1fr; } }
.ladder { display: grid; gap: 6px; }
.rung { display: grid; grid-template-columns: 30px 120px 1fr auto; gap: 10px; align-items: center; padding: 9px 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); }
@media (max-width: 520px) { .rung { grid-template-columns: 26px 1fr; } .rung > :nth-child(n+3) { grid-column: 2; } }
.rung .n { font-family: var(--f-mono); color: var(--muted); font-size: .8rem; }
.rung .nm { font-family: var(--f-display); font-weight: 700; letter-spacing: .06em; font-size: 1.05rem; }
.rung.future .nm { color: var(--muted); }
.rung .bar-fill { height: 6px; border-radius: 3px; background: var(--accent); opacity: .85; }
.deliv { display: grid; gap: 8px; }
.deliv div { border-left: 3px solid var(--accent); padding: 4px 0 4px 12px; }

.phases { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.phases div { padding: 12px; border-right: 1px solid var(--line); background: var(--panel); }
.phases div:last-child { border-right: 0; }
.phases div.now { background: var(--accent-soft); }
@media (max-width: 760px) { .phases { grid-template-columns: 1fr; } .phases div { border-right: 0; border-bottom: 1px solid var(--line); } }

/* tables */
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-family: var(--f-mono); font-weight: 500; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
td.num { font-variant-numeric: tabular-nums; font-family: var(--f-mono); font-size: .84rem; white-space: nowrap; }
tr.click { cursor: pointer; }
tr.click:hover td { background: var(--accent-soft); }
.matrix td.c { text-align: center; }
.mx { font-size: 1rem; }
.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.filters button { background: transparent; color: var(--muted); border-color: var(--line); padding: 6px 12px; }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* record */
.rec-head { display: grid; gap: 10px; }
.ids { display: flex; gap: 14px; flex-wrap: wrap; font-family: var(--f-mono); font-size: .8rem; color: var(--muted); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: .92rem; }
.kv dt { color: var(--muted); font-family: var(--f-mono); font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; padding-top: 2px; }
.kv dd { margin: 0; min-width: 0; }
.conf { font-family: var(--f-mono); font-size: .7rem; padding: 1px 6px; border-radius: 3px; border: 1px solid var(--line); color: var(--muted); }
.conf.low { color: var(--draft); border-color: var(--draft); }
.cite { color: var(--draft); font-family: var(--f-mono); font-size: .7rem; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tabs button { background: transparent; color: var(--muted); border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 10px 14px; }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.ladder-rec .rung { grid-template-columns: 30px 130px 120px 1fr; }
@media (max-width: 620px) { .ladder-rec .rung { grid-template-columns: 26px 1fr; } }
.views { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 760px) { .views { grid-template-columns: 1fr; } }
.views figure { margin: 0; display: grid; gap: 6px; }
.views svg { width: 100%; height: auto; display: block; }
.dl { display: grid; gap: 8px; }
.dl a { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; text-decoration: none; color: var(--ink); padding: 10px 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); }
.dl a:hover { border-color: var(--accent); }
.dl a b { font-weight: 600; } .dl a span { grid-column: 2; color: var(--muted); font-size: .85rem; }
.dl a i { grid-row: span 2; font-style: normal; font-family: var(--f-mono); font-size: .7rem; color: var(--accent); border: 1px solid var(--accent); border-radius: 3px; padding: 2px 5px; align-self: center; }

/* behaviour */
.tbp { display: grid; gap: 14px; }
.tbp-head { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; justify-content: space-between; }
.states { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 1fr); gap: 0; overflow-x: auto; padding-bottom: 4px; }
.state { padding: 10px 14px 10px 12px; border-top: 3px solid var(--accent); background: var(--bg); position: relative; display: grid; gap: 4px; align-content: start; }
.state + .state { border-left: 1px dashed var(--line); }
.state .sn { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.state .sv { font-family: var(--f-mono); font-size: .75rem; color: var(--muted); }
.state.brk { border-top-color: var(--draft); }
.exec { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 520px) { .exec { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.exec div { border: 1px solid var(--line); border-radius: 4px; padding: 6px 8px; font-size: .8rem; display: grid; }
.exec b { font-family: var(--f-mono); font-weight: 500; font-size: .74rem; }
.exec .full { color: var(--ok); } .exec .degraded { color: var(--dev); } .exec .none { color: var(--future); }

/* recognition */
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.tile { display: grid; gap: 4px; align-content: start; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); text-decoration: none; font-size: .88rem; line-height: 1.3; }
.tile:hover { border-color: var(--accent); }
.thumb { display: block; height: 96px; }
.thumb svg { width: 100%; height: 100%; }
.recviews { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 16px; align-items: end; }
@media (max-width: 760px) { .recviews { grid-template-columns: 1fr; } }
.recviews figure { margin: 0; display: grid; gap: 6px; }
.recviews svg { width: 100%; height: auto; max-height: 340px; display: block; }

/* package builder */
.builder { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .builder { grid-template-columns: 1fr; } }
.step { display: grid; gap: 12px; }
.step-n { font-family: var(--f-mono); font-size: .72rem; color: var(--accent); letter-spacing: .08em; text-transform: uppercase; }
.pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.pick label { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 4px; cursor: pointer; background: var(--bg); }
.pick label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.pick input { accent-color: var(--accent); }
.line { border: 1px solid var(--line); border-radius: 6px; padding: 14px; display: grid; gap: 12px; background: var(--bg); }
.fid { display: flex; gap: 6px; flex-wrap: wrap; }
.fid label { font-family: var(--f-mono); font-size: .76rem; border: 1px solid var(--line); border-radius: 4px; padding: 6px 9px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; background: var(--panel); }
.fid label:has(input:checked) { border-color: var(--accent); color: var(--accent); }
.fid label.off { opacity: .5; cursor: not-allowed; }
.field { display: grid; gap: 4px; }
.field input, .field select { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--ink); max-width: 100%; }
.check { font-size: .86rem; display: grid; gap: 4px; }
.check .ok { color: var(--ok); } .check .warn { color: var(--dev); } .check .bad { color: var(--faker); }
.spec { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 80px); display: grid; gap: 12px; }
.spec pre { white-space: pre-wrap; font-family: var(--f-mono); font-size: .78rem; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 12px; margin: 0; max-height: 60vh; overflow: auto; }
.empty { border: 1px dashed var(--line); border-radius: 6px; padding: 18px; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) { .view { animation: in .2s ease-out; } @keyframes in { from { opacity: .4; transform: translateY(4px); } to { opacity: 1; transform: none; } } }
/* journey */
.journey { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; counter-reset: j; }
.journey li { position: relative; display: grid; grid-template-rows: auto 1fr; gap: 10px; padding-right: 14px; }
.journey li:not(:last-child)::after { content: ""; position: absolute; top: 17px; left: 44px; right: 6px; height: 2px; background: var(--accent); opacity: .45; }
.jn { position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--fill); color: var(--fill-ink); font: 600 1rem var(--f-mono); }
.jb { display: grid; gap: 8px; align-content: start; justify-items: start; padding: 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); height: 100%; }
.jb p { font-size: .88rem; line-height: 1.45; }
.jb .sm { margin-top: auto; }
@media (max-width: 900px) {
  .journey { grid-template-columns: 1fr; gap: 0; }
  .journey li { grid-template-columns: 36px 1fr; grid-template-rows: none; gap: 12px; padding: 0 0 12px; }
  .journey li:not(:last-child)::after { top: 40px; bottom: 0; left: 17px; right: auto; width: 2px; height: auto; }
}
#how, #fidelity { scroll-margin-top: 110px; }
/* order wizard */
.wiz { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; counter-reset: s; }
.wiz button { width: 100%; justify-content: flex-start; background: var(--panel); color: var(--muted); border-color: var(--line); padding: 10px 12px; font-size: .9rem; text-align: left; }
.wiz .n { display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; border: 1.5px solid currentColor; font: 600 .8rem var(--f-mono); }
.wiz button[aria-current="step"] { background: var(--fill); color: var(--fill-ink); border-color: var(--accent); }
.wiz button.done { color: var(--ok); }
@media (max-width: 900px) { .wiz { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .wiz button { flex-direction: column; align-items: center; text-align: center; font-size: .72rem; padding: 8px 4px; gap: 4px; } }
.wiznav { display: flex; justify-content: space-between; gap: 10px; position: sticky; bottom: 0; padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(transparent, var(--bg) 30%); }
.wiznav button { font-size: 1rem; padding: 12px 20px; }
.search { font: inherit; padding: 11px 14px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--ink); flex: 1 1 260px; min-width: 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.card { position: relative; display: grid; gap: 4px; align-content: start; justify-items: start; text-align: left; padding: 10px; background: var(--bg); color: var(--ink); border: 1.5px solid var(--line); border-radius: 6px; font-size: .88rem; line-height: 1.3; }
.card:hover { border-color: var(--accent); }
.card[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.card .thumb { width: 100%; height: 80px; }
.card .tick { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line); background: var(--panel); color: var(--muted); font-weight: 700; }
.card[aria-pressed="true"] .tick { background: var(--fill); border-color: var(--fill); color: var(--fill-ink); }
.oline { border: 1px solid var(--line); border-radius: 6px; padding: 14px; display: grid; gap: 12px; background: var(--panel); }
.ohead { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.thumb.sm { height: 56px; }
.items { display: grid; gap: 0; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); }
.item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; }
.item + .item { border-top: 1px solid var(--line); }
.item > div:first-child { display: grid; gap: 2px; } .item .muted { font-size: .82rem; }
.qty { display: inline-flex; align-items: stretch; }
.qty button { padding: 6px 12px; font-size: 1.1rem; line-height: 1; }
.qty button:first-child { border-radius: 4px 0 0 4px; } .qty button:last-child { border-radius: 0 4px 4px 0; }
.qty input { width: 56px; text-align: center; font: 600 1rem var(--f-mono); border: 1px solid var(--accent); border-inline: 0; background: var(--panel); color: var(--ink); -moz-appearance: textfield; }
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.dopts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.dopt { display: grid; grid-template-columns: 22px 1fr; gap: 4px 10px; align-items: start; text-align: left; padding: 14px; background: var(--bg); color: var(--ink); border: 1.5px solid var(--line); border-radius: 6px; font-size: .92rem; }
.dopt > :not(.radio) { grid-column: 2; } .dopt .muted { font-size: .85rem; line-height: 1.4; }
.dopt .radio { grid-row: 1; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); margin-top: 1px; }
.dopt[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); }
.dopt[aria-checked="true"] .radio { border-color: var(--accent); box-shadow: inset 0 0 0 4px var(--bg); background: var(--accent); }
.steplbl { display: flex; gap: 8px; align-items: center; font-weight: 600; font-size: .92rem; flex-wrap: wrap; }
.steplbl .sn { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--fill); color: var(--fill-ink); font: 600 .74rem var(--f-mono); }
.cnt { font: 500 .7rem var(--f-mono); opacity: .7; margin-left: 2px; }
.filters.cats button:disabled { opacity: .4; }
.dgroup { display: grid; gap: 14px; }
.dhead { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-bottom: 2px solid var(--accent); padding-bottom: 6px; }
.dhead h3 { font-size: 1.4rem; }
.cgroup { display: grid; gap: 8px; }
.chead { display: flex; gap: 4px 10px; flex-wrap: wrap; align-items: baseline; border-left: 3px solid var(--accent); padding-left: 10px; }
.chead .muted { font-size: .84rem; }
.subopts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.subopt { position: relative; display: grid; gap: 4px; align-content: start; text-align: left; padding: 12px 12px 12px 46px; background: var(--bg); color: var(--ink); border: 1.5px solid var(--line); border-radius: 6px; font-size: .9rem; }
.subopt .muted { font-size: .82rem; line-height: 1.4; }
.subopt .tick { position: absolute; left: 12px; top: 12px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line); font: 600 .78rem var(--f-mono); color: var(--muted); }
.subopt[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.subopt[aria-pressed="true"] .tick { background: var(--fill); border-color: var(--fill); color: var(--fill-ink); }
.flow { display: flex; flex-wrap: wrap; gap: 6px; font-size: .84rem; }
.flow span { display: inline-flex; gap: 6px; align-items: center; padding: 5px 10px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); }
.flow b { font: 600 .74rem var(--f-mono); color: var(--accent); }
.flow span.done { color: var(--ok); } .flow span.done b { color: var(--ok); }
.flow span.now { background: var(--fill); color: var(--fill-ink); border-color: var(--accent); } .flow span.now b { color: inherit; }
.nextstep .btn { margin-left: 6px; }
details summary { cursor: pointer; font-weight: 500; color: var(--accent); }
.beh { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); }
.beh select, .oline select { font: inherit; padding: 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--ink); max-width: 100%; }
button.sm, .btn.sm { padding: 6px 10px; font-size: .84rem; }
.pill { font: 500 .72rem var(--f-mono); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.pill.ok { color: var(--ok); background: var(--neutral-soft); } .pill.warn { color: var(--dev); background: var(--joker-soft); } .pill.bad { color: var(--faker); background: var(--faker-soft); }
.rc { border: 1px solid var(--line); border-left-width: 4px; border-radius: 4px; padding: 10px 12px; display: grid; gap: 6px; background: var(--bg); }
.rc.ok { border-left-color: var(--ok); } .rc.warn { border-left-color: var(--dev); } .rc.bad { border-left-color: var(--faker); }
.otable td.c, .otable th.c { text-align: center; }
.otable td:first-child { min-width: 170px; }
.otable tfoot th { color: var(--ink); border-bottom: 0; }
.tot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tot div { display: grid; padding: 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); }
.tot b { font: 600 1.5rem var(--f-display); } .tot span { font-size: .76rem; color: var(--muted); }
.olist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .88rem; }
.olist li { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); padding: 4px 0; }
.saved { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); }
#printsheet { display: none; }

/* Behaviour Profiles: tabs, lock, mission map, simulator export */
.howtabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.howtabs > div { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: baseline; padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.howtabs .muted { grid-column: 2; font-size: .86rem; }
.tn { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font: 600 .76rem var(--f-mono); }
.btabs button { display: inline-flex; gap: 8px; align-items: center; }
@media (max-width: 520px) { .btabs { flex-wrap: nowrap; overflow-x: auto; } .btabs button { padding: 8px 8px; font-size: .82rem; gap: 5px; white-space: nowrap; } .btabs .tn { display: none; } }
.lockline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; font-size: .92rem; }
.chip.free { color: var(--ok); background: var(--neutral-soft); }
.chip.lock { color: var(--muted); background: var(--bg); }
.locked { min-height: 220px; display: grid; }
.locked > * { grid-area: 1 / 1; }
.ghostrows { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(120px, 1fr); gap: 0; filter: blur(3px); opacity: .55; overflow: hidden; }
.ghostrows span { background: repeating-linear-gradient(var(--bg) 0 14px, var(--line) 14px 22px, var(--bg) 22px 34px); border-top: 3px solid var(--accent); }
.ghostrows span + span { border-left: 1px dashed var(--line); }
.lockmsg { position: relative; z-index: 1; display: grid; gap: 8px; align-content: center; justify-items: start; padding: 18px; background: color-mix(in srgb, var(--panel) 82%, transparent); max-width: 100%; }
.lockmsg .muted { max-width: 62ch; font-size: .9rem; }
.tabbody { display: grid; gap: 14px; min-width: 0; }
.exec.one { grid-template-columns: minmax(0, 260px); }
.exec.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mission { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 900px) { .mission { grid-template-columns: 1fr; } }
.mapwrap { display: grid; gap: 6px; min-width: 0; }
.map { position: relative; aspect-ratio: 720 / 440; max-width: 100%; overflow: hidden; border-radius: 4px; background:
  radial-gradient(circle at 30% 40%, color-mix(in srgb, var(--map-base) 85%, #000) 0, transparent 60%), var(--map-base); }
.map .tiles { position: absolute; inset: 0; }
.map .tile { position: absolute; max-width: none; display: block; opacity: 0; }
.map .tile.ok { opacity: 1; }
.map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-off { position: absolute; left: 10px; top: 8px; margin: 0; font: .72rem var(--f-mono); color: var(--map-ink); background: var(--map-halo); padding: 3px 7px; border-radius: 3px; max-width: 70%; }
.map.has-imagery .map-off { display: none; }
.mp-line { fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; paint-order: stroke; filter: drop-shadow(0 0 2px rgba(0,0,0,.8)); vector-effect: non-scaling-stroke; }
.mp-mark circle { fill: var(--map-halo); stroke: var(--map-ink); stroke-width: 1.5; }
.mp-mark text, .mp-obj text, .mp-ref text, .mp-scale text, .mp-north text, .mp-rl { fill: var(--map-ink); font: 600 12px var(--f-mono); text-anchor: middle; paint-order: stroke; stroke: var(--map-halo); stroke-width: 3px; }
.mp-obj text, .mp-ref text, .mp-scale text, .mp-rl { text-anchor: start; }
.mp-obj circle { fill: none; stroke: var(--map-term); stroke-width: 2.5; }
.mp-obj line { stroke: var(--map-term); stroke-width: 2; }
.mp-ref circle { fill: var(--map-ink); }
.mp-ring { fill: none; stroke: var(--map-ink); stroke-opacity: .45; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.mp-scale rect { fill: var(--map-ink); stroke: var(--map-halo); }
.mp-north path { fill: var(--map-ink); stroke: var(--map-halo); }
.phaselist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: ph; }
.phaselist li { counter-increment: ph; display: grid; grid-template-columns: 26px 1fr; gap: 0 8px; padding: 8px 10px 8px 8px; border-left: 4px solid var(--accent); background: var(--bg); border-radius: 0 4px 4px 0; font-size: .86rem; }
.phaselist li::before { content: counter(ph); grid-row: span 3; font: 600 .8rem var(--f-mono); color: var(--muted); }
.phaselist b { font-family: var(--f-display); text-transform: uppercase; letter-spacing: .05em; }
.phaselist .mono { font-size: .74rem; }
.phaselist li.leg { border-left-color: var(--map-leg); } .phaselist li.orbit { border-left-color: var(--map-orbit); } .phaselist li.term { border-left-color: var(--map-term); } .phaselist li.brk { border-left-color: var(--muted); border-left-style: dashed; }
.simcode { margin: 0; max-height: 320px; overflow: auto; padding: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; font: .76rem/1.5 var(--f-mono); white-space: pre; }
#printsheet .sheet { display: grid; gap: 10px; } #printsheet .recviews svg { max-height: 70mm; }
@media print { .bar, main, footer, .toast { display: none !important; } #printsheet { display: block; } #printsheet pre { white-space: pre-wrap; font: 11px/1.5 var(--f-mono); } body { background: #fff; color: #000; } }
footer { max-width: 1180px; margin: 0 auto; padding: 0 16px 40px; color: var(--muted); font-size: .8rem; }

/* ---------- portal ---------- */
.who { margin-left: auto; display: flex; gap: 10px; align-items: center; font-size: .86rem; }
.who .org { font-family: var(--f-mono); font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.who button { padding: 5px 10px; font-size: .82rem; }
.basket { position: relative; }
.basket b { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--faker); color: #fff; font: 600 .7rem/18px var(--f-mono); text-align: center; padding: 0 4px; }
.staffband { background: var(--ink); color: var(--bg); }
.login { max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px; align-items: start; }
@media (max-width: 760px) { .login { grid-template-columns: 1fr; } }
.login form { display: grid; gap: 12px; }
.login label { display: grid; gap: 4px; font-size: .86rem; color: var(--muted); }
input, select, textarea { font: inherit; padding: 9px 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--ink); min-width: 0; }
.acct { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; text-align: left; width: 100%; background: var(--bg); color: var(--ink); border: 1px solid var(--line); padding: 10px 12px; }
.acct:hover { border-color: var(--accent); background: var(--accent-soft); }
.acct .label { grid-column: 1; }
.accts { display: grid; gap: 8px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 14px 16px; display: grid; gap: 2px; text-decoration: none; color: var(--ink); }
.stat .v { font: 600 2rem/1 var(--f-display); font-variant-numeric: tabular-nums; }
a.stat:hover { border-color: var(--accent); }
.feed { display: grid; gap: 0; }
.feed > div { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: center; }
.feed > div:last-child { border-bottom: 0; }
.tag { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; padding: 1px 7px; border-radius: 3px; white-space: nowrap; }
.tag.new { background: var(--fill); color: var(--fill-ink); }
.tag.updated { background: var(--joker-soft); color: var(--joker); }
.ostat { font-family: var(--f-mono); font-size: .74rem; white-space: nowrap; padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor; }
.ostat.Draft, .ostat.Submitted { color: var(--joker); background: var(--joker-soft); }
.ostat.Quoted { color: var(--accent); background: var(--accent-soft); }
.ostat.Accepted, .ostat.In-production, .ostat.Shipped { color: var(--accent); background: var(--accent-soft); }
.ostat.Delivered { color: var(--ok); background: var(--neutral-soft); }
.ostat.Declined { color: var(--faker); background: var(--faker-soft); }
.held { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.hold { font-family: var(--f-mono); font-size: .7rem; padding: 2px 7px; border-radius: 3px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; background: transparent; cursor: pointer; }
.hold.on { border-color: var(--ok); color: var(--ok); background: var(--neutral-soft); cursor: default; }
.hold.inbasket { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.hold.off::before { content: "🔒 "; font-size: .65rem; }
.hold.on::before { content: "✓ "; }
.timeline { display: flex; gap: 0; flex-wrap: wrap; font-family: var(--f-mono); font-size: .72rem; }
.timeline span { padding: 4px 10px; border: 1px solid var(--line); margin-right: -1px; color: var(--muted); }
.timeline span.done { background: var(--accent-soft); color: var(--accent); }
.timeline span.now { background: var(--fill); color: var(--fill-ink); border-color: var(--accent); }
.note { border-left: 3px solid var(--accent); padding: 6px 0 6px 12px; font-size: .9rem; }
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 4px; font-size: .9rem; z-index: 20; max-width: calc(100vw - 32px); }
input.qty { width: 70px; }
td .row { gap: 6px; }
button.sm, .btn.sm { padding: 5px 10px; font-size: .82rem; }

.auth { max-width: 460px; margin: 0 auto; }
.auth form, form.stack { display: grid; gap: 12px; }
.auth label, form.stack label { display: grid; gap: 4px; font-size: .86rem; color: var(--muted); }
.qr { background: #fff; padding: 12px; border-radius: 6px; justify-self: start; }
.qr img { width: 180px; height: 180px; display: block; }
.err { color: var(--faker); font-size: .88rem; min-height: 1.2em; }
.loading { color: var(--muted); font-family: var(--f-mono); font-size: .8rem; }
.secret { font-family: var(--f-mono); font-size: .8rem; word-break: break-all; }
#printsheet .sheet + .sheet { break-before: page; }

/* behaviour playback and size comparison */
.playbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.playbar input[type=range] { flex: 1 1 200px; accent-color: var(--accent); }
.playbar [data-read] { font-size: .8rem; min-width: 260px; }
.mp-dot circle { fill: #ffd23f; stroke: var(--map-halo); stroke-width: 2; } .mp-dot .halo { fill: #ffd23f44; stroke: none; }
.sizeview { margin: 0; display: grid; gap: 6px; } .sizeview svg { width: 100%; max-height: 260px; }
.sv-threat polygon { fill: var(--shape); stroke: var(--ink); stroke-width: 18; stroke-linejoin: round; }
.sv-ref path, .sv-ref rect, .sv-ref circle { fill: none; stroke: var(--muted); stroke-width: 22; } .sv-ref line { stroke: var(--muted); stroke-width: 10; } .sv-ref .w { fill: var(--panel); }
.sv-ground { stroke: var(--ink); stroke-width: 20; } .sv-l { font: 600 190px var(--f-mono); fill: var(--muted); text-anchor: middle; }

/* recognition trainer */
.trainer { display: grid; gap: 14px; }
.trq { display: grid; place-items: center; height: 240px; overflow: hidden; background: var(--bg); border-radius: 6px; }
.trq svg { height: 210px; width: auto; max-width: 100%; } .trq polygon { fill: var(--ink) !important; } .trq line, .trq circle { stroke: var(--ink); }
.tropts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; }
.tropts button { padding: 14px; font-size: 1rem; } .tropts .right { border-color: var(--ok); color: var(--ok); } .tropts .wrong { border-color: var(--draft); color: var(--draft); }
.trclock { height: 6px; background: var(--bg); border-radius: 3px; overflow: hidden; } .trclock span { display: block; height: 100%; background: var(--accent); animation: trclock 10s linear forwards; }
@keyframes trclock { from { width: 100%; } to { width: 0; } }
@media (prefers-reduced-motion: reduce) { .trclock span { animation: none; } }

/* Phones: the header scrolls away (its links on one row you can swipe), and table rows stack, each value under its
   column's name (lib.js copies the names onto the cells as data-label). */
@media (max-width: 640px) {
  .bar { position: static; }
  nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  nav a { white-space: nowrap; }
  .scroll table, .scroll tbody, .scroll tr, .scroll td { display: block; width: auto; }
  .scroll thead { display: none; }
  .scroll tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .scroll td { border: 0; padding: 3px 0; min-width: 0 !important; }
  .scroll td.num { white-space: normal; }
  .scroll td[data-label]::before { content: attr(data-label); display: block; font-family: var(--f-mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  input[type="file"] { max-width: 100%; }
}

/* Run planner: side panel and map; on phones the map comes first. Leaflet's layers stay inside the map (isolation). */
.planner { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 16px; align-items: start; }
.plside { display: grid; gap: 14px; align-content: start; }
.plside .row { gap: 6px; }
.plmap { height: min(72vh, 760px); min-height: 420px; border: 1px solid var(--line); border-radius: 6px; isolation: isolate; background: var(--bg); }
@media (max-width: 900px) { .planner { grid-template-columns: minmax(0, 1fr); } .plmap { order: -1; height: 60vh; min-height: 320px; } }
.plchecks .todo { color: var(--muted); } .plchecks .info { color: var(--muted); }
.leaflet-container { font-family: var(--f-body); }
path.plbound { stroke: var(--accent); fill: var(--accent); fill-opacity: .08; stroke-width: 2; }
path.plnogo { stroke: var(--faker); fill: var(--faker); fill-opacity: .2; stroke-width: 2; }
.plh { background: var(--panel); border: 2px solid var(--accent); border-radius: 50%; }
.plh.plnogo { border-color: var(--faker); } .plh.plfirst { background: var(--accent); cursor: pointer; } .plh.pldraft { border-style: dashed; }
.plpin { display: grid; place-items: center; border-radius: 50%; border: 2px solid #fff; color: #fff; font: 600 .62rem var(--f-mono); box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.plpin.plobjective { background: var(--defended); } .plpin.pllaunch { background: var(--accent); }
/* Run planner step 2: phases, verdict, the course on the map, playback. */
.pltabs button[aria-pressed="true"] { background: var(--fill); color: var(--fill-ink); border-color: var(--accent); }
.plphase { display: grid; gap: 4px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.plfs { display: flex; flex-wrap: wrap; gap: 8px; }
.plf { display: grid; gap: 2px; font-size: .78rem; color: var(--muted); }
.plf input { width: 96px; font: inherit; font-size: .9rem; padding: 5px 7px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--ink); }
.plf small { font-family: var(--f-mono); font-size: .68rem; }
.plverdict { font-weight: 600; padding: 6px 10px; border-radius: 4px; border: 1px solid currentColor; margin-bottom: 6px; }
.plverdict.ok { color: var(--ok); } .plverdict.warn { color: var(--dev); } .plverdict.bad { color: var(--faker); }
path.plleg { stroke-width: 3; fill: none; } path.plcourse { stroke: var(--threat); } path.plterm { stroke: var(--threat); stroke-dasharray: 2 5; stroke-linecap: round; }
path.pltransit, path.plret { stroke: var(--muted); stroke-dasharray: 6 6; stroke-width: 2; }
path.plstand { stroke: var(--defended); stroke-dasharray: 4 4; stroke-width: 1.5; fill: var(--defended); fill-opacity: .1; }   /* the safe zone round what is defended: blue (DESIGN §3) */
.plwp { display: grid; place-items: center; border-radius: 50%; background: var(--panel); border: 2px solid var(--accent); color: var(--ink); font: 600 .62rem var(--f-mono); }
.plwp.plwpbo { border-color: var(--faker); }
.plaxis { cursor: grab; } .plaxis span { display: block; width: 100%; height: 100%; box-sizing: border-box; background: var(--dev); border: 2px solid #fff; transform: rotate(45deg); box-shadow: 0 1px 4px rgba(0,0,0,.4); }
path.plplay { stroke: #fff; stroke-width: 2; fill: var(--dev); fill-opacity: 1; }
/* Run planner: the map stays in view on wide screens; sliders, run-at-a-glance strip, waypoints, report details. */
@media (min-width: 901px) { .plmap { position: sticky; top: calc(var(--barh, 110px) + 12px); height: calc(100vh - var(--barh, 110px) - 32px); min-height: 420px; } }
.plsl { display: grid; gap: 2px; font-size: .84rem; color: var(--muted); }
.plsl b { color: var(--ink); font-weight: 600; } .plsl input[type="range"] { width: 100%; accent-color: var(--accent); }
.plsl small { font-family: var(--f-mono); font-size: .68rem; }
.plissues { margin-bottom: 6px; }
.plglbar { display: block; width: 100%; height: 22px; border-radius: 4px; overflow: hidden; background: var(--bg); }
rect.plgl.g { fill: var(--muted); } rect.plgl.b { fill: var(--accent); } rect.plgl.r { fill: var(--faker); }
.plgllist { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .78rem; margin: 4px 0; }
i.plgl { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
i.plgl.g { background: var(--muted); } i.plgl.b { background: var(--accent); } i.plgl.r { background: var(--faker); }
.plwptab th, .plwptab td { font-size: .78rem; padding: 4px 6px; }
.plwp.plwpvia { border-color: var(--dev); } .plwp.pldrag { cursor: grab; }
.plfs2 { border: 1px solid var(--line); border-radius: 6px; padding: 10px; display: grid; gap: 8px; margin: 0; min-width: 0; }
.plfs2 > * { min-width: 0; } .plfs2 .row { flex-wrap: wrap; } .plfs2 a, .plfs2 span { overflow-wrap: anywhere; } .plfs2 input[type="file"] { min-width: 0; max-width: 100%; flex: 1 1 140px; }
.plfs2 legend { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 0 4px; }
.field textarea { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--ink); max-width: 100%; resize: vertical; }

/* Range report (printed from the run planner) */
#printsheet .rr { font: 10pt/1.4 var(--f-body); color: #000; gap: 6px; }
.rr h1 { font: 700 20pt var(--f-display); margin: 2px 0; } .rr h2 { font-size: 12pt; margin: 12px 0 4px; border-bottom: 1px solid #000; break-after: avoid; }
.rr table { width: 100%; border-collapse: collapse; font-size: 8.5pt; } .rr th, .rr td { border: 1px solid #999; padding: 3px 5px; text-align: left; vertical-align: top; }
.rr tr { break-inside: avoid; } .rrkv th { width: 30%; background: #f2f2f2; } .rrt thead th, .rrsign thead th { background: #f2f2f2; }
.rrcls { text-align: center; font-weight: 700; letter-spacing: .12em; margin: 0; }
.rrhead { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.rrverdict { border: 2px solid; padding: 6px 10px; font-weight: 700; max-width: 45%; }
.rrverdict.ok, .rrchecks .ok { color: #2c7a3f; } .rrverdict.warn, .rrchecks .warn { color: #8a5d00; } .rrverdict.bad, .rrchecks .bad { color: #a8361b; }
.rrmap { width: 100%; max-height: 150mm; border: 1px solid #999; background: #fff; }
.rrmap .m-bd { fill: rgba(17,24,28,.04); stroke: #11181c; stroke-width: 2.5; stroke-dasharray: 8 6; } .rrmap .m-ng { fill: rgba(168,54,27,.25); stroke: #a8361b; stroke-width: 2; }
.rrmap .m-so { fill: rgba(168,54,27,.08); stroke: #a8361b; stroke-width: 2; stroke-dasharray: 6 6; }
.rrmap line.m-co { stroke: #c41e2c; stroke-width: 4; } .rrmap line.m-te { stroke: #c41e2c; stroke-width: 4; stroke-dasharray: 3 6; stroke-linecap: round; } .rrmap line.m-tr, .rrmap line.m-rt { stroke: #555; stroke-width: 2.5; stroke-dasharray: 10 8; }
.rrmap .m-wp circle { fill: #fff; stroke: #c41e2c; stroke-width: 2; } .rrmap .m-wp text { font: 600 12px var(--f-mono); text-anchor: middle; }
.rrmap .m-ob circle { fill: #1d6fd1; } .rrmap .m-la rect { fill: #c41e2c; }   /* the objective blue, the threat's launch red */ .rrmap .m-ob text, .rrmap .m-la text { font: 700 14px var(--f-body); }
.rrmap .m-n path { fill: #000; } .rrmap .m-n text { text-anchor: middle; font: 700 14px var(--f-body); } .rrmap .m-sc rect { fill: #000; } .rrmap .m-sc text { font: 12px var(--f-body); }
.rrkey { font-size: 8pt; } .rrkey .k { display: inline-block; width: 16px; height: 8px; margin: 0 4px 0 10px; vertical-align: 0; border: 2px dashed #11181c; }
.rrkey .k.m-ng { background: rgba(168,54,27,.25); border-color: #a8361b; } .rrkey .k.m-so { border: 2px dashed #a8361b; } .rrkey .k.m-co { border: 0; border-top: 4px solid #c41e2c; height: 0; }
.rrkey .k.m-te { border: 0; border-top: 4px solid #a8361b; height: 0; } .rrkey .k.m-tr { border: 0; border-top: 3px dashed #555; height: 0; }
.rrchecks { font-size: 8.5pt; margin: 4px 0; padding-left: 16px; } .rrsign td { height: 11mm; }
.rrblank { display: inline-block; min-width: 50mm; border-bottom: 1px solid #000; } .rrsmall { font-size: 7.5pt; color: #333; }

/* Header: one row. The page links scroll sideways if they run out of room; account pages sit in a menu. */
.bar-in { flex-wrap: nowrap; gap: 14px; }
@media (max-width: 1320px) { #nav { gap: 2px; } #nav a { padding: 6px 8px; } }
.acct:not([open]) > .acctmenu { display: none; }   /* closed: takes no room in the bar */
.acct { max-height: 40px; margin: 0; padding: 0; border: 0; background: none; }   /* browsers add room for a closed menu's content; the open menu floats below anyway */
#nav { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
#nav a { white-space: nowrap; }
.who { flex: none; }
.acct { position: relative; }
.acct .acctsum { font: inherit; color: var(--ink); background: transparent; min-height: 0; cursor: pointer; display: flex; align-items: center; padding: 6px 26px 6px 10px; border: 1px solid var(--line); border-radius: 4px; position: relative; color: var(--ink); font-size: .88rem; font-weight: 500; }
.acctname { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct .acctsum::after { content: ""; position: absolute; right: 8px; top: 50%; width: 6px; height: 6px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: translateY(-70%) rotate(45deg); }
.acct .acctsum:hover, .acct[open] .acctsum { background: var(--accent-soft); }
.acctmenu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 190px; display: grid; gap: 2px; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 6px 24px rgba(0,0,0,.18); }
.accthead { display: grid; gap: 2px; padding: 6px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); font-size: .86rem; }
.acctmenu button { margin-top: 6px; justify-content: center; }
.basket { white-space: nowrap; }
.acctmenu a { padding: 8px 10px; border-radius: 4px; color: var(--ink); text-decoration: none; font-size: .9rem; }
.acctmenu a:hover { background: var(--accent-soft); } .acctmenu a[aria-current="page"] { color: var(--accent); font-weight: 600; }
@media (max-width: 640px) {
  .bar-in { flex-wrap: wrap; }
  #nav { order: 3; flex-basis: 100%; }
  .acctname { max-width: 40vw; }
}
/* Run planner landing page: intro and the app card side by side */
.plhero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 860px) { .plhero { grid-template-columns: minmax(0, 1fr); } }
.plapp { display: grid; gap: 10px; border-color: var(--accent); }
.plapp h2 { margin: 0; } .plok { color: var(--ok); font-weight: 600; margin: 0; }
.plsteps { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 4px; font-size: .9rem; }
.plfield { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.plfield summary { cursor: pointer; } .plfieldform { display: grid; gap: 10px; margin-top: 8px; }

/* Lyrebird mission software: the field app (body.mc, app.js). The brand's dark palette (DESIGN §2) whatever the
   device's setting, so it reads like a range display, and full width for the map. */
body.mc { --bg: #0e1215; --panel: #161b1f; --alt: #12171a; --ink: #eef0ec; --muted: #9aa4a8; --line: #2a3237;
  --accent: #ef4452; --accent-soft: #3a1a1e; --shape: #2c3438; --draft: #ec8a6c; --draft-soft: #3a231b;
  --faker: #f08a80; --faker-soft: #3d1f1c; --joker: #e3b545; --joker-soft: #392e14; --neutral: #79c98c; --neutral-soft: #1c3322;
  --ok: #79c98c; --dev: #e3b545; --future: #7d878b; color-scheme: dark; }
body.mc .bar-in, body.mc main { max-width: none; }
body.mc main { padding-inline: clamp(12px, 2vw, 28px); }
body.mc #nav a { font-family: var(--f-mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; border-radius: 2px; }
body.mc .draftband { padding: 2px 16px; font-size: .64rem; }
body.mc .panel { border-radius: 4px; }
@media (min-width: 901px) { body.mc .plmap { min-height: calc(100vh - 170px); } }
/* The app on a phone: its pages as a tab bar at the bottom, in thumb reach, like other phone apps (app.js TAB_ICON). */
#nav a svg { display: none; }
@media (max-width: 760px) {
  body.mc #nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; justify-content: space-around; gap: 0; overflow: visible;
    background: var(--black); border-top: 1px solid var(--line); padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); margin: 0; }
  body.mc #nav a { flex: 1 1 0; display: grid; justify-items: center; gap: 2px; padding: 6px 2px; min-height: 52px; font-size: .62rem; letter-spacing: .04em; color: var(--muted); background: none; text-decoration: none; }
  body.mc #nav a svg { display: block; width: 24px; height: 24px; }
  body.mc #nav a[aria-current="page"] { color: var(--accent); background: none; }
  body.mc main { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  body.mc .toast { bottom: calc(76px + env(safe-area-inset-bottom)); }
  body.mc .pllivemap { height: calc(100vh - 290px); }
  body.mcauth #nav { display: none; }
}
.mcsoon { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); opacity: .6; padding: 6px 8px; white-space: nowrap; cursor: default; }
.mcsoon b { font-weight: 500; color: var(--accent); }
.mcnet { border: 1px solid currentColor; } .mcnet.on { color: var(--ok); } .mcnet.off { color: var(--accent); }
.mcland { max-width: 760px; margin: 0 auto; gap: 18px; }
.mcland h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); color: var(--accent); }
.mclede { font-size: 1.08rem; }
.mcfeat { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.mcfeat li { display: grid; gap: 4px; border-left: 2px solid var(--accent); padding: 4px 0 4px 12px; }
.mcfeat span { color: var(--muted); font-size: .9rem; }
.mcinst { display: grid; gap: 12px; border-color: var(--accent); }

/* MGRS grid on the planner map (planner.js drawGrid): dark blue lines like a military map, labels on a light backing so
   they read over any map. */
path.plgrid { stroke: #123f8c; stroke-opacity: .6; stroke-width: 1; fill: none; }
path.plgrid100 { stroke-width: 2; stroke-opacity: .75; }
.plgridlab, .plgridsq { font-family: var(--f-mono); color: #0d2f6b; background: rgba(255, 255, 255, .78); white-space: nowrap; pointer-events: none; }
.plgridlab { font-size: 10px; font-weight: 600; padding: 0 2px; }
.plgridlabE { transform: translate(-50%, -16px); } .plgridlabN { transform: translate(4px, -50%); }
.plgridsq { font-size: 13px; font-weight: 600; padding: 1px 4px; transform: translate(-50%, -50%); }
.plgridctl button { font-family: var(--f-mono); font-size: .74rem; font-weight: 600; letter-spacing: .06em; padding: 5px 9px; border: 0; border-radius: 3px; background: #fff; color: #123f8c; cursor: pointer; }
.plgridctl button[aria-pressed="true"] { background: #123f8c; color: #fff; }
.plgridout { font-family: var(--f-mono); font-size: .8rem; padding: 4px 8px; border: 0; border-radius: 3px; background: rgba(255, 255, 255, .9); color: #0d2f6b; cursor: copy; }
@media (pointer: coarse) { .plmap.plgridon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; z-index: 450; pointer-events: none;
  background: linear-gradient(#123f8c, #123f8c) center / 2px 100% no-repeat, linear-gradient(#123f8c, #123f8c) center / 100% 2px no-repeat; } }

/* The Maps panel on the planner map (maps.js): offline areas and the organisation's own maps. */
.plmapsctl > button { font-family: var(--f-mono); font-size: .74rem; font-weight: 600; letter-spacing: .06em; padding: 5px 9px; border: 0; border-radius: 3px; background: #fff; color: #123f8c; cursor: pointer; }
.plmapsctl > button[aria-expanded="true"] { background: var(--black); color: #fff; }
.plmaps { position: absolute; right: 0; top: calc(100% + 6px); width: min(320px, 80vw); max-height: 60vh; overflow: auto; display: grid; gap: 12px; padding: 12px;
  background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 6px 24px rgba(0, 0, 0, .25); font-size: .84rem; }
.plmapsctl { position: relative; }
.plmapsh { display: grid; gap: 6px; } .plmapsh .muted, .plmapnote { font-size: .78rem; }
.plmaprow { justify-content: space-between; gap: 6px; } .plmine-row { display: grid; gap: 4px; border-top: 1px solid var(--line); padding-top: 6px; }
.plmine-row input[type="range"] { flex: 1 1 80px; }
.plmapadd { justify-self: start; cursor: pointer; }
path.plmine-shape { stroke: #c2185b; stroke-width: 2; fill: #c2185b; fill-opacity: .12; }
.plgridgzd { font-size: 15px; padding: 2px 6px; }

/* Display modes for the field (app.js applyDisplay), remembered per device. */
/* Night: everything in dim red on black, so eyes stay adapted to the dark (map included). */
/* On the root element, so fixed things (header, messages) stay put: grey, then tinted and turned to deep red, dimmed. */
html[data-display="night"] { filter: grayscale(1) sepia(1) saturate(6) hue-rotate(-38deg) brightness(.55) contrast(1.1); background: #000; }
/* Sunlight: black on white, heavier text and lines, readable in full sun. */
html[data-display="sun"] body, html[data-display="sun"] body.mc { --bg: #ffffff; --panel: #ffffff; --ink: #000000; --muted: #1a1a1a; --line: #000000; --accent: #a50f1c; --brand: #a50f1c;
  --accent-soft: #fbe3e5; --shape: #c8c8c8; --draft: #8a1c00; --draft-soft: #ffe9e0; --ok: #005c1f; color-scheme: light; font-weight: 500; }
html[data-display="sun"] .panel, html[data-display="sun"] input, html[data-display="sun"] select, html[data-display="sun"] textarea, html[data-display="sun"] button { border-width: 2px; }
html[data-display="sun"] .leaflet-container { filter: contrast(1.25) saturate(1.2); }
/* Big buttons: finger- and glove-sized targets. */
html.bigui button, html.bigui .btn, html.bigui input, html.bigui select { min-height: 48px; font-size: 1.05rem; }
html.bigui input[type="checkbox"], html.bigui input[type="radio"] { min-height: 0; width: 24px; height: 24px; }
html.bigui .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; font-size: 22px; }
html.bigui nav a { padding: 12px 14px; }
@media print { html[data-display] { filter: none; } }
.acctdisplay { display: grid; gap: 6px; border-top: 1px solid var(--line); padding-top: 8px; }
/* Mission Control's sign-in screens (app.js mcauth, lib.js signInScreen app): full screen, no header, like any phone app. */
body.mcauth header.bar { display: none; }
body.mcauth main#app { padding-top: env(safe-area-inset-top); }
body.mcauth .auth { min-height: 100dvh; min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; margin: 0 auto; }
body.mcauth .auth .panel { background: none; border: 0; box-shadow: none; width: min(400px, 100%); padding: 0; }
.appauthbox { width: min(360px, 100%); display: grid; gap: 14px; justify-items: center; text-align: center; }
.appauthbox .logo { font-size: 2.4rem; color: #eef0ec; justify-items: center; }
.appauthbox h1 { font: 500 .9rem var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin: 6px 0 14px; }
.appauthbox form { display: grid; gap: 10px; width: 100%; }
.appauthbox input { font-size: 17px; min-height: 50px; padding: 0 14px; border-radius: 10px; width: 100%; box-sizing: border-box; }
.appauthbox button[type=submit] { min-height: 50px; font-size: 1.05rem; border-radius: 10px; width: 100%; margin-top: 4px; justify-content: center; text-align: center; }
.appauthbox .err:empty { display: none; }
.linkbtn { background: none; border: 0; color: var(--accent); font: inherit; font-size: .95rem; padding: 8px; cursor: pointer; min-height: 0; box-shadow: none; }
/* Range day at a glance (planner.js glance): the range's state in big letters, the vehicles and the daylight. */
.plglance { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 4px 0 6px; }
.plglance > * { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--alt); color: var(--ink); text-decoration: none; }
.plglance b { font: 700 1.5rem/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; }
.plglance-state.hot { background: var(--brand); border-color: var(--brand); color: #fff; } .plglance-state.hot .label, .plglance-state.hot .muted { color: #fff; }
.plglance-state.cold { border-left: 4px solid var(--ok); } .plglance-state.cold b { color: var(--ok); }
/* The Live map: Follow, and the vehicle cards beside the map on a wide screen (an iPad). */
.plfollow { font: 600 .9rem var(--f-body); min-height: 44px; padding: 8px 16px; border-radius: 22px; border: 2px solid #fff; background: var(--black); color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.4); }
.plfollow[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); }
.pllivewrap { display: grid; gap: 12px; }
.plliveside { display: none; }
@media (min-width: 1000px) { .pllivewrap { grid-template-columns: minmax(0, 1fr) 340px; } .plliveside { display: block; max-height: calc(100vh - 230px); overflow-y: auto; } .plliveside [data-plvehlist] { display: grid; gap: 10px; } }
/* Touch screens: map buttons big enough for a thumb (or a glove with Big buttons on). */
@media (pointer: coarse) { .leaflet-bar a { width: 40px; height: 40px; line-height: 40px; font-size: 20px; } .plmapsctl > button { min-height: 40px; padding: 8px 12px; font-size: .8rem; } }
/* Run planner step 2: the threats that fit the drawn range (planner.js pickHtml). */
.plpick { display: grid; gap: 10px; } .plpick h3 { margin: 0; }
.plfits { display: grid; gap: 8px; }
.plfit { display: grid; gap: 3px; justify-items: start; text-align: left; width: 100%; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-left: 4px solid var(--ok); border-radius: 6px; padding: 10px 12px; font: inherit; cursor: pointer; }
.plfit.warn { border-left-color: var(--dev); } .plfit.bad { border-left-color: var(--line); opacity: .85; }
.plfit:hover { border-color: var(--accent); }
.plfit-v { font-weight: 600; font-size: .86rem; } .plfit.ok .plfit-v { color: var(--ok); } .plfit.warn .plfit-v { color: var(--dev); } .plfit.bad .plfit-v { color: var(--muted); }
.plfit-why { font-size: .8rem; }
.plnotfit summary { cursor: pointer; color: var(--muted); margin: 4px 0 8px; }
.plpicked { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.plnext { width: 100%; min-height: 48px; }
/* Launch: loading the run onto a vehicle on the link (planner.js loadHtml). */
.plload { display: grid; gap: 8px; padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--line); }
.plloadsum { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--alt); }
.plloadsum > div { display: grid; gap: 1px; }
.plloadok { color: var(--ok); font-weight: 600; margin: 0; } .plloadbad { color: var(--faker); font-weight: 600; margin: 0; } .plloadbusy { margin: 0; font-family: var(--f-mono); font-size: .86rem; }
/* Who's in charge of a vehicle (vehicles.js who) and the Admin's takeover approval (planner.js). */
.plvehwholine { justify-content: space-between; gap: 8px; }
.plvehwho { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--alt); }
.plvehwho > div { display: grid; gap: 1px; }
.plvehwho .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.plvehsec { color: var(--ok); } .plvehunsec { color: var(--joker); }
.plvehpass { font-size: 1.05rem; letter-spacing: .08em; padding: 8px 10px; background: var(--panel); border: 1px dashed var(--line); border-radius: 4px; user-select: all; }
.plapprove { display: grid; gap: 8px; max-width: 420px; }
/* The Evidence plan in the run planner (planner.js evidenceHtml). */
.plev { display: grid; gap: 10px; }
.plevrow { display: grid; gap: 6px; padding: 10px 0; border-top: 1px solid var(--line); }
.plevrow .row { gap: 8px; align-items: center; }
.plevrow input[type=number] { width: 7em; }
.plevadd { gap: 8px; }
/* The installed web app's offer to stay signed in (applock.js offerHtml). */
.lockoffer { display: grid; gap: 8px; margin-bottom: 12px; }
/* Vehicle alerts (vehicles.js): banners across the top, over every page; critical ones stay until dismissed. */
.vehalerts { position: fixed; top: calc(8px + env(safe-area-inset-top)); left: 8px; right: 8px; z-index: 50; display: grid; gap: 6px; pointer-events: none; }
.vehalert { pointer-events: auto; display: flex; align-items: center; gap: 8px; padding: 12px 12px 12px 14px; border-radius: 10px; font-weight: 600;
  background: #3d1f1c; color: #ffdcd6; border: 1px solid #f08a80; box-shadow: 0 6px 18px rgba(0,0,0,.45); }
.vehalert.warning { background: #392e14; color: #ffe9b0; border-color: #e3b545; }
.vehalert a { color: inherit; text-decoration: none; flex: 1 1 auto; }
.vehalert button { background: none; border: 0; color: inherit; font-size: 1.4rem; line-height: 1; padding: 4px 8px; min-height: 0; box-shadow: none; }
.plvehalerts { display: grid; gap: 8px; }
.plvehlog { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .86rem; }
.plvehlog li.critical { color: var(--faker); }
.plvehlog li.warning { color: var(--joker); }
/* My account: authenticators */
.authlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.authlist li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.authlist li button { margin-left: auto; }
.authform { display: grid; gap: 10px; max-width: 420px; }
/* The phone app's lock (applock.js): covers everything; nothing underneath is lost. */
.acctlock { display: grid; gap: 6px; border-top: 1px solid var(--line); padding-top: 8px; }
.lockscreen { position: fixed; inset: 0; z-index: 10000; background: var(--bg); display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top)) 16px 16px; }
.lockbox { display: grid; gap: 14px; width: min(360px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 24px; }
.lockbox h1 { font-size: 2rem; margin: 0; }
.lockbox > button { justify-self: stretch; }
.lockbox > button.ghost { justify-self: start; }
.lockpin { display: grid; gap: 10px; }
.lockpin input, .lockbox input[inputmode="numeric"] { font-size: 1.4rem; letter-spacing: .3em; text-align: center; }
.plundo { gap: 6px; } .pldraftnote { display: grid; gap: 8px; }

/* Field tools on the map (fieldtools.js): my position, measure, markers. */
.pltoolsctl { position: relative; } .pltoolsctl > button { font-family: var(--f-mono); font-size: .74rem; font-weight: 600; letter-spacing: .06em; padding: 5px 9px; border: 0; border-radius: 3px; background: #fff; color: #123f8c; cursor: pointer; }
.pltoolsctl > button[aria-expanded="true"], .pltoolsctl > button.on { background: #123f8c; color: #fff; }
.pltools { display: grid; position: absolute; right: calc(100% + 6px); top: 0; background: #fff; border-radius: 4px; box-shadow: 0 2px 10px rgba(0, 0, 0, .25); white-space: nowrap; } .pltools[hidden] { display: none; } .pltools button { font-family: var(--f-mono); font-size: .72rem; font-weight: 600; padding: 5px 8px; border: 0; border-bottom: 1px solid #ccc; background: #fff; color: #123f8c; cursor: pointer; text-align: left; }
.pltools button:last-child { border-bottom: 0; } .pltools button[aria-pressed="true"] { background: #123f8c; color: #fff; }
.pltoolsout { display: grid; gap: 4px; max-width: min(320px, 70vw); padding: 8px 10px; background: rgba(255, 255, 255, .95); color: #10223f; border-radius: 4px; font-size: .8rem; box-shadow: 0 2px 10px rgba(0, 0, 0, .25); }
.pltoolsout .muted { color: #3b4a5e; } .pltoolsout .row { gap: 4px; }
.pltooling { cursor: crosshair; }
path.plme { stroke: #fff; stroke-width: 3; fill: #1a73e8; fill-opacity: 1; } path.plme-acc { stroke: #1a73e8; stroke-width: 1; fill: #1a73e8; fill-opacity: .12; }
path.plmeasure { stroke: #e8008a; stroke-width: 3; stroke-dasharray: 8 6; fill: none; } path.plmeasure-pt { stroke: #e8008a; stroke-width: 2; fill: #fff; fill-opacity: 1; }
.plmeasure-tip { font-family: var(--f-mono); font-size: .74rem; }
.plmark span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #e8008a; color: #fff; font: 600 10px var(--f-mono); border: 2px solid #fff; }
.plmark span { line-height: 1; }

/* Step 4 of a run: Ready to go (planner.js sideReady). */
.plready { display: grid; gap: 10px; } .plready-go { color: var(--ok); }
.plreadylist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.plreadylist li { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 4px; }
.plready-i { font-weight: 700; text-align: center; } .plready-ok .plready-i { color: var(--ok); } .plready-warn .plready-i { color: var(--dev); } .plready-bad .plready-i { color: var(--faker); } .plready-todo .plready-i { color: var(--muted); }

/* Briefing mode (planner.js brief): the run full screen for the pre-run brief. */
.plbriefing { background: var(--bg); padding: 16px; overflow: auto; }
.plbriefing .plside, .plbriefing > a, .plbriefing > div:first-of-type { display: none; }
.plbriefing .planner { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); }
.plbriefing .plmap { height: calc(100vh - 40px); max-height: none; position: static; }
.plbriefbar { display: grid; gap: 14px; align-content: start; }
.plbriefhead { display: flex; justify-content: space-between; gap: 12px; align-items: start; } .plbriefhead h2 { font-size: 2rem; }
.plbrieffacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .plbrieffacts > span { display: grid; gap: 2px; } .plbrieffacts b { font-size: 1.05rem; }
.plbriefphase { display: grid; gap: 4px; padding: 14px; border: 2px solid var(--accent); border-radius: 6px; }
.plbriefphase span { font: 600 2.2rem/1.1 var(--f-display); text-transform: capitalize; } .plbriefphase small { font-family: var(--f-mono); color: var(--muted); }
.plbriefplay { gap: 10px; } .plbriefplay input { flex: 1 1 160px; } .plbriefplay button { min-width: 110px; }
@media (max-width: 900px) { .plbriefing .planner { grid-template-columns: minmax(0, 1fr); } .plbriefing .plmap { height: 60vh; } }

/* First-time walkthrough (walkthrough.js). */
.tourcard { position: fixed; left: var(--tx, 16px); top: var(--ty, 16px); z-index: 3000; width: min(340px, calc(100vw - 32px)); display: grid; gap: 8px; padding: 14px;
  background: var(--panel); color: var(--ink); border: 2px solid var(--accent); border-radius: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, .35); }
.tourcard p { font-size: .9rem; } .tourcard .row { justify-content: flex-end; gap: 6px; }
.tourhl { outline: 3px solid var(--accent) !important; outline-offset: 3px; border-radius: 4px; position: relative; z-index: 2; }

/* Range day and the range log (planner.js rangeDayHtml). */
.plday { display: grid; gap: 12px; } .plday-head { justify-content: space-between; } .plday-head h2 { margin: 0; }
.pldayruns { display: grid; gap: 6px; } .pldayruns a { text-decoration: none; color: var(--ink); padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px; }
.pldaybtns { gap: 8px; } .pldaybtns button { min-width: 110px; }
.pllog-red { background: #b3261e; color: #fff; border-color: #b3261e; } .pllog-green { background: #1d5e2f; color: #fff; border-color: #1d5e2f; }   /* the same strong red and green in every theme */
.pldaylog { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 320px; overflow: auto; }
.pldaylog li { display: grid; grid-template-columns: 74px 110px 1fr auto; gap: 8px; padding: 5px 8px; border-left: 3px solid var(--line); font-size: .88rem; }
.pldaylog li.pllog-hot, .pldaylog li.pllog-abort { border-left-color: var(--faker); } .pldaylog li.pllog-cold { border-left-color: var(--neutral); }
@media (max-width: 640px) { .pldaylog li { grid-template-columns: 66px 1fr; } }
.plimport { cursor: pointer; }

/* The vehicle link (vehicles.js): vehicles on any map, the Vehicles page and the Live map. */
.plveh { position: relative; } .plveh svg { overflow: visible; } .plveh path { fill: var(--threat); stroke: #fff; stroke-width: 2; }   /* the vehicles play the threat: red */
.plveh.armed path { fill: #e8008a; } .plveh.stale path { fill: #8a958d; }
.plveh span { position: absolute; left: 26px; top: 6px; font: 600 11px var(--f-mono); color: #fff; background: rgba(0, 0, 0, .65); padding: 0 4px; border-radius: 3px; white-space: nowrap; }
path.plvehtrail { stroke: var(--threat); stroke-width: 2; stroke-opacity: .7; fill: none; }
.plvehlink { display: grid; gap: 8px; } .plvehlist { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.plvehcard { display: grid; gap: 10px; } .plvehhead { justify-content: space-between; } .plvehhead h3 { margin: 0; }
.plvehgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .plvehgrid > span { display: grid; gap: 1px; min-width: 0; } .plvehgrid b { overflow-wrap: anywhere; }
.plvehst { border: 1px solid currentColor; } .plvehst.armed { color: #e8008a; } .plvehst.stale { color: var(--muted); }
.plvehtext { font-family: var(--f-mono); font-size: .8rem; }
.pllive { gap: 12px; } .pllivemap { height: calc(100vh - 230px); min-height: 360px; }

/* Text for screen readers only (table columns of buttons, pictures). */
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hold.notyet { border-style: dashed; cursor: default; }   /* not offered yet: readable text, dashed outline */

/* Phones and tablets: 16px text in boxes, or iOS zooms the page in when one is tapped (last, so it wins over smaller boxes). */
@media (pointer: coarse) { input, select, textarea, .plf input { font-size: max(16px, 1em); } }

/* The black header's own controls (last, so they win over the general button styles): light on black. */
.bar .who .org { color: #9aa4a8; }
.bar .who .ghost, .bar .who .btn.ghost, .bar .acct .acctsum { color: #eef0ec; border-color: #3a4448; background: transparent; }
.bar .who .ghost:hover, .bar .who .btn.ghost:hover, .bar .acct .acctsum:hover, .bar .acct[open] .acctsum, .bar .acct .acctsum:focus-visible { color: #ffffff; background: #1d2428; }
.bar .who .btn.ghost[aria-current="page"] { border-color: var(--brand); }
.bar .acct .acctsum::after { border-color: #9aa4a8; }
.bar .acctmenu { color: var(--ink); }