/* ════════════════════════════════════════════════════════════════════════════
   BUILDYRA — LIQUID GLASS
   The material layer. Linked after each page's own <style>, like
   assets/buildyra-ui.css, and like that file it is ADDITIVE: it introduces a
   material and the shapes that carry it, and it does not repaint anybody's
   palette. Every page keeps the ground it already has — paper on the home
   page and the sign-in flow, ink on the library, the builder, the dashboard
   and the console — and the glass adapts to whichever it is sitting on.

   ── WHAT MAKES GLASS READ AS GLASS ─────────────────────────────────────────

   A blurred rectangle is not glass; it is fog. Real glass does four things at
   once, and leaving any one of them out is what makes a "frosted" panel look
   like a mistake:

     1 REFRACTION.  It bends what is behind it, most at the rim and least in
       the middle, because that is where the surface is curved. Here: a rim
       that blurs harder and is displaced slightly inward, so the edge carries
       a squeezed copy of the background rather than the same blur as the
       centre.

     2 SPECULAR REFLECTION.  A lit edge where the light is and a dark one
       opposite. Light comes from above on every screen anybody has ever
       designed, so the top rim is bright, the bottom rim is dark, and the
       sides fall between them. One flat 1px white border is the giveaway of
       glass that was not looked at.

     3 SATURATION.  Blur alone averages colour toward grey and the panel dies.
       Backdrop saturation above 100% is what keeps the colour of whatever is
       behind it alive through the material — it is the single cheapest thing
       that separates this from a 2013 frosted panel.

     4 DEPTH.  Two shadows, not one: a wide soft one for the distance the
       panel floats at, and a tight dark one right under the edge for contact.

   ── CONCENTRICITY ──────────────────────────────────────────────────────────

   Apple's rule, and the reason nested rounded boxes usually look wrong: the
   gap between an outer corner and an inner one must be CONSTANT, which means
   the inner radius is the outer radius minus the padding between them, never
   a second number somebody picked. `--lg-r` and `--lg-pad` are declared on
   the outer box and `--lg-r-in` falls out of them.


   ── WHY THE WHOLE FILE IS IN A CASCADE LAYER ───────────────────────────────

   This sheet is linked AFTER every page's own <style>, which without a layer
   means a single-class rule here beats a single-class rule there. That is the
   wrong way round, and it showed up immediately: `.lg-btn`'s padding silently
   replaced `.insp-btn`'s on the home page, three buttons lost 6px of height,
   two of them fell under the 44px tap-target floor and the row grew wide
   enough to push the page sideways at 390px.

   Everything below therefore sits in `@layer buildyra-glass`. Unlayered CSS
   always wins against layered CSS, whatever the order or the specificity, so
   the rule becomes simple and hard to get wrong:

     the material supplies what a page has NOT declared;
     anything a page declares for itself still wins.

   Which is what "additive" has to mean for a layer that is applied to
   thirteen pages nobody wants to re-measure.

   ── WHAT IT COSTS, AND WHO OPTS OUT ────────────────────────────────────────

   `backdrop-filter` is expensive: every frame, the compositor re-blurs
   everything under the element. So the blur radii here are small (8–24px, not
   the 60px that looks good in a screenshot and janks on a scroll), and the
   material is put on chrome — bars, cards, sheets, controls — never on
   something the size of the page.

   Three audiences never get it, and all three are honoured rather than
   detected-and-ignored:

     · prefers-reduced-transparency — the material goes opaque. This is an
       accessibility setting, not a preference about taste: for some readers
       text over a live background is unreadable.
     · prefers-reduced-motion — the specular sweep and the press flex stop.
       The material stays; it is the movement that was the problem.
     · a browser without backdrop-filter — a solid tint of the same colour, so
       the layout is identical and only the see-through is missing.
   ════════════════════════════════════════════════════════════════════════════ */

@layer buildyra-glass {

/* ─── TOKENS ────────────────────────────────────────────────────────────────
   Declared for the LIGHT ground and overridden for the dark one. A page says
   which it is with data-lg="dark" on <html> (or on any container, so a dark
   sheet over a light page gets dark glass without the page changing). With
   nothing declared the system setting decides, which is the right default for
   a page that has not been converted yet. */
:root{
  /* the material */
  --lg-tint:      rgba(255,255,255,.78);   /* the glass itself              */
  --lg-tint-2:    rgba(255,255,255,.88);   /* raised: menus, popovers       */
  --lg-blur:      16px;
  --lg-sat:       180%;
  /* THE PANE LIFTS WHAT IS UNDER IT. Saturation keeps colour alive; this
     keeps TEXT alive. Light glass over a black photograph is a mid-grey
     pane, and dark type on mid-grey is the contrast failure that makes
     every hand-rolled glass panel unreadable in the one place it matters.
     Pulling contrast down and brightness up lifts the blacks under the
     pane toward the tint, so the surface the type sits on is a surface
     rather than whatever happened to be behind it. */
  --lg-lift:      contrast(.92) brightness(1.06);
  /* THE HAIRLINE. A white specular rim is invisible on a white page, and
     Buildyra's is #F5F4F2 — so the first glass nav over the paper sections
     rendered as nothing at all, measurable at 56px tall and perfectly
     transparent. A pane is separated from a LIGHT ground by an outline and
     a shadow, and from a DARK one by its specular rim. It needs both, all
     the time, because it travels over both. */
  --lg-hair:      rgba(16,16,28,.12);

  /* The lit edge. Not a single sweep from light to dark: a real pane is
     brightest along the TOP where the light is, dark down the SIDES where
     the surface turns away, and lit again along the BOTTOM by what bounces
     back off the page. A one-directional gradient gives you a panel that
     looks lit from one corner, which is a lighting rig, not a window. */
  --lg-spec-hi:   rgba(255,255,255,.95);   /* top                           */
  --lg-spec-mid:  rgba(255,255,255,.18);   /* sides                         */
  --lg-spec-lo:   rgba(255,255,255,.55);   /* bottom: bounce                */
  --lg-spec-sh:   rgba(0,0,0,.10);         /* the shaded lower-right        */
  --lg-rim-w:     1px;

  /* depth */
  --lg-shadow:
    0 1px 1px rgba(16,16,28,.05),
    0 8px 24px -10px rgba(16,16,28,.16),
    0 28px 60px -34px rgba(16,16,28,.26);
  --lg-shadow-raised:
    0 2px 3px rgba(16,16,28,.07),
    0 14px 34px -12px rgba(16,16,28,.22),
    0 44px 90px -46px rgba(16,16,28,.34);
  --lg-contact:   0 1px 0 rgba(16,16,28,.05);

  /* geometry. One radius scale, and the concentric rule underneath it. */
  --lg-r-sm:  12px;
  --lg-r:     20px;
  --lg-r-lg:  28px;
  --lg-r-pill:999px;
  --lg-pad:   14px;
  --lg-r-in:  max(6px, calc(var(--lg-r) - var(--lg-pad)));

  /* ink ON the glass. Never inherited from the page: glass sits over
     whatever it sits over, and the page's own foreground may not survive it. */
  --lg-ink:   #12121a;
  --lg-ink-2: rgba(18,18,26,.74);

  --lg-ease:  cubic-bezier(.32,.72,0,1);   /* Apple's own easing shape      */
  --lg-fast:  180ms;
  --lg-mid:   340ms;
}

/* The dark ground. Glass over ink is a DARKER pane with a brighter rim, not
   a lighter one — a light pane over a dark page is a lightbox, which is the
   mistake that makes dark-mode glass look like a bug. */
/* `.lg-dark` is the same switch as a class, for the case CSS cannot express:
   a REGION of a light page that sits over ink. The home page's nav is the
   example — it is already told when it is over the hero, and this lets it
   tell the material too, in one word, instead of the page restating the
   whole token block. */
[data-lg="dark"],
[data-lg="dark"] *{ color-scheme: dark; }
[data-lg="dark"],
.lg-dark{
  /* OPAQUE ENOUGH TO CARRY ITS OWN TYPE. A dark pane cannot know what is
     behind it, so it cannot borrow contrast from it — at .58 over paper
     this composited to rgb(211,210,210) and the home page's nav put white
     text on it at 1.38:1. The tint is what guarantees the reading; the
     transparency is what is left over after that. */
  --lg-tint:      rgba(22,22,30,.82);
  --lg-tint-2:    rgba(28,28,38,.90);
  --lg-blur:      18px;
  --lg-sat:       160%;
  /* The mirror of the light one: bring the highlights DOWN so a bright
     photograph behind a dark pane does not burn through the type. */
  --lg-lift:      contrast(.92) brightness(.88);
  --lg-hair:      rgba(0,0,0,.55);

  --lg-spec-hi:   rgba(255,255,255,.40);
  --lg-spec-mid:  rgba(255,255,255,.07);
  --lg-spec-lo:   rgba(255,255,255,.16);
  --lg-spec-sh:   rgba(0,0,0,.40);

  --lg-shadow:
    0 1px 1px rgba(0,0,0,.30),
    0 10px 28px -12px rgba(0,0,0,.55),
    0 34px 70px -38px rgba(0,0,0,.70);
  --lg-shadow-raised:
    0 2px 4px rgba(0,0,0,.36),
    0 18px 40px -14px rgba(0,0,0,.62),
    0 52px 100px -50px rgba(0,0,0,.80);
  --lg-contact:   0 1px 0 rgba(0,0,0,.35);

  --lg-ink:   #F2F2F6;
  --lg-ink-2: rgba(242,242,246,.72);
}

/* A page that has said nothing yet still gets the right glass for the
   reader's system, so the material is never wrong before it is adopted. */
@media (prefers-color-scheme: dark){
  :root:not([data-lg="light"]):not([data-lg="dark"]){
    --lg-tint:rgba(22,22,30,.82); --lg-tint-2:rgba(28,28,38,.90);
    --lg-lift:contrast(.92) brightness(.88); --lg-hair:rgba(0,0,0,.55);
    --lg-spec-hi:rgba(255,255,255,.40); --lg-spec-mid:rgba(255,255,255,.07);
    --lg-spec-lo:rgba(255,255,255,.16); --lg-spec-sh:rgba(0,0,0,.40);
    --lg-ink:#F2F2F6; --lg-ink-2:rgba(242,242,246,.72);
  }
}

/* ─── THE MATERIAL ──────────────────────────────────────────────────────────
   `.lg` is the whole of it. Everything below is this shape at a different
   size with a different job. */
.lg{
  position:relative;
  isolation:isolate;                        /* keeps ::before out of the page */
  border-radius:var(--lg-r);
  background:var(--lg-tint);
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat)) var(--lg-lift);
  backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat)) var(--lg-lift);
  box-shadow:0 0 0 .5px var(--lg-hair), var(--lg-shadow);
  color:var(--lg-ink);
  /* No `border`. A border is one flat colour all the way round, which is the
     one thing a lit edge never is — the rim is drawn below instead. */
  border:0;
}

/* THE RIM. A gradient ring, masked to the outline so only the edge shows: a
   bright arc where the light is, a dark one opposite, and the sides between.
   It also carries a second, harder backdrop blur, which is the refraction —
   the edge of a real pane squeezes what is behind it more than the middle. */
.lg::before{
  content:'';
  position:absolute; inset:0;
  border-radius:inherit;
  padding:var(--lg-rim-w);
  background:linear-gradient(
    180deg,
    var(--lg-spec-hi)  0%,
    var(--lg-spec-mid) 34%,
    var(--lg-spec-mid) 62%,
    var(--lg-spec-lo) 100%),
    linear-gradient(115deg,
      rgba(255,255,255,0) 55%,
      var(--lg-spec-sh) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  z-index:1;
}

/* A second, very soft highlight inside the top edge — the thickness of the
   pane catching the light. Without it the rim reads as a stroke rather than
   as an edge with depth behind it. */
.lg::after{
  content:'';
  position:absolute; inset:0;
  border-radius:inherit;
  background:linear-gradient(180deg,
    rgba(255,255,255,.10) 0%,
    rgba(255,255,255,0) 30%);
  pointer-events:none;
  z-index:0;
}
[data-lg="dark"] .lg::after,
.lg-dark.lg::after,
.lg-dark .lg::after{
  background:linear-gradient(180deg,
    rgba(255,255,255,.07) 0%,
    rgba(255,255,255,0) 42%);
}

/* Anything the page puts inside must sit above both layers. */
.lg > *{ position:relative; z-index:2; }

/* ─── THE SHAPES ────────────────────────────────────────────────────────── */

/* A bar: the thing pinned to the top of a page. Flatter and less blurred than
   a card, because it is always over moving content and a heavy blur there is
   the most expensive pixel on the page. */
.lg-bar{
  --lg-r:var(--lg-r-pill);
  --lg-blur:14px;
  /* NO LIFT ON A BAR. Every other surface gets blur + saturate + contrast +
     brightness; a bar gets the first two. It is the one pane that is always
     over MOVING content, and on the Inspiration gallery a four-function
     backdrop filter cost enough compositor time per frame that the wall's
     clips stopped yielding to the scroll — four video decoders kept running
     through it, which is precisely the tax that page was tuned to avoid.
     Two functions is the same material to look at and gives the frame back. */
  --lg-lift:saturate(1);
  box-shadow:0 0 0 .5px var(--lg-hair),
             0 2px 6px -2px rgba(16,16,28,.10),
             0 18px 40px -22px rgba(16,16,28,.34);
}
[data-lg="dark"] .lg-bar,
.lg-dark.lg-bar{
  box-shadow:0 0 0 .5px var(--lg-hair),
             0 2px 8px -2px rgba(0,0,0,.45),
             0 22px 48px -22px rgba(0,0,0,.70);
}

/* A card or panel. Content sits ON it and has to be READ on it, so it is
   the most opaque of the three everyday surfaces — a panel you can see
   through is a panel whose paragraph you cannot finish. */
.lg-card{
  --lg-r:var(--lg-r-lg);
  --lg-pad:clamp(16px,2vw,24px);
  background:var(--lg-tint-2);
  padding:var(--lg-pad);
}

/* A sheet, a dialog, a popover: raised above everything, so more opaque
   (text has to win) and a deeper shadow. */
.lg-sheet{
  --lg-r:var(--lg-r-lg);
  background:var(--lg-tint-2);
  --lg-blur:24px;
  box-shadow:0 0 0 .5px var(--lg-hair), var(--lg-shadow-raised);
}

/* ─── CONTROLS ──────────────────────────────────────────────────────────── */

.lg-btn{
  --lg-r:var(--lg-r-pill);
  --lg-blur:10px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px;
  font:inherit; font-size:14px;
  /* NO line-height. It is geometry, a page that has sized its own buttons
     has already decided it, and the two pixels this took off the home
     page's row were enough to drop a 45px control under the 44px
     tap-target floor. The material owns surface, not size. */
  cursor:pointer;
  text-decoration:none;
  box-shadow:0 0 0 .5px var(--lg-hair), 0 6px 16px -10px rgba(16,16,28,.34);
  transition:transform var(--lg-fast) var(--lg-ease),
             box-shadow var(--lg-fast) var(--lg-ease),
             background var(--lg-fast) var(--lg-ease);
}
.lg-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 0 0 .5px var(--lg-hair), 0 12px 26px -12px rgba(16,16,28,.40);
}
/* THE PRESS IS A FLEX, NOT A DIP. Glass under a finger compresses and the
   highlight slides; a button that only moves down 1px reads as plastic. */
.lg-btn:active{
  transform:scale(.972);
  box-shadow:0 0 0 .5px var(--lg-hair), 0 3px 8px -6px rgba(16,16,28,.45);
  transition-duration:80ms;
}

/* The one solid control on a screen. Still glass — it keeps the rim and the
   press — but it is the opaque one, because a primary action that you can
   see through is a primary action nobody finds. */
.lg-btn-primary{
  background:var(--lg-ink);
  color:var(--lg-tint-2);
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.lg-btn-primary::after{
  background:linear-gradient(180deg,
    rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 46%);
}
[data-lg="dark"] .lg-btn-primary,
.lg-dark .lg-btn-primary{ color:#0D0D12; }

/* A rounded rectangle, not a pill. A pill is right for a search box a
   reader dips into and right for a button; it is wrong for a column of
   form fields, where the flat sides are what make a stack of inputs read
   as one form. Anything that wants the pill asks for it. */
.lg-field{
  --lg-r:var(--lg-r-sm);
  --lg-blur:8px;
  padding:11px 16px;
  color:var(--lg-ink);
  font:inherit; font-size:14px;
  width:100%;
  transition:box-shadow var(--lg-fast) var(--lg-ease);
}
.lg-field::placeholder{ color:var(--lg-ink-2); }
.lg-field:focus{ outline:none;
  box-shadow:0 0 0 .5px var(--lg-hair), 0 0 0 3px rgba(108,94,244,.32); }

.lg-chip{
  --lg-r:var(--lg-r-pill);
  --lg-blur:8px;
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 14px;
  font-size:12.5px; line-height:1;
  cursor:pointer;
  transition:transform var(--lg-fast) var(--lg-ease),
             background var(--lg-fast) var(--lg-ease);
}
.lg-chip:active{ transform:scale(.96); }
.lg-chip[aria-pressed="true"],
.lg-chip.on{ background:var(--lg-ink); color:var(--lg-tint-2); }
[data-lg="dark"] .lg-chip[aria-pressed="true"],
[data-lg="dark"] .lg-chip.on,
.lg-dark .lg-chip[aria-pressed="true"],
.lg-dark .lg-chip.on{ color:#0D0D12; }

/* ─── CONTROLS INSIDE A PANE ────────────────────────────────────────────────
   `.lg-flat` is the material WITHOUT a live backdrop: the tint, the rim, the
   radii, the press — everything but the `backdrop-filter`.

   Two reasons, and the second is the one that forced it.

   FIRST, IT IS WHAT GLASS DOES. A control sitting inside a glass container
   is not a second window; light does not refract twice through a button on
   a pane. Apple nests controls in a container's material as tinted shapes,
   and stacking fifteen independent refractions is how a design system starts
   looking like frosted plastic.

   SECOND, IT IS WHAT THE MACHINE CAN AFFORD. The Inspiration library's
   filter bar is sticky and holds a search field, a disclosure and twelve
   chips. Given each of them its own backdrop-filter, the compositor
   re-blurred fifteen backdrops on every frame of every scroll — and that
   page's whole design is "nothing decodes while the page is moving",
   budgeted before any of this existed. The wall's clips stopped yielding,
   which `tests/inspiration-qa.mjs` caught and which is exactly the tax the
   page was tuned to avoid. Glass off: 69/69. Glass on: red.

   So: one live pane per surface. The bar refracts; what sits in the bar
   takes its colour and its rim and leaves the backdrop alone. */
/* INSET, NOT WHITER. A control nested in a pane is BELOW its surface, not
   another layer on top of it — so on a light ground it darkens slightly
   and on a dark one it lightens slightly. Tinting it white on a white card
   is how the sign-in form ended up as white fields on a white pane,
   separated by nothing but a hairline you had to look for. */
.lg-flat{
  -webkit-backdrop-filter:none; backdrop-filter:none;
  background:var(--lg-inset, rgba(16,16,28,.045));
  /* AND NO SHADOW OUTWARD. A recess cut into a surface does not cast a
     shadow onto the surface it is cut into — but `.lg`'s float shadow came
     along with the material, so every field in the sign-in form looked
     like it was hovering above the card instead of set into it. That one
     detail was most of what read as "off". The hairline stays, because the
     edge of a recess is still an edge. */
  box-shadow:0 0 0 .5px var(--lg-hair),
             inset 0 1px 2px rgba(16,16,28,.05);
}
[data-lg="dark"] .lg-flat,
.lg-dark .lg-flat,
.lg-dark.lg-flat{
  box-shadow:0 0 0 .5px var(--lg-hair),
             inset 0 1px 2px rgba(0,0,0,.30);
}
/* Except when it is a control you press: those keep their lift. */
.lg-flat.lg-btn:hover,.lg-flat.lg-chip:hover{
  box-shadow:0 0 0 .5px var(--lg-hair), 0 6px 16px -10px rgba(16,16,28,.30);
}
[data-lg="dark"] .lg-flat,
.lg-dark .lg-flat,
.lg-dark.lg-flat{ background:var(--lg-inset, rgba(255,255,255,.07)); }
/* A pressed or selected inset control is the solid one, not a deeper hole. */
.lg-flat[aria-pressed="true"],.lg-flat.on{ background:var(--lg-ink); }
@media (prefers-color-scheme: dark){
  :root:not([data-lg="light"]) .lg-flat{ background:var(--lg-inset, rgba(255,255,255,.07)); }
}

/* ─── THE SWEEP ─────────────────────────────────────────────────────────────
   A specular highlight that travels across the pane as the pointer crosses
   it. On a real surface the reflection moves when you move, and this is the
   cheapest honest version of that: one pass, on enter, and then it is gone.
   Opt in with .lg-sweep — it is the flourish, not the material. */
.lg-sweep{ overflow:hidden; }
.lg-sweep > .lg-glint,
.lg-sweep::after{ pointer-events:none; }
.lg-sweep:hover::after{
  background:
    linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 38%),
    linear-gradient(105deg,
      rgba(255,255,255,0) 38%,
      rgba(255,255,255,.26) 50%,
      rgba(255,255,255,0) 62%);
  background-size:100% 100%, 260% 100%;
  background-position:0 0, 120% 0;
  animation:lg-sweep 900ms var(--lg-ease);
}
@keyframes lg-sweep{
  from{ background-position:0 0, -60% 0; }
  to  { background-position:0 0,  160% 0; }
}

/* ─── SURFACE TINT ──────────────────────────────────────────────────────────
   Glass takes the colour of what is behind it. Where a page wants that to be
   explicit — a brand accent showing through a bar, say — this sets it without
   touching the material. */
.lg-tint-accent{ background:
  linear-gradient(var(--lg-accent-wash,rgba(108,94,244,.10)),var(--lg-accent-wash,rgba(108,94,244,.10))),
  var(--lg-tint); }

/* ─── WHO OPTS OUT ──────────────────────────────────────────────────────────
   An accessibility setting, not a taste. Some readers cannot read text over a
   live background at all, so the material goes solid and keeps every other
   property — the layout, the rim, the radii and the depth are unchanged, so
   nothing reflows and nothing looks broken. */
@media (prefers-reduced-transparency: reduce){
  .lg{
    -webkit-backdrop-filter:none; backdrop-filter:none;
    background:var(--lg-solid, #FFFFFF);
  }
  [data-lg="dark"] .lg,
  .lg-dark.lg{ background:var(--lg-solid, #1B1B24); }
}
@media (prefers-reduced-motion: reduce){
  .lg-btn,.lg-chip{ transition:none; }
  .lg-btn:hover,.lg-btn:active,.lg-chip:active{ transform:none; }
  .lg-sweep:hover::after{ animation:none; }
}
/* No backdrop-filter at all: a solid tint of the same colour. The layout is
   identical; only the see-through is missing. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .lg{ background:var(--lg-solid, rgba(255,255,255,.94)); }
  [data-lg="dark"] .lg,
  .lg-dark.lg{ background:var(--lg-solid, rgba(26,26,34,.94)); }
}

/* Keyboard focus has to beat the rim, which is drawn at z-index 1. */
.lg:focus-visible,
.lg-btn:focus-visible,
.lg-chip:focus-visible{
  outline:2px solid #8b7cff;
  outline-offset:3px;
}

} /* @layer buildyra-glass */

/* ─── OUTSIDE THE LAYER, ON PURPOSE ─────────────────────────────────────────
   Everything above is layered so a page's own rules win. That is right for
   geometry and for surface — and wrong for exactly one thing.

   `.lg-btn-primary` is a CONTRACT, not a default: this control is solid, and
   its label is the inverse of its ground. A page that styles `a{color:…}`
   has a type selector, which beats NOTHING on specificity but beats every
   layered rule on origin — so the home page's "Browse the library" came out
   as #0D0D0F on #12121A, a contrast ratio of 1.04:1, which is a button with
   an invisible label. It rendered correctly right up until a page-level
   `a{}` rule existed, which is the worst way for this to fail.

   So the one declaration without which the component is broken lives here,
   unlayered, where a page's element selectors cannot reach it. A page that
   really wants a different colour can still say so with a class. */
.lg-btn-primary{ color:var(--lg-tint-2); }
[data-lg="dark"] .lg-btn-primary,
.lg-dark .lg-btn-primary{ color:#0D0D12; }