/* Seraph: the phone's theme. A data dashboard in black and white: pure white
   or pure black, ink in grey steps (opacity of the one ink colour), 1px
   hairlines, square corners, no glow or shadow. Colour only in small marks:
   signal orange for "this one" (the app you're on, the value that matters),
   green for live, amber and red for warnings. Small type: monospace capitals
   for labels and numbers, system text for reading. 3D is drawn as wireframe
   (ui/kit/wire.js). Used by the phone shell and injected into every widget
   page by ui/mobile/host.js; canvases take their colours from these tokens. */

:root[data-theme='seraph'] {
  --page: #ffffff;
  --ink: #000000;
  --ink-rgb: 0, 0, 0;
  --ink-dim: #4d4d4d;
  --ink-faint: #8f8f8f;
  --hair: rgba(0, 0, 0, 0.12);
  --hair-strong: rgba(0, 0, 0, 0.36);
  --wash: rgba(0, 0, 0, 0.035);
  --sig: #ff4f00; /* signal orange: the one thing to look at */
  --sig-rgb: 255, 79, 0;
  --ok: #009e5a;
  --ok-rgb: 0, 158, 90;
  --cyan: #000000; /* widgets' primary accent is plain ink */
  --cyan-rgb: 0, 0, 0;
  --violet: #8c8c8c; /* second series: grey */
  --violet-rgb: 140, 140, 140;
  --violet-hi: #5c5c5c;
  --violet-hi-rgb: 92, 92, 92;
  --amber: #e08a00;
  --amber-rgb: 224, 138, 0;
  --ember: #e5202e;
  --ember-rgb: 229, 32, 46;
  --void: #ffffff;
  --void-rgb: 255, 255, 255;
  --spark: #000000;
  --glass-top: transparent;
  --glass-bottom: transparent;
  --cut: 0px;
  --noise: "0123456789";
  --display: -apple-system, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --mono: 'SF Mono', ui-monospace, 'JetBrains Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
  --graph: 'SF Mono', ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace;
  --glyph: 'SF Mono', ui-monospace, 'Segoe UI Symbol', monospace;
  --glow-cyan: none;
  --glow-violet: none;
  --glow-ember: none;
  color-scheme: light;
}
:root[data-theme='seraph'][data-scheme='dark'] {
  --page: #000000;
  --ink: #ffffff;
  --ink-rgb: 255, 255, 255;
  --ink-dim: #b3b3b3;
  --ink-faint: #707070;
  --hair: rgba(255, 255, 255, 0.14);
  --hair-strong: rgba(255, 255, 255, 0.4);
  --wash: rgba(255, 255, 255, 0.05);
  --sig: #ff5f1a;
  --sig-rgb: 255, 95, 26;
  --ok: #1fd184;
  --ok-rgb: 31, 209, 132;
  --cyan: #ffffff;
  --cyan-rgb: 255, 255, 255;
  --violet: #7a7a7a;
  --violet-rgb: 122, 122, 122;
  --violet-hi: #a8a8a8;
  --violet-hi-rgb: 168, 168, 168;
  --amber: #ffb020;
  --amber-rgb: 255, 176, 32;
  --ember: #ff4552;
  --ember-rgb: 255, 69, 82;
  --void: #000000;
  --void-rgb: 0, 0, 0;
  --spark: #ffffff;
  color-scheme: dark;
}

/* straight lines only: no rounding, glow, shadow or looping motion */
[data-theme='seraph'] *,
[data-theme='seraph'] *::before,
[data-theme='seraph'] *::after {
  text-shadow: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  animation: none !important;
}
[data-theme='seraph'] svg * { filter: none !important; }
[data-theme='seraph'] body { -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }

/* ── the panel: flat on the page; a label row over a hairline ────────────── */
[data-theme='seraph'] sigil-panel { padding: 4px 0 8px; background: none; }
[data-theme='seraph'] .sp-aura,
[data-theme='seraph'] .sp-frame,
[data-theme='seraph'] .sp-glass,
[data-theme='seraph'] .sp-scan,
[data-theme='seraph'] .sp-corner,
[data-theme='seraph'] .sp-notch,
[data-theme='seraph'] .sp-noise,
[data-theme='seraph'] .sp-rune,
[data-theme='seraph'] .sp-sigil { display: none !important; }
[data-theme='seraph'] .sp-head { height: 22px; gap: 8px; }
[data-theme='seraph'] .sp-name { font: 500 9px/1 var(--mono); letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-faint); }
[data-theme='seraph'] .sp-code { display: flex; align-items: center; gap: 6px; font: 500 9.5px/1 var(--mono); letter-spacing: 0.14em; color: var(--ink); }
[data-theme='seraph'] .sp-code::before { content: ''; flex: none; width: 4px; height: 4px; background: var(--sig); }
[data-theme='seraph'] .sp-rule { position: relative; height: 1px; margin: 4px 0 14px; background: var(--hair); overflow: visible; }
[data-theme='seraph'] .sp-rule::after { content: ''; display: block; position: absolute; left: 0; top: -1px; width: 22px; height: 3px; background: var(--ink); }
[data-theme='seraph'] .sp-foot { margin-top: 16px; padding-top: 8px; border-top: 1px solid var(--hair); font: 400 8.5px/1.4 var(--mono); letter-spacing: 0.16em; color: var(--ink-faint); }
[data-theme='seraph'] .sp-status { color: var(--ink-faint); }

/* controls: hairline boxes; pressed = inverted */
[data-theme='seraph'] .sp-act,
[data-theme='seraph'] .btn { clip-path: none; color: var(--ink); background: transparent; border: 1px solid var(--hair-strong); }
/* toggles (chips, tabs): off is faint and dashed; on is inverted, solid ink, with a check mark (as in Sanctum) */
[data-theme='seraph'] .chip,
[data-theme='seraph'] .tab { display: inline-flex; align-items: center; gap: 6px; clip-path: none; color: var(--ink-faint); background: transparent; border: 1px dashed var(--hair-strong); }
[data-theme='seraph'] .chip.on,
[data-theme='seraph'] .tab.on { color: var(--void); background: var(--ink); border: 1px solid var(--ink); }
[data-theme='seraph'] .chip.on::after,
[data-theme='seraph'] .tab.on::after { content: '\2713\FE0E'; margin-left: 0; font: 700 10px/1 var(--mono); }
[data-theme='seraph'] .chip .g { margin-right: 0; }
/* people's link lights: green when linked, red when missing */
[data-theme='seraph'] .user .dot.linked { background: var(--ok); }
[data-theme='seraph'] .user .dot.missing { background: var(--ember); }
[data-theme='seraph'] .sp-act:active,
[data-theme='seraph'] .btn:active,
[data-theme='seraph'] .chip:active { color: var(--void); background: var(--ink); }
[data-theme='seraph'] .seg { gap: 2px; }
[data-theme='seraph'] .seg i { transform: none; }
[data-theme='seraph'] .view { --cut-v: 0px; outline: 1px solid var(--hair); }
[data-theme='seraph'] .view::after { display: none; }
[data-theme='seraph'] .warm { color: var(--amber); }
[data-theme='seraph'] .hot { color: var(--ember); }

/* ── wireframe figures (ui/kit/wire.js): a framed plate, tap for the numbers ─ */
[data-theme='seraph'] body.wire-on [data-wire-replace] { display: none !important; } /* what the figure stands in for */
[data-theme='seraph'] .wire-fig { position: relative; margin: 0 0 14px; border: 1px solid var(--hair); }
[data-theme='seraph'] .wf-stage { position: relative; }
[data-theme='seraph'] .wire-fig canvas { display: block; width: 100%; height: var(--wire-h, 168px); touch-action: pan-y; }
[data-theme='seraph'] .wire-fig .wf-cap {
  display: flex; align-items: center; gap: 8px; height: 24px; padding: 0 8px; border-top: 1px solid var(--hair);
  font: 500 8.5px/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); cursor: pointer;
}
[data-theme='seraph'] .wf-cap b { font-weight: 500; color: var(--ink); }
[data-theme='seraph'] .wf-cap .wf-more { margin-left: auto; color: var(--ink); }
[data-theme='seraph'] .wire-fig.open .wf-more { color: var(--sig); }
[data-theme='seraph'] .wf-tag { position: absolute; font: 500 8.5px/1.3 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); pointer-events: none; white-space: nowrap; }
[data-theme='seraph'] .wf-tag b { display: block; font: 300 22px/1 var(--display); letter-spacing: -0.01em; text-transform: none; color: var(--ink); }
[data-theme='seraph'] .wf-tag b small { font: 500 9px/1 var(--mono); letter-spacing: 0.1em; color: var(--ink-faint); margin-left: 2px; }
[data-theme='seraph'] .wf-tag.tl { top: 8px; left: 9px; }
[data-theme='seraph'] .wf-tag.tr { top: 8px; right: 9px; text-align: right; }
[data-theme='seraph'] .wf-tag.bl { bottom: 8px; left: 9px; }
[data-theme='seraph'] .wf-tag.br { bottom: 8px; right: 9px; text-align: right; }
/* corner ticks on the plate */
[data-theme='seraph'] .wire-fig::before,
[data-theme='seraph'] .wire-fig::after { content: ''; position: absolute; width: 7px; height: 7px; border: 0 solid var(--ink); pointer-events: none; }
[data-theme='seraph'] .wire-fig::before { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
[data-theme='seraph'] .wire-fig::after { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }
/* the table a tap reveals */
[data-theme='seraph'] .wf-table { display: none; border-top: 1px solid var(--hair); }
[data-theme='seraph'] .wire-fig.open .wf-table { display: grid; grid-template-columns: repeat(var(--wf-cols, 2), 1fr); }
[data-theme='seraph'] .wf-table > div { display: flex; justify-content: space-between; gap: 8px; padding: 6px 8px; border-bottom: 1px solid var(--hair); font: 500 9px/1.2 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
[data-theme='seraph'] .wf-table > div:nth-child(odd) { border-right: 1px solid var(--hair); }
[data-theme='seraph'] .wf-table b { font-weight: 500; color: var(--ink); white-space: nowrap; }
[data-theme='seraph'] .wf-table b.sig { color: var(--sig); }
[data-theme='seraph'] .wf-table b.hot { color: var(--ember); }
[data-theme='seraph'] .wf-table b.warm { color: var(--amber); }