/* ==========================================================================
   IdeaSweetSpot — Apps 4 That Studio tool
   Layers on top of ../assets/css/styles.css (brand tokens, buttons, inputs).
   Studio Purple is the lead accent; the four circles use the core palette.
   ========================================================================== */

:root {
  --ss-care: var(--iss-blossom, #F7C9D6);  /* Care — Blossom (pale circle fill) */
  --ss-cap:  var(--iss-leaf,    #88D7B2);  /* Capability — Leaf                 */
  --ss-need: var(--iss-sky,     #CFE8F3);  /* Need — Sky                        */
  --ss-paid: var(--iss-butter,  #FFE09A);  /* Paid path — Butter                */
  --ss-maxw: 1180px;
}

.ss-body {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(124, 92, 255, 0.08), transparent 60%),
    var(--cloud);
  min-height: 100vh;
}

/* ---- Buttons not in the base sheet -------------------------------------- */
.btn--ghost {
  background: transparent;
  color: var(--midnight);
  border: 1.5px solid var(--border-strong);
}
.btn--ghost:hover { background: #fff; border-color: var(--purple); color: var(--purple); }
.btn--lg { padding: 0.95rem 1.6rem; font-size: 1.05rem; }

/* ---- App header --------------------------------------------------------- */
.ss-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.ss-header__inner {
  max-width: var(--ss-maxw); margin: 0 auto;
  padding: 0.7rem var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.ss-home { display: inline-flex; align-items: center; }
.ss-home img { display: block; height: 34px; width: auto; }
.ss-header__actions { display: flex; align-items: center; gap: 0.6rem; }
.ss-saved-btn { display: inline-flex; align-items: center; gap: 0.5rem; }
.ss-pill {
  display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem;
  padding: 0 0.4rem; border-radius: var(--r-pill);
  background: var(--purple); color: #fff; font-size: 0.78rem; font-weight: 800;
}

/* ---- Main / intro ------------------------------------------------------- */
.ss-main { max-width: var(--ss-maxw); margin: 0 auto; padding: 0 var(--gutter) var(--space-9); }
.ss-intro { padding: var(--space-8) 0 var(--space-6); max-width: 760px; }
.ss-intro h1 { font-size: var(--fs-h1); font-weight: 900; letter-spacing: -0.02em; margin: 0.4rem 0 0.6rem; }
.ss-lede { font-size: var(--fs-lede); color: var(--midnight); line-height: 1.5; margin: 0 0 1rem; }
.ss-boundary {
  font-size: 0.9rem; color: var(--muted); line-height: 1.55;
  background: #fff; border: 1px solid var(--border);
  border-left: 4px solid var(--purple);
  border-radius: var(--r-sm); padding: 0.75rem 0.95rem; margin: 0;
}
.ss-boundary strong { color: var(--midnight); }

/* ---- Workspace grid ----------------------------------------------------- */
.ss-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--space-6); align-items: start;
}
@media (max-width: 900px) {
  .ss-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .ss-header__inner {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.55rem;
  }
  .ss-home img {
    height: 28px;
    max-width: 128px;
  }
  .ss-header__actions {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.5rem;
  }
  .ss-header__actions .btn {
    min-width: 0;
    justify-content: center;
    padding: 0.68rem 0.55rem;
    text-align: center;
    white-space: normal;
  }
  .ss-saved-btn {
    gap: 0.35rem;
  }
  .ss-intro h1 {
    font-size: clamp(2rem, 10vw, 2.55rem);
    overflow-wrap: anywhere;
  }
  .ss-lede,
  .ss-boundary {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .ss-card {
    padding: 1.25rem;
  }
  .ss-circle__head {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .ss-circle__q {
    max-width: 100%;
    margin-left: 1.25rem;
    text-align: left;
  }
}

/* ---- Cards / steps ------------------------------------------------------ */
.ss-form { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.ss-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--space-5) var(--space-5) var(--space-5);
  box-shadow: var(--shadow-sm);
}
.ss-step { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.6rem; }
.ss-step__num {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: var(--r-pill);
  background: var(--purple-soft); color: var(--purple);
  font-weight: 800; font-size: 0.95rem;
}
.ss-step h2 { font-size: 1.18rem; font-weight: 800; margin: 0; letter-spacing: -0.01em; }
.ss-help { color: var(--muted); font-size: 0.9rem; margin: 0 0 0.9rem; }
.ss-opt { color: var(--muted); font-weight: 500; }
.ss-card .field { margin-bottom: 0.85rem; }
.ss-card .field:last-child { margin-bottom: 0; }
.ss-card label { font-weight: 700; font-size: 0.92rem; }

/* ---- Score circles (segmented 1–5) ------------------------------------- */
.ss-circles { display: flex; flex-direction: column; gap: 1rem; }
.ss-circle { border-radius: var(--r-md); padding: 0.6rem 0; }
.ss-circle__head { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.45rem; }
.ss-circle__dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; transform: translateY(1px); }
.ss-circle__name { font-weight: 800; font-size: 1rem; }
.ss-circle__q { color: var(--muted); font-size: 0.86rem; font-weight: 500; margin-left: auto; text-align: right; max-width: 60%; }
.ss-seg { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.4rem; }
.ss-seg button {
  font: inherit; font-weight: 800; cursor: pointer;
  border: 1.5px solid var(--border-strong); background: #fff; color: var(--muted);
  border-radius: var(--r-sm); padding: 0.6rem 0; min-height: 44px;
  transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.ss-seg button:hover { border-color: var(--c, var(--purple)); color: var(--ink); }
.ss-seg button:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
.ss-seg button.is-on {
  background: var(--c, var(--purple)); border-color: var(--c, var(--purple));
  color: #fff; transform: translateY(-1px);
}
.ss-circle__q small { display: block; }

/* ---- Weakest circle callout -------------------------------------------- */
.ss-weakest { border-color: var(--mustard); background: #FFFDF6; }
.ss-weak-line { font-weight: 600; margin: 0 0 0.8rem; }
.ss-weak-line b { color: var(--midnight); }

/* ---- Risk -------------------------------------------------------------- */
.ss-risks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.ss-risks label { display: flex; align-items: flex-start; gap: 0.6rem; font-weight: 500; cursor: pointer; font-size: 0.95rem; }
.ss-risks input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--coral); flex: 0 0 auto; }
.ss-riskflag {
  display: flex; gap: 0.55rem; align-items: flex-start;
  margin: 0.9rem 0 0; padding: 0.7rem 0.85rem;
  background: #FFF1EE; border: 1px solid #FFC9C0; border-radius: var(--r-sm);
  color: var(--coral-deep); font-size: 0.9rem; font-weight: 600; line-height: 1.45;
}
.ss-riskflag svg { flex: 0 0 auto; margin-top: 1px; }

/* ---- Form actions ------------------------------------------------------- */
.ss-form-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }

/* ---- Right panel -------------------------------------------------------- */
.ss-panel { position: sticky; top: 78px; }
@media (max-width: 900px) { .ss-panel { position: static; } }
.ss-panel__inner {
  background: linear-gradient(180deg, var(--iss-paper, #FFFDF7), #F3EEE2);
  color: var(--iss-ink, #23262F);
  border: 1px solid rgba(35,38,47,0.10);
  border-radius: var(--r-lg); padding: var(--space-5);
  box-shadow: var(--iss-shadow, 0 18px 48px -16px rgba(35,38,47,.16));
}
.ss-diagram { display: grid; place-items: center; }
.ss-diagram svg { width: 100%; max-width: 320px; height: auto; }

/* Soft watercolor Venn — pastels MULTIPLY onto the paper tile so each circle
   tints gently and the overlaps deepen toward the sweet spot as you score. */
.ss-c {
  transition: opacity 320ms var(--ease), fill 320ms var(--ease);
  mix-blend-mode: multiply; opacity: 0.16;
}
.ss-c--care { fill: var(--ss-care); }
.ss-c--cap  { fill: var(--ss-cap); }
.ss-c--need { fill: var(--ss-need); }
.ss-c--paid { fill: var(--ss-paid); }
.ss-spark {
  fill: var(--iss-ink, #23262F); opacity: 0; transform-box: fill-box; transform-origin: center;
  transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}
.ss-lbl { fill: var(--iss-ink, #23262F); font-size: 13px; font-weight: 800; text-anchor: middle; font-family: var(--font-sans); }

.ss-score { text-align: center; margin: 0.6rem 0 0.4rem; }
.ss-score__num { font-size: 2.6rem; font-weight: 900; line-height: 1; letter-spacing: -0.02em; }
.ss-score__den { font-size: 1.1rem; font-weight: 700; color: var(--iss-n-500, #6E6A5E); margin-left: 2px; }
.ss-verdict {
  display: inline-block; margin-top: 0.6rem; padding: 0.35rem 0.8rem;
  border-radius: var(--r-pill); font-weight: 700; font-size: 0.9rem;
  background: rgba(35,38,47,0.06); color: var(--iss-ink, #23262F);
}
.ss-verdict[data-band="strong"]    { background: rgba(136,215,178,0.34); color: #1F5F49; }
.ss-verdict[data-band="promising"] { background: rgba(255,224,154,0.50); color: #6B4E12; }
.ss-verdict[data-band="backlog"]   { background: rgba(255,196,120,0.40); color: #7A4A12; }
.ss-verdict[data-band="hold"]      { background: rgba(247,201,214,0.48); color: #8A2F4A; }

.ss-readout { list-style: none; margin: 1.1rem 0 0; padding: 1rem 0 0; border-top: 1px solid rgba(35,38,47,0.12); display: grid; gap: 0.5rem; }
.ss-readout li { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.92rem; color: var(--iss-n-700, #3C3A33); }
.ss-readout b { margin-left: auto; font-weight: 800; color: var(--iss-ink, #23262F); }
.ss-readout li.is-weak b { color: var(--mustard); }
.ss-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; border: 1px solid rgba(35,38,47,0.10); }
.ss-panel__hint { margin: 1rem 0 0; font-size: 0.78rem; color: var(--iss-n-500, #6E6A5E); text-align: center; }

/* ---- Overlays (brief + library) ---------------------------------------- */
.ss-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(7,20,38,0.55); backdrop-filter: blur(3px);
  display: grid; place-items: start center; padding: 4vh 1rem 6vh; overflow-y: auto;
}
.ss-overlay[hidden] { display: none; }
.ss-brief-wrap, .ss-library-wrap {
  width: 100%; max-width: 760px; background: #fff;
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden;
}
.ss-brief-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.4rem; border-bottom: 1px solid var(--border);
}
.ss-brief-bar h2 { margin: 0; font-size: 1.2rem; font-weight: 800; }
.ss-close {
  border: 0; background: var(--cloud); cursor: pointer; color: var(--midnight);
  width: 38px; height: 38px; border-radius: var(--r-pill); font-size: 1.5rem; line-height: 1;
}
.ss-close:hover { background: var(--border); }

/* ---- The brief document ------------------------------------------------- */
.ss-brief { padding: 1.6rem 1.8rem; color: var(--ink); }
.ss-brief__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; border-bottom: 2px solid var(--midnight); padding-bottom: 0.8rem; margin-bottom: 1.1rem; }
.ss-brief__kicker { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--purple); margin: 0 0 0.3rem; }
.ss-brief__title { font-size: 1.35rem; font-weight: 900; line-height: 1.25; margin: 0; }
.ss-brief__audience { color: var(--muted); font-weight: 600; font-size: 0.92rem; margin: 0.35rem 0 0; }
.ss-brief__badge {
  flex: 0 0 auto; text-align: center; border-radius: var(--r-md);
  padding: 0.5rem 0.8rem; min-width: 92px; color: #fff;
}
.ss-brief__badge b { display: block; font-size: 1.5rem; font-weight: 900; line-height: 1; }
.ss-brief__badge span { font-size: 0.72rem; font-weight: 700; opacity: 0.92; }
.ss-brief__scores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; margin: 0 0 1.1rem; }
.ss-brief__score { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 0.55rem 0.5rem; text-align: center; }
.ss-brief__score b { display: block; font-size: 1.3rem; font-weight: 900; }
.ss-brief__score span { font-size: 0.74rem; color: var(--muted); font-weight: 700; }
.ss-brief h4 { font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 1.1rem 0 0.3rem; }
.ss-brief p { margin: 0 0 0.4rem; line-height: 1.55; }
.ss-brief p.is-empty { color: var(--muted); font-style: italic; }
.ss-brief__risks { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.ss-brief__risks li { margin-bottom: 0.2rem; }
.ss-brief__warn { background: #FFF1EE; border: 1px solid #FFC9C0; color: var(--coral-deep); border-radius: var(--r-sm); padding: 0.6rem 0.8rem; font-weight: 600; font-size: 0.9rem; margin-top: 0.6rem; }
.ss-brief__foot { margin-top: 1.4rem; padding-top: 0.8rem; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.78rem; line-height: 1.5; }

.ss-brief-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
  padding: 1rem 1.4rem 1.3rem; border-top: 1px solid var(--border); background: var(--cloud);
}
.ss-toast { font-size: 0.85rem; font-weight: 700; color: var(--teal); margin-left: auto; }

/* ---- Library ------------------------------------------------------------ */
.ss-lib-help { padding: 0 1.4rem; margin-top: 0.9rem; }
.ss-library { list-style: none; margin: 0; padding: 0 1.4rem 1.4rem; display: flex; flex-direction: column; gap: 0.6rem; }
.ss-li {
  display: flex; align-items: center; gap: 0.9rem;
  border: 1px solid var(--border); border-radius: var(--r-md); padding: 0.7rem 0.85rem;
}
.ss-li__score { flex: 0 0 auto; width: 46px; height: 46px; border-radius: var(--r-sm); display: grid; place-items: center; color: #fff; font-weight: 900; }
.ss-li__body { min-width: 0; flex: 1; }
.ss-li__title { font-weight: 700; font-size: 0.96rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-li__meta { color: var(--muted); font-size: 0.8rem; }
.ss-li__actions { display: flex; gap: 0.4rem; flex: 0 0 auto; }
.ss-icbtn { border: 1px solid var(--border-strong); background: #fff; border-radius: var(--r-sm); padding: 0.4rem 0.6rem; cursor: pointer; font-weight: 700; font-size: 0.82rem; color: var(--midnight); }
.ss-icbtn:hover { border-color: var(--purple); color: var(--purple); }
.ss-icbtn--del:hover { border-color: var(--coral); color: var(--coral); }
.ss-empty { padding: 0 1.4rem 1.6rem; color: var(--muted); }

/* ---- Footer ------------------------------------------------------------- */
.ss-foot { max-width: var(--ss-maxw); margin: 0 auto; padding: var(--space-6) var(--gutter) var(--space-7); border-top: 1px solid var(--border); }
.ss-foot p { margin: 0 0 0.4rem; color: var(--muted); font-size: 0.9rem; }
.ss-foot a { color: var(--purple); font-weight: 700; }
.ss-foot__fine { font-size: 0.78rem; }

/* ---- Print: show only the brief ---------------------------------------- */
@media print {
  body * { visibility: hidden !important; }
  .ss-overlay, .ss-overlay * { visibility: visible !important; }
  .ss-overlay { position: static; background: #fff; padding: 0; display: block; }
  .ss-noprint { display: none !important; }
  .ss-brief-wrap { box-shadow: none; max-width: none; border-radius: 0; }
  .ss-brief { padding: 0; }
  @page { margin: 1.4cm; }
}

/* ---- AI Coach ----------------------------------------------------------- */
.ss-coach .ss-help { margin-bottom: 1rem; }
.ss-doors { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
@media (max-width: 540px) { .ss-doors { grid-template-columns: 1fr; } }
.ss-door {
  text-align: left; cursor: pointer; font: inherit;
  border: 1.5px solid var(--border-strong); background: #fff; color: var(--ink);
  border-radius: var(--r-md); padding: 1rem; display: flex; flex-direction: column; gap: 0.3rem;
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.ss-door:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.ss-door:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
.ss-door--ai { border-color: var(--purple); background: linear-gradient(180deg, #fff, var(--purple-soft)); }
.ss-door__tag { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--purple); }
.ss-door--own .ss-door__tag { color: var(--muted); }
.ss-door__title { font-size: 1.1rem; font-weight: 800; }
.ss-door__desc { font-size: 0.88rem; color: var(--muted); line-height: 1.45; }

.ss-coach-msg { margin: 0.9rem 0 0; padding: 0.6rem 0.8rem; background: var(--purple-soft); border-radius: var(--r-sm); color: var(--midnight); font-weight: 600; font-size: 0.9rem; }

.ss-gate { margin-top: 1rem; padding: 1rem; border: 1px dashed var(--purple); border-radius: var(--r-md); background: #FCFBFF; }
.ss-gate__lead { margin: 0 0 0.7rem; font-weight: 700; }
.ss-gate__form { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.ss-gate__form .input { flex: 1 1 220px; }
.ss-gate__fine { margin: 0.6rem 0 0; font-size: 0.78rem; color: var(--muted); }

.ss-promptout { margin-top: 1rem; }
.ss-promptout__label { display: block; font-weight: 700; font-size: 0.92rem; margin-bottom: 0.4rem; }
.ss-promptout__text { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.82rem; line-height: 1.5; resize: vertical; }
.ss-promptout__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.7rem; }
.ss-promptout__studio { margin: 0.9rem 0 0; font-weight: 600; }
.ss-promptout__studio a { color: var(--purple); }

.ss-airesult { margin-top: 1rem; border: 1px solid var(--border); border-left: 4px solid var(--purple); border-radius: var(--r-md); padding: 1rem 1.1rem; background: #fff; }
.ss-airesult__loading { color: var(--muted); font-weight: 600; margin: 0; }
.ss-airesult__tag { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--purple); }
.ss-airesult h4 { font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 1rem 0 0.3rem; }
.ss-airesult p { margin: 0 0 0.4rem; line-height: 1.55; }
.ss-airesult ul { margin: 0.2rem 0 0.4rem; padding-left: 1.1rem; }
.ss-airesult li { margin-bottom: 0.2rem; }
.ss-airesult__verdict { margin-top: 0.8rem; font-weight: 800; color: var(--midnight); }
.ss-airesult__fine { margin-top: 0.9rem; font-size: 0.78rem; color: var(--muted); }
.ss-airesult .is-empty { color: var(--muted); font-style: italic; }

.ss-kb { margin: 0.9rem 0 0; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 0.6rem 0.85rem; background: var(--cloud); }
.ss-kb > summary { cursor: pointer; font-weight: 700; font-size: 0.9rem; color: var(--midnight); }
.ss-kb > summary::marker { color: var(--purple); }
.ss-kb__list { list-style: none; margin: 0.7rem 0 0; padding: 0; display: grid; gap: 0.35rem; }
.ss-kb__list li { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.88rem; }
.ss-kb__tag { margin-left: auto; font-size: 0.72rem; font-weight: 800; color: var(--purple); white-space: nowrap; }
.ss-kb__fine { margin: 0.7rem 0 0; font-size: 0.78rem; color: var(--muted); line-height: 1.5; }
.ss-kb__fine a { color: var(--purple); font-weight: 700; }

/* ---- Compare board (library 2x2 quadrant) ------------------------------ */
.ss-libtoggle { display: inline-flex; gap: 4px; margin: 0 1.4rem 0.7rem; padding: 4px; background: var(--cloud); border: 1px solid var(--border); border-radius: var(--r-pill); }
.ss-libtoggle__btn { font: inherit; font-weight: 700; font-size: 0.85rem; cursor: pointer; border: 0; background: transparent; color: var(--muted); padding: 0.4rem 0.95rem; border-radius: var(--r-pill); }
.ss-libtoggle__btn.is-on { background: #fff; color: var(--purple); box-shadow: var(--shadow-sm); }
.ss-libtoggle__btn:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }

.ss-board { padding: 0 1.4rem 1.4rem; }
.ss-board__svg { width: 100%; height: auto; display: block; }
.ss-q--build   { fill: rgba(61,183,163,0.18); }   /* teal — build now        */
.ss-q--stretch { fill: rgba(244,185,66,0.15); }   /* mustard — worth stretch */
.ss-q--easy    { fill: rgba(124, 92, 255,0.08); }   /* purple — easy but why   */
.ss-q--park    { fill: rgba(91,101,119,0.07); }   /* muted — park            */
.ss-axis { stroke: var(--border-strong); stroke-width: 1.5; }
.ss-mid { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 4 5; }
.ss-qlbl { fill: var(--muted); font-size: 12px; font-weight: 800; font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.75; }
.ss-axislbl { fill: var(--muted); font-size: 12px; font-weight: 700; font-family: var(--font-sans); }
.ss-pt { cursor: pointer; }
.ss-pt circle { stroke: #fff; stroke-width: 2; transition: r var(--t-fast); }
.ss-pt:hover circle, .ss-pt:focus circle { r: 15; stroke: var(--midnight); }
.ss-pt:focus { outline: none; }
.ss-pt__n { fill: #fff; font-size: 12px; font-weight: 800; font-family: var(--font-sans); pointer-events: none; }
.ss-board__note { margin: 0.5rem 0 0; font-size: 0.82rem; color: var(--muted); }
.ss-board__legend { list-style: none; margin: 0.9rem 0 0; padding: 0; display: grid; gap: 0.3rem; }
.ss-board__legend li { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; padding: 0.35rem 0.4rem; border-radius: var(--r-sm); }
.ss-board__legend li:hover { background: var(--cloud); }
.ss-board__legend li:focus-visible { outline: 3px solid var(--purple); outline-offset: 1px; }
.ss-board__num { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 0.8rem; }
.ss-board__title { flex: 1; min-width: 0; font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-board__score { flex: 0 0 auto; font-weight: 800; font-size: 0.82rem; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .ss-pt circle { transition: none; } }

/* ---- Motion safety ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .ss-c, .ss-spark, .ss-seg button { transition: none; }
  .ss-door { transition: none; }
}

/* ==========================================================================
   THE JOURNEY  —  landing hero, living constellation, stage cards, plan.
   Additive layer; the scorer styles above are untouched. Studio purple leads.
   ========================================================================== */
.iss-journey { max-width: var(--ss-maxw); margin: 0 auto; padding: 0 var(--gutter) var(--space-7); }

/* ---- Hero --------------------------------------------------------------- */
.iss-hero { padding: var(--space-7) 0 var(--space-6); }
.iss-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--space-7); align-items: center;
}
@media (max-width: 880px) { .iss-hero__grid { grid-template-columns: 1fr; gap: var(--space-5); } }
.iss-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.82rem; font-weight: 800; letter-spacing: 0.02em; color: var(--purple);
  margin: 0 0 0.7rem;
}
.iss-hero__eyebrow svg { color: var(--mustard); }
.iss-hero__title {
  font-size: clamp(2.3rem, 1.4rem + 4.2vw, 4rem); font-weight: 900;
  line-height: 1.04; letter-spacing: -0.03em; margin: 0 0 0.8rem; color: var(--midnight);
}
.iss-hero__sub { font-size: var(--fs-lede); color: var(--midnight); line-height: 1.5; margin: 0 0 1.3rem; max-width: 38ch; }
.iss-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1rem; margin-bottom: 1.2rem; }
.iss-hero__free { font-size: 0.82rem; font-weight: 600; color: var(--muted); }
.iss-hero__spine {
  font-size: 0.92rem; line-height: 1.55; color: var(--midnight);
  background: linear-gradient(180deg, #fff, var(--purple-soft));
  border: 1px solid color-mix(in srgb, var(--purple) 22%, var(--border));
  border-left: 4px solid var(--purple);
  border-radius: var(--r-sm); padding: 0.8rem 1rem; margin: 0; max-width: 52ch;
}

/* ---- The living constellation ------------------------------------------ */
.iss-hero__constel { display: grid; place-items: center; }
.iss-constel {
  position: relative; width: 100%; max-width: 380px;
  background:
    radial-gradient(120% 100% at 50% 35%, rgba(124, 92, 255,0.10), transparent 60%),
    linear-gradient(180deg, #1b2742, var(--midnight));
  border-radius: var(--r-lg); padding: 1rem; box-shadow: var(--shadow-md);
}
.iss-constel__svg { width: 100%; height: auto; display: block; overflow: visible; }

/* sweet-spot bloom core */
.iss-bloomcore {
  fill: #fff; opacity: calc(0.04 + var(--glow, 0) * 0.34);
  filter: blur(2px);
  transition: opacity 420ms var(--ease);
}
.iss-constel.is-bloom .iss-bloomcore { opacity: 0.42; }

/* connective lines */
.iss-link {
  stroke: rgba(255,255,255,0.10); stroke-width: 1.4;
  transition: stroke 420ms var(--ease), stroke-width 420ms var(--ease);
}
.iss-link.is-on { stroke: rgba(255,255,255,0.42); stroke-width: 1.8; }

/* stars */
.iss-star { --lit: 0; }
.iss-star__halo {
  fill: var(--star); opacity: calc(0.04 + var(--lit) * 0.30);
  transition: opacity 420ms var(--ease);
}
.iss-star__glyph path {
  fill: var(--star);
  opacity: calc(0.30 + var(--lit) * 0.70);
  transform-box: fill-box; transform-origin: center;
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}
.iss-star.is-lit .iss-star__glyph path { filter: drop-shadow(0 0 5px var(--star)); }
.iss-star__lbl {
  fill: rgba(255,255,255,0.78); font-size: 12px; font-weight: 800;
  font-family: var(--font-sans);
  opacity: calc(0.45 + var(--lit) * 0.55);
  transition: opacity 420ms var(--ease);
}
.iss-star.is-lit .iss-star__lbl { fill: #fff; }

.iss-constel__state {
  margin: 0.9rem 0 0; font-size: 0.86rem; color: var(--muted); text-align: center;
  line-height: 1.5; min-height: 2.6em; max-width: 36ch;
}
.iss-constel--hero { /* hero variant hook */ }

/* phones: keep the constellation + its labels clean and contained */
@media (max-width: 480px) {
  .iss-hero__constel { width: 100%; }
  .iss-constel {
    max-width: min(320px, 86vw); margin: 0 auto; padding: 0.85rem;
  }
  .iss-constel__svg { overflow: visible; }     /* labels sit just outside the diamond */
  .iss-star__lbl { font-size: 13px; }          /* SVG units scale with the viewBox, stay legible */
  .iss-constel__state { font-size: 0.82rem; max-width: 30ch; margin-inline: auto; }
}

/* reward choreography */
@keyframes iss-twinkle {
  0% { transform: scale(1); } 35% { transform: scale(1.6) rotate(12deg); } 100% { transform: scale(1) rotate(0); }
}
.iss-star.just-lit .iss-star__glyph path { animation: iss-twinkle 1100ms var(--ease); }
@keyframes iss-corepulse { 0% { transform: scale(0.9); opacity: 0.1; } 50% { transform: scale(1.08); } 100% { transform: scale(1); } }
.iss-constel.celebrate .iss-bloomcore { animation: iss-corepulse 1300ms var(--ease); transform-box: fill-box; transform-origin: center; }
.iss-star.just-lit-static .iss-star__glyph path { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .iss-star.just-lit .iss-star__glyph path,
  .iss-constel.celebrate .iss-bloomcore { animation: none; }
  .iss-bloomcore, .iss-link, .iss-star__halo, .iss-star__glyph path, .iss-star__lbl,
  .iss-constel__state { transition: none; }
}

/* ---- Closing banner ----------------------------------------------------- */
.iss-closing {
  margin: var(--space-5) 0; border-radius: var(--r-lg);
  background: linear-gradient(135deg, #2a1d57, var(--midnight));
  color: #fff; padding: var(--space-6); box-shadow: var(--shadow-md);
}
.iss-closing[hidden] { display: none; }
.iss-closing__inner { max-width: 56ch; }
.iss-closing__eyebrow { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mustard); margin: 0 0 0.4rem; }
.iss-closing h2 { color: #fff; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); margin: 0 0 0.6rem; }
.iss-closing p { color: rgba(255,255,255,0.86); line-height: 1.55; margin: 0 0 1.2rem; }

/* ---- Journey workspace: rail + stage ----------------------------------- */
.iss-work {
  display: grid; grid-template-columns: 244px minmax(0, 1fr);
  gap: var(--space-6); align-items: start; margin-top: var(--space-4);
}
@media (max-width: 880px) { .iss-work { grid-template-columns: 1fr; } }

.iss-rail { position: sticky; top: 78px; }
@media (max-width: 880px) { .iss-rail { position: static; } }
.iss-rail__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.iss-rail__item { position: relative; }
.iss-rail__btn {
  display: flex; align-items: center; gap: 0.7rem; width: 100%;
  font: inherit; text-align: left; cursor: pointer;
  background: transparent; border: 0; border-radius: var(--r-sm);
  padding: 0.6rem 0.7rem; min-height: 44px; color: var(--muted);
  transition: background var(--t-fast), color var(--t-fast);
}
.iss-rail__btn:hover { background: var(--purple-soft); color: var(--midnight); }
.iss-rail__btn:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
.iss-rail__dot {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: var(--r-pill);
  border: 2px solid var(--border-strong); background: #fff;
  font-weight: 800; font-size: 0.85rem; color: var(--muted);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.iss-rail__txt { font-weight: 700; font-size: 0.9rem; line-height: 1.2; }
.iss-rail__item.is-active .iss-rail__btn { color: var(--midnight); }
.iss-rail__item.is-active .iss-rail__dot { border-color: var(--purple); color: var(--purple); box-shadow: 0 0 0 3px var(--purple-soft); }
.iss-rail__item.is-done .iss-rail__dot { background: var(--teal); border-color: var(--teal); color: #fff; }
.iss-rail__item.is-done .iss-rail__txt { color: var(--midnight); }
/* connecting line down the rail */
.iss-rail__item + .iss-rail__item::before {
  content: ""; position: absolute; left: 21px; top: -2px; height: 6px; width: 2px;
  background: var(--border-strong);
}

/* ---- Stage card --------------------------------------------------------- */
.iss-stage {
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--space-6); box-shadow: var(--shadow-sm); min-width: 0;
}
@media (max-width: 560px) { .iss-stage { padding: 1.3rem; } }
.iss-stage__head { border-bottom: 1px solid var(--border); padding-bottom: 1rem; margin-bottom: 1.1rem; }
/* per-stage glyph in the card header (hand-authored SVG, owned, no emoji) */
.iss-stage__head--glyph { display: flex; align-items: flex-start; gap: 0.85rem; }
.iss-stage__headmain { min-width: 0; flex: 1 1 auto; }
.iss-stage__glyph {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--r-md);
  background: var(--purple-soft); color: var(--purple);
  border: 1px solid var(--border); margin-top: 0.15rem;
}
@media (max-width: 480px) {
  .iss-stage__glyph { width: 38px; height: 38px; }
  .iss-stage__glyph svg { width: 20px; height: 20px; }
}
/* inline completion-gate message (Stage 1 + worksheet nudges) */
.iss-complete-msg {
  margin: 0.75rem 0 0; padding: 0.6rem 0.85rem;
  background: #FFF7E8; border: 1px solid var(--mustard); border-radius: var(--r-sm);
  color: var(--midnight); font-weight: 600; font-size: 0.9rem; line-height: 1.45;
}
.iss-complete-msg[hidden] { display: none; }
.iss-stage__eyebrow { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--purple); margin: 0 0 0.4rem; }
.iss-stage__title { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 0.4rem; color: var(--midnight); }
.iss-stage__tagline { font-size: 1.02rem; color: var(--muted); margin: 0 0 0.7rem; }
.iss-stage__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }
.iss-chips__lead { font-size: 0.82rem; font-weight: 700; color: var(--muted); margin-right: 0.2rem; }
.iss-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.8rem; font-weight: 700; color: var(--midnight);
  background: var(--cloud); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 0.25rem 0.7rem;
}
.iss-chip__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--purple); }
.iss-chip[data-chip-circle="care"] .iss-chip__dot { background: var(--ss-care); }
.iss-chip[data-chip-circle="capability"] .iss-chip__dot { background: var(--ss-cap); }
.iss-chip[data-chip-circle="need"] .iss-chip__dot { background: var(--ss-need); }
.iss-chip[data-chip-circle="paid"] .iss-chip__dot { background: var(--ss-paid); }

.iss-stage__intro { font-size: 1.05rem; line-height: 1.6; color: var(--ink); margin: 0 0 1.4rem; }
.iss-stage__locked {
  font-size: 0.9rem; font-weight: 600; color: var(--coral-deep);
  background: #FFF1EE; border: 1px solid #FFC9C0; border-radius: var(--r-sm);
  padding: 0.6rem 0.85rem; margin: 0 0 1.1rem;
}
.iss-stage__sub { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 1.6rem 0 0.8rem; }
.iss-stage__subnote { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--muted); }

/* principles */
.iss-principles { display: grid; gap: 0.9rem; }
@media (min-width: 720px) { .iss-principles { grid-template-columns: 1fr 1fr; } }
.iss-principle {
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 1.1rem 1.2rem; background: #fff;
  border-top: 3px solid var(--purple);
}
.iss-principle__title { font-size: 1.04rem; font-weight: 800; margin: 0 0 0.5rem; color: var(--midnight); line-height: 1.25; }
.iss-principle__benefit { font-size: 0.93rem; line-height: 1.55; color: var(--ink); margin: 0 0 0.7rem; }
.iss-principle__action { font-size: 0.93rem; line-height: 1.55; color: var(--ink); margin: 0 0 0.6rem; }
.iss-principle__do {
  display: inline-block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--teal); margin-right: 0.35rem;
  vertical-align: 1px;
}
.iss-principle__src { font-size: 0.82rem; font-style: italic; color: var(--muted); margin: 0; }

/* worksheet */
.iss-worksheet { display: grid; gap: 1rem; }
.iss-field label { display: block; font-weight: 700; font-size: 0.92rem; margin-bottom: 0.4rem; color: var(--midnight); }
.iss-field .textarea { width: 100%; }

/* coach */
.iss-coach { margin: 1.6rem 0 0; padding: 1.2rem; border: 1px dashed var(--purple); border-radius: var(--r-md); background: #FCFBFF; }
.iss-coach__btn { width: auto; }
.iss-coach__hint { font-size: 0.86rem; color: var(--muted); line-height: 1.5; margin: 0.7rem 0 0; }
.iss-coach__msg { margin: 0.9rem 0 0; padding: 0.6rem 0.8rem; background: var(--purple-soft); border-radius: var(--r-sm); color: var(--midnight); font-weight: 600; font-size: 0.9rem; }

.iss-gate { margin-top: 1rem; padding: 1rem; border: 1px solid var(--purple); border-radius: var(--r-md); background: #fff; }
.iss-gate__lead { margin: 0 0 0.7rem; font-weight: 700; }
.iss-gate__form { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.iss-gate__form .input { flex: 1 1 220px; }
.iss-gate__fine { margin: 0.6rem 0 0; font-size: 0.78rem; color: var(--muted); }

.iss-promptout { margin-top: 1rem; }
.iss-promptout__label { display: block; font-weight: 700; font-size: 0.92rem; margin-bottom: 0.4rem; }
.iss-promptout__text { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.82rem; line-height: 1.5; resize: vertical; }
.iss-promptout__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.7rem; }
.iss-toast { font-size: 0.85rem; font-weight: 700; color: var(--teal); }

/* from the trenches */
.iss-trench {
  margin: 1.6rem 0 0; border-radius: var(--r-md);
  background: var(--cloud); border: 1px solid var(--border); border-left: 4px solid var(--mustard);
  padding: 1.1rem 1.2rem;
}
.iss-trench__tag { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mustard); margin: 0 0 0.4rem; }
.iss-trench__tag svg { color: var(--mustard); }
.iss-trench__title { font-size: 1.02rem; font-weight: 800; margin: 0 0 0.4rem; color: var(--midnight); }
.iss-trench__body { font-size: 0.93rem; line-height: 1.6; color: var(--ink); margin: 0; }

/* ---- through-line beat (Phase C: "one mind, not four decks") -------------
   A collapsed, secondary in-context element below each stage intro. Purple =
   the integrative spine. Native <details> for keyboard + screen-reader support;
   reduced-motion honored. No grades/tiers ever rendered here. */
.iss-beat {
  margin: 1.1rem 0 0; border-radius: var(--r-md);
  background: linear-gradient(180deg, #fff, var(--purple-soft));
  border: 1px solid var(--border); border-left: 4px solid var(--purple);
}
.iss-beat__summary {
  display: flex; align-items: center; gap: 0.6rem; cursor: pointer;
  list-style: none; padding: 0.85rem 1.05rem;
  font-weight: 700; color: var(--midnight); font-size: 0.95rem;
  border-radius: var(--r-md);
}
.iss-beat__summary::-webkit-details-marker { display: none; }
.iss-beat__summary:hover { background: rgba(124, 92, 255, 0.05); }
.iss-beat__summary:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
.iss-beat__spark { color: var(--purple); flex: 0 0 auto; }
.iss-beat__sumtext { display: flex; flex-direction: column; gap: 0.1rem; flex: 1 1 auto; min-width: 0; }
.iss-beat__throughname { font-size: 0.78rem; font-weight: 600; color: var(--purple); letter-spacing: 0.01em; }
.iss-beat__chev { color: var(--muted); flex: 0 0 auto; transition: transform 0.22s ease; }
.iss-beat[open] .iss-beat__chev { transform: rotate(180deg); }
.iss-beat__body { padding: 0 1.15rem 1.1rem; }
.iss-beat__woven { font-size: 0.95rem; line-height: 1.66; color: var(--ink); margin: 0.2rem 0 0.85rem; }
.iss-beat__q,
.iss-beat__pressure,
.iss-beat__connect {
  font-size: 0.9rem; line-height: 1.58; color: var(--ink); margin: 0.55rem 0 0;
  padding: 0.55rem 0.75rem; border-radius: var(--r-sm); background: #fff;
  border: 1px solid var(--border);
}
.iss-beat__q { border-left: 3px solid var(--purple); }
.iss-beat__connect { border-left: 3px solid var(--teal); }
.iss-beat__pressure { border-left: 3px solid var(--mustard); }
.iss-beat__q-tag,
.iss-beat__connect-tag,
.iss-beat__pressure-tag {
  display: inline-block; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.07em;
  text-transform: uppercase; margin-right: 0.4rem;
}
.iss-beat__q-tag { color: var(--purple); }
.iss-beat__connect-tag { color: var(--teal); }
.iss-beat__pressure-tag { color: var(--mustard); }
.iss-beat__meta { font-size: 0.85rem; line-height: 1.55; color: var(--muted); margin: 0.7rem 0 0; padding-top: 0.7rem; border-top: 1px dashed var(--border); }
.iss-beat__meta b { color: var(--midnight); }
@media (prefers-reduced-motion: reduce) {
  .iss-beat__chev { transition: none; }
}
@media (max-width: 560px) {
  .iss-beat__summary { font-size: 0.9rem; padding: 0.75rem 0.9rem; }
  .iss-beat__body { padding: 0 0.9rem 0.95rem; }
}

/* stage foot */
.iss-stage__foot { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--border); }
.iss-done-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; }
.iss-done-badge { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 800; color: var(--teal); font-size: 0.92rem; }
.iss-bloom-note {
  display: none; align-items: flex-start; gap: 0.4rem;
  margin: 0.9rem 0 0; font-size: 0.92rem; line-height: 1.5; font-weight: 600;
  color: var(--purple); background: var(--purple-soft); border-radius: var(--r-sm); padding: 0.7rem 0.85rem;
}
.iss-bloom-note.is-shown { display: flex; }
.iss-bloom-note svg { flex: 0 0 auto; margin-top: 1px; color: var(--mustard); }

/* scorer mount + fallback */
.iss-scorer-mount { margin: 0.4rem 0 0; }
.iss-scorer-fallback { border: 1px dashed var(--purple); border-radius: var(--r-md); padding: 1.2rem; text-align: center; }
.iss-scorer-fallback p { margin: 0 0 0.8rem; color: var(--muted); }
/* when the scorer is mounted inside the journey, hide its standalone intro */
body:has([data-scorer-mount] .ss-grid) .ss-main > [data-scorer-intro] { display: none; }

.iss-journey__tools { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: var(--space-5); }
.iss-reset { color: var(--muted); }

/* ---- First-steps plan overlay ------------------------------------------ */
.iss-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(7,20,38,0.55); backdrop-filter: blur(3px);
  display: grid; place-items: start center; padding: 4vh 1rem 6vh; overflow-y: auto;
}
.iss-overlay[hidden] { display: none; }
.iss-plan-wrap {
  width: 100%; max-width: 780px; background: #fff;
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden;
}
.iss-plan { padding: 1.6rem 1.8rem; color: var(--ink); }
.iss-plan__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; border-bottom: 2px solid var(--midnight); padding-bottom: 0.8rem; margin-bottom: 1.1rem; }
.iss-plan__kicker { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--purple); margin: 0 0 0.3rem; }
.iss-plan__title { font-size: 1.35rem; font-weight: 900; line-height: 1.25; margin: 0; }
.iss-plan__badge { flex: 0 0 auto; text-align: center; border-radius: var(--r-md); padding: 0.5rem 0.8rem; min-width: 92px; background: var(--purple); color: #fff; }
.iss-plan__badge b { display: block; font-size: 1.5rem; font-weight: 900; line-height: 1; }
.iss-plan__badge span { font-size: 0.68rem; font-weight: 700; opacity: 0.92; }
.iss-plan__scores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; margin: 0 0 1.2rem; }
.iss-plan__score { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 0.5rem; text-align: center; }
.iss-plan__score b { display: block; font-size: 1.25rem; font-weight: 900; }
.iss-plan__score span { font-size: 0.72rem; color: var(--muted); font-weight: 700; }
/* "What you've proven so far" — Ikigai-anchored, user-voice wins */
.iss-plan__proven {
  margin: 0 0 1.3rem; padding: 0.9rem 1.1rem;
  background: var(--purple-soft); border: 1px solid var(--border); border-radius: var(--r-md);
}
.iss-plan__proven h4 { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--purple); margin: 0 0 0.55rem; }
.iss-plan__provenlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.iss-plan__provenlist li { font-size: 0.95rem; line-height: 1.5; color: var(--ink); padding-left: 1.3rem; position: relative; }
.iss-plan__provenlist li::before {
  content: ""; position: absolute; left: 0; top: 0.5em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--teal);
}
.iss-plan__stage { margin: 0 0 1.1rem; }
.iss-plan__stage h4 { font-size: 1.02rem; font-weight: 800; margin: 0 0 0.5rem; color: var(--midnight); }
.iss-plan__done { font-size: 0.7rem; font-weight: 800; color: var(--teal); text-transform: uppercase; letter-spacing: 0.06em; }
.iss-plan__open { font-size: 0.7rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.iss-plan__note { color: var(--muted); font-size: 0.9rem; margin: 0; }
.iss-plan__ws { margin: 0 0 0.6rem; }
.iss-plan__q { font-size: 0.85rem; font-weight: 700; color: var(--muted); margin: 0 0 0.15rem; }
.iss-plan__a { font-size: 0.95rem; line-height: 1.5; margin: 0; }
.iss-plan__a.is-empty { color: var(--muted); font-style: italic; }
.iss-plan__closing { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.iss-plan__closing h4 { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--purple); margin: 0 0 0.4rem; }
.iss-plan__closing p { font-size: 0.95rem; line-height: 1.6; margin: 0; }
.iss-plan__foot { margin-top: 1.4rem; padding-top: 0.8rem; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.78rem; line-height: 1.5; }

/* Print: show only the plan when printing the plan */
@media print {
  body.iss-printing-plan * { visibility: hidden !important; }
  body.iss-printing-plan .iss-overlay, body.iss-printing-plan .iss-overlay * { visibility: visible !important; }
  body.iss-printing-plan .iss-overlay { position: static; background: #fff; padding: 0; display: block; }
  body.iss-printing-plan .ss-noprint { display: none !important; }
  body.iss-printing-plan .iss-plan-wrap { box-shadow: none; max-width: none; border-radius: 0; }
  body.iss-printing-plan .iss-plan { padding: 0; }
}

/* ---- seeded-from-the-Pressures-Atlas note (set by ISS_SCORER.seed) ----- */
.ss-seednote {
  display: flex; gap: 0.5rem; align-items: flex-start;
  margin: 0 0 0.9rem; padding: 0.65rem 0.8rem;
  background: var(--purple-soft, #F1EEFF);
  border: 1px solid color-mix(in srgb, var(--purple) 25%, var(--border));
  border-radius: var(--r-md, 12px);
  font-size: 0.85rem; line-height: 1.45; color: var(--midnight); font-weight: 500;
}
.ss-seednote svg { flex: none; color: var(--purple); margin-top: 1px; }