/**
 * immersion.wiki — P0.3 "archive terminal"
 *
 * Design rules, held strictly:
 *   1. One accent colour, and it only ever signals STATE — focus, hover,
 *      a match, a live indicator. Never decoration. The documents are the
 *      only real content, so they get the only real contrast.
 *   2. Hierarchy comes from weight, size and space. Not from colour, rules,
 *      boxes or shadows.
 *   3. One typeface, three sizes.
 *   4. Motion is system response, never ornament — things resolve, scan and
 *      settle the way an instrument does. Nothing bounces.
 *
 * That is the Bauhaus part: it decides what gets removed, not what it looks like.
 */

:root {
  /* surface */
  --bg:          #0a0a0b;
  --bg-raised:   #101013;
  --line:        #1c1d21;  /* decorative separators only — exempt from 1.4.11 */
  --line-bright: #2c2e34;
  /* The search field's underline IS the input — it's a UI component boundary,
     not a divider, so it carries 3:1 where --line-bright can't. */
  --line-field:  #5e5f60;

  /* ink — every ramp step clears WCAG AA (4.5:1) against BOTH --bg and
     --bg-raised, so nothing fails only in a hover state. Every size on this
     site is below the large-text threshold, so 4.5 is the bar throughout. */
  --text:        #e9e7e2;  /* bone — documents and titles      16.0:1 */
  --text-dim:    #91949b;  /* metadata, snippets                6.5:1 */
  --text-mute:   #7a7d85;  /* labels, disabled                  4.8:1 */

  /* the one accent: signal amber. state only. */
  --accent:      #ffb340;
  --accent-dim:  #7d5a20;

  --mono: ui-monospace, "Cascadia Mono", "SF Mono", "JetBrains Mono",
          "Roboto Mono", Menlo, Consolas, monospace;

  /* type scale — three sizes, nothing else */
  --t-sm: 0.7rem;
  --t-md: 0.875rem;
  --t-lg: 1.0625rem;

  --measure: 74ch;
  --rail: 11ch;          /* metadata column width */
  --unit: 0.5rem;        /* spacing grid */

  --ease: cubic-bezier(.2, .7, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--line-bright) var(--bg);
}

body {
  margin: 0;
  padding: 0 calc(var(--unit) * 3) calc(var(--unit) * 10);
  background: var(--bg);
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: var(--t-md);
  font-variant-ligatures: none;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent); color: #000; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
  left: calc(var(--unit) * 3);
  top: calc(var(--unit) * 3);
  z-index: 10;
  padding: var(--unit) calc(var(--unit) * 2);
  background: var(--accent);
  color: #000;
}

:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
}

/* --- masthead ------------------------------------------------------------
   A system identifying itself, not a logo. */

.masthead {
  max-width: var(--measure);
  margin: 0 auto;
  padding: calc(var(--unit) * 8) 0 calc(var(--unit) * 6);
}

.masthead__title {
  margin: 0;
  color: var(--text);
  font-size: var(--t-lg);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.masthead__dot { color: var(--accent); }

.masthead__sub {
  margin: var(--unit) 0 0;
  color: var(--text-mute);
  font-size: var(--t-sm);
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* live indicator — the only always-on use of the accent, because it is
   literally a status light */
.masthead__status { color: var(--text-dim); }
.masthead__status::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: .6em;
  vertical-align: middle;
  background: var(--accent);
  animation: pulse 3.2s var(--ease) infinite;
}

@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }

.shell { max-width: var(--measure); margin: 0 auto; }

/* --- search --------------------------------------------------------------
   A command line. The rule under it is the interface; there is no box. */

.search__label {
  display: block;
  margin-bottom: calc(var(--unit) * 1.5);
  color: var(--text-mute);
  font-size: var(--t-sm);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.search__field {
  display: flex;
  align-items: baseline;
  gap: calc(var(--unit) * 1.5);
  padding-bottom: calc(var(--unit) * 1.5);
  border-bottom: 1px solid var(--line-field);
  transition: border-color .25s var(--ease);
}

.search__field:focus-within { border-bottom-color: var(--accent); }

/* block cursor: blinks while idle, goes solid the moment you focus */
.search__prompt {
  color: var(--accent);
  font-size: var(--t-lg);
  line-height: 1;
  user-select: none;
  animation: blink 1.1s steps(1) infinite;
}
.search__field:focus-within .search__prompt { animation: none; }

@keyframes blink { 0%, 55% { opacity: 1 } 56%, 100% { opacity: .15 } }

.search__input {
  flex: 1;
  min-width: 0;
  padding: 0;
  background: none;
  border: 0;
  color: var(--text);
  font: inherit;
  font-size: 16px;             /* prevents iOS zoom-on-focus */
  letter-spacing: .01em;
  caret-color: var(--accent);
}

.search__input:focus { outline: none; }
.search__input::placeholder { color: var(--text-mute); }
.search__input::-webkit-search-cancel-button { display: none; }
.search__input:disabled { color: var(--text-mute); }

.search__clear {
  flex: none;
  width: 44px;
  height: 44px;
  margin: -12px -12px -12px 0;
  background: none;
  border: 0;
  color: var(--text-mute);
  font: inherit;
  font-size: var(--t-lg);
  line-height: 1;
  cursor: pointer;
  transition: color .18s var(--ease);
}
.search__clear:hover { color: var(--accent); }

/* --- status line ---------------------------------------------------------
   Reads like console output, so the interface narrates itself. */

.status {
  min-height: 1.5rem;
  margin: calc(var(--unit) * 2) 0 0;
  color: var(--text-mute);
  font-size: var(--t-sm);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.status__count { color: var(--text-dim); }
.status__flag  { color: var(--accent); }

/* --- results -------------------------------------------------------------
   Two columns: a metadata rail and the document. No dividers between rows —
   space separates them. */

.results {
  margin: calc(var(--unit) * 4) 0 0;
  padding: 0;
  list-style: none;
}

.result__hit {
  position: relative;
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  gap: 0 calc(var(--unit) * 3);
  width: 100%;
  padding: calc(var(--unit) * 3) calc(var(--unit) * 2);
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color .18s var(--ease);
}

/* corner brackets — drawn, not faded, so the row feels targeted */
.result__hit::before,
.result__hit::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  opacity: 0;
  transition: opacity .18s var(--ease), transform .22s var(--ease);
  pointer-events: none;
}
.result__hit::before {
  top: 0; left: 0;
  border-top: 1px solid var(--accent);
  border-left: 1px solid var(--accent);
  transform: translate(4px, 4px);
}
.result__hit::after {
  bottom: 0; right: 0;
  border-bottom: 1px solid var(--accent);
  border-right: 1px solid var(--accent);
  transform: translate(-4px, -4px);
}

.result__hit:hover,
.result__hit:focus-visible { background: var(--bg-raised); }

.result__hit:hover::before,
.result__hit:focus-visible::before,
.result__hit:hover::after,
.result__hit:focus-visible::after {
  opacity: 1;
  transform: translate(0, 0);
}

.result__hit:active { background: var(--line); }

.result__meta {
  grid-column: 1;
  color: var(--text-mute);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.9;
}

.result__title {
  grid-column: 2;
  color: var(--text);
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .01em;
}

.result__snippet {
  grid-column: 2;
  margin-top: var(--unit);
  color: var(--text-dim);
  font-size: var(--t-md);
  line-height: 1.7;
}

/* a match is state, so it gets the accent — as ink, not as a highlighter */
mark {
  background: none;
  color: var(--accent);
  font-weight: 600;
}

/* glyphs mid-decode read as noise, not as text */
.decoding { color: var(--text-mute); }

/* --- panels (idle / empty / error) -------------------------------------- */

.panel {
  margin: calc(var(--unit) * 6) 0;
  padding-left: calc(var(--unit) * 3);
  border-left: 1px solid var(--line-bright);
}

.panel__line {
  margin: 0;
  color: var(--text);
  font-size: var(--t-md);
  letter-spacing: .06em;
}

.panel__line--dim {
  margin-top: var(--unit);
  color: var(--text-mute);
}

/* The one link inside a panel (the 404's way back). Underline carries it, the
   accent only arrives on hover — state, not decoration. */
.panel__link {
  display: inline-block;
  margin-top: calc(var(--unit) * 3);
  color: var(--text-dim);
  text-decoration-color: var(--line-bright);
  text-underline-offset: .3em;
  transition: color .18s var(--ease);
}
.panel__link:hover { color: var(--accent); }

/* --- document ------------------------------------------------------------
   The payoff screen. Widest possible measure of quiet. */

.document { margin: calc(var(--unit) * 3) 0 0; }
.document:focus { outline: none; }

.document--entering { animation: wipe .34s var(--ease) both; }

@keyframes wipe {
  from { clip-path: inset(0 100% 0 0); opacity: .4 }
  to   { clip-path: inset(0 0 0 0);    opacity: 1  }
}

/* Two controls, opposite ends: leaving on the left, taking the link with you
   on the right. Both read as console commands, neither as a button. */
.document__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--unit) * 3);
}

.document__back,
.document__share {
  padding: var(--unit) 0;
  background: none;
  border: 0;
  color: var(--text-mute);
  font: inherit;
  font-size: var(--t-sm);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .18s var(--ease);
}
.document__back:hover,
.document__share:hover { color: var(--accent); }

.document__head {
  margin: calc(var(--unit) * 4) 0 calc(var(--unit) * 6);
}

.document__meta {
  margin: 0 0 calc(var(--unit) * 2);
  color: var(--text-mute);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.document__title {
  margin: 0;
  color: var(--text);
  font-size: var(--t-lg);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.005em;
}

.document__body {
  color: var(--text);
  font-size: var(--t-md);
  line-height: 1.85;
}

.document__body p {
  margin: 0 0 calc(var(--unit) * 4);
  overflow-wrap: anywhere;
}

/* --- colophon ----------------------------------------------------------- */

.colophon {
  max-width: var(--measure);
  margin: calc(var(--unit) * 20) auto 0;
  padding-top: calc(var(--unit) * 4);
  border-top: 1px solid var(--line);
  color: var(--text-mute);
  font-size: var(--t-sm);
  line-height: 1.9;
}

.colophon p { margin: 0 0 var(--unit); }
/* The CDPR disclaimer used to be the dimmest text on the page (1.82:1) — the
   worst possible place for that, since it's the one paragraph that exists to be
   read. It sits at the same weight as the credit above it now; the ordering and
   the italics carry the hierarchy instead of a contrast drop. */
.colophon__dim { color: var(--text-mute); }
.colophon a { color: var(--text-dim); text-decoration-color: var(--line-bright); }
.colophon a:hover { color: var(--accent); }

/* --- narrow --------------------------------------------------------------
   The rail collapses above the title; nothing else changes. */

@media (max-width: 34rem) {
  :root { --measure: 100%; }

  .masthead { padding-top: calc(var(--unit) * 5); }

  .result__hit {
    grid-template-columns: 1fr;
    gap: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .result__meta,
  .result__title,
  .result__snippet { grid-column: 1; }
  .result__meta { line-height: 1.6; margin-bottom: calc(var(--unit) * .5); }

  .result__hit::before { transform: translate(4px, 4px) }
}

/* --- reduced motion ------------------------------------------------------
   Motion here is response, not information, so it is safe to remove entirely. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}