/* Translation workspace — everything scoped under .cc-tr.
   Uses Companion's design tokens (--ink --paper --paper-raised --teal --brass --line --muted --done --on-accent
   --serif --sans --mono) with fallbacks, so it follows light/dark with the host page. */

.cc-tr {
  --tr-ink: var(--ink, #1b2a2e); --tr-paper: var(--paper, #eef1ee); --tr-raised: var(--paper-raised, #f7f9f7);
  --tr-teal: var(--teal, #16565c); --tr-teal-strong: var(--teal-strong, #0e3f44); --tr-brass: var(--brass, #92671f);
  --tr-line: var(--line, #d7dbd6); --tr-muted: var(--muted, #5c6b66); --tr-done: var(--done, #3f7a56); --tr-on: var(--on-accent, #f3f6f2);
  --tr-serif: var(--serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif);
  --tr-sans: var(--sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
  --tr-mono: var(--mono, ui-monospace, "SF Mono", Menlo, monospace);
  --tr-bg: #fcfdfc; --tr-surface: #ffffff; --tr-tint: #e3ecea; --tr-focus: #e9f2f0; --tr-dash: #b8c0bb; --tr-ph: #b9c1bc; --tr-dim: #7d8783;
  --tr-clause: #8fb1ad; --tr-rare: #7a6a3e; --tr-warn: #c46a12; --tr-hover-ring: #9fb7b3; --tr-shadow: 0 8px 28px rgba(20, 40, 40, .16); --tr-scrim: rgba(27, 42, 46, .32);
  --tr-tipbg: #1b2a2e; --tr-tipfg: #f3f6f2;
  /* verb-form colours (Soft). bg = highlight, fg = text colour; fg unset = normal ink */
  --c-q-bg: #f5c6bf; --c-y-bg: #fbe69a; --c-w-bg: #bfe3b4; --c-wq-bg: #c3daf3;
  --c-imv-bg: #fbe69a; --c-imv-fg: #c0261b; --c-jus-bg: #fbe69a; --c-jus-fg: #1f5fbf; --c-coh-bg: #fbe69a; --c-coh-fg: #7b1f2b;
  --c-inf-fg: #1f5fbf; --c-ptc-fg: #6f3fa0; --c-pn-fg: #737a7c;
  --hsz: 30px; --gsz: 27px;
  --heb-font: "CC Noto Serif Hebrew", "Noto Serif Hebrew", "SBL Hebrew", serif;
  --grk-font: "CC Gentium Book Plus", "Gentium Book Plus", Palatino, serif;
  font-family: var(--tr-sans); color: var(--tr-ink); background: var(--tr-paper); height: 100%; position: relative; overflow: hidden;
  -webkit-text-size-adjust: 100%;
}
.cc-tr.pal-classic {
  --c-q-bg: #ff7b6e; --c-y-bg: #fff200; --c-w-bg: #3be05a; --c-wq-bg: #5ec8ff;
  --c-imv-bg: #fff200; --c-imv-fg: #e00000; --c-jus-bg: #fff200; --c-jus-fg: #1a5fd8; --c-coh-bg: #fff200; --c-coh-fg: #8b0000;
  --c-inf-fg: #1a5fd8; --c-ptc-fg: #7b2cbf; --c-pn-fg: #5f6366;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cc-tr {
    --tr-bg: #0f1517; --tr-surface: #1a2325; --tr-tint: #1f3a3c; --tr-focus: #1b3335; --tr-dash: #4a5855; --tr-ph: #51605c; --tr-dim: #8b9894;
    --tr-clause: #4f7b77; --tr-rare: #cdb872; --tr-warn: #f0954a; --tr-hover-ring: #5f7f7b; --tr-shadow: 0 8px 28px rgba(0, 0, 0, .5); --tr-scrim: rgba(0, 0, 0, .55);
    --tr-tipbg: #e9ece7; --tr-tipfg: #12181a;
    --c-q-bg: rgba(240, 120, 105, .42); --c-y-bg: rgba(245, 205, 70, .34); --c-w-bg: rgba(100, 195, 105, .34); --c-wq-bg: rgba(100, 165, 240, .38);
    --c-imv-bg: rgba(245, 205, 70, .34); --c-imv-fg: #ff9588; --c-jus-bg: rgba(245, 205, 70, .34); --c-jus-fg: #9cbfff; --c-coh-bg: rgba(245, 205, 70, .34); --c-coh-fg: #f4a8b6;
    --c-inf-fg: #8db4ff; --c-ptc-fg: #c9a2f2; --c-pn-fg: #a9b2b4;
  }
}
:root[data-theme="dark"] .cc-tr {
  --tr-bg: #0f1517; --tr-surface: #1a2325; --tr-tint: #1f3a3c; --tr-focus: #1b3335; --tr-dash: #4a5855; --tr-ph: #51605c; --tr-dim: #8b9894;
  --tr-clause: #4f7b77; --tr-rare: #cdb872; --tr-warn: #f0954a; --tr-hover-ring: #5f7f7b; --tr-shadow: 0 8px 28px rgba(0, 0, 0, .5); --tr-scrim: rgba(0, 0, 0, .55);
  --tr-tipbg: #e9ece7; --tr-tipfg: #12181a;
  --c-q-bg: rgba(240, 120, 105, .42); --c-y-bg: rgba(245, 205, 70, .34); --c-w-bg: rgba(100, 195, 105, .34); --c-wq-bg: rgba(100, 165, 240, .38);
  --c-imv-bg: rgba(245, 205, 70, .34); --c-imv-fg: #ff9588; --c-jus-bg: rgba(245, 205, 70, .34); --c-jus-fg: #9cbfff; --c-coh-bg: rgba(245, 205, 70, .34); --c-coh-fg: #f4a8b6;
  --c-inf-fg: #8db4ff; --c-ptc-fg: #c9a2f2; --c-pn-fg: #a9b2b4;
}

.cc-tr *, .cc-tr *::before, .cc-tr *::after { box-sizing: border-box; }
.cc-tr button { font-family: inherit; }
.cc-tr kbd { font-family: var(--tr-mono); font-size: 10.5px; padding: 1px 4px; border: 1px solid var(--tr-line); border-bottom-width: 2px; border-radius: 4px; color: var(--tr-muted); background: var(--tr-raised); white-space: nowrap; margin-left: auto; }
.cc-tr .he { font-family: var(--heb-font); direction: rtl; unicode-bidi: isolate; }
.cc-tr .gk { font-family: var(--grk-font); }
.cc-tr .tr-dim { color: var(--tr-muted); }
.cc-tr .tr-small { font-size: 12px; }
.cc-tr .tr-mu { color: var(--tr-muted); }
.cc-tr .tr-lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--tr-muted); font-weight: 600; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.cc-tr .tr-boot { padding: 60px 24px; text-align: center; color: var(--tr-muted); }
.cc-tr .tr-err { color: var(--tr-ink); }

.cc-tr .tr-app { display: flex; flex-direction: column; height: 100%; min-height: 0; }

/* ---- header */
.cc-tr .tr-head { height: 50px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: var(--tr-raised); border-bottom: 1px solid var(--tr-line); }
.cc-tr .tr-ib { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; min-width: 30px; padding: 0 7px; border: 1px solid transparent; border-radius: 5px; background: none; color: var(--tr-ink); font: 13px var(--tr-sans); cursor: pointer; }
.cc-tr .tr-ib:hover { background: var(--tr-paper); border-color: var(--tr-line); }
.cc-tr .tr-ib.sm { height: 24px; min-width: 24px; font-size: 16px; }
.cc-tr .tr-back { color: var(--tr-muted); }
.cc-tr .tr-crumbs { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--tr-muted); min-width: 0; white-space: nowrap; overflow: hidden; }
.cc-tr .tr-crumbs b { color: var(--tr-ink); overflow: hidden; text-overflow: ellipsis; }
.cc-tr .tr-prog { font-size: 12.5px; color: var(--tr-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cc-tr .tr-save { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--tr-muted); padding: 0 8px; white-space: nowrap; }
.cc-tr .tr-save.ok { color: var(--tr-done); }
.cc-tr .tr-save.bad { color: var(--tr-warn); }

/* ---- toolbar */
.cc-tr .tr-toolbar { flex: none; display: flex; align-items: center; gap: 4px; padding: 8px 12px; background: var(--tr-surface); border-bottom: 1px solid var(--tr-line); flex-wrap: wrap; }
.cc-tr .tr-vsep { width: 1px; height: 22px; background: var(--tr-line); margin: 0 6px; flex: none; }
.cc-tr .tr-vsep-s { height: 20px; margin: 2px 3px; }
.cc-tr .tr-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px 0 4px; border: 1px solid transparent; border-radius: 6px; background: none; font: 12.5px var(--tr-sans); color: var(--tr-ink); cursor: pointer; white-space: nowrap; }
.cc-tr .tr-chip:hover:not(:disabled) { background: var(--tr-paper); }
.cc-tr .tr-chip:disabled { opacity: .45; cursor: default; }
.cc-tr .tr-chip.on { border: 1.5px solid var(--tr-teal); background: var(--tr-tint); font-weight: 600; padding: 0 7.5px 0 3.5px; }
.cc-tr .tr-chip .tr-s { font-family: var(--heb-font); font-size: 15px; line-height: 1; padding: 3px 5px; border-radius: 3px; min-width: 26px; text-align: center; direction: rtl; }
.cc-tr .tr-chip .tr-s:not(.tr-wd) { font-family: var(--tr-sans); font-size: 14px; direction: ltr; }
.cc-tr .tr-chip kbd { margin-left: 2px; }
.cc-tr .tr-hint { font-size: 12px; color: var(--tr-muted); max-width: 260px; line-height: 1.3; }

/* verb-form colours — used by words, chips, palette and legend alike */
.cc-tr .tr-wd.f-q { background: var(--c-q-bg); }
.cc-tr .tr-wd.f-y { background: var(--c-y-bg); }
.cc-tr .tr-wd.f-w { background: var(--c-w-bg); }
.cc-tr .tr-wd.f-wq { background: var(--c-wq-bg); }
.cc-tr .tr-wd.f-imv { background: var(--c-imv-bg); color: var(--c-imv-fg); }
.cc-tr .tr-wd.f-jus { background: var(--c-jus-bg); color: var(--c-jus-fg); }
.cc-tr .tr-wd.f-coh { background: var(--c-coh-bg); color: var(--c-coh-fg); }
.cc-tr .tr-wd.f-inf { color: var(--c-inf-fg); }
.cc-tr .tr-wd.f-ptc { color: var(--c-ptc-fg); }
.cc-tr .tr-wd.f-pn { color: var(--c-pn-fg); }
.cc-tr .tr-chip .tr-wd.f-inf, .cc-tr .tr-chip .tr-wd.f-ptc, .cc-tr .tr-chip .tr-wd.f-pn,
.cc-tr .tr-lg .tr-wd.f-inf, .cc-tr .tr-lg .tr-wd.f-ptc, .cc-tr .tr-lg .tr-wd.f-pn,
.cc-tr .tr-cb .tr-wd.f-inf, .cc-tr .tr-cb .tr-wd.f-ptc, .cc-tr .tr-cb .tr-wd.f-pn,
.cc-tr .tr-pb.f-inf, .cc-tr .tr-pb.f-ptc, .cc-tr .tr-pb.f-pn, .cc-tr .tr-dot.f-inf, .cc-tr .tr-dot.f-ptc, .cc-tr .tr-dot.f-pn,
.cc-tr .tr-ct .tr-wd.f-inf, .cc-tr .tr-ct .tr-wd.f-ptc, .cc-tr .tr-ct .tr-wd.f-pn { box-shadow: inset 0 0 0 1px var(--tr-line); }

/* ---- body */
.cc-tr .tr-body { flex: 1; display: flex; min-height: 0; }
.cc-tr .tr-side { width: 270px; flex: none; background: var(--tr-raised); border-right: 1px solid var(--tr-line); padding: 14px; display: flex; flex-direction: column; gap: 18px; overflow: auto; }
.cc-tr.tr-nosidebar .tr-side { display: none; }
.cc-tr .tr-side-t { font-family: var(--tr-serif); font-size: 15.5px; font-weight: 600; line-height: 1.35; }
.cc-tr .tr-side-s { font-size: 12.5px; color: var(--tr-muted); margin-top: 4px; }
.cc-tr .tr-vlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.cc-tr .tr-vl { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border: 0; border-radius: 4px; background: none; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--tr-muted); cursor: pointer; text-align: left; }
.cc-tr .tr-vl:hover { background: var(--tr-paper); }
.cc-tr .tr-vl.done { color: var(--tr-muted); }
.cc-tr .tr-vl.now { background: var(--tr-tint); font-weight: 600; color: var(--tr-ink); }
.cc-tr .tr-vd { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--tr-dash); flex: none; background: linear-gradient(90deg, var(--tr-done) var(--f, 0%), transparent var(--f, 0%)); }
.cc-tr .tr-vl.done .tr-vd { background: var(--tr-done); border-color: var(--tr-done); }
.cc-tr .tr-vl.part .tr-vd { border-color: var(--tr-done); }
.cc-tr .tr-lg { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 2px 0; }
.cc-tr .tr-lg .tr-s { font-family: var(--heb-font); font-size: 14px; padding: 0 5px; border-radius: 3px; min-width: 30px; text-align: center; }
.cc-tr .tr-lgl { flex: 1; }

.cc-tr .tr-scroll { flex: 1; min-width: 0; overflow: auto; background: var(--tr-bg); outline: none; scroll-padding: 12px; }
.cc-tr .tr-page { max-width: 1180px; margin: 0 auto; padding: 22px 32px 80px; }
.cc-tr.is-grc .tr-page { max-width: 1060px; }
.cc-tr .tr-titlerow { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.cc-tr .tr-titlerow h1 { font-family: var(--tr-serif); font-size: 28px; font-weight: 600; margin: 0; }
.cc-tr .tr-sub { font-size: 13px; color: var(--tr-muted); }
.cc-tr .tr-lab { font-size: 12px; color: var(--tr-muted); margin-right: -6px; }
.cc-tr .tr-seg { display: inline-flex; border: 1px solid var(--tr-line); border-radius: 6px; overflow: hidden; }
.cc-tr .tr-seg button { border: 0; border-right: 1px solid var(--tr-line); background: var(--tr-surface); font: 12.5px var(--tr-sans); padding: 6px 10px; cursor: pointer; color: var(--tr-ink); }
.cc-tr .tr-seg button:last-child { border-right: 0; }
.cc-tr .tr-seg button.on { background: var(--tr-teal); color: var(--tr-on); font-weight: 600; }
.cc-tr .tr-btn { border: 1px solid var(--tr-line); background: var(--tr-surface); color: var(--tr-ink); font: 12.5px var(--tr-sans); padding: 6px 11px; border-radius: 6px; cursor: pointer; }
.cc-tr .tr-btn:hover { border-color: var(--tr-teal); }
.cc-tr .tr-btn.pri { background: var(--tr-teal); border-color: var(--tr-teal); color: var(--tr-on); font-weight: 600; }
.cc-tr .tr-btn:disabled { opacity: .5; }
.cc-tr .tr-link { border: 0; background: none; color: var(--tr-teal); font: 12px var(--tr-sans); cursor: pointer; text-decoration: underline; padding: 0; }
.cc-tr .tr-endnote { display: flex; padding: 14px 12px; color: var(--tr-muted); font-size: 13px; }

.cc-tr .tr-foldrow { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px dashed var(--tr-line); border-radius: 6px; background: none; color: var(--tr-muted); font: 13px var(--tr-sans); margin: 0 0 8px; cursor: pointer; text-align: left; }
.cc-tr .tr-foldrow:hover { border-color: var(--tr-teal); color: var(--tr-ink); }
.cc-tr .tr-v.hide { display: none; }

/* ---- a verse (Hebrew) */
.cc-tr .tr-v { display: grid; grid-template-columns: minmax(0, 1.25fr) 52px minmax(0, 1fr); row-gap: 10px; padding: 18px 0 20px; border-bottom: 1px solid var(--tr-line); position: relative; }
.cc-tr.is-grc .tr-v { grid-template-columns: 44px minmax(0, 1fr); padding: 16px 0 20px; }
/* A clause line = one block with a solid bar on its start edge (indent moves the whole block). If it wraps onto more
   rows, each continuation row gets a dotted connector from the bar (see markWraps) so it never looks like a new clause. */
.cc-tr .tr-hl { display: flex; flex-wrap: wrap; align-items: flex-start; row-gap: 4px; padding-inline-start: 16px; margin-inline-start: calc(var(--ind, 0) * 1.5em); border-inline-start: 4px solid var(--tr-clause); border-radius: 2px; font-size: var(--hsz); }
.cc-tr .tr-cell { position: relative; }
.cc-tr .tr-cell.rowstart::before { content: ""; position: absolute; inset-inline-start: -14px; top: calc(var(--hsz) * .72); width: 12px; border-top: 2px dotted var(--tr-clause); pointer-events: none; }
.cc-tr .tr-num { text-align: center; font: 600 22px var(--tr-serif); color: var(--tr-brass); padding-top: calc(var(--hsz) * .25); position: relative; }
.cc-tr .tr-fold { display: block; margin: 2px auto 0; width: 22px; height: 18px; border: 0; background: none; color: var(--tr-muted); font-size: 11px; line-height: 1; cursor: pointer; border-radius: 4px; opacity: 0; transition: opacity .12s; }
.cc-tr .tr-v:hover .tr-fold, .cc-tr .tr-fold:focus-visible { opacity: 1; }
.cc-tr .tr-fold:hover { background: var(--tr-paper); }
.cc-tr .tr-eng { align-self: start; padding: calc(var(--hsz) * .3) 0 0 4px; min-width: 0; }
.cc-tr .tr-vbox { padding-left: 4px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cc-tr .tr-below { padding: 8px 0 0; }
.cc-tr .tr-vunder { padding-top: 4px; }
.cc-tr .tr-vunder .tr-vt { min-height: 64px; border: 1px solid var(--tr-line); border-radius: 6px; padding: 10px 12px; line-height: 1.6; background: var(--tr-surface); }
.cc-tr .tr-vunder .tr-vt:focus { border: 1.5px solid var(--tr-teal); padding: 9.5px 11.5px; }

.cc-tr .tr-cell { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; }
.cc-tr .tr-wd { font-family: var(--heb-font); font-size: var(--hsz); line-height: 1.45; padding: 0 5px; border-radius: 4px; cursor: pointer; position: relative; transition: box-shadow .1s; white-space: nowrap; }
.cc-tr .tr-wd[data-k]:hover { box-shadow: 0 0 0 1px var(--tr-hover-ring); }
.cc-tr .tr-wd.cur { box-shadow: none; }
/* The word the keyboard commands (⌥1…⌥0, ⌥↵, ⌥N) act on = the one whose gloss box has the cursor. Always ringed. */
.cc-tr .tr-cell:focus-within > .tr-wd, .cc-tr.no-gl .tr-wd.cur { box-shadow: 0 0 0 2px var(--tr-teal); }
.cc-tr .tr-wd.chk { text-decoration: underline wavy var(--tr-warn); text-underline-offset: 7px; text-decoration-thickness: 1.5px; }
.cc-tr .tr-ktv { font-size: .62em; color: var(--tr-dim); }
.cc-tr .tr-dot-note { position: absolute; top: 3px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--tr-brass); }
.cc-tr .tr-rare { font: italic 11.5px var(--tr-sans); color: var(--tr-rare); white-space: nowrap; direction: ltr; height: 15px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.cc-tr .tr-gl { font: 13px var(--tr-sans); color: var(--tr-ink); background: transparent; border: 0; border-bottom: 1px dashed var(--tr-dash); text-align: center; padding: 2px 2px 3px; direction: ltr; outline: none; border-radius: 0; -webkit-appearance: none; appearance: none; margin: 0; }
.cc-tr .tr-gl:focus { border-bottom: 2px solid var(--tr-teal); background: var(--tr-focus); border-radius: 3px 3px 0 0; padding-bottom: 2px; }
.cc-tr .tr-gl::placeholder { color: var(--tr-ph); }
.cc-tr.no-gl .tr-gl, .cc-tr.no-gl .tr-rare { display: none; }
.cc-tr.brushing .tr-wd[data-k] { cursor: crosshair; }

/* gap bars between words */
.cc-tr .tr-gap { position: relative; width: 12px; margin: 0 -2px; align-self: stretch; cursor: pointer; flex: none; }
.cc-tr .tr-bar { position: absolute; left: 50%; top: 4px; width: 3px; height: calc(var(--hsz) * 1.3); transform: translateX(-50%); background: var(--tr-teal); border-radius: 2px; opacity: 0; transition: opacity .08s 0s; pointer-events: none; }
.cc-tr .tr-barlbl { position: absolute; left: 50%; top: calc(var(--hsz) * 1.3 + 8px); transform: translateX(-50%); font: 10.5px var(--tr-sans); color: var(--tr-teal); background: var(--tr-surface); border: 1px solid var(--tr-teal); border-radius: 3px; padding: 0 5px; white-space: nowrap; direction: ltr; opacity: 0; transition: opacity .08s 0s; pointer-events: none; z-index: 5; }
.cc-tr .tr-gap:hover .tr-bar, .cc-tr .tr-gap:hover .tr-barlbl { opacity: 1; transition: opacity .12s .35s; }
.cc-tr.brushing .tr-gap { pointer-events: none; }

/* translation boxes */
.cc-tr .tr-tx { display: block; width: 100%; font: 15px/1.45 var(--tr-serif); color: var(--tr-ink); background: transparent; border: 0; border-bottom: 1px solid var(--tr-line); padding: 6px 2px; outline: none; resize: none; overflow: hidden; border-radius: 0; margin: 0; -webkit-appearance: none; appearance: none; }
.cc-tr .tr-tx:focus { border-bottom: 2px solid var(--tr-teal); background: var(--tr-focus); padding-bottom: 5px; }
.cc-tr .tr-tx::placeholder { color: var(--tr-ph); font-style: italic; }
.cc-tr .tr-vbox .tr-vt { min-height: 120px; resize: none; border: 1px solid var(--tr-line); border-radius: 6px; padding: 10px 12px; line-height: 1.6; background: var(--tr-surface); }
.cc-tr .tr-vbox .tr-vt:focus { border: 1.5px solid var(--tr-teal); padding: 9.5px 11.5px; }
.cc-tr .tr-below .tr-vt { min-height: 64px; border: 1px solid var(--tr-line); border-radius: 6px; padding: 10px 12px; line-height: 1.6; background: var(--tr-surface); }
.cc-tr .tr-below .tr-vt:focus { border: 1.5px solid var(--tr-teal); padding: 9.5px 11.5px; }
.cc-tr .tr-notes { display: flex; flex-direction: column; gap: 4px; }
.cc-tr .tr-notes:not(:empty) { margin-top: 6px; }
.cc-tr .tr-note { font-size: 12.5px; line-height: 1.45; border-left: 2px solid var(--tr-brass); padding-left: 8px; color: var(--tr-ink); white-space: pre-wrap; cursor: pointer; }
.cc-tr .tr-note b { font-weight: 400; font-size: 1.2em; color: var(--tr-muted); }

/* ---- a verse (Greek) */
.cc-tr .tr-gnum { font: 600 22px var(--tr-serif); color: var(--tr-brass); padding-top: 6px; }
.cc-tr .tr-gbody { min-width: 0; }
.cc-tr .tr-gwords { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.cc-tr.is-grc .tr-wd { font-family: var(--grk-font); font-size: var(--gsz); line-height: 1.4; padding: 0 3px; }
.cc-tr.is-grc .tr-wd .tr-p { color: var(--tr-muted); }
.cc-tr.is-grc .tr-vt { margin-top: 12px; font-size: 16px; padding: 8px 2px; }
.cc-tr.is-grc .tr-fold { margin: 2px 0 0; }

/* ---- footer */
.cc-tr .tr-foot { height: 32px; flex: none; display: flex; align-items: center; gap: 18px; padding: 0 14px; border-top: 1px solid var(--tr-line); background: var(--tr-raised); font-size: 12px; color: var(--tr-muted); overflow: hidden; white-space: nowrap; }
.cc-tr .tr-fk kbd { margin: 0 1px; }

/* ---- floating layer: popovers, tooltips, menus, dialogs */
.cc-tr .tr-layer { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 1000; }
.cc-tr .tr-pop, .cc-tr .tr-tip, .cc-tr .tr-pal { position: fixed; }
.cc-tr .tr-pop { background: var(--tr-surface); border: 1px solid var(--tr-line); border-radius: 8px; box-shadow: var(--tr-shadow); z-index: 20; color: var(--tr-ink); }
.cc-tr .tr-tip { background: var(--tr-tipbg); color: var(--tr-tipfg); border-radius: 6px; padding: 8px 11px; font-size: 12.5px; line-height: 1.45; box-shadow: 0 6px 18px rgba(0, 0, 0, .2); z-index: 15; pointer-events: none; max-width: 320px; }
.cc-tr .tr-tip .tr-dim { opacity: .75; color: inherit; }
.cc-tr .tr-tl { font-size: 16px; }
.cc-tr .tr-pal { display: flex; gap: 3px; padding: 5px; border-radius: 10px; background: var(--tr-surface); border: 1px solid var(--tr-line); box-shadow: var(--tr-shadow); z-index: 16; }
.cc-tr .tr-pb { font: 12px var(--tr-sans); min-width: 26px; height: 26px; padding: 0 4px; border: 0; border-radius: 4px; cursor: pointer; color: var(--tr-ink); background: none; text-align: center; line-height: 26px; }
.cc-tr .tr-pb.tr-wd { font-family: var(--tr-sans); font-size: 12px; line-height: 26px; }
.cc-tr .tr-pb .he { font-size: 15px; line-height: 26px; }
.cc-tr .tr-pb:hover { box-shadow: 0 0 0 2px var(--tr-teal); }
.cc-tr .tr-wpop { width: 330px; padding: 12px; }
.cc-tr .tr-ph { display: flex; align-items: baseline; gap: 8px; padding: 0 4px 10px; border-bottom: 1px solid var(--tr-line); font-size: 13px; }
.cc-tr .tr-pl { font-size: 20px; }
.cc-tr .tr-ph .tr-dim { font-size: 12px; }
.cc-tr .tr-pm { font-size: 12.5px; padding: 6px 4px 0; }
.cc-tr .tr-mono { font-family: var(--tr-mono); font-size: 12px; font-weight: 600; }
.cc-tr .tr-pfull { font-size: 11.5px; margin-top: 1px; }
.cc-tr .tr-pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); grid-auto-flow: column; gap: 2px; padding: 8px 0 2px; }
.cc-tr .tr-pclear { padding: 0 0 6px; border-bottom: 1px solid var(--tr-line); }
.cc-tr .tr-pclear .tr-cb { width: 100%; }
.cc-tr .tr-cb:disabled { opacity: .45; cursor: default; }
.cc-tr .tr-cb { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border: 0; border-radius: 5px; background: none; font-size: 12px; color: var(--tr-ink); cursor: pointer; text-align: left; }
.cc-tr .tr-cb:hover, .cc-tr .tr-mi:hover:not(:disabled) { background: var(--tr-paper); }
.cc-tr .tr-cb.on { background: var(--tr-tint); font-weight: 600; }
.cc-tr .tr-cb .tr-s { font-family: var(--heb-font); font-size: 13px; padding: 0 4px; border-radius: 3px; min-width: 26px; text-align: center; line-height: 1.5; direction: rtl; }
.cc-tr .tr-pmenu { padding-top: 6px; display: flex; flex-direction: column; }
.cc-tr .tr-mi { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 0; border-radius: 5px; background: none; font-size: 13px; color: var(--tr-ink); cursor: pointer; text-align: left; width: 100%; }
.cc-tr .tr-mi:disabled { opacity: .4; cursor: default; }
.cc-tr .tr-npop .tr-lbl span { text-transform: none; letter-spacing: 0; font-size: 17px; font-weight: 400; color: var(--tr-ink); }
.cc-tr .tr-npop { width: 320px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.cc-tr .tr-npop textarea, .cc-tr .tr-input { width: 100%; font: 14px/1.45 var(--tr-sans); color: var(--tr-ink); background: var(--tr-surface); border: 1px solid var(--tr-line); border-radius: 6px; padding: 8px 10px; resize: vertical; outline: none; }
.cc-tr .tr-npop textarea:focus, .cc-tr .tr-input:focus { border-color: var(--tr-teal); box-shadow: 0 0 0 1px var(--tr-teal); }
.cc-tr .tr-input.bad { border-color: var(--tr-warn); box-shadow: 0 0 0 1px var(--tr-warn); }
.cc-tr .tr-nbtns { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.cc-tr .tr-chkpop { width: 360px; padding: 12px 14px; font-size: 13px; line-height: 1.5; display: flex; flex-direction: column; gap: 6px; }
.cc-tr .tr-ckh { display: flex; align-items: center; gap: 8px; }
.cc-tr .tr-wdot { width: 8px; height: 8px; border-radius: 50%; background: var(--tr-warn); }
.cc-tr .tr-ckw { font-size: 20px; }
.cc-tr .tr-ckmiss { border-top: 1px solid var(--tr-line); padding-top: 8px; margin-top: 4px; }
.cc-tr .tr-mchip { border: 1px solid var(--tr-line); background: var(--tr-surface); border-radius: 4px; padding: 0 6px; margin: 2px 2px 0 0; cursor: pointer; font-size: 16px; color: var(--tr-ink); }
.cc-tr .tr-menu { min-width: 230px; padding: 6px; display: flex; flex-direction: column; }
.cc-tr .tr-menu button { display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 8px 10px; border-radius: 5px; font-size: 13px; color: var(--tr-ink); cursor: pointer; text-align: left; }
.cc-tr .tr-menu button:hover, .cc-tr .tr-menu button:focus-visible { background: var(--tr-paper); outline: none; }
.cc-tr .tr-toast { position: fixed; left: 50%; bottom: 54px; transform: translateX(-50%) translateY(8px); background: var(--tr-tipbg); color: var(--tr-tipfg); padding: 9px 14px; border-radius: 8px; font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 40; max-width: 90vw; }
.cc-tr .tr-toast.show { opacity: 1; transform: translateX(-50%); }

.cc-tr .tr-ov { position: fixed; inset: 0; background: var(--tr-scrim); display: flex; align-items: flex-start; justify-content: center; padding-top: 6vh; z-index: 30; }
.cc-tr .tr-ov.drawer { justify-content: flex-end; padding-top: 0; }
.cc-tr .tr-dlg { background: var(--tr-surface); color: var(--tr-ink); border-radius: 12px; box-shadow: 0 24px 60px rgba(10, 30, 30, .35); width: min(520px, 94vw); max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; }
.cc-tr .tr-dlg.narrow { width: min(340px, 94vw); }
.cc-tr .tr-dlg.wide { width: min(940px, 94vw); }
.cc-tr .tr-dlg.hist { width: min(380px, 100vw); height: 100%; max-height: 100%; border-radius: 0; }
.cc-tr .tr-dh { display: flex; align-items: center; padding: 14px 18px 10px; }
.cc-tr .tr-dh h3 { margin: 0; font: 600 18px var(--tr-serif); }
.cc-tr .tr-dbody { padding: 4px 22px 22px; overflow: auto; }
.cc-tr .tr-prose p { font-size: 13.5px; line-height: 1.55; margin: 0 0 10px; }
.cc-tr .tr-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.cc-tr .tr-colh { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--tr-muted); font-weight: 700; margin: 12px 0 4px; }
.cc-tr .tr-colh:first-child { margin-top: 0; }
.cc-tr .tr-sc { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px dotted var(--tr-line); font-size: 13px; }
.cc-tr .tr-sec { padding: 14px 0; border-bottom: 1px solid var(--tr-line); }
.cc-tr .tr-sec:last-of-type { border-bottom: 0; }
.cc-tr .tr-sec h4 { font: 600 15px var(--tr-serif); margin: 0 0 4px; }
.cc-tr .tr-sd { font-size: 12.5px; color: var(--tr-muted); margin: 0 0 10px; line-height: 1.45; }
.cc-tr .tr-cards { display: flex; gap: 10px; flex-wrap: wrap; }
.cc-tr .tr-rc { flex: 1; min-width: 180px; border: 1px solid var(--tr-line); border-radius: 8px; padding: 12px 14px; font-size: 13px; line-height: 1.45; background: var(--tr-surface); color: var(--tr-ink); text-align: left; cursor: pointer; }
.cc-tr .tr-rc.on { border-color: var(--tr-teal); box-shadow: inset 0 0 0 1px var(--tr-teal); background: var(--tr-focus); }
.cc-tr .tr-rc b { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 4px; }
.cc-tr .tr-rad { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--tr-dash); flex: none; }
.cc-tr .tr-rc.on .tr-rad { border: 4px solid var(--tr-teal); }
.cc-tr .tr-row { display: flex; align-items: center; gap: 12px; font-size: 13.5px; padding: 5px 0; flex-wrap: wrap; }
.cc-tr .tr-l { min-width: 220px; }
.cc-tr .tr-numin { width: 64px; border: 1px solid var(--tr-line); border-radius: 5px; padding: 5px 8px; font: 13.5px var(--tr-sans); text-align: center; background: var(--tr-surface); color: var(--tr-ink); }
.cc-tr .tr-sel { border: 1px solid var(--tr-line); border-radius: 5px; padding: 5px 10px; font: 13.5px var(--tr-sans); background: var(--tr-surface); color: var(--tr-ink); min-width: 190px; }
.cc-tr .tr-tog { width: 34px; height: 20px; border-radius: 10px; background: var(--tr-teal); position: relative; flex: none; border: 0; cursor: pointer; padding: 0; }
.cc-tr .tr-tog::after { content: ""; position: absolute; right: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.cc-tr .tr-tog.off { background: var(--tr-dash); }
.cc-tr .tr-tog.off::after { right: auto; left: 2px; }
.cc-tr .tr-ct { display: grid; grid-template-columns: 44px 1fr 70px 80px 80px; align-items: center; gap: 8px; font-size: 13px; padding: 4px 0; border-bottom: 1px dotted var(--tr-line); }
.cc-tr .tr-ct kbd { margin: 0; justify-self: start; }
.cc-tr .tr-cth { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--tr-muted); font-weight: 700; }
.cc-tr .tr-ct .tr-s { font-family: var(--heb-font); font-size: 15px; padding: 0 6px; border-radius: 3px; text-align: center; line-height: 1.5; cursor: default; }
.cc-tr .tr-swin { width: 36px; height: 24px; padding: 0; border: 1px solid var(--tr-line); border-radius: 5px; background: none; cursor: pointer; }
.cc-tr .tr-hlist { display: flex; flex-direction: column; overflow: auto; flex: 0 1 auto; max-height: 60%; min-height: 0; border-top: 1px solid var(--tr-line); }
.cc-tr .tr-hv { display: flex; gap: 12px; padding: 10px 18px; border: 0; border-bottom: 1px solid var(--tr-line); background: none; text-align: left; font-size: 13px; color: var(--tr-ink); cursor: pointer; }
.cc-tr .tr-hv .tm { width: 84px; flex: none; color: var(--tr-muted); font-variant-numeric: tabular-nums; }
.cc-tr .tr-hv:hover { background: var(--tr-paper); }
.cc-tr .tr-hv.on { background: var(--tr-tint); }
.cc-tr .tr-hprev { padding: 14px 18px 18px; border-top: 1px solid var(--tr-line); font-size: 13px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

/* ---- touch palette (iPad / Pencil): only under a coarse pointer */
.cc-tr .tr-touch { display: none; }
@media (pointer: coarse) {
  .cc-tr .tr-touch { display: flex; align-items: center; gap: 8px; position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); background: var(--tr-surface); border: 1px solid var(--tr-line); border-radius: 30px; padding: 8px 12px; box-shadow: var(--tr-shadow); z-index: 25; max-width: 98vw; overflow-x: auto; }
  .cc-tr .tr-dot { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .08); font: 600 13px var(--tr-sans); display: inline-flex; align-items: center; justify-content: center; background: var(--tr-surface); color: var(--tr-ink); cursor: pointer; padding: 0; }
  .cc-tr .tr-dot.on { box-shadow: 0 0 0 3px var(--tr-teal); }
  .cc-tr .tr-note-dot { color: var(--tr-brass); font-size: 17px; }
  .cc-tr .tr-toolbar .tr-chip[data-f], .cc-tr .tr-toolbar .tr-vsep { display: none; }
  .cc-tr .tr-chip, .cc-tr .tr-ib, .cc-tr .tr-vl, .cc-tr .tr-seg button, .cc-tr .tr-btn { min-height: 44px; }
  .cc-tr .tr-gl { font-size: 15px; min-width: 80px; padding: 6px 2px 7px; }
  .cc-tr .tr-fold { opacity: 1; }
  .cc-tr .tr-page { padding-bottom: 120px; }
}

/* ---- narrow screens: one column */
@media (max-width: 820px) {
  .cc-tr .tr-side { display: none; }
  .cc-tr .tr-page { padding: 14px 14px 100px; }
  .cc-tr .tr-titlerow h1 { font-size: 22px; }
  .cc-tr .tr-sub { display: none; }
  .cc-tr .tr-prog, .cc-tr .tr-crumbs span:not(:last-child), .cc-tr .tr-back span, .cc-tr .tr-foot .tr-fk { display: none; }
  .cc-tr .tr-crumbs b { font-size: 13px; }
  .cc-tr .tr-cr-pre { display: none !important; }
  .cc-tr .tr-hint { display: none; }
  .cc-tr .tr-v, .cc-tr.is-grc .tr-v { display: block; padding: 14px 0 16px 34px; }
  .cc-tr .tr-num, .cc-tr .tr-gnum { position: absolute; left: 0; top: 12px; padding: 0; width: 28px; text-align: left; }
  .cc-tr .tr-num:empty { display: none; }
  .cc-tr .tr-fold { display: none; }
  .cc-tr .tr-hl { padding-inline-start: 12px; }
  .cc-tr .tr-eng { padding: 2px 0 8px; }
  .cc-tr .tr-vbox { padding: 8px 0 0; }
  .cc-tr .tr-cols { grid-template-columns: 1fr; gap: 0; }
  .cc-tr .tr-l { min-width: 0; flex: 1 1 100%; }
  .cc-tr .tr-ct { grid-template-columns: 40px 1fr 60px 40px 40px; }
  .cc-tr .tr-wpop, .cc-tr .tr-chkpop { width: min(330px, 94vw); }
  .cc-tr .tr-ov { padding-top: 2vh; }
  .cc-tr .tr-toolbar { overflow-x: auto; flex-wrap: nowrap; padding: 6px 8px; }
  .cc-tr .tr-toolbar > * { flex: none; }
}

/* ---- print: the workbook layout (A4).
   @page margin is 0 so the browser prints no date / URL / page-number header or footer; the page margins come from padding on
   .tr-page (box-decoration-break: clone repeats it on every page). Greek flows words horizontally and wraps like the screen
   (board G) with the verse's translation under it; Hebrew prints right-aligned clause lines with colours, glosses and the
   translations (typed text is mirrored into .tr-pt blocks by beforeprint, because a textarea cannot grow to fit in print). */
@page { size: A4; margin: 0; }
.cc-tr .tr-pt { display: none; }
@media print {
  html, body { background: #fff !important; height: auto !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; }
  .cc-tr { position: static !important; height: auto !important; overflow: visible !important; background: #fff !important; color: #000 !important; --tr-bg: #fff; --tr-surface: #fff; --tr-ink: #000; --tr-line: #bbb; --tr-dash: #888; --tr-muted: #555; --tr-dim: #666; --tr-rare: #6b5a2d; --tr-focus: transparent; --tr-brass: #92671f; --tr-teal: #16565c;
    --c-q-bg: #f5c6bf; --c-y-bg: #fbe69a; --c-w-bg: #bfe3b4; --c-wq-bg: #c3daf3; --c-imv-bg: #fbe69a; --c-imv-fg: #c0261b; --c-jus-bg: #fbe69a; --c-jus-fg: #1f5fbf; --c-coh-bg: #fbe69a; --c-coh-fg: #7b1f2b; --c-inf-fg: #1f5fbf; --c-ptc-fg: #6f3fa0; --c-pn-fg: #737a7c; }
  .cc-tr, .cc-tr * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cc-tr .tr-app, .cc-tr .tr-body, .cc-tr .tr-scroll { display: block !important; height: auto !important; overflow: visible !important; background: #fff; }
  .cc-tr .tr-head, .cc-tr .tr-toolbar, .cc-tr .tr-side, .cc-tr .tr-foot, .cc-tr .tr-layer, .cc-tr .tr-touch, .cc-tr .tr-foldrow, .cc-tr .tr-fold,
  .cc-tr .tr-endnote, .cc-tr .tr-seg, .cc-tr .tr-lab, .cc-tr .tr-titlerow .tr-btn, .cc-tr .tr-sub, .cc-tr .tr-gap, .cc-tr .tr-rare:empty { display: none !important; }
  .cc-tr .tr-page { max-width: none !important; width: auto; margin: 0; padding: 12mm 14mm !important; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
  .cc-tr .tr-titlerow { margin-bottom: 6px; }
  .cc-tr .tr-titlerow h1 { font-size: 20pt; }
  /* one verse never splits across pages (unless it alone is longer than a page) */
  .cc-tr .tr-v, .cc-tr.is-grc .tr-v, .cc-tr .tr-v.hide { padding: 9px 0 11px !important; display: grid !important; break-inside: avoid; page-break-inside: avoid; padding: 9px 0 11px; row-gap: 8px; grid-template-columns: minmax(0, 1.25fr) 34px minmax(0, 1fr); }
  .cc-tr .tr-num, .cc-tr .tr-gnum { position: static !important; width: auto !important; left: auto; top: auto; padding-top: 4px; text-align: center; }
  .cc-tr .tr-num:empty { display: block; }
  .cc-tr .tr-hl { font-size: 22px; }
  .cc-tr .tr-wd { font-size: 22px; box-shadow: none !important; text-decoration: none !important; }
  .cc-tr .tr-gl { font-size: 10.5px; border-bottom: 1px dashed #888; background: none !important; box-shadow: none !important; }
  .cc-tr .tr-gl::placeholder, .cc-tr .tr-tx::placeholder { color: transparent; }
  .cc-tr .tr-rare { font-size: 10px; }
  .cc-tr .tr-note { font-size: 10px; }
  .cc-tr .tr-dot-note { display: none; }
  /* Greek: words flow left to right and wrap, glosses under each word, the verse translation below */
  .cc-tr.is-grc .tr-v, .cc-tr.is-grc .tr-v.hide { display: grid !important; grid-template-columns: 30px minmax(0, 1fr); }
  .cc-tr.is-grc .tr-gbody { min-width: 0; width: auto; }
  .cc-tr.is-grc .tr-gwords { display: flex !important; flex-direction: row; flex-wrap: wrap; gap: 4px 9px; width: auto; }
  .cc-tr.is-grc .tr-cell { display: inline-flex; flex: none; }
  .cc-tr.is-grc .tr-wd { font-size: 19px; }
  .cc-tr.is-grc .tr-vt, .cc-tr.is-grc .tr-pt { margin-top: 8px; }
  /* translations: the typed text is mirrored into .tr-pt (see beforeprint) and the textarea is hidden */
  .cc-tr .tr-tx { display: none !important; }
  .cc-tr .tr-pt { display: block; font: 11.5pt/1.5 var(--tr-serif); color: #000; white-space: pre-wrap; overflow-wrap: anywhere; border-bottom: 1px solid #999; padding: 4px 2px; min-height: 1.5em; }
  .cc-tr .tr-pt.smooth { border: 1px solid #aaa; border-radius: 4px; padding: 6px 8px; min-height: 3em; }
  .cc-tr .tr-vbox { padding-left: 4px; }
  .cc-tr .tr-vunder { padding-top: 2px; }
  .cc-tr .tr-eng { padding-top: calc(var(--hsz) * .1); }
}

/* ---- ink (drawing over the passage). Strokes live in a 1em × 1em <svg> inside each word box (1 unit = 1em of the passage
   font), so resizing, text size, clause re-breaks and print move/scale them with the word, with no JS measuring. */
.cc-tr .tr-ink { position: absolute; left: 0; top: 0; width: 1em; height: 1em; overflow: visible; pointer-events: none; z-index: 3; fill: none; stroke: currentColor; }
.cc-tr .tr-ink g.gone { display: none; }
.cc-tr .tr-inkpad { display: none; position: absolute; inset: 0; z-index: 4; }
.cc-tr .tr-inklive { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cc-tr.ink-on .tr-inkpad { display: block; cursor: crosshair; touch-action: pan-x pan-y pinch-zoom; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.cc-tr.ink-on .tr-v { -webkit-user-select: none; user-select: none; }
.cc-tr .tr-mode { margin-right: 4px; }
.cc-tr .tr-mode button.on { background: var(--tr-teal); color: var(--tr-on); font-weight: 600; }
.cc-tr .tr-inkbtn .tr-s svg { display: block; }
.cc-tr .tr-inkbar { display: none; flex: none; align-items: center; gap: 6px; padding: 6px 12px; background: var(--tr-raised); border-bottom: 1px solid var(--tr-line); flex-wrap: wrap; }
.cc-tr.ink-on .tr-inkbar { display: flex; }
.cc-tr .tr-inkbar .tr-chip .tr-hlg { color: #e0b400; font-size: 17px; }
.cc-tr .tr-inkbar .tr-btn.pri { background: var(--tr-teal); color: var(--tr-on); border-color: var(--tr-teal); font-weight: 600; }
.cc-tr .tr-sws { display: inline-flex; gap: 8px; align-items: center; }
.cc-tr .tr-sw { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--tr-surface); background: var(--sw); box-shadow: 0 0 0 1px var(--tr-line); cursor: pointer; padding: 0; }
.cc-tr .tr-sw.on { box-shadow: 0 0 0 2.5px var(--tr-teal); }
.cc-tr .tr-inkhint { display: inline; white-space: nowrap; }
.cc-tr .tr-mode { flex: none; }
.cc-tr .tr-mode button { white-space: nowrap; }
@media (max-width: 1100px) { .cc-tr .tr-inkhint { display: none; } }
.cc-tr.ink-on .tr-touch > :not(.tr-pen-dot) { display: none; }
.cc-tr .tr-pen-dot.on { background: var(--tr-teal); color: var(--tr-on); }
.cc-tr .tr-inkbtn.on { background: var(--tr-tint); }
@media (pointer: coarse) {
  .cc-tr .tr-sw { width: 38px; height: 38px; }
  .cc-tr .tr-sws { gap: 12px; }
  .cc-tr .tr-inkbar { gap: 8px; }
}
@media (max-width: 820px) {
  .cc-tr .tr-inkbar { overflow-x: auto; flex-wrap: nowrap; padding: 6px 8px; }
  .cc-tr .tr-inkbar > * { flex: none; }
  .cc-tr .tr-inkhint { display: none; }
  .cc-tr .tr-mode button { padding: 6px 8px; }
  .cc-tr .tr-crumbs { flex: 1 1 0; }
}
@media print { .cc-tr .tr-inkpad, .cc-tr .tr-inkbar, .cc-tr .tr-inklive { display: none !important; } .cc-tr .tr-ink { display: block; } }

/* ---- sidebar tabs (Passage | Pages) when the host provides a pages pane */
.cc-tr .tr-side.tr-side-tabbed { padding-top: 0; gap: 0; }
.cc-tr .tr-sidetabs { display: flex; gap: 4px; margin: 0 -14px 14px; padding: 10px 10px 0; border-bottom: 1px solid var(--tr-line); position: sticky; top: 0; background: var(--tr-raised); z-index: 1; }
.cc-tr .tr-sidetabs button { font: 13px var(--tr-sans); padding: 8px 10px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--tr-muted); cursor: pointer; }
.cc-tr .tr-sidetabs button.on { font-weight: 600; color: var(--tr-ink); border-bottom-color: var(--tr-brass); }
.cc-tr .tr-sidepane { display: flex; flex-direction: column; gap: 18px; }
.cc-tr .tr-sidepane[hidden] { display: none; }
@media (pointer: coarse) { .cc-tr .tr-sidetabs button { padding: 12px 14px; } }