/* saam. — the app's look on the website (2026-10-12).
   Phase 12 "layered glass": a backdrop photo, frosted tiles, following the device's
   light or dark setting like the app does. Light = Strong, dark = Subtle (glass.dart).
   Loaded after each page's own styles, so these rules win. */

:root{
  --pg:#EFEFEC;--tile:#FFFFFF;--sub:#F4F4F0;--ink:#141414;--t1:#2E2E2A;--t2:#4F4F49;--t3:#6E6E66;
  --line:rgba(10,10,9,.1);--edge:rgba(10,10,9,.18);--limeink:#7E8F05;--icf:brightness(0);
  --quote:#141414;--quoteink:#F2F2EE;--quoteline:rgba(242,242,238,.16);--quotemute:rgba(242,242,238,.75);
  --bd:url(assets/backdrop-light.jpg);
  --scrim-top:rgba(242,242,238,.25);--scrim-bot:rgba(242,242,238,.72);
  --g-top:rgba(255,255,255,.72);--g-fill:rgba(255,255,255,.5);--g-sub:rgba(255,255,255,.34);
  --g-edge:rgba(255,255,255,.55);--g-blur:20px;--g-shadow:0 12px 30px rgba(10,10,9,.12);
  --m-fill:rgba(255,255,255,.86);--m-ink:#141414;--m-t2:#4F4F49;--m-t3:#6E6E66;--m-field:rgba(255,255,255,.75);--m-edge:rgba(10,10,9,.16);
}
@media (prefers-color-scheme: dark){:root{
  --pg:#0A0A09;--tile:#131312;--sub:#0A0A09;--ink:#F2F2EE;--t1:rgba(242,242,238,.9);--t2:rgba(242,242,238,.76);--t3:rgba(242,242,238,.62);
  --line:rgba(242,242,238,.1);--edge:rgba(242,242,238,.2);--limeink:#CDE012;--icf:brightness(0) invert(1);
  --quote:#F2F2EE;--quoteink:#141414;--quoteline:#DCDCD6;--quotemute:#3A3A36;
  --bd:url(assets/backdrop-dark.jpg);
  --scrim-top:rgba(10,10,9,.55);--scrim-bot:rgba(10,10,9,.9);
  --g-top:rgba(32,32,32,.82);--g-fill:rgba(19,19,18,.77);--g-sub:rgba(10,10,9,.45);
  --g-edge:rgba(242,242,238,.14);--g-blur:0px;--g-shadow:0 8px 24px rgba(0,0,0,.35);
  --m-fill:rgba(19,19,18,.82);--m-ink:#F2F2EE;--m-t2:rgba(242,242,238,.76);--m-t3:rgba(242,242,238,.55);--m-field:rgba(10,10,9,.6);--m-edge:rgba(242,242,238,.16);
}}

/* the backdrop: the photo, then the app's scrim over it */
html{background:var(--pg)}
body{background:transparent!important} /* the fixed photo layers sit between the canvas and the content */
body::before{content:"";position:fixed;inset:0;z-index:-2;background:var(--bd) center/cover no-repeat;pointer-events:none}
body::after{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(var(--scrim-top),var(--scrim-bot));pointer-events:none}

/* the wordmark follows the mode, not the width */
[data-logo-dark]{display:none!important}[data-logo-light]{display:block!important}
@media (prefers-color-scheme: dark){[data-logo-dark]{display:block!important}[data-logo-light]{display:none!important}}

/* tiles: anything the page drew on the plain tile colour becomes glass */
[data-bento] .scp1[style*="var(--tile)"],.tile,
[data-bento] section[style*="var(--tile)"],[data-bento] div[style*="var(--tile)"]{
  background:linear-gradient(var(--g-top),var(--g-fill)) !important;
  border:1px solid var(--g-edge) !important;
  box-shadow:var(--g-shadow);
  -webkit-backdrop-filter:blur(var(--g-blur));backdrop-filter:blur(var(--g-blur));
}
.step,.person,.logos a,[data-bento] [style*="var(--sub)"]{
  background:var(--g-sub) !important;border:1px solid var(--g-edge) !important;
}
.vid{background:var(--g-sub);border:1px solid var(--g-edge)}
/* photo cards and the lime tiles stay as they are */

/* the modal (forms) and the phone menu: frosted panels in the mode's colours */
.saam-ov{background:rgba(10,10,9,.45)!important}
.saam-md{background:var(--m-fill)!important;color:var(--m-ink)!important;border:1px solid var(--g-edge);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:var(--g-shadow)}
.saam-md h3{color:var(--m-ink)}
.saam-md p.sub{color:var(--m-t2)!important}
.saam-md label{color:var(--m-t3)!important}
.saam-md input,.saam-md select,.saam-md textarea{background:var(--m-field)!important;color:var(--m-ink)!important;border-color:var(--m-edge)!important}
.saam-md .saam-x{color:var(--m-t3)!important}
.saam-grid .hd{color:var(--m-t3)!important}.saam-grid .rw{color:var(--m-t2)!important}
.saam-grid .cel{background:var(--m-field)!important;border-color:var(--m-edge)!important}
.saam-grid .cel.on{background:#CDE012!important;border-color:#CDE012!important;color:#141414!important}
.saam-chips .chip{background:var(--m-field)!important;border-color:var(--m-edge)!important;color:var(--m-ink)!important}
.saam-chips .chip.on{background:#CDE012!important;border-color:#CDE012!important;color:#141414!important}
.saam-band{background:rgba(205,224,18,.14)!important;border-color:rgba(205,224,18,.4)!important}
.saam-band b{color:var(--limeink)!important}
.saam-short{color:var(--limeink)!important}
.saam-sec{color:var(--limeink)!important;border-top-color:var(--m-edge)!important}
.saam-hint{color:var(--m-t3)}
.saam-menu{background:var(--m-fill)!important;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
.saam-menu a{color:var(--m-ink)!important;border-bottom-color:var(--m-edge)!important}
.saam-menu .close{color:var(--m-t3)!important}

/* the reading pages (privacy, terms, legal): one glass panel around the text */
.sc-host[data-sc-name="privacy-bundle"]>div,.sc-host[data-sc-name="terms-bundle"]>div,.sc-host[data-sc-name="legal-bundle"]>div{
  background:linear-gradient(var(--g-top),var(--g-fill));border:1px solid var(--g-edge);border-radius:20px;box-shadow:var(--g-shadow);
  -webkit-backdrop-filter:blur(var(--g-blur));backdrop-filter:blur(var(--g-blur));
  margin:28px auto!important;padding:40px 36px 56px!important;
}
@media (max-width:620px){.sc-host[data-sc-name="privacy-bundle"]>div,.sc-host[data-sc-name="terms-bundle"]>div,.sc-host[data-sc-name="legal-bundle"]>div{margin:12px!important;padding:28px 20px 40px!important}}