/* Julie — the glass material, applied to the modules.
 *
 * James, 2026-09-07: "every card and button on every module gets the glass
 * look", and "module cards must not be fully transparent -- the net bleeds
 * through the text. Keep their colour, or the page background a shade
 * lighter."
 *
 * julie-glass.css defines the material and ships on every page already. Until
 * now it applied to NOTHING: there was not a single `class="jglass"` in any
 * template and no JS added one. The stylesheet was loaded everywhere and used
 * on the arrival screen only, through its tokens, inline.
 *
 * WHY A SEPARATE FILE. julie-glass.css is the material -- what glass IS. This
 * is the assignment -- which things are made of it. Putting page class names
 * like `.daycard` and `.txchip` into the material file would make it a
 * dumping ground that nobody dares change, and the whole reason the material
 * was extracted was to stop that.
 *
 * THE SECOND HALF OF HIS COMPLAINT IS THE IMPORTANT ONE. The shared card fill
 * is `--panel: rgba(255,255,255,.038)` -- under four percent white. That was
 * fine on a flat page and is not fine now that a neural net animates behind
 * every module. A 3.8% fill does not hide moving dots; it tints them. The
 * material's own tint is roughly double that AND carries a 14px backdrop
 * blur, which is what actually settles the motion: the net becomes depth
 * under the card instead of texture through the text on it.
 *
 * PRIMARY BUTTONS ARE DELIBERATELY EXCLUDED. A filled accent button is the one
 * opaque thing on the page on purpose -- it is the action you are looking for.
 * Glass on it would make it the same weight as everything around it, which is
 * the opposite of what a primary button is.
 */

/* ── Cards ─────────────────────────────────────────────────────────────── */
.macro, .meal, .trend, .addbox,                      /* health */
.daycard, .btile,                                    /* finances */
.story, .note,                                       /* news */
.ev, .pick,                                          /* calendar */
.draft, .find,                                       /* email */
/* `#live`, NOT `.live`. James, 2026-09-08: "why is there a box showing up
   when Julie is thinking and typing?" This file is loaded on the arrival
   screen too, and the in-flight conversation turn is `.turn.live` -- so a bare
   single-class selector meant for the recordings panel wrapped every answer in
   a glass panel while she wrote it, and the panel vanished when the class came
   off at the end of the turn. The recordings element carries `id="live"`, so
   the id is both unambiguous and impossible to collide with. Raising the
   specificity is safe: the only other rule on it is transcripts.html's own
   `.live`, which this was already overriding by load order. */
.text, #live,                                        /* recordings */
.entry-card,                                         /* cortex */
.card, .hero-card, .habit-card                       /* wellness */
{
  /* THE LIT RIM (2026-10-08, after the tab bar's glass: "the cards ... need
     to look like that"). Drawn with inset shadows, which can only touch the
     edge: a border-box gradient layer was tried first and painted under the
     whole translucent card, turning it grey. Brightest along the top-left
     where the light falls, a faint answer bottom-right, and a light lip
     inside the bottom edge. A page's own border-color (Priorities' amber)
     still wins. */
  background:var(--glass-sheen, linear-gradient(transparent, transparent)), var(--glass-tint);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-edge);
  box-shadow:
    inset 1px 1.5px 0 var(--glass-rim-hi, var(--glass-spec)),
    inset -1px -1px 0 var(--glass-rim-lo, var(--glass-spec-low)),
    var(--glass-lip, inset 0 -1px 0 var(--glass-spec-low)),
    var(--glass-lift);
}

/* ── Buttons and chips: the quiet grade ────────────────────────────────────
   At 30-something pixels tall the full pane treatment reads as a chiclet, so
   these get the bevel and very little else. See .jglass-sm.

   NO BLUR, since 2026-09-16. James, punch list item 27: "the top of the hero
   blurs, the Goals button looks soft." It did, and the Goals button is exactly
   `.btn.btn-sm` -- so it was carrying `blur(10px) saturate(150%)` over the
   neural canvas. Rendered side by side in a harness: the net behind the button
   is smeared out completely while the net beside it stays sharp, which is a
   milky patch at the top of the hero rather than a piece of glass.

   A 10px blur on a 30px control can only do one of two useless things, and
   CLAUDE.md rule #47 names both. Over live content it fogs a patch the size of
   the control. Over a card that is ITSELF blurred it returns a flat tint,
   because a backdrop-filter whose backdrop is another backdrop-filter's fill
   reveals nothing. Rule #47's own conclusion: buttons on glass are outlines,
   not filled plates.

   THE TINT AND THE BEVEL STAY. Only the blur goes, so the control keeps its
   shape on a busy background. This is also not a new look: the `@supports not`
   block below covers the CARD list and never covered this one, so every
   browser without backdrop-filter has always rendered these buttons exactly
   this way, and nobody has ever complained about those. */
.btn:not(.primary):not(.btn-primary),
.chip, .cat, .sel, .ghost, .icon,
.txchip, .txmode-btn,
.jw-chip, .pill-tab,
.btn-secondary
{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.11);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(255,255,255,.05);
}
/* Pressed: glass under a finger gets thinner and loses its lit edge, because
   the thing that was catching the light has moved. */
.btn:not(.primary):not(.btn-primary):active,
.chip:active, .cat:active, .txchip:active, .jw-chip:active, .pill-tab:active{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(255,255,255,.04);
}

/* ── The selected state stays the accent, not the material ─────────────────
   A chip that is ON is carrying information. Give it the material and it
   stops being distinguishable from the ones that are off, which is the whole
   job of the state. */
.cat.on, .txchip.on, .txmode-btn.on, .pill-tab.active, .chip.on{
  background:rgba(10,132,255,.18);
  border-color:rgba(10,132,255,.45);
}

/* ── Light theme ───────────────────────────────────────────────────────────
   The tokens invert themselves in julie-glass.css, so the cards follow with
   no help. The small controls carry their own literals, so they need saying
   again: a white film over a white page is invisible, and a press has to
   darken rather than lighten. */
:root[data-theme="light"] .btn:not(.primary):not(.btn-primary),
:root[data-theme="light"] .chip,
:root[data-theme="light"] .cat,
:root[data-theme="light"] .sel,
:root[data-theme="light"] .ghost,
:root[data-theme="light"] .icon,
:root[data-theme="light"] .txchip,
:root[data-theme="light"] .txmode-btn,
:root[data-theme="light"] .jw-chip,
:root[data-theme="light"] .pill-tab,
:root[data-theme="light"] .btn-secondary{
  background:rgba(255,255,255,.62);
  border-color:rgba(15,23,42,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}

/* ── The two fallbacks, both required ──────────────────────────────────────
   Identical reasoning to julie-glass.css: without backdrop-filter the tint
   alone leaves nearly-transparent chrome over live content, which is
   unreadable rather than merely plainer -- and worse here, because the live
   content behind these cards is a moving canvas. Somebody who has asked the
   system to reduce transparency has said the translucency itself is the
   problem, so they get the same solid treatment for a different reason. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .macro, .meal, .trend, .addbox, .daycard, .btile, .story, .note,
  .ev, .pick, .draft, .find, .text, #live, .entry-card,
  .card, .hero-card, .habit-card{
    background:rgba(16,23,40,.93);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.13), var(--glass-lift);
  }
  /* This light counterpart was missing entirely, so a browser without
     backdrop-filter got navy cards under the light theme -- with the light
     theme's near-black --ink still on the text sitting on them. */
  :root[data-theme="light"] .macro, :root[data-theme="light"] .meal,
  :root[data-theme="light"] .trend, :root[data-theme="light"] .addbox,
  :root[data-theme="light"] .daycard, :root[data-theme="light"] .btile,
  :root[data-theme="light"] .story, :root[data-theme="light"] .note,
  :root[data-theme="light"] .ev, :root[data-theme="light"] .pick,
  :root[data-theme="light"] .draft, :root[data-theme="light"] .find,
  :root[data-theme="light"] .text, :root[data-theme="light"] #live,
  :root[data-theme="light"] .entry-card, :root[data-theme="light"] .card,
  :root[data-theme="light"] .hero-card, :root[data-theme="light"] .habit-card{
    background:rgba(255,255,255,.96);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9), var(--glass-lift);
  }
}
@media (prefers-reduced-transparency: reduce){
  .macro, .meal, .trend, .addbox, .daycard, .btile, .story, .note,
  .ev, .pick, .draft, .find, .text, #live, .entry-card,
  .card, .hero-card, .habit-card{
    background:#141B2E;
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  /* FIVE OF THE SEVENTEEN WERE MISSING from this list: .text, #live,
     .entry-card, .hero-card and .habit-card. Recordings and cortex therefore
     kept #141B2E cards on a white page for anyone with Reduce Transparency
     on, while the twelve beside them turned white -- which reads as a
     rendering fault rather than a theme, because the same screen shows both.
     A hand-maintained selector list that must match another hand-maintained
     selector list is exactly the shape that drifts, so the test counts them
     against each other rather than trusting this comment. */
  :root[data-theme="light"] .macro, :root[data-theme="light"] .meal,
  :root[data-theme="light"] .trend, :root[data-theme="light"] .addbox,
  :root[data-theme="light"] .daycard, :root[data-theme="light"] .btile,
  :root[data-theme="light"] .story, :root[data-theme="light"] .note,
  :root[data-theme="light"] .ev, :root[data-theme="light"] .pick,
  :root[data-theme="light"] .draft, :root[data-theme="light"] .find,
  :root[data-theme="light"] .text, :root[data-theme="light"] #live,
  :root[data-theme="light"] .entry-card, :root[data-theme="light"] .card,
  :root[data-theme="light"] .hero-card,
  :root[data-theme="light"] .habit-card{ background:#FFFFFF }
  /* The quiet grade needs saying here too, or every chip and secondary button
     keeps the translucent white film that this setting exists to remove. */
  :root[data-theme="light"] .btn:not(.primary):not(.btn-primary),
  :root[data-theme="light"] .chip, :root[data-theme="light"] .cat,
  :root[data-theme="light"] .sel, :root[data-theme="light"] .ghost,
  :root[data-theme="light"] .icon, :root[data-theme="light"] .txchip,
  :root[data-theme="light"] .txmode-btn, :root[data-theme="light"] .jw-chip,
  :root[data-theme="light"] .pill-tab,
  :root[data-theme="light"] .btn-secondary{
    background:#F2F2F5;
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
}

/* THE SELECTED CHIP, on light. The rule above pins the ON state to
   `rgba(10,132,255,...)`, the DARK-mode blue, which is the one value the
   light palette deliberately does not use (see julie-theme.css: Apple ships
   #007AFF for light because #0A84FF reads washed on white). At 18% over white
   the difference between the two is small but the principle is not: the whole
   reason the ON state is exempt from the material is that it has to stay
   distinguishable, so it is the last place to leave a colour that washes. */
:root[data-theme="light"] .cat.on,
:root[data-theme="light"] .txchip.on,
:root[data-theme="light"] .txmode-btn.on,
:root[data-theme="light"] .pill-tab.active,
:root[data-theme="light"] .chip.on{
  background:rgba(0,122,255,.14);
  border-color:rgba(0,122,255,.42);
  color:var(--accent-hi);
}