/* =============================================================================
   TELEHEALTH GLASS — the dashboard's surface language, in green
   -----------------------------------------------------------------------------
   The backdrop landed, and it immediately exposed the next problem: every panel
   sitting on it was OPAQUE. A living green sky behind solid white boxes doesn't
   read as one page — it reads as a screenshot of one page pasted onto another.
   The Command Center's hero made it worse: a hard navy block dropped onto a
   pale green wash, the single least connected thing on the screen.

   The dashboard already solved this. Its panels are frosted glass — you can see
   the sky, the tree and the storks moving THROUGH them, which is what makes
   that page feel like a place rather than a form. This file ports the same
   recipe (static/css/dashboard_healing.css, "THE HEALING CARD") to telehealth
   and tints it green, so the two pages share a surface language while
   telehealth keeps the colour that tells you where you are.

   WHY TOKENS AND NOT RULES: the per-page rules live in each template's own
   <style> block, which always loads after this file and would win any fight.
   Rather than an !important arms race, the values live here once as custom
   properties and the templates consume them. One number to change, one place.
   ========================================================================== */

:root {
  /* ── the shared card recipe ──
     72-76% opacity is the band that works: below it text starts fighting the
     moving backdrop, above it the glass stops reading as glass at all. */
  --tg-card:        rgba(255, 255, 255, .74);
  --tg-card-solid:  rgba(255, 255, 255, .90);  /* for panels over dense text */
  --tg-bd:          rgba(52, 199, 123, .20);   /* a green hairline, not grey  */
  --tg-bd-soft:     rgba(52, 199, 123, .13);
  --tg-blur:        blur(18px) saturate(150%);
  --tg-blur-hero:   blur(22px) saturate(150%);
  --tg-sh:          0 8px 26px rgba(12, 46, 32, .09);
  --tg-sh-lift:     0 18px 40px rgba(12, 46, 32, .16);
  /* The top-edge light that sells the "pane of glass" illusion. Without it a
     translucent box just looks faded. */
  --tg-gloss:       inset 0 1px 0 rgba(255, 255, 255, .58);
  --tg-glow:        inset 0 0 44px rgba(255, 255, 255, .26);
  --tg-ink:         #0C204D;
  --tg-ink-dim:     #55707f;
  --tg-hero:        rgba(255, 255, 255, .62);
}

html[data-theme="dawn"] {
  --tg-card:        rgba(255, 250, 246, .76);
  --tg-card-solid:  rgba(255, 250, 246, .92);
  --tg-bd:          rgba(150, 120, 70, .22);
  --tg-bd-soft:     rgba(150, 120, 70, .14);
  --tg-sh:          0 8px 26px rgba(120, 70, 50, .10);
  --tg-sh-lift:     0 18px 40px rgba(120, 70, 50, .18);
  --tg-ink:         #3b2b40;
  --tg-ink-dim:     #8a6f80;
  --tg-hero:        rgba(255, 250, 246, .64);
}

html[data-theme="dark"] {
  /* Night glass is the hard one. Too transparent and the forest wash swallows
     the text; too opaque and you lose the backdrop entirely. .70 over a very
     dark card keeps both. */
  --tg-card:        rgba(17, 38, 42, .70);
  --tg-card-solid:  rgba(17, 38, 42, .90);
  --tg-bd:          rgba(120, 220, 175, .16);
  --tg-bd-soft:     rgba(255, 255, 255, .08);
  --tg-sh:          0 8px 26px rgba(0, 0, 0, .38);
  --tg-sh-lift:     0 18px 40px rgba(0, 0, 0, .48);
  --tg-gloss:       inset 0 1px 0 rgba(255, 255, 255, .10);
  --tg-glow:        inset 0 0 44px rgba(120, 220, 175, .05);
  --tg-ink:         #e8f0f8;
  --tg-ink-dim:     #9fb3cc;
  --tg-hero:        rgba(17, 38, 42, .62);
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE DEFAULT SURFACES — everything that already used the older --glass-*
   tokens becomes frosted automatically, no template edits needed. This is
   what carries the change into the appointment pages, the directory and the
   forms without touching any of them.
   ══════════════════════════════════════════════════════════════════════════ */
body.thb-on:not(.iasa-immersive) .card-soft,
body.thb-on:not(.iasa-immersive) .service-card {
  background: var(--tg-card);
  -webkit-backdrop-filter: var(--tg-blur); backdrop-filter: var(--tg-blur);
  border: 1px solid var(--tg-bd-soft);
  box-shadow: var(--tg-sh), var(--tg-gloss);
}

/* Panels holding a wall of text keep the denser mix. Reading a treatment
   timeline through a drifting cloud is a genuinely worse experience, and no
   amount of "it looks nice" makes that trade worth it. */
body.thb-on .table-wrap, body.thb-on .msg-bubble,
body.thb-on .form-control, body.thb-on .form-select {
  background: var(--tg-card-solid);
}

/* Backdrop-filter is expensive per element. Below tablet the backdrop is
   switched off anyway (see tele_healing_bg.css), so there is nothing to blur
   and the cost buys nothing — drop to a flat fill. */
@media (max-width: 700px) {
  body.thb-on .card-soft, body.thb-on .service-card {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: var(--tg-card-solid);
  }
}

/* ── The breathing light inside the hero ──────────────────────────────────
   Straight from the dashboard (cwxBreathe): two soft radial pools that swell
   and fade over 9 seconds. It is the difference between "a translucent box"
   and "a room with light in it", and it costs one opacity animation. */
@keyframes tgBreathe { 0%, 100% { opacity: .72; } 50% { opacity: 1; } }
.tg-herolight {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(46% 68% at 84% 10%, rgba(52, 199, 123, .16), transparent 70%),
    radial-gradient(38% 55% at 8% 100%, rgba(45, 134, 173, .12), transparent 72%);
  animation: tgBreathe 9s ease-in-out infinite;
}
html[data-theme="dark"] .tg-herolight {
  background:
    radial-gradient(46% 68% at 84% 10%, rgba(52, 199, 123, .20), transparent 70%),
    radial-gradient(38% 55% at 8% 100%, rgba(40, 186, 237, .12), transparent 72%);
}
@media (prefers-reduced-motion: reduce) { .tg-herolight { animation: none; } }