/* Portal and shared page, Oct 15, 2026 (Kene): read like the app.
 * Loaded after share.css and dusk.css. Dusk colors only; color still only
 * says state. One orchestrated moment: when a client page opens, the bars
 * rise and the heatmap fills left to right, the way the app's analyzing
 * screen does. Everything else moves only when clicked. */

:root{--bn:#0C0E0D;--rim:rgba(12,14,13,0.126);--rim-hi:rgba(12,14,13,0.140);--glass:rgba(12,14,13,0.055);--lift:rgba(12,14,13,0.079)}

/* ---- type ---- */
.label{font-family:'Inter Tight',system-ui,sans-serif;text-transform:none;letter-spacing:.01em;font-size:12.5px;color:var(--muted);margin-bottom:6px}
.ct{font-family:'Inter Tight','Inter Tight',Arial,sans-serif;font-weight:400;font-size:21px;letter-spacing:-.01em;line-height:1.2;margin:0 0 12px;color:var(--ink)}
.minor{font-size:12.5px;color:var(--muted);margin:20px 0 6px;letter-spacing:.01em}
.minor.first{margin-top:0}
.fineprint{font-size:12px;color:var(--muted);text-align:center;margin:22px auto 0;max-width:520px;line-height:1.6}

/* ---- cards: see-through glass with a brighter top rim ---- */
#app .card{margin-top:14px;padding:22px 24px 20px;border-radius:24px;border:0;
  background:linear-gradient(165deg,rgba(12,14,13,0.079),rgba(12,14,13,0.037) 60%,rgba(12,14,13,0.029));
  box-shadow:inset 0 1px 0 rgba(12,14,13,0.137),inset 0 -1px 0 rgba(12,14,13,0.18),0 24px 50px -28px rgba(12,14,13,0.34);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
#app .card.since{background:linear-gradient(165deg,rgba(16,117,80,.09),rgba(12,14,13,0.032) 70%)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.duo .card{margin-top:0!important}
@media(max-width:760px){.duo{grid-template-columns:1fr}}

/* ---- rows ---- */
#app .rowline{padding:11px 0;border-top:1px solid var(--hair);font-size:14px}
#app .ct+.rowline,#app .minor+.rowline,#app .sub+.rowline{border-top:0}

/* ---- the client header ---- */
.back{display:inline-flex;align-items:center;gap:6px;margin:6px 0 4px;padding:7px 12px 7px 8px;border-radius:999px;border:0;background:transparent;color:var(--sec);font-size:13px;transition:background .2s,color .2s}
.back:hover{background:var(--glass);color:var(--ink)}
.hero{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-top:10px}
.hero .who{font-size:44px;font-weight:300;line-height:1.02}
.hero .fresh{margin-top:8px}
#app .cov{display:inline-flex;width:auto;align-items:center;gap:8px;margin-top:12px;padding:6px 8px 6px 12px;border-radius:999px;background:var(--glass);box-shadow:inset 0 1px 0 rgba(12,14,13,0.084);color:var(--sec);font-size:12.5px;transition:background .2s}
#app .cov:hover{background:var(--lift)}
#app .cov .q{margin-left:4px}
.q{font-family:Georgia,serif;font-style:italic;font-size:12px!important;width:20px;height:20px;border-radius:50%;border:1px solid rgba(12,14,13,0.140);display:inline-flex;align-items:center;justify-content:center;color:#E8E1D5;background:none;padding:0;cursor:pointer;flex:0 0 20px;line-height:1}
.banner{text-align:left;margin:14px 2px 4px;font-size:12.5px}
@media(max-width:480px){.hero .who{font-size:34px}}

/* ---- big numbers and the pace bar ---- */
.big{font-size:50px;margin:2px 0 4px}
.pace{height:5px;border-radius:3px;background:rgba(12,14,13,0.084);overflow:hidden;margin:12px 0 4px}
.pace span{display:block;height:100%;border-radius:3px;transform-origin:left;animation:fillX .7s cubic-bezier(.2,.8,.2,1) both .1s}
.bg-sage{background:var(--sage)}.bg-clay{background:var(--clay)}.bg-terracotta{background:var(--terracotta)}

/* ---- weekly bars ---- */
.wchart{margin-top:4px;overflow:visible}
.wchart .bar{transform-box:fill-box;transform-origin:50% 100%;animation:barUp .62s cubic-bezier(.2,.85,.25,1) backwards;animation-delay:calc(var(--i)*45ms);transition:filter .2s,opacity .2s;cursor:pointer}
.wchart .hit{cursor:pointer}
.wchart:hover .bar{opacity:.7}
.wchart .bar:hover,.wchart .hit:hover+.bar,.wchart .bar.is-sel{opacity:1;filter:brightness(1.25)}
.wchart .bar.is-sel{stroke:var(--bn);stroke-width:1.2}

/* ---- the heatmap: the page's signature ---- */
.heat{display:grid;grid-template-columns:34px repeat(24,minmax(0,1fr));gap:3px;align-items:center;margin-top:4px}
.heat .hd{font-size:11px;color:var(--muted)}
.heat .hx{font-size:10.5px;color:var(--muted);padding-top:4px}
.heat .cell{aspect-ratio:1;width:100%;border:0;padding:0;margin:0;border-radius:4px;background:rgba(12,14,13,0.047);cursor:pointer;position:relative;
  animation:cellIn .5s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--h)*16ms + var(--d)*8ms);
  transition:transform .18s cubic-bezier(.3,.7,0,1),box-shadow .18s}
.heat .cell.win{box-shadow:inset 0 0 0 1.25px rgba(12,14,13,0.62)}
.heat .cell:hover{transform:scale(1.35);z-index:2;box-shadow:0 6px 16px -6px rgba(12,14,13,0.34),inset 0 0 0 1px rgba(12,14,13,0.50)}
.heat .cell.is-sel{transform:scale(1.35);z-index:3;box-shadow:0 0 0 1.5px var(--bn),0 8px 18px -6px rgba(12,14,13,0.34)}
.heat .cell.flash{box-shadow:inset 0 0 0 2px var(--bn);transform:scale(1.12);z-index:2}
.key{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px;font-size:12px;color:var(--sec)}
.key span{display:inline-flex;align-items:center;gap:6px}
.key i{width:10px;height:10px;border-radius:3px;display:inline-block}
.key i.kw{box-shadow:inset 0 0 0 1.25px rgba(12,14,13,0.70)}
@media(max-width:560px){.heat{grid-template-columns:26px repeat(24,minmax(0,1fr));gap:2px}.heat .cell{border-radius:2px}.heat .hd{font-size:9.5px}}

/* ---- tiles (heaviest day, markers) ---- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:14px}
.tile{padding:13px 14px 12px;border-radius:16px;background:rgba(12,14,13,0.047);box-shadow:inset 0 1px 0 rgba(12,14,13,0.074)}
.tile .k{display:block;font-size:12px;color:var(--muted)}
.tile .v{display:block;font-size:24px;margin-top:2px;line-height:1.15}

/* ---- by month ---- */
.months{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;height:128px;align-items:end;margin-top:6px}
.mo{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;border-radius:10px;padding:4px 0 0}
.mo-track{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center}
.mo-bar{display:block;width:62%;max-width:22px;border-radius:6px 6px 4px 4px;background:rgba(12,14,13,0.140);transform-origin:bottom;animation:barUp .6s cubic-bezier(.2,.85,.25,1) both;animation-delay:calc(var(--i)*35ms);transition:background .2s}
.mo:hover .mo-bar,.mo.is-sel .mo-bar{background:rgba(12,14,13,0.62)}
.mo-l{font-size:11px;color:var(--muted)}
.mo:focus-visible{outline:1.5px solid rgba(12,14,13,0.60)}

/* ---- horizontal shares and PGSI dots ---- */
#app .hrow{display:grid;grid-template-columns:118px 1fr 40px;align-items:center;gap:12px;margin-top:9px;font-size:13.5px}
#app .hrow .hl{color:var(--ink)}
#app .hrow .hl.wide{font-size:13px}
#app .hrow .hv{text-align:right;color:var(--sec);font-variant-numeric:tabular-nums}
#app .hrow .track{height:6px;border-radius:3px;background:rgba(12,14,13,0.074);overflow:hidden}
#app .hrow .fill{display:block;height:100%;border-radius:3px;background:rgba(12,14,13,0.50);opacity:1;transform-origin:left;animation:fillX .7s cubic-bezier(.2,.8,.2,1) both .15s}
#app .hrow:has(.dots){grid-template-columns:1fr auto 24px}
.dots{display:inline-flex;gap:5px}
.dots i{width:8px;height:8px;border-radius:50%;background:rgba(12,14,13,0.105)}
.dots i.on{background:var(--bn)}

/* ---- risk windows ---- */
.wins{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.win-row{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:12px;padding:11px 12px;border-radius:14px;background:rgba(12,14,13,0.037);transition:background .2s,transform .2s cubic-bezier(.3,.7,0,1)}
.win-row:hover{background:rgba(12,14,13,0.079)}
.win-row:active{transform:scale(.99)}
.win-row.is-sel{background:rgba(12,14,13,0.105);box-shadow:inset 0 0 0 1px rgba(12,14,13,0.140)}
.win-row:focus-visible{outline:1.5px solid rgba(12,14,13,0.60)}
.win-row .rk{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-family:'Inter Tight','Inter Tight',Arial,sans-serif;font-size:15px;background:rgba(12,14,13,0.074)}
.win-row .wd{font-size:14.5px}
.win-row .al{font-size:12px;color:var(--muted);padding:4px 10px;border-radius:999px;background:rgba(12,14,13,0.042)}
.win-row .al.on{color:var(--ink);background:rgba(12,14,13,0.095)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
#app .chip{margin:0;padding:6px 12px;font-size:12.5px;background:rgba(12,14,13,0.063)}
.lapse-head{display:flex;align-items:center;gap:9px;margin-top:20px;font-size:12.5px;color:var(--muted)}

/* ---- the pop-up ---- */
.pop{position:absolute;z-index:60;width:300px;max-width:calc(100vw - 28px);padding:16px 18px 15px;border-radius:20px;color:var(--ink);
  background:rgba(255,255,255,0.86);-webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(12,14,13,0.140),0 0 0 .5px rgba(12,14,13,0.105),0 28px 60px -20px rgba(12,14,13,0.34);
  opacity:0;transform:translateY(8px) scale(.96);transform-origin:var(--tx,50%) 100%;transition:opacity .18s ease,transform .26s cubic-bezier(.2,.9,.25,1.1)}
.pop.below{transform:translateY(-8px) scale(.96);transform-origin:var(--tx,50%) 0}
.pop.in{opacity:1;transform:none}
.pop-t{font-family:'Inter Tight','Inter Tight',Arial,sans-serif;font-size:19px;line-height:1.25;padding-right:26px;margin-bottom:6px}
.pop-b{font-size:13.5px;line-height:1.55;color:var(--sec)}
.pop-b p+p{margin-top:8px}
.pop-b .pop-in{color:var(--ink)}
.pop-b .pop-note{font-size:12px;color:var(--muted);margin-top:6px}
.pop-rows{margin-top:6px}
.pop-rows>div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid rgba(12,14,13,0.084);color:var(--ink)}
.pop-rows>div:first-child{border-top:0}
.pop-rows>div span:last-child{color:var(--sec);font-variant-numeric:tabular-nums}
.pop-rows>div span.sage{color:var(--sage)}.pop-rows>div span.terracotta{color:var(--terracotta)}
.pop-x{all:unset;position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--sec);font-size:19px;line-height:1;transition:background .2s}
.pop-x:hover{background:rgba(12,14,13,0.084);color:var(--ink)}
.pop-x:focus-visible{outline:1.5px solid rgba(12,14,13,0.60)}
.pop.sheet{position:fixed;left:0;right:0;bottom:0;top:auto!important;width:auto;max-width:none;border-radius:24px 24px 0 0;padding:22px 20px calc(22px + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .32s cubic-bezier(.2,.9,.25,1),opacity .2s}
.pop.sheet.in{transform:none}

/* ---- the client list ---- */
.clients{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.client{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:14px;padding:12px 14px;border-radius:18px;background:rgba(12,14,13,0.042);box-shadow:inset 0 1px 0 rgba(12,14,13,0.063);transition:background .2s,transform .2s cubic-bezier(.3,.7,0,1)}
.client:hover{background:rgba(12,14,13,0.084)}
.client:active{transform:scale(.99)}
.client:focus-visible{outline:1.5px solid rgba(12,14,13,0.60)}
.client .av{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Inter Tight','Inter Tight',Arial,sans-serif;font-size:20px;background:linear-gradient(160deg,rgba(12,14,13,0.140),rgba(12,14,13,0.053));box-shadow:inset 0 1px 0 rgba(12,14,13,0.140)}
.client .nm{font-size:15.5px;font-weight:500}
.client .sc{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.client .sc span{font-size:11.5px;color:var(--sec);padding:2px 8px;border-radius:999px;background:rgba(12,14,13,0.063)}
.client .go{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--sec)}
.client.locked .go{color:var(--muted)}

@keyframes barUp{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes fillX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes cellIn{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .wchart .bar,.mo-bar,.heat .cell,.pace span,#app .hrow .fill{animation:none}
  .pop,.pop.sheet,.heat .cell,.win-row,.client{transition:none}}

/* ---- Progress tabs, as in the app (Oct 15, 2026) ---- */
.section{font-family:'Inter Tight','Inter Tight',Arial,sans-serif;font-weight:300;font-size:30px;letter-spacing:-.02em;margin:34px 2px 2px}
.seg{position:sticky;top:64px;z-index:20;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:16px 0 0;padding:4px;border-radius:999px;background:rgba(255,255,255,0.86);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 rgba(12,14,13,0.084),0 10px 24px -14px rgba(12,14,13,0.34)}
.seg-b{all:unset;cursor:pointer;text-align:center;padding:10px 0;border-radius:999px;font-size:14px;color:var(--sec);transition:background .25s,color .25s}
.seg-b:hover{color:var(--ink)}
.seg-b.on{background:linear-gradient(180deg,#FFFDF8,#EDE5D7);color:#FFFFFF;box-shadow:inset 0 1px 0 #fff,0 6px 14px -8px rgba(12,14,13,0.34)}
.seg-b:focus-visible{outline:1.5px solid rgba(12,14,13,0.60)}
.tabp{display:none}
.tabp.on{display:block;animation:tabIn .32s cubic-bezier(.2,.8,.2,1)}
@keyframes tabIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pair2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.marks{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.marks .mk{font-size:12px;padding:4px 10px;border-radius:999px;background:rgba(12,14,13,0.053)}
.marks .mk.lap{color:var(--clay)}.marks .mk.rel{color:var(--terracotta)}
.pager{display:flex;justify-content:flex-end;gap:6px;margin-top:4px}
.pg{all:unset;cursor:pointer;width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:20px;color:var(--sec);background:rgba(12,14,13,0.053);transition:background .2s}
.pg:hover{background:rgba(12,14,13,0.105);color:var(--ink)}
.mk4{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-top:14px}
.mk4 .tile{padding:16px 16px 14px;border-radius:20px;background:linear-gradient(165deg,rgba(12,14,13,0.074),rgba(12,14,13,0.032));box-shadow:inset 0 1px 0 rgba(12,14,13,0.116),0 18px 36px -24px rgba(12,14,13,0.34)}
.pg-top{display:flex;align-items:center;gap:14px}
.pg-top .big{margin:0}
.pg-band{font-size:15px;font-weight:500}
.pg-bar{position:relative;display:grid;grid-template-columns:3fr 5fr 19fr;gap:3px;margin:16px 0 6px;height:5px}
.pg-bar i{display:block;border-radius:3px}.pg-bar .z1{background:var(--sage)}.pg-bar .z2{background:var(--clay)}.pg-bar .z3{background:var(--terracotta)}
.pg-bar b{position:absolute;top:50%;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;background:var(--bn);box-shadow:0 0 0 3px rgba(255,255,255,0.90)}
.pg-zl{display:grid;grid-template-columns:3fr 5fr 19fr;font-size:11.5px;color:var(--muted)}
.pg-ms{display:flex;justify-content:space-between;margin-top:16px;font-size:12px;color:var(--muted)}
.pg-ms span{display:flex;flex-direction:column;align-items:center;gap:6px}
.pg-ms span:first-child{align-items:flex-start}.pg-ms span:last-child{align-items:flex-end}
.pg-ms i{width:9px;height:9px;border-radius:50%;border:1px solid rgba(12,14,13,0.140)}
.pg-ms span.on{color:var(--ink)}.pg-ms span.on i{background:var(--bn);border-color:var(--bn)}
@media(max-width:600px){.seg{top:58px}.section{font-size:26px}}
@media(prefers-reduced-motion:reduce){.tabp.on{animation:none}}

.pg-sub{display:block;margin-top:2px}
.pg-chg{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font-size:13px;font-variant-numeric:tabular-nums}
.pg-chg svg.sage{color:var(--sage)}.pg-chg svg.clay{color:var(--clay)}
.pg-bar b{transition:left .45s cubic-bezier(.2,.8,.2,1)}
.pg-stop{all:unset;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
button.pg-stop{cursor:pointer;color:var(--ink);border-radius:10px;padding:2px 4px;transition:background .2s}
button.pg-stop:hover{background:rgba(12,14,13,0.063)}
button.pg-stop:focus-visible{outline:1.5px solid rgba(12,14,13,0.60)}
.pg-ms .pg-stop:first-child{align-items:flex-start}.pg-ms .pg-stop:last-child{align-items:flex-end}
.pg-stop i{width:9px;height:9px;border-radius:50%;border:1px solid rgba(12,14,13,0.140);transition:transform .2s}
.pg-stop.on i{background:var(--bn);border-color:var(--bn)}
.pg-stop.sel{font-weight:500}.pg-stop.sel i{transform:scale(1.4);box-shadow:0 0 0 2px rgba(255,255,255,0.90),0 0 0 3.5px rgba(12,14,13,0.55)}

.pg-band{display:block}
.pg-chg{display:flex;width:max-content}

.hometiles{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:14px}
.hometile{all:unset;box-sizing:border-box;display:block;padding:16px 18px 15px;border-radius:22px;background:linear-gradient(165deg,rgba(12,14,13,0.079),rgba(12,14,13,0.037));box-shadow:inset 0 1px 0 rgba(12,14,13,0.126),0 20px 40px -26px rgba(12,14,13,0.34)}
.hometile .v{font-size:34px;margin:2px 0}
button.hometile{cursor:pointer;transition:background .2s}
button.hometile:hover{background:linear-gradient(165deg,rgba(12,14,13,0.105),rgba(12,14,13,0.053))}
button.hometile:focus-visible{outline:1.5px solid rgba(12,14,13,0.60)}