#hpc-protocol{
  /* ---- core tokens ---- */
  --bg:#050810; --s1:#0D1420; --s2:#111D30; --s3:#1A2840;
  --acc:#73B191; --acc-l:#A8CDB8; --acc-d:#588773; --acc-rgb:115,177,145; --maize:#FFCB05;
  --t1:#F0F0F0; --t2:#BDC9D8; --t3:#9DB0C5;
  /* FIX 4: --warn reassigned to neutral out-of-palette orange; copper is Mastery only */
  --warn:#E07B5A;
  --ln:rgba(240,240,240,.08); --ln-s:rgba(240,240,240,.16); --ln-h:rgba(240,240,240,.30);
  /* ---- 10-pillar HPC brand tokens (canonical hexes) ---- */
  --c-bio:#73B191; --c-flow:#60A5FA; --c-decisions:#CCC06F;
  --c-habits:#96A67A; --c-learning:#988CB5; --c-identity:#B88892;
  --c-leadership:#8898A0; --c-arena:#C47358; --c-nutrition:#A89F68;
  --c-connection:#C99BB4;
  /* phase accent aliases: Foundation=bio, Optimisation=flow, Mastery=arena */
  --p-two:var(--c-flow); --p-arch:var(--c-arena);
  /* ---- button system tokens ---- */
  --btn-ghost-border:rgba(240,240,240,.2);
  --btn-ghost-border-h:rgba(240,240,240,.36);
  /* ---- phase washes ---- */
  --wash-f:rgba(var(--acc-rgb),.08);
  --wash-o:rgba(96,165,250,.07);
  --wash-m:rgba(196,115,88,.07);
  /* ---- type stacks ---- */
  --ds:"Cormorant Garamond",Georgia,serif;
  --bd:"DM Sans",system-ui,sans-serif;
  --mn:"JetBrains Mono","Courier New",monospace;
}
#hpc-protocol *{box-sizing:border-box}
#hpc-protocol body{margin:0}
#hpc-protocol{
  color:var(--t1); font-family:var(--bd); -webkit-font-smoothing:antialiased;
  /* FIX 9: scope grain + stacking context; position:fixed on .grain escapes without these */
  position:relative; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(120% 55% at 82% -10%, rgba(var(--acc-rgb),.13), transparent 55%),
    radial-gradient(90% 46% at 10% -4%, rgba(96,165,250,.08), transparent 50%),
    radial-gradient(60% 45% at 88% 102%, rgba(196,115,88,.08), transparent 52%),
    radial-gradient(150% 130% at 50% 130%, #070a14, #05060c 55%, #04050a 100%);
  min-height:100vh; padding:40px 24px 90px}
#hpc-protocol .wrap{max-width:960px; margin:0 auto}
#hpc-protocol [hidden]{display:none!important}
/* FIX 9: was position:fixed; now position:absolute, scoped inside #hpc-protocol */
#hpc-protocol .grain{position:absolute; inset:0; pointer-events:none; opacity:.04; z-index:9; mix-blend-mode:overlay}
#hpc-protocol button{font:inherit; cursor:pointer; background:none; border:none; color:inherit}
#hpc-protocol :focus-visible{outline:2px solid var(--maize); outline-offset:2px; border-radius:4px}

/* ---- preview strip (prototype only) ---- */
#hpc-protocol .demo{display:flex; gap:8px; align-items:center; margin-bottom:22px; font-family:var(--mn); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--t3)}
#hpc-protocol .demo button{border:1px solid var(--ln-s); border-radius:8px; padding:7px 12px; color:var(--t3); font-size:11px; letter-spacing:.1em; text-transform:uppercase; transition:border-color .16s,color .16s,background .16s}
#hpc-protocol .demo button:not(.on):hover{border-color:var(--ln-h); color:var(--t2); background:rgba(240,240,240,.04)}
#hpc-protocol .demo button.on{color:#071018; background:var(--acc-l); border-color:transparent; font-weight:600}

/* ---- masthead ---- */
#hpc-protocol .kick{font-family:var(--mn); font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--t3); display:flex; gap:14px; align-items:center}
#hpc-protocol .kick .dot{width:5px; height:5px; border-radius:50%; background:var(--acc); box-shadow:0 0 12px var(--acc)}
#hpc-protocol .title{font-family:var(--ds); font-weight:500; font-size:clamp(42px,6vw,70px); line-height:1.0; letter-spacing:-.014em; margin:16px 0 0; color:#F6F4EE}
#hpc-protocol .title em{font-style:italic; color:var(--acc-l)}
#hpc-protocol .sub{font-family:var(--ds); font-style:italic; font-size:clamp(18px,2.5vw,22px); color:var(--t2); margin:12px 0 0; max-width:44ch; line-height:1.5}

/* ---- tab nav ---- */
#hpc-protocol .pnav{display:flex; gap:4px; padding:5px; border:1px solid var(--ln-s); border-radius:13px; background:rgba(13,20,32,.6); backdrop-filter:blur(6px); width:max-content; margin:28px 0 34px}
#hpc-protocol .pnav button{font-family:var(--mn); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--t3); padding:11px 20px; border-radius:9px; transition:color .18s,background .18s}
#hpc-protocol .pnav button:not(.on):hover{color:var(--t2); background:rgba(240,240,240,.05)}
#hpc-protocol .pnav button.on{color:#071018; background:linear-gradient(180deg,var(--acc-l),var(--acc)); font-weight:600; box-shadow:0 2px 14px rgba(var(--acc-rgb),.28)}

#hpc-protocol .view{animation:fade .4s ease}
@keyframes fade{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}

/* ---- today header ---- */
#hpc-protocol .thead{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap}
#hpc-protocol .thead .greet{font-family:var(--ds); font-size:34px; color:#F6F4EE; line-height:1.05}
#hpc-protocol .thead .greet small{display:block; font-family:var(--mn); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--t3); margin-bottom:10px}
#hpc-protocol .lastnight{display:flex; align-items:center; gap:14px; border:1px solid var(--ln-s); border-radius:14px; padding:14px 18px; background:rgba(var(--acc-rgb),.06)}
#hpc-protocol .lastnight .m{width:28px;height:28px;border-radius:50%;border:2px solid var(--acc);display:grid;place-items:center}
#hpc-protocol .lastnight .m i{width:11px;height:11px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px var(--acc)}
#hpc-protocol .lastnight .tx{font-size:14px} #hpc-protocol .lastnight .tx b{color:var(--acc-l)}
#hpc-protocol .lastnight .tx span{font-family:var(--mn); font-size:12px; color:var(--t3); display:block; margin-top:3px}

/* ---- FIX 5: Quick-log strip above scoreboard ---- */
#hpc-protocol .quick-log{border:1px solid var(--ln-s); border-radius:14px; padding:20px 24px; margin:20px 0 0;
  background:radial-gradient(130% 90% at 0% 0%, rgba(var(--acc-rgb),.08), transparent 55%), rgba(13,20,32,.55)}
#hpc-protocol .ql-header{font-family:var(--ds); font-style:italic; font-size:18px; color:var(--t2); margin-bottom:14px}
#hpc-protocol .ql-scale{display:flex; gap:8px}
#hpc-protocol .ql-chips-label{font-family:var(--mn); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--t3); margin:16px 0 8px}
#hpc-protocol .ql-chips{display:flex; flex-wrap:wrap; gap:8px}
#hpc-protocol .ql-seg{flex:1; padding:10px 4px; border:1px solid var(--ln-s); border-radius:10px; text-align:center;
  background:rgba(13,20,32,.5); font-family:var(--mn); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--t3); transition:border-color .18s,background .18s,color .18s,transform .15s cubic-bezier(.22,.1,.36,1)}
#hpc-protocol .ql-seg[aria-checked="true"]{border-color:var(--acc); color:var(--acc-l); background:rgba(var(--acc-rgb),.1); transform:translateY(-2px)}
#hpc-protocol .ql-seg:hover:not([aria-checked="true"]){border-color:var(--ln-h); color:var(--t2)}
#hpc-protocol .ql-actions{display:flex; justify-content:space-between; align-items:center; margin-top:14px; gap:12px}
#hpc-protocol .ql-save-btn{font-family:var(--mn); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  padding:11px 22px; border-radius:9px; font-weight:600; background:var(--acc); color:#06060A; border:none;
  transition:background .18s,box-shadow .18s,transform .15s cubic-bezier(.22,.1,.36,1);
  box-shadow:0 4px 18px rgba(var(--acc-rgb),.22)}
#hpc-protocol .ql-save-btn:hover:not(:disabled){background:var(--acc-l); transform:translateY(-1px); box-shadow:0 6px 28px rgba(var(--acc-rgb),.36)}
#hpc-protocol .ql-save-btn:disabled{opacity:.35; cursor:not-allowed; box-shadow:none}
#hpc-protocol .ql-hint{font-family:var(--mn); font-size:11px; color:var(--t3)}
#hpc-protocol .ql-done{display:flex; align-items:center; gap:12px}
#hpc-protocol .ql-done-dot{width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px var(--acc);flex:none}
#hpc-protocol .ql-done-text{font-family:var(--ds); font-style:italic; font-size:17px; color:var(--acc-l)}
#hpc-protocol .ql-reset-btn{font-family:var(--mn); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--t3); margin-left:auto; transition:color .16s}
#hpc-protocol .ql-reset-btn:hover{color:var(--t2)}

/* ---- scoreboard ---- */
/* Polish 2026-07-09 (arena harvest): Day-1 brief — the day title + directive
   surfaced above the scoreboard so a brand-new user's first read is the plan,
   not a zero-filled dashboard. Day 1 only. */
#hpc-protocol .day1-brief{margin:22px 0 0; padding:18px 20px; background:linear-gradient(180deg,rgba(var(--acc-rgb),.06),rgba(17,29,48,.5)); border:1px solid var(--ln-s); border-radius:16px}
#hpc-protocol .day1-brief-t{font-family:var(--ds); font-size:20px; line-height:1.3; color:var(--t1); margin:0 0 8px}
#hpc-protocol .day1-brief-d{font-family:var(--bd); font-size:14px; line-height:1.6; color:var(--t2); margin:0}
#hpc-protocol .instr{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; margin:22px 0 0; background:var(--ln); border:1px solid var(--ln-s); border-radius:16px; overflow:hidden}
#hpc-protocol .gauge{background:linear-gradient(180deg,rgba(17,29,48,.88),rgba(10,17,30,.96)); padding:22px 24px}
#hpc-protocol .gauge:nth-child(1){background:linear-gradient(180deg,rgba(var(--acc-rgb),.1) 0%,rgba(17,29,48,.88) 40%,rgba(10,17,30,.96) 100%)}
#hpc-protocol .gauge:nth-child(4){background:linear-gradient(180deg,rgba(var(--acc-rgb),.06) 0%,rgba(17,29,48,.88) 40%,rgba(10,17,30,.96) 100%)}
#hpc-protocol .gauge .g-l{font-family:var(--mn); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--t3)}
#hpc-protocol .gauge .g-v{font-family:var(--ds); font-size:34px; line-height:1; margin-top:10px; color:#F6F4EE}
#hpc-protocol .gauge .g-v small{font-family:var(--mn); font-size:12px; color:var(--t3); letter-spacing:.04em}
#hpc-protocol .gauge .g-v .up{color:var(--acc)}
#hpc-protocol .gauge .g-sub{font-family:var(--mn); font-size:11px; color:var(--t3); margin-top:8px}
#hpc-protocol .gauge.cum .g-v{color:var(--acc-l)}

/* ---- section labels -- FIX 3: DM Sans small-caps, not JBM ---- */
#hpc-protocol .slab{display:flex; align-items:center; gap:16px; margin:44px 0 22px}
#hpc-protocol .slab h2{font-family:var(--bd); font-size:13px; font-variant:small-caps; letter-spacing:.12em; color:var(--t3); margin:0; font-weight:500}
#hpc-protocol .slab .rule{flex:1; height:1px; background:linear-gradient(90deg,var(--ln-s),transparent)}
#hpc-protocol .slab .aside{font-family:var(--ds); font-style:italic; font-size:16px; color:var(--t3)}

/* ---- today card ---- */
#hpc-protocol .today{position:relative; border-radius:18px; padding:32px 36px; overflow:hidden;
  background:
    radial-gradient(130% 90% at 100% 0%, rgba(var(--acc-rgb),.12), transparent 58%),
    radial-gradient(55% 38% at 0% 100%, rgba(196,162,101,.05), transparent 55%),
    linear-gradient(180deg,rgba(18,29,46,.9),rgba(11,20,33,.95));
  border:1px solid var(--ln-s); box-shadow:0 40px 90px -55px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.06)}
#hpc-protocol .today::before{content:""; position:absolute; left:0; top:24px; bottom:24px; width:3px; border-radius:3px; background:linear-gradient(180deg,var(--acc-l),var(--acc-d)); box-shadow:0 0 22px rgba(var(--acc-rgb),.6)}
/* FIX 3: kicker -> DM Sans small-caps */
#hpc-protocol .t-kick{font-family:var(--bd); font-size:13px; font-variant:small-caps; letter-spacing:.12em; color:var(--acc)}
#hpc-protocol .t-title{font-family:var(--ds); font-weight:500; font-size:40px; line-height:1.0; margin:10px 0 0; color:#F6F4EE}
/* FIX 3: .t-dir -> Cormorant italic 20px/1.6 */
#hpc-protocol .t-dir{font-family:var(--ds); font-style:italic; font-size:20px; line-height:1.6; color:var(--t2); margin:16px 0 0; max-width:60ch}
/* FIX 10: Anchor review accordion */
#hpc-protocol .anchors{margin:24px 0 0; border:1px solid var(--ln-s); border-radius:12px; background:rgba(13,20,32,.5)}
#hpc-protocol .anchors .ah{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 22px}
#hpc-protocol .anchors .al{display:flex; align-items:center; gap:14px}
#hpc-protocol .anchors .chev{width:22px;height:22px;border:1.5px solid var(--acc);border-radius:6px;display:grid;place-items:center;color:var(--acc);flex:none}
#hpc-protocol .anchors .at{font-size:14px} #hpc-protocol .anchors .at b{color:var(--acc-l)}
#hpc-protocol .anchors .asub{font-family:var(--mn); font-size:12px; color:var(--t3); margin-top:4px}
#hpc-protocol .anchors .at, #hpc-protocol .anchors .asub{display:block}
#hpc-protocol .anchors .chev{font-family:var(--mn); font-size:11px; font-weight:600}
#hpc-protocol .anchors-toggle{background:none;border:none;text-align:left;padding:0;cursor:pointer;color:inherit;display:block}
#hpc-protocol .anchors-toggle:hover .at{color:var(--acc-l)}
/* ghost / secondary button */
#hpc-protocol .anchors .flag{font-family:var(--mn); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--t3); border:1px solid var(--btn-ghost-border); border-radius:9px; padding:11px 18px; flex-shrink:0; transition:border-color .18s,color .18s,background .18s}
#hpc-protocol .anchors .flag:hover{border-color:var(--btn-ghost-border-h); color:var(--t2); background:rgba(240,240,240,.04)}
/* FIX 10: named anchor list */
#hpc-protocol .anchor-list{padding:4px 22px 18px; border-top:1px solid var(--ln); display:flex; flex-direction:column; gap:12px}
#hpc-protocol .anch-item{display:flex; align-items:flex-start; gap:14px}
#hpc-protocol .anch-n{font-family:var(--mn); font-size:11px; color:var(--acc-d); min-width:14px; padding-top:3px; font-weight:600}
#hpc-protocol .anch-item b{display:block; font-size:15px; color:var(--t1); line-height:1.3; font-weight:500}
#hpc-protocol .anch-item span{display:block; font-family:var(--mn); font-size:11px; color:var(--t3); margin-top:3px}
#hpc-protocol .steps{margin:24px 0 0}
#hpc-protocol .steps .sl{font-family:var(--mn); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--t3); margin-bottom:10px}
#hpc-protocol .row{display:flex; align-items:flex-start; gap:18px; padding:16px 0; border-bottom:1px solid var(--ln); width:100%; text-align:left}
#hpc-protocol .row:last-of-type{border-bottom:0}
#hpc-protocol .box{flex:none; width:28px; height:28px; border-radius:7px; border:1.5px solid var(--ln-h); margin-top:1px; position:relative; transition:.22s cubic-bezier(.2,1.3,.4,1)}
#hpc-protocol .row[aria-checked="true"] .box{background:var(--acc); border-color:var(--acc); box-shadow:0 0 16px rgba(var(--acc-rgb),.5)}
#hpc-protocol .row[aria-checked="true"] .box::after{content:""; position:absolute; left:9.5px; top:4.5px; width:6px; height:11px; border:solid #071018; border-width:0 2px 2px 0; transform:rotate(45deg)}
#hpc-protocol .row .tx{font-size:16px; line-height:1.55; color:var(--t1)}
#hpc-protocol .tag{font-family:var(--mn); font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:2px 8px; border-radius:4px; border:1px solid var(--ln-s); color:var(--t3); margin-left:8px}
#hpc-protocol .dcomplete-banner{margin-top:20px; padding:16px 20px; border-radius:12px; border:1px solid rgba(var(--acc-rgb),.4); background:linear-gradient(90deg,rgba(var(--acc-rgb),.16),transparent); font-family:var(--ds); font-style:italic; font-size:19px; color:var(--acc-l); opacity:0; transform:translateY(6px); transition:.4s; pointer-events:none}
#hpc-protocol .dcomplete-banner.show{opacity:1; transform:none}
#hpc-protocol .dcomplete-hint{margin-top:18px; font-family:var(--mn); font-size:11px; color:var(--t3); display:flex; gap:8px; align-items:center}
#hpc-protocol .dcomplete-hint .v{width:6px;height:6px;border-radius:50%;background:var(--acc-d)}

/* ---- sleep diary ---- */
#hpc-protocol .checkin{position:relative; border-radius:18px; padding:32px 36px; overflow:hidden;
  background:
    radial-gradient(130% 90% at 0% 0%, rgba(var(--acc-rgb),.13), transparent 55%),
    radial-gradient(40% 30% at 100% 100%, rgba(var(--acc-rgb),.06), transparent 50%),
    linear-gradient(180deg,rgba(18,29,46,.9),rgba(11,20,33,.95));
  border:1px solid var(--ln-s); box-shadow:0 40px 90px -55px rgba(0,0,0,.95)}
#hpc-protocol .ci-h{display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:8px}
#hpc-protocol .ci-q{font-family:var(--ds); font-size:31px; color:#F6F4EE; margin:0; line-height:1.2}
#hpc-protocol .ci-time{font-family:var(--mn); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--t3)}
#hpc-protocol .ci-help{font-family:var(--ds); font-style:italic; font-size:17px; color:var(--t3); margin:8px 0 24px; line-height:1.45}
#hpc-protocol .scale{display:grid; grid-template-columns:repeat(5,1fr); gap:10px}
#hpc-protocol .seg{border:1px solid var(--ln-s); border-radius:14px; padding:22px 12px; text-align:center; background:rgba(13,20,32,.5); transition:border-color .2s,background .2s,box-shadow .2s}
#hpc-protocol .seg .orb{width:28px; height:28px; display:block; margin:0 auto 4px; color:var(--t2)}
#hpc-protocol .seg .l{font-family:var(--mn); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--t3); margin-top:10px}
#hpc-protocol .seg:hover:not([aria-checked="true"]){border-color:var(--ln-h); background:rgba(17,29,48,.7)}
#hpc-protocol .seg[aria-checked="true"]{border-color:var(--acc); background:linear-gradient(180deg,rgba(var(--acc-rgb),.18),rgba(var(--acc-rgb),.04)); box-shadow:0 0 24px -6px rgba(var(--acc-rgb),.55)}
#hpc-protocol .seg[aria-checked="true"] .orb{color:var(--acc-l)}
#hpc-protocol .seg[aria-checked="true"] .l{color:var(--acc-l)}
#hpc-protocol .ci-more{display:flex; align-items:center; gap:12px; margin-top:24px; flex-wrap:wrap}
#hpc-protocol .chip{font-family:var(--mn); font-size:11px; letter-spacing:.04em; padding:10px 16px; border-radius:24px; border:1px dashed var(--ln-h); color:var(--t3); transition:border-color .18s,color .18s,background .18s,box-shadow .18s}
#hpc-protocol .chip:hover{border-color:rgba(240,240,240,.36); color:var(--t2); background:rgba(240,240,240,.04)}
#hpc-protocol .chip[aria-pressed="true"]{border-style:solid; border-color:var(--acc); color:var(--acc-l); background:rgba(var(--acc-rgb),.09); box-shadow:0 0 16px -4px rgba(var(--acc-rgb),.28)}
#hpc-protocol .ci-foot{display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:28px; padding-top:20px; border-top:1px solid var(--ln); flex-wrap:wrap}
/* FIX 4: diary save button -- teal fill, not maize */
#hpc-protocol .save{font-family:var(--mn); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; background:var(--acc); color:#06060A; padding:13px 28px; border-radius:10px; border:none; position:relative; overflow:hidden; transition:background .2s,box-shadow .2s,transform .15s ease; box-shadow:0 4px 22px rgba(var(--acc-rgb),.22)}
#hpc-protocol .save:hover:not(:disabled){background:var(--acc-l); box-shadow:0 6px 32px rgba(var(--acc-rgb),.38); transform:translateY(-1px)}
#hpc-protocol .save:active:not(:disabled){transform:translateY(0); box-shadow:0 2px 14px rgba(var(--acc-rgb),.2)}
#hpc-protocol .save:disabled{opacity:.35; cursor:not-allowed; box-shadow:none; transform:none}
#hpc-protocol .save.ok, #hpc-protocol .save.ok:disabled{background:rgba(var(--acc-rgb),.13); color:var(--acc-l); box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb),.45); transform:none; opacity:1}
#hpc-protocol .save.ok:hover{background:rgba(var(--acc-rgb),.18); box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb),.55)}
/* Deploy-audit flow 2026-07-09 (m15): failed-persist state — honest 'not saved'
   register (warn), never the earned accent of .ok. */
#hpc-protocol .save.err{background:rgba(224,123,90,.12); color:var(--warn); box-shadow:inset 0 0 0 1px rgba(224,123,90,.5)}
#hpc-protocol .ql-err{color:var(--warn)}
#hpc-protocol .save::after{content:"";position:absolute;top:0;bottom:0;left:-90%;width:55%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);transform:skewX(-16deg);transition:left .52s cubic-bezier(.22,.1,.36,1);pointer-events:none}
#hpc-protocol .save:hover:not(:disabled)::after{left:170%}
#hpc-protocol .save.ok::after, #hpc-protocol .save:disabled::after{display:none}
#hpc-protocol .ci-foot .streak{font-family:var(--mn); font-size:11px; letter-spacing:.06em; color:var(--t3)}
/* FIX 4: streak count teal not maize */
#hpc-protocol .ci-foot .streak b{color:var(--acc-l)}

/* ---- patterns ---- */
#hpc-protocol .clarity{position:relative; border-radius:16px; padding:28px 32px; overflow:hidden; background:linear-gradient(180deg,rgba(17,29,48,.88),rgba(10,17,30,.93)); border:1px solid var(--ln-s)}
#hpc-protocol .clarity-h{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:18px}
#hpc-protocol .clarity-h .lab{font-family:var(--mn); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--t3)}
#hpc-protocol .clarity-h .stage{font-family:var(--ds); font-style:italic; font-size:23px; color:var(--acc-l)}
#hpc-protocol .route{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
#hpc-protocol .rstep{height:9px; border-radius:5px; background:var(--ln)}
#hpc-protocol .rstep.f:nth-child(1){background:linear-gradient(90deg,var(--acc-d),var(--acc-l)); box-shadow:0 0 14px rgba(var(--acc-rgb),.45)}
#hpc-protocol .rstep.f:nth-child(2){background:linear-gradient(90deg,var(--acc),var(--p-two)); box-shadow:0 0 12px rgba(var(--acc-rgb),.3)}
#hpc-protocol .rstep.f:nth-child(3){background:linear-gradient(90deg,var(--c-flow),var(--c-arena)); box-shadow:0 0 12px rgba(96,165,250,.3)}
#hpc-protocol .rstep.f:nth-child(4){background:linear-gradient(90deg,var(--c-arena),var(--maize)); box-shadow:0 0 12px rgba(196,115,88,.3)}
#hpc-protocol .rlabels{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:10px}
#hpc-protocol .rlabels span{font-family:var(--mn); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--t3); text-align:center}
#hpc-protocol .rlabels span.now{color:var(--acc-l)}
#hpc-protocol .clarity-cap{font-family:var(--ds); font-style:italic; font-size:16px; color:var(--t2); margin-top:18px; line-height:1.55}
#hpc-protocol .clarity-cap b{color:var(--acc-l); font-style:normal; font-family:var(--mn); font-size:12px}
#hpc-protocol .fog{position:absolute; top:0; bottom:0; right:0; width:42%; background:linear-gradient(90deg,transparent,rgba(120,140,170,.16) 60%,rgba(120,140,170,.26)); pointer-events:none; filter:blur(2px); transition:width 1.1s ease-out}
#hpc-protocol .trends{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px}
#hpc-protocol .trend{border:1px solid var(--ln-s); border-radius:14px; padding:22px 24px; background:rgba(13,20,32,.6)}
#hpc-protocol .trend .th{font-family:var(--mn); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--t3)}
#hpc-protocol .trend .tv{font-family:var(--ds); font-size:28px; margin:8px 0 2px; color:#F6F4EE}
#hpc-protocol .trend .tv small{font-family:var(--mn); font-size:11px; color:var(--acc)}
#hpc-protocol .spark{width:100%; height:44px; margin-top:8px; display:block}
#hpc-protocol .found{display:grid; gap:14px; margin-top:16px}
#hpc-protocol .pcard-open{border-radius:14px; padding:24px 28px; border:1px solid var(--ln-s); display:grid; grid-template-columns:1fr auto; gap:22px; align-items:center;
  background:radial-gradient(120% 140% at 0% 0%, rgba(var(--acc-rgb),.13), transparent 60%), rgba(13,20,32,.6)}
/* FIX 3: card kickers -- DM Sans small-caps */
#hpc-protocol .pcard-open .pk{font-family:var(--bd); font-size:13px; font-variant:small-caps; letter-spacing:.08em; color:var(--acc); display:flex; align-items:center; gap:8px}
#hpc-protocol .pcard-open .mk{width:7px;height:7px;background:var(--acc);transform:rotate(45deg);box-shadow:0 0 8px rgba(var(--acc-rgb),.6)}
#hpc-protocol .pcard-open .pt{font-family:var(--ds); font-size:22px; line-height:1.4; margin:12px 0 0; color:var(--t1)}
#hpc-protocol .pcard-open .pf{font-family:var(--mn); font-size:11px; letter-spacing:.06em; color:var(--acc-d); margin-top:14px; text-transform:uppercase}
#hpc-protocol .pcard-open .q{font-family:var(--mn); font-size:11px; letter-spacing:.1em; color:var(--t3); border:1px solid var(--ln-s); border-radius:20px; padding:10px 14px; white-space:nowrap}
#hpc-protocol .locked{margin-top:16px; border:1px solid var(--ln-s); border-radius:14px; overflow:hidden}
#hpc-protocol .lrow{display:flex; align-items:center; gap:14px; padding:18px 24px; border-bottom:1px solid var(--ln)}
#hpc-protocol .lrow:last-child{border-bottom:0}
#hpc-protocol .lrow .lk{width:7px;height:7px;border:1.5px solid var(--t3);border-radius:2px;flex:none}
/* FIX 3: locked row titles -- ledger title at 18px, roman not italic */
#hpc-protocol .lrow .lt{font-family:var(--ds); font-size:18px; color:var(--t2); flex:1; line-height:1.4; font-style:normal}
#hpc-protocol .lrow .lf{font-family:var(--mn); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--t3)}
#hpc-protocol .integrity{font-family:var(--mn); font-size:12px; color:var(--t3); margin-top:16px; display:flex; align-items:center; gap:10px}
#hpc-protocol .integrity .v{width:5px;height:5px;border-radius:50%;background:var(--acc);box-shadow:0 0 8px var(--acc)}
#hpc-protocol .exportrow{margin-top:14px; font-family:var(--mn); font-size:11px}
#hpc-protocol .exportrow a{color:var(--acc-l); text-decoration:none} #hpc-protocol .exportrow span{color:var(--t3); margin-left:12px}

/* FIX 5: Wearable moved below exportrow -- compact seam, not a full section */
#hpc-protocol .wear{border:1px solid var(--ln-s); border-radius:14px; padding:20px 26px; background:linear-gradient(180deg,rgba(17,26,42,.66),rgba(10,17,30,.82)); margin-top:14px}
#hpc-protocol .wear-h{display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap}
#hpc-protocol .wear-h .wl{font-family:var(--ds); font-size:20px; color:#F6F4EE; line-height:1.3}
/* FIX 4: roadmap label -- cobalt (flow), not maize */
#hpc-protocol .wear-h .ws{font-family:var(--mn); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--c-flow)}
#hpc-protocol .wear-sub{font-family:var(--ds); font-style:italic; font-size:16px; color:var(--t3); margin:6px 0 18px; line-height:1.5}
#hpc-protocol .provs{display:flex; flex-wrap:wrap; gap:10px}
#hpc-protocol .prov{display:flex; align-items:center; gap:12px; padding:14px 18px; border:1px solid var(--ln-s); border-radius:14px; background:rgba(13,20,32,.55)}
/* FIX 4: icon letters at min 13px, readable; Oura=teal, others neutral */
#hpc-protocol .prov .ic{width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:var(--s3); font-family:var(--mn); font-weight:500; font-size:13px; color:var(--t2)}
#hpc-protocol .prov .pn{font-size:14px} #hpc-protocol .prov .pstat{font-family:var(--mn); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--t3); display:block; margin-top:3px}
#hpc-protocol .prov .pstat.go{color:var(--acc); cursor:pointer; transition:color .18s}
#hpc-protocol .prov .pstat.go:hover{color:var(--acc-l)}
#hpc-protocol .prov.oura .ic{color:var(--c-bio); background:rgba(var(--acc-rgb),.16)}
#hpc-protocol .prov.fitbit .ic{color:var(--t2); background:rgba(240,240,240,.06)}
#hpc-protocol .prov.whoop .ic{color:var(--t2); background:rgba(240,240,240,.06)}
#hpc-protocol .prov.garmin .ic{color:var(--t2); background:rgba(240,240,240,.06)}
#hpc-protocol .prov.apple .ic{color:var(--t2); background:rgba(240,240,240,.06)}
#hpc-protocol .wear-note{font-family:var(--mn); font-size:12px; color:var(--t3); margin-top:16px; line-height:1.65}

/* ---- the climb ---- */
#hpc-protocol .expedition{position:relative; border-radius:20px; overflow:hidden; isolation:isolate;
  background:linear-gradient(180deg,#0B1526,#0F1D33); border:1px solid var(--ln-s); box-shadow:0 50px 100px -55px rgba(0,0,0,.95)}
#hpc-protocol .exp-svg{display:block; width:100%; height:auto}
#hpc-protocol .exp-cap{position:absolute; left:24px; top:20px; font-family:var(--mn); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--t3); z-index:3}
#hpc-protocol .exp-mom{position:absolute; right:24px; top:16px; text-align:right; z-index:3}
#hpc-protocol .exp-mom .big{font-family:var(--ds); font-size:34px; color:#F6F4EE; line-height:1} #hpc-protocol .exp-mom .big b{color:var(--acc-l); font-weight:500}
#hpc-protocol .exp-mom .sm{font-family:var(--mn); font-size:11px; letter-spacing:.1em; color:var(--t3); text-transform:uppercase; margin-top:4px}
#hpc-protocol .zones{position:absolute; left:0; right:0; bottom:0; display:grid; grid-template-columns:1fr 1fr 1fr; padding:0 2px 16px; z-index:3}
#hpc-protocol .zone{padding:0 22px; border-left:1px solid var(--ln)} #hpc-protocol .zone:first-child{border-left:0}
#hpc-protocol .zone .zn{font-family:var(--mn); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--t3)}
#hpc-protocol .zone .zt{font-family:var(--ds); font-style:italic; font-size:18px; margin-top:3px}
#hpc-protocol .zone.z1 .zt{color:var(--acc)} #hpc-protocol .zone.z2 .zt{color:var(--p-two)} #hpc-protocol .zone.z3 .zt{color:var(--p-arch)}
#hpc-protocol .zone.done .zn{color:var(--acc)} #hpc-protocol .zone.done::after{content:"secured"; font-family:var(--mn); font-size:11px; letter-spacing:.12em; color:var(--acc); text-transform:uppercase; display:block; margin-top:3px}
#hpc-protocol .nextcamp{display:flex; align-items:center; gap:16px; margin:18px 2px 0; font-family:var(--mn); font-size:12px; text-transform:uppercase; color:var(--t3)}
#hpc-protocol .nextcamp .bar{flex:1; height:6px; border-radius:6px; background:var(--ln); position:relative; overflow:hidden}
#hpc-protocol .nextcamp .bar i{position:absolute; inset:0 auto 0 0; width:40%; border-radius:6px; background:linear-gradient(90deg,var(--acc-d),var(--acc-l)); box-shadow:0 0 12px rgba(var(--acc-rgb),.6)}
#hpc-protocol .nextcamp .goal{color:var(--acc-l)}
#hpc-protocol .ledger{border:1px solid var(--ln-s); border-radius:14px; overflow:hidden; background:rgba(13,20,32,.6); margin-top:22px}
#hpc-protocol .led-row{display:grid; grid-template-columns:70px 1fr auto; align-items:center; gap:18px; padding:18px 26px; border-bottom:1px solid var(--ln)}
#hpc-protocol .led-row .num{font-family:var(--ds); font-size:30px; color:var(--t3)}
#hpc-protocol .led-row.done .num{color:var(--acc-l)} #hpc-protocol .led-row.now .num{color:var(--acc-l)}
#hpc-protocol .led-row.now{background:radial-gradient(120% 220% at 0% 50%, rgba(var(--acc-rgb),.1), transparent 62%)}
/* FIX 4: miss uses --warn (#E07B5A); distinct from copper/Mastery (--c-arena) */
#hpc-protocol .led-row.miss{opacity:.72; border-left:3px solid var(--warn)}
/* FIX 3: ledger title at 24px */
#hpc-protocol .led-row .lt{font-family:var(--ds); font-size:24px; color:var(--t1); line-height:1.2}
#hpc-protocol .led-row .ls{font-family:var(--mn); font-size:12px; color:var(--t3); margin-top:3px}
#hpc-protocol .led-row .st{font-family:var(--mn); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--t3)}
#hpc-protocol .led-row.done .st{color:var(--acc)} #hpc-protocol .led-row.now .st{color:var(--acc-l)} #hpc-protocol .led-row.miss .st{color:var(--warn)}
#hpc-protocol .led-accl{display:flex; align-items:center; gap:14px; padding:16px 26px; background:linear-gradient(90deg,rgba(224,123,90,.1),transparent); border-bottom:1px solid var(--ln)}
#hpc-protocol .led-accl .mk{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--warn);display:grid;place-items:center;color:var(--warn);font-family:var(--mn);font-size:11px}
#hpc-protocol .led-accl .ac{font-family:var(--ds); font-style:italic; font-size:18px; color:var(--warn)}
#hpc-protocol .led-accl .as{font-family:var(--mn); font-size:11px; color:var(--t3); margin-top:3px}
#hpc-protocol .led-camp{display:flex; align-items:center; gap:12px; padding:14px 26px; background:linear-gradient(90deg,rgba(137,168,201,.12),transparent); font-family:var(--mn); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--p-two)}
#hpc-protocol .led-camp .flag{width:16px;height:14px;position:relative}
#hpc-protocol .led-camp .flag::before{content:"";position:absolute;left:2px;top:0;width:1.5px;height:14px;background:var(--p-two)}
#hpc-protocol .led-camp .flag::after{content:"";position:absolute;left:3.5px;top:0;width:9px;height:6px;background:var(--p-two);clip-path:polygon(0 0,100% 50%,0 100%)}
#hpc-protocol .about{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:24px; border:1px solid var(--ln-s); border-radius:14px; padding:20px 24px; background:rgba(13,20,32,.55)}
#hpc-protocol .about .al{font-family:var(--ds); font-style:italic; font-size:20px; color:var(--t2)}
#hpc-protocol .about .ac{font-family:var(--mn); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--acc)}

/* ===== craft pass ===== */
#hpc-protocol .gauge .g-v, #hpc-protocol .trend .tv, #hpc-protocol .exp-mom .big, #hpc-protocol .led-row .num{font-variant-numeric:oldstyle-nums}
#hpc-protocol .gauge .g-l, #hpc-protocol .gauge .g-sub, #hpc-protocol .g-v small{font-variant-numeric:lining-nums tabular-nums}
#hpc-protocol .today{box-shadow:0 40px 90px -55px rgba(0,0,0,.95),0 4px 28px -6px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.11)}
#hpc-protocol .checkin{box-shadow:0 40px 90px -55px rgba(0,0,0,.95),0 4px 28px -6px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08)}
#hpc-protocol .clarity, #hpc-protocol .wear{box-shadow:0 6px 28px -6px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.055)}
#hpc-protocol .trend{box-shadow:0 4px 18px -4px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.05)}
#hpc-protocol .instr{background:linear-gradient(170deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.04) 100%)}
#hpc-protocol .pnav button.on{box-shadow:0 2px 14px rgba(var(--acc-rgb),.28),inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.14)}
#hpc-protocol .kick .dot{box-shadow:0 0 0 3px rgba(var(--acc-rgb),.13),0 0 12px var(--acc)}
#hpc-protocol .pnav button{transition:color .18s,background .18s,transform .15s cubic-bezier(.22,.1,.36,1)}
#hpc-protocol .pnav button:not(.on):hover{transform:translateY(-1px)}
#hpc-protocol .row{transition:background .17s,transform .15s cubic-bezier(.22,.1,.36,1)}
#hpc-protocol .row:hover:not([aria-checked="true"]){background:rgba(240,240,240,.03);transform:translateX(3px)}
#hpc-protocol .row[aria-checked="true"] .box{box-shadow:0 0 16px rgba(var(--acc-rgb),.5),0 0 0 3px rgba(var(--acc-rgb),.13)}
#hpc-protocol .seg{transition:border-color .2s,background .2s,box-shadow .2s,transform .17s cubic-bezier(.22,.1,.36,1)}
#hpc-protocol .seg:hover:not([aria-checked="true"]){transform:translateY(-2px)}
#hpc-protocol .seg[aria-checked="true"]{transform:translateY(-3px);box-shadow:0 0 24px -6px rgba(var(--acc-rgb),.55),0 6px 16px -6px rgba(0,0,0,.3)}
#hpc-protocol .chip{transition:border-color .18s,color .18s,background .18s,box-shadow .18s,transform .15s cubic-bezier(.22,.1,.36,1)}
#hpc-protocol .chip:hover{transform:translateY(-1px)}
#hpc-protocol .chip:active{transform:scale(.97)}
#hpc-protocol .pcard-open{transition:transform .22s cubic-bezier(.22,.1,.36,1),box-shadow .22s}
#hpc-protocol .pcard-open:hover{transform:translateY(-2px);box-shadow:0 12px 32px -8px rgba(0,0,0,.5),0 0 0 1px rgba(var(--acc-rgb),.18)}
#hpc-protocol .prov .pstat.go{transition:color .18s,letter-spacing .22s cubic-bezier(.22,.1,.36,1)}
#hpc-protocol .prov .pstat.go:hover{color:var(--acc-l);letter-spacing:.16em}
#hpc-protocol .dcomplete-banner{transition:opacity .44s cubic-bezier(.22,.1,.36,1),transform .44s cubic-bezier(.22,.1,.36,1)}
#hpc-protocol .slab .rule{background:linear-gradient(90deg,var(--ln-s) 0%,rgba(240,240,240,.08) 30%,transparent 100%)}
@media (prefers-reduced-motion:reduce){#hpc-protocol *,#hpc-protocol *::before,#hpc-protocol *::after{animation:none!important; transition:none!important}}

/* ===== toolkit + modals ===== */
#hpc-protocol .qacts{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
#hpc-protocol .qact{display:flex; align-items:center; gap:14px; padding:18px 20px; border:1px solid var(--ln-s); border-radius:14px; background:linear-gradient(180deg,rgba(17,29,48,.55),rgba(11,20,33,.7)); text-align:left; transition:transform .18s cubic-bezier(.22,.1,.36,1),border-color .18s,background .18s; box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
#hpc-protocol .qact:hover{transform:translateY(-2px); border-color:rgba(var(--acc-rgb),.4); background:linear-gradient(180deg,rgba(var(--acc-rgb),.1),rgba(11,20,33,.7))}
#hpc-protocol .qact .qi{width:30px; height:30px; flex:none; color:var(--acc-l)}
#hpc-protocol .qact .ql{font-family:var(--ds); font-size:19px; color:var(--t1); display:block}
#hpc-protocol .qact .qs{font-family:var(--mn); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--t3); display:block; margin-top:3px}
#hpc-protocol .scrim{position:fixed; inset:0; z-index:80; background:rgba(3,5,10,.82); backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center; padding:24px}
#hpc-protocol .scrim.show{display:flex; animation:fade .3s both}
#hpc-protocol .modal{position:relative; width:100%; max-width:480px; max-height:88vh; overflow:auto; background:linear-gradient(180deg,var(--s2),var(--s1)); border:1px solid var(--ln-s); border-radius:20px; padding:28px 30px; box-shadow:0 60px 130px -40px rgba(0,0,0,.92), inset 0 1px 0 rgba(255,255,255,.07)}
#hpc-protocol .modal-top{display:flex; justify-content:space-between; align-items:center}
/* FIX 3: modal-h raised to 35px */
#hpc-protocol .modal-h{font-family:var(--ds); font-size:35px; color:#F6F4EE; margin:0; line-height:1}
#hpc-protocol .modal-x{font-family:var(--mn); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--t3); border:1px solid var(--ln-s); border-radius:9px; padding:9px 15px; transition:.16s}
#hpc-protocol .modal-x:hover{color:var(--t1); border-color:var(--ln-h)}
#hpc-protocol .modal-sub{font-family:var(--ds); font-style:italic; font-size:16px; color:var(--t3); margin:8px 0 18px}
#hpc-protocol .modal-sub b{color:var(--acc-l); font-style:normal}
#hpc-protocol .modal-lab{font-family:var(--mn); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--t3); margin:22px 0 8px}
/* FIX 4: .cta-full -> teal gradient; maize is ONLY in .cta-summit */
#hpc-protocol .cta-full{width:100%; font-family:var(--mn); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#06060A; background:linear-gradient(180deg,var(--acc-l),var(--acc)); border-radius:11px; padding:14px; font-weight:600; margin-top:18px; box-shadow:0 4px 22px rgba(var(--acc-rgb),.22); transition:.2s}
#hpc-protocol .cta-full:hover{transform:translateY(-1px); box-shadow:0 8px 30px rgba(var(--acc-rgb),.32)}
#hpc-protocol .cta-full:disabled{opacity:.35; box-shadow:none; cursor:not-allowed; transform:none}
/* FIX 4: .cta-summit = maize -- ONLY for earned/summit moments */
#hpc-protocol .cta-summit{width:100%; font-family:var(--mn); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#06060A; background:linear-gradient(180deg,#FFD84A,var(--maize)); border-radius:11px; padding:14px; font-weight:600; margin-top:18px; box-shadow:0 4px 22px rgba(255,203,5,.22); transition:.2s}
#hpc-protocol .cta-summit:hover{transform:translateY(-1px); box-shadow:0 8px 30px rgba(255,203,5,.32)}

/* wind-down */
#hpc-protocol .breath{position:relative; height:220px; display:flex; align-items:center; justify-content:center; margin:8px 0}
#hpc-protocol .breath-ring{position:absolute; width:172px; height:172px; border-radius:50%; border:1px solid rgba(var(--acc-rgb),.22)}
#hpc-protocol .breath-ring.r2{width:118px; height:118px; border-color:rgba(var(--acc-rgb),.12)}
#hpc-protocol .breath-core{position:absolute; width:82px; height:82px; border-radius:50%; background:radial-gradient(circle at 40% 35%, rgba(var(--acc-rgb),.9), rgba(var(--acc-rgb),.45)); box-shadow:0 0 54px rgba(var(--acc-rgb),.5); transition:transform 4s ease-in-out}
#hpc-protocol .breath.inhale .breath-core{transform:scale(1.95)}
#hpc-protocol .breath.exhale .breath-core{transform:scale(1)}
#hpc-protocol .breath-label{position:relative; font-family:var(--ds); font-style:italic; font-size:23px; color:#F6F4EE; z-index:2}
#hpc-protocol .segrow{display:flex; gap:8px; flex-wrap:wrap}
#hpc-protocol .segrow button{font-family:var(--mn); font-size:11px; letter-spacing:.05em; padding:10px 14px; border:1px solid var(--ln-s); border-radius:10px; color:var(--t3); background:rgba(13,20,32,.5); transition:.16s}
#hpc-protocol .segrow button.sel{color:#071018; background:linear-gradient(180deg,var(--acc-l),var(--acc)); border-color:transparent; font-weight:600}
#hpc-protocol .segrow button:not(.sel):hover{border-color:var(--ln-h); color:var(--t2)}
#hpc-protocol .wd-timer{margin-top:24px; text-align:center; font-family:var(--mn); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--t3)}
#hpc-protocol .wd-timer b{color:var(--acc-l); font-size:17px; margin-left:8px; font-variant-numeric:tabular-nums}
/* FIX 11: explicit Begin button for breath */
#hpc-protocol .begin-btn{display:block; margin:12px auto 4px; font-family:var(--mn); font-size:11px; letter-spacing:.12em; text-transform:uppercase; padding:12px 30px; border:1px solid rgba(var(--acc-rgb),.45); border-radius:10px; color:var(--acc-l); background:rgba(var(--acc-rgb),.08); font-weight:600; transition:background .18s,border-color .18s; cursor:pointer}
#hpc-protocol .begin-btn:hover{background:rgba(var(--acc-rgb),.16); border-color:var(--acc)}

/* FIX 1: Coach -- evidence-forward FAQ accordion styles */
#hpc-protocol .qa-count{font-family:var(--mn); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--acc); padding:8px 0; border-bottom:1px solid var(--ln); margin-bottom:12px}
#hpc-protocol .qa-list{display:flex; flex-direction:column; gap:8px}
#hpc-protocol .qa-item{border:1px solid var(--ln-s); border-radius:12px; overflow:hidden; background:rgba(13,20,32,.5)}
#hpc-protocol .qa-q-btn{display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; text-align:left; padding:14px 16px; font-family:var(--bd); font-size:13.5px; line-height:1.4; color:var(--t1); background:transparent; border:none; cursor:pointer; transition:background .16s}
#hpc-protocol .qa-q-btn:hover{background:rgba(var(--acc-rgb),.05)}
#hpc-protocol .qa-item.open .qa-q-btn{background:rgba(var(--acc-rgb),.08); color:var(--acc-l)}
#hpc-protocol .qa-chev{font-family:var(--mn); font-size:13px; color:var(--t3); flex:none; transition:transform .18s; line-height:1}
#hpc-protocol .qa-item.open .qa-chev{color:var(--acc); transform:rotate(45deg)}
#hpc-protocol .qa-body{display:none; padding:4px 16px 16px; border-top:1px solid var(--ln)}
#hpc-protocol .qa-item.open .qa-body{display:block}
#hpc-protocol .qa-answer{font-size:14px; line-height:1.65; color:var(--t2); margin:14px 0 0}
#hpc-protocol .qa-cite-inset{position:relative; margin-top:14px; padding:14px 14px 12px 16px; border-radius:8px; border:1px solid rgba(255,255,255,.07); border-left:3px solid var(--cite-hue, var(--acc)); background:rgba(10,17,30,.7)}
#hpc-protocol .cited-badge{display:inline-block; margin-bottom:8px; font-family:var(--mn); font-size:11px; letter-spacing:.14em; text-transform:uppercase; padding:3px 9px; border-radius:4px; background:var(--cite-hue, var(--acc)); color:#071018; font-weight:600}
#hpc-protocol .qa-cite-text{font-family:var(--mn); font-size:11px; color:var(--t2); line-height:1.55}
#hpc-protocol .qa-cite-text a{color:var(--acc-l); text-decoration:none}
#hpc-protocol .qa-cite-text a:hover{text-decoration:underline}
#hpc-protocol .qa-no-cite{font-family:var(--mn); font-size:11px; color:var(--t3); margin-top:12px; padding:10px 14px; border-radius:8px; background:rgba(13,20,32,.5)}

/* check-in / weekly */
#hpc-protocol .ci-q{margin:18px 0 0}
#hpc-protocol .ci-label{font-family:var(--bd); font-size:14px; color:var(--t2); display:block; margin-bottom:9px}
#hpc-protocol .ci-verdict{font-family:var(--mn); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--acc); display:flex; align-items:center; gap:10px; margin-top:8px}
#hpc-protocol .ci-verdict .dia{width:7px; height:7px; background:var(--acc); transform:rotate(45deg)}
#hpc-protocol .ci-change{display:flex; justify-content:space-between; align-items:center; margin:16px 0; padding:15px 18px; border:1px solid var(--ln-s); border-radius:12px; background:rgba(13,20,32,.5)}
#hpc-protocol .ci-change-label{font-family:var(--mn); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--t3)}
#hpc-protocol .ci-change-vals{font-family:var(--ds); font-size:23px; display:flex; align-items:center; gap:12px; font-variant-numeric:oldstyle-nums}
#hpc-protocol .ci-old{color:var(--t3); text-decoration:line-through}
#hpc-protocol .ci-new{color:var(--acc-l)}
#hpc-protocol .ci-rationale{font-size:15px; line-height:1.65; color:var(--t2); margin:14px 0 0}
#hpc-protocol .ci-cite{font-family:var(--mn); font-size:11px; color:var(--t3); margin-top:12px; line-height:1.5}
#hpc-protocol .ci-cite a{color:var(--acc-l)}
/* FIX 7: safety note adjacent to window-tightening verdict */
#hpc-protocol .ci-safety-note{font-size:12px; line-height:1.6; color:var(--t3); padding:12px 14px; border-radius:8px; border:1px solid var(--ln-s); background:rgba(13,20,32,.5); margin:12px 0 0}
/* FIX 7: contraindication screen styles */
#hpc-protocol .ci-safety{padding:4px 0}
#hpc-protocol .ci-safety-text{font-size:14px; line-height:1.6; color:var(--t2); margin:12px 0 0}
#hpc-protocol .ci-safety-list{margin:12px 0; padding:14px 18px; list-style:none; border:1px solid var(--ln-s); border-radius:10px; background:rgba(13,20,32,.5)}
#hpc-protocol .ci-safety-list li{font-size:14px; color:var(--t2); padding:5px 0; display:flex; align-items:center; gap:12px}
#hpc-protocol .ci-safety-list li::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--warn); flex:none}
#hpc-protocol .ci-safety-gp{font-size:13px; color:var(--t3); margin:4px 0 18px; line-height:1.5}
#hpc-protocol .ci-safety-gp strong{color:var(--t2); font-weight:600}

/* milestone */
#hpc-protocol .milestone-card{text-align:center; max-width:430px}
/* FIX 4: milestone glow and mark key to the active pillar accent, not always maize */
#hpc-protocol .m-glow{position:absolute; top:-28%; left:50%; transform:translateX(-50%); width:130%; height:80%; background:radial-gradient(ellipse at center, rgba(var(--acc-rgb),.22), transparent 70%); pointer-events:none}
#hpc-protocol .m-mark{position:relative; width:16px; height:16px; margin:2px auto 16px; background:var(--acc); transform:rotate(45deg); box-shadow:0 0 22px rgba(var(--acc-rgb),.6)}
#hpc-protocol .m-eyebrow{position:relative; font-family:var(--mn); font-size:11.5px; letter-spacing:.20em; text-transform:uppercase; color:var(--acc); margin-bottom:8px}
#hpc-protocol .m-h{position:relative; font-family:var(--ds); font-weight:500; font-size:46px; line-height:1; margin:0 0 22px; color:#F6F4EE}
#hpc-protocol .m-h em{font-style:italic; color:var(--acc-l)}
/* Design-fold 2026-07-08 (ruling 8 + audit A19): authored curriculum stats
   demoted to one mono Tier B line — the 31px Cormorant register is reserved
   for the user's own computed number (.mr-count). */
#hpc-protocol .m-stats{position:relative; display:flex; justify-content:center; flex-wrap:wrap; gap:6px 14px; margin-bottom:18px}
#hpc-protocol .m-stats div{display:flex; flex-direction:row; align-items:baseline; gap:5px}
#hpc-protocol .m-stats b{font-family:var(--mn); font-weight:400; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--t3)}
#hpc-protocol .m-stats span{font-family:var(--mn); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--t3)}
#hpc-protocol .m-note{position:relative; font-size:15px; color:var(--t2); line-height:1.6; margin:0 0 20px}
#hpc-protocol .modal-ghost{width:100%; font-family:var(--mn); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--t3); padding:11px; margin-top:6px; background:none; border:none; transition:.16s}
#hpc-protocol .modal-ghost:hover{color:var(--t1)}

/* toast */
#hpc-protocol .toast{position:fixed; left:50%; bottom:calc(28px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%) translateY(20px); z-index:90; display:flex; gap:12px; align-items:center; background:linear-gradient(180deg,var(--s2),var(--s1)); border:1px solid var(--ln-s); border-radius:12px; padding:13px 18px; box-shadow:0 24px 60px -22px rgba(0,0,0,.85); opacity:0; pointer-events:none; transition:.3s; max-width:340px}
#hpc-protocol .toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
#hpc-protocol .toast .tdia{width:8px; height:8px; background:var(--acc); transform:rotate(45deg); flex:none; box-shadow:0 0 10px var(--acc)}
#hpc-protocol .toast small{display:block; font-family:var(--mn); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--t3); margin-bottom:2px}
#hpc-protocol .toast .toast-tx{font-size:13px; color:var(--t1)}

/* ===== cinematic pass ===== */
@keyframes viewChildRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
#hpc-protocol .view.v-enter>*{animation:viewChildRise .55s cubic-bezier(.22,.1,.36,1) both}
/* Eval 2026-07-11 (P0): the blanket view-enter animation above uses a both
   fill, so its opacity-1 end state held on EVERY direct child — overriding the
   gated .dcomplete-banner (hidden until its own .show class is set on
   day-complete) and forcing the day-climbed banner visible on day 1 with zero
   tasks done. Exclude the banner so its .show gate governs visibility; it
   keeps its own opacity/transform transition. */
#hpc-protocol .view.v-enter>.dcomplete-banner{animation:none}
#hpc-protocol .view.v-enter>*:nth-child(1){animation-delay:0ms}
#hpc-protocol .view.v-enter>*:nth-child(2){animation-delay:70ms}
#hpc-protocol .view.v-enter>*:nth-child(3){animation-delay:140ms}
#hpc-protocol .view.v-enter>*:nth-child(4){animation-delay:210ms}
#hpc-protocol .view.v-enter>*:nth-child(5){animation-delay:280ms}
#hpc-protocol .view.v-enter>*:nth-child(6){animation-delay:350ms}
#hpc-protocol .view.v-enter>*:nth-child(7){animation-delay:420ms}
@keyframes godRayPulse{0%,100%{opacity:.45}50%{opacity:.85}}
#hpc-protocol #godRays{animation:godRayPulse 5.5s ease-in-out infinite}
@keyframes summitHaloScale{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.22);opacity:.5}}
#hpc-protocol #summitHalo{transform-box:fill-box;transform-origin:center;animation:summitHaloScale 4s ease-in-out infinite}
@keyframes youHerePulse{0%{transform:scale(1);opacity:.8}70%{transform:scale(2.8);opacity:0}100%{transform:scale(2.8);opacity:0}}
#hpc-protocol #youAreHereGlow{transform-box:fill-box;transform-origin:center;animation:youHerePulse 2.6s cubic-bezier(.2,0,.8,1) infinite}
#hpc-protocol .snow-layer{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden}
#hpc-protocol .snow-particle{position:absolute;border-radius:50%;background:rgba(255,255,255,.88);box-shadow:0 0 4px rgba(255,255,255,.4);animation:snowfall var(--dur,4s) linear var(--delay,0s) infinite}
@keyframes snowfall{0%{transform:translate(0,0);opacity:.9}100%{transform:translate(var(--drift,10px),80px);opacity:0}}
@keyframes routeBarIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
#hpc-protocol .nextcamp .bar i{transform-origin:left center}
#hpc-protocol .nextcamp .bar i.bar-ready{animation:routeBarIn 1.6s cubic-bezier(.22,.1,.36,1) .7s both}
@keyframes routeStepReveal{from{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}
#hpc-protocol .rstep.animate{animation:routeStepReveal .5s cubic-bezier(.22,.1,.36,1) both;transform-origin:left center}
@keyframes milestoneCardIn{from{transform:translateY(28px) scale(.95);opacity:0}to{transform:none;opacity:1}}
/* FIX 4: teal-based burst for Foundation milestone (not maize) */
@keyframes milestoneMarkIn{
  0%{transform:rotate(45deg) scale(0);opacity:0;box-shadow:0 0 0 rgba(var(--acc-rgb),0)}
  60%{transform:rotate(45deg) scale(1.7);opacity:1;box-shadow:0 0 90px rgba(var(--acc-rgb),1),0 0 200px rgba(var(--acc-rgb),.5)}
  100%{transform:rotate(45deg) scale(1);opacity:1;box-shadow:0 0 22px rgba(var(--acc-rgb),.6)}}
@keyframes milestoneGlowIn{0%{opacity:0;transform:translateX(-50%) scale(.2)}100%{opacity:1;transform:translateX(-50%) scale(1)}}
/* Design-fold 2026-07-08 (ruling 8): one 300ms fade-up is the milestone
   modal's entire entrance — the 1.4s burst and staggered stat rises retired. */
@keyframes mrModalIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes mParticle{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--tx,0px),var(--ty,-70px)) scale(0);opacity:0}}
#hpc-protocol #milestone.show .milestone-card{animation:milestoneCardIn .55s cubic-bezier(.22,.1,.36,1) .05s both}
#hpc-protocol #milestone.show .m-mark{animation:milestoneMarkIn 1s cubic-bezier(.22,.1,.36,1) .15s both}
#hpc-protocol #milestone.show .m-glow{animation:milestoneGlowIn .7s cubic-bezier(.22,.1,.36,1) .1s both}
#hpc-protocol #milestone.show .modal{animation:mrModalIn .3s ease-out both}
#hpc-protocol .milestone-card{position:relative}
#hpc-protocol .m-particle{position:absolute;width:5px;height:5px;border-radius:50%;pointer-events:none;animation:mParticle var(--dur,.8s) cubic-bezier(.22,.1,.36,1) var(--delay,0s) both}
@keyframes breathOrbGlow{
  0%,100%{box-shadow:0 0 54px rgba(var(--acc-rgb),.5)}
  50%{box-shadow:0 0 90px rgba(var(--acc-rgb),.75),0 0 50px 15px rgba(var(--acc-rgb),.15)}}
#hpc-protocol .breath-core{animation:breathOrbGlow 4s ease-in-out infinite}
/* FIX 4: save pulse teal, not maize */
@keyframes savePulse{
  0%,100%{box-shadow:0 4px 22px rgba(var(--acc-rgb),.22)}
  50%{box-shadow:0 4px 36px rgba(var(--acc-rgb),.44),0 0 60px rgba(var(--acc-rgb),.12)}}
#hpc-protocol .save:not(:disabled):not(.ok){animation:savePulse 2.8s ease-in-out infinite}
#hpc-protocol .qact{position:relative;overflow:hidden}
#hpc-protocol .qact::after{content:"";position:absolute;top:0;bottom:0;left:-90%;width:52%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);transform:skewX(-16deg);transition:left .52s cubic-bezier(.22,.1,.36,1);pointer-events:none}
#hpc-protocol .qact:hover::after{left:170%}
#hpc-protocol .led-row.now{box-shadow:inset 4px 0 0 var(--acc-l),0 2px 24px -8px rgba(var(--acc-rgb),.28)}

/* ===== framework dots + pills ===== */
#hpc-protocol .fw-dot{display:inline-block; width:8px; height:8px; border-radius:50%; flex:none; vertical-align:middle}
#hpc-protocol .fw-dot.fw-flow{background:var(--c-flow); box-shadow:0 0 8px rgba(96,165,250,.5)}
#hpc-protocol .fw-dot.fw-bio{background:var(--c-bio); box-shadow:0 0 8px rgba(var(--acc-rgb),.45)}
#hpc-protocol .fw-dot.fw-habits{background:var(--c-habits); box-shadow:0 0 6px rgba(150,166,122,.45)}
#hpc-protocol .fw-dot.fw-learning{background:var(--c-learning); box-shadow:0 0 6px rgba(152,140,181,.45)}
#hpc-protocol .fw-dot.fw-connection{background:var(--c-connection); box-shadow:0 0 6px rgba(201,155,180,.45)}
#hpc-protocol .fw-dot.fw-arena{background:var(--c-arena); box-shadow:0 0 6px rgba(196,115,88,.45)}
#hpc-protocol .fw-dot.fw-decisions{background:var(--c-decisions); box-shadow:0 0 6px rgba(204,192,111,.45)}
#hpc-protocol .fw-dot.fw-identity{background:var(--c-identity); box-shadow:0 0 6px rgba(184,136,146,.45)}
#hpc-protocol .fw-dot.fw-leadership{background:var(--c-leadership); box-shadow:0 0 6px rgba(136,152,160,.45)}
#hpc-protocol .fw-dot.fw-nutrition{background:var(--c-nutrition); box-shadow:0 0 6px rgba(168,159,104,.45)}
#hpc-protocol .fw-legend{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
#hpc-protocol .fw-pill{font-family:var(--mn); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  padding:2px 8px; border-radius:10px; margin-left:10px; vertical-align:middle; display:inline-block}
#hpc-protocol .fw-pill.fw-habits{color:var(--c-habits); border:1px solid rgba(150,166,122,.3); background:rgba(150,166,122,.08)}
#hpc-protocol .fw-pill.fw-flow{color:var(--c-flow); border:1px solid rgba(96,165,250,.3); background:rgba(96,165,250,.08)}
#hpc-protocol .fw-pill.fw-learning{color:var(--c-learning); border:1px solid rgba(152,140,181,.3); background:rgba(152,140,181,.08)}
#hpc-protocol .fw-pill.fw-bio{color:var(--c-bio); border:1px solid rgba(var(--acc-rgb),.3); background:rgba(var(--acc-rgb),.08)}
#hpc-protocol .fw-pill.fw-connection{color:var(--c-connection); border:1px solid rgba(201,155,180,.3); background:rgba(201,155,180,.08)}
#hpc-protocol .fw-pill.fw-arena{color:var(--c-arena); border:1px solid rgba(196,115,88,.3); background:rgba(196,115,88,.08)}
#hpc-protocol .fw-pill.fw-decisions{color:var(--c-decisions); border:1px solid rgba(204,192,111,.3); background:rgba(204,192,111,.08)}
#hpc-protocol .fw-pill.fw-identity{color:var(--c-identity); border:1px solid rgba(184,136,146,.3); background:rgba(184,136,146,.08)}
#hpc-protocol .fw-pill.fw-leadership{color:var(--c-leadership); border:1px solid rgba(136,152,160,.3); background:rgba(136,152,160,.08)}
#hpc-protocol .fw-pill.fw-nutrition{color:var(--c-nutrition); border:1px solid rgba(168,159,104,.3); background:rgba(168,159,104,.08)}
/* Per-hue rules set only the pair of custom props; the three shared rules
   below consume them (one editable location per property). */
#hpc-protocol .pcard-open.card-bio{--fw:var(--c-bio); --fw-rgb:115,177,145}
#hpc-protocol .pcard-open.card-flow{--fw:var(--c-flow); --fw-rgb:96,165,250}
#hpc-protocol .pcard-open.card-decisions{--fw:var(--c-decisions); --fw-rgb:204,192,111}
#hpc-protocol .pcard-open.card-habits{--fw:var(--c-habits); --fw-rgb:150,166,122}
#hpc-protocol .pcard-open.card-learning{--fw:var(--c-learning); --fw-rgb:152,140,181}
#hpc-protocol .pcard-open.card-identity{--fw:var(--c-identity); --fw-rgb:184,136,146}
#hpc-protocol .pcard-open.card-leadership{--fw:var(--c-leadership); --fw-rgb:136,152,160}
#hpc-protocol .pcard-open.card-arena{--fw:var(--c-arena); --fw-rgb:196,115,88}
#hpc-protocol .pcard-open.card-nutrition{--fw:var(--c-nutrition); --fw-rgb:168,159,104}
#hpc-protocol .pcard-open.card-connection{--fw:var(--c-connection); --fw-rgb:201,155,180}
#hpc-protocol .pcard-open[class*="card-"] .mk{background:var(--fw); box-shadow:0 0 8px rgba(var(--fw-rgb),.5)}
#hpc-protocol .pcard-open[class*="card-"] .pk{color:var(--fw)}
#hpc-protocol .pcard-open[class*="card-"]{background:radial-gradient(120% 140% at 0% 0%, rgba(var(--fw-rgb),.1), transparent 60%), rgba(13,20,32,.6)}
/* radar ping on "you are here" */
@keyframes ping{0%{transform:scale(1);opacity:.65}70%{transform:scale(2.6);opacity:.1}100%{transform:scale(2.6);opacity:0}}
#hpc-protocol .led-row.now .st{position:relative;padding-left:16px}
#hpc-protocol .led-row.now .st::before{content:"";position:absolute;left:3px;top:50%;margin-top:-3.5px;width:7px;height:7px;border-radius:50%;background:var(--acc-l)}
#hpc-protocol .led-row.now .st::after{content:"";position:absolute;left:3px;top:50%;margin-top:-3.5px;width:7px;height:7px;border-radius:50%;border:1px solid var(--acc-l);animation:ping 2.4s cubic-bezier(.2,0,.8,1) infinite}

/* ── Audit P0: safety / consent / data-control surfaces ───────────────────
   These load-bearing surfaces (medical contraindication screen, consent
   gate, GDPR data controls, expected-dip + P1 disclaimers) are emitted by
   the runtime but had ZERO css coverage — they rendered as browser-default
   controls on the #050810 ground (the legal firewall was invisible). Styled
   here to the token system. The two contraindication choices are given
   EQUAL visual weight (hue-distinguished, neither filled) so the screen
   never nudges a vulnerable user toward "continue" — honesty by design. */

/* P1-tier disclaimer banner (shown above the diary log form) */
#hpc-protocol .safety-banner{display:flex; gap:12px; font-family:var(--bd); font-size:13px; line-height:1.5; color:var(--t2); background:rgba(224,123,90,.08); border:1px solid rgba(224,123,90,.28); border-left:3px solid var(--warn); border-radius:12px; padding:14px 16px; margin-bottom:20px}

/* Device-only consent gate + Agree */
#hpc-protocol .consent-gate{display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; border:1px solid var(--ln-s); border-radius:14px; background:rgba(13,20,32,.6); padding:16px 18px; margin-top:16px}
#hpc-protocol .consent-copy{flex:1 1 220px; margin:0; font-family:var(--bd); font-size:12.5px; line-height:1.5; color:var(--t2)}
#hpc-protocol .consent-agree{font-family:var(--mn); font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:#06060A; background:linear-gradient(180deg,var(--acc-l),var(--acc)); border:none; border-radius:10px; padding:11px 22px; cursor:pointer; transition:.2s}
#hpc-protocol .consent-agree:hover{transform:translateY(-1px); box-shadow:0 6px 24px rgba(var(--acc-rgb),.3)}

/* GDPR data controls: export (neutral) + delete (warn, two-click confirm) */
#hpc-protocol .data-controls{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; padding-top:20px; border-top:1px solid var(--ln)}
#hpc-protocol .export-csv,
#hpc-protocol .delete-all,
#hpc-protocol .delete-confirm{font-family:var(--mn); font-size:11px; letter-spacing:.1em; text-transform:uppercase; border-radius:9px; padding:10px 16px; cursor:pointer; transition:border-color .16s,color .16s,background .16s; background:transparent; border:1px solid var(--ln-s); color:var(--t3)}
#hpc-protocol .export-csv:hover{border-color:var(--acc); color:var(--acc)}
#hpc-protocol .delete-all{color:var(--warn); border-color:rgba(224,123,90,.32)}
#hpc-protocol .delete-all:hover{background:rgba(224,123,90,.08); border-color:var(--warn)}
#hpc-protocol .delete-confirm{color:#06060A; background:var(--warn); border-color:transparent; font-weight:600}
#hpc-protocol .delete-confirm:hover{filter:brightness(1.05)}

/* Contraindication screen — the medical firewall */
#hpc-protocol .ci-contraindications{border:1px solid rgba(224,123,90,.30); border-radius:16px; background:radial-gradient(120% 140% at 0% 0%, rgba(224,123,90,.08), transparent 60%), rgba(13,20,32,.6); padding:22px 24px; margin:8px 0 4px}
#hpc-protocol .ci-screen-title{margin:0 0 8px; font-family:var(--ds); font-style:italic; font-size:22px; line-height:1.2; color:var(--t1)}
#hpc-protocol .ci-screen-body{margin:0 0 14px; font-family:var(--bd); font-size:14.5px; line-height:1.55; color:var(--t2)}
#hpc-protocol .ci-list{margin:0 0 20px; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:8px}
#hpc-protocol .ci-list li{position:relative; padding-left:22px; font-family:var(--bd); font-size:13px; line-height:1.5; color:var(--t2)}
#hpc-protocol .ci-list li::before{content:""; position:absolute; left:4px; top:8px; width:6px; height:6px; border-radius:50%; background:var(--warn)}
#hpc-protocol .ci-none-apply,
#hpc-protocol .ci-one-applies{display:block; width:100%; text-align:center; font-family:var(--mn); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; border-radius:11px; padding:14px; cursor:pointer; transition:.2s}
#hpc-protocol .ci-none-apply{color:var(--acc-l); background:rgba(var(--acc-rgb),.08); border:1px solid var(--acc); margin-bottom:10px}
#hpc-protocol .ci-none-apply:hover{background:rgba(var(--acc-rgb),.14)}
#hpc-protocol .ci-one-applies{color:var(--warn); background:rgba(224,123,90,.08); border:1px solid var(--warn)}
#hpc-protocol .ci-one-applies:hover{background:rgba(224,123,90,.14)}
#hpc-protocol .ci-dip-disclosure{font-family:var(--bd); font-size:12.5px; line-height:1.55; color:var(--t2); background:rgba(224,123,90,.07); border-left:3px solid var(--warn); border-radius:10px; padding:12px 14px; margin:0 0 16px}

/* Weekly check-in form — payload-driven inputs (.ci-field) inside the modal.
   Native controls on the #050810 ground must be explicitly styled or they
   render as white browser-default boxes. */
#hpc-protocol .ci-form{display:flex; flex-direction:column; gap:6px; margin:16px 0 4px}
#hpc-protocol .ci-form label{font-family:var(--mn); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--t3); margin:10px 0 2px}
#hpc-protocol .ci-form input{font-family:var(--bd); font-size:14px; color:var(--t1); background:rgba(13,20,32,.7); border:1px solid var(--ln-s); border-radius:10px; padding:11px 14px; width:100%; transition:border-color .16s}
#hpc-protocol .ci-form input::placeholder{color:var(--t3); opacity:.7}
#hpc-protocol .ci-form input:hover{border-color:var(--ln-h)}
/* Audit fix 2026-07-07: outline:none here suppressed the ring before the
   :focus-visible rule could restore it — keep only the border change and
   suppress the ring for pointer focus specifically. */
#hpc-protocol .ci-form input:focus{border-color:var(--acc)}
#hpc-protocol .ci-form input:focus:not(:focus-visible){outline:none}
#hpc-protocol .ci-submit{align-self:flex-start; margin-top:14px; font-family:var(--mn); font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:#06060A; background:linear-gradient(180deg,var(--acc-l),var(--acc)); border:none; border-radius:10px; padding:12px 24px; cursor:pointer; transition:.2s}
#hpc-protocol .ci-submit:hover{transform:translateY(-1px); box-shadow:0 6px 24px rgba(var(--acc-rgb),.3)}

/* Visible keyboard focus on every safety control (WCAG 2.4.7) */
#hpc-protocol .consent-agree:focus-visible,
#hpc-protocol .ci-none-apply:focus-visible,
#hpc-protocol .ci-one-applies:focus-visible,
#hpc-protocol .export-csv:focus-visible,
#hpc-protocol .delete-all:focus-visible,
#hpc-protocol .delete-confirm:focus-visible,
#hpc-protocol .ci-form input:focus-visible,
#hpc-protocol .ci-submit:focus-visible{outline:2px solid var(--acc-l); outline-offset:2px}

/* ── Task 9c: mobile effect guards ────────────────────────────────────────
   On narrow viewports (<=640px): backdrop-filter is disabled (avoids the
   Kadence compositing-layer penalty on low-power mobile) and grain is
   hidden (position:absolute already scopes it; hiding saves GPU raster).
   Appended block only — verbatim v10 port above is untouched.             */
@media (max-width:640px) {
  #hpc-protocol .pnav { backdrop-filter: none; }
  #hpc-protocol .scrim { backdrop-filter: none; }
  #hpc-protocol .grain { display: none; }
  /* Deploy-audit batch 5 (habits m16): .fog's blur(2px) forced a compositor
     layer on every mobile Patterns render — the gradient body alone carries
     the locked-content metaphor. */
  #hpc-protocol .fog { filter: none; }
  /* Deploy-audit batch 9 (social M5): defensive — the all-caps kick eyebrow
     must wrap rather than compress if copy ever lengthens. */
  #hpc-protocol .kick { flex-wrap:wrap; }
  /* The Ascent art: shallower hero on one-handed devices */
  #hpc-protocol .pp-hero { aspect-ratio:16/9; max-height:220px; }
  /* Deploy-audit batch 5 (habits M5): the aliased .m-stat-v/.m-stat-l rules
     (specificity 1,2,0) beat the 13px mobile font floor targeting
     .m-stats b/span (1,1,1) — restate the floor at matching specificity. */
  #hpc-protocol .m-stats .m-stat-v, #hpc-protocol .m-stats .m-stat-l { font-size: 13px; }
  /* Deploy-audit batch 5 (habits M5): long rating end-labels overflow the
     ~343px row at 375px (goal-architecture D40/D41) — let them wrap. */
  #hpc-protocol .step-rate-ends { flex-wrap: wrap; gap: 4px; }
}

/* ── UI-UX Pro design pass (2026-07-06) ──────────────────────────────────
   Additive layer only: the CSS class/skeleton contract above is untouched.
   All copy remains runtime/payload-driven; nothing here emits text.
   Sections: (A) live-but-unstyled surfaces, (B) WCAG 2.2 target sizes,
   (C) Climb zone legibility, (D) mobile layout pass <=640px (the v10 port
   shipped desktop-only), (E) <=480px Climb fallback — arc goes decorative,
   zones drop into static flow, .nextcamp bar carries progress.           */

/* (A) .early-reward — emitted by renderDiary/updateFog but had no CSS;
   filled at 3 and 7 logged entries. Styled as a quiet serif reward line. */
#hpc-protocol .early-reward:not(:empty){display:flex; align-items:center; gap:10px; margin-top:16px; font-family:var(--ds); font-style:italic; font-size:17px; line-height:1.5; color:var(--acc-l)}
#hpc-protocol .early-reward:not(:empty)::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--acc); box-shadow:0 0 10px var(--acc); flex:none}

/* (B) WCAG 2.2 target size — modal escape is the smallest critical control */
#hpc-protocol .modal-x{min-height:44px; min-width:44px}

/* (F) Audit fix wave 2026-07-07 — CONTRACT REPAIRS.
   Five class families were emitted by the live engine with ZERO css (the
   historic "invented class name" defect, pre-dating the design pass):
   .qa-trigger (toolkit entry buttons), .modal-scrim (click-outside layer),
   .wd-patterns/.wd-pattern/.wd-sound/.wd-sound-opt (wind-down radiogroups),
   plus .m-title/.m-stat-v/.m-stat-l and .qa-a which drifted from the
   .m-h/.m-stats/.qa-answer contract. Aliased/styled here. */

/* Toolkit entry buttons — card treatment matching the .qact contract */
#hpc-protocol .qa-trigger{display:flex; align-items:center; padding:18px 20px; border:1px solid var(--ln-s); border-radius:14px; background:linear-gradient(180deg,rgba(17,29,48,.55),rgba(11,20,33,.7)); text-align:left; font-family:var(--ds); font-size:19px; color:var(--t1); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); transition:transform .18s cubic-bezier(.22,.1,.36,1),border-color .18s,background .18s; min-height:44px}
#hpc-protocol .qa-trigger:hover{transform:translateY(-2px); border-color:rgba(var(--acc-rgb),.4); background:linear-gradient(180deg,rgba(var(--acc-rgb),.1),rgba(11,20,33,.7))}

/* Click-outside dismiss layer — was a zero-height div (dismiss dead) */
#hpc-protocol .modal-scrim{position:absolute; inset:0; z-index:0; background:transparent; border:0; padding:0; cursor:pointer}
#hpc-protocol .modal{z-index:1}

/* Wind-down radiogroups — mirror the .segrow contract; active state keys
   on aria-checked (the runtime never sets .sel) */
#hpc-protocol .wd-patterns, #hpc-protocol .wd-sound{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px}
#hpc-protocol .wd-pattern, #hpc-protocol .wd-sound-opt{font-family:var(--mn); font-size:11px; letter-spacing:.05em; padding:10px 14px; border:1px solid var(--ln-s); border-radius:10px; color:var(--t3); background:rgba(13,20,32,.5); transition:.16s}
#hpc-protocol .wd-pattern[aria-checked="true"], #hpc-protocol .wd-sound-opt[aria-checked="true"]{color:#071018; background:linear-gradient(180deg,var(--acc-l),var(--acc)); border-color:transparent; font-weight:600}
#hpc-protocol .wd-pattern[aria-checked="false"]:hover, #hpc-protocol .wd-sound-opt[aria-checked="false"]:hover{border-color:var(--ln-h); color:var(--t2)}
#hpc-protocol .segrow button[aria-checked="true"]{color:#071018; background:linear-gradient(180deg,var(--acc-l),var(--acc)); border-color:transparent; font-weight:600}

/* Milestone heading + stats — runtime emits .m-title / .m-stat-v / .m-stat-l */
#hpc-protocol .m-title{position:relative; font-family:var(--ds); font-weight:500; font-size:46px; line-height:1; margin:0 0 22px; color:#F6F4EE}
/* Design-fold 2026-07-08 (ruling 8 + audit A19): aliases match the demoted
   .m-stats b/span registers — authored stats are one mono Tier B line. */
#hpc-protocol .m-stats .m-stat-v{font-family:var(--mn); font-weight:400; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--t3)}
#hpc-protocol .m-stats .m-stat-l{font-family:var(--mn); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--t3)}

/* Coach answer paragraph — runtime emits .qa-a, css had only .qa-answer */
#hpc-protocol .qa-a{font-size:15px; line-height:1.65; color:var(--t2); margin:14px 0 0}

/* Skip link — was an unstyled default-blue anchor on the dark ground;
   visually hidden until keyboard focus (WCAG 2.4.1) */
#hpc-protocol .skip-link{position:fixed; left:-9999px; top:0; z-index:20; font-family:var(--mn); font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:#071018; background:var(--acc-l); border-radius:0 0 9px 0; padding:12px 18px; text-decoration:none}
#hpc-protocol .skip-link:focus{left:0}

/* Check-in result container — children are styled; give the shell rhythm */
#hpc-protocol .ci-result{margin-top:18px}

/* (G) UI-UX Pro P2 refinement pass 2026-07-07 (skill rubric §8 forms /
   empty-states, §6 colour tokens, §5 visual hierarchy). */

/* Check-in form craft: human-language serif labels (the mono all-caps
   treatment read like a roster), field-group rhythm, and the today-card
   accent wash on the check-in modal ground. */
#hpc-protocol .ci-form{gap:8px}
#hpc-protocol .ci-form label{font-family:var(--ds); font-style:italic; font-size:16px; letter-spacing:0; text-transform:none; color:var(--t2); margin:16px 0 2px}
#hpc-protocol .ci-form label:first-of-type{margin-top:6px}
#hpc-protocol #checkin .modal{background:radial-gradient(130% 90% at 0% 0%, rgba(var(--acc-rgb),.08), transparent 55%), linear-gradient(180deg,var(--s2),var(--s1))}

/* Patterns first-run line (runtime .patterns-empty, ui.patternsEmptyNote) */
#hpc-protocol .patterns-empty{display:flex; align-items:baseline; gap:12px; margin:0 0 16px; font-family:var(--ds); font-style:italic; font-size:18px; line-height:1.55; color:var(--t2); max-width:56ch}
#hpc-protocol .patterns-empty::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--acc); box-shadow:0 0 10px rgba(var(--acc-rgb),.6); flex:none; transform:translateY(-2px)}

/* ═══ Capture+Insights loop 2026-07-08: computed associations (Task 9) ═════
   .assoc wraps the "From your logs" computed section; .assoc-h is the shared
   provenance-label header (reused for authored section too); .assoc-row is one
   unlocked chip/boolean line; .assoc-clause is the legal non-causal footer. */
#hpc-protocol .assoc{margin:0 0 22px}
#hpc-protocol .assoc-h{font-family:var(--mn); font-size:11.5px; letter-spacing:.20em; text-transform:uppercase; color:var(--t3); margin:0 0 10px}
#hpc-protocol .assoc-row{font-family:var(--bd); font-size:14px; color:var(--t2); line-height:1.6; margin:0 0 6px}
#hpc-protocol .assoc-clause{font-family:var(--mn); font-size:12.5px; letter-spacing:.08em; color:var(--t3); margin:10px 0 0}

/* Fog carries the pillar accent — "the signal ahead", not generic haze */
#hpc-protocol .fog{background:linear-gradient(90deg,transparent,rgba(var(--acc-rgb),.10) 60%,rgba(var(--acc-rgb),.20))}

/* (H) Phase-1 hub build 2026-07-07 — free-text capture + check-in
   persistence surfaces. Every class the runtime emits is styled here
   (bidirectional contract discipline). */

/* Crisis signpost — always visible above the note input on P1
   crisis-adjacent protocols; equal-weight safety surface, no toggle */
#hpc-protocol .crisis-note{display:block; font-family:var(--bd); font-size:14px; line-height:1.6; color:var(--t2); background:rgba(224,123,90,.08); border:1px solid rgba(224,123,90,.28); border-left:3px solid var(--warn); border-radius:10px; padding:12px 14px; margin:0 0 14px}
#hpc-protocol .crisis-link{color:var(--acc-l); text-decoration:underline}
#hpc-protocol .crisis-link:hover{color:var(--acc)}
/* Per-task safety note (Deploy-audit bio 2026-07-09, M2 blocker): authored
   drug-interaction / contraindication copy on supplement-type steps. Same
   warn register as .safety-banner / .crisis-note; indented under its step. */
#hpc-protocol .step-safety{display:block; font-family:var(--bd); font-size:13px; line-height:1.55; color:var(--t2); background:rgba(224,123,90,.08); border:1px solid rgba(224,123,90,.28); border-left:3px solid var(--warn); border-radius:10px; padding:10px 13px; margin:8px 0 4px}

/* Daily note — serif label, quiet field, live counter + device-only hint */
#hpc-protocol .ci-note{margin:22px 0 4px}
#hpc-protocol .ci-note-label, #hpc-protocol .ci-refl-label{display:block; font-family:var(--ds); font-style:italic; font-size:16px; color:var(--t2); margin:0 0 8px}
#hpc-protocol .ci-note-field, #hpc-protocol .ci-refl-field{display:block; width:100%; resize:vertical; min-height:56px; font-family:var(--bd); font-size:14px; line-height:1.55; color:var(--t1); background:rgba(13,20,32,.7); border:1px solid var(--ln-s); border-radius:10px; padding:11px 14px; transition:border-color .16s}
#hpc-protocol .ci-note-field:hover, #hpc-protocol .ci-refl-field:hover{border-color:var(--ln-h)}
#hpc-protocol .ci-note-field:focus, #hpc-protocol .ci-refl-field:focus{border-color:var(--acc)}
#hpc-protocol .ci-note-field:focus:not(:focus-visible), #hpc-protocol .ci-refl-field:focus:not(:focus-visible){outline:none}
#hpc-protocol .ci-note-meta{display:flex; justify-content:space-between; align-items:baseline; margin-top:6px}
#hpc-protocol .ci-note-count{font-family:var(--mn); font-size:11px; color:var(--t3); font-variant-numeric:tabular-nums}
#hpc-protocol .ci-note-hint{font-family:var(--mn); font-size:11px; letter-spacing:.06em; color:var(--t3)}
#hpc-protocol .ci-refl-label{margin-top:20px}
#hpc-protocol .ci-refl-field{margin-bottom:6px}

/* Check-in boolean toggle (Yes/No radiogroup) */
#hpc-protocol .ci-bool{display:flex; gap:8px; margin:2px 0 6px}
#hpc-protocol .ci-bool-opt{flex:0 0 auto; min-width:88px; min-height:44px; font-family:var(--mn); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; padding:10px 20px; border:1px solid var(--ln-s); border-radius:10px; color:var(--t3); background:rgba(13,20,32,.5); transition:.16s}
#hpc-protocol .ci-bool-opt[aria-checked="true"]{color:#071018; background:linear-gradient(180deg,var(--acc-l),var(--acc)); border-color:transparent; font-weight:600}
#hpc-protocol .ci-bool-opt[aria-checked="false"]:hover{border-color:var(--ln-h); color:var(--t2)}

/* Inline range-validation error (below its field) */
#hpc-protocol .ci-field-error{display:block; font-family:var(--bd); font-size:13px; color:var(--warn); margin:4px 0 2px; min-height:0}
#hpc-protocol .ci-field-error:empty{display:none}

/* Citation anchor emitted by doiLink() — was a classless default-blue <a> */
#hpc-protocol .cite-link{font-family:var(--mn); font-size:12px; letter-spacing:.03em; color:var(--acc-l); text-decoration:none; border-bottom:1px solid rgba(var(--acc-rgb),.35)}
#hpc-protocol .cite-link:hover{color:var(--acc); border-bottom-color:var(--acc)}

/* Check-in history — the last four persisted verdicts */
#hpc-protocol .ci-history{margin-top:22px; padding-top:16px; border-top:1px solid var(--ln)}
#hpc-protocol .ci-history-h{font-family:var(--bd); font-size:13px; font-variant:small-caps; letter-spacing:.12em; color:var(--t3); margin:0 0 10px; font-weight:500}
#hpc-protocol .ci-history-row{font-family:var(--bd); font-size:13.5px; line-height:1.6; color:var(--t2); margin:0 0 6px}
#hpc-protocol .ci-history-row b{color:var(--acc-l); font-weight:600; font-family:var(--mn); font-size:12px; letter-spacing:.06em; text-transform:uppercase; margin-right:2px}
/* Polish 2026-07-09 (arena harvest): the weekly reflection note, surfaced
   (ellipsised) under its verdict row. Quiet, secondary register. */
#hpc-protocol .ci-history-note{display:block; font-family:var(--bd); font-style:italic; font-size:13px; line-height:1.5; color:var(--t3); margin:2px 0 0}

/* Wind-down Begin button — runtime emits .wd-begin, css had only .begin-btn */
#hpc-protocol .wd-begin{display:block; margin:12px auto 4px; font-family:var(--mn); font-size:11px; letter-spacing:.12em; text-transform:uppercase; padding:12px 30px; border:1px solid rgba(var(--acc-rgb),.45); border-radius:10px; color:var(--acc-l); background:rgba(var(--acc-rgb),.08); font-weight:600; transition:background .18s,border-color .18s; cursor:pointer; min-height:44px}
#hpc-protocol .wd-begin:hover{background:rgba(var(--acc-rgb),.16); border-color:var(--acc)}

/* ── Toolkit tool views (Toolkits 2026-07-11) — .tk-* register ──────────── */
#hpc-protocol .tk-intro{margin:18px 4px 0; font-size:14px; line-height:1.55; color:var(--t2)}
#hpc-protocol .tk-steps{margin-top:10px}
#hpc-protocol .tk-progress{margin-top:18px; font-family:var(--mn); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--t3)}
#hpc-protocol .tk-step-text{margin:14px 4px 0; font-size:17px; line-height:1.6; color:var(--t1); min-height:3.2em}
#hpc-protocol .tk-clock{margin-top:14px; text-align:center; font-family:var(--mn); font-size:22px; letter-spacing:.06em; color:var(--acc-l); font-variant-numeric:tabular-nums; min-height:26px}
#hpc-protocol .tk-nav{display:flex; gap:10px; justify-content:space-between; margin-top:22px}
#hpc-protocol .tk-back, #hpc-protocol .tk-next{font-family:var(--mn); font-size:11px; letter-spacing:.12em; text-transform:uppercase; padding:12px 26px; border:1px solid rgba(var(--acc-rgb),.45); border-radius:10px; color:var(--acc-l); background:rgba(var(--acc-rgb),.08); font-weight:600; transition:background .18s,border-color .18s; cursor:pointer; min-height:44px}
#hpc-protocol .tk-back:hover, #hpc-protocol .tk-next:hover{background:rgba(var(--acc-rgb),.16); border-color:var(--acc)}
#hpc-protocol .tk-back[disabled]{opacity:.35; cursor:default}
#hpc-protocol .tk-back[disabled]:hover{background:rgba(var(--acc-rgb),.08); border-color:rgba(var(--acc-rgb),.45)}
#hpc-protocol .tk-alt{display:block; margin:20px auto 0; background:none; border:none; color:var(--t3); font-size:13px; text-decoration:underline; text-underline-offset:3px; cursor:pointer; min-height:44px}
#hpc-protocol .tk-alt:hover{color:var(--t2)}
#hpc-protocol .tk-checklist{display:flex; flex-direction:column; gap:8px; margin-top:18px}
#hpc-protocol .tk-check{display:flex; align-items:center; gap:12px; text-align:left; padding:12px 14px; border:1px solid rgba(255,255,255,.10); border-radius:10px; background:rgba(255,255,255,.03); color:var(--t1); font-size:14px; line-height:1.4; cursor:pointer; min-height:44px; transition:border-color .18s,background .18s}
#hpc-protocol .tk-check:hover{border-color:rgba(var(--acc-rgb),.45)}
#hpc-protocol .tk-check.ticked{border-color:rgba(var(--acc-rgb),.55); background:rgba(var(--acc-rgb),.08)}
#hpc-protocol .tk-check-box{flex:0 0 auto; width:18px; height:18px; border:1.5px solid rgba(255,255,255,.35); border-radius:5px; position:relative}
#hpc-protocol .tk-check.ticked .tk-check-box{border-color:var(--acc); background:var(--acc)}
#hpc-protocol .tk-check.ticked .tk-check-box::after{content:''; position:absolute; left:5px; top:1px; width:5px; height:10px; border:solid #0b0d10; border-width:0 2px 2px 0; transform:rotate(45deg)}
#hpc-protocol .tk-check-label{flex:1}
#hpc-protocol .tk-check-count{margin-top:14px; text-align:center; font-family:var(--mn); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--t3)}
#hpc-protocol .tk-card{margin-top:14px}
#hpc-protocol .tk-card-title{font-family:var(--mn); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--acc-l); margin-bottom:10px}
#hpc-protocol .tk-card-text{font-size:17px; line-height:1.65; color:var(--t1); border-left:2px solid rgba(var(--acc-rgb),.45); padding-left:14px; margin:4px 0 0}
#hpc-protocol .tk-next[disabled]{opacity:.35; cursor:default}
#hpc-protocol .tk-next[disabled]:hover{background:rgba(var(--acc-rgb),.08); border-color:rgba(var(--acc-rgb),.45)}
#hpc-protocol .tk-drill{margin-top:14px; text-align:center}
#hpc-protocol .tk-drill-line{font-size:15px; line-height:1.6; color:var(--t2); margin:8px 4px 0; text-align:left}

/* "0 climbed": Cormorant oldstyle zero reads as a lowercase o — use lining
   tabular figures for the momentum counter */
#hpc-protocol .exp-mom .big{font-variant-numeric:lining-nums tabular-nums}

/* "secured" zone tag — give the earned state a legible inset chip */
#hpc-protocol .zone.done::after{background:rgba(var(--acc-rgb),.12); padding:2px 7px; border-radius:4px; width:max-content}

/* (C) Climb zone dividers were --ln (near-invisible at real scale) */
#hpc-protocol .zone{border-left:1px solid var(--ln-s)}
#hpc-protocol .zone:first-child{border-left:0}

/* (D) Mobile layout pass */
@media (max-width:640px){
  #hpc-protocol{padding:28px 16px 72px}
  /* tab nav: full-width, equal quarters, 44px min targets */
  #hpc-protocol .pnav{display:flex; width:100%; margin:24px 0 28px}
  #hpc-protocol .pnav button{flex:1; padding:12px 4px; letter-spacing:.06em}
  #hpc-protocol .kick{letter-spacing:.22em}
  #hpc-protocol .thead .greet{font-size:28px}
  #hpc-protocol .lastnight{width:100%}
  /* scoreboard: 4-across collapses to a hierarchy sandwich — Day (primary)
     full-width, Phase/Nights paired, Steps-today full-width (P2: the flat
     2x2 collapse erased the primary metric's dominance) */
  #hpc-protocol .instr{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* value text must shrink with its tile, never widen the grid (the 1fr
     min-content floor would otherwise push the 2-col grid past 375px);
     paired tiles (Phase/Nights) size down so 'Optimisation' fits un-clipped,
     full-width tiles (Day/Steps) keep their primary scale */
  #hpc-protocol .gauge .g-v{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  #hpc-protocol .gauge:nth-child(2) .g-v, #hpc-protocol .gauge:nth-child(3) .g-v{font-size:22px}
  #hpc-protocol .gauge{padding:18px}
  #hpc-protocol .gauge:nth-child(1), #hpc-protocol .gauge:nth-child(4){grid-column:1 / -1}
  /* hero cards breathe at 375px */
  #hpc-protocol .today, #hpc-protocol .checkin{padding:24px 20px}
  #hpc-protocol .t-title{font-size:32px}
  #hpc-protocol .ci-q{font-size:26px}
  #hpc-protocol .clarity{padding:22px 18px}
  #hpc-protocol .modal{padding:24px 20px}
  #hpc-protocol .m-h, #hpc-protocol .m-title{font-size:34px}
  /* quality scale: keep the 5-step shape, tighten the cells */
  #hpc-protocol .scale{gap:8px}
  #hpc-protocol .seg{padding:14px 6px; border-radius:11px}
  /* single-column stacks */
  #hpc-protocol .trends{grid-template-columns:1fr}
  #hpc-protocol .qacts{grid-template-columns:1fr}
  #hpc-protocol .pcard-open{grid-template-columns:1fr; gap:14px; padding:20px 22px}
  #hpc-protocol .pcard-open .q{justify-self:start; white-space:normal}
  /* locked pattern rows: the LOG-N tag was starving .lt into one-word lines */
  #hpc-protocol .lrow{flex-wrap:wrap; padding:16px 18px}
  #hpc-protocol .lrow .lt{flex:1 1 calc(100% - 21px)}
  #hpc-protocol .lrow .lf{width:100%; margin-left:21px}
  /* ledger compacts */
  #hpc-protocol .led-row{grid-template-columns:44px 1fr auto; gap:12px; padding:16px 18px}
  #hpc-protocol .led-row .num{font-size:24px}
  #hpc-protocol .led-row .lt{font-size:20px}
  #hpc-protocol .led-accl .mk{width:26px; height:26px}
  #hpc-protocol .anchors .ah{flex-wrap:wrap}
  /* iOS auto-zoom guard: form inputs must be 16px on mobile */
  #hpc-protocol .ci-form input, #hpc-protocol .ci-note-field, #hpc-protocol .ci-refl-field{font-size:16px}
  /* Deploy-audit decisions 2026-07-09 (M5): the weekly check-in number inputs
     rendered ~40px tall at 375px, under the 44px touch gate. */
  #hpc-protocol .ci-form input{min-height:44px}
  /* 44px touch targets (WCAG 2.2 / HPC gate) on every small control */
  #hpc-protocol .pnav button, #hpc-protocol .chip, #hpc-protocol .ql-seg,
  #hpc-protocol .segrow button, #hpc-protocol .anchors .flag,
  #hpc-protocol .ql-save-btn, #hpc-protocol .ql-reset-btn,
  #hpc-protocol .export-csv, #hpc-protocol .delete-all, #hpc-protocol .delete-confirm,
  #hpc-protocol .modal-ghost, #hpc-protocol .begin-btn,
  #hpc-protocol .ci-none-apply, #hpc-protocol .ci-one-applies,
  #hpc-protocol .wd-pattern, #hpc-protocol .wd-sound-opt,
  #hpc-protocol .prov .pstat.go, #hpc-protocol .exportrow a{
    display:inline-flex; align-items:center; justify-content:center; min-height:44px}
  #hpc-protocol .ci-none-apply, #hpc-protocol .ci-one-applies{display:flex; width:100%}
  /* wearable provider cards: 2-up grid instead of ragged flex-wrap */
  #hpc-protocol .provs{display:grid; grid-template-columns:1fr 1fr; gap:8px}
  #hpc-protocol .modal-ghost{display:flex}
  #hpc-protocol .prov .pstat.go{justify-content:flex-start}
  #hpc-protocol .exportrow a{justify-content:flex-start}
  /* HPC mobile font floor: nothing below 13px (sub-13px labels enumerated) */
  #hpc-protocol .demo, #hpc-protocol .demo button, #hpc-protocol .kick,
  #hpc-protocol .pnav button, #hpc-protocol .thead .greet small,
  #hpc-protocol .lastnight .tx span, #hpc-protocol .ql-seg,
  #hpc-protocol .ql-save-btn, #hpc-protocol .ql-hint, #hpc-protocol .ql-reset-btn,
  #hpc-protocol .gauge .g-l, #hpc-protocol .gauge .g-v small, #hpc-protocol .gauge .g-sub,
  #hpc-protocol .anchors .asub, #hpc-protocol .anchors .flag, #hpc-protocol .anch-n,
  #hpc-protocol .anch-item span, #hpc-protocol .steps .sl, #hpc-protocol .tag,
  #hpc-protocol .dcomplete-hint, #hpc-protocol .ci-time, #hpc-protocol .seg .l,
  #hpc-protocol .chip, #hpc-protocol .save, #hpc-protocol .ci-foot .streak, #hpc-protocol .dc-hint,
  #hpc-protocol .clarity-h .lab, #hpc-protocol .rlabels span, #hpc-protocol .clarity-cap b,
  #hpc-protocol .trend .th, #hpc-protocol .trend .tv small,
  #hpc-protocol .pcard-open .pf, #hpc-protocol .pcard-open .q, #hpc-protocol .lrow .lf,
  #hpc-protocol .integrity, #hpc-protocol .exportrow, #hpc-protocol .wear-h .ws,
  #hpc-protocol .prov .pstat, #hpc-protocol .wear-note,
  #hpc-protocol .exp-cap, #hpc-protocol .exp-mom .sm,
  #hpc-protocol .zone .zn, #hpc-protocol .zone.done::after, #hpc-protocol .nextcamp,
  #hpc-protocol .led-row .ls, #hpc-protocol .led-row .st,
  #hpc-protocol .led-accl .mk, #hpc-protocol .led-accl .as, #hpc-protocol .led-camp,
  #hpc-protocol .about .ac, #hpc-protocol .qact .qs,
  #hpc-protocol .modal-x, #hpc-protocol .modal-lab,
  #hpc-protocol .qa-count, #hpc-protocol .qa-cite-text, #hpc-protocol .cited-badge,
  #hpc-protocol .qa-no-cite, #hpc-protocol .ci-verdict, #hpc-protocol .ci-change-label,
  #hpc-protocol .ci-cite, #hpc-protocol .ci-safety-note, #hpc-protocol .consent-copy,
  #hpc-protocol .m-eyebrow, #hpc-protocol .m-stats b, #hpc-protocol .m-stats span, #hpc-protocol .modal-ghost,
  #hpc-protocol .toast small, #hpc-protocol .segrow button, #hpc-protocol .wd-timer,
  #hpc-protocol .begin-btn, #hpc-protocol .export-csv, #hpc-protocol .delete-all,
  #hpc-protocol .delete-confirm, #hpc-protocol .fw-pill,
  #hpc-protocol .cta-full, #hpc-protocol .cta-summit, #hpc-protocol .ci-dip-disclosure,
  #hpc-protocol .wd-pattern, #hpc-protocol .wd-sound-opt, #hpc-protocol .wd-begin,
  #hpc-protocol .ci-note-count, #hpc-protocol .ci-note-hint, #hpc-protocol .ci-bool-opt,
  #hpc-protocol .ci-history-row b{
    font-size:13px}
}

/* Deploy-audit Phase A 2026-07-09 (M5/M8): the check-in submit and the consent
   agree button — the very first tap a new user makes — join the 44px touch-target
   and 13px font-floor guarantees; the 5-tab pnav wraps instead of squeezing tabs
   below their text width at 375px. */
@media (max-width:640px){
  #hpc-protocol .ci-submit, #hpc-protocol .consent-agree{
    display:inline-flex; align-items:center; justify-content:center; min-height:44px; font-size:13px}
  #hpc-protocol .pnav button{white-space:nowrap}
  #hpc-protocol .anchors-toggle{min-height:44px}
  #hpc-protocol .anchors .chev{font-size:13px}
  #hpc-protocol .cite-link{font-size:13px}
  /* Run-3 audit (trading BLOCKER): long quality labels ('Process-first',
     'Razor sharp') clipped inside their fifth of a 375px scale — allow the
     label to shrink and wrap instead of overflowing. Both scales share the
     fix (.ql-seg quick-log, .seg .l diary). */
  #hpc-protocol .ql-seg, #hpc-protocol .seg{min-width:0}
  /* Eval 2026-07-11 (mobile lens): overflow-wrap:break-word alone split labels
     mid-syllable ('DEPL/ETED', 'RESI/STIN/G') on the daily quality scale — the
     most-tapped control. Add hyphenation so breaks land on syllable boundaries,
     and drop the .06em uppercase tracking to 0 on mobile to buy back width so
     more labels stay on one line. 13px floor kept. */
  #hpc-protocol .ql-seg, #hpc-protocol .seg .l{white-space:normal; overflow-wrap:break-word; line-height:1.3;
    hyphens:auto; -webkit-hyphens:auto}
  #hpc-protocol .ql-seg{letter-spacing:0; padding:10px 2px}
  /* Deploy-audit batch 9 (social M5 BLOCKER): the 44px touch rule makes
     .ql-seg an inline-flex container, and its .ql-lbl span child kept
     min-width:auto — long authored labels ('Attuned', 'Radically candid')
     ran together instead of wrapping. Let the label shrink and fill. */
  #hpc-protocol .ql-lbl{min-width:0; width:100%; white-space:normal; overflow-wrap:break-word;
    hyphens:auto; -webkit-hyphens:auto}
}

/* (E) <=480px: the expedition arc goes decorative — header + zone labels
   leave the absolute overlay and stack in normal flow (DOM order: caption,
   momentum, arc, zone strip), each zone carrying its phase-accent tick. */
@media (max-width:480px){
  #hpc-protocol .exp-cap{position:static; display:block; padding:16px 16px 0}
  #hpc-protocol .exp-mom{position:static; text-align:left; padding:6px 16px 12px}
  #hpc-protocol .zones{position:static; display:grid; grid-template-columns:1fr; gap:10px; padding:4px 16px 16px}
  #hpc-protocol .zone{border-left:3px solid var(--ln-s); border-radius:2px; padding:8px 0 8px 14px}
  #hpc-protocol .zone:first-child{border-left:3px solid var(--acc)}
  #hpc-protocol .zone.z1{border-left-color:var(--acc)}
  #hpc-protocol .zone.z2{border-left-color:var(--p-two)}
  #hpc-protocol .zone.z3{border-left-color:var(--p-arch)}
  /* Audit fix wave 2026-07-07: 320px-class devices — momentum counter and
     modal headings were unshrunk; milestone stats could overflow */
  #hpc-protocol .exp-mom .big{font-size:26px}
  #hpc-protocol .scrim{padding:12px}
  #hpc-protocol .modal-h, #hpc-protocol .m-title{font-size:28px}
  #hpc-protocol .m-stats{flex-wrap:wrap; gap:14px}
  #hpc-protocol .led-row .lt{font-size:17px}
}

/* ═══ Phase-2 hub build 2026-07-07: milestone review (mr-*) ═══════════════
   The consumer's own logged data rendered inside the milestone modal card.
   Every value is Store-computed at render time. Append-only section; all
   selectors #hpc-protocol-scoped per the CSS contract. */
#hpc-protocol .mr-review{position:relative; text-align:left; border-top:1px solid var(--ln-s); margin-top:6px; padding-top:18px}
#hpc-protocol .mr-h{font-family:var(--mn); font-size:11.5px; letter-spacing:.20em; text-transform:uppercase; color:var(--t3); margin:0 0 6px}
#hpc-protocol .mr-adherence{margin-bottom:18px}
#hpc-protocol .mr-count{font-family:var(--ds); font-size:24px; color:var(--t1); font-variant-numeric:oldstyle-nums; margin:0 0 8px}
#hpc-protocol .mr-bar{height:4px; border-radius:2px; background:rgba(var(--acc-rgb),.14); overflow:hidden}
#hpc-protocol .mr-fill{height:100%; border-radius:2px; background:var(--acc); transition:width .5s ease}
#hpc-protocol .mr-quality{margin-bottom:18px}
#hpc-protocol .mr-dots{display:flex; flex-wrap:wrap; gap:4px; margin:4px 0 8px}
/* Design-fold 2026-07-08 (ruling 5, audit A15): quality ramp is hue+fill,
   never opacity — steps 1–2 hollow rings, 3–5 filled, 5 larger with glow.
   Step 1's #8A6A5E is the ruling's fixed neutral (warn mixed to neutral);
   it is deliberately accent-independent and survives pillar swaps. */
#hpc-protocol .mr-dot{width:8px; height:8px; border-radius:50%; box-sizing:border-box; background:transparent; flex:none}
#hpc-protocol .mr-dot[data-q="1"]{border:1.5px solid #8A6A5E}
#hpc-protocol .mr-dot[data-q="2"]{border:1.5px solid rgba(157,176,197,.6)}
#hpc-protocol .mr-dot[data-q="3"]{background:var(--t3)}
#hpc-protocol .mr-dot[data-q="4"]{background:var(--acc-d)}
#hpc-protocol .mr-dot[data-q="5"]{width:9px; height:9px; background:var(--acc); box-shadow:0 0 4px rgba(var(--acc-rgb),.5)}
/* Design-fold 2026-07-08 (ruling 8): supporting data rows are DM Sans 14px
   (inherited body face) — the mono walls retired; ruling 6/audit A18: the
   check-in verdict (earned, Cormorant italic t1) outranks its cite-link. */
#hpc-protocol .mr-avg{font-size:14px; color:var(--t2); margin:0}
#hpc-protocol .mr-thin{font-size:14px; color:var(--t3); margin:0 0 18px}
#hpc-protocol .mr-chips{margin-bottom:18px}
#hpc-protocol .mr-chip{font-size:14px; color:var(--t2); margin:0 0 4px}
#hpc-protocol .mr-verdict{margin-bottom:18px}
#hpc-protocol .mr-verdict-line{font-family:var(--ds); font-style:italic; font-size:17px; color:var(--t1); line-height:1.5; margin:0 0 6px}
#hpc-protocol .mr-coach{margin-bottom:16px}
#hpc-protocol .mr-coach-copy{font-family:var(--ds); font-size:19px; font-style:italic; color:var(--t1); line-height:1.55; margin:0 0 6px}
#hpc-protocol .mr-integrity{font-family:var(--mn); font-size:12.5px; letter-spacing:.1em; color:var(--t3); margin:0; padding-top:12px; border-top:1px solid var(--ln-s)}

/* Mobile floor (separate block — never touch the first ≤640px block): all
   mr-* small text lifts to the 13px floor. No interactive mr-* elements
   exist (cite links reuse the existing .cite-link contract). */
@media (max-width:640px){
  #hpc-protocol .mr-h, #hpc-protocol .mr-integrity{font-size:13px}
}

/* ═══ Phase-2b 2026-07-07: per-task written response (.step-note) ═════════
   Optional free-text under each Today step — a task that asks for a score
   or an observation gets a place to write it. Mirrors the .ci-note-field
   contract (44px+ target via min-height, 16px on mobile = no iOS zoom). */
#hpc-protocol .step-note{display:block; width:100%; resize:vertical; min-height:44px; margin:6px 0 14px; font-family:var(--bd); font-size:14px; line-height:1.5; color:var(--t1); background:rgba(13,20,32,.55); border:1px solid var(--ln-s); border-radius:10px; padding:11px 14px; transition:border-color .16s}
#hpc-protocol .step-note:hover{border-color:var(--ln-h)}
#hpc-protocol .step-note:focus{border-color:var(--acc)}
#hpc-protocol .step-note:focus:not(:focus-visible){outline:none}
#hpc-protocol .step-note::placeholder{color:var(--t3)}
@media (max-width:640px){
  #hpc-protocol .step-note{font-size:16px}
}

/* ═══ Phase-2c 2026-07-07: structured per-task capture ════════════════════
   Authored capture specs render as one-tap standardised inputs under the
   step row: .step-rate (segmented numeric scale, clones the .ql-seg
   contract) and .step-chips (multi-select, clones the .chip contract).
   44px targets by construction; selected state via aria attributes. */
#hpc-protocol .step-rate{display:flex; gap:8px; margin:6px 0 4px}
#hpc-protocol .step-rate-btn{flex:1; min-height:44px; padding:10px 4px; border:1px solid var(--ln-s); border-radius:10px; text-align:center; background:rgba(13,20,32,.5); font-family:var(--mn); font-size:15px; color:var(--t2); transition:border-color .18s,background .18s,color .18s,transform .15s cubic-bezier(.22,.1,.36,1)}
#hpc-protocol .step-rate-btn:hover{border-color:var(--ln-h); color:var(--t2)}
#hpc-protocol .step-rate-btn[aria-checked="true"]{border-color:var(--acc); color:var(--acc-l); background:rgba(var(--acc-rgb),.1)}
#hpc-protocol .step-rate-ends{display:flex; justify-content:space-between; margin:2px 2px 14px; font-family:var(--bd); font-size:13px; color:var(--t2)}
#hpc-protocol .step-chips{display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 14px}
#hpc-protocol .step-chip{min-height:44px; font-family:var(--bd); font-size:14.5px; padding:10px 16px; border-radius:24px; border:1px dashed var(--ln-h); background:rgba(13,20,32,.4); color:var(--t2); transition:border-color .18s,color .18s,background .18s,box-shadow .18s}
#hpc-protocol .step-chip:hover{border-color:rgba(240,240,240,.36); color:var(--t2)}
#hpc-protocol .step-chip[aria-pressed="true"]{border-style:solid; border-color:var(--acc); color:var(--acc-l); background:rgba(var(--acc-rgb),.09); box-shadow:0 0 16px -4px rgba(var(--acc-rgb),.28)}
@media (max-width:640px){
  #hpc-protocol .step-chip{font-size:14.5px}
}

/* ═══ Phase-3b 2026-07-07: hub IA — My progress / The science / Related ═══
   All selectors #hpc-protocol-scoped; append-only section. */

/* My progress: composed sub-blocks get breathing room between them. */
#hpc-protocol .prog-climb{margin-bottom:28px}
#hpc-protocol .prog-checkins{margin-bottom:28px}
#hpc-protocol .prog-checkins .ci-history{border:1px solid var(--ln-s); border-radius:12px; padding:16px 18px; background:rgba(13,20,32,.5)}
#hpc-protocol .prog-patterns{margin-bottom:8px}

/* The science: pillar cards + shared qa accordion + check-in disclosure. */
#hpc-protocol .sci-h{font-family:var(--mn); font-weight:400; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--t3); margin:26px 0 12px}
#hpc-protocol .sci-h:first-child{margin-top:0}
#hpc-protocol .sci-pillars{display:grid; grid-template-columns:1fr 1fr; gap:12px}
#hpc-protocol .sci-pillar{border:1px solid var(--ln-s); border-radius:12px; padding:16px 18px; background:rgba(13,20,32,.5)}
#hpc-protocol .sci-p-name{font-family:var(--ds); font-weight:400; font-size:19px; color:var(--t1); margin:0 0 6px}
#hpc-protocol .sci-p-desc{font-size:14px; line-height:1.6; color:var(--t2); margin:0 0 10px}
#hpc-protocol .sci-p-cite{margin:0}
#hpc-protocol .sci-qa{display:flex; flex-direction:column; gap:8px}
#hpc-protocol .sci-bands{display:flex; flex-direction:column; gap:10px}
#hpc-protocol .sci-band{border:1px solid var(--ln-s); border-left:3px solid rgba(var(--acc-rgb),.5); border-radius:10px; padding:12px 16px; background:rgba(13,20,32,.5)}
#hpc-protocol .sci-band-v{display:block; font-size:14.5px; color:var(--acc-l); margin:0 0 4px}
#hpc-protocol .sci-band-r{font-size:14px; line-height:1.6; color:var(--t2); margin:0}
#hpc-protocol .sci-band-cite{margin:12px 0 0}

/* Related: authored cards. */
#hpc-protocol .rel-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
#hpc-protocol .rel-card{display:flex; flex-direction:column; gap:6px; border:1px solid var(--ln-s); border-radius:12px; padding:16px 18px; background:rgba(13,20,32,.5); text-decoration:none; transition:border-color .16s, background .16s}
#hpc-protocol .rel-card:hover{border-color:var(--acc); background:rgba(var(--acc-rgb),.06)}
#hpc-protocol .rel-kind{font-family:var(--mn); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--acc)}
#hpc-protocol .rel-label{font-family:var(--ds); font-weight:400; font-size:19px; color:var(--t1); line-height:1.3; margin:0}
#hpc-protocol .rel-note{font-size:13.5px; line-height:1.55; color:var(--t2)}

/* Post-90 maintenance mode (Today view, above the scoreboard). */
#hpc-protocol .maint{border:1px solid rgba(var(--acc-rgb),.4); border-radius:14px; padding:20px 22px; margin-bottom:22px; background:linear-gradient(135deg,rgba(var(--acc-rgb),.1),rgba(13,20,32,.4))}
#hpc-protocol .maint-title{font-family:var(--ds); font-style:italic; font-size:24px; color:var(--acc-l); margin:0 0 8px}
#hpc-protocol .maint-note{font-size:14.5px; line-height:1.6; color:var(--t2); margin:0 0 14px}
#hpc-protocol .maint-h{font-family:var(--mn); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--t3); margin:0 0 8px}
#hpc-protocol .maint-habits{list-style:none; margin:0 0 14px; padding:0}
#hpc-protocol .maint-habit{font-size:14.5px; line-height:1.7; color:var(--t1); padding-left:16px; position:relative}
#hpc-protocol .maint-habit::before{content:""; position:absolute; left:0; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--acc)}
#hpc-protocol .maint-link{display:inline-block; font-family:var(--mn); font-size:13px; letter-spacing:.04em; color:var(--acc-l); text-decoration:none; border:1px solid rgba(var(--acc-rgb),.45); border-radius:10px; padding:11px 16px; min-height:44px; transition:border-color .16s}
#hpc-protocol .maint-link:hover{border-color:var(--acc)}

/* Milestone review capture-engagement block. */
#hpc-protocol .mr-capture{margin-bottom:18px}

/* Mobile: single-column grids + 13px floor for new small text. */
@media (max-width:640px){
  #hpc-protocol .sci-pillars, #hpc-protocol .rel-grid{grid-template-columns:1fr}
  #hpc-protocol .sci-h, #hpc-protocol .rel-kind, #hpc-protocol .maint-h,
  #hpc-protocol .rel-note, #hpc-protocol .maint-link{font-size:13px}
}


/* ═══ AUDIT fix wave 2026-07-07 (10-agent pre-WP audit) ═══════════════════ */
/* Milestone review trigger — the review previously had NO production door. */
#hpc-protocol .m-preview-btn{display:block; width:100%; min-height:44px; margin-top:14px; padding:12px 16px; border:1px solid rgba(var(--acc-rgb),.45); border-radius:12px; background:rgba(var(--acc-rgb),.06); font-family:var(--mn); font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--acc-l); cursor:pointer; transition:border-color .16s, background .16s}
#hpc-protocol .m-preview-btn:hover{border-color:var(--acc); background:rgba(var(--acc-rgb),.12)}
/* Coach paragraph now leads the milestone card (5 auditors: payoff was buried) */
#hpc-protocol .modal > .mr-coach{text-align:left; margin:2px 0 20px; padding:14px 16px; border:1px solid var(--ln-s); border-left:3px solid var(--acc); border-radius:10px; background:rgba(13,20,32,.5)}
/* The user's real adherence number outranks the decorative stats (was 24px vs 31px) */
#hpc-protocol .mr-count{font-size:31px}
/* Scroll affordance inside the milestone modal — content continues below */
#hpc-protocol .mr-scroll-fade{position:sticky; bottom:-2px; height:34px; margin-top:-34px; background:linear-gradient(transparent, rgba(13,20,32,.9)); pointer-events:none}
@media (max-width:640px){
  /* tab bar: long per-protocol labels wrapped to 3 lines — scroll, never wrap */
  #hpc-protocol .pnav{flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none}
  /* Deploy-audit flow m16: hide the Webkit overlay-scrollbar flash on momentum
     scroll (the scrollbar-width:none above covers Firefox/Blink only). */
  #hpc-protocol .pnav::-webkit-scrollbar{display:none}
  #hpc-protocol .pnav button{white-space:nowrap; flex:0 0 auto}
  /* the most-tapped CTA was 4px under the product's own 44px gate */
  #hpc-protocol .save{min-height:44px}
  /* press feedback on the primary daily action (hover-only before) */
  #hpc-protocol .row:active{background:rgba(240,240,240,.06)}
}

/* ═══ Capture+Insights loop 2026-07-08: one-tap boolean capture ═══════════ */
/* Deploy-audit batch 5 (habits M8/m10): visible label for boolean captures —
   the authored cap.label was aria-only, leaving sighted users with unlabelled
   Held/Not-today pills. Reads as the question the pills answer. */
/* Deploy-audit batch 6 (identity M5/m10): long multi-word chip labels must
   wrap inside the pill instead of relying on implicit flex behaviour. */
#hpc-protocol .step-chip{max-width:100%; white-space:normal; overflow-wrap:break-word}
/* ── The Ascent art direction 2026-07-09 ────────────────────────────────
   Imagery on the editorial frame + earned moments only. The tint layer
   (ground gradient + --acc wash) is what makes 42 different photographs
   read as one system. No backdrop-filter, no animation. */
#hpc-protocol .pp-hero{position:relative; width:100%; aspect-ratio:21/9; max-height:340px; overflow:hidden; border-radius:14px; margin:0 0 22px}
#hpc-protocol .pp-hero img{width:100%; height:100%; object-fit:cover; display:block}
#hpc-protocol .pp-hero-tint{position:absolute; inset:0; pointer-events:none; background:linear-gradient(to top, rgba(5,8,16,.92), rgba(5,8,16,.25) 45%, rgba(5,8,16,.15)), linear-gradient(rgba(var(--acc-rgb),.10), rgba(var(--acc-rgb),.10))}
#hpc-protocol .mr-art{position:relative; aspect-ratio:3/1; overflow:hidden; border-radius:12px; margin:0 0 18px}
#hpc-protocol .mr-art img{width:100%; height:100%; object-fit:cover; display:block}
#hpc-protocol .mr-art-tint{position:absolute; inset:0; pointer-events:none; background:linear-gradient(to top, rgba(13,20,32,.85), rgba(13,20,32,.15) 55%), linear-gradient(rgba(var(--acc-rgb),.10), rgba(var(--acc-rgb),.10))}
#hpc-protocol .summit-art{position:relative; aspect-ratio:16/9; max-height:260px; overflow:hidden; border-radius:12px; margin:0 0 18px}
#hpc-protocol .summit-art img{width:100%; height:100%; object-fit:cover; display:block}
#hpc-protocol .summit-art-tint{position:absolute; inset:0; pointer-events:none; background:linear-gradient(to top, rgba(13,20,32,.9), rgba(13,20,32,.2) 50%), linear-gradient(rgba(var(--acc-rgb),.10), rgba(var(--acc-rgb),.10))}

/* Deploy-audit batch 8: numeric segmented check-in options — reuse ci-bool
   visuals; numeric pills are narrower than Yes/No. */
#hpc-protocol .ci-seg{display:flex; flex-wrap:wrap; gap:8px}
#hpc-protocol .ci-seg-opt{min-width:44px; padding-left:12px; padding-right:12px}
/* Deploy-audit batch 8 (learning polish): style the noscript fallback card */
#hpc-protocol .pp-noscript{font-family:Georgia,serif; font-size:15px; line-height:1.5; padding:20px; border:1px solid rgba(120,140,170,.3); border-radius:12px}
/* Deploy-audit batch 6 (identity m17): delete-all disclosure line */
#hpc-protocol .dc-hint{display:block; width:100%; font-family:var(--mn); font-size:12.5px; letter-spacing:.06em; color:var(--t3)}
/* Deploy-audit batch 6: boot-failure fallback message (skeleton catch) */
#hpc-protocol .boot-fallback{font-family:var(--bd); font-size:15px; color:var(--t2); padding:24px}
#hpc-protocol .step-bool-lbl{display:block; margin:10px 0 0 21px; font-family:var(--bd); font-size:13.5px; color:var(--t2)}
#hpc-protocol .step-bool{display:flex; gap:8px; margin:8px 0 4px 21px}
#hpc-protocol .step-bool-btn{flex:0 1 auto; min-height:44px; padding:10px 18px; font-family:var(--bd,inherit); font-size:14.5px; color:var(--t2); background:rgba(13,20,32,.4); border:1px solid var(--ln-h); border-radius:24px; transition:.16s}
#hpc-protocol .step-bool-btn:hover{border-color:rgba(var(--acc-rgb),.45); background:rgba(var(--acc-rgb),.08)}
#hpc-protocol .step-bool-btn[aria-checked="true"]{border-color:var(--acc); background:rgba(var(--acc-rgb),.16); color:var(--t1)}

/* ═══ Task 7 (A5/A11): saved-feedback + anchor hints 2026-07-08 ══════════ */
#hpc-protocol .cap-saved{display:block; margin:4px 0 0 21px; font-family:var(--mn); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--t3); min-height:16px}
#hpc-protocol .step-hint, #hpc-protocol .ci-hint{display:block; margin:4px 0 0 21px; font-family:var(--mn); font-size:12.5px; letter-spacing:.08em; color:var(--t3)}
@media (max-width:640px){
  #hpc-protocol .cap-saved, #hpc-protocol .step-hint, #hpc-protocol .ci-hint,
  #hpc-protocol .cap-flywheel, #hpc-protocol .assoc-clause,
  #hpc-protocol .assoc-h{font-size:13px}
}
/* Deploy-audit bio 2026-07-09 (M5/M7): a rating scale wider than ~5 points
   compressed each .step-rate-btn below the 44px touch gate at 375px (nine
   buttons ≈ 27px). Wrap wide scales to a second row and hold each button at
   ≥44px; 1–5 scales still fit one row. Fixes Days 22/29/38/43/46/52/90 and
   every other 6-plus-point capture across the corpus. */
@media (max-width:640px){
  #hpc-protocol .step-rate{flex-wrap:wrap}
  #hpc-protocol .step-rate-btn{flex:0 1 auto; min-width:44px}
}
#hpc-protocol .mr-assoc{margin-bottom:18px}

/* ═══ CP2 fix wave 2026-07-08 ═══════════════════════════════════════════════ */
#hpc-protocol .cap-flywheel{font-family:var(--mn); font-size:12.5px; letter-spacing:.08em; color:var(--t3); margin:10px 0 0 21px}
#hpc-protocol .assoc-sub{font-family:var(--bd); font-size:13px; color:var(--t3); margin:0 0 8px}

/* ═══ Road-to-10/10 F4 2026-07-11: pnav scroll affordance ═══════════════════
   .pnav is its own horizontal scroll container at 640px (overflow-x:auto,
   earlier block), so the old absolute-positioned right fade scrolled away
   with the content and its colour matched the nav background. These cues are
   sticky flex items pinned to the scrollport edges — the .mr-scroll-fade
   mechanism, horizontal — consuming no layout space via negative margins.
   Scrim + near-white chevron SVG; the accent token cannot reach inside a
   data-URI and the cue should not drift per protocol theme. Visibility is
   runtime-driven: boot toggles .pnav-more-l / .pnav-more-r from scroll
   metrics, so each cue shows only while more tabs exist in that direction
   and the scroll-end state reads as complete. */
@media (max-width:640px){
  #hpc-protocol .pnav::before, #hpc-protocol .pnav::after{
    content:""; position:sticky; z-index:1; align-self:stretch; flex:0 0 34px;
    pointer-events:none; opacity:0; transition:opacity .18s ease;
    background-repeat:no-repeat}
  #hpc-protocol .pnav::before{
    left:0; margin-right:-34px; border-radius:9px 0 0 9px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M9 3 5 7 9 11' fill='none' stroke='%23F6F4EE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='.9'/%3E%3C/svg%3E"),
      linear-gradient(to right, rgba(7,12,20,.94), rgba(7,12,20,0));
    background-position:left 6px center, left top;
    background-size:14px 14px, 100% 100%}
  #hpc-protocol .pnav::after{
    right:0; margin-left:-34px; border-radius:0 9px 9px 0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M5 3 9 7 5 11' fill='none' stroke='%23F6F4EE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='.9'/%3E%3C/svg%3E"),
      linear-gradient(to left, rgba(7,12,20,.94), rgba(7,12,20,0));
    background-position:right 6px center, right top;
    background-size:14px 14px, 100% 100%}
  #hpc-protocol .pnav.pnav-more-l::before{opacity:1}
  #hpc-protocol .pnav.pnav-more-r::after{opacity:1}
}

/* ═══ Road-to-10/10 F1 2026-07-11: "Your record" — readable notes feed ══════
   Device-only reflections rendered back to their owner inside My log.
   Serif-italic register matches .early-reward; caps pills mirror .chip at
   rest but are inert spans. Runtime fixed words only, claim-free. */
#hpc-protocol .note-feed{margin-top:26px; border:1px solid var(--ln-s); border-radius:16px; padding:24px 26px; background:linear-gradient(180deg,rgba(17,29,48,.5),rgba(11,20,33,.6))}
#hpc-protocol .nf-h{font-family:var(--ds); font-size:22px; color:#F6F4EE; margin:0}
#hpc-protocol .nf-hint{display:block; font-family:var(--mn); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--t3); margin:6px 0 0}
#hpc-protocol .nf-empty{font-family:var(--ds); font-style:italic; font-size:17px; line-height:1.5; color:var(--t3); margin:18px 0 0}
#hpc-protocol .nf-body{margin-top:6px}
#hpc-protocol .nf-entry{border-top:1px solid var(--ln); padding:18px 0 4px; margin-top:16px}
#hpc-protocol .nf-body .nf-entry:first-child{border-top:0; margin-top:10px; padding-top:6px}
#hpc-protocol .nf-head{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline}
#hpc-protocol .nf-date{font-family:var(--mn); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--acc-l)}
#hpc-protocol .nf-day{font-family:var(--mn); font-size:11.5px; letter-spacing:.08em; color:var(--t3)}
#hpc-protocol .nf-text{font-family:var(--ds); font-style:italic; font-size:17px; line-height:1.55; color:var(--t2); margin:10px 0 0}
#hpc-protocol .nf-task{margin:12px 0 0}
#hpc-protocol .nf-task .nf-text{margin-top:4px}
#hpc-protocol .nf-task-l{display:block; font-family:var(--mn); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--t3)}
#hpc-protocol .nf-caps{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0}
#hpc-protocol .nf-cap{font-family:var(--mn); font-size:11px; letter-spacing:.05em; padding:7px 12px; border:1px solid var(--ln-s); border-radius:999px; color:var(--t3); background:rgba(13,20,32,.5)}
#hpc-protocol .nf-cap-more{color:var(--acc-l); border-color:rgba(var(--acc-rgb),.35)}
#hpc-protocol .nf-more{font-family:var(--mn); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--t3); margin-top:14px; min-height:44px; padding:0 6px; transition:color .16s}
#hpc-protocol .nf-more:hover{color:var(--t2)}
@media (max-width:640px){
  #hpc-protocol .nf-hint, #hpc-protocol .nf-date, #hpc-protocol .nf-day,
  #hpc-protocol .nf-task-l, #hpc-protocol .nf-cap, #hpc-protocol .nf-more{font-size:13px}
  #hpc-protocol .note-feed{padding:20px 18px}
}

/* ═══ Road-to-10/10 F3 2026-07-11: day-targeted inline crisis signpost ══════
   Emitted by renderToday above the steps group on owner-approved days only
   (crisis_resource.days). Inherits the full .crisis-note warn card; this
   class adds Today-card spacing. */
#hpc-protocol .crisis-inline{margin:20px 0 4px}

/* ── Toolkits 2026-07-11 — mobile ─────────────────────────────────────── */
@media (max-width:640px){
  #hpc-protocol .tk-step-text{font-size:16px}
  #hpc-protocol .tk-card-text{font-size:16px}
  #hpc-protocol .tk-clock{font-size:20px}
  #hpc-protocol .tk-nav{gap:8px}
  #hpc-protocol .tk-back, #hpc-protocol .tk-next{padding:12px 18px; flex:1}
}