/* app.css — screen styling for the shell. Print styling lives entirely in
   sf-forms/sf-print.css and is not loaded here.

   Visual system ported from the retired sfship-entry app (navy/rust/bone,
   Calibri, section accordion, pill toggles, sticky action bar). Every
   selector the pre-port markup and the test suite use keeps working:
   .card, .fieldRow, table.grid, .draftRow, .docCard, .photoTray, #banner,
   #toast, .navDrawer, button.pri/.sec/.danger. */

:root {
  --navy: #0a2540;
  --navy-deep: #051528;
  --navy-soft: #173559;
  --rust: #b54a1f;
  --rust-bright: #d65d2c;
  --bone: #f4efe6;
  --paper: #faf7f1;
  --line: #c9bfae;
  --line-soft: #e3dccc;
  --ink: #1a1a1a;
  --ink-soft: #5a5a5a;
  --green: #2d6a4f;
  --amber: #c47900;
  --red: #a4161a;
  --shadow: 0 1px 0 rgba(10,37,64,0.06), 0 4px 14px rgba(10,37,64,0.05);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  font-family: Calibri, "Segoe UI", sans-serif;
  font-size: 17px; line-height: 1.5;
  margin: 0; background: var(--paper); color: var(--ink);
  background-image:
    radial-gradient(circle at 20% 0%, rgba(10,37,64,0.04) 0%, transparent 40%),
    radial-gradient(circle at 80% 100%, rgba(181,74,31,0.03) 0%, transparent 40%);
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- header */
header {
  background: var(--navy); color: var(--bone);
  padding: 12px 14px 0;
  border-bottom: 3px solid var(--rust);
  position: sticky; top: 0; z-index: 20;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.logo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.logo-mark {
  width: 32px; height: 32px; border: 1.5px solid var(--bone);
  display: grid; place-items: center; flex-shrink: 0;
  font-weight: 700; font-size: 17px; letter-spacing: -0.5px;
}
.logo-text { font-size: 16px; font-weight: 500; letter-spacing: 0.5px; line-height: 1.1; white-space: nowrap; }
.logo-text small {
  display: block; font-size: 10.5px; font-weight: 400; letter-spacing: 1.2px;
  color: rgba(244,239,230,0.6); margin-top: 2px; text-transform: uppercase;
}
.status-pill {
  font-size: 11.5px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase;
  padding: 5px 9px; border-radius: 2px;
  border: 1px solid rgba(244,239,230,0.3);
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
}
.status-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: #888; }
.status-pill.good .dot { background: #6dd86d; box-shadow: 0 0 6px #6dd86d; }
.status-pill.warn .dot { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
.status-pill.bad  .dot { background: var(--rust-bright); }

.active-draft { font-size: 12.5px; color: rgba(244,239,230,0.75); min-height: 18px; padding: 2px 0; }
.active-draft-row { display: flex; align-items: center; gap: 10px; }
.active-draft-row .active-draft { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the drawer toggle in the header (see index.html): bone on navy, compact,
   and gone on every tab but Entry (ui.js flips body.tab-entry-on) */
header .navDrawerToggle {
  margin: 0; padding: 4px 10px; font-size: 12px; flex-shrink: 0;
  background: none; color: var(--bone); border-color: rgba(244,239,230,0.45);
}
body:not(.tab-entry-on) #hdrSections, #hdrSections[hidden] { display: none; }

nav#tabs {
  display: flex; gap: 0; margin: 4px -14px 0;
  background: var(--navy-deep); border-top: 1px solid var(--navy-soft);
}
nav#tabs button {
  flex: 1; border: 0; padding: 11px 4px; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 500; letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(244,239,230,0.55); background: none;
  border-bottom: 2px solid transparent;
  transition: color 0.15s;
}
nav#tabs button.on { color: var(--bone); border-bottom-color: var(--rust); font-weight: 700; }

/* ---------------------------------------------------------------- layout */
.tab { max-width: 860px; margin: 0 auto; padding: 14px 12px 110px; }

h2 { font-size: 19px; margin: 4px 0 10px; }
h3 { font-size: 12.5px; text-transform: uppercase; letter-spacing: 1.5px;
     color: var(--rust); font-weight: 700; margin: 18px 0 6px; }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: 0;
  padding: 12px 14px; margin-bottom: 10px;
  box-shadow: var(--shadow);
}

button.pri, button.sec, button.danger, .btn {
  font-family: inherit; font-size: 13.5px; font-weight: 700; letter-spacing: 0.8px;
  text-transform: uppercase;
  border-radius: 2px; padding: 9px 14px; cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.08s, opacity 0.15s;
}
button.pri:active, button.sec:active, button.danger:active, .btn:active { transform: scale(0.98); }
button.pri    { background: var(--navy); color: var(--bone); border-color: var(--navy); }
button.pri:hover { background: var(--navy-soft); }
button.sec    { background: #fff; color: var(--navy); border-color: var(--line); }
button.sec:hover { background: var(--bone); }
button.danger { background: #fff; color: var(--red); border-color: rgba(164,22,26,0.35); }
button:disabled, .btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* italic institutional hint at the top of each section */
.helper {
  font-style: italic; font-size: 14.5px; color: var(--ink-soft);
  margin: 8px 0 12px; padding: 10px 14px;
  border-left: 2px solid var(--rust);
  background: rgba(181,74,31,0.04);
  line-height: 1.5;
}

/* ----------------------------------------------------------------- entry */
/* Right-side slide-out section drawer (2026-09, replaces the old top
   .sectionNav bar) -- collapsed by default so a section's own content
   starts almost immediately below the header. Slides right-to-left: a
   fixed panel pinned to the right edge, off-screen via translateX(100%)
   until .open is added (entry.js's onClick), sliding to translateX(0). */
.navDrawerToggle {
  font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0.5px;
  padding: 8px 12px; border-radius: 2px; margin-bottom: 12px;
  border: 1px solid var(--line); background: #fff; color: var(--navy);
  cursor: pointer;
}
.navDrawerBackdrop {
  position: fixed; inset: 0; background: rgba(5,21,40,0.4);
  z-index: 55; opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
}
.navDrawerBackdrop.open { opacity: 1; pointer-events: auto; }
.navDrawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 60;
  width: 280px; max-width: 82vw; overflow-y: auto;
  background: var(--paper); box-shadow: -6px 0 20px rgba(5,21,40,0.25);
  padding: 14px; display: flex; flex-direction: column; gap: 6px;
  transform: translateX(100%); transition: transform 0.22s ease;
}
.navDrawer.open { transform: translateX(0); }
.navDrawerHead {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--rust); font-weight: 700; margin-bottom: 6px;
}
.navDrawerClose {
  font-family: inherit; font-size: 20px; line-height: 1; border: 0; background: none;
  color: var(--ink-soft); cursor: pointer; padding: 2px 6px;
}
.navDrawer button[data-goto] {
  font-family: inherit; font-size: 13.5px; font-weight: 600; letter-spacing: 0.3px;
  padding: 10px 12px; border-radius: 2px; text-align: left;
  border: 1px solid var(--line); background: #fff; color: var(--ink-soft);
  cursor: pointer;
}
.navDrawer button[data-goto].on {
  background: var(--navy); color: var(--bone); border-color: var(--navy);
}
.navDrawer button[data-goto] .dot { color: #6dd86d; font-weight: 700; }

/* section accordion */
/* scroll-margin-top: a drawer jump uses scrollIntoView(block:'start'), which
   puts the card's top edge at the viewport's top -- i.e. UNDER the sticky
   header (measured 2026-09 at 375px: summary 0..69, header 0..113, the
   title fully hidden, the section appearing to start at its helper text).
   --header-h is published by ui.js (UI.headerH) from the header's real
   height on show, label change and resize, since it varies with the
   active-draft label. */
.sec-card { padding: 0; overflow: hidden; }
/* on the <details> too: entry.js's drawer jump calls scrollIntoView on the
   card's details element, and scroll-margin only counts on the element
   being scrolled */
.sec-card, .sec-card > details { scroll-margin-top: var(--header-h, 0px); }
.sec-card details { margin: 0; }
/* Open-section highlight (2026-09). The card's visible border belongs to
   .card (1px solid var(--line)) on this OUTER div -- the <details>
   element itself has no border of its own, so a rule targeting
   "details[open]" (as this used to) changes a border-color that was
   never actually rendering anywhere. .sec-open is toggled by JS
   (entry.js's syncNavActive) onto this div directly, matching the
   element that actually has a border to change. outline instead of a
   wider border avoids a layout shift when the highlight appears. */
.sec-card.sec-open {
  outline: 2px solid var(--navy); outline-offset: -1px;
  box-shadow: 0 0 0 3px rgba(10,37,64,0.12), var(--shadow);
}
.sec-card.sec-open summary { background: rgba(10,37,64,0.05); }
/* Single-section view (2026-09): while any section is active, every OTHER
   section card is hidden -- the drawer is the only section list now, so
   collapsed one-line headers below/above the active sheet were just
   clutter. display:none keeps the DOM intact on purpose: refreshBadge
   still finds [data-status-for] on a hidden card, the print mirror is
   untouched, and native <details> toggles still fire on hidden cards.
   When nothing is active (operator collapsed the open section via its
   own summary) the collapsed list shows again, so the page is never
   empty. #tab-entry.has-open is JS-toggled alongside .sec-open (same
   syncNavActive) rather than using :has(), which this codebase avoids
   for the yard's older WebViews. */
#tab-entry.has-open .sec-card:not(.sec-open) { display: none; }
.sec-card summary {
  padding: 13px 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  list-style: none; user-select: none; -webkit-user-select: none;
  font-weight: 400;
}
.sec-card summary::-webkit-details-marker { display: none; }
.sec-card summary::before {
  content: "▸"; color: var(--rust); margin-right: 2px;
  font-size: 15px; transition: transform 0.18s; display: inline-block;
  flex-shrink: 0;
}
.sec-card details[open] summary::before { transform: rotate(90deg); }
.sec-title-wrap { flex: 1; min-width: 0; }
.sec-num {
  display: block; font-size: 11px; letter-spacing: 1.5px;
  color: var(--ink-soft); text-transform: uppercase;
}
.sec-title { display: block; font-size: 17px; font-weight: 700; margin-top: 1px; }

.sec-status {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  padding: 3px 7px; border-radius: 3px; white-space: nowrap; flex-shrink: 0;
  background: rgba(26,26,26,0.08); color: var(--ink-soft);
  border: 1px solid rgba(26,26,26,0.12);
}
.sec-status.in-progress {
  background: rgba(196,121,0,0.12); color: var(--amber);
  border-color: rgba(196,121,0,0.4);
}
.sec-status.complete {
  background: rgba(45,106,79,0.12); color: var(--green);
  border-color: rgba(45,106,79,0.4);
}

.sec-body { padding: 4px 14px 14px; border-top: 1px solid var(--line-soft); }

.sec-complete-row {
  margin-top: 18px; padding-top: 14px;
  border-top: 1px dashed var(--line-soft);
  display: flex; justify-content: flex-end; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.sec-complete-row small { color: var(--ink-soft); }
.sec-complete-btn {
  font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; padding: 9px 18px; border-radius: 3px; cursor: pointer;
  background: var(--green); color: var(--bone); border: 1px solid var(--green);
  transition: opacity 0.15s ease;
}
.sec-complete-btn:hover { opacity: 0.88; }

/* completed sections lock until explicitly unlocked (which clears the
   completion record — attribution must never sit on later keystrokes) */
.section-locked .sec-body > *:not(.sec-complete-row) { opacity: 0.65; }
.section-locked .sec-body input:disabled,
.section-locked .sec-body textarea:disabled,
.section-locked .sec-body select:disabled {
  cursor: not-allowed; background-color: rgba(0,0,0,0.02);
}

/* field rows */
.fieldRow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
            padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.fieldRow label { flex: 0 0 180px; font-size: 14px; font-weight: 700;
                  color: var(--navy); letter-spacing: 0.3px; }
.fieldRow label small { font-weight: 400; color: var(--ink-soft); letter-spacing: 0; }
.fieldRow input[type=text], .fieldRow input:not([type]), .fieldRow input[type=date],
.fieldRow input[type=email], .fieldRow input[type=password], .fieldRow textarea {
  flex: 1 1 200px; font-family: inherit; font-size: 16px; padding: 9px 10px;
  border: 1px solid var(--line); border-radius: 2px; min-width: 120px;
  background: #fff; color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
/* date control + clear button + written-form hint share the row's input slot
   as ONE column (v52), so the hint sits under the control at every width --
   not under the label, which is where a flex-basis:100% sibling landed once
   label and control sat side by side (desktop). Baseline alignment on the
   row: the label meets the control's text, not the centre of the taller
   column (measured 12px low with align-items:center). Costs nothing at
   375px: label and column stack exactly as label and control did. */
.fieldRow.dateRow { align-items: baseline; }
.fieldRow .dateCol { flex: 1 1 200px; min-width: 120px; display: flex; flex-direction: column; gap: 4px; }
.fieldRow .dateWrap { flex: 0 0 auto; display: flex; gap: 6px; align-items: stretch; min-width: 0; }
.fieldRow .dateWrap input[type=date] { flex: 1 1 auto; min-width: 0; -webkit-appearance: none; appearance: none; }
/* the written form below a date control: full-width line, no vertical
   padding/min-height so an empty one collapses to nothing */
.fieldRow .dateText { font-size: 13px; color: var(--ink-soft); padding: 0 2px; }
/* an empty hint must leave the flex layout entirely -- as a zero-height item
   it would still start a line and cost the row's 8px gap (measured: 91px vs
   81px for a plain text row) */
.fieldRow .dateText:empty { display: none; }
.fieldRow .dateClear {
  flex: 0 0 auto; font-family: inherit; font-size: 20px; line-height: 1; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 2px; background: #fff; color: var(--ink-soft);
  cursor: pointer;
}
.fieldRow input:focus, .fieldRow textarea:focus {
  outline: none; border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(10,37,64,0.08);
}
/* Bold check in a filled box — the same look as .second-docking-toggle's
   .sd-checkbox, applied here via appearance:none so the underlying native
   <input type=checkbox> (and entry.js's existing t.checked handling) is
   untouched; only paint changes. */
.fieldRow input[type=checkbox] {
  appearance: none; -webkit-appearance: none;
  width: 22px; height: 22px; flex-shrink: 0;
  border: 2px solid var(--navy); border-radius: 3px; background: #fff;
  display: grid; place-items: center; cursor: pointer; margin: 0;
}
.fieldRow input[type=checkbox]:checked { background: var(--navy); }
.fieldRow input[type=checkbox]:checked::after {
  content: '✓'; color: #fff; font-weight: 800; font-size: 16px; line-height: 1;
}
.fieldRow input[type=checkbox]:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(10,37,64,0.15);
}
.fieldRow select {
  flex: 1 1 200px; font-family: inherit; font-size: 16px; padding: 9px 10px;
  border: 1px solid var(--line); border-radius: 2px; min-width: 120px;
  background: #fff; color: var(--ink);
}
.fieldRow select:focus { outline: none; border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(10,37,64,0.08); }
.fieldRow input[readonly] {
  background: rgba(26,26,26,0.04); color: var(--ink-soft); cursor: not-allowed;
}
.fieldRow input[readonly]:focus { border-color: var(--line); box-shadow: none; }

/* two-column labeled inputs (old-app .field-row pattern) */
.field-duo {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px;
  margin-bottom: 8px;
}
@media (max-width: 360px) { .field-duo { grid-template-columns: 1fr; } }
.duo-cell label {
  display: block; font-size: 14px; font-weight: 700;
  color: var(--navy); margin-bottom: 4px; letter-spacing: 0.3px;
}
.duo-cell input {
  width: 100%; font-family: inherit; font-size: 16px; padding: 9px 10px;
  border: 1px solid var(--line); border-radius: 2px;
  background: #fff; color: var(--ink);
}
.duo-cell input:focus { outline: none; border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(10,37,64,0.08); }

/* signatory saved-people manager */
.sig-body { padding: 4px 10px 8px; }
details.sig-manage {
  margin-top: 10px; background: var(--bone);
  border: 1px dashed var(--line); padding: 8px 10px;
}
details.sig-manage summary {
  cursor: pointer; font-size: 13px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase; color: var(--ink-soft);
}

/* measurement tables (rudder / propeller / load line / vessels …) */
table.grid, .meas-table { border-collapse: collapse; width: 100%;
  font-family: inherit; font-size: 13.5px; }
table.grid th, table.grid td, .meas-table th, .meas-table td {
  border: 1px solid var(--line); padding: 3px 4px; text-align: center;
  background: #fff;
}
table.grid th, .meas-table th {
  background: var(--bone); font-weight: 700; color: var(--ink);
  font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase;
}
table.grid input, .meas-table input {
  width: 100%; border: 0; font-family: inherit; font-size: 15px; text-align: center;
  padding: 7px 2px; background: transparent;
}
table.grid input:focus, .meas-table input:focus {
  outline: none; background: rgba(10,37,64,0.05);
  box-shadow: inset 0 0 0 2px var(--navy);
}
table.grid td.computed { background: rgba(45,106,79,0.06); font-variant-numeric: tabular-nums; }
table.grid td.fail { background: rgba(164,22,26,0.10); color: var(--red); font-weight: 700; }
table.grid input.remFail { background: rgba(164,22,26,0.10); color: var(--red); font-weight: 700; }
#chainHint { font-size: 13px; color: var(--ink-soft); font-style: italic; }
#chainHint b { color: var(--red); }
.gridWrap { overflow-x: auto; }
.grid-title {
  font-size: 12.5px; font-weight: 700; letter-spacing: 1.5px;
  color: var(--rust); margin: 12px 0 6px; text-transform: uppercase;
}

/* which-sides-apply pills */
.loc-toggle {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 14px; padding: 10px 12px;
  background: var(--bone); border: 1px dashed var(--line);
}
.loc-toggle-label {
  width: 100%; font-size: 12px; font-weight: 600; letter-spacing: 1.2px;
  color: var(--ink-soft); text-transform: uppercase; margin-bottom: 4px;
}
.loc-pill {
  font-family: inherit; font-size: 13.5px; font-weight: 600; letter-spacing: 0.5px;
  padding: 8px 14px; cursor: pointer;
  border: 1px solid var(--line); background: #fff;
  color: var(--ink-soft); border-radius: 2px;
  transition: all 0.12s;
  display: flex; align-items: center; gap: 6px;
}
.loc-pill::before {
  content: ""; display: inline-block;
  width: 12px; height: 12px;
  border: 1.5px solid var(--line); background: #fff;
  border-radius: 2px; transition: all 0.12s;
}
.loc-pill.active { background: var(--navy); color: var(--bone); border-color: var(--navy); }
.loc-pill.active::before {
  background: var(--bone); border-color: var(--bone);
  box-shadow: inset 0 0 0 2px var(--navy);
}

/* P / F / — trio (test report) */
.checklist-group { margin-bottom: 12px; border: 1px solid var(--line); background: #fff; }
.checklist-group-head {
  background: var(--bone); padding: 6px 10px;
  font-size: 12px; font-weight: 700; letter-spacing: 1.2px;
  color: var(--navy); text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}
.checklist-item {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 10px; border-bottom: 1px solid var(--line-soft);
}
.checklist-item:last-child { border-bottom: none; }
.check-trio { display: flex; gap: 4px; flex-shrink: 0; }
.check-pill {
  font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.5px;
  min-width: 34px; height: 30px; padding: 0 7px; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--ink-soft);
  text-transform: uppercase; text-align: center; border-radius: 2px;
  appearance: none; -webkit-appearance: none; margin: 0;
  display: grid; place-items: center;
}
input.check-pill::before { content: attr(data-pill); }
input.check-pill.p:checked { background: var(--green); color: var(--bone); border-color: var(--green); }
input.check-pill.f:checked { background: var(--red); color: var(--bone); border-color: var(--red); }
.check-label { flex: 1 1 140px; font-size: 15px; line-height: 1.35; font-weight: 700; color: var(--ink); }
.checklist-item .rework {
  flex: 1 1 130px; font-family: inherit; font-size: 14px; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: 2px; background: var(--paper);
}

/* chain calibration shackle cards */
.shackle { border: 1px solid var(--line); margin-bottom: 8px; background: #fff; }
.shackle-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 10px; background: var(--bone);
  border-bottom: 1px solid var(--line);
  font-size: 13.5px; font-weight: 600; letter-spacing: 1px;
}
.shackle-progress { font-size: 12.5px; color: var(--ink-soft); font-weight: 400; }
.shackle-side { padding: 6px 8px; border-bottom: 1px dashed var(--line-soft); }
.shackle-side:last-child { border-bottom: none; }
.shackle-side-label {
  font-size: 12px; font-weight: 600; color: var(--navy);
  letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px;
}
.shackle-row {
  display: grid; grid-template-columns: 28px 1fr 1fr 64px;
  gap: 4px; align-items: center; margin-bottom: 3px;
}
.shackle-row-label { font-size: 12.5px; color: var(--ink-soft); font-weight: 700; }
.shackle-row input {
  width: 100%; padding: 7px 6px;
  border: 1px solid var(--line); background: #fff;
  font-family: inherit; font-size: 14.5px;
  text-align: center; border-radius: 2px;
}
.shackle-row input:focus {
  outline: none; border-color: var(--navy);
  box-shadow: 0 0 0 2px rgba(10,37,64,0.08);
}
.shackle-mean {
  font-size: 13.5px; text-align: center; font-variant-numeric: tabular-nums;
  padding: 7px 2px; background: rgba(45,106,79,0.06); border-radius: 2px;
  min-height: 1.4em;
}
.shackle-mean.fail { background: rgba(164,22,26,0.10); color: var(--red); font-weight: 700; }
.shackle-remarks { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.shackle-remarks label {
  font-size: 12px; font-weight: 600; color: var(--ink-soft);
  letter-spacing: 0.5px; text-transform: uppercase;
}
.shackle-remarks input {
  flex: 1; padding: 6px 8px; border: 1px solid var(--line); border-radius: 2px;
  font-family: inherit; font-size: 14px; background: var(--paper);
}
.shackle-remarks input.remFail {
  background: rgba(164,22,26,0.10); color: var(--red); font-weight: 700;
}

/* 2nd docking toggle */
.second-docking-toggle {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; margin: 8px 0;
  background: var(--bone); border: 1px solid var(--line-soft);
  border-radius: 3px; cursor: pointer; user-select: none;
}
.second-docking-toggle .sd-checkbox {
  width: 22px; height: 22px;
  border: 2px solid var(--navy); background: #fff;
  border-radius: 3px; display: grid; place-items: center; flex-shrink: 0;
}
.second-docking-toggle.checked .sd-checkbox { background: var(--navy); }
.second-docking-toggle .sd-checkbox::after {
  content: ''; color: #fff; font-weight: 800; font-size: 16px; line-height: 1;
}
.second-docking-toggle.checked .sd-checkbox::after { content: '✓'; }
.second-docking-toggle .sd-text { font-size: 14px; font-weight: 600; color: var(--ink); }
.second-docking-row { display: none; }
.second-docking-row.show { display: block; }

/* sticky footer actions */
.actions {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, var(--paper) 70%, rgba(250,247,241,0.95) 100%);
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  display: flex; gap: 8px; z-index: 15;
  backdrop-filter: blur(8px);
}
.actions .btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; }
.btn-primary   { background: var(--navy); color: var(--bone); border: 1px solid var(--navy); }
.btn-primary:hover { background: var(--navy-soft); }
.btn-secondary { background: transparent; color: var(--navy); border: 1px solid var(--line); }
.btn-secondary:hover { background: var(--bone); }
.btn-success   { background: var(--green); color: var(--bone); border: 1px solid var(--green); }
.btn-success:hover { opacity: 0.88; }

/* ---------------------------------------------------------------- photos */
/* v63: before/after pairs. A slot is a tap target first (>= 44px), a
   thumbnail second (object-fit contain: the whole photo, as it prints). */
.pairCard { margin-top: 10px; }
.pairHead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.pairTitle { font-weight: 700; }
.pairSlots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.slot { min-width: 0; }
.slotBtn { display: block; width: 100%; min-height: 44px; padding: 0; border: 1px dashed var(--line);
  background: #fff; cursor: pointer; font-family: inherit; font-size: 13px; color: var(--ink-soft); }
.slotBtn.empty { height: 88px; }
.slotBtn.filled { border-style: solid; height: 120px; }
.slotBtn img { width: 100%; height: 118px; object-fit: contain; display: block; background: #fff; }
.slotActions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; }
/* v68: a list photo's caption takes its own line above Replace / Remove -- in a
   half-width cell at 375px the one-line row spilled into the next cell */
.slotActions .slotCap { flex: 0 0 100%; font-weight: 700; }
.slotActions button.quiet { padding: 6px 8px; min-height: 32px; }
.unplacedGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 6px; }
.unplaced .ph { background: #fff; border: 1px solid var(--line); padding: 6px; box-shadow: var(--shadow); }
.unplaced .ph img { width: 100%; height: 100px; object-fit: contain; display: block; }
/* v68: crack testing photo lists -- two to a row, like the printed document */
.photoListBlock { margin-top: 10px; }
.listGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.phActions { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 4px; font-size: 12px; }
.phActions select { max-width: 100%; font-family: inherit; font-size: 12px; }

/* ---------------------------------------------------------------- drafts */
/* v54: Shopify-admin STRUCTURE in this app's palette -- summary line, one
   page primary, one primary per card, quiet overflow. Scoped to the Drafts
   tab; the Entry tab's ported look (radius 0/2px) is untouched. */
.draftsSummary { color: var(--ink-soft); font-size: 14px; margin: -2px 0 14px; }
#tab-drafts .card { border-radius: 8px; padding: 14px 16px; margin-bottom: 12px; }
#tab-drafts #syncCard h3 { margin: 0 0 4px; }
#tab-drafts .syncWho { margin: 0 0 10px; }
#tab-drafts button.sec.quiet { border-color: transparent; color: var(--ink-soft); }
.pageActions { display: flex; align-items: center; gap: 10px; }
.draftRow { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap;
  border-left: 3px solid var(--line); }
.draftRow.active { border-left-color: var(--green); }
.draftRow .who { flex: 1 1 200px; min-width: 140px; }
.draftRow .who b { display: block; font-size: 17px; }
.draftRow .who small { color: var(--ink-soft); }
.draftRow .activeMark { color: var(--green); font-weight: 700; }
.chip { font-size: 11.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; background: var(--bone); color: var(--ink-soft);
  border: 1px solid var(--line); white-space: nowrap; }
.chip-ready { background: #e6f1ea; color: var(--green); border-color: rgba(46,133,64,0.35); }
.chip-sent { background: #e6f1ea; color: var(--green); border-color: rgba(46,133,64,0.35); }
.chip-sending { background: #fff4e0; color: #9a6b00; border-color: rgba(154,107,0,0.35); }
.chip-failed { background: #fbe9e9; color: var(--red); border-color: rgba(164,22,26,0.35); }
/* v60: the Drafts card's second chip while billing is unfinished */
.chip-held { background: #eef2f8; color: #1f3a5f; border-color: rgba(31,58,95,0.35); }
.chip-billing-pending { background: #fff4e0; color: #9a6b00; border-color: rgba(154,107,0,0.35); }
.chip-billing-manual  { background: #fbe9e9; color: var(--red); border-color: rgba(164,22,26,0.35); }
.cardActions { flex: 0 0 100%; display: flex; align-items: center; gap: 8px; }
.cardActions button.pri { flex: 1 1 auto; }
@media (min-width: 640px) {
  .cardActions { flex: 0 0 auto; margin-left: auto; }
  .cardActions button.pri { flex: 0 0 auto; }
}
/* the overflow: a native <details>, summary drawn as a quiet button */
details.overflow { position: relative; }
details.overflow > summary { list-style: none; cursor: pointer; font-size: 20px; line-height: 1;
  padding: 7px 11px; border: 1px solid var(--line); border-radius: 2px; background: #fff;
  color: var(--ink-soft); user-select: none; -webkit-user-select: none; }
details.overflow > summary::-webkit-details-marker { display: none; }
details.overflow > .menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 12;
  min-width: 200px; background: #fff; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 6px 20px rgba(5,21,40,0.15); padding: 6px; display: flex; flex-direction: column; }
details.overflow > .menu button, details.overflow > .menu .menuItem {
  font-family: inherit; font-size: 14px; text-align: left; padding: 9px 10px; border: 0;
  background: none; color: var(--ink); cursor: pointer; border-radius: 4px; }
details.overflow > .menu button:hover, details.overflow > .menu .menuItem:hover { background: var(--bone); }
details.overflow > .menu .dangerItem { color: var(--red); }

/* ------------------------------------------------------------- documents */
.docCard { display: flex; align-items: center; gap: 12px;
  border-left: 3px solid var(--navy); }
.docCard a { font-weight: 600; color: var(--navy); text-decoration: none; flex: 1; }
.docCard .meta { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.docCard .miss { font-size: 12px; color: var(--amber); }

/* --------------------------------------------------------- banner, toast */
#banner { background: var(--navy-deep); color: var(--bone); padding: 10px 14px;
  display: flex; align-items: center; gap: 12px; position: sticky; top: 0;
  z-index: 30; border-left: 3px solid var(--rust); }
/* display:flex outranks the UA's [hidden]{display:none} — without this the
   "update available" banner is a permanent stripe */
#banner[hidden] { display: none; }
#banner button { font-family: inherit; border: 1px solid var(--bone); background: none;
  color: var(--bone); border-radius: 2px; padding: 5px 12px; cursor: pointer;
  font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }

#toast { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%);
  background: var(--navy-deep); color: var(--bone); padding: 10px 16px;
  border-radius: 2px; border-left: 3px solid var(--rust);
  font-size: 14.5px; z-index: 40; max-width: 90vw;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25); }

/* ------------------------------------------------------------------ help */
#tab-help table { border-collapse: collapse; font-size: 13.5px; }
#tab-help th, #tab-help td { border: 1px solid var(--line); padding: 5px 8px;
  text-align: left; background: #fff; }
#tab-help th { background: var(--navy); color: var(--bone); }

/* ------------------------------------------------------------------ gate */
/* One-time setup/sign-in overlay (gate.js) — sits above the sticky header
   (z-index 20/30/40 above), blocking all four tabs until a cached session
   exists. Reuses the exact syncCardHTML() markup/fields from the Drafts
   tab's Sync card, mounted into #gateCardHost — see gate.js. */
.gateOverlay {
  position: fixed; inset: 0; z-index: 100;
  background: var(--navy-deep);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; overflow-y: auto;
}
.gateOverlay[hidden] { display: none; }
.gateBox { width: 100%; max-width: 420px; }
.gateBox h2 { color: var(--bone); }
.gateBox .gateMsg { color: rgba(244,239,230,0.75); font-size: 14px;
  text-align: center; margin: 0 0 18px; }
.gateBox .logo-mark { width: 40px; height: 40px; border: 1.5px solid var(--bone);
  color: var(--bone); display: grid; place-items: center;
  font-weight: 700; font-size: 20px; letter-spacing: -0.5px; }

/* Transmittal auto-exclude: a mapped document whose section has no data is
   struck through and greyed to show it will not print (SCHEMA.deriveTransmittal
   + transmittal.html's keepNumbered do the actual hiding). */
.trans-excluded td input { color: var(--ink-soft); text-decoration: line-through; opacity: 0.6; }
.trans-excl-note { display: block; color: var(--rust); font-style: italic; margin-top: 2px; }
.trans-excl-hint { color: var(--ink-soft); margin: 6px 0 0; }

/* Send to Client: the action stays VISIBLE but greyed until it can act
   (disabled-not-hidden), and its note explains the current send state. */
.sendBtn:disabled { opacity: 0.5; cursor: not-allowed; }
.sendNote { margin-top: 8px; color: var(--ink-soft); }
.sendNote.bad { color: var(--rust-bright); }   /* billing refused / needs manual handling */