/* ═══════════════════════════════════════════════════════════
   FICTION IGNITION — Interview / Workshop styles
   Used by: workshop.html, character-generator.html, story-arc.html
   Builds on tokens + .app-card/.app-layout/.app-sidebar from
   global.css / app.css.
═══════════════════════════════════════════════════════════ */

/* ── Section tabs (Protagonist / Antagonist) ────────────────*/
.iv-tabs {
  display: flex; gap: .5rem; margin-bottom: 1.5rem; flex-wrap: wrap;
}
.iv-tab {
  font-family: var(--font-ui); font-size: .85rem; font-weight: 500;
  padding: .6rem 1.1rem; border-radius: var(--r-sm);
  border: 1.5px solid var(--border-strong); background: var(--white);
  color: var(--muted); cursor: pointer; transition: all .15s;
}
.iv-tab:hover { border-color: var(--navy-light); color: var(--navy); }
.iv-tab.active {
  background: var(--navy); border-color: var(--navy); color: #fff;
  box-shadow: var(--shadow-navy);
}

/* ── Genre picker (Setting & World Building, gated before iv-stage) ──*/
.iv-genre-picker {
  padding: .5rem 0 1.25rem;
}
.iv-genre-picker-title {
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 600;
  color: var(--navy); margin-bottom: .35rem;
}
.iv-genre-picker-sub {
  font-size: .88rem; color: var(--muted); font-style: italic; margin-bottom: 1.1rem;
}

/* ── Intro line ──────────────────────────────────────────────*/
.iv-intro {
  font-family: var(--font-body); font-style: italic; font-size: .95rem;
  color: var(--ink-soft); line-height: 1.7; margin-bottom: 1.5rem;
  padding-bottom: 1.25rem; border-bottom: 1px solid var(--border);
}

/* ── Access gate (trial expired / not signed in) ────────────*/
.iv-gate {
  text-align: center; padding: 2.5rem 1.5rem;
  border: 1.5px dashed var(--border-strong); border-radius: var(--r-md);
  background: var(--parchment);
}
.iv-gate-icon { font-size: 2rem; margin-bottom: .75rem; }
.iv-gate p { font-size: .95rem; color: var(--ink-soft); max-width: 420px; margin: 0 auto 1.25rem; line-height: 1.6; }

/* ── Progress ────────────────────────────────────────────────*/
.iv-progress-wrap { margin-bottom: 1.5rem; }
.iv-progress-label {
  font-family: var(--font-ui); font-size: .74rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  margin-bottom: .5rem; display: block;
}
.iv-progress-bar { height: 5px; border-radius: 10px; background: var(--border); overflow: hidden; }
.iv-progress-fill {
  height: 100%; border-radius: 10px;
  background: linear-gradient(90deg, var(--orange-dark), var(--orange));
  transition: width .4s ease;
}

/* ── Question stage ──────────────────────────────────────────*/
.iv-question-card {
  background: var(--white); border: 1.5px solid var(--border);
  border-radius: var(--r-md); padding: 1.75rem;
  margin-bottom: 1.25rem;
}
.iv-question {
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 600;
  color: var(--navy); line-height: 1.5; margin-bottom: 1.1rem;
}
.iv-answer {
  width: 100%; min-height: 130px; resize: vertical;
  font-family: var(--font-body); font-size: .98rem; line-height: 1.65;
  color: var(--ink); background: var(--parchment);
  border: 1.5px solid var(--border-strong); border-radius: var(--r-sm);
  padding: .9rem 1rem; outline: none;
  transition: border-color .2s, box-shadow .2s, background .15s;
}
.iv-answer:focus {
  border-color: var(--orange); background: var(--white);
  box-shadow: 0 0 0 3px rgba(232,97,10,0.12);
}
.iv-answer-error { border-color: var(--error) !important; animation: ivShake .35s; }
@keyframes ivShake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
.iv-hint { font-family: var(--font-ui); font-size: .74rem; color: var(--muted); margin-top: .5rem; }

.iv-actions { display: flex; justify-content: space-between; gap: .75rem; margin-top: 1.25rem; }

/* ── Transcript (answered so far) ────────────────────────────*/
.iv-transcript { display: flex; flex-direction: column; gap: .85rem; margin-bottom: 1rem; }
.iv-transcript-item {
  background: var(--parchment); border-left: 3px solid var(--orange);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: .7rem .9rem;
}
.iv-transcript-q {
  font-family: var(--font-ui); font-size: .72rem; font-weight: 600;
  letter-spacing: .04em; color: var(--navy); margin-bottom: .3rem;
}
.iv-transcript-a { font-size: .85rem; color: var(--ink-soft); line-height: 1.55; }

/* ── Loading ──────────────────────────────────────────────────*/
.iv-loading { flex-direction: column; align-items: center; justify-content: center; padding: 3rem 1rem; text-align: center; }
.iv-loading p { font-size: .9rem; color: var(--muted); font-style: italic; margin-top: 1.1rem; }

/* ── Result / summary ─────────────────────────────────────────*/
.iv-result-card {
  background: var(--white); border: 1.5px solid var(--orange);
  border-radius: var(--r-md); padding: 1.75rem;
  animation: fadeUp .35s ease;
}
.iv-result-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.iv-title-input {
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 700;
  color: var(--navy); border: none; border-bottom: 1.5px dashed var(--border-strong);
  background: transparent; padding: .2rem 0; outline: none; flex: 1; min-width: 180px;
}
.iv-title-input:focus { border-bottom-color: var(--orange); }
.iv-result-actions { display: flex; gap: .3rem; flex-wrap: wrap; }
.iv-summary-text {
  font-family: var(--font-body); font-size: .96rem; line-height: 1.8;
  color: var(--ink); white-space: pre-wrap; margin-bottom: 1.25rem;
}
/* ── "File under story" row on the result card ───────────────*/
.iv-file-row {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .85rem 1rem; margin-bottom: 1.25rem;
  background: var(--parchment); border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.iv-file-label {
  font-family: var(--font-ui); font-size: .78rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}
.iv-file-select {
  font-family: var(--font-ui); font-size: .88rem; color: var(--navy);
  padding: .35rem .5rem; border: 1.5px solid var(--border-strong);
  border-radius: var(--r-sm); background: var(--white);
  cursor: pointer; max-width: 100%;
}
.iv-file-select:focus { outline: none; border-color: var(--orange); }
.iv-file-select:disabled { opacity: .6; cursor: default; }
.iv-file-status {
  font-family: var(--font-ui); font-size: .78rem; color: var(--muted); font-style: italic;
}
.iv-file-status.is-error { color: var(--orange); font-style: normal; }

.iv-restart-row { display: flex; justify-content: flex-end; padding-top: 1rem; border-top: 1px solid var(--border); }

/* ── Supporting Cast roster interstitial ─────────────────────*/
.iv-roster-stage { padding: .5rem 0 0; }
.iv-roster-count {
  font-family: var(--font-ui); font-size: .85rem; font-weight: 600;
  color: var(--navy); margin-bottom: .85rem;
}
.iv-roster-list { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.25rem; }
.iv-roster-item {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--parchment); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: .55rem .85rem;
  font-size: .85rem; color: var(--ink-soft);
}
.iv-roster-actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.iv-roster-actions .btn { flex: 1; justify-content: center; min-width: 190px; }

/* ── Trial badge (used on workshop hub + sidebar) ────────────*/
.trial-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--font-ui); font-size: .72rem; font-weight: 600;
  padding: .25rem .65rem; border-radius: 20px;
  background: rgba(232,97,10,0.1); color: var(--orange-dark);
  border: 1px solid rgba(232,97,10,0.3);
}
.trial-badge.expired { background: rgba(192,53,10,0.08); color: var(--error); border-color: rgba(192,53,10,0.3); }

/* ── Story Bible (story-bible.html, Section 5) ───────────────*/

/* Sidebar: project list + credits */
.sb-project-list { display: flex; flex-direction: column; gap: .35rem; max-height: 240px; overflow-y: auto; margin-bottom: .6rem; }
.sb-project-item {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  background: var(--sidebar-item-bg); border: 1px solid var(--sidebar-item-border);
  border-radius: var(--r-sm); padding: .55rem .75rem; cursor: pointer;
  font-family: var(--font-ui); font-size: .82rem; color: var(--sidebar-text-softer);
  transition: background .15s;
}
.sb-project-item:hover { background: var(--sidebar-item-bg-hover); }
.sb-project-item.active { background: rgba(232,97,10,.18); border-color: rgba(232,97,10,.4); color: var(--sidebar-text); }
.sb-project-item-count { font-size: .7rem; color: var(--sidebar-text-muted); }

.sb-credit-summary { font-family: var(--font-ui); font-size: .8rem; color: var(--sidebar-text-softest); line-height: 1.6; margin-bottom: .6rem; }
.sb-credit-summary strong { color: var(--sidebar-text); }

/* Main dashboard */
.sb-project-header {
  display: flex; flex-direction: column; gap: .6rem;
  padding-bottom: 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--border);
}
.sb-project-title-input {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--navy);
  border: none; border-bottom: 1.5px dashed var(--border-strong); background: transparent;
  padding: .2rem 0; outline: none;
}
.sb-project-title-input:focus { border-bottom-color: var(--orange); }
.sb-project-desc-input, .sb-project-notes {
  font-family: var(--font-body); font-size: .9rem; color: var(--ink-soft);
  border: 1.5px solid var(--border); border-radius: var(--r-sm); background: var(--parchment);
  padding: .6rem .8rem; outline: none; resize: vertical;
}
.sb-project-notes { min-height: 80px; }
.sb-project-desc-input:focus, .sb-project-notes:focus { border-color: var(--orange); background: var(--white); }
.sb-section-heading {
  font-family: var(--font-ui); font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--navy); margin: 1.75rem 0 .85rem;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}

.sb-unfiled-list, .sb-entries-list { display: flex; flex-direction: column; gap: .75rem; }
.sb-entry-card {
  border: 1.5px solid var(--border); border-radius: var(--r-md); background: var(--white);
  padding: 1rem 1.15rem;
}
.sb-entry-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: .5rem; }
.sb-entry-title { font-family: var(--font-ui); font-weight: 700; color: var(--ink); font-size: .95rem; }
.sb-entry-genre { font-size: .74rem; color: var(--muted); font-style: italic; margin-left: .4rem; }
.sb-entry-summary {
  font-size: .85rem; color: var(--ink-soft); line-height: 1.65; white-space: pre-wrap;
  max-height: 140px; overflow-y: auto; margin-bottom: .65rem;
  background: var(--parchment); border-radius: var(--r-sm); padding: .6rem .75rem;
}
.sb-entry-notes {
  width: 100%; min-height: 60px; font-family: var(--font-body); font-size: .84rem;
  border: 1.5px solid var(--border); border-radius: var(--r-sm); padding: .5rem .7rem;
  outline: none; resize: vertical; background: var(--parchment);
}
.sb-entry-notes:focus { border-color: var(--orange); background: var(--white); }
.sb-entry-notes-label { font-family: var(--font-ui); font-size: .68rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: .3rem; display: block; }
.sb-entry-actions { display: flex; gap: .4rem; margin-top: .5rem; flex-wrap: wrap; }
.sb-entry-delete:hover { color: var(--error); }

/* Outline / Timeline */
.sb-outline-tabs { display: flex; gap: .5rem; margin-bottom: .85rem; }
.sb-outline-textarea {
  width: 100%; min-height: 220px; font-family: var(--font-body); font-size: .92rem; line-height: 1.7;
  border: 1.5px solid var(--border-strong); border-radius: var(--r-sm); padding: .9rem 1rem;
  outline: none; resize: vertical; background: var(--parchment); color: var(--ink);
}
.sb-outline-textarea:focus { border-color: var(--orange); background: var(--white); }
.sb-outline-actions { display: flex; gap: .5rem; margin-top: .75rem; flex-wrap: wrap; }
.sb-credit-cost-note { font-family: var(--font-ui); font-size: .72rem; color: var(--muted); margin-top: .5rem; }

/* Checklist */
.sb-checklist-gate {
  text-align: center; padding: 2rem 1.5rem; border: 1.5px dashed var(--border-strong);
  border-radius: var(--r-md); background: var(--parchment);
}
.sb-checklist-gate p { font-size: .92rem; color: var(--ink-soft); max-width: 460px; margin: 0 auto 1rem; line-height: 1.6; }
.sb-checklist-category { margin-bottom: 1.35rem; }
.sb-checklist-category-title {
  font-family: var(--font-ui); font-size: .74rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--orange-dark); margin-bottom: .6rem;
}
.sb-checklist-item {
  display: flex; align-items: flex-start; gap: .6rem; padding: .5rem 0;
  border-bottom: 1px solid var(--border);
}
.sb-checklist-item:last-child { border-bottom: none; }
.sb-checklist-item input[type=checkbox] { margin-top: .3rem; width: 16px; height: 16px; accent-color: var(--orange); flex-shrink: 0; }
.sb-checklist-item-label { font-family: var(--font-ui); font-size: .88rem; font-weight: 600; color: var(--ink); }
.sb-checklist-item-label.done { text-decoration: line-through; color: var(--muted); }
.sb-checklist-item-notes { font-size: .8rem; color: var(--muted); margin-top: .15rem; line-height: 1.5; }

/* Credits modal */
.sb-pack-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; margin: 1.25rem 0; }
.sb-pack-card {
  border: 1.5px solid var(--border-strong); border-radius: var(--r-md); padding: 1rem;
  text-align: center; cursor: pointer; transition: border-color .15s, background .15s;
  background: var(--white);
}
.sb-pack-card:hover { border-color: var(--orange); background: var(--parchment); }
.sb-pack-credits { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: var(--navy); }
.sb-pack-price { font-family: var(--font-ui); font-size: .85rem; color: var(--orange-dark); font-weight: 600; margin-top: .25rem; }

/* ── Workshop hub (workshop.html) ────────────────────────────*/
.workshop-hero { text-align: center; padding: 3rem 0 2rem; }
.workshop-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.75rem;
  max-width: 1160px; margin: 0 auto;
}
.workshop-card {
  background: var(--white); border: 1.5px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md);
  display: flex; flex-direction: column;
}
.workshop-card-stripe { height: 4px; background: linear-gradient(90deg, var(--navy-dark), var(--navy), var(--orange), var(--orange-light)); }
.workshop-card-body { padding: 1.85rem; display: flex; flex-direction: column; flex: 1; }
.workshop-card-icon { font-size: 2rem; margin-bottom: .85rem; }
.workshop-card-title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: var(--navy); margin-bottom: .5rem; }
.workshop-card-desc { font-size: .9rem; color: var(--muted); line-height: 1.65; margin-bottom: 1.25rem; flex: 1; }
.workshop-subcards { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.25rem; }
.workshop-subcard {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .8rem 1rem; border: 1.5px solid var(--border); border-radius: var(--r-sm);
  text-decoration: none; transition: border-color .15s, background .15s;
}
.workshop-subcard:hover { border-color: var(--orange); background: var(--parchment); }
.workshop-subcard-label { font-family: var(--font-ui); font-size: .88rem; font-weight: 600; color: var(--ink); }
.workshop-subcard-sub { font-size: .78rem; color: var(--muted); }
.workshop-subcard-arrow { color: var(--orange); font-size: 1.1rem; }

.workshop-note {
  max-width: 640px; margin: 2.5rem auto 0; text-align: center;
  font-size: .88rem; color: var(--muted); font-style: italic; line-height: 1.7;
}

/* .workshop-grid uses auto-fit/minmax above, so it reflows from 4 → 2 → 1
   columns automatically as the viewport narrows — no breakpoints needed. */