/* Galilean Baptist Church — members dashboard styles.
 *
 * The "Classical" design system the members dashboard was designed on:
 * a light ground, a single gold accent, outlined buttons and hairline
 * rules. The church's own Hanken Grotesk replaces the system's serif
 * faces, and the shapes are rounded, exactly as the design specifies.
 */
/* Classical — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */


:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201f1d;
  --color-accent: #9a6650;
  --color-accent-2: #9a6650;
  --color-divider: color-mix(in srgb, #201f1d 16%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #f6eeea;
  --color-accent-200: #e9d8cf;
  --color-accent-300: #d5b6a7;
  --color-accent-400: #bd9384;
  --color-accent-500: #a5715a;
  --color-accent-600: #9a6650;
  --color-accent-700: #7e4e3a;
  --color-accent-800: #5c3729;
  --color-accent-900: #3d241a;

  --color-accent-2-100: #f6eeea;
  --color-accent-2-200: #e9d8cf;
  --color-accent-2-300: #d5b6a7;
  --color-accent-2-400: #bd9384;
  --color-accent-2-500: #a5715a;
  --color-accent-2-600: #9a6650;
  --color-accent-2-700: #7e4e3a;
  --color-accent-2-800: #5c3729;
  --color-accent-2-900: #3d241a;

  --font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-heading-weight: 600; /* review round 3: bold retired — semibold is the
     interface headings' ceiling (they need the weight at small sizes); display
     text goes lighter still, to the normal cut (see the deck) */
  --font-body: "Lora", Georgia, "Times New Roman", serif;

  --space-1: 4.6px;
  --space-2: 9.2px;
  --space-3: 13.8px;
  --space-4: 18.4px;
  --space-6: 27.6px;
  --space-8: 36.8px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.plate{filter:sepia(0.22) saturate(0.82) contrast(1.05);box-sizing:border-box;
  border:6px solid var(--color-surface);outline:1px solid var(--color-divider)}

/* ══════════════════════════════════════════════════════════════════════════
   Components — built with the tokens above. Plain CSS
   on plain HTML: no JavaScript, no build step. Each class is documented in
   readme.md and demonstrated in foundations/ and components/.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — rules — */
.hr {
  height: 1px; border: 0; margin: var(--space-4) 0;
  background: var(--color-divider);
}

/* — buttons — */
/* Every browser paints an unstyled <button> in its own `buttontext` — black.
   Any button on this site that isn't a .btn (a card, a tab, an icon) would then
   be black on whatever it sits on, which is invisible once the palette is dark.
   Inheriting is right: a class below still overrides it. */
button, [type="button"], [type="submit"], [type="reset"] { color: inherit; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px —
     the pair sits side by side in sign-up rows */
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { color: var(--on-accent); background: var(--color-accent); border-color: var(--color-accent); }
.btn-primary:hover { background: var(--color-accent-700); border-color: var(--color-accent-700); }
.btn-primary:active { background: var(--color-accent-800); border-color: var(--color-accent-800); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — forms — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: transparent;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: transparent; border: 1px solid var(--color-divider);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — navigation — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg); border: 1px solid var(--color-divider);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }


/* ── The design's own overrides on top of the system ─────────────────── */
:root{
  --font-heading:Fraunces,Georgia,serif;
  --font-body:"Hanken Grotesk",system-ui,sans-serif;
  --font-heading-weight:600;
}
h1,h2,h3,h4{letter-spacing:-.02em}
.pill{display:inline-flex;align-items:center;gap:7px;padding:0 0 3px;border:0;border-bottom:1.5px solid transparent;border-radius:0;font-family:var(--font-body);font-weight:500;font-size:14.5px;color:var(--color-neutral-800);background:transparent;cursor:pointer;text-decoration:none;white-space:nowrap}
.pill:hover{color:var(--color-text);border-bottom-color:var(--color-divider)}
.pill[aria-current="page"]{font-weight:600;color:var(--color-accent);border-bottom-color:var(--color-accent)}
.pill:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}
.kicker{font-family:var(--font-body);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--color-accent-700);font-feature-settings:"tnum"}
.rule{height:1px;background:var(--color-divider)}
.btn{border-radius:8px;padding:8px 17px;font-weight:600}
.btn-icon{border-radius:8px;padding:0}
.btn-ghost{border-radius:8px}
.input,textarea.input{border-radius:8px}
.num{font-feature-settings:"tnum"}

/* ── Members-area shell ─────────────────────────────────────────────────
   The bar itself lives in assets/members-shell.css, beside the script that
   builds it. It used to be defined here as well, and the two copies had
   drifted — different divider, different gaps, and no in-app bar here at all,
   so a members page opened inside the Android app rendered its "< Back" bar
   unstyled unless it happened to load the other file too. One copy now. */

/* Page furniture shared by the members sections */
.gbc-page{padding:0 32px 64px}
.gbc-inner{max-width:1180px;margin:0 auto}
.gbc-lede{padding:40px 0 0}
.gbc-lede h1{margin:14px 0 0;font-weight:400;font-size:44px}
.gbc-lede .rule{margin:26px 0 30px}
.gbc-sec h3{margin:0;font-weight:400;font-size:25px}
.gbc-sec p.sub{margin:8px 0 0;font-size:14px}
.gbc-stack{display:flex;flex-direction:column;gap:34px}

@media(max-width:980px){
  .gbc-page{padding:0 20px 48px}
  .gbc-lede h1{font-size:34px}
}

/* ── Dark ──────────────────────────────────────────────────────────────
   The system ships light only; this is the same palette turned down, so the
   members area can follow the choice made in Settings. */
html[data-appearance="dark"]{
  /* Tell the browser this is a dark page. Without it the UA keeps resolving its
     OWN colours (buttontext, buttonface, the option list of a native select)
     against a LIGHT system, which is how an unstyled <button> ended up painting
     pure black text on a near-black card. */
  color-scheme:dark;
  --color-bg:#1a1917;
  /* Text ON the accent. The accent lifts to a pale clay in dark, so white on
     it falls to 2.4:1 — this is the dark ink that belongs there instead. */
  --on-accent:#1a120d;
  --color-surface:#232220;
  --color-text:#f0ede7;
  --color-accent:#c79f8c;
  --color-accent-2:#c79f8c;
  --color-divider:color-mix(in srgb,#f0ede7 18%, transparent);

  --color-neutral-100:#232220;
  --color-neutral-200:#2c2b28;
  --color-neutral-300:#3a3835;
  --color-neutral-400:#4d4a46;
  --color-neutral-500:#6b6762;
  --color-neutral-600:#8b8681;
  --color-neutral-700:#aaa49d;
  --color-neutral-800:#cdc7bf;
  --color-neutral-900:#ece7df;

  --color-accent-100: #2b1f1a;
  --color-accent-200: #3a2a22;
  --color-accent-300: #e0c2b3;
  --color-accent-400: #d3ae9c;
  --color-accent-500: #c79f8c;
  --color-accent-600: #b78f7e;
  --color-accent-700: #dcbfae;
  --color-accent-800: #ebd6c9;
  --color-accent-900: #f5e8e0;

  --color-accent-2-100: #2b1f1a;
  --color-accent-2-200: #3a2a22;
  --color-accent-2-300: #e0c2b3;
  --color-accent-2-400: #d3ae9c;
  --color-accent-2-500: #c79f8c;
  --color-accent-2-600: #b78f7e;
  --color-accent-2-700: #dcbfae;
  --color-accent-2-800: #ebd6c9;
  --color-accent-2-900: #f5e8e0;

  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow-md:0 3px 10px rgba(0,0,0,.55);
  --shadow-lg:0 12px 32px rgba(0,0,0,.6);
}

/* `hidden` is an attribute; any display rule in a page's own CSS outranks it,
   so an element toggled from script quietly stays on screen. It has caught us
   twice — a button that wouldn't go away, and a repeat control that looked
   live but wasn't wired to anything. Settle it once, everywhere. */
[hidden]{ display:none !important; }

/* ── The older palette, aliased onto these tokens ─────────────────────────
   Pages across the site were written against --cream / --paper / --clay-deep
   and their neighbours, each page carrying its own copy of the warm scheme.
   Those names now resolve to the tokens above, so there is ONE palette: change
   a token and every page follows. Corners are the scale's 4px and elevation is
   a hairline rather than a shadow, as the system asks.
   (Taken from the Unified — Classical setting in the GBC Website - Full
   designs, which maps exactly these names.) */
:root{
  --cream:var(--color-bg);
  --cream-2:var(--color-neutral-200);
  --bg:var(--color-bg);
  --bg2:var(--color-neutral-200);
  --paper:var(--color-neutral-100);
  --ink:var(--color-text);
  --ink-soft:var(--color-neutral-800);
  --muted:var(--color-neutral-700);
  --line:var(--color-divider);
  --line-soft:var(--color-divider);
  --clay:var(--color-accent-400);
  --clay-deep:var(--color-accent);
  --clay-deeper:var(--color-accent-700);
  --gold:var(--color-accent);
  --espresso:var(--color-neutral-900);
  --on-accent:#fff;
  --paper-ink:var(--color-neutral-700);
  --veil:var(--color-neutral-100);
  --veil-2:var(--color-neutral-200);
  --dark-panel:var(--color-neutral-900);
  --dark-ink:var(--color-neutral-100);
  --dark-ink-soft:var(--color-neutral-300);
  --danger:#a12626;
  --danger-line:rgba(161,38,38,.4);
  --danger-tint:rgba(161,38,38,.06);
  --blue:rgb(31,78,187);
  --r-lg:4px;
  --r-md:4px;
  --sh1:none;
  --sh2:none;
  --card-head:linear-gradient(90deg,
    color-mix(in srgb,var(--color-accent) 15%,transparent),
    color-mix(in srgb,var(--color-accent) 4%,transparent) 58%,
    transparent);
}

/* The browser's own date, month and time boxes, dressed like every other field
   — same border, corner, height and tabular figures, so a picker doesn't sit
   apart from the inputs beside it. The little calendar button is toned down
   until you point at it, and inverted on a dark ground so it stays visible. */
input[type="date"],input[type="month"],input[type="week"],
input[type="time"],input[type="datetime-local"]{
  font:inherit;font-size:14px;color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:8px;padding:8px 11px;min-height:40px;
  font-feature-settings:"tnum";color-scheme:light}
input[type="date"]:hover,input[type="month"]:hover,input[type="week"]:hover,
input[type="time"]:hover,input[type="datetime-local"]:hover{border-color:var(--clay)}
input[type="date"]:focus,input[type="month"]:focus,input[type="week"]:focus,
input[type="time"]:focus,input[type="datetime-local"]:focus{
  outline:2px solid var(--clay-deep);outline-offset:2px;border-color:var(--clay-deep)}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator{
  cursor:pointer;opacity:.5;filter:saturate(0)}
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="month"]:hover::-webkit-calendar-picker-indicator,
input[type="week"]:hover::-webkit-calendar-picker-indicator,
input[type="time"]:hover::-webkit-calendar-picker-indicator,
input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator{opacity:1}
/* Dark: the browser draws its own popup, so tell it which ground it is on,
   and flip the little icon so it is not a black mark on a dark field. */
html[data-theme="dark"] input[type="date"],html[data-theme="dark"] input[type="month"],
html[data-theme="dark"] input[type="week"],html[data-theme="dark"] input[type="time"],
html[data-theme="dark"] input[type="datetime-local"],
html[data-appearance="dark"] input[type="date"],html[data-appearance="dark"] input[type="month"],
html[data-appearance="dark"] input[type="week"],html[data-appearance="dark"] input[type="time"],
html[data-appearance="dark"] input[type="datetime-local"]{color-scheme:dark}
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator,
html[data-appearance="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-appearance="dark"] input[type="month"]::-webkit-calendar-picker-indicator{
  filter:invert(1) saturate(0);opacity:.6}

/* ── The wash ─────────────────────────────────────────────────────────────
   Two soft radials of the accent over the page ground — warm at the top right,
   fainter at the left. It was only ever on the public hero; it belongs to the
   members area too, so the two halves of the site feel like one place. Mixed
   from the accent token, so it follows the palette. Fixed, so it stays put
   while the page scrolls under it. */
:root{
  --hero-bg:
    radial-gradient(140% 112% at 85% -14%,
      color-mix(in srgb,var(--clay-deep) 26%,transparent) 0%,
      color-mix(in srgb,var(--clay-deep) 14%,transparent) 30%,
      color-mix(in srgb,var(--clay-deep) 5%,transparent) 60%,
      transparent 100%),
    radial-gradient(124% 104% at -4% 22%,
      color-mix(in srgb,var(--clay-deep) 14%,transparent) 0%,
      color-mix(in srgb,var(--clay-deep) 7%,transparent) 34%,
      color-mix(in srgb,var(--clay-deep) 2%,transparent) 66%,
      transparent 100%),
    var(--color-bg);
}
body{background:var(--hero-bg);background-attachment:fixed}

/* ── The date panel (assets/gbc-datepicker.js) ────────────────────────────
   The browser draws its own calendar outside the document, where no stylesheet
   can reach it, so we draw ours instead. Same paper, same corners, same clay
   as everything else on the page. */
.gdp{position:fixed;z-index:2000;min-width:262px;padding:10px;
  background:var(--paper);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 24px 48px -28px rgba(0,0,0,.45);
  font-family:var(--font-body);color:var(--ink)}
.gdp-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 2px 8px}
.gdp-month{font-family:var(--font-heading);font-weight:600;font-size:14.5px;font-feature-settings:"tnum"}
.gdp-step{width:28px;height:28px;display:grid;place-items:center;border:0;border-radius:7px;
  background:transparent;color:var(--muted);cursor:pointer;font:inherit;font-size:18px;line-height:1}
.gdp-step:hover{background:color-mix(in srgb,var(--clay-deep) 11%,transparent);color:var(--clay-deep)}
.gdp-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;padding-bottom:4px}
.gdp-dow span{text-align:center;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.gdp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.gdp-d{height:30px;border:1px solid transparent;border-radius:7px;background:transparent;
  color:var(--ink);font:inherit;font-size:12.5px;font-feature-settings:"tnum";cursor:pointer}
.gdp-d:hover{background:color-mix(in srgb,var(--clay-deep) 11%,transparent);color:var(--clay-deep)}
.gdp-d.out{color:var(--muted);opacity:.7}
.gdp-d.now{border-color:var(--line)}
.gdp-d.on{background:var(--clay-deep);border-color:var(--clay-deep);color:var(--on-accent);font-weight:600}
.gdp-d:disabled{opacity:.3;cursor:default;background:transparent}
.gdp-d:focus-visible{outline:2px solid var(--clay-deep);outline-offset:1px}
.gdp-foot{display:flex;justify-content:space-between;align-items:center;
  padding-top:8px;margin-top:6px;border-top:1px solid var(--line-soft)}
.gdp-today,.gdp-clear{border:0;background:transparent;font:inherit;font-size:12.5px;font-weight:600;
  cursor:pointer;padding:4px 6px;border-radius:6px;color:var(--clay-deep)}
.gdp-clear{color:var(--muted);font-weight:500}
.gdp-today:hover,.gdp-clear:hover{background:color-mix(in srgb,var(--clay-deep) 11%,transparent)}
/* Ours is the only way in, so the browser's little calendar button would be a
   second door to a panel that never opens. */
input[type="date"]::-webkit-calendar-picker-indicator{display:none}
input[type="date"][data-native-date]::-webkit-calendar-picker-indicator{display:block}