/* CLOSEOUT UI — work-order forms.
   Paper, ink, one green (decided), one rust (danger).
   Every screen is a bordered form: labelled cells, solid section bars, ruled tables.
   Type: Libre Franklin (heavy for headings), JetBrains Mono for dates, numbers and codes.
   Hooks (data-ui / data-bind / data-form / data-action / name=) are load-bearing. Don't rename them. */

:root {
  --ink: #16191d;
  --ink-soft: #454b53;
  --muted: #7a7f86;
  --paper: #efece5;
  --sheet: #faf9f5;
  --field: #ffffff;
  --rule: #d8d4ca;
  --green: #1f6b4a;
  --green-wash: #e1ebe4;
  --rust: #a33b24;
  --rust-wash: #f4e3dc;
  --sans: "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --max: 900px;
}

[hidden] { display: none !important; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--green-wash); }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Topbar ---------- */

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 24px;
  border-bottom: 2px solid var(--ink);
  background: var(--sheet);
}
.brand {
  font: 800 22px/1 var(--sans);
  letter-spacing: -0.03em;
  text-decoration: none;
}
.topbar-nav { display: flex; gap: 20px; align-items: center; font-size: 13px; font-weight: 800; }
.tagline { font: 800 13px/1 var(--sans); color: var(--ink-soft); }
.topbar-nav a { text-decoration: none; color: var(--ink-soft); }
.topbar-nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.who { color: var(--muted); font: 400 12px/1 var(--sans); }

.view { max-width: var(--max); margin: 0 auto; padding: 32px 20px 88px; }

/* ---------- Type ---------- */

.eyebrow {
  font: 800 11px/1.3 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 6px;
}
h1 {
  font: 800 34px/1.05 var(--sans);
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
}
h2 { margin: 0; }
.lede { margin: 0; color: var(--ink-soft); }
.lede:empty { display: none; }

/* ---------- Buttons ---------- */

.btn,
button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--ink);
  color: var(--sheet);
  border: 2px solid var(--ink);
  border-radius: 0;
  padding: 10px 18px;
  font: 800 14px/1.2 var(--sans);
  text-decoration: none;
  cursor: pointer;
}
.btn, button[type="submit"] { transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.btn-quiet { background-color: var(--sheet); color: var(--ink); }
/* Every button goes green on hover and keyboard focus (not while a pack is building). */
.btn:not(:disabled):hover,
.btn:not(:disabled):focus-visible,
button[type="submit"]:not(:disabled):hover,
button[type="submit"]:not(:disabled):focus-visible {
  background-color: var(--green);
  border-color: var(--green);
  color: var(--sheet);
}
.text-btn {
  background: none;
  border: 0;
  padding: 0;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
}
.text-btn:hover { color: var(--ink); text-decoration-color: currentColor; }
.danger, .text-btn.danger { color: var(--rust); }
.text-btn.danger:hover { color: var(--rust); }

.btn:disabled:not(.is-building) { opacity: 0.4; cursor: not-allowed; }
.btn-quiet.is-building { background-color: var(--ink); border-color: var(--ink); color: var(--sheet); }

/* ---------- The form sheet ---------- */

.form-sheet {
  background: var(--sheet);
  border: 2px solid var(--ink);
}

.sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  border-bottom: 2px solid var(--ink);
}
.sheet-head > div:first-child { padding: 16px 18px 14px; min-width: 0; }
.pack-no {
  flex: 0 0 auto;
  border-left: 2px solid var(--ink);
  padding: 12px 18px;
  text-align: right;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pack-no span {
  font: 800 9.5px/1 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.pack-no b { font: 700 22px/1 var(--mono); }
.pack-no b:empty::before { content: "—"; }

/* Section bar: solid ink strip with the count on the right. */
.bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0;
  padding: 6px 12px;
  background: var(--ink);
  color: var(--sheet);
  font: 800 11px/1.4 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.bar[data-count]::after {
  content: attr(data-count);
  font: 700 12px/1.4 var(--mono);
  letter-spacing: 0;
}

/* Collapsible pack sections: the whole bar is the toggle, with an arrow before the title. */
.bar:has(.bar-toggle) { padding: 0 12px 0 0; transition: background-color 0.15s ease; }
.bar:has(.bar-toggle:hover),
.bar:has(.bar-toggle:focus-visible) { background: var(--green); }
.bar-toggle {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  padding: 6px 12px;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: left;
  cursor: pointer;
}
.bar-toggle:focus-visible { outline: none; }
.bar-toggle::before {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s ease;
}
.block.is-collapsed .bar-toggle::before { transform: translateY(1px) rotate(-45deg); }
.block.is-collapsed > [data-bind] { display: none; }
/* Keep stacked bars (a collapsed section above the next one) visibly separate. */
.block + .block > .bar { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22); }

/* Cells: grid lines come from the 1px gap showing the ink behind. */
.cells,
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--ink);
  border-bottom: 1px solid var(--ink);
}
.cells-1 { grid-template-columns: minmax(0, 1fr); }
.cells-new { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
.cell {
  background: var(--sheet);
  padding: 7px 12px 9px;
  min-width: 0;
}
.cell-wide { grid-column: 1 / -1; }

.cell-label,
label.cell {
  font: 800 9.5px/1.3 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.cell-label { display: block; margin-bottom: 3px; }
.cell-val { font: 800 16px/1.35 var(--sans); }

label.cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  cursor: text;
}
label.cell:focus-within { background: var(--field); box-shadow: inset 0 0 0 2px var(--green); }
label.cell:focus-within { color: var(--green); }

.cell input,
.cell select,
.cell textarea {
  width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 2px 0;
  font: 800 16px/1.35 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.cell input:focus, .cell select:focus, .cell textarea:focus { outline: none; }
.cell input::placeholder, .cell textarea::placeholder { color: #aaa89f; font-weight: 400; }
.cell select { cursor: pointer; }

.rebuild-error { margin: -4px 0 14px; border: 1px solid var(--rust); }

.cell-dump { display: block; padding: 0; border-bottom: 1px solid var(--ink); }
.cell-dump textarea {
  display: block;
  min-height: 340px;
  resize: vertical;
  padding: 14px 16px;
  font: 400 13px/1.7 var(--sans);
}

.verdict {
  font: 800 21px/1.3 var(--sans);
  letter-spacing: -0.015em;
  color: var(--ink);
}

.stat b {
  display: block;
  font: 800 30px/1.1 var(--sans);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

/* ---------- Errors, empty ---------- */

.form-error {
  margin: 0;
  padding: 9px 14px;
  background: var(--rust-wash);
  color: var(--rust);
  border-bottom: 1px solid var(--rust);
  font-size: 14px;
  font-weight: 800;
}
.empty {
  margin: 0;
  padding: 28px 18px;
  background: var(--sheet);
  border: 2px solid var(--ink);
  color: var(--ink-soft);
  font-size: 15px;
}

/* ---------- Page head + actions ---------- */

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 18px;
}
.actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 14px;
}
.actions .danger { margin-left: auto; }

/* ---------- Auth ---------- */

.auth-card { max-width: 440px; margin: 40px auto; }
.auth-card h1 { font-size: 30px; }
.submit-bar { width: 100%; padding: 14px 18px; border-width: 0; transition: background-color 0.15s ease; }
.auth-card button.submit-bar { border: 0; }
.switch {
  margin: 0;
  padding: 12px 18px;
  border-top: 2px solid var(--ink);
  font-size: 13px;
  color: var(--ink-soft);
}
.switch a { font-weight: 800; color: var(--ink); }

/* Sign in with Google: a plain link styled as the second bar under Log in. */
.alt-signin { border-top: 2px solid var(--ink); }
.google-link {
  display: block;
  padding: 14px 18px;
  background: var(--sheet);
  color: var(--ink);
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.google-link:hover,
.google-link:focus-visible { background: var(--green); color: #fff; outline: none; }

/* ---------- Pack list (register) ---------- */

.register { background: var(--sheet); border: 2px solid var(--ink); }
.register-head,
.pack-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 16px;
  padding: 0 14px;
}
.register-head {
  padding-top: 7px;
  padding-bottom: 7px;
  background: var(--ink);
  color: var(--sheet);
  font: 800 11px/1.4 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.register-search { display: block; margin: 0; border-bottom: 2px solid var(--ink); }
.register-search input {
  width: 100%;
  border: 0;
  border-radius: 0;
  background: var(--sheet);
  padding: 12px 14px;
  font: 400 15px/1.3 var(--sans);
  color: var(--ink);
}
.register-search input::placeholder { color: #aaa89f; font-weight: 400; }
.register-search input:focus { outline: none; background: var(--field); box-shadow: inset 0 0 0 2px var(--green); }
.no-match { margin: 0; padding: 18px 14px; color: var(--ink-soft); font-size: 14px; }

.sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  margin: -7px 0 -7px -14px;
  padding: 7px 14px;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.sort-btn:hover,
.sort-btn:focus-visible { background: var(--green); outline: none; }
/* Every column shows its arrow so it reads as sortable. The column in use is underlined. */
.sort-btn::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.sort-btn[data-dir="asc"]::after { transform: translateY(2px) rotate(-135deg); }
.sort-btn.is-active { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }

.pack-list { list-style: none; margin: 0; padding: 0; }
.pack-list li + li { border-top: 1px solid var(--rule); }
.pack-row {
  align-items: baseline;
  padding-top: 14px;
  padding-bottom: 14px;
  text-decoration: none;
}
.pack-row:hover { background: var(--field); }
.pack-row:hover .pr-main strong { text-decoration: underline; text-underline-offset: 4px; }
.pr-date { font: 400 12.5px/1.4 var(--mono); color: var(--ink-soft); }
.pr-main { min-width: 0; }
.pr-main strong { font: 800 17px/1.3 var(--sans); letter-spacing: -0.015em; }
.pack-list .meta {
  display: inline-block;
  margin-left: 10px;
  font: 800 9.5px/1.3 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.pack-list .verdict {
  margin-top: 3px;
  font: 400 14px/1.45 var(--sans);
  color: var(--ink-soft);
  letter-spacing: 0;
}

/* ---------- New pack ---------- */

.form-foot {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 14px 16px;
}

button[type="submit"]:disabled { cursor: progress; }
button.is-building {
  background-image: repeating-linear-gradient(-45deg, transparent 0 8px, rgba(255, 255, 255, 0.12) 8px 16px);
  background-size: 22.63px 22.63px;
  animation: stripes 0.7s linear infinite;
  min-width: 140px;
}
@keyframes stripes { to { background-position: 22.63px 0; } }
form.is-building .cell { opacity: 0.55; transition: opacity 0.3s ease; }

.build-status {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 400 12.5px/1.3 var(--sans);
  color: var(--ink-soft);
}
.build-status [data-bind="build-step"] { animation: step-in 0.35s ease; }
.build-bar {
  position: relative;
  display: block;
  width: 120px;
  height: 4px;
  background: var(--rule);
  overflow: hidden;
}
.build-bar::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  background: var(--green);
  animation: sweep 1.2s ease-in-out infinite;
}
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
@keyframes step-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* ---------- Pack detail ---------- */

.wo .sheet-title .eyebrow { font: 800 11.5px/1.3 var(--sans); letter-spacing: 0.04em; }
.wo h1 { font-size: 36px; }
.block:last-child .wo-table tr:last-child td { border-bottom: 0; }

.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wo-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.wo-table th {
  font: 800 9.5px/1.3 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding: 7px 12px;
  border-bottom: 1px solid var(--ink);
  white-space: nowrap;
}
.wo-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.wo-table th + th,
.wo-table td + td { border-left: 1px solid var(--rule); }
.wo-table .c-mark { width: 44px; text-align: center; }
.wo-table .r { text-align: right; }

.stmt { font-weight: 800; line-height: 1.4; }
.quote {
  margin: 5px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}
.by { font: 800 12px/1.5 var(--sans); color: var(--green); text-transform: uppercase; white-space: nowrap; }
.owner { font-weight: 800; white-space: nowrap; }
.mono { font-family: var(--mono); font-size: 13px; white-space: nowrap; }
.muted { color: var(--muted); }
.missing { color: var(--rust); font-weight: 800; }
td.because { font-size: 13px; line-height: 1.45; color: var(--muted); min-width: 180px; }
td.val { font: 700 14px/1.4 var(--mono); text-align: right; white-space: nowrap; }

.box {
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border: 1.5px solid var(--ink);
  font: 800 11px/1 var(--sans);
  vertical-align: -3px;
}
.box.on { background: var(--green); border-color: var(--green); color: var(--sheet); }
.box.q { border-color: var(--muted); color: var(--muted); }
.flag {
  display: inline-block;
  padding: 3px 5px;
  border: 1.5px solid var(--rust);
  color: var(--rust);
  font: 800 9.5px/1 var(--sans);
  letter-spacing: 0.12em;
}

/* ---------- Small screens ---------- */

@media (max-width: 640px) {
  .topbar { padding: 12px 16px; }
  .topbar-nav { gap: 14px; }
  .who { display: none; }
  .view { padding: 22px 16px 64px; }
  h1, .wo h1 { font-size: 28px; }

  .page-head { flex-direction: column; align-items: flex-start; }

  .cells-new { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cells-new .cell-company { grid-column: 1 / -1; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .sheet-head > div:first-child { padding: 14px; }
  .pack-no { padding: 10px 14px; }
  .pack-no b { font-size: 16px; }

  .pack-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }

  .actions .danger { margin-left: 0; flex-basis: 100%; text-align: left; }

  .wo-table { min-width: 520px; }
  .wo-table.fit { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

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

.settings-stack { display: grid; gap: 22px; }

.cells-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cells-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cells-smtp { grid-template-columns: minmax(0, 2fr) minmax(0, 0.8fr) minmax(0, 1.2fr) minmax(0, 1.4fr); }

label.cell.is-readonly { cursor: default; background: var(--paper); }
label.cell.is-readonly:focus-within { box-shadow: none; color: var(--muted); }
.cell input[readonly] { color: var(--ink-soft); font-family: var(--sans); font-size: 14px; }

/* Checkbox cells: box and words on one line. */
label.cell.check {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding-top: 11px;
  padding-bottom: 11px;
  font: 800 14px/1.3 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  cursor: pointer;
}
input[type="checkbox"] { width: 17px; height: 17px; margin: 0; accent-color: var(--green); cursor: pointer; flex: none; }

/* Meeting types: label + active checkbox, then an add row. */
.types { background: var(--ink); display: grid; gap: 1px; border-bottom: 1px solid var(--ink); }
.types-head,
.type-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px 96px; gap: 1px; }
.types-add { display: grid; gap: 1px; }
.types-head {
  background: var(--sheet);
  padding: 7px 12px;
  font: 800 9.5px/1.3 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.types-head span:nth-child(2) { text-align: center; }
.type-delete {
  background: var(--sheet);
  border: 0;
  color: var(--rust);
  font: 800 13px/1 var(--sans);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
  cursor: pointer;
}
.type-delete:hover,
.type-delete:focus-visible { background: var(--rust-wash); text-decoration-color: currentColor; outline: none; }
.types-empty { margin: 0; padding: 12px; background: var(--sheet); color: var(--ink-soft); font-size: 14px; }
.types-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.type-row label.cell { padding-top: 9px; padding-bottom: 9px; }
.type-active { display: grid; place-items: center; background: var(--sheet); cursor: pointer; }
.types-add { grid-template-columns: minmax(0, 1fr) auto; }
.types-add label.cell { padding-top: 9px; padding-bottom: 9px; }
.types-add .btn { border: 0; }

/* Saved / sent confirmations. */
.save-note { font: 400 12.5px/1.3 var(--sans); color: var(--green); }
.form-ok {
  margin: -4px 0 14px;
  padding: 9px 14px;
  background: var(--green-wash);
  color: var(--green);
  border: 1px solid var(--green);
  font-size: 14px;
  font-weight: 800;
}

/* Meeting connections: placeholders until v2. */
.soon-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--ink); }
.soon-card {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 16px 14px;
  background: var(--sheet);
}
.soon-card b { font: 800 16px/1.2 var(--sans); letter-spacing: -0.01em; color: var(--ink-soft); }
.soon-tag {
  font: 800 9.5px/1 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--rule);
  padding: 4px 6px;
}

/* Email PDF form on the pack page. */
.btn-quiet[aria-expanded="true"] { background-color: var(--ink); border-color: var(--ink); color: var(--sheet); }
.email-sheet { margin: 0 0 14px; }
.cell textarea { resize: vertical; min-height: 64px; font: 400 15px/1.45 var(--sans); }

@media (max-width: 640px) {
  .cells-2, .cells-3 { grid-template-columns: minmax(0, 1fr); }
  .cells-smtp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cells-smtp .cell-host { grid-column: 1 / -1; }
  .soon-grid { grid-template-columns: minmax(0, 1fr); }
  .types-head, .type-row { grid-template-columns: minmax(0, 1fr) 64px 72px; }
}

/* Company field: Closeout's own suggestion list, styled like the rest of the form. */
label.cell.combo { position: relative; }
.combo-field { display: flex; align-items: center; gap: 8px; }
.combo-field input { flex: 1; min-width: 0; }
.combo-caret {
  flex: none;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.combo-caret::before {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: translateY(-2px) rotate(45deg);
}
.combo-list {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: -1px;
  right: -1px;
  max-height: 264px;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--field);
  border: 2px solid var(--ink);
  box-shadow: 0 12px 24px -16px rgba(22, 25, 29, 0.45);
  text-transform: none;
  letter-spacing: 0;
}
.combo-list li {
  padding: 10px 12px;
  font: 800 16px/1.3 var(--sans);
  color: var(--ink);
  cursor: pointer;
}
.combo-list li + li { border-top: 1px solid var(--rule); }
.combo-list li.is-active { background: var(--green); color: var(--sheet); }

/* Pack header: hide the info row when it has nothing to show (e.g. no attendees). */
.wo > .cells:not(:has(> .cell:not([hidden]))) { display: none; }

/* ---------- Full Print ---------- */

.pack-foot { display: flex; justify-content: flex-end; margin-top: 14px; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font: 800 13px/1 var(--sans);
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 4px;
}
.back-link::before {
  content: "";
  width: 6px;
  height: 6px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.back-link:hover { color: var(--ink); text-decoration-color: currentColor; }

.full-sheet .sheet-title .eyebrow { font: 800 11.5px/1.3 var(--sans); letter-spacing: 0.04em; }
.full-sheet .pack-no b:empty::before { content: "—"; }
.full-summary {
  margin: 0;
  padding: 16px 18px 18px;
  max-width: 72ch;
  font: 400 16px/1.6 var(--sans);
  color: var(--ink);
}
.full-transcript {
  margin: 0;
  padding: 16px 18px 20px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 400 15px/1.7 var(--sans);
  color: var(--ink);
}
.full-summary.is-empty,
.full-transcript.is-empty { color: var(--muted); font-style: normal; }

/* ---------- Printout pass: sticky bars, history, owner filter, numbers, transcript ---------- */

/* Top bar stays put; the pack's action row sticks right under it. */
.topbar { position: sticky; top: 0; z-index: 40; }
[data-ui="pack-detail"] > .actions {
  position: sticky;
  top: var(--topbar-h, 52px);
  z-index: 30;
  margin: -12px 0 2px;
  padding: 12px 0;
  background: var(--paper);
  box-shadow: 0 1px 0 var(--rule);
}

/* History: Date | Company | Built. Built sits on the right with the pack number. */
.register-head,
.pack-row { grid-template-columns: 112px minmax(0, 1fr) 150px; }
.sort-btn-end { justify-self: end; margin: -7px -14px -7px 0; }
.pr-side { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
.pr-no { font: 700 12.5px/1.2 var(--mono); color: var(--ink); }
.pr-built { font: 400 11.5px/1.2 var(--mono); color: var(--muted); }

/* Next meeting: plain lines. */
.plain-lines { list-style: none; margin: 0; padding: 0; }
.plain-lines li { padding: 10px 12px; border-bottom: 1px solid var(--rule); font-size: 14px; line-height: 1.45; }
.plain-lines li:last-child { border-bottom: 0; }

/* Because: a quiet link in the same muted color. */
.because-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
}
.because-link:hover,
.because-link:focus-visible { color: var(--ink-soft); text-decoration-color: currentColor; }

/* Owner filter above the contracts table. */
.owner-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--ink);
  background: var(--sheet);
}
.owner-btn {
  padding: 5px 11px;
  background: transparent;
  border: 1.5px solid var(--ink);
  border-radius: 0;
  font: 800 12.5px/1.2 var(--sans);
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.owner-btn[aria-pressed="true"] { background: var(--ink); color: var(--sheet); }
.owner-btn:hover,
.owner-btn:focus-visible { background: var(--green); border-color: var(--green); color: var(--sheet); outline: none; }

/* The Numbers: one group per location; same columns in every table. */
.num-group + .num-group { border-top: 1px solid var(--ink); }
.num-loc {
  margin: 0;
  padding: 10px 12px 8px;
  font: 800 15px/1.2 var(--sans);
  letter-spacing: -0.01em;
  border-bottom: 1px solid var(--ink);
}
.num-table { table-layout: fixed; }
.num-table th:nth-child(1), .num-table td:nth-child(1) { width: 34%; }
.num-table th:nth-child(2), .num-table td:nth-child(2) { width: 14%; }
.num-table th:nth-child(3), .num-table td:nth-child(3) { width: 18%; }
.num-table th:nth-child(4), .num-table td:nth-child(4) { width: 14%; }
.num-table th:nth-child(5), .num-table td:nth-child(5) { width: 20%; }
.num-rest > summary {
  padding: 8px 12px;
  font: 800 12.5px/1.2 var(--sans);
  color: var(--ink-soft);
  cursor: pointer;
  border-bottom: 1px solid var(--rule);
  list-style-position: inside;
}
.num-rest > summary:hover { color: var(--green); }
.num-rest[open] > summary { color: var(--ink); }
.num-group > .num-rest:last-child > summary { border-bottom: 0; }
.num-group > .num-rest[open]:last-child > summary { border-bottom: 1px solid var(--rule); }

/* Rebuild status next to the button uses the New Pack bar. */
.build-status .build-step { animation: step-in 0.35s ease; }

/* Full Print transcript: one element per line, stamps link to the recording. */
.full-transcript { white-space: normal; }
.t-line { white-space: pre-wrap; overflow-wrap: anywhere; min-height: 1.7em; padding: 0 6px; margin: 0 -6px; }
.t-stamp { font: 400 14px/1.7 var(--mono); color: var(--ink); }
a.t-stamp { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
a.t-stamp:hover { color: var(--green); text-decoration-color: currentColor; }
.turn { padding: 4px 6px; margin: 0 -6px; }
.turn .t-line { padding: 0; margin: 0; }
.turn.is-source,
.t-line.is-source { background: var(--green-wash); box-shadow: inset 3px 0 0 var(--green); }

@media (max-width: 640px) {
  .register-head { grid-template-columns: minmax(0, 1fr) auto auto; }
  .register-head .sort-btn:first-child { justify-self: start; }
  .pack-row { grid-template-columns: minmax(0, 1fr) auto; }
  .pack-row .pr-date { grid-column: 1; }
  .pack-row .pr-main { grid-column: 1 / -1; grid-row: 2; }
  .pack-row .pr-side { grid-column: 2; grid-row: 1; flex-direction: row; gap: 10px; }
  [data-ui="pack-detail"] > .actions .danger { flex-basis: auto; }
  .num-table { min-width: 0; }
}

/* Contracts grouped by owner: the name is the group label, that person's lines under it. */
.wo-table.grouped tr.owner-group th {
  padding: 9px 12px 7px;
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
  border-top: 1px solid var(--ink);
  font: 800 13px/1.2 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  text-align: left;
}
.wo-table.grouped tbody tr.owner-group:first-child th { border-top: 0; }
.owner-group-count { margin-left: 8px; font: 700 11px/1 var(--mono); color: var(--muted); }

/* Decided: one short line per decision, who settled it on the right. */
.decided-lines li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-weight: 800; }
.decided-by { flex: none; font: 800 11px/1.2 var(--sans); color: var(--green); text-transform: uppercase; letter-spacing: 0.02em; }

/* Profile footer: plain link to the privacy policy, same tab. */
.settings-foot { margin: 4px 0 0; font-size: 13px; }
.privacy-link { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 4px; }
.privacy-link:hover,
.privacy-link:focus-visible { color: var(--green); }

/* Pack list: meetings waiting to be built. */
.incoming { margin-bottom: 18px; }
.incoming-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 12px 14px;
}
.incoming-row .pr-side { flex-direction: row; align-items: center; gap: 14px; }
.incoming-row .text-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.incoming-row .btn { padding: 8px 14px; font-size: 13px; white-space: nowrap; }
.incoming-row .btn.is-building { cursor: progress; }
.incoming-error { margin: 6px 0 0; }

/* Profile: Zoom connect / connected. */
.zoom-status { display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.soon-card[data-ui="zoom-card"] b { color: var(--ink); }
.connect-link {
  font: 800 13px/1 var(--sans);
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.connect-link:hover,
.connect-link:focus-visible { color: var(--green); }
.connected-tag {
  font: 800 9.5px/1 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sheet);
  background: var(--green);
  padding: 4px 6px;
}
.connected-email { font-size: 13px; color: var(--ink-soft); overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .incoming-row { grid-template-columns: minmax(0, 1fr) auto; }
  .incoming-row .pr-main { grid-column: 1 / -1; grid-row: 2; }
}

/* Connected card: tag, Disconnect, then the account email on its own line. */
.zoom-status .text-btn { font-size: 12.5px; }
.zoom-status .text-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.zoom-status .connected-email { flex-basis: 100%; }
.connect-error { flex-basis: 100%; margin: 0; }
.soon-card:has(.connected-tag) .zoom-status { flex-basis: 100%; }
.soon-card { align-content: flex-start; }