/* KreweHub · the styled select and date field that assets/kh-controls.js puts in place.
   The real <select> stays in the DOM for every script that reads it, and is hidden from view only. */

.khs { position: relative; display: block; min-width: 0; }
.khs > select {
  position: absolute; opacity: 0; pointer-events: none;
  width: 1px; height: 1px; margin: 0; padding: 0; border: 0;
}

.khs-btn {
  display: flex; align-items: center; gap: .7rem; width: 100%; min-width: 0;
  font: inherit; font-size: .95rem; color: var(--text, #2A2032); text-align: left;
  background: var(--paper, #FFFDF8);
  border: 1px solid rgba(42, 32, 50, .12); border-radius: 12px;
  padding: .66rem .85rem .66rem 1rem; min-height: 46px; cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 6px 16px -14px rgba(42, 32, 50, .5);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.khs-btn:hover { border-color: rgba(42, 32, 50, .2); }
.khs-btn:focus-visible,
.khs.open .khs-btn {
  outline: none; border-color: rgba(196, 155, 84, .55);
  box-shadow: 0 0 0 3px rgba(196, 155, 84, .16);
}
.khs-btn:disabled { opacity: .55; cursor: not-allowed; }
.khs-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.khs-chev {
  width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round;
  opacity: .5; transition: transform .2s cubic-bezier(.2, .8, .2, 1), opacity .16s;
}
.khs-btn:hover .khs-chev { opacity: .8; }
.khs.open .khs-chev { transform: rotate(180deg); opacity: 1; }

/* the pill-shaped ones on a toolbar keep their shape */
.kp-bar .khs-btn, .fs-bar .khs-btn, .khs-pill .khs-btn { border-radius: 999px; padding-left: 1.1rem; }
.khs-sm .khs-btn { min-height: 40px; font-size: .88rem; padding: .48rem .7rem .48rem .85rem; border-radius: 10px; }

.khs-menu {
  position: absolute; z-index: 90; top: calc(100% + 6px); left: 0; right: 0;
  max-height: 340px; overflow: auto; overscroll-behavior: contain;
  padding: .4rem; border-radius: 14px;
  background: var(--paper, #FFFDF8); border: 1px solid rgba(42, 32, 50, .1);
  box-shadow: 0 24px 50px -18px rgba(26, 18, 34, .34), 0 2px 6px -2px rgba(26, 18, 34, .14);
  animation: khs-in .16s cubic-bezier(.2, .8, .2, 1);
}
.khs.up .khs-menu { top: auto; bottom: calc(100% + 6px); transform-origin: bottom; }
@keyframes khs-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .khs-menu { animation: none; } .khs-chev { transition: none; } }

.khs-grp {
  padding: .7rem .8rem .3rem; font-size: .58rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold-dk, #96764A);
}
.khs-grp:first-child { padding-top: .35rem; }

.khs-opt {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  font: inherit; font-size: .93rem; color: var(--text, #2A2032); text-align: left;
  background: none; border: 0; border-radius: 9px; padding: .52rem .7rem; cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.khs-opt > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.khs-opt:hover, .khs-opt:focus-visible { outline: none; background: rgba(196, 155, 84, .14); }
.khs-opt.on { color: var(--plum, #43206E); font-weight: 600; }
.khs-opt:disabled { opacity: .45; cursor: not-allowed; }
.khs-tick {
  width: 15px; height: 15px; flex: none; fill: none; stroke: var(--gold-dk, #96764A);
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0;
}
.khs-opt.on .khs-tick { opacity: 1; }

/* ---- the date field ---- */
.khd { position: relative; display: block; min-width: 0; }
.khd > input { width: 100%; padding-right: 2.8rem; }
.khd > input::-webkit-calendar-picker-indicator { opacity: 0; display: none; }
.khd > input::-webkit-inner-spin-button, .khd > input::-webkit-clear-button { display: none; }
.khd > input { -moz-appearance: textfield; }
.khd-btn {
  position: absolute; top: 50%; right: .6rem; transform: translateY(-50%);
  width: 32px; height: 32px; display: grid; place-items: center;
  background: none; border: 0; border-radius: 9px; cursor: pointer; color: var(--text-soft, #675F58);
  transition: background .14s ease, color .14s ease;
}
.khd-btn:hover { background: rgba(196, 155, 84, .16); color: var(--gold-dk, #96764A); }
.khd-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* an empty date field should read like a placeholder, not like a value */
.khd:not(.filled) > input::-webkit-datetime-edit { color: var(--text-soft, #675F58); opacity: .75; }
.khd.open .khd-btn { background: rgba(196, 155, 84, .16); color: var(--gold-dk, #96764A); }
.khd.open > input { border-color: rgba(196, 155, 84, .55); box-shadow: 0 0 0 3px rgba(196, 155, 84, .16); }

/* ---- the calendar that opens from it (Kelly, 2026-11-01): the page's own, not the browser's ----
   It hangs off the body so no window or scrolling panel can clip it, in the same paper, radius and shadow as the
   dropdown menu above. Month in Fraunces, the chosen day a lit plum square, today a small gold mark. */
.khd-cal {
  position: fixed; z-index: 2000; width: 304px; padding: .8rem .8rem .55rem;
  border-radius: 16px; background: var(--paper, #FFFDF8); border: 1px solid rgba(42, 32, 50, .1);
  box-shadow: 0 24px 50px -18px rgba(26, 18, 34, .34), 0 2px 6px -2px rgba(26, 18, 34, .14);
  color: var(--text, #2A2032); font-family: var(--font-body, inherit); font-size: .95rem; line-height: 1.2;
  animation: khs-in .16s cubic-bezier(.2, .8, .2, 1);
}
.khd-cal[hidden] { display: none; }
.khd-head { display: flex; align-items: center; justify-content: space-between; gap: .3rem; margin-bottom: .35rem; }
.khd-title {
  flex: 1; text-align: center; font-family: var(--font-head, Georgia, serif); font-weight: 400; font-size: 1.12rem;
  color: var(--plum, #43206E); letter-spacing: .004em; white-space: nowrap;
}
.khd-title span { margin-left: .4rem; font-family: var(--font-body, inherit); font-size: .84rem; color: var(--text-soft, #675F58); font-variant-numeric: tabular-nums; }
.khd-nav {
  flex: none; width: 36px; height: 36px; display: grid; place-items: center;
  border: 0; border-radius: 10px; background: none; color: var(--text-soft, #675F58); cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.khd-nav:hover, .khd-nav:focus-visible { outline: none; background: rgba(196, 155, 84, .16); color: var(--gold-dk, #96764A); }
.khd-nav svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.khd-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.khd-dow {
  text-align: center; padding: .3rem 0 .45rem; font-size: .58rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold-dk, #96764A);
}
.khd-day {
  position: relative; height: 38px; border: 0; border-radius: 10px; background: none;
  font: inherit; font-size: .9rem; font-variant-numeric: tabular-nums; color: var(--text, #2A2032); cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.khd-day:hover, .khd-day:focus-visible { outline: none; background: rgba(196, 155, 84, .16); }
.khd-day.out { color: var(--text-soft, #675F58); opacity: .45; }
.khd-day.today { font-weight: 600; }
.khd-day.today::after {
  content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%; background: var(--gold-dk, #96764A);
}
.khd-day.on, .khd-day.on:hover {
  color: #F8F2E7; font-weight: 600; opacity: 1;
  background: linear-gradient(180deg, #5B2A8C, #43206E);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 8px 16px -10px rgba(67, 32, 110, .75);
}
.khd-day.on.today::after { background: var(--gold, #D4AA5F); }
.khd-day:disabled { opacity: .22; cursor: not-allowed; background: none; }
.khd-foot { display: flex; justify-content: space-between; gap: .5rem; margin-top: .45rem; padding-top: .4rem; border-top: 1px solid rgba(42, 32, 50, .08); }
.khd-act {
  font: inherit; font-size: .82rem; font-weight: 600; color: var(--gold-dk, #96764A);
  background: none; border: 0; border-radius: 8px; padding: .42rem .65rem; cursor: pointer; min-height: 36px;
  transition: background .12s ease;
}
.khd-act:hover, .khd-act:focus-visible { outline: none; background: rgba(196, 155, 84, .14); }
.khd-act:disabled { opacity: .4; cursor: default; background: none; }
.khd-scrim { position: fixed; inset: 0; z-index: 1999; background: rgba(26, 18, 34, .3); display: none; }
/* on a phone it rises from the bottom as a sheet, with bigger days for a thumb */
@media (max-width: 520px) {
  .khd-cal.sheet {
    left: 10px !important; right: 10px; top: auto !important; bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    width: auto; padding: 1rem 1rem .7rem; border-radius: 20px; animation: khd-up .22s cubic-bezier(.2, .8, .2, 1);
  }
  .khd-cal.sheet .khd-day { height: 46px; font-size: 1.02rem; }
  .khd-cal.sheet .khd-title { font-size: 1.22rem; }
  .khd-scrim.on { display: block; }
}
@keyframes khd-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .khd-cal, .khd-cal.sheet { animation: none; } }
@media print { .khd-cal, .khd-scrim { display: none !important; } }

@media print {
  .khs-menu, .khd-btn { display: none !important; }
  .khs-btn { border: 0; box-shadow: none; padding-left: 0; background: none; }
  .khs-chev { display: none; }
}

/* ============================ the way across ============================
   One account, two hats (Kelly, 2026-10-15, round three): a lieutenant is a rider who also runs a float. Each side carries
   ONE button that names the other side: "Switch to my member view" on the lieutenant screens, "Switch to my lieutenant view"
   on the member page. The same float green on every screen (Kelly: "make the switch button green"), the green the
   Your ride card wears, written once here. No toggle, nothing "selected": it is a door, not a switch. */
.kh-go { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; padding: 0 1.2rem 0 1.05rem; border-radius: 999px;
  color: #F3EBD6; background: linear-gradient(180deg, #0C4F2D, #083A22); border: 1px solid rgba(255, 255, 255, .14);
  font: inherit; font-size: .9rem; font-weight: 600; letter-spacing: .01em; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 10px 22px -10px rgba(0, 0, 0, .6);
  transition: border-color .16s, box-shadow .16s, transform .16s; }
.kh-go:hover { border-color: rgba(255, 255, 255, .28); transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 0 0 3px rgba(12, 79, 45, .28), 0 12px 24px -10px rgba(0, 0, 0, .65); }
.kh-go:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(217, 184, 85, .4); }
.kh-go svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kh-go svg:last-child { transition: transform .16s; }
.kh-go:hover svg:last-child { transform: translateX(2px); }
.kh-go[hidden] { display: none; }
@media (max-width: 420px) { .kh-go { font-size: .84rem; min-height: 42px; padding: 0 1rem 0 .9rem; } }
@media print { .kh-go { display: none !important; } }
/* Menu icons: Magnific Thin Rounded, drawn a touch heavier (Kelly, 2026-10-03: "slightly thicker").
   One setting for every page; a drawn icon that sets its own line keeps it. */
:root { --kh-icon-weight: .45px; }
svg.kh-ui { stroke: currentColor; stroke-width: var(--kh-icon-weight); stroke-linejoin: round; overflow: visible; }   /* the added weight runs a hair past the 24 square; let it show */