/* Modals: core system, help accordion, reset / confirm / framework-switch dialogs.
   Split out of css/05-modals.css in 1.1.0 to lower the merge-conflict surface
   for contributors. Sibling files: 05-modals-feedback.css, 05-hero-pills.css,
   05-modals-welcome.css, 05-modals-install.css, 05-modals-projects.css. */

  /* Modal system: shared overlay, backdrop, content surface and header
     styles used by every modal in the app (help, reset, confirm, etc.). */
  .modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
    animation: modalFade 0.2s ease;
  }
  .modal[hidden] { display: none; }
  .modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  [data-theme="light"] .modal-backdrop {
    background: rgba(15, 23, 42, 0.45);
  }
  .modal-content {
    position: relative;
    max-width: 640px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    animation: modalSlide 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    /* New stacking context (isolation: isolate). Inner z-index values
       (sticky header, body content, dropdowns) are confined to this
       container and cannot leak above sibling modal surfaces or the
       backdrop. Without this, the help modal's sticky header could
       paint above an unrelated modal that opens on top of it. */
    isolation: isolate;
  }
  @keyframes modalFade {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes modalSlide {
    from { transform: translateY(20px) scale(0.96); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
  }
  .modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    position: sticky;
    top: 0;
    z-index: 5;
    border-radius: 14px 14px 0 0;
  }
  .modal-head h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
  }
  .modal-close {
    background: none;
    border: 0;
    color: var(--text-dim);
    font-size: 22px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.15s;
    line-height: 1;
  }
  .modal-close:hover {
    color: var(--text);
    background: var(--surface-3);
  }

  /* Help modal header: ad-hoc language switcher placed to the left of
     the close button. Only visible when the help modal is opened from
     step 1 of the welcome flow (language selection). It does NOT change
     the global currentLang; it only retranslates the help modal body
     so the user can preview both languages before committing. */
  .modal-head-right {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .help-lang-switch {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px;
    background: var(--surface-3);
    gap: 0;
  }
  .help-lang-switch[hidden] {
    display: none;
  }
  .help-lang-opt {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--text-dim);
    padding: 4px 11px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.2;
    transition: all 0.15s;
    font-family: inherit;
  }
  .help-lang-opt:hover {
    color: var(--text);
    background: var(--surface-2);
  }
  .help-lang-opt.active {
    background: var(--accent);
    color: #0b0f17;
    cursor: default;
  }
  .help-lang-opt.active:hover {
    background: var(--accent);
  }
  .modal-body {
    padding: 22px 24px;
    position: relative;
    z-index: 1;
  }
  .modal-body section {
    margin-bottom: 22px;
  }
  .modal-body section:last-child { margin-bottom: 0; }
  .modal-body h3 {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent-2);
    margin: 0 0 10px;
    font-weight: 700;
  }

  /* ==================== HELP ACCORDION (collapsible sections) ====================
     The help modal is split into independent sections; each one expands
     and collapses on its own. Default state: all collapsed (the user
     opens only what they need to keep the modal short). Clicking a
     section's h3 toggles it. A strip of "Expand all / Collapse all"
     controls sits directly below the modal header. */

  /* Switch the help modal to a flex column so the header and accordion
     controls stay pinned while only the body scrolls. Using two
     position: sticky elements (header and controls) caused them to
     overlap on scroll; this layout sidesteps that entirely. */
  #helpModal .modal-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  #helpModal .modal-head,
  #helpModal .help-accordion-controls {
    flex-shrink: 0;
    position: static;
  }
  #helpModal .modal-body {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
  }

  .help-accordion-controls {
    display: flex;
    gap: 8px;
    padding: 10px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
  }
  .help-accordion-btn {
    font-size: 12.5px;
    padding: 6px 12px;
  }

  /* Help sections behave as accordion panels */
  #helpModalBody section.help-section {
    margin-bottom: 8px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    overflow: hidden;
    transition: border-color 0.15s ease;
  }
  #helpModalBody section.help-section:hover {
    border-color: var(--accent);
  }
  /* Section heading (h3) acts as the clickable accordion trigger */
  #helpModalBody section.help-section > h3 {
    margin: 0;
    padding: 12px 14px;
    font-size: 13px;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 700;
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    user-select: none;
  }
  #helpModalBody section.help-section > h3:hover {
    background: var(--surface-2);
  }
  /* The chevron element (.help-section-chevron) is injected from JS */
  .help-section-chevron {
    flex-shrink: 0;
    font-size: 14px;
    color: var(--text-mute);
    transition: transform 0.18s ease;
  }
  #helpModalBody section.help-section.collapsed .help-section-chevron {
    transform: rotate(-90deg);
  }
  /* When collapsed, hide every direct child except the h3 trigger */
  #helpModalBody section.help-section.collapsed > *:not(h3) {
    display: none;
  }
  /* When expanded, pad the body content (the h3 trigger already has
     its own padding, so it is excluded from this rule). */
  #helpModalBody section.help-section > *:not(h3) {
    padding-left: 14px;
    padding-right: 14px;
  }
  #helpModalBody section.help-section > *:not(h3):last-child {
    padding-bottom: 12px;
  }
  .modal-body p, .modal-body ul {
    font-size: 13.5px;
    color: var(--text-dim);
    line-height: 1.6;
    margin: 0 0 6px;
  }
  .modal-body ul {
    list-style: none;
    padding: 0;
  }
  .modal-body li {
    padding: 5px 0;
    position: relative;
    padding-left: 16px;
  }
  .modal-body li::before {
    content: "•";
    position: absolute;
    left: 4px;
    color: var(--accent-2);
  }
  .modal-body ul.kbd-list li {
    display: flex;
    gap: 12px;
    align-items: center;
    padding-left: 0;
  }
  .modal-body ul.kbd-list li::before {
    display: none;
  }
  .modal-body ul.kbd-list li > span {
    color: var(--text-dim);
    font-size: 13.5px;
  }
  .modal-body strong {
    color: var(--text);
    font-weight: 600;
  }
  kbd {
    display: inline-block;
    padding: 2px 8px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 11.5px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 5px;
    color: var(--text);
    min-width: 24px;
    text-align: center;
    flex-shrink: 0;
  }

  /* Reset scope picker modal: step 1 of the two-step reset flow. The
     user selects which scope to clear (project notes, project selections,
     or the whole system); step 2 is the confirm modal below. The
     "system" option disables the other two via :has(input:disabled). */
  .modal-content.modal-reset-scope {
    max-width: 520px;
  }
  .reset-scope-sub {
    font-size: 13.5px !important;
    color: var(--text-dim) !important;
    margin: 0 0 16px !important;
    line-height: 1.55 !important;
  }
  .reset-scope-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
  }
  .reset-scope-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .reset-scope-option:hover {
    background: var(--surface-3);
    border-color: var(--text-mute);
  }
  .reset-scope-option:has(input:checked) {
    border-color: var(--accent);
    background: var(--hero-grad);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.14);
  }
  .reset-scope-option.danger:has(input:checked) {
    border-color: #dc2626;
    background: rgba(239, 68, 68, 0.08);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.16);
  }
  .reset-scope-option input[type="checkbox"] {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    flex-shrink: 0;
    cursor: pointer;
  }
  .reset-scope-option.danger input[type="checkbox"] {
    accent-color: #dc2626;
  }
  /* Disabled state: when "system" is chosen the other two scope
     options are disabled (selecting system implies them anyway). */
  .reset-scope-option:has(input:disabled) {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
  }
  .reset-scope-icon {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
  }
  .reset-scope-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }
  .reset-scope-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.005em;
  }
  .reset-scope-option.danger .reset-scope-title {
    color: #dc2626;
  }
  [data-theme="light"] .reset-scope-option.danger .reset-scope-title {
    color: #b91c1c;
  }
  .reset-scope-desc {
    font-size: 12.5px;
    color: var(--text-dim);
    line-height: 1.5;
  }
  .reset-scope-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
  }

  /* Confirm modal: a small centered dialog with an icon, title,
     message and action buttons. Used for destructive confirmations
     and the framework-switch flow. */
  .modal-content.modal-confirm {
    max-width: 420px;
    padding: 28px 24px 22px;
    text-align: center;
  }
  .modal-confirm-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 14px;
  }
  .modal-confirm h3 {
    margin: 0 0 8px;
    font-size: 17px;
    color: var(--text);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
  }
  .modal-confirm p,
  .modal-confirm #confirmMessage {
    color: var(--text-dim);
    margin: 0 0 22px;
    font-size: 14px;
  }
  .modal-confirm-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
  }
  /* The framework-switch confirm is information-dense (from/to cards
     plus an effects list), so widen the modal for it. */
  .modal-content.modal-confirm.modal-confirm--wide {
    max-width: 520px;
  }

  /* Framework-switching confirm UI: a "from card -> to card" flow on
     top, followed by a color-coded effects list explaining what gets
     cleared and what is kept when the user changes framework. */
  .fw-switch-confirm {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .fw-switch-confirm .fw-switch-intro {
    text-align: center;
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    margin: 0;
  }
  .fw-switch-row {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
  }
  .fw-switch-card {
    flex: 1 1 0;
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 12px 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }
  .fw-switch-card.from {
    opacity: 0.78;
  }
  .fw-switch-card.to {
    border-color: var(--accent);
    background: var(--hero-grad);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.16);
  }
  .fw-switch-tag {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 9.5px;
    color: var(--text-mute);
    font-weight: 700;
  }
  .fw-switch-card.to .fw-switch-tag {
    color: var(--accent);
  }
  .fw-switch-emoji {
    font-size: 26px;
    line-height: 1;
    margin: 2px 0;
  }
  .fw-switch-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
    word-break: break-word;
  }
  .fw-switch-arrow {
    align-self: center;
    font-size: 20px;
    color: var(--accent);
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
  }

  /* Effects list: color-coded rows showing which marks the framework
     switch clears (red) versus which are preserved (green). */
  .fw-switch-effects {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .fw-switch-effects li {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 9px 12px !important;
    border-radius: 8px;
    border: 1px solid var(--border);
    font-size: 13px;
    color: var(--text);
    margin: 0 !important;
    line-height: 1.4;
  }
  .fw-switch-effects li::before {
    display: none !important;
  }
  .fw-switch-effects li.effect-clear {
    border-color: rgba(239, 68, 68, 0.45);
    background: rgba(239, 68, 68, 0.08);
  }
  .fw-switch-effects li.effect-keep {
    border-color: var(--mvp-border);
    background: var(--mvp-bg);
  }
  .fw-switch-effects .effect-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
  }
  .fw-switch-effects li.effect-clear .effect-icon {
    background: rgba(239, 68, 68, 0.18);
    color: #ef4444;
  }
  .fw-switch-effects li.effect-keep .effect-icon {
    background: var(--mvp-strong);
    color: var(--mvp);
  }
  [data-theme="light"] .fw-switch-effects li.effect-clear {
    background: rgba(239, 68, 68, 0.07);
  }

  @media (max-width: 460px) {
    .fw-switch-row {
      flex-direction: column;
      gap: 8px;
    }
    .fw-switch-arrow {
      transform: rotate(90deg);
      align-self: center;
    }
  }
  .btn.danger-solid {
    background: #dc2626;
    color: #fff;
    border-color: #dc2626;
    font-weight: 600;
  }
  .btn.danger-solid:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    filter: none;
  }