/* assets/personas.css · Home personas as role pill tabs (build spec F1 S1).
   Light mode (home = community). Four tabs, one panel each: the role's promise and checklist (from its role page),
   three agents from agents.html for that role's work, a real-scenario photo (R-01..R-04, assets/shot.css) and two actions.
   No magenta here. Cards have no border. Motion: brand UI tier, opacity only; no auto-advance.
   Without JS (no html.js) every panel shows stacked and the tab row is hidden. */

.ptabs{position:relative;padding:clamp(48px,8vh,104px) 0}
.ptabs::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(59,6,212,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(59,6,212,.05) 1px,transparent 1px);
  background-size:38px 38px;-webkit-mask:radial-gradient(80% 60% at 50% 30%,#000,transparent 82%);mask:radial-gradient(80% 60% at 50% 30%,#000,transparent 82%);opacity:.7}
.ptabs > .wrap{position:relative}

/* ---- head ---- */
.ptabs__head{max-width:min(100%,56rem);margin:0 auto clamp(24px,3vw,36px);text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.ptabs__head .t-section{margin:0}
.ptabs__sub{margin:0;max-width:56ch;text-wrap:pretty}

/* ---- pill tabs ---- */
.ptabs__bar{display:flex;justify-content:center;margin:0 0 clamp(16px,2vw,24px)}
.ptabs__tabs{display:flex;gap:8px;padding:6px;border-radius:999px;background:#fff;box-shadow:var(--card-shadow)}
.ptab{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:0;border-radius:999px;background:transparent;
  color:var(--fg-soft);font:600 1rem/1 var(--font-sans);letter-spacing:-.005em;white-space:nowrap;cursor:pointer;
  transition:background-color var(--dur-instant,120ms) var(--ease-standard,ease),color var(--dur-instant,120ms) var(--ease-standard,ease)}
.ptab svg{flex:none;width:20px;height:20px}
.ptab:hover{color:var(--ink);background:var(--ghost-white,#F8F8FA)}
.ptab[aria-selected="true"]{background:var(--ink);color:#fff}
.ptab:focus-visible{outline:3px solid var(--focus-ring,#3B06D4);outline-offset:2px}
html:not(.js) .ptabs__bar{display:none}

/* ---- panels ----
   With JS every panel sits in the same grid cell, so the stack keeps the tallest panel's height and
   nothing below the section moves when the tab changes. Inactive panels are visibility:hidden, which
   also takes them out of the tab order and the accessibility tree. */
.ptabs__panels{display:grid}
html.js .ptabs__panels > .ptp{grid-area:1/1}
.ptp{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,3.4vw,48px);align-items:stretch;
  padding:clamp(20px,2.6vw,32px);border-radius:var(--radius-base,24px);background:#fff;box-shadow:var(--card-shadow)}
html:not(.js) .ptp + .ptp{margin-top:24px}
html.js .ptp:not(.is-active){visibility:hidden}
.ptp:focus-visible{outline:3px solid var(--focus-ring,#3B06D4);outline-offset:3px}
html.js .ptp.is-active{animation:ptp-in var(--dur-quick,200ms) var(--ease-standard,ease) both}
@keyframes ptp-in{from{opacity:0}to{opacity:1}}

.ptp__copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding-block:clamp(4px,1vw,12px)}
.ptp__k{margin:0}
.ptp__t{margin:10px 0 0;color:var(--ink)}
.nh-chal .ptp__t{font-size:var(--role-row)}  /* type.css maps .nh-chal h3 to the card role; the panel promise is a row heading */
.ptp__lead{margin:12px 0 0;color:var(--fg-soft);max-width:58ch;text-wrap:pretty}

/* checklist */
.ptp__checks{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.ptp__checks li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start;color:var(--ink);
  font-size:var(--t-body,1rem);line-height:var(--lh-text,1.6)}
.ptp__checks svg{margin-top:.2em;color:var(--purple,#3B06D4)}
.ptp__checks b{font-weight:600}

/* agents: an inset tray, three "<agent> does <job>" rows */
.ptp__agents{align-self:stretch;margin:24px 0 0;padding:16px 16px 14px;border-radius:var(--radius-card,12px);background:var(--ghost-white,#F8F8FA)}
.ptp__agents-k{margin:0 0 10px;color:var(--slate,#4A4A68)}
.ptp__agents ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ptp__agents li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:start;padding:8px 10px;border-radius:10px;background:#fff}
.ptp__bot{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:var(--purple-100,#EBEEFF);color:var(--purple,#3B06D4)}
.ptp__bot svg{width:18px;height:18px}
.ptp__agents li p{margin:0;padding-block:5px;color:var(--fg-soft)}
.ptp__agents li b{color:var(--ink);font-weight:600}
.ptp__agents-foot{margin:10px 0 0;color:var(--fg-soft)}
.ptp__agents-foot a, .ptp__plan a{color:var(--purple,#3B06D4);font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.ptp__agents-foot a:hover, .ptp__plan a:hover{text-decoration-thickness:2px}

/* actions */
.ptp__acts{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 0}
.ptp__plan{margin:10px 0 0;color:var(--fg-soft)}
.ptp__plan a, .ptp__agents-foot a{white-space:nowrap}

/* photo: fills the column height on desktop */
.ptp__shot{align-self:stretch;height:100%;min-height:420px;aspect-ratio:auto}

/* ---- tablet ---- */
@media (max-width:1023px){
  .ptp{grid-template-columns:minmax(0,1fr)}
  .ptp__shot{order:-1;height:auto;min-height:0;aspect-ratio:16/9}
}

/* ---- phones: the pills scroll sideways, bleeding to the screen edge, and stick under the fixed header
   (60px; 42px more while the notice bar shows) so another role is one tap away from anywhere in the panel ---- */
@media (max-width:760px){
  .ptabs__bar{justify-content:flex-start;margin-inline:calc(-1 * var(--gutter,16px))}
  html.js .ptabs__bar{position:sticky;top:60px;z-index:5;background:rgba(255,255,255,.94);
    -webkit-backdrop-filter:saturate(160%) blur(12px);backdrop-filter:saturate(160%) blur(12px);
    transition:top var(--dur-base,320ms) var(--ease-standard,ease)}
  html.js.has-notif:not(.notif-up) .ptabs__bar{top:102px}
  .ptabs__tabs{width:100%;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;
    padding:10px var(--gutter,16px) 12px;border-radius:0;background:none;box-shadow:none;scroll-padding-inline:var(--gutter,16px)}
  .ptabs__tabs::-webkit-scrollbar{display:none}
  .ptab{scroll-snap-align:start;padding:0 16px;font-size:.9375rem;background:#fff;box-shadow:var(--card-shadow)}
  .ptab:hover{background:#fff}
  .ptab[aria-selected="true"]{background:var(--ink)}
  .ptp{padding:12px 12px 20px}
  .ptp__copy{padding-inline:4px}
  .ptp__shot{aspect-ratio:16/10;border-radius:var(--radius-card,12px)}
  .ptp__agents{padding:12px}
  .ptp__agents li{grid-template-columns:28px minmax(0,1fr);gap:10px;padding:8px}
  .ptp__bot{width:28px;height:28px}
  .ptp__acts{width:100%}
  .ptp__acts .btn{flex:1 1 100%;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  .ptab{transition:none}
  html.js .ptp.is-active{animation:none}
  html.js .ptabs__bar{transition:none}
}