/* Landing hero (public/assets/css/pages/home-hero.css).
   Editorial "request ledger": masthead folio, asymmetric headline, a ruled ledger of example
   classifications with their evidence, and the live lookup console as the ledger's last row.
   Shared .json token colours stay in home.css (the anatomy section uses them too). */

.hero {
  --hero-cols: 44px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2.6fr) minmax(0, 1.15fr);
  --hero-gap: 22px;
  position: relative;
  padding: calc(var(--nav-h) + 44px) 0 104px;
  border-bottom: 1px solid var(--line);
}

/* ---------- folio (running header) ---------- */
.hero__folio {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  margin: 0 0 clamp(40px, 6vw, 76px); padding-bottom: 14px; border-bottom: 1px solid var(--line-2);
  font: 400 0.74rem/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint);
}
.hero__folio b { color: var(--text); font-weight: 500; }
.hero__folio-end { text-transform: none; letter-spacing: 0; color: var(--muted); }
.hero__folio-end i { font-style: normal; color: var(--faint); }

/* ---------- headline block ---------- */
.hero__head {
  display: grid; grid-template-columns: minmax(0, 7.2fr) minmax(0, 4.8fr);
  gap: clamp(32px, 5vw, 72px); align-items: end;
}
.hero__title { margin: 0; font-family: var(--font-display); text-wrap: balance; }
.hero__title-main {
  display: block; font-weight: 800; font-size: clamp(2.9rem, 6.6vw, 6rem); line-height: 0.9; letter-spacing: -0.035em; word-spacing: 0.04em;
}
.hero__title-sub {
  display: block; max-width: 22ch; margin-top: clamp(18px, 2.2vw, 28px);
  font-weight: 500; font-size: clamp(1.3rem, 2.3vw, 2rem); line-height: 1.12; letter-spacing: -0.02em; color: var(--muted);
}
.hero__title-sub em { font-style: normal; color: var(--text); text-decoration: underline 2px var(--signal); text-underline-offset: 0.16em; text-decoration-skip-ink: auto; }

.hero__aside { padding-bottom: 6px; }
.hero__lede { margin: 0; color: var(--muted); font-size: 1.04rem; line-height: 1.6; max-width: 40ch; }
.hero__lede strong { color: var(--text); font-weight: 500; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 28px; }
.hero__doclink {
  display: inline-flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none;
  font: 500 0.95rem/1 var(--font-body); padding: 6px 0; border-bottom: 1px solid var(--line-3);
  transition: border-color 0.2s, gap 0.25s var(--ease);
}
.hero__doclink:hover { border-color: var(--signal); gap: 12px; }
.hero__terms {
  display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0 20px;
  margin: 30px 0 0; padding-top: 16px; border-top: 1px solid var(--line);
}
.hero__terms dt { font: 400 0.68rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.hero__terms dd { margin: 7px 0 0; font: 500 0.78rem/1.35 var(--font-mono); color: var(--text); white-space: nowrap; }

/* ---------- ledger ---------- */
.ledger { margin-top: clamp(56px, 7vw, 92px); }
.ledger__cap {
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 20px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line-3);
}
.ledger__title { margin: 0; font: 700 1.05rem/1.2 var(--font-display); letter-spacing: -0.01em; }
.ledger__title span { color: var(--signal); font: 500 0.78rem/1 var(--font-mono); margin-right: 10px; letter-spacing: 0.04em; }
.ledger__note { margin: 0; font: 400 0.76rem/1.4 var(--font-mono); color: var(--faint); }
.ledger__note a { color: var(--muted); text-underline-offset: 3px; text-decoration-color: var(--line-3); }
.ledger__note a:hover { color: var(--text); text-decoration-color: var(--signal); }

.ledger__head, .lrow {
  display: grid; grid-template-columns: var(--hero-cols); column-gap: var(--hero-gap); align-items: baseline;
}
.ledger__head {
  padding: 12px 0 10px; border-bottom: 1px solid var(--line);
  font: 400 0.68rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint);
}
.ledger__head span:last-child { text-align: right; }
.ledger__rows { margin: 0; padding: 0; list-style: none; }

.lrow {
  --c: var(--faint);
  position: relative; padding: 17px 0 16px; border-bottom: 1px solid var(--line);
  font: 400 0.86rem/1.45 var(--font-mono); color: var(--muted);
  transition: background-color 0.5s var(--ease);
}
.lrow::before { /* margin rule that marks the row being read */
  content: ""; position: absolute; left: -14px; top: 14px; bottom: 14px; width: 2px; border-radius: 2px;
  background: var(--signal); opacity: 0; transform: scaleY(0.4); transition: opacity 0.4s, transform 0.5s var(--ease);
}
.lrow--ai { --c: var(--ai); } .lrow--crawler { --c: var(--crawler); } .lrow--scanner { --c: var(--scanner); }
.lrow__no { color: var(--faint); font-size: 0.76rem; transition: color 0.3s; }
.lrow__ip { color: var(--text); font-weight: 500; font-size: 0.95rem; overflow-wrap: anywhere; }
.lrow__net { font-size: 0.8rem; }
.lrow__net small { display: block; color: var(--faint); font-size: inherit; }
.lrow__ev { min-width: 0; }
.lrow__who { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; color: var(--text); font: 500 0.95rem/1.35 var(--font-body); }
.lrow__m {
  font: 400 0.7rem/1 var(--font-mono); color: var(--muted);
  padding: 4px 6px; border: 1px solid var(--line-2); border-radius: 5px; transform: translateY(-1px);
}
.lrow__proof { display: block; margin-top: 5px; font-size: 0.78rem; color: var(--faint); overflow-wrap: anywhere; }
.lrow__proof code { color: var(--muted); font: inherit; }
/* each evidence token wraps as a unit (a file name or range never splits mid-token unless it is wider than the line) */
.lrow__proof code { display: inline-block; max-width: 100%; vertical-align: top; }
.lrow__ok { color: var(--signal); font-style: normal; white-space: nowrap; }
.lrow__flag { justify-self: end; text-align: right; white-space: nowrap; font-size: 0.8rem; color: var(--c); }
.lrow__flag code { font: inherit; }
.lrow__flag b { display: inline-block; margin-left: 6px; padding: 3px 6px 2px; border-radius: 5px; font-weight: 500; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.lrow--none .lrow__flag { color: var(--faint); white-space: normal; }
.lrow--none .lrow__flag small { display: block; margin-top: 4px; font-size: 0.72rem; color: var(--muted); }
.lrow--none .lrow__who { color: var(--muted); }

.lrow.is-current { background: linear-gradient(90deg, rgba(200, 245, 66, 0.045), transparent 70%); }
.lrow.is-current::before { opacity: 1; transform: none; }
.lrow.is-current .lrow__no { color: var(--signal); }

/* JS-armed reading sequence (only when motion is allowed; content is fully visible otherwise) */
.ledger.is-armed .lrow__ok,
.ledger.is-armed .lrow__flag { opacity: 0; }
.ledger.is-armed .lrow__proof { clip-path: inset(0 100% 0 0); }
.ledger.is-armed .lrow.is-read .lrow__proof { clip-path: inset(0 0 0 0); transition: clip-path 0.7s var(--ease); }
.ledger.is-armed .lrow.is-read .lrow__ok { opacity: 1; transition: opacity 0.3s 0.6s; }
.ledger.is-armed .lrow.is-read .lrow__flag { opacity: 1; transition: opacity 0.35s 0.8s; animation: heroStamp 0.5s 0.8s var(--ease) both; }

/* ---------- console: the ledger's final, live row ---------- */
.console { position: relative; border-bottom: 1px solid var(--line-3); }
.console__line { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--hero-gap); align-items: center; padding: 14px 0; }
.console__line .lrow__no { color: var(--signal); }
.console__form {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 6px 6px 6px 16px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface);
  transition: border-color 0.2s, box-shadow 0.2s;
}
/* The input's focus ring is drawn on the whole form pill (same treatment as .input:focus in site.css). */
.console__form:focus-within { border-color: var(--signal); box-shadow: 0 0 0 3px rgba(200, 245, 66, 0.16); }
.console__prompt { color: var(--signal); font: 500 1.1rem/1 var(--font-mono); }
.console__form input {
  flex: 1; min-width: 0; height: 40px; background: transparent; border: 0; color: var(--text);
  font: 400 1rem/1 var(--font-mono); caret-color: var(--signal);
}
.console__form input::placeholder { color: var(--faint); }
.console__form input:focus { outline: none; }

.console__body {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 20px clamp(24px, 4vw, 48px);
  padding: 4px 0 24px calc(44px + var(--hero-gap));
}
.console__meta { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.console__reqline { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0; }
.console__req { color: var(--muted); font-size: 0.82rem; min-width: 0; overflow-wrap: anywhere; }
.console__req span { color: var(--text); }
.console__status {
  font: 500 0.72rem/1 var(--font-mono); padding: 5px 8px; border-radius: 6px; border: 1px solid var(--line-2);
  color: var(--muted); white-space: nowrap;
}
.console__status.is-ok { color: var(--signal); border-color: rgba(200, 245, 66, 0.35); background: var(--signal-soft); }
.console__status.is-err { color: var(--danger); border-color: rgba(255, 107, 91, 0.4); background: rgba(255, 107, 91, 0.08); }
.console__status.is-busy { color: var(--text); }
.console__label { margin: 0 0 8px; font: 400 0.68rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.console__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.console__chips .chip {
  font: 400 0.76rem/1 var(--font-mono); color: var(--muted); background: transparent;
  border: 1px solid var(--line-2); border-radius: 7px; padding: 7px 9px; cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.console__chips .chip:hover { color: var(--text); border-color: var(--line-3); }
.console__summary { display: flex; flex-wrap: wrap; gap: 6px; }
.console__summary:empty { display: none; }
.pill {
  display: inline-flex; align-items: center; gap: 7px; font: 500 0.74rem/1 var(--font-mono);
  padding: 6px 9px; border-radius: 7px; background: rgba(236, 239, 233, 0.05); color: var(--text);
  animation: heroPop 0.45s var(--ease) both;
}
.pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }
.pill--ai i { background: var(--ai); } .pill--crawler i { background: var(--crawler); } .pill--scanner i { background: var(--scanner); }
.pill.is-on { box-shadow: inset 0 0 0 1px currentColor; }
.pill--ai.is-on { color: var(--ai); } .pill--crawler.is-on { color: var(--crawler); } .pill--scanner.is-on { color: var(--scanner); }
.pill.is-off { color: var(--faint); }
.console__fine { margin: auto 0 0; color: var(--faint); font-size: 0.8rem; line-height: 1.5; }
.console__fine code { color: var(--muted); font-size: 0.95em; }

.console__out {
  position: relative; min-width: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2);
}
.console .json { min-height: 0; max-height: 400px; padding: 14px 18px 16px; font-size: 0.8rem; line-height: 1.58; }
.console__scan {
  position: absolute; left: 0; right: 0; top: 0; height: 60px; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(200, 245, 66, 0.12), transparent);
}
.console.is-busy .console__scan { opacity: 1; animation: heroScan 1.1s var(--ease) infinite; }
.console .json .err { color: var(--danger); white-space: normal; }

@keyframes heroStamp { from { transform: translateX(8px); } to { transform: none; } }
@keyframes heroPop { from { opacity: 0; transform: translateY(4px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes heroScan { from { transform: translateY(-60px); } to { transform: translateY(400px); } }

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .hero { --hero-cols: 36px minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr); --hero-gap: 16px; }
  .hero__head { grid-template-columns: 1fr; align-items: start; }
  .hero__title-sub { max-width: 26ch; }
  .ledger__head span:nth-child(3), .lrow__net { display: none; }
  .console__line { grid-template-columns: 36px minmax(0, 1fr); }
  .console__body { grid-template-columns: 1fr; padding-left: calc(36px + var(--hero-gap)); }
}

@media (max-width: 680px) {
  .hero { padding: calc(var(--nav-h) + 28px) 0 72px; }
  .hero__folio-end { display: none; }
  .hero__folio { margin-bottom: 36px; }
  .hero__lede { font-size: 1rem; }
  .hero__terms { grid-template-columns: repeat(2, auto); gap: 16px 26px; }
  .ledger__head { display: none; }
  .lrow {
    grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "no ip flag" ". ev ev";
    row-gap: 10px; column-gap: 10px; padding: 16px 0;
  }
  .lrow::before { left: -10px; }
  .lrow > .lrow__no { grid-area: no; }
  .lrow > .lrow__ip { grid-area: ip; }
  .lrow > .lrow__flag { grid-area: flag; }
  .lrow > .lrow__ev { grid-area: ev; }
  .lrow__flag b { margin-left: 4px; }
  .lrow--none .lrow__flag small { display: none; }
  .console__line { grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; }
  .console__form { padding-left: 12px; gap: 8px; }
  .console__body { padding-left: 0; }
  .console .json { max-height: 360px; font-size: 0.76rem; padding: 12px 14px; }
}

@media (max-width: 820px) {
  .console__chips .chip { min-height: 40px; padding-inline: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .lrow, .lrow::before, .hero__doclink { transition: none; }
  .pill { animation: none; }
  .console.is-busy .console__scan { animation: none; opacity: 0.6; }
}