/* VRG Sales - styles. Mobile-first (375 px), then tablet/desktop. Colour tokens follow
   VRG Invoices so the two apps feel like one family. */

:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #fafbfc;
  --border: #dfe3e8;
  --border-strong: #c3cad3;
  --text: #16202c;
  --text-dim: #5d6b7a;
  --text-faint: #8a97a5;
  --accent: #1f5f9e;
  --accent-text: #ffffff;
  --accent-soft: #e8f1fa;
  --ok: #1f7a51;
  --ok-soft: #e5f4ed;
  --warn: #9a5b00;
  --warn-soft: #fdf3e0;
  --amber: #b86e00;
  --danger: #b3261e;
  --danger-soft: #fceceb;
  --paint: #b03a63;
  --paint-soft: #fbe9ef;

  --radius: 10px;
  --shadow: 0 1px 2px rgba(16, 26, 38, 0.06), 0 4px 12px rgba(16, 26, 38, 0.06);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --topbar-h: 54px;
  --tabbar-h: 60px;
  --tap: 44px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14181d;
    --surface: #1c2229;
    --surface-2: #222930;
    --border: #2f3841;
    --border-strong: #414c58;
    --text: #e8edf2;
    --text-dim: #a2b0bf;
    --text-faint: #7b8896;
    --accent: #5aa0e0;
    --accent-text: #0e1319;
    --accent-soft: #1b2b3a;
    --ok: #4fbe8c;
    --ok-soft: #162c23;
    --warn: #e0a850;
    --warn-soft: #2f2617;
    --amber: #e8a94a;
    --danger: #ef7b74;
    --danger-soft: #331d1c;
    --paint: #e87a9e;
    --paint-soft: #331c25;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.3);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
}
body.auth-body { padding-bottom: 0; }
body.modal-open { overflow: hidden; }

button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }
h1 { font-size: 22px; margin: 0; letter-spacing: -0.01em; }
hr { border: 0; border-top: 1px solid var(--border); margin: 4px 0; width: 100%; }
[hidden] { display: none !important; }
.muted { color: var(--text-faint); }
.sub { font-size: 13px; color: var(--text-dim); margin-top: 1px; }
.nowrap { white-space: nowrap; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; } /* a long e-mail or IBAN wraps (SPEC 9) */
.warn-text { color: var(--warn); }
.err-text { color: var(--danger); }
.ok-text { color: var(--ok); }
.ico { width: 22px; height: 22px; flex-shrink: 0; }
.show-sm { display: block; }
.hide-sm { display: none !important; }

/* ------------------------------------------------------------------ shell */

.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  padding-top: calc(8px + env(safe-area-inset-top, 0px));
  min-height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.brand {
  font-weight: 700;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  color: var(--text);
  text-decoration: none;
  font-size: 17px;
}
.brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: var(--accent);
  color: var(--accent-text);
  display: grid;
  place-items: center;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.brand small { display: block; font-weight: 500; font-size: 11px; color: var(--text-faint); letter-spacing: 0.02em; }
.topbar-spacer { flex: 1; }
.who { font-size: 13px; color: var(--text-dim); white-space: nowrap; }

.layout { display: block; padding: 12px; max-width: 1500px; margin: 0 auto; }
.sidebar { display: none; }
.main { min-width: 0; }
.view { min-width: 0; }

/* Bottom tab bar (phones and tablets) */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -2px 10px rgba(16, 26, 38, 0.06);
}
.tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: var(--tabbar-h);
  color: var(--text-dim);
  text-decoration: none;
  font-size: 11.5px;
  font-weight: 600;
  -webkit-tap-highlight-color: transparent;
}
.tab.active { color: var(--accent); }
.tab.active .ico { stroke-width: 2.2; }
.tab-new .ico { color: var(--accent); }
.tab-badge {
  position: absolute;
  top: 6px;
  left: calc(50% + 6px);
  background: var(--warn-soft);
  color: var(--warn);
  border-radius: 10px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 0 6px;
  line-height: 16px;
}

/* ------------------------------------------------------------------ pages & cards */

.page { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.page.narrow { max-width: 860px; }
.page-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between; }
.page-head h1 { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.page-head .btn-back + h1 { flex: 1; }
.intro { margin: 0; color: var(--text-dim); font-size: 14.5px; }
.group-title { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin: 6px 2px 0; display: flex; gap: 8px; align-items: center; }
.group-title .count { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 0 8px; font-size: 12px; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-width: 0;
}
.card-head {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 6px 10px;
  flex-wrap: wrap;
}
.card-head h2 { margin: 0; font-size: 16px; font-weight: 650; }
.card-sub { font-size: 13px; color: var(--text-dim); }
.card-head .head-action { margin-left: auto; }
.card-body { padding: 14px; min-width: 0; }
.card-foot { padding: 12px 14px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 10px; }

.loading { padding: 30px 10px; text-align: center; color: var(--text-dim); }
.empty { padding: 30px 16px; text-align: center; color: var(--text-dim); }
.empty h3 { margin: 0 0 4px; color: var(--text); font-size: 16px; }
.empty p { margin: 0; }

/* ------------------------------------------------------------------ buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 14px;
  min-height: 40px;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover:not(:disabled) { background: var(--surface-2); border-color: var(--text-faint); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.btn-primary:hover:not(:disabled) { filter: brightness(1.08); background: var(--accent); border-color: var(--accent); }
.btn-danger { color: var(--danger); }
.btn-danger:hover:not(:disabled) { background: var(--danger-soft); border-color: var(--danger); }
.btn-danger-solid { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-sm { padding: 4px 10px; min-height: 32px; font-size: 13.5px; }
.btn-big { min-height: 48px; font-size: 16px; padding: 10px 18px; }
.btn-block { width: 100%; }
.btn-back { font-size: 26px; line-height: 1; padding: 2px 10px 6px; min-width: 40px; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.btn-row > .btn { flex: 1 1 auto; }
.btn-row.end { justify-content: flex-end; }
.btn-row.end > .btn { flex: 0 0 auto; }
.icon-btn {
  border: 1px solid transparent;
  background: transparent;
  border-radius: 8px;
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  color: var(--text-dim);
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
}
.icon-btn:hover:not(:disabled) { background: var(--bg); color: var(--text); }
.icon-btn:disabled { opacity: 0.3; cursor: default; }
.icon-btn.danger:hover:not(:disabled) { color: var(--danger); background: var(--danger-soft); }

/* ------------------------------------------------------------------ forms */

.input {
  border: 1px solid var(--border-strong);
  background: var(--surface);
  border-radius: 8px;
  padding: 8px 11px;
  min-height: 42px;
  min-width: 0;
  width: 100%;
  font-size: 16px; /* 16 px keeps iOS from zooming into the field */
}
select.input { padding-right: 28px; }
textarea.input { resize: vertical; line-height: 1.4; }
.input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.input[readonly] { background: var(--surface-2); color: var(--text-dim); }
.input-sm { min-height: 34px; padding: 5px 9px; font-size: 15px; }
.input-big { font-size: 22px; font-weight: 700; letter-spacing: 0.03em; min-height: 50px; font-variant-numeric: tabular-nums; }
.caps { text-transform: uppercase; }
.input.is-invalid, .input.is-error { border-color: var(--danger); background: var(--danger-soft); }
.input.is-warn { border-color: var(--amber); }
.input.is-ok { border-color: var(--ok); }
.input.flash { animation: flash 0.6s ease-out; }
@keyframes flash { from { background: var(--ok-soft); } to { background: var(--surface); } }

.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field > label, .lf > span {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.field > label .opt, .form-section .opt { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--text-faint); }
.opt { font-size: 12px; font-weight: 500; }
.req { color: var(--danger); }
.field.has-error .input { border-color: var(--danger); }
.hint { font-size: 13px; color: var(--text-dim); }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.form-grid .wide { grid-column: 1 / -1; }
.form-section { grid-column: 1 / -1; margin: 8px 0 0; font-size: 13px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; }
.form-errors { flex: 1; color: var(--danger); font-size: 14px; }
.field-error { color: var(--danger); font-size: 13px; }

.check { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; cursor: pointer; min-height: 36px; }
.check input { width: 20px; height: 20px; accent-color: var(--accent); flex-shrink: 0; }
.check.small { font-size: 13px; min-height: 28px; gap: 5px; }
.check.small input { width: 17px; height: 17px; }

.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.search { flex: 1 1 220px; }
.stack > .search { flex: 0 0 auto; } /* in a column the 220 px basis would be its height */
.filter-check { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 2px 12px; }
.seg { display: flex; border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; background: var(--surface); flex: 1 1 100%; }
.seg-btn { flex: 1; border: 0; background: transparent; padding: 8px 6px; min-height: 40px; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--text-dim); }
.seg-btn + .seg-btn { border-left: 1px solid var(--border); }
.seg-btn.on { background: var(--accent-soft); color: var(--accent); }

/* ------------------------------------------------------------------ pills, notices */

.pill { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 20px; white-space: nowrap; background: var(--bg); color: var(--text-dim); vertical-align: 1px; }
.pill.st-draft { background: var(--warn-soft); color: var(--warn); }
.pill.st-issued { background: var(--ok-soft); color: var(--ok); }
.pill.st-void { background: var(--danger-soft); color: var(--danger); text-decoration: line-through; }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.danger { background: var(--danger-soft); color: var(--danger); }
.pill.muted { background: var(--bg); color: var(--text-faint); }

.notice { padding: 11px 14px; border-radius: var(--radius); font-size: 14.5px; border: 1px solid; }
.notice.slim { padding: 8px 12px; font-size: 14px; }
.notice.warn { background: var(--warn-soft); border-color: var(--amber); color: var(--warn); }
.notice.error { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.notice.info { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.notice.ok { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.notice .btn { margin-left: 6px; }
.banner { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 12px; }

.check-list { display: flex; flex-direction: column; gap: 3px; }
.check-list:empty { display: none; }
.ck { font-size: 14px; padding-left: 20px; position: relative; overflow-wrap: anywhere; }
.ck::before { position: absolute; left: 0; top: 0; font-weight: 800; width: 16px; text-align: center; }
.ck.err { color: var(--danger); }
.ck.err::before { content: "✕"; }
.ck.warn { color: var(--warn); }
.ck.warn::before { content: "!"; }
.ck.ok { color: var(--ok); }
.ck.ok::before { content: "✓"; }
.ck.info { color: var(--text-dim); }
.ck.info::before { content: "i"; font-style: italic; font-family: Georgia, serif; }

.spinner {
  width: 14px; height: 14px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  display: inline-block;
  animation: spin 0.7s linear infinite;
  vertical-align: -2px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.toast-stack {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(var(--tabbar-h) + 10px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 70;
  pointer-events: none;
}
.toast {
  /* Taps go through a toast to what is under it (the phone's sticky Keep / Back / Next bar);
     only a toast's own button takes them. */
  pointer-events: none;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 9px 12px;
  box-shadow: var(--shadow);
  font-size: 14.5px;
  max-width: 440px;
  width: 100%;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}
.toast.error { border-left-color: var(--danger); }
.toast button { pointer-events: auto; }

/* ------------------------------------------------------------------ tables */

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
table.grid { width: 100%; border-collapse: collapse; font-size: 14.5px; }
table.grid th {
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 700;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  background: var(--surface-2);
}
table.grid th.num { text-align: right; }
table.grid td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
table.grid tbody tr:last-child td { border-bottom: none; }
table.grid.compact td, table.grid.compact th { padding: 6px 8px; }

/* ------------------------------------------------------------------ modal */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 16, 23, 0.5);
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.modal:focus { outline: none; }
.modal {
  background: var(--surface);
  width: 100%;
  max-height: 92vh;
  max-height: 92dvh;
  border-radius: 14px 14px 0 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.modal-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.modal-head h2 { margin: 0; font-size: 17px; flex: 1; }
.modal-body { padding: 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.modal-foot { padding: 12px 14px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.modal-foot .btn { flex: 1 1 auto; }
.modal.busy .modal-body { opacity: 0.7; }
.modal-text { margin: 0; color: var(--text-dim); }

.issue-summary { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.issue-summary .is-num { font-weight: 800; font-size: 18px; }
.issue-summary .is-total { font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums; }
.issue-block { border-radius: var(--radius); padding: 10px 12px; border: 1px solid; }
.issue-block h3 { margin: 0 0 6px; font-size: 14.5px; }
.issue-block ul { margin: 0; padding-left: 20px; }
.issue-block li { margin: 2px 0; }
.issue-block.err { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.issue-block.warn { background: var(--warn-soft); border-color: var(--amber); color: var(--warn); display: flex; flex-direction: column; gap: 4px; }
.warn-check { align-items: flex-start; color: var(--text); padding: 4px 0; }
.warn-check span { padding-top: 1px; }

/* ------------------------------------------------------------------ type-ahead */

.ta { position: relative; min-width: 0; }
.ta-list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 40;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(16, 26, 38, 0.18);
  max-height: min(55vh, 380px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.ta-item { padding: 9px 12px; cursor: pointer; border-bottom: 1px solid var(--border); min-height: var(--tap); }
.ta-item:last-child { border-bottom: 0; }
.ta-item.active, .ta-item:hover { background: var(--accent-soft); }
/* The text has changed since this list was searched: Enter searches again before picking. */
.ta-list.ta-stale .ta-item { opacity: 0.55; }
.ta-list.ta-stale .ta-item.active { background: transparent; }
.ta-main { font-size: 15px; overflow-wrap: anywhere; }
.ta-sub { font-size: 12.5px; color: var(--text-dim); margin-top: 1px; }
.ta-empty { padding: 10px 12px; color: var(--text-dim); font-size: 14px; }
.ta-busy::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 14px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  pointer-events: none;
}
.ta-clear {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--text-faint);
  width: 34px;
  height: 34px;
  border-radius: 8px;
  cursor: pointer;
}
.ta-clear:hover { background: var(--bg); color: var(--danger); }

/* ------------------------------------------------------------------ lists */

.inv-list, .rec-list { display: flex; flex-direction: column; overflow: hidden; }
.inv-row, .rec-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  min-height: 56px;
}
.inv-row:last-child, .rec-row:last-child { border-bottom: 0; }
.inv-row:hover, .rec-row:hover { background: var(--surface-2); }
.inv-main, .rec-main { flex: 1; min-width: 0; }
.inv-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inv-num { font-weight: 700; font-variant-numeric: tabular-nums; }
.inv-date { color: var(--text-dim); font-size: 14px; font-variant-numeric: tabular-nums; }
.inv-who { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-vessel { font-weight: 600; }
.inv-client { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-total { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.rec-main .muted { font-size: 13.5px; overflow-wrap: anywhere; }
.rec-side { text-align: right; font-size: 13.5px; white-space: nowrap; }
.more-row { display: flex; justify-content: center; }

.copy-list { display: flex; flex-direction: column; gap: 6px; }
.copy-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--border); }
.copy-row:last-child { border-bottom: 0; }
.copy-what { flex: 1; min-width: 0; }
.copy-what .muted { font-size: 13.5px; overflow-wrap: anywhere; }

.more-list { display: flex; flex-direction: column; overflow: hidden; }
.more-item { display: flex; align-items: center; gap: 12px; padding: 14px; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; font-weight: 600; min-height: 52px; }
.more-item:last-child { border-bottom: 0; }
.more-item span:nth-child(2) { flex: 1; }
.more-item .ico { color: var(--accent); }
.chev { color: var(--text-faint); font-size: 22px; }

/* products */
.prod-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.prod-row:last-child { border-bottom: 0; }
.prod-row.missing { background: var(--warn-soft); }
.prod-main { flex: 1; min-width: 0; color: var(--text); text-decoration: none; }
.prod-main .muted { font-size: 13px; }
.prod-desc { font-size: 13.5px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.prod-weight { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 11px; text-transform: uppercase; color: var(--text-faint); font-weight: 700; flex: 0 0 84px; }
.prod-weight .input { width: 84px; text-align: right; }

/* ------------------------------------------------------------------ invoice editor */

.ed { display: flex; flex-direction: column; gap: 12px; }
.ed-bar {
  position: sticky;
  top: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 6px 10px;
  flex-wrap: wrap;
  margin: -12px -12px 0;
  padding: 8px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(16, 26, 38, 0.05);
}
.ed-bar-title { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px; overflow: hidden; } /* basis 0: it shrinks before the bar wraps */
.ed-bar-title strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; }
.ed-bar-total { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.save-state { font-size: 13px; white-space: nowrap; color: var(--text-dim); display: flex; align-items: center; gap: 6px; }
.ss.ok { color: var(--ok); }
.ss.err { color: var(--danger); font-weight: 700; }
.btn-issue { min-height: 38px; }
.ed-grid { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ed-main, .ed-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ref-side { display: none; }
.save-line { font-size: 14px; }
.readiness .ready-list summary { cursor: pointer; font-size: 14px; font-weight: 600; }
.readiness .ck { margin-top: 3px; }

.num-row { display: flex; align-items: center; gap: 8px; }
.num-row .input { flex: 1; }
.num-icon { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 18px; flex-shrink: 0; }
.num-icon:empty { display: none; }
.num-icon.ok { background: var(--ok-soft); color: var(--ok); }
.num-icon.warn { background: var(--warn-soft); color: var(--warn); }
.num-icon.err { background: var(--danger-soft); color: var(--danger); }

.vessel-grid { grid-template-columns: 88px minmax(0, 1fr); }
.vessel-grid .field:not(.f-prefix):not(.f-vname) { grid-column: auto; }
.vessel-grid .field.wide { grid-column: 1 / -1; }

.print-preview, .dn-preview { background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: 8px; padding: 8px 10px; font-size: 14px; overflow-wrap: anywhere; }
.print-preview:empty { display: none; }
.pp-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); margin-top: 2px; }
.dn-list { margin: 4px 0 6px; padding-left: 22px; }
.dn-list li { margin: 2px 0; }
.dn-qty { color: var(--text-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* lines */
.lines { display: flex; flex-direction: column; gap: 10px; }
.empty-lines { padding: 14px; text-align: center; color: var(--text-dim); border: 1px dashed var(--border-strong); border-radius: var(--radius); }
.line {
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 8px 10px 8px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.line.kind-service { border-left-color: var(--text-faint); }
.line.kind-surcharge { border-left-color: var(--paint); }
.line.active { box-shadow: 0 0 0 2px var(--accent-soft); }
.line.below { border-color: var(--amber); background: var(--warn-soft); }
.line-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.line-no { flex: 0 0 auto; min-width: 26px; height: 26px; border-radius: 13px; background: var(--bg); color: var(--text-dim); font-weight: 800; font-size: 13px; display: grid; place-items: center; }
.line-prod { flex: 1; min-width: 0; }
.line-prod .input { font-weight: 700; padding-right: 36px; text-transform: uppercase; }
.line-prod.linked .input { border-color: var(--ok); }
.line-prod.unlinked .input { border-color: var(--amber); border-style: dashed; }
.line-kind { flex: 1; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); }
.line-tools { display: flex; flex: 0 0 auto; }
.line-tools .icon-btn { width: 34px; height: 34px; }
.line-desc { min-height: 42px; overflow: hidden; }
.line-nums { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr) minmax(0, 1.1fr); gap: 6px; align-items: end; }
.lf { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lf .input { padding-left: 8px; padding-right: 8px; text-align: right; font-variant-numeric: tabular-nums; }
.lf select.input { text-align: left; padding-right: 4px; }
.lf.sum output { min-height: 42px; display: flex; align-items: center; justify-content: flex-end; font-weight: 800; font-variant-numeric: tabular-nums; padding-right: 2px; }
.lf .input.price { font-weight: 700; }
.line-ref { display: flex; flex-direction: column; gap: 5px; }
.line-ref:empty { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 20px;
  padding: 5px 12px;
  min-height: 34px;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  -webkit-tap-highlight-color: transparent;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chip:hover { filter: brightness(0.97); }
.chip:active { transform: translateY(1px); }
.chip-sm { min-height: 30px; padding: 3px 10px; font-size: 13.5px; }
.ref-notes { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13.5px; }
.margin.pos { color: var(--ok); font-weight: 600; }
.margin.neg { color: var(--amber); font-weight: 700; }
.below-note { color: var(--amber); font-weight: 800; }
.below-note::before { content: "▲ "; }
.line-info { font-size: 13px; color: var(--text-dim); display: flex; flex-wrap: wrap; gap: 2px 6px; align-items: center; }
.line-info:empty { display: none; }
.line-info .dot { color: var(--border-strong); }
.line-info .needs { color: var(--text-faint); font-style: italic; }
.line-foot { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.kind-select { width: auto; min-height: 32px; font-size: 13.5px; padding: 3px 26px 3px 8px; color: var(--text-dim); }
.line-more { flex: 1 1 100%; }
.line-more summary { cursor: pointer; font-size: 13.5px; color: var(--accent); font-weight: 600; padding: 4px 0; }
.more-body { padding-top: 6px; }
.quick-add { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.quick-add .btn { flex: 1 1 calc(50% - 8px); white-space: normal; text-align: center; line-height: 1.2; }
.quick-add .btn-primary { flex-basis: 100%; }

/* price reference detail */
.ref-sec h4 { margin: 8px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); }
.ref-sec:first-child h4 { margin-top: 0; }
.ref-sec p { margin: 0; font-size: 13.5px; }
.ref-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ref-table td { padding: 4px 0; border-bottom: 1px dashed var(--border); vertical-align: middle; }
.ref-table tr:last-child td { border-bottom: 0; }

/* totals */
.totals { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.totals > div { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.totals dt { color: var(--text-dim); font-weight: 600; }
.totals dd { margin: 0; font-weight: 700; }
.totals .grand { border-top: 1px solid var(--border); padding-top: 6px; margin-top: 2px; font-size: 18px; }
.totals .grand dt { color: var(--text); font-weight: 800; }
.totals .grand dd { font-weight: 800; }

/* weights */
.w-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.w-stat { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; }
.w-stat span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); }
.w-stat strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.w-breakdown { margin: 8px 0; }
.w-lines { margin-top: 8px; }
.w-lines tr.missing td { background: var(--warn-soft); }
.w-desc { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.missing-box { border: 1px solid var(--amber); background: var(--warn-soft); border-radius: var(--radius); padding: 10px 12px; margin: 8px 0; display: flex; flex-direction: column; gap: 8px; }
.missing-head { color: var(--warn); font-weight: 700; font-size: 14px; }
.missing-row { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 14px; }
.missing-what { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.missing-edit { display: flex; gap: 6px; align-items: center; }
.missing-edit .input { width: 110px; }
.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* read-only document view */
.doc-view .card-body { display: flex; flex-direction: column; gap: 14px; }
.doc-head { display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between; }
.doc-title { font-size: 20px; font-weight: 800; }
.doc-sub { font-weight: 700; font-size: 14px; }
.doc-dates { margin: 0; display: grid; grid-template-columns: auto auto; gap: 1px 10px; font-size: 14.5px; }
.doc-dates > div { display: contents; }
.doc-dates dt { color: var(--text-dim); }
.doc-dates dd { margin: 0; font-variant-numeric: tabular-nums; }
.doc-label { font-size: 13px; color: var(--text-dim); }
.doc-object { text-align: center; font-weight: 700; }
.doc-lines td.desc { min-width: 160px; }
.doc-logistics { font-size: 14px; color: var(--text-dim); display: flex; flex-direction: column; gap: 2px; }
.ed-ro .ed-side { order: -1; }

/* ------------------------------------------------------------------ prices wizard */

.steps { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; font-size: 13px; font-weight: 700; }
.steps li { padding: 3px 10px; border-radius: 20px; background: var(--bg); color: var(--text-faint); }
.steps li.past { color: var(--ok); background: var(--ok-soft); }
.steps li.now { color: var(--accent-text); background: var(--accent); }
.dropzone {
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 22px 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  cursor: pointer;
  background: var(--surface-2);
}
.dropzone:hover { border-color: var(--accent); background: var(--accent-soft); }
.dropzone input { max-width: 100%; font-size: 14px; }
.sample { max-height: 320px; overflow: auto; border: 1px solid var(--border); border-radius: 8px; }
.sample td { white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.col-code { background: var(--accent-soft) !important; }
.col-price { background: var(--ok-soft) !important; }
.col-map { background: var(--accent-soft) !important; }
.pv-sec summary { cursor: pointer; font-weight: 700; padding: 6px 0; }

/* Prices / Weights tabs and the weights import (SPEC §12.2) */
.page-tabs { flex: 0 0 auto; max-width: 420px; }
.page-tabs .seg-btn { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.w-summary.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wi-table td { vertical-align: top; }
.wi-prod { width: 38%; }
.wi-status { margin: 3px 0; line-height: 1.8; }
.wf-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.wf-label { color: var(--text-dim); font-weight: 600; }
.wf-list .wf-same { color: var(--text-faint); }
.wf-list .wf-flag { color: var(--warn); }
.wf-list .wf-bad { color: var(--danger); }
.wf-note { font-style: italic; }
.plain-list { margin: 0; padding-left: 18px; font-size: 14px; }
tr.undone td { color: var(--text-faint); }

/* Weight source badges (SPEC §12.1) */
.wbadge { display: inline-block; font-size: 11px; font-weight: 700; line-height: 1.5; padding: 0 7px; border-radius: 20px; white-space: nowrap; text-transform: none; letter-spacing: 0; vertical-align: 1px; background: var(--bg); color: var(--text-dim); border: 1px solid var(--border); }
.wbadge.ws-factory { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.wbadge.ws-manual { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.wbadge.ws-exact { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.wbadge.ws-sds { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.wbadge.ws-estimate { background: var(--warn-soft); color: var(--warn); border-color: var(--amber); border-style: dashed; }
.wbadge.ws-missing { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.w-sources:empty { display: none; }
.w-src-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14px; margin: 6px 0; }
.w-src-line.warn .w-src-note { color: var(--warn); font-weight: 600; }
.w-src-note { flex: 1 1 220px; }
.ws-count { white-space: nowrap; }
.head-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.muted.small, .small { font-size: 12px; }

/* Editor history (read-only, collapsed) */
.history-card > summary { cursor: pointer; list-style: none; }
.history-card > summary::-webkit-details-marker { display: none; }
.history-card > summary h2::before { content: "▸ "; color: var(--text-faint); }
.history-card[open] > summary h2::before { content: "▾ "; }
.history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.history .ev-at { color: var(--text-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ev-more summary { cursor: pointer; color: var(--warn); font-size: 13px; }
.ev-more ul { margin: 4px 0 0; padding-left: 18px; font-size: 13px; color: var(--text-dim); }
@media (min-width: 560px) {
  .w-summary.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 559px) {
  /* Six columns on a phone: tighter cells so the source badge fits without scrolling. */
  table.grid.compact.w-lines td, table.grid.compact.w-lines th { padding: 6px 4px; }
  .w-lines .w-desc { max-width: 96px; }
  /* "Delivery notes" (§20.6) is the longest source: it may take two lines rather than push the
     table into a sideways scroll. */
  .w-lines .wbadge { white-space: normal; line-height: 1.25; padding: 1px 6px; text-align: center; }
}

/* ------------------------------------------------------------------ documents (SPEC 13) */

.dbadge { display: inline-block; min-width: 38px; text-align: center; font-size: 11px; font-weight: 800; line-height: 1.6; padding: 0 6px; border-radius: 5px; letter-spacing: 0.02em; vertical-align: 1px; white-space: nowrap; background: var(--bg); color: var(--text-dim); border: 1px solid var(--border); }
.dbadge.dt-SDS { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.dbadge.dt-TDS { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.dbadge.dt-CERT { background: var(--ok-soft); color: var(--ok); border-color: transparent; }

.lib-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 10px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.lib-row:last-child { border-bottom: 0; }
.lib-row.inactive { background: var(--surface-2); }
.lib-row.inactive .lib-title { color: var(--text-dim); }
.lib-main { flex: 1 1 220px; min-width: 0; }
.lib-line1 { overflow-wrap: anywhere; }
.lib-title { font-weight: 700; }
.lib-meta, .lib-codes { font-size: 13px; color: var(--text-dim); overflow-wrap: anywhere; }
.lib-file { color: var(--text-faint); }
.lib-acts { display: flex; flex-wrap: wrap; gap: 6px; flex: 0 1 auto; }
.old-revs > summary { cursor: pointer; font-weight: 600; color: var(--text-dim); padding: 6px 0; }
.link-list { display: flex; flex-wrap: wrap; gap: 6px; }
.link-chip { display: inline-flex; align-items: center; gap: 2px; padding-left: 10px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface-2); font-weight: 600; font-size: 14px; }
.link-chip .icon-btn { width: 30px; height: 30px; }
.link-add { display: flex; gap: 6px; margin-top: 8px; }
.link-add .input { flex: 1 1 auto; min-width: 0; }
.modal-foot .spacer { flex: 1 1 auto; }

/* Invoice attachments: tick, what it is, tools. On a phone the tools wrap under the text. */
.att-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.att-list:empty { display: none; }
.att-row { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px 8px; align-items: start; padding: 8px 10px 8px 4px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.att-row:last-child { border-bottom: 0; }
.att-row.on { background: var(--surface); }
.att-row.bad { background: var(--danger-soft); }
.att-row.ro { grid-template-columns: minmax(0, 1fr); padding-left: 12px; }
.att-check { display: flex; align-items: center; justify-content: center; min-height: 40px; cursor: pointer; }
.att-check input { width: 20px; height: 20px; }
.att-main { min-width: 0; padding-top: 6px; }
.att-row.ro .att-main { padding-top: 0; }
.att-row:not(.on) .att-title { color: var(--text-dim); }
.att-title { font-weight: 600; overflow-wrap: anywhere; }
.att-meta { font-size: 13px; color: var(--text-dim); overflow-wrap: anywhere; }
.att-tools { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.att-row.ro .att-tools { grid-column: 1; margin-top: 4px; }
.att-more > summary { cursor: pointer; font-weight: 600; color: var(--accent); padding: 6px 0; }
.att-more[open] > summary { margin-bottom: 6px; }
.att-gap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 8px 12px; border-radius: var(--radius); background: var(--warn-soft); color: var(--warn); font-size: 14px; }
.att-gap a { color: inherit; }
.att-gap + .att-gap { margin-top: 6px; }
.mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }
@media (min-width: 700px) {
  .att-row { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .att-tools { grid-column: 3; align-self: center; }
  .att-row.ro { grid-template-columns: minmax(0, 1fr) auto; }
  .att-row.ro .att-tools { grid-column: 2; margin-top: 0; }
}

/* ------------------------------------------------------------------ settings */

.toc { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
.toc a { flex: 0 0 auto; padding: 6px 12px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); text-decoration: none; font-weight: 600; font-size: 14px; }
.sub-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 10px; background: var(--surface-2); }
.sub-card h3 { margin: 0; font-size: 15px; }
.sub-card h3 .muted { font-weight: 500; font-size: 13px; }
.bank-lines { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.bank-line { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto auto; gap: 6px; align-items: center; }
.add-new summary { cursor: pointer; font-weight: 700; color: var(--accent); padding: 6px 0; }
.add-new[open] summary { margin-bottom: 8px; }
.tare-table { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; max-width: 360px; }
.tare-row { display: grid; grid-template-columns: 1fr 1fr 36px; gap: 6px; align-items: center; }
.tare-head span { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text-faint); }

/* ------------------------------------------------------------------ auth */

.auth-page { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 16px; }
.auth-card { width: 100%; max-width: 400px; }
.auth-card .card-body { display: flex; flex-direction: column; gap: 14px; padding: 20px; }
.auth-head { text-align: center; }
.auth-head .brand { justify-content: center; font-size: 21px; }
.auth-head p { color: var(--text-dim); font-size: 14px; margin: 8px 0 0; }

.doc-lines .c-calc { display: none; }

/* The product drop-down on a line is as wide as the line, not the narrow code field. */
.line-prod .ta-list { left: -32px; right: auto; width: calc(100vw - 56px); max-width: 520px; }

/* Phones: one compact editor bar (number, total, save state, Issue) instead of two rows. */
@media (max-width: 559px) {
  .ed-bar { gap: 6px; padding: 6px 10px; }
  .ed:not(.ed-ro) .ed-bar .pill, .ed-bar .bar-word { display: none; }
  /* Issued lines as two-row blocks: number + description, then qty x price and the sum. */
  .doc-lines thead { display: none; }
  .doc-lines tr { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; border-bottom: 1px solid var(--border); padding: 6px 0; }
  .doc-lines tbody tr:last-child { border-bottom: 0; }
  .doc-lines td { border: 0 !important; padding: 1px 4px !important; }
  .doc-lines td.c-no { grid-row: 1; grid-column: 1; color: var(--text-faint); }
  .doc-lines td.desc { grid-row: 1; grid-column: 2 / 4; min-width: 0; }
  .doc-lines td.c-qty, .doc-lines td.c-unit, .doc-lines td.c-price { display: none; }
  .doc-lines td.c-calc { display: block; grid-row: 2; grid-column: 2; color: var(--text-dim); font-variant-numeric: tabular-nums; }
  .doc-lines td.c-sum { grid-row: 2; grid-column: 3; font-weight: 700; }
  .ed-bar-total { font-size: 15px; }
  .save-state { font-size: 12.5px; }
  .btn-issue { padding: 6px 10px; }
  .btn-back { padding: 2px 6px 6px; min-width: 32px; }
  /* A line: number and tools on the first row, the product picker the full width under them
     (otherwise a code like "CEP 3900" is cut off under the unlink button). */
  .line-top { flex-wrap: wrap; row-gap: 4px; }
  .line-top > .line-prod { order: 5; flex: 1 1 100%; }
  .line-top > .line-tools { margin-left: auto; }
  .line-prod .ta-list { left: 0; width: 100%; }
}
/* Narrow phones: the bar's Issue button reads "23 open" (its text stays "23 not checked"), so the
   invoice number keeps room beside the total and the save state. */
@media (max-width: 419px) {
  .ed-bar .btn-issue .nc-long { display: none; }
  .ed-bar .btn-issue[data-open]::after { content: " open"; }
}
/* The phone's guided editor: toasts stand above its sticky Keep / Back / Next bar. */
@media (max-width: 999px) {
  body:has(.guided-one) .toast-stack { bottom: calc(var(--tabbar-h) + 84px + env(safe-area-inset-bottom, 0px)); }
}

/* ------------------------------------------------------------------ touch sizes */

@media (pointer: coarse) {
  /* SPEC 9: every touch target at least 44 px high. */
  .btn, .input, .seg-btn { min-height: var(--tap); }
  .btn-sm { min-height: var(--tap); }
  .icon-btn, .line-tools .icon-btn, .link-chip .icon-btn { width: var(--tap); height: var(--tap); }
  .chip { min-height: var(--tap); }
  .kind-select { min-height: var(--tap); }
  .check, .check.small { min-height: var(--tap); }
  .att-check { min-height: var(--tap); min-width: var(--tap); }
  .btn-back { min-width: var(--tap); min-height: var(--tap); }
  .prod-main { min-height: var(--tap); display: flex; flex-direction: column; justify-content: center; }
  .brand { min-height: var(--tap); }
  .ta-clear { width: var(--tap); height: var(--tap); right: 0; }
  .line-prod .input { padding-right: 46px; }
}

/* ------------------------------------------------------------------ wider phones / tablets */

@media (min-width: 560px) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vessel-grid { grid-template-columns: 96px minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
  .seg { flex: 0 0 auto; }
  .seg-btn { padding: 8px 14px; }
  .quick-add .btn, .quick-add .btn-primary { flex: 0 0 auto; }
  .modal-backdrop { align-items: center; padding: 20px; }
  .modal { max-width: 520px; border-radius: 14px; max-height: 88vh; }
  .modal.wide { max-width: 680px; }
  .modal-foot .btn { flex: 0 0 auto; }
  .toast-stack { left: auto; right: 18px; align-items: flex-end; width: 380px; }
  .w-desc { max-width: 280px; }
  .hide-sm { display: revert !important; }
  table .hide-sm { display: table-cell !important; }
  .show-sm { display: none; }
}

/* ------------------------------------------------------------------ desktop: sidebar, no tab bar */

@media (min-width: 900px) {
  body { padding-bottom: 0; }
  .topbar { position: sticky; top: 0; z-index: 35; padding: 8px 20px; }
  .tabbar { display: none; }
  .layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 18px; padding: 18px 20px; align-items: start; }
  .sidebar { display: flex; flex-direction: column; gap: 3px; position: sticky; top: calc(var(--topbar-h) + 18px); }
  .nav-group { display: flex; flex-direction: column; gap: 3px; }
  .nav-group-label { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-faint); padding: 14px 10px 4px; }
  .nav-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid transparent;
    color: var(--text-dim);
    font-weight: 550;
    text-decoration: none;
    font-size: 15px;
  }
  .nav-item .ico { width: 19px; height: 19px; }
  .nav-item:hover { background: var(--surface); color: var(--text); }
  .nav-item.active { background: var(--surface); border-color: var(--border); color: var(--text); font-weight: 650; box-shadow: var(--shadow); }
  .nav-item.active .ico { color: var(--accent); }
  .nav-count { margin-left: auto; font-size: 12px; background: var(--warn-soft); color: var(--warn); border-radius: 20px; padding: 0 8px; font-weight: 700; }
  .toast-stack { bottom: 18px; }
  .ed-bar { top: var(--topbar-h); margin: 0; border: 1px solid var(--border); border-radius: var(--radius); }
  .btn-back { display: none; }
  .page-head .btn-back { display: inline-flex; }
  .ed-ro .ed-side { order: 0; }
}

/* ------------------------------------------------------------------ desktop editor: two columns */

@media (min-width: 1000px) {
  .ed-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
  .ed-side { position: sticky; top: calc(var(--topbar-h) + 70px); max-height: calc(100vh - var(--topbar-h) - 84px); overflow-y: auto; padding-bottom: 4px; }
  .ref-side { display: block; }
  .line-more { display: none; }
}

@media (min-width: 1300px) {
  .ed-grid { grid-template-columns: minmax(0, 1fr) 380px; }
  .layout { grid-template-columns: 210px minmax(0, 1fr); }
}

@media print {
  .topbar, .sidebar, .tabbar, .ed-bar, .ed-side, .toast-stack { display: none !important; }
  body { background: #fff; padding: 0; }
}

/* ------------------------------------------------------------------ guided fill (SPEC 16, 17) */
/* Every field is looked at, in order: a progress bar with one chip per step, a ✓ / ○ marker on
   each step, and Keep / Next / Back in the current step. Phones (< 1000 px) show one step at a
   time (.guided-one); desktops keep the whole form and light up the current step. */

.guide { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.g-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.g-count { font-weight: 700; font-size: 14px; white-space: nowrap; }
.g-bar { flex: 1; min-width: 50px; height: 8px; -webkit-appearance: none; appearance: none; border: 0; border-radius: 4px; background: var(--bg); overflow: hidden; }
.g-bar::-webkit-progress-bar { background: var(--bg); border-radius: 4px; }
.g-bar::-webkit-progress-value { background: var(--ok); border-radius: 4px; }
.g-bar::-moz-progress-bar { background: var(--ok); border-radius: 4px; }
.g-mode { display: none; flex: 0 0 auto; }
.g-chips { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 3px; scrollbar-width: thin; min-width: 0; }
.gchip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 3px 10px; border: 1px solid var(--border-strong); border-radius: 16px; background: var(--surface); color: var(--text-dim); font-size: 12.5px; font-weight: 650; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gchip.ok { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); }
.gchip.cur { border-color: var(--accent); background: var(--accent); color: var(--accent-text); }
.gc-mark { font-weight: 900; }

.step { min-width: 0; scroll-margin-top: 140px; }
/* After Keep, focus moves to the next step itself (not its Keep): highlighted already by .cur. */
.step[tabindex="-1"]:focus { outline: none; }
.step[tabindex="-1"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.steps-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.steps-grid > .step { display: flex; flex-direction: column; gap: 5px; padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; }
.steps-grid > .step.cur { border-color: var(--accent); background: var(--accent-soft); }
.step-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 13.5px; font-weight: 700; color: var(--text); }
.step-head .opt { color: var(--text-faint); }
.step-mark { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--border-strong); display: inline-grid; place-items: center; font-size: 12px; font-weight: 900; line-height: 1; color: var(--text-faint); background: var(--surface); }
.step-mark.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.step-mark.na { border-style: dashed; }
.card-head > .step-mark { margin-right: -2px; }
.card.step.cur { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow); }
.card.step.na { opacity: 0.8; }
.line.step.cur { box-shadow: 0 0 0 2px var(--accent); }
.line-top > .step-mark { width: 18px; height: 18px; font-size: 11px; }

.step-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.step-actions[hidden] { display: none; }
.card > .step-actions { margin: 0; padding: 10px 14px; border-top: 1px solid var(--border); }
.step-actions .btn { flex: 1 1 auto; }
.step-actions .step-keep { flex: 2 1 40%; }
.step-actions .step-uncheck { flex: 0 0 auto; }
.line-add { display: none; margin-top: 10px; }
.line-add .btn { width: 100%; }
.linkish { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }

/* Payment to (SPEC 16): one big button per active account, the printed block underneath. */
.pay-seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 6px; }
.pay-btn { min-height: 52px; padding: 6px 10px; border: 1.5px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 15px; font-weight: 700; cursor: pointer; overflow-wrap: anywhere; -webkit-tap-highlight-color: transparent; }
.pay-btn:hover { border-color: var(--text-faint); }
.pay-btn.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.bank-preview { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border: 1px dashed var(--border-strong); border-radius: 8px; background: var(--surface-2); font-size: 13.5px; overflow-wrap: anywhere; }
.bank-preview:empty { display: none; }
.bp-l { color: var(--text-dim); }
.bp-red { margin: 3px 0; padding: 4px 7px; border: 1.5px solid #b00000; border-radius: 4px; color: #b00000; }
.bp-red .bp-l { color: inherit; font-weight: 700; }
.pay-foot { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; justify-content: space-between; }
.pay-cur { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-dim); }
.pay-cur .input { width: auto; }
@media (prefers-color-scheme: dark) {
  .bp-red { border-color: var(--danger); color: var(--danger); }
}

/* Review (the last step) */
.rv-title { font-size: 18px; font-weight: 800; letter-spacing: 0.02em; }
.rv-sum { display: flex; flex-direction: column; gap: 4px; }

@media (min-width: 560px) {
  .steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps-grid > .step.wide { grid-column: 1 / -1; }
}

/* Phones and small tablets: one step at a time. */
@media (max-width: 999px) {
  .g-mode { display: inline-flex; }
  .guided-one .ed-main > .card:not(.has-cur), .guided-one .ed-side { display: none; }
  .guided-one .step:not(.cur) { display: none; }
  .guided-one .steps-grid { grid-template-columns: minmax(0, 1fr); }
  .guided-one .steps-grid > .step.cur { padding: 0; border: 0; background: transparent; }
  .guided-one .lines-card.cur-line .line-add { display: block; }
  .guided-one .step-actions {
    position: sticky;
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
    z-index: 5;
    margin: 10px -2px 0;
    padding: 8px 2px;
    background: var(--surface);
  }
  .guided-one .card > .step-actions { margin: 0; padding: 10px 14px; }
  .guided-one .step-actions .btn { min-height: 48px; font-size: 16px; }
}
@media (max-width: 899px) and (min-width: 0) {
  .guided-one .step-actions { box-shadow: 0 -6px 10px -8px rgba(16, 26, 38, 0.25); }
}
@media (min-width: 900px) and (max-width: 999px) {
  .guided-one .step-actions { bottom: 0; }
}
@media (min-width: 1000px) {
  .g-chips { flex-wrap: wrap; overflow: visible; }
}

/* ------------------------------------------------------------------ touch targets, last

   SPEC 9 (stress round 1): every touch target at least 44 px high. These come after every base
   rule above so they win over them (same specificity, later in the file). */
@media (pointer: coarse) {
  .gchip { min-height: var(--tap); }
  .toc a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 12px; }
  .lib-codes a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 6px; }
  .line-more summary, .readiness .ready-list summary { min-height: var(--tap); padding-block: 12px; }
  .linkish { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); min-width: var(--tap); padding: 0 4px; }
  summary { min-height: var(--tap); }
  summary:not(.card-head) { padding-block: 12px; }
}

/* ================================================================== step 2 (SPEC §19–§22), editor UI
   Line groups and the quick-add order (§19), the set composition under a kit line and per-component
   weights (§20), the IMO/IMDG card (§21), and the live preview (§22): a sticky third column at
   >= 1280 px, a tab beside the price reference at 1000-1279 px, a strip at the bottom of a phone. */

/* §19 quick-add: products | delivery costs | extra costs | free line */
.quick-add { flex-direction: column; flex-wrap: nowrap; }
.qa-group { display: flex; flex-wrap: wrap; gap: 8px; }
.qa-group .btn { flex: 1 1 calc(50% - 8px); }
.quick-add .qa-products .btn { flex: 1 1 100%; }
.qa-order { margin-top: 6px; }
@media (min-width: 560px) {
  .quick-add { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 0; }
  .qa-group { flex: 0 0 auto; padding: 0 10px; }
  .qa-group:first-child { padding-left: 0; }
  .qa-group + .qa-group { border-left: 1px solid var(--border); }
  .quick-add .qa-group .btn, .quick-add .qa-products .btn { flex: 0 0 auto; }
}
.empty-lines { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.empty-pick-label { font-weight: 700; font-size: 14px; color: var(--text); }
.empty-lines .line-prod { flex: 0 0 auto; }

/* §20 a kit line: what the set is made of, "Sold as set", the hardener */
.line-kit { display: flex; flex-direction: column; gap: 6px; padding: 7px 9px; border: 1px dashed var(--border-strong); border-radius: 8px; background: var(--surface-2); font-size: 13.5px; min-width: 0; }
.line-kit[hidden] { display: none; }
/* SPEC §20.10: the pack size sold on a goods line (blank = the product's). */
.line-pack { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-dim); }
.line-pack[hidden] { display: none; }
.line-pack .input { width: 5.5em; text-align: right; }
.kit-comp { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.kit-ctrl { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.kit-hard { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-dim); min-width: 0; max-width: 100%; }
.kit-hard .input { width: auto; max-width: 100%; min-width: 0; }
.kit-rows { font-size: 12.5px; }
.field-msg { font-size: 13px; margin-top: 3px; }
.w-lines tr.w-base td { border-bottom-style: dotted; border-bottom-color: var(--border-strong); }
.w-role { font-size: 11.5px; font-weight: 600; color: var(--text-faint); }
.dn-list li.dn-hard { color: var(--text-dim); }
.dn-total { font-size: 14px; margin: 2px 0 6px; }
.wbadge.ws-dn { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); border-style: dotted; }

/* §21 the IMO/IMDG card */
.imdg-card.no-dg .card-body > :not(.imdg-inc):not([data-o="imdg-why"]) { display: none; }
.imdg-issues { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.imdg-fix { margin-left: 6px; font-weight: 700; white-space: nowrap; color: var(--accent); }
.imdg-entries ol { margin: 4px 0; padding-left: 20px; font-size: 13.5px; display: flex; flex-direction: column; gap: 3px; }
.imdg-entries .imdg-eline { display: block; }
.imdg-entries .imdg-eline + .imdg-eline { padding-left: 10px; }
.imdg-fields > summary { cursor: pointer; font-weight: 700; color: var(--accent); padding: 4px 0; }
.imdg-fields .form-grid { margin-top: 6px; }

/* §22 the live preview: the panel (the same element in every place) */
.pv-panel { display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 0; }
.pv-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pv-tabs { display: flex; gap: 4px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.pv-tab { flex: 0 0 auto; min-height: 32px; padding: 3px 12px; border: 1px solid var(--border-strong); border-radius: 16px; background: var(--surface); color: var(--text-dim); font-size: 13px; font-weight: 650; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pv-tab.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
/* SPEC §9: 44 px touch targets on every coarse pointer (after the base rule, which it overrides). */
@media (pointer: coarse) { .pv-tab { min-height: var(--tap); } }
.pv-busy { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-faint); white-space: nowrap; }
.pv-busy .spinner { width: 11px; height: 11px; }
.pv-close { display: none; flex: 0 0 auto; }
.pv-panel.in-viewer .pv-close { display: inline-flex; }
.pv-note:empty { display: none; }
.pv-note ul { margin: 4px 0 0; padding-left: 18px; }
.pv-pages { flex: 1 1 auto; min-height: 120px; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 10px; padding: 4px; border-radius: 8px; background: var(--bg); overscroll-behavior: contain; }
.pv-page { position: relative; flex: 0 0 auto; width: 100%; background: #fff; box-shadow: 0 1px 3px rgba(16, 26, 38, 0.22); }
.pv-canvas { display: block; width: 100%; height: 100%; }
.pv-empty { padding: 28px 10px; text-align: center; color: var(--text-faint); font-size: 14px; }
.pv-hl { position: absolute; pointer-events: none; background: rgba(255, 210, 0, 0.26); outline: 1.5px solid rgba(214, 150, 0, 0.6); border-radius: 2px; animation: pv-hl-in 0.35s ease-out; }
@keyframes pv-hl-in { from { opacity: 0; } to { opacity: 1; } }

/* placing: hidden until its place is chosen */
.ed-preview { display: none; }
.pv-side-card { display: none; }
.side-seg { display: none; }
.pv-show { display: none; }
.g-head .pv-show:not([hidden]) { display: inline-flex; flex: 0 0 auto; }

/* 1000-1279 px: Preview | Price reference share the side column */
@media (min-width: 1000px) {
  .side-tabs { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  .side-tabs.tabs-on .side-seg { display: flex; flex: 0 0 auto; }
  .side-tabs.tabs-on.show-preview .pv-side-card { display: block; }
  .side-tabs.tabs-on.show-preview .ref-side { display: none; }
  .pv-side-card .card-body { padding: 8px; }
  .pv-side-card .pv-pages { max-height: calc(100vh - var(--topbar-h) - 200px); min-height: 260px; }
  /* The preview (or the price reference) at the top of the side column, the actions under it:
     Issue and the save state are in the bar above the form anyway. */
  .ed.pv-side-on .ed-side .side-tabs { order: -1; }
}

/* >= 1280 px: a sticky third column next to the form; the app menu becomes a rail of icons */
@media (min-width: 1280px) {
  .ed.pv-col-on .ed-grid { grid-template-columns: minmax(0, 1fr) 280px clamp(340px, 35%, 760px); }
  .ed.pv-col-on .ed-preview {
    display: flex; flex-direction: column; min-width: 0;
    position: sticky; top: calc(var(--topbar-h) + 70px); height: calc(100vh - var(--topbar-h) - 84px);
    padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
  }
  .ed.pv-col-on .ed-preview .pv-panel { flex: 1 1 auto; }
  .layout:has(.ed.pv-col-on) { max-width: none; grid-template-columns: 52px minmax(0, 1fr); }
  .layout:has(.ed.pv-col-on) .nav-group-label { display: none; }
  .layout:has(.ed.pv-col-on) .nav-item { position: relative; justify-content: center; padding: 9px 0; }
  .layout:has(.ed.pv-col-on) .nav-item > span:nth-child(2) { display: none; }
  .layout:has(.ed.pv-col-on) .nav-count { position: absolute; top: 1px; right: 0; padding: 0 4px; font-size: 10px; }
  /* The form column is about phone-wide next to the preview: the weights table gets the phone's
     tight cells, so the source badge ("Delivery notes") fits without scrolling the table. */
  .ed.pv-col-on table.grid.compact.w-lines td, .ed.pv-col-on table.grid.compact.w-lines th { padding: 6px 4px; }
  .ed.pv-col-on .w-lines .w-desc { max-width: 120px; }
}

/* phones (< 1000 px): the strip pinned at the bottom, a tap opens the full-screen viewer */
.pv-strip {
  --pv-strip-h: 62px;
  position: fixed; left: 8px; right: 8px; z-index: 28;
  bottom: calc(var(--tabbar-h) + 6px + env(safe-area-inset-bottom, 0px));
  height: var(--pv-strip-h);
  display: flex; align-items: center; gap: 2px; padding: 4px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px;
  box-shadow: 0 4px 16px rgba(16, 26, 38, 0.18);
}
.pv-strip[hidden] { display: none; }
.pv-strip-main { flex: 1 1 auto; min-width: 0; height: 100%; display: flex; align-items: center; gap: 10px; padding: 0 6px 0 2px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pv-thumb { flex: 0 0 auto; height: 52px; width: auto; max-width: 74px; background: #fff; border: 1px solid var(--border); border-radius: 2px; }
.pv-strip-text { display: flex; flex-direction: column; min-width: 0; font-size: 13px; line-height: 1.3; color: var(--text-dim); }
.pv-strip-text b { font-size: 14px; color: var(--text); }
.pv-strip-text > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-strip-busy { flex: 0 0 auto; margin-left: auto; font-size: 12px; color: var(--text-faint); white-space: nowrap; }
.pv-strip-hide { flex: 0 0 auto; }
body.pv-strip-body { padding-bottom: calc(var(--tabbar-h) + 74px + env(safe-area-inset-bottom, 0px)); }
body.pv-strip-body .toast-stack { bottom: calc(var(--tabbar-h) + 84px + env(safe-area-inset-bottom, 0px)); }
.ed.pv-strip-on.guided-one .step-actions { bottom: calc(var(--tabbar-h) + 72px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 999px) {
  body.pv-strip-body:has(.guided-one) .toast-stack { bottom: calc(var(--tabbar-h) + 158px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 900px) {
  .pv-strip { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); left: auto; width: 420px; }
  body.pv-strip-body { padding-bottom: 80px; }
  .ed.pv-strip-on.guided-one .step-actions { bottom: 74px; }
}
.pv-viewer { position: fixed; inset: 0; z-index: 55; display: flex; flex-direction: column; padding: calc(8px + env(safe-area-inset-top, 0px)) 8px calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--bg); }
.pv-viewer[hidden] { display: none; }
.pv-viewer-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.pv-viewer .pv-panel { flex: 1 1 auto; }
body.pv-viewer-open { overflow: hidden; }
@media print {
  .ed-preview, .pv-strip, .pv-viewer { display: none !important; }
}

/* §21 the IMDG tick also in the Attachments step (phone walk only) and in the review */
.imdg-offer { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.imdg-offer[hidden] { display: none; }
.att-imdg:not([hidden]) { display: none; }
.guided-one .att-imdg:not([hidden]) { display: flex; }
.imdg-later > summary { cursor: pointer; font-weight: 600; color: var(--text-dim); font-size: 14px; }
.prod-sources > summary { cursor: pointer; list-style: none; }
.prod-sources > summary::-webkit-details-marker { display: none; }
.prod-sources > summary h2::before { content: "▸ "; color: var(--text-faint); }
.prod-sources[open] > summary h2::before { content: "▾ "; }