/* ============================================================
   App shell
   ============================================================ */

.app-hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(251,250,247,.86);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid rgba(233,229,222,.9)}
.app-hdr__in{max-width:var(--wrap);margin-inline:auto;padding-inline:20px;min-height:var(--hdr);display:flex;align-items:center;gap:1.75rem}
.app-hdr__logo{display:flex;flex:none}
.app-hdr__logo img{height:44px;width:auto}
.app-nav{display:flex;gap:.15rem;align-items:center}
.app-nav a{display:inline-flex;align-items:center;gap:.4rem;font-weight:500;font-size:.95rem;color:var(--ink);padding:.5rem .85rem;border-radius:999px}
.app-nav a:hover{background:rgba(29,26,27,.05);text-decoration:none}
.app-nav a[aria-current]{color:var(--blue-700);background:var(--blue-50)}
.app-nav__admin{color:var(--gray-600)!important}
.app-hdr__end{margin-left:auto;display:flex;align-items:center;gap:.5rem}
.app-hdr__help{display:inline-flex;align-items:center;gap:.4rem;color:var(--gray-700);font-size:.92rem;font-weight:500;padding:.5rem .7rem;border-radius:999px}
.app-hdr__help:hover{background:rgba(29,26,27,.05);text-decoration:none;color:var(--ink)}

/* account menu */
.acct{position:relative}
.acct>summary{list-style:none;display:flex;align-items:center;gap:.5rem;cursor:pointer;padding:.25rem .5rem .25rem .25rem;border-radius:999px;border:1px solid var(--gray-200);background:#fff;min-height:44px}
.acct>summary::-webkit-details-marker{display:none}
.acct>summary:hover{border-color:var(--gray-300)}
.acct__name{font-weight:600;font-size:.92rem}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--amber-100);color:var(--amber-700);font-family:var(--ff-mono);font-weight:600;font-size:.78rem}
.acct__menu{position:absolute;right:0;top:calc(100% + 8px);width:280px;background:#fff;border:1px solid var(--gray-200);
  border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:.5rem;animation:drop .2s var(--t) both;z-index:60}
@keyframes drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.acct__who{padding:.6rem .75rem .75rem;border-bottom:1px solid var(--gray-100);margin-bottom:.35rem}
.acct__who strong{display:block}
.acct__who span{font-size:.85rem;color:var(--gray-600)}
.acct__menu a{display:flex;align-items:center;gap:.65rem;padding:.6rem .75rem;border-radius:var(--r);color:var(--ink);font-size:.95rem;font-weight:500}
.acct__menu a:hover{background:var(--gray-100);text-decoration:none}
.acct__menu a .ico{color:var(--gray-600)}
.acct__menu hr{border:0;border-top:1px solid var(--gray-100);margin:.35rem 0}

/* page header: the one place the brand texture shows */
.page-hdr{position:relative;isolation:isolate;overflow:hidden;border-bottom:1px solid var(--gray-200);
  background:radial-gradient(55% 90% at 95% 0%,rgba(23,153,206,.11),transparent 60%),
             radial-gradient(45% 80% at 0% 100%,rgba(252,176,64,.13),transparent 60%),var(--paper)}
.page-hdr::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(29,26,27,.08) 1px,transparent 1.2px);background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 90%);mask-image:linear-gradient(180deg,#000,transparent 90%)}
.page-hdr__in{max-width:var(--wrap);margin-inline:auto;padding:2.25rem 20px 2rem;display:flex;flex-wrap:wrap;gap:1.25rem 2rem;align-items:flex-end}
.page-hdr__txt{display:grid;gap:.6rem;flex:1 1 420px;min-width:0}
.page-hdr__act{display:flex;gap:.6rem;flex-wrap:wrap}

.app-main{max-width:var(--wrap);margin-inline:auto;padding:2rem 20px 4rem;display:grid;gap:2.5rem}
.sec{display:grid;gap:1rem;min-width:0}
.app-main>*,.sec>*{min-width:0}
.sec__hdr{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}

.app-ftr{position:relative;border-top:1px solid var(--gray-200);color:var(--gray-600);font-size:.88rem}
.app-ftr::before{content:"";position:absolute;top:-1px;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--blue) 0 25%,var(--red) 25% 50%,var(--gray) 50% 75%,var(--amber) 75%)}
.app-ftr__in{max-width:var(--wrap);margin-inline:auto;padding:1.5rem 20px 2rem;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:center}
.app-ftr a{color:var(--gray-700)}
.app-ftr__links{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;margin-left:auto}

/* mobile tab bar */
.tabbar{display:none}
@media (max-width:860px){
  .app-nav,.app-hdr__help span,.acct__name{display:none}
  .app-hdr__in{gap:1rem}
  .tabbar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:rgba(255,255,255,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-top:1px solid var(--gray-200);padding-bottom:env(safe-area-inset-bottom,0px)}
  .tabbar a{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.55rem .25rem .5rem;min-height:56px;
    font-size:.72rem;font-weight:600;color:var(--gray-600)}
  .tabbar a:hover{text-decoration:none}
  .tabbar a[aria-current]{color:var(--blue-700)}
  .tabbar a[aria-current] .ico{stroke-width:2.4}
  body.has-tabbar{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  .page-hdr__in{padding-block:1.5rem 1.25rem}
  .app-main{padding-top:1.5rem;gap:2rem}
}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:.8rem 1.2rem;z-index:200;font-weight:600;border-radius:var(--r)}
.skip:focus{left:.5rem;top:.5rem}
.env-banner{background:repeating-linear-gradient(135deg,var(--amber-100) 0 12px,var(--amber-50) 12px 24px);color:var(--amber-700);text-align:center;
  font-family:var(--ff-mono);font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:.3rem 1rem;border-bottom:1px solid var(--amber-border)}
.switch-back{background:var(--ink-900);color:#E9E5DE;font-size:.9rem}
.switch-back__in{max-width:var(--wrap);margin-inline:auto;padding:.5rem 20px;display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center}
.switch-back strong{color:#fff}
.switch-back .btn{margin-left:auto;background:var(--amber);color:var(--ink);min-height:34px}
.flashes{max-width:var(--wrap);margin:1rem auto 0;padding-inline:20px;display:grid;gap:.5rem}
.flash--alert{background:var(--red-100);color:var(--red);border-color:var(--red-border)}
.app-ftr__legal{flex-basis:100%;font-size:.78rem;line-height:1.5;color:var(--gray-500);max-width:90ch}
.app-hdr .btn--sm{min-height:38px}

/* focused layout: checkout */
.focus-hdr{border-bottom:1px solid var(--gray-200);background:rgba(251,250,247,.9)}
.focus-hdr__in{max-width:var(--wrap);margin-inline:auto;padding-inline:20px;min-height:var(--hdr);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.focus-main{max-width:880px;margin-inline:auto;padding:2.5rem 20px 4rem;display:grid;gap:1.5rem}
@media (max-width:480px){
  .app-hdr__end .btn--ghost.btn--sm{display:none}
}