/* ==========================================================================
   COMPONENTS · REFERENCE DESK — the shared furniture voice of the five support
   surfaces (/faq · /glossary · /help · /contact · /sitemap). They are the
   institution's reference desk, so they share ONE grammar:

   · op-refdesk-head  — the page head every desk surface opens with: a ticked
                        kicker, a serif title, a standfirst.
   · op-desknav       — the binding strip. The five surfaces listed as one set
                        of registers with mono tallies; the current one marked
                        with the rubric tick. This is what makes the five read
                        as one desk rather than five divergent static pages.
   · op-index-list    — a printed register of primary URLs / countries, with a
                        mono tag at the end of each row and an honest
                        "in preparation" state (no phantom links).
   · op-sitemap__cols — the matrix laid out as a multi-column printed index.
   · op-contact       — the contact desk: a two-up of the warm form and the
                        editor's note; op-statepanel labels the success and the
                        honest-failure re-render shown on one static surface.

   Composes op-kicker, op-standfirst, op-card, op-accordion, op-glossary,
   op-field, op-alert, op-callout, op-crosslink. New component for harvest.
   ========================================================================== */

/* — The page head shared by every desk surface — */
.op-refdesk-head {
  padding-block: var(--space-xl) var(--space-md);
  border-bottom: 1px solid var(--rule-faint);
}
.op-refdesk-head__title {
  font-family: var(--font-reading);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: var(--space-2xs) 0 0;
  text-wrap: balance;
}
.op-refdesk-head .op-standfirst { max-width: var(--measure); }

/* ==========================================================================
   THE DESK INDEX STRIP — the one binder across all five surfaces.
   ========================================================================== */
.op-desknav {
  margin-block: var(--space-md) var(--space-xl);
}
.op-desknav__label {
  font-family: var(--font-furniture);
  font-size: var(--text-3xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--space-2xs);
}
.op-desknav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  background: var(--surface-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-emboss);
  overflow: hidden;
}
.op-desknav__item {
  flex: 1 1 8rem;
  border-inline-start: 1px solid var(--rule-faint);
}
.op-desknav__item:first-child { border-inline-start: 0; }
.op-desknav__link {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  padding: var(--space-xs) var(--space-md);
  text-decoration: none;
  color: var(--text);
  block-size: 100%;
  transition: var(--transition-ink);
}
.op-desknav__link:hover { background: var(--accent-wash); color: var(--accent); }
.op-desknav__name {
  font-family: var(--font-furniture);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
}
.op-desknav__tally {
  font-family: var(--font-data);
  font-size: var(--text-3xs);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
/* The current desk: rubric register tick + ink, never a link */
.op-desknav__item--current { background: var(--surface-sunken); }
.op-desknav__item--current .op-desknav__name {
  color: var(--text);
  position: relative;
  padding-inline-start: 1.1em;
}
.op-desknav__item--current .op-desknav__name::before {
  content: "";
  position: absolute;
  inset-block: 0.3em;
  inset-inline-start: 0;
  inline-size: 2px;
  background: var(--accent);
}

/* ==========================================================================
   SECTION FURNITURE — a small-caps section head with a counter, reused on FAQ,
   the sitemap and the help hub so the surfaces share section rhythm.
   ========================================================================== */
.op-desk-section { margin-top: var(--space-xl); }
.op-desk-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-bottom: var(--space-2xs);
  border-bottom: 2px solid var(--rule-strong);
  margin-bottom: var(--space-md);
}
.op-desk-section__title {
  font-family: var(--font-furniture);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
}
.op-desk-section__count {
  font-family: var(--font-data);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ==========================================================================
   THE INDEX REGISTER — the sitemap's primary-pages & countries lists: a printed
   register, name left, mono tag right, honest "in preparation" rows.
   ========================================================================== */
.op-index-list {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: var(--space-xl);
}
.op-index-list--single { columns: 1; }
.op-index-list__row {
  break-inside: avoid;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 0.4em 0;
  border-bottom: 1px solid var(--rule-faint);
}
.op-index-list__name {
  font-family: var(--font-furniture);
  font-size: var(--text-sm);
  color: var(--text);
  text-decoration: none;
}
a.op-index-list__name:hover { color: var(--accent); }
.op-index-list__tag {
  flex: none;
  font-family: var(--font-data);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
/* An honest unpublished row: dimmed name + a hatched register mark, inert */
.op-index-list__row--pending .op-index-list__name { color: var(--text-muted); }
.op-index-list__pending {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-furniture);
  font-size: var(--text-3xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.op-index-list__pending::before {
  content: "";
  inline-size: 0.9em;
  block-size: 0.9em;
  border: 1px solid var(--band-none-line);
  background-color: var(--surface);
  background-image: var(--hatch-image);
}

/* ==========================================================================
   THE FACTOR INDEX — the 8 specialties × 112 factors as a printed multi-column
   index (catalogue pages, NOT country×factor report URLs).
   ========================================================================== */
.op-sitemap__cols {
  columns: 3;
  column-gap: var(--space-xl);
}
@media (max-width: 56.25rem) { .op-sitemap__cols { columns: 2; } }
@media (max-width: 40rem)    { .op-sitemap__cols { columns: 1; } }
.op-sitemap__group {
  break-inside: avoid;
  margin-bottom: var(--space-lg);
}
.op-sitemap__group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs);
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--rule-strong);
  margin-bottom: var(--space-2xs);
}
.op-sitemap__group-name {
  font-family: var(--font-reading);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  text-decoration: none;
}
.op-sitemap__group-name:hover { color: var(--accent); }
.op-sitemap__group-count {
  flex: none;
  font-family: var(--font-data);
  font-size: var(--text-3xs);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text-muted);
}
.op-sitemap__factors {
  list-style: none;
  margin: 0;
  padding: 0;
}
.op-sitemap__factors li {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  padding: 0.18em 0;
}
.op-sitemap__factors li::before {
  content: counter(fct, decimal-leading-zero);
  counter-increment: fct;
  font-family: var(--font-data);
  font-size: var(--text-3xs);
  color: var(--text-muted);
  flex: none;
}
.op-sitemap__group { counter-reset: fct; }
.op-sitemap__factors a {
  font-family: var(--font-furniture);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  text-decoration: none;
  line-height: var(--leading-snug);
}
.op-sitemap__factors a:hover { color: var(--accent); }

/* ==========================================================================
   THE HELP HUB — a calm grid of desks (composes op-card).
   ========================================================================== */
.op-hub {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.op-hub__card { gap: var(--space-2xs); }
.op-hub__card .op-card__title { font-size: var(--text-md); }
.op-hub__lead {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent);
}
.op-hub__go {
  margin-top: auto;
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text);
}
.op-hub__go::after { content: " \2192"; color: var(--accent); }

/* The "start here" orientation rows on /help */
.op-hub__start {
  display: grid;
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  overflow: hidden;
}
.op-hub__start-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  border-top: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  transition: var(--transition-ink);
}
.op-hub__start-row:first-child { border-top: 0; }
.op-hub__start-row:hover { background: var(--accent-wash); }
.op-hub__start-q {
  font-family: var(--font-reading);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}
.op-hub__start-a {
  font-family: var(--font-furniture);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: 0.15em;
}
.op-hub__start-go {
  flex: none;
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
}
.op-hub__start-go::after { content: " \2192"; color: var(--accent); }

/* ==========================================================================
   THE CONTACT DESK
   ========================================================================== */
.op-contact {
  display: grid;
  gap: var(--space-xl);
}
@media (min-width: 56.25rem) {
  .op-contact { grid-template-columns: minmax(0, 1.4fr) 18rem; align-items: start; }
}
.op-contact__form {
  display: grid;
  gap: var(--space-md);
}
.op-contact__row {
  display: grid;
  gap: var(--space-md);
}
@media (min-width: 40rem) {
  .op-contact__row--2 { grid-template-columns: 1fr 1fr; }
}
.op-contact__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  padding-top: var(--space-2xs);
}
.op-contact__aside {
  display: grid;
  gap: var(--space-md);
  align-content: start;
}

/* A labelled state panel — shows the success + honest-failure states on one
   static surface, each fenced and tagged so the operator reads both. */
.op-statepanel { margin-top: var(--space-xl); }
.op-statepanel__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-furniture);
  font-size: var(--text-3xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent);
  padding: 0.2em 0.6em;
  border: 1px solid var(--accent-keyline);
  border-radius: var(--radius-xs);
  margin-bottom: var(--space-sm);
}
.op-statepanel__frame {
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-lg);
  background: color-mix(in oklab, var(--surface-raised) 70%, transparent);
}
.op-statepanel__note {
  font-family: var(--font-furniture);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  margin: 0 0 var(--space-md);
  max-width: var(--measure);
}

/* The gracious confirmation block */
.op-receipt {
  display: grid;
  gap: var(--space-sm);
  max-width: var(--measure);
}
.op-receipt__mark {
  font-family: var(--font-data);
  font-size: var(--text-lg);
  color: var(--accent);
}
.op-receipt__title {
  font-family: var(--font-reading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  margin: 0;
}
.op-receipt__body {
  font-family: var(--font-reading);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin: 0;
}
.op-receipt__meta {
  font-family: var(--font-data);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ==========================================================================
   FAQ — group the accordion under section heads; a quiet anchor list at the top
   ========================================================================== */
.op-faq__group + .op-faq__group { margin-top: var(--space-xl); }
.op-faq__answer > * + * { margin-top: var(--space-sm); }
.op-faq__route {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}
.op-faq__route a {
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--link-underline);
  padding-bottom: 0.1em;
}
.op-faq__route a:hover { color: var(--accent); border-color: var(--accent); }
.op-faq__route a::after { content: " \2192"; color: var(--accent); }

/* Glossary: keep the jump index from scrolling out of reach on desktop */
@media (min-width: 56.25rem) {
  .op-glossary__index { position: sticky; top: 4.5rem; z-index: var(--z-raised); }
}