/* ============================================================
   Orkestriq signal — the system-feedback language
   ------------------------------------------------------------
   One stylesheet for every surface (dashboard, ops, portal, the
   public pages). It reads each page's own tokens when they exist
   (--surface, --g*, --green…) and falls back to the dashboard's
   values, so it sits on top of whichever token set a page carries.

   The motif is the segmented-O mark itself, drawn exactly as the logo at
   every level. The level is its colour: slate (info), green (attention,
   success), ochre (warning), deep green (action), claret (error), dark
   claret on a solid panel (critical), blue (queued). While something is in
   progress the arcs chase, as the house spinner does. The words beside the
   mark always name the state, so colour is never the only cue.

   Markup is produced by js/signal.js — do not hand-write it.
   Spec: docs/superpowers/specs/2026-10-08-orkestriq-signal-feedback-design.md
   ============================================================ */

:root {
  --sig-surface: var(--surface, #FFFFFF);
  --sig-canvas: var(--canvas, #F9FAFB);
  --sig-ink: var(--g900, #111827);
  --sig-muted: var(--g600, #4B5563);
  --sig-faint: var(--g400, #6B7280);
  --sig-line: var(--g100, #E5E7EB);
  --sig-line-strong: var(--g200, #D1D5DB);

  /* Level inks. Measured on white: info 7.6, attention 5.4, warning 5.4,
     action 7.9, error 7.3 — all clear AA as text. */
  --sig-info: #4B5563;
  --sig-attention: #167959;
  --sig-warning: #9A5B05;   /* ochre, not traffic-light orange */
  --sig-action: #0A5C45;
  --sig-error: #A32235;     /* the house claret, hsl(351 65% 39%) */
  --sig-critical: #7E1A2A;
  --sig-success: #167959;
  --sig-queued: #1E40AF;    /* ops: "worked, waiting to send" */

  /* The toast is inverted against the page, like the one it replaces. */
  --sig-toast-bg: #111827;
  --sig-toast-ink: #F9FAFB;
  --sig-toast-muted: #C3C9D1;

  --sig-radius: var(--r, 12px);
  --sig-radius-s: var(--rs, 8px);
  --sig-shadow: 0 10px 30px -12px rgba(17,24,39,.35), 0 2px 6px rgba(17,24,39,.08);
  --sig-ease: cubic-bezier(.2, .8, .2, 1);
    --sig-z: var(--z-toast, 1200);
  --sig-bottom: 24px;                          /* pages with a bottom bar override this */
  /* Screen backdrop: five nodes on one line, the middle one knocked off it. */
  --sig-trace: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' fill='none' stroke='%23D1D5DB' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M0 60H560M640 60H1200'/%3E%3Ccircle cx='160' cy='60' r='5' fill='%23F9FAFB'/%3E%3Ccircle cx='380' cy='60' r='5' fill='%23F9FAFB'/%3E%3Ccircle cx='606' cy='44' r='6' fill='%23F9FAFB'/%3E%3Ccircle cx='820' cy='60' r='5' fill='%23F9FAFB'/%3E%3Ccircle cx='1040' cy='60' r='5' fill='%23F9FAFB'/%3E%3C/svg%3E");
}
[data-theme="dark"] {
  --sig-trace: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' fill='none' stroke='%233A424A' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M0 60H560M640 60H1200'/%3E%3Ccircle cx='160' cy='60' r='5' fill='%230F1214'/%3E%3Ccircle cx='380' cy='60' r='5' fill='%230F1214'/%3E%3Ccircle cx='606' cy='44' r='6' fill='%230F1214'/%3E%3Ccircle cx='820' cy='60' r='5' fill='%230F1214'/%3E%3Ccircle cx='1040' cy='60' r='5' fill='%230F1214'/%3E%3C/svg%3E");
}

[data-theme="dark"] {
  --sig-info: #B9C1C9;
  --sig-attention: #3DDC97;
  --sig-warning: #F5C451;
  --sig-action: #6FE9B4;
  --sig-error: #F2A3AE;
  --sig-critical: #EF6274;
  --sig-success: #3DDC97;
  --sig-queued: #93C5FD;
  --sig-toast-bg: #E8ECEF;
  --sig-toast-ink: #111827;
  --sig-toast-muted: #4B5563;
  --sig-shadow: 0 10px 30px -12px rgba(0,0,0,.7), 0 2px 6px rgba(0,0,0,.4);
}

/* The inverted toast needs level inks that read on ITS surface, not the page's. */
.sig-toast { --sig-info: #C3C9D1; --sig-attention: #3DDC97; --sig-warning: #F5C451; --sig-action: #6FE9B4; --sig-error: #FF8FA0; --sig-critical: #FF8FA0; --sig-success: #3DDC97; --sig-queued: #93C5FD; }
[data-theme="dark"] .sig-toast { --sig-info: #4B5563; --sig-attention: #167959; --sig-warning: #9A5B05; --sig-action: #0A5C45; --sig-error: #A32235; --sig-critical: #7E1A2A; --sig-success: #167959; --sig-queued: #1E40AF; }

/* Level → ink. Every component below colours itself from --sig-c. */
[data-level="info"]      { --sig-c: var(--sig-info); }
[data-level="attention"] { --sig-c: var(--sig-attention); }
[data-level="warning"]   { --sig-c: var(--sig-warning); }
[data-level="action"]    { --sig-c: var(--sig-action); }
[data-level="error"]     { --sig-c: var(--sig-error); }
[data-level="critical"]  { --sig-c: var(--sig-critical); }
[data-level="success"]   { --sig-c: var(--sig-success); }
[data-level="working"]   { --sig-c: var(--sig-attention); }
[data-level="queued"]    { --sig-c: var(--sig-queued); }

/* ── The glyph ──────────────────────────────────────────── */
.sig-glyph { display: inline-flex; flex-shrink: 0; width: var(--sig-size, 20px); height: var(--sig-size, 20px); color: var(--sig-c, currentColor); }
.sig-glyph svg { width: 100%; height: 100%; overflow: visible; display: block; }
/* The glyph IS the Orkestriq mark, unchanged at every level: same three arcs,
   same gaps, same proportions. Only the colour says the level (decided
   8 Oct 2026). The words beside it always say the same thing, so nothing
   depends on colour alone. The one movement kept is the house chase while
   something is in progress, which is the existing spinner. */
.sig-glyph .a { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.sig-glyph svg { animation: sig-arrive .26s var(--sig-ease) both; transform-origin: center; }
@keyframes sig-arrive { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }

/* In progress: the arcs chase, exactly as the loading spinner does. */
[data-level="working"] .sig-glyph .a, .sig-busy .sig-glyph .a { animation: sig-chase 1.35s linear infinite; }
[data-level="working"] .sig-glyph .a2, .sig-busy .sig-glyph .a2 { animation-delay: .45s; }
[data-level="working"] .sig-glyph .a3, .sig-busy .sig-glyph .a3 { animation-delay: .9s; }
@keyframes sig-chase { 0%, 100% { opacity: .25; } 33% { opacity: 1; } }

/* ── Shared type ────────────────────────────────────────── */
.sig-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sig-c); line-height: 1.2; }
.sig-title { font-size: 14px; font-weight: 600; color: var(--sig-ink); line-height: 1.35; }
.sig-body { font-size: 13px; color: var(--sig-muted); line-height: 1.5; margin-top: 2px; }
.sig-body b, .sig-body strong { color: var(--sig-ink); font-weight: 600; }
.sig-ref { font-size: 11px; color: var(--sig-faint); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; margin-top: 10px; }

.sig-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sig-btn { font: inherit; font-size: 13px; font-weight: 600; height: 34px; padding: 0 14px; border-radius: var(--sig-radius-s);
  border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  transition: background .15s, border-color .15s, transform .15s; }
.sig-btn.is-primary { background: var(--sig-c); color: var(--sig-surface); }
.sig-btn.is-primary:hover { filter: brightness(1.08); }
.sig-btn.is-quiet { background: transparent; color: var(--sig-ink); border-color: var(--sig-line-strong); }
.sig-btn.is-quiet:hover { background: var(--sig-canvas); }
.sig-btn:focus-visible { outline: 2px solid var(--sig-c); outline-offset: 2px; }
.sig-btn[disabled] { opacity: .55; cursor: default; }
@media (max-width: 768px), (pointer: coarse) { .sig-btn { height: 44px; padding: 0 16px; } }

/* ── The signal path (where in the event it happened) ──── */
.sig-path { display: flex; align-items: center; flex-wrap: wrap; gap: 0; margin-top: 14px; font-size: 11.5px; color: var(--sig-faint); }
.sig-path span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sig-path span::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--sig-line-strong); flex-shrink: 0; }
.sig-path span + span::after { content: none; }
.sig-path i { display: inline-block; width: 18px; height: 1.5px; background: var(--sig-line-strong); margin: 0 6px; }
.sig-path i.is-cut { background: linear-gradient(90deg, var(--sig-line-strong) 0 35%, transparent 35% 65%, var(--sig-line-strong) 65%); }
.sig-path .is-hit { color: var(--sig-c); font-weight: 600; }
.sig-path .is-hit::before { background: var(--sig-c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sig-c) 18%, transparent); }

/* ── Toast ──────────────────────────────────────────────── */
.sig-region { position: fixed; right: 24px; bottom: var(--sig-bottom); z-index: var(--sig-z); display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; max-width: min(420px, calc(100vw - 32px)); }
.sig-toast { pointer-events: auto; position: relative; overflow: hidden; display: flex; align-items: flex-start; gap: 11px;
  min-width: 240px; max-width: 100%; padding: 12px 12px 13px 14px; border-radius: var(--sig-radius-s);
  background: var(--sig-toast-bg); color: var(--sig-toast-ink); box-shadow: var(--sig-shadow);
  transform-origin: 100% 100%; animation: sig-rise .22s var(--sig-ease) both; }
.sig-toast .sig-glyph { margin-top: 1px; --sig-size: 18px; }
.sig-toast .sig-copy { flex: 1; min-width: 0; }
.sig-toast .sig-title { color: var(--sig-toast-ink); font-size: 13.5px; }
.sig-toast .sig-body { color: var(--sig-toast-muted); font-size: 12.5px; }
.sig-toast .sig-acts { margin-top: 8px; }
.sig-toast .sig-btn { height: 30px; padding: 0 11px; font-size: 12.5px; }
.sig-toast .sig-btn.is-primary { background: var(--sig-c); color: var(--sig-toast-bg); }
.sig-toast .sig-btn.is-quiet { color: var(--sig-toast-ink); border-color: color-mix(in srgb, var(--sig-toast-ink) 28%, transparent); }
.sig-toast .sig-btn.is-quiet:hover { background: color-mix(in srgb, var(--sig-toast-ink) 10%, transparent); }
.sig-x { flex-shrink: 0; width: 26px; height: 26px; margin: -4px -4px 0 0; border: 0; border-radius: 6px; background: transparent; color: var(--sig-toast-muted); font-size: 17px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.sig-x:hover { color: var(--sig-toast-ink); background: color-mix(in srgb, var(--sig-toast-ink) 10%, transparent); }
.sig-x:focus-visible { outline: 2px solid var(--sig-c); outline-offset: 1px; }
/* The signal line: how long the message has left, draining from the glyph side.
   Paused on hover and keyboard focus so nobody loses a message they are reading. */
.sig-toast .sig-line { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--sig-c); opacity: .85;
  transform-origin: left center; animation: sig-drain var(--sig-t, 4s) linear both; }
.sig-toast:hover .sig-line, .sig-toast:focus-within .sig-line { animation-play-state: paused; }
.sig-toast.is-persist .sig-line { animation: none; transform: none; opacity: .55; }
.sig-toast.is-leaving { animation: sig-sink .18s ease both; }
@keyframes sig-rise { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes sig-sink { to { opacity: 0; transform: translateY(6px) scale(.98); } }
@keyframes sig-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (max-width: 768px) {
  .sig-region { left: 16px; right: 16px; align-items: stretch; max-width: none; }
  .sig-toast { min-width: 0; }
}

/* ── Panel: the contextual notice (save failed, permission, connection) ── */
.sig-panel { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--sig-radius);
  background: color-mix(in srgb, var(--sig-c) 6%, var(--sig-surface)); border: 1px solid color-mix(in srgb, var(--sig-c) 22%, var(--sig-line));
  animation: sig-rise .22s var(--sig-ease) both; }
.sig-panel .sig-glyph { --sig-size: 22px; margin-top: 1px; }
.sig-panel .sig-copy { flex: 1; min-width: 0; }
.sig-panel .sig-eyebrow { margin-bottom: 3px; }
.sig-panel .sig-x { color: var(--sig-faint); margin: -6px -8px 0 0; }
.sig-panel .sig-x:hover { color: var(--sig-ink); background: var(--sig-canvas); }
.sig-panel.is-compact { padding: 10px 12px; }
.sig-panel.is-compact .sig-acts { margin-top: 8px; }
.sig-panel[data-level="critical"] { background: var(--sig-critical); border-color: transparent; }
.sig-panel[data-level="critical"] .sig-glyph, .sig-panel[data-level="critical"] .sig-eyebrow,
.sig-panel[data-level="critical"] .sig-title, .sig-panel[data-level="critical"] .sig-body { color: #FFFFFF; }
[data-theme="dark"] .sig-panel[data-level="critical"] .sig-glyph, [data-theme="dark"] .sig-panel[data-level="critical"] .sig-eyebrow,
[data-theme="dark"] .sig-panel[data-level="critical"] .sig-title, [data-theme="dark"] .sig-panel[data-level="critical"] .sig-body { color: #2C0910; }
.sig-panel[data-level="critical"] .sig-btn.is-primary { background: #FFFFFF; color: var(--sig-critical); }
.sig-panel[data-level="critical"] .sig-path { color: rgba(255,255,255,.78); }
.sig-panel[data-level="critical"] .sig-path span::before, .sig-panel[data-level="critical"] .sig-path i { background: rgba(255,255,255,.45); }
.sig-panel[data-level="critical"] .sig-path i.is-cut { background: linear-gradient(90deg, rgba(255,255,255,.45) 0 35%, transparent 35% 65%, rgba(255,255,255,.45) 65%); }
.sig-panel[data-level="critical"] .sig-path .is-hit { color: #FFFFFF; }
.sig-panel[data-level="critical"] .sig-path .is-hit::before { background: #FFFFFF; box-shadow: 0 0 0 3px rgba(255,255,255,.25); }
[data-theme="dark"] .sig-panel[data-level="critical"] .sig-path, [data-theme="dark"] .sig-panel[data-level="critical"] .sig-path .is-hit { color: #2C0910; }
.sig-panel.is-resolved { animation: sig-resolve .5s var(--sig-ease) .5s both; }
@keyframes sig-resolve { to { opacity: 0; transform: translateY(-4px); } }

/* ── State: a section that could not load, or has nothing yet ── */
.sig-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 20px; max-width: 440px; margin: 0 auto; }
.sig-state .sig-glyph { --sig-size: 36px; margin-bottom: 14px; }
.sig-state .sig-eyebrow { margin-bottom: 6px; }
.sig-state .sig-title { font-size: 16px; }
.sig-state .sig-body { font-size: 13.5px; margin-top: 4px; }
.sig-state .sig-acts { justify-content: center; margin-top: 16px; }
.sig-state .sig-path { justify-content: center; }
td > .sig-state { padding: 36px 16px; }

/* ── Screen: the whole page could not be shown ─────────── */
.sig-screen { position: relative; min-height: 100vh; min-height: 100dvh; width: 100%; display: flex; flex-direction: column;
  background: var(--sig-canvas); color: var(--sig-ink); font-family: inherit; isolation: isolate; overflow: hidden; }
/* The faint signal line behind the message: nodes along a line, one of them
   knocked off it. Large, quiet, and the only decoration on the page. */
.sig-screen::before { content: ''; position: absolute; inset: auto 0 4%; height: 120px; z-index: -1; opacity: .5; pointer-events: none;
  background: var(--sig-trace) center / 1200px 120px no-repeat; }
.sig-screen-top { display: flex; align-items: center; gap: 10px; padding: 22px 24px; }
.sig-screen-top img { max-height: 32px; max-width: 160px; object-fit: contain; }
.sig-mark { display: inline-flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 700; letter-spacing: -.4px; color: var(--sig-ink); text-decoration: none; }
.sig-mark svg { width: 26px; height: 26px; }
.sig-mark em { font-style: normal; color: var(--green, #167959); }
.sig-screen-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px 24px 72px; }
.sig-screen-card { width: 100%; max-width: 480px; animation: sig-rise .3s var(--sig-ease) both; }
.sig-screen .sig-glyph { --sig-size: 52px; margin-bottom: 22px; }
.sig-screen .sig-eyebrow { margin-bottom: 10px; }
.sig-screen .sig-title { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: clamp(26px, 5vw, 34px); line-height: 1.12; letter-spacing: -.01em; }
.sig-screen .sig-body { font-size: 15px; margin-top: 10px; max-width: 42ch; }
.sig-screen .sig-acts { margin-top: 24px; }
.sig-screen .sig-btn { height: 42px; padding: 0 18px; font-size: 14px; }
.sig-screen .sig-path { margin-top: 26px; }
.sig-screen-foot { padding: 0 24px 22px; font-size: 12px; color: var(--sig-faint); }
.sig-screen-foot a { color: inherit; }
.sig-screen.is-centred .sig-screen-card { text-align: center; }
.sig-screen.is-centred .sig-body { margin-left: auto; margin-right: auto; }
.sig-screen.is-centred .sig-acts, .sig-screen.is-centred .sig-path { justify-content: center; }
@media (max-width: 480px) {
  .sig-screen-main { align-items: flex-start; padding-top: 12vh; }
  .sig-screen .sig-acts { flex-direction: column; align-items: stretch; }
}

/* ── Field error ────────────────────────────────────────── */
.sig-field { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; font-size: 12.5px; line-height: 1.4; color: var(--sig-error); animation: sig-rise .16s var(--sig-ease) both; }
.sig-field .sig-glyph { --sig-size: 14px; --sig-c: var(--sig-error); margin-top: 1px; }
.sig-invalid, input.sig-invalid, select.sig-invalid, textarea.sig-invalid { border-color: var(--sig-error) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--sig-error) 14%, transparent) !important; }

/* ── Visually hidden live regions ───────────────────────── */
.sig-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Reduced motion: meaning stays (the arcs still sit where the level puts
   them), only the travel goes. ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sig-glyph svg { animation: none; }
  [data-level="working"] .sig-glyph .a, .sig-busy .sig-glyph .a { animation: none; opacity: 1; }
  .sig-toast, .sig-panel, .sig-field, .sig-screen-card { animation: none; }
  .sig-toast .sig-line { animation: none; opacity: 0; }
  .sig-toast.is-leaving, .sig-panel.is-resolved { animation: none; opacity: 0; }
}