/* ============================================================================
 * scrub-spec.css — page de spec du namespace Scrub Provenance 0.1
 * ----------------------------------------------------------------------------
 * Calque le pattern de about-sofab.css (tokens partages + Ubuntu + largeur
 * de lecture), avec en plus les blocs specifiques a une spec : encadre de
 * statut, tables d'attributs, blocs XML.
 *
 * CSP : aucun style inline dans index.html — tout vit ici (cf. regle CSP
 * TOLERANCE ZERO de __misc/__CLAUDE.md).
 *
 * nº209 (2026-09-17) : TOUT est scope sous `.scrub-spec` (le corps de la page est
 * un <div class="scrub-spec">) — la spec est aussi rendue par le SSR chatouk sous
 * la topbar (chatouk.sofab.ch/public/ns/scrub/0.1/), ou chatouk.css cohabite.
 * La page nue porte <body class="scrub-spec-standalone"> pour ses marges/fond.
 * Meme patron que inspect.css (nº208).
 * ========================================================================== */

@import url("/assets/sofab-tokens.css");

.scrub-spec {
  --fg: #1a1a1a;
  --muted: #555;
  --accent: var(--sofab-heading, #333333);
  --code-bg: #f4f6f8;
  --border: #e0e3e7;
  --bullet: #1a1a1a;
  --status-bg: #fff8e6;
  --status-border: #e0b656;
  --th-bg: #f0f3f6;
}

.scrub-spec, .scrub-spec * { box-sizing: border-box; }

body.scrub-spec-standalone {
  margin: 0;
  padding: 32px 20px 64px;
  background: #fafbfc;
}
.scrub-spec {
  font-family: Ubuntu, system-ui, sans-serif;
  color: var(--fg);
  line-height: 1.55;
  max-width: 820px;
  margin: 0 auto;
}

/* ── Header ────────────────────────────────────────────── */
.scrub-spec header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 3px solid var(--accent);
}
.scrub-spec h1 {
  font-size: 34px;
  margin: 0 0 8px;
  color: var(--accent);
  letter-spacing: -0.02em;
}
.scrub-spec .tagline {
  font-size: 15px;
  color: var(--fg);
  margin: 0;
}
/* 2026-09-16 : bascule de langue EN (reference) / FR (traduction). */
.scrub-spec .lang-switch {
  font-size: 13px;
  margin: 10px 0 0;
  color: var(--fg);
}
.scrub-spec .lang-switch [aria-current="page"] { font-weight: 600; }

/* ── Encadre de statut ─────────────────────────────────── */
.scrub-spec .status-box {
  background: var(--status-bg);
  border: 1px solid var(--status-border);
  border-left: 4px solid var(--status-border);
  border-radius: 4px;
  padding: 14px 18px;
  margin: 0 0 32px;
}
.scrub-spec .status-box p {
  margin: 0 0 10px;
  font-size: 14px;
}
.scrub-spec .status-box p:last-child { margin-bottom: 0; }

/* ── Titres ────────────────────────────────────────────── */
.scrub-spec h2 {
  font-size: 26px;
  margin: 44px 0 10px;
  color: var(--fg);
  letter-spacing: -0.01em;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.scrub-spec h3 {
  font-size: 19px;
  margin: 28px 0 6px;
  color: var(--fg);
  font-family: "SF Mono", Monaco, Menlo, Consolas, monospace;
}

.scrub-spec p { margin: 12px 0; }

.scrub-spec a { color: var(--accent); text-decoration: underline; }
.scrub-spec a:hover { text-decoration: none; }

/* ── Code ──────────────────────────────────────────────── */
.scrub-spec code {
  font-family: "SF Mono", Monaco, Menlo, Consolas, monospace;
  font-size: 13px;
  background: var(--code-bg);
  padding: 1px 5px;
  border-radius: 3px;
}
.scrub-spec pre {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 14px 16px;
  overflow-x: auto;
  margin: 16px 0;
}
.scrub-spec pre code {
  background: none;
  padding: 0;
  font-size: 12.5px;
  line-height: 1.5;
}

/* ── Tables d'attributs / vocabulaire ──────────────────── */
.scrub-spec table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
  font-size: 14px;
}
.scrub-spec th, .scrub-spec td {
  border: 1px solid var(--border);
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
}
.scrub-spec th {
  background: var(--th-bg);
  font-weight: 600;
}
/* 1re colonne = nom d'attribut ou terme : ne pas la laisser se replier */
.scrub-spec td:first-child { white-space: nowrap; }

/* ── Listes (meme convention outliner que about-sofab) ─── */
.scrub-spec ul.outline {
  list-style: none;
  padding-left: 0;
  margin: 12px 0;
}
.scrub-spec ul.outline li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 8px;
  font-size: 15px;
}
.scrub-spec ul.outline li::before {
  content: "\2022";
  position: absolute;
  left: 2px;
  color: var(--bullet);
  font-weight: bold;
}
.scrub-spec ul.outline li strong { color: var(--fg); }

/* ── Footer ────────────────────────────────────────────── */
.scrub-spec footer {
  margin-top: 56px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 13px;
}
.scrub-spec footer p { margin: 4px 0; }

/* ── Mobile ────────────────────────────────────────────── */
@media (max-width: 600px) {
  .scrub-spec h1 { font-size: 27px; }
  .scrub-spec h2 { font-size: 21px; }
  .scrub-spec td:first-child { white-space: normal; }
  .scrub-spec pre code { font-size: 11.5px; }
}