/* Trefoil Guides on the Raft design language (raft-design, MIT, (c) 2026 Botiverse; see NOTICE-raft.md).
   Light first. Raft's brand assets (name, logo, mark, pixel avatars, reactions) are NOT used.
   Fonts: Space Grotesk and Space Mono (SIL OFL), self-hosted in /fonts. NOTE: needs CSP "font-src 'self'" (see README).
   No scripts, no inline styles: every rule lives in this file. */

@font-face{font-family:"Space Grotesk";src:url("/fonts/SpaceGrotesk-Variable.woff2") format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Space Mono";src:url("/fonts/SpaceMono-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Space Mono";src:url("/fonts/SpaceMono-Bold.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  /* surfaces */
  --layer-frame:#ffd440; --layer-sidebar:#fffaef; --layer-canvas:#ffffff; --layer-card:#ffffff;
  --fill-muted:#f3f3f3; --fill-strong:#eaeaea; --fill-pressed:rgba(20,17,17,.08); --fill-row-hover:rgba(20,17,17,.04);
  /* text */
  --foreground:#141111; --foreground-muted:rgba(20,17,17,.68); --foreground-hint:rgba(20,17,17,.62); --foreground-disabled:rgba(20,17,17,.30);
  --foreground-link:#1447e6; --foreground-on-frame-muted:#564919;
  /* lines */
  --line-strong:#141111; --line-seam:rgba(20,17,17,.45); --line-hairline:rgba(20,17,17,.15);
  /* roles with one fixed meaning each */
  --brand-soft:#fff0bd; --brand-strong:#564919;            /* yellow: you, where you are */
  --attention:#ff99c3; --attention-soft:#ffd6e2; --attention-strong:#c00064; /* pink: to do, due */
  --info:#27ccf3; --info-soft:#d7f2fe; --info-strong:#06414f; /* cyan: this item */
  --success:#a9d877; --success-soft:#dcfac1; --success-strong:#344522; /* checked, fine */
  --warning:#f8a16f; --warning-soft:#fde6de; --warning-strong:#5b310f; /* interrupts */
  --danger:#f97264; --danger-soft:#fddedd; --danger-strong:#b5321a;   /* irreversible */
  /* shape and motion */
  --radius-sticker:4px; --radius-chip:6px; --radius-control:8px; --radius-container:10px; --radius-dialog:14px;
  --focus-ring:0 0 0 2px #fff,0 0 0 4px #141111;
  --header-h:56px; --sidebar-w:240px; --margin:20px; --measure:44rem;
  --font-sans:"Space Grotesk","Segoe UI","PingFang SC","Source Han Sans",system-ui,-apple-system,sans-serif;
  --font-mono:"Space Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)}
body{margin:0;background:var(--layer-canvas);color:var(--foreground);font:400 16px/24px var(--font-sans);overflow-wrap:break-word;min-height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:var(--foreground-link);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:0;box-shadow:var(--focus-ring);border-radius:var(--radius-control)}
.skip{position:absolute;left:8px;top:-56px;z-index:30;background:var(--foreground);color:#fff;padding:8px 12px;border-radius:var(--radius-control)}
.skip:focus{top:8px}

/* Frame: the yellow bar, on every page, nobody reads it, so the color is free */
.site-header{background:var(--layer-frame);color:var(--foreground);height:var(--header-h);position:sticky;top:0;z-index:20}
.header-row{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-inline:var(--margin)}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--foreground);text-decoration:none;font:700 17px/22px var(--font-sans);letter-spacing:-.01em}
.brand:hover{text-decoration:none}
.mark{width:34px;height:34px;padding:3px;background:#fff;border:1.5px solid var(--line-strong);border-radius:var(--radius-sticker)}
.site-header nav{display:none;gap:4px}
.site-header nav a{color:var(--foreground);text-decoration:none;font:600 14px/22px var(--font-sans);padding:5px 12px;border:1.5px solid transparent;border-radius:var(--radius-control)}
.site-header nav a:hover{background:rgba(20,17,17,.12)}
.site-header nav a[aria-current]{background:#fff;border-color:var(--line-strong)}

/* Shell: sidebar on desktop, tab bar on phones */
.shell{flex:1 0 auto;display:block}
.sidebar{display:none}
.sidebar nav{display:flex;flex-direction:column;gap:2px;padding:16px 12px}
.sidebar a{display:flex;align-items:center;gap:10px;min-height:36px;padding:6px 12px;border:1.5px solid transparent;border-radius:var(--radius-control);color:var(--foreground);text-decoration:none;font:500 14px/22px var(--font-sans)}
.sidebar a:hover{background:var(--fill-row-hover)}
.sidebar a[aria-current]{background:#fff;border-color:var(--line-strong);font-weight:600}
.sidebar .px{width:10px;height:10px;border:1.5px solid var(--line-strong);border-radius:2px;background:var(--brand-soft);flex:none}
main{min-width:0}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--layer-card);border-top:1px solid var(--line-seam);display:grid;grid-template-columns:repeat(3,1fr);padding:6px 8px calc(6px + env(safe-area-inset-bottom))}
.tabbar a{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--foreground-muted);text-decoration:none;font:500 11px/13px var(--font-sans);padding:4px 0}
.tabbar .ti{width:28px;height:24px;display:grid;place-items:center;border:1.5px solid transparent;border-radius:var(--radius-control)}
.tabbar svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tabbar a[aria-current]{color:var(--foreground);font-weight:700}
.tabbar a[aria-current] .ti{background:var(--layer-frame);border-color:var(--line-strong)}
body{padding-bottom:0}
main{padding-bottom:72px}
.wrap{width:auto;margin:0;padding-inline:var(--margin)}

/* Type: Space Grotesk for people, Space Mono for machines; no all caps */
h1,h2,h3{font-family:var(--font-sans);color:var(--foreground);text-wrap:balance;letter-spacing:-.015em}
h1{font-size:28px;line-height:34px;font-weight:700;margin:12px 0 16px}
h2{font-size:22px;line-height:28px;font-weight:700;margin:44px 0 12px}
h3{font-size:16px;line-height:24px;font-weight:700;margin:22px 0 4px}
p,ul,ol{margin:0 0 14px}
ul,ol{padding-left:22px}li+li{margin-top:4px}
strong{font-weight:700}
code{font:400 .92em var(--font-mono);background:var(--fill-muted);padding:1px 5px;border-radius:var(--radius-sticker)}
.kicker{display:inline-flex;align-items:center;gap:6px;margin:0;padding:2px 9px;font:400 12px/18px var(--font-mono);color:var(--foreground);background:var(--info-soft);border:1.5px solid var(--line-strong);border-radius:var(--radius-sticker);letter-spacing:0;text-transform:none}

/* Stamps: dates as chips with a square status pixel */
.stamps{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 4px}
.stamp{display:inline-flex;align-items:center;gap:7px;min-height:26px;padding:3px 10px;background:var(--fill-muted);border-radius:var(--radius-chip);font:400 12px/18px var(--font-mono);color:var(--foreground);white-space:nowrap;border:0}
.stamp::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--success);flex:none}
.stamp-label{font:500 12px/18px var(--font-sans);color:var(--foreground-muted);text-transform:none;letter-spacing:0}
.stamp.is-due{background:var(--attention-soft)}.stamp.is-due::before{background:var(--attention)}
.stamp.is-count::before{background:var(--info)}

/* Cards (guides list) */
.hero{padding-block:24px 4px}
.hero h1{font-size:34px;line-height:40px;max-width:20ch;margin-top:14px}
.lede{font-size:18px;line-height:26px;color:var(--foreground-muted);max-width:40rem}
.principles{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:10px}
.principles li{margin:0;padding:12px 14px;background:var(--layer-card);border:1px solid var(--line-hairline);border-radius:var(--radius-container);font-size:15px;line-height:22px;color:var(--foreground-muted)}
.principles li::before{content:"";display:inline-block;width:10px;height:10px;margin-right:8px;border:1.5px solid var(--line-strong);border-radius:2px;background:var(--brand-soft)}
.principles strong{color:var(--foreground)}
.guides h2{margin-top:36px;padding-bottom:10px;border-bottom:1px solid var(--line-seam)}
.cards{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:12px;grid-template-columns:1fr}
.cards li{margin:0}
.card a{display:flex;flex-direction:column;align-items:flex-start;gap:8px;height:100%;padding:16px;text-decoration:none;color:var(--foreground);background:var(--layer-card);border:1px solid var(--line-hairline);border-radius:var(--radius-container)}
.card a:hover{border-color:var(--line-strong);background:var(--fill-row-hover);text-decoration:none}
.card-title{font:700 17px/24px var(--font-sans);text-wrap:balance}
.card-desc{color:var(--foreground-muted);font-size:14px;line-height:22px;flex:1}
.card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:2px}
.count{font:400 12px/18px var(--font-mono);color:var(--foreground-hint)}

/* Guide */
.guide-head{padding-block:20px 16px;border-bottom:1px solid var(--line-seam)}
.crumbs{font:400 12px/18px var(--font-mono);color:var(--foreground-hint);margin-bottom:12px}
.crumbs a{color:var(--foreground-muted)}
.guide-head h1{max-width:30ch}
.guide-grid{display:grid;gap:28px;grid-template-columns:minmax(0,1fr);padding-top:4px}
.guide-main{min-width:0;max-width:var(--measure)}
.guide-main>section{scroll-margin-top:calc(var(--header-h) + 16px)}
.answer{margin:24px 0 16px;padding:14px 16px 4px;background:var(--info-soft);border:1.5px solid var(--line-strong);border-radius:var(--radius-container)}
.answer-label{display:inline-block;margin:0 0 10px;padding:1px 8px;font:700 12px/18px var(--font-sans);background:#fff;border:1.5px solid var(--line-strong);border-radius:var(--radius-sticker);color:var(--foreground);letter-spacing:0;text-transform:none}
.answer p{font-size:16px;line-height:25px}
.cite{display:inline-block;font:700 11px/16px var(--font-mono);color:var(--foreground);background:#fff;border:1px solid var(--line-hairline);border-radius:var(--radius-sticker);padding:0 4px;margin:0 1px;text-decoration:none;white-space:nowrap}
.cite:hover{background:var(--brand-soft);border-color:var(--line-strong);text-decoration:none}
.ad-slot{margin:0 0 20px;padding:10px 12px 12px;background:var(--fill-muted);border:1px solid var(--line-hairline);border-radius:var(--radius-container);min-height:280px;display:flex;flex-direction:column;gap:8px}
.ad-label{margin:0;font:400 11px/16px var(--font-mono);color:var(--foreground-hint)}
.ad-slot ins{display:block;flex:1;min-height:250px}
.ledger h2{margin-top:28px}
.ledger-note{color:var(--foreground-muted);font-size:14px;line-height:22px;margin-top:-4px}
.facts{margin:0;background:var(--layer-card);border:1px solid var(--line-hairline);border-radius:var(--radius-container);overflow:hidden}
.fact{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;padding:12px 16px;border-bottom:1px solid var(--line-hairline)}
.fact:last-child{border-bottom:0}
.fact dt{font:600 13px/18px var(--font-sans);color:var(--foreground-muted);text-transform:none;letter-spacing:0}
.fact dd{margin:0}
.fact-value{display:block;font-size:15px;line-height:23px}
.fact-meta{display:flex;align-items:center;gap:6px;margin-top:4px;font:400 12px/18px var(--font-mono);color:var(--foreground-hint)}
.fact-meta::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--success);flex:none}
.table-wrap{overflow-x:auto;margin:0 0 18px;border:1px solid var(--line-hairline);border-radius:var(--radius-container);background:var(--layer-card)}
table{border-collapse:collapse;width:100%;font-size:14px;line-height:22px}
th,td{text-align:left;vertical-align:top;padding:9px 14px;border-bottom:1px solid var(--line-hairline)}
th{font:600 13px/18px var(--font-sans);text-transform:none;letter-spacing:0;color:var(--foreground-muted);background:var(--fill-muted)}
tbody tr:last-child td{border-bottom:0}
.qa{margin:0 0 10px;padding:12px 16px;background:var(--layer-card);border:1px solid var(--line-hairline);border-radius:var(--radius-container)}
.qa h3{margin:0 0 4px;font-size:15px;line-height:22px}
.qa p{margin:0;font-size:15px;line-height:23px}
.sources ol{list-style:none;padding:0;margin:0;display:grid;gap:8px;counter-reset:s}
.sources li{counter-increment:s;margin:0;padding:12px 16px 12px 52px;position:relative;background:var(--layer-card);border:1px solid var(--line-hairline);border-radius:var(--radius-container);scroll-margin-top:calc(var(--header-h) + 16px)}
.sources li::before{content:counter(s);position:absolute;left:14px;top:12px;width:24px;height:24px;display:grid;place-items:center;font:700 12px/1 var(--font-mono);background:#fff;border:1.5px solid var(--line-strong);border-radius:var(--radius-sticker)}
.sources li:target{background:var(--brand-soft);border-color:var(--line-strong)}
.src-title{display:block;font-weight:600;font-size:15px;line-height:22px}
.src-meta,.src-url{display:block;font:400 12px/18px var(--font-mono);color:var(--foreground-hint)}
.src-url{overflow-wrap:anywhere}
.method{margin-top:16px;padding-top:12px;border-top:1px solid var(--line-seam);color:var(--foreground-muted);font-size:14px;line-height:22px}
.toc{font-size:14px}
.toc-label{margin:0 0 8px;font:400 12px/18px var(--font-mono);color:var(--foreground-hint);text-transform:none;letter-spacing:0}
.toc ol{list-style:none;padding:0;margin:0;border-left:1px solid var(--line-seam)}
.toc li{margin:0}
.toc a{display:block;padding:5px 0 5px 12px;margin-left:-1px;border-left:2px solid transparent;color:var(--foreground-muted);text-decoration:none;line-height:20px}
.toc a:hover{color:var(--foreground);border-left-color:var(--line-strong)}
.guide-side{display:none}
.related{margin-top:40px;padding-top:4px;border-top:1px solid var(--line-seam)}
.related ul{list-style:none;padding:0;display:grid;gap:10px;grid-template-columns:1fr}
.related li{margin:0}
.related a{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid var(--line-hairline);border-radius:var(--radius-container);text-decoration:none;color:var(--foreground);background:var(--layer-card)}
.related a:hover{border-color:var(--line-strong)}
.prose-page{padding-top:24px}.prose-page>*{max-width:var(--measure)}
.notice{padding:12px 14px;background:var(--warning-soft);border:1px solid var(--line-hairline);border-radius:var(--radius-container)}
.button{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;background:#fff;color:var(--foreground);border:1.5px solid var(--line-strong);border-radius:var(--radius-control);font:600 14px/22px var(--font-sans);text-decoration:none}
.button:hover{background:var(--fill-row-hover);text-decoration:none}
.site-footer{margin-top:48px;border-top:1px solid var(--line-seam);background:var(--layer-sidebar);color:var(--foreground-muted);font-size:14px;line-height:22px}
.footer-row{display:flex;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;padding-block:20px}
.footer-row p{margin:0;max-width:38rem}
.site-footer nav{display:flex;gap:4px 16px;flex-wrap:wrap}
.site-footer a{color:var(--foreground-muted)}

/* Desktop: from 768px with a mouse (Raft's desktop scale is 14/22; reading pages stay 16/26) */
@media (min-width:768px){
  .site-header nav{display:flex}
  .shell{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);flex:1}
  .sidebar{display:block;background:var(--layer-sidebar);border-right:1px solid var(--line-seam);position:sticky;top:var(--header-h);align-self:start;height:calc(100vh - var(--header-h))}
  .tabbar{display:none}
  main{padding-bottom:0}
  .wrap{padding-inline:28px}
  .hero{padding-block:36px 8px}
  .hero h1{font-size:40px;line-height:44px}
  .principles{grid-template-columns:repeat(3,1fr)}
  .cards{grid-template-columns:repeat(2,1fr)}
  h1{font-size:34px;line-height:40px}
  .site-footer{margin-top:64px}
  .fact{grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:4px 20px}
  .answer p{font-size:17px;line-height:27px}
  .guide-main{font-size:16px;line-height:26px}
}
@media (min-width:1180px){
  .guide-grid{grid-template-columns:minmax(0,var(--measure)) 15rem;justify-content:space-between}
  .guide-side{display:block;position:sticky;top:calc(var(--header-h) + 20px);align-self:start}
  .cards{grid-template-columns:repeat(3,1fr)}
  .related ul{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}