/* ── captain.css ───────────────────────────────────────────────*/

  /* ── CAPTAIN PAGE ─────────────────────────────────────────────────────────── */

  /* Top bar */
  .cp-topbar {
    display: flex; align-items: center; gap: 12px;
    background: var(--surface); border: 0.5px solid var(--border-strong);
    border-radius: var(--radius); padding: 12px 16px;
    margin-bottom: 16px; flex-wrap: wrap;
  }
  .cp-week-nav { display: flex; align-items: center; gap: 8px; }
  .cp-week-label {
    font-family: 'DM Serif Display', serif; font-size: 17px;
    font-weight: 400; min-width: 180px; text-align: center;
  }
  .cp-spacer { flex: 1; }
  .cp-draft-pill {
    font-size: 11px; font-weight: 600; padding: 3px 10px;
    border-radius: 20px; background: #fef9c3; color: #713f12;
    border: 0.5px solid #d97706;
  }
  .cp-pub-btn {
    padding: 7px 18px; 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;
  }
  .cp-pub-btn:hover { background: var(--navy-mid); }
  .cp-pub-btn:disabled { opacity: 0.4; cursor: default; }

  /* Tabs within captain page */
  .cp-tabs { display: flex; gap: 6px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
  .cp-tab {
    padding: 7px 16px; font-size: 13px; font-weight: 500;
    cursor: pointer; border: none; background: none;
    color: var(--text-secondary); font-family: inherit;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: all 0.15s;
  }
  .cp-tab:hover { color: var(--text); }
  .cp-tab.active { color: var(--navy-dark); border-bottom-color: var(--navy-dark); }

  /* Settings tab — sticky sub-nav of jump links to each section, plus
     active-section highlight as the user scrolls (js/captain.js
     cpSettingsJumpTo / cpSettingsInitSubnavObserver). Sits directly below
     the fixed app nav bar (#sticky-header is 56px tall — css/shared.css). */
  .cp-settings-subnav {
    position: sticky; top: 56px; z-index: 10;
    display: flex; gap: 4px; flex-wrap: wrap;
    background: var(--bg); border-bottom: 1px solid var(--border);
    padding: 10px 0; margin-bottom: 18px;
  }
  .cp-settings-subnav-link {
    padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 500;
    border: 0.5px solid var(--border-strong); cursor: pointer; white-space: nowrap;
    background: var(--surface); color: var(--text-secondary); font-family: inherit;
    transition: all 0.15s;
  }
  .cp-settings-subnav-link:hover { background: var(--bg); color: var(--text); }
  .cp-settings-subnav-link.active { background: var(--nav-navy); color: white; border-color: var(--nav-navy); }

  /* Week grid */
  .cp-grid-scroll-wrap { overflow-x: auto; position: relative; scrollbar-width: none; }
  .cp-grid-scroll-wrap::-webkit-scrollbar { display: none; }
  .cp-grid { display: flex; flex-direction: column; gap: 4px; }

  /* Day row */
  .cp-day-row {
    display: flex; align-items: stretch; gap: 0;
    background: var(--surface); border: 0.5px solid var(--border-strong);
    border-radius: var(--radius); overflow: hidden;
    min-height: 72px;
  }
  .cp-day-label {
    width: 64px; flex-shrink: 0;
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 10px 6px;
    background: #f9f9f7; border-right: 0.5px solid var(--border);
    cursor: default;
  }
  .cp-day-name {
    font-size: 11px; font-weight: 600; color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 0.07em;
  }
  .cp-day-date { font-size: 13px; font-family: 'DM Serif Display', serif; color: var(--text); margin-top: 2px; }
  .cp-day-label.today { background: #fef2f2; }
  .cp-day-label.today .cp-day-name { color: var(--navy-dark); }

  /* Planned session card */
  .cp-sess {
    display: flex; flex-direction: column; justify-content: flex-start;
    min-width: 130px; max-width: 170px; border-radius: 8px;
    padding: 7px 10px; cursor: pointer; position: relative;
    transition: box-shadow 0.15s, opacity 0.15s;
    border: 1.5px solid transparent;
    flex: 1;
  }
  .cp-sess:hover { box-shadow: 0 3px 10px rgba(0,0,0,0.12); }
  .cp-sess.draft {
    border-style: dashed; opacity: 0.82;
  }
  .cp-sess.published { border-style: solid; opacity: 1; }
  .cp-sess-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 2px;
  }
  .cp-sess-time-row {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
  }
  .cp-sess-grp { font-size: 12px; font-weight: 700; line-height: 1.2; }
  .cp-sess-time { font-size: 11px; font-weight: 600; opacity: 0.75; }
  .cp-sess-type { font-size: 10px; opacity: 0.7; margin-top: 2px; }
  .cp-sess-footer { display: flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 4px; flex-wrap: nowrap; }
  .cp-sess-cap { font-size: 10px; opacity: 0.75; flex: 1; }
  .cp-sess-chip {
    font-size: 9px; font-weight: 600; padding: 1px 5px; border-radius: 8px;
    background: rgba(255,255,255,0.45);
  }
  .cp-sess-status {
    font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 8px;
    margin-left: auto;
  }
  .cp-sess-status.draft-tag { background: rgba(0,0,0,0.12); color: inherit; opacity: 0.7; }
  .cp-sess-status.pub-tag { background: rgba(255,255,255,0.5); }
  .cp-sess-del {
    flex-shrink: 0;
    font-size: 11px; opacity: 0; cursor: pointer;
    background: rgba(0,0,0,0.15); border: none; border-radius: 50%;
    width: 16px; height: 16px; display: flex; align-items: center; justify-content: center;
    color: inherit; font-family: inherit; transition: opacity 0.15s;
    line-height: 1;
  }
  .cp-sess:hover .cp-sess-del { opacity: 1; }
  .cp-sess-del:hover { background: rgba(220,38,38,0.3); }

  /* Add session button */
  .cp-add-slot {
    min-width: 60px; border-radius: 8px;
    border: 1.5px dashed var(--border-strong); background: transparent;
    color: var(--text-tertiary); font-size: 20px; font-weight: 300;
    cursor: pointer; padding: 6px 10px; transition: all 0.15s;
    display: flex; align-items: center; justify-content: center;
    font-family: inherit; align-self: stretch;
  }
  .cp-add-slot:hover { background: var(--navy-light); color: var(--navy-dark); border-color: var(--navy-mid); border-style: solid; }

  /* Empty day hint */
  .cp-day-empty {
    font-size: 11px; color: var(--text-tertiary); font-style: italic;
    display: flex; align-items: center; padding: 0 4px;
  }

  /* Erg section */
  .cp-section-hdr {
    display: flex; align-items: center; gap: 10px;
    margin: 20px 0 10px; cursor: pointer; user-select: none;
  }
  .cp-section-title {
    font-size: 13px; font-weight: 600; color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 0.06em;
  }
  .cp-section-toggle { font-size: 12px; color: var(--text-tertiary); }
  .cp-section-line { flex: 1; height: 0.5px; background: var(--border); }
  .cp-erg-grid { display: flex; flex-direction: column; gap: 4px; }
  .cp-erg-card {
    background: var(--surface); border: 0.5px solid var(--border-strong);
    border-radius: var(--radius-sm); padding: 10px 14px;
    display: flex; align-items: center; gap: 12px;
    cursor: pointer; transition: box-shadow 0.15s;
  }
  .cp-erg-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.07); }
  .cp-erg-card.draft { opacity: 0.75; border-style: dashed; }
  .cp-erg-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: #6b7280; }
  .cp-erg-info { flex: 1; }
  .cp-erg-label { font-size: 13px; font-weight: 500; }
  .cp-erg-meta { font-size: 11px; color: var(--text-secondary); margin-top: 1px; }
  .cp-erg-plan { font-size: 11px; color: var(--text-tertiary); font-style: italic; margin-top: 2px; }
  .cp-erg-status { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 20px; }

  /* Session panel — centred modal */
  .cp-panel-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.45); z-index: 150;
    backdrop-filter: blur(2px);
  }
  /* Reuses the same fade keyframes as .modal-bg (css/shared.css) — see that
     block for why .closing is declared before .open. */
  .cp-panel-overlay.closing { display: block; animation: modal-bg-out 190ms ease-out forwards; }
  .cp-panel-overlay.open { display: block; animation: modal-bg-in 200ms ease-out forwards; }
  .cp-panel {
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, calc(-50% + 8px)) scale(0.95);
    opacity: 0; pointer-events: none;
    width: 540px; max-width: 96vw; max-height: 88vh;
    background: var(--surface);
    border-radius: var(--radius);
    border: 0.5px solid var(--border-strong);
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    z-index: 151; display: flex; flex-direction: column;
    /* Base (closed/closing) transition — plain ease-out, faster. .open below
       defines its own (slower, spring) transition for the asymmetric feel. */
    transition: transform 190ms ease-out, opacity 190ms ease-out;
    overflow: hidden;
  }
  .cp-panel.open {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1; pointer-events: auto;
    transition: transform 300ms var(--spring-ease), opacity 300ms var(--spring-ease);
  }
  .cp-panel-head {
    padding: 18px 20px 14px; border-bottom: 0.5px solid var(--border);
    display: flex; align-items: center; gap: 10px; flex-shrink: 0;
    position: sticky; top: 0; z-index: 1; background: var(--surface);
  }
  .cp-panel-head h3 {
    font-family: 'DM Serif Display', serif; font-size: 20px;
    font-weight: 400; flex: 1;
  }
  .cp-panel-close {
    width: 44px; height: 44px; border-radius: 50%;
    border: 0.5px solid var(--border-strong); background: var(--surface);
    cursor: pointer; font-size: 14px; color: var(--text-secondary);
    display: flex; align-items: center; justify-content: center;
    font-family: inherit; transition: all 0.15s;
  }
  .cp-panel-close:hover { background: var(--bg); color: var(--text); }
  .cp-panel-body {
    flex: 1; min-height: 0; overflow-y: auto; padding: 18px 20px;
    scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
  }
  .cp-panel-body::-webkit-scrollbar { width: 8px; }
  .cp-panel-body::-webkit-scrollbar-track { background: transparent; }
  .cp-panel-body::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
  .cp-panel-footer {
    padding: 14px 20px; border-top: 0.5px solid var(--border);
    display: flex; gap: 8px; flex-shrink: 0; background: var(--surface);
  }

  /* Form elements inside panel */
  .cp-field { margin-bottom: 16px; }
  .cp-field:last-child { margin-bottom: 0; }
  .cp-label {
    font-size: 11px; font-weight: 600; color: var(--text-tertiary);
    text-transform: uppercase; letter-spacing: 0.06em;
    display: block; margin-bottom: 6px;
  }
  .cp-label span { font-weight: 400; color: var(--text-secondary); text-transform: none; letter-spacing: 0; font-size: 11px; }
  .cp-input, .cp-select, .cp-textarea {
    width: 100%; padding: 8px 10px;
    border: 0.5px solid var(--border-strong); border-radius: var(--radius-sm);
    font-size: 13px; font-family: inherit; color: var(--text);
    background: var(--surface); transition: border-color 0.15s;
    outline: none;
  }
  .cp-input:focus, .cp-select:focus, .cp-textarea:focus { border-color: var(--navy-mid); }
  .cp-textarea { resize: vertical; min-height: 72px; line-height: 1.5; }
  .cp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .cp-daytime-row { display: grid; grid-template-columns: 0.9fr 1.15fr 0.8fr; gap: 8px; align-items: start; }
  .cp-pill-group { display: flex; gap: 5px; flex-wrap: wrap; }
  .cp-pill {
    padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 500;
    border: 0.5px solid var(--border-strong); cursor: pointer;
    background: var(--surface); color: var(--text-secondary);
    font-family: inherit; transition: all 0.15s;
  }
  .cp-pill:hover { background: var(--bg); }
  .cp-pill.sel { color: white; border-color: transparent; }
  .cp-pill[data-v="M1"].sel { background: var(--m1); }
  .cp-pill[data-v="M2"].sel { background: var(--m2); }
  .cp-pill[data-v="M3"].sel { background: var(--m3); }
  .cp-pill[data-v="W1"].sel { background: var(--w1); }
  .cp-pill[data-v="W2"].sel { background: var(--w2); }
  .cp-pill[data-v="W3"].sel { background: var(--w3); }
  .cp-pill[data-v="Mixed"].sel { background: var(--mix); color: #713f12; }
  .cp-pill[data-v="M1/2"].sel { background: var(--m1); }
  .cp-pill[data-v="W1/2"].sel { background: var(--w1); }
  .cp-divider { height: 0.5px; background: var(--border); margin: 18px 0; }
  .cp-btn {
    flex: 1; padding: 9px; border-radius: var(--radius-sm);
    font-size: 13px; font-weight: 500; cursor: pointer;
    font-family: inherit; transition: all 0.15s;
  }
  .cp-btn-primary { background: var(--nav-navy); color: white; border: none; }
  .cp-btn-primary:hover { background: var(--navy-mid); }
  .cp-btn-secondary { background: var(--surface); color: var(--text); border: 0.5px solid var(--border-strong); }
  .cp-btn-secondary:hover { background: var(--bg); }
  .cp-btn-danger { background: #fee2e2; color: #991b1b; border: 0.5px solid #fca5a5; }
  .cp-btn-danger:hover { background: #fecaca; }
  [data-theme="dark"] .cp-btn-danger { background: rgba(239,68,68,0.18); color: #fca5a5; border-color: rgba(239,68,68,0.4); }
  [data-theme="dark"] .cp-btn-danger:hover { background: rgba(239,68,68,0.28); }
  .cp-btn:disabled { opacity: 0.4; cursor: default; pointer-events: none; }

  /* Erg panel sign-up section (#erg-signup-section, js/sessions.js) — sits
     between the panel head and the scrollable body so it survives
     #erg-panel-body's full innerHTML rebuild on every ergOpenPanel() call. */
  .erg-signup-section {
    padding: 14px 20px; border-bottom: 0.5px solid var(--border);
    flex-shrink: 0;
  }
  .erg-attendee-list { margin-bottom: 10px; }
  .erg-attendee-row {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 0; font-size: 13px; color: var(--text);
    border-bottom: 0.5px solid var(--border);
  }
  .erg-attendee-row:last-child { border-bottom: none; }
  .erg-attendee-you {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; color: #166534; background: #dcfce7;
    border-radius: 3px; padding: 1px 5px;
  }
  [data-theme="dark"] .erg-attendee-you { color: #86efac; background: rgba(22,163,74,0.2); }
  .erg-attendee-empty { font-size: 12px; color: var(--text-tertiary); font-style: italic; padding: 4px 0; }
  .cp-publish-toggle {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: var(--radius-sm);
    background: var(--bg); border: 0.5px solid var(--border);
    margin-bottom: 0;
  }
  .cp-publish-toggle-label { font-size: 13px; flex: 1; }
  .cp-publish-toggle-sub { font-size: 11px; color: var(--text-secondary); margin-top: 1px; }

  /* ── SETTINGS TAB — CLUB NOTIFICATIONS (captain.js renderSettingsClubNotifications) ── */
  .cn-recipient-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
  .cn-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 6px 4px 10px; background: var(--bg);
    border: 0.5px solid var(--border); border-radius: 20px; font-size: 12px;
  }
  .cn-chip button {
    border: none; background: none; cursor: pointer; font-family: inherit;
    color: var(--text-tertiary); font-size: 14px; line-height: 1; padding: 2px;
  }
  .cn-empty { font-size: 12px; color: var(--text-tertiary); }
  .cn-add-wrap { position: relative; max-width: 320px; }
  .cn-dropdown {
    display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
    max-height: 220px; overflow-y: auto;
    background: var(--surface); border: 0.5px solid var(--border-strong);
    border-radius: var(--radius-sm); box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  }
  .cn-dropdown-row { padding: 8px 12px; font-size: 13px; color: var(--text); cursor: pointer; }
  .cn-dropdown-row:hover { background: var(--bg); }
  .cn-dropdown-empty { padding: 8px 12px; font-size: 12px; color: var(--text-tertiary); font-style: italic; }

  /* ── SETTINGS TAB — PERMISSIONS OVERVIEW (captain.js renderSettingsPermissions) ──
     Reuses the Club notifications recipient-pill/search-to-add component
     (.cn-recipient-list/.cn-chip/.cn-add-wrap/.cn-dropdown* above) directly —
     only the heading row (label + inline "+ Add member" toggle) is new. */
  .cp-perm-group { margin-bottom: 20px; }
  .cp-perm-group-hdr { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }