/* ============================================================
   ButcherCore — Operations Portal
   Shared design system.  Identity: warm "bone" paper + oxblood,
   Hanken Grotesk.  Built for dense, legible operations data.
   ============================================================ */

:root{
  /* surfaces */
  --paper:#F4F0E7;
  --surface:#FFFFFF;
  --surface-2:#FBF9F4;
  --border:#E7E0D2;
  --border-strong:#D8CFBC;

  /* ink */
  --ink:#211C16;
  --ink-2:#6E665A;
  --ink-3:#9A9183;

  /* brand — oxblood */
  --brand:#9B2E26;
  --brand-700:#7E241D;
  --brand-600:#8E2A22;
  --brand-soft:#F6E7E2;
  --brand-line:#E7C8C0;

  /* secondary — field/agriculture green (farmers) */
  --field:#3C6B4A;
  --field-soft:#E6EFE6;

  /* status */
  --ok:#2E6E4E;        --ok-soft:#E4F0E7;
  --warn:#9A6708;      --warn-soft:#F7ECD6;
  --alert:#B23A2A;     --alert-soft:#F8E4DF;
  --review:#A85418;    --review-soft:#F8E8DA;
  --muted:#7C7468;     --muted-soft:#EFEBE2;

  --beef-soft:#F4E5E1;   --beef-ink:#9B2E26;
  --pork-soft:#F1E7EE;   --pork-ink:#8A436A;
  --lamb-soft:#E7EFE0;   --lamb-ink:#4E6E2E;
  --goat-soft:#E0EDEE;   --goat-ink:#2E6E6A;
  --deer-soft:#F4EDDC;   --deer-ink:#8A5A1E;
  --chicken-soft:#F7F0D6;--chicken-ink:#8A6A10;
  --turkey-soft:#F0E6DA; --turkey-ink:#7A4A22;
  --duck-soft:#DFEAF2;   --duck-ink:#2E5E8A;
  --rabbit-soft:#EEE8F4; --rabbit-ink:#5E4A8A;
  --bison-soft:#EAE4DC;  --bison-ink:#5E4632;
  --elk-soft:#E4EEE8;    --elk-ink:#2E6E52;

  --shadow-sm:0 1px 2px rgba(33,28,22,.05);
  --shadow:0 2px 10px rgba(33,28,22,.07);
  --shadow-lg:0 16px 40px rgba(33,28,22,.16);
  --radius:14px;
  --sidebar-w:236px;
  --topbar-h:64px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  background:var(--paper);
  color:var(--ink);
  font-size:13.5px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#D8CFBC;border-radius:10px;border:2px solid var(--paper)}
::-webkit-scrollbar-thumb:hover{background:#C7BCA4}
::selection{background:var(--brand-soft)}

/* ============================ App shell ============================ */
.app{display:flex;min-height:100vh}

.sidebar{
  width:var(--sidebar-w);flex-shrink:0;background:var(--surface);
  border-right:1px solid var(--border);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow:hidden;z-index:20;
}
.brand{
  display:flex;align-items:center;gap:11px;padding:18px 18px 16px;
  border-bottom:1px solid var(--border);
}
.brand-mark{
  width:38px;height:38px;border-radius:10px;background:var(--brand);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 3px 9px rgba(155,46,38,.32);
}
.brand-mark i{color:#fff;font-size:21px}
.brand-name{font-size:15px;font-weight:800;letter-spacing:-.01em;line-height:1.1}
.brand-sub{font-size:10.5px;color:var(--ink-3);font-weight:600;letter-spacing:.02em}

.nav{flex:1;overflow-y:auto;padding:12px 12px}
.nav-group{font-size:9.5px;font-weight:800;color:var(--ink-3);text-transform:uppercase;
  letter-spacing:.1em;padding:13px 9px 5px}
.nav-link{
  display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;
  font-size:13.5px;font-weight:600;color:var(--ink-2);margin-bottom:2px;cursor:pointer;
  transition:background .12s,color .12s;
}
.nav-link i{font-size:18px}
.nav-link:hover{background:var(--surface-2);color:var(--ink)}
.nav-link.active{background:var(--brand-soft);color:var(--brand-700);font-weight:700}
.nav-link .count{
  margin-left:auto;font-size:10.5px;font-weight:800;padding:1px 8px;border-radius:999px;
  background:var(--muted-soft);color:var(--ink-2);
}
.nav-link .count.unread{background:var(--brand);color:#fff;box-shadow:0 1px 4px rgba(155,46,38,.35)}
.nav-link.cta{
  background:var(--brand);color:#fff;font-weight:700;margin:4px 0 6px;
  box-shadow:0 3px 9px rgba(155,46,38,.28);
}
.nav-link.cta:hover{background:var(--brand-700);color:#fff}
.nav-sub{
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 11px 6px 40px;border-radius:8px;font-size:12px;font-weight:600;
  color:var(--ink-2);cursor:pointer;margin-bottom:1px;
}
.nav-sub:hover{background:var(--surface-2);color:var(--ink)}
.nav-sub.active{background:var(--brand-soft);color:var(--brand-700)}
.nav-sub .pill{font-size:10px;font-weight:800;padding:1px 7px;border-radius:999px}

.user-card{padding:11px 12px;border-top:1px solid var(--border)}
.user-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;
  background:var(--surface-2);cursor:pointer}
.user-row:hover{background:#F2EEE4}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:800;flex-shrink:0}
.user-name{font-size:12.5px;font-weight:700;line-height:1.2}
.user-role{font-size:10.5px;color:var(--ink-3)}

/* ============================ Main / topbar ============================ */
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{
  height:var(--topbar-h);flex-shrink:0;background:rgba(255,255,255,.82);
  backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid var(--border);display:flex;align-items:center;
  gap:14px;padding:0 26px;position:sticky;top:0;z-index:15;
}
.topbar h1{font-size:18px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.crumb{font-size:11.5px;color:var(--ink-3);font-weight:600;margin-top:1px}
.topbar-spacer{flex:1}
.content{padding:24px 26px 48px;max-width:1360px;width:100%}

/* ---- Embed mode (page shown inside another page's iframe, e.g. the messages
   contact drawer). Hide the app chrome and back button, tighten padding, and
   stack the detail grid to a single column so it reads well in a narrow panel. */
.embed .sidebar,
.embed .topbar,
.embed .unread-bar,
.embed .nav-scrim,
.embed [data-back]{display:none !important}
.embed .content{padding:14px 16px 28px;max-width:none}
.embed .grid{grid-template-columns:1fr !important}
/* the drawer is ~430px wide — button/action rows REFLOW to more lines instead of
   forcing the whole embedded page to scroll sideways */
.embed .flex{flex-wrap:wrap}

/* ---- Detail-page columns (farmer/customer detail) ----
   Two flex columns on a wide screen; when the grid stacks (a narrow window, a
   tablet, a phone, or embed mode) the wrappers dissolve so every card becomes a
   direct grid item and lines up in ONE exact reading order — each card carries
   its slot via style="order:N".
   The 330px contact rail is FIXED, so the stack point is set by how much is left
   for the other column: the content box is only (viewport − 236px sidebar − 52px
   padding), which at ~820px leaves the history card ~180px — text broke one word
   per line and the rows scrolled sideways. Both wrappers flip together at 1080px
   (below that the right column can't hold ~440px), never one without the other —
   a half-flip would scramble the order:N reading order. */
.pagecol{display:flex;flex-direction:column;gap:14px;min-width:0}
.detail-grid>*{min-width:0}          /* wide tables/selects can't blow out a track */
/* …and once .pagecol dissolves (display:contents, below) the CARDS become the grid
   items while `.detail-grid>*` still only matches the .pagecol wrapper — which has no
   box. The cards were left on the default min-width:auto, so the cut-sheet table's
   min-content stretched the single track to 584px inside a 390px phone: 206px of page
   scroll, with every other card (contact, invoices) stretched to match. That is the
   customer page "scrolls left and right" bug. Must stay in step with the two
   display:contents rules below. */
.detail-grid .pagecol>*{min-width:0}
.embed .pagecol{display:contents}
@media(max-width:1080px){
  .detail-grid{grid-template-columns:1fr !important}
  .pagecol{display:contents}
}

/* ============================ Buttons ============================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 15px;border-radius:10px;border:1px solid var(--border-strong);
  background:var(--surface);color:var(--ink);font-size:13px;font-weight:700;
  cursor:pointer;white-space:nowrap;transition:background .12s,border-color .12s,transform .04s;
}
.btn:hover{background:var(--surface-2);border-color:var(--ink-3)}
.btn:active{transform:translateY(1px)}
.btn i{font-size:16px}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff;
  box-shadow:0 2px 8px rgba(155,46,38,.24)}
.btn-primary:hover{background:var(--brand-700);border-color:var(--brand-700)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--ink-2)}
.btn-ghost:hover{background:var(--surface-2);color:var(--ink)}
.btn-sm{padding:6px 11px;font-size:12px;border-radius:8px}
.btn-danger{color:var(--alert);border-color:var(--border-strong)}
.btn-danger:hover{background:var(--alert-soft);border-color:var(--alert)}
.btn-block{width:100%}

/* ---- read-only (Viewer) role ----
   Hide every write affordance client-side; the database RLS also blocks writes for
   Viewers, so this is UX polish over a real server-side guarantee. Read-only actions
   (Back, Print, Export, Search, filters) use plain .btn and stay visible. */
.viewonly-badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800;
  color:var(--warn);background:var(--warn-soft);border:1px solid var(--warn);border-radius:999px;padding:4px 10px;white-space:nowrap}
body.role-viewer .btn-primary,
body.role-viewer .btn-danger,
body.role-viewer .nav-link.cta,
body.role-viewer .btn:has(.ti-edit),
body.role-viewer .btn:has(.ti-pencil),
body.role-viewer .btn:has(.ti-trash),
body.role-viewer .btn:has(.ti-plus),
body.role-viewer .icon-btn:has(.ti-pencil),
body.role-viewer .icon-btn:has(.ti-trash),
body.role-viewer .misc-chip{display:none !important}
/* notifications + app install are per-device PERSONAL settings, not org writes —
   Viewers still get the Enable and Add-to-Home-Screen buttons on notifications.html */
body.role-viewer #pushToggle,
body.role-viewer #pushPromptFix,
body.role-viewer #a2hsBtn{display:inline-flex !important}
/* inline write controls (status/deposit/confirm/notes cells) become read-only, not clickable */
body.role-viewer [data-kst],
body.role-viewer [data-dep],
body.role-viewer [data-conf],
body.role-viewer [data-notes],
body.role-viewer .cut-field{pointer-events:none;opacity:.7}

/* ============================ Cards ============================ */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-sm)}
.card-pad{padding:18px 20px}
.card-head{padding:14px 18px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:12px}
.card-title{font-size:14px;font-weight:800;letter-spacing:-.01em}
.card-sub{font-size:11.5px;color:var(--ink-3);font-weight:500}
.grid{display:grid;gap:14px}
.section-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;
  color:var(--ink-3);margin:2px 0 10px}

/* KPI tiles */
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px 17px;position:relative;overflow:hidden;cursor:default}
.kpi.click{cursor:pointer;transition:border-color .12s,transform .08s,box-shadow .12s}
.kpi.click:hover{border-color:var(--border-strong);box-shadow:var(--shadow);transform:translateY(-1px)}
.kpi-label{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-2);
  font-weight:600;margin-bottom:9px}
.kpi-label i{font-size:15px}
.kpi-val{font-size:30px;font-weight:800;line-height:1;letter-spacing:-.02em}
.kpi-foot{font-size:11px;color:var(--ink-3);margin-top:6px}

/* ============================ Tables ============================ */
.table-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse}
table.tbl th{
  text-align:left;font-size:10.5px;font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink-3);padding:11px 16px;background:var(--surface-2);
  border-bottom:1px solid var(--border);white-space:nowrap;position:sticky;top:0;z-index:1;
}
table.tbl td{padding:12px 16px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:middle}
table.tbl tr:last-child td{border-bottom:none}
table.tbl tbody tr.click{cursor:pointer;transition:background .1s}
table.tbl tbody tr.click:hover{background:var(--surface-2)}
.t-strong{font-weight:700;color:var(--ink)}
.t-link{font-weight:700;color:var(--brand-700)}
.t-muted{color:var(--ink-3)}
.t-right{text-align:right}

/* ============================ Badges / tags ============================ */
.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;
  font-size:11px;font-weight:800;letter-spacing:.01em;white-space:nowrap;line-height:1.5}
.badge.dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85}
.b-pending{background:var(--warn-soft);color:var(--warn)}
.b-needs-cut{background:var(--alert-soft);color:var(--alert)}
.b-needs-review{background:var(--review-soft);color:var(--review)}
.b-paid{background:var(--ok-soft);color:var(--ok)}
.b-confirmed{background:var(--ok-soft);color:var(--ok)}
.b-unconfirmed{background:var(--warn-soft);color:var(--warn)}
.b-beef{background:var(--beef-soft);color:var(--beef-ink)}
.b-pork{background:var(--pork-soft);color:var(--pork-ink)}
.b-lamb{background:var(--lamb-soft);color:var(--lamb-ink)}
.b-goat{background:var(--goat-soft);color:var(--goat-ink)}
.b-deer{background:var(--deer-soft);color:var(--deer-ink)}
.b-chicken{background:var(--chicken-soft);color:var(--chicken-ink)}
.b-turkey{background:var(--turkey-soft);color:var(--turkey-ink)}
.b-duck{background:var(--duck-soft);color:var(--duck-ink)}
.b-rabbit{background:var(--rabbit-soft);color:var(--rabbit-ink)}
.b-bison{background:var(--bison-soft);color:var(--bison-ink)}
.b-elk{background:var(--elk-soft);color:var(--elk-ink)}
.b-muted{background:var(--muted-soft);color:var(--muted)}
.b-unscheduled{background:#E8EAF4;color:#4C5680}
.b-need-call{background:var(--warn-soft);color:var(--warn)}
.b-pending-cut{background:var(--alert-soft);color:var(--alert)}
.b-pending-review{background:var(--review-soft);color:var(--review)}
.b-need-info{background:#EDE8F6;color:#5B4490}
.b-waiting{background:var(--muted-soft);color:var(--muted)}
.b-awaiting{background:#E4ECF5;color:#2C5A8A}
.b-field{background:var(--field-soft);color:var(--field)}

/* ============================ Unread-texts alert bar ============================ */
.unread-bar{position:sticky;top:var(--topbar-h);z-index:14;display:flex;align-items:center;gap:9px;
  padding:9px 26px;background:var(--brand);color:#fff;font-size:13px;font-weight:700;
  box-shadow:0 6px 16px -10px rgba(155,46,38,.55);transition:background .12s}
.unread-bar:hover{background:var(--brand-700)}
.unread-bar i{font-size:17px}
.unread-bar .ub-cta{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-weight:800;white-space:nowrap}
.unread-bar .ub-cta i{font-size:14px}
@media(max-width:760px){.unread-bar{padding:9px 14px}}

/* ============================ Live (realtime) indicator ============================ */
.live-indicator{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;border:1px solid var(--border-strong);background:var(--surface);font-size:11.5px;font-weight:700;color:var(--ink-2);transition:background .2s,border-color .2s,color .2s}
.live-indicator .live-dot{width:8px;height:8px;border-radius:50%;background:var(--ink-3);flex-shrink:0}
.live-indicator.on .live-dot{background:var(--ok);animation:livePulse 2s infinite}
.live-indicator.off{color:var(--ink-3)}
.live-indicator.off .live-dot{background:var(--warn)}
.live-indicator.pulse{border-color:var(--ok);background:var(--ok-soft);color:var(--ok)}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(46,110,78,.45)}70%{box-shadow:0 0 0 5px rgba(46,110,78,0)}100%{box-shadow:0 0 0 0 rgba(46,110,78,0)}}

/* ============================ Global search ============================ */
.topbar-search{color:var(--ink-3);font-weight:600;gap:7px}
.kbd{font-size:10.5px;font-weight:700;color:var(--ink-3);background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:1px 6px;line-height:1.6}
@media(max-width:760px){.topbar-search .topbar-search-label{display:none}}
.gs-list{display:flex;flex-direction:column;gap:4px;max-height:52vh;overflow:auto;margin-top:6px}
.gs-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border:1px solid var(--border);border-radius:11px;cursor:pointer;background:var(--surface);width:100%;text-align:left;font:inherit;color:inherit}
.gs-item:hover,.gs-item.active{background:var(--surface-2);border-color:var(--border-strong)}
.gs-ico{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:var(--surface-2);color:var(--ink-2);flex-shrink:0;font-size:17px}
.gs-main{flex:1;min-width:0}
.gs-title{font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs-sub{font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.combo-list{display:flex;flex-direction:column;gap:2px;max-height:240px;overflow:auto;margin-top:8px;border:1px solid var(--border-strong);border-radius:11px;padding:6px;background:var(--surface)}
.combo-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;cursor:pointer}
.combo-item:hover,.combo-item.active{background:var(--surface-2)}
.combo-empty{padding:12px;text-align:center}
.fp{display:flex;flex-direction:column;gap:9px}
.fp-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.fp-list{max-height:200px}
.ep{display:flex;flex-direction:column;gap:8px}
.ep-list{max-height:190px}

/* ============================ Tabs / filters ============================ */
.tabs{display:flex;gap:7px;flex-wrap:wrap}
.tab{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:999px;
  font-size:12.5px;font-weight:700;cursor:pointer;border:1px solid var(--border-strong);
  background:var(--surface);color:var(--ink-2);transition:all .12s}
.tab:hover{border-color:var(--ink-3);color:var(--ink)}
.tab.active{background:var(--brand);border-color:var(--brand);color:#fff}
.tab .pill{font-size:10.5px;font-weight:800;padding:0 7px;border-radius:999px;
  background:rgba(0,0,0,.06)}
.tab.active .pill{background:rgba(255,255,255,.22)}
/* shared admin/settings sub-navigation (single "Admin" sidebar link opens these) */
.admin-subnav{margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--border)}

.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.search{display:flex;align-items:center;gap:8px;background:var(--surface);
  border:1px solid var(--border-strong);border-radius:10px;padding:0 12px;height:40px;min-width:240px}
.search i{font-size:17px;color:var(--ink-3)}
.search input{border:none;outline:none;background:transparent;font:inherit;font-size:13px;
  flex:1;color:var(--ink);height:100%}
.select{height:40px;border:1px solid var(--border-strong);border-radius:10px;background:var(--surface);
  padding:0 12px;font:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer}

/* ============================ Forms ============================ */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:11.5px;font-weight:700;color:var(--ink-2)}
.field .req{color:var(--brand)}
/* Cut Sheet Builder per-question note — under the label on cut-sheet forms */
.cut-qnote{font-size:11px;font-style:italic;font-weight:500;color:var(--ink-3);margin-top:-3px;line-height:1.35}
.input,.textarea{
  border:1px solid var(--border-strong);border-radius:10px;background:var(--surface);
  padding:10px 12px;font:inherit;font-size:13.5px;color:var(--ink);outline:none;width:100%;
  transition:border-color .12s,box-shadow .12s;
}
.input:focus,.textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.textarea{resize:vertical;min-height:74px;line-height:1.5}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.hint{font-size:11px;color:var(--ink-3)}
.divider{height:1px;background:var(--border);margin:18px 0}

/* per-cut audit note input (injectCutNotes) — visually secondary to the cut field above it */
.cut-note{margin-top:6px;padding:6px 10px;font-size:13.5px;border-style:dashed;color:var(--ink-2)}
.cut-note:focus{border-style:solid}

/* ---- Contact lines in the detail & list cards (icon + phone / email / address) ----
   The value is a bare text node next to the icon, i.e. an ANONYMOUS flex item, and
   an anonymous flex item cannot shrink below its longest unbreakable word. One real
   email address ("jamesworth.millerbrandenburg@northeasternohiofarmsupply.com" is
   429px) therefore forced the 330px contact card — and with it the whole page —
   wider than the phone, which is exactly what made the customer page scroll left
   and right. Breaking anywhere keeps every value inside its own card. */
.contact-line{display:flex;align-items:center;gap:8px;min-width:0;overflow-wrap:anywhere}
.contact-line>i{flex-shrink:0}
/* same reasoning for the name headline beside the avatar */
.contact-name{min-width:0;overflow-wrap:anywhere}

/* ---- searchable US-state picker (shell.js stateInputHTML) ----
   Trigger looks exactly like an .input so it lines up with the City / Zip boxes
   beside it; the LIST is a fixed layer on <body> (see shell.js) because the
   modal body scrolls and .modal clips — an in-flow popup would be cut off. */
.stpick{display:block;min-width:0}
.stpick-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;height:40px;padding:0 10px 0 12px;text-align:left;cursor:pointer;font-weight:600}
.stpick-cur{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stpick-cur.none{color:var(--ink-3);font-weight:500}
.stpick-caret{font-size:16px;color:var(--ink-3);flex-shrink:0}
.stpick-pop{position:fixed;z-index:200;display:flex;flex-direction:column;gap:6px;
  background:var(--surface);border:1px solid var(--border-strong);border-radius:12px;
  box-shadow:var(--shadow-lg);padding:8px;overflow:hidden}
.stpick-search{display:flex;align-items:center;gap:7px;padding:0 10px;flex-shrink:0;
  border:1px solid var(--border);border-radius:9px;background:var(--surface-2)}
.stpick-search i{color:var(--ink-3);font-size:15px}
.stpick-input{flex:1;min-width:0;border:0;background:none;outline:none;height:38px;
  font:inherit;font-size:16px;color:var(--ink)}
.stpick-list{display:flex;flex-direction:column;gap:2px;overflow:auto;overscroll-behavior:contain}
.stpick-opt{display:flex;align-items:center;gap:9px;width:100%;padding:9px 11px;border:0;
  border-radius:8px;background:none;font:inherit;font-size:14px;color:var(--ink);
  cursor:pointer;text-align:left}
.stpick-opt b{font-weight:800;letter-spacing:.02em;min-width:26px}
.stpick-opt span{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stpick-opt i{margin-left:auto;font-size:15px;flex-shrink:0}
.stpick-opt:hover{background:var(--surface-2)}
.stpick-opt.on{background:var(--brand-soft);color:var(--brand-700)}
.stpick-opt.on span{color:var(--brand-700)}
.stpick-opt[hidden]{display:none}
.stpick-empty{padding:10px 11px;font-size:13px;color:var(--ink-3)}

/* ---- answers carried over from an EARLIER version of the cut sheet ----
   (data.js legacyCutBlockHTML). Read-only on purpose: these questions are gone
   from the form, so the block must never look like something to fill in — muted,
   dashed, sitting apart from the live fields, with the reason spelled out. */
.cut-legacy{gap:0;border:1px dashed var(--border-strong);border-radius:11px;
  background:var(--surface-2);padding:12px 14px;margin-top:4px}
.cut-legacy-head{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;
  letter-spacing:.02em;color:var(--ink-2)}
.cut-legacy-head i{font-size:15px;color:var(--ink-3)}
.cut-legacy-blurb{font-size:11.5px;line-height:1.5;color:var(--ink-3);margin-top:5px}
.cut-legacy-rows{margin-top:9px;display:flex;flex-direction:column}
.cut-legacy-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:6px 0;border-top:1px solid var(--border)}
.cut-legacy-q{font-size:12.5px;font-weight:600;color:var(--ink-3)}
.cut-legacy-a{font-size:12.5px;font-weight:700;color:var(--ink-2);text-align:right;overflow-wrap:anywhere}

/* anything tagged data-zoom opens in the in-page image lightbox (shell.js openLightbox) */
[data-zoom]{cursor:zoom-in}
[data-zoom] img{cursor:zoom-in}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;
  border:1px solid var(--border-strong);background:var(--surface);font-size:12px;font-weight:600;
  color:var(--ink);cursor:pointer;transition:all .1s}
.chip:hover{border-color:var(--ink-3)}
.chip.on{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand-700)}
.chip.on i{color:var(--brand)}

/* ============================ Empty / misc ============================ */
.empty{text-align:center;padding:48px 20px;color:var(--ink-3)}
.empty i{font-size:34px;color:var(--border-strong);display:block;margin-bottom:10px}
.empty h3{font-size:15px;font-weight:800;color:var(--ink-2);margin-bottom:4px}
.spinner{width:22px;height:22px;border:2.5px solid var(--border);border-top-color:var(--brand);
  border-radius:50%;animation:spin .7s linear infinite;margin:40px auto}
@keyframes spin{to{transform:rotate(360deg)}}
.flex{display:flex}.between{justify-content:space-between}.center{align-items:center}
.gap8{gap:8px}.gap12{gap:12px}.wrap{flex-wrap:wrap}.col{flex-direction:column}
.mt8{margin-top:8px}.mt16{margin-top:16px}.mb0{margin-bottom:0}
.muted{color:var(--ink-3)}.small{font-size:11.5px}

/* ============================ Modal ============================ */
.scrim{position:fixed;inset:0;background:rgba(33,28,22,.42);z-index:60;
  display:flex;align-items:flex-start;justify-content:center;padding:48px 20px;overflow-y:auto;
  opacity:0;pointer-events:none;transition:opacity .16s}
.scrim.open{opacity:1;pointer-events:auto}
.modal{background:var(--surface);border-radius:18px;width:100%;max-width:560px;
  box-shadow:var(--shadow-lg);transform:translateY(8px);transition:transform .18s;overflow:hidden}
.scrim.open .modal{transform:translateY(0)}
.modal-head{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;
  align-items:center;justify-content:space-between}
.modal-body{padding:22px;max-height:64vh;overflow-y:auto}
.modal-foot{padding:16px 22px;border-top:1px solid var(--border);display:flex;
  justify-content:flex-end;gap:10px;background:var(--surface-2)}
.icon-btn{width:30px;height:30px;border-radius:8px;border:none;background:var(--surface-2);
  color:var(--ink-2);cursor:pointer;display:flex;align-items:center;justify-content:center}
.icon-btn:hover{background:#EFEBE2;color:var(--ink)}

/* ============================ Toast ============================ */
.toast-wrap{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:80;
  display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{display:flex;align-items:center;gap:9px;background:var(--ink);color:#fff;
  padding:11px 16px;border-radius:11px;font-size:13px;font-weight:600;box-shadow:var(--shadow-lg);
  animation:toastIn .22s ease}
.toast i{font-size:17px;color:#9FE0B6}
@keyframes toastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ============================ Drag & drop (mouse + touch) ============================ */
.drag-handle{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}
.drag-handle:active{cursor:grabbing}
.drag-ghost{position:fixed;left:0;top:0;z-index:120;pointer-events:none;
  transform:translate(-50%,-150%);background:var(--ink);color:#fff;padding:8px 13px;border-radius:10px;
  font-size:13px;font-weight:700;box-shadow:var(--shadow-lg);white-space:nowrap;max-width:72vw;
  overflow:hidden;text-overflow:ellipsis;opacity:.97;display:flex;align-items:center;gap:7px}
.drag-ghost i{font-size:16px}
.drop-hover{outline:2.5px dashed var(--brand)!important;outline-offset:-2px;
  background:var(--brand-soft)!important;transition:background .1s}

/* ============================ Login ============================ */
.auth-wrap{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
.auth-aside{background:var(--brand);color:#fff;padding:54px 56px;display:flex;
  flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.auth-aside::after{content:"";position:absolute;right:-120px;bottom:-120px;width:420px;height:420px;
  border-radius:50%;background:rgba(255,255,255,.06)}
.auth-aside::before{content:"";position:absolute;right:60px;top:-90px;width:240px;height:240px;
  border-radius:50%;background:rgba(255,255,255,.05)}
.auth-form-side{display:flex;align-items:center;justify-content:center;padding:40px}
.auth-card{width:100%;max-width:380px}
@media(max-width:880px){.auth-wrap{grid-template-columns:1fr}.auth-aside{display:none}}

/* ============================================================
   Mobile / responsive — drawer nav, fluid grids, scroll-safe
   ============================================================ */

/* hamburger + drawer backdrop: inert on desktop */
.nav-toggle{display:none;flex-shrink:0}
.nav-scrim{display:none}
.topbar-title{min-width:0}

@media(max-width:760px){
  /* ---- off-canvas sidebar drawer ---- */
  .nav-toggle{display:inline-flex}
  .sidebar{
    position:fixed;top:0;left:0;height:100dvh;width:min(84vw,300px);
    transform:translateX(-100%);transition:transform .22s ease;z-index:70;
  }
  body.nav-open .sidebar{transform:none;box-shadow:0 18px 50px rgba(33,28,22,.34)}
  .nav-scrim{display:block;position:fixed;inset:0;background:rgba(33,28,22,.45);
    z-index:65;opacity:0;pointer-events:none;transition:opacity .2s}
  body.nav-open .nav-scrim{opacity:1;pointer-events:auto}
  body.nav-open{overflow:hidden}
  .nav-link{padding:11px 12px;font-size:14.5px}
  .nav-sub{padding:9px 12px 9px 40px;font-size:13px}

  /* ---- topbar ---- */
  .topbar{padding:0 12px;gap:8px}
  .topbar h1{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar .crumb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar .kbd{display:none}
  .live-indicator{padding:5px 8px}
  .live-indicator .live-text{display:none}
  .topbar-actions .btn{padding:8px 11px}

  /* ---- content & layout ---- */
  .content{padding:16px 14px 40px}
  .content>*{min-width:0}
  .grid>*{min-width:0}            /* stop wide tables blowing out grid tracks */
  .card-head{flex-wrap:wrap}      /* title + action wrap instead of overflowing */
  .card-title{min-width:0}
  .form-grid{grid-template-columns:1fr}
  .grid[style*="grid-template-columns"]{grid-template-columns:1fr !important}
  .grid[style*="repeat(4"],
  .grid[style*="repeat(3"]{grid-template-columns:repeat(2,1fr) !important}

  /* ---- tables scroll within their card, never the page ---- */
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table.tbl th,table.tbl td{padding-left:12px;padding-right:12px}

  /* ---- toolbars / filters ---- */
  .toolbar{gap:8px}
  .search{min-width:0;flex:1 1 100%}
  .select{flex:1 1 auto}
  .tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    padding-bottom:2px;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex-shrink:0}

  /* ---- modals ---- */
  .scrim{padding:14px 10px}
  .modal{max-width:100%}
  .modal-body{max-height:72vh}

  /* ---- readability & tiles ---- */
  body{font-size:14.5px}
  /* iOS Safari zooms the whole page when a focused field is <16px — that zoom
     forces sideways scrolling and makes controls look magnified/broken. Force
     16px on every text-entry control. !important so a per-page or inline
     font-size:<16px> (dense tables, the messages composer, etc.) can't quietly
     re-introduce the zoom — inline styles otherwise beat this media rule.
     <select> is exempt: it opens a native picker (no focus-zoom), so compact
     inline dropdowns keep their size. */
  select,.select{font-size:16px}
  input,textarea{font-size:16px !important}
  .kpi{padding:14px}
  .kpi-val{font-size:26px}

  /* ---- toast spans width safely ---- */
  .toast-wrap{left:12px;right:12px;transform:none;align-items:stretch}
  .toast{justify-content:center}
}

@media(max-width:430px){
  .grid[style*="repeat(4"],
  .grid[style*="repeat(3"]{grid-template-columns:1fr !important}
  .content{padding:14px 11px 36px}
}

/* ---- Animal Types editor (shared modal: Admin → Animal Types + Cut Sheet Builder) ---- */
.am-card{border:1px solid var(--border);border-radius:11px;padding:10px 12px;background:var(--surface-2)}
.am-card .icon-btn.danger:hover{background:var(--alert-soft);color:var(--alert)}
.am-ids{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.am-ids .small{font-weight:700}
.am-sizes{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px}
.size-chip{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--border-strong);
  border-radius:999px;padding:3px 4px 3px 12px;font-size:12px;font-weight:700;color:var(--ink)}
.size-chip .frac{font-size:10px;font-weight:800;color:var(--ink-3);letter-spacing:.02em}
.size-chip .chip-x{width:19px;height:19px;border:none;background:transparent;color:var(--ink-3);cursor:pointer;
  border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px}
.size-chip .chip-x:hover{background:var(--alert-soft);color:var(--alert)}
.size-add{display:inline-flex;align-items:center;gap:5px}
.size-add .am-preset{height:30px;padding:0 8px;font-size:12px;font-weight:700;min-width:132px}
.size-add .input{height:30px;padding:0 8px;font-size:12px}
.size-add .icon-btn{width:30px;height:30px;border:1px solid var(--border-strong);background:var(--surface);border-radius:8px}
.size-add .icon-btn:hover{background:var(--surface-2)}
.am-addrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.am-addrow .select{height:34px;width:auto;font-weight:700}
.size-ref{margin-top:16px;border-top:1px solid var(--border);padding-top:14px}
.ref-head{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;letter-spacing:-.01em;margin-bottom:10px}
.ref-head i{color:var(--brand)}
.ref-head .muted{font-weight:600}
.ref-head .btn{margin-left:auto}
.ref-tags{display:flex;flex-wrap:wrap;gap:6px}
.ref-tag{display:inline-flex;align-items:center;background:var(--brand-soft);border:1px solid var(--brand-line);color:var(--brand-700);
  border-radius:8px;padding:3px 10px;font-size:12px;font-weight:700}
/* animal chips on the Admin → Animal Types card — .tog chips toggle the animal
   on/off for the company; .off = in the catalog but not offered right now */
.an-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:11px;
  background:var(--surface);padding:7px 12px;font-size:13px;font-weight:700;color:var(--ink);font-family:inherit}
.an-chip i{font-size:16px}
.an-chip .an-sizes{font-size:11px;font-weight:600;color:var(--ink-3)}
.an-chip.tog{cursor:pointer;transition:border-color .12s,background .12s,color .12s}
.an-chip.tog:hover{border-color:var(--brand);background:var(--brand-soft)}
.an-chip .an-x{font-size:13px;color:var(--ink-3)}
.an-chip.tog:hover .an-x{color:var(--brand-700)}
.an-chip.off{border-style:dashed;border-color:var(--border-strong);background:transparent;color:var(--ink-3)}
.an-chip.off i{font-size:14px}
.an-chip.off:hover{color:var(--brand-700);background:var(--brand-soft)}