/* Extracted from public/settings.html during Eleventy migration.
   :root, font import, and global reset removed during Phase 6 token
   migration — those live in tokens.css / base.css now. */

    .container { max-width: 800px; margin: 0 auto; padding: 32px; }
    .page-title {
      font-family: var(--font-serif);
      font-size: clamp(2rem, 4vw, 2.75rem);
      font-weight: var(--weight-medium);
      letter-spacing: var(--tracking-tight);
      line-height: 1.1;
      margin-bottom: 8px;
    }
    .page-subtitle { font-size: 14px; color: var(--text-dim); margin-bottom: 32px; }

    .section { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 24px; margin-bottom: 24px; }
    .section-title { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
    .section-desc { font-size: 13px; color: var(--text-dim); margin-bottom: 20px; }

    .field { margin-bottom: 20px; }
    .field:last-child { margin-bottom: 0; }
    .field-label { font-size: 13px; font-weight: 500; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
    .field-hint { font-size: 12px; color: var(--text-dim); margin-top: 4px; }

    input[type="text"], input[type="email"], input[type="number"], input[type="url"], select {
      width: 100%; padding: 10px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 14px; outline: none;
    }
    input:focus, select:focus { border-color: var(--accent); }

    .toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border); }
    .toggle-row:last-child { border-bottom: none; }
    .toggle-info h4 { font-size: 14px; font-weight: 500; }
    .toggle-info p { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

    /* iOS-style toggle: wider pill track + larger thumb with a soft
       drop-shadow for depth. The previous 44x24 with an 18px thumb
       looked circle-ish because the thumb almost filled the track. */
    .toggle { position: relative; width: 52px; height: 32px; flex-shrink: 0; }
    .toggle input { opacity: 0; width: 0; height: 0; }
    .toggle-slider {
      position: absolute;
      cursor: pointer;
      inset: 0;
      background: var(--border);
      border-radius: 999px;
      transition: background 0.2s ease;
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
    }
    .toggle-slider::before {
      content: '';
      position: absolute;
      width: 26px;
      height: 26px;
      left: 3px;
      top: 3px;
      background: var(--fg-strong);
      border-radius: 50%;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.06) inset;
    }
    .toggle input:checked + .toggle-slider { background: var(--accent); }
    .toggle input:checked + .toggle-slider::before { transform: translateX(20px); }
    .toggle input:focus-visible + .toggle-slider { box-shadow: var(--focus-ring), inset 0 1px 2px rgba(0, 0, 0, 0.25); }
    .toggle input:disabled + .toggle-slider { opacity: 0.5; cursor: not-allowed; }

    .retry-schedule { display: flex; gap: 12px; align-items: center; }
    .retry-schedule input { width: 80px; text-align: center; }
    .retry-schedule span { color: var(--text-dim); font-size: 13px; }

    /* .btn / .btn-primary / .btn-sm now live in components.css with
       a 44px min-height tap target. Settings-specific overrides below
       are intentionally narrow. */
    .btn-primary { color: var(--fg-on-accent); }

    .btn-row { display: flex; gap: 12px; justify-content: flex-end; margin-top: 20px; }

    .toast { position: fixed; bottom: 24px; right: 24px; padding: 12px 20px; border-radius: 8px; font-size: 14px; font-weight: 500; z-index: var(--z-toast); opacity: 0; transform: translateY(10px); transition: all 0.3s; }
    .toast.show { opacity: 1; transform: translateY(0); }
    .toast-success { background: var(--accent); color: var(--fg-on-accent); }
    .toast-error { background: var(--danger-500); color: var(--fg-strong); }

    .account-card { display: flex; align-items: center; gap: 16px; padding: 16px; background: var(--surface-2); border-radius: 8px; }
    .account-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; color: var(--fg-on-accent); }
    .account-info h3 { font-size: 15px; }
    .account-info p { font-size: 12px; color: var(--text-dim); }
    .account-badge { font-size: 11px; padding: 3px 10px; border-radius: 10px; background: var(--color-accent-soft); color: var(--accent); font-weight: 600; text-transform: uppercase; margin-left: auto; }

    @media (max-width: 768px) {
      .container { padding: 16px; }
      .retry-schedule { flex-wrap: wrap; }
    }

    /* ── Danger zone ──────────────────────────────
       Visually distinct so users notice they're in irreversible-
       action territory. Bottom of the settings page. */
    .danger-zone {
      border-color: var(--color-danger-soft);
    }
    .danger-zone-title {
      color: var(--danger-500);
    }

    /* When the danger-zone account-card stacks on mobile, its primary
       button should be full-width like elsewhere on the page. */
    @media (max-width: 540px) {
      .danger-zone .account-card { flex-direction: column; align-items: stretch; gap: 12px; }
    }