/* Aldar — Glass (docs/PRD-GLASS.md, session 16).

   Loaded ONLY behind the ?ui=glass cookie, after app.css. Every rule is scoped under
   [data-ui=glass], so this file cannot touch the classic look even if it were loaded by
   mistake. app.css is not edited.

   HOW IT IS BUILT. app.css draws everything from a handful of tokens (--bg, --panel,
   --ink, --muted, --line, --brand, ...). Most of the reskin is therefore just new values
   for those tokens, plus new shapes for the ~25 shared components (card, stat, row, btn,
   chip, input). Page markup is untouched except the shell, the dashboard and the sign-in
   card.

   THE DECISIONS THIS FILE CARRIES (PRD §12, Abdul 2026-09-25):
   * backdrop-filter ONLY on surfaces content scrolls under: the sidebar, the top bar, the
     phone tab bar and the More sheet. Cards are translucent, edged and shadowed, but not
     blurred - blurring a soft gradient changes almost nothing and costs a cheap phone a
     lot.
   * The blobs are radial gradients on ONE fixed layer (body::before). Never elements with
     filter:blur().
   * Colours marked † differ from the brief: they failed 4.5:1 at the worst point of the
     background (PRD §8).
   * No text in a status colour sits on bare ground; small grey text on bare ground uses
     --g-muted-ground. */

/* ------------------------------------------------------------------ fonts
   Self-hosted, subset (Latin 500/700/800, Arabic 500/700), swap. The family names are
   our own so a font installed on the phone can never be picked up instead. */
@font-face{font-family:"Aldar Latin"; font-style:normal; font-weight:500; font-display:swap;
  src:url(/fonts/manrope-500.woff2?v=1) format("woff2");
  unicode-range:U+0020-007E,U+00A0-00FF,U+2010-2015,U+2018-201F,U+2022,U+2026,U+2039-203A,U+2212,U+20AC}
@font-face{font-family:"Aldar Latin"; font-style:normal; font-weight:700; font-display:swap;
  src:url(/fonts/manrope-700.woff2?v=1) format("woff2");
  unicode-range:U+0020-007E,U+00A0-00FF,U+2010-2015,U+2018-201F,U+2022,U+2026,U+2039-203A,U+2212,U+20AC}
@font-face{font-family:"Aldar Latin"; font-style:normal; font-weight:800; font-display:swap;
  src:url(/fonts/manrope-800.woff2?v=1) format("woff2");
  unicode-range:U+0020-007E,U+00A0-00FF,U+2010-2015,U+2018-201F,U+2022,U+2026,U+2039-203A,U+2212,U+20AC}
@font-face{font-family:"Aldar Arabic"; font-style:normal; font-weight:500; font-display:swap;
  src:url(/fonts/plexar-500.woff2?v=1) format("woff2");
  unicode-range:U+0600-065F,U+066A-06EF,U+06FA-06FF,U+200C-200F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Aldar Arabic"; font-style:normal; font-weight:700 800; font-display:swap;
  src:url(/fonts/plexar-700.woff2?v=1) format("woff2");
  unicode-range:U+0600-065F,U+066A-06EF,U+06FA-06FF,U+200C-200F,U+FB50-FDFF,U+FE70-FEFF}

/* ------------------------------------------------------------------ tokens: light
   OASIS (docs/PRD-OASIS-APP.md, DESIGN.md, Abdul 07/10): the landing's palette inside the app.
   Warm pearl ground, green-charcoal ink, Omani teal = act, gold = owes / needs attention ONLY,
   green = paid, terracotta = overdue / error. Cards are solid pearl with one soft shadow; only the
   bars that content scrolls under are blurred. Dark = "Night oasis". */
:root[data-ui=glass]{
  --g-base:#F3F1EC; --g-glow:rgba(217,164,65,.20); --g-dots:rgba(31,45,43,.10);
  --g-glass:#FBFAF7; --g-glass-hi:rgba(36,103,95,.05); --g-edge:rgba(31,45,43,.07);
  --g-shadow:0 10px 30px rgba(31,45,43,.08); --g-bar:rgba(251,250,247,.84); --g-bar-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 10px 30px rgba(31,45,43,.12);
  --g-tab-on:rgba(36,103,95,.11); --g-solid:#FBFAF7; --g-muted-ground:#46524F;
  --g-link:#24675F; --g-btn:#24675F; --g-btn-ink:#FFFFFF;
  --g-btn-hover:#1C5650; --g-field:#FFFFFF; --g-field-edge:rgba(31,45,43,.26);
  --g-control-edge:rgba(31,45,43,.55); --g-track:rgba(31,45,43,.08); --g-blue:#2A7C72;
  --g-blue-bg:rgba(36,103,95,.10); --g-accent-soft:rgba(36,103,95,.12); --g-accent-ink:#1C5650;
  --g-badge-ink:#FFFFFF; --lg-door:#D9A441; --lg-knob:#1F2D2B;
  --bg:var(--g-glass-hi); --panel:var(--g-glass); --ink:#1F2D2B;
  --muted:#56625F; --line:rgba(31,45,43,.10); --brand:#24675F;
  --brand-ink:#FFFFFF; --brand-soft:rgba(36,103,95,.10); --good:#24614A;
  --good-bg:rgba(107,174,140,.18); --warn:#6B4C12; --warn-bg:rgba(217,164,65,.24);
  --bad:#9A3B26; --bad-bg:rgba(224,138,120,.18); --accent:#D9A441;
  --accent-ink:#5E4410; --radius:24px; --radius-sm:14px;
  --gap:16px; --shadow:var(--g-shadow); --ch-ink:#24675F;
  --ch-pale:#B9D3CE; --ch-bad:#B5523C; --ch-grid:rgba(31,45,43,.10);
  --ch-axis:#56625F;
}

/* ------------------------------------------------------------------ tokens: dark
   Twice, like app.css: once for an account that follows the phone, once for one that chose dark. */
@media (prefers-color-scheme:dark){
  :root[data-ui=glass][data-theme=auto]{
    --g-base:#0E1819; --g-glow:rgba(230,179,92,.12); --g-dots:rgba(232,238,234,.07);
    --g-glass:#152325; --g-glass-hi:rgba(232,238,234,.05); --g-edge:rgba(232,238,234,.08);
    --g-shadow:0 10px 30px rgba(0,0,0,.35); --g-bar:rgba(21,35,37,.84); --g-bar-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 12px 36px rgba(0,0,0,.5);
    --g-tab-on:rgba(79,191,174,.16); --g-solid:#152325; --g-muted-ground:#B3C2BE;
    --g-link:#7FD0C2; --g-btn:#4FBFAE; --g-btn-ink:#06201C;
    --g-btn-hover:#6ED3C3; --g-field:rgba(232,238,234,.05); --g-field-edge:rgba(232,238,234,.24);
    --g-control-edge:rgba(232,238,234,.45); --g-track:rgba(232,238,234,.08); --g-blue:#4FBFAE;
    --g-blue-bg:rgba(79,191,174,.14); --g-accent-soft:rgba(79,191,174,.16); --g-accent-ink:#7FD0C2;
    --g-badge-ink:#06201C; --lg-door:#E6B35C; --lg-knob:#0E1819;
    --bg:var(--g-glass-hi); --panel:var(--g-glass); --ink:#E8EEEA;
    --muted:#9FB1AC; --line:rgba(232,238,234,.10); --brand:#4FBFAE;
    --brand-ink:#06201C; --brand-soft:rgba(79,191,174,.14); --good:#7FD7B0;
    --good-bg:rgba(95,181,146,.14); --warn:#F2CF8E; --warn-bg:rgba(230,179,92,.16);
    --bad:#F0A28F; --bad-bg:rgba(217,130,111,.14); --accent:#E6B35C;
    --accent-ink:#F2CF8E; --radius:24px; --radius-sm:14px;
    --gap:16px; --shadow:var(--g-shadow); --ch-ink:#4FBFAE;
    --ch-pale:#3F5D5A; --ch-bad:#F0A28F; --ch-grid:rgba(232,238,234,.08);
    --ch-axis:#9FB1AC;
    color-scheme:dark;
  }
}
:root[data-ui=glass][data-theme=dark]{
  --g-base:#0E1819; --g-glow:rgba(230,179,92,.12); --g-dots:rgba(232,238,234,.07);
  --g-glass:#152325; --g-glass-hi:rgba(232,238,234,.05); --g-edge:rgba(232,238,234,.08);
  --g-shadow:0 10px 30px rgba(0,0,0,.35); --g-bar:rgba(21,35,37,.84); --g-bar-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 12px 36px rgba(0,0,0,.5);
  --g-tab-on:rgba(79,191,174,.16); --g-solid:#152325; --g-muted-ground:#B3C2BE;
  --g-link:#7FD0C2; --g-btn:#4FBFAE; --g-btn-ink:#06201C;
  --g-btn-hover:#6ED3C3; --g-field:rgba(232,238,234,.05); --g-field-edge:rgba(232,238,234,.24);
  --g-control-edge:rgba(232,238,234,.45); --g-track:rgba(232,238,234,.08); --g-blue:#4FBFAE;
  --g-blue-bg:rgba(79,191,174,.14); --g-accent-soft:rgba(79,191,174,.16); --g-accent-ink:#7FD0C2;
  --g-badge-ink:#06201C; --lg-door:#E6B35C; --lg-knob:#0E1819;
  --bg:var(--g-glass-hi); --panel:var(--g-glass); --ink:#E8EEEA;
  --muted:#9FB1AC; --line:rgba(232,238,234,.10); --brand:#4FBFAE;
  --brand-ink:#06201C; --brand-soft:rgba(79,191,174,.14); --good:#7FD7B0;
  --good-bg:rgba(95,181,146,.14); --warn:#F2CF8E; --warn-bg:rgba(230,179,92,.16);
  --bad:#F0A28F; --bad-bg:rgba(217,130,111,.14); --accent:#E6B35C;
  --accent-ink:#F2CF8E; --radius:24px; --radius-sm:14px;
  --gap:16px; --shadow:var(--g-shadow); --ch-ink:#4FBFAE;
  --ch-pale:#3F5D5A; --ch-bad:#F0A28F; --ch-grid:rgba(232,238,234,.08);
  --ch-axis:#9FB1AC;
  color-scheme:dark;
}

/* ------------------------------------------------------------------ ground + type */
[data-ui=glass] body{
  background:var(--g-base); color:var(--ink);
  font-family:"Aldar Latin",system-ui,-apple-system,"Segoe UI",sans-serif; font-weight:500;
  scroll-padding-top:96px;
}
html[lang=ar][data-ui=glass] body{
  font-family:"Aldar Arabic","Aldar Latin",system-ui,"Segoe UI","Noto Sans Arabic",Tahoma,sans-serif;
}
/* The ground (Oasis, like the landing): one fixed layer - a faint dot field and one soft gold glow
   at the top. Gradients only, no filter, no element per dot. */
[data-ui=glass] body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 40% at 80% 0%, var(--g-glow), transparent 70%),
    radial-gradient(circle, var(--g-dots) 1px, transparent 1.2px) 0 0/22px 22px;
}
[data-ui=glass][dir=rtl] body::before{
  background:
    radial-gradient(60% 40% at 20% 0%, var(--g-glow), transparent 70%),
    radial-gradient(circle, var(--g-dots) 1px, transparent 1.2px) 0 0/22px 22px;
}
[data-ui=glass] a{color:var(--g-link)}
/* a row title is a name first and a link second - the classic rule, restated */
[data-ui=glass] :is(.row-t a,.q-main .row-t a,td a){color:inherit}
[data-ui=glass] :focus-visible{outline:2px solid var(--g-link); outline-offset:2px}
/* After a tab tap the router focuses <main> (tabindex=-1) so a screen reader starts on the new screen.
   That is not a control: never draw a ring round the whole page (iPhone Safari showed it as a teal line
   at the top and bottom of most tabs, Abdul 07/10). The rule above outranks app.css "main:focus{outline:none}". */
[data-ui=glass] main[tabindex="-1"]:focus{outline:none}
[data-ui=glass] h1{font-size:1.55rem; font-weight:800; letter-spacing:-.02em; line-height:1.2}
[data-ui=glass] h2{font-weight:800; letter-spacing:-.005em}
[data-ui=glass] h2.sec{font-size:1.08rem}
html[lang=ar][data-ui=glass] h1,html[lang=ar][data-ui=glass] h2{letter-spacing:normal}
/* money is always tabular */
[data-ui=glass] :is(.amt,.stat-v,.q-amt,td.num,.g-kpi-v,.g-big,.g-ring-v,.g-badge,.row-r){font-variant-numeric:tabular-nums}

/* Small grey text straight on the ground (not in a panel) takes the stronger grey. */
[data-ui=glass] .sub{color:var(--g-muted-ground)}
[data-ui=glass] :is(.card,.stat,.g-kpi,.note,.pick) .sub{color:var(--muted)}
[data-ui=glass] main > :is(p,.muted,.small,.empty,.scroll-hint,.field-h),
[data-ui=glass] .login > :is(p,.sub),
[data-ui=glass] .login .ctr .sub{color:var(--g-muted-ground)}

/* ------------------------------------------------------------------ the shell */
[data-ui=glass] body.g-in{display:grid; grid-template-columns:minmax(0,1fr); min-height:100vh; min-height:100dvh}
[data-ui=glass] .g-col{min-width:0; display:flex; flex-direction:column}
[data-ui=glass] .wrap{
  width:100%; max-width:1200px; margin:0 auto;
  padding:14px 16px calc(112px + env(safe-area-inset-bottom));
  padding-left:calc(16px + env(safe-area-inset-left));
  padding-right:calc(16px + env(safe-area-inset-right));
}
[data-ui=glass] .wrap.wide{max-width:1200px}

/* icons */
[data-ui=glass] .g-ic{width:21px; height:21px; flex:none; fill:none; stroke:currentColor;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}

/* floating surfaces: the ONLY things blurred */
[data-ui=glass] :is(.g-side,.g-top,.g-tabbar,.g-sheet){
  background:var(--g-bar); border:0; box-shadow:var(--g-bar-shadow);
  -webkit-backdrop-filter:blur(28px) saturate(170%); backdrop-filter:blur(28px) saturate(170%);
}

/* the AD mark */
:root[data-ui=glass] .mark{background:var(--g-btn); color:var(--g-btn-ink); border-radius:10px}
:root[data-ui=glass] .mark.mark-lg{background:var(--g-btn); color:var(--g-btn-ink); border-radius:14px}

/* top bar */
[data-ui=glass] .g-top{
  position:sticky; top:calc(8px + env(safe-area-inset-top)); z-index:5;
  display:flex; align-items:center; gap:8px;
  margin:calc(8px + env(safe-area-inset-top)) 12px 0; padding:6px 6px 6px 14px;
  padding-inline-start:14px; padding-inline-end:6px;
  border-radius:26px; min-height:58px;
}
[data-ui=glass] .g-when{flex:1; min-width:0; display:flex; align-items:center; gap:10px}
[data-ui=glass] .g-mark-sm{width:30px; height:30px; font-size:.7rem}
[data-ui=glass] .g-date{font-size:.84rem; font-weight:700; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
[data-ui=glass] .g-vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; margin:0}
[data-ui=glass] .g-search{display:none; position:relative; align-items:center; width:clamp(200px, 26vw, 340px)}
[data-ui=glass] .g-search .g-ic{position:absolute; inset-inline-start:14px; width:18px; height:18px; color:var(--muted); pointer-events:none}
[data-ui=glass] .g-search input{padding-inline-start:40px; min-height:44px}
[data-ui=glass] .g-icbtn{
  display:grid; place-items:center; width:44px; height:44px; flex:none; border-radius:50%;
  background:var(--g-glass-hi); border:1px solid var(--g-edge); color:var(--ink);
}
[data-ui=glass] .g-icbtn:hover{text-decoration:none}
[data-ui=glass] .g-av{
  display:grid; place-items:center; width:36px; height:36px; flex:none; border-radius:50%;
  background:var(--g-accent-soft); color:var(--g-accent-ink); font-weight:800; font-size:.92rem;
}
[data-ui=glass] .g-av-btn{background:transparent; border:0}
[data-ui=glass] .g-av-btn .g-av{width:44px; height:44px}
[data-ui=glass] .g-lang{display:none; padding:3px; gap:2px; border-radius:999px;
  background:var(--g-glass-hi); border:1px solid var(--g-edge)}
[data-ui=glass] .g-lang button{
  min-width:44px; min-height:40px; padding:0 10px; border:0; border-radius:999px;
  background:transparent; color:var(--muted); font:inherit; font-weight:800; font-size:.85rem; cursor:pointer;
}
[data-ui=glass] .g-lang button.on{background:var(--g-solid); color:var(--ink); box-shadow:0 1px 3px rgba(31,45,43,.12)}
[data-ui=glass] .g-lang button[lang=ar]{font-family:"Aldar Arabic",system-ui,sans-serif; font-size:1rem}
[data-ui=glass] .g-top > a.g-icbtn:not(.g-search-btn):not(.g-av-btn){display:none}   /* the bell: desktop and tablet */

/* flash, as a toast in the column */
[data-ui=glass] .flash{margin:10px 12px 0; padding:12px 16px; border-radius:18px; font-weight:600;
  border:0; box-shadow:var(--g-shadow)}

/* sidebar / rail: hidden on a phone */
[data-ui=glass] .g-side{display:none}
[data-ui=glass] .g-side .brand{display:flex; align-items:center; gap:10px; color:var(--ink); font-weight:800; padding:6px 8px 14px}
[data-ui=glass] .g-side .brand:hover{text-decoration:none}
[data-ui=glass] .g-side .nav{
  position:static; display:flex; flex-direction:column; gap:3px; overflow:visible;
  background:none; border:0; padding:0; scroll-snap-type:none;
}
[data-ui=glass] .g-side .nav-a{
  display:flex; align-items:center; gap:12px; min-height:44px; padding:9px 12px;
  border:0; border-radius:14px; color:var(--muted); font-size:.92rem; font-weight:700;
}
[data-ui=glass] .g-side .nav-a:hover{text-decoration:none}
/* Groups (docs/PRD-UX.md N): daily · money · record and settings - separated by space, not lines */
[data-ui=glass] .g-side .nav-a.g-gap{margin-top:16px}
[data-ui=glass] .g-side .nav-a.on,[data-ui=glass] .g-side .nav-a.going{
  background:var(--g-glass-hi); color:var(--ink); border:0;
  box-shadow:0 0 0 1px var(--g-edge) inset, 0 4px 14px rgba(31,45,43,.07);
}
[data-ui=glass] .g-nl{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
[data-ui=glass] .g-badge{
  min-width:24px; padding:1px 8px; border-radius:999px; font-size:.75rem; font-weight:800; text-align:center;
  background:var(--g-track); color:var(--muted);
}
[data-ui=glass] .g-badge.bad{background:var(--bad-bg); color:var(--bad)}
[data-ui=glass] .g-user{margin-top:auto; display:flex; flex-direction:column; gap:4px; padding-top:12px;
  border-top:1px solid var(--line)}
[data-ui=glass] .g-user-a{display:flex; align-items:center; gap:10px; padding:8px; border-radius:14px; color:var(--ink); min-height:44px}
[data-ui=glass] .g-user-a:hover{text-decoration:none}
[data-ui=glass] .g-user-t{display:flex; flex-direction:column; min-width:0; line-height:1.25}
[data-ui=glass] .g-user-n{font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
[data-ui=glass] .g-user-r{font-size:.78rem; color:var(--muted); font-weight:600}
[data-ui=glass] .g-out{display:flex; align-items:center; gap:12px; min-height:44px; padding:9px 12px;
  border-radius:14px; color:var(--muted); font-size:.88rem; font-weight:700}
[data-ui=glass] .g-out:hover{text-decoration:none}

/* phone tab bar */
[data-ui=glass] .g-tabbar{
  position:fixed; z-index:8; inset-inline:12px; bottom:calc(12px + env(safe-area-inset-bottom));
  display:flex; gap:2px; padding:6px; border-radius:34px; min-height:68px;
}
[data-ui=glass] .g-tab{
  position:relative; flex:1 1 0; min-width:0; min-height:56px; border-radius:28px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  color:var(--g-muted-ground); font-size:11px; font-weight:700; line-height:1.1; border:0; padding:0 2px;
}
[data-ui=glass] .g-tab:hover{text-decoration:none}
[data-ui=glass] .g-tab.on,[data-ui=glass] .g-tab.going{background:var(--g-tab-on); color:var(--ink); font-weight:800}
[data-ui=glass] .g-tl{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
[data-ui=glass] .g-dotn{
  position:absolute; top:4px; inset-inline-start:calc(50% + 4px); min-width:18px; height:18px; padding:0 5px;
  border-radius:9px; font-size:10.5px; font-weight:800; line-height:18px; text-align:center;
  background:var(--g-btn); color:var(--g-btn-ink);
}
[data-ui=glass] .g-dotn.bad{background:var(--bad); color:var(--g-badge-ink)}
[data-ui=glass] .g-more{flex:1 1 0; min-width:0; display:flex}
[data-ui=glass] .g-more > summary{list-style:none; cursor:pointer; width:100%}
[data-ui=glass] .g-more > summary::-webkit-details-marker{display:none}
[data-ui=glass] .g-sheet{
  position:fixed; z-index:9; inset-inline:12px; bottom:calc(92px + env(safe-area-inset-bottom));
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; padding:8px; border-radius:26px;
}
[data-ui=glass] .g-sheet-a{
  display:flex; align-items:center; gap:10px; min-height:52px; padding:10px 14px; border-radius:18px;
  color:var(--ink); font-weight:700; font-size:.92rem;
}
[data-ui=glass] .g-sheet-a:hover{text-decoration:none}
[data-ui=glass] .g-sheet-a.on{background:var(--g-tab-on)}

/* the router's progress line */
[data-ui=glass] .nav-bar{top:env(safe-area-inset-top); height:3px; background:var(--g-link)}

/* ---- tablet: the rail (720-1079) ---- */
@media (min-width:720px){
  [data-ui=glass] body.g-in{grid-template-columns:84px minmax(0,1fr)}
  [data-ui=glass] .g-tabbar{display:none}
  [data-ui=glass] .g-side{
    display:flex; flex-direction:column; position:sticky; top:12px; align-self:start;
    height:calc(100vh - 24px); height:calc(100dvh - 24px); margin:12px 0 12px 12px; margin-inline:12px 0;
    padding:12px 10px; border-radius:28px; overflow-y:auto; scrollbar-width:none;
  }
  [data-ui=glass] .g-side .brand{justify-content:center; padding:4px 0 12px}
  [data-ui=glass] .g-side .brand-t,[data-ui=glass] .g-side .g-nl,[data-ui=glass] .g-user-t{display:none}
  [data-ui=glass] .g-side .nav-a,[data-ui=glass] .g-out{justify-content:center; padding:10px 0; position:relative}
  [data-ui=glass] .g-user-a{justify-content:center; padding:6px 0}
  [data-ui=glass] .g-side .g-badge{position:absolute; top:3px; inset-inline-end:3px; min-width:18px; padding:0 5px;
    font-size:10px; line-height:16px}
  [data-ui=glass] .g-mark-sm,[data-ui=glass] .g-search-btn,[data-ui=glass] .g-av-btn{display:none}
  [data-ui=glass] .g-search,[data-ui=glass] .g-lang{display:flex}
  [data-ui=glass] .g-top > a.g-icbtn:not(.g-search-btn):not(.g-av-btn){display:grid}
  [data-ui=glass] .g-top{margin:12px 16px 0}
  [data-ui=glass] .flash{margin:10px 16px 0}
  [data-ui=glass] .wrap{padding:18px 16px 48px}
}
/* ---- desktop: the full sidebar ---- */
@media (min-width:1080px){
  [data-ui=glass] body.g-in{grid-template-columns:264px minmax(0,1fr)}
  [data-ui=glass] .g-side{padding:16px 14px}
  [data-ui=glass] .g-side .brand{justify-content:flex-start; padding:4px 8px 16px}
  [data-ui=glass] .g-side .brand-t,[data-ui=glass] .g-side .g-nl,[data-ui=glass] .g-user-t{display:flex}
  [data-ui=glass] .g-side .g-nl{display:block}
  [data-ui=glass] .g-side .nav-a,[data-ui=glass] .g-out{justify-content:flex-start; padding:9px 12px}
  [data-ui=glass] .g-user-a{justify-content:flex-start; padding:8px}
  [data-ui=glass] .g-side .g-badge{position:static; min-width:24px; padding:1px 8px; font-size:.75rem; line-height:1.5}
  [data-ui=glass] .g-top{margin:12px 24px 0}
  [data-ui=glass] .flash{margin:10px 24px 0}
  [data-ui=glass] .wrap{padding:22px 24px 56px}
}

/* ------------------------------------------------------------------ components */
/* cards: solid pearl, one soft shadow, no visible edge (Oasis; DESIGN.md §4, §6). The transparent
   border keeps the box size and shows up in forced-colors mode. */
[data-ui=glass] .card{
  background:var(--g-glass); border:0; border-radius:24px;
  box-shadow:var(--g-shadow); padding:18px 20px; margin-bottom:var(--gap);
}
[data-ui=glass] .card-h{margin-bottom:8px}
[data-ui=glass] .card-h h2{font-size:1rem; font-weight:800}
[data-ui=glass] .card-h .btn.sm.ghost{color:var(--g-link); font-weight:700; min-height:44px; display:inline-flex; align-items:center}

/* stat tiles */
[data-ui=glass] .stats{gap:12px}
[data-ui=glass] .stat{
  background:var(--g-glass); border:0; border-radius:22px;
  box-shadow:var(--g-shadow); padding:14px 16px;
}
[data-ui=glass] .stat-l{text-transform:none; letter-spacing:0; font-size:.8rem; font-weight:700; color:var(--muted);
  display:flex; align-items:center; gap:7px}
[data-ui=glass] .stat-l::before{content:""; width:8px; height:8px; flex:none; border-radius:50%; background:var(--g-dot, var(--g-blue))}
[data-ui=glass] .stat.bad{--g-dot:var(--bad)} [data-ui=glass] .stat.good{--g-dot:var(--good)}
[data-ui=glass] .stat.warn{--g-dot:var(--accent)} [data-ui=glass] .stat.mute{--g-dot:var(--muted)}
[data-ui=glass] .an-f .stat-l::before{display:none}
[data-ui=glass] .stat-v{font-weight:800; letter-spacing:-.02em; font-size:clamp(1.1rem, 5.6vw, 1.35rem)}
[data-ui=glass] .stat-s{font-size:.76rem}

/* rows */
[data-ui=glass] .row{padding:12px 2px; min-height:52px}
[data-ui=glass] .row-t{font-weight:700}
/* A row title that also carries chips (Settings → reminder templates): with the classic
   one-line ellipsis the chips were cut off. The name keeps its ellipsis; the chips wrap. */
@media screen{
  [data-ui=glass] .row-t:has(> .chip){display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; white-space:normal}
  [data-ui=glass] .row-t:has(> .chip) > a{min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
}
[data-ui=glass] .row-r .amt{font-weight:800}
[data-ui=glass] .q-row{padding:13px 2px}
[data-ui=glass] .q-amt{font-weight:800}
[data-ui=glass] .log-day{background:var(--g-glass-hi); border-radius:12px; border-bottom:0}

/* chips */
[data-ui=glass] .chip{padding:3px 10px; font-size:.74rem; font-weight:700}
[data-ui=glass] .chip.mute{background:var(--g-track); color:var(--muted)}
[data-ui=glass] a.chip{padding:6px 12px; min-height:32px; display:inline-flex; align-items:center}
[data-ui=glass] a.chip.on{background:var(--g-btn); color:var(--g-btn-ink)}
[data-ui=glass] .chip-btn{border-radius:999px}

/* buttons */
[data-ui=glass] .btn{
  border-radius:999px; background:var(--g-btn); border-color:var(--g-btn); color:var(--g-btn-ink);
  font-weight:700; padding:11px 20px; min-height:44px;
}
[data-ui=glass] .btn.ghost{background:var(--g-glass-hi); border-color:var(--g-control-edge); color:var(--ink)}
[data-ui=glass] .btn.sm{padding:8px 14px; min-height:36px}
[data-ui=glass] .btn.danger{background:var(--bad); border-color:var(--bad); color:var(--g-badge-ink)}
[data-ui=glass] .btn.wa{border-radius:999px; background:transparent; color:var(--good); border-color:var(--good); min-height:36px; padding:6px 12px}
[data-ui=glass] .btn:disabled{opacity:.45}

/* fields */
[data-ui=glass] input,[data-ui=glass] select,[data-ui=glass] textarea{
  background:var(--g-field); border:1px solid var(--g-control-edge); border-radius:999px;
  padding:11px 16px; min-height:44px; color:var(--ink);
}
[data-ui=glass] textarea{border-radius:18px}
/* Glass fields are see-through; the OS-drawn option list cannot be, so it gets the solid tone. */
[data-ui=glass] select option,[data-ui=glass] select optgroup{background-color:var(--g-solid); color:var(--ink)}
[data-ui=glass] input[type=checkbox],[data-ui=glass] input[type=radio]{border-radius:4px; min-height:0; padding:0; accent-color:var(--g-btn)}
[data-ui=glass] input[type=file]{border-radius:18px; padding:8px 10px}
[data-ui=glass] input[type=file]::file-selector-button{border-radius:999px; border-color:var(--g-control-edge)}
[data-ui=glass] input:focus,[data-ui=glass] select:focus,[data-ui=glass] textarea:focus{
  outline:2px solid var(--g-link); outline-offset:1px; border-color:var(--g-link)}
[data-ui=glass] label{color:var(--muted); font-weight:700}
[data-ui=glass] label.check,[data-ui=glass] label.cat,[data-ui=glass] .label-inline{color:var(--ink)}
[data-ui=glass] .combo-list{background:var(--g-solid); border-color:var(--g-control-edge); border-radius:18px}
[data-ui=glass] .combo-opt{border-radius:12px}
[data-ui=glass] .datef.show-native .date-native{border-radius:999px}
[data-ui=glass] label.cat{background:var(--g-glass-hi); border-color:var(--g-field-edge); border-radius:16px}
[data-ui=glass] label.cat:has(input:checked),[data-ui=glass] label.cat.on{border-color:var(--g-btn); background:var(--brand-soft); box-shadow:inset 0 0 0 1px var(--g-btn)}

/* notes, filters, the smaller panels */
[data-ui=glass] .note{background:var(--g-glass-hi); border:1px solid var(--g-edge); border-radius:16px; color:var(--muted)}
[data-ui=glass] .note.warn{background:var(--warn-bg); color:var(--warn); border-color:transparent}
[data-ui=glass] .bar{padding:8px; border-radius:26px; background:var(--g-glass); border:0; box-shadow:var(--g-shadow)}
[data-ui=glass] .card .bar{padding:0; background:none; border:0; box-shadow:none; border-radius:0}
[data-ui=glass] .pick{background:var(--g-glass-hi); border:1px solid var(--g-edge); border-radius:18px}
[data-ui=glass] .offer,[data-ui=glass] .preview-msg{background:var(--g-glass-hi); border-color:var(--g-edge); border-radius:16px}
[data-ui=glass] .empty-state{border-radius:24px; border-color:var(--g-field-edge)}

/* tables: the sticky header and first column need a solid colour, or the rows show
   through them as they scroll */
[data-ui=glass] :is(.scroll, table){--panel:var(--g-solid)}
[data-ui=glass] .scroll{border-radius:14px}
/* ...but only where a column actually sticks. Painting the header row and the first column
   solid on a table that does not scroll left a patchwork: solid cells beside see-through
   ones. So cells are clear by default, and a table that scrolls sideways (under 900px, in
   .scroll) becomes ONE solid sheet, header, first column and all. Screen only: paper keeps
   the classic print. */
@media screen{ [data-ui=glass] :is(th, td:first-child, tfoot td){background:transparent} }
@media screen and (max-width:899.98px){
  [data-ui=glass] .scroll{background-color:var(--g-solid)}
  [data-ui=glass] .scroll :is(th, td:first-child, tfoot td){background:var(--g-solid)}
}
[data-ui=glass] th{text-transform:none; letter-spacing:0; font-size:.76rem; font-weight:700}
[data-ui=glass] tr.here td,[data-ui=glass] tr.here td:first-child{background:var(--brand-soft)}
[data-ui=glass] .ch-dot{stroke:var(--g-solid)}
[data-ui=glass] .ch-base{stroke:var(--g-field-edge)}

/* sign-in and setup */
[data-ui=glass] .login .card{border-radius:28px; padding:24px; max-width:360px}
[data-ui=glass] .login h1{font-size:1.7rem}

/* ------------------------------------------------------------------ the dashboard */
[data-ui=glass] .g-head{margin:4px 2px 14px}
[data-ui=glass] .g-head .sub{margin:2px 0 0}
[data-ui=glass] .g-dash{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--gap); margin-bottom:var(--gap)}
[data-ui=glass] .g-dash > .card{margin:0; min-width:0}
/* docs/PRD-UX.md D: each card only as tall as its content, and the lists packed in columns so
   a short card never leaves a hole beside a long one. Cards never split across columns. */
/* the rent card fills the row beside Occupancy: its button rests at the bottom, no empty block */
[data-ui=glass] .g-dash > .g-hero{display:flex; flex-direction:column}
[data-ui=glass] .g-dash > .g-hero > .g-hero-a{margin-top:auto}
[data-ui=glass] .dashboard-cards.g-masonry{display:block; column-gap:var(--gap)}
[data-ui=glass] .dashboard-cards.g-masonry > .card{display:inline-block; width:100%; break-inside:avoid; margin:0 0 var(--gap)}
@media (min-width:720px){ [data-ui=glass] .dashboard-cards.g-masonry{columns:2} }
/* Fold-outs (Show all, Billing rules, Fixed) are .g-fold, NOT .g-more: .g-more is the phone bar's More
   tab (flex, full-width grey summary) and app.js treats any open .g-more as the More sheet (session 16 bug). */
[data-ui=glass] .g-fold > summary{color:var(--brand)}
[data-ui=glass] .g-hero{border-radius:28px; padding:20px 22px; display:flex; flex-direction:column; gap:12px}
[data-ui=glass] .g-hero-h{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
[data-ui=glass] .g-hero-h h2{flex:1; font-size:.9rem; font-weight:700; color:var(--muted)}
[data-ui=glass] .g-hero-v{display:flex; flex-direction:column; gap:2px}
[data-ui=glass] .g-big{font-size:clamp(2rem, 9vw, 2.6rem); font-weight:800; letter-spacing:-.03em; line-height:1.05; white-space:nowrap}
[data-ui=glass] .g-hero-s{font-size:.9rem; font-weight:700; color:var(--muted)}
[data-ui=glass] .g-prog{display:block; overflow:visible}
[data-ui=glass] .g-prog-t{fill:var(--g-track)}
[data-ui=glass] .g-prog-f{fill:var(--g-btn)}
[data-ui=glass][dir=rtl] .g-prog{transform:scaleX(-1)}
[data-ui=glass] .g-facts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:0}
/* a label that wraps ("Received in Sep 2026" at 390) must not push its figure below its neighbours' */
[data-ui=glass] .g-facts > div{display:flex; flex-direction:column}
[data-ui=glass] .g-facts dt{font-size:.74rem; color:var(--muted); font-weight:700}
[data-ui=glass] .g-facts dd{margin:auto 0 0; padding-top:2px; font-size:1.02rem; font-weight:800; white-space:nowrap}
[data-ui=glass] .g-hero-a{margin:4px 0 0}
[data-ui=glass] .g-hero-a > .btn,[data-ui=glass] .g-hero-a > form{flex:1 1 0}
[data-ui=glass] .g-hero-a > form .btn{width:100%}

[data-ui=glass] .g-occ{display:none}
[data-ui=glass] .g-occ-b{display:flex; align-items:center; gap:18px}
[data-ui=glass] .g-ring-w{position:relative; width:128px; height:128px; flex:none}
[data-ui=glass] .g-ring{width:128px; height:128px; display:block}
[data-ui=glass] .g-ring circle{fill:none; stroke-width:11}
[data-ui=glass] .g-ring-t{stroke:var(--g-track)}
[data-ui=glass] .g-ring-f{stroke:var(--good); stroke-linecap:round; transform:rotate(-90deg); transform-origin:50% 50%}
[data-ui=glass][dir=rtl] .g-ring{transform:scaleX(-1)}
[data-ui=glass] .g-ring-c{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center}
[data-ui=glass] .g-ring-v{font-size:1.5rem; font-weight:800; letter-spacing:-.02em}
[data-ui=glass] .g-ring-l{font-size:.74rem; color:var(--muted); font-weight:700}
[data-ui=glass] .g-occ-t{min-width:0; flex:1}
[data-ui=glass] .g-occ-n{font-weight:700}
[data-ui=glass] .g-occ-n .amt{font-size:1.3rem; font-weight:800}
[data-ui=glass] .g-split{list-style:none; margin:10px 0 0; padding:0}
[data-ui=glass] .g-split li{display:flex; justify-content:space-between; gap:10px; padding:5px 0; border-top:1px solid var(--line); font-size:.86rem}
[data-ui=glass] .g-split-n{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-weight:700}

[data-ui=glass] .g-kpis{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:var(--gap)}
[data-ui=glass] .g-kpi{
  display:flex; flex-direction:column; gap:4px; min-height:98px; padding:14px 16px;
  background:var(--g-glass); border:0; border-radius:22px; box-shadow:var(--g-shadow);
  color:var(--ink);
}
[data-ui=glass] .g-kpi:hover{text-decoration:none}
[data-ui=glass] .g-kpi-l{display:flex; align-items:center; gap:7px; font-size:.78rem; font-weight:700; color:var(--muted)}
[data-ui=glass] .g-kpi-v{margin-top:auto; font-size:clamp(1.1rem, 5.4vw, 1.35rem); font-weight:800; letter-spacing:-.02em; white-space:nowrap}
[data-ui=glass] .g-kpi-s{font-size:.72rem; color:var(--muted); font-weight:600}
[data-ui=glass] .g-dot{width:8px; height:8px; flex:none; border-radius:50%; background:var(--g-blue)}
[data-ui=glass] .g-dot.bad{background:var(--bad)} [data-ui=glass] .g-dot.good{background:var(--good)}
[data-ui=glass] .g-dot.warn{background:var(--accent)} [data-ui=glass] .g-dot.mute{background:var(--muted)}
/* Oasis: gold = owes / needs attention. A dot is a fill, so it takes the bright gold, not the text gold. */
[data-ui=glass] .g-wide-only{display:none}
[data-ui=glass] [dir=rtl] .g-kpi-v,[data-ui=glass][dir=rtl] .g-kpi-v,[data-ui=glass][dir=rtl] .g-big,[data-ui=glass][dir=rtl] .g-facts dd{direction:ltr; text-align:right}

[data-ui=glass] .g-mo{
  display:grid; place-items:center; width:36px; height:36px; flex:none; border-radius:11px;
  background:var(--bad-bg); color:var(--bad); font-size:.8rem; font-weight:800;
}
[data-ui=glass] .g-open{font-size:.82rem; font-weight:700; padding:10px 2px; margin:-10px 0; min-height:44px; display:inline-flex; align-items:center}

@media (min-width:720px){
  [data-ui=glass] .g-dash{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
  [data-ui=glass] .g-occ{display:block}
  [data-ui=glass] .g-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
  [data-ui=glass] .g-wide-only{display:flex}
  [data-ui=glass] .g-phone-only{display:none}
  [data-ui=glass] .g-hero-a > .btn,[data-ui=glass] .g-hero-a > form{flex:0 0 auto}
}
@media (min-width:1080px){
  [data-ui=glass] .g-dash{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
}

/* ------------------------------------------------------------------ feedback + motion
   Session 17, reviewed against Emil Kowalski's design-engineering rules. The bar: this
   app is opened tens of times a day, so nothing moves for decoration. What is here is
   FEEDBACK (a press answers the finger) and ONE entrance (the More sheet, a few times a
   day). Only transform and opacity animate. Navigation itself never animates. */
:root[data-ui=glass]{--g-ease-out:cubic-bezier(.23,1,.32,1)}

/* Hover is for a mouse. On a phone a tap leaves :hover stuck on the element, so every
   hover that changes how something looks lives behind this query. */
@media (hover:hover) and (pointer:fine){
  [data-ui=glass] .btn:not(.ghost):not(.danger):not(.wa):hover{background:var(--g-btn-hover); border-color:var(--g-btn-hover)}
  [data-ui=glass] :is(.g-side .nav-a,.g-out):hover{color:var(--ink)}
  [data-ui=glass] :is(.g-user-a,.g-sheet-a,.g-kpi):hover{background:var(--g-glass-hi)}
}

/* Press feedback. Not on the tabs or the sidebar (they answer a tap by lighting up, and
   they are the most-used thing in the app) and not on list rows. */
[data-ui=glass] :is(.btn,.g-icbtn,a.chip,.g-lang button,.g-sheet-a,.g-kpi){
  transition:transform 160ms var(--g-ease-out); -webkit-tap-highlight-color:transparent}
[data-ui=glass] :is(.btn,.g-icbtn,a.chip,.g-lang button,.g-sheet-a):active:not(:disabled){transform:scale(.97)}
[data-ui=glass] .g-kpi:active{transform:scale(.98)}
[data-ui=glass] :is(.g-tab,.g-more > summary){-webkit-tap-highlight-color:transparent}

/* The More sheet: grows out of the More tab (bottom, inline end), fast; closes at once.
   app.js closes it on a tap outside and on Escape. */
[data-ui=glass] .g-more[open] > summary{background:var(--g-tab-on); color:var(--ink)}
[data-ui=glass] .g-more[open] .g-sheet{
  opacity:1; transform:none; transform-origin:100% 100%;
  transition:opacity 200ms var(--g-ease-out), transform 200ms var(--g-ease-out);
}
[data-ui=glass][dir=rtl] .g-more[open] .g-sheet{transform-origin:0 100%}
@starting-style{
  [data-ui=glass] .g-more[open] .g-sheet{opacity:0; transform:translateY(6px) scale(.96)}
}

/* Moving between screens is the most frequent thing anyone does here; the router's
   swaps have no animation, so a full load (a saved form) should not crossfade either. */
:root[data-ui=glass]::view-transition-old(root),
:root[data-ui=glass]::view-transition-new(root){animation:none}

/* Small Latin text over translucent material reads better with a touch of tracking.
   Never in Arabic: letter-spacing breaks the joins. Screen only: on paper the statement
   must stay the classic sheet. */
@media screen{
  html:not([lang=ar])[data-ui=glass] :is(.g-tab,.g-dotn,.g-badge,.chip,.g-kpi-s,.stat-s,.g-facts dt,.g-ring-l,th,.g-split li){letter-spacing:.01em}
}

/* ------------------------------------------------------------------ fallbacks
   No backdrop-filter, a person who asked for less transparency, or Solid panels: every
   surface becomes one opaque colour. Same layout, same colours for the text. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  [data-ui=glass] :is(.g-side,.g-top,.g-tabbar,.g-sheet){background:var(--g-solid)}
}
@media (prefers-reduced-transparency:reduce){
  [data-ui=glass] :is(.g-side,.g-top,.g-tabbar,.g-sheet){background:var(--g-solid); -webkit-backdrop-filter:none; backdrop-filter:none}
  [data-ui=glass] :is(.card,.stat,.g-kpi,.bar){background:var(--g-solid)}
  [data-ui=glass] body::before{opacity:.4}
}
[data-ui=glass][data-solid="1"] :is(.g-side,.g-top,.g-tabbar,.g-sheet){background:var(--g-solid); -webkit-backdrop-filter:none; backdrop-filter:none}
[data-ui=glass][data-solid="1"] :is(.card,.stat,.g-kpi,.bar){background:var(--g-solid)}
[data-ui=glass][data-solid="1"] .card .bar{background:none}
[data-ui=glass][data-solid="1"] body::before{opacity:.4}

/* A person who asked for more contrast: no see-through surfaces, a border you can see,
   the stronger grey for small text, quieter blobs. */
@media (prefers-contrast:more){
  :root[data-ui=glass][data-theme]{--muted:var(--g-muted-ground); --g-edge:color-mix(in srgb, var(--ink) 45%, transparent)}
  [data-ui=glass] :is(.g-side,.g-top,.g-tabbar,.g-sheet){background:var(--g-solid); -webkit-backdrop-filter:none; backdrop-filter:none}
  [data-ui=glass] :is(.card,.stat,.g-kpi,.bar){background:var(--g-solid)}
  [data-ui=glass] .card .bar{background:none; border:0}
  [data-ui=glass] body::before{opacity:.4}
}

/* Reduced motion: gentler, not nothing. No scaling anywhere; the sheet still fades,
   because a surface popping in with no bridge is its own kind of jolt. app.css zeroes
   every duration with !important, so the fade restates its own. */
@media (prefers-reduced-motion:reduce){
  [data-ui=glass] *{scroll-behavior:auto}
  [data-ui=glass] :is(.btn,.g-icbtn,a.chip,.g-lang button,.g-sheet-a,.g-kpi):active{transform:none}
  [data-ui=glass] .g-more[open] .g-sheet{transform:none; transition:opacity 150ms ease !important}
  @starting-style{ [data-ui=glass] .g-more[open] .g-sheet{opacity:0; transform:none} }
}

/* ------------------------------------------------------------------ print
   The statement is handed to a tenant or an accountant. No glass on paper: the classic
   print rules, restated here because the glass rules above are more specific. */
@media print{
  :root[data-ui=glass][data-theme]{
    --bg:#fff; --panel:#fff; --ink:#000; --muted:#444; --line:#999; --g-solid:#fff;
    --brand:#000; --brand-soft:#fff; --good:#000; --warn:#000; --bad:#000; --shadow:none;
    --g-link:#000;
  }
  [data-ui=glass] body{background:#fff; font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
  html[lang=ar][data-ui=glass] body{font-family:system-ui,"Segoe UI","Noto Sans Arabic",Tahoma,sans-serif}
  [data-ui=glass] body::before{display:none}
  [data-ui=glass] body.g-in{display:block}
  [data-ui=glass] :is(.g-side,.g-top,.g-tabbar,.g-sheet,.flash,.nav-bar){display:none !important}
  [data-ui=glass] .wrap{max-width:none; padding:0}
  [data-ui=glass] .card{background:#fff; border:0; box-shadow:none; padding:0; margin:0 0 12pt; border-radius:0}
  /* every component back to its classic measurements, so a statement printed from
     either look is the same sheet of paper */
  :root[data-ui=glass][data-theme]{--radius:12px; --radius-sm:9px; --gap:14px}
  [data-ui=glass] .stat{background:#fff; border:1px solid #999; box-shadow:none; border-radius:12px; padding:12px}
  [data-ui=glass] .stats{gap:10px}
  [data-ui=glass] .stat-l::before{display:none}
  [data-ui=glass] .stat-l{display:block; text-transform:uppercase; letter-spacing:.05em; font-size:.74rem; font-weight:400}
  [data-ui=glass] .stat-v{font-weight:680; letter-spacing:-.01em; font-size:clamp(1.05rem, 5.6vw, 1.28rem)}
  [data-ui=glass] .stat-s{font-size:.78rem}
  [data-ui=glass] h2{font-weight:650; letter-spacing:0}
  [data-ui=glass] .card-h{margin-bottom:10px}
  [data-ui=glass] .card-h h2{font-size:1.02rem; font-weight:650}
  [data-ui=glass] .row{padding:11px 2px; min-height:44px}
  [data-ui=glass] .row-t{font-weight:600}
  [data-ui=glass] .row-r .amt{font-weight:650}
  [data-ui=glass] th{text-transform:uppercase; letter-spacing:.04em; font-size:.7rem; font-weight:600}
  [data-ui=glass] .chip{padding:2px 8px; font-size:.72rem; font-weight:600}
  [data-ui=glass] .chip{border:1px solid #999; background:#fff !important; color:#000 !important}
  [data-ui=glass] .scroll{border-radius:0}
  [data-ui=glass] h1{font-size:1.35rem; font-weight:700; letter-spacing:0; line-height:1.25}
  [data-ui=glass] body{line-height:1.5}
  [data-ui=glass] .note{display:none !important}
}

/* the logo (2026-09-25): in dark the mark is amber, so the door turns into a dark shape */
@media (prefers-color-scheme:dark){ :root[data-ui=glass][data-theme=auto] .mark{--lg-door:currentColor; --lg-knob:var(--g-btn)} }
:root[data-ui=glass][data-theme=dark] .mark{--lg-door:currentColor; --lg-knob:var(--g-btn)}
[data-ui=glass] .g-side .brand .logo-w{height:22px}
[data-ui=glass] .g-side .brand .logo-w.ar{height:31px}
/* 28/09: hide only the ALDAR mark beside the wordmark - an account's own logo always shows */
@media (min-width:1080px){ [data-ui=glass] .g-side .brand .mark:not(.brand-own){display:none} }

/* Phase 3: the account's own logo sits on white in either look (docs/PRD-PHASE3.md §5). */
:root[data-ui=glass] .mark.brand-own{background:#fff; border-radius:10px}

/* Business identity (§12): glass surfaces for the editor */
[data-ui=glass] .biz-id,[data-ui=glass] .biz-sheet,[data-ui=glass] .biz-crop{background:var(--g-glass); border-color:var(--g-edge);
  backdrop-filter:blur(22px) saturate(1.4); -webkit-backdrop-filter:blur(22px) saturate(1.4)}
[data-ui=glass] .biz-crop{background:var(--panel)}
[data-ui=glass] .biz-av,[data-ui=glass] .g-head-logo{border-color:var(--g-edge)}
[data-ui=glass] .g-side .brand-acct{align-items:center}
[data-ui=glass] .biz-zoom input[type=range]{border:0; background:none; box-shadow:none; padding:0; min-height:0; height:28px}
[data-ui=glass] .imp-drop{border-color:var(--g-control-edge)}
[data-ui=glass] :is(.imp-list,.imp-tile){border-color:var(--g-edge); background:var(--g-glass-hi)}
[data-ui=glass] .imp-list li{border-color:var(--g-edge)}

/* Oasis: elevated surfaces have a soft shadow and NO border (DESIGN.md §4/§6). In forced-colors mode the
   shadow disappears, so give them back a real edge there. */
@media (forced-colors:active){
  [data-ui=glass] :is(.g-side,.g-top,.g-tabbar,.g-sheet,.flash,.card,.stat,.bar,.g-kpi){border:1px solid CanvasText}
}