/* Word families and Today's family (round 7): src/features/build/family.js, today.js, fword.js.
   Kit tokens only. Knowledge uses the Atlas encodings (explore.css --x-box, --x-new): ink known, ink-3 shaky, an open
   box not known, a dotted box not seen, accent practised today. Known is never green; no role colours here. */

/* ---------- a word with its joint, weld and stress dot (fword.js) ---------- */
.fw { position: relative; display: inline-flex; align-items: baseline; white-space: nowrap; padding-bottom: 0.32em; }
.fw-art { color: var(--ink-3); font-size: 0.72em; margin-inline-end: 0.28em; }
.fw-in { position: relative; display: inline-flex; align-items: baseline; }
.fw-pre, .fw-rest { position: relative; }
.fw.is-sep .fw-pre { margin-inline-end: 3px; }
.fw.is-sep .fw-pre::after { content: ""; position: absolute; inset-inline-end: -2.5px; top: 18%; height: 70%; width: 1.5px; border-radius: 1px; background: var(--field-border); }
.fw-weld { position: absolute; inset-inline: 0; bottom: -2px; height: 1.5px; border-radius: 1px; background: var(--ink); }
.fw-sv { position: relative; }
.fw-dot { position: absolute; inset-inline-start: 50%; bottom: -0.32em; width: 4px; height: 4px; margin-inline-start: -2px; border-radius: 50%; background: currentColor; }
.fw.is-weld .fw-dot { bottom: -0.42em; }

/* ---------- the family view ---------- */
.fv { padding-bottom: var(--s-12); }
.fv .label { margin-top: var(--s-2); color: var(--ink-3); }
.fv-grid { display: grid; gap: 0 48px; grid-template-columns: minmax(0, 1fr); }
.fv-h1 { display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; }
.fv-h1 h1 { font-size: 40px; line-height: 1.05; }
.fv-en { font: 400 19px/1.3 var(--font-display); color: var(--ink-2); }
.fv-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin-top: 6px; font: 400 13px/1.4 var(--font-ui); color: var(--ink-3); }
.fv-fq { display: inline-flex; gap: 6px; align-items: center; }
.fv-maplink { display: inline-flex; align-items: center; gap: 2px; min-height: var(--tap); margin-block: -12px; color: var(--accent-ink); text-decoration: none; font: 500 13px/1 var(--font-ui); }
.fv-maplink:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.fv-freq { display: inline-flex; gap: 2px; align-items: flex-end; height: 10px; }
.fv-freq i { width: 3px; border-radius: 1px; background: var(--cell-empty); }
.fv-freq i:nth-child(1) { height: 4px; } .fv-freq i:nth-child(2) { height: 5.5px; } .fv-freq i:nth-child(3) { height: 7px; } .fv-freq i:nth-child(4) { height: 8.5px; } .fv-freq i:nth-child(5) { height: 10px; }
.fv-freq i.is-on { background: var(--ink-2); }
.fv-seg { display: grid; width: 100%; margin-top: var(--s-5); }
.fv-seg button { min-height: 40px; font-size: 14px; }
.fv-seg button[aria-pressed="true"] { background: var(--surface); box-shadow: 0 1px 2px rgb(20 24 40 / 0.08), 0 0 0 1px var(--hairline); }
@media (pointer: coarse) { .fv-seg button { min-height: 44px; } }
.fv-chips { display: flex; gap: 8px; overflow-x: auto; padding: 12px var(--gutter) 4px; margin-inline: calc(-1 * var(--gutter)); scrollbar-width: none; }
.fv-chips::-webkit-scrollbar { display: none; }
.fv-chips .chip { flex: none; font-size: 15px; }
.fv-chips .chip:not([aria-pressed="true"]) { color: var(--ink); }
@media (pointer: coarse) { .fv-chips .chip { min-height: 44px; padding: 0 16px; } }

/* knowledge squares and derivability marks */
.fv-sq { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 2px; }
.fv-sq.is-known { background: var(--ink); }
.fv-sq.is-shaky { background: var(--ink-3); }
.fv-sq.is-unknown { box-shadow: inset 0 0 0 1.5px var(--x-box); }
.fv-sq.is-unseen { outline: 1.5px dotted var(--x-box); outline-offset: -1.5px; }
.fv-sq { position: relative; }
.fv-sq.is-today::after { content: ""; position: absolute; inset-inline: 0; bottom: -3px; height: 1.5px; border-radius: 1px; background: var(--accent); }
.fv-gr { display: inline-block; flex: none; width: 18px; height: 6px; border-radius: 1px; position: relative; }
.fv-gr.is-T { background: var(--ink); }
.fv-gr.is-M { background: repeating-linear-gradient(-45deg, var(--ink) 0 1.5px, transparent 1.5px 3.5px); box-shadow: inset 0 0 0 1px var(--ink); }
.fv-gr.is-O { box-shadow: inset 0 0 0 1.2px var(--ink); margin-inline-end: 6px; }
.fv-gr.is-O::after { content: ""; position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--ink); inset-inline-end: -6px; top: 1.5px; }
.fv-gr.is-none { background: none; }

/* the ring */
.fv-ring-card { margin-top: var(--s-3); padding: 10px 8px 14px; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-card); }
.fv-ring { position: relative; width: 100%; max-width: 420px; margin: 0 auto; aspect-ratio: 360 / 344; }
.fv-ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fv-spoke { stroke: var(--ink-3); stroke-width: 1.2; opacity: 0.6; }
.fv-spoke.is-i { stroke-dasharray: 2 3; opacity: 0.85; }
.fv-kid { fill: none; stroke: var(--x-box); stroke-width: 1.3; }
.fv-kid.is-known { fill: var(--ink); stroke: none; }
.fv-kid.is-shaky { fill: var(--ink-3); stroke: none; }
.fv-kid.is-unseen { stroke-dasharray: 1.5 2; }
.fv-node { position: absolute; transform: translate(-50%, -50%); min-width: 40px; height: 26px; padding: 0 5px; border: 0; border-radius: var(--r-tile); background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--x-box); color: var(--ink); font: 400 15px/1 var(--font-display); cursor: pointer; display: grid; place-items: center; }
.fv-node::before { content: ""; position: absolute; inset: -9px -4px; }   /* a 44 px tap target */
.fv-node.is-known { background: var(--ink); color: var(--on-ink); box-shadow: none; }
.fv-node.is-shaky { background: var(--ink-3); color: var(--on-ink); box-shadow: none; }
.fv-node.is-unseen { box-shadow: none; outline: 1.5px dotted var(--x-box); outline-offset: -1.5px; font-style: italic; color: var(--x-new); }
.fv-node.is-today { box-shadow: 0 0 0 2px var(--canvas), 0 0 0 3.5px var(--accent); }
.fv-node:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fv-node .fv-gr { position: absolute; top: calc(100% + 4px); inset-inline-start: 50%; transform: translateX(-50%); width: 16px; height: 4px; }
.fv-node .fv-gr.is-O { transform: translateX(calc(-50% - 3px)); }
/* a dual verb's two readings on one prefix: a joint (splits) or a weld (never splits) on the tile */
.fv-node.is-dual-s .fv-node-t, .fv-vchip.is-dual-s .fv-node-t { position: relative; padding-inline-end: 5px; }
.fv-node.is-dual-s .fv-node-t::after, .fv-vchip.is-dual-s .fv-node-t::after { content: ""; position: absolute; inset-inline-end: 0; top: 15%; height: 70%; width: 1.5px; border-radius: 1px; background: currentColor; opacity: 0.55; }
.fv-node.is-dual-i .fv-node-t, .fv-vchip.is-dual-i .fv-node-t { box-shadow: 0 1.5px 0 currentColor; }
/* the rest of a dense family: chips under the ring, the most common first (same encodings as the ring) */
.fv-more { margin: 14px 8px 0; }
.fv-more-h { font: 500 12px/1.3 var(--font-ui); color: var(--ink-3); }
.fv-more-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.fv-vchip { position: relative; min-width: 44px; height: 36px; padding: 0 10px 4px; border: 0; border-radius: var(--r-tile); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--x-box);
  color: var(--ink); font: 400 16px/1 var(--font-display); cursor: pointer; display: inline-grid; place-items: center; }
.fv-vchip::before { content: ""; position: absolute; inset: -4px -2px; }
.fv-vchip.is-known { background: var(--ink); color: var(--on-ink); box-shadow: none; }
.fv-vchip.is-shaky { background: var(--ink-3); color: var(--on-ink); box-shadow: none; }
.fv-vchip.is-unseen { box-shadow: none; outline: 1.5px dotted var(--x-box); outline-offset: -1.5px; font-style: italic; color: var(--x-new); }
.fv-vchip.is-today { box-shadow: 0 0 0 2px var(--canvas), 0 0 0 3.5px var(--accent); }
.fv-vchip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fv-vchip .fv-gr { position: absolute; bottom: 5px; inset-inline-start: 50%; transform: translateX(-50%); width: 14px; height: 3px; }
.fv-vchip.is-known .fv-gr, .fv-vchip.is-shaky .fv-gr { --ink: var(--on-ink); }
@media (pointer: coarse) { .fv-vchip { height: 44px; } }
.fv-skip:not(:focus) { clip-path: inset(50%); }
.fv-node-root { position: absolute; transform: translate(-50%, -50%); padding: 9px 14px; border-radius: 10px; background: var(--ink); color: var(--on-ink); font: 400 20px/1 var(--font-display); white-space: nowrap; }
.fv-sum { display: flex; align-items: center; gap: 12px; margin: 14px 8px 0; font: 500 13px/1.3 var(--font-ui); color: var(--ink-2); }
.fv-bar { flex: 1; display: flex; gap: 2px; height: 6px; }
.fv-bar i { height: 100%; border-radius: 1px; }
.fv-bar .is-known { background: var(--ink); } .fv-bar .is-shaky { background: var(--ink-3); }
.fv-bar .is-unknown { box-shadow: inset 0 0 0 1.5px var(--x-box); } .fv-bar .is-unseen { background: var(--x-bar-new); }
.fv-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 8px 0; font: 400 12px/1.3 var(--font-ui); color: var(--ink-3); }
.fv-legend > span { display: inline-flex; gap: 6px; align-items: center; }
.fv-line { display: inline-block; width: 18px; height: 0; border-top: 1.2px solid var(--ink-3); }
.fv-line.is-i { border-top-style: dotted; border-top-width: 1.5px; }

/* the tree */
.fv-sec { margin-top: var(--s-8); }
.fv-sec h2 { font-size: 24px; }
.fv-rule { margin-top: 2px; font: 400 13px/1.4 var(--font-ui); color: var(--ink-3); }
.fv-list { list-style: none; margin: 10px 0 0; padding: 0; }
.fv-row { border-top: 1px solid var(--hairline); }
.fv-list > .fv-row:last-child { border-bottom: 1px solid var(--hairline); }
.fv-rowbtn { all: unset; box-sizing: border-box; width: 100%; min-height: 56px; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 8px 2px; cursor: pointer; }
.fv-rowbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px; }
.fv-rowbtn > .fv-sq, .fv-rowbtn > .fv-gr { justify-self: center; }
.fv-w { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; min-width: 0; font: 400 20px/1.3 var(--font-display); color: var(--ink); }
.fv-w.is-unseen .fw { font-style: italic; color: var(--x-new); }
.fv-tag { font-style: normal; }
.fv-m { grid-column: 2; font: 400 13px/1.35 var(--font-ui); color: var(--ink-2); }
.fv-r { grid-row: 1 / span 2; grid-column: 3; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font: 400 12px/1 var(--font-ui); color: var(--ink-3); }
.fv-r-marks { display: inline-flex; gap: 8px; align-items: center; }
.fv-row.is-kid > .fv-rowbtn { padding-inline-start: 24px; position: relative; }
.fv-row.is-kid > .fv-rowbtn::before { content: ""; position: absolute; inset-inline-start: 8px; top: 0; height: 50%; width: 10px; border-inline-start: 1px solid var(--hairline-strong); border-bottom: 1px solid var(--hairline-strong); border-end-start-radius: 4px; }
.fv-row.is-k2 > .fv-rowbtn { padding-inline-start: 46px; }
.fv-row.is-k2 > .fv-rowbtn::before { inset-inline-start: 30px; }
.fv-row[aria-current="true"] > .fv-rowbtn { box-shadow: inset 2px 0 0 var(--ink); }
.fv-row.is-kid > .fv-rowbtn .fv-sq { margin-inline-start: 0; }

/* a form's card: the word builds itself */
.fv-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-card) var(--ease-out); }
.fv-detail.is-open { grid-template-rows: 1fr; }
.fv-detail > div { overflow: hidden; min-height: 0; }
.fv-card { margin: 4px 0 14px; padding: 16px 16px 14px; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-card); }
.fv-stage { position: relative; height: 96px; display: flex; align-items: center; justify-content: center; }
.fv-big { position: relative; display: inline-flex; align-items: baseline; white-space: nowrap; font: 400 38px/1 var(--font-display); letter-spacing: -0.01em; color: var(--ink); }
.fv-big-w { position: relative; display: inline-flex; align-items: baseline; }
.fv-pc { position: relative; display: inline-block; }
.fv-pc.is-pre { margin-inline-end: 0; }
.fv-joint { position: absolute; inset-inline-end: -3px; top: 12%; height: 76%; width: 1.5px; border-radius: 1px; background: var(--field-border); transform-origin: center; }
.fv-big-w:has(.fv-joint) .fv-pc.is-pre { margin-inline-end: 5px; }
.fv-weld { position: absolute; inset-inline: 0; bottom: -6px; height: 2px; border-radius: 1px; background: var(--ink); transform-origin: left; }
.fv-big .fw-dot { width: 5px; height: 5px; margin-inline-start: -2.5px; bottom: -14px; }
.fv-artp { display: inline-block; margin-inline-end: 0.3em; font-size: 0.62em; color: var(--ink-3); }
.fv-ghost { color: var(--ink-3); }
.fv-arc { position: absolute; inset-inline-start: 0; top: -30px; overflow: visible; pointer-events: none; }
.fv-arc path { fill: none; stroke: var(--ink-3); stroke-width: 1.2; stroke-dasharray: 2 3; }
.fv-cls { position: absolute; top: 0; inset-inline-end: 0; height: 18px; overflow: hidden; font: 500 12px/18px var(--font-ui); color: var(--ink-3); }
.fv-cls > span { display: block; }
.fv-what { margin-top: 10px; font: 400 17px/1.4 var(--font-ui); color: var(--ink); }
.fv-how { display: flex; gap: 10px; align-items: baseline; margin-top: 10px; font: 400 14px/1.45 var(--font-ui); color: var(--ink-2); }
.fv-how b { font-weight: 600; color: var(--ink); }
.fv-ex { margin-top: 12px; font: 400 18px/1.45 var(--font-display); color: var(--ink); }
.fv-ex u { text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; font-weight: 500; }
.fv-exen { font: 400 13px/1.4 var(--font-ui); color: var(--ink-3); }
.fv-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 12px; font: 400 13px/1.3 var(--font-ui); color: var(--ink-3); }
.fv-de { font: 400 15px/1 var(--font-display); color: var(--ink-2); }
.fv-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.fv-report { margin-inline-start: auto; color: var(--ink-3); }

/* browse by prefix or ending */
.fv-head { margin-top: var(--s-5); }
.fv-head h2 { font-size: 30px; }
.fv-head p { margin-top: 4px; color: var(--ink-2); }
.fv-head .caption { color: var(--ink-3); }
.fv-browse-list { margin-top: var(--s-3); }
.fv-cta { margin-top: var(--s-8); padding: 16px; border-radius: var(--r-card); background: var(--surface-2); display: grid; gap: 10px; }
.fv-cta p { font: 400 14px/1.4 var(--font-ui); color: var(--ink-2); }
.fv-cta-line { margin-top: var(--s-4); }
.fv-cta-line a:not(.btn) { color: var(--accent-ink); text-decoration: none; font: 500 15px/1 var(--font-ui); display: inline-flex; min-height: var(--tap); align-items: center; }

@media (min-width: 900px) {
  .fv-grid { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); align-items: start; }
  .fv-side { position: sticky; top: var(--s-4); }
  .fv-h1 h1 { font-size: 48px; }
  .fv-chips { margin-inline: 0; padding-inline: 0; }   /* 40 roots: one scrolling row, so the ring stays in view */
  .fv-main > .fv-sec:first-child, .fv-main > .fv-head:first-child { margin-top: var(--s-6); }
}
/* inside a sheet over a round: one column */
.fv-sheet .fv-grid { grid-template-columns: minmax(0, 1fr); }
.fv-sheet .fv-side { position: static; }
.fv-sheet .fv-chips { margin-inline: 0; padding-inline: 0; }

@media (forced-colors: active) {
  .fv-sq.is-known, .fv-gr.is-T, .fv-node.is-known, .fw-dot, .fw-weld, .fv-weld, .fv-big .fw-dot { background: CanvasText; forced-color-adjust: none; }
  .fv-node.is-today, .fv-sq.is-today { outline: 2px solid Highlight; }
}

/* ---------- Today's family (today.js): fits a 390 × 664 phone without scrolling ---------- */
.pz { position: fixed; inset: 0 0 auto 0; height: 100dvh; z-index: var(--z-bar, 30); background: var(--canvas); overflow-y: auto; overscroll-behavior: contain;
  display: grid; grid-template-columns: minmax(0, 1fr); padding: env(safe-area-inset-top) max(var(--gutter), env(safe-area-inset-left)) 0; }
.pz-main { display: flex; flex-direction: column; width: 100%; max-width: 440px; min-height: 100%; margin: 0 auto; }
.pz-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 44px; }
.pz-head h1 { font: 600 17px/1.2 var(--font-ui); letter-spacing: -0.01em; text-align: center; }
@media (max-width: 379px) { .pz-head { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; } }
.pz-help { justify-self: end; width: 44px; height: 44px; border: 0; border-radius: 22px; background: none; color: var(--ink-2); cursor: pointer; display: grid; place-items: center; margin-inline-end: -10px; }
/* the root (a link to its family) and the count on one row, the squares under them */
.pz-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 44px; }
.pz-root { display: flex; align-items: baseline; gap: 8px; min-width: 0; min-height: 44px; padding-top: 6px; color: inherit; text-decoration: none; border-radius: 8px; }
.pz-root:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pz-root-w { font: 400 24px/1.1 var(--font-display); letter-spacing: -0.01em; color: var(--ink); text-decoration: underline; text-decoration-color: var(--hairline-strong); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.pz-root-en { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--ink-2); }

/* progress: the count and one square per meaning (no ranks) */
.pz-prog { all: unset; box-sizing: border-box; display: inline-flex; gap: 6px; align-items: center; min-height: 44px; padding: 0 0 0 8px; cursor: pointer; border-radius: 8px; font: 500 13px/1.3 var(--font-ui); color: var(--ink-2); white-space: nowrap; }
.pz-prog:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pz-count-n { color: var(--ink); font-weight: 600; }
.pz-sqs { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 4px; margin: 2px 0 6px; cursor: pointer; }
.pz-sqs i { height: 8px; border-radius: 2px; box-shadow: inset 0 0 0 1.5px var(--field-border); }
.pz-sqs i.is-f1 { background: var(--ink); box-shadow: none; }
.pz-sqs i.is-f2 { background: repeating-linear-gradient(-45deg, var(--ink) 0 1.5px, transparent 1.5px 3.5px); box-shadow: inset 0 0 0 1.5px var(--ink); }
.pz-sqs i.is-shown { background: var(--cell-empty); box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.pz-sqs i.is-now { box-shadow: inset 0 0 0 2px var(--accent); }

/* the clue card */
.pz-clue { margin-top: 4px; padding: 8px 8px 12px; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-card); }
.pz-clue-top { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 4px; }
.pz-clue-mid { text-align: center; min-width: 0; }
.pz-nav { width: 44px; height: 44px; border: 0; border-radius: 22px; background: var(--surface-2); color: var(--ink-2); cursor: pointer; display: grid; place-items: center; }
.pz-meaning { margin: 0 0 6px; font: 400 23px/1.15 var(--font-display); letter-spacing: -0.01em; text-wrap: balance; color: var(--ink); }
.pz-meaning.is-long { font-size: 20px; }
.pz-meta { display: flex; justify-content: center; align-items: center; gap: 4px 10px; flex-wrap: wrap; min-height: 16px; font: 500 12px/1.2 var(--font-ui); color: var(--ink-3); }
.pz-o { display: inline-flex; gap: 10px; align-items: center; }
.pz-new { color: var(--ink-2); border: 1px solid var(--hairline-strong); border-radius: 999px; padding: 2px 7px; }
.pz-tries { display: inline-flex; gap: 4px; }
.pz-tries i { width: 6px; height: 6px; border-radius: 50%; box-shadow: inset 0 0 0 1.2px var(--field-border); }
.pz-tries i.is-used { background: var(--ink-3); box-shadow: none; }

/* the build row: one tile per part; the root is given */
/* a part flips with perspective(600px) in its own transform (src/ui/tile.js flipTo), so the row sets none */
.pz-build { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: 4px; min-height: 52px; margin-top: 10px; }
.pt { position: relative; display: inline-grid; place-items: center; min-width: 40px; height: 46px; padding: 0 10px; border-radius: var(--r-tile); background: var(--surface-2); color: var(--ink); font: 500 21px/1 var(--font-display); transform-style: preserve-3d; }
.pt.is-empty { background: transparent; box-shadow: inset 0 0 0 1.5px var(--hairline-strong); color: var(--ink-3); font: 400 13px/1 var(--font-ui); }
.pt.is-empty.is-hint { box-shadow: inset 0 0 0 1.5px var(--field-border); font: italic 400 19px/1 var(--font-display); }
.pt.is-root { display: inline-flex; align-items: center; white-space: nowrap; }
.pt-tail { color: var(--ink-3); }
.pt.is-art { font-size: 17px; min-width: 46px; }
.pt.is-ok { background: var(--ink); color: var(--on-ink); }
.pt.is-near { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--ink); outline: 1.5px dashed var(--surface); outline-offset: -1.5px; }
.pt.is-no { background: var(--surface-2); color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.pt.is-joined-s { margin-inline-start: -4px; border-start-start-radius: 0; border-end-start-radius: 0; }
.pz-done-word { font: 400 30px/1.15 var(--font-display); }
.pz-shown { display: block; width: 100%; text-align: center; margin-top: 6px; }
.pz-weld { position: absolute; bottom: 2px; inset-inline-start: 50%; width: 46%; margin-inline-start: -23%; height: 2px; border-radius: 1px; background: var(--ink); transform-origin: left; }

.pz-msg { margin: 8px 6px 0; min-height: 2.8em; font: 400 14px/1.4 var(--font-ui); color: var(--ink-2); text-align: center; text-wrap: balance; }
.pz-de, .pz-ex { font: 400 16px/1.4 var(--font-display); color: var(--ink); }
.pz-msg .pz-de { line-height: 1; }   /* the German word in a message keeps the line's height: two lines fit the reserve */
.pz-ex u { text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

/* the hive: the root in the middle, the prefixes round it */
.pz-play { margin-top: 10px; transition: opacity var(--dur-quick) var(--ease-out); }
.pz-play.is-dim { opacity: 0.35; pointer-events: none; }
.pz-hive { position: relative; width: 260px; height: 184px; margin: 2px auto 0; flex: none; }
.hx { position: absolute; transform: translate(-50%, -50%); min-width: 52px; height: 40px; color: var(--ink); font: 500 18px/1 var(--font-display); }
.hx::before { content: ""; position: absolute; inset: -3px -1px; }
/* the tiles are src/ui/tile.js: the button is placed here (the ring's centring translate stays on it), the face draws
   the tile and takes the press (scale 0.94 on the face, so the hit box never shrinks and nothing jumps) */
.hx > .ui-tile-face { padding: 0 8px; }
.hx.is-centre { inset-inline-start: 50%; top: 50%; width: 88px; height: 56px; border: 1px solid var(--ink); border-radius: var(--r-tile); background: var(--ink); color: var(--on-ink); font-size: 23px; cursor: default;
  display: grid; place-items: center; align-content: center; gap: 2px; }
.hx.is-centre small { display: block; font: 400 12px/1 var(--font-ui); opacity: 0.72; }
.pz-ends { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pz-ends.is-two { flex-direction: column; align-items: center; }
.pz-ends-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; }
/* three rows round the root (10 or more prefixes): 152 px tall, tiles 50 wide */
.pz-hive.is-rows { width: auto; height: auto; display: grid; gap: 10px; justify-items: center; margin-top: 4px; }
.pz-hrow { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; }
.pz-hive.is-rows .hx { position: relative; transform: none; }
.pz-hive.is-rows .hx:not(.is-centre) { min-width: 50px; }
.pz-ends[hidden] { display: none; }
.pz-hive.is-rows .hx.is-centre { inset: auto; height: 50px; margin-inline: 4px; }
.pz-ends .hx { position: relative; transform: none; width: auto; min-width: 48px; height: 40px; font-size: 17px; }
.pz-ends .hx > .ui-tile-face { padding: 0 10px; }
/* 44 px to touch, and no further: the hive's last row is 6 px above, so the two hit boxes meet and never overlap */
.pz-ends .hx::before { inset: -2px -1px; }
.pz-ends .hx.is-art { min-width: 48px; font: 500 15px/1 var(--font-ui); }
.pz-sep { width: 1px; margin: 6px 4px; background: var(--hairline-strong); }
.hx kbd, .pz-acts kbd, .pz-split kbd { font: 500 10px/1 var(--font-mono); opacity: 0.6; border: 1px solid currentColor; border-radius: 4px; padding: 1px 3px; margin-inline-start: 6px; }
.pz-ends .hx kbd { display: none; }
@media (pointer: fine) { .pz-ends .hx kbd { display: inline; } }
@media (pointer: coarse) { .pz-acts kbd, .pz-split kbd { display: none; } }

/* the lesson of a word (in the tiles' place until Next): its parts and what each means, how they give the meaning,
   the change, the example */
.pz-learn { display: flex; flex-direction: column; justify-content: flex-start; gap: 10px; padding: 14px 2px 0; text-align: center; }
.pz-learn[hidden] { display: none; }
.pz-learn-miss { font: 600 14px/1.35 var(--font-ui); color: var(--ink); }
.pz-parts { display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; gap: 6px; }
.pz-part { display: grid; justify-items: center; gap: 3px; min-width: 52px; padding: 7px 10px 6px; border-radius: var(--r-tile); background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline-strong); }
.pz-part.is-root { background: var(--surface-2); box-shadow: none; }
.pz-part-de { font: 400 19px/1.1 var(--font-display); color: var(--ink); }
.pz-part-en { max-width: 13ch; font: 400 12px/1.25 var(--font-ui); color: var(--ink-2); text-wrap: balance; }
.pz-plus { align-self: center; font: 400 15px/1 var(--font-ui); color: var(--ink-3); }
.pz-why { font: 400 15px/1.4 var(--font-ui); color: var(--ink); text-wrap: pretty; }
.pz-change { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 4px 12px; font: 400 13px/1.35 var(--font-ui); color: var(--ink-2); }
.pz-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--hairline-strong); font: 500 12px/1 var(--font-ui); color: var(--ink); }
.pz-tag.is-i { box-shadow: inset 0 -1.5px 0 var(--ink), inset 0 0 0 1px var(--hairline-strong); }
.pz-tag.is-art { font: 400 16px/1 var(--font-display); }
.pz-grade { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); }
.pz-learn-ex .pz-ex { font-size: 17px; }
.pz-exen { margin-top: -6px; font: 400 13px/1.35 var(--font-ui); color: var(--ink-3); }
/* the status line keeps its two lines when quiet, so a message never moves the tiles under his thumb (it is kept in
   the tree anyway: a live region must exist before it speaks); typing hides it while it is empty */
.pz-acts.is-next { grid-template-columns: 1fr; }
.pz-acts.is-next > .btn:not(.pz-check) { display: none; }

/* the thumb row */
.pz-acts { display: grid; grid-template-columns: auto auto 1fr; gap: 8px; margin-top: auto; padding: 10px 0 calc(var(--s-3) + env(safe-area-inset-bottom)); }
.pz-acts[hidden] { display: none; }
.pz-type { grid-column: 1 / -1; height: 52px; border: 0; border-bottom: 1px solid var(--field-border); background: transparent; color: var(--ink); caret-color: var(--accent); font: 400 18px/1.3 var(--font-ui); padding: 0 4px; }
.pz-type:focus { outline: none; border-bottom: 2px solid var(--accent); }
.pz-type[hidden] { display: none; }
.pz-splitq { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; padding: 12px 0 calc(var(--s-3) + env(safe-area-inset-bottom)); }
.pz-split { height: 58px; flex-direction: column; gap: 3px; }
.pz-split small { font: 400 13px/1 var(--font-display); color: var(--ink-3); }
@media (pointer: coarse) { .pz.is-typing .pz-play { display: none; } }
body.kb .pz-head, body.kb .pz-root, body.kb .pz-sqs, body.kb .pz-msg:empty { display: none; }
body.kb .pz-top { justify-content: end; }

/* the board: a column from 900 px, a sheet on a phone */
.pz-board h2 { margin: 12px 0 4px; font-size: 22px; }
.pz-blist { list-style: none; margin: 8px 0 0; padding: 0; }
.pz-blist li { border-bottom: 1px solid var(--hairline); }
.pz-blist li.is-cur .pz-brow { box-shadow: inset 2px 0 0 var(--accent); padding-inline-start: 8px; }
.pz-brow { all: unset; box-sizing: border-box; width: 100%; min-height: 48px; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 2px; cursor: pointer; }
.pz-brow:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px; }
.pz-bm { display: grid; min-width: 0; }
.pz-bw { font: 400 18px/1.2 var(--font-display); color: var(--ink); }
.pz-bw.is-open { font: 400 13px/1.3 var(--font-ui); color: var(--ink-3); }
.pz-bclue { font: 400 13px/1.3 var(--font-ui); color: var(--ink-2); }
.pz-bsq { display: inline-block; width: 14px; height: 14px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px var(--field-border); }
.pz-bsq.is-f1 { background: var(--ink); box-shadow: none; }
.pz-bsq.is-f2 { background: repeating-linear-gradient(-45deg, var(--ink) 0 1.5px, transparent 1.5px 3.5px); box-shadow: inset 0 0 0 1.5px var(--ink); }
.pz-bsq.is-shown { background: var(--cell-empty); box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.pz-extra { margin-top: 14px; font-size: 13px; color: var(--ink-2); }
.pz-key { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12px; color: var(--ink-3); }
.pz-key > span { display: inline-flex; gap: 6px; align-items: center; }
.pz-key .pz-bsq { width: 12px; height: 12px; }

/* done */
.pz-done { padding: 18px 0 8px; text-align: center; }
.pz-done h2 { font-size: 24px; }
.pz-fig { display: block; margin-top: 10px; }
.pz-done-of { font: 400 14px/1.4 var(--font-ui); color: var(--ink-2); }
.pz-grid { display: inline-grid; grid-template-columns: repeat(5, 18px); gap: 5px; margin: 16px 0 8px; }
.pz-grid i { width: 18px; height: 18px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--field-border); }
.pz-grid i.is-f1 { background: var(--ink); box-shadow: none; }
.pz-grid i.is-f2 { background: repeating-linear-gradient(-45deg, var(--ink) 0 1.5px, transparent 1.5px 3.5px); box-shadow: inset 0 0 0 1.5px var(--ink); }
.pz-grid i.is-shown { background: var(--cell-empty); box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.pz-done-line { max-width: 36ch; margin: 0 auto; }
.pz-done-acts { display: grid; gap: 8px; margin-top: 22px; padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom)); }
/* tomorrow's root: the reason to come back, plainly */
.pz-next { margin: 14px 0 4px; font: 500 15px/1.4 var(--font-ui); color: var(--ink); }
.pz-next-root { font: 400 22px/1 var(--font-display); }
.pz-next-en { color: var(--ink-2); font-weight: 400; }
/* the board's parts and words, each word a link to its card in the family */
.pz-dsec { margin-top: 22px; text-align: start; }
.pz-dsec h3 { font: 600 13px/1.3 var(--font-ui); color: var(--ink-2); }
.pz-dparts { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 14px; }
.pz-dp { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.pz-dp-de { flex: none; min-width: 52px; font: 400 18px/1.25 var(--font-display); color: var(--ink); }
.pz-dp-en { min-width: 0; font: 400 13px/1.3 var(--font-ui); color: var(--ink-2); }
.pz-dwords { list-style: none; margin: 6px 0 0; padding: 0; }
.pz-dwords li { border-bottom: 1px solid var(--hairline); }
.pz-dw { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; grid-template-areas: "sq w st" ". en en"; gap: 2px 10px; align-items: center; min-height: 52px; padding: 8px 2px; color: inherit; text-decoration: none; }
.pz-dw:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px; }
.pz-dw .pz-bsq { grid-area: sq; }
.pz-dw-w { grid-area: w; font: 400 19px/1.2 var(--font-display); color: var(--ink); }
.pz-dw-en { grid-area: en; font: 400 13px/1.3 var(--font-ui); color: var(--ink-2); }
.pz-dw-st { grid-area: st; color: var(--ink-3); }

@media (min-width: 900px) {
  .pz { grid-template-columns: minmax(0, 440px) minmax(0, 360px); justify-content: center; gap: 0 48px; padding-top: var(--s-6); align-items: start; }
  .pz-main { margin: 0; min-height: 0; }
  .pz-board { position: sticky; top: 0; }
  .pz-chev { display: none; }
  .pz-prog { cursor: default; }
}
@media (max-width: 899px) { .pz-board { display: none; } }
@media (forced-colors: active) {
  .pt.is-ok, .pz-sqs i.is-f1, .pz-bsq.is-f1, .pz-grid i.is-f1 { background: CanvasText; color: Canvas; forced-color-adjust: none; }
  .pz-sqs i.is-now { outline: 2px solid Highlight; }
}

/* ---------- Today's hero: one line to Today's family while it is in the plan (today/index.js) ---------- */
.hero-fam { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: var(--tap); margin-top: var(--s-3); padding-top: var(--s-2);
  border-top: 1px solid var(--hairline); color: var(--ink); text-decoration: none; font: 500 15px/1.3 var(--font-ui); }
.hero-fam-d { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; color: var(--ink-2); }
.hero-fam svg { color: var(--ink-3); }
.hero-fam:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* ---------- the Word building hub's top section (hub.js) ---------- */
.wb-famtop { margin-bottom: 0; padding: 14px 16px 16px; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-card); display: grid; gap: 6px; }
.wb-famtop .label { color: var(--ink-3); }
.wb-famtop-root { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.wb-famtop-root > span:first-child { font: 400 30px/1.1 var(--font-display); color: var(--ink); }
.wb-famtop-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.wb-famtop-acts .btn-primary { flex: 1 1 auto; }
.wb-gamerow { margin-top: var(--s-2); }

/* ---------- "Family: stellen ›" on word sheets (shared/family-link.js) ---------- */
.fam-link-slot:empty { display: none; }
.fam-link { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0; border: 0; background: none; color: var(--accent-ink); text-decoration: none; font: 500 15px/1 var(--font-ui); cursor: pointer; }
.fam-link-label { color: var(--ink-2); }
.fam-link-root { font: 400 18px/1 var(--font-display); color: var(--accent-ink); }
.fam-link svg { color: var(--ink-3); }
.fam-sheet .tv-sheet-body { padding-top: 0; }
.cl-built:empty { display: none; }
.diag-reports { margin: 0 0 4px; padding-inline-start: 1.1em; }

.pz-done h2:focus, .fv h1:focus { outline: none; }