/* GLASS: depth without motion (founder 2026-11-03: "I want to make some of the pages in tanix.app stunning 3D
   glassmorphic UI", then "Build all").
   Pages: Home, My websites, My projects, How it works, Sign in and Sign up. Loaded AFTER app-premium.css and
   builds on it: that file gives every container its shape, this one turns the chosen pages' containers into glass.

   THE RULES THIS FOLLOWS, and why they shape every line below:
   - "3D" IS DEPTH, NOT MOTION. The founder's no-wiggle rule (2026-10-12) bans mouse-follow tilt and endless
     float. So the depth here comes from LIGHT and LAYERS: a coloured aurora behind the page for the glass to
     frost, translucent panels lit along their top edge and shadowed along their bottom one (the thickness of a
     glass slab), and a deep two-tone drop shadow that lifts each panel off the page. The only movement is what
     the pages already had: a one-time rise-in, and a glow on hover.
   - THE MOUSE TILTS THAT WERE STILL LIVE ARE REMOVED AT SOURCE, not fought here. app-fx.js stopped tilting on
     2026-10-12; three pages were missed: How it works (its pictures and its hero art), the certificate, and the
     sign-in card. Each script wrote the angle itself, so each line that did is gone from how-it-works-fx.js,
     certificate-fx.js and auth-fx.js; their glare, rise-in and the certificate's turn-over stay. Home has NO tilt
     to remove: app-home-fx.js's tilt() only moves the glare now - the name and the ahx-tilt class are leftovers.
   - NEVER THE SHELL. The top bar is translucent (88% + blur), so the aurora fades to nothing under its 56px:
     the header looks exactly as it did. The sidebar and top bar are not styled at all.
   - PHONES. Most students are on low-end Android, and backdrop-filter is the most expensive thing in CSS.
     Real blur is used only on the few large panels (never on the many small cards, which get the translucent
     fill and the lit edges, and over a static aurora look glassy without it), it is lighter on touch screens,
     and a browser without backdrop-filter gets a more solid fill instead of see-through text.
   - NO NEW ::before/::after ON CARDS. .ahx-hero, .ahx-stats, .mx-hero and .mp-hero already draw art in both,
     so every glass edge here is box-shadow and backgrounds. main::before (unused) holds the aurora.
   - Every selector starts html.taa-app body, one step more specific than app-premium.css's html.taa-app, so
     these win over its !important rules without a fight about load order.
   The app is dark-only (no light theme exists in app-shell.css or app-premium.css), so there is one palette. */

/* ---------- 1. Tokens ---------- */
html.taa-app {
  --gl-blue: #1f7bff;
  --gl-cyan: #38b6ff;
  --gl-violet: #8b5cf6;
  --gl-teal: #22d3ee;
  /* the glass itself: see-through navy, a little lighter at the top where the light hits */
  /* see-through enough that the aurora visibly tints each pane - which is what makes glass read as glass;
     the first version was too opaque and looked like the old solid cards (measured by eye against "before") */
  --gl-fill: linear-gradient(180deg, rgba(46, 76, 150, 0.30) 0%, rgba(20, 36, 78, 0.26) 45%, rgba(8, 16, 40, 0.40) 100%);
  --gl-fill-card: linear-gradient(180deg, rgba(56, 88, 170, 0.26) 0%, rgba(16, 30, 68, 0.30) 100%);
  /* light caught in the top-left corner of every pane */
  --gl-sheen: radial-gradient(130% 90% at 0% 0%, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.03) 38%, rgba(255, 255, 255, 0) 60%);
  --gl-line: rgba(180, 212, 255, 0.2);
  /* a bevelled slab: lit along the top and left edges, shadowed along the bottom and right, faint ring all round */
  --gl-edge: inset 0 1px 0 rgba(255, 255, 255, 0.32), inset 1px 0 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.45), inset -1px 0 0 rgba(0, 0, 0, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  /* the lift: a dark shadow for height and a blue one for the glow underneath */
  --gl-lift: 0 2px 4px -2px rgba(0, 0, 0, 0.5), 0 26px 52px -26px rgba(0, 0, 0, 0.9), 0 36px 74px -46px rgba(31, 123, 255, 0.62);
  --gl-lift-hover: 0 2px 4px -2px rgba(0, 0, 0, 0.5), 0 30px 58px -26px rgba(0, 0, 0, 0.92), 0 0 42px -10px rgba(56, 182, 255, 0.5);
  --gl-blur: blur(20px) saturate(165%);
}
@media (pointer: coarse) {
  html.taa-app { --gl-blur: blur(12px) saturate(150%); }
}

/* ---------- 2. The aurora: what the glass frosts ----------
   Static on purpose (an endlessly drifting background is the motion the founder ruled out). Fixed to the
   viewport, behind everything, and masked away under the translucent top bar. */
html.taa-app body:has(main :is(.ahx, #mw, #mp, .hw-wrap)) main::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(56vw 52vh at 88% 14%, rgba(31, 123, 255, 0.52), transparent 66%),
    radial-gradient(46vw 46vh at 30% 46%, rgba(139, 92, 246, 0.38), transparent 68%),
    radial-gradient(58vw 46vh at 66% 102%, rgba(34, 211, 238, 0.30), transparent 64%),
    radial-gradient(34vw 34vh at 8% 92%, rgba(236, 72, 153, 0.16), transparent 70%),
    radial-gradient(40vw 30vh at 58% 70%, rgba(56, 182, 255, 0.14), transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 56px, #000 220px);
  mask-image: linear-gradient(to bottom, transparent 0, transparent 56px, #000 220px);
}

/* ---------- 3. Glass panels: the few large slabs, with real blur ---------- */
html.taa-app body :is(
  .ahx .ahx-stats, .ahx #ahLod, .ahx #ahStreak,
  #mw .mx-hero, #mw .cs-hint,
  #mp .mp-continue,
  .hw-wrap .hw-step, .hw-wrap .hw-done
) {
  background: var(--gl-sheen), var(--gl-fill) !important;
  border: 1px solid var(--gl-line) !important;
  box-shadow: var(--gl-edge), var(--gl-lift) !important;
  -webkit-backdrop-filter: var(--gl-blur);
  backdrop-filter: var(--gl-blur);
}

/* ---------- 4. Glass cards: the many small ones, translucent but no blur (see PHONES above) ---------- */
html.taa-app body :is(
  .ahx .ah-tile, .ahx .ahx-qa-c, .ahx .ah-site,
  #mw .mx-tile, #mw .mx-trend, #mw .mw-card,
  #mp .mp-card, #mp .mp-box
) {
  background: var(--gl-sheen), var(--gl-fill-card) !important;
  border: 1px solid var(--gl-line) !important;
  box-shadow: var(--gl-edge), var(--gl-lift) !important;
}
@media (pointer: fine) {
  html.taa-app body :is(.ahx .ah-tile, .ahx .ahx-qa-c, .ahx .ah-site, #mw .mx-tile, #mw .mx-trend, #mw .mw-card, #mp .mp-card, #mp .mp-box) {
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
  }
}
/* Lesson of the day and Daily streak were square (square.css); every other panel on Home is rounded */
html.taa-app body .ahx :is(#ahLod, #ahStreak) { border-radius: 22px !important; overflow: hidden; }
/* the streak keeps the warmth of its fire: an ember glow inside the glass, on the side the flame is */
html.taa-app body .ahx #ahStreak {
  background: radial-gradient(40% 90% at 6% 50%, rgba(251, 146, 60, 0.18), transparent 70%), var(--gl-sheen), var(--gl-fill) !important;
}
html.taa-app body .ahx #ahStreak .sk-goals {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)) !important;
  border: 1px solid rgba(190, 215, 255, 0.12) !important;
  border-radius: 18px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.3) !important;
}
/* Cards sitting ON a glass panel are a second, thinner layer: lighter fill, smaller shadow, so the panel
   reads as the slab and they read as panes set into it rather than a pile of equal boxes. */
html.taa-app body .ahx .ahx-stats .ahx-stat,
html.taa-app body #mw .mx-hero :is(.mx-tile, .mx-trend) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)) !important;
  border: 1px solid rgba(190, 215, 255, 0.13) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(0, 0, 0, 0.3), 0 14px 28px -20px rgba(0, 0, 0, 0.85) !important;
}

/* ---------- 5. Hover: glow only ---------- */
html.taa-app body :is(.ahx .ah-tile, .ahx .ahx-qa-c, .ahx .ah-site, #mw .mx-tile, #mw .mw-card, #mp .mp-card, #mp .mp-box) {
  transition: border-color 0.22s ease, box-shadow 0.28s ease;
}
html.taa-app body :is(.ahx .ah-tile, .ahx .ahx-qa-c, .ahx .ah-site, #mw .mx-tile, #mw .mw-card, #mp .mp-card, #mp .mp-box):hover {
  border-color: rgba(96, 196, 255, 0.55) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.42), inset 0 0 0 1px rgba(56, 182, 255, 0.12), var(--gl-lift-hover) !important;
}

/* ---------- 6. The heroes: they keep their own art, and become the front pane ----------
   .ahx-hero, .mx-hero and .mp-hero paint their pictures in ::before/::after and a canvas, so only the slab
   around the art changes: lit edge, deep lift, a light sheet across the top. */
html.taa-app body :is(.ahx .ahx-hero, #mp .mp-hero) {
  border: 1px solid rgba(170, 205, 255, 0.2) !important;
  box-shadow: var(--gl-edge), 0 2px 4px -2px rgba(0, 0, 0, 0.5), 0 34px 70px -30px rgba(0, 0, 0, 0.95), 0 44px 90px -50px rgba(31, 123, 255, 0.75) !important;
  border-radius: 26px !important;
}
html.taa-app body #mw .mx-hero { border-radius: 26px !important; }
html.taa-app body .hw-hero {
  background:
    radial-gradient(60% 80% at 82% 30%, rgba(31, 123, 255, 0.18), transparent 70%),
    radial-gradient(50% 70% at 10% 90%, rgba(139, 92, 246, 0.12), transparent 70%) !important;
}

/* ---------- 7. (Tilts: removed in the scripts that wrote them - see the header. Nothing to do here.) ----------
   A first version pinned the tilt variables at 0deg from here. It was wrong twice over: the How it works
   pictures write style.transform directly, so the pin did nothing to them, and on the How it works hero it
   flattened the art's DESIGNED resting pose (4deg / -8deg), which is depth, not motion. Found by measuring the
   transform under a moving mouse, with and without this file. */

/* ---------- 8. Inside the glass: chips, search, pills ---------- */
html.taa-app body :is(#mw .mx-chip, #mp .mp-chip, #mp .mp-view) {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(190, 215, 255, 0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}
html.taa-app body :is(#mw .mx-chip.is-on, #mp .mp-chip.is-on, #mp .mp-view.is-on) {
  background: linear-gradient(135deg, rgba(31, 123, 255, 0.55), rgba(56, 182, 255, 0.4)) !important;
  border-color: rgba(120, 200, 255, 0.55) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 8px 20px -10px rgba(31, 123, 255, 0.9) !important;
}
html.taa-app body :is(#mw, #mp) :is(input[type="search"], input[type="text"], select) {
  background: rgba(8, 16, 38, 0.5) !important;
  border: 1px solid rgba(190, 215, 255, 0.14) !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35), inset 0 -1px 0 rgba(255, 255, 255, 0.05) !important;
}
html.taa-app body .hw-wrap .hw-toc a {
  background: var(--gl-sheen), var(--gl-fill-card) !important;
  border: 1px solid var(--gl-line) !important;
  box-shadow: var(--gl-edge), 0 14px 30px -20px rgba(0, 0, 0, 0.85) !important;
}

/* ---------- 8b. The square leftovers inside glass ----------
   square.css squares every corner on the site, and app-premium.css rounds only the containers it lists. Inside a
   rounded glass card a square solid box reads as a mistake, so every box that sits INSIDE the glass on these
   pages is rounded and made a thin pane. Found by screenshot, each one, not guessed. */
/* My websites: "Finish setting it up" inside every website card */
html.taa-app body #mw .mw-card .mw-setup {
  background: linear-gradient(180deg, rgba(60, 116, 230, 0.16), rgba(20, 40, 92, 0.14)) !important;
  border: 1px solid rgba(150, 195, 255, 0.16) !important;
  border-radius: 18px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.3) !important;
  overflow: hidden;
}
html.taa-app body #mw .mw-setup .mw-todo > li {
  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid rgba(190, 215, 255, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
html.taa-app body #mw .mw-setup :is(.mw-ring, .mw-ring > span) { border-radius: 14px !important; }
html.taa-app body #mw .mw-setup .mw-tick { border-radius: 6px !important; }
/* My projects: the four numbers inside the hero, the project cards, the filters */
html.taa-app body #mp .mp-stats .mp-stat {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)) !important;
  border: 1px solid rgba(190, 215, 255, 0.14) !important;
  border-radius: 16px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(0, 0, 0, 0.3), 0 14px 28px -20px rgba(0, 0, 0, 0.85) !important;
}
html.taa-app body #mp .mp-card { border-radius: 20px !important; overflow: hidden; }
html.taa-app body #mp .mp-card > .mp-frame { border-radius: 19px 19px 0 0 !important; }
html.taa-app body #mp .mp-chips .mp-chip { border-radius: 999px !important; }
html.taa-app body #mp :is(.mp-view, .mp-sort, .mp-search) { border-radius: 12px !important; }
/* the buttons: the hero's two (.mp-btn) and each card's row of actions (.mp-act) - square in the second review */
html.taa-app body #mp .mp-btn { border-radius: 12px !important; }
html.taa-app body #mp .mp-card .mp-acts .mp-act { border-radius: 10px !important; }
/* How it works: the step bar that follows you down the page */
html.taa-app body a.hwx-bar {
  background: var(--gl-sheen), linear-gradient(180deg, rgba(30, 54, 112, 0.6), rgba(8, 16, 40, 0.72)) !important;
  border: 1px solid rgba(170, 205, 255, 0.22) !important;
  border-radius: 18px !important;
  box-shadow: var(--gl-edge), 0 20px 44px -18px rgba(0, 0, 0, 0.9), 0 0 36px -14px rgba(56, 182, 255, 0.45) !important;
  -webkit-backdrop-filter: var(--gl-blur);
  backdrop-filter: var(--gl-blur);
  overflow: hidden;
}

/* ---------- 9. Sign in and Sign up: one glass card over the constellation ----------
   The network canvas behind the card is what makes this one work: its lines frost as they pass under it. */
html.taa-app-login main::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38vw 42vh at 50% 6%, rgba(31, 123, 255, 0.24), transparent 70%),
    radial-gradient(30vw 34vh at 16% 78%, rgba(139, 92, 246, 0.16), transparent 70%),
    radial-gradient(30vw 34vh at 86% 82%, rgba(34, 211, 238, 0.13), transparent 70%);
}
html.taa-app-login body .al-card {
  position: relative;
  z-index: 1;
  background: var(--gl-sheen), linear-gradient(180deg, rgba(26, 44, 92, 0.46), rgba(8, 16, 38, 0.6)) !important;
  border: 1px solid rgba(170, 205, 255, 0.2) !important;
  border-radius: 28px !important;
  box-shadow: var(--gl-edge), 0 2px 4px -2px rgba(0, 0, 0, 0.5), 0 40px 80px -34px rgba(0, 0, 0, 0.95), 0 50px 110px -56px rgba(31, 123, 255, 0.85) !important;
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
}
html.taa-app-login body .al-card .al-head {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)) !important;
  border: 1px solid rgba(190, 215, 255, 0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
  border-radius: 18px !important;
}
html.taa-app-login body .al-card :is(input[type="text"], input[type="email"], input[type="password"], input:not([type])) {
  background: rgba(4, 10, 26, 0.55) !important;
  border: 1px solid rgba(190, 215, 255, 0.16) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.45), inset 0 -1px 0 rgba(255, 255, 255, 0.05) !important;
}
html.taa-app-login body .al-card :is(input):focus {
  border-color: rgba(96, 196, 255, 0.7) !important;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.45), 0 0 0 4px rgba(56, 182, 255, 0.16), 0 0 24px -6px rgba(56, 182, 255, 0.55) !important;
}
html.taa-app-login body .al-card :is(.al-google, a.al-google) {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(190, 215, 255, 0.18) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 10px 24px -16px rgba(0, 0, 0, 0.9) !important;
}

/* ---------- 10. No blur available: a firmer fill, so text never sits on a busy see-through panel ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.taa-app body :is(.ahx .ahx-stats, #mw .mx-hero, #mw .cs-hint, #mp .mp-continue, .hw-wrap .hw-step, .hw-wrap .hw-done),
  html.taa-app-login body .al-card {
    background: linear-gradient(180deg, rgba(20, 36, 76, 0.94), rgba(8, 15, 34, 0.96)) !important;
  }
}