/* ==========================================================================
   The glass layer for the app. Loaded after app.css, which lays everything
   out; this file only decides what each surface is made of.

   The recipe is floc-glass-ui, ported from the PDAM dashboard's glass.css
   (wtp.systems) with Floc's own colours: a translucent surface over a teal
   and orange ambient on paper, blurred and saturated so the ambient and the
   photos show through, one pixel of light along the top edge, a faint edge,
   a soft shadow. Four rules keep it from turning into a grey box:

     Glass only where the eye passes over it: the app bar, the floating tab
     bar, and a panel over a photograph. At most three blurred surfaces on
     any one screen, counting the two bars.
     Dense content is solid paper with the same edge, highlight and shadow:
     cards, sensors, prices, anything with a number or more than two lines.
     A surface that scrolls its own content (the recording sheet) keeps the
     tint and drops the blur. A scrim dims and never blurs.
     Motion is transform and opacity only. Nothing animates a blur.

   Every material is a token, and five gates redefine the tokens to solid
   paper: no backdrop-filter, reduced transparency, increased contrast,
   forced colours, and html.glass-lite (a weak phone, decided before first
   paint in app.html). Refraction is Chromium on a wide screen only.
   ========================================================================== */

:root{
  --paper:#F5F2EC;
  --paper-2:#FFFFFF;

  --glass-bg:rgba(255,255,255,.90);
  --glass-bg-strong:rgba(255,255,255,.86);
  --glass-bg-weak:rgba(255,255,255,.78);
  --glass-veil:rgba(255,255,255,.72);
  --glass-edge:rgba(20,125,132,.16);
  --glass-hi:rgba(255,255,255,.9);
  --glass-shadow:0 1px 2px rgba(8,32,38,.05), 0 10px 28px -8px rgba(8,32,38,.14);
  --glass-shadow-pop:0 2px 6px rgba(8,32,38,.08), 0 18px 48px -12px rgba(8,32,38,.28);
  --glass-blur:18px; --glass-sat:1.4;

  /* The floating tab bar's own material: thinner and more saturated than
     card glass, so the page reads through it the way the reference does. */
  --gbar-bg:rgba(255,255,255,.64);
  --gbar-blur:26px; --gbar-sat:1.6;
  --gbar-edge:rgba(20,125,132,.18);
  --gbar-hi:rgba(255,255,255,.95);
  --gbar-rim:rgba(8,32,38,.10);
  --gbar-cap:rgba(20,125,132,.13);
  --gbar-cap-shadow:0 2px 6px rgba(8,32,38,.14);

  --amb-1:rgba(20,125,132,.16);
  --amb-2:rgba(206,127,13,.10);
  --amb-3:rgba(0,151,167,.10);
}

/* :where keeps this at one class of weight, so the gates further down win
   by source order without an arms race. */
@media (prefers-color-scheme:dark){
  :root:where(:not([data-theme="light"])){
    --paper:#0B1214;
    --paper-2:#162224;
    --glass-bg:rgba(22,34,36,.80);
    --glass-bg-strong:rgba(18,28,30,.78);
    --glass-bg-weak:rgba(30,46,48,.62);
    --glass-veil:rgba(14,22,24,.62);
    --glass-edge:rgba(255,255,255,.12);
    --glass-hi:rgba(255,255,255,.14);
    --glass-shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 28px -8px rgba(0,0,0,.5);
    --glass-shadow-pop:0 2px 6px rgba(0,0,0,.35), 0 18px 48px -12px rgba(0,0,0,.6);
    --gbar-bg:rgba(18,28,30,.62);
    --gbar-edge:rgba(255,255,255,.16);
    --gbar-hi:rgba(255,255,255,.18);
    --gbar-rim:rgba(0,0,0,.35);
    --gbar-cap:rgba(79,190,196,.18);
    --gbar-cap-shadow:0 2px 8px rgba(0,0,0,.4);
    --amb-1:rgba(79,190,196,.16);
    --amb-2:rgba(231,165,66,.08);
    --amb-3:rgba(111,208,218,.10);
  }
}

/* ---------------------------------------------------------------- ambient */

/* A fixed pseudo-element, not background-attachment:fixed, which repaints on
   every scroll on a phone. The washes are what the blur has to show. */
html{overflow-x:clip}
.glass-defs{position:absolute;width:0;height:0;overflow:hidden}
body{position:relative;background:var(--paper)}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38rem 26rem at -10% -5%, var(--amb-1), transparent 62%),
    radial-gradient(30rem 24rem at 110% 30%, var(--amb-3), transparent 60%),
    radial-gradient(34rem 26rem at 40% 108%, var(--amb-2), transparent 60%),
    var(--paper);
}
.app{background:transparent;box-shadow:0 0 0 1px var(--glass-edge)}

/* ---------------------------------------------------------------- glass */

.appbar{
  background:var(--glass-bg-strong);
  border-bottom:1px solid var(--gbar-edge);
  box-shadow:inset 0 -1px 0 var(--gbar-rim), 0 8px 24px -14px rgba(8,32,38,.22);
  -webkit-backdrop-filter:blur(var(--gbar-blur)) saturate(var(--gbar-sat));
          backdrop-filter:blur(var(--gbar-blur)) saturate(var(--gbar-sat));
}

.tabbar{
  background:var(--gbar-bg);
  border:1px solid var(--gbar-edge);
  box-shadow:inset 0 1px 0 var(--gbar-hi), inset 0 -1px 0 var(--gbar-rim), 0 4px 16px rgba(8,32,38,.14);
  -webkit-backdrop-filter:blur(var(--gbar-blur)) saturate(var(--gbar-sat));
          backdrop-filter:blur(var(--gbar-blur)) saturate(var(--gbar-sat));
}
/* The selected capsule is a flat tint with its own highlight, never a second
   backdrop-filter on top of the bar's: that would be blur inside blur. */
.tab-cap{background:var(--gbar-cap);box-shadow:inset 0 1px 0 var(--gbar-hi), var(--gbar-cap-shadow)}

/* Panels over a photograph. The veil is thinner than card glass so the photo
   reads through; the ink on it still clears 7:1 over the darkest pixel. */
.sorot-kaca{
  background:var(--glass-veil);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:inset 0 1px 0 var(--glass-hi), var(--glass-shadow);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
          backdrop-filter:blur(20px) saturate(1.6);
}
@media (prefers-color-scheme:dark){
  .sorot-kaca{border-color:var(--glass-edge)}
}

/* ---------------------------------------------------------------- controls */

/* Controls sitting on a material take a fill, never a blur of their own. */
.langbtn{
  background:var(--gbar-bg);
  border:1px solid var(--gbar-edge);
  box-shadow:inset 0 1px 0 var(--gbar-hi), 0 4px 16px rgba(8,32,38,.14);
  -webkit-backdrop-filter:blur(var(--gbar-blur)) saturate(var(--gbar-sat));
          backdrop-filter:blur(var(--gbar-blur)) saturate(var(--gbar-sat));
}
.langbtn[aria-pressed="true"]{background:var(--blue);border-color:var(--blue)}
.iconbtn,.chip{
  background:var(--glass-bg-weak);
  border:1px solid var(--glass-edge);
  box-shadow:inset 0 1px 0 var(--glass-hi);
}
.iconbtn:hover{background:var(--glass-bg)}
.chip[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 4px 12px -4px rgba(20,125,132,.5)}

/* Every button is filled. The press is a scale, not a colour flash. */
.cta{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 8px 20px -8px rgba(20,125,132,.55);
  transition:transform 160ms cubic-bezier(.2,.7,.2,1);
}
.cta--wa{box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 8px 20px -8px rgba(23,117,63,.55)}
.cta:active,.chip:active,.iconbtn:active{transform:scale(.97)}

/* ---------------------------------------------------------------- solid */

/* Dense content sits on paper. Same edge, highlight and shadow as the glass,
   so the family still reads as one. */
.card,.row,.sensor,.proyek,.fas,.kabar,.ketua,.rt,.notif,.barang,.beli,.info{
  background:var(--paper-2);
  border:1px solid var(--glass-edge);
  box-shadow:inset 0 1px 0 var(--glass-hi), var(--glass-shadow);
}
.notif--new{background:var(--warn-tint)}
.qty{background:var(--paper)}
.qty button{background:var(--paper-2);border-color:var(--glass-edge);box-shadow:inset 0 1px 0 var(--glass-hi)}

/* The recording sheet scrolls its own conversation, so it keeps the tint and
   loses the blur. Its scrim dims and never blurs. */
.scrim{background:rgba(var(--scrim-rgb),.42);-webkit-backdrop-filter:none;backdrop-filter:none}
.sheet{
  background:var(--glass-bg);
  border:1px solid var(--glass-edge);
  box-shadow:inset 0 1px 0 var(--glass-hi), var(--glass-shadow-pop);
}

/* ---------------------------------------------------------------- refraction */

/* Chromium on a wide screen only, and never while motion or transparency is
   reduced. Safari and Firefox parse url() here and then draw nothing, which
   is why html.glass-hd is decided in script rather than by @supports. */
@media (min-width:768px) and (prefers-reduced-motion:no-preference) and (prefers-reduced-transparency:no-preference){
  :where(html.glass-hd) .tabbar{
    backdrop-filter:url(#floc-lens) blur(var(--gbar-blur)) saturate(var(--gbar-sat));
  }
}

/* ---------------------------------------------------------------- gates */

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{--glass-bg:var(--paper-2);--glass-bg-strong:var(--paper-2);--glass-bg-weak:var(--paper-2);
        --glass-veil:var(--paper-2);--gbar-bg:var(--paper-2)}
}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more),(forced-colors:active){
  :root{--glass-bg:var(--paper-2);--glass-bg-strong:var(--paper-2);--glass-bg-weak:var(--paper-2);
        --glass-veil:var(--paper-2);--gbar-bg:var(--paper-2)}
  .appbar,.tabbar,.langbtn,.sorot-kaca{-webkit-backdrop-filter:none;backdrop-filter:none}
}
:root.glass-lite{--glass-bg:var(--paper-2);--glass-bg-strong:var(--paper-2);--glass-bg-weak:var(--paper-2);
  --glass-veil:var(--paper-2);--gbar-bg:var(--paper-2)}
html.glass-lite .appbar,html.glass-lite .tabbar,html.glass-lite .langbtn,html.glass-lite .sorot-kaca{
  -webkit-backdrop-filter:none;backdrop-filter:none}

@media (prefers-reduced-motion:reduce){
  .tab-cap,.cta{transition:none}
  .cta:active,.chip:active,.iconbtn:active,.barang:active{transform:none}
}