/* ==========================================================================
   Prompt Wizards v1.0 — app.css
   Vanilla CSS · soft palette · ipa- namespace (Joomla-future-safe)
   Universal file: identical in both wizard folders.
   ========================================================================== */

/* ── Design tokens ─────────────────────────────────────────────────────── */
:root{
  --bg:#F5F3EE;
  --panel:#FFFFFF;
  --panel-2:#FBFAF6;
  --ink:#3D3A34;
  --ink-soft:#6B665C;
  --muted:#9A948A;
  --line:#E7E2D8;
  --accent:#8FAE8B;              /* sage */
  --accent-deep:#6E8F6A;
  --accent-soft:#EDF4EC;
  --danger:#C98A8A;
  --radius:14px;
  --radius-sm:10px;
  --shadow-1:0 1px 2px rgba(61,58,52,.05), 0 2px 10px rgba(61,58,52,.05);
  --shadow-2:0 6px 18px rgba(61,58,52,.10), 0 14px 40px rgba(61,58,52,.08);
  --speed:.28s;
  --font:'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

/* ── Base ──────────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--font);
  font-size:15px;
  line-height:1.45;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
h1,h2,h3,p,ul{ margin:0; }
ul{ padding:0; list-style:none; }
svg.ipa-i{ width:1.05em; height:1.05em; flex:none; vertical-align:-.15em; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }

/* ── Top bar ───────────────────────────────────────────────────────────── */
.ipa-topbar{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:10px 18px;
  background:var(--panel);
  border-bottom:1px solid var(--line);
}
.ipa-brand{ display:flex; align-items:center; gap:11px; }
.ipa-brand-mark{
  display:grid; place-items:center;
  width:36px; height:36px; border-radius:11px;
  color:var(--accent-deep);
  background:linear-gradient(135deg, var(--accent-soft), #F2EFF9);
  border:1px solid var(--line);
}
.ipa-brand-text strong{ display:block; font-size:.95rem; line-height:1.2; }
.ipa-brand-text small{ color:var(--muted); font-size:.72rem; }
.ipa-topbar-note{
  display:flex; align-items:center; gap:8px;
  padding:6px 14px; border-radius:999px;
  font-size:.8rem; color:var(--ink-soft);
  background:var(--panel-2); border:1px solid var(--line);
}

/* ── App layout (3 columns) ────────────────────────────────────────────── */
.ipa-app{
  display:grid;
  grid-template-columns:262px minmax(0,1fr) minmax(360px,430px);
  gap:14px;
  max-width:1760px;
  margin:0 auto;
  padding:14px;
  align-items:start;
  transition:grid-template-columns .5s cubic-bezier(.4,0,.2,1);
}
.ipa-app.focus-mode{
  grid-template-columns:218px minmax(0,1fr) minmax(470px,580px);
}

.ipa-panel-sessions,
.ipa-panel-builder,
.ipa-panel-preview{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-1);
  overflow:hidden;
}
.ipa-panel-sessions,
.ipa-panel-preview{
  position:sticky; top:76px;
  display:flex; flex-direction:column;
  height:calc(100vh - 92px);
}
.ipa-panel-builder{ min-height:calc(100vh - 92px); }

/* ── Left panel · sessions ─────────────────────────────────────────────── */
.ipa-sessions-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 12px 12px 16px;
  border-bottom:1px solid var(--line);
}
.ipa-sessions-title{
  display:flex; align-items:center; gap:8px;
  font-size:.78rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-soft);
}
.ipa-session-list{
  flex:1; overflow-y:auto;
  padding:8px;
  display:flex; flex-direction:column; gap:5px;
}
.ipa-session-tab{
  display:flex; align-items:center; gap:10px;
  width:100%; text-align:left;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  color:var(--ink-soft);
  transition:background var(--speed), border-color var(--speed),
             color var(--speed), transform .18s ease;
}
.ipa-session-tab:hover{ background:var(--panel-2); transform:translateX(2px); }
.ipa-session-item.is-active .ipa-session-tab{
  background:var(--accent-soft);
  border-color:var(--accent);
  color:var(--ink);
}
.ipa-session-name{
  flex:1; font-size:.9rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ipa-session-badge{
  display:grid; place-items:center;
  min-width:22px; height:22px; padding:0 6px;
  border-radius:999px;
  background:rgba(61,58,52,.07);
  font-size:.72rem; color:var(--ink-soft);
  transition:background var(--speed);
}
.ipa-session-item.is-active .ipa-session-badge{
  background:#fff; border:1px solid var(--accent);
}
.ipa-session-rename{
  width:100%; font:inherit; font-size:.9rem;
  padding:4px 8px;
  border:1px solid var(--accent); border-radius:8px;
  background:#fff;
}
.ipa-sessions-foot{ padding:10px; border-top:1px solid var(--line); }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.ipa-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:9px 14px;
  border-radius:11px; border:1px solid transparent;
  font-size:.86rem; font-weight:600;
  user-select:none;
  transition:transform .18s ease, box-shadow .18s ease,
             background var(--speed), border-color var(--speed), color var(--speed);
}
.ipa-btn:active{ transform:translateY(1px) scale(.99); }
.ipa-btn:disabled{ opacity:.4; cursor:not-allowed; }
.ipa-btn-lg{ padding:11px 16px; }
.ipa-btn-block{ width:100%; }
.ipa-btn-solid{
  background:var(--accent); color:#fff;
  box-shadow:0 2px 8px rgba(143,174,139,.35);
}
.ipa-btn-solid:hover{ background:var(--accent-deep); box-shadow:0 4px 14px rgba(143,174,139,.45); }
.ipa-btn-outline{ background:#fff; border-color:var(--line); color:var(--ink-soft); }
.ipa-btn-outline:hover{ border-color:var(--accent); color:var(--ink); background:var(--accent-soft); }
.ipa-btn-soft{ background:var(--accent-soft); border-color:#D9E6D6; color:#4F6B4C; }
.ipa-btn-soft:hover{ background:#E1EEE0; }
.ipa-btn-ghost{ color:var(--ink-soft); }
.ipa-btn-ghost:hover{ background:var(--panel-2); color:var(--ink); }
.ipa-btn-icon{
  display:inline-grid; place-items:center;
  width:32px; height:32px;
  border-radius:9px; border:1px solid var(--line);
  color:var(--ink-soft);
  transition:all var(--speed);
}
.ipa-btn-icon:hover{ background:var(--panel-2); color:var(--ink); }
.ipa-btn-icon.is-armed{
  background:var(--danger); border-color:var(--danger); color:#fff;
  animation:ipa-pulse .9s ease infinite;
}
@keyframes ipa-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(201,138,138,.45); }
  50%    { box-shadow:0 0 0 6px rgba(201,138,138,0); }
}

/* ── Center panel · progress + cards ───────────────────────────────────── */
.ipa-builder-top{
  display:flex; align-items:center; gap:12px;
  padding:12px 16px;
  border-bottom:1px solid var(--line);
  background:var(--panel-2);
}
.ipa-progress-wrap{ flex:1; }
.ipa-progress-label{
  display:flex; justify-content:space-between;
  font-size:.76rem; color:var(--ink-soft); margin-bottom:5px;
}
.ipa-progress-track{
  height:7px; border-radius:999px;
  background:var(--line); overflow:hidden;
}
.ipa-progress-fill{
  height:100%; width:0;
  border-radius:999px;
  background:linear-gradient(90deg, var(--accent), #A9C6A5);
  transition:width .5s cubic-bezier(.4,0,.2,1);
}
.ipa-only-mobile{ display:none; }

.ipa-cards{
  padding:16px;
  display:flex; flex-direction:column; gap:12px;
}

/* Card shell */
.ipa-card{
  border:1px solid var(--line);
  border-left:4px solid var(--card, var(--accent));
  border-radius:var(--radius);
  background:#fff;
  overflow:hidden;
  transition:box-shadow var(--speed), border-color var(--speed);
}
.ipa-card:hover{ box-shadow:var(--shadow-1); }
.ipa-card.is-open{ box-shadow:var(--shadow-2); }
.ipa-card.is-complete{ border-left-color:var(--card); }
.ipa-card.is-complete:not(.is-open) .ipa-card-title{ color:var(--ink-soft); }

/* Card header (click target) */
.ipa-card-head{
  display:flex; align-items:center; gap:11px;
  padding:13px 16px;
  cursor:pointer; user-select:none;
  transition:background var(--speed);
}
.ipa-card-head:hover{ background:var(--panel-2); }
.ipa-card-icon{
  display:grid; place-items:center;
  width:34px; height:34px; flex:none;
  border-radius:10px;
  color:var(--card);
  background:var(--card-soft);
  border:1px solid var(--card);
  opacity:.85;
}
.ipa-card-num{
  font-size:.72rem; font-weight:700; color:var(--muted);
  letter-spacing:.05em;
}
.ipa-card-title{ font-size:1rem; font-weight:700; flex:1; }
.ipa-card-count{
  font-size:.74rem; color:var(--card);
  font-weight:600; white-space:nowrap;
}
.ipa-card-done{
  display:grid; place-items:center;
  color:var(--muted); opacity:.25;
  transition:opacity var(--speed), color var(--speed), transform .3s ease;
}
.ipa-card-done.is-done{
  opacity:1; color:var(--card);
  transform:scale(1.15);
}
.ipa-card-chevron{
  display:grid; place-items:center;
  color:var(--muted);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.ipa-card.is-open .ipa-card-chevron{ transform:rotate(180deg); }

/* Summary strip (visible when collapsed & has selections) */
.ipa-card-summary{
  display:none;
  padding:0 16px 12px 31px;
  line-height:1.9;
}
.ipa-card.is-complete:not(.is-open) .ipa-card-summary{ display:block; }
.ipa-mini-chip{
  display:inline-block;
  padding:2px 10px; margin:2px 3px 2px 0;
  border-radius:999px;
  background:var(--ph,#EEF2F7);
  border:1px solid var(--phb,#7C9EC9);
  font-size:.73rem; color:var(--ink-soft);
  animation:ipa-pop .25s ease both;
}

/* Collapsible body */
.ipa-card-body{
  max-height:0; opacity:0;
  overflow:hidden;
  transition:max-height .5s cubic-bezier(.4,0,.2,1), opacity .35s ease;
}
.ipa-card.is-open .ipa-card-body{
  max-height:3200px;
  opacity:1;
}

/* Subsections + chips */
.ipa-subsection{
  padding:14px 16px 4px;
  animation:ipa-fade-up .4s ease both;
}
.ipa-sub-title{ font-size:.85rem; font-weight:700; }
.ipa-sub-hint{ font-size:.76rem; color:var(--muted); margin:2px 0 10px; }
.ipa-chip-row{ display:flex; flex-wrap:wrap; gap:7px; padding-bottom:12px; }
.ipa-chip{
  padding:7px 13px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--panel-2);
  font-size:.8rem; color:var(--ink-soft);
  transition:all .2s ease;
}
.ipa-chip:hover{
  border-color:var(--card);
  color:var(--ink);
  transform:translateY(-1px);
  box-shadow:var(--shadow-1);
}
.ipa-chip.is-selected{
  background:var(--card-soft);
  border-color:var(--card);
  color:var(--ink);
  font-weight:600;
  box-shadow:inset 0 0 0 1px var(--card);
}
.ipa-chip.is-selected::before{
  content:'✓';
  font-size:.72em; font-weight:700;
  margin-right:5px; color:var(--card);
}

/* Card footer nav */
.ipa-card-nav{
  display:flex; gap:10px; justify-content:space-between;
  padding:12px 16px;
  border-top:1px solid var(--line);
  background:var(--panel-2);
}

/* ── Right panel · preview / editor ────────────────────────────────────── */
.ipa-preview-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px;
  border-bottom:1px solid var(--line);
  background:var(--panel-2);
}
.ipa-preview-title{
  display:flex; align-items:center; gap:8px;
  font-weight:700; font-size:.92rem;
}
.ipa-preview-hint{ font-size:.74rem; color:var(--muted); margin-right:auto; }

.ipa-editor-wrap{ flex:1; display:flex; min-height:0; }
.ipa-editor{
  flex:1;
  margin:12px; padding:14px 16px;
  overflow-y:auto;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--panel-2);
  font-size:.92rem; line-height:2;
  transition:border-color var(--speed), background var(--speed);
}
.ipa-editor:focus{ outline:none; border-color:var(--accent); background:#fff; }
.ipa-editor.is-empty::before{
  content:attr(data-placeholder);
  color:var(--muted);
  pointer-events:none;
  display:block;
  font-style:italic;
}

/* Section lines inside the editor */
.ipa-line{ margin:0 0 .45em; }
.ipa-line-label{ font-weight:700; font-size:.82em; letter-spacing:.01em; }

/* Color-coded phrase highlights */
.ipa-phrase{
  background:var(--ph,#EAF1F9);
  box-shadow:inset 0 0 0 1px var(--phb,#7C9EC9);
  border-radius:8px;
  padding:1px 6px 2px;
  margin:0 2px;
  white-space:nowrap;
  transition:background .25s ease, box-shadow .25s ease;
}
.ipa-phrase::after{
  content:'';
  display:inline-block;
  width:6px; height:6px;
  margin-left:6px;
  border-radius:50%;
  background:var(--phb,#7C9EC9);
  vertical-align:middle;
}
.ipa-line[data-section="constraints"] .ipa-phrase{
  background:#F9EDED;
  box-shadow:inset 0 0 0 1px #C98A8A;
  text-decoration:line-through;
  text-decoration-color:rgba(201,138,138,.55);
  text-decoration-thickness:1.5px;
}
.ipa-line[data-section="constraints"] .ipa-phrase::after{ background:#C98A8A; }

.ipa-preview-actions{
  display:flex; flex-direction:column; gap:8px;
  padding:0 12px 8px;
}
.ipa-preview-note{
  display:flex; align-items:center; gap:7px;
  padding:0 18px 14px;
  font-size:.72rem; color:var(--muted);
}
.ipa-preview-note svg{ flex:none; }

/* ── Modal ─────────────────────────────────────────────────────────────── */
.ipa-modal-backdrop{
  position:fixed; inset:0; z-index:100;
  display:grid; place-items:center;
  background:rgba(61,58,52,.35);
  backdrop-filter:blur(3px);
  opacity:0;
  transition:opacity .22s ease;
}
.ipa-modal-backdrop.is-shown{ opacity:1; }
.ipa-modal-backdrop[hidden]{ display:none; }
.ipa-modal{
  width:min(420px, calc(100vw - 32px));
  background:#fff;
  border-radius:var(--radius);
  box-shadow:var(--shadow-2);
  transform:translateY(14px) scale(.97);
  transition:transform .25s cubic-bezier(.34,1.4,.64,1);
}
.ipa-modal-backdrop.is-shown .ipa-modal{ transform:translateY(0) scale(1); }
.ipa-modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
}
.ipa-modal-head h3{
  display:flex; align-items:center; gap:8px;
  font-size:.95rem;
}
.ipa-modal-body{ padding:16px; }
.ipa-check{
  display:flex; align-items:center; gap:10px;
  padding:11px 13px;
  border:1px solid var(--line); border-radius:var(--radius-sm);
  cursor:pointer; font-size:.88rem;
  transition:border-color var(--speed), background var(--speed);
}
.ipa-check:hover{ border-color:var(--accent); background:var(--accent-soft); }
.ipa-check input{ accent-color:var(--accent); width:16px; height:16px; }
.ipa-modal-note{ margin-top:10px; font-size:.78rem; color:var(--muted); }
.ipa-modal-foot{ padding:0 16px 16px; }

/* ── Toast ─────────────────────────────────────────────────────────────── */
.ipa-toast{
  position:fixed; left:50%; bottom:26px; z-index:120;
  display:flex; align-items:center; gap:9px;
  padding:11px 18px;
  border-radius:999px;
  background:var(--ink); color:#F5F3EE;
  font-size:.85rem;
  box-shadow:var(--shadow-2);
  opacity:0;
  transform:translate(-50%, 12px);
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
}
.ipa-toast.is-shown{ opacity:1; transform:translate(-50%, 0); }
.ipa-toast[hidden]{ display:none; }
.ipa-toast svg{ color:#A9C6A5; }

/* ── Funding popup ─────────────────────────────────────────────────────── */
.ipa-fund-backdrop{
  position:fixed; inset:0; z-index:110;
  display:grid; place-items:center;
  padding:16px;
  background:rgba(32,29,25,.55);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;
  transition:opacity .25s ease;
}
.ipa-fund-backdrop.is-shown{ opacity:1; }
.ipa-fund-backdrop[hidden]{ display:none; }
.ipa-fund-box{
  width:min(460px, 100%);
  background:#fff;
  border-radius:var(--radius);
  box-shadow:var(--shadow-2);
  padding:26px 26px 20px;
  text-align:center;
  transform:translateY(14px) scale(.97);
  transition:transform .3s cubic-bezier(.34,1.4,.64,1);
}
.ipa-fund-backdrop.is-shown .ipa-fund-box{ transform:translateY(0) scale(1); }
.ipa-fund-badge{
  display:grid; place-items:center;
  width:46px; height:46px;
  margin:0 auto 12px;
  border-radius:14px;
  color:var(--accent-deep);
  background:var(--accent-soft);
  border:1px solid #D9E6D6;
}
.ipa-fund-badge svg{ width:22px; height:22px; }
.ipa-fund-title{
  font-size:1.18rem; font-weight:800; line-height:1.3;
  margin-bottom:12px;
}
.ipa-fund-body{
  text-align:left;
  font-size:.86rem; line-height:1.6;
  color:var(--ink-soft);
}
.ipa-fund-body p{ margin:0 0 10px; }
.ipa-fund-body p:last-child{ margin-bottom:0; }
.ipa-fund-body strong{ color:var(--ink); }
.ipa-fund-actions{
  display:flex; flex-direction:column; gap:8px;
  margin:18px 0 10px;
}
.ipa-fund-actions a.ipa-btn{ text-decoration:none; }
.ipa-fund-support{ position:relative; }
.ipa-fund-amt{
  display:inline-grid; place-items:center;
  margin-left:4px;
  padding:1px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.25);
  font-size:.78em; font-weight:700;
}
.ipa-fund-note{
  font-size:.72rem; color:var(--muted);
  margin:0;
}

/* ── Entrance animations ───────────────────────────────────────────────── */
@keyframes ipa-fade-up{
  from{ opacity:0; transform:translateY(6px); }
  to  { opacity:1; transform:translateY(0); }
}
@keyframes ipa-pop{
  from{ opacity:0; transform:scale(.8); }
  to  { opacity:1; transform:scale(1); }
}

/* ── Scrollbars ────────────────────────────────────────────────────────── */
.ipa-session-list::-webkit-scrollbar,
.ipa-editor::-webkit-scrollbar,
.ipa-panel-builder::-webkit-scrollbar{ width:9px; }
.ipa-session-list::-webkit-scrollbar-thumb,
.ipa-editor::-webkit-scrollbar-thumb,
.ipa-panel-builder::-webkit-scrollbar-thumb{
  background:var(--line); border-radius:999px;
  border:2px solid var(--panel);
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width:1180px){
  .ipa-app,
  .ipa-app.focus-mode{
    grid-template-columns:232px minmax(0,1fr);
    grid-template-areas:"sessions builder";
  }
  .ipa-panel-sessions{ grid-area:sessions; }
  .ipa-panel-builder{ grid-area:builder; }
  .ipa-panel-preview{
    grid-area:builder;
    display:none;
    position:fixed; inset:76px 12px 12px auto;
    width:min(480px, calc(100vw - 24px));
    z-index:70;
    box-shadow:var(--shadow-2);
  }
  .ipa-app.show-preview .ipa-panel-preview{ display:flex; }
  .ipa-only-mobile{ display:inline-flex; }
}
@media (max-width:820px){
  .ipa-app,
  .ipa-app.focus-mode{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"builder";
    padding:10px; gap:0;
  }
  .ipa-panel-sessions{
    display:none;
    position:fixed; inset:76px auto 12px 12px;
    width:min(300px, calc(100vw - 24px));
    z-index:70;
    box-shadow:var(--shadow-2);
  }
  .ipa-app.show-sessions .ipa-panel-sessions{ display:flex; }
  .ipa-topbar-note{ display:none; }
  .ipa-builder-top{ flex-wrap:wrap; }
  .ipa-progress-wrap{ min-width:160px; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
  }
}