/* Floo Organiser — SaaS dashboard styling (Stripe/Linear aesthetic, Floo teal).
   Styling-only layer over the existing server-rendered templates. Most rules target
   plain elements inside the app shell / auth card, so templates need no markup changes. */

/* ── Brand tokens ────────────────────────────────────────────────────────────
   Values lifted from the landing site's src/index.css (@theme block) so
   organiser.gofloo.in and gofloo.in resolve to the same palette. The comment
   after each token names its landing-repo counterpart: keep these in sync by
   copying values across, never by eyeballing a near-match.

   One rule travels with the palette and is NOT negotiable. The landing repo
   documents it: --teal-light (#4E9794, landing `teal`) is DECORATIVE ONLY —
   white text on it scores 3.40:1 and fails WCAG AA. Every teal that carries or
   *is* text is --teal (#35706D, landing `teal-deep`): 5.69:1 for white text on
   top, 5.18:1 as text on cream. Buttons, links and active nav use --teal. */
:root {
  --teal:        #35706D;   /* landing: teal-deep — the only teal allowed to carry text */
  --teal-hover:  #2A5B58;
  --teal-light:  #4E9794;   /* landing: teal — decorative fills, borders, focus ring */
  --teal-050:    #EDF6F6;   /* landing: tint */
  --teal-100:    #D6E8E6;

  --cream:       #F7F4EC;   /* landing: cream — the auth pages' page ground */
  /* The app shell keeps a near-neutral ground: cream at full strength behind a
     screen of dense white tables reads as dinge, not warmth. Same hue family,
     pulled toward grey. Auth pages, which are one card on open space, get the
     real cream. */
  --bg:          #F5F5F2;
  --surface:     #FFFFFF;
  --surface-2:   #FAFAF8;
  --border:      #E4E7E5;
  --border-2:    #EEF0EE;

  --text:        #1A2E2E;   /* landing: ink */
  --text-2:      #4A5A5A;   /* landing: body */
  /* 5.22:1 on white, 4.75:1 on cream, 5.00:1 on --surface-2 — all above the 4.5:1
     AA floor for normal-size text. This token carries the new auth copy (legal
     footer, consent line, review-gate line, field hints), all of it 12-12.5px, so
     it has to clear AA on its own. The obvious warm-grey pick for this slot,
     #7C8A8A, lands at 3.58:1 on white and 3.26:1 on cream and is not usable. */
  --text-3:      #626F6F;

  --danger:      #C2453B;
  --danger-050:  #FBEDEC;
  --warn:        #9A6A00;
  --warn-050:    #FBF3E2;
  --ok:          #197A4B;
  --ok-050:      #E9F5EE;

  --radius:      10px;
  --radius-sm:   8px;
  --radius-card: 18px;      /* landing: --radius-card (1.125rem) */
  --radius-pill: 999px;
  --shadow-sm:   0 1px 2px rgba(26, 46, 46, .05);
  --shadow:      0 1px 3px rgba(26, 46, 46, .06), 0 1px 2px rgba(26, 46, 46, .04);
  --shadow-pop:  0 8px 24px rgba(26, 46, 46, .10);
  --shadow-card: 0 1px 2px rgba(26, 46, 46, .04), 0 8px 24px rgba(26, 46, 46, .06);  /* landing */
  --sidebar-w:   248px;

  /* One control height for every organiser form. Applied as min-height rather
     than derived from padding so a select, an input and a button that sit on
     the same row cannot drift apart when their font metrics differ. */
  --control-h:   44px;

  /* The landing site sets no font-family, so it renders in Tailwind's default
     sans stack. Matching that stack verbatim is what makes the two sites look
     related; loading Inter as a webfont would diverge from gofloo.in AND put a
     render-blocking network fetch in front of the auth pages. */
  --font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-hover); text-decoration: underline; }

h1 { font-size: 22px; font-weight: 640; letter-spacing: -.01em; margin: 0 0 4px; color: var(--text); }
h2 { font-size: 16px; font-weight: 620; letter-spacing: -.005em; margin: 28px 0 12px; }
h3 { font-size: 13px; font-weight: 620; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); margin: 22px 0 10px; }

/* ---------------------------------------------------------------- App shell */

.org-shell { display: flex; min-height: 100vh; }

.org-sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
}

/* Sidebar lockup — same logo + "Organiser" suffix construction as the auth
   pages, sized down and left-aligned. Links home to the dashboard (the auth
   pages link out to gofloo.in instead). */
.org-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 4px 10px 18px;
  color: var(--text);
  text-decoration: none;
}
.org-brand:hover { text-decoration: none; color: var(--text); }
.org-brand:focus-visible {
  outline: 2px solid var(--teal-light);
  outline-offset: 2px;
  border-radius: 4px;
}
.org-brand-logo { height: 26px; width: auto; display: block; }
.org-brand-sep { width: 1px; height: 17px; background: var(--border); }
.org-brand-name {
  font-size: 13.5px;
  font-weight: 560;
  letter-spacing: .01em;
  color: var(--text-2);
}

/* Identity badge — the org-admin (member) and captain worlds never merge; the colour makes
   the active actor kind unmistakable at a glance. Teal = org admin, amber = captain. */
.org-identity {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0 0 18px;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
}
.org-identity-role {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
.org-identity-name {
  font-size: 13px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.org-identity--member { background: var(--teal-050); border-color: var(--teal); }
.org-identity--member .org-identity-role { color: var(--teal); }
.org-identity--captain { background: #FBF0DA; border-color: #B45309; }
.org-identity--captain .org-identity-role { color: #B45309; }

/* The sidebar is a brand row plus a panel holding everything the mobile toggle
   collapses. On desktop the panel is just a flex column and the toggle does not
   exist; below 768px the panel is the whole "sidebar" and hides behind the button. */
.org-sidebar-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.org-sidebar-panel { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }

/* A real checkbox, visually hidden, driving `:checked ~ .org-sidebar-panel`. Kept as a
   focusable form control rather than a scripted div so the menu opens from the keyboard
   with no JS on the page at all. display:none would remove it from the tab order AND
   break :checked, so on desktop it is switched off in its own min-width block below. */
.org-navtoggle-box { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.org-navtoggle { display: none; }

.org-nav { display: flex; flex-direction: column; gap: 2px; }

.org-nav-link {
  display: block;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-weight: 520;
  font-size: 13.5px;
  text-decoration: none;
  transition: background .12s, color .12s;
}
.org-nav-link:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.org-nav-link.is-active { background: var(--teal-050); color: var(--teal); font-weight: 600; }

.org-nav-subheading { margin-top: 10px; }

/* Active-trip top bar — per-trip sections as horizontal tabs (replaces the old sidebar nesting). */
.org-trip-header { margin: 0 0 22px; }
.org-trip-title {
  font-size: 20px; font-weight: 660; color: var(--text); letter-spacing: -.01em; margin-bottom: 12px;
}
.org-tabs {
  display: flex; gap: 4px; border-bottom: 1px solid var(--border-2); overflow-x: auto;
}
.org-tab {
  padding: 9px 14px; font-size: 13.5px; font-weight: 540; color: var(--text-2);
  border-bottom: 2px solid transparent; white-space: nowrap; text-decoration: none;
  transition: color .12s, border-color .12s;
}
.org-tab:hover { color: var(--text); text-decoration: none; border-bottom-color: var(--border); }
.org-tab.is-active { color: var(--teal); border-bottom-color: var(--teal); font-weight: 640; }

.org-nav-group { margin-top: 22px; border-top: 1px solid var(--border-2); padding-top: 16px; }
.org-nav-heading {
  font-size: 11px; font-weight: 640; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-3); padding: 0 10px 6px;
}
.org-nav-trip {
  padding: 0 10px 10px; font-size: 13px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.org-sidebar-footer { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border-2); }
.org-user {
  padding: 0 10px 10px; font-size: 12.5px; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.org-btn-ghost {
  width: 100%; text-align: left; padding: 7px 10px; border-radius: var(--radius-sm);
  background: transparent; border: 1px solid var(--border); color: var(--text-2);
  font-size: 13px; font-weight: 520; cursor: pointer; font-family: inherit;
}
.org-btn-ghost:hover { background: var(--surface-2); color: var(--text); border-color: var(--text-3); }

.org-main { flex: 1 1 auto; min-width: 0; }
.org-content { max-width: 1080px; padding: 32px 40px 64px; margin: 0 auto; }

/* Page intro spacing: a lead line under the h1 (first <p> after h1) */
.org-content > h1 + p { color: var(--text-2); margin: 0 0 22px; }

/* ---------------------------------------------------------------- Auth pages */

/* The auth pages are the only organiser screens a stranger sees before they
   trust us with an organisation, so they carry the brand at full strength:
   cream ground, the logo lockup standing on it above the card, legal footer
   below. The dashboard behind them stays a dense working tool. */

.org-auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  /* Cream, warmed further by a teal-tint bloom off the top edge. The old rule
     put this bloom on --bg (#F6F7F9), a cool grey that read as "unstyled admin
     page" rather than as gofloo.in. */
  background:
    radial-gradient(1200px 460px at 50% -160px, var(--teal-050), transparent),
    var(--cream);
}

/* Column: lockup / card / footer. The card owns the white surface; the lockup
   and footer sit directly on the cream. */
.org-auth-shell {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Signup carries two field groups and needs the extra width to stop reading as
   a long thin column. */
.org-auth-shell--wide { max-width: 480px; }

/* Brand lockup: the logo mark, a hairline, then "Organiser" as a suffix — the
   product name, not part of the wordmark, so it is weighted down and spaced out
   rather than set to match the logo. */
.org-authbrand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 22px;
  text-decoration: none;
  color: var(--text);
}
.org-authbrand:hover { text-decoration: none; color: var(--text); }
.org-authbrand:focus-visible {
  outline: 2px solid var(--teal-light);
  outline-offset: 6px;
  border-radius: 4px;
}
.org-authbrand-logo {
  /* Height-driven, width auto: the source is 535×233, and pinning both axes
     (as the landing navbar does at 80×36) squashes it by ~3%. */
  height: 34px;
  width: auto;
  display: block;
}
.org-authbrand-sep {
  width: 1px;
  height: 22px;
  background: var(--border);
}
.org-authbrand-name {
  font-size: 15px;
  font-weight: 560;
  letter-spacing: .01em;
  color: var(--text-2);
}

.org-auth-card {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 30px 30px 28px;
}
.org-auth-card h1 { font-size: 19px; text-align: center; margin-bottom: 6px; }
.org-auth-card p { color: var(--text-2); }
/* Lead line under the h1 (captain login explains itself before the field). */
.org-auth-card h1 + p { text-align: center; font-size: 13.5px; margin: 0 0 20px; }
.org-auth-card h1:last-of-type { margin-bottom: 20px; }
/* Shared look for the trailing link lines. Deliberately does NOT set margin-top:
   `> p:last-child` is (0,2,1) and would outrank any sane rule below trying to
   space the first link away from the form — spacing is set explicitly instead. */
.org-auth-card > p:last-child,
.org-auth-card p:has(> a) { text-align: center; font-size: 13px; }

/* The links after the form (sign up / captain / log in) are a different decision
   from the form itself. Left tight, they collided with the review-gate line under
   the signup button and the two centred lines read as one paragraph. */
.org-auth-card form + p {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-2);
}
/* Second and later links stack tight under the first, sharing its divider. */
.org-auth-card form + p ~ p {
  margin-top: 6px;
  padding-top: 0;
  border-top: 0;
}

/* The consent and review-gate lines both contain links, so they are swept up by
   the `p:has(> a)` centring rule above — which is (0,1,2) and beats a bare
   `.org-consent` (0,1,0). Every property that rule touches (text-align,
   font-size, margin-top) must therefore be restated at .org-auth-card-level
   specificity here, or it silently loses. */
.org-auth-card .org-consent,
.org-auth-card .org-gate {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-3);
}
.org-auth-card .org-consent {
  text-align: left;
  margin: 22px 0 0;
}
.org-auth-card .org-consent a {
  color: var(--text-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.org-auth-card .org-consent a:hover { color: var(--teal); }
/* Sits under the submit button: what happens after they press it. */
.org-auth-card .org-gate {
  text-align: center;
  margin: 12px 0 0;
}

/* Legal footer, on the cream rather than in the card — it belongs to the site,
   not to the form. */
.org-auth-footer {
  margin: 22px 0 0;
  font-size: 12px;
  color: var(--text-3);
  text-align: center;
}
.org-auth-footer a { color: var(--text-3); text-decoration: none; }
.org-auth-footer a:hover { color: var(--teal); text-decoration: underline; }
.org-auth-footer .org-auth-footer-sep { margin: 0 7px; opacity: .55; }

/* ---------------------------------------------------------------- Forms */

/* One form system for every organiser form — auth cards, org settings, the trip
   form. Anything that reads as a control gets the same height, radius, border
   and focus ring, so a page built out of them lines up without per-page CSS. */

form { margin: 0; }

label {
  display: block;
  font-size: 13px;
  font-weight: 560;
  color: var(--text-2);
  margin: 16px 0 0;
}

input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], input[type="date"], input[type="url"], input[type="search"],
select, textarea {
  display: block;
  width: 100%;
  min-height: var(--control-h);
  margin-top: 6px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  transition: border-color .12s, box-shadow .12s;
}

/* Focus ring in brand teal. Two layers: the border goes solid teal so the ring
   still reads for anyone who has box-shadows suppressed, and the halo carries
   the brand colour. --teal-light is fine here — a ring is decoration, not text. */
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--teal-light);
  box-shadow: 0 0 0 3px rgba(78, 151, 148, .22);
}
input::placeholder, textarea::placeholder { color: var(--text-3); }
textarea { min-height: 88px; resize: vertical; padding-top: 11px; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23626F6F' d='M6 8.5 1.5 4h9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
/* checkboxes stay compact, not full-width — and must escape the 44px floor. */
input[type="checkbox"], input[type="radio"] {
  width: auto; min-height: 0; display: inline-block; margin: 0 6px 0 0; box-shadow: none;
  accent-color: var(--teal);
}

/* Sections inside a form. The default fieldset chrome — a border box with the
   legend notched into it — fights the card it already sits inside: two nested
   frames around one group of fields. Strip it to a rule-less block and let the
   legend do the separating. */
fieldset {
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0 0 26px;
  background: none;
}
fieldset + fieldset { border-top: 1px solid var(--border-2); padding-top: 20px; }
fieldset:last-of-type { margin-bottom: 0; }

/* Legends read as small-caps section labels — the style the signup's
   "YOUR ORGANISATION" was already reaching for with its uppercase legend. */
legend {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  font-size: 11.5px;
  font-weight: 680;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-3);
}
/* The first control after a legend supplies its own top margin; without this the
   legend and the label below it collide at the 16px label margin. */
fieldset > legend + label { margin-top: 12px; }

/* Form-level aside (".you can edit this later") — quieter than body copy, sits
   between the last field and the CTA. */
.org-auth-card .org-hint {
  margin: 22px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-3);
}

/* Field-level helper text (password rules, format hints). */
.org-field-hint {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--text-3);
}

/* Password field with a show/hide toggle. The input keeps the full control box;
   the button is an unstyled text affordance parked inside its right edge, so it
   must opt out of every base-button rule. */
.org-password { position: relative; display: block; }
.org-password input { padding-right: 66px; }
.org-password-toggle {
  position: absolute;
  right: 1px;
  bottom: 1px;
  height: calc(var(--control-h) - 2px);
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--teal);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 620;
  cursor: pointer;
}
.org-password-toggle:hover { background: none; color: var(--teal-hover); }
.org-password-toggle:focus-visible {
  outline: 2px solid var(--teal-light);
  outline-offset: -2px;
  box-shadow: none;
}

small { color: var(--text-3); font-size: 12.5px; display: inline-block; margin-top: 6px; }
code {
  background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 5px;
  padding: 1px 5px; font-size: 12.5px; color: var(--text-2);
}

/* ---------------------------------------------------------------- Buttons */

button, input[type="submit"], .org-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px;
  font-family: inherit; font-size: 13.5px; font-weight: 580; line-height: 1;
  color: #fff; background: var(--teal);
  border: 1px solid var(--teal); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm); cursor: pointer;
  transition: background .12s, border-color .12s, transform .04s;
}
button:hover, input[type="submit"]:hover, .org-btn:hover { background: var(--teal-hover); border-color: var(--teal-hover); }
button:active { transform: translateY(.5px); }
button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(78, 151, 148, .40); }

/* Primary CTAs sit at the same 44px as the inputs above them. Dense in-table
   action buttons deliberately do NOT inherit this — see the `td button` override. */
.org-auth-card form button[type="submit"], .org-btn-block {
  width: 100%;
  min-height: var(--control-h);
  margin-top: 22px;
  padding: 10px 16px;
  font-size: 14.5px;
  font-weight: 620;
}
/* The password toggle lives inside a form in the auth card but is not a CTA. */
.org-auth-card form .org-password-toggle { width: auto; margin-top: 0; }

/* Secondary/destructive action buttons — opt-in via class, added only where safe */
.org-btn-secondary { color: var(--text); background: var(--surface); border-color: var(--border); }
.org-btn-secondary:hover { background: var(--surface-2); border-color: var(--text-3); }
.org-btn-danger { color: var(--danger); background: var(--danger-050); border-color: transparent; }
.org-btn-danger:hover { background: #F6DEDC; }

/* ---------------------------------------------------------------- Tables */

/* Wide tables scroll INSIDE this box. Without it the overflow belongs to the page,
   and on a phone the whole layout — nav and all — slides sideways. */
.org-tablewrap { overflow-x: auto; margin: 8px 0 20px; }
.org-tablewrap > table { margin: 0; }

/* "Name must never be separated from action buttons at any width." Below 768px the
   card layout guarantees that. At or above it, a 7-column table can still be wider
   than its wrapper — so the first column is pinned while the rest scrolls under it,
   keeping the name on screen when the reader scrolls out to the buttons. */
@media (min-width: 768px) {
  .org-cards thead th:first-child,
  .org-cards tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
  }
  .org-cards tbody td:first-child { background: var(--surface); }
  .org-cards thead th:first-child { background: var(--surface-2); }
  .org-cards tbody tr:hover td:first-child { background: var(--surface-2); }
}


table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin: 8px 0 20px;
  font-size: 13.5px;
}
thead th {
  text-align: left;
  font-size: 11px; font-weight: 640; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-3);
  background: var(--surface-2);
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-2);
  color: var(--text-2);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--surface-2); }
tbody td:first-child { color: var(--text); font-weight: 520; }
/* action cells: keep inline forms/buttons tidy */
td form { display: inline-flex; }
td form + form, td a + a, td a + form, td form + a { margin-left: 8px; }
td button { padding: 6px 11px; font-size: 12.5px; }
td input[type="text"] {
  display: inline-block; width: auto; min-height: 0; margin: 0 6px 0 0; padding: 6px 9px; font-size: 13px;
}
table img { border-radius: var(--radius-sm); object-fit: cover; vertical-align: middle; margin-right: 8px; border: 1px solid var(--border-2); }

/* ---------------------------------------------------------------- Cards / sections */

section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin: 0 0 20px;
  box-shadow: var(--shadow-sm);
}
section > h2:first-child { margin-top: 0; }
section table { border: none; box-shadow: none; border-radius: 0; margin-bottom: 0; }
section table thead th { background: transparent; }

/* ---------------------------------------------------------------- Badges / banners */

.badge-paused, .lock-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 600; line-height: 1;
  padding: 3px 8px; border-radius: var(--radius-pill);
  vertical-align: middle;
}
.badge-paused { background: var(--warn-050); color: var(--warn); }
.lock-badge { background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); }

/* Trip status text in tables reads as a subtle pill */
td .badge-paused { margin-left: 6px; }

.banner, .banner-paused {
  border-radius: var(--radius);
  padding: 12px 16px;
  margin: 0 0 20px;
  font-size: 13.5px;
  border: 1px solid transparent;
}
.banner { background: var(--warn-050); border-color: #F0E2C2; color: var(--warn); }
.banner p { margin: 0; }
.banner-paused { background: var(--warn-050); border-color: #F0E2C2; color: var(--warn); font-weight: 500; }
.banner-paused a { color: var(--teal-hover); font-weight: 600; }

.error {
  background: var(--danger-050); border: 1px solid #F1CFCC; color: var(--danger);
  padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px; margin: 0 0 16px; font-weight: 500;
}

/* ---------------------------------------------------------------- Dashboard helpers */

.org-switcher { margin: 0 0 16px; }
.org-switcher label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 560; color: var(--text-2); }
.org-switcher select { display: inline-block; width: auto; min-width: 220px; margin: 0; }

.create-trip-section { margin: 4px 0 18px; color: var(--text-2); }
.create-trip-section p { margin: 0; }

/* Dashboard toolbar: switcher (left) + primary actions (right) */
.org-toolbar { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 0 0 16px; }
.org-toolbar-left, .org-toolbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.org-toolbar .org-switcher { margin: 0; }
.org-toolbar-right a.org-btn { color: #fff; }
.org-toolbar-right a.org-btn:hover { color: #fff; text-decoration: none; }

/* Quiet footer row of secondary links (manage captains / join) */
.org-linkrow { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 18px 0 0; font-size: 13px; }
.org-linkrow a { color: var(--text-2); }
.org-linkrow a:hover { color: var(--teal); }

/* The dashboard's top utility links (Join / Manage captains) render as a quiet toolbar */
.org-content > p > a { font-weight: 520; }

/* “Back to dashboard” trailing link */
.org-content > p:last-child > a { color: var(--text-3); font-size: 13px; }
.org-content > p:last-child > a:hover { color: var(--teal); }

/* ---------------------------------------------------------------- Chat list */

.org-content ul { list-style: none; padding: 0; margin: 8px 0 20px; }
.org-content ul li {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 11px 14px; margin-bottom: 8px; font-size: 13.5px; color: var(--text-2);
}
.org-content ul li strong { color: var(--text); font-weight: 600; margin-right: 4px; }
.org-content ul li form { display: inline-flex; margin-left: 8px; }
.org-content ul li em { color: var(--text-3); }

/* ---------------------------------------------------------------- Trip form split (keeps trip_preview.css layout, tidies the form column) */

.tp-lock-warn {
  background: var(--warn-050); border: 1px solid #F0E2C2; color: var(--warn);
  padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px; margin: 4px 0 14px;
}
.tp-form-col fieldset label { margin-top: 12px; }

/* ------------------------------------------------- Photo / logo upload widget

   trips/admin/photos_widget.css defines these classes for the Django-admin trip
   form, but it is NOT loaded on the organiser pages — captain_profile and
   org_settings pull in organiser.css and nothing else. Unstyled, .tp-thumb had no
   dimensions at all, so the avatar rendered at whatever pixel size the upload
   happened to be. Owned here for the pages that actually use it. */

.captain-photo-panel { margin: 0 0 24px; }
.tp-image { max-width: 280px; }
.captain-photo-panel .tp-image { margin: 0 auto; text-align: center; }

.tp-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.captain-photo-panel .tp-grid { justify-content: center; margin-bottom: 12px; }
.captain-photo-panel .tp-grid:empty { display: none; }

/* Fixed box, cover-cropped: a portrait and a panorama land the same size. */
.tp-thumb {
  position: relative;
  width: 120px;
  height: 120px;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--teal-050);
}
.captain-photo-panel .tp-thumb { border-radius: 50%; }
.tp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tp-dropzone {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 14px;
  text-align: center;
  background: var(--surface-2);
}
/* .org-btn-ghost is full-width and left-aligned for the sidebar log-out button; the
   pick button inside a centred dropzone wants neither. */
.tp-dropzone .org-btn-ghost { width: auto; text-align: center; }

/* An inline hint, NOT an alert box. This element is always in the DOM because the
   upload script writes into it, so wearing the generic .error class (padding, border,
   filled --danger-050 background) meant every visit rendered an empty pink slab under
   the upload button. :empty keeps it out of the layout until it has something to say. */
.tp-error { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--danger); }
.tp-error:empty { display: none; }

/* ---------------------------------------------------------------- Responsive */

/* Desktop only: switch the mobile toggle off entirely, so it is neither focusable
   nor able to affect the panel. It cannot be display:none in the base rule — that
   would take the checkbox out of the tab order on phones too.

   The selector must out-specify the shared control rule. `input[type="checkbox"]`
   in the form system is (0,1,1) and sets display:inline-block; a bare
   `.org-navtoggle-box` is (0,1,0) and silently loses, leaving an invisible but
   still tabbable checkbox on desktop — a focus stop on nothing. (It computes as
   `block` rather than `inline-block` because position:absolute blockifies it,
   which is why this does not look like a display conflict at first glance.) */
@media (min-width: 768px) {
  input[type="checkbox"].org-navtoggle-box { display: none; }
}

/* ── Below 768px ────────────────────────────────────────────────────────────
   The sidebar stops being a column. It becomes a sticky top bar carrying the
   brand and a Menu button; everything else collapses behind that button. */
@media (max-width: 767px) {
  .org-shell { flex-direction: column; }
  .org-sidebar {
    width: 100%;
    flex: 0 0 auto;
    height: auto;
    position: sticky;
    top: 0;
    z-index: 30;
    padding: 10px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .org-sidebar-top .org-brand { padding: 0; }

  .org-navtoggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 40px;
    padding: 8px 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-2);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
  }
  .org-navtoggle:hover { color: var(--text); border-color: var(--text-3); }
  /* Three bars from one element: the middle is the span, the other two its pseudos. */
  .org-navtoggle-bars,
  .org-navtoggle-bars::before,
  .org-navtoggle-bars::after {
    display: block; width: 16px; height: 2px; border-radius: 1px; background: currentColor;
  }
  .org-navtoggle-bars { position: relative; }
  .org-navtoggle-bars::before { content: ""; position: absolute; top: -5px; }
  .org-navtoggle-bars::after { content: ""; position: absolute; top: 5px; }
  /* The checkbox is invisible, so its focus ring has to be drawn on the label. */
  .org-navtoggle-box:focus-visible + .org-sidebar-top .org-navtoggle {
    outline: 2px solid var(--teal-light);
    outline-offset: 2px;
  }

  .org-sidebar-panel { display: none; padding-top: 12px; }
  .org-navtoggle-box:checked ~ .org-sidebar-panel { display: flex; }
  .org-sidebar-footer { margin-top: 14px; }
  .org-btn-ghost { width: auto; }

  .org-content { padding: 20px 16px 48px; }

  /* ── Requests: one card per request ──────────────────────────────────────
     The <tr> becomes the card, so the traveller's name and the buttons that act
     on them stay in the same element — the association survives the layout
     change instead of being rebuilt by it. */
  /* NOTE: .org-tablewrap keeps overflow-x:auto here. It is tempting to set it
     visible on the grounds that cards never need to scroll — but the wrapper is
     shared with every other organiser table, and only the requests table becomes
     cards. Releasing containment for all of them put the dashboard's trips table
     (637px at a 375px viewport) back on the page's own scrollbar. Cards are
     block-level and fit the wrapper, so auto costs them nothing. */
  .org-cards,
  .org-cards tbody,
  .org-cards tr,
  .org-cards td { display: block; width: auto; }
  .org-cards { border: 0; background: none; box-shadow: none; border-radius: 0; }
  .org-cards thead { display: none; }
  .org-cards tr {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 13px 15px;
    margin: 0 0 10px;
  }
  .org-cards tbody tr:hover td { background: transparent; }

  /* Card order: identity and the decision first, supporting detail beneath.
     Reading order alone is not enough to honour "the name must never be separated
     from the action buttons at any width" — with the bio and answers sitting
     between them, a traveller with a long bio produced a 923px card on a 667px
     phone (measured), putting Approve 890px below the name it belongs to. The four
     things the spec names as the card — name, gender, status, actions — are kept
     adjacent, so the card's head is a fixed height whatever the content does. */
  .org-cards tr { display: flex; flex-direction: column; }
  .org-cards td:first-child { order: 1; }
  .org-cards td[data-label="Gender"] { order: 2; }
  .org-cards td[data-label="Status"] { order: 3; }
  .org-cards .org-actions { order: 4; }
  .org-cards td[data-label="Bio"] { order: 5; }
  .org-cards td[data-label="Answers"] { order: 6; }
  .org-cards td[data-label="Instagram"] { order: 7; }
  /* The supporting detail reads as a second section under the decision. */
  .org-cards td[data-label="Bio"] {
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--border-2);
  }
  .org-cards td { border: 0; padding: 5px 0; }
  /* The <thead> is hidden, so each value names itself. */
  .org-cards td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: 10.5px;
    font-weight: 660;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-3);
  }
  /* The name is the card's heading and needs no label above it. */
  .org-cards td:first-child { padding-top: 0; font-size: 15px; font-weight: 640; color: var(--text); }
  .org-cards td:first-child::before { content: none; }
  .org-cards td:first-child img { border-radius: 50%; margin-right: 8px; }
  .org-cards td:empty { display: none; }

  /* Actions sit at the foot of the card, at a real tap size. */
  .org-cards .org-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border-2);
  }
  .org-cards .org-actions::before { margin-bottom: 0; width: 100%; }
  .org-cards .org-actions form { display: inline-flex; margin: 0; }
  .org-cards .org-actions button { min-height: 40px; padding: 9px 15px; font-size: 13.5px; }
}

/* Content-level rules that still want the wider breakpoint — these are about the
   trip form's two columns, not about the nav. */
@media (max-width: 860px) {
  /* trip_preview.css floors the form column at 460px, which no phone viewport can satisfy
     (393px iPhone / 412px Pixel, minus 36px of .org-content padding = 357/376px usable) —
     the floor pushed the whole page into a sideways scroll on the trip form. Let it shrink;
     the preview column is already stacked below it at this width. */
  .tp-form-col { min-width: 0; flex-basis: 100%; }
}

/* ---------------------------------------------------------------- Trip join questions

   Built out of the shared form primitives above — the text input and the select
   are the standard controls, so a question row lines up with every other field
   on the trip form without a second look. Only the row grid and the two hint
   styles are new. */

.tq-toggle {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px; font-size: 14px; font-weight: 560; color: var(--text);
}
.tq-toggle input[type="checkbox"] { margin: 0; }

.tq-hint { margin: 6px 0 0; font-size: 12.5px; color: var(--text-3); line-height: 1.5; }
.tq-hint[hidden] { display: none; }

#tq-panel { margin-top: 14px; }
#tq-panel[hidden] { display: none; }

.tq-row {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) 118px auto auto auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.tq-row > input[type="text"], .tq-row > select { margin-top: 0; }
.tq-handle { color: var(--text-3); font-size: 13px; line-height: 1; cursor: default; user-select: none; }
/* A question somebody has already answered keeps its words: the input is
   readonly, not disabled, so it still submits and still reads as its own text. */
.tq-row > input[readonly] { background: var(--surface-2); color: var(--text-2); }
.tq-row button { min-height: 36px; padding: 6px 10px; font-size: 13px; }
.tq-row button:disabled { opacity: .4; cursor: not-allowed; }
.tq-frozen { grid-column: 2 / -1; margin: 0; font-size: 12px; color: var(--text-3); }

#tq-add { margin-top: 4px; }
#tq-add:disabled { opacity: .5; cursor: not-allowed; }

@media (max-width: 860px) {
  .tq-row { grid-template-columns: minmax(0, 1fr) auto auto auto; }
  .tq-handle { display: none; }
  .tq-row > select { grid-column: 1 / -1; }
  .tq-frozen { grid-column: 1 / -1; }
}

/* Answers on a request row: a definition list, so the question a traveller
   answered is always attached to the answer rather than to a column header. */
.org-answers { margin: 0; font-size: 13px; }
.org-answers dt { font-weight: 600; color: var(--text-2); margin-top: 6px; }
.org-answers dt:first-child { margin-top: 0; }
.org-answers dd { margin: 2px 0 0; color: var(--text); }
.org-answers-retired { font-weight: 400; color: var(--text-3); }