
.effboki-ledger-lesson {
  /* The learning surface stays white, including on devices using dark mode. */
  color-scheme: only light;
  --lem-paper: light-dark(#fff,#20212b); --lem-wash: light-dark(#f7f8fc,#272934);
  --lem-ink: light-dark(#253248,#edf0fa); --lem-muted: light-dark(#56627a,#b8c0d4);
  --lem-line: light-dark(#cdd4e1,#535c70); --lem-rule: light-dark(#3f4d65,#b1bbd0);
  --lem-purple: light-dark(#6344c5,#c3b0ff); --lem-soft: light-dark(#f0ebff,#373047);
  --lem-source: #08776f; --lem-source-soft: #e6f5f1;
  --entry-color:var(--lem-purple);
  --lem-done: light-dark(#126b52,#8adcc0);
  container:lem-lesson / inline-size; position:relative; width:100%; background:var(--lem-paper); font:14px/1.75 -apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif; color:var(--lem-ink);
}
.effboki-ledger-lesson * { box-sizing:border-box; }
.effboki-ledger-lesson [hidden] { display:none!important; }
.effboki-ledger-lesson .lesson { background:var(--lem-paper); border:0; border-radius:0; padding:12px clamp(0px,.6cqi,12px); width:100%; max-width:none; margin-inline:auto; }
/* The chat bubble already frames the answer. Keep a wider reading measure,
   while letting the account board use the full pane without a nested card. */
.effboki-ledger-lesson .lesson-top, .effboki-ledger-lesson .lesson-route { max-width:1120px; margin-inline:auto; }
.effboki-ledger-lesson .lesson-overview, .effboki-ledger-lesson .step-copy, .effboki-ledger-lesson .lesson-controls { width:100%; max-width:1120px; margin-inline:auto; }
.effboki-ledger-lesson .lesson-top { display:flex; justify-content:space-between; align-items:center; gap:12px; color:var(--lem-muted); font-size:12px; }
.effboki-ledger-lesson [data-lem="progress"] { flex-shrink:0; font-variant-numeric:tabular-nums; }
.effboki-ledger-lesson .lesson-eyebrow { font-weight:600; letter-spacing:.03em; }
/* A single row of up to ten destinations; labels wrap within their own button. */
.effboki-ledger-lesson .lesson-route { display:grid; grid-template-columns:repeat(var(--route-columns),minmax(0,1fr)); gap:6px; list-style:none; padding:0; margin-block:20px 28px; color:var(--lem-muted); }
.effboki-ledger-lesson .lesson-route li { min-width:0; margin:0; padding:0; }
.effboki-ledger-lesson .lesson-route button { display:flex; align-items:center; justify-content:center; gap:4px; width:100%; height:100%; min-width:0; min-height:40px; padding:5px 2px; border:0; border-bottom:2px solid var(--lem-line); border-radius:0; background:transparent; color:inherit; font-size:clamp(10px,calc(100cqi / (var(--route-columns) * 8)),12px); line-height:1.4; white-space:normal; }
.effboki-ledger-lesson .route-number { flex-shrink:0; font-variant-numeric:tabular-nums; }
.effboki-ledger-lesson .route-label { min-width:0; overflow-wrap:anywhere; text-wrap:balance; }
.effboki-ledger-lesson .lesson-route li[aria-current="step"] button { color:var(--lem-purple); border-color:var(--lem-purple); background:var(--lem-paper); font-weight:650; }
.effboki-ledger-lesson .lesson-route li.is-done .route-number { color:var(--lem-done); }
.effboki-ledger-lesson .lesson-route button:hover { background:var(--lem-wash); }
.effboki-ledger-lesson button:focus-visible { outline:2px solid var(--lem-purple); outline-offset:2px; }
.effboki-ledger-lesson h2 { margin:0 0 18px; font-size:20px; line-height:1.6; letter-spacing:0; color:var(--lem-ink); }
.effboki-ledger-lesson p { margin:0 0 10px; }
.effboki-ledger-lesson .step-copy { font-size:15px; line-height:1.85; }
.effboki-ledger-lesson [data-lem="reason"] > p, .effboki-ledger-lesson .posting-copy > p { margin-bottom:16px; }
.effboki-ledger-lesson .posting-copy { margin-top:20px; }
.effboki-ledger-lesson .posting-heading { margin:24px 0 8px; color:var(--lem-muted); font-size:12px; font-weight:600; }
.effboki-ledger-lesson .posting-locations { margin:0; padding:0; list-style:none; }
.effboki-ledger-lesson .posting-locations li { display:grid; grid-template-columns:minmax(0,1fr) 112px; align-items:center; gap:16px; margin:0; padding:12px 0; border-top:1px solid #e6e9ef; }
.effboki-ledger-lesson .guide-copy { min-width:0; display:grid; grid-template-columns:minmax(120px,.7fr) minmax(0,1fr); align-items:center; gap:4px 16px; text-align:left; }
.effboki-ledger-lesson .guide-destination { font-size:13px; font-weight:600; overflow-wrap:anywhere; }
.effboki-ledger-lesson .guide-entry { min-width:0; font-size:13px; overflow-wrap:anywhere; }
.effboki-ledger-lesson .guide-entry strong { font-variant-numeric:tabular-nums; }
.effboki-ledger-lesson .posting-locations .write-action { width:100%; min-height:44px; padding:8px; white-space:normal; font-size:13px; line-height:1.5; text-wrap:balance; }
.effboki-ledger-lesson mark.source-text { background:var(--lem-source-soft); color:inherit; padding:.04em .1em; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.effboki-ledger-lesson strong { font-weight:650; }
.effboki-ledger-lesson .equation { padding:16px 18px; margin:20px 0; background:var(--lem-wash); border:1px solid #e6e9ef; border-radius:8px; font-variant-numeric:tabular-nums; }
.effboki-ledger-lesson .equation-line { display:flex; flex-direction:column; align-items:flex-start; gap:7px; }
.effboki-ledger-lesson .equation-label { color:var(--lem-muted); font-size:12px; }
.effboki-ledger-lesson .equation-value { font-weight:600; }
.effboki-ledger-lesson .reason-calculation { margin:0 0 14px; font-variant-numeric:tabular-nums; }
.effboki-ledger-lesson .reason-calculation .equation-label { margin-right:10px; }
.effboki-ledger-lesson .formula-expression { display:flex; flex-wrap:wrap; align-items:flex-start; gap:10px .45em; max-width:100%; min-width:0; font-variant-numeric:tabular-nums; font-weight:600; }
.effboki-ledger-lesson .formula-unit { display:inline-flex; align-items:flex-start; gap:.45em; min-width:0; max-width:100%; }
.effboki-ledger-lesson .formula-term { display:inline-flex; flex-direction:column; align-items:stretch; max-width:min(14em,100%); min-width:0; text-align:center; }
.effboki-ledger-lesson .formula-term-value { border-bottom:1px solid #aab4c5; padding:0 .15em 5px; overflow-wrap:anywhere; }
.effboki-ledger-lesson .formula-note { color:var(--lem-muted); font-size:12px; font-weight:400; line-height:1.6; padding-top:5px; max-width:14em; overflow-wrap:anywhere; }
.effboki-ledger-lesson .formula-token { max-width:100%; overflow-wrap:anywhere; }
.effboki-ledger-lesson .formula-conclusion { white-space:nowrap; }
.effboki-ledger-lesson .reason-calculation .formula-expression { margin-top:5px; }
.effboki-ledger-lesson [data-lem="result"] { display:inline-block; color:var(--lem-source); min-width:4.8em; }
.effboki-ledger-lesson .journal-heading { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin-bottom:5px; font-weight:600; }
.effboki-ledger-lesson .journal-date { color:var(--lem-muted); font-size:12px; font-weight:400; }
.effboki-ledger-lesson .journal-block { --text-sub:var(--lem-muted); --text-main:var(--lem-ink); }
.effboki-ledger-lesson .journal-explanation { margin:10px 0 16px; padding:12px 16px; border:1px solid var(--lem-line); border-radius:10px; background:var(--lem-wash); overflow-wrap:anywhere; }
.effboki-ledger-lesson .journal-explanation-title { margin:0 0 8px; color:var(--lem-purple); font-size:13px; font-weight:650; line-height:1.5; }
.effboki-ledger-lesson .journal-explanation p { line-height:1.8; }
.effboki-ledger-lesson .journal-explanation p:last-child { margin-bottom:0; }
.effboki-ledger-lesson .journal-hint { margin:6px 0 0; color:var(--lem-muted); font-size:13px; }
.effboki-ledger-lesson .board-key { display:flex; align-items:center; gap:15px; margin:15px 0 10px; color:var(--lem-muted); font-size:12px; }
.effboki-ledger-lesson .board-key>span { display:flex; align-items:center; gap:5px; }
.effboki-ledger-lesson .board-key i { display:inline-block; width:14px; height:12px; background:var(--lem-soft); border:1px solid var(--lem-purple); border-radius:2px; }
.effboki-ledger-lesson .board-key .key-target { border:1px dashed var(--lem-rule); background:transparent; }
.effboki-ledger-lesson .board-key .key-source { background:var(--lem-source-soft); border:0; border-radius:0; }
.effboki-ledger-lesson .board-key .unit { margin-left:auto; }
.effboki-ledger-lesson .board { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:12px; align-items:start; width:100%; max-width:none; margin-inline:auto; }
.effboki-ledger-lesson .account { container:lem-account / inline-size; min-width:0; width:100%; max-width:520px; justify-self:center; padding:10px; background:var(--lem-paper); border:1px solid var(--lem-line); border-radius:10px; }
.effboki-ledger-lesson .account.is-current { border-color:var(--entry-color); }
.effboki-ledger-lesson .account-title { margin:0 0 10px; text-align:center; font-size:16px; font-weight:650; }
.effboki-ledger-lesson .table-scroll { width:100%; min-width:0; }
.effboki-ledger-lesson .ledger { width:100%; min-width:0; padding:3px; }
.effboki-ledger-lesson .side-labels { display:grid; grid-template-columns:1fr 1fr; text-align:center; color:var(--lem-muted); font-size:13px; padding:0 0 10px; }
.effboki-ledger-lesson .lem-account-table { position:relative; display:grid; width:100%; min-width:0; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch; border-top:2px solid var(--lem-rule); }
.effboki-ledger-lesson .ledger-axis { position:absolute; top:0; bottom:0; left:calc(50% - 1px); width:2px; background:var(--lem-rule); pointer-events:none; z-index:1; }
.effboki-ledger-lesson .ledger-column { min-width:0; display:flex; flex-direction:column; }
.effboki-ledger-lesson .ledger-side { border-bottom:2px solid var(--lem-rule); display:flex; flex-direction:column; min-height:42px; }
.effboki-ledger-lesson .ledger-side.full { flex:1; }
.effboki-ledger-lesson .ledger-side.debit { border-left:2px solid var(--lem-rule); }
.effboki-ledger-lesson .ledger-side.credit { border-right:2px solid var(--lem-rule); }
.effboki-ledger-lesson .entry { display:grid; grid-template-columns:max-content minmax(0,1fr) max-content; gap:clamp(2px,.7cqi,4px); align-items:center; min-width:0; min-height:46px; padding:6px clamp(2px,.9cqi,5px); font-size:clamp(10px,3.15cqi,14px); flex:1; }
.effboki-ledger-lesson .entry.no-date .entry-date { display:none; }
.effboki-ledger-lesson .entry.no-date .field.label { grid-column:1 / 3; }
.effboki-ledger-lesson .entry.no-date .field.amount { grid-column:3; }
.effboki-ledger-lesson .entry+.entry { border-top:1px solid var(--lem-line); }
.effboki-ledger-lesson .entry-date { color:var(--lem-muted); font-size:clamp(10px,2.7cqi,12px); white-space:nowrap; }
.effboki-ledger-lesson .field { display:inline-block; padding:2px 1px; border-radius:3px; line-height:1.45; }
.effboki-ledger-lesson .field.amount { white-space:nowrap; font-variant-numeric:tabular-nums; text-align:right; }
.effboki-ledger-lesson .field.label { overflow-wrap:anywhere; justify-self:start; min-width:0; max-width:100%; }
.effboki-ledger-lesson .field.pending { color:var(--lem-muted); white-space:nowrap; display:inline-flex; justify-content:space-between; width:min(3em,100%); min-width:1.7em; }
.effboki-ledger-lesson .field.amount.pending { width:3em; }
/* Keep the two parentheses beside the answer when a narrow name wraps. */
.effboki-ledger-lesson .field.label.has-answer { display:inline-grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; }
.effboki-ledger-lesson .answer-text { min-width:0; overflow-wrap:anywhere; }
.effboki-ledger-lesson .answer-paren { white-space:nowrap; }
.effboki-ledger-lesson .field.source { background:var(--lem-source-soft); box-shadow:none; border:0; border-radius:0; color:var(--lem-source); }
.effboki-ledger-lesson .field.target, .effboki-ledger-lesson .target-marker { outline:2px dashed var(--entry-color); outline-offset:1px; color:var(--entry-color); }
.effboki-ledger-lesson .target-marker { display:inline-flex; justify-content:space-between; width:2.8em; padding:2px 3px; margin:3px 6px; line-height:1.45; vertical-align:middle; border-radius:3px; white-space:nowrap; }
.effboki-ledger-lesson .field.just-written { color:var(--entry-color); }
.effboki-ledger-lesson .field.amount .answer-text, .effboki-ledger-lesson .total-value .answer-text { display:inline-block; }
.effboki-ledger-lesson .account-title.source { color:var(--lem-source); }
.effboki-ledger-lesson .balance-gap { min-height:46px; flex:1 0 46px; display:flex; align-items:center; gap:5px; padding:3px 7px; color:var(--lem-purple); font-size:11px; position:relative; }
.effboki-ledger-lesson .balance-gap svg { width:10px; height:100%; position:absolute; top:0; left:3px; fill:none; stroke:var(--lem-rule); stroke-width:1.5; }
.effboki-ledger-lesson .balance-label { padding-left:11px; line-height:1.4; }
/* A balance brace hugs the centre rule and opens toward its label on either side. */
.effboki-ledger-lesson .balance-gap[data-side="debit"] { justify-content:flex-end; }
.effboki-ledger-lesson .balance-gap[data-side="debit"] svg { left:auto; right:3px; transform:scaleX(-1); }
.effboki-ledger-lesson .balance-gap[data-side="debit"] .balance-label { padding-left:0; padding-right:11px; text-align:right; }
.effboki-ledger-lesson .totals { display:grid; grid-template-columns:1fr 1fr; gap:10px; font-size:12px; padding-top:10px; }
.effboki-ledger-lesson .total { display:flex; align-items:center; justify-content:space-between; gap:6px; font-variant-numeric:tabular-nums; }
.effboki-ledger-lesson .total-value { white-space:nowrap; border-radius:3px; }
.effboki-ledger-lesson .scroll-hint { display:none; font-size:11px; color:var(--lem-muted); margin:5px 0 0; }
.effboki-ledger-lesson .lesson-controls { display:flex; align-items:center; gap:12px; margin-top:20px; padding-top:16px; border-top:1px solid var(--lem-line); }
.effboki-ledger-lesson button { font:inherit; cursor:pointer; background:var(--lem-paper); color:var(--lem-ink); border:1px solid var(--lem-line); border-radius:7px; min-height:42px; padding:7px 15px; white-space:nowrap; }
.effboki-ledger-lesson button:disabled { opacity:.45; cursor:default; }
.effboki-ledger-lesson .main-action { background:var(--lem-purple); color:light-dark(#fff,#20152f); border-color:var(--lem-purple); font-weight:600; }
.effboki-ledger-lesson .write-action { background:var(--lem-paper); color:var(--lem-purple); border-color:#c5b8e7; font-weight:600; }
.effboki-ledger-lesson .write-action:hover:not(:disabled) { background:var(--lem-soft); border-color:var(--lem-purple); }
.effboki-ledger-lesson .write-action.is-complete { color:var(--lem-muted); border-color:var(--lem-line); opacity:1; }
.effboki-ledger-lesson [data-lem="status"] { flex:1; min-width:0; color:var(--lem-muted); font-size:13px; min-height:3.5em; display:flex; align-items:center; justify-content:flex-end; text-align:right; }
.effboki-ledger-lesson .completion { margin-top:12px; color:var(--lem-done); }
.effboki-ledger-lesson .accessible { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
@container lem-account (max-width:370px) {
  .effboki-ledger-lesson .account-title { font-size:16px; }
  .effboki-ledger-lesson .totals { font-size:11px; gap:4px; }
  .effboki-ledger-lesson .total { flex-wrap:wrap; }
}
@container lem-lesson (max-width:480px) {
  .effboki-ledger-lesson .lesson { padding:12px 0; }
  .effboki-ledger-lesson .lesson-route { gap:3px; }
  .effboki-ledger-lesson .lesson-route button { flex-direction:column; gap:1px; }
  .effboki-ledger-lesson h2 { font-size:18px; }
  .effboki-ledger-lesson .step-copy { font-size:14px; }
  .effboki-ledger-lesson .lesson-route { margin-block:16px 20px; }
  .effboki-ledger-lesson .equation { padding:12px; }
  .effboki-ledger-lesson .posting-locations li { grid-template-columns:minmax(0,1fr) 96px; gap:10px; }
  .effboki-ledger-lesson .guide-copy { grid-template-columns:minmax(0,1fr); gap:4px; }
  .effboki-ledger-lesson .account { padding:7px; }
  .effboki-ledger-lesson .account-title { font-size:16px; }
  .effboki-ledger-lesson .totals { font-size:11px; gap:4px; }
  .effboki-ledger-lesson .total { flex-wrap:wrap; }
  .effboki-ledger-lesson .lesson-controls { gap:7px; flex-wrap:wrap; }
  .effboki-ledger-lesson [data-lem="status"] { order:3; flex-basis:100%; }
  .effboki-ledger-lesson .main-action { margin-left:auto; }
  .effboki-ledger-lesson .scroll-hint { display:none; }
}

@container lem-lesson (max-width:360px) {
  /* Ten readable touch destinations fit a phone; full names remain in aria-label,
     the native tooltip and the selected step heading directly underneath. */
  .effboki-ledger-lesson .lesson-route.is-dense { gap:0; }
  .effboki-ledger-lesson .lesson-route.is-dense .route-label { display:none; }
  .effboki-ledger-lesson .lesson-route.is-dense button { font-size:12px; }
}
.effboki-ledger-lesson h2,.effboki-ledger-lesson h3 {border:0;padding:0;background:none;}
.effboki-ledger-lesson .lesson-controls {position:static;background:none;box-shadow:none;}
.effboki-ledger-lesson .lesson-overview { margin-block:18px 20px; color:var(--lem-muted); font-size:13px; line-height:1.85; }
