/* TOWER: the night desk of a control tower. Radar glass, manila flight strips, coloured strip holders.
   One type family (B612, drawn for cockpit displays) in two cuts: B612 for words, B612 Mono for numbers and strips. */
@font-face { font-family: "B612"; src: url("/fonts/b612-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "B612"; src: url("/fonts/b612-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "B612 Mono"; src: url("/fonts/b612-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "B612 Mono"; src: url("/fonts/b612-mono-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  color-scheme: dark;
  --desk: #0A0E10;        /* the room */
  --desk-2: #10171A;
  --glass: #0B1A1A;       /* radar glass */
  --line: #1E2B2D;
  --line-2: #2C3D3F;
  --ink: #DCE7E3;         /* text on the desk */
  --dim: #8A9C97;
  --faint: #56676A;
  --phos: #7FF0C6;        /* phosphor */
  --phos-dim: #2F7B66;
  --strip: #EDE3C8;       /* manila strip */
  --strip-2: #E2D6B4;
  --strip-ink: #1C1A14;
  --strip-dim: #6E6550;
  --hold: #F0A63A;        /* amber holder */
  --clear: #3FC07F;       /* green holder */
  --off-up: #58A6F0;      /* blue holder: closed in profit */
  --off-dn: #E5573F;      /* red holder: closed at a loss */
  --focus: #F7D774;
  --r: 3px;
  --mono: "B612 Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "B612", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(16px, 3vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--desk); color: var(--ink); font: 400 15px/1.55 var(--sans); }
a { color: inherit; }
img, svg, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.num, kbd, code { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- keys: console push-buttons */
.key {
  display: inline-flex; align-items: center; gap: .5em; min-height: 40px; padding: 0 16px;
  border: 1px solid var(--line-2); border-radius: var(--r); background: linear-gradient(#18232a, #111a1e);
  color: var(--ink); font: 700 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; box-shadow: inset 0 1px 0 #ffffff10, 0 1px 0 #00000080; transition: border-color .15s, background-color .15s, transform .08s;
}
.key:hover { border-color: var(--phos-dim); }
.key:active { transform: translateY(1px); }
.key.lead { background: var(--phos); color: #04140F; border-color: var(--phos); box-shadow: 0 0 0 1px #7ff0c633, 0 0 24px -6px var(--phos); }
.key.lead:hover { background: #a2f6d6; }
.key[disabled] { opacity: .45; cursor: not-allowed; }
.key .lamp { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); box-shadow: inset 0 0 0 1px #0006; }
.key[data-state="on"] .lamp { background: var(--clear); box-shadow: 0 0 8px var(--clear); }
kbd { font-size: 10px; padding: 2px 5px; border: 1px solid var(--line-2); border-radius: 2px; color: var(--dim); letter-spacing: 0; }

/* ---------------------------------------------------------------- menu button + command palette */
.menu-btn { position: fixed; top: 14px; right: var(--gutter); z-index: 30; }
.palette { position: fixed; inset: 0; z-index: 60; display: grid; place-items: start center; padding: 12vh 16px 0; background: #04080acc; backdrop-filter: blur(3px); }
.palette .box { width: min(560px, 100%); background: var(--desk-2); border: 1px solid var(--line-2); border-radius: 6px; overflow: hidden; box-shadow: 0 30px 80px -20px #000; }
.palette input { width: 100%; padding: 16px 18px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); font: 400 15px var(--mono); outline: none; }
.palette ul { list-style: none; margin: 0; padding: 6px; max-height: 50vh; overflow: auto; }
.palette li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 4px; cursor: pointer; }
.palette li[aria-selected="true"] { background: #1a272b; }
.palette li small { color: var(--dim); font-family: var(--mono); font-size: 11px; }

/* ---------------------------------------------------------------- toast, tooltip */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 70; transform: translate(-50%, 20px); opacity: 0; padding: 10px 16px; border-radius: var(--r);
  background: var(--strip); color: var(--strip-ink); font: 700 12px var(--mono); letter-spacing: .04em; box-shadow: 0 10px 30px -10px #000; transition: opacity .2s, transform .2s; pointer-events: none; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.tip { position: fixed; z-index: 40; max-width: 280px; padding: 9px 11px; pointer-events: none; background: #061210ee; border: 1px solid var(--phos-dim); border-radius: var(--r);
  color: var(--ink); font: 400 12px/1.45 var(--mono); box-shadow: 0 10px 30px -12px #000; }
.tip b { color: var(--phos); font-weight: 700; }
.tip .c-hold { color: var(--hold); } .tip .c-clear { color: var(--clear); } .tip .c-up { color: var(--off-up); } .tip .c-dn { color: var(--off-dn); }

/* ---------------------------------------------------------------- flight strips */
.strip {
  position: relative; display: grid; grid-template-columns: 74px 1fr auto; align-items: stretch; min-height: 54px;
  background: linear-gradient(var(--strip), var(--strip-2)); color: var(--strip-ink); border-radius: 2px; overflow: hidden;
  font: 400 12px/1.3 var(--mono); box-shadow: 0 1px 0 #0008, inset 0 -1px 0 #0000001a;
}
.strip::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--holder, var(--hold)); }
.strip > * { padding: 7px 10px; }
.strip .cs { padding-left: 14px; border-right: 1px solid #0000001f; display: grid; align-content: center; gap: 2px; }
.strip .cs b { font-size: 13px; letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.strip .cs small, .strip .why small { color: var(--strip-dim); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.strip .why { display: grid; align-content: center; gap: 2px; min-width: 0; }
.strip .why span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.strip .stamp { display: grid; place-items: center; border-left: 1px dashed #0000002a; min-width: 78px; }
.strip .stamp i { font-style: normal; font-weight: 700; font-size: 11px; letter-spacing: .1em; padding: 3px 6px; border: 1.5px solid currentColor; border-radius: 2px; transform: rotate(-4deg); }
.strip[data-k="hold"] { --holder: var(--hold); } .strip[data-k="hold"] .stamp i { color: #9B5F0A; }
.strip[data-k="clear"] { --holder: var(--clear); } .strip[data-k="clear"] .stamp i { color: #17703F; }
.strip[data-k="up"] { --holder: var(--off-up); } .strip[data-k="up"] .stamp i { color: #1F5E9E; }
.strip[data-k="dn"] { --holder: var(--off-dn); } .strip[data-k="dn"] .stamp i { color: #A8301C; }

/* ---------------------------------------------------------------- wallet sheet */
.sheet { position: fixed; inset: 0; z-index: 65; display: grid; place-items: center; padding: 16px; background: #04080acc; backdrop-filter: blur(3px); }
.sheet .box { width: min(420px, 100%); max-height: 86vh; overflow: auto; background: var(--desk-2); border: 1px solid var(--line-2); border-radius: 6px; padding: 18px; box-shadow: 0 30px 80px -20px #000; }
.sheet h2 { margin: 0 0 4px; font: 700 13px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.sheet p { margin: 0 0 14px; color: var(--dim); font-size: 13px; }
.sheet .wl { display: grid; gap: 8px; }
.sheet .wl button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 4px; background: #0e1619; cursor: pointer; text-align: left; }
.sheet .wl button:hover { border-color: var(--phos-dim); }
.sheet .wl img { width: 28px; height: 28px; border-radius: 6px; }
.sheet .wl small { margin-left: auto; color: var(--dim); font: 400 11px var(--mono); }
.sheet .row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.sheet .addr { font: 700 14px var(--mono); padding: 10px 12px; background: #0e1619; border: 1px solid var(--line); border-radius: 4px; word-break: break-all; }
.sheet .facts { margin: 12px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13px; }
.sheet .facts dt { color: var(--dim); } .sheet .facts dd { margin: 0; font-family: var(--mono); text-align: right; }

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