/* The look is mockup version 17 (work/review-tool-mockup/review-mockup.html), carried over
   rule for rule. What differs: the text columns are named for their role (.src, .tgt) instead
   of a language, and pick their font from the lang attribute, so either language can be on
   either side; and the few pieces the mockup did not show (save indicator, lead-in, conflict,
   finish question, talk list, sign-in) are built from the same colours and type. */
:root{
  --ground:#F4F6F8; --sheet:#FFFFFF; --ink:#1B2230; --muted:#687182; --faint:#E3E7EC;
  --accent:#1F5F8B; --accent-soft:#E6EFF6;
  --done:#2F7D4F; --done-soft:#E4F2E9; --warn:#A8660F; --warn-soft:#FBF0DE;
  --del:#B42318; --ins:#1E7A45; --ins-soft:#DDF3E5; --del-soft:#FBE4E1;
  --official:#5B4A8B; --official-soft:#EEEAF7;
  --tint:#F7FAFC;
  --serif-en:"Source Serif 4", Georgia, "Times New Roman", serif;
  --serif-ko:"Noto Serif KR", "Nanum Myeongjo", "AppleMyungjo", serif;
  --ui:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ground:#12161D; --sheet:#1A1F28; --ink:#E6E9EE; --muted:#9AA3B2; --faint:#2B323D;
    --accent:#7FB3DA; --accent-soft:#1E2E3D;
    --done:#6FC293; --done-soft:#1B3025; --warn:#E3A857; --warn-soft:#352813;
    --del:#F08A7E; --ins:#7DD3A0; --ins-soft:#1C3325; --del-soft:#3A201D;
    --official:#B8A7E8; --official-soft:#2A2440; --tint:#1F2530;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ground:#12161D; --sheet:#1A1F28; --ink:#E6E9EE; --muted:#9AA3B2; --faint:#2B323D;
  --accent:#7FB3DA; --accent-soft:#1E2E3D;
  --done:#6FC293; --done-soft:#1B3025; --warn:#E3A857; --warn-soft:#352813;
  --del:#F08A7E; --ins:#7DD3A0; --ins-soft:#1C3325; --del-soft:#3A201D;
  --official:#B8A7E8; --official-soft:#2A2440; --tint:#1F2530;
}
body{background:var(--ground);color:var(--ink);font-family:var(--ui);font-size:14px;padding-inline:16px;padding-block:0 64px;margin:0}
.wrap{max-width:1240px;margin:0 auto}
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--ground);display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;padding-block:12px;border-bottom:1px solid var(--faint)}
.bar h1{font-family:var(--serif-en);font-weight:600;font-size:18px;margin:0;text-wrap:balance}
.bar h1:lang(ko){font-family:var(--serif-ko)}
.bar .who{color:var(--muted);font-size:13px}
.progress{display:flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums;color:var(--muted);font-size:13px}
.meter{width:120px;height:6px;background:var(--faint);border-radius:3px;overflow:hidden}
.meter i{display:block;height:100%;background:var(--done);width:0;transition:width .2s}
.spacer{flex:1}
.finish{font:600 13px var(--ui);background:var(--ink);color:var(--sheet);border:0;padding:8px 14px;border-radius:6px;cursor:pointer}
.sheet{background:var(--sheet);border-radius:8px;box-shadow:0 1px 2px rgba(20,30,50,.06);padding-block:16px}
.row{display:grid;grid-template-columns:30px minmax(0,1fr) minmax(0,1.15fr) 260px;gap:0 28px;padding:6px 16px;border-left:3px solid transparent}
.row.active{background:var(--tint);border-left-color:var(--accent)}
.num{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px;padding-top:5px;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.num .tick{color:var(--done);font-weight:700;font-size:13px}
.cell{position:relative}
.src{font-family:var(--serif-en);color:var(--muted);font-size:15px;line-height:1.85}
.tgt{font-family:var(--serif-en);font-size:17px;line-height:1.7;outline:none;border-radius:4px;padding:0 4px;margin:0 -4px;white-space:pre-wrap}
.src:lang(ko),.tgt:lang(ko){font-family:var(--serif-ko);word-break:keep-all}
.tgt:lang(ko){line-height:1.85}
.tgt:focus{box-shadow:0 0 0 2px var(--accent-soft)}
.lead{margin-bottom:6px}
.term{background:var(--accent-soft);border-radius:3px;padding:0 2px;cursor:default}
.official{background:var(--accent-soft);border-radius:3px;padding:0 2px;cursor:default}
ins{color:var(--ins);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}

.pair{display:flex;gap:6px}
.pair button{flex:0 0 auto;font:600 12.5px var(--ui);padding:6px 8px;border-radius:5px;border:1px solid var(--faint);background:var(--sheet);color:var(--ink);cursor:pointer}
.pair button.primary{background:var(--ink);color:var(--sheet);border-color:var(--ink)}
.pair button:disabled{opacity:.45;cursor:not-allowed}
.quiet{display:none;gap:12px;align-items:center}
.row.active .quiet{display:flex}
/* A paragraph with a coaching note keeps its controls showing, so that clicking into it (which
   makes it the paragraph in use) does not push the note's ✕ out from under the pointer. */
.under:has(.fb:not([hidden])) .quiet{display:flex}
.quiet button{font:500 12.5px var(--ui);border:0;background:none;color:var(--accent);padding:0;cursor:pointer}
.quiet button.done{color:var(--done)}
textarea{font:14px var(--ui);width:100%;box-sizing:border-box;min-height:56px;border:1px solid var(--faint);border-radius:6px;padding:6px 8px;background:var(--sheet);color:var(--ink);resize:vertical}
.gloss{font-family:var(--serif-en);font-size:14px;line-height:1.55;color:var(--muted);border:1px dashed var(--faint);border-radius:6px;padding:8px 10px}
.gloss:lang(ko){font-family:var(--serif-ko);word-break:keep-all}
.gloss b{font:600 10.5px var(--ui);letter-spacing:.05em;text-transform:uppercase;display:block;margin-bottom:3px}
[hidden]{display:none!important}
.row .margin{position:relative;display:block;min-height:0}
.under{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.gloss{margin-top:8px}
.fb{border:1px solid var(--faint);border-left:3px solid var(--accent);border-radius:6px;padding:8px 10px;background:var(--sheet);display:flex;flex-direction:column;gap:6px}
.fbhead{display:flex;justify-content:space-between;font:600 11.5px var(--ui);color:var(--accent)}
.fbhead button{border:0;background:none;color:var(--muted);cursor:pointer;padding:0}
.ccard{position:absolute;left:0;right:0;background:var(--sheet);border:1px solid var(--faint);border-left:3px solid #E0B400;border-radius:6px;padding:7px 9px;display:flex;flex-direction:column;gap:5px;box-shadow:0 1px 3px rgba(20,30,50,.08);transition:top .12s}
.ccard.hl,.ccard:focus-within{box-shadow:0 0 0 2px #FFE27A}
.ccard .who{display:flex;justify-content:space-between;align-items:center;font:600 11.5px var(--ui);color:var(--ink)}
.ccard .who span{font-weight:400;color:var(--muted);margin-left:6px}
.ccard .who button{border:0;background:none;color:var(--muted);cursor:pointer;padding:0}
.ccard textarea{min-height:34px;font-size:13px}
.ccard .was{font:12px var(--ui);color:var(--muted);margin:0;line-height:1.4}
.ccard .was span{font-style:italic}
mark.unote.hl{background:#FFE27A}
.ckbtn{position:absolute;top:0;right:-26px;width:22px;height:22px;border:0;border-radius:5px;background:#FBF0DE;color:var(--warn);cursor:pointer;padding:2px}
.ckbtn.done{background:none;color:var(--muted)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .ckbtn:not(.done){background:var(--warn-soft)}}
:root[data-theme="dark"] .ckbtn:not(.done){background:var(--warn-soft)}
.ckbtn svg,.aipop .head svg{width:18px;height:18px;display:block}
.aipop.chk{border-top-color:var(--warn);font-family:var(--ui);font-size:14px}
.aipop.chk .head{background:var(--warn-soft);color:var(--warn)}
.aipop.chk .head button{color:var(--warn)}
.aipop.chk .cbody{display:flex;flex-direction:column;gap:10px}
.aipop.chk .cbody + .cbody{border-top:1px solid var(--faint);padding-top:10px}
.aipop.chk p{margin:0;line-height:1.5}
.aipop.chk .where{font:500 11.5px var(--ui);color:var(--muted)}
.aipop.chk .sugg{font-family:var(--serif-en);font-size:15px;background:var(--tint);border-radius:4px;padding:6px 8px}
.aipop.chk .sugg:lang(ko){font-family:var(--serif-ko);word-break:keep-all}
.aipop.chk .gone{color:var(--muted)}
.aipop.chk .resolved{color:var(--muted)}
mark.unote{background:#FFF0A3;border-bottom:2px solid #E0B400;color:inherit;border-radius:2px;cursor:pointer}
.selnote{position:fixed;z-index:9;display:flex;align-items:center;gap:6px;font:600 12.5px var(--ui);background:var(--ink);color:var(--sheet);border:0;border-radius:16px;padding:6px 11px;cursor:pointer;box-shadow:0 4px 14px rgba(20,30,50,.25)}
.selnote svg{width:15px;height:15px}
.aibtn{position:absolute;top:0;right:-26px;width:22px;height:22px;border:0;border-radius:5px;background:none;color:var(--muted);cursor:pointer;padding:2px;opacity:0;transition:opacity .15s}
.row.active .aibtn,.row:hover .aibtn{opacity:1}
.aibtn:hover,.aibtn:focus-visible,.aibtn[aria-expanded="true"]{color:#7A4FD0;background:#F0EAFB;opacity:1}
.aibtn svg{width:18px;height:18px;display:block}
.aipop .head{cursor:grab;user-select:none;touch-action:none;display:flex;align-items:center;gap:8px;margin:-10px -12px 10px;padding:8px 12px;background:#F0EAFB;color:#5B3AA8;border-radius:8px 8px 0 0;font:600 12.5px var(--ui)}
.aipop .head svg{width:16px;height:16px}
.aipop .head .sp{flex:1}
.aipop.dragging{box-shadow:0 14px 40px rgba(20,30,50,.28)}
.aipop.dragging .head{cursor:grabbing}
.aipop .head button.x{font-size:15px;line-height:1;padding:2px 4px}
.aipop .head button{font:500 12px var(--ui);border:0;background:none;color:#5B3AA8;cursor:pointer;padding:0}
.aipop .sub{font:500 11.5px var(--ui);color:var(--muted);margin-bottom:6px}
.aipop .aitext:lang(ko){font-family:var(--serif-ko);word-break:keep-all}
.aipop .aitext + .aitext{margin-top:6px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .aipop:not(.chk) .head{background:#2E2448;color:#CDB8FF}:root:not([data-theme="light"]) .aipop:not(.chk) .head button{color:#CDB8FF}}
:root[data-theme="dark"] .aipop:not(.chk) .head{background:#2E2448;color:#CDB8FF}
:root[data-theme="dark"] .aipop:not(.chk) .head button{color:#CDB8FF}
.aipop{position:absolute;z-index:4;border-top:3px solid #7A4FD0;top:-6px;left:-10px;right:-10px;font-family:var(--serif-en);font-size:15.5px;line-height:1.6;color:var(--ink);background:var(--sheet);border:1px solid var(--faint);border-radius:8px;padding:10px 12px 12px;box-shadow:0 8px 28px rgba(20,30,50,.18)}
.aipop mark{background:#E6DBFA;color:var(--ink);border-radius:2px;padding:0 1px}
:root[data-theme="dark"] .aipop mark{background:#44376A}
:root[data-theme="dark"] mark.unote{background:#5A4A0E}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .aipop mark{background:#44376A}:root:not([data-theme="light"]) mark.unote{background:#5A4A0E}}
.num .edited{width:6px;height:6px;border-radius:50%;background:var(--warn);display:inline-block}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--sheet);padding:8px 14px;border-radius:6px;font-size:13px;opacity:0;transition:opacity .2s;pointer-events:none;max-width:90vw;z-index:20}
.toast.show{opacity:1}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:980px){
  .row{grid-template-columns:30px minmax(0,1fr) minmax(0,1.15fr)}
  .margin{grid-column:2 / 4;margin-top:6px}
}
@media (max-width:560px){
  .row{grid-template-columns:1fr;gap:6px}
  .margin{grid-column:1}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- Added for the real site ------------------------------------------------------------- */
.back{font:500 13px var(--ui);color:var(--muted);text-decoration:none;display:inline-block;margin-bottom:2px}
.back:hover{color:var(--accent)}
.savestate{font-size:13px;color:var(--muted);min-width:9em}
.savestate.bad{color:var(--warn);font-weight:600}
.boxsave{align-self:flex-end;font:12px var(--ui);color:var(--muted);min-height:1.2em;margin-top:-3px;transition:opacity .4s}
.boxsave.fade{opacity:0}
.boxsave.bad{color:var(--warn);font-weight:600}
.finish.reopen{background:var(--sheet);color:var(--ink);border:1px solid var(--faint)}
.finished-note{font-size:13px;color:var(--done);font-weight:600}
/* Once submitted, the controls that change the review are put away; Literal stays. */
body.finished .quiet button:not([data-act="lit"]):not([data-act="showai"]){display:none}
.tgt[contenteditable="false"]{cursor:default}
.tgt[contenteditable="false"]:focus{box-shadow:none}
.conflict{border:1px solid var(--faint);border-left:3px solid var(--warn);border-radius:6px;padding:9px 11px;background:var(--sheet);display:flex;flex-direction:column;gap:8px;margin-top:8px}
.conflict p{margin:0;line-height:1.45}
.conflict .mine{font-family:var(--serif-en);font-size:15px;line-height:1.6;background:var(--tint);border-radius:4px;padding:6px 8px;white-space:pre-wrap;user-select:text}
.conflict .mine:lang(ko){font-family:var(--serif-ko);word-break:keep-all}
.conflict .lbl{font:600 11px var(--ui);color:var(--muted)}
.message{max-width:520px;margin:12vh auto 0;background:var(--sheet);border-radius:8px;box-shadow:0 1px 2px rgba(20,30,50,.06);padding:28px 32px;display:flex;flex-direction:column;gap:14px}
.message h1{font-family:var(--serif-en);font-weight:600;font-size:22px;margin:0}
.message p{margin:0;line-height:1.55;font-size:15px}
.message .pair button{font-size:14px;padding:8px 14px}
.message a{color:var(--accent)}
.message a.google{color:var(--sheet)}
dialog{border:1px solid var(--faint);border-radius:8px;background:var(--sheet);color:var(--ink);padding:20px 22px;max-width:420px;box-shadow:0 14px 40px rgba(20,30,50,.28);font:14px var(--ui)}
dialog::backdrop{background:rgba(18,22,29,.35)}
dialog p{margin:0 0 16px;line-height:1.5;font-size:15px}
dialog .pair{justify-content:flex-end}
.linkbtn{font:500 13px var(--ui);border:0;background:none;color:var(--accent);padding:0;cursor:pointer}
.list{padding:0}
.talk{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 24px;padding:16px 20px;border-bottom:1px solid var(--faint);color:inherit;text-decoration:none;border-left:3px solid transparent}
.talk:last-child{border-bottom:0}
.talk:hover{background:var(--tint);border-left-color:var(--accent)}
.talk .t{font-family:var(--serif-en);font-size:17px;font-weight:600}
.talk .t:lang(ko){font-family:var(--serif-ko)}
.talk .m{color:var(--muted);font-size:13px}
.talk .p{grid-row:1 / 3;grid-column:2;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:6px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.talk .p .fin{color:var(--done);font-weight:600}
.empty{padding:28px 20px;color:var(--muted);font-size:15px}
.google{display:inline-block;font:600 14px var(--ui);background:var(--ink);color:var(--sheet);text-decoration:none;padding:10px 16px;border-radius:6px}
.message .problem{color:var(--warn);font-weight:600}

/* ---- The scoring page (score.html) ------------------------------------------------------------
   Carried over from the scoring artifact (work/miyoung-scoring-2026-10-02/scoring.html): one
   reading column of items, each with the English, step 1's two versions and their 1-2-3 rows, and
   step 2 under it. Its colours are the site's; the blue marks keep the artifact's own blue. Every
   rule is under .score, so nothing here touches the talk pages. */
:root{--fix:#D6E6F5}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--fix:#24476B}}
:root[data-theme="dark"]{--fix:#24476B}
.score{max-width:760px;margin:0 auto;display:grid;gap:14px;font-family:var(--ui),"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;font-size:15px;line-height:1.6;word-break:keep-all;overflow-wrap:anywhere}
.score .bar{gap:8px 14px}
.score .savestate{min-width:0}
@media (max-width:560px){.score .bar{gap:6px 10px}.score .themebtn{padding:3px 9px;font-size:12.5px}}
.score .progress b{color:var(--ink);font-weight:600}
.score .intro{display:grid;gap:6px;font-size:14px;max-width:65ch}
.score .intro p{margin:0}
.score mark.fix{background:var(--fix);color:inherit;border-radius:2px;padding-inline:1px}
.score #list{display:grid;gap:12px}
.score .item{background:var(--sheet);border:1px solid var(--faint);border-radius:8px;box-shadow:0 1px 2px rgba(20,30,50,.06);padding:12px 14px;display:grid;gap:8px;min-width:0}
.score .item.complete{border-color:var(--done)}
.score .head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.score .qn{font-size:12px;letter-spacing:.06em;color:var(--muted);font-variant-numeric:tabular-nums}
.score .tick{font-size:12.5px;font-weight:600;color:var(--done)}
.score .en{font-family:var(--serif-en);font-size:16px;line-height:1.5;margin:0;word-break:normal}
.score .part{font-family:var(--serif-ko);font-size:17px;font-weight:500;margin:6px 0 0}
.score .ver{display:grid;gap:5px;padding-top:8px;border-top:1px solid var(--faint)}
.score .ver .lab{font-size:12px;font-weight:600;color:var(--accent);letter-spacing:.04em}
.score .ver .ko{font-family:var(--serif-ko);font-size:16px;line-height:1.75;margin:0}
.score .srow{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.score .srow .name{min-width:4.6rem;font-size:12.5px;color:var(--muted)}
.score .pick{display:flex;flex-wrap:wrap;gap:4px}
.score .pick button{font:500 13px var(--ui),"IBM Plex Sans KR",sans-serif;padding-inline:8px;min-width:2.4rem;min-height:2rem;border:1px solid var(--faint);background:var(--sheet);color:var(--ink);border-radius:5px;cursor:pointer}
.score .pick button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--sheet);font-weight:600}
.score .imp{padding-top:8px;border-top:1px solid var(--faint);display:grid;gap:5px}
.score .note-lab{font-size:13px;color:var(--muted)}
.score textarea{font-size:14px;min-height:2.4rem}
.score textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.score .p2{display:grid;gap:5px;padding-top:8px;border-top:2px solid var(--accent)}
.score .p2 .wait{font-size:13px;color:var(--muted);margin:0}
.score .foot{color:var(--muted);font-size:13px;margin:0}
.themebtn{font:500 13px var(--ui),"IBM Plex Sans KR",sans-serif;padding:4px 12px;border:1px solid var(--faint);background:var(--sheet);color:var(--ink);border-radius:999px;cursor:pointer}
/* The scoring set's entry on the list */
.talk.set .t{font-family:var(--serif-ko)}
/* A history set on the scoring page (history-view.js): the talk's paragraphs, each English
   sentence a fold with its trail of versions. The best version is set apart in green. */
.score .history{display:grid;gap:18px}
.score .para{display:grid;gap:8px}
.score .para + .para{padding-top:4px}
.score details.item{display:block}
.score details.item > summary{display:flex;gap:4px 10px;align-items:baseline;cursor:pointer;list-style:none}
.score details.item > summary::-webkit-details-marker{display:none}
.score details.item > summary::before{content:"▸";color:var(--muted);font-size:12px;flex:none}
.score details.item[open] > summary::before{content:"▾"}
.score details.item > summary .qn{flex:none;white-space:nowrap}
.score details.item > summary .en{flex:1;min-width:0}
.score details.item > summary .tick{flex:none}
.score details.item > summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.score details.still > summary .en{color:var(--muted)}
.score .trail{display:grid;gap:8px;margin-top:8px}
.score .vhead{display:flex;gap:8px;align-items:baseline}
.score .ver.best{border-top-color:transparent;border:2px solid var(--done);border-radius:6px;background:var(--done-soft);padding:8px 10px}
.score .bestlab{font-size:12px;font-weight:600;color:var(--done)}
.score mark.gap{background:var(--fix);color:var(--accent);border-radius:2px;padding-inline:2px;font-weight:600}
.score .bestbtn{font:500 13px var(--ui),"IBM Plex Sans KR",sans-serif;padding:4px 10px;min-height:2rem;border:1px solid var(--faint);background:var(--sheet);color:var(--ink);border-radius:5px;cursor:pointer}
.score .bestbtn[aria-pressed="true"]{background:var(--done);border-color:var(--done);color:var(--sheet);font-weight:600}

/* ---- Books (book.html, and a chapter on talk.html in book mode) ------------------------------
   Larger type and tap targets, and darker English, for a reviewer reading a whole book on a
   laptop or a tablet (768 pixels). The rules are under body.book or name book-only pieces, so
   nothing here changes a talk. */
:root{--src-ink:#3F4756;--unsure:#8A4B00}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--src-ink:#C3CAD6;--unsure:#E3A857}}
:root[data-theme="dark"]{--src-ink:#C3CAD6;--unsure:#E3A857}
body.book{font-size:15px}
.book .bar .who{font-size:14px}
.book .progress{font-size:14px}
.book .src{color:var(--src-ink);font-size:17px;line-height:1.75}
.book .tgt{font-size:19px;line-height:1.7}
.book .tgt:lang(ko){line-height:1.85}
.book.big .src{font-size:20px}
.book.big .tgt{font-size:23px}
.book .src.heading,.book .tgt.heading{font-weight:600;font-size:21px}
.book.big .src.heading,.book.big .tgt.heading{font-size:25px}
.book .num{font-size:13px}
.book .num .qmark{color:var(--unsure);font-weight:700;font-size:15px}
.book .row{padding-block:10px}
.book .quiet.outcomes{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.book .quiet.outcomes button{font:600 15px var(--ui);min-height:44px;padding:0 14px;border:1.5px solid var(--faint);border-radius:8px;background:var(--sheet);color:var(--ink);cursor:pointer}
.book .quiet.outcomes button.looks{color:var(--done)}
.book .quiet.outcomes button.unsure{color:var(--unsure)}
.book .quiet.outcomes button.showai{color:var(--accent);border-color:transparent;background:none;padding-inline:6px}
.book .quiet.outcomes button.looks[aria-pressed="true"]{background:var(--done);border-color:var(--done);color:var(--sheet)}
.book .quiet.outcomes button.unsure[aria-pressed="true"]{background:var(--unsure);border-color:var(--unsure);color:var(--sheet)}
.book .quiet.outcomes button:disabled{opacity:.45;cursor:not-allowed}
.book .quiet.outcomes button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.unsurebox{border:1px solid var(--faint);border-left:3px solid var(--unsure);border-radius:6px;padding:8px 10px;background:var(--sheet);display:flex;flex-direction:column;gap:6px}
.unsurebox .fbhead{color:var(--unsure);font-size:13px}
.book textarea{font-size:15px}
.row.is-unsure{border-left-color:var(--unsure)}
.row.is-unsure.active{border-left-color:var(--accent)}
.book mark.chg{background:var(--ins-soft);color:inherit;border-bottom:2px solid var(--ins);border-radius:2px}
.marker{font:500 .72em var(--ui);color:var(--muted);background:var(--faint);border-radius:3px;padding:0 3px;cursor:default;white-space:nowrap}
.book .term{border-bottom:1px solid var(--accent)}
.barbtn{font:500 14px var(--ui);min-height:36px;padding:0 12px;border:1px solid var(--faint);border-radius:999px;background:var(--sheet);color:var(--ink);cursor:pointer}
.barbtn[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}
.unsurecount{font:600 14px var(--ui);color:var(--unsure)}
.finished-note a{color:var(--accent);font-weight:600}
.termsdlg{padding:0;width:min(560px,92vw);max-width:none}
.termsdlg .tin{padding:18px 20px;display:flex;flex-direction:column;gap:10px}
.termsdlg .thead{display:flex;justify-content:space-between;align-items:center}
.termsdlg h2{font:600 18px var(--ui);margin:0}
.termsdlg .x{font-size:18px;border:0;background:none;color:var(--muted);cursor:pointer;min-width:44px;min-height:44px}
.termsdlg .tsub{margin:0;font-size:14px;color:var(--muted)}
.termsdlg input{font:16px var(--ui);padding:10px 12px;border:1px solid var(--faint);border-radius:8px;background:var(--sheet);color:var(--ink)}
.termsdlg .tlist{list-style:none;margin:0;padding:0;max-height:min(60vh,520px);overflow:auto;border-top:1px solid var(--faint)}
.termsdlg .tlist li{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:9px 2px;border-bottom:1px solid var(--faint);font-size:15px}
.termsdlg .tsrc{font-family:var(--serif-en);color:var(--src-ink)}
.termsdlg .ttgt{font-family:var(--serif-en)}
.termsdlg .ttgt:lang(ko){font-family:var(--serif-ko)}
.termsdlg .tnone{margin:0;color:var(--muted)}
/* The book page */
.resumebar{margin:18px 0}
.resume{display:inline-flex;align-items:center;min-height:52px;font:600 17px var(--ui);background:var(--ink);color:var(--sheet);text-decoration:none;padding:0 24px;border-radius:8px}
.resume:hover{opacity:.9}
.resume-note{font-size:16px;margin:0}
.book .talk .t{font-size:19px}
.book .talk .m{font-size:14px}
.book .talk .p{font-size:14px}
.status{font-weight:600}
.status.finished{color:var(--done)}
.status.in-progress{color:var(--accent)}
.status.not-started{color:var(--muted)}
/* The chapter's bar: three groups that wrap whole (talk.js, build). */
.bookbar .bookstatus{display:flex;align-items:center;gap:12px}
.bookbar .booktools{display:flex;align-items:center;gap:10px;margin-left:auto}
.bookbar .savestate{min-width:4.5em}
@media (max-width:980px){.bookbar .barhead{flex-basis:100%}}
/* Italics and bold: the * marks are kept in the text, locked, and not shown. */
.emph{font-size:0;letter-spacing:0}
.book em{font-style:italic}