/* =========================================================================
   app.css  —  THE ACCOUNT, BOOKING AND DASHBOARD PAGES
   =========================================================================

   The marketing pages (home, expeditions, gallery, about, contact) are
   styled by main.css / home.css / mobile.css. This file styles the five
   pages that were added when booking moved onto the website itself:

       login.html            sign in
       signup.html           create an account
       forgot-password.html  / reset-password.html
       book.html             request a seat
       account.html          a rider's own bookings
       admin.html            the office dashboard — accept / reject

   It is a LAYER ON TOP of main.css, not a replacement: the colours, fonts
   and buttons all come from there, so re-tinting the site in main.css
   re-tints these pages too. Load it after main.css.

   CONTENTS
     1.  App shell + header
     2.  Panels and cards
     3.  Forms
     4.  Buttons (extra variants)
     5.  Status pills
     6.  Auth pages
     7.  Booking page (the stepper)
     8.  Account page
     9.  Dashboard
     10. Toasts, empty states, spinners
     11. Phones
   ========================================================================= */


/* ---------- 0. The hidden attribute --------------------------------------
   READ THIS BEFORE ADDING A `display:` RULE TO ANYTHING TOGGLED IN JS.

   Browsers hide `<div hidden>` with a built-in `[hidden]{display:none}`, but
   that rule is the weakest one there is: ANY class rule that sets `display`
   beats it. So `.book-grid{display:grid}` on an element carrying `hidden`
   left the whole booking form on screen — the "Request sent" card appeared
   underneath it instead of replacing it. The same trap was waiting in the
   dashboard's pager and its decision drawer, both of which set `display:flex`.

   This one line settles it for every element on every app page, now and
   later, so `el.hidden = true` always means what it says.
   ------------------------------------------------------------------------ */
[hidden]{ display: none !important; }


/* ---------- 1. App shell + header ---------------------------------------- */

body.app-page{
  background: var(--paper);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* A quieter header than the marketing one: this is somewhere people do a
   task, so the chrome gets out of the way. Sticky, because on the dashboard
   you scroll a long list and still want the account menu. */
.app-header{
  position: sticky; top: 0; z-index: 60;
  background: var(--dark);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.app-header-inner{
  max-width: var(--container); margin: 0 auto;
  padding: 0 var(--gutter);
  height: 64px;
  display: flex; align-items: center; gap: 18px;
}
.app-logo{ display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.app-logo img{ width: 38px; height: 38px; }
.app-logo span{
  font-family: var(--font-display); font-stretch: var(--wide); font-weight: 800;
  font-size: 14px; letter-spacing: .01em; text-transform: uppercase; color: var(--dark-ink);
  white-space: nowrap;
}

.app-nav{ display: flex; gap: 4px; margin-left: auto; align-items: center; }
/* the India / Global switch, when a page carries one (book.html) */
.app-header .cur-switch{ height: 38px; flex: 0 0 auto; }
.app-nav a{
  padding: 8px 14px; border-radius: var(--r-sm);
  font-size: 13.5px; font-weight: 600; color: var(--dark-muted);
  transition: color .2s var(--ease), background .2s var(--ease);
  white-space: nowrap;
}
.app-nav a:hover{ color: var(--dark-ink); background: rgba(255,255,255,.07); }
.app-nav a.is-active{ color: var(--rust-soft); background: rgb(var(--accent-rgb) / .14); }

/* The account button: initials in a disc, name beside it, menu underneath. */
.account-menu{ position: relative; flex: 0 0 auto; }
.account-btn{
  display: flex; align-items: center; gap: 9px;
  padding: 5px 12px 5px 5px; border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--dark-ink);
  transition: background .2s var(--ease);
}
.account-btn:hover{ background: rgba(255,255,255,.15); }
.account-initials{
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--rust); color: var(--on-accent);
  font-family: var(--font-display); font-weight: 600; font-size: 12.5px;
  letter-spacing: .03em;
  flex: 0 0 auto;
}
.account-name{
  font-size: 13.5px; font-weight: 600; max-width: 140px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.account-caret{ width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; opacity: .6; }

.account-drop{
  position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 230px; padding: 7px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lift);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.account-menu.is-open .account-drop{ opacity: 1; visibility: visible; transform: none; }
.account-drop-head{
  padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px;
}
.account-drop-head strong{ display: block; font-size: 14px; color: var(--ink); }
.account-drop-head span{ display: block; font-size: 12.5px; color: var(--ink-faint); margin-top: 2px; word-break: break-all; }
.account-drop a, .account-drop button{
  display: block; width: 100%; text-align: left;
  padding: 9px 12px; border-radius: var(--r-sm);
  font-size: 13.5px; font-weight: 500; color: var(--ink-soft);
  transition: background .15s var(--ease), color .15s var(--ease);
}
.account-drop a:hover, .account-drop button:hover{ background: var(--paper-2); color: var(--ink); }
.account-drop .is-danger{ color: var(--rust-text); }

.app-main{ flex: 1 0 auto; padding: clamp(2rem, 5vw, 3.5rem) 0 5rem; }
.app-shell{ max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.app-shell-narrow{ max-width: 880px; margin: 0 auto; padding: 0 var(--gutter); }

.app-footer{
  flex: 0 0 auto;
  border-top: 1px solid var(--line);
  background: var(--paper-2);
  padding: 22px 0;
  font-size: 13px; color: var(--ink-faint);
}
.app-footer-inner{
  max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center;
}
.app-footer a{ color: var(--rust-text); font-weight: 600; }
.app-footer a:hover{ text-decoration: underline; }
.app-footer .spacer{ margin-left: auto; }


/* ---------- 2. Panels and cards ------------------------------------------ */

.page-head{ margin-bottom: 26px; }
.page-head .eyebrow{
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--rust-text);
  margin-bottom: 8px;
}
.page-head h1{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1.12;
  letter-spacing: -.01em; color: var(--ink);
}
.page-head p{ margin-top: 10px; color: var(--ink-soft); font-size: 15.5px; max-width: 62ch; line-height: 1.6; }

.panel{
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.panel + .panel{ margin-top: 18px; }
.panel-head{
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-bottom: 16px; padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.panel-head h2{
  font-family: var(--font-display); font-weight: 600; font-size: 18px;
  letter-spacing: .01em; color: var(--ink);
}
.panel-head p{ font-size: 13.5px; color: var(--ink-faint); margin: 0; }
.panel-head .spacer{ margin-left: auto; }


/* ---------- 3. Forms ------------------------------------------------------ */

.field{ margin-bottom: 16px; }
.field label{
  display: block; margin-bottom: 6px;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft);
}
.field label .req{ color: var(--rust-text); }

.field input[type="text"], .field input[type="email"], .field input[type="password"],
.field input[type="tel"], .field input[type="date"], .field input[type="number"],
.field select, .field textarea{
  width: 100%;
  padding: 11px 13px;
  background: var(--paper);
  color-scheme: dark;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-size: 15px; color: var(--ink);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field textarea{ resize: vertical; min-height: 92px; line-height: 1.55; }
.field select{
  appearance: none;
  /* The chevron is drawn here rather than added as an <img> so it recolours
     with the text and needs no extra file. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A9184' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 17px;
  padding-right: 38px;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline: none;
  border-color: var(--rust);
  box-shadow: 0 0 0 3px var(--rust-tint);
}
.field .hint{ margin-top: 6px; font-size: 12.5px; color: var(--ink-faint); line-height: 1.5; }

/* A field the server rejected. The message sits under the box it belongs to,
   never in a summary at the top — you should not have to hunt for which
   field is wrong. */
.field.has-error input, .field.has-error select, .field.has-error textarea{
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgb(var(--danger-rgb) / .12);
}
.field .error{
  display: none; margin-top: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--danger);
}
.field.has-error .error{ display: block; }

.field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

/* The honeypot: off-screen and hidden from screen readers, but a form-filling
   bot sees an ordinary text input and cannot resist it. Not display:none —
   some bots skip those. */
.hp-field{
  position: absolute !important;
  left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

/* Visible to a screen reader, invisible on the page. For labels that a
   sighted person does not need because the placeholder and the icon already
   say it, but that a screen reader must still announce. */
.sr-only{
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.form-note{
  padding: 12px 14px; border-radius: var(--r-sm);
  font-size: 13.5px; line-height: 1.55; font-weight: 500;
  margin-bottom: 16px;
}
.form-note.is-error{ background: rgb(var(--danger-rgb) / .09); color: var(--danger); border: 1px solid rgb(var(--danger-rgb) / .24); }
.form-note.is-ok{ background: var(--pine-tint); color: var(--pine); border: 1px solid var(--pine-line); }
.form-note.is-info{ background: var(--rust-tint); color: var(--rust-text); border: 1px solid rgb(var(--accent-rgb) / .28); }


/* ---------- 4. Buttons (extra variants on top of main.css) ---------------- */

.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: 0;
  font-family: var(--font-display); font-stretch: var(--wide);
  font-size: 11.5px; font-weight: 700; line-height: 1.1;
  letter-spacing: .08em; text-transform: uppercase; text-align: center;
  border: 1px solid transparent;
  transition: background .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .2s var(--ease);
}
.btn:disabled, .btn.is-busy{ opacity: .55; cursor: not-allowed; transform: none !important; }
.btn:focus-visible{ outline: 2px solid var(--rust); outline-offset: 2px; }

.btn-primary{ background: var(--rust); color: var(--on-accent); }
.btn-primary:hover:not(:disabled){ background: var(--ink); transform: translateY(-1px); }

.btn-ghost{ background: transparent; border-color: var(--line-strong); color: var(--ink); }
.btn-ghost:hover:not(:disabled){ border-color: var(--ink); background: rgb(var(--ink-rgb) / .04); }

.btn-accept{ background: var(--pine); color: var(--on-accent); }
.btn-accept:hover:not(:disabled){ background: var(--pine-soft); transform: translateY(-1px); }

.btn-reject{ background: transparent; border-color: rgb(var(--danger-rgb) / .5); color: var(--danger); }
.btn-reject:hover:not(:disabled){ background: rgb(var(--danger-rgb) / .08); border-color: var(--danger); }

.btn-block{ display: flex; width: 100%; }
.btn-sm{ padding: 8px 15px; font-size: 13px; }
.btn svg{ width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }

.link{ color: var(--rust-text); font-weight: 600; }
.link:hover{ text-decoration: underline; }


/* ---------- 5. Status pills ---------------------------------------------- */

/* One pill, four states, used identically on the rider's page and in the
   dashboard — so "confirmed" looks the same to both sides. */
.pill{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 0;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; white-space: nowrap;
}
.pill::before{ content: ""; width: 6px; height: 6px; background: currentColor; }
.pill-pending  { background: rgb(var(--accent-rgb) / .14); color: var(--rust); }
.pill-confirmed{ background: var(--pine-tint);     color: var(--pine); }
.pill-declined { background: rgb(var(--danger-rgb) / .10);  color: var(--danger); }
.pill-cancelled{ background: rgb(var(--ink-rgb) / .07);   color: var(--ink-faint); }
.pill-new      { background: rgb(var(--accent-rgb) / .14); color: var(--rust); }
.pill-read     { background: rgb(var(--ink-rgb) / .07);  color: var(--ink-faint); }
.pill-closed   { background: rgb(var(--ink-rgb) / .07);  color: var(--ink-faint); }


/* ---------- 6. Auth pages ------------------------------------------------- */

.auth-wrap{
  min-height: calc(100vh - 64px);
  display: grid; grid-template-columns: 1fr 1fr;
}
.auth-form-side{
  display: flex; align-items: center; justify-content: center;
  padding: clamp(2rem, 5vw, 4rem) var(--gutter);
}
.auth-card{ width: 100%; max-width: 420px; }
.auth-card h1{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.15; color: var(--ink);
  margin-bottom: 8px;
}
.auth-card .sub{ color: var(--ink-soft); font-size: 15px; line-height: 1.6; margin-bottom: 26px; }
.auth-alt{
  margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 14px; color: var(--ink-soft); text-align: center;
}
.auth-fine{ margin-top: 18px; font-size: 12.5px; color: var(--ink-faint); line-height: 1.6; }

/* A photo panel beside the form: this is still the same expedition company,
   not a bank. Hidden on phones, where it would just push the form down. */
.auth-photo-side{
  position: relative;
  background: var(--dark) url("../assets/photos/hero-ladakh-rider.jpg") center/cover no-repeat;
}
.auth-photo-side::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(200deg, rgb(var(--dark-rgb) / .35) 0%, rgb(var(--dark-rgb) / .88) 78%);
}
.auth-quote{
  position: absolute; inset: auto 0 0 0; z-index: 1;
  padding: clamp(2rem, 4vw, 3.25rem);
  color: var(--dark-ink);
}
.auth-quote p{
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.15rem, 1.9vw, 1.6rem); line-height: 1.35;
  margin-bottom: 14px;
}
.auth-quote cite{
  font-style: normal; font-size: 13px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--rust-soft); font-weight: 600;
}

.pw-field{ position: relative; }
.pw-toggle{
  position: absolute; right: 4px; top: 26px;
  padding: 8px 11px; border-radius: var(--r-sm);
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-faint);
}
.pw-toggle:hover{ color: var(--rust-text); }

/* A quiet strength read-out. It measures length and variety rather than
   demanding symbols — the aim is to nudge towards a longer passphrase. */
.pw-meter{ display: flex; gap: 4px; margin-top: 8px; }
.pw-meter span{ height: 3px; flex: 1; border-radius: 2px; background: var(--line); transition: background .25s var(--ease); }
.pw-meter.s1 span:nth-child(1){ background: var(--danger); }
.pw-meter.s2 span:nth-child(-n+2){ background: var(--accent-deep); }
.pw-meter.s3 span:nth-child(-n+3){ background: var(--pine); }
.pw-meter.s4 span{ background: var(--pine); }
.pw-label{ margin-top: 6px; font-size: 12px; color: var(--ink-faint); }


/* ---------- 7. Booking page ---------------------------------------------- */

.book-grid{
  display: grid;
  grid-template-columns: minmax(0,1fr) 340px;
  gap: 28px; align-items: start;
}

/* The four steps across the top. It is a progress indicator, not a set of
   buttons: a step you have already finished can be clicked to go back, one
   you have not reached cannot. */
.stepper{ display: flex; gap: 6px; margin-bottom: 26px; }
.step{
  flex: 1; text-align: left;
  padding: 12px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.step-n{
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface-2); color: var(--ink-faint);
  font-size: 12px; font-weight: 700; margin-bottom: 7px;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.step-label{ display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-faint); line-height: 1.3; }
.step.is-active{ border-color: var(--rust); background: var(--surface); box-shadow: 0 0 0 3px var(--rust-tint); }
.step.is-active .step-n{ background: var(--rust); color: var(--on-accent); }
.step.is-active .step-label{ color: var(--ink); }
.step.is-done{ border-color: var(--pine-line); background: var(--pine-tint); cursor: pointer; }
.step.is-done .step-n{ background: var(--pine); color: var(--on-accent); }
.step.is-done .step-label{ color: var(--pine); }

.step-panel{ display: none; }
.step-panel.is-active{ display: block; animation: stepIn .3s var(--ease); }
@keyframes stepIn{ from{ opacity: 0; transform: translateY(8px); } to{ opacity: 1; transform: none; } }

.step-actions{
  display: flex; gap: 10px; align-items: center;
  margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line);
}
.step-actions .spacer{ margin-left: auto; }

/* Choosing the expedition: a radio list dressed as cards, so the whole row
   is the target rather than a small circle. */
.trip-choices{ display: grid; gap: 10px; }
/* "Motorcycle raids" / "4x4 raids" over each group of trips */
.trip-group{
  margin: 10px 0 0;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--rust-text);
}
.trip-group:first-child{ margin-top: 0; }
.trip-choice{ position: relative; }
.trip-choice input{ position: absolute; opacity: 0; width: 0; height: 0; }
.trip-choice label{
  display: flex; gap: 14px; align-items: center;
  padding: 13px 15px; border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--surface);
  cursor: pointer;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.trip-choice label:hover{ border-color: var(--line-strong); }
.trip-choice input:checked + label{ border-color: var(--rust); box-shadow: 0 0 0 3px var(--rust-tint); }
.trip-choice input:focus-visible + label{ outline: 2px solid var(--rust); outline-offset: 2px; }
.trip-choice img{
  width: 62px; height: 52px; border-radius: var(--r-sm); object-fit: cover;
  background: var(--surface-2); flex: 0 0 auto;
}
.trip-choice .tc-body{ flex: 1; min-width: 0; }
.trip-choice .tc-name{ font-family: var(--font-display); font-weight: 600; font-size: 15.5px; color: var(--ink); }
.trip-choice .tc-meta{ font-size: 12.5px; color: var(--ink-faint); margin-top: 3px; }
.trip-choice .tc-price{ text-align: right; flex: 0 0 auto; }
.trip-choice .tc-price b{ display: block; font-family: var(--font-display); font-size: 17px; color: var(--ink); font-weight: 600; }
.trip-choice .tc-price span{ font-size: 11px; color: var(--ink-faint); letter-spacing: .04em; text-transform: uppercase; }

/* The scheduled departures, offered as chips so the common case — "the one
   in April" — is one tap rather than a date picker. */
.dep-chips{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.dep-chip{
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface);
  font-size: 13px; font-weight: 600; color: var(--ink-soft);
  transition: all .18s var(--ease);
}
.dep-chip:hover{ border-color: var(--rust); color: var(--rust-text); }
.dep-chip.is-active{ background: var(--rust); border-color: var(--rust); color: var(--on-accent); }
.dep-chip small{ display: block; font-size: 10.5px; font-weight: 500; opacity: .75; letter-spacing: .04em; }

/* The running total. Sticky, because on the last step the form is long and
   the number is the thing people keep glancing at. */
.summary{
  position: sticky; top: 84px;
  background: var(--dark); color: var(--dark-ink);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-card);
}
.summary-head{ padding: 18px 20px 14px; border-bottom: 1px solid var(--dark-line); }
.summary-head .eyebrow{
  font-family: var(--font-display); font-size: 10.5px; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase; color: var(--rust-soft);
}
.summary-head h3{
  font-family: var(--font-display); font-weight: 600; font-size: 18px;
  line-height: 1.25; margin-top: 6px; color: var(--dark-ink);
}
.summary-body{ padding: 16px 20px; }
.summary-row{
  display: flex; justify-content: space-between; gap: 14px;
  padding: 8px 0; font-size: 13.5px;
}
.summary-row span:first-child{ color: var(--dark-muted); }
.summary-row span:last-child{ text-align: right; font-weight: 600; }
.summary-total{
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--dark-line);
}
.summary-total span{ font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--dark-muted); }
.summary-total b{ font-family: var(--font-display); font-weight: 600; font-size: 28px; color: var(--rust-soft); }
.summary-foot{
  padding: 13px 20px 18px; font-size: 12px; line-height: 1.6;
  color: var(--dark-muted); border-top: 1px solid var(--dark-line);
}

/* The "request sent" screen. */
.done-card{ text-align: center; max-width: 560px; margin: 0 auto; padding: clamp(2rem,5vw,3rem); }
.done-mark{
  width: 62px; height: 62px; border-radius: 50%; margin: 0 auto 20px;
  display: grid; place-items: center;
  background: var(--pine-tint); color: var(--pine);
}
.done-mark svg{ width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.done-card h2{ font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; color: var(--ink); margin-bottom: 10px; }
.done-card p{ color: var(--ink-soft); line-height: 1.65; margin-bottom: 8px; }
.done-ref{
  display: inline-block; margin: 18px 0 22px;
  padding: 11px 22px; border-radius: var(--r-sm);
  background: var(--paper-2); border: 1px dashed var(--line-strong);
  font-family: var(--font-display); font-size: 21px; font-weight: 600;
  letter-spacing: .1em; color: var(--ink);
}
.done-actions{ display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }


/* ---------- 8. Account page ---------------------------------------------- */

.booking-card{
  background: var(--card); border: 1px solid var(--card-line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-card);
  padding: 18px 20px; margin-bottom: 14px;
  transition: box-shadow .22s var(--ease), transform .22s var(--ease);
}
.booking-card:hover{ box-shadow: var(--shadow-lift); transform: translateY(-1px); }

/* A colour down the left edge, so the state of a list of bookings reads at a
   glance without reading any of the pills. */
.booking-card{ border-left: 3px solid var(--line); }
.booking-card.s-pending  { border-left-color: var(--rust); }
.booking-card.s-confirmed{ border-left-color: var(--pine); }
.booking-card.s-declined { border-left-color: var(--danger); }
.booking-card.s-cancelled{ border-left-color: var(--line-strong); }

.bc-top{ display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.bc-title{ flex: 1; min-width: 200px; }
.bc-title h3{ font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--ink); line-height: 1.25; }
.bc-ref{
  font-size: 12px; letter-spacing: .1em; color: var(--ink-faint);
  font-weight: 600; margin-top: 4px;
}
.bc-facts{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px 18px; padding: 13px 0; border-top: 1px solid var(--line);
}
.bc-fact .k{ display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 3px; }
.bc-fact .v{ display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.bc-note{
  margin-top: 12px; padding: 12px 14px; border-radius: var(--r-sm);
  background: var(--paper-2); border-left: 3px solid var(--rust);
  font-size: 13.5px; line-height: 1.6; color: var(--ink-soft);
  white-space: pre-wrap;
}
.bc-note strong{ display: block; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--rust-text); margin-bottom: 4px; }
.bc-actions{ display: flex; gap: 9px; margin-top: 14px; flex-wrap: wrap; }

.tabs{ display: flex; gap: 3px; border-bottom: 1px solid var(--line); margin-bottom: 22px; overflow-x: auto; }
.tab{
  padding: 11px 17px; white-space: nowrap;
  font-size: 14px; font-weight: 600; color: var(--ink-faint);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.tab:hover{ color: var(--ink); }
.tab.is-active{ color: var(--rust-text); border-bottom-color: var(--rust); }
.tab .count{
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  border-radius: 999px; background: var(--surface-2);
  font-size: 11px; font-weight: 700; color: var(--ink-faint);
}
.tab.is-active .count{ background: var(--rust); color: var(--on-accent); }
.tab-panel{ display: none; }
.tab-panel.is-active{ display: block; }


/* ---------- 9. Dashboard -------------------------------------------------- */

.stat-row{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 12px; margin-bottom: 24px;
}
/* .stat-row .stat, not plain .stat: main.css strips the first homepage
   statistic of its left padding, and that rule would otherwise reach the
   first tile here too. */
.stat-row .stat{
  background: var(--card); border: 1px solid var(--card-line);
  border-radius: var(--r-lg); padding: 15px 17px; box-shadow: var(--shadow-card);
}
.stat .k{ font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.stat .v{
  font-family: var(--font-display); font-stretch: var(--wide); font-weight: 800; font-size: 28px;
  line-height: 1.1; color: var(--ink); margin-top: 5px;
}
.stat .sub{ font-size: 12px; color: var(--ink-faint); margin-top: 2px; }
/* The queue tile is the one that means "somebody is waiting on you". */
.stat.is-urgent{ border-color: var(--rust); background: rgb(var(--accent-rgb) / .08); }
.stat.is-urgent .v{ color: var(--rust-text); }

.toolbar{
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin-bottom: 16px;
}
.search-box{ position: relative; flex: 1; min-width: 220px; max-width: 380px; }
.search-box input{
  width: 100%; padding: 10px 13px 10px 38px;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); font-size: 14px;
}
.search-box input:focus{ outline: none; border-color: var(--rust); box-shadow: 0 0 0 3px var(--rust-tint); }
.search-box svg{
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; fill: none; stroke: var(--ink-faint);
  stroke-width: 2; pointer-events: none;
}
.filter-group{ display: flex; gap: 3px; background: var(--surface-2); padding: 3px; border-radius: var(--r-sm); }
.filter-btn{
  padding: 7px 14px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 600; color: var(--ink-faint);
  transition: background .18s var(--ease), color .18s var(--ease);
}
.filter-btn:hover{ color: var(--ink); }
.filter-btn.is-active{ background: var(--surface-2); color: var(--ink); box-shadow: 0 1px 3px rgb(var(--shadow-rgb) / .13); }

/* The request queue. A table on a laptop; the same rows become stacked cards
   on a phone (section 11), because a five-column table on a 380px screen is
   unusable and the office does check this from the road. */
.data-table{ width: 100%; border-collapse: collapse; }
.data-table th{
  text-align: left; padding: 10px 14px;
  font-size: 11px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 700;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.data-table td{ padding: 14px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: middle; }
.data-table tbody tr{ transition: background .15s var(--ease); }
.data-table tbody tr:hover{ background: rgb(var(--accent-rgb) / .045); }
.data-table tbody tr.is-pending{ background: rgb(var(--accent-rgb) / .05); }
.data-table tbody tr.is-pending:hover{ background: rgb(var(--accent-rgb) / .09); }
.data-table .who strong{ display: block; font-weight: 600; color: var(--ink); }
.data-table .who span{ display: block; font-size: 12.5px; color: var(--ink-faint); margin-top: 2px; }
.data-table .ref{ font-size: 12.5px; font-weight: 700; letter-spacing: .06em; color: var(--ink-soft); white-space: nowrap; }
.data-table .num{ text-align: right; font-weight: 600; white-space: nowrap; }
.row-actions{ display: flex; gap: 7px; justify-content: flex-end; }
.table-scroll{ overflow-x: auto; margin: 0 -4px; padding: 0 4px; }

.pager{ display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 20px; font-size: 13.5px; color: var(--ink-faint); }

/* The decision drawer: it slides in over the list rather than navigating
   away, so working through a queue of ten never loses your place. */
.drawer-scrim{
  position: fixed; inset: 0; z-index: 90;
  background: rgb(var(--dark-rgb) / .45);
  opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), visibility .25s;
}
.drawer-scrim.is-open{ opacity: 1; visibility: visible; }
.drawer{
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 91;
  width: min(560px, 100%);
  background: var(--paper); box-shadow: -14px 0 50px -18px rgb(var(--shadow-rgb) / .5);
  transform: translateX(100%); transition: transform .3s var(--ease);
  display: flex; flex-direction: column;
}
.drawer.is-open{ transform: none; }
.drawer-head{
  padding: 18px 22px; border-bottom: 1px solid var(--line);
  display: flex; align-items: flex-start; gap: 14px; background: var(--surface);
}
.drawer-head h2{ font-family: var(--font-display); font-weight: 600; font-size: 19px; color: var(--ink); line-height: 1.25; }
.drawer-head .ref{ font-size: 12.5px; letter-spacing: .1em; font-weight: 700; color: var(--ink-faint); margin-top: 4px; }
.drawer-close{ margin-left: auto; padding: 7px; border-radius: var(--r-sm); color: var(--ink-faint); flex: 0 0 auto; }
.drawer-close:hover{ background: var(--paper-2); color: var(--ink); }
.drawer-close svg{ width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; }
.drawer-body{ flex: 1; overflow-y: auto; padding: 20px 22px 28px; }
.drawer-foot{
  flex: 0 0 auto; padding: 16px 22px;
  border-top: 1px solid var(--line); background: var(--surface);
}

.detail-group{ margin-bottom: 22px; }
.detail-group h4{
  font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 700; margin-bottom: 10px;
}
.detail-list{ display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.detail-list div{ display: flex; gap: 14px; justify-content: space-between; padding: 11px 14px; background: var(--surface); font-size: 14px; }
.detail-list .k{ color: var(--ink-faint); flex: 0 0 auto; }
.detail-list .v{ text-align: right; font-weight: 600; color: var(--ink); word-break: break-word; }
.detail-text{
  padding: 13px 15px; border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--line);
  font-size: 14px; line-height: 1.65; color: var(--ink-soft); white-space: pre-wrap;
}

/* The audit trail. A plain vertical line with dots — every status change
   this booking has been through, and who did it. */
.timeline{ position: relative; padding-left: 22px; }
.timeline::before{ content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: var(--line); }
.tl-item{ position: relative; padding-bottom: 16px; }
.tl-item:last-child{ padding-bottom: 0; }
.tl-item::before{
  content: ""; position: absolute; left: -21px; top: 5px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--line-strong);
}
.tl-item.s-confirmed::before{ border-color: var(--pine); background: var(--pine); }
.tl-item.s-declined::before { border-color: var(--danger); background: var(--danger); }
.tl-item.s-pending::before  { border-color: var(--rust); background: var(--rust); }
.tl-when{ font-size: 12px; color: var(--ink-faint); }
.tl-what{ font-size: 14px; font-weight: 600; color: var(--ink); margin-top: 1px; }
.tl-note{ font-size: 13.5px; color: var(--ink-soft); margin-top: 3px; line-height: 1.55; white-space: pre-wrap; }

.decide-box{ display: grid; gap: 10px; }
.decide-actions{ display: flex; gap: 10px; }
.decide-actions .btn{ flex: 1; }


/* ---------- 10. Toasts, empty states, spinners --------------------------- */

/* Confirmation that a click did something, without a dialog to dismiss. */
.toast-stack{ position: fixed; right: 18px; bottom: 18px; z-index: 200; display: grid; gap: 9px; }
.toast{
  display: flex; align-items: center; gap: 11px;
  padding: 13px 17px; border-radius: var(--r-sm);
  background: var(--dark); color: var(--dark-ink);
  box-shadow: var(--shadow-lift);
  font-size: 14px; font-weight: 500;
  max-width: 380px;
  animation: toastIn .28s var(--ease);
}
.toast.is-out{ animation: toastOut .25s var(--ease) forwards; }
.toast svg{ width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.toast.ok svg{ color: var(--pine-soft); }
.toast.err svg{ color: #F09189; }
@keyframes toastIn{ from{ opacity: 0; transform: translateY(14px); } to{ opacity: 1; transform: none; } }
@keyframes toastOut{ to{ opacity: 0; transform: translateY(10px); } }

.empty{ text-align: center; padding: clamp(2.5rem, 6vw, 4rem) 1.5rem; }
.empty svg{ width: 42px; height: 42px; margin: 0 auto 16px; fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.empty h3{ font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--ink); margin-bottom: 7px; }
.empty p{ color: var(--ink-faint); font-size: 14.5px; line-height: 1.6; max-width: 42ch; margin: 0 auto 18px; }

.spinner{
  width: 17px; height: 17px; border-radius: 50%;
  border: 2px solid rgb(var(--dark-rgb) / .3); border-top-color: var(--on-accent);
  animation: spin .7s linear infinite;
}
.btn-ghost .spinner{ border-color: var(--line-strong); border-top-color: var(--ink); }
@keyframes spin{ to{ transform: rotate(360deg); } }

.loading-rows{ display: grid; gap: 10px; }
.skeleton{
  height: 62px; border-radius: var(--r-lg);
  background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface) 50%, var(--surface-2) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.3s linear infinite;
}
@keyframes shimmer{ to{ background-position: -200% 0; } }

/* Shown on every app page when the server cannot be reached, so a rider is
   never left looking at an empty screen wondering what happened. */
.offline-banner{
  background: var(--danger); color: var(--on-accent);
  padding: 11px var(--gutter); font-size: 13.5px; font-weight: 500; text-align: center;
}
.offline-banner code{ background: rgba(255,255,255,.16); padding: 1px 6px; border-radius: var(--r-sm); font-size: 12.5px; }


/* ---------- 11. Phones ---------------------------------------------------- */

@media (max-width: 900px){
  .book-grid{ grid-template-columns: 1fr; }
  .summary{ position: static; }
  .auth-photo-side{ display: none; }
  .auth-wrap{ grid-template-columns: 1fr; }
}

@media (max-width: 768px){
  .app-header-inner{ height: 58px; gap: 10px; }
  .app-logo span{ display: none; }
  .app-nav{ gap: 0; }
  .app-nav a{ padding: 7px 10px; font-size: 12.5px; }
  .account-name{ display: none; }
  .account-btn{ padding: 4px; }

  .app-main{ padding: 1.5rem 0 3rem; }

  /* Numbers only on the stepper: four labels do not fit, and the panel
     heading below already says which step you are on. */
  .stepper{ gap: 5px; }
  .step{ padding: 10px 8px; text-align: center; }
  .step-n{ margin-bottom: 0; }
  .step-label{ display: none; }

  .field-row{ grid-template-columns: 1fr; }
  .step-actions{ flex-direction: column-reverse; align-items: stretch; }
  .step-actions .btn{ width: 100%; }
  .step-actions .spacer{ display: none; }

  .stat-row{ grid-template-columns: 1fr 1fr; gap: 9px; }
  .stat-row .stat{ padding: 12px 13px; }
  .stat .v{ font-size: 24px; }

  .toolbar{ gap: 8px; }
  .search-box{ max-width: none; }
  .filter-group{ width: 100%; overflow-x: auto; }

  /* The queue table restacks: each row becomes a card, each cell labelled by
     its column heading (carried in data-label). */
  .data-table thead{ display: none; }
  .data-table, .data-table tbody, .data-table tr, .data-table td{ display: block; width: 100%; }
  .data-table tr{
    border: 1px solid var(--line); border-left-width: 3px;
    border-radius: var(--r-lg); margin-bottom: 11px; padding: 13px 15px; background: var(--surface);
  }
  .data-table tr.is-pending{ border-left-color: var(--rust); }
  .data-table td{ border: none; padding: 4px 0; display: flex; justify-content: space-between; gap: 14px; align-items: center; }
  .data-table td::before{
    content: attr(data-label);
    font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-faint); font-weight: 700; flex: 0 0 auto;
  }
  .data-table td.who{ display: block; padding-bottom: 9px; }
  .data-table td.who::before{ display: none; }
  .data-table .num{ text-align: right; }
  .row-actions{ justify-content: stretch; padding-top: 10px; }
  .row-actions .btn{ flex: 1; }
  .data-table td.actions::before{ display: none; }

  .drawer{ width: 100%; }
  .decide-actions{ flex-direction: column; }
  .toast-stack{ left: 14px; right: 14px; bottom: 14px; }
  .toast{ max-width: none; }
  .done-actions .btn{ width: 100%; }
}