/* Working-paper look: a columnar pad, graphite ink, red-pencil tickmarks for traced figures,
   blue pencil for the reviewer. Tokens first; everything below derives from them. */
:root {
  --pad: #f3f6ee;          /* columnar pad */
  --pad-band: #e8eedf;     /* alternate column band */
  --rule: #c9d3be;         /* pad rule */
  --ink: #2b2f2a;          /* graphite */
  --ink-soft: #5d6559;
  --tick: #b8322a;         /* auditor's red pencil: traced to a source */
  --review: #2f4e8c;       /* reviewer's blue pencil */
  --desk: #dfe2da;         /* behind the source page */
  --paper: #ffffff;

  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Public Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --hand: "Nanum Pen Script", "Comic Sans MS", cursive;
  --ko: "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { color-scheme: light; }
body {
  margin: 0;
  background: var(--pad);
  color: var(--ink);
  font: 15px/1.5 var(--body);
}
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--review); outline-offset: 2px; }

/* Header: the working-paper heading block */
.wp-header {
  display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s5);
  padding: var(--s5) var(--s6) var(--s4);
  border-bottom: 2px solid var(--ink);
}
.eyebrow {
  margin: 0; font: 600 13px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
}
h1 { margin: var(--s1) 0 0; font: 600 44px/1 var(--display); letter-spacing: .02em; text-transform: uppercase; }
.wp-meta { margin: var(--s2) 0 0; color: var(--ink-soft); }
.wp-boxes { display: flex; gap: 0; margin: 0; border: 1.5px solid var(--ink); }
.wp-box { min-width: 150px; padding: var(--s2) var(--s3); }
.wp-box + .wp-box { border-left: 1.5px solid var(--ink); }
.wp-box dt { font: 600 12px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.wp-box dd { margin: var(--s1) 0 0; font-size: 13px; }
.wp-box--review dd .initials { font: 30px/1 var(--hand); color: var(--review); margin-right: var(--s2); }
.pending { color: var(--ink-soft); font-style: italic; }
.scope {
  margin: 0; padding: var(--s2) var(--s6); font-size: 13px; color: var(--ink-soft);
  border-bottom: 1px solid var(--rule); background: var(--pad-band);
}

/* Two panes: the worksheet and the source page */
.layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); min-height: calc(100vh - 140px); }
.paper { padding: var(--s5) var(--s6) var(--s6); border-right: 1px solid var(--rule); }
.viewer { background: var(--desk); padding: var(--s5); position: sticky; top: 0; align-self: start; height: 100vh; overflow: auto; }

.schedule { margin-bottom: var(--s6); }
h2 {
  display: flex; align-items: baseline; gap: var(--s3); margin: 0 0 var(--s3);
  font: 600 22px/1.1 var(--display); letter-spacing: .06em; text-transform: uppercase;
  padding-bottom: var(--s2); border-bottom: 1px solid var(--ink);
}
.sched-letter {
  font: 600 13px/1 var(--display); letter-spacing: .1em; color: var(--paper); background: var(--ink);
  padding: 3px 7px 2px;
}
.count { font: 500 14px/1 var(--body); letter-spacing: 0; text-transform: none; color: var(--tick); }
.count.clear { color: var(--review); }
h3 { font: 600 17px/1.2 var(--display); letter-spacing: .06em; text-transform: uppercase; margin: var(--s5) 0 var(--s2); }

/* Schedule A: columnar pad table */
.table-wrap { overflow-x: auto; }
table.accounts { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: fixed; }
.accounts col.c-bank { width: 21%; } .accounts col.c-acct { width: 19%; } .accounts col.c-own { width: 17%; }
.accounts col.c-max { width: 25%; } .accounts col.c-usd { width: 18%; }
.accounts th {
  font: 600 12px/1.2 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft);
  text-align: left; padding: var(--s2) var(--s2); border-bottom: 1px solid var(--ink);
}
.accounts td { padding: var(--s3) var(--s2); border-bottom: 1px solid var(--rule); vertical-align: top; }
.accounts td:nth-child(even), .accounts th:nth-child(even) { background: var(--pad-band); }
.accounts .num { text-align: right; white-space: nowrap; }
.accounts .sub { display: block; font-size: 12px; color: var(--ink-soft); }
.accounts .holder { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.accounts .bank { font-weight: 500; overflow-wrap: anywhere; }
.th-sub { display: block; font: 500 10px/1.2 var(--display); letter-spacing: .08em; }
.accounts .usd .amount { font-weight: 500; font-size: 15px; }
.accounts .rate { display: block; font: 400 10.5px/1.6 var(--mono); color: var(--ink-soft); }
.acct { font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; }
.amount { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.ccy { font: 500 11px/1 var(--mono); color: var(--ink-soft); margin-left: 3px; }
tr.unidentified td { color: var(--ink-soft); }
.unknown { display: inline-block; max-width: 100%; white-space: normal; overflow-wrap: anywhere; font-style: italic; color: var(--ink-soft); }

/* A traced figure: red tickmark + workpaper reference, clickable */
.traced {
  appearance: none; border: 0; background: none; padding: 0; cursor: pointer; text-align: right;
  display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px;
}
.traced .figure { display: inline-flex; align-items: baseline; gap: 6px; }
.traced .figure::before { content: "✓"; color: var(--tick); font: 600 13px/1 var(--body); }
.traced .wp { font: 400 10.5px/1.35 var(--mono); color: var(--tick); opacity: .8; white-space: normal; overflow-wrap: anywhere; }
.traced:hover .figure, .traced[aria-pressed="true"] .figure { text-decoration: underline 1.5px var(--tick); text-underline-offset: 3px; }
.traced .kind { font: 400 10.5px/1 var(--body); color: var(--ink-soft); }

.ownership select {
  width: 100%; max-width: 100%;
  border: 1px solid var(--rule); background: var(--paper); padding: 2px 4px; border-radius: 2px; font-size: 13px;
}
.corrected { display: block; font-size: 11px; color: var(--review); margin-top: 3px; white-space: normal; }

tfoot td { border-top: 2px solid var(--ink); border-bottom: 3px double var(--ink); padding: var(--s3) var(--s2); }
tfoot .label { font: 600 13px/1.3 var(--display); letter-spacing: .08em; text-transform: uppercase; }
tfoot .threshold { display: block; font: 400 12.5px/1.4 var(--body); text-transform: none; letter-spacing: 0; color: var(--ink-soft); white-space: normal; max-width: 60ch; }
tfoot .num .amount { font-weight: 600; font-size: 17px; }
.rate-note { font-size: 12px; color: var(--ink-soft); margin: var(--s2) 0 0; }
.rate-note a { color: inherit; }

.value-corrections ul { margin: 0; padding-left: var(--s4); font-size: 13px; }
.value-corrections li { margin: var(--s2) 0; }

/* Schedule B: review items */
.items { list-style: none; margin: 0; padding: 0; }
.item { padding: var(--s3) 0; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 1fr auto; gap: var(--s2) var(--s4); }
.item-title { margin: 0; font-weight: 600; }
.item-acct { font: 400 12px/1.4 var(--mono); color: var(--ink-soft); }
.item-msg { margin: 2px 0 0; font-size: 14px; }
.item-do { margin: 4px 0 0; font-size: 13.5px; color: var(--review); }
.sources { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s2); }
.source-chip {
  border: 1px solid var(--tick); color: var(--tick); background: none; border-radius: 2px; cursor: pointer;
  font: 400 11px/1 var(--mono); padding: 4px 6px;
}
.source-chip[aria-pressed="true"] { background: var(--tick); color: var(--paper); }
.item-actions { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s1); }
.ack-note { grid-column: 1 / -1; margin: 0; color: var(--review); font-size: 13.5px; }
.ack-note::before { content: "Reviewed: "; font-weight: 600; }
button.primary, .signoff-form button, #draft-summary, #approve-summary, #copy-summary, .item-actions button {
  border: 1.5px solid var(--ink); background: var(--paper); padding: 6px 12px; cursor: pointer; border-radius: 2px;
  font-weight: 500;
}
.item-actions button.ack { border-color: var(--review); color: var(--review); }
#start-over button.link, .item-actions button.link, .reading-value button.link { border: 0; background: none; color: var(--ink-soft); text-decoration: underline; padding: 2px 0; cursor: pointer; }
.item.done .item-title { color: var(--ink-soft); }
.item.done .item-title::before { content: "✓ "; color: var(--review); }
.info-items { margin-top: var(--s3); font-size: 13.5px; color: var(--ink-soft); }
.info-items summary { cursor: pointer; }
.info-items li { margin: var(--s2) 0; }

/* Sign-off */
.signoff-form { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-end; }
.signoff-form label { display: flex; flex-direction: column; font-size: 12px; color: var(--ink-soft); gap: 3px; }
.signoff-form input { border: 1px solid var(--rule); background: var(--paper); padding: 6px 8px; min-width: 160px; }
#initials { min-width: 70px; width: 70px; }
.signoff-form button { background: var(--review); border-color: var(--review); color: var(--paper); }
.signoff-form button:disabled { background: var(--paper); color: var(--ink-soft); border-color: var(--rule); cursor: not-allowed; }
.hint { font-size: 13px; color: var(--ink-soft); }
.signed { color: var(--review); }
.signed .initials { font: 30px/1 var(--hand); }
.summary-lines { width: 100%; border-collapse: collapse; background: var(--paper); margin: var(--s3) 0; font-size: 14px; }
.summary-lines th { width: 50%; font: 600 12px/1.2 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); text-align: left; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--ink); }
.summary-lines td { width: 50%; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--rule); vertical-align: top; white-space: pre-wrap; overflow-wrap: anywhere; }
.ko { font-family: var(--ko); word-break: keep-all; }
.summary-release { border: 1px solid var(--rule); margin: var(--s3) 0; padding: var(--s2) var(--s3); display: flex; flex-wrap: wrap; gap: var(--s4); }
.summary-release legend { font-size: 12px; color: var(--ink-soft); padding: 0 var(--s1); }
.summary-release label { display: inline-flex; align-items: center; gap: var(--s1); }
.blocked { color: var(--tick); font-weight: 500; }

.audit { font-size: 13px; color: var(--ink-soft); }
.audit summary { cursor: pointer; font: 600 14px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.audit li { margin: var(--s1) 0; font-family: var(--mono); font-size: 11.5px; }

/* The source page and the red-pencil loop around the traced line */
.viewer-caption { margin: 0 0 var(--s3); font: 400 12.5px/1.4 var(--mono); color: var(--ink); min-height: 2.8em; }
.readings { margin: 0 0 var(--s3); font-size: 13px; }
.line-reading { background: var(--paper); border: 1px solid var(--rule); padding: var(--s2) var(--s3); margin-bottom: var(--s2); }
.reading-line { margin: 0 0 var(--s1); color: var(--ink-soft); overflow-wrap: anywhere; }
.reading-balances { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.labelled-reading { display: flex; flex-direction: column; }
.reading-label { font: 600 11px/1.3 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.reading-value { display: inline-flex; flex-direction: column; align-items: flex-start; }
.reading-value .read-as { font-size: 11px; color: var(--ink-soft); }
.page-readings summary { cursor: pointer; font-size: 12.5px; color: var(--ink-soft); }
.page-readings > .reading-balances { background: var(--paper); padding: var(--s2) var(--s3); margin-top: var(--s2); }
.page-readings table { width: 100%; border-collapse: collapse; background: var(--paper); font-size: 12px; }
.page-readings th { font: 600 11px/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); text-align: left; padding: var(--s1) 6px; border-bottom: 1px solid var(--ink); }
.page-readings td { padding: var(--s1) 6px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.page-readings .num { text-align: right; }
.page-readings .num .reading-value { align-items: flex-end; }
.page-readings .traced-row td { background: rgba(184, 50, 42, .07); }
.sheet { position: relative; background: var(--paper); box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.sheet img { display: block; width: 100%; height: auto; }
.sheet img:not([src]) { min-height: 70vh; }
.sheet-empty { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; padding: var(--s6); text-align: center; color: var(--ink-soft); font: 16px/1.5 var(--body); }
.sheet img[src] ~ .sheet-empty, .sheet:has(img[src]) .sheet-empty { display: none; }
#marks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#marks .loop {
  fill: rgba(184, 50, 42, .07); stroke: var(--tick); stroke-width: 2.4; vector-effect: non-scaling-stroke;
  stroke-linecap: round; stroke-dasharray: var(--len); stroke-dashoffset: var(--len);
  animation: draw .55s ease-out forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { #marks .loop { animation: none; stroke-dashoffset: 0; } }

dialog { border: 1.5px solid var(--ink); padding: var(--s5); max-width: 460px; width: 92vw; background: var(--pad); }
dialog::backdrop { background: rgba(43, 47, 42, .35); }
.note-form h3 { margin-top: 0; }
.note-form label { display: flex; flex-direction: column; gap: var(--s1); font-size: 13px; color: var(--ink-soft); }
.note-form textarea { border: 1px solid var(--rule); background: var(--paper); padding: var(--s2); }
.note-form fieldset { border: 1px solid var(--rule); margin: 0 0 var(--s3); padding: var(--s2) var(--s3); }
.note-form fieldset p { margin: 0 0 var(--s2); font-size: 13px; }
.note-form fieldset label { margin-bottom: var(--s2); }
.note-form input, .note-form select { border: 1px solid var(--rule); background: var(--paper); padding: var(--s1) var(--s2); }
.note-form menu { display: flex; justify-content: flex-end; gap: var(--s2); padding: 0; margin: var(--s4) 0 0; }
.note-form button { border: 1.5px solid var(--ink); background: var(--paper); padding: 6px 12px; cursor: pointer; }
#note-ok { background: var(--review); color: var(--paper); border-color: var(--review); }

.toast {
  position: fixed; left: 50%; bottom: var(--s5); transform: translateX(-50%); background: var(--ink); color: var(--paper);
  padding: var(--s2) var(--s4); font-size: 14px; opacity: 0; transition: opacity .2s; pointer-events: none;
}
.toast.show { opacity: 1; }

@media (max-width: 1000px) {
  .layout { grid-template-columns: 1fr; }
  .viewer { position: static; height: auto; }
  .wp-header { flex-direction: column; align-items: flex-start; }
  .paper, .wp-header, .scope { padding-left: var(--s4); padding-right: var(--s4); }
}

/* Narrow screens: the accounts table keeps its desktop columns and scrolls sideways inside .table-wrap,
   so the fixed-layout columns never squeeze the amounts into their neighbours. */
@media (max-width: 760px) {
  .layout > * { min-width: 0; }  /* a grid item otherwise grows to the table's width and the page zooms out */
  table.accounts { min-width: 720px; }
}

/* Indicative preparer comparisons remain secondary to the FBAR schedule. */
.form8938 > summary {
  cursor: pointer; padding: var(--s2) 0; border-bottom: 2px solid var(--ink);
  font: 600 20px/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase;
}
.form8938 h4 {
  margin: var(--s5) 0 var(--s2); color: var(--ink-soft);
  font: 600 13px/1.2 var(--display); letter-spacing: .1em; text-transform: uppercase;
}
.form8938-scope { margin: var(--s3) 0 0; }
.form8938 table { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid var(--rule); font-size: 14px; }
.form8938 th, .form8938 td { text-align: left; vertical-align: top; padding: var(--s2) var(--s3); border: 1px solid var(--rule); }
.form8938 thead th {
  background: var(--pad-band); color: var(--ink-soft); vertical-align: bottom;
  font: 600 12px/1.25 var(--display); letter-spacing: .08em; text-transform: uppercase;
}
.form8938 tbody th { font-weight: 500; }
.form8938 td.money, .form8938 th.money { text-align: right; white-space: nowrap; }
.form8938 td.money { font: 13.5px/1.5 var(--mono); }
.form8938-facts { table-layout: fixed; }
.form8938-facts td { overflow-wrap: anywhere; }
.form8938-facts tbody th { width: 34%; background: var(--pad-band); }
.form8938-notes, .form8938-account { margin-top: var(--s2); border: 1px solid var(--rule); background: var(--paper); }
.form8938-notes > summary, .form8938-account > summary { cursor: pointer; padding: var(--s2) var(--s3); font-size: 14px; }
.form8938-notes[open] > summary, .form8938-account[open] > summary { border-bottom: 1px solid var(--rule); }
.form8938-notes ul { margin: 0; padding: var(--s3) var(--s3) var(--s3) var(--s6); font-size: 13.5px; color: var(--ink-soft); }
.form8938-notes li { margin: var(--s1) 0; }
.form8938-account-name { font-family: var(--mono); font-size: 13.5px; }
.form8938-account-status { margin-left: var(--s2); color: var(--ink-soft); }
.form8938-account-body { padding: var(--s3); }
.form8938-account-body > * + * { margin-top: var(--s3); }
.form8938-account-body p { margin-bottom: 0; }
.form8938-account-body > details > summary { cursor: pointer; font-size: 13.5px; }
.form8938-correction { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); font-size: 13.5px; }
.bound-values { font-variant-numeric: tabular-nums; }
.evidence-list { max-height: 16rem; overflow: auto; padding-left: 1.5rem; }