/* Charter Board: styles */
/* Layout: a dispatch-office ops board — flight-strip header, a sticky tab bar, one working view per tab */
:root {
  /* Night-ops palette: one dark theme for every viewer, keyed to the navy of the route maps */
  --bg: #0a1017;
  --panel: #121b25;
  --ink: #e6ecf2;
  --muted: #8e9cab;
  --line: #243140;
  --accent: #5aa8e8;
  --accent-soft: #16283a;
  --good: #3cc488;
  --warn: #e0a44a;
  --bad: #ef6b5b;
  --strip: #060b11;
  --strip-ink: #e6ecf2;
  --teal: #3cc6cc;
  --violet: #a993f5;
  --rose: #f07ba0;
  --gold: #e2b65c;
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme: dark;
}

body { background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 14px; line-height: 1.5; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--bg); }
.wrap { max-width: 1180px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 20px 48px; display: grid; gap: 16px; }
.num, td.num, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
h1, h2, h3 { font-family: var(--display); margin: 0; letter-spacing: .01em; text-wrap: balance; }
h2 { font-size: 22px; font-weight: 600; }
h3 { font-size: 17px; font-weight: 600; }
.label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 500; }

.strip { background: var(--strip); color: var(--strip-ink); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 10px; padding: 16px 20px; display: grid; grid-template-columns: 1fr auto; gap: 12px 24px; align-items: end; }
.strip h1 { font-size: 34px; font-weight: 700; line-height: 1; }
.strip .sub { color: color-mix(in srgb, var(--strip-ink) 70%, transparent); margin-top: 4px; }
.strip .label { color: color-mix(in srgb, var(--strip-ink) 60%, transparent); }
.strip-facts { display: flex; gap: 24px; flex-wrap: wrap; }
.strip-facts div { display: grid; }
.strip-facts .v { font-family: var(--mono); font-size: 16px; }
@media (max-width: 640px) { .strip { grid-template-columns: 1fr; } }

/* tabs */
.tabs { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--bg); padding-block: 6px; display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { appearance: none; border: 0; background: transparent; font: 600 15px/1 var(--display); letter-spacing: .03em; text-transform: uppercase; color: var(--muted); padding: 10px 14px; border-radius: 6px 6px 0 0; cursor: pointer; white-space: nowrap; position: relative; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--accent); }
.tab[aria-selected="true"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -7px; height: 3px; background: var(--accent); border-radius: 2px; }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.view { display: grid; gap: 16px; }

.notice { font-size: 13px; color: var(--warn); }
.rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.rail > div { background: var(--panel); padding: 12px 14px; display: grid; gap: 2px; min-width: 0; }
.rail .v { font-family: var(--mono); font-size: 20px; font-variant-numeric: tabular-nums; }
.rail .hint { font-size: 12px; color: var(--muted); }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 860px) { .grid2 { grid-template-columns: 1fr; } }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; display: grid; gap: 14px; align-content: start; min-width: 0; }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.linkbtn { appearance: none; border: 0; background: none; color: var(--accent); font: 600 13px var(--body); cursor: pointer; padding: 0; }
.linkbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.rep-top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.rep-score { font-family: var(--display); font-size: 48px; font-weight: 700; line-height: 1; }
.rep-score.sm { font-size: 34px; }
.pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.reps { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.facets { display: grid; gap: 8px; }
.facet { display: grid; grid-template-columns: 96px 1fr auto; gap: 10px; align-items: center; }
.bar { height: 8px; background: var(--accent-soft); border-radius: 4px; overflow: hidden; display: block; }
.bar > i { display: block; height: 100%; background: var(--accent); }
.route { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.stop { border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; font-size: 12px; display: grid; gap: 4px; }
.stop b { font-weight: 600; font-size: 13px; }
.stop span { color: var(--muted); font-size: 11px; }
.stop .bar { height: 4px; }
.stop.s1 { border-color: var(--accent); }
.stop.s2, .stop.s3, .stop.s4 { border-color: var(--accent); background: var(--accent-soft); }
.hist { display: grid; gap: 0; align-content: start; min-width: 0; }
.subtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.subtab { appearance: none; border: 0; background: none; font: 600 13px var(--body); color: var(--muted); padding: 8px 12px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.subtab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.subtab:focus-visible, .pbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pbtn { appearance: none; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: 500 13px var(--body); padding: 6px 12px; border-radius: 6px; cursor: pointer; }
.pbtn:disabled { opacity: .4; cursor: default; }
.band { display: grid; gap: 4px; }
.band-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; border-bottom: 2px solid var(--accent); padding-bottom: 4px; }
.band-head b { font-family: var(--display); font-size: 15px; font-weight: 600; letter-spacing: .02em; }
.ev { display: grid; grid-template-columns: 64px 1fr auto auto; gap: 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.ev .when { color: var(--muted); font-family: var(--mono); font-size: 12px; }
.ev .chg { font-family: var(--mono); font-weight: 500; }
.ev .tot { font-family: var(--mono); color: var(--muted); font-size: 12px; min-width: 2.5em; text-align: right; }
.tierkey { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-family: var(--mono); font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }
.status { font-weight: 600; }
.status.ok { color: var(--good); } .status.warn { color: var(--warn); } .status.bad { color: var(--bad); }

.jobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.job { border: 1px solid var(--line); border-radius: 8px; padding: 14px; display: grid; gap: 10px; align-content: start; background: var(--panel); }
.job.eastbound, .job.homestory { border-left: 4px solid var(--accent); }
.job.homeward { border-left: 4px solid var(--good); }
.job-route { font-family: var(--display); font-size: 24px; font-weight: 600; line-height: 1; }
.job-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag { font-size: 11px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.tag.east { border-color: var(--accent); color: var(--accent); }
.tag.home { border-color: var(--good); color: var(--good); }
.tag.urgent { border-color: var(--warn); color: var(--warn); }
.tag.example { border-style: dashed; }
.board-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bh-title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.bh-count { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bh-clear { appearance: none; border: 0; background: none; padding: 0; font: 500 13px var(--body); color: var(--accent); cursor: pointer; }
.bh-clear:hover { text-decoration: underline; }
.toolbar { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; padding: 10px 12px; background: color-mix(in srgb, var(--bg) 55%, var(--panel)); border: 1px solid var(--line); border-radius: 10px; }
.tgroup { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tg-right { margin-left: auto; }
.tlabel { font-size: 12px; font-weight: 500; color: var(--muted); }
.toolbar .tgroup .tlabel { min-width: 46px; }
.seg { min-width: 0; display: inline-flex; gap: 2px; padding: 3px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg button { appearance: none; border: 0; background: transparent; color: var(--muted); font: 500 13px/1 var(--body); height: 26px; padding: 0 11px; border-radius: 6px; cursor: pointer; white-space: nowrap; flex: none; transition: background .12s, color .12s; }
.seg .sdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--c); margin-right: 6px; vertical-align: 1px; }
.seg button[class^="c-"][aria-pressed="true"] { background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 50%, transparent); }
.seg button:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.seg button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.seg button:focus-visible, .fsel:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.selwrap { position: relative; }
.selwrap::after { content: ""; position: absolute; right: 11px; 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); pointer-events: none; }
.fsel { appearance: none; font: 500 13px var(--body); height: 34px; padding: 0 30px 0 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); cursor: pointer; }
.fsel:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.keybtn { appearance: none; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font: 500 13px var(--body); cursor: pointer; }
.keybtn:hover, .keybtn[aria-expanded="true"] { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.keybtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kb-dots { display: inline-grid; grid-template-columns: repeat(2, 6px); gap: 2px; }
.kb-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.imp-key { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 20px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--bg) 55%, var(--panel)); }
.imp-key[hidden] { display: none; }
.ik-cat { display: grid; grid-template-columns: 10px 1fr; gap: 2px 10px; align-items: baseline; align-content: start; }
.ik-cat i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); transform: translateY(1px); }
.ik-cat b { font-weight: 600; font-size: 13px; }
.ik-cat span { grid-column: 2; font-size: 12px; color: var(--muted); }
.ik-scale { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.ik-scale .sc { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 720px) {
  .toolbar { gap: 10px; }
  .tgroup { width: 100%; }
  .tgroup .tlabel { width: 52px; flex: none; }
  .tgroup .seg { flex: 1; }
  .seg button { flex: 1 0 auto; padding: 0 8px; }
  .tg-right { margin-left: 0; }
  .selwrap { flex: 1; } .fsel { width: 100%; }
}
.jlist { list-style: none; margin: 0; padding: 0; display: grid; }
#board { min-width: 0; }
.jrow.rec { background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 9%, transparent), color-mix(in srgb, var(--gold) 2%, transparent) 60%); }
.jrow.rec::after { content: ""; position: absolute; inset: 0; border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); border-radius: 8px; pointer-events: none; }
.rec-pill { display: inline-flex; align-items: center; gap: 5px; font: 600 10.5px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--gold); border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent); background: color-mix(in srgb, var(--gold) 12%, transparent); padding: 3px 7px; border-radius: 999px; margin-right: 8px; vertical-align: 2px; cursor: help; }
.rec-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.rec-note { display: grid; gap: 6px; padding: 10px 14px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); background: color-mix(in srgb, var(--gold) 7%, transparent); }
.rec-h { font: 600 11px var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.rec-note p { margin: 0; font-size: 13px; line-height: 1.5; }
.tab-badge { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 5px; margin-left: 6px; border-radius: 999px; background: var(--gold); color: var(--bg); font: 700 11px/1 var(--body); vertical-align: 2px; letter-spacing: 0; }
.tab-badge[hidden] { display: none; }
.co-head { gap: 12px; }
.co-nav:empty { display: none; }
.co-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.co-navg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.co-navl { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); width: 96px; flex: none; }
.co-pc { font-size: 11px; color: var(--muted); }
.aw-badge { justify-self: start; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c); padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--c) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); }
.area-lead { margin: 0; padding: 12px 20px; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--line); }
.subs { display: grid; background: color-mix(in srgb, var(--bg) 30%, var(--panel)); }
.area-body + .subs { border-top: 1px solid color-mix(in srgb, var(--c) 22%, var(--line)); }
.sub { position: relative; margin: 14px 20px 14px 34px; padding-left: 18px; border-left: 2px solid color-mix(in srgb, var(--c) 45%, transparent); }
.sub::before { content: ""; position: absolute; left: -2px; top: 13px; width: 12px; height: 2px; background: color-mix(in srgb, var(--c) 45%, transparent); }
.sub + .sub { margin-top: 4px; }
.sub-hd { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 4px 0 10px 4px; }
.sub-k { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--c); font-weight: 600; }
.sub-hd h4 { margin: 0; font: 700 18px var(--display); letter-spacing: .03em; text-transform: uppercase; }
.sub .team-grid { padding: 0; }
.sub .team-sugs { padding: 12px 0 0; }
.sub .team-sugs:empty { display: none; }
@media (max-width: 760px) { .area-hd .area-pc { display: none; } .area-n { align-self: flex-start; } .sub { margin: 12px 14px 12px 16px; padding-left: 12px; } .area-lead { padding: 12px 16px; } }
.co-div { display: grid; gap: 2px; padding: 8px 4px 0; }
.co-div span { font: 700 13px var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 12px; }
.co-div span::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.co-div p { margin: 0; font-size: 12px; color: var(--muted); }
.area-pc { font-size: 12px; color: var(--muted); padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap; }
.area.team { border-style: solid; }
.area.team .area-hd { background: linear-gradient(120deg, color-mix(in srgb, var(--c) 10%, transparent), transparent 50%); }
.area.team .area-tt h3 { font-size: 22px; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; padding: 16px 20px 4px; }
.tm { display: grid; gap: 10px; align-content: start; padding: 14px; border-radius: 10px; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 35%, var(--panel)); border-top: 2px solid color-mix(in srgb, var(--c) 55%, transparent); }
.tm .st-av, .area-who .st-av { color: var(--c); background: color-mix(in srgb, var(--c) 14%, var(--bg)); border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.st-av.sm { width: 34px; height: 34px; font-size: 13px; }
.tm .scene-btn { justify-self: start; }
.team-sugs { display: grid; gap: 10px; padding: 14px 20px 18px; }
.ts-h { margin: 0; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.sg-by { color: var(--muted); } .sg-by b { color: var(--ink); font-weight: 500; }
@media (max-width: 760px) { .team-grid, .team-sugs { padding-left: 16px; padding-right: 16px; } .co-navl { width: 100%; } }
.co-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c) 40%, var(--line)); background: color-mix(in srgb, var(--c) 8%, transparent); color: var(--ink); font-size: 13px; text-decoration: none; }
.co-chip:hover { background: color-mix(in srgb, var(--c) 16%, transparent); }
.co-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.co-chip b { min-width: 18px; height: 18px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--c); color: var(--bg); font-size: 11px; padding: 0 5px; }
.areas { display: grid; gap: 16px; }
.area { position: relative; border: 1px solid color-mix(in srgb, var(--c) 30%, var(--line)); border-radius: 14px; overflow: hidden; background: var(--panel); scroll-margin-top: 70px; }
.area::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 10%, transparent)); }
.area-hd { display: flex; align-items: center; gap: 14px; padding: 18px 20px 14px; background: linear-gradient(120deg, color-mix(in srgb, var(--c) 16%, transparent), transparent 55%); border-bottom: 1px solid color-mix(in srgb, var(--c) 18%, var(--line)); }
.area-ic { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 14%, var(--bg)); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); }
.area-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.area-tt { display: grid; min-width: 0; flex: 1; }
.area-k { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--c); font-weight: 600; }
.area-tt h3 { margin: 0; font: 700 26px/1.05 var(--display); letter-spacing: .02em; text-transform: uppercase; color: var(--ink); }
.area-n { font-size: 12px; color: var(--muted); white-space: nowrap; }
.area-n b { color: var(--c); font-size: 18px; font-weight: 700; margin-right: 3px; font-variant-numeric: tabular-nums; }
.area-body { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); }
.area-who { display: grid; gap: 12px; align-content: start; padding: 16px 20px 18px; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 35%, var(--panel)); }
.aw-top { display: flex; align-items: center; gap: 12px; }
.aw-name { font-size: 15px; }
.area-who .st-av { color: var(--c); background: color-mix(in srgb, var(--c) 14%, var(--bg)); border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.area-who .scene-btn { justify-self: start; }
.area-sugs { display: grid; gap: 10px; align-content: start; padding: 16px 20px 18px; min-width: 0; }
.area-none { margin: 0; color: var(--muted); font-size: 13px; padding: 8px 0; }
.area .sg { background: color-mix(in srgb, var(--bg) 25%, var(--panel)); border-color: var(--line); border-left: 3px solid color-mix(in srgb, var(--c) 60%, transparent); }
.sg-cl { color: var(--muted); }
.sg-yes { appearance: none; border: 1px solid var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--ink); font: 600 13px var(--body); padding: 6px 14px; border-radius: 6px; cursor: pointer; }
.sg-yes:hover { background: color-mix(in srgb, var(--c) 30%, transparent); }
.sg-yes:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
@media (max-width: 760px) {
  .area-body { grid-template-columns: 1fr; }
  .area-who { border-right: 0; border-bottom: 1px solid var(--line); }
  .area-tt h3 { font-size: 22px; }
  .area-hd { padding: 16px; } .area-who, .area-sugs { padding: 14px 16px; }
}
.preview-note { font-size: 13px; color: var(--muted); padding: 10px 14px; border-radius: 8px; border: 1px dashed color-mix(in srgb, var(--violet) 50%, var(--line)); background: color-mix(in srgb, var(--violet) 6%, transparent); max-width: 80ch; }
.preview-note b { color: var(--violet); margin-right: 6px; text-transform: uppercase; font-size: 11px; letter-spacing: .08em; }
.preview-note[hidden] { display: none; }
.staff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.staff { border: 1px solid var(--line); border-radius: 10px; padding: 14px; display: grid; gap: 12px; align-content: start; background: color-mix(in srgb, var(--bg) 40%, var(--panel)); }
.st-top { display: flex; align-items: center; gap: 12px; }
.st-av { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 700 15px var(--display); letter-spacing: .04em; color: var(--accent); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.st-id { display: grid; gap: 1px; min-width: 0; flex: 1; }
.st-id h3 { margin: 0; font-size: 16px; }
.st-role { font-size: 12px; color: var(--muted); }
.st-facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; }
.st-facts dt { font-size: 11px; color: var(--muted); }
.st-facts dd { margin: 0; font-size: 13px; }
.st-facts small { color: var(--muted); font-size: 11px; margin-left: 2px; font-family: var(--body); }
.st-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.st-note { margin: 0; font-size: 13px; color: var(--muted); }
.sg-intro { margin: 0; font-size: 13px; color: var(--muted); max-width: 65ch; }
.sg-list { display: grid; gap: 10px; }
.sg { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: grid; gap: 6px; }
.sg.decided { opacity: .7; }
.sg-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sg-kind { font: 600 10.5px/1 var(--body); letter-spacing: .07em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; border: 1px solid; }
.k-job { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, transparent); background: color-mix(in srgb, var(--gold) 10%, transparent); }
.k-option { color: var(--teal); border-color: color-mix(in srgb, var(--teal) 45%, transparent); background: color-mix(in srgb, var(--teal) 10%, transparent); }
.k-upgrade { color: var(--violet); border-color: color-mix(in srgb, var(--violet) 45%, transparent); background: color-mix(in srgb, var(--violet) 10%, transparent); }
.k-warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.sg-title { font-size: 14px; font-weight: 600; }
.sg-date { margin-left: auto; font-size: 12px; color: var(--muted); }
.sg-text { margin: 0; font-size: 13px; line-height: 1.55; max-width: 75ch; }
.sg-foot { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.sg-cost { color: var(--ink); }
.sg-act { margin-left: auto; display: inline-flex; gap: 8px; align-items: center; }
.sg-status { font-weight: 600; }
.sg-status.s-accepted { color: var(--good); } .sg-status.s-declined { color: var(--muted); }
.sg-done summary { cursor: pointer; font-size: 13px; color: var(--muted); padding: 4px 0; }
.sg-done[open] summary { margin-bottom: 10px; }
.jr-head, .jr-sum { display: grid; grid-template-columns: 20px minmax(170px, 1.1fr) minmax(0, 1.6fr) 56px 40px 56px 84px 100px; column-gap: 16px; align-items: center; }
@media (max-width: 1000px) { .jr-head, .jr-sum { grid-template-columns: 20px minmax(150px, 1fr) minmax(0, 1.3fr) 52px 34px 50px 76px 92px; column-gap: 12px; } }
.jr-head { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); padding: 0 14px 8px; border-bottom: 1px solid var(--line); }
.jrow { border-bottom: 1px solid var(--line); position: relative; }
.jrow.story::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.jrow.open { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.jrow.shown .jr-sum { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.jr-sum { appearance: none; border: 0; background: transparent; color: var(--ink); width: 100%; text-align: left; font: inherit; padding: 12px 14px; min-height: 64px; cursor: pointer; transition: background .12s; }
.jr-sum:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.jr-sum:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.jr-sum .chev { display: grid; place-items: center; width: 20px; height: 20px; color: var(--muted); border-radius: 5px; }
.jr-sum .chev svg { width: 14px; height: 14px; transition: transform .15s; }
.jr-sum[aria-expanded="true"] .chev { color: var(--accent); }
.jr-sum[aria-expanded="true"] .chev svg { transform: rotate(90deg); }
.jr-sum:hover .chev { color: var(--ink); }
.jr-route, .jr-client { display: grid; gap: 3px; min-width: 0; }
.jr-codes { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.jr-codes b { font-weight: 500; }
.jr-codes .ra { font-style: normal; color: var(--muted); margin: 0 6px; }
.jr-cname { font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jr-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; }
.jr-sub .jm-sep { margin: 0 6px; opacity: .6; }
.jm-story { color: var(--accent); font-weight: 500; }
.jm-story::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: 1px; }
.jm-time { display: none; }
.jr-num { font-size: 13px; color: color-mix(in srgb, var(--ink) 85%, var(--muted)); }
.jr-num small { font-size: 11px; color: var(--muted); margin-left: 3px; font-family: var(--body); }
.jr-legs { color: var(--muted); }
.jr-legs.multi { color: var(--ink); }
.jr-num.jr-fee { display: grid; gap: 3px; justify-items: end; font-family: var(--body); color: var(--ink); }
.jf-plate { display: grid; justify-items: end; gap: 3px; }
.jf-amt { font-size: 15px; font-weight: 600; line-height: 1.1; color: color-mix(in srgb, var(--good) 22%, var(--ink)); font-variant-numeric: tabular-nums lining-nums; }
.jf-cur { color: color-mix(in srgb, var(--good) 75%, var(--ink)); margin-right: 1px; }
.jf-rate { display: none; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.jr-num.jr-rate { display: grid; justify-items: end; gap: 5px; font-family: var(--body); }
.jr-rv { font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }
.jr-rate .jf-bar { width: 56px; margin-top: 0; }
.jf-rate small { font-size: 10px; opacity: .8; }
.jf-bar { width: 64px; height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--muted) 18%, transparent); overflow: hidden; margin-top: 2px; }
.jf-bar i { display: block; height: 100%; margin-left: auto; border-radius: 2px; background: color-mix(in srgb, var(--good) 70%, transparent); }
.jr-head .r, .jr-num { text-align: right; }
.jh { appearance: none; border: 0; background: none; padding: 4px 0; margin: -4px 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; min-width: 0; justify-self: start; border-radius: 4px; }
.jh.r { justify-self: end; flex-direction: row-reverse; }
.jh i { font-style: normal; font-size: 9px; opacity: 0; transition: opacity .12s; }
.jh:hover { color: var(--ink); } .jh:hover i { opacity: .6; }
.jh.on { color: var(--accent); } .jh.on i { opacity: 1; }
.jh:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.jr-mark { display: flex; gap: 4px; justify-content: flex-end; align-items: center; flex-wrap: wrap; min-width: 0; }
.jr-mark > * { flex: none; white-space: nowrap; line-height: 18px; }
.imp { --c: var(--accent); order: 2; margin-left: 8px; display: inline-flex; align-items: stretch; gap: 2px; height: 10px; cursor: help; }
.imp i { width: 5px; border-radius: 1.5px; background: color-mix(in srgb, var(--muted) 22%, transparent); }
.imp i.on { background: var(--c); }
.imp.s4 i.on { box-shadow: 0 0 6px color-mix(in srgb, var(--c) 55%, transparent); }
.imp.s0 { cursor: default; }
.ik-scale .imp { --c: var(--ink); margin: 0; cursor: default; }
.c-story { --c: var(--violet); } .c-conn { --c: var(--teal); } .c-money { --c: var(--gold); } .c-prest { --c: var(--rose); }
.flag.cat { background: color-mix(in srgb, var(--c) 14%, var(--panel)); color: var(--c); border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.flag.cat.c-story { background: var(--c); color: var(--panel); border-color: var(--c); }
.jr-mark .tag { order: 1; }
.flag.more { background: var(--panel); border-color: var(--line); color: var(--muted); padding: 1px 6px; cursor: help; }
.pin { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: var(--panel); }
.pin svg { width: 11px; height: 11px; }
.flag { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; }
.f-story { background: var(--accent); color: var(--panel); }
.f-repeat { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent); }
.f-vip { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.f-rich { background: color-mix(in srgb, var(--warn) 10%, transparent); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.f-plain { border-color: var(--line); color: var(--muted); }
.jr-people { display: grid; gap: 6px; }
.jr-people h4 { margin: 0; }
.pax { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; display: grid; gap: 2px; }
.pax.key { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 6%, transparent); }
.pax-top { appearance: none; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; width: 100%; padding: 0; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.pax-top:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pax-body { display: grid; gap: 10px; padding: 8px 0 2px 18px; cursor: auto; }
.pax { cursor: pointer; }
.pax:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.pax.key:hover { background: color-mix(in srgb, var(--warn) 10%, transparent); }
.pax-sec { display: grid; gap: 4px; }
.pax-sec h5 { margin: 0; font: 600 13px var(--body); }
.pax-sec h5 .label { font-weight: 500; margin-left: 6px; }
.pax-sec ul { margin: 0; padding-left: 18px; font-size: 13px; display: grid; gap: 2px; }
.pax-none { margin: 0; font-size: 12px; color: var(--muted); }
.research { border-top: 1px solid var(--line); padding-top: 8px; }
.rs-line { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.rs-line.total { font-weight: 600; border-top: 1px dashed var(--line); padding-top: 4px; }
.rs-go { justify-self: start; }
.rs-rep { --t: var(--accent); display: grid; gap: 8px; padding: 12px 14px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--t) 40%, var(--line)); background: color-mix(in srgb, var(--t) 6%, transparent); }
.rs-rep.g-exceptional { --t: var(--teal); } .rs-rep.g-success { --t: var(--good); } .rs-rep.g-partial { --t: var(--gold); } .rs-rep.g-fail, .rs-rep.g-bad { --t: var(--rose); }
.rs-rep-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rs-rep-h b { color: var(--t); font: 700 15px var(--display); letter-spacing: .06em; text-transform: uppercase; }
.rs-rep-h span { font-size: 12px; color: var(--muted); font-family: var(--mono); }
.rs-rep p { margin: 0; font-size: 13px; line-height: 1.5; }
.rs-rep ul { margin: 0; padding-left: 18px; font-size: 13px; display: grid; gap: 4px; }
.rs-rep li.lever::marker { content: "★ "; color: var(--gold); }
.rs-rep li.rumour { color: var(--muted); font-style: italic; }
.rs-busy { font-size: 13px; color: var(--muted); }
.rs-act { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-top: 4px; }

.pax-role { font-size: 13px; color: var(--muted); }
.pax-flags { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.pax-note { margin: 0; font-size: 13px; color: var(--muted); }
.tag.on-map { border-color: var(--accent); background: var(--accent); color: var(--panel); }
.jr-detail { display: grid; gap: 10px; padding: 4px 10px 14px 38px; }
.jd-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-top: 6px; }
.jd-chips > * { flex: none; white-space: nowrap; line-height: 18px; }
.jd-chips:empty { display: none; }
.jr-detail .job-actions { justify-content: space-between; }
@media (max-width: 720px) {
  .jr-head { display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none; padding: 2px 10px 8px; }
  .jr-head > span:first-child { display: none; }
  .jr-head .jh { flex: none; margin: 0; }
  .jr-head .jh.r { flex-direction: row; }
  .jr-sum { grid-template-columns: 20px minmax(0, 1fr) auto; grid-template-areas: "c r f" ". cl m"; row-gap: 10px; column-gap: 10px; align-items: start; padding: 12px 10px; }
  .jr-sum .chev { grid-area: c; } .jr-route { grid-area: r; } .jr-fee { grid-area: f; } .jr-client { grid-area: cl; }
  .jr-mark { grid-area: m; align-self: end; padding-bottom: 3px; } .jr-time, .jr-num.jr-rate, .jr-legs { display: none; }
  .jr-head .jh.jr-rate, .jr-head .jh.jr-legs { display: none; }
  .jr-head { max-width: 100%; }
  .jf-rate { display: block; }
  .jm-time { display: inline; }
  .jr-cname { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; }
  .jr-detail { padding-left: 10px; }
}
.jc-head { display: grid; gap: 2px; }
.jc-route { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-family: var(--display); font-size: 28px; font-weight: 700; line-height: 1; }
.jc-arrow { color: var(--muted); font-weight: 500; font-size: 20px; }
.jc-places { font-size: 13px; color: var(--muted); }
.jc-client { margin: 0; font-size: 14px; }
.jc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 10px 0; border-block: 1px solid var(--line); }
.jc-stats > div { display: grid; min-width: 0; }
.jc-big { font-family: var(--mono); font-size: 15px; font-weight: 500; white-space: nowrap; }
@media (max-width: 420px) { .jc-stats { grid-template-columns: repeat(2, 1fr); } }
.jc-story { font-size: 13px; font-weight: 600; color: var(--accent); background: var(--accent-soft); border-radius: 6px; padding: 6px 10px; }
.jc-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px 12px; margin: 0; font-size: 13px; }
.jc-facts div { display: grid; min-width: 0; }
.jc-facts dt { font-size: 11px; color: var(--muted); }
.jc-facts dd { margin: 0; overflow-wrap: anywhere; }
.jc-req { margin: 0; font-size: 13px; color: var(--ink); }
.job.shown { box-shadow: 0 0 0 2px var(--accent); }
.job-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.legs { display: grid; gap: 4px; font-size: 13px; }
.legline { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.legline .k { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); min-width: 74px; }
.legline a { color: var(--accent); font-size: 12px; font-weight: 600; text-decoration: none; }
.legline a:hover { text-decoration: underline; }
.job-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.job-meta div { display: grid; min-width: 0; }
.job-meta .v { font-family: var(--mono); }
.job .req { font-size: 13px; color: var(--muted); }
.fee { font-family: var(--mono); font-size: 18px; }
.btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 600; font-size: 13px; color: var(--accent); border: 1px solid var(--accent); border-radius: 6px; padding: 6px 12px; justify-self: start; }
.btn:hover { background: var(--accent-soft); }
.btn:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.empty { border: 1px dashed var(--line); border-radius: 8px; padding: 18px; color: var(--muted); }

.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; font-weight: 500; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
td.num, th.num { text-align: right; white-space: nowrap; }
.pos { color: var(--good); } .neg { color: var(--bad); }
tr.trip td { padding: 0; }
.tripbtn { appearance: none; border: 0; background: var(--accent-soft); color: var(--ink); width: 100%; text-align: left; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 10px 10px; cursor: pointer; font: inherit; }
.tripbtn:hover { filter: brightness(0.97); }
.tripbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.chev { color: var(--accent); width: 1em; }
.trip-name { font-family: var(--display); font-size: 17px; font-weight: 600; }
.trip-chain { font-size: 12px; color: var(--accent); }
.trip-meta { font-size: 12px; color: var(--muted); margin-left: auto; }
tr.leg td:first-child { padding-left: 28px; }
.legmark { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.grade { font-family: var(--display); font-weight: 700; font-size: 16px; }
.gA, .gB { color: var(--good); } .gC { color: var(--warn); } .gD, .gF { color: var(--bad); }

.skillcats { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.skillcat { display: grid; gap: 8px; align-content: start; }
.skill { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; }
.skill .name { font-size: 13px; }
.skill.zero .name { color: var(--muted); }
.pips { display: flex; gap: 2px; align-items: center; }
.pips i { width: 9px; height: 9px; border-radius: 2px; background: var(--line); }
.pips i.on { background: var(--accent); }
.xp { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); }
.xp .bar { height: 4px; flex: 1; }

.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.person { border: 1px solid var(--line); border-radius: 8px; padding: 12px; display: grid; gap: 6px; align-content: start; }
.person.neg { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }
.person .rel { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.person p { margin: 0; font-size: 13px; color: var(--muted); }
.pgroup { display: grid; gap: 10px; }
.benefits { display: flex; flex-wrap: wrap; gap: 6px; }
.benefit { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good); }
.benefit.minus { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); }
.btype { display: grid; gap: 4px; }
.btype .label { font-size: 10px; }
.ticket { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 4px; border: 1.5px dashed var(--warn); color: var(--warn); display: inline-flex; gap: 6px; align-items: center; }
.ticket .uses { font-family: var(--mono); font-weight: 500; }
.ticket.minus { border-color: var(--bad); color: var(--bad); }
.legend { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--muted); }
.disp { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.d-devoted, .d-loyal { color: var(--good); } .d-friendly { color: var(--accent); } .d-neutral { color: var(--muted); } .d-wary { color: var(--warn); } .d-hostile { color: var(--bad); }


/* route strips */
.sl { display: grid; grid-template-columns: minmax(64px, auto) 1fr minmax(64px, auto); gap: 12px; align-items: center; }
.sl-end { display: grid; line-height: 1.1; }
.sl-end b { font-family: var(--display); font-size: 24px; font-weight: 700; letter-spacing: .02em; }
.sl-end span { font-size: 12px; color: var(--muted); }
.sl-end.r { text-align: right; }
.sl-mid { display: grid; gap: 2px; justify-items: center; min-width: 0; }
.sl-meta { font-size: 12px; color: var(--ink); }
.sl-kind { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.sl-line { display: flex; align-items: center; width: 100%; gap: 0; }
.sl-rule { flex: 1; height: 2px; background: var(--accent); opacity: .7; }
.sl-dot { width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--accent); background: var(--panel); flex: none; }
.sl-plane { width: 18px; height: 18px; fill: var(--accent); transform: rotate(90deg); margin: 0 4px; flex: none; }
.sl.pos .sl-rule { background: none; border-top: 2px dashed var(--muted); height: 0; opacity: 1; }
.sl.pos .sl-dot { border-color: var(--muted); }
.sl.pos .sl-plane { fill: var(--muted); }
.legs { display: grid; gap: 10px; }
.legwrap { display: grid; gap: 4px; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.sb-link { font-size: 12px; font-weight: 600; color: var(--accent); text-decoration: none; justify-self: end; }
.sb-link:hover { text-decoration: underline; }
/* log cards */
.loglist { display: grid; gap: 12px; }
.lc { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 16px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--panel); }
.lc.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.lc-date { display: grid; justify-items: center; line-height: 1; border-right: 1px solid var(--line); padding-right: 12px; }
.lc-day { font-size: 22px; font-weight: 500; }
.lc-mon { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; text-align: center; }
.lc-main { display: grid; gap: 6px; min-width: 0; }
.lc-note { margin: 0; font-size: 13px; color: var(--muted); }
.lc-side { display: grid; gap: 8px; justify-items: end; }
.lc-grades { display: flex; gap: 10px; }
.lc-btns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.gp { display: grid; justify-items: center; gap: 2px; }
.gp-ball { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 700 16px var(--display); border: 2px solid var(--line); color: var(--muted); }
.gp-ball.gA, .gp-ball.gB { border-color: var(--good); color: var(--good); background: color-mix(in srgb, var(--good) 10%, transparent); }
.gp-ball.gC { border-color: var(--warn); color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.gp-ball.gD, .gp-ball.gF { border-color: var(--bad); color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); }
.gp-lab { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.lc-net { font-size: 14px; }
.tc { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden; }
.tc.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.tc-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; background: var(--accent-soft); padding: 12px 14px; }
.tc .tripbtn { background: none; padding: 0; display: grid; gap: 10px; box-shadow: none; }
.tc-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tc-dates { font-size: 12px; color: var(--muted); }
.stops { display: flex; align-items: center; flex-wrap: wrap; row-gap: 8px; }
.stop-pt { display: grid; justify-items: center; line-height: 1.1; min-width: 56px; }
.stop-pt b { font-size: 14px; }
.stop-pt span { font-size: 11px; color: var(--muted); }
.stop-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--accent); background: var(--panel); margin-bottom: 4px; }
.stop-dot.end { background: var(--accent); }
.stop-link { flex: 1; min-width: 24px; max-width: 90px; height: 2px; background: var(--accent); opacity: .6; margin-top: -26px; }
.tc-side { display: grid; gap: 8px; justify-items: end; }
.tc-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.chip { font-size: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; color: var(--muted); white-space: nowrap; }
.chip b { color: var(--ink); font-weight: 600; }
.tc-legs { display: grid; gap: 8px; padding: 12px 14px 14px; }
.tc-legs .lc { border-style: solid; background: var(--bg); }
@media (max-width: 720px) {
  .lc { grid-template-columns: 48px minmax(0, 1fr); }
  .lc-side { grid-column: 1 / -1; grid-template-columns: auto 1fr auto; align-items: center; justify-items: start; }
  .lc-net { justify-self: end; }
  .tc-head { grid-template-columns: 1fr; }
  .tc-side { justify-items: start; } .tc-chips { justify-content: flex-start; }
  .sl-end b { font-size: 20px; }
}
@media (max-width: 560px) {
  .lc { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px; }
  .lc-date { display: flex; align-items: baseline; gap: 6px; justify-self: start; padding: 4px 10px; border-radius: 999px; }
  .lc-date .lc-day { font-size: 14px; font-weight: 700; } .lc-date .lc-mon { margin-top: 0; font-size: 11px; }
  .lc .sl { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; }
  .lc .sl-end b { font-size: 18px; } .lc .sl-end span { font-size: 11.5px; }
  .lc .sl-meta { font-size: 11px; white-space: nowrap; }
  .lc .sl-kind { font-size: 10px; }
  .lc-side { grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 10px; }
  .lc-grades { gap: 14px; }
  .lc-net { justify-self: end; }
  .lc-side .lc-btns { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .lc-side .lc-btns button { text-align: center; }
}



.fee-hero { display: grid; grid-template-columns: auto 1fr; gap: 16px 28px; align-items: center; padding: 16px 18px; border-radius: 10px; background: linear-gradient(120deg, color-mix(in srgb, var(--good) 18%, var(--panel)), color-mix(in srgb, var(--good) 6%, var(--panel))); border: 1px solid color-mix(in srgb, var(--good) 40%, var(--line)); }
.fh-main { display: grid; gap: 2px; }
.fh-label { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--good); font-weight: 600; }
.fh-amount { font-family: var(--body); font-size: 30px; font-weight: 600; line-height: 1.1; color: var(--ink); letter-spacing: -.01em; font-variant-numeric: tabular-nums lining-nums; }
.fh-side { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: flex-end; }
.fh-side > div { display: grid; }
.fh-k { font-size: 11px; color: var(--muted); }
.fh-v { font-size: 15px; font-weight: 500; }
@media (max-width: 640px) { .fee-hero { grid-template-columns: 1fr; } .fh-side { justify-content: flex-start; } .fh-amount { font-size: 26px; } }

/* coloured sections */
.sec { --c: var(--accent); border: 1px solid color-mix(in srgb, var(--c) 30%, var(--line)); border-left: 4px solid var(--c); border-radius: 8px; background: color-mix(in srgb, var(--c) 5%, var(--panel)); padding: 10px 12px; display: grid; gap: 8px; min-width: 0; }
.sec-h { margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font: 600 14px var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--c); }
.sec-ic { font-size: 12px; }
.sec-sub { font: 400 12px var(--body); letter-spacing: 0; text-transform: none; color: var(--muted); }
.sec-p { margin: 0; font-size: 13px; }
.sec-route { --c: var(--teal); }
.sec-story { --c: var(--accent); }
.sec-people { --c: var(--violet); }
.sec-money { --c: var(--good); }
.sec-ops { --c: var(--gold); }
.sec-req { --c: var(--rose); }
.sec-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 640px) { .sec-pair { grid-template-columns: 1fr; } }
.sec .legwrap { background: var(--panel); }
.sec-route .sl-rule { background: var(--teal); }
.sec-route .sl-dot { border-color: var(--teal); }
.sec-route .sl-plane { fill: var(--teal); }
.sec-route .sl.pos .sl-rule { background: none; }
.sec-route .sl.pos .sl-dot { border-color: var(--muted); }
.sec-route .sl.pos .sl-plane { fill: var(--muted); }
.sec-people .pax { background: var(--panel); }
.jc-facts dd.big { font-size: 18px; font-weight: 600; color: var(--good); }
/* log card colour zones */
.lc { border-left: 4px solid var(--teal); }
.lc-date { background: color-mix(in srgb, var(--teal) 12%, transparent); border-right: 0; border-radius: 8px; padding: 8px 6px; color: var(--teal); }
.lc-date .lc-mon { color: var(--teal); opacity: .85; }
.lc-main .sl-rule { background: var(--teal); }
.lc-main .sl-dot { border-color: var(--teal); }
.lc-main .sl-plane { fill: var(--teal); }
.lc-side { background: color-mix(in srgb, var(--violet) 7%, transparent); border-radius: 8px; padding: 8px 10px; }
.lc-net { padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--good) 12%, transparent); }
.lc-net.neg { background: color-mix(in srgb, var(--bad) 12%, transparent); }
.lc-note { border-left: 2px solid var(--gold); padding-left: 8px; }
.tc { border-left: 4px solid var(--violet); }
.tc-head { background: linear-gradient(90deg, color-mix(in srgb, var(--violet) 14%, var(--panel)), color-mix(in srgb, var(--teal) 10%, var(--panel))); }
.tc .trip-name { color: var(--violet); }
.stop-dot { border-color: var(--teal); }
.stop-dot.end { background: var(--teal); }
.stop-link { background: var(--teal); }
.chip:nth-child(1) b { color: var(--violet); }
.chip:nth-child(2) b { color: var(--gold); }
.chip:nth-child(3) b { color: var(--teal); }

/* map card: a deliberate single dark look, like a private-jet app's flight view */
:root { --map-sea: #050b13; --map-land: #2c4462; --map-edge: #4a6788; --map-ink: #e9eef4; --map-muted: #8a9bb0; --map-gold: #d8b46a; --map-gold-soft: rgba(216,180,106,.18); --map-glow: #f3d792; --map-frontier: #5aa8e8; }
.mapcard { background: var(--map-sea); color: var(--map-ink); border-radius: 14px; overflow: hidden; border: 1px solid var(--map-edge); display: grid; }
.map-top { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; padding: 16px 18px 10px; }
.map-eyebrow { display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--map-muted); }
.map-select { appearance: none; background: transparent; color: var(--map-ink); border: 0; border-bottom: 1px solid var(--map-edge); font: 600 20px var(--display); letter-spacing: .02em; padding: 2px 18px 2px 0; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--map-gold) 50%), linear-gradient(135deg, var(--map-gold) 50%, transparent 50%); background-position: calc(100% - 8px) 55%, calc(100% - 3px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.map-select option { color: #16202a; }
.map-select:focus-visible { outline: 2px solid var(--map-gold); outline-offset: 2px; }
.map-stats { display: flex; gap: 24px; flex-wrap: wrap; }
.map-stats > div { display: grid; }
.map-v { font-family: var(--mono); font-size: 15px; color: var(--map-ink); }
.map { height: 420px; width: 100%; }
@media (max-width: 640px) { .map { height: 300px; } }
.map-foot { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; padding: 10px 18px 14px; font-size: 12px; color: var(--map-muted); }
.map-foot i { display: inline-block; vertical-align: middle; margin-right: 6px; }
.k-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--map-glow); box-shadow: 0 0 0 4px var(--map-gold-soft); }
.k-arc { width: 22px; height: 2px; background: var(--map-gold); border-radius: 2px; }
.k-pos { width: 22px; height: 0; border-top: 2px dashed var(--map-muted); }
.map-title { font: 600 20px var(--display); letter-spacing: .02em; }
.k-frontier { width: 0; height: 12px; border-left: 2px dashed var(--map-frontier); }
.map-msg { margin-left: auto; }
.map-clear { appearance: none; background: transparent; border: 1px solid var(--map-edge); color: var(--map-gold); font: 600 12px var(--body); padding: 4px 10px; border-radius: 6px; cursor: pointer; }
.map-clear:focus-visible { outline: 2px solid var(--map-gold); outline-offset: 2px; }
.dispbtn { appearance: none; border: 1px solid var(--accent); background: transparent; color: var(--accent); font: 600 12px var(--body); padding: 3px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.dispbtn[aria-pressed="true"] { background: var(--accent); color: var(--panel); }
.dispbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
tr.trip td.tripdisp { padding: 0 10px; background: var(--accent-soft); vertical-align: middle; }
tr.sel td { background: color-mix(in srgb, var(--accent) 14%, transparent); }
tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.tripbtn.sel { box-shadow: inset 3px 0 0 var(--accent); background: color-mix(in srgb, var(--accent) 22%, var(--panel)); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.scene-btn { display: none; appearance: none; border: 1px solid color-mix(in srgb, var(--violet) 55%, var(--line)); background: color-mix(in srgb, var(--violet) 8%, transparent); color: var(--violet); font: 600 12px var(--body); padding: 3px 10px; border-radius: 999px; cursor: pointer; white-space: nowrap; align-items: center; gap: 5px; }
.scene-btn:hover { background: color-mix(in srgb, var(--violet) 16%, transparent); }
.scene-btn:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
body.has-scene .scene-btn { display: inline-flex; }
.pax-head { display: flex; align-items: flex-start; gap: 8px; }
.pax-head .pax-top { flex: 1; min-width: 0; }
.person .rel .scene-btn { margin-left: auto; }
.person .rel { gap: 8px; }
.scene-ov { position: fixed; inset: 0; z-index: 50; background: color-mix(in srgb, #000 55%, transparent); display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.scene-ov[hidden] { display: none; }
.scene-box { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-top: 4px solid var(--violet); border-radius: 12px; width: min(680px, 100%); max-height: 100%; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.scene-hd { display: flex; align-items: baseline; gap: 10px; padding: 14px 16px 8px; flex-wrap: wrap; }
.scene-hd h3 { margin: 0; font: 700 18px var(--display); }
.scene-hd .label { flex: 1; min-width: 0; }
.scene-x { appearance: none; border: 0; background: none; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; }
.scene-txt { overflow-y: auto; padding: 4px 16px 12px; font: 15px/1.6 var(--body); white-space: pre-wrap; min-height: 120px; }
.scene-txt.wait { color: var(--muted); font-style: italic; }
.scene-ft { border-top: 1px solid var(--line); padding: 10px 16px 14px; display: grid; gap: 8px; }
.scene-ft input { width: 100%; box-sizing: border-box; font: 14px var(--body); padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); }
.scene-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.scene-row .pax-none { flex: 1; min-width: 180px; }

/* Company: tidy department layout */
.areas { gap: 20px; }
.area { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden; }
.area::before { height: 2px; background: var(--c); }
.dh { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.dh .area-ic { width: 34px; height: 34px; border-radius: 9px; }
.dh .area-ic svg { width: 18px; height: 18px; }
.dh h3 { margin: 0; flex: 1; min-width: 0; font: 700 20px/1.1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.dh-meta { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.dh-wait { color: var(--c); font-weight: 600; }
.dot { margin: 0 7px; opacity: .55; }
.nw { white-space: nowrap; }
.drow { display: grid; grid-template-columns: 280px minmax(0, 1fr); }
.drow + .drow { border-top: 1px solid var(--line); }
.drow.team { background: color-mix(in srgb, var(--bg) 28%, var(--panel)); }
.dcol-who { display: grid; gap: 10px; align-content: start; padding: 18px 20px; border-right: 1px solid var(--line); }
.dcol-sug { padding: 6px 20px; min-width: 0; }
.drow-k { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--c); }
.mgr { display: flex; align-items: center; gap: 12px; }
.st-av { color: var(--c); background: color-mix(in srgb, var(--c) 13%, var(--bg)); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); }
.who-line { margin: 0; font-size: 12.5px; color: var(--muted); }
.dcol-who .scene-btn { justify-self: start; }
.area-lead { margin: 0; padding: 12px 20px; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 28%, var(--panel)); }
.mem-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mem summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 7px 8px; margin: 0 -8px; border-radius: 8px; cursor: pointer; }
.mem summary::-webkit-details-marker { display: none; }
.mem summary:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.mem summary:focus-visible { outline: 2px solid var(--c); outline-offset: 1px; }
.mem-id { display: grid; min-width: 0; flex: 1; }
.mem-id b { font-size: 13.5px; font-weight: 600; }
.mem-id span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mem-chev { width: 7px; height: 7px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg); transition: transform .15s; margin-right: 4px; }
.mem details[open] .mem-chev { transform: rotate(45deg); }
.mem-more { display: grid; gap: 8px; padding: 4px 0 12px 44px; }
.st-av.sm { width: 32px; height: 32px; font-size: 12px; }
.sgx-list { list-style: none; margin: 0; padding: 0; }
.sgx { display: flex; gap: 16px; align-items: flex-start; padding: 14px 0; }
.sgx + .sgx { border-top: 1px solid var(--line); }
.sgx.decided { opacity: .6; }
.sgx-main { flex: 1; min-width: 0; display: grid; gap: 5px; }
.sgx-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sgx-title { font-size: 14px; font-weight: 600; }
.sgx-text { margin: 0; font-size: 13px; line-height: 1.55; max-width: 72ch; color: color-mix(in srgb, var(--ink) 88%, var(--muted)); }
.sgx-meta { font-size: 12px; color: var(--muted); display: flex; align-items: center; flex-wrap: wrap; }
.sgx-meta b { color: var(--ink); font-weight: 500; }
.sgx-act { flex: none; display: flex; gap: 8px; align-items: center; padding-top: 2px; }
.sgx-no { appearance: none; border: 1px solid var(--line); background: transparent; color: var(--muted); font: 500 13px var(--body); padding: 6px 12px; border-radius: 6px; cursor: pointer; }
.sgx-no:hover { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 25%, var(--line)); }
.sg-yes { padding: 6px 14px; }
.area-none { margin: 0; padding: 14px 0; font-size: 13px; color: var(--muted); }
.sg-done { padding: 4px 0 10px; }
.sg-done summary { font-size: 12.5px; }
@media (max-width: 860px) {
  .drow { grid-template-columns: 1fr; }
  .dcol-who { border-right: 0; border-bottom: 1px solid var(--line); padding: 16px; }
  .dcol-sug { padding: 4px 16px; }
  .dh { padding: 14px 16px; flex-wrap: wrap; } .dh-meta { width: 100%; padding-left: 46px; margin-top: -6px; }
  .sgx { flex-direction: column; gap: 10px; } .sgx-act { align-self: flex-end; }
  .area-lead { padding: 12px 16px; }
}

/* people/ideas alignment, pay and titles */
.dcol-who, .dcol-sug { padding-top: 18px; padding-bottom: 18px; align-content: start; }
.dcol-sug { display: grid; gap: 0; }
.dcol-sug > .drow-k { padding-bottom: 6px; }
.sgx-list .sgx:first-child { padding-top: 8px; }
.dcol-sug .area-none { padding: 8px 0 0; }
.mgr { align-items: center; }
.mem-id { display: grid; gap: 2px; min-width: 0; flex: 1; }
.mem-id b { font-size: 14px; font-weight: 600; color: var(--ink); }
.mem-id .role { font: 600 13px/1.2 var(--display); letter-spacing: .05em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 80%, var(--ink)); white-space: normal; overflow: visible; }
.mem summary { align-items: center; padding: 9px 8px; }
.mem-list { gap: 4px; }
.pay { flex: none; display: grid; justify-items: end; gap: 4px; min-width: 76px; }
.pay-v { white-space: nowrap; }
.pay-v b { font-size: 14px; font-weight: 600; color: var(--ink); }
.pay-v small { font-size: 10.5px; color: var(--muted); margin-left: 2px; }
.pbar { display: block; width: 64px; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--muted) 20%, transparent); overflow: hidden; }
.pbar i { display: block; height: 100%; margin-left: auto; border-radius: 2px; background: color-mix(in srgb, var(--warn) 80%, transparent); }
.mem-more { padding-left: 44px; }

.drow { grid-template-columns: 340px minmax(0, 1fr); }
.mem-top { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.mem-top b { flex: 1; min-width: 0; line-height: 1.25; }
.pay { display: inline-flex; align-items: center; gap: 8px; min-width: 0; justify-items: initial; }
.pbar { width: 40px; }
.mem-id .role { font-size: 12.5px; letter-spacing: .045em; }
.mgr { align-items: flex-start; } .mgr .st-av { margin-top: 2px; }
.mem summary { align-items: flex-start; } .mem summary .st-av { margin-top: 2px; } .mem-chev { margin-top: 8px; }
@media (max-width: 860px) { .drow { grid-template-columns: 1fr; } }
.av-wrap { position: relative; flex: none; margin-top: 2px; }
.av-wrap .st-av { margin-top: 0; }
.idea-n { position: absolute; top: -5px; right: -6px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--c); color: var(--bg); font: 700 11px/1 var(--body); box-shadow: 0 0 0 2px var(--panel); box-sizing: border-box; }

/* team cards, vacancies, hiring */
.tblocks { display: grid; }
.tblocks:empty { display: none; }
.tblock { display: grid; gap: 12px; padding: 18px 20px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 28%, var(--panel)); }
.tb-n { margin-left: 8px; color: var(--muted); font-weight: 500; letter-spacing: 0; }
.mc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.mc { appearance: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; display: grid; gap: 4px; align-content: start; padding: 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); transition: border-color .12s, background .12s; }
.mc:hover { border-color: color-mix(in srgb, var(--c) 50%, var(--line)); }
.mc.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 8%, var(--panel)); box-shadow: 0 0 0 1px var(--c) inset; }
.mc:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.mc .av-wrap { justify-self: start; margin-bottom: 4px; }
.mc-name { font-size: 14px; font-weight: 600; line-height: 1.25; }
.mc-role { font: 600 12px/1.25 var(--display); letter-spacing: .05em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 80%, var(--ink)); }
.mc .pay { margin-top: 6px; justify-self: start; }
.vac { display: grid; gap: 4px; align-content: start; padding: 12px; border-radius: 10px; border: 1.5px dashed color-mix(in srgb, var(--c) 45%, var(--line)); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 5%, transparent) 0 8px, transparent 8px 16px); min-height: 112px; box-sizing: border-box; }
.vac.big { max-width: 420px; }
.vac.req { border-style: solid; border-color: color-mix(in srgb, var(--c) 40%, var(--line)); background: color-mix(in srgb, var(--c) 7%, transparent); }
.vac-k { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--c); }
.vac-role { font: 600 14px/1.25 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.vac-pay { font-size: 12px; color: var(--muted); } .vac-pay b { color: var(--ink); font-weight: 600; }
.vac-note { margin: 0; font-size: 12px; color: var(--muted); }
.vac .bh-clear, .vac-btn { justify-self: start; margin-top: 6px; }
.vac-btn { appearance: none; border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--ink); font: 600 12.5px var(--body); padding: 5px 11px; border-radius: 6px; cursor: pointer; }
.vac-btn:hover { background: color-mix(in srgb, var(--c) 22%, transparent); }
.vac.add { appearance: none; font: inherit; cursor: pointer; place-items: center; align-content: center; color: var(--muted); text-align: center; gap: 6px; }
.vac.add:hover { color: var(--ink); border-color: var(--c); }
.vac.add:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.add-plus { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 1.5px dashed currentColor; font-size: 20px; line-height: 1; }
.vac.add > span:last-child { font-size: 13px; font-weight: 600; }
.vac.add.open { cursor: auto; place-items: stretch; text-align: left; color: var(--ink); border-style: solid; }
.vac.add.open input { font: 14px var(--body); padding: 7px 9px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); min-width: 0; }
.vac-row { display: flex; gap: 6px; justify-content: flex-end; margin-top: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mc-detail { position: relative; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 0; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--c) 45%, var(--line)); background: var(--panel); }
.mcd-who { display: grid; gap: 10px; align-content: start; padding: 16px 18px; border-right: 1px solid var(--line); }
.mcd-who .scene-btn { justify-self: start; }
.mcd-sug { padding: 16px 48px 12px 18px; min-width: 0; display: grid; align-content: start; }
.mcd-sug > .drow-k { padding-bottom: 6px; }
.mcd-x { position: absolute; top: 8px; right: 10px; appearance: none; border: 0; background: none; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.mcd-x:hover { color: var(--ink); }
.drow.solo { grid-template-columns: 1fr; }
.dcol-who.wide { border-right: 0; }
@media (max-width: 860px) {
  .tblock { padding: 16px; }
  .mc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc-detail { grid-template-columns: 1fr; }
  .mcd-who { border-right: 0; border-bottom: 1px solid var(--line); padding-right: 44px; }
  .mcd-sug { padding: 14px 16px; }
}

/* idea memos and decisions */
.memo-list { list-style: none; margin: 0; padding: 6px 0 0; display: grid; gap: 12px; }
.memo { --k: var(--teal); position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); border-radius: 12px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--k) 30%, var(--line)); background: linear-gradient(110deg, color-mix(in srgb, var(--k) 9%, var(--panel)), var(--panel) 45%); }
.m-job { --k: var(--gold); } .m-option { --k: var(--teal); } .m-upgrade { --k: var(--violet); } .m-warning { --k: var(--warn); }
.memo-rail { display: grid; justify-items: center; align-content: start; padding-top: 16px; background: color-mix(in srgb, var(--k) 16%, transparent); border-right: 1px solid color-mix(in srgb, var(--k) 30%, transparent); color: var(--k); }
.memo-rail svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.memo-body { display: grid; gap: 8px; padding: 14px 18px 16px; min-width: 0; }
.memo-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.memo-kind { font: 700 11px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--k); }
.memo-date { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.memo-title { margin: 0; font: 700 19px/1.15 var(--display); letter-spacing: .02em; color: var(--ink); text-wrap: balance; }
.memo-quote { position: relative; margin: 0; padding-left: 16px; font-size: 14px; line-height: 1.55; color: color-mix(in srgb, var(--ink) 86%, var(--muted)); max-width: 72ch; border-left: 2px solid color-mix(in srgb, var(--k) 45%, transparent); }
.memo-foot { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; margin-top: 2px; }
.memo-foot .sgx-meta { font-size: 12px; }
.decide-btn { margin-left: auto; appearance: none; border: 1px solid var(--k); background: color-mix(in srgb, var(--k) 16%, transparent); color: var(--ink); font: 600 13px var(--body); padding: 7px 14px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.decide-btn::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); }
.decide-btn:hover { background: color-mix(in srgb, var(--k) 28%, transparent); }
.decide-btn:focus-visible, .dz-o:focus-visible { outline: 2px solid var(--k); outline-offset: 2px; }
.memo.deciding { border-color: var(--k); }
.dz { display: grid; gap: 10px; margin-top: 4px; padding: 14px; border-radius: 10px; background: color-mix(in srgb, var(--bg) 55%, var(--panel)); border: 1px solid var(--line); }
.dz-h { font: 700 11px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.dz-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.dz-o { --t: var(--muted); appearance: none; align-content: start; text-align: left; font: inherit; color: var(--ink); cursor: pointer; display: grid; gap: 3px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); border-left: 3px solid var(--t); }
.dz-o b { font-size: 13.5px; font-weight: 600; }
.dz-o span { font-size: 12px; color: var(--muted); line-height: 1.4; }
.dz-o:hover { border-color: color-mix(in srgb, var(--t) 60%, var(--line)); border-left-color: var(--t); }
.dz-o.on { background: color-mix(in srgb, var(--t) 14%, var(--panel)); border-color: var(--t); box-shadow: 0 0 0 1px var(--t) inset; }
.t-go { --t: var(--good); } .t-partial { --t: var(--gold); } .t-wait { --t: var(--accent); } .t-no { --t: var(--rose); }
.dz-note { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.dz-note em { font-style: normal; opacity: .8; }
.dz-note input { font: 13px var(--body); padding: 8px 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); }
.dz-act { display: flex; justify-content: flex-end; gap: 8px; }
.dz-act .sg-yes { --c: var(--k); }
.dz-act .sg-yes:disabled { opacity: .45; cursor: not-allowed; }
.memo.decided { background: var(--panel); border-color: var(--line); }
.memo.decided .memo-rail { filter: saturate(.4); opacity: .7; }
.memo.decided .memo-quote { opacity: .75; }
.memo-out { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 2px; }
.stamp { display: inline-block; font: 700 13px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--t); padding: 6px 10px 5px; border: 2px solid var(--t); border-radius: 4px; transform: rotate(-2deg); background: color-mix(in srgb, var(--t) 8%, transparent); }
.memo-note { font-size: 13px; color: var(--muted); font-style: italic; }
@media (max-width: 860px) { .memo { grid-template-columns: 34px minmax(0, 1fr); } .memo-body { padding: 12px 14px 14px; } .decide-btn { margin-left: 0; } .dz-opts { grid-template-columns: 1fr; } }

/* consistent team cards, recommended hires */
.mc-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-auto-rows: 168px; }
.mc, .vac { height: 168px; min-height: 0; box-sizing: border-box; overflow: hidden; }
.mc { grid-template-rows: auto auto 1fr auto; }
.mc-role { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mc .pay { align-self: end; margin-top: 0; }
.vac.rec { border: 1px solid color-mix(in srgb, var(--c) 70%, transparent); background: linear-gradient(150deg, color-mix(in srgb, var(--c) 20%, var(--panel)), color-mix(in srgb, var(--c) 6%, var(--panel)) 70%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 25%, transparent), 0 6px 18px -8px color-mix(in srgb, var(--c) 60%, transparent); grid-template-rows: auto auto auto 1fr; }
.vac.rec .vac-role { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vac.rec .vac-btn { align-self: end; background: var(--c); border-color: var(--c); color: var(--bg); }
.vac.rec .vac-btn:hover { filter: brightness(1.1); }
.vac.rec.req { box-shadow: none; background: color-mix(in srgb, var(--c) 8%, var(--panel)); border-style: dashed; }
.vac.rec.req .bh-clear { align-self: end; }
.rec-star { margin-right: 3px; }
.vac.big { height: auto; max-width: 420px; grid-template-rows: none; }
.vac.big .vac-role { -webkit-line-clamp: unset; }
.vac.add { height: 168px; }
.vac.add.open { height: 168px; }

/* recommended hire: reason + more info */
.vac.rec { position: relative; grid-template-rows: auto auto 1fr auto; cursor: pointer; transition: transform .12s, box-shadow .12s; }
.vac.rec:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent), 0 10px 22px -8px color-mix(in srgb, var(--c) 70%, transparent); }
.vac.rec.on { box-shadow: 0 0 0 2px var(--c); }
.vac-hit { position: absolute; inset: 0; appearance: none; border: 0; background: transparent; cursor: pointer; border-radius: inherit; z-index: 1; }
.vac-hit:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.vac-why { font-size: 12.5px; line-height: 1.4; color: color-mix(in srgb, var(--ink) 80%, var(--muted)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; align-self: start; }
.vac-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vac-foot .vac-pay { font-size: 12px; }
.vac-more { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--c); }
.vac-more i { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.vac.rec.on .vac-more i { transform: rotate(45deg); }
.vac.rec:hover .vac-more { text-decoration: underline; text-underline-offset: 3px; }
.vac.big { height: auto; min-height: 150px; }
.vac.big .vac-why { -webkit-line-clamp: unset; }
.vd { margin-top: 0; }
.dcol-who.wide .vd { margin-top: 4px; }
.vd-role { font: 700 18px/1.2 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.vd-p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; max-width: 70ch; }
.vd-list { margin: 4px 0 12px; padding-left: 18px; display: grid; gap: 4px; font-size: 13.5px; }
.vd-small { margin: 0; font-size: 12px; color: var(--muted); }
.vac-btn.solid { justify-self: start; background: var(--c); border-color: var(--c); color: var(--bg); }
.mcd-sug > .drow-k + .vd-p, .mcd-sug > .drow-k + .vd-list { margin-top: 2px; }

/* staffing stats */
.sstats { display: grid; gap: 14px; }
.sstats[hidden] { display: none; }
.ss-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.ss-tile { display: grid; gap: 4px; align-content: start; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 45%, var(--panel)); }
.ss-tile.hot { border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); background: color-mix(in srgb, var(--gold) 7%, var(--panel)); }
.ss-tile.warn { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); background: color-mix(in srgb, var(--warn) 7%, var(--panel)); }
.ss-k { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ss-v { font: 700 28px/1.1 var(--body); font-variant-numeric: tabular-nums; color: var(--ink); letter-spacing: -.01em; }
.ss-v small { font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 3px; letter-spacing: 0; }
.ss-tile.hot .ss-v { color: var(--gold); } .ss-tile.warn .ss-v { color: var(--warn); }
.ss-sub { font-size: 12px; line-height: 1.5; color: var(--muted); }
.ss-sub b { color: var(--ink); font-weight: 600; }
.ss-kinds { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; }
.ss-kinds span { display: inline-flex; align-items: center; gap: 5px; }
.ss-kinds i { width: 7px; height: 7px; border-radius: 50%; }
.ss-split { display: grid; gap: 8px; }
.ss-bar { display: flex; gap: 2px; height: 12px; border-radius: 6px; overflow: hidden; }
.ss-bar i { background: var(--c); min-width: 4px; }
.ss-leg { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; color: var(--muted); }
.ss-leg span { display: inline-flex; align-items: center; gap: 6px; }
.ss-leg i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.ss-leg b { color: var(--ink); font-weight: 600; }
.ss-leg em { font-style: normal; opacity: .75; }
@media (max-width: 640px) { .ss-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .ss-tile { padding: 12px; } .ss-v { font-size: 22px; } .ss-tile:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* stats: clickable tiles, health */
.ss-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
button.ss-tile { appearance: none; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: border-color .12s, transform .12s; grid-template-rows: auto auto 1fr auto; }
button.ss-tile:hover:not(:disabled) { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); transform: translateY(-1px); }
button.ss-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.ss-tile:disabled { cursor: default; }
.ss-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--accent); }
.ss-go i { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); }
.ss-tile.hot .ss-go { color: var(--gold); } .ss-tile.warn .ss-go { color: var(--warn); }
.ss-health { display: grid; gap: 8px; }
.hl { display: grid; gap: 2px; }
.hl-row { appearance: none; font: inherit; color: inherit; text-align: left; cursor: pointer; display: grid; grid-template-columns: 240px minmax(120px, 1fr) 100px minmax(0, 1.3fr); align-items: center; gap: 14px; padding: 8px 10px; margin: 0 -10px; border: 0; border-radius: 8px; background: transparent; }
.hl-row:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.hl-row:focus-visible { outline: 2px solid var(--c); outline-offset: 0; }
.hl-name { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.hl-name i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.hl-bar { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--muted) 18%, transparent); overflow: hidden; }
.hl-bar b { display: block; height: 100%; border-radius: 4px; background: var(--hc); }
.h-good { --hc: var(--good); } .h-mid { --hc: var(--gold); } .h-bad { --hc: var(--rose); }
.hl-band { font-size: 12px; font-weight: 600; color: var(--hc); }
.hl-why { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-bar button { appearance: none; border: 0; padding: 0; background: var(--c); min-width: 4px; cursor: pointer; }
.ss-bar button:hover { filter: brightness(1.15); }
.ss-leg button { appearance: none; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; }
.ss-leg button:hover { color: var(--ink); }
.ss-leg button i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
@media (max-width: 640px) { .ss-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ss-tile:last-child:nth-child(odd) { grid-column: auto; } }
@keyframes flash { 0% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: 0 0 0 3px transparent; } }
.flash { animation: flash 1.6s ease-out; }
@media (max-width: 760px) {
  .hl-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
  .hl-bar { grid-column: 1 / -1; grid-row: 2; }
  .hl-why { grid-column: 1 / -1; white-space: normal; }
}

/* org structure */
.tblocks { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); border-top: 1px solid var(--line); background: var(--line); gap: 1px; }
.tblock { border-top: 0; align-content: start; }
.tb-hd { display: grid; gap: 2px; }
.tb-blurb { font-size: 12px; color: var(--muted); }
.dh-tt { display: grid; gap: 2px; flex: 1; min-width: 0; }
.dh-tt h3 { flex: none; }
.dh-blurb { font-size: 12.5px; color: var(--muted); }
.vac.add > span.add-role { font-size: 11.5px; font-weight: 500; color: var(--muted); line-height: 1.35; padding: 0 10px; }
.vac.add > span:nth-child(2) { font-size: 13px; font-weight: 600; }
.mc-detail { grid-column: 1 / -1; }
@media (max-width: 860px) { .tblocks { grid-template-columns: 1fr; } }

.tblocks { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.tblock .mc-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.tblock.t-empty .mc-grid { grid-auto-rows: auto; }
.tblock.t-empty .vac.add { height: 104px; }
.tblock.t-empty .vac.add .add-plus { width: 26px; height: 26px; font-size: 17px; }
.tblock .tb-hd { min-height: 38px; }

/* aligned team columns */
.tblocks { grid-auto-rows: auto; }
.tblock { grid-row: span 2; display: grid; grid-template-rows: subgrid; row-gap: 12px; }
.tb-blurb { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@supports not (grid-template-rows: subgrid) { .tb-hd { min-height: 58px; } }
.tdetail { padding: 18px 20px; background: color-mix(in srgb, var(--bg) 28%, var(--panel)); border-top: 1px solid var(--line); }
@media (max-width: 860px) { .tdetail { padding: 14px 16px 16px; } .tblock { grid-row: auto; grid-template-rows: none; } }

/* one card height for every team card */
.mc-grid, .tblock.t-empty .mc-grid { grid-auto-rows: 132px; }
.mc, .vac, .vac.add, .tblock.t-empty .vac.add, .vac.add.open { height: 132px; }
.mc { grid-template-rows: 1fr auto; padding: 12px 14px; }
.mc-top { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.mc-top .av-wrap { margin: 2px 0 0; }
.mc-id { display: grid; gap: 3px; min-width: 0; }
.mc .pay { margin-top: 0; }
.vac.add .add-plus, .tblock.t-empty .vac.add .add-plus { width: 26px; height: 26px; font-size: 17px; }
.vac.add { gap: 4px; }
.vac.rec { grid-template-rows: auto auto 1fr auto; gap: 3px; padding: 11px 12px; }
.vac.rec .vac-role { -webkit-line-clamp: 1; font-size: 13px; }
.vac.rec .vac-why { -webkit-line-clamp: 2; font-size: 12px; }
.vac.add.open { gap: 6px; padding: 10px 12px; }
.vac.add.open .vac-row { margin-top: 0; }

/* portraits, instant hiring */
.pt-wrap { flex: none; display: inline-grid; border-radius: 50%; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--c) 55%, transparent); line-height: 0; }
.pt-wrap.big { box-shadow: 0 0 0 2px var(--c), 0 6px 20px -6px color-mix(in srgb, var(--c) 70%, transparent); }
.pt { display: block; border-radius: 50%; }
.mcd-who .mgr { align-items: center; gap: 16px; }
.who-act { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.letgo { appearance: none; border: 1px solid var(--line); background: transparent; color: var(--muted); font: 500 12px var(--body); padding: 4px 10px; border-radius: 999px; cursor: pointer; }
.letgo:hover { color: var(--rose); border-color: color-mix(in srgb, var(--rose) 50%, var(--line)); }
.letgo.sure { color: var(--bg); background: var(--rose); border-color: var(--rose); font-weight: 600; }
.st-note.writing { font-style: italic; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }
.vac.add { cursor: pointer; }
.mem-top b { flex: 1 1 auto; min-width: 0; }
.mem-top .pay { flex: none; }
.mem-id > .pay { margin-top: 4px; justify-self: start; }
.mem-top b { font-size: 15px; }

/* candidate shortlists */
.sl-panel { display: grid; gap: 14px; padding: 16px 18px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--c) 50%, var(--line)); background: linear-gradient(160deg, color-mix(in srgb, var(--c) 9%, var(--panel)), var(--panel) 50%); }
.tdetail .sl-panel + *, .tdetail * + .sl-panel { margin-top: 14px; }
.dcol-who.wide .sl-panel { margin-top: 10px; }
.sl-hd { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.sl-hd .mcd-x { position: static; }
.sl-hact { display: flex; align-items: center; gap: 8px; }
.sl-t { margin: 2px 0 0; font: 700 20px/1.15 var(--display); letter-spacing: .03em; text-transform: uppercase; }
.sl-sub { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.sl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.cand { display: grid; gap: 10px; align-content: start; grid-template-rows: auto auto auto 1fr auto auto; padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); }
.cand:hover { border-color: color-mix(in srgb, var(--c) 55%, var(--line)); }
.cand-top { display: flex; align-items: center; gap: 12px; }
.cand-name { font-size: 15px; font-weight: 600; }
.cand-from { font-size: 12px; color: var(--muted); }
.cand-pay { display: flex; align-items: baseline; gap: 6px; font-size: 12px; color: var(--muted); }
.cand-pay b { font-size: 18px; color: var(--ink); }
.cand-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: color-mix(in srgb, var(--ink) 82%, var(--muted)); }
.cand-trade { margin: 0; font-size: 12.5px; display: flex; gap: 6px; align-items: baseline; }
.cand-trade i { font-style: normal; font-size: 9px; }
.cand-trade.up { color: var(--good); } .cand-trade.down { color: var(--warn); }
.cand-hire { justify-self: stretch; background: var(--c); border-color: var(--c); color: var(--bg); padding: 8px 14px; }
.cand-hire:hover { filter: brightness(1.1); background: var(--c); }
.cand.more { border-style: dashed; place-items: center; text-align: center; grid-template-rows: none; align-content: center; color: var(--muted); }
.cand.more b { color: var(--ink); }
.vac.add.searching { border-style: dashed; color: var(--muted); }
.vac.add.ready { border-style: solid; border-color: var(--c); color: var(--ink); background: color-mix(in srgb, var(--c) 10%, var(--panel)); }
.vac.add.ready .add-plus { border-style: solid; font-size: 14px; font-weight: 700; color: var(--c); }
.spin { animation: spin 2.4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }

/* keep person text inside its column */
.mc-detail { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
.mcd-who, .dcol-who, .mcd-who > *, .dcol-who > * { min-width: 0; }
.st-tags .chip { white-space: normal; text-align: left; line-height: 1.35; padding: 3px 10px; }
.st-note { overflow-wrap: anywhere; }

/* tasks */
.tk-head { gap: 10px; }
.tk-clock { display: inline-flex; align-items: baseline; gap: 10px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); }
.tk-clock b { font-size: 14px; } .tk-clock b.mono { color: var(--accent); }
.co-nav button.co-chip { appearance: none; font: inherit; cursor: pointer; }
.co-chip.on { background: color-mix(in srgb, var(--c) 22%, transparent); border-color: var(--c); }
.tk-list { display: grid; gap: 12px; }
.tk { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); border-radius: 12px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--c) 28%, var(--line)); background: linear-gradient(110deg, color-mix(in srgb, var(--c) 7%, var(--panel)), var(--panel) 40%); }
.tk.open { border-color: var(--c); }
.tk-rail { display: grid; justify-items: center; align-content: start; padding-top: 18px; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); border-right: 1px solid color-mix(in srgb, var(--c) 25%, transparent); }
.tk-rail svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tk-body { display: grid; gap: 8px; padding: 16px 18px; min-width: 0; }
.tk-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tk-dept { font: 700 11px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--c); }
.tk-urg { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid; }
.u-hi { color: var(--rose); border-color: color-mix(in srgb, var(--rose) 50%, transparent); } .u-mid { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 50%, transparent); } .u-lo { color: var(--muted); border-color: var(--line); }
.tk-span { margin-left: auto; font-size: 12px; color: var(--muted); }
.tk-title { margin: 0; font: 700 20px/1.15 var(--display); letter-spacing: .02em; }
.tk-brief { margin: 0; font-size: 14px; line-height: 1.55; max-width: 75ch; color: color-mix(in srgb, var(--ink) 86%, var(--muted)); }
.tk-go { justify-self: start; margin-left: 0; --k: var(--c); }
.tk-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 4px; }
.tk-o { --t: var(--muted); appearance: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; display: grid; gap: 5px; align-content: start; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); border-top: 3px solid var(--t); background: var(--panel); }
.k-self { --t: var(--accent); } .k-temp { --t: var(--gold); } .k-delegate { --t: var(--good); } .k-choice { --t: var(--violet); }
.tk-o:hover:not(:disabled) { border-color: color-mix(in srgb, var(--t) 60%, var(--line)); border-top-color: var(--t); }
.tk-o.on { background: color-mix(in srgb, var(--t) 12%, var(--panel)); border-color: var(--t); box-shadow: 0 0 0 1px var(--t) inset; }
.tk-o:disabled { cursor: not-allowed; opacity: .55; }
.tk-o:focus-visible { outline: 2px solid var(--t); outline-offset: 2px; }
.tk-o-k { font: 700 10.5px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--t); }
.tk-o b { font-size: 14px; font-weight: 600; }
.tk-o-d { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.tk-o-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: color-mix(in srgb, var(--ink) 80%, var(--muted)); margin-top: 2px; }
.tk-odds { font-size: 12px; color: var(--muted); } .tk-odds b { color: var(--ink); }
.tk-lock { font-size: 12px; color: var(--rose); }
.tk.done { opacity: .85; background: var(--panel); border-color: var(--line); }
.tk.done .tk-rail { opacity: .6; }
.tk-res { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--bg) 50%, var(--panel)); border: 1px solid var(--line); }
.tk-res > div { flex: 1; min-width: 200px; display: grid; gap: 4px; }
.tk-res p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.tk-res .stamp { --t: var(--good); }
.g-partial .stamp { --t: var(--gold); } .g-fail .stamp, .g-bad .stamp { --t: var(--rose); } .g-exceptional .stamp { --t: var(--teal); } .g-done .stamp { --t: var(--accent); }
.tk-dice { font-size: 12.5px; color: var(--muted); margin-left: 6px; }
.tk-meta { font-size: 12px; color: var(--muted); }
.tk-hint { flex-basis: 100%; font-size: 12px; color: var(--muted); font-style: italic; }
.tk-done > summary { list-style: none; display: flex; align-items: baseline; gap: 10px; cursor: pointer; }
.tk-done > summary h2 { margin: 0; }
.tk-done[open] > summary { margin-bottom: 12px; }
@media (max-width: 760px) { .tk { grid-template-columns: 36px minmax(0, 1fr); } .tk-body { padding: 14px; } .tk-opts { grid-template-columns: 1fr; } .tk-span { margin-left: 0; } }
.tk-train { font-size: 12px; color: var(--teal); }
.tk-att { margin: 0; font-size: 12.5px; color: var(--muted); padding: 6px 10px; border-left: 2px solid var(--line); }
.tk-att.g-success, .tk-att.g-exceptional { border-left-color: var(--good); } .tk-att.g-fail, .tk-att.g-bad { border-left-color: var(--rose); } .tk-att.g-partial { border-left-color: var(--gold); }
.tk .dz-act .sg-yes { background: var(--c); border-color: var(--c); color: var(--bg); padding: 7px 16px; }
.tk .dz-act .sg-yes:disabled { background: transparent; color: var(--muted); border-color: var(--line); }

/* accepted jobs */
.acc-btn { background: var(--good); border-color: var(--good); color: var(--bg); font-weight: 700; padding: 7px 16px; }
.jrow.acc .jr-sum { box-shadow: inset 3px 0 0 var(--good); }
.acc-pill { display: inline-block; font: 700 10.5px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--good); border: 1px solid color-mix(in srgb, var(--good) 50%, transparent); background: color-mix(in srgb, var(--good) 12%, transparent); padding: 3px 7px; border-radius: 999px; margin-right: 8px; vertical-align: 2px; }
.acc-sec { --c: var(--good); }
.acc-tasks { display: flex; flex-wrap: wrap; gap: 8px; }
.acc-t { appearance: none; font: inherit; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); font-size: 13px; }
.acc-t i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.acc-t span { font-size: 11px; font-weight: 600; color: var(--gold); }
.acc-t.done span { color: var(--good); } .acc-t.done { opacity: .7; }
.acc-t:hover { border-color: var(--c); }
.tk-job { justify-self: start; font-size: 12.5px; }
.chip-h { width: 34px; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--muted) 25%, transparent); overflow: hidden; display: inline-block; }
.chip-h em { display: block; height: 100%; background: var(--hc); }
/* odds */
.odds { display: grid; gap: 6px; margin-top: 2px; padding-top: 8px; border-top: 1px dashed var(--line); }
.odds-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.odds-word { font: 700 13px var(--display); letter-spacing: .1em; text-transform: uppercase; }
.w-vl { color: var(--good); } .w-l { color: color-mix(in srgb, var(--good) 60%, var(--gold)); } .w-c { color: var(--gold); } .w-u { color: var(--warn); } .w-ls { color: var(--rose); }
.odds-pct { font-size: 12px; color: var(--muted); } .odds-pct b { font-size: 16px; color: var(--ink); }
.odds-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; gap: 1px; background: var(--line); }
.odds-bar i { display: block; min-width: 2px; }
.ob-exceptional { background: var(--teal); } .ob-success { background: var(--good); } .ob-partial { background: var(--gold); } .ob-fail { background: color-mix(in srgb, var(--rose) 45%, var(--muted)); } .ob-bad { background: var(--rose); }
.odds-leg { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 11px; color: var(--muted); }
.odds-leg span { display: inline-flex; align-items: center; gap: 4px; }
.odds-leg i { width: 7px; height: 7px; border-radius: 2px; }
.odds-how { font-size: 11.5px; line-height: 1.45; color: var(--muted); }
.odds-how b { color: var(--ink); }
.tk { --k: var(--c); }

.tk-grp { display: grid; gap: 12px; }
.tk-grp + .tk-grp { margin-top: 14px; }
.tk-gh { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding: 4px 4px 0; }
.tk-gh h3 { margin: 0; font: 700 15px var(--display); letter-spacing: .16em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.tk-gh h3 span { font: 700 11px/1 var(--body); letter-spacing: 0; padding: 3px 7px; border-radius: 999px; color: var(--bg); background: var(--muted); }
.tk-gh p { margin: 0; font-size: 12.5px; color: var(--muted); }
.g-urgent .tk-gh h3 { color: var(--rose); } .g-urgent .tk-gh h3 span { background: var(--rose); }
.g-routine .tk-gh h3 { color: var(--gold); } .g-routine .tk-gh h3 span { background: var(--gold); }
.g-future .tk-gh h3 { color: var(--teal); } .g-future .tk-gh h3 span { background: var(--teal); }
.tk-only { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; color: var(--violet); border: 1px solid color-mix(in srgb, var(--violet) 50%, transparent); }
.tk-only.soft { color: var(--muted); border-color: var(--line); }
.tk-auto { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }

/* urgency groups and timings */
.tk-grp { --g: var(--muted); display: grid; gap: 0; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--g) 45%, var(--line)); background: color-mix(in srgb, var(--g) 6%, var(--bg)); overflow: hidden; }
.tk-grp + .tk-grp { margin-top: 18px; }
.g-urgent { --g: var(--rose); } .g-routine { --g: var(--gold); } .g-future { --g: var(--teal); }
.tk-gh { display: flex; align-items: center; gap: 16px; padding: 14px 18px; background: linear-gradient(90deg, color-mix(in srgb, var(--g) 26%, var(--panel)), color-mix(in srgb, var(--g) 8%, var(--panel))); border-bottom: 1px solid color-mix(in srgb, var(--g) 40%, var(--line)); flex-wrap: wrap; }
.gh-ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 800 20px var(--display); color: var(--bg); background: var(--g); }
.gh-t { flex: 1; min-width: 200px; display: grid; gap: 2px; }
.tk-gh h3 { margin: 0; font: 800 24px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--g); }
.tk-gh p { margin: 0; font-size: 13px; color: color-mix(in srgb, var(--ink) 75%, var(--muted)); }
.gh-n { display: grid; justify-items: end; line-height: 1.1; padding-left: 16px; border-left: 1px solid color-mix(in srgb, var(--g) 35%, var(--line)); }
.gh-n b { font: 700 20px var(--body); color: var(--ink); font-variant-numeric: tabular-nums; }
.gh-n span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.tk-gl { display: grid; gap: 10px; padding: 12px; }
.tk { grid-template-columns: 48px minmax(0, 1fr) 190px; }
.tk-time { display: grid; align-content: center; gap: 2px; padding: 14px 18px; border-left: 1px solid var(--line); background: color-mix(in srgb, var(--g, var(--muted)) 9%, var(--bg)); }
.tk.h-urgent { --g: var(--rose); } .tk.h-routine { --g: var(--gold); } .tk.h-future { --g: var(--teal); }
.tt-k { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tt-due { font: 700 15px/1.2 var(--display); letter-spacing: .03em; text-transform: uppercase; color: var(--g); margin-bottom: 8px; }
.tt-dur { font: 700 22px/1.1 var(--body); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.tk.done { grid-template-columns: 48px minmax(0, 1fr); }
@media (max-width: 760px) {
  .tk { grid-template-columns: 36px minmax(0, 1fr); }
  .tk-time { grid-column: 2; border-left: 0; border-top: 1px solid var(--line); grid-template-columns: auto 1fr; column-gap: 12px; align-items: baseline; padding: 10px 14px; }
  .tt-due { margin: 0; } .tt-dur { font-size: 18px; }
  .gh-n { padding-left: 12px; } .tk-gh h3 { font-size: 20px; } .tk-gl { padding: 8px; }
}

/* header clock */
.hclock { display: grid; justify-items: start; padding: 6px 14px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.hclock b { font: 700 34px/1 var(--mono); color: var(--accent); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.hclock .v { font-size: 13px !important; font-family: var(--body) !important; }
.hfat { --fc: var(--good); display: grid; gap: 6px; align-content: center; min-width: 230px; padding: 8px 12px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--fc) 40%, var(--line)); background: color-mix(in srgb, var(--fc) 7%, transparent); }
.hfat.f-t { --fc: var(--gold); } .hfat.f-vt { --fc: var(--warn); } .hfat.f-ex { --fc: var(--bad); }
.strip-facts .hfat-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.hfat-top b { color: var(--fc); font-size: 14px; }
.hfat-top small { color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.hfat-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.hfat-bar i { height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 14%, transparent); }
.hfat-bar i.on { background: var(--fc); }
.hfat-sub { font-size: 11.5px; color: var(--muted); }
.rest-btn { font: 600 12px var(--body); color: var(--ink); background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 8px; padding: 6px 10px; cursor: pointer; white-space: nowrap; }
.rest-btn:hover { background: color-mix(in srgb, var(--accent) 24%, transparent); }
.rest-btn:disabled { opacity: .5; cursor: default; }
.strip-facts { align-items: center; }
/* debrief */
.db-box { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; width: min(640px, 100%); max-height: 100%; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.45); display: grid; }
#debrief[hidden] { display: none; }
.db-hd { position: relative; display: grid; gap: 4px; padding: 18px 48px 14px 20px; border-top: 4px solid var(--c); border-bottom: 1px solid var(--line); }
.db-hd .tk-dept { color: var(--c); }
.db-hd h3 { margin: 0; font: 700 24px/1.1 var(--display); }
.db-choice { font-size: 13px; color: var(--muted); }
.db-hd .scene-x { position: absolute; top: 14px; right: 14px; }
.db-main { display: grid; justify-items: center; gap: 12px; padding: 22px 20px 18px; text-align: center; background: color-mix(in srgb, var(--bg) 40%, var(--panel)); }
.db-roll { display: grid; grid-template-columns: auto auto; gap: 10px 12px; justify-items: center; }
.db-sum, .db-need { grid-column: 1 / -1; }
.db-sum { font-size: 15px; } .db-sum b { font-size: 22px; color: var(--ink); }
.db-need { font-size: 12px; color: var(--muted); }
.die { width: 54px; height: 54px; border-radius: 12px; background: #f4f1ea; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18), 0 4px 10px rgba(0,0,0,.35); display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 8px; box-sizing: border-box; animation: dieIn .5s cubic-bezier(.2,1.6,.4,1); }
.die i { width: 10px; height: 10px; border-radius: 50%; place-self: center; }
.die i[data-p1="1"], .die i[data-p2="1"], .die i[data-p3="1"], .die i[data-p4="1"], .die i[data-p5="1"], .die i[data-p6="1"], .die i[data-p7="1"], .die i[data-p8="1"], .die i[data-p9="1"] { background: #1a1d22; }
.die + .die { animation-delay: .08s; }
@keyframes dieIn { from { transform: rotate(-200deg) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .die { animation: none; } }
.db-main .stamp { font-size: 18px; --t: var(--good); }
.db-main.g-partial .stamp { --t: var(--gold); } .db-main.g-fail .stamp, .db-main.g-bad .stamp { --t: var(--rose); } .db-main.g-exceptional .stamp { --t: var(--teal); } .db-main.g-done .stamp { --t: var(--accent); }
.db-text { margin: 0; font-size: 15px; line-height: 1.55; max-width: 48ch; }
.db-eff { display: grid; gap: 8px; padding: 16px 20px; }
.db-eff ul, .tl-eff { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.db-eff li, .tl-eff li { display: flex; gap: 10px; align-items: baseline; font-size: 13.5px; }
.db-eff li i, .tl-eff li i { font-style: normal; width: 18px; text-align: center; flex: none; color: var(--muted); }
.e-fix i { color: var(--good) !important; } .e-defect i { color: var(--warn) !important; } .e-follow i { color: var(--accent) !important; } .e-follow { font-weight: 600; } .e-perk i { color: var(--gold) !important; } .e-rep i { color: var(--teal) !important; } .e-xp i { color: var(--violet) !important; } .e-cash i { color: var(--rose) !important; }
.db-act { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 0 20px 18px; }
.db-act .sg-yes { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.tk-dbb { flex-basis: 100%; text-align: left; }
/* task log */
.tl { display: grid; }
.tl-row { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto 90px; gap: 14px; align-items: start; padding: 12px 0; border-top: 1px solid var(--line); }
.tl-row:first-child { border-top: 0; }
.tl-when { font-size: 12px; color: var(--muted); padding-top: 2px; }
.tl-main { display: grid; gap: 3px; min-width: 0; border-left: 3px solid var(--c); padding-left: 12px; }
.tl-main b { font-size: 14px; }
.tl-choice { font-size: 12.5px; color: var(--muted); }
.tl-main p { margin: 2px 0 0; font-size: 13px; }
.tl-eff li { font-size: 12.5px; color: color-mix(in srgb, var(--ink) 80%, var(--muted)); }
.stamp.sm { font-size: 10.5px; padding: 4px 7px 3px; --t: var(--good); }
.tl-row.g-partial .stamp { --t: var(--gold); } .tl-row.g-fail .stamp, .tl-row.g-bad .stamp { --t: var(--rose); } .tl-row.g-exceptional .stamp { --t: var(--teal); } .tl-row.g-done .stamp { --t: var(--accent); }
.tl-cost { font-size: 12px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .tl-row { grid-template-columns: minmax(0, 1fr) auto; } .tl-when { grid-column: 1 / -1; } .tl-cost { grid-column: 1 / -1; text-align: left; } }
/* dispatch */
#ds-view { display: grid; gap: 16px; --c: var(--accent); --k: var(--accent); }
#ds-view .sg-yes { justify-self: start; background: var(--c); color: var(--bg); padding: 8px 16px; }
#ds-view .sg-yes:disabled { opacity: .45; cursor: default; }
#ds-view .ds-x .decide-btn { --k: var(--gold); }
.ds-hero { grid-template-columns: minmax(0, 1fr) auto; gap: 16px 24px; align-items: start; }
.ds-id h2 { margin: 2px 0; font: 700 28px/1.15 var(--display); text-wrap: balance; }
.ds-sub { font-size: 13px; color: var(--muted); }
.ds-money { display: flex; gap: 22px; flex-wrap: wrap; }
.ds-money > div { display: grid; gap: 2px; } .ds-money b { font-size: 18px; } .ds-money b.neg { color: var(--bad); } .ds-money b.pos { color: var(--good); }
.ds-mapwrap { grid-column: 1 / -1; display: grid; gap: 6px; }
.ds-map { height: 440px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--map-sea); }
.k-cur, .k-fut, .k-done { display: inline-block; width: 18px; height: 0; border-top: 3px solid var(--map-glow); vertical-align: middle; margin-right: 6px; }
.k-fut { border-top: 2px solid color-mix(in srgb, var(--map-gold) 40%, transparent); } .k-done { border-top: 2px dashed var(--map-muted); }
.ds-legs { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ds-legs li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto auto; gap: 12px; align-items: center; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); font-size: 13px; }
.ds-legs li.cur { border-color: color-mix(in srgb, var(--gold) 60%, var(--line)); background: color-mix(in srgb, var(--gold) 8%, transparent); }
.ds-legs li.fut { opacity: .7; } .ds-legs li.flown { opacity: .5; }
.ds-n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 12px; border: 1px solid var(--line); }
.ds-legs li.cur .ds-n { background: var(--gold); color: var(--bg); border-color: var(--gold); }
.ds-k, .ds-t { color: var(--muted); }
.ds-sb { color: var(--accent); text-decoration: none; font-weight: 600; } .ds-sb:hover { text-decoration: underline; }
.ds-cur { display: grid; gap: 12px; }
.ds-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ds-plan { text-decoration: none; display: inline-flex; align-items: center; }
.ds-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ds-grid > .panel { display: grid; gap: 12px; align-content: start; }
.ds-fob { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.ds-fob input { font: 600 16px var(--mono); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; max-width: 180px; }
.ds-need { font-size: 13px; }
.ds-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.ds-opt { display: grid; gap: 2px; text-align: left; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; font: inherit; }
.ds-opt b { font-size: 13px; } .ds-opt span { font-size: 15px; } .ds-opt em { font-style: normal; font-size: 12px; color: var(--muted); }
.ds-opt.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.ds-hint { margin: 0; font-size: 12.5px; color: var(--muted); }
.ds-paid { display: grid; gap: 2px; padding: 12px 14px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--good) 40%, var(--line)); background: color-mix(in srgb, var(--good) 7%, transparent); }
.ds-paid span { font-size: 12.5px; color: var(--muted); }
.ds-g { display: grid; gap: 8px; }
.ds-x { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); }
.ds-x > div { display: grid; gap: 2px; min-width: 0; } .ds-x b { font-size: 13.5px; } .ds-x span { font-size: 12.5px; color: var(--muted); }
.ds-x .ds-rec { justify-self: start; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--gold); }
.ds-x.paid { border-color: color-mix(in srgb, var(--good) 35%, var(--line)); }
.ds-ok { color: var(--good) !important; font-weight: 600; font-size: 13px !important; white-space: nowrap; }
.ds-pax { display: grid; gap: 8px; }
.ds-p { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); }
.ds-p > div { display: grid; min-width: 0; } .ds-p span { font-size: 12.5px; color: var(--muted); }
.acc-ds { justify-self: start; margin: 2px 0 8px; }
@media (max-width: 860px) { .ds-grid { grid-template-columns: 1fr; } .ds-hero { grid-template-columns: 1fr; } .ds-map { height: 300px; } .ds-legs li { grid-template-columns: 28px minmax(0, 1fr) auto; } .ds-legs li .ds-k, .ds-legs li .ds-t { display: none; } }
.ds-wb .wb-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; }
.wb-items { display: grid; gap: 6px; align-content: start; }
.wb-it { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); }
.wb-it > div { display: grid; min-width: 0; } .wb-it b { font-size: 13.5px; } .wb-it div span { font-size: 12px; color: var(--muted); }
.wb-it > .mono { font-size: 14px; }
.wb-it.tot { border-bottom: 0; border-top: 1px solid var(--ink); } .wb-it.tot > .mono { font-weight: 700; }
.wb-items .linkbtn { justify-self: start; }
.wb-bars { display: grid; gap: 12px; align-content: start; }
.wb-sum { display: flex; gap: 22px; flex-wrap: wrap; } .wb-sum > div { display: grid; gap: 2px; } .wb-sum b { font-size: 16px; }
.wb-row { --w: var(--good); display: grid; grid-template-columns: 76px minmax(0, 1fr) 86px; gap: 4px 12px; align-items: center; }
.wb-row.near { --w: var(--gold); } .wb-row.over { --w: var(--bad); }
.wb-l { font-size: 13px; font-weight: 600; }
.wb-bar { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; }
.wb-bar i { display: block; height: 100%; background: var(--w); border-radius: 4px; }
.wb-v { font-size: 13.5px; text-align: right; }
.wb-m { grid-column: 2 / -1; font-size: 11.5px; color: var(--muted); margin-top: -2px; }
.wb-row.over .wb-m { color: var(--bad); font-weight: 600; }
@media (max-width: 860px) { .ds-wb .wb-grid { grid-template-columns: 1fr; } }
.ds-when { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 10px 28px; align-items: start; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.ds-when > div { display: grid; gap: 2px; } .ds-when b { font-size: 26px; color: var(--accent); } .ds-when > div span:last-child { font-size: 12px; color: var(--muted); }
.ds-why { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--muted); display: grid; gap: 3px; }
.ds-why li.warn { color: var(--bad); font-weight: 600; }
@media (max-width: 640px) { .ds-when { grid-template-columns: 1fr 1fr; } .ds-why { grid-column: 1 / -1; } }
.fm-m .fm-lock { text-align: left; max-width: none; }
.dp { --dc: var(--accent); display: grid; gap: 14px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(180deg, color-mix(in srgb, var(--dc) 7%, var(--panel)), var(--panel)); }
.dp.bad { --dc: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }
.dp-tl { padding-top: 18px; }
.dp-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dp-h > div { display: grid; gap: 2px; } .dp-h b { font: 600 15px var(--body); }
.dp-chip { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid; }
.dp-chip.sug { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, transparent); background: color-mix(in srgb, var(--good) 10%, transparent); }
.dp-chip.you { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.dp-tl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.dp-n { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; margin: 0; padding: 0; border: 0; min-width: 0; }
.dp-trk { display: flex; align-items: center; width: 100%; height: 16px; margin-bottom: 8px; }
.dp-trk i { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--muted); background: var(--panel); }
.dp-trk em { position: relative; flex: 1; margin: 0 8px; border-top: 2px dashed color-mix(in srgb, var(--muted) 55%, transparent); font-style: normal; }
.dp-trk.air em { border-top: 2px solid color-mix(in srgb, var(--gold) 75%, transparent); }
.dp-trk em span { position: absolute; left: 50%; top: -9px; transform: translate(-50%, -100%); white-space: nowrap; font-size: 11.5px; color: var(--muted); background: transparent; }
.dp-n.dep .dp-trk i { border-color: var(--dc); background: var(--dc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--dc) 22%, transparent); }
.dp-n.arr .dp-trk i { border-color: var(--gold); }
.dp-n legend { padding: 0; margin: 0; float: none; }
.dp-n > b { font-size: 30px; line-height: 40px; font-weight: 600; }
.dp-n.now > b { color: var(--muted); }
.dp-n > span:last-child { font-size: 12px; color: var(--muted); }
.dp-f { display: flex; gap: 6px; flex-wrap: wrap; }
.dp-f input { font: 600 17px var(--mono); color: var(--ink); background: var(--bg); border: 1px solid color-mix(in srgb, var(--dc) 45%, var(--line)); border-radius: 8px; height: 40px; padding: 0 10px; color-scheme: dark; }
.dp-f input[type="time"] { font-size: 22px; }
.dp-f input:focus-visible { outline: 2px solid var(--dc); outline-offset: 1px; }
.dp-warn { margin: 0; padding: 10px 12px 10px 30px; border-radius: 10px; background: color-mix(in srgb, var(--bad) 10%, transparent); color: var(--bad); font-size: 13px; font-weight: 600; display: grid; gap: 4px; }
.dp-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line); }
.dp-soon { font-size: 12.5px; color: var(--muted); } .dp-soon b { color: var(--ink); }
.dp-act { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
@media (max-width: 760px) { .dp-tl { grid-template-columns: 1fr; gap: 14px; } .dp-trk em { display: none; } }

.dp-chip.lock { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, transparent); background: color-mix(in srgb, var(--gold) 10%, transparent); }
.dp.locked { --dc: var(--gold); }
.dp-lock { display: grid; gap: 12px; }
.dp-lock-t { display: grid; gap: 4px; } .dp-lock-t b { font-size: 15px; } .dp-lock-t span { font-size: 13px; color: var(--muted); }
.dp-lock-l { display: flex; flex-wrap: wrap; gap: 8px; }
.dp-tk { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c) 45%, var(--line)); background: color-mix(in srgb, var(--c) 8%, transparent); color: var(--ink); font: 600 12.5px var(--body); cursor: pointer; }
.dp-tk i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--c); display: grid; place-items: center; font-style: normal; font-size: 9px; }
.dp-tk.done { opacity: .55; text-decoration: line-through; } .dp-tk.done i { background: var(--c); color: var(--bg); }
.dp-tk:hover { background: color-mix(in srgb, var(--c) 18%, transparent); }
.ds-sb.off { color: var(--muted); font-weight: 500; }
#ds-view .ds-plan:disabled { background: color-mix(in srgb, var(--muted) 25%, transparent); color: var(--muted); border-color: var(--line); }
.dp-pref { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); }
.dp-pref > div { display: grid; gap: 2px; } .dp-pref b { font-size: 13.5px; } .dp-pref span { font-size: 12.5px; color: var(--muted); }
.dp-pref-i { font-size: 20px; color: var(--muted); }
.dp-pref.hit { border-color: color-mix(in srgb, var(--gold) 50%, var(--line)); background: color-mix(in srgb, var(--gold) 9%, transparent); } .dp-pref.hit .dp-pref-i { color: var(--gold); }
.dp-pref.gone { opacity: .7; }
.pref-b { color: var(--gold); font-weight: 600; white-space: nowrap; }
@media (max-width: 640px) { .dp-pref { grid-template-columns: auto minmax(0, 1fr); } .dp-pref .pbtn { grid-column: 1 / -1; justify-self: start; } }
.fleet-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 16px; margin-bottom: 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--good) 40%, var(--line)); background: color-mix(in srgb, var(--good) 7%, transparent); }
.fleet-bar.lock { border-color: color-mix(in srgb, var(--gold) 50%, var(--line)); background: color-mix(in srgb, var(--gold) 8%, transparent); }
.fleet-bar > div { display: grid; gap: 3px; min-width: 0; } .fleet-bar b { font-size: 14px; } .fleet-bar span { font-size: 12.5px; color: var(--muted); } .fleet-bar span b { font-size: inherit; color: var(--ink); }
.fb-i { font-size: 20px; color: var(--good) !important; } .fleet-bar.lock .fb-i { color: var(--gold) !important; }
.hid-bar { display: block; width: 100%; margin-top: 10px; padding: 10px 14px; border-radius: 10px; border: 1px dashed var(--line); background: transparent; color: var(--muted); font: 500 13px var(--body); cursor: pointer; text-align: center; }
.hid-bar:hover { color: var(--ink); border-color: var(--muted); }
.acc-no { font-size: 12.5px; color: var(--gold); font-weight: 600; }
.decl-btn { color: var(--muted); } .decl-btn.sure { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 55%, var(--line)); }
.jm-exp { font-size: 12px; color: var(--muted); } .jm-exp.soon { color: var(--gold); font-weight: 600; } .jm-exp.gone { color: var(--rose); font-weight: 600; }
.jrow.lapsed { opacity: .55; } .jrow.lapsed .jr-sum { filter: grayscale(.6); }
.exp-bar { border-color: color-mix(in srgb, var(--rose) 40%, var(--line)); }
.clk-toast { position: fixed; z-index: 60; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: min(380px, calc(100vw - 32px)); display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--gold); box-shadow: 0 10px 30px rgba(0,0,0,.25); font-size: 13px; }
.clk-toast b { font-size: 13.5px; } .clk-toast ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; color: var(--muted); }
.clk-toast button { justify-self: end; }
@media (max-width: 640px) { .fleet-bar { grid-template-columns: auto minmax(0, 1fr); } .fleet-bar .pbtn { grid-column: 1 / -1; justify-self: start; } }
/* dispatch v2 */
.cmd { display: grid; gap: 18px; border-top: 3px solid var(--accent); }
.cmd-top { display: flex; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; align-items: flex-start; }
.cmd-id { display: grid; gap: 6px; min-width: 0; flex: 1 1 360px; }
.cmd-id h2 { margin: 0; font: 700 28px/1.15 var(--display); text-wrap: balance; }
.cmd-legs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cl { font: 600 12.5px var(--mono); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.cl.cur { color: var(--bg); background: var(--gold); border-color: var(--gold); }
.cl.flown { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, var(--line)); }
.cl-sep { color: var(--line); }
.cmd-act { display: grid; grid-template-columns: auto auto; gap: 8px 10px; justify-items: stretch; }
.cmd-why { grid-column: 1 / -1; font-size: 12px; color: var(--muted); text-align: right; max-width: 380px; justify-self: end; }
.cmd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: 10px; font: 700 14px var(--body); text-decoration: none; cursor: pointer; border: 1px solid transparent; white-space: nowrap; }
.cmd-btn span { font-size: 13px; }
.cmd-btn.go { background: var(--good); color: var(--bg); }
.cmd-btn.go:hover { filter: brightness(1.08); }
.cmd-btn.log { background: transparent; color: var(--ink); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.cmd-btn.log:not(:disabled):hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.cmd-btn.ghost { background: transparent; color: var(--accent); border-color: var(--line); }
.cmd-btn:disabled { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--muted); border-color: var(--line); cursor: not-allowed; }
.cmd-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.stepper { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; counter-reset: s; }
.stepper li { position: relative; }
.stepper li + li::before { content: ""; position: absolute; left: -50%; right: 50%; top: 15px; height: 2px; background: var(--line); z-index: 0; }
.stepper li.ok + li::before, .stepper li.ok::before { background: color-mix(in srgb, var(--good) 60%, var(--line)); }
.stepper button { position: relative; z-index: 1; display: grid; justify-items: center; gap: 4px; width: 100%; background: none; border: 0; color: var(--ink); font: inherit; cursor: pointer; padding: 0 4px; }
.stepper i { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 700 13px var(--body); font-style: normal; border: 2px solid var(--line); background: var(--panel); color: var(--muted); }
.stepper li.ok i { background: var(--good); border-color: var(--good); color: var(--bg); }
.stepper li.now i { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 18%, transparent); }
.stepper b { font-size: 13px; } .stepper span { font-size: 11.5px; color: var(--muted); text-align: center; }
.stepper li.now b { color: var(--gold); }
.ds-top { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); gap: 16px; align-items: stretch; }
.ds-top .ds-mapwrap { grid-column: auto; display: flex; flex-direction: column; gap: 8px; }
.ds-top .ds-mapwrap .ds-map { flex: 1; }
.ds-top .ds-map { height: 100%; min-height: 380px; }
.ds-side { display: grid; gap: 12px; align-content: start; }
.side-card { display: grid; gap: 10px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); }
.sc-route { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.sc-route > div { display: grid; } .sc-route > div.r { text-align: right; } .sc-route b { font-size: 22px; } .sc-route span { font-size: 12px; color: var(--muted); }
.sc-line { display: flex; align-items: center; gap: 6px; color: var(--gold); font-size: 14px; } .sc-line i { flex: 1; border-top: 2px dashed color-mix(in srgb, var(--gold) 55%, transparent); }
.sc-kv { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.sc-kv div { display: grid; gap: 1px; } .sc-kv dt { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); } .sc-kv dd { margin: 0; font-size: 14px; font-weight: 600; } .sc-kv small { font-weight: 400; color: var(--muted); font-family: var(--body); }
.side-card.money { gap: 6px; }
.mrow { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; align-items: baseline; }
.mrow small { display: block; font-size: 11px; color: var(--muted); }
.mrow b.neg { color: var(--rose); } .mrow b.pos { color: var(--good); } .mrow b.dim { color: var(--muted); text-decoration: line-through; }
.mrow.tot { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 2px; font-weight: 600; } .mrow.tot b { font-size: 18px; }
.side-card.req { border-color: color-mix(in srgb, var(--gold) 35%, var(--line)); } .side-card.req p { margin: 0; font-size: 13px; line-height: 1.5; }
.sx { display: grid; gap: 14px; align-content: start; }
.sx-h { display: flex; align-items: center; gap: 12px; }
.sx-h h2 { margin: 0; font: 600 18px var(--body); flex: 1; min-width: 0; }
.sx-n { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 700 13px var(--body); border: 2px solid var(--line); color: var(--muted); }
.sx-n.ok { background: var(--good); border-color: var(--good); color: var(--bg); }
.sx-n.todo { border-color: var(--gold); color: var(--gold); }
.sx-n.bad { border-color: var(--bad); color: var(--bad); }
.sx-s { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.sx-s.ok { color: var(--good); } .sx-s.todo { color: var(--gold); } .sx-s.bad { color: var(--bad); }
.sx .dp { border: 0; padding: 0; background: none; }
.sx .dp.bad { border: 0; background: none; }
.fuel-gauge { display: grid; gap: 6px; }
.fg-bar { position: relative; height: 14px; border-radius: 7px; background: color-mix(in srgb, var(--ink) 9%, transparent); display: flex; overflow: visible; }
.fg-bar i { display: block; height: 100%; } .fg-bar i.fob { background: var(--teal); border-radius: 7px 0 0 7px; } .fg-bar i.up { background: repeating-linear-gradient(45deg, var(--gold), var(--gold) 4px, color-mix(in srgb, var(--gold) 60%, transparent) 4px, color-mix(in srgb, var(--gold) 60%, transparent) 8px); }
.fg-bar .need { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); }
.fg-leg { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.fg-leg i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; } .fg-leg i.fob { background: var(--teal); } .fg-leg i.up { background: var(--gold); } .fg-leg i.need { width: 2px; background: var(--ink); }
.ds-p { gap: 12px; } .pav { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 700 14px var(--display); background: color-mix(in srgb, var(--violet) 22%, transparent); color: var(--violet); }
.ds-p > div { flex: 1; }
.fl-box { width: min(760px, 100%); border-top: 4px solid var(--accent); }
.fl-h { display: flex; justify-content: space-between; align-items: flex-start; padding: 18px 22px 0; }
.fl-h h2 { margin: 2px 0 0; font: 700 26px var(--display); }
.fl-x { background: none; border: 0; color: var(--muted); font-size: 26px; cursor: pointer; line-height: 1; }
.fl-f { display: grid; gap: 14px; padding: 16px 22px; }
.fl-f fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px 14px; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px 12px; }
.fl-f legend { padding: 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); }
.fl-f label { display: grid; grid-template-rows: 1fr auto; align-items: end; gap: 4px; font-size: 12.5px; color: var(--muted); }
.fl-f label > span { line-height: 1.3; }
.fl-f label small { font-size: 11px; opacity: .8; }
.fl-f label.wide { grid-column: 1 / -1; }
.fl-f label.chk { display: flex; gap: 8px; align-items: center; align-self: end; color: var(--ink); min-height: 38px; }
.fl-f input, .fl-f select, .fl-f textarea { font: 600 15px var(--body); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; color-scheme: dark; min-width: 0; }
.fl-f input[type="number"], .fl-f input[type="time"], .fl-f input[type="date"] { font-family: var(--mono); }
.fl-f textarea { font-weight: 400; resize: vertical; }
.fl-f input:focus-visible, .fl-f select:focus-visible, .fl-f textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fl-f input[type="checkbox"] { appearance: auto; width: 18px; height: 18px; padding: 0; flex: none; accent-color: var(--accent); }
.fl-note { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--muted); }
.fl-sum { display: grid; gap: 12px; margin: 0 22px; padding: 14px 16px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 6%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); }
.fs-g { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fs-gr { display: flex; gap: 10px; align-items: center; } .fs-gr > div { display: grid; gap: 2px; } .fs-gr b { font-size: 14px; } .fs-gr span { font-size: 11.5px; color: var(--muted); }
.fs-m { display: grid; gap: 4px; } .fs-m > div { display: flex; justify-content: space-between; font-size: 13px; } .fs-m b.neg { color: var(--rose); } .fs-m b.pos { color: var(--good); }
.fs-m .tot { border-top: 1px solid var(--line); padding-top: 6px; font-weight: 600; } .fs-m .tot b { font-size: 17px; }
.fl-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px 20px; }
.fl-foot .sg-yes { --c: var(--accent); background: var(--accent); color: var(--bg); padding: 9px 18px; }
@media (max-width: 860px) { .ds-top { grid-template-columns: 1fr; } .ds-top .ds-map { min-height: 280px; } .cmd-act { grid-template-columns: 1fr 1fr; width: 100%; } .cmd-why { text-align: left; justify-self: start; } .fs-g { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .stepper span { display: none; } .stepper b { font-size: 11.5px; } }
.prep-done { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.pd { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); border-left: 3px solid var(--c); }
.pd i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; background: var(--good); color: var(--bg); font-weight: 700; }
.pd > div { display: grid; min-width: 0; } .pd b { font-size: 13.5px; } .pd span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* dispatch v3: fuel suppliers, departure strip, payload */
.sup-list { display: grid; gap: 8px; }
.sup { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 12px; align-items: center; text-align: left; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
.sup:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.sup.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.sup-r { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--muted); }
.sup.on .sup-r { border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--panel), inset 0 0 0 8px var(--accent); }
.sup-b { display: grid; gap: 2px; min-width: 0; } .sup-b b { font-size: 14px; } .sup-b span { font-size: 12px; color: var(--gold); } .sup-b em { font-style: normal; font-size: 12px; color: var(--muted); }
.sup-p { display: grid; justify-items: end; font-size: 17px; font-weight: 700; } .sup-p small { font-size: 11px; color: var(--muted); font-weight: 400; } .sup-p s { font-size: 11.5px; color: var(--muted); font-weight: 400; }
.sup-best { font-style: normal; font-family: var(--body); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--good); margin-top: 2px; }
.fneg { border: 1px dashed color-mix(in srgb, var(--gold) 50%, var(--line)); border-radius: 12px; padding: 0 14px; }
.fneg[open] { padding-bottom: 14px; border-style: solid; background: color-mix(in srgb, var(--gold) 5%, transparent); }
.fneg summary { list-style: none; display: flex; gap: 12px; align-items: center; padding: 12px 0; cursor: pointer; }
.fneg summary::-webkit-details-marker { display: none; }
.fneg summary > span:last-child { display: grid; gap: 2px; } .fneg summary b { font-size: 14px; } .fneg summary em { font-style: normal; font-size: 12px; color: var(--muted); }
.fneg-i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold); font-size: 15px; flex: none; }
.fneg .rt2-list { margin-bottom: 12px; }
.fneg .sg-yes { --c: var(--gold); background: var(--gold); color: var(--bg); }
.fneg-res { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); }
.fneg-res > div { display: grid; gap: 2px; } .fneg-res b { font-size: 14px; } .fneg-res span:not(.stamp) { font-size: 12px; color: var(--muted); }
.fneg-res.g-exceptional .stamp { --t: var(--teal); } .fneg-res.g-success .stamp { --t: var(--good); } .fneg-res.g-partial .stamp { --t: var(--gold); } .fneg-res.g-fail .stamp, .fneg-res.g-bad .stamp { --t: var(--rose); }
.dv { --dc: var(--accent); display: grid; gap: 16px; }
.dv.bad { --dc: var(--bad); }
.dv-ctx { display: flex; flex-wrap: wrap; gap: 8px; }
.dvc { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 5px 11px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--muted); }
.dvc i { font-style: normal; color: var(--ink); }
.dvc.tag { margin-left: auto; font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.dvc.tag.sug { color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); } .dvc.tag.you { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.dv-strip { display: grid; grid-template-columns: auto minmax(120px, 1fr) auto; gap: 8px 20px; align-items: start; padding: 22px 24px; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--dc) 13%, var(--panel)), color-mix(in srgb, var(--gold) 6%, var(--panel))); border: 1px solid color-mix(in srgb, var(--dc) 35%, var(--line)); position: relative; overflow: hidden; }
.dv-end { display: grid; gap: 2px; justify-items: start; } .dv-end.r { justify-items: end; text-align: right; }
.dv-lab { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dv-code { font-size: 15px; font-weight: 700; color: var(--gold); letter-spacing: .06em; }
.dv-time { font-size: 44px; line-height: 1.05; font-weight: 700; color: var(--ink); }
input.dv-time::-webkit-calendar-picker-indicator { display: none; }
.dv-dot { position: absolute; bottom: 14px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); } .dv-dot.l { left: 2px; } .dv-dot.r { right: 2px; }
input.dv-time { background: transparent; border: 0; border-bottom: 2px dashed color-mix(in srgb, var(--dc) 60%, transparent); padding: 0 2px; width: auto; max-width: 100%; color-scheme: dark; border-radius: 0; font-family: var(--mono); }
input.dv-time:hover:not(:disabled) { border-bottom-style: solid; }
input.dv-time:focus-visible { outline: none; border-bottom: 2px solid var(--dc); background: color-mix(in srgb, var(--dc) 10%, transparent); }
input.dv-date { background: transparent; border: 0; color: var(--ink); font: 600 13px var(--body); padding: 2px 0; color-scheme: dark; }
input.dv-date:focus-visible { outline: 2px solid var(--dc); outline-offset: 2px; border-radius: 4px; }
input:disabled.dv-time, input:disabled.dv-date { border-bottom-color: transparent; opacity: .9; }
.dv-date-t { font: 600 13px var(--body); padding: 2px 0; }
.dv-z { font-size: 11.5px; color: var(--muted); }
.dv-mid { position: relative; display: grid; justify-items: center; color: color-mix(in srgb, var(--gold) 75%, transparent); height: 80px; margin-top: 30px; }
.dv-mid svg { position: absolute; inset: 0 0 18px; width: 100%; height: calc(100% - 18px); fill: currentColor; }
.dv-plane { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); font-size: 20px; color: var(--gold); }
.dv-dur { position: absolute; bottom: 0; font-size: 12px; color: var(--ink); background: color-mix(in srgb, var(--panel) 80%, transparent); padding: 1px 8px; border-radius: 999px; }
.dv-pref { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--muted); padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); }
.dv-pref b { color: var(--ink); } .dv-star { font-size: 16px; } .dv-pref.hit { border-color: color-mix(in srgb, var(--gold) 50%, var(--line)); background: color-mix(in srgb, var(--gold) 8%, transparent); } .dv-pref.hit .dv-star { color: var(--gold); }
.dv-pref .linkbtn { margin-left: auto; }
.dv-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); } .dv-foot b { color: var(--ink); }
.wb2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 28px; }
.wb2-comp, .wb2-g { display: grid; gap: 14px; align-content: start; }
.wb2-head { display: flex; justify-content: space-between; align-items: end; gap: 10px; flex-wrap: wrap; } .wb2-head > div { display: grid; } .wb2-head b { font-size: 28px; } .wb2-head > span { font-size: 12.5px; color: var(--muted); }
.wb2-stack { display: flex; height: 16px; border-radius: 8px; overflow: hidden; gap: 2px; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.wb2-stack i { display: block; min-width: 3px; } .wb2-stack i.free { background: transparent; }
.wb2-items { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.wb2-it { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.wb2-it > i { width: 10px; height: 10px; border-radius: 3px; margin-top: 4px; }
.wb2-it > div { display: grid; min-width: 0; } .wb2-it b { font-size: 13px; } .wb2-it div span { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.wb2-it > .mono { font-size: 13.5px; font-weight: 600; }
.wb2-it.zero { opacity: .45; }
.sw { display: inline-flex; align-items: center; gap: 10px; justify-self: start; background: none; border: 0; color: var(--ink); font: 500 13px var(--body); cursor: pointer; padding: 4px 0; }
.sw i { width: 34px; height: 20px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 18%, transparent); position: relative; transition: background .15s; }
.sw i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); transition: transform .15s; }
.sw.on i { background: var(--good); } .sw.on i::after { transform: translateX(14px); background: var(--bg); }
.sw span { color: var(--muted); font-size: 12px; }
.sw:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.wb2-fl { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 4%, transparent); }
.wb2-fl > div { display: grid; } .wb2-fl b { font-size: 16px; } .wb2-fl .op { color: var(--muted); font-size: 16px; padding-bottom: 1px; }
.rings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ring { --rc: var(--good); display: grid; justify-items: center; text-align: center; gap: 3px; }
.ring.near { --rc: var(--gold); } .ring.over { --rc: var(--bad); }
.ring-c { width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--rc) calc(var(--p) * 1%), color-mix(in srgb, var(--ink) 9%, transparent) 0); margin-bottom: 4px; }
.ring-c > div { width: 84px; height: 84px; border-radius: 50%; background: var(--panel); display: grid; place-content: center; } .ring-c b { font-size: 17px; } .ring-c span { font-size: 10.5px; color: var(--muted); }
.ring-l { font-size: 13px; } .ring > span { font-size: 11.5px; color: var(--muted); }
.ring.over > span { color: var(--bad); font-weight: 600; }
.wb2-g .wb-row { grid-template-columns: 70px minmax(0, 1fr) auto; }
@media (max-width: 860px) { .wb2 { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .dv-strip { grid-template-columns: 1fr 1fr; padding: 16px; } .dv-mid { display: none; } .dv-time { font-size: 34px; } .wb2-items { grid-template-columns: 1fr; } .ring-c { width: 84px; height: 84px; } .ring-c > div { width: 66px; height: 66px; } .dvc.tag { margin-left: 0; } }
.fsl { display: grid; gap: 10px; padding: 16px; border-radius: 14px; border: 1px solid var(--line); background: color-mix(in srgb, var(--teal) 4%, transparent); }
.fsl-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fsl-top > div { display: grid; gap: 2px; } .fsl-top > div.r { justify-items: end; } .fsl-top b { font-size: 20px; }
.fsl-top > div:first-child b { color: var(--gold); }
.fsl-track { position: relative; height: 34px; margin-top: 34px; }
.fsl-track .fg-bar { position: absolute; left: 0; right: 0; top: 8px; height: 18px; border-radius: 9px; overflow: hidden; display: flex; }
.fsl-in { position: absolute; left: -8px; right: -8px; width: calc(100% + 16px); top: 0; height: 34px; margin: 0; background: transparent; appearance: none; -webkit-appearance: none; cursor: grab; }
.fsl-in::-webkit-slider-runnable-track { height: 34px; background: transparent; }
.fsl-in::-moz-range-track { height: 34px; background: transparent; }
.fsl-in::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 34px; border-radius: 6px; background: var(--ink); border: 3px solid var(--gold); box-shadow: 0 2px 8px rgba(0,0,0,.45); }
.fsl-in::-moz-range-thumb { width: 12px; height: 30px; border-radius: 6px; background: var(--ink); border: 3px solid var(--gold); }
.fsl-in:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--accent); outline-offset: 2px; }
.fsl-mk { position: absolute; top: -30px; transform: translateX(-50%); background: none; border: 0; padding: 0; cursor: pointer; display: grid; justify-items: center; z-index: 2; }
.fsl-mk::before { content: ""; width: 2px; height: 26px; background: var(--muted); position: absolute; top: 20px; left: 50%; transform: translateX(-50%); opacity: .7; pointer-events: none; }
.fsl-mk span { font-size: 11px; color: var(--muted); white-space: nowrap; padding: 2px 6px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); }
.fsl-mk:hover span { color: var(--ink); border-color: var(--gold); }
.fsl-mk.need::before { background: var(--ink); opacity: 1; } .fsl-mk.need span { color: var(--ink); }
.fsl-mk:last-of-type { transform: translateX(-90%); }
.fsl-scale { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); margin-top: 6px; }
.fsl-msg { margin: 0; font-size: 12.5px; color: var(--good); } .fsl-msg.bad { color: var(--bad); font-weight: 600; }
.fsl-go:disabled { opacity: .5; cursor: not-allowed; }
.prep-g { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 1.4fr); gap: 28px; }
.prep-l { display: grid; gap: 16px; align-content: start; }
.prep-sc { display: flex; align-items: center; gap: 14px; } .prep-sc > div { display: grid; gap: 6px; justify-items: start; }
.prep-sc .rep-score { font-size: 64px; color: var(--violet); }
.prep-next { font-size: 12.5px; color: var(--muted); }
.ptrack { position: relative; padding-top: 4px; }
.pt-bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.pt-seg { display: grid; gap: 4px; }
.pt-seg i { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--violet) calc(var(--f) * 100%), color-mix(in srgb, var(--ink) 10%, transparent) 0); }
.pt-seg em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--muted); } .pt-seg.on em { color: var(--ink); }
.pt-seg small { font: 10px var(--mono); color: var(--muted); margin-top: -3px; }
.pt-mk { position: absolute; top: 0; width: 4px; height: 16px; margin-left: -2px; border-radius: 2px; background: var(--ink); box-shadow: 0 0 0 2px var(--panel); }
.prep-spark { width: 100%; height: 70px; }
.sp-a { fill: color-mix(in srgb, var(--violet) 18%, transparent); } .sp-l { fill: none; stroke: var(--violet); stroke-width: 2; vector-effect: non-scaling-stroke; } .sp-d { fill: var(--violet); }
.prep-tot { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); } .prep-tot b { font-family: var(--mono); color: var(--ink); } .prep-tot b.pos { color: var(--good); } .prep-tot b.neg { color: var(--rose); }
.prep-r { display: grid; gap: 10px; align-content: start; min-width: 0; }
.hist.ph { display: grid; gap: 8px; max-height: 420px; overflow-y: auto; padding-right: 4px; }
.pev { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--line); border-left: 3px solid var(--good); }
.pev.dn { border-left-color: var(--rose); }
.pev-c { min-width: 42px; text-align: center; padding: 4px 6px; border-radius: 8px; font-weight: 700; font-size: 14px; background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good); }
.pev.dn .pev-c { background: color-mix(in srgb, var(--rose) 14%, transparent); color: var(--rose); }
.pev > div { display: grid; gap: 2px; min-width: 0; } .pev b { font-size: 13.5px; font-weight: 600; } .pev div span { font-size: 12px; color: var(--muted); }
@media (max-width: 860px) { .prep-g { grid-template-columns: 1fr; } }
.fuel-ok { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); }
.fuel-ok > div { display: grid; gap: 2px; } .fuel-ok b { font-size: 14px; } .fuel-ok span:not(.fo-i) { font-size: 12.5px; color: var(--muted); }
.fo-i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; background: color-mix(in srgb, var(--ink) 10%, transparent); }
.fuel-ok.ok { border-color: color-mix(in srgb, var(--good) 45%, var(--line)); background: color-mix(in srgb, var(--good) 7%, transparent); } .fuel-ok.ok .fo-i { background: var(--good); color: var(--bg); } .fuel-ok.ok b { color: var(--good); }
.fuel-ok.bad { border-color: color-mix(in srgb, var(--bad) 50%, var(--line)); background: color-mix(in srgb, var(--bad) 8%, transparent); } .fuel-ok.bad .fo-i { background: var(--bad); color: var(--bg); } .fuel-ok.bad b { color: var(--bad); }
.fuel-ok.todo { border-style: dashed; }
.cmd-reset { grid-column: 1 / -1; justify-self: end; background: none; border: 1px solid color-mix(in srgb, var(--bad) 40%, var(--line)); color: var(--bad); font: 600 12px var(--body); padding: 6px 12px; border-radius: 8px; cursor: pointer; }
.cmd-reset:hover { background: color-mix(in srgb, var(--bad) 10%, transparent); }
.cmd-reset.arm { background: var(--bad); color: var(--bg); border-color: var(--bad); animation: armp 1s ease-in-out infinite alternate; }
@keyframes armp { to { box-shadow: 0 0 0 4px color-mix(in srgb, var(--bad) 25%, transparent); } }
@media (prefers-reduced-motion: reduce) { .cmd-reset.arm { animation: none; } }
.ac-hgr { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line); --c: var(--accent); }
.ac-hgr > div { display: grid; gap: 2px; } .ac-hgr b { font-size: 15px; } .ac-hgr div span:last-child { font-size: 12.5px; color: var(--muted); }
.ac-hgr-i { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 20px; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.ac-hgr.in { border-color: color-mix(in srgb, var(--good) 45%, var(--line)); background: color-mix(in srgb, var(--good) 6%, transparent); } .ac-hgr.in .ac-hgr-i { background: var(--good); color: var(--bg); }
.ac-hgr .sg-yes { background: var(--accent); color: var(--bg); }
.fl-hgr em { font-style: normal; font-size: 12px; color: var(--muted); margin-left: 4px; } .fl-hgr em.own { color: var(--good); font-weight: 600; }
.fl-f .fl-hgr label.chk { grid-column: 1 / -1; }
.sb-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 18px; align-items: center; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line); background: color-mix(in srgb, var(--ink) 4%, transparent); }
.sb-bar.synced { border-color: color-mix(in srgb, var(--good) 40%, var(--line)); background: color-mix(in srgb, var(--good) 5%, transparent); }
.sb-id { display: flex; gap: 12px; align-items: center; min-width: 0; } .sb-id > div { display: grid; gap: 2px; min-width: 0; } .sb-id b { font-size: 13.5px; } .sb-id span:not(.sb-logo) { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); }
.sb-logo { flex: none; font: 700 12px var(--body); letter-spacing: .02em; padding: 6px 9px; border-radius: 8px; background: #1e2a3b; color: #fff; border: 1px solid #39506d; }
.sb-act { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.sb-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 9px; font: 700 13px var(--body); text-decoration: none; cursor: pointer; background: var(--accent); color: var(--bg); border: 1px solid var(--accent); white-space: nowrap; }
.sb-btn.ghost { background: transparent; color: var(--accent); }
.sb-btn:disabled { background: transparent; color: var(--muted); border-color: var(--line); cursor: not-allowed; }
.sb-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sc-ofp { display: grid; gap: 6px; border-top: 1px solid var(--line); padding-top: 10px; } .sc-ofp p { margin: 0; font-size: 12px; line-height: 1.5; word-break: break-word; color: var(--ink); }
.sc-ofp-k { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); } .sc-ofp-k b { color: var(--ink); font-family: var(--mono); font-weight: 600; }
.sbs { display: grid; gap: 12px; padding: 12px 22px 4px; }
.sbs-steps { margin: 0; padding-left: 22px; display: grid; gap: 16px; } .sbs-steps li { display: grid; gap: 6px; } .sbs-steps li::marker { font-weight: 700; color: var(--accent); }
.sbs-steps b { font-size: 14px; } .sbs-steps span { font-size: 12.5px; color: var(--muted); }
.sbs-row { display: flex; gap: 8px; } .sbs-row input, .sbs textarea { font: 500 14px var(--mono); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; min-width: 0; flex: 1; }
.sbs textarea { resize: vertical; font-size: 12px; }
.sbs-open { justify-self: start; text-decoration: none; background: var(--accent); color: var(--bg); }
.sbs-need { color: var(--gold) !important; }
.sbs-err { margin: 0; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--bad) 12%, transparent); color: var(--bad); font-size: 13px; font-weight: 600; }
#sb-sync[hidden], #fl-log[hidden] { display: none; }
/* ---------- Dashboard ---------- */
.dash { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.dash > * { min-width: 0; }
.dc { grid-column: span 4; display: grid; gap: 12px; align-content: start; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); position: relative; overflow: hidden; }
.dc::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--c, var(--accent)); opacity: .9; }
.dc.w7 { grid-column: span 7; } .dc.w5 { grid-column: span 5; } .dc.w12 { grid-column: 1 / -1; }
.dc-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dc-h h2 { margin: 0; font-family: var(--display); font-size: 19px; letter-spacing: .01em; display: flex; align-items: center; gap: 8px; }
.dc-h h2 i { font-style: normal; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: 12px; background: color-mix(in srgb, var(--c, var(--accent)) 16%, transparent); color: var(--c, var(--accent)); }
.dc-h .linkbtn { white-space: nowrap; }
.dc-empty { font-size: 13px; color: var(--muted); }
/* hero */
.dh { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px 28px; align-items: center; padding: 20px 22px; border-radius: 16px; border: 1px solid var(--line);
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--teal) 16%, var(--panel)) 0%, var(--panel) 55%), var(--panel); }
.dh-when { display: grid; gap: 4px; }
.dh-day { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); }
.dh-title { font-family: var(--display); font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: .01em; }
.dh-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.dh-stats > div { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--bg) 60%, transparent); border: 1px solid var(--line); border-top: 2px solid var(--c); }
.dh-stats b { font-family: var(--mono); font-size: 18px; font-weight: 500; } .dh-stats span { font-size: 11px; color: var(--muted); }
.dh-co { font-size: 13px; color: var(--muted); }
.dh-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--accent)); }
.chip.f-f { --c: var(--good); } .chip.f-t { --c: var(--gold); } .chip.f-vt, .chip.f-ex { --c: var(--bad); color: var(--bad); }
.dh-next { display: grid; gap: 8px; padding: 14px 16px; border-radius: 12px; background: color-mix(in srgb, var(--bg) 70%, transparent); border: 1px solid var(--line); }
.dh-next .label { color: var(--gold); }
.dh-next b { font-size: 16px; } .dh-next p { margin: 0; font-size: 13px; color: var(--muted); }
.dh-next .acts { display: flex; flex-wrap: wrap; gap: 8px; --c: var(--accent); }
.dh-next .acts a { text-decoration: none; }
.dc .sg-yes { --c: var(--accent); }
/* charter */
.dch-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 13px; color: var(--muted); }
.dch-top b { color: var(--ink); font-size: 15px; }
.dch-legs { display: flex; gap: 6px; } .dch-legs span { width: 26px; height: 6px; border-radius: 3px; background: var(--line); } .dch-legs span.done { background: var(--good); } .dch-legs span.cur { background: var(--accent); }
.dch-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
.dch-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.dch-facts div { display: grid; gap: 1px; } .dch-facts span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } .dch-facts b { font-family: var(--mono); font-size: 14px; font-weight: 500; }
.offers { display: grid; gap: 8px; }
.offer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); text-align: left; color: var(--ink); font: inherit; cursor: pointer; }
.offer:hover { border-color: var(--accent); }
.offer .o-r { font-family: var(--display); font-size: 16px; font-weight: 700; letter-spacing: .02em; }
.offer .o-c { grid-column: 1; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.offer .o-f { grid-row: 1 / span 2; grid-column: 2; font-family: var(--mono); font-size: 15px; color: var(--good); text-align: right; display: grid; gap: 2px; }
.offer .o-f small { font-family: var(--body); font-size: 11px; color: var(--muted); }
.offer .story { color: var(--violet); }
/* money */
.dm-cash { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dm-cash b { font-family: var(--mono); font-size: 30px; font-weight: 500; letter-spacing: -.02em; }
.dm-cash .neg { color: var(--bad); }
.spark { width: 100%; height: 64px; display: block; }
.spark .a { fill: color-mix(in srgb, var(--good) 14%, transparent); } .spark .l { fill: none; stroke: var(--good); stroke-width: 2; vector-effect: non-scaling-stroke; }
.dm-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; }
.dm-kv { display: grid; gap: 6px; font-size: 13px; } .dm-kv div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dashed var(--line); padding-bottom: 4px; } .dm-kv span { color: var(--muted); } .dm-kv b { font-family: var(--mono); font-weight: 500; }
/* ring */
.ring { position: relative; width: 84px; height: 84px; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring .t { fill: none; stroke: var(--line); stroke-width: 8; } .ring .v { fill: none; stroke: var(--c, var(--accent)); stroke-width: 8; stroke-linecap: round; }
.ring > div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.05; }
.ring > div b { font-family: var(--mono); font-size: 18px; font-weight: 500; } .ring > div span { font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.ring.sm { width: 64px; height: 64px; } .ring.sm > div b { font-size: 15px; }
/* aircraft */
.da-top { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; align-items: center; }
.da-pic { width: 110px; height: 72px; border-radius: 10px; overflow: hidden; background: var(--bg); border: 1px solid var(--line); }
.da-pic img, .da-pic svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.da-top b { font-size: 15px; } .da-top span { font-size: 12.5px; color: var(--muted); display: block; }
.st-pill { display: inline-block; margin-top: 4px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); }
.dmt { display: grid; gap: 8px; }
.dmt-r { display: grid; gap: 4px; font-size: 12.5px; } .dmt-r > div { display: flex; justify-content: space-between; gap: 8px; } .dmt-r em { font-style: normal; color: var(--muted); font-family: var(--mono); font-size: 12px; }
.bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; } .bar i { display: block; height: 100%; border-radius: 3px; background: var(--c, var(--good)); }
.t-mid { --c: var(--gold); } .t-bad { --c: var(--bad); } .t-good, .t-lo { --c: var(--good); }
/* tasks */
.dt-counts { display: flex; gap: 8px; flex-wrap: wrap; }
.dt { display: grid; gap: 6px; }
.dt-r { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 9px; background: var(--bg); border: 1px solid var(--line); text-align: left; color: var(--ink); font: inherit; cursor: pointer; }
.dt-r:hover { border-color: var(--c); }
.dt-r i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.dt-r b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dt-r span { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.dt-r.urgent span { color: var(--gold); font-weight: 600; }
/* standing */
.ds-reps { display: flex; gap: 16px; flex-wrap: wrap; }
.ds-rep { display: flex; gap: 10px; align-items: center; } .ds-rep b { display: block; font-size: 13.5px; } .ds-rep span { font-size: 12px; color: var(--muted); }
.deal { display: grid; gap: 5px; font-size: 12.5px; } .deal > div { display: flex; justify-content: space-between; gap: 8px; } .deal em { font-style: normal; color: var(--muted); }
/* activity */
.act { display: grid; gap: 0; }
.act-r { display: grid; grid-template-columns: 136px 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.act-r:first-child { border-top: 0; }
.act-r .w { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.act-r .ic { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font-size: 12px; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); }
.act-r .tx { min-width: 0; } .act-r .tx b { font-weight: 600; } .act-r .tx span { color: var(--muted); }
.act-r .am { font-family: var(--mono); font-size: 12.5px; } .act-r .am.pos { color: var(--good); } .act-r .am.neg { color: var(--bad); }
@media (max-width: 1000px) { .dc, .dc.w7, .dc.w5 { grid-column: span 6; } .dc.w12 { grid-column: 1 / -1; } }
@media (max-width: 720px) {
  .dash { gap: 12px; } .dc, .dc.w7, .dc.w5 { grid-column: 1 / -1; padding: 14px; }
  .dh { grid-template-columns: 1fr; padding: 16px; } .dh-title { font-size: 24px; } .dh-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dch-grid { grid-template-columns: 1fr; }
  .act-r { grid-template-columns: 26px minmax(0, 1fr) auto; } .act-r .w { grid-column: 2 / -1; grid-row: 2; }
}

#rv[hidden], #ses[hidden] { display: none; }
.hses { display: grid; gap: 2px; justify-items: start; } .ses-btn { margin-top: 4px; --c: var(--gold); border-color: color-mix(in srgb, var(--gold) 50%, var(--line)); background: color-mix(in srgb, var(--gold) 14%, transparent); }
.ses-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 0; }
@media (max-width: 640px) { .ses-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rv { display: grid; gap: 14px; padding: 12px 22px 6px; }
.rv-top { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 12px; align-items: stretch; }
.rv-g { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); }
.rv-gl { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 700 22px var(--display); border: 3px solid var(--c, var(--line)); color: var(--c, var(--muted)); background: color-mix(in srgb, var(--c, transparent) 12%, transparent); }
.rv-g.gA, .rv-g.gB { --c: var(--good); } .rv-g.gC { --c: var(--warn); } .rv-g.gD, .rv-g.gF { --c: var(--bad); }
.rv-g b { display: block; font-size: 13.5px; } .rv-g div span { font-size: 12px; color: var(--muted); font-family: var(--mono); }
.rv-net { display: grid; align-content: center; justify-items: end; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--good) 12%, var(--bg)); border: 1px solid color-mix(in srgb, var(--good) 35%, var(--line)); }
.rv-net.neg { background: color-mix(in srgb, var(--bad) 12%, var(--bg)); border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); }
.rv-net span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } .rv-net b { font-family: var(--mono); font-size: 24px; font-weight: 500; }
.rv-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rv-s { display: grid; gap: 8px; align-content: start; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); min-width: 0; }
.rv-s h3 { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.rv-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; margin: 0; }
.rv-stats div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dashed var(--line); padding-bottom: 3px; font-size: 12.5px; } .rv-stats dt { color: var(--muted); } .rv-stats dd { margin: 0; font-family: var(--mono); }
.rv-money { display: grid; gap: 5px; font-size: 13px; } .rv-money div { display: flex; justify-content: space-between; gap: 10px; } .rv-money span { color: var(--muted); } .rv-money b { font-family: var(--mono); font-weight: 500; }
.rv-money .pos { color: var(--good); } .rv-money .neg { color: var(--bad); } .rv-money .tot { border-top: 1px solid var(--line); padding-top: 6px; margin-top: 2px; } .rv-money .tot span { color: var(--ink); font-weight: 700; }
.rv-rep { display: grid; gap: 6px; } .rv-rep > div { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 12.5px; }
.rv-d { font-family: var(--mono); font-weight: 700; text-align: center; padding: 2px 0; border-radius: 6px; } .up .rv-d { color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); } .down .rv-d { color: var(--bad); background: color-mix(in srgb, var(--bad) 14%, transparent); }
.rv-rep em { font-style: normal; font-size: 11px; color: var(--muted); white-space: nowrap; }
.rv-note { margin: 0; font-size: 12.5px; color: var(--muted); }
.lc-side .rvbtn { --c: var(--accent); }
@media (max-width: 640px) { .rv { padding: 10px 14px 4px; } .rv-top { grid-template-columns: 1fr 1fr; } .rv-net { grid-column: 1 / -1; justify-items: start; } .rv-cols { grid-template-columns: 1fr; } .rv-stats { grid-template-columns: 1fr; } }

/* ---------- News ---------- */
#view-news { --paper: #f1ebdd; --pink: #1b1813; --pmuted: #5f574a; --prule: #2a251d; --pline: #cfc4ad; --pacc: #8a1c1c; }
.nx-tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.nx-tabs button { appearance: none; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font: 600 13px var(--body); padding: 7px 16px; border-radius: 999px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.nx-tabs button.on { color: var(--ink); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.nx-tabs b { background: var(--gold); color: #1a1407; border-radius: 999px; padding: 0 7px; font-size: 11px; }
.paper { background: var(--paper); color: var(--pink); border-radius: 6px; padding: 22px max(16px, 3vw) 28px; box-shadow: 0 1px 0 rgba(0,0,0,.2), 0 14px 40px rgba(0,0,0,.35); font-family: "Source Serif 4", Georgia, "Times New Roman", serif; }
.nx-mast { text-align: center; border-bottom: 4px double var(--prule); padding-bottom: 10px; margin-bottom: 18px; }
.nx-meta { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font: 600 11px var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--pmuted); border-bottom: 1px solid var(--prule); padding-bottom: 6px; }
.nx-mast h2 { font-family: "Playfair Display", Georgia, serif; font-weight: 900; font-size: clamp(30px, 5.4vw, 58px); line-height: 1; margin: 12px 0 4px; letter-spacing: -.01em; color: var(--pink); }
.nx-motto { margin: 0; font-style: italic; font-size: 14px; color: var(--pmuted); }
.nx-grid { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: 0 28px; border-bottom: 1px solid var(--prule); padding-bottom: 18px; margin-bottom: 18px; }
.nx-art { min-width: 0; }
.nx-kicker { display: block; font: 700 11px var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--pacc); margin-bottom: 4px; }
.nx-art h3 { font-family: "Playfair Display", Georgia, serif; font-weight: 800; font-size: 22px; line-height: 1.15; margin: 0 0 6px; text-wrap: balance; color: var(--pink); }
.nx-art.lead h3 { font-size: clamp(26px, 3.4vw, 40px); }
.nx-dek { margin: 0 0 10px; font-size: 16px; font-style: italic; color: var(--pmuted); line-height: 1.4; }
.nx-body p { margin: 0 0 10px; font-size: 15px; line-height: 1.55; hyphens: auto; }
.nx-art.lead .nx-body { column-count: 2; column-gap: 24px; column-rule: 1px solid var(--pline); }
.nx-art.lead .nx-body p:first-child::first-letter { float: left; font-family: "Playfair Display", Georgia, serif; font-size: 52px; line-height: .85; padding: 4px 6px 0 0; font-weight: 900; }
.nx-impact { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px dotted var(--pline); font-family: var(--body); }
.nx-impact > span:first-child { font: 700 10.5px var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--pmuted); }
.nx-impact em { font-size: 12.5px; color: var(--pmuted); }
.nx-fx { display: inline-flex; gap: 4px; align-items: center; font: 600 12px var(--body); padding: 3px 9px; border-radius: 3px; border: 1px solid currentColor; }
.nx-fx.good { color: #1f6b3a; } .nx-fx.bad { color: #9b1c1c; }
.nx-side { border-left: 1px solid var(--prule); padding-left: 22px; display: grid; align-content: start; gap: 10px; font-family: var(--body); }
.nx-side h4 { margin: 0; font: 700 12px var(--body); letter-spacing: .12em; text-transform: uppercase; border-bottom: 2px solid var(--prule); padding-bottom: 4px; color: var(--pink); }
.nx-side ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; } .nx-side li { display: grid; gap: 2px; } .nx-side small { color: var(--pmuted); font-size: 11.5px; }
.nx-brief b { font-family: "Playfair Display", Georgia, serif; font-size: 15px; font-weight: 700; line-height: 1.2; }
.nx-quiet { margin: 0; font-size: 13.5px; color: var(--pmuted); font-style: italic; } .nx-pad { padding: 20px 0; text-align: center; }
.nx-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0; }
.nx-cols .nx-art { padding: 0 18px; border-left: 1px solid var(--pline); } .nx-cols .nx-art:first-child { border-left: 0; padding-left: 0; }
.ev-wrap { display: grid; gap: 14px; }
.evt { position: relative; display: grid; gap: 10px; padding: 18px 20px; border: 1px solid var(--line); border-left: 4px solid var(--c); border-radius: 12px; background: var(--panel); }
.evt.closed { opacity: .85; }
.evt .nx-kicker { color: var(--gold); } .evt .nx-kicker b { color: var(--ink); font-weight: 600; letter-spacing: .04em; text-transform: none; }
.evt h3 { margin: 0; font-family: var(--display); font-size: 26px; letter-spacing: .01em; text-wrap: balance; }
.evt { background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--gold) 9%, var(--panel)) 0%, var(--panel) 55%); }
.ev-body p { margin: 0 0 8px; font-size: 14px; line-height: 1.55; color: var(--ink); max-width: 75ch; }
.ev-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.ev-o { appearance: none; display: grid; gap: 4px; text-align: left; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; cursor: pointer; }
.ev-o:hover:not(:disabled) { border-color: var(--gold); } .ev-o:disabled { opacity: .5; cursor: progress; }
.ev-o b { font-size: 14px; } .ev-o span { font-size: 12.5px; color: var(--muted); } .ev-o em { font-style: normal; font-size: 11.5px; color: var(--gold); font-family: var(--mono); }
.ev-res { display: grid; gap: 6px; padding: 10px 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); } .ev-res p { margin: 0; font-size: 13.5px; }
.ev-fx { display: flex; flex-wrap: wrap; gap: 6px; }
.ses-steps { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
@media (max-width: 760px) { .nx-grid { grid-template-columns: 1fr; } .nx-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--prule); padding-top: 12px; margin-top: 12px; } .nx-art.lead .nx-body { column-count: 1; } .nx-cols .nx-art { padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--pline); margin-top: 14px; } .nx-cols .nx-art:first-child { border-top: 0; margin-top: 0; } }

/* FSReborn import */
#fr-imp[hidden] { display: none; }
.ac-sync { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 14px; border-radius: 10px; border: 1px dashed var(--line); background: color-mix(in srgb, var(--accent) 5%, var(--bg)); }
.ac-sync.ok { border-style: solid; }
.ac-sync-i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-weight: 700; flex: none; }
.ac-sync > div { display: grid; gap: 1px; flex: 1 1 220px; min-width: 0; font-size: 12.5px; color: var(--muted); }
.ac-sync b { color: var(--ink); font-size: 13.5px; }
.fr { display: grid; gap: 14px; padding: 12px 22px 6px; }
.fr-src { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.fr-card { display: grid; gap: 8px; align-content: start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.fr-card > b { font-size: 14px; } .fr-card > span { font-size: 12.5px; color: var(--muted); }
.fr-drop { position: relative; display: grid; place-items: center; gap: 4px; min-height: 92px; padding: 12px; border: 2px dashed var(--line); border-radius: 10px; text-align: center; font-size: 12.5px; color: var(--muted); cursor: pointer; transition: border-color .15s, background .15s; }
.fr-drop:hover, .fr-drop.over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.fr-drop b { color: var(--accent); font-size: 13.5px; }
.fr-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.fr-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.fr-thumbs figure { position: relative; margin: 0; width: 92px; height: 60px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: var(--panel); }
.fr-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fr-thumbs button { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgba(0,0,0,.65); color: #fff; font: 700 12px/1 var(--body); cursor: pointer; }
.fr textarea { font: 500 12.5px var(--mono); color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; resize: vertical; min-height: 92px; }
.fr-tip { margin: 0; font-size: 12.5px; color: var(--muted); }
.fr-busy { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 10px; background: var(--bg); font-size: 13px; color: var(--muted); }
.fr-busy i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); animation: frspin .8s linear infinite; flex: none; }
@keyframes frspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fr-busy i { animation: none; } }
.fr-grp { display: grid; gap: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.fr-grp > h3 { margin: 0; padding: 8px 12px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); background: var(--bg); border-bottom: 1px solid var(--line); }
.fr-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 12px; border-top: 1px solid var(--line); font-size: 13px; }
.fr-grp > h3 + .fr-row { border-top: 0; }
.fr-row input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--accent); }
.fr-row .fr-n { display: grid; gap: 1px; min-width: 0; } .fr-row .fr-n span { font-size: 11.5px; color: var(--muted); }
.fr-row .fr-v { font-family: var(--mono); font-size: 12.5px; text-align: right; white-space: nowrap; }
.fr-row .fr-v s { color: var(--muted); text-decoration-thickness: 1px; } .fr-row .fr-v em { font-style: normal; color: var(--accent); font-weight: 700; }
.fr-row.same { opacity: .55; }
.fr-imp-note { margin: 0; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--gold) 12%, transparent); font-size: 12.5px; }
.fr-done { display: grid; gap: 10px; }
.fr-done ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; }
.wear { display: grid; gap: 8px; }
.wear-r { display: grid; grid-template-columns: minmax(0, 1fr) 110px 52px; gap: 10px; align-items: center; font-size: 13px; }
.wear-r span { min-width: 0; } .wear-r em { font-style: normal; font-size: 11.5px; color: var(--muted); display: block; }
.wear-b { height: 7px; border-radius: 4px; background: var(--line); overflow: hidden; } .wear-b i { display: block; height: 100%; background: var(--t, var(--good)); border-radius: 4px; }
.wear-r.t-mid { --t: var(--gold); } .wear-r.t-bad { --t: var(--rose); }
.wear-r b { font-family: var(--mono); text-align: right; }
@media (max-width: 560px) { .wear-r { grid-template-columns: minmax(0, 1fr) 70px 46px; } .fr-row { grid-template-columns: auto minmax(0, 1fr); } .fr-row .fr-v { grid-column: 2; text-align: left; } }

@media (max-width: 760px) { .sb-bar { grid-template-columns: 1fr; } .sb-act { justify-content: flex-start; } }
.fsl-src { margin: 0; font-size: 12px; color: var(--muted); } .fsl-src b { color: var(--ink); font-family: var(--mono); }
/* finances */
#fin { display: grid; gap: 16px; }
.fin-kpis { display: grid; grid-template-columns: 1.2fr repeat(3, minmax(0, 1fr)); gap: 12px; }
.fk { display: grid; gap: 3px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); min-width: 0; }
.fk b { font-size: 22px; } .fk > span:last-child { font-size: 12px; color: var(--muted); }
.fk.big { background: linear-gradient(135deg, color-mix(in srgb, var(--good) 14%, var(--panel)), var(--panel)); border-color: color-mix(in srgb, var(--good) 35%, var(--line)); } .fk.big b { font-size: 32px; color: var(--good); }
#fin .pos { color: var(--good); } #fin .neg { color: var(--rose); }
.fin-g { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 16px; }
.fin-g > .panel { display: grid; gap: 12px; align-content: start; }
.fin-chart { width: 100%; height: 220px; }
.fc-grid line { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; } .fc-grid text { fill: var(--muted); font: 10px var(--mono); }
.fc-a { fill: color-mix(in srgb, var(--good) 14%, transparent); } .fc-l { fill: none; stroke: var(--good); stroke-width: 2; vector-effect: non-scaling-stroke; }
.fin-chart circle { vector-effect: non-scaling-stroke; } .fin-chart circle.up { fill: var(--good); } .fin-chart circle.dn { fill: var(--rose); }
.fin-goal { justify-items: center; } .fin-goal .panel-head { justify-self: stretch; }
.fg-ring { width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--gold) calc(var(--p) * 1%), color-mix(in srgb, var(--ink) 9%, transparent) 0); }
.fg-ring > div { width: 120px; height: 120px; border-radius: 50%; background: var(--panel); display: grid; place-content: center; text-align: center; } .fg-ring b { font-size: 26px; color: var(--gold); } .fg-ring span { font-size: 11px; color: var(--muted); }
.fin-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; width: 100%; } .fin-kv > div { display: grid; gap: 1px; } .fin-kv span { font-size: 11.5px; color: var(--muted); } .fin-kv b { font-size: 15px; } .fin-kv small { font-size: 11px; color: var(--muted); font-weight: 400; }
.fin-bars { display: grid; gap: 6px; }
.fb { display: grid; grid-template-columns: 170px minmax(0, 1fr) 90px 40px; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 8px; border: 1px solid transparent; background: none; color: var(--ink); font: inherit; cursor: pointer; text-align: left; }
.fb:hover, .fb.on { border-color: var(--line); background: color-mix(in srgb, var(--c) 8%, transparent); }
.fb-n { font-size: 13px; } .fb-t { height: 10px; border-radius: 5px; background: color-mix(in srgb, var(--ink) 7%, transparent); overflow: hidden; } .fb-t i { display: block; height: 100%; background: var(--c); border-radius: 5px; }
.fb b { text-align: right; font-size: 13.5px; } .fb-p { font-size: 11.5px; color: var(--muted); text-align: right; }
.loan-bar { height: 12px; border-radius: 6px; background: color-mix(in srgb, var(--good) 25%, transparent); overflow: hidden; } .loan-bar i { display: block; height: 100%; background: var(--rose); }
.fin-oh { display: grid; gap: 6px; } .fin-oh > div { display: grid; grid-template-columns: minmax(0, 1fr) 80px auto; gap: 10px; align-items: center; font-size: 13px; }
.fo-t { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 7%, transparent); overflow: hidden; } .fo-t i { display: block; height: 100%; background: var(--accent); }
.fin-legs { display: grid; gap: 6px; } .flr { display: grid; grid-template-columns: 120px 110px minmax(0, 1fr) 100px; gap: 10px; align-items: center; font-size: 13px; }
.flr-d { color: var(--muted); font-size: 12px; } .flr-b { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 6%, transparent); overflow: hidden; } .flr-b i { display: block; height: 100%; } .flr-b i.pos { background: var(--good); } .flr-b i.neg { background: var(--rose); } .flr b { text-align: right; }
.fin-filt { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.fin-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.fc { --c: var(--accent); display: inline-flex; gap: 6px; align-items: center; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); font: 600 12px var(--body); cursor: pointer; }
.fc i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); } .fc.on { color: var(--ink); border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.fin-q { font: 13px var(--body); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; min-width: 200px; color-scheme: dark; }
.tx { display: grid; }
.txr { display: grid; grid-template-columns: 4px minmax(0, 1fr) auto 100px; gap: 12px; align-items: center; padding: 9px 4px; border-bottom: 1px solid var(--line); }
.txr > i { align-self: stretch; border-radius: 2px; background: var(--c); } .txr > div { display: grid; gap: 1px; min-width: 0; } .txr div b { font-size: 13.5px; font-weight: 600; } .txr div span { font-size: 11.5px; color: var(--muted); }
.txr > b { font-size: 14px; } .txb { font-size: 12px; color: var(--muted); text-align: right; }
@media (max-width: 900px) { .fin-kpis { grid-template-columns: 1fr 1fr; } .fin-g { grid-template-columns: 1fr; } .fb { grid-template-columns: 120px minmax(0, 1fr) 80px; } .fb-p { display: none; } .flr { grid-template-columns: 1fr auto; } .flr-d, .flr-b { display: none; } .txr { grid-template-columns: 4px minmax(0, 1fr) auto; } .txb { display: none; } }
/* company */
#firm-view { display: grid; gap: 16px; --k: var(--accent); --c: var(--accent); }
#view-firm { display: grid; gap: 16px; } #view-firm[hidden] { display: none; }
.fm-brand { grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.fm-id { display: grid; gap: 4px; } .fm-id h2 { margin: 0; font: 700 30px/1.1 var(--display); }
.fm-sub { font-size: 12.5px; color: var(--muted); margin: 0; }
.fm-name-edit { display: flex; gap: 8px; flex-wrap: wrap; }
.fm-name-edit input { font: 600 20px var(--display); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; min-width: 0; width: min(360px, 100%); }
#firm-view .sg-yes { background: var(--c); color: var(--bg); }
.fm-net > div { display: grid; gap: 2px; justify-items: end; } .fm-net b { font-size: 24px; } .fm-net b.pos { color: var(--good); } .fm-net b.neg { color: var(--bad); }
.fm-list { display: grid; }
.fm-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.fm-row > div { display: grid; min-width: 0; } .fm-row b { font-size: 13.5px; } .fm-row div span { font-size: 12px; color: var(--muted); }
.fm-row.neg > .mono { color: var(--bad); } .fm-row.tot { border-bottom: 0; border-top: 1px solid var(--ink); } .fm-row.tot > .mono { font-weight: 700; }
.fm-hubs { display: grid; gap: 12px; }
.fm-hub { display: grid; gap: 10px; padding: 14px; border-radius: 12px; border: 1px solid var(--line); }
.fm-hub.out { border-style: dashed; }
.fm-hub-h { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.fm-hub-h > div:first-child { display: grid; } .fm-hub-h b { font-size: 17px; }
.fm-q { display: inline-flex; gap: 3px; align-items: center; } .fm-q i { width: 14px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 14%, transparent); } .fm-q i.on { background: var(--gold); }
.fm-q span { margin-left: 8px; font-size: 12.5px; color: var(--gold); font-weight: 600; }
.fm-q.sm i { width: 10px; height: 4px; }
.fm-ups, .fm-svcs { display: grid; gap: 8px; }
.fm-up, .fm-svc { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); }
.fm-up > div, .fm-svc > div { display: grid; gap: 3px; min-width: 0; }
.fm-up b, .fm-svc b { font-size: 13.5px; } .fm-up span, .fm-svc span { font-size: 12.5px; color: var(--muted); }
.fm-cost { color: var(--ink) !important; font-family: var(--mono); font-size: 12px !important; }
.fm-up.have, .fm-svc.on { border-color: color-mix(in srgb, var(--good) 40%, var(--line)); background: color-mix(in srgb, var(--good) 5%, transparent); }
.fm-up.locked, .fm-svc.locked { opacity: .65; }
.fm-lock { font-size: 12px !important; color: var(--muted); white-space: normal; max-width: 220px; text-align: right; }
.fm-mk { display: grid; gap: 8px; }
.fm-m { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: center; text-align: left; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
.fm-m:disabled { opacity: .6; cursor: default; }
.fm-m-b { display: grid; gap: 3px; min-width: 0; } .fm-m-b b { font-size: 14px; } .fm-m-b span { font-size: 12.5px; color: var(--muted); }
.fm-m-c { font-size: 14px; white-space: nowrap; } .fm-m-c small { font-size: 11px; color: var(--muted); margin-left: 2px; }
.fm-m.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.fm-m .rt2-radio { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--muted); display: inline-block; }
.fm-m.on .rt2-radio { border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--panel), inset 0 0 0 8px var(--accent); }
@media (max-width: 640px) { .fm-brand { grid-template-columns: 1fr; } .fm-net > div { justify-items: start; } .fm-up, .fm-svc { grid-template-columns: 1fr; } .fm-lock { text-align: left; } }
/* aircraft */
#ac-view, #ac-flights, #view-aircraft { display: grid; gap: 16px; } #view-aircraft[hidden] { display: none; }
.ac-hero { grid-template-columns: minmax(0, 1.4fr) auto; gap: 16px 24px; align-items: start; }
.ac-id h2 { margin: 2px 0; font: 700 30px/1.1 var(--display); }
.ac-reg { font-size: 13px; color: var(--muted); }
.ac-status { display: grid; gap: 2px; padding: 10px 16px; border-radius: 10px; border: 1px solid var(--line); justify-items: start; }
.ac-status b { font: 700 18px var(--display); letter-spacing: .04em; text-transform: uppercase; }
.ac-status span:last-child { font-size: 12.5px; color: var(--muted); }
.ac-status.s-good { border-color: color-mix(in srgb, var(--good) 50%, var(--line)); } .ac-status.s-good b { color: var(--good); }
.ac-status.s-mid { border-color: color-mix(in srgb, var(--gold) 50%, var(--line)); } .ac-status.s-mid b { color: var(--gold); }
.ac-status.s-bad { border-color: color-mix(in srgb, var(--rose) 50%, var(--line)); } .ac-status.s-bad b { color: var(--rose); }
.ac-nums { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.ac-nums > div { display: grid; gap: 2px; padding: 10px 12px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); }
.ac-nums b { font-size: 18px; }
.ac-note { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--muted); }
.ac-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
.mt { display: grid; gap: 4px; }
.mt-row { --t: var(--good); position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 120px 150px; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.mt-row:first-child { border-top: 0; }
.mt-row.t-mid { --t: var(--gold); } .mt-row.t-bad { --t: var(--rose); } .mt-row.t-lo { --t: var(--muted); }
.mt-n { display: grid; gap: 2px; } .mt-n b { font-size: 14px; } .mt-n span { font-size: 12px; color: var(--muted); }
.mt-bar { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--muted) 20%, transparent); overflow: hidden; }
.mt-bar i { display: block; height: 100%; background: var(--t); }
.mt-s { display: grid; justify-items: end; text-align: right; } .mt-s b { font-size: 13px; color: var(--t); } .mt-s span { font-size: 11.5px; color: var(--muted); }
.mt-ph2 { font-style: normal; color: var(--gold); opacity: .8; }
.mt-ph { position: absolute; top: 4px; right: 0; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.df { display: grid; gap: 8px; }
.df-row { display: flex; gap: 10px; padding: 10px 12px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line)); background: color-mix(in srgb, var(--warn) 7%, transparent); }
.df-row.gr { border-color: var(--rose); background: color-mix(in srgb, var(--rose) 9%, transparent); }
.df-row i { font-style: normal; color: var(--warn); } .df-row > div { display: grid; gap: 2px; }
.df-row b { font-size: 14px; } .df-row span { font-size: 12.5px; color: var(--muted); }
.df-m { font-size: 11.5px !important; }
.perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; } .perks li { color: var(--gold); }
.spec { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.spec dt { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } .spec dd { margin: 0; font-size: 14px; }
.eng { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.eng > div { display: grid; gap: 2px; padding: 10px 12px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); font-size: 13px; }
.techlog { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.techlog li { display: grid; grid-template-columns: 130px 1fr; gap: 10px; } .techlog .mono { font-size: 12px; color: var(--muted); }
@media (max-width: 640px) { .ac-hero { grid-template-columns: 1fr; } .mt-row { grid-template-columns: 1fr; gap: 6px; } .mt-s { justify-items: start; text-align: left; } .techlog li { grid-template-columns: 1fr; gap: 0; } .hclock b { font-size: 26px; } }

/* skill routes and negotiation */
.tkr { grid-column: 1 / -1; grid-template-columns: 1fr; display: grid; gap: 8px; padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--bg) 55%, var(--panel)); border: 1px solid var(--line); }
.tkr-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.rt { appearance: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; display: grid; gap: 2px; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); }
.rt b { font-size: 13.5px; } .rt span { font-size: 12px; color: var(--muted); } .rt em { font-style: normal; font-size: 12px; color: var(--good); font-weight: 600; }
.rt:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.rt.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel)); box-shadow: 0 0 0 1px var(--accent) inset; }
.tkr-odds { grid-column: 1 / -1; padding: 4px 14px 2px; }
.tkr-odds .odds { border-top: 0; padding-top: 0; }
.tk-mini { font-size: 12px; color: var(--muted); }
.ng-tog { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.ng-tog input { margin-top: 3px; accent-color: var(--gold); width: 16px; height: 16px; flex: none; }
.ng-tog b { color: var(--ink); display: block; font-size: 13.5px; }
.nego { border-color: color-mix(in srgb, var(--gold) 40%, var(--line)); }
.nego .tkr-odds { padding: 0; }
.ng-scale { display: block; margin-top: 6px; font-size: 11.5px; color: var(--muted); }
.db-nego { border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.db-nego .db-text b { white-space: nowrap; }
/* aircraft picker and map */
.ac-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ac-p { appearance: none; font: inherit; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); text-align: left; }
.ac-p svg { width: 22px; height: 22px; fill: var(--muted); }
.ac-p span { display: grid; } .ac-p b { font-size: 14px; } .ac-p em { font-style: normal; font-size: 12px; color: var(--muted); }
.ac-p.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel)); } .ac-p.on svg { fill: var(--accent); }
.ac-pick-n { margin-left: auto; font-size: 12px; color: var(--muted); }
.ac-hero { grid-template-columns: minmax(0, 1fr) auto; }
.ac-media { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ac-mapwrap, .ac-photo { display: grid; gap: 6px; align-content: start; min-width: 0; }
.ac-map, .ac-ph { height: 220px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.ac-ph { position: relative; background: linear-gradient(180deg, #16263a 0%, #0f1c2b 62%, #0b141e 62%, #0a1118 100%); }
.ac-ph img, .ac-ph svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.ac-ph-act { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 6px; }
.ac-ph-act label, .ac-ph-act button { font: 600 12px var(--body); color: var(--ink); background: color-mix(in srgb, var(--bg) 70%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); border-radius: 8px; padding: 5px 10px; cursor: pointer; backdrop-filter: blur(4px); }
.ac-ph-act label:hover, .ac-ph-act button:hover { border-color: var(--accent); }
.ac-ph-act input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ac-map-l { font-size: 12px; color: var(--muted); font-family: var(--mono); }
.ac-nums { grid-column: 1 / -1; } .ac-note { grid-column: 1 / -1; }
.df-fix { margin: 8px 0 0; justify-self: start; --k: var(--warn); }
.mt-act { justify-self: start; font-size: 12px; margin-top: 2px; }
@media (max-width: 760px) { .ac-media { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .ac-hero { grid-template-columns: 1fr; } .ac-pick-n { margin-left: 0; } }

.rt-mods { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 2px; }
.rt-mods i { font-style: normal; font-size: 11px; padding: 2px 6px; border-radius: 5px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.rt-mods i b { font-family: var(--mono); font-weight: 700; }
.rt-mods .m-dn { color: var(--rose); border-color: color-mix(in srgb, var(--rose) 45%, var(--line)); background: color-mix(in srgb, var(--rose) 8%, transparent); }
.rt-mods .m-up { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, var(--line)); background: color-mix(in srgb, var(--good) 8%, transparent); }
.rt-mods .m-tot { border-style: dashed; }
.rt-why { font-size: 11.5px !important; color: var(--rose) !important; }
.rt-next { font-size: 11.5px !important; color: var(--violet) !important; }
.rt-key { grid-column: 1 / -1; margin: 2px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.rt-key b { color: var(--ink); font-weight: 600; }

/* skill choice list */
.rt2-hd { display: flex; justify-content: space-between; align-items: baseline; }
.rt2-cap { font-size: 11px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.rt2-list { display: grid; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel); }
.rt2 { appearance: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; display: grid; grid-template-columns: 20px minmax(0, 1fr) 150px; gap: 14px; align-items: center; padding: 12px 14px; border: 0; background: transparent; }
.rt2 + .rt2 { border-top: 1px solid var(--line); }
.rt2:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.rt2.on { background: color-mix(in srgb, var(--accent) 10%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.rt2:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.rt2-radio { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--muted); box-sizing: border-box; }
.rt2.on .rt2-radio { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 4px, transparent 4.5px); }
.rt2-main { display: grid; gap: 4px; min-width: 0; }
.rt2-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rt2-top b { font-size: 14px; font-weight: 600; }
.rt2 .pips { display: inline-flex; gap: 2px; }
.rt2 .pips i { width: 6px; height: 6px; border-radius: 1.5px; background: color-mix(in srgb, var(--muted) 30%, transparent); }
.rt2 .pips i.on { background: var(--accent); }
.rt2-lvl { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fit { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; border: 1px solid; }
.fit.main { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.fit.ok { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, transparent); }
.fit.poor { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.rt2-how { font-size: 12.5px; color: var(--muted); }
.rt2-how em { font-style: normal; color: var(--warn); }
.rt2-odds { display: grid; justify-items: end; gap: 4px; }
.rt2-pct { font: 700 20px/1 var(--body); font-variant-numeric: tabular-nums; } .rt2-pct small { font-size: 12px; color: var(--muted); margin-left: 1px; }
.rt2-bar { width: 100%; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--muted) 20%, transparent); overflow: hidden; }
.rt2-bar i { display: block; height: 100%; border-radius: 3px; background: var(--good); }
.rt2.on .rt2-bar i { background: var(--accent); }
.rt2-next { font-size: 11px; color: var(--violet); }
.rt2-flat { color: var(--violet); }
.rt2-help { font-size: 12.5px; color: var(--muted); }
.rt2-help summary { cursor: pointer; width: max-content; color: var(--accent); }
.rt2-help p { margin: 6px 0 0; line-height: 1.5; max-width: 75ch; }
@media (max-width: 640px) { .rt2 { grid-template-columns: 18px minmax(0, 1fr) 72px; gap: 10px; padding: 12px; } .rt2 .pips { display: none; } }
.edge { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; color: var(--violet); border: 1px solid color-mix(in srgb, var(--violet) 45%, transparent); background: color-mix(in srgb, var(--violet) 10%, transparent); cursor: help; }