/* Kan Detailings.
   ---------------------------------------------------------------------------
   One lightning bolt runs the full height of every page — two kinks, nothing
   more — and it is the only hard edge anywhere. Left of it is one colour, right
   of it another, and at every seam the two swap so the white falls like a
   checkerboard: black|WHITE, then WHITE|red, then black|WHITE again.

   The paint is two vertical gradients, one per side, pinned at each band's top
   and bottom and left to interpolate across the gaps — so every seam is a clean
   fade with no line across it. public/js/split.js computes those stops from the
   real band positions and colours each band's text for the half it sits on.

   Everything is driven by semantic tokens — --bg, --fg, --surface, --border and
   friends. split.js writes them onto each band; every component reads them and
   flips with whatever it happens to sit on. Nothing here hardcodes black or
   white except the token blocks in split.js.

   Red is the accent on both sides, in two shades: --accent is bright enough to
   read on black, --accent-solid is dark enough to carry white text. On the white
   half --accent darkens so it stays legible.
   --------------------------------------------------------------------------- */

:root {
  /* The two ends of every dark band: black at the top, deep red at the bottom. */
  --ink-0: #050506;
  --ink-red: #4a0b12;

  /* Dark is the default. Surfaces are translucent white so they sit correctly
     anywhere along the black-to-red fade rather than fighting it. */
  --bg: #050506;
  --field-bg: rgba(0, 0, 0, .34);
  --surface: rgba(255, 255, 255, .06);
  --surface-2: rgba(255, 255, 255, .11);
  --border: rgba(255, 255, 255, .22);
  --border-soft: rgba(255, 255, 255, .12);
  --fg: #f7f5f6;
  --fg-2: #d3c4c7;
  --fg-3: #a08c90;

  --accent: #ff6670;
  --accent-solid: #c1121f;
  --accent-hover: #d81e2c;
  --accent-dim: rgba(255, 102, 112, .45);
  --accent-wash: rgba(255, 102, 112, .16);
  --on-accent: #ffffff;

  --ok: #57c98a;
  --warn: #f08a24;
  --warn-wash: rgba(240, 138, 36, .16);
  --danger: #ff6b6b;

  --sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;

  --radius: 4px;
  --radius-lg: 10px;
  --page: 1180px;
  --nav-h: 68px;

  /* The strike, running the whole page: one long fall, a hard jog back, one long
     fall to the floor. The jog is 13% of the width across 2% of the height, so it
     reads as a sharp break rather than a curve. It stays inside 45%–58% so the
     content columns either side of it always clear. */
  --bolt: polygon(58% 0, 45% 45%, 58% 47%, 45% 100%, 100% 100%, 100% 0);
  /* The same shape pushed out to the margin, for pages whose content needs the
     full width — the booking steps, the portal, the crew dashboard. */
  --bolt-edge: polygon(10% 0, 5% 40%, 9% 43%, 6% 100%, 100% 100%, 100% 0);
  /* Thinner still on a phone, where every pixel of width is content. */
  --bolt-thin: polygon(6% 0, 2.5% 40%, 5.5% 43%, 3.5% 100%, 100% 100%, 100% 0);
  /* How far the underlay peeks out along the strike — this is the line's weight. */
  --rim: 4px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink-0);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1 0 auto; }

h1, h2, h3, h4 {
  color: var(--fg);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin: 0 0 .6rem;
}
h1 { font-size: clamp(2.4rem, 6vw, 4.1rem); }
/* Page headlines drop a second, quieter line: <h1>Loud<span>quiet.</span></h1> */
.band h1 > span { display: block; color: var(--fg-3); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.35rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1rem; }
/* Anything worth bolding is worth pointing at. */
strong, b { font-weight: 700; color: var(--accent); }
.btn strong, .btn b, .nav strong, .bubble.mine strong { color: inherit; }
a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }

.wrap { width: min(100% - 2.5rem, var(--page)); margin-inline: auto; }

/* ------------------------------------------------------------------ bands -- */

/* ------------------------------------------------------------ the split -- */

/* <main class="split-page"> carries the left-hand colour as its own background;
   ::before paints the right-hand colour clipped to the bolt; ::after is the same
   shape nudged left so a red rim traces the strike. */
.split-page {
  position: relative;
  background: var(--ink-0);
  isolation: isolate;
}
.split-page > * { position: relative; z-index: 2; }

.split-page[data-painted]::after,
.split-page[data-painted]::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.split-page[data-painted]::after {
  /* Alternates red / black per band, always against what it is lying on. */
  background: linear-gradient(180deg, var(--stops-rim));
  clip-path: var(--bolt);
  transform: translateX(calc(var(--rim) * -1));
  z-index: 0;
}
.split-page[data-painted]::before {
  background: linear-gradient(180deg, var(--stops-right));
  clip-path: var(--bolt);
  z-index: 1;
}
/* Pages that need the full width keep the strike out at the margin. */
.split-page.edge[data-painted]::before,
.split-page.edge[data-painted]::after { clip-path: var(--bolt-edge); }

.band {
  color: var(--fg);
  padding: clamp(3.2rem, 7vw, 5.5rem) 0;
  position: relative;
}
.band.tight { padding: clamp(2rem, 4vw, 3rem) 0; }

/* The seam. Nothing is drawn here — it is empty height that lets the two
   gradients cross-fade from one band's colours into the next one's. */
.gap { height: clamp(80px, 9vw, 130px); }

/* Content sits in the half its band claims, clear of the strike. */
.split-page .band > .wrap { width: min(100% - 2.5rem, var(--page)); margin-inline: auto; }
@media (min-width: 901px) {
  .split-page:not(.edge) .band[data-side="left"] > .wrap,
  .split-page:not(.edge) .band[data-side="right"] > .wrap {
    width: min(38vw, 470px);
  }
  .split-page:not(.edge) .band[data-side="left"] > .wrap {
    margin-left: max(1.5rem, calc((100vw - var(--page)) / 2));
    margin-right: 0;
  }
  .split-page:not(.edge) .band[data-side="right"] > .wrap {
    margin-right: max(1.5rem, calc((100vw - var(--page)) / 2));
    margin-left: auto;
  }
  /* On the edge layout the strike is a margin ribbon, so keep clear of it. */
  .split-page.edge .band > .wrap { padding-left: max(2rem, 3.5vw); }
}

/* One column on a phone, so a strike down the middle would land on the words.
   It moves out to the margin and content keeps the rest. */
@media (max-width: 900px) {
  .split-page[data-painted]::before,
  .split-page[data-painted]::after { clip-path: var(--bolt-thin); }
  /* The hero lays out with .hero-grid rather than .wrap, so it needs the same
     clearance or the strike lands on the headline. */
  .split-page .band > .wrap,
  .split-page .band > .two-grid { padding-left: 9vw; }
  :root { --rim: 3px; }
}

.eyebrow {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 .9rem;
  display: block;
}
.lede { font-size: 1.12rem; color: var(--fg-2); max-width: 62ch; }
.muted { color: var(--fg-3); }
.small { font-size: .87rem; }
.mono { font-family: var(--mono); }
.center { text-align: center; }
.stack > * + * { margin-top: 1rem; }

/* -------------------------------------------------------------------- nav -- */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: #050506;
  border-bottom: 1px solid #23232b;
  color: #f5f5f8;
}
.nav-inner {
  width: min(100% - 2.5rem, var(--page));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.brand { display: flex; align-items: center; gap: .7rem; margin-right: auto; text-decoration: none; }
.brand img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 1px solid #33333d; }
.brand-name { color: #fff; font-weight: 600; font-size: 1.02rem; white-space: nowrap; }
.brand-sub {
  display: block;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #ff6670;
}
.nav-links { display: flex; align-items: center; gap: .35rem; }
.nav-links a {
  padding: .45rem .8rem;
  border-radius: var(--radius);
  font-size: .93rem;
  color: #b9b9c6;
  border: 1px solid transparent;
  text-decoration: none;
}
.nav-links a:hover { color: #fff; background: #17171d; }
.nav-links a.active { color: #fff; border-color: rgba(255,102,112,.45); background: rgba(255,102,112,.16); }
.nav-links a.cta { background: #c1121f; color: #fff; font-weight: 600; border-color: #c1121f; }
.nav-links a.cta:hover { background: #d81e2c; border-color: #d81e2c; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid #33333d;
  color: #fff;
  border-radius: var(--radius);
  padding: .4rem .6rem;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}
@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute;
    top: var(--nav-h);
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #0d0d10;
    border-bottom: 1px solid #23232b;
    padding: .5rem;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: .75rem .9rem; }
}

/* ------------------------------------------------------------- two-up band -- */

/* Every band on the marketing pages runs content down both sides of the strike:
   the pitch in one half, the substance in the other. */
.two-grid {
  width: min(100% - 2.5rem, var(--page));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
/* A half sets its own tokens, so it has to set its own text colour too. */
.two-grid > [data-half] { color: var(--fg); min-width: 0; }
.two-grid > [data-half="left"] { padding-right: clamp(1rem, 4vw, 3rem); }
.two-grid > [data-half="right"] { padding-left: clamp(1.5rem, 7vw, 6rem); }
.two-grid.middle { align-items: center; }

.hero-band { padding: clamp(3.5rem, 9vw, 7rem) 0; }
.hero-band .two-grid { min-height: clamp(360px, 52vh, 520px); align-items: center; }
/* Narrower than the usual 62ch so nothing runs under the strike. */
.hero-band .lede { max-width: 34ch; }

@media (max-width: 900px) {
  .two-grid { grid-template-columns: 1fr; gap: 2.6rem; }
  .hero-band .two-grid { min-height: 0; gap: 3rem; }
  .two-grid > [data-half="left"] { padding-right: 0; }
  .two-grid > [data-half="right"] { padding-left: 0; }
}

.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }

/* ----------------------------------------------------------------- basics -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .78rem 1.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--accent-solid);
  background: var(--accent-solid);
  color: var(--on-accent);
  font: inherit;
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  text-decoration: none;
  transition: transform .12s ease, background .16s ease;
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .32; cursor: not-allowed; transform: none; }
.btn.ghost { background: transparent; color: var(--fg); border-color: var(--border); }
.btn.ghost:hover { background: var(--accent-wash); border-color: var(--accent-solid); color: var(--fg); }
.btn.small { padding: .45rem .85rem; font-size: .84rem; }
.btn.block { width: 100%; }

.panel {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 1.6rem;
}

.grid { display: grid; gap: 1.1rem; }
.grid.two   { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid.four  { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px;
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: 2.2rem;
}
.stat { background: var(--surface); padding: 1.15rem 1.2rem; border-top: 2px solid var(--accent-solid); }
.stat b { display: block; color: var(--fg); font-size: 1.55rem; letter-spacing: -.03em; line-height: 1.1; }
.stat span { font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); }

.card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  transition: border-color .18s ease, transform .18s ease;
}
.card:hover { border-color: var(--accent-solid); transform: translateY(-2px); }
.card h3 { margin-bottom: .35rem; }
.card p { color: var(--fg-2); font-size: .95rem; margin-bottom: 0; }
.card .num {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .18em;
  color: var(--accent);
  display: block;
  margin-bottom: .8rem;
}

.price-card { display: flex; flex-direction: column; }
.price-card .price { font-size: 2rem; color: var(--fg); letter-spacing: -.03em; }
.price-card .price small { font-size: .8rem; color: var(--fg-3); font-weight: 400; }
.price-card ul { list-style: none; padding: 0; margin: 1rem 0 1.4rem; }
.price-card li { color: var(--fg-2); font-size: .9rem; padding-left: 1.3rem; position: relative; margin-bottom: .4rem; }
.price-card li::before { content: "◦"; position: absolute; left: .25rem; color: var(--accent); }
.price-card.featured { border-color: var(--accent-solid); }
.price-card .flag {
  align-self: flex-start;
  background: var(--accent-solid);
  color: var(--on-accent);
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .18rem .55rem;
  border-radius: 100px;
  margin-bottom: .8rem;
}

/* ---------------------------------------------------------------- socials -- */

.social-list { display: grid; gap: .5rem; margin-top: 1.2rem; }
.social {
  display: flex;
  align-items: center;
  gap: .8rem;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: .7rem .9rem;
  text-decoration: none;
  color: var(--fg);
  transition: border-color .16s ease, transform .16s ease;
}
.social:hover { border-color: var(--accent-solid); transform: translateX(2px); color: var(--fg); }
.social-mark {
  width: 30px; height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-solid);
  color: var(--on-accent);
  font-size: .9rem;
  line-height: 1;
}
.social-name { font-weight: 600; font-size: .95rem; }
.social-handle { margin-left: auto; font-family: var(--mono); font-size: .8rem; color: var(--fg-3); }

/* -------------------------------------------------------------- employees -- */

.employee-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.employee {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .18s ease, transform .18s ease;
}
.employee:hover { border-color: var(--accent-solid); transform: translateY(-2px); }
.employee-photo {
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle at 50% 40%, var(--accent-wash), transparent 65%), var(--surface-2);
  border-bottom: 1px solid var(--border-soft);
  display: grid;
  place-items: center;
  position: relative;
}
.employee-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.employee-photo span {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fg-3);
  border: 1px dashed var(--border);
  border-radius: 100px;
  padding: .2rem .8rem;
}
.employee h3 { margin: 1rem 1.1rem .1rem; }
.employee .role {
  margin: 0 1.1rem .6rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.employee .bio { margin: 0 1.1rem 1.2rem; font-size: .88rem; color: var(--fg-2); }

/* ------------------------------------------------------------------ forms -- */

label:not(.opt):not(.addon):not(.pick):not(.choice):not(.check), .label {
  display: block;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: .4rem;
}

input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
input[type="password"], select, textarea {
  width: 100%;
  background: var(--field-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--fg);
  font: inherit;
  font-size: .95rem;
  padding: .7rem .85rem;
  transition: border-color .16s ease, box-shadow .16s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent-solid);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
input::placeholder, textarea::placeholder { color: var(--fg-3); }
textarea { resize: vertical; min-height: 110px; }

input.invalid, textarea.invalid { border-color: var(--danger); }
input.valid { border-color: var(--ok); }

.field { margin-bottom: 1.1rem; }
.field-row { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.hint { font-size: .8rem; color: var(--fg-3); margin-top: .35rem; }
.field-error { font-size: .82rem; color: var(--danger); margin-top: .35rem; }
.field-ok { font-size: .82rem; color: var(--ok); margin-top: .35rem; }

.notice {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-solid);
  background: var(--surface);
  border-radius: var(--radius);
  padding: .85rem 1rem;
  font-size: .9rem;
  color: var(--fg);
}
.notice.error { border-left-color: var(--danger); }
.notice.ok { border-left-color: var(--ok); }
.notice.warn { border-left-color: var(--warn); }

/* Radio cards and checkbox rows. */
.choice, .check {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: .85rem .95rem;
  cursor: pointer;
}
.choice:hover, .check:hover { border-color: var(--accent-dim); }
.choice.selected { border-color: var(--accent-solid); background: var(--accent-wash); }
.check.checked { border-color: var(--accent-solid); }
.choice input, .check input { width: auto; margin: .3rem 0 0; accent-color: var(--accent-solid); flex: none; }
.choice .name, .check .name { color: var(--fg); font-size: .95rem; font-weight: 500; }
.choice .note, .check .note { font-size: .82rem; color: var(--fg-3); }

/* ------------------------------------------------------------ step header -- */

.steps { display: flex; flex-wrap: wrap; gap: .4rem; font-family: var(--mono); font-size: .7rem;
         letter-spacing: .14em; text-transform: uppercase; }
.steps .step {
  border: 1px solid var(--border-soft);
  border-radius: 100px;
  padding: .3rem .85rem;
  color: var(--fg-3);
  white-space: nowrap;
  text-decoration: none;
}
.steps .step.done { color: var(--fg); border-color: var(--accent-dim); }
.steps .step.current { color: var(--on-accent); background: var(--accent-solid); border-color: var(--accent-solid); }

.step-nav {
  display: flex;
  gap: .8rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-soft);
}
.step-nav .spacer { margin-left: auto; }

/* ----------------------------------------------------------- car finder ---- */

.finder-bar { display: grid; gap: .9rem; grid-template-columns: 1.4fr 1fr 1fr 1fr; }
@media (max-width: 900px) { .finder-bar { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .finder-bar { grid-template-columns: 1fr; } }

.result-list { display: grid; gap: .4rem; max-height: 460px; overflow-y: auto; padding-right: .3rem; }
.result {
  display: flex;
  align-items: center;
  gap: .8rem;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: .7rem .9rem;
  color: var(--fg);
  font: inherit;
  cursor: pointer;
}
.result:hover { border-color: var(--accent-dim); }
.result.selected { border-color: var(--accent-solid); background: var(--accent-wash); }
.result .model { font-weight: 600; }
.result .meta { margin-left: auto; font-family: var(--mono); font-size: .74rem; color: var(--fg-3); text-align: right; }

.picked-car {
  border: 1px solid var(--accent-solid);
  background: var(--accent-wash);
  border-radius: var(--radius-lg);
  padding: 1rem 1.2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* -------------------------------------------------------------- calendar --- */

.cal-layout { display: grid; grid-template-columns: 320px 1fr; gap: 1.4rem; align-items: start; }
@media (max-width: 900px) { .cal-layout { grid-template-columns: 1fr; } }

.month-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; }
.month-head .name { font-weight: 600; color: var(--fg); margin-right: auto; }
.month-nav {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--fg);
  width: 30px; height: 30px;
  border-radius: var(--radius);
  cursor: pointer;
  font: inherit;
  line-height: 1;
}
.month-nav:disabled { opacity: .3; cursor: not-allowed; }
.month-nav:hover:not(:disabled) { border-color: var(--accent-solid); }

.month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.month-grid .dow {
  text-align: center;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding-bottom: .3rem;
}
.month-day {
  aspect-ratio: 1;
  border: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--fg-2);
  border-radius: var(--radius);
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
  position: relative;
  display: grid;
  place-items: center;
}
.month-day.blank { border: 0; background: none; cursor: default; }
.month-day:disabled { opacity: .28; cursor: not-allowed; }
.month-day:hover:not(:disabled) { border-color: var(--accent-dim); color: var(--fg); }
.month-day.today { font-weight: 700; }
.month-day.active { background: var(--accent-solid); border-color: var(--accent-solid); color: var(--on-accent); font-weight: 600; }
.month-day .dot {
  position: absolute;
  bottom: 5px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
}
.month-day.active .dot { background: var(--on-accent); }

.day-panel { border: 1px solid var(--border-soft); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.day-panel-head {
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
}
.day-panel-head .title { font-weight: 600; color: var(--fg); }

.day-grid {
  position: relative;
  display: grid;
  grid-template-columns: 62px 1fr;
  max-height: 560px;
  overflow-y: auto;
  /* Breathing room so the stretch nubs are not clipped at the first/last hour. */
  padding: 14px 0;
}
.day-times, .day-slots { display: grid; }
.day-time {
  height: 54px;
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--fg-3);
  text-align: right;
  padding: .2rem .6rem 0 0;
  border-top: 1px solid var(--border-soft);
}
.day-slots { position: relative; }
.hour {
  height: 54px;
  /* Reset first: a <button> keeps its default border on any side we do not set. */
  border: 0;
  border-top: 1px solid var(--border-soft);
  border-left: 1px solid var(--border-soft);
  background: none;
  cursor: pointer;
  padding: 0;
  font: inherit;
}
.hour:hover:not(:disabled) { background: var(--accent-wash); }
.hour:disabled { cursor: not-allowed; background: repeating-linear-gradient(
    -45deg, transparent, transparent 5px, var(--border-soft) 5px, var(--border-soft) 6px); }

/* A drawn window. The whole shape is the negotiable span; the core sits inside it.
   Named `wblock`, not `block` — `.btn.block` is the full-width button utility and
   a bare `.block` here would repaint every wide button on the site. */
.wblock {
  position: absolute;
  left: 6px;
  right: 6px;
  border-radius: 6px;
  background: var(--warn);
  border: 1px solid var(--warn);
  overflow: visible;
  z-index: 2;
}
.wblock .core {
  position: absolute;
  left: 0; right: 0;
  background: var(--accent-solid);
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: .3rem .6rem;
  color: #fff;
}
.wblock .core .rank {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .85;
}
.wblock .core .time { font-size: .82rem; font-weight: 600; line-height: 1.25; }
.wblock .core:hover { background: var(--accent-hover); }
.wblock .edge {
  position: absolute;
  left: 0; right: 0;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
}
.wblock .edge.top { top: -11px; }
.wblock .edge.bottom { bottom: -11px; }
.wblock .nub {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid #fff;
  background: var(--warn);
  color: #fff;
  font: 600 13px/1 var(--sans);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  z-index: 3;
}
.wblock .nub:hover:not(:disabled) { background: #fff; color: var(--warn); }
.wblock .nub:disabled { opacity: .35; cursor: not-allowed; }

.legend { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .82rem; color: var(--fg-2); align-items: center; }
.legend .swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: -2px; margin-right: .4rem; }
.legend .swatch.core { background: var(--accent-solid); }
.legend .swatch.flex { background: var(--warn); }
.legend .swatch.busy {
  background: repeating-linear-gradient(-45deg, var(--surface-2), var(--surface-2) 3px, var(--border) 3px, var(--border) 4px);
}

.help-btn {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg-2);
  font: 600 13px/1 var(--sans);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  padding: 0;
}
.help-btn:hover { border-color: var(--accent-solid); color: var(--accent); }

dialog.help {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--fg);
  max-width: 520px;
  padding: 1.6rem;
}
dialog.help::backdrop { background: rgba(0,0,0,.62); }
dialog.help h3 { margin-top: 0; }
dialog.help p { color: var(--fg-2); font-size: .92rem; }

.picked-list { display: grid; gap: .4rem; }
.picked-row {
  display: flex;
  align-items: center;
  gap: .7rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: .5rem .7rem;
  font-size: .88rem;
  background: var(--surface);
}
.picked-row .rank {
  font-family: var(--mono);
  font-size: .7rem;
  background: var(--accent-solid);
  color: var(--on-accent);
  border-radius: 100px;
  padding: .1rem .5rem;
  flex: none;
}
.picked-row.empty { color: var(--fg-3); border-style: dashed; background: none; }
.linkish-x {
  flex: none;
  width: 24px; height: 24px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: none;
  color: var(--fg-3);
  cursor: pointer;
  font: 600 12px/1 var(--sans);
  padding: 0;
}
.linkish-x:hover { border-color: var(--accent-solid); color: var(--accent); }
.picked-row .flex-note { color: var(--warn); font-size: .78rem; }

/* --------------------------------------------------------------- summary --- */

.summary-line { display: flex; justify-content: space-between; gap: 1rem; font-size: .92rem; padding: .3rem 0; }
.summary-line.total {
  border-top: 1px solid var(--accent-dim);
  margin-top: .5rem;
  padding-top: .7rem;
  color: var(--accent);
  font-size: 1.1rem;
  font-weight: 600;
}
.sticky-side { position: sticky; top: calc(var(--nav-h) + 1.5rem); }

/* ------------------------------------------------------------------ chat --- */

.chat {
  display: flex;
  flex-direction: column;
  height: min(58vh, 520px);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--field-bg);
}
.chat-log { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .7rem; }
.bubble {
  max-width: 78%;
  border-radius: 12px;
  padding: .6rem .85rem;
  font-size: .92rem;
  border: 1px solid var(--border-soft);
  background: var(--surface);
  white-space: pre-wrap;
  word-break: break-word;
}
.bubble .who {
  display: block;
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: .25rem;
}
.bubble.mine { align-self: flex-end; background: var(--accent-solid); color: #fff; border-color: var(--accent-solid); }
.bubble.mine .who { color: rgba(255,255,255,.72); }
.bubble.system {
  align-self: center;
  max-width: 90%;
  text-align: center;
  background: transparent;
  border-style: dashed;
  color: var(--fg-3);
  font-size: .82rem;
}
.chat-form { display: flex; gap: .5rem; padding: .7rem; border-top: 1px solid var(--border-soft); background: var(--surface); }
.chat-form textarea { min-height: 44px; max-height: 120px; padding: .6rem .75rem; }

.badge {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: .12rem .55rem;
  color: var(--fg-2);
}
.badge.confirmed, .badge.in_progress { border-color: var(--accent-solid); color: var(--accent); }
.badge.completed { border-color: var(--ok); color: var(--ok); }
.badge.cancelled { border-color: var(--danger); color: var(--danger); }

/* ----------------------------------------------------------------- staff --- */

.staff-layout { display: grid; grid-template-columns: 340px 1fr; gap: 1.1rem; align-items: start; }
@media (max-width: 900px) { .staff-layout { grid-template-columns: 1fr; } }
.booking-list { display: grid; gap: .5rem; max-height: 70vh; overflow-y: auto; }
.booking-item {
  text-align: left;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: .7rem .85rem;
  color: var(--fg-2);
  font: inherit;
  cursor: pointer;
}
.booking-item:hover { border-color: var(--accent-dim); }
.booking-item.active { border-color: var(--accent-solid); background: var(--accent-wash); }
.booking-item .ref { font-family: var(--mono); font-size: .78rem; color: var(--fg-3); }
.booking-item .who { color: var(--fg); font-weight: 600; }

.slot-pick {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: .55rem .7rem;
  cursor: pointer;
  font: inherit;
  font-size: .88rem;
  color: var(--fg);
  text-align: left;
  width: 100%;
}
.slot-pick:hover:not(:disabled) { border-color: var(--accent-dim); }
.slot-pick.picked { border-color: var(--accent-solid); background: var(--accent-wash); }
.slot-pick .rank {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent-solid);
  color: var(--on-accent);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: .7rem;
  flex: none;
}
.slot-pick .left { margin-left: auto; font-family: var(--mono); font-size: .7rem; color: var(--fg-3); }

/* ---------------------------------------------------------------- footer --- */

.footer {
  background: var(--ink-0);
  color: #a08c90;
  border-top: 2px solid #c1121f;
  padding: 3rem 0 2rem;
  font-size: .9rem;
}
.footer-grid { display: grid; gap: 2rem; grid-template-columns: 1.4fr repeat(3, 1fr); }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer h4 {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #d3c4c7;
  margin-bottom: .7rem;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.footer a { color: #a08c90; text-decoration: none; }
.footer a:hover { color: #ff6670; }
.footer-bottom {
  margin-top: 2.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid #23232b;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-size: .82rem;
}

/* ------------------------------------------------------------------ tags --- */

[data-tag] { position: relative; }
body.show-tags [data-tag]::after {
  content: attr(data-tag);
  position: absolute;
  top: -.55rem;
  left: 0;
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .08em;
  background: var(--accent-solid);
  color: #fff;
  padding: 0 .3rem;
  border-radius: 2px;
  z-index: 40;
  pointer-events: none;
  white-space: nowrap;
}
body.show-tags [data-tag] { outline: 1px dashed var(--accent-dim); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}