/* pathery-ca.css — Committed Actions (CA). Layout and paint for this module only.
   Tokens, the tool shell's behaviour and type, the welcome block and the hexaflex
   panel all come from pathery-core.css. Nothing here duplicates them.
   Every rule is scoped [data-module="ca"], so no rule can reach another module.
   Traps: never write a page-level .lab rule — the hexaflex switch contains
   span.lab. .idea and .pv mean other things in pathery-vc.css and are not used
   here. The rung label is dark ink on the goals screen and gold on the plan and
   review screens, so each is scoped to its own screen; one unscoped rule would
   turn all three the same colour. */

@media (prefers-reduced-motion:reduce){
[data-module="ca"] *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---- 1. Shell paint ------------------------------------------------------ */
body[data-module="ca"]{color:var(--text);background:var(--bg);display:flex;align-items:center;
  padding:var(--space-4);-webkit-tap-highlight-color:transparent;
  --divider:var(--border)} /* PRESS-GOLD-V1: the darker-gold shortcut is gone, and nothing reads it now; this module lifts instead. */
[data-module="ca"] .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="ca"]{padding:0;align-items:stretch}
[data-module="ca"] .shell{height:100dvh;min-height:100dvh;max-height:100dvh;border-radius:0;
  box-shadow:none;max-width:none;overflow:hidden}
[data-module="ca"] header{position:static;top:auto;z-index:20}
[data-module="ca"] main{flex:1 1 auto;overflow-y:auto}
}
[data-module="ca"] header{padding:var(--space-4) var(--space-5) var(--space-3);
  border-bottom:1px solid var(--divider);background:var(--surface-2)}
[data-module="ca"] .module{color:var(--muted);letter-spacing:.08em;background:none;border:0;
  padding:0;font-family:inherit;line-height:inherit;-webkit-appearance:none;appearance:none}
@media (hover:hover){[data-module="ca"] .module:hover{color:var(--text)}}
[data-module="ca"] .track{background:var(--surface-offset)}
[data-module="ca"] .fill{width:0;background:linear-gradient(90deg,var(--primary-soft),var(--primary))}
[data-module="ca"] main{flex:1;padding:var(--space-5);gap:var(--space-4);overflow-y:auto}
[data-module="ca"] main>*{flex-shrink:0}
[data-module="ca"] button{color:inherit}
[data-module="ca"] .kicker{color:var(--primary-text);margin-bottom:-8px}
[data-module="ca"] .body{color:var(--muted)}
[data-module="ca"] .counter{font-size:var(--text-xs);color:var(--faint);text-align:center}
[data-module="ca"] nav{padding:var(--space-4) var(--space-5);border-top:1px solid var(--divider);
  background:var(--surface-2)}
[data-module="ca"] nav button{font-family:inherit;font-weight:400;padding:0 var(--space-5);
  cursor:pointer;border:1px solid transparent;touch-action:manipulation}
[data-module="ca"] .back{background:var(--surface);border-color:var(--border);color:var(--muted);
  flex:0 0 96px}
[data-module="ca"] .back:disabled{display:none}
[data-module="ca"] .next{flex:1;background:var(--primary);color:var(--on-primary);font-weight:400;
  box-shadow:none}
[data-module="ca"] .next.gated{visibility:hidden;pointer-events:none}
@media (hover:hover){[data-module="ca"] .next:hover:not(.gated){background:var(--primary-press)}}
[data-module="ca"] .next:active:not(.gated){background:var(--primary-press)}
[data-module="ca"] footer{padding:var(--space-3) var(--space-5) var(--space-5);color:var(--faint);
  background:var(--surface-2)}
[data-module="ca"] .flinks a{color:var(--muted)}
@media (hover:hover){[data-module="ca"] .flinks a:hover{color:var(--text);border-bottom-color:var(--divider)}}
[data-module="ca"] .fine{color:var(--faint)}
[data-module="ca"] .homelink{color:inherit}
[data-module="ca"] .wlead{color:var(--muted);font-family:inherit;font-weight:400}
[data-module="ca"] .wrule{background:var(--divider)}
[data-module="ca"] .waction{color:var(--muted)}
[data-module="ca"] .metaline{color:var(--faint)}
[data-module="ca"] .metaline .mitem svg{color:var(--faint)}
/* CA-WELCOME-V1: the How it works item carries the gold, a chevron and the
   same finger-sized hit area the ACT badge had beside it. The chevron is 11px,
   not the 12px the plain meta icons take from pathery-core.css. */
/* CA-WELCOME-V2: the lead line is --muted now, and this item matches the ACT
   badge at weight 500, with its icon and chevron inheriting the colour so that
   hover and press change all three together. */
[data-module="ca"] .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="ca"] .metaline .mitem.mtap::before{content:'';position:absolute;inset:-11px -6px}
[data-module="ca"] .metaline .mitem.mtap svg{color:inherit}
[data-module="ca"] .metaline .mitem.mtap .chev{width:11px;height:11px;flex:none;
  transition:transform var(--ease)}
[data-module="ca"] .metaline .mitem.mtap[aria-expanded="true"] .chev{transform:rotate(180deg)}
@media (hover:hover){[data-module="ca"] .metaline .mitem.mtap:hover{color:var(--primary-darker)}}
[data-module="ca"] .metaline .mitem.mtap:active{color:var(--primary-darker)}
@media (prefers-reduced-motion:reduce){
[data-module="ca"] .metaline .mitem.mtap .chev{transition:none}
}

/* CA-GUIDE-V1, 1 Oct 2026. The five SMART letters. Yellow already supplies
   --primary-text, so the shared sheet's colours are left as they are. */
[data-module="ca"] .gd-pane .ltrrow{display:grid;grid-template-columns:34px 1fr;gap:10px;padding:10px 0;border-top:1px solid var(--divider)}
[data-module="ca"] .gd-pane .ltrrow .l{font-family:var(--font-display);font-size:var(--text-xl);line-height:1;color:var(--primary-text)}
[data-module="ca"] .gd-pane .ltrrow b{display:block;font-weight:500;color:var(--text);font-size:var(--text-sm)}

/* ---- 2. Screen 1, the domain ------------------------------------------- */
body[data-module="ca"]{
  --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="ca"] .dgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
[data-module="ca"] .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="ca"] .dqi{display:flex}
[data-module="ca"] .dqi svg{width:22px;height:22px;margin-bottom:6px;color:var(--ink)}
[data-module="ca"] .dqt{display:flex;align-items:center;gap:5px;font-size:var(--text-base);
  font-weight:500;line-height:1.2}
/* one slot for the hint and the status, its depth pinned so no tile can move */
[data-module="ca"] .dqh{font-size:var(--text-xs);color:var(--faint);line-height:1.35;
  min-height:2.7em}
[data-module="ca"] .dqh .st{color:var(--text);font-weight:500;display:inline-flex;
  align-items:center;gap:6px}
[data-module="ca"] .dqh .st::before{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--ink);flex:none}
[data-module="ca"] .dq.on{background:var(--tint);border-color:var(--c);box-shadow:var(--shadow-sm)}
@media (hover:hover){[data-module="ca"] .dq:hover{border-color:var(--soft);background:var(--tint)}}
[data-module="ca"] .dq.work{--c:var(--work-c);--ink:var(--dom-work);--soft:var(--work-soft);--tint:var(--work-tint)}
[data-module="ca"] .dq.play{--c:var(--play-c);--ink:var(--primary);--soft:var(--play-soft);--tint:var(--play-tint)}
[data-module="ca"] .dq.love{--c:var(--love-c);--ink:var(--dom-love);--soft:var(--love-soft);--tint:var(--love-tint)}
[data-module="ca"] .dq.health{--c:var(--hlth-c);--ink:var(--dom-health);--soft:var(--hlth-soft);--tint:var(--hlth-tint)}

/* ---- 3. Screen 2, the value -------------------------------------------- */
body[data-module="ca"]{
  --b1:#e8b016;--b2:#edc44e;--b3:#f2d67c;--b4:#f7e5a4;--b5:#E6E3DD;
  --b1w:#f8e6b0;--b2w:#fbeec9;--b3w:#fdf4dc;--b4w:#fef8e9;--b5w:#FBFAF8}
[data-module="ca"] .vstack{display:flex;flex-direction:column;gap:6px}
[data-module="ca"] .vrow{display:flex;flex-direction:column;justify-content:center;gap:1px;
  width:100%;min-height:64px;text-align:left;cursor:pointer;font-family:inherit;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:9px 13px;color:var(--text);transition:background var(--ease),border-color var(--ease)}
[data-module="ca"] .vname{font-size:var(--text-sm);font-weight:500;line-height:1.3;
  display:flex;align-items:center;gap:6px}
[data-module="ca"] .vname .vtick{width:13px;height:13px;flex:none;color:var(--primary-text)}
[data-module="ca"] .vdesc{font-size:11px;line-height:1.35;color:var(--faint)}
[data-module="ca"] .vrow[data-b="1"]{border-color:var(--b1)}
[data-module="ca"] .vrow[data-b="2"]{border-color:var(--b2)}
[data-module="ca"] .vrow[data-b="3"]{border-color:var(--b3)}
[data-module="ca"] .vrow[data-b="4"]{border-color:var(--b4)}
[data-module="ca"] .vrow[data-b="5"]{border-color:var(--b5)}
@media (hover:hover){
[data-module="ca"] .vrow[data-b="1"]:hover{background:var(--b1w)}
[data-module="ca"] .vrow[data-b="2"]:hover{background:var(--b2w)}
[data-module="ca"] .vrow[data-b="3"]:hover{background:var(--b3w)}
[data-module="ca"] .vrow[data-b="4"]:hover{background:var(--b4w)}
[data-module="ca"] .vrow[data-b="5"]:hover{background:var(--b5w)}
[data-module="ca"] .vrow:not([data-b]):hover{background:var(--primary-tint);
  border-color:var(--primary-soft)}
}
[data-module="ca"] .vrow[data-b="1"].on,[data-module="ca"] .vrow[data-b="1"]:active{background:var(--b1w)}
[data-module="ca"] .vrow[data-b="2"].on,[data-module="ca"] .vrow[data-b="2"]:active{background:var(--b2w)}
[data-module="ca"] .vrow[data-b="3"].on,[data-module="ca"] .vrow[data-b="3"]:active{background:var(--b3w)}
[data-module="ca"] .vrow[data-b="4"].on,[data-module="ca"] .vrow[data-b="4"]:active{background:var(--b4w)}
[data-module="ca"] .vrow[data-b="5"].on,[data-module="ca"] .vrow[data-b="5"]:active{background:var(--b5w)}
[data-module="ca"] .vrow:not([data-b]).on,[data-module="ca"] .vrow:not([data-b]):active{
  background:var(--primary-tint);border-color:var(--primary-soft)}
[data-module="ca"] .vsplit{height:1px;background:var(--divider);margin:6px 0}
[data-module="ca"] .vclink{color:var(--primary-text);font-weight:500;text-decoration:none;
  transition:color var(--ease)}
@media (hover:hover){[data-module="ca"] .vclink:hover{color:var(--primary-darker)}}
[data-module="ca"] .vcinvite{display:flex;align-items:center;gap:10px;min-height:64px;
  font-size:var(--text-xs);line-height:1.5;color:var(--primary-text);font-weight:500;
  border:1px dashed var(--primary-soft);border-radius:var(--radius-md);
  background:var(--primary-tint);padding:10px 14px;text-decoration:none;
  transition:background var(--ease),border-color var(--ease)}
[data-module="ca"] .vcinvite .chev{margin-left:auto;flex:none;width:13px;height:13px}
@media (hover:hover){[data-module="ca"] .vcinvite:hover{background:var(--b2w);
  border-color:var(--primary);border-style:solid}}

/* ---- 4. Screen 3, the four goals --------------------------------------- */
[data-module="ca"] .crumb{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.1em;
  font-weight:500;display:flex;gap:6px;align-items:baseline;margin-bottom:-8px}
[data-module="ca"] .crumb a{color:var(--primary-text);text-decoration:none;
  transition:color var(--ease)}
[data-module="ca"] .crumb .sep{color:var(--primary-text)}
@media (hover:hover){[data-module="ca"] .crumb a:hover{color:var(--primary-darker)}}
[data-module="ca"] .rungs{display:flex;flex-direction:column;gap:var(--space-4)}
[data-module="ca"] .rung{display:flex;flex-direction:column;gap:5px}
[data-module="ca"] .rlab{font-size:var(--text-sm);font-weight:500;line-height:1.2;display:flex;
  align-items:baseline;gap:6px}
/* dark ink here: these labels sit outside the boxes, and "Set SMART goal"
   should be the only thing pulling the eye */
[data-module="ca"] main[data-screen="goals"] .rlab{color:var(--text)}
[data-module="ca"] .rlab .need{font-size:11px;font-weight:400;color:var(--faint)}
[data-module="ca"] .gcard{width:100%;text-align:left;font-family:inherit;cursor:pointer;
  min-height:64px;display:flex;flex-direction:column;justify-content:center;gap:6px;
  background:var(--surface);border:1px dashed var(--border);border-radius:var(--radius-md);
  padding:10px 12px;color:var(--text);
  transition:background var(--ease),border-color var(--ease)}
[data-module="ca"] .gcard .ph{font-size:var(--text-sm);font-style:italic;color:var(--ghost,#a49d94);
  line-height:1.4}
[data-module="ca"] .gcard .said{font-size:var(--text-sm);line-height:1.4;color:var(--text)}
[data-module="ca"] .gcard .act{display:inline-flex;align-items:center;gap:5px;
  font-size:var(--text-xs);font-weight:500;color:var(--primary-text)}
[data-module="ca"] .gcard .act .chev,[data-module="ca"] .gcard .act .tick{width:11px;height:11px;
  flex:none}
@media (hover:hover){
[data-module="ca"] .gcard:hover{background:var(--primary-tint);border-color:var(--primary-soft);
  border-style:solid}
[data-module="ca"] .gcard:hover .act{color:var(--primary-darker)}
}
[data-module="ca"] .gcard:active{background:var(--primary-tint);border-color:var(--primary-soft);
  border-style:solid}
[data-module="ca"] .gcard.set{border-style:solid;border-color:var(--primary-soft)}
[data-module="ca"] .gbox{width:100%;font-family:inherit;font-size:var(--text-sm);line-height:1.4;
  color:var(--text);background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:10px 12px;min-height:64px;resize:none;
  transition:border-color var(--ease)}
[data-module="ca"] .gbox::placeholder{font-style:italic;color:var(--ghost,#a49d94)}
[data-module="ca"] .gbox:focus{outline:none;border-color:var(--primary)}

/* ---- 5. The SMART sheet ------------------------------------------------ */
[data-module="ca"] .sheetwrap[hidden]{display:none}
[data-module="ca"] .sheetwrap{position:fixed;inset:0;z-index:70;display:flex;
  align-items:flex-end;justify-content:center;background:var(--scrim)}
[data-module="ca"] .sheet{position:relative;width:100%;height:100dvh;background:var(--surface);
  display:flex;flex-direction:column;overflow:hidden}
[data-module="ca"] .sheethead{padding:var(--space-5) var(--space-5) var(--space-3);flex:none}
/* CA-TIDY-R7-V1: the sheet kicker rule is gone, with the line it styled. */
[data-module="ca"] .sheettitle{font-family:var(--font-display);font-size:var(--text-lg);
  font-weight:400;line-height:1.25;font-variant-ligatures:common-ligatures contextual}
[data-module="ca"] .sheetbody{padding:0 var(--space-5) var(--space-5);display:flex;
  flex-direction:column;gap:var(--space-4);overflow-y:auto;flex:1 1 auto;min-height:0}
[data-module="ca"] .sheetbody>*{flex-shrink:0}
[data-module="ca"] .fld{display:flex;flex-direction:column;gap:6px}
[data-module="ca"] .fhd{display:flex;align-items:baseline;gap:8px}
[data-module="ca"] .ltr{font-family:var(--font-display);font-size:1.35rem;line-height:1;
  color:var(--primary);width:15px;flex:none}
[data-module="ca"] .fname{font-size:var(--text-sm);font-weight:500}
[data-module="ca"] .fbody{padding-left:23px;display:flex;flex-direction:column;gap:var(--space-2)}
[data-module="ca"] .stem{font-size:var(--text-xs);line-height:1.45;color:var(--faint)}
[data-module="ca"] .stem .val{color:var(--primary-text);font-weight:500}
/* CA-INTRO-R2-V1: the intro lines name the value and the domain in gold at weight 500,
   and the needed note beside Specific matches the one on the goals screen, its
   2px pulled back because .fhd sets an 8px gap where .rlab sets 6px. */
[data-module="ca"] .body .val{color:var(--primary-text);font-weight:500}
[data-module="ca"] .fhd .need{font-size:11px;font-weight:400;color:var(--faint);margin-left:-2px}
[data-module="ca"] .sheetbody input[type=text],[data-module="ca"] .sheetbody textarea{width:100%;
  font-family:inherit;font-size:var(--text-sm);color:var(--text);background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;resize:none}
[data-module="ca"] .sheetbody input:focus,[data-module="ca"] .sheetbody textarea:focus,
[data-module="ca"] .sheetbody select:focus{outline:none;box-shadow:none;border-color:var(--primary)}
[data-module="ca"] .sheetbody input::placeholder,
[data-module="ca"] .sheetbody textarea::placeholder{color:var(--faint)}
[data-module="ca"] .dpills{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);
  width:100%}
[data-module="ca"] .dpill{display:inline-flex;align-items:center;justify-content:center;
  min-height:32px;padding:7px 8px;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:center;color:var(--text);white-space:nowrap;
  transition:background var(--ease),border-color var(--ease)}
[data-module="ca"] .dpill.on{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
@media (hover:hover){[data-module="ca"] .dpill:hover{background:var(--primary-tint);
  border-color:var(--primary-soft)}}
[data-module="ca"] .aside{font-size:var(--text-xs);font-style:italic;color:var(--faint);
  line-height:1.55}
[data-module="ca"] .aside[hidden]{display:none}
[data-module="ca"] .rate{display:flex;flex-direction:column;gap:2px;margin-top:var(--space-1)}
[data-module="ca"] .sliderrow{display:flex;align-items:center;gap:var(--space-2)}
[data-module="ca"] .slider{-webkit-appearance:none;appearance:none;flex:1;height:32px;margin:0;
  background:transparent;display:block;touch-action:pan-y;outline:none;border-radius:0}
[data-module="ca"] .slider::-webkit-slider-runnable-track{height:6px;border-radius:3px;
  background:linear-gradient(to right,var(--primary) var(--pct,0%),var(--surface-offset) var(--pct,0%))}
[data-module="ca"] .slider::-moz-range-track{height:6px;border-radius:3px;
  background:var(--surface-offset)}
[data-module="ca"] .slider::-moz-range-progress{height:6px;border-radius:3px;
  background:var(--primary)}
[data-module="ca"] .slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:26px;height:26px;margin-top:-10px;border-radius:50%;background:var(--surface);
  border:2px solid var(--primary);box-shadow:var(--shadow-md);cursor:grab}
[data-module="ca"] .slider::-moz-range-thumb{width:26px;height:26px;border-radius:50%;
  background:var(--surface);border:2px solid var(--primary);box-shadow:var(--shadow-md);cursor:grab}
[data-module="ca"] .slval{font-size:var(--text-xs);color:var(--primary-text);font-weight:500;
  min-width:18px;text-align:right;font-variant-numeric:tabular-nums}
[data-module="ca"] .tgrid{display:grid;grid-template-columns:1fr 1fr auto 1fr;gap:var(--space-2);
  align-items:center;width:100%}
[data-module="ca"] .timesel{width:100%;font-family:inherit;font-size:var(--text-xs);padding:9px 4px;
  min-height:32px;border-radius:var(--radius-full);border:1px solid var(--border);
  background:var(--surface);color:var(--text);cursor:pointer;appearance:none;
  -webkit-appearance:none;text-align:center;text-align-last:center}
[data-module="ca"] .tcolon{font-size:var(--text-sm);color:var(--muted);text-align:center;width:6px}
[data-module="ca"] .tgrid .place{grid-column:1 / -1;width:100%}
/* its own band, so no gap can open above the buttons */
[data-module="ca"] .cardline{flex:none;padding:12px var(--space-5) 13px;background:var(--surface-2);
  border-top:1px solid var(--divider)}
[data-module="ca"] .clab{font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);font-weight:500}
[data-module="ca"] .cline{font-size:var(--text-sm);line-height:1.45;margin-top:3px}
[data-module="ca"] .cline.empty{color:var(--faint)}
[data-module="ca"] .sheetbtns{flex:none;padding:var(--space-4) var(--space-5);
  border-top:1px solid var(--divider);background:var(--surface-2);display:flex;gap:var(--space-3)}
[data-module="ca"] .sheetbtns button{min-height:48px;border-radius:var(--radius-full);
  font-size:var(--text-sm);font-family:inherit;padding:0 var(--space-5);
  border:1px solid transparent;cursor:pointer}
[data-module="ca"] .sheetbtns .cancel{background:var(--surface);border-color:var(--border);
  color:var(--muted);flex:0 0 96px}
[data-module="ca"] .sheetbtns .done{flex:1;background:var(--primary);color:var(--on-primary);
  font-weight:400}
[data-module="ca"] .sheetbtns .done.gated{visibility:hidden;pointer-events:none}

/* ---- 6. Screen 4, the plan -------------------------------------------- */
[data-module="ca"] .plan{display:flex;flex-direction:column;gap:var(--space-2)}
[data-module="ca"] .prung{border:1px solid var(--border);border-radius:var(--radius-md);
  background:var(--surface);padding:12px 14px;display:flex;flex-direction:column;gap:6px}
[data-module="ca"] .prung.first{border-color:var(--primary-soft);background:var(--primary-tint)}
/* gold here: the label sits inside the card */
[data-module="ca"] main[data-screen="plan"] .rlab{color:var(--primary-text);display:block}
[data-module="ca"] .rsaid{font-size:var(--text-sm);line-height:1.45}
[data-module="ca"] .rnone{font-size:var(--text-sm);line-height:1.45;font-style:italic;
  color:var(--ghost,#a49d94)}
[data-module="ca"] .answers{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;
  margin-top:2px;padding-top:8px;border-top:1px solid var(--primary-soft)}
[data-module="ca"] .adt{font-size:var(--text-xs);color:var(--faint);white-space:nowrap}
[data-module="ca"] .add{font-size:var(--text-xs);color:var(--text);line-height:1.5;
  font-variant-numeric:tabular-nums}
[data-module="ca"] .dlrow{display:flex;margin-top:var(--space-2)}
[data-module="ca"] .dlbtn{color:var(--muted)} /* PARITY-DL-ONE-V1: shape and symbol sizing moved to pathery-core.css */

/* ---- 7. Screen 5, review ---------------------------------------------- */
[data-module="ca"] .revlist{display:flex;flex-direction:column;gap:var(--space-2)}
/* the edge never changes when a card opens; the chevron and the body say it */
[data-module="ca"] .revcard{border:1px solid var(--border);border-radius:var(--radius-md);
  background:var(--surface-2);box-shadow:var(--shadow-sm);overflow:hidden}
[data-module="ca"] .revhead{width:100%;display:flex;align-items:flex-start;gap:var(--space-2);
  padding:12px 14px;background:none;border:0;font-family:inherit;text-align:left;cursor:pointer}
[data-module="ca"] .revcol{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
[data-module="ca"] main[data-screen="review"] .rlab{color:var(--primary-text)}
[data-module="ca"] .rtick{width:12px;height:12px;color:var(--primary-text);flex:none}
[data-module="ca"] .revsaid{font-size:var(--text-xs);color:var(--muted);line-height:1.45}
[data-module="ca"] .revhead .chev{width:11px;height:11px;flex:none;color:var(--faint);
  margin-top:4px;transition:transform var(--ease)}
[data-module="ca"] .revcard.open .revhead .chev{transform:rotate(180deg)}
[data-module="ca"] .revbody{padding:0 14px 14px;display:flex;flex-direction:column;
  gap:var(--space-4)}
[data-module="ca"] .revcard:not(.open) .revbody{display:none}
[data-module="ca"] .grp{display:flex;flex-direction:column;gap:var(--space-2)}
[data-module="ca"] .qlab{font-size:var(--text-sm);font-weight:500}
[data-module="ca"] .seg{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2)}
[data-module="ca"] .seg.two{grid-template-columns:repeat(2,1fr)}
/* 6px sides and no wrapping, so every button is one line and one height */
[data-module="ca"] .seg .opt{padding:7px 6px;white-space:nowrap}
[data-module="ca"] .opts{display:flex;flex-wrap:wrap;gap:6px}
[data-module="ca"] .opt{display:inline-flex;align-items:center;justify-content:center;
  min-height:32px;padding:7px 10px;border-radius:var(--radius-full);border:1px solid var(--primary-soft);
  background:var(--surface);font-size:var(--text-xs);font-family:inherit;color:var(--text);
  cursor:pointer;text-align:center;transition:background var(--ease),border-color var(--ease)}
[data-module="ca"] .opt.on{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
@media (hover:hover){[data-module="ca"] .opt:hover{background:var(--primary-tint);
  border-color:var(--primary-soft)}}
[data-module="ca"] .opt.addopt{border-style:dashed;color:var(--muted);min-width:34px}
/* CA-REV-R4-V1: the cross on a reflection you typed, taken from BA-CROSS-V1. Hidden
   until the pill is chosen, inheriting the pill's own colour at full strength,
   with a 24-pixel invisible target so nothing visible grows. No pointer state. */
[data-module="ca"] .opt{gap:var(--space-2)}
[data-module="ca"] .opt .rm{margin-left:2px;background:none;border:0;color:inherit;opacity:1;
  cursor:pointer;font-size:var(--text-sm);line-height:1;padding:0;display:none;position:relative}
[data-module="ca"] .opt[aria-pressed="true"] .rm{display:inline}
[data-module="ca"] .opt .rm::before{content:'';position:absolute;left:50%;top:50%;width:24px;height:24px;transform:translate(-50%,-50%)}
[data-module="ca"] .tip{font-size:var(--text-xs);font-style:italic;color:var(--faint);
  line-height:1.55}
[data-module="ca"] .addrow{display:flex;gap:var(--space-2)}
[data-module="ca"] .addrow[hidden]{display:none}
[data-module="ca"] .addrow input{flex:1;font-family:inherit;font-size:var(--text-xs);
  color:var(--text);background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:8px 10px}
[data-module="ca"] .addrow input:focus{outline:none;border-color:var(--primary)}
[data-module="ca"] .addrow button{font-family:inherit;font-size:var(--text-xs);padding:7px 12px;
  border-radius:var(--radius-full);border:1px solid var(--primary-soft);
  background:var(--primary-tint);color:var(--primary-text);font-weight:500;cursor:pointer}

/* ---- 8. From 521px: the desktop shell and its columns ------------------ */
@media (min-width:521px){
body[data-module="ca"]{display:block;padding:0;align-items:stretch;background:var(--surface-2)}
[data-module="ca"] .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="ca"] 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="ca"] .steplabel{margin-left:auto;color:var(--faint)}
[data-module="ca"] main{gap:var(--space-5);background:var(--surface);
  padding:38px max(40px,calc((100% - 1000px) / 2)) 34px;overflow:visible}
[data-module="ca"] nav{background:transparent;border-top:1px solid var(--divider);
  padding:var(--space-4) max(40px,calc((100% - 1000px) / 2))}
[data-module="ca"] .next{flex:0 0 auto;min-width:210px}
[data-module="ca"] footer{background:transparent;
  padding:var(--space-3) max(40px,calc((100% - 1000px) / 2)) var(--space-5)}
[data-module="ca"] .dlrow{justify-content:center}
[data-module="ca"] .dlbtn{flex:0 0 auto;min-width:210px}
/* one centred column per screen, the heading block centred inside it */
[data-module="ca"] main[data-screen="domain"]>*,[data-module="ca"] main[data-screen="value"]>*,
[data-module="ca"] main[data-screen="goals"]>*,[data-module="ca"] main[data-screen="plan"]>*,
[data-module="ca"] main[data-screen="review"]>*{width:100%;max-width:660px;margin-left:auto;
  margin-right:auto}
[data-module="ca"] main[data-screen="domain"]>.title,
[data-module="ca"] main[data-screen="domain"]>.body,
[data-module="ca"] main[data-screen="value"]>.kicker,
[data-module="ca"] main[data-screen="value"]>.title,
[data-module="ca"] main[data-screen="value"]>.body,
[data-module="ca"] main[data-screen="value"]>.counter,
[data-module="ca"] main[data-screen="goals"]>.title,
[data-module="ca"] main[data-screen="goals"]>.body,
[data-module="ca"] main[data-screen="plan"]>.title,
[data-module="ca"] main[data-screen="plan"]>.body,
[data-module="ca"] main[data-screen="review"]>.title,
[data-module="ca"] main[data-screen="review"]>.body{text-align:center}
[data-module="ca"] main[data-screen="goals"]>.crumb,
[data-module="ca"] main[data-screen="plan"]>.crumb,
[data-module="ca"] main[data-screen="review"]>.crumb{justify-content:center}
/* screen 2 sorted: stepped bands, contents left-aligned so a tick can sit
   after the name */
[data-module="ca"] .vsteps{display:flex;flex-direction:column;align-items:center;gap:10px}
[data-module="ca"] .vband{display:flex;justify-content:center;gap:8px}
[data-module="ca"] .vband .vrow{width:190px;min-height:76px}
[data-module="ca"] .vsplit.short{width:64px;margin:8px auto}
[data-module="ca"] .vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
[data-module="ca"] .vgrid .vrow{min-height:76px}
[data-module="ca"] .vcinvite{max-width:640px;margin:0 auto}
/* the sheet becomes a centred dialog, 32px clear top and bottom */
[data-module="ca"] .sheetwrap{align-items:center}
[data-module="ca"] .sheet{max-width:520px;height:auto;max-height:calc(100dvh - 64px);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
[data-module="ca"] .sheetbtns{justify-content:flex-end}
[data-module="ca"] .sheetbtns .cancel{margin-right:auto}
[data-module="ca"] .sheetbtns .done{flex:0 0 auto;min-width:210px}
}

/* ---- 9. From 960px: the open review card runs two columns -------------- */
@media (min-width:960px){
[data-module="ca"] .revbody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:28px;row-gap:var(--space-4);align-items:start}
[data-module="ca"] .revbody .grp.wide{grid-column:1 / -1}
}

/* PARITY-DL-V2: the plan-screen keep line rule is gone, with the line it styled. */

/* CA-PARITY-V1, 26 Aug 2026. The pill ladder, as settled: soft edge at rest, palest
   tint under the pointer, solid module colour when chosen, with the segments and the loose pills
   moving together because they are one element here. A chosen pill holds steady under the
   pointer. The dashed Add pill opens a row rather than choosing anything, so it keeps its quiet
   look even when it carries the chosen state. Done now darkens like Continue and both sit at
   weight 400. Back, Cancel and the time selects warm to the quiet neutral fill. A chosen domain
   tile keeps its own coloured edge: the chosen rule and the hover rule carry equal weight, so
   the hover was overriding the colour. A review card header shifts only its chevron, because
   that card keeps its edge when it opens. The value rows keep their band colours.
   CA-FIX-V1: a chosen pill darkens under the pointer as it does in Managing Worries, the save
   button takes the tint as in Values Card Sort, and the Add pill deepens its fill rather than
   its edge, because it already rests on the tint. */
@media (hover:hover){
[data-module="ca"] .back:hover{background:var(--surface-2)}
[data-module="ca"] .sheetbtns .cancel:hover{background:var(--surface-2)}
[data-module="ca"] .sheetbtns .done:hover:not(.gated){background:var(--primary-press);border-color:var(--primary-press)}
[data-module="ca"] .timesel:hover{background:var(--surface-2)}
[data-module="ca"] .dq.on:hover{border-color:var(--c)}
[data-module="ca"] .addrow button:hover{background:var(--primary-soft)}
[data-module="ca"] .dlbtn:hover{background:var(--primary-tint)}
[data-module="ca"] .revhead:hover .chev{color:var(--muted)}
[data-module="ca"] .dpill.on:hover,[data-module="ca"] .opt.on:hover{background:var(--primary-press);border-color:var(--primary-press)}
[data-module="ca"] .opt.addopt.on:hover{background:var(--primary-tint);border-color:var(--primary-soft);color:var(--muted)}
}
[data-module="ca"] .sheetbtns .done:active:not(.gated){background:var(--primary-press)}
[data-module="ca"] .opt.addopt.on{background:var(--surface);border-color:var(--primary-soft);color:var(--muted)}

/* CA-HEADER-R6-V1, 28 Aug 2026. The header block now sits where it sits in the
   Values Compass sorting screens: the kicker and the crumb hug the heading at 8
   on a phone and 14 from 960 up, and the five working screens take 28 above and
   22 below at that width, as those screens do. The welcome screen keeps its own
   layout and is untouched. Approved from ca-header-mockup-v3, version C. */
@media (min-width:960px){
[data-module="ca"] .kicker{margin-bottom:-14px}
[data-module="ca"] .crumb{margin-bottom:-14px}
[data-module="ca"] main[data-screen="domain"],[data-module="ca"] main[data-screen="value"],
[data-module="ca"] main[data-screen="goals"],[data-module="ca"] main[data-screen="plan"],
[data-module="ca"] main[data-screen="review"]{padding-top:28px;padding-bottom:22px}
}

/* ===== CA-HOMEWORK-V1: append to the end of pathery-ca.css ===== */
/* CA is yellow like Values, so it takes Values' homework colours (pathery-vc.css) */
[data-module="ca"] .rh-kicker{color:var(--primary-text)}
[data-module="ca"] .rh-btn:not(.rh-send),[data-module="ca"] .rh-btn.rh-on{color:var(--muted)}
body[data-module="ca"] .rh-signin .rh-in{color:var(--primary-dark)}
@media (hover:hover){body[data-module="ca"] .rh-signin .rh-in:hover{color:var(--primary-darker)}}
/* plan names in gold; the goal headings inside the cards in plain ink, so they do not compete */
[data-module="ca"] main[data-screen="send"] .rlab,[data-module="ca"] main[data-screen="read"] .rlab{color:var(--primary-text);display:block}
[data-module="ca"] main[data-screen="send"] .prung .rlab,[data-module="ca"] main[data-screen="read"] .prung .rlab{color:var(--text)}
[data-module="ca"] main[data-screen="send"] .revcol>.rlab,[data-module="ca"] main[data-screen="read"] .revcol>.rlab{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
[data-module="ca"] .rstate{font-size:var(--text-xs);font-weight:500;color:var(--primary-text);white-space:nowrap}
[data-module="ca"] .rstate.n{color:var(--muted)}
[data-module="ca"] .rmore{color:var(--faint)}
[data-module="ca"] .revrow{display:flex;align-items:flex-start}
[data-module="ca"] .sbody{padding:0 14px 14px;display:flex;flex-direction:column;gap:var(--space-2)}
[data-module="ca"] .revcard:not(.open) .sbody{display:none}
[data-module="ca"] .answers.rv{margin-top:6px;border-top:1px dashed var(--border)}
[data-module="ca"] .rpick{flex:none;width:26px;height:26px;margin:12px 0 0 14px;border-radius:8px;border:1.5px solid var(--border);background:var(--surface);display:grid;place-items:center;cursor:pointer;color:transparent}
[data-module="ca"] .rpick svg{width:14px;height:14px}
[data-module="ca"] .rpick.on{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
[data-module="ca"] .rpick.lock{background:var(--surface-offset);color:var(--faint)}
[data-module="ca"] .revcard.off{background:var(--surface);box-shadow:none}
[data-module="ca"] .fit{display:flex;flex-direction:column;gap:4px;font-size:var(--text-xs);color:var(--muted)}
[data-module="ca"] .fit .bar{height:8px;border-radius:4px;background:var(--surface-offset);overflow:hidden}
[data-module="ca"] .fit .bar i{display:block;height:100%;background:var(--primary);transition:width var(--ease)}
[data-module="ca"] .fit.full .bar i{background:var(--primary-dark)}
[data-module="ca"] .rowmsg{display:flex;gap:8px;align-items:flex-start;margin:0 14px 12px;padding:8px 10px;border-radius:var(--radius-sm);background:#fdf1ec;border:1px solid #e7b9a6;color:#b5452a;font-size:var(--text-xs);line-height:1.45}
[data-module="ca"] .rowmsg svg{width:14px;height:14px;flex:none;margin-top:1px}
@keyframes rshake{0%,100%{transform:none}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
[data-module="ca"] .revcard.shake{animation:rshake .4s}
@media (prefers-reduced-motion:reduce){[data-module="ca"] .revcard.shake{animation:none}}
@media (min-width:521px){
[data-module="ca"] main[data-screen="send"]>*,[data-module="ca"] main[data-screen="read"]>*{width:100%;max-width:660px;margin-left:auto;margin-right:auto}
[data-module="ca"] nav .rh-btn{flex:0 0 auto;min-width:210px}
[data-module="ca"] nav{justify-content:flex-end}
}