/*
  Techne Legal — component library
  Built on tokens.css (colors, --font-serif, --radius). This file adds the
  actual reusable component CSS: primitives, layout shell, and the four
  weekend-build product patterns (grounding strip, search result, template
  field editor, feedback item) plus a stat-tile/gauge primitive.

  Accessibility rule, verified 2026-08-01 (WCAG 2.1 relative-luminance math):
  --gold and --gold-lt on any cream/field background pass the 3.0:1 large-
  text/UI-component threshold but FAIL the 4.5:1 normal-text threshold.
  --giallo-antico fails even the 3.0:1 threshold on --field. Rule enforced
  below: gold is for borders, icons, large headings (>=24px) and uppercase
  small-caps LABELS at >=14px with generous letter-spacing (which read as
  "large text" per WCAG's own bolded/tracked-out allowance) — never for
  body-copy-weight text. giallo-antico is decorative/graphic only, never text.
*/

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font-serif);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

/* ---------- foundations: type scale ---------- */
.tn-display   { font-size: clamp(32px, 5vw, 56px); font-weight: 400; letter-spacing: 0.02em; line-height: 1.05; margin: 0; }
.tn-h1        { font-size: clamp(24px, 3.2vw, 32px); font-weight: 400; letter-spacing: 0.02em; margin: 0; }
.tn-h2        { font-size: 20px; font-weight: 400; letter-spacing: 0.04em; margin: 0; }
.tn-h3        { font-size: 15px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--porpora); margin: 0; }
.tn-body      { font-size: 16px; line-height: 1.6; margin: 0; }
.tn-small     { font-size: 13px; line-height: 1.5; color: var(--ink-soft); margin: 0; }
.tn-caption   { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin: 0; }
.tn-label     { font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--porpora); margin: 0; } /* gold NOT used here at this size — see a11y note above */

/* ---------- foundations: divider (guilloche) ---------- */
.tn-divider {
  height: 16px;
  background-image: url("motifs/guilloche-border.svg");
  background-repeat: repeat-x;
  background-size: auto 16px;
  background-position: center;
  margin: 20px 0;
}
.tn-divider.tn-divider--plain { /* fallback for tight spaces where the tiled motif is too busy */
  height: 1px; background: none; border-top: 1px solid var(--gold); opacity: 0.85; margin: 16px 0;
}

/* ---------- primitives: buttons ---------- */
.tn-btn {
  font-family: inherit;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 22px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 130ms ease, color 130ms ease, border-color 130ms ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tn-btn--primary {
  background: var(--porpora); color: var(--cream-lt); border: 1px solid var(--porpora);
}
.tn-btn--primary:hover { opacity: 0.9; }
.tn-btn--secondary {
  background: transparent; color: var(--porpora); border: 1px solid var(--gold);
}
.tn-btn--secondary:hover { background: var(--porpora); color: var(--cream-lt); border-color: var(--porpora); }
.tn-btn--ghost {
  background: transparent; color: var(--ink); border: 1px solid transparent; text-transform: none;
  letter-spacing: normal; font-size: 15px; padding: 8px 4px;
}
.tn-btn--ghost:hover { color: var(--porpora); }
.tn-btn:focus-visible { outline: 2px solid var(--porpora); outline-offset: 2px; }
.tn-btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ---------- primitives: inputs ---------- */
.tn-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.tn-field label { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.tn-input, .tn-textarea, .tn-select {
  font-family: inherit; font-size: 16px; color: var(--ink); background: var(--field);
  border: 1px solid var(--gold); border-radius: var(--radius); padding: 12px 14px;
}
.tn-input:focus, .tn-textarea:focus, .tn-select:focus { outline: 2px solid var(--porpora); outline-offset: 1px; }
.tn-textarea { resize: vertical; min-height: 90px; font-size: 15px; line-height: 1.5; }
.tn-checkbox { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 15px; }
.tn-checkbox input { position: absolute; opacity: 0; width: 0; height: 0; }
.tn-checkbox .box {
  width: 18px; height: 18px; border: 1px solid var(--gold); background: var(--field);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.tn-checkbox input:checked + .box { background: var(--porpora); border-color: var(--porpora); }
.tn-checkbox input:checked + .box::after { content: ""; width: 8px; height: 8px; background: var(--gold-lt); }
.tn-checkbox input:focus-visible + .box { outline: 2px solid var(--porpora); outline-offset: 2px; }

/* ---------- primitives: badge / tag / pill ---------- */
.tn-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 9px; border: 1px solid currentColor; border-radius: var(--radius);
}
.tn-badge--neutral  { color: var(--ink-soft); }
.tn-badge--active   { color: var(--porpora); border-color: var(--porpora); background: rgba(85,52,79,0.06); }
.tn-badge--warn     { color: var(--rosso); border-color: var(--rosso); background: rgba(124,43,38,0.06); }
.tn-badge--resolved { color: var(--verde-antico); border-color: var(--verde-antico); background: rgba(71,84,63,0.08); }
.tn-badge--gold     { color: var(--ink); border-color: var(--gold); background: rgba(143,113,48,0.10); } /* --gold used as border/bg only, never as this text's color, per a11y note */

/* ---------- primitives: card / panel ---------- */
.tn-card {
  background: var(--cream-lt); border: 1px solid rgba(143,113,48,0.4); border-radius: var(--radius);
  padding: 18px 20px; position: relative;
}
.tn-card--accent { border-left: 4px solid var(--porpora); padding-left: 16px; }
.tn-card--framed { padding: 4px; background: var(--gold-lt); }
.tn-card--framed > .tn-card__inner { background: var(--cream-lt); padding: 20px; }

/* ---------- primitives: stat-tile / gauge ("gas tank bar") ---------- */
/* Visual primitive only — data source/metrics are a separate investigation
   (Mikita, per David 2026-08-01). This just establishes how a measured
   quantity renders in the Techne visual language. */
.tn-stat {
  background: var(--cream-lt); border: 1px solid rgba(143,113,48,0.35); border-radius: var(--radius);
  padding: 14px 16px 16px;
}
.tn-stat__label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.tn-stat__value { font-size: 26px; margin: 4px 0 10px; color: var(--ink); }
.tn-stat__value small { font-size: 14px; color: var(--ink-soft); font-weight: normal; }
.tn-gauge { height: 10px; background: var(--field); border: 1px solid var(--gold); position: relative; overflow: hidden; }
.tn-gauge__fill { height: 100%; background: var(--porpora); }
.tn-gauge__fill.tn-gauge__fill--warn { background: var(--rosso); }
.tn-gauge__fill.tn-gauge__fill--good { background: var(--verde-antico); }
.tn-stat__meta { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--ink-soft); letter-spacing: 0.04em; }

/* ---------- layout: dense working-surface shell ---------- */
.tn-shell { display: grid; grid-template-columns: 240px 1fr; grid-template-rows: 56px 1fr; height: 100vh; background: var(--field); }
.tn-shell__header {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 0 18px;
  background: var(--porpora); color: var(--cream-lt); border-bottom: 2px solid var(--gold);
}
.tn-shell__header .tn-wordmark { font-size: 15px; letter-spacing: 0.24em; text-transform: uppercase; }
.tn-shell__sidebar {
  background: var(--cream-lt); border-right: 1px solid rgba(143,113,48,0.35); padding: 16px 0; overflow-y: auto;
}
.tn-shell__nav-group { margin-bottom: 18px; }
.tn-shell__nav-group h4 { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin: 0 16px 6px; }
.tn-shell__nav-item {
  display: block; padding: 8px 16px; font-size: 14.5px; color: var(--ink); text-decoration: none;
  border-left: 3px solid transparent;
}
.tn-shell__nav-item:hover { background: var(--field); }
.tn-shell__nav-item.is-active { border-left-color: var(--porpora); background: var(--field); color: var(--porpora); }
.tn-shell__main { overflow-y: auto; padding: 24px 32px; display: flex; flex-direction: column; gap: 18px; }
.tn-shell.tn-shell--with-rail { grid-template-columns: 240px 1fr 320px; }
.tn-shell__rail {
  background: var(--cream-lt); border-left: 1px solid rgba(143,113,48,0.35); padding: 20px; overflow-y: auto;
}
@media (max-width: 860px) {
  .tn-shell, .tn-shell.tn-shell--with-rail { grid-template-columns: 1fr; grid-template-rows: 56px auto 1fr; }
  .tn-shell__sidebar { display: none; } /* collapses to a drawer in a real build; static demo just hides it */
}

/* ---------- pattern: grounding / audit strip ---------- */
.tn-claim { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid rgba(143,113,48,0.25); }
.tn-claim:first-child { border-top: none; }
.tn-claim__wedge { width: 34px; height: 34px; flex: none; background-image: url("motifs/dome-oculus-wedges.svg"); background-size: cover; }
.tn-claim__body { flex: 1; }
.tn-claim__text { font-size: 15px; line-height: 1.5; margin: 0 0 6px; }
.tn-claim__meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-soft); }
.tn-claim__score { font-weight: bold; color: var(--verde-antico); }
.tn-claim__score.tn-claim__score--low { color: var(--rosso); }
.tn-claim__source { text-decoration: underline; text-decoration-color: var(--gold); color: var(--porpora); }

/* ---------- pattern: search result with citation ---------- */
.tn-result { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid rgba(143,113,48,0.25); }
.tn-result:first-child { border-top: none; }
.tn-result__disc { width: 30px; height: 30px; flex: none; background-image: url("motifs/colonnade-viewpoint-disc.svg"); background-size: cover; }
.tn-result__title { font-size: 16px; margin: 0 0 4px; color: var(--porpora); }
.tn-result__snippet { font-size: 14.5px; line-height: 1.55; margin: 0 0 6px; color: var(--ink); }
.tn-result__file { font-size: 11.5px; letter-spacing: 0.06em; color: var(--ink-soft); }

/* ---------- pattern: template field editor ---------- */
.tn-template-editor { background: var(--cream-lt); border: 1px solid rgba(143,113,48,0.4); }
.tn-template-editor__head {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  background-image: url("motifs/quincunx-medallion.svg"); background-size: 22px 22px; background-repeat: no-repeat; background-position: 14px center;
  padding-left: 48px; border-bottom: 1px solid rgba(143,113,48,0.35);
}
.tn-template-editor__fields { padding: 10px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.tn-tfield { display: grid; grid-template-columns: 1fr 120px 90px; gap: 10px; align-items: center; }
.tn-tfield input[type="text"] { font-family: inherit; padding: 8px 10px; border: 1px solid var(--gold); background: var(--field); font-size: 14px; }
.tn-tfield select { font-family: inherit; padding: 8px 10px; border: 1px solid var(--gold); background: var(--field); font-size: 13px; }

/* ---------- pattern: feedback item with status stepper ---------- */
.tn-feedback { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid rgba(143,113,48,0.25); }
.tn-feedback:first-child { border-top: none; }
.tn-feedback__ring { width: 26px; height: 26px; flex: none; background-image: url("motifs/confessio-ring.svg"); background-size: cover; }
.tn-feedback__ring.is-resolved { filter: grayscale(0.6) opacity(0.55); } /* "lamp" dims once resolved */
.tn-feedback__text { font-size: 14.5px; margin: 0 0 8px; }
.tn-stepper { display: flex; align-items: center; gap: 0; }
.tn-stepper__stage { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; position: relative; }
.tn-stepper__stage::before {
  content: ""; position: absolute; top: 9px; left: -50%; width: 100%; height: 2px; background: rgba(143,113,48,0.35); z-index: 0;
}
.tn-stepper__stage:first-child::before { display: none; }
.tn-stepper__dot {
  width: 18px; height: 18px; background-image: url("motifs/star-roundel.svg"); background-size: cover;
  filter: grayscale(1) opacity(0.4); position: relative; z-index: 1;
}
.tn-stepper__stage.is-done .tn-stepper__dot,
.tn-stepper__stage.is-current .tn-stepper__dot { filter: none; }
.tn-stepper__label { font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); text-align: center; }
.tn-stepper__stage.is-current .tn-stepper__label { color: var(--porpora); }

/* ---------- pattern: access gate icon (keys and tiara) ---------- */
.tn-access-icon { width: 64px; height: 64px; background-image: url("motifs/keys-and-tiara.svg"); background-size: contain; background-repeat: no-repeat; margin: 0 auto 12px; }

/* ---------- pattern: hero medallion (rota porphyretica) ---------- */
.tn-hero-medallion {
  width: min(180px, 40vw); aspect-ratio: 1/1; background-image: url("motifs/rota-porphyretica.svg");
  background-size: contain; background-repeat: no-repeat; margin-left: -10%; /* deliberately off-center per research.md */
}

/* ---------- pattern: signature ornament (olive/bee frieze, reserve for ONE surface) ---------- */
.tn-signature-frieze { height: 20px; background-image: url("motifs/olive-bee-frieze.svg"); background-repeat: repeat-x; background-size: auto 20px; }