/* pnew-help.css — generated by tools/build_css.sh, do not edit (the help center only) */
/* src-css/help/help.css → app/assets/css/pnew-help.css (tools/build_css.sh): the help center (templates/help.php,
   lib/help.php). Loaded only by the help pages (pnew_head_css_add), so pnew.css and the guest bundles stay as they are.
   Design system (docs/design-system.md, P6 03.11.): the member page head (h1 --type-h1 24, lede --type-body ink 2),
   panels --r-l on surfaces without edges, the kit field (44, --r-m), the kit rows (§9.3), one pink key per view (the
   search key of the home). The reading frame (TOC, prose, rail) is the guides' own. Role tokens only (the light theme follows). */

/* page head: the help center is a tool page, not a guest hero (MBY-035 / MBY-142 / MBY-143) */
.pn-help .pn-help__hero{padding-top:var(--space-8)}
.pn-help__hero .pn-gd-hero__wrap{grid-template-columns:minmax(0,1fr)}
.pn-help__hero .pn-gd-hero__copy{max-width:820px}
.pn-help .pn-help__hero .pn-help__h1,.pn-help .pn-help__hero .pn-gd-hero__h.pc-h-xl.pn-help__h1{margin:var(--space-2) 0 var(--space-2);font:var(--type-h1);letter-spacing:var(--tr-h);text-transform:none}   /* was 44 / 32 px 800 (the guest hero scale) */
.pn-help .pn-help__hero .pn-lpm-hero__lede{margin:0;max-width:var(--prose-max);font:var(--type-body);color:var(--ink-2)}
.pn-help__aud{margin-left:var(--space-2)}
/* crumbs: Help center > category > article wrap on a phone instead of running out of the hero */
.pn-help .pn-gcrumbs .pn-crumbs{flex-wrap:wrap;row-gap:var(--space-1)}
.pn-help .pn-gcrumbs .pn-crumbs li,.pn-help .pn-gcrumbs .pn-crumbs li:last-child{flex:0 1 auto}
.pn-help .pn-gcrumbs .pn-crumbs a,.pn-help .pn-gcrumbs .pn-crumbs [aria-current]{white-space:normal;overflow:visible}

/* search: the kit field with its key (both 44, both --r-m: MBY-144), the instant results under it */
.pn-help__search{position:relative;display:flex;gap:var(--space-2);margin-top:var(--space-6);max-width:640px}
.pn-help__searchbox{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:var(--space-2);height:var(--control-md);padding:0 var(--space-3);border:0;border-radius:var(--r-m);background:var(--surface-2);color:var(--ink-2);cursor:text}
.pn-help__searchbox:has(.pn-help__q:focus-visible){outline:2px solid var(--focus-ring);outline-offset:2px;color:var(--ink)}   /* MBY-004: the one ring, on the keyboard */
.pn-help__q{flex:1 1 auto;min-width:0;height:100%;border:0;background:transparent;color:var(--ink);font:var(--type-ui);outline:0;appearance:none}
.pn-help__q::placeholder{color:var(--ink-2)}   /* MBY-015 */
.pn-help__q::-webkit-search-cancel-button{appearance:none}
.pn-help__go{flex:none}
.pn-help__suggest{position:absolute;z-index:5;top:calc(100% + var(--space-2));left:0;right:0;display:grid;gap:var(--space-1);padding:var(--space-2);border:0;border-radius:var(--r-l);background:var(--surface-2);box-shadow:var(--shadow-e1);overflow:hidden}   /* e1 */
.pn-help__suggest[hidden]{display:none}
.pn-help__sug{display:grid;gap:var(--space-1);padding:var(--row-pad);border-radius:var(--r-m);color:var(--ink);text-decoration:none}
.pn-help__sug b{font:var(--type-strong)}
.pn-help__sug span{font:var(--type-meta);color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.pn-help__sug:hover,.pn-help__sugall:hover{background:var(--surface-3,var(--surface))}
.pn-help__sug:focus-visible,.pn-help__sugall:focus-visible{background:var(--surface-3,var(--surface));outline:2px solid var(--focus-ring);outline-offset:-2px}
.pn-help__sugall{display:block;padding:var(--row-pad);border-radius:var(--r-m);font:var(--type-label);color:var(--ink);text-decoration:none}
.pn-help__sugnone{margin:0;padding:var(--row-pad);font:var(--type-meta);color:var(--ink-2)}

/* body */
.pn-help__body{padding:var(--space-10) 0 var(--space-16)}
.pn-help__body > .pc-wrap > * + *{margin-top:var(--section-gap)}
.pn-help__h{margin:0;font:var(--type-title);color:var(--ink)}   /* every block head 18 */
.pn-help__sechead{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--head-gap)}
.pn-help__n{font:var(--type-label);color:var(--ink-2);font-variant-numeric:tabular-nums}
.pn-help__cats > .pn-help__h,.pn-help__popular > .pn-help__h{margin-bottom:var(--head-gap)}

/* category cards = panels (MBY-145): --r-l, --panel-pad, no edge, the icon tile one step up */
.pn-help__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--stack-gap)}
.pn-help__cat{display:grid;grid-template-columns:44px minmax(0,1fr);gap:var(--space-1) var(--space-3);align-content:start;height:100%;padding:var(--panel-pad);border:0;border-radius:var(--r-l);background:var(--surface);color:var(--ink);text-decoration:none}
.pn-help__cat:hover,.pn-help__cat:focus-visible{background:var(--surface-2)}
.pn-help__ico{grid-row:1 / span 3;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-m);background:var(--surface-2);color:var(--ink)}
.pn-help__cat:hover .pn-help__ico{background:var(--surface-3,var(--surface))}
.pn-help__cat b{font:var(--type-title)}   /* a panel head (§9.2) */
.pn-help__cat span{font:var(--type-meta);color:var(--ink-2)}
.pn-help__cat i{margin-top:var(--space-1);font:var(--type-cap);font-style:normal;color:var(--ink-2);font-variant-numeric:tabular-nums}   /* MBY-014: was ink 3 (3.9:1) */

/* article rows (popular answers, a category, the results): kit rows on one panel, parted by 4 px of surface (MBY-146) */
.pn-help__list{list-style:none;margin:0;padding:var(--space-2);display:grid;gap:var(--space-1);border:0;border-radius:var(--r-l);background:var(--surface)}
.pn-help__row{display:flex;align-items:center;gap:var(--space-3);min-height:56px;padding:var(--row-pad);border-radius:var(--r-m);color:var(--ink);text-decoration:none}
.pn-help__row:hover,.pn-help__row:focus-visible{background:var(--surface-2)}
.pn-help__rowmain{flex:1 1 auto;min-width:0;display:grid;gap:var(--space-1)}
.pn-help__rowmain b{font:var(--type-strong)}
.pn-help__rowmain span{font:var(--type-meta);color:var(--ink-2)}
.pn-help__row .pn-chev{flex:none;color:var(--glyph-off)}
.pn-help__row .pn-help__aud{flex:none;margin-left:0}

/* no result, "Still need help?" = panels */
.pn-help__none{display:grid;gap:var(--space-2);justify-items:start;padding:var(--panel-pad);border:0;border-radius:var(--r-l);background:var(--surface)}
.pn-help__none p{margin:0;max-width:var(--measure-lede);font:var(--type-body);color:var(--ink-2)}
.pn-help__more{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4) var(--space-6);flex-wrap:wrap;padding:var(--panel-pad);border:0;border-radius:var(--r-l);background:var(--surface)}
.pn-help__more p{margin:var(--space-1) 0 0;font:var(--type-body);color:var(--ink-2)}

/* a category: the list and the other topics */
.pn-help__split{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--space-12);align-items:start}
.pn-help__main > * + *{margin-top:var(--section-gap)}
.pn-help__main > .pn-help__sechead + *{margin-top:0}
.pn-help__side ul{list-style:none;margin:var(--space-2) 0 0;padding:0;display:grid;gap:var(--space-1)}
.pn-help__side li a{display:flex;justify-content:space-between;gap:var(--space-2);padding:var(--space-3) 0;font:var(--type-strong);color:var(--ink);text-decoration:none}
.pn-help__side li a:hover{text-decoration:underline}

/* an article: prose details and the vote */
.pn-help__col{min-width:0}
.pn-help__prose > :first-child{margin-top:0}
.pn-help__prose h2{scroll-margin-top:calc(var(--sticky-top) + 12px)}
.pn-help__prose ol,.pn-help__prose ul{padding-left:var(--space-5)}
.pn-help__prose li + li{margin-top:var(--space-1)}
.pn-help__prose .pn-help-note{padding:var(--row-pad);border:0;border-radius:var(--r-m);background:var(--surface-2)}   /* a note (§9.4) */
.pn-help__vote{margin-top:var(--space-10);padding:var(--panel-pad);border:0;border-radius:var(--r-l);background:var(--surface);scroll-margin-top:calc(var(--sticky-top) + 12px)}
.pn-help__voteform{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3) var(--space-5);flex-wrap:wrap}
.pn-help__voteform[hidden],.pn-help__voted[hidden],.pn-help__votedno[hidden]{display:none}
.pn-help__voteq{margin:0;font:var(--type-strong);color:var(--ink)}
.pn-help__votebtns{display:flex;gap:var(--space-2)}
.pn-help__votebtns .pc-btn{min-width:84px}
.pn-help__voted{display:flex;align-items:center;gap:var(--space-2);margin:0;font:var(--type-strong);color:var(--ink)}
.pn-help__votedno{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3) var(--space-5);flex-wrap:wrap}
.pn-help__votedno b{font:var(--type-strong);color:var(--ink)}
.pn-help__votedno p{margin:var(--space-1) 0 0;font:var(--type-meta);color:var(--ink-2)}

@media (max-width:1100px){
  .pn-help__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pn-help__split{grid-template-columns:minmax(0,1fr);gap:var(--space-8)}
}
@media (max-width:700px){
  .pn-help .pn-help__hero{padding-top:var(--space-4)}
  .pn-help__search{margin-top:var(--space-5)}
  .pn-help__body{padding:var(--space-6) 0 var(--space-12)}
  .pn-help__grid{grid-template-columns:minmax(0,1fr)}
  .pn-help__row .pn-help__aud{display:none}
  .pn-help__more .pc-btn,.pn-help__none .pc-btn,.pn-help__votedno .pc-btn{width:100%}
  .pn-help__votebtns{width:100%}
  .pn-help__votebtns .pc-btn{flex:1 1 0}
  .pn-help__suggest{position:static;margin-top:var(--space-2);flex-basis:100%}
  .pn-help__search{flex-wrap:wrap}
}

/* reading measure (owner 06.11. «ja», art director pass): the 04.11. full width ran ~120 characters a line; a help article
   now reads on the guides' 720 column with the 360 side column beside it (pages/guide.css .pn-gd-body > * / guide grid) */

/* explainer video (owner 04.11., lib/explain_video.php): right column above On this page, 9:16, centred on phones */
.pn-help__videocol{display:flex;flex-direction:column;gap:var(--space-4)}
.pn-help__videocol > .pc-toc{position:static;align-self:stretch;width:100%;box-sizing:border-box}
.pn-help__video{margin:0}
.pn-help__video video{display:block;width:100%;max-width:360px;margin:0 auto;aspect-ratio:9/16;border-radius:var(--r-l);background:var(--surface);object-fit:cover}
/* night 1000 (buyer b): an article opened ~75 px below its search box (hero 32 px + section 40 px) — one 32 px step instead */
.pn-help--article .pn-gd-hero__copy{padding-bottom:16px}
.pn-help--article .pn-help__article{padding-top:16px}
/* … and the hub / topic pages: 88 px (hero 48 + body 40) between the search box and «Browse by topic» → 40 px */
.pn-help:not(.pn-help--article) .pn-help__hero .pn-gd-hero__copy{padding-bottom:16px}
.pn-help:not(.pn-help--article) .pn-help__body{padding-top:24px}