/* AEON4D's look, once (library/THE_SHELL.md): dark steel, and a deep emerald frame that shines along
   the edges of things. Every page and the shell take their colours from these tokens; a colour written
   anywhere else is a fault the shell gate catches.

   Gortiva, 2026-09-28: "sleek dark steel with darker green shining futuristic flow as an outline or
   container separator, or color coded by types of testing or flow."

   THE FRAME is structure: outlines, separators, the heading tag and its rule, focus, hover. It never
   colours a value and never marks the live thing, so it cannot be read as a verdict. LIVE (the
   estate's cyan) marks the one live thing. The state colours are the estate's own, unchanged. THE FIVE
   TYPES (measure, render, simulate, phone, sense) are only ever a 2 px edge with a tag beside it.
   Offline by design: the app serves these files from inside the apk, so system fonts only. */

:root {
  color-scheme: dark;
  /* steel */
  --ground: #0B0F13;
  --shell: #10151A;
  --shell-2: #0D1116;
  --plate: #151B21;
  --plate-2: #12171D;
  --plate-hi: #1B232A;
  --well: #080B0E;
  --stage: #06080B;
  --rule: #25303A;
  --edge-field: #5B6C7B;
  --bevel: rgba(255, 255, 255, 0.03);
  /* ink */
  --ink: #E4EAEE;
  --ink-hi: #F2F5F7;
  --dim: #97A4AF;
  --faint: #7E8B97;
  /* the frame: a deep emerald that shines along the edges */
  --frame-line: #145C43;
  --frame-edge: #1E8C63;
  --frame: #2BB981;
  --frame-hi: #45D69B;
  --frame-glow: rgba(43, 185, 129, 0.18);
  --frame-wash: rgba(43, 185, 129, 0.06);
  /* the one live thing */
  --live: #3FE8F0;
  --live-wash: rgba(63, 232, 240, 0.10);
  --ink-on-live: #04181A;
  --ink-on-frame: #06140F;
  /* state, the estate's own */
  --ok: #6FE3A8;
  --warn: #FFCC66;
  --bad: #FF7A7A;
  --unknown: #8E97A2;
  --ok-wash: rgba(111, 227, 168, 0.07);
  --warn-wash: rgba(255, 204, 102, 0.055);
  --bad-wash: rgba(255, 122, 122, 0.065);
  --armed-wash: rgba(255, 204, 102, 0.18);
  /* the five types of test, and play (the game, not a test): an edge and a tag, never a fill */
  --t-play: var(--gold);
  --t-measure: #5EA2FF;
  --t-render: #B88CFF;
  --t-simulate: #D09A5E;
  --t-phone: #F28AC4;
  --t-sense: #B6E35A;
  /* the pages' own subject colours (the emblem's gold for a page title) */
  --gold: #E8B84B;
  /* shadows over a picture */
  --scrim: rgba(6, 8, 11, 0.62);
  --scrim-0: rgba(6, 8, 11, 0);
  /* a HUD tile over a picture (the walk's corners, after AEON3D's Antumbris) */
  --tile: rgba(8, 11, 17, 0.86);
  --tile-edge: rgba(255, 255, 255, 0.1);
  --text-shadow: rgba(0, 0, 0, 0.65);
  --stick-ring: rgba(228, 234, 238, 0.35);
  --stick-fill: rgba(11, 15, 19, 0.18);
  --stick-knob: rgba(228, 234, 238, 0.42);
  /* type and shape */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;
  --r-card: 9px;
  --r-key: 5px;
}

[hidden] { display: none !important; }

/* THE FRAME, as a container: a hairline of the frame's deepest green, the steel's bevel, and an inner
   glow of the frame's colour. Static: an instrument that animates its own chrome spends the frame
   budget of the thing it measures. */
.framed {
  border: 1px solid var(--frame-line);
  border-radius: var(--r-card);
  background: linear-gradient(var(--plate), var(--plate-2));
  box-shadow: inset 0 1px 0 var(--bevel), inset 0 0 24px var(--frame-wash);
}

/* The one lit line: a gradient that runs bright at its middle, the frame's shine painted once. */
.litrule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--frame-edge) 15%, var(--frame-hi) 50%, var(--frame-edge) 85%, transparent);
}

/* A type's tag: a small bordered uppercase word in the type's own hue. */
.tag {
  display: inline-block;
  font: 600 9.5px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 3px 5px 2px;
  border: 1px solid currentColor;
  border-radius: 3px;
}
.t-play { --type: var(--t-play); }
.t-measure { --type: var(--t-measure); }
.t-render { --type: var(--t-render); }
.t-simulate { --type: var(--t-simulate); }
.t-phone { --type: var(--t-phone); }
.t-sense { --type: var(--t-sense); }
.tag.t-play, .tag.t-measure, .tag.t-render, .tag.t-simulate, .tag.t-phone, .tag.t-sense { color: var(--type); }

/* THE TAP'S OWN SHEET (web/tap.js): on a page opened on its own, a button that opens the page's flags. */
.tap-open {
  position: fixed; z-index: 30;
  top: calc(env(safe-area-inset-top, 0px) + 10px); right: max(12px, env(safe-area-inset-right, 0px));
  font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); background: var(--scrim); border: 1px solid var(--frame-edge); border-radius: var(--r-key);
  padding: 10px 12px; min-height: 36px;
}
.tap-open:focus-visible, .tap-sheet button:focus-visible, .tap-sheet select:focus-visible, .tap-sheet input:focus-visible { outline: 2px solid var(--frame-hi); outline-offset: 2px; }
.tap-sheet {
  position: fixed; z-index: 31; right: max(12px, env(safe-area-inset-right, 0px)); box-sizing: border-box;  /* its width and height are whole: padding inside */
  top: calc(env(safe-area-inset-top, 0px) + 54px); width: min(340px, calc(100vw - 24px));
  max-height: calc(100vh - 80px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); overflow: auto;
  padding: 12px 14px 14px; color: var(--ink); font: 12px/1.45 var(--sans);
}
.tap-sheet h2 { margin: 0 0 8px; font: 600 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--frame); display: flex; gap: 8px; align-items: center; }
.tap-sheet h2::after { content: ""; flex: 1; height: 1px; background: var(--frame-line); }
.tap-sheet .row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.tap-sheet .row:last-of-type { border-bottom: 0; }
.tap-sheet .name { font: 600 12px var(--mono); color: var(--ink-hi); }
.tap-sheet .means { grid-column: 1 / -1; color: var(--dim); font-size: 11.5px; }
.tap-sheet select, .tap-sheet input { font: 13px var(--mono); color: var(--ink); background: var(--well); border: 1px solid var(--edge-field); border-radius: var(--r-key); padding: 7px 8px; min-height: 36px; max-width: 150px; }
.tap-sheet .acts { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.tap-sheet button { font: 600 11px var(--mono); letter-spacing: .1em; color: var(--ink); background: var(--well); border: 1px solid var(--frame-edge); border-radius: var(--r-key); padding: 9px 12px; min-height: 40px; }
.tap-sheet button.go { color: var(--ink-on-frame); background: var(--frame); border-color: var(--frame-hi); }
.tap-sheet .note { margin: 10px 0 0; color: var(--faint); font-size: 11px; }

/* A page inside the shell drops the chrome the shell already carries (its title, its own stats line). */
html.aeon4d-embedded [data-tap-hide] { display: none !important; }