/* The hub's own page styles. Loaded AFTER the shared design system, never
 * before: an override that loads before the thing it overrides is not an
 * override.
 *
 * Nothing here redefines a shared token. The tokens have one home and it is
 * static/ds/<version>/kelvara.css, which every agent on the network links.
 * Every colour below is a var(); a hex here is a token that escaped the design
 * system and will not follow it to 2.1.
 */

/* --- Skip link ------------------------------------------------------------
 * Off-screen until focused, then a real, visible control in the corner.
 * Deliberately not display:none and not hidden: both remove the element from
 * the accessibility tree, so it stops being focusable at all, which defeats
 * the entire point of having one.
 */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  background: var(--surface-2); color: var(--chalk);
  padding: var(--s-3) var(--s-4); border: 1px solid var(--line-lit);
  border-radius: var(--radius); font-family: var(--sans); font-size: var(--t-sm);
}
.skip:focus { left: var(--s-4); top: var(--s-4); }

/* --- Labels announced but not shown -------------------------------------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ==========================================================================
   HUB ONLY. These classes exist on no agent, which is why they live here
   rather than in the shared design system. The hub makes a claim, states a
   position, and routes. Nothing here takes a subject or returns a verdict.
   ========================================================================== */

/* --- Opening --------------------------------------------------------------
 * Full-height and almost empty. The weight comes from scale and air, not from
 * ornament: there is no hero image, no gradient and no card, because the one
 * thing on this screen is a sentence that has to be believed.
 */
.open {
  min-height: 86vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--s-10) 0 var(--s-8);
  border-top: 0;
}
.claim {
  font-family: var(--serif);
  font-weight: 200;
  font-size: clamp(2.6rem, 6.4vw, 5.4rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  max-width: 19ch;
  margin: 0;
  color: var(--chalk);
}
.claim em { font-style: normal; color: var(--turq); }
.claim-source {
  font-family: var(--sans); font-size: var(--t-xs); color: var(--chalk-faint);
  margin-top: var(--s-6); padding-top: var(--s-4);
  border-top: 1px solid var(--line); max-width: 420px; line-height: 1.6;
}
.claim-follow {
  font-size: var(--t-md); line-height: 1.55; color: var(--chalk-muted);
  max-width: 44ch; margin-top: var(--s-6);
}
.scroll-cue {
  margin-top: var(--s-12);
  font-family: var(--sans); font-size: var(--t-xs); color: var(--chalk-faint);
  display: flex; align-items: center; gap: var(--s-3);
}
.scroll-cue .line { display: block; width: 1px; height: 34px; background: var(--turq-dim); }

/* ONE orchestrated page-load moment, and nothing else on the site moves.
 * Wrapped in no-preference rather than relying on the design system's reduce
 * kill switch alone: a reader who has asked for less motion should never have
 * the animation declared for them and then cancelled. */
@media (prefers-reduced-motion: no-preference) {
  .claim, .claim-follow, .claim-source, .scroll-cue { animation: rise .9s cubic-bezier(.2,.7,.3,1) both; }
  .claim-follow { animation-delay: .12s; }
  .claim-source { animation-delay: .2s; }
  .scroll-cue   { animation-delay: .3s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* The animation above uses fill-mode `both`, which holds the `from` state --
 * opacity: 0 -- until it runs. A renderer that never advances an animation
 * therefore paints nothing. Printing is exactly that renderer: Chrome
 * snapshots at time zero, so Ctrl+P on this page produced a homepage with no
 * headline, no follow paragraph and no source citation, and the text was
 * absent from the PDF's text layer entirely.
 *
 * On the one page whose whole argument is "one claim, sourced", printing lost
 * the claim AND the source. Found by exporting the site for review.
 *
 * The reduced-motion path was never affected: there the animation is not
 * declared at all, so opacity stays at its default. Only the animated path
 * could fail, and only where animations do not run.
 */
@media print {
  .claim, .claim-follow, .claim-source, .scroll-cue {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --- Position ------------------------------------------------------------- */
.position h2 { max-width: 20ch; }
.position .cols { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s-8); margin-top: var(--s-6); }
.position .cols p:last-child { margin-bottom: 0; }

/* --- Directory ------------------------------------------------------------ */
.directory-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-5); }
.directory-head h2 { font-size: var(--t-md); }
.directory-head .count { font-family: var(--mono); font-size: var(--t-xs); color: var(--chalk-faint); }
.ext { font-family: var(--sans); font-size: var(--t-xs); color: var(--chalk-faint); margin-left: var(--s-2); }
.agent-row:hover .ext { color: var(--turq); }

/* --- Credibility ---------------------------------------------------------- */
.creds { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: var(--s-6); }
.cred { background: var(--surface); padding: var(--s-5); }
.cred h3 { font-family: var(--sans); font-size: var(--t-sm); font-weight: 600; color: var(--chalk); margin-bottom: var(--s-2); }
.cred p { font-size: var(--t-sm); line-height: 1.55; margin: 0; }
.cred a { font-family: var(--sans); font-size: var(--t-sm); display: inline-block; margin-top: var(--s-3); }

/* --- Quality floor --------------------------------------------------------
 * The design system stacks .agent-row and .split below 860px. These are the
 * hub's own two-and-three column blocks, which need the same treatment or the
 * page scrolls sideways on a phone.
 */
@media (max-width: 860px) {
  .position .cols { grid-template-columns: 1fr; gap: var(--s-6); }
  .creds { grid-template-columns: 1fr; }
  .claim { max-width: none; }
}

.table-scroll { overflow-x: auto; margin-top: var(--s-4); }