/* YeeHaul Trailer Rentals — booking site.
   Palette matches the standalone landing page: navy ground, gold accent. */

:root {
  --navy: #191f3e;
  --navy-deep: #12172f;
  --slate: #4c5767;
  --gold: #e6a056;
  --gold-light: #efba79;
  --ink: #1a2030;
  --body: #3d4658;
  --muted: #6b7488;
  --line: #dfe3ea;
  --page: #f5f6f9;
  --card: #ffffff;
  --ok: #1c7a4a;
  --ok-bg: #e6f4ec;
  --warn: #8a5a00;
  --warn-bg: #fdf2dd;
  --bad: #a52a2a;
  --bad-bg: #fbeaea;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(20, 28, 50, .09), 0 6px 20px rgba(20, 28, 50, .06);
}

* { box-sizing: border-box; }

/* The `hidden` attribute is only `display: none` from the browser's default
   stylesheet, so ANY author `display` rule silently beats it — an element with
   both `hidden` and `display: flex` stays on screen. Everything toggled from
   JS relies on `hidden` working, so enforce it. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--body);
  background: var(--page);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 { color: var(--ink); line-height: 1.25; }
h1 { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: 1.3rem; font-weight: 700; margin-top: 2rem; }
h3 { font-size: 1.1rem; }
h4 { font-size: .98rem; margin: 1.5rem 0 .4rem; }

a { color: #1f4fa3; }
a:hover { color: #16387a; }

.muted { color: var(--muted); }
.small { font-size: .86rem; }

/* ------------------------------------------------------------ chrome */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: .75rem 1.25rem;
  background: var(--navy);
  border-bottom: 3px solid var(--gold);
}
.brand {
  display: flex; align-items: center; gap: .6rem;
  color: #fff; font-weight: 800; font-size: 1.05rem;
  text-decoration: none; letter-spacing: -.01em;
}
.brand img { display: block; height: 44px; width: auto; }
.site-header nav { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.site-header nav a {
  color: var(--gold-light); text-decoration: none; font-weight: 600;
  font-size: .93rem;
}
.site-header nav a:hover { color: #fff; }

main { max-width: 940px; margin: 0 auto; padding: 0 1.25rem 4rem; }

.site-footer {
  background: var(--navy-deep); color: #aeb6c6;
  padding: 1.75rem 1.25rem; text-align: center; font-size: .88rem;
}
.site-footer p { margin: .3rem 0; }
.site-footer a { color: var(--gold-light); }

/* ------------------------------------------------------------ flashes */
.flashes { margin: 1.25rem 0 0; }
.flash {
  padding: .7rem .9rem; border-radius: var(--radius); margin-bottom: .5rem;
  border: 1px solid transparent; font-size: .93rem;
}
.flash-success { background: var(--ok-bg); border-color: #bfe3cd; color: var(--ok); }
.flash-error   { background: var(--bad-bg); border-color: #f0c8c8; color: var(--bad); }
.flash-info    { background: #e9eff9; border-color: #c9d8ef; color: #24467f; }

/* ------------------------------------------------------------ hero */
.hero {
  margin: 1.5rem 0 2rem;
  background: var(--navy);
  border-radius: 14px; overflow: hidden;
  box-shadow: var(--shadow);
}
.hero-photo { margin: 0; line-height: 0; }
.hero-photo img {
  width: 100%; height: clamp(190px, 34vw, 340px); object-fit: cover;
  display: block;
}
.hero-text { padding: 1.5rem 1.5rem 1.75rem; }
.hero-text h1 { color: #fff; margin: 0 0 .5rem; }
.hero-text .lede { color: #c3cbdb; margin: 0 0 1rem; max-width: 54ch; }
.hero-text .price { color: #fff; font-size: 1.05rem; margin: 0 0 .6rem; }
.hero-text .price strong { font-size: 1.85rem; color: var(--gold); font-weight: 800; }
.hero-text .price .from {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .08em;
  color: #9aa4b5; font-weight: 700;
}
.hero-text .muted { color: #9aa4b5; }

/* The rate card: what a night actually costs, by day of week.
   Columns rather than one tall list, so it uses the width of the hero
   instead of stopping halfway and leaving the navy empty beside it. Each
   row keeps its label and price flexed apart, so a column narrower than
   ~16rem folds the grid down to fewer of them rather than crushing one. */
.rate-card {
  list-style: none; padding: 0; margin: 0 0 1.1rem;
  display: grid; gap: .2rem 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.rate-card li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .3rem 0; border-bottom: 1px solid rgba(255, 255, 255, .1);
  font-size: .9rem; color: #c3cbdb;
}
.rate-card li:last-child { border-bottom: 0; }
.rate-card strong { color: #fff; font-weight: 700; }
/* Keeps the figure and its unit together at the end of the row, so prices
   line up down a column whether or not they carry a "/day". */
.rate-card .rate-amount { white-space: nowrap; }

.btn-primary {
  display: inline-block; background: var(--gold); color: #2a1c06;
  font-weight: 700; text-decoration: none;
  padding: .7rem 1.25rem; border-radius: 8px;
}
.btn-primary:hover { background: var(--gold-light); color: #2a1c06; }

/* ------------------------------------------------------------ gallery */
.gallery {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-bottom: 2rem;
}
.gallery figure { margin: 0; }
.gallery img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius); display: block; background: #e4e7ee;
  transition: transform .18s ease;
}

/* The photos are buttons so they're keyboard-reachable; strip the chrome so
   they still look like plain images. */
.photo-open {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; border-radius: var(--radius); line-height: 0;
}
.photo-open:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.gallery .photo-open { overflow: hidden; }
.gallery .photo-open:hover img { transform: scale(1.04); }

/* ------------------------------------------------------------ lightbox */
body.lb-open { overflow: hidden; }

.lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 1rem; background: rgba(9, 13, 26, .93);
}
.lb-stage {
  margin: 0; display: flex; flex-direction: column; align-items: center;
  gap: .75rem; max-width: 100%; max-height: 100%;
}
.lb-stage img {
  max-width: min(92vw, 1400px); max-height: 82vh;
  width: auto; height: auto; object-fit: contain;
  border-radius: 6px; background: #12172f;
}
.lb-stage figcaption {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem .75rem;
  color: #c3cbdb; font-size: .88rem; text-align: center; max-width: 60ch;
}
.lb-count { color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums; }

.lb-nav, .lb-close {
  flex: none; background: rgba(255, 255, 255, .1); color: #fff;
  border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%;
  cursor: pointer; line-height: 1; display: grid; place-items: center;
}
.lb-nav { width: 3rem; height: 3rem; font-size: 2rem; }
.lb-close {
  position: absolute; top: 1rem; right: 1rem;
  width: 2.5rem; height: 2.5rem; font-size: 1.6rem;
}
.lb-nav:hover, .lb-close:hover { background: rgba(255, 255, 255, .22); }
.lb-nav:focus-visible, .lb-close:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}

@media (max-width: 620px) {
  /* Arrows sit over the photo's lower corners so the image keeps the width. */
  .lightbox { padding: .5rem; }
  .lb-nav { position: absolute; bottom: 1.25rem; width: 3.25rem; height: 3.25rem; }
  .lb-prev { left: 1rem; }
  .lb-next { right: 1rem; }
  .lb-stage img { max-width: 96vw; max-height: 70vh; }
}

/* ------------------------------------------------------------ specs */
.specs { margin-bottom: 2.5rem; }
.spec-list {
  list-style: none; padding: 0;
  display: grid; gap: .4rem .9rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.spec-list li { padding-left: 1.5rem; position: relative; }
.spec-list li::before {
  content: "✓"; position: absolute; left: 0;
  color: var(--gold); font-weight: 700;
}

/* ------------------------------------------------------------ booking form */
.booking {
  background: var(--card); border-radius: 14px; padding: 1.5rem;
  box-shadow: var(--shadow);
}
.booking > h2 { margin-top: 0; }

.errors {
  background: var(--bad-bg); border: 1px solid #f0c8c8; color: var(--bad);
  border-radius: var(--radius); padding: .9rem 1rem; margin-bottom: 1.25rem;
}
.errors p { margin: 0 0 .4rem; }
.errors ul { margin: 0 0 .4rem; padding-left: 1.2rem; }

.notice-warn {
  background: var(--warn-bg); border: 1px solid #e8d3a4; color: var(--warn);
  border-radius: var(--radius); padding: .9rem 1rem; margin: 1rem 0;
}

/* ------------------------------------------------------------ calendar */
.calendar {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: .9rem; margin-bottom: 1.1rem; background: #fcfcfd;
}
.cal-nav {
  display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem;
}
.cal-hint {
  flex: 1; margin: 0; text-align: center;
  font-size: .88rem; color: var(--ink); font-weight: 600;
}
.cal-arrow {
  flex: none; width: 2rem; height: 2rem; font-size: 1.2rem; line-height: 1;
  background: #fff; color: var(--ink);
  border: 1px solid #c6ccd8; border-radius: 6px; cursor: pointer;
}
.cal-arrow:hover:not(:disabled) { background: #eef0f5; }
.cal-arrow:disabled { opacity: .35; cursor: not-allowed; }

.cal-grids { display: grid; gap: 1.25rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) {
  /* One month at a time on a phone — two is unreadably cramped. */
  .cal-grids { grid-template-columns: 1fr; }
  .cal-month:nth-child(2) { display: none; }
}

.cal-month-name {
  margin: 0 0 .4rem; font-size: .92rem; font-weight: 700; text-align: center;
}
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-dow {
  text-align: center; font-size: .72rem; font-weight: 700;
  color: var(--muted); padding-bottom: .25rem;
}
.cal-blank { aspect-ratio: 1; }

.cal-day {
  aspect-ratio: 1; width: 100%; padding: 0;
  display: grid; place-items: center;
  font: inherit; font-size: .82rem; font-weight: 600;
  color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: 6px; cursor: pointer;
}
.cal-day:hover:not(:disabled) { background: #fff3e0; border-color: var(--gold); }
.cal-day:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.cal-day.is-today { box-shadow: inset 0 0 0 2px #c3cbdb; }

.cal-day.is-past {
  color: #c3c8d3; background: #fafbfc; cursor: not-allowed;
  border-color: #eef0f4;
}
/* Already booked — the whole point of showing a calendar. */
.cal-day.is-booked {
  background: var(--bad-bg); color: #b26a6a; border-color: #f0c8c8;
  cursor: not-allowed; text-decoration: line-through;
}
/* Taken as a night, but offered as YOUR return day: the next booking starts
   that morning and the trailer is handed back the same day. Only ever shown
   once a pickup day is chosen. */
.cal-day.is-booked.can-return {
  cursor: pointer; text-decoration: none;
  box-shadow: inset 0 0 0 2px var(--navy);
}
.cal-day.is-booked.can-return:hover { background: var(--gold-light); }
.cal-day.is-range { background: var(--gold-light); border-color: var(--gold); color: #2a1c06; }
.cal-day.is-start {
  background: var(--navy); border-color: var(--navy); color: #fff;
}
/* The return day isn't part of the rental — it's free for the next renter,
   so it reads as an outline rather than a filled day. */
.cal-day.is-return {
  background: #fff; border: 2px solid var(--navy); color: var(--navy);
}

.cal-legend {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem;
  list-style: none; padding: 0; margin: .9rem 0 0;
  font-size: .8rem; color: var(--muted);
}
.cal-legend li { display: flex; align-items: center; gap: .35rem; }
.sw {
  width: .85rem; height: .85rem; border-radius: 3px;
  border: 1px solid var(--line); flex: none;
}
/* Running estimate, shown under the calendar as soon as dates are valid. */
.estimate {
  background: #fff8ea; border: 1px solid #f0dcb4;
  border-radius: var(--radius); padding: .85rem 1rem; margin-bottom: 1.1rem;
}
.est-line {
  display: flex; justify-content: space-between; gap: 1rem;
  margin: 0 0 .3rem; font-size: .88rem; color: var(--body);
}
.est-line strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.est-subtotal {
  border-top: 1px solid #e8d5ab; padding-top: .35rem; margin-top: .45rem;
  font-weight: 600;
}
.estimate-total {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; margin: .6rem 0 .2rem;
  border-top: 2px solid var(--ink); padding-top: .5rem;
}
.estimate-total span { font-weight: 700; color: var(--ink); }
.estimate-total strong {
  font-size: 1.45rem; font-weight: 800; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
/* The split under the total. Empty until a quote lands, so it takes no room
   on a form nobody has picked dates on yet. */
.estimate-split {
  margin: 0; font-size: .88rem; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.estimate-split:empty { display: none; }

.sw-free { background: #fff; }
.sw-booked { background: var(--bad-bg); border-color: #f0c8c8; }
.sw-range { background: var(--gold-light); border-color: var(--gold); }
.sw-return { background: #fff; border: 2px solid var(--navy); }

.booking-form fieldset {
  border: 0; border-top: 1px solid var(--line);
  padding: 1.25rem 0 0; margin: 0 0 1.5rem;
}
.booking-form fieldset:first-of-type { border-top: 0; padding-top: 0; }
.booking-form legend {
  display: flex; align-items: center; gap: .6rem;
  font-weight: 700; color: var(--ink); font-size: 1.05rem;
  padding: 0; margin-bottom: .75rem;
}
.step-n {
  display: inline-grid; place-items: center;
  width: 1.65rem; height: 1.65rem; flex: none;
  background: var(--navy); color: #fff;
  border-radius: 50%; font-size: .85rem; font-weight: 700;
}

.booking-form label {
  display: block; margin-bottom: .9rem;
  font-weight: 600; color: var(--ink); font-size: .93rem;
}
.booking-form input[type="text"],
.booking-form input[type="email"],
.booking-form input[type="tel"],
.booking-form input[type="date"],
.booking-form input[type="file"],
.booking-form select {
  display: block; width: 100%; margin-top: .3rem;
  padding: .6rem .7rem; font: inherit; font-weight: 400; color: var(--ink);
  border: 1px solid #c6ccd8; border-radius: 8px; background: #fff;
}
.booking-form input:focus-visible,
.booking-form select:focus-visible,
.agreement-scroll:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 1px;
}
.booking-form input:disabled { background: #f0f1f5; color: #9aa0ad; }
.hint { display: block; font-weight: 400; color: var(--muted); font-size: .82rem; margin-top: .25rem; }
/* "Your document is still attached": good news, not a warning. */
.hint.kept { color: var(--ok); font-weight: 600; }

.row { display: grid; gap: 0 1rem; grid-template-columns: 1fr 1fr; }
.row-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 560px) {
  .row, .row-3, .row-4 { grid-template-columns: 1fr; }
}

label.checkbox {
  display: flex; align-items: flex-start; gap: .55rem;
  font-weight: 500; color: var(--body);
}
label.checkbox input { margin-top: .3rem; flex: none; }

.date-warning {
  background: var(--bad-bg); border: 1px solid #f0c8c8; color: var(--bad);
  border-radius: 8px; padding: .55rem .75rem; font-size: .9rem; margin: 0 0 .9rem;
}

/* ------------------------------------------------- agreement scroll gate */
.agreement-scroll {
  height: 330px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.15rem; background: #fcfcfd;
  font-size: .87rem; line-height: 1.65;
}
.agreement-title { margin-top: 0; }
.agreement-ack {
  background: #fff8ea; border-left: 3px solid var(--gold);
  padding: .6rem .8rem; border-radius: 0 6px 6px 0;
}
.clauses { padding-left: 1.3rem; }
.clauses li { margin-bottom: .9rem; }
.agreement-end { text-align: center; color: var(--muted); margin: 1.5rem 0 .5rem; }

.equipment { width: 100%; border-collapse: collapse; font-size: .86rem; }
.equipment th, .equipment td {
  text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--line);
}
.equipment td:last-child, .equipment th:last-child { text-align: right; white-space: nowrap; }
.charges, .pickup-acks { padding-left: 1.2rem; }
.charges li, .pickup-acks li { margin-bottom: .3rem; }

.scroll-status {
  font-size: .88rem; color: var(--warn); background: var(--warn-bg);
  border-radius: 8px; padding: .5rem .75rem; margin: .6rem 0 1rem;
}
.scroll-status.done { color: var(--ok); background: var(--ok-bg); }

.sign-box {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem; background: #fff;
}
.sign-box.locked { opacity: .5; }
.sig-pad { margin-bottom: .9rem; }
.sig-label {
  display: block; font-weight: 600; color: var(--ink);
  font-size: .93rem; margin-bottom: .3rem;
}
#signature-canvas {
  display: block; width: 100%; height: 180px;
  border: 1px dashed #b3bac9; border-radius: 8px;
  background: #fff; cursor: crosshair; touch-action: none;
}
.sign-box.locked #signature-canvas { cursor: not-allowed; background: #f7f8fa; }
#clear-signature { margin-top: .5rem; }

/* ------------------------------------------------------------ quote */
.quote { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.quote th, .quote td {
  padding: .45rem .2rem; border-bottom: 1px solid var(--line);
  font-weight: 400; text-align: left;
}
.quote td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.quote .quote-total th, .quote .quote-total td {
  font-weight: 800; color: var(--ink); font-size: 1.08rem;
  border-bottom: 0; border-top: 2px solid var(--ink); padding-top: .6rem;
}
/* The two rows under the total: what is being paid now, and what is left to
   pay at pickup. The balance is the one someone has to remember, so it gets
   the weight — the total above it is already the loudest thing in the table. */
.quote .quote-now th, .quote .quote-now td {
  border-bottom: 0; padding-top: .45rem; padding-bottom: .15rem;
  color: var(--body);
}
.quote .quote-later th, .quote .quote-later td {
  font-weight: 700; color: var(--ink);
  border-bottom: 0; border-top: 1px solid var(--line); padding-top: .35rem;
}

.btn-pay {
  display: block; width: 100%; margin-top: .5rem;
  padding: .9rem 1rem; font: inherit; font-weight: 700; font-size: 1.02rem;
  color: #2a1c06; background: var(--gold);
  border: 0; border-radius: 8px; cursor: pointer;
}
.btn-pay:hover:not(:disabled) { background: var(--gold-light); }
.btn-pay:disabled { background: #d8dbe3; color: #8f96a5; cursor: not-allowed; }

/* ------------------------------------------------------------ card */
/* Square renders the card fields in an iframe it owns, so everything here
   styles the box around them — the inputs themselves aren't ours to style. */
.card-box { margin: 1rem 0 .25rem; }
.card-label {
  display: block; font-weight: 600; color: var(--ink);
  font-size: .93rem; margin-bottom: .3rem;
}
#card-container { min-height: 90px; }
.card-error {
  background: var(--bad-bg); border: 1px solid #f0c8c8; color: var(--bad);
  border-radius: 8px; padding: .55rem .75rem; font-size: .9rem; margin: .6rem 0 0;
}

/* ------------------------------------------------------------ results */
.result, .legal, .record {
  background: var(--card); border-radius: 14px; padding: 1.75rem;
  box-shadow: var(--shadow); margin-top: 1.5rem;
}
.result h1 { margin-top: 0; }
.confirmation {
  background: var(--ok-bg); border: 1px solid #bfe3cd; color: var(--ok);
  border-radius: var(--radius); padding: .8rem 1rem; font-size: .95rem;
}
.confirmation strong {
  display: block; font-size: 1.5rem; letter-spacing: .06em;
  font-weight: 800; color: var(--ink);
}
.next-steps {
  background: #f7f8fb; border-radius: var(--radius);
  padding: 1rem 1.25rem; margin-top: 1.5rem;
}
.next-steps h2 { margin-top: 0; font-size: 1.05rem; }

/* ------------------------------------------------------------ record */
.record-grid {
  display: grid; grid-template-columns: minmax(140px, 200px) 1fr;
  gap: .4rem 1rem; margin: 0 0 1rem;
}
.record-grid dt { font-weight: 600; color: var(--muted); font-size: .9rem; }
.record-grid dd { margin: 0; color: var(--ink); }
.record-grid dd.ua, .record-grid dd.hash {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem; word-break: break-all; color: var(--body);
}
@media (max-width: 560px) {
  .record-grid { grid-template-columns: 1fr; }
  .record-grid dd { margin-bottom: .5rem; }
}
.signature-shot {
  margin: 1rem 0; padding: 1rem; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius);
}
.signature-shot img { max-width: 100%; display: block; }
.signed-text summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.signed-text pre {
  white-space: pre-wrap; font-size: .78rem; line-height: 1.5;
  background: #f7f8fb; padding: 1rem; border-radius: 8px;
  max-height: 420px; overflow-y: auto;
}

/* ------------------------------------------------------------ admin */
.admin { margin-top: 1.5rem; }

/* The bookings table carries twelve columns — more than the 940px reading
   width the rest of the site is built for. This one page breaks out to the
   window so Status, Record and Actions stay on screen instead of behind a
   sideways scroll. Narrow windows keep the gutter and scroll as before. */
.admin-wide {
  --wide: min(100vw - 2.5rem, 1400px);
  width: var(--wide);
  margin-left: calc(50% - var(--wide) / 2);
}
.admin-summary { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.pill {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: .3rem .8rem; font-size: .86rem; font-weight: 600;
}
.pill-paid { background: var(--ok-bg); border-color: #bfe3cd; color: var(--ok); }
.pill-pending { background: var(--warn-bg); border-color: #f0dcb4; color: var(--warn); }

.table-wrap { overflow-x: auto; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); }
.admin-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.admin-table th, .admin-table td {
  padding: .6rem .7rem; border-bottom: 1px solid var(--line);
  text-align: left; vertical-align: top;
}
.admin-table thead th { background: #eef0f5; color: var(--ink); font-weight: 700; white-space: nowrap; }
.admin-table tr.status-cancelled { opacity: .55; }
.tow-cell { min-width: 130px; }
/* Two ISO dates and an arrow — wrapping them mid-date makes a row five lines
   tall and costs more width than it saves. */
.date-cell { white-space: nowrap; }
/* Monospaced so a code read down the phone can be checked character by
   character, and so O and 0 don't have to be guessed at. */
.code-cell {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem; white-space: nowrap;
}

.badge {
  display: inline-block; border-radius: 999px; padding: .1rem .55rem;
  font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; white-space: nowrap;
}
.badge-paid { background: var(--ok-bg); color: var(--ok); }
.badge-pending { background: var(--warn-bg); color: var(--warn); }
.badge-cancelled { background: #ececf1; color: var(--slate); }
.badge-expired { background: #ececf1; color: var(--slate); }
.badge-conflict { background: var(--bad); color: #fff; }

/* A paid booking that collided with another after its hold lapsed. Loud on
   purpose — money has already moved and someone has to decide what happens. */
.conflict-banner {
  background: var(--bad-bg); border: 2px solid var(--bad);
  border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1.25rem;
}
.conflict-banner h2 { margin: 0 0 .4rem; font-size: 1.05rem; color: var(--bad); }
.conflict-banner p { margin: 0 0 .5rem; }
.conflict-banner ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.conflict-banner li { margin-bottom: .5rem; }

.actions form { margin-bottom: .4rem; }
.actions .dates-form input { width: 8.5rem; padding: .2rem .3rem; font-size: .8rem; }
.btn-sm {
  font: inherit; font-size: .8rem; font-weight: 600; padding: .3rem .6rem;
  border-radius: 6px; border: 1px solid transparent; cursor: pointer;
}
.btn-sm:disabled { opacity: .5; cursor: not-allowed; }
.btn-ok { background: var(--ok-bg); border-color: #bfe3cd; color: var(--ok); }
.btn-neutral { background: #eef0f5; border-color: var(--line); color: var(--ink); }
.btn-danger { background: var(--bad-bg); border-color: #f0c8c8; color: var(--bad); }
.refund-select { font: inherit; font-size: .8rem; padding: .2rem; }

/* ------------------------------------------------------------ legal page */
.legal .clauses li { margin-bottom: 1rem; }

/* ------------------------------------------------- admin status filter */
.status-filter {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .75rem;
  margin-bottom: 1rem;
}
.filter-label { font-weight: 700; color: var(--ink); font-size: .88rem; }
.filter-options { display: flex; flex-wrap: wrap; gap: .4rem; }

/* Each status is a toggle chip. The checkbox stays in the DOM (and reachable
   by keyboard) but the chip itself carries the visual state. */
.filter-option {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .28rem .7rem; border-radius: 999px; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); color: var(--muted);
  font-size: .82rem; font-weight: 600; text-transform: capitalize;
  user-select: none;
}
.filter-option:hover { border-color: var(--slate); }
.filter-option.is-on {
  background: var(--navy); border-color: var(--navy); color: #fff;
}
.filter-option input { margin: 0; accent-color: var(--gold); }
.filter-option:focus-within { outline: 2px solid var(--gold); outline-offset: 1px; }
/* "past" filters on dates, not status, so it gets a gap and a rule to sit
   behind — otherwise it reads as a fifth status alongside the other four. */
.filter-option-past {
  margin-left: .5rem; position: relative;
}
.filter-option-past::before {
  content: ""; position: absolute; left: -.55rem; top: 15%; bottom: 15%;
  border-left: 1px solid var(--line);
}

.filter-count {
  font-variant-numeric: tabular-nums; font-weight: 700;
  opacity: .75; font-size: .78rem;
}
/* Typed into, not scanned for: the confirmation code arrives down the phone. */
.filter-search {
  font: inherit; font-size: .82rem; padding: .3rem .7rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink); min-width: 15rem; flex: 1 1 15rem;
}
.filter-search:focus { outline: 2px solid var(--gold); outline-offset: 1px; }

.filter-reset { font-size: .82rem; font-weight: 600; }

.filter-note {
  margin: -.4rem 0 1rem; font-size: .86rem; color: var(--muted);
}
.filter-note strong { color: var(--ink); }

.empty-filtered {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.25rem; text-align: center;
  color: var(--muted); box-shadow: var(--shadow);
}
.empty-filtered a { margin-left: .4rem; font-weight: 600; }

/* ------------------------------------------------ record page: actions */
.record-bar {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem;
}
.record-actions { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; }
.record-actions .hint { margin: 0; text-align: right; }

/* Shown only on paper. */
.print-only { display: none; }

/* ------------------------------------------------------------- printing */
@media print {
  /* Flatten to ink: no dark panels, no shadows, no rounded cards. */
  body { background: #fff; color: #000; font-size: 11pt; }
  main { max-width: none; padding: 0; }

  .site-header, .site-footer, .record-bar, .flashes { display: none !important; }
  .print-only { display: block !important; }

  .record {
    box-shadow: none; border-radius: 0; padding: 0; margin: 0;
    background: #fff;
  }

  .print-head {
    border-bottom: 1pt solid #000; padding-bottom: .3rem; margin-bottom: .6rem;
    font-size: 10pt;
  }
  .print-foot {
    border-top: 1pt solid #999; margin-top: 1rem; padding-top: .3rem;
    font-size: 8pt; color: #555;
  }

  h1 { font-size: 16pt; }
  h2 { font-size: 12pt; margin-top: .9rem; }

  /* Badges are colour-coded on screen; on paper make them legible outlines. */
  .badge {
    border: 1pt solid #000 !important; background: #fff !important;
    color: #000 !important;
  }
  /* Except the double-booked warning, which must stay obvious. */
  .conflict-banner {
    border: 2pt solid #000; background: #fff; color: #000;
  }
  .conflict-banner h2 { color: #000; }

  a { color: #000; text-decoration: none; }

  /* Keep related blocks together across page breaks. */
  .record-grid, .quote, .signature-shot, .conflict-banner {
    break-inside: avoid; page-break-inside: avoid;
  }
  h2 { break-after: avoid; page-break-after: avoid; }

  .signature-shot img { max-width: 3.5in; }

  /* The agreement prints only when it's been expanded on screen. When it is,
     let it flow across pages instead of scrolling in a fixed box. */
  .signed-text summary { display: none; }
  .signed-text pre {
    max-height: none; overflow: visible; background: #fff;
    border: 1pt solid #ccc; font-size: 7.5pt; line-height: 1.35;
    white-space: pre-wrap; word-wrap: break-word;
  }

  @page { margin: 1.6cm; }
}

/* ------------------------------------------------------- blocked dates */
.admin-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.admin-top h1 { margin: 0; }

.blackout-form {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.25rem;
  margin: 1.25rem 0 2rem; box-shadow: var(--shadow);
}
.blackout-form label {
  display: block; margin-bottom: .9rem;
  font-weight: 600; color: var(--ink); font-size: .93rem;
}
.blackout-form input[type="date"],
.blackout-form input[type="text"] {
  display: block; width: 100%; margin-top: .3rem;
  padding: .55rem .7rem; font: inherit; font-weight: 400; color: var(--ink);
  border: 1px solid #c6ccd8; border-radius: 8px; background: #fff;
}
.blackout-form input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

.past-blackouts { margin-top: 1.5rem; font-size: .9rem; }
.past-blackouts summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.past-blackouts ul { margin: .6rem 0 0; padding-left: 1.2rem; color: var(--muted); }
.past-blackouts li { margin-bottom: .25rem; }

/* Year / Make / Model / Color sit on one line; they stack on a phone via the
   existing .row breakpoint. */
.row-4 { grid-template-columns: repeat(4, 1fr); }

/* Lead-time notice in the insurance step. Amber rather than muted grey — it's
   a deadline the renter has to act on, not background explanation. */
.lead-time {
  background: var(--warn-bg);
  border: 1px solid #f0dcb4;
  border-radius: var(--radius);
  padding: .6rem .8rem;
  margin: 0 0 1rem;
  font-size: .88rem;
  color: var(--warn);
  font-weight: 600;
}

/* The weights explainer. Renters reliably compare their tow rating against the
   cargo weight instead of the loaded trailer, so this gets more weight than
   the muted note beside it. */
.weights {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--navy);
  border-radius: var(--radius);
  padding: .8rem 1rem;
  margin: 1rem 0;
  font-size: .92rem;
  color: var(--body);
}
.weights strong { color: var(--ink); }

/* A live sale, on the hero. Loud enough to notice, quiet enough that the
   page doesn't look like a coupon site when nothing is running. */
.promo-banner {
  margin: .6rem 0 0;
  padding: .55rem .8rem;
  border-radius: 8px;
  background: #fff6e5;
  border: 1px solid #f0c987;
  color: #7a4b00;
  font-size: .95rem;
  line-height: 1.4;
}
.promo-banner strong { color: #5c3800; }

/* Rate history: present but folded away — it matters when reconciling an old
   booking, and never otherwise. */
.rate-history { margin: 0 0 1.5rem; }
.rate-history summary { cursor: pointer; color: #555; font-size: .95rem; }

/* /admin/help — the owner's runbook. Plain prose in the admin's own width,
   with a jump-list up top since it's the longest page in the admin area. */
.help-page h2 { margin-top: 2.2rem; scroll-margin-top: 1rem; }
.help-page ul, .help-page ol { padding-left: 1.3rem; }
.help-page li { margin: .4rem 0; }
.help-toc {
  display: flex; flex-wrap: wrap; gap: .4rem .8rem;
  margin: 1rem 0 1.5rem; padding: .8rem 1rem;
  background: #f7f8fb; border: 1px solid var(--line); border-radius: 8px;
}
.help-toc a { font-size: .92rem; white-space: nowrap; }
.help-table th { text-align: left; white-space: nowrap; }
.help-dl dt {
  font-weight: 600; margin-top: 1rem;
}
.help-dl dd { margin: .25rem 0 0; color: var(--ink); }
.help-checklist { counter-reset: none; }