/* ==========================================================================
   THE INVENTORY SITE'S LOOK (inventory.kowboyfence.com, layouts/inventory_site).
   Chase approved the mockups on 6 Nov 2026 ("those mock ups are gas"), so
   this is their stylesheet (INVENTORY-SITE-2026-11-06/mockups/style.css),
   with two changes only:

   * EVERY RULE IS UNDER .isite, the site layout's <body>. The main app loads
     every stylesheet on every page (stylesheet_link_tag :app), so nothing
     here may reach a main page; nothing does without that class.
   * The mockup drew phone and desk inside frames on one board, so its
     layout followed the frame (container queries). Here it follows the
     screen: the same 700 px line, as media queries. The board's own rules
     (frames, bezels, captions) are gone.

   Kanyon's Location Inventory page underneath: his colours, Rye / Barlow /
   Barlow Condensed, pill buttons, 10 px cards, the barbed-wire strip, brass
   notes. The real-page bits (fonts, the fixed tab bar, the sign-in card's
   extras) are at the end.
   ========================================================================== */

.isite{
  /* Kanyon's light colours, unchanged */
  --bg:#F2F1ED; --surface:#FFFFFF; --sunk:#F7F6F2; --ink:#23292E; --muted:#6A6458;
  --line:#DAD6CC; --gold:#E59A1C; --gold-ink:#23292E;
  --brass:#B9780F; --brass-soft:#FBEBCB; --tan:#8C7449; --wire:#8C7449;
  --warn:#A4352A; --warn-soft:#F6E1DE; --ok:#3F7D4E; --focus:#E59A1C;
  /* added for the premium pass */
  --ok-soft:#E3EFE5; --ink-2:#2E363C; --ink-3:#3A434A; --gold-hi:#F2B544;
  --gold-glow:0 6px 18px -6px rgba(229,154,28,.65);
  --shadow-1:0 1px 2px rgba(35,41,46,.06),0 2px 8px rgba(35,41,46,.05);
  --shadow-2:0 2px 4px rgba(35,41,46,.06),0 12px 32px -8px rgba(35,41,46,.18);
  --shadow-3:0 24px 60px -12px rgba(16,19,22,.45);
  --r-sm:6px; --r:10px; --r-lg:14px; --r-xl:20px; --pill:999px;
  --tap:44px;
  /* Kanyon's six location colours, in his order */
  --loc-bham:#4A5560; --loc-hsv:#E59A1C; --loc-jackson:#8C7449;
  --loc-knox:#5B7A8C; --loc-lou:#A4532F; --loc-nash:#7E8B5A;
  --western:"Rye",Georgia,"Times New Roman",serif;
  --sans:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --cond:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  color-scheme:light;
}
/* Kanyon's dark theme: class="dark" beside "isite" on the <body> */
.isite.dark{
  --bg:#16191C; --surface:#1F2428; --sunk:#1A1E21; --ink:#ECE8DF; --muted:#A79F90;
  --line:#343B40; --gold:#E59A1C; --gold-ink:#16191C;
  --brass:#F0AE3E; --brass-soft:#3A2E18; --tan:#C4A574; --wire:#A79F90;
  --warn:#E8826F; --warn-soft:#3A221E; --ok:#7FB98C; --ok-soft:#1E3324; --focus:#F0AE3E;
  --ink-2:#101315; --ink-3:#1A1E21;
  color-scheme:dark;
}

.isite *,.isite *::before,.isite *::after{box-sizing:border-box}
.isite [hidden]{display:none!important}
.isite{margin:0}
.isite{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased}
.isite button,.isite input,.isite select,.isite textarea{font:inherit;color:inherit}
.isite :focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.isite svg.i{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-4px}
.isite svg.i.sm{width:16px;height:16px;vertical-align:-3px}
.isite svg.i.lg{width:28px;height:28px}

/* ==========================================================================
   2. SCREEN SHELL
   ========================================================================== */
.isite .screen{container-type:inline-size;container-name:screen;position:relative;display:flex;flex-direction:column;
  background:var(--bg);color:var(--ink);overflow:hidden}
.isite .scroll{flex:1;min-height:0;overflow:auto;padding:16px 16px 110px}
@media (min-width:700px){ .isite .scroll{padding:26px 36px 48px} }
.isite .wrap{max-width:1240px;margin:0 auto}

/* ==========================================================================
   3. APP BAR + LOCATION SWITCHER + BARBED WIRE
   ========================================================================== */
.isite .appbar{flex:none;background:linear-gradient(180deg,var(--ink-2),var(--ink));color:#ECE8DF;
  padding:10px 16px 12px;display:flex;align-items:center;gap:12px;position:relative;z-index:5}

.isite .brand{display:flex;align-items:baseline;gap:8px;line-height:1;min-width:0}
.isite .brand .mark{font-family:var(--western);font-size:24px;letter-spacing:.06em;color:#F4EFE4}
.isite .brand .sub{font-family:var(--cond);font-weight:600;font-size:16px;color:var(--gold);white-space:nowrap}
.isite .appbar .spacer{flex:1}
.isite .appbar .who{font-size:13px;color:#A79F90;white-space:nowrap}
.isite .appbar .iconbtn{color:#ECE8DF;border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.06)}
.isite .loc-switch{appearance:none;display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);padding:6px 12px 6px 14px;
  border-radius:var(--pill);border:1px solid rgba(229,154,28,.55);background:rgba(229,154,28,.12);color:#F4EFE4;cursor:pointer;
  font:600 15px var(--sans);white-space:nowrap}
.isite .loc-switch .dot{width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(229,154,28,.25)}
.isite .loc-switch small{font-weight:500;color:#C9BFAE;font-size:12px}
.isite .appbar-row2{flex:none;background:var(--ink);padding:0 16px 12px;display:flex;gap:10px;align-items:center}
@media (min-width:700px){
  .isite .appbar{padding:14px 36px}
  .isite .brand .mark{font-size:32px}.isite .brand .sub{font-size:20px}
  .isite .appbar-row2{padding:0 36px 14px}
}
/* Kanyon's barbed wire strip, drawn with CSS (no SVG pattern id clashes) */
.isite .wire{flex:none;height:14px;color:var(--wire);background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='14'%3E%3Cg fill='none' stroke='%238C7449' stroke-width='1.5'%3E%3Cpath d='M0 7 C20 5 40 9 60 7 S100 5 120 7'/%3E%3Cpath d='M0 8 C20 10 40 6 60 8 S100 10 120 8'/%3E%3Cpath d='M55 2 L65 13 M65 2 L55 13' stroke-linecap='round'/%3E%3C/g%3E%3Crect x='57' y='5.5' width='6' height='4' rx='1.4' fill='%238C7449'/%3E%3C/svg%3E") repeat-x center/120px 14px}
.isite .appbar + .wire{background-color:var(--ink);opacity:1;filter:none}
.isite .wire.on-ink{background-color:var(--ink)}

/* sign-in page masthead (Kanyon's big KOWBOY) */
.isite .mast{display:flex;flex-direction:column;gap:2px;line-height:1}
.isite .mast .mark{font-family:var(--western);font-size:clamp(38px,11cqi,58px);letter-spacing:.06em}
.isite .mast .sub{font-family:var(--cond);font-weight:600;font-size:22px;color:var(--tan)}

/* ==========================================================================
   4. TABS (top segmented, location rail, bottom tab bar)
   ========================================================================== */
.isite .tabs{display:flex;gap:4px;padding:4px;border-radius:var(--pill);background:var(--sunk);border:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.isite .tab{appearance:none;border:0;background:transparent;min-height:36px;padding:6px 16px;border-radius:var(--pill);font-weight:600;font-size:15px;color:var(--muted);white-space:nowrap;cursor:pointer}
.isite .tab[aria-selected="true"],.isite .tab.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-1)}
.isite .tab .count{font:600 13px var(--cond);margin-left:6px;padding:0 7px;border-radius:var(--pill);background:var(--brass-soft);color:var(--brass)}
.isite .tabs.on-ink{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1)}
.isite .tabs.on-ink .tab{color:#A79F90}
.isite .tabs.on-ink .tab.on,.isite .tabs.on-ink .tab[aria-selected="true"]{background:var(--gold);color:var(--gold-ink)}

/* Kanyon's location rail (desktop HQ view) */
.isite .rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(118px,1fr);overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow-1)}
.isite .loc{appearance:none;border:0;border-right:1px solid var(--line);background:transparent;text-align:left;padding:12px 14px;cursor:pointer;min-width:118px}
.isite .loc:last-child{border-right:0}
.isite .loc .n{display:block;font-weight:600;font-size:15px}
.isite .loc .v{display:block;font-family:var(--cond);font-size:18px;color:var(--muted);font-variant-numeric:tabular-nums}
.isite .loc.on,.isite .loc[aria-pressed="true"]{background:var(--ink);color:#F4EFE4}
.isite .loc.on .v,.isite .loc[aria-pressed="true"] .v{color:var(--gold)}

/* bottom tab bar (phone only) */
.isite .tabbar{position:absolute;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:repeat(4,1fr);
  padding:8px 8px 26px;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-top:1px solid var(--line)}
.isite.dark .tabbar{background:rgba(31,36,40,.92)}
.isite .tabbar a,.isite .tabbar button{appearance:none;border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:var(--tap);
  font:600 11.5px var(--sans);color:var(--muted);text-decoration:none;cursor:pointer}
.isite .tabbar .on{color:var(--ink)}
.isite .tabbar .on svg.i{color:var(--brass)}
.isite .tabbar .snap{margin-top:-26px}
.isite .tabbar .snap .camera-btn{width:62px;height:62px}
@media (min-width:700px){ .isite .tabbar{display:none} }

/* desktop side nav (optional) */
.isite .sidenav{display:none}
@media (min-width:700px){
  .isite .with-side{display:grid;grid-template-columns:220px 1fr;min-height:0;flex:1}
  .isite .sidenav{display:flex;flex-direction:column;gap:2px;padding:20px 12px;border-right:1px solid var(--line);background:var(--surface)}
  .isite .sidenav a{display:flex;gap:10px;align-items:center;min-height:var(--tap);padding:0 12px;border-radius:var(--r);color:var(--muted);text-decoration:none;font-weight:600}
  .isite .sidenav a.on{background:var(--brass-soft);color:var(--ink)}
  .isite .sidenav a.on svg.i{color:var(--brass)}
  .isite .sidenav .grow{flex:1}
}

/* ==========================================================================
   5. HEADINGS, HERO NUMBER, STATS, SPLIT BAR
   ========================================================================== */
.isite .section-h{font-family:var(--western);font-weight:400;font-size:24px;letter-spacing:.03em;margin:26px 0 4px;line-height:1.15}
.isite .section-sub{color:var(--muted);margin:0 0 12px;font-size:14px;max-width:70ch}
.isite .page-h{font-family:var(--cond);font-weight:700;font-size:30px;line-height:1.05;margin:0 0 4px}
.isite .page-sub{color:var(--muted);margin:0 0 14px;font-size:15px}
.isite .eyebrow{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tan)}
.isite .hero{display:grid;gap:14px 32px;margin:6px 0 10px}
.isite .hero .lbl{font-size:14px;color:var(--muted);margin:0}
.isite .hero .big{font-family:var(--cond);font-weight:700;font-size:clamp(52px,16cqi,104px);line-height:.92;letter-spacing:-.01em;font-variant-numeric:tabular-nums;margin:2px 0 0}
.isite .hero .big .cents{font-size:.45em;color:var(--muted);vertical-align:.9em;margin-left:2px}
.isite .updated{font-size:13px;color:var(--muted);margin:6px 0 0}
.isite .stats{display:flex;gap:24px;flex-wrap:wrap}
.isite .stat .k{font-size:13px;color:var(--muted)}
.isite .stat .s{font-family:var(--cond);font-weight:600;font-size:26px;font-variant-numeric:tabular-nums;line-height:1.1}
@media (min-width:700px){ .isite .hero{grid-template-columns:1fr auto;align-items:end;margin-top:18px} }
.isite .bar{display:flex;height:30px;border-radius:var(--r-sm);overflow:hidden;background:var(--sunk);border:1px solid var(--line)}
.isite .bar span{display:block;height:100%;border-right:2px solid var(--surface)}
.isite .bar span:last-child{border-right:0}
.isite .legend{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:6px 18px;margin-top:10px;font-size:14px}
.isite .legend .it{display:flex;gap:8px;align-items:baseline}
.isite .legend i{width:11px;height:11px;border-radius:2px;flex:none;display:inline-block}
.isite .legend .pct{color:var(--muted)} .isite .legend .amt{margin-left:auto;font-weight:600;font-variant-numeric:tabular-nums}

/* ==========================================================================
   6. BUTTONS, FIELDS, CHIPS, BADGES
   ========================================================================== */
.isite .btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);padding:9px 20px;
  border:1px solid var(--line);background:var(--surface);border-radius:var(--pill);font-weight:600;font-size:16px;cursor:pointer;white-space:nowrap;text-decoration:none;color:var(--ink)}
.isite .btn:hover{background:var(--sunk)}
.isite .btn.primary{background:linear-gradient(180deg,var(--gold-hi),var(--gold));border-color:#C9850F;color:var(--gold-ink);box-shadow:var(--gold-glow),inset 0 1px 0 rgba(255,255,255,.35)}
.isite .btn.ink{background:var(--ink);border-color:var(--ink);color:#F4EFE4}
.isite .btn.brass{background:var(--brass-soft);border-color:var(--brass);color:var(--ink)}
.isite .btn.ghost{background:transparent;border-color:transparent;color:var(--ink);text-decoration:underline;text-underline-offset:3px;padding-inline:8px}
.isite .btn.danger{background:var(--warn);border-color:var(--warn);color:#fff}
.isite .btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.isite .btn.lg{min-height:56px;font-size:18px;padding-inline:26px}
.isite .btn.sm{min-height:36px;font-size:14px;padding:5px 14px}
.isite .btn.block{display:flex;width:100%}
.isite .btn[disabled],.isite .btn.off{opacity:.45;cursor:not-allowed;box-shadow:none}
.isite .iconbtn{appearance:none;display:inline-grid;place-items:center;width:var(--tap);height:var(--tap);border-radius:50%;border:1px solid var(--line);background:var(--surface);cursor:pointer;color:var(--ink);flex:none}
.isite .btnrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.isite .btnrow.end{justify-content:flex-end}
.isite .btnrow.stack{flex-direction:column;align-items:stretch}

.isite .field{display:block;width:100%;min-height:var(--tap);border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:10px 12px;font-size:16px}
.isite .field:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(229,154,28,.22)}
.isite .field::placeholder{color:#A39C8F}
.isite select.field{appearance:none;padding-right:36px;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236A6458' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center}
.isite label.f{display:block;font-size:13px;font-weight:600;color:var(--muted);margin:0 0 14px}
.isite label.f .field{margin-top:5px;color:var(--ink);font-weight:400}
.isite label.f .hint{display:block;font-weight:400;margin-top:5px}
.isite .search{position:relative}
.isite .search svg.i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted)}
.isite .search .field{padding-left:40px;border-radius:var(--pill)}
.isite .err-text{color:var(--warn);font-size:14px;font-weight:600}
.isite .grid2{display:grid;gap:0 12px}
@media (min-width:700px){ .isite .grid2{grid-template-columns:1fr 1fr} }

.isite .chips{display:flex;gap:8px;flex-wrap:wrap}
.isite .chips.scroll-x{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}
.isite .chip{appearance:none;display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:6px 14px;border-radius:var(--pill);border:1px solid var(--line);
  background:var(--surface);font-weight:600;font-size:14px;white-space:nowrap;cursor:pointer;color:var(--ink)}
.isite .chip.on,.isite .chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#F4EFE4}
.isite .chip.on .k{color:var(--gold)}
.isite .chip .k{font:600 14px var(--cond);color:var(--muted)}
.isite .chip.warn{background:var(--warn-soft);border-color:var(--warn);color:var(--warn)}
.isite .chip.gold{background:var(--brass-soft);border-color:var(--brass)}

.isite .badge{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;line-height:1;border-radius:var(--pill);padding:4px 9px;border:1px solid var(--line);background:var(--sunk);color:var(--muted);white-space:nowrap}
.isite .badge.gold{background:var(--brass-soft);border-color:var(--brass);color:var(--brass)}
.isite .badge.warn{background:var(--warn-soft);border-color:var(--warn);color:var(--warn)}
.isite .badge.ok{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.isite .badge.ink{background:var(--ink);border-color:var(--ink);color:var(--gold)}
.isite .badge.new{background:var(--brass-soft);border-color:var(--brass);color:var(--ink)}
.isite .dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--muted)}
.isite .dot.ok{background:var(--ok)} .isite .dot.warn{background:var(--warn)} .isite .dot.gold{background:var(--gold)}

/* ==========================================================================
   7. CARDS, NOTES, LISTS
   ========================================================================== */
.isite .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1);padding:16px}
.isite .card + .card{margin-top:12px}
.isite .card.flat{box-shadow:none}
.isite .card.sunk{background:var(--sunk);box-shadow:none}
.isite .card.ink{background:linear-gradient(160deg,var(--ink-3),var(--ink));border-color:var(--ink);color:#ECE8DF}
.isite .card.ink .muted{color:#A79F90}
.isite .card.gold{background:linear-gradient(160deg,#FFF6E4,var(--brass-soft));border-color:#E9C27A}
.isite .card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 8px}
.isite .card-h h3{margin:0;font-family:var(--cond);font-weight:700;font-size:22px;line-height:1.1}
.isite .card-sub{color:var(--muted);font-size:14px;margin:-4px 0 12px}
.isite .cards{display:grid;gap:12px}
@media (min-width:700px){ .isite .cards.c2{grid-template-columns:1fr 1fr} .isite .cards.c3{grid-template-columns:repeat(3,1fr)} }
.isite .note{border-left:4px solid var(--brass);background:var(--brass-soft);padding:10px 14px;border-radius:var(--r-sm);margin:10px 0;font-size:14px;color:var(--ink)}
.isite .note.bad{border-left-color:var(--warn);background:var(--warn-soft)}
.isite .note.ok{border-left-color:var(--ok);background:var(--ok-soft)}
.isite .toast{position:absolute;left:50%;bottom:104px;transform:translateX(-50%);z-index:40;background:var(--ink);color:#F4EFE4;padding:12px 18px;border-radius:var(--r);font-size:15px;
  box-shadow:var(--shadow-2);display:flex;gap:10px;align-items:center;white-space:nowrap}
.isite .toast svg.i{color:var(--gold)}
.isite .list{list-style:none;margin:0;padding:0}
.isite .list > li{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 0;border-bottom:1px solid var(--line)}
.isite .list > li:last-child{border-bottom:0}
.isite .muted{color:var(--muted)} .isite .small{font-size:13px} .isite .num{font-variant-numeric:tabular-nums;white-space:nowrap}
.isite .cond{font-family:var(--cond)} .isite .strong{font-weight:700} .isite .up{color:var(--ok)} .isite .down{color:var(--warn)}
.isite .row{display:flex;align-items:center;gap:10px} .isite .between{justify-content:space-between} .isite .wrapflex{flex-wrap:wrap}
.isite .grow{flex:1;min-width:0} .isite .stack{display:flex;flex-direction:column;gap:12px}
.isite .mt0{margin-top:0}.isite .mt8{margin-top:8px}.isite .mt16{margin-top:16px}.isite .mt24{margin-top:24px}.isite .mb0{margin-bottom:0}.isite .mb8{margin-bottom:8px}.isite .mb16{margin-bottom:16px}
.isite .only-phone{} .isite .only-desk{display:none!important}
@media (min-width:700px){ .isite .only-phone{display:none!important} .isite .only-desk{display:revert!important} }

/* ==========================================================================
   8. PRODUCT ROWS + COUNT STEPPERS
   ========================================================================== */
.isite .plist{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1);overflow:hidden}
.isite .plist-h{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:var(--sunk);border-bottom:1px solid var(--line);
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tan)}
.isite .prow{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line);position:relative}
.isite .prow:last-child{border-bottom:0}
.isite .prow .thumb{width:44px;height:44px;border-radius:var(--r);background:var(--sunk);border:1px solid var(--line);display:grid;place-items:center;color:var(--tan)}
.isite .pname{font-weight:600;font-size:16px;line-height:1.2}
.isite .pmeta{font-size:13px;color:var(--muted);margin-top:2px}
.isite .pmeta .sep{margin:0 5px;opacity:.6}
.isite .pval{text-align:right;font:600 18px var(--cond);font-variant-numeric:tabular-nums}
.isite .pval small{display:block;font:500 12px var(--sans);color:var(--muted)}
.isite .prow.low::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--warn)}
.isite .prow.nocost .pval{color:var(--muted)}
.isite .prow.changed{background:linear-gradient(90deg,rgba(229,154,28,.10),transparent 60%)}
/* row with a stepper underneath on phone, beside on desktop */
.isite .prow.counting{grid-template-columns:1fr;gap:10px}
@media (min-width:700px){ .isite .prow.counting{grid-template-columns:44px 1fr auto auto;} }

.isite .stepper{display:inline-grid;grid-template-columns:var(--tap) 72px var(--tap);align-items:center;border:1px solid var(--line);border-radius:var(--pill);background:var(--sunk);overflow:hidden}
.isite .stepper button{appearance:none;border:0;background:transparent;height:var(--tap);font-size:22px;font-weight:600;cursor:pointer;color:var(--ink)}
.isite .stepper button:active{background:var(--line)}
.isite .stepper input{width:100%;height:var(--tap);border:0;border-inline:1px solid var(--line);background:var(--surface);text-align:center;font:700 22px var(--cond);font-variant-numeric:tabular-nums}
.isite .stepper.edited input{background:var(--brass-soft);color:var(--ink)}
/* Kanyon's big count pad (Walk the yard, photo sheet) */
.isite .pad{display:grid;grid-template-columns:72px minmax(0,1fr) 72px;gap:10px}
.isite .pad button{appearance:none;border:1px solid var(--line);background:var(--sunk);border-radius:var(--r-lg);font-size:32px;font-weight:600;min-height:76px;cursor:pointer;color:var(--ink)}
.isite .pad input{width:100%;min-width:0;border:2px solid var(--gold);border-radius:var(--r-lg);background:var(--surface);text-align:center;font:700 46px var(--cond);font-variant-numeric:tabular-nums;padding:4px 8px;box-shadow:0 0 0 4px rgba(229,154,28,.15)}
.isite .onfile{font-size:16px;color:var(--muted);margin:12px 0}
.isite .onfile b{color:var(--ink);font:700 22px var(--cond)}
.isite .progress{height:6px;border-radius:var(--pill);background:var(--sunk);border:1px solid var(--line);overflow:hidden}
.isite .progress span{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-hi))}

/* desktop table (Kanyon's) */
.isite .tablebox{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:auto;box-shadow:var(--shadow-1)}
.isite table.t{border-collapse:collapse;width:100%}
.isite .t th,.isite .t td{padding:11px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.isite .t thead th{font-size:13px;font-weight:600;color:var(--muted);background:var(--sunk);position:sticky;top:0}
.isite .t tbody tr:last-child td{border-bottom:0}
.isite .t .num{text-align:right}
.isite .t tfoot td{font-weight:700;background:var(--sunk);border-top:2px solid var(--ink);border-bottom:0}
.isite .t .desc{font-weight:600}
.isite .t .meta{font-size:13px;color:var(--muted)}
.isite .t input.cell{width:100px;min-height:36px;text-align:right;border:1px solid var(--line);background:var(--sunk);border-radius:var(--r-sm);padding:6px 9px;font-variant-numeric:tabular-nums}

/* ==========================================================================
   9. SHEETS (phone, from the bottom) AND DIALOGS (desktop, centred)
   ========================================================================== */
.isite .scrim{position:absolute;inset:0;z-index:30;background:rgba(10,14,12,.52);backdrop-filter:blur(2px)}
.isite .sheet{position:absolute;left:0;right:0;bottom:0;z-index:31;max-height:92%;overflow:auto;background:var(--surface);
  border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.25);padding:8px 18px 34px}
.isite .sheet.full{top:0;max-height:none;border-radius:0;padding-top:0}
.isite .sheet-grab{width:40px;height:5px;border-radius:3px;background:var(--line);margin:4px auto 12px}
.isite .sheet-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.isite .sheet-h h2,.isite .dlg h2{margin:0;font-family:var(--western);font-weight:400;font-size:24px;letter-spacing:.03em;line-height:1.15}
.isite .sheet p.lead,.isite .dlg p.lead{color:var(--muted);font-size:15px;margin:0 0 14px}
.isite .sheet-foot{position:sticky;bottom:-34px;margin:16px -18px -34px;padding:12px 18px 30px;background:linear-gradient(180deg,rgba(255,255,255,0),var(--surface) 30%)}
.isite .dlg{position:absolute;z-index:31;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,92%);max-height:88%;overflow:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-3);padding:24px}
.isite .dlg.wide{width:min(820px,94%)}
/* show a sheet as a centred dialog on desktop automatically */
@media (min-width:700px){
  .isite .sheet{left:50%;right:auto;bottom:auto;top:50%;transform:translate(-50%,-50%);width:min(560px,92%);border-radius:var(--r-lg);padding:22px 24px 26px}
  .isite .sheet.wide{width:min(820px,94%)}
  .isite .sheet-grab{display:none}
  .isite .sheet-foot{position:static;margin:18px 0 0;padding:0;background:none}
}

/* ==========================================================================
   10. CAMERA BUTTON + "WHAT IS THIS?" PICTURE CHOICES
   ========================================================================== */
.isite .camera-btn{appearance:none;display:grid;place-items:center;width:72px;height:72px;border-radius:50%;border:4px solid var(--surface);cursor:pointer;
  background:radial-gradient(circle at 35% 30%,var(--gold-hi),var(--gold) 60%,#C9850F);color:var(--gold-ink);
  box-shadow:var(--gold-glow),0 0 0 1px #C9850F}
.isite .camera-btn svg.i{width:30px;height:30px;stroke-width:2.2}
/* the big "snap it" tile on the home and count screens */
.isite .camera-hero{display:flex;align-items:center;gap:16px;padding:16px;border-radius:var(--r-lg);text-decoration:none;color:#ECE8DF;
  background:radial-gradient(140% 120% at 100% 0%,rgba(229,154,28,.28),transparent 55%),linear-gradient(160deg,var(--ink-3),var(--ink));
  border:1px solid var(--ink);box-shadow:var(--shadow-2)}
.isite .camera-hero .camera-btn{width:64px;height:64px;border-color:rgba(255,255,255,.12)}
.isite .camera-hero b{display:block;font:700 22px var(--cond);color:#F4EFE4;line-height:1.1}
.isite .camera-hero span{font-size:14px;color:#BDB4A4}
.isite .camera-hero .camera-btn{color:var(--gold-ink)}
/* the photo the person took, with a scan look while it is being read */
.isite .shot{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;background:#2b2f31 linear-gradient(135deg,#59534a,#2f3336);border:1px solid var(--line)}
.isite .shot.sm{aspect-ratio:1;width:88px;flex:none;border-radius:var(--r)}
.isite .shot .label{position:absolute;left:10px;bottom:10px;padding:4px 10px;border-radius:var(--pill);background:rgba(0,0,0,.55);color:#fff;font-size:12px;font-weight:600}
.isite .shot.reading::after{content:"";position:absolute;left:0;right:0;top:38%;height:3px;background:var(--gold);box-shadow:0 0 18px 6px rgba(229,154,28,.55)}
.isite .reading-line{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--brass)}
.isite .spinner{width:18px;height:18px;border-radius:50%;border:3px solid var(--brass-soft);border-top-color:var(--gold);flex:none}

.isite .choices{display:grid;gap:10px}
.isite .choice{appearance:none;display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;width:100%;text-align:left;cursor:pointer;
  padding:12px;border-radius:var(--r-lg);border:1.5px solid var(--line);background:var(--surface);color:var(--ink);min-height:76px}
.isite .choice .thumb{width:56px;height:56px;border-radius:var(--r);background:var(--sunk);border:1px solid var(--line);display:grid;place-items:center;color:var(--tan);overflow:hidden}
.isite .choice .nm{font-weight:700;font-size:16px;line-height:1.2}
.isite .choice .why{font-size:13px;color:var(--muted);margin-top:3px}
.isite .choice.on,.isite .choice[aria-pressed="true"]{border-color:var(--gold);background:linear-gradient(180deg,#FFFBF2,var(--brass-soft));box-shadow:0 0 0 3px rgba(229,154,28,.2)}
.isite .choice.best{border-color:#E9C27A}
.isite .choice .pick{width:26px;height:26px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center}
.isite .choice.on .pick{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}
/* how sure: a short bar plus words; never a bare percent alone */
.isite .conf{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:12px;font-weight:700;color:var(--muted)}
.isite .conf-bar{width:64px;height:6px;border-radius:var(--pill);background:var(--sunk);border:1px solid var(--line);overflow:hidden}
.isite .conf-bar span{display:block;height:100%;background:var(--muted)}
.isite .conf.high{color:var(--ok)} .isite .conf.high .conf-bar span{background:var(--ok)}
.isite .conf.mid{color:var(--brass)} .isite .conf.mid .conf-bar span{background:var(--gold)}
.isite .conf.low{color:var(--muted)}
.isite .none-btn{appearance:none;width:100%;min-height:52px;border-radius:var(--r-lg);border:1.5px dashed var(--line);background:transparent;color:var(--ink);font-weight:600;cursor:pointer}

/* ==========================================================================
   11. UPLOAD DROP ZONE + FILE ROW
   ========================================================================== */
.isite .drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:28px 18px;border-radius:var(--r-lg);
  border:2px dashed #CBBF9F;background:repeating-linear-gradient(135deg,var(--sunk) 0 12px,var(--surface) 12px 24px);color:var(--muted)}
.isite .drop .ic{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--brass-soft);color:var(--brass);border:1px solid #E9C27A}
.isite .drop b{color:var(--ink);font-size:17px}
.isite .drop.over{border-color:var(--gold);background:var(--brass-soft)}
.isite .file-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.isite .file-row .ic{width:40px;height:40px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--ok-soft);color:var(--ok);flex:none}
.isite .file-row .nm{font-weight:600}
.isite .steps{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--muted);font-weight:600}
.isite .steps i{font-style:normal;width:22px;height:22px;border-radius:50%;display:inline-grid;place-items:center;border:1px solid var(--line);background:var(--surface);font:700 12px var(--cond)}
.isite .steps .on{color:var(--ink)} .isite .steps .on i{background:var(--ink);border-color:var(--ink);color:var(--gold)}
.isite .steps .done i{background:var(--ok);border-color:var(--ok);color:#fff}
.isite .steps .ln{flex:0 0 18px;height:1px;background:var(--line)}

/* ==========================================================================
   12. PRICE CHANGE PREVIEW (old price -> new price)
   ========================================================================== */
.isite .sum-pills{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.isite .sum-pills span{display:inline-flex;gap:6px;align-items:baseline;background:var(--surface);border:1px solid var(--line);border-radius:var(--pill);padding:6px 14px;font-size:14px}
.isite .sum-pills b{font:700 18px var(--cond)}
.isite .sum-pills .up b{color:var(--warn)} .isite .sum-pills .down b{color:var(--ok)}
.isite .changes{width:100%;border-collapse:collapse;background:var(--surface)}
.isite .changes th{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tan);text-align:left;padding:10px 12px;background:var(--sunk);border-bottom:1px solid var(--line)}
.isite .changes td{padding:12px;border-bottom:1px solid var(--line);vertical-align:middle}
.isite .changes .num,.isite .changes th.num{text-align:right}
.isite .price-old{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(164,53,42,.6);font-variant-numeric:tabular-nums}
.isite .price-arrow{color:var(--tan);margin:0 6px}
.isite .price-new{font:700 19px var(--cond);font-variant-numeric:tabular-nums}
.isite .delta{font:700 14px var(--cond);padding:2px 8px;border-radius:var(--pill);white-space:nowrap}
.isite .delta.up{background:var(--warn-soft);color:var(--warn)}    /* cost went up = bad for us */
.isite .delta.down{background:var(--ok-soft);color:var(--ok)}     /* cost went down = good */
.isite .delta.flag{background:var(--warn);color:#fff}             /* moved more than half: check it */
.isite .changes tr.is-new td:first-child{box-shadow:inset 3px 0 0 var(--gold)}
.isite .changes tr.ask td{background:#FFF8EA}
.isite .changes tr.skip td{color:var(--muted)}
/* phone version: each change as a stacked card */
.isite .chg{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:12px 14px;border-bottom:1px solid var(--line);background:var(--surface)}
.isite .chg:last-child{border-bottom:0}
.isite .chg .nm{font-weight:600;line-height:1.25}
.isite .chg .px{grid-column:1/-1;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.isite .chg.ask{background:#FFF8EA}

/* ==========================================================================
   13. PEOPLE + PERMISSIONS
   ========================================================================== */
.isite .av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;font:700 15px var(--cond);color:#F4EFE4;background:var(--loc-knox)}
.isite .av.gold{background:var(--gold);color:var(--gold-ink)} .isite .av.tan{background:var(--tan)} .isite .av.ink{background:var(--ink)} .isite .av.rust{background:var(--loc-lou)} .isite .av.sage{background:var(--loc-nash)}
.isite .person{display:flex;align-items:center;gap:12px;min-width:0}
.isite .person .nm{font-weight:600;line-height:1.2}
.isite .person .em{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.isite .role-pill{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:4px 12px;border-radius:var(--pill);border:1px solid var(--line);background:var(--sunk);font-size:14px;font-weight:600;white-space:nowrap}
.isite .role-pill.boss{background:var(--ink);border-color:var(--ink);color:var(--gold)}
.isite .perm-table{width:100%;border-collapse:collapse;background:var(--surface)}
.isite .perm-table th{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tan);padding:10px 12px;background:var(--sunk);border-bottom:1px solid var(--line);text-align:center;white-space:nowrap}
.isite .perm-table th:first-child{text-align:left}
.isite .perm-table td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:center}
.isite .perm-table td:first-child{text-align:left}
.isite .perm-table tr.waiting td{background:#FFF8EA}
/* switch: <label class="toggle"><input type="checkbox" checked><span></span></label> */
.isite .toggle{position:relative;display:inline-block;width:50px;height:30px;flex:none;vertical-align:middle;cursor:pointer}
.isite .toggle input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.isite .toggle span{position:absolute;inset:0;border-radius:var(--pill);background:#CFC9BC;transition:background .15s}
.isite .toggle span::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.isite .toggle input:checked + span{background:var(--ok)}
.isite .toggle input:checked + span::after{transform:translateX(20px)}
.isite .toggle input:disabled + span{opacity:.45}
.isite .toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:8px 0;border-bottom:1px solid var(--line)}
.isite .toggle-row:last-child{border-bottom:0}
.isite .toggle-row .t{font-weight:600}
.isite .toggle-row .d{font-size:13px;color:var(--muted)}
.isite .loc-ticks{display:flex;flex-wrap:wrap;gap:8px}
.isite .loc-ticks label{display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);padding:6px 14px;border-radius:var(--pill);border:1px solid var(--line);background:var(--surface);font-weight:600;cursor:pointer}
.isite .loc-ticks label:has(input:checked){border-color:var(--gold);background:var(--brass-soft)}
.isite .loc-ticks input{accent-color:var(--gold);width:18px;height:18px}
.isite .loc-ticks label.home::after{content:"Home";font:700 11px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--brass);margin-left:2px}

/* ==========================================================================
   14. SIGN-IN, NEW ACCOUNT, LINK SENT
   ========================================================================== */
.isite .gate{flex:1;display:grid;place-items:center;padding:24px 18px;background:
  radial-gradient(700px 360px at 50% -10%,rgba(229,154,28,.22),transparent 60%),
  linear-gradient(180deg,var(--ink) 0 34%,var(--bg) 34%)}
.isite .gate-card{width:min(420px,100%);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:28px 24px 24px;box-shadow:var(--shadow-3)}
.isite .gate-card .mark{font-family:var(--western);font-size:44px;letter-spacing:.06em;line-height:1;display:block}
.isite .gate-card .sub{font-family:var(--cond);font-weight:600;font-size:22px;color:var(--tan);display:block;margin:4px 0 6px}
.isite .gate-card .wire{margin:6px 0 18px}
.isite .gate-card .btn.block{margin-top:4px}
.isite .gate-foot{font-size:13px;color:var(--muted);margin-top:16px;text-align:center}
.isite .gate-top{color:#ECE8DF;text-align:center;margin-bottom:18px}
.isite .or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px;margin:16px 0}
.isite .or::before,.isite .or::after{content:"";flex:1;height:1px;background:var(--line)}
.isite .sent{text-align:center}
.isite .sent .ic{width:72px;height:72px;border-radius:50%;margin:4px auto 12px;display:grid;place-items:center;background:var(--ok-soft);color:var(--ok);border:1px solid #BCD7C2}
.isite .sent .ic svg.i{width:34px;height:34px}
.isite .sent h2{margin:0 0 6px;font-family:var(--western);font-weight:400;font-size:26px}
.isite .sent .em{font-weight:700}
.isite .loc-pick{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.isite .loc-pick label{display:flex;align-items:center;gap:8px;min-height:52px;padding:8px 12px;border-radius:var(--r);border:1.5px solid var(--line);background:var(--surface);font-weight:600;cursor:pointer}
.isite .loc-pick label:has(input:checked){border-color:var(--gold);background:var(--brass-soft);box-shadow:0 0 0 3px rgba(229,154,28,.18)}
.isite .loc-pick input{accent-color:var(--gold);width:18px;height:18px}
.isite .loc-pick i{width:10px;height:10px;border-radius:2px;flex:none;background:var(--line)}
/* The yard colours (Inventory::Locations::PALETTE), by place in the list. */
.isite .loc-pick i.c0{background:#4A5560}
.isite .loc-pick i.c1{background:#E59A1C}
.isite .loc-pick i.c2{background:#8C7449}
.isite .loc-pick i.c3{background:#5B7A8C}
.isite .loc-pick i.c4{background:#A4532F}
.isite .loc-pick i.c5{background:#7E8B5A}
/* New account (mockup 01): the three-step line, the refused email, the
   locked email, the finish page under the KOWBOY bar. */
.isite .steps-mini{display:flex;gap:6px;margin:0 0 14px}
.isite .steps-mini i{flex:1;height:4px;border-radius:2px;background:var(--line)}
.isite .steps-mini i.on{background:var(--gold)}
.isite .mt8{margin-top:8px}
.isite .mt16{margin-top:16px}
.isite .field.bad{border-color:var(--warn);box-shadow:0 0 0 3px rgba(164,53,42,.14)}
.isite .note.not-company{margin-top:-4px}
.isite .field.locked{background:var(--sunk);color:var(--muted);display:flex;align-items:center;gap:8px;margin-top:5px;font-weight:400}
.isite div.f{display:block;font-size:13px;font-weight:600;color:var(--muted);margin:0 0 14px}
.isite .sent .sent-to{margin:0 0 6px}
.isite .sent .sent-finish{margin:0 0 16px;font-size:15px}
.isite .sent .sent-note{text-align:left}
.isite .finish-page{min-height:100vh;min-height:100dvh;background:var(--bg)}
.isite .finish-page .appbar{position:static}
.isite .finish-body{padding:18px 18px 28px;max-width:480px}
.isite .plain-h{font-family:var(--western);font-weight:400;font-size:26px;letter-spacing:.03em;margin:4px 0 4px;line-height:1.15}
.isite .loc-fieldset{border:0;padding:0;margin:0}
.isite .loc-legend{font-size:13px;font-weight:600;color:var(--muted);margin:0 0 6px;padding:0}
.isite .loc-hint{font-size:14px;margin:6px 0 14px}
/* "Make a new account" under Sign in (frame 1). */
.isite .gate-card .btn.new-account{margin-top:0}
/* The welcome after a new account (frame 7): the gold card over the yard,
   and "You're in" for a moment (toast_undo_controller takes it away). */
.isite .welcome-card{margin:0 0 12px}
.isite .welcome-card p{margin:0;font-size:15px}

/* ==========================================================================
   15. RECEIPTS (moved here from the main site)
   ========================================================================== */
.isite .rcpt{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}
.isite .rcpt:last-child{border-bottom:0}
.isite .rcpt .shot.sm{width:52px;border-radius:var(--r-sm)}
.isite .rcpt .what{font-weight:600;line-height:1.2}
.isite .rcpt .sub{font-size:13px;color:var(--muted);margin-top:2px}
.isite .rcpt .amt{text-align:right;font:700 20px var(--cond);font-variant-numeric:tabular-nums}
.isite .rcpt .amt .badge{margin-top:4px}
.isite .st-wait{background:var(--brass-soft);border-color:var(--brass);color:var(--brass)}
.isite .st-ok{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.isite .st-paid{background:var(--sunk);border-color:var(--line);color:var(--muted)}
.isite .st-no{background:var(--warn-soft);border-color:var(--warn);color:var(--warn)}
.isite .owed{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:var(--r-lg);background:var(--ink);color:#ECE8DF}
.isite .owed b{font:700 30px var(--cond);color:var(--gold);font-variant-numeric:tabular-nums}
.isite .readback{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:var(--r);background:var(--ok-soft);border:1px solid #BCD7C2;font-size:14px}
.isite .readback svg.i{color:var(--ok);margin-top:1px}
.isite .filled{background:var(--brass-soft)!important;border-color:#E9C27A!important}
.isite .money-in{font:700 30px var(--cond);text-align:left;font-variant-numeric:tabular-nums}

/* motion off in pictures */
@media (prefers-reduced-motion:reduce){.isite *{transition:none!important}}


/* ==========================================================================
   16. THE REAL PAGE (not a mockup frame)
   ========================================================================== */
/* The fonts are Kanyon's (free, OFL). They are served by Kowboy itself, never
   by a font service, so staff phones are not sent anywhere else and the
   security policy stays font-src 'self'. Until their files are in
   app/assets/fonts a phone that has them uses them, and every other phone
   gets the fallbacks in --western, --sans and --cond. */
@font-face{font-family:"Rye";font-style:normal;font-weight:400;font-display:swap;src:local("Rye"),local("Rye Regular"),local("Rye-Regular")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:400 700;font-display:swap;src:local("Barlow"),local("Barlow Regular"),local("Barlow-Regular")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:500 700;font-display:swap;src:local("Barlow Condensed"),local("BarlowCondensed-Regular")}

.isite{min-height:100vh;min-height:100dvh}
.isite .isite-sprite{position:absolute;width:0;height:0;overflow:hidden}
/* The bar and its wire stay at the top while the page scrolls under them. */
.isite .isite-top{position:sticky;top:0;z-index:25}
.isite .appbar{padding-top:max(10px,env(safe-area-inset-top))}
.isite .appbar .brand{text-decoration:none;color:inherit}
.isite .appbar .tabs{display:flex}
/* Every tap in the bar is a full thumb (--tap, 44px), on an iPad's desk
   layout too: the wordmark home, the four tabs and the name that opens More. */
.isite .appbar a.brand{min-height:var(--tap);padding-block:10px}
@media (min-width:700px){ .isite .appbar a.brand{padding-block:6px} }
.isite .appbar a.tab{display:inline-flex;align-items:center;min-height:var(--tap);text-decoration:none}
.isite .appbar a.who{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);padding:0 4px;color:#C9BFAE;text-decoration:none}
.isite .appbar a.who:hover{color:#F4EFE4;text-decoration:underline;text-underline-offset:3px}
.isite .appbar a.loc-switch{text-decoration:none}
/* The page scrolls as a page; the tab bar stays at the bottom of the phone. */
.isite .scroll{overflow:visible;padding-bottom:calc(120px + env(safe-area-inset-bottom))}
@media (min-width:700px){ .isite .scroll{padding-bottom:48px} }
.isite .tabbar{position:fixed;grid-template-columns:repeat(5,1fr);padding-bottom:max(12px,env(safe-area-inset-bottom))}
.isite .tabbar a{text-decoration:none}
.isite .toast,.isite .scrim,.isite .sheet,.isite .dlg{position:fixed}
.isite .isite-flash{padding:12px 16px 0}
@media (min-width:700px){ .isite .isite-flash{padding:16px 36px 0} }
.isite .isite-flash .note{margin:0 0 8px}

/* Signed out: the sign-in card alone, on Kanyon's ink-over-paper gate. */
.isite .isite-bare{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.isite .gate{min-height:100vh;min-height:100dvh}
.isite .gate-card h2{margin:0 0 4px;font-family:var(--western);font-weight:400;font-size:26px;letter-spacing:.03em;line-height:1.15}
.isite .gate-card p.lead{color:var(--muted);font-size:15px;margin:0 0 16px}
.isite .gate-card form{margin:0}
.isite .backlink{display:inline-flex;align-items:center;gap:4px;min-height:var(--tap);margin:-10px 0 4px -6px;padding:0 6px;color:var(--muted);font-weight:600;font-size:15px;text-decoration:none}
.isite .linkbtn{display:flex;justify-content:center;align-items:center;min-height:var(--tap);color:var(--brass);font-weight:700;font-size:15px;text-decoration:none}
.isite label.f .kf-peek{margin-top:5px}
.isite label.f .kf-peek .field{margin-top:0}

/* A page a later step fills: says what comes there. */
.isite .soon{max-width:640px}
.isite .soon .card-h h3{font-family:var(--western);font-weight:400;font-size:24px;letter-spacing:.03em}
.isite .more-list{list-style:none;margin:0;padding:0}
.isite .more-list > li{border-bottom:1px solid var(--line)}
.isite .more-list > li:last-child{border-bottom:0}
.isite .more-list a,.isite .more-list button{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 2px;background:none;border:0;
  color:var(--ink);font-weight:600;font-size:16px;text-decoration:none;text-align:left;cursor:pointer}
.isite .more-list svg.i{color:var(--brass)}
.isite .more-list form{margin:0}

/* ==========================================================================
   17. PRICES: THE SPURS COST SHEET (lane L6, mockup 04's page helpers)
   ========================================================================== */
/* One column on a phone that never grows past the screen: the changes table scrolls inside its box. */
.isite .cost-sheet .split{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin-top:16px}
@media (min-width:900px){
  .isite .cost-sheet .split{grid-template-columns:minmax(0,1fr) 340px;align-items:start;gap:26px}
  .isite .cost-sheet .split > aside{position:sticky;top:12px}
}
.isite .cost-sheet .row.gap18{gap:18px}
.isite .cost-sheet .drop-h{font-size:22px;font-family:var(--cond)}
.isite .cost-sheet .drop .btn input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.isite .cost-sheet .drop label.btn{position:relative;cursor:pointer}
.isite .cost-sheet .ticklist{list-style:none;margin:0;padding:0;font-size:15px}
.isite .cost-sheet .ticklist li{display:flex;gap:10px;align-items:flex-start;padding:6px 0}
.isite .cost-sheet .ticklist .ok{color:var(--ok)}
.isite .cost-sheet .numlist{counter-reset:n;list-style:none;margin:0;padding:0;font-size:15px}
.isite .cost-sheet .numlist li{counter-increment:n;display:flex;gap:10px;align-items:flex-start;padding:7px 0}
.isite .cost-sheet .numlist li::before{content:counter(n);flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--gold);font:700 13px var(--cond)}
.isite .cost-sheet .sum-pills .pick{background:#FFF8EA;border-color:#E9C27A}
.isite .cost-sheet .pickone{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.isite .cost-sheet .pickone label,.isite .cost-sheet label.keep{display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);padding:6px 14px;border-radius:var(--pill);border:1.5px solid var(--line);background:var(--surface);font-weight:600;font-size:14px;cursor:pointer;color:var(--ink)}
.isite .cost-sheet .pickone label:has(input:checked),.isite .cost-sheet label.keep:has(input:checked){border-color:var(--gold);background:var(--brass-soft)}
.isite .cost-sheet .pickone input,.isite .cost-sheet label.keep input{accent-color:var(--gold);width:18px;height:18px;margin:0}
.isite .cost-sheet label.keep{margin-top:6px}
.isite .cost-sheet .locval{width:100%;border-collapse:collapse;font-size:14px}
.isite .cost-sheet .locval td{padding:9px 0;border-bottom:1px solid var(--line)}
.isite .cost-sheet .locval tr:last-child td{border-bottom:0}
.isite .cost-sheet .locval td.num{text-align:right}
.isite .cost-sheet .locval i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:8px;vertical-align:0;background:var(--tan)}
.isite .cost-sheet .bigcheck{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:var(--ok);color:#fff;box-shadow:0 8px 24px -8px rgba(63,125,78,.7);flex:none}
.isite .cost-sheet .bigcheck svg.i{width:40px;height:40px;stroke-width:2.6}
.isite .cost-sheet .minihead{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tan);margin:0 0 8px}
.isite .cost-sheet .minihead.gold{color:var(--gold)}
.isite .cost-sheet .card.ink .big-value{font-size:44px;color:#F4EFE4}
.isite .cost-sheet .kv{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:15px}
.isite .cost-sheet .kv:last-child{border-bottom:0}
.isite .cost-sheet .kv b{font-family:var(--cond);font-size:19px;font-variant-numeric:tabular-nums}
.isite .cost-sheet .tablebox{overflow-x:auto}
.isite .cost-sheet .changes th:first-child,.isite .cost-sheet .changes td:first-child{padding-left:16px}
.isite .cost-sheet .changes th:last-child,.isite .cost-sheet .changes td:last-child{padding-right:16px}
.isite .cost-sheet .list label.f.ours{display:block;margin-top:8px;font-size:13px;color:var(--muted)}
.isite .cost-sheet .list label.f.ours .field{margin-top:4px;width:100%}
.isite .cost-sheet label.addbox{position:relative;align-self:flex-start}
.isite .cost-sheet label.addbox input{accent-color:var(--gold);width:18px;height:18px;margin:0}
.isite .cost-sheet label.addbox:has(input:checked){border-color:var(--gold);background:var(--brass-soft)}
.isite .cost-sheet details summary{cursor:pointer;min-height:var(--tap);display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.isite .cost-sheet [hidden]{display:none !important}
@media (max-width:899px){
  /* Phones: the button stays at the bottom while the rows scroll (mockup frame 4). */
  .isite .cost-sheet [data-cost-sheet-places] [data-cost-sheet-update]{position:sticky;bottom:calc(76px + env(safe-area-inset-bottom))}
}

/* ==========================================================================
   18. PEOPLE PAGE AND "WHICH YARD?" (mockups 05 and 02 frame 2; lanes L3, L4)
   ========================================================================== */
/* Each yard's colour (Inventory::Locations' order): a dot on chips, rows, sheets. */
.isite .locdot{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;vertical-align:0;background:var(--muted);flex:none}
.isite .locdot.c0{background:var(--loc-bham)} .isite .locdot.c1{background:var(--loc-hsv)} .isite .locdot.c2{background:var(--loc-jackson)}
.isite .locdot.c3{background:var(--loc-knox)} .isite .locdot.c4{background:var(--loc-lou)} .isite .locdot.c5{background:var(--loc-nash)}
.isite .locdot.ink{background:var(--ink)}
.isite .ip-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px}
.isite .ip-head .btnrow .btn.primary svg.i{width:18px;height:18px}
.isite .ip-new .card-h{flex-wrap:wrap}
.isite .ip-newcard{display:flex;flex-direction:column;gap:8px}
.isite .ip-newcard form{margin:0}
.isite .waitcard{border-color:#E9C27A;background:#FFF8EA}
.isite .ip-cans{display:flex;flex-wrap:wrap;gap:4px}
.isite .ip-cans .badge{font-size:11px;padding:3px 7px}
.isite .ip-filters{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.isite .ip-find{width:100%;margin:0}
@media (min-width:700px){ .isite .ip-find{width:300px} .isite .ip-filters .chips.scroll-x{flex-wrap:wrap;margin-inline:0;padding-inline:0} }
.isite .ip-filters .chip{text-decoration:none;color:inherit}
.isite .perm-table th{line-height:1.25;vertical-align:bottom}
.isite .perm-table td{vertical-align:middle}
.isite .perm-table .ip-left{text-align:left}
.isite .perm-table tr.boss td{background:var(--sunk)}
.isite .perm-table td.ip-lock{color:var(--muted);font-size:13px}
.isite .perm-table .homesel{min-height:36px;width:auto;padding:5px 12px;font-size:14px;font-weight:600;display:inline-block;border-radius:var(--pill)}
.isite .ip-also{display:block;font-size:12px;color:var(--muted);margin-top:3px}
.isite .ip-name{color:inherit;text-decoration:none}
.isite .ip-name > span{display:flex;flex-direction:column;min-width:0}
.isite .ip-pill{min-height:24px;font-size:12px;padding:2px 9px}
.isite .ip-toggle,.isite .ip-home,.isite .ip-tick{display:inline-flex;align-items:center;gap:8px;margin:0}
.isite .ip-row{color:inherit;text-decoration:none}
.isite .ip-row .pname,.isite .ip-row .pmeta{display:block}
.isite .ip-row .ip-chev{color:var(--muted);transform:rotate(-90deg)}
.isite .ip-empty{padding:12px 14px;margin:0}
.isite .ip-link-form .field{min-width:0}
.isite .phead{display:flex;gap:14px;align-items:center}
.isite .phead .av{width:56px;height:56px;font-size:20px}
.isite .ip-person-name{margin:0;font:700 26px var(--cond);line-height:1.1}
.isite .ip-wire{background-color:transparent;margin:10px 0 16px}
.isite .ip-cols{display:grid;gap:24px}
@media (min-width:700px){ .isite .ip-cols{grid-template-columns:1fr 1.15fr;gap:28px} }
.isite .ip-pick{border:0;padding:0;margin:0}
@media (min-width:900px){ .isite .ip-pick{grid-template-columns:1fr 1fr 1fr} }
.isite .ip-switches{padding:4px 14px}
.isite .homeline{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.isite .homeline .v{font:700 20px var(--cond)}
.isite .ip-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;padding-top:14px;border-top:1px solid var(--line)}
.isite .ip-foot form{margin:0}
.isite .ip-warn{color:var(--warn)}
.isite .ip-ok{color:var(--ok)}
.isite .ip-move{max-width:560px}
.isite .ip-move fieldset{border:0;padding:0;margin:0}
.isite .ip-start{max-width:640px}
.isite .ip-start .prow form{margin:0}

/* The location pill's sheet: from the bottom on a phone, over a dimmed page. */
.isite dialog.isite-sheet{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:none;max-height:88vh;max-height:88dvh;overflow:auto;
  border:0;border-radius:var(--r-xl) var(--r-xl) 0 0;background:var(--surface);color:var(--ink);box-shadow:0 -10px 40px rgba(0,0,0,.25);
  padding:16px 18px calc(24px + env(safe-area-inset-bottom))}
.isite dialog.isite-sheet::backdrop{background:rgba(10,14,12,.52);backdrop-filter:blur(2px)}
.isite .ip-yards .lead{color:var(--muted);font-size:15px;margin:0 0 10px}
.isite .ip-yard a{display:flex;align-items:center;gap:10px;width:100%;color:inherit;text-decoration:none;min-height:56px}
.isite .ip-yard .grow{display:flex;flex-direction:column;min-width:0}
.isite .ip-yard-sub{display:block}
.isite .ip-yard-value{font:700 18px var(--cond)}
.isite .ip-yard.yours{background:linear-gradient(90deg,rgba(229,154,28,.12),transparent 70%);margin:0 -18px;padding-inline:18px}

/* ==========================================================================
   17. RECEIPTS ON THE SITE (lane L5, mockup 06: its page-only rules, plus the
   real page's phone form). Pages: inventory_site_pages/my_receipts and
   staff_receipts.
   ========================================================================== */
.isite .m0{margin:0}
.isite .ralign{text-align:right}
/* A paper receipt drawn in CSS: the list's stand-in for a picture (the real
   photo opens with its Picture button, and each opening is written down). */
.isite .shot.paperbg{background:radial-gradient(120% 90% at 30% 20%,#6d6556,#3a3d3f 70%)}
.isite .slip{position:absolute;left:24%;right:24%;top:10%;bottom:-6%;background:#FBFAF5;transform:rotate(-4deg);box-shadow:0 3px 8px rgba(0,0,0,.4);
  background-image:repeating-linear-gradient(180deg,transparent 0 5px,#c9c4b8 5px 6px);background-size:70% 100%;background-repeat:no-repeat;background-position:center 6px}
.isite .rcpt .line{font-size:13px;margin-top:4px}
.isite .rcpt .line.bad{color:var(--warn);font-weight:600}
.isite .rcpt .line [data-my-receipt-card]{display:block}
.isite .rempty{padding:14px}
.isite .rempty b{display:block}

/* Your receipts: the heading with what is owed, then form and list. */
.isite .rhead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px}
.isite .rhead .owed{width:100%}
.isite .rgrid{display:grid;gap:20px;margin-top:14px;align-items:start}
.isite .rgrid > *{min-width:0}
.isite .rlist .section-h{margin-top:20px}
.isite .rform-h{margin:0}
.isite .rproblems{margin:6px 0 0;padding-left:18px}
.isite .formhead{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.isite .drop{position:relative;cursor:pointer}
.isite .drop-file{display:block;max-width:100%;margin-top:6px;font-size:14px;color:var(--muted)}
.isite .drop-file::file-selector-button{appearance:none;min-height:36px;margin-right:10px;padding:5px 14px;border-radius:var(--pill);border:1px solid var(--line);
  background:var(--surface);color:var(--ink);font:600 14px var(--sans);cursor:pointer}
.isite .reading-line{display:flex;align-items:center;gap:8px;margin:8px 0 0;color:var(--brass);font-weight:600;font-size:15px}
.isite fieldset.f{border:0;padding:0;margin:0 0 14px;min-width:0}
.isite fieldset.f legend{padding:0;font-size:13px;font-weight:600;color:var(--muted)}
.isite fieldset.f .hint{display:block;margin-top:5px}
.isite textarea.field{resize:vertical}
.isite .field.last4{max-width:140px}
/* What it was for: the chips are the radios. */
.isite .rkinds .chip{position:relative}
.isite .rkinds .chip input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.isite .rkinds .chip:has(input:checked){background:var(--ink);border-color:var(--ink);color:#F4EFE4}
.isite .rkinds .chip:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
/* How did you pay. The last four only once Company card is picked. */
.isite .pay{display:grid;gap:8px;margin-top:6px}
.isite .pay label{display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 14px;border-radius:var(--r);border:1.5px solid var(--line);background:var(--surface);font-weight:600;color:var(--ink);font-size:16px;cursor:pointer}
.isite .pay label:has(input:checked){border-color:var(--gold);background:var(--brass-soft);box-shadow:0 0 0 3px rgba(229,154,28,.18)}
.isite .pay input{accent-color:var(--gold);width:20px;height:20px;margin:0}
.isite .pay-wrap:has(#paid-with-company-card:not(:checked)) .pay-card{display:none}
.isite .rfold > summary{list-style:none;cursor:pointer}
.isite .rfold > summary::-webkit-details-marker{display:none}
.isite .rfold[open] > summary svg.i{transform:rotate(180deg)}
.isite .fold{display:flex;align-items:center;justify-content:space-between;min-height:var(--tap);padding:8px 14px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);font-weight:600;font-size:15px;margin:0 0 14px}
.isite .warns{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.isite .warns li{display:flex;gap:8px;align-items:flex-start;font-size:14px;padding:8px 10px;border-radius:var(--r-sm);background:var(--warn-soft);color:var(--warn);font-weight:600}
.isite .saysline{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;padding:8px 8px 8px 12px;border-radius:var(--r);background:var(--brass-soft);border:1px solid #E9C27A;font-size:14px;font-weight:600;color:var(--ink)}
.isite .sendbar{margin-top:6px}
.isite .rsend-note{text-align:center;margin:6px 0 0}
@media (max-width:699px){
  /* On a phone the list is the page; "Send a receipt" opens the form on its
     own screen (#send-a-receipt), and a form drawn again with a problem stays
     open. Send stays at the bottom, above the tab bar. */
  .isite .rform{display:none;border:0;background:none;box-shadow:none;padding:0}
  .isite .rform:target,.isite .rpage-open .rform{display:block}
  .isite .rpage:has(.rform:target) .rhide,.isite .rpage-open .rhide{display:none!important}
  .isite .rhead .owed{margin-top:12px}
  .isite .rlist-h{display:none}
  .isite .sendbar{position:sticky;bottom:calc(64px + max(12px,env(safe-area-inset-bottom)));z-index:5;margin:6px -16px 0;padding:12px 16px 10px;
    background:linear-gradient(180deg,rgba(242,241,237,0),var(--bg) 26%)}
}
@media (min-width:700px){
  .isite .rhead .owed{width:auto;min-width:340px}
  .isite .rgrid{grid-template-columns:5fr 7fr}
  .isite .rform .formhead .page-h{font-size:22px}
}

/* The books desk: To approve, its rows, and the Card statement. */
.isite .subtabs{display:inline-flex;gap:6px;margin:0 0 14px}
.isite .subtabs a.tab{display:inline-flex;align-items:center;text-decoration:none}
.isite .rtabs .chip{text-decoration:none}
.isite details.fl{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);margin:16px 0 14px}
.isite details.fl summary{min-height:var(--tap);display:flex;align-items:center;gap:8px;padding:8px 14px;font-weight:600;cursor:pointer;list-style:none}
.isite details.fl summary::-webkit-details-marker{display:none}
.isite details.fl summary .i{color:var(--tan);transform:rotate(-90deg)}
.isite details.fl[open] summary .i{transform:none}
.isite .fl-body{list-style:none;margin:0;padding:0 14px 12px;display:grid;gap:4px;font-size:14px}
.isite .section-h .badge{vertical-align:4px}
.isite .drow{display:grid;grid-template-columns:1fr;gap:12px;align-items:start;padding:14px;border-bottom:1px solid var(--line)}
.isite .drow:last-child{border-bottom:0}
.isite .drow.mine{background:var(--sunk)}
.isite .drow .who{display:flex;gap:10px;align-items:center}
.isite .drow .nm{font-weight:700}
.isite .drow .wh{font-weight:600}
.isite .drow .meta{font-size:13px;color:var(--muted);margin-top:3px}
.isite .drow .bdg{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.isite .drow .bdg .badge{white-space:normal;line-height:1.25}
.isite .drow .says{font-size:13px;margin-top:7px;color:var(--ink)}
.isite .drow-amt{display:flex;align-items:center;justify-content:space-between;gap:10px}
.isite .drow .amt{font:700 26px var(--cond);font-variant-numeric:tabular-nums;line-height:1}
.isite .drow .pics{display:flex;flex-wrap:wrap;gap:6px}
.isite .drow .acts{display:flex;flex-direction:column;gap:8px}
.isite .drow .acts form{margin:0}
.isite .rturn > summary{list-style:none;cursor:pointer}
.isite .rturn > summary::-webkit-details-marker{display:none}
.isite .rturn-form{margin-top:10px}
@media (min-width:700px){
  .isite .drow{grid-template-columns:1fr auto auto;gap:18px;padding:14px 18px}
  .isite .drow-amt{flex-direction:column;align-items:flex-end;justify-content:flex-start}
  .isite .drow .pics{justify-content:flex-end;margin-top:8px}
  .isite .drow .acts{min-width:170px;max-width:280px}
}
.isite .sgrid{display:grid;gap:20px;align-items:start}
.isite .sgrid > *{min-width:0}
@media (min-width:700px){ .isite .sgrid{grid-template-columns:4fr 8fr} }
.isite .cardres{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden;box-shadow:var(--shadow-1)}
.isite .cardres + .cardres{margin-top:12px}
.isite .cardres .hd{padding:12px 16px;background:var(--sunk);border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;align-items:center}
.isite .cardres .hd b{font:700 19px var(--cond)}
.isite .cardres .bd{padding:12px 16px}
.isite .cardres table{width:100%;border-collapse:collapse;font-size:14px}
.isite .cardres td{padding:8px 8px 8px 0;border-bottom:1px solid var(--line)}
.isite .cardres tr:last-child td{border-bottom:0}
.isite .footnote{font-size:13px;color:var(--muted);margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}

/* ==========================================================================
   19. "WHAT IS THIS?" (lane L7, mockup 03): the page's own bits
   ========================================================================== */
.isite .identify{max-width:640px}
.isite .identify .center{text-align:center;justify-content:center}
.isite .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.isite .shot img:not([src]){display:none}
.isite .shot.shot-xs{width:60px}
.isite .pic-row{display:flex;gap:12px;align-items:center}
.isite .pic-row .shot.sm{width:76px}
.isite .pic-row .shot.sm.shot-xs{width:60px}
.isite .q-h{font:700 26px var(--cond);margin:16px 0 2px;line-height:1.1}
.isite .sk{background:linear-gradient(90deg,var(--sunk),#ECE9E1,var(--sunk));border-radius:6px}
.isite .sk-a{height:14px;width:75%}
.isite .sk-b{height:10px;width:50%;margin-top:8px}
.isite .choice.ghost{cursor:default;border-style:dashed;opacity:.85}
.isite .choice .thumb img,.isite .prow .thumb img,.isite .found .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.isite .prow .thumb{overflow:hidden}
.isite .choice .nm,.isite .choice .why,.isite .found .nm,.isite .found .why{display:block}
.isite .found{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:center;padding:12px;border-radius:var(--r-lg);border:1.5px solid var(--gold);background:linear-gradient(180deg,#FFFBF2,var(--brass-soft))}
.isite .found .thumb{width:56px;height:56px;border-radius:var(--r);background:var(--surface);border:1px solid #E9C27A;display:grid;place-items:center;color:var(--brass);overflow:hidden}
.isite .found .nm{font-weight:700;font-size:17px;line-height:1.2}
.isite .found .why{font-size:13px;color:var(--muted);margin-top:3px}
.isite .count-lbl{font:700 22px var(--cond)}
.isite .same-btn{margin-top:12px}
.isite .unit-pick{width:130px}
.isite .prow .pick-btn{min-height:40px}
.isite .prow-empty{padding:14px;margin:0}
.isite .linklike{appearance:none;border:0;background:none;padding:0;color:inherit;font:inherit;text-decoration:underline;cursor:pointer}
.isite .identify .toast{bottom:calc(104px + env(safe-area-inset-bottom))}
@media (min-width:700px){ .isite .identify .toast{bottom:32px} }
.isite .walk-snap{margin-top:18px}
/* The toast fits a phone and never takes a tap: its words wrap inside the
   screen, and a tap goes through it to the button under it. */
.isite .toast{white-space:normal;width:max-content;max-width:calc(100vw - 32px);box-sizing:border-box;pointer-events:none;line-height:1.35}
/* Every tap is a full thumb (--tap, 44px) without changing the look: the
   small buttons, chips, sub-tabs and switches keep their size, and their tap
   area reaches past it (an empty box the press lands on). */
.isite .btn.sm,.isite .chip,.isite .tab,.isite .toggle,.isite .prow .pick-btn,.isite .linklike{position:relative}
.isite .btn.sm::after,.isite .chip::after,.isite .tab::after,.isite .toggle::after,.isite .prow .pick-btn::after,.isite .linklike::after{
  content:"";position:absolute;left:0;right:0;top:50%;height:var(--tap);min-height:100%;transform:translateY(-50%)}
.isite .linklike::after{left:-8px;right:-8px}
@media (pointer:coarse){ .isite .perm-table .homesel{min-height:var(--tap)} }

/* 19. THE YARD SCREENS ON THE SITE (lane L8, mockup 02). The shared screen
   (inventory.css) in Kanyon's look: Barlow Condensed numbers, Rye section
   titles, gold buttons. On a phone the location pill picks the yard (so the
   strip goes), the camera sits beside Find, and the tab bar has Count, so
   Walk the yard and What is this? live there instead. The fonts are local()
   only until the woff2 files are added. */
.isite .inv-page{--inv-cond:var(--cond)}
.isite .inv-page .inv-section-title,.isite .inv-page .inv-count-title,.isite .inv-page .ui-page-title{font-family:var(--western);font-weight:400;letter-spacing:.03em}
.isite .inv-page .ui-btn-primary{background:linear-gradient(180deg,var(--gold-hi),var(--gold));border-color:#C9850F;color:var(--gold-ink);box-shadow:var(--gold-glow)}
.isite .inv-page .inv-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--gold)}
.isite .inv-page .inv-quick-step input:focus,.isite .inv-page .inv-mini-step input:focus{box-shadow:inset 0 0 0 2px var(--gold)}
@media (max-width:699px){
  .isite .inv-page .inv-places{display:none}
  .isite .inv-page .inv-camera{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--spacing-tap);min-height:var(--spacing-tap);border-radius:var(--r-lg);background:var(--ink);color:var(--gold)}
  .isite .inv-page .inv-tool-walk,.isite .inv-page .inv-identify{display:none}
  .isite .inv-toast,.isite .inv-saved-strip{bottom:calc(96px + env(safe-area-inset-bottom))}
  .isite .inv-page .inv-selbar{bottom:calc(96px + env(safe-area-inset-bottom))}
}