/* ==========================================================================
   Bylands Customer Portal - stylesheet, "Greenhouse" direction (2026-09-10)
   Tokens from web/DESIGN.md; prefixed --cp-. Sage air around a white sheet,
   rounded sheet and pill controls, one deep leaf green, the real Bylands
   logo. Amber only for "more than is available", red only for failure.
   ========================================================================== */

:root {
  --cp-primary: #2f5d3a;
  --cp-primary-hover: #274f31;
  --cp-primary-active: #1f4128;
  --cp-primary-soft: #eef5ea;
  --cp-primary-soft-2: #dbe5d5;
  --cp-primary-ink: #244a2e;
  --cp-bg: #eaf0e6;
  --cp-surface: #ffffff;
  --cp-surface-2: #f5f8f3;
  --cp-surface-3: #e3eadf;
  --cp-border: #dfe6da;
  --cp-border-strong: #c5d0bf;
  --cp-text: #22332a;
  --cp-text-muted: #53665a;
  --cp-text-dim: #5a6e61;
  --cp-border-ui: #7f9484;
  --cp-danger: #b42318;
  --cp-danger-soft: #fdecea;
  --cp-danger-ink: #7a1c14;
  --cp-warn: #9a5c14;
  --cp-warn-soft: #f8dfb8;
  --cp-warn-row: #fbf1e3;
  --cp-warn-ink: #7a4a10;
  --cp-wait-soft: #e6eadf;
  --cp-wait-ink: #4c6152;
  --cp-ring: rgba(47, 93, 58, .28);
  --cp-font: "Albert Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cp-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --cp-r-sm: 8px;
  --cp-r-md: 10px;
  --cp-r-lg: 14px;
  --cp-r-pill: 999px;
  --cp-control-h: 40px;
  --cp-row-h: 44px;
  --cp-topbar-h: 60px;
  --cp-shadow-card: 0 1px 2px rgba(34, 51, 42, .05), 0 6px 18px rgba(47, 93, 58, .06);
  --cp-shadow-lift: 0 10px 30px rgba(47, 93, 58, .14);
  --cp-transition-fast: 150ms ease;
  --cp-ease: cubic-bezier(.2, .7, .2, 1);
  --cp-safe-b: env(safe-area-inset-bottom, 0px);
}

@media (pointer: coarse) {
  :root { --cp-control-h: 44px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100%;
  background: var(--cp-bg);
  color: var(--cp-text);
  font: 400 14px/1.45 var(--cp-font);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
h1 { font-size: 24px; }
h2 { font-size: 17px; }
p { margin: 0; }
a { color: var(--cp-primary); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.muted { color: var(--cp-text-muted); }
.nowrap { white-space: nowrap; }
.skip-link {
  position: absolute; left: 8px; top: -48px; padding: 8px 14px; background: var(--cp-surface);
  border-radius: var(--cp-r-pill); box-shadow: var(--cp-shadow-lift); z-index: 100;
}
.skip-link:focus { top: 8px; }
:focus-visible { outline: 2px solid var(--cp-primary); outline-offset: 2px; }

/* ---------------------------------------------------------------- controls */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--cp-control-h); padding: 0 18px; border-radius: var(--cp-r-pill);
  border: 1px solid transparent; font-size: 14px; font-weight: 600; white-space: nowrap;
  transition: background var(--cp-transition-fast), border-color var(--cp-transition-fast), box-shadow var(--cp-transition-fast), color var(--cp-transition-fast);
}
.btn:disabled { opacity: .55; cursor: default; }
.btn-primary { background: var(--cp-primary); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--cp-primary-hover); }
.btn-primary:active:not(:disabled) { background: var(--cp-primary-active); }
.btn-secondary { background: var(--cp-surface); color: var(--cp-primary-ink); border-color: var(--cp-border-strong); }
.btn-secondary:hover:not(:disabled) { background: var(--cp-surface-2); border-color: var(--cp-primary); }
.btn-quiet { background: transparent; color: var(--cp-text-muted); padding: 0 12px; font-weight: 500; }
.btn-quiet:hover:not(:disabled) { background: var(--cp-surface-3); color: var(--cp-text); }
.btn-danger { background: var(--cp-surface); color: var(--cp-danger); border-color: var(--cp-border-strong); }
.btn-danger:hover:not(:disabled) { background: var(--cp-danger-soft); border-color: var(--cp-danger); }
.btn-block { width: 100%; }
.btn-icon { width: var(--cp-control-h); padding: 0; background: var(--cp-surface-2); color: var(--cp-text-muted); font-size: 15px; }
.btn-icon:hover { background: var(--cp-surface-3); color: var(--cp-text); }
.btn-sm { height: 32px; padding: 0 14px; font-size: 13px; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 13px; font-weight: 500; color: var(--cp-text-muted); padding-left: 4px; }
.field input, .field select {
  height: var(--cp-control-h); padding: 0 16px; border: 1px solid var(--cp-border-ui);
  border-radius: var(--cp-r-pill); background: var(--cp-surface-2); width: 100%; min-width: 0;
  transition: border-color var(--cp-transition-fast), box-shadow var(--cp-transition-fast), background var(--cp-transition-fast);
}
.field input:hover, .field select:hover { background: var(--cp-surface-3); }
.field input:focus, .field select:focus { outline: none; background: var(--cp-surface); border-color: var(--cp-primary); box-shadow: 0 0 0 3px var(--cp-ring); }
.field input[readonly] { background: var(--cp-surface-3); color: var(--cp-text-muted); }
.field select { appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--cp-text-muted) 50%), linear-gradient(135deg, var(--cp-text-muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.field-hint { font-size: 12px; color: var(--cp-text-dim); padding-left: 4px; }
.form-error { color: var(--cp-danger); font-size: 13px; margin: -6px 0 14px; padding-left: 4px; }
.form-success { color: var(--cp-primary-ink); font-size: 13px; margin: -6px 0 14px; padding-left: 4px; }
.notice {
  background: var(--cp-wait-soft); color: var(--cp-wait-ink); border-radius: var(--cp-r-md);
  padding: 10px 16px; margin-bottom: 16px; font-size: 13px;
}
.check { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--cp-text-muted); white-space: nowrap; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--cp-primary); margin: 0; }
.choice-group { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; }
.choice-group legend { font-size: 13px; font-weight: 500; color: var(--cp-text-muted); padding: 0 0 10px 4px; }
.choice-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px 20px; padding-left: 4px; }
.choice-list.is-stacked { grid-template-columns: 1fr; gap: 10px; }
.choice-list .check { white-space: normal; align-items: flex-start; font-size: 14px; color: var(--cp-text); line-height: 1.35; }
.choice-list .check input { margin-top: 1px; flex: 0 0 auto; }
.choice-note { font-size: 12px; color: var(--cp-text-dim); margin-top: 10px; padding-left: 4px; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.card-foot .form-success { margin: 0; }

.card {
  background: var(--cp-surface); border-radius: var(--cp-r-lg);
  padding: 22px 24px; box-shadow: var(--cp-shadow-card); margin-bottom: 16px;
}
.card h2 { margin-bottom: 14px; }
.card-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.card-row h2 { margin-bottom: 2px; }
.details { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; margin: 0; font-size: 14px; }
.details dt { color: var(--cp-text-muted); }
.details dd { margin: 0; }

.pill {
  display: inline-block; padding: 3px 10px; border-radius: var(--cp-r-pill); font-size: 12px; font-weight: 600;
  background: var(--cp-surface-3); color: var(--cp-text-muted); white-space: nowrap;
}
.pill-submitted { background: var(--cp-wait-soft); color: var(--cp-wait-ink); }
.pill-approved { background: var(--cp-primary-soft-2); color: var(--cp-primary-ink); }
.pill-rejected { background: var(--cp-danger-soft); color: var(--cp-danger-ink); }

.spinner {
  display: inline-block; width: 16px; height: 16px; border: 2px solid var(--cp-border-strong);
  border-top-color: var(--cp-primary); border-radius: 50%; animation: cp-spin 800ms linear infinite; vertical-align: -3px;
}
@keyframes cp-spin { to { transform: rotate(360deg); } }

/* -------------------------------------------------------------------- auth */
.auth { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: 56px 16px; }
.auth-card {
  width: 100%; max-width: 440px; background: var(--cp-surface);
  border-radius: var(--cp-r-lg); padding: 32px 32px 28px; box-shadow: var(--cp-shadow-lift);
}
.auth-brand { display: flex; justify-content: center; margin-bottom: 24px; }
.auth-brand img { width: 168px; height: auto; }
.auth-title { margin-bottom: 6px; text-align: center; }
.auth-lead { color: var(--cp-text-muted); margin-bottom: 22px; text-align: center; }
.auth-links { margin-top: 16px; font-size: 13px; text-align: center; }
.auth-note { margin-top: 20px; font-size: 13px; color: var(--cp-text-dim); text-align: center; }

/* --------------------------------------------------------------------- app */
.app { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.topbar {
  position: sticky; top: 0; z-index: 20; height: var(--cp-topbar-h);
  display: flex; align-items: center; gap: 16px; padding: 0 24px;
  background: var(--cp-bg);
}
.brand { display: flex; align-items: center; text-decoration: none; }
.brand img { height: 34px; width: auto; display: block; }
.topbar-customer {
  background: var(--cp-surface); color: var(--cp-text-muted); font-size: 13px; font-weight: 500;
  padding: 6px 14px; border-radius: var(--cp-r-pill); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar-nav { display: flex; gap: 4px; margin-left: auto; }
.topbar-nav a, .tabbar a {
  text-decoration: none; color: var(--cp-text-muted); font-weight: 500; padding: 8px 14px; border-radius: var(--cp-r-pill);
  transition: background var(--cp-transition-fast), color var(--cp-transition-fast);
}
.topbar-nav a:hover { background: rgba(255, 255, 255, .6); color: var(--cp-text); }
.topbar-nav a[aria-current="page"], .tabbar a[aria-current="page"] { color: var(--cp-primary-ink); background: var(--cp-surface); }
.order-btn { gap: 10px; }
.order-count {
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--cp-r-pill); background: rgba(255, 255, 255, .22);
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-variant-numeric: tabular-nums;
}
main { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.page { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.page-narrow { display: block; flex: 1; overflow-y: auto; min-height: 0; padding: 24px 24px 80px; }
.page-narrow > * { max-width: 960px; margin-left: auto; margin-right: auto; }
.page-head { margin-bottom: 20px; }
.page-lead { color: var(--cp-text-muted); margin-top: 4px; }
.tabbar { display: none; }

/* ----------------------------------------------------------------- toolbar */
.toolbar { padding: 6px 24px 10px; background: var(--cp-bg); }
.toolbar-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.search { flex: 1 1 280px; min-width: 200px; max-width: 460px; }
.search input {
  width: 100%; height: var(--cp-control-h); padding: 0 18px; border: 1px solid var(--cp-border-ui);
  border-radius: var(--cp-r-pill); background: var(--cp-surface);
  transition: box-shadow var(--cp-transition-fast), border-color var(--cp-transition-fast);
}
.search input:focus { outline: none; border-color: var(--cp-primary); box-shadow: 0 0 0 3px var(--cp-ring); }
.search input::placeholder { color: var(--cp-text-dim); }
.toolbar-count { color: var(--cp-text-muted); font-size: 13px; white-space: nowrap; }
.toolbar-tools { display: flex; align-items: center; gap: 14px; margin-left: auto; flex-wrap: wrap; }
.toolbar-asof { color: var(--cp-text-dim); font-size: 12px; white-space: nowrap; }
.chips { display: flex; gap: 6px; overflow-x: auto; padding: 10px 0 2px; scrollbar-width: thin; }
.chip {
  flex: 0 0 auto; height: 30px; padding: 0 12px; border-radius: var(--cp-r-pill); border: 0;
  background: var(--cp-primary-soft-2); color: var(--cp-primary-ink); font-size: 12px; font-weight: 600;
  transition: background var(--cp-transition-fast), color var(--cp-transition-fast);
}
.chip:hover { background: var(--cp-border-strong); }
.chip[aria-pressed="true"] { background: var(--cp-primary); color: #fff; }

/* -------------------------------------------------------------------- grid */
.grid { flex: 1; display: flex; flex-direction: column; min-height: 0; position: relative; margin: 0 24px 16px; background: var(--cp-surface); border-radius: var(--cp-r-lg); overflow: hidden; box-shadow: var(--cp-shadow-card); }
.grid-head { flex: 0 0 auto; background: var(--cp-surface-2); overflow-x: hidden; overflow-y: hidden; scrollbar-gutter: stable; }
.grid-body { flex: 1; overflow-y: auto; overflow-x: auto; position: relative; min-height: 0; scrollbar-gutter: stable; }
.grid-spacer { width: 1px; }
.grid-layer { position: absolute; top: 0; left: 0; right: 0; will-change: transform; }
/* grid.js writes the column tracks (--grid-cols) from the customer's list
   settings, and their combined floor (--grid-min): a list wider than the
   screen scrolls sideways instead of squeezing a cell. */
.grid-row {
  display: grid; align-items: center; height: var(--cp-row-h);
  grid-template-columns: var(--grid-cols, 158px minmax(280px, 2fr) 96px minmax(120px, 1fr) 120px 96px 90px 112px 130px);
  min-width: var(--grid-min, 0px);
  border-bottom: 1px solid var(--cp-surface-2);
  transition: background var(--cp-transition-fast);
}
.grid-head .grid-row { border-bottom: 0; height: 38px; }
.grid-row:hover { background: var(--cp-surface-2); }
.grid-row.has-qty { background: var(--cp-primary-soft); }
.grid-row.is-over { background: var(--cp-warn-row); }
.grid-row.is-hidden { color: var(--cp-text-dim); }
.grid-row.is-hidden .plant-name { color: var(--cp-text-dim); }
.grid-cell { padding: 0 12px; min-width: 0; font-size: 13px; line-height: 1.3; }
.grid-cell.num { text-align: right; font-variant-numeric: tabular-nums; }
.grid-cell.code { font-family: var(--cp-mono); font-size: 11px; color: var(--cp-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grid-row-head .grid-cell { font-size: 12px; font-weight: 500; color: var(--cp-text-muted); }
.grid-row-head .col-availability, .grid-row-head .col-price, .grid-row-head .col-total, .grid-row-head .col-orderHistory, .grid-row-head .col-blanketOrders, .grid-row-head .col-retail,
.grid-row-head .col-totalSales { text-align: right; }
.sheet-totals { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 22px; padding: 8px 4px 0; font-size: 13px; color: var(--cp-text-muted); }
.sheet-totals strong { color: var(--cp-text); font-variant-numeric: tabular-nums; margin-left: 6px; }
.choice-group:disabled { opacity: .55; }
.head-btn { background: none; border: 0; padding: 0; color: inherit; font: inherit; display: inline-flex; align-items: center; gap: 4px; border-radius: var(--cp-r-sm); }
.head-btn:hover { color: var(--cp-text); }
.sort-caret { font-size: 11px; }
.plant-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; font-weight: 600; color: var(--cp-text); }
.plant-name.is-second { font-weight: 500; }
.plant-alt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; color: var(--cp-text); }
.plant-meta { display: block; font-size: 12px; color: var(--cp-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Wrap rather than cut: "9CM CERAMIC" or "GREENHOUSE EDIBLES" takes a second
   line in a narrow column instead of ending in an ellipsis. */
.col-size, .col-category { overflow-wrap: anywhere; }
.col-category { color: var(--cp-text-muted); font-size: 12px; }
.col-qty { display: flex; align-items: center; gap: 6px; padding: 0 8px; }
.qty-input {
  width: 100%; min-width: 0; height: 32px; padding: 0 12px; text-align: right; font-variant-numeric: tabular-nums;
  border: 1px solid var(--cp-border-ui); border-radius: var(--cp-r-pill); background: var(--cp-surface-2); font-weight: 500;
  transition: border-color var(--cp-transition-fast), box-shadow var(--cp-transition-fast), background var(--cp-transition-fast);
  -moz-appearance: textfield;
}
.qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.grid-row:hover .qty-input { background: var(--cp-surface); }
.qty-input:hover { background: var(--cp-surface); border-color: var(--cp-primary); }
.qty-input:focus { outline: none; background: var(--cp-surface); border-color: var(--cp-primary); box-shadow: 0 0 0 3px var(--cp-ring); }
.grid-row.has-qty .qty-input { background: var(--cp-surface); border-color: var(--cp-primary); box-shadow: 0 0 0 1px var(--cp-primary); color: var(--cp-primary-ink); font-weight: 600; }
.grid-row.has-qty .qty-input:focus { box-shadow: 0 0 0 3px var(--cp-ring); }
.qty-multiple { flex: 0 0 auto; font-size: 11px; color: var(--cp-text-dim); font-variant-numeric: tabular-nums; }
.grid-row.is-over .qty-input { background: var(--cp-warn-soft); color: var(--cp-warn-ink); border-color: var(--cp-warn); box-shadow: none; }
.over-note { display: block; font-size: 12px; color: var(--cp-warn-ink); white-space: nowrap; }
.grid-empty, .grid-loading {
  position: absolute; inset: 38px 0 0; display: flex; align-items: center; justify-content: center; gap: 10px;
  flex-direction: column; text-align: center; padding: 24px; color: var(--cp-text-muted); background: var(--cp-surface);
}
.grid-loading { flex-direction: row; }

/* ---------------------------------------------------------------- requests */
.req-wrap { overflow-x: auto; margin-bottom: 16px; background: var(--cp-surface); border-radius: var(--cp-r-lg); box-shadow: var(--cp-shadow-card); }
.req-table { width: 100%; border-collapse: collapse; }
/* Child combinators throughout: an opened request carries its own lines table
   inside a row of this one, and must not pick up these row styles. */
.req-table > thead > tr > th, .req-table > tbody > tr > td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--cp-surface-2); font-size: 13px; }
.req-table > thead > tr > th { background: var(--cp-surface-2); color: var(--cp-text-muted); font-weight: 500; font-size: 12px; }
.req-table > thead > tr > th.num, .req-table > tbody > tr > td.num { text-align: right; font-variant-numeric: tabular-nums; }
.req-table > tbody > tr.req-row { cursor: pointer; transition: background var(--cp-transition-fast); }
.req-table > tbody > tr.req-row:hover { background: var(--cp-surface-2); }
.req-table > tbody > tr.req-row.is-open { background: var(--cp-primary-soft); }
.req-table > tbody > tr.req-row.is-open > td { border-bottom-color: transparent; }
.req-table > tbody > tr:last-child > td { border-bottom: 0; }
.req-table > tbody > tr > td.code, .lines-table .code, .dline-meta .code { font-family: var(--cp-mono); font-size: 11.5px; }
.row-toggle, .row-link {
  display: inline-flex; align-items: center; gap: 8px; padding: 2px 4px; margin: -2px -4px;
  background: none; border: 0; border-radius: var(--cp-r-sm); color: var(--cp-text); font: inherit; font-weight: 600; text-decoration: none;
}
.row-link:hover, .req-row:hover .row-link { text-decoration: underline; }
.row-caret {
  flex: 0 0 auto; width: 7px; height: 7px; margin-right: 2px; border-right: 1.5px solid var(--cp-text-muted); border-bottom: 1.5px solid var(--cp-text-muted);
  transform: rotate(-45deg); transition: transform var(--cp-transition-fast);
}
.req-row.is-open .row-caret { transform: rotate(45deg) translate(-1px, -1px); }
.req-table > tbody > tr.req-detail-row > td { padding: 0 12px 14px; background: var(--cp-primary-soft); }
.req-detail { background: var(--cp-surface); border-radius: var(--cp-r-md); padding: 16px 18px; box-shadow: 0 1px 2px rgba(34, 51, 42, .05); }
.lines-wrap { overflow-x: auto; }
.back-row { margin-bottom: 14px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; padding: 6px 12px 6px 4px; border-radius: var(--cp-r-pill); }
.back-link:hover { text-decoration: underline; }
.detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.detail-head h2, .detail-head h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.detail-title { font-size: 22px; }
.detail-meta { color: var(--cp-text-muted); font-size: 13px; margin-top: 4px; overflow-wrap: anywhere; }
.detail-reason { background: var(--cp-danger-soft); color: var(--cp-danger-ink); border-radius: var(--cp-r-md); padding: 10px 16px; margin-bottom: 12px; font-size: 13px; }
.lines-table { width: 100%; border-collapse: collapse; }
.lines-table th, .lines-table td { padding: 9px 10px; border-bottom: 1px solid var(--cp-surface-2); font-size: 13px; text-align: left; }
.lines-table th { color: var(--cp-text-muted); font-weight: 500; font-size: 12px; }
.lines-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.lines-table .adjusted { font-size: 12px; color: var(--cp-warn-ink); }
.empty { color: var(--cp-text-muted); padding: 28px; text-align: center; background: var(--cp-surface); border-radius: var(--cp-r-lg); box-shadow: var(--cp-shadow-card); }

/* ------------------------------------------------------------------ drawer */
.scrim { position: fixed; inset: 0; background: rgba(34, 51, 42, .28); z-index: 30; }
.drawer {
  position: fixed; top: 14px; right: 14px; bottom: 14px; width: min(440px, calc(100vw - 28px)); z-index: 40;
  background: var(--cp-surface); border-radius: var(--cp-r-lg); box-shadow: var(--cp-shadow-lift); display: flex; flex-direction: column;
  animation: cp-slide-in 240ms var(--cp-ease);
}
@keyframes cp-slide-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer-head { display: flex; align-items: center; gap: 12px; padding: 18px 18px 8px 24px; }
.drawer-head h2 { flex: 1; font-size: 18px; }
.drawer-grab { display: none; }
.drawer-body { flex: 1; overflow-y: auto; padding: 4px 24px 12px; }
.drawer-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 24px calc(18px + var(--cp-safe-b)); }
.dline { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 0; border-top: 1px solid var(--cp-surface-2); align-items: center; }
.dline:first-child { border-top: 0; }
.dline-name { font-size: 14px; font-weight: 600; }
.dline-meta { font-size: 12px; color: var(--cp-text-muted); }
.dline-total { text-align: right; font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 600; }
.dline-ctl { display: flex; align-items: center; gap: 6px; grid-column: 1; margin-top: 2px; }
.dline-ctl input { width: 72px; height: 32px; text-align: center; border: 1.5px solid var(--cp-primary); border-radius: var(--cp-r-pill); padding: 0 8px; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--cp-primary-ink); background: var(--cp-surface); -moz-appearance: textfield; }
.dline-ctl input::-webkit-outer-spin-button, .dline-ctl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dline-ctl input:focus { outline: none; box-shadow: 0 0 0 3px var(--cp-ring); }
.step { width: 32px; height: 32px; border: 1px solid var(--cp-border-ui); background: var(--cp-surface-2); border-radius: var(--cp-r-pill); font-size: 16px; line-height: 1; color: var(--cp-text); }
.step:hover { background: var(--cp-surface-3); }
.dline-over { grid-column: 1 / -1; font-size: 12px; color: var(--cp-warn-ink); }
.dline-remove { grid-column: 2; justify-self: end; }
.drawer-empty { padding: 36px 0; text-align: center; }
.drawer-totals { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; margin: 8px 0 4px; font-size: 14px; background: var(--cp-surface-2); border-radius: var(--cp-r-md); }
.drawer-totals strong { font-variant-numeric: tabular-nums; }
.drawer-form { padding-top: 12px; }
.drawer-note { font-size: 12px; }

/* ------------------------------------------------------------------- toast */
.toast {
  position: fixed; right: 20px; top: calc(var(--cp-topbar-h) + 12px); z-index: 60; max-width: min(420px, calc(100vw - 32px));
  background: var(--cp-text); color: #fff; padding: 12px 18px; border-radius: var(--cp-r-md); box-shadow: var(--cp-shadow-lift);
  display: flex; align-items: flex-start; gap: 12px; font-size: 13px; animation: cp-slide-in 200ms var(--cp-ease);
}
.toast.is-error { background: var(--cp-danger); }
.toast.is-success { background: var(--cp-primary); }
.toast button { background: transparent; border: 0; color: inherit; padding: 0; font-size: 16px; line-height: 1; opacity: .8; }
.toast button:hover { opacity: 1; }

/* ------------------------------------------------------------- responsive */
@media (max-width: 1023px) {
  .topbar-nav { display: none; }
}
@media (max-width: 719px) {
  :root { --cp-row-h: 64px; --cp-control-h: 44px; }
  .topbar { padding: 0 14px; gap: 10px; height: 56px; }
  .brand img { height: 28px; }
  .topbar-customer { flex: 1; font-size: 12px; padding: 5px 12px; }
  .order-btn span:first-child { display: none; }
  .order-btn { padding: 0 14px; }
  .order-btn::before { content: "Order"; }
  main { padding-bottom: calc(56px + var(--cp-safe-b)); }
  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: calc(56px + var(--cp-safe-b));
    padding: 6px 8px var(--cp-safe-b); background: var(--cp-surface); box-shadow: 0 -4px 20px rgba(47, 93, 58, .08);
  }
  .tabbar a { flex: 1; text-align: center; font-size: 13px; padding: 10px 4px; }
  .toolbar { padding: 6px 14px 8px; }
  .toolbar-tools { margin-left: 0; width: 100%; gap: 10px; }
  .toolbar-count { display: none; }
  .grid { margin: 0 14px 14px; }
  /* The plant name is the row's whole point, so the number columns are cut to what
     their widest real value needs (1,013 and 400.00) and everything left over goes
     to the name. At 400px that took the name column from 101px to 145px and the
     clamped names on screen from 6 of 16 down to 1. */
  .grid-row { grid-template-columns: minmax(0, 1fr) 62px 66px 84px; min-width: 0; }
  .grid-body { overflow-x: hidden; }
  .grid-body.is-mobile .over-note { white-space: normal; }
  .page-narrow { padding: 16px 14px 96px; }
  /* The requests table scrolls sideways on a phone; an opened request stays
     pinned to the table's visible width (measured by app.js into
     --req-visible, less the 12px cell padding each side) so its details are
     never cut off at the edge. */
  .req-detail { position: sticky; left: 12px; width: calc(var(--req-visible, 100vw) - 24px); }
  .drawer {
    top: auto; left: 0; right: 0; bottom: 0; width: 100%; height: 92vh; border-radius: 18px 18px 0 0;
    animation: cp-sheet-in 240ms var(--cp-ease);
  }
  @keyframes cp-sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
  .drawer-grab { display: block; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--cp-border-strong); }
  .drawer-head { padding: 22px 14px 8px 20px; }
  .drawer-body { padding: 4px 20px 12px; }
  .drawer-foot { padding: 12px 20px calc(16px + var(--cp-safe-b)); }
  .toast { left: 14px; right: 14px; top: auto; bottom: calc(68px + var(--cp-safe-b)); max-width: none; }
  .card { padding: 18px; }
  .auth { padding: 32px 16px; }
  .auth-card { padding: 28px 22px 24px; }
  .details { grid-template-columns: 1fr; gap: 2px; }
  .details dt { margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .drawer, .toast { animation: none; }
  .btn, .grid-row, .chip, .qty-input, .topbar-nav a { transition-duration: 120ms; }
  .spinner { animation-duration: 1500ms; }
}

/* ------------------------------------------------------------ legal pages */
.legal { max-width: 800px; margin: 0 auto; padding: 24px 16px 64px; }
.legal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.legal-head img { height: 40px; width: auto; }
.legal-head a { font-size: 14px; font-weight: 500; }
.legal-sheet { background: var(--cp-surface); border-radius: var(--cp-r-lg); box-shadow: var(--cp-shadow-card); padding: 32px 36px 36px; }
.legal h1 { font-size: 26px; margin-bottom: 4px; }
.legal .effective { color: var(--cp-text-muted); font-size: 13px; margin-bottom: 24px; }
.legal h2 { font-size: 17px; margin: 28px 0 8px; }
.legal p, .legal li { max-width: 70ch; margin-bottom: 10px; line-height: 1.55; }
.legal ul { padding-left: 22px; margin: 0 0 12px; }
.legal address { font-style: normal; line-height: 1.55; }
.legal-foot { margin-top: 24px; font-size: 13px; color: var(--cp-text-muted); display: flex; gap: 12px; flex-wrap: wrap; }
.auth-legal { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--cp-surface-3); font-size: 12px; color: var(--cp-text-muted); text-align: center; line-height: 1.6; }
.consent { white-space: normal; align-items: flex-start; margin: 4px 0 16px; line-height: 1.45; }
.consent input { margin-top: 3px; flex: 0 0 auto; }
.consent a { color: var(--cp-primary); }
@media (max-width: 719px) { .legal-sheet { padding: 22px 18px 26px; } }

/* ------------------------------------------------------------------ print
   "Print or save as PDF" on an invoice. A service principal cannot run BC
   reports, so the customer's copy is this page printed by their own browser:
   body.printing-invoice narrows the sheet to the invoice panel alone, on
   white, with a header naming Bylands and the customer. Nothing else on the
   page survives, so the copy is a document rather than a screenshot. */
.invoice-print-head { display: none; }
.invoice-totals { margin-top: 16px; max-width: 420px; }

@media print {
  body.printing-invoice { background: #fff; }
  body.printing-invoice .app { height: auto; overflow: visible; display: block; }
  body.printing-invoice .topbar,
  body.printing-invoice .tabbar,
  body.printing-invoice .toast,
  body.printing-invoice .drawer,
  body.printing-invoice .drawer-scrim,
  body.printing-invoice .skip-link,
  body.printing-invoice #invoices-list,
  body.printing-invoice .page-head,
  body.printing-invoice .back-row,
  body.printing-invoice [data-act="print-invoice"] { display: none !important; }
  body.printing-invoice main,
  body.printing-invoice .page,
  body.printing-invoice .page-narrow { display: block; height: auto; overflow: visible; padding: 0; margin: 0; max-width: none; }
  body.printing-invoice #invoice-detail {
    display: block !important; box-shadow: none; border: 0; border-radius: 0;
    padding: 0; margin: 0; background: #fff; color: #000;
  }
  body.printing-invoice .invoice-print-head {
    display: block; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 2px solid #000;
  }
  body.printing-invoice .invoice-print-head img { height: 34px; width: auto; margin-bottom: 8px; }
  body.printing-invoice .invoice-print-head p { font-size: 11px; line-height: 1.5; margin: 0; }
  body.printing-invoice .lines-table { width: 100%; border-collapse: collapse; }
  body.printing-invoice .lines-table th,
  body.printing-invoice .lines-table td { border-bottom: 1px solid #999; padding: 5px 6px; color: #000; }
  body.printing-invoice .detail-meta,
  body.printing-invoice .details dt,
  body.printing-invoice .details dd,
  body.printing-invoice h1,
  body.printing-invoice h2 { color: #000; }
  body.printing-invoice .lines-wrap { overflow: visible; }
  body.printing-invoice .pill { border: 1px solid #000; background: none !important; color: #000 !important; }
  body.printing-invoice .lines-table tr { break-inside: avoid; }
  @page { margin: 16mm; }
}