/* Bylawgic design system
   Contrast is fixed, hue is chosen. Every palette holds ≥7:1 for ink on page.
   Two type families: system sans for everything; one serif, for the chair script only. */

:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Inter, sans-serif;
  --font-script: "Iowan Old Style", "Palatino Linotype", Charter, Georgia, "Times New Roman", serif;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 0 var(--rule);
  --tap: 44px;
  --w-max: 720px;
  --t: 180ms;
}

/* ---------- palettes: light ---------- */
[data-palette="paper"]   { --page:#F4F2EE; --surface:#FFFFFF; --sunk:#ECE9E2; --ink:#1A1916; --muted:#5A5750; --rule:#DAD6CC; --accent:#1F5B54; --accent-ink:#FFFFFF; --accent-tint:#E3EEEB; --warn:#7A4E00; --warn-tint:#FBF0DA; --danger:#8B2E2E; --danger-tint:#FBE9E7; --ok:#2F5E3A; --ok-tint:#E6F0E7; }
[data-palette="sage"]    { --page:#EEF2EC; --surface:#F8FAF6; --sunk:#E3E9E0; --ink:#182019; --muted:#525C53; --rule:#CFD8CC; --accent:#3D6B4E; --accent-ink:#FFFFFF; --accent-tint:#E1ECE3; --warn:#7A4E00; --warn-tint:#F7EFD9; --danger:#8B2E2E; --danger-tint:#F7E6E3; --ok:#2F5E3A; --ok-tint:#E1EBE2; }
[data-palette="chamber"] { --page:#F3ECE1; --surface:#FBF7EF; --sunk:#E9E0D1; --ink:#2A2118; --muted:#665748; --rule:#D8CBB8; --accent:#7E5326; --accent-ink:#FFFFFF; --accent-tint:#F0E4D3; --warn:#7A4E00; --warn-tint:#F8ECD3; --danger:#8B2E2E; --danger-tint:#F5E3DE; --ok:#4A5E2A; --ok-tint:#E9EDDC; }
[data-palette="slate"]   { --page:#EEF0F2; --surface:#F8F9FA; --sunk:#E2E5E9; --ink:#1A1D21; --muted:#535A63; --rule:#CDD2D8; --accent:#3B4A5E; --accent-ink:#FFFFFF; --accent-tint:#E1E6EC; --warn:#7A4E00; --warn-tint:#F5EDDB; --danger:#8B2E2E; --danger-tint:#F5E4E2; --ok:#2F5E3A; --ok-tint:#E2EAE3; }
[data-palette="pink"]    { --page:#FBEFF3; --surface:#FFF7FA; --sunk:#F5E1E8; --ink:#3B1F2B; --muted:#7A5262; --rule:#EACAD5; --accent:#B23A6A; --accent-ink:#FFFFFF; --accent-tint:#F8DEE8; --warn:#7A4E00; --warn-tint:#FBEEDD; --danger:#8B2E2E; --danger-tint:#FBE6E6; --ok:#2F5E3A; --ok-tint:#E7EFE7; }

/* ---------- palettes: dark ---------- */
[data-mode="dark"][data-palette="paper"]   { --page:#17160F; --surface:#221F18; --sunk:#12110C; --ink:#F0EDE4; --muted:#B6B1A4; --rule:#3A372E; --accent:#7CC4B9; --accent-ink:#0E2A26; --accent-tint:#1E3532; --warn:#F1C170; --warn-tint:#3A2C10; --danger:#F09A93; --danger-tint:#3F1E1C; --ok:#9CD0A6; --ok-tint:#1D3222; }
[data-mode="dark"][data-palette="sage"]    { --page:#131A15; --surface:#1B241D; --sunk:#0F150F; --ink:#EAF1EA; --muted:#AEBBAF; --rule:#2F3B31; --accent:#8FCBA3; --accent-ink:#0D2415; --accent-tint:#1E3325; --warn:#F1C170; --warn-tint:#3A2C10; --danger:#F09A93; --danger-tint:#3F1E1C; --ok:#9CD0A6; --ok-tint:#1D3222; }
[data-mode="dark"][data-palette="chamber"] { --page:#1A140E; --surface:#241C13; --sunk:#130F0A; --ink:#F2E9DC; --muted:#BFB09C; --rule:#3E3226; --accent:#D8A66E; --accent-ink:#2A1B08; --accent-tint:#3A2B19; --warn:#F1C170; --warn-tint:#3A2C10; --danger:#F09A93; --danger-tint:#3F1E1C; --ok:#B7CF8E; --ok-tint:#27311A; }
[data-mode="dark"][data-palette="slate"]   { --page:#14171B; --surface:#1D2126; --sunk:#0F1114; --ink:#ECEFF2; --muted:#AEB6BF; --rule:#333A42; --accent:#9DB3CE; --accent-ink:#0F1A28; --accent-tint:#22303F; --warn:#F1C170; --warn-tint:#3A2C10; --danger:#F09A93; --danger-tint:#3F1E1C; --ok:#9CD0A6; --ok-tint:#1D3222; }
[data-mode="dark"][data-palette="pink"]    { --page:#1E1218; --surface:#2A1A22; --sunk:#160D12; --ink:#F7E9EF; --muted:#CDB0BD; --rule:#46303A; --accent:#F08AB5; --accent-ink:#3A0F22; --accent-tint:#44243A; --warn:#F1C170; --warn-tint:#3A2C10; --danger:#F09A93; --danger-tint:#3F1E1C; --ok:#9CD0A6; --ok-tint:#1D3222; }

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font:16px/1.55 var(--font-sans); color:var(--ink); background:var(--page);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  display:flex; flex-direction:column; overflow:hidden;
}
@media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important;scroll-behavior:auto!important} }
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:var(--accent)}
h1,h2,h3{margin:0;line-height:1.25;font-weight:600;letter-spacing:-0.01em}
h1{font-size:1.5rem} h2{font-size:1.2rem} h3{font-size:1.02rem}
p{margin:0 0 .75rem}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-sm)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- shell ---------- */
.shell{display:flex;flex-direction:column;flex:1;min-height:0}
.top{
  flex:none;display:flex;align-items:center;gap:10px;padding:12px 16px 10px;
  background:var(--page);border-bottom:1px solid var(--rule);
  padding-top:calc(12px + env(safe-area-inset-top));
}
.brand{font-weight:700;font-size:1.05rem;letter-spacing:-0.01em;text-align:left;min-height:var(--tap);display:flex;flex-direction:column;justify-content:center}
.brand:hover{color:var(--accent)}
.brand small{display:block;font-weight:400;font-size:.72rem;color:var(--muted);letter-spacing:0}
.top .spacer{flex:1}
.top .brand small{display:none}
@media (min-width:600px){ .top .brand small{display:block} }
.ctx{display:inline-flex;align-items:center;border:1px solid var(--rule);border-radius:999px;padding:2px;background:var(--surface);flex:none}
.ctx:empty{display:none}
.ctx button{min-height:36px;padding:4px 12px;border-radius:999px;font-size:.86rem;color:var(--muted);white-space:nowrap;transition:background var(--t),color var(--t)}
.ctx button.on{background:var(--accent);color:var(--accent-ink);font-weight:600}
[data-context="local"] .ctx button.on{background:var(--context,var(--accent));color:var(--context-ink,var(--accent-ink))}
@media (max-width:359px){ .ctx button{padding:4px 9px;font-size:.8rem} }
.pill{
  min-height:40px;padding:6px 12px;border:1px solid var(--rule);border-radius:999px;
  background:var(--surface);font-size:.86rem;display:inline-flex;align-items:center;gap:6px;color:var(--ink)
}
.pill:hover{border-color:var(--muted)}
.pill.accent{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
main{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.wrap{max-width:var(--w-max);margin:0 auto;padding:18px 16px 110px}
.view{display:none}.view.on{display:block}

/* ---------- tab bar ---------- */
.tabs{
  flex:none;display:flex;justify-content:space-around;align-items:stretch;
  background:var(--surface);border-top:1px solid var(--rule);
  padding-bottom:env(safe-area-inset-bottom);
  position:fixed;left:0;right:0;bottom:0;z-index:20
}
.tabs button{
  flex:1;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:.74rem;color:var(--muted)
}
.tabs button svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.tabs .ic{display:flex;align-items:center;justify-content:center;width:56px;height:30px;border-radius:999px;transition:background var(--t)}
.tabs button.on{color:var(--accent);font-weight:600}
.tabs button.on .ic{background:var(--accent-tint)}

/* ---------- desktop: left rail ---------- */
@media (min-width:900px){
  body{flex-direction:row}
  .tabs{position:static;flex-direction:column;justify-content:flex-start;width:220px;border-top:0;border-right:1px solid var(--rule);padding:16px 10px;gap:2px}
  .tabs button{flex:none;flex-direction:row;justify-content:flex-start;gap:12px;min-height:44px;padding:0 12px;border-top:0;border-radius:var(--radius);font-size:.95rem}
  .tabs .ic{width:auto;height:auto;border-radius:0}
  .tabs button.on{background:var(--accent-tint)}
  .tabs button.on .ic{background:none}
  .tabs .rail-brand{display:block;padding:6px 12px 18px}
  .top .brand{display:none}
  .wrap{padding-bottom:40px}
}
.rail-brand{display:none}

/* ---------- options stay in reach ---------- */
.opts{display:grid;gap:10px;margin:14px 0 18px}
.opt{
  text-align:left;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  padding:14px 16px;min-height:var(--tap);display:block;width:100%;transition:border-color var(--t)
}
.opt:hover{border-color:var(--muted)}
.opt b{display:block;font-weight:600}
.opt span{display:block;color:var(--muted);font-size:.9rem;margin-top:2px}
.strip{
  display:flex;gap:8px;overflow-x:auto;padding:4px 0 10px;margin:8px 0 14px;
  position:sticky;top:0;background:var(--page);z-index:5;scrollbar-width:none
}
.strip::-webkit-scrollbar{display:none}
.strip > *{flex:none;white-space:nowrap}
.strip button{
  flex:none;min-height:36px;padding:6px 14px;border-radius:999px;border:1px solid var(--rule);
  background:var(--surface);font-size:.9rem;color:var(--muted);transition:all var(--t)
}
.strip button.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}

/* ---------- entries and cards ---------- */
.card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);padding:16px;margin:0 0 12px}
.card h3{margin-bottom:6px}
.bookcard{border:2px solid var(--accent)}
.decide{border:2px solid var(--accent)}
.decide .q{font-size:1.1rem;font-weight:600;margin:12px 0 4px}
.decide .opts{margin:10px 0 2px}
.errcard{border:2px solid var(--danger);background:var(--danger-tint)}
.chip.resume{border-color:var(--accent);color:var(--accent);font-weight:600}
.plain{font-size:1.05rem;line-height:1.5;margin:0 0 10px}
.muted{color:var(--muted)}
.small{font-size:.86rem}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.field{margin:14px 0}
.label{font-size:.86rem;color:var(--muted);margin-bottom:4px}
.btn{
  min-height:var(--tap);padding:10px 18px;border-radius:var(--radius);background:var(--accent);color:var(--accent-ink);
  font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:filter var(--t)
}
.btn:hover{filter:brightness(1.08)}
.btn.quiet{background:var(--surface);color:var(--ink);border:1px solid var(--rule)}
.btn.block{display:flex;width:100%}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:36px;padding:7px 12px;border-radius:999px;border:1px solid var(--rule);background:var(--surface);font-size:.9rem;text-align:left}
.chip:hover{border-color:var(--accent);color:var(--accent)}

/* the script: the one serif, set large */
.script{
  font-family:var(--font-script);font-size:1.32rem;line-height:1.62;letter-spacing:.005em;
  background:var(--surface);border:2px solid var(--accent);border-radius:var(--radius);
  padding:18px 20px;margin:12px 0 16px;white-space:pre-wrap
}
@media (min-width:900px){ .script{font-size:1.45rem} }
.say{font-size:.82rem;color:var(--muted);margin-bottom:-6px}

/* mechanics table: glanceable as a unit */
.mech{display:grid;grid-template-columns:repeat(2,1fr);gap:6px 14px;margin:10px 0 12px;font-size:.92rem}
.mech div{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid var(--rule)}
.mech div span:last-child{font-weight:600;text-align:right}
.mech .full{grid-column:1/-1}

/* coverage + check */
.cov{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;padding:3px 9px;border-radius:999px;border:1px solid var(--rule);color:var(--muted);background:var(--surface)}
.cov.overridden{background:var(--accent-tint);color:var(--accent);border-color:transparent}
.cov.same{opacity:.85}
.cov.only{background:var(--sunk);border-color:transparent}
.cov.unreviewed{background:var(--warn-tint);color:var(--warn);border-color:transparent;font-weight:600}
.cov i{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}
.check{background:var(--warn-tint);color:var(--warn);border:1px solid transparent;border-radius:var(--radius);padding:12px 14px;margin:10px 0;font-size:.95rem}
.check b{display:block;margin-bottom:2px}
.trigger{background:var(--danger-tint);color:var(--danger);border-radius:var(--radius);padding:14px 16px;margin:12px 0}
.trigger b{display:block;font-size:1.02rem;margin-bottom:4px}
.trigger p{margin:0 0 6px;color:var(--ink)}
.trigger .why{color:var(--danger);font-size:.92rem}
.info{background:var(--accent-tint);color:var(--ink);border-radius:var(--radius);padding:12px 14px;margin:10px 0;font-size:.95rem}
.src{font-size:.82rem;color:var(--muted);margin-top:10px;padding-top:8px;border-top:1px solid var(--rule)}
.src span{display:block}
.src .src-h{font-weight:600;margin-bottom:2px}
.src b{font-weight:600;color:var(--ink)}
.cite{font-size:.86rem;color:var(--muted);background:var(--sunk);border-radius:var(--radius-sm);padding:8px 10px;margin-top:8px}

details.more{margin:8px 0}
details.more summary{cursor:pointer;color:var(--accent);font-weight:600;list-style:none;min-height:var(--tap);display:flex;align-items:center}
details.more summary::-webkit-details-marker{display:none}
details.more summary::before{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);margin-right:10px;transition:transform var(--t)}
details.more[open] summary::before{transform:rotate(45deg)}
.mistakes{margin:8px 0 0;padding-left:18px}
.mistakes li{margin:0 0 6px}

/* ask */
textarea{width:100%;min-height:96px;padding:12px 14px;border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface);color:var(--ink);font:inherit;resize:vertical}
textarea:focus{border-color:var(--accent);outline:0}
.answer-head{display:flex;justify-content:space-between;align-items:center;margin:4px 0 12px}

/* chair */
.stepnav{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 10px}
.stepnav .pos{font-size:.86rem;color:var(--muted)}
.stepnav button{min-height:var(--tap);min-width:var(--tap);padding:0 14px;border-radius:var(--radius);border:1px solid var(--rule);background:var(--surface)}
.stepnav button:disabled{opacity:.35}
.phase{font-size:.8rem;color:var(--muted);text-transform:none;margin-bottom:2px}
.picklist{display:grid;gap:8px;margin:8px 0 14px}
.picklist button{text-align:left;min-height:var(--tap);padding:10px 14px;border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface);display:flex;justify-content:space-between;align-items:center;gap:10px}
.picklist button:hover{border-color:var(--accent)}
.picklist small{color:var(--muted);font-size:.8rem}
.sheet{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none;z-index:40;align-items:flex-end;justify-content:center}
.sheet.on{display:flex}
.sheet .panel{background:var(--page);width:100%;max-width:var(--w-max);max-height:88vh;overflow:auto;border-radius:16px 16px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom))}
@media (min-width:900px){ .sheet{align-items:center} .sheet .panel{border-radius:16px;max-height:80vh} }
.grab{width:40px;height:4px;border-radius:2px;background:var(--rule);margin:0 auto 12px}

/* motion builder */
.build .q{font-size:1.15rem;font-weight:600;margin:4px 0 12px}
.assemble{font-family:var(--font-script);font-size:1.1rem;line-height:1.6;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);padding:16px 18px;margin:12px 0;white-space:pre-wrap}
.assemble .blank{background:var(--accent-tint);color:var(--accent);border-radius:4px;padding:0 4px}
.assemble .blank.now{outline:2px solid var(--accent)}
input.txt{width:100%;min-height:var(--tap);padding:10px 12px;border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface);color:var(--ink);font:inherit}
input.txt:focus{border-color:var(--accent);outline:0}
.need{background:var(--sunk);border-radius:var(--radius);padding:12px 14px;margin:10px 0}
.need ul{margin:6px 0 0;padding-left:18px}

/* reader */
.reader{font-family:var(--font-script);font-size:1.08rem;line-height:1.7;white-space:pre-wrap;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);padding:18px 20px;max-height:60vh;overflow:auto}
.toc{display:grid;gap:6px;margin:10px 0}
.toc button{text-align:left;padding:10px 12px;border:1px solid var(--rule);border-radius:var(--radius-sm);background:var(--surface);min-height:var(--tap)}
.toc button.art{font-weight:600;background:var(--sunk)}

/* settings */
.swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:10px 0}
.swatch{aspect-ratio:1;border-radius:var(--radius);border:2px solid var(--rule);display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;font-size:.72rem;font-weight:600}
.swatch.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-tint)}
.swatch.paper{background:#F4F2EE;color:#1F5B54}.swatch.sage{background:#EEF2EC;color:#3D6B4E}.swatch.chamber{background:#F3ECE1;color:#7E5326}.swatch.slate{background:#EEF0F2;color:#3B4A5E}.swatch.pink{background:#FBEFF3;color:#B23A6A}
.empty{color:var(--muted);padding:20px 0}
.errbar{position:fixed;top:0;left:0;right:0;z-index:99;background:var(--danger);color:#fff;padding:8px 12px;font-size:.85rem}

/* split pane: bottom half of the screen while an index entry is open */
.pane{position:fixed;left:0;right:0;bottom:calc(56px + env(safe-area-inset-bottom));height:48vh;background:var(--page);border-top:1px solid var(--rule);box-shadow:0 -8px 24px rgba(0,0,0,.08);z-index:15;display:none;overflow:auto;padding:8px 16px 16px}
.pane.on{display:block}
main.paned .wrap{padding-bottom:calc(48vh + 120px)}
@media (min-width:900px){ .pane{left:220px;bottom:0;height:44vh} main.paned .wrap{padding-bottom:calc(44vh + 40px)} }

mark{background:var(--warn-tint);color:var(--ink);border-radius:3px;padding:0 2px}
[data-mode="dark"] mark{background:#5a4510}