/* ============================================================================
   Dive District — design system foundation
   "The Deep": editorial dive-travel. Deep ocean + coral. Fraunces + Hanken.
   See .design/DESIGN_SYSTEM.md. Class names preserved from the MVP markup.
   ========================================================================== */

:root {
  /* abyss / ink */
  --abyss:#04222F; --deep:#073447; --ink:#0B2A38; --ink-soft:#3A5867; --muted:#6E8794;
  /* ocean */
  --ocean:#0E7C9B; --ocean-bright:#13A0C4; --aqua:#46D6C0;
  /* coral accent */
  --coral:#FF6A3D; --coral-deep:#E8552A; --sand:#F4B860;
  /* surfaces */
  --bg:#F2F6F5; --surface:#FFFFFF; --surface-2:#E9F1F1; --line:#DCE7E7;
  /* status */
  --ok:#1FA37A; --ok-bg:#DFF3EC; --warn:#E08A1E; --warn-bg:#FBEFD8;
  --danger:#D24A45; --danger-bg:#F8E0DF; --info:#0E7C9B; --info-bg:#DDEFF4;
  /* elevation — layered, teal-tinted */
  --e1:0 1px 2px rgba(7,52,71,.06), 0 2px 6px rgba(7,52,71,.06);
  --e2:0 4px 10px rgba(7,52,71,.08), 0 12px 28px rgba(7,52,71,.10);
  --e3:0 10px 24px rgba(7,52,71,.12), 0 30px 60px rgba(7,52,71,.14);
  /* radii */
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-pill:999px;
  /* fonts */
  --display:"Fraunces", Georgia, "Times New Roman", serif;
  --body:"Hanken Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  /* abyss gradient + contour */
  --abyss-grad:radial-gradient(125% 125% at 18% -10%, #13A0C4 0%, #0E7C9B 28%, #073447 62%, #04222F 100%);
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.55;
  font-feature-settings:"ss01";
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3 { font-family:var(--display); font-weight:500; line-height:1.12;
  letter-spacing:-0.02em; color:var(--ink); margin:0 0 .4em; font-optical-sizing:auto; }
h1 { font-size:clamp(2rem,5vw,3rem); }
h2 { font-size:clamp(1.5rem,3vw,2rem); }
h3 { font-size:1.375rem; }
p { margin:0 0 1rem; }
a { color:var(--ocean); text-decoration:none; }
a:hover { color:var(--coral-deep); }
a:focus-visible { outline:2px solid var(--ocean); outline-offset:2px; border-radius:4px; }
.staff-nav a:focus-visible, .auth-media a:focus-visible { outline-color:var(--aqua); }
small,.small { font-size:.85rem; }

.container { max-width:1040px; margin:0 auto; padding:0 22px; }
.narrow { max-width:660px; } .wide { max-width:1240px; }
.muted { color:var(--muted); } .right { text-align:right; } .center { text-align:center; }

/* ---- decorative utilities ---- */
.contour { position:relative; }
.contour::before {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.10;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='400'><g fill='none' stroke='white' stroke-width='1.2'><path d='M-50 80 Q150 20 350 90 T760 80'/><path d='M-50 130 Q150 70 350 140 T760 130'/><path d='M-50 180 Q150 120 350 190 T760 180'/><path d='M-50 230 Q150 170 350 240 T760 230'/><path d='M-50 280 Q150 220 350 290 T760 280'/><path d='M-50 330 Q150 270 350 340 T760 330'/></g></svg>");
  background-size:680px auto;
}
.grain::after {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
}

/* ============================ Header / hero ============================== */
.site-header { background:var(--abyss); color:#fff; padding:14px 0; }
.site-header .container { display:flex; align-items:center; gap:14px; }
.brand { display:inline-flex; align-items:center; gap:11px; text-decoration:none; color:#fff; }
.brand:hover { color:#fff; }
.logo-mark { width:34px; height:34px; display:block; flex-shrink:0; }
.wordmark { font-family:var(--display); font-weight:500; font-size:1.3rem; letter-spacing:-0.01em; color:#fff; }
.site-header img.logo { height:36px; width:auto; border-radius:8px; display:block; }
.staff-brand { display:inline-flex; align-items:center; gap:9px; text-decoration:none; }
.staff-nav .logo-mark { width:26px; height:26px; }

.hero { background:linear-gradient(115deg, rgba(4,34,47,.94) 0%, rgba(7,52,71,.80) 42%, rgba(14,124,155,.42) 100%), url("../img/hero-underwater.jpg");
  background-size:cover; background-position:center; color:#fff; padding:64px 0 84px; position:relative; overflow:hidden; }
.hero .container { position:relative; z-index:2; }
.hero h1 { color:#fff; font-weight:400; font-size:clamp(2.4rem,6vw,4rem);
  max-width:14ch; margin-bottom:.3em; }
.hero h1 em { font-style:italic; color:var(--aqua); }
.hero p { opacity:.9; font-size:1.15rem; max-width:48ch; }
.hero-eyebrow { text-transform:uppercase; letter-spacing:.2em; font-size:.76rem;
  font-weight:700; color:var(--aqua); margin:0 0 14px; }
.section-title { margin:30px 0 4px; }

/* refined layered wave divider */
.wave { position:relative; margin-top:-1px; line-height:0; color:var(--bg); }
.wave svg { display:block; width:100%; height:48px; }

/* ============================ Cards & grid =============================== */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--e1); padding:24px; margin:20px 0; }
.grid { display:grid; gap:18px; }
.grid.cols-2 { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.grid.cols-3 { grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }

/* ---- activity card with generated dive-tile (no gray placeholders) ---- */
.activity { padding:0; overflow:hidden; display:flex; flex-direction:column;
  transition:transform .22s ease, box-shadow .22s ease; }
.activity:hover { transform:translateY(-4px); box-shadow:var(--e2); }
.activity .tile { position:relative; aspect-ratio:4/3; overflow:hidden;
  background:var(--abyss-grad); display:flex; align-items:flex-end; }
.activity .tile.t-fun_dive { background:linear-gradient(to top, rgba(4,34,47,.74), rgba(4,34,47,.10) 55%, rgba(4,34,47,.34)), url("../img/tile-fun_dive.jpg"); }
.activity .tile.t-course   { background:linear-gradient(to top, rgba(4,34,47,.74), rgba(4,34,47,.10) 55%, rgba(4,34,47,.34)), url("../img/tile-course.jpg"); }
.activity .tile.t-other    { background:linear-gradient(to top, rgba(4,34,47,.74), rgba(4,34,47,.10) 55%, rgba(4,34,47,.34)), url("../img/tile-other.jpg"); }
.activity .tile.t-snorkel  { background:linear-gradient(150deg,#46D6C0,#0E7C9B); }
.activity .tile[class*="t-"] { background-size:cover; background-position:center; }
.activity .tile img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .4s ease; }
.activity:hover .tile img { transform:scale(1.05); }
.activity .tile .overline { position:absolute; top:14px; left:14px; z-index:2;
  font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:#fff; opacity:.92; }
.activity .tile .price-chip { position:absolute; bottom:14px; left:14px; z-index:2;
  background:rgba(255,255,255,.92); color:var(--ink); font-weight:700;
  padding:6px 12px; border-radius:var(--r-pill); font-size:.95rem; backdrop-filter:blur(4px); }
.activity .body { padding:18px 18px 20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.activity .body h3 { margin:0; }
.activity .desc { color:var(--ink-soft); font-size:.92rem; min-height:2.6em; margin:0; }
.activity .meta { display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 4px; }
.activity .body .btn { margin-top:auto; }

/* staggered reveal on load */
@keyframes rise { from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;} }
.reveal { opacity:0; animation:rise .6s ease forwards; }

.tag, .pill { display:inline-flex; align-items:center; gap:5px; font-size:.72rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; padding:4px 10px; border-radius:var(--r-pill);
  background:var(--info-bg); color:var(--ocean); }

/* ============================ Buttons ==================================== */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  border:0; border-radius:var(--r-pill); padding:13px 24px; min-height:48px;
  font-family:var(--body); font-weight:600; font-size:1rem; text-decoration:none;
  color:#fff; background:linear-gradient(180deg,#FF7E54,var(--coral)); box-shadow:var(--e1);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease; }
.btn:hover { transform:translateY(-1px); box-shadow:var(--e2); filter:brightness(1.03); color:#fff; }
.btn:active { transform:translateY(0); }
.btn:focus-visible { outline:3px solid rgba(14,124,155,.5); outline-offset:2px; }
.btn.block { display:flex; width:100%; }
.btn.ghost { background:transparent; color:var(--ocean); border:1.5px solid var(--ocean); box-shadow:none; }
.btn.ghost:hover { background:var(--info-bg); color:var(--ocean); }
.btn.ok { background:linear-gradient(180deg,#27B98C,var(--ok)); }
.btn.danger { background:linear-gradient(180deg,#E05E59,var(--danger)); }
.btn.sand { background:linear-gradient(180deg,#F8C877,var(--sand)); color:var(--ink); }
.btn.sm { padding:8px 15px; min-height:38px; font-size:.85rem; }

/* ============================ Forms ===================================== */
label { font-weight:600; font-size:.88rem; display:block; margin-bottom:5px; color:var(--ink); }
input[type=text],input[type=email],input[type=date],input[type=number],
input[type=tel],input[type=password],select,textarea {
  width:100%; padding:12px 13px; border:1.5px solid var(--line); border-radius:var(--r-sm);
  font-family:var(--body); font-size:1rem; background:var(--surface); color:var(--ink);
  transition:border-color .15s, box-shadow .15s; }
input:focus,select:focus,textarea:focus { outline:0; border-color:var(--ocean);
  box-shadow:0 0 0 3px rgba(14,124,155,.16); }
.field { margin-bottom:16px; }
.row { display:grid; gap:16px; grid-template-columns:1fr 1fr; }
.row.three { grid-template-columns:1fr 1fr 1fr; }
@media (max-width:560px){ .row,.row.three { grid-template-columns:1fr; } }
.help { font-size:.82rem; color:var(--muted); margin-top:4px; }
.errorlist { color:var(--danger); font-size:.85rem; margin:5px 0 0; padding-left:18px; }

/* ============================ Stepper =================================== */
.steps { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 22px; padding:0; list-style:none; }
.steps li { font-size:.8rem; color:var(--muted); padding:6px 13px; border-radius:var(--r-pill);
  background:var(--surface-2); font-weight:600; }
.steps li.active { background:var(--ocean); color:#fff; }

/* ---- filling numbered stepper ---- */
.wizard-steps { display:flex; margin:6px 0 30px; padding:0; list-style:none; }
.wizard-steps li { flex:1; position:relative; text-align:center; font-size:.78rem;
  color:var(--muted); font-weight:600; }
.wizard-steps li::before { content:""; position:absolute; top:16px; left:-50%; width:100%;
  height:2px; background:var(--line); z-index:1; }
.wizard-steps li:first-child::before { display:none; }
.wizard-steps li.done::before, .wizard-steps li.active::before { background:var(--ocean); }
.wizard-steps .dot { position:relative; z-index:2; width:34px; height:34px; border-radius:50%;
  background:var(--surface); border:2px solid var(--line); color:var(--muted);
  display:flex; align-items:center; justify-content:center; font-weight:700; margin:0 auto 9px;
  transition:all .2s; }
.wizard-steps li.done .dot { background:var(--ocean); border-color:var(--ocean); color:#fff; }
.wizard-steps li.active { color:var(--ink); }
.wizard-steps li.active .dot { background:var(--coral); border-color:var(--coral); color:#fff;
  box-shadow:0 0 0 4px rgba(255,106,61,.18); }
@media (max-width:420px){ .wizard-steps .lbl { font-size:.68rem; } }

/* ---- wizard action button (sits at end of form; full-width on mobile) ---- */
.wizard-actions { margin-top:16px; }
@media (max-width:640px){ .wizard-actions .btn { box-shadow:var(--e2); } }

/* ============================ Medical =================================== */
.medical-warning { background:var(--danger-bg); border:1px solid rgba(210,74,69,.35);
  border-left:4px solid var(--coral); border-radius:var(--r-sm); padding:14px 16px;
  color:var(--coral-deep); font-weight:600; margin-bottom:16px; }
.med-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.med-count { font-size:.8rem; font-weight:700; color:var(--muted); background:var(--surface-2);
  padding:6px 13px; border-radius:var(--r-pill); }
.med-count.done { background:var(--ok-bg); color:var(--ok); }
.med-count.flagged { background:var(--danger-bg); color:var(--coral-deep); }
.q { border-bottom:1px solid var(--line); padding:15px 0; display:flex; gap:18px;
  align-items:center; justify-content:space-between; }
.q:last-of-type { border-bottom:0; }
/* segmented Yes/No toggle */
.q .yn { display:inline-flex; flex-shrink:0; border:1.5px solid var(--line);
  border-radius:var(--r-pill); overflow:hidden; background:var(--surface); }
.q .yn label { display:inline-flex; align-items:center; justify-content:center; min-width:60px;
  margin:0; padding:9px 16px; font-weight:600; color:var(--muted); cursor:pointer; transition:all .14s; }
.q .yn label + label { border-left:1.5px solid var(--line); }
.q .yn label input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.q .yn label:hover { color:var(--ink); }
.q .yn label:has(input[value=yes]:checked) { background:var(--coral); color:#fff; }
.q .yn label:has(input[value=no]:checked) { background:var(--ok); color:#fff; }
.q .yn label:has(input:focus-visible) { box-shadow:inset 0 0 0 2px rgba(14,124,155,.55); }
/* equipment checkbox list → chips */
#id_equipment_owned { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 0; }
#id_equipment_owned > div { margin:0; }
#id_equipment_owned label { display:inline-flex; align-items:center; gap:7px; margin:0; font-weight:500;
  padding:8px 14px; border:1.5px solid var(--line); border-radius:var(--r-pill); cursor:pointer;
  background:var(--surface); transition:all .14s; }
#id_equipment_owned label:hover { border-color:var(--ocean); }
#id_equipment_owned label:has(input:checked) { border-color:var(--ocean); background:var(--info-bg); color:var(--ocean); }

/* ---- add-on rows + quantity stepper ---- */
.addon-row { display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:15px 0; border-bottom:1px solid var(--line); }
.addon-row:last-child { border-bottom:0; }
.addon-row .info .name { font-weight:600; }
.qty { display:inline-flex; align-items:center; border:1.5px solid var(--line);
  border-radius:var(--r-pill); overflow:hidden; background:var(--surface); flex-shrink:0; }
.qty-btn { border:0; background:var(--surface-2); color:var(--ink); width:40px; height:42px;
  font-size:1.25rem; font-weight:700; line-height:1; cursor:pointer; display:flex;
  align-items:center; justify-content:center; transition:background .12s, color .12s; }
.qty-btn:hover { background:var(--info-bg); color:var(--ocean); }
.qty input { width:50px; text-align:center; border:0; border-radius:0; padding:8px 0;
  font-weight:700; -moz-appearance:textfield; appearance:textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.qty input:focus { box-shadow:none; }
.addon-row.active .qty { border-color:var(--ocean); }

/* ============================ Tables ==================================== */
table { width:100%; border-collapse:collapse; font-feature-settings:"tnum"; }
th,td { text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); font-size:.92rem; }
th { color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700; }
tbody tr { transition:background .12s; }
tbody tr:hover { background:var(--surface-2); }

/* ============================ Badges / flags ============================ */
.badge { display:inline-block; padding:4px 11px; border-radius:var(--r-pill); font-size:.74rem;
  font-weight:700; letter-spacing:.03em; text-transform:uppercase; }
.b-requested { background:var(--warn-bg); color:var(--warn); }
.b-accepted { background:var(--ok-bg); color:var(--ok); }
.b-declined,.b-cancelled { background:var(--danger-bg); color:var(--danger); }
.b-completed { background:var(--info-bg); color:var(--ocean); }
.b-scheduled { background:var(--ok-bg); color:var(--ok); }
.flag-ok { color:var(--ok); font-weight:700; }
.flag-bad { color:var(--danger); font-weight:700; }
.flag-warn { color:var(--warn); font-weight:700; }

/* ============================ Summary box =============================== */
.summary { background:var(--abyss-grad); color:#fff; border-radius:var(--r-lg);
  padding:22px 24px; margin:20px 0; position:relative; overflow:hidden; box-shadow:var(--e2); }
.summary table { position:relative; z-index:1; }
.summary tbody tr:hover { background:transparent; }
.summary table th,.summary table td { border-color:rgba(255,255,255,.16); color:#fff; }
.summary .total { font-family:var(--display); font-size:1.6rem; font-weight:500; }

/* ---- confirmation delight ---- */
.confirm { max-width:620px; margin:0 auto; }
.confirm-hero { background:var(--abyss-grad); color:#fff; border-radius:var(--r-lg);
  padding:40px 28px 32px; text-align:center; position:relative; overflow:hidden; box-shadow:var(--e2); }
.confirm-hero h1 { color:#fff; margin:0 0 8px; }
.confirm-hero p { opacity:.9; max-width:42ch; margin:0 auto; position:relative; z-index:1; }
.confirm-check { width:72px; height:72px; border-radius:50%; margin:0 auto 18px;
  background:var(--aqua); color:var(--abyss); display:flex; align-items:center; justify-content:center;
  font-size:2.2rem; font-weight:800; position:relative; z-index:1;
  box-shadow:0 0 0 8px rgba(70,214,192,.18); animation:pop .5s cubic-bezier(.2,.9,.3,1.4) both; }
.confirm-hero h1, .confirm-hero .ref-ticket { position:relative; z-index:1; }
@keyframes pop { from{ transform:scale(.4); opacity:0; } to{ transform:scale(1); opacity:1; } }
.ref-ticket { display:inline-flex; flex-direction:column; gap:2px; margin-top:20px;
  background:rgba(255,255,255,.12); border:1px dashed rgba(255,255,255,.4); border-radius:var(--r-md);
  padding:12px 26px; backdrop-filter:blur(4px); }
.ref-ticket span { font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; opacity:.8; }
.ref-ticket strong { font-family:var(--display); font-size:1.8rem; letter-spacing:.08em; }

/* ============================ Staff shell =============================== */
.staff-nav { background:var(--abyss); color:#fff; padding:13px 0; }
.staff-nav .inner { display:flex; gap:20px; align-items:center; flex-wrap:wrap; }
.staff-nav strong { font-family:var(--display); font-weight:500; font-size:1.1rem; }
.staff-nav a { color:#A9C6D4; font-weight:600; font-size:.9rem; }
.staff-nav a:hover,.staff-nav a.active { color:#fff; }
.staff-nav .spacer { flex:1; }
.stat { text-align:center; background-repeat:no-repeat; background-position:center; background-size:520px auto;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='300'><g fill='none' stroke='%230E7C9B' stroke-opacity='0.06' stroke-width='1.3'><path d='M-40 70 Q150 20 340 80 T740 70'/><path d='M-40 120 Q150 70 340 130 T740 120'/><path d='M-40 170 Q150 120 340 180 T740 170'/><path d='M-40 220 Q150 170 340 230 T740 220'/></g></svg>"); }
.stat .n { font-family:var(--display); font-size:2.6rem; font-weight:500; color:var(--ocean); line-height:1; position:relative; }
.stat .n.warn { color:var(--warn); }
.stat .n.ok { color:var(--ok); }
.stat .n.dim { color:var(--muted); }
.stat .muted { font-size:.82rem; margin-top:8px; text-transform:uppercase; letter-spacing:.06em; font-weight:600; }

/* clearance chips (dashboard triage) */
.clr { display:inline-flex; gap:5px; }
.clr .chip { font-size:.66rem; font-weight:700; padding:3px 9px; border-radius:var(--r-pill);
  letter-spacing:.04em; text-transform:uppercase; }
.chip.ok { background:var(--ok-bg); color:var(--ok); }
.chip.bad { background:var(--danger-bg); color:var(--danger); }

/* clearance status tiles (booking detail) */
.clr-tile { border:1px solid var(--line); border-left:4px solid var(--muted);
  border-radius:var(--r-sm); padding:13px 15px; }
.clr-tile .muted { text-transform:uppercase; font-size:.7rem; letter-spacing:.06em;
  font-weight:700; margin-bottom:6px; }
.clr-tile.ok { border-left-color:var(--ok); }
.clr-tile.warn { border-left-color:var(--warn); }
.clr-tile.bad { border-left-color:var(--danger); }

/* seat-fill cell */
.seat-cell { display:flex; align-items:center; gap:10px; }
.seat-cell .muted { font-size:.8rem; white-space:nowrap; }

/* customer avatar + empty states */
.cust-name { display:inline-flex; align-items:center; gap:11px; font-weight:600; }
.avatar { width:34px; height:34px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(150deg,var(--ocean-bright),var(--ocean)); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:.78rem; }
.empty { text-align:center; padding:34px 16px; color:var(--muted); }
.empty-mark { font-size:2.4rem; margin-bottom:8px; opacity:.7; }

/* seat-fill bar */
.seatbar { height:8px; border-radius:var(--r-pill); background:var(--surface-2); overflow:hidden; min-width:90px; }
.seatbar > span { display:block; height:100%; background:linear-gradient(90deg,var(--aqua),var(--ocean)); }

/* ============================ Auth / login ============================== */
.auth { min-height:100vh; display:grid; grid-template-columns:1.05fr 1fr; }
.auth-media { position:relative; overflow:hidden; background-size:cover; background-position:center;
  color:#fff; display:flex; flex-direction:column; justify-content:space-between; padding:42px 40px; }
.auth-media .brand .wordmark { color:#fff; }
.auth-tagline h2 { color:#fff; font-weight:400; font-size:clamp(1.6rem,3vw,2.4rem); margin:0 0 8px; position:relative; z-index:1; }
.auth-tagline p { opacity:.88; margin:0; max-width:34ch; position:relative; z-index:1; }
.auth-form { display:flex; align-items:center; justify-content:center; padding:40px 28px; background:var(--bg); }
.auth-form .inner { width:100%; max-width:360px; }
.auth-form h1 { margin-bottom:4px; }
.auth-error { background:var(--danger-bg); color:var(--danger); font-weight:600;
  padding:10px 13px; border-radius:var(--r-sm); font-size:.9rem; }
@media (max-width:760px){
  .auth { grid-template-columns:1fr; grid-template-rows:auto 1fr; }
  .auth-media { min-height:180px; padding:24px; }
  .auth-tagline h2 { font-size:1.5rem; }
}

/* ============================ Messages ================================== */
.messages { list-style:none; padding:0; margin:16px 0; }
.messages li { padding:11px 15px; border-radius:var(--r-sm); margin-bottom:8px; font-weight:600; }
.messages .success { background:var(--ok-bg); color:var(--ok); }
.messages .error { background:var(--danger-bg); color:var(--danger); }
.messages .info { background:var(--info-bg); color:var(--ocean); }

footer.site { text-align:center; color:var(--muted); padding:34px 0; font-size:.85rem; }

/* ============================ Mobile reflow ============================= */
@media (max-width:640px){
  /* Data tables inside cards reflow to stacked rows so nothing (status pills,
     action buttons) overflows the card / viewport. Excludes the .summary box. */
  .card table thead { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
  .card table, .card table tbody, .card table tr, .card table th, .card table td { display:block; width:100%; }
  .card table tr { padding:14px 0; border-bottom:1px solid var(--line); }
  .card table tr:first-child { padding-top:0; }
  .card table tr:last-child { border-bottom:0; padding-bottom:0; }
  .card table tr:hover { background:transparent; }
  .card table th, .card table td { border:0; padding:2px 0; text-align:left; }
  .card table td.right { text-align:left; }
  .card table td .btn { display:flex; width:100%; margin-top:10px; }
  /* keep the booking-detail label/value tables compact (label muted, value below) */
  .card table th { color:var(--muted); font-size:.7rem; }

  /* staff nav: one scrollable row instead of an awkward wrap */
  .staff-nav .inner { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    gap:16px; scrollbar-width:none; }
  .staff-nav .inner::-webkit-scrollbar { display:none; }
  .staff-nav .spacer { display:none; }
  .staff-nav a, .staff-nav .staff-brand { white-space:nowrap; }
}

/* ============================ Motion guard ============================== */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none !important; transition:none !important; }
  .reveal { opacity:1; }
}