/* ============================================================
   NSOffice Workflow Frame - PART A (shared)
   Delta layer on top of nsoffice-glass-ui/assets/tokens.css.
   Link tokens.css FIRST, then this file.

   This half is byte-identical across nsoffice-studio-ui,
   nsoffice-grid-ui and nsoffice-tower-ui. If you change it,
   mirror the change in all three skills.

   Brand rules honoured here (2026 Brand Guidelines, Madhvan Anand):
   - Electric Blue stays the only accent. 60/30/10 holds.
   - Secondary colours NEVER colour text and NEVER fill a large
     surface behind light text. They appear only as a 3px rail,
     an 8px dot, a 1.5px stroke, an icon glyph, or a signature
     gradient hairline.
   - Tertiary tints stay in presentation decks. Product surfaces
     use white, --bg-alt, --lavender, --blue-soft and the grey ramp.
   ============================================================ */

:root {
  /* ---------- Greyscale ramp (from the brand deck) ---------- */
  --g-0:#FFFFFF; --g-50:#F7F7F7; --g-100:#E5E5E5; --g-200:#CCCCCC;
  --g-300:#B2B2B2; --g-400:#999999; --g-500:#7F7F7F; --g-600:#666666;
  --g-700:#4C4C4C; --g-800:#333333; --g-900:#191919;

  /* ---------- Status hues: indicators only, never text ----------
     amber = attention / exception / needs a human
     cyan  = verified / on track / cleared
     pink  = breach / blocked / failed
     violet= machine generated, not yet reviewed by a person      */
  --st-attention:#FF9100;
  --st-clear:#00E7FF;
  --st-critical:#FF00B7;
  --st-ai:#6300FF;
  --st: var(--blue);            /* per-element override */

  /* ---------- Signature gradients (deck: approved combinations) ---------- */
  --sig-studio: linear-gradient(90deg,#6300FF 0%,#0000FE 100%);
  --sig-grid:   linear-gradient(90deg,#00E7FF 0%,#0000FE 100%);
  --sig-tower:  linear-gradient(90deg,#FF9100 0%,#0000FE 100%);
  --sig: var(--sig-studio);
  --sig-hue: var(--st-ai);

  /* ---------- Workflow shell metrics ---------- */
  --shell-max: 1440px;
  --panel-w: 344px;
  --rail-h: 3px;
  --topbar-h: 64px;
}

[data-tpl="studio"] { --sig: var(--sig-studio); --sig-hue: var(--st-ai); }
[data-tpl="grid"]   { --sig: var(--sig-grid);   --sig-hue: var(--st-clear); }
[data-tpl="tower"]  { --sig: var(--sig-tower);  --sig-hue: var(--st-attention); }

/* ---------- Shell ---------- */
.wf-shell { max-width: var(--shell-max); margin: 0 auto; min-height: 100vh; background: var(--bg); }
.wf-rail { height: var(--rail-h); background: var(--sig); }
.wf-topbar {
  display: flex; align-items: center; gap: var(--space-md);
  height: var(--topbar-h); padding: 0 var(--space-lg);
  border-bottom: 1px solid var(--line); background: rgba(255,255,255,0.86);
  backdrop-filter: saturate(1.6) blur(12px);
  position: sticky; top: 0; z-index: 20;
}
.wf-mark { font: var(--text-medium); font-weight: 800; letter-spacing: -0.01em; }
.wf-crumb { font: var(--text-caption); color: var(--slate); display: flex; gap: var(--space-sm); align-items: center; }
.wf-spacer { flex: 1; }
.wf-body { padding: var(--space-lg); }

/* ---------- Layers ---------- */
.layer { margin-bottom: var(--space-xl); }
.layer-label {
  font: var(--text-caption); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--slate); margin-bottom: var(--space-md);
  display: flex; align-items: center; gap: var(--space-sm);
}
.layer-label::after { content:""; flex:1; height:1px; background: var(--line); }

/* ---------- Decision Bar, signature dressing ----------
   A 1.5px gradient stroke. Never a gradient fill behind the text. */
.decision-bar.sig {
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    var(--sig) border-box;
  border: 1.5px solid transparent;
  box-shadow: var(--shadow-card);
}
.decision-bar.sig:focus-within { box-shadow: var(--shadow-float); }

/* ---------- Status primitives ---------- */
.st-attention { --st: var(--st-attention); }
.st-clear     { --st: var(--st-clear); }
.st-critical  { --st: var(--st-critical); }
.st-ai        { --st: var(--st-ai); }

.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--st); flex: none; display: inline-block; }
.railed { position: relative; padding-left: var(--space-lg); }
.railed::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; border-radius: 3px; background: var(--st);
}
/* Status label: the WORD is always ink. Colour rides on the dot. */
.status { display: inline-flex; align-items: center; gap: var(--space-sm);
  font: var(--text-caption); font-weight: 700; color: var(--ink); }

/* ---------- Evidence chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.chip {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  padding: 6px 12px; border-radius: var(--radius-pill);
  background: var(--bg-alt); border: 1px solid var(--line);
  font: var(--text-caption); color: var(--ink); white-space: nowrap;
}
.chip .material-symbols-rounded { font-size: 16px; color: var(--blue); }
.chip.on { background: var(--blue-soft); border-color: rgba(0,0,254,0.18); }

/* ---------- Provenance ---------- */
.cite {
  font: var(--text-caption); font-weight: 700; color: var(--blue);
  background: var(--blue-soft); border-radius: 6px; padding: 1px 6px;
  cursor: pointer; vertical-align: baseline;
}
.cite:hover { filter: brightness(0.94); }
.evidence {
  border-left: 2px solid var(--line); padding-left: var(--space-md);
  font: var(--text-caption); color: var(--g-600);
}

/* ---------- Confidence (neutral by design; colour would overstate it) ---------- */
.conf { display: flex; align-items: center; gap: var(--space-sm); font: var(--text-caption); color: var(--slate); }
.conf-track { width: 56px; height: 4px; border-radius: 4px; background: var(--g-100); overflow: hidden; }
.conf-fill { height: 100%; background: var(--g-700); }
.conf[data-level="low"] .conf-fill { background: var(--g-300); }

/* ---------- Run trace ---------- */
.trace { border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.trace summary {
  list-style: none; cursor: pointer; padding: 14px var(--space-lg);
  font: var(--text-medium); font-weight: 700; display: flex; align-items: center; gap: var(--space-sm);
}
.trace summary::-webkit-details-marker { display: none; }
.trace-step {
  display: flex; gap: var(--space-md); padding: 12px var(--space-lg);
  border-top: 1px solid var(--line); align-items: flex-start;
}
.trace-step .material-symbols-rounded { font-size: 18px; color: var(--slate); }
.trace-step b { font: var(--text-medium); font-weight: 700; display: block; }
.trace-step span { font: var(--text-caption); color: var(--g-600); }

/* ---------- Empty and loading ---------- */
.empty {
  text-align: center; padding: var(--space-2xl) var(--space-lg);
  border: 1px dashed var(--line); border-radius: var(--radius-lg);
}
.empty .icon-chip { margin: 0 auto var(--space-md); }
.empty p { color: var(--slate); max-width: 420px; margin: 0 auto var(--space-lg); }
.skeleton {
  background: linear-gradient(90deg, var(--g-50) 25%, var(--g-100) 37%, var(--g-50) 63%);
  background-size: 400% 100%; animation: shimmer 1.4s ease-in-out infinite;
  border-radius: 6px; height: 12px;
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ---------- Small type helpers ---------- */
.meta { font: var(--text-caption); color: var(--slate); }
.kv { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-sm) var(--space-md); font: var(--text-caption); }
.kv dt { color: var(--slate); }
.kv dd { color: var(--ink); font-weight: 500; }

/* ---------- Accessibility ---------- */
:where(a,button,summary,[tabindex]):focus-visible {
  outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================
   PART B - GRID components
   Unit of work: one set x one rubric. Layout: table plus drill panel.
   ============================================================ */

.gridwrap { border: 1px solid var(--line); border-radius: var(--radius-md); overflow: auto; background: var(--bg); max-height: 68vh; }
table.gx { border-collapse: separate; border-spacing: 0; width: 100%; font: var(--text-caption); }
table.gx th, table.gx td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 12px var(--space-md); text-align: left; vertical-align: top; }
table.gx thead th {
  position: sticky; top: 0; z-index: 3; background: var(--bg-alt);
  font-weight: 700; color: var(--ink); white-space: nowrap;
}
table.gx thead th .q { display: block; font-weight: 400; color: var(--slate); max-width: 220px; white-space: normal; margin-top: 2px; }
table.gx tbody th {
  position: sticky; left: 0; z-index: 2; background: var(--bg);
  font-weight: 700; color: var(--ink); min-width: 220px; max-width: 260px;
}
table.gx thead th:first-child { z-index: 4; left: 0; background: var(--bg-alt); }
table.gx tbody tr:hover td, table.gx tbody tr:hover th { background: var(--bg-alt); }
table.gx tbody tr[aria-selected="true"] td, table.gx tbody tr[aria-selected="true"] th { background: var(--blue-soft); }

/* ---------- Cells ---------- */
.cell { cursor: pointer; min-width: 180px; position: relative; }
.cell .verdict { font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.cell .detail { color: var(--g-600); margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cell .cite { margin-top: 6px; display: inline-block; }
.cell[data-state="pending"] .verdict { color: var(--slate); font-weight: 400; }
.cell[data-state="running"] { background: linear-gradient(90deg, transparent, rgba(0,0,254,0.04), transparent); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.cell[data-state="flagged"] { --st: var(--st-attention); }
.cell[data-state="failed"]  { --st: var(--st-critical); }
.cell[data-state="clear"]   { --st: var(--st-clear); }
.cell[data-state="flagged"], .cell[data-state="failed"], .cell[data-state="clear"] { box-shadow: inset 3px 0 0 var(--st); }
.cell[data-override="true"]::after {
  content: "edited"; position: absolute; top: 8px; right: 8px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; color: var(--slate);
}

/* ---------- Rubric bar ---------- */
.rubric { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; margin-bottom: var(--space-md); }
.rubric .chip button { background: none; border: none; cursor: pointer; color: var(--slate); display: grid; place-items: center; padding: 0; }
.addcol { border: 1px dashed var(--line); background: var(--bg); color: var(--blue); }

/* ---------- Summary strip ---------- */
.summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-md); margin-bottom: var(--space-lg); }
.stat { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-md); background: var(--bg); }
.stat b { display: block; font: var(--text-title); font-size: 28px; letter-spacing: -0.01em; }
.stat span { font: var(--text-caption); color: var(--slate); display: flex; align-items: center; gap: 6px; margin-top: 4px; }

/* ---------- Drill panel ---------- */
.drill {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); z-index: 40;
  background: var(--bg); border-left: 1px solid var(--line); box-shadow: -16px 0 48px rgba(46,52,63,0.10);
  display: flex; flex-direction: column; transform: translateX(0); transition: transform var(--t-med);
}
.drill[hidden] { display: none; }
.drill header { padding: var(--space-lg); border-bottom: 1px solid var(--line); }
.drill .body { padding: var(--space-lg); overflow: auto; flex: 1; display: grid; gap: var(--space-lg); align-content: start; }
.drill footer { padding: var(--space-md) var(--space-lg); border-top: 1px solid var(--line); display: flex; gap: var(--space-sm); }
.quote { background: var(--bg-alt); border-radius: var(--radius-sm); padding: var(--space-md); font: var(--text-caption); color: var(--g-700); }
.quote mark { background: var(--blue-soft); color: var(--ink); border-radius: 3px; padding: 0 2px; }