/* ============================================================================
   V2 SKIN — the approved hybrid design (public/proposal-shots/hybrid-dash.png).
   Loads AFTER warm.css; additive component layer on top of the warm base.
   Tokens extracted from the approved mockups — do not invent new colors.
   ========================================================================== */
:root {
  --v2-canvas: #FAF7F0;      /* cream page canvas */
  --v2-panel:  #F6F1E7;      /* warm panel wash */
  --v2-card:   #FFFFFF;
  --v2-line:   #E7E0D0;      /* warm hairline */
  --v2-ink:    #333B34;  /* 08-05 Bob: "a bit intense" — near-black relaxed to warm graphite */
  --v2-ink2:   #5A6357;
  --v2-ink3:   #8A9488;
  --v2-pine:   #14301F;      /* nav bar */
  --v2-pine-2: #1F4030;      /* nav active chip */
  --v2-green:  #1F6B47;      /* action green */
  --v2-green-deep: #14532D;
  --v2-good:   #198754;  --v2-good-s: #E7F3EC;
  --v2-warn:   #B4801C;  --v2-warn-s: #FBF1DE;
  --v2-crit:   #C0453C;  --v2-crit-s: #FBEAE8;
  --v2-gold:   #C9A227;  --v2-gold-ink: #8A6316; --v2-gold-s: #FBF3D9;
  --v2-radius: 13px;
  --v2-shadow: 0 1px 2px rgba(30,40,28,.05), 0 4px 14px -8px rgba(30,40,28,.10);
  --v2-shadow-hover: 0 6px 20px -8px rgba(30,40,28,.16);
  --v2-serif: 'Fraunces', Georgia, serif;
}

body { background: var(--v2-canvas); }

/* ---- cards: white, 13px radius, soft layered shadow, 1px warm line -------- */
.card { border: 1px solid var(--v2-line); border-radius: var(--v2-radius); box-shadow: var(--v2-shadow); }

/* ---- serif display (greetings / page-title moments) ----------------------- */
.v2-serif { font-family: var(--v2-serif); font-weight: 500; letter-spacing: -.02em; color: var(--v2-ink); }

/* ---- status pills (soft tints; dot + word) -------------------------------- */
.v2-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
  border-radius: 999px; padding: 3px 11px; line-height: 1.35; white-space: nowrap; }
.v2-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.v2-pill.good { background: var(--v2-good-s); color: var(--v2-good); }
.v2-pill.warn { background: var(--v2-warn-s); color: var(--v2-warn); }
.v2-pill.crit { background: var(--v2-crit-s); color: var(--v2-crit); }
.v2-pill.mute { background: #F1ECE0; color: var(--v2-ink2); }
.v2-pill.plain::before { display: none; }
/* SWEEP finding 20: pills carrying a SENTENCE (the board's "needs capacity —
   set it on the barn…") may break at word boundaries instead of forcing page
   h-scroll. Figures have no inner spaces, so numbers still never split. */
.v2-pill.wraps { white-space: normal; text-align: left; }

/* Luke's-scale grade pills: tests pin the bootstrap class names (bg-danger …),
   so the classes stay and this scope re-dresses them as tinted pills (§4). */
.gpill { font-size: 12px; font-weight: 700; padding: 3px 11px; line-height: 1.35; }
.gpill.bg-success   { background: var(--v2-good-s) !important; color: var(--v2-good) !important; }
.gpill.bg-warning   { background: var(--v2-warn-s) !important; color: var(--v2-warn) !important; }
.gpill.bg-danger    { background: var(--v2-crit-s) !important; color: var(--v2-crit) !important; }
.gpill.bg-secondary { background: #F1ECE0 !important; color: var(--v2-ink2) !important; }

/* ---- code chip (PO / tag numbers — mono on warm) -------------------------- */
.v2-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; font-weight: 600;
  background: #F1ECE0; color: var(--v2-ink2); border-radius: 6px; padding: 2px 7px; letter-spacing: .02em; }

/* ---- gold dashed REFRESHED stamp ------------------------------------------ */
.v2-stamp { display: inline-block; text-align: center; border: 1.5px dashed var(--v2-gold);
  border-radius: 10px; padding: 7px 16px; color: var(--v2-gold-ink); background: transparent;
  transform: rotate(.6deg); }
.v2-stamp .t { display: block; font-size: 10px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; }
.v2-stamp .d { display: block; font-family: var(--v2-serif); font-size: 15px; font-weight: 600; margin-top: 1px; }

/* ---- gold audit banner ---------------------------------------------------- */
.v2-banner { display: flex; align-items: center; gap: 14px; background: var(--v2-gold-s);
  border: 1px solid #EBD9A4; border-radius: var(--v2-radius); padding: 13px 16px; color: var(--v2-gold-ink); }
.v2-banner .ic { width: 38px; height: 38px; flex: none; border-radius: 10px; background: #F3E6BC;
  display: flex; align-items: center; justify-content: center; font-size: 17px; }
.v2-banner .tt { font-weight: 600; color: #6E4E12; font-size: 14.5px; }
.v2-banner .ss { font-size: 12.5px; margin-top: 1px; }
.v2-banner .ss b { color: #6E4E12; }
.v2-banner .act { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.v2-btn-gold { background: var(--v2-warn); color: #fff !important; font-weight: 700; font-size: 13px;
  border-radius: 9px; padding: 7px 15px; text-decoration: none; border: 0; display: inline-block; }
.v2-btn-gold:hover { background: #9A6C15; color: #fff; }
.v2-banner .snz { color: var(--v2-gold-ink); font-weight: 600; font-size: 13px; text-decoration: none; }

/* ---- KPI stat cards ------------------------------------------------------- */
.v2-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
@media (max-width: 1100px) { .v2-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .v2-kpis { grid-template-columns: 1fr; } }
.v2-kpi { display: block; background: var(--v2-card); border: 1px solid var(--v2-line);
  border-radius: var(--v2-radius); box-shadow: var(--v2-shadow); padding: 16px 18px 12px;
  color: var(--v2-ink); text-decoration: none; transition: box-shadow .12s, transform .12s; }
.v2-kpi:hover { box-shadow: var(--v2-shadow-hover); transform: translateY(-1px); color: var(--v2-ink); }
.v2-kpi .hd { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.v2-kpi .lbl { font-size: 13.5px; font-weight: 500; color: var(--v2-ink2); }
.v2-kpi .num { font-size: 34px; font-weight: 600; letter-spacing: -.02em; line-height: 1.05;
  margin-top: 12px; font-variant-numeric: tabular-nums; }
.v2-kpi .num .un { font-size: 16px; font-weight: 700; color: var(--v2-ink3); }
.v2-kpi .sub { font-size: 12.5px; color: var(--v2-ink3); margin-top: 7px; }
.v2-kpi .sub b { color: var(--v2-ink2); font-variant-numeric: tabular-nums; }
.v2-kpi .spark { margin-top: 12px; height: 26px; }
.v2-kpi .spark svg { width: 100%; height: 26px; display: block; }
.v2-kpi .spark polyline { fill: none; stroke: #2C7A54; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }

/* ---- panels (Needs you / Money trail) ------------------------------------- */
.v2-panel { background: var(--v2-card); border: 1px solid var(--v2-line); border-radius: 15px;
  box-shadow: var(--v2-shadow); padding: 18px 20px; }
.v2-panel .p-hd { display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  padding-bottom: 8px; }
.v2-panel .p-hd h3 { font-size: 17px; font-weight: 700; margin: 0; color: var(--v2-ink); }
.v2-panel .p-hd .sub { font-size: 12.5px; color: var(--v2-ink3); margin-top: 1px; }
.v2-panel .p-hd .cnt { background: var(--v2-crit-s); color: var(--v2-crit); font-weight: 700;
  font-size: 12px; border-radius: 999px; padding: 2px 10px; }
.v2-panel .p-hd .go { font-size: 13px; font-weight: 700; color: var(--v2-green); text-decoration: none; }

/* action list rows */
.v2-act { display: flex; align-items: center; gap: 13px; padding: 13px 10px; margin: 0 -10px;
  border-top: 1px solid var(--v2-line); border-radius: 9px; transition: background .12s ease; }
/* Bob 08-05: rows answer the mouse — warm wash on hover. */
.v2-act:hover { background: var(--v2-panel); }
.v2-act .ic { width: 40px; height: 40px; flex: none; border-radius: 11px; background: var(--v2-good-s);
  display: flex; align-items: center; justify-content: center; font-size: 16px; }
.v2-act .ic.warn { background: var(--v2-warn-s); } .v2-act .ic.crit { background: var(--v2-crit-s); }
.v2-act .bd { min-width: 0; flex: 1; }
.v2-act .tt { font-size: 14px; font-weight: 700; color: var(--v2-ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.v2-act .tt a { color: inherit; text-decoration: none; }
.v2-act .ss { font-size: 12.5px; color: var(--v2-ink3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-act .day { font-size: 12.5px; font-weight: 700; color: var(--v2-ink2); flex: none; }
.v2-act .day.crit { color: var(--v2-crit); }
.v2-btn { display: inline-block; flex: none; font-size: 13px; font-weight: 700; border-radius: 9px;
  padding: 6px 15px; text-decoration: none; border: 1px solid var(--v2-line); color: var(--v2-ink);
  background: var(--v2-card); transition: .12s; }
.v2-btn:hover { border-color: var(--v2-green); color: var(--v2-green); }
.v2-btn.pri { background: var(--v2-green); border-color: var(--v2-green); color: #fff; }
.v2-btn.pri:hover { background: var(--v2-green-deep); color: #fff; }

/* ledger rows (the money trail) */
.v2-ledger { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--v2-line); }
.v2-ledger .flow { display: flex; align-items: center; gap: 6px; flex: none; width: 118px; }
.v2-ledger .flow .arr { color: var(--v2-ink3); font-size: 11px; }
.v2-ledger .bd { min-width: 0; flex: 1; }
.v2-ledger .tt { font-size: 14.5px; font-weight: 700; color: var(--v2-ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.v2-ledger .ss { font-size: 12.5px; color: var(--v2-ink3); margin-top: 2px; }
.v2-ledger .amt { flex: none; text-align: right; }
.v2-ledger .amt .n { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--v2-ink); }
.v2-ledger .amt .u { display: block; font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--v2-ink3); margin-top: 1px; }

/* ---- money: tabular numerals everywhere ----------------------------------- */
td, .table, .v2-num, .fs-30 { font-variant-numeric: tabular-nums; }

/* ============================================================================
   GLOBAL NAV (pine bar → the approved hybrid nav)
   ========================================================================== */
header .navbar { padding-top: calc(8px + env(safe-area-inset-top)); padding-bottom: 8px;
  top: 0; z-index: 1030; }  /* fixed bar: pin + paint above page banners */
/* the legacy vendor bootstrap predates .navbar>.container-xxl — lay the row out ourselves */
header .navbar > .v2-navwrap { display: flex; flex-wrap: nowrap; align-items: center; gap: 2px;
  max-width: 1560px; margin: 0 auto; }
header .navbar-brand.logo { margin-right: 4px; }
header .navbar-brand.logo img { height: 32px !important; border-radius: 9px; }
header .navbar .navbar-collapse { min-width: 0; }
header .navbar .v2-links { flex-wrap: nowrap; }
header .navbar .btn.btn-success.btn-sm { white-space: nowrap; }

/* company switcher pill */
.v2-copill { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14); border-radius: 11px; padding: 6px 13px; white-space: nowrap; }
.v2-copill .co { color: #FFFFFF; font-weight: 700; font-size: 13.5px; }
.v2-copill .seg { color: #8FB49C; font-weight: 600; font-size: 12.5px; text-decoration: none; letter-spacing: .01em; }
.v2-copill .seg:hover { color: #EAF1EA; }
.v2-copill .seg.on { color: #FFFFFF; }
/* Bob 08-05: "they are more like separate companies" — the active side wears a
   FILLED chip (emerald = Layers, gold = Pullet Co) and the whole nav carries a
   matching accent stripe, so which book you're standing in is unmistakable. */
body[data-side="layer"] .v2-copill .seg.on { background: #2C7A54; color: #fff; border-radius: 7px; padding: 3px 10px; }
body[data-side="pullet"] .v2-copill .seg.on { background: #C9A227; color: #14301F; border-radius: 7px; padding: 3px 10px; }
/* 08-05 Bob: Pip's real button — egg face in the nav, gold on hover. */
.v2-pipbtn { display: inline-flex; align-items: center; }
.v2-pipbtn svg { filter: drop-shadow(0 1px 2px rgba(12,30,20,.35)); }
.v2-pipbtn:hover svg { transform: translateY(-1px); }

/* 08-05 Bob: shared task pool, two companies — tiny business tag on every row. */
.v2-sidetag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .04em;
  border-radius: 5px; padding: 1px 6px; vertical-align: 1px; }
.v2-sidetag.layer  { background: var(--v2-good-s); color: #1F6B47; }
.v2-sidetag.pullet { background: var(--v2-gold-s); color: var(--v2-gold-ink); }

/* 08-05 Bob "even more evident": the whole NAV BAR changes company — Layers
   keeps the pine; Pullet Co goes dark bronze. Stripe + pill still match. */
body[data-side="pullet"] header .navbar,
body[data-side="pullet"] header nav.navbar,
body[data-side="pullet"] .topnav-menu { background: #33290E !important; border-bottom-color: #4A3D18 !important; }
body[data-side="pullet"] header .navbar .nav-link i { color: #C9B879; }
body[data-side="pullet"] header .navbar .v2-links .nav-link.on { background: #4A3D18; }
body[data-side="pullet"] .v2-navmark rect { fill: #4A3D18; }

/* the whole pill wears the company color — name tinted to match */
body[data-side="layer"] .v2-copill { background: rgba(44,122,84,.28); border-color: rgba(127,209,162,.55); }
body[data-side="layer"] .v2-copill .co { color: #9FE0BC; }
body[data-side="pullet"] .v2-copill { background: rgba(201,162,39,.22); border-color: rgba(232,201,90,.55); }
body[data-side="pullet"] .v2-copill .co { color: #EFD57E; }
body[data-side="layer"] header .navbar { box-shadow: inset 0 -3px 0 #2C7A54; }
body[data-side="pullet"] header .navbar { box-shadow: inset 0 -3px 0 #C9A227; }
.v2-copill .arr { color: #5F826D; font-size: 11px; }

/* center links */
header .navbar .v2-links .nav-link { color: #D9E5DB !important; font-weight: 600; font-size: 13px;
  padding: 7px 10px !important; border-radius: 9px; white-space: nowrap; line-height: 1.3; }
header .navbar .v2-links .nav-link:hover { color: #fff !important; background: rgba(255,255,255,.06); }
header .navbar .v2-links .nav-link.on { color: #fff !important; background: var(--v2-pine-2); }
.v2-navbadge { background: #C9A227; color: #14301F; font-weight: 800; font-size: 10.5px;
  border-radius: 999px; padding: 1px 7px; vertical-align: 2px; margin-left: 4px; }

/* search */
header .navbar form.v2-search { min-width: 0; flex: 0 1 230px; }
/* punch #132: the box could shrink until the placeholder read "Search P" —
   a floor keeps the word whole; past that the bar wraps (rule below). */
header .navbar form.v2-search input.form-control { min-width: 96px; width: 100%; }
/* punch #132, same law as the 992-1199 sweep fix: at ANY width, when the row's
   content outgrows the viewport (long username, many links, the practice
   banner corner) the bar wraps to a second line — nothing overlaps, nothing
   leaves the screen. Wide bars that fit are untouched (wrap only fires when
   needed). */
@media (min-width: 1200px) {
  .navbar.topnav-menu { height: auto; min-height: 70px; }
  header .navbar > .v2-navwrap, header .navbar .navbar-collapse { flex-wrap: wrap; }
}

/* grid children may shrink (long task titles must not blow the layout open) */
.cc .grid > *, .v2-kpis > * { min-width: 0; }

/* bell badge — contained inside the nav bar (Bob 07-30: it was clipping above
   the bar). The legacy theme's line-height stretched the wrapper to the full
   bar height, pushing the pill out the top — collapse it to the icon, then
   overlap the bell's top-right corner, fully inside the bounds. */
header .navbar .nav-link .position-relative { line-height: 1; vertical-align: middle; }
header .navbar .nav-link .position-relative > .badge.rounded-pill {
  transform: none !important;
  top: -6px !important; left: auto !important; right: -9px;
  background: #C9A227 !important; color: #14301F !important;
  box-shadow: 0 0 0 2px #14301F; font-weight: 800;
}

/* avatar chip */
.v2-avatar { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 9px; background: #EAF1EA; color: var(--v2-pine); font-weight: 800; font-size: 12px;
  letter-spacing: .02em; margin-right: 7px; }

/* ============================================================================
   SKIN SWEEP — carry the card language across existing screens (additive; the
   table DOM the tests assert is untouched, only painted).
   ========================================================================== */
main table.table { background: var(--v2-card); border-collapse: separate; border-spacing: 0;
  border-radius: 12px; overflow: hidden; box-shadow: var(--v2-shadow); border: 1px solid var(--v2-line); }
main table.table > :not(caption) > * > * { border-color: #EFEADC; }
main table.table thead th { background: #F7F4EA; font-size: 12px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--v2-ink2); }
main .card table.table { box-shadow: none; border: 0; border-radius: 0; }

.btn { border-radius: 9px; font-weight: 600; }
.badge { font-weight: 700; }
.breadcrumb { font-size: 13px; }
.modal-content { box-shadow: 0 24px 60px -24px rgba(20,48,31,.35); }

/* The legacy theme fixes the navbar but only offsets the body on desktop —
   on phones the first ~60px of every page hid under the bar (visible in the
   1.5 app-scan shot too). Pad it on mobile so nothing is clipped. */
@media (max-width: 991.98px) {
  body { padding-top: calc(76px + env(safe-area-inset-top)); }
  .v2-navwrap { flex-wrap: wrap !important; }        /* the opened menu drops below the bar */
  header .navbar .navbar-collapse { width: 100%; }
  header .navbar .v2-links { flex-direction: column; width: 100%; padding: 8px 0 2px; }
  header .navbar .v2-links .nav-link { padding: 11px 10px !important; font-size: 15px;
    border-radius: 10px; }                            /* finger-friendly targets */
  header .navbar form.v2-search { flex: 1 1 100%; margin: 6px 0; }
  header .navbar .navbar-toggler { border-color: rgba(255,255,255,.25); border-radius: 9px; }
  .v2-banner { flex-wrap: wrap; }
  .v2-banner .act { margin-left: 52px; }
}

/* SWEEP 2026-08-19 finding 1 (punches #29/#52/#69): at 992-1199px the expanded
   nav's content (9 module links + search + Pip + bell + user chip ≈ 1194px of
   min-content) is wider than the viewport; flex nowrap shoved the whole right
   group — bell, user menu, Log Out — exactly 170px off-screen on all 29 pages,
   the sole cause of app-wide h-scroll at 1024. The bar is in NORMAL FLOW at
   ≥992 (the legacy fixed-position rule is phone-only), so the row wraps to a
   second line instead of overflowing: nothing can ever leave the viewport,
   whatever the role's link count or the user's name length. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .navbar.topnav-menu { height: auto; min-height: 70px; }
  header .navbar > .v2-navwrap { flex-wrap: wrap; }
  header .navbar .navbar-collapse { flex-wrap: wrap; }
  header .navbar .v2-links { flex-wrap: wrap; }
  /* wrapped rows keep the bar's rhythm — no 70px legacy line boxes on row two */
  .navbar.topnav-menu .navbar-nav > .nav-item > .nav-link {
    line-height: 1.4; max-height: none; padding: 8px 10px; }
  header .navbar .v2-links .nav-link { padding: 7px 8px !important; }
  header .navbar form.v2-search { flex: 0 1 180px; }
}

/* SWEEP findings 2-3 (punches #12/#31): the legacy theme centers EVERY navbar
   panel under its toggle (`.navbar-nav .dropdown-menu { left:50% }` +
   `translate3d(-50%,…)` inside its min-width:992 block, theme.min.css) — which
   defeats dropdown-menu-end and pushed the user panel 38px past the viewport
   at 1440 and 224px at 1024. Right-edge panels hug the right edge again; the
   centered look stays for the mid-bar module menus, which fit. */
@media (min-width: 992px) {
  header .navbar .navbar-nav .dropdown-menu.dropdown-menu-end {
    left: auto !important; right: 0 !important;
    transform: translate3d(0, 30px, 0) !important;
  }
  header .navbar .navbar-nav .dropdown-menu.dropdown-menu-end.show,
  header .navbar .navbar-nav .dropdown:hover .dropdown-menu.dropdown-menu-end {
    transform: translate3d(0, 1px, 0) !important;
  }
}

/* footer */
footer .text-muted { color: var(--v2-ink3) !important; }

/* ============================================================================
   WAVE 1 — PER-SCREEN RECOMPOSITION SHARED COMPONENTS
   The dashboard command center is the reference implementation; these lift its
   patterns (page voice, panels, act rows, ledger rows, id cards, board columns,
   composed forms) into shared classes every screen can use.
   ========================================================================== */

/* ---- page header: serif voice + sub + right-side action -------------------- */
.v2-hd { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px;
  flex-wrap: wrap; margin: 18px 0 14px; }
.v2-hd .ttl { font-family: var(--v2-serif); font-weight: 600; letter-spacing: -.02em;
  color: var(--v2-ink); margin: 0; font-size: 27px; line-height: 1.15; }
.v2-hd .ttl a { color: inherit; text-decoration: none; }
.v2-hd .sub { color: var(--v2-ink2); font-size: 13.5px; margin: 2px 0 0; }
.v2-hd .sub b { color: var(--v2-ink); }
.v2-hd .go { font-size: 13px; font-weight: 700; color: var(--v2-green); text-decoration: none; white-space: nowrap; }
/* SWEEP finding 11: the action row must wrap — /trucking/week's five buttons
   put Print 222px past a 390 viewport when this row couldn't break. */
.v2-hd .act { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---- section eyebrow ------------------------------------------------------- */
.v2-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--v2-ink3); margin: 20px 0 8px; }

/* ---- key/value rows inside panels (shared .cc .row2) ------------------------ */
.v2-row { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--v2-line); font-size: 13.5px; }
.v2-row:last-child { border-bottom: 0; }
.v2-row b, .v2-row strong { color: var(--v2-ink); font-variant-numeric: tabular-nums; }
.v2-row a { color: inherit; }

/* ---- v2-btn works as a <button> too (button_to) ----------------------------- */
button.v2-btn { cursor: pointer; line-height: 1.4; }
form.v2-inline { display: inline; }

/* ---- panel grids ------------------------------------------------------------ */
.v2-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.v2-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.v2-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.v2-grid2 > *, .v2-grid3 > *, .v2-grid4 > * { min-width: 0; }
@media (max-width: 1100px) { .v2-grid4 { grid-template-columns: 1fr 1fr; } .v2-grid3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px)  { .v2-grid2, .v2-grid3, .v2-grid4 { grid-template-columns: 1fr; } }

/* ---- stat-table card: a titled panel whose body is a table ------------------ */
/* top-severity row tint — the earned red, warm not Bootstrap's table-danger */
main .table > tbody > tr.v2-rowcrit > td { background: var(--v2-crit-s); }
main .table > tbody > tr.v2-rowcrit > td:first-child { box-shadow: inset 3px 0 0 var(--v2-crit); }

.v2-tablecard { background: var(--v2-card); border: 1px solid var(--v2-line);
  border-radius: 15px; box-shadow: var(--v2-shadow); overflow: hidden; }
.v2-tablecard .t-hd { display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; padding: 15px 18px 11px; flex-wrap: wrap; }
.v2-tablecard .t-hd h4, .v2-tablecard .t-hd h3 { font-size: 16px; font-weight: 700; margin: 0; color: var(--v2-ink); }
.v2-tablecard .t-hd .sub { font-size: 12.5px; color: var(--v2-ink3); }
.v2-tablecard .t-bd { overflow-x: auto; }
.v2-tablecard table.table { box-shadow: none; border: 0; border-radius: 0; margin-bottom: 0; }
.v2-tablecard table.table thead th { border-top: 1px solid #EFEADC; }

/* every wide table scrolls inside its card, never the page */
main .card .table-responsive, main .card-body.table-responsive { overflow-x: auto; }

/* ---- identity card (barn / farmer / flock show headers) --------------------- */
.v2-id { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--v2-card); border: 1px solid var(--v2-line); border-radius: 15px;
  box-shadow: var(--v2-shadow); padding: 18px 20px; margin: 14px 0; }
.v2-id .glyph { width: 52px; height: 52px; border-radius: 14px; background: var(--v2-good-s);
  display: flex; align-items: center; justify-content: center; font-size: 24px; flex: none; }
.v2-id .who { min-width: 0; }
.v2-id .nm { font-family: var(--v2-serif); font-size: 24px; font-weight: 600;
  letter-spacing: -.02em; color: var(--v2-ink); line-height: 1.15; }
.v2-id .meta { font-size: 12.5px; color: var(--v2-ink3); margin-top: 2px; }
.v2-id .meta b { color: var(--v2-ink2); }
.v2-id .kstats { margin-left: auto; display: flex; gap: 26px; text-align: right; flex-wrap: wrap; }
.v2-id .k .n { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--v2-ink); }
.v2-id .k .l { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--v2-ink3); }
@media (max-width: 700px) { .v2-id .kstats { margin-left: 0; width: 100%; justify-content: flex-start; text-align: left; } }

/* ---- board / day-column composition ----------------------------------------- */
.v2-cols { display: grid; gap: 12px; align-items: start; }
.v2-col { background: var(--v2-panel); border: 1px solid var(--v2-line); border-radius: 14px;
  padding: 11px; min-width: 0; }
.v2-col .c-hd { display: flex; justify-content: space-between; align-items: baseline; gap: 6px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--v2-ink2); padding: 2px 5px 9px; }
.v2-col .c-hd .n { color: var(--v2-ink3); font-weight: 700; }
.v2-tile { background: var(--v2-card); border: 1px solid var(--v2-line); border-radius: 11px;
  padding: 10px 12px; margin-bottom: 8px; box-shadow: 0 1px 2px rgba(30,40,28,.04);
  font-size: 13px; transition: box-shadow .12s, transform .12s; }
.v2-tile:last-child { margin-bottom: 0; }
.v2-tile:hover { box-shadow: var(--v2-shadow-hover); transform: translateY(-1px); }
.v2-tile .tt { font-weight: 700; color: var(--v2-ink); font-size: 13px; }
.v2-tile .ss { font-size: 12px; color: var(--v2-ink3); margin-top: 1px; }

/* ---- folder cards (documents drive) ----------------------------------------- */
.v2-folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 13px; }
.v2-folder { display: flex; align-items: center; gap: 12px; background: var(--v2-card);
  border: 1px solid var(--v2-line); border-radius: var(--v2-radius); box-shadow: var(--v2-shadow);
  padding: 13px 15px; color: var(--v2-ink); text-decoration: none; transition: box-shadow .12s, transform .12s; min-width: 0; }
.v2-folder:hover { box-shadow: var(--v2-shadow-hover); transform: translateY(-1px); color: var(--v2-ink); }
.v2-folder .ic { width: 40px; height: 40px; flex: none; border-radius: 11px; background: var(--v2-warn-s);
  display: flex; align-items: center; justify-content: center; font-size: 17px; color: var(--v2-warn); }
.v2-folder .bd { min-width: 0; }
.v2-folder .tt { font-weight: 700; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-folder .ss { font-size: 12px; color: var(--v2-ink3); }

/* ---- composed form fields (Wave-1 group 8: fields stop looking Bootstrap) --- */
main .form-control, main .form-select, main textarea.form-control {
  border: 1px solid var(--v2-line); border-radius: 9px; color: var(--v2-ink); }
main .form-control:focus, main .form-select:focus {
  border-color: var(--v2-green); box-shadow: 0 0 0 3px rgba(31,107,71,.13); }
main .form-label { font-weight: 600; font-size: 12.5px; color: var(--v2-ink2); }
main .form-text { color: var(--v2-ink3); }
.v2-fieldset { background: var(--v2-card); border: 1px solid var(--v2-line);
  border-radius: 15px; box-shadow: var(--v2-shadow); padding: 17px 19px; }
.v2-fieldset .lg { font-size: 11px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--v2-ink3); margin-bottom: 12px; }

/* ---- composed quick-add bar -------------------------------------------------- */
.v2-quickadd { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.v2-quickadd .fg { flex: 1 1 130px; min-width: 0; }
.v2-quickadd .fg.wide { flex: 3 1 240px; }
.v2-quickadd .fg label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--v2-ink3); margin-bottom: 4px; }

/* ---- tinted money stat cards (aging buckets etc.) ---------------------------- */
.v2-bucket { background: var(--v2-card); border: 1px solid var(--v2-line); border-left: 4px solid var(--v2-good);
  border-radius: var(--v2-radius); box-shadow: var(--v2-shadow); padding: 13px 16px; min-width: 0; }
.v2-bucket.warn { border-left-color: var(--v2-warn); }
.v2-bucket.crit { border-left-color: var(--v2-crit); }
.v2-bucket .l { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--v2-ink3); }
.v2-bucket .n { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--v2-ink); margin-top: 3px; }
.v2-bucket .s { font-size: 12px; color: var(--v2-ink3); margin-top: 1px; }

/* ---- report interiors: composed run bar, tight rows, quiet zeros ------------- */
form.v2-runbar { background: var(--v2-card); border: 1px solid var(--v2-line);
  border-radius: var(--v2-radius); box-shadow: var(--v2-shadow); padding: 12px 16px 14px;
  margin-left: 0; margin-right: 0; }
.report-tight th, .report-tight td { padding-top: 6px; padding-bottom: 6px; line-height: 1.35; }
td.v2-zero, .v2-zero { color: var(--v2-ink3); }

/* ---- Trix editor: toolbar flush to the body, warm frame ---------------------- */
main trix-toolbar { background: #F7F4EA; border: 1px solid var(--v2-line); border-bottom: 0;
  border-radius: 10px 10px 0 0; padding: 6px 8px; margin-bottom: 0; }
main trix-toolbar .trix-button { border-bottom: 0; }
main trix-editor.form-control { border: 1px solid var(--v2-line); border-radius: 0 0 10px 10px; }
main trix-editor.form-control:focus { border-color: var(--v2-green); box-shadow: 0 0 0 3px rgba(31,107,71,.13); }

/* ---- BOL register: tight row rhythm ------------------------------------------ */
.bol-register th, .bol-register td { padding-top: 7px; padding-bottom: 7px; line-height: 1.35; }

/* ---- honest empty values (was "---" / bare "0") ------------------------------ */
.v2-na { color: var(--v2-ink3); font-style: italic; font-size: .92em; }

/* ---- detail-page tabs + tab panels in the warm voice -------------------------
   ⚠ tab DOM untouched (<button data-bs-target> — walkthrough asserts it);
   paint only. */
main .nav-tabs { border-bottom-color: var(--v2-line); }
main .nav-tabs .nav-link { color: var(--v2-ink2); font-weight: 600; font-size: 13.5px;
  border-top-left-radius: 10px; border-top-right-radius: 10px; }
main .nav-tabs .nav-link:hover { border-color: var(--v2-line) var(--v2-line) transparent; }
main .nav-tabs .nav-link.active { border-color: var(--v2-line) var(--v2-line) #fff; background: #fff; }
main .tab-content.border { border-color: var(--v2-line) !important; box-shadow: var(--v2-shadow); }
.v2-id + .card { border-top-left-radius: var(--v2-radius); }

/* ---- materials week board: day columns in the board voice -------------------- */
#mat-week-board .mat-day { background: var(--v2-panel); border: 1px solid var(--v2-line);
  border-radius: 14px; box-shadow: none; }
#mat-week-board .mat-day > .card-header { background: transparent; border-bottom: 0;
  padding: 10px 12px 4px; }
#mat-week-board .mat-day > .card-header .fw-bold { letter-spacing: .06em; color: var(--v2-ink2); }
#mat-week-board .mat-card { border: 1px solid var(--v2-line); border-radius: 11px;
  box-shadow: 0 1px 2px rgba(30,40,28,.04); transition: box-shadow .12s, transform .12s; }
#mat-week-board .mat-card:hover { box-shadow: var(--v2-shadow-hover); transform: translateY(-1px); }
#mat-week-board .mat-empty { border: 1.5px dashed var(--v2-line); border-radius: 10px;
  padding: 14px 0 !important; margin-top: 4px; }

/* ---- document panels: card headers in the warm register voice ---------------- */
main .card > .card-header { background: #F7F4EA; border-bottom: 1px solid var(--v2-line);
  font-size: 13px; font-weight: 700; color: var(--v2-ink); letter-spacing: .01em; }
main .card > .list-group-flush .list-group-item { border-color: #EFEADC; }

/* The legacy theme's hover-dropdown keeps every navbar menu display:block +
   visibility:hidden at ≥992px — an invisible 296px box hanging off the avatar
   that gives EVERY page a phantom horizontal scrollbar (+67px at 1440).
   Menus here open by click (data-bs-toggle="dropdown" → .show), so restore the
   Bootstrap default hidden state. */
@media (min-width: 992px) {
  header .navbar .navbar-nav .dropdown-menu:not(.show) { display: none; }
}

/* CFO desk: wide money tables scroll inside their own card, never the page
   (the YoY revenue table outgrows its col-lg-4 card once real figures land) */
.cfo .card-body { overflow-x: auto; }

/* ============================================================================
   CONTRACT SCREENS — beauty pass (benchmark: p2-contract.png / hybrid-dash.png)
   ========================================================================== */

/* ---- contract stat cards: icon chip + uppercase label + big tabular number -- */
.v2-stat { background: var(--v2-card); border: 1px solid var(--v2-line); border-radius: var(--v2-radius);
  box-shadow: var(--v2-shadow); padding: 15px 17px 13px; min-width: 0; }
.v2-stat .s-hd { display: flex; align-items: center; gap: 10px; }
.v2-stat .s-hd .ic { width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--v2-good-s);
  display: flex; align-items: center; justify-content: center; font-size: 15px; }
.v2-stat .s-hd .ic.warm { background: var(--v2-warn-s); }
.v2-stat .s-hd .lbl { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--v2-ink3); }
.v2-stat .num { font-size: 27px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1;
  margin-top: 10px; color: var(--v2-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.v2-stat .num .dec { font-size: 15px; color: var(--v2-ink3); font-weight: 700; }
.v2-stat .ss { font-size: 12.5px; color: var(--v2-ink3); margin-top: 5px; }
.v2-stat .ss b { color: var(--v2-ink2); font-variant-numeric: tabular-nums; }
.v2-stat .ss b.crit { color: var(--v2-crit); }
.v2-stat .trow { display: flex; justify-content: space-between; align-items: center; gap: 8px;
  font-size: 13px; color: var(--v2-ink2); padding: 4.5px 0; border-bottom: 1px solid #F3EFE4; }
.v2-stat .trow:last-child { border-bottom: 0; padding-bottom: 0; }
.v2-stat .trow b { color: var(--v2-ink); }
.v2-stat .trows { margin-top: 9px; }

/* ---- contract money tables: the ledger rhythm (tight rows, quiet chrome) ---- */
.contract-ledger th, .contract-ledger td { padding-top: 7px; padding-bottom: 7px; line-height: 1.4; }
.contract-ledger td { font-size: 13.5px; }
.contract-ledger tbody tr:hover { background: #FBF9F3; }

/* ---- "On the record" event ledger rows (p2-contract right column) ----------- */
.v2-record { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0;
  border-top: 1px solid var(--v2-line); }
.v2-record:first-child { border-top: 0; }
.v2-record .bd { min-width: 0; flex: 1; }
.v2-record .tt { font-size: 13.5px; font-weight: 700; color: var(--v2-ink); line-height: 1.35; }
.v2-record .ss { font-size: 12.5px; color: var(--v2-ink3); margin-top: 2px; overflow-wrap: anywhere; }
.v2-record .when { flex: none; font-size: 12.5px; font-weight: 700; color: var(--v2-ink2);
  white-space: nowrap; padding-top: 1px; }

/* ---- signature party cards + label-wrapped file input ----------------------- */
.v2-sig { background: var(--v2-card); border: 1px solid var(--v2-line); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 10px; box-shadow: 0 1px 2px rgba(30,40,28,.04); }
.v2-sig:last-child { margin-bottom: 0; }
.v2-sig .hd { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.v2-sig .who { font-weight: 700; font-size: 13.5px; color: var(--v2-ink); }
.v2-sig .meta { font-size: 12.5px; color: var(--v2-ink3); margin-top: 5px; line-height: 1.55; }
/* the file input stays in the DOM (tests/function) but the label IS the button */
.v2-file { position: relative; overflow: hidden; cursor: pointer; margin-bottom: 0; }
.v2-file input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; }
.v2-file-name { font-size: 12px; color: var(--v2-ink3); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }

/* ---- §45 [2] the assembly line: drafted → signatures → push → office queue ---
   done = green dot, current = gold dot, not-yet = quiet. Bars light up green
   once the stage to their LEFT is complete. */
.v2-assembly { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--v2-card); border: 1px solid var(--v2-line); border-radius: var(--v2-radius);
  box-shadow: var(--v2-shadow); padding: 12px 18px; }
.v2-assembly .step { display: flex; align-items: center; gap: 9px; min-width: 0; }
.v2-assembly .dot { width: 12px; height: 12px; border-radius: 50%; flex: none;
  background: #E5DFD2; box-shadow: 0 0 0 3px #F5F1E6; }
.v2-assembly .step.done .dot { background: var(--v2-good); box-shadow: 0 0 0 3px var(--v2-good-s); }
.v2-assembly .step.now .dot  { background: var(--v2-warn); box-shadow: 0 0 0 3px var(--v2-warn-s); }
.v2-assembly .bd b { display: block; font-size: 12.5px; font-weight: 800; color: var(--v2-ink);
  line-height: 1.25; white-space: nowrap; }
.v2-assembly .step:not(.done):not(.now) .bd b { color: var(--v2-ink3); }
.v2-assembly .bd i { display: block; font-style: normal; font-size: 11.5px; color: var(--v2-ink3);
  line-height: 1.3; }
.v2-assembly .bar { flex: 1 1 26px; min-width: 18px; height: 2px; border-radius: 2px;
  background: var(--v2-line); }
.v2-assembly .bar.done { background: var(--v2-good); }
@media (max-width: 720px) {
  .v2-assembly { gap: 8px 14px; }
  .v2-assembly .bar { display: none; }
}

/* ---- side-filter pills (contracts register) in the warm voice ---------------- */
.v2-sidepills .nav-link { color: var(--v2-ink2); font-weight: 600; font-size: 13.5px;
  border-radius: 999px; padding: 6px 15px; }
.v2-sidepills .nav-link:hover { background: #F1ECE0; color: var(--v2-ink); }
.v2-sidepills .nav-link.active { background: var(--v2-green); color: #fff; }

/* ---- template library index: quiet actions + 2-line body clamp -------------- */
.v2-btn.quiet { background: #F1ECE0; border-color: #F1ECE0; color: var(--v2-ink); }
.v2-btn.quiet:hover { background: #E9E2D2; border-color: #E9E2D2; color: var(--v2-ink); }
.v2-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 9px; border: 1px solid var(--v2-line); background: var(--v2-card);
  color: var(--v2-ink3); cursor: pointer; transition: .12s; }
.v2-iconbtn:hover { color: var(--v2-crit); border-color: var(--v2-crit); background: var(--v2-crit-s); }
.v2-clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; max-width: 420px; }

/* ---- template editor: document canvas + labeled toolbar + sample preview ----
   ⚠ Trix DOM untouched — canvas/toolbar/heading treatment is CSS only. */
.v2-doccanvas { background: var(--v2-panel); border: 1px solid var(--v2-line); border-radius: 14px;
  padding: 16px 16px 26px; }
.v2-doccanvas trix-toolbar { max-width: 900px; margin: 0 auto 12px; border: 1px solid var(--v2-line);
  border-radius: 10px; background: #FFFDF7; padding: 20px 12px 8px; position: sticky; top: 8px; z-index: 5;
  box-shadow: 0 2px 8px -4px rgba(30,40,28,.14); }
/* Grok punch-fix verdict (7cfa669): the old top:66px assumed a fixed-height
   navbar. At ≥992 the bar is NORMAL FLOW (it scrolls away — and may wrap to
   two lines now), so the toolbar hugs the viewport; on the phone the bar IS
   fixed, so the offset matches the body's own padding rule. */
@media (max-width: 991.98px) {
  .v2-doccanvas trix-toolbar { top: calc(80px + env(safe-area-inset-top)); }
}
.v2-doccanvas trix-toolbar .trix-button-group { position: relative; margin-top: 12px; margin-bottom: 2px; }
.v2-doccanvas trix-toolbar .trix-button-group::before { position: absolute; top: -14px; left: 3px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--v2-ink3); }
.v2-doccanvas trix-toolbar .trix-button-group--text-tools::before { content: "Text style"; }
.v2-doccanvas trix-toolbar .trix-button-group--block-tools::before { content: "Blocks & lists"; }
.v2-doccanvas trix-toolbar .trix-button-group--history-tools::before { content: "Undo"; }
.v2-doccanvas trix-toolbar .trix-button { height: 34px; min-width: 38px; }
/* the page: a document-look writing surface, generous margins, paper shadow */
.v2-doccanvas trix-editor.form-control, .v2-docpage { max-width: 900px; margin: 0 auto; background: #fff;
  border: 1px solid var(--v2-line); border-radius: 6px; padding: 46px 54px; font-size: 14.5px; line-height: 1.7;
  box-shadow: 0 1px 3px rgba(30,40,28,.07), 0 14px 34px -22px rgba(30,40,28,.35); }
.v2-doccanvas trix-editor.form-control { min-height: 640px; max-height: none; }
/* heading hierarchy: Trix h1 blocks + the seeded all-caps <div><strong> lines */
.v2-doccanvas trix-editor h1, .v2-docpage h1 { font-family: var(--v2-serif); font-size: 22px; font-weight: 600;
  letter-spacing: -.01em; color: var(--v2-ink); margin: 24px 0 10px; }
.v2-doccanvas trix-editor div > strong:only-child, .v2-docpage div > strong:only-child {
  display: inline-block; font-size: 15px; letter-spacing: .04em; color: var(--v2-ink); margin: 18px 0 4px; }
@media (max-width: 991.98px) {
  .v2-doccanvas { padding: 10px 8px 16px; }
  .v2-doccanvas trix-editor.form-control, .v2-docpage { padding: 22px 18px; }
  .v2-doccanvas trix-toolbar { top: 0; }
}
#tpl-preview { margin-top: 16px; }
#tpl-preview .pv-label { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--v2-gold-ink); background: var(--v2-gold-s);
  border: 1px dashed var(--v2-gold); border-radius: 8px; padding: 4px 11px; margin: 0 0 10px; }
.tpl-sample-sched { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 13.5px; }
.tpl-sample-sched th, .tpl-sample-sched td { border-bottom: 1px solid var(--v2-line); padding: 6px 8px; text-align: left; }
.tpl-sample-sched th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--v2-ink3); }

/* ---- banked 390px fixes ------------------------------------------------------ */
/* dashboard signature stats: tiles must shrink, then stack on phones */
.cc .stats > * { min-width: 0; }
.cc .stat { flex-wrap: wrap; }
@media (max-width: 480px) { .cc .stats { grid-template-columns: 1fr !important; } }
/* login card: never wider than the phone viewport */
@media (max-width: 480px) {
  .authentication-form .form-control { font-size: 1.05rem !important; }
  .bg-gradient2 .card { max-width: 100vw; overflow-x: hidden; }
}

/* =====================================================================   AUDIT FIX FLEET — FOUNDATIONS BLOCK (design-chair audit, 2026-07-31).
   One agent owns this block; append inside it only. Items: B1 B14 B3 B4 P8 P9 P15.
   ========================================================================== */

/* ---- B1: nav brand = dark egg roundel (inline SVG in the layout; PNG twin at
   /icons/nav-mark.png). Never the cream PWA tile. -------------------------- */
header .navbar-brand.logo .v2-navmark { display: block; }

/* ---- B14: phone hamburger was dark-on-dark (~1.3:1) — cream strokes.
   The legacy theme paints it #32373b at (0,3,1) via
   `.navbar.topnav-menu.navbar-dark .navbar-toggler-icon`; outrank it. -------- */
header .navbar.navbar-dark.topnav-menu .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23FAF7F0' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* ---- B3 ROOT CAUSE: the legacy theme ships
   `.table-sm>:not(caption)>*>*{padding:3.75rem 3.75rem}` (a mangled Bootstrap
   `.375rem`) — 60px of padding on EVERY cell of every table-sm. That's what
   ballooned single-line rows to 145–211px on /cfo /grade_outs /materials
   (labels wrapped one word per line, values clipped at the card edge, pills
   stuffed into circles). Restore a sane compact-cell rhythm; theme.min.css is
   a frozen vendor file, so the correction lives here (loads after, wins on
   specificity: 0,1,2 > 0,1,1). ---------------------------------------------- */
main .table-sm > :not(caption) > * > * { padding: .4rem .55rem; }  /* DESIGN_GUIDELINES §1: 7-9px rhythm, single-line row ≤36px */
/* value cells: right-aligned figures never wrap mid-number */
main .table > :not(caption) > * > .text-end { white-space: nowrap; }
/* pills/badges inside tables stay one-line capsules, never stuffed circles */
main .table .v2-pill, main .table .badge, main .table .pill { white-space: nowrap; }

/* ---- B4: card tables scroll in-card, never pan the page ------------------- */
/* .v2-scrollwrap — wrap any wide table: in-card horizontal scroll with a
   subtle edge-shadow cue while more columns hide off-screen (Lea Verou
   scrolling-shadows; the cover layers scroll with the content). */
.v2-scrollwrap { overflow-x: auto; -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(to right, var(--v2-card) 30%, rgba(255,255,255,0)),
    linear-gradient(to left,  var(--v2-card) 30%, rgba(255,255,255,0)) 100% 0,
    radial-gradient(farthest-side at 0 50%,   rgba(30,40,28,.16), rgba(30,40,28,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(30,40,28,.16), rgba(30,40,28,0)) 100% 0;
  background-repeat: no-repeat;
  background-size: 34px 100%, 34px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll; }
.v2-scrollwrap > table.table { background: transparent; box-shadow: none;
  border: 0; border-radius: 0; margin-bottom: 0; }
/* global guard: on phones nothing may force body-level horizontal panning */
@media (max-width: 991.98px) { body { overflow-x: hidden; } }

/* ---- P8: feedback FAB on phones = icon-only bubble (label span hidden;
   safe-area offsets live on the widget inline styles) ----------------------- */
@media (max-width: 575.98px) {
  #ozfb .ozfb-lbl { display: none; }
  #ozfb-btn { width: 46px; height: 46px; padding: 0 !important;
    border-radius: 50% !important; font-size: 19px; line-height: 1; }
}

/* ---- P9: tinted-glyph treatment — flat tinted square + icon, replaces raw
   emoji buttons on phone screens (area agents apply) ------------------------ */
.v2-glyph { display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: none; border-radius: 10px;
  background: var(--v2-good-s); color: var(--v2-green); font-size: 15px; line-height: 1; }
.v2-glyph.warn { background: var(--v2-warn-s); color: var(--v2-warn); }
.v2-glyph.crit { background: var(--v2-crit-s); color: var(--v2-crit); }
.v2-glyph.gold { background: var(--v2-gold-s); color: var(--v2-gold-ink); }
.v2-glyph.mute { background: #F1ECE0; color: var(--v2-ink2); }
.v2-glyph.sm { width: 28px; height: 28px; border-radius: 8px; font-size: 13px; }
.v2-glyph.lg { width: 44px; height: 44px; border-radius: 12px; font-size: 18px; }
a.v2-glyph, button.v2-glyph { border: 0; text-decoration: none; cursor: pointer;
  transition: filter .12s; }
a.v2-glyph:hover, button.v2-glyph:hover { filter: brightness(.95); }

/* ---- P15: collapsed menu — the floating gold "350" becomes a labeled
   "Tasks · 350" row (label markup in the layout, d-lg-none). Root cause was
   the bell glyph rendering dark-on-dark, leaving its badge looking unattached
   — the same happens on desktop, so the bell is cream at every width. ------- */
header .navbar .nav-link.v2-bell { color: #D9E5DB !important; }
header .navbar .nav-link.v2-bell:hover { color: #fff !important; }
/* the overlaid count pill (31px wide) was fully covering the 13px bell glyph —
   flow it inline beside the bell instead (same language as the Inbox navbadge) */
header .navbar .v2-bell .position-relative > .badge.rounded-pill {
  position: static !important; margin-left: 4px; vertical-align: 3px; }
@media (max-width: 991.98px) {
  header .navbar .v2-bell { display: flex; align-items: center; gap: 10px;
    color: #D9E5DB !important; font-weight: 600; font-size: 15px;
    padding: 11px 10px !important; border-radius: 10px; }
  header .navbar .v2-bell .position-relative > .badge { display: none; } /* count lives in the label */
  header .navbar .v2-bell .v2-bell-lbl { color: #fff; }
}

/* ---- END FOUNDATIONS BLOCK ------------------------------------------------ */

/* My Day desk rows: the value side is a number or a pill and must never break
   mid-figure ("2 · $12,400" split over two lines reads as two numbers). The
   label shrinks instead. The ACH row holds several pills and still wraps —
   each pill just keeps itself whole. */
.myday .v2-row > span:first-child { min-width: 0; }
.myday .v2-row b, .myday .v2-row .v2-pill { white-space: nowrap; }

/* the alert strip and the money trail both ran as ragged towers at 390px */
@media (max-width: 576px) {
  /* alerts read as one line: drop the long details fragment, keep the audience,
     the due date and the "and N more" link, and give the actions their own row */
  .v2-banner { align-items: flex-start; padding: 12px 14px; gap: 10px; }
  .v2-banner .tt { font-size: 14px; line-height: 1.25; }
  .v2-banner .ss .det { display: none; }
  .v2-banner .act { margin-left: 0; width: 100%; }

  /* money trail: .bd was a sliver wedged between the 118px flow chips and the
     amount — give the copy the full width and sit chips + amount above it */
  .v2-ledger { flex-wrap: wrap; gap: 4px 12px; }
  .v2-ledger .flow { order: 1; width: auto; }
  .v2-ledger .amt { order: 2; margin-left: auto; }
  .v2-ledger .bd { order: 3; flex: 1 1 100%; }
  .v2-ledger .amt .u { display: inline; margin-left: 6px; }
}

/* 08-05 Bob: wide tables advertise their hidden columns — bouncing gold arrow
   + right-edge fade until the user reaches the end. Click = page right. */
.v2-scrollfade::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 56px;
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(246,241,231,.92));
  pointer-events: none; border-radius: 0 var(--v2-radius) var(--v2-radius) 0; }
/* SWEEP findings 15 + 89 family: the cue gets its OWN SPACE. The old fixed
   mid-viewport "more →" pill sat ON the very cells it advertised (4.04, 1.55,
   the MATERIAL OUT header). Now it is a slim in-flow strip ABOVE the wrapped
   table — a real row that can never cover a cell — sticky so it stays in view
   down a tall table, gone the moment the reader reaches the last column.
   Attached app-wide by shared/_scrollhint (one idiom, every wrapped table). */
.v2-scrollcue { display: flex; align-items: center; justify-content: flex-end; gap: 7px;
  background: #F7F4EA; border-bottom: 1px solid var(--v2-line); color: var(--v2-gold-ink);
  font-weight: 700; font-size: 12px; letter-spacing: .02em; padding: 5px 12px;
  cursor: pointer; user-select: none; position: sticky; top: 0; z-index: 7; }
.v2-scrollcue .fa-arrow-right { animation: v2bouncex 1.6s ease-in-out infinite; }
/* the phone navbar is FIXED — stick below it, not under it */
@media (max-width: 991.98px) { .v2-scrollcue { top: calc(60px + env(safe-area-inset-top)); } }
.v2-scrollcue.gone { display: none; }
@keyframes v2bouncex { 0%,100% { transform: translateX(0); } 50% { transform: translateX(6px); } }

/* 08-05 Bob Option 1: real logo on a cream plate (button -> dashboard) +
   segmented Layers/Pullet buttons, active side filled emerald/gold. */
/* low + wide: the mark is horizontal, the plate stays inside the bar's rhythm */
.v2-logoplate { background: #FAF7F0; border-radius: 10px; padding: 4px 18px; display: inline-flex;
  align-items: center; box-shadow: 0 2px 0 rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.15);
  transition: transform .1s ease; flex: none; }
.v2-logoplate:hover { transform: translateY(-1px); }
.v2-logoplate img { height: 30px; width: auto; display: block; }
.v2-seg2 { border-radius: 10px; overflow: hidden; border: 1.5px solid rgba(255,255,255,.35); flex: none; }
.v2-seg2 a { padding: 7px 18px; font-weight: 700; font-size: 13px; color: #CFE0D4;
  text-decoration: none; line-height: 1.2; white-space: nowrap; display: inline-flex; align-items: center; }
.v2-seg2 a + a { border-left: 1.5px solid rgba(255,255,255,.35); }
.v2-seg2 a:hover { color: #fff; background: rgba(255,255,255,.07); }
.v2-seg2 a.on-em { background: #2C7A54; color: #fff; }
.v2-seg2 a.on-gold { background: #C9A227; color: #14301F; }

/* 08-06 Bob: "more like an Excel" — the board card fullscreens; both-axis
   scroll, sticky header row, first column already sticky. Esc exits. */
.sticky-first-col:fullscreen { background: #FAF7F0; padding: 14px; overflow: hidden;
  display: flex; flex-direction: column; border-radius: 0; }
.sticky-first-col:fullscreen .table-responsive { flex: 1; overflow: auto !important; max-height: none; }
/* collapsed borders defeat sticky cells in Chrome — separate them in fullscreen */
.sticky-first-col:fullscreen table { border-collapse: separate; border-spacing: 0; }
.sticky-first-col:fullscreen thead th { position: sticky; top: 0; z-index: 6;
  background: #F6F1E7; box-shadow: 0 1px 0 #E7E0D0; }
/* fallback overlay when the Fullscreen API is unavailable */
.v2-fauxfull { position: fixed !important; inset: 0 !important; z-index: 3000; border-radius: 0 !important;
  background: #FAF7F0; padding: 14px; display: flex; flex-direction: column; }
.v2-fauxfull .table-responsive { flex: 1; overflow: auto !important; }
.v2-fauxfull table { border-collapse: separate; border-spacing: 0; }
.v2-fauxfull thead th { position: sticky; top: 0; z-index: 6; background: #F6F1E7; box-shadow: 0 1px 0 #E7E0D0; }

/* in-card exit control — visible only while the board is fullscreen */
.v2-fsexit { display: none; }
.v2-fsx { display: none; }
.sticky-first-col:fullscreen .v2-fsx, .v2-fauxfull .v2-fsx { display: inline-flex;
  position: absolute; top: 10px; right: 14px; z-index: 21; width: 36px; height: 36px;
  align-items: center; justify-content: center; background: #14301F; color: #fff;
  border: 0; border-radius: 50%; font-size: 15px; cursor: pointer;
  box-shadow: 0 4px 14px -6px rgba(12,30,20,.5); }
.v2-fsx:hover { background: #C0453C; }
.sticky-first-col:fullscreen .v2-fsexit, .v2-fauxfull .v2-fsexit { display: inline-flex;
  position: absolute; top: 10px; right: 60px; z-index: 20; align-items: center; gap: 6px;
  background: #14301F; color: #fff; font-weight: 700; font-size: 12.5px; border: 0;
  border-radius: 9px; padding: 8px 14px; cursor: pointer; box-shadow: 0 4px 14px -6px rgba(12,30,20,.5); }
.v2-fsexit .k { background: rgba(255,255,255,.18); border-radius: 5px; padding: 1px 7px; font-size: 11px; }
.sticky-first-col:fullscreen, .v2-fauxfull { position: relative; }
.sticky-first-col:fullscreen { position: fixed; }

/* Pip menu: never taller than the screen — scrolls itself; compact rows */
.v2-pipmenu { min-width: 270px; max-height: calc(100vh - 84px); overflow-y: auto;
  font-size: 13.5px; }
.v2-pipmenu .dropdown-item { padding-top: .32rem; padding-bottom: .32rem; font-size: 13.5px; }
.v2-pipmenu .dropdown-header { padding-bottom: .2rem; }

/* ---- B3 grower-pay road (Bob's pick — grower-pay-ux-r8t2 §1) --------------
   The flock's sixteen weeks as one road: green fill = money already out the
   door, four stops = the four payments (wk 16 sits bigger — it settles on
   birds sent), the red TODAY flag rides the flock's actual age. */
.v2-road { position: relative; height: 74px; margin: 20px 6px 6px; min-width: 560px; }
.v2-road .track { position: absolute; top: 44px; left: 0; right: 0; height: 6px;
  background: var(--v2-line); border-radius: 4px; }
.v2-road .fill { position: absolute; top: 44px; left: 0; height: 6px;
  background: var(--v2-good); border-radius: 4px; }
.v2-road .stop { position: absolute; top: 36px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 2.5px solid var(--v2-line); transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: var(--v2-ink2); }
.v2-road .stop.done { border-color: var(--v2-good); background: var(--v2-good-s); color: var(--v2-good); }
/* FS08-8: queued = payable created but money NOT out yet — dashed, never filled */
.v2-road .stop.queued { border-color: var(--v2-good); border-style: dashed; background: #fff; color: var(--v2-good); }
.v2-road .stop.next { border-color: var(--v2-gold); background: var(--v2-gold-s); }
.v2-road .stop.big  { width: 28px; height: 28px; top: 33px; font-size: 12px; }
.v2-road .lbl { position: absolute; top: 2px; transform: translateX(-50%); text-align: center;
  font-size: 10.5px; line-height: 1.25; white-space: nowrap; color: var(--v2-ink2); }
.v2-road .lbl b { display: block; font-size: 12px; color: var(--v2-ink); }
.v2-road .lbl.big { font-size: 11.5px; }
.v2-road .lbl.big b { font-size: 13px; }
.v2-road .lbl.end { left: auto; right: 0; transform: none; text-align: right; }
.v2-road .today { position: absolute; top: 28px; transform: translateX(-50%); text-align: center; }
.v2-road .today .flag { width: 2px; height: 34px; background: var(--v2-crit); margin: 0 auto; }
.v2-road .today span { font-size: 9px; color: var(--v2-crit); font-weight: 700; white-space: nowrap; }

/* THE 1024 CLIP WAVE (punches 156-158 + 164, first solo fleet 08-22): three
   tables squeezed their words at tablet width instead of scrolling or
   wrapping. One law for all three: the table scrolls INSIDE its card at
   992-1199 (the page body never scrolls sideways), and the known tight
   columns may wrap instead of biting words in half. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  /* the quote board's BARNS column names farms — let them wrap, never clip */
  #sellable-board .sb-barns { white-space: normal; min-width: 12rem; }
  /* contracts index: the SIGNATURES pills stack instead of shearing */
  .v2-tablecard table td:last-child .badge,
  .v2-tablecard table td .v2-pill { white-space: normal; }
  /* every v2 table card scrolls in its own frame at this width */
  .v2-tablecard { overflow-x: auto; }
  .v2-tablecard table { min-width: 900px; }
}