/* ═══════════════════════════════════════════════════════════════════════════
   MoatBrain · EXPLORATORY — wow through restraint
   Concept round. Not a production spec.

   THE ONE IDEA EVERYTHING ELSE FOLLOWS FROM:
   the only material in this product that is not ours is the filing. So the
   filing is the only thing in the interface that gets a material of its own.
   The app is charcoal and quiet; the source is warm paper and it is the
   brightest thing on the screen. Credibility as the aesthetic, literally —
   the eye is drawn to the evidence, not to us.

   A NOTE ON A TENSION I CREATED MYSELF. Three tasks ago I wrote the contract
   telling Charlene to eliminate every light panel in the dark app. This is not
   a reversal. Those were accidents of an unconverted stylesheet — light because
   nobody had converted them. This is a material, reserved for verbatim source
   text and nothing else: never UI, never our prose, never a container we wrote.
   The rule that keeps the distinction honest is testable, and it is tested:
   .paper may only ever wrap text quoted from a document.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  /* shipped Desk ground, unchanged */
  --ground:#141210; --surface:#1B1815; --raised:#221E1A; --sunk:#100E0C;
  --line:#2C2622; --line-2:#3A322C;
  --cream:#F2EBDD; --cream-2:#B5A894; --cream-3:#7E7365;
  --accent:#7FBFA8; --pos:#6FBF9B; --neg:#D2764F; --warn:#E0B15E;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,sans-serif;
  --num:"SF Mono",ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace;
  --r:12px;

  /* THE MATERIAL — warm paper, never white. Tuned against --cream so it reads
     as the same room, one surface closer to the light. */
  --paper:#EDE6D6; --paper-2:#E3DBC8; --paper-ink:#1A1712; --paper-ink-2:#514A3C;
  --doc:"Iowan Old Style",Palatino,"Palatino Linotype",Georgia,serif;

  /* MOTION BUDGET — stated as tokens so it can be audited rather than felt.
     Nothing exceeds 240ms. Nothing eases back or bounces: overshoot is
     decoration, and this audience reads decoration as salesmanship. */
  --t-fast:120ms; --t-mid:180ms; --t-slow:240ms;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box} html,body{margin:0}
body{background:var(--ground);color:var(--cream);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;line-height:1.55}
code{font-family:var(--num);font-variant-numeric:tabular-nums;font-size:12px;color:var(--accent);
  background:var(--sunk);border:1px solid var(--line);border-radius:4px;padding:1px 5px}
a{color:inherit;text-decoration:none}
.wrap{max-width:1020px;margin:0 auto;padding:28px 26px 90px}

.hd{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;margin-bottom:8px}
.hd b{font-size:16px;letter-spacing:-.02em} .hd .sp{flex:1}
.chip{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--cream-2);
  border:1px solid var(--line-2);border-radius:5px;padding:4px 8px;background:var(--surface)}
.chip.on{color:var(--accent);border-color:#3a5f54}
.nav{display:flex;border:1px solid var(--line-2);border-radius:9px;overflow:hidden;
  background:var(--surface);margin:18px 0 26px;flex-wrap:wrap}
.nav a{padding:9px 15px;font-size:12.5px;color:var(--cream-2);border-right:1px solid var(--line);
  flex:1;min-width:158px;transition:background var(--t-fast) var(--ease)}
.nav a:last-child{border-right:0}
.nav a b{display:block;font-size:12.5px;color:var(--cream);font-weight:600}
.nav a span{display:block;font-size:10.5px;color:var(--cream-3);margin-top:2px}
.nav a:hover,.nav a.on{background:var(--raised)}
.nav a.on b{color:var(--accent)}

h1{font-size:29px;letter-spacing:-.038em;margin:14px 0 12px;font-weight:600;text-wrap:balance;
  max-width:22ch;line-height:1.12}
h1.wide{max-width:34ch}
.lede{font-size:14.5px;color:var(--cream-2);line-height:1.72;max-width:74ch;margin:0 0 12px}
.lede b{color:var(--cream);font-weight:600}
h2{font-size:16.5px;letter-spacing:-.02em;margin:38px 0 5px;font-weight:600}
h2 .q{font-family:var(--num);font-size:11px;color:var(--accent);margin-right:9px}
.sub{font-size:12px;color:var(--cream-3);margin:0 0 14px}
p{font-size:13.5px;color:var(--cream-2);line-height:1.72;max-width:76ch;margin:0 0 12px}
p b,li b,td b{color:var(--cream);font-weight:600}
ul{font-size:13.5px;color:var(--cream-2);line-height:1.72;max-width:76ch;margin:0 0 12px;padding-left:21px}
li{margin-bottom:6px}
.rule{border-left:2px solid var(--accent);background:var(--sunk);border-radius:0 8px 8px 0;
  padding:13px 16px;margin:0 0 15px}
.rule.warn{border-left-color:var(--warn)} .rule.no{border-left-color:var(--neg)}
.rule p{margin:0;max-width:none} .rule b{color:var(--accent)}
.rule.warn b{color:var(--warn)} .rule.no b{color:var(--neg)}

/* ── THE MATERIAL ───────────────────────────────────────────────────────────
   A citation is not a card. It is a WINDOW ONTO A LARGER DOCUMENT: the excerpt
   is sharp, and the text above and below it fades at the edges, so the eye can
   see it was cut from something. That is what makes "verbatim" visible instead
   of promised — a paraphrase has no edges. */
.paper{background:var(--paper);color:var(--paper-ink);border-radius:3px;
  position:relative;overflow:hidden;font-family:var(--doc)}
.paper .pin{padding:20px 24px 22px;font-size:15px;line-height:1.62;position:relative;z-index:1}
.paper .pin em{font-style:italic}
/* the faded continuation above and below — the document goes on without us */
.paper .cont{padding:0 24px;font-size:15px;line-height:1.62;color:var(--paper-ink-2);
  user-select:none;pointer-events:none}
.paper .cont.up{padding-top:16px;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000);
          mask-image:linear-gradient(to bottom,transparent,#000)}
.paper .cont.dn{padding-bottom:18px;
  -webkit-mask-image:linear-gradient(to top,transparent,#000);
          mask-image:linear-gradient(to top,transparent,#000)}
.paper .stamp{display:flex;align-items:baseline;gap:10px;padding:11px 24px;
  border-bottom:1px solid rgba(26,23,18,.14);font-family:var(--sans);
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--paper-ink-2)}
.paper .stamp .sp{flex:1}
.paper .stamp .acc{font-family:var(--num);letter-spacing:0;text-transform:none;font-size:10.5px}
.paper .foot2{padding:10px 24px 13px;border-top:1px solid rgba(26,23,18,.14);
  font-family:var(--sans);font-size:11px;color:var(--paper-ink-2);display:flex;gap:8px;
  align-items:center;flex-wrap:wrap}
.paper .foot2 a{color:#2C5A49;text-decoration:underline;text-underline-offset:2px}

/* the user's own writing is ALSO a document, but theirs — same material,
   cooler, so the two are visibly different hands */
.paper.mine{background:var(--paper-2)}
.paper.mine .stamp{color:var(--paper-ink-2)}

/* ── THE SIGNATURE MOMENT ───────────────────────────────────────────────────
   Two documents, side by side, and nothing between them. No badge, no verdict,
   no match score. The whole design argument is that the product does not need
   to say anything here — putting the two spans in the same eyeline is the
   entire product. */
/* The gutter is wide on purpose. The space between the two documents is where
   the product declines to speak, so it should read as deliberate air rather
   than as a divider — and it has to be wide enough to hold the date delta
   without either document covering it. 26px could not; the label was occluded
   and no assertion caught it, so there is now a geometry check for exactly
   this overlap. */
.moment{display:grid;grid-template-columns:1fr 1fr;gap:104px;align-items:start;
  margin:0 0 6px;position:relative}
.mcol{min-width:0}
.mhead{display:flex;align-items:baseline;gap:9px;margin-bottom:11px;min-height:19px}
.mhead b{font-size:12.5px;color:var(--cream);font-weight:600;letter-spacing:-.01em}
.mhead span{font-size:11px;color:var(--cream-3);font-family:var(--num)}
/* the fixed point. Your words do not move; the world moves toward them. */
.mcol.fixed .paper{box-shadow:0 0 0 1px rgba(127,191,168,0)}
.mcol.fixed.anchored .paper{box-shadow:0 0 0 1px var(--accent);
  transition:box-shadow var(--t-mid) var(--ease)}
.mcol.arriving{opacity:0;transform:translateX(34px)}
.mcol.arriving.in{opacity:1;transform:none;
  transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
.gap{position:absolute;left:50%;top:44px;bottom:12px;width:1px;background:var(--line-2);
  transform:translateX(-.5px)}
.delta{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:var(--ground);padding:7px 0;font-family:var(--num);font-size:10.5px;
  color:var(--cream-3);text-align:center;line-height:1.5;width:88px;z-index:2}

.mact{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:22px;
  padding-top:18px;border-top:1px solid var(--line)}
.btn{font:inherit;font-size:13px;font-weight:500;border-radius:9px;padding:9px 16px;
  border:1px solid var(--line-2);background:transparent;color:var(--cream);cursor:pointer;
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.btn:hover{background:var(--surface)}
.btn.solid{background:var(--accent);color:#0E1A16;border-color:transparent;font-weight:600}
.btn.solid:hover{background:#8ecdb6}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.mact .note{font-size:11.5px;color:var(--cream-3);margin-left:auto;max-width:34ch;line-height:1.5}
.outcome{margin-top:16px;border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--surface);padding:15px 17px;font-size:13px;color:var(--cream-2);
  line-height:1.65;display:none}
.outcome.on{display:block}
.outcome b{color:var(--cream)}
.outcome .n2{font-family:var(--num);font-size:11.5px;color:var(--cream-3);display:block;margin-top:8px}

/* the honest-absence state: the filing does not address the falsifier */
.nomatch{border:1px dashed var(--line-2);border-radius:var(--r);padding:15px 17px;
  font-size:13px;color:var(--cream-2);line-height:1.65;margin-top:16px;display:none}
.nomatch.on{display:block}
.nomatch b{color:var(--warn)}

/* ── motion vocabulary demo ── */
.vocab{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-bottom:8px}
.vc{border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);overflow:hidden}
.vch{padding:10px 14px;background:var(--raised);border-bottom:1px solid var(--line);
  font-size:11.5px;color:var(--cream);font-weight:600;display:flex;gap:8px;align-items:center}
.vch .ms{margin-left:auto;font-family:var(--num);font-size:10.5px;color:var(--cream-3)}
.vcb{padding:15px;min-height:132px;position:relative}
.vcn{padding:11px 14px;border-top:1px solid var(--line);font-size:11.5px;color:var(--cream-3);line-height:1.6}

/* travel: an accepted card goes to where it now lives */
.trav{border:1px solid var(--line-2);border-radius:8px;background:var(--sunk);padding:10px 12px;
  font-size:12px;color:var(--cream-2);width:170px}
.trav.go{transform:translate(96px,58px) scale(.86);opacity:.25;
  transition:transform var(--t-slow) var(--ease),opacity var(--t-slow) var(--ease)}
.dest{position:absolute;right:15px;bottom:15px;border:1px dashed var(--line-2);border-radius:8px;
  padding:9px 11px;font-size:11px;color:var(--cream-3);transition:border-color var(--t-fast) var(--ease),
  color var(--t-fast) var(--ease)}
.dest.lit{border-color:var(--accent);color:var(--accent);border-style:solid}

/* origin: a citation opens FROM its source line, not from nowhere */
.srcline{font-size:12px;color:var(--cream-2);border-bottom:1px dotted var(--line-2);
  cursor:pointer;display:inline-block}
.grow{margin-top:12px;max-height:0;opacity:0;overflow:hidden;
  transition:max-height var(--t-slow) var(--ease),opacity var(--t-mid) var(--ease)}
.grow.open{max-height:230px;opacity:1}

/* deference: the agent as a hairline that the reader expands */
.hair{border:1px solid var(--line-2);border-radius:8px;background:var(--sunk);
  padding:9px 12px;font-size:12px;color:var(--cream-3);display:flex;gap:9px;align-items:center;
  cursor:pointer;transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.hair:hover{color:var(--cream-2);border-color:#4a5f57}
.hair .dot{width:5px;height:5px;border-radius:50%;background:var(--cream-3);flex:none}
.hair.up .dot{background:var(--accent)}
.hairbody{max-height:0;overflow:hidden;opacity:0;
  transition:max-height var(--t-slow) var(--ease),opacity var(--t-mid) var(--ease)}
.hairbody.open{max-height:200px;opacity:1;margin-top:10px}

/* ── reduction table ── */
.tw{overflow-x:auto;margin-bottom:14px}
table{width:100%;border-collapse:collapse;font-size:12.5px}
th{text-align:left;font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--cream-3);
  font-weight:500;padding:0 12px 9px 0;vertical-align:bottom}
td{border-top:1px solid var(--line);padding:11px 12px 11px 0;color:var(--cream-2);
  vertical-align:top;line-height:1.55}
td:last-child,th:last-child{padding-right:0}
.mv{font-size:13.5px;color:var(--cream);font-weight:600;letter-spacing:-.01em;display:block}
.mvq{font-size:11.5px;color:var(--accent);display:block;margin-top:3px}
.from{font-family:var(--num);font-size:11px;color:var(--cream-3);line-height:1.6}

.foot{margin-top:42px;padding-top:17px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--cream-3);line-height:1.7}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
  .mcol.arriving{opacity:1;transform:none}
  .trav.go{transform:none;opacity:.25}
}
@media(max-width:960px){
  .moment{grid-template-columns:1fr;gap:18px}
  .gap,.delta{display:none}
  h1{max-width:none}
}
@media(max-width:700px){ .wrap{padding:22px 16px 70px} h1{font-size:23px} }