/* ── PRACTICE PAGE CHROME ─────────────────────────────────────────
   Additive styles loaded AFTER styles.css on every practice page.
   Implements the navy hero + two-tier sidebar TOC + practice list
   patterns from the redesign canvas.
*/

/* Page shell — practices live edge-to-edge, no .gw-wrap centering.
   styles.css hides #gw-main by default (gated by the intro flow);
   on practice pages we always want it visible from first paint. */
body.practice {
  background: var(--page-bg);
}
body.practice #gw-main {
  display: block !important;
  opacity: 1 !important;
  padding-top: 0;
}
.pr-shell {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: calc(100vh - 120px);
}
@media (max-width: 980px) {
  .pr-shell { grid-template-columns: 1fr; }
}

/* ── HERO ── navy band, gold eyebrow, italic display headline */
.pr-hero {
  background: var(--navy);
  color: #fff;
  position: relative;
  padding: 32px 56px 36px;
}
.pr-hero-row {
  display: flex; justify-content: space-between;
  align-items: flex-start; gap: 32px; flex-wrap: wrap;
}
.pr-hero-left { max-width: 760px; }
.pr-hero-eyebrow {
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-on-navy, #dcc488);
  margin-bottom: 10px;
}
.pr-hero-eyebrow .pr-hero-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  margin-right: 8px;
  color: var(--gold-on-navy, #dcc488);
}
.pr-hero h1 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 42px;
  line-height: 1.08;
  letter-spacing: .005em;
  color: #fff;
  margin: 0 0 14px;
}
.pr-hero-sub {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: rgba(255,255,255,.82);
  max-width: 640px;
  margin: 0;
}
.pr-hero-meta {
  text-align: right;
  display: flex; flex-direction: column; gap: 14px;
  min-width: 180px;
}
.pr-hero-meta-block .label {
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sky-on-navy, #c8dae6);
  margin-bottom: 4px;
}
.pr-hero-meta-block .value {
  font-family: var(--sans);
  font-size: 14px;
  color: rgba(255,255,255,.88);
}
.pr-hero::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .55;
}

/* ── SIDEBAR ── two-tier TOC */
.pr-side {
  background: #fff;
  border-right: 0.5px solid var(--rule);
  padding: 26px 0;
  font-family: var(--ui);
}
@media (max-width: 980px) {
  .pr-side { border-right: none; border-bottom: 0.5px solid var(--rule); }
}
.pr-side-tier {
  padding: 0 24px 6px;
  margin-top: 10px;
  display: flex; align-items: baseline; gap: 10px;
}
.pr-side-tier:first-child { margin-top: 0; }
.pr-side-tier-label {
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.pr-side-tier-rule {
  flex: 1; height: 1px; background: var(--rule); opacity: .55;
}
.pr-side-list { list-style: none; padding: 0; margin: 0; }
.pr-side-row {
  display: grid;
  grid-template-columns: 30px 1fr 14px;
  align-items: baseline; gap: 10px;
  padding: 12px 24px;
  border-left: 2px solid transparent;
  text-decoration: none; color: inherit;
  transition: background .1s;
}
.pr-side-row:hover { background: rgba(176,136,76,.06); }
.pr-side-row.is-current {
  background: rgba(176,136,76,.10);
  border-left-color: var(--gold);
}
.pr-side-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  color: var(--gold);
  line-height: 1;
}
.pr-side-num--dash {
  color: var(--ink-faint);
  opacity: .55;
}
.pr-side-title {
  display: block;
  font-family: var(--ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
}
.pr-side-row.is-current .pr-side-title { font-weight: 600; }
.pr-side-sub {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-faint);
  line-height: 1.4;
  margin-top: 3px;
}
.pr-side-state {
  width: 8px; height: 8px; border-radius: 50%;
  border: 1px solid var(--rule); align-self: center;
}
.pr-side-state.done { background: var(--gold); border-color: var(--gold); }
.pr-side-state.editing { background: transparent; border-color: var(--gold); }

/* Sub-steps — nested under a practice row when active.
   Used for Anchor stories → Coverage check. */
.pr-side-substeps {
  list-style: none;
  padding: 2px 0 8px 0;
  margin: 0;
}
.pr-side-substep {
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  padding: 7px 24px 7px 24px;
  text-decoration: none;
  color: var(--ink-mid);
  border-left: 2px solid transparent;
  transition: background .1s, color .1s;
}
.pr-side-substep:hover { background: rgba(176,136,76,.06); color: var(--ink); }
.pr-side-substep.is-current {
  background: rgba(176,136,76,.10);
  border-left-color: var(--gold);
  color: var(--ink);
}
.pr-side-substep-tick {
  justify-self: end;
  margin-right: 8px;
  width: 14px; height: 1px;
  background: var(--ink-faint);
  opacity: .55;
}
.pr-side-substep.is-current .pr-side-substep-tick {
  background: var(--gold);
  opacity: 1;
}
.pr-side-substep-label {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.3;
}
.pr-side-substep.is-current .pr-side-substep-label {
  color: var(--ink);
}

.pr-side-divider {
  margin: 14px 0;
  border: none; border-top: 0.5px solid var(--rule);
}

.pr-side-foot {
  padding: 18px 24px 0;
  display: flex; flex-direction: column; gap: 6px;
}
.pr-side-foot a {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-mid);
  text-decoration: none;
  display: flex; align-items: baseline; gap: 8px;
}
.pr-side-foot a:hover { color: var(--ink); }
.pr-side-foot .num {
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold);
  width: 16px;
}

/* ── MAIN COLUMN ── content area where prompts live */
.pr-main {
  padding: 32px 56px 40px;
  max-width: 920px;
}
@media (max-width: 980px) {
  .pr-main { padding: 28px 24px 40px; }
}
.pr-main-save {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 0.5px solid var(--rule);
}
.pr-main-save .save-indicator {
  font-family: var(--ui);
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: .04em;
}
.pr-main-save .save-bar-controls .phase1-data-tools summary {
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  cursor: pointer;
  padding: 6px 0;
}

/* ── FOOTER NAV ── between-practice navigation */
.pr-foot {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 0.5px solid var(--rule);
  display: flex; align-items: baseline; gap: 18px;
}
.pr-foot-prev,
.pr-foot-next {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-mid);
  text-decoration: none;
}
.pr-foot-prev:hover, .pr-foot-next:hover { color: var(--ink); }
.pr-foot-prev .label,
.pr-foot-next .label {
  display: block;
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 4px;
}
.pr-foot-prev .title,
.pr-foot-next .title {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink);
}
.pr-foot-next { margin-left: auto; text-align: right; }
.pr-foot-mark {
  align-self: center;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 3px;
  padding: 10px 20px;
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(168,144,94,.24);
  text-decoration: none;
}

/* ── INTRO TOC ── two-tier practice list on /app/ */
.toc-band {
  display: flex; align-items: baseline; gap: 18px;
  padding: 0 0 8px;
  margin-top: 36px;
}
.toc-band:first-of-type { margin-top: 8px; }
.toc-band-label {
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
.toc-band-rule { flex: 1; height: 1px; background: var(--rule); opacity: .55; }
.toc-band-meta {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-faint);
}

.toc-list { list-style: none; padding: 0; margin: 0; }
.toc-row {
  display: grid;
  grid-template-columns: 64px 1fr 110px 28px;
  gap: 24px;
  align-items: baseline;
  padding: 22px 0;
  border-top: 0.5px solid var(--rule);
  text-decoration: none; color: inherit;
}
.toc-row:last-child { border-bottom: 0.5px solid var(--rule); }
.toc-row:hover .toc-arrow { transform: translateX(4px); }
.toc-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 38px;
  color: var(--gold);
  line-height: 1;
}
.toc-num--dash {
  font-size: 22px;
  color: var(--ink-faint);
  opacity: .55;
}
.toc-row-title {
  display: flex; align-items: baseline; gap: 14px;
  flex-wrap: wrap; margin-bottom: 4px;
}
.toc-row-title .t {
  font-family: var(--ui);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
}
.toc-row.toc-row--underneath .toc-row-title .t {
  color: var(--ink-mid);
  font-weight: 500;
  font-size: 17px;
}
.toc-row-title .s {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--ink-mid);
}
.toc-row.toc-row--underneath .toc-row-title .s {
  font-size: 15px;
  color: var(--ink-faint);
}
.toc-desc {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-faint);
  line-height: 1.6;
  max-width: 660px;
}
.toc-time {
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  align-self: center;
}
.toc-arrow {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--gold);
  text-align: right;
  align-self: center;
  transition: transform .15s;
}
.toc-row--underneath .toc-arrow {
  color: var(--ink-faint);
  font-size: 18px;
  opacity: .7;
}
.toc-progress-chip {
  display: block;
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 5px;
}
.toc-progress-chip::before { content: '\2713\00a0'; }
.pr-side-state.is-done::after {
  content: '\2713';
  font-size: 11px;
  color: var(--gold);
  font-weight: 700;
}

@media (max-width: 640px) {
  .pr-hero-meta {
    text-align: left;
  }

  /* Save bar — wrap storage indicator and controls into stacked rows.
     Covers both .phase1-save-bar (index) and .pr-main-save (practices). */
  .phase1-save-bar,
  .pr-main-save {
    flex-wrap: wrap;
    gap: 8px;
  }
  .phase1-save-bar .save-bar-left,
  .pr-main-save .save-bar-left {
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
  }
  .save-indicator-storage {
    margin-left: 0 !important;
    padding-left: 0 !important;
    border-left: none !important;
  }
  .phase1-save-bar .save-bar-controls,
  .pr-main-save .save-bar-controls {
    width: 100%;
    position: relative;
  }
  /* Make <details> non-positioned so the dropdown anchors to
     .save-bar-controls (full-width) rather than the narrow <details> */
  .phase1-save-bar .phase1-data-tools,
  .pr-main-save .phase1-data-tools {
    position: static !important;
  }
  .phase1-save-bar .save-bar-dropdown,
  .pr-main-save .save-bar-dropdown {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 100% !important;
    bottom: auto !important;
    min-width: 0 !important;
    width: auto !important;
  }

  .toc-row {
    grid-template-columns: 44px 1fr 22px;
    grid-template-rows: auto;
    gap: 16px;
  }
  .toc-time { display: none; }
  .toc-num { font-size: 28px; }
  .toc-row-title .t { font-size: 16px; }
  .toc-row-title .s { font-size: 15px; }
}

/* ── BEFORE-YOU-WALK-IN ── morning-of surface, quiet and centered */
.bywi-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 32px 64px;
}
.bywi-eyebrow {
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 12px;
  text-align: center;
}
.bywi-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 38px;
  line-height: 1.1;
  text-align: center;
  color: var(--ink);
  margin: 0 0 28px;
}
.bywi-card {
  background: var(--paper);
  border: 0.5px solid var(--rule);
  border-radius: 6px;
  padding: 28px 32px;
  margin-bottom: 18px;
}
.bywi-card-label {
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 10px;
}
.bywi-card-body {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink);
}
.bywi-card-body.empty {
  font-style: normal;
  color: var(--ink-faint);
  font-size: 14px;
}
.bywi-stories {
  display: grid; gap: 10px;
}
.bywi-story {
  display: grid; grid-template-columns: 32px 1fr; gap: 16px;
  align-items: baseline;
  padding: 12px 0;
  border-top: 0.5px solid var(--rule);
}
.bywi-story:first-child { border-top: none; }
.bywi-story-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  color: var(--gold);
  line-height: 1;
}
.bywi-story-name {
  font-family: var(--ui);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
}
.bywi-story-themes {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-faint);
  margin-top: 2px;
}
.bywi-power {
  background: var(--navy);
  color: #fff;
  border-radius: 6px;
  padding: 32px;
  margin: 24px 0;
  position: relative;
}
.bywi-power-label {
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-on-navy, #dcc488);
  margin-bottom: 14px;
}
.bywi-power-body {
  font-family: var(--serif);
  font-style: italic;
  font-size: 24px;
  line-height: 1.4;
  color: #fff;
}
.bywi-foot {
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-faint);
  margin-top: 32px;
}
/* ── Their world · Prompt 2 "What they really need" · need→story/theme mapping ──
   Drop-in CSS for the two multi-select pickers that replace the free-text
   "Which story or theme speaks to this" column. Append to public/app/practice.css
   (the their-world page already loads it). Depends only on vars in public/styles.css.

   Markup contract (installed in their-world/index.html, enhanced by need-mapping.js):
     .need-map-list > .need-map[data-need] >
        .need-map-head ( .need-map-num + input#role_need_N )
        .need-map-fields ( two .need-map-field, each wrapping a .nm[data-kind] mount )
        .need-map-gap[data-role="gap"]
   The .nm mount holds a hidden input (role_need_N_stories / role_need_N_themes);
   need-mapping.js injects .nm-control + .nm-panel into it. */

.need-map-list { display: flex; flex-direction: column; gap: 14px; }

.need-map {
  background: #fff;
  border: 0.5px solid var(--rule);
  border-radius: 8px;
  padding: 18px 20px 20px;
}
.need-map-head { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.need-map-num {
  flex: none;
  font-family: var(--ui); font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint);
}
.need-map-head .gw-input { margin: 0; }

.need-map-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 13px; }
@media (max-width: 560px) { .need-map-fields { grid-template-columns: 1fr; } }
.need-map-lbl {
  display: block;
  font-family: var(--ui); font-size: 10px; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0 0 6px;
}

/* ── multi-select control (picker-consistent surface) ── */
.nm { position: relative; }
.nm-control {
  width: 100%; min-height: 40px;
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--rule); border-radius: 8px;
  padding: 6px 32px 6px 10px; cursor: pointer; text-align: left; position: relative;
  font-family: var(--ui); transition: border-color .15s, box-shadow .15s;
}
.nm-control:hover { border-color: var(--steel); }
.nm.open .nm-control { border-color: var(--steel); box-shadow: 0 0 0 3px rgba(92,112,130,.12); }
.nm-placeholder { font-family: var(--ui); font-size: 12.5px; color: var(--ink-faint); font-style: italic; }
.nm-tags { display: flex; flex-wrap: wrap; gap: 5px; flex: 1; min-width: 0; }
.nm-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--ui); font-size: 11.5px; font-weight: 500; line-height: 1;
  color: var(--navy); background: var(--light-bg); border: 0.5px solid var(--rule);
  border-radius: 5px; padding: 4px 6px 4px 8px;
}
.nm-tag.gap { border-color: var(--accent-rule); background: rgba(200,66,31,.05); }
.nm-tag-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent-ink); flex: none; }
.nm-tag-x { cursor: pointer; color: var(--ink-faint); font-size: 13px; line-height: 1; padding: 0 1px; border: none; background: none; }
.nm-tag-x:hover { color: var(--accent-ink); }
.nm-chev { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-faint); pointer-events: none; display: flex; }

.nm-panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 5px); z-index: 40;
  background: #fff; border: 1px solid var(--steel); border-radius: 8px;
  box-shadow: 0 8px 28px rgba(13,24,38,.14); overflow: hidden;
}
.nm-search-wrap { position: relative; border-bottom: 1px solid var(--rule); }
.nm-search-ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-faint); display: flex; }
.nm-search {
  width: 100%; border: none; outline: none; font-family: var(--ui); font-size: 12.5px;
  color: var(--navy); padding: 10px 12px 10px 32px; background: #fff;
}
.nm-search::placeholder { color: var(--ink-faint); font-style: italic; }
.nm-list { max-height: 264px; overflow-y: auto; padding: 5px 0 6px; }
.nm-group-lbl {
  font-family: var(--ui); font-size: 9.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint); padding: 9px 13px 4px;
}
.nm-opt {
  display: flex; align-items: center; gap: 9px; padding: 7px 13px; cursor: pointer;
  font-family: var(--ui); font-size: 12.5px; color: var(--ink-mid); line-height: 1.3;
}
.nm-opt:hover { background: var(--light-bg); }
.nm-check {
  flex: none; width: 15px; height: 15px; border: 1.5px solid var(--fill-border); border-radius: 4px;
  display: flex; align-items: center; justify-content: center; color: #fff;
  transition: background .12s, border-color .12s;
}
.nm-opt.sel .nm-check { background: var(--navy); border-color: var(--navy); }
.nm-opt.sel { color: var(--navy); font-weight: 500; }
.nm-opt-name { flex: 1; min-width: 0; }
.nm-cover {
  flex: none; font-family: var(--ui); font-size: 9.5px; font-weight: 600; letter-spacing: .04em;
  color: var(--gold); display: inline-flex; align-items: center; gap: 4px;
}
.nm-cover .cd { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.nm-nocover {
  flex: none; font-family: var(--ui); font-size: 9.5px; font-weight: 600; letter-spacing: .04em;
  color: var(--accent-ink);
}
.nm-empty {
  font-family: var(--sans); font-size: 12px; font-style: italic; color: var(--ink-faint);
  padding: 14px; line-height: 1.5;
}
.nm-empty a { color: var(--navy); }

/* gap summary line under each need */
.need-map-gap {
  font-family: var(--sans); font-size: 11.5px; line-height: 1.5; color: var(--ink-faint);
  margin-top: 12px; padding-top: 11px; border-top: 0.5px solid var(--rule);
  display: flex; align-items: center; gap: 7px;
}
.need-map-gap .gd { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--steel); }
.need-map-gap.has { color: var(--accent-ink); }
.need-map-gap.has .gd { background: var(--accent-ink); }
.need-map-gap b { font-weight: 600; }

/* lossless legacy caption — only shown when migrating old free text that
   matched neither a saved story nor a known theme label */
.need-map-legacy {
  font-family: var(--sans); font-size: 11.5px; font-style: italic; color: var(--ink-faint);
  margin-top: 9px; line-height: 1.5;
}
.need-map-legacy b { font-style: normal; font-weight: 600; color: var(--ink-mid); }

/* ════════════════════════════════════════════════════════════════════
   CALM PATH — additions for the /app/ overview (Direction B)
   Append to public/app/practice.css (loaded on every app page).
   Adds NO new colors or fonts — consumes the existing :root tokens in
   public/styles.css (--navy, --gold, --gold-on-navy, --accent-ink,
   --rule, --ink, --ink-mid, --ink-faint, --white, --serif, --sans, --ui).
   The compact navy hero (.gi-hero) and the storage <details> menu are
   reused as-is; everything below replaces the busy mid-page stack.
   ════════════════════════════════════════════════════════════════════ */

/* ── Quiet data line — replaces the bordered .save-bar AND the gold
   .trust-strip card. One hairline-light row, not two cards. ───────── */
.gw-dataline{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;row-gap:8px;
  font-family:var(--ui);font-size:11px;color:var(--ink-faint);
  padding:14px 0 0;
}
.gw-dataline .dot{width:5px;height:5px;border-radius:50%;background:var(--gold);flex:none;}
.gw-dataline .sep{color:var(--rule);}
.gw-dataline .lbl{font-weight:700;letter-spacing:.12em;text-transform:uppercase;}
.gw-dataline .grow{flex:1;}
.gw-dataline a{color:var(--ink-mid);text-decoration:none;font-weight:600;letter-spacing:.04em;}
.gw-dataline a:hover{color:var(--ink);}

/* ── Editorial contents group — narrow left rail (label + one orienting
   sentence) · right column of rows. Hairlines only; no cards, no tints.
   Replaces the four .toc-band + .toc-list blocks inside #gw-gated. ── */
.gw-toc-group{display:grid;grid-template-columns:200px 1fr;gap:44px;margin-top:38px;align-items:start;}
.gw-toc-rail-label{font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:10px;}
.gw-toc-rail-note{font-family:var(--serif);font-style:italic;font-size:15px;line-height:1.55;color:var(--ink-faint);}

.gw-toc-list{list-style:none;padding:0;margin:0;}
.gw-toc-row{display:grid;grid-template-columns:40px 1fr auto;gap:20px;align-items:baseline;padding:18px 2px;border-top:.5px solid var(--rule);text-decoration:none;color:inherit;}
.gw-toc-row:first-child{border-top:none;}
.gw-toc-num{font-family:var(--serif);font-style:italic;font-weight:500;font-size:26px;line-height:1;color:var(--gold);}
.gw-toc-num--lead{color:var(--accent-ink);}      /* vermilion lead numeral — use 1 of 2 page allowance */
.gw-toc-num--dash{font-size:18px;color:var(--ink-faint);opacity:.5;}
.gw-toc-num--glyph{font-style:normal;font-size:20px;color:var(--gold);opacity:1;}  /* ◑ ◇ ◆ marks */
.gw-toc-num--glyph-ink{font-style:normal;font-size:18px;color:var(--accent-ink);opacity:1;} /* debrief ◇ — 2 of 2 */
.gw-toc-title{display:block;font-family:var(--serif);font-style:italic;font-weight:500;font-size:21px;color:var(--ink);letter-spacing:.005em;}
.gw-toc-desc{display:block;font-family:var(--sans);font-size:13px;color:var(--ink-faint);line-height:1.5;margin-top:3px;}
.gw-toc-time{font-family:var(--ui);font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);align-self:center;white-space:nowrap;}
.gw-toc-row--sub .gw-toc-title{font-size:18px;color:var(--ink-mid);}  /* secondary rows: underneath, packet, bywi, debrief */

/* ── Welcome-back band (RETURNING USER) — collapses the resume card,
   the "No account" trust card, the walk-in shortcut, and the
   accumulation summary into ONE band in the same rail rhythm. ─────── */
.gw-resume{display:grid;grid-template-columns:200px 1fr;gap:44px;margin-top:34px;align-items:start;}
.gw-resume-cta{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;background:var(--navy);color:#fff;text-decoration:none;font-family:var(--ui);font-size:13px;font-weight:600;letter-spacing:.05em;padding:13px 22px;border-radius:4px;box-shadow:0 10px 26px rgba(13,24,38,.15);transition:transform .12s,box-shadow .18s;}
.gw-resume-cta:hover{transform:translateY(-1px);box-shadow:0 16px 34px rgba(13,24,38,.22);}
.gw-resume-cta .ar{color:var(--gold-on-navy);}
/* Intelligent Resume (Epic 4.2): the proposed move's payoff + one quiet secondary. */
.gw-resume-state{margin-top:18px;padding-top:15px;border-top:.5px solid var(--rule);font-family:var(--sans);font-size:13px;color:var(--ink-mid);line-height:1.65;max-width:560px;}
.gw-resume-secondary{display:inline-block;margin-top:13px;font-family:var(--ui);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);text-decoration:none;transition:color .15s;}
.gw-resume-secondary:hover{color:var(--ink);}
.gw-resume-secondary[hidden]{display:none !important;}

/* Artifact ladder (Epic 4.3 · T6): the "ready to carry" block under the resume
   CTA — the highest finished artifact, with one-click export. Navy + gold. */
.gw-resume-ready{margin-top:18px;padding-top:15px;border-top:.5px solid var(--rule);}
.gw-resume-ready[hidden]{display:none !important;}
.gw-resume-ready-head{font-family:var(--ui);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:6px;}
.gw-resume-ready-name{font-family:var(--sans);font-size:13px;color:var(--ink-mid);line-height:1.6;margin-bottom:12px;max-width:560px;}
.gw-resume-ready-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.gw-resume-ready-btn{font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.04em;padding:9px 14px;border-radius:4px;cursor:pointer;border:1px solid var(--navy);background:transparent;color:var(--navy);transition:background .15s,color .15s,transform .12s;}
.gw-resume-ready-btn:hover{background:rgba(13,24,38,.06);transform:translateY(-1px);}
.gw-resume-ready-btn--primary{background:var(--navy);color:#fff;border-color:var(--navy);}
.gw-resume-ready-btn--primary:hover{background:#1a2d45;color:#fff;}
.gw-resume-ready-status{margin-top:10px;min-height:15px;font-family:var(--sans);font-size:12px;color:var(--gold);}

/* ── Quiet footer — demotes the gold Pro card to one line + legal. ── */
.gw-foot{margin-top:40px;padding-top:20px;border-top:.5px solid var(--rule);display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;}
.gw-foot-pro{font-family:var(--sans);font-size:12.5px;color:var(--ink-faint);line-height:1.5;}
.gw-foot-pro b{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--gold);font-size:15px;}
.gw-foot-pro a{color:var(--ink-mid);text-decoration:none;font-weight:600;}
.gw-foot-grow{flex:1;}
.gw-foot-legal{font-family:var(--ui);font-size:11px;color:var(--ink-faint);letter-spacing:.04em;}

/* ── Responsive — stack the rail under its rows on narrow screens. ── */
@media (max-width:720px){
  .gw-toc-group,.gw-resume{grid-template-columns:1fr;gap:14px;margin-top:28px;}
  .gw-resume-state{max-width:none;}
}
@media (max-width:560px){
  .gw-toc-row{grid-template-columns:32px 1fr;gap:14px;}
  .gw-toc-time{display:none;}
  .gw-toc-title{font-size:19px;}
}

/* hidden attribute must beat the display:grid rule above */
.gw-resume[hidden] { display: none !important; }

/* ── Mobile dataline — push controls to their own row so the status
   line and "Where your data lives →" don't overflow at 375px. ── */
@media (max-width: 560px) {
  .gw-dataline .save-bar-controls { width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════
   Presence · Updates page — timeline body styles (APP VERSION)
   Load on /app/updates/ AFTER styles.css (+ practice.css), the same way
   other app pages load their CSS. Adds NO :root, NO reset, NO hero, NO
   footer rules — the page reuses the existing .gi-hero and
   .presence-legal-footer for chrome. Consumes the :root tokens already in
   styles.css (--navy, --gold, --accent-ink, --steel, --rule, --ink,
   --ink-mid, --ink-faint, --serif, --sans, --ui). No new colors/fonts.
   ════════════════════════════════════════════════════════════════════ */

/* Reading column. Mirrors .gw-wrap but pinned to a calmer 880px measure. */
.up-wrap{max-width:880px;margin:0 auto;padding:0 48px 64px;}

/* Orienting caption — same 200px rail rhythm as the overview groups. */
.up-lede{display:grid;grid-template-columns:200px 1fr;gap:44px;margin:34px 0 6px;align-items:baseline;}
.up-lede-label{font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);}
.up-lede-note{font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.55;color:var(--ink-mid);max-width:600px;}
.up-lede-note .sub{display:block;font-family:var(--sans);font-style:normal;font-size:13px;color:var(--ink-faint);line-height:1.6;margin-top:10px;}

/* One entry: date + category in the rail, the change note on the right. */
.up-entry{display:grid;grid-template-columns:200px 1fr;gap:44px;padding:34px 0;border-top:.5px solid var(--rule);align-items:start;}
.up-entry:first-of-type{margin-top:22px;}
.up-when{position:relative;}
.up-date{font-family:var(--serif);font-style:italic;font-weight:500;font-size:22px;color:var(--ink);line-height:1.1;letter-spacing:.005em;}
.up-cat{display:inline-block;white-space:nowrap;margin-top:10px;font-family:var(--ui);font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--gold);}
.up-cat--data{color:var(--accent-ink);}  /* Privacy & data — vermilion, used sparingly (rule-of-two) */

.up-title{font-family:var(--serif);font-style:italic;font-weight:500;font-size:23px;color:var(--ink);letter-spacing:.005em;line-height:1.2;}
.up-note{font-family:var(--sans);font-size:14px;line-height:1.65;color:var(--ink-mid);margin-top:9px;max-width:600px;}

/* Change list — Added / Changed / Removed in a fixed label column. */
.up-changes{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:9px;}
.up-change{display:grid;grid-template-columns:78px 1fr;gap:14px;align-items:baseline;}
.up-change-tag{font-family:var(--ui);font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;line-height:1.5;}
.up-change-tag--add{color:var(--gold);}
.up-change-tag--chg{color:var(--steel);}
.up-change-tag--rem{color:var(--ink-faint);}
.up-change-text{font-family:var(--sans);font-size:13px;line-height:1.55;color:var(--ink-mid);}

/* Optional quiet "tell us" line, sits at the end of .up-wrap, ABOVE the
   standard <footer class="presence-legal-footer">. */
.up-contact{margin-top:8px;padding-top:22px;border-top:.5px solid var(--rule);font-family:var(--sans);font-size:12.5px;color:var(--ink-faint);}
.up-contact a{color:var(--ink-mid);text-decoration:none;font-weight:600;}
.up-contact a:hover{color:var(--ink);}

@media (max-width:720px){
  .up-wrap{padding:0 24px 48px;}
  .up-lede,.up-entry{grid-template-columns:1fr;gap:8px;}
  .up-entry{padding:26px 0;}
  .up-cat{margin-top:4px;}
  .up-title{margin-top:6px;}
}
@media (max-width:480px){
  .up-change{grid-template-columns:1fr;gap:1px;}
}

/* ════════════════════════════════════════════════════════════════════
   Epic 2 · Calm by Design — shared components.
   The practice-page quiet data line (2.0), focus dimming (2.1a), the
   typeset collapsed-card object (2.2), session-card collapse (2.1b),
   progressive needs (2.1c), and the pause line (2.4). Hairlines over
   borders, gold = quiet nudge; consumes :root tokens only.
   ════════════════════════════════════════════════════════════════════ */

/* ── 2.0 · Quiet data line, practice-page variant. Replaces the bordered
   .pr-main-save save bar at the top of each worksheet. The storage
   <details> menu is reused unchanged at the right end of the row. */
.gw-dataline--practice{
  padding:0 0 14px;
  margin-bottom:26px;
  border-bottom:.5px solid var(--rule);
}
.gw-dataline--practice .save-indicator{
  font-family:var(--ui);font-size:11px;color:var(--ink-faint);letter-spacing:.04em;
}

/* ── 2.1a · Focus dimming — when one card or prompt block holds focus,
   its siblings step back. The page stays scannable; the eye is held. */
.story-card,
.prompt-block,
.need-map{transition:opacity .22s ease;}
.story-cards:focus-within .story-card:not(:focus-within),
.form-section-body:focus-within .prompt-block:not(:focus-within),
.need-map-list:focus-within > .need-map:not(:focus-within){opacity:.48;}
/* A focused need lives inside prompt 2's block — don't dim its own host. */
.form-section-body:focus-within .prompt-block:focus-within{opacity:1;}

/* ── 2.2 · Input becomes an object — the typeset collapsed card.
   Same grammar as Compose's story picker (.cm-story): serif story name,
   primary theme in italic, metric in quiet gold. */
.scp-object{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;}
.scp-name{font-family:var(--serif);font-style:normal;font-weight:500;font-size:17px;color:var(--ink);letter-spacing:.005em;}
.scp-theme{font-family:var(--serif);font-style:italic;font-size:13.5px;color:var(--ink-faint);}
.scp-metric{font-family:var(--sans);font-size:11.5px;color:var(--gold);letter-spacing:.01em;}

/* ── 2.1b · Session-card collapse (Interview sessions) — the story-card
   pattern, ported. The header row keeps the number + title; the chevron
   collapses everything beneath it into the typeset preview. */
.prompt-block[data-session-num] > .prompt-label{display:flex;align-items:center;gap:10px;}
.session-collapse-btn{
  width:28px;height:28px;margin-left:auto;flex:none;
  border:0.5px solid var(--rule);background:#fff;border-radius:2px;
  font-family:var(--ui);font-size:12px;color:var(--ink-faint);cursor:pointer;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  transition:color .15s,border-color .15s,background .15s,transform .2s;
}
.session-collapse-btn:hover{color:var(--ink);border-color:var(--steel);background:var(--light-bg);}
.prompt-block--collapsed .session-collapse-btn{transform:rotate(-90deg);}
.session-collapsed-preview{display:none;padding:6px 0 0;}
.prompt-block--collapsed.prompt-block[data-session-num] > :not(.prompt-label):not(.session-collapsed-preview){display:none;}
.prompt-block--collapsed .session-collapsed-preview{display:flex;}

/* ── 2.1c · Progressive needs (Their world, prompt 2) — Need 1 renders
   alone; the next need arrives by invitation, like adding a story. */
.need-map[hidden]{display:none;}
.need-add-btn{
  background:none;border:1.5px dashed var(--fill-border);border-radius:6px;
  padding:10px 18px;margin-top:14px;
  font-family:var(--ui);font-size:13px;font-weight:500;color:var(--ink-mid);
  cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  transition:border-color .15s,color .15s,background .15s;
}
.need-add-btn:hover{border-color:var(--steel);color:var(--ink);background:var(--light-bg);}
.need-add-btn[hidden]{display:none;}

/* ── 2.4 · Permission to pause — a quiet line at a natural seam. Names
   the artifact, not the exit. Gold, serif, no card. */
.pause-line{
  display:flex;align-items:baseline;gap:10px;
  margin:14px 0 4px;padding:10px 14px;
  border-left:2px solid var(--gold);
  font-family:var(--serif);font-style:italic;font-size:14.5px;line-height:1.55;color:var(--ink-mid);
  opacity:0;transition:opacity .5s ease;
}
.pause-line.show{opacity:1;}
.pause-line[hidden]{display:none;}