/* Native-app styling for /card/ (web + app). Loaded after card.css. */
:root{--nr:14px;--champ2:#E8D9B5}
/* buttons: dark pills, thin champagne outline, press scale */
.btn{background:#121214;color:#E6E6EA;border:1px solid rgba(201,184,150,.42);border-radius:999px;padding:11px 18px;font-size:11px;letter-spacing:.14em;display:inline-flex;align-items:center;justify-content:center;gap:8px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transition:transform .12s ease,background .2s,border-color .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent}
.btn:hover{background:#18181b;border-color:rgba(201,184,150,.7)}
.btn:active,.chip:active,.sw:active,.tab-chev:active,.hq-btn:active{transform:scale(.97)}
.btn.ghost{background:transparent;border-color:rgba(217,217,222,.22)}
.btn.primary,#shotBtn,#dlBtn{background:linear-gradient(180deg,#D6C6A3,#BBA97F);color:#0A0A0B;border-color:#C9B896;box-shadow:0 6px 18px -10px rgba(201,184,150,.8),inset 0 1px 0 rgba(255,255,255,.35)}
.btn.primary:hover,#shotBtn:hover,#dlBtn:hover{background:linear-gradient(180deg,#E0D1AF,#C4B288)}
.btn .bi{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.upl .btn,.upl-row .btn{padding:11px 12px}
/* segmented tabs */
.tabs{display:flex;gap:4px;padding:4px;background:#0E0E10;border:1px solid rgba(255,255,255,.08);border-radius:999px}
.tabs .btn.tab{flex:1 1 0;background:transparent;border:1px solid transparent;color:#A3A3AA;padding:9px 8px;font-size:10px;letter-spacing:.12em;box-shadow:none}
.tabs .btn.tab.on,.tabs .btn.tab[aria-selected=true]{background:#1A1A1D;color:var(--champ2);border-color:rgba(201,184,150,.5);box-shadow:0 0 14px -6px rgba(201,184,150,.6)}
/* option pickers: swipeable rows */
.chips,.swatches{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:6px 2px 8px;margin:0 -2px;gap:8px}
.chips::-webkit-scrollbar,.swatches::-webkit-scrollbar{display:none}
.chip{flex:none;scroll-snap-align:start;background:#121214;border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:8px 14px;font-size:12px;color:#C9CCD3;white-space:nowrap;transition:transform .12s,border-color .2s,box-shadow .2s}
.chip[aria-checked=true],.chip[aria-pressed=true]{border-color:#C9B896;color:#fff;background:rgba(201,184,150,.12);box-shadow:0 0 0 2px rgba(201,184,150,.22),0 0 14px -2px rgba(201,184,150,.55)}
.sw{flex:none;scroll-snap-align:start;width:34px;height:34px;border:1px solid rgba(255,255,255,.18)}
.sw[aria-checked=true]{outline:none;box-shadow:0 0 0 2px #0A0A0B,0 0 0 3.5px #C9B896,0 0 14px 2px rgba(201,184,150,.5)}
.field .lbl{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#8E8E96}
.panel{border-radius:var(--nr)}
.tab-chev{border-radius:50%!important}
/* bottom sheet (mobile) */
.nsh-bd{display:none}
@media (max-width:899px){
  #tp-edit.nsheet{position:fixed;left:0;right:0;bottom:0;z-index:70;margin:0;max-height:min(62svh,calc(100svh - var(--pin,330px) + 30px));min-height:38svh;overflow-y:auto;overscroll-behavior:contain;background:#0B0B0C;border-top:1px solid rgba(201,184,150,.4);border-radius:20px 20px 0 0;padding:6px 16px calc(14px + env(safe-area-inset-bottom,0px));box-shadow:0 -20px 40px -10px #000;transform:translateY(0);transition:transform .32s cubic-bezier(.2,.8,.2,1)}
  html.pl-app #tp-edit.nsheet{bottom:0;z-index:70}
  #tp-edit.nsheet.down{transform:translateY(105%)}
  #tp-edit.nsheet .nsh-h{position:sticky;top:-6px;z-index:2;display:flex;justify-content:center;padding:8px 0 6px;margin:0 -16px;background:#0B0B0C;cursor:grab;touch-action:none}
  #tp-edit.nsheet .nsh-h i{width:38px;height:4px;border-radius:4px;background:rgba(217,217,222,.35)}
  #tp-edit.nsheet .tab-chev{display:none}
  #tp-edit.nsheet.collapsed .tab-b{grid-template-rows:1fr;opacity:1}
  .nsh-bd.on{display:block;position:fixed;inset:0;z-index:69;background:rgba(0,0,0,.35)}
}
.nsh-h{display:none}
#tp-equip>.tab-h{display:none}#tp-equip.collapsed .tab-b{grid-template-rows:1fr!important;opacity:1!important}#tp-equip .tab-b>.tab-in>.panel:first-child,#tp-equip .panel:first-of-type{margin-top:0}
/* compact pass */
.upl-row{flex-wrap:nowrap!important;gap:6px!important}
.upl-row .btn{flex:1 1 0;min-width:0;height:38px;padding:0 8px!important;font-size:10px;letter-spacing:.1em;white-space:nowrap;gap:5px}
.upl-row .btn .bi{width:13px;height:13px}
/* 3 buttons (Sync Health present): Upload Screenshot gets the full first row, Scan Watch + Sync Health share the second; labels never clip */
/* Upload / Scan Watch / Sync Health on ONE row at 375-390px: content-sized flex, tight tracking, 10px type; icon only on Upload */.upl-row:has(.pl-hk){flex-wrap:nowrap!important;gap:4px!important}.upl-row:has(.pl-hk) .btn,.upl-row:has(.pl-hk) label[for=shotIn],.upl-row:has(.pl-hk) .btn:not(label){flex:1 1 auto!important;padding:0 5px!important;letter-spacing:.02em!important;font-size:10px!important;gap:3px!important;justify-content:center}.upl-row:has(.pl-hk) label[for=shotIn] .bi{width:11px!important;height:11px!important}.upl-row:has(.pl-hk) .btn:not(label[for=shotIn]) .bi{display:none!important}
.upl-row .btn{overflow:visible;text-overflow:clip}
.up-panel{padding-top:14px!important;padding-bottom:14px!important}
main.wrap>section,main.wrap>div,.layout,.controls{margin-top:0;margin-bottom:0}
.walk2{margin:10px 0 0!important;padding-top:0!important}
.w-next{margin-top:8px!important}
.controls>.tabs,.tabs{margin:10px 0 10px!important}
.tabp{margin:0!important}
.tabp .panel+.panel,.controls .panel+.panel{margin-top:10px!important}
.panel{padding:14px!important;margin-top:0}
.up-panel{padding-top:14px!important}
.panel h2{margin:0 0 10px!important}
.layout{gap:10px!important}
.up-panel{margin-top:0!important}#tp-equip .tab-b,#tp-equip .tab-in{margin-top:0!important;padding-top:0!important}.upl-row .btn{letter-spacing:.06em}
/* stat tiles */
.walk2.nst-on>.w-stats,.walk2.nst-on>.w-next{display:none!important}
.walk2.nst-on{border:0!important;background:none!important;padding:0!important}
.nst{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.nst-t{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;background:#0A0A0B;border:1px solid rgba(217,217,222,.14);border-radius:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.nst-t svg{width:15px;height:15px;fill:none;stroke:#C9B896;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;margin-bottom:2px}
.nst-t:nth-child(2) svg{fill:rgba(201,184,150,.18)}
.nst-t b{font:300 22px/1.1 Jost,system-ui,sans-serif;color:#F2F2F4;font-variant-numeric:tabular-nums;white-space:nowrap}
.nst-t:nth-child(3) b{font-size:16px;line-height:1.5;color:#E8D9B5}
.nst-t small{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#8E8E96}
.nst-n{grid-column:1/-1;margin-top:2px}
.nst-bar{height:3px;border-radius:3px;background:rgba(255,255,255,.07);overflow:hidden}
.nst-bar i{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,#A8946C,#E8D9B5);box-shadow:0 0 10px rgba(201,184,150,.8);transition:width .7s cubic-bezier(.2,.8,.2,1)}
.nst-n span{display:block;margin-top:6px;font-size:12px;color:#C9B896;letter-spacing:.02em}
/* tighter tabs->upload gap */
.upl-row{width:100%}
.controls{row-gap:10px!important;gap:10px!important}.controls>.tabs{margin-bottom:0!important}
.tabs .btn.tab{flex:1 1 auto;white-space:nowrap;letter-spacing:.08em;padding:9px 6px;gap:5px;min-width:0}.tabs .btn.tab .bi{width:13px;height:13px}
.tabs .btn.tab,.tabs .btn.tab.on{flex:1 1 0!important;font-size:9.5px;letter-spacing:.06em;padding:9px 4px}
@media (max-width:899px){
  #tp-edit.nsheet{max-height:var(--shh,52dvh)!important;height:var(--shh,52dvh);min-height:0!important}
  html.nsh-compact #scene{height:min(36dvh,260px)!important}
}
/* sheet header: full-width drag zone + close */
@media (max-width:899px){
  #tp-edit.nsheet .nsh-h{display:block;position:sticky;top:-6px;z-index:3;margin:0 -16px 8px;padding:8px 16px 0;min-height:56px;background:#0B0B0C;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
  #tp-edit.nsheet .nsh-h>i{display:block;margin:0 auto 6px;width:38px;height:4px;border-radius:4px;background:rgba(217,217,222,.35)}
  #tp-edit.nsheet .nsh-h .tab-h{margin:0;padding:6px 44px 10px 2px;border-bottom:1px solid rgba(255,255,255,.08)}
  #tp-edit.nsheet .nsh-x{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;border:1px solid rgba(217,217,222,.3);background:#141416;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent}
  #tp-edit.nsheet .nsh-x svg{width:14px;height:14px;stroke:#D9D9DE;stroke-width:1.6;stroke-linecap:round;fill:none}
  #tp-edit.nsheet .nsh-x:active{transform:scale(.94)}
}
.nsh-x{display:none}
@media (min-width:900px){.nsh-h{display:contents!important}.nsh-h>i,.nsh-h>.nsh-x{display:none!important}}
/* Scan Watch sheet: hint sits under the title, buttons get their own row */
#watchHint{position:static;margin:2px 0 14px;padding:0 6px;font-size:12.5px;letter-spacing:0;color:#A3A3AA;text-shadow:none;pointer-events:auto;line-height:1.4}
.ws .sheet-t{margin-bottom:4px}
.ws .sheet-b{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:6px 0 0;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
.ws .sheet-b .btn{flex:1 1 auto;min-height:44px;padding:12px 16px;border-radius:999px}
.ws .sheet-b .btn.text{background:transparent;border-color:rgba(217,217,222,.18)}
#watchSnap,#watchOk{background:linear-gradient(180deg,#D6C6A3,#BBA97F);color:#0A0A0B;border-color:#C9B896;box-shadow:0 6px 18px -10px rgba(201,184,150,.8),inset 0 1px 0 rgba(255,255,255,.35);flex:1 1 100%;order:-1}
.ws .ws-cam{max-height:42vh}
/* Groups bottom sheet (gsheet.js) */
.gsh-bd{position:fixed;inset:0;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .25s;z-index:80}.gsh-bd.on{opacity:1;pointer-events:auto}
.gsh{position:fixed;left:0;right:0;bottom:0;top:max(8px,env(safe-area-inset-top));z-index:81;background:#0B0B0C;border:1px solid rgba(217,217,222,.14);border-bottom:0;border-radius:18px 18px 0 0;display:flex;flex-direction:column;transform:translateY(0);transition:transform .28s cubic-bezier(.2,.8,.2,1);box-shadow:0 -12px 40px rgba(0,0,0,.6);max-width:760px;margin:0 auto}
.gsh.down{transform:translateY(105%)}.gsh[hidden]{display:none}
.gsh-h{position:relative;flex:none;padding:8px 16px 10px;text-align:center;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;border-bottom:1px solid rgba(217,217,222,.08)}
.gsh-h i{display:block;width:38px;height:4px;border-radius:4px;background:rgba(217,217,222,.35);margin:0 auto 10px}
.gsh-h b{font-weight:400;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#C9B896}
.gsh-x{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;border:1px solid rgba(217,217,222,.3);background:#141416;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent}
.gsh-x svg{width:14px;height:14px;stroke:#D9D9DE;stroke-width:1.6;stroke-linecap:round;fill:none}
.gsh-c{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:6px 0 calc(24px + env(safe-area-inset-bottom))}
.gsh-lb{font-size:12.5px;color:#9a9aa2;text-align:center;margin:6px 0 10px}.gsh-lb a{color:#C9B896}

/* LEVEL tile = step-effect switch */
.nst-t.nst-lvl{position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .25s,box-shadow .25s,transform .12s}.nst-t.nst-lvl:active{transform:scale(.97)}
.nst-t.nst-lvl .nst-fx{position:absolute;top:9px;right:10px;font:500 8.5px/1 Jost,system-ui,sans-serif;font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:#76767e}
.nst-t.nst-lvl.fx-on{border-color:rgba(120,170,255,.55);box-shadow:0 0 18px -6px rgba(110,160,255,.7),inset 0 1px 0 rgba(255,255,255,.06)}.nst-t.nst-lvl.fx-on .nst-fx{color:#9EC3FF}
.nst-t.nst-lvl.fx-ign{border-color:rgba(150,190,255,.75);box-shadow:0 0 22px -5px rgba(120,170,255,.85),inset 0 1px 0 rgba(255,255,255,.08)}
.nst-t.nst-lvl.fx-avail:not(.fx-on){border-color:rgba(201,184,150,.35)}
/* '?' help: absolutely in the card's top-right corner (no layout space), small, diagonally clear of the Sync Health pill's rounded end */
.up-panel .hq-row{top:2px!important;right:2px!important;line-height:0;display:flex}.up-panel .hq-btn{width:18px;height:18px;font-size:11px}.upl-row:has(.pl-hk){margin-right:3px}
/* History list (app): compact rows, ~3.5 rows tall so the cut-off row hints it scrolls, soft bottom fade; scroll chaining left on (no overscroll containment) */
.loglist{max-height:150px!important;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:auto;padding-bottom:10px!important}
.loglist li{padding:3px 0!important;gap:6px!important}.loglist input{padding:5px 9px!important}.loglist .ld{font-size:13px!important}
.loglist::after{content:'';display:block;position:sticky;bottom:-10px;height:24px;margin-top:-14px;background:linear-gradient(rgba(17,17,19,0),var(--bg2,#111113) 85%);pointer-events:none}
.loglist:has(.empty)::after{display:none}
/* sheet stays painted during its slide-out while its tab panel is already switched off underneath */
.nsheet.closing,.nsheet.closing[hidden]{display:block!important;pointer-events:none}
/* while the editor sheet is open (or being dragged away) the page underneath keeps the Unlockables content in place, so a drag never exposes the section below the tabs and closing causes no layout change */
.nsh-open #tp-equip[hidden]{display:block!important}

/* sync row (APP only: html.pl-hk-seg is set by app.js when Health is available; the website keeps Groups + the original upload row): Sync Health is an action in the segmented row (not a tab, never 'on'); upload row = 2 equal buttons with the '?' tucked in at the right */
.tabs .btn.tab.tab-act{color:#A3A3AA}.tabs .btn.tab.tab-act:active{color:var(--champ2)}.tabs .btn.tab.tab-act[disabled]{opacity:.75}.tabs .btn.tab.tab-act .t{overflow:hidden;text-overflow:ellipsis}
html.pl-hk-seg .up-panel{position:relative}html.pl-hk-seg .up-panel .upl-top{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:8px}
html.pl-hk-seg .up-panel .upl-top>.upl-row{grid-column:1;grid-row:1;display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important;margin:0!important}
html.pl-hk-seg .up-panel .upl-top>.upl-row .btn{width:100%;flex:none!important}
html.pl-hk-seg .up-panel .upl-top>.hq-row{position:static!important;grid-column:2;grid-row:1;margin:0!important;display:flex}html.pl-hk-seg .up-panel .hq-btn{width:26px!important;height:26px!important;font-size:12px!important}
html.pl-hk-seg .up-panel{padding-top:12px!important;padding-bottom:12px!important}
@media (max-width:389px){html.pl-hk-seg .up-panel .upl-top>.upl-row .btn{letter-spacing:.02em!important;gap:4px!important;padding:0 5px!important}html.pl-hk-seg .up-panel .upl-top{column-gap:6px}html.pl-hk-seg .up-panel .upl-top>.upl-row{gap:6px!important}}
.tabs .btn.tab[hidden],#tb-sync[hidden]{display:none!important}
/* preview (Aaron 12:55): Sync Health = champagne filled primary pill in the segmented row; Upload screenshot = darker outlined pill like Scan watch */
html.pl-hk-seg .tabs .btn.tab.tab-act#tb-sync{background:linear-gradient(180deg,#D6C6A3,#BBA97F)!important;color:#0A0A0B!important;border-color:#C9B896!important;box-shadow:0 6px 18px -10px rgba(201,184,150,.8),inset 0 1px 0 rgba(255,255,255,.35)!important;font-weight:600}
html.pl-hk-seg .tabs .btn.tab.tab-act#tb-sync:active{background:linear-gradient(180deg,#E0D1AF,#C4B288)!important}
html.pl-hk-seg .tabs .btn.tab.tab-act#tb-sync .bi,html.pl-hk-seg .tabs .btn.tab.tab-act#tb-sync svg{color:#0A0A0B;stroke:currentColor}
html.pl-hk-seg #shotBtn,html.pl-hk-seg #shotBtn2{background:#121214!important;color:#E6E6EA!important;border:1px solid rgba(201,184,150,.42)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important;font-weight:inherit}
html.pl-hk-seg #shotBtn:hover,html.pl-hk-seg #shotBtn2:hover{background:#18181b!important;border-color:rgba(201,184,150,.7)!important}
/* preview (builder rows re-render 15:5x): Sync Health pill at full strength (the inactive-tab dimming no longer applies to it) and Upload screenshot in the same weight as Scan watch */
html.pl-hk-seg .tabs .btn.tab.tab-act#tb-sync{opacity:1!important}
/* Sync Health pill always painted: solid champagne base under the gradient (iOS could drop the gradient mid-scroll and leave black text on black), no background transition, label + icon always visible */
html.pl-hk-seg .tabs .btn.tab.tab-act#tb-sync{background-color:#C9B896!important;transition:none!important;-webkit-text-fill-color:#0A0A0B}html.pl-hk-seg #tb-sync .t,html.pl-hk-seg #tb-sync .bi{visibility:visible!important;opacity:1!important;color:#0A0A0B!important}html.pl-hk-seg .tabs .btn.tab.tab-act#tb-sync[disabled]{opacity:.85!important}
html.pl-hk-seg #shotBtn,html.pl-hk-seg #shotBtn2{font-weight:500!important}