/* ===== Sunnah Storyteller — shared "Create your story" configurator =====
   Fixed-choice builder (P1 hadith-first + P4 child-safety): age · virtue · angle · setting ·
   character · style · length · optional validated child first name. NO free-text story input.
   Used by BOTH the library modal and the story-page slide-over — one definition, two consumers.
   The MODAL/SLIDE-OVER SHELL is each page's own; this styles only the form content, via a
   --cfg-* token contract so it looks native in either context (each page maps the vars). */

.sidq-cfg{
  /* contract defaults (dark, ≈ library look) — each page overrides to track its own palette */
  --cfg-heading:#F6EFE6; --cfg-text:#C9B3E8; --cfg-dim:#8E7CA8;
  --cfg-surface:rgba(255,255,255,.045); --cfg-line:rgba(255,255,255,.10);
  --cfg-accent:#F4C9A0; --cfg-accent2:#E59A8A; --cfg-on-accent:#2A1B3A;
  --cfg-ghost-bg:rgba(255,255,255,.06); --cfg-ghost-bg-hover:rgba(255,255,255,.12); --cfg-ghost-border:rgba(255,255,255,.16);
}

.cfg-title{font-family:var(--f-display);font-weight:600;font-size:21px;line-height:1.15;color:var(--cfg-heading);text-align:left}
.cfg-intro{color:var(--cfg-text);font-size:14px;line-height:1.55;margin:6px 0 18px}
.cfg-section{display:flex;align-items:baseline;gap:9px;margin:0 0 14px;font-family:var(--f-display);font-weight:600;font-size:16px;color:var(--cfg-heading)}
.cfg-section.divider{margin-top:24px;padding-top:22px;border-top:1px solid var(--cfg-line)}
.cfg-sec-note{font-family:var(--f-label);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--cfg-dim)}
.cfg-opt{letter-spacing:.04em;text-transform:none;opacity:.8}
.cfg-group{margin-bottom:22px}
.cfg-label{display:block;margin-bottom:8px;font-family:var(--f-label);font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--cfg-text)}

/* single-select fields → segmented-control pills */
.cfg-pills{display:flex;gap:8px;flex-wrap:wrap}
.cfg-pill{font-family:var(--f-body);font-size:13px;font-weight:700;cursor:pointer;border:1.5px solid var(--cfg-line);
  background:var(--cfg-surface);color:var(--cfg-text);border-radius:999px;padding:9px 15px;min-height:40px;transition:.18s}
.cfg-pill:hover{border-color:color-mix(in srgb,var(--cfg-accent) 55%,transparent);color:var(--cfg-heading);background:var(--cfg-surface)}
.cfg-pill.on{background:var(--cfg-accent);color:var(--cfg-on-accent);border-color:var(--cfg-accent);
  box-shadow:0 6px 16px -8px color-mix(in srgb,var(--cfg-accent) 60%,transparent)}
.cfg-pill.on:hover{background:var(--cfg-accent);color:var(--cfg-on-accent)}
/* unavailable combo (no verified hadith anchor for this virtue+age yet) — greyed, not clickable */
.cfg-pill.cfg-off,.cfg-pill:disabled{opacity:.32;cursor:not-allowed;pointer-events:none;filter:grayscale(.4)}

.cfg-hint{font-size:12px;color:var(--cfg-dim);line-height:1.5;margin-top:8px}
.cfg-input{width:100%;background:var(--cfg-surface);border:1px solid var(--cfg-line);border-radius:10px;
  padding:11px 13px;color:var(--cfg-heading);font-family:inherit;font-size:15px}
.cfg-input::placeholder{color:var(--cfg-dim)}
.cfg-input:focus{outline:none;border-color:color-mix(in srgb,var(--cfg-accent) 55%,transparent)}
.cfg-req{font-size:12px;color:var(--cfg-dim);text-align:center;margin-top:10px}

/* buttons (self-contained — no dependency on page button classes) */
.cfg-btn{font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;border:none;border-radius:999px;
  padding:9px 15px;transition:.18s;display:inline-flex;align-items:center;justify-content:center;gap:7px}
.cfg-btn.block{width:100%;margin-top:6px}
.cfg-btn.primary{color:var(--cfg-on-accent);background:linear-gradient(135deg,var(--cfg-accent),var(--cfg-accent2));
  box-shadow:0 10px 26px -12px color-mix(in srgb,var(--cfg-accent) 55%,transparent)}
.cfg-btn.primary:hover{transform:translateY(-2px)}
.cfg-btn.ghost{color:var(--cfg-heading);background:var(--cfg-ghost-bg);border:1px solid var(--cfg-ghost-border)}
.cfg-btn.ghost:hover{background:var(--cfg-ghost-bg-hover)}
.cfg-btn:disabled{opacity:.5;cursor:default;transform:none}

/* generating + done views */
.cfg-gen,.cfg-done{text-align:center}
.gen-bar{height:8px;border-radius:999px;background:var(--cfg-line);overflow:hidden;margin:18px 0 14px}
.gen-fill{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--cfg-accent),var(--cfg-accent2));transition:width .5s ease}
.gen-step{text-align:center;font-family:var(--f-display);font-weight:600;font-size:18px;color:var(--cfg-heading)}
.done-check{width:54px;height:54px;border-radius:50%;margin:4px auto 12px;display:flex;align-items:center;justify-content:center;
  font-size:28px;font-weight:800;color:#fff;background:#3E8E5A;box-shadow:0 10px 26px -10px rgba(62,142,90,.7)}
.cfg-meta{font-size:12.5px;color:var(--cfg-dim);margin-top:5px}
.cfg-done-actions{display:flex;gap:10px;justify-content:center;margin-top:18px;flex-wrap:wrap}

@media (max-width:680px){
  .cfg-pill{min-height:44px;padding:10px 15px}   /* comfortable tap targets on mobile */
  .cfg-btn{min-height:44px}
}
@media (prefers-reduced-motion:reduce){
  .gen-fill{transition:none}
}