/* BNU Tap In — PWA app screens + admin base. Loads after styles.css. */
/* =====================================================================
   BNU Tap In — PWA app screens (test). Loads AFTER ../../css/styles.css.
   Tier-4 rule: app keeps its own chrome (top bar + bottom tabs). It shares
   only the brand tokens, color bar, radius, 5:4 media ratio and outlined
   numerals/type. No marketing footer, no showcase blocks.
   ===================================================================== */
:root{
  --card-radius:clamp(16px,4.5vw,22px);
  --media-ratio:5/4;
  /* palette fix: the one off-palette hue (#7a9b6e green) becomes band cream.
     Everything that used var(--accent) — bell dot, active center tab, progress
     fill, eyebrows, banners, chart pills — flips in this single line. */
  --accent:#c9ad8f;
  --accent-dim:#4a3f33;
  --bar:linear-gradient(90deg,#1c1a19 0 25%,#6b6b45 25% 50%,#c9ad8f 50% 75%,#e8b4b8 75%);
}

/* ---- top bar: brand bar along the bottom edge ---- */
.app-topbar{border-bottom:0}
.app-topbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--bar)}
.app-topbar__title{font-size:22px}

/* ---- bottom tabs: active = cream pill, not green ---- */
.app-tab.is-active{color:var(--accent)}
.app-tab--center.is-active .app-tab__icon-wrap{background:var(--accent);border-color:var(--accent)}
.app-bottom-nav{border-top-color:var(--line)}

/* ---- shared surfaces use the radius token ---- */
.panel,.completion-meter,.app-upsell,.app-notif-panel,.connection-row,.device-row{border-radius:var(--card-radius)}
.panel{padding:clamp(18px,5vw,26px)}

/* progress meter: complete state no longer green */
.completion-meter.is-complete{border-color:var(--accent-dim)}
.completion-meter.is-complete .completion-meter__fill{background:#6b6b45}
.completion-meter__pct{-webkit-text-stroke:0}

/* ---- numbered panel heads (outlined Anton, same as account page) ---- */
.app-main{counter-reset:pn}
.app-main > .panel{counter-increment:pn}
.app-main > .panel > .panel__head h2{display:flex;align-items:baseline;gap:12px}
.app-main > .panel > .panel__head h2::before{content:counter(pn,decimal-leading-zero);font-family:var(--font-display);font-size:30px;line-height:1;
  color:transparent;-webkit-text-stroke:1.2px var(--fg-muted)}

/* ---- connections / devices rows ---- */
.connection-row,.device-row{border:1px solid var(--line);background:var(--bg-raised)}
/* The base rules (styles.css) were written for flat list rows with no side padding.
   Now that these are bordered cards they need inner padding, a full border on the
   last row, and space between rows. */
.device-row{padding:16px 18px}
.connection-row{margin-bottom:10px}
.connection-row:last-child{border-bottom:1px solid var(--line);margin-bottom:0}
.connection-row__head{padding:14px 18px}
.connection-row__detail{padding:0 18px 18px}

/* ---- onboarding: outlined last word + 5:4 hero ---- */
.onboarding__title{font-size:34px;line-height:1.02;max-width:300px}
.onboarding__title span{color:transparent;-webkit-text-stroke:1.2px var(--fg-muted)}
.onboarding__hero-photo{border-radius:var(--card-radius)}
.onboarding__tabs-list{counter-reset:ob}
.onboarding__tab-row{counter-increment:ob}
.onboarding__tab-row > div::before{content:counter(ob,decimal-leading-zero);display:block;font-family:var(--font-display);font-size:15px;line-height:1;
  color:transparent;-webkit-text-stroke:.8px var(--fg-muted);margin-bottom:3px}

/* ---- in-app shop: compact horizontal cards (variant 3), shared ratio ---- */
.app-shop-banner{border-radius:var(--card-radius)}
.app-shop-card.acc-card{flex-direction:row;align-items:stretch;border-radius:var(--card-radius);min-height:176px}
.app-shop-card__photo,
.app-shop-card__photo--band{flex:0 0 40%;width:auto;aspect-ratio:auto;background:#fdfdfd}
.app-shop-card__photo img,
.app-shop-card__photo--band img{object-fit:contain;padding:6% 2%;transform:none;background:#fdfdfd}
.app-shop-card__photo:not(.app-shop-card__photo--band) img{object-fit:contain;padding:0;transform:scale(1.12)}
.app-shop-card__body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:14px 16px}
.app-shop-card__body h3{margin-bottom:8px;font-size:16px}
.app-shop-card__footer{flex-direction:column;align-items:stretch;gap:10px;margin-top:12px}
.app-shop-card .btn{width:100%;height:40px;padding:0 14px}
@media (min-width:480px){.app-shop-card.acc-card{min-height:200px}.app-shop-card__body h3{font-size:18px}}

/* ---- fixes found while reviewing ---- */
.onboarding__title span{white-space:nowrap}
.onboarding__tab-icon{display:flex!important;align-items:center;justify-content:center}
/* ghost buttons were dark-on-dark (btn text color #0a0a0a + inline background:none) */
.btn[style*="background:none"]{color:var(--fg)}
/* footer logo PNG has an opaque white backdrop: invert + screen drops it on dark */
.app-footer-logo img{filter:invert(1);mix-blend-mode:screen;opacity:1}
.app-footer-logo{opacity:.5}

/* ---- My QR sheet (opened from the QR button in the top bar) ---- */
.qr-layer{position:fixed;inset:0;z-index:400;display:none}
.qr-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.66);opacity:0;transition:opacity .22s ease}
.qr-sheet{
  position:absolute;left:0;right:0;bottom:0;max-width:520px;margin:0 auto;
  background:var(--bg-raised);border:1px solid var(--line);border-bottom:0;border-radius:22px 22px 0 0;
  padding:0 20px calc(22px + env(safe-area-inset-bottom,0px));
  max-height:94vh;overflow-y:auto;overscroll-behavior:contain;
  transform:translateY(100%);transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.qr-layer.is-open .qr-backdrop{opacity:1}
.qr-layer.is-open .qr-sheet{transform:none}
.qr-grab{height:26px;display:flex;align-items:center;justify-content:center;touch-action:none}
.qr-grab::before{content:"";width:38px;height:4px;border-radius:2px;background:var(--line)}
.qr-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.qr-head h2{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:22px;letter-spacing:.01em;margin:0}
.qr-x{width:36px;height:36px;border-radius:50%;background:none;border:1px solid var(--line);color:var(--fg);font-size:22px;line-height:1;cursor:pointer}
.qr-x:hover{border-color:var(--fg-muted)}
.qr-tile{background:#fff;border-radius:18px;padding:12px;width:min(76vw,320px);margin:4px auto 0}
.qr-tile canvas{display:block;width:100%;height:auto}
.qr-name{font-family:var(--font-display);font-size:22px;text-transform:uppercase;text-align:center;margin:16px 0 0}
.qr-url{font-size:12.5px;color:var(--fg-muted);text-align:center;margin:4px 0 0;word-break:break-all}
.qr-note{font-size:13px;color:var(--fg-muted);text-align:center;margin:10px 0 0}
.qr-actions{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.qr-empty{text-align:center;padding:12px 0 8px}
.qr-empty__title{font-family:var(--font-display);font-size:22px;text-transform:uppercase;margin:0 0 4px}
.qr-empty .btn{margin-top:18px}
.qr-preview img{display:block;max-width:100%;max-height:52vh;margin:0 auto;border-radius:12px}
.qr-toast{position:absolute;left:50%;top:-52px;transform:translateX(-50%) translateY(8px);background:var(--fg);color:#0a0a0a;
  font-size:13px;font-weight:600;padding:9px 16px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;white-space:nowrap}
.qr-toast.is-on{opacity:1;transform:translateX(-50%)}
@media (prefers-reduced-motion:reduce){.qr-sheet,.qr-backdrop,.qr-toast{transition:none}}

/* ---- Devices: one card per band or card ---- */
.device-card{background:var(--bg-raised);border:1px solid var(--line);border-radius:var(--card-radius);margin-bottom:12px}
.device-card__heading{margin:0;font:inherit}
.device-card__toggle{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;background:none;border:0;border-radius:var(--card-radius);
  color:inherit;font:inherit;text-align:left;cursor:pointer}
.device-card__toggle:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.device-card__thumb{display:block;flex:0 0 96px;aspect-ratio:1200/575;border-radius:10px;overflow:hidden;background:#fdfdfd}
.device-card__thumb img{display:block;width:100%;height:100%;object-fit:cover}
.device-card__info{display:block;flex:1;min-width:0}
.device-card__name{display:block;font-size:17px;font-weight:600;line-height:1.2}
.device-card__code{display:block;font-size:12px;letter-spacing:.04em;color:var(--fg-muted);margin-top:3px;overflow-wrap:anywhere}
.device-card__status{display:inline-flex;margin-top:7px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg-muted);border:1px solid var(--line);border-radius:999px;padding:3px 9px}
.device-card__status.is-link{color:var(--accent);border-color:var(--accent-dim)}
.device-card__chev{flex:0 0 auto;display:flex;color:var(--fg-muted);transition:transform .25s ease}
.device-card.is-open .device-card__chev{transform:rotate(180deg)}
/* open / close: the panel animates its height; closed content is also hidden from taps and screen readers */
.device-card__panel{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .25s ease,visibility 0s .25s}
.device-card.is-open .device-card__panel{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .25s ease,visibility 0s}
.device-card__body{min-height:0;overflow:hidden;padding:0 16px}
.device-card.is-open .device-card__body{padding-bottom:14px}
.device-card__section{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.device-card__label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-muted);margin:0 0 10px}
.device-card__hint{font-size:12.5px;line-height:1.45;color:var(--fg-muted);margin:10px 2px 0}
.device-card__url{display:flex;gap:8px;margin-top:12px}
.device-card__url[hidden],.device-rename[hidden]{display:none}
.device-card__url input,.device-rename input{flex:1;min-width:0;height:44px;padding:0 14px;background:var(--bg);border:1px solid var(--line);
  border-radius:12px;color:var(--fg);font-family:var(--font-body);font-size:16px}
.device-card__url input:focus,.device-rename input:focus{outline:2px solid var(--accent);outline-offset:1px}
.device-card__url .btn,.device-rename .btn{height:44px;padding:0 20px;font-size:14px}
.device-card__actions{display:flex;gap:10px;margin-top:16px}
.device-card__actions .btn{flex:1;height:44px;padding:0 12px;font-size:14px}
.device-rename{display:flex;gap:8px;margin-top:12px}
.device-card__foot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:6px}
.linkbtn{background:none;border:0;padding:8px 2px;color:var(--fg-muted);font:600 13px var(--font-body);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.linkbtn:hover{color:var(--fg)}
.linkbtn.is-danger{color:#d98f8f}

/* two-way switch (also used for other either/or settings) */
.seg{display:flex;gap:4px;padding:4px;background:var(--bg);border:1px solid var(--line);border-radius:999px}
.seg__btn{flex:1;height:38px;border:0;border-radius:999px;background:none;color:var(--fg-muted);font:600 13.5px var(--font-body);cursor:pointer;
  transition:background .15s ease,color .15s ease}
.seg__btn.is-active{background:var(--fg);color:#0a0a0a}
.seg__btn:focus-visible,.linkbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.seg__btn,.device-card__chev,.device-card__panel{transition:none!important}}

/* Card photo (front + back) is already framed: show it as-is, no zoom. */
img[src*="bnu-card-v3"]{width:100% !important;height:100% !important;max-width:none !important;transform:none !important;padding:0 !important;object-fit:contain !important}

.hire-title{display:inline-block;color:#fff;font-weight:800;text-transform:uppercase;letter-spacing:.06em;border-bottom:2px solid currentColor;line-height:1.3;}