/* ============================================================================
 * Plate Notify (formerlly Brake Check, changed 21 Aug 2026) — Patches
 * ----------------------------------------------------------------------------
 * Surgical fixes for class-name drift and missing styles.
 * Loaded LAST so it overrides theme.css, components.css, and screens.css.
 * Safe to delete this file (and its <link> in index.html) to revert.
 * ==========================================================================*/

/* ===== Missing CSS variables ===== */
:root {
  --accent-light: #33DEFF;
  --surface-1: #2C2C2E;
  --surface-2: #3A3A3C;
  --text-primary: #FFFFFF;
  --text-secondary: #8E8E93;
}

/* ===== Single-dash button aliases ===== */
.btn-primary {
  background: var(--accent);
  color: #001a1f;
}
.btn-primary:hover { background: var(--accent-light); }
.btn-secondary {
  background: var(--surface-2);
  color: var(--text-primary);
  border: 1px solid var(--border);
}
.btn-danger { background: var(--danger); color: #fff; }
.btn-ghost  { background: transparent; color: var(--text-secondary); }
.btn-block  { width: 100%; }
.btn-large  { min-height: 64px; font-size: 1.125rem; }
.btn-small  { min-height: 36px; font-size: 0.85rem; padding: 0 0.75rem; }
.btn--small { min-height: 36px; font-size: 0.85rem; padding: 0 0.75rem; }

/* ===== Input aliases ===== */
.input-plate {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 1.5rem; font-weight: 700;
  text-align: center; letter-spacing: 0.15em; text-transform: uppercase;
}

/* ===== Card aliases ===== */
.card-success { border-color: var(--success); background: #14301a; }
.card-danger  { border-color: var(--danger);  background: #2e1414; }
.card-warning { border-color: #FF9500;        background: #2e2414; }

/* ===== Page centring (max-width on screen contents) ===== */
.screen > * { max-width: 480px; margin-left: auto; margin-right: auto; width: 100%; }
.screen > .nav-bar { max-width: none; }
.screen > .dev-banner, .screen > .mode-banner { max-width: none; }

/* ===== BEM aliases used by reportLights/reportDone/checkResults ===== */
.screen__title { font-size: 28px; font-weight: 700; margin-bottom: var(--sp-2); letter-spacing: -0.5px; }
.screen__body  { flex: 1; padding: var(--sp-5) var(--sp-4); overflow-y: auto; }

/* ===== Text helpers ===== */
.muted { color: var(--text-muted); }
.small { font-size: 0.85rem; }

/* ===== Button row ===== */
.btn-row { display: flex; gap: var(--sp-3); }
.btn-row > .btn { flex: 1; }

/* ===== Progress dot active alias ===== */
.progress-dot.active { background: var(--accent); width: 24px; border-radius: 4px; }

/* ===== Sign-in provider buttons ===== */
.signin-btn {
  display: flex; align-items: center; justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 52px;
  margin-bottom: var(--sp-3);
  padding: 0 1.25rem;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  text-indent: 28px;
  background-repeat: no-repeat;
  background-position: 1.25rem center;
  background-size: 20px 20px;
}
.signin-btn:hover  { opacity: 0.9; }
.signin-btn:active { transform: scale(0.98); }
.signin-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.signin-btn-apple {
  background-color: #000;
  color: #fff;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z'/></svg>");
}
.signin-btn-google {
  background-color: #fff;
  color: #1a1a1a;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path fill='%23FFC107' d='M43.6 20.5H42V20H24v8h11.3c-1.6 4.7-6.1 8-11.3 8-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.8 1.2 7.9 3l5.7-5.7C34 6.1 29.3 4 24 4 13 4 4 13 4 24s9 20 20 20 20-9 20-20c0-1.3-.1-2.4-.4-3.5z'/><path fill='%23FF3D00' d='M6.3 14.7l6.6 4.8C14.7 16 19 13 24 13c3.1 0 5.8 1.2 7.9 3l5.7-5.7C34 6.1 29.3 4 24 4 16.3 4 9.7 8.3 6.3 14.7z'/><path fill='%234CAF50' d='M24 44c5.2 0 9.9-2 13.4-5.2l-6.2-5.2c-2 1.5-4.5 2.4-7.2 2.4-5.2 0-9.6-3.3-11.3-8L6.2 33C9.5 39.6 16.2 44 24 44z'/><path fill='%231976D2' d='M43.6 20.5H42V20H24v8h11.3c-.8 2.3-2.3 4.3-4.1 5.6l6.2 5.2C40.8 35.7 44 30.3 44 24c0-1.3-.1-2.4-.4-3.5z'/></svg>");
}
.signin-btn-email {
  background-color: var(--accent);
  color: #001a1f;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23001a1f'><path d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/></svg>");
}
.signin-btn-guest {
  background-color: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border);
  text-indent: 0;
}

/* ===== Country / state list (grouped card with rows) ===== */
#country-list, #state-list, .search-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  width: 100%;
  max-width: 480px;
}
#country-list .search-item,
#state-list   .search-item,
.search-list  .search-item,
#country-list > button,
#state-list   > button {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.875rem 1rem;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
#country-list .search-item:last-child,
#state-list   .search-item:last-child,
.search-list  .search-item:last-child,
#country-list > button:last-child,
#state-list   > button:last-child { border-bottom: none; }

#country-list .search-item:hover,
#state-list   .search-item:hover,
.search-list  .search-item:hover,
#country-list > button:hover,
#state-list   > button:hover { background: var(--surface-2); }

#country-list .search-item::after,
#state-list   .search-item::after,
.search-list  .search-item::after,
#country-list > button::after,
#state-list   > button::after {
  content: '›';
  margin-left: auto;
  color: var(--text-muted);
  font-size: 1.4rem;
  line-height: 1;
}

#country-list .flag, #state-list .flag, .search-list .flag,
.search-item__flag { font-size: 1.5rem; flex-shrink: 0; }
#country-list .label, #state-list .label, .search-list .label,
.search-item__label { flex: 1; }

/* ===== Home footer link buttons (Voice Commands / Settings) ===== */
.home-footer { gap: var(--sp-3); }
.home-footer-link {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 1rem;
  background: var(--surface-2);
  color: var(--accent);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.home-footer-link:hover { background: var(--bg-elevated); border-color: var(--accent); }

/* ===== Toast aliases ===== */
.toast-success { border-color: var(--success); }
.toast-error   { border-color: var(--danger); }
.toast-info    { border-color: var(--accent); }

/* ===== Voice indicator dot alias ===== */
.voice-indicator-dot {
  width: 8px; height: 8px; border-radius: 50%; background: currentColor;
}

/* ===== Light toggle aliases ===== */
.light-toggle-swatch {
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid;
  transition: all 0.2s;
}
.light-toggle-label  { font-size: 0.8rem; font-weight: 500; text-align: center; }
.light-toggle-status {
  font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.1em; color: var(--text-secondary);
}

/* ===== Smoke selector aliases (v02.5: blue variant added) ===== */
.smoke-section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.75rem;
}
.smoke-section-title {
  font-size: 0.95rem; font-weight: 600; color: var(--text-primary);
  margin: 0; display: flex; align-items: center; gap: 0.5rem;
}
.smoke-option-puff {
  width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--border);
}
.smoke-option-white .smoke-option-puff,
.smoke-option-white .smoke-option__puff {
  background: radial-gradient(circle, #f0f0f0 0%, #c8c8c8 100%);
}
.smoke-option-black .smoke-option-puff,
.smoke-option-black .smoke-option__puff {
  background: radial-gradient(circle, #3a3a3a 0%, #0a0a0a 100%);
}
.smoke-option-blue .smoke-option-puff,
.smoke-option-blue .smoke-option__puff {
  background: radial-gradient(circle, #9BB5D6 0%, #4A6A95 100%);
}
.smoke-option-label { font-size: 0.85rem; font-weight: 600; }
.smoke-option-hint  { font-size: 0.7rem; color: var(--text-secondary); text-align: center; }

/* ===== Search item aliases ===== */
.search-item-flag  { font-size: 1.5rem; }
.search-item-label { flex: 1; }

/* ===== Mode banner aliases ===== */
.mode-banner-mock { background: #FF9500; color: #1a1a1a; }
.mode-banner-live { background: var(--success); color: #0a1a0d; }

/* ===== Done / success screen helpers ===== */
.success-icon {
  width: 96px; height: 96px;
  margin: 0 auto var(--sp-5);
  border-radius: 50%;
  background: var(--success);
  color: #000;
  display: flex; align-items: center; justify-content: center;
  font-size: 48px;
}
.report-summary-list {
  list-style: none;
  margin: var(--sp-4) 0;
  padding: var(--sp-4);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.report-summary-list li {
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
}
.report-summary-list li:last-child { border-bottom: none; }
.report-done__actions { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-5); }
.report-lights__actions {
  display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-5);
}
.report-lights__header { text-align: center; margin-bottom: var(--sp-4); }

/* ===== Voice help screen ===== */
.voice-help-list { list-style: none; margin: 0; padding: 0; }
.voice-help-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: var(--sp-2);
}

/* ============================================================================
 * Responsive grid columns for lights and smoke selectors (v02.5)
 * ----------------------------------------------------------------------------
 * Mobile-first breakpoints sized for the deployment surfaces this app targets:
 *   - Phone portrait        (≤480px)  : lights 2 col, smoke 3 col
 *   - Tablet / CarPlay /
 *     Android Auto landscape (481–900px) : lights 3 col, smoke 3 col
 *   - Desktop / large
 *     dev view              (≥901px)  : lights 4 col, smoke 3 col
 *
 * Apple CarPlay typical canvas is ~800x480. Android Auto similar (~800x480 to
 * 1280x720 depending on head unit). Both fall in the 481–900px band.
 *
 * Smoke stays at 3 columns at all widths because there are only ever 3 options
 * (white | black | blue) and 3-up reads as a quick visual comparison even on
 * narrow phones at the existing button sizing.
 * ==========================================================================*/

/* Smoke selector: always 3 columns */
.smoke-options {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 0.5rem;
}

/* Lights grid: phone default = 2 columns */
.light-toggle-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

/* Tablet / CarPlay / Android Auto: 3 columns */
@media (min-width: 481px) {
  .light-toggle-grid {
    grid-template-columns: 1fr 1fr 1fr !important;
    max-width: 720px;
  }
}

/* Desktop / large displays: 4 columns */
@media (min-width: 901px) {
  .light-toggle-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr !important;
    max-width: 960px;
  }
}

/* ============================================================================
 * Manage Plates screen + removal confirmation dialog (v02.7 / ADR-004)
 * ----------------------------------------------------------------------------
 * Per-row layout for myVehicles[] entries on the Manage Plates screen,
 * plus the modal scrim + panel used to confirm removal with a mandatory
 * reason picker.
 *
 * Selection-state on .dialog-reason is JS-driven via .is-active to match
 * the rest of the codebase's selection-state pattern (light-toggle,
 * smoke-option, voice-indicator, progress-dot). See
 * js/screens/managePlates.js openRemovalDialog().
 *
 * Sizing watch-out (logged for v02.5 §10.5 head-unit re-test): the dialog
 * panel caps at 440px wide. On the 481–900px CarPlay/Android Auto band
 * this leaves visible empty space either side of the panel. Acceptable
 * for the prototype; revisit when the dialog is extracted into a
 * reusable component (likely alongside ADR-003 Mark as Resolved).
 * ==========================================================================*/

/* Override the screen-wide 480px max-width so the rows feel like full-width
 * cards rather than narrow strips. The list itself centres at 480px. */
.manage-plates-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: 0;
}

.manage-plates-row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.manage-plates-row--error {
  border-color: var(--danger);
}

.manage-plates-row__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.manage-plates-row__plate {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-primary);
}
.manage-plates-row__location {
  white-space: nowrap;
}

.manage-plates-row__meta {
  font-size: 0.85rem;
}
.manage-plates-row__error-text {
  color: var(--danger);
  font-weight: 600;
}

.manage-plates-row__actions {
  display: flex;
  justify-content: flex-end;
}

/* ----- Confirmation dialog (modal) ----- */

.dialog-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-3);
  z-index: 10000;
  animation: dialog-scrim-in 0.15s ease-out;
}
@keyframes dialog-scrim-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.dialog-panel {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  max-width: 440px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  animation: dialog-panel-in 0.2s ease-out;
}
@keyframes dialog-panel-in {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.dialog-panel__title {
  margin: 0 0 var(--sp-2) 0;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
}
.dialog-panel__plate {
  font-family: 'SF Mono', Menlo, monospace;
  letter-spacing: 0.05em;
}
.dialog-panel__warning {
  margin: 0 0 var(--sp-4) 0;
  line-height: 1.4;
}
.dialog-panel__required {
  color: var(--danger);
  font-weight: 700;
}

.dialog-panel__reasons {
  margin-bottom: var(--sp-4);
}
.dialog-panel__reasons-label {
  font-weight: 600;
  margin-bottom: var(--sp-2);
  font-size: 0.875rem;
  color: var(--text-primary);
}

.dialog-reason {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-2);
  cursor: pointer;
  background: var(--bg-elevated);
  transition: border-color 0.15s, background 0.15s;
}
.dialog-reason:hover {
  background: var(--surface-2);
}
.dialog-reason.is-active {
  border-color: var(--accent);
  background: var(--surface-2);
}
.dialog-reason input[type="radio"] {
  margin-top: 3px;
  flex-shrink: 0;
}
.dialog-reason__label {
  flex: 1;
  font-size: 0.95rem;
  color: var(--text-primary);
  line-height: 1.3;
}

.dialog-panel__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

/* ============================================================================
 * ADR-003 — Per-report rows on Check Results (v02.8)
 * ----------------------------------------------------------------------------
 * Each report gets its own row inside the "Individual reports" card so the
 * Mark as Resolved button (rendered conditionally per canResolveReport())
 * has a per-report anchor. Aggregate SVG + summary card above unchanged.
 *
 * Visual: detail text on the left, action button on the right, baseline-
 * aligned. Stacks vertically below 360px to avoid button-text overlap on
 * the narrowest phones.
 * ==========================================================================*/

 .check-results__report-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
}
.check-results__report-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.check-results__report-meta {
  flex: 1;
  min-width: 0;          /* allow text to wrap inside flex child */
}

.check-results__report-actions {
  flex-shrink: 0;
}

@media (max-width: 360px) {
  .check-results__report-row {
    flex-direction: column;
    align-items: stretch;
  }
  .check-results__report-actions {
    align-self: flex-end;
  }
}

/* ============================================================================
 * v02.9 — ADR-006 (Add Plate UX) — manage-plates entry point + add-plate pickers
 * ==========================================================================*/

/* ─── Manage Plates: persistent Add Plate button row ─────────────────────── */
.manage-plates__add-button-row {
  display: flex;
  justify-content: flex-end;
  margin: var(--sp-3) 0 var(--sp-3) 0;
}

.manage-plates__add-button-row .btn {
  /* Self-sized button, right-aligned. Mirrors the visual weight of the
     per-row Remove buttons (which are btn-danger btn-small) — Add Plate
     uses the full btn-primary size to read as the screen's primary
     affordance, since this screen now exists primarily to host plate
     management actions. */
  min-width: 140px;
}

@media (max-width: 480px) {
  /* On narrow phones, full-width the button so it reads as the obvious
     CTA. The right-aligned variant works on tablet/CarPlay where the
     screen body has visible whitespace either side. */
  .manage-plates__add-button-row {
    justify-content: stretch;
  }
  .manage-plates__add-button-row .btn {
    width: 100%;
  }
}

/* ─── My Plate Setup (add mode): country + region picker block ───────────── */
/* The two pickers stack vertically on narrow phones, sit side-by-side on
   tablet/CarPlay/desktop. Matches the responsive-grid breakpoints
   established in v02.5 §10 for the lights toggle grid. */
.add-plate-pickers {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  margin: var(--sp-3) 0;
}

@media (min-width: 481px) {
  .add-plate-pickers {
    grid-template-columns: 1fr 1fr;
  }
}

.add-plate-picker {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.add-plate-picker__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.3px;
}

.add-plate-picker select.input {
  /* Native <select> on mobile gets the system picker UX; we just
     ensure the styling is consistent with text inputs on the same
     screen. The .input class already handles colour/border/radius. */
  cursor: pointer;
}

/* ─── v02.9.1 — ADR-015 Issue B1 (Welcome screen returning-user variant) ─── */
/* The returning-user variant adds a secondary "Use a different sign-in
   method" button below the primary "Continue as X user" shortcut. The
   .welcome layout is column-oriented (existing); the two buttons stack
   naturally with a small gap between them.

   .welcome-shortcut and .welcome-other are additive classes — they don't
   override existing .btn / .btn-primary / .btn-secondary styling, just
   add the inter-button spacing. */
   .welcome-shortcut {
    margin-top: var(--sp-3);
  }
  
  .welcome-other {
    margin-top: var(--sp-2);
  }
/* ─── v02.25i — ADR-018 Sub-decision 6 (Welcome screen tertiary "Forget me on this device" affordance) ─── */
/* The returning-user variant adds a tertiary "Forget me on this device"
   affordance below the primary "Continue as X user" shortcut + secondary
   "Use a different sign-in method" button. Per ADR-018 Sub-decision 6
   narrower-than-Tier-2 design intent (clears only identity-hint state;
   does NOT touch profile.myVehiclesByUserId slots per pre-sign-in no-
   authenticated-context rationale), the affordance receives deliberately
   low visual prominence per ADR-018 KLFW item 4 design intent.

   Visual layout per v02.25i Q1 Option B + Q2 btn-text + Sub-variant B2
   Brian-call resolution:

     <hr class="welcome-separator">                          ← visual break
     <p class="welcome-shared-device-label">                 ← contextual label
       On a shared device?
     </p>
     <button class="btn btn-text welcome-forget-me">         ← tertiary affordance
       Forget me on this device
     </button>

   Discoverability signals per v02.25i Q4-CSS-A Brian-call resolution
   (combine signals 2 + 1 + 5 — accent colour + cursor + scale-down):
     (2) color: var(--accent)  → cross-screen precedent per .home-footer-link
                                 for "this is tappable" signal on all surfaces
     (1) cursor: pointer       → hand cursor on desktop hover
     (5) :active scale-down    → inherited from .btn base class per
                                 components.css line ~9 transform: scale(0.98)

   NO underline — preserves flat-mobile-UX aesthetic per codebase-wide
   no-underlined-text precedent. */

/* Separator: max-width matches button stack at 320px per .welcome .btn
   precedent at screens.css line ~58. Auto-margin-centering keeps it
   horizontally aligned with the buttons above. */
   .welcome-separator {
    width: 100%;
    max-width: 320px;
    margin: var(--sp-4) auto var(--sp-2) auto;
    border: none;
    border-top: 1px solid var(--border);
  }
  
  /* Contextual label: quieter colour per .home-action-sub precedent at
     screens.css line ~108; matches existing inter-row font-size to read
     cleanly on phone + tablet + CarPlay + Android Auto + desktop per
     v02.25i Q4-CSS-C Brian-call resolution (quieter but not much smaller
     to work on many different device screen sizes). */
  .welcome-shared-device-label {
    font-size: 15px;
    color: var(--text-secondary);
    margin: 0 0 var(--sp-2) 0;
    text-align: center;
  }
  
  /* .btn-text base style — text-only button variant for lowest visual
     prominence. NEW class per v02.25i Commit 4.5; no prior precedent
     in codebase per Commit 4.5 source-inspection grep result (0 matches).
  
     Inherits .btn base class properties (min-height 52px + padding +
     transitions + :active scale-down per components.css lines ~3-21);
     overrides visual treatment to remove background + border per text-
     only design intent.
  
     Accent colour signals tappability per cross-screen precedent
     (.home-footer-link uses color: var(--accent) for the same purpose
     per screens.css line ~130). */
  .btn-text {
    background: transparent;
    color: var(--accent);
    border: none;
    font-weight: 500;
  }
  .btn-text:active {
    transform: scale(0.98);
    opacity: 0.7;
  }
  
  /* Welcome-context spacing for the .welcome-forget-me tertiary button.
     Matches .welcome-shortcut + .welcome-other inter-button spacing
     pattern from v02.9.1 ADR-015 Issue B1 block above. */
  .welcome-forget-me {
    margin-top: 0;
  }