/* ==========================================================================
   Future Reader Terminal — instrument styles
   ==========================================================================
   Namespaced beneath .archive-instrument--terminal. Consumes only the
   foundation tokens; a small set of terminal-local custom properties is
   defined on the block for tuning the amber washes and the recessed reply
   ground.

   Unlike the constellation — whose SVG carries inline presentation for export
   fidelity — the Terminal's script paints NO inline styles on app DOM. This
   stylesheet fully owns the app's look; every rule here is load-bearing, and a
   missing rule shows as an unstyled fragment, not a theming gap.

   Visual language: dead-letter office / diplomatic cable archive / teletype.
   Black instrument glass, fine graphite rules, amber documentary emphasis, and
   dashed perforations. Green (--instrument-signal) is spent on exactly one
   thing: successful receipt — the answered letter chip and a met criterion.
   Everything else stays graphite, ink, or amber.

   The Terminal's drama is dated emptiness, not motion. There are NO animations
   and NO transitions anywhere in this file; hover and active states resolve
   instantly, the way a stamped record does.
   ========================================================================== */

.archive-instrument--terminal {
  /* Terminal-local tuning tokens (host may retune; colour is never the sole
     signal — every state is also named in text). */
  --frt-amber-wash: rgba(197, 138, 42, 0.07);   /* selected / active-receipt tint */
  --frt-machine-wash: rgba(197, 138, 42, 0.14); /* machine-origin banner ground */
  --frt-reply-ground: rgba(0, 0, 0, 0.25);      /* recessed reply card */
  --frt-ink-border: rgba(232, 227, 216, 0.45);  /* present/attested chip edge */
}

/* --- Header (server-rendered) -------------------------------------------- */
/* .frt-header is a semantic <header> wrapper; its block children below carry
   all spacing, so it needs no rule of its own. */

.archive-instrument--terminal .frt-kicker {
  font-family: var(--instrument-font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--instrument-amber);
  margin: 0 0 10px;
}

.archive-instrument--terminal .frt-title {
  font-family: var(--instrument-font-serif);
  font-weight: 400;
  font-size: clamp(30px, 4.5cqw, 52px);
  line-height: 1.06;
  margin: 0 0 14px;
  color: var(--instrument-ink);
}

.archive-instrument--terminal .frt-lede {
  font-size: clamp(16px, 1.6cqw, 19px);
  max-width: 62ch;
  color: var(--instrument-ink);
  margin: 0 0 8px;
}

.archive-instrument--terminal .frt-standfirst {
  font-family: var(--instrument-font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--instrument-muted);
  margin: 0 0 18px;
}

.archive-instrument--terminal .frt-noscript-note {
  font-family: var(--instrument-font-mono);
  font-size: 13px;
  color: var(--instrument-muted);
  border: 1px dashed var(--instrument-rule);
  padding: 10px 14px;
  max-width: 68ch;
}

/* --- App shell ----------------------------------------------------------- */
/* The toolbar is a full-width bar above the grid. The grid holds two columns:
   the registry column (scrolls the page) and the reading column (sticky). */

.archive-instrument--terminal .frt-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 12px;
}

.archive-instrument--terminal .frt-toolbar-spacer {
  flex: 1 1 auto;
}

.archive-instrument--terminal .frt-app {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.archive-instrument--terminal .frt-registry-column {
  min-width: 0; /* let the registry track shrink; rows clamp their own text */
}

/* Select mirrors the foundation control idiom (see the constellation's
   .cc-select): panel ground, graphite border, a CSS-drawn chevron. */
.archive-instrument--terminal .frt-select {
  appearance: none;
  font-family: var(--instrument-font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--instrument-ink);
  background: var(--instrument-panel);
  border: 1px solid var(--instrument-rule);
  padding: 9px 30px 9px 12px;
  min-height: 36px;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 49%, var(--instrument-muted) 50%),
                    linear-gradient(-45deg, transparent 49%, var(--instrument-muted) 50%);
  background-position: right 16px center, right 11px center;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

/* --- Reading column (sticky bench) --------------------------------------- */
/* The reading column stays in view while the registry scrolls the page; each
   panel inside it keeps its own scroll so several fit one viewport. */

.archive-instrument--terminal .frt-reading {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--instrument-rule) transparent;
}

.archive-instrument--terminal .frt-panel {
  background: var(--instrument-panel);
  border: 1px solid var(--instrument-rule);
  padding: 14px 16px;
}

.archive-instrument--terminal .frt-reading .frt-panel {
  flex: 0 0 auto;
  max-height: 70vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--instrument-rule) transparent;
}

.archive-instrument--terminal .frt-panel-h {
  font-family: var(--instrument-font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--instrument-muted);
  margin: 0 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.archive-instrument--terminal .frt-panel-h-extra {
  color: var(--instrument-amber);
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0.06em;
}

.archive-instrument--terminal .frt-section-h {
  font-family: var(--instrument-font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--instrument-amber);
  margin: 14px 0 6px;
}

/* --- Registry ------------------------------------------------------------ */
/* .frt-registry is a .frt-panel; it is NOT inside .frt-reading, so it takes no
   height cap and grows down the page. */

.archive-instrument--terminal .frt-registry-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.archive-instrument--terminal .frt-registry-row {
  border-top: 1px solid var(--instrument-rule);
  padding-top: 8px;
}

.archive-instrument--terminal .frt-registry-row:first-child {
  border-top: 0;
  padding-top: 0;
}

/* Transparent 1px border at rest so active/hover recolouring never reflows. */
.archive-instrument--terminal .frt-registry-open {
  appearance: none;
  display: grid;
  gap: 4px;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid transparent;
  padding: 10px 12px;
  cursor: pointer;
}

.archive-instrument--terminal .frt-registry-open:hover {
  border-color: var(--instrument-rule);
}

/* Ink brightening on hover: the muted meta lifts to full ink as the row wakes. */
.archive-instrument--terminal .frt-registry-open:hover .frt-reg-meta {
  color: var(--instrument-ink);
}

.archive-instrument--terminal .frt-registry-row--active .frt-registry-open {
  border-color: var(--instrument-amber);
  background: var(--frt-amber-wash);
}

.archive-instrument--terminal .frt-reg-id {
  font-family: var(--instrument-font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--instrument-amber);
}

.archive-instrument--terminal .frt-reg-question {
  font-family: var(--instrument-font-serif);
  font-size: 15.5px;
  line-height: 1.3;
  color: var(--instrument-ink);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.archive-instrument--terminal .frt-reg-meta {
  font-family: var(--instrument-font-mono);
  font-size: 12px;
  color: var(--instrument-muted);
}

/* --- Status chips -------------------------------------------------------- */
/* Each chip carries its status as text; colour and border are redundant
   reinforcement. Green is reserved for --answered (successful receipt). */

.archive-instrument--terminal .frt-status {
  display: inline-block;
  font-family: var(--instrument-font-mono);
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 2px 8px;
  border: 1px solid var(--instrument-rule);
  color: var(--instrument-muted);
  white-space: nowrap;
}

.archive-instrument--terminal .frt-status--in-transit {
  color: var(--instrument-amber);
  border-color: var(--instrument-amber);
}

.archive-instrument--terminal .frt-status--answered {
  color: var(--instrument-signal);
  border-color: var(--instrument-signal);
}

.archive-instrument--terminal .frt-status--reply-received {
  color: var(--instrument-ink);
  border-color: var(--frt-ink-border);
}

.archive-instrument--terminal .frt-status--under-review {
  color: var(--instrument-muted);
  border-style: dotted;
}

.archive-instrument--terminal .frt-status--sealed {
  color: var(--instrument-ink);
  border-style: dashed;
  border-color: var(--frt-ink-border);
}

.archive-instrument--terminal .frt-status--withdrawn {
  color: var(--instrument-danger);
  border-color: var(--instrument-danger);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.archive-instrument--terminal .frt-status--draft {
  color: var(--instrument-muted);
  border-style: dotted;
}

/* --- Letter view --------------------------------------------------------- */
/* .frt-letter is a .frt-panel; .frt-meaning / .frt-criteria / .frt-sources are
   semantic <section> wrappers whose section heading + list carry the styling. */

.archive-instrument--terminal .frt-letterhead {
  border-bottom: 1px dashed var(--instrument-rule); /* the cable perforation */
  padding-bottom: 10px;
  margin-bottom: 12px;
}

.archive-instrument--terminal .frt-letter-id {
  font-family: var(--instrument-font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--instrument-muted);
  margin: 0;
}

.archive-instrument--terminal .frt-horizon {
  font-family: var(--instrument-font-mono);
  font-size: 12.5px;
  color: var(--instrument-ink);
  margin: 6px 0;
}

.archive-instrument--terminal .frt-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}

/* Blockquote: strip the UA margin/indent and set spacing explicitly. */
.archive-instrument--terminal .frt-question {
  font-family: var(--instrument-font-serif);
  font-size: clamp(19px, 2cqw, 24px);
  line-height: 1.35;
  color: var(--instrument-ink);
  margin: 12px 0;
}

.archive-instrument--terminal .frt-hash {
  font-family: var(--instrument-font-mono);
  font-size: 11px;
  color: var(--instrument-muted);
  word-break: break-all;
  margin: 4px 0;
}

.archive-instrument--terminal .frt-sealed-block {
  background: var(--instrument-glass);
  border: 1px dashed var(--instrument-rule);
  padding: 14px;
  font-family: var(--instrument-font-mono);
  font-size: 13px;
  color: var(--instrument-muted);
}

.archive-instrument--terminal .frt-meaning p {
  font-family: var(--instrument-font-serif);
  font-size: 15px;
  margin: 0 0 8px;
}

.archive-instrument--terminal .frt-criteria-list {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--instrument-font-serif);
  font-size: 14.5px;
}

.archive-instrument--terminal .frt-crit-kind {
  font-family: var(--instrument-font-mono);
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--instrument-amber);
  margin-right: 6px;
}

.archive-instrument--terminal .frt-sources-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--instrument-font-mono);
  font-size: 13px;
}

.archive-instrument--terminal .frt-withdrawn-banner {
  border: 1px dashed var(--instrument-danger);
  color: var(--instrument-danger);
  font-family: var(--instrument-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 10px;
  margin: 0 0 10px;
}

/* Shown in the reading column when no letter is open: a plain hint, not a
   panel and not an error — deliberate, addressed emptiness. */
.archive-instrument--terminal .frt-empty-room {
  font-family: var(--instrument-font-serif);
  font-size: 15px;
  color: var(--instrument-muted);
  border-left: 2px solid var(--instrument-amber);
  padding-left: 12px;
  margin: 0;
}

/* --- The empty slot (centerpiece) ---------------------------------------- */
/* .frt-slot-region is a <section> wrapper (heading + slot). .frt-slot--empty is
   the only slot state in play; the base .frt-slot IS the labelled-emptiness
   look — a deliberate dead-letter slot, never a broken black box. */

.archive-instrument--terminal .frt-slot {
  background: var(--instrument-glass);
  border: 1px dashed var(--instrument-rule);
  min-height: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 18px;
  text-align: center;
}

/* Also used for the sealed block's "QUESTION SEALED" heading. */
.archive-instrument--terminal .frt-slot-label {
  font-family: var(--instrument-font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--instrument-ink);
}

.archive-instrument--terminal .frt-slot-note {
  font-family: var(--instrument-font-serif);
  font-size: 13.5px;
  color: var(--instrument-muted);
  max-width: 46ch;
  margin: 0;
}

/* --- Replies ------------------------------------------------------------- */
/* Reply records are documentary objects; the machine banner keeps them from
   ever reading as canonical. Reply tab buttons are foundation .ai-btn (active
   state via aria-pressed). */

.archive-instrument--terminal .frt-reply-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

.archive-instrument--terminal .frt-reply {
  border: 1px solid var(--instrument-rule);
  padding: 12px 14px;
  background: var(--frt-reply-ground);
}

.archive-instrument--terminal .frt-machine-banner {
  font-family: var(--instrument-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--instrument-ink);
  background: var(--frt-machine-wash);
  border: 1px dashed var(--instrument-amber);
  padding: 8px 10px;
  margin: 0 0 10px;
}

.archive-instrument--terminal .frt-prov {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 12px;
  margin: 0;
  font-family: var(--instrument-font-mono);
  font-size: 12px;
}

.archive-instrument--terminal .frt-prov dt {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--instrument-muted);
  align-self: center;
}

.archive-instrument--terminal .frt-prov dd {
  margin: 0;
  color: var(--instrument-ink);
  word-break: break-all; /* hashes wrap rather than overflow the track */
}

/* Blockquote: explicit margin, amber documentary rule down the left. */
.archive-instrument--terminal .frt-excerpt {
  font-family: var(--instrument-font-serif);
  font-size: 15px;
  border-left: 2px solid var(--instrument-amber);
  padding-left: 12px;
  margin: 10px 0;
}

.archive-instrument--terminal .frt-excerpt-pending {
  font-family: var(--instrument-font-mono);
  font-size: 12.5px;
  color: var(--instrument-muted);
  border: 1px dotted var(--instrument-rule);
  padding: 10px;
  margin: 10px 0;
}

.archive-instrument--terminal .frt-assessment {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--instrument-font-serif);
  font-size: 13.5px;
}

.archive-instrument--terminal .frt-verdict {
  display: inline-block;
  font-family: var(--instrument-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  border: 1px solid var(--instrument-rule);
  color: var(--instrument-muted);
  padding: 1px 7px;
  margin-right: 8px;
}

.archive-instrument--terminal .frt-verdict--met {
  color: var(--instrument-signal);
  border-color: var(--instrument-signal);
}

.archive-instrument--terminal .frt-verdict--partial {
  color: var(--instrument-amber);
  border-color: var(--instrument-amber);
}

.archive-instrument--terminal .frt-verdict--not-met {
  color: var(--instrument-danger);
  border-color: var(--instrument-danger);
}

.archive-instrument--terminal .frt-verdict--not-assessed {
  color: var(--instrument-muted);
  border-style: dotted;
}

.archive-instrument--terminal .frt-comparison {
  font-family: var(--instrument-font-serif);
  font-size: 13.5px;
  color: var(--instrument-muted);
  border-left: 2px solid var(--instrument-rule);
  padding-left: 10px;
  margin: 10px 0 0;
}

.archive-instrument--terminal .frt-correction-note {
  font-family: var(--instrument-font-serif);
  font-size: 13.5px;
  color: var(--instrument-muted);
  border-left: 2px solid var(--instrument-amber);
  padding-left: 10px;
  margin: 10px 0 0;
}

/* --- Compose (reader drafts) --------------------------------------------- */
/* .frt-compose is a .frt-panel, hidden via the [hidden] attribute until the
   reader toggles it open. Input pattern mirrors the constellation's compose. */

.archive-instrument--terminal .frt-field-label {
  display: block;
  font-family: var(--instrument-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--instrument-muted);
  margin: 0 0 4px;
}

.archive-instrument--terminal .frt-input,
.archive-instrument--terminal .frt-textarea {
  width: 100%;
  font-family: var(--instrument-font-mono);
  font-size: 13px;
  color: var(--instrument-ink);
  background: var(--instrument-glass);
  border: 1px solid var(--instrument-rule);
  padding: 8px 10px;
  margin: 0 0 10px;
}

.archive-instrument--terminal .frt-textarea {
  min-height: 64px;
  resize: vertical;
  font-family: var(--instrument-font-serif);
  font-size: 14px;
}

.archive-instrument--terminal .frt-compose-hint {
  font-family: var(--instrument-font-serif);
  font-size: 13px;
  color: var(--instrument-muted);
  margin: 0 0 10px;
}

.archive-instrument--terminal .frt-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* --- Exports & legend ---------------------------------------------------- */
/* .frt-exports and .frt-legend are .frt-panel instances; the legend list reuses
   the fallback classes below. Only the trailing note needs its own rule. */

.archive-instrument--terminal .frt-legend-note {
  font-family: var(--instrument-font-serif);
  font-size: 12.5px;
  color: var(--instrument-muted);
  margin: 8px 0 0;
}

/* --- Fallback text registry (generated index) ---------------------------- */
/* Mirrors the constellation's .cc-index family exactly: the no-JS registry and
   the shared legend/generation lists. Some of these classes (fallback-summary,
   fallback-meta, index-p) are reused by the live app for its plain records. */

.archive-instrument--terminal .frt-index {
  margin-top: 22px;
  border: 1px solid var(--instrument-rule);
  padding: 0;
}

.archive-instrument--terminal .frt-index-summary {
  font-family: var(--instrument-font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--instrument-muted);
  padding: 12px 16px;
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.archive-instrument--terminal .frt-index-summary:hover {
  color: var(--instrument-amber-bright);
}

.archive-instrument--terminal .frt-index[open] .frt-index-summary {
  border-bottom: 1px solid var(--instrument-rule);
}

.archive-instrument--terminal .frt-index-section {
  padding: 14px 16px;
  border-bottom: 1px solid var(--instrument-rule);
}

.archive-instrument--terminal .frt-index-section:last-child {
  border-bottom: 0;
}

.archive-instrument--terminal .frt-index-h {
  font-family: var(--instrument-font-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--instrument-amber);
  margin: 0 0 8px;
}

.archive-instrument--terminal .frt-index-h3 {
  font-family: var(--instrument-font-serif);
  font-size: 17px;
  font-weight: 400;
  margin: 14px 0 4px;
  color: var(--instrument-ink);
}

.archive-instrument--terminal .frt-index-p {
  font-family: var(--instrument-font-serif);
  font-size: 14px;
  color: var(--instrument-muted);
  max-width: 70ch;
  margin: 0 0 8px;
}

.archive-instrument--terminal .frt-legend-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 14px;
  margin: 0;
  font-size: 13.5px;
}

.archive-instrument--terminal .frt-legend-list dt {
  font-family: var(--instrument-font-mono);
  font-size: 12px;
  color: var(--instrument-ink);
}

.archive-instrument--terminal .frt-legend-list dd {
  margin: 0;
  color: var(--instrument-muted);
}

.archive-instrument--terminal .frt-fallback-list {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
}

.archive-instrument--terminal .frt-fallback-title {
  display: block;
  color: var(--instrument-ink);
}

.archive-instrument--terminal .frt-fallback-title a,
.archive-instrument--terminal .frt-index a {
  color: var(--instrument-ink);
  text-decoration: underline;
  text-decoration-color: rgba(197, 138, 42, 0.5);
  text-underline-offset: 3px;
}

.archive-instrument--terminal .frt-index a:hover {
  color: var(--instrument-amber-bright);
}

.archive-instrument--terminal .frt-fallback-meta {
  display: block;
  font-family: var(--instrument-font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--instrument-muted);
}

.archive-instrument--terminal .frt-fallback-summary {
  display: block;
  font-size: 13.5px;
  color: var(--instrument-muted);
}

.archive-instrument--terminal .frt-fallback-note {
  display: block;
  font-size: 13px;
  color: var(--instrument-amber);
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1280px) {
  .archive-instrument--terminal .frt-app {
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .archive-instrument--terminal .frt-app {
    grid-template-columns: 1fr;
  }
  /* Registry is first in source order and stays first; the reading pane drops
     its sticky/scroll behaviour and flows full height beneath it. */
  .archive-instrument--terminal .frt-reading {
    position: static;
    max-height: none;
    overflow: visible;
  }
  .archive-instrument--terminal .frt-reading .frt-panel {
    max-height: none;
  }
}

@media (max-width: 768px) {
  .archive-instrument--terminal .frt-select {
    min-height: 44px;
  }
  .archive-instrument--terminal .frt-registry-open {
    min-height: 44px;
  }
}

@media (max-width: 480px) {
  .archive-instrument--terminal .frt-panel {
    padding: 12px;
  }
  .archive-instrument--terminal .frt-prov {
    grid-template-columns: 1fr;
  }
}