/* The book page's styles (index.php), shared with the Workshop (workshop.php). */
:root{--ink:#1b1714;--dim:#6b615a;--line:#d8cfc4;--bg:#f7f3ec;--accent:#7a2e1e}
@media(prefers-color-scheme:dark){:root{--ink:#e9e2d8;--dim:#a3998e;--line:#3a332c;--bg:#17140f;--accent:#d98a6a}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:18px/1.7 Georgia,'Iowan Old Style',serif}
.wrap{max-width:38rem;margin:0 auto;padding:3rem 16px 0}
h1{font-size:1.8rem;margin:0 0 .2rem}h1[contenteditable]:focus,h2[contenteditable]:focus{outline:2px dashed var(--dim);outline-offset:4px}
.sub{color:var(--dim);margin:0 0 2.5rem}
/* The jacket: what the book is, for someone deciding whether to read it. Set apart
   from the prose that follows, so it is never mistaken for the book's first page. */
.blurb{margin:-1rem 0 3rem;padding:1.1rem 1.3rem;border-left:3px solid var(--accent);
  background:rgba(125,110,90,.07);border-radius:0 4px 4px 0;font-size:1rem;line-height:1.65}
.blurb[contenteditable]:empty::before{content:'Write the jacket description: one paragraph that makes a stranger want to read this book.';
  color:var(--dim);font-style:italic}
.blurb[contenteditable]:focus{outline:2px dashed var(--dim);outline-offset:4px}
.chapter{margin:3.5rem 0}
.chapter h2{font-size:1.25rem;margin:0 0 .2rem}
.chapter .meta{color:var(--dim);font-size:.85rem;margin:0 0 1.5rem;letter-spacing:.04em;text-transform:uppercase}
.beat{position:relative;margin:0 0 1.6rem}
.beat p{margin:0 0 1rem;white-space:pre-wrap}
.unwritten{color:var(--dim);font-style:italic}
/* A beat the author has not narrated yet, shown to READERS so the shape of the
   book is legible before it is finished. Deliberately quiet: it marks the arc
   without competing with prose. */
.tocome{color:var(--dim);font-style:italic;margin:0 0 1.6rem;padding-left:1rem;
  border-left:2px solid var(--line)}
/* Every beat that is not narrated prose carries a visible label, so a brief or a
   teaser is never mistaken for the book itself (Bart, 2026-09-24). Text, not colour
   alone, says what it is. */
.beat-tag{display:inline-block;font:600 .66rem/1 system-ui,-apple-system,sans-serif;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);border:1px solid var(--line);border-radius:3px;
  padding:.28rem .45rem;margin:0 0 .45rem}
.chapter .progress{font:600 .7rem/1.6 system-ui,sans-serif;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dim)}
.tools{display:flex;flex-direction:column;gap:.65rem;margin:.9rem 0 .3rem}
details.margin{margin:-.6rem 0 1.4rem}
details.margin>summary{list-style:none;cursor:pointer;color:var(--dim);font-size:.8rem;
  letter-spacing:.2em;padding:0;user-select:none;width:2.5rem}
details.margin>summary::-webkit-details-marker{display:none}
details.margin>summary:hover{color:var(--accent)}
details.margin[open]>summary{color:var(--dim)}
details.margin .dot{display:inline-block;width:.4rem;height:.4rem;border-radius:50%;
  background:var(--accent);vertical-align:.1rem;margin-left:.15rem}
.panel{border-left:2px solid var(--line);padding:.5rem 0 .6rem 1rem;margin:.3rem 0 0}
/* The panel's head: which passage, which version, and its history. */
.ph{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin:0 0 .45rem}
.ph-id{font:600 .7rem/1.4 system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
.ph-v{font-weight:400}
button.link{border:0;background:none;padding:0;color:var(--accent);font-size:.78rem;
  text-decoration:underline;text-underline-offset:2px;cursor:pointer}
button.link:hover{background:none;text-decoration-thickness:2px}
/* The choice, then the housekeeping. */
.tools .row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.tools .btn{padding:.38rem .95rem;font-size:.85rem}
.tools .or{color:var(--dim);font:italic .8rem system-ui,sans-serif;margin:0 .1rem}
/* The words above the rule: the choice, then its quiet housekeeping. The passage's
   picture below it, drawn like the chapter's Make audio (it makes something, and costs). */
.tools .quiet{gap:.4rem 1.4rem;margin-top:-.2rem}
.tools .media{padding-top:.7rem;border-top:1px solid var(--line)}
/* The media family: a passage's Illustration and a chapter's Read aloud / Listen, after
   Lifspel's .media-btn. Quiet (dim) until the thing exists; the accent once it does;
   redo and remove joined on as icons. No cost is ever shown on these (brand §9). */
.mgroup{display:inline-flex;align-items:stretch}
.mbtn{display:inline-flex;align-items:center;gap:.4rem;margin:0;padding:.3rem .7rem;border:1px solid var(--line);
  border-radius:0;background:transparent;color:var(--dim);font:500 .8rem/1.2 system-ui,-apple-system,sans-serif}
.mgroup>.mbtn:first-child{border-radius:4px 0 0 4px}
.mgroup>.mbtn:last-child{border-radius:0 4px 4px 0}
.mgroup>.mbtn:only-child{border-radius:4px}
.mgroup>.mbtn+.mbtn{border-left:0}
.mbtn.on,.mgroup:has(.on)>.mbtn{color:var(--accent);border-color:var(--accent)}
.mbtn.ico{padding:.3rem .5rem}
span.mbtn{cursor:default}
button.mbtn:hover{color:var(--accent);border-color:var(--accent)}
.mbtn[hidden]{display:none}
.mico{flex:none;display:block}
.mgroup.busy .mico{display:none}
/* Busy words are information, not a disabled control: full strength (AA), not faded. */
.mgroup.busy .mbtn[disabled]{opacity:1;cursor:wait}
.mgroup.busy>.mbtn:first-child::before{content:"";flex:none;width:.75rem;height:.75rem;border:2px solid currentColor;
  border-right-color:transparent;border-radius:50%;animation:mspin .9s linear infinite}
.mgroup.busy>.mbtn.ico{display:none}
@keyframes mspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.mgroup.busy>.mbtn:first-child::before{animation:none}}
/* The author's making controls show only with this chapter's Author tools on. */
section.chapter:not(.tools-on) .listen.make,
section.chapter:not(.tools-on) .listen .mbtn.ico{display:none}
section.chapter:not(.tools-on) .listen .mgroup>.mbtn:first-child{border-radius:4px}
button.q{border:0;background:none;padding:.15rem 0;color:var(--dim);font-size:.8rem;cursor:pointer;
  text-decoration:underline;text-decoration-color:var(--field-line,#8f8478);text-underline-offset:2px}
button.q:hover{background:none;color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.note{font-family:system-ui,sans-serif;font-size:.8rem;color:var(--dim);margin:.2rem 0}
.note.warn{color:var(--accent)}
.note.binding{color:inherit;border-left:2px solid var(--accent);padding-left:.6rem}
.note.binding ul{margin:.25rem 0 0;padding-left:1.1rem}
/* The game's own words (GameWords): quoted exactly, marked, credited in the colophon. */
.colophon.gw-credit{margin-top:.6rem;border-top:0;padding-top:0}
sup.gw-mark{color:var(--dim);font-size:.62em;margin-left:.08em;font-family:system-ui,sans-serif}
details.gwords>summary{cursor:pointer;color:var(--dim);font-family:system-ui,sans-serif;font-size:.8rem}
details.gwords[data-set]>summary{color:var(--ink)}
.gwords .gwrow{display:flex;flex-direction:column;gap:.25rem;margin:.5rem 0}
.gwords input,.gwords textarea{font:inherit;font-size:.85rem;font-family:system-ui,sans-serif;padding:.35rem .5rem;
  border:1px solid var(--line);border-radius:4px;background:transparent;color:var(--ink)}
.gwords textarea{resize:vertical;line-height:1.5}
button{font:inherit;font-size:.8rem;font-family:system-ui,sans-serif;padding:.25rem .6rem;border:1px solid var(--line);
  background:transparent;color:var(--accent);border-radius:4px;cursor:pointer}
button:hover{background:rgba(125,110,90,.12)}button[disabled]{opacity:.5;cursor:wait}
textarea.direction{font:inherit;font-size:.85rem;font-family:system-ui,sans-serif;flex:1 1 100%;
  padding:.4rem .55rem;border:1px solid var(--line);border-radius:4px;background:transparent;color:var(--ink);
  resize:vertical;line-height:1.5}
.tools{align-items:stretch}
.tools textarea.direction{flex:none;width:100%}
.working{font-family:system-ui,sans-serif;font-size:.8rem;color:var(--accent)}
.versions{flex:1 1 100%;margin:.5rem 0 0}
.version{display:flex;gap:.5rem;align-items:baseline;flex-wrap:wrap;margin:.35rem 0;
  padding-top:.35rem;border-top:1px dotted var(--line)}
.version .opening{flex:1 1 100%;font-size:.8rem;color:var(--dim);font-style:italic}
.trail ol{margin:.2rem 0 .3rem;padding-left:1.3rem}
.trail li{margin:.1rem 0}
.trail .t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
.trail .t.all{display:inline;-webkit-line-clamp:unset}
mark.changed{background:color-mix(in srgb,var(--accent) 16%,transparent);color:inherit;border-radius:2px;padding:0 .1em}
textarea.editor{width:100%;font:inherit;line-height:1.7;padding:.8rem;border:1px solid var(--line);
  border-radius:4px;background:transparent;color:var(--ink);resize:vertical;min-height:18rem}
.editing{display:flex;gap:.5rem;flex-wrap:wrap;margin:.6rem 0 1.4rem;font-family:system-ui,sans-serif;font-size:.85rem}
.chapter-tools{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:1.5rem 0 0;
  padding-top:.8rem;border-top:1px solid var(--line);font-family:system-ui,sans-serif;font-size:.85rem}
.chapter-tools .status{color:var(--dim);font-size:.8rem}
.chapter-tools .status.locked{font-style:italic}
.chapter-tools .status.sealed{color:var(--accent)}
button.danger{border-color:var(--accent);color:var(--accent)}
/* Panels stay hidden until this chapter's tools are asked for. */
section.chapter:not(.tools-on) details.margin>summary{visibility:hidden}
/* Anything waiting on the author shows, tools on or off (Zoe's review, H2). */
section.chapter:not(.tools-on) details.margin[data-flag]>summary{visibility:visible}
.chapter-head-tools{display:flex;flex-wrap:wrap;gap:.3rem .6rem;align-items:baseline;margin:-.4rem 0 1.2rem;
  font:13px/1.4 system-ui,-apple-system,sans-serif}
.chapter-head-tools button.link{font-size:13px}
.chapter-head-tools .need{color:var(--accent);font-weight:600}
section.chapter.tools-on details.margin>summary{visibility:visible}
.listen{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin:-.8rem 0 1.6rem;
  font:13px/1.4 system-ui,-apple-system,sans-serif;color:var(--dim)}
.listen audio{width:100%;max-width:26rem;height:2.2rem}
.listen-notice{flex:1 1 100%;margin:.1rem 0 0;font-size:.8rem;line-height:1.45;color:var(--dim)}
.err{color:#a33}
/* The one-time confirmation of Skald's conditions, for books connected before them. */
.confirm{max-width:38rem;margin:1.5rem auto 0;padding:1rem 1.2rem;border:1px solid var(--accent);border-radius:6px;
  font:14px/1.5 system-ui,-apple-system,sans-serif;background:var(--bg)}
.confirm>p{margin:0 0 .6rem}
.confirm fieldset{border:0;margin:0;padding:0}
.confirm legend{display:none}
.confirm label.tick{display:flex;gap:.55rem;align-items:flex-start;margin:0 0 .55rem;cursor:pointer}
.confirm label.tick input{margin-top:.25rem;accent-color:var(--accent)}
.confirm .terms{color:var(--dim);font-size:12.5px;margin:.2rem 0 .7rem}
/* Pictures. A kept picture sits above its passage; a proposal is the author's alone. */
.pic{margin:0 0 1.2rem}
.pic img{display:block;width:100%;height:auto;border-radius:3px;border:1px solid var(--line)}
.pic.proposed{outline:2px dashed var(--accent);outline-offset:6px}
.pic figcaption{font:12px/1.4 system-ui,sans-serif;color:var(--dim);margin-top:.45rem}
.head{display:grid;gap:1.4rem;align-items:start;margin-bottom:2.6rem}
.head + .blurb{margin-top:0}
.head.with-cover{grid-template-columns:minmax(0,1fr) 11rem}
.cover{margin:0}
.cover img{display:block;width:100%;height:auto;border-radius:3px;box-shadow:0 8px 24px rgba(0,0,0,.18)}
/* The origin image opens full screen: the button is the picture, nothing more. */
.zoom{display:block;padding:0;border:0;background:none;cursor:zoom-in;width:100%}
.zoom:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.cover .alt .zoom{width:auto}
dialog.full{padding:0;border:0;margin:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;
  background:rgba(12,10,9,.94);display:none;align-items:center;justify-content:center;cursor:zoom-out}
dialog.full[open]{display:flex}
dialog.full::backdrop{background:rgba(12,10,9,.94)}
dialog.full img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;box-shadow:0 20px 60px rgba(0,0,0,.5)}
dialog.full .x{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));right:14px;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.35);color:#fff;font:22px/1 system-ui,sans-serif;cursor:pointer}
.direct{margin-top:.7rem;font:12.5px/1.45 system-ui,-apple-system,sans-serif;color:var(--dim)}
.direct>summary{cursor:pointer;color:var(--accent);font-weight:600}
.direct[data-set]>summary{color:var(--ink)}
.direct p{margin:.5rem 0}
.direct textarea{width:100%;font:13px/1.45 system-ui,sans-serif;color:var(--ink);background:transparent;border:1px solid var(--line);
  border-radius:4px;padding:.45rem .5rem;resize:vertical}
.direct .row{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-top:.4rem}
.direct .count{flex:1;font-size:11.5px}
.direct .look{margin-top:.6rem}
.direct .look>summary{cursor:pointer}
@media(min-width:601px){.head.with-cover{grid-template-columns:minmax(0,1fr) 14rem}}
.cover .ctl{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.6rem}
.cover .wait{margin:.6rem 0 0;font:12px/1.4 system-ui,sans-serif;color:var(--dim)}
.cover .alt{margin-top:.8rem;font:12px/1.4 system-ui,sans-serif;color:var(--dim)}
.cover .alt img{width:5.5rem;margin:.4rem 0}
@media(max-width:600px){.head.with-cover{grid-template-columns:1fr}.cover{max-width:14rem}}
.colophon{margin:4rem 0 0;padding-top:1rem;border-top:1px solid var(--line);color:var(--dim);
  font:13px/1.5 system-ui,-apple-system,sans-serif}
/* The author bar. Owner-only, and visually OUTSIDE the book: sans-serif, small,
   pinned above the page block, so the reading surface stays a reading surface.
   "Story first as a book -- clean" (owner ruling 2026-09-20). */
.authorbar{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line);
  font:13px/1 system-ui,-apple-system,sans-serif}
.authorbar .inner{max-width:var(--site-w,72rem);margin:0 auto;padding:.5rem 16px;display:flex;gap:.75rem;align-items:center}
.authorbar a{color:var(--dim);text-decoration:none;white-space:nowrap}
.authorbar a:hover{color:var(--accent)}
.authorbar select{font:13px/1 system-ui,sans-serif;color:var(--ink);background:var(--bg);
  border:1px solid var(--line);border-radius:4px;padding:.28rem 1.4rem .28rem .45rem;max-width:16rem;
  -webkit-appearance:none;appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 13px) 52%,calc(100% - 8px) 52%;background-size:5px 5px;background-repeat:no-repeat}
.authorbar .spacer{flex:1}
.authorbar .inner{flex-wrap:wrap;row-gap:.4rem}
.authorbar select{min-width:0}
/* The bar's dropdowns open one at a time (script below); the open one sits on top. */
.authorbar .inner>details[open]{z-index:31}
/* Which item a panel belongs to: every bar dropdown shows a caret, and the open one is
   marked (ink, a tinted pill, an accent underline) with the caret turned up (Bart, 2026-09-30). */
.authorbar .inner>details>summary{padding:.25rem .45rem;border-radius:4px 4px 0 0;border-bottom:2px solid transparent}
.authorbar .inner>details>summary::after{content:"";display:inline-block;width:0;height:0;margin-left:.35rem;vertical-align:middle;
  border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;transition:transform .15s}
.authorbar .inner>details>summary:hover{color:var(--accent)}
.authorbar .inner>details[open]>summary{color:var(--ink);font-weight:600;background:rgba(125,110,90,.12);border-bottom-color:var(--accent)}
.authorbar .inner>details[open]>summary::after{transform:rotate(180deg)}
.authorbar .inner>details>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* The bar is sticky, so page scrolling never reaches a panel's bottom: each panel scrolls
   inside itself instead. The Register panel ran ~300px off screen (2026-09-30). */
.authorbar .inner>details>.pp{max-height:calc(100vh - 5rem);max-height:calc(100dvh - 5rem);overflow:auto;overscroll-behavior:contain}
.markrow{border-left:3px solid var(--accent);padding:.5rem .8rem;margin:.6rem 0;font-size:.9rem}
.markrow .rev{white-space:pre-wrap;background:rgba(125,110,90,.07);padding:.6rem .8rem;margin:.5rem 0;font-family:Georgia,serif}
.markrow .why{color:var(--dim)}
/* A player's invite code, shown once. */

.authorbar .sh{display:none}
@media(max-width:600px){.authorbar .sh{display:inline}}
/* ---- The author bar (bar.php): where am I, what mode, what needs me, settings ---- */
.authorbar{transition:transform .2s}
.authorbar .inner{flex-wrap:nowrap}
.authorbar .b-title{color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.authorbar #bookswitch{max-width:16rem}
.authorbar .b-tools{display:inline-flex;gap:.3rem;align-items:center;white-space:nowrap;font:13px/1 system-ui,sans-serif;
  padding:.3rem .55rem;border:1px solid var(--field-line,#8f8478);border-radius:4px;background:transparent;color:var(--ink)}
.authorbar .b-tools .state{font-size:11px;padding:.05rem .35rem;border-radius:3px;background:rgba(125,110,90,.15);color:var(--dim)}
.authorbar .b-tools[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}
.authorbar .b-tools[aria-pressed=true] .state{background:var(--accent);color:var(--bg)}
.authorbar .b-ws{padding:.25rem .45rem;border-radius:4px}
.authorbar .b-ws.on{color:var(--ink);font-weight:600;background:rgba(125,110,90,.12)}
.authorbar .menu{position:relative}
.authorbar .menu>summary{color:var(--dim);cursor:pointer;list-style:none;white-space:nowrap}
.authorbar .menu>summary::-webkit-details-marker{display:none}
.authorbar .menu.needs[data-pending]>summary{color:var(--accent);font-weight:600}
.authorbar .menu>.pp{position:absolute;right:0;top:1.9rem;width:min(26rem,calc(100vw - 32px));background:var(--bg);
  border:1px solid var(--line);border-radius:6px;padding:.8rem;line-height:1.45;box-shadow:0 6px 18px rgba(0,0,0,.12);z-index:30}
.authorbar .pp p{margin:0 0 .5rem}
.authorbar .pp .hint{color:var(--dim);font-size:12px;margin:-.2rem 0 .7rem}
.authorbar .needlist{list-style:none;margin:0;padding:0}
.authorbar .needlist li{border-top:1px solid var(--line)}
.authorbar .needlist li:first-child{border-top:0}
.authorbar .needlist a{display:block;padding:.45rem .1rem;color:var(--ink);white-space:normal}
.authorbar .needlist a:hover{color:var(--accent)}
.authorbar .set{display:flex;flex-direction:column;gap:.25rem;margin:0 0 .3rem;color:var(--ink)}
.authorbar .set.tick{flex-direction:row;align-items:center;gap:.45rem}
.authorbar .set select{max-width:100%}
.authorbar .set a{color:var(--accent)}
.authorbar .usage{margin-top:.6rem;border-top:1px solid var(--line);padding-top:.5rem}
.authorbar .usage>summary{cursor:pointer;color:var(--dim)}
.authorbar .saved{min-height:1em;margin:.4rem 0 0;color:var(--dim);font-size:12px}
.authorbar .saved.bad{color:var(--accent)}
@media(max-width:600px){
  .authorbar .inner{gap:.5rem;padding:.4rem 12px}
  .authorbar .lbl{display:none}
  .authorbar #bookswitch,.authorbar .b-title{display:none}
  .authorbar .menu.needs .lbl{display:none}
  .authorbar .menu.needs>summary::before{content:"\2691"}
    .authorbar .menu{position:static}
  .authorbar .menu>.pp{left:12px;right:12px;width:auto;top:100%}
  .authorbar.tucked{transform:translateY(-110%)}
}
/* Strands: the contents under the description, a way between strands at each one's
   end, and a dock that says where you are once the contents are out of view
   (Bart, 2026-10-01). The sticky author bar must not cover a strand's heading. */
section.chapter{scroll-margin-top:4.5rem}
section.chapter:focus{outline:none}
.strands{margin:0 0 3rem;padding:1rem 1.3rem 1.1rem;border:1px solid var(--line);border-radius:4px}
.strands h2{font:600 .72rem/1.4 system-ui,-apple-system,sans-serif;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);margin:0 0 .6rem}
.strands ol{list-style:none;margin:0;padding:0}
.strands li{margin:.15rem 0}
.strands a{display:flex;gap:.6rem;align-items:baseline;color:var(--ink);text-decoration:none;
  padding:.3rem 0;line-height:1.4}
.strands a:hover .st,.strands a:focus-visible .st{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.strands .sl{flex:0 0 5.2rem;font:600 .72rem/1.9 system-ui,sans-serif;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dim)}
.strand-foot{display:grid;grid-template-columns:1fr auto 1fr;gap:.5rem 1rem;align-items:baseline;
  margin:2.2rem 0 0;padding-top:1rem;border-top:1px solid var(--line);
  font:.85rem/1.45 system-ui,-apple-system,sans-serif}
.strand-foot a{color:var(--accent);text-decoration:none;padding:.35rem 0}
.strand-foot a:hover,.strand-foot a:focus-visible{text-decoration:underline;text-underline-offset:3px}
.strand-foot .next{text-align:right}
.strand-foot .all{color:var(--dim)}
@media(max-width:600px){
  .strand-foot{grid-template-columns:1fr 1fr}
  .strand-foot .all{grid-column:1/-1;grid-row:2;text-align:center}
  .strands .sl{flex-basis:4.6rem}
}
.strand-dock{position:fixed;z-index:15;right:max(16px,env(safe-area-inset-right,0px));
  bottom:calc(16px + env(safe-area-inset-bottom,0px));display:flex;align-items:stretch;
  background:var(--bg);border:1px solid var(--line);border-radius:999px;
  box-shadow:0 4px 14px rgba(0,0,0,.14);font:600 .78rem/1 system-ui,-apple-system,sans-serif}
.strand-dock[hidden]{display:none}
.strand-dock button{border:0;background:none;color:var(--ink);cursor:pointer;min-height:44px}
.strand-dock .sd-step{width:40px;font-size:1.3rem;line-height:1;color:var(--accent)}
.strand-dock .sd-step:first-child{border-radius:999px 0 0 999px}
.strand-dock .sd-step:last-of-type{border-radius:0 999px 999px 0}
.strand-dock .sd-step:disabled{color:var(--line);cursor:default}
.strand-dock .sd-where{padding:0 .5rem;letter-spacing:.08em;text-transform:uppercase;
  border-left:1px solid var(--line);border-right:1px solid var(--line)}
.strand-dock button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.strand-dock .sd-list{position:absolute;right:0;bottom:calc(100% + 8px);margin:0;padding:.4rem 0;
  list-style:none;width:min(22rem,calc(100vw - 32px));max-height:min(60vh,26rem);overflow:auto;
  background:var(--bg);border:1px solid var(--line);border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.16);
  font:400 .9rem/1.4 system-ui,-apple-system,sans-serif}
.strand-dock .sd-list[hidden]{display:none}
.strand-dock .sd-list a{display:block;padding:.55rem 1rem;color:var(--ink);text-decoration:none}
.strand-dock .sd-list a:hover,.strand-dock .sd-list a:focus-visible{background:rgba(125,110,90,.1);outline:none}
.strand-dock .sd-list a[aria-current]{color:var(--accent);font-weight:600}
@media print{.strand-dock,.strand-foot{display:none}}