/* ====================================================================
 * @sampo/site — diagnostic.css
 * Per-diagnostic page layout. Loaded only on kits/[slug]/ pages.
 * Everything here assumes tokens.css, themes.css, components.css,
 * site.css are already in the cascade.
 * ==================================================================== */

/* ── Layout: article + left rail ──────────────────────────────────── */

.diagnostic {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--sp-8);
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--sp-6);
  align-items: start;
}

.diag-rail {
  position: sticky;
  top: var(--sp-6);
  align-self: start;
  padding-top: var(--sp-12);
  font-size: var(--fs-small);
  line-height: 1.5;
}

.diag-rail .rail-label {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--sp-3);
  padding: 0 var(--sp-3);
}

.diag-rail ol {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px dashed var(--border);
}

.diag-rail li { margin: 0; }

.diag-rail a {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  color: var(--muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -1px;
  transition: color .15s, border-color .15s;
  line-height: 1.4;
}

.diag-rail a:hover {
  color: var(--ink);
}

.diag-rail a.active {
  color: var(--ink);
  border-left-color: var(--olive);
}

.diag-article { min-width: 0; }

@media (max-width: 900px) {
  .diagnostic {
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 780px;
  }
  .diag-rail { display: none; }
}

/* ── Header block ─────────────────────────────────────────────────── */

.diag-header {
  padding: var(--sp-12) 0 var(--sp-8);
}

.diag-slug {
  font-family: var(--ff-mono);
  font-size: var(--fs-small);
  color: var(--steel);
  font-weight: 500;
  margin: 0 0 var(--sp-3);
  letter-spacing: 0.04em;
}

.diag-kit-label {
  font-family: var(--ff-display);
  font-style: italic;
  color: var(--muted);
  font-size: var(--fs-body);
  margin: 0 0 var(--sp-4);
}

.diag-header h1 {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  margin: 0 0 var(--sp-6);
  max-width: 18ch;
}

.diag-header .lede {
  margin-top: 0;
}

/* ── Section scaffolding ──────────────────────────────────────────── */

.diag-section {
  padding: var(--sp-10) 0;
}

.diag-section > p,
.diag-section .diag-body p {
  max-width: 60ch;
  margin: 0 0 var(--sp-4);
  line-height: var(--lh-body);
}

.diag-section > p.section-caption {
  max-width: none;
  margin-bottom: var(--sp-6);
}

.diag-subheading {
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: var(--fs-h3);
  margin: var(--sp-8) 0 var(--sp-3);
  letter-spacing: -0.005em;
}

.subtle {
  font-size: var(--fs-small);
  color: var(--muted);
  max-width: 60ch;
}

/* ── Category cards (native <details>) ────────────────────────────── */

.cat-grid {
  display: grid;
  gap: var(--sp-2);
  margin: var(--sp-6) 0;
}

.cat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color .15s, border-style .15s, background .15s;
}

.cat-card[open] {
  border-color: var(--olive);
  background: var(--surface-2);
}

.cat-card:hover {
  border-color: var(--border-strong);
}

.cat-card summary {
  display: flex;
  align-items: baseline;
  gap: var(--sp-5);
  padding: var(--sp-4) var(--sp-8);
  cursor: pointer;
  list-style: none;
  user-select: none;
  border-radius: var(--r-md);
  outline: none;
}

.cat-card summary::-webkit-details-marker { display: none; }
.cat-card summary::marker { content: ""; }

/* Replace the browser's default focus ring with a brand-tone one.
   Keyboard users get a clear affordance without the mismatched
   system blue/white ring. */
.cat-card summary:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 2px;
}

/* Category number: mono, same size as the title it sits beside, with
   enough left gutter to let the tabular figure breathe. */
.cat-num {
  font-family: var(--ff-mono);
  font-size: var(--fs-h3);
  color: var(--olive);
  font-weight: 500;
  flex: 0 0 1.5rem;
  font-feature-settings: "tnum";
  line-height: 1;
}

.cat-name {
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: var(--fs-h3);
  flex: 1;
  color: var(--ink);
  line-height: 1.2;
}

.cat-chevron {
  color: var(--muted);
  transition: transform .2s ease, color .2s ease;
  font-size: var(--fs-small);
}

.cat-card[open] .cat-chevron {
  transform: rotate(90deg);
  color: var(--olive);
}

.cat-detail {
  padding: var(--sp-4) var(--sp-8) var(--sp-5);
  border-top: 1px dashed var(--border);
}

.cat-detail p {
  margin: 0 0 var(--sp-3);
  line-height: var(--lh-body);
  color: var(--ink);
}

.cat-detail p:last-child { margin-bottom: 0; }

.cat-examples {
  font-family: var(--ff-display);
  font-style: italic;
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: 1.6;
}

/* ── Option grid (Option A/B/C cards) ─────────────────────────────── */

.option-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  margin: var(--sp-6) 0;
}

@media (max-width: 640px) {
  .option-grid { grid-template-columns: 1fr; }
}

.result-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  background: var(--surface);
  border-top-width: 3px;
}

/* Signature colors for the three audit modes. Border-top carries the
   accent; the label + title inherit it via currentColor on the
   ::before pseudo-element. Steel A / Olive B / Pumpkin C is the
   mill-system convention. */
.result-card[data-option="a"] { border-top-color: var(--steel); }
.result-card[data-option="b"] { border-top-color: var(--olive); }
.result-card[data-option="c"] { border-top-color: var(--pumpkin); }

.result-card[data-option="a"] .result-label,
.result-card[data-option="a"] .result-value { color: var(--steel); }
.result-card[data-option="b"] .result-label,
.result-card[data-option="b"] .result-value { color: var(--olive); }
.result-card[data-option="c"] .result-label,
.result-card[data-option="c"] .result-value { color: var(--pumpkin); }

.result-card .result-label {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--sp-2);
}

.result-card .result-value {
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: var(--fs-h3);
  margin-bottom: var(--sp-2);
}

.result-card .result-desc {
  font-size: var(--fs-small);
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

/* Reading-results variant — three assessment tiers, different accent per
   level. The source markup already sets border-color inline. */
.result-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  margin: var(--sp-6) 0;
}

@media (max-width: 640px) {
  .result-grid { grid-template-columns: 1fr; }
}

/* ── Thesis line ──────────────────────────────────────────────────── */

.thesis-line {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: var(--fs-h3);
  color: var(--ink);
  line-height: 1.45;
  padding: var(--sp-4) var(--sp-6);
  border-left: 2px solid var(--olive);
  margin: var(--sp-6) 0;
  max-width: 60ch;
}

/* ── Figure block (Three Audit Modes SVG) ─────────────────────────── */

.figure-block {
  margin: var(--sp-8) 0;
  display: flex;
  justify-content: center;
}

.figure-block svg {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--g-bg);
  color-scheme: light;  /* force light treatment — diagram is cream-native */
}

/* ── Prompt blocks ────────────────────────────────────────────────── */

.prompt-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-8);
  margin: var(--sp-4) 0;
}

.prompt-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  font-family: var(--ff-mono);
  font-size: var(--fs-small);
  color: var(--muted);
  letter-spacing: 0.02em;
  padding-bottom: var(--sp-3);
  border-bottom: 1px dashed var(--border);
  margin-bottom: var(--sp-4);
}

.prompt-text {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  color: var(--ink);
  line-height: 1.65;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.prompt-copy {
  font-family: var(--ff-mono);
  font-size: 11px;
  padding: 4px 10px;
}

.prompt-copy.copied {
  background: var(--olive);
  color: var(--bg);
  border-color: var(--olive);
}

/* ── Version tabs ─────────────────────────────────────────────────── */

.version-tabs {
  display: flex;
  gap: var(--sp-1);
  border-bottom: 1px dashed var(--border);
  margin: var(--sp-6) 0 0;
  flex-wrap: wrap;
}

.version-tab {
  background: transparent;
  border: none;
  font: inherit;
  font-size: var(--fs-small);
  color: var(--muted);
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  position: relative;
  transition: color .15s;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.version-tab::after {
  content: "";
  position: absolute;
  left: var(--sp-2);
  right: var(--sp-2);
  bottom: -1px;
  height: 2px;
  background: transparent;
  transition: background .15s;
}

.version-tab:hover { color: var(--ink); }

.version-tab.active {
  color: var(--ink);
  font-weight: 600;
}

.version-tab.active::after { background: var(--olive); }

.tab-badge {
  font-family: var(--ff-mono);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  letter-spacing: 0.04em;
}

.badge-steel   { background: rgba(123, 143, 161, 0.15); color: var(--steel); }
.badge-accent  { background: rgba(101, 163, 13, 0.15);  color: var(--olive); }
.badge-pumpkin { background: rgba(255, 122, 5, 0.15);   color: var(--pumpkin); }

.version-panel { display: none; }
.version-panel.active { display: block; }

.tab-panel-prompt {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: 0;
}

/* ── Step list (calibration how-to) ───────────────────────────────── */

.step-list {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: var(--sp-4) 0;
  display: grid;
  gap: var(--sp-3);
  max-width: 60ch;
}

.step-list > li {
  counter-increment: step;
  position: relative;
  padding-left: 2.5rem;
  line-height: var(--lh-body);
}

.step-list > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--olive);
  font-family: var(--ff-mono);
  font-size: var(--fs-small);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.step-item { /* match upstream class name for compatibility */ }

/* ── Validation table ─────────────────────────────────────────────── */

.val-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-4) 0 var(--sp-3);
  font-size: var(--fs-small);
}

.val-table th,
.val-table td {
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px dashed var(--border);
}

.val-table th {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  border-bottom-style: solid;
  border-color: var(--border-strong);
}

.val-table .mode-a { color: var(--steel); font-weight: 600; font-family: var(--ff-mono); }
.val-table .mode-b { color: var(--olive); font-weight: 600; font-family: var(--ff-mono); }
.val-table .mode-c { color: var(--pumpkin); font-weight: 600; font-family: var(--ff-mono); }
.val-table .assess-inst { color: var(--steel); }
.val-table .assess-def  { color: var(--pumpkin); }

/* ── Inline link treatment ────────────────────────────────────────── */

.inline-link {
  color: var(--olive);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .15s;
}

.inline-link:hover { color: var(--ink); }

/* ── Kit sibling strip (footer nav) ───────────────────────────────── */

/* Horizontal nav that sits below the article and above the site
   footer. Shows the kit's direction label, then every diagnostic in
   the kit with the current page as plain text and siblings as links
   to the deployed diagnostic URLs. Mirrors the legacy pattern used
   on the 14 already-deployed sampo-diagnostic-* repos so visitors
   can hop between the old and new surfaces without relearning. */

.kit-nav {
  margin-top: var(--sp-12);
  padding-top: var(--sp-6);
  border-top: 1px dashed var(--border);
}

.kit-nav-label {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--sp-4);
}

.kit-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  line-height: 1.4;
}

.kit-nav-list li { margin: 0; }

/* Current item underline sits under the text — no stretch across full row. */
.kit-nav-list li.current { width: max-content; }

.kit-nav-list li.current {
  color: var(--ink);
  font-weight: 600;
  position: relative;
}

/* Subtle olive mark under the current item — same visual vocabulary
   as the active tab underline. */
.kit-nav-list li.current::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  background: var(--olive);
}

.kit-nav-list li a {
  color: var(--muted);
  text-decoration: none;
  transition: color .15s;
}

.kit-nav-list li a:hover {
  color: var(--ink);
}

/* Below 900px (no left rail anyway), trade vertical stack for a
   horizontal wrap. Saves vertical real estate on phones where
   every tap target gets a line of its own. */
@media (max-width: 900px) {
  .kit-nav-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--sp-3) var(--sp-4);
  }
  .kit-nav-list li.current { width: auto; }
}

/* ── Legacy class aliases from the source page ────────────────────── */

.body-text { max-width: 60ch; margin: 0 0 var(--sp-4); line-height: var(--lh-body); }