/* ITS-125 — self-contained styling for the generic role workspace.
   Theme-able: a manifest sets --accent; everything else derives from it.
   No dependency on the ENSEK stylesheet. */
:root {
  --accent: #2f6df0;
  --ink: #16203a;
  --ink-soft: #45506b;
  --ink-dim: #69748f;
  --bg: #f7f8fb;
  --surface: #ffffff;
  --line: #e3e7ef;
  --line-strong: #c8cfdd;
  --pos: #15803d;
  --neg: #c2410c;
  --dark: #16203a;
  --on-dark: #eef1f7;
  --on-dark-soft: #aeb7cc;
  --font-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --maxw: 78rem;
  --pad-x: clamp(1.1rem, 4vw, 3rem);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-sans); color: var(--ink); background: var(--bg); line-height: 1.5; }
h1, h2, h3 { line-height: 1.05; letter-spacing: -0.02em; font-weight: 800; margin: 0; }
a { color: var(--accent); }
.shell { width: min(100%, var(--maxw)); margin-inline: auto; padding-inline: var(--pad-x); }
.mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; }
.muted { color: var(--ink-dim); }
.mono { font-family: var(--font-mono); }
.eyebrow { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin: 0 0 0.6rem; display: inline-flex; align-items: center; gap: 0.5rem; }
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.lede { font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.35rem); color: var(--ink-soft); max-width: 64ch; }

/* header */
.site-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; }
.site-header.is-scrolled { border-bottom-color: var(--line); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.85rem; }
.brand { display: inline-flex; align-items: baseline; gap: 0.5rem; font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; text-decoration: none; color: var(--ink); }
.brand .smart-by { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-dim); font-weight: 500; }
.nav-links { display: flex; gap: 1.1rem; font-size: 0.9rem; }
.nav-links a { color: var(--ink-soft); text-decoration: none; }
.nav-links a[aria-current="page"], .nav-links a:hover { color: var(--accent); }

/* hero */
.hero { padding-block: clamp(2rem, 5vw, 3.5rem) 1rem; }
.hero h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3.3rem); }
.pillrow { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.8rem; }
.metapill { font-family: var(--font-mono); font-size: 0.72rem; padding: 0.2rem 0.55rem; border-radius: 999px; background: color-mix(in srgb, var(--accent) 10%, transparent); color: color-mix(in srgb, var(--accent) 70%, var(--ink)); }

.rule { border: none; border-top: 1px solid var(--line); margin-block: 1.5rem; }

/* engine grid */
.engine-grid { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 860px) { .engine-grid { grid-template-columns: 1fr; } }

.qlist { display: flex; flex-direction: column; gap: 0.5rem; }
.qbtn { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 0.7rem 0.85rem; cursor: pointer; display: flex; flex-direction: column; gap: 0.25rem; transition: border-color .15s, box-shadow .15s; }
.qbtn:hover { border-color: var(--line-strong); }
.qbtn.is-active { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.qgroup { font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); }
.qtext { font-size: 0.92rem; color: var(--ink); line-height: 1.35; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.1rem; margin-bottom: 1rem; }
.panel h3 { font-size: 1rem; display: flex; align-items: center; gap: 0.5rem; }
.pill { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.12rem 0.45rem; border-radius: 999px; font-weight: 600; }
.pill.assist { background: #fef3c7; color: #92400e; }
.pill.auto { background: color-mix(in srgb, var(--accent) 14%, transparent); color: color-mix(in srgb, var(--accent) 75%, var(--ink)); }

.sqlbox { width: 100%; min-height: 150px; font-family: var(--font-mono); font-size: 0.85rem; padding: 0.7rem; border: 1px solid var(--line-strong); border-radius: 10px; background: #0f1729; color: #d7e0f4; resize: vertical; line-height: 1.5; }
.runbar { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.6rem; flex-wrap: wrap; }
.btn { font: inherit; font-weight: 600; border-radius: 9px; padding: 0.45rem 0.9rem; cursor: pointer; border: 1px solid transparent; }
.btn-sm { font-size: 0.85rem; padding: 0.4rem 0.7rem; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-ghost { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.status { font-family: var(--font-mono); font-size: 0.78rem; }
.status.ok { color: var(--pos); }
.status.err { color: var(--neg); }

.headline { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); font-weight: 800; margin: 0 0 0.6rem; }
.headline .unit { font-size: 0.85rem; font-weight: 500; color: var(--ink-dim); margin-left: 0.4rem; }

.tablewrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 0.85rem; }
th, td { text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-dim); }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
td.pos { color: var(--pos); } td.neg { color: var(--neg); }
.deviation tr.sev-critical td, .deviation tr.sev-major td, .deviation tr.sev-fail td, .deviation tr.sev-rejected td,
.deviation tr.sev-overdue td, .deviation tr.sev-action-limit-breach td, .deviation tr.sev-not-contemporaneous td { background: color-mix(in srgb, var(--neg) 8%, transparent); }
.deviation tr.sev-minor td, .deviation tr.sev-warn td, .deviation tr.sev-alert td, .deviation tr.sev-unreviewed td, .deviation tr.sev-pending td { background: #fef9c3; }
.muted.ok { color: var(--pos); font-weight: 600; }

/* kpi board */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.8rem; }
.kpi-card { border: 1px solid var(--line); border-radius: 12px; padding: 0.8rem 0.9rem; background: var(--bg); }
.kpi-label { font-weight: 700; font-size: 0.92rem; margin: 0 0 0.5rem; }
.kpi-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; padding: 0.15rem 0; }
.kpi-val { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.05rem; }
.kpi-val.pos { color: var(--pos); } .kpi-val.neg { color: var(--neg); }
.kpi-unit { font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.03em; }

/* chart */
.chart { display: flex; align-items: flex-end; gap: 3px; height: 160px; padding: 0.5rem 0; }
.bar { flex: 1; background: linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 55%, #fff)); border-radius: 3px 3px 0 0; min-width: 4px; }
.chartlabels { display: flex; gap: 3px; }
.chartlabels span { flex: 1; font-size: 0.6rem; color: var(--ink-dim); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* context rows (JD task / standard / control point / falsifier) */
.ctx { border-left: 3px solid var(--line-strong); padding: 0.5rem 0 0.5rem 0.8rem; margin-top: 0.7rem; }
.ctx .ctx-label { font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-dim); margin: 0 0 0.2rem; }
.ctx p { margin: 0; font-size: 0.9rem; color: var(--ink-soft); }
.ctx.cp { border-left-color: var(--accent); }
.ctx.fals { border-left-color: var(--pos); }
.ctx.skill { border-left-color: #f59e0b; }

.band { background: var(--dark); color: var(--on-dark); padding-block: 2.5rem; }
.band h2 { color: var(--on-dark); }
.prov { color: var(--on-dark-soft); line-height: 1.6; }
.prov strong { color: var(--on-dark); }
.site-footer { padding-block: 2.5rem; color: var(--ink-dim); font-size: 0.85rem; border-top: 1px solid var(--line); }

/* role directory */
.rolecards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.rolecard { display: block; text-decoration: none; color: inherit; border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem 1.2rem; background: var(--surface); transition: border-color .15s, transform .15s; }
.rolecard:hover { border-color: var(--accent); transform: translateY(-2px); }
.rolecard .rc-arch { font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); }
.rolecard h3 { font-size: 1.15rem; margin: 0.3rem 0; }
.rolecard p { margin: 0; color: var(--ink-dim); font-size: 0.88rem; }

.reveal { opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s; }
.reveal.in, .reveal.show { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }