/* page-help · family.css · every class prefixed ph- (the shell's .ph is the page head, not ours)
   Values from tokens only. Layout is never switched by a query. */

/* the "?" trigger states now live in base.css (.help-q) */

      /* 44px hit area */

/* top-bar proof strips: same x on every page */
.ph-proof{position:relative}
.ph-proof .topbar{backdrop-filter:none}
.ph-proof .topbar+.topbar{border-top:0}
.ph-proof .crumbs b{color:hsl(var(--foreground))}
.ph-guide{position:absolute;top:0;bottom:0;right:74px;width:0;border-left:1px dashed hsl(var(--ring)/.4);pointer-events:none;z-index:5}
.ph-proof-m .p-bar+.p-bar{border-top:0}
.ph-proof-m .ph-guide{right:calc(var(--s-3) + 28px + 6px + 18px)}

.ph-states-bar{display:flex;align-items:flex-start;gap:var(--s-3);padding:var(--s-3) 0 var(--s-8);min-height:var(--control-h)}

/* ============ stage: the frame the drawer lives in ============ */

                 /* the "?" stays visible, and is the toggle */
.ph-stage .main{overflow:hidden}
.ph-stage>.topbar,.ph-stage>.ph-st-bar,.ph-st-bar{z-index:calc(var(--z-sheet) + 1);position:relative}   /* paints above the drawer's top shadow */
.ph-app{min-height:0;height:640px}
.ph-app.tall{height:760px}
.ph-back{padding:22px var(--s-6)}
.ph-back .page-title{display:flex;align-items:center;gap:var(--s-3)}
.ph-count{font:var(--w-medium) var(--text-micro)/1 var(--font-ui);color:hsl(var(--muted-foreground));background:hsl(var(--muted));padding:5px 8px;border-radius:var(--r-chip)}
.ph-tbl{width:100%;border:1px solid hsl(var(--border));border-radius:var(--r-card);overflow:hidden}
.ph-tbl table{width:100%}
.ph-tbl th{height:var(--row-th);text-align:left;padding:0 var(--s-4);background:hsl(var(--muted));font:var(--w-semibold) var(--text-micro)/1 var(--font-voice);color:hsl(var(--muted-foreground));border-bottom:1px solid hsl(var(--border))}
.ph-tbl td{height:var(--row);padding:0 var(--s-4);border-bottom:1px solid hsl(var(--border));font-size:var(--text-body)}
.ph-tbl tr:last-child td{border-bottom:0}
.ph-tbl .money{color:hsl(var(--foreground))}
.ph-tbl .more{color:hsl(var(--muted-foreground));margin-left:6px;font-size:var(--text-small)}
.ph-ed{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--s-5);margin-top:var(--s-5)}
.ph-panel{border:1px solid hsl(var(--border));border-radius:var(--r-card);padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-3)}
.ph-panel h3{font:var(--w-semibold) var(--text-card)/1.3 var(--font-voice)}
.ph-cloth{display:flex;gap:var(--s-3);align-items:center}
.ph-cloth .sw{width:56px;height:56px;border-radius:var(--r-media);background:url(assets/navy-birdseye.svg) center/cover;box-shadow:var(--e-1)}
.ph-cloth dl{display:grid;grid-template-columns:auto 1fr;gap:2px var(--s-3);font-size:var(--text-small)}
.ph-cloth dt{color:hsl(var(--muted-foreground))}
.ph-hdr-r{margin-left:auto;display:flex;gap:var(--s-2);align-items:center}

/* ============ the drawer (desktop side sheet) ============ */
.ph-drawer{width:var(--help-w)}
.ph-d-head{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4) var(--s-3) var(--s-4) var(--s-5);border-bottom:1px solid hsl(var(--border))}
.ph-d-ico{width:32px;height:32px;border-radius:var(--r-control);display:grid;place-items:center;background:hsl(var(--accent));color:hsl(var(--primary))}
.ph-d-ttl{flex:1;min-width:0}
.ph-d-ttl h2{font:var(--w-semibold) var(--text-section)/var(--lh-section) var(--font-voice);letter-spacing:var(--tr-section);font-stretch:var(--font-stretch-title)}
.ph-d-ttl p{font-size:var(--text-small);color:hsl(var(--muted-foreground));margin-top:2px}
.ph-d-body{flex:1;min-height:0;overflow-y:auto;padding:0 var(--s-5) var(--s-5);overscroll-behavior:contain}
.ph-d-body:focus-visible{outline-offset:-2px}
.ph-d-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:var(--s-3) var(--s-3) var(--s-3) var(--s-5);border-top:1px solid hsl(var(--border));
  font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.ph-d-foot span{display:inline-flex;align-items:center;gap:var(--s-2)}

/* ============ content blocks ============ */
.ph-blk{padding:var(--s-5) 0;border-top:1px solid hsl(var(--border))}
.ph-blk:first-child{border-top:0}
.ph-h{font:var(--w-semibold) var(--text-card)/var(--lh-card) var(--font-voice);font-stretch:var(--font-stretch-title);margin-bottom:var(--s-3)}
.ph-lead{font-size:var(--text-read);line-height:var(--lh-read)}
.ph-meta{display:flex;align-items:center;gap:var(--s-2);margin-top:var(--s-3);font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.ph-meta svg{color:hsl(var(--muted-foreground))}

.ph-do{list-style:none;display:flex;flex-direction:column;gap:2px}
.ph-do li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:var(--s-3);padding:var(--s-2) 0;font-size:var(--text-card);line-height:1.5}
.ph-do li svg{margin-top:2px;color:hsl(var(--primary))}
.ph-do b{font-weight:var(--w-semibold)}

.ph-links{list-style:none;display:flex;flex-direction:column;margin:0 calc(var(--s-3)*-1)}
.ph-link{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3);border-radius:var(--r-control);text-decoration:none;color:inherit;
  transition:background-color var(--motion-hover)}
.ph-link:hover,.ph-link.is-hover{background:hsl(var(--muted))}
.ph-link.is-focus{outline:2px solid hsl(var(--ring));outline-offset:-2px}
.ph-link-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ph-link-main b{font:var(--w-semibold) var(--text-card)/1.3 var(--font-voice);font-stretch:var(--font-stretch-title)}
.ph-link-main span{font-size:var(--text-body);line-height:1.45;color:hsl(var(--muted-foreground))}
.ph-link>svg{color:hsl(var(--muted-foreground));transition:transform var(--motion-hover),color var(--motion-hover)}
.ph-link:hover>svg,.ph-link.is-hover>svg{transform:translateX(2px);color:hsl(var(--primary))}
.ph-link-k{font:var(--w-medium) var(--text-micro)/1 var(--font-ui);color:hsl(var(--muted-foreground))}

.ph-src{list-style:none;display:flex;flex-direction:column}
.ph-src li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--s-3);padding:var(--s-3) 0;border-top:1px solid hsl(var(--border)/.7)}
.ph-src li:first-child{border-top:0;padding-top:0}
.ph-src-ico{width:28px;height:28px;border-radius:var(--r-control);display:grid;place-items:center;background:hsl(var(--muted));color:hsl(var(--muted-foreground))}
.ph-src b{display:block;font:var(--w-semibold) var(--text-card)/1.3 var(--font-voice);font-stretch:var(--font-stretch-title)}
.ph-src p{font-size:var(--text-body);line-height:1.45;color:hsl(var(--muted-foreground));margin-top:2px}
.ph-src-m{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);margin-top:var(--s-2);font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.ph-code{font:var(--w-regular) var(--text-micro)/1 var(--font-code);padding:4px 6px;border-radius:var(--r-chip);background:hsl(var(--muted));color:hsl(var(--muted-foreground))}
.ph-src li.is-off .ph-src-ico{background:hsl(var(--warning)/.12);color:hsl(var(--warning))}
.ph-src li.is-bad .ph-src-ico{background:hsl(var(--destructive)/.1);color:hsl(var(--destructive))}

.ph-terms{display:flex;flex-direction:column;gap:var(--s-3)}
.ph-terms dt{font:var(--w-semibold) var(--text-label)/1.3 var(--font-voice);font-stretch:var(--font-stretch-title)}
.ph-terms dd{font-size:var(--text-body);line-height:1.5;color:hsl(var(--muted-foreground));margin-top:2px}

/* block specimen columns */
.ph-col{width:var(--help-w);max-width:100%;background:hsl(var(--popover));border:1px solid hsl(var(--border));border-radius:var(--r-card);padding:0 var(--s-5)}
.ph-col .ph-blk{border-top:0}
.ph-cols{display:flex;gap:var(--s-6);align-items:flex-start;flex-wrap:wrap}

/* ============ drawer states ============ */
.ph-st-stage{height:540px;background:hsl(var(--muted)/.55)}
.ph-st-bar{height:var(--topbar-h);display:flex;align-items:center;gap:var(--s-3);padding:0 var(--s-5);background:hsl(var(--background));border-bottom:1px solid hsl(var(--border))}
.ph-bsheet{height:84%;max-height:none}
.ph-sk{display:flex;flex-direction:column;gap:var(--s-3)}
.ph-sk i{display:block;height:12px;border-radius:var(--r-chip);background:hsl(var(--muted));animation:kit-skel var(--motion-skeleton)}
.ph-sk i.l{height:16px}
.ph-sk i.w1{width:96%}.ph-sk i.w2{width:82%}.ph-sk i.w3{width:60%}.ph-sk i.w4{width:44%}
.ph-sk .gap{height:var(--s-3);background:none;animation:none}
.ph-note{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-3);padding:var(--s-8) 0 0}
.ph-note-ico{width:36px;height:36px;border-radius:var(--r-control);display:grid;place-items:center;background:hsl(var(--muted));color:hsl(var(--muted-foreground))}
.ph-note.bad .ph-note-ico{background:hsl(var(--destructive)/.1);color:hsl(var(--destructive))}
.ph-note h3{font:var(--w-semibold) var(--text-card)/1.3 var(--font-voice);font-stretch:var(--font-stretch-title)}
.ph-note p{font-size:var(--text-card);line-height:1.5;color:hsl(var(--muted-foreground))}

/* ============ phone: help as a bottom sheet ============ */

.ph-grab{display:flex;justify-content:center;align-items:center;width:100%;height:var(--s-6);flex:none;cursor:pointer}
.ph-grab i{width:36px;height:4px;border-radius:var(--r-pill);background:hsl(var(--secondary-border))}
.ph-b-head{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-2) var(--s-2) var(--s-3) var(--s-4);border-bottom:1px solid hsl(var(--border))}
.ph-b-head .ph-d-ttl h2{font-size:var(--text-18)}
.ph-b-body{flex:1;min-height:0;overflow-y:auto;padding:0 var(--s-4) var(--s-4);overscroll-behavior:contain}
.ph-b-foot{padding:var(--s-3) var(--s-4) var(--s-5);border-top:1px solid hsl(var(--border));display:flex;flex-direction:column;gap:var(--s-2)}
.ph-b-foot .btn{width:100%}
.kit-m .ph-link{min-height:var(--control-h-m);padding:var(--s-3)}
.kit-m .ph-link-main span{font-size:var(--text-card)}
.kit-m .ph-src p,.kit-m .ph-terms dd{font-size:var(--text-card)}
.kit-m .ph-do li{font-size:var(--text-14)}
.ph-more{border-top:1px solid hsl(var(--border))}
.ph-more summary{list-style:none;display:flex;align-items:center;justify-content:space-between;min-height:var(--control-h-m-lg);cursor:pointer;
  font:var(--w-semibold) var(--text-card)/1.3 var(--font-voice);font-stretch:var(--font-stretch-title)}
.ph-more summary::-webkit-details-marker{display:none}
.ph-more summary svg{color:hsl(var(--muted-foreground));transition:transform var(--motion-hover)}
.ph-more[open] summary svg{transform:rotate(180deg)}
.ph-more .ph-terms{padding:0 0 var(--s-4)}
.ph-m-list{list-style:none;display:flex;flex-direction:column}
.ph-m-list li{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-4);border-bottom:1px solid hsl(var(--border));min-height:64px}
.ph-m-list b{font:var(--w-semibold) var(--text-card)/1.3 var(--font-voice);display:block}
.ph-m-list small{display:block;color:hsl(var(--muted-foreground));font-size:var(--text-small);margin-top:2px}
.ph-m-list .r{margin-left:auto;text-align:right}
.ph-m-stage{height:780px}
.ph-m-stage.sm{height:560px}
.ph-m-scroll{height:100%;display:flex;flex-direction:column}
.ph-m-scroll .ph-m-grow{flex:1;overflow:hidden}
.ph-m-panel{padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-3)}
.ph-m-panel .ph-panel{padding:var(--s-3)}
.ph-mst{display:flex;flex-direction:column;gap:var(--s-2)}
.ph-mst>.state-k{font:var(--w-medium) var(--text-micro)/1.2 var(--font-code);color:hsl(var(--muted-foreground))}

.ph-m-list .dot{margin-top:0}