/* digi-app · ui/base.css
   THE NEW BASE (digiAPP_Build 8x), loaded after app.css and look.css: her colors as fills, Dark made black, and the new
   pieces (the header, the tabs, home, the tab pages, Favorites, digiGAMES, her city). Every color is a token.
     --acc  her words on Dark          --acc-l  her words on Day and Dusk     --acc-tw  her words on Twilight
     --acc-fl / --acc-fd  her color as a fill on light / dark looks;  --acc-onl / --acc-ond  the words on that fill
     --g-fill / --g-onfill  the fill and its words in the current look;  --lv  her level's color (her Ticket, SCAN) */

:root{--acc-tw:var(--acc);--acc-fl:var(--acc-l);--acc-fd:var(--acc);--acc-onl:#fff;--acc-ond:#000;--g-fill:var(--acc-fd);--g-onfill:var(--acc-ond);--lv:#cf0202;--tabs-h:calc(118px + var(--safe-b))}
html[data-look=day],html[data-look=dusk]{--g-fill:var(--acc-fl);--g-onfill:var(--acc-onl)}
html[data-look=twilight]{--g-her:var(--acc-tw);--g-link:var(--acc-tw);--g-fill:var(--acc-fd);--g-onfill:var(--acc-ond)}
/* DARK IS BLACK (8x.4; Brian: "dark was not black - it was dark theme color"): her color only the accent */
html[data-look=dark]{--g-bg:#000;--g-card:#141416;--g-card2:#1e1e22;--g-line:rgba(255,255,255,.1);--tile:#141416;--tile-edge:rgba(255,255,255,.1);--g-dock:rgba(10,10,12,.95);--g-herbg:color-mix(in srgb,var(--acc) 12%,#141416)}
html[data-look=dark] body:not(.bg-flat):not(.bg-scene){background:#000}
html[data-look=dark] .sh{background:#0f0f11}
/* white words on her fill become whichever reads (her colors are bright now) */
.tkb.none .tk-st{color:var(--g-sub)}
.h-pill,html[data-look] .mic.on,html[data-look=day] .ac .btn,html[data-look=dusk] .ac .btn{color:var(--g-onfill)}
html[data-look] .mic.on svg{stroke:var(--g-onfill)}

/* ── THE HEADER (8x.3): her account button top right; her one line flows around it (line one short, line two wider) ── */
.dock{display:none}
#home{padding:calc(var(--safe-t) + 14px) 18px calc(var(--tabs-h) + 24px);max-width:var(--col);margin:0 auto}
.hd{display:block;min-height:64px;margin-bottom:14px}
.hd::after{content:"";display:block;clear:both}
.hd .tkb{float:right;margin:2px 0 6px 14px}
.hd-line{margin:4px 0 0;font-size:26px;line-height:1.2;font-weight:900;letter-spacing:-.01em;color:var(--g-ink)}
.hd-line .nm{color:var(--g-her)}
.hd-q{display:block;font-size:20px;line-height:1.3;font-weight:800}
.hd-q small{display:block;margin-top:6px;font-size:15px;font-weight:700;color:var(--g-sub)}
.hd-spot{display:inline;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.hd-spot{display:block}
.hd-spot b{display:block;color:var(--g-her);font-weight:900}
.hd-spot em{display:block;font-style:normal;font-weight:900}
.hd-spot span{display:block;margin-top:4px;font-size:15px;font-weight:700;color:var(--g-sub)}

/* ── HOME: Who helped you?, the Local Heroes banner, her Ticket or her numbers ── */
.h-home{display:flex;flex-direction:column;gap:16px}
.h-who,.h-lh{padding:16px;border-radius:22px;background:var(--g-card);box-shadow:var(--g-shadow);border:1px solid var(--g-line)}
.h-lh .lh-ban{margin:4px auto 16px}
.h-lh .h-get{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;margin-top:14px;padding:20px;border-radius:18px;border:2px dashed var(--g-line);background:var(--g-herbg);color:var(--g-ink);text-align:left}
.h-lh .h-get b{font-size:22px;font-weight:900;color:var(--g-her)}
.h-lh .h-get small{font-size:16px;font-weight:600;color:var(--g-sub);line-height:1.35}

/* ── A TAB'S PAGE (ui/page.js): full screen in her look, Back top left; the tabs stay under her thumb ── */
.pg{position:fixed;inset:0;bottom:0;z-index:40;display:flex;flex-direction:column;background:var(--g-bg,#000);color:var(--g-ink);opacity:0;transform:translateY(16px);transition:opacity .22s ease,transform .22s var(--ease)}
html[data-look=dark] .pg{background:#000}
.pg.in{opacity:1;transform:none}
.pg-top{flex:none;display:flex;align-items:center;gap:12px;padding:calc(var(--safe-t) + 10px) 14px 8px;max-width:var(--col);width:100%;margin:0 auto}
.pg-back{display:flex;align-items:center;gap:6px;min-height:48px;padding:0 14px 0 8px;border-radius:999px;border:0;background:var(--g-card2);color:var(--g-ink);font:inherit;font-size:17px;font-weight:800;cursor:pointer}
.pg-back svg{width:22px;height:22px;stroke:currentColor;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.pg-h{margin:0;font-size:24px;font-weight:900;display:flex;flex-direction:column;line-height:1.05}
.pg-h i{font-style:normal;font-size:12px;font-weight:700;letter-spacing:.08em;opacity:.6}
.pg-body{flex:1;overflow:auto;padding:8px 18px calc(var(--tabs-h) + 24px);max-width:var(--col);width:100%;margin:0 auto;overscroll-behavior:contain}
.pg-empty,.pg-p{font-size:18px;line-height:1.45;color:var(--g-sub)}
.pg-lead{font-size:24px;font-weight:900;margin:8px 0}

/* ── MY FAVORITES: a grid of big tiles ── */
.fv-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fv{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-height:150px;padding:14px;border-radius:20px;border:1px solid var(--g-line);background:var(--g-card);box-shadow:var(--g-shadow);color:var(--g-ink);text-align:left;font:inherit;cursor:pointer}
.fv .sq{width:64px;height:64px}
.fv b{font-size:18px;font-weight:900;line-height:1.2}
.fv span{font-size:16px;font-weight:800;color:var(--g-her)}


/* ── her city: the state list, then her city as tiles ── */
.cp-tiles{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}
.cp-t{min-height:52px;padding:0 18px;border-radius:999px;border:1.5px solid var(--g-line,rgba(255,255,255,.15));background:var(--g-card2,rgba(255,255,255,.06));color:inherit;font:inherit;font-size:17px;font-weight:800;cursor:pointer}
.cp-t.on{background:var(--g-fill);color:var(--g-onfill);border-color:transparent}
.tour-two{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}

/* ── Discounts: List and Map ── */
.sr-lm{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:2px 0 12px}
.sr-lm button{min-height:50px;border-radius:14px;border:1px solid var(--g-line,rgba(255,255,255,.12));background:var(--g-card2,rgba(255,255,255,.06));color:inherit;font:inherit;font-size:17px;font-weight:900;cursor:pointer}
.sr-lm button.on{background:var(--g-fill);color:var(--g-onfill);border-color:transparent}

/* ── fixes after the first look (Nov 10): the banner over her Ticket, not beside it; the mark in ink on light looks
   (8y rule 8: white only on a dark ground); bigger tab words for grandma (2b) ── */
.h-lh{display:block}
.h-lh .lh-ban{display:flex;width:max-content;max-width:100%}
/* LOCAL HEROES IS RED, the whole section (Brian: "it should be red as well"): Get your Ticket wears Heroes red too */
.h-lh{--g-her:#ff5a4f;--g-herbg:color-mix(in srgb,#cf0202 14%,var(--g-card))}
html[data-look=day] .h-lh,html[data-look=dusk] .h-lh{--g-her:#cf0202;--g-herbg:#fff1f0}
html[data-look=twilight] .h-lh{--g-her:#ff9a92}
.h-lh .h-get{border-color:color-mix(in srgb,var(--g-her) 45%,transparent)}

/* ── THE TABS (8x.2; Brian: "this is THEE most used space on our app"): the eyebrow (CONNECT, digiAPP, her level's
   globe), then a floating bar of five real tabs: each its own cell, icon over one word, the open one lit in her color;
   SCAN raised in her level's color. The press lives in ui/tabs.js. ── */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:45;padding:0 10px calc(var(--safe-b) + 10px);pointer-events:none;
  background:var(--tabs-under,#000)}
.tabs::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px;background:linear-gradient(to top,var(--tabs-under,#000),transparent);pointer-events:none}
html[data-look=day]{--tabs-under:#f5f5f8}html[data-look=dusk]{--tabs-under:#dcdce4}html[data-look=twilight]{--tabs-under:#221b33}
.tabs>*{pointer-events:auto}
.tabs-brow{display:flex;align-items:center;gap:8px;max-width:var(--col);margin:0 auto;padding:10px 8px 8px}
.tabs .bub.dc{width:30px;height:30px;border-radius:9px 9px 9px 3px}
.tabs .bub.dc img{width:68%;height:68%}   /* Nov 10, Brian: "shrink ONLY the globe" inside CONNECT; the button keeps its size */
.tabs .bub.dc .dot{width:10px;height:10px}
.brow-home{flex:1;display:flex;align-items:center;padding:2px 0;border:0;background:none;color:inherit;cursor:pointer;text-align:left}
.brow-home .mark{font-size:20px}
html[data-look=day] .brow-home .mark,html[data-look=dusk] .brow-home .mark{color:rgba(26,26,29,.45)}
html[data-look=day] .brow-home .mark b,html[data-look=dusk] .brow-home .mark b{color:#1a1a1d;text-shadow:none}
.brow-globe{width:24px;height:24px;flex:none}
.tabs-bar{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;align-items:stretch;max-width:var(--col);margin:0 auto;padding:6px;border-radius:26px;
  background:#16161a;border:1px solid rgba(255,255,255,.08);box-shadow:0 10px 30px rgba(0,0,0,.45)}
html[data-look=day] .tabs-bar{background:#fff;border-color:rgba(0,0,0,.06);box-shadow:0 10px 30px rgba(20,20,40,.14)}
html[data-look=dusk] .tabs-bar{background:#f7f7fa;border-color:rgba(0,0,0,.06);box-shadow:0 10px 30px rgba(20,20,40,.12)}
html[data-look=twilight] .tabs-bar{background:#3a2f52;border-color:rgba(255,255,255,.1)}
.tab{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:64px;padding:6px 2px;border:0;border-radius:20px;
  background:transparent;color:var(--g-sub);font:inherit;cursor:pointer;transition:background .25s ease,color .25s ease,transform .12s ease;-webkit-user-select:none;user-select:none}
.tab-i{display:grid;place-items:center;width:30px;height:30px}
.tab-i svg{width:26px;height:26px;stroke:currentColor;stroke-width:2.1;fill:none;stroke-linecap:round;stroke-linejoin:round}
.tab-w{font-size:12px;font-weight:800;letter-spacing:-.015em;line-height:1;white-space:nowrap;color:var(--g-ink)}
.tab-w i{display:block;font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.06em;opacity:.55;line-height:1;margin-bottom:1px;text-align:center}
.tab-w{text-align:center}
.tab:active{transform:scale(.93)}
.tab.on{background:var(--g-herbg);color:var(--g-her)}
.tab.on .tab-w{color:var(--g-her)}
.tab.on .tab-i svg{stroke-width:2.5}
.tab.pop .tab-i{animation:tabPop .38s cubic-bezier(.3,1.6,.5,1)}
@keyframes tabPop{0%{transform:scale(.8)}60%{transform:scale(1.14)}100%{transform:scale(1)}}
.tab-rp{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--g-her);opacity:.35;pointer-events:none;animation:tabRp .55s ease-out forwards}
@keyframes tabRp{to{transform:scale(14);opacity:0}}
/* SCAN: raised over the bar, her level's color, a soft breath; a burst on the press */
.tab.scan{overflow:visible;justify-content:flex-end;background:none}
.tab.scan .sc-b{position:absolute;top:-30px;left:50%;width:66px;height:66px;margin-left:-33px;border-radius:50%;display:grid;place-items:center;background:var(--lv);
  box-shadow:0 8px 20px rgba(0,0,0,.4),0 0 0 5px #16161a;transition:transform .15s ease}
html[data-look=day] .tab.scan .sc-b{box-shadow:0 8px 20px rgba(0,0,0,.2),0 0 0 5px #fff}
html[data-look=dusk] .tab.scan .sc-b{box-shadow:0 8px 20px rgba(0,0,0,.2),0 0 0 5px #f7f7fa}
html[data-look=twilight] .tab.scan .sc-b{box-shadow:0 8px 20px rgba(0,0,0,.3),0 0 0 5px #3a2f52}
.tab.scan .sc-b svg{width:32px;height:32px;stroke:#fff;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.tab.scan .tab-w{font-weight:900;letter-spacing:.08em}
.tab.scan:active{transform:none}.tab.scan:active .sc-b{transform:scale(.9)}
.tab.scan .sc-b::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:3px solid var(--lv);opacity:0}
.tab.scan.pop .sc-b::after{animation:scBurst .5s ease-out}
@keyframes scBurst{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.6)}}
.tab.scan .tab-rp{display:none}
@media (prefers-reduced-motion:reduce){.tab.pop .tab-i,.tab.scan.pop .sc-b::after,.tab-rp{animation:none}}
body.touring .tabs{visibility:hidden}
/* the film plays alone (Brian: "the bottom bar shows through the opening ceremony"): the tabs wait, then fade in as it lands */
.tabs{transition:opacity .5s ease}
body.filming .tabs{opacity:0;pointer-events:none}
body.mark-wait #dsMark{visibility:hidden}
/* LOCAL HEROES IS RED (Brian, Nov 10: "LH is red"; digiUI 6.118, digiWORLD's three skins: Heroes red, Legends Digi Green,
   Support blue). The banner wears the program's color in every look, never her theme */
.lh-ban{--acc:#cf0202}
/* HEADER SEPARATION (Brian, Nov 10: "Do we want to create some sort of header separation? Slight effects or something?"):
   her home's top glows softly in her color, like light from above, and fades into the ground; a tab's page gets a fine
   edge and a shade under Back once it scrolls */
#home{position:relative}
#home::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--safe-t) + 200px);z-index:-1;pointer-events:none;
  background:radial-gradient(120% 100% at 30% 0%,color-mix(in srgb,var(--g-her) 22%,transparent) 0%,transparent 70%)}
.hd{position:relative;padding-bottom:14px;margin-bottom:16px}
.hd::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--g-line) 20%,var(--g-line) 80%,transparent)}
.pg-top{position:relative;transition:box-shadow .2s ease}
.pg.scrolled .pg-top{box-shadow:0 1px 0 var(--g-line),0 10px 16px -12px rgba(0,0,0,.45)}
html,body{overflow-x:hidden}   /* nothing may ever widen the page: a phone would zoom out and push the tabs off screen */