/* DS-1878 Helper - styling shared with DS-452 Helper / the POM Worksheet app (system fonts only, nothing downloaded). */
:root {
  --primary: #1F3A5F; --on-primary: #fff; --primary-container: #D6E4F5; --secondary-container: #E4E9F2;
  --surface: #ffffff; --bg: #F6F7F9; --on-surface: #1B1C1F; --muted: #4A4F57; --outline: #8A8F98; --line: #DADDE2;
  --error: #B3261E; --ok: #1F3A5F; --warn: #8A5A00; --shadow: 0 1px 3px rgba(0,0,0,.15);
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
}
@media (prefers-color-scheme: dark) {
  :root { --primary: #A9C7F0; --on-primary: #0E2440; --primary-container: #23405F; --secondary-container: #2C3440;
    --surface: #1E2126; --bg: #15171A; --on-surface: #E6E7EA; --muted: #B5BAC2; --outline: #8A8F98; --line: #3A3F47;
    --error: #F2B8B5; --ok: #A9C7F0; --warn: #F0C36D; }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--on-surface);
  font: 16px/1.4 -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
#app { min-height: 100vh; }
button { font: inherit; color: inherit; }
h2, h3 { margin: 8px 0; }
h2.question { font-size: 1.35rem; font-weight: 500; }
h3.section { font-size: 1.05rem; font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
p { margin: 6px 0; }
.small { font-size: .82rem; }
.muted { color: var(--muted); }
.center { text-align: center; }
.okcolor { color: var(--ok); }
.errcolor { color: var(--error); }
.errtext { color: var(--error); font-size: .82rem; margin: 6px 0; }
.warntext { color: var(--warn); font-size: .82rem; margin: 6px 0; }
.ic { width: 24px; height: 24px; fill: currentColor; flex: none; }
.ic.inline { width: 18px; height: 18px; vertical-align: -3px; }
.ic.muted { width: 18px; height: 18px; color: var(--muted); }

/* top app bar */
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 4px; min-height: 56px;
  padding: calc(4px + var(--sat)) calc(4px + var(--sar)) 4px calc(4px + var(--sal)); background: var(--surface); box-shadow: var(--shadow); }
.navspace { width: 8px; }
.tb-titles { flex: 1; min-width: 0; padding: 0 4px; }
.tb-title { font-size: 1.1rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-sub { font-size: .78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-actions { display: flex; align-items: center; }
.iconbtn { border: 0; background: none; width: 44px; height: 44px; border-radius: 22px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.iconbtn:active { background: var(--secondary-container); }
.tbtn { border: 0; background: none; min-width: 40px; height: 40px; border-radius: 20px; font-size: 1rem; color: var(--primary); cursor: pointer; }
.tbtn:disabled { color: var(--outline); }

/* layout */
.content { padding: 8px calc(16px + var(--sar)) calc(24px + var(--sab)) calc(16px + var(--sal)); max-width: 760px; margin: 0 auto; }
.content.withbar { padding-bottom: calc(96px + var(--sab)); }
.content.home { padding-bottom: calc(100px + var(--sab)); }
.row { display: flex; align-items: center; flex-wrap: wrap; }
.row.gap { gap: 12px; }
.row.two > * { flex: 1 1 0; min-width: 0; }
.spaced { margin-top: 16px; }
.bottombar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; gap: 12px; background: var(--surface);
  padding: 12px calc(12px + var(--sar)) calc(12px + var(--sab)) calc(12px + var(--sal)); box-shadow: 0 -1px 3px rgba(0,0,0,.12); }
.bottombar .btn { flex: 1; }

/* cards */
.card { background: var(--surface); border-radius: 12px; padding: 12px; margin: 8px 0; box-shadow: var(--shadow); }
.card.info { background: var(--secondary-container); box-shadow: none; }
.card.info b { display: block; margin-bottom: 2px; }
.card.info .btn { margin-top: 8px; }
.card.preview .label { font-size: .85rem; font-weight: 600; margin-bottom: 4px; }
.prow { display: flex; justify-content: space-between; gap: 8px; font-size: .92rem; padding: 1px 0; }
.prow.total { margin-top: 4px; }
.empty { padding: 16px 8px; }
.empty h2 { font-size: 1.15rem; font-weight: 500; }

/* buttons */
.btn { border: 0; border-radius: 22px; min-height: 44px; padding: 10px 20px; background: var(--primary); color: var(--on-primary); font-weight: 500; cursor: pointer; }
.btn:disabled { background: var(--line); color: var(--outline); cursor: default; }
.btn.outline { background: transparent; color: var(--primary); border: 1px solid var(--outline); }
.btn.outline:disabled { color: var(--outline); border-color: var(--line); }
.btn.text { background: transparent; color: var(--primary); padding: 8px 12px; }
.btn.text:disabled { color: var(--outline); }
.btn.danger { color: var(--error); }
.btn.wide { display: block; width: 100%; margin-top: 8px; }
.btn.sq { min-width: 48px; padding: 0 12px; font-size: 1.3rem; }
.fab { position: fixed; right: calc(16px + var(--sar)); bottom: calc(16px + var(--sab)); z-index: 11; display: inline-flex; align-items: center; gap: 8px;
  border: 0; border-radius: 16px; min-height: 56px; padding: 0 20px; background: var(--primary-container); color: var(--on-surface); font-weight: 600;
  box-shadow: 0 3px 8px rgba(0,0,0,.25); cursor: pointer; }
.chip { border: 1px solid var(--outline); background: var(--surface); border-radius: 8px; min-height: 40px; padding: 6px 16px; cursor: pointer; font-size: .95rem; }
.chip.sel { background: var(--primary-container); border-color: var(--primary-container); font-weight: 600; }
.chip .tick { margin-right: 6px; }

/* fields */
.field { display: block; margin: 10px 0; }
.flabel { display: block; font-size: .8rem; color: var(--muted); margin: 0 0 4px 2px; }
.field input { display: block; width: 100%; min-height: 48px; padding: 10px 12px; font-size: 16px; color: var(--on-surface);
  background: var(--surface); border: 1px solid var(--outline); border-radius: 6px; -webkit-appearance: none; appearance: none; }
.field input[type="date"] { min-width: 0; line-height: 26px; }
.field input:focus { outline: 2px solid var(--primary); outline-offset: -1px; border-color: var(--primary); }
.field input:disabled { color: var(--muted); background: var(--bg); }
.field.err input { border-color: var(--error); }
.field.err .flabel, .field.err .fhint { color: var(--error); }
.fhint { display: block; font-size: .78rem; color: var(--muted); margin: 3px 0 0 2px; min-height: 1em; }
.stepper { display: flex; align-items: flex-end; gap: 8px; margin: 4px 0; }
.stepper .field { width: 120px; margin: 0; }
.stepper .btn { margin-bottom: 2px; }
.stepper .fhint { display: none; }

/* wizard */
.progress { height: 4px; background: var(--line); border-radius: 2px; margin-top: 6px; overflow: hidden; }
.progress .bar { height: 100%; background: var(--primary); }
.steplabel { color: var(--muted); }
.q { margin: 10px 0 14px; }
.qtitle { font-size: 1.05rem; font-weight: 500; margin: 4px 0 2px; }
.qhint { font-size: .82rem; color: var(--muted); margin: 0 0 8px; }
.q .row { margin-top: 6px; }

/* home list */
.wsrow { display: flex; align-items: flex-start; gap: 4px; padding: 10px 4px 10px 12px; cursor: pointer; }
.wsmain { flex: 1; min-width: 0; font-size: .92rem; }
.wstitle { font-weight: 700; }
.menuwrap { position: relative; }
.menu { position: absolute; right: 4px; top: 40px; z-index: 20; min-width: 160px; background: var(--surface); border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.25); padding: 6px 0; }
.menu button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 12px 16px; font-size: 1rem; cursor: pointer; }
.menu button:active { background: var(--secondary-container); }
.install .row { margin-top: 6px; }

/* review */
.sheettitle { font-weight: 700; font-size: 1.02rem; }
.link { cursor: pointer; }
.lrow { display: flex; align-items: center; gap: 6px; padding: 5px 0; }
.lrow.head { justify-content: space-between; font-size: .78rem; color: var(--muted); }
.lrow.line { cursor: pointer; border-radius: 6px; }
.lrow.line:active { background: var(--secondary-container); }
.lrow .no { width: 26px; flex: none; }
.lrow .item { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: .92rem; }
.lrow .basis { font-size: .78rem; color: var(--muted); }
.lrow .adjusted { font-size: .72rem; font-weight: 700; color: var(--error); text-transform: none; }
.lrow .amt { font-weight: 500; text-align: right; white-space: nowrap; }
.lrow.tot { font-weight: 700; }
.radio, .check { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; }
.radio input, .check input { width: 22px; height: 22px; margin: 0; accent-color: var(--primary); flex: none; }
.check input:disabled + span { color: var(--outline); }

/* preview */
.previewbg { background: var(--secondary-container); max-width: none; overflow-x: auto; padding-left: 8px; padding-right: 8px; min-height: calc(100vh - 56px); }
.pages { margin: 0; }
.page { margin: 0 0 8px; border: .5px solid #888; background: #fff; line-height: 0; }
.pdfpage { width: 100%; height: auto; display: block; }
.pdfpage text { font-family: Helvetica, Arial, "Liberation Sans", "Nimbus Sans", sans-serif; white-space: pre; }

/* dialog */
.scrim { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; padding: 16px; }
.dialog { background: var(--surface); border-radius: 20px; padding: 20px; width: 100%; max-width: 440px; max-height: calc(100vh - 32px); overflow: auto; box-shadow: 0 8px 30px rgba(0,0,0,.35); }
.dialog h3 { font-size: 1.1rem; font-weight: 500; margin-top: 0; }
.dlgbtns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

/* ---- DS-452 Helper additions ---- */
.hidden { display: none !important; }
[hidden] { display: none !important; }
.grow { flex: 1; }
.warncolor { color: var(--warn); }
.card.banner.warn { border-left: 4px solid var(--warn); }
.card.warnedge { border-left: 4px solid var(--warn); }
.card.banner .btn { margin-top: 8px; }
.card.info { display: block; }
.card.info .btn { display: inline-block; }
.field.warnf input { border-color: var(--warn); }
.field.warnf .fhint { color: var(--warn); }
.field.okf .fhint { color: var(--ok); }
.row.two > .field { flex: 1 1 140px; }
.row.gap.two { align-items: flex-start; column-gap: 12px; row-gap: 0; }
.chips { gap: 8px; margin: 2px 0 6px; }
.issue { display: block; font-size: .88rem; padding: 6px 8px; margin: 4px 0; border-radius: 6px; }
.issue.error { color: var(--error); background: rgba(179,38,30,.07); }
.issue.warn { color: var(--warn); background: rgba(138,90,0,.08); }
.issue.ok { color: var(--ok); }
.card.line .prow.total { font-size: 1rem; margin-top: 8px; }
.ocrow { align-items: flex-end; flex-wrap: nowrap; }
.ocrow .field { flex: 1 1 0; min-width: 0; margin: 4px 0; }
.ocrow .field:first-child { flex: 1.4 1 0; }
.ocrow .fhint { display: none; }
.progresswrap { background: var(--surface); padding: 0 12px 6px; position: sticky; top: 56px; z-index: 9; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.steptabs { display: flex; gap: 4px; overflow-x: auto; padding-top: 6px; scrollbar-width: none; }
.steptab { flex: none; border: 0; background: none; padding: 6px 10px; border-radius: 14px; font-size: .8rem; color: var(--muted); cursor: pointer; }
.steptab.sel { background: var(--primary-container); color: var(--on-surface); font-weight: 600; }
.qhint { margin-top: 10px; }
.sigimg { display: block; max-width: 100%; max-height: 90px; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 4px; margin: 6px 0; }
.dialog.wide { max-width: 620px; }
.sigwrap { position: relative; background: #fff; border: 1px solid var(--outline); border-radius: 8px; height: 200px; touch-action: none; }
.sigpad { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.sigline { position: absolute; left: 16px; right: 16px; bottom: 44px; border-top: 1px solid #9aa; pointer-events: none; }
.sighint { position: absolute; left: 16px; bottom: 22px; pointer-events: none; color: #667; }
.dlgbtns .grow { flex: 1; }
.toast { position: fixed; left: 50%; bottom: calc(90px + var(--sab)); transform: translateX(-50%); z-index: 60; background: #323232; color: #fff; padding: 10px 16px; border-radius: 8px; font-size: .9rem; box-shadow: 0 3px 10px rgba(0,0,0,.3); max-width: calc(100vw - 32px); pointer-events: none; }
.bottombar .btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.page { max-width: 820px; margin: 0 auto 8px; }
.wsrow { margin: 8px 0; }
@media (min-width: 900px) { .previewbg .pages { max-width: 820px; margin: 0 auto; } }
.prow > span.muted { flex: none; white-space: nowrap; }
.prow > span:last-child { text-align: right; }

/* Phase 2: documents, pick-lists, passports */
.docsbar { display: flex; align-items: center; gap: 12px; background: var(--secondary-container); box-shadow: none; }
.docsbar .small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52vw; }
.sugg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 0; }
.sugglab { font-size: .72rem; color: var(--muted); margin-right: 2px; }
.schip { display: inline-flex; flex-direction: column; align-items: flex-start; border: 1px dashed var(--outline); background: var(--surface); border-radius: 8px;
  min-height: 40px; padding: 3px 10px; cursor: pointer; text-align: left; max-width: 100%; }
.schip .sv { font-size: .9rem; font-weight: 600; overflow-wrap: anywhere; }
.schip .ss { font-size: .68rem; color: var(--muted); overflow-wrap: anywhere; }
.schip.sel { border-style: solid; border-color: var(--primary); background: var(--primary-container); }
.schip:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.importbtns .btn { flex: 1 1 140px; }
.card.doc .found { margin: 8px 0; padding: 6px 8px; border-radius: 8px; background: var(--bg); }
.card.doc .found .prow span:last-child { text-align: right; overflow-wrap: anywhere; }
.card.doc .chips .chip { min-height: 34px; padding: 4px 12px; font-size: .85rem; }
.pastebox { width: 100%; font: 14px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; padding: 8px; border: 1px solid var(--outline); border-radius: 6px; background: var(--surface); color: var(--on-surface); }
.pastebox.mono { letter-spacing: .02em; }
pre.doctext { max-height: 55vh; overflow: auto; white-space: pre-wrap; font-size: .78rem; background: var(--bg); padding: 8px; border-radius: 6px; }
.progresscard .progress { height: 6px; }
.pprow { display: flex; gap: 8px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line); }
.pprow .col { display: flex; flex-direction: column; align-items: flex-end; }
.pprow .col .btn { min-height: 34px; padding: 4px 10px; }
.badge { display: inline-block; font-size: .72rem; font-weight: 700; border-radius: 10px; padding: 1px 8px; margin-top: 3px; }
.badge.ok { background: var(--primary-container); color: var(--on-surface); }
.badge.warn { background: #FFE8B0; color: #5A3C00; }
.badge.expired { background: var(--error); color: #fff; }
.badge.unknown { background: var(--line); color: var(--muted); }
.schip.more { border-style: solid; border-color: var(--line); background: var(--bg); justify-content: center; }
.schip.more .sv { font-weight: 500; color: var(--primary); }
.banner.err { border-left: 4px solid var(--error); background: rgba(179,38,30,.06); }
.banner.err b { color: var(--error); }
.ocitem { border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-bottom: 6px; }
.ocmeta { gap: 8px; }
.ocmeta select, .attrow select { min-height: 40px; border: 1px solid var(--outline); border-radius: 8px; background: var(--surface, #fff); padding: 0 8px; font: inherit; font-size: .88rem; color: inherit; max-width: 100%; }
.prow.recon.match span:last-child, .prow.recon.match b { color: var(--ok); }
.prow.recon.mismatch, .prow.recon.mismatch b { color: var(--error); }
.prow.recon.unassigned span:last-child { color: var(--warn); }
.attach { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--line); }
.attlist li { margin: 2px 0; }

/* v0.3: new-form chooser, copy, share/import, help, footer */
.optbtn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; margin: 8px 0; padding: 12px 14px; border: 1px solid var(--outline); border-radius: 12px; background: var(--surface); cursor: pointer; }
.optbtn:disabled { opacity: .55; cursor: default; }
.optbtn b { font-size: 1rem; }
.copylist { max-height: 38vh; overflow: auto; border: 1px solid var(--line); border-radius: 10px; padding: 2px 8px; }
.copyrow { padding: 6px 4px; border-radius: 8px; }
.copyrow.sel { background: var(--primary-container); }
.copyrow > span { display: flex; flex-direction: column; min-width: 0; }
.keptcleared { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.keptcleared > div { flex: 1 1 220px; }
.keptcleared ul { margin: 4px 0; padding-left: 18px; }
.wstitle .tag { margin-left: 8px; vertical-align: 2px; font-weight: 600; }
.appfooter { margin-top: 24px; text-align: center; line-height: 1.5; }
.copyright { font-weight: 600; }
.droptip { text-align: center; }
.content.help h4 { margin: 12px 0 4px; font-size: .98rem; }
.content.help p, .content.help li { font-size: .92rem; }
.content.help ul, .content.help ol { padding-left: 20px; margin: 4px 0; }
.content.help code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85em; background: var(--bg); padding: 0 3px; border-radius: 3px; }
.helpsec { scroll-margin-top: 64px; }
.helptoc ol { margin: 6px 0 0; padding-left: 22px; }
.linkbtn { border: 0; background: none; padding: 4px 0; color: var(--primary); text-align: left; cursor: pointer; font-size: .92rem; }
.tablewrap { overflow-x: auto; }
.helptable { border-collapse: collapse; width: 100%; font-size: .85rem; margin: 6px 0; }
.helptable th, .helptable td { border: 1px solid var(--line); padding: 4px 6px; text-align: left; vertical-align: top; }
.helptable th { background: var(--primary); color: var(--on-primary); }
.btn.small { min-height: 32px; padding: 4px 8px; font-size: .85rem; }
.helptoc ol { list-style: none; padding-left: 2px; }
.dlgbtns .btn.danger { background: var(--error); color: var(--surface); padding: 10px 20px; }
/* v0.3: currency drop-down (Settings defaults + AWB step) */
select.cursel { display: block; width: 100%; min-height: 48px; margin-top: 4px; border: 1px solid var(--outline); border-radius: 8px; background: var(--surface, #fff); padding: 0 10px; font: inherit; font-size: 1rem; color: inherit; }
select.cursel:focus { outline: 2px solid var(--primary); outline-offset: 0; }
.prow.wrap > span.muted { white-space: normal; flex: 1 1 60%; }
.prow.wrap > span:last-child { flex: 0 1 auto; white-space: nowrap; }

/* v0.4: comboboxes (known values in a drop-down, typing allowed), needed-but-blank fields in red, online rate, document prompt */
.field.combo { position: relative; }
.comborow { display: flex; align-items: stretch; }
.comborow input { flex: 1 1 auto; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.combobtn { flex: 0 0 auto; min-width: 52px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; cursor: pointer;
  border: 1px solid var(--outline); border-left: 0; border-radius: 0 6px 6px 0; background: var(--secondary-container); color: var(--on-surface); font-size: 1rem; }
.combobtn .cnt { font-size: .7rem; color: var(--muted); }
.combobtn:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.field.open .combobtn { background: var(--primary-container); }
.combolist { position: absolute; left: 0; right: 0; z-index: 30; margin-top: 2px; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0;
  max-height: 300px; overflow-y: auto; background: var(--surface); border: 1px solid var(--outline); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.18); padding: 4px; }
.combolist[hidden] { display: none; }
.combolist .sugglab { padding: 4px 8px; }
.combolist .schip { width: 100%; border: 0; border-radius: 6px; min-height: 44px; padding: 6px 10px; }
.combolist .schip + .schip { border-top: 1px solid var(--line); border-radius: 0; }
.combolist .schip.sel { background: var(--primary-container); }
.combolist .schip.sel .sv::before { content: '✓ '; }
.combolist .schip:hover { background: var(--secondary-container); }
.fsrc { display: block; font-size: .74rem; color: var(--ok); margin: 3px 0 0 2px; }
.fsrc.typed { color: var(--muted); }
.field.missing input, .field.missing .combobtn { border-color: var(--error); background: rgba(179,38,30,.07); }
.field.missing .flabel { color: var(--error); font-weight: 600; }
.field.missing .flabel::after { content: ' · needed'; font-weight: 400; }
.field.missing .fsrc { color: var(--error); }
.field.online input { color: var(--error); font-weight: 600; border-color: var(--error); }
.field.online .flabel, .field.online .fhint { color: var(--error); }
.field.online.confirmed input { background: var(--surface); }
.field.online:not(.confirmed) input { background: rgba(179,38,30,.07); }
.ratemodes { display: flex; flex-direction: column; gap: 2px; margin: 6px 0 4px; }
.ratemodes .radio { display: flex; gap: 10px; align-items: flex-start; padding: 8px; border-radius: 8px; cursor: pointer; }
.ratemodes .radio.sel { background: var(--primary-container); }
.ratemodes .radio.dis { opacity: .55; cursor: default; }
.ratemodes input[type="radio"] { margin-top: 3px; width: 20px; height: 20px; flex: 0 0 auto; }
.ratemodes .rmsub { display: block; font-size: .78rem; color: var(--muted); }
.ratestatus { font-size: .82rem; margin: 6px 0; }
.ratestatus.err { color: var(--error); }
.ratestatus.ok { color: var(--ok); }
.card.onlinerate { border-left: 4px solid var(--error); }
.docprompt .dprow { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--line); }
.docprompt .dprow:first-of-type { border-top: 0; }
.docprompt .dpic { flex: 0 0 26px; height: 26px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem;
  background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.docprompt .dprow.done .dpic { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.docprompt .dprow.todo .dpic { color: var(--error); border-color: var(--error); }
.docprompt .dprow .grow { min-width: 0; }
.docprompt .btn { margin-top: 8px; }
.ocadv { margin-top: 6px; }

/* v0.5: SBU marking (same wording as on every PDF page), top and bottom of the Review and Preview screens */
.sbu { text-align: center; font: 700 12px/1.2 Helvetica, Arial, sans-serif; letter-spacing: .06em; color: #333; padding: 4px 8px; margin: 2px auto 10px; border-top: 1px solid #bbb; border-bottom: 1px solid #bbb; max-width: 640px; }
.sbu.bottom { margin: 10px auto 2px; }
.previewbg .sbu { background: #fff; }
.sbunote { text-align: center; }
/* v0.5.2: other-charge lines read from the AWB; in-form passport scan */
.oclist { margin-top: 10px; }
.ocgroup { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin: 8px 0; }
.octable { width: 100%; border-collapse: collapse; font-size: 14px; margin: 4px 0; }
.octable th, .octable td { text-align: left; padding: 3px 4px; border-bottom: 1px solid var(--line); }
.octable .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.octable tfoot td { border-bottom: none; font-size: 13px; }
.octable tr.octot td { font-weight: 700; border-top: 2px solid var(--line); }
.ppscan { margin: 8px 0 4px; }
.ppscan .row { flex-wrap: wrap; }
/* v0.6: source documents as a vertical list; each name (first 30 characters) opens the original file */
.doclist { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.doclist li { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.doclink { background: none; border: 0; padding: 2px 0; color: var(--primary); text-decoration: underline; cursor: pointer; font: inherit; font-size: .9rem; text-align: left; white-space: nowrap; }
.doclink.b { font-weight: 700; font-size: 1rem; }
.docview { max-width: 100%; max-height: 70vh; display: block; margin: 0 auto; }
.card.needpick { border: 2px solid var(--error, #b3261e); }
.field.fromscan input { background: var(--surface-variant, #eef2f7); }
.dscheck { margin-top: 8px; }
.dstable td, .dstable th { padding: 2px 6px; }
/* v0.6.1: the AWB disagrees with the DS-7600s (the DS-7600 figures are used) */
.awbflag { border: 2px solid #C62828; border-radius: 8px; padding: 10px 12px; margin: 10px 0; background: var(--surface); }
.awbflag-title { font-weight: 700; color: #C62828; margin-bottom: 4px; }
.awbflag-line { font-size: .92rem; margin-top: 2px; }
@media (prefers-color-scheme: dark) { .awbflag { border-color: #EF5350; } .awbflag-title { color: #EF9A9A; } }
/* v0.6.2: draft DS-7600 (amber) and the "replaced" notice */
.draftwarn { border: 2px solid #B26A00; border-radius: 8px; padding: 10px 12px; margin: 10px 0; background: #FFF8E1; color: #5D3A00; }
.draftwarn b { color: #8A5000; }
.draftbadge { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .04em; color: #5D3A00; background: #FFC107; border-radius: 4px; padding: 0 5px; margin-left: 6px; vertical-align: middle; }
.replnote { border-left: 4px solid var(--warn); padding: 8px 10px; margin: 8px 0; background: var(--surface); }
@media (prefers-color-scheme: dark) { .draftwarn { background: #3E2A00; color: #FFE0A3; border-color: #FFB300; } .draftwarn b { color: #FFD54F; } }

/* DS-1878 Helper: compact shipment row cards */
.rowcard .rowhead { font-weight: 600; font-size: .85rem; color: var(--muted); margin-bottom: 2px; }
.rowcard .field { margin: 6px 0; }
.plist .pprow { display: flex; align-items: center; gap: 8px; }
.presetchips { margin-top: 4px; }
.revtable { width: 100%; }
@media print {
  .topbar, .bottombar, .fab, .sbu, .sbunote, .card.info { display: none !important; }
  .previewbg { background: #fff; padding: 0; }
  .page { border: 0; margin: 0; max-width: none; box-shadow: none; }
  .pdfpage { width: 100%; height: auto; max-width: 100%; }
  @page { size: auto; margin: 8mm; }
}