/* Climbpath home page. Colours, cards, buttons, chips and forms come from the PPL stylesheet (/ppl/css/app.css). */
.hubbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:8px;padding:calc(10px + env(safe-area-inset-top,0px)*1.4) max(14px,env(safe-area-inset-right)) 12px max(14px,env(safe-area-inset-left));background:var(--bg);border-bottom:1px solid var(--line)}
.hubbrand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:700;font-size:19px;letter-spacing:.01em;margin-right:auto;min-width:0}
.hubbrand svg{width:157px;height:19px;flex-shrink:0}
.hubtools{display:flex;gap:8px}
.hubtools .toolbtn{height:44px;width:44px}
.hubmain{max-width:1680px;margin:0 auto;padding:22px 16px 60px}
.hhero{margin:6px 0 22px}
.hhero h1{font-size:clamp(24px,5vw,34px);line-height:1.15;margin:0 0 8px;letter-spacing:-.01em}
.hhero p{color:var(--mute);margin:0 0 14px;}
/* signed out: the welcome section, under the bar's logo: what Climbpath is, then the way in, in a panel with a blue outline */
.hwel{margin:14px 0 34px;padding:26px 20px 22px;border:1px solid color-mix(in srgb,var(--blue) 40%,var(--line));border-radius:12px;background:var(--card)}
@media (min-width:640px){.hwel{padding:40px 40px 32px}}
.hwel h1{font-size:clamp(28px,5vw,46px);line-height:1.1;letter-spacing:-.015em;margin:0 0 14px;max-width:20ch}
.hwlede{color:var(--mute);margin:0;font-size:17px;line-height:1.55;max-width:62ch}
.hwaud{display:grid;gap:12px;margin:26px 0 14px;max-width:980px}
@media (min-width:760px){.hwaud{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
.hwcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:8px;padding:20px 22px}
.hwcard h2{font-size:19px;margin:0 0 6px;letter-spacing:-.005em}
.hwcard p{flex:1;color:var(--mute);margin:0;font-size:15.5px;line-height:1.5}
.hwact{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;margin-top:16px}
.hwact .btn{margin:0}
.hwsub{margin:18px 0 0;font-size:17px;line-height:1.55;max-width:62ch}
.hwel>.hwact{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;max-width:540px;margin:20px 0 14px}
@media (min-width:520px){.hwel>.hwact{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hwact .btn{width:100%}.hwact .btn.sec{border-color:var(--ink)}
.hwnote{color:var(--mute);margin:0;font-size:14px}
/* on a wide screen it spans the page: the heading on the left, what Climbpath is and the way in on the right */
@media (min-width:1040px){.hwel{padding:52px 56px 42px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);column-gap:clamp(40px,6vw,120px);align-items:start}
  .hwel h1{grid-column:1;grid-row:1/span 4;max-width:none;font-size:clamp(36px,4.1vw,64px);line-height:1.06;margin:0}
  .hwel>:not(h1){grid-column:2}.hwlede{padding-top:6px}.hwaud{grid-template-columns:minmax(0,1fr)}}
/* the apps: compact and quieter */
.happs{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.happs{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
.happ{display:flex;flex-direction:column;gap:12px;background:transparent;border:1px solid var(--line);border-radius:8px;padding:14px 16px}
.happ.isopen{background:var(--card)}
.happhead{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none}
.happhead>span{display:flex;flex-direction:column;min-width:0}
.happhead b{font-size:16.5px;line-height:1.25}
.happhead>span>span{color:var(--mute);font-size:13.5px}
.happi{width:44px;height:44px;border-radius:10px;flex-shrink:0;border:1px solid var(--line)}
.hafoot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:auto}
.halinks{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-left:auto}
.hlink{background:none;border:0;padding:4px 0;color:var(--ink);font-family:inherit;font-weight:600;font-size:14px;text-decoration:none;cursor:pointer}
.hlink:hover{text-decoration:underline;text-underline-offset:3px}
.hlink+.hlink{color:var(--mute)}
.hubmain .hopen{min-height:40px;padding:0 18px;font-size:14px}
.happd{margin:0;color:var(--mute);font-size:14.5px;line-height:1.5}
.hst{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-size:13px;font-weight:600;padding:4px 10px;border-radius:99px;border:1px solid var(--line);color:var(--mute)}
.hst .ic{width:14px;height:14px}
.hst.ok{color:var(--grn);border-color:color-mix(in srgb,var(--grn) 45%,transparent)}
.hst.wait{color:var(--yel);border-color:color-mix(in srgb,var(--yel) 45%,transparent)}
.hst.no{color:var(--red);border-color:color-mix(in srgb,var(--red) 45%,transparent)}
.hubmain a.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.hall{margin:14px 0 0}
#hadm{margin-top:14px}
.hadmrow b{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.hbadge{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:99px;background:var(--red);color:#fff;font-size:12.5px}
.hfoot{margin-top:28px;}
.hone{max-width:640px;margin:0 auto}
.hone .happd{margin:12px 0}
.hone .hst{margin-bottom:6px}
.hone textarea.search{resize:vertical;min-height:64px;font:inherit}
.hmini{display:grid;gap:8px;margin-bottom:14px}
.hmrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--line);border-radius:6px;color:var(--ink);text-decoration:none;background:var(--card2)}
.hmrow img{width:34px;height:34px;border-radius:8px}
.hmrow b{margin-right:auto}
/* admin */
.hreq{border:1px solid var(--line);border-left:3px solid var(--yel);border-radius:6px;padding:12px 14px;margin:10px 0;background:var(--card2)}
.hreq .btns{margin-top:10px}
.hnote{font-style:italic;color:var(--ink);opacity:.85;margin:2px 0}
.husers{display:grid;gap:10px}
.huser{border:1px solid var(--line);border-radius:6px;padding:12px 14px;background:var(--card2)}
.hun{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}
.hun .tag{margin:0;overflow-wrap:anywhere}
.hug{display:flex;flex-wrap:wrap;gap:6px}
.hgt{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:transparent;color:var(--mute);border-radius:99px;padding:6px 12px;font:600 13px inherit;cursor:pointer}
.hgt .ic{width:14px;height:14px}
.hgt.on{color:var(--grn);border-color:var(--grn)}
.hgt.wait{color:var(--yel);border-color:var(--yel)}
.hgt.all{color:var(--ink)}
@media (max-width:480px){.hubbrand{font-size:17px}.hubbrand svg{width:132px;height:16px}.hubtools{gap:6px}}
/* the admin page is a list of people, so it uses the width (sign-in, account and request forms stay narrow) */
@media (min-width:900px){.hone:has(.husers){max-width:none}.husers{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}}
/* big screens, as in PPL: the page fills up to 1680 px with more room around it, the top bar lines up with it,
   and the cards grow a little and put their two buttons side by side */
@media (min-width:1400px){
  .hubmain{padding:34px clamp(40px,3vw,64px) 64px}
  .hubbar{padding-left:max(14px,env(safe-area-inset-left),calc((100% - 1680px)/2 + clamp(40px,3vw,64px)));padding-right:max(14px,env(safe-area-inset-right),calc((100% - 1680px)/2 + clamp(40px,3vw,64px)))}
  .hhero{margin:10px 0 30px}
  .hhero p{font-size:17px}
  .happs{gap:18px}
  .happ{padding:18px 20px}
  .happi{width:52px;height:52px;border-radius:12px}
  .happhead b{font-size:18px}
}
/* phones: extra dark space above the bar, clear of the fade iOS draws under the status bar */
@media (max-width:700px){.hubbar{padding-top:calc(26px + env(safe-area-inset-top,0px)*1.4)}}
/* the number of access requests waiting, on the account button (the Admin row is on the account page) */
#hacc{position:relative}.hbadge.hbdot{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;font-size:11px;font-weight:700}
/* the home page's two groups: a line under each heading, and two apps side by side on a wide screen */
p.tag.hgrp{margin:-4px 2px 12px;font-size:14.5px;border-left:0;padding-left:0}
@media (min-width:900px){.happs.two{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* on a phone or tablet held upright the page is refreshed by pulling it down (hub.js): no refresh button */
@media (max-width:959px){#hrf{display:none}}
/* the runway blue of the logo’s A (--rb) and the text colour on it (--rb-on): every accent on this page uses them,
   in both themes */
:root{--rb:#4c8dff;--rb-on:#111}
/* each group’s title is an outlined tab standing on a blue line that runs across the page (the line is the tab’s
   bottom, so it stays whole when a long title wraps). Flat, no fill, no gradient. */
.hgroup{--acc:var(--rb)}
.hgroup .sech{display:flex;align-items:flex-end;margin:34px 0 12px;padding:0;border-bottom:2px solid var(--acc);font-size:12.5px;letter-spacing:.14em;color:var(--ink)}
.hgroup .sech>span{border:2px solid var(--acc);border-bottom:0;border-radius:7px 7px 0 0;padding:8px 15px 7px;line-height:1.35}
.hgroup .sech b{font-weight:800}.hgroup .sech i{font-style:normal;font-weight:600;color:var(--mute)}
@media (max-width:480px){.hgroup .sech{font-size:12px;letter-spacing:.1em}.hgroup .sech>span{padding:7px 12px 6px}}
/* a locked app's state as an icon only (its name in the tooltip): a closed padlock for the demo */
.hst.ico{padding:0;width:30px;height:30px;justify-content:center;border-radius:50%}
.hst.ico .ic{width:16px;height:16px}
.happtop{display:flex;align-items:flex-start;gap:10px}.happtop .happhead{flex:1;min-width:0}.happtop .hst.ico{flex-shrink:0;margin:-2px -4px 0 0}
/* depth: every app card sits raised on the page, with its own lighter background and a soft shadow (no gradients); it lifts a
   little under the pointer */
.happ,.happ.isopen{background:var(--card2);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 2px 4px rgba(0,0,0,.35),0 12px 28px -10px rgba(0,0,0,.6);transition:transform .15s,box-shadow .15s}
:root[data-theme=light] .happ{background:var(--card);box-shadow:0 1px 2px rgba(23,24,27,.07),0 12px 28px -12px rgba(23,24,27,.22)}
@media (hover:hover){.happ:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 4px 8px rgba(0,0,0,.35),0 18px 36px -12px rgba(0,0,0,.65)}
  :root[data-theme=light] .happ:hover{box-shadow:0 2px 4px rgba(23,24,27,.08),0 18px 36px -14px rgba(23,24,27,.28)}}
/* blue accents, in the logo's runway blue (--rb, the same in both themes):
   the main buttons, the outline of the secondary ones, the demo links' arrows, a short rule above the page's heading and
   the keyboard focus ring */
.hubmain .btn:not(.sec):not(.wsec){background:var(--rb);border-color:var(--rb);color:var(--rb-on)}
.hubmain .btn.sec,.hwact .btn.sec{border-color:var(--rb)}
.harr{color:var(--rb)}
.hwel h1::before,.hhero h1::before{content:'';display:block;width:56px;height:4px;border-radius:2px;background:var(--rb);margin-bottom:18px}
.hubmain :focus-visible,.hubbar :focus-visible{outline:2px solid var(--rb);outline-offset:2px}
/* the welcome lede as a list, each line marked in runway blue */
ul.hwlede{list-style:none;padding:0;display:grid;gap:8px}
ul.hwlede li{position:relative;padding-left:20px}
ul.hwlede li::before{content:'';position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:2px;background:var(--rb)}
/* the Open button on an app card: a runway-blue outline instead of a filled button */
.hubmain .hafoot .btn.hopen{background:transparent;color:var(--ink);border:1.5px solid var(--rb)}
.hubmain .hafoot .btn.hopen .ic{color:var(--rb)}
.hubmain .hafoot .btn.hopen:hover{background:var(--hov);filter:none}