/* ============================================================
   PGHealth — dashboard / portal components
   Builds on styles.css design tokens. Status colors reserved.
   ============================================================ */

/* status tokens mapped to existing palette */
:root {
  --st-good:  var(--green);
  --st-good-t: var(--green-tint);
  --st-watch: var(--amber);
  --st-watch-t: var(--amber-tint);
  --st-low:   var(--red);
  --st-low-t: var(--red-tint);
  --st-ok:    var(--blue);
  --st-ok-t:  var(--blue-tint);
}

/* ---------- person switcher ---------- */
.switcher { display:inline-flex; gap:4px; padding:4px; background:var(--bg-tint); border:1px solid var(--line); border-radius:999px; }
.switcher button {
  font:inherit; font-size:.86rem; font-weight:600; color:var(--ink-soft); cursor:pointer;
  border:none; background:transparent; padding:7px 16px; border-radius:999px; display:flex; align-items:center; gap:7px; transition:.15s;
}
.switcher button:hover { color:var(--ink); }
.switcher button[aria-pressed="true"] { background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm); }

/* ---------- coach line ---------- */
.coach { display:flex; gap:14px; align-items:flex-start; background:var(--green-tint); border:1px solid color-mix(in srgb,var(--green) 28%,transparent); border-radius:var(--radius); padding:18px 20px; }
.coach .av { flex:none; width:40px; height:40px; border-radius:50%; background:var(--green); color:#fff; display:grid; place-items:center; font-size:1.2rem; }
:root[data-theme="dark"] .coach .av{ color:#14180d; }
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .coach .av{color:#14180d;}}
.coach h4 { margin:0 0 3px; font-size:1.02rem; }
.coach p { margin:0; font-size:.95rem; color:var(--ink-soft); }

/* ---------- north-star KPI strip ---------- */
.kpi-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:820px){ .kpi-strip{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:460px){ .kpi-strip{ grid-template-columns:1fr;} }
.kpi { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden; }
.kpi .k-label { font-size:.74rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mute); }
.kpi .k-val { font-family:var(--font-serif); font-size:2rem; line-height:1.05; margin:8px 0 2px; display:flex; align-items:baseline; gap:5px; }
.kpi .k-val small { font-size:.9rem; font-weight:500; color:var(--ink-mute); font-family:var(--font-sans); }
.kpi .k-target { font-size:.8rem; color:var(--ink-mute); }
.kpi .k-spark { margin-top:8px; height:30px; }
.kpi .edge { position:absolute; left:0; top:0; bottom:0; width:4px; }
.kpi.s-good .edge{background:var(--st-good);} .kpi.s-watch .edge{background:var(--st-watch);}
.kpi.s-low .edge{background:var(--st-low);}  .kpi.s-ok .edge{background:var(--st-ok);}

/* status pill (icon + label, never color-alone) */
.spill { display:inline-flex; align-items:center; gap:5px; font-size:.72rem; font-weight:700; padding:3px 9px; border-radius:999px; }
.spill.s-good{background:var(--st-good-t); color:var(--green-deep);}
.spill.s-watch{background:var(--st-watch-t); color:var(--amber);}
.spill.s-low{background:var(--st-low-t); color:var(--red);}
.spill.s-ok{background:var(--st-ok-t); color:var(--blue);}
:root[data-theme="dark"] .spill.s-good{color:var(--green-deep);}

/* ---------- Focus engine ---------- */
.shelf { margin-bottom:30px; }
.shelf-head { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.shelf-head h3 { margin:0; font-size:1.28rem; }
.shelf-head .count { font-size:.78rem; font-weight:700; color:var(--ink-mute); background:var(--bg-tint); border-radius:999px; padding:2px 9px; }
.shelf-sub { font-size:.9rem; color:var(--ink-mute); margin:-8px 0 14px; }

.focus-grid { display:grid; gap:14px; }
.focus-grid.active { grid-template-columns:repeat(2,1fr); }
@media (max-width:720px){ .focus-grid.active{ grid-template-columns:1fr;} }

.focus-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:20px; position:relative; border-left:4px solid var(--green); }
.focus-card .leg-tag { position:absolute; top:16px; right:16px; font-size:1.15rem; }
.focus-card h4 { margin:0 6ch 6px 0; font-size:1.12rem; }
.focus-card .action { font-size:.96rem; color:var(--ink); margin:0 0 8px; font-weight:500; }
.focus-card .why { font-size:.88rem; color:var(--ink-soft); margin:0 0 14px; }
.focus-card .roi { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }

.roi-chip { display:inline-flex; align-items:center; gap:5px; font-size:.74rem; font-weight:600; padding:4px 9px; border-radius:8px; background:var(--bg-tint); color:var(--ink-soft); border:1px solid var(--line-soft); }
.roi-chip .lv { font-weight:700; }
.roi-chip .lv.low{color:var(--green);} .roi-chip .lv.med{color:var(--amber);} .roi-chip .lv.high{color:var(--red);}
.roi-chip.impact { background:var(--green-tint); border-color:transparent; color:var(--green-deep); }
.roi-chip.impact .lv.high{color:var(--green-deep);} .roi-chip.impact .lv.med{color:var(--amber);}

/* on-deck: lighter list */
.deck { display:grid; gap:10px; }
.deck-item { display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:13px 16px; box-shadow:var(--shadow-sm); }
.deck-item .lg { font-size:1.15rem; }
.deck-item .t { font-weight:600; font-size:.96rem; }
.deck-item .a { font-size:.85rem; color:var(--ink-mute); }
.deck-item .imp { font-size:.72rem; font-weight:700; color:var(--green-deep); background:var(--green-tint); padding:3px 9px; border-radius:999px; white-space:nowrap; }

/* locked-in: celebrated, compact */
.locked { display:flex; flex-wrap:wrap; gap:10px; }
.locked-chip { display:inline-flex; align-items:center; gap:8px; font-size:.88rem; font-weight:500; background:var(--green-tint); color:var(--green-deep); border-radius:999px; padding:8px 14px; }
.locked-chip .ck { width:18px; height:18px; border-radius:50%; background:var(--green); color:#fff; display:grid; place-items:center; font-size:.7rem; flex:none; }
:root[data-theme="dark"] .locked-chip .ck{ color:#14180d; }
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .locked-chip .ck{color:#14180d;}}

/* ---------- three-leg stool cards ---------- */
.stool { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:820px){ .stool{ grid-template-columns:1fr;} }
.leg-card { display:block; text-decoration:none; color:inherit; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:24px; box-shadow:var(--shadow-sm); transition:transform .15s, box-shadow .15s, border-color .15s; }
.leg-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:color-mix(in srgb,var(--green) 40%,transparent); }
.leg-card .lc-ico { font-size:2rem; }
.leg-card h3 { margin:12px 0 3px; font-size:1.35rem; }
.leg-card .lc-sub { font-size:.86rem; color:var(--ink-mute); margin:0 0 16px; }
.leg-card .lc-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding-top:14px; border-top:1px solid var(--line-soft); }
.leg-card .lc-metric { font-family:var(--font-serif); font-size:1.7rem; line-height:1; }
.leg-card .lc-go { font-size:.85rem; font-weight:600; color:var(--green); }
.leg-card .lc-note { font-size:.85rem; color:var(--ink-soft); margin:8px 0 0; }

/* ---------- labs: marker cards ---------- */
.marker-group { margin-bottom:26px; }
.marker-group > h3 { display:flex; align-items:center; gap:9px; font-size:1.25rem; margin:0 0 14px; }
.marker-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media (max-width:720px){ .marker-grid{ grid-template-columns:1fr;} }
.marker { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:18px 20px; border-left:4px solid var(--line); }
.marker.s-good{border-left-color:var(--st-good);} .marker.s-watch{border-left-color:var(--st-watch);}
.marker.s-low{border-left-color:var(--st-low);}  .marker.s-ok{border-left-color:var(--st-ok);}
.marker .m-top { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.marker .m-name { font-weight:600; font-size:1.02rem; }
.marker .m-val { font-family:var(--font-serif); font-size:1.7rem; line-height:1; }
.marker .m-val small { font-size:.8rem; font-family:var(--font-sans); color:var(--ink-mute); font-weight:500; }
.marker .m-meta { display:flex; gap:16px; margin:10px 0; font-size:.8rem; color:var(--ink-mute); }
.marker .m-meta b { color:var(--ink-soft); font-weight:650; }
.marker .m-note { font-size:.88rem; color:var(--ink-soft); margin:0; }
.marker .m-bar { height:6px; border-radius:3px; background:var(--line-soft); margin:12px 0 4px; position:relative; overflow:hidden; }
.marker .m-bar > i { position:absolute; top:0; bottom:0; border-radius:3px; }

.awaiting { text-align:center; padding:48px 24px; background:var(--surface-2); border:1px dashed var(--line); border-radius:var(--radius-lg); }
.awaiting .em { font-size:2.4rem; }
.awaiting h3 { margin:12px 0 6px; }
.awaiting p { color:var(--ink-soft); max-width:52ch; margin:0 auto; }

/* ---------- activity ---------- */
.act-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:18px; }
@media (max-width:820px){ .act-grid{ grid-template-columns:1fr;} }
.ring-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:22px; text-align:center; }
.ring-card h3 { margin:0 0 4px; font-size:1.15rem; }
.ring-card .r-sub { font-size:.85rem; color:var(--ink-mute); margin:0 0 12px; }
.ring-wrap { display:inline-block; position:relative; }
.ring-wrap .r-center { position:absolute; inset:0; display:grid; place-content:center; text-align:center; }
.ring-wrap .r-center b { font-family:var(--font-serif); font-size:2rem; display:block; line-height:1; }
.ring-wrap .r-center span { font-size:.76rem; color:var(--ink-mute); }

.split-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:20px; }
.split-card h4 { margin:0 0 12px; font-size:1.08rem; display:flex; align-items:center; gap:9px; }
.split-card ul { list-style:none; margin:0; padding:0; }
.split-card li { padding:9px 0; border-bottom:1px solid var(--line-soft); font-size:.94rem; display:flex; align-items:center; gap:10px; }
.split-card li:last-child{border-bottom:none;}
.split-card li .n { width:22px; height:22px; border-radius:6px; background:var(--bg-tint); color:var(--ink-mute); font-size:.75rem; font-weight:700; display:grid; place-items:center; flex:none; }

.pillars { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media (max-width:560px){ .pillars{ grid-template-columns:repeat(2,1fr);} }
.pillar { text-align:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px 10px; box-shadow:var(--shadow-sm); }
.pillar .p-ico { font-size:1.5rem; }
.pillar .p-name { font-weight:650; font-size:.92rem; margin:6px 0 6px; }
.pillar .p-state { font-size:.74rem; font-weight:700; padding:3px 9px; border-radius:999px; display:inline-flex; align-items:center; gap:4px; }
.pillar.on .p-state{ background:var(--st-good-t); color:var(--green-deep);}
.pillar.off .p-state{ background:var(--st-watch-t); color:var(--amber);}
:root[data-theme="dark"] .pillar.on .p-state{color:var(--green-deep);}

.cadence { display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.cad-dot { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; font-size:.72rem; font-weight:700; background:var(--bg-tint); color:var(--ink-mute); border:1px solid var(--line-soft); }
.cad-dot.A{ background:var(--green-tint); color:var(--green-deep); border-color:transparent; }
.cad-dot.B{ background:var(--blue-tint); color:var(--blue); border-color:transparent; }
.cad-dot.Z2{ background:var(--amber-tint); color:var(--amber); border-color:transparent; }

.log-table td .badge { font-size:.7rem; font-weight:700; padding:2px 8px; border-radius:999px; }
.badge.A{background:var(--green-tint);color:var(--green-deep);}
.badge.B{background:var(--blue-tint);color:var(--blue);}
.badge.Z2{background:var(--amber-tint);color:var(--amber);}

/* page header shared */
.pagehead { padding:40px 0 8px; }
.pagehead .row { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.pagehead h1 { font-size:clamp(1.9rem,4.5vw,2.9rem); margin:0; }
.pagehead .crumb { font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--green); margin-bottom:8px; }
.backlink { font-size:.86rem; color:var(--ink-mute); text-decoration:none; }
.backlink:hover{ color:var(--ink); }
.asof { font-size:.82rem; color:var(--ink-mute); }