*{box-sizing:border-box}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16.5px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:44rem;margin:0 auto;padding:2rem 1.15rem calc(var(--bar-h,64px) + 2rem)} /* --bar-h is the measured bar incl. its safe-area padding */
@media(min-width:700px){ .wrap{padding:3rem 2rem calc(var(--bar-h,64px) + 3rem)} }
html{scroll-padding-bottom:calc(var(--bar-h,64px) + 1rem)}

a{color:var(--accent);text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent);text-underline-offset:.16em}
@media(hover:hover){ a:hover{text-decoration-color:var(--accent)} }
a:focus-visible,button:focus-visible,summary:focus-visible,textarea:focus-visible,input:focus-visible,h1:focus-visible,h2:focus-visible,.head h3:focus-visible,.qhead:focus-visible,.qresult-line:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--radius)
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Hover styles apply only where a pointer can hover: a touch screen keeps :hover on the last tapped
   element, so a control that changes under the finger would keep a stale highlight. */
/* Controls. Quiet: text only, muted. Primary: the one filled button in a row. Targets are at least 44px,
   except links and the gate's link-styled button inside running text. */
button{font:inherit;cursor:pointer}
.drop,.show,.close1,.copy1,.qreset,.qback,.qforward,.audio-start,.audio-details,#exportBtn,.contents-head button,.handoff .tools button{
  background:transparent;border:0;color:var(--muted);font-size:.88rem;
  min-height:44px;min-width:44px;padding:.4rem .5rem;display:inline-flex;align-items:center;justify-content:center;gap:.4rem
}
@media(hover:hover){ .drop:hover,.show:hover,.close1:hover,.copy1:hover,.qreset:hover,.qback:hover,.qforward:hover,.audio-start:hover,.audio-details:hover,#exportBtn:hover,.contents-head button:hover,.handoff .tools button:hover{color:var(--accent)} }
.next1,.handoff .tools .primary{
  background:var(--ink);color:var(--ground);border:1px solid var(--ink);border-radius:var(--radius);
  font-size:.88rem;font-weight:600;min-height:44px;padding:.4rem .9rem
}
@media(hover:hover){ .next1:hover,.handoff .tools .primary:hover{background:var(--accent);border-color:var(--accent);color:var(--ground)} }

/* ---------- masthead ---------- */
header.mast{padding-bottom:.5rem;margin-bottom:1.5rem} /* the first section's rule closes it */
h1{
  font-family:var(--font-heading);font-weight:500;
  font-size:clamp(2rem,8vw,3rem);line-height:1.05;letter-spacing:-.015em;
  margin:0 0 .5rem;text-wrap:balance;
}
.dek{color:var(--muted);max-width:34rem;margin:0}
.counts{color:var(--muted);font-size:.84rem;margin:.5rem 0 0}

/* ---------- sections ---------- */
/* A section opens with a heavier rule and a larger heading than the hairline and title of a reading. */
.bucket{margin:0 0 3rem}
.bucket > h2{
  font-family:var(--font-heading);font-weight:500;font-size:1.5rem;line-height:1.2;
  margin:0;letter-spacing:-.01em;scroll-margin-top:1rem;
  border-top:2px solid var(--ink);padding-top:.7rem;
}
.bucket > .counts{margin:.2rem 0 .3rem}
.bucket > .why-bucket{color:var(--muted);font-size:.92rem;margin:0 0 1rem}

/* ---------- reading ---------- */
/* No card frame: readings are separated by a hairline and whitespace. */
.item{scroll-margin-top:1rem;border-top:1px solid var(--rule);padding:1.1rem 0 .4rem}
.head{display:flex;gap:.75rem;align-items:flex-start;min-height:44px}
.box{
  flex:0 0 auto;width:22px;height:22px;margin-top:.28rem;border:1.5px solid var(--muted);
  border-radius:var(--radius);display:grid;place-items:center;color:transparent;font-size:14px;
  background:transparent;position:relative;padding:0;cursor:pointer;
  -webkit-appearance:none;appearance:none;font-family:inherit;
}
.box::before{content:"";position:absolute;inset:-11px}
.item[data-state="done"] > .head .box,.subs > li[data-state="done"] .box{background:var(--accent-soft);color:var(--accent)}
.item[data-state="dropped"] > .head .box{color:transparent}
.item[data-state="dropped"] > .head .box::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:10px;height:2px;background:var(--muted);border-radius:1px}
.heading{flex:1;min-width:0}
.head h3{
  font-family:var(--font-heading);font-weight:500;font-size:1.2rem;
  line-height:1.25;margin:0;letter-spacing:-.005em;text-wrap:balance;
}
/* "Essential · Byline · ~5 min": one line of plain text; a separator may end a line, never start one. */
.metadata{margin-top:.25rem;color:var(--muted);font-size:.82rem;line-height:1.45}
.metadata > span + span::before{content:"\00a0· ";content:"\00a0· " / ""}
.priority-essential{font-weight:600;color:var(--signal)}
.minutes,.toc .time,.counts{font-variant-numeric:tabular-nums}
.metadata .minutes{white-space:nowrap}
/* Done and skipped readings fold to their title; Show brings the reading back. */
.item[data-state] .head h3{color:var(--done)}
.item[data-state]:not([data-show]) .metadata,
.item[data-state]:not([data-show]) .body{display:none}
.item[data-state] .drop{display:none}

.body{margin-top:.7rem}
.what{margin:0 0 .6rem;font-size:.95rem}
.why{margin:0 0 .6rem;font-size:.84rem;line-height:1.5;color:var(--muted)}
.scope{margin:.7rem 0 0;font-size:.88rem;color:var(--muted)}
.scope + .source-links{margin-top:.2rem}
.scope-label{font-weight:600}

/* sub-items */
.subs{list-style:none;margin:.7rem 0 0;padding:0;display:flex;flex-direction:column;gap:.1rem}
.subs > li{display:flex;gap:.7rem;align-items:flex-start;padding:.45rem 0;min-height:44px}
.subs > li + li{border-top:1px solid var(--rule)}
.subs .box{margin-top:.1rem;font-size:13px}
.subs .txt{flex:1;min-width:0;font-size:.92rem;line-height:1.45}
.subs .txt p{margin:.3rem 0}
.subs .minutes{color:var(--muted);font-size:.82rem}
.subs > li[data-state="done"] .txt{color:var(--done)}

/* close-out drawer: recall, note, quiz, then the exits */
.item-footer{position:relative;margin-top:.4rem}
details.closeout{margin:0}
details.closeout > summary{
  font-size:.88rem;color:var(--ink);cursor:pointer;list-style:none;min-height:44px;scroll-margin-top:1rem;
  display:flex;align-items:flex-start;gap:.45rem;padding:.75rem 6.5rem .4rem 0;line-height:1.4 /* room for Skip, Show, Hide (en, de); the first line centres on the 44px Skip */
}
@media(hover:hover){ details.closeout > summary:hover{color:var(--accent)} }
details.closeout > summary::-webkit-details-marker{display:none}
.chevron{display:inline-block;font-size:1.25rem;line-height:1;transition:transform .15s;flex:0 0 auto}
details.closeout[open] > summary > .chevron,.audio-details[aria-expanded="true"] .chevron{transform:rotate(90deg)}
.summary-text{min-width:0}
.item-footer > .drop,.item-footer > .show{position:absolute;right:0;top:0}
.show{display:none}
.item[data-state] .item-footer > .show{display:inline-flex}
.closeout .field{margin-top:.6rem}
.closeout label{display:block;font-size:.82rem;font-weight:600;color:var(--muted)}
.closeout textarea,.pad textarea{
  width:100%;margin-top:.3rem;min-height:3.4rem;resize:vertical;field-sizing:content;
  background:var(--surface);color:var(--ink);border:1px solid var(--rule);
  border-radius:var(--radius);padding:.55rem .6rem;font:inherit;font-size:.93rem;line-height:1.5;
}
.pad textarea{min-height:5rem}
.exits{display:flex;align-items:center;gap:.3rem;margin-top:.8rem}
.exits .copy1{margin-right:auto;margin-left:-.5rem}
.copy1 svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}

/* ---------- quizzes ---------- */
.quiz{margin:.8rem 0 0}
.quiz > summary{
  font-weight:600;font-size:.95rem;
  padding:.6rem 0;cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:.6rem;min-height:44px
}
.quiz > summary::-webkit-details-marker{display:none}
.quiz > summary::after{content:"›";content:"›" / "";margin-left:auto;color:var(--muted);font-size:1.3rem;transition:transform .15s}
.quiz[open] > summary::after{transform:rotate(90deg)}
.quiz > summary .qscore{color:var(--muted);font-weight:normal;font-size:.84rem}
.gate{color:var(--muted);font-size:.88rem;padding:0 0 .6rem}
.gate .qreset{display:inline;min-height:0;min-width:0;padding:0;font-size:inherit;color:var(--accent);text-decoration:underline;text-underline-offset:.16em}
/* One question at a time: numbered steps (with the outcome once answered), the question, its choices,
   Previous and Next; past the last question, the result. */
/* One row however many questions; it scrolls sideways and keeps the current step in view. */
.qsteps{display:flex;gap:.35rem;margin:.1rem 0 .5rem;scroll-margin-top:1rem;position:relative;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.qsteps::-webkit-scrollbar{display:none}
.qstep{
  flex:none;min-width:44px;min-height:44px;padding:0 .45rem;font-size:.85rem;font-variant-numeric:tabular-nums;
  background:transparent;color:var(--muted);border:1px solid var(--rule);border-radius:var(--radius)
}
@media(hover:hover){ .qstep:hover{color:var(--accent);border-color:var(--accent)} }
.qstep.right{color:var(--correct);background:var(--correct-soft)}
.qstep.wrong{color:var(--wrong);background:var(--wrong-soft)}
.qstep[aria-current="step"]{border-color:var(--accent);color:var(--ink);font-weight:700}
.q{padding:.2rem 0 .2rem;counter-reset:choice}
.qhead{scroll-margin-top:1rem}
.qcount{font-size:.78rem;color:var(--muted);margin:0 0 .15rem;letter-spacing:.02em}
.q .qtext{font-size:1.02rem;line-height:1.45;margin:0 0 .6rem;font-weight:600}
/* Choices are tiles lettered A, B, C… (decoration: their names stay the choice text); after answering,
   the chosen and the right one are tinted and marked. */
.opt{
  display:flex;align-items:baseline;gap:.6rem;width:100%;text-align:left;font-size:.92rem;line-height:1.4;position:relative;
  background:transparent;color:var(--ink);border:1px solid var(--rule);border-radius:var(--radius);
  margin:0 0 .45rem;padding:.6rem 2.2rem .6rem .65rem;min-height:44px;counter-increment:choice;
  -webkit-appearance:none;appearance:none;transition:background .12s,border-color .12s
}
.opt::before{content:counter(choice,upper-alpha);content:counter(choice,upper-alpha) / "";flex:none;min-width:1.1em;font-size:.8rem;font-weight:700;color:var(--muted)}
@media(hover:hover){ .opt:hover:not([aria-disabled="true"]){background:var(--accent-soft);border-color:var(--accent)} } /* a tapped tile must not look chosen */
.opt[aria-disabled="true"]{cursor:default}
.q.answered .opt.correct{background:var(--correct-soft);border-color:var(--correct)}
.q.answered .opt.wrong{background:var(--wrong-soft);border-color:var(--wrong)}
/* Marks carry the result without colour; the status text below announces it, so they stay silent. */
.q.answered .opt.correct::after,.q.answered .opt.wrong::after{position:absolute;right:.7rem;top:.6rem;font-weight:700}
.q.answered .opt.correct::after{content:"\2713";content:"\2713" / "";color:var(--correct)}
.q.answered .opt.wrong::after{content:"\2717";content:"\2717" / "";color:var(--wrong)}
/* The outcome, framed in its colour under the choices; the region stays in place, empty, until answered. */
.rat{font-size:.88rem;line-height:1.5;margin:.25rem 0 0;padding:.6rem .75rem;border-left:3px solid var(--wrong);background:var(--wrong-soft);border-radius:var(--radius)}
.q.right .rat{border-left-color:var(--correct);background:var(--correct-soft)}
.rat:empty{padding:0;margin:0;border:0;background:none}
/* Previous and Next stay reachable above the bar while a long question or explanation runs below it. */
/* Anything in the quiz brought into view from below stays clear of that row (it can ride up to the steps). */
.qbody button,.qhead{scroll-margin-bottom:3.75rem}
.qnav{display:flex;align-items:center;gap:.5rem;margin-top:.4rem;padding:.3rem 0;position:sticky;bottom:var(--bar-h,64px);z-index:1;background:var(--ground)}
.qforward{margin-left:auto}
/* Once answered, Next is outlined in the accent: the drawer's Done, next stays the one filled button. */
.qforward.primary,.qresume{
  color:var(--accent);border:1px solid var(--accent);border-radius:var(--radius);font-weight:600;
  font-size:.88rem;min-height:44px;padding:.4rem .9rem;background:transparent
}
@media(hover:hover){ .qforward.primary:hover,.qresume:hover{background:var(--accent-soft)} }
.rat strong{font-weight:700}
.qback::before{content:"\2039";content:"\2039" / "";font-size:1.2rem;line-height:1}
.qforward::after{content:"\203A";content:"\203A" / "";font-size:1.2rem;line-height:1}
.qresult{padding:.2rem 0}
.qresult-line{font-family:var(--font-heading);font-size:1.3rem;font-weight:600;margin:.2rem 0 .3rem;scroll-margin-top:1rem}
.qhint{color:var(--muted);font-size:.86rem;margin:0 0 .4rem}
.qbody > .qreset{margin-top:.5rem}

/* freeform */
.pad{border-top:1px solid var(--rule);padding-top:1.1rem;margin:0 0 2rem}
.pad h2{font-family:var(--font-heading);font-weight:500;font-size:1.2rem;margin:0 0 .3rem}
.pad p{color:var(--muted);font-size:.88rem;margin:0 0 .4rem}

/* ---------- bottom bar ---------- */
.bar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:var(--surface);border-top:1px solid var(--rule);
  padding-bottom:env(safe-area-inset-bottom,0px);
  box-shadow:var(--bar-shadow);
}
.barrow{
  max-width:44rem;margin:0 auto;display:flex;align-items:center;gap:.5rem;
  padding:.4rem 1.15rem;
}
@media(min-width:700px){ .barrow{padding:.4rem 2rem} }
/* The count opens the contents; the list icon says so. */
.bar .count{display:inline-flex;align-items:center;gap:.4rem;background:transparent;border:0;color:var(--ink);font-weight:600;font-size:1rem;white-space:nowrap;min-height:44px;padding:0 .4rem 0 0}
.bar .count svg{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media(hover:hover){ .bar .count:hover{color:var(--accent)} }
.bar .hint{font-size:.88rem;flex:0 0 auto;display:flex;margin-right:auto}
.bar .hint .jump{white-space:nowrap;background:transparent;border:1px solid var(--ink);border-radius:var(--radius);color:var(--ink);min-height:44px;min-width:44px;padding:0 .8rem}
@media(hover:hover){ .bar .hint .jump:hover{border-color:var(--accent);color:var(--accent)} }
#syncMount > * > button{white-space:nowrap} /* the sync pill only; its panel's text and buttons wrap */
#exportBtn{font-size:.85rem;padding:.4rem .2rem;gap:.25em;white-space:nowrap} /* the gap is the space before "notes" (a flex item drops its leading space) */
.bar .tx2{display:none}
@media(min-width:700px){ .bar .tx2{display:inline} }
/* While typing, the on-screen keyboard takes the bottom of the screen; iOS keeps fixed elements on the layout
   viewport, so the bar would float over the text or stay stranded mid-screen after the keyboard closes. Hide it
   on narrow screens and on any touch-first device (iPad, phone in landscape); it is laid out afresh on blur. */
@media(max-width:699px),(pointer:coarse){ body:has(.wrap textarea:focus) .bar{display:none} }

/* ---------- dialogs: handoff and contents ---------- */
.handoff,.contents{width:min(40rem,calc(100% - 1.5rem));max-height:85vh;max-height:85dvh;overflow:auto;background:var(--surface);color:var(--ink);border:1px solid var(--rule);border-radius:var(--radius);box-shadow:var(--shadow)}
.handoff::backdrop,.contents::backdrop{background:var(--backdrop)}
.handoff{padding:1rem}
.handoff h2{font-family:var(--font-heading);font-size:1.35rem;margin:0}
.handoff p{font-size:.9rem;margin:.7rem 0}
.handoff textarea{display:block;width:100%;height:12rem;resize:vertical;border:1px solid var(--rule);border-radius:var(--radius);background:var(--ground);color:var(--ink);padding:.6rem;font-size:.82rem;line-height:1.5;font-family:inherit}
.handoff label{display:block;margin:.5rem 0;font-size:.83rem}
.handoff .tools{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;margin-top:.7rem}
.contents{padding:0 1rem 1rem}
.contents-head{position:sticky;top:0;z-index:1;background:var(--surface);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--rule)}
.contents-head h2{font-family:var(--font-heading);font-size:1.2rem;margin:0}
.contents-count{color:var(--muted);font-size:.85rem;margin:0 auto 0 .7rem}
.contents h3{margin:1rem 0 0;font-size:.9rem}
.contents ul{list-style:none;margin:0;padding:0}
.toc{display:flex;gap:.5rem;align-items:baseline;width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--rule);color:var(--ink);font-size:.92rem;line-height:1.35;padding:.6rem 0;min-height:44px}
.contents h3 .toc{font-weight:600;border-bottom-color:var(--ink)}
.toc .mark{flex:0 0 1em;color:var(--muted)}
.toc .name{flex:1;min-width:0}
.toc .time{color:var(--muted);font-size:.8rem;font-weight:normal;white-space:nowrap}
@media(hover:hover){ .toc:hover .name{color:var(--accent)} }
.toc[aria-current="true"] .name{font-weight:600;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:.2em}
.contents li[data-state] .name{color:var(--done)}
.contents li[data-state] .time{display:none}

footer{border-top:1px solid var(--rule);padding-top:1.2rem;color:var(--muted);font-size:.84rem;line-height:1.6}

[hidden]{display:none!important}
h1,h2,h3,.metadata,.toc .name,.summary-text{overflow-wrap:anywhere}
.prose{white-space:pre-line;overflow-wrap:anywhere}
.source-links{list-style:none;padding:0;margin:.55rem 0;font-size:.94rem}
.source-links li{overflow-wrap:anywhere}
.jumps{list-style:none;margin:.15rem 0 .35rem;padding:0 0 0 1rem;font-size:.86rem;line-height:1.45}
.jumps li{margin:.4rem 0;padding-left:1.25em;text-indent:-1.25em}
.jumps a{padding:.3rem 0} /* a taller tap target without breaking the line */
.page-hint{color:var(--muted)}
.jumps li::before{content:"\21B3\00a0";content:"\21B3\00a0" / "";color:var(--muted)}

/* audio */
.audio-options{margin:.5rem 0}
.audio-option + .audio-option{margin-top:.9rem}
.audio-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:.3rem .7rem;margin-left:-.5rem}
.audio-option a{overflow-wrap:anywhere}
.audio-option p{margin:.3rem 0;font-size:.85rem}
.audio-description,.audio-warning{color:var(--muted)}
.audio-start{color:var(--accent)}
.audio-link{display:inline-flex;align-items:center;min-height:44px}
.audio-option audio{display:block;flex:1 1 12rem;width:100%;min-width:0;max-width:26rem}
.audio-source{margin-top:.4rem;font-size:.85rem}
.audio-status:empty{margin:0}
#startup-error{white-space:pre-line;overflow-wrap:anywhere}

/* The box's tick is always in the DOM and hidden by colour; forced colours would show it on every box. */
@media(forced-colors:active){
  .box{color:Canvas}
  .item[data-state="done"] > .head .box,.subs > li[data-state="done"] .box{color:CanvasText}
}
@media(prefers-reduced-motion:reduce){ .quiz > summary::after,.chevron{transition:none} }