/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* Mobile-first responsive design */
/* Theme Constants */
:root {
  /* Colors */
  --primary-color: #2563eb;
  --secondary-color: #6b7280;
  --text-primary: #333;
  --text-secondary: #666;
  --text-muted: #555;
  --text-light: #999;
  --border-color: #e0e0e0;
  --background: #f8fafc;
  --error-color: #d32f2f;
  --success-color: #388e3c;
  
  /* Spacing */
  --spacing-xs: 5px;
  --spacing-sm: 8px;
  --spacing-md: 10px;
  --spacing-lg: 12px;
  --spacing-xl: 15px;
  --spacing-xxl: 20px;
  --spacing-xxxl: 30px;
  
  /* Border radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-round: 50%;
  
  /* Font sizes */
  --font-sm: 14px;
  --font-md: 16px;
  --font-lg: 18px;
  --font-xl: 20px;
  --font-xxl: 28px;
  
  /* Shadows */
  --shadow-container: 0 10px 40px rgba(0, 0, 0, 0.15);
  
  /* Transitions */
  --transition-fast: 0.2s;
  --transition-normal: 0.3s;
}

/* Reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
  background: var(--background);
  min-height: 100vh;
  padding: var(--spacing-xxl);
  color: var(--text-primary);
}

/* Container */
.container {
  max-width: 500px;
  margin: 0 auto;
  background: white;
  padding: var(--spacing-xxxl) var(--spacing-xxl);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-container);
  border-top: 4px solid var(--primary-color);
}

/* Logo */
.logo {
  display: block;
  margin: 0 auto var(--spacing-xxl);
  max-width: 200px;
  height: auto;
}

/* Typography */
h2 {
  text-align: center;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xxxl);
  font-size: var(--font-lg);
  font-weight: 400;
}

h3 {
  color: var(--primary-color);
  margin-bottom: var(--spacing-xxl);
  font-size: var(--font-xl);
  font-weight: 600;
}

/* Page icon, under the title. In the club's primary colour rather than the title's
   grey, because its whole job is to be noticed: it's what tells someone at a glance
   whether they're signing in or submitting a score, where the two first steps are
   otherwise near-identical. The h2 above carries a large bottom margin, so pull the
   icon back up under it and keep the spacing below. */
.page-icon {
  display: flex;
  justify-content: center;
  margin-top: calc(-1 * var(--spacing-xxl));
  margin-bottom: var(--spacing-xxl);
  color: var(--primary-color);
}

/* The glyphs are drawn on a 24-unit grid, so at 72px every stroke is scaled 3x and a
   stroke-width of 2 would render heavy and blunt. Thin it back down to keep the same
   line weight the menu icons have. */
.page-icon svg {
  stroke-width: 1.25;
}

/* Form elements */
label {
  display: block;
  margin-bottom: var(--spacing-sm);
  color: var(--text-muted);
  font-weight: 500;
  font-size: var(--font-sm);
}

input[type="text"],
input[type="date"],
input[type="time"],
input[type="number"],
select,
textarea {
  width: 100%;
  padding: var(--spacing-lg);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--font-md);
  margin-bottom: var(--spacing-xxl);
  transition: border-color var(--transition-normal);
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
}

/* Keep the native dropdown control - it gives the best picker on both iOS and
   Android, which is where this app is actually used. */
select {
  background-color: #fff;
  cursor: pointer;
}

textarea {
  resize: vertical;
  min-height: 80px;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary-color);
}

input[readonly],
input:disabled,
select:disabled {
  background-color: var(--background);
  color: var(--text-secondary);
  cursor: not-allowed;
  pointer-events: none;
}

/* Radio group - used for round type. Pill-style options laid out as one control,
   sized to stay tappable on a phone. */
.radio-group {
  display: flex;
  /* Kept as a safety net, not the intended layout. A flex item won't shrink below its
     longest word, so on a very narrow phone three equal thirds could be a few pixels
     short for "Outdoor" - wrapping is a better failure than the row overflowing the
     container sideways. */
  flex-wrap: wrap;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xxl);
}

/* flex-basis 0 rather than auto, so the options share the width equally instead of
   being sized by their text - otherwise "Outdoor" is visibly wider than "252" and
   the row looks accidental. Three types in the CSV today means three equal thirds,
   and any other count divides evenly without a code change.

   display:flex here (with the label growing to fill) makes each label span its whole
   option, so the pills stay equal in height as well as width. */
.radio-option {
  flex: 1 1 0;
  display: flex;
}

.radio-option input[type="radio"] {
  /* Hidden from sight but not from assistive tech or keyboard focus, so the label
     below can act as the visible control. */
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.radio-option label {
  /* Grows to fill the option, so the whole third is the tap target and all three
     pills match in size. Centred both ways, since the equal widths mean the text no
     longer fills its box. */
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  /* Narrower side padding than before: with equal thirds the width comes from the
     flex basis, so generous side padding only risks squeezing the longest label. */
  padding: var(--spacing-lg) var(--spacing-sm);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  text-align: center;
  font-size: var(--font-md);
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color var(--transition-normal), background-color var(--transition-normal);
}

.radio-option input[type="radio"]:checked + label {
  border-color: var(--primary-color);
  background-color: var(--primary-color);
  color: #fff;
  font-weight: 500;
}

.radio-option input[type="radio"]:focus-visible + label {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* Optional-field hint, so "(optional)" reads as secondary to the field name. */
.label-note {
  color: var(--text-light);
  font-weight: 400;
}

/* Checkbox with its label beside it, rather than the stacked label-above-field
   layout the other form controls use. */
.checkbox-field {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xxl);
}

.checkbox-field input[type="checkbox"] {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin: 0;
  accent-color: var(--primary-color);
  cursor: pointer;
}

.checkbox-field label {
  margin-bottom: 0;
  font-size: var(--font-md);
  color: var(--text-primary);
  cursor: pointer;
}

/* The gold-end fields — distance and photo — revealed when the tick box above them is
   ticked. Indented with a left rule so they read as belonging to that tick rather than
   as further independent questions. */
#score-gold-end-fields {
  margin-bottom: var(--spacing-xxl);
  padding-left: var(--spacing-lg);
  border-left: 3px solid var(--border-color);
}

/* File inputs aren't in the shared input rule above, because the native control is left
   alone deliberately: on a phone it's what opens the camera-or-library sheet, and every
   attempt to restyle it costs either that behaviour or the accessible label. Only the
   spacing is set, so it sits like the other fields. */
input[type="file"] {
  width: 100%;
  margin-bottom: var(--spacing-md);
  font-size: var(--font-sm);
}

/* Buttons */
button {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-md);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-normal);
}

.btn-primary {
  background: var(--primary-color);
  color: white;
  margin-bottom: var(--spacing-md);
}

.btn-primary:hover {
  background: color-mix(in srgb, var(--primary-color) 80%, black);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-color) 40%, transparent);
}

/* A disabled action needs to look unavailable, or it reads as a broken button.
   Overrides the hover rules above, which would otherwise still lift and recolour it. */
button:disabled,
button:disabled:hover {
  background: var(--secondary-color);
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-secondary {
  background: var(--secondary-color);
  color: white;
}

.btn-secondary:hover {
  background: color-mix(in srgb, var(--secondary-color) 80%, black);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--secondary-color) 40%, transparent);
}

/* Recent names */
.recent-names {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

.recent-names:empty {
  margin-bottom: 0;
}

/* Button group */
.button-group {
  display: flex;
  gap: var(--spacing-md);
  margin-top: var(--spacing-xxl);
}

.button-group button {
  flex: 1;
  margin-bottom: 0;
}

/* Selected name section */
.selected-name {
  margin-bottom: var(--spacing-xxxl);
}

/* Link-style button */
.link-btn {
  background: none;
  border: none;
  color: var(--primary-color);
  text-decoration: underline;
  font-size: var(--font-sm);
  cursor: pointer;
  padding: var(--spacing-xs) 0;
  margin-top: var(--spacing-md);
  width: auto;
  text-align: center;
}

.link-btn:hover {
  color: color-mix(in srgb, var(--primary-color) 80%, black);
  background: none;
  transform: none;
  box-shadow: none;
}

.date-display,
.name-display {
  padding: var(--spacing-lg);
  background: var(--background);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--font-md);
  margin-bottom: var(--spacing-xxl);
  color: var(--text-primary);
  font-weight: 500;
}

.name-btn {
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--background);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-lg);
  font-size: var(--font-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  transition: all var(--transition-fast);
}

.name-btn:hover {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.name-btn .remove {
  color: var(--text-light);
  font-weight: bold;
  font-size: var(--font-lg);
  margin-left: var(--spacing-sm);
  padding-left: var(--spacing-sm);
  border-left: 1px solid var(--border-color);
}

.name-btn:hover .remove {
  color: white;
  border-left-color: white;
}

/* Location selector */
.location-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xxl);
}

.location-btn {
  padding: 14px;
  background: var(--background);
  color: var(--text-secondary);
  border: 2px solid var(--border-color);
}

/* Modal overlay */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9998;
}

/* Modal */
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  width: 90%;
  max-width: 400px;
}

.modal-content {
  background: white;
  padding: var(--spacing-xxxl);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  animation: modalSlideIn 0.3s ease-out;
}

.modal-content p {
  font-size: var(--font-lg);
  font-weight: 500;
  text-align: center;
  margin-bottom: var(--spacing-xxl);
  padding: 0;
  line-height: 1.5;
  /* A score confirmation can add a line for a personal best or club record. pre-line
     honours the \n between them while still wrapping any line too long for a phone —
     unlike `pre`, which wouldn't. */
  white-space: pre-line;
}

.modal-content p.error {
  color: var(--error-color);
}

.modal-content p.success {
  color: var(--success-color);
}

.modal-content button {
  margin-bottom: 0;
}

/* Structured detail under a modal message — currently just the score confirmation's
   handicap and classification figures. Laid out like the Golden Records website so an
   archer recognises the same figures in both, but as a narrow two-column table rather
   than that site's wide one: on a phone the labels have to sit beside the values, not
   above them, or the OK button drops below the fold. */
.modal-details {
  margin-bottom: var(--spacing-xxl);
}

.detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-sm);
}

.detail-table caption {
  caption-side: top;
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--font-sm);
  padding-bottom: var(--spacing-sm);
}

.detail-table th,
.detail-table td {
  padding: var(--spacing-sm);
  border-bottom: 1px solid var(--border-color);
  text-align: center;
  /* A classification is two or three words ("Bowman 1st Class") in a third of a phone's
     width, so the cells have to wrap rather than force the table wider than the modal. */
  word-break: break-word;
}

.detail-table thead th {
  color: var(--text-secondary);
  font-weight: 500;
  /* Column headings are the quietest thing in the table: they only say which figure is
     which, while the figures themselves are what the archer came to read. */
  font-size: 13px;
}

/* The row labels ("Handicap", "Classification") and the empty top-left corner. */
.detail-measure {
  text-align: left;
  color: var(--text-muted);
  font-weight: 500;
}

.detail-table tbody td {
  font-weight: 600;
  color: var(--text-primary);
}

/* A figure the API didn't return, shown as "No handicap found" rather than blank. Lighter
   and unbolded so it reads as an absence at a glance, without competing with the real
   figure beside it. */
.detail-absent {
  color: var(--text-light);
  font-weight: 400;
}

/* A secondary outcome under the main message — currently only whether the 3 or 6 gold
   end photo sent. Separated by a rule and set smaller than the message above it, because
   the message is the one that matters: the score. */
.modal-notice {
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-xl);
  border-top: 1px solid var(--border-color);
  font-size: var(--font-sm);
  line-height: 1.5;
  text-align: left;
  color: var(--text-secondary);
}

/* Deliberately amber rather than the error red: the photo failing is not the score
   failing, and red anywhere in a score confirmation would be read as "something went
   wrong with my score" before the words were. */
.modal-notice-warn {
  color: #92400e;
  background: #fef3c7;
  border-top: none;
  border-radius: var(--radius-sm);
  padding: var(--spacing-lg);
  font-weight: 500;
}

/* The photo status line under the gold-end file input, when the photo couldn't be read.
   Inline on the form, so it's fixed before a score is ever submitted. Shared by the
   optional scoresheet's status line. */
.photo-status-error {
  color: var(--error-color);
  font-weight: 500;
}

/* "Remove scoresheet" sits directly under the file input as a quiet secondary action —
   muted and left-aligned so it doesn't read as a primary button competing with Submit.
   Only shown once a file is chosen (app.js toggles .hidden). */
#score-scoresheet-remove {
  display: block;
  text-align: left;
  color: var(--text-secondary);
  margin-top: var(--spacing-xs);
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}



/* Loading overlay */
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  font-weight: 600;
  color: var(--primary-color);
  font-size: var(--font-lg);
}

.loading::before {
  content: '';
  width: 40px;
  height: 40px;
  border: 4px solid var(--border-color);
  border-top: 4px solid var(--primary-color);
  border-radius: var(--radius-round);
  animation: spin 1s linear infinite;
  margin-bottom: var(--spacing-xxl);
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Utility classes */
.hidden {
  display: none !important;
}

.form-section {
  margin-bottom: var(--spacing-xxxl);
}

/* Screen management */
.screen {
  animation: fadeIn 0.3s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Who's Here Section. Counts, not names — see #whos-here-section in index.html. */
.summary-group {
  margin: var(--spacing-lg) 0;
}

.summary-group h3 {
  font-size: var(--font-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin: 0 0 var(--spacing-sm);
}

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--border-color);
}

.summary-label {
  font-size: var(--font-md);
  color: var(--text-primary);
}

/* Big enough to read at arm's length, since the number is the whole point of the page. */
.summary-value {
  font-size: var(--font-xl);
  font-weight: 700;
  color: var(--primary-color);
  font-variant-numeric: tabular-nums;
}

.info-text {
  color: var(--text-secondary);
  font-size: var(--font-sm);
  margin-bottom: var(--spacing-md);
}

/* Holds the refresh button alone, so it sits top-right where the eye goes for it. */
.refresh-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: var(--spacing-md);
}

.refresh-btn {
  width: 36px;
  height: 36px;
  background: transparent;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  padding: 0;
}

.refresh-btn:hover {
  background: var(--background);
  border-color: var(--primary-color);
  transform: none;
  box-shadow: none;
}

.refresh-btn svg {
  color: var(--text-primary);
}

/* Container positioning for menu button */
.container {
  position: relative;
}

/* Hamburger Menu Button */
.menu-btn {
  position: absolute;
  top: var(--spacing-xxl);
  right: var(--spacing-xxl);
  width: 44px;
  height: 44px;
  background: transparent;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  z-index: 100;
}

.menu-btn:hover {
  background: var(--background);
  border-color: var(--primary-color);
  transform: none;
  box-shadow: none;
}

.menu-btn svg {
  color: var(--text-primary);
}

/* Side Menu */
.side-menu {
  position: fixed;
  top: 0;
  right: -300px;
  width: 300px;
  height: 100vh;
  background: white;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
  transition: right var(--transition-normal);
  z-index: 10000;
  overflow-y: auto;
}

.side-menu.open {
  right: 0;
}

.side-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-xxl);
  border-bottom: 2px solid var(--border-color);
}

.side-menu-header h3 {
  margin: 0;
  font-size: var(--font-xl);
  color: var(--primary-color);
}

.close-menu-btn {
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}

.close-menu-btn:hover {
  background: var(--background);
  transform: none;
  box-shadow: none;
}

.close-menu-btn svg {
  color: var(--text-secondary);
}

.side-menu-nav {
  padding: var(--spacing-md);
}

.menu-item {
  width: 100%;
  padding: var(--spacing-xl);
  background: white;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  font-size: var(--font-md);
  font-weight: 500;
  color: var(--text-primary);
  transition: all var(--transition-fast);
  text-align: left;
}

.menu-item:hover {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
  transform: translateX(-4px);
  box-shadow: none;
}

.menu-item svg {
  flex-shrink: 0;
}

.menu-item:hover svg {
  color: white;
}

.menu-divider {
  padding: var(--spacing-lg) var(--spacing-md);
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  border-top: 1px solid var(--border-color);
  padding-top: var(--spacing-xl);
}

.menu-divider span {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.menu-item:disabled,
.menu-item.active {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--background);
  color: var(--text-secondary);
  border-color: var(--border-color);
}

.menu-item:disabled:hover,
.menu-item.active:hover {
  background: var(--background);
  color: var(--text-secondary);
  border-color: var(--border-color);
  transform: none;
}

.menu-item:disabled svg,
.menu-item.active svg {
  color: var(--text-secondary);
}

/* Menu Overlay */
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  opacity: 0;
  transition: opacity var(--transition-normal);
  pointer-events: none;
}

.menu-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

/* QR Code Section */
.qr-info {
  text-align: center;
  padding: var(--spacing-md) 0;
}

.qr-url {
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--primary-color);
  margin-bottom: var(--spacing-xl);
  word-break: break-all;
  padding: var(--spacing-lg);
  background: var(--background);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
}

.qr-image {
  width: 100%;
  height: auto;
  background: white;
}

/* Install prompt
   ------------------------------------------------------------------
   Pinned to the bottom rather than the top: the top of the screen is where the phone's
   own "Add to Home Screen" affordances live on both platforms, and a bar up there both
   competes with the menu button and covers the Share button the iOS instructions tell
   people to tap.

   env(safe-area-inset-bottom) keeps it clear of the iPhone home indicator. It resolves to
   0px on every browser that doesn't need it, so no fallback is required. */
.install-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  /* Below the side menu and the modal, so a message or the menu is never obscured by a
     suggestion. The banner is the least urgent thing on screen at any moment. */
  z-index: 900;
  background: var(--primary-color);
  color: white;
  padding: var(--spacing-xl);
  padding-bottom: calc(var(--spacing-xl) + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
}

.install-banner p {
  font-size: var(--font-sm);
  line-height: 1.4;
  flex: 1 1 60%;
  min-width: 0;
}

.install-banner-actions {
  display: flex;
  gap: var(--spacing-sm);
  flex-shrink: 0;
}

.install-banner-btn {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: white;
  font-family: inherit;
  font-size: var(--font-sm);
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--transition-fast);
}

.install-banner-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

#install-banner-show {
  background: white;
  color: var(--primary-color);
  font-weight: 600;
}

#install-banner-show:hover {
  background: rgba(255, 255, 255, 0.85);
}

/* Install instructions */
.install-steps h3 {
  color: var(--primary-color);
  font-size: var(--font-md);
  margin-bottom: var(--spacing-md);
}

.install-steps ol {
  margin: 0 0 var(--spacing-xxl) var(--spacing-xxl);
  color: var(--text-primary);
  font-size: var(--font-md);
  line-height: 1.6;
}

.install-steps li {
  margin-bottom: var(--spacing-sm);
}

/* Responsive adjustments */
@media (max-width: 400px) {
  .container {
    padding: var(--spacing-xxl) var(--spacing-xl);
  }

  /* Below ~400px the text and both buttons can't share a row without the buttons
     shrinking to unusable widths, so let the text take the full width and the
     buttons sit beneath it. */
  .install-banner p {
    flex: 1 1 100%;
  }

  .install-banner-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .side-menu {
    width: 280px;
    right: -280px;
  }

  .menu-btn {
    top: var(--spacing-xl);
    right: var(--spacing-xl);
  }

  /* On the narrowest phones (~320px) three equal thirds leave roughly 77px each,
     which is right on the limit for "Outdoor" at 16px. Trim the gap and side padding
     and drop the text a point so the row stays as three equal thirds instead of
     wrapping one option onto its own line. */
  .radio-group {
    gap: var(--spacing-xs);
  }

  .radio-option label {
    padding: var(--spacing-lg) var(--spacing-xs);
    font-size: var(--font-sm);
  }
}