/* Powers Ladder - PUBLIC surface (2026-09-05, Jason directive: "customers
   receive what powers their AI has now").

   Renders the sanitized public_view() payload from
   GET /api/public/powers/<slug> using the SAME pw-* class names and visual
   language as the owner desk's rail (prep/ai-desk.html pwRenderRail /
   pwRenderFull) - no new visual language invented. This file only supplies
   the CSS custom properties those classes read, scoped under .pw-public so
   it never leaks onto a page (like the desk) that already defines its own.

   THE TALK PAGE IS A FIXED, NON-SCROLLING APP SHELL (html,body{overflow:
   hidden}, every panel position:fixed - found live 2026-09-05 while wiring
   this in: a plain in-flow "below the fold" block never became reachable,
   because there is no fold to scroll past). So the talk-page surface is a
   small edge tab (.pw-tab, closed by default - the talk experience really is
   unchanged) that opens a full-screen overlay (.pw-overlay) on tap, mirroring
   the exact pattern the page already uses for its Tasks/Calendar panels
   (prep/_masters/talk-template.html .ws-panel: position:fixed, inset, its
   own overflow-y:auto). The office landing (prep/_shared/profile-shell.js/
   .css, a normal scrolling page) does NOT use this file - it renders pips
   inline in the health strip instead.

   Degrades to nothing (same rule as the desk rail): a 404/network failure/
   empty payload leaves the tab hidden, never a broken affordance.
*/
.pw-tab{
  position:fixed;right:0;top:54%;transform:translateY(-50%);z-index:60;
  display:flex;align-items:baseline;gap:2px;padding:9px 8px 9px 11px;
  border:1px solid rgba(148,163,184,0.28);border-right:none;
  border-radius:11px 0 0 11px;background:rgba(17,23,38,0.92);color:#f4f6fb;
  font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:10px;font-weight:700;letter-spacing:.02em;cursor:pointer;
  box-shadow:-3px 2px 14px rgba(0,0,0,0.3);
  writing-mode:vertical-rl;text-orientation:mixed;
}
.pw-tab[hidden]{display:none}
.pw-tab b{font-size:13px;font-weight:800}
html.light-mode .pw-tab{background:rgba(255,255,255,0.95);color:#0f172a;
  border-color:#dde2ee;box-shadow:-3px 2px 14px rgba(15,23,42,0.15)}

.pw-overlay{
  position:fixed;inset:0;z-index:9600;display:flex;justify-content:center;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:rgba(5,8,16,0.78);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  padding:60px 16px 48px;
}
.pw-overlay[hidden]{display:none}
.pw-overlay-close{
  /* top:62px, not 14px - the page's own top bar (sip-top-bar, z:9700, 0-52px
     tall) sits ABOVE this overlay's z:9600 and was covering a 14px-from-top
     close button, so a tap there hit the theme toggle instead - found live
     testing this on jason.aiexec.me/prep/henry-talk.html. */
  position:fixed;top:62px;right:14px;z-index:9601;width:34px;height:34px;
  border-radius:50%;border:1px solid rgba(148,163,184,0.35);
  background:rgba(11,22,40,0.9);color:#e2e8f0;font-size:19px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
}

.pw-public{
  --panel:#111726; --panel-2:#161d30; --line:#2c3550; --line-soft:#232b42;
  --ink:#f4f6fb; --dim:#b8c2d4; --dimmer:#93a1b8;
  --accent:#8b93ff; --accent-solid:#5b61e8; --accent-soft:rgba(139,147,255,0.16);
  --good:#4ade80; --good-soft:rgba(74,222,128,0.16);
  --wait:#fcd34d; --wait-soft:rgba(252,211,77,0.15);
  width:100%;max-width:480px;margin:0;align-self:flex-start;
  font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;
}
html.light-mode .pw-public{
  --panel:#ffffff; --panel-2:#f3f5fa; --line:#dde2ee; --line-soft:#e8ebf4;
  --ink:#0f172a; --dim:#4b5670; --dimmer:#6b7690;
  --accent:#5b61e8; --accent-solid:#4347c4; --accent-soft:rgba(91,97,232,0.10);
  --good:#16a34a; --good-soft:rgba(22,163,74,0.12);
  --wait:#b45309; --wait-soft:rgba(180,83,9,0.12);
}
.pw-public .pw-rail{background:var(--panel);border:1px solid var(--line);
  border-radius:16px;padding:20px 22px 22px}
.pw-public .pw-eyebrow{font-size:10.5px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--dimmer)}
.pw-public .pw-score{display:flex;align-items:baseline;gap:6px;margin-top:8px}
.pw-public .pw-score b{font-size:27px;font-weight:800;letter-spacing:-.02em;
  color:var(--ink);line-height:1}
.pw-public .pw-score span{font-size:12.5px;color:var(--dim)}
.pw-public .pw-pips{display:flex;gap:5px;margin:14px 0 4px}
.pw-public .pw-pip{height:4px;flex:1 1 0;border-radius:99px;
  background:var(--line-soft);position:relative;overflow:hidden}
.pw-public .pw-pip i{position:absolute;left:0;top:0;bottom:0;display:block;
  background:var(--good);border-radius:99px}
.pw-public .pw-pip i.pw-att{background:var(--accent)}
.pw-public .pw-chap{font-size:12.5px;font-weight:800;color:var(--ink);
  margin:16px 0 1px}
.pw-public .pw-chapsub{font-size:11px;color:var(--dimmer);margin-bottom:9px;
  letter-spacing:.03em;text-transform:uppercase}
.pw-public .pw-list{list-style:none;margin:0;padding:0}
.pw-public .pw-rung{position:relative;padding:0 0 12px 24px;margin:0}
.pw-public .pw-rung:last-child{padding-bottom:0}
.pw-public .pw-rung::before{content:'';position:absolute;left:6px;top:15px;
  bottom:-1px;width:0;border-left:1.5px dashed var(--line)}
.pw-public .pw-rung:last-child::before{display:none}
.pw-public .pw-rung.st-proven::before{border-left-color:var(--good);border-left-style:solid}
.pw-public .pw-rung.st-attested::before{border-left-color:var(--accent);border-left-style:solid}
.pw-public .pw-rung.st-armed::before{border-left-color:var(--wait)}
.pw-public .pw-dot{position:absolute;left:0;top:3px;width:14px;height:14px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:800}
.pw-public .st-proven>.pw-dot{background:var(--good);color:var(--panel);border:0}
.pw-public .st-attested>.pw-dot{border:2px solid var(--accent);background:var(--accent-soft)}
.pw-public .st-armed>.pw-dot{background:transparent;border:2px solid var(--wait)}
.pw-public .st-locked>.pw-dot{background:var(--panel-2);border:2px solid var(--line)}
.pw-public .pw-t{font-size:13px;line-height:1.35;color:var(--ink);font-weight:700}
.pw-public .st-locked>.pw-t{font-weight:600;color:var(--dimmer)}
.pw-public .pw-tag{display:inline-block;font-size:9.5px;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;border:1px solid transparent;
  border-radius:5px;padding:1px 6px;margin-right:6px;vertical-align:1px}
.pw-public .pw-tag.ok{color:var(--good);background:var(--good-soft);border-color:var(--good)}
.pw-public .pw-tag.say{color:var(--accent);background:var(--accent-soft);border-color:var(--accent-solid)}
.pw-public .pw-tag.wait{color:var(--wait);background:var(--wait-soft);border-color:var(--wait)}
.pw-public .pw-tag.off{color:var(--dimmer);background:transparent;border-color:var(--line)}
.pw-public .pw-off{font-size:12px;color:var(--dimmer);margin-top:7px;line-height:1.5}
@media(max-width:480px){
  .pw-public .pw-rail{padding:16px 16px 18px}
  .pw-overlay{padding:52px 10px 32px}
}