/* ==================================================================
   Partner Hub — "Liquid Glass" skin
   Loaded only when the page wears data-skin="glass" (inc/layout.php),
   on top of app.css. Every rule is scoped to that attribute as well, so
   nothing here can ever reach the Hard border look.

   WHERE THE NUMBERS COME FROM
   ---------------------------
   Read off macOS 27 itself (AppKit, read only): the system label and
   fill opacities (label 85%, secondary 55%, separator 10% …), the system
   colours (blue #0091FF / #0088FF, green, orange, red, indigo), and the
   glass model — regular vs clear glass, a tint, an interactive press,
   neighbouring glass merging. The tints, rim and blur values match the
   Arsa prototype, which measured them from the same Mac.

   THREE DECISIONS
   ---------------
   1. Real blur only on chrome — the floating sidebar, top bar, tab bar,
      menus, the pick bar. Content cards sit over a fixed, smooth
      wallpaper; a blurred smooth gradient is that gradient, so cards get
      the tint, rim and depth of glass without paying for a blur per card
      on every scroll frame. That is what keeps it smooth on a phone.
   2. Shape carries state instead of borders: capsules for actions, a
      glass "drop" under whatever is selected, tinted pills for status.
   3. Motion is springy but short (≈ .3–.5s) and always optional:
      prefers-reduced-motion turns every transition and animation off.
   ================================================================== */

:root[data-skin="glass"] {
  color-scheme: light;

  /* the hub's own tokens, re-pointed (app.css reads these everywhere) */
  --paper:      #E9EDF5;
  --fill:       rgba(255, 255, 255, .52);
  --fill-soft:  rgba(255, 255, 255, .30);
  --ink:        #0B0C12;
  --ink-soft:   rgba(34, 36, 54, .74);
  --ink-faint:  rgba(34, 36, 54, .46);
  --line:       rgba(40, 44, 90, .14);
  --rule:       rgba(40, 44, 90, .09);
  --lime:       #0088FF;
  --lime-soft:  rgba(0, 136, 255, .13);
  --lime-ink:   #FFFFFF;
  --danger:     #B0181A;
  --danger-bg:  rgba(255, 56, 60, .12);
  --danger-ink: #8F1416;
  --ok-bg:      rgba(52, 199, 89, .16);
  --hover:      rgba(40, 44, 90, .06);
  --bar:        transparent;
  --bar-ink:    #0B0C12;
  --nav-on-bg:  transparent;
  --nav-on-ink: #0B0C12;
  --money:      #E07B00;
  --money-bg:   rgba(255, 141, 40, .15);
  --money-ink:  #844300;
  --chart:      #0088FF;
  --bw:         1px;
  --gap:        16px;
  --sans:  -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, "Segoe UI", Roboto, sans-serif;
  --disp:  -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", system-ui, "Segoe UI", Roboto, sans-serif;
  --round: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* glass */
  --acc-text:  #0054B0;           /* the accent as text on glass: 5:1 and up */
  --acc-fill:  #0071E3;           /* the accent as a fill under white text: 4.6:1 */
  --ok-ink:    #0B6229;
  --ind:       #4636D6;
  --field:     rgba(255, 255, 255, .62);
  --g-tint:    rgba(255, 255, 255, .52);
  --g-hi:      rgba(255, 255, 255, .72);
  --g-chrome:  rgba(255, 255, 255, .42);
  --g-side:    rgba(255, 255, 255, .55);
  --g-rim:     rgba(255, 255, 255, .95);
  --g-rim-lo:  rgba(255, 255, 255, .45);
  --g-edge:    rgba(255, 255, 255, .55);
  --g-shadow:  0 10px 22px -14px rgba(28, 36, 90, .30), 0 1px 3px -1px rgba(28, 36, 90, .10);
  --g-shadow-lo: 0 6px 16px -10px rgba(28, 36, 90, .30);
  --g-blur:    blur(24px) saturate(1.8) brightness(1.06);
  --g-menu:    rgba(255, 255, 255, .78);
  --fade:      rgba(233, 237, 245, .72);
  --r-xl: 26px;
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;
  /* Apple-style springs as linear() curves — the same ones Arsa and Ledger
     use (~/Desktop/Projects/_design/liquid-glass, generated by springs.mjs) */
  /* springs:start */
  --lg-ease-smooth: linear(0, 0.0191, 0.0667, 0.1313, 0.2048, 0.2816, 0.3577, 0.4308, 0.4991, 0.562, 0.6189, 0.67, 0.7154, 0.7554, 0.7905, 0.821, 0.8475, 0.8704, 0.89, 0.9069, 0.9213, 0.9336, 0.9441, 0.9529, 0.9605, 0.9668, 0.9722, 0.9767, 0.9805, 0.9837, 0.9864, 0.9887, 0.9905, 0.9921, 0.9934, 0.9945, 0.9955, 0.9962, 0.9969, 0.9974, 0.9978, 0.9982, 1);
  --lg-dur-smooth: 700ms;
  --lg-ease-snappy: linear(0, 0.0291, 0.0999, 0.1933, 0.2959, 0.3989, 0.4965, 0.5854, 0.6641, 0.732, 0.7894, 0.8371, 0.8761, 0.9074, 0.9322, 0.9516, 0.9665, 0.9777, 0.986, 0.992, 0.9962, 0.9991, 1.001, 1.0021, 1.0027, 1.0029, 1.0029, 1.0028, 1.0025, 1.0022, 1.0019, 1.0016, 1);
  --lg-dur-snappy: 530ms;
  --lg-ease-bouncy: linear(0, 0.0197, 0.0713, 0.1447, 0.2316, 0.3255, 0.4209, 0.5139, 0.6016, 0.6821, 0.7542, 0.8172, 0.8712, 0.9163, 0.9532, 0.9824, 1.005, 1.0216, 1.0332, 1.0406, 1.0447, 1.046, 1.0452, 1.043, 1.0397, 1.0357, 1.0314, 1.027, 1.0227, 1.0187, 1.015, 1.0116, 1.0087, 1.0061, 1.004, 1.0023, 1.0009, 0.9999, 0.9991, 0.9985, 0.9982, 0.998, 0.9979, 0.9979, 0.998, 0.9982, 0.9983, 1);
  --lg-dur-bouncy: 780ms;
  --lg-ease-gentle: linear(0, 0.0101, 0.0365, 0.0747, 0.1207, 0.1718, 0.2255, 0.2803, 0.3347, 0.3879, 0.4391, 0.4879, 0.5339, 0.577, 0.6171, 0.6542, 0.6884, 0.7197, 0.7484, 0.7744, 0.7981, 0.8196, 0.839, 0.8564, 0.8722, 0.8863, 0.8989, 0.9103, 0.9204, 0.9295, 0.9375, 0.9447, 0.9511, 0.9568, 0.9618, 0.9663, 0.9703, 0.9738, 0.9769, 0.9797, 0.9821, 0.9842, 0.9861, 0.9878, 0.9893, 0.9906, 0.9917, 0.9928, 0.9936, 0.9944, 0.9951, 0.9957, 0.9962, 0.9967, 0.9971, 0.9975, 0.9978, 0.9981, 0.9983, 1);
  --lg-dur-gentle: 980ms;
  --lg-ease-quick: linear(0, 0.0491, 0.1571, 0.2847, 0.4107, 0.5249, 0.6232, 0.705, 0.7714, 0.8244, 0.8661, 0.8985, 0.9234, 0.9425, 0.957, 0.968, 0.9762, 0.9824, 0.987, 0.9904, 0.9929, 0.9948, 0.9962, 0.9972, 0.998, 1);
  --lg-dur-quick: 420ms;
  --spring: var(--lg-ease-bouncy);   /* an overshoot that settles */
  --ease:   var(--lg-ease-smooth);
  --radius: var(--r-lg);                      /* Settings checks this is set */

  --wall:
    radial-gradient(60% 50% at 6% 4%,   rgba(214, 140, 214, .80), transparent 70%),
    radial-gradient(50% 45% at 96% 14%, rgba(255, 196, 120, .78), transparent 70%),
    radial-gradient(60% 55% at 16% 62%, rgba(140, 196, 255, .85), transparent 70%),
    radial-gradient(55% 50% at 92% 70%, rgba(255, 160, 140, .62), transparent 70%),
    radial-gradient(55% 45% at 44% 104%, rgba(140, 230, 170, .70), transparent 70%),
    #E9EDF5;
}

@media (prefers-color-scheme: dark) {
  :root[data-skin="glass"]:not([data-theme="light"]) {
    color-scheme: dark;
    --paper:      #07080F;
    --fill:       rgba(42, 44, 66, .46);
    --fill-soft:  rgba(255, 255, 255, .055);
    --ink:        #F5F5F7;
    --ink-soft:   rgba(235, 235, 245, .72);
    --ink-faint:  rgba(235, 235, 245, .44);
    --line:       rgba(255, 255, 255, .13);
    --rule:       rgba(255, 255, 255, .08);
    --lime:       #0091FF;
    --lime-soft:  rgba(0, 145, 255, .20);
    --lime-ink:   #FFFFFF;
    --danger:     #FF7477;
    --danger-bg:  rgba(255, 66, 69, .16);
    --danger-ink: #FF9294;
    --ok-bg:      rgba(48, 209, 88, .16);
    --hover:      rgba(255, 255, 255, .06);
    --bar-ink:    #F5F5F7;
    --nav-on-ink: #F5F5F7;
    --money:      #FF9230;
    --money-bg:   rgba(255, 146, 48, .16);
    --money-ink:  #FFB867;
    --chart:      #3BA9FF;
    --acc-text:   #6CBDFF;
    --acc-fill:   #0A6FE0;
    --ok-ink:     #30D158;
    --ind:        #9AA4FF;
    --field:      rgba(255, 255, 255, .07);
    --g-tint:     rgba(42, 44, 66, .46);
    --g-hi:       rgba(255, 255, 255, .16);
    --g-chrome:   rgba(30, 32, 50, .42);
    --g-side:     rgba(34, 36, 56, .62);
    --g-rim:      rgba(255, 255, 255, .42);
    --g-rim-lo:   rgba(255, 255, 255, .12);
    --g-edge:     rgba(255, 255, 255, .12);
    --g-shadow:   0 10px 24px -14px rgba(0, 0, 0, .7), 0 1px 3px -1px rgba(0, 0, 0, .4);
    --g-shadow-lo: 0 6px 16px -10px rgba(0, 0, 0, .7);
    --g-blur:     blur(24px) saturate(1.9) brightness(.86);
    --g-menu:     rgba(36, 38, 56, .80);
    --fade:       rgba(7, 8, 15, .66);
    --wall:
      radial-gradient(60% 50% at 6% 4%,   rgba(147, 32, 146, .55), transparent 70%),
      radial-gradient(50% 45% at 96% 14%, rgba(255, 146, 0, .30), transparent 70%),
      radial-gradient(60% 55% at 16% 62%, rgba(0, 110, 230, .42), transparent 70%),
      radial-gradient(55% 50% at 92% 70%, rgba(255, 38, 0, .26), transparent 70%),
      radial-gradient(55% 45% at 44% 104%, rgba(0, 190, 90, .24), transparent 70%),
      #07080F;
  }
}
:root[data-skin="glass"][data-theme="dark"] {
  color-scheme: dark;
  --paper:      #07080F;
  --fill:       rgba(42, 44, 66, .46);
  --fill-soft:  rgba(255, 255, 255, .055);
  --ink:        #F5F5F7;
  --ink-soft:   rgba(235, 235, 245, .72);
  --ink-faint:  rgba(235, 235, 245, .44);
  --line:       rgba(255, 255, 255, .13);
  --rule:       rgba(255, 255, 255, .08);
  --lime:       #0091FF;
  --lime-soft:  rgba(0, 145, 255, .20);
  --lime-ink:   #FFFFFF;
  --danger:     #FF7477;
  --danger-bg:  rgba(255, 66, 69, .16);
  --danger-ink: #FF9294;
  --ok-bg:      rgba(48, 209, 88, .16);
  --hover:      rgba(255, 255, 255, .06);
  --bar-ink:    #F5F5F7;
  --nav-on-ink: #F5F5F7;
  --money:      #FF9230;
  --money-bg:   rgba(255, 146, 48, .16);
  --money-ink:  #FFB867;
  --chart:      #3BA9FF;
  --acc-text:   #6CBDFF;
  --acc-fill:   #0A6FE0;
  --ok-ink:     #30D158;
  --ind:        #9AA4FF;
  --field:      rgba(255, 255, 255, .07);
  --g-tint:     rgba(42, 44, 66, .46);
  --g-hi:       rgba(255, 255, 255, .16);
  --g-chrome:   rgba(30, 32, 50, .42);
  --g-side:     rgba(34, 36, 56, .62);
  --g-rim:      rgba(255, 255, 255, .42);
  --g-rim-lo:   rgba(255, 255, 255, .12);
  --g-edge:     rgba(255, 255, 255, .12);
  --g-shadow:   0 10px 24px -14px rgba(0, 0, 0, .7), 0 1px 3px -1px rgba(0, 0, 0, .4);
  --g-shadow-lo: 0 6px 16px -10px rgba(0, 0, 0, .7);
  --g-blur:     blur(24px) saturate(1.9) brightness(.86);
  --g-menu:     rgba(36, 38, 56, .80);
  --fade:       rgba(7, 8, 15, .66);
  --wall:
    radial-gradient(60% 50% at 6% 4%,   rgba(147, 32, 146, .55), transparent 70%),
    radial-gradient(50% 45% at 96% 14%, rgba(255, 146, 0, .30), transparent 70%),
    radial-gradient(60% 55% at 16% 62%, rgba(0, 110, 230, .42), transparent 70%),
    radial-gradient(55% 50% at 92% 70%, rgba(255, 38, 0, .26), transparent 70%),
    radial-gradient(55% 45% at 44% 104%, rgba(0, 190, 90, .24), transparent 70%),
    #07080F;
}

/* ------------------------------------------------------------------
   Ground: a fixed wallpaper in the channels' colours. Fixed as its own
   layer, because background-attachment: fixed is ignored on iPhone.
   ------------------------------------------------------------------ */
html[data-skin="glass"] { background: var(--paper); }
[data-skin="glass"] body {
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.003em;
}
[data-skin="glass"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  height: auto;                 /* app.css gives body::before a strip height in app mode */
  background: var(--wall);
  transform: translateZ(0);     /* its own layer: five gradients painted once, not on every scroll */
  will-change: transform;
}
[data-skin="glass"] ::selection { background: var(--lime-soft); }

[data-skin="glass"] a { color: var(--acc-text); text-decoration: none; }
[data-skin="glass"] a:hover { background: none; color: var(--acc-text); text-decoration: underline; text-underline-offset: 3px; }
[data-skin="glass"] h1, [data-skin="glass"] h2, [data-skin="glass"] h3 { font-family: var(--disp); letter-spacing: -0.012em; }
[data-skin="glass"] h1 { font-size: 32px; font-weight: 700; letter-spacing: -0.024em; line-height: 1.1; }
[data-skin="glass"] .num,
[data-skin="glass"] .money-figure { font-family: var(--round); }

[data-skin="glass"] :focus-visible { outline: 3px solid var(--lime-soft); outline-offset: 2px; }
[data-skin="glass"] .btn:focus-visible,
[data-skin="glass"] a:focus-visible,
[data-skin="glass"] summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--lime) 45%, transparent); outline-offset: 2px; }

/* ------------------------------------------------------------------
   Glass surfaces
   .panel / .tile / .login-card … : tint + rim + depth, no blur (see top)
   chrome (sidebar, bars, menus)  : the same plus a real backdrop blur
   ------------------------------------------------------------------ */
[data-skin="glass"] .panel,
[data-skin="glass"] .tile,
[data-skin="glass"] .login-card,
[data-skin="glass"] .sidebar,
[data-skin="glass"] .tabbar,
[data-skin="glass"] .pick-bar,
[data-skin="glass"] .icon-btn {
  background: var(--g-tint);
  border: 0;
  box-shadow: inset 0 0 0 .5px var(--g-edge), inset 0 1px 1.5px var(--g-rim-lo), var(--g-shadow);
}
/* The rim's ::after needs a positioned box. Only these get relative: the
   sidebar, tab bar and pick bar keep their own sticky / fixed positioning. */
[data-skin="glass"] .panel,
[data-skin="glass"] .tile,
[data-skin="glass"] .login-card,
[data-skin="glass"] .icon-btn { position: relative; }
/* the specular rim: bright where the light hits, fading round the sides */
/* Cards (panels, tiles) do NOT get this: a masked gradient per card is
   expensive to paint and a long page has dozens. They get a one-line top
   highlight in their box-shadow instead, which costs nothing. */
[data-skin="glass"] .login-card::after,
[data-skin="glass"] .sidebar::after,
[data-skin="glass"] .tabbar::after,
[data-skin="glass"] .pick-bar::after,
[data-skin="glass"] .icon-btn::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; pointer-events: none;
  background: linear-gradient(140deg, var(--g-rim), rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0) 68%, var(--g-rim-lo));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
[data-skin="glass"] .sidebar,
[data-skin="glass"] .tabbar,
[data-skin="glass"] .pick-bar,
[data-skin="glass"] .icon-btn {
  background: var(--g-chrome);
  -webkit-backdrop-filter: var(--g-blur);
  backdrop-filter: var(--g-blur);
}

/* ------------------------------------------------------------------
   Shell — desktop: a floating glass sidebar, a clear top bar that turns
   to glass once something scrolls under it
   ------------------------------------------------------------------ */
[data-skin="glass"] body.app { grid-template-columns: 262px minmax(0, 1fr); }

/* On a computer the sidebar sits still over the still wallpaper: nothing
   ever moves behind it, so a live blur would cost every frame and show
   nothing. A slightly stronger tint gives the same look for free. (The
   phone drawer below keeps its blur — the page is behind it there.) */
@media (min-width: 861px) {
  [data-skin="glass"] .sidebar { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--g-side); }
}
[data-skin="glass"] .sidebar {
  top: 12px;
  height: calc(100dvh - 24px);
  margin: 12px 0 12px 12px;
  border-radius: 26px;
  overflow: hidden auto;
  scrollbar-width: none;
}
[data-skin="glass"] .sidebar::-webkit-scrollbar { display: none; }
[data-skin="glass"] .brand {
  padding: 18px 18px 12px;
  font-family: var(--disp); font-size: 16px; font-weight: 700; letter-spacing: -0.01em; text-transform: none;
}
[data-skin="glass"] .brand,
[data-skin="glass"] .brand:hover { text-decoration: none; color: var(--ink); }
[data-skin="glass"] .brand-mark {
  width: 28px; height: 28px; border: 0; border-radius: 8px;
  background:
    radial-gradient(120% 90% at 20% 10%, #ff9200 0, transparent 55%),
    radial-gradient(100% 90% at 90% 20%, #932092 0, transparent 60%),
    radial-gradient(120% 100% at 50% 110%, #0088FF 0, transparent 60%), #16172a;
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .45), inset 0 0 0 .5px rgba(255, 255, 255, .35);
}
[data-skin="glass"] .sidenav { position: relative; gap: 2px; padding: 4px 10px 10px; }
[data-skin="glass"] .sidenav a {
  position: relative; z-index: 1;
  padding: 9px 12px; border: 0; border-radius: 13px;
  font-size: 14.5px; font-weight: 550; color: var(--ink);
  transition: background .2s, transform .5s var(--spring);
}
[data-skin="glass"] .sidenav a:hover { background: var(--hover); color: var(--ink); text-decoration: none; }
[data-skin="glass"] .sidenav a[aria-current="page"],
[data-skin="glass"] .sidenav a[href="money.php"][aria-current="page"] { background: transparent; color: var(--ink); font-weight: 650; }
[data-skin="glass"] .sidenav a[aria-current="page"]:hover { background: transparent; }
[data-skin="glass"] .nav-ico { opacity: 1; color: var(--acc-text); width: 20px; height: 20px; }
[data-skin="glass"] .sidenav-label { margin: 16px 12px 6px; font-size: 11px; letter-spacing: .07em; color: var(--ink-soft); }
[data-skin="glass"] .sidebar-foot { border-top: .5px solid var(--line); padding: 12px 14px 14px; }
[data-skin="glass"] .whoami { font-size: 14px; }
[data-skin="glass"] .whoami-role { font-size: 12px; }

/* the drop under the current page (glass.js places and springs it) */
[data-skin="glass"] .g-drop {
  position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none;
  border-radius: 13px;
  background: var(--g-hi);
  box-shadow: inset 0 0 0 .5px var(--g-edge), inset 0 1px 1px var(--g-rim-lo), var(--g-shadow-lo);
  transform-origin: center;
  opacity: 0;
}
[data-skin="glass"] .g-drop { transition: opacity .2s; }
[data-skin="glass"] .g-drop.is-set { opacity: 1; }
/* Until the drop exists (the first frame of a page, a page prepared in the
   background, or no script at all) the current item is highlighted plainly,
   so there is never a frame with nothing marked. The drop takes over in the
   same frame it is added. */
[data-skin="glass"] .sidenav:not(.g-has-drop) a[aria-current="page"],
[data-skin="glass"] .tabbar:not(.g-has-drop) a[aria-current="page"] {
  background: var(--g-hi);
  box-shadow: inset 0 0 0 .5px var(--g-edge), inset 0 1px 1px var(--g-rim-lo), var(--g-shadow-lo);
}

[data-skin="glass"] .app-main { min-width: 0; }
[data-skin="glass"] .appbar {
  height: 58px; padding: 0 clamp(14px, 2.6vw, 30px);
  background: transparent; border: 0;
}
/* scroll edge effect: once content passes under it, the bar frosts. The
   frost is its own layer that fades in — a blur cannot be transitioned,
   so switching it on the bar itself snapped on in one frame. */
[data-skin="glass"] .appbar::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--fade);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: 0 .5px 0 var(--line);
  opacity: 0; transition: opacity .25s ease;
}
[data-skin="glass"] body.g-scrolled .appbar::before { opacity: 1; }
/* A page taking a moment to arrive: a thin line across the top, so the click
   visibly registered. Only after 180 ms — a quick page never shows it. */
/* on <html>, not <body>: body::after is the status-bar strip in app mode */
html[data-skin="glass"].g-loading::after {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: 2.5px; z-index: 1001; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--lime) 30%, var(--lime) 70%, transparent);
  background-size: 50% 100%; background-repeat: no-repeat;
  animation: g-load 1s ease-in-out infinite;
}
@keyframes g-load { from { background-position: -50% 0; } to { background-position: 150% 0; } }
[data-skin="glass"] .appbar-title { font-family: var(--disp); font-size: 16px; font-weight: 650; opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .4s var(--spring); }
[data-skin="glass"] body.g-scrolled .appbar-title { opacity: 1; transform: none; }
[data-skin="glass"] .icon-btn {
  width: 42px; height: 42px; border-radius: 50%; color: var(--ink);
}
[data-skin="glass"] .icon-btn svg { width: 19px; height: 19px; }

[data-skin="glass"] .wrap { max-width: 1240px; padding: 8px clamp(14px, 2.6vw, 30px) 72px; }

/* the page title is the page's own big title, iOS-style */
[data-skin="glass"] .page-head {
  border: 0; padding: 4px 4px 0; margin-bottom: 22px; align-items: flex-end;
}
[data-skin="glass"] .page-head .sub { font-size: 15px; color: var(--ink-soft); margin-top: 6px; }
[data-skin="glass"] .page-head .field .label { margin-left: 4px; }

/* ------------------------------------------------------------------
   Panels
   ------------------------------------------------------------------ */
[data-skin="glass"] .stack { gap: 18px; }
[data-skin="glass"] .panel { border-radius: var(--r-xl); }
[data-skin="glass"] .panel > :first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; }
[data-skin="glass"] .panel > :last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }
[data-skin="glass"] .panel-head {
  background: transparent; border: 0;
  padding: 18px 20px 6px;
}
[data-skin="glass"] .panel-head h2 { font-size: 17px; font-weight: 650; }
[data-skin="glass"] .panel-body { padding: 14px 20px 20px; }
[data-skin="glass"] .panel-head + .table-wrap,
[data-skin="glass"] .panel-head + .tiles { margin-top: 8px; }
[data-skin="glass"] .panel-body + .panel-body { border-top: .5px solid var(--line); padding-top: 16px; }
[data-skin="glass"] .panel-lead { border-top-width: 0; background: var(--g-hi); }
/* a channel's panel glows its colour from the corner, instead of a stripe */
[data-skin="glass"] .panel[style*="--ch"] {
  border-left: 0;
  background:
    radial-gradient(70% 120px at 0 0, color-mix(in srgb, var(--ch) 22%, transparent), transparent 75%),
    var(--g-tint);
}
[data-skin="glass"] .divider { height: .5px; background: var(--line); }
[data-skin="glass"] .eyebrow { font-size: 11px; letter-spacing: .07em; font-weight: 650; color: var(--ink-soft); }
[data-skin="glass"] .hint { font-size: 13px; color: var(--ink-soft); line-height: 1.45; }
[data-skin="glass"] .under { font-size: 12px; color: var(--ink-soft); }
[data-skin="glass"] .count-badge {
  border: 0; border-radius: 999px; padding: 3px 9px;
  background: var(--fill-soft); box-shadow: inset 0 0 0 .5px var(--line);
  font-family: var(--round); font-size: 12px; font-weight: 600; color: var(--ink-soft);
}

/* ------------------------------------------------------------------
   Buttons — capsules. They swell a touch under the finger and spring
   back (glass.js adds the light where the finger lands).
   ------------------------------------------------------------------ */
[data-skin="glass"] .btn {
  position: relative; isolation: isolate;
  min-height: 40px; padding: 0 18px;
  border: 0; border-radius: 999px;
  background: var(--g-hi);
  box-shadow: inset 0 0 0 .5px var(--g-edge), inset 0 1px 1px var(--g-rim-lo), var(--g-shadow-lo);
  color: var(--ink);
  font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: 0;
  transition: transform .5s var(--spring), background .2s, box-shadow .2s, filter .2s;
}
[data-skin="glass"] .btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--px, 50%) var(--py, 50%), rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 65%);
  transition: opacity .35s;
}
[data-skin="glass"] .btn:hover { background: var(--g-hi); color: var(--ink); filter: brightness(1.04); text-decoration: none; }
[data-skin="glass"] .btn:active,
[data-skin="glass"] .btn.g-press { transform: scale(1.045); transition-duration: .2s; transition-timing-function: var(--ease); }
[data-skin="glass"] .btn.g-press::before { opacity: 1; }
[data-skin="glass"] .btn:disabled { opacity: .45; transform: none; }
[data-skin="glass"] .btn:disabled:hover { background: var(--g-hi); color: var(--ink); filter: none; }

[data-skin="glass"] .btn-primary,
[data-skin="glass"] .btn-primary:hover,
[data-skin="glass"] .btn-primary:disabled:hover {
  background: var(--lime); color: #fff;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .38), inset 0 0 0 .5px rgba(255, 255, 255, .2), 0 10px 22px -12px var(--lime);
}
[data-skin="glass"] .btn-danger,
[data-skin="glass"] .btn-danger:hover { color: var(--danger); background: var(--danger-bg); box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--danger) 25%, transparent); }
[data-skin="glass"] .btn-sm { min-height: 32px; padding: 0 13px; font-size: 13px; }
[data-skin="glass"] .page-head .btn-primary { min-height: 44px; padding: 0 22px; font-size: 15px; }
[data-skin="glass"] .btn .nav-ico { color: currentColor; }
[data-skin="glass"] details[open] > summary.btn { background: var(--lime-soft); color: var(--acc-text); }

/* ------------------------------------------------------------------
   Forms
   ------------------------------------------------------------------ */
[data-skin="glass"] .field > .label,
[data-skin="glass"] .label { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--ink-soft); margin: 0 0 6px 6px; }
[data-skin="glass"] input[type="text"], [data-skin="glass"] input[type="email"], [data-skin="glass"] input[type="password"],
[data-skin="glass"] input[type="url"], [data-skin="glass"] input[type="date"], [data-skin="glass"] input[type="month"],
[data-skin="glass"] input[type="number"], [data-skin="glass"] input[type="search"], [data-skin="glass"] input[type="file"],
[data-skin="glass"] select, [data-skin="glass"] textarea {
  min-height: 44px; padding: 10px 14px;
  border: 0; border-radius: var(--r-md);
  background: var(--field);
  box-shadow: inset 0 0 0 .5px var(--line), inset 0 1px 2px rgba(0, 0, 0, .04);
  color: var(--ink);
  transition: box-shadow .2s, background .2s;
}
[data-skin="glass"] input[type="file"] { padding: 9px 12px; }
[data-skin="glass"] input[type="file"]::file-selector-button {
  margin-right: 10px; padding: 5px 12px; border: 0; border-radius: 999px;
  background: var(--lime-soft); color: var(--acc-text); font: 600 13px/1.4 var(--sans); cursor: pointer;
}
[data-skin="glass"] textarea { min-height: 104px; }
[data-skin="glass"] input:focus, [data-skin="glass"] select:focus, [data-skin="glass"] textarea:focus {
  outline: 0;
  background: var(--g-hi);
  box-shadow: inset 0 0 0 1.5px var(--lime), 0 0 0 4px var(--lime-soft);
}
[data-skin="glass"] select {
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8da0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}
[data-skin="glass"] input[type="color"] {
  width: 48px; height: 44px; padding: 4px; border: 0; border-radius: 12px;
  background: var(--field); box-shadow: inset 0 0 0 .5px var(--line);
}
[data-skin="glass"] input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
[data-skin="glass"] input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 8px; }

/* tick boxes become iOS's round checks; they pop when ticked */
[data-skin="glass"] input[type="checkbox"],
[data-skin="glass"] input[type="radio"] {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin: 0; flex: none; cursor: pointer;
  border-radius: 50%;
  background: var(--field);
  box-shadow: inset 0 0 0 1.5px var(--ink-faint);
  display: inline-grid; place-items: center;
  transition: background .2s, box-shadow .2s, transform .45s var(--spring);
}
[data-skin="glass"] input[type="checkbox"]:checked,
[data-skin="glass"] input[type="radio"]:checked {
  background: var(--lime);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .35), 0 4px 10px -4px var(--lime);
}
[data-skin="glass"] input[type="checkbox"]:checked::after {
  content: ""; width: 10px; height: 6px; margin-top: -2px;
  border: solid #fff; border-width: 0 0 2.4px 2.4px; transform: rotate(-45deg);
}
[data-skin="glass"] input[type="radio"]:checked::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
[data-skin="glass"] input[type="checkbox"]:active,
[data-skin="glass"] input[type="radio"]:active { transform: scale(.86); }
[data-skin="glass"] input[type="checkbox"]:focus,
[data-skin="glass"] input[type="radio"]:focus { box-shadow: inset 0 0 0 1.5px var(--ink-faint), 0 0 0 4px var(--lime-soft); }
[data-skin="glass"] input[type="checkbox"]:checked:focus { box-shadow: 0 0 0 4px var(--lime-soft); }

[data-skin="glass"] .check {
  gap: 10px; padding: 10px 14px 10px 12px;
  border: 0; border-radius: var(--r-md);
  background: var(--field); box-shadow: inset 0 0 0 .5px var(--line);
  transition: background .2s, transform .45s var(--spring);
}
[data-skin="glass"] .check:hover { background: var(--g-hi); }
[data-skin="glass"] .check:active { transform: scale(.98); }
[data-skin="glass"] .check:has(input:checked) { background: var(--lime-soft); box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--lime) 30%, transparent); }
[data-skin="glass"] .field-row { gap: 14px; }

/* ------------------------------------------------------------------
   Tables — inside glass, hairlines only
   ------------------------------------------------------------------ */
[data-skin="glass"] .table-wrap { scrollbar-width: thin; }
[data-skin="glass"] table.grid { font-size: 14.5px; }
[data-skin="glass"] table.grid th {
  background: transparent; border-bottom: .5px solid var(--line);
  padding: 10px 14px; font-size: 11.5px; letter-spacing: .06em; font-weight: 650; color: var(--ink-soft);
}
[data-skin="glass"] table.grid td { padding: 13px 14px; border-bottom: .5px solid var(--rule); }
[data-skin="glass"] table.grid tr:last-child td { border-bottom: 0; }
[data-skin="glass"] table.grid tbody tr { transition: background .2s; }
[data-skin="glass"] table.grid tbody tr:hover td { background: var(--hover); }
[data-skin="glass"] table.grid tr.row-open td { background: var(--lime-soft); }
[data-skin="glass"] table.grid tr.row-open td:first-child { box-shadow: inset 3px 0 0 0 var(--lime); }
[data-skin="glass"] table.grid tr.row-open:hover td { background: color-mix(in srgb, var(--lime) 18%, transparent); }
[data-skin="glass"] table.grid tr[style*="--ch"] td:first-child { box-shadow: inset 3px 0 0 0 var(--ch); }
[data-skin="glass"] table.grid.ledger .col-sum { background: var(--fill-soft); }
[data-skin="glass"] table.grid.ledger tr.ledger-total td { border-top: .5px solid var(--line); }
[data-skin="glass"] table.grid tr.split-row-editor td { background: var(--fill-soft); border-bottom: .5px solid var(--line); }
[data-skin="glass"] table.calc td { border-bottom: .5px solid var(--rule); }
[data-skin="glass"] table.calc tr.calc-total td { border-top: .5px solid var(--line); }
[data-skin="glass"] table.calc tr.calc-me td { background: var(--lime-soft); }
[data-skin="glass"] table.calc tr.calc-me td:first-child { border-radius: 12px 0 0 12px; }
[data-skin="glass"] table.calc tr.calc-me td:last-child { border-radius: 0 12px 12px 0; }
[data-skin="glass"] .num { font-family: var(--round); }
[data-skin="glass"] .vtitle { color: var(--ink); font-weight: 650; }
[data-skin="glass"] .vtitle:hover { background: none; color: var(--acc-text); text-decoration: none; }
[data-skin="glass"] .vmeta { font-size: 12.5px; }

/* ------------------------------------------------------------------
   Chips, tags, swatches, avatars
   ------------------------------------------------------------------ */
[data-skin="glass"] .chip {
  border: 0; border-radius: 999px; padding: 4px 10px;
  background: var(--fill-soft); box-shadow: inset 0 0 0 .5px var(--line);
  font-size: 12.5px; font-weight: 550;
}
[data-skin="glass"] a.chip { color: var(--ink); transition: transform .45s var(--spring), background .2s; }
[data-skin="glass"] a.chip:hover { background: var(--g-hi); text-decoration: none; }
[data-skin="glass"] .chip .pct { font-family: var(--round); }
[data-skin="glass"] .chip-me { background: var(--lime-soft); color: var(--acc-text); box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--lime) 35%, transparent); }
[data-skin="glass"] .chip-off { opacity: .6; box-shadow: none; outline: 1px dashed var(--line); outline-offset: -1px; }
[data-skin="glass"] .tag {
  border: 0; border-radius: 999px; padding: 3px 9px;
  background: var(--fill-soft); color: var(--ink-soft);
  font-size: 11px; font-weight: 650; letter-spacing: .02em; text-transform: none;
}
[data-skin="glass"] .tag-published { background: var(--ok-bg); color: var(--ok-ink); }
[data-skin="glass"] .tag-scheduled { background: color-mix(in srgb, var(--ind) 16%, transparent); color: var(--ind); }
[data-skin="glass"] .tag-pending,
[data-skin="glass"][data-theme="dark"] .tag-pending { background: var(--lime); color: #fff; }
[data-skin="glass"] .tag-off { background: var(--danger-bg); color: var(--danger); }
[data-skin="glass"] .tag-members { background: var(--fill-soft); color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--line); }
[data-skin="glass"] .badge-est { background: var(--money-bg); color: var(--money-ink); }
[data-skin="glass"] .final-flag { border: 0; border-radius: 999px; padding: 2px 8px; background: var(--lime); color: #fff; letter-spacing: .03em; }

[data-skin="glass"] .swatch,
[data-skin="glass"] .channel-cell .swatch {
  width: 11px; height: 11px; border: 0; border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .55), 0 1px 3px rgba(0, 0, 0, .25);
}
[data-skin="glass"] .channel-cell { font-weight: 600; }
[data-skin="glass"] .avatar {
  width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: linear-gradient(140deg, #8A90A8, #5D6380); color: #fff;
  font-family: var(--round); font-size: 11.5px; font-weight: 700;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .35);
}

/* ------------------------------------------------------------------
   Videos, thumbnails, title options
   ------------------------------------------------------------------ */
[data-skin="glass"] .thumb-cell { border: 0; border-radius: var(--r-sm); background: var(--fill-soft); box-shadow: 0 4px 12px -8px rgba(0, 0, 0, .5); }
[data-skin="glass"] .thumbs { gap: 14px; }
[data-skin="glass"] .thumb {
  border: 0; border-radius: var(--r-lg); overflow: hidden;
  background: var(--g-tint); box-shadow: inset 0 0 0 .5px var(--g-edge), var(--g-shadow-lo);
  transition: transform .45s var(--spring), box-shadow .25s;
}
[data-skin="glass"] .thumb-img { border-bottom: 0; }
[data-skin="glass"] .thumb.is-final { outline: 0; box-shadow: 0 0 0 3px var(--lime), var(--g-shadow-lo); }
[data-skin="glass"] .thumb.is-final .thumb-bar { background: var(--lime-soft); color: var(--acc-text); }
[data-skin="glass"] .thumb.is-picked { outline: 0; box-shadow: 0 0 0 3px var(--ink), var(--g-shadow-lo); transform: scale(.97); }
[data-skin="glass"] .thumb.is-picked .pick-mark { background: var(--lime); border-color: #fff; color: #fff; }
[data-skin="glass"] .thumb-bar { font-family: var(--round); }
[data-skin="glass"] .thumb-actions { border-top: .5px solid var(--rule); }
[data-skin="glass"] .thumb-actions .btn { border-radius: 0; box-shadow: none; background: transparent; border-right: .5px solid var(--rule); min-height: 34px; }
[data-skin="glass"] .thumb-actions .btn:hover { background: var(--hover); }
[data-skin="glass"] .thumb-tools .tool { border: 0; border-radius: 8px; background: var(--fill-soft); }
[data-skin="glass"] .pick-bar { border-radius: 999px; padding: 8px 10px 8px 18px; }
[data-skin="glass"] .feed-wrap { border-radius: var(--r-xl); }

[data-skin="glass"] .opt {
  border: 0; border-radius: 0; background: var(--field);
  box-shadow: inset 0 -.5px 0 var(--rule);
  transition: background .25s;
}
[data-skin="glass"] .opt:first-child { border-top-left-radius: var(--r-md); border-top-right-radius: var(--r-md); }
[data-skin="glass"] .opt:last-child { border-bottom-left-radius: var(--r-md); border-bottom-right-radius: var(--r-md); box-shadow: none; }
[data-skin="glass"] .opt.is-chosen { background: var(--lime-soft); color: var(--ink); }
[data-skin="glass"] .opt.is-chosen .txt { color: var(--ink); }
[data-skin="glass"] .opt.is-chosen .by { color: var(--ink-soft); }
[data-skin="glass"] .opt .len { border: 0; border-radius: 999px; background: var(--fill-soft); font-family: var(--round); }
[data-skin="glass"] .opt.is-chosen .len { background: var(--lime); color: #fff; border: 0; }
[data-skin="glass"] .opt .len.over { background: var(--danger-bg); color: var(--danger); }
[data-skin="glass"] .titleopts .toggle-count { border: 0; border-radius: 999px; background: var(--fill-soft); font-family: var(--round); }

[data-skin="glass"] .status-pick {
  min-height: 32px; padding: 4px 30px 4px 12px;
  border-radius: 999px; font-size: 12px; letter-spacing: .02em; text-transform: none; font-weight: 650;
  background-color: var(--fill-soft); background-position: right 9px center; background-size: 14px;
  box-shadow: inset 0 0 0 .5px var(--line);
}
[data-skin="glass"] .status-pick[data-status="pending"] { background-color: var(--lime); color: #fff; box-shadow: none; }
[data-skin="glass"] .status-pick[data-status="scheduled"] { background-color: color-mix(in srgb, var(--ind) 16%, transparent); color: var(--ind); }
[data-skin="glass"] .status-pick[data-status="published"] { background-color: var(--ok-bg); color: var(--ok-ink); }

/* the split editor: a grouped list, total as a capsule */
[data-skin="glass"] .split-row {
  border: 0; background: var(--field); box-shadow: inset 0 -.5px 0 var(--rule);
  padding: 10px 14px;
}
[data-skin="glass"] .split-row:first-child { border-top-left-radius: var(--r-md); border-top-right-radius: var(--r-md); }
[data-skin="glass"] .split-row:last-child { border-bottom-left-radius: var(--r-md); border-bottom-right-radius: var(--r-md); box-shadow: none; }
[data-skin="glass"] .split-row input[type="number"] { width: 92px; font-family: var(--round); min-height: 38px; }
[data-skin="glass"] .split-total {
  margin-top: 10px; border: 0; border-radius: 999px; padding: 10px 18px;
  background: var(--fill-soft); box-shadow: inset 0 0 0 .5px var(--line);
  letter-spacing: .04em; transition: background .3s, color .3s;
}
[data-skin="glass"] .split-total .amount { font-family: var(--round); font-size: 17px; }
[data-skin="glass"] .split-total.good { background: var(--ok-bg); color: var(--ok-ink); }
[data-skin="glass"] .split-total.bad { background: var(--danger-bg); color: var(--danger); }
[data-skin="glass"] .split-inline-cell { border: 0; border-radius: 999px; background: var(--field); box-shadow: inset 0 0 0 .5px var(--line); padding: 5px 6px 5px 12px; }
[data-skin="glass"] .split-inline-cell input.pct-inline { min-height: 32px; padding: 4px 10px; border-radius: 999px; font-family: var(--round); }
[data-skin="glass"] .split-inline-total { border: 0; border-radius: 999px; background: var(--fill-soft); font-family: var(--round); padding: 6px 12px; }
[data-skin="glass"] .split-inline-total.good { background: var(--ok-bg); color: var(--ok-ink); }
[data-skin="glass"] .split-inline-total.bad { background: var(--danger-bg); color: var(--danger); }

/* grouped lists: link rows, steps */
[data-skin="glass"] .linkline,
[data-skin="glass"] .step {
  border: 0; background: var(--field); box-shadow: inset 0 -.5px 0 var(--rule); padding: 11px 14px;
}
[data-skin="glass"] .linkline:first-child, [data-skin="glass"] .step:first-child { border-top-left-radius: var(--r-md); border-top-right-radius: var(--r-md); }
[data-skin="glass"] .linkline:last-child, [data-skin="glass"] .step:last-child { border-bottom-left-radius: var(--r-md); border-bottom-right-radius: var(--r-md); box-shadow: none; }
[data-skin="glass"] .linkline .k { font-size: 11px; letter-spacing: .05em; }
[data-skin="glass"] .step-mark { border: 0; border-radius: 50%; background: var(--lime); color: #fff; font-family: var(--round); box-shadow: 0 4px 10px -5px var(--lime); }
[data-skin="glass"] .step.is-done { background: var(--fill-soft); }
[data-skin="glass"] .step.is-done .step-mark { background: var(--ok-bg); color: var(--ok-ink); box-shadow: none; }

/* ------------------------------------------------------------------
   Tiles — big rounded numbers
   ------------------------------------------------------------------ */
[data-skin="glass"] .tiles { gap: 12px; }
[data-skin="glass"] .tile { margin: 0; border-radius: var(--r-lg); padding: 15px 17px; transition: transform .45s var(--spring), filter .2s; }
[data-skin="glass"] a.tile { color: var(--ink); }
[data-skin="glass"] a.tile:hover { background: var(--g-tint); filter: brightness(1.03); text-decoration: none; }
[data-skin="glass"] a.tile:hover .k, [data-skin="glass"] a.tile:hover .n { color: var(--ink-soft); }
[data-skin="glass"] a.tile:hover .v { color: var(--ink); }
[data-skin="glass"] a.tile:active { transform: scale(.98); }
[data-skin="glass"] .tile .k { font-size: 11px; letter-spacing: .07em; font-weight: 650; color: var(--ink-soft); }
[data-skin="glass"] .tile .v { font-family: var(--round); font-size: 28px; font-weight: 700; letter-spacing: -.02em; margin-top: 6px; }
[data-skin="glass"] .tile .n { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
[data-skin="glass"] .tile-accent { background: var(--lime-soft); }
[data-skin="glass"] .tile-accent .k, [data-skin="glass"] .tile-accent .n { color: var(--acc-text); }
[data-skin="glass"] .tile-accent .v { color: var(--ink); }
[data-skin="glass"] .tile-money { background: linear-gradient(160deg, var(--money-bg), transparent 85%), var(--g-tint); }
[data-skin="glass"] .tile-money .k, [data-skin="glass"] .tile-money .n { color: var(--money-ink); opacity: .9; }
[data-skin="glass"] .tile-money .v { color: var(--money-ink); }
/* tiles that sit inside a panel are part of it, not cards of their own */
[data-skin="glass"] .panel .tiles { padding: 0; }
[data-skin="glass"] .panel .tile { background: var(--fill-soft); box-shadow: inset 0 0 0 .5px var(--line); }
[data-skin="glass"] .panel .tile-money { background: var(--money-bg); }
[data-skin="glass"] .panel .tile-accent { background: var(--lime-soft); }
[data-skin="glass"] .cards { gap: 18px; }
[data-skin="glass"] .cards .tile { padding: 12px 13px; }
[data-skin="glass"] .cards .tile .v { font-size: 19px; }
[data-skin="glass"] .cards .panel-head { padding-bottom: 10px; }
[data-skin="glass"] .cards .panel > .tiles { padding: 0 20px; }

/* ------------------------------------------------------------------
   Money
   ------------------------------------------------------------------ */
[data-skin="glass"] .money-figure { color: var(--money-ink); }
[data-skin="glass"] .est strong { border-bottom: 2px dotted var(--money); }
[data-skin="glass"] .meter { height: 6px; border: 0; border-radius: 3px; background: var(--rule); overflow: hidden; }
[data-skin="glass"] .meter span { border-radius: 3px; background: var(--lime); transform-origin: 0 50%; }
/* bars grow in the first time a page is seen this session only — not on every visit */
[data-skin="glass"].g-first .meter span { animation: g-grow .9s var(--ease) both; }
[data-skin="glass"] .bar { height: 10px; border: 0; border-radius: 5px; background: var(--rule); }
[data-skin="glass"] .bar span { border-radius: 5px; background: var(--lime); transition: width .6s var(--ease); }
@keyframes g-grow { from { transform: scaleX(0); } }
/* The first time a page is seen this session, its figures rise in, one
   after another. html.g-first is set in <head> (inc/layout.php) before
   anything paints, so the very first frame already starts from nothing —
   no finished number flashing first, no digits changing width. */
[data-skin="glass"].g-first .tile { animation: g-tile-in .5s var(--ease) backwards; }
[data-skin="glass"].g-first .tile:nth-child(2) { animation-delay: .04s; }
[data-skin="glass"].g-first .tile:nth-child(3) { animation-delay: .08s; }
[data-skin="glass"].g-first .tile:nth-child(n+4) { animation-delay: .12s; }
@keyframes g-tile-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }

/* views per day */
[data-skin="glass"] .ch-grid { stroke: var(--rule); opacity: 1; }
[data-skin="glass"] .ch-line { stroke-width: 2.4; }
[data-skin="glass"] .ch-area { opacity: .14; }
[data-skin="glass"] .ch-dot { fill: var(--paper); }
[data-skin="glass"] .ch-ylab, [data-skin="glass"] .ch-xlab, [data-skin="glass"] .chart-readout { font-family: var(--round); }

/* ------------------------------------------------------------------
   Channel tabs / segmented strips above lists
   ------------------------------------------------------------------ */
[data-skin="glass"] .chtabs {
  position: relative; gap: 4px; margin-bottom: 0; padding: 4px;
  width: fit-content; max-width: 100%;
  border-radius: 22px;          /* a pill on one line; still neat when it wraps to two */
  background: var(--g-tint); box-shadow: inset 0 0 0 .5px var(--g-edge), var(--g-shadow-lo);
}
[data-skin="glass"] .chtab {
  position: relative; z-index: 1;
  margin: 0; padding: 8px 14px; border: 0; border-radius: 999px;
  background: transparent; color: var(--ink-soft);
  font-size: 13.5px; font-weight: 600;
  transition: color .2s, transform .45s var(--spring);
}
[data-skin="glass"] .chtab:hover { background: var(--hover); color: var(--ink); text-decoration: none; }
[data-skin="glass"] .chtab[aria-current="page"] { background: transparent; color: var(--ink); border: 0; }
[data-skin="glass"] .chtab[aria-current="page"]:hover { background: transparent; }
/* where a drop marks the selected tab, hover only brightens the text — a
   hover pill looked like a second selected tab in dark mode (10-07) */
[data-skin="glass"] .chtabs.g-has-drop .chtab:hover { background: transparent; color: var(--ink); }
[data-skin="glass"] .chtabs:not(.g-has-drop) .chtab[aria-current="page"] { background: var(--g-hi); box-shadow: inset 0 0 0 .5px var(--g-edge), var(--g-shadow-lo); }
[data-skin="glass"] .chtab .n { border: 0; border-radius: 999px; background: var(--fill-soft); font-family: var(--round); padding: 0 6px; }
[data-skin="glass"] .chtab[aria-current="page"] .n { border: 0; }
[data-skin="glass"] .chtab .waiting { border: 0; border-radius: 999px; background: var(--lime); color: #fff; font-family: var(--round); padding: 0 6px; }
[data-skin="glass"] .chtabs .g-drop { border-radius: 999px; }
[data-skin="glass"] .chtabs + .panel,
[data-skin="glass"] .chtabs + * { margin-top: 0; }
[data-skin="glass"] .filters { gap: 12px; }

/* ------------------------------------------------------------------
   Messages, empty states, drop zones
   ------------------------------------------------------------------ */
[data-skin="glass"] .flash {
  border: 0; border-radius: var(--r-lg); padding: 13px 16px;
  background: color-mix(in srgb, var(--ok-bg) 70%, var(--g-tint));
  box-shadow: inset 0 0 0 .5px var(--g-edge), var(--g-shadow-lo);
  animation: g-drop-in .6s var(--spring) backwards;
}
[data-skin="glass"] .flash-err { background: color-mix(in srgb, var(--danger-bg) 75%, var(--g-tint)); color: var(--danger-ink); }
[data-skin="glass"] p.flash { margin: 0 0 12px; }
@keyframes g-drop-in { from { opacity: 0; transform: translateY(-14px) scale(.96); } }
[data-skin="glass"] .empty { padding: 42px 22px; }
[data-skin="glass"] .empty h3 { font-size: 17px; }
[data-skin="glass"] .dropzone {
  border: 1.5px dashed var(--ink-faint); border-radius: var(--r-lg);
  background: var(--fill-soft); transition: background .2s, transform .45s var(--spring), border-color .2s;
}
[data-skin="glass"] .dropzone:hover,
[data-skin="glass"] .dropzone.over { background: var(--lime-soft); color: var(--ink); border-color: var(--lime); transform: scale(1.01); }
[data-skin="glass"] .dropzone:hover .eyebrow,
[data-skin="glass"] .dropzone.over .eyebrow { color: var(--acc-text); }
[data-skin="glass"] .next-step strong { font-size: 16px; }
[data-skin="glass"] .codeblock,
[data-skin="glass"] .docs-body code { border: 0; border-radius: var(--r-sm); background: var(--fill-soft); box-shadow: inset 0 0 0 .5px var(--line); }
[data-skin="glass"] .docs-body h2 { font-size: 19px; }

/* Disclosures settle open. In CSS, not script: the animation starts on the
   very frame the panel opens, so it is never seen at full size first. */
[data-skin="glass"] details > summary { list-style: none; }
[data-skin="glass"] details > summary::-webkit-details-marker { display: none; }
[data-skin="glass"] details[open] > :not(summary) { animation: g-settle .42s cubic-bezier(.2, 1.25, .4, 1); }
@keyframes g-settle { from { opacity: 0; transform: translateY(-8px) scale(.985); } }

/* ------------------------------------------------------------------
   Sign-in
   ------------------------------------------------------------------ */
[data-skin="glass"] .login-page { min-height: 100dvh; }
[data-skin="glass"] .login-card { max-width: 400px; border-radius: 34px; overflow: hidden;
  background: var(--g-chrome); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  animation: g-rise .7s var(--spring) backwards; }
@keyframes g-rise { from { opacity: 0; transform: translateY(26px) scale(.96); } }
[data-skin="glass"] .login-mark {
  flex-direction: column; gap: 12px; padding: 30px 20px 6px;
  background: transparent; border: 0; color: var(--ink);
  font-family: var(--disp); font-size: 24px; font-weight: 700; letter-spacing: -0.02em; text-transform: none;
}
[data-skin="glass"] .login-mark .brand-mark { width: 62px; height: 62px; border-radius: 17px; }
[data-skin="glass"] .login-card .panel-body { padding: 18px 24px 24px; }
[data-skin="glass"] .btn-block { min-height: 50px; font-size: 16px; }

/* ------------------------------------------------------------------
   Phone: floating tab bar, glass drawer
   ------------------------------------------------------------------ */
@media (max-width: 860px) {
  [data-skin="glass"] body.app { grid-template-columns: minmax(0, 1fr); }
  [data-skin="glass"] .sidebar {
    position: fixed; top: 10px; bottom: 10px; left: 10px; height: auto; margin: 0;
    width: min(82vw, 300px); border-radius: 28px; z-index: 50;
    transform: translateX(calc(-100% - 20px));
    transition: transform .5s cubic-bezier(.3, 1.15, .45, 1);
  }
  [data-skin="glass"] .sidebar.is-open { transform: none; }
  [data-skin="glass"] .scrim { background: rgba(8, 10, 24, .28); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
  [data-skin="glass"] .appbar { height: 54px; padding: 0 14px; }
  [data-skin="glass"] .appbar-title { font-size: 16px; }
  [data-skin="glass"] .wrap { padding: 4px 14px calc(108px + env(safe-area-inset-bottom, 0px)); }
  [data-skin="glass"] .page-head { margin-bottom: 18px; }
  [data-skin="glass"] h1 { font-size: 30px; }
  [data-skin="glass"] .panel-head { padding: 16px 16px 4px; }
  [data-skin="glass"] .panel-body { padding: 12px 16px 16px; }
  [data-skin="glass"] .tiles { gap: 10px; }
  [data-skin="glass"] .tile { flex-basis: calc(50% - 5px); padding: 13px 15px; }
  [data-skin="glass"] .tile .v { font-size: 24px; }

  [data-skin="glass"] .tabbar {
    left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    padding: 6px; border-radius: 32px;
    gap: 0; touch-action: none;
    transition: transform .55s cubic-bezier(.3, 1.25, .5, 1), opacity .3s;
  }
  [data-skin="glass"] .tabbar a {
    position: relative; z-index: 1;
    min-height: 52px; padding: 6px 2px 5px; border-radius: 26px;
    font-size: 10.5px; font-weight: 600; color: var(--ink);
    transition: color .2s, transform .45s var(--spring);
  }
  [data-skin="glass"] .tabbar a .nav-ico { width: 23px; height: 23px; color: currentColor; }
  [data-skin="glass"] .tabbar a:hover { background: transparent; color: var(--ink); text-decoration: none; }
  [data-skin="glass"] .tabbar a[aria-current="page"],
  [data-skin="glass"] .tabbar a[href="money.php"][aria-current="page"],
  [data-skin="glass"] .tabbar a.g-hover { background: transparent; color: var(--acc-text); }
  [data-skin="glass"] .tabbar .g-drop { border-radius: 26px; }
  /* scrolling down tucks the bar away a little; scrolling up brings it back */
  [data-skin="glass"] body.g-tucked .tabbar { transform: translateY(8px) scale(.9); }
  [data-skin="glass"] body.g-tucked .tabbar a span { opacity: 0; }
  [data-skin="glass"] .tabbar a span { transition: opacity .2s; }

  [data-skin="glass"] .pick-bar { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }

  [data-skin="glass"] table.grid tr {
    border: 0; border-radius: var(--r-lg); margin-bottom: 10px;
    background: var(--fill-soft); box-shadow: inset 0 0 0 .5px var(--line);
  }
  [data-skin="glass"] .panel table.grid { padding: 0 10px 10px; display: block; }
  [data-skin="glass"] table.grid td { border-bottom: .5px solid var(--rule); padding: 10px 14px; }
  [data-skin="glass"] table.grid td[data-label]::before { font-size: 10.5px; letter-spacing: .06em; color: var(--ink-soft); font-weight: 650; }
  [data-skin="glass"] table.grid tr.row-open { background: var(--lime-soft); box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--lime) 35%, transparent); }
  [data-skin="glass"] table.grid tr.row-open td { background: transparent; }
  [data-skin="glass"] table.grid tr.row-open td:first-child { box-shadow: none; }
  [data-skin="glass"] table.grid.vtable tr:not(.split-row-editor) { padding: 12px; }
  [data-skin="glass"] table.grid.vtable tr[style*="--ch"]:not(.split-row-editor) {
    box-shadow: inset 0 0 0 .5px var(--line);
    background: radial-gradient(60% 90px at 0 0, color-mix(in srgb, var(--ch) 16%, transparent), transparent 75%), var(--fill-soft);
    padding-left: 12px;
  }
  [data-skin="glass"] table.grid.vtable tr.row-open:not(.split-row-editor) { background: var(--lime-soft); }
  [data-skin="glass"] table.grid.vtable td[data-label="Split"] { border-top: .5px solid var(--rule); }

  [data-skin="glass"] .chtabs { width: auto; scroll-padding: 4px; margin-bottom: 4px; }
  [data-skin="glass"] .chtab[aria-current="page"] { border-bottom-color: transparent; }
}

/* ------------------------------------------------------------------
   Moving between pages (Chrome and Safari 18+; anything else simply
   loads the page).

   ONE screen-sized picture, nothing else. An earlier version lifted the
   page content out as its own layer: the browser photographed the whole
   page — thousands of pixels tall on Videos — and stretched that photo
   between the old and new heights: the stutter.

   And never fade the OLD page out. Two fades running at once add up to
   less than fully opaque half-way through, and whatever is behind them
   shows — in dark mode that is near-black, a 0.1s black flash. So the old
   screen stays fully there, untouched, and the new one fades in over it.
   Nothing can show through, at any moment. The sidebar, bars and
   wallpaper are the same on both, so only what changed appears to move;
   the glass drop carries on sliding from where it was (glass.js).
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-group(root) { animation: none; }
  ::view-transition-old(root) { animation: none; opacity: 1; mix-blend-mode: normal; }
  ::view-transition-new(root) { animation: g-vt-in .22s ease-out both; mix-blend-mode: normal; }
  @keyframes g-vt-in { from { opacity: 0; } }
  /* app.css names the phone tab bar for the Hard border cross-fade; here it
     must stay part of the one picture, or it would be lifted out too */
  [data-skin="glass"] .tabbar { view-transition-name: none; }
}

/* Opened from the home screen: the status bar sits over the page */
@media (display-mode: standalone) {
  [data-skin="glass"] body::after {
    content: ""; position: fixed; top: 0; left: 0; right: 0; z-index: 1000; pointer-events: none;
    height: env(safe-area-inset-top, 0px);
    background: var(--fade);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  }
  [data-skin="glass"] .sidebar { padding-top: 0; top: calc(12px + env(safe-area-inset-top, 0px)); }
  [data-skin="glass"] .appbar { height: calc(58px + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); }
}

/* ==================================================================
   POLISH PASS — from an automated audit of every page, every role,
   phone and computer, light and dark (devtools: 38 pages × 4 views).
   ================================================================== */

/* ---- Readable fills: white text sits on a deeper blue than the glass
   accent (Apple's #0088FF is 3.5:1 under white — too faint at 14px) ---- */
[data-skin="glass"] .btn-primary,
[data-skin="glass"] .btn-primary:hover,
[data-skin="glass"] .btn-primary:disabled:hover { background: var(--acc-fill); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .32), inset 0 0 0 .5px rgba(255, 255, 255, .18), 0 10px 22px -12px var(--acc-fill); }
[data-skin="glass"] .tag-pending,
[data-skin="glass"][data-theme="dark"] .tag-pending,
[data-skin="glass"] .final-flag,
[data-skin="glass"] .chtab .waiting,
[data-skin="glass"] .step-mark,
[data-skin="glass"] .opt.is-chosen .len,
[data-skin="glass"] .status-pick[data-status="pending"],
[data-skin="glass"] .thumb.is-picked .pick-mark { background-color: var(--acc-fill); color: #fff; }
[data-skin="glass"] .avatar { background: #474C63 linear-gradient(140deg, #5B6178, #3A3F55); }
[data-skin="glass"] .chip-me { background: color-mix(in srgb, var(--acc-fill) 10%, var(--field)); }
[data-skin="glass"] .tag-published { background: color-mix(in srgb, var(--ok-ink) 12%, var(--field)); }
[data-skin="glass"] .tag-off { background: color-mix(in srgb, var(--danger) 12%, var(--field)); }
[data-skin="glass"] .btn-danger, [data-skin="glass"] .btn-danger:hover { background: color-mix(in srgb, var(--danger) 11%, var(--field)); }
[data-skin="glass"] .thumb-tools .tool.on { color: var(--money-ink); }
[data-skin="glass"] table.grid tr.row-done .vtitle { color: var(--ink); opacity: .78; }
[data-skin="glass"] table.grid tr.row-done .vmeta { opacity: 1; }

/* ---- Lists of links inside a message go under it, not in a thin column ---- */
[data-skin="glass"] .flash { flex-wrap: wrap; }
[data-skin="glass"] .flash > ul,
[data-skin="glass"] .flash > ol { flex: 1 1 100%; margin: 4px 0 0; padding-left: 18px; }

/* ---- The living background: soft colour fields drifting slowly across
   the whole screen. Plain radial gradients moved with transform only — the
   graphics card slides them, nothing is repainted. A fine grain on top
   stops the gradients banding. Still for anyone who asks for less motion. */
[data-skin="glass"] .g-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: strict; }
[data-skin="glass"] .g-bg i {
  /* Drawn at a third of its size and enlarged by the graphics card: a soft
     gradient looks the same, and each layer needs ~1/9 of the memory (full
     size × 5 layers was ~300 MB on an iPhone — enough to stutter). */
  position: absolute; width: 25vmax; height: 25vmax; border-radius: 50%;
  background: radial-gradient(closest-side, var(--c), transparent);
  opacity: var(--o, .55); will-change: transform;
  transform: scale(var(--s, 3));
  animation: g-drift var(--t, 60s) ease-in-out infinite alternate;
}
[data-skin="glass"] .g-bg i:nth-child(1) { --c: #B98CF0; left: -3vmax;  top: -5vmax;    --t: 54s; --o: .5; }
[data-skin="glass"] .g-bg i:nth-child(2) { --c: #FFC27A; right: -5vmax; top: 7vmax;     --t: 67s; animation-delay: -20s; --o: .42; }
[data-skin="glass"] .g-bg i:nth-child(3) { --c: #62AEFF; left: 5vmax;   bottom: -7vmax; --t: 73s; animation-delay: -35s; --o: .62; }
[data-skin="glass"] .g-bg i:nth-child(4) { --c: #FF9AA8; right: -1vmax; bottom: -5vmax; --t: 61s; animation-delay: -10s; --o: .30; }
[data-skin="glass"] .g-bg i:nth-child(5) { --c: #6FDDB4; left: 38vw;    top: 36vh;      --t: 83s; animation-delay: -45s; --o: .42; --s: 2.2; }
[data-skin="glass"] .g-bg::after {
  content: ""; position: absolute; inset: 0; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes g-drift {
  0%   { transform: translate3d(0, 0, 0) scale(var(--s, 3)); }
  50%  { transform: translate3d(9vmax, 6vmax, 0) scale(var(--s, 3)); }
  100% { transform: translate3d(-5vmax, 11vmax, 0) scale(var(--s, 3)); }
}
@media (prefers-color-scheme: dark) {
  [data-skin="glass"]:not([data-theme="light"]) .g-bg i { opacity: calc(var(--o, .55) * .8); }
  [data-skin="glass"]:not([data-theme="light"]) .g-bg i:nth-child(1) { --c: #7A2BB0; }
  [data-skin="glass"]:not([data-theme="light"]) .g-bg i:nth-child(2) { --c: #B85C00; }
  [data-skin="glass"]:not([data-theme="light"]) .g-bg i:nth-child(3) { --c: #1A5CC8; }
  [data-skin="glass"]:not([data-theme="light"]) .g-bg i:nth-child(4) { --c: #A3243A; }
  [data-skin="glass"]:not([data-theme="light"]) .g-bg i:nth-child(5) { --c: #137A5A; }
  [data-skin="glass"]:not([data-theme="light"]) .g-bg::after { opacity: .07; }
}
[data-skin="glass"][data-theme="dark"] .g-bg i { opacity: calc(var(--o, .55) * .8); }
[data-skin="glass"][data-theme="dark"] .g-bg i:nth-child(1) { --c: #7A2BB0; }
[data-skin="glass"][data-theme="dark"] .g-bg i:nth-child(2) { --c: #B85C00; }
[data-skin="glass"][data-theme="dark"] .g-bg i:nth-child(3) { --c: #1A5CC8; }
[data-skin="glass"][data-theme="dark"] .g-bg i:nth-child(4) { --c: #A3243A; }
[data-skin="glass"][data-theme="dark"] .g-bg i:nth-child(5) { --c: #137A5A; }
[data-skin="glass"][data-theme="dark"] .g-bg::after { opacity: .07; }
@media print { [data-skin="glass"] .g-bg { display: none; } }

/* ---- Content rises in after each page change (glass.js sets g-enter for a
   moment): the page arrives in order, top first, instead of all at once ---- */
[data-skin="glass"].g-enter #main > .page-head,
[data-skin="glass"].g-enter #main > .stack > *,
[data-skin="glass"].g-enter #main > .panel,
[data-skin="glass"].g-enter #main > .flash { animation: g-rise .48s var(--ease) backwards; }
[data-skin="glass"].g-enter #main > .stack > :nth-child(1) { animation-delay: .03s; }
[data-skin="glass"].g-enter #main > .stack > :nth-child(2) { animation-delay: .06s; }
[data-skin="glass"].g-enter #main > .stack > :nth-child(3) { animation-delay: .09s; }
[data-skin="glass"].g-enter #main > .stack > :nth-child(n+4) { animation-delay: .12s; }
@keyframes g-rise { from { opacity: 0; transform: translateY(12px); } }

/* ---- The big title folds away as you scroll, like iOS — set from the
   scroll position by glass.js. (A scroll-linked CSS animation was tried:
   on a page too short to scroll, Chrome counts it as fully scrolled and the
   title vanished.) ---- */
[data-skin="glass"] .page-head h1 { transform-origin: 0 100%; will-change: opacity, transform; }

/* ---- Disclosures open by growing, where the browser can animate to
   "auto" height (Chrome 131+); elsewhere they settle in as before ---- */
@supports (interpolate-size: allow-keywords) {
  [data-skin="glass"] { interpolate-size: allow-keywords; }
  [data-skin="glass"] details::details-content {
    height: 0; overflow: clip;
    transition: height .38s var(--ease), content-visibility .38s allow-discrete;
  }
  [data-skin="glass"] details[open]::details-content { height: auto; }
}

/* (No content-visibility on long pages: its guessed heights made the page grow
   while you scrolled — Money went 7,200 → 13,700px on a phone — so the bottom
   kept running away. Scrolling measured 100fps without it.) */

/* ==================================================================
   PHONE — sized for a thumb, laid out for one hand
   ================================================================== */
@media (max-width: 860px) {
  /* Every control at least 40px tall, the main ones 44 (Apple's minimum) */
  [data-skin="glass"] .btn { min-height: 44px; white-space: normal; text-align: center; line-height: 1.25; padding-block: 8px; }
  [data-skin="glass"] .btn-sm { min-height: 42px; min-width: 42px; padding: 6px 14px; }
  [data-skin="glass"] .chtab { min-height: 42px; padding: 9px 15px; }
  [data-skin="glass"] .chtabs .chtab { white-space: nowrap; }
  [data-skin="glass"] .status-pick { min-height: 42px; }
  [data-skin="glass"] .thumb-tools .tool { min-width: 0; min-height: 40px; border-radius: 12px; }
  [data-skin="glass"] .check { min-height: 46px; }
  [data-skin="glass"] label:has(> input[type="checkbox"]),
  [data-skin="glass"] label:has(> input[type="radio"]) { min-height: 44px; display: inline-flex; align-items: center; gap: 10px; }
  [data-skin="glass"] .linkline a { display: inline-flex; align-items: center; min-height: 42px; }
  [data-skin="glass"] .page-head { gap: 12px; }
  [data-skin="glass"] .page-head > .row-wrap,
  [data-skin="glass"] .page-head > form { width: 100%; }
  [data-skin="glass"] .page-head .btn-primary { flex: 1 1 auto; }

  /* Saving a video: the Save button floats above the tab bar, so it is in
     reach at any point of a long form */
  [data-skin="glass"] #video-form > .row-wrap:last-child {
    position: sticky; z-index: 25;
    bottom: calc(86px + env(safe-area-inset-bottom, 0px));
    margin-top: 16px; padding: 8px; border-radius: 999px; flex-wrap: nowrap;
    background: var(--g-chrome); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
    box-shadow: inset 0 0 0 .5px var(--g-edge), var(--g-shadow);
  }
  [data-skin="glass"] #video-form > .row-wrap:last-child .btn { flex: 1 1 auto; }
  [data-skin="glass"] body.g-tucked #video-form > .row-wrap:last-child { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

/* Tables on a phone: one compact card per row — the first cell is the
   card's title, every other cell a line of "label · value" — instead of
   each field stacked under its own heading (a row used to fill a screen). */
@media (max-width: 720px) {
  [data-skin="glass"] table.grid:not(.vtable) td[data-label] {
    display: grid; grid-template-columns: minmax(92px, 36%) minmax(0, 1fr);
    column-gap: 12px; row-gap: 0; align-items: baseline;
    padding: 9px 14px;
  }
  [data-skin="glass"] table.grid:not(.vtable) td[data-label]::before {
    grid-column: 1; grid-row: 1 / span 12; margin: 0; text-align: left;
    font-size: 11px; letter-spacing: .03em; text-transform: none; font-weight: 600; color: var(--ink-soft);
  }
  [data-skin="glass"] table.grid:not(.vtable) td[data-label] > * { grid-column: 2; min-width: 0; justify-self: start; }
  [data-skin="glass"] table.grid:not(.vtable) td.num[data-label] > * { justify-self: end; }
  [data-skin="glass"] table.grid:not(.vtable) td.num { text-align: right; }
  [data-skin="glass"] table.grid:not(.vtable) tr > td[data-label]:first-child {
    display: block; padding: 13px 14px 6px; border-bottom: 0; font-size: 15.5px; font-weight: 650;
  }
  [data-skin="glass"] table.grid:not(.vtable) tr > td[data-label]:first-child::before { display: none; }
  [data-skin="glass"] table.grid:not(.vtable) td:empty { display: none; }
  [data-skin="glass"] table.grid:not(.vtable) tr > td:last-child { padding-bottom: 12px; }
}


/* ---- Home: at a glance (inc/glance_view.php) ---- */
[data-skin="glass"] .need {
  border: 0; background: var(--g-hi); font-family: var(--round);
  box-shadow: inset 0 0 0 .5px var(--g-edge), inset 0 1px 1.5px var(--g-rim-lo), var(--g-shadow-lo);
  transition: transform .45s var(--spring), background .2s;
}
[data-skin="glass"] .need:hover { background: var(--g-tint); }
[data-skin="glass"] .need:active { transform: scale(.97); }
[data-skin="glass"] .ch-card {
  border: 0; border-radius: var(--r-lg); background: var(--g-hi);
  box-shadow: inset 0 0 0 .5px var(--g-edge), inset 0 1px 1.5px var(--g-rim-lo), var(--g-shadow-lo);
  transition: transform .45s var(--spring), background .2s;
}
[data-skin="glass"] .ch-card:hover { background: var(--g-tint); }
[data-skin="glass"] .ch-card:active { transform: scale(.98); }
[data-skin="glass"] .ch-card-v strong,
[data-skin="glass"] .row48-n,
[data-skin="glass"] .band,
[data-skin="glass"] .need-n,
[data-skin="glass"] .scale48-marks { font-family: var(--round); }
[data-skin="glass"] .row48 { border-top: .5px solid var(--rule); }
/* whole-card links read as content, not as blue link text */
[data-skin="glass"] a.need, [data-skin="glass"] a.need:hover,
[data-skin="glass"] a.ch-card, [data-skin="glass"] a.ch-card:hover,
[data-skin="glass"] a.row48-t, [data-skin="glass"] .glance-pulse > a.tile { color: var(--ink); text-decoration: none; }
[data-skin="glass"] a.row48-t:hover strong { text-decoration: underline; text-underline-offset: 3px; }
[data-skin="glass"] .row48:first-child { border-top: 0; }
[data-skin="glass"] .meter48 { box-shadow: inset 0 0 0 .5px var(--line); }
[data-skin="glass"] .glance-pulse > a.tile:active { transform: scale(.98); }
@media (prefers-reduced-motion: no-preference) {
  [data-skin="glass"].g-first .meter48 b { animation: g-meter .7s var(--lg-ease-smooth) backwards; transform-origin: left; }
}
@keyframes g-meter { from { transform: scaleX(0); } }


[data-skin="glass"] dialog.sheet {
  border: 0; border-radius: 26px; background: var(--g-menu); color: var(--ink);
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  box-shadow: inset 0 0 0 .5px var(--g-edge), inset 0 1px 1.5px var(--g-rim-lo), 0 30px 60px -20px rgba(0, 0, 0, .45);
}
[data-skin="glass"] dialog.sheet::backdrop { background: rgba(8, 10, 20, .32); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
[data-skin="glass"] .sheet-head { background: transparent; border-bottom: .5px solid var(--rule); -webkit-backdrop-filter: none; }
[data-skin="glass"] .sheet-head h2 { font-family: var(--disp); font-weight: 650; }
@media (max-width: 720px) {
  [data-skin="glass"] dialog.sheet { border-radius: 26px 26px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
}
@media (prefers-reduced-motion: no-preference) {
  [data-skin="glass"] dialog.sheet[open] { animation: g-sheet-in .42s var(--lg-ease-smooth) backwards; }
  [data-skin="glass"] dialog.sheet[open]::backdrop { animation: g-fade-in .3s ease backwards; }
}
@keyframes g-sheet-in { from { opacity: 0; transform: translateY(18px) scale(.985); } }
@keyframes g-fade-in { from { opacity: 0; } }

/* ---- Editors: day by day ---- */
[data-skin="glass"] .ed-card {
  border: 0; border-radius: var(--r-lg); background: var(--g-hi);
  box-shadow: inset 0 0 0 .5px var(--g-edge), inset 0 1px 1.5px var(--g-rim-lo), var(--g-shadow-lo);
}
[data-skin="glass"] .ed-fact { border: 0; border-radius: 14px; background: var(--fill-soft); box-shadow: inset 0 0 0 .5px var(--line); }
[data-skin="glass"] .ed-fact .v, [data-skin="glass"] .ed-card-pay, [data-skin="glass"] .cal-d { font-family: var(--round); }
[data-skin="glass"] .cal-d.is-1, [data-skin="glass"] .cal-d.is-2 { background: var(--lime); }
[data-skin="glass"] .cal-d.is-ot.is-1, [data-skin="glass"] .cal-d.is-ot.is-2 { background: var(--money); }


/* ==================================================================
   HIGHLIGHTS — the things that mean "this is you" or "this needs you".
   Hard border paints them solid lime; a 13% blue tint vanished into the
   wallpaper (owner, 10-07: "need to be more visible"). Same jobs here:
   solid accent where Hard is solid, a deeper tint + a bar where it tints.
   ================================================================== */
:root[data-skin="glass"] {
  --hl:      color-mix(in srgb, var(--acc-fill) 20%, transparent);
  --hl-deep: color-mix(in srgb, var(--acc-fill) 28%, transparent);
  --hl-ring: color-mix(in srgb, var(--acc-fill) 55%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="glass"]:not([data-theme="light"]) {
    --hl:      color-mix(in srgb, var(--acc-fill) 30%, transparent);
    --hl-deep: color-mix(in srgb, var(--acc-fill) 40%, transparent);
    --hl-ring: color-mix(in srgb, #6CBDFF 55%, transparent);
  }
}
:root[data-skin="glass"][data-theme="dark"] {
  --hl:      color-mix(in srgb, var(--acc-fill) 30%, transparent);
  --hl-deep: color-mix(in srgb, var(--acc-fill) 40%, transparent);
  --hl-ring: color-mix(in srgb, #6CBDFF 55%, transparent);
}

/* accent tiles ("you", "views today"): solid, like Hard's lime tile */
[data-skin="glass"] .tile-accent,
[data-skin="glass"] .panel .tile-accent,
[data-skin="glass"] a.tile-accent:hover {
  background: linear-gradient(155deg, color-mix(in srgb, var(--acc-fill) 78%, #fff), var(--acc-fill) 70%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .35), inset 0 0 0 .5px rgba(255, 255, 255, .22), 0 14px 26px -16px var(--acc-fill);
  color: #fff;
}
[data-skin="glass"] .tile-accent .v,
[data-skin="glass"] a.tile-accent:hover .v { color: #fff; }
[data-skin="glass"] .tile-accent .k,
[data-skin="glass"] .tile-accent .n { color: rgba(255, 255, 255, .88); }
[data-skin="glass"] .tile-accent a { color: #fff; text-decoration: underline; }

/* rows that need you (not published yet): a deeper tint and a bar */
[data-skin="glass"] table.grid tr.row-open td { background: var(--hl); }
[data-skin="glass"] table.grid tr.row-open td:first-child { box-shadow: inset 4px 0 0 0 var(--acc-fill); }
[data-skin="glass"] table.grid tr.row-open:hover td { background: var(--hl-deep); }
@media (max-width: 720px) {
  [data-skin="glass"] table.grid tr.row-open,
  [data-skin="glass"] table.grid.vtable tr.row-open:not(.split-row-editor) {
    background: var(--hl); box-shadow: inset 0 0 0 1px var(--hl-ring), inset 4px 0 0 0 var(--acc-fill);
  }
  [data-skin="glass"] table.grid tr.row-open td,
  [data-skin="glass"] table.grid tr.row-open:hover td { background: transparent; }
  [data-skin="glass"] table.grid tr.row-open td:first-child { box-shadow: none; }
}

/* you, on a split: solid, like Hard's lime chip */
[data-skin="glass"] .chip-me { background: var(--acc-fill); color: #fff; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .3); }
[data-skin="glass"] .chip-me .pct { color: #fff; }

/* your line on Money */
[data-skin="glass"] table.calc tr.calc-me td { background: var(--hl); }
[data-skin="glass"] table.calc tr.calc-me td:first-child { box-shadow: inset 4px 0 0 0 var(--acc-fill); }

/* the status pill is sized from its options in one font and drawn in the
   rounded one, which is wider: "Pending upload" came out clipped */
[data-skin="glass"] .status-pick { min-width: 158px; }


/* Browsers without linear() (Safari before 17.2) get the matching cubic curves */
@supports not (transition-timing-function: linear(0, 1)) {
  :root[data-skin="glass"] {
    --lg-ease-smooth: cubic-bezier(.32,.72,0,1); --lg-ease-snappy: cubic-bezier(.25,.9,.3,1.04);
    --lg-ease-bouncy: cubic-bezier(.3,1.35,.5,1); --lg-ease-gentle: cubic-bezier(.3,.8,.3,1); --lg-ease-quick: cubic-bezier(.2,.8,.3,1);
  }
}

/* Numbers that change in place roll digit by digit (glass.js, LG.rollNumber) */
[data-skin="glass"] .g-roll { display: inline-flex; overflow: hidden; vertical-align: bottom; line-height: 1.1; }
[data-skin="glass"] .g-roll__c { position: relative; display: inline-block; }
[data-skin="glass"] .g-roll__c > span { display: inline-block; }
[data-skin="glass"] .g-roll__c > span.is-new { position: absolute; left: 0; top: 0; }

/* While a page slides in on a phone, nothing may scroll sideways */
html[data-skin="glass"].g-sliding,
[data-skin="glass"].g-sliding body { overflow-x: clip; }

/* Light/dark switching: every colour changes in the same frame (glass.js
   sets this for a moment), instead of each element fading at its own speed. */
[data-skin="glass"].g-swap *, [data-skin="glass"].g-swap *::before, [data-skin="glass"].g-swap *::after {
  transition: none !important;
}

/* Touch screens have no hover, but keep the last hover look after a tap —
   a button left brighter, a row left tinted. Undo those where there is no
   real pointer. */
@media (hover: none) {
  [data-skin="glass"] .btn:hover { filter: none; }
  [data-skin="glass"] .sidenav a:hover { background: transparent; }
  [data-skin="glass"] a.tile:hover { filter: none; }
  [data-skin="glass"] .check:hover { background: var(--field); }
  [data-skin="glass"] .check:has(input:checked):hover { background: var(--lime-soft); }
  [data-skin="glass"] .chtab:hover { background: transparent; color: var(--ink-soft); }
  [data-skin="glass"] .chtab[aria-current="page"]:hover { color: var(--ink); }
  [data-skin="glass"] a.chip:hover { background: var(--fill-soft); }
  [data-skin="glass"] .dropzone:hover:not(.over) { background: var(--fill-soft); border-color: var(--ink-faint); transform: none; }
  [data-skin="glass"] table.grid tbody tr:hover td { background: transparent; }
  [data-skin="glass"] table.grid tr.row-open:hover td { background: var(--lime-soft); }
}

@media (prefers-reduced-motion: reduce) {
  [data-skin="glass"] *, [data-skin="glass"] *::before, [data-skin="glass"] *::after {
    transition-duration: .01ms !important; animation-duration: .01ms !important;
  }
}

@media print {
  [data-skin="glass"] body::before { display: none; }
  [data-skin="glass"] .panel, [data-skin="glass"] .tile { box-shadow: none; background: #fff; }
}