/* Cybereum · surascura-film.css
   The shipped SuraScura module stylesheet (verbatim, BEM-scoped under .SuraScura)
   followed by the website film layer, which maps the module's --ss-* tokens onto the
   site's --cyb-* tokens for both themes and frames the replay on the Technology page. */
/* ================= SuraScura.css, verbatim ================= */
/**
 * SuraScura.css — BEM-scoped. Every colour is a token so the canvas renderer can
 * read the same values via getComputedStyle. Do not hardcode a colour anywhere
 * in the JS; add a token here instead.
 *
 * Theming follows the host: light on bare :root, dark under prefers-color-scheme
 * guarded against an explicit light choice, and again under [data-theme="dark"]
 * so a host toggle wins in both directions.
 */

.SuraScura, .SuraScura *, .SuraScura *::before, .SuraScura *::after { box-sizing: border-box; }

.SuraScura {
  --ss-bg: #F7F9FC;
  --ss-surface: #FFFFFF;
  --ss-text: #0B1220;
  --ss-ink: #0B1220;          /* earned value — the strongest mark on the plot */
  --ss-dim: #455773;
  --ss-faint: #5E7089;
  --ss-grid: #0B1220;
  --ss-line: rgba(11, 18, 32, .14);
  --ss-accent: #0369A1;       /* forecast */
  --ss-outside: #6D28D9;      /* baseline + reference class */
  --ss-warn: #A8500A;         /* milestone / contract date */
  --ss-late: #BE3123;
  --ss-ontime: #0B7F5C;
  --ss-boost: 1.95;           /* translucent fills need ~2x the alpha on paper */
  --ss-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  display: flex;
  flex-direction: column;
  min-height: 520px;
  height: 100%;
  background: var(--ss-bg);
  color: var(--ss-text);
  font-family: inherit;
  container-type: inline-size;
  position: relative;          /* containing block for the revealed drift nav */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .SuraScura {
    --ss-bg: #05080F; --ss-surface: #0E1420; --ss-text: #E6EAF2; --ss-ink: #F3F6FB;
    --ss-dim: #9AABC2; --ss-faint: #77899F; --ss-grid: #94A3B8;
    --ss-line: rgba(148, 163, 184, .22);
    --ss-accent: #00D4FF; --ss-outside: #8B5CF6; --ss-warn: #F59E0B;
    --ss-late: #F0605A; --ss-ontime: #10B981; --ss-boost: 1;
  }
}
:root[data-theme="dark"] .SuraScura {
  --ss-bg: #05080F; --ss-surface: #0E1420; --ss-text: #E6EAF2; --ss-ink: #F3F6FB;
  --ss-dim: #9AABC2; --ss-faint: #77899F; --ss-grid: #94A3B8;
  --ss-line: rgba(148, 163, 184, .22);
  --ss-accent: #00D4FF; --ss-outside: #8B5CF6; --ss-warn: #F59E0B;
  --ss-late: #F0605A; --ss-ontime: #10B981; --ss-boost: 1;
}

/* ---------------------------------------------------------------- header */

.SuraScura__header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--ss-line);
}
.SuraScura__heading { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.SuraScura__sub {
  margin: 5px 0 0; font-family: var(--ss-mono); font-size: 10px;
  letter-spacing: .12em; color: var(--ss-faint); text-transform: uppercase;
  overflow-wrap: anywhere;
}
.SuraScura__controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.SuraScura__switch { display: flex; border: 1px solid var(--ss-line); border-radius: 2px; overflow: hidden; }
.SuraScura__seg {
  appearance: none; background: transparent; border: 0;
  border-inline-end: 1px solid var(--ss-line);   /* logical: survives dir=rtl */
  font-family: var(--ss-mono); font-size: 9.5px; letter-spacing: .1em;
  color: var(--ss-dim); padding: 8px 12px; cursor: pointer; white-space: nowrap;
}
.SuraScura__seg:last-child { border-inline-end: 0; }
/* :not([aria-pressed=true]) is load-bearing. Without it this rule's higher
   specificity beat the pressed rule below and flipped the ACTIVE segment's text
   back to --ss-text over the accent fill: 1.47:1 in dark, unreadable, on hover. */
.SuraScura__seg:hover:not(:disabled):not([aria-pressed="true"]) { color: var(--ss-text); }
.SuraScura__seg[aria-pressed="true"] { background: var(--ss-accent); color: var(--ss-bg); font-weight: 500; }
.SuraScura__seg:disabled { opacity: .38; cursor: not-allowed; }
.SuraScura__seg:focus-visible { outline: 2px solid var(--ss-accent); outline-offset: -3px; }

.SuraScura__conf { display: flex; align-items: center; gap: 8px; }
.SuraScura__confLabel { font-family: var(--ss-mono); font-size: 9.5px; letter-spacing: .14em; color: var(--ss-faint); }
.SuraScura__select {
  appearance: none; background: var(--ss-surface); color: var(--ss-text);
  border: 1px solid var(--ss-line); border-radius: 2px;
  font-family: var(--ss-mono); font-size: 11px; padding: 6px 10px; cursor: pointer;
}
.SuraScura__select:focus-visible { outline: 2px solid var(--ss-accent); outline-offset: 2px; }

/* ------------------------------------------------------------------ body */

.SuraScura__body { display: flex; flex: 1 1 auto; min-height: 0; }
.SuraScura__plot { flex: 1 1 auto; position: relative; min-width: 0; min-height: 380px; }
.SuraScura__plot > canvas { display: block; width: 100%; height: 100%; }

.SuraScura__readout {
  flex: 0 0 260px; min-width: 0; padding: 22px 24px;
  border-inline-start: 1px solid var(--ss-line);   /* logical: survives dir=rtl */
  display: flex; flex-direction: column; gap: 0;
}
.SuraScura__rlab {
  margin: 0; font-family: var(--ss-mono); font-size: 9.5px;
  letter-spacing: .16em; color: var(--ss-dim); overflow-wrap: anywhere;
}
.SuraScura__rbig {
  margin: 10px 0 0; font-family: var(--ss-mono); font-weight: 700;
  font-size: 52px; line-height: .95; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; transition: color .3s;
}
.SuraScura__rbig[data-band="ok"]    { color: var(--ss-ontime); }
.SuraScura__rbig[data-band="watch"] { color: var(--ss-warn); }
.SuraScura__rbig[data-band="alert"] { color: var(--ss-late); }

.SuraScura__bandword {
  margin: 6px 0 0; font-family: var(--ss-mono); font-size: 10px;
  letter-spacing: .16em; font-weight: 500;
}
.SuraScura__bandword[data-band="ok"]    { color: var(--ss-ontime); }
.SuraScura__bandword[data-band="watch"] { color: var(--ss-warn); }
.SuraScura__bandword[data-band="alert"] { color: var(--ss-late); }

.SuraScura__badge {
  margin: 12px 0 0; align-self: flex-start;
  font-family: var(--ss-mono); font-size: 8.5px; letter-spacing: .1em;
  color: var(--ss-warn); border: 1px solid var(--ss-warn);
  border-radius: 2px; padding: 5px 8px;
}

.SuraScura__stats { margin: 20px 0 0; display: flex; flex-direction: column; gap: 11px; }
.SuraScura__stat { display: flex; flex-direction: column; gap: 2px; }
.SuraScura__stat dt {
  font-family: var(--ss-mono); font-size: 9px; letter-spacing: .13em; color: var(--ss-faint);
}
.SuraScura__stat dd {
  margin: 0; font-family: var(--ss-mono); font-size: 12px;
  font-variant-numeric: tabular-nums; color: var(--ss-text);
}
.SuraScura__stat--outside dd { color: var(--ss-outside); }
.SuraScura__stat--warn dd { color: var(--ss-warn); }

/* ---------------------------------------------------------------- footer */

.SuraScura__footer {
  padding: 11px 24px 14px; border-top: 1px solid var(--ss-line);
  font-family: var(--ss-mono); font-size: 8.5px; letter-spacing: .1em;
  color: var(--ss-faint); word-break: break-word;
}

/* Visually hidden but focusable — the live region and the drift keyboard path.
   Focusing a drift button reveals it so sighted keyboard users can see where
   they are. */
.SuraScura__sr {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* Revealed as an OVERLAY, not in flow. `position: static` here grew the nav from
   1px to ~180px, shrank the plot by a quarter and fired the ResizeObserver into a
   full canvas re-layout — on every one of the 23 drift buttons, in and out. */
.SuraScura__sr:focus-within {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 2;
  width: auto; height: auto; margin: 0;
  padding: 8px 24px; overflow: auto; max-height: 40%; clip-path: none; white-space: normal;
  background: var(--ss-surface); border-top: 1px solid var(--ss-line);
}
.SuraScura__driftBtn {
  appearance: none; background: transparent; border: 1px solid var(--ss-line);
  border-radius: 2px; color: var(--ss-dim); font: inherit; font-size: 11px;
  padding: 4px 8px; margin: 2px; cursor: pointer;
}
.SuraScura__driftBtn:focus-visible { outline: 2px solid var(--ss-accent); outline-offset: 2px; }

.SuraScura__plot > canvas:focus-visible { outline: 2px solid var(--ss-accent); outline-offset: -2px; }

/* ---------------------------------------------------------------- states */

.SuraScura--provisional .SuraScura__rbig { color: var(--ss-warn); }
.SuraScura--provisional .SuraScura__plot::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .06;
  background: repeating-linear-gradient(135deg, transparent 0 14px, var(--ss-warn) 14px 15px);
}
.SuraScura--error .SuraScura__header { opacity: .55; }
.SuraScura--error .SuraScura__seg:disabled,
.SuraScura--error .SuraScura__select:disabled { opacity: .38; }

.SuraScura__empty {
  flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center;
  align-items: center; gap: 8px; padding: 48px 24px; text-align: center;
}
.SuraScura__emptyTitle { margin: 0; font-size: 14px; font-weight: 600; }
.SuraScura__emptyBody { margin: 0; font-size: 12.5px; color: var(--ss-dim); max-width: 46ch; }
.SuraScura__errDetail {
  margin: 6px 0 0; font-family: var(--ss-mono); font-size: 10px;
  color: var(--ss-faint); max-width: 60ch; white-space: pre-wrap; text-align: left;
}

/* ----------------------------------------------------------- responsive */
/* Container queries, not viewport: this panel is embedded and resizes
   independently of the window inside ExecutiveDashboard. */

@container (max-width: 900px) {
  .SuraScura__body { flex-direction: column; }
  .SuraScura__readout {
    flex: 0 0 auto; border-left: 0; border-top: 1px solid var(--ss-line);
    flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 18px 28px;
  }
  .SuraScura__rbig { font-size: 38px; }
  .SuraScura__stats { flex-direction: row; flex-wrap: wrap; gap: 10px 24px; margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .SuraScura__rbig { transition: none; }
}

/* ======================================================================
   Cybereum website film layer. The module above owns the panel; this maps
   its tokens onto the site's design tokens in both themes and frames the
   replay as an instrument inside the Technology page.
   ====================================================================== */
.sura-film .SuraScura{
  --ss-bg:var(--cyb-bg-2);--ss-surface:var(--cyb-bg);--ss-text:var(--cyb-fg);--ss-ink:var(--cyb-fg);
  --ss-dim:var(--cyb-fg-2);--ss-faint:var(--cyb-fg-3);--ss-grid:var(--cyb-fg);--ss-line:var(--cyb-line-strong);
  --ss-accent:var(--cyb-accent);--ss-outside:#6D28D9;--ss-warn:var(--cyb-rust);--ss-late:var(--cyb-signal-text);
  --ss-ontime:#0B7F5C;--ss-boost:1.95;--ss-mono:var(--cyb-mono);
  font-family:var(--cyb-body);
}
:root[data-theme="dark"] .sura-film .SuraScura{
  --ss-bg:var(--cyb-bg-2);--ss-surface:var(--cyb-bg-3);--ss-text:var(--cyb-fg);--ss-ink:var(--cyb-glow);
  --ss-dim:var(--cyb-fg-2);--ss-faint:var(--cyb-fg-3);--ss-grid:var(--cyb-mist);--ss-line:var(--cyb-line-strong);
  --ss-accent:var(--cyb-cyan);--ss-outside:#8B5CF6;--ss-warn:var(--cyb-amber);--ss-late:var(--cyb-signal-text);
  --ss-ontime:var(--cyb-green);--ss-boost:1;
}
.sura-film{position:relative;margin:clamp(2.5rem,5vw,4rem) 0 0;display:grid;gap:0;min-width:0;border:1px solid var(--cyb-line-strong);border-radius:var(--cyb-radius-md);background:var(--cyb-bg-2);box-shadow:var(--cyb-shadow-2);overflow:hidden}
.sura-film__hud{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;padding:1.1rem 1.4rem .95rem;border-bottom:1px solid var(--cyb-line)}
.sura-film__left{min-width:0;display:grid;gap:.25rem}
.sura-film__kicker{font:500 .7rem/1.3 var(--cyb-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--cyb-accent)}
.sura-film__title{margin:0;font:400 clamp(1rem,.9rem + .5vw,1.3rem)/1.2 var(--cyb-display);letter-spacing:.015em;color:var(--cyb-fg);text-wrap:balance;transition:opacity .22s ease,transform .22s ease}
.sura-film__sub{margin:0;font:500 .7rem/1.45 var(--cyb-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cyb-fg-3);transition:opacity .22s ease,transform .22s ease}
.sura-film__metric{flex:0 0 auto;margin:0;text-align:right;font:600 clamp(1.1rem,.9rem + 1vw,1.6rem)/1 var(--cyb-mono);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--cyb-fg);transition:opacity .22s ease,transform .22s ease,color .35s ease;white-space:nowrap}
.sura-film__metric[data-tone="warn"]{color:var(--cyb-rust)}
.sura-film__metric[data-tone="alert"]{color:var(--cyb-signal-text)}
.sura-film__metric[data-tone="good"]{color:#0B7F5C}
.sura-film__metric[data-tone="accent"]{color:var(--cyb-accent)}
:root[data-theme="dark"] .sura-film__metric[data-tone="warn"]{color:var(--cyb-amber)}
:root[data-theme="dark"] .sura-film__metric[data-tone="good"]{color:var(--cyb-green)}
.sura-film .is-swapping{opacity:0;transform:translateY(4px)}
.sura-film__host{position:relative;height:736px;min-height:0;box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .45s ease}
/* A scenario change is marked by a brief edge flash, not a filter over a 700px layer. */
.sura-film__host.is-pulsing{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cyb-accent) 55%,transparent),inset 0 0 36px color-mix(in srgb,var(--cyb-accent) 10%,transparent)}
.sura-film__host .SuraScura{height:100%}
/* The readout lists up to eleven rows; when the host is shorter than that it scrolls instead of spilling over the footer. */
.sura-film .SuraScura__readout{overflow:auto;scrollbar-width:thin}
.sura-film__foot{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1.4rem .75rem;border-top:1px solid var(--cyb-line)}
.sura-film__basis{font:500 .68rem/1.45 var(--cyb-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cyb-fg-3)}
.sura-film__replay{display:inline-flex;align-items:center;gap:.45em;padding:.5rem .8rem;border:1px solid var(--cyb-line-strong);border-radius:7px;font:500 .68rem/1 var(--cyb-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cyb-fg-2);background:transparent;transition:border-color var(--cyb-fast),color var(--cyb-fast)}
.sura-film__replay:hover{border-color:var(--cyb-accent);color:var(--cyb-fg)}
.sura-film__replay:focus-visible{outline:2px solid var(--cyb-accent);outline-offset:3px}
.sura-film__progress{position:absolute;left:0;right:0;top:-1px;height:2px;background:transparent;pointer-events:none}
.sura-film__progress>i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:var(--cyb-accent);box-shadow:0 0 12px color-mix(in srgb,var(--cyb-accent) 35%,transparent);transition:transform .35s ease}
.sura-film__caption{padding:.85rem 1.4rem 1rem;font-size:.86rem;line-height:1.6;color:var(--cyb-fg-2);border-top:1px solid var(--cyb-line)}
.sura-film[data-sura-film="unavailable"] .sura-film__host::after{content:"The replay fixture could not be loaded.";position:absolute;inset:0;display:grid;place-items:center;font:500 .7rem/1.4 var(--cyb-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cyb-fg-3)}
@media (max-width:900px){
  .sura-film__host{height:760px}
  .sura-film__hud{flex-direction:column;align-items:flex-start;gap:.6rem}
  .sura-film__metric{text-align:left}
  .sura-film__foot{flex-wrap:wrap}
}
@media (max-width:560px){
  .sura-film__host{height:680px}
  .sura-film__hud,.sura-film__foot,.sura-film__caption{padding-inline:1rem}
}
@media (prefers-reduced-motion:reduce){
  .sura-film__title,.sura-film__sub,.sura-film__metric,.sura-film__host,.sura-film__progress>i,.sura-film__replay{transition:none}
  .sura-film__host.is-pulsing{box-shadow:none}
}