/* ============================================================
   Tekstgulvet — V1-flade #3 (Claudia → Vilde, handoff 2026-06-02)
   Arkivet som register. "En gulvflade af ark, alle lige."

   Side-scopet under .page-tekstgulvet: realiserer det lyse
   galleri-tryk-system (handoff §3) INDEN i den globale mørke
   ramme (nav/signal-bar/footer fra base.njk). Tokens er bevidst
   navngivet --tg-* og holdt lokale — den globale token-/nav-
   konsolidering (handoff §6.4) afventer Sirius-ratifikation.
   ============================================================ */

.page-tekstgulvet {
  /* Papir — varmt, IKKE beige-grå, IKKE køligt */
  --tg-paper:      #f3ecdc;
  --tg-paper-lift: #ece2cd;
  --tg-paper-deep: #e3d8c0;
  /* Blæk — nær-sort (#171311) + varm grå-skala */
  --tg-ink:        #171311;
  --tg-ink-soft:   #463d34;
  --tg-ink-mute:   #8a7c6b; /* mono-labels — IKKE brødtekst (handoff §6.7) */
  --tg-ink-faint:  rgba(23,19,17,.34);
  /* Den mørke ramme */
  --tg-frame:      #171311;
  /* ÉT stød — oxblood / brake-light. Accent, aldrig tæppe. */
  --tg-accent:     #c1121f;
  /* Rules */
  --tg-rule:       rgba(23,19,17,.16);
  --tg-rule-faint: rgba(23,19,17,.09);

  --tg-serif: 'Cormorant Garamond', Georgia, serif;
  --tg-mono:  'Space Mono', ui-monospace, monospace;

  --tg-stage: 1180px;
  --tg-gutter: clamp(22px, 6vw, 104px);
}

/* Mørk ramme bag alt → lys gulvflade som contained panel */
body.page-tekstgulvet {
  background: var(--tg-frame);
}

main.tekstgulvet {
  background: var(--tg-paper);
  color: var(--tg-ink);
  max-width: var(--tg-stage);
  margin: 0 auto;
  padding: clamp(40px, 7vw, 88px) var(--tg-gutter) clamp(56px, 9vw, 120px);
  border-left: 1px solid var(--tg-rule-faint);
  border-right: 1px solid var(--tg-rule-faint);
  font-family: var(--tg-serif);
}

/* ---- Hoved ---- */
.tg-head {
  margin-bottom: clamp(32px, 5vw, 56px);
  padding-bottom: 22px;
  border-bottom: 1px solid var(--tg-rule);
}
.tg-eyebrow {
  font-family: var(--tg-mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tg-ink-mute);
  margin: 0 0 18px;
}
.tg-title {
  font-family: var(--tg-serif);
  font-weight: 500;
  font-size: clamp(40px, 8vw, 88px);
  line-height: 1.02;
  letter-spacing: -.02em;
  margin: 0;
  color: var(--tg-ink);
}
.tg-lede {
  font-family: var(--tg-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 2.4vw, 24px);
  line-height: 1.3;
  color: var(--tg-ink-soft);
  margin: 18px 0 0; /* luft under stor kursiv — handoff §7 faldgrube */
  max-width: 46ch;
}

/* ---- Værktøjslinje (søg arkiv-tal + samling-filter) ---- */
.tg-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 28px 40px;
  margin-bottom: clamp(36px, 5vw, 56px);
}
.tg-search { display: flex; flex-direction: column; gap: 8px; }
.tg-search label {
  font-family: var(--tg-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tg-ink-mute);
}
.tg-search input {
  font-family: var(--tg-mono);
  font-size: 14px;
  letter-spacing: .08em;
  color: var(--tg-ink);
  background: var(--tg-paper-lift);
  border: 0;
  border-bottom: 1px solid var(--tg-ink-faint);
  border-radius: 0;
  padding: 12px 14px;
  width: 220px;
  min-height: 44px;
  transition: border-color .15s linear;
}
.tg-search input::placeholder { color: var(--tg-ink-faint); }
.tg-search input:focus {
  outline: none;
  border-bottom-color: var(--tg-ink);
}
.tg-search input:focus-visible {
  outline: 2px solid var(--tg-accent);
  outline-offset: 2px;
}

.tg-filter { display: flex; flex-direction: column; gap: 8px; }
.tg-filter-label {
  font-family: var(--tg-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tg-ink-mute);
}
.tg-filter-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tg-chip {
  font-family: var(--tg-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tg-ink-soft);
  background: transparent;
  border: 1px solid var(--tg-rule);
  border-radius: 0;
  padding: 8px 12px;
  min-height: 36px;
  cursor: pointer;
  transition: color .15s linear, border-color .15s linear, background .15s linear;
}
.tg-chip:hover { border-color: var(--tg-ink); }
.tg-chip[aria-pressed="true"] {
  background: var(--tg-ink);
  color: var(--tg-paper);
  border-color: var(--tg-ink);
}
.tg-chip:focus-visible {
  outline: 2px solid var(--tg-accent);
  outline-offset: 2px;
}

/* ---- Registret ---- */
.tg-samling { margin-bottom: clamp(40px, 5vw, 64px); }
.tg-samling[hidden] { display: none; }

.tg-samling-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--tg-rule);
}
.tg-samling-num {
  font-family: var(--tg-mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--tg-ink-mute);
}
.tg-samling-name {
  font-family: var(--tg-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.1;
  color: var(--tg-ink);
}
.tg-samling-count {
  font-family: var(--tg-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tg-ink-mute);
  margin-left: auto;
}

/* Ark-rækken — arkiv-tal · titel · stiplet ledelinje · Læs → */
.tg-ark {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 14px 4px;
  min-height: 44px;
  text-decoration: none;
  color: var(--tg-ink);
  border-bottom: 1px solid var(--tg-rule-faint);
  transition: background .15s linear;
}
.tg-ark[hidden] { display: none; }
.tg-ark:hover { background: rgba(23,19,17,.03); }
.tg-ark:focus-visible {
  outline: 2px solid var(--tg-accent);
  outline-offset: -2px;
}
.tg-num {
  font-family: var(--tg-serif);
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--tg-ink-soft);
  min-width: 3ch;
  font-variant-numeric: tabular-nums;
}
.tg-name {
  font-family: var(--tg-serif);
  font-size: clamp(18px, 2.2vw, 23px);
  line-height: 1.15;
  color: var(--tg-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}
/* table-of-contents stiplet ledelinje — ikke pynt, vejviser */
.tg-leader {
  flex: 1 1 auto;
  align-self: flex-end;
  height: 0;
  margin-bottom: 5px;
  border-bottom: 1px dotted var(--tg-ink-faint);
}
.tg-read {
  font-family: var(--tg-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tg-accent);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .15s linear;
}
.tg-ark:hover .tg-read,
.tg-ark:focus-visible .tg-read,
.tg-ark:focus .tg-read { opacity: 1; }

/* Lyd-markør — diskret, ink-mute (IKKE oxblood; accenten er hellig). Altid synlig. */
.tg-audio {
  font-family: var(--tg-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tg-ink-mute);
  white-space: nowrap;
}

/* Tomt-resultat */
.tg-empty {
  font-family: var(--tg-serif);
  font-style: italic;
  font-size: 20px;
  color: var(--tg-ink-mute);
  padding: 24px 4px;
}
.tg-empty[hidden] { display: none; }

@media (max-width: 640px) {
  .tg-name { max-width: 48%; white-space: normal; }
  .tg-read { opacity: 1; } /* ingen hover på touch — vis altid */
}

/* Bevægelse er næsten nul; slå helt fra under reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .page-tekstgulvet * { transition: none !important; animation: none !important; }
}