/* MW-ALIGN-V1 — 6b. Full note in the session log, 15 Aug 2026. */

@media (prefers-reduced-motion:reduce){
[data-module="vc"] *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body[data-module="vc"]{color:var(--text);
  background:var(--bg);
  display:flex;align-items:center;padding:var(--space-4)}
[data-module="vc"] .shell{width:100%;max-width:430px;height:min(92dvh,880px);max-height:100%;background:var(--surface);
  border-radius:var(--radius-lg);display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow-lg)}
@media (max-width:520px){
body[data-module="vc"]{padding:0;align-items:stretch}
/* VC-SHELL-V23 — VC-SHELL-V23:start Amended 14 Aug 2026, SHELL-MERGE-V2-NOTE: the declarations this block shared byte-for-byte with… Full note in the session log, 15 Aug 2026. */
[data-module="vc"] .shell{height:100dvh;min-height:100dvh;max-height:100dvh;border-radius:0;box-shadow:none;max-width:none;overflow:hidden}
[data-module="vc"] header{position:static;top:auto;z-index:20;}
[data-module="vc"] main{flex:1 1 auto;overflow-y:auto;}
/* VC-SHELL-V23:end */
}
[data-module="vc"] header{padding:var(--space-4) var(--space-5) var(--space-3);border-bottom:1px solid var(--divider);background:var(--surface-2)}
[data-module="vc"] .module{color:var(--muted);letter-spacing:.08em}
[data-module="vc"] .track{background:var(--surface-offset);}
[data-module="vc"] .fill{width:0;background:linear-gradient(90deg,var(--primary-soft),var(--primary));}
[data-module="vc"] main{flex:1;padding:var(--space-5);gap:var(--space-4);overflow-y:auto}
[data-module="vc"] main>*{flex-shrink:0}
[data-module="vc"] .kicker{color:var(--primary-text);margin-bottom:2px;}
[data-module="vc"] .body{color:var(--muted)}
[data-module="vc"] .card{box-shadow:var(--shadow-sm)}
[data-module="vc"] .empty{color:var(--faint);padding:var(--space-4)}
[data-module="vc"] .accent{color:var(--primary-text);font-weight:500}
[data-module="vc"] .counter{font-size:var(--text-xs);color:var(--faint);text-align:center}
/* Domain picker — the MW idea pill, sized up for a whole-screen choice */
[data-module="vc"] .ideas{display:flex;flex-wrap:wrap;gap:6px}
[data-module="vc"] .idea{display:inline-flex;align-items:center;gap:var(--space-2);padding:7px 10px;border-radius:var(--radius-full);border:1px solid var(--primary-soft);background:var(--surface);font-size:var(--text-xs);cursor:pointer;font-family:inherit;text-align:left;width:auto;transition:all var(--ease);color:var(--on-primary);white-space:nowrap}
[data-module="vc"] .idea.on{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
[data-module="vc"] .idea.domain{padding:12px 16px;font-size:var(--text-sm);font-weight:500}
[data-module="vc"] .idea.domain .dhint{font-size:var(--text-xs);font-weight:400;font-style:italic;color:var(--faint)}
[data-module="vc"] .idea.domain.on .dhint{color:inherit;opacity:.7}
/* Deck */
[data-module="vc"] .fcard{
  background:var(--surface);border:1px solid var(--border);
  padding:var(--space-5);box-shadow:var(--shadow-md);
  justify-content:center;}
[data-module="vc"] .fcard .txt{font-size:1.35rem;}
[data-module="vc"] .fcard .sub{font-size:var(--text-xs);color:var(--muted);line-height:1.5}
/* STAMP-OUT-V1 (vc): yes-stamp colour deleted. */
/* CHEVRON-AIM-V1 (vc): rest hoisted to core. */
[data-module="vc"] .tapzone{background:transparent;}
[data-module="vc"] .stackcard{box-shadow:var(--shadow-sm)}
[data-module="vc"] .deckbtns.gone{visibility:hidden;pointer-events:none;height:0;margin:0;overflow:hidden}
[data-module="vc"] .deckbtns button{font-family:inherit;
  cursor:pointer;}
/* Trays */
[data-module="vc"] .tray{margin-top:var(--space-3);padding-top:var(--space-2)}
 /* VC-CSS-V2:TL1 */
 /* VC-CSS-V2:TL2 */
[data-module="vc"] .trayhelp{color:var(--faint);}
[data-module="vc"] .traylist{margin-top:var(--space-2)}
[data-module="vc"] .trayitem{
  background:var(--primary-tint);}
[data-module="vc"] .trayitem button{background:none;border:none;color:var(--faint);font-size:var(--text-sm);cursor:pointer;}
/* Pyramid */
[data-module="vc"] .pyr{display:flex;flex-direction:column;gap:6px;align-items:center;margin-top:4px}
[data-module="vc"] .prow{display:flex;gap:6px;justify-content:center}
[data-module="vc"] .pcard{display:flex;align-items:center;justify-content:center;text-align:center;border-radius:var(--radius-sm);
  background:var(--surface-2);border:1px solid var(--border);padding:2px 3px;line-height:1.15}
[data-module="vc"] .r1 .pcard{width:190px;height:60px;font-size:1.05rem;font-family:var(--font-display)}
[data-module="vc"] .r2 .pcard{width:140px;height:52px;font-size:.82rem;font-weight:500}
[data-module="vc"] .r3 .pcard{width:102px;height:46px;font-size:.7rem;font-weight:500}
[data-module="vc"] .r4 .pcard{width:74px;height:42px;font-size:.6rem}
[data-module="vc"] .r5 .pcard{width:58px;height:40px;font-size:.53rem}
[data-module="vc"] .r1 .pcard{background:var(--primary);border-color:var(--primary);color:var(--on-primary);box-shadow:0 6px 16px rgba(232,176,22,.35)}
[data-module="vc"] .r2 .pcard{background:var(--primary-soft);border-color:var(--primary-soft)}
[data-module="vc"] .r3 .pcard{background:var(--primary-tint);border-color:var(--primary-tint)}
[data-module="vc"] .r4 .pcard{background:var(--surface-2);color:var(--muted)}
[data-module="vc"] .r5 .pcard{background:var(--surface-2);color:var(--faint);border-color:var(--divider)}
/* Download row — BA's treatment */
[data-module="vc"] .dlrow{display:flex;margin-top:var(--space-2)} /* VC-CSS-V1:DL */
/* PARITY-DL-ONE-V1: shape moved to pathery-core.css; the label colour is stated in the VC-STATE-V22 block below. */
/* Cross-domain threads - labels take the shared --dom-* hues from :root */
[data-module="vc"] .threads{border:1px solid var(--divider);border-radius:var(--radius-md);overflow:hidden;background:var(--surface)}
[data-module="vc"] .trow{display:grid;grid-template-columns:64px 1fr 1fr 1fr;padding:9px 10px;gap:6px;align-items:center}
[data-module="vc"] .trow+.trow{border-top:1px solid var(--divider)}
[data-module="vc"] .trow.head{background:var(--surface-2);padding:7px 10px}
[data-module="vc"] .trow .dl{font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;font-weight:500}
[data-module="vc"] .dl.work{color:var(--dom-work)}
[data-module="vc"] .dl.play{color:var(--dom-play)}
[data-module="vc"] .dl.love{color:var(--dom-love)}
[data-module="vc"] .dl.health{color:var(--dom-health)}
[data-module="vc"] .tv{font-size:.68rem;text-align:center;padding:4px 2px;border-radius:var(--radius-full);border:1px solid transparent;color:var(--muted);overflow-wrap:anywhere;min-width:0}
[data-module="vc"] .tv.hit{background:var(--primary-tint);border-color:var(--primary-soft);color:var(--text);font-weight:500}
[data-module="vc"] .trow.head .tv{font-size:.58rem;color:var(--faint);text-transform:uppercase;letter-spacing:.05em;background:none;border:none;font-weight:500}
[data-module="vc"] .insight{border-radius:var(--radius-md);background:var(--primary-tint);border:1px solid var(--primary-soft);padding:12px 14px;font-size:.78rem;color:var(--text);line-height:1.45}
[data-module="vc"] .insight b{font-family:var(--font-display);font-weight:400;font-size:.95rem}
/* Nav */
[data-module="vc"] nav{padding:var(--space-4) var(--space-5);border-top:1px solid var(--divider);background:var(--surface-2)}
[data-module="vc"] nav button{font-family:inherit;font-weight:400;padding:0 var(--space-5);
  cursor:pointer;border:1px solid transparent;touch-action:manipulation;
  }
[data-module="vc"] .back{background:var(--surface);border-color:var(--border);color:var(--muted);flex:0 0 96px}
[data-module="vc"] .back:disabled{display:none}
[data-module="vc"] .next{flex:1;background:var(--primary);color:var(--on-primary);box-shadow:none}
@media (hover:hover){
[data-module="vc"] .next:hover:not(.gated){background:var(--primary-press)}
}
[data-module="vc"] .next.gated{visibility:hidden;pointer-events:none}
@media (hover:hover){
[data-module="vc"] .next.closing:hover{background:var(--primary-press)}
}
[data-module="vc"] footer{padding:var(--space-3) var(--space-5) var(--space-5);color:var(--faint);background:var(--surface-2)}
[data-module="vc"] .flinks a{color:var(--muted);}
[data-module="vc"] .flinks a:hover{color:var(--text);border-bottom-color:var(--divider)}
[data-module="vc"] .fine{color:var(--faint);}
[data-module="vc"] .homelink{color:inherit}
/* Typography passes carried over from MW */
[data-module="vc"] .r1 .pcard{font-variant-ligatures:common-ligatures contextual;font-feature-settings:"liga" 1,"clig" 1;font-kerning:normal}
[data-module="vc"] .idea,[data-module="vc"] .fcard .txt,[data-module="vc"] .fcard .sub,[data-module="vc"] .pcard{overflow-wrap:anywhere;min-width:0}
/* The module label becomes a button */
[data-module="vc"] .module{background:none;border:0;padding:0;font-family:inherit;line-height:inherit;
  -webkit-appearance:none;appearance:none}
@media (hover:hover){
[data-module="vc"] .module:hover{color:var(--text)}
}
/* Result screen text is centred at every width — the pyramid centres itself */
[data-module="vc"] main[data-screen="result"]>.kicker,[data-module="vc"] main[data-screen="result"]>.title,[data-module="vc"] main[data-screen="result"]>.counter{text-align:center}
/* VC-COPY-V1: the tap hint on the pyramid page sits under the heading and is
   centred with the title and the date. Superseded by VC-HINT-V1 below. */
[data-module="vc"] main[data-screen="result"]>.vhint{text-align:center;color:var(--faint);font-style:italic;font-size:var(--text-xs)}
/* ===== Desktop layer ===================================================== */
@media (min-width:521px){
body[data-module="vc"]{display:block;padding:0;align-items:stretch;background:var(--surface-2)}
[data-module="vc"] .shell{width:auto;max-width:none;height:auto;min-height:100dvh;border-radius:0;
    box-shadow:none;background:var(--surface-2);overflow:visible;display:flex;flex-direction:column}
[data-module="vc"] header{position:sticky;top:0;z-index:30;background:var(--surface-2);
    border-bottom:1px solid var(--divider);padding:var(--space-4) 0 var(--space-3)}
[data-module="vc"] .steplabel{margin-left:auto;color:var(--faint);
    }
[data-module="vc"] main{gap:var(--space-5);
    background:var(--surface);padding:38px max(40px,calc((100% - 1000px) / 2)) 34px;overflow:visible;/* SHELL-OVERFLOW-FIX-V2 */}
[data-module="vc"] nav{background:transparent;
    padding:var(--space-4) max(40px,calc((100% - 1000px) / 2));
    border-top:1px solid var(--divider)}
[data-module="vc"] .next{flex:0 0 auto;}
[data-module="vc"] footer{background:transparent;display:block!important;
    padding:var(--space-3) max(40px,calc((100% - 1000px) / 2)) var(--space-5)}
[data-module="vc"] .dlrow{justify-content:center}
[data-module="vc"] .dlbtn{flex:0 0 auto;min-width:210px}
/* Sort: deck in the middle, less valued left, more valued right */
@media (min-width:960px){
[data-module="vc"] main[data-screen="r1"],[data-module="vc"] main[data-screen="r2"],[data-module="vc"] main[data-screen="r3"],[data-module="vc"] main[data-screen="r4"]{display:grid;column-gap:32px;align-items:start;
      grid-template-columns:minmax(0,1fr) minmax(0,420px) minmax(0,1fr)}
[data-module="vc"] main[data-screen="r1"]>.kicker,[data-module="vc"] main[data-screen="r2"]>.kicker,[data-module="vc"] main[data-screen="r3"]>.kicker,[data-module="vc"] main[data-screen="r4"]>.kicker,
[data-module="vc"] main[data-screen="r1"]>.title,[data-module="vc"] main[data-screen="r2"]>.title,[data-module="vc"] main[data-screen="r3"]>.title,[data-module="vc"] main[data-screen="r4"]>.title,
[data-module="vc"] main[data-screen="r1"]>.body,[data-module="vc"] main[data-screen="r2"]>.body,[data-module="vc"] main[data-screen="r3"]>.body,[data-module="vc"] main[data-screen="r4"]>.body{grid-column:1 / -1;text-align:center;margin-left:auto;margin-right:auto}
[data-module="vc"] main[data-screen="r1"]>.deckwrap,[data-module="vc"] main[data-screen="r2"]>.deckwrap,[data-module="vc"] main[data-screen="r3"]>.deckwrap,[data-module="vc"] main[data-screen="r4"]>.deckwrap{grid-column:2;grid-row:4;margin-top:calc(var(--text-xs) * 1.6 + var(--space-2))}
[data-module="vc"] main[data-screen="r1"]>.deckbtns,[data-module="vc"] main[data-screen="r2"]>.deckbtns,[data-module="vc"] main[data-screen="r3"]>.deckbtns,[data-module="vc"] main[data-screen="r4"]>.deckbtns{grid-column:2;grid-row:5}
[data-module="vc"] main[data-screen="r1"]>.tray,[data-module="vc"] main[data-screen="r2"]>.tray,[data-module="vc"] main[data-screen="r3"]>.tray,[data-module="vc"] main[data-screen="r4"]>.tray{margin-top:0;border-top:none;padding-top:0;grid-row:4 / span 2}
/* Columns come from data-side, which both piles carry, so child indices
   cannot drift. The pips count as a child even at display:none, which is
   what the index version got wrong. */ /* VC-CSS-V2:DOM */
[data-module="vc"] main[data-screen="r1"]>.tray[data-side="left"],[data-module="vc"] main[data-screen="r2"]>.tray[data-side="left"],[data-module="vc"] main[data-screen="r3"]>.tray[data-side="left"],[data-module="vc"] main[data-screen="r4"]>.tray[data-side="left"]{grid-column:1} /* VC-CSS-V2:COLL */
[data-module="vc"] main[data-screen="r1"]>.tray[data-side="right"],[data-module="vc"] main[data-screen="r2"]>.tray[data-side="right"],[data-module="vc"] main[data-screen="r3"]>.tray[data-side="right"],[data-module="vc"] main[data-screen="r4"]>.tray[data-side="right"]{grid-column:3} /* VC-CSS-V2:COLR */
[data-module="vc"] main[data-screen="r1"]>.empty,[data-module="vc"] main[data-screen="r2"]>.empty,[data-module="vc"] main[data-screen="r3"]>.empty,[data-module="vc"] main[data-screen="r4"]>.empty{grid-column:1 / -1}
}
}
/* ===== Step reflows. Only above 960, where the columns actually fit. ===== */
@media (min-width:960px){
[data-module="vc"] main[data-screen="welcome"]>*{max-width:none;width:auto;margin-left:0;margin-right:0;text-align:left}
[data-module="vc"] main[data-screen="welcome"]>.title{align-self:start}
[data-module="vc"] main[data-screen="welcome"]>div{grid-column:2;max-width:none}
[data-module="vc"] main[data-screen="welcome"]>div .kicker{text-align:left;margin-bottom:2px}
[data-module="vc"] main[data-screen="welcome"]>.card{margin-top:var(--space-3)}
/* Domain choice: one centred column */
[data-module="vc"] main[data-screen="domain"]>*{width:100%;max-width:660px;margin-left:auto;margin-right:auto}
[data-module="vc"] main[data-screen="domain"]>.title,[data-module="vc"] main[data-screen="domain"]>.body{text-align:center}
[data-module="vc"] main[data-screen="domain"]>.ideas{justify-content:center}
/* Result: one centred column, threads held to a readable width */
[data-module="vc"] main[data-screen="result"]>*{width:100%;max-width:660px;margin-left:auto;margin-right:auto}
[data-module="vc"] main[data-screen="result"]>.threads,[data-module="vc"] main[data-screen="result"]>.insight{max-width:520px}
[data-module="vc"] main[data-screen="result"]>.dlrow{max-width:520px}
}

/* PATHERY-TOUCH-V1-VC — Pathery — gesture policy, Values Card Sort. Full note in the session log, 15 Aug 2026. */

/* PATHERY-NAVGHOST-V1-VC — Pathery — nav overlay suppression, Values Card Sort. Full note in the session log, 15 Aug 2026. */

/* PATHERY-TAPHL-V1-VC — Pathery — tap highlight, Values Card Sort. Full note in the session log, 15 Aug 2026. */
body[data-module="vc"]{-webkit-tap-highlight-color:transparent}
/* MW-WELCOME-V10:end */

/* VC-WELCOME-V10:start */
/* VC-WELCOME-V10 — Pathery - VC welcome v10, aligned with BA-WELCOME-V10. Full note in the session log, 15 Aug 2026. */


/* VC-LEAD-V1: the lead line is plain text at --muted now, and the focus item
   on the meta line opens the hexaflex panel. The gold pair is the one .cbt
   uses, so no new colour is introduced. The item matches the ACT badge at
   weight 500, with an 11px chevron and the same finger-sized hit area. Its icon
   and chevron inherit the colour, which also overrides the rule that pins meta
   icons to --faint, so label, icon and chevron move together. */
[data-module="vc"] .wlead{color:var(--muted);font-family:inherit;font-weight:400;cursor:auto;}
[data-module="vc"] .metaline .mitem.mtap{position:relative;color:var(--primary-text);
  font:inherit;font-size:var(--text-xs);font-weight:500;line-height:1;background:none;border:0;
  padding:0;cursor:pointer;transition:color var(--ease)}
[data-module="vc"] .metaline .mitem.mtap::before{content:'';position:absolute;inset:-11px -6px}
[data-module="vc"] .metaline .mitem.mtap svg{color:inherit}
[data-module="vc"] .metaline .mitem.mtap .chev{width:11px;height:11px;flex:none;
  transition:transform var(--ease)}
[data-module="vc"] .metaline .mitem.mtap[aria-expanded="true"] .chev{transform:rotate(180deg)}
@media (hover:hover){[data-module="vc"] .metaline .mitem.mtap:hover{color:var(--primary-darker)}}
[data-module="vc"] .metaline .mitem.mtap:active{color:var(--primary-darker)}
@media (prefers-reduced-motion:reduce){
[data-module="vc"] .metaline .mitem.mtap .chev{transition:none}
}

[data-module="vc"] .wrule{background:var(--divider)}
[data-module="vc"] .waction{color:var(--muted);}


[data-module="vc"] .metaline{
  color:var(--faint)}
[data-module="vc"] .metaline .mitem svg{color:var(--faint)}

[data-module="vc"] .cbt{
  
  background:none;
  }

[data-module="vc"] .whybody{
  color:var(--faint);}
@media (prefers-reduced-motion:reduce){
  }

@media (min-width:521px){
}

@media (min-width:960px){
}
/* VC-WELCOME-V10:end */

/* VC-STEP-V3:start */
/* VC-STEP-V3 — Pathery - Values Card Sort, steps 1-5, third mobile pass. Full note in the session log, 15 Aug 2026. */
body[data-module="vc"]{
  /* retired-token aliases. --surface-2 is NOT aliased: [data-module="vc"]
     .card reads it, and aliasing it to --surface strips the deck-card fill. */
  
  
  
  /* step 1 card palette; icon ink is the shared --dom-* hue */
  --work-c:#3a6ea8;  --work-soft:#cfe0f2;  --work-tint:#F2F7FD;
  --play-c:#e8b016;  --play-soft:#f7e5a4;  --play-tint:#fdf6e0;
  --love-c:#c4587f;  --love-soft:#f0cddb;  --love-tint:#fdf0f5;
  --hlth-c:#5f9440;  --hlth-soft:#cfe3c2;  --hlth-tint:#f1f7ec}
[data-module="vc"] button{color:inherit}

/* Step 1 - domain quadrants */
[data-module="vc"] .dgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
[data-module="vc"] .dq{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  min-height:112px;font-family:inherit;text-align:left;cursor:pointer;transition:all var(--ease);
  border-radius:var(--radius-lg);padding:14px;background:var(--surface);
  border:1px solid var(--border);color:var(--text)}
[data-module="vc"] .dqi{display:flex}
[data-module="vc"] .dqi svg{width:22px;height:22px;margin-bottom:6px;color:var(--ink)}
[data-module="vc"] .dqt{display:flex;align-items:center;gap:5px;font-size:var(--text-base);font-weight:500;line-height:1.2}
[data-module="vc"] .dqt .tick{width:13px;height:13px;color:var(--ink)}
[data-module="vc"] .dqh{font-size:var(--text-xs);color:var(--faint);line-height:1.35}
[data-module="vc"] .dq.on{background:var(--tint);border-color:var(--c);box-shadow:var(--shadow-sm)}
@media (hover:hover){
[data-module="vc"] .dq:hover{border-color:var(--soft);background:var(--tint)}
}
[data-module="vc"] .dq.work  {--c:var(--work-c);--ink:var(--dom-work);--soft:var(--work-soft);--tint:var(--work-tint)}
[data-module="vc"] .dq.play  {--c:var(--play-c);--ink:var(--dom-play);--soft:var(--play-soft);--tint:var(--play-tint)}
[data-module="vc"] .dq.love  {--c:var(--love-c);--ink:var(--dom-love);--soft:var(--love-soft);--tint:var(--love-tint)}
[data-module="vc"] .dq.health{--c:var(--hlth-c);--ink:var(--dom-health);--soft:var(--hlth-soft);--tint:var(--hlth-tint)}

/* Rounds - kicker hugs the title; module gold via the default rule */
[data-module="vc"] .kicker.dk{margin-bottom:-8px}

/* Pips - dots hug the outer edges; each padlock's box is reserved on
   the inner edge, so nothing shifts when a side fills */
[data-module="vc"] .pips{display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:16px;margin-bottom:-6px}
[data-module="vc"] .pips+.deckwrap{margin-top:0}
[data-module="vc"] .pips .side{display:inline-flex;align-items:center;gap:7px;color:var(--faint)}
[data-module="vc"] .dots{display:inline-flex;gap:5px}
/* PIPS-TRIM-V1 — PIPS-TRIM-V1 15 Aug 2026: the .dots i base rule is deleted. Full note in the session log, 15 Aug 2026. */
/* full is data only: nothing paints on .full. The VC-STATE-V9 block
   reveals the state via .warn at the moment a swipe is refused. */

/* Deck - refused swipe bounce, and the swipe stamps */
[data-module="vc"] .fcard.nudge{animation:vcnudge 420ms cubic-bezier(.36,.07,.19,.97)}
/* STAMP-OUT-V1 (vc): no-stamp colour deleted. */

/* Piles - Less valued renders above More valued */
[data-module="vc"] .pilehead{display:flex;align-items:baseline;gap:8px}
[data-module="vc"] .pl{font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:var(--muted)} /* VC-CSS-V1:PL */
[data-module="vc"] .pc{font-size:.68rem;color:var(--faint);font-variant-numeric:tabular-nums;margin-left:auto}
[data-module="vc"] .pilelist{display:flex;flex-wrap:wrap;gap:5px;margin-top:var(--space-2)} /* VC-CSS-V1:LIST */
[data-module="vc"] .pv{display:inline-flex;align-items:center;gap:4px;font-size:var(--text-xs);
  padding:4px 9px;border-radius:var(--radius-full);background:var(--surface);
  border:1px solid var(--border);color:var(--muted)}
[data-module="vc"] .pv .rm{margin-left:1px;background:none;border:0;padding:0;position:relative;
  font:inherit;font-size:var(--text-sm);line-height:1;color:inherit;opacity:1;
  cursor:pointer}
[data-module="vc"] .pv .rm::before{content:'';position:absolute;inset:-14px -10px -14px -6px}

@media (prefers-reduced-motion:reduce){
[data-module="vc"] .fcard.nudge{animation:none}
}
/* VC-STEP-V3:end */

/* VC-STATE-V9:start */
/* VC-STATE-V9 — Pathery - Values Card Sort, state V9. Full note in the session log, 15 Aug 2026. */

/* --- retired tokens, VC only. --surface-2 deliberately NOT aliased. --- */
body[data-module="vc"]{--divider:var(--border)} /* PRESS-GOLD-V1: the darker-gold shortcut is gone, and nothing reads it now; this module lifts instead. */

/* --- 1. Full note in the session log, 15 Aug 2026. */
[data-module="vc"] .dq.play .dqi svg{color:var(--primary)}

/* --- 2. deck cards keep the BA/MW fill --- */
[data-module="vc"] .card{background:var(--surface-2)}

/* --- 3. pips: standing full is inert, .warn paints --- */
[data-module="vc"] .pips .dots i{transition:background 200ms ease}
/* PIPS-TRIM-V1: the .warn pip recolour is deleted. VC-STATE-V22 already holds every warn pip at its resting colour with !important — "pips never change". */

/* the padlock is always in flow so nothing shifts; opacity carries it */
[data-module="vc"] .pips .side .lk{display:inline-flex;width:13px;height:13px;flex:none}

/* --- 3b. pile heading follows the same timing --- */
[data-module="vc"] .pilehead .pl,
[data-module="vc"] .pilehead .pc{transition:color 260ms ease}

/* --- 4. Less valued button: neutral throughout, label fades when closed --- */
[data-module="vc"] .deckbtns button{background:var(--surface);border:1px solid var(--border);color:var(--text)}
[data-module="vc"] .deckbtns .yes{background:var(--primary);border-color:var(--primary);
  color:var(--on-primary);font-weight:500}

/* --- 5. no pulse --- */
[data-module="vc"] .lk.pulse{animation:none!important}

[data-module="vc"] main[data-screen="result"]{overflow-x:hidden}

/* ---- the stage ---- */
[data-module="vc"] .stage{position:relative;
  margin:calc(8px * var(--k,1)) calc(-1 * var(--space-5)) 4px;
  padding:6px 0 10px} /* VC-CSS-V1:STAGE */
[data-module="vc"] .stage .tier{display:flex;justify-content:center;align-items:center;
  gap:calc(14px * var(--k,1));padding:0 var(--space-5)}
[data-module="vc"] .stage .tier+.tier{margin-top:calc(20px * var(--k,1))} /* VC-CSS-V1:TIER */
[data-module="vc"] .stage .t5{gap:6px;padding:0 6px;flex-wrap:nowrap}

/* ---- one value ---- */
[data-module="vc"] .val{position:relative;border:0;background:none;padding:0;cursor:pointer;
  font:inherit;color:inherit;text-align:center;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:opacity .45s ease}
[data-module="vc"] .val .anim{position:relative;display:inline-block;will-change:transform}
[data-module="vc"] .val .w{position:relative;z-index:3;display:inline-block;white-space:nowrap;
  font-family:var(--font-display);font-weight:400;color:var(--text);line-height:1.2;
  transition:transform .5s cubic-bezier(.22,1,.36,1),color .5s ease}
[data-module="vc"] .t1 .w{font-size:calc(29px * var(--k,1))}
[data-module="vc"] .t2 .w{font-size:calc(21px * var(--k,1))}
[data-module="vc"] .t3 .w{font-size:calc(17px * var(--k,1))}
[data-module="vc"] .t4 .w{font-size:calc(14px * var(--k,1))}
[data-module="vc"] .t5 .w{font-size:calc(13px * var(--k,1))}

/* ---- halo: bell falloff, every stop the same gold, no edge ---- */
[data-module="vc"] .val .halo,[data-module="vc"] .val .bloom{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;
  pointer-events:none;
  background:radial-gradient(ellipse closest-side at 50% 50%,
    rgba(232,176,22,1) 0%,rgba(232,176,22,.894) 15%,rgba(232,176,22,.638) 30%,
    rgba(232,176,22,.363) 45%,rgba(232,176,22,.165) 60%,rgba(232,176,22,.060) 75%,
    rgba(232,176,22,.017) 90%,rgba(232,176,22,0) 100%);
  will-change:transform,opacity}
[data-module="vc"] .t1 .halo{width:calc(100% + 150px * var(--k,1));height:calc(100% + 110px * var(--k,1));opacity:.52}
[data-module="vc"] .t2 .halo{width:calc(100% + 110px * var(--k,1));height:calc(100% + 84px * var(--k,1));opacity:.40}
[data-module="vc"] .t3 .halo{width:calc(100% + 90px * var(--k,1));height:calc(100% + 70px * var(--k,1));opacity:.28}
[data-module="vc"] .t4 .halo{width:calc(100% + 70px * var(--k,1));height:calc(100% + 56px * var(--k,1));opacity:.18}
[data-module="vc"] .t5 .halo{width:calc(100% + 54px * var(--k,1));height:calc(100% + 44px * var(--k,1));opacity:.07}

/* ---- bloom: the open word's full light, equal for every tier ---- */
[data-module="vc"] .val .bloom{z-index:2;width:calc(100% + 220px);height:calc(100% + 190px);
  opacity:0;transform:translate(-50%,-50%) scale(.55);
  transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1)}
[data-module="vc"] .val.open .bloom{opacity:.60;transform:translate(-50%,-50%) scale(1)}
[data-module="vc"] .val.open{z-index:20}
[data-module="vc"] .val.open .w{color:var(--on-primary)}
[data-module="vc"] .t1 .val.open .w{transform:scale(1.06)}
[data-module="vc"] .t2 .val.open .w{transform:scale(1.14)}
[data-module="vc"] .t3 .val.open .w{transform:scale(1.2)}
[data-module="vc"] .t4 .val.open .w{transform:scale(1.32)}
[data-module="vc"] .t5 .val.open .w{transform:scale(1.42)}

/* attending to one value dims the rest */
[data-module="vc"] .stage.focus .val:not(.open){opacity:.12}

/* ---- the description ---- */
[data-module="vc"] .val .desc{position:absolute;left:50%;top:100%;transform:translate(-50%,14px);
  width:230px;max-width:78vw;padding:6px 10px;
  font-family:var(--font-body);font-size:13px;line-height:1.5;font-weight:400;
  color:var(--text);text-align:center;text-wrap:balance;
  opacity:0;visibility:hidden;pointer-events:none;z-index:4;
  transition:opacity .5s ease,visibility 0s linear .5s}
[data-module="vc"] .val.open .desc{opacity:1;visibility:visible;
  transition:opacity .5s ease .18s,visibility 0s}
[data-module="vc"] .val.above .desc{top:auto;bottom:100%;transform:translate(-50%,-14px)}
/* VC-RESULT-V12:end */

/* VC-COMPARE-V14:start */
/* VC-COMPARE-V14 — Pathery - Values Card Sort V14. Full note in the session log, 15 Aug 2026. */
[data-module="vc"] .t1 .w{color:color-mix(in srgb,var(--text) 100%,var(--surface))}
[data-module="vc"] .t2 .w{color:color-mix(in srgb,var(--text) 92%,var(--surface))}
[data-module="vc"] .t3 .w{color:color-mix(in srgb,var(--text) 84%,var(--surface))}
[data-module="vc"] .t4 .w{color:color-mix(in srgb,var(--text) 74%,var(--surface))}
[data-module="vc"] .t5 .w{color:color-mix(in srgb,var(--text) 66%,var(--surface))}
@supports not (color:color-mix(in srgb,#000 50%,#fff)){
[data-module="vc"] .t2 .w{color:#3B3833}
[data-module="vc"] .t3 .w{color:#4C4A45}
[data-module="vc"] .t4 .w{color:#615F5B}
[data-module="vc"] .t5 .w{color:#72706C}
}

/* VC-DOOR-V14-2 — ---- the yellow card, two states ----. Full note in the session log, 15 Aug 2026. */
[data-module="vc"] .insight.invite{border-style:dashed;text-align:center}
/* VC-DOOR-V14-2 — VC-DOOR-V14-2: the door is retired -------------------------------. Full note in the session log, 15 Aug 2026. */
[data-module="vc"] .insight.door .chev{display:none}
[data-module="vc"] .insight.door{display:block;width:100%;font-family:inherit;
  font-size:.78rem;line-height:1.45;color:var(--text);text-align:left;cursor:default;
  -webkit-appearance:none;appearance:none}

/* ---- compare screen: the desktop twin of the result rules ---- */
@media (min-width:960px){
[data-module="vc"] main[data-screen="compare"]>*{width:100%;max-width:660px;margin-left:auto;margin-right:auto}
[data-module="vc"] main[data-screen="compare"]>.threads,
[data-module="vc"] main[data-screen="compare"]>.insight{max-width:520px}
}
/* VC-COMPARE-V14:end */

/* VC-STATE-V22:start */
/* VC-STATE-V22 — Pathery - Values Card Sort: the module's current visual state, in one. Full note in the session log, 15 Aug 2026. */

/* ---- welcome: the ACT control ---------------------------------- */
[data-module="vc"] .cbt{color:var(--primary-text);}

/* ---- the primary action ---------------------------------------- */
@media (hover:hover){
[data-module="vc"] .next:hover:not([disabled]){background:var(--primary-press)}
}
[data-module="vc"] .next:active:not([disabled]){background:var(--primary-press)}
/* the end-of-flow CTAs rest on --primary and darken on hover and active,
   like Continue. Superseded the V19 no-darken rule. Reasoning in the log. */ /* VC-CSS-V2:CTA */
[data-module="vc"] .next.closing{background:var(--primary);color:var(--on-primary)!important} /* VC-CSS-V1:CTA1 */
@media (hover:hover){
[data-module="vc"]  /* VC-CSS-V1:CTA2 */
}
[data-module="vc"]  /* VC-CSS-V1:CTA3 */

/* ---- step 1: the icon and the tick share one hue per tile ------ */
[data-module="vc"] .dgrid .dq.work .dqi,[data-module="vc"] .dgrid .dq.work .tick{color:var(--dom-work)}
[data-module="vc"] .dgrid .dq.play .dqi,[data-module="vc"] .dgrid .dq.play .tick{color:var(--primary)}
[data-module="vc"] .dgrid .dq.love .dqi,[data-module="vc"] .dgrid .dq.love .tick{color:var(--dom-love)}
[data-module="vc"] .dgrid .dq.health .dqi,[data-module="vc"] .dgrid .dq.health .tick{color:var(--dom-health)}

/* ---- the deck -------------------------------------------------- */
/* CHEVRON-AIM-V1 (vc): aim hoisted to core. */
/* a closed side: white on white, faint label, still tappable so the tap
   fires the refusal reveal (see VC-FIX-V16 in values.html) */
[data-module="vc"] .deckbtns button.off,
[data-module="vc"] .deckbtns .no.off,
[data-module="vc"] .deckbtns .yes.off{background:var(--surface)!important;
  border:1px solid var(--surface)!important;color:var(--faint)!important;
  box-shadow:none!important;font-weight:400!important;cursor:pointer!important}
@media (hover:hover){
[data-module="vc"] .deckbtns button.off:hover,
[data-module="vc"] .deckbtns .yes.off:hover{color:var(--muted)!important}
}

/* ---- pips: flat fills, no stroke, nothing fractional ----------- */
[data-module="vc"] .pips .side .dots{gap:5px}
[data-module="vc"] .pips .side .dots i,
[data-module="vc"] .pips .side:not(.r) .dots i,
[data-module="vc"] .pips .side.r .dots i{width:7px!important;height:7px!important;
  flex:none!important;border:0!important;border-radius:50%!important;box-shadow:none!important;
  background:var(--divider)!important}
[data-module="vc"] .pips .side:not(.r) .dots i.f{background:var(--faint)!important}
[data-module="vc"] .pips .side.r .dots i.f{background:var(--primary)!important}
/* the reveal leaves every pip exactly as it was */
[data-module="vc"] .pips .side.full:not(.r) .dots i,
[data-module="vc"] .pips .side.warn:not(.r) .dots i,
[data-module="vc"] .pips .side.full.r .dots i,
[data-module="vc"] .pips .side.warn.r .dots i{background:var(--divider)!important}
[data-module="vc"] .pips .side.full:not(.r) .dots i.f,
[data-module="vc"] .pips .side.warn:not(.r) .dots i.f{background:var(--faint)!important}
[data-module="vc"] .pips .side.full.r .dots i.f,
[data-module="vc"] .pips .side.warn.r .dots i.f{background:var(--primary)!important}

/* ---- the 1.6s refusal reveal ----------------------------------- */
[data-module="vc"] .pips .side .lk{opacity:0;color:var(--primary);
  transition:opacity .45s ease;will-change:transform,opacity}
[data-module="vc"] .pips .side.full .lk{opacity:0}
[data-module="vc"] .pips .side.warn .lk{opacity:1;
  animation:vcShake 620ms cubic-bezier(.36,.07,.19,.97) both}

/* ---- the piles ------------------------------------------------- */
[data-module="vc"] .pile .pilehead .pl,
[data-module="vc"] .pile .pilehead .pc,
[data-module="vc"] .pile .pilehead>span{color:var(--muted)!important;transition:color .45s ease}
[data-module="vc"] .pile.full .pilehead .pl,
[data-module="vc"] .pile.full .pilehead .pc,
[data-module="vc"] .pile.full .pilehead>span{color:var(--muted)!important}
[data-module="vc"] .pile.warn .pilehead .pl,
[data-module="vc"] .pile.warn .pilehead .pc,
[data-module="vc"] .pile.warn .pilehead>span{color:var(--primary-text)!important}
[data-module="vc"] .pile[data-side="left"] .pv{border:1px solid var(--border);
  background:transparent;color:var(--muted)}
[data-module="vc"] .pile[data-side="right"] .pv{border:1px solid var(--primary-soft);
  background:var(--primary-tint);color:var(--on-primary)}
[data-module="vc"] .pile .pv .rm{color:inherit}
[data-module="vc"] .pile .pv .rm:focus-visible{color:var(--primary-text)}

/* ---- the pyramid page ------------------------------------------ */
/* gold border, muted label: the nav CTA is the action, this is a utility */
[data-module="vc"] .dlbtn{color:var(--muted)}

/* VC-DESKTOP-V20. — ---- desktop pass -------------------------------------------------. Full note in the session log, 15 Aug 2026. */

@media (hover:hover){
[data-module="vc"] .cbt:hover{color:var(--primary-darker)}
}
[data-module="vc"] .cbt:active{color:var(--primary-darker)}

@media (min-width:521px){
[data-module="vc"] .pips{display:none}
[data-module="vc"] .pile .pilehead .pl{display:inline-flex;align-items:center;gap:6px}
[data-module="vc"] .pile .pilehead .pl::after{content:"";width:13px;height:13px;flex:none;
  background:var(--primary-text);opacity:0;transition:opacity .45s ease;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><rect x='4.5' y='10.5' width='15' height='10' rx='2.5'/><path d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><rect x='4.5' y='10.5' width='15' height='10' rx='2.5'/><path d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/></svg>") center/contain no-repeat}
[data-module="vc"] .pile.warn .pilehead .pl::after{opacity:1;
  animation:vcShake 620ms cubic-bezier(.36,.07,.19,.97) both}
}

@media (min-width:960px){
/* --- rounds: 28 / 6 / 22 --- */
[data-module="vc"] main[data-screen="r1"],[data-module="vc"] main[data-screen="r2"],
[data-module="vc"] main[data-screen="r3"],[data-module="vc"] main[data-screen="r4"]{
  padding-top:28px;padding-bottom:22px}
[data-module="vc"] main[data-screen="r1"] .kicker.dk,[data-module="vc"] main[data-screen="r2"] .kicker.dk,
[data-module="vc"] main[data-screen="r3"] .kicker.dk,[data-module="vc"] main[data-screen="r4"] .kicker.dk{
  margin-bottom:-14px}

/* --- the pyramid --- */
[data-module="vc"] main[data-screen="result"]{gap:4px;padding-bottom:22px}
[data-module="vc"] main[data-screen="result"]>.stage{margin:18px auto 0;padding:0;max-width:660px;width:100%}
[data-module="vc"] main[data-screen="result"]>.dlrow{margin-top:22px}
/* VC-HINT-V1, 27 Aug 2026. This screen sets the space between its rows to 4px,
   which is right for the heading and the date but leaves the tap hint looking as
   though it has fallen out of the pyramid. 18 is what the pyramid already sits
   below the date, and the save row sits 22 below this line, so the three
   distances read as one rhythm. The phone needs nothing added: that screen gives
   16 and the pyramid adds 4 of its own. */
[data-module="vc"] main[data-screen="result"]>.vhint{margin-top:18px}
[data-module="vc"] .stage .tier{padding:0;margin:0 auto;justify-content:space-between}
[data-module="vc"] .stage .tier+.tier{margin-top:16px}
[data-module="vc"] .stage .t1{width:auto;justify-content:center}
[data-module="vc"] .stage .t2{width:46%}
[data-module="vc"] .stage .t3{width:68%}
[data-module="vc"] .stage .t4{width:86%}
[data-module="vc"] .stage .t5{width:100%;flex-wrap:nowrap;gap:0}
/* ratio 1.31 from an 18px base */
[data-module="vc"] .t1 .w{font-size:56px}
[data-module="vc"] .t2 .w{font-size:43px}
[data-module="vc"] .t3 .w{font-size:33px}
[data-module="vc"] .t4 .w{font-size:24px}
[data-module="vc"] .t5 .w{font-size:18px}
[data-module="vc"] .t1 .halo{width:calc(100% + 289px);height:calc(100% + 212px)}
[data-module="vc"] .t2 .halo{width:calc(100% + 225px);height:calc(100% + 172px)}
[data-module="vc"] .t3 .halo{width:calc(100% + 174px);height:calc(100% + 136px)}
[data-module="vc"] .t4 .halo{width:calc(100% + 120px);height:calc(100% + 96px)}
[data-module="vc"] .t5 .halo{width:calc(100% + 75px);height:calc(100% + 61px)}

/* --- comparison --- */
[data-module="vc"] main[data-screen="compare"]>.title,
[data-module="vc"] main[data-screen="compare"]>.body{text-align:center;margin-left:auto;margin-right:auto}
}

/* VC-PARITY-V1, 26 Aug 2026. The four controls in this module that had no
   pointer state. An outlined button warms to --surface-2, as Back does in
   Behavioural Activation and Managing Worries; the gold sort button lifts to
   --primary-press, matching the main action beside it. Every rule sits behind a
   check for a pointer, so a phone sees none of it. A closed side keeps its
   forced flat colours on purpose: Full is meant to look shut. The four area
   tiles and the footer links are deliberately untouched. */
@media (hover:hover){
[data-module="vc"] .back:hover{background:var(--surface-2)}
[data-module="vc"] .deckbtns .no:hover{background:var(--surface-2)}
[data-module="vc"] .deckbtns .yes:hover{background:var(--primary-press);border-color:var(--primary-press)}
[data-module="vc"] .dlbtn:hover{background:var(--primary-tint)} /* VC-DL-TINT-V1 */
}

/* VC-CROSS-V1, 26 Aug 2026. The pile pill cross was 60 per cent and forced to the faint
   grey, 2.85 to 1. It is now full strength and inherits its pill’s own ink: dark on the gold
   pile, grey on the neutral one, 6.60 to 1. Its tap area is untouched — it was already the
   largest in the app, and the box used elsewhere would have shrunk it. Its two hover rules and
   its pressed rule are gone: a cross has no pointer state by decision. Keyboard focus is kept on
   purpose. The tray cross gains the same 24-pixel box as the other two modules. */
[data-module="vc"] .trayitem button{position:relative}
[data-module="vc"] .trayitem button::before{content:'';position:absolute;left:50%;top:50%;width:24px;height:24px;transform:translate(-50%,-50%)}