/* ============================================================================
   ProjectATC design system  ·  "The Strip Bay"
   Shared by the public site (/, /learn, /legal, /404) and the session setup
   screen (/play). The in-session scope is NOT styled from here: it keeps
   play/css/style.css untouched, on purpose.
   ----------------------------------------------------------------------------
   One rule decides the type: MONO for anything a controller reads off a strip
   or types on a keyboard (codes, values, labels, controls). ARCHIVO for
   anything a human wrote (headings, briefings, prose).

   One rule decides the colour: colour is a STATE, never a decoration.
     cyan   = selected / active, the same meaning it has on the scope
     amber  = the surface, the ground, attention, locked
     green  = cleared. You may proceed: a field open to you, an assignment
              passed, a certification granted. Nothing else. Ever.
     red    = conflict, failure
   Chrome is grey. If a border is coloured, something is true about that row.

   Depth is composition, not shadow. There is not one blurred shadow in this file:
   the only box-shadow is a hard 1px ring on the modal.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
/* A strip bay is paper on a console, and a tower cab in daylight is a light
   room with dark equipment in it. So the work surface is light and only two
   things stay dark, always, in a fixed role:
     the duty band:  the equipment's chrome
     the scope well: the equipment's glass, where an airport is drawn
   Nothing else on any screen is dark. That is the whole rule. */
:root{
  /* Surfaces. Strips are the whitest thing on screen because strips are paper;
     the console they sit on is grey. */
  --s0:#e7eaed;          /* console surface / workspace floor */
  --s1:#f1f4f6;          /* panel */
  --s2:#ffffff;          /* strip: paper */
  --s3:#e3e8ec;          /* hover */
  --s4:#d5dce1;          /* pressed / selected chrome */
  --chrome:#dce2e7;      /* the rail: chrome sits a shade under the work surface */
  --scope:#0c1418;       /* reserved: the equipment's glass */
  --scope-ink:#5ac0e0;   /* what is drawn on it */
  --scope-dim:#5d6d76;

  --rule:#c7cfd5;        /* 1px hairline between rows */
  --rule-soft:#dee4e8;   /* inside a panel */
  --rule-hard:#98a3aa;   /* the printed seam between regions */
  --bevel:#8b969e;       /* the darker edge a control takes on hover */

  --tx:#151c21;
  --tx2:#48555f;
  --tx3:#6c7a83;
  --tx4:#93a0a8;

  /* Accents keep their meanings from the scope; the values are re-picked for
     ink on paper, so every one of them passes contrast on --s2. */
  --cy:#0c6b88;  --cy-dim:#8cbfd0;  --cy-bg:#e2f0f5;   /* selected / active */
  --am:#875711;  --am-dim:#d9ac65;  --am-bg:#fbf1de;   /* surface / locked / caution */
  --gr:#1b6d30;  --gr-dim:#88c294;  --gr-bg:#e5f3e8;   /* cleared / passed */
  --rd:#a52f28;  --rd-dim:#dfa8a4;  --rd-bg:#fbeceb;   /* conflict / failure */

  /* Strip stock. Real progress strips are printed on tinted paper and the tint
     tells you what kind of flight it is. Ours is a couple of percent, enough to
     feel the rhythm of the bay before you read it. */
  --stock-dep:#ffffff;
  --stock-arr:#f7f8f4;
  --stock-vfr:#fafbf6;

  /* The duty band tokens — light strip bay chrome */
  --band-hi:var(--rule);
  --band-a:var(--s1);
  --band-b:var(--s1);
  --band-seam:var(--rule-soft);
  --band-tx:var(--tx);
  --band-tx2:var(--tx2);
  --band-cy:var(--cy);
  --band-am:var(--am);
  --band-gr:var(--gr);

  --mono:'IBM Plex Mono','SFMono-Regular','Consolas','Menlo',ui-monospace,monospace;
  --sans:'Archivo','Segoe UI',system-ui,sans-serif;

  --strip-h:52px;
  --rail-w:212px;
  --panel-w:392px;
  --band-h:38px;

  color-scheme:light;
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  background:var(--s0);
  color:var(--tx);
  font:400 12px/1.5 var(--mono);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;                /* this is software, not a page */
}
::selection{background:#bfe1ee;color:var(--tx);}

/* Focus is a hard cyan ring, the same "you have selected this" language the
   scope uses. Never removed, never a soft glow. */
:focus-visible{outline:2px solid var(--cy);outline-offset:-2px;}

a{color:inherit;text-decoration:none;}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:none;}
button{cursor:pointer;}

/* ------------------------------------------------------------ typography -- */
/* Archivo runs at width 88 for headings: airport signage is condensed, and the
   compression buys a line of title without shrinking it. */
.h1,.h2,.h3{font-family:var(--sans);font-variation-settings:'wdth' 88;letter-spacing:-.008em;}
.h1{font-size:27px;font-weight:700;line-height:1.08;}
.h2{font-size:19px;font-weight:700;line-height:1.15;}
.h3{font-size:15px;font-weight:600;line-height:1.2;}
.prose{font-family:var(--sans);font-size:13px;line-height:1.62;color:var(--tx2);max-width:62ch;}
.prose strong{color:var(--tx);font-weight:600;}

/* The kicker replaces the marketing eyebrow: a sequence number and a facility
   label, the way a checklist page is headed. */
.kick{
  display:flex;align-items:center;gap:8px;
  font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--tx3);
}
.kick .n{color:var(--cy);font-weight:600;}
.kick .n.am{color:var(--am);} .kick .n.gr{color:var(--gr);}

.val{font-variant-numeric:tabular-nums;letter-spacing:.01em;}
.dim{color:var(--tx3);}
.hide{display:none !important;}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ------------------------------------------------------------- workspace -- */
#app{display:flex;flex-direction:column;height:100%;}

/* The duty band: light technical strip bay chrome, unified with the workspace. */
.band{
  position:sticky;top:0;z-index:100;
  flex:none;display:flex;align-items:stretch;height:var(--band-h);
  background:var(--s1);
  border-bottom:1px solid var(--rule);
  color:var(--tx);
  font-size:11px;
}
.band .cell{
  display:flex;align-items:center;gap:7px;padding:0 12px;
  border-right:1px solid var(--rule-soft);color:var(--tx3);white-space:nowrap;
  font-family:var(--mono);font-size:11px;
}
.band .cell b{color:var(--tx);font-weight:600;}
.band .cell.on b{color:var(--cy);}
.band .mark{display:flex;align-items:center;gap:9px;padding:0 14px 0 12px;border-right:1px solid var(--rule-soft);text-decoration:none;color:var(--tx);}
.band .mark .wm{width:16px;height:16px;flex:none;color:var(--tx);display:block;}
.band .mark .nm{font-family:var(--sans);font-variation-settings:'wdth' 88;font-weight:700;
  font-size:13.5px;letter-spacing:-.01em;color:var(--tx);}
.band .sp{flex:1;}
.band .btn{
  display:flex;align-items:center;gap:7px;padding:0 13px;border:none;border-right:1px solid var(--rule-soft);
  border-radius:0;background:none;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--tx2);
  text-decoration:none;transition:background .12s ease, color .12s ease;
}
.band .btn:hover{background:var(--s3);color:var(--tx);}
.band .btn.here{color:var(--cy);background:var(--s2);box-shadow:inset 0 -2px 0 var(--cy);font-weight:600;}
.band .btn.acc{color:var(--am);font-weight:600;}
.band .who{display:flex;align-items:center;gap:9px;padding:0 12px;font:inherit;color:inherit;border-right:1px solid var(--rule-soft);}
button.band-who,.band button.who{cursor:pointer;background:none;border:none;}
.band button.who:hover{background:var(--s3);}
.band button.who:hover .dim{color:var(--tx);}
.band .who .id{width:22px;height:22px;flex:none;display:grid;place-items:center;
  background:var(--cy-bg);border:1px solid var(--cy-dim);color:var(--cy);font-size:9.5px;font-weight:700;border-radius:2px;}
.band .who .dim{color:var(--tx3);font-family:var(--mono);font-size:11px;}
.band .who .sbx-tier{
  font-size:9px;letter-spacing:.14em;padding:2px 6px;border-radius:2px;
  border:1px solid var(--gr-dim);background:var(--gr-bg);color:var(--gr);font-weight:700;
}

/* on/off duty lamp. A lamp, not a pulsing dot */
.lamp{width:6px;height:6px;flex:none;background:var(--tx4);}
.lamp.on{background:var(--gr);}
.lamp.warn{background:var(--am);}
.band .lamp{background:var(--rule-hard);border-radius:1px;}
.band .lamp.on{background:var(--gr);}
.band .lamp.warn{background:var(--am);}

.body{flex:1;display:flex;min-height:0;}

/* -------------------------------------------------------------- the rail -- */
.rail{
  flex:none;width:var(--rail-w);background:var(--chrome);
  border-right:1px solid var(--rule-hard);display:flex;flex-direction:column;min-height:0;
}
.rail-grp{padding:14px 0 6px;}
.rail-grp + .rail-grp{border-top:1px solid var(--rule-soft);}
.rail-lbl{padding:0 14px 8px;font-size:9.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--tx4);}
.rail a.item{
  display:flex;align-items:center;gap:10px;height:31px;padding:0 14px 0 11px;
  border-left:3px solid transparent;color:var(--tx2);font-size:12px;
}
.rail a.item .cnt{margin-left:auto;font-size:10px;color:var(--tx4);}
.rail a.item:hover{background:var(--s1);color:var(--tx);}
.rail a.item.sel{background:var(--s2);border-left-color:var(--cy);color:var(--tx);font-weight:500;}
.rail a.item.sel .cnt{color:var(--cy);}
.rail .fill{flex:1;}
.rail .foot{padding:11px 14px;border-top:1px solid var(--rule-soft);font-size:10px;color:var(--tx4);line-height:1.7;}
.rail .foot a:hover{color:var(--cy);}
.rail .foot b{color:var(--tx3);font-weight:400;}

/* ------------------------------------------------------------ main + bay -- */
.main{flex:1;display:flex;min-width:0;min-height:0;}
.bay{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--s0);}
.bay-head{
  flex:none;padding:22px 26px 0;border-bottom:1px solid var(--rule-hard);background:var(--s0);
}
.bay-head .row{display:flex;align-items:flex-end;gap:20px;}
.bay-head .h1{margin:9px 0 3px;}
.bay-head .prose{margin-bottom:16px;}
.bay-scroll{flex:1;overflow-y:auto;min-height:0;}
.bay-scroll::-webkit-scrollbar{width:11px;}
.bay-scroll::-webkit-scrollbar-track{background:var(--s0);}
.bay-scroll::-webkit-scrollbar-thumb{background:var(--s4);border:3px solid var(--s0);}
.bay-scroll::-webkit-scrollbar-thumb:hover{background:var(--rule-hard);}

/* filter bar: square segmented control, the game's button language */
.filters{display:flex;gap:0;margin-bottom:-1px;}
.filters button{
  padding:7px 13px;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--tx3);border:1px solid var(--rule);border-bottom-color:var(--rule-hard);
  background:var(--s1);margin-right:-1px;
}
.filters button:hover{color:var(--tx);background:var(--s2);}
.filters button[aria-pressed="true"]{
  background:var(--s0);color:var(--cy);border-color:var(--rule);border-bottom-color:var(--s0);
}

/* ------------------------------------------------------------- THE STRIP -- */
/* The one component this product owns. A flight progress strip: fixed height,
   fixed columns, a coloured edge that carries its state, and a rule under it.
   Strips stack; they do not float. There is no card in this design system. */
.bay-grp{border-bottom:2px solid var(--rule-hard);}
.bay-grp > .gh{
  display:flex;align-items:center;gap:11px;padding:11px 26px 9px;background:var(--s0);
}
.bay-grp > .gh .t{font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--tx2);}
.bay-grp > .gh .r{flex:1;height:1px;background:var(--rule-soft);}
.bay-grp > .gh .m{font-size:10px;color:var(--tx4);letter-spacing:.08em;}

.strip{
  display:grid;align-items:center;width:100%;text-align:left;
  grid-template-columns:52px 108px minmax(0,1fr) auto;
  column-gap:16px;min-height:var(--strip-h);padding:0 26px 0 0;
  background:var(--s2);border-bottom:1px solid var(--rule);
  border-left:3px solid var(--rule);
  position:relative;
}
.strip:hover{background:var(--s3);}
.strip.lock{background:var(--stock-arr);}
.strip.lock .code,.strip.lock .ttl{color:var(--tx3);}
.strip.done{border-left-color:var(--gr-dim);}
.strip.next{border-left-color:var(--cy);}
.strip.lockedge{border-left-color:var(--am-dim);}
.strip.openedge{border-left-color:var(--gr-dim);}
/* Selection wins over every status edge: you must always be able to see which
   strip you pulled, including a locked one. */
.strip[aria-selected="true"],
.strip.lock[aria-selected="true"]{background:var(--s3);border-left-color:var(--cy);}
.strip[aria-selected="true"] .code,
.strip.lock[aria-selected="true"] .code{color:var(--cy);}
.strip.lock[aria-selected="true"] .ttl{color:var(--tx);}

/* A schematic takes its ink from whatever it is sitting in. That way the same
   drawing works in a strip, on the pad, in a dialog, without a variant. */
.rwy line{stroke:currentColor;stroke-width:1.6;stroke-linecap:square;}

/* the schematic well. An airport is drawn, never illustrated */
.strip .dia{display:grid;place-items:center;height:100%;border-right:1px solid var(--rule-soft);}
.dia svg{display:block;}
.dia svg line{stroke:var(--tx3);stroke-width:1.6;stroke-linecap:square;}
.strip[aria-selected="true"] .dia svg line{stroke:var(--cy);}
.strip.lock[aria-selected="true"] .dia svg line{stroke:var(--cy);}

.strip .code{display:block;font-size:15px;font-weight:600;letter-spacing:.02em;color:var(--tx);}
.strip .sub{display:block;font-size:10px;color:var(--tx4);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.strip .ttl{display:block;font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--tx);
  font-variation-settings:'wdth' 92;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.strip .meta{font-size:10.5px;color:var(--tx3);margin-top:2px;display:flex;gap:9px;flex-wrap:wrap;}
.strip .meta i{font-style:normal;color:var(--tx4);}
.strip .right{display:flex;align-items:center;gap:14px;justify-self:end;}
.strip .num{font-size:10px;color:var(--tx4);width:22px;text-align:right;}

/* strips being printed (loading) */
.strip.ghost{pointer-events:none;}
.strip.ghost .bar{height:9px;background:var(--s3);}
.strip.ghost .bar.w1{width:44px;} .strip.ghost .bar.w2{width:180px;} .strip.ghost .bar.w3{width:64px;}
.strip.ghost .bar{animation:breathe 1.1s ease-in-out infinite;}
@keyframes breathe{50%{opacity:.42;}}

/* The ribbon rule ----------------------------------------------------------
   A 3px coloured left edge belongs to exactly two things: a STRIP (it is the
   coloured holder a progress strip sits in) and a SELECTED row in a nav (it is
   a cursor). Every other block that needs to say something about itself says it
   with a tag or a tint. Reaching for the ribbon each time a block felt special
   is how a system ends up with eight of them.
   -------------------------------------------------------------------------- */

/* ------------------------------------------------------------------ tags -- */
/* Square. Bordered. One line of text. Never a pill, never with an icon. */
.tag{
  display:inline-flex;align-items:center;gap:5px;padding:2px 6px;border:1px solid var(--rule);
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tx3);white-space:nowrap;
}
.tag.cy{color:var(--cy);border-color:var(--cy-dim);background:var(--cy-bg);}
.tag.am{color:var(--am);border-color:var(--am-dim);background:var(--am-bg);}
.tag.gr{color:var(--gr);border-color:var(--gr-dim);background:var(--gr-bg);}
.tag.rd{color:var(--rd);border-color:var(--rd-dim);background:var(--rd-bg);}
.tag.solid{background:var(--s4);color:var(--tx2);border-color:var(--rule);}

/* --------------------------------------------------------------- buttons -- */
/* 2px radius is the only softening in the system, and it exists so a control
   reads as pressable next to strips and panels that are perfectly square. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:8px 15px;border:1px solid var(--rule);background:var(--s3);color:var(--tx);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;border-radius:2px;
}
.btn:hover{background:var(--s4);border-color:var(--bevel);}
.btn:active{background:var(--s2);}
.btn[disabled]{opacity:.4;cursor:not-allowed;}
.btn.go{background:var(--gr-bg);border-color:var(--gr-dim);color:var(--gr);}
.btn.go:hover{background:#d6ecdb;border-color:var(--gr);}
.btn.sel{background:var(--cy-bg);border-color:var(--cy-dim);color:var(--cy);}
.btn.sel:hover{background:#d3e8f0;border-color:var(--cy);}
.btn.warn{background:var(--am-bg);border-color:var(--am-dim);color:var(--am);}
.btn.warn:hover{background:#f6e6c6;border-color:var(--am);}
.btn.quiet{background:none;}
.btn.quiet:hover{background:var(--s2);}
.btn.wide{width:100%;}
.btn.lg{padding:11px 22px;font-size:12px;}
.btn.sm{padding:5px 10px;font-size:10px;}

/* -------------------------------------------------------- detail: the pad -- */
/* The right panel is "the pad", where the strip you pulled is laid down.
   Fixed width so the bay never reflows when you select. */
.pad{
  flex:none;width:var(--panel-w);background:var(--s1);
  border-left:1px solid var(--rule-hard);display:flex;flex-direction:column;min-height:0;
}
.pad-scroll{flex:1;overflow-y:auto;min-height:0;}
.pad-scroll::-webkit-scrollbar{width:11px;}
.pad-scroll::-webkit-scrollbar-track{background:var(--s1);}
.pad-scroll::-webkit-scrollbar-thumb{background:var(--s4);border:3px solid var(--s1);}
.pad-sec{padding:16px 20px;border-bottom:1px solid var(--rule-soft);}
.pad-sec.tight{padding:12px 20px;}
.pad-sec > .kick{margin-bottom:10px;}
.pad-foot{
  flex:none;padding:14px 20px;border-top:2px solid var(--rule-hard);background:var(--s2);
  display:flex;flex-direction:column;gap:9px;
}
.pad-foot .line{display:flex;justify-content:space-between;font-size:10.5px;color:var(--tx3);}

/* the big schematic: an airport's portrait */
.portrait{
  background:var(--scope);border:1px solid var(--rule);padding:14px;
  display:grid;place-items:center;position:relative;
}
.portrait svg line{stroke:var(--scope-ink);stroke-width:2.4;stroke-linecap:square;}
.portrait .cap{
  position:absolute;left:9px;bottom:7px;font-size:9px;letter-spacing:.14em;color:var(--scope-dim);
}
.portrait .cap2{position:absolute;right:9px;bottom:7px;font-size:9px;color:var(--scope-dim);}

/* key/value table: the chart-supplement look, all rules, no boxes */
.kv{width:100%;border-collapse:collapse;}
.kv td{padding:5px 0;border-bottom:1px dotted var(--rule);font-size:11.5px;vertical-align:baseline;}
.kv tr:last-child td{border-bottom:none;}
.kv td:first-child{color:var(--tx3);width:40%;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;}
.kv td:last-child{text-align:right;color:var(--tx);}

/* objective list: a checklist, with the box a controller ticks */
.checks{display:flex;flex-direction:column;gap:0;}
.checks li{
  display:flex;gap:10px;align-items:flex-start;padding:7px 0;border-bottom:1px dotted var(--rule);
  font-size:11.5px;color:var(--tx2);list-style:none;
}
.checks li:last-child{border-bottom:none;}
.checks li .box{
  width:11px;height:11px;flex:none;margin-top:2px;border:1px solid var(--tx4);
}
/* Met: the square is filled, not ticked. A solid block reads at 11px where a
   check glyph turns to mush, and it keeps the whole system square. */
.checks li.ok .box{border-color:var(--gr-dim);background:var(--gr);}
.checks li.ok{color:var(--tx);}
.checks li.dist .box{border-color:var(--am-dim);}
/* "included" variant: filled amber. These are things you get, not things to tick. */
.checks.incl li .box{border-color:var(--am-dim);background:var(--am);}
.checks.incl li{color:var(--tx2);}

/* ------------------------------------------------------------- form rows -- */
.field{margin-bottom:14px;}
.field > label{display:block;font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--tx3);margin-bottom:5px;}
.field .hint{font-size:10.5px;color:var(--tx4);margin-top:5px;line-height:1.55;}
select,input[type=text],input[type=email],input[type=search],input[type=number],textarea{
  width:100%;padding:7px 9px;background:var(--s0);border:1px solid var(--rule);
  border-top-color:var(--rule-hard);color:var(--tx);font-size:12px;border-radius:0;
}
select:hover,input:hover,textarea:hover{border-color:var(--bevel);}
input::placeholder,textarea::placeholder{color:var(--tx4);}
textarea{resize:vertical;line-height:1.55;}

/* position selector: five square keys, like the position buttons on a console */
.keys{display:grid;grid-template-columns:repeat(5,1fr);gap:0;}
.keys .key{
  border:1px solid var(--rule);margin-right:-1px;padding:10px 8px;text-align:left;
  background:var(--s1);position:relative;
}
.keys .key:hover:not([disabled]){background:var(--s2);}
.keys .key .c{font-size:13px;font-weight:600;color:var(--tx2);}
.keys .key .n{font-size:9px;color:var(--tx4);margin-top:2px;letter-spacing:.06em;text-transform:uppercase;}
.keys .key[aria-pressed="true"]{background:var(--cy-bg);border-color:var(--cy-dim);z-index:1;}
.keys .key[aria-pressed="true"] .c{color:var(--cy);}
.keys .key[aria-pressed="true"] .n{color:var(--cy-dim);}
.keys .key[disabled]{opacity:.35;cursor:not-allowed;}
.keys .key .lk{position:absolute;top:5px;right:6px;font-size:8px;color:var(--am);letter-spacing:.1em;}

/* segmented value picker (traffic, duration) */
.seg{display:flex;}
.seg button{
  flex:1;padding:7px 4px;border:1px solid var(--rule);margin-right:-1px;background:var(--s1);
  font-size:11px;color:var(--tx2);
}
.seg button:hover{background:var(--s2);color:var(--tx);}
.seg button[aria-pressed="true"]{background:var(--cy-bg);border-color:var(--cy-dim);color:var(--cy);z-index:1;}

/* ---------------------------------------------------------------- states -- */
.state{
  padding:44px 26px;max-width:520px;
}
.state .h2{margin-bottom:7px;}
.state .prose{margin-bottom:16px;}
.state .rulebox{
  border:1px dashed var(--rule);padding:18px 20px;background:var(--s1);
}
.state.err .rulebox{border-color:var(--rd-dim);background:var(--rd-bg);}

/* --------------------------------------------------------------- modal ----- */
/* The only shadow in the system, and it is a hard scrim, not a blur. */
.scrim{position:fixed;inset:0;background:rgba(21,28,33,.46);display:grid;place-items:center;z-index:80;}
/* The rule at the top of a dialog is the same rule as a strip's left edge: it
   says what kind of thing this is. Cyan for an operation you are performing,
   amber for something you cannot do yet. */
.modal{
  width:min(560px,calc(100vw - 48px));background:var(--s2);
  border:1px solid var(--rule-hard);border-top:2px solid var(--cy);
  box-shadow:0 0 0 1px var(--rule-hard);
  max-height:calc(100vh - 80px);display:flex;flex-direction:column;
}
.modal.am{border-top-color:var(--am);}
.modal.am .mh .t{color:var(--am);}
.modal .mh{
  display:flex;align-items:center;gap:12px;padding:12px 18px;
  border-bottom:1px solid var(--rule);background:var(--s1);
}
.modal .mh .t{flex:1;font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--cy);}
.modal .mh .x{padding:2px 7px;color:var(--tx3);font-size:13px;}
.modal .mh .x:hover{color:var(--tx);background:var(--s4);}
.modal .mb{padding:20px 18px;overflow-y:auto;}
.modal .mf{padding:13px 18px;border-top:1px solid var(--rule);background:var(--s1);
  display:flex;gap:9px;justify-content:flex-end;}

/* ------------------------------------------------------------- notices ----- */
/* A notice is a strip too: coloured edge, one line, dismissible. Not a toast
   that floats. It docks under the duty band where a controller expects
   coordination messages. */
.notices{position:fixed;top:calc(var(--band-h) + 10px);right:14px;z-index:70;
  display:flex;flex-direction:column;gap:6px;width:330px;}
.notice{
  display:flex;align-items:flex-start;gap:10px;padding:9px 11px;background:var(--s2);
  border:1px solid var(--rule-hard);font-size:11.5px;color:var(--tx2);
  animation:dock .16s ease-out;
}
.notice::before{content:"";width:6px;height:6px;flex:none;margin-top:4px;background:var(--cy);}
.notice.gr::before{background:var(--gr);}
.notice.am::before{background:var(--am);}
.notice.rd::before{background:var(--rd);}
.notice b{display:block;color:var(--tx);font-weight:500;font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;margin-bottom:2px;}
.notice .x{margin-left:auto;color:var(--tx4);padding:0 3px;}
.notice .x:hover{color:var(--tx);}
@keyframes dock{from{transform:translateX(10px);opacity:0;}}

/* --------------------------------------------------------------- motion ---- */
/* One motion idea, used once, with a meaning: starting a session PRINTS the
   strip: it leaves the bay. Nothing else in this shell animates on scroll. */
@keyframes printout{
  0%{transform:translateY(0);opacity:1;}
  100%{transform:translateY(-14px);opacity:0;}
}
.printing{animation:printout .22s ease-in forwards;}
/* ----------------------------------------------------------- responsive ---- */
@media (max-width:860px){
  .hide-md{display:none !important;}
}
@media (max-width:640px){
  .hide-sm{display:none !important;}
  .band{height:42px;}
  .band .cell{padding:0 8px;font-size:10px;}
  .band .mark{padding:0 10px;gap:7px;}
  .band .mark .nm{font-size:13px;}
  .band .btn{padding:0 10px;font-size:10.5px;}
}
@media (max-width:480px){
  .band .cell{display:none !important;}
  .band .mark{border-right:none;}
  .band .btn:not(.band-go):not([href="#plans"]){display:none !important;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}