*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--ink); font: var(--fs-md)/1.5 var(--font-ui); }
a { color: inherit; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: var(--space-4); top: var(--space-2); background: var(--paper); padding: var(--space-2); z-index: 10; }
.shell { min-height: var(--header-h); background: var(--shell); color: var(--on-red); border-bottom: 3px solid var(--shell-line);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-6); padding: var(--space-2) var(--space-6); }
.brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; font-weight: 700; font-size: var(--fs-lg); letter-spacing: .04em; }
.brand img { border-radius: 50%; }
.shell nav { display: flex; gap: var(--space-4); }
.shell nav a { text-decoration: none; font-size: var(--fs-sm); padding: var(--space-2) 0; border-bottom: 2px solid transparent; opacity: .85; }
.shell nav a:hover { opacity: 1; }
.shell nav a[aria-current="page"] { color: var(--brass); border-bottom-color: var(--brass); opacity: 1; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* On the black shell the gold ring has the contrast; on paper the ink ring does. */
.shell :focus-visible { outline-color: var(--brass); }
main { max-width: 1280px; margin: 0 auto; padding: var(--space-8) var(--space-6); }
.card { background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow-nota); padding: var(--space-6); }
h1 { font-size: var(--fs-xl); margin: 0 0 var(--space-3); }
.muted { color: var(--ink-muted); }
@media (max-width: 480px) { main { padding: var(--space-4); } .shell { padding: var(--space-2) var(--space-4); } }
.session { margin: 0 0 0 auto; display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-sm); color: var(--on-shell-muted); }
.btn-link { background: none; border: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; padding: var(--space-2); }
.btn-primary { background: var(--nota-red); color: var(--on-red); border: 0; border-radius: var(--radius); font: 600 var(--fs-md) var(--font-ui); padding: var(--space-3) var(--space-6); cursor: pointer; min-height: 44px; }
.btn-primary:hover { background: var(--nota-red-strong); }
.stack { display: grid; gap: var(--space-2); }
.stack button { margin-top: var(--space-4); justify-self: start; }
label { font-size: var(--fs-xs); letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--ink-muted); }
input, select { font: var(--fs-md) var(--font-ui); padding: var(--space-3); border: 1px solid var(--rule); border-radius: var(--radius); color: var(--ink); background: var(--paper); min-height: 44px; }
.login { max-width: 400px; margin: var(--space-12) auto; }
.alert { background: var(--nota-red-tint); border: 1px solid var(--nota-red-text); border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-4); }
.table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-8); font-size: var(--fs-sm); }
.table th { text-align: left; font-size: var(--fs-xs); letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--ink-muted); font-weight: 600; }
.table th, .table td { padding: var(--space-2) var(--space-3) var(--space-2) 0; border-bottom: var(--perforation); }
h2 { font-size: var(--fs-lg); margin: 0 0 var(--space-3); }

::selection { background: var(--brass-tint); color: var(--ink); }
input { caret-color: var(--nota-red-text); }
.n { text-align: right; font-family: var(--font-num); font-variant-ligatures: none; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Cek harga */
.check-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "input nota" "specs nota"; gap: var(--space-6); align-items: start; }
.area-input { grid-area: input; }
.area-nota { grid-area: nota; position: sticky; top: var(--space-6); }
.area-specs { grid-area: specs; min-width: 0; }
.tag-row { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.tag-row input { flex: 1; min-width: 0; font: 600 var(--fs-lg) var(--font-num); letter-spacing: .04em; text-transform: uppercase; }
.tag-row input[aria-invalid="true"] { border-color: var(--danger); }
.btn-primary:disabled { opacity: .7; cursor: progress; }
.help { font-size: var(--fs-xs); color: var(--ink-muted); margin: var(--space-2) 0 0; }
.field-error { color: var(--danger); font-size: var(--fs-sm); font-weight: 600; margin: var(--space-2) 0 0; min-height: 1.25em; }
.field-error:empty { min-height: 0; margin: 0; }
.tag { font: 500 var(--fs-sm) var(--font-num); color: var(--ink-muted); margin-left: var(--space-2); }
h3 { font-size: var(--fs-sm); letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--ink-muted); margin: var(--space-8) 0 var(--space-2); }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--space-3) var(--space-4); margin: var(--space-4) 0 0; }
.facts dt { font-size: var(--fs-xs); color: var(--ink-muted); }
.facts dd { margin: 0; font: 600 var(--fs-lg) var(--font-num); font-variant-numeric: tabular-nums; }
.legend { font-size: var(--fs-xs); color: var(--ink-muted); margin: 0 0 var(--space-2); }
.progress { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.progress th, .progress td { padding: var(--space-2) 0; border-bottom: var(--perforation); vertical-align: top; }
.progress thead th { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-muted); text-align: left; }
.progress thead th.n { text-align: right; font-family: var(--font-ui); }
.progress { table-layout: fixed; }
.progress tbody th { font-weight: 500; text-align: left; padding-right: var(--space-4); }
.progress col.c-pct, .progress thead th.n { width: 6.5rem; }
.progress td { padding-left: var(--space-3); }
.progress .sub { display: block; font-size: var(--fs-xs); color: var(--ink-muted); }
.progress .is-overall th, .progress .is-overall strong { font-weight: 700; }
.bar { display: block; width: 100%; height: 8px; margin-top: var(--space-2); border-radius: 2px; }
.bar-track { fill: var(--ground); }
.bar-room { fill: var(--rule); }
.bar-fill { fill: var(--ink); }
.bar-tick { fill: var(--nota-red-text); }
.heroes { list-style: none; padding: 0; margin: 0; font-size: var(--fs-sm); }
.heroes li { display: flex; justify-content: space-between; padding: var(--space-2) 0; border-bottom: var(--perforation); }

/* Nota */
.nota { position: relative; }
.nota h2 { font-size: var(--fs-md); letter-spacing: var(--label-tracking); text-transform: uppercase; margin: 0; }
.meta { font: var(--fs-xs) var(--font-num); color: var(--ink-muted); margin: var(--space-1) 0 var(--space-4); padding-bottom: var(--space-3); border-bottom: var(--perforation); }
.lines { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.lines th { text-align: left; font-weight: 400; }
.lines th, .lines td { padding: var(--space-3) 0; border-bottom: var(--perforation); }
.closing { width: 100%; border-collapse: collapse; margin-top: var(--space-2); border-top: 3px double var(--ink); }
.closing th { text-align: left; font-weight: 700; letter-spacing: var(--label-tracking); text-transform: uppercase; font-size: var(--fs-sm); }
.closing-total th, .closing-total td { padding: var(--space-4) 0 var(--space-1); vertical-align: baseline; }
.closing-total td { font: 700 var(--fs-total) var(--font-num); line-height: 1.1; }
.closing-range th, .closing-range td { padding: 0 0 var(--space-4); border-bottom: var(--perforation); font-size: var(--fs-sm); font-weight: 500; color: var(--brass-ink); }
.closing-range th { text-transform: none; letter-spacing: 0; }
.paraf { margin: var(--space-3) 0 0; text-align: right; font: var(--fs-xs) var(--font-num); color: var(--ink-muted); }
.paraf::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: var(--space-2); border-radius: 50%; background: var(--brass); vertical-align: -1px; }
.is-stale > :not(.stale-note) { opacity: .4; }
.stale-note { margin: 0 0 var(--space-4); padding-bottom: var(--space-3); border-bottom: var(--perforation); color: var(--danger); font-weight: 600; font-size: var(--fs-sm); }
.meta-time::before { content: "· "; }
@media (max-width: 480px) { .meta-time { display: block; } .meta-time::before { content: ""; } }
.specs { position: relative; }
.stamp { position: absolute; right: var(--space-6); top: var(--space-4); margin: 0; transform: rotate(-6deg); border: 2px solid var(--nota-red-text); color: var(--nota-red-text); font-weight: 700; font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; padding: var(--space-1) var(--space-2); }
.note { font-size: var(--fs-sm); color: var(--ink-muted); margin: var(--space-4) 0 0; }
.empty { color: var(--ink-muted); margin: var(--space-4) 0 0; }
.nota-empty { min-height: 240px; }

@media (max-width: 960px) { .check-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "input" "nota" "specs"; } .area-nota { position: static; } }
@media (max-width: 480px) { .closing-total td { font-size: var(--fs-xl); } .closing-range td { white-space: normal; } .stamp { position: static; display: inline-block; margin-bottom: var(--space-3); } }
@media (prefers-reduced-motion: no-preference) {
  .lines tbody tr { animation: print var(--dur) var(--ease) both; }
  .lines tbody tr:nth-child(2) { animation-delay: 60ms; } .lines tbody tr:nth-child(3) { animation-delay: 120ms; }
  .lines tbody tr:nth-child(4) { animation-delay: 180ms; } .lines tbody tr:nth-child(5) { animation-delay: 240ms; }
  .lines tbody tr:nth-child(6) { animation-delay: 300ms; } .lines tbody tr:nth-child(7) { animation-delay: 360ms; }
  .closing, .paraf { animation: print 220ms var(--ease) 420ms both; }
}
@keyframes print { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

/* Admin pages */
.stack-page { display: grid; gap: var(--space-6); }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-8); margin-top: var(--space-6); }
.report { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--brass-tint); border: 1px solid var(--brass); border-radius: var(--radius); font-size: var(--fs-sm); }
.report p { margin: 0; }
.report ul { margin: var(--space-2) 0 0; padding-left: var(--space-6); }
.table-wrap { overflow-x: auto; position: relative; }
.table td.n, .table th.n { text-align: right; }
.mono { font-family: var(--font-num); font-size: var(--fs-sm); }
.is-inactive td { color: var(--ink-muted); }
.actions { display: flex; gap: var(--space-2); justify-content: flex-end; }
.actions form { margin: 0; }
.btn-small { font: 600 var(--fs-xs) var(--font-ui); padding: var(--space-2) var(--space-3); min-height: 32px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); color: var(--ink); cursor: pointer; }
.btn-small:hover { border-color: var(--ink-muted); }
.btn-danger { color: var(--danger); }
.btn-danger:hover { border-color: var(--danger); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
code { font-family: var(--font-num); font-size: .95em; }

/* Kalibrasi */
.factors { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.factors legend { font-size: var(--fs-xs); letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--space-2); }
.check { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-md); letter-spacing: 0; text-transform: none; color: var(--ink); min-height: 44px; }
.check input { min-height: 0; width: 18px; height: 18px; accent-color: var(--nota-red); }
.model-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: var(--space-6); align-items: start; }
.model h2 { font-size: var(--fs-md); letter-spacing: var(--label-tracking); text-transform: uppercase; margin: 0; }
.model-active h2 { color: var(--brass-ink); }
.model-candidate h2 { color: var(--nota-red-text); }
.sub-inline { font-size: var(--fs-xs); color: var(--ink-muted); }
.verdict { margin: var(--space-4) 0 0; font-weight: 600; }
.verdict.better { color: var(--ok); }
.verdict.worse { color: var(--danger); }
.row-actions { display: flex; gap: var(--space-3); align-items: center; margin-top: var(--space-6); }
.row-actions form { margin: 0; }

.stack-page > *, .two-col > * { min-width: 0; }
.stack { align-content: start; }
.stack button { align-self: start; }
.stack h2 { margin-bottom: var(--space-2); }
.model-grid { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }
input[type="file"] { padding: var(--space-2); font-size: var(--fs-sm); }
input[type="file"]::file-selector-button { font: 600 var(--fs-sm) var(--font-ui); margin-right: var(--space-3); padding: var(--space-2) var(--space-4); border: 1px solid var(--rule); border-radius: var(--radius); background: var(--ground); color: var(--ink); cursor: pointer; }
input[type="file"]::file-selector-button:hover { border-color: var(--ink-muted); }
.model { min-width: 0; }

/* Header on small screens: brand + session on one row, nav below */
@media (max-width: 640px) {
  .shell { display: grid; grid-template-columns: 1fr auto; padding: var(--space-2) var(--space-4); row-gap: 0; }
  .shell nav { grid-column: 1 / -1; grid-row: 2; overflow-x: auto; }
  .session { grid-column: 2; grid-row: 1; margin: 0; }
  .session span { display: none; }
}
/* File input with Indonesian copy */
.file-pick { position: relative; display: flex; align-items: center; gap: var(--space-3); min-height: 44px; }
.file-pick input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-pick .file-btn { font: 600 var(--fs-sm) var(--font-ui); padding: var(--space-2) var(--space-4); border: 1px solid var(--rule); border-radius: var(--radius); background: var(--ground); }
.file-pick:focus-within .file-btn { outline: 2px solid var(--ink); outline-offset: 2px; }
.file-pick .file-name { font-size: var(--fs-sm); color: var(--ink-muted); }
.compare th[scope="row"] { font-weight: 500; text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); color: var(--ink); }
.compare thead th.model-active { color: var(--brass-ink); }
.compare thead th.model-candidate { color: var(--nota-red-text); }
.compare .row-actions { justify-content: flex-end; margin: 0; }
.better { color: var(--ok); font-weight: 600; }
.worse { color: var(--danger); font-weight: 600; }
details { border-top: var(--perforation); padding: var(--space-3) 0; }
summary { cursor: pointer; font-weight: 600; min-height: 32px; }
details .table { margin: var(--space-3) 0 0; }

.mono, .meta, .paraf, .tag, .tag-row input, .facts dd, code { font-variant-ligatures: none; }

/* Account summary under the nota */
.summary { margin-top: var(--space-4); }
.summary-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.summary h2 { font-size: var(--fs-md); letter-spacing: var(--label-tracking); text-transform: uppercase; margin: 0; }
.summary-text { margin: var(--space-3) 0 0; font: var(--fs-sm)/1.6 var(--font-num); white-space: pre-wrap; overflow-wrap: anywhere; font-variant-ligatures: none; }

.flagged { background: var(--nota-red-tint); border: 2px solid var(--danger); margin-bottom: var(--space-4); }
.flagged h2 { color: var(--danger); margin: 0 0 var(--space-2); }
.flagged p { margin: 0; }