/* search.css — /search only.

   NOTE FOR WHOEVER TOUCHES THE TOKENS NEXT. DESIGN.md §5 says that once a
   fifth CSS surface exists, a shared token file gets extracted before the
   sixth. This is the sixth (index, design, discipline-template, riding
   generator, masthead, here) and it carries its own copy of :root because
   there is nothing yet to import. The values below are copied byte-for-byte
   from the §2 table and must not be adjusted here — if a token changes, it
   changes in DESIGN.md and then everywhere, which is the argument for the
   extraction, not against it.

   Rule 11 governs the whole file: designed at 390 first, expanded upward.
   Nothing here is below 11px rendered (.69rem at a 16px root); the site's
   .62rem eyebrow would have been 9.9px, which is a label nobody reads
   one-handed on a train. */

@font-face{font-family:'Satoshi';src:url(/assets/satoshi-variable.ttf) format('truetype-variations');
  font-weight:300 900;font-style:normal;font-display:swap}

:root{
  --ground:#0a0a0b; --ground-2:#0f0f10; --raise:#141416;
  --rule:#232326; --rule-2:#1a1a1c;
  --bone:#ece7dd; --bone-2:#b9b3a8; --muted:#807b72; --dim:#57544e; --dark:#37352f;
  --lit:#ffcf8a; --lit-hot:#ffe6c2; --ember:#ff5a34;
  --sans:'Satoshi',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Satoshi',system-ui,-apple-system,'Segoe UI',sans-serif;
  --gut:clamp(1.25rem,4vw,4rem);
  --measure:64ch;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--bone);
  font-family:var(--sans);font-size:17px;
  font-variant-numeric:tabular-nums;
  line-height:1.6;font-weight:400;letter-spacing:-.011em;
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(120% 70% at 50% -18%, rgba(255,197,128,.055), transparent 62%),
    radial-gradient(90% 50% at 88% 8%, rgba(120,160,220,.028), transparent 60%);
}
main,header,footer{position:relative;z-index:2}
::selection{background:var(--lit);color:#151109}

.wrap{max-width:1180px;margin:0 auto;padding-inline:var(--gut)}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

h1,h2,h3{font-weight:500;font-family:var(--sans);letter-spacing:-.032em;line-height:1.0}
/* Smaller than the site's other h1s on purpose. This page is a tool, and rule
   11 says density is the point: every pixel the headline takes at 390 is a
   pixel the first result does not get. The title still lands first; it just
   stops being the whole screen. */
h1{font-size:clamp(2.1rem,6.5vw,4.4rem);margin:0 0 1rem}
p{margin:0 0 1.1rem;color:var(--bone-2)}
p strong{color:var(--bone);font-weight:500}
em{font-style:normal;color:var(--bone)}
a.ref{color:var(--bone-2);text-decoration:none;border-bottom:1px solid var(--dark)}
a.ref:hover{color:var(--bone);border-color:var(--lit)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.lede{font-size:clamp(1.05rem,1rem + .4vw,1.32rem);line-height:1.55;color:var(--bone);
  max-width:var(--measure)}
.eyebrow{font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin:0 0 .9rem}
.pagemeta{font-family:var(--mono);font-size:.72rem;color:var(--muted);margin:0 0 1.1rem;
  letter-spacing:.02em;display:flex;flex-wrap:wrap;row-gap:.2rem;align-items:baseline}
.pagemeta span{white-space:nowrap}
.pagemeta .sep{color:var(--dim);margin:0 .45rem}
.note{font-size:.88rem;line-height:1.55;color:var(--muted);max-width:var(--measure)}

/* Every interactive thing, one ring, the site's ring. */
a:focus-visible,input:focus-visible,button:focus-visible,li:focus-visible{
  outline:1px solid var(--lit);outline-offset:2px}

section{padding-block:clamp(2.2rem,5vw,3.6rem);border-top:1px solid var(--rule-2)}
section:first-of-type{border-top:none}
.hero{padding-block:clamp(1.5rem,5vw,3.4rem) clamp(1.1rem,2.5vw,1.6rem)}
.res{padding-top:0;border-top:none}

/* ─── the box ──────────────────────────────────────────────────────────────
   Sticky under the masthead so the field is reachable with a thumb after
   scrolling a long result list — the one-handed case is the design target.
   Colour and border only; nothing here moves (rule 6). */
/* --mh is the masthead's own height: 1.45rem of flame plus the padding
   masthead.css sets to .9rem under 620px and 1.05rem over. It is written out
   here rather than left at 0 because top:0 put the field half under the logo at
   exactly the moment a reader reaches for it, and a sticky element hiding
   behind another sticky element is worse than one that does not stick. If
   masthead.css changes its padding this must change with it — the seventh
   argument for the shared token file DESIGN.md §5 asks for. */
:root{--mh:3.95rem}
@media (min-width:38.75rem){:root{--mh:4.25rem}}
.sbox{position:sticky;top:var(--mh);z-index:40;
  padding-block:.7rem .55rem;background:var(--ground)}
#q{
  width:100%;display:block;
  background:var(--ground-2);border:1px solid var(--rule);border-radius:10px;
  color:var(--bone);font-family:var(--sans);font-size:17px;font-weight:500;
  letter-spacing:-.02em;padding:.72rem .9rem;
  -webkit-appearance:none;appearance:none;
}
#q::placeholder{color:var(--dim);font-weight:400;letter-spacing:-.01em}
#q:focus{border-color:var(--dark);outline:1px solid var(--lit);outline-offset:2px}
#q::-webkit-search-cancel-button{-webkit-appearance:none}
.shint{font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;color:var(--dim);
  margin:.5rem 0 0;display:flex;flex-wrap:wrap;gap:0 .34rem;align-items:baseline}
/* The keycaps were .9em of .72rem — 10.4px, under rule 11's floor of 11. They
   are now the same size as the sentence they sit in and read as keys because of
   the border, which is what the border is for. */
.shint .k{color:var(--muted);border:1px solid var(--rule);border-radius:4px;
  padding:0 .3rem}
.shint .sep{color:var(--rule)}

/* ─── results ──────────────────────────────────────────────────────────────
   Grouped by kind, ordered by relevance inside a group, and nothing on the
   screen states a score. The grouping is doing the work a score would do
   badly: a figure and a page are different answers to the same question, not
   a better and a worse one. */
#out{margin-top:.4rem}
.grp{margin:0 0 1.7rem}
.ghd{display:flex;align-items:baseline;gap:.55rem;
  font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);
  margin:0 0 .3rem;padding-bottom:.4rem;border-bottom:1px solid var(--rule)}
.ghd .gn{color:var(--dim);letter-spacing:.06em}
.ghd .gw{margin-left:auto;text-transform:none;letter-spacing:0;font-size:.78rem;
  color:var(--dim)}

ul.rs{list-style:none;margin:0;padding:0}
.r{border-bottom:1px solid var(--rule-2);padding:.52rem 0 .56rem}
.r:last-child{border-bottom:none}
.rl{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .6rem;
  text-decoration:none;color:inherit}
.rt{font-size:.95rem;font-weight:500;letter-spacing:-.017em;color:var(--bone);
  flex:1 1 55%;min-width:0;line-height:1.3}
.rv{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500;
  font-size:1.06rem;letter-spacing:-.03em;color:var(--bone);
  margin-left:auto;text-align:right;line-height:1.25}
.rv.long{font-size:.92rem;font-weight:400;color:var(--bone-2);text-align:left;
  margin-left:0;flex:1 1 100%;letter-spacing:-.011em}
.rl:hover .rt,.rl:hover .rv{color:var(--lit-hot)}
.rq{font-family:var(--mono);font-size:.76rem;line-height:1.45;color:var(--bone-2);
  margin:.1rem 0 0}
.rb{font-size:.82rem;line-height:1.45;color:var(--muted);margin:.12rem 0 0}
.rm{font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;color:var(--dim);
  margin:.18rem 0 0;display:flex;flex-wrap:wrap;gap:0 .34rem;align-items:baseline}
.rm .rp{color:var(--muted)}
.rm .sep{color:var(--rule)}
.rm a{color:var(--dim);text-decoration:none;border-bottom:1px solid var(--rule-2)}
.rm a:hover{color:var(--bone-2);border-bottom-color:var(--lit)}
/* The matched words. Bone, not amber: --lit marks the exception in the record,
   and a query term is not an exception in the record. */
.rt mark,.rq mark,.rb mark{background:none;color:var(--lit-hot);font-weight:500}
.rb mark,.rq mark{color:var(--bone)}

.more{background:none;border:0;cursor:pointer;padding:.5rem 0 0;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:var(--muted);
  border-bottom:1px solid transparent}
.more:hover{color:var(--bone)}

/* ─── coverage / nothing-found ─────────────────────────────────────────────*/
#idx{padding-top:.6rem}
ul.cov{list-style:none;margin:0 0 1.3rem;padding:0;
  border-top:1px solid var(--rule)}
ul.cov li{display:flex;align-items:baseline;gap:.5rem;
  padding:.42rem 0;border-bottom:1px solid var(--rule-2)}
ul.cov a{flex:1 1 auto;min-width:0;font-size:.95rem;font-weight:500;letter-spacing:-.017em;
  color:var(--bone);text-decoration:none;
  border-bottom:1px solid transparent}
ul.cov a:hover{color:var(--lit-hot)}
ul.cov .cn{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.86rem;
  color:var(--bone-2);text-align:right;min-width:2.6rem}
ul.cov .cl{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--dim);
  min-width:3.6rem}
ul.cov .cd{color:var(--muted)}

ol.todo{margin:0 0 1.2rem;padding-left:1.15rem;max-width:var(--measure)}
ol.todo li{margin-bottom:.55rem;color:var(--bone-2);font-size:.95rem;line-height:1.5}
ol.todo li::marker{font-family:var(--mono);color:var(--dim);font-size:.82rem}
ol.todo strong{color:var(--bone);font-weight:500}
#nada .eyebrow{color:var(--lit)}

/* ─── the gap (rule 9) ─────────────────────────────────────────────────────
   Three tiers of how checkable a result is, counted at build time. Deliberately
   not a bar chart: three numbers on three rows is denser at 390 than three bars
   would be, and a bar whose length encoded "worse" would be the design making a
   number look bad, which §2 forbids. The tiers are ordered best-to-worst
   because that is their order, not because the last one is a verdict. */
.gap h2{font-size:clamp(1.5rem,5.2vw,2.5rem);margin:0 0 1rem;max-width:20ch}
ul.tiers{list-style:none;margin:1.3rem 0 1.2rem;padding:0;border-top:1px solid var(--rule)}
ul.tiers li{display:grid;grid-template-columns:auto 1fr;gap:0 .7rem;
  padding:.6rem 0;border-bottom:1px solid var(--rule-2)}
.tiers .tn{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500;
  font-size:1.5rem;letter-spacing:-.03em;color:var(--bone);line-height:1.05;
  grid-row:1 / span 2;min-width:3.2rem;text-align:right}
.tiers .tl{font-size:.95rem;font-weight:500;letter-spacing:-.017em;color:var(--bone);
  line-height:1.25;align-self:start}
.tiers .td{font-family:var(--mono);font-size:.74rem;letter-spacing:.01em;color:var(--dim);
  line-height:1.4;margin-top:.12rem}
.note .fm{color:var(--muted)}

/* ─── when you have found it (rule 10) ─────────────────────────────────────*/
.act ol.todo{margin-bottom:0}

/* ─── footer ───────────────────────────────────────────────────────────────*/
footer{border-top:1px solid var(--rule);padding-block:1.8rem 3rem;margin-top:2.4rem}
footer p{font-family:var(--mono);font-size:.72rem;line-height:1.85;color:var(--dim);
  letter-spacing:.01em}
footer .fm{color:var(--muted)}

@media (min-width:56rem){
  .rt{flex:1 1 auto}
  .rq{font-size:.78rem}
  /* The field, not the bar. The bar is full-bleed so the ground it carries
     covers what scrolls under it; the field stops at a width a line of type
     wants to be. */
  .sbox #q,.sbox .shint{max-width:46rem}
}

/* Rule 6. Nothing on this page animates, so there is nothing to suppress —
   the declaration is here so that the next person to add a transition finds
   the media query already written and has to decide on purpose. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

@media print{
  .sbox,#out{display:none}
  body{background:#fff;color:#000}
}