/* ============================================================
   The Pre Summit Podcast Plan — Pamela Krista design system
   Editorial, muted-lavender, generous whitespace. Built on tokens.css.
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  background: var(--bg-page);
  color: var(--ink-soft);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* soft lavender wash at the top of every page, fading into the page */
body::before {
  content: "";
  position: fixed; inset: 0 0 auto 0; height: 480px;
  background: linear-gradient(180deg, #F1ECFD 0%, rgba(253,251,254,0) 100%);
  z-index: -1; pointer-events: none;
}

/* ---- top nav ---- */
.wf-bar {
  height: 56px; display: flex; align-items: center; gap: var(--space-6);
  padding: 0 var(--space-8);
  background: rgba(253,251,254,0.82); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50;
}
.wf-bar .brand {
  font-family: var(--font-display); font-weight: var(--fw-display);
  font-size: 1.15rem; color: var(--ink-plum); text-decoration: none;
  letter-spacing: var(--tracking-display);
}
.wf-bar nav { display: flex; gap: var(--space-6); margin-left: auto; }
.wf-bar nav a {
  color: var(--ink-muted); text-decoration: none; font-size: var(--text-sm);
  font-weight: var(--fw-medium); padding: 4px 2px; transition: color var(--dur-fast) var(--ease);
}
.wf-bar nav a:hover { color: var(--ink-plum); }
.wf-bar nav a.active { color: var(--accent); border-bottom: 2px solid var(--accent); }

/* ---- layout ---- */
.page { max-width: var(--container-wide); margin: 0 auto; padding: var(--space-16) var(--space-6); }
.reading { max-width: var(--container); margin: 0 auto; }
.stack > * + * { margin-top: var(--space-5); }

/* ---- type ---- */
.eyebrow {
  font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow); color: var(--ink-muted);
  font-weight: var(--fw-medium); margin-bottom: var(--space-3);
}
h1.wf, h2.wf, h3.wf {
  font-family: var(--font-display); font-weight: var(--fw-display);
  color: var(--ink-plum); line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}
h1.wf { font-size: clamp(2.4rem, 5vw, var(--text-4xl)); }
h2.wf { font-size: var(--text-2xl); }
h3.wf { font-size: var(--text-lg); line-height: var(--leading-snug); }
.wf-pop { font-style: italic; color: var(--accent); }
p { color: var(--ink-soft); }
.note { font-size: var(--text-sm); color: var(--ink-muted); }

/* fallback placeholder bars (rarely shown now) */
.ph { height: 11px; background: var(--bg-soft); border-radius: 4px; }
.ph + .ph { margin-top: 9px; }
.ph.w90{width:90%} .ph.w80{width:80%} .ph.w70{width:70%} .ph.w60{width:60%} .ph.w50{width:50%} .ph.w40{width:40%}

/* ---- cards + sections ---- */
.card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-8);
  box-shadow: var(--shadow-card);
}
.region {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-8);
  box-shadow: var(--shadow-card);
}
.region > .region-label {
  display: block; font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow); color: var(--accent);
  font-weight: var(--fw-medium); margin-bottom: var(--space-4);
}

/* soft rounded media / icon placeholders */
.box {
  background: var(--bg-soft); border: none; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-muted); font-size: var(--text-sm); text-align: center;
  padding: var(--space-4);
}
.box.sq { aspect-ratio: 1; }
.box.icon {
  width: 44px; height: 44px; border-radius: 0; flex: none;
  background: transparent; color: var(--ink-plum); padding: 0;
  justify-content: flex-start;
}
.box.icon svg { width: 34px; height: 34px; }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--fw-medium);
  padding: var(--space-3) var(--space-6); border-radius: var(--radius-pill);
  border: 1px solid transparent; cursor: pointer;
  background: var(--pk-lavender); color: var(--ink-plum);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.btn.primary { background: var(--gradient-btn); color: var(--ink-plum); }
.btn.primary:hover { box-shadow: var(--shadow-glow); }
.btn.ghost { background: transparent; border-color: var(--border); color: var(--ink-plum); }
.btn.ghost:hover { background: var(--bg-soft); box-shadow: none; }
.btn-row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }

/* ---- chips ---- */
.chip {
  display: inline-block; font-size: var(--text-sm); font-weight: var(--fw-medium);
  padding: 4px 14px; border-radius: var(--radius-pill);
  background: var(--chip-lavender); border: none; color: var(--ink-plum);
}

/* ---- form fields ---- */
.field label { display: block; font-size: var(--text-sm); color: var(--ink-plum); margin-bottom: 6px; font-weight: var(--fw-medium); }
.field input, .field textarea {
  width: 100%; font-family: var(--font-body); font-size: var(--text-base);
  padding: var(--space-3) var(--space-4); border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--bg-card); color: var(--ink-plum);
  resize: vertical; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--pk-lavender); box-shadow: var(--ring-focus);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-muted); }
.field + .field { margin-top: var(--space-5); }

/* ---- grids ---- */
.grid { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 800px){ .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* ============================================================
   ROADMAP (landing)
   ============================================================ */
.roadmap { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-4); margin-top: var(--space-8); }
@media (max-width: 900px){ .roadmap { grid-template-columns: repeat(2, 1fr); } }
.roadmap .node {
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--space-5); background: var(--bg-card); cursor: pointer; min-height: 168px;
  display: flex; flex-direction: column; gap: var(--space-2);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.roadmap .node:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.roadmap .wk-num { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--text-lg); color: var(--pk-lavender); line-height: 1; }
.roadmap .wk-num b { color: var(--ink-plum); font-weight: var(--fw-display); }
.roadmap .wk-title { font-weight: var(--fw-medium); color: var(--ink-plum); font-size: var(--text-base); }
.roadmap .wk-desc { font-size: var(--text-sm); color: var(--ink-muted); }

/* ============================================================
   WIZARD (week interior)
   ============================================================ */
.progress-wrap { background: rgba(253,251,254,0.9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); position: sticky; top: 56px; z-index: 40; }
.progress-inner { max-width: var(--container-wide); margin: 0 auto; padding: var(--space-4) var(--space-6); }
.progress-track { display: flex; gap: 8px; margin-top: var(--space-3); }
.progress-track .seg { flex: 1; height: 6px; border-radius: var(--radius-pill); background: var(--bg-soft); transition: background var(--dur-base) var(--ease); }
.progress-track .seg.done { background: var(--pk-lavender); }
.progress-track .seg.current { background: var(--accent); }

.week-tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4); }
.week-tabs button {
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--fw-medium); cursor: pointer;
  padding: 6px 16px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--bg-card); color: var(--ink-soft);
  transition: all var(--dur-fast) var(--ease);
}
.week-tabs button:hover { border-color: var(--pk-lavender); color: var(--ink-plum); }
.week-tabs button.active { background: var(--ink-plum); color: #fff; border-color: var(--ink-plum); }

.wizard-foot { display: flex; justify-content: space-between; margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--border); }

.save-status { font-size: var(--text-sm); color: var(--ink-muted); }
.save-status.saved { color: #3a7d44; }

/* ============================================================
   RESOURCE LIBRARY
   ============================================================ */
.lib-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); margin-top: var(--space-8); }
@media (max-width: 800px){ .lib-grid { grid-template-columns: 1fr; } }
.lib-card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-card); padding: var(--space-6); display: flex; gap: var(--space-5); box-shadow: var(--shadow-card); transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
.lib-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.lib-card .meta { flex: 1; }
.lib-card .ep-title { font-weight: var(--fw-regular); color: var(--ink-plum); margin: 8px 0 4px; }
.filter-row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); }
.filter-row .chip { cursor: pointer; transition: all var(--dur-fast) var(--ease); }

footer.wf-foot { text-align: center; color: var(--ink-muted); font-size: var(--text-sm); padding: var(--space-12) var(--space-6); border-top: 1px solid var(--border); margin-top: var(--space-16); }