/* The client app's Liquid Glass look (GL1, 2026-11-02). Loaded only on the pages of a tenant showing it
   (templates/partials/glass_head.html), after every other sheet, so vanilla and the staff console never load one rule
   of it. Every colour arrives as a token built by cdt.identity.glass_theme from structured brand roles.

   The reference is docs/orchestration/2026-10-31-console-first-principles/liquid-glass-reference.md. The layers:
   ENVIRONMENT  the brand field on the body: gradients only, nothing pinned, nothing repainted on scroll.
   CONTENT      the sheet (.screen-area): the app's own standard material, never translucent. Messages, files, census,
                tables and forms stay exactly as readable as vanilla.
   NAVIGATION   the glass: the rail, the control capsule, the composer dock, menus, the sign-in card. One filter per
                group: the rail is one, the capsule is one and its buttons (and the status island) only sit on it, the
                dock is one; a menu is the one transient above them. Budget: three plus one, two plus one on a phone.
                A filtered element is a backdrop root, so the capsule filters on ::before and the menu inside it
                still sees the page.

   Order is the solid twin first, then @supports, then the settings: reduced transparency, more contrast and forced
   colours drop every filter, and reduced motion drops every movement. Text on glass holds AA over the worst backdrop
   by its fill (glass_theme._floor_alpha), so no setting is the safety net. Token names shared with the console's pass
   are in docs/orchestration/2026-11-02-client-glass/TOKEN-CONTRACT.md. */

:root.theme-glass {
  --glass-gap: 10px;              /* The window's inset; the field shows in it. */
  --glass-radius: 20px;           /* Rail, sheet, dock. Controls nest inside it. */
  --glass-control-radius: 12px;   /* 20 minus the 8px the rail's rows sit in by: concentric. */
  --glass-bar-clear: 70px;        /* The band at the top of the sheet the capsule floats in. */
  --glass-sheet-fill: #fbfbfd;    /* The content layer: a neutral standard material. */
  --liquid-specular: inset 1px 1px 1px -.5px var(--liquid-rim), inset -1px -1px 1px -1px var(--glass-rim);
  --liquid-sheen: linear-gradient(135deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .02) 34%, rgba(255, 255, 255, 0) 60%);
  --liquid-lift: 0 0 1px var(--glass-lift-color), 0 2px 4px -1px var(--glass-lift-color), 0 12px 28px -10px var(--glass-lift-color);
  --glass-ease: cubic-bezier(.22, .8, .24, 1);
  background: var(--glass-ground-base);
}

/* ---- the field ---- */
.theme-glass body {
  background: var(--glass-ground), var(--glass-ground-base);
  background-color: var(--glass-ground-base);
}
.theme-glass body::before,
.theme-glass body.wl-branded::after { content: none; }

/* ---- the sheet ---- */
.theme-glass body.wl-wide .app-shell {
  flex: 1 1 auto; height: 100%; box-sizing: border-box;
  padding: var(--glass-gap); gap: var(--glass-gap);
}
.theme-glass body.wl-wide .screen-area {
  background: var(--glass-sheet-fill);
  border-radius: var(--glass-radius);
  box-shadow: 0 0 0 1px rgba(var(--glass-ink-rgb), .06), var(--liquid-lift);
  isolation: isolate;
}
/* The band above the content, and the scroll edge: content softens as it nears the capsule. Never a full fill, so the
   capsule keeps the live page to show. */
.theme-glass body.wl-wide .screen-area::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: calc(var(--glass-bar-clear) - 8px); z-index: 3;
  pointer-events: none; opacity: 0; transition: opacity 180ms var(--glass-ease);
  background: linear-gradient(color-mix(in srgb, var(--glass-sheet-fill) 72%, transparent), transparent);
}
.theme-glass.glass-scrolled body.wl-wide .screen-area::before { opacity: 1; }
.theme-glass .job-page .job-scroll { padding-top: var(--glass-bar-clear); box-sizing: border-box; scroll-padding-top: var(--glass-bar-clear); }
.theme-glass .job-page .job-frame { padding-top: 0; }
.theme-glass .job-page .job-index:not([hidden]) { top: 8px; }
.theme-glass .cp { padding-top: var(--glass-bar-clear); }
/* The sheet is the page's one surface: a card on it would be a card in a card. */
.theme-glass body.wl-wide .upload-card,
.theme-glass body.wl-wide.dml-ui .home-card { background: transparent; border-color: transparent; box-shadow: none; }

/* ---- the bar: nothing of its own, its pieces float ---- */
.theme-glass body.wl-wide .topbar {
  position: absolute; z-index: 60; top: calc(var(--glass-gap) + 12px); left: calc(var(--glass-gap) + 10px); right: calc(var(--glass-gap) + 12px);
  height: auto; min-height: 0; padding: 0;
  background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  pointer-events: none;
}
.theme-glass body.wl-wide .topbar > * { pointer-events: auto; }
.theme-glass body.wl-wide .topbar .brand-pill { color: var(--glass-ink); padding: 2px 8px 2px 2px; }
.theme-glass body.wl-wide .topbar .brand-pill:hover { border-color: transparent; }
.theme-glass body.wl-wide .brand-pill .brand-name { color: var(--glass-ink); }
.theme-glass body.wl-wide .brand-pill .brand-sub { color: var(--glass-ink-soft); }
.theme-glass body.wl-wide .brand-pill .brand-monogram { background: var(--glass-solid); border-color: var(--glass-rim); color: var(--glass-solid-ink); }
.theme-glass[data-glass-logo="bare"] body.wl-wide .brand-pill .logo.brand-logo-square { background: transparent; box-shadow: none; }

/* The capsule: one filter on ::before, buttons sit on it as plain children. */
.theme-glass body.wl-wide.dml-ui .topbar-right {
  position: relative; z-index: 0;
  background: none; border: 0; border-radius: 999px; box-shadow: none; padding: 4px 6px; gap: 2px;
}
.theme-glass body.wl-wide.dml-ui .topbar-right::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--glass-solid);
  box-shadow: var(--liquid-specular), var(--liquid-lift);
}
.theme-glass body.wl-wide .topbar .icon-btn,
.theme-glass body.wl-wide .topbar .notif-btn[data-state] { background: transparent; border-color: transparent; color: var(--glass-ink); border-radius: 999px; }
.theme-glass body.wl-wide .topbar .icon-btn:hover,
.theme-glass body.wl-wide .topbar .icon-btn[aria-expanded="true"],
.theme-glass body.wl-wide .topbar .notif-btn:hover { background: rgba(var(--glass-ink-rgb), .14); border-color: transparent; color: var(--glass-ink); }
.theme-glass body.wl-wide .topbar .icon-btn:focus-visible { outline-color: var(--glass-ink); }
.theme-glass body.wl-wide.dml-ui .topbar-right > .report-issue-btn::after { background: rgba(var(--glass-ink-rgb), .24); }
.theme-glass body.wl-wide .topbar .context-meta,
.theme-glass body.wl-wide .topbar .context-meta .label,
.theme-glass body.wl-wide .topbar .context-meta .value { color: var(--glass-ink-soft); }

/* The status island: the agent's state and a small step rail, once the head has scrolled away. Beside the capsule on a
   wide window, never in it: the capsule keeps one size, and the island is the look's one transient filter. */
.theme-glass .glass-island {
  display: inline-flex; align-items: center; gap: 10px; max-width: min(46vw, 420px); min-height: 34px; padding: 0 12px 0 10px;
  background: transparent; border: 0; border-radius: 999px; color: var(--glass-ink); font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer;
}
.theme-glass .glass-island[hidden] { display: none; }
.theme-glass .glass-island:hover { background: rgba(var(--glass-ink-rgb), .12); }
.theme-glass .glass-island:focus-visible { outline: 2px solid var(--glass-ink); outline-offset: 1px; }
.theme-glass .glass-island-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.theme-glass .glass-island-steps { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.theme-glass .glass-island-steps i { width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--glass-ink-soft); }
.theme-glass .glass-island-steps i[data-state="done"] { background: var(--glass-ink); box-shadow: none; }
.theme-glass .glass-island-steps i[data-state="active"],
.theme-glass .glass-island-steps i[data-state="waiting"] { background: var(--glass-action); box-shadow: 0 0 0 1.5px var(--glass-ink); }
.theme-glass .glass-island-steps i[data-state="halted"] { background: #e5484d; box-shadow: 0 0 0 1.5px var(--glass-ink); }
@media (min-width: 901px) {
  .theme-glass body.wl-wide.dml-ui .glass-island {
    position: absolute; right: calc(100% + 8px); top: 50%; translate: 0 -50%; min-height: 42px; padding: 0 16px 0 14px;
    background: var(--glass-solid); box-shadow: var(--liquid-specular), var(--liquid-lift);
  }
  .theme-glass body.wl-wide.dml-ui .glass-island:hover { background: var(--glass-solid); }
}

/* ---- the rail ---- */
.theme-glass body.wl-wide .sidebar {
  flex: 0 0 var(--sidebar-w); border: 0; border-radius: var(--glass-radius); overflow: hidden; box-sizing: border-box;
  padding-top: 58px;
  background: var(--glass-solid); color: var(--glass-ink);
  box-shadow: var(--liquid-specular), var(--liquid-lift);
}
.theme-glass body.wl-wide .sidebar-head { border-bottom: 0; padding: .55rem .9rem .35rem 1rem; }
.theme-glass body.wl-wide .sidebar-title { color: var(--glass-ink-soft); }
.theme-glass body.wl-wide .sidebar-toggle { color: var(--glass-ink-soft); }
.theme-glass body.wl-wide .sidebar-toggle:hover { background: rgba(var(--glass-ink-rgb), .12); color: var(--glass-ink); }
.theme-glass body.wl-wide .sidebar-new {
  margin: .35rem .6rem .6rem; width: calc(100% - 1.2rem); box-sizing: border-box; border-radius: var(--glass-control-radius);
  background: var(--glass-action); color: var(--glass-action-fg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
}
.theme-glass body.wl-wide .sidebar-new:hover { background: var(--glass-action-hover); filter: none; }
/* Inside glass a field is a fill, never a second glass. */
.theme-glass body.wl-wide.dml-ui #session-search {
  margin: 0 .6rem .55rem; width: calc(100% - 1.2rem); box-sizing: border-box;
  background: var(--glass-plate); border-color: transparent; color: var(--glass-ink); border-radius: var(--glass-control-radius);
}
.theme-glass body.wl-wide.dml-ui #session-search::placeholder { color: var(--glass-ink-soft); opacity: 1; }
.theme-glass body.wl-wide .sidebar-list { padding: 0 .6rem; }
.theme-glass body.wl-wide .sidebar-item,
.theme-glass[data-theme] body.wl-wide .sidebar-item {
  width: 100%; box-sizing: border-box; margin: 0 0 2px; padding: .55rem .6rem; border: 0; border-radius: var(--glass-control-radius); color: var(--glass-ink);
}
.theme-glass[data-theme] body.wl-wide .sidebar-item:hover { background: rgba(var(--glass-ink-rgb), .09); }
.theme-glass[data-theme] body.wl-wide .sidebar-item.active { background: rgba(var(--glass-ink-rgb), .15); border-left-color: transparent; }
.theme-glass body.wl-wide .sidebar-item-title,
.theme-glass[data-theme] body.wl-wide .sidebar-item-title,
.theme-glass body.wl-wide .sidebar-item.active .sidebar-item-title { color: var(--glass-ink); }
.theme-glass body.wl-wide .sidebar-item-time,
.theme-glass body.wl-wide .sidebar-item-agent,
.theme-glass body.wl-wide .sidebar-item-target,
.theme-glass body.wl-wide .sidebar-empty { color: var(--glass-ink-soft); background: transparent; border-color: transparent; }
.theme-glass body.wl-wide .sidebar-item-mode { background: var(--glass-plate); color: var(--glass-ink-soft); }
/* Status keeps its colours: on dark glass, the dark theme's own set. */
/* The words take the ink and the dot carries the colour: coloured words cannot hold 4.5:1 on every brand's film (green on a
   copper rail measured 3.4:1), and the word says the state on its own. */
.theme-glass body.wl-wide.dml-ui .sidebar .status-badge { color: var(--glass-ink-soft); }
.theme-glass[data-glass-ink="light"] body.wl-wide .sidebar {
  --status-working: #8EB1FF; --status-completed: #68D391; --status-needs-you: #F2B85D; --status-failed: #FF929E; --status-muted: #ADB9CC;
  --primary: #8EB1FF; --error: #FF929E; --text-muted: var(--glass-ink-soft); --success: #68D391; --warning: #F2B85D;
}
.theme-glass body.wl-wide .sidebar .legal-links a,
.theme-glass body.wl-wide .sidebar a { color: var(--glass-ink-soft); }
.theme-glass body.wl-wide .sidebar-legal { border-top-color: var(--glass-rim); }

/* A collapsed rail leaves the name on its own capsule, with the same one-filter shape as the controls. */
.theme-glass body.wl-wide .sidebar.collapsed { flex-basis: 0; width: 0; padding: 0; box-shadow: none; }
.theme-glass body.wl-wide:has(.sidebar.collapsed) .topbar-left { position: relative; z-index: 0; }
.theme-glass body.wl-wide:has(.sidebar.collapsed) .topbar-left::before {
  content: ""; position: absolute; inset: -4px -6px; z-index: -1; border-radius: 999px; pointer-events: none;
  background: var(--glass-solid); box-shadow: var(--liquid-specular), var(--liquid-lift);
}
.theme-glass body.wl-wide .sidebar-expand { background: transparent; border: 0; color: var(--glass-ink-soft); flex-basis: 22px; width: 22px; }

/* ---- the working session: the composer docks over the page ---- */
.theme-glass .job-page .job-reply,
.theme-glass .job-page .job-followup,
.theme-glass .job-page .job-password,
.theme-glass .job-page .job-answers {
  position: sticky; bottom: 14px; z-index: 5; box-sizing: border-box;
  margin-top: 22px; padding: 14px 16px 16px; border: 0; border-radius: var(--glass-radius);
  background: var(--glass-solid); color: var(--glass-ink);
  box-shadow: var(--liquid-specular), var(--liquid-lift);
}
.theme-glass .job-page .job-answers { position: static; }
/* A box that answers the agent's question stays in the flow too, so the question above it is never under the dock
   on first view (GLL1, seen at 1024x768). The approval's change box keeps docking over the plan. */
.theme-glass .job-page .job-reply[data-answers-question] { position: static; }
/* The approval and password boxes dock at the pane's foot. Sticky cannot rise above its own section's top, so on a
   768-high window the box hung below the edge with its buttons cut off until the page scrolled (GLL1 resume 2). The
   section steps out of the box tree so the docks stick within the whole page column; its top gap moves to its heading.
   Hidden sections stay hidden (the rule needs :not([hidden])). A phone keeps the box in its section: docked 80 px up
   over the launcher, a 200 px box would sit over the progress steps on first view. */
@media (min-width: 721px) {
  .theme-glass .job-page #job-needs:not([hidden]) { display: contents; }
  .theme-glass .job-page #job-needs:not([hidden]) > h2 { margin-top: 40px; }
}
.theme-glass .job-page .job-reply-label,
.theme-glass .job-page .job-password-question,
.theme-glass .job-page .job-answer-label { color: var(--glass-ink); }
.theme-glass .job-page .job-answer-files { color: var(--glass-ink-soft); }
.theme-glass .job-page .job-answer { border-top-color: var(--glass-rim); }
/* The field is the plate under the words, and it is only as tall as what is in it, so the dock never buries the page. */
.theme-glass .job-page .job-reply .job-input,
.theme-glass .job-page .job-followup .job-input,
.theme-glass .job-page .job-password .job-input,
.theme-glass .job-page .job-answers .job-input {
  background: #fff; color: #16202e; border-color: rgba(var(--glass-ink-rgb), .16); border-radius: var(--glass-control-radius);
  field-sizing: content; max-height: 32vh;
}
.theme-glass .job-page .job-attached { color: var(--glass-ink-soft); }
.theme-glass .job-page .job-reply .btn.primary,
.theme-glass .job-page .job-followup .btn.primary,
.theme-glass .job-page .job-password .btn.primary,
.theme-glass .job-page .job-answers .btn.primary { background: var(--glass-action); color: var(--glass-action-fg); border-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28); }
.theme-glass .job-page .job-reply .btn.ghost,
.theme-glass .job-page .job-followup .btn.ghost,
.theme-glass .job-page .job-password .btn.ghost { background: transparent; color: var(--glass-ink); border-color: rgba(var(--glass-ink-rgb), .42); }
.theme-glass .job-page .job-reply .btn:disabled,
.theme-glass .job-page .job-followup .btn:disabled,
.theme-glass .job-page .job-password .btn:disabled,
.theme-glass .job-page .job-answers .btn:disabled { opacity: 1; background: transparent; color: var(--glass-ink-soft); border-color: var(--glass-rim); box-shadow: none; }

/* ---- what floats: menus, the tenant picker, sheets ---- */
.theme-glass .help-menu {
  background: var(--glass-solid); color: var(--glass-ink); border: 0;
  border-radius: var(--glass-radius); box-shadow: var(--liquid-specular), var(--liquid-lift);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.theme-glass .help-menu-item { border-radius: var(--glass-control-radius); color: var(--glass-ink); }
.theme-glass[data-theme] .help-menu-item:hover,
.theme-glass[data-theme] .help-menu-item:focus-visible { background: rgba(var(--glass-ink-rgb), .12); color: var(--glass-ink); }
.theme-glass .help-menu-item + .help-menu-item { border-top-color: var(--glass-rim); }
.theme-glass .help-menu-icon { color: var(--glass-ink-soft); }
.theme-glass .help-menu-title { color: var(--glass-ink); }
.theme-glass .help-menu-sub { color: var(--glass-ink-soft); }
.theme-glass .help-menu * { --text-muted: var(--glass-ink-soft); }

/* ---- sign-in and its result pages: the card is the glass, the field is the page ---- */
/* The rim catches the light top left and bottom right: a gradient rim drawn with a mask (the gradient-rim cards in Aceternity
   UI and Magic UI, on Pat's list of Nov 2, ported to CSS; nothing is installed). The one marquee surface; the bars keep the plain rim. */
.theme-glass .is-brand .signin,
.theme-glass body:not(.is-brand):not(.dml-ui) .card { position: relative; }
.theme-glass .is-brand .signin::after,
.theme-glass body:not(.is-brand):not(.dml-ui) .card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, var(--liquid-rim), transparent 34%, transparent 62%, var(--glass-rim));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.theme-glass body.is-brand { background: var(--glass-ground), var(--glass-ground-base); }
.theme-glass .is-brand .ground { background: none; }
.theme-glass .brand-lockup { color: var(--glass-ink); }
.theme-glass .brand-lockup-sub { color: var(--glass-ink-soft); }
.theme-glass[data-glass-logo="bare"] .brand-lockup-logo { background: transparent; }
.theme-glass .is-brand .signin {
  background: var(--glass-solid); color: var(--glass-ink); border: 0;
  border-radius: 24px; box-shadow: var(--liquid-specular), var(--liquid-lift);
}
.theme-glass .is-brand .signin h1,
.theme-glass .is-brand .signin .field-label { color: var(--glass-ink); }
.theme-glass .is-brand .signin .signin-lede,
.theme-glass .is-brand .signin .hint { color: var(--glass-ink-soft); }
.theme-glass .is-brand .signin input[type="email"] { background: #fff; color: #111; border-color: transparent; border-radius: 12px; }
.theme-glass .is-brand .btn-continue { background: var(--glass-action); color: var(--glass-action-fg); border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28); }
.theme-glass .is-brand .btn-continue:hover { background: var(--glass-action-hover); }
.theme-glass .is-brand .btn-continue:focus-visible { outline-color: var(--glass-ink); }
/* Words on the field itself take the full ink: only the ink is held at AA on every part of every field. */
.theme-glass .is-brand .foot .legal-links a,
.theme-glass .is-brand .brand-lockup-sub { color: var(--glass-ink); }

.theme-glass body:not(.is-brand):not(.dml-ui) { background: var(--glass-ground), var(--glass-ground-base); color: var(--glass-ink); }
.theme-glass body:not(.is-brand):not(.dml-ui) .card {
  background: var(--glass-solid); color: var(--glass-ink); border: 0; border-radius: 24px;
  box-shadow: var(--liquid-specular), var(--liquid-lift);
}
.theme-glass body:not(.is-brand):not(.dml-ui) .card h1 { color: var(--glass-ink); }
.theme-glass body:not(.is-brand):not(.dml-ui) .card p,
.theme-glass body:not(.is-brand):not(.dml-ui) .card .alt,
.theme-glass body:not(.is-brand):not(.dml-ui) .card .brand { color: var(--glass-ink-soft); }
.theme-glass body:not(.is-brand):not(.dml-ui) .card p strong,
.theme-glass body:not(.is-brand):not(.dml-ui) .card p a,
.theme-glass body:not(.is-brand):not(.dml-ui) .card .keep,
.theme-glass body:not(.is-brand):not(.dml-ui) .card .alt a { color: var(--glass-ink); }
.theme-glass body:not(.is-brand):not(.dml-ui) .card .mark { color: var(--glass-ink); }
/* The Renaissance wordmark is artwork (identity/wordmark.py, WM2): its letters and the luminous AI follow the line's ink,
   as the typed letters did, so a light brand's card never shows white letters. */
.theme-glass body:not(.is-brand):not(.dml-ui) .card .brand .ren-wordmark path { fill: currentColor; }
.theme-glass body:not(.is-brand):not(.dml-ui) .card .btn { background: var(--glass-action); color: var(--glass-action-fg); border-radius: 12px; }
.theme-glass body:not(.is-brand):not(.dml-ui) .card .alt { border-top-color: var(--glass-rim); }
.theme-glass body:not(.is-brand):not(.dml-ui) .card .legal { --legal-link: var(--glass-ink-soft); }
.theme-glass body:not(.is-brand):not(.dml-ui) .card .legal a { color: var(--glass-ink-soft); }

/* ---- the glass itself: only where the browser can draw it ---- */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .theme-glass body.wl-wide .sidebar {
    background: var(--liquid-sheen), var(--liquid-rail);
    -webkit-backdrop-filter: var(--liquid); backdrop-filter: var(--liquid);
  }
  .theme-glass body.wl-wide:has(.sidebar.collapsed) .topbar-left::before {
    background: var(--liquid-sheen), var(--liquid-tint);
    -webkit-backdrop-filter: var(--liquid); backdrop-filter: var(--liquid);
  }
  /* In Chromium the capsule's rim also bends the page (--capsule-lens, baked by client-glass.js); the frost is the baseline. */
  .theme-glass body.wl-wide.dml-ui .topbar-right::before {
    background: var(--liquid-sheen), var(--liquid-tint);
    -webkit-backdrop-filter: var(--capsule-lens, var(--liquid)); backdrop-filter: var(--capsule-lens, var(--liquid));
  }
  @media (min-width: 901px) {
    .theme-glass body.wl-wide.dml-ui .glass-island,
    .theme-glass body.wl-wide.dml-ui .glass-island:hover {
      background: var(--liquid-sheen), var(--liquid-tint);
      -webkit-backdrop-filter: var(--liquid); backdrop-filter: var(--liquid);
    }
  }
  .theme-glass .job-page .job-reply,
  .theme-glass .job-page .job-followup,
  .theme-glass .job-page .job-password,
  .theme-glass .job-page .job-answers {
    background: var(--liquid-sheen), var(--glass-sheet);
    -webkit-backdrop-filter: var(--liquid); backdrop-filter: var(--liquid);
  }
  .theme-glass .help-menu {
    background: var(--liquid-sheen), var(--glass-float);
    -webkit-backdrop-filter: var(--liquid); backdrop-filter: var(--liquid);
  }
  .theme-glass .is-brand .signin,
  .theme-glass body:not(.is-brand):not(.dml-ui) .card {
    background: var(--liquid-sheen), var(--glass-sheet);
    -webkit-backdrop-filter: var(--liquid); backdrop-filter: var(--liquid);
  }
}

/* The approval box docks over the plan, so its label, field and buttons read on the look's opaque solid, never on the
   plan scrolling beneath it: a capture with no blur drawn showed the plan through them (Astra, GLL1-port resume 2). The
   rim, shape, theme and dock stay; only this state changes, and the other boxes keep the translucent sheet. */
.theme-glass .job-page .job-reply:has(#job-approve:not([hidden])) {
  background: var(--liquid-sheen), var(--glass-solid);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* Its field keeps three lines, vanilla's rows="3": an engine that sizes an empty field to its text and not its hint drew
   one line and cut the example off (WebKit capture, resume 2). It still grows with what is typed, up to 32vh. */
.theme-glass .job-page .job-reply:has(#job-approve:not([hidden])) .job-input { min-height: calc(4.5em + 22px); }

/* ---- phone and tablet: no rail at rest; the name and controls are one bar over the sheet ---- */
@media (max-width: 900px) {
  :root.theme-glass { --topbar-h: 68px; --glass-gap: 6px; --glass-bar-clear: 74px; }
  /* The count of runs waiting becomes a mark on the bar (client-glass.js copies the number); the words stay for readers. */
  .theme-glass body.wl-wide .needs-you-count { font-size: 0; color: var(--glass-action-fg); }
  .theme-glass body.wl-wide .needs-you-count::after {
    content: attr(data-count); display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box;
    border-radius: 999px; background: var(--glass-action); font-size: 11px; font-weight: 650; line-height: 1;
  }
  .theme-glass body.wl-wide .topbar .brand-text { display: flex; min-width: 0; overflow: hidden; }
  .theme-glass body.wl-wide .topbar .brand-short { display: none; }
  .theme-glass body.wl-wide .topbar .brand-sub { display: none; }
  .theme-glass body.wl-wide .topbar .brand-name { white-space: normal; font-size: .76rem; line-height: 1.12; overflow-wrap: normal; word-break: normal; hyphens: manual; }
  .theme-glass body.wl-wide .topbar .brand-pill { min-width: 0; }
  .theme-glass body.wl-wide .topbar .icon-btn { width: 30px; height: 34px; min-width: 30px; }
  .theme-glass body.wl-wide.dml-ui .topbar-right { gap: 0; }
  .theme-glass body.wl-wide .topbar .brand-name { overflow: visible; text-overflow: clip; }
  .theme-glass body.wl-wide.dml-ui #screen-upload.active { padding-top: calc(var(--glass-bar-clear) + 10px); }
  .theme-glass body.wl-wide.dml-ui .home-card .upload-card-content { background: transparent; }
  .theme-glass .glass-island { max-width: min(30vw, 240px); }
  .theme-glass body.wl-wide .app-shell { padding: var(--glass-gap); }
  .theme-glass body.wl-wide .topbar {
    top: calc(var(--glass-gap) + 6px); left: calc(var(--glass-gap) + 6px); right: calc(var(--glass-gap) + 6px);
    min-height: 52px; padding: 4px 6px 4px 8px; flex-wrap: nowrap; pointer-events: auto;
    border-radius: 18px;
  }
  .theme-glass body.wl-wide .topbar::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
    background: var(--glass-solid); box-shadow: var(--liquid-specular), var(--liquid-lift);
  }
  .theme-glass body.wl-wide.dml-ui .topbar-right { padding: 0; flex: 0 1 auto; }
  .theme-glass body.wl-wide.dml-ui .topbar-right::before { content: none; }
  .theme-glass body.wl-wide .topbar-left { flex: 1 1 auto; min-width: 0; }
  .theme-glass body.wl-wide .sidebar {
    top: calc(var(--glass-gap) + 66px); bottom: var(--glass-gap); left: var(--glass-gap); padding-top: 4px;
    background: var(--glass-solid);
  }
  .theme-glass .sidebar-backdrop { top: 0; }
  .theme-glass body.wl-wide .sidebar-expand { display: none !important; }
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .theme-glass body.wl-wide .topbar::before {
      background: var(--liquid-sheen), var(--liquid-tint);
      -webkit-backdrop-filter: var(--liquid); backdrop-filter: var(--liquid);
    }
    /* The drawer holds small coloured status words over any content: measured, the float tier left them at 3.3:1. */
    .theme-glass body.wl-wide .sidebar { background: color-mix(in srgb, var(--glass-solid) 95%, transparent); }
  }
}

/* A phone has no room for the words: the island is its step rail, and the head is a tap away. The launcher keeps its
   corner, so the composer rides above it. */
@media (max-width: 640px) {
  .theme-glass .glass-island { padding: 0 8px; }
  .theme-glass body.wl-wide .topbar:has(#glass-island:not([hidden])) .brand-text { display: none; }  /* The island says what the bar's name would: there is room for one. */
  .theme-glass body.wl-wide .topbar .icon-btn:focus-visible { outline-offset: -2px; border-radius: 10px; }
  .theme-glass .glass-island-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .theme-glass .job-page .job-reply,
  .theme-glass .job-page .job-followup,
  .theme-glass .job-page .job-password { bottom: 80px; }
  .theme-glass .job-page .job-form-actions .btn { flex: 1 1 0; }
}

/* ---- motion that explains: a menu grows from its button ---- */
@media (prefers-reduced-motion: no-preference) {
  .theme-glass .help-menu:not([hidden]) { transform-origin: top right; animation: glass-grow 180ms var(--glass-ease); }
  @keyframes glass-grow { from { opacity: 0; transform: scale(.94) translateY(-6px); } }
  /* A fade and a small settle, the blur-fade of Magic UI without its blur: a filter never animates here. */
  .theme-glass .glass-island:not([hidden]) { animation: glass-fade 200ms var(--glass-ease); }
  @keyframes glass-fade { from { opacity: 0; scale: .96; } }
}

/* ---- settings: the opaque scrim, the contrast variant, forced colours ---- */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
  .theme-glass body.wl-wide .sidebar,
  .theme-glass body.wl-wide.dml-ui .topbar-right::before,
  .theme-glass body.wl-wide .topbar::before,
  .theme-glass body.wl-wide:has(.sidebar.collapsed) .topbar-left::before,
  .theme-glass body.wl-wide.dml-ui .glass-island,
  .theme-glass body.wl-wide.dml-ui .glass-island:hover,
  .theme-glass .job-page .job-reply,
  .theme-glass .job-page .job-followup,
  .theme-glass .job-page .job-password,
  .theme-glass .job-page .job-answers,
  .theme-glass .help-menu,
  .theme-glass .is-brand .signin,
  .theme-glass body:not(.is-brand):not(.dml-ui) .card {
    background: var(--glass-solid);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .theme-glass body.wl-wide .screen-area::before { content: none; }
  .theme-glass .is-brand .signin::after,
  .theme-glass body:not(.is-brand):not(.dml-ui) .card::after { content: none; }
}
.glass-lens { position: absolute; }
@media (prefers-contrast: more) {
  :root.theme-glass { --glass-ink: var(--glass-solid-ink); --glass-ink-soft: var(--glass-solid-ink); --glass-rim: var(--glass-solid-ink); --liquid-specular: inset 0 0 0 1px var(--glass-solid-ink); }
}
@media (forced-colors: active) {
  .theme-glass body.wl-wide .sidebar,
  .theme-glass .job-page .job-reply,
  .theme-glass .job-page .job-reply:has(#job-approve:not([hidden])),
  .theme-glass .job-page .job-followup,
  .theme-glass .help-menu,
  .theme-glass .is-brand .signin { background: Canvas; color: CanvasText; border: 1px solid CanvasText; }
  .theme-glass body.wl-wide.dml-ui .topbar-right::before,
  .theme-glass body.wl-wide .topbar::before { background: Canvas; border: 1px solid CanvasText; }
  .theme-glass body.wl-wide.dml-ui .glass-island { background: Canvas; color: CanvasText; border: 1px solid CanvasText; }
  .theme-glass .glass-island-steps i { forced-color-adjust: none; box-shadow: inset 0 0 0 1.5px CanvasText; }
  .theme-glass .glass-island-steps i[data-state="done"],
  .theme-glass .glass-island-steps i[data-state="active"],
  .theme-glass .glass-island-steps i[data-state="waiting"],
  .theme-glass .glass-island-steps i[data-state="halted"] { background: CanvasText; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-glass body.wl-wide .screen-area::before { transition: none; }
}