/* GoldBricks One – shared design tokens, shell (rail / tab bar / palette), responsive layer. Loaded LAST on every page, so it
   re-themes the existing page styles through the same variable names. Light + dark. Font: Manrope, self-hosted (no CDN). */
@font-face{font-family:"Manrope";src:url("/fonts/manrope-latin-wght-normal.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}

:root{
  /* new tokens: navy + white */
  --bg:#F3F6FB; --surface:#FFFFFF; --ink:#0F1B33; --muted:#5B6780; --hair:#E2E8F2; --rail:#0B2A66;
  --gold:#1F55D1; --danger:#A33A2B; --danger-bg:#FBEDEA; --success:#3F6B3A; --success-bg:#EEF3EC; --info:#2F5C9E; --info-bg:#E8EEF7;
  /* names the existing pages already use (the old "gold" names now carry the primary blue) */
  --page:var(--bg); --soft:#EEF2F9; --hover:#EEF2F9; --line:var(--hair); --line2:#D5DDEB; --ink2:var(--muted); --ink3:#8E99AE;
  --gold-600:#1A47AD; --gold-ink:#0F2F7A; --gold-soft:#E8EEFC; --gold-line:#C3D3F6;
  --green:var(--success); --green-soft:var(--success-bg); --red:var(--danger); --red-soft:var(--danger-bg); --blue:var(--info); --blue-soft:var(--info-bg);
  --amber:#8A6A1F; --amber-soft:#F7F0DF; --grey-soft:#E9EEF6;
  --side:var(--surface); --side2:var(--hover); --side3:var(--surface); --sidetext:var(--ink); --sidetext2:var(--muted);
  --r:16px; --r-sm:10px; --r-pill:999px;
  --sh1:none; --sh2:0 6px 20px rgba(15,27,51,.10); --shadow:0 18px 50px rgba(15,27,51,.20);
  --font:Manrope,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --z:1; --navh:3.75rem; --tabh:4rem; --toph:3.25rem; --ease:cubic-bezier(.2,.7,.2,1);
}
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0C111B; --surface:#151C2A; --ink:#E8ECF4; --muted:#98A3B8; --hair:#232D40; --rail:#081A3E;
  --gold:#6E98F5; --danger:#E58B7B; --danger-bg:#2B1815; --success:#86B982; --success-bg:#16241A; --info:#85AAE0; --info-bg:#14202F;
  --soft:#1A2333; --hover:#1D2638; --line2:#2E3A52; --ink3:#6F7B92;
  --gold-600:#8EB0F8; --gold-ink:#CFDDFC; --gold-soft:#16233F; --gold-line:#2B4278;
  --amber:#D9B25A; --amber-soft:#2A2414; --grey-soft:#202A3C;
  --sh2:0 6px 20px rgba(0,0,0,.45); --shadow:0 18px 50px rgba(0,0,0,.6);
}


html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-variant-numeric:tabular-nums;min-height:calc(100dvh / var(--z))}
[hidden]{display:none!important}
.kpi b,.stat b,.tile .v,.tc-pct{font-weight:800}
.card2:hover,.tcard:hover,.stat:hover,.tile:hover,.kpi:hover{box-shadow:var(--sh2)}
.btn.primary,.go{background:var(--gold);border-color:var(--gold);color:#fff}
.fab{display:none!important}

/* ---------- dark: surfaces that the older page styles hard-code as white */
html[data-theme="dark"] .card2,html[data-theme="dark"] .card,html[data-theme="dark"] .modal,html[data-theme="dark"] .panel,html[data-theme="dark"] .inbox,
html[data-theme="dark"] .tcard,html[data-theme="dark"] .lc,html[data-theme="dark"] .lrow,html[data-theme="dark"] .stat,html[data-theme="dark"] .tile,
html[data-theme="dark"] .kpi,html[data-theme="dark"] .chip,html[data-theme="dark"] .tab,html[data-theme="dark"] .step,html[data-theme="dark"] .btn,
html[data-theme="dark"] .inp,html[data-theme="dark"] .sel,html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea,
html[data-theme="dark"] .listbox,html[data-theme="dark"] .tchip,html[data-theme="dark"] .card,html[data-theme="dark"] .rep,html[data-theme="dark"] .toast,
html[data-theme="dark"] .top,html[data-theme="dark"] .tools,html[data-theme="dark"] .tabs,html[data-theme="dark"] .side,html[data-theme="dark"] .main,
html[data-theme="dark"] .bar,html[data-theme="dark"] .sub,html[data-theme="dark"] details,html[data-theme="dark"] .pick,html[data-theme="dark"] .menu,
html[data-theme="dark"] .installbar,html[data-theme="dark"] .mf,html[data-theme="dark"] .seg,html[data-theme="dark"] .t2 th,html[data-theme="dark"] .check{background-color:var(--surface);color:var(--ink);border-color:var(--hair)}
html[data-theme="dark"] .col,html[data-theme="dark"] .nav:hover,html[data-theme="dark"] .t2 tr:hover td{background-color:var(--hover)}
html[data-theme="dark"] .nav.on{background-color:var(--gold-soft);color:var(--gold-ink)}
html[data-theme="dark"] .btn.primary,html[data-theme="dark"] .go{background-color:var(--gold);border-color:var(--gold);color:#0B1530}
html[data-theme="dark"] .modal .mf{background:var(--surface)}
html[data-theme="dark"] .logbtn:not(.running),html[data-theme="dark"] .installbar .btn{color:#0B1530}
html[data-theme="dark"] .muted,html[data-theme="dark"] .sub,html[data-theme="dark"] small{color:var(--muted)}
html[data-theme="dark"] table,html[data-theme="dark"] th,html[data-theme="dark"] td{border-color:var(--hair)}
html[data-theme="dark"] img{opacity:.92}
html[data-theme="dark"] .back{background:rgba(0,0,0,.6)}
html[data-theme="dark"] [style*="background:#fff"],html[data-theme="dark"] [style*="background: #fff"]{background:var(--surface)!important}

/* ---------- wide screens: use the width (up to ~1800px), grids add columns */
.wrap{max-width:1800px!important}
.dash,.set{max-width:min(100%,1800px)!important}
.dashgrid{max-width:min(100%,1800px)!important;grid-template-columns:minmax(0,1fr) clamp(300px,22vw,520px)}
.col{max-width:none!important;flex:1 1 260px;min-width:240px}
.grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))!important}
.tcards{grid-template-columns:repeat(auto-fill,minmax(clamp(200px,12vw,320px),1fr))}
.kpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important}
@media (max-width:1000px){.dashgrid{grid-template-columns:1fr}}
@media (pointer:coarse){
  .btn,.btn.small,.nav,.sel,.inp,.tab,.chip,.step,.tchip,.seg button,select,input:not([type=checkbox]):not([type=radio]):not([type=file]){min-height:44px}
  .check{position:relative} .check::after{content:"";position:absolute;inset:-12px}
}
html.pres .btn,html.pres .btn.small,html.pres .nav,html.pres .sel,html.pres .inp,html.pres .tab,html.pres .chip{min-height:56px}
@media (max-width:600px){
  .t2,.t2 tbody{display:block;width:100%}
  .t2 tr{display:block;padding:10px 12px;border-bottom:1px solid var(--line)}
  .t2 tr:has(>th){display:none}
  .t2 td{display:block;border:0;padding:2px 0;text-align:left!important;white-space:normal;height:auto}
}
html.pres .side,html.pres .burger,html.pres .installbar{display:none!important}
html.pres .tcards{grid-template-columns:repeat(auto-fit,minmax(clamp(280px,20vw,560px),1fr))}
html.pres .dash,html.pres .dashgrid,html.pres .set{max-width:none!important}

/* ---------- master Settings + embedded frames */
.setx{display:grid;grid-template-columns:minmax(200px,250px) minmax(0,1fr);gap:20px;align-items:start}
.sx-nav{position:sticky;top:8px;display:grid;gap:10px}
#sxlist{display:grid;gap:4px}
.sx-b{text-align:left;padding:9px 12px;border-radius:9px;color:var(--ink2);font-weight:550} .sx-b:hover{background:var(--hover)} .sx-b.on{background:var(--gold-soft);color:var(--gold-ink);font-weight:650}
.sx-s h2{margin:0 0 12px;font-size:20px}
iframe.gbframe{display:block;width:100%;min-height:260px;border:0;color-scheme:normal}
@media (max-width:820px){ .setx{grid-template-columns:1fr} .sx-nav{position:static} #sxlist{display:flex;overflow-x:auto;gap:6px} .sx-b{white-space:nowrap;border:1px solid var(--line)} }
body.embed{background:var(--surface)} body.embed .wrap{max-width:none!important;padding-bottom:8px} body.embed .top,body.embed #fab{display:none!important}

/* ---------- shell: top navigation bar (desktop / tablet). Phones use the top bar + bottom tabs below. */
#gbrail{position:fixed;inset:0 0 auto 0;height:var(--navh);background:var(--rail);color:#fff;display:flex;align-items:center;gap:8px;padding:0 clamp(16px,3vw,40px);z-index:40}
body.hasshell{padding-top:var(--navh)}
#gbrail a,#gbrail button{color:inherit;text-decoration:none}
#gbrail .ic,#gbtabs .ic{flex:none}
.tn-logo{display:flex;align-items:center;gap:10px;flex:none;margin-right:14px;font-weight:800;font-size:1.05rem;letter-spacing:-.01em}
.tn-logo img{width:34px;height:34px;border-radius:9px;object-fit:contain;background:#fff}
.tn-nav{display:flex;align-items:stretch;height:100%;gap:2px}
.tn-i{position:relative;display:flex;align-items:center;gap:8px;padding:3px 14px 0;color:#C5D2EE!important;font-weight:600;font-size:.95rem;border-bottom:3px solid transparent;transition:color .15s}
.tn-i:hover{color:#fff!important}
.tn-i.on{color:#fff!important;border-bottom-color:#fff}
.tn-count{min-width:20px;height:20px;line-height:20px;text-align:center;border-radius:10px;background:#fff;color:var(--rail);font-size:.72rem;font-weight:800;padding:0 6px}
.tn-sp{flex:1}
.tn-search{display:flex;align-items:center;gap:8px;height:2.5rem;width:min(26vw,320px);padding:0 12px;border-radius:10px;background:rgba(255,255,255,.12);color:#D5DEF2!important;font-size:.88rem;text-align:left}
.tn-search:hover{background:rgba(255,255,255,.2)}
.tn-st{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tn-search kbd{font:inherit;font-size:.7rem;border:1px solid rgba(255,255,255,.3);border-radius:6px;padding:1px 6px}
.tn-new{display:flex;align-items:center;gap:6px;height:2.5rem;padding:0 16px;border-radius:10px;background:#fff;color:var(--rail)!important;font-weight:800;font-size:.9rem}
.tn-new:hover{filter:brightness(.94)}
.tn-ic{position:relative;display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:10px;color:#D5DEF2!important}
.tn-ic:hover{background:rgba(255,255,255,.14);color:#fff!important}
.tn-av{width:2.3rem;height:2.3rem;border-radius:50%;background:#fff;color:var(--rail)!important;font-weight:800;font-size:.9rem;flex:none}
.tn-av:hover{filter:brightness(.92)}
.dot{position:absolute;top:8px;right:9px;width:9px;height:9px;border-radius:50%;background:#FF5D5D;box-shadow:0 0 0 2px var(--rail)}
/* classes the phone top bar still uses */
.rl-logo{display:flex;align-items:center;gap:10px;padding:2px 6px;min-width:0;flex:1;font-weight:800;font-size:16px;letter-spacing:-.01em}
.rl-logo img{width:32px;height:32px;border-radius:9px;object-fit:contain;background:#fff;flex:none}
.rl-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;flex:none}
.rl-sp{flex:1}
@media (max-width:1100px){.tn-search{width:2.5rem;padding:0;justify-content:center}.tn-st,.tn-search kbd{display:none}}
@media (max-width:900px){.tn-name{display:none}.tn-logo{margin-right:6px}.tn-i{padding:3px 10px 0}}
#gbtabs,#gbtop,#gbfab{display:none}

/* ---------- popovers, sheets, palette */
#gbshade{position:fixed;inset:0;z-index:58;background:rgba(10,11,14,.45)}
#gbpop{position:fixed;z-index:60;min-width:240px;max-width:min(380px,calc(100vw - 16px));background:var(--surface);color:var(--ink);border:1px solid var(--hair);border-radius:16px;box-shadow:var(--shadow);max-height:calc(100dvh - 24px);overflow:auto;padding:6px}
#gbpop.notes{width:min(380px,calc(100vw - 16px));padding:0}
.gb-h{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;font-weight:800} .gb-h button{font-size:12.5px;color:var(--gold-600);font-weight:700}
.gb-row{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:0 12px;border-radius:10px;color:var(--ink);font-weight:600;text-align:left;text-decoration:none}
.gb-row:hover{background:var(--hover)} .gb-row .ic{color:var(--muted)}
.gb-who{padding:10px 12px;display:grid;border-bottom:1px solid var(--hair);margin-bottom:4px} .gb-who small{color:var(--muted)}
.gb-theme{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 12px;min-height:44px;font-weight:600}
.seg{display:inline-flex;border:1px solid var(--hair);border-radius:10px;overflow:hidden}
.seg button{padding:6px 12px;font-size:13px;font-weight:600;color:var(--muted);min-height:34px}
.seg button.on{background:var(--gold-soft);color:var(--gold-ink)}
.gb-n{display:grid;gap:2px;padding:10px 14px;border-bottom:1px solid var(--hair);font-size:13px;color:var(--muted);text-decoration:none} .gb-n.un{background:var(--gold-soft)} .gb-n b{color:var(--ink)}
.gb-empty{padding:18px 14px;text-align:center;color:var(--muted)}
#gbpal{position:fixed;inset:0;z-index:62;display:flex;justify-content:center;align-items:flex-start;padding:12vh 12px 0;pointer-events:none}
.pal-box{pointer-events:auto;width:min(640px,100%);background:var(--surface);color:var(--ink);border:1px solid var(--hair);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.pal-in{display:flex;align-items:center;gap:10px;padding:0 16px;border-bottom:1px solid var(--hair);color:var(--muted)}
.pal-in input{flex:1;height:56px;border:0;background:transparent;color:var(--ink);font:inherit;font-size:16px;outline:none}
.pal-in kbd{font:inherit;font-size:11px;border:1px solid var(--hair);border-radius:6px;padding:1px 6px}
.pal-res{max-height:min(56vh,480px);overflow:auto;padding:6px}
.pal-g{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);padding:10px 10px 4px}
.pal-i{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 10px;border-radius:10px;color:var(--ink);text-decoration:none;font-weight:600}
.pal-i small{margin-left:auto;color:var(--muted);font-weight:500;font-size:12px;white-space:nowrap}
.pal-i.on,.pal-i:hover{background:var(--gold-soft)}
.pal-i .ic{color:var(--muted)}

/* ---------- tablets / phones */
.inbox{left:auto!important;right:12px!important;top:calc(var(--navh) + 8px)!important}
@media (min-width:821px){ html.pres #gbrail{display:none} html.pres body.hasshell{padding-left:0} }
@media (max-width:820px){
  #gbrail{display:none}
  body.hasshell{padding-left:0;padding-top:var(--toph);padding-bottom:calc(var(--tabh) + env(safe-area-inset-bottom))}
  #gbtop{display:flex;position:fixed;top:0;left:0;right:0;height:var(--toph);z-index:41;align-items:center;gap:4px;padding:0 8px;background:var(--rail);border-bottom:1px solid rgba(255,255,255,.1);color:#fff}
  #gbtop .rl-logo{flex:none;padding:0 6px;color:#fff} .tp-title{font-size:16px;font-weight:800} #gbtop .rl-icon{color:#D5DEF2}
  #gbtop .dot{box-shadow:0 0 0 2px var(--rail)}
  #gbtabs{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:41;height:calc(var(--tabh) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--surface);border-top:1px solid var(--hair)}
  .tb{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;font-weight:700;color:var(--muted);text-decoration:none;min-height:56px}
  .tb.on{color:var(--gold-600)} .tb .dot{top:8px;right:calc(50% - 18px);box-shadow:0 0 0 2px var(--surface)}
  #gbfab{display:flex;position:fixed;right:16px;bottom:calc(var(--tabh) + 14px + env(safe-area-inset-bottom));z-index:42;width:56px;height:56px;border-radius:50%;background:var(--gold);color:#fff;align-items:center;justify-content:center;box-shadow:var(--sh2),0 8px 24px rgba(0,0,0,.22)}
  #gbpop.sheet{left:0!important;right:0;top:auto!important;bottom:0;max-width:none;width:100%;border-radius:20px 20px 0 0;padding-bottom:calc(10px + env(safe-area-inset-bottom));max-height:80dvh}
  #gbpop.sheet.notes{width:100%}
  html.pres #gbtabs,html.pres #gbtop,html.pres #gbfab{display:none}
  html.pres body.hasshell{padding:0}
  .app{height:calc(100dvh / var(--z) - var(--toph) - var(--tabh))}
  .side{top:var(--toph)!important;bottom:calc(var(--tabh) + env(safe-area-inset-bottom))!important}
  .logbtn{bottom:calc(var(--tabh) + 12px + env(safe-area-inset-bottom))!important;right:84px!important}
  .installbar{bottom:calc(var(--tabh) + 76px + env(safe-area-inset-bottom))!important}
  .inbox{left:8px!important;right:8px!important;top:calc(var(--toph) + 6px)!important;width:auto!important}
  .view{padding-bottom:120px}
}
@media (min-width:821px){ .app{height:calc(100dvh - var(--navh))} }
.app.nomenu .side,.app.nomenu .burger{display:none}
html[data-theme="dark"] .card2 h3,html[data-theme="dark"] h1,html[data-theme="dark"] h2,html[data-theme="dark"] h3,html[data-theme="dark"] h4{background-color:transparent;color:var(--ink)}
html[data-theme="dark"] .card2 h3{border-color:var(--hair)}
html[data-theme="dark"] .dnotes textarea,html[data-theme="dark"] .notes textarea{background:var(--surface);color:var(--ink)}

/* ---------- hub tabs (Work / Sites / Sales / Insights) */
.hubtabs{display:flex;gap:2px;padding:0 clamp(16px,3vw,40px);border-bottom:1px solid var(--hair);overflow-x:auto;background:var(--bg);position:sticky;top:0;z-index:12;-webkit-overflow-scrolling:touch}
.hubtabs:empty{display:none}
.hubtab{padding:16px 14px 13px;font-weight:700;font-size:14px;color:var(--muted);border-bottom:3px solid transparent;white-space:nowrap;text-decoration:none;transition:color .15s}
.hubtab:hover{color:var(--ink)} .hubtab.on{color:var(--ink);border-bottom-color:var(--gold)}
.subchips{display:flex;gap:8px;flex-wrap:wrap;padding:12px clamp(16px,3vw,40px) 0}
.subchips button{height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--hair);background:var(--surface);color:var(--muted);font-weight:700;font-size:13px}
.subchips button.on{background:var(--gold-soft);border-color:var(--gold-line);color:var(--gold-ink)}
/* the task sidebar is replaced by the Work hub tabs */
.side,.burger{display:none!important}
body.hasshell:not(.isLead) .wrap > .top{display:none}
.dash > .secthead{display:none}

/* ---------- phase 5: motion (150–250 ms), skeletons, empty states */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}
#gbrail{view-transition-name:gbrail} #gbtabs{view-transition-name:gbtabs} #gbtop{view-transition-name:gbtop}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.6)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes skl{to{background-position:-200% 0}}
.enter .row{animation:rise .24s var(--ease) both;animation-delay:calc(var(--i,0) * 28ms)}
.enter .tc,.enter .k,.enter .ph{animation:rise .24s var(--ease) both}
.enter .tc:nth-child(2),.enter .k:nth-child(2){animation-delay:40ms} .enter .tc:nth-child(3),.enter .k:nth-child(3){animation-delay:80ms} .enter .tc:nth-child(n+4){animation-delay:120ms}
.ico.done{animation:pop .3s var(--ease)}
.view.enter>*{animation:rise .2s var(--ease) both}
.skl{min-height:72px;margin:12px 0;border-radius:var(--r);background:linear-gradient(90deg,var(--hover),var(--soft),var(--hover));background-size:200% 100%;animation:skl 1.2s linear infinite}
.empty{padding:44px 20px;text-align:center;color:var(--muted)}
.empty b{display:block;margin-bottom:4px;color:var(--ink);font-size:18px;font-weight:800}
.empty.small{padding:20px 16px}
/* "Log activity" lives in + New everywhere; the bar stays only in Work (and while a timer runs) */
.app.nomenu .logbtn:not(.running){display:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  @view-transition{navigation:none}
}

/* ---------- screen scaling without page zoom: the root font-size follows the screen (≈15px phone → 18px at 1920 → 22px 4K) */
html{font-size:clamp(15px,14.3px + .194vw,22px)}
html.pres{font-size:calc(clamp(15px,14.3px + .194vw,22px) * 1.25)}
body{font-size:.9333rem}

/* Hub tab strip aligns with the page content (first tab label = content left edge) */
.hubtabs{padding:0 calc(var(--s4) - 14px);margin-bottom:var(--s2)}
.wrap .hubtabs{padding:0;margin:0 0 var(--s3) -14px}
.wrap .hubtabs + .chips,.wrap .hubtabs ~ .chips{margin-top:0}
.chips{margin-bottom:var(--s3)}
@media (max-width:600px){.hubtabs{padding:0 2px}.wrap .hubtabs{margin-left:-14px}}
/* Same side gutter on every page (Tasks 24px = LMS = Home) */
.wrap{padding-left:var(--s4);padding-right:var(--s4)}
@media (max-width:600px){.wrap{padding-left:var(--s3);padding-right:var(--s3)}}
/* Dark theme: unread notification rows (were hard-coded cream) */
html[data-theme="dark"] .iitem.unread,html[data-theme="dark"] .gb-n.un{background:rgba(110,152,245,.16)}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]):not([data-theme="dark"]) .iitem.unread,html:not([data-theme="light"]):not([data-theme="dark"]) .gb-n.un{background:rgba(110,152,245,.16)}}

/* Presentation mode: slim top menu so every screen can be shown (rail / tab bar stay hidden) */
#gbpresbar{display:none}
html.pres #gbpresbar{display:flex;position:fixed;top:0;left:0;right:0;height:var(--toph);z-index:60;align-items:center;gap:6px;padding:0 16px;background:var(--rail);color:#fff;border-bottom:1px solid rgba(255,255,255,.08);overflow-x:auto}
.pb-i{display:flex;align-items:center;gap:8px;padding:0 14px;height:calc(var(--toph) - 14px);border-radius:10px;color:#C9CCD2;font-weight:700;font-size:1rem;text-decoration:none;white-space:nowrap} .pb-i:hover{color:#fff} .pb-i.on{background:rgba(255,255,255,.12);color:#fff}
#gbpx{flex:none;min-height:40px;padding:0 16px;border:0;border-radius:999px;background:var(--gold);color:#fff;font-weight:700;cursor:pointer}
html.pres body.hasshell{padding-top:var(--toph)!important}
html.pres .app{height:calc(100dvh - var(--toph))!important}
@media (max-width:600px){ .pb-i span{display:none} .pb-i{padding:0 10px} }

/* phone date / time fields: never wider than their box (iPhones give them a fixed minimum width) */
input[type="date"],input[type="time"],input[type="datetime-local"],input[type="month"]{min-width:0;max-width:100%;width:100%;-webkit-appearance:none;appearance:none;text-align:left}
.qa-f>*,.subadd>*,.two>*,.afilters>*{min-width:0}