/* glass.css — the frosted layer (2026-08-01, owner: «واضف عليه اللمسه الزجاجيه
   الفاخرة»).

   WHY IT IS A FILE OF ITS OWN, AND WHY IT LOADS LAST. Glass is not a colour and
   not a component; it is a treatment applied to a chosen few surfaces that
   FLOAT — chrome that content scrolls under, dialogs, the sign-in card, the
   card that sits on the phone's coloured header. Keeping it in one file means
   the answer to "where does the blur come from" is one place, and loading it
   after every screen stylesheet means it can upgrade a surface without either
   side having to know the other's selector weight.

   THE FOUR RULES IT KEEPS, so "fancy" never turns into "unreadable":

   1. Glass only where something is BEHIND it. A blur over a flat page is a
      lighter flat page that costs a compositor layer.
   2. The fill alone must carry the surface. `backdrop-filter` is an
      enhancement — unsupported (older Firefox, blocked in some enterprise
      builds), or switched off by the reader below, the fills here are still
      opaque enough to read on. Nothing depends on the blur landing.
   3. Contrast is measured against the WORST case, which is the fill over the
      lightest thing that can pass behind it — never against the fill alone.
   4. It steps aside for print, for PDF capture (html2canvas cannot render
      backdrop-filter, so a photographed report would come out with holes in
      it), and for anyone who has asked their OS to reduce transparency.

   Every value below comes from tokens.css. Since 2026-08-01 that file holds ONE
   palette — the app is light on every device, by the owner's decision — so the
   panes here are near-white and stay near-white; the tinted night variants they
   used to have went with the dark theme. */

/* ── 1. The page under the glass ───────────────────────────────────────────
   FLAT, and that is a correction. Two soft brand washes used to be painted here
   to give the blur something to work with. The owner compared the two systems
   side by side and asked why this one was not white: his is flat #f1f5f9 with
   nothing laid over it, and a tinted page is exactly the sort of "improvement"
   that stops a copy being a copy. The washes are gone.

   What the glass refracts now is what his glass refracts: the navy chrome and
   the content scrolling under it — which is where every frosted surface in this
   app actually sits. Nothing lost. */
body { background-color: var(--bg); background-image: none; }

/* ── 2. The treatment ──────────────────────────────────────────────────────
   `.glass` is the utility; the surfaces after it are the ones this app gives it
   to. The inset hairline along the top edge is not decoration — it is the only
   thing that separates a pane of glass from a washed-out card. */
.glass, .modal, .topbar, .login-box, .auth-card, .user-card {
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
}

/* Chrome: the topbar of Screen A. Content scrolls UNDER it, which is exactly
   the case glass is for. A lighter blur than a dialog gets — chrome should let
   the page read through it, not dissolve it. */
.topbar {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur-sm);
          backdrop-filter: var(--glass-blur-sm);
  /* The bottom edge is --border-soft, NOT the glass hairline: a white hairline
     under a white bar on a light page is no edge at all. The light lives on the
     top edge of things that float, and the bottom of chrome is a real line. */
  border-bottom: 1px solid var(--border-soft);
  box-shadow: var(--shadow-1);
}

/* Dialogs. The heaviest blur in the app, because the whole point of a modal is
   that the page behind it stops being readable and stays visible. */
.modal {
  background: var(--glass-bg-2);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--glass-shadow-lg), var(--glass-hi);
}

/* The sign-in card, on both screens — the source system's own login box: a
   near-white pane on the navy gradient, a white hairline inside its edge, and a
   deep navy-tinted shadow under it. `.auth-card` is Screen B's, `.login-box`
   Screen A's; on Screen A they are the same element. */
.login-box, .auth-card {
  background: var(--glass-bg-2);
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow-lg), var(--glass-hi);
}

/* Screen B's account card. It sits ON the navy header, so the gradient reads
   faintly through it and the card stops looking like a white sticker dropped on
   the colour. */
.user-card {
  background: var(--glass-bg-2);
  border-color: var(--glass-brd);
  box-shadow: var(--glass-shadow), var(--glass-hi);
}

/* The picker's drawers already sit on half-transparent fills (components.css);
   a small blur is what turns that from "faded" into "layered". */
.dp-group, .dp-sub-group {
  -webkit-backdrop-filter: var(--glass-blur-sm);
          backdrop-filter: var(--glass-blur-sm);
}

/* ── 3. Glass over the navy chrome ─────────────────────────────────────────
   Inside the sidebar and the phone header the surface behind is dark, so the
   pane is a white veil rather than a white fill. */
.app-header .icon-btn:not(.bell-btn), .app-header .lang-toggle {
  background: var(--glass-on-brand);
  border: 1px solid var(--glass-on-brand-brd);
  -webkit-backdrop-filter: var(--glass-blur-sm);
          backdrop-filter: var(--glass-blur-sm);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.app-header .lang-toggle:hover, .app-header .icon-btn:not(.bell-btn):hover {
  background: rgba(255,255,255,.24);
}

/* ── 4. The sheen ──────────────────────────────────────────────────────────
   One diagonal highlight across the top of the navy panels, the way light falls
   on a real pane. It is drawn in a ::before that is `pointer-events: none` and
   `aria-hidden` by construction (a pseudo-element has no place in the tree), so
   it cannot intercept a tap or reach a screen reader.

   It stops well above any text: white laid over --brand-600 spends the contrast
   the white labels on it need — the same lesson the launcher cards learned (see
   the long note in index.html). */
/* `.app-top` needs a containing block for the sheen. `.sidebar` must NOT get one
   here: it is already positioned by screen-a/styles.css — sticky on the desktop
   layout, fixed as the phone drawer — and a `position: relative` written after
   that file would quietly undo both. */
.app-top { position: relative; }
.sidebar > *, .app-top > * { position: relative; z-index: 1; }
.sidebar::before, .app-top::before {
  content: ''; position: absolute; inset-block-start: 0; inset-inline: 0;
  height: 120px; pointer-events: none; z-index: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0));
}

/* ── 5. The orb layer ──────────────────────────────────────────────────────
   Ported from the owner's phone-showroom system (2026-08-01, on his
   instruction), where the block is called «طبقة القائمة الزجاجية» in as many
   words. It is the piece that was missing here, and it is what separates
   "translucent" from "glass":

   FROSTING NEEDS SOMETHING COLOURED BEHIND IT. §0.59 put frosted panes on navy
   and navy is flat, so the blur had nothing to blur. There, four coloured glows
   — blue, violet, cyan and the brand accent — are painted ON TOP of the navy
   panel, and the panes float over THEM. That is why his sidebar reads as glass
   and this one read as a dark bar with a lighter bar on it.

   The four radials, their sizes, positions and opacities are his values. Two
   sets: `--orbs` is tuned for a ~260px panel, `--orbs-lg` scales the same
   composition up for a full page (his own full-screen layer blurs its orbs to
   30px for exactly this reason — a 300px glow on a 1440px page is a dot).

   ── THE VEIL, AND WHY IT EXISTS ──────────────────────────────────────────
   His orb values are kept exactly. What is added is one navy layer over them,
   and it is not a taste decision — it is the reason this is usable. Measured on
   the real stack (navy → orbs → the .07 pane → the .16 active pane), computed
   with the WCAG formula rather than judged by eye:

   | under a menu label            | no veil | veil .55 |
   |-------------------------------|---------|----------|
   | white on the ACTIVE item      | 2.92:1  | 4.79:1   |
   | the idle 85%-white label      | 3.09:1  | 5.59:1   |
   | the credit chip at 82%        | 3.02:1  | 5.45:1   |

   Without it the menu is unreadable — **2.9:1 where 4.5:1 is the floor** — and
   that is true in the system this was copied from as well. A glow that eats the
   words it sits under is a defect wherever it lives, so the composition came
   across and the fault did not. At 55% the colour still reads plainly: the orbs
   keep 45% of their strength, and they are strongest exactly where there is no
   pane and no text — between the cards, which is where a glow belongs.

   The whole-page version needs less (its base is already lighter and carries
   fewer words): the veil is .35 there, which puts white hero text at 5.59:1 —
   ABOVE the 5.04:1 it had before any of this was added. */
:root {
  --orbs:
    radial-gradient(300px 220px at 88% 4%,  rgba(64,145,255,.60), transparent 62%),
    radial-gradient(280px 300px at 6% 26%,  rgba(140,90,255,.42), transparent 65%),
    radial-gradient(320px 280px at 80% 60%, rgba(0,196,255,.30),  transparent 60%),
    radial-gradient(300px 260px at 20% 94%, rgba(46,117,182,.50), transparent 60%);
  --orbs-lg:
    radial-gradient(900px 700px at 88% 4%,  rgba(64,145,255,.42), transparent 62%),
    radial-gradient(840px 900px at 6% 26%,  rgba(140,90,255,.30), transparent 65%),
    radial-gradient(960px 840px at 80% 60%, rgba(0,196,255,.22),  transparent 60%),
    radial-gradient(900px 780px at 20% 94%, rgba(46,117,182,.38), transparent 60%);
  /* A flat layer, written as a gradient because that is the only way to put a
     colour INTO a background stack above another layer. */
  --orb-veil:    linear-gradient(rgba(15,39,68,.55), rgba(15,39,68,.55));
  --orb-veil-lg: linear-gradient(rgba(19,52,95,.35), rgba(19,52,95,.35));
}
/* The navy chrome, lit. Reading order is top-down: veil, then the glows, then
   the gradient as the base — the glows sit OVER the navy exactly as they do in
   his file, and the veil sits over both. */
.sidebar { background: var(--orb-veil), var(--orbs), var(--grad-nav); }
.app-top { background: var(--orb-veil), var(--orbs), var(--grad-nav); }
/* The sign-in pages are whole screens, so they take the large composition. */
.login-gate, .app-b.is-auth { background: var(--orb-veil-lg), var(--orbs-lg), var(--grad-auth); }

/* The brand block becomes a floating pane rather than a band with a rule under
   it — his `.sidebar-brand`, value for value. */
.sidebar .brand {
  margin: 0 2px 4px; padding: 12px 14px; border-radius: 16px; border-bottom: 0;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
          backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 10px 26px rgba(4,12,24,.28);
}

/* His menu is a stack of collapsible glass cards; ours is one flat list, so the
   list itself becomes the card. Same material, one pane instead of five. */
.sidebar .nav {
  padding: 6px; border-radius: 14px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
          backdrop-filter: blur(16px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 8px 22px rgba(4,12,24,.22);
}
.sidebar .nav-item { border-radius: 10px; }
.sidebar .nav-item:hover { background: rgba(255,255,255,.12); }
/* The chosen item is a lit pane inside the pane: a hairline ring of light around
   it and a shadow under it, so "where am I" is depth rather than a shade. */
.sidebar .nav-item.active {
  background: rgba(255,255,255,.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.30), 0 4px 14px rgba(4,12,24,.22);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* His sidebar signs itself at the foot, quietly — a glass chip, not the lit
   plate the sign-in screens wear. Same line of text, a tenth of the volume:
   the plate announces authorship to a visitor, this one just marks the panel. */
.sidebar-credit {
  margin: auto 2px 0; padding: 10px; border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
  /* .82, not the .60 his uses: measured on the veiled panel, .60 lands at
     3.02:1 and .82 at 5.45:1. The chip still reads as the quiet thing in the
     panel — that is what its size and weight are for, not its opacity. */
  color: rgba(255,255,255,.82);
  font-size: .68rem; font-weight: 600; letter-spacing: .3px;
  text-align: center; direction: ltr; line-height: 1.4;
}

/* ── 6. Where the glass gets out of the way ────────────────────────────────
   Each of these is a case where a translucent surface is either impossible to
   render or actively wrong, and every one of them falls back to the same thing:
   the plain opaque surface the rest of the app is built from. */

/* (a) No backdrop-filter — the fills go opaque so nothing is left half-lit.
   The panes ON the navy chrome are the exception and are left alone: their
   fills are white-over-navy to begin with, so without a blur they are simply
   flatter panes, still legible, still separated by their own hairlines. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar, .modal, .login-box, .auth-card, .user-card { background: var(--surface); }
  .app-header .icon-btn:not(.bell-btn), .app-header .lang-toggle { background: rgba(255,255,255,.22); }
}

/* (b) The reader asked for less transparency. This is an accessibility setting,
   not a taste one — vestibular and low-vision users switch it on — so it is
   honoured completely: no blur anywhere, no translucent fill anywhere. */
@media (prefers-reduced-transparency: reduce) {
  .glass, .topbar, .modal, .login-box, .auth-card, .user-card,
  .dp-group, .dp-sub-group, .toast,
  .sidebar .brand, .sidebar .nav, .sidebar .nav-item.active, .sidebar-credit,
  .app-header .icon-btn:not(.bell-btn), .app-header .lang-toggle {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  .topbar, .modal, .login-box, .auth-card, .user-card { background: var(--surface); }
  .sidebar::before, .app-top::before { display: none; }
  /* The orbs go too. They are the softest thing on the page and the whole point
     of this setting is that softness is what the reader cannot resolve. */
  .sidebar, .app-top { background: var(--grad-nav); }
  .login-gate, .app-b.is-auth { background: var(--grad-auth); }
  .sidebar .brand, .sidebar .nav { background: rgba(255,255,255,.14); }
  .sidebar-credit { background: rgba(255,255,255,.12); color: rgba(255,255,255,.82); }
}

/* (c) The PDF export photographs the DOM with html2canvas, which does not
   implement backdrop-filter and paints these surfaces as flat fills. Making
   them flat ourselves means the exported report matches the screen instead of
   showing where the blur should have been. (shared/js/export.js) */
body.pdf-capture .topbar, body.pdf-capture .modal, body.pdf-capture .login-box,
body.pdf-capture .auth-card, body.pdf-capture .user-card {
  -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface);
}

/* (d) Paper. print.css already flattens the palette; this removes the effects
   it cannot see. */
@media print {
  * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .sidebar::before, .app-top::before { display: none !important; }
}