/* LAKANA SSI v5.2 Workspace
   Additive model suite. One central state, many coordinated model modules.
   Desktop-elite three-rail grid; mobile stacks. Nothing here deletes the
   prior twin, sliders, presets, role dashboards, or evidence track. */

:root {
  /* Chromatic Lock v3.2 — canonical LAKANA palette */
  --lakana-sovereign-navy: #071827;
  --lakana-component-navy: #102C49;
  --lakana-technical-slate: #365B7F;
  --lakana-deep-ink: #081923;
  --lakana-sovereign-veil: #091D26;
  --lakana-sovereign-teal: #00877D;
  --lakana-sovereign-gold: #C98A00;
  --lakana-deterministic-iris: #692DF7;
  --lakana-iris-interference: #00A996;
  --lakana-iris-undertone: #893B00;
  --lakana-sovereign-red: #910056;
  --lakana-red-core: #930023;

  /* Role tokens mapped onto Chromatic Lock v3.2 (no legacy hex remains) */
  --ssi-ink: var(--lakana-deep-ink);
  --ssi-ink-soft: var(--lakana-technical-slate);
  --ssi-line: rgba(8, 25, 35, 0.12);
  --ssi-line-strong: rgba(8, 25, 35, 0.24);
  --ssi-teal: var(--lakana-sovereign-teal);
  --ssi-teal-bright: var(--lakana-iris-interference);
  --ssi-gold: var(--lakana-sovereign-gold);
  --ssi-paper: #f4f6f9;
  --ssi-card: #ffffff;
  --ssi-normal: var(--lakana-sovereign-teal);
  --ssi-caution: var(--lakana-sovereign-gold);
  --ssi-warn: var(--lakana-red-core);
  --ssi-onnavy: #eaf6f6;
  --ssi-onnavy-soft: rgba(234, 246, 246, 0.7);
  --ssi-shadow: 0 18px 48px rgba(7, 24, 39, 0.16);
  --ssi-radius: 18px;
}

/* ---------- Command summary ---------- */
.ssi5-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  padding: 18px;
  border-radius: var(--ssi-radius);
  background: linear-gradient(135deg, var(--lakana-sovereign-navy) 0%, var(--lakana-component-navy) 100%);
  color: var(--ssi-onnavy);
  box-shadow: var(--ssi-shadow);
}
.ssi5-summary .ssi5-sum-cell { display: flex; flex-direction: column; gap: 4px; }
.ssi5-summary b { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ssi-teal-bright); }
.ssi5-summary span { font-size: 1.18rem; font-weight: 800; }
.ssi5-summary small { font-size: 0.74rem; color: rgba(234, 246, 246, 0.66); }

/* ---------- Workspace grid ---------- */
.ssi5-workspace {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr) minmax(300px, 380px);
  gap: 20px;
  align-items: start;
}
.ssi5-rail-left, .ssi5-rail-right { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
.ssi5-center { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* Laptop/desktop band (~881–1180px): keep the model viewport LARGE and
   inspectable — never weaker than mobile. Left rail + center stay side by
   side; the right rail drops full-width as a clean, equal-height card grid
   (not random wrapped cards). */
@media (max-width: 1180px) {
  .ssi5-workspace { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); }
  .ssi5-center { grid-row: 1; grid-column: 2; }
  .ssi5-rail-left { grid-row: 1; grid-column: 1; }
  .ssi5-rail-right {
    grid-column: 1 / -1; grid-row: 2;
    position: static;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: stretch;
    gap: 16px;
  }
  .ssi5-rail-right .ssi5-card { height: 100%; }
  /* Keep the center model big so it does not look like a stretched mobile card. */
  .ssi5-canvas-wrap { min-height: 460px; }
  .ssi5-viewport { min-height: 520px; }
}
@media (max-width: 880px) {
  .ssi5-workspace { grid-template-columns: 1fr; }
  .ssi5-rail-left, .ssi5-center, .ssi5-rail-right { grid-column: 1; }
  .ssi5-rail-left { grid-row: auto; }
  .ssi5-center { grid-row: auto; }
  .ssi5-rail-right { grid-row: auto; position: static; grid-template-columns: 1fr; }
  .ssi5-canvas-wrap { min-height: 380px; }
}

/* ---------- Cards ---------- */
.ssi5-card {
  background: var(--ssi-card);
  border: 1px solid var(--ssi-line);
  border-radius: var(--ssi-radius);
  padding: 16px;
  box-shadow: var(--ssi-shadow);
}
.ssi5-card > h2, .ssi5-card > h3 { margin: 0 0 4px; color: var(--ssi-ink); }
.ssi5-card .ssi5-card-sub { margin: 0 0 12px; color: var(--ssi-ink-soft); font-size: 0.86rem; }

/* ---------- Preset stack ---------- */
.ssi5-preset-stack .ssi5-active-row {
  display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px;
  padding: 8px; border: 1px dashed var(--ssi-line-strong); border-radius: 12px; margin-bottom: 10px;
  background: rgba(0, 135, 125, 0.04);
}
.ssi5-active-empty { color: var(--ssi-ink-soft); font-size: 0.8rem; align-self: center; }
.ssi5-active-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--ssi-teal); color: #fff; border: 0; border-radius: 999px;
  padding: 4px 8px 4px 11px; font-size: 0.76rem; font-weight: 700; cursor: pointer;
}
.ssi5-active-chip .x { font-weight: 900; opacity: 0.85; }
.ssi5-active-chip:hover { background: var(--lakana-sovereign-veil); }
.ssi5-stack-actions { display: flex; gap: 8px; margin-bottom: 12px; }
.ssi5-stack-actions button {
  flex: 1; border: 1px solid var(--ssi-line-strong); background: #fff; color: var(--ssi-ink);
  border-radius: 10px; padding: 7px; font-weight: 700; font-size: 0.78rem; cursor: pointer;
}
.ssi5-stack-actions button:hover { border-color: var(--ssi-teal); color: var(--ssi-teal); }

.ssi5-preset-group { border-top: 1px solid var(--ssi-line); padding-top: 10px; margin-top: 6px; }
.ssi5-preset-group > summary {
  cursor: pointer; font-weight: 800; font-size: 0.82rem; color: var(--ssi-ink);
  list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 4px 0;
}
.ssi5-preset-group > summary::-webkit-details-marker { display: none; }
.ssi5-preset-group > summary .count { font-size: 0.7rem; color: var(--ssi-ink-soft); font-weight: 700; }
.ssi5-chip-wrap { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0 4px; }
.ssi5-chip {
  border: 1px solid var(--ssi-line-strong); background: #fff; color: var(--ssi-ink-soft);
  border-radius: 999px; padding: 5px 11px; font-size: 0.75rem; font-weight: 600; cursor: pointer;
  transition: all 0.12s ease;
}
.ssi5-chip:hover { border-color: var(--ssi-teal); color: var(--ssi-teal); }
.ssi5-chip[aria-pressed="true"] { background: var(--ssi-teal); border-color: var(--ssi-teal); color: #fff; }

/* ---------- Slider accordions ---------- */
.ssi5-accordion { border: 1px solid var(--ssi-line); border-radius: 14px; margin-bottom: 10px; overflow: hidden; background: #fff; }
.ssi5-accordion > summary {
  cursor: pointer; list-style: none; padding: 11px 13px; display: flex; align-items: center; gap: 10px;
  background: linear-gradient(180deg, #fbfcfe, #f2f5f9);
}
.ssi5-accordion > summary::-webkit-details-marker { display: none; }
.ssi5-acc-name { font-weight: 800; font-size: 0.85rem; color: var(--ssi-ink); flex: 1; }
.ssi5-acc-meta { display: flex; align-items: center; gap: 7px; }
.ssi5-acc-score { font-size: 0.78rem; font-weight: 800; color: var(--ssi-ink); min-width: 30px; text-align: right; }
.ssi5-acc-changed {
  font-size: 0.66rem; font-weight: 700; color: var(--ssi-ink-soft);
  background: rgba(8, 25, 35, 0.06); border-radius: 999px; padding: 2px 7px;
}
.ssi5-status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ssi-normal); flex: 0 0 auto; }
.ssi5-status-dot.caution { background: var(--ssi-caution); }
.ssi5-status-dot.warn { background: var(--ssi-warn); }
.ssi5-acc-body { padding: 6px 13px 13px; }

.ssi5-slider-row { padding: 8px 0; border-top: 1px solid var(--ssi-line); }
.ssi5-slider-row:first-child { border-top: 0; }
.ssi5-slider-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.ssi5-slider-head label { font-size: 0.79rem; font-weight: 600; color: var(--ssi-ink); }
.ssi5-slider-val { font-size: 0.78rem; font-weight: 800; color: var(--ssi-teal); white-space: nowrap; }
.ssi5-slider-val .stacked { color: var(--ssi-gold); font-size: 0.68rem; margin-left: 4px; }
.ssi5-slider-row input[type="range"] { width: 100%; accent-color: var(--ssi-teal); margin: 2px 0 3px; }
.ssi5-minibar { height: 5px; border-radius: 999px; background: rgba(8, 25, 35, 0.08); overflow: hidden; }
.ssi5-minibar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--ssi-teal), var(--ssi-teal-bright)); }
.ssi5-minibar.caution > span { background: linear-gradient(90deg, var(--lakana-iris-undertone), var(--ssi-gold)); }
.ssi5-minibar.warn > span { background: linear-gradient(90deg, var(--lakana-sovereign-red), var(--ssi-warn)); }
.ssi5-driver-tag { font-size: 0.66rem; color: var(--ssi-ink-soft); margin-top: 2px; }

/* ---------- Module tabs ---------- */
.ssi5-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.ssi5-tab {
  border: 1px solid var(--ssi-line-strong); background: #fff; color: var(--ssi-ink-soft);
  border-radius: 12px; padding: 9px 14px; font-weight: 700; font-size: 0.82rem; cursor: pointer;
  display: flex; flex-direction: column; gap: 1px; line-height: 1.15;
}
.ssi5-tab small { font-size: 0.64rem; font-weight: 600; opacity: 0.75; }
.ssi5-tab:hover { border-color: var(--ssi-teal); color: var(--ssi-teal); }
.ssi5-tab[aria-selected="true"] { background: var(--ssi-teal); border-color: var(--ssi-teal); color: #fff; }
.ssi5-tab[aria-selected="true"] small { opacity: 0.85; }

/* ---------- Viewport ---------- */
.ssi5-viewport { min-height: 540px; }
.ssi5-module-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ssi5-module-head h2 { margin: 0; }
.ssi5-module-head p { margin: 2px 0 0; color: var(--ssi-ink-soft); font-size: 0.85rem; max-width: 60ch; }
.ssi5-module-badge { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ssi-teal); background: rgba(0, 135, 125, 0.1); padding: 5px 10px; border-radius: 999px; }

.ssi5-stage {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(220px, 1fr); gap: 16px; align-items: stretch;
}
@media (max-width: 760px) { .ssi5-stage { grid-template-columns: 1fr; } }
.ssi5-canvas-wrap {
  background: linear-gradient(160deg, var(--lakana-sovereign-navy), var(--lakana-component-navy));
  border-radius: 16px; padding: 10px; display: flex; align-items: center; justify-content: center; min-height: 420px;
}
.ssi5-canvas-wrap svg { width: 100%; height: auto; max-height: 520px; display: block; }
.ssi5-readouts { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ssi5-readout { border: 1px solid var(--ssi-line); border-radius: 12px; padding: 10px 12px; background: #fbfcfe; }
.ssi5-readout b { display: block; font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ssi-ink-soft); overflow-wrap: anywhere; line-height: 1.3; }
.ssi5-readout span { font-size: 1.05rem; font-weight: 800; color: var(--ssi-ink); overflow-wrap: anywhere; line-height: 1.3; }
.ssi5-readout small { display: block; font-size: 0.72rem; color: var(--ssi-ink-soft); margin-top: 2px; overflow-wrap: anywhere; line-height: 1.35; }

/* ---------- Gait caption spacing protection ----------
   The gait caption never overlays the SVG. It sits in its own block below
   the visual (and below the readouts on mobile), with safe wrapping. */
.ssi5-module-caption {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--ssi-line);
  border-left: 4px solid var(--ssi-teal);
  border-radius: 12px;
  background: #fbfcfe;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ssi-ink-soft);
  overflow-wrap: anywhere;
  word-break: normal;
  position: static;        /* never absolutely positioned over the visual */
}
.ssi5-module-caption b { color: var(--ssi-ink); }
.ssi5-module-caption .ssi5-caption-row { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; }
.ssi5-module-caption .ssi5-caption-row span { white-space: nowrap; }
/* Gait stage: visual and readouts side by side; caption is full-width below. */
.ssi5-stage--gait { position: relative; }
@media (max-width: 760px) {
  /* Mobile stack order: visual -> readouts -> caption */
  .ssi5-stage--gait { display: flex; flex-direction: column; }
  .ssi5-stage--gait .ssi5-canvas-wrap { order: 1; }
  .ssi5-stage--gait .ssi5-readouts { order: 2; }
  .ssi5-module-caption { order: 3; }
}
.ssi5-readout-bar { height: 7px; border-radius: 999px; background: rgba(8,25,35,.08); overflow: hidden; margin-top: 6px; }
.ssi5-readout-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--ssi-teal), var(--ssi-teal-bright)); }

/* SVG model region states (shared) */
.ssi-region { cursor: pointer; transition: fill 0.18s ease, stroke 0.18s ease; }
.ssi-region.sel { stroke: #fff; stroke-width: 4; }

/* Withheld / boundary notices inside modules */
.ssi5-withheld {
  margin-top: 12px; padding: 10px 12px; border-radius: 12px; font-size: 0.78rem;
  background: rgba(201, 138, 0, 0.1); border: 1px solid rgba(201, 138, 0, 0.4); color: var(--lakana-iris-undertone);
}
.ssi5-withheld b { color: var(--lakana-iris-undertone); }

/* ---------- Right rail ---------- */
.ssi5-metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ssi5-metric { border: 1px solid var(--ssi-line); border-radius: 10px; padding: 8px 10px; }
.ssi5-metric b { display: block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ssi-ink-soft); }
.ssi5-metric span { font-weight: 800; color: var(--ssi-ink); }

.ssi5-run-track { display: flex; flex-direction: column; gap: 7px; }
.ssi5-run-line { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 0.82rem; padding: 4px 0; border-bottom: 1px solid var(--ssi-line); }
.ssi5-run-line:last-child { border-bottom: 0; }
.ssi5-run-line b { color: var(--ssi-ink-soft); font-weight: 600; }
.ssi5-run-line span { font-weight: 800; color: var(--ssi-ink); }
.ssi5-run-id { font-family: ui-monospace, monospace; font-size: 0.78rem; }
.ssi5-pill { font-size: 0.7rem; font-weight: 800; padding: 2px 9px; border-radius: 999px; }
.ssi5-pill.ok { background: rgba(0,135,125,.16); color: var(--ssi-teal); }
.ssi5-pill.caution { background: rgba(201,138,0,.18); color: var(--lakana-iris-undertone); }
.ssi5-pill.warn { background: rgba(147,0,35,.14); color: var(--ssi-warn); }

.ssi5-role-list { display: flex; flex-direction: column; gap: 6px; }
.ssi5-role-btn { text-align: left; border: 1px solid var(--ssi-line-strong); background: #fff; border-radius: 12px; padding: 9px 12px; cursor: pointer; }
.ssi5-role-btn strong { display: block; font-size: 0.84rem; color: var(--ssi-ink); }
.ssi5-role-btn span { font-size: 0.74rem; color: var(--ssi-ink-soft); }
.ssi5-role-btn[aria-pressed="true"] { border-color: var(--ssi-teal); background: rgba(0,135,125,.06); }

.ssi5-ledger { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow: auto; }
.ssi5-ledger-row { font-size: 0.74rem; padding: 7px 9px; border-radius: 9px; background: #fbfcfe; border: 1px solid var(--ssi-line); }
.ssi5-ledger-row b { color: var(--ssi-teal); font-family: ui-monospace, monospace; }

/* ---------- Comparative matrix ---------- */
.ssi5-matrix { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.ssi5-matrix th, .ssi5-matrix td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--ssi-line); }
.ssi5-matrix th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ssi-ink-soft); }
.ssi5-matrix td b { font-weight: 800; }
.ssi5-cellbar { height: 6px; border-radius: 999px; background: rgba(8,25,35,.08); overflow: hidden; margin-top: 4px; }
.ssi5-cellbar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--ssi-teal), var(--ssi-teal-bright)); }

/* ---------- Driver decomposition ---------- */
.ssi5-drivers { display: flex; flex-direction: column; gap: 9px; }
.ssi5-driver { display: grid; grid-template-columns: 180px 1fr 48px; gap: 10px; align-items: center; }
.ssi5-driver .lbl { font-size: 0.8rem; color: var(--ssi-ink); }
.ssi5-driver .bar { height: 9px; border-radius: 999px; background: rgba(8,25,35,.08); overflow: hidden; }
.ssi5-driver .bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--ssi-teal), var(--ssi-gold)); }
.ssi5-driver .v { font-size: 0.78rem; font-weight: 800; text-align: right; color: var(--ssi-ink); }
@media (max-width: 520px) { .ssi5-driver { grid-template-columns: 120px 1fr 40px; } }

/* ---------- Review form ---------- */
.ssi5-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 620px) { .ssi5-form-grid { grid-template-columns: 1fr; } }
.ssi5-form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 0.78rem; font-weight: 700; color: var(--ssi-ink); }
.ssi5-form-grid input, .ssi5-form-grid select, .ssi5-form-grid textarea {
  border: 1px solid var(--ssi-line-strong); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 0.85rem;
}
.ssi5-form-grid textarea { min-height: 90px; resize: vertical; grid-column: 1 / -1; }
.ssi5-form-note { font-size: 0.74rem; color: var(--ssi-ink-soft); margin-top: 8px; }

.ssi5-anchor-list { display: flex; flex-direction: column; gap: 8px; }
.ssi5-anchor-list a { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; border: 1px solid var(--ssi-line); border-radius: 11px; text-decoration: none; color: var(--ssi-ink); font-weight: 700; font-size: 0.84rem; }
.ssi5-anchor-list a:hover { border-color: var(--ssi-teal); color: var(--ssi-teal); }
.ssi5-anchor-list small { color: var(--ssi-ink-soft); font-weight: 500; }

.ssi5-section-title { margin: 6px 0 0; }