/* ==========================================================================
   Golf Buddy — design tokens
   See /style-guide.html for the visual contract.
   ========================================================================== */

/* Self-hosted fonts. Space Grotesk ships as a single variable woff2 covering
   the whole weight axis — referenced once, declared twice with different
   font-weight values. Fraunces is the SOFT-axis-100 italic 900 subset that
   Google generates on demand for our axis selection (woff, not woff2). */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/fraunces-italic-900-soft100-latin.woff') format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;

  /* Surfaces */
  --bg: #0c1c2a;
  --surface: #15293b;
  --surface-2: #1d3447;
  --surface-3: #284058;

  /* Hairline borders */
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.18);
  --border-focus: rgba(168, 255, 58, 0.55);

  /* Ink. All text combos verified ≥4.5:1 (AA normal) on every surface;
     ink-faint is reserved for ≥18px / large-text or icon use only. */
  --ink: #ffffff;
  --ink-2: #d8e1ea;
  --ink-soft: #94a3b1;
  --ink-faint: #7a8c9e;

  /* Accent */
  --accent: #a8ff3a;
  --accent-hover: #c0ff5e;
  --accent-press: #8fe821;
  --on-accent: #0c1c2a;

  /* Status */
  --warn: #ffd35a;          /* favorite gold */
  --error: #ff8a80;
  --error-bg: rgba(255, 138, 128, 0.08);

  /* Type */
  --font-display: 'Space Grotesk', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-brand: 'Fraunces', Georgia, serif;  /* logomark wordmark only — applied to .brand-name */
  --fs-display: clamp(2.25rem, 4.5vw + 1rem, 3.5rem);
  --fs-eyebrow: 0.78rem;
  --fs-h2: 0.78rem;
  --fs-h3: 1.05rem;
  --fs-body: 1rem;
  --fs-hint: 0.86rem;
  --fs-meta: 0.78rem;
  --fs-pill: 0.78rem;
  --tracking-display: -0.02em;
  --tracking-eyebrow: 0.18em;

  /* Radius */
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

main {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) 0;
  flex: 1;
  box-sizing: border-box;
}

.page-aside {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--space-4);
  box-sizing: border-box;
}

/* ---------- Page header ---------- */

.page-header {
  margin-bottom: var(--space-6);
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
}
.brand-logo {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  border-radius: var(--radius);
  object-fit: contain;
}
.brand-titles {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.brand-name {
  margin: 0;
  font-family: var(--font-brand);
  font-weight: 900;
  font-style: italic;
  font-variation-settings: "SOFT" 100;
  font-size: clamp(2rem, 3.5vw + 1rem, 2.75rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.page-header .tagline {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-soft);
}
@media (min-width: 600px) {
  .brand-logo { width: 72px; height: 72px; }
}

/* ---------- Form shell ---------- */

form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

/* ---------- Step shell ---------- */

.step-indicator {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: flex;
  gap: var(--space-2);
}
.step-pip {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: var(--space-2) 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--ink-soft);
  min-height: 40px;
  min-width: 0;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.step-pip-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  transition: background 0.2s ease, color 0.2s ease;
}
.step-pip-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
@media (min-width: 600px) {
  .step-pip {
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
  }
  .step-pip-label {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
  }
}
.step-pip.is-active {
  border-color: var(--accent);
  color: var(--ink);
  background: var(--surface-3);
}
.step-pip.is-active .step-pip-num {
  background: var(--accent);
  color: var(--on-accent);
}
.step-pip.is-done .step-pip-num {
  background: var(--accent-press);
  color: var(--on-accent);
}

.step[hidden] { display: none; }

/* On step 3 the stepper is just decoration — Back is enough. */
form[data-step="3"] .step-indicator { display: none; }

.step h2 {
  margin: 0 0 var(--space-1);
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink);
}

.hint {
  margin: 0 0 var(--space-3);
  color: var(--ink-soft);
  font-size: var(--fs-hint);
}

/* ---------- Date inputs ---------- */

.date-inputs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.date-field {
  flex: 1 1 180px;
  min-width: 0;
  position: relative;
  display: block;
}
.date-field[hidden] { display: none; }
.date-inputs input[type="date"] {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  padding: var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink);
  min-height: 48px;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.date-inputs input[type="date"]:focus {
  outline: none;
  border-color: var(--border-focus);
  background: var(--surface-3);
}
.date-inputs input[type="date"]::-webkit-calendar-picker-indicator {
  /* Tints the default black icon to roughly --ink-soft (#94a3b1). */
  filter: invert(72%) sepia(7%) saturate(541%) hue-rotate(168deg) brightness(91%) contrast(88%);
  cursor: pointer;
}
/* Empty state: hide the native mm/dd/yyyy text (which is invisible on iOS Safari
   anyway) and overlay our own "Tap to pick" hint so mobile users see something. */
.date-field[data-empty="true"] input[type="date"]::-webkit-datetime-edit {
  color: transparent;
}
.date-field[data-empty="true"]::before {
  content: attr(data-hint);
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-soft);
  font: inherit;
  pointer-events: none;
}

.add-date-btn {
  flex: 0 0 auto;
  font: inherit;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  min-height: 48px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.add-date-btn:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--ink-soft);
}
.add-date-btn[hidden] { display: none; }

/* ---------- Course list ---------- */

.course-list {
  display: grid;
  gap: var(--space-2);
}

.course-row {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
}

/* Non-favorited rows: same surface, transparent border (no layout shift),
   thumb desaturated. Text stays at full contrast. */
.course-row--muted .course-option {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.02);
}
.course-row--muted .course-option .thumb {
  opacity: 0.45;
  filter: grayscale(0.6);
}
.course-row--muted .course-option .label {
  color: var(--ink-2);
}
.course-row--muted:hover .course-option .thumb,
.course-row--muted:focus-within .course-option .thumb {
  opacity: 0.85;
  filter: grayscale(0.2);
}

.course-option {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  cursor: pointer;
  min-height: 52px;
  min-width: 0;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.course-option:hover { background: var(--surface-3); }
.course-option:has(input:checked) {
  border-color: var(--accent);
  background: rgba(168, 255, 58, 0.08);
}

.course-option input[type="checkbox"] {
  margin: 0;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.course-option .thumb {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--surface-3);
  transition: opacity 0.15s ease, filter 0.15s ease;
}

.course-option .course-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.course-option .label {
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--ink);
}
.course-option .course-city {
  font-size: var(--fs-meta);
  color: var(--ink-soft);
}

/* ---------- Favorite toggle (star pill) ---------- */

.favorite-toggle {
  flex: 0 0 auto;
  width: 52px;
  min-height: 52px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.02);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-faint);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.favorite-toggle:hover {
  color: var(--warn);
  border-color: rgba(255, 211, 90, 0.4);
}
.favorite-toggle--on {
  color: var(--warn);
  border-color: rgba(255, 211, 90, 0.5);
  background: rgba(255, 211, 90, 0.08);
}

/* ---------- Error ---------- */

.error {
  margin: var(--space-3) 0 0;
  color: var(--error);
  font-size: var(--fs-hint);
  min-height: 1.1em;
}

/* ---------- Step navigation buttons ---------- */

.step-actions {
  margin-top: var(--space-5);
  display: flex;
  gap: var(--space-2);
}
.step-actions button {
  font: inherit;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  min-height: 52px;
  flex: 1 1 auto;
  transition: background 0.15s ease, transform 0.05s ease, border-color 0.15s ease;
}
.step-actions button:hover { background: var(--accent-hover); }
.step-actions button:active { background: var(--accent-press); transform: translateY(1px); }
.step-actions button.secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--border-strong);
}
.step-actions button.secondary:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--ink-soft);
}

/* ---------- Step 3 action tiles ---------- */

.action-choice {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
  margin-top: var(--space-3);
}
.action-tile {
  font: inherit;
  font-family: var(--font-body);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
  min-height: 132px;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.05s ease;
}
.action-tile:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--surface-3);
}
.action-tile:active:not(:disabled) { transform: translateY(1px); }
.action-tile:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.action-tile-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.action-tile-desc {
  color: var(--ink-soft);
  font-size: var(--fs-hint);
  line-height: 1.45;
}
.action-tile-meta {
  margin-top: auto;
  font-family: var(--font-display);
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.action-tile--book {
  border-color: var(--accent);
  background: var(--surface-3);
}
.action-tile--book .action-tile-title { color: var(--accent); }

/* ---------- Output ---------- */

.output {
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-6);
}

.date-section h2 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-soft);
}

.card-row {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--surface-2);
  display: block;
}

.card-body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1 1 auto;
}

.card-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.card-city {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--fs-meta);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.card-note {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--fs-hint);
}

.card-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-accent);
  min-height: 48px;
  border: 1px solid transparent;
  transition: background 0.15s ease;
}
.card-cta:hover { background: var(--accent-hover); }

.card-cta--pending {
  background: transparent;
  color: var(--ink-soft);
  cursor: default;
  border-color: var(--border-strong);
  font-style: normal;
}
.card-cta--pending:hover { background: transparent; }

/* ---------- Share view ---------- */

.share-view {
  display: grid;
  gap: var(--space-4);
}

/* The card the user screenshots. Designed to be self-contained:
   readable on its own without surrounding chrome, brand identity intact,
   sized so a typical 2–4 option matrix fits one phone screen. */
.share-card {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: grid;
  gap: var(--space-4);
}

.share-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}
.share-card-logo {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  border-radius: var(--radius);
  object-fit: contain;
}
.share-card-titles {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.share-card-eyebrow {
  margin: 0;
  font-family: var(--font-brand);
  font-weight: 900;
  font-style: italic;
  font-variation-settings: "SOFT" 100;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}
.share-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-soft);
}

.share-card-body {
  display: grid;
  gap: var(--space-4);
}

.share-card-footer {
  margin: 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: center;
}

.share-date-group {
  display: grid;
  gap: var(--space-3);
}
.share-date-header {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.share-options {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
}
.share-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.share-letter {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
}
.share-course {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.share-course-name {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--ink);
}
.share-course-city {
  font-size: var(--fs-hint);
  color: var(--ink-soft);
}

/* ---------- Share actions (Save image, Copy text) ---------- */

/* Top padding only — keeps the card visually attached to its action row
   below while preserving breathing room above for a manual screenshot. */
.share-card-frame {
  padding-top: var(--space-3);
}

.share-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.share-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.share-actions-hint {
  margin: 0;
}
.share-action-btn {
  font: inherit;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  min-height: 48px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.share-action-btn:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--ink-soft);
}
.share-action-btn:disabled {
  opacity: 0.6;
  cursor: progress;
}
.share-action-btn.is-flashed {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.share-action-btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  flex: 1 1 auto;
}
.share-action-btn--primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.share-action-btn--primary:active {
  background: var(--accent-press);
  border-color: var(--accent-press);
}

/* ---------- Booking URL block ---------- */

.share-urls {
  margin-top: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  display: grid;
  gap: var(--space-3);
}
.share-urls-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.share-urls-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
}
.share-url-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-height: 56px;
}
.share-url-row.is-copyable {
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.share-url-row.is-copyable:hover {
  border-color: var(--border-strong);
  background: var(--surface-3);
}
.share-url-letter {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
}
.share-url-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.share-url-course {
  font-weight: 500;
  color: var(--ink);
  font-size: 0.98rem;
}
.share-url-date {
  font-size: var(--fs-meta);
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.share-url-copy {
  flex: 0 0 auto;
  font: inherit;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  min-height: 36px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.share-url-copy:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--ink-soft);
}
.share-url-copy.is-flashed {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.share-url-row--pending {
  opacity: 0.7;
  cursor: default;
}
.share-url-pending {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- Favorites backup ---------- */

.favorites-backup {
  margin-top: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}
.favorites-backup > summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink);
  list-style: none;
  user-select: none;
}
.favorites-backup > summary::-webkit-details-marker { display: none; }
.favorites-backup > summary::before {
  content: '+ ';
  color: var(--accent);
}
.favorites-backup[open] > summary::before { content: '− '; }
.favorites-backup .hint { margin-top: var(--space-3); }
.favorites-backup textarea {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-hint);
  padding: var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink-2);
  resize: vertical;
  min-height: 48px;
}
.favorites-backup textarea:focus {
  outline: none;
  border-color: var(--border-focus);
}
.backup-actions {
  margin-top: var(--space-3);
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.backup-actions button {
  font: inherit;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  min-height: 44px;
}
.backup-actions button:hover { background: var(--accent-hover); }
.backup-actions button.secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--border-strong);
}
.backup-actions button.secondary:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--ink-soft);
}
#favorites-backup-msg.error { color: var(--error); }

/* ---------- Site footer ---------- */

.site-footer {
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  padding: 25px var(--space-4) 50px;
  text-align: center;
  color: var(--ink-soft);
  box-sizing: border-box;
}
.site-footer__links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
.site-footer__link.is-disabled {
  color: var(--ink-faint);
  cursor: not-allowed;
}
.site-footer__sep {
  color: var(--ink-faint);
}
.site-footer__copy {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-hint);
  color: var(--ink-faint);
}

/* ---------- Wider screens ---------- */

@media (min-width: 600px) {
  .date-inputs { grid-template-columns: repeat(4, 1fr); }
  .card-row { grid-template-columns: repeat(2, 1fr); }
  .step-actions button { flex: 0 0 auto; }
  .action-choice { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  .card-row { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Focus ring (accessibility) ---------- */

:where(button, a, input, textarea, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}