/* ---------- The Washi layout: one layout for all seven themes (lens/themes.css holds only colours and type) ----------
   Inspired by Japanese mingei and wabi-sabi craft: handmade paper, brushed lines, stamped marks, room to breathe.
   Nothing is ruled with a hard ink line: sections sit on soft paper cards, dividers are brush strokes or soft
   hairlines, corners are round, and labels are plain words rather than small caps. Loaded last, so it overrides the
   earlier field-journal rules in lens.css, primer.css and journey.css. Every colour comes from a theme token. */

:root[data-theme] {
  --font-serif: var(--font-ui);
  --font-sans: var(--font-ui);
  --radius: 22px;
  --radius-sm: 12px;
  --bar-h: 76px;
  /* a tapered brush stroke, used as a mask so it takes any theme colour */
  --brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 14' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 120 3, 240 11, 360 6 S 540 4, 598 7 C 540 8, 380 12, 250 12 S 70 10, 2 9 Z'/%3E%3C/svg%3E");
}
body { font-family: var(--font-ui); background: var(--void); font-synthesis: none; }
#hyphae { opacity: 0.55; }
a { text-underline-offset: 4px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

/* Labels: plain words, not small caps */
.eyebrow, .kicker, .section-title, .part-n, .c-label, .ch-kicker, .pg-k, .frame-k, .ct-pn, .rv-h, .metrics dt, .pr-k, .pr-h,
.pr-like span, .pk-k, .jn-label, .jn-stage-n, .jn-part-n, .sf-cols h2, .knot-who, .knot-ask-k, .site-nav a, .contents-btn, .wordmark, .sc {
  font-variant: normal; text-transform: none; letter-spacing: 0.01em;
}
.ch-kicker, .pk-k, .pr-k, .pr-h, .section-title, .jn-stage-n, .jn-part-n, .sf-cols h2, .eyebrow, .knot-who { font-weight: 700; color: var(--ink-2); }

/* A brushed divider: <hr class="brush"> or any element given the class */
.brush { display: block; height: 12px; border: 0; margin: 0; background: var(--ink); opacity: 0.22; -webkit-mask: var(--brush) center / 100% 100% no-repeat; mask: var(--brush) center / 100% 100% no-repeat; }

/* ---------- The top bar ---------- */
.topbar { border-bottom: 0; background: color-mix(in srgb, var(--void) 97%, transparent); backdrop-filter: none;  /* a filter here would trap the phone pager inside the bar */ padding-top: 12px; padding-bottom: 12px; min-height: var(--bar-h); box-sizing: border-box; }
.brand { color: var(--ink); gap: 10px; }
.brand .clew { flex: none; }
.wordmark { font-family: var(--font-ui); font-weight: 900; font-size: 21px; letter-spacing: 0.01em; }
/* The site's places: plain words. The page you're on is darker and carries a short hand-brushed stroke,
   as in the design; no pills, no boxes. */
.site-nav { border-left: 0; padding-left: 8px; gap: 2px; }
.site-nav a, .contents-btn { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border: 0; border-radius: 0;
  background: none; color: var(--ink-2); font-family: var(--font-ui); font-size: 16.5px; font-weight: 500; text-decoration: none; letter-spacing: 0.01em; box-shadow: none; }
.site-nav a:hover, .contents-btn:hover { color: var(--ink); background: none; border: 0; }
.site-nav a[aria-current="page"] { color: var(--ink); font-weight: 700; background: none; box-shadow: none; border: 0; }
.site-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 8px; right: 6px; bottom: 5px; height: 7px; background: var(--accent-3);
  transform: rotate(-1.5deg); -webkit-mask: var(--brush) center / 100% 100% no-repeat; mask: var(--brush) center / 100% 100% no-repeat; }
.contents-btn { gap: 8px; }
.contents-btn .cb-at { font-style: normal; font-family: var(--font-ui); font-size: 14px; color: var(--ink-3); }
/* Turning pages lives at the foot of each page (and on the arrow keys); the top bar keeps only Contents. Phones keep a bottom bar. */
@media (min-width: 641px) { .topbar .pager #prev, .topbar .pager #next { display: none; } }
.icon-btn { border: 1.5px solid transparent; border-radius: 999px; font-family: var(--font-ui); color: var(--ink-2); min-height: 40px; }
.icon-btn:hover:not(:disabled) { background: var(--surface); border-color: var(--edge); color: var(--ink); }
.tools { border-left: 0; padding-left: 0; gap: 8px; }
.progress span { background: var(--accent-3); height: 2px; }
.ask-btn, .account-btn { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px 0 5px; border: 1.5px solid var(--edge); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.ask-btn img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.ask-btn[aria-expanded="true"] { background: var(--accent-tint); border: 2px solid var(--accent); }
.account-btn { padding: 0 12px 0 5px; gap: 8px; }
.account-btn[aria-expanded="true"] { border: 2px solid var(--accent); background: var(--accent-tint); }
.account-btn:not(:has(.acct-av)) { padding: 0 16px; }
.acct-av { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--accent-3-tint); color: var(--accent-3); font-weight: 900; }
.acct-av-lg { width: 48px; height: 48px; font-size: 20px; }
.acct-av-xl { width: 76px; height: 76px; font-size: 32px; flex: none; }

/* ---------- The account menu and the theme picker ---------- */
.account-menu { position: fixed; z-index: 30; top: calc(var(--bar-h) + 6px); right: clamp(12px, 3vw, 40px); width: min(620px, calc(100vw - 24px)); max-height: calc(100vh - var(--bar-h) - 24px); overflow: auto; box-sizing: border-box;
  padding: 16px; border-radius: 28px 24px 30px 22px; background: var(--surface); box-shadow: var(--shadow), 0 0 0 1px var(--edge); display: flex; flex-direction: column; gap: 14px; }
.account-menu[hidden] { display: none; }
.am-head { display: flex; gap: 12px; align-items: center; padding: 2px 4px; }
.am-who { flex-grow: 1; }
.am-name { margin: 0; font-size: 18px; font-weight: 900; }
.am-sub { margin: 0; font-size: 15px; color: var(--ink-3); }
.am-pill { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--void); color: var(--ink); text-decoration: none; font-weight: 700; }
.am-pill:hover { background: var(--accent-tint); }
.am-signout { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: 16px; font-weight: 700; color: var(--ink); cursor: pointer; }
.am-signout:hover { background: var(--void); }
.tp-grid { margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tp-legend { padding: 0 4px 8px; font-size: 17px; font-weight: 900; }
.tp-tile { position: relative; display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 18px; border: 1.5px solid var(--edge); background: var(--surface); cursor: pointer; }
.tp-tile input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tp-tile:has(input:checked) { border: 3px solid var(--accent); background: var(--accent-tint); padding: 8.5px 10.5px; }
.tp-tile:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
.tp-prev { position: relative; flex: none; display: block; width: 96px; height: 64px; border-radius: 12px; box-shadow: 0 0 0 1px var(--edge); overflow: hidden; }
.tp-paper { position: absolute; left: 9px; top: 9px; right: 26px; bottom: 9px; border-radius: 8px; padding: 6px 8px; box-sizing: border-box; font-size: 20px; font-weight: 700; line-height: 1; }
.tp-dot { position: absolute; right: 7px; width: 11px; height: 11px; border-radius: 50%; }
.tp-dot:nth-of-type(2) { top: 11px; } .tp-dot:nth-of-type(3) { top: 27px; } .tp-dot:nth-of-type(4) { top: 43px; }
.tp-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tp-name { font-size: 17px; font-weight: 900; }
.tp-kanji { font-family: "Zen Maru Gothic", sans-serif; font-weight: 500; color: var(--ink-2); }
.tp-meaning { font-size: 14px; color: var(--ink-3); }
.tp-kind { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.tp-tile:has(input:checked) .tp-kind::after { content: " · chosen"; color: var(--accent); }
.tp-dark { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border-radius: 16px; background: var(--void); font-size: 16px; }
.tp-dark span { flex-grow: 1; }
.tp-dark select, .ac-field input { min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--edge); background: var(--surface-raised); color: var(--ink); font: inherit; font-size: 16px; }

/* ---------- Profile and sign in ---------- */
.ac-page { display: flex; flex-direction: column; gap: 18px; max-width: 880px; }
.ac-narrow { max-width: 560px; }
.ac-card { padding: 22px 24px; border-radius: 26px 22px 28px 20px; background: var(--surface); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; }
.ac-card h3 { margin: 0; font-size: 22px; font-weight: 900; }
.ac-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.ac-field { display: flex; flex-direction: column; gap: 6px; flex-grow: 1; font-weight: 700; }
.ac-field input { min-height: 50px; }
.ac-pw { display: flex; gap: 8px; }
.ac-pw input { flex-grow: 1; min-width: 0; }
.ac-btn { min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.ac-btn-quiet { background: var(--surface); color: var(--ink); border: 1.5px solid var(--edge); }
.ac-btn:disabled { opacity: 0.5; cursor: default; }
.ac-link { min-height: 44px; padding: 0 4px; border: 0; background: none; font: inherit; font-size: 16px; font-weight: 700; color: var(--ink); text-decoration: underline; cursor: pointer; }
.ac-danger { color: var(--tension); }
.ac-big { margin: 0; font-size: 26px; font-weight: 900; }
.ac-note { margin: 0; font-size: 15px; color: var(--ink-2); }
.ac-notice { margin: 0; padding: 14px 18px; border-radius: 18px; background: var(--accent-3-tint); color: var(--ink); font-size: 16px; }
.ac-err { margin: -4px 0 0; color: var(--tension); font-weight: 700; }
.ac-code { font-family: var(--font-mono); font-size: 28px; letter-spacing: 0.22em; text-align: center; }
.ac-promise ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 16px; }
.jn-lock, .pk-lock { color: var(--ink-3); font-weight: 400; }
.ac-radios { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 4px; }
.ac-radios legend { font-weight: 700; margin-bottom: 4px; }
.ac-radios label { display: flex; gap: 10px; align-items: center; min-height: 44px; }
.ac-radios input, .ac-form input[type="radio"] { width: 20px; height: 20px; accent-color: var(--accent); }

/* ---------- Ariadne's panel ---------- */
/* --ap-head and --ap-foot are the header's and the foot's heights, published for the guide, which sizes her portrait
   from what the panel leaves over. Keep them true when those parts change. */
.ariadne-panel { --ap-head: 75px; --ap-foot: 128px; position: fixed; z-index: 20; top: calc(var(--bar-h) + 8px); right: 16px; bottom: 16px; width: 390px; box-sizing: border-box; display: flex; flex-direction: column;
  border-radius: 28px 24px 30px 22px; background: var(--surface); box-shadow: var(--shadow), 0 0 0 1px var(--hairline); overflow: hidden; }
.ariadne-panel[hidden] { display: none; }
.ap-head { flex: none; display: flex; gap: 12px; align-items: center; padding: 16px 16px 12px 20px; }
.ap-head img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--accent-3-tint); }
.ap-who { flex-grow: 1; min-width: 0; }
.ap-who h2 { margin: 0; font-size: 20px; font-weight: 900; }
.ap-who h2:focus { outline: none; }
.ap-ctx { margin: 0; font-size: 14px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-close { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--edge); background: var(--surface); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.ap-log { flex: 1 1 auto; min-height: 110px; overflow-y: auto; padding: 12px 20px; display: flex; flex-direction: column; gap: 12px; border-top: 0; }
.ap-log::before { content: ""; display: block; flex: none; height: 12px; background: var(--ink); opacity: 0.18; -webkit-mask: var(--brush) center / 100% 100% no-repeat; mask: var(--brush) center / 100% 100% no-repeat; }
.ap-msg { margin: 0; max-width: 94%; padding: 12px 16px; font-size: 16px; line-height: 1.6; }
.ap-her { align-self: flex-start; background: var(--void); border-radius: 20px 20px 20px 6px; }
.ap-me { align-self: flex-end; background: var(--accent); color: var(--on-accent); border-radius: 20px 20px 6px 20px; }
/* The guide fills #ariadne-stage with her face and voice, between the header and the conversation, and hides the
   small portrait so she isn't shown twice. Empty, it takes no room. */
#ariadne-stage:empty { display: none; }
#ariadne-stage { flex: none; }  /* the guide sizes the stage; the log takes what is left and scrolls */
:root[data-guide="on"] .ap-head img { display: none; }
/* The foot stays short so her face and the conversation get the panel: one row of questions that slides sideways,
   then the box. */
.ap-foot { flex: none; padding: 8px 0 14px; display: flex; flex-direction: column; gap: 8px; }
.ap-chips { display: flex; gap: 8px; padding: 2px 20px; overflow-x: auto; scrollbar-width: thin; scroll-snap-type: x proximity; }
.ap-chips::after { content: ""; flex: none; width: 12px; }
.ap-chips:empty { display: none; }
.ap-chip { flex: none; scroll-snap-align: start; white-space: nowrap; min-height: 44px; padding: 6px 14px; border: 0; border-radius: 999px; background: var(--accent-tint); color: var(--accent); font: inherit; font-size: 15px; font-weight: 700; text-align: left; cursor: pointer; }
.ap-chip:hover { box-shadow: inset 0 0 0 2px var(--accent); }
.ap-form { padding: 0 20px; }
.ap-row { display: flex; gap: 8px; }
.ap-row input { flex-grow: 1; min-width: 0; height: 50px; box-sizing: border-box; padding: 0 18px; border: 1.5px solid var(--edge); border-radius: 999px; background: var(--surface-raised); color: var(--ink); font: inherit; font-size: 16px; }
.ap-row input::placeholder { color: var(--ink-3); opacity: 1; }  /* the browser's grey is under 4.5:1 on dark themes */
.ap-row button { flex: none; width: 50px; height: 50px; border: 0; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; cursor: pointer; }
/* Room beside the page for the panel, where there is room; a drawer over it where there isn't. The page's layouts
   answer to main's width (a container, see lens.css), so a pushed page reflows like a narrower window would. */
main { container-type: inline-size; container-name: page; }
@media (min-width: 1000px) {
  body.ap-open main, body.ap-open .chapter-foot, body.ap-open .site-foot .sf-inner { margin-right: 410px; margin-left: max(clamp(16px, 4vw, 40px), calc((100vw - 410px - 1180px) / 2)); }
}
@media (max-width: 999px) { .ariadne-panel { width: min(390px, calc(100vw - 32px)); } }
@media (max-width: 640px) {
  /* The sheet may use all the room between the top bar and the pager */
  .ariadne-panel { top: auto; left: 8px; right: 8px; bottom: calc(64px + env(safe-area-inset-bottom)); width: auto; max-height: calc(100dvh - var(--bar-h) - 80px - env(safe-area-inset-bottom)); border-radius: 24px 24px 18px 18px; }
  .site-nav { display: none; }  /* no room beside Ariadne and the account; the contents sheet and the footer carry them */
  .ask-label, .acct-name, .acct-chev { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ask-btn, .account-btn { padding: 0 4px; height: 44px; }
  .topbar .pager { background: color-mix(in srgb, var(--surface) 97%, transparent); border-top: 0; box-shadow: 0 -8px 24px -18px rgba(0,0,0,0.5); }
}

/* ---------- Home ---------- */
.cover { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: center; max-width: none; margin: 0; padding: 48px 0 40px; text-align: left; }
.cover .lede { margin-left: 0; font-size: 20px; line-height: 1.75; color: var(--ink-2); max-width: 32em; }
.cover .lede::first-letter { float: none; font-size: inherit; padding: 0; color: inherit; font-weight: inherit; }
.cover h1 { font-weight: 900; font-size: clamp(44px, 6vw, 76px); line-height: 1.1; letter-spacing: 0; }
.cover h1 em { font-style: normal; color: var(--accent); background: linear-gradient(transparent, transparent); position: relative; }
.cover h1 em::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 12px; background: var(--accent-3); -webkit-mask: var(--brush) center / 100% 100% no-repeat; mask: var(--brush) center / 100% 100% no-repeat; }
.cover-kicker { margin: 0 0 18px; font-size: 17px; font-weight: 700; color: var(--accent-3); }
.begin-box { text-align: left; margin-top: 28px; }
.begin, .begin-box .begin, .begin.jn-go { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 28px; border: 0; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-family: var(--font-ui); font-style: normal; font-size: 18px; font-weight: 900; text-decoration: none; box-shadow: 0 10px 22px -14px rgba(0,0,0,0.55); }
.begin span, .begin-box .begin span, .begin.jn-go span { color: inherit; }
.begin:hover, .begin-box .begin:hover { background: var(--accent); filter: brightness(1.08); }
.begin-sub, .begin-alt { font-family: var(--font-ui); }
.begin-alt a { color: var(--ink); font-weight: 700; text-decoration-color: var(--accent-3); }
.cover-side { position: relative; display: flex; flex-direction: column; gap: 18px; }
.cs-card { display: block; margin: 0; padding: 20px 22px; border: 0; border-radius: 26px 22px 28px 20px; background: var(--surface); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; max-width: none; }
.cs-dial { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 300px; transform: rotate(-2deg); }
.cs-dial .cs-k { align-self: flex-start; font-size: 15px; font-weight: 700; color: var(--accent); }
.cs-dial .cs-t { font-size: 18px; font-weight: 900; }
.cs-dial:hover .cs-t { text-decoration: underline; text-decoration-color: var(--accent-3); }
.cover-side .knot.cs-card { align-self: flex-end; width: min(360px, 100%); transform: rotate(1.2deg); }
.cover-side .knot.cs-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); }
.knot-play { border-radius: 999px; border: 1.5px solid var(--edge); background: var(--surface); color: var(--ink); font-family: var(--font-ui); font-weight: 700; min-height: 40px; padding: 0 14px; }
.aims ol { border: 0; gap: 18px; }
.aims li, .aims li + li { padding: 20px 22px; border: 0; border-radius: 24px 20px 26px 18px; background: var(--surface); box-shadow: var(--shadow); }
.aims h2 { font-size: 20px; font-weight: 900; text-transform: none; font-variant: normal; letter-spacing: 0; }
.aims h2::before { content: counter(aim) ""; display: inline-grid; place-items: center; min-width: 30px; height: 30px; margin-right: 10px; border-radius: 9px 7px 10px 8px; background: var(--accent); color: var(--on-accent); font-style: normal; font-size: 15px; font-weight: 900; }
.aims p { font-size: 16px; max-width: none; }
.jn-brief { border-top: 0; padding-top: 8px; }
.jn-brief ol { gap: 18px; }
.jn-brief li + li { border: 0; }
.jn-brief ol a, .jn-brief ol li:first-child a { padding: 20px 22px; border-radius: 24px 20px 26px 18px; background: var(--surface); box-shadow: var(--shadow); }
.jn-bn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px 8px 11px 9px; background: var(--accent-3); color: var(--on-accent-3); font-size: 17px; font-weight: 900; }
.jn-bt { font-family: var(--font-ui); font-weight: 900; font-size: 21px; }
.jn-bx { font-family: var(--font-ui); }
@container page (max-width: 828px) {
  .cover { grid-template-columns: minmax(0, 1fr); }
  .cs-dial, .cover-side .knot.cs-card { transform: none; width: auto; align-self: stretch; }
}

/* ---------- Everything that used to be ruled in ink becomes soft ---------- */
.panel, .quantum-panel, .whatif-panel { background: var(--surface); border: 0; border-radius: 26px 22px 28px 20px; box-shadow: var(--shadow); padding: 24px 26px; margin-top: 28px; }
.grid-two > .panel, .grid-main > .panel { margin-top: 0; }
.chapter-head { border-bottom: 0; padding-bottom: 12px; }
.chapter-head::after { content: ""; display: block; width: min(560px, 80%); height: 12px; margin: 14px auto 0; background: var(--ink); opacity: 0.22; -webkit-mask: var(--brush) center / 100% 100% no-repeat; mask: var(--brush) center / 100% 100% no-repeat; }
.ch-num { color: var(--accent-3); font-weight: 900; }
.ch-num::before, .ch-num::after { color: var(--edge); }
.ch-title { font-weight: 900; }
.ch-q { font-style: normal; color: var(--ink-2); }
.ch-syn button { font-style: normal; }
.primer { border-bottom: 0; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); padding: 0 22px; margin-top: 12px; }
.metrics, table.rules, .pk-dict { border-top: 0; border-bottom: 0; }
.metrics { gap: 12px; }
.metrics > div { background: var(--void); border-radius: 16px; padding: 12px 14px; border: 0; }
.rules th, .pk-dict thead th, .pk-tally thead th, .mm-cues th { border-bottom: 1.5px solid var(--hairline); font-family: var(--font-ui); font-variant: normal; text-transform: none; letter-spacing: 0; font-weight: 700; }
.chip, .seg button, .resolution button { border-radius: 999px; border: 1.5px solid var(--edge); font-family: var(--font-ui); }
.seg { gap: 6px; }
.seg button, .seg button:first-child, .seg button:last-child { border-radius: 999px; margin-left: 0; }
.chip[aria-pressed="true"], .seg button[aria-selected="true"], .resolution button[aria-pressed="true"], .chip.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.findings li { border-radius: 14px; }

/* Primer stations and pages */
.pk-cols, .pk-map, .pk-refs, .pk-do, .pk-notice, .pk-two, .pk-check, .pk-where, .pk-phrases, .pk-myths, .jn-stage, .jn-refcards, .aims ol, .part, .carry, .glossary, .pr-tail { border-top: 0; border-bottom: 0; }
.pk-do, .pk-check, .pk-where, .pk-two, .pk-notice { background: var(--surface); border-radius: 26px 22px 28px 20px; box-shadow: var(--shadow); padding: 22px 24px; margin-top: 22px; }
.pk-notice { padding-top: 6px; padding-bottom: 6px; }
.pk-box, .pk-act > div { border-radius: 18px; }
.pk-switch, .pk-gate, .pk-cbox, .pk-heatwrap { border-color: var(--edge); border-radius: 12px; }
.pk-end { border-top: 0; background: var(--surface); border-radius: 24px; box-shadow: var(--shadow); padding: 16px 20px; }
.pk-done-btn { border-radius: 999px; border: 2px solid var(--accent-3); color: var(--ink); background: var(--surface); font-family: var(--font-ui); font-weight: 700; min-height: 48px; }
.pk-done-btn[aria-pressed="true"] { background: var(--accent-3); border-color: var(--accent-3); color: var(--on-accent-3); }
.pk-opt { border-radius: 999px; }
.pk-strip a { border-radius: 999px; border-bottom: 0; }
.pk-strip a[aria-current="page"] { background: var(--accent); color: var(--on-accent); }
.pk-dict { border-radius: 16px; overflow: hidden; }
.pk-stop { border-radius: 18px; }

/* Ariadne's knots on the page: soft paper notes with her portrait */
.knot { border-left: 0; border-radius: 24px 20px 26px 18px; background: var(--surface); box-shadow: var(--shadow); padding: 16px 20px; gap: 14px; }
.knot .portrait { box-shadow: 0 0 0 3px var(--accent-3-tint); border: 0; }
.knot-say { font-family: var(--font-ui); font-size: 17px; line-height: 1.65; }
.knot-reflect { border-left: 0; }
.knot-reflect .knot-say { font-style: normal; }
.knot-q { border-radius: 999px; border: 0; background: var(--accent-tint); color: var(--accent); font-family: var(--font-ui); font-style: normal; font-weight: 700; font-size: 15px; min-height: 40px; }
.knot-q[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.knot-reply { font-family: var(--font-ui); }
.knot-reply::before { font-variant: normal; text-transform: none; font-weight: 700; }

/* The path: stamps on a thread */
.jn-stage { background: var(--surface); border-radius: 26px 22px 28px 20px; box-shadow: var(--shadow); padding: 22px 24px; }
.jn-stage-head h3, .jn-part h4, .jn-t { font-family: var(--font-ui); font-style: normal; font-weight: 900; }
.jn-thread::before { background: var(--hairline); }
.jn-stop.is-done .jn-knot { background: var(--accent-3); border-color: var(--accent-3); border-radius: 48% 52% 50% 46%; }
.jn-stop.is-done .jn-knot::after { color: var(--on-accent-3); }
.jn-stop.is-done::before { background: var(--accent-3); }
.jn-stop.is-next .jn-knot { border: 3px solid var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); }
.jn-stop.is-next .jn-t { color: var(--accent); }
.jn-stop:not(.is-done):not(.is-next) .jn-knot { border-color: var(--ring); }
.jn-peek summary, .jn-m, .jn-i, .jn-label { font-family: var(--font-ui); font-style: normal; }
.jn-refcards a { border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); padding: 16px 20px; }
.jn-refcards { gap: 16px; }
.jn-refcards a + a { border-left: 0; padding-left: 20px; }
.jn-tools { border-bottom: 0; background: var(--void); }
.jn-filter input { border-radius: 999px; border: 1.5px solid var(--edge); background: var(--surface-raised); }
.gloss > div { border-bottom: 1.5px solid var(--hairline); }
.gloss dt { font-style: normal; font-weight: 900; color: var(--accent); }
.jn-principles { border-top: 0; }
.jn-principles li { border-bottom: 1.5px solid var(--hairline); }
.jn-principles li::before { font-style: normal; font-weight: 900; color: var(--accent-3); }
.jn-sec > p, .jn-sec h3 { font-family: var(--font-ui); }
.jn-about > .jn-sec:first-child > p:first-of-type::first-letter { float: none; font-size: inherit; padding: 0; color: inherit; }

/* The end of a chapter, the pager, the footer, the contents */
.chapter-foot { border-top: 0; }
.ch-end { border-bottom: 0; }
.pg { border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); padding: 16px 20px; }
.pg-t { font-style: normal; font-weight: 900; font-size: 20px; }
.site-foot { border-top: 0; background: var(--substrate); border-radius: 36px 36px 0 0; margin-top: 40px; }
.sf-next { font-family: var(--font-ui); font-weight: 700; color: var(--accent); }
.sf-cols a { color: var(--ink-2); }
.jn-bar > span, .progress span { background: var(--accent-3); }
.jn-bar { height: 6px; border-radius: 3px; background: var(--hairline); overflow: hidden; }
.contents-sheet { border-left: 0; border-radius: 28px 0 0 28px; background: var(--surface); box-shadow: var(--shadow); }
.sheet-head { border-bottom: 0; background: var(--surface); }
.sheet-head h2 { font-variant: normal; text-transform: none; letter-spacing: 0; font-weight: 900; }
.ct-part h3 { font-style: normal; }
.ct-site a { font-variant: normal; text-transform: none; font-weight: 700; }
.carry-frame { border: 0; background: var(--surface); border-radius: 24px; box-shadow: var(--shadow); padding: 20px; }
#track-view.is-carry #carry { border-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .cs-dial, .cover-side .knot.cs-card { transform: none; }
}

/* The records behind a page: a quiet link under the chapter opener (the machine layer; key m) */
.records-link { margin: 6px 0 0; text-align: right; }
.records-link:has(button:disabled) { display: none; }
.records-link button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 6px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 15px; font-weight: 700; color: var(--ink-2); cursor: pointer; }
.records-link .rl-t { text-decoration: underline; text-decoration-color: var(--edge); text-underline-offset: 5px; }
.records-link button:hover { color: var(--ink); }
.records-link button:hover .rl-t { text-decoration-color: var(--accent-3); }
.records-link .rl-mark { font-family: var(--font-mono); font-weight: 400; color: var(--ink-3); }

/* The conversation */
.ap-mark { align-self: center; max-width: none; padding: 2px 10px; font-size: 13px; font-weight: 700; color: var(--ink-3); background: none; }
.ap-her a { color: var(--accent); }
.ap-src { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ap-src a { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; background: var(--accent-tint); color: var(--accent); font-size: 14px; font-weight: 700; text-decoration: none; }
.ap-src a::before { content: "From: "; font-weight: 500; margin-right: 3px; }
.ap-src a:hover { box-shadow: inset 0 0 0 2px var(--accent); }
.ap-fine { display: block; margin-top: 8px; font-size: 13px; color: var(--ink-3); }
.ap-typing { letter-spacing: 3px; }
.ap-row button:disabled { opacity: 0.45; cursor: default; }

.site-nav a:focus-visible, .contents-btn:focus-visible { border-radius: 10px; }

/* ---------- Navigation (Chris, 2026-10-05): the way around on the left, in reading order; Ariadne at the lower right ----------
   Top bar, left to right: Mycelium (home) · Contents (jump anywhere) · Your path · Lessons · Use cases · Words · About,
   then where you are in a long page, and the account. On wide screens the bar is a row, so the order in the page is the
   order on screen. On phones the Contents and its arrows stay at the foot of the screen, as before. */
@media (min-width: 641px) {
  .topbar { display: flex; align-items: center; gap: 6px; }
  .topbar .brand { margin-right: 10px; flex: none; }
  .topbar .pager { display: none; }  /* its arrows and links are for phones; the top links carry the way around here */
  .topbar .site-nav { display: flex; flex: none; }
  .topbar .where { flex: 1 1 0; min-width: 0; text-align: right; }
  .topbar .tools { flex: none; margin-left: auto; }
}
@media (min-width: 641px) and (max-width: 900px) { .topbar .site-nav { gap: 0; padding-left: 0; } .topbar .site-nav a { padding: 0 8px; font-size: 15px; } .topbar .wordmark { display: none; } }
/* Phones: the bar at the foot of the screen holds the arrows and the two lists */
.pager-link { display: none; }
@media (max-width: 640px) {
  .topbar .pager .pager-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-family: var(--font-ui); font-size: 16px; font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
}

/* ---------- Links look like links (WCAG 2.2 AA; Chris, 2026-10-05: "it's hard to see the links") ----------
   1.4.1 Use of Color: a link is never told apart by colour alone, so every link in a list or in text is underlined.
   1.4.3 Contrast: link text uses --accent or --ink, which tests/test_themes.py holds to 4.5:1 on every theme's grounds.
   2.4.7 / 2.4.13 Focus: the 3px outline above; 2.5.8 Target size: rows and top links are at least 44px tall. */
.site-nav a { color: var(--ink); font-weight: 600; }
/* The link for where you are keeps the same weight as the others, so no word in the bar ever shifts when the page
   changes (Chris, 2026-10-05); the brushed underline alone marks it. */
.site-nav a[aria-current="page"] { font-weight: 600; }
.site-nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.jn-stop > a .jn-t, .pk-stop .pk-stop-t, .jn-brief ol a .jn-bt, .pk-stop.is-done .pk-stop-t, .jn-stop.is-next .jn-t {
  color: var(--accent); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.jn-stop > a:hover .jn-t, .jn-stop > a:focus-visible .jn-t, .pk-stop:hover .pk-stop-t, .pk-stop:focus-visible .pk-stop-t,
.jn-brief ol a:hover .jn-bt, .jn-brief ol a:focus-visible .jn-bt { color: var(--accent); text-decoration-thickness: 3px; }
.jn-stop > a, .pk-stop, .jn-brief ol a { text-decoration: none; }  /* the row is the link; its title carries the underline */
main p a, main dd a, .jn-refs a, .begin-alt a, .jn-brief-more a, .pk-small a, .site-foot a {
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
main p a:hover, .jn-refs a:hover, .begin-alt a:hover, .site-foot a:hover { text-decoration-thickness: 3px; }

.ask-btn { position: fixed; z-index: 19; right: clamp(14px, 2.4vw, 28px); bottom: calc(clamp(14px, 2.4vw, 28px) + env(safe-area-inset-bottom, 0px)); height: 54px; padding: 0 20px 0 6px; box-shadow: 0 10px 28px -12px var(--shadow, rgba(0, 0, 0, 0.45)); background: var(--surface); }
.ask-btn img { width: 42px; height: 42px; }
.ask-btn .ask-label { font-weight: 700; }
body.ap-open .ask-btn { display: none; }  /* her panel is open in that corner */
@media (max-width: 640px) {
  .ask-btn { bottom: calc(68px + env(safe-area-inset-bottom, 0px)); right: 12px; height: 52px; padding: 0 5px; }  /* above the pager */
}