/* Base shell only. Panel styling lives with each UI module. */
:root {
  --sand: #e8dcc4;
  --sand-deep: #cbb896;
  --ink: #14181c;
  --ink-soft: #2a3138;
  --sea: #1f6f7a;
  --sea-bright: #3fb6c4;
  --sun: #f0b429;
  --coral: #e2725b;
  --leaf: #6f8f4a;
  --panel: rgba(18, 22, 26, 0.86);
  --panel-edge: rgba(232, 220, 196, 0.16);
  --text: #eee6d6;
  --text-dim: #a8a091;
  --font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-display: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: #06090c; }
body { font-family: var(--font); color: var(--text); -webkit-font-smoothing: antialiased; }

#stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; outline: none; touch-action: none; }
#ui-root { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#ui-root > * { pointer-events: auto; }

/* A closed board does not take clicks, and this rule is why.
   Every full-screen board and its scrim declares `pointer-events: none` in its own base class and
   `auto` on `.on`. That was correct and it never worked, because `#ui-root > *` above is one id
   selector, specificity (1,0,0), and a class like `.sub-board` is (0,1,0). The blanket rule won, so
   all six closed boards and all six closed scrims sat over the island as invisible full-screen click
   shields at z-index 40 and 41. The symptoms were that the rail buttons appeared dead, and that an
   open board's own tabs could not be clicked because a different board's closed scrim lay on top.
   The attribute-plus-:not form below is (1,2,0) and wins, and it needs no change in fourteen panels.
   If you add a new board, name it `*-board` with a `*-scrim` and it is covered. */
#ui-root > [class*="-board"]:not(.on),
#ui-root > [class*="-scrim"]:not(.on) { pointer-events: none; }

#boot {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 40%, #12222b 0%, #06090c 70%);
  transition: opacity .8s ease, visibility .8s;
}
#boot.gone { opacity: 0; visibility: hidden; }
.boot-inner { text-align: center; max-width: 42ch; padding: 2rem; }
.boot-mark { font-size: clamp(1.6rem, 5vw, 2.6rem); letter-spacing: .34em; font-weight: 200; color: var(--sand); }
.boot-sub { font-size: .8rem; letter-spacing: .3em; color: var(--sea-bright); margin-top: .4rem; text-transform: uppercase; }
.boot-bar { margin: 2.4rem auto 0; width: min(360px, 70vw); height: 2px; background: rgba(232,220,196,.14); overflow: hidden; }
.boot-bar i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--sea), var(--sun)); transition: width .35s ease; }
.boot-status { margin-top: .9rem; font-size: .74rem; letter-spacing: .18em; color: var(--text-dim); text-transform: lowercase; min-height: 1.2em; }
.boot-ack { margin-top: 3rem; font-size: .68rem; line-height: 1.7; color: rgba(168,160,145,.7); }