* { box-sizing: border-box; }
html, body { height: 100%; }
/* Update 29c: hard safety net against any element momentarily becoming wider than
   the screen (seen on some Android phones) — the page itself can never scroll
   sideways, so content can't shift/cut off, even if something upstream misbehaves. */
html, body { overflow-x: hidden; max-width: 100%; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  background: linear-gradient(to bottom, #f8fafc, #eef2f7);
  color: #0f172a;
}
.page { min-height: 100%; display: flex; max-width: 100%; overflow-x: hidden; }
.container { width: 100%; max-width: 760px; margin: 0 auto; padding: 20px; display: grid; gap: 16px; }

.timer-card, .log-card {
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  padding: 20px;
}

.timer {
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  font-size: clamp(42px, 8.5vw, 72px);
  text-align: center;
  letter-spacing: -0.02em;
}

.big-button-wrap {
  position: relative;
  height: clamp(220px, 42vw, 260px);
  width: clamp(220px, 42vw, 260px);
  margin: 16px auto;
}

.big {
  position: absolute; inset: 0;
  border-radius: 9999px;
  border: 0;
  color: #fff;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 10px 20px rgba(0,0,0,0.12);
  transition: transform .06s ease, filter .2s ease, background .2s ease;
  padding: 16px 18px;
  text-align: center;
}
.big:active { transform: scale(0.97); }
.big .big-icon { font-size: clamp(56px, 10vw, 96px); line-height: 1; }
.big .big-label {
  font-weight: 800;
  font-size: clamp(18px, 5vw, 26px);
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  word-break: keep-all;  /* prevent breaking COM pLETE D */
  margin-top: 6px;
}

.green { background: #16a34a; }
.green:hover { filter: brightness(1.05); }
.blue { background: #2563eb; }
.blue:hover { filter: brightness(1.05); }
.yellow { background: #f59e0b; color: #111827; }
.yellow:hover { filter: brightness(1.02); }
.blue.disabled, .green.disabled, .yellow.disabled { opacity: .85; cursor: not-allowed; }

.btn-flash {
  position: absolute; inset: 0; border-radius: 9999px; pointer-events: none;
  opacity: 0; transition: opacity .15s ease;
}
.btn-flash.show { opacity: .45; }
.btn-flash.green { background: #a7f3d0; }
.btn-flash.blue { background: #bfdbfe; }

.distance-wrap { display: flex; justify-content: center; }
.link-toggle {
  background: none; border: 0; color: #1d4ed8; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px;
  font-size: clamp(18px, 5vw, 22px);
}
.link-toggle:hover { text-decoration: underline; }
.distance-panel { padding: 10px 0 0; }
.distance-row { display: flex; align-items: center; gap: 10px; justify-content: center; }
.distance-input {
  height: 56px; width: 210px; border-radius: 14px; border: 1px solid #cbd5e1; background: #ffffffb3;
  text-align: center; font-size: 28px; font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.steppers { display:flex; flex-direction: column; gap:6px; }
.step {
  font-size: 34px;
  font-weight: 700;
  width: 40px; height: 36px; border-radius: 8px; border: 0; background: #e5e7eb; color: #334155; font-weight: 700; cursor: pointer;
}
.step:hover { background: #d1d5db; }

.seg { display: inline-flex; background: #e5e7eb; padding: 4px; border-radius: 9999px; }
.seg-btn { border: 0; background: transparent; padding: 0 14px; height: 40px; border-radius: 9999px; font-weight: 700; color: #475569; cursor: pointer; }
.seg-active { background: #fff; color: #111827; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }

.controls { display: flex; gap: 18px; justify-content: center; padding-top: 12px; }
.circle-btn {
  width: 96px; height: 96px; border-radius: 9999px; border:0; color:#fff; font-size: 40px; cursor: pointer;
  display:flex; align-items:center; justify-content:center; box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}
.circle-btn:active { transform: scale(0.96); }
.circle-btn .sym { transform: translateY(-2px); }

/* CSS icon to avoid Android multi-color emoji for stop */
.glyph { display:inline-block; }
.glyph-stop { width: 28px; height: 28px; background: #fff; border-radius: 4px; }

.pause { background: #f59e0b; }
.resume { background: #f59e0b; color:#111827; }
.stop { background: #dc2626; }
.reset { background: #334155; }
.circle-btn[disabled] { opacity: .6; cursor: not-allowed; }

.log-header { display:grid; grid-template-columns:1fr; row-gap:6px; padding:0 6px 8px; }
.log-title { text-transform: uppercase; color:#0f172a; font-size: clamp(16px, 3.5vw, 20px); font-weight: 900; }
.log-header .cols { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); justify-items:start; gap:0; color:#64748b; font-weight:700; }

.log-list { list-style: none; margin: 0; padding: 0 6px 6px; max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.log-item {
  display:flex; align-items:center; justify-content: space-between; gap: 14px;
  padding: 12px 14px; border-radius: 16px; background: #ecfdf5; color:#065f46; box-shadow: 0 1px 1px rgba(0,0,0,0.04);
}
.place { font-weight: 700; font-size: 20px; }
.time { font-variant-numeric: tabular-nums; font-weight:800; font-size: 26px; }
.pace { font-variant-numeric: tabular-nums; font-weight:700; font-size: 22px; padding-left: 18px; border-left: 1px solid rgba(16,185,129,.5); }

.export-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; gap: 10px; align-items: center; padding-top: 8px; }
.export-row > * { min-width: 0; }
.pill {
  height: 48px; border-radius: 9999px; border:0; background: #e2e8f0; color:#0f172a; font-weight: 800; cursor: pointer;
  padding: 0 12px;
}
/* Update 29c: "Copy Results" is longer than the old "Copy" label — without this,
   it (and Export CSV next to it) don't fit their grid track on narrow phones. */
@media (max-width: 480px) {
  .export-row { gap: 6px; }
  .pill { font-size: 13px; padding: 0 4px; }
}
.pill:hover { filter: brightness(0.98); }
.pill.dark { background: #0f172a; color: #fff; }
.pill.danger { background: #dc2626; color: #fff; }

.toast { font-weight: 800; color:#059669; }

.modal { position: fixed; inset:0; background: rgba(0,0,0,0.45); display:flex; align-items:center; justify-content:center; padding: 20px; }
.modal[hidden] { display: none !important; } /* defensive */
.modal-card {
  width: 100%; max-width: 460px; background: #fff; border-radius: 18px; padding: 20px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}
.modal-title { font-size: 18px; font-weight: 800; text-align: center; color:#0f172a; }
.modal-actions { display:grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }

.screen-flash { position: fixed; inset:0; background: #93c5fd; opacity: 0; pointer-events: none; transition: opacity .16s ease; }
.screen-flash.show { opacity: .6; }

@media (max-width: 420px) {
  .log-header .cols { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); justify-items:start; gap:0; color:#64748b; font-weight:700; }
  .time { font-size: 22px; }
  .pace { font-size: 18px; padding-left: 8px; }
  /* Update 29c: the pace column's left padding+border ate into its share of a
     narrow row, pushing it past the screen edge. */
  .log-list .log-item { column-gap: 6px; padding: 12px 10px; }
}


/* Update #3: black play triangle on yellow button */
.yellow .big-icon { color: #000; }


/* Refresh button arrow adjustments */
.reset .sym { font-size: 40px; }
@media (max-width: 480px) {
  .reset .sym { font-size: 40px; }
}

.yellow .big-label { max-width: 72%; }

/* Force log header and rows to share 3-column grid */
.log-header .cols,
.log-list .log-item {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); /* Place | Time | Mile Pace */
  column-gap: 12px;
  align-items: center;
}
/* keep numeric columns from drifting */
.log-list .log-item > span:nth-child(2),
.log-list .log-item > span:nth-child(3) {
  justify-self: start;
}


/* Align log item columns with header: use 3-col grid and flatten inner wrapper */
.log-list .log-item { display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); column-gap: 12px; align-items:center; }
.log-list .log-item > div { display: contents; } /* let .time and .pace occupy column cells */
/* Update 29c: safety net matching the minmax(0,1fr) fix above — without this, a grid
   item's own natural text width can still force its column wider than available space. */
.log-list .log-item > *, .log-header .cols > * { min-width: 0; }
.log-list .log-item .time { justify-self: start; }
.log-list .log-item .pace { justify-self: start; }


@media (max-width: 480px) { .reset .sym { font-size: 48px; } }

@media (min-width: 1200px) { .reset .sym { font-size: 44px; } }

.distance-wrap { display:flex; flex-direction:column; align-items:center; }
.distance-panel { padding:12px 0; width:100%; display:flex; justify-content:center; }
.rs-grid{display:grid;grid-template-columns:140px minmax(220px,320px);gap:12px 14px;align-items:center;}
.rs-label{font-size:16px;color:#0f172a;text-align:right;}
.rs-input{border:2px solid #cbd5e1;border-radius:12px;padding:10px 12px;font-size:16px;outline:none;background:#fff;}
.rs-input:focus{border-color:#60a5fa;box-shadow:0 0 0 3px rgba(59,130,246,.2);}
.rs-inline{display:inline-flex;align-items:center;gap:10px;}
.rs-num{width:100px;text-align:center;}
#rsGenderSeg{display:inline-flex;border-radius:9999px;background:#e5e7eb;padding:4px;}
#rsGenderSeg .seg-btn{min-width:74px;border-radius:9999px;}
#rsGenderSeg .seg-active{background:#0f172a;color:#fff;}
.seg{display:inline-flex;background:#e5e7eb;border-radius:9999px;padding:4px;}
.seg .seg-btn{border-radius:9999px;padding:6px 12px;}
.seg .seg-active{background:#0f172a;color:#fff;}
[hidden]{display:none !important;}
.distance-panel[hidden]{display:none !important;height:0 !important;margin:0 !important;padding:0 !important;border:0 !important;}

/* === Correction #4: Boys/Girls pill sizing === */
#rsGenderSeg { display: inline-flex; align-items: center; gap: 6px; width: auto; }
#rsGenderSeg .seg-btn { white-space: nowrap; }

/* === Gender pills: compact, not full width === */
#rsGenderSeg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  justify-self: start;   /* prevent grid stretch */
  max-width: 100%;
}
@supports (width: fit-content) {
  #rsGenderSeg { width: fit-content; }
}
#rsGenderSeg .seg-btn { white-space: nowrap; padding: 6px 14px; }

/* === Correction #5: # Runners row inline with horizontal steppers === */
label.rs-label[for="rsRacers"] + .rs-inline { display: inline-flex; align-items: center; gap: 12px; }
label.rs-label[for="rsRacers"] + .rs-inline .steppers { display: inline-flex; flex-direction: row; gap: 8px; }

/* === Correction #6: # Teams row inline with horizontal steppers === */
label.rs-label[for="rsTeams"] + .rs-inline { display: inline-flex; align-items: center; gap: 12px; }
label.rs-label[for="rsTeams"] + .rs-inline .steppers { display: inline-flex; flex-direction: row; gap: 8px; }

/* === Step 11: Align dynamic team fields to the main rs-grid === */
#teamFieldsContainer { display: contents; }

/* === Step 15: Close Settings footer link === */
.rs-footer { grid-column: 1 / -1; display: flex; justify-content: center; margin-top: 8px; }
.close-settings {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 9999px;
  background: #e5e7eb; /* soft gray */
  color: #1e3a8a;      /* deep blue text */
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, transform .06s ease;
}
.close-settings:hover { background: #cbd5e1; }
.close-settings:active { transform: scale(0.98); }
.close-settings::before { content: "✕"; font-weight: 800; }

/* === Update 24b: Scoped Race Settings helpers (non-breaking) === */
.distance-panel .rs-inline { display:inline-flex; align-items:center; gap:12px; }
.distance-panel .steppers { display:inline-flex; gap:8px; }
#rsGenderSeg { display:inline-flex; gap:6px; width:fit-content; justify-self:start; }


/* === Update26aStep4: Enhance Race Finish Log title === */
.log-title {
  font-size: clamp(16px, 3.5vw, 20px);       /* bigger */
  font-weight: 900;        /* bolder */
  text-transform: uppercase;
  color:#0f172a;          /* darker slate for emphasis */
  letter-spacing: 1px;
  border-bottom: 3px solid #0ea5e9; /* accent underline */
  padding-bottom: 4px;
  margin-bottom: 8px;
}
/* === End Update26aStep4 === */

/* === Update 26a: Step 4 - Emphasize RACE FINISH LOG heading === */
.log-title { letter-spacing: 0.06em; text-transform: uppercase; position: relative; }
.log-title::after {
  content: "";
  display: block;
  height: 3px;
  width: 100%;
  margin-top: 6px;
  border-radius: 9999px;
  background: linear-gradient(to right, #0ea5e9, #2563eb);
  opacity: 0.85;
}
/* === End Step 4 === */

/* === Update 26b: Close Settings link as pill-shaped button with ✕ === */
.close-settings {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 9999px;
  background: #e5e7eb; /* soft gray */
  color: #1e3a8a;      /* deep blue text */
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, transform .06s ease;
}
.close-settings:hover { background: #cbd5e1; }
.close-settings:active { transform: scale(0.98); }
.close-settings::before { content: "✕"; font-weight: 800; }
.close-settings:hover {
  background: #cbd5e1;
}
.close-settings::before {
  content: "✕";
  font-weight: bold;
}
/* === End Update 26b === */

/* === Update 26c: Race Completed polish (visual only) === */
.big.blue.completed {
  background: linear-gradient(145deg, #3b82f6, #1d4ed8); /* gradient blue */
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
.big.blue.completed .flag-icon {
  width: 72px;
  height: 72px;
  margin-bottom: 6px;
}
.big.blue.completed .completed-text {
  color: #fff;
  font-size: clamp(20px, 5vw, 26px);
  line-height: 1.2;
  text-align: center;
}
.big.blue.completed .completed-text strong {
  font-weight: 800;
}
/* === End Update 26c === */

/* === Update 26d: Pulse Glow + Race Completed polish === */

/* Restore pulsing glow for Start (green) and Record Finish (blue) buttons */
.big.green:not(.disabled)::after,
.big.blue:not(.disabled)::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: inherit;
  pointer-events: none;
}
.big.green:not(.disabled)::after {
  animation: pulseGreen 2s ease-out infinite;
  box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.45);
}
.big.blue:not(.disabled)::after {
  animation: pulseBlue 2.2s ease-out infinite;
  box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.45);
}
@keyframes pulseGreen {
  0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.45); }
  70%  { box-shadow: 0 0 0 24px rgba(22, 163, 74, 0.00); }
  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.00); }
}
@keyframes pulseBlue {
  0%   { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.45); }
  70%  { box-shadow: 0 0 0 24px rgba(37, 99, 235, 0.00); }
  100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.00); }
}

/* Race Completed button visual polish (apply directly to .big.blue when used as completed state) */
.big.blue {
  background: linear-gradient(145deg, #3b82f6, #1d4ed8);
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  font-size: clamp(18px, 5vw, 24px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* === End Update 26d === */

/* === Update 26d: Restore pulsating glow around big Start/Record buttons (from 25a) === */
.big.green:not(.disabled)::after,
.big.blue:not(.disabled)::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: inherit;
  pointer-events: none;
}
.big.green:not(.disabled)::after {
  animation: pulseGreen 2s ease-out infinite;
  box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.45);
}
.big.blue:not(.disabled)::after {
  animation: pulseBlue 2.2s ease-out infinite;
  box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.45);
}
@keyframes pulseGreen {
  0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.45); }
  70%  { box-shadow: 0 0 0 24px rgba(22, 163, 74, 0.00); }
  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.00); }
}
@keyframes pulseBlue {
  0%   { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.45); }
  70%  { box-shadow: 0 0 0 24px rgba(37, 99, 235, 0.00); }
  100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.00); }
}
/* === End 26d pulse restore === */


/* === Update 26d: Race Completed visual polish for existing markup === */
.big.blue {
  background: linear-gradient(145deg, #3b82f6, #1d4ed8);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.big.blue .big-label {
  color: #fff;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-shadow: 0 1px 1px rgba(0,0,0,.15);
}
/* Keep icon above label and centered nicely */
.big.blue .big-icon {
  margin-bottom: 6px;
}
/* === End 26d polish === */

/* === Update 26d2: Reinforce blue gradient + add fallback pulse via drop-shadow === */

/* Ensure gradient applies specifically to the big button even if a generic .blue rule exists */
.big.btn.blue { 
  background: linear-gradient(145deg, #3b82f6, #1d4ed8);
  box-shadow: 0 10px 22px rgba(0,0,0,.20);
}

/* Fallback pulse that works even when pseudo-elements are obscured */
@keyframes pulseShadowBlue {
  0%   { filter: drop-shadow(0 0 0 rgba(37,99,235,.45)); }
  70%  { filter: drop-shadow(0 0 24px rgba(37,99,235,0)); }
  100% { filter: drop-shadow(0 0 0 rgba(37,99,235,0)); }
}
@keyframes pulseShadowGreen {
  0%   { filter: drop-shadow(0 0 0 rgba(22,163,74,.45)); }
  70%  { filter: drop-shadow(0 0 24px rgba(22,163,74,0)); }
  100% { filter: drop-shadow(0 0 0 rgba(22,163,74,0)); }
}

/* Apply fallback pulse while enabled */
.big.green:not(.disabled) { animation: pulseShadowGreen 2s ease-out infinite; }
.big.blue:not(.disabled)  { animation: pulseShadowBlue 2.2s ease-out infinite; }

/* Keep the label stronger on blue */
.big.btn.blue .big-label {
  color: #fff;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-shadow: 0 1px 1px rgba(0,0,0,.15);
}
/* === End 26d2 === */


/* === Mobile Update 1c: Distance field tighter; steppers + mi/km stay inline === */
@media (max-width: 520px) {
  .distance-panel .rs-grid {
    grid-template-columns: 110px minmax(0,1fr);
    gap: 10px 10px;
  }
  .distance-panel .rs-label { text-align: left; }

  /* Distance row: keep everything in one row, tighter sizing */
  .distance-panel .rs-inline { 
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;          /* force inline */
  }
  .distance-panel .distance-input { 
    width: 5.5ch;               /* just enough for 12.34 */
    min-width: 60px;
    max-width: 80px;
    text-align: center;
  }
  .distance-panel .steppers { 
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .distance-panel .seg {
    flex-shrink: 0;
  }

  .timer-card { overflow-x: hidden; }
}

/* === Update 29c: Runners/Teams stepper rows were never given the same mobile
   tightening the Distance row got — on narrow phones (~360-390px) the number
   box + two buttons (~200px) didn't fit the ~120-140px value column, forcing
   the whole Race Settings panel wider than the screen. === */
@media (max-width: 480px) {
  .rs-grid { grid-template-columns: 96px minmax(0,1fr); gap: 10px 8px; }
  .rs-grid > * { min-width: 0; }

  label.rs-label[for="rsRacers"] + .rs-inline,
  label.rs-label[for="rsTeams"] + .rs-inline {
    gap: 6px;
    min-width: 0;
  }
  label.rs-label[for="rsRacers"] + .rs-inline .rs-num,
  label.rs-label[for="rsTeams"] + .rs-inline .rs-num {
    width: 46px;
    min-width: 0;
    padding-left: 4px;
    padding-right: 4px;
  }
  label.rs-label[for="rsRacers"] + .rs-inline .steppers,
  label.rs-label[for="rsTeams"] + .rs-inline .steppers {
    gap: 4px;
  }
  label.rs-label[for="rsRacers"] + .rs-inline .step,
  label.rs-label[for="rsTeams"] + .rs-inline .step {
    width: 30px;
    height: 32px;
    font-size: 22px;
  }
}


/* === 27f: Mobile tap/flash polish === */
/* Remove default blue tap highlight rectangles on touch */
button, .btn, .big-button-wrap * {
  -webkit-tap-highlight-color: transparent;
}

/* Keep accessibility for keyboard users: rounded focus ring only when navigated by keyboard */
button:focus { outline: none; }
button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.45);
  border-radius: 9999px; /* circular/rounded */
}

/* Ensure the custom flash overlay is circular */
#buttonFlash {
  border-radius: 9999px;
}

/* === Update 29c: Last-finish readout, visible without scrolling to the log === */
.last-finish {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 4px auto 0;
  padding: 10px 18px;
  border-radius: 9999px;
  background: #ecfdf5;
  color: #065f46;
  box-shadow: 0 1px 1px rgba(0,0,0,0.04);
  font-weight: 700;
  width: max-content;
  max-width: 100%;
}
.last-finish .lf-place { font-size: 16px; }
.last-finish .lf-time { font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 800; }
.last-finish .lf-pace { font-variant-numeric: tabular-nums; font-size: 16px; padding-left: 12px; border-left: 1px solid rgba(16,185,129,.5); }

/* === Update 29c FINAL: this file has several earlier rules re-declaring the same
   selectors (from past iterative edits), which can re-win the cascade at equal
   specificity by simply appearing later in the file. Putting the definitive narrow-
   phone results-row sizing here, at the true end of the file, guarantees it wins. === */
@media (max-width: 420px) {
  .log-list .log-item { column-gap: 4px; padding: 10px 8px; }
  .pace { padding-left: 4px; font-size: 15px; }
  /* Update 30c: "0:00:00.02"-style timestamps (10 chars) still didn't fit an
     88px column at 20px — shrunk further so it can't visually overlap Mile Pace
     starting right after it. */
  .time { font-size: 16px; }
  .place { font-size: 16px; }
}

/* === Update 29d: real-device report (Galaxy S23 Ultra) — the mi/km toggle and
   Boys/Girls toggle were both cut off in Race Settings. Root cause: both had a
   HARD minimum size that could never shrink (`.distance-panel .seg{flex-shrink:0}`
   and `#rsGenderSeg .seg-btn{min-width:74px}`), so on a real phone's effective
   viewport (can be narrower than a desktop emulation if the phone has display
   zoom / larger system font size turned on) they simply ran out of room with
   nowhere to go. Removing those hard floors and trimming their own padding/font
   lets them compress gracefully instead of being clipped off-screen. ===*/
@media (max-width: 480px) {
  .distance-panel .seg { flex-shrink: 1; min-width: 0; }
  .distance-panel .seg .seg-btn { padding: 0 8px; font-size: 14px; height: 34px; }

  #rsGenderSeg { min-width: 0; flex-shrink: 1; }
  #rsGenderSeg .seg-btn { min-width: 0; padding: 6px 10px; font-size: 14px; }
}

/* === Update 29d: "Close Settings" -> "Save & Close Settings", restyled as a
   solid deep-blue button with white text for readability (was pale gray/blue-
   on-gray). Icon swapped from an X (reads as "cancel") to a checkmark, which
   matches "Save" better. === */
.close-settings {
  background: #1e3a8a;
  color: #ffffff;
}
.close-settings:hover { background: #1e40af; }
.close-settings:active { background: #172554; }
.close-settings::before { content: "✓"; }

/* Defense-in-depth: no Race Settings field's own native rendering should ever be
   able to force the grid wider than the screen — always allow it to shrink. */
.rs-input { min-width: 0; }

/* === Update 29e: real-device report — km was STILL cut off after Update 29d's
   padding trim, because the +/- steppers next to it were still full desktop size
   (40px) and the whole row was locked to a single line (nowrap). Shrinking the
   steppers to match Runners/Teams, and letting this one row wrap onto a second
   line if it's ever still tight, means it can't clip again regardless of the
   exact device/zoom width. ===*/
@media (max-width: 480px) {
  .distance-panel .steppers .step {
    width: 28px;
    height: 26px;
    font-size: 18px;
  }
  .distance-panel .rs-inline {
    flex-wrap: wrap;
    row-gap: 6px;
  }
}

/* === Update 29e: the Date field is a native OS-rendered calendar control with
   its own built-in minimum width that CSS can't reliably shrink below — fighting
   it for space in a narrow value column will always eventually lose on some
   device. Stack the label above it on narrow screens instead, so it gets the
   whole row's width, comfortably fitting any native date control. ===*/
@media (max-width: 480px) {
  label.rs-label[for="rsDate"] {
    grid-column: 1 / -1;
    text-align: left;
  }
  label.rs-label[for="rsDate"] + input#rsDate {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    max-width: 260px;
  }
}

/* === Update 30: Team Tagging — per-finish team select in the Race Finish Log ===
   `.log-list .log-item > div { display: contents; }` above targets ANY direct div
   child of a log item (originally just the time/pace wrapper) — without this
   override it would also flatten the new team-row div, breaking its layout. This
   selector is more specific (adds a class), so it wins regardless of source order. */
.log-list .log-item > div.team-row {
  display: flex;
  grid-column: 1 / -1;
}
.team-row {
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(6,95,70,.25);
}
.team-row-label {
  font-size: 13px;
  font-weight: 700;
  color: #065f46;
  opacity: .75;
  flex-shrink: 0;
}
.team-select {
  flex: 1;
  min-width: 0;
  max-width: 240px;
  height: 34px;
  border-radius: 9999px;
  border: 1px solid rgba(6,95,70,.35);
  background: #ffffff;
  color: #065f46;
  font-weight: 700;
  font-size: 14px;
  padding: 0 10px;
}
.team-select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(6,95,70,.3);
}

/* === Update 30b: it was hard to tell whether the Team dropdown belonged to the
   runner above or below it — the gap between different runners' cards (8px) and
   the internal divider within one card (a dashed line) looked too similar. Fix:
   make each card visibly its own bordered/shadowed "island", widen the gap
   between different cards so it's unmistakably bigger than anything inside one,
   and turn the team row into a distinct tinted chip nested inside its card
   instead of a thin line that could be mistaken for another card boundary. === */
.log-list { gap: 16px; }
.log-item {
  border: 1.5px solid rgba(6,95,70,.16);
  box-shadow: 0 2px 6px rgba(6,95,70,.08);
}
.team-row {
  background: rgba(6,95,70,.07);
  border-top: none;
  border-radius: 10px;
  padding: 6px 10px;
  margin-top: 8px;
}

/* === Update 30c: sortable log headers === */
.sort-btn {
  background: none;
  border: 0;
  padding: 6px 4px;
  margin: -6px 0 -6px -4px;
  font: inherit;
  font-weight: 700;
  color: inherit;
  cursor: pointer;
  text-align: left;
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.sort-btn:hover { color: #0f172a; }
.sort-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.35);
  border-radius: 6px;
}
.sort-btn[aria-sort] { color: #0f172a; }
.sort-arrow { font-size: 10px; margin-left: 3px; }

/* === Update 30d: real-device report — Time and Mile Pace still ran together
   with zero gap on a Galaxy S23 Ultra even after shrinking Time's font. Chasing
   font-size numbers that "should" leave enough room kept getting outrun by how
   the real device actually renders text (likely larger system font/zoom
   settings). Structural fix instead of another guess: give Mile Pace its own
   line, entirely separate from Time, so they can never share — and therefore
   never fight over — horizontal space again, regardless of font rendering. === */
@media (max-width: 480px) {
  .log-list .log-item {
    grid-template-columns: minmax(0,auto) minmax(0,1fr);
    column-gap: 10px;
  }
  .time { font-size: 22px; } /* more room now that pace isn't sharing this row */
  .pace {
    grid-column: 1 / -1;
    justify-self: start;
    padding-left: 0;
    border-left: none;
    margin-top: 4px;
    font-size: 16px;
  }
  .pace::before {
    content: "Mile Pace: ";
    font-weight: 600;
    opacity: .7;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
  }
}

/* === Update 31: "Clear All Fields" button (top of Race Settings) === */
/* Update 31b bugfix: this used to be a sibling of .rs-grid inside .distance-panel,
   which is display:flex — that made it a flex item sized/stretched to match the
   grid's full height, rendering as a giant vertical pill. Now it's a normal grid
   item inside .rs-grid itself (grid-column spans the full row), matching the
   proven pattern already used by .rs-footer below. */
.rs-top-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; margin-bottom: 4px; }
.clear-settings-btn {
  background: none;
  border: 1px solid rgba(220,38,38,.4);
  color: #dc2626;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 9999px;
  cursor: pointer;
}
.clear-settings-btn:hover { background: rgba(220,38,38,.08); }
.clear-settings-btn:active { transform: scale(0.97); }

/* === Update 31: Runner Names — toggle fields + scrollable name list ===
   #runnerNamesSection spans the full settings width (unlike #teamFieldsContainer,
   which uses display:contents to flatten into the shared label|value grid) because
   it holds a self-contained scrollable box, not more label|value grid rows. */
.runner-names-section { grid-column: 1 / -1; }
.runner-names-scroll {
  max-height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 4px;
  margin-top: 4px;
  background: rgba(15,23,42,.03);
  border-radius: 12px;
}
.runner-name-row { display: flex; align-items: center; gap: 8px; padding: 0 4px; }
.runner-name-row .runner-name-input { flex: 1; min-width: 0; }
.runner-delete-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  border: 0;
  background: #dc2626;
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}
.runner-delete-btn:hover { background: #b91c1c; }
.runner-delete-btn:disabled { opacity: .35; cursor: not-allowed; }

/* === Update 31: Runner row in the Race Finish Log — same treatment as .team-row
   (the display:contents override, the tinted-chip look) but in blue rather than
   green, so Runner and Team are easy to tell apart at a glance. === */
.log-list .log-item > div.runner-row {
  display: flex;
  grid-column: 1 / -1;
}
.runner-row {
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 6px 10px;
  background: rgba(37,99,235,.08);
  border-radius: 10px;
}
.runner-select {
  flex: 1;
  min-width: 0;
  max-width: 240px;
  height: 34px;
  border-radius: 9999px;
  border: 1px solid rgba(37,99,235,.35);
  background: #ffffff;
  color: #1e3a8a;
  font-weight: 700;
  font-size: 14px;
  padding: 0 10px;
}
.runner-select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37,99,235,.3);
}

/* === Update 31b: Team + Runner dropdowns now share one row side-by-side on
   wider screens (desktop/tablet), stacked on narrow phones as before. Wrapping
   both in a shared .tags-row (instead of each independently spanning the full
   card width) is what makes the side-by-side layout possible — the .log-item
   grid's own 3 columns are sized for Place/Time/Pace, not this pair. ===*/
.log-list .log-item > div.tags-row {
  display: flex;
  grid-column: 1 / -1;
  gap: 10px;
  margin-top: 8px;
}
.tags-row > .runner-row,
.tags-row > .team-row {
  flex: 1;
  min-width: 0;
  margin-top: 0;
}
@media (max-width: 480px) {
  .tags-row { flex-direction: column; }
}

/* === Update 31b: "Add Runner Names" Yes/No pill was stretching to fill its
   full grid column (unlike Boys/Girls, which already has this same compact
   treatment) — matching that fix here. === */
#rsRunnerNamesSeg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  justify-self: start;
  max-width: 100%;
}
@supports (width: fit-content) {
  #rsRunnerNamesSeg { width: fit-content; }
}
#rsRunnerNamesSeg .seg-btn { white-space: nowrap; padding: 6px 14px; }

/* === Update 32: RaceXC brand header — small, wordmark-only, scrolls away with
   the page (not sticky/fixed) so it never eats screen space while reviewing
   the log. Placed as a normal child of .container (a grid), same as the
   Timer and Log cards, specifically to avoid the flex-sibling stretching bug
   that broke "Clear All Fields" earlier (.page is display:flex). ===*/
.brand-header {
  display: flex;
  justify-content: center;
  margin-bottom: -6px; /* container gap is 16px; this trims it down for a compact header */
}
.brand-logo {
  height: 34px;
  width: auto;
  display: block;
}

/* === Update 33: Race Settings — remove duplicate label+placeholder for simple
   free-text fields (Event Name, Location, Host Team, Team Name). The input's
   own placeholder is the only label now, so it takes the full row width
   instead of sharing it with a label column — frees up real space, especially
   on mobile. === */
.rs-input-full { grid-column: 1 / -1; width: 100%; }

/* === Update 33: "Bonus Sounds" On/Off — same compact-pill treatment already
   used for Boys/Girls/Co-ed and Add Runner Names, so it doesn't stretch to
   fill the grid's value column. === */
#rsBonusSoundsSeg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  justify-self: start;
  max-width: 100%;
}
@supports (width: fit-content) {
  #rsBonusSoundsSeg { width: fit-content; }
}
#rsBonusSoundsSeg .seg-btn { white-space: nowrap; padding: 6px 14px; }

/* === Update 33: "Runners Remaining" countdown, near the Timer === */
.runners-remaining {
  display: flex;
  justify-content: center;
  margin: 6px auto 0;
  padding: 6px 16px;
  border-radius: 9999px;
  background: rgba(15,23,42,.06);
  color: #0f172a;
  font-weight: 700;
  font-size: 14px;
  width: max-content;
  max-width: 100%;
}
.runners-remaining .rr-count {
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  font-size: 16px;
  margin-right: 5px;
}
.runners-remaining.rr-zero { background: rgba(22,163,74,.12); color: #15803d; }
/* Update 34: allow negative — more finishers recorded than #Runners said,
   which likely means the count was wrong (or extra unofficial runners ran) — a
   distinct warning color instead of the "all done" green makes that visible. */
.runners-remaining.rr-negative { background: rgba(220,38,38,.12); color: #b91c1c; }

/* === Update 34: Date field label moved inside the box (matches how Event Name/
   Location/Host Team already show their label as placeholder text) — native
   <input type="date"> doesn't reliably support the `placeholder` attribute
   across browsers, so this overlays real text instead, guaranteed to work
   regardless of browser quirks. Hides once a date is actually picked. === */
.rs-date-wrap { position: relative; }
.rs-date-wrap .rs-input { width: 100%; padding-left: 62px; }
.rs-date-label {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  font-weight: 600;
  font-size: 15px;
  pointer-events: none;
}
.rs-date-wrap.has-value .rs-date-label { display: none; }
/* === Update 36: once a date is picked, the "Date:" label overlay hides but
   the 62px left padding reserved for it stayed — pushing the selected date
   text off-center instead of aligning with Event Name/Location's 12px
   padding above and below it. Drop back to that same 12px once a value is
   present, using the .has-value class already toggled by
   updateDateLabelVisibility(). === */
.rs-date-wrap.has-value .rs-input { padding-left: 12px; }

/* === Update 37: bigger, more colorful calendar icon on the Date field, so
   it's easier to notice and tap on mobile. The browser's default icon is a
   small, low-contrast gray outline; this swaps in a custom blue/white
   calendar glyph (matching the app's existing accent blue, #0ea5e9/#1d4ed8)
   at a larger size. Chrome/Android and other WebKit/Blink browsers only
   (::-webkit-calendar-picker-indicator has no effect elsewhere) — other
   browsers simply keep their own native icon, no regression there. ===*/
.rs-date-wrap .rs-input { padding-right: 44px; }
#rsDate::-webkit-calendar-picker-indicator {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='1' y='1' width='22' height='22' rx='6' fill='%230ea5e9'/%3E%3Crect x='5' y='7' width='14' height='12' rx='2' fill='white'/%3E%3Crect x='5' y='7' width='14' height='3' fill='%231d4ed8'/%3E%3Crect x='8' y='4' width='2' height='4' rx='1' fill='%231d4ed8'/%3E%3Crect x='14' y='4' width='2' height='4' rx='1' fill='%231d4ed8'/%3E%3Ccircle cx='9' cy='13' r='1.2' fill='%230ea5e9'/%3E%3Ccircle cx='12' cy='13' r='1.2' fill='%230ea5e9'/%3E%3Ccircle cx='15' cy='13' r='1.2' fill='%230ea5e9'/%3E%3Ccircle cx='9' cy='16' r='1.2' fill='%230ea5e9'/%3E%3Ccircle cx='12' cy='16' r='1.2' fill='%230ea5e9'/%3E%3C/svg%3E");
  background-size: 26px 26px;
  background-repeat: no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  cursor: pointer;
  opacity: 1;
}

/* === Update 34: Boys/Girls/Co-ed read as "mashed together" with a 3rd option
   added and no gap between buttons — the active button's dark background was
   the only visual separator. Added breathing room, keeping the same pill
   style used everywhere else in Settings (mi/km, Bonus Sounds, Add Runner
   Names) rather than switching to a different-looking control just here. === */
#rsGenderSeg { gap: 4px; }
#rsGenderSeg .seg-btn { padding: 6px 12px; }

/* === Update 34: red delete button per Team Name field, matching Runner Name
   fields. Unlike Runner Names, there's no "keep at least 1" floor here —
   Host Team only (0 extra teams) is a valid setup. === */
.team-name-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
.team-name-row .rs-input { flex: 1; min-width: 0; }
.team-delete-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  border: 0;
  background: #dc2626;
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}
.team-delete-btn:hover { background: #b91c1c; }

/* === Update 34b: real-device report — Boys/Girls/Co-ed still read as "mashed
   together" even with a 4px gap (confirmed present and correctly computed at
   4px in testing). Root cause found: inactive .seg-btn has background:transparent,
   so it — and the gap next to it — are both just showing the container's own
   gray. There's nothing to see a "gap" between: only the active (dark) button
   has any contrast, so two inactive buttons next to each other (or an inactive
   button next to the gap) have no visible boundary at all. Giving inactive
   buttons their own white pill fixes this at the root, rather than continuing
   to grow a gap that was never really the problem. Scoped to just this control,
   since it's the only 3-option one — mi/km, Bonus Sounds, Add Runner Names are
   2-option toggles where this hasn't been reported as confusing. ===*/
#rsGenderSeg .seg-btn {
  background: #ffffff;
  border: 1px solid rgba(15,23,42,.10);
}
#rsGenderSeg .seg-btn.seg-active {
  background: #0f172a;
  border-color: transparent;
}

/* === Update 34c: real-device report — Boys/Girls/Co-ed text itself overlaps
   between buttons (e.g. "Boys" spilling into "Girls"), not just a contrast
   issue. Root cause: on narrow phones, #rsGenderSeg was squeezed sideways
   into the same row as the 96px "Select:" label column, via `min-width:0`
   on both the container and its buttons (added in Update 29d to stop the
   whole row being clipped off-screen). But the button text also has
   `white-space:nowrap` — so once the row got tighter than "Boys"+"Girls"+
   "Co-ed" could fit, the buttons shrank *below* their own text's width and
   the nowrap text overflowed the button box into its neighbor. Fix: give
   this control its own full-width row below the label on mobile instead of
   fighting the label for space — plenty of room for 3 short words even on a
   320px-wide screen, so nothing needs to compress below its content again. */
@media (max-width: 480px) {
  #rsGenderLabel, #rsGenderSeg {
    grid-column: 1 / -1;
  }
  #rsGenderLabel { text-align: left; }
  #rsGenderSeg {
    width: 100%;
    justify-content: space-between;
    margin-top: 2px;
  }
  #rsGenderSeg .seg-btn {
    flex: 1;
    min-width: 0;
    text-align: center;
  }
}

/* === Update 35: Distance field matched to # Runners / # Teams — same box
   height and horizontal (side-by-side) −/+ buttons, instead of a taller box
   with the steppers stacked vertically. The taller box was leftover sizing
   (height:56px, from an older single-row Distance layout, line ~90) that
   never got reconciled when Distance was rebuilt onto the same rs-grid/
   rs-inline pattern # Runners and # Teams use — this brings it in line and
   frees up vertical space on mobile. Mirrors the existing unconditional
   (non-media-query) `label.rs-label[for="rsRacers"] + .rs-inline .steppers`
   rule below, so it applies at every width, not just mobile. */
label.rs-label[for="distanceInput"] + .rs-inline .steppers {
  display: inline-flex;
  flex-direction: row;
  gap: 8px;
}
.distance-input {
  height: 42px;
}

/* === Update 35b: real-device report — going horizontal (35, above) made the
   Distance row wider than before, and on a real Galaxy S23 Ultra the
   available column width next to the 96-110px "Distance:" label is
   narrower than desktop emulation predicts (confirmed by reproducing the
   exact 3-way stack — input alone, steppers alone, mi/km alone — only once
   testing dropped to a 320px viewport; this matches the same "real device
   effective width < emulated width" pattern already root-caused in Update
   29d). The existing flex-wrap:wrap fallback (Update 29e) was wrapping
   input/steppers/mi-km onto three separate lines with an orphaned label
   vertically centered alongside the middle one — worse than the original
   stacked-steppers layout it replaced.

   Real fix: stop fighting the label column for space at all. Give Distance
   the same treatment already proven for the Date field and Boys/Girls/
   Co-ed — label on its own full-width line, then input + steppers + mi/km
   together on one full-width line below. Freed from the label column, the
   full row easily fits all three (~213px of content) even on a 320px-wide
   screen, so the wrap fallback never needs to trigger. ===*/
@media (max-width: 480px) {
  label.rs-label[for="distanceInput"] {
    grid-column: 1 / -1;
    text-align: left;
  }
  label.rs-label[for="distanceInput"] + .rs-inline {
    grid-column: 1 / -1;
    width: 100%;
    flex-wrap: nowrap;
  }
}

/* === Update 35c: real-device report — Distance's −/+ buttons are smaller
   than # Runners / # Teams' on mobile (28×26px @ 18px font vs 30×32px @
   22px font). Leftover from Update 29e, which shrank Distance's steppers
   specifically to solve a since-fixed clipping problem, and was never
   brought back in line with # Runners/# Teams sizing. Matching their exact
   mobile size here. ===*/
@media (max-width: 480px) {
  .distance-panel .steppers .step {
    width: 30px;
    height: 32px;
    font-size: 22px;
  }
}

/* === Update 37b: real-device report — the custom calendar icon (37) never
   showed on a real Galaxy S23 Ultra, only on desktop. Styling the native
   ::-webkit-calendar-picker-indicator can't be trusted cross-platform: some
   mobile Chrome/Android builds draw that control's icon at the OS level
   rather than through Blink's own CSS-styleable pseudo-element, so the
   background-image from 37 never gets a chance to render there — while
   still working fine on desktop Chrome, which does route it through Blink.
   Fix: stop relying on restyling a browser/OS-drawn native control. Hide
   the native indicator outright (still present, just invisible and inert)
   and draw our own button instead (see index.html #rsDateIconBtn, wired in
   app.js to call the input's showPicker()) — a real DOM element we fully
   control, guaranteed to render identically on every platform. ===*/
#rsDate::-webkit-calendar-picker-indicator {
  opacity: 0;
  pointer-events: none;
}
.rs-date-icon-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rs-date-icon-btn svg { width: 26px; height: 26px; display: block; }

/* === Update 41: real-device report — the "Date:" label read as a different
   font/size than Event Name/Location's placeholder text. Measured the
   actual computed placeholder style (16px, weight 400, #757575) rather
   than guessing, and matched .rs-date-label to it exactly. Also locking
   that same style in explicitly as .rs-input's own ::placeholder rule, so
   Event Name/Location/Host Team and the Date label are guaranteed
   consistent everywhere, not just wherever a given browser's own default
   placeholder gray happens to land. ===*/
.rs-input::placeholder {
  color: #757575;
  font-weight: 400;
}
.rs-date-label {
  font-size: 16px;
  font-weight: 400;
  color: #757575;
}

/* === Update 41: real-device report — a faint native dropdown caret was
   still peeking out from behind the custom calendar button on a real
   Galaxy S23 Ultra, even with the native indicator's opacity set to 0
   (37b). Some Android builds draw parts of a date input's native chrome
   at the OS level, outside Blink's normal compositing, so opacity alone
   doesn't reliably suppress 100% of it. Going further: -webkit-appearance:
   none strips the field's native chrome entirely (icon + any caret), and
   the indicator is now also fully collapsed (display:none, 0×0) rather
   than just invisible. The custom button (37b) already handles opening
   the picker via showPicker(), so nothing here depends on the native
   chrome being present. ===*/
#rsDate {
  -webkit-appearance: none;
  appearance: none;
}
#rsDate::-webkit-calendar-picker-indicator {
  display: none;
  width: 0;
  height: 0;
}