/* SPS OPS app (B171) */
.app-headacts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;align-items:flex-start}
.app-guide{max-width:440px;width:calc(100% - 32px);border:1px solid var(--line-2);border-radius:14px;padding:22px 20px 18px;background:var(--ink);color:var(--text);box-shadow:0 20px 50px var(--shadow-float)}
.app-guide::backdrop{background:rgba(22,26,18,.45)}
.app-guide h2{font-family:var(--font-display);font-size:1.35rem;margin:0 0 6px}
.app-guide__steps{list-style:none;margin:10px 0 14px;padding:0;display:grid;gap:10px}
.app-guide__steps li{display:flex;gap:10px;align-items:flex-start;font-size:.97rem;line-height:1.45}
.app-guide__n{flex:none;width:26px;height:26px;border-radius:50%;background:var(--mint);color:var(--on-accent);display:grid;place-items:center;font-weight:600;font-size:.85rem;margin-top:-1px}
.app-guide__note{font-size:.88rem;color:var(--text-2);background:var(--ink-1);border-radius:8px;padding:10px 12px;margin:0 0 14px}
.app-toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--text-strong);color:var(--on-accent);padding:12px 16px;border-radius:10px;font-size:.95rem;z-index:1000;max-width:calc(100% - 32px);box-shadow:0 10px 30px var(--shadow-float)}
/* Inside the installed app: hide the public website menu and footer, keep the SPS logo and WhatsApp */
.is-app .nav,.is-app .header-cta .lang,.is-app .header-cta .btn-primary,.is-app .burger,.is-app .mobile-menu,.is-app .footer{display:none!important}
.is-app .pagehero--compact{padding-bottom:var(--s4)!important}
.is-app .pagehero--compact h1{font-size:1.7rem;margin-bottom:var(--s2)}
.is-app .pagehero--compact .eyebrow{display:none}
@media (display-mode:standalone){.nav,.header-cta .lang,.header-cta .btn-primary,.burger,.footer{display:none!important}}
/* B171 premium install button: brand-green outline, line icon, fills on hover */
.app-ico{flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.app-headbtn{display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--mint);border:1px solid var(--mint);box-shadow:inset 0 0 0 1px rgba(76,96,57,.06);transition:background .18s ease,color .18s ease,box-shadow .18s ease}
.app-headbtn:hover,.app-headbtn:focus-visible{background:var(--mint);color:var(--on-accent);box-shadow:0 6px 16px var(--shadow-card)}
.app-headbtn:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
/* ---- B171 phone layout for signed-in CPOs (bottom bar + menu sheet) ---- */
.mnav{display:none}
@media (max-width:900px){
  .has-mnav{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  .has-mnav .portal__steps{display:none}
  .has-mnav .portal__grid{gap:var(--s4)}
  .mnav{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;left:0;right:0;bottom:0;z-index:95;
    background:rgba(243,240,232,.97);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);
    border-top:1px solid var(--line-2);box-shadow:0 -6px 24px rgba(70,80,55,.10);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .mnav__btn{all:unset;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:54px;padding:4px 2px;border-radius:10px;color:var(--text-3);cursor:pointer;-webkit-tap-highlight-color:transparent;text-align:center}
  .mnav__btn:focus-visible{outline:2px solid var(--mint);outline-offset:-2px}
  .mnav__btn.is-on{color:var(--mint-bright)}
  .mnav__btn.is-on .mnav__ico{background:var(--mint-glow);border-radius:999px;padding:3px 14px;box-sizing:content-box}
  .mnav__ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .mnav__lbl{font-size:.72rem;font-weight:500;letter-spacing:.01em;line-height:1.1;white-space:nowrap}
  .has-mnav .wa-float{bottom:calc(80px + env(safe-area-inset-bottom));width:48px;height:48px}
  /* tidier top for signed-in CPOs */
  .has-mnav .pagehero--compact .lede,.has-mnav .pagehero--compact .eyebrow{display:none}
  .has-mnav .pagehero--compact{padding-bottom:var(--s3)!important}
  .has-mnav .pagehero--compact h1{font-size:1.6rem;margin-bottom:0}
  .has-mnav .portal__head{gap:var(--s3)}
  .has-mnav .app-headacts{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .has-mnav .app-headacts .btn{justify-content:center;width:100%;min-height:44px}
  .has-mnav .portal__head > .btn{min-height:44px}
  .msheet{position:fixed;inset:0;z-index:200}
  .msheet__back{all:unset;position:absolute;inset:0;background:rgba(22,26,18,.42);cursor:pointer}
  .msheet__panel{position:absolute;left:0;right:0;bottom:0;max-height:82vh;overflow:auto;background:var(--ink);border-radius:18px 18px 0 0;box-shadow:0 -12px 40px rgba(22,26,18,.25);padding:6px 14px calc(14px + env(safe-area-inset-bottom));animation:msheet-up .22s ease-out}
  .msheet__hd{position:sticky;top:0;background:var(--ink);display:flex;align-items:center;justify-content:space-between;padding:12px 4px 10px;border-bottom:1px solid var(--line)}
  .msheet__grip{position:absolute;left:50%;top:4px;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:var(--ink-4)}
  .msheet__hd strong{font-family:var(--font-display);font-size:1.1rem;color:var(--text-strong)}
  .msheet__x{all:unset;width:44px;height:44px;display:grid;place-items:center;font-size:1.6rem;color:var(--text-3);cursor:pointer;border-radius:10px}
  .msheet__list{list-style:none;margin:6px 0 0;padding:0}
  .msheet__item,.msheet__act{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:14px;width:100%;min-height:52px;padding:10px 10px;border-radius:12px;color:var(--text);font-size:1rem;cursor:pointer}
  .msheet__item:active,.msheet__act:active{background:var(--ink-2)}
  .msheet__item:focus-visible,.msheet__act:focus-visible{outline:2px solid var(--mint);outline-offset:-2px}
  .msheet__item.is-on{background:var(--ink-2);color:var(--text-strong);font-weight:500}
  .msheet__item .mnav__ico,.msheet__act .mnav__ico{color:var(--mint);flex:none}
  .msheet__t{flex:1;min-width:0}
  .msheet__done{flex:none;width:24px;height:24px;border-radius:50%;background:var(--mint);color:var(--on-accent);display:grid;place-items:center;font-size:.8rem}
  .msheet__acts{border-top:1px solid var(--line);margin-top:8px;padding-top:8px}
  .msheet__act--out{color:#8A3A14}.msheet__act--out .mnav__ico{color:#8A3A14}
  .mnav-open{overflow:hidden}
}
@keyframes msheet-up{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.msheet__panel{animation:none}}
/* B171: tablets — keep the bar's buttons a comfortable size, centred */
@media (min-width:600px) and (max-width:900px){.mnav{grid-auto-columns:minmax(0,132px);justify-content:center}}
/* B171: phones on their side — a slimmer bar so the content keeps its height */
@media (max-width:900px) and (max-height:500px){
  .mnav{padding-top:3px;padding-bottom:calc(3px + env(safe-area-inset-bottom))}
  .mnav__btn{flex-direction:row;gap:6px;min-height:44px}
  .has-mnav{padding-bottom:calc(54px + env(safe-area-inset-bottom))}
  .has-mnav .wa-float{bottom:calc(62px + env(safe-area-inset-bottom))}
  .msheet__panel{max-height:92vh}
}
/* B171: iPhone notch / home bar (page uses viewport-fit=cover) — keep content clear of the rounded corners */
@supports (padding:max(0px)){body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}.mnav{padding-left:max(4px,env(safe-area-inset-left));padding-right:max(4px,env(safe-area-inset-right))}}
/* B171: very narrow phones (320–360 px) — keep "Install app" / "Sign out" on one line */
@media (max-width:360px){.has-mnav .app-headacts .btn{white-space:nowrap;letter-spacing:.06em;padding-left:8px;padding-right:8px;font-size:.72rem}}

/* B172b premium install card: dark SPS panel, contour texture, cream action */
.app-banner{position:relative;overflow:hidden;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px 18px;
  margin:0 0 20px;padding:20px 56px 20px 20px;border-radius:16px;color:#F3F0E8;
  background:linear-gradient(135deg,#171B13 0%,#232A1C 60%,#2C3524 100%);border:1px solid rgba(185,196,158,.18);
  box-shadow:0 14px 34px rgba(22,26,18,.22),inset 0 1px 0 rgba(255,255,255,.05)}
.app-banner::before{content:"";position:absolute;inset:0;background:url(/assets/img/contours.svg) center/cover no-repeat;opacity:.07;pointer-events:none}
.app-banner::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(#B9C49E,#7B8C6A)}
.app-banner > *{position:relative}
.app-banner__icon{width:56px;height:56px;border-radius:14px;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 6px 16px rgba(0,0,0,.35);align-self:start}
.app-banner__body{min-width:0}
.app-banner__eyebrow{display:block;font-family:var(--font-display);font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#B9C49E;margin-bottom:4px}
.app-banner__title{display:block;font-family:var(--font-display);font-weight:600;font-size:1.22rem;line-height:1.2;color:#FFFFFF;letter-spacing:-.005em}
.app-banner__lede{margin:6px 0 0;font-size:.92rem;line-height:1.5;color:rgba(243,240,232,.74)}
.app-banner__pts{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.78rem;color:rgba(243,240,232,.82)}
.app-banner__pts li{display:inline-flex;align-items:center;gap:6px}
.app-banner__pts li::before{content:"";width:5px;height:5px;border-radius:50%;background:#B9C49E;flex:none}
.app-banner__go{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:0 22px;border-radius:999px;
  background:#F3F0E8;color:#161A12;border:1px solid #F3F0E8;font-weight:600;letter-spacing:.14em;box-shadow:0 6px 18px rgba(0,0,0,.25);transition:background .18s ease,transform .18s ease}
.app-banner__go:hover,.app-banner__go:focus-visible{background:#FFFFFF;color:#161A12;transform:translateY(-1px)}
.app-banner__go:focus-visible{outline:2px solid #B9C49E;outline-offset:3px}
.app-banner__x{position:absolute;top:8px;right:8px;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:rgba(243,240,232,.6);font-size:1.5rem;line-height:1;cursor:pointer}
.app-banner__x:hover,.app-banner__x:focus-visible{background:rgba(255,255,255,.08);color:#FFFFFF}
@media (max-width:700px){
  .app-banner{grid-template-columns:auto minmax(0,1fr);padding:18px 18px 18px 18px;gap:12px 14px}
  .app-banner__id{padding-right:28px}
  .app-banner__icon{width:48px;height:48px;border-radius:12px}
  .app-banner__lede,.app-banner__pts{grid-column:1 / -1}
  .app-banner__body{display:contents}
  .app-banner__id{align-self:center}
  .app-banner__go{grid-column:1 / -1;width:100%;margin-top:4px}
  .app-banner__title{font-size:1.12rem}
}
@media (max-width:360px){.app-banner__pts{font-size:.74rem;gap:4px 10px}.app-banner__title{font-size:1.04rem}}
@media (max-width:700px){.app-banner__lede{display:none}}