/* ── profile.css ───────────────────────────────────────────────*/

  /* PROFILE PAGE */
  .profile-grid { display: flex; flex-direction: column; gap: 16px; }
  @media (min-width: 900px) {
    .profile-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 20px; }
  }
  .profile-card { background: var(--surface); border: 0.5px solid var(--border-strong); border-radius: var(--radius); overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
  .profile-card-head { background: var(--nav-navy); padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
  .profile-avatar { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 600; color: white; font-family: 'DM Serif Display', serif; border: 2px solid rgba(255,255,255,0.25); }
  .profile-name { font-family: 'DM Serif Display', serif; font-size: 20px; color: white; }
  .profile-squad-tag { font-size: 12px; font-weight: 500; padding: 3px 12px; border-radius: 20px; background: rgba(255,255,255,0.18); color: white; }
  .profile-body { padding: 18px; }
  .switch-club-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 12px; margin-bottom: 6px; background: var(--navy-light); border: 0.5px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; color: var(--text); cursor: pointer; text-align: left; }
  .switch-club-btn:hover { background: var(--border); }
  .switch-club-arrow { color: var(--text-secondary); font-size: 16px; }
  .pref-section { margin-bottom: 18px; }
  .pref-label { font-size: 11px; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 8px; }
  .pref-input { width: 100%; box-sizing: border-box; padding: 8px 12px; font-size: 14px; font-family: inherit; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text-primary); outline: none; }
  .pref-input:focus { border-color: var(--navy-mid); }
  .pill-group { display: flex; gap: 6px; flex-wrap: wrap; }
  .pill { padding: 5px 13px; border-radius: 20px; font-size: 12px; font-weight: 500; border: 0.5px solid var(--border-strong); cursor: pointer; transition: all 0.15s; background: var(--surface); color: var(--text-secondary); font-family: inherit; }
  .pill:hover { background: var(--navy-light); color: var(--navy-dark); border-color: var(--navy-mid); }
  .pill.sel { background: var(--nav-navy); color: white; border-color: var(--nav-navy); }
  .pill[data-squad="W1"].sel { background: var(--w1); border-color: var(--w1); }
  .pill[data-squad="W2"].sel { background: var(--w2); border-color: var(--w2); }
  .pill[data-squad="W3"].sel { background: var(--w3); border-color: var(--w3); }
  .pill[data-squad="M1"].sel { background: var(--m1); border-color: var(--m1); }
  .pill[data-squad="M2"].sel { background: var(--m2); border-color: var(--m2); }
  .pill[data-squad="M3"].sel { background: var(--m3); border-color: var(--m3); }
  .pill-static { cursor: default; }
  .pill-static:hover { background: var(--surface); color: var(--text-secondary); border-color: var(--border-strong); }

  .save-btn { width: 100%; padding: 9px; border-radius: var(--radius-sm); background: var(--nav-navy); color: white; border: none; font-size: 13px; font-weight: 500; font-family: inherit; cursor: pointer; transition: background 0.15s; margin-top: 4px; }
  .save-btn:hover { background: var(--navy-mid); }
  .saved-toast { font-size: 12px; color: var(--navy-mid); text-align: center; margin-top: 8px; height: 16px; opacity: 0; transition: opacity 0.3s; }
  .notif-sub-row { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 14px 8px; padding: 10px 12px; background: var(--bg); border-radius: var(--radius-sm); border-left: 2px solid var(--border-strong); }
  .push-toggle-btn { padding: 7px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; font-family: inherit; border: 0.5px solid var(--border-strong); background: var(--surface); color: var(--navy-dark); cursor: pointer; white-space: nowrap; transition: background 0.15s; flex-shrink: 0; }
  .push-toggle-btn:hover:not(:disabled) { background: var(--navy-light); }
  .push-toggle-btn:disabled { cursor: default; opacity: 0.7; }

  /* Notification types (registry-driven) — per-type email/push toggles */
  .notif-type-list { display: flex; flex-direction: column; margin-bottom: 12px; }
  .notif-type-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 9px 0 9px 10px; border-bottom: 0.5px solid var(--border); border-left: 3px solid var(--notif-info); }
  .notif-type-row.notif-type-urgent { border-left-color: var(--notif-urgent); }
  .notif-type-row:last-child { border-bottom: none; }
  .notif-type-label { font-size: 13px; color: var(--text); flex: 1 1 160px; min-width: 0; }
  .notif-type-channels { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
  .notif-type-channel { display: flex; align-items: center; gap: 6px; }
  .notif-type-channel-name { font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; }
  .notif-type-locked-note { font-size: 11px; color: var(--text-tertiary); font-style: italic; white-space: nowrap; }
  .toggle-wrap.sm { width: 34px; height: 20px; }
  .toggle-wrap.sm .toggle-slider:before { width: 14px; height: 14px; }
  .toggle-wrap.sm input:checked + .toggle-slider:before { transform: translateX(14px); }
  .notif-push-row .toggle-sub { max-width: 320px; }
  .notif-captain-hdr { display: flex; align-items: center; gap: 10px; margin: 20px 0 16px; }
  .notif-captain-hdr::before, .notif-captain-hdr::after { content: ''; flex: 1; height: 0.5px; background: var(--border-strong); }
  .notif-captain-hdr span { font-size: 11px; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.07em; white-space: nowrap; }

  /* Appearance — theme segmented control */
  .theme-seg { display: flex; gap: 2px; padding: 3px; background: var(--bg); border: 0.5px solid var(--border-strong); border-radius: 999px; }
  .theme-seg-btn { flex: 1; padding: 7px 0; border: none; border-radius: 999px; background: transparent; color: var(--text-secondary); font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background 0.15s, color 0.15s; }
  .theme-seg-btn:hover { color: var(--text); }
  .theme-seg-btn.sel { background: var(--nav-navy); color: white; }

  /* Help page — FAQ accordion (chevron pattern matches the roster panel's
     collapsed "Manage access" section, css/captain-roster.css) */
  .faq-group-title { font-size: 11px; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.07em; margin: 18px 0 8px; }
  .faq-group-title:first-child { margin-top: 0; }
  .faq-item { border-bottom: 0.5px solid var(--border); }
  .faq-item:last-child { border-bottom: none; }
  .faq-q { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 10px 0; background: none; border: none; font-family: inherit; font-size: 14px; font-weight: 500; color: var(--text); text-align: left; cursor: pointer; }
  .faq-chevron { color: var(--text-secondary); font-size: 12px; flex-shrink: 0; }
  .faq-a { padding: 0 0 12px; }
  .faq-a p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--text-secondary); }