/* Car Ownership Cost Calculator — The New multi-locale workspace. 20260905c
 *
 * One vertical axis for the whole workspace. The input field bar, the preset row and the
 * metric row all sit on `repeat(4, minmax(0,1fr))` with the same 10px gap, and the two
 * panes share one `repeat(2, minmax(0,1fr))` split, so every column boundary lines up at
 * each breakpoint (ledger #42, 추가 필수 확인 #22).
 *
 * `.tn-related-links` and `.tn-source-links` are deliberately absent: the shared
 * fixed-partials CSS owns those for every `data-tn-fixed-partials` page.
 *
 * The element reset never touches `p` padding. Several components below are paragraphs
 * that own border, background and padding (추가 필수 확인 #3).
 */
.tn-coc-page,
.tn-coc-page * { box-sizing: border-box; }

.tn-coc-page {
  --coc-paper: #faf6ee;
  --coc-wash: #f5efdf;
  --coc-panel: #fffaf0;
  --coc-ink: #1a1208;
  --coc-muted: #5a4a30;
  --coc-line: #b8a888;
  --coc-soft-line: #ddd4be;
  --coc-accent: #c44a00;
  --coc-primary-bg: #1a1208;
  --coc-primary-ink: #fff7e8;
  --coc-secondary-bg: #ede6d4;
  --coc-secondary-ink: #1a1208;
  --coc-error-bg: #f7e3da;
  --coc-error-ink: #7e2816;
  --coc-error-line: #c7836e;
  --coc-good-bg: #e3efe6;
  --coc-good-ink: #235c3d;
  --coc-good-line: #8fb79f;
  --coc-track: #e7ddc7;
  --coc-cost: #c44a00;
  --coc-cost-soft: rgba(196, 74, 0, .16);
  --coc-value: #2f7d54;
  --coc-value-soft: rgba(47, 125, 84, .14);
  --coc-seg-1: #7a3b0c;
  --coc-seg-2: #c44a00;
  --coc-seg-3: #d9822b;
  --coc-seg-4: #8a7433;
  --coc-seg-5: #5d7a4a;
  --coc-seg-6: #9a6a55;
  --coc-seg-7: #6f6047;
  width: min(1180px, calc(100vw - 10px));
  max-width: 100%;
  min-width: 0;
  margin: 0 auto;
  color: var(--coc-ink);
  -webkit-text-fill-color: var(--coc-ink);
  font-family: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
}

.tn-coc-page :where(ul, ol) { list-style: none; padding-left: 0; margin: 0; }
.tn-coc-page .tn-coc-tool :is(code, pre, kbd, samp) { padding: 0; border: 0; border-radius: 0; background: none; background-color: transparent; color: inherit; -webkit-text-fill-color: inherit; font-family: inherit; }

.tn-coc-tool {
  margin: 0 0 18px;
  color: var(--coc-ink);
  -webkit-text-fill-color: var(--coc-ink);
  background:
    linear-gradient(90deg, rgba(184, 168, 136, .13) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(0deg, rgba(184, 168, 136, .10) 1px, transparent 1px) 0 0 / 18px 18px,
    var(--coc-paper);
  border: 1px solid var(--coc-line);
  padding: 12px;
  overflow: hidden;
  display: grid;
  row-gap: 10px;
  min-width: 0;
}

.tn-coc-workspace {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 10px;
  min-width: 0;
}

.tn-coc-pane {
  min-width: 0;
  display: grid;
  grid-template-rows: auto;
  align-content: start;
  row-gap: 12px;
  background: color-mix(in srgb, var(--coc-panel) 92%, transparent);
  border: 1px solid var(--coc-line);
  padding: 12px;
}

/* The input column is shorter than the result column, and both are stretched to the same
   height by the workspace grid. The status row absorbs the difference so the pane fills
   instead of leaving 116px idle above its bottom border (ledger #28). */
.tn-coc-pane--input {
  align-content: stretch;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}

.tn-coc-pane--input .tn-coc-status {
  display: grid;
  align-content: center;
}

@media (max-width: 980px) {
  .tn-coc-pane--input { align-content: start; grid-template-rows: auto; }
  .tn-coc-pane--input .tn-coc-status { display: block; }
}

.tn-coc-kicker {
  margin: 0;
  color: var(--coc-muted);
  -webkit-text-fill-color: var(--coc-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- input band */

.tn-coc-fieldbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
  min-width: 0;
}

.tn-coc-field { grid-column: span 2; }
.tn-coc-field--half { grid-column: span 1; }
.tn-coc-field[hidden] { display: none; }

.tn-coc-field {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  align-content: start;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--coc-muted);
  -webkit-text-fill-color: var(--coc-muted);
  font-size: 12.5px;
  line-height: 1.2;
  font-weight: 800;
}

/* Label reset only. `:not(.tn-coc-control)` matters: the control is also a direct span
   child, and at specificity (0,1,1) this rule would otherwise beat `.tn-coc-control`
   (0,1,0) and strip its inner padding (추가 필수 확인 #3, ledger #48). */
.tn-coc-field > span:not(.tn-coc-control) { display: block; margin: 0; padding: 0; min-height: 15px; }

.tn-coc-control {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 40px;
  padding: 0 10px;
  background: var(--coc-panel);
  border: 1px solid var(--coc-line);
}

.tn-coc-control input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--coc-ink);
  -webkit-text-fill-color: var(--coc-ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: normal;
  text-align: right;
  outline: 0;
}

.tn-coc-control input::-webkit-outer-spin-button,
.tn-coc-control input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tn-coc-control input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.tn-coc-control input::placeholder,
.tn-coc-control input::-webkit-input-placeholder { color: var(--coc-muted); -webkit-text-fill-color: var(--coc-muted); font-weight: 400; opacity: .35; }
.tn-coc-control:has(input:focus-visible) { outline: 2px solid var(--coc-accent); outline-offset: -1px; }

.tn-coc-control b {
  flex: 0 0 auto;
  color: var(--coc-muted);
  -webkit-text-fill-color: var(--coc-muted);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  font-variant-numeric: lining-nums tabular-nums;
  border-left: 1px solid var(--coc-soft-line);
  border-bottom: 0;
  padding-left: 8px;
  white-space: nowrap;
}

/* Money fields carry the currency symbol on the side the market writes it. When the
   symbol leads (dollar, rupiah) the value is left aligned so symbol and digits read as one
   block instead of sitting at opposite edges of the control (ledger #48). */
.tn-coc-control b.tn-coc-pre { border-left: 0; border-right: 1px solid var(--coc-soft-line); padding-left: 0; padding-right: 8px; order: -1; }
.tn-coc-control--prefix input { text-align: left; }

/* The global shell resets span display; force the flex row so the unit suffix stays
   inside the control box instead of wrapping under the input (kill list #12/#13). */
.tn-coc-page .tn-coc-tool .tn-coc-control { display: flex !important; align-items: center !important; min-width: 0 !important; }
.tn-coc-page .tn-coc-tool .tn-coc-control input { flex: 1 1 auto; width: auto; }
.tn-coc-page .tn-coc-tool .tn-coc-control b { flex: 0 0 auto; }

/* Native select keeps its accessibility and keyboard behaviour, but gets a visible
   chevron and the flat paper surface instead of the OS widget (ledger #33). */
.tn-coc-select {
  position: relative;
  display: block;
  min-width: 0;
  height: 40px;
  background: var(--coc-panel);
  border: 1px solid var(--coc-line);
}

.tn-coc-select select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 100%;
  min-width: 0;
  margin: 0;
  padding: 0 30px 0 10px;
  border: 0;
  background: transparent;
  color: var(--coc-ink);
  -webkit-text-fill-color: var(--coc-ink);
  font-family: "Noto Sans KR", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  outline: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tn-coc-select::after {
  content: "";
  position: absolute;
  right: 11px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 2px solid var(--coc-muted);
  border-bottom: 2px solid var(--coc-muted);
  transform: rotate(45deg);
  pointer-events: none;
}

.tn-coc-select:has(select:focus-visible) { outline: 2px solid var(--coc-accent); outline-offset: -1px; }

.tn-coc-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; min-width: 0; }

.tn-coc-chip,
.tn-coc-button {
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  height: 34px;
  margin: 0;
  padding: 0 8px;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "Noto Sans KR", system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1;
}

.tn-coc-chip {
  border: 1px solid var(--coc-soft-line);
  background: var(--coc-wash);
  color: var(--coc-muted);
  -webkit-text-fill-color: var(--coc-muted);
}
.tn-coc-chip[aria-pressed="true"] { background: var(--coc-primary-bg); color: var(--coc-primary-ink); -webkit-text-fill-color: var(--coc-primary-ink); border-color: var(--coc-primary-bg); }

.tn-coc-button {
  border: 1px solid var(--coc-line);
  background: var(--coc-secondary-bg);
  color: var(--coc-secondary-ink);
  -webkit-text-fill-color: var(--coc-secondary-ink);
}

.tn-coc-chip:focus-visible,
.tn-coc-button:focus-visible,
.tn-coc-mini:focus-visible { outline: 2px solid var(--coc-accent); outline-offset: 2px; }

.tn-coc-status {
  margin: 0;
  padding: 9px 11px;
  background: var(--coc-wash);
  border: 1px solid var(--coc-soft-line);
  color: var(--coc-muted);
  -webkit-text-fill-color: var(--coc-muted);
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 700;
}
.tn-coc-status[data-tone="error"] { background: var(--coc-error-bg); border-color: var(--coc-error-line); color: var(--coc-error-ink); -webkit-text-fill-color: var(--coc-error-ink); }
.tn-coc-status[data-tone="done"] { background: var(--coc-good-bg); border-color: var(--coc-good-line); color: var(--coc-good-ink); -webkit-text-fill-color: var(--coc-good-ink); }

/* ---------------------------------------------------------------- result */

.tn-coc-verdict {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--coc-line);
  background: var(--coc-panel);
}

.tn-coc-verdict-value {
  min-width: 0;
  margin: 0;
  color: var(--coc-ink);
  -webkit-text-fill-color: var(--coc-ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 800;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: normal;
  white-space: nowrap;
}

.tn-coc-verdict-label {
  min-width: 0;
  margin: 0;
  color: var(--coc-muted);
  -webkit-text-fill-color: var(--coc-muted);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 800;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: normal;
  overflow-wrap: anywhere;
}

.tn-coc-mini {
  appearance: none;
  -webkit-appearance: none;
  height: 34px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid var(--coc-soft-line);
  background: var(--coc-wash);
  color: var(--coc-muted);
  -webkit-text-fill-color: var(--coc-muted);
  font-family: "Noto Sans KR", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  outline: none;
}
.tn-coc-mini:disabled { opacity: .5; cursor: not-allowed; }

.tn-coc-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: stretch; min-width: 0; margin: 0; }
.tn-coc-metric { grid-column: span 2; }
.tn-coc-metric {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 5px;
  margin: 0;
  padding: 10px 11px;
  border: 1px solid var(--coc-soft-line);
  background: var(--coc-panel);
}
.tn-coc-metric dt { margin: 0; color: var(--coc-muted); -webkit-text-fill-color: var(--coc-muted); font-size: 12px; line-height: 1.2; font-weight: 800; letter-spacing: .04em; }
.tn-coc-metric dd {
  margin: 0;
  color: var(--coc-ink);
  -webkit-text-fill-color: var(--coc-ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.25;
  font-weight: 800;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: normal;
  overflow-wrap: anywhere;
}
.tn-coc-metric small { color: var(--coc-muted); -webkit-text-fill-color: var(--coc-muted); font-size: 11.5px; line-height: 1.4; font-weight: 600; }

/* Cost breakdown: one stacked bar plus the same seven items as rows. */
.tn-coc-breakdown { display: grid; gap: 6px; min-width: 0; }
.tn-coc-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.tn-coc-block-title { color: var(--coc-muted); -webkit-text-fill-color: var(--coc-muted); font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.tn-coc-block-note { color: var(--coc-muted); -webkit-text-fill-color: var(--coc-muted); font-size: 11.5px; font-weight: 700; font-variant-numeric: lining-nums tabular-nums; }

.tn-coc-bar { display: flex; width: 100%; height: 14px; border: 1px solid var(--coc-soft-line); background: var(--coc-track); overflow: hidden; }
.tn-coc-bar span { display: block; height: 100%; width: 0; }
.tn-coc-bar span[data-seg="depreciation"] { background: var(--coc-seg-1); }
.tn-coc-bar span[data-seg="interest"] { background: var(--coc-seg-2); }
.tn-coc-bar span[data-seg="fuel"] { background: var(--coc-seg-3); }
.tn-coc-bar span[data-seg="insurance"] { background: var(--coc-seg-4); }
.tn-coc-bar span[data-seg="tax"] { background: var(--coc-seg-5); }
.tn-coc-bar span[data-seg="maintenance"] { background: var(--coc-seg-6); }
.tn-coc-bar span[data-seg="parking"] { background: var(--coc-seg-7); }

.tn-coc-rows { display: grid; gap: 0; border: 1px solid var(--coc-soft-line); background: var(--coc-panel); }
.tn-coc-row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) max-content 46px;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-bottom: 1px solid var(--coc-soft-line);
  min-width: 0;
}
.tn-coc-row:last-child { border-bottom: 0; }
.tn-coc-row i { display: block; width: 12px; height: 12px; border: 1px solid rgba(0, 0, 0, .18); }
.tn-coc-row i[data-seg="depreciation"] { background: var(--coc-seg-1); }
.tn-coc-row i[data-seg="interest"] { background: var(--coc-seg-2); }
.tn-coc-row i[data-seg="fuel"] { background: var(--coc-seg-3); }
.tn-coc-row i[data-seg="insurance"] { background: var(--coc-seg-4); }
.tn-coc-row i[data-seg="tax"] { background: var(--coc-seg-5); }
.tn-coc-row i[data-seg="maintenance"] { background: var(--coc-seg-6); }
.tn-coc-row i[data-seg="parking"] { background: var(--coc-seg-7); }
.tn-coc-row span { min-width: 0; color: var(--coc-muted); -webkit-text-fill-color: var(--coc-muted); font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tn-coc-row b,
.tn-coc-row em {
  margin: 0;
  color: var(--coc-ink);
  -webkit-text-fill-color: var(--coc-ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 800;
  font-style: normal;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: normal;
  white-space: nowrap;
}
.tn-coc-row em { color: var(--coc-muted); -webkit-text-fill-color: var(--coc-muted); text-align: right; }

/* ---------------------------------------------------------------- projection */

.tn-coc-projection,
.tn-coc-schedule { display: grid; gap: 6px; min-width: 0; }

.tn-coc-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tn-coc-legend span { display: inline-flex; align-items: center; gap: 6px; color: var(--coc-muted); -webkit-text-fill-color: var(--coc-muted); font-size: 11.5px; font-weight: 700; }
.tn-coc-legend i { display: block; width: 10px; height: 10px; }
.tn-coc-legend i[data-series="net"] { background: var(--coc-cost); border-radius: 50%; }
.tn-coc-legend i[data-series="resale"] { background: var(--coc-value); }

.tn-coc-chart-frame { width: 100%; min-width: 0; height: 190px; border: 1px solid var(--coc-soft-line); background: var(--coc-panel); }
.tn-coc-chart-frame svg { display: block; width: 100%; height: 100%; }
.tn-coc-chart-frame .coc-grid { stroke: var(--coc-soft-line); stroke-width: 1; }
.tn-coc-chart-frame .coc-axis { stroke: var(--coc-line); stroke-width: 1; }
.tn-coc-chart-frame .coc-net-area { fill: var(--coc-cost-soft); }
.tn-coc-chart-frame .coc-net-line { fill: none; stroke: var(--coc-cost); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tn-coc-chart-frame .coc-resale-line { fill: none; stroke: var(--coc-value); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 5 4; }
.tn-coc-chart-frame .coc-net-dot { fill: var(--coc-cost); }
.tn-coc-chart-frame .coc-resale-dot { fill: var(--coc-value); }
.tn-coc-chart-frame .coc-label { fill: var(--coc-muted); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 10px; font-weight: 700; font-variant-numeric: lining-nums tabular-nums; }

/* ---------------------------------------------------------------- schedule */

.tn-coc-table-wrap { width: 100%; max-width: 100%; min-width: 0; border: 1px solid var(--coc-soft-line); background: var(--coc-panel); }
.tn-coc-table { width: 100%; border-collapse: collapse; color: var(--coc-ink); -webkit-text-fill-color: var(--coc-ink); font-size: 12.5px; line-height: 1.4; }
.tn-coc-table th,
.tn-coc-table td { padding: 7px 9px; border-right: 1px solid var(--coc-soft-line); border-bottom: 1px solid var(--coc-soft-line); text-align: left; vertical-align: top; }
.tn-coc-table tr > :last-child { border-right: 0; }
.tn-coc-table tbody tr:last-child > * { border-bottom: 0; }
.tn-coc-table thead th { background: var(--coc-primary-bg); color: var(--coc-primary-ink); -webkit-text-fill-color: var(--coc-primary-ink); font-weight: 800; white-space: nowrap; }
.tn-coc-table tbody th { background: var(--coc-wash); color: var(--coc-ink); -webkit-text-fill-color: var(--coc-ink); font-weight: 800; white-space: nowrap; }
.tn-coc-table td { background: var(--coc-panel); color: var(--coc-muted); -webkit-text-fill-color: var(--coc-muted); font-weight: 700; font-variant-numeric: lining-nums tabular-nums; }
.tn-coc-table tbody tr[data-final="true"] td,
.tn-coc-table tbody tr[data-final="true"] th { background: var(--coc-wash); color: var(--coc-ink); -webkit-text-fill-color: var(--coc-ink); }
.tn-coc-empty { margin: 0; padding: 12px; color: var(--coc-muted); -webkit-text-fill-color: var(--coc-muted); font-size: 12.5px; font-weight: 700; text-align: center; }

.tn-coc-notice {
  margin: 0;
  align-self: end;
  padding: 10px 12px;
  background: var(--coc-wash);
  border: 1px solid var(--coc-soft-line);
  color: var(--coc-muted);
  -webkit-text-fill-color: var(--coc-muted);
  font-size: 12px;
  line-height: 1.5;
  font-weight: 700;
}

/* Article-side worked-example table. */
.tn-coc-page .tn-coc-example-wrap { width: 100%; max-width: 100%; margin-top: 12px; overflow-x: auto; overscroll-behavior-inline: contain; border: 1px solid var(--coc-line); background: var(--coc-panel); }
.tn-coc-page .tn-coc-example-wrap:focus-visible { outline: 2px solid var(--coc-accent); outline-offset: 2px; }
.tn-coc-page .tn-coc-example-table { width: 100%; min-width: 460px; border-collapse: collapse; color: var(--coc-ink); -webkit-text-fill-color: var(--coc-ink); font-size: 13px; line-height: 1.45; }
.tn-coc-page .tn-coc-example-table th,
.tn-coc-page .tn-coc-example-table td { padding: 9px 10px; border-right: 1px solid var(--coc-soft-line); border-bottom: 1px solid var(--coc-soft-line); text-align: left; vertical-align: top; }
.tn-coc-page .tn-coc-example-table tr > :last-child { border-right: 0; }
.tn-coc-page .tn-coc-example-table tbody tr:last-child > * { border-bottom: 0; }
.tn-coc-page .tn-coc-example-table thead th { background: var(--coc-primary-bg); color: var(--coc-primary-ink); -webkit-text-fill-color: var(--coc-primary-ink); font-weight: 800; }
.tn-coc-page .tn-coc-example-table tbody th { background: var(--coc-wash); color: var(--coc-ink); -webkit-text-fill-color: var(--coc-ink); font-weight: 800; }
.tn-coc-page .tn-coc-example-table td { background: var(--coc-panel); color: var(--coc-muted); -webkit-text-fill-color: var(--coc-muted); font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }

/* ---------------------------------------------------------------- breakpoints */

@media (max-width: 980px) {
  .tn-coc-workspace { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .tn-coc-tool { padding: 8px; }
  .tn-coc-pane { padding: 10px; }
  .tn-coc-verdict { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .tn-coc-verdict-value { font-size: 25px; white-space: normal; }
  .tn-coc-mini { width: 100%; }
  .tn-coc-chart-frame { height: 165px; }
}

/* The field bar, preset row and metric row keep the same track count at every breakpoint
   so the vertical column axis stays aligned (ledger #42). Money fields take the full
   width because a grouped IDR amount does not fit half a 360px row. */
@media (max-width: 560px) {
  .tn-coc-fieldbar,
  .tn-coc-quick,
  .tn-coc-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tn-coc-field,
  .tn-coc-field--half { grid-column: span 1; }
  .tn-coc-field--wide { grid-column: span 2; }
  .tn-coc-chip,
  .tn-coc-quick .tn-coc-button,
  .tn-coc-metric { grid-column: span 1; }
  .tn-coc-row { grid-template-columns: 12px minmax(0, 1fr) max-content 42px; gap: 6px; }

  /* The year table becomes a 2x2 card per row rather than a horizontally scrolling grid,
     so long locale column names keep their meaning without a sideways swipe (ledger #36). */
  .tn-coc-table,
  .tn-coc-table tbody { display: block; }
  .tn-coc-table thead { display: none; }
  .tn-coc-table tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-bottom: 1px solid var(--coc-soft-line);
  }
  .tn-coc-table tbody tr:last-child { border-bottom: 0; }
  .tn-coc-table tbody th,
  .tn-coc-table tbody td {
    display: block;
    min-width: 0;
    border-right: 0;
    border-bottom: 0;
    padding: 6px 8px;
    background: none;
    overflow-wrap: anywhere;
  }
  .tn-coc-table tbody :is(th, td)::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--coc-muted);
    -webkit-text-fill-color: var(--coc-muted);
    font-size: 11px;
    line-height: 1.2;
    font-weight: 800;
  }
  .tn-coc-table tbody .tn-coc-empty::before { content: none; }
  .tn-coc-table tbody tr:has(.tn-coc-empty) { grid-template-columns: minmax(0, 1fr); }

  /* The worked-example table in the Article reflows the same way, so the page has no
     horizontally scrolling surface left at 360px (ledger #36). */
  .tn-coc-page .tn-coc-example-wrap { overflow-x: visible; }
  .tn-coc-page .tn-coc-example-table { min-width: 0; display: block; }
  .tn-coc-page .tn-coc-example-table thead { display: none; }
  .tn-coc-page .tn-coc-example-table tbody { display: block; }
  .tn-coc-page .tn-coc-example-table tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-bottom: 1px solid var(--coc-soft-line);
  }
  .tn-coc-page .tn-coc-example-table tbody tr:last-child { border-bottom: 0; }
  .tn-coc-page .tn-coc-example-table tbody th,
  .tn-coc-page .tn-coc-example-table tbody td {
    display: block;
    min-width: 0;
    border-right: 0;
    border-bottom: 0;
    padding: 6px 9px;
    background: none;
    overflow-wrap: anywhere;
  }
  .tn-coc-page .tn-coc-example-table tbody th { grid-column: span 2; }
  .tn-coc-page .tn-coc-example-table tbody td:last-child { grid-column: span 2; }
  .tn-coc-page .tn-coc-example-table tbody td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--coc-muted);
    -webkit-text-fill-color: var(--coc-muted);
    font-size: 11px;
    line-height: 1.2;
    font-weight: 800;
  }
}

@media (max-width: 420px) {
  .tn-coc-control input { font-size: 15px; }
  .tn-coc-select select { font-size: 13px; }
  .tn-coc-metric dd { font-size: 15px; }
}

/* ---------------------------------------------------------------- schemes */

body:is([data-scheme="dark"], [data-scheme="inverse"], [data-scheme="auto"][data-l="dark"], [data-scheme="auto"][data-d="dark"]) .tn-coc-page,
html[data-scheme="dark"] body:not([data-scheme="light"]) .tn-coc-page {
  --coc-paper: #201811;
  --coc-wash: #2b2119;
  --coc-panel: #241c15;
  --coc-ink: #f7ecd8;
  --coc-muted: #d3c2a4;
  --coc-line: #6f5d40;
  --coc-soft-line: #4c3f2c;
  --coc-accent: #ff8a3d;
  --coc-primary-bg: #3d2f1e;
  --coc-primary-ink: #ffe9c6;
  --coc-secondary-bg: #33281c;
  --coc-secondary-ink: #f7ecd8;
  --coc-error-bg: #3a211c;
  --coc-error-ink: #ffc2b3;
  --coc-error-line: #854d40;
  --coc-good-bg: #22301f;
  --coc-good-ink: #b9e0c2;
  --coc-good-line: #4e6b52;
  --coc-track: #3a2f21;
  --coc-cost: #ff9f5e;
  --coc-cost-soft: rgba(255, 159, 94, .18);
  --coc-value: #7fc9a0;
  --coc-value-soft: rgba(127, 201, 160, .16);
  --coc-seg-1: #b8641f;
  --coc-seg-2: #ff8a3d;
  --coc-seg-3: #f0ab5e;
  --coc-seg-4: #c9ae63;
  --coc-seg-5: #9dbb82;
  --coc-seg-6: #d6a08a;
  --coc-seg-7: #a2917a;
  color: var(--coc-ink);
  -webkit-text-fill-color: var(--coc-ink);
}

@media (prefers-color-scheme: dark) {
  body[data-scheme="auto"] .tn-coc-page {
    --coc-paper: #201811;
    --coc-wash: #2b2119;
    --coc-panel: #241c15;
    --coc-ink: #f7ecd8;
    --coc-muted: #d3c2a4;
    --coc-line: #6f5d40;
    --coc-soft-line: #4c3f2c;
    --coc-accent: #ff8a3d;
    --coc-primary-bg: #3d2f1e;
    --coc-primary-ink: #ffe9c6;
    --coc-secondary-bg: #33281c;
    --coc-secondary-ink: #f7ecd8;
    --coc-error-bg: #3a211c;
    --coc-error-ink: #ffc2b3;
    --coc-error-line: #854d40;
    --coc-good-bg: #22301f;
    --coc-good-ink: #b9e0c2;
    --coc-good-line: #4e6b52;
    --coc-track: #3a2f21;
    --coc-cost: #ff9f5e;
    --coc-cost-soft: rgba(255, 159, 94, .18);
    --coc-value: #7fc9a0;
    --coc-value-soft: rgba(127, 201, 160, .16);
    --coc-seg-1: #b8641f;
    --coc-seg-2: #ff8a3d;
    --coc-seg-3: #f0ab5e;
    --coc-seg-4: #c9ae63;
    --coc-seg-5: #9dbb82;
    --coc-seg-6: #d6a08a;
    --coc-seg-7: #a2917a;
    color: var(--coc-ink);
    -webkit-text-fill-color: var(--coc-ink);
  }
}

body:is([data-scheme="dark"], [data-scheme="inverse"], [data-scheme="auto"][data-l="dark"], [data-scheme="auto"][data-d="dark"]) .tn-coc-page :is(.tn-coc-control input, .tn-coc-select select),
html[data-scheme="dark"] body:not([data-scheme="light"]) .tn-coc-page :is(.tn-coc-control input, .tn-coc-select select) { color: var(--coc-ink); -webkit-text-fill-color: var(--coc-ink); color-scheme: dark; }
@media (prefers-color-scheme: dark) { body[data-scheme="auto"] .tn-coc-page :is(.tn-coc-control input, .tn-coc-select select) { color: var(--coc-ink); -webkit-text-fill-color: var(--coc-ink); color-scheme: dark; } }

/* The sitewide dark rule paints every `tn-`-prefixed node cream with !important. The
   surfaces below own a dark background, so the text token has to win back explicitly
   (kill list #15). */
body:is([data-scheme="dark"], [data-scheme="inverse"], [data-scheme="auto"][data-l="dark"], [data-scheme="auto"][data-d="dark"]) .tn-coc-page .tn-coc-tool .tn-coc-chip[aria-pressed="true"],
html[data-scheme="dark"] body:not([data-scheme="light"]) .tn-coc-page .tn-coc-tool .tn-coc-chip[aria-pressed="true"],
body:is([data-scheme="dark"], [data-scheme="inverse"], [data-scheme="auto"][data-l="dark"], [data-scheme="auto"][data-d="dark"]) .tn-coc-page :is(.tn-coc-table thead th, .tn-coc-example-table thead th),
html[data-scheme="dark"] body:not([data-scheme="light"]) .tn-coc-page :is(.tn-coc-table thead th, .tn-coc-example-table thead th) {
  color: var(--coc-primary-ink) !important;
  -webkit-text-fill-color: var(--coc-primary-ink) !important;
}

@media (prefers-color-scheme: dark) {
  body[data-scheme="auto"] .tn-coc-page .tn-coc-tool .tn-coc-chip[aria-pressed="true"],
  body[data-scheme="auto"] .tn-coc-page :is(.tn-coc-table thead th, .tn-coc-example-table thead th) {
    color: var(--coc-primary-ink) !important;
    -webkit-text-fill-color: var(--coc-primary-ink) !important;
  }
}