/* ═══════════════════════════════════════════════════════
   GradeAssist — Unified Design System
   Single source of truth for all templates.
   ═══════════════════════════════════════════════════════ */

@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Instrument+Serif:ital@0;1&display=swap");

:root {
  /* ── Backgrounds ─────────────────── */
  --bg:        #f8fafc;
  --surface:   #ffffff;
  --surface2:  #f1f5f9;
  --paper:     #fdfcfb;
  --panel:     #ffffff;

  /* ── Typography ──────────────────── */
  --ink:       #1e293b;   /* slate ink */
  --text:      #1e293b;
  --text-dim:  #475569;   /* slate-600 */
  --muted:     #64748b;   /* slate-500 */

  /* ── Product Palette (Stitch color board, 2026-05-15) ── */
  --accent:        #0d9488;   /* petrol primary */
  --accent-strong: #0f766e;   /* deep petrol */
  --accent-soft:   #f0fdfa;   /* selected/hover wash */
  --accent-dim:    #ccfbf1;   /* stronger selected wash */
  --ai:            #2563eb;   /* GradeAssist proposal blue */
  --ai-soft:       #eff6ff;
  --training:      #15803d;   /* finalized/training-ready sage */
  --training-soft: #f0fdf4;

  /* ── Semantic status ─────────────── */
  --ok:          #15803d;
  --ok-soft:     #f0fdf4;
  --green:       #15803d;
  --warn:        #d97706;   /* amber-600 */
  --warn-soft:   #fffbeb;   /* amber-50  */
  --yellow:      #d97706;
  --danger:      #e11d48;   /* rose-600  */
  --danger-soft: #fff1f2;   /* rose-50   */
  --red:         #e11d48;

  /* ── Chrome ──────────────────────── */
  --border:       #dde3ec;
  --line:         #eef1f6;
  --radius:       10px;   /* inputs, small chips, batch rows   */
  --radius-md:    14px;   /* panels, disclosure cards          */
  --radius-lg:    20px;   /* hero, main surface cards          */
  --shadow:       0 1px 3px rgba(15,23,42,.07), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md:    0 4px 18px rgba(15,23,42,.10), 0 2px 6px rgba(15,23,42,.05);
  --shadow-hero:  0 8px 32px rgba(15,23,42,.09), 0 2px 8px rgba(15,23,42,.05);
  --sidebar-w:    248px;
}

/* ── Reset + Base ─────────────────────────────────────── */
html {
  color-scheme: light;
  scroll-behavior: smooth;
}

body {
  font-family: "Lora", serif !important;
  color: var(--ink) !important;
  background: var(--bg) !important;
  letter-spacing: 0 !important;
}

a { color: var(--accent); }

h1, h2, h3, h4 {
  letter-spacing: 0 !important;
  line-height: 1.18;
}

h1 { font-size: 26px !important; }
h2 { font-size: 17px !important; }
h3 { font-size: 14px !important; }

/* ── Layout wrappers ──────────────────────────────────── */
.wrap {
  max-width: 1480px !important;
  padding: 18px 20px 48px !important;
}

.back {
  margin-bottom: 10px !important;
  font-size: 13px !important;
}

/* ── Hero ─────────────────────────────────────────────── */
.hero {
  border-radius: var(--radius-lg) !important;
  padding: 24px 26px !important;
  margin-bottom: 16px !important;
  background: linear-gradient(135deg, #f0fdfa 0%, #ffffff 52%) !important;
  border: 1px solid #ccfbf1 !important;
  box-shadow: var(--shadow-hero) !important;
  position: relative !important;
  overflow: hidden !important;
}

.hero::after { display: none !important; }
.hero-top { gap: 12px !important; }

/* ── Pills & chips ────────────────────────────────────── */
.eyebrow,
.pill,
.chip,
.tiny-pill,
.status-pill {
  border-radius: 999px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.eyebrow {
  padding: 4px 10px !important;
  margin-bottom: 8px !important;
  font-size: 11px !important;
  background: var(--surface2) !important;
  color: var(--muted) !important;
  border-color: var(--line) !important;
}

/* ── Text helpers ─────────────────────────────────────── */
.lead,
.meta,
.muted,
.panel-head p {
  color: var(--muted) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

/* ── Action rows ──────────────────────────────────────── */
.hero-actions,
.chip-row {
  gap: 8px !important;
  margin-top: 12px !important;
}

/* ── Metrics grid ─────────────────────────────────────── */
.metrics {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 8px !important;
  margin-top: 14px !important;
}

/* ── Card family ──────────────────────────────────────── */
.metric,
.status-card,
.artifact-card,
.rubric-card,
.issue-card,
.clarify-card,
.question-card,
.summary-card,
.submission-card,
.card,
.page-card,
.evidence-card,
.gate-card,
.inspector-mini,
.review-item,
.job-card {
  border-radius: 12px !important;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow) !important;
}

.metric { padding: 12px 16px !important; }

.metric-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.metric-link:hover { border-color: var(--accent) !important; }

/* ── Label styles ─────────────────────────────────────── */
.metric-label,
.metric strong,
.panel-title,
.section-title,
.sidebar-label,
.review-title,
.telemetry-toggle,
.status-card strong,
.artifact-card strong,
.inspector-mini strong,
.gate-card strong,
.artifact-label {
  color: var(--muted) !important;
  font-size: 11px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-weight: 650 !important;
}

.metric-value,
.metric div:last-child {
  margin-top: 6px !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
}

/* ── Two-pane shell ───────────────────────────────────── */
.shell {
  grid-template-columns: 210px minmax(0, 1fr) !important;
  gap: 12px !important;
}

.rail,
.main,
.workflow,
.issue-list,
.artifact-list,
.rubric-list,
.submission-grid,
.runtime-grid,
.stack-list,
.page-list,
.card-stack,
.clarify-list {
  gap: 8px !important;
}

/* ── Panels ───────────────────────────────────────────── */
.panel {
  border-radius: var(--radius-md) !important;
  padding: 20px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-md) !important;
  backdrop-filter: none !important;
}

.panel-head {
  margin-bottom: 12px !important;
  gap: 8px !important;
}

/* ── Nav links ────────────────────────────────────────── */
.mini-nav,
.nav-list { gap: 3px !important; }

.mini-link,
.nav-link {
  border-radius: 10px !important;
  padding: 8px 11px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--ink) !important;
}

.mini-link span:first-child,
.nav-link span:first-child {
  font-size: 12px !important;
  font-weight: 650 !important;
}

.mini-link:hover,
.nav-link:hover {
  background: var(--surface2) !important;
  border-color: var(--line) !important;
}

.mini-link span:last-child,
.nav-link span:last-child {
  color: var(--muted) !important;
  font-size: 10px !important;
}

/* ── Card padding ─────────────────────────────────────── */
.card,
.page-card,
.evidence-card,
.status-card,
.artifact-card,
.rubric-card,
.issue-card,
.clarify-card,
.question-card,
.summary-card,
.submission-card,
.gate-card {
  padding: 10px 13px !important;
}

/* ── Status semantics ─────────────────────────────────── */
.issue-card,
.reason-box.danger {
  background: var(--danger-soft) !important;
  border-color: #fca5a5 !important;
  box-shadow: none !important;
}

.reason-box,
.callout,
.alert,
.progress-state {
  border-radius: var(--radius) !important;
  padding: 10px 13px !important;
}

.callout.warn,
.reason-box {
  background: var(--warn-soft) !important;
  color: var(--warn) !important;
  border: 1px solid #fde68a !important;
}

.callout.ok,
.alert.ok,
.progress-state.success {
  background: var(--ok-soft) !important;
  color: var(--ok) !important;
  border: 1px solid #bbf7d0 !important;
}

.alert.error,
.progress-state.error {
  background: var(--danger-soft) !important;
  color: var(--danger) !important;
  border: 1px solid #fecaca !important;
}

/* ── Buttons ──────────────────────────────────────────── */
.button,
button:not([data-demo-control]):not(.grounding-box):not(.bucket-item):not(.review-resolve-button):not(.review-part-tab):not(.public-mobile-nav__toggle):not(#ta-score-submit),
.btn,
.viewer-button,
.inspector-collapse-button {
  border-radius: 10px !important;
  box-shadow: none !important;
  letter-spacing: 0 !important;
}

.button,
button:not([data-demo-control]):not(.grounding-box):not(.bucket-item):not(.review-resolve-button):not(.review-part-tab):not(.public-mobile-nav__toggle):not(#ta-score-submit) {
  padding: 8px 15px !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}

.button.secondary,
button.secondary,
.button.ghost,
.btn,
.viewer-button,
.inspector-collapse-button {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}

.button:hover,
button:not([data-demo-control]):not(.grounding-box):not(.bucket-item):not(.review-resolve-button):not(.review-part-tab):not(.public-mobile-nav__toggle):not(#ta-score-submit):hover,
.btn:hover,
.viewer-button:hover {
  transform: none !important;
  border-color: var(--accent) !important;
}

/* ── Inputs ───────────────────────────────────────────── */
input,
textarea,
select {
  border-radius: var(--radius) !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  font: inherit !important;
  font-size: 13px !important;
  padding: 8px 10px !important;
}

textarea { min-height: 92px !important; }

/* ── Code ─────────────────────────────────────────────── */
pre,
code {
  border-radius: var(--radius) !important;
  background: #f8fafc !important;
  border: 1px solid var(--line) !important;
  color: #334155 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
}

pre {
  padding: 10px !important;
  margin-top: 6px !important;
  max-height: 360px;
  overflow: auto;
}

code { padding: 2px 6px !important; }

/* ── Grid helpers ─────────────────────────────────────── */
.two-col,
.status-grid { gap: 8px !important; }
.gate-strip  { gap: 8px !important; }

/* ── Grounding visualizer ─────────────────────────────── */
.visualizer-shell {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px) !important;
  gap: 10px !important;
}

.viewer-stage,
.inspector {
  border-radius: var(--radius) !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
}

.viewer-toolbar {
  padding: 8px 12px !important;
  background: var(--surface) !important;
  border-bottom: 1px solid var(--line) !important;
}

.viewer-toolbar-group { gap: 6px !important; }

.viewer-page-title {
  font-size: 13px !important;
  font-weight: 700 !important;
}

.viewer-page-count { font-size: 11px !important; }

.viewer-toggle {
  border-radius: var(--radius) !important;
  padding: 5px 8px !important;
  background: var(--surface2) !important;
  border-color: var(--line) !important;
}

.page-visual {
  min-height: 420px !important;
  padding: 14px !important;
  background: #eef1f6 !important;
}

.page-frame {
  border-radius: var(--radius) !important;
  box-shadow: 0 2px 8px rgba(15,23,42,.10) !important;
}

/* ── Grounding boxes ──────────────────────────────────── */
.grounding-box {
  border-radius: 4px !important;
  background: rgba(22,163,74,.07) !important;
  border: 2px solid rgba(22,163,74,.55) !important;
  padding: 0 !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}

.grounding-box:hover,
.grounding-box.active {
  background: rgba(22,163,74,.15) !important;
  border-color: rgba(22,163,74,.9) !important;
  box-shadow: 0 0 0 3px rgba(22,163,74,.16) !important;
}

.grounding-box.unsafe {
  background: rgba(220,38,38,.07) !important;
  border-color: rgba(220,38,38,.55) !important;
}

.grounding-box.unsafe:hover,
.grounding-box.unsafe.active {
  background: rgba(220,38,38,.15) !important;
  border-color: rgba(220,38,38,.9) !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,.15) !important;
}

.grounding-box.uncertain {
  background: rgba(22,163,74,.04) !important;
  border-color: rgba(22,163,74,.38) !important;
  border-style: dashed !important;
}

.grounding-box.uncertain:hover,
.grounding-box.uncertain.active {
  background: rgba(22,163,74,.12) !important;
  border-color: rgba(22,163,74,.85) !important;
  border-style: solid !important;
  box-shadow: 0 0 0 3px rgba(22,163,74,.12) !important;
}

/* ── Box labels ───────────────────────────────────────── */
.box-label {
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  background: #16a34a !important;
  color: #fff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.14) !important;
  letter-spacing: 0 !important;
}

.grounding-box.unsafe .box-label   { background: #dc2626 !important; }
.grounding-box.uncertain .box-label { opacity: .85; }

/* ── Inspector pane ───────────────────────────────────── */
.inspector {
  padding: 13px !important;
  min-height: 420px !important;
}

.inspector-grid {
  gap: 6px !important;
  margin: 8px 0 !important;
}

.inspector-section-title { margin-top: 10px !important; }

.math-render,
.math-formula {
  border-radius: var(--radius) !important;
  background: #f8fbff !important;
}

/* ── App shell ────────────────────────────────────────── */
aside {
  background: var(--surface) !important;
  border-right: 1px solid var(--border) !important;
}

.ga-workspace-topbar {
  box-sizing: border-box;
  --topbar-h: 64px;
  height: var(--topbar-h);
  display: flex !important;
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: 100vw;
  /* Left padding kept tight & fixed-ish (like the landing nav's 24px) so the
     logo stays left-aligned; right stays generous for the nav. */
  padding: 0 clamp(36px, 3vw, 64px) 0 clamp(20px, 1.4vw, 28px);
  background: #fff;
  border-bottom: 1px solid #d7d5d2;
  z-index: 120;
  flex-shrink: 0;
  overflow-x: clip;
}

.ga-workspace-topbar.no-brand.no-nav {
  justify-content: flex-end;
}

.ga-workspace-topbar.no-brand:not(.no-nav) {
  justify-content: flex-end;
}

.ga-workspace-topbar.is-fixed {
  position: fixed;
  inset: 0 0 auto 0;
}

.ga-workspace-topbar:not(.is-fixed) {
  position: sticky;
  top: 0;
}

.ga-workspace-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-width: max-content;
  width: fit-content;
  color: #1a1c1c;
  line-height: 1;
  text-decoration: none;
}

.ga-workspace-brand-icon {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  object-fit: contain;
}

.ga-workspace-brand-wordmark {
  display: block;
  height: calc(var(--topbar-h, 64px) * 0.9);
  max-height: calc(var(--topbar-h, 64px) * 0.9);
  width: auto;
  object-fit: contain;
}

.ga-workspace-brand-copy {
  padding-left: 10px;
  border-left: 1px solid #e2e0dc;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ga-workspace-brand-copy strong {
  color: #1a1c1c;
  font-family: "Lora", serif;
  font-size: 22px;
  font-weight: 700;
  line-height: .95;
  letter-spacing: 0;
}

.ga-workspace-brand-copy span,
.ga-workspace-nav a,
.ga-workspace-context,
.ga-workspace-link,
.ga-workspace-user,
.ga-workspace-logout button {
  font-family: "Lora", serif;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.ga-workspace-brand-copy span {
  color: #5f6368;
}

.ga-workspace-nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
  margin-left: auto !important;
  padding-right: 4px;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
}

.ga-workspace-nav::-webkit-scrollbar { display: none; }

.ga-workspace-nav a {
  position: relative;
  z-index: 1;
  color: #5f6368;
  text-decoration: none;
  padding: 7px 13px;
  border-radius: 12px;
  white-space: nowrap;
  transition: color .22s ease;
}

.ga-workspace-nav a.active {
  color: #006a61;
}

.ga-workspace-nav.js-indicator a.is-active,
.ga-workspace-nav.js-indicator a:hover {
  color: #ffffff;
}

.ga-nav-indicator {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, 0) 54%),
    linear-gradient(158deg, #0b8f81, #006a61 62%, #00564e);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .24), 0 2px 5px rgba(0, 0, 0, .16);
  opacity: 0;
  pointer-events: none;
  transition: transform .34s cubic-bezier(.6, .15, .12, 1), width .34s cubic-bezier(.6, .15, .12, 1), height .28s ease, opacity .2s ease;
  will-change: transform, width, height;
}

.ga-workspace-actions {
  margin-left: 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.ga-workspace-context {
  min-width: 0;
  max-width: min(320px, 38vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #5f6368;
  border: 1px solid #d7d5d2;
  border-radius: 4px;
  background: #f4f3f2;
  padding: 8px 12px;
}

.ga-workspace-link {
  color: #5f6368;
  text-decoration: none;
  white-space: nowrap;
}

.ga-workspace-link:hover { color: #006a61; }

.ga-workspace-user {
  min-width: 0;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #5f6368;
}

.ga-workspace-logout { margin: 0; }

.ga-workspace-logout button {
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #5f6368 !important;
  padding: 0 !important;
  cursor: pointer;
  font-size: 11px !important;
  font-weight: 750 !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
}

.ga-workspace-logout button:hover {
  color: #b91c1c !important;
  background: transparent !important;
  border-color: transparent !important;
}

.ga-workspace-actions > .btn,
.ga-workspace-actions > .button,
.ga-workspace-actions > button {
  height: 34px;
  white-space: nowrap;
}

@media (max-width: 980px) {
  .ga-workspace-topbar {
    height: 64px;
    gap: 14px;
    align-items: center;
    padding: 0 clamp(18px, 4vw, 32px);
    flex-wrap: nowrap;
  }
  .ga-workspace-topbar.is-fixed { position: sticky; top: 0; }
  .ga-workspace-nav {
    justify-content: flex-end;
    gap: 14px;
    flex: 1 1 auto;
    margin-left: auto !important;
    max-width: calc(100vw - 176px);
  }
  .ga-workspace-actions {
    margin-left: 10px;
    justify-content: flex-end;
    flex: 0 0 auto;
    flex-wrap: nowrap;
  }
}

@media (max-width: 640px) {
  .ga-workspace-topbar {
    gap: 10px;
    padding: 0 18px;
  }
  .ga-workspace-brand {
    gap: 8px;
  }
  .ga-workspace-brand-icon {
    width: 30px;
    height: 30px;
  }
  .ga-workspace-brand-wordmark {
    height: calc(var(--topbar-h, 64px) * 0.9);
    max-height: calc(var(--topbar-h, 64px) * 0.9);
  }
  .ga-workspace-brand-copy strong {
    font-size: 20px;
  }
  .ga-workspace-brand-copy span,
  .ga-workspace-nav a,
  .ga-workspace-context,
  .ga-workspace-link,
  .ga-workspace-user,
  .ga-workspace-logout button {
    font-size: 10px;
  }
  .ga-workspace-nav {
    gap: 12px;
    max-width: calc(100vw - 150px);
  }
}

.topbar {
  height: 46px !important;
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
}

.center-panel { padding: 16px !important; }

.right-panel {
  width: 300px !important;
  background: var(--surface) !important;
  border-left: 1px solid var(--border) !important;
}

.sidebar-header { padding: 14px 14px 12px !important; }

.sidebar-header h1,
.topbar-title { font-size: 14px !important; }

.assignment-item {
  border-radius: var(--radius) !important;
  margin: 1px 6px !important;
  padding: 7px 10px !important;
  color: var(--text-dim) !important;
}

.assignment-item:hover,
.assignment-item.active {
  background: var(--surface2) !important;
  color: var(--ink) !important;
}

/* ── Forms ────────────────────────────────────────────── */
.create-form {
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  background: var(--surface) !important;
}

/* ── Tables ───────────────────────────────────────────── */
.submissions-table th {
  color: var(--muted) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.submissions-table th,
.submissions-table td {
  padding: 8px 10px !important;
  border-color: var(--line) !important;
}

/* ── Progress ─────────────────────────────────────────── */
.score-track,
.progress-bar,
.job-progress-track { background: var(--line) !important; }

.progress-bar { height: 6px !important; }

.progress-fill,
.job-progress-fill,
.score-fill { background: var(--accent) !important; }

/* ── Disclosure / accordion ───────────────────────────── */
.console-disclosure { overflow: hidden; }

.console-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.console-disclosure > summary::-webkit-details-marker { display: none; }

.console-disclosure > summary::after {
  content: "";
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 14px;
  font-weight: 650;
  flex-shrink: 0;
  background:
    linear-gradient(45deg, transparent 46%, currentColor 48%, currentColor 54%, transparent 56%),
    linear-gradient(-45deg, transparent 46%, currentColor 48%, currentColor 54%, transparent 56%);
  background-size: 9px 9px;
  background-position: center;
  background-repeat: no-repeat;
}

.console-disclosure[open] > summary { margin-bottom: 10px; }

.console-disclosure[open] > summary::after {
  background:
    linear-gradient(90deg, transparent 26%, currentColor 28%, currentColor 72%, transparent 74%);
  background-size: 12px 12px;
  background-position: center;
  background-repeat: no-repeat;
}

.disclosure-body { display: grid; gap: 10px; }

/* ── Submission table (assignment detail) ─────────────── */
.submission-table-shell {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.submission-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.submission-table th,
.submission-table td {
  padding: 8px 11px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.submission-table th {
  color: var(--muted);
  font-weight: 650;
  background: var(--bg);
}

.submission-table tr:last-child td { border-bottom: 0; }

.row-actions {
  white-space: nowrap;
  text-align: right !important;
}

.table-filter {
  width: min(420px, 100%);
  margin-bottom: 8px;
}

/* ── State tick / row ─────────────────────────────────── */
.state-row {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.state-tick {
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  flex: 0 0 auto;
}

.state-tick.is-ok {
  border-color: #bbf7d0;
  background: var(--ok-soft);
  color: var(--ok);
}

.state-tick.is-ok::before {
  content: "✓";
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.state-tick.is-missing::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
}

/* ── Activity panel ───────────────────────────────────── */
.activity-body { padding: 10px !important; }
.job-event::before { content: "" !important; }

.empty-state { padding: 28px 18px !important; }

/* ── Pipeline live ────────────────────────────────────── */
.pipeline-live {
  --pipeline-green: #00a86b;
  --pipeline-green-strong: #008c59;
  --pipeline-green-soft: #edfaf3;
  --pipeline-green-border: #a7dfc0;
  position: relative;
  overflow: hidden;
  border-color: var(--pipeline-green-border) !important;
  border-radius: var(--radius-md) !important;
  background:
    linear-gradient(160deg, rgba(237,250,243,.95) 0%, rgba(255,255,255,.98) 60%) !important;
  box-shadow: var(--shadow-md) !important;
}

.pipeline-live::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--pipeline-green-strong), var(--pipeline-green), var(--pipeline-green-strong));
  background-size: 180% 100%;
  animation: live-flow 1.8s linear infinite;
}

.pipeline-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.pipeline-head h3 {
  margin: 3px 0 0 !important;
  font-size: 16px !important;
  line-height: 1.2;
}

.pipeline-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--pipeline-green-strong);
  font-size: 11px;
  font-weight: 750;
}

.pipeline-summary { display: none; }

.live-pulse {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--pipeline-green);
  box-shadow: 0 0 0 0 rgba(0,168,107,.32);
  animation: live-pulse 1.45s ease-out infinite;
}

.pipeline-step-count {
  flex: 0 0 auto;
  border: 1px solid var(--pipeline-green-border);
  background: var(--pipeline-green-soft);
  color: var(--pipeline-green-strong);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 750;
}

.pipeline-active {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  margin: 8px 0 12px;
  border: 1px solid var(--pipeline-green-border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}

.pipeline-active-index {
  min-width: 44px;
  height: 28px;
  padding: 0 10px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--pipeline-green);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.pipeline-active-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.pipeline-active strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 1px;
  font-size: 14px;
}

.pipeline-active p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
}

.pipeline-steps {
  display: flex;
  gap: 6px;
  margin: 10px 0 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.pipeline-step {
  flex: 0 0 auto;
  min-width: 110px;
  max-width: 148px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.68);
  color: var(--muted);
}

.pipeline-step span {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 9px;
  font-weight: 800;
}

.pipeline-step label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
}

.pipeline-step.done {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: var(--ok);
}

.pipeline-step.done span {
  border-color: #bbf7d0;
  background: var(--ok);
  color: #fff;
}

.pipeline-step.done span::before { content: "✓"; }

.pipeline-step.active {
  border-color: var(--pipeline-green-border);
  background: var(--pipeline-green-soft);
  color: var(--pipeline-green-strong);
}

.pipeline-step.active span {
  border-color: var(--pipeline-green);
  background: var(--pipeline-green);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(0,168,107,.14);
}

.pipeline-live .progress-fill {
  background: linear-gradient(90deg, var(--pipeline-green-strong), var(--pipeline-green)) !important;
}

.pipeline-step.failed {
  border-color: #fecaca;
  background: var(--danger-soft);
  color: var(--danger);
}

.pipeline-live.is-complete::before { background: var(--ok); animation: none; }
.pipeline-live.is-failed::before   { background: var(--danger); animation: none; }

.pipeline-live.is-complete .live-pulse {
  background: var(--ok);
  animation: none;
  box-shadow: none;
}

.pipeline-live.is-failed .live-pulse,
.pipeline-live.is-failed .pipeline-active-index { background: var(--danger); }

@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0,168,107,.32); }
  70%  { box-shadow: 0 0 0 7px rgba(0,168,107,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,168,107,0); }
}

@keyframes live-flow {
  from { background-position: 0% 0; }
  to   { background-position: 180% 0; }
}

/* ── Scrollbar ────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 1160px) {
  .shell,
  .visualizer-shell { grid-template-columns: 1fr !important; }

  .rail .panel,
  .sticky,
  .inspector { position: static !important; }
}

@media (max-width: 760px) {
  .wrap { padding: 14px 12px 40px !important; }

  .hero,
  .panel { padding: 12px !important; }

  .metrics,
  .status-grid,
  .two-col,
  .gate-strip { grid-template-columns: 1fr !important; }

  .right-panel { display: none !important; }
}