/* GUIDED STUDY (study/guide.js): a window of its own over the site and the Bible reader (under the
   window over the apps, so a word's meaning opens over it, and under Yours, so a note can be saved) */
.gst { position: fixed; inset: 0; z-index: 2147483050; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); font-family: var(--sans); opacity: 0; transform: translateY(14px); transition: opacity 0.22s ease, transform 0.22s ease; }
.gst.open { opacity: 1; transform: none; }
.gst[hidden] { display: none; }
.gst-head { flex: none; display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; border-bottom: 1px solid var(--rule); background: var(--bg); }
.gst-title { flex: 1; min-width: 0; display: flex; flex-direction: column; font: italic 400 22px/1.1 var(--serif); }
.gst-title small { font: 800 10.5px var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); font-style: normal; }
.gst-x { flex: none; padding: 8px 16px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg-raised); color: var(--ink); font: 700 14px var(--sans); cursor: pointer; }
.gst-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 16px 16px calc(28px + env(safe-area-inset-bottom)); }
.gst-start, .gst-step { max-width: 640px; margin: 0 auto; }
.gst-lede { margin: 0 0 16px; font: 15px/1.5 var(--sans); color: var(--muted); }
.gst-pick label { display: block; margin: 0 0 6px; font: 800 11px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.gst-pick-row { display: flex; gap: 8px; }
.gst-pick input { flex: 1; min-width: 0; padding: 11px 14px; border: 1.5px solid var(--rule); border-radius: 14px; background: var(--bg-raised); color: var(--ink); font: 17px var(--serif); }
.gst-pick input:focus { outline: none; border-color: var(--gold); }
.gst-go, .gst-next { flex: none; padding: 10px 18px; border: none; border-radius: 999px; background: var(--gold); color: var(--on-gold, #1c1a17); font: 800 14px var(--sans); cursor: pointer; }
.gst-err { margin: 8px 2px 0; font-size: 13.5px; color: #B0473E; }
.gst-err[hidden] { display: none; }
.gst-pick input::placeholder { color: var(--muted); opacity: 0.6; font-style: italic; }
.gst-sugs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.gst-sug { display: inline-flex; flex-direction: column; align-items: flex-start; padding: 7px 13px; border: 1px solid var(--rule); border-radius: 14px; background: var(--bg-raised); color: var(--ink); font: 600 14px var(--serif); cursor: pointer; }
.gst-sug.is-here { border-color: color-mix(in srgb, var(--gold) 60%, var(--rule)); background: color-mix(in srgb, var(--gold) 9%, var(--bg-raised)); }
.gst-sug small { font: 800 10px var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.gst-try { padding: 1px 8px; border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--rule)); border-radius: 999px; background: var(--bg-raised); color: var(--ink); font: 700 13px var(--sans); cursor: pointer; }
.gst-h { margin: 22px 0 8px; font: 800 11px var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.gst-method { padding: 14px 16px; border: 1.5px solid color-mix(in srgb, var(--gold) 55%, var(--rule)); border-radius: 16px; background: color-mix(in srgb, var(--gold) 7%, var(--bg-raised)); }
.gst-method b { display: block; font: 400 20px var(--serif); }
.gst-method small { font: 700 12px var(--sans); color: var(--muted); }
.gst-method p { margin: 8px 0 0; font: 15px/1.5 var(--sans); }
.gst-method details { margin-top: 8px; }
.gst-method summary { font: 700 13px var(--sans); color: var(--gold); cursor: pointer; }
.gst-method details p { color: var(--muted); font-size: 14px; }
.gst-method .gst-more { margin-top: 10px; }
.gst-method .gst-more summary { padding: 8px 0 2px; }
.gst-method .gst-more-note { margin: 6px 0 2px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.gst-method .gst-more li { margin: 7px 0; font-size: 14px; line-height: 1.4; }
/* "Your studies": a named list (nav/ui.css), its rows swiping as the Bible's ribbons do (reader/reader.css's .rbx-*):
   left to delete, right to rename; on a computer, a quiet pencil and × at the row's end. Renaming, the row is a field. */
.gst-list { margin-top: 22px; }
.gst-mine { gap: 0; }
.gst-mine li { border-radius: 0; }
.gst-mine .rbx-in { padding: 0; border-radius: 0; background: var(--bg-raised); }
.gst-mine .rbx-act { border-radius: 0; }
.gst-mine .rbx-act.is-ren { background: color-mix(in srgb, var(--gold) 40%, var(--bg-raised)); color: var(--ink); }
.gst-mine li.is-far .rbx-act.is-ren { background: var(--gold); color: var(--on-gold, #fff); }
.gst-mine .gst-row { flex: 1; min-width: 0; }
.gst-ren, .gst-rm { display: none; flex: none; place-items: center; width: 34px; height: 34px; margin-right: 10px; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: var(--bg); color: var(--muted); font: 400 20px/1 var(--sans); cursor: pointer; opacity: 0.6; }
.gst-ren { margin-right: 6px; }
.gst-ren svg { width: 15px; height: 15px; }
@media (hover: hover) and (pointer: fine) { .gst-ren, .gst-rm { display: grid; } .gst-ren:hover, .gst-rm:hover { opacity: 1; color: var(--ink); } }
.gst-mine.rbx-list li.is-edit { padding: 0; overflow: hidden; }
.gst-mine.rbx-list li.is-edit .rbx-in { gap: 8px; padding: 8px 10px 8px 14px; }
.gst-mine.rbx-list li.is-edit input { flex: 1; min-width: 0; padding: 8px 12px; border-color: var(--gold); border-radius: 12px; font: 600 16px var(--sans); }
.gst-mine.rbx-list li.is-edit .ui-btn { min-height: 38px; padding: 0 14px; }
.gst-undo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; padding: 9px 14px; border: 1px dashed var(--rule); border-radius: 14px; font: 14px var(--sans); color: var(--muted); }
.gst-undo b { color: var(--ink); font-weight: 600; }
.gst-kept { margin: 8px 2px 0; font: 12.5px/1.45 var(--sans); color: var(--muted); }
/* a step */
/* Studying together (study/guide.js): the strip under the dots, who's here, the leader's switch, Invite and Leave; and
   under your box for a step, what the others wrote */
.gst-live { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 2px; padding: 10px 14px; border: 1px solid var(--rule); border-radius: 14px; background: var(--bg-raised); }
.gst-live.is-off { padding: 0; border: none; background: none; align-items: flex-start; }
.gst-live .ui-chip svg { width: 15px; height: 15px; color: var(--door, var(--gold)); }
.gst-live-row { display: flex; align-items: flex-start; gap: 8px; font: 14px/1.45 var(--sans); }
.gst-live-row > svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--door, var(--gold)); }
.gst-live-sw { display: flex; align-items: center; gap: 10px; font: 600 13.5px var(--sans); cursor: pointer; }
.gst-live-note { font: 13px/1.4 var(--sans); color: var(--muted); }
.gst-live-name label { display: block; margin: 0 0 6px; font: 600 13.5px var(--sans); }
.gst-live-name input { flex: 1; min-width: 0; padding: 9px 12px; }
.gst-live-name .gst-forget { margin-top: 2px; align-self: flex-start; }
.gst-theirs:empty { display: none; }
/* (a review: their answers to read, a comment under each, the passage to mark) */
.gst-review .gst-mineans { margin: 0 0 8px; }
.gst-none { margin: 0 0 8px; font: italic 14.5px var(--serif); color: var(--muted); }
.gst-ask.is-comment { margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.gst-a.is-comment { min-height: 64px; font: 15px/1.5 var(--sans); }
.gst-review .tf { margin-top: 8px; }
.gst-ends .gst-next svg, .gst-ends .gst-tool svg { width: 16px; height: 16px; }
.gst-theirs { display: grid; gap: 6px; margin-top: 8px; }
.gst-their { padding: 9px 13px; border-left: 3px solid color-mix(in srgb, var(--door, var(--gold)) 55%, var(--rule)); border-radius: 0 12px 12px 0; background: color-mix(in srgb, var(--door, var(--gold)) 6%, var(--bg-raised)); }
.gst-their b { display: block; font: 800 10.5px var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.gst-their p { margin: 2px 0 0; font: 15px/1.5 var(--serif); }
.gst-next:disabled, .gst-dot:disabled { opacity: 0.35; cursor: default; }
.gst-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gst-ref { max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 6px 12px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg-raised); color: var(--ink); font: 600 14px var(--serif); cursor: pointer; }
.gst-of { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 12px var(--sans); color: var(--muted); }
.gst-dots { display: flex; gap: 5px; margin: 12px 0 4px; }
.gst-dot { flex: 1; height: 5px; padding: 0; border: none; border-radius: 3px; background: var(--rule); cursor: pointer; }
.gst-dot.is-done { background: color-mix(in srgb, var(--gold) 55%, var(--rule)); }
.gst-dot.is-on { background: var(--gold); }
.gst-pray { margin: 14px 0 0; padding: 10px 14px; border-left: 3px solid var(--gold); background: color-mix(in srgb, var(--gold) 7%, transparent); font: italic 15px/1.5 var(--serif); }
.gst-st { margin: 16px 0 8px; font: 400 26px/1.15 var(--serif); }
.gst-st svg { width: 22px; height: 22px; vertical-align: -2px; color: var(--gold); }
.gst-do { margin: 0 0 10px; font: 16px/1.55 var(--sans); }
.gst-why { margin: 0 0 14px; font: italic 15px/1.5 var(--serif); color: var(--muted); }
.gst-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.gst-tool { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg-raised); color: var(--ink); font: 700 13px var(--sans); cursor: pointer; }
.gst-tool svg { width: 16px; height: 16px; color: var(--gold); }
.gst-text { margin: 0 0 16px; border: 1px solid var(--rule); border-radius: 14px; background: var(--bg-raised); }
.gst-text summary { padding: 10px 14px; font: 600 15px var(--serif); cursor: pointer; }
.gst-passage { max-height: 50vh; overflow-y: auto; padding: 0 14px; }
.gst-tip { margin: 0; padding: 6px 14px 10px; font-size: 12px; color: var(--muted); }
/* (a step's place on the path, in From Text to Truth: "Why this step?"; and in What does it teach?, folded, the truths it's listed under) */
.gst-kind { margin: 2px 0 10px; }
.gst-taught { margin-top: 12px; }
.gst-taught-in .gst-tip { padding-top: 0; }
.gst-taught-l { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 14px; }
.gst-ask { display: block; margin: 0 0 6px; font: 700 14px var(--sans); }
.gst-abox { position: relative; }
.gst-a { display: block; width: 100%; box-sizing: border-box; min-height: 120px; padding: 12px 14px; border: 1.5px solid var(--rule); border-radius: 14px; background: var(--bg-raised); color: var(--ink); font: 16px/1.55 var(--serif); resize: none; }
/* (the box's own corner to drag: two short lines, like the browser's) */
.gst-grip { position: absolute; right: 2px; bottom: 2px; width: 26px; height: 26px; padding: 0; border: none; border-radius: 0 0 12px 0; background: linear-gradient(135deg, transparent 0 55%, var(--muted) 55% 61%, transparent 61% 71%, var(--muted) 71% 77%, transparent 77%) no-repeat 3px 3px / 16px 16px; opacity: 0.55; cursor: ns-resize; touch-action: none; }
.gst-grip:hover, .gst-grip:active { opacity: 1; }
.gst-a:focus { outline: none; border-color: var(--gold); }
.gst-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; }
.gst-back { padding: 10px 16px; border: 1px solid var(--rule); border-radius: 999px; background: none; color: var(--ink); font: 700 14px var(--sans); cursor: pointer; }
.gst-back:disabled { opacity: 0.35; cursor: default; }
/* the end */
.gst-mineans { margin: 0; font: 16px/1.55 var(--serif); white-space: normal; }
.gst-ends { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.gst-forget { margin-top: 18px; padding: 0; border: none; background: none; color: var(--muted); font: 600 12.5px var(--sans); text-decoration: underline; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .gst { transition: none; transform: none; } }

/* Step into their world: the history behind the passage (study/world.json), under the step's instructions */
.gst-world { margin: 4px 0 14px; padding: 2px 14px 12px; border: 1.5px solid color-mix(in srgb, var(--gold) 45%, var(--rule)); border-radius: 16px; background: color-mix(in srgb, var(--gold) 6%, var(--bg-raised)); }
.gst-world .gst-h { margin: 16px 0 7px; }
.gst-wload { margin: 12px 0; font: italic 14px var(--serif); color: var(--muted); }
.gst-brief { display: grid; gap: 5px; }
.gst-wrow { display: grid; grid-template-columns: 84px 1fr; gap: 10px; font: 14px/1.45 var(--sans); }
.gst-wrow b { font: 800 10.5px/1.7 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.gst-wthen { margin: 0; font: 14px/1.5 var(--sans); }
.gst-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gst-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 6px 11px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg); color: var(--ink); font: 700 13px var(--sans); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gst-chip svg { flex: none; width: 14px; height: 14px; color: var(--gold); }
.gst-wnote { margin: 0 0 12px; }
.gst-wnote b { font: 700 15.5px var(--serif); }
.gst-wnote small { margin-left: 8px; font: 700 11px var(--sans); color: var(--muted); white-space: nowrap; }
.gst-wnote p { margin: 4px 0 6px; font: 14px/1.55 var(--sans); }
@media (max-width: 420px) { .gst-wrow { grid-template-columns: 1fr; gap: 1px; } .gst-wrow b { line-height: 1.3; } }
/* (in the Bible reader's Split view: the panel without its own frame, the pane is one) */
.bs-world { margin: 0; padding: 0 2px 10px; border: none; background: none; }
.bs-world .gst-h:first-child { margin-top: 6px; }
.gst-wwho { margin-top: 8px; }

/* What does it say?: marking the words in the text (the helpers' switches, the pen's colors, the key of repeated words) */
.gst-marks { margin: 0 0 14px; padding: 12px 14px 10px; border: 1.5px solid color-mix(in srgb, var(--gold) 45%, var(--rule)); border-radius: 16px; background: color-mix(in srgb, var(--gold) 6%, var(--bg-raised)); }
.gst-marks-h { margin: 0 0 8px; font: 800 11px var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.gst-mk { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1.5px solid var(--rule); border-radius: 999px; background: var(--bg); color: var(--ink); font: 700 13px var(--sans); cursor: pointer; --c: var(--gold); }
.gst-mk i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); opacity: 0.45; }
.gst-mk.is-on { border-color: var(--c); background: color-mix(in srgb, var(--c) 16%, var(--bg)); }
.gst-mk.is-on i { opacity: 1; }
.gst-mk.is-rep { --c: #E0B96B; } .gst-mk.is-join { --c: #6E9ACB; } .gst-mk.is-cmd { --c: #D47A5A; } .gst-mk.is-who { --c: #7FA37E; }
.gst-mk.is-link { --c: var(--ink); } .gst-mk.is-link i { border-radius: 2px; }
.gst-mk.is-clear { color: var(--muted); border-style: dashed; }
.gst-pens { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 10px 0 2px; }
.gst-penc { width: 26px; height: 26px; padding: 0; border: 2px solid transparent; border-radius: 50%; background: var(--c); cursor: pointer; box-shadow: inset 0 0 0 2px var(--bg-raised); }
.gst-penc.is-on { border-color: var(--ink); }
.gst-pens small, .gst-mtip { font: 12.5px/1.45 var(--sans); color: var(--muted); }
.gst-mtip { margin: 10px 0 2px; }
.gst-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.gst-legend:not(:empty) { margin-top: 10px; }
.gst-legend small { flex-basis: 100%; font: 700 11px var(--sans); color: var(--muted); }
.gst-lg { padding: 4px 10px; border: 1px solid color-mix(in srgb, #E0B96B 55%, var(--rule)); border-radius: 999px; background: color-mix(in srgb, #E0B96B 14%, var(--bg)); color: var(--ink); font: 600 13px var(--sans); cursor: pointer; }
.gst-lg b { font-weight: 800; color: var(--muted); }
.gst-lg.is-on { background: #E0B96B; border-color: #E0B96B; color: #1c1a17; }
.gst-lg.is-on b { color: #1c1a17; }
.gst-lg:not(.is-on) { opacity: 0.6; } /* (a repeated word not picked out: quiet, like its words in the passage) */
.gst-lgall { padding: 0 2px; border: none; background: none; color: var(--ink); font: 700 11px var(--sans); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.gst-lgall.is-on { color: var(--muted); text-decoration: none; cursor: default; }
/* the words, marked: a wash behind each kind; the pen's, in its color; tied words underlined, with their number */
.gsw { border-radius: 4px; transition: background 0.15s ease, opacity 0.15s ease; }
/* (a bracket round words within a line: the room beside them it sits in, HandMarks.ROOM's 0.4em: study/guide.js's bkRoom) */
.gsw.tf-bl { margin-left: 0.4em; }
.gsw.tf-br { margin-right: 0.4em; }
.gsw.m-rep { background: color-mix(in srgb, #E0B96B 38%, transparent); }
.gsw.m-join { background: color-mix(in srgb, #6E9ACB 32%, transparent); box-shadow: 0 2px 0 #6E9ACB; }
.gsw.m-cmd { background: color-mix(in srgb, #D47A5A 32%, transparent); font-weight: 700; }
.gsw.m-who { background: color-mix(in srgb, #7FA37E 34%, transparent); }
/* (the pen: a highlighter's stroke, bright, a little taller than the words and slanted at its ends, over any helper's wash) */
.gsw.m-pen { padding: 0 3px; margin: 0 -3px; border-radius: 1px; background: linear-gradient(100deg, transparent 0, var(--p) 6%, var(--p) 94%, transparent 100%) no-repeat 0 72% / 100% 82%; color: #1c1a17; box-shadow: none; font-weight: inherit; }
.gsw.m-pen.m-cmd { font-weight: 700; }
.gsw.is-dim { opacity: 0.45; }
.gsw.m-link { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--ink); }
.gsw.is-held { outline: 2px dashed var(--gold); outline-offset: 1px; }
.gsw-ln { display: inline-block; vertical-align: super; margin-left: 1px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px; background: var(--ink); color: var(--bg); font: 800 9px/14px var(--sans); text-align: center; font-style: normal; }
.gst-passage.is-marking .gsw { cursor: pointer; }

/* What does it say?: the thought flow diagram (study/guide.js). The passage in a box of its own, laid out line by line:
   each line as deep as it's indented (faint guides down the depths), a space above where the argument moves on, a long
   line's run-on tucked in under it; its bar stays at the top of the window while the box is in view (right under its
   header: a sticky bar stops at the scrolling body's padding, so it's lifted by that, .gst-body's 16px) */
.tf { margin: 0 0 16px; border: 1px solid var(--rule); border-radius: 16px; background: var(--bg-raised); }
.tf-top { padding: 12px 14px 0; }
.tf-got { margin: 8px 14px 0; padding: 9px 12px; border-radius: 12px; background: color-mix(in srgb, var(--gold) 12%, var(--bg-raised)); font: 14px/1.45 var(--sans); }
.tf-got.is-off { background: color-mix(in srgb, var(--ink) 6%, var(--bg-raised)); color: var(--muted); }
.tf-got[hidden] { display: none; }
.tf-ends .ui-chip svg { width: 16px; height: 16px; }
/* (the step's how-to, one numbered list over the box: read it, break it into lines, mark it) */
.tf-how { display: grid; gap: 12px; margin: 0 0 18px; padding: 0; list-style: none; counter-reset: tf-how; }
.tf-how li { position: relative; padding-left: 36px; font: 15.5px/1.5 var(--sans); counter-increment: tf-how; }
.tf-how li::before { content: counter(tf-how); position: absolute; left: 0; top: 0; width: 25px; height: 25px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 8%, var(--bg-raised)); color: var(--ink); font: 700 13px/25px var(--sans); text-align: center; }
.tf-how b { font-weight: 700; }
.tf-how-tool { display: flex; width: max-content; max-width: 100%; margin-top: 8px; }
/* (Show me: the helpers, in a quiet row at the top of the box) */
.tf-show { padding: 10px 14px 0; }
.tf-show-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tf-show-h { margin-right: 2px; font: 700 13px var(--sans); color: var(--muted); }
.tf-show .gst-mk { gap: 5px; padding: 4px 9px; border-width: 1px; font-size: 12.5px; }
.tf-show .gst-mk i { width: 8px; height: 8px; }
.tf-bar { position: sticky; top: -16px; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 10px; padding: 8px 10px; border-block: 1px solid var(--rule); background: var(--bg-raised); }
.tf-pal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
@media (max-width: 560px) { .tf-bar .ui-tools { flex: 1 1 100%; justify-content: space-between; } .tf-bar .ui-tools > button { min-width: 32px; padding: 0 6px; gap: 4px; } .tf-bar .ui-tools > .tf-q { min-width: 26px; padding: 0; } } /* (on a phone, each the box's width, its tools a touch closer) */
.tf-glyph { font: 700 16px/1 var(--serif); }
i.tf-glyph { font-weight: 400; font-style: italic; } u.tf-glyph { font-weight: 400; text-underline-offset: 2px; }
.tf-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--hl, var(--fc)); }
.tf-pal { padding: 2px 0; }
.tf-pal, .tf-msg { flex-basis: 100%; } /* (the bar's two rows side by side where there's room; its colors and its tip under them) */
.tf-sw { --c: var(--hl, var(--fc)); }
.tf-msg { margin: 0; min-height: 36px; font: 12.5px/1.45 var(--sans); color: var(--muted); } /* (two lines' room kept, so the bar stays the same height from tool to tool) */
.tf-msg[hidden] { display: none; }
/* (? on the bar, and what it opens: a line on each tool) */
.tf-q { display: inline-grid; place-items: center; width: 26px; height: 26px; margin: 0 2px 0 auto; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: var(--bg-raised); color: var(--muted); font: 700 13px var(--sans); cursor: pointer; }
.ui-tools > .tf-q { min-width: 26px; min-height: 26px; border-radius: 50%; }
/* (the ? wiggling and pulsing, until it's been opened once) */
.ui-tools > .tf-q.is-nudge { position: relative; border-color: var(--gold); color: var(--gold); animation: tf-q-wig 4.2s ease-in-out var(--nd, 0s) 4; }
.ui-tools > .tf-q.is-nudge::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--gold); pointer-events: none; animation: tf-q-pulse 4.2s ease-out var(--nd, 0s) 4; opacity: 0; }
@keyframes tf-q-wig { 0%, 3% { transform: none; } 6% { transform: rotate(-16deg) scale(1.12); } 10% { transform: rotate(14deg) scale(1.12); } 14% { transform: rotate(-10deg) scale(1.08); } 18% { transform: rotate(6deg) scale(1.04); } 22%, 100% { transform: none; } }
@keyframes tf-q-pulse { 0%, 4% { opacity: 0; transform: scale(1); } 8% { opacity: 0.9; transform: scale(1); } 34% { opacity: 0; transform: scale(2.1); } 100% { opacity: 0; transform: scale(2.1); } }
@media (prefers-reduced-motion: reduce) { .ui-tools > .tf-q.is-nudge { animation: none; } .ui-tools > .tf-q.is-nudge::after { animation: none; opacity: 0.6; } }
.ui-tools > .tf-q.is-on { background: var(--gold); border-color: var(--gold); color: var(--on-gold, #221E19); box-shadow: none; }
.tf-help { display: grid; gap: 6px; width: 100%; margin: 0; padding: 2px 4px 4px; font: 13px/1.45 var(--sans); }
.tf-help div { display: grid; grid-template-columns: 96px 1fr; gap: 8px; }
.tf-help dt { display: flex; align-items: center; gap: 4px; font-weight: 800; color: var(--ink); }
.tf-help div { grid-template-columns: 168px 1fr; align-items: start; }
@media (max-width: 560px) { .tf-help div { grid-template-columns: 1fr; gap: 4px; margin-bottom: 6px; } } /* (a phone: each tool's button over what it does) */
/* (Show me how: each tool's name a button, with a small play under it; tapped, it plays itself out on the passage) */
.tf-demo-b { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 10px 6px 8px; border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--rule)); border-radius: 12px; background: color-mix(in srgb, var(--gold) 8%, var(--bg-raised)); color: var(--ink); font: 800 13px/1.2 var(--sans); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.2s ease, box-shadow 0.3s ease; }
.tf-demo-b svg { width: 14px; height: 14px; vertical-align: -2px; }
.tf-demo-p { display: inline-flex; align-items: center; gap: 3px; font: 700 10.5px var(--sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold); }
.tf-demo-p svg { width: 10px; height: 10px; }
.tf-demo-p em { font-style: normal; }
.tf-demo-b:active { background: color-mix(in srgb, var(--gold) 22%, var(--bg-raised)); }
.tf-demo-b.is-just { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 55%, transparent); }
/* (while it plays: a finger, a line saying what it's doing with Stop, and nothing else to touch) */
.tf-finger { position: fixed; z-index: 2147483460; left: -60px; top: -60px; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: rgba(226, 201, 143, 0.42); border: 2px solid rgba(255, 255, 255, 0.85); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); pointer-events: none; opacity: 0; transition-property: left, top, opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
.tf-finger.is-on { opacity: 1; }
.tf-finger.is-tap { animation: tf-tap 0.26s ease; }
.tf-finger.is-hold::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--gold); animation: tf-holdring 0.65s ease-out forwards; }
@keyframes tf-tap { 40% { transform: scale(0.72); background: rgba(226, 201, 143, 0.75); } }
@keyframes tf-holdring { from { transform: scale(0.6); opacity: 1; } to { transform: scale(1.5); opacity: 0.25; } }
.tf-demo-block { position: fixed; inset: 0; z-index: 2147483440; }
.tf-demo { position: fixed; z-index: 2147483470; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 12px; width: min(560px, calc(100vw - 32px)); box-sizing: border-box; padding: 10px 10px 10px 16px; border-radius: 16px; background: var(--bg-raised); color: var(--ink); border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--rule)); box-shadow: 0 14px 34px -12px rgba(30, 22, 12, 0.5); font: 600 14px/1.4 var(--sans); }
.tf-demo.is-top { bottom: auto; top: calc(12px + env(safe-area-inset-top)); }
.tf-demo-t { flex: 1; min-width: 0; }
.tf-demo .ui-btn { flex: none; }
.ui-tools > button.is-demo { background: color-mix(in srgb, var(--gold) 30%, transparent); }
.tf-help dt svg { width: 15px; height: 15px; }
.tf-help dd { margin: 0; color: var(--muted); }
/* (the keys, where there's a keyboard to press them on) */
.tf-help kbd { display: none; margin-left: 2px; padding: 1px 6px; border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: 6px; background: var(--bg); color: var(--muted); font: 700 11px var(--sans); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .tf-help kbd { display: inline-block; } }
/* (the key: what each highlighter means, named by you. Naming them, in the bar: a field for each color; named, the
   highlighters are pills with their names; and the key under the passage, each name a chip that picks that color) */
.tf-names { display: grid; gap: 8px; width: 100%; padding: 4px 0 2px; }
.tf-names-h { margin: 0; font: 700 13.5px var(--sans); }
.tf-name { display: flex; align-items: center; gap: 10px; }
.tf-name .tf-dot { flex: none; width: 16px; height: 16px; }
.tf-name input { flex: 1; min-width: 0; padding: 8px 12px; font-size: 15px; }
.tf-names .tf-msg { margin: 2px 0 0; }
.tf-names > .ui-chip { width: max-content; }
.tf-pal .tf-namebtn { min-height: 30px; padding: 4px 11px; font-size: 12.5px; color: var(--muted); }
.tf-swn { gap: 7px; } .tf-swn .tf-dot { width: 12px; height: 12px; }
.tf-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.tf-key .ui-label { margin-right: 4px; }
.tf-key-c { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 7px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg); color: var(--ink); font: 600 13px var(--sans); cursor: pointer; }
.tf-key-c .tf-dot { width: 12px; height: 12px; }
span.tf-key-c { cursor: default; }
.gst-done .tf-key { margin: 10px 0 0; }
/* (a shape's color, in the key and the naming: a small box in it) */
.tf-dotS { display: inline-block; width: 10px; height: 10px; border: 2px solid var(--fc); border-radius: 3px; box-sizing: border-box; }
.tf-name .tf-dotS { flex: none; width: 16px; height: 16px; }
.tf-swn .tf-dotS, .tf-key-c .tf-dotS { width: 12px; height: 12px; }
/* (a box or a circle picked up: its inside can be dragged too, so a small one can be moved by more than its edge) */
.tf-edw.is-shapes .tf-sh.is-on > .tf-sh-hit { pointer-events: all; fill: transparent; }
/* (a color of the words, in the key and the naming: an A in it) */
.tf-dotA { font: 800 14px/1 var(--sans); color: var(--fc); }
.tf-name .tf-dotA { flex: none; width: 16px; text-align: center; font-size: 16px; }
/* (a note on a line: a small mark at the line's end, which opens the note under the line in the margin's quiet italic;
   tapped, the note is a field to write in, with Done and Delete) */
.tf-nm { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 5px; padding: 0; border: none; border-radius: 50%; background: color-mix(in srgb, var(--gold) 20%, var(--bg-raised)); color: var(--gold); vertical-align: 0.1em; cursor: pointer; }
.tf-nm svg { width: 12px; height: 12px; }
.tf-nm.is-on { background: var(--gold); color: var(--on-gold, #221E19); }
.tf-nc { margin: 4px 0 8px; padding: 7px 12px; border-left: 2px solid color-mix(in srgb, var(--gold) 55%, var(--rule)); border-radius: 0 10px 10px 0; background: color-mix(in srgb, var(--gold) 6%, var(--bg)); font: italic 14.5px/1.45 var(--sans); color: var(--muted); text-indent: 0; white-space: pre-wrap; cursor: pointer; }
.tf-nc.is-edit { font-style: normal; cursor: default; }
.tf-nt { display: block; width: 100%; box-sizing: border-box; min-height: 52px; padding: 7px 10px; font-size: 15px; line-height: 1.45; resize: none; }
.tf-nc-acts { display: flex; gap: 14px; margin-top: 6px; }
.tf-nc-btn { padding: 0; border: none; background: none; color: var(--ink); font: 700 13px var(--sans); cursor: pointer; }
.tf-nc-btn.is-del { color: var(--muted); }
.tf-ed.is-done .tf-nc { cursor: default; }
.tf-notesall svg { width: 15px; height: 15px; }
.tf-ed { padding: 12px 14px 14px; font-family: var(--br-font, Georgia, "Times New Roman", serif); font-size: 18px; line-height: 1.7; color: var(--ink); outline: none; caret-color: var(--gold); touch-action: manipulation; } /* (manipulation: no double-tap zoom, and taps come at once) */
.tf-ed:focus-visible { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 35%, transparent); }
.tf-ln { margin: 0; padding-left: calc(var(--in, 0) * 1.5em + 1em); text-indent: -1em; background: repeating-linear-gradient(to right, color-mix(in srgb, var(--ink) 13%, transparent) 0 1px, transparent 1px 1.5em) no-repeat 0.35em 0 / calc(var(--in, 0) * 1.5em) 100%; }
.tf-ln.is-gap { margin-top: 0.9em; }
.tf-ln .br-n, .tf-ln .gsw-ln { text-indent: 0; }
.tf-load { margin: 0; font: italic 15px var(--serif); color: var(--muted); }
.tf-ed.is-marking .gsw { cursor: pointer; }
.tf-ed .br-verse sup.br-n { cursor: text; } /* (a verse's number: a tap puts the caret before the verse, not the reader's pick) */
.tf-ed.is-done { padding: 4px 0 0; font-size: 16.5px; }
/* (the marks: bold, italic, underlined; a highlighter's band behind the words, through the spaces of a phrase marked
   whole; and the words' own colors, lighter in the dark) */
.tf-b { font-weight: 700; } .tf-i { font-style: italic; }
.tf-u { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.tf-hl0 { --hl: #FFE14D; } .tf-hl1 { --hl: #FF8FB8; } .tf-hl2 { --hl: #6FE3C4; } .tf-hl3 { --hl: #FFA552; } .tf-hl4 { --hl: #9CC8FF; } .tf-hl5 { --hl: #CDB2FF; }
.tf-fc0 { --fc: #C0392B; --fcl: #C0392B; } .tf-fc1 { --fc: #2463AE; --fcl: #2463AE; } .tf-fc2 { --fc: #2E7D4F; --fcl: #2E7D4F; } .tf-fc3 { --fc: #8A43B0; --fcl: #8A43B0; } .tf-fc4 { --fc: #B45A0C; --fcl: #B45A0C; }
body.site-dark .tf-fc0 { --fc: #FF8A7E; } body.site-dark .tf-fc1 { --fc: #8FB8F2; } body.site-dark .tf-fc2 { --fc: #7FCB98; } body.site-dark .tf-fc3 { --fc: #CDA2EA; } body.site-dark .tf-fc4 { --fc: #F2A25C; }
.tf-ed .tf-j { color: var(--wj, #B3261E); } body.site-dark .tf-ed .tf-j { color: var(--wj, #F08A7E); }
.tf-ed .tf-col { color: var(--fc); }
/* (your highlighter: not a flat wash like Show me's soft ones behind the words, but a box of its own, rounded, with a
   thin line around it in its color, so what you marked stands out from what the site lit for you; a phrase marked
   whole is one box, through its spaces) */
.tf-ed .gsw.tf-h, .tf-ed .tf-g.tf-h { --hlo: color-mix(in srgb, var(--hl) 72%, var(--ink)); padding: 0.1em 0; border-top: 1.5px solid var(--hlo); border-bottom: 1.5px solid var(--hlo); border-radius: 0; background: color-mix(in srgb, var(--hl) 60%, var(--bg-raised)); color: #1c1a17; box-shadow: none; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.tf-ed .gsw.tf-hs { margin-left: -0.2em; padding-left: 0.2em; border-left: 1.5px solid var(--hlo); border-radius: 0.5em 0 0 0.5em; }
.tf-ed .gsw.tf-he { margin-right: -0.2em; padding-right: 0.2em; border-right: 1.5px solid var(--hlo); border-radius: 0 0.5em 0.5em 0; }
.tf-ed .gsw.tf-hs.tf-he { border-radius: 0.5em; }
.tf-ed .tf-h.tf-col { color: var(--fcl); }
/* (shapes over the passage: boxes, circles, lines, and arrows in an SVG laid over the box. Shapes on, the layer takes
   the taps and drags (and not the page's scrolling, there); off, they go through to the words. A shape picked up
   glows gold, with handles at its corners, or its ends and its middle) */
.tf-edw { position: relative; }
.tf-sv { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; outline: none; }
.tf-sv, .tf-sv * { pointer-events: none; } /* (off: every tap goes through to the words, a shape's outline too) */
.tf-sv[hidden] { display: none; }
.tf-edw.is-shapes .tf-sv { pointer-events: all; touch-action: none; cursor: crosshair; }
.tf-edw.is-shapes .tf-sv *, .tf-edw.is-erase .tf-sh-hit { pointer-events: visiblePainted; } /* (on: its shapes and handles; the eraser: its shapes alone) */
.tf-edw.is-shapes .tf-sh-pts, .tf-edw.is-shapes .tf-sh-pts * { pointer-events: none; }
.tf-edw.is-erase .tf-sh-hit { cursor: pointer; }
.tf-edw.is-shapes .tf-ed { caret-color: transparent; }
.tf-sh { fill: none; stroke: var(--fc); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tf-sh .tf-sh-hit { stroke: transparent; stroke-width: 18; pointer-events: none; cursor: grab; } /* (a shape's band: only for Shapes and the eraser, below; otherwise the words under it get the tap) */
.tf-edw.is-shapes .tf-sh .tf-sh-hit, .tf-edw.is-erase .tf-sh .tf-sh-hit { pointer-events: stroke; }
.tf-sh .tf-sh-head { fill: var(--fc); stroke-width: 1; }
.tf-sh.is-on > :not(.tf-sh-hit) { filter: drop-shadow(0 0 2.5px var(--gold)); }
.tf-shh circle { fill: var(--bg-raised); stroke: var(--gold); stroke-width: 2.5; cursor: grab; }
.tf-shh .tf-shh-hit { fill: transparent; stroke: none; }
.tf-shh.is-mid circle:not(.tf-shh-hit) { fill: var(--gold); stroke: var(--bg-raised); }
.tf-shapes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; flex-basis: 100%; padding: 2px 0; }
.tf-shapes .ui-seg > button { gap: 5px; min-height: 30px; padding: 0 9px; font-size: 12.5px; }
.tf-shapes .ui-seg svg { width: 15px; height: 15px; }
.tf-shdel { color: var(--muted); }
.tf-shdel:disabled { opacity: 0.45; cursor: default; }
.tf-sh.is-target > :not(.tf-sh-hit):not(.tf-sh-pts) { filter: drop-shadow(0 0 3px var(--gold)); stroke-width: 3; } /* (the box or circle a dragged line's end is about to join) */
.tf-sh-pts circle { fill: var(--bg-raised); stroke: var(--gold); stroke-width: 1.5; } .tf-sh-pts circle.is-on { fill: var(--gold); } /* (its eight points, the one the end would take lit) */
.tf-snap { display: inline-flex; align-items: center; gap: 8px; font: 600 12.5px var(--sans); color: var(--muted); cursor: pointer; }
.tf-snap .ui-sw:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.tf-foot { padding: 12px 14px 14px; border-top: 1px solid var(--rule); }
.tf-foot:empty { display: none; }
.tf-note { margin: 10px 0 0; font: 11px/1.45 var(--sans); color: var(--muted); }
.tf-ends { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.tf-show-row .tf-reset { margin-left: 6px; } /* (at the top, after Show me's buttons. From the owner: "move the start over button up to the top after the show me buttons") */
.tf-reset { padding: 0; border: none; background: none; color: var(--muted); font: 600 13px var(--sans); text-decoration: underline; cursor: pointer; }

/* THE PEN (study/guide.js: press and hold): the words picked lit as they're picked, the page's own press and hold off
   while a press is the pen's, the marks drawn as a hand draws, and the ring's options card */
/* (over index.html's own for what's typed in, [contenteditable]: the diagram's press is the pen's, so no phone menu on it ever,
   and while it's held, no selecting either) */
html body .tf-ed[data-gst-passage], html body .tf-ed[data-gst-passage] * { -webkit-touch-callout: none; }
html body .tf-ed[data-gst-passage].is-holding, html body .tf-ed[data-gst-passage].is-holding * { -webkit-user-select: none; user-select: none; }
.tf-ed .gsw.tf-held { background: color-mix(in srgb, var(--gold) 26%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 26%, transparent); border-radius: 0; }
.tf-ed .gsw.tf-held-s { border-radius: 0.3em 0 0 0.3em; } .tf-ed .gsw.tf-held-e { border-radius: 0 0.3em 0.3em 0; } .tf-ed .gsw.tf-held-s.tf-held-e { border-radius: 0.3em; }
.tf-ed.is-holding .gsw.tf-held { background: color-mix(in srgb, var(--gold) 34%, transparent); }
.tf-pm { fill: none; stroke: var(--fc); stroke-width: var(--pmw, 2.5px); stroke-linecap: round; stroke-linejoin: round; opacity: 0.94; }
.tf-pm .tf-sh-hit { stroke: transparent; stroke-width: 18; pointer-events: none; opacity: 1; } /* (its band to tap: only for the eraser and Connect, below; otherwise a press or a tap goes through to the words under it) */
.tf-edw.is-erase .tf-pm .tf-sh-hit { pointer-events: stroke; }
.tf-pm.is-new > path:not(.tf-sh-hit) { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: tf-pm-in 0.48s cubic-bezier(0.45, 0.1, 0.35, 1) var(--pmd, 0ms) forwards; }
@keyframes tf-pm-in { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .tf-pm.is-new > path:not(.tf-sh-hit) { animation: none; stroke-dashoffset: 0; } }
/* (the ring: the word ring's, reader/verse.css, with each button in its color) */
.tf-pring .tf-pb.tf-fc0, .tf-pring .tf-pb.tf-fc1, .tf-pring .tf-pb.tf-fc2, .tf-pring .tf-pb.tf-fc3, .tf-pring .tf-pb.tf-fc4 { color: var(--fc); }
.tf-pring .tf-pb svg { width: 24px; height: 24px; }
.tf-pring .wr-word { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.tf-pcard { position: fixed; left: 50%; z-index: 2147483170; width: min(360px, calc(100% - 24px)); transform: translateX(-50%); padding: 12px 16px 16px; border: 1px solid var(--rule); border-radius: 16px; background: var(--bg-raised); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.45); font-family: var(--sans); color: var(--ink); }
.tf-pcard[hidden] { display: none; }
/* a bracket's sides and shapes, as pictures (nav/marks.js bracketTiles): the diagram's card and the readers' Study alike */
.hm-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 4px; }
.hm-tile { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 6px 4px 5px; border: 1.5px solid var(--rule); border-radius: 12px; background: var(--bg); color: var(--muted); font: 700 11.5px var(--sans); cursor: pointer; }
.hm-tile svg { width: 100%; max-width: 80px; height: auto; }
.hm-tile .hm-tl { fill: color-mix(in srgb, var(--ink) 18%, transparent); }
.hm-tile.is-on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, var(--bg)); color: var(--ink); }
.tf-pcard { max-height: calc(100% - 20px); overflow-y: auto; box-sizing: border-box; }
@media (max-height: 520px) { /* (a phone on its side: the same choices, closer together) */
  .tf-pc-show { display: none; }
  .tf-pcard { padding: 8px 14px 12px; }
  .tf-pcard .ui-label { margin: 8px 0 4px; }
  .tf-pc-go { margin: 10px 0 0; }
}
.tf-pc-h { display: flex; align-items: center; justify-content: space-between; }
.tf-pc-h b { display: flex; align-items: center; gap: 8px; font: italic 600 19px var(--serif); }
.tf-pc-h b svg { width: 22px; height: 22px; color: var(--gold); }
.tf-pc-show { position: relative; height: 56px; margin: 6px 0 4px; border-radius: 10px; background: var(--bg); overflow: hidden; }
.tf-pc-show span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 15px/1.5 var(--br-font, Georgia, serif); color: var(--ink); }
.tf-pc-show svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tf-pcard .ui-label { margin: 12px 0 6px; }
.tf-pc-sw { display: flex; gap: 10px; }
.tf-pc-c { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 2px solid transparent; border-radius: 50%; background: none; cursor: pointer; }
.tf-pc-c i { width: 22px; height: 22px; border-radius: 50%; background: var(--fc); }
.tf-pc-c.is-on { border-color: var(--gold); }
.tf-pcard .ui-seg { display: flex; }
.tf-pcard .ui-seg button { flex: 1; }
.tf-pc-go { display: flex; justify-content: flex-end; margin: 14px 0 0; }
/* (the pen's magnifier: the words under the finger, bigger, in a glass just over it) */
.tf-loupe { position: fixed; z-index: 2147483165; width: 176px; height: 76px; overflow: hidden; border-radius: 22px; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); background: var(--bg-raised, var(--bg)); box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.45), 0 2px 6px -2px rgba(0, 0, 0, 0.2); pointer-events: none; opacity: 0; transform: scale(0.6) translateY(24px); transform-origin: 50% 100%; transition: opacity 0.12s ease, transform 0.16s cubic-bezier(0.34, 1.4, 0.64, 1); }
.tf-loupe.is-on { opacity: 1; transform: none; }
.tf-loupe-in { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.tf-loupe .tf-ed { outline: none; }
.tf-loupe .tf-sv { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .tf-loupe { transition: none; transform: none; } }
/* (the pen's connections: the mark connecting from, lit; its other marks taps; the bar that says what to do) */
.tf-pm.is-src > path:not(.tf-sh-hit) { filter: drop-shadow(0 0 3px var(--gold)) drop-shadow(0 0 1px var(--gold)); }
/* (the shape being connected from, pulsing while you pick what to join it to, so you remember which it is; and on an
   underline, the words held on it, with it. From the owner: "while in connect mode for a shape. Can you have the shape
   that is selected to pulse to you remember which one you are connecting to?") */
.tf-pm.is-src > path:not(.tf-sh-hit), .hm-src > path { animation: tf-src-pulse 1.2s ease-in-out infinite; }
/* (one being changed, its card open: lit, still. From the owner: "The shape should only pulse when it's in connect mode") */
.tf-pm.is-edit > path:not(.tf-sh-hit) { filter: drop-shadow(0 0 2.5px var(--gold)); }
/* (the same, wherever hand marks are drawn (nav/marks.js): the mark being connected from, raised
   in gold and pulsing; hm-src, the readers' Study (nav/points.js) and the diagram's alike. From the owner: "When in connect
   mode, the selected item is not raised out like it is in the thought flow diagram. Aren't they using the same module now?
   Shouldn't that feature be added automatically?") */
.hm-src > path { filter: drop-shadow(0 0 3px var(--gold)) drop-shadow(0 0 1px var(--gold)); }
.tf-pe-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
@keyframes tf-src-pulse { 0%, 100% { stroke-width: var(--pmw, 2.5px); opacity: 0.94; } 50% { stroke-width: calc(var(--pmw, 2.5px) * 2.2); opacity: 1; } }
.tf-edw.is-connect .tf-ed .gsw.tf-held { animation: tf-held-pulse 1.2s ease-in-out infinite; }
@keyframes tf-held-pulse { 0%, 100% { background: color-mix(in srgb, var(--gold) 16%, transparent); } 50% { background: color-mix(in srgb, var(--gold) 42%, transparent); } }
@media (prefers-reduced-motion: reduce) { .hm-src > path, .tf-pm.is-src > path:not(.tf-sh-hit), .tf-edw.is-connect .tf-ed .gsw.tf-held { animation: none; } }
.tf-edw.is-connect .tf-pm:not(.tf-pc) .tf-sh-hit { pointer-events: visiblePainted; cursor: pointer; }
.tf-edw.is-connect .tf-ed .gsw { cursor: pointer; }
.tf-pc-stub { fill: none; stroke: color-mix(in srgb, var(--ink) 35%, transparent); stroke-width: 1.5; stroke-dasharray: 3 3; }
.tf-cbar { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; font: 600 14.5px/1.3 var(--sans); color: var(--ink); } /* (in the diagram's own bar, in place of its tools, while connecting) */
.tf-cbar > svg { flex: none; width: 22px; height: 22px; color: var(--gold); }
.tf-cbar > span { flex: 1; min-width: 0; }
.tf-cbar .ui-btn { flex: none; }
.tf-pring .tf-pb.is-quiet { color: var(--muted); } /* (Fade, Show, Erase: quiet, not one of the colors) */
/* (a mark faded: faint where it was, its connections with it; all hidden: the chip that says so, at the top) */
.tf-pm.is-faded { opacity: 0.2; }
.tf-pm.is-faded.is-src { opacity: 0.55; }
.tf-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tf-shchip { display: inline-flex; align-items: center; gap: 6px; }
.tf-shchip svg { width: 16px; height: 16px; color: var(--gold); }
.tf-emenu .ui-menu-row b { font-weight: 600; }
/* (the color chosen, plain to see: from the owner, "can you also make it more visible to see which color is selected for
   the highlighter and the text colors?". In the row: the chosen one bigger, a gold ring round it with a gap, and a check;
   the others a little smaller and quieter. On the bar: the highlighter's dot bigger, and the text color's A in its color,
   with a bar of it under, so it shows with the row closed too) */
.tf-pal .gst-penc.tf-sw { width: 26px; height: 26px; position: relative; border: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); opacity: 0.78; transform: scale(0.88); transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease; }
.tf-pal .gst-penc.tf-sw.is-on { opacity: 1; transform: scale(1.12); box-shadow: 0 0 0 2.5px var(--bg-raised, var(--bg)), 0 0 0 5px var(--gold), 0 3px 8px -2px rgba(0, 0, 0, 0.3); }
.tf-pal .gst-penc.tf-sw.is-on::after { content: ''; position: absolute; left: 50%; top: 46%; width: 6px; height: 11px; border: solid #2E2B27; border-width: 0 2.5px 2.5px 0; transform: translate(-50%, -50%) rotate(45deg); }
.tf-pal .gst-penc.tf-fc0.is-on::after, .tf-pal .gst-penc.tf-fc1.is-on::after, .tf-pal .gst-penc.tf-fc2.is-on::after, .tf-pal .gst-penc.tf-fc3.is-on::after, .tf-pal .gst-penc.tf-fc4.is-on::after { border-color: #fff; } /* (a check that shows on the darker word colors) */
.tf-pal { gap: 9px; }
.tf-pal .tf-swn.is-on { box-shadow: 0 0 0 2px var(--gold); }
.tf-pal .tf-swn.is-on .tf-dot, .tf-pal .tf-swn.is-on .tf-dotA { transform: scale(1.25); }
.ui-tools .tf-dot.tf-hlnow { width: 13px; height: 13px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18); }
.tf-colA { display: inline-block; padding: 0 1px 1px; font: 800 17px/1 var(--sans); color: var(--fc); border-bottom: 3.5px solid var(--fc); border-radius: 1px; }

/* HOW TO STUDY IT (study/guide.js): the steps, picked as a Go deeper goal's are (goals/goals.css's switches), each list of
   your own a row that swipes; the two ways, each drawn small with a line on how it works; the ring of steps round the
   passage */
.gp-how .ui-label { margin: 18px 0 8px; }
.gp-plans { display: flex; flex-direction: column; gap: 8px; }
.gp-pick { gap: 12px; border: 1px solid var(--rule); border-radius: 14px; background: var(--bg-raised); }
.gp-mine { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.gp-mine > li + li { border-top: 0; }
.gp-mine .rbx-in { border-radius: 14px; background: transparent; }
.gp-mine .rbx-in .gp-pick { flex: 1; }
.gp-pick.is-on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 9%, var(--bg-raised)); }
.gp-radio { flex: none; width: 20px; height: 20px; border: 2px solid var(--rule); border-radius: 50%; box-sizing: border-box; }
.gp-pick.is-on .gp-radio { border: 6px solid var(--gold); }
.gp-pick small { white-space: normal; }
.gp-build { align-self: flex-start; }
.gp-ways { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gp-way { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px; border: 1px solid var(--rule); border-radius: 14px; background: var(--bg-raised); color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.gp-way.is-on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 9%, var(--bg-raised)); box-shadow: 0 0 0 1px var(--gold); }
.gp-way b { font: 700 14.5px var(--sans); }
.gp-way small { font: 12.5px/1.4 var(--sans); color: var(--muted); }
.gp-art { display: block; width: 96px; height: 40px; margin: 0 0 4px; }
.gp-art svg { width: 100%; height: 100%; }
.gp-art circle { fill: none; stroke: var(--muted); stroke-width: 2; }
.gp-art circle.gp-a-on { fill: var(--gold); stroke: var(--gold); }
.gp-art .gp-a-line { stroke: var(--rule); stroke-width: 2; fill: none; }
.gp-art .gp-a-arrow { stroke: var(--gold); stroke-width: 2; stroke-linecap: round; }
.gp-way.is-on .gp-art circle:not(.gp-a-on) { stroke: var(--gold); }
.gp-go { margin-left: auto; }
.gp-name { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.gp-steps { margin: 6px 0 0; padding: 0; list-style: none; }
.gp-steps > li + li { border-top: 0; }
.gp-steps .rbx-in { background: transparent; }
.gp-steprow { display: flex; align-items: flex-start; gap: 6px; width: 100%; }
.gp-steprow .ui-grip { flex: none; margin-top: 12px; }
.gp-steprow .gl-switch { flex: 1; min-width: 0; margin: 0 0 10px; }
.gst-howchip { margin-left: auto; }
/* (Read <the passage> beside, right beside Study plan: the two together at the right) */
.gst-top .sv-beside { margin-left: auto; }
.gst-top .sv-beside + .gst-howchip { margin-left: 8px; }
.gst-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gst-toring { display: inline-flex; align-items: center; gap: 6px; }
.gst-toring svg { width: 18px; height: 18px; }
/* (the ring: its steps round the passage, each a number and a short name; written in, marked; the middle, your study) */
/* (the steps in any order: a board of cards, and the one you came back from with what helps it most; and in a step,
   what helps it, and the way back from a step it sent you to. guide.js, ringHtml, helpsFor) */
.gp-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 14px 0 6px; }
.gp-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; padding: 12px; border: 1px solid var(--rule); border-radius: 14px; background: var(--bg-raised); color: var(--ink); text-align: left; cursor: pointer; font: inherit; -webkit-tap-highlight-color: transparent; transition: transform 0.15s ease, border-color 0.2s ease; }
.gp-card:active { transform: scale(0.98); }
.gp-card-h { display: flex; align-items: center; gap: 8px; width: 100%; }
.gp-card-h i, .gp-rh i, .gp-help i, .gp-fromb i { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--gold) 14%, var(--bg)); color: var(--gold); }
.gp-card-h i svg, .gp-rh i svg, .gp-help i svg, .gp-fromb i svg { width: 19px; height: 19px; }
.gp-card-h small { font: 700 12px var(--sans); color: var(--muted); }
.gp-card-h em { margin-left: auto; font: 700 11.5px var(--sans); font-style: normal; color: var(--gold); }
.gp-card b { font: 700 15px/1.25 var(--sans); }
.gp-card-d { font: 13px/1.4 var(--sans); color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gp-card.is-done { border-color: color-mix(in srgb, var(--gold) 45%, var(--rule)); }
.gp-card.is-from { border-color: var(--gold); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 30%, transparent); }
.gp-card.is-all { background: color-mix(in srgb, var(--gold) 9%, var(--bg-raised)); }
.gp-from { margin: 12px 0 4px; padding: 14px; border-radius: 16px; background: color-mix(in srgb, var(--gold) 8%, var(--bg-raised)); }
.gp-rk { margin: 0 0 6px; font: 800 10.5px var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.gp-fromb { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 1px solid var(--gold); border-radius: 12px; background: var(--bg); color: var(--ink); cursor: pointer; font: inherit; text-align: left; }
.gp-fromb b { flex: 1; font: italic 600 18px/1.2 var(--serif); }
.gp-fromb span { font: 700 13px var(--sans); color: var(--gold); white-space: nowrap; }
.gp-from .ui-label, .gp-helpbox .ui-label { margin: 14px 0 6px; }
.gp-helps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.gp-help { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 1px solid var(--rule); border-radius: 12px; background: var(--bg); color: var(--ink); cursor: pointer; font: inherit; text-align: left; }
.gp-help.s3 { border-left: 4px solid var(--gold); }
.gp-help.s2 { border-left: 4px solid color-mix(in srgb, var(--gold) 45%, var(--rule)); }
.gp-help span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gp-help b { font: 700 14.5px var(--sans); }
.gp-help small { font: 13px/1.4 var(--sans); color: var(--muted); }
.gp-help em { font: 700 18px var(--sans); font-style: normal; color: var(--muted); }
.gp-helpbox { margin: 18px 0 0; padding: 12px 14px 14px; border: 1px dashed color-mix(in srgb, var(--gold) 40%, var(--rule)); border-radius: 16px; }
.gp-helpbox .ui-label { margin-top: 0; }
.gp-backto { display: inline-flex; align-items: center; gap: 4px; margin: 10px 0 0; padding: 7px 14px 7px 10px; border: 1px solid var(--gold); border-radius: 999px; background: color-mix(in srgb, var(--gold) 10%, var(--bg)); color: var(--ink); font: 700 13.5px var(--sans); cursor: pointer; }
.gp-backto svg { width: 16px; height: 16px; }
@media (max-width: 380px) { .gp-ways { grid-template-columns: 1fr; } }
/* (a study's top, with its study plan: what you're studying, Study plan, and where you are; the window's Back, named for
   where it goes: guide.js, planTop and hBack) */
.gst-head .gst-hback { width: auto; padding: 0 12px 0 7px; border-radius: 999px; display: inline-flex; align-items: center; gap: 2px; font: 700 13.5px var(--sans); }
.gst-head .gst-hback svg { width: 17px; height: 17px; }
.gst-ptop { flex-wrap: nowrap; }
.gst-pname { min-width: 0; display: flex; flex-direction: column; }
.gst-pname b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: italic 600 19px/1.2 var(--serif); color: var(--ink); }
.gst-pname small { font: 600 12px var(--sans); color: var(--muted); }
.gst-howchip { display: inline-flex; align-items: center; gap: 5px; flex: none; }
.gst-howchip svg { width: 16px; height: 16px; }
.gst-where { margin: 6px 0 0; font: 700 12px var(--sans); color: var(--muted); }
.gst-ringnav { flex-direction: column; align-items: stretch; gap: 8px; }
.gst-ringnav .gst-toring { justify-content: center; gap: 8px; }
.gst-ringnav .gst-onnext { align-self: center; border: 0; background: none; color: var(--muted); font: 600 13.5px var(--sans); }
/* (a step swiped to: it slides in from the side it came. guide.js, stepSwipe) */
.gst-body.is-in-l > * { animation: gst-in-l 0.28s ease-out; }
.gst-body.is-in-r > * { animation: gst-in-r 0.28s ease-out; }
@keyframes gst-in-l { from { transform: translateX(36px); opacity: 0.2; } }
@keyframes gst-in-r { from { transform: translateX(-36px); opacity: 0.2; } }
@media (prefers-reduced-motion: reduce) { .gst-body.is-in-l > *, .gst-body.is-in-r > * { animation: none; } }