/* Cardinal Rentals — matches the Cardinal Hardware design system.
   Type: Recursive carries the display voice from the main site; body and data
   text are Atkinson Hyperlegible (Next + Mono), chosen because its letterforms
   are deliberately unmistakable — slashed 0 vs O, distinct 1/l/I, open e/a —
   which matters when staff read serials, phone numbers and rates all day. */
@import url('https://fonts.googleapis.com/css2?family=Recursive:wght@400..900&family=Atkinson+Hyperlegible+Next:wght@400..800&family=Atkinson+Hyperlegible+Mono:wght@400..700&display=swap');

:root{
  --bg:#0f0f10; --bg-2:#181818; --bg-3:#232323;
  --ink:#0a0a0a; --paper:#f4efe6; --paper-2:#e0dac9;
  --red:#c8242c; --red-deep:#7a141a;
  --stroke:#3a3a3a; --stroke-strong:#f4efe6;
  --green:#3f9a55; --amber:#d9a034;
  --display:'Recursive',sans-serif; --mono:'Atkinson Hyperlegible Mono',monospace; --sans:'Atkinson Hyperlegible Next',sans-serif;
  --red-gradient:linear-gradient(135deg,#7a141a 0%,#b51d24 30%,#c8242c 55%,#5a1015 85%,#0a0a0a 100%);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--paper);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
.step-label{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:.02em;text-transform:uppercase;color:var(--paper)}
.step-label .num{color:var(--red);margin-right:6px}
img{max-width:100%;display:block}
a{color:inherit}
button{font-family:inherit;cursor:pointer}
code{font-family:var(--mono)}

/* ---------- chrome ---------- */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:18px;padding:14px 26px;background:rgba(15,15,16,.94);backdrop-filter:blur(8px);border-bottom:2px solid var(--stroke-strong)}
.topbar__brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.topbar__brand img{width:40px;height:40px;object-fit:cover;border:2px solid var(--stroke-strong)}
.topbar__name{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:.02em}
.topbar__name .em{color:var(--red)}
.topbar__sub{font-family:var(--mono);font-size:10.5px;color:var(--paper-2);letter-spacing:.14em;text-transform:uppercase}
.topbar__spacer{flex:1}
.topbar__link{font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--paper-2);padding:9px 14px;border:2px solid transparent}
.topbar__link:hover{color:var(--paper);border-color:var(--stroke)}
.topbar__link--active{color:var(--paper);border-color:var(--red)}
/* Green by default. This chip used to read "Demo Mode" on an amber warning
   background and was recoloured by JS after the first API call — so a customer
   on a slow connection saw an amber "DEMO MODE" flash on a live store. The
   markup now says Live and the colour matches it before any script runs. */
.demo-chip{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--ink);background:var(--green);padding:5px 10px;border:2px solid var(--stroke-strong);text-transform:uppercase;font-weight:700}
/* phone CTA — the audience skews older; a visible number beats a hidden one */
.topbar__call{font-family:var(--mono);font-size:12px;letter-spacing:.06em;font-weight:700;text-transform:uppercase;text-decoration:none;color:var(--paper);background:var(--red);border:2px solid var(--stroke-strong);padding:9px 15px;white-space:nowrap;transition:transform .15s,box-shadow .15s}
.topbar__call:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--paper)}

.footer{border-top:2px solid var(--stroke-strong);margin-top:70px;padding:34px 26px 26px;background:var(--bg-2)}
.footer p{font-family:var(--mono);font-size:12.5px;color:var(--paper-2);line-height:1.7}
.footer a{color:var(--paper-2)}
.footer a:hover{color:var(--red)}
.footer__grid{max-width:1180px;margin:0 auto 22px;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px 30px}
.footer__brand{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:.02em;color:var(--paper);margin-bottom:6px}
.footer__brand .em{color:var(--red)}
.footer__label{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--red);font-weight:700;margin-bottom:6px}
.footer__base{max-width:1180px;margin:0 auto;padding-top:18px;border-top:1px solid var(--stroke);display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;justify-content:space-between}
.footer__base p{font-size:11.5px}

/* ---------- hero band ---------- */
.band{background:var(--red-gradient);position:relative;border-bottom:2px solid var(--stroke-strong);padding:52px 26px 46px;overflow:hidden}
.band::before{content:"";position:absolute;inset:0;background:url("assets/cardinal-mark.webp") right -60px center/460px no-repeat;opacity:.07;pointer-events:none}
.band::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0 22px,rgba(255,255,255,.04) 22px 23px);pointer-events:none}
.band__inner{max-width:1180px;margin:0 auto;position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:34px;align-items:center}
/* "how it works" rail — three plain-English steps on a dark plate */
.band__how{background:rgba(10,10,10,.55);border:2px solid rgba(244,239,230,.35);padding:18px 20px;backdrop-filter:blur(2px)}
.band__how-title{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,239,230,.8);margin-bottom:12px;padding-bottom:9px;border-bottom:1px solid rgba(244,239,230,.25)}
.band__how-step{display:flex;gap:13px;align-items:flex-start;padding:7px 0}
.band__how-step span{flex:none;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:2px solid var(--paper);font-family:var(--display);font-weight:900;font-size:14px;color:var(--paper)}
.band__how-step p{font-size:14px;line-height:1.5;color:rgba(244,239,230,.88)}
.band__how-step b{color:var(--paper)}

/* trust strip under the hero */
.trustbar{border-bottom:2px solid var(--stroke);background:var(--bg-2);padding:12px 26px;display:flex;flex-wrap:wrap;gap:8px 34px;justify-content:center}
.trustbar__item{font-family:var(--mono);font-size:12px;color:var(--paper-2);letter-spacing:.03em;white-space:nowrap}
.trustbar__item i{font-style:normal;color:var(--green);font-weight:700;margin-right:7px}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--paper-2)}
.band .eyebrow{color:rgba(244,239,230,.75)}
h1{font-family:var(--display);font-weight:900;font-size:clamp(34px,5vw,58px);line-height:1.02;letter-spacing:-.01em;margin:10px 0 14px;text-transform:uppercase}
.band p.lede{max-width:640px;font-size:17px;color:rgba(244,239,230,.92)}

/* ---------- layout ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 26px}
.section-head{display:flex;align-items:baseline;gap:16px;margin:48px 0 22px}
.section-head h2{font-family:var(--display);font-weight:850;font-size:clamp(22px,3vw,32px);text-transform:uppercase}
.section-head h2 .em{color:var(--red)}
.section-head .rule{flex:1;height:2px;background:var(--stroke)}

/* ---------- filters ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 8px}
.chip{font-family:var(--mono);font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;background:var(--bg-2);color:var(--paper);border:2px solid var(--stroke);padding:9px 15px}
.chip:hover{border-color:var(--paper-2);color:var(--paper)}
.chip--on{background:var(--red);color:var(--paper);border-color:var(--stroke-strong)}
.chip__n{font-size:11px;color:var(--paper-2);margin-left:8px;padding-left:8px;border-left:1.5px solid var(--stroke)}
.chip--on .chip__n{color:var(--paper);border-left-color:rgba(244,239,230,.45)}
.help-line{font-size:14.5px;color:var(--paper-2);margin:4px 0 2px}
.help-line a{color:var(--paper);font-weight:600;text-decoration-color:var(--red)}
.help-line a:hover{color:var(--red)}

/* ---------- catalog: category groups ---------- */
.catgroup{margin:34px 0 8px}
.catgroup:first-child{margin-top:26px}
.cat-head{display:flex;align-items:baseline;gap:14px;margin-bottom:4px}
.cat-head h3{font-family:var(--display);font-weight:850;font-size:clamp(17px,2.2vw,22px);text-transform:uppercase;letter-spacing:.01em}
.cat-head h3::before{content:"//";color:var(--red);font-family:var(--mono);font-weight:700;margin-right:9px;font-size:.85em}
.cat-head__n{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-2);white-space:nowrap}
.cat-head .rule{flex:1;height:2px;background:var(--stroke);align-self:center}

/* ---------- catalog grid ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(262px,1fr));gap:18px;margin:22px 0 10px}
.catgroup .grid{margin:16px 0 0}
.card{background:var(--bg-2);border:2px solid var(--stroke);display:flex;flex-direction:column;text-align:left;color:var(--paper);padding:0;transition:transform .15s,box-shadow .15s,border-color .15s}
.card:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--red);border-color:var(--stroke-strong)}
.card__img{aspect-ratio:4/3;overflow:hidden;border-bottom:2px solid var(--stroke);position:relative;background:#fff}
.card__img img{width:100%;height:100%;object-fit:contain;padding:6px}
.card__avail{position:absolute;top:10px;left:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;padding:4px 9px;border:2px solid var(--ink);font-weight:700;text-transform:uppercase}
.card__avail--in{background:var(--green);color:var(--ink)}
.card__avail--low{background:var(--amber);color:var(--ink)}
.card__avail--out{background:var(--red);color:var(--paper)}
.card__body{padding:15px 16px 17px;display:flex;flex-direction:column;gap:5px;flex:1}
.card__brand{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.card__name{font-family:var(--display);font-weight:800;font-size:18px;line-height:1.15}
.card__meta{font-family:var(--mono);font-size:12.5px;color:var(--paper-2)}
.card__rate{margin-top:auto;padding-top:10px;display:flex;align-items:baseline;gap:7px}
.card__rate strong{font-family:var(--display);font-weight:850;font-size:21px}
.card__rate span{font-family:var(--mono);font-size:11px;color:var(--paper-2)}
/* the whole card is the button, but say so — not everyone hovers */
.card__cta{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--red);border-top:1px solid var(--stroke);margin-top:10px;padding-top:11px}
.card:hover .card__cta{color:var(--paper)}

/* ---------- line items: the fleet we have no picture of ----------
   Deliberately a price-list row, not a card with a hole in it. Same border
   weight, same type, same red hover as the grid above it, so it reads as the
   second half of one catalogue rather than a leftover. */
/* the sub-section the rows live in, when there are cards above them */
.alsolist{margin:26px 0 0;padding:16px 18px 18px;border:2px solid var(--stroke);background:rgba(255,255,255,.022)}
.alsolist__head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.alsolist__head h4{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-2)}
.alsolist__n{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--red);white-space:nowrap}
.alsolist__head .rule{flex:1;height:2px;background:var(--stroke);min-width:20px}
.alsolist .linelist{margin-top:13px;border-width:1.5px}

.linelist{margin:16px 0 0;border:2px solid var(--stroke);background:var(--bg-2)}
.linelist .lineitem+.lineitem{border-top:2px solid var(--stroke)}
.lineitem{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;align-items:center;gap:18px;
  width:100%;text-align:left;color:var(--paper);background:none;border:0;padding:14px 18px;
  transition:background .15s,box-shadow .15s}
.lineitem:hover,.lineitem:focus-visible{background:var(--bg-3);box-shadow:inset 3px 0 0 var(--red);outline:none}
.lineitem__main{display:flex;flex-direction:column;gap:3px;min-width:0}
.lineitem__name{font-family:var(--display);font-weight:800;font-size:17px;line-height:1.2}
.lineitem__meta{font-family:var(--mono);font-size:12px;color:var(--paper-2)}
.lineitem__avail{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;padding:4px 9px;border:2px solid;white-space:nowrap}
.lineitem__avail--in{color:var(--green);border-color:var(--green)}
.lineitem__avail--low{color:var(--amber);border-color:var(--amber)}
.lineitem__avail--out{color:var(--red);border-color:var(--red)}
.lineitem__rate{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.lineitem__rate strong{font-family:var(--display);font-weight:850;font-size:20px}
.lineitem__rate span{font-family:var(--mono);font-size:11px;color:var(--paper-2)}
.lineitem__cta{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:700;color:var(--red);white-space:nowrap}
.lineitem:hover .lineitem__cta{color:var(--paper)}
@media(max-width:760px){
  /* the arrow is the whole row on a phone — drop it and let the row be tapped */
  .lineitem{grid-template-columns:minmax(0,1fr) auto;gap:10px 14px;padding:13px 15px}
  .lineitem__avail{grid-row:2;justify-self:start}
  .lineitem__rate{grid-row:2;grid-column:2;justify-self:end}
  .lineitem__cta{display:none}
}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;padding:13px 24px;border:2px solid var(--stroke-strong);background:var(--red);color:var(--paper);text-decoration:none;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--paper)}
.btn--ghost{background:transparent;color:var(--paper);border-color:var(--paper-2)}
.btn--ghost:hover{box-shadow:4px 4px 0 var(--red)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
.btn--sm{padding:9px 16px;font-size:11.5px}

/* ---------- modal / flow shell ---------- */
.overlay{position:fixed;inset:0;background:rgba(10,10,10,.82);z-index:90;display:none;align-items:flex-start;justify-content:center;overflow-y:auto;padding:5vh 18px 6vh}
.overlay.open{display:flex}

/* ---------------------------------------------------------------------------
   DASHBOARD TABS

   Twelve sections on one page meant John scrolled past the booking board to
   reach the fleet table. Grouped into five, so what needs him today is the
   landing view and everything else is one tap.

   The bar scrolls horizontally on a phone rather than wrapping to two rows —
   a wrapped bar pushes the content down and reads as clutter.
--------------------------------------------------------------------------- */
.tabs{
  display:flex;gap:0;margin:26px 0 4px;
  border-bottom:2px solid var(--stroke);
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  flex:none;position:relative;
  background:none;border:0;border-bottom:3px solid transparent;
  margin-bottom:-2px;padding:13px 20px;cursor:pointer;
  font-family:var(--mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--paper-2);white-space:nowrap;
  transition:color .12s ease,border-color .12s ease;
}
.tab:hover{color:var(--paper)}
.tab:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.tab--active{color:var(--paper);border-bottom-color:var(--red);font-weight:700}

/* count chip — only rendered when there is something to count */
.tab__badge{
  display:none;margin-left:8px;padding:2px 7px;
  background:var(--red);color:var(--paper);
  font-size:10px;letter-spacing:.06em;border-radius:0;
}
.tab__badge--on{display:inline-block}
.tab__badge--quiet{background:var(--stroke);color:var(--paper-2)}

.tabpanel{display:none}
.tabpanel--active{display:block}
/* the first section in a panel should not double up on the bar's spacing */
.tabpanel--active > .section-head:first-child,
.tabpanel--active > div:first-child > .section-head:first-child{margin-top:22px}

@media(max-width:640px){
  /* full-bleed scroll bar: the negative margin must match .wrap's 14px pad */
  .tabs{margin:20px -14px 4px;padding:0 14px}
  .tab{padding:12px 15px;font-size:11.5px;letter-spacing:.1em}
}

/* ---------------------------------------------------------------------------
   SIGNED-OUT DASHBOARD LOCK

   The login overlay is only 82% opaque and sits on top of a rendered
   dashboard, so a signed-out visitor could read the stat tiles, the fleet
   table and the booking board through it. The API was never the leak — it
   returns 401 — but admin-app.js falls back to rendering from data.js, which
   is publicly served for the customer page. The result was a readable store
   dashboard for anyone who typed the URL.

   Hide everything except the login box, and make that box fully opaque. The
   `locked` class ships in the markup and is removed only after /api/state
   returns 200, so there is no frame where the dashboard flashes into view.
--------------------------------------------------------------------------- */
body.locked > *:not(#loginOverlay){display:none !important}
body.locked #loginOverlay{display:flex}

/* ---------------------------------------------------------------------------
   STAFF SIGN-IN

   Full-bleed brand screen rather than a modal floating over nothing. The
   Cardinal mark sits behind it as a large, very low-opacity watermark, with a
   red forge-glow bleeding up from the lower left. Solid display type, not
   outlined. Inputs are 52px tall with 16px text — big enough for John's crew
   to hit on a phone at the counter, and iOS will not zoom on focus.
--------------------------------------------------------------------------- */
#loginOverlay{
  background:
    /* warm forge glow, lower-left */
    radial-gradient(1100px 700px at 8% 92%, rgba(200,36,44,.55) 0%, rgba(200,36,44,0) 58%),
    /* deep ember, upper-right */
    radial-gradient(900px 620px at 92% 4%, rgba(122,20,26,.60) 0%, rgba(122,20,26,0) 62%),
    /* cool counterpoint so the reds have something to sit against */
    radial-gradient(800px 800px at 50% 120%, rgba(40,16,20,.9) 0%, rgba(40,16,20,0) 70%),
    linear-gradient(155deg, #2a1013 0%, #1c0d10 42%, #14090b 100%);
  align-items:center;
  padding:24px 18px;
}
/* The mark, keyed transparent so only the bird, ring and lettering carry —
   the source JPG is on solid white and would otherwise sit here as a pale
   rectangle. Alpha comes from min(r,g,b), so white drops out and the red
   stays fully saturated. */
#loginOverlay::before{
  content:"";position:absolute;inset:0;
  background:url("assets/cardinal-mark.webp") center 46%/min(720px,92vw) no-repeat;
  opacity:.10;
  pointer-events:none;
}
/* hairline grid, so the flat black reads as a surface rather than a void */
#loginOverlay::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(244,239,230,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(244,239,230,.028) 1px,transparent 1px);
  background-size:64px 64px;
}

.login-card{
  position:relative;z-index:2;width:100%;max-width:430px;
  background:var(--bg-2);
  border:2px solid var(--red);
  /* deep drop plus a soft red bloom, so the card lifts off the background
     instead of looking pasted onto it */
  box-shadow:0 30px 80px rgba(0,0,0,.65), 0 0 34px rgba(200,36,44,.28);
}
/* White plate with a red rule under it. The mark is used transparent here —
   on white its black ring and lettering read at full contrast, which is what
   the logo was drawn for. The old red-gradient header forced the white-plate
   variant and boxed the badge inside a square. */
.login-card__brand{
  background:#ffffff;
  border-bottom:3px solid var(--red);
  padding:18px 22px 16px;text-align:center;
}
.login-card__brand img{max-width:132px;width:100%;height:auto;display:inline-block}
.login-card__body{padding:22px 24px 20px}

.login-card__title{
  font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:.01em;
  text-transform:uppercase;color:var(--paper);margin:0 0 4px;line-height:1.1;
}
.login-card__sub{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--red);margin:0 0 18px;
}
.login-card .field{margin-bottom:15px}
.login-card .field label{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--paper-2);margin-bottom:7px;
}
.login-card .field input{
  width:100%;height:52px;padding:0 14px;font-size:16px;font-family:var(--sans);
  background:var(--bg-3);color:var(--paper);
  border:2px solid var(--stroke);outline:none;
  transition:border-color .12s ease, box-shadow .12s ease;
}
.login-card .field input:focus{
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(200,36,44,.22);
}
.login-card__btn{
  width:100%;height:54px;font-size:16px;letter-spacing:.08em;margin-top:4px;
}
#loginErr{
  color:var(--red);font-family:var(--mono);font-size:12px;line-height:1.45;
  display:none;margin:0 0 12px;padding:10px 12px;
  border:2px solid var(--red);background:rgba(200,36,44,.09);
}
.login-card__note{
  font-size:12.5px;color:var(--paper-2);opacity:.72;margin:18px 0 0;
  padding-top:16px;border-top:1px solid var(--stroke);line-height:1.5;
}
@media (max-width:420px){
  .login-card__body{padding:22px 18px 18px}
  .login-card__title{font-size:22px}
  #loginOverlay::before{background-size:min(560px,120vw)}
}
.sheet{background:var(--bg-2);border:2px solid var(--stroke-strong);width:100%;max-width:880px;position:relative}
.sheet__head{display:flex;align-items:center;gap:14px;padding:18px 24px;border-bottom:2px solid var(--stroke);background:var(--bg-3)}
.sheet__head h3{font-family:var(--display);font-weight:850;font-size:20px;text-transform:uppercase}
.sheet__close{margin-left:auto;background:none;border:2px solid var(--stroke);color:var(--paper-2);font-family:var(--mono);font-size:14px;padding:6px 12px}
.sheet__close:hover{border-color:var(--red);color:var(--paper)}
.sheet__body{padding:24px}

/* stepper */
.steps{display:flex;gap:0;border-bottom:2px solid var(--stroke);background:var(--bg-2)}
.step{flex:1;text-align:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-2);padding:11px 4px;border-right:2px solid var(--stroke);position:relative}
.step:last-child{border-right:0}
.step--on{color:var(--paper);background:var(--red);font-weight:700}
.step--done{color:var(--green)}

/* screening */
.squestion{border:2px solid var(--stroke);padding:16px 18px;margin-bottom:14px;background:var(--bg)}
.squestion p{font-weight:600;margin-bottom:10px}
.squestion .opts{display:flex;flex-wrap:wrap;gap:10px}
.opt{font-family:var(--mono);font-size:14px;padding:10px 17px;border:2px solid var(--stroke);background:var(--bg-2);color:var(--paper)}
.opt:hover{border-color:var(--paper-2);color:var(--paper)}
.opt--on{background:var(--paper);color:var(--ink);border-color:var(--stroke-strong);font-weight:700}
.flag-note{border:2px solid var(--amber);background:rgba(217,160,52,.08);padding:12px 15px;font-size:14px;margin-top:10px;display:none}
.flag-note--stop{border-color:var(--red);background:rgba(200,36,44,.08)}

/* item detail */
.detail{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.detail__img{border:2px solid var(--stroke);aspect-ratio:4/3;overflow:hidden;background:#fff}
.detail__img img{width:100%;height:100%;object-fit:contain;padding:8px}
.spec{font-family:var(--mono);font-size:13px;color:var(--paper-2);display:grid;grid-template-columns:auto 1fr;gap:4px 16px;margin:14px 0}
.spec dt{color:var(--red);text-transform:uppercase;letter-spacing:.08em;font-size:11px}
.rate-mini{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12.5px;margin-top:6px}
.rate-mini th{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-2);border-bottom:2px solid var(--stroke);padding:6px 8px;text-align:right}
.rate-mini th:first-child{text-align:left}
.rate-mini td{padding:7px 8px;text-align:right;border-bottom:1px solid var(--stroke)}
.rate-mini td:first-child{text-align:left;color:var(--paper-2)}
.fitbox{border:2px solid var(--stroke);background:var(--bg);padding:13px 15px;margin-top:13px}
.fitrow{display:grid;grid-template-columns:130px 1fr;gap:10px;padding:4px 0;font-size:13.5px}
.fitrow b{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--red);padding-top:2px}
.wl-box{border:2px dashed var(--amber);padding:14px 16px;margin-top:12px}
.wl-box p{font-size:14px;margin-bottom:10px}
.wl-box input{width:100%;background:var(--bg);border:2px solid var(--stroke);color:var(--paper);font-family:var(--mono);font-size:13.5px;padding:9px 11px;margin-bottom:9px;outline:none}
.wl-box input:focus{border-color:var(--amber)}
.manual-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;color:var(--paper-2);border:2px solid var(--stroke);padding:8px 13px;text-decoration:none;margin-top:12px}
.manual-link:hover{border-color:var(--red);color:var(--paper)}
.manual-link--off{opacity:.55;cursor:default}
.manual-link--off:hover{border-color:var(--stroke);color:var(--paper-2)}

/* long-term rentals: over the online cap, the answer is a person, not an error */
.modenote{font-size:13px;color:var(--paper-2);margin:8px 0 0}
.modenote a{color:var(--amber)}
.longrent{border:2px dashed var(--amber);padding:14px 16px;margin-top:12px}
.longrent p{font-size:14px}
.longrent p+p{margin-top:8px}
.longrent__how a{color:var(--amber);font-weight:700}

/* past the deposit hold's life — bookable, but not online */
.cal__day--far{opacity:.42}
.cal__deadline{font-size:12.5px;color:var(--paper-2);margin-top:10px;line-height:1.5}
.cal__deadline a{color:var(--amber)}

/* quick rent: find a repeat customer, book them without retyping */
.custbar{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.custbar input{flex:1;min-width:220px;background:var(--bg);border:2px solid var(--stroke);color:var(--paper);font-family:var(--mono);font-size:13.5px;padding:10px 12px;outline:none}
.custbar input:focus{border-color:var(--red)}
.custbar__count{font-family:var(--mono);font-size:11.5px;color:var(--paper-2);letter-spacing:.06em}
.custfind{border:2px solid var(--stroke);background:var(--bg);padding:12px 14px;margin-bottom:14px}
.custfind>label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);margin-bottom:7px}
.custfind input{width:100%;background:var(--bg-2);border:2px solid var(--stroke);color:var(--paper);font-family:var(--mono);font-size:13.5px;padding:10px 12px;outline:none}
.custfind input:focus{border-color:var(--amber)}
.custfind__list{margin-top:8px}
.custfind__row{display:block;width:100%;text-align:left;background:var(--bg-2);border:2px solid var(--stroke);border-top-width:0;color:var(--paper);padding:9px 12px;cursor:pointer}
.custfind__list .custfind__row:first-child{border-top-width:2px}
.custfind__row:hover{border-color:var(--amber);background:var(--bg-3)}
.custfind__row b{display:block;font-size:14px}
.custfind__row small{display:block;font-family:var(--mono);font-size:11.5px;color:var(--paper-2);margin-top:2px}
.custfind__row .pill{margin-left:7px;vertical-align:middle}
.custfind__none,.custfind__done,.custfind__hint{font-family:var(--mono);font-size:11.5px;margin-top:8px}
.custfind__none{color:var(--paper-2)}
.custfind__done{color:var(--green)}
.custfind__hint{color:var(--paper-2);line-height:1.5}

/* what the online total does and does not include */
.feenote{border-left:3px solid var(--amber);padding:10px 0 10px 12px;margin-top:12px;font-size:13px;color:var(--paper-2);line-height:1.55}
.feenote b{color:var(--paper)}
.feenote ul{margin:6px 0 0;padding-left:18px}
.feenote li{margin-top:3px}

/* calendar */
.cal{border:2px solid var(--stroke);background:var(--bg);padding:16px}
.cal__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:15px}
.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal__dow{font-family:var(--mono);font-size:10px;text-align:center;color:var(--paper-2);letter-spacing:.1em;padding:4px 0}
.cal__day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13.5px;border:1.5px solid var(--stroke);background:var(--bg-2);color:var(--paper)}
.cal__day:hover:not(:disabled){border-color:var(--paper-2)}
.cal__day:disabled{opacity:.28;cursor:not-allowed}
.cal__day--booked{background:repeating-linear-gradient(135deg,var(--bg-3) 0 5px,var(--red-deep) 5px 7px);color:var(--paper-2);cursor:not-allowed;position:relative}
.cal__day--sel{background:var(--red);color:var(--paper);border-color:var(--stroke-strong);font-weight:700}
.cal__day--range{background:var(--red-deep);color:var(--paper)}
.cal__legend{display:flex;gap:16px;margin-top:12px;font-family:var(--mono);font-size:10.5px;color:var(--paper-2);flex-wrap:wrap}
.cal__legend i{display:inline-block;width:12px;height:12px;border:1.5px solid var(--stroke);margin-right:5px;vertical-align:-1px}

/* summary / totals */
.tally{border:2px solid var(--stroke);background:var(--bg);padding:16px 18px;font-family:var(--mono);font-size:14.5px}
.tally .row{display:flex;justify-content:space-between;padding:5px 0;color:var(--paper-2)}
.tally .row strong{color:var(--paper)}
.tally .row--total{border-top:2px solid var(--stroke);margin-top:8px;padding-top:11px;font-size:16px;color:var(--paper)}
.tally .row--total strong{color:var(--red);font-size:20px}

/* contract */
.contract{border:2px solid var(--stroke);background:#efe9dc;color:#1c1a16;padding:26px 28px;max-height:420px;overflow-y:auto;font-family:Georgia,serif;font-size:14px;line-height:1.65}
.contract h4{font-family:var(--display);text-transform:uppercase;font-size:16px;margin-bottom:4px;letter-spacing:.03em}
.contract h5{font-family:var(--sans);font-size:13px;text-transform:uppercase;letter-spacing:.08em;margin:16px 0 5px}
.contract .fill{background:#fff3b8;border-bottom:2px solid #b8962e;padding:1px 6px;font-weight:700;white-space:nowrap;animation:fillpop .5s ease}
/* ---- Cardinal's 8-page agreement ---- */
.agreement{max-height:520px;font-size:13px;line-height:1.6}
.agreement p{margin-bottom:9px;text-align:justify}
.agreement .ag-head{text-align:center;border-bottom:2px solid #1c1a16;padding-bottom:8px;margin-bottom:14px}
.agreement .ag-head h4{font-size:17px;letter-spacing:.06em;margin:0}
.agreement .ag-head p{font-size:11px;text-align:center;margin:4px 0 0;font-family:monospace}
.agreement .ag-face{border:1.5px solid #a89f8d;background:#f7f3e9;padding:11px 13px;margin-bottom:14px}
.agreement .ag-face b{font-family:monospace;font-size:11px;letter-spacing:.1em}
.agreement .ag-facegrid{display:grid;grid-template-columns:130px 1fr;gap:3px 12px;margin-top:8px;font-size:12.5px}
.agreement .ag-facegrid>span:nth-child(odd){font-family:monospace;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:#5c564a;padding-top:3px}
.agreement .ag-equip{border:1.5px solid #a89f8d;padding:9px 11px;margin:8px 0 10px;min-height:34px;background:#fffdf6}
.agreement ol.ag-alpha{list-style:upper-alpha;padding-left:26px;margin-bottom:9px}
.agreement ol.ag-roman{list-style:lower-roman;padding-left:24px;margin:5px 0}
.agreement ol.ag-alpha>li{margin-bottom:5px;text-align:justify}
.agreement .cbox{color:#5c564a;white-space:nowrap}
.agreement .ag-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #a89f8d;margin:16px 0 20px;padding-top:7px;font-family:monospace;font-size:11px;color:#5c564a;page-break-after:always}
.agreement .ag-sign{width:100%;border-collapse:collapse;margin-top:16px}
.agreement .ag-sign td{border:0;padding:5px 14px 5px 0;vertical-align:bottom;width:50%}
.agreement .ag-sign small{font-family:monospace;font-size:9.5px;letter-spacing:.08em;color:#5c564a}
.agreement .ag-line{border-bottom:1px solid #1c1a16;min-height:30px;display:flex;align-items:flex-end;padding-bottom:2px}
@keyframes fillpop{0%{background:#ffe062}100%{background:#fff3b8}}
.contract table{width:100%;border-collapse:collapse;margin:8px 0;font-size:13px}
.contract td,.contract th{border:1px solid #a89f8d;padding:5px 8px;text-align:left}
.renterbox{border:2px solid var(--stroke);background:var(--bg);padding:16px 18px;margin-bottom:16px}
.autofill-tip{display:flex;gap:10px;align-items:center;border:2px solid var(--green);background:rgba(63,154,85,.08);padding:11px 14px;font-size:13.5px;margin-bottom:14px}
.autofill-tip b{color:var(--green)}
.sign-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.sign-box{border:2px solid var(--stroke);background:var(--bg);padding:14px 16px}
.sign-box label{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--paper-2);display:block;margin-bottom:8px}
.sign-box input{width:100%;background:transparent;border:0;border-bottom:2px solid var(--stroke);color:var(--paper);font-size:22px;font-family:'Segoe Script','Brush Script MT',cursive;padding:4px 2px;outline:none}
.sign-box input:focus{border-color:var(--red)}
.initials-chip{font-family:var(--mono);font-size:11px;border:2px dashed var(--amber);color:var(--amber);padding:3px 8px;margin-left:6px;white-space:nowrap}
.initials-chip.done{border-style:solid;border-color:var(--green);color:var(--green)}

/* "we are the software, not the landlord" — kept OUTSIDE the agreement document
   on purpose: Cardinal's legal text is reproduced verbatim and is never added to */
.nonparty{font-family:var(--mono);font-size:11px;line-height:1.6;color:var(--paper-2);
  border:2px solid var(--stroke);background:var(--bg);padding:11px 14px;margin-top:12px}
.nonparty a{color:var(--paper-2);text-decoration:underline}
.nonparty a:hover{color:var(--red)}

/* checkout */
.pay{display:grid;grid-template-columns:1.2fr 1fr;gap:24px}
.field{margin-bottom:13px}
.field label{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--paper-2);display:block;margin-bottom:6px}
.field input,.field select{width:100%;background:var(--bg);border:2px solid var(--stroke);color:var(--paper);font-family:var(--mono);font-size:14px;padding:11px 12px;outline:none}
.field input:focus,.field select:focus{border-color:var(--red)}
.field--row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.secure-tag{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;color:var(--paper-2);border:2px solid var(--stroke);padding:9px 13px;margin-bottom:16px}
.secure-tag svg{flex:none}

/* confirmation */
.confirm{text-align:center;padding:16px 6px 4px}
.confirm__badge{width:72px;height:72px;margin:0 auto 18px;border:3px solid var(--green);display:flex;align-items:center;justify-content:center}
.confirm__badge svg{width:38px;height:38px}
.confirm h3{font-family:var(--display);font-weight:900;font-size:28px;text-transform:uppercase;margin-bottom:6px}
.confirm .res-no{font-family:var(--mono);color:var(--red);font-size:15px;letter-spacing:.14em}
.confirm__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:24px 0;text-align:left}
.confirm__cell{border:2px solid var(--stroke);background:var(--bg);padding:14px 16px}
.confirm__cell b{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--red);display:block;margin-bottom:6px}
.confirm__cell span{font-size:14.5px}

/* ---------- admin ---------- */
.admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin:26px 0}
.stat{border:2px solid var(--stroke);border-top:3px solid var(--red);background:var(--bg-2);padding:18px 20px;transition:transform .15s,box-shadow .15s}
.stat:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 rgba(200,36,44,.55)}
.stat b{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-2);display:block;margin-bottom:8px}
.stat .n{font-family:var(--display);font-weight:900;font-size:34px;line-height:1}
.stat .n.red{color:var(--red)} .stat .n.amber{color:var(--amber)} .stat .n.green{color:var(--green)}
.stat small{font-family:var(--mono);font-size:11px;color:var(--paper-2)}

.table{width:100%;border-collapse:collapse;font-size:14px}
.table th{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--paper-2);text-align:left;border-bottom:2px solid var(--stroke-strong);padding:10px 10px}
/* category divider rows in the fleet table */
.table .table__cat td{background:var(--bg-3);border-bottom:2px solid var(--stroke);border-top:2px solid var(--stroke);padding:9px 10px}
.table .table__cat span{font-family:var(--display);font-weight:800;font-size:13.5px;text-transform:uppercase;letter-spacing:.04em}
.table .table__cat span::before{content:"//";color:var(--red);font-family:var(--mono);font-weight:700;margin-right:8px}
.table .table__cat small{font-family:var(--mono);font-size:10.5px;color:var(--paper-2);margin-left:10px}
.table tr.table__cat:hover td{background:var(--bg-3)}
.table td{border-bottom:1px solid var(--stroke);padding:11px 10px;vertical-align:middle}
.table tr:hover td{background:var(--bg-2)}
/* ---------- analytics ---------- */
.ana-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px;margin:6px 0 30px}
.ana-card{border:2px solid var(--stroke);background:var(--bg-2);padding:16px 18px;min-width:0}
.ana-card h4{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-2);margin-bottom:13px;padding-bottom:9px;border-bottom:1px solid var(--stroke)}
.bar{display:grid;grid-template-columns:minmax(70px,32%) minmax(0,1fr) auto;gap:10px;align-items:center;padding:4px 0;font-size:12.5px}
.bar__label{font-family:var(--mono);font-size:11.5px;color:var(--paper-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar__track{height:14px;background:var(--bg);border:1px solid var(--stroke);min-width:0}
.bar__track i{display:block;height:100%;background:linear-gradient(90deg,var(--red-deep),var(--red))}
.bar__val{font-family:var(--mono);font-size:12px;font-weight:700;white-space:nowrap}
.bar__val small{color:var(--paper-2);font-weight:400;font-size:10.5px}
.ana-empty{color:var(--paper-2);font-size:13px;font-family:var(--mono)}
@media(max-width:640px){ .ana-grid{grid-template-columns:minmax(0,1fr)} .bar{grid-template-columns:minmax(60px,30%) minmax(0,1fr) auto} }

/* repeat customer: welcome-back strip on the renter form */
.welcome-back{display:flex;gap:12px;align-items:center;justify-content:space-between;border:2px solid var(--green);background:rgba(63,154,85,.08);padding:11px 14px;margin-bottom:14px;font-size:13.5px}
.welcome-back b{color:var(--green)}
.welcome-back button{flex:none;background:none;border:1.5px solid var(--stroke);color:var(--paper-2);font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:7px 11px}
.welcome-back button:hover{border-color:var(--red);color:var(--paper)}
@media(max-width:640px){ .welcome-back{flex-wrap:wrap} }

/* promo code row at checkout */
.promo-row{display:flex;gap:10px;margin-bottom:12px}
.promo-row input{flex:1;min-width:0;background:var(--bg);border:2px solid var(--stroke);color:var(--paper);font-family:var(--mono);font-size:14px;padding:11px 12px;outline:none;text-transform:uppercase}
.promo-row input:focus{border-color:var(--red)}

/* manager-only fees panel in the booking editor */
.feebox{border:2px solid var(--amber);background:rgba(217,160,52,.06);padding:12px 15px 4px;margin:4px 0 14px}
.feebox legend{font-family:var(--display);font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--amber);padding:0 8px}
.feebox__note{font-size:12.5px;color:var(--paper-2);line-height:1.5;margin-bottom:12px}
.feebox__by{font-family:var(--mono);font-size:11px;color:var(--paper-2);margin:2px 0 10px}

/* deposit waiver row in the booking editor */
.waivebox{display:flex;gap:12px;align-items:center;border:2px dashed var(--stroke);padding:11px 13px;margin:-2px 0 13px}
.waivebox input{flex:1;min-width:0;background:var(--bg);border:2px solid var(--stroke);color:var(--paper);font-family:var(--sans);font-size:13.5px;padding:9px 11px;outline:none}
.waivebox input:focus{border-color:var(--amber)}
.waivebox--on{border-style:solid;border-color:var(--green);background:rgba(63,154,85,.07)}
.waivebox--on b{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--green)}
.waivebox--on p{font-size:12.5px;color:var(--paper-2);margin-top:3px}
@media(max-width:640px){ .waivebox{flex-wrap:wrap} .waivebox .btn{flex:1 1 auto} }

/* photo picker in the add/edit equipment form */
.photo-pick{display:flex;gap:14px;align-items:center}
.photo-pick__thumb{flex:none;width:96px;height:72px;border:2px solid var(--stroke);background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.photo-pick__thumb img{max-width:100%;max-height:100%;object-fit:contain}
.photo-pick__ctl{display:flex;flex-direction:column;gap:7px;align-items:flex-start}
.photo-pick__ctl small{font-family:var(--mono);font-size:11px;color:var(--paper-2);line-height:1.5}

.qty-ctl{display:inline-flex;align-items:center;border:2px solid var(--stroke)}
.qty-ctl button{width:28px;height:28px;background:var(--bg-3);border:0;color:var(--paper);font-family:var(--mono);font-size:15px}
.qty-ctl button:hover{background:var(--red)}
.qty-ctl span{width:34px;text-align:center;font-family:var(--mono);font-size:13.5px}
.pill{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border:2px solid;white-space:nowrap;font-weight:700}
.pill--ok{color:var(--green);border-color:var(--green)}
.pill--warn{color:var(--amber);border-color:var(--amber)}
.pill--due{color:var(--red);border-color:var(--red)}
.pill--info{color:var(--paper-2);border-color:var(--stroke)}
.lifebar{width:120px;height:10px;border:1.5px solid var(--stroke);background:var(--bg);position:relative}
.lifebar i{position:absolute;inset:0;right:auto;background:var(--green)}
.lifebar i.warn{background:var(--amber)} .lifebar i.due{background:var(--red)}
.lifebar+small{font-family:var(--mono);font-size:10.5px;color:var(--paper-2)}

.alert{display:flex;gap:14px;align-items:flex-start;border:2px solid var(--red);background:rgba(200,36,44,.07);padding:15px 18px;margin-bottom:12px}
.alert--amber{border-color:var(--amber);background:rgba(217,160,52,.07)}
.alert b{font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;font-size:12px}
.alert p{font-size:13.5px;color:var(--paper-2);margin-top:3px}
.alert .btn--sm{margin-left:auto;flex:none}
.notif-toast{position:fixed;bottom:26px;right:26px;z-index:120;background:var(--bg-3);border:2px solid var(--green);padding:15px 19px;max-width:360px;font-size:13.5px;display:none;box-shadow:6px 6px 0 rgba(0,0,0,.5)}
.notif-toast b{color:var(--green);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:5px}

/* board (admin calendar)
   Its own scroll box rather than a table that runs down the page: the date
   header and the equipment column stay frozen while you move around inside
   it, and the page below the board stays reachable. border-collapse has to
   be `separate` for sticky cells — collapsed borders belong to the table,
   not the cell, so they scroll away and leave the header edgeless. */
.board{border:2px solid var(--stroke);overflow:auto;max-height:min(70vh,720px);overscroll-behavior:contain;background:var(--bg)}
.board table{border-collapse:separate;border-spacing:0;min-width:860px;width:100%}
.board th,.board td{border-right:1px solid var(--stroke);border-bottom:1px solid var(--stroke)}
.board thead th{position:sticky;top:0;z-index:3;font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--paper-2);padding:6px 6px;background:var(--bg-3);text-transform:uppercase;line-height:1.25}
.board thead th.item-cell{left:0;z-index:5;text-align:left}
.board thead .dow{display:block}
.board thead .num{display:block;font-size:14px;color:var(--paper);letter-spacing:0}
.board thead .mon{display:block;font-size:9px;color:var(--amber)}
.board td{padding:0;height:46px;min-width:64px}
.board td.res{background:var(--red-deep);position:relative}
.board td.res--start{box-shadow:inset 3px 0 0 var(--red)}
.board td .who{position:absolute;left:6px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:10.5px;white-space:nowrap;color:var(--paper);z-index:1}
.board td.today-col{background:rgba(217,160,52,.10)}
.board .item-cell{font-family:var(--mono);font-size:11.5px;padding:7px 10px;white-space:nowrap;background:var(--bg-2);position:sticky;left:0;z-index:2;text-align:left;min-width:210px}
.board .board-empty{color:var(--paper-2);padding:22px 14px;position:static}

/* category and item summary rows: free-of-total per day, so a collapsed
   group still answers "is anything open Saturday?" */
.board tr.cat-row>td{background:var(--bg-3);cursor:pointer;height:44px}
.board tr.cat-row:hover>td{background:#22201d}
.board tr.cat-row .item-cell{background:var(--bg-3);font-family:var(--display);font-weight:800;font-size:12.5px;text-transform:uppercase;letter-spacing:.06em}
.board tr.item-row>td{cursor:pointer}
.board tr.item-row .item-cell--sub{padding-left:16px}
.board tr.unit-row>td{height:38px}
.board tr.unit-row .item-cell--unit{padding-left:34px;color:var(--paper-2)}
.board .item-cell .caret{display:inline-block;width:14px;color:var(--paper-2)}
.board .item-cell small{font-family:var(--mono);font-size:10px;color:var(--paper-2);margin-left:8px}
.board td.cnt{font-family:var(--mono);font-size:14px;text-align:center;vertical-align:middle;color:var(--paper)}
.board td.cnt small{font-size:9.5px;color:var(--paper-2)}
.board td.cnt--all{color:var(--green)}
.board td.cnt--some{color:var(--amber)}
.board td.cnt--none{color:var(--red);background:rgba(190,30,45,.10)}

/* =======================================================================
   RESPONSIVE — phones, tablets, and the counter iPad
   Root-cause fixes first (these apply at every width), then breakpoints.
   ======================================================================= */

/* Grid tracks sized 1fr still refuse to shrink below their content's
   min-content width. Date inputs and long codes were blowing tracks past the
   viewport. Letting the children shrink is what actually fixes it. */
.field,.field input,.field select,.detail>div,.pay>div,.sign-box,.sign-box input{min-width:0}
.field--row,.sign-row,.detail,.pay{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.detail{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.pay{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
input,select,textarea,button{max-width:100%}
/* iOS zooms the page whenever a focused field is under 16px */
@supports (-webkit-touch-callout:none){
  .field input,.field select,.wl-box input,.boardbar__search,.boardbar__sel{font-size:16px}
}

/* ---------- tablet / small laptop ---------- */
@media(max-width:980px){
  .detail,.pay{grid-template-columns:minmax(0,1fr)}
  .sheet{max-width:none}
  .wrap{padding:0 20px}
  .band__inner{grid-template-columns:minmax(0,1fr);gap:24px}
  .band::before{background-size:380px;background-position:right -100px top -40px}
}

@media(max-width:820px){
  .detail,.pay,.sign-row{grid-template-columns:minmax(0,1fr)}
  .topbar{flex-wrap:wrap;gap:10px;padding:12px 16px}
  .wrap{padding:0 16px}
  .band{padding:40px 16px 36px}
}

/* ---------- staff tables become stacked cards ----------
   The six dashboard tables ran 440–910px wide. On a phone — and on an iPad
   held portrait, which is 768px — that is a sideways pan for every single
   row, so below 860px each row becomes a labelled card instead. Labels come
   from data-label on each <td> (set in admin-app.js). iPad landscape and
   desktop keep the real table. */
@media(max-width:860px){
  /* the sticky equipment column was 274px of a 753px board window */
  .board .item-cell{width:160px;min-width:160px;max-width:160px;white-space:normal;line-height:1.25;font-size:11px;padding:7px 9px}
  .board .item-cell__t{display:inline-block;max-width:126px;vertical-align:middle}
  .board{max-height:66vh}
  .topbar{padding:11px 16px}
  .topbar__link{padding:8px 11px;font-size:11.5px}
}
@media(max-width:860px){
  .table,.table tbody,.table tr,.table td{display:block;width:100%}
  .table tr:first-child{display:none}
  .table tr{border:2px solid var(--stroke);background:var(--bg-2);margin-bottom:12px}
  .table tr:hover td{background:transparent}
  .table td{border:0;border-bottom:1px solid var(--stroke);padding:10px 13px;
    display:grid;grid-template-columns:minmax(88px,34%) minmax(0,1fr);gap:12px;align-items:start}
  .table td::before{content:attr(data-label);font-family:var(--mono);font-size:10px;
    letter-spacing:.1em;text-transform:uppercase;color:var(--paper-2);padding-top:3px}
  .table td:last-child{border-bottom:0}
  .table td:not([data-label]){display:block}
  .lifebar{width:100%}
  /* the "nothing here" colspan row */
  .table td[colspan]{display:block;padding:16px 13px}
  /* category dividers read as slim banners between the stacked cards */
  .table tr.table__cat{border-color:var(--stroke);background:var(--bg-3);margin:20px 0 12px}
  .table .table__cat td{padding:10px 13px;border:0}
}

/* ---------- phones ---------- */
@media(max-width:640px){
  body{font-size:16px}
  /* the sticky bar was eating 173px — over a fifth of the screen — on every scroll */
  .topbar{position:static;padding:10px 14px;gap:8px 10px;row-gap:8px}
  .topbar__brand img{width:34px;height:34px}
  .topbar__name{font-size:16px}
  .topbar__sub{font-size:9.5px;letter-spacing:.1em}
  .topbar__spacer{display:none}
  .topbar__link{padding:8px 10px;font-size:11px}
  .demo-chip{font-size:9.5px;padding:4px 8px}
  .wrap{padding:0 14px}
  .band{padding:30px 14px 28px}
  .band__how{padding:15px 15px}
  .trustbar{padding:10px 14px;gap:6px 22px}
  .trustbar__item{white-space:normal;font-size:11.5px}
  .topbar__call{padding:8px 11px;font-size:11px}
  .section-head{margin:34px 0 16px;flex-wrap:wrap;gap:10px}
  .section-head .rule{min-width:20px}
  .footer{padding:24px 14px;margin-top:44px}
  .footer__grid{gap:18px}

  /* full-screen sheets read far better than a floating card on a phone */
  .overlay{padding:0;align-items:stretch}
  .sheet{min-height:100%;border-width:0;border-top:2px solid var(--stroke-strong)}
  .sheet__head{position:sticky;top:0;z-index:3;padding:14px 16px;gap:10px;flex-wrap:wrap}
  .sheet__head h3{font-size:17px}
  .sheet__body{padding:16px 14px 28px}
  .steps{position:sticky;top:57px;z-index:2}
  .step{font-size:9px;letter-spacing:.04em;padding:9px 2px}

  /* one field per line — city/state/ZIP at 55px wide was unusable */
  .field--row{grid-template-columns:minmax(0,1fr)!important;gap:0}
  .sign-row{grid-template-columns:minmax(0,1fr)!important}

  /* calendar cells were 34px; a fingertip is ~44px */
  .cal{padding:10px}
  .cal__grid{gap:3px}
  .cal__day{aspect-ratio:auto;min-height:44px;font-size:15px}
  .cal__head{font-size:14px}

  /* the agreement itself: no sideways scrolling through a legal document */
  .contract{padding:18px 16px;max-height:64vh;font-size:14px}
  .agreement{max-height:64vh;font-size:13.5px}
  .contract::-webkit-scrollbar{width:6px}
  .contract::-webkit-scrollbar-thumb{background:#a89f8d}
  .agreement p,.agreement ol.ag-alpha>li{text-align:left}
  .contract .fill{white-space:normal;overflow-wrap:anywhere}
  .agreement .ag-facegrid{grid-template-columns:minmax(0,1fr);gap:0 0}
  .agreement .ag-facegrid>span:nth-child(odd){padding-top:8px}
  .agreement .ag-sign,.agreement .ag-sign tbody,.agreement .ag-sign tr,.agreement .ag-sign td{display:block;width:100%}
  .agreement .ag-sign td{padding:5px 0 12px}
  .contract table{display:block;overflow-x:auto}
  .fitrow{grid-template-columns:minmax(0,1fr);gap:2px}
  .rate-mini{font-size:11.5px}
  .rate-mini th,.rate-mini td{padding:6px 4px}

  /* stat + summary blocks */
  .stat{padding:14px 15px}
  .stat .n{font-size:28px}
  .tally{font-size:14px;padding:14px 15px}
  .tally .row{flex-wrap:wrap;gap:2px}
  .confirm h3{font-size:23px}
  .notif-toast{left:12px;right:12px;bottom:12px;max-width:none}

  /* board: the sticky equipment column was 274px of a 339px window */
  .board .item-cell{width:126px;min-width:126px;max-width:126px;white-space:normal;line-height:1.25;font-size:10.5px;padding:6px 8px}
  .board .item-cell__t{display:inline-block;max-width:92px;vertical-align:middle}
  .board td{min-width:52px}
  .board td.cnt{font-size:12.5px}
  .board td .who{font-size:9px;left:4px}
  .board tr.item-row .item-cell--sub{padding-left:8px}
  .board tr.unit-row .item-cell--unit{padding-left:22px}
  .board{max-height:62vh}
}

@media(max-width:400px){
  .grid{grid-template-columns:minmax(0,1fr)}
  .step{font-size:0;padding:11px 1px}
  .step::after{content:attr(data-s-short);font-size:9.5px;font-weight:700;letter-spacing:0}
  .table td{grid-template-columns:minmax(0,1fr);gap:3px}
}

/* ---------- touch devices of any size (phone, iPad, touch laptop) ---------- */
@media(pointer:coarse){
  .btn{padding:14px 24px}
  .btn--sm{padding:12px 18px;font-size:12px}
  .btn--tiny{padding:11px 14px!important;font-size:11px!important}
  .chip,.opt{min-height:44px;display:inline-flex;align-items:center}
  .sheet__close{min-height:44px;padding:8px 14px}
  .qty-ctl button{width:42px;height:42px;font-size:19px}
  .qty-ctl span{width:44px;font-size:15px}
  .cal__day{min-height:44px}
  /* fingers, not a mouse — these are the squares John taps at the counter */
  .board td{height:52px}
  .board tr.unit-row>td{height:46px}
  .initials-chip{display:inline-block;padding:7px 12px;font-size:12px}
  .toggle{padding:11px 0}
  .toggle input{width:22px;height:22px}
  .field input,.field select,.boardbar__sel,.boardbar__search{padding:13px 12px}
  .table td .rowbtns{gap:8px}
}

/* ---- the main site's menu, so a visitor who came from /rentals can keep going ---- */
.sitenav{display:flex;align-items:center}
.sitenav a,.sitenav summary{font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--paper-2);cursor:pointer}
.sitenav summary{list-style:none}
.sitenav summary::-webkit-details-marker{display:none}
.sitenav__desk{display:flex;align-items:center;gap:4px}
.sitenav__desk>a,.sitenav__desk summary{display:inline-flex;align-items:center;min-height:40px;padding:9px 12px;border:2px solid transparent}
.sitenav__desk>a:hover,.sitenav__desk summary:hover,.sitenav__desk details[open]>summary{color:var(--paper);border-color:var(--stroke)}
.sitenav__desk summary::after{content:"\25BE";margin-left:6px;font-size:10px}
.sitenav details{position:relative}
.sitenav__drop{position:absolute;top:calc(100% + 6px);left:0;min-width:220px;background:var(--bg-2);border:2px solid var(--stroke-strong);box-shadow:6px 6px 0 rgba(0,0,0,.45);padding:6px;z-index:60;display:flex;flex-direction:column}
.sitenav__drop a{padding:11px 12px;color:var(--paper)}
.sitenav__drop a:hover,.sitenav__panel a:hover{background:var(--bg-3);color:var(--paper)}
.sitenav a.is-here{color:var(--paper);box-shadow:inset 3px 0 0 var(--red)}
.sitenav__mob{display:none}
.sitenav__mob>summary{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:9px 13px;border:2px solid var(--stroke-strong);color:var(--paper)}
.sitenav__burger,.sitenav__burger::before,.sitenav__burger::after{display:block;width:16px;height:2px;background:currentColor;position:relative}
.sitenav__burger::before,.sitenav__burger::after{content:"";position:absolute;left:0}
.sitenav__burger::before{top:-5px}.sitenav__burger::after{top:5px}
.sitenav__panel{position:absolute;right:0;top:calc(100% + 8px);width:min(300px,calc(100vw - 28px));max-height:calc(100vh - 120px);overflow-y:auto;background:var(--bg-2);border:2px solid var(--stroke-strong);box-shadow:6px 6px 0 rgba(0,0,0,.45);padding:8px;z-index:60;display:flex;flex-direction:column}
.sitenav__panel a{padding:12px;color:var(--paper);min-height:44px;display:flex;align-items:center}
.sitenav__panel p{margin:10px 12px 2px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
@media (max-width:1080px){
  .sitenav__desk{display:none}
  .sitenav__mob{display:block}
}

/* ---- phones: the booking sheet's background has to grow with the form.
   A stretched flex item was exactly one screen tall, so everything below the
   first screen floated over the page behind it. ---- */
@media (max-width:640px){
  .overlay{align-items:flex-start;background:var(--bg)}
  .sheet{min-height:100%}
}
/* phones drop the sticky header, which also dropped its stacking order — the
   menu then opened underneath the red band. Keep it on top. */
@media (max-width:720px){ .topbar{position:relative;z-index:50} }