/* ==========================================================================
   Top Secret — identity layer
   Loaded AFTER styles.css and page.css, so it only re-tokens; it never
   restructures. The chassis layout, rhythm and responsive behaviour are
   inherited untouched from the site this was forked from.

   PALETTE PROVENANCE — every value below was measured out of the app's own
   art in ~/git/topsecret, not picked:
     assets/welcome_to_topsecret.png (the splash wordmark, the only asset in
     the repo that says "Top Secret") gives the gold→flame vertical ramp
     #FDD300 → #F5A700 → #F16400 and the #802600 extrude that is 36% of its
     pixels. assets/1024x1024.png (the app icon) gives #F5D7B1 cream (57%),
     #010101 outline, #FF9D27 and #C2761E. tailwind.config.js carries no
     theme colours at all, so the artwork is the whole brand.

   The look is a declassified file: file stock, typewriter face, redaction
   bars, a wet-ink stamp — now in the app's own colours rather than a
   sibling product's. That is the product's own joke: an app whose whole job
   is to keep a complete record of what you saw, named after the thing you
   would least like recorded.
   ========================================================================== */

:root {
  /* Ground — the app icon's cream, exact. */
  --manila:      #f5d7b1;
  --manila-lift: #fbe9d2;
  --manila-deep: #e0c096;

  --bg:          var(--manila);
  --text:        #17130d;
  --text-soft:   #5c4f3a;
  --rule:        rgba(23, 19, 13, 0.18);

  /* Redaction black — the accent used as a solid bar rather than as a hue. */
  --redact:      #14110c;
  --redact-soft: rgba(20, 17, 12, 0.86);

  /* The wordmark ramp, sampled top-to-bottom off the splash art. */
  --gold:        #fdd300;
  --amber:       #f5a700;
  --flame:       #f16400;

  /* The wordmark's extrude. Doubles as the stamp: it is already the darkest
     warm value in the app's own palette, so no new hue is introduced. */
  --stamp:       #802600;
  --stamp-deep:  #5e1c00;

  /* The chassis references these names throughout; remap rather than rename
     so no rule in page.css has to change. */
  --cream:       var(--manila);
  --cream-lift:  var(--manila-lift);
  --cream-deep:  var(--manila-deep);
  --orange:      var(--amber);
  --orange-deep: var(--stamp);
  --ink:         #010101;
  --paper:       #fffaf0;

  /* Typewriter, not pixel. Uses the system monospace stack so nothing new
     ships and no font licence is inherited — the same caution the chassis
     applied when it refused to ship the app's own display face. */
  --font-display: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  --radius: 3px;               /* paper has corners, not pills */
  --shadow-hard: 0 3px 0 0 var(--ink);
}

/* Faint horizontal rule texture: ruled paper, not a gradient mesh. */
body {
  background-color: var(--manila);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 31px,
    rgba(23, 19, 13, 0.045) 31px 32px
  );
}

/* ---- Wordmark ---------------------------------------------------------- */
/* The app's splash art sets "TopSecret" as chunky arcade letters on a diagonal
   with a maroon extrude. The extrude and the gold→flame ramp are the identity;
   the arcade skew is not — it was drawn for a splash screen and it reads as
   playful on a page whose argument is that the last app in this category
   betrayed its users. So: same ramp, same extrude, set straight and tight.
   Swapping this rule for an <img> of assets/welcome_to_topsecret.png is the
   one-file change back to the original letterforms. */
.wm {
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: 0.12em;
  line-height: 1;
}
.wm::before {
  content: attr(data-text);
  position: absolute;
  left: 2px;
  top: 2px;
  color: var(--stamp);
  z-index: 0;
  /* Absolutely positioned, so its containing block can be narrower than the
     text — without this the extrude layer wraps and prints a second wordmark
     underneath the real one. */
  white-space: nowrap;
}
.wm > span {
  position: relative;
  z-index: 1;
  background-image: linear-gradient(to bottom, var(--gold) 8%, var(--amber) 55%, var(--flame) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0.4px var(--stamp-deep);
}
.nav__brand { text-decoration: none; }

/* ---- Redaction --------------------------------------------------------- */
/* A blacked-out span. On this page a black bar always means something removed
   or a claim withdrawn — never ornament. */
.redact {
  background: var(--redact);
  color: transparent;
  border-radius: 1px;
  padding: 0 0.18em;
  user-select: none;
}
/* Reveal on hover so it reads as deliberate rather than broken, and so the
   sentence stays recoverable for anyone who wants it. */
.redact:hover,
.redact:focus-visible {
  color: var(--manila-lift);
}
@media (prefers-reduced-motion: no-preference) {
  .redact { transition: color 120ms ease-out; }
}

/* ---- Classification stamp ---------------------------------------------- */
.stamp {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stamp);
  border: 2px solid var(--stamp);
  border-radius: 2px;
  padding: 0.3em 0.6em;
  transform: rotate(-3deg);
  opacity: 0.85;
}

/* ---- File eyebrow ------------------------------------------------------ */
/* Screenpipe numbers its sections 00/01/02 so the page reads as finite before
   you scroll. Same device, in a dossier's own vocabulary. */
.file {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 0.9rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stamp);
  white-space: nowrap;
}
.file::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--rule);
}

/* ---- The disclosure sheet (hero) --------------------------------------- */
.sheet {
  background: var(--paper);
  padding: 0.2rem 0 0.9rem;
  position: relative;
}
.sheet__row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.1fr;
  gap: 0.8rem;
  align-items: start;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid rgba(23, 19, 13, 0.1);
  font-size: clamp(0.66rem, 1.1vw, 0.76rem);
  line-height: 1.45;
}
.sheet__row:last-of-type { border-bottom: 0; }
.sheet__row > * { min-width: 0; overflow-wrap: break-word; }
.sheet__row--head {
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
  border-bottom: 2px solid var(--ink);
}
/* Provenance, not proof — so it is demoted, never a red chip that looks
   clickable. The source is not public. */
.sheet__src {
  font-family: var(--font-display);
  color: rgba(23, 19, 13, 0.55);
}
/* The one column that carries real verification weight gets the contrast. */
.sheet__test {
  font-family: var(--font-display);
  background: var(--redact);
  color: var(--manila-lift);
  padding: 0.16em 0.4em;
  border-radius: 1px;
}
.sheet__stamp {
  display: flex;
  justify-content: flex-end;
  padding: 0.7rem 1.1rem 0;
}
@media (max-width: 720px) {
  .sheet__row { grid-template-columns: 1.4fr 1fr; }
  .sheet__row > *:nth-child(3) { display: none; }
}

/* ---- Receipt rows ------------------------------------------------------ */
/* The page's primary component, replacing the chassis's .dont__list. Brags and
   confessions share one shape, each with its source attached, so the page reads
   as a spec sheet rather than a disclosure. */
.rc {
  margin: 2.2rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.6rem;
  max-width: 78ch;
}
.rc li {
  border-left: 4px solid var(--amber);
  padding-left: 1.2rem;
  color: var(--text-soft);
}
.rc b {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 1.05rem;
  color: var(--text);
}
.rc__src {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: rgba(23, 19, 13, 0.5);
}

/* ---- Quote ------------------------------------------------------------- */
.quote {
  margin: 2rem 0 0;
  padding: 1.2rem 1.4rem;
  background: var(--manila-lift);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--redact);
  max-width: 62ch;
}
.quote p { font-size: 1.02rem; }
.quote cite {
  display: block;
  margin-top: 0.7rem;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-style: normal;
  letter-spacing: 0.06em;
  color: var(--text-soft);
}

/* The one line on the page allowed to be bigger than body copy. */
.turn {
  margin: 2rem 0 0;
  max-width: 34ch;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 0.9rem + 0.9vw, 1.5rem);
  font-weight: 700;
  line-height: 1.25;
}

/* ---- Note (the falsification test) ------------------------------------- */
.note {
  margin-top: 2.4rem;
  max-width: 72ch;
  background: var(--manila-lift);
  border: 2px solid var(--ink);
  border-left: 6px solid var(--redact);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
}
.note__kick {
  margin-top: 0.8rem;
  color: var(--stamp);
  font-weight: 700;
}

/* ---- Terminal ---------------------------------------------------------- */
/* The one real shell block on the page. It scrolls inside itself; the body
   never scrolls sideways. */
.term {
  margin: 0;
  padding: 1rem 1.2rem;
  background: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(0.66rem, 1.3vw, 0.78rem);
  line-height: 1.75;
  color: var(--text);
  overflow-x: auto;
}
.term__p { color: var(--stamp); font-weight: 700; }
.demo__box { max-width: 78ch; }
.demo__caption {
  text-align: left;
  font-size: 0.92rem;
  color: var(--text-soft);
  border-top: 2px dashed rgba(23, 19, 13, 0.2);
}

/* ---- Build-state cards ------------------------------------------------- */
/* Re-measured off the content; the chassis sized this grid to fit a 174px
   sprite that is no longer on the page. */
.state__grid {
  margin-top: 2.2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1.1rem;
  align-items: start;
}
.state {
  position: relative;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--manila-lift);
  padding: 1rem 1.1rem 1.4rem;
}
.state__h {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stamp);
  padding-bottom: 0.6rem;
  margin-bottom: 0.8rem;
  border-bottom: 2px solid var(--ink);
}
.state ul { margin: 0; padding-left: 1.05rem; display: grid; gap: 0.5rem; }
.state li { font-size: 0.94rem; color: var(--text-soft); }
.state li::marker { color: var(--stamp); }
.state__stamp { position: absolute; right: 0.9rem; bottom: -0.8rem; background: var(--manila-lift); }

/* ---- The queue --------------------------------------------------------- */
.queue {
  margin: 2.2rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: q;
  display: grid;
  gap: 1.1rem;
  max-width: 74ch;
}
.queue li {
  counter-increment: q;
  position: relative;
  padding-left: 3rem;
  color: var(--text-soft);
}
.queue li::before {
  content: counter(q, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.05em;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--stamp);
  border: 2px solid var(--stamp);
  border-radius: 2px;
  padding: 0.15em 0.4em;
}
.queue b { color: var(--text); }

/* ---- The standing correction ------------------------------------------- */
.correction {
  margin-top: 1.8rem;
  max-width: 52ch;
  text-align: left;
  font-size: 0.92rem;
  color: var(--text-soft);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 1rem 0;
  display: grid;
  gap: 0.45rem;
}
.correction__h { color: var(--text); }

/* ---- Overflow containment ----------------------------------------------- */
/* A grid track of `1fr` is minmax(auto, 1fr), and that `auto` floor is the
   item's max-content width. The hero mock is a nowrap monospace block, so its
   floor was wider than a phone — which stretched the whole hero column and
   clipped the paragraph beside it. Letting the items shrink is the fix; the
   body must never scroll sideways. */
.hero__grid > * { min-width: 0; }
.pg__box, .pg__bar { max-width: 100%; min-width: 0; }
.pg__bar { flex-wrap: wrap; row-gap: 0.2rem; }

/* ---- Type -------------------------------------------------------------- */
/* The chassis sized its headings for a narrow pixel face. A monospace grid is
   far wider per character, so the same clamp overflows the hero column and
   breaks a two-line H1 into four. Re-tuned rather than re-laid-out. */
/* Sized so the H1's three authored <br> breaks are the breaks you actually get:
   the longest line is 21 monospace characters, and the hero column is about
   half of --measure, so anything above ~2.3rem re-wraps it into five ragged
   lines instead of three. */
h1 { font-size: clamp(1.26rem, 0.62rem + 2.5vw, 2.3rem); line-height: 1.18; }
h2 { font-size: clamp(1.16rem, 0.72rem + 1.9vw, 2.05rem); line-height: 1.2; }

/* Long unbroken monospace headings must be allowed to break rather than set
   the page's minimum width — otherwise the whole body scrolls sideways. */
h1, h2 { overflow-wrap: break-word; letter-spacing: -0.01em; }

/* Inline monospace for hostnames, paths and identifiers in running prose. */
.mono {
  font-family: var(--font-display);
  font-size: 0.94em;
  background: rgba(23, 19, 13, 0.06);
  padding: 0.05em 0.3em;
  border-radius: 2px;
  overflow-wrap: break-word;
}

.hero__req {
  font-family: var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.68rem;
  line-height: 1.7;
}
.hero__sub { max-width: 42ch; }

/* The trust bar carries figures now, so they get the display face and room. */
.trustbar__grid b {
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: var(--gold);
}
.trustbar__grid span { font-size: 0.82rem; }

/* ---- Single theme, stated deliberately --------------------------------- */
/* Inherited from the chassis and kept on purpose: the palette is a paper
   stock, and paper does not have a dark mode. Pinning color-scheme also stops
   macOS restyling the email input out from under the design. */
:root { color-scheme: light; }