/* Sindhorn Midtown Internal — the one frosted-glass material.
   This is the only stylesheet that may declare a fill, an edge color or a
   backdrop-filter. Membership is a rule (below), not a list: a component
   that draws an edge is a card and takes the material here; everything
   else owns geometry and content only.

   Material contract:
   - one blur recipe, one fill per weight, both named by the constitution
   - utility actions (Sign out / Share / Back to top) remain fully transparent
   - nothing here shouts: nothing downstream is allowed to compete (the ratchet
     refuses a new stylesheet), so nothing here needs to shout
*/
/* The material's values - fill, edge, blur, the overlay and scrim weights -
   are the constitution's (--app-glass-*, r33): a product decides how much
   pigment its glass carries and how strong its blur is. This sheet declares
   the rule (who is glass, who is not, glass never nests) and consumes those
   tokens; it declares no value of its own. */

/* THE RULE: glass only where it touches the atmosphere.

   backdrop-filter samples what is painted behind an element, but an ancestor
   that already has backdrop-filter becomes a backdrop root - so a glass element
   inside a glass element can only sample its parent, never the page. It renders
   as a flat tint whatever the CSS says.

   Measured on the CI page: an identical dropdown blurred correctly on /fnb and
   not at all on /ci, purely because the CI specimen container was itself glass.

   So: a glass surface must never contain another glass surface. Anything inside
   one takes a plain tint with no backdrop-filter - which is what it was already
   rendering as. scripts/nested-glass-smoke.mjs fails the build if this is
   reintroduced. */

/* THE MEMBERSHIP RULE - approved 3 September 2026.

   A card is anything that draws an edge: a border or a fill. It sits on the
   atmosphere, so the atmosphere must show through it. A layout container draws
   no edge - it only arranges its children - so it is not a card and takes no
   material. Sign out, Share and Back to top are frameless for that reason: no
   edge, no glass. This is a rule, not a per-component exception list.

   Three primitives, declared in markup by the component itself:
     .app-card     a drawn boundary on the atmosphere
     .app-control  an interactive drawn boundary
     .app-overlay  a drawn boundary floating above content, not the atmosphere

   Route stylesheets own geometry only - padding, radius, grid - and never
   declare fill, border color or backdrop-filter. They need no cascade override
   precisely because nothing downstream is allowed to compete.

   They replaced a 61-name hand-maintained registry (app-glass-runtime.js, retired r18).
   Membership used to depend on someone remembering to add a class name, which
   is how /ci sections 16 and 17 ended up in two different materials. */
/* Components that are cards by definition take the material without a second
   class in markup. A consumer writes .app-action-card and gets glass, which is
   what "reuse before creating" has to mean in practice - forgetting .app-card
   is otherwise a silent, invisible failure. */
/* Material is fill and blur. The edge is what makes something a card, so it is
   declared separately: a table cell borrows the material without becoming a
   box, and every card keeps its edge. */
.app-card,
.app-masthead,
.app-navbar,
.app-table tbody th,
.app-action-card,
.app-surface,
.app-disclosure,
.app-control{
  background-color:var(--app-glass-fill);
  backdrop-filter:var(--app-glass-filter);
  -webkit-backdrop-filter:var(--app-glass-filter);
}
.app-card,
.app-action-card,
.app-surface,
.app-disclosure,
.app-control{
  border:1px solid var(--app-glass-border);
}

/* Floating layers sit over arbitrary page content rather than the Betta, so
   they take the heavier fill. Same blur - one material, two weights. */
/* A sticky table column is a layer floating over the cells scrolling beneath
   it, not a surface on the atmosphere — so it takes the overlay weight and the
   one blur, rather than an opaque fill of its own. */
.app-overlay{
  background-color:var(--app-glass-overlay-fill);
  backdrop-filter:var(--app-glass-filter);
  -webkit-backdrop-filter:var(--app-glass-filter);
}
.app-overlay{border:1px solid var(--app-glass-border)}

/* A badge, a form well, a code block and a captioned figure each draw a fill, so the glass
   membership rule applies to them too - but each keeps its own tint (accent, inset) rather
   than either weight above, so only the blur is shared here. Their fill and
   border stay declared with the rest of the component in app-components.css;
   backdrop-filter stays here because this file is the one place it may be
   declared, so a route or a future component can never end up with a second,
   slightly-different blur recipe. */
.app-badge,
.app-avatar,
.app-code-block,
.app-figure:has(figcaption),
.app-field input,
.app-field textarea,
.app-field select{
  backdrop-filter:var(--app-glass-filter);
  -webkit-backdrop-filter:var(--app-glass-filter);
}


/* A card inside a card cannot sample the page - see THE RULE above - so it
   keeps the tint and drops the blur. Structural, so no guard is needed to
   notice it after the fact. */
.app-card .app-card,
.app-card .app-action-card,
.app-card .app-surface,
.app-card .app-disclosure,
.app-card .app-control,
.app-card .app-badge,
.app-card .app-avatar,
.app-card .app-figure:has(figcaption),
.app-disclosure .app-figure:has(figcaption),
.app-card .app-field input,
.app-card .app-field textarea,
.app-card .app-field select,
.app-card .app-code-block,
.app-code-block .app-control,
.app-action-card .app-card,
.app-disclosure .app-card,
.app-masthead .app-control,
.app-masthead .app-badge,
.app-navbar .app-control,
.app-navbar .app-badge,
.app-overlay .app-card,
.app-overlay .app-control,
.app-overlay .app-badge,
.app-overlay .app-avatar,
.app-overlay .app-figure:has(figcaption),
.app-overlay .app-overlay,
.app-overlay .app-field input,
.app-overlay .app-field textarea,
.app-overlay .app-field select,
.app-overlay .app-code-block{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
/* Without the blur the overlay weight shows the page through a floating
   menu; a nested overlay takes the near-solid tint instead. */
.app-overlay .app-overlay{background-color:var(--app-glass-nested-fill)}

/* The scrim is the one material a floating surface casts on the page beneath
   it; the surface itself takes the overlay weight above. */
.app-dialog::backdrop,.app-sheet::backdrop{
  background:var(--app-glass-scrim-fill);
  backdrop-filter:var(--app-glass-scrim-filter);
  -webkit-backdrop-filter:var(--app-glass-scrim-filter);
}

/* A frameless utility draws no edge, so it takes no material: transparent,
   unblurred, whatever else it is. Declared here, not in the component, so
   the membership rule and its one negative live in the same file. */
.app-utility-action{
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* A warning states itself on the edge, and an edge is material, so the
   material authority derives it rather than a primitive sheet. The tone is
   semantic and stays a page's word; what that tone looks like on this material
   is this file's decision. Moved here in r53 - it was the one material
   declaration left in app-components.css. */
.app-surface[data-tone="warn"]{border-color:rgba(var(--app-accent-rgb),.45)}