/* Assembled from shared/css/ by docs/assemble.mjs — edit the part, then run it. */
/* ==============================================================
   TOOLKIT DESIGN SYSTEM — the one stylesheet every page loads.

   This file is one part of shared/css/, joined into toolkit.css by
   docs/assemble.mjs. Edit the part, never toolkit.css. The parts: faces,
   tokens, base (shell, hero, filters), accordion (body text, sheets),
   choice-tags (pick one, appearance), open-item, routes-decisions
   (route card, sub-points, decision, evidence, release notes), shell,
   forms, components, gantt, hover.

   It exists to make long clinical reading comfortable on a phone held at
   arm's length in a surgery, and quick to scan between patients. Every rule
   below serves one of these, and a rule that serves none of them goes:

     Size       Body text is 16px at the default text size, never below 13px
                anywhere. Inputs are 16px so iOS never zooms on focus.
     Measure    Prose stops at about 68 characters a line; deeper levels of
                the accordion nest by a rail and a tint, not by indent, so
                text four levels down still gets most of the screen.
     Leading    1.6 for running text, 1.25 for headings. Space separates
                blocks; rules and boxes only where they carry structure.
     Case       Sentence case everywhere. No UPPERCASE LABELS with wide
                tracking — they are slower to read and shout in the margin.
     Contrast   Ink is near-black on paper and soft white on charcoal, never
                pure on pure (halation). Secondary text is at least 4.5:1.
     Colour     Accents mark state (what is open, what is chosen), never
                decorate. Each theme has its own text-safe set.
     Choice     Light, warm and dark; nine reading faces and five heading
                faces; four text sizes. All in Appearance, applied before
                first paint by boot.js through attributes on <html>.

   Vocabulary (see CLAUDE.md for when to use each):
     .topbar .brand .ver .theme-btn        top bar
     .page .page-inner .ph .search         page, hero, search
     .cat-group .acc-cat .cat-body         level 1: category toggle
     .flat-list                            a list with no category level (home)
     .acc-item .it-ic .it-main .it-ttl .it-sub .it-note .badge   level 2: item row
     .acc-item.tinted                      a tool's card, in its colour
     .tk-node                              a row's wrapper: skips layout off screen
     .item-body .tx-lede .tx-warn                open item: lede + amber banner
     .tx-secs .tx-sec .tx-sec-h .tx-sec-b        level 3: section toggles
     .tr-list .tr .tr-h .tr-b .tr-ref .tr-s      level 4: numbered sub-toggles, who takes it, a second line
     .tx-steps .tx-step  .dec-* .tx-kit-* .ev-*  steps, decision forks, kit, evidence
     .rt .rt-go .go-chip .go-chips               routes onward to another entry or person
     .cbk-*                                      rendered body markdown
     .sheet-ov .sheet                            slide-up sheets
     .tk-choice .ap-*                            a pick-one list; Appearance
     .fpill .empty .total-line .gl-note    filters, footers
     .search-row .tk-filt-btn .tk-filt-on .tk-filt-g   a list's filters, in a sheet (tkFilter)
     .tk-btn .tk-msg .tk-field .tk-input .tk-acts      actions, messages, buttons
     .tkf .tkf-l .tkf-h .tk-ta .tk-sel .tk-opts .tk-chk   form fields (tkForm)
     .tk-grid .tk-gcard .tk-mx                   repeating rows, rating matrices
     .tk-save .tk-state                          autosave status, where an item stands
     .tk-prog .tk-tl-g .tk-row .tk-band          progress, timeline, a banner
     .tk-step .tk-step-t .tk-line                one step to finish inside an open item, a one-line fact
     .tk-doc .tk-emb                             a document, and an original in a sheet
     .tk-wd .tk-wd-tab .tk-wd-li .tk-wd-bu       a real Word document, rendered
     .cbk-tk .tk-ticks                           tick boxes in body text, and where they tick
     .tk-rich .tk-rich-bar .tk-rich-b .tk-rich-ed   a field for writing freely (tkRich)
     .tk-bhead .tk-icbtn .tk-blankbtn .tk-btn.danger   an open body's header row, its icon button, an empty note
     .tk-kv .tk-part                              how to reach someone, a labelled part of an open item
     .tk-figs .tk-fig                             the numbers a tool leads with (a balance)
     .tk-gantt .tk-g-*                            work over time (tkGantt): range, key, scale, rows, bars
     .tk-img                                      a picture inside an open item
     .tk-chat-log .tk-chat-q .tk-chat-a .tk-chat-st .tk-chat-in .tk-chat-row .tk-mem   a conversation, its history and memory
     .tk-chat-say                                       an answer's read-aloud button
     .tk-compose .tk-compose-ta .tk-compose-b .tk-compose-send .tk-compose-files   the question box
     .tk-file .tk-file-x .tk-chat-att .tk-chat-full     a photo or file, waiting or sent
     .tk-skel                                     glowing bars where data is still on its way (tkSkel)
     .tk-nopt                                     the no-patient-information line (tkNoPatient)
   Colour only ever comes from the tokens below.
   ============================================================== */

/* ============================================================
   TYPEFACES — vendored in /shared/vendor/fonts, latin subset,
   variable weight. A browser fetches only the faces a page uses.
   Family names carry a "TK" prefix so a different version of the same
   face installed on the device can never stand in for ours.
   ============================================================ */
@font-face{font-family:"TK Inter";src:url(/shared/vendor/fonts/inter/normal.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"TK Inter";src:url(/shared/vendor/fonts/inter/italic.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"TK Atkinson";src:url(/shared/vendor/fonts/atkinson/normal.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"TK Atkinson";src:url(/shared/vendor/fonts/atkinson/italic.woff2) format("woff2");font-weight:200 800;font-style:italic;font-display:swap}
@font-face{font-family:"TK Source Sans";src:url(/shared/vendor/fonts/source-sans/normal.woff2) format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"TK Source Sans";src:url(/shared/vendor/fonts/source-sans/italic.woff2) format("woff2");font-weight:200 900;font-style:italic;font-display:swap}
@font-face{font-family:"TK Plex";src:url(/shared/vendor/fonts/plex/normal.woff2) format("woff2");font-weight:100 700;font-style:normal;font-display:swap}
@font-face{font-family:"TK Plex";src:url(/shared/vendor/fonts/plex/italic.woff2) format("woff2");font-weight:100 700;font-style:italic;font-display:swap}
@font-face{font-family:"TK Public Sans";src:url(/shared/vendor/fonts/public-sans/normal.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"TK Public Sans";src:url(/shared/vendor/fonts/public-sans/italic.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"TK Lexend";src:url(/shared/vendor/fonts/lexend/normal.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"TK Literata";src:url(/shared/vendor/fonts/literata/normal.woff2) format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"TK Literata";src:url(/shared/vendor/fonts/literata/italic.woff2) format("woff2");font-weight:200 900;font-style:italic;font-display:swap}
@font-face{font-family:"TK Source Serif";src:url(/shared/vendor/fonts/source-serif/normal.woff2) format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"TK Source Serif";src:url(/shared/vendor/fonts/source-serif/italic.woff2) format("woff2");font-weight:200 900;font-style:italic;font-display:swap}
@font-face{font-family:"TK Newsreader";src:url(/shared/vendor/fonts/newsreader/normal.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}

/* ============================================================
   TOKENS. Structure first, then the three themes. Theme and font
   selectors are attribute selectors, not html-only, so a preview
   swatch in the Appearance sheet can wear another theme or face
   by carrying the same attribute.
   ============================================================ */
:root{
  --f-system:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-classic:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  /* --sans is the reading face (body and interface), --serif the heading
     face. The names are historical; Appearance decides what is in them. */
  --sans:"TK Inter",var(--f-system);
  --serif:"TK Newsreader",var(--f-classic);
  /* The wordmark is the toolkit's name, not reading text: it keeps one face
     whatever the reader picks, so the bar looks the same everywhere. */
  --brand:"TK Newsreader",var(--f-classic);
  --mono:ui-monospace,"SFMono-Regular","SF Mono",Menlo,Consolas,monospace;
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-full:9999px;
  --measure:68ch;
}

/* ---- Light: paperwhite. Off-white canvas, white cards, near-black ink. ---- */
:root,[data-theme="light"]{
  --canvas:#f7f7f4;
  --surface-card:#ffffff;
  --surface-elevated:#efefeb;
  --surface-deep:#f9f9f7;
  --ink:#16181b;
  --body:#2a2d31;
  --charcoal:#3f4348;
  --mute:#555a61;
  --ash:#666b72;
  --stone:#a3a7ad;
  --hairline:rgba(22,24,27,.09);
  --hairline-strong:rgba(22,24,27,.15);
  --divider-soft:rgba(22,24,27,.055);
  --accent-orange:#a64d07;
  --accent-yellow:#7f5c00;
  --accent-blue:#1c5bbd;
  --accent-green:#15724a;
  --accent-red:#b42323;
  --zone-green:#1f9d5c; --zone-amber:#e8a000; --zone-red:#e0473c; --zone-maroon:#7d1630;
  --prev-vc:#15724a; --prev-c:#1c5bbd; --prev-u:#7f5c00; --prev-vu:#a64d07; --prev-r:#b42323;
  --nav-bg:rgba(247,247,244,.92);
  --scrim:rgba(20,22,25,.38);
  --shadow:0 1px 2px rgba(20,22,25,.05);
  color-scheme:light;
}
/* ---- Warm: unbleached paper. Lower blue light and lower contrast glare
   for long reading; ink stays dark brown so contrast is still ~12:1. ---- */
[data-theme="warm"]{
  --canvas:#f4ecdc;
  --surface-card:#fbf6eb;
  --surface-elevated:#ebe1cc;
  --surface-deep:#f7f0e2;
  --ink:#2a2017;
  --body:#382c20;
  --charcoal:#4a3c2e;
  --mute:#5f4f3d;
  --ash:#6e5d48;
  --stone:#b3a283;
  --hairline:rgba(74,52,24,.12);
  --hairline-strong:rgba(74,52,24,.2);
  --divider-soft:rgba(74,52,24,.07);
  --accent-orange:#9a440c;
  --accent-yellow:#735400;
  --accent-blue:#2a5885;
  --accent-green:#2e6638;
  --accent-red:#a12c22;
  --zone-green:#3f8f4a; --zone-amber:#d99a1c; --zone-red:#cf4a3a; --zone-maroon:#76202c;
  --prev-vc:#2e6638; --prev-c:#2a5885; --prev-u:#735400; --prev-vu:#9a440c; --prev-r:#a12c22;
  --nav-bg:rgba(244,236,220,.94);
  --scrim:rgba(42,32,23,.36);
  --shadow:0 1px 2px rgba(74,52,24,.07);
  color-scheme:light;
}
/* ---- Dark: charcoal, not black. Soft white ink (not #fff, which blooms on
   a dark screen) and desaturated accents that stay legible as text. ---- */
[data-theme="dark"]{
  --canvas:#1c1d20;
  --surface-card:#242629;
  --surface-elevated:#2d2f33;
  --surface-deep:#212225;
  --ink:#ebe9e5;
  --body:#d6d3ce;
  --charcoal:#c2beb8;
  --mute:#aaa6a0;
  --ash:#9e9a94;
  --stone:#5e5c59;
  --hairline:rgba(255,255,255,.075);
  --hairline-strong:rgba(255,255,255,.13);
  --divider-soft:rgba(255,255,255,.05);
  --accent-orange:#eea364;
  --accent-yellow:#e2c56f;
  --accent-blue:#8db4f2;
  --accent-green:#7fc79b;
  --accent-red:#f08c84;
  --zone-green:#4fbf7d; --zone-amber:#f2b33a; --zone-red:#f0645a; --zone-maroon:#a8457f;
  --prev-vc:#7fc79b; --prev-c:#8db4f2; --prev-u:#e2c56f; --prev-vu:#eea364; --prev-r:#f08c84;
  --nav-bg:rgba(28,29,32,.92);
  --scrim:rgba(0,0,0,.55);
  --shadow:none;
  color-scheme:dark;
}

/* ---- Reading face (data-font) and heading face (data-hfont) ---- */
[data-font="system"]{--sans:var(--f-system)}
[data-font="inter"]{--sans:"TK Inter",var(--f-system)}
[data-font="atkinson"]{--sans:"TK Atkinson",var(--f-system)}
[data-font="source-sans"]{--sans:"TK Source Sans",var(--f-system)}
[data-font="plex"]{--sans:"TK Plex",var(--f-system)}
[data-font="public-sans"]{--sans:"TK Public Sans",var(--f-system)}
[data-font="lexend"]{--sans:"TK Lexend",var(--f-system)}
[data-font="literata"]{--sans:"TK Literata",var(--f-classic)}
[data-font="source-serif"]{--sans:"TK Source Serif",var(--f-classic)}
[data-hfont="newsreader"]{--serif:"TK Newsreader",var(--f-classic)}
[data-hfont="source-serif"]{--serif:"TK Source Serif",var(--f-classic)}
[data-hfont="literata"]{--serif:"TK Literata",var(--f-classic)}
[data-hfont="classic"]{--serif:var(--f-classic)}
[data-hfont="text"]{--serif:var(--sans)}
/* Inter's alternates that tell l, I and 1 apart — "1 ml" must never read as
   "l ml" in a dose. Scoped, because cv05 means something else in other faces. */
[data-font="inter"] body,[data-font="inter"].ap-sample{font-feature-settings:"cv05","cv08"}

/* ---- Text size: every font size below is in rem, so this scales the
   reading text and leaves the chrome (top bar, nav) where it is. ---- */
html{font-size:16px}
html[data-size="s"]{font-size:15px}
html[data-size="l"]{font-size:17.5px}
html[data-size="xl"]{font-size:19px}

/* ============================================================
   BASE
   ============================================================ */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.6;
  font-kerning:normal;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow:hidden;
}
::selection{background:color-mix(in srgb,var(--accent-blue) 24%,transparent)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent-blue);outline-offset:2px}
p,li,.tx-lede,.tx-warn,.ph p{text-wrap:pretty}
.tr-t,.dec-q,.sheet-title,.ph h1{text-wrap:balance}

/* ===== App shell: header / horizontal pager / bottom nav ===== */

/* The shell is one viewport tall — but NOT on the word of dvh alone.
   Measured on an installed Android app: layout viewport 753, screen 832,
   and 100dvh resolving to 810 — the window with the 22px status bar taken
   off but the 57px system navigation bar left on. The shell ran 57px past
   the bottom of the screen and took the bottom nav with it, into a body
   that overflow:hidden makes unscrollable. One pixel of it showed.

   So dvh asks, and max-height decides. 100% is the layout viewport through
   html,body{height:100%} above, which that phone reports correctly, so it
   clamps the shell back to what is really on screen. Where dvh is right the
   two agree and nothing changes; on iOS, where dvh is SMALLER than the
   layout viewport while the toolbar is up, dvh wins and the clamp is slack —
   which is the whole reason the unit is still here. --tk-shell-h is the last
   resort toolkit.js measures when even the layout viewport is wrong. height
   is declared twice on purpose: a browser without dvh keeps the vh one. */
.app{display:flex;flex-direction:column;height:100vh;height:100dvh;max-height:var(--tk-shell-h,100%)}
.topbar{
  display:flex;align-items:center;gap:10px;height:54px;flex:none;
  padding:0 16px;padding-top:env(safe-area-inset-top);
  border-bottom:1px solid var(--hairline);background:var(--canvas);
}
/* Every page's content is drawn by its script at the end of <body>, and a
   page that is loaded by the tap may paint once before that runs: an empty
   shell whose only mark is the top bar's hairline. Where the browser can,
   the next page is drawn before the tap (tkPrerender) and no such frame
   exists; where it can't, the shell stays unpainted until tkMountTopbar has
   filled the bar (the same script then draws the rest). */
.app:has(>.topbar:empty){visibility:hidden}
/* On the narrowest phone the bar is short of holding "Dentistry Manual"
   whole even at the clamp's floor, and a wordmark that truncates is worse
   than one with a tighter gutter. Measured, not guessed: 320px is the
   narrowest screen docs/check.mjs stands the app up on. */
@media(max-width:360px){ .topbar{gap:7px;padding-left:12px;padding-right:12px} }
/* The wordmark is chrome: px, not rem, so a larger text size cannot push a
   tool's name out of its own bar. Fluid between 18px at 320 and 21px; the
   page's own h1 out-ranks it by a clear interval, which is what tells you
   which of the two names the page. */
.brand{font-family:var(--brand);font-size:clamp(18px,5.6vw,21px);font-weight:500;letter-spacing:-.01em;color:var(--ink);line-height:1.2}
.brand .dot{color:var(--accent-orange)}
.theme-btn{position:relative;flex:none;width:32px;height:32px;border-radius:var(--r-full);background:transparent;border:1px solid var(--hairline-strong);color:var(--mute);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .15s,background .15s;padding:0}
/* A 44px target around a 32px button: the bar has no width to spare for a
   bigger circle, but a thumb needs the bigger target. */
.theme-btn::after{content:"";position:absolute;inset:-6px}
.theme-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* Build version chip — sits next to the wordmark so a screenshot always says which build it is */
.ver{
  position:relative;flex:none;font-family:var(--f-system);font-size:13px;font-weight:500;font-variant-numeric:tabular-nums;
  color:var(--ash);padding:2px 8px;border:1px solid var(--hairline-strong);border-radius:var(--r-full);
  background:transparent;margin-right:auto;line-height:18px;
  appearance:none;-webkit-appearance:none;cursor:pointer;
}
.ver::after{content:"";position:absolute;inset:-10px -4px}
/* a page without a version chip (sign-in) still keeps its buttons at the right */
.brand + .theme-btn,.tb-home + .theme-btn{margin-left:auto}
/* The way home: the back arrow and the tool's name are one link, because the
   name is the big thing in the corner and it is what a thumb goes for. It
   runs the bar's full height so a tap just above or below the name counts;
   the version chip beside it stays its own control, a bar gap away. */
.tb-home{
  display:flex;align-items:center;gap:inherit;align-self:stretch;min-width:0;flex:0 1 auto;
  color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;border-radius:var(--r-md)
}
.tb-home:active .home-btn{color:var(--ink);background:var(--surface-elevated)}
.tb-home:active .brand{opacity:.7}
.tb-home:focus-visible{outline:2px solid var(--accent-blue);outline-offset:-4px}

.pager{
  /* min-height:0 lets the pager shrink below its content, as .page.solo
     already does: without it a flex item refuses to go under its natural
     height and grows the shell until the bottom nav leaves the screen. */
  flex:1 1 0;min-height:0;display:flex;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  /* Reserve vertical panning for the native scroll of each .page; horizontal
     swipes are driven by the JS pointer handler (reliable on touch, where the
     nested vertical scrollers otherwise swallow the gesture). */
  touch-action:pan-y;
}
.pager::-webkit-scrollbar{display:none}
.pager{scrollbar-width:none}
/* while a mouse drag is panning between pages: suppress selection + show grabbing */
.pager.dragging{cursor:grabbing;user-select:none}
.pager.dragging *{cursor:grabbing!important}
.page{
  flex:0 0 100%;width:100%;height:100%;overflow-y:auto;
  scroll-snap-align:start;overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
  /* Each page is its own scroll container, so the browser reads touch-action
     from here, not from .pager — without pan-y here too, a sideways swipe is
     claimed as a native pan and the pager handler gets a pointercancel. */
  touch-action:pan-y;
}
/* Fluid width: fills the phone; on a desktop it stops at a reading width
   rather than stretching lines across a monitor. */
.page-inner{width:100%;max-width:780px;margin:0 auto;padding:8px clamp(16px,4vw,40px) calc(40px + env(safe-area-inset-bottom))}

/* The safe-area inset is a belt-and-braces zero here: no page sets
   viewport-fit=cover, so the browser already lays the app out inside the
   safe area and the nav cannot land under a phone's system bars. Do not add
   viewport-fit=cover to bring back the insets: Android reports them as 0 in
   an installed app, and the nav disappears under the system navigation bar.
   docs/check.mjs fails a page that sets it. */
/* Device readout at the foot of the release notes. An installed app has no
   address bar and no console, so this is the only way to get numbers out of
   one when something goes wrong there and nowhere else. */
.diag{
  font-family:var(--mono);font-size:13px;line-height:1.45;margin:10px 0 6px;
  border:1px solid var(--hairline);border-radius:var(--r-md);overflow:hidden;
}
.diag>div{display:flex;gap:10px;padding:6px 10px;border-top:1px solid var(--hairline)}
.diag>div:first-child{border-top:none}
.diag b{flex:0 0 80px;color:var(--ash);font-weight:500;white-space:pre}
.diag span{flex:1 1 auto;min-width:0;color:var(--ink);word-break:break-word}

.bottomnav{
  flex:none;display:flex;height:calc(60px + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  border-top:1px solid var(--hairline);background:var(--nav-bg);
  /* No backdrop-filter: the nav sits below the pager, not over it, so a blur
     had nothing to blur and only cost a cheap phone's graphics chip. */
}
.navbtn{
  position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:none;border:none;cursor:pointer;color:var(--ash);font-family:var(--sans);
  font-size:13px;font-weight:500;transition:.15s;padding:8px 0;
}
.navbtn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;transition:.15s}
.navbtn.active{color:var(--accent-blue);font-weight:600}
/* active tab gets a clear anchor: accent icon/label + a top indicator bar */
.navbtn.active::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:32px;height:3px;border-radius:0 0 var(--r-full) var(--r-full);background:var(--accent-blue);
}
.navbtn.active svg{stroke-width:2}

/* ===== Page header — the hero ===== */
.ph{display:flow-root;padding:20px 0 10px}
.ph h1{margin:0;font-family:var(--serif);font-size:clamp(1.875rem,7.4vw,2.5rem);font-weight:500;line-height:1.12;letter-spacing:-.015em;color:var(--ink)}
.ph p{margin:10px 0 0;font-size:1rem;line-height:1.55;color:var(--mute);max-width:56ch}

.search{position:relative;margin:18px 0 14px}
.search input{
  width:100%;height:48px;padding:0 16px 0 44px;border:1px solid var(--hairline-strong);
  background:var(--surface-card);color:var(--ink);border-radius:var(--r-lg);
  font-family:var(--sans);font-size:1rem;outline:none;transition:.15s;box-shadow:var(--shadow);
}
.search input::placeholder{color:var(--ash)}
.search input:focus{border-color:color-mix(in srgb,var(--accent-blue) 55%,transparent)}
.search svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:18px;height:18px;stroke:var(--ash);fill:none;stroke-width:2}
/* the search with a list's filters beside it (tkFilter): the button opens
   them in a sheet, and the line under says what is on */
.search-row{display:flex;align-items:center;gap:8px;margin:18px 0 14px}
.search-row>.search{flex:1;min-width:0;margin:0}
.tk-filt-btn{
  flex:none;display:inline-flex;align-items:center;gap:7px;height:48px;padding:0 14px 0 13px;cursor:pointer;
  border:1px solid var(--hairline-strong);border-radius:var(--r-lg);background:var(--surface-card);color:var(--charcoal);
  font-family:var(--sans);font-size:.9375rem;font-weight:500;box-shadow:var(--shadow);transition:.15s
}
.tk-filt-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.tk-filt-btn.on{
  color:var(--accent-blue);border-color:color-mix(in srgb,var(--accent-blue) 45%,transparent);
  background:color-mix(in srgb,var(--accent-blue) 9%,var(--surface-card))
}
.tk-filt-on{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin:-4px 2px 12px;font-size:.875rem;line-height:1.5;color:var(--mute)}
.tk-filt-g{margin-bottom:20px}
.tk-filt-g .pills-row{margin-top:10px}
.tk-filt-sheet .tk-btn{margin-top:16px}
.flat-list>.grp-label:first-child{margin-top:4px}
.flat-list>.cat-desc{margin-top:-6px}

/* ===== Filter pills — and a tool's tag, which is the same object ===== */
.filters{display:flex;align-items:flex-start;gap:8px;margin:4px 0 16px}
/* straight under a hero, the same air above the pills as below them */
.ph + .filters{margin-top:10px}
.pills-row{display:flex;flex-wrap:wrap;gap:8px;flex:1;min-width:0}
.filters[hidden]{display:none}
.fpill{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 11px 6px 12px;min-height:34px;border-radius:var(--r-full);font-family:var(--sans);font-size:.875rem;font-weight:500;
  line-height:1.2;cursor:pointer;border:1px solid var(--hairline-strong);background:var(--surface-card);
  color:var(--mute);transition:.15s;white-space:nowrap;
}
.fpill .dotc{flex:none;width:8px;height:8px;border-radius:50%;background:var(--pc);opacity:.45;transition:.15s}
.tk-filt-btn .fp-n{font-variant-numeric:tabular-nums;font-size:.8125rem;border-radius:var(--r-full);padding:0 7px;line-height:20px;min-width:22px;text-align:center;color:var(--accent-blue);background:color-mix(in srgb,var(--accent-blue) 14%,transparent)}
.fpill .fp-n{font-variant-numeric:tabular-nums;font-size:.8125rem;color:var(--ash);background:var(--surface-elevated);border-radius:var(--r-full);padding:0 7px;line-height:20px;min-width:22px;text-align:center}
.fpill.on{
  color:var(--pc);border-color:color-mix(in srgb,var(--pc) 45%,transparent);
  background:color-mix(in srgb,var(--pc) 11%,var(--surface-card));
}
.fpill.on .dotc{opacity:1}
.fpill.on .fp-n{color:var(--pc);background:color-mix(in srgb,var(--pc) 14%,transparent)}
.fpill svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-left:-1px}
.info-btn{
  flex:none;width:32px;height:32px;border-radius:var(--r-full);background:var(--surface-card);
  border:1px solid var(--hairline-strong);color:var(--mute);font-size:14px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.15s;font-family:var(--serif);font-style:italic
}

/* ============================================================
   ACCORDIONS — the whole UI. Four levels, one open at each.
   Hierarchy is carried by size, weight and a single rail, so each
   level costs the text beneath it as little width as possible.
   ============================================================ */
.cat-group{margin-bottom:10px}
.acc-cat{
  width:100%;text-align:left;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--surface-card);border:1px solid var(--hairline-strong);border-radius:var(--r-lg);
  padding:15px 16px 15px 18px;min-height:58px;color:var(--ink);transition:.15s;font-family:var(--sans);box-shadow:var(--shadow);
}
/* the open category becomes the visual anchor: accent border */
.acc-cat.open{border-color:color-mix(in srgb,var(--accent-blue) 42%,transparent)}
.acc-cat .ttl{flex:1;min-width:0;font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.acc-cat .rgt{display:flex;align-items:center;gap:10px;flex:none}
.acc-cat .count{
  font-size:.8125rem;font-weight:600;color:var(--mute);font-variant-numeric:tabular-nums;
  min-width:26px;height:24px;padding:0 8px;border-radius:var(--r-full);
  background:var(--surface-elevated);
  display:inline-flex;align-items:center;justify-content:center;transition:.15s;
}
.acc-cat.open .count{color:var(--accent-blue);background:color-mix(in srgb,var(--accent-blue) 12%,transparent)}
.chev{width:18px;height:18px;stroke:var(--ash);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s;flex:none}
.open>.chev,.open .chev.self{transform:rotate(90deg)}
.acc-cat.open .chev{stroke:var(--accent-blue)}

.cat-body{padding:10px 0 6px 12px;margin-left:8px;border-left:2px solid var(--hairline-strong);display:flex;flex-direction:column;gap:8px}
/* a category's own panel above its rows: Settings' sections are forms */
.cat-body>.tk-hook{padding:4px 2px 10px;max-width:var(--measure)}
.cat-body>.tk-hook:empty{display:none}
.flat-list{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
/* A row off screen is not laid out until it is scrolled near: a list of 600
   practices took a phone a fifth of a second to lay out on every redraw. It
   remembers its real height once seen; the estimate is a closed row's. */
.tk-node{content-visibility:auto;contain-intrinsic-size:auto 120px}
.cat-desc{font-size:.9375rem;color:var(--mute);line-height:1.55;padding:0 4px 4px;max-width:var(--measure)}

.acc-item{
  width:100%;text-align:left;cursor:pointer;display:flex;align-items:flex-start;gap:12px;
  background:var(--surface-card);border:1px solid var(--hairline);border-left:3px solid var(--il,var(--hairline-strong));
  border-radius:var(--r-md);padding:13px 14px 13px 15px;color:var(--ink);transition:.15s;font-family:var(--sans);
}
.acc-item.open{border-color:color-mix(in srgb,var(--accent-blue) 42%,transparent);border-left-color:var(--il,color-mix(in srgb,var(--accent-blue) 42%,transparent))}
.acc-item.open .chev{stroke:var(--accent-blue)}
.acc-item .it-main{flex:1;min-width:0}
.acc-item .it-ttl{font-size:1rem;font-weight:600;line-height:1.4;color:var(--ink);letter-spacing:-.005em}
.acc-item .it-sub{font-size:.9375rem;color:var(--mute);margin-top:3px;line-height:1.45}
.acc-item .it-note{font-size:.9375rem;font-weight:600;color:var(--pc);margin-top:3px;line-height:1.45}
.acc-item .chev{margin-top:2px}
/* An item with an icon (the home page's tools): one line, the icon in a tile,
   centred rather than top-aligned because there is no second line to align to. */
.acc-item.has-ic{align-items:center;padding:11px 14px 11px 12px;border-left-width:1px}
.it-ic{
  flex:none;width:40px;height:40px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;
  color:var(--pc,var(--accent-blue));background:color-mix(in srgb,var(--pc,var(--accent-blue)) 10%,transparent);
}
.it-ic svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* A tool's card takes the colour of its tag (--pc): the wash, the
   border and the icon tile, so the lists read apart at a glance and the
   card needs no word under its name saying which one it is on. A solid
   edge in the colour itself carries it where a wash alone reads faint. The
   name stays in ink, which a wash this strength keeps above 4.5:1. */
.acc-item.tinted{
  background:color-mix(in srgb,var(--pc) 17%,var(--surface-card));
  border-color:color-mix(in srgb,var(--pc) 55%,transparent);
  border-left:5px solid var(--pc);padding-left:10px;
}
.acc-item.tinted .it-ic{color:var(--pc);background:color-mix(in srgb,var(--pc) 24%,var(--surface-card))}
.acc-item.tinted .go{stroke:var(--pc)}
.acc-item.archived .it-ttl{color:var(--mute)}

.badge{display:inline-block;margin-top:8px;font-size:.8125rem;font-weight:600;line-height:1.3;padding:3px 10px;border-radius:var(--r-full);color:var(--pc);background:color-mix(in srgb,var(--pc) 12%,transparent)}

.item-body{padding:12px 2px 18px;max-width:var(--measure)}

/* ===== Body text (renderBody) ===== */
.cbk{margin-top:22px}
.cbk:first-child{margin-top:0}
.cbk-h{margin:0 0 8px;font-size:1.0625rem;font-weight:650;line-height:1.35;letter-spacing:-.01em;color:var(--ink)}
.cbk-p{margin:0 0 12px;font-size:1rem;line-height:1.62;color:var(--body)}
.cbk-p:last-child{margin-bottom:0}
.cbk-ul,.cbk-ol{margin:0 0 12px;padding-left:1.35em;display:flex;flex-direction:column;gap:8px}
.cbk-ul:last-child,.cbk-ol:last-child{margin-bottom:0}
.cbk-ul li,.cbk-ol li{font-size:1rem;line-height:1.58;color:var(--body);padding-left:.15em}
.cbk-ul li::marker{color:var(--ash)}
.cbk-ol li::marker{color:var(--mute);font-weight:600;font-variant-numeric:tabular-nums}
.cbk-h3{margin:18px 0 6px;font-size:.9375rem;font-weight:650;line-height:1.4;color:var(--charcoal)}
/* tables keep their columns — scroll the table, never the page */
.cbk-tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:4px 0 14px;border:1px solid var(--hairline-strong);border-radius:var(--r-md);background:var(--surface-card)}
.cbk-tw:last-child{margin-bottom:0}
.cbk-tbl{border-collapse:collapse;width:100%;font-size:.9375rem}
.cbk-tbl th,.cbk-tbl td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--hairline);line-height:1.5;color:var(--body)}
.cbk-tbl th{font-size:.875rem;color:var(--ink);font-weight:600;background:var(--surface-elevated);border-bottom:1px solid var(--hairline-strong);white-space:nowrap}
/* zebra rows: the eye keeps its place across a wide row */
.cbk-tbl tbody tr:nth-child(even) td{background:var(--divider-soft)}
.cbk-tbl tr:last-child td{border-bottom:none}
.cbk strong{color:var(--ink);font-weight:650}
.cbk em{font-style:italic}
/* Tick boxes ("- [ ]" / "- [x]"), here and in tkRich. The box sits in the
   list's own indent, and a wider invisible target (::after) round it takes a
   thumb rather than a fingertip. A ticked line stays readable — struck, not
   faded out. */
.cbk-ul:has(>li.cbk-tk),.tk-rich-ed ul:has(>li.cbk-tk){padding-left:1.95em}
li.cbk-tk{list-style:none;position:relative}
li.cbk-tk::before{
  content:"";position:absolute;left:-1.8em;top:.22em;width:1.15em;height:1.15em;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;border:1.5px solid var(--ash);border-radius:5px;
  background:var(--surface-card);color:var(--canvas);font-size:.85em;font-weight:700;line-height:1
}
li.cbk-tk::after{content:"";position:absolute;left:-2.2em;top:-.25em;width:2.2em;height:2em}
li.cbk-tk.done::before{content:"\2713";background:var(--accent-blue);border-color:var(--accent-blue)}
li.cbk-tk.done{color:var(--mute);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--mute) 55%,transparent)}
.tk-ticks li.cbk-tk{cursor:pointer}
.tx-link{color:var(--accent-blue);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent-blue) 40%,transparent);text-underline-offset:3px;text-decoration-thickness:1.5px;cursor:pointer}

.empty{font-size:.9375rem;color:var(--mute);text-align:center;margin:0;padding:14px 8px}
.total-line{font-size:.875rem;color:var(--mute);text-align:center;padding:16px 0 4px}
.grp-label{font-size:.875rem;color:var(--mute);font-weight:600;margin:20px 2px 8px}

/* ===== Slide-up sheets ===== */
.sheet-ov{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-end;justify-content:center}
/* The scrim dims; it does not blur. A full-screen backdrop blur, fading in,
   was the costliest thing a cheap phone's graphics chip drew in the app. */
.sheet-bg{position:absolute;inset:0;background:var(--scrim);opacity:0;transition:opacity .24s}
.sheet-ov.show .sheet-bg{opacity:1}
.sheet{
  position:relative;width:100%;max-width:560px;max-height:84dvh;display:flex;flex-direction:column;overflow:hidden;
  background:var(--surface-card);border:1px solid var(--hairline-strong);border-bottom:none;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  transform:translateY(100%);transition:transform .26s cubic-bezier(.22,1,.36,1);
  padding-bottom:env(safe-area-inset-bottom);
}
.sheet-ov.show .sheet{transform:translateY(0)}
.sheet-grab{margin:9px auto 2px;width:40px;height:4px;border-radius:var(--r-full);background:var(--hairline-strong)}
.sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:8px 20px 14px;border-bottom:1px solid var(--hairline)}
.sheet-kick{font-size:.875rem;color:var(--mute);font-weight:500;margin-bottom:2px}
.sheet-title{font-family:var(--serif);font-size:1.375rem;font-weight:500;line-height:1.25;color:var(--ink)}
.sheet-x{position:relative;flex:none;width:32px;height:32px;border-radius:var(--r-full);background:var(--surface-elevated);border:none;color:var(--mute);cursor:pointer;font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center}
.sheet-x::after{content:"";position:absolute;inset:-6px}
.sheet-body{padding:18px 20px 26px;overflow-y:auto;overscroll-behavior:contain}
.quote{margin:0;padding:14px 16px;border-left:3px solid var(--accent-blue);background:var(--surface-deep);border-radius:0 var(--r-md) var(--r-md) 0;font-family:var(--serif);font-size:1.0625rem;line-height:1.55;color:var(--body);font-style:italic}
.prev-list{display:flex;flex-direction:column;gap:16px;margin:0;padding:0;list-style:none}
.prev-list .pr{font-size:.9375rem;color:var(--ink);font-weight:500;margin-top:6px}
.prev-list .pe{font-size:.875rem;color:var(--mute);margin-top:1px}
.gl-note{font-size:.875rem;color:var(--mute);text-align:center;margin-top:28px;line-height:1.6;border-top:1px solid var(--divider-soft);padding-top:16px}

/* ============================================================
   PICK ONE — a list of choices, the chosen one ticked. Used by
   Appearance and by a tool's tag. Choosing applies at once.
   ============================================================ */
.tk-choices{display:flex;flex-direction:column;gap:8px}
.tk-choice{
  width:100%;display:flex;align-items:center;gap:14px;text-align:left;cursor:pointer;
  padding:12px 14px;border-radius:var(--r-md);border:1px solid var(--hairline-strong);
  background:var(--surface-card);color:var(--ink);transition:.15s;font-family:var(--sans)
}
.tk-choice.on{border-color:var(--accent-blue);box-shadow:0 0 0 1px var(--accent-blue) inset}
.tk-choice-m{flex:1;min-width:0;display:block}
.tk-choice-t{display:block;font-size:1rem;font-weight:600;line-height:1.35}
.tk-choice-s{display:block;font-size:.875rem;color:var(--mute);line-height:1.45;margin-top:2px}
.tk-choice-tick{flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--hairline-strong);display:flex;align-items:center;justify-content:center}
.tk-choice-tick svg{width:13px;height:13px;stroke:var(--canvas);fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.tk-choice.on .tk-choice-tick{background:var(--accent-blue);border-color:var(--accent-blue)}
.tk-choice.on .tk-choice-tick svg{opacity:1}
.tk-choice .dotc{flex:none;width:10px;height:10px;border-radius:50%;background:var(--pc)}
/* a row that opens something to edit rather than choosing it (Your tags) */
.tk-choice .chev{margin-left:auto}

/* ---- Appearance ---- */
.ap-h{margin:24px 0 10px;font-size:1rem;font-weight:650;color:var(--ink)}
.ap-h:first-child{margin-top:0}
.ap-say{margin:-4px 0 12px;font-size:.875rem;color:var(--mute);line-height:1.5}
.ap-themes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
/* A theme card is drawn IN that theme: it carries data-theme itself, so its
   colours are the theme's own whatever the page is wearing. */
.ap-theme{
  display:flex;flex-direction:column;align-items:stretch;
  cursor:pointer;padding:0;border-radius:var(--r-lg);overflow:hidden;text-align:left;
  border:1px solid var(--hairline-strong);background:var(--canvas);color:var(--ink);transition:.15s;font-family:var(--sans)
}
.ap-theme.on{border-color:var(--accent-blue);box-shadow:0 0 0 2px var(--accent-blue)}
.ap-theme-pv{display:block;padding:12px 12px 10px}
.ap-theme-pv i{display:block;height:6px;border-radius:3px;background:var(--body);opacity:.75;margin-top:6px}
.ap-theme-pv i:nth-child(2){width:86%;opacity:.5}
.ap-theme-pv i:nth-child(3){width:62%;opacity:.5}
.ap-theme-pv b{display:block;font-family:var(--serif);font-size:22px;font-weight:500;line-height:1;color:var(--ink)}
.ap-theme-n{display:flex;align-items:center;gap:6px;padding:9px 12px 1px;font-size:.875rem;font-weight:600;color:var(--ink);border-top:1px solid var(--hairline);background:var(--surface-card)}
.ap-theme-n .dotc{width:8px;height:8px;border-radius:50%;background:var(--accent-blue)}
.ap-theme-s{display:block;flex:1;padding:0 12px 10px;font-size:.8125rem;line-height:1.35;color:var(--mute);background:var(--surface-card)}
.ap-sample{flex:none;width:52px;text-align:center;font-family:var(--sans);font-size:24px;line-height:1;color:var(--ink)}
.ap-sample.h{font-family:var(--serif);font-size:26px;font-weight:500}
.ap-fonts .tk-choice-t{font-family:var(--sans)}
.ap-fonts.h .tk-choice-t{font-family:var(--serif);font-size:1.125rem;font-weight:500}
.ap-sizes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.ap-size{
  cursor:pointer;height:52px;border-radius:var(--r-md);border:1px solid var(--hairline-strong);background:var(--surface-card);
  color:var(--ink);font-family:var(--sans);font-weight:600;display:flex;align-items:center;justify-content:center;transition:.15s
}
.ap-size.on{border-color:var(--accent-blue);box-shadow:0 0 0 1px var(--accent-blue) inset;color:var(--accent-blue)}
.ap-preview{margin-top:12px;padding:14px 16px;border-radius:var(--r-md);background:var(--surface-deep);border:1px solid var(--hairline)}
.ap-preview .cbk-p{margin:0}

/* ============================================================
   Inside an open item
   ============================================================ */
.sk-rnote{
  margin-top:10px;padding:10px 12px;border-radius:var(--r-sm);
  border-left:3px solid color-mix(in srgb,var(--accent-orange) 60%,transparent);
  background:color-mix(in srgb,var(--accent-orange) 7%,transparent);
  font-size:.9375rem;line-height:1.55;color:var(--body)
}
.sk-rnote b{color:var(--accent-orange)}
/* The safety line. Always visible, so it is shaped to be seen: a tinted
   panel with a solid amber edge, at full body size. */
.tx-warn{
  margin:0 0 16px;padding:12px 14px;border-radius:var(--r-sm);
  border:1px solid color-mix(in srgb,var(--accent-orange) 30%,transparent);border-left:4px solid var(--accent-orange);
  background:color-mix(in srgb,var(--accent-orange) 8%,var(--surface-card));
  font-size:.9688rem;line-height:1.55;color:var(--body)
}
.tx-warn b,.tx-warn strong{color:var(--ink)}
/* The bottom-line answer: the one paragraph read by everyone who opens the
   item, so it is the largest running text in the app. */
.tx-lede{margin:0 0 16px;font-size:1.0625rem;line-height:1.6;color:var(--ink)}
.tx-lede strong{font-weight:650}

/* Section toggles — level 3 */
.tx-secs{display:flex;flex-direction:column;gap:8px}
/* a panel above the sections (figures, a form) keeps clear of them */
.item-body>.tk-hook+.tx-secs{margin-top:18px}
.tx-sec{border:1px solid var(--hairline-strong);border-radius:var(--r-md);background:var(--surface-card);transition:border-color .15s;overflow:hidden}
.tx-sec.open{border-color:color-mix(in srgb,var(--accent-blue) 38%,transparent)}
.tx-sec-h{
  width:100%;display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer;min-height:50px;
  padding:12px 14px;background:transparent;border:0;color:var(--ink);font-family:var(--sans)
}
.tx-sec.open .tx-sec-h{background:color-mix(in srgb,var(--accent-blue) 5%,transparent)}
.tx-sec-t{flex:1;min-width:0;font-size:1rem;font-weight:600;line-height:1.35}
.tx-sec-n{
  flex:none;font-size:.8125rem;font-weight:600;font-variant-numeric:tabular-nums;
  color:var(--mute);background:var(--surface-elevated);
  border-radius:var(--r-full);padding:1px 8px;white-space:nowrap;line-height:20px
}
.tx-sec-cv{flex:none;width:16px;height:16px;stroke:var(--ash);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.tx-sec.open .tx-sec-cv{transform:rotate(90deg);stroke:var(--accent-blue)}
.tx-sec-b{padding:2px 14px 16px;border-top:1px solid var(--divider-soft)}
.tx-sec-b .cbk:first-child{margin-top:14px}
/* a form or panel that opens a section, or a sub-point, keeps the same gap
   under its header as text does, whatever its first element is */
.tx-sec-b>.tk-hook:first-child>:first-child{margin-top:14px}
.tr-b>.tk-hook:first-child>:first-child{margin-top:2px}

/* Instrument tray — grouped so you can set out one group at a time. */
.tx-kit{display:flex;flex-direction:column;gap:16px;margin-top:14px}
.tx-kit-gh{font-size:.9375rem;font-weight:650;color:var(--charcoal);margin-bottom:8px}
.tx-kit-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.tx-kit-l li{position:relative;padding-left:20px;font-size:1rem;line-height:1.55;color:var(--body)}
.tx-kit-l li::before{content:"";position:absolute;left:1px;top:.5em;width:9px;height:9px;border-radius:2px;border:1.5px solid var(--stone)}
.tx-kit-l strong{color:var(--ink);font-weight:650}
.tx-steps{display:flex;flex-direction:column;gap:6px}
.tx-step{border:1px solid var(--hairline);border-radius:var(--r-md);background:var(--surface-deep);transition:.15s}
.tx-step.open{border-color:color-mix(in srgb,var(--accent-blue) 38%,transparent);background:var(--surface-card)}
.tx-step-h{
  width:100%;display:flex;align-items:center;gap:11px;text-align:left;cursor:pointer;min-height:48px;
  padding:11px 13px;background:transparent;border:0;border-radius:var(--r-md);color:var(--ink);font-family:var(--sans)
}
.tx-step-n{
  flex:none;width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:.8125rem;font-weight:650;color:var(--mute);background:var(--surface-elevated);font-variant-numeric:tabular-nums
}
.tx-step.open .tx-step-n{color:var(--accent-blue);background:color-mix(in srgb,var(--accent-blue) 13%,transparent)}
.tx-step-t{flex:1;min-width:0;font-size:1rem;font-weight:600;line-height:1.4}
.tx-step-h svg{flex:none;width:15px;height:15px;stroke:var(--ash);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.tx-step.open .tx-step-h svg{transform:rotate(90deg);stroke:var(--accent-blue)}
.tx-step-b{padding:2px 13px 14px;border-top:1px solid var(--divider-soft)}
.tx-step-b .cbk:first-child{margin-top:12px}

/* ============================================================
   ROUTE CARD — where something goes from here: in the Dentistry Manual,
   who takes each condition an entry sends on. Always visible inside an
   open item, never behind a toggle, and above its sections.
   ============================================================ */
.rt{
  margin-top:18px;padding:14px;border-radius:var(--r-lg);
  border:1px solid color-mix(in srgb,var(--accent-green) 32%,transparent);
  background:color-mix(in srgb,var(--accent-green) 6%,var(--surface-card));
}
.rt-k{font-size:.875rem;font-weight:600;color:var(--accent-green);margin-bottom:10px}
.rt-go{
  width:100%;display:grid;grid-template-columns:1fr auto;align-items:center;gap:3px 12px;
  text-align:left;cursor:pointer;padding:12px 14px;border-radius:var(--r-md);
  border:1px solid var(--hairline-strong);background:var(--surface-card);
  color:var(--ink);font-family:var(--sans);transition:.15s
}
.rt-go + .rt-go{margin-top:8px}
.rt-t{grid-column:1;font-size:1rem;font-weight:600;line-height:1.35}
.rt-s{grid-column:1;font-size:.875rem;color:var(--mute);line-height:1.45}
.rt-go svg{grid-column:2;grid-row:1/span 2;width:18px;height:18px;stroke:var(--accent-green);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* a jump to another algorithm, offered at the end of a decision option */
.go-chip{
  margin-top:12px;display:inline-flex;align-items:center;gap:7px;cursor:pointer;min-height:36px;
  padding:7px 13px;border-radius:var(--r-full);font-family:var(--sans);font-size:.9375rem;font-weight:600;
  border:1px solid color-mix(in srgb,var(--accent-green) 38%,transparent);
  background:color-mix(in srgb,var(--accent-green) 9%,transparent);color:var(--accent-green);transition:.15s
}
.go-chip svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.item-body>.rt{margin:0 0 16px}
/* several jumps at once: a condition's other entries, or under a search
   result, the things in it the search found */
.go-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.go-chips .go-chip{margin-top:0}
.acc-item+.go-chips{margin:8px 0 12px}

/* ============================================================
   NUMBERED SUB-POINTS — level 4. The title is in the heading face, so
   the fourth level reads as a list of statements, not more buttons.
   ============================================================ */
/* A divided list inside the open section, not a stack of boxes: a box in
   a box in a box is three outlines the eye has to read past to reach the
   words. The open point is marked by its number and a quiet tint. */
.tr-list{display:flex;flex-direction:column;margin:14px -14px 0;border-top:1px solid var(--hairline)}
.tx-sec-b>.tr-list:last-child{margin-bottom:-16px}
.tx-sec-b>.tr-list:first-child{margin-top:-2px;border-top:0}
.tr{border-top:1px solid var(--hairline);transition:background .15s}
.tr:first-child{border-top:0}
.tr.open{background:color-mix(in srgb,var(--accent-blue) 4%,transparent)}
.tr-h{
  width:100%;display:flex;align-items:flex-start;gap:12px;text-align:left;cursor:pointer;
  padding:13px 14px;background:transparent;border:0;color:var(--ink);font-family:var(--sans)
}
.tr-n{
  flex:none;margin-top:1px;font-size:.8125rem;font-weight:650;color:var(--mute);background:var(--surface-elevated);
  width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-variant-numeric:tabular-nums
}
.tr.open .tr-n{color:var(--canvas);background:var(--accent-blue)}
.tr-t{flex:1;min-width:0;font-family:var(--serif);font-size:1.0938rem;font-weight:500;line-height:1.38}
/* who takes it, under the title of a sub-point that is somebody else's to
   treat, so a closed list already reads as "these I keep, these I send";
   .tr-s is a plain second line (tkTree's sub `s`: a ledger line's kind and date) */
.tr-ref{display:block;margin-top:3px;font-family:var(--sans);font-size:.875rem;font-weight:600;line-height:1.4;color:var(--accent-green)}
.tr-s{display:block;margin-top:3px;font-family:var(--sans);font-size:.9375rem;font-weight:400;line-height:1.45;color:var(--mute)}
.tr-b .dec-then{margin-bottom:16px}
.tr-h svg{flex:none;margin-top:4px;width:15px;height:15px;stroke:var(--ash);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.tr.open .tr-h svg{transform:rotate(90deg);stroke:var(--accent-blue)}
/* the body lines up under the title, past the number, where there is room */
.tr-b{padding:0 14px 16px 50px}
.tr-b .cbk:first-child{margin-top:0}
@media(max-width:480px){ .tr-b{padding-left:14px} }

/* ============================================================
   THE DECISION — every fork on screen at once, every option under it
   visible as a row. One option open at a time.
   ============================================================ */
.dec-list{display:flex;flex-direction:column;gap:20px;margin-top:14px}
.dec{padding-left:12px;border-left:2px solid var(--hairline-strong)}
.dec-h{display:flex;align-items:flex-start;gap:10px}
.dec-n{
  flex:none;margin-top:2px;width:24px;height:24px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.8125rem;font-weight:650;color:var(--accent-blue);
  background:color-mix(in srgb,var(--accent-blue) 13%,transparent);font-variant-numeric:tabular-nums
}
.dec-q{flex:1;min-width:0;font-family:var(--serif);font-size:1.1875rem;font-weight:500;line-height:1.32;letter-spacing:-.01em;color:var(--ink)}
.dec-why{margin:8px 0 0 34px;font-size:.9375rem;line-height:1.6;color:var(--mute)}
.dec-opts{margin:12px 0 0 34px;display:flex;flex-direction:column;gap:6px}
@media(max-width:480px){ .dec-why,.dec-opts{margin-left:0} }
.dec-opt{border:1px solid var(--hairline);border-radius:var(--r-md);background:var(--surface-deep);transition:.15s}
.dec-opt.open{border-color:color-mix(in srgb,var(--accent-green) 38%,transparent);background:var(--surface-card)}
.dec-a{
  width:100%;display:flex;align-items:flex-start;gap:11px;text-align:left;cursor:pointer;
  padding:12px 12px;background:transparent;border:0;border-radius:var(--r-md);color:var(--ink);font-family:var(--sans)
}
.dec-dot{flex:none;margin-top:.45em;width:10px;height:10px;border-radius:50%;border:1.5px solid var(--stone);transition:.15s}
.dec-opt.open .dec-dot{border-color:var(--accent-green);background:var(--accent-green)}
.dec-at{flex:1;min-width:0;font-size:1rem;font-weight:600;line-height:1.45}
.dec-a svg{flex:none;margin-top:4px;width:14px;height:14px;stroke:var(--ash);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.dec-opt.open .dec-a svg{transform:rotate(90deg);stroke:var(--accent-green)}
.dec-go{padding:4px 12px 14px;border-top:0}
.dec-then{display:flex;gap:10px;align-items:baseline}
.dec-then .tk{
  flex:none;font-size:.8125rem;font-weight:650;
  color:var(--accent-green);background:color-mix(in srgb,var(--accent-green) 13%,transparent);
  padding:1px 8px;border-radius:var(--r-sm)
}
.dec-then .tt{flex:1;min-width:0;font-size:1rem;line-height:1.58;color:var(--ink)}
.dec-then .tt strong{color:var(--ink);font-weight:650}
.dec-gw{margin-top:10px;font-size:.9375rem;line-height:1.62;color:var(--mute)}

/* ============================================================
   EVIDENCE — the guidance quoted where it bites, the body that wrote it
   named above it, and the translation into what you do underneath.
   ============================================================ */
.ev-list{display:flex;flex-direction:column;gap:22px;margin-top:14px}
.ev-src{font-size:.875rem;font-weight:600;line-height:1.45;color:var(--mute);margin-bottom:8px}
.ev-means{display:flex;gap:10px;align-items:baseline;margin-top:12px}
.ev-means .tk{
  flex:none;font-size:.8125rem;font-weight:650;
  color:var(--accent-blue);background:color-mix(in srgb,var(--accent-blue) 13%,transparent);
  padding:1px 8px;border-radius:var(--r-sm)
}
.ev-means .tt{flex:1;min-width:0;font-size:1rem;line-height:1.6;color:var(--body)}
.ev-list .gl-note{margin-top:4px;padding-top:12px;text-align:left}

.ev-says{
  margin:0;padding:12px 16px;border-left:3px solid var(--accent-blue);
  background:var(--surface-deep);border-radius:0 var(--r-md) var(--r-md) 0;
  font-family:var(--serif);font-size:1.0625rem;line-height:1.55;color:var(--body)
}
.ev-says strong{color:var(--ink);font-weight:600}

/* ============================================================
   Release notes — one block per build, newest first.
   ============================================================ */
.cl-rel{padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--divider-soft)}
.cl-rel:last-child{padding-bottom:0;margin-bottom:0;border-bottom:0}
.cl-v{display:flex;align-items:center;gap:9px;margin-bottom:10px;font-size:.875rem;font-weight:600;color:var(--mute);font-variant-numeric:tabular-nums}
.cl-now{
  font-size:.8125rem;font-weight:600;padding:1px 8px;border-radius:var(--r-full);
  color:var(--accent-blue);background:color-mix(in srgb,var(--accent-blue) 12%,transparent)
}
.cl-rel .cbk:first-of-type{margin-top:0}

/* ==============================================================
   TOOLKIT SHELL — home page, single-page tools, sign-in, account
   ============================================================== */
/* a page that is not inside a horizontal pager (home, login, most tools) */
.page.solo{flex:1 1 auto;height:auto;min-height:0;scroll-snap-align:none}
.brand{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto}
.home-btn svg{width:18px;height:18px}

/* a row that opens a tool rather than expanding in place */
a.acc-item{text-decoration:none}
.acc-item .go{flex:none;margin-top:2px;width:18px;height:18px;stroke:var(--ash);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:.15s}
.acc-item.has-ic .go{margin-top:0}

/* the full-width primary action (Sign in, Install) */
.tk-btn{
  width:100%;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;min-height:48px;
  padding:12px 16px;border-radius:var(--r-md);border:1px solid var(--hairline-strong);
  background:var(--surface-card);color:var(--ink);font-family:var(--sans);
  font-size:1rem;font-weight:600;transition:.15s;text-decoration:none;box-shadow:var(--shadow)
}
.tk-btn:disabled{opacity:.55;cursor:default}
.tk-btn svg{width:18px;height:18px;flex:none}
/* an icon drawn with the shared set's pen, where the svg doesn't set its own */
.tk-btn svg:not([stroke]){stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tk-btn.quiet{background:transparent;font-weight:500;color:var(--charcoal);box-shadow:none}
.tk-btn + .tk-btn{margin-top:8px}
.tk-msg{margin-top:12px;font-size:.9375rem;line-height:1.55;color:var(--mute);text-align:center}
.tk-msg.bad{color:var(--accent-red)}
/* a message waiting for its words takes no room under the button */
.tk-msg:empty{margin:0}

/* form fields: the label above the box, in sentence case, at reading size */
.tk-field{margin-bottom:14px;text-align:left}
.tk-field label{display:block;font-size:.9375rem;font-weight:600;color:var(--ink);margin-bottom:6px}
/* 16px text in every input: iOS zooms the page into any field smaller than
   that, and the reader has to pinch back out. */
.tk-input{
  width:100%;height:48px;padding:0 14px;border:1px solid var(--hairline-strong);
  background:var(--surface-card);color:var(--ink);border-radius:var(--r-md);
  font-family:var(--sans);font-size:max(16px,1rem);outline:none;transition:.15s;
}
.tk-input::placeholder{color:var(--ash)}
.tk-input:focus{border-color:var(--accent-blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-blue) 16%,transparent)}
.tk-input:disabled{opacity:.55}

/* signed-in account line inside the account sheet */
.acct{display:flex;align-items:center;gap:12px;padding:2px 0 16px;margin-bottom:16px;border-bottom:1px solid var(--divider-soft)}
.acct-av{flex:none;width:40px;height:40px;border-radius:var(--r-full);display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--accent-blue) 14%,transparent);
  color:var(--accent-blue);font-family:var(--serif);font-size:19px}
.acct-e{min-width:0;font-size:1rem;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.acct-s{font-size:.875rem;color:var(--mute);margin-top:1px}
.sheet-body .cbk-h3:first-child{margin-top:0}

/* ============================================================
   FORMS — the vocabulary tkForm renders, and the surfaces a My tool
   needs around it. Everything below is tokens only.
   ============================================================ */
.tk-hook{display:block}
.tk-formw{margin:2px 0 4px}
.tkf{margin-bottom:18px;text-align:left}
.tkf:last-child{margin-bottom:4px}
.tkf-l{display:block;font-size:.9375rem;font-weight:600;line-height:1.4;color:var(--ink);margin-bottom:7px}
.tkf-h{font-size:.875rem;line-height:1.5;color:var(--mute);margin-top:6px}
.tkf-empty{font-size:.9375rem;color:var(--mute);font-style:italic;margin:4px 0 10px}
.tkf-head{
  font-family:var(--serif);font-size:1.1875rem;font-weight:500;color:var(--ink);
  margin:26px 0 14px;padding-bottom:8px;border-bottom:1px solid var(--hairline)
}
.tk-formw .tkf-head:first-child{margin-top:4px}
.tkf-note{margin:0 0 16px;padding:12px 14px;border-radius:var(--r-md);background:var(--surface-deep);border:1px solid var(--hairline)}
.tkf-note .cbk:last-child p:last-child{margin-bottom:0}

/* textarea and select, siblings of .tk-input and styled from it */
.tk-ta{
  width:100%;min-height:96px;padding:11px 14px;border:1px solid var(--hairline-strong);
  background:var(--surface-card);color:var(--ink);border-radius:var(--r-md);
  font-family:var(--sans);font-size:max(16px,1rem);line-height:1.55;outline:none;resize:vertical;transition:.15s
}
.tk-ta::placeholder{color:var(--ash)}
.tk-ta:focus{border-color:var(--accent-blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-blue) 16%,transparent)}
.tk-ta.sm{min-height:48px;font-size:max(16px,.9375rem);padding:9px 11px}
/* a short field is as tall as what is in it: no empty lines, no grip to drag
   (a browser without field-sizing keeps its rows and the grip) */
@supports (field-sizing:content){.tk-ta.sm{field-sizing:content;resize:none}}
.tk-input.sm{height:42px;font-size:max(16px,.9375rem);padding:0 11px}
.tk-sel{
  width:100%;height:48px;padding:0 12px;border:1px solid var(--hairline-strong);
  background:var(--surface-card);color:var(--ink);border-radius:var(--r-md);
  font-family:var(--sans);font-size:max(16px,1rem);outline:none
}
/* a date input on iOS renders its own control; keep the box the same height */
.tk-input[type="date"]{-webkit-appearance:none;appearance:none;min-height:48px}

/* pick one / pick any — the .fpill look, at a size a thumb can hit */
.tk-opts{display:flex;flex-wrap:wrap;gap:8px}
.tk-opt{
  cursor:pointer;font-family:var(--sans);font-size:.9375rem;font-weight:500;line-height:1.35;min-height:40px;
  padding:8px 14px;border-radius:var(--r-full);border:1px solid var(--hairline-strong);
  background:var(--surface-card);color:var(--charcoal);transition:.15s;text-align:left
}
.tk-opt.on{
  border-color:color-mix(in srgb,var(--accent-blue) 60%,transparent);
  background:color-mix(in srgb,var(--accent-blue) 11%,var(--surface-card));
  color:var(--ink);font-weight:600
}
.tk-chk{display:flex;align-items:flex-start;gap:11px;cursor:pointer;font-size:1rem;line-height:1.5;color:var(--body)}
.tk-chk input{flex:none;width:20px;height:20px;margin-top:2px;accent-color:var(--accent-blue)}

/* ---- repeating rows -------------------------------------------------
   A table while there is room for one, labelled cards when there is not:
   a seven-column logbook is unreadable at 360px, and the page itself must
   never scroll sideways. The table lives in .cbk-tw so it scrolls alone. */
.tk-grid{width:100%;border-collapse:collapse;font-family:var(--sans)}
.tk-grid th{font-size:.8125rem;font-weight:600;color:var(--mute);text-align:left;padding:0 8px 8px;white-space:nowrap}
.tk-grid td{padding:0 4px 8px;vertical-align:top}
.tk-grid td:first-child{padding-left:0}
.tk-grid-x{width:34px}
.tk-grid-del{
  cursor:pointer;width:30px;height:30px;margin-top:6px;border-radius:var(--r-sm);
  border:1px solid var(--hairline);background:var(--surface-card);
  color:var(--ash);font-size:13px;line-height:1;transition:.15s
}
.tk-gcards{display:none}
.tk-gcard{position:relative;margin-bottom:12px;padding:14px 14px 4px;border:1px solid var(--hairline-strong);border-radius:var(--r-md);background:var(--surface-card)}
.tk-gcard-h{display:flex;align-items:center;justify-content:space-between;font-size:.9375rem;font-weight:650;color:var(--accent-blue);margin-bottom:12px}
.tk-gcard .tkf{margin-bottom:12px}
.tk-grid-add{margin-top:4px}
@media (max-width:639px){
  .tk-grid-tw{display:none}
  .tk-gcards{display:block}
}

/* ---- fixed rows against a scale (DOPS, MSF, questionnaires) ---- */
.tk-mx{width:100%;border-collapse:collapse;font-family:var(--sans)}
.tk-mx th{font-size:.8125rem;font-weight:600;color:var(--mute);padding:0 5px 8px;text-align:center;white-space:nowrap;line-height:1.3}
.tk-mx th:first-child{text-align:left;min-width:150px}
.tk-mx td{padding:7px 5px;font-size:.9375rem;color:var(--body);line-height:1.45;border-top:1px solid var(--divider-soft)}
.tk-mx td:first-child{padding-left:0;min-width:150px}
.tk-mx-c{text-align:center;width:42px}
.tk-mx-b{cursor:pointer;width:24px;height:24px;border-radius:var(--r-full);border:1.5px solid var(--hairline-strong);background:var(--surface-card);transition:.15s}
.tk-mx-b.on{background:var(--accent-blue);border-color:var(--accent-blue)}

/* ---- autosave status ------------------------------------------------
   Content typed into most tools is never written to localStorage, so a save
   needs the network; tkLocalFirst saves on the device and needs it only for
   the backup. Either way the line says plainly where the work is, rather
   than letting it look safer than it is. */
.tk-save{display:flex;align-items:center;gap:8px;margin:10px 0 2px;font-size:.875rem;line-height:1.45;color:var(--mute)}
.tk-save::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--stone)}
.tk-save.saving::before{background:var(--accent-yellow)}
.tk-save.saved::before{background:var(--accent-green)}
.tk-save.dirty::before{background:var(--accent-yellow)}
.tk-save.offline,.tk-save.error{color:var(--accent-red)}
.tk-save.offline::before,.tk-save.error::before{background:var(--accent-red)}
/* nothing to say yet: no lone dot */
.tk-save:empty{display:none}

/* ---- a field for writing freely (tkRich) ----------------------------
   Written in the same type it will be read in, so what you see while
   typing is what the note looks like closed. The bar sticks to the top of
   the page while a long note scrolls under it. The field starts at about
   five lines, room for its placeholder, and grows with what is written:
   half the screen of empty box under a two-line note looked unfinished. */
.tk-rich{margin:2px 0 0}
.tk-rich-bar{
  position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:3px;
  padding:6px 0 8px;background:var(--canvas)
}
.tk-rich-b{
  flex:1 1 0;min-width:0;max-width:48px;height:40px;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;border-radius:var(--r-md);
  border:1px solid transparent;background:transparent;color:var(--charcoal);
  font-family:var(--sans);font-size:17px;transition:.15s
}
.tk-rich-b svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tk-rich-b.on{
  color:var(--accent-blue);border-color:color-mix(in srgb,var(--accent-blue) 32%,transparent);
  background:color-mix(in srgb,var(--accent-blue) 11%,transparent)
}
.tk-rich-g{font-weight:700;line-height:1}
.tk-rich-g.i{font-family:var(--serif);font-style:italic;font-weight:500;font-size:19px}
.tk-rich-done{
  flex:none;margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px 0 11px;
  border-radius:var(--r-full);cursor:pointer;font-family:var(--sans);font-size:.9375rem;font-weight:600;
  color:var(--accent-blue);border:1px solid color-mix(in srgb,var(--accent-blue) 45%,transparent);
  background:color-mix(in srgb,var(--accent-blue) 11%,var(--surface-card))
}
.tk-rich-done svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.tk-rich-ed{
  position:relative;min-height:9em;padding:14px 16px;outline:none;
  border:1px solid var(--hairline-strong);border-radius:var(--r-md);background:var(--surface-card);
  font-family:var(--sans);font-size:max(16px,1rem);line-height:1.6;color:var(--body);
  overflow-wrap:anywhere;transition:border-color .15s,box-shadow .15s
}
.tk-rich-ed:focus{border-color:var(--accent-blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-blue) 16%,transparent)}
.tk-rich-ed.blank::before{content:attr(data-ph);position:absolute;top:14px;left:16px;right:16px;color:var(--ash);pointer-events:none}
.tk-rich-ed p,.tk-rich-ed div{margin:0 0 12px}
.tk-rich-ed h4{margin:22px 0 8px;font-size:1.0625rem;font-weight:650;line-height:1.35;letter-spacing:-.01em;color:var(--ink)}
.tk-rich-ed h5{margin:18px 0 6px;font-size:.9375rem;font-weight:650;line-height:1.4;color:var(--charcoal)}
.tk-rich-ed ul,.tk-rich-ed ol{margin:0 0 12px;padding-left:1.35em}
.tk-rich-ed li{margin:0 0 8px;padding-left:.15em;line-height:1.58}
.tk-rich-ed ul ul,.tk-rich-ed ol ol,.tk-rich-ed ul ol,.tk-rich-ed ol ul{margin:8px 0 0}
.tk-rich-ed li::marker{color:var(--ash)}
.tk-rich-ed ol>li::marker{color:var(--mute);font-weight:600;font-variant-numeric:tabular-nums}
.tk-rich-ed b,.tk-rich-ed strong{color:var(--ink);font-weight:650}
.tk-rich-ed>:first-child{margin-top:0}
.tk-rich-ed>:last-child{margin-bottom:0}

/* ---- an open body's header row: its description, and an icon button
   (the pencil that edits it) kept to the right ---- */
.tk-bhead{display:flex;align-items:flex-start;gap:12px}
.tk-bhead>.cat-desc{flex:1;min-width:0;padding-top:8px}
.tk-icbtn{
  position:relative;flex:none;width:40px;height:40px;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;border-radius:var(--r-full);
  border:1px solid var(--hairline-strong);background:var(--surface-card);color:var(--charcoal);transition:.15s
}
.tk-icbtn::after{content:"";position:absolute;inset:-4px}
.tk-icbtn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* nothing written yet: the empty note is itself the way in */
.tk-blankbtn{
  width:100%;text-align:left;cursor:pointer;padding:14px 16px;border-radius:var(--r-md);
  border:1px dashed var(--hairline-strong);background:var(--surface-deep);
  color:var(--mute);font-family:var(--sans);font-size:1rem;line-height:1.55
}
.tk-btn.danger{color:var(--accent-red)}
/* a label heading the open body's own header row (Your notes), beside its pencil */
.tk-bhead>.tkf-l{flex:1;min-width:0;padding-top:10px;margin:0}

/* ---- a labelled part of an open item, after the parts above it ---- */
.tk-part{margin-top:22px}
.tk-part + .tk-state{margin-top:4px}

/* ---- how to reach someone: label and value, the value tappable.
   Two columns at any width, the labels as narrow as the longest, so a
   number or an address keeps most of a 320px screen. ---- */
.tk-kv{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:16px 0 0;font-size:.9375rem;line-height:1.5}
.tk-kv dt{color:var(--mute);font-weight:500}
.tk-kv dd{margin:0;min-width:0;color:var(--body);overflow-wrap:anywhere}
.tk-kv a{color:var(--accent-blue);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent-blue) 40%,transparent);text-underline-offset:3px}

/* ---- where an item stands ---- */
.tk-state{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 2px}
.tk-state .tk-opt{font-size:.875rem;padding:6px 12px;min-height:36px}
.tk-state .tk-opt.on{
  border-color:color-mix(in srgb,var(--sc) 60%,transparent);
  background:color-mix(in srgb,var(--sc) 13%,var(--surface-card));color:var(--ink)
}
.tk-state-when{font-size:.875rem;color:var(--mute);margin-top:9px}

/* ---- progress and timeline (dashboards) ---- */
.tk-prog{margin:4px 0 20px}
.tk-prog-bar{display:flex;height:10px;border-radius:var(--r-full);overflow:hidden;background:var(--surface-elevated)}
.tk-prog-seg{height:100%;transition:width .35s ease}
.tk-prog-key{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:12px;font-size:.875rem;color:var(--mute)}
.tk-prog-key span{display:flex;align-items:center;gap:6px}
.tk-prog-key i{width:8px;height:8px;border-radius:50%;background:var(--kc);font-style:normal}
.tk-prog-n{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600}

.tk-tl-g{margin-bottom:22px}
.tk-tl-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:.9375rem;font-weight:650;color:var(--charcoal);margin-bottom:10px}
.tk-tl-when{font-size:.875rem;font-weight:500;color:var(--mute)}
.tk-row{
  display:flex;align-items:center;gap:12px;width:100%;cursor:pointer;text-align:left;
  padding:12px 14px;margin-bottom:8px;border-radius:var(--r-md);font-family:var(--sans);
  border:1px solid var(--hairline-strong);background:var(--surface-card);transition:.15s
}
.tk-row-dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--sc,var(--stone))}
/* The row's two lines stack even as spans, because the row itself is a
   <button> and a button may not contain block-level elements. */
.tk-row-m{flex:1;min-width:0;display:block}
.tk-row-t{display:block;font-size:1rem;font-weight:500;color:var(--ink);line-height:1.4}
.tk-row-s{display:block;font-size:.875rem;color:var(--mute);margin-top:2px;line-height:1.45}
.tk-row-n{flex:none;font-size:.8125rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--mute);background:var(--surface-elevated);border-radius:var(--r-sm);padding:2px 7px}
.tk-row.due .tk-row-s{color:var(--accent-yellow)}
.tk-row.over{border-color:color-mix(in srgb,var(--accent-red) 40%,transparent)}
.tk-row.over .tk-row-s{color:var(--accent-red)}
.tk-row svg{flex:none;width:16px;height:16px;stroke:var(--ash);fill:none;stroke-width:2}

/* a banner the reader must not be able to miss — the blocked state */
.tk-band{
  margin:2px 0 22px;padding:14px 16px;border-radius:var(--r-sm);
  border:1px solid color-mix(in srgb,var(--accent-red) 40%,transparent);border-left:4px solid var(--accent-red);
  background:color-mix(in srgb,var(--accent-red) 8%,var(--surface-card))
}
.tk-band-t{font-size:1rem;font-weight:650;color:var(--ink);line-height:1.4}
.tk-band-s{font-size:.9375rem;color:var(--body);line-height:1.55;margin-top:5px}
.tk-band.ok{
  border-color:color-mix(in srgb,var(--accent-green) 40%,transparent);border-left-color:var(--accent-green);
  background:color-mix(in srgb,var(--accent-green) 8%,var(--surface-card))
}

/* ---- a document, shown as a document ----
   Used for both the copy the tool will produce and the NHS original, so the
   two can be read against each other without changing register. */
.tk-doc{padding:20px 18px 8px;border-radius:var(--r-md);border:1px solid var(--hairline-strong);background:var(--surface-card)}
.tk-doc .cbk-h{font-family:var(--serif);font-weight:500;font-size:1.125rem}
.tk-doc-t{font-family:var(--serif);font-size:1.3125rem;font-weight:500;color:var(--ink);line-height:1.3;margin-bottom:4px}
.tk-doc-f{font-family:var(--mono);font-size:.8125rem;color:var(--accent-blue);margin-bottom:16px;overflow-wrap:anywhere}
.tk-doc-blank{font-size:.9375rem;color:var(--mute);font-style:italic}
/* A key-and-value table inside a document: the label column is prose, not a
   column head, so it wraps rather than forcing the table sideways. */
.tk-doc .cbk-tbl th[scope="row"]{
  white-space:normal;width:34%;font-weight:500;background:transparent;
  font-size:.875rem;color:var(--mute);border-bottom:1px solid var(--hairline)
}
.tk-doc .cbk-h:first-child,.tk-doc .cbk:first-child .cbk-h{margin-top:0}
/* an unfilled answer in the preview, so a gap is visible rather than silent */
.tk-doc-gap{color:var(--ash);font-style:italic}

/* ---- a real Word document, rendered as itself (tkWdHtml) ----
   Not a facsimile: NHS's templates are laid out with tab stops and printed
   rules, and reproducing their measurements on a 360px phone would be
   unreadable. What this keeps is the order, the emphasis and the structure,
   so an answer can be checked against the question it sits under. */
.tk-wd{font-size:.9375rem;color:var(--body);line-height:1.6;overflow-wrap:anywhere}
.tk-wd p{margin:0 0 8px}
.tk-wd strong{color:var(--ink);font-weight:650}
.tk-wd .cbk-h,.tk-wd .cbk-h3{margin-top:16px}
.tk-wd .cbk-h:first-child,.tk-wd .tk-doc-t:first-child{margin-top:0}
/* A tab is a gap, not a measured stop: wide enough to read as deliberate
   and narrow enough that five of them do not push a line off a phone. */
.tk-wd-tab{display:inline-block;width:1.6em}
/* A blank paragraph the template left to write in. It has to take up room,
   or the gaps NHS built into the form disappear from the preview. */
.tk-wd-sp{height:8px;margin:0}
.tk-wd-li{margin:0 0 8px;padding-left:1.5em;text-indent:-1.5em}
.tk-wd-li.lvl1{padding-left:3em;text-indent:-1.5em}
.tk-wd-bu{display:inline-block;width:1.5em;color:var(--ash);text-indent:0}
.tk-wd mark{background:color-mix(in srgb,var(--accent-yellow) 24%,transparent);color:var(--ink);border-radius:3px;padding:0 2px}
.tk-wd-noimg{font-family:var(--mono);font-size:.8125rem;color:var(--ash)}
.tk-wd .cbk-tw{margin:10px 0}
.tk-wd .cbk-tbl td{font-size:.875rem}
.tk-wd .cbk-tbl td p:last-child{margin-bottom:0}

/* the original, opened in a sheet. An iframe is the good path; iOS Safari
   often refuses to paint a PDF in one, so the link below it always works. */
.tk-emb{width:100%;height:min(68vh,760px);border:1px solid var(--hairline);border-radius:var(--r-md);background:var(--surface-elevated)}
.tk-emb-n{font-size:.875rem;color:var(--mute);line-height:1.55;margin-top:10px}
.tk-emb-n a{color:var(--accent-blue)}

/* a row of actions that wraps instead of overflowing at 360px */
.tk-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.tk-acts .tk-btn{width:auto;flex:1 1 auto;min-width:142px;margin:0}


/* ---- the numbers a tool leads with: a balance, what is owed ----
   Read before anything is opened, so they sit above the list, never in it.
   The first (.main) takes the whole row; the rest share it two by two. */
.tk-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin:4px 0 18px}
.tk-fig{padding:12px 14px;border-radius:var(--r-md);border:1px solid var(--hairline-strong);background:var(--surface-card);min-width:0}
.tk-fig.main{grid-column:1/-1}
.tk-fig-k{font-size:.875rem;font-weight:500;color:var(--mute);line-height:1.4}
.tk-fig-v{font-size:1.375rem;font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.3;margin-top:3px;overflow-wrap:anywhere}
.tk-fig.main .tk-fig-v{font-size:1.875rem;letter-spacing:-.01em}
.tk-fig-s{font-size:.875rem;color:var(--mute);line-height:1.45;margin-top:3px}
/* something waiting on the reader: the one accent, orange */
.tk-fig.due{border-color:color-mix(in srgb,var(--accent-orange) 45%,transparent);background:color-mix(in srgb,var(--accent-orange) 6%,var(--surface-card))}
.tk-fig.due .tk-fig-k{color:var(--accent-orange)}

.tk-part .cbk-tw{margin-top:10px}

/* a picture inside an open item: a payment's receipt */
.tk-img{display:block;max-width:100%;max-height:70vh;margin:12px 0 4px;border-radius:var(--r-md);border:1px solid var(--hairline-strong);background:var(--surface-elevated)}
/* the code a sign-in email carries: big enough to check digit by digit */
.tk-input.code{font-size:1.375rem;font-variant-numeric:tabular-nums;text-align:center;height:56px}

/* the no-patient-information line (tkNoPatient): always visible, quiet */
.tk-nopt{margin:14px 0 0;font-size:.875rem;line-height:1.45;color:var(--mute)}

/* ---- tkSkel: what a toggle shows while its data is on the way ----------
   A toggle opens on the tap, whatever it holds; where its data is still
   coming from the database, these glowing bars stand in for it, so the tap
   is answered at once and the wait reads as loading, not as a frozen app.
   With reduced motion they pulse gently instead of sweeping. The sweep is a
   highlight MOVED (transform), not a background repainted: animating
   background-position redrew every bar on every frame, on the main thread. */
.tk-skel{display:grid;gap:10px;padding:6px 0;max-width:var(--measure)}
.tk-skel i{display:block;position:relative;overflow:hidden;height:14px;border-radius:var(--r-sm);background:var(--hairline-strong)}
.tk-skel i::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,var(--hairline),transparent);animation:tk-skel 1.3s ease-in-out infinite}
.tk-skel i:nth-child(4n+2){width:86%}
.tk-skel i:nth-child(4n+3){width:62%}
.tk-skel i:nth-child(4n){width:74%}
.tk-skel.big i{height:28px;width:55%}
.tk-skel.big i+i{height:14px;width:40%}
@keyframes tk-skel{to{transform:translateX(100%)}}

/* ---- a conversation with a help bot (ECSP's Help bot) ----------------
   Your question sits to the right on a tint; the answer is body text at
   full measure, because it is the thing being read. While it works, one
   line says what it is doing, its dot pulsing by opacity alone. */
.tk-chat-log{display:grid;gap:14px;margin:2px 0 14px}
.tk-chat-q{justify-self:end;max-width:88%;padding:10px 14px;border-radius:var(--r-lg);background:var(--surface-elevated);
  color:var(--ink);font-size:1rem;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;max-height:16em;overflow:auto}
.tk-chat-a{max-width:var(--measure);overflow-wrap:anywhere}
.tk-chat-a .cbk:last-child p:last-child{margin-bottom:0}
.tk-chat-st{display:flex;align-items:center;gap:9px;font-size:.9375rem;line-height:1.45;color:var(--mute)}
.tk-chat-st::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent-blue);animation:tk-skel-pulse 1.2s ease-in-out infinite}
.tk-chat-err{font-size:.9375rem;line-height:1.5;color:var(--accent-red)}
.tk-chat-in .tk-chat-err{margin-top:10px}
/* photos and files sent with a question sit above it, to the right */
.tk-chat-att{justify-self:end;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;max-width:88%}
.tk-chat-full{display:block;max-width:100%;height:auto;border-radius:var(--r-md)}
/* the question box: one rounded line, the plus at its left, the microphone
   and send at its right. Taller than a line, the text takes the whole width
   and the buttons sit beneath it, as in the chat apps people already know. */
.tk-compose{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:"files files files files" "plus ta mic send";
  align-items:end;column-gap:2px;padding:6px;border:1px solid var(--hairline-strong);border-radius:28px;background:var(--surface-card);transition:border-color .15s}
.tk-compose:focus-within{border-color:var(--accent-blue)}
.tk-compose.tall{grid-template-areas:"files files files files" "ta ta ta ta" "plus . mic send";border-radius:var(--r-xl)}
.tk-compose-files{grid-area:files;display:flex;flex-wrap:wrap;gap:10px;padding:8px 8px 10px}
.tk-compose-files[hidden]{display:none}
.tk-compose-ta{grid-area:ta;width:100%;min-width:0;margin:0;padding:8px 6px;border:0;outline:none;resize:none;background:transparent;color:var(--ink);
  font-family:var(--sans);font-size:max(16px,1rem);line-height:1.5;overflow-y:auto}
.tk-compose.tall .tk-compose-ta{padding:8px 10px 6px}
.tk-compose-ta::placeholder{color:var(--ash)}
.tk-compose-b,.tk-compose-send{flex:none;width:40px;height:40px;padding:0;display:flex;align-items:center;justify-content:center;
  border:0;border-radius:var(--r-full);background:transparent;color:var(--charcoal);cursor:pointer;transition:.15s}
.tk-compose-b.plus{grid-area:plus}
.tk-compose-b.mic{grid-area:mic}
.tk-compose-b.on{color:var(--accent-red);background:color-mix(in srgb,var(--accent-red) 12%,transparent)}
.tk-compose-send{grid-area:send;background:var(--ink);color:var(--surface-card)}
.tk-compose-b:disabled{opacity:.45;cursor:default}
.tk-compose-send:disabled{opacity:.35;cursor:default}
.tk-compose-b svg,.tk-compose-send svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tk-compose-send svg{stroke-width:2.2}
/* a file: waiting in the box (with its cross), or sent with a question */
.tk-file{position:relative;display:inline-flex;align-items:center;gap:8px;max-width:100%;min-height:52px;padding:8px 14px 8px 11px;
  border-radius:var(--r-md);border:1px solid var(--hairline);background:var(--surface-elevated);color:var(--ink);font-family:var(--sans);font-size:.875rem;line-height:1.3}
.tk-file svg{flex:none;width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tk-file-n{min-width:0;max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-file.busy{color:var(--mute)}
.tk-file.pic{width:64px;height:64px;padding:0;cursor:pointer}
.tk-file.pic img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.tk-file-x{position:absolute;top:-8px;right:-8px;width:24px;height:24px;padding:0;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-full);border:1px solid var(--hairline-strong);background:var(--surface-card);color:var(--ink);cursor:pointer}
.tk-file-x::after{content:"";position:absolute;inset:-9px}
.tk-file-x svg{width:14px;height:14px;stroke-width:2}
/* under an answer: hear it read aloud, in the phone's own voice */
.tk-chat-say{display:inline-flex;align-items:center;gap:7px;margin-top:10px;min-height:40px;padding:0 15px 0 12px;cursor:pointer;
  border-radius:var(--r-full);border:1px solid var(--hairline-strong);background:var(--surface-card);color:var(--charcoal);
  font-family:var(--sans);font-size:.9375rem;line-height:1;transition:.15s}
.tk-chat-say svg{flex:none;width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tk-chat-say[aria-pressed="true"]{color:var(--ink);background:var(--surface-elevated)}
.tk-chat-in .tk-acts{margin-top:10px}
/* a row with its own delete button: the row opens, the button deletes */
.tk-chat-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.tk-chat-row .tk-row{flex:1;min-width:0;margin:0}
.tk-mem{display:flex;align-items:flex-start;gap:10px;padding:12px 0;border-bottom:1px solid var(--hairline)}
.tk-mem:last-child{border-bottom:0}
.tk-mem-m{flex:1;min-width:0}
.tk-mem-m .cbk-p{margin-bottom:4px}
.tk-mem-d{font-size:.8125rem;color:var(--mute)}

/* ===== A step to finish, inside an open item (ECSP's To-do and Portfolio) =====
   Its title, a line or two, at most one field, then its buttons; several in
   one item sit apart, divided by a hairline, never boxed. .tk-line is a fact
   said once, in the quieter colour: "2 of 3 logged", "Sent 12/01/2027". */
.tk-step{padding:4px 0 6px}
.tk-step + .tk-step{border-top:1px solid var(--hairline);margin-top:14px;padding-top:16px}
.tk-step-t{font-weight:600;font-size:1rem;line-height:1.4;color:var(--ink);margin-bottom:8px}
.tk-line{font-size:.9375rem;line-height:1.55;color:var(--mute);margin:0 0 10px;max-width:var(--measure)}
.tk-doc + .tk-doc{margin-top:12px}
/* ---- work over time (tkGantt) ---------------------------------------
   The range row, the key and the month scale stick to the top of the page
   while the rows scroll under them. Every row is a card the width of the
   page, and its track has the scale's insets, so a bar sits under its
   month. Bars are placed by percentage: nothing scrolls sideways. */
.tk-gantt{margin-top:4px}
.tk-g-head{position:sticky;top:0;z-index:3;background:var(--canvas);padding:6px 0 0;margin:0 0 6px}
.tk-g-rg{flex:none}
.tk-g-rg .fpill{--pc:var(--accent-blue)}
.tk-g-key{margin-top:10px}
.tk-g-key:empty{display:none}
.tk-g-sc{position:relative;height:30px;margin:8px 15px 0;border-bottom:1px solid var(--hairline-strong)}
.tk-g-tk{position:absolute;bottom:0;width:1px;height:8px;background:var(--hairline-strong)}
.tk-g-m{
  position:absolute;top:3px;padding-inline-start:4px;white-space:nowrap;
  font-family:var(--sans);font-size:max(13px,.8125rem);line-height:1.3;color:var(--mute);font-variant-numeric:tabular-nums
}
.tk-g-rows{display:flex;flex-direction:column;gap:8px}
.tk-g-rows>.grp-label{margin:14px 2px 0}
.tk-g-row{
  display:block;width:100%;min-height:44px;text-align:start;cursor:pointer;font-family:var(--sans);
  padding:11px 14px 12px;border:1px solid var(--hairline);border-radius:var(--r-md);
  background:var(--surface-card);color:var(--ink);transition:background .15s;contain-intrinsic-size:auto 92px
}
.tk-g-name{display:block;font-size:1rem;font-weight:600;line-height:1.4;letter-spacing:-.005em}
.tk-g-sub{display:block;font-size:.9375rem;line-height:1.45;color:var(--mute);margin-top:2px}
.tk-g-row.done .tk-g-name{color:var(--charcoal);font-weight:500}
.tk-g-tick{width:16px;height:16px;margin-inline-end:6px;vertical-align:-2px;stroke:var(--accent-green);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.tk-g-tr{position:relative;display:block;height:14px;margin-top:10px;border-radius:var(--r-full);background:var(--divider-soft)}
.tk-g-now{position:absolute;top:-3px;bottom:-3px;width:2px;margin-inline-start:-1px;border-radius:1px;background:var(--ink);opacity:.7}
/* in the scale, only below the month names, so it never covers one */
.tk-g-sc .tk-g-now{top:auto;bottom:-1px;height:11px}
/* the tones, from tokens: the bar and its key swatch alike */
.tk-g-mine{--gb:var(--accent-blue);--gl:var(--accent-blue)}
.tk-g-other{--gb:var(--ash);--gl:var(--ash)}
.tk-g-late{--gb:var(--accent-orange);--gl:var(--accent-orange)}
.tk-g-done{--gb:color-mix(in srgb,var(--mute) 26%,var(--surface-card));--gl:color-mix(in srgb,var(--mute) 40%,transparent)}
.tk-g-ahead{--gb:var(--surface-card);--gl:var(--ash)}
.tk-g-bar{
  position:absolute;top:1px;bottom:1px;min-width:4px;box-sizing:border-box;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-full);background:var(--gb);border:1.5px solid var(--gl)
}
.tk-g-bar.cs{border-start-start-radius:0;border-end-start-radius:0;border-inline-start:0}
.tk-g-bar.ce{border-start-end-radius:0;border-end-end-radius:0;border-inline-end:0}
.tk-g-bar svg{flex:none;width:10px;height:10px;stroke:var(--mute);fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.tk-g-key .tk-key-i i{background:var(--gb);border:1.5px solid var(--gl);border-radius:var(--r-full);width:22px;height:12px}
/* ============================================================
   HOVER — only where there is a pointer that hovers. On a phone a tapped
   row keeps :hover until something else is tapped, which left an open
   category or item looking pressed; touch gets the open state alone.
   ============================================================ */
@media (hover:hover){
  .theme-btn:hover,.tb-home:hover .home-btn{color:var(--ink);background:var(--surface-elevated)}
  .ver:hover{color:var(--ink)}
  .info-btn:hover{color:var(--ink)}
  .acc-cat:hover{background:var(--surface-elevated)}
  .acc-item:hover{background:var(--surface-elevated)}
  .tk-g-row:hover{background:var(--surface-elevated)}
  .tx-link:hover{color:var(--ink)}
  .sheet-x:hover{color:var(--ink)}
  .tk-choice:hover{background:var(--surface-elevated)}
  .tx-sec-h:hover{background:var(--surface-elevated)}
  .tx-step-h:hover{background:var(--surface-elevated)}
  .tx-step.open .tx-step-h:hover{background:transparent}
  .rt-go:hover{border-color:color-mix(in srgb,var(--accent-green) 55%,transparent)}
  .go-chip:hover{background:color-mix(in srgb,var(--accent-green) 16%,transparent)}
  .tr-h:hover{background:var(--surface-elevated)}
  .tr.open .tr-h:hover{background:transparent}
  .dec-a:hover{background:var(--surface-elevated)}
  .dec-opt.open .dec-a:hover{background:transparent}
  a.acc-item:hover .go{stroke:var(--accent-blue);transform:translateX(2px)}
  a.acc-item.tinted:hover{background:color-mix(in srgb,var(--pc) 24%,var(--surface-card))}
  a.acc-item.tinted:hover .go{stroke:var(--pc)}
  .tk-btn:hover{border-color:color-mix(in srgb,var(--accent-blue) 55%,transparent)}
  .tk-opt:hover{border-color:var(--stone)}
  .tk-grid-del:hover{color:var(--accent-red);border-color:color-mix(in srgb,var(--accent-red) 45%,transparent)}
  .tk-mx-b:hover{border-color:var(--accent-blue)}
  .tk-row:hover{background:var(--surface-elevated)}
  .tk-rich-b:hover{background:var(--surface-elevated)}
  .tk-rich-b.on:hover{background:color-mix(in srgb,var(--accent-blue) 16%,transparent)}
  .tk-icbtn:hover{color:var(--ink);background:var(--surface-elevated)}
  .tk-chat-say:hover{color:var(--ink);background:var(--surface-elevated)}
  .tk-compose-b:hover:not(:disabled){color:var(--ink);background:var(--surface-elevated)}
  .tk-compose-send:hover:not(:disabled){opacity:.85}
  .tk-swatch:hover{box-shadow:0 0 0 2px color-mix(in srgb,var(--pc) 55%,transparent)}
  .tk-swatch.on:hover{box-shadow:0 0 0 2px var(--pc)}
  .tk-blankbtn:hover{border-color:var(--stone)}
  .tk-filt-btn:hover{border-color:var(--stone)}
  .tk-btn.danger:hover{border-color:color-mix(in srgb,var(--accent-red) 55%,transparent)}
  .tk-kv a:hover{color:var(--ink)}
}

@media (prefers-reduced-motion: reduce){
  *{transition:none!important}
  .sheet,.sheet-bg{transition:none!important}
  .tk-skel i{animation:tk-skel-pulse 1.6s ease-in-out infinite}
  .tk-skel i::after{display:none}
}
@keyframes tk-skel-pulse{50%{opacity:.45}}