/* ============================================================
   KreweHub — "Regalia" design system
   Boutique Mardi Gras: deep aubergine, one antique gold accent,
   warm ivory paper. Fraunces + DM Sans. Depth on every surface.
   ============================================================ */

:root {
  /* Anchor — deep desaturated aubergine */
  --ink:        #1A1222;
  --plum:       #241634;
  --plum-2:     #2F1F44;
  --plum-line:  #3D2B54;

  /* Warm neutrals */
  --cream:      #F5EDDE;
  --ivory:      #F8F2E7;
  --sand:       #E7DAC2;
  --taupe:      #B8A789;

  /* THE accent — antique gold (only metallic) */
  --gold:       #C49B54;
  --gold-dk:    #A9823F;
  --gold-soft:  rgba(196,155,84,.14);
  --gold-glow:  rgba(196,155,84,.40);

  /* Text */
  --text:       #2A2032;
  --text-soft:  #675F58;
  --text-dim:   #998AA0;

  /* Status — functional only, never decoration */
  --paid:       #6E8A5E;
  --paid-bg:    rgba(110,138,94,.16);
  --due:        #B5703A;
  --due-bg:     rgba(181,112,58,.16);
  --past:       #8E3B3F;
  --past-bg:    rgba(142,59,63,.16);

  /* Type */
  --font-head:  'Fraunces', Georgia, serif;
  --font-body:  'DM Sans', system-ui, -apple-system, sans-serif;

  /* Geometry */
  --r-sm: 10px;
  --r:    14px;
  --r-lg: 22px;
  --r-xl: 30px;

  /* Shadows — warm, soft, layered */
  --sh-1: 0 1px 2px rgba(26,18,34,.06), 0 2px 8px rgba(26,18,34,.05);
  --sh-2: 0 4px 14px -6px rgba(26,18,34,.18), 0 12px 32px -14px rgba(26,18,34,.22);
  --sh-3: 0 18px 50px -18px rgba(26,18,34,.45);
  --sh-gold: 0 8px 24px -10px var(--gold-glow);

  --container: 1180px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.62;
  color: var(--text);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--gold-soft); }

/* ---------- Depth helpers (never a flat dark fill) ---------- */
.bg-dark {
  background:
    radial-gradient(120% 78% at 50% -8%, rgba(196,155,84,.12), transparent 58%),
    radial-gradient(120% 120% at 50% 0%, #301D45 0%, var(--ink) 56%);
  color: var(--ivory);
  position: relative;
}
.grain { position: relative; }
.grain::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: .5; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.bg-dark > * { position: relative; z-index: 1; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; line-height: 1.08;
  letter-spacing: -.015em; color: var(--text); font-optical-sizing: auto; }
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4,
.card-dark h1, .card-dark h2, .card-dark h3, .card-dark h4 { color: var(--ivory); }
h1 { font-size: clamp(2.5rem, 6vw, 4.3rem); line-height: 1.02; letter-spacing: -.022em; }
h2 { font-size: clamp(1.85rem, 4vw, 2.85rem); }
h3 { font-size: 1.4rem; letter-spacing: -.01em; }
h4 { font-size: 1.12rem; font-weight: 600; }
p { color: inherit; }

.eyebrow {
  font-family: var(--font-body); font-weight: 600; font-size: .76rem;
  text-transform: uppercase; letter-spacing: .2em; color: var(--gold);
  display: inline-flex; align-items: center; gap: .6rem;
}
.eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft);
}
.lead { font-size: clamp(1.08rem, 1.6vw, 1.28rem); line-height: 1.6; color: var(--text-soft); }
.bg-dark .lead, .card-dark .lead { color: rgba(248,242,231,.9); }
.serif { font-family: var(--font-head); }
.italic { font-style: italic; }
.muted { color: var(--text-soft); }
.bg-dark .muted, .card-dark .muted { color: rgba(248,242,231,.72); }
.gold { color: var(--gold); }

/* ---------- Wordmark + crown ---------- */
.wordmark { font-family: var(--font-head); font-weight: 600; font-size: 1.32rem;
  letter-spacing: -.02em; color: var(--ink); display: inline-flex; align-items: center; gap: 0; }
.wordmark .crown { margin-right: .42rem; }
.bg-dark .wordmark, .wordmark.on-dark { color: var(--ivory); }
.wordmark b { color: var(--gold); font-weight: 600; }   /* "Hub" — same word, gold only */
.crown { width: 1.5em; height: 1.5em; color: var(--gold); flex: none; }
/* Kelly, 2026-10-03: "remove this crown logo from everywhere". The wordmark stands alone; this catches any copy left behind. */
.crown { display: none !important; }

/* ---------- Buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: .55rem; padding: .92rem 1.5rem; border-radius: 999px; font-weight: 600;
  font-size: .98rem; letter-spacing: .06em; text-transform: uppercase; transition: transform .25s var(--ease),
  box-shadow .25s var(--ease), background .25s var(--ease); min-height: 52px;
  overflow: hidden; white-space: nowrap; }
.btn:active { transform: translateY(1px); }

.btn-gold { color: #2A1B07;
  background: linear-gradient(176deg, #DCB66E 0%, var(--gold) 52%, #B98F47 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(120,86,28,.4),
    var(--sh-gold); }
.btn-gold:hover { transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 12px 30px -10px var(--gold-glow); }
.btn-gold::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg); transition: left .6s var(--ease); }
.btn-gold:hover::after { left: 130%; }

/* The krewe's green, the same one the court Page badge and the float stickers wear. */
.btn-green { color: #F8F2E7;
  background: linear-gradient(180deg, #168F45, #0B5A2E);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 26px -14px rgba(11,90,46,.75); }
.btn-green:hover { transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 14px 32px -12px rgba(11,90,46,.6); }

.btn-ghost { color: var(--ivory); border: 1px solid rgba(248,242,231,.28);
  background: rgba(248,242,231,.03); backdrop-filter: blur(4px); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn-dark { background: var(--ink); color: var(--ivory); box-shadow: var(--sh-2); }
.btn-dark:hover { transform: translateY(-2px); background: #221634; }
.btn-quiet { padding: .5rem .2rem; min-height: 0; color: var(--text-soft); font-weight: 600; }
.btn-quiet:hover { color: var(--gold); }
/* Export: one considered look on every screen that can hand over its data. A paper pill with a gold
   hairline and a one-color icon that follows the text; it turns gold in the hand. */
.btn-export { background: #FCF8F1; color: var(--plum); border: 1px solid rgba(196,155,84,.62); font-weight: 700;
  box-shadow: 0 1px 2px rgba(26,18,34,.05), 0 10px 22px -18px rgba(26,18,34,.45); gap: .5rem; }
.btn-export.btn-sm, .btn-export { padding: .55rem 1.05rem .55rem .85rem; min-height: 40px; font-size: .78rem; letter-spacing: .08em; }
.btn-export::before { content: ""; width: 15px; height: 15px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4v11'/><path d='M8 11l4 4 4-4'/><path d='M4 17v2a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-2'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4v11'/><path d='M8 11l4 4 4-4'/><path d='M4 17v2a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-2'/></svg>") center / contain no-repeat; }
.btn-export:hover { background: linear-gradient(176deg, #DCB66E 0%, var(--gold) 52%, #B98F47 100%); border-color: transparent;
  color: #2A1B07; transform: translateY(-2px); box-shadow: 0 12px 30px -12px var(--gold-glow); }
.btn-sm { padding: .6rem 1.05rem; min-height: 42px; font-size: .9rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* ---------- Layout primitives ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.2rem, 4vw, 2.5rem); }
.section { padding-block: clamp(3.5rem, 9vw, 7rem); }
.stack > * + * { margin-top: 1.1rem; }
.stack-sm > * + * { margin-top: .55rem; }
.row { display: flex; gap: 1rem; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.center { text-align: center; }
.grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.divider { height: 1px; background: var(--plum-line); border: 0; opacity: .5; }
.divider.light { background: rgba(42,32,50,.1); }

/* ---------- Cards ---------- */
.card { background: var(--ivory); border: 1px solid rgba(42,32,50,.07);
  border-radius: var(--r-lg); padding: clamp(1.3rem, 2.5vw, 1.9rem); box-shadow: var(--sh-1);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.card.lift:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.card-dark { background: linear-gradient(168deg, var(--plum-2), var(--plum));
  border: 1px solid var(--plum-line); border-radius: var(--r-lg); color: var(--ivory);
  padding: clamp(1.3rem, 2.5vw, 1.9rem); box-shadow: var(--sh-3); }
.card-pad-lg { padding: clamp(1.6rem, 3vw, 2.6rem); }

/* ---------- Float visual slot (member "Your float" card) ---------- */
/* Photo when one exists (set --float-photo), crest fallback underneath when it doesn't. */
.float-card { --fpad: clamp(1.6rem, 3vw, 2.6rem); position: relative; overflow: hidden;
  padding: var(--fpad); }
.float-visual { position: relative; height: 200px; overflow: hidden;
  margin: calc(-1 * var(--fpad)) calc(-1 * var(--fpad)) 1.4rem; }
.float-visual::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .85; }
/* fallback crest layer */
.float-crest { position: absolute; inset: 0;
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(196,155,84,.28), transparent 60%),
    linear-gradient(168deg, var(--plum-2), #1d1230); }
.float-crest svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* photo layer, only painted when --float-photo is provided */
.float-photo { position: absolute; inset: 0; background-size: cover; background-position: center;
  background-image: var(--float-photo, none); }
.float-photo::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18,11,34,.05) 0%, transparent 32%, rgba(18,11,34,.55) 100%); }
.float-card:not([style*="--float-photo"]) .float-photo:not(.float-photo-demo),
.float-card[style*="--float-photo: none"] .float-photo:not(.float-photo-demo) { display: none; }
.float-chip { position: absolute; left: 16px; bottom: 16px; z-index: 2;
  font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); background: linear-gradient(176deg, #DCB66E, var(--gold));
  padding: .34rem .72rem; border-radius: 999px; box-shadow: 0 6px 16px -8px rgba(0,0,0,.6); }
/* demo stand-in "photo" for the sample krewe until a real upload replaces --float-photo */
.float-photo.float-photo-demo { background-image:
    radial-gradient(60% 80% at 24% 78%, rgba(231,182,110,.55), transparent 60%),
    radial-gradient(45% 70% at 70% 60%, rgba(196,155,84,.42), transparent 62%),
    radial-gradient(circle at 20% 74%, rgba(255,224,160,.9) 0 1.4px, transparent 2px),
    radial-gradient(circle at 34% 66%, rgba(255,224,160,.8) 0 1.2px, transparent 2px),
    radial-gradient(circle at 52% 78%, rgba(255,224,160,.85) 0 1.6px, transparent 2px),
    radial-gradient(circle at 66% 70%, rgba(255,224,160,.7) 0 1.2px, transparent 2px),
    radial-gradient(circle at 80% 76%, rgba(255,224,160,.8) 0 1.4px, transparent 2px),
    radial-gradient(120% 140% at 50% 120%, #3a2450 0%, #1b1130 55%, #120b22 100%); }

/* hairline gold top accent for featured cards */
.card-feature { position: relative; overflow: hidden; }
.card-feature::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .8; }

/* ---------- Badges / pills ---------- */
.pill { display: inline-flex; align-items: center; gap: .4rem; padding: .32rem .75rem;
  border-radius: 999px; font-size: .78rem; font-weight: 600; letter-spacing: .02em;
  background: var(--gold-soft); color: var(--gold-dk); }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill-paid { background: var(--paid-bg); color: var(--paid); }
.pill-due  { background: var(--due-bg);  color: var(--due); }
.pill-past { background: var(--past); color: var(--ivory); }
.pill-ghost { background: transparent; border: 1px solid var(--plum-line); color: var(--taupe); }

/* ---------- Stat / KPI ---------- */
.kpi { display: flex; flex-direction: column; gap: .25rem; }
.kpi .num { font-family: var(--font-head); font-size: clamp(1.9rem, 3vw, 2.6rem);
  font-weight: 600; line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
.kpi .lbl { font-size: .82rem; color: var(--text-soft); letter-spacing: .04em; }
.bg-dark .kpi .lbl, .card-dark .kpi .lbl { color: rgba(248,242,231,.6); }

/* ---------- Fields ---------- */
.field { display: block; }
.field > span { display: block; font-size: .82rem; font-weight: 600; color: var(--text-soft);
  margin-bottom: .4rem; letter-spacing: .02em; }
/* A search and its clear button. The wrapper carries the layout so a flex bar sizes it the same
   way it used to size the bare input. */
.srch { position: relative; display: flex; align-items: center; min-width: 0; flex: 1 1 auto; }
.srch > .input { width: 100%; }
.srch-x { position: absolute; right: .45rem; display: grid; place-items: center; width: 28px; height: 28px;
  border: 0; border-radius: 99px; background: rgba(42,32,50,.06); color: var(--text-soft);
  cursor: pointer; padding: 0; transition: background .15s, color .15s; }
.srch-x:hover { background: rgba(42,32,50,.12); color: var(--text); }
.srch-x svg { width: 13px; height: 13px; }
.srch-x[hidden] { display: none; }

.input { width: 100%; padding: .85rem 1rem; border-radius: var(--r-sm);
  border: 1px solid rgba(42,32,50,.16); background: #fff; transition: border .2s, box-shadow .2s;
  min-height: 50px; }
/* Fields wake up softly: a faint warm tint, a whisper of gold, never a hard edge that snaps. */
.input:hover { border-color: rgba(42,32,50,.26); }
.input:focus { outline: 0; border-color: rgba(196,155,84,.55); background-color: #FFFDF8;
  box-shadow: 0 0 0 4px var(--gold-soft), 0 8px 20px -14px rgba(26,18,34,.45); }
.bg-dark .input { background: rgba(248,242,231,.06); border-color: var(--plum-line); color: var(--ivory); }

/* Dropdowns. The browser's own arrow is the thing that reads cheap, so we draw our own: an
   antique-gold chevron in a soft well, with room around it so the label never crowds it. */
select.input {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 3rem; cursor: pointer; font: inherit; color: var(--text);
  text-overflow: ellipsis;
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9' fill='none' stroke='%23A9823F' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.6 7 7.4l6-5.8'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #fff 0%, #FDFBF6 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: right 1.05rem center, 0 0;
  background-size: 12px 8px, auto;
}
select.input:hover { background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9' fill='none' stroke='%23C49B54' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.6 7 7.4l6-5.8'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #fff 0%, #FBF6EC 100%); }
select.input:focus { background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9' fill='none' stroke='%23C49B54' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.6 7 7.4l6-5.8'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #fff 0%, #FFFDF8 100%); }
select.input option { color: var(--text); background: #fff; }
select.input:disabled { cursor: default; opacity: .55; }
.bg-dark select.input, .card-dark select.input { color: var(--ivory);
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9' fill='none' stroke='%23C49B54' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.6 7 7.4l6-5.8'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(248,242,231,.08), rgba(248,242,231,.04)); }

/* ---------- App shell (portals) ---------- */
.app { display: grid; grid-template-columns: 270px 1fr; min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
  padding: 1.4rem 1.1rem; gap: .3rem; overflow-y: auto; }
.sidebar .brand { display: flex; align-items: center; gap: 0; padding: .4rem .6rem 1.2rem; }
.sidebar .brand .crown { margin-right: .42rem; }
.nav-group-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .18em;
  color: var(--taupe); padding: 1rem .85rem .35rem; }
.nav-item { display: flex; align-items: center; gap: .8rem; padding: .78rem .85rem;
  border-radius: var(--r-sm); color: rgba(248,242,231,.74); font-weight: 500; font-size: .96rem;
  transition: background .2s, color .2s; cursor: pointer; }
.nav-item svg { width: 19px; height: 19px; flex: none; opacity: .85; }
.nav-item:hover { background: rgba(248,242,231,.06); color: var(--ivory); }
.nav-item.active { background: rgba(196,155,84,.14); color: var(--ivory); }
.nav-item.active svg { color: var(--gold); opacity: 1; }
.nav-item .badge { margin-left: auto; background: var(--gold); color: var(--ink);
  font-size: .7rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; }
.sidebar .foot { margin-top: auto; padding-top: 1rem; }
/* The side menu, sleek (Kelly, 2026-10-03: option A, "make it tighter", "think sleek and easy to use"):
   the same readable type, no dead space, rows still a comfortable 42px to tap, and no gray scroll bar.
   A soft fade at the bottom says there is more menu below and leaves once you reach the end; one at the
   top appears once you have scrolled down. kh-controls.js adds the two fades and keeps them honest. */
.sidebar { padding: 1rem 1.1rem 1.4rem; gap: .1rem; scrollbar-width: none; }
.sidebar::-webkit-scrollbar { display: none; }
.sidebar .brand { padding: .3rem .6rem .35rem; }
.sidebar .brand + .nav-group-label, .sidebar .brand + .side-fade + .nav-group-label { padding-top: .5rem; }
.sidebar .nav-group-label { padding: .8rem .85rem .25rem; }
.sidebar .nav-item { padding: .6rem .85rem; min-height: 42px; }
.sidebar .foot { padding-top: .8rem; }
.side-fade { position: sticky; flex: none; height: 52px; z-index: 3; pointer-events: none; transition: opacity .25s; }
.side-fade.top { top: -1rem; margin-bottom: -52px; opacity: 0;
  background: linear-gradient(to bottom, rgba(36,22,52,.97), rgba(36,22,52,0)); }
.side-fade.bottom { bottom: -1.4rem; margin-top: -52px;
  background: linear-gradient(to bottom, rgba(26,18,34,0), rgba(26,18,34,.97)); }
.sidebar.scrolled .side-fade.top { opacity: 1; }
.sidebar.at-end .side-fade.bottom { opacity: 0; }
/* A menu icon answers a click (Kelly, 2026-10-03: "Could they animate when you click on them?"): a quick pop; the
   float rolls forward, the beads and the bell swing. Nothing moves for anyone who asks their device for less motion. */
.nav-item svg { transform-origin: 50% 50%; }
.nav-item.kh-tap svg { animation: kh-pop .5s cubic-bezier(.3, 1.5, .5, 1); }
.nav-item.kh-tap svg[data-icon="floats"] { animation: kh-roll .6s cubic-bezier(.3, 1.3, .5, 1); }
.nav-item.kh-tap svg[data-icon="throws"], .nav-item.kh-tap svg[data-icon="push"] { transform-origin: 50% 12%; animation: kh-swing .7s ease-out; }
@keyframes kh-pop { 0% { transform: none; } 35% { transform: scale(1.28) rotate(-8deg); } 70% { transform: scale(.94) rotate(3deg); } 100% { transform: none; } }
@keyframes kh-roll { 0% { transform: none; } 40% { transform: translateX(3px) rotate(2deg); } 70% { transform: translateX(-1px); } 100% { transform: none; } }
@keyframes kh-swing { 0% { transform: none; } 25% { transform: rotate(14deg); } 55% { transform: rotate(-10deg); } 80% { transform: rotate(4deg); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .nav-item.kh-tap svg { animation: none !important; } }
.userchip { display: flex; align-items: center; gap: .7rem; padding: .6rem .7rem; border-radius: var(--r);
  background: rgba(248,242,231,.05); border: 1px solid var(--plum-line); }
.avatar { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 600; color: var(--ink);
  background: linear-gradient(168deg, #DCB66E, var(--gold)); }

.main { background: var(--cream); min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1rem;
  padding: 1rem clamp(1.2rem, 3vw, 2.2rem); background: rgba(245,237,222,.82);
  backdrop-filter: blur(12px); border-bottom: 1px solid rgba(42,32,50,.08); }
.topbar h1 { font-size: 1.5rem; }
.topbar .spacer { flex: 1; }
.menu-btn { display: none; width: 44px; height: 44px; border-radius: var(--r-sm);
  align-items: center; justify-content: center; border: 1px solid rgba(42,32,50,.14); }
.tb-export, .tb-menu { display: none; }   /* the floating header's export slot, shown in the 900px block */
.content { padding: clamp(1.4rem, 3vw, 2.4rem); max-width: 1120px; }

.section-pane { display: none; }
.section-pane.active { display: block; animation: fade .4s var(--ease); }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Tables ---------- */
.table-wrap { background: var(--ivory); border: 1px solid rgba(42,32,50,.08); border-radius: var(--r-lg);
  overflow-x: auto; -webkit-overflow-scrolling: touch; box-shadow: var(--sh-1); }
table.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--text-soft); font-weight: 700; padding: .9rem 1.1rem; background: rgba(42,32,50,.03);
  border-bottom: 1px solid rgba(42,32,50,.08); }

/* A sortable header is a button with a quiet caret; it wakes on hover, fills when it is the sort. */
.table th.th-sort { padding: 0; }
.table th.th-sort button { display: inline-flex; align-items: center; gap: .4rem; width: 100%;
  background: none; border: 0; cursor: pointer; font: inherit; color: inherit; letter-spacing: inherit;
  text-transform: inherit; padding: .75rem 1.1rem; transition: color .15s; }
.table th.th-sort[style*="right"] button { justify-content: flex-end; }
.table th.th-sort button:hover { color: var(--gold-dk); }
.table th.th-sort button i { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-bottom: 5px solid currentColor; opacity: .28; transition: opacity .15s, transform .15s; }
.table th.th-sort:hover button i { opacity: .55; }
.table th.th-sort.on button { color: var(--gold-dk); }
.table th.th-sort.on button i { opacity: 1; }
.table th.th-sort.desc button i { transform: rotate(180deg); }
.table td { padding: .95rem 1.1rem; border-bottom: 1px solid rgba(42,32,50,.06); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background .15s; }
.table tbody tr:hover { background: rgba(196,155,84,.05); }
.cell-name { display: flex; align-items: center; gap: .7rem; font-weight: 600; }
.cell-name .avatar { width: 32px; height: 32px; font-size: .8rem; }

/* ---------- Progress ---------- */
.bar { height: 9px; border-radius: 999px; background: rgba(42,32,50,.1); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), #DCB66E); }
.bar.on-dark { background: rgba(248,242,231,.12); }

/* ---------- Ride / float assignment board ---------- */
.board { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.float { background: var(--ivory); border: 1px solid rgba(42,32,50,.1); border-radius: var(--r);
  padding: 1rem; min-height: 160px; transition: border .2s, background .2s, box-shadow .2s; }
.float.over { border-color: var(--gold); background: var(--gold-soft); box-shadow: var(--sh-gold); }
.float .float-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: .7rem; }
.float .float-h .name { font-family: var(--font-head); font-weight: 600; }
.float .seats { font-size: .76rem; color: var(--text-soft); }
.float.full .seats { color: var(--paid); font-weight: 600; }
.rider { display: flex; align-items: center; gap: .55rem; padding: .5rem .6rem; border-radius: var(--r-sm);
  background: #fff; border: 1px solid rgba(42,32,50,.08); margin-bottom: .45rem; cursor: grab;
  font-size: .9rem; font-weight: 500; transition: box-shadow .15s, transform .1s; }
.rider:hover { box-shadow: var(--sh-1); }
.rider.dragging { opacity: .4; }
.rider .avatar { width: 26px; height: 26px; font-size: .72rem; }
.rider.sub { border-style: dashed; border-color: var(--due); }
.pool { background: rgba(42,32,50,.03); border: 1px dashed rgba(42,32,50,.2); border-radius: var(--r);
  padding: 1rem; }

/* tap-to-assign (works on touch where drag does not) */
.rider.selected { border-color: var(--gold); background: var(--gold-soft);
  box-shadow: 0 0 0 3px var(--gold-soft), var(--sh-1); }
body.seating .float { cursor: pointer; }
body.seating .float .drop { outline: 2px dashed rgba(196,155,84,.55); outline-offset: 5px; border-radius: var(--r-sm); }
body.seating .pool { border-color: var(--gold); border-style: dashed; }
.seat-bar { position: fixed; left: 50%; bottom: 1.2rem; z-index: 150; display: flex; align-items: center;
  gap: .9rem; padding: .7rem .7rem .7rem 1.3rem; border-radius: 999px; background: var(--ink); color: var(--ivory);
  box-shadow: var(--sh-3); max-width: calc(100vw - 1.6rem); transform: translateX(-50%) translateY(150%);
  transition: transform .32s var(--ease); }
.seat-bar.show { transform: translateX(-50%) translateY(0); }
.seat-bar .txt { font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat-bar .txt b { color: var(--gold); font-weight: 600; }
.seat-bar .x { flex: none; padding: .6rem 1.1rem; min-height: 44px; border-radius: 999px;
  background: rgba(248,242,231,.12); color: var(--ivory); font-weight: 600; font-size: .85rem; }
.seat-bar .x:hover { background: rgba(248,242,231,.2); }

/* ---------- Modal ---------- */
.scrim { position: fixed; inset: 0; background: rgba(20,12,28,.55); backdrop-filter: blur(4px);
  display: none; place-items: center; z-index: 100; padding: 1.2rem; }
.scrim.open { display: grid; animation: fade .3s var(--ease); }
/* A tall form must never put its own Save button off the bottom of the screen. Only three modals
   carried their own max-height, so every other one (Edit a member among them) overflowed with no
   way to reach the footer: "I could correct the name, but I could not scroll down to update."
   dvh, so a phone's address bar cannot eat the last row of buttons. */
.modal { background: var(--cream); border-radius: var(--r-xl); padding: clamp(1.5rem, 4vw, 2.6rem);
  max-width: 480px; width: 100%; box-shadow: var(--sh-3); border: 1px solid rgba(255,255,255,.4);
  max-height: calc(100vh - 2.4rem); max-height: calc(100dvh - 2.4rem);
  overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.modal.wide { max-width: 720px; }

/* ---------- Toast ---------- */
.toast-wrap { position: fixed; bottom: 1.4rem; left: 50%; transform: translateX(-50%);
  z-index: 200; display: flex; flex-direction: column; gap: .6rem; align-items: center; }
.toast { display: flex; align-items: center; gap: .7rem; padding: .85rem 1.3rem; border-radius: 999px;
  background: var(--ink); color: var(--ivory); box-shadow: var(--sh-3); font-weight: 500; font-size: .94rem;
  animation: toastin .4s var(--ease); }
.toast .tick { width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: var(--ink);
  display: grid; place-items: center; flex: none; font-weight: 700; }
@keyframes toastin { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Misc ---------- */
.tag-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.icon-btn { width: 42px; height: 42px; border-radius: var(--r-sm); display: grid; place-items: center;
  border: 1px solid rgba(42,32,50,.12); transition: background .2s, border .2s; }
.icon-btn:hover { border-color: var(--gold); background: var(--gold-soft); }
.icon-btn svg { width: 19px; height: 19px; }
.list-clean { list-style: none; padding: 0; }
.check-li { display: flex; gap: .7rem; align-items: flex-start; }
.check-li .tick { color: var(--gold); flex: none; margin-top: .15rem; }
.hide { display: none !important; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .cols-3 { grid-template-columns: 1fr; }
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: 0; z-index: 60; width: 280px;
    transform: translateX(-100%); transition: transform .35s var(--ease);
    box-shadow: var(--sh-3); }
  .sidebar.open { transform: none; }
  .nav-backdrop { position: fixed; inset: 0; background: rgba(20,12,28,.5); z-index: 55; display: none; }
  .nav-backdrop.open { display: block; }

  /* Floating glass header. The bar lifts off the page as a pill that stays put while the screen scrolls
     under it: the menu left, the screen's name on the true center, the screen's export right. Both side
     slots are 44px, so the name centers whether or not the screen has anything to export. */
  .topbar { top: calc(.7rem + env(safe-area-inset-top, 0px)); z-index: 40; margin: .7rem clamp(1.4rem, 3vw, 2.4rem) 0;
    padding: .3rem; gap: .35rem; border-radius: 999px; color: var(--plum); background: rgba(252,248,241,.78);
    -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
    border: 1px solid rgba(196,155,84,.5); box-shadow: 0 12px 28px -18px rgba(26,18,34,.5);
    --ic-export: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4v11'/><path d='M8 11l4 4 4-4'/><path d='M4 17v2a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-2'/></svg>"); }
  .topbar .spacer { display: none; }
  .topbar h1 { flex: 1 1 0; min-width: 0; text-align: center; font-family: var(--font-head); font-weight: 500;
    font-size: 1.12rem; line-height: 1.2; letter-spacing: -.01em; color: var(--plum);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .menu-btn { display: flex; flex: 0 0 44px; border: 0; border-radius: 50%; color: var(--plum); transition: background .2s; }
  .menu-btn svg { width: 22px; height: 22px; }
  .tb-export { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%;
    color: var(--gold-dk); transition: background .2s, color .2s; }
  .tb-export::before, .tb-menu button::before { content: ""; flex: none; width: 18px; height: 18px; background: currentColor;
    -webkit-mask: var(--ic-export) center / contain no-repeat; mask: var(--ic-export) center / contain no-repeat; }
  .tb-export[data-none] { visibility: hidden; pointer-events: none; }
  .menu-btn:hover, .tb-export:hover, .tb-export[aria-expanded="true"] { background: rgba(196,155,84,.14); }
  .tb-export:hover, .tb-export[aria-expanded="true"] { color: var(--plum); }
  .menu-btn:focus-visible, .tb-export:focus-visible { outline: 2px solid rgba(196,155,84,.7); outline-offset: 1px; }
  .tb-menu { position: absolute; top: calc(100% + .5rem); right: 0; min-width: 13rem; padding: .35rem; border-radius: 20px;
    background: rgba(252,248,241,.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid rgba(196,155,84,.5); box-shadow: 0 22px 44px -24px rgba(26,18,34,.55); }
  .tb-menu.open { display: block; animation: fade .25s var(--ease); }
  .tb-menu button { display: flex; align-items: center; gap: .65rem; width: 100%; min-height: 44px; padding: .5rem .95rem;
    border-radius: 14px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--plum); text-align: left; }
  .tb-menu button::before { width: 15px; height: 15px; background: var(--gold-dk); }
  .tb-menu button:hover { background: rgba(196,155,84,.14); }
  /* while the header carries a screen's export, the screen's own Export buttons fold away */
  .bar-export .section-pane .btn-export, .bar-export .section-pane [data-act^="export-"] { display: none !important; }
  /* a screen heading that only repeats the name the header already carries steps aside */
  .section-pane .kh-screen-title { display: none; }
  /* anything else the bar held (the lieutenant's group switcher) sits on a line just under it */
  .bar-sub { display: flex; justify-content: center; margin: 0 0 1.1rem; }
  .bar-sub[hidden] { display: none; }
  /* a jump to a spot on the screen lands below the header, never under it */
  html:has(.app .topbar) { scroll-padding-top: 5rem; }
}
@media (max-width: 620px) {
  .cols-2, .cols-4 { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .row.actions { flex-direction: column; align-items: stretch; }
  .hide-sm { display: none !important; }
  h1 { font-size: clamp(2.1rem, 9vw, 2.8rem); }
  /* the floating header lines up with the content's edges */
  .topbar { top: calc(.6rem + env(safe-area-inset-top, 0px)); margin: .6rem .9rem 0; }
  .content { padding: 1.1rem .9rem 5.5rem; }
  /* collapse inline two-column splits, but leave tile grids (floor plan) alone */
  .grid[style*="grid-template-columns"]:not([style*="auto-fill"]) { grid-template-columns: 1fr !important; }
  /* substitute request cards stack cleanly */
  .sub-card { flex-wrap: wrap; }
  .sub-card > div[style*="flex:1"] { flex: 1 1 60%; }
  .sub-card .row { flex-basis: 100%; }
  .sub-card .row .btn { flex: 1; }
  /* board goes single column with roomy drop zones */
  .board { grid-template-columns: 1fr; }
  /* segmented control scrolls instead of squashing */
  .seg { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto; }
}