/* Bryta CSS (D44, D46, D49). One statement fixes the cascade order for every stylesheet on the
   page: base layers first, then module stylesheets in @layer modules.<id>. The compiled theme
   (/_theme/{hash}.css) is unlayered and sets only --b-* tokens, so its values always win. No rule
   in this framework sets a --b-* property; private variables use --_name. Mobile first: written
   for 360px and grown with min-width queries. Source files are concatenated in ordinal order. */
@layer bryta.reset, bryta.base, bryta.layout, bryta.components, bryta.motion, bryta.utilities, modules;

@layer bryta.reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
  ul, ol { margin: 0; padding: 0; list-style: none; }
  img, svg, video, canvas { display: block; max-width: 100%; }
  svg.b-icon { display: inline-block; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; }
  table { border-collapse: collapse; }
  [hidden] { display: none; }
  dialog { padding: 0; }

  @media (forced-colors: active) {
    .b-icon { forced-color-adjust: auto; }
  }
}

@layer bryta.base {
  @font-face {
    font-family: "Inter";
    src: url(inter-latin.53d896196f962d9b.woff2) format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }

  html { color-scheme: light dark; scroll-padding-top: var(--b-layout-topbar); }

  body {
    min-height: 100vh;
    min-height: 100dvh;
    font-family: var(--b-font-body);
    font-size: var(--b-size-md);
    font-weight: var(--b-weight-body);
    line-height: var(--b-leading-body);
    font-feature-settings: "cv11", "ss01";
    color: var(--b-color-on-surface);
    background: var(--b-color-surface);
    -webkit-font-smoothing: antialiased;
    transition: background-color var(--b-motion-base) var(--b-easing-standard), color var(--b-motion-base) var(--b-easing-standard);
  }

  h1, h2, h3, h4 {
    font-family: var(--b-font-heading);
    font-weight: var(--b-weight-heading);
    letter-spacing: var(--b-tracking-heading);
    line-height: var(--b-leading-heading);
    text-wrap: balance;
  }
  h1 { font-size: var(--b-size-title); }
  h2 { font-size: var(--b-size-heading); }
  h3 { font-size: var(--b-size-md); }

  a { color: var(--b-color-link); text-underline-offset: 0.2em; }
  a:hover { text-decoration-thickness: 2px; }

  :focus-visible {
    outline: var(--b-border-focus-width) solid var(--b-color-focus-ring);
    outline-offset: var(--b-border-focus-offset);
  }

  ::selection { background: var(--b-color-primary-subtle); color: var(--b-color-on-primary-subtle); }

  .b-icon {
    width: var(--b-size-icon);
    height: var(--b-size-icon);
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.25em;
  }

  @media (forced-colors: active) {
    :focus-visible { outline-color: Highlight; }
  }
}

@layer bryta.layout {
  /* ---- Skip link ---- */
  .b-skip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    min-height: max(var(--b-size-touch-target), var(--b-size-control));
    inset-inline-start: var(--b-space-2);
    top: -10rem;
    z-index: 100;
    padding: var(--b-space-2) var(--b-space-4);
    background: var(--b-color-primary);
    color: var(--b-color-on-primary);
    border-radius: var(--b-radius-md);
  }
  .b-skip:focus { top: var(--b-space-2); }

  /* ---- App frame: sidebar + frame (top bar and main), bottom nav on phones ---- */
  .b-app { --_sidebar: var(--b-layout-sidebar); }
  .b-app[data-b-nav="collapsed"] { --_sidebar: var(--b-layout-sidebar-collapsed); }

  .b-frame { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; min-height: 100dvh; }

  .b-sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: var(--b-space-4);
    width: min(var(--b-layout-sidebar), 85vw);
    padding: var(--b-space-sidebar);
    padding-top: calc(var(--b-space-sidebar) + env(safe-area-inset-top));
    overflow-y: auto;
    overscroll-behavior: contain;
    color: var(--b-color-on-sidebar);
    background: var(--b-color-sidebar);
    border-inline-end: var(--b-border-width) solid var(--b-color-sidebar-border);
    box-shadow: var(--b-shadow-menu);
    transform: translateX(-105%);
    visibility: hidden;
    transition: transform var(--b-motion-slow) var(--b-easing-emphasized), visibility var(--b-motion-slow) linear;
  }
  .b-sidebar.b-open { transform: none; visibility: visible; }

  .b-backdrop {
    position: fixed;
    inset: 0;
    z-index: 35;
    background: color-mix(in srgb, var(--b-color-overlay) 45%, transparent);
  }

  .b-sidebar-foot { margin-top: auto; display: none; }

  @media (min-width: 48rem) {
    .b-app { display: grid; grid-template-columns: var(--_sidebar) minmax(0, 1fr); transition: grid-template-columns var(--b-motion-base) var(--b-easing-standard); }
    .b-sidebar {
      position: sticky;
      top: 0;
      grid-column: 1;
      grid-row: 1;
      width: auto;
      height: 100vh;
      height: 100dvh;
      visibility: visible;
      transform: none;
      border-inline-end: 0;
      box-shadow: none;
      transition: none;
      view-transition-name: b-sidebar;
    }
    .b-frame { grid-column: 2; grid-row: 1; border-inline-start: var(--b-border-width) solid var(--b-color-sidebar-border); }
    .b-backdrop { display: none; }
    .b-sidebar-foot { display: block; }
  }

  /* ---- Switcher ---- */
  .b-switcher { position: relative; }
  .b-switcher-button {
    display: flex;
    align-items: center;
    gap: var(--b-space-3);
    width: 100%;
    min-height: max(var(--b-size-touch-target), var(--b-size-control));
    padding: var(--b-space-2);
    color: inherit;
    text-align: start;
    background: transparent;
    border: 0;
    border-radius: var(--b-radius-lg);
    transition: background-color var(--b-motion-fast) var(--b-easing-standard);
  }
  .b-switcher-button:hover, .b-switcher-button[aria-expanded="true"] { background: var(--b-color-surface-hover); }
  .b-app-mark {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: var(--b-size-avatar);
    height: var(--b-size-avatar);
    border-radius: var(--b-radius-md);
    background: var(--b-color-primary);
    color: var(--b-color-on-primary);
    font-weight: var(--b-weight-heading);
    font-size: var(--b-size-sm);
    letter-spacing: var(--b-tracking-heading);
  }
  .b-switcher-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: var(--b-leading-control); }
  .b-switcher-app { font-weight: var(--b-weight-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .b-switcher-context { color: var(--b-color-on-sidebar-muted); font-size: var(--b-size-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .b-switcher .b-menu { inset-inline: 0; top: calc(100% + var(--b-space-1)); width: auto; }

  /* ---- Navigation ---- */
  .b-nav { display: flex; flex-direction: column; gap: var(--b-space-4); }
  .b-nav-group { display: flex; flex-direction: column; gap: var(--b-space-half); }
  .b-nav-heading {
    padding: 0 var(--b-space-nav-x);
    margin-bottom: var(--b-space-1);
    color: var(--b-color-on-sidebar-muted);
    font-size: var(--b-size-xs);
    font-weight: var(--b-weight-strong);
    letter-spacing: var(--b-tracking-caps);
    text-transform: uppercase;
  }
  .b-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--b-space-3);
    min-height: max(var(--b-size-touch-target), var(--b-size-control));
    padding: 0 var(--b-space-nav-x);
    border-radius: var(--b-radius-nav);
    color: var(--b-color-on-sidebar);
    font-weight: var(--b-weight-medium);
    text-decoration: none;
    transition: background-color var(--b-motion-fast) var(--b-easing-standard), color var(--b-motion-fast) var(--b-easing-standard);
  }
  .b-nav-item .b-icon { color: var(--b-color-on-sidebar-muted); transition: color var(--b-motion-fast) var(--b-easing-standard); }
  .b-nav-item:hover { background: var(--b-color-surface-hover); text-decoration: none; }
  .b-nav-item[aria-current="page"] { background: var(--b-color-sidebar-active); color: var(--b-color-on-sidebar-active); }
  .b-nav-item[aria-current="page"] .b-icon { color: currentColor; }
  .b-nav-item[aria-current="page"]::before {
    content: "";
    position: absolute;
    inset-block: var(--b-space-2);
    inset-inline-start: 0;
    width: 3px;
    border-radius: var(--b-radius-full);
    background: var(--b-color-primary);
    view-transition-name: b-nav-indicator;
  }
  .b-nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


  @media (min-width: 48rem) {
    .b-app[data-b-nav="collapsed"] .b-nav-label,
    .b-app[data-b-nav="collapsed"] .b-nav-heading,
    .b-app[data-b-nav="collapsed"] .b-switcher-text,
    .b-app[data-b-nav="collapsed"] .b-switcher-button > .b-icon,
    .b-app[data-b-nav="collapsed"] .b-nav-toggle .b-btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .b-app[data-b-nav="collapsed"] .b-nav-item,
    .b-app[data-b-nav="collapsed"] .b-switcher-button { justify-content: center; padding-inline: 0; }
  }

  /* ---- Top bar ---- */
  .b-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: var(--b-space-2);
    min-height: calc(var(--b-layout-topbar) + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) var(--b-space-topbar-x) 0;
    color: var(--b-color-on-topbar);
    background: var(--b-color-topbar);
    border-bottom: var(--b-border-width) solid var(--b-color-border);
    view-transition-name: b-topbar;
  }
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .b-topbar {
      background: color-mix(in srgb, var(--b-color-topbar) 85%, transparent);
      -webkit-backdrop-filter: blur(12px) saturate(1.4);
      backdrop-filter: blur(12px) saturate(1.4);
    }
  }
  /* The title wraps at word boundaries (two lines at most) instead of cutting a word with an ellipsis. */
  .b-topbar-title {
    flex: 1;
    min-width: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: break-word;
    hyphens: auto;
    line-height: var(--b-leading-heading);
    font-weight: var(--b-weight-strong);
  }
  .b-topbar-actions { display: flex; align-items: center; gap: var(--b-space-1); margin-inline-start: auto; }

  .b-palette-trigger { gap: var(--b-space-2); color: var(--b-color-on-surface-muted); }
  .b-palette-trigger .b-palette-hint { display: none; }
  @media (min-width: 48rem) {
    .b-palette-trigger { min-width: 14rem; justify-content: flex-start; }
    .b-palette-trigger .b-palette-hint { display: inline; }
    .b-palette-trigger .b-kbd-group { margin-inline-start: auto; }
  }

  /* ---- Main ---- */
  .b-main {
    flex: 1;
    min-width: 0;
    padding: var(--b-space-page);
    padding-bottom: calc(var(--b-layout-bottom-nav) + var(--b-space-8) + env(safe-area-inset-bottom));
    color: var(--b-color-on-surface);
    background: var(--b-color-surface);
    font-family: var(--b-font-body);
    font-size: var(--b-size-md);
    font-weight: var(--b-weight-body);
    line-height: var(--b-leading-body);
    view-transition-name: b-main;
  }
  .b-main:focus { outline: none; }
  /* A page with "chrome": "minimal" (a visitor's page, such as a public menu): no sidebar, top bar or bottom navigation. */
  .b-app[data-b-chrome="minimal"] { display: block; }
  .b-app[data-b-chrome="minimal"] .b-frame { border-inline-start: 0; }
  .b-app[data-b-chrome="minimal"] .b-main { padding-bottom: calc(var(--b-space-8) + env(safe-area-inset-bottom)); }
  @media (min-width: 48rem) {
    .b-main { padding: var(--b-space-page-wide); }
  }

  .b-page { display: flex; flex-direction: column; gap: var(--b-space-section); width: 100%; max-width: var(--b-layout-content-max); margin-inline: auto; }

  .b-page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--b-space-4); }
  .b-page-heading { display: flex; flex-direction: column; gap: var(--b-space-1); min-width: 0; }
  .b-page-title { font-size: var(--b-size-title); }
  .b-page-description { color: var(--b-color-on-surface-muted); max-width: 65ch; }
  .b-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--b-space-2); }
  @media (max-width: 40rem) {
    .b-page-actions { width: 100%; }
  }

  /* ---- Layouts ---- */
  .b-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--b-space-section); align-items: start; }
  .b-region { display: flex; flex-direction: column; gap: var(--b-space-stack); min-width: 0; }
  /* The page header's actions sit in a row and wrap (the region class alone would stack them). */
  .b-page-actions.b-region { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--b-space-2); }
  @media (min-width: 64rem) {
    .b-layout-two-column { grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr); }
    .b-layout-register { grid-template-columns: minmax(0, 3fr) minmax(22rem, 2fr); }
    .b-layout-master-detail { grid-template-columns: minmax(16rem, 1fr) minmax(0, 2fr); }
    .b-layout-register .b-region-side {
      position: sticky;
      top: calc(var(--b-layout-topbar) + var(--b-space-4));
      padding: var(--b-space-card);
      background: var(--b-color-card);
      color: var(--b-color-on-card);
      border: var(--b-border-card) solid var(--b-color-border);
      border-radius: var(--b-radius-card);
      box-shadow: var(--b-shadow-card);
    }
  }
  .b-layout-dashboard .b-region-header { display: grid; gap: var(--b-space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

  /* ---- Bottom navigation (phones) ---- */
  .b-bottom-nav {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 30;
    padding: var(--b-space-1) var(--b-space-2) calc(var(--b-space-1) + env(safe-area-inset-bottom));
    background: var(--b-color-surface-raised);
    border-top: var(--b-border-width) solid var(--b-color-border);
    box-shadow: var(--b-shadow-menu);
    view-transition-name: b-bottom-nav;
  }
  .b-bottom-nav ul { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--b-space-1); }
  .b-bottom-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--b-space-half);
    width: 100%;
    min-height: max(var(--b-layout-bottom-nav) - var(--b-space-2), var(--b-size-touch-target));
    padding: var(--b-space-1);
    color: var(--b-color-on-surface-muted);
    font-size: var(--b-size-xs);
    font-weight: var(--b-weight-medium);
    text-decoration: none;
    background: transparent;
    border: 0;
    border-radius: var(--b-radius-md);
  }
  .b-bottom-pill { display: grid; place-items: center; width: 3.5rem; height: 2rem; border-radius: var(--b-radius-full); transition: background-color var(--b-motion-fast) var(--b-easing-standard); }
  .b-bottom-item[aria-current="page"] { color: var(--b-color-on-surface); }
  .b-bottom-item[aria-current="page"] .b-bottom-pill { background: var(--b-color-sidebar-active); color: var(--b-color-on-sidebar-active); }
  /* Labels wrap between words (two short lines) and long words hyphenate; nothing is cut with an ellipsis. */
  .b-bottom-label { max-width: 100%; white-space: normal; overflow-wrap: break-word; hyphens: auto; text-align: center; line-height: 1.15; }
  @media (max-width: 24rem) {
    .b-bottom-nav { padding-inline: var(--b-space-1); }
    .b-bottom-nav ul { gap: 0; }
    .b-bottom-item { padding-inline: 0; font-size: min(var(--b-size-xs), 3vw); }
    .b-bottom-pill { width: 2.75rem; }
    .b-topbar { gap: var(--b-space-1); padding-inline: var(--b-space-2); }
  }
  @media (min-width: 48rem) {
    .b-bottom-nav { display: none; }
    .b-main { padding-bottom: var(--b-space-page-wide); }
  }

  /* ---- Live region, helpers, offline banner ---- */
  .b-live { position: absolute; }
  .b-helpers { display: none; }
  .b-offline {
    position: sticky;
    top: calc(var(--b-layout-topbar) + env(safe-area-inset-top));
    z-index: 25;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--b-space-2);
    padding: var(--b-space-2) var(--b-space-4);
    color: var(--b-color-on-warning-subtle);
    background: var(--b-color-warning-subtle);
    border-bottom: var(--b-border-width) solid var(--b-color-border);
    font-size: var(--b-size-sm);
    font-weight: var(--b-weight-medium);
  }
  .b-offline[hidden] { display: none; }

  /* ---- Status pages (404, 403) inside the shell ---- */
  .b-status-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--b-space-3);
    max-width: var(--b-layout-empty);
    margin: var(--b-space-12) auto;
    text-align: center;
  }
  .b-status-code {
    color: var(--b-color-on-surface-muted);
    font-size: var(--b-size-display);
    font-weight: var(--b-weight-stat);
    letter-spacing: var(--b-tracking-display);
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }
  .b-status-page p { color: var(--b-color-on-surface-muted); }
  .b-status-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--b-space-2); margin-top: var(--b-space-2); }

  @media (forced-colors: active) {
    .b-nav-item[aria-current="page"] { outline: 2px solid Highlight; }
    .b-bottom-item[aria-current="page"] { outline: 2px solid Highlight; }
  }
}

@layer bryta.components {
  /* ---- Buttons ---- */
  .b-btn {
    --_btn-bg: var(--b-color-button-secondary);
    --_btn-fg: var(--b-color-on-button-secondary);
    --_btn-border: var(--b-color-border);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--b-space-inline);
    min-height: max(var(--b-size-touch-target), var(--b-size-control));
    padding: 0 var(--b-space-button-x);
    font: inherit;
    font-weight: var(--b-weight-button);
    line-height: var(--b-leading-control);
    white-space: nowrap;
    color: var(--_btn-fg);
    background: var(--_btn-bg);
    border: var(--b-border-button) solid var(--_btn-border);
    border-radius: var(--b-radius-button);
    box-shadow: var(--b-shadow-button);
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition:
      background-color var(--b-motion-fast) var(--b-easing-standard),
      border-color var(--b-motion-fast) var(--b-easing-standard),
      box-shadow var(--b-motion-fast) var(--b-easing-standard),
      transform var(--b-motion-fast) var(--b-easing-standard),
      outline-offset var(--b-motion-fast) var(--b-easing-standard);
  }
  .b-btn:hover { background: color-mix(in srgb, var(--_btn-bg) 92%, var(--_btn-fg)); text-decoration: none; }
  .b-btn:active:not(:disabled, [aria-disabled="true"]) { transform: scale(var(--b-scale-press)); }
  .b-btn:focus-visible { outline-offset: 0; }
  .b-btn:focus-visible:not(:active) { outline-offset: var(--b-border-focus-offset); }
  .b-btn-secondary { --_btn-bg: var(--b-color-button-secondary); --_btn-fg: var(--b-color-on-button-secondary); }
  .b-btn-primary { --_btn-bg: var(--b-color-primary); --_btn-fg: var(--b-color-on-primary); --_btn-border: var(--b-color-primary); }
  .b-btn-primary:hover { background: var(--b-color-primary-hover); border-color: var(--b-color-primary-hover); }
  .b-btn-primary:active { background: var(--b-color-primary-active); border-color: var(--b-color-primary-active); }
  .b-btn-danger { --_btn-bg: var(--b-color-danger); --_btn-fg: var(--b-color-on-danger); --_btn-border: var(--b-color-danger); }
  .b-btn-ghost { --_btn-bg: transparent; --_btn-fg: var(--b-color-on-surface); --_btn-border: transparent; box-shadow: none; }
  .b-btn-ghost:hover { background: var(--b-color-surface-hover); }
  .b-btn-link { --_btn-bg: transparent; --_btn-fg: var(--b-color-link); --_btn-border: transparent; box-shadow: none; text-decoration: underline; }
  .b-btn-link:hover { background: var(--b-color-surface-hover); }
  .b-btn-sm {
    min-height: max(var(--b-size-touch-target), var(--b-size-control));
    padding: 0 var(--b-space-3);
    font-size: var(--b-size-sm);
  }
  .b-btn-lg {
    min-height: max(var(--b-size-touch-target), var(--b-size-control-large));
    padding: 0 var(--b-space-6);
    font-size: var(--b-size-lg);
  }
  .b-btn-icon {
    min-width: max(var(--b-size-touch-target), var(--b-size-control));
    min-height: max(var(--b-size-touch-target), var(--b-size-control));
    padding: 0;
  }
  .b-btn-block { width: 100%; }
  .b-btn[disabled], .b-btn[aria-disabled="true"] { opacity: var(--b-opacity-disabled); cursor: not-allowed; }
  .b-btn[aria-busy="true"] { cursor: progress; }
  .b-btn[aria-busy="true"] > .b-icon { visibility: hidden; }
  .b-btn[aria-busy="true"]::after {
    content: "";
    position: absolute;
    inset-inline-start: var(--b-space-button-x);
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: var(--b-radius-full);
    animation: b-spin var(--b-motion-countup) linear infinite;
  }
  .b-btn-icon[aria-busy="true"]::after { inset-inline-start: auto; }
  .b-btn-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

  .b-spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: var(--b-radius-full);
    animation: b-spin var(--b-motion-countup) linear infinite;
  }

  /* ---- Inputs and forms ---- */
  .b-input {
    width: 100%;
    min-height: max(var(--b-size-touch-target), var(--b-size-control));
    padding: var(--b-space-input-y) var(--b-space-input-x);
    font: inherit;
    color: var(--b-color-on-input);
    background: var(--b-color-input);
    border: var(--b-border-input) solid var(--b-color-border-strong);
    border-radius: var(--b-radius-input);
    box-shadow: var(--b-shadow-control);
    transition: border-color var(--b-motion-fast) var(--b-easing-standard), box-shadow var(--b-motion-fast) var(--b-easing-standard);
  }
  .b-input::placeholder { color: var(--b-color-on-surface-muted); opacity: 1; }
  .b-input:hover { border-color: var(--b-color-on-surface-muted); }
  .b-input:focus { border-color: var(--b-color-primary); }
  .b-input:focus-visible { outline-offset: 0; box-shadow: 0 0 0 calc(var(--b-border-focus-width) + var(--b-border-input)) var(--b-color-primary-subtle); }
  textarea.b-input { min-height: 6rem; resize: vertical; }
  select.b-input { padding-inline-end: var(--b-space-8); }
  .b-input[disabled] { opacity: var(--b-opacity-disabled); }

  .b-form { display: flex; flex-direction: column; gap: var(--b-space-stack); max-width: var(--b-layout-form); }
  .b-field { display: flex; flex-direction: column; gap: var(--b-space-1); }
  .b-field-label, .b-choices legend { font-weight: var(--b-weight-medium); font-size: var(--b-size-label); }
  .b-field-help { color: var(--b-color-on-surface-muted); font-size: var(--b-size-sm); }
  .b-required { margin-inline-start: var(--b-space-1); font-weight: var(--b-weight-body); font-size: var(--b-size-sm); color: var(--b-color-on-surface-muted); }
  .b-field-invalid .b-input { border-color: var(--b-color-danger); box-shadow: 0 0 0 var(--b-border-input) var(--b-color-danger); }
  .b-field-error { display: flex; align-items: center; gap: var(--b-space-1); color: var(--b-color-danger); font-weight: var(--b-weight-medium); font-size: var(--b-size-sm); }
  .b-check { display: flex; align-items: center; gap: var(--b-space-2); min-height: max(var(--b-size-touch-target), var(--b-size-control)); }
  .b-check input { width: 1.25rem; height: 1.25rem; accent-color: var(--b-color-primary); }
  .b-check > label { display: flex; flex: 1; align-items: center; min-height: max(var(--b-size-touch-target), var(--b-size-control)); cursor: pointer; }
  .b-choices { border: 0; padding: 0; margin: 0; }
  .b-errors {
    padding: var(--b-space-4);
    color: var(--b-color-on-danger-subtle);
    background: var(--b-color-danger-subtle);
    border: var(--b-border-width) solid var(--b-color-danger);
    border-radius: var(--b-radius-lg);
  }
  .b-errors p { font-weight: var(--b-weight-strong); }
  .b-errors ul { list-style: disc; padding-inline-start: var(--b-space-5); }
  .b-errors a { color: inherit; }
  .b-form-actions { display: flex; flex-wrap: wrap; gap: var(--b-space-2); }
  @media (max-width: 40rem) {
    .b-form-actions {
      position: sticky;
      bottom: calc(var(--b-layout-bottom-nav) + env(safe-area-inset-bottom));
      z-index: 5;
      padding-block: var(--b-space-3);
      background: var(--b-color-surface);
      border-top: var(--b-border-width) solid var(--b-color-border);
    }
    .b-form-actions .b-btn { flex: 1 1 auto; }
  }

  /* Switch: a checkbox with role=switch; the label is the target. */
  .b-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--b-space-3);
    min-height: max(var(--b-size-touch-target), var(--b-size-control));
    cursor: pointer;
  }
  .b-switch-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  /* The knob's inset and travel derive from the track and knob sizes. */
  .b-switch-track {
    --_switch-width: 2.75rem;
    --_switch-height: 1.5rem;
    --_switch-knob: 1.125rem;
    --_switch-inset: calc((var(--_switch-height) - var(--_switch-knob)) / 2);
    position: relative;
    flex-shrink: 0;
    width: var(--_switch-width);
    height: var(--_switch-height);
    border-radius: var(--b-radius-full);
    background: var(--b-color-border-strong);
    transition: background-color var(--b-motion-fast) var(--b-easing-standard);
  }
  .b-switch-track::after {
    content: "";
    position: absolute;
    top: var(--_switch-inset);
    inset-inline-start: var(--_switch-inset);
    width: var(--_switch-knob);
    height: var(--_switch-knob);
    border-radius: var(--b-radius-full);
    background: var(--b-color-surface-raised);
    box-shadow: var(--b-shadow-button);
    transition: transform var(--b-motion-base) var(--b-easing-spring);
  }
  .b-switch-input:checked + .b-switch-track { background: var(--b-color-primary); }
  .b-switch-input:checked + .b-switch-track::after { transform: translateX(calc(var(--_switch-width) - var(--_switch-knob) - 2 * var(--_switch-inset))); }
  .b-switch-input:focus-visible + .b-switch-track { outline: var(--b-border-focus-width) solid var(--b-color-focus-ring); outline-offset: var(--b-border-focus-offset); }

  /* Segmented control: radios in a pill group. */
  .b-segmented {
    display: inline-flex;
    gap: var(--b-space-half);
    padding: var(--b-space-half);
    border: var(--b-border-width) solid var(--b-color-border);
    border-radius: var(--b-radius-lg);
    background: var(--b-color-surface-sunken);
  }
  .b-segmented-option { position: relative; display: flex; }
  .b-segmented-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .b-segmented-option span, .b-segmented > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--b-space-1);
    min-height: max(var(--b-size-touch-target), var(--b-size-control));
    min-width: max(var(--b-size-touch-target), var(--b-size-control));
    padding: 0 var(--b-space-3);
    color: var(--b-color-on-surface-muted);
    font: inherit;
    font-size: var(--b-size-sm);
    font-weight: var(--b-weight-medium);
    background: transparent;
    border: 0;
    border-radius: var(--b-radius-md);
    cursor: pointer;
    transition: background-color var(--b-motion-fast) var(--b-easing-standard), color var(--b-motion-fast) var(--b-easing-standard);
  }
  .b-segmented-option input:checked + span, .b-segmented > button[aria-pressed="true"], .b-segmented > button[aria-checked="true"] {
    color: var(--b-color-on-surface);
    background: var(--b-color-surface-raised);
    box-shadow: var(--b-shadow-button);
  }
  .b-segmented-option input:focus-visible + span { outline: var(--b-border-focus-width) solid var(--b-color-focus-ring); outline-offset: var(--b-border-focus-offset); }

  /* ---- Cards, sections, surfaces ---- */
  .b-card, .b-surface, .b-section {
    padding: var(--b-space-card);
    color: var(--b-color-on-card);
    background: var(--b-color-card);
    border: var(--b-border-card) solid var(--b-color-border);
    border-radius: var(--b-radius-card);
    box-shadow: var(--b-shadow-card);
  }
  .b-card-header, .b-section-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--b-space-3); margin-bottom: var(--b-space-4); }
  .b-card-header h2, .b-section-header h2 { font-size: var(--b-size-lg); }
  .b-section-description { color: var(--b-color-on-surface-muted); font-size: var(--b-size-sm); }
  .b-section-body { display: flex; flex-direction: column; gap: var(--b-space-stack); }
  .b-section details > summary { list-style: none; cursor: pointer; min-height: max(var(--b-size-touch-target), var(--b-size-control)); }
  .b-section details > summary > .b-icon { transition: transform var(--b-motion-base) var(--b-easing-standard); }
  .b-section details:not([open]) > summary { margin-bottom: 0; }
  .b-section details:not([open]) > summary > .b-icon { transform: rotate(-90deg); }
  .b-section details > summary::-webkit-details-marker { display: none; }

  .b-detail { display: flex; flex-direction: column; gap: var(--b-space-4); }
  .b-detail > h2, .b-card > h2 { font-size: var(--b-size-lg); }
  .b-detail dl, .b-card dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--b-space-1) var(--b-space-6); }
  .b-detail dt, .b-card dt { color: var(--b-color-on-surface-muted); font-size: var(--b-size-sm); font-weight: var(--b-weight-medium); }
  .b-detail dd, .b-card dd { margin: 0 0 var(--b-space-3); overflow-wrap: anywhere; }
  @media (min-width: 48rem) {
    .b-detail dl, .b-card dl { grid-template-columns: max-content minmax(0, 1fr); }
    .b-detail dd, .b-card dd { margin: 0; }
  }

  /* ---- Lists: toolbar, grid and tiles ---- */
  .b-grid, .b-tiles { display: flex; flex-direction: column; gap: var(--b-space-3); min-width: 0; }
  .b-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--b-space-2); }
  .b-search-field { position: relative; flex: 1 1 16rem; max-width: var(--b-layout-search); }
  .b-search-field > .b-icon { position: absolute; inset-inline-start: var(--b-space-3); top: 50%; translate: 0 -50%; color: var(--b-color-on-surface-muted); pointer-events: none; }
  .b-search-field .b-input { padding-inline-start: calc(var(--b-space-3) * 2 + var(--b-size-icon)); }
  .b-search { max-width: var(--b-layout-search); }
  .b-results { position: relative; display: flex; flex-direction: column; gap: var(--b-space-3); transition: opacity var(--b-motion-base) var(--b-easing-standard); }
  .b-results[aria-busy="true"] > :not(.b-list-footer) { opacity: var(--b-opacity-busy); }
  .b-results[aria-busy="true"]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--b-radius-table);
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--b-color-skeleton-shine) 70%, transparent), transparent) 0 0 / 50% 100% no-repeat;
    animation: b-shine var(--b-motion-skeleton) linear infinite;
    pointer-events: none;
  }

  .b-table-wrap {
    position: relative;
    overflow-x: auto;
    color: var(--b-color-on-card);
    background: var(--b-color-card);
    border: var(--b-border-card) solid var(--b-color-border);
    border-radius: var(--b-radius-table);
    box-shadow: var(--b-shadow-card);
  }
  .b-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--b-size-sm); }
  .b-table th, .b-table td { padding: var(--b-space-table-y) var(--b-space-table-x); text-align: start; border-bottom: var(--b-border-width) solid var(--b-color-border); vertical-align: middle; }
  .b-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    height: 2.75rem;
    color: var(--b-color-on-table-head);
    background: var(--b-color-table-head);
    font-size: var(--b-size-xs);
    font-weight: var(--b-weight-strong);
    letter-spacing: var(--b-tracking-caps);
    text-transform: uppercase;
    white-space: nowrap;
  }
  .b-table td { height: 3rem; }
  .b-table tbody tr { transition: background-color var(--b-motion-fast) var(--b-easing-standard); }
  .b-table tbody tr:hover { background: var(--b-color-row-hover); }
  .b-table tbody tr[aria-selected="true"] { background: var(--b-color-row-selected); }
  .b-table tbody tr:last-child td { border-bottom: 0; }
  .b-table .b-num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .b-sort {
    display: inline-flex;
    align-items: center;
    gap: var(--b-space-1);
    min-height: max(var(--b-size-touch-target), var(--b-size-control));
    padding: 0;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
  }
  .b-sort .b-icon { width: 1rem; height: 1rem; opacity: 0.7; }
  .b-cell-label { display: none; }
  .b-row-actions { text-align: end; white-space: nowrap; }
  .b-table td.b-row-actions { padding-block: var(--b-space-half); }
  .b-table th:has(> .b-sort) { padding-block: 0; }
  .b-row-actions .b-btn-icon { --_btn-bg: transparent; --_btn-border: transparent; --_btn-fg: var(--b-color-on-surface-muted); box-shadow: none; }
  .b-row-actions .b-btn-icon:hover { background: var(--b-color-surface-hover); --_btn-fg: var(--b-color-on-surface); }
  .b-row-actions .b-btn-danger.b-btn-icon { --_btn-fg: var(--b-color-danger); }
  .b-row-actions .b-btn-danger.b-btn-icon:hover { background: var(--b-color-danger-subtle); }
  .b-row-actions .b-btn + .b-btn { margin-inline-start: var(--b-space-1); }
  .b-region-side .b-table th, .b-region-side .b-table td { padding: var(--b-space-2); }
  @media (hover: hover) and (pointer: fine) {
    .b-table tbody tr .b-row-actions .b-btn { opacity: 0.55; transition: opacity var(--b-motion-fast) var(--b-easing-standard); }
    .b-table tbody tr:hover .b-row-actions .b-btn, .b-table tbody tr:focus-within .b-row-actions .b-btn { opacity: 1; }
  }

  @media (max-width: 40rem) {
    .b-table-wrap { overflow: visible; border: 0; background: transparent; box-shadow: none; }
    .b-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .b-table, .b-table tbody, .b-table tr, .b-table td { display: block; width: 100%; }
    .b-table tbody { display: flex; flex-direction: column; gap: var(--b-space-3); }
    .b-table tr {
      padding: var(--b-space-3) var(--b-space-4);
      background: var(--b-color-card);
      border: var(--b-border-card) solid var(--b-color-border);
      border-radius: var(--b-radius-card);
      box-shadow: var(--b-shadow-card);
    }
    .b-table td { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--b-space-3); height: auto; border: 0; padding: var(--b-space-1) 0; overflow-wrap: anywhere; }
    .b-table td:first-child { font-size: var(--b-size-md); font-weight: var(--b-weight-strong); }
    .b-table td.b-num { text-align: end; white-space: normal; }
    .b-cell-label { display: inline; min-width: 0; color: var(--b-color-on-surface-muted); font-size: var(--b-size-sm); font-weight: var(--b-weight-body); }
    .b-table td.b-row-actions { justify-content: flex-end; padding-top: var(--b-space-2); }
  }

  .b-list-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--b-space-3); }
  .b-list-count { color: var(--b-color-on-surface-muted); font-size: var(--b-size-sm); }
  .b-pager { display: flex; align-items: center; gap: var(--b-space-2); }
  .b-page-number { color: var(--b-color-on-surface-muted); font-size: var(--b-size-sm); font-variant-numeric: tabular-nums; }

  .b-tile-list { display: grid; gap: var(--b-space-3); grid-template-columns: repeat(auto-fill, minmax(var(--b-layout-tile-min), 1fr)); }
  .b-tile {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--b-space-2);
    width: 100%;
    min-height: 6.5rem;
    padding: var(--b-space-card);
    font: inherit;
    text-align: start;
    color: var(--b-color-on-card);
    background: var(--b-color-card);
    border: var(--b-border-card) solid var(--b-color-border);
    border-radius: var(--b-radius-card);
    box-shadow: var(--b-shadow-card);
    touch-action: manipulation;
    transition: transform var(--b-motion-base) var(--b-easing-standard), box-shadow var(--b-motion-base) var(--b-easing-standard), border-color var(--b-motion-base) var(--b-easing-standard);
  }
  button.b-tile { cursor: pointer; }
  button.b-tile:hover { box-shadow: var(--b-shadow-card-hover); border-color: var(--b-color-primary); transform: scale(var(--b-scale-hover)); }
  button.b-tile:active { transform: scale(var(--b-scale-press)); }
  .b-tile-title { font-weight: var(--b-weight-strong); font-size: var(--b-size-lg); line-height: var(--b-leading-heading); }
  .b-tile-value { font-size: var(--b-size-lg); font-variant-numeric: tabular-nums; color: var(--b-color-on-surface-muted); white-space: nowrap; }

  /* ---- Stats ---- */
  .b-stats { display: grid; gap: var(--b-space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
  .b-stat {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--b-space-1) var(--b-space-3);
    padding: var(--b-space-card);
    color: var(--b-color-on-card);
    background: var(--b-color-card);
    border: var(--b-border-card) solid var(--b-color-border);
    border-radius: var(--b-radius-card);
    box-shadow: var(--b-shadow-card);
  }
  .b-stat-icon {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    place-items: center;
    width: var(--b-size-avatar-lg);
    height: var(--b-size-avatar-lg);
    border-radius: var(--b-radius-lg);
    color: var(--b-color-on-primary-subtle);
    background: var(--b-color-primary-subtle);
  }
  .b-stat > .b-icon { grid-column: 2; grid-row: 1; color: var(--b-color-on-surface-muted); }
  .b-stat-label { grid-column: 1; color: var(--b-color-on-surface-muted); font-size: var(--b-size-sm); font-weight: var(--b-weight-medium); }
  .b-stat-value {
    grid-column: 1 / -1;
    white-space: nowrap;
    font-size: var(--b-size-stat);
    font-weight: var(--b-weight-stat);
    letter-spacing: var(--b-tracking-heading);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
  }
  .b-stat-delta { grid-column: 1; justify-self: start; }

  /* ---- Badges, chips, avatars, kbd, dividers ---- */
  .b-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--b-space-1);
    padding: var(--b-space-half) var(--b-space-2);
    color: var(--b-color-on-surface);
    background: var(--b-color-surface-sunken);
    border: var(--b-border-width) solid transparent;
    border-radius: var(--b-radius-badge);
    font-size: var(--b-size-xs);
    font-weight: var(--b-weight-strong);
    line-height: var(--b-leading-body);
    white-space: nowrap;
  }
  .b-badge .b-icon { width: 0.875rem; height: 0.875rem; }
  .b-badge-primary { color: var(--b-color-on-primary-subtle); background: var(--b-color-primary-subtle); }
  .b-badge-info { color: var(--b-color-on-info-subtle); background: var(--b-color-info-subtle); }
  .b-badge-success { color: var(--b-color-on-success-subtle); background: var(--b-color-success-subtle); }
  .b-badge-warning { color: var(--b-color-on-warning-subtle); background: var(--b-color-warning-subtle); }
  .b-badge-danger { color: var(--b-color-on-danger-subtle); background: var(--b-color-danger-subtle); }
  .b-badge-neutral { color: var(--b-color-on-surface-muted); background: var(--b-color-surface-sunken); border-color: var(--b-color-border); }

  .b-chips { display: flex; flex-wrap: wrap; gap: var(--b-space-2); }
  .b-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--b-space-1);
    justify-content: center;
    min-height: max(var(--b-size-touch-target), var(--b-size-control));
    min-width: max(var(--b-size-touch-target), var(--b-size-control));
    padding: 0 var(--b-space-chip-x);
    color: var(--b-color-on-chip);
    background: var(--b-color-chip);
    border: var(--b-border-width) solid var(--b-color-border);
    border-radius: var(--b-radius-chip);
    font: inherit;
    font-size: var(--b-size-sm);
    font-weight: var(--b-weight-medium);
    cursor: pointer;
    transition: background-color var(--b-motion-fast) var(--b-easing-standard), border-color var(--b-motion-fast) var(--b-easing-standard), transform var(--b-motion-fast) var(--b-easing-standard);
  }
  .b-chip:hover { background: var(--b-color-surface-hover); }
  .b-chip:active { transform: scale(var(--b-scale-press)); }
  .b-chip[aria-pressed="true"], .b-chip[aria-checked="true"] { color: var(--b-color-on-chip-active); background: var(--b-color-chip-active); border-color: transparent; }

  .b-avatar {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: var(--b-size-avatar);
    height: var(--b-size-avatar);
    border-radius: var(--b-radius-avatar);
    color: var(--b-color-on-avatar);
    background: var(--b-color-avatar);
    font-size: var(--b-size-xs);
    font-weight: var(--b-weight-strong);
    letter-spacing: 0;
    text-transform: uppercase;
    user-select: none;
  }
  .b-avatar .b-icon { width: 1.125rem; height: 1.125rem; }
  .b-avatar-lg { width: var(--b-size-avatar-lg); height: var(--b-size-avatar-lg); font-size: var(--b-size-sm); }
  .b-person { display: inline-flex; align-items: center; gap: var(--b-space-2); }

  .b-kbd {
    display: inline-flex;
    align-items: center;
    min-width: 1.5rem;
    padding: 0 var(--b-space-1);
    color: var(--b-color-on-surface-muted);
    background: var(--b-color-surface-sunken);
    border: var(--b-border-width) solid var(--b-color-border);
    border-bottom-width: 2px;
    border-radius: var(--b-radius-sm);
    font-family: var(--b-font-body);
    font-size: var(--b-size-xs);
    font-weight: var(--b-weight-medium);
    line-height: 1.6;
  }
  .b-kbd-apple { display: none; }
  .b-apple .b-kbd-apple { display: inline-flex; }
  .b-apple .b-kbd-other { display: none; }

  .b-divider { height: 0; margin: var(--b-space-2) 0; border: 0; border-top: var(--b-border-width) solid var(--b-color-border); }

  .b-text { max-width: 70ch; }
  .b-text-lead { font-size: var(--b-size-lg); }

  /* ---- Skeletons ---- */
  .b-skeleton { display: flex; flex-direction: column; gap: var(--b-space-2); }
  .b-skeleton-line, .b-skeleton:empty {
    display: block;
    height: 0.875rem;
    border-radius: var(--b-radius-skeleton);
    background: linear-gradient(90deg, var(--b-color-skeleton) 25%, var(--b-color-skeleton-shine) 50%, var(--b-color-skeleton) 75%) 0 0 / 200% 100%;
    animation: b-shine var(--b-motion-skeleton) linear infinite;
  }
  .b-skeleton:empty { min-height: 0.875rem; }
  .b-skeleton-line:last-child:not(:first-child) { width: 60%; }

  /* ---- Empty and error states ---- */
  .b-empty, .b-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--b-space-2);
    width: 100%;
    max-width: var(--b-layout-empty);
    margin-inline: auto;
    padding: var(--b-space-10) var(--b-space-4);
    text-align: center;
    color: var(--b-color-on-surface-muted);
  }
  .b-empty > .b-icon, .b-empty-icon {
    box-sizing: content-box;
    width: 1.75rem;
    height: 1.75rem;
    padding: calc(var(--b-space-4) + var(--b-space-half));
    margin-bottom: var(--b-space-2);
    border-radius: var(--b-radius-full);
    color: var(--b-color-on-primary-subtle);
    background: var(--b-color-primary-subtle);
  }
  .b-empty-title { color: var(--b-color-on-surface); font-weight: var(--b-weight-strong); }
  .b-error {
    max-width: none;
    align-items: flex-start;
    padding: var(--b-space-4);
    text-align: start;
    color: var(--b-color-on-danger-subtle);
    background: var(--b-color-danger-subtle);
    border: var(--b-border-width) solid color-mix(in srgb, var(--b-color-danger) 35%, transparent);
    border-radius: var(--b-radius-lg);
  }
  .b-error > .b-icon { color: var(--b-color-danger); }
  .b-error-ref { font-size: var(--b-size-sm); font-family: var(--b-font-mono); user-select: all; }

  /* ---- Keypad (point of sale on the web) ---- */
  .b-keypad { display: flex; flex-direction: column; gap: var(--b-space-2); max-width: 26rem; }
  .b-keypad-display {
    min-height: var(--b-size-control-large);
    font-size: var(--b-size-2xl);
    font-weight: var(--b-weight-stat);
    font-variant-numeric: tabular-nums;
    text-align: end;
    letter-spacing: var(--b-tracking-heading);
  }
  .b-keypad-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--b-space-2); }
  .b-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--b-space-2);
    min-height: max(var(--b-size-touch-target), var(--b-size-control-large));
    font: inherit;
    font-size: var(--b-size-xl);
    font-weight: var(--b-weight-strong);
    font-variant-numeric: tabular-nums;
    color: var(--b-color-on-button-secondary);
    background: var(--b-color-button-secondary);
    border: var(--b-border-button) solid var(--b-color-border);
    border-radius: var(--b-radius-lg);
    box-shadow: var(--b-shadow-button);
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color var(--b-motion-fast) var(--b-easing-standard), transform var(--b-motion-fast) var(--b-easing-standard);
  }
  .b-key:hover { background: var(--b-color-surface-hover); }
  .b-key:active { transform: scale(var(--b-scale-press)); }
  .b-key-wide { grid-column: 1 / -1; }
  .b-key-enter { color: var(--b-color-on-primary); background: var(--b-color-primary); border-color: var(--b-color-primary); font-size: var(--b-size-lg); }
  .b-key-enter:hover { background: var(--b-color-primary-hover); }
  .b-key[disabled] { opacity: var(--b-opacity-disabled); }

  /* ---- Action bar ---- */
  .b-actionbar { display: flex; flex-wrap: wrap; gap: var(--b-space-2); }
  .b-page-actions .b-actionbar { flex-wrap: wrap; }
  @media (max-width: 40rem) {
    .b-region:not(.b-region-actions) .b-actionbar .b-btn { flex: 1 1 auto; }
  }

  /* ---- Tabs ---- */
  .b-tabs { display: flex; flex-direction: column; gap: var(--b-space-4); }
  .b-tablist {
    position: relative;
    display: flex;
    gap: var(--b-space-1);
    overflow-x: auto;
    border-bottom: var(--b-border-width) solid var(--b-color-border);
    scrollbar-width: none;
  }
  .b-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--b-space-2);
    min-height: max(var(--b-size-touch-target), var(--b-size-control));
    padding: 0 var(--b-space-3);
    color: var(--b-color-on-surface-muted);
    background: transparent;
    border: 0;
    border-radius: var(--b-radius-tab) var(--b-radius-tab) 0 0;
    font: inherit;
    font-weight: var(--b-weight-medium);
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--b-motion-fast) var(--b-easing-standard), background-color var(--b-motion-fast) var(--b-easing-standard);
  }
  .b-tab:hover { color: var(--b-color-on-surface); background: var(--b-color-surface-hover); }
  .b-tab::after {
    content: "";
    position: absolute;
    inset-inline: var(--b-space-2);
    bottom: calc(var(--b-border-width) * -1);
    height: 2px;
    border-radius: var(--b-radius-full);
    background: var(--b-color-primary);
    transform: scaleX(0);
    transition: transform var(--b-motion-base) var(--b-easing-emphasized);
  }
  .b-tab[aria-selected="true"] { color: var(--b-color-on-surface); }
  .b-tab[aria-selected="true"]::after { transform: scaleX(1); }
  .b-tabpanel { display: flex; flex-direction: column; gap: var(--b-space-stack); }
  .b-tabpanel[hidden] { display: none; }
  .b-tabpanel:focus-visible { outline-offset: var(--b-space-2); }

  /* ---- Menus and popovers ---- */
  .b-menu-host { position: relative; }
  .b-menu {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + var(--b-space-2));
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: var(--b-space-half);
    width: min(var(--b-layout-menu), calc(100vw - var(--b-space-8)));
    max-height: min(32rem, calc(100dvh - var(--b-layout-topbar) - var(--b-space-8)));
    overflow-y: auto;
    padding: var(--b-space-menu);
    color: var(--b-color-on-surface);
    background: var(--b-color-surface-raised);
    border: var(--b-border-width) solid var(--b-color-border);
    border-radius: var(--b-radius-menu);
    box-shadow: var(--b-shadow-menu);
    transform-origin: top right;
    transition: opacity var(--b-motion-base) var(--b-easing-emphasized), transform var(--b-motion-base) var(--b-easing-emphasized), display var(--b-motion-base) allow-discrete;
  }
  .b-menu[hidden] { display: none; opacity: 0; transform: scale(var(--b-scale-enter)); }
  @starting-style {
    .b-menu { opacity: 0; transform: scale(var(--b-scale-enter)); }
  }
  .b-menu-header { display: flex; align-items: center; gap: var(--b-space-3); padding: var(--b-space-2); }
  .b-menu-identity { display: flex; flex-direction: column; min-width: 0; line-height: var(--b-leading-control); }
  .b-menu-name { font-weight: var(--b-weight-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .b-menu-email { color: var(--b-color-on-surface-muted); font-size: var(--b-size-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .b-menu-label {
    padding: var(--b-space-2) var(--b-space-2) var(--b-space-1);
    color: var(--b-color-on-surface-muted);
    font-size: var(--b-size-xs);
    font-weight: var(--b-weight-strong);
    letter-spacing: var(--b-tracking-caps);
    text-transform: uppercase;
  }
  .b-menu-item {
    display: flex;
    align-items: center;
    gap: var(--b-space-3);
    width: 100%;
    min-height: max(var(--b-size-touch-target), var(--b-size-control));
    padding: 0 var(--b-space-2);
    color: var(--b-color-on-surface);
    font: inherit;
    font-weight: var(--b-weight-medium);
    text-align: start;
    text-decoration: none;
    background: transparent;
    border: 0;
    border-radius: var(--b-radius-md);
    cursor: pointer;
  }
  .b-menu-item .b-icon { color: var(--b-color-on-surface-muted); }
  .b-menu-item:hover, .b-menu-item:focus-visible { background: var(--b-color-surface-hover); text-decoration: none; }
  .b-menu-item:focus-visible { outline-offset: calc(var(--b-border-focus-width) * -1); }
  .b-menu-item[aria-checked="true"], .b-menu-item[aria-current] { color: var(--b-color-on-primary-subtle); background: var(--b-color-primary-subtle); }
  .b-menu-item[aria-checked="true"] .b-icon, .b-menu-item[aria-current] .b-icon { color: currentColor; }
  .b-menu-item[aria-disabled="true"] { cursor: default; color: var(--b-color-on-surface-muted); }
  .b-menu-item-danger { color: var(--b-color-danger); }
  .b-menu-item-danger .b-icon { color: currentColor; }
  .b-menu .b-segmented { margin: 0 var(--b-space-2) var(--b-space-2); }
  .b-menu .b-segmented > button { flex: 1; }

  .b-count-badge {
    position: absolute;
    top: var(--b-space-1);
    inset-inline-end: var(--b-space-1);
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 var(--b-space-1);
    border-radius: var(--b-radius-full);
    color: var(--b-color-on-accent);
    background: var(--b-color-accent);
    font-size: var(--b-size-xs);
    font-weight: var(--b-weight-strong);
    line-height: 1.125rem;
    text-align: center;
  }
  .b-panel-empty { display: flex; flex-direction: column; align-items: center; gap: var(--b-space-2); padding: var(--b-space-8) var(--b-space-4); color: var(--b-color-on-surface-muted); text-align: center; }
  .b-panel-empty > .b-icon { width: 1.75rem; height: 1.75rem; }

  .b-user-button { gap: var(--b-space-2); padding-inline: var(--b-space-1); }
  .b-user-button .b-user-name { display: none; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; }
  @media (min-width: 64rem) {
    .b-user-button { padding-inline: var(--b-space-1) var(--b-space-3); }
    .b-user-button .b-user-name { display: inline; }
  }

  /* ---- Dialogs, sheets and the palette ---- */
  .b-dialog, .b-sheet, .b-palette {
    width: min(var(--b-layout-dialog), calc(100vw - var(--b-space-8)));
    max-height: calc(100dvh - var(--b-space-8));
    padding: 0;
    color: var(--b-color-on-surface);
    background: var(--b-color-surface-raised);
    border: var(--b-border-width) solid var(--b-color-border);
    border-radius: var(--b-radius-dialog);
    box-shadow: var(--b-shadow-dialog);
    overflow: hidden;
    opacity: 1;
    transform: none;
    transition:
      opacity var(--b-motion-slow) var(--b-easing-emphasized),
      transform var(--b-motion-slow) var(--b-easing-emphasized),
      overlay var(--b-motion-slow) allow-discrete,
      display var(--b-motion-slow) allow-discrete;
  }
  .b-dialog:not([open]), .b-sheet:not([open]), .b-palette:not([open]) { opacity: 0; transform: scale(var(--b-scale-enter)); }
  @starting-style {
    .b-dialog[open], .b-sheet[open], .b-palette[open] { opacity: 0; transform: scale(var(--b-scale-enter)); }
  }
  .b-dialog[open], .b-sheet[open], .b-palette[open] { display: flex; flex-direction: column; }
  .b-dialog::backdrop, .b-sheet::backdrop, .b-palette::backdrop {
    background: color-mix(in srgb, var(--b-color-overlay) 55%, transparent);
    transition: opacity var(--b-motion-base) var(--b-easing-standard), overlay var(--b-motion-base) allow-discrete, display var(--b-motion-base) allow-discrete;
  }
  .b-dialog > :not(.b-dialog-header, .b-dialog-body, .b-dialog-actions) { margin: var(--b-space-dialog); }
  .b-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--b-space-3);
    padding: var(--b-space-3) var(--b-space-3) var(--b-space-3) var(--b-space-dialog);
    border-bottom: var(--b-border-width) solid var(--b-color-border);
  }
  .b-dialog-header h2 { font-size: var(--b-size-lg); }
  .b-dialog-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--b-space-dialog); }
  .b-dialog-actions {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--b-space-2);
    padding: var(--b-space-3) var(--b-space-dialog);
    background: var(--b-color-surface-raised);
    border-top: var(--b-border-width) solid var(--b-color-border);
  }
  @media (max-width: 40rem) {
    .b-dialog, .b-sheet {
      width: 100vw;
      max-width: none;
      margin: auto 0 0;
      max-height: 92dvh;
      border-radius: var(--b-radius-dialog) var(--b-radius-dialog) 0 0;
      padding-bottom: env(safe-area-inset-bottom);
    }
    .b-dialog:not([open]), .b-sheet:not([open]) { transform: translateY(100%); }
    @starting-style {
      .b-dialog[open], .b-sheet[open] { transform: translateY(100%); }
    }
  }
  .b-sheet-body { display: flex; flex-direction: column; gap: var(--b-space-2); padding: var(--b-space-3); overflow-y: auto; }

  .b-palette { width: min(var(--b-layout-palette), calc(100vw - var(--b-space-8))); margin-top: 12vh; }
  .b-palette-field { position: relative; border-bottom: var(--b-border-width) solid var(--b-color-border); }
  .b-palette-field > .b-icon { position: absolute; inset-inline-start: var(--b-space-4); top: 50%; translate: 0 -50%; color: var(--b-color-on-surface-muted); }
  .b-palette-input {
    width: 100%;
    min-height: var(--b-size-control-large);
    padding: 0 var(--b-space-4) 0 calc(var(--b-space-4) * 2 + var(--b-size-icon));
    font: inherit;
    font-size: var(--b-size-lg);
    color: var(--b-color-on-surface);
    background: transparent;
    border: 0;
  }
  .b-palette-input:focus-visible { outline: none; }
  .b-palette-results { display: flex; flex-direction: column; gap: var(--b-space-half); max-height: 50dvh; overflow-y: auto; padding: var(--b-space-2); }
  .b-palette-item { justify-content: flex-start; }
  .b-palette-empty { padding: var(--b-space-6); color: var(--b-color-on-surface-muted); text-align: center; }
  .b-palette-group { margin: var(--b-space-2) 0 0; padding: 0 var(--b-space-3); color: var(--b-color-on-surface-muted); font-size: var(--b-size-xs); font-weight: var(--b-weight-strong); letter-spacing: var(--b-tracking-caps); text-transform: uppercase; }
  .b-palette-text { display: grid; flex: 1; min-width: 0; text-align: start; }
  .b-palette-detail { color: var(--b-color-on-surface-muted); font-size: var(--b-size-sm); overflow-wrap: anywhere; }

  /* ---- Notification center (D65) ---- */
  .b-notify-button { position: relative; }
  .b-notify-badge {
    position: absolute;
    inset-inline-end: var(--b-space-half);
    top: var(--b-space-half);
    display: grid;
    place-items: center;
    min-width: 1.125rem;
    height: 1.125rem;
    padding-inline: var(--b-space-1);
    color: var(--b-color-on-danger);
    font-size: var(--b-size-xs);
    font-weight: var(--b-weight-strong);
    line-height: 1;
    background: var(--b-color-danger);
    border-radius: var(--b-radius-full);
    pointer-events: none;
  }
  .b-notify-badge[hidden] { display: none; }
  .b-notify-panel { width: min(24rem, calc(100vw - var(--b-space-8))); }
  .b-notify-list { display: grid; gap: var(--b-space-2); }
  .b-notify-items { display: grid; gap: var(--b-space-half); margin: 0; padding: 0; list-style: none; max-height: 50dvh; overflow-y: auto; }
  .b-notify-link {
    display: flex;
    align-items: flex-start;
    gap: var(--b-space-3);
    padding: var(--b-space-2) var(--b-space-3);
    color: var(--b-color-on-surface);
    text-decoration: none;
    border-radius: var(--b-radius-md);
  }
  a.b-notify-link:hover { background: var(--b-color-surface-hover); }
  .b-notify-unread .b-notify-title { font-weight: var(--b-weight-strong); }
  .b-notify-unread .b-notify-link > .b-icon { color: var(--b-color-primary); }
  .b-notify-text { display: grid; gap: var(--b-space-half); min-width: 0; }
  .b-notify-title, .b-notify-body { overflow-wrap: break-word; }
  .b-notify-body, .b-notify-time { color: var(--b-color-on-surface-muted); font-size: var(--b-size-sm); }
  .b-notify-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--b-space-2); padding: var(--b-space-2) var(--b-space-3) 0; border-top: var(--b-border-width) solid var(--b-color-border); }

  /* ---- Toasts ---- */
  .b-toasts {
    position: fixed;
    z-index: 60;
    inset-inline: var(--b-space-3);
    bottom: calc(var(--b-layout-bottom-nav) + var(--b-space-3) + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: var(--b-space-2);
    pointer-events: none;
  }
  @media (min-width: 48rem) {
    .b-toasts { inset-inline: auto var(--b-space-6); width: var(--b-layout-toast); bottom: var(--b-space-6); }
  }
  .b-toast {
    --_toast-life: 5s;
    position: relative;
    overflow: hidden;
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: var(--b-space-3);
    padding: var(--b-space-2) var(--b-space-2) var(--b-space-2) var(--b-space-toast);
    color: var(--b-color-on-toast);
    background: var(--b-color-toast);
    border-radius: var(--b-radius-toast);
    box-shadow: var(--b-shadow-toast);
  }
  .b-toast > .b-icon { color: currentColor; }
  .b-toast-text { flex: 1; min-width: 0; }
  .b-toast-close {
    display: inline-grid;
    place-items: center;
    min-width: max(var(--b-size-touch-target), var(--b-size-control));
    min-height: max(var(--b-size-touch-target), var(--b-size-control));
    border: 0;
    border-radius: var(--b-radius-md);
    color: inherit;
    background: transparent;
    cursor: pointer;
  }
  .b-toast-close:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
  .b-toast-close:focus-visible { outline-color: currentColor; outline-offset: calc(-1 * (var(--b-border-focus-width) + var(--b-border-width))); }

  /* ---- Video ---- */
  .b-video { margin: 0; display: grid; gap: var(--b-space-3); }
  .b-video-player { width: 100%; max-height: 70dvh; aspect-ratio: 16 / 9; border-radius: var(--b-radius-card); background: var(--b-color-overlay); }

  /* ---- Chart (placeholder): bars as meters, series colors from classes ---- */
  .b-chart { display: flex; flex-direction: column; gap: var(--b-space-3); }
  .b-chart-title { font-weight: var(--b-weight-strong); }
  .b-chart-bars { display: flex; flex-direction: column; gap: var(--b-space-2); }
  .b-chart-row { display: grid; grid-template-columns: minmax(6rem, 1fr) 3fr auto; align-items: center; gap: var(--b-space-3); font-size: var(--b-size-sm); }
  .b-chart-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--b-color-on-surface-muted); }
  .b-chart-value { font-variant-numeric: tabular-nums; font-weight: var(--b-weight-medium); }
  .b-chart meter {
    width: 100%;
    height: 0.75rem;
    appearance: none;
    border: 0;
    border-radius: var(--b-radius-full);
    background: var(--b-color-surface-sunken);
    overflow: hidden;
  }
  .b-chart meter::-webkit-meter-bar { background: var(--b-color-surface-sunken); border: 0; border-radius: var(--b-radius-full); height: 0.75rem; }
  .b-chart meter::-webkit-meter-optimum-value { background: var(--_series); border-radius: var(--b-radius-full); }
  .b-chart meter::-moz-meter-bar { background: var(--_series); border-radius: var(--b-radius-full); }
  .b-series-1 { --_series: var(--b-color-series-1); fill: var(--b-color-series-1); stroke: var(--b-color-series-1); }
  .b-series-2 { --_series: var(--b-color-series-2); fill: var(--b-color-series-2); stroke: var(--b-color-series-2); }
  .b-series-3 { --_series: var(--b-color-series-3); fill: var(--b-color-series-3); stroke: var(--b-color-series-3); }
  .b-series-4 { --_series: var(--b-color-series-4); fill: var(--b-color-series-4); stroke: var(--b-color-series-4); }
  .b-series-5 { --_series: var(--b-color-series-5); fill: var(--b-color-series-5); stroke: var(--b-color-series-5); }
  .b-series-6 { --_series: var(--b-color-series-6); fill: var(--b-color-series-6); stroke: var(--b-color-series-6); }
  .b-series-7 { --_series: var(--b-color-series-7); fill: var(--b-color-series-7); stroke: var(--b-color-series-7); }
  .b-series-8 { --_series: var(--b-color-series-8); fill: var(--b-color-series-8); stroke: var(--b-color-series-8); }

  /* ---- Count-up values ---- */
  .b-count { font-variant-numeric: tabular-nums; }

  /* ---- Shell parts that are buttons (here, so they win over .b-btn in this layer) ---- */
  .b-nav-toggle { width: 100%; justify-content: flex-start; color: var(--b-color-on-sidebar-muted); }
  @media (min-width: 48rem) {
    .b-menu-button { display: none; }
    .b-app[data-b-nav="collapsed"] .b-nav-toggle { justify-content: center; padding-inline: 0; }
    .b-app[data-b-nav="collapsed"] .b-nav-toggle .b-icon { transform: scaleX(-1); }
  }

  @media (forced-colors: active) {
    .b-btn, .b-key, .b-tile, .b-input, .b-chip, .b-tab, .b-menu, .b-card, .b-stat, .b-toast { border: 1px solid ButtonText; }
    .b-chip[aria-pressed="true"], .b-tab[aria-selected="true"], .b-menu-item[aria-checked="true"] { outline: 2px solid Highlight; }
    .b-switch-track { border: 1px solid ButtonText; }
  }
}

/* The assistant chat (spec ai-agent.md, 6.5): the header button, the side panel (a column next to the
   page from 64rem, an overlay from 48rem, full screen below), the message log, tool lines, results,
   approval cards and the composer. Framework tokens only; light, dark and tenant themes apply. */
@layer bryta.components {
  .b-asst-trigger { gap: var(--b-space-2); }
  .b-asst-trigger[aria-expanded="true"] { background: var(--b-color-primary-subtle); color: var(--b-color-on-primary-subtle); }
  @media (max-width: 47.99rem) {
    .b-asst-trigger { min-width: max(var(--b-size-touch-target), var(--b-size-control)); padding: 0; }
    .b-asst-trigger .b-btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  }

  /* ---- The panel ---- */
  .b-asst {
    --_asst-width: 26.25rem;
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    flex-direction: column;
    min-width: 0;
    color: var(--b-color-on-surface);
    background: var(--b-color-surface);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .b-asst[hidden] { display: none; }
  @media (min-width: 48rem) {
    .b-asst {
      inset: 0 0 0 auto;
      z-index: 45;
      width: min(var(--_asst-width), 100vw);
      border-inline-start: var(--b-border-width) solid var(--b-color-border);
      box-shadow: var(--b-shadow-dialog);
    }
  }
  @media (min-width: 64rem) {
    .b-asst { z-index: 30; box-shadow: none; }
    .b-app:has(> .b-asst:not([hidden])) > .b-frame { margin-inline-end: 26.25rem; }
  }
  .b-asst-page {
    position: static;
    width: auto;
    min-height: calc(100dvh - var(--b-layout-topbar) - var(--b-space-page) * 2);
    max-width: var(--b-layout-content-max);
    margin-inline: auto;
    border: var(--b-border-card) solid var(--b-color-border);
    border-radius: var(--b-radius-card);
    box-shadow: var(--b-shadow-card);
    background: var(--b-color-card);
    color: var(--b-color-on-card);
    z-index: auto;
  }
  @media (max-width: 47.99rem) {
    .b-asst-page { border: 0; border-radius: 0; box-shadow: none; min-height: calc(100dvh - var(--b-layout-topbar) - var(--b-layout-bottom-nav)); }
  }

  .b-asst-body { display: flex; flex-direction: column; flex: 1; min-height: 0; container-type: inline-size; }
  .b-asst-page .b-asst-body { min-height: inherit; }
  .b-asst-header {
    display: flex;
    align-items: center;
    gap: var(--b-space-2);
    min-height: var(--b-layout-topbar);
    padding: env(safe-area-inset-top) var(--b-space-2) 0 var(--b-space-4);
    border-bottom: var(--b-border-width) solid var(--b-color-border);
  }
  .b-asst-title { display: flex; align-items: center; gap: var(--b-space-2); flex: 1; min-width: 0; font-size: var(--b-size-md); font-weight: var(--b-weight-heading); }
  .b-asst-title > .b-icon { color: var(--b-color-primary); flex-shrink: 0; }
  .b-asst-title > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .b-asst-header-actions { display: flex; align-items: center; gap: var(--b-space-half); }
  .b-asst-header .b-menu { inset-inline-end: 0; top: calc(100% + var(--b-space-1)); width: min(var(--b-layout-menu), 90vw); max-height: 70dvh; overflow-y: auto; }

  .b-asst-inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--b-space-2); padding: var(--b-space-2) var(--b-space-4); border-bottom: var(--b-border-width) solid var(--b-color-border); background: var(--b-color-surface-sunken); }
  .b-asst-inline[hidden] { display: none; }
  .b-asst-inline .b-input { flex: 1; min-width: 10rem; }
  .b-asst-inline > p { flex-basis: 100%; }
  .b-asst-title .b-asst-inline { display: inline; padding: 0; border: 0; background: none; font-weight: var(--b-weight-body); font-size: var(--b-size-sm); }

  .b-asst-banner {
    display: flex;
    align-items: center;
    gap: var(--b-space-2);
    margin: 0;
    padding: var(--b-space-2) var(--b-space-4);
    font-size: var(--b-size-sm);
    color: var(--b-color-on-info-subtle);
    background: var(--b-color-info-subtle);
  }

  .b-asst-pinned {
    display: flex;
    flex-direction: column;
    gap: var(--b-space-3);
    max-height: 55%;
    overflow-y: auto;
    padding: var(--b-space-3) var(--b-space-4);
    border-bottom: var(--b-border-width) solid var(--b-color-border);
    background: var(--b-color-surface-sunken);
  }
  .b-asst-pinned[hidden] { display: none; }

  /* ---- The conversation ---- */
  .b-asst-scroll {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--b-space-4);
  }
  .b-asst-log, .b-asst-live { display: flex; flex-direction: column; gap: var(--b-space-3); }
  .b-asst-live:empty, .b-asst-status:empty { display: none; }
  .b-asst-live { margin-top: var(--b-space-3); }

  .b-asst-msg { display: flex; flex-direction: column; gap: var(--b-space-1); max-width: 100%; overflow-wrap: anywhere; }
  .b-asst-msg-user { align-self: flex-end; max-width: 85%; }
  .b-asst-msg-user > p {
    margin: 0;
    padding: var(--b-space-2) var(--b-space-3);
    white-space: pre-wrap;
    color: var(--b-color-on-primary);
    background: var(--b-color-primary);
    border-radius: var(--b-radius-lg);
    border-end-end-radius: var(--b-radius-sm);
  }
  .b-asst-msg-assistant { align-self: stretch; }
  .b-asst-msg-stopped .b-asst-md { color: var(--b-color-on-surface-muted); }
  .b-asst-md { display: flex; flex-direction: column; gap: var(--b-space-2); line-height: var(--b-leading-body); }
  .b-asst-md :is(p, ul, ol, pre, h3, h4, h5, h6) { margin: 0; }
  .b-asst-md :is(ul, ol) { padding-inline-start: var(--b-space-6); }
  .b-asst-md :is(h3, h4, h5, h6) { font-size: var(--b-size-md); font-weight: var(--b-weight-heading); }
  .b-asst-md code { font-family: var(--b-font-mono); font-size: var(--b-size-sm); padding: 0 var(--b-space-1); border-radius: var(--b-radius-sm); background: var(--b-color-surface-sunken); }
  .b-asst-md pre { overflow-x: auto; padding: var(--b-space-3); border-radius: var(--b-radius-md); background: var(--b-color-surface-sunken); }
  .b-asst-md pre code { padding: 0; background: none; }
  .b-asst-md hr { width: 100%; border: 0; border-top: var(--b-border-width) solid var(--b-color-border); }
  .b-asst-quote { padding-inline-start: var(--b-space-3); border-inline-start: 3px solid var(--b-color-border-strong); color: var(--b-color-on-surface-muted); }
  .b-asst-link { color: var(--b-color-link); }
  /* The streaming caret, after the last block of the message being written. */
  .b-asst-live .b-asst-md > :last-child::after {
    content: "";
    display: inline-block;
    width: 0.5em;
    height: 1em;
    margin-inline-start: var(--b-space-half);
    vertical-align: text-bottom;
    background: currentColor;
    border-radius: var(--b-radius-sm);
  }
  .b-asst-rating { display: flex; gap: var(--b-space-half); color: var(--b-color-on-surface-muted); }

  .b-asst-status { display: flex; align-items: center; min-height: var(--b-size-touch-target); color: var(--b-color-on-surface-muted); font-size: var(--b-size-sm); }
  .b-asst-thinking { display: inline-flex; align-items: center; gap: var(--b-space-2); }
  .b-asst-dots { display: inline-flex; gap: var(--b-space-1); }
  .b-asst-dots > span { width: 0.4rem; height: 0.4rem; border-radius: var(--b-radius-full); background: var(--b-color-primary); }

  .b-asst-tool { font-size: var(--b-size-sm); border: var(--b-border-width) solid var(--b-color-border); border-radius: var(--b-radius-md); background: var(--b-color-surface-raised); }
  .b-asst-tool > summary {
    display: flex;
    align-items: center;
    gap: var(--b-space-2);
    min-height: var(--b-size-touch-target);
    padding: 0 var(--b-space-3);
    cursor: pointer;
    list-style: none;
  }
  .b-asst-tool > summary::-webkit-details-marker { display: none; }
  .b-asst-tool > summary > span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .b-asst-tool[data-b-asst-state="running"] > summary > .b-icon { color: var(--b-color-primary); }
  .b-asst-tool-args, .b-asst-approval-args { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--b-space-half) var(--b-space-4); margin: 0; }
  @container (min-width: 28rem) {
    .b-asst-tool-args, .b-asst-approval-args { grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr); gap: var(--b-space-1) var(--b-space-4); }
  }
  .b-asst-tool-args { padding: var(--b-space-2) var(--b-space-3) var(--b-space-3); border-top: var(--b-border-width) solid var(--b-color-border); }
  .b-asst-tool-args dt, .b-asst-approval-args dt { color: var(--b-color-on-surface-muted); }
  .b-asst-tool-args dd, .b-asst-approval-args dd { margin: 0; overflow-wrap: anywhere; }

  .b-asst-result { display: flex; flex-direction: column; gap: var(--b-space-2); margin: 0; min-width: 0; }
  .b-asst-result-title { color: var(--b-color-on-surface-muted); font-size: var(--b-size-xs); font-weight: var(--b-weight-medium); letter-spacing: var(--b-tracking-caps); text-transform: uppercase; }
  .b-asst-result-more { margin: 0; color: var(--b-color-on-surface-muted); font-size: var(--b-size-sm); }
  .b-asst-result > .b-btn { align-self: flex-start; }
  .b-asst-result > .b-stat { max-width: 20rem; }
  .b-asst-result .b-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--b-space-2); }
  .b-asst-proposal { flex-direction: row; flex-wrap: wrap; }
  /* Citations (D80): the numbered sources of an answer, links to the records the viewer may open. */
  .b-asst-cites { display: flex; flex-direction: column; gap: var(--b-space-1); }
  .b-asst-cites-title { margin: 0; color: var(--b-color-on-surface-muted); font-size: var(--b-size-xs); font-weight: var(--b-weight-medium); letter-spacing: var(--b-tracking-caps); text-transform: uppercase; }
  .b-asst-cites-list { display: flex; flex-direction: column; gap: var(--b-space-2); margin: 0; padding: 0; list-style: none; }
  .b-asst-cite { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--b-space-2); align-items: baseline; min-width: 0; }
  .b-asst-cite-num { color: var(--b-color-on-surface-muted); font-size: var(--b-size-sm); font-variant-numeric: tabular-nums; }
  .b-asst-cite-link { min-width: 0; overflow-wrap: anywhere; font-weight: var(--b-weight-medium); }
  a.b-asst-cite-link { color: var(--b-color-link); display: inline-flex; align-items: center; min-height: var(--b-size-touch-target); }
  .b-asst-cite-snippet { grid-column: 2; margin: 0; color: var(--b-color-on-surface-muted); font-size: var(--b-size-sm); overflow-wrap: anywhere; }
  .b-asst-notice { display: flex; flex-wrap: wrap; align-items: center; gap: var(--b-space-2); margin: 0; font-size: var(--b-size-sm); color: var(--b-color-on-surface-muted); }
  .b-asst-notice-error { color: var(--b-color-on-danger-subtle); background: var(--b-color-danger-subtle); padding: var(--b-space-2) var(--b-space-3); border-radius: var(--b-radius-md); }

  /* Grids in the chat are snapshots: no paging, and cards whenever the chat column is narrow. */
  @container (max-width: 34rem) {
    .b-asst-result .b-table-wrap { overflow: visible; border: 0; background: transparent; box-shadow: none; }
    .b-asst-result .b-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .b-asst-result .b-table, .b-asst-result .b-table tbody, .b-asst-result .b-table tr, .b-asst-result .b-table td { display: block; width: 100%; }
    .b-asst-result .b-table tbody { display: flex; flex-direction: column; gap: var(--b-space-2); }
    .b-asst-result .b-table tr { padding: var(--b-space-2) var(--b-space-3); border: var(--b-border-card) solid var(--b-color-border); border-radius: var(--b-radius-card); background: var(--b-color-card); }
    .b-asst-result .b-table td { display: flex; justify-content: space-between; gap: var(--b-space-3); height: auto; border: 0; padding: var(--b-space-half) 0; }
    .b-asst-result .b-table td:first-child { font-weight: var(--b-weight-strong); }
    .b-asst-result .b-table .b-cell-label { display: inline; color: var(--b-color-on-surface-muted); font-weight: var(--b-weight-body); }
  }

  /* ---- Approval cards ---- */
  .b-asst-approval {
    display: flex;
    flex-direction: column;
    gap: var(--b-space-3);
    padding: var(--b-space-4);
    border: var(--b-border-card) solid var(--b-color-border);
    border-inline-start: 3px solid var(--b-color-primary);
    border-radius: var(--b-radius-card);
    background: var(--b-color-card);
    color: var(--b-color-on-card);
    box-shadow: var(--b-shadow-card);
  }
  .b-asst-approval-head { display: flex; align-items: center; gap: var(--b-space-2); }
  .b-asst-approval-head > h3 { flex: 1; min-width: 0; font-size: var(--b-size-md); font-weight: var(--b-weight-heading); }
  .b-asst-approval-head > .b-stat-icon { flex-shrink: 0; }
  .b-asst-approval-sentence { margin: 0; font-weight: var(--b-weight-medium); }
  .b-asst-approval-args { font-size: var(--b-size-sm); }
  .b-asst-approval-editor { display: flex; flex-direction: column; gap: var(--b-space-3); }
  .b-asst-approval-editor[hidden] { display: none; }
  .b-asst-approval-expiry { display: flex; align-items: center; gap: var(--b-space-1); margin: 0; color: var(--b-color-on-surface-muted); font-size: var(--b-size-sm); }
  .b-asst-approval-scopes { display: flex; flex-wrap: wrap; gap: var(--b-space-2); margin: 0; padding: 0; border: 0; }
  .b-asst-approval-scopes > legend { margin-bottom: var(--b-space-1); padding: 0; color: var(--b-color-on-surface-muted); font-size: var(--b-size-sm); }
  .b-asst-approval-scopes input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .b-asst-approval-scopes .b-chip:has(input:checked) { color: var(--b-color-on-chip-active); background: var(--b-color-chip-active); border-color: transparent; }
  .b-asst-approval-scopes .b-chip:has(input:focus-visible) { outline: var(--b-border-focus-width) solid var(--b-color-focus-ring); outline-offset: var(--b-border-focus-offset); }
  .b-asst-approval-actions { display: flex; flex-wrap: wrap; gap: var(--b-space-2); }
  .b-asst-approval-btn { min-height: max(var(--b-size-touch-target), 3rem); flex: 1 1 auto; }
  .b-asst-approval-state { display: flex; flex-wrap: wrap; gap: var(--b-space-2); margin: 0; }

  /* ---- Empty state and suggestions ---- */
  .b-asst-empty { display: flex; flex-direction: column; align-items: center; gap: var(--b-space-2); padding: var(--b-space-8) var(--b-space-2); text-align: center; }
  .b-asst-empty-mark {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: var(--b-space-2);
    border-radius: var(--b-radius-full);
    color: var(--b-color-on-primary-subtle);
    background: var(--b-color-primary-subtle);
  }
  .b-asst-suggestions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--b-space-2); margin-top: var(--b-space-3); }
  .b-asst-suggestions .b-chip { white-space: normal; text-align: start; }

  /* ---- Composer ---- */
  .b-asst-jump { position: absolute; inset-inline: 0; margin-inline: auto; width: max-content; bottom: calc(var(--_asst-composer, 5rem) + var(--b-space-2)); z-index: 1; box-shadow: var(--b-shadow-menu); }
  .b-asst-jump[hidden] { display: none; }
  .b-asst-body { position: relative; }
  .b-asst-composer { display: flex; flex-direction: column; gap: var(--b-space-1); padding: var(--b-space-3) var(--b-space-4); border-top: var(--b-border-width) solid var(--b-color-border); background: var(--b-color-surface); }
  .b-asst-page .b-asst-composer { background: transparent; }
  .b-asst-composer-field {
    display: flex;
    align-items: flex-end;
    gap: var(--b-space-2);
    padding: var(--b-space-1);
    border: var(--b-border-input) solid var(--b-color-border-strong);
    border-radius: var(--b-radius-input);
    background: var(--b-color-input);
  }
  .b-asst-composer-field:focus-within { outline: var(--b-border-focus-width) solid var(--b-color-focus-ring); outline-offset: var(--b-border-focus-offset); }
  .b-asst-input {
    flex: 1;
    min-height: max(var(--b-size-touch-target), var(--b-size-control));
    max-height: calc(var(--b-leading-body) * 1em * 6 + var(--b-space-input-y) * 2);
    padding: var(--b-space-input-y) var(--b-space-input-x);
    font: inherit;
    line-height: var(--b-leading-body);
    color: var(--b-color-on-input);
    background: transparent;
    border: 0;
    resize: none;
    overflow-y: auto;
  }
  .b-asst-input:focus { outline: none; }
  .b-asst-send { flex-shrink: 0; border-radius: var(--b-radius-full); }
  .b-asst-send[hidden] { display: none; }
  .b-asst-hint { margin: 0; color: var(--b-color-on-surface-muted); font-size: var(--b-size-xs); }
  @media (pointer: coarse) {
    .b-asst-hint { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  }

  /* ---- Attachments (D78): the shared upload zone's paperclip, its progress rows floating above the
     composer, the chips of the files waiting for the next message, and the files under a sent message. ---- */
  .b-asst-composer { position: relative; }
  .b-asst-composer .b-upload-compact { align-self: flex-end; }
  .b-asst-composer .b-upload-compact .b-upload-picker { min-width: var(--b-size-touch-target); border-radius: var(--b-radius-full); }
  .b-asst-composer .b-upload-compact .b-upload-list {
    position: absolute;
    inset-inline: var(--b-space-4);
    bottom: calc(100% + var(--b-space-1));
    z-index: 1;
    max-height: 40vh;
    overflow-y: auto;
    padding: var(--b-space-2);
    border-radius: var(--b-radius-card);
    background: var(--b-color-surface-raised);
    box-shadow: var(--b-shadow-menu);
  }
  .b-asst-attachments { display: flex; flex-wrap: wrap; gap: var(--b-space-2); margin: 0; padding: 0; list-style: none; }
  .b-asst-attachments[hidden] { display: none; }
  .b-asst-attachment {
    display: inline-flex;
    align-items: center;
    gap: var(--b-space-1);
    max-width: 100%;
    min-height: var(--b-size-touch-target);
    padding-inline: var(--b-space-2) var(--b-space-1);
    border: var(--b-border-width) solid var(--b-color-border);
    border-radius: var(--b-radius-full);
    color: var(--b-color-on-chip);
    background: var(--b-color-chip);
    font-size: var(--b-size-sm);
  }
  .b-asst-attachment > .b-icon { flex-shrink: 0; }
  .b-asst-attachment .b-btn { min-width: var(--b-size-touch-target); min-height: var(--b-size-touch-target); border-radius: var(--b-radius-full); }
  .b-asst-attachment-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--b-weight-medium); }
  .b-asst-attachment-meta { flex-shrink: 0; color: var(--b-color-on-surface-muted); font-size: var(--b-size-xs); }
  .b-asst-attachment-pending { border-style: dashed; }
  .b-asst-attachment-failed { color: var(--b-color-on-danger-subtle); background: var(--b-color-danger-subtle); border-color: var(--b-color-danger); }
  .b-asst-attachment-failed .b-asst-attachment-meta { color: var(--b-color-on-danger-subtle); }
  .b-asst-files { display: flex; flex-direction: column; align-items: flex-end; gap: var(--b-space-1); margin: 0; padding: 0; list-style: none; }
  .b-asst-file {
    display: inline-flex;
    align-items: center;
    gap: var(--b-space-2);
    max-width: 100%;
    padding: var(--b-space-1) var(--b-space-3);
    border: var(--b-border-card);
    border-radius: var(--b-radius-md);
    color: var(--b-color-on-card);
    background: var(--b-color-card);
    font-size: var(--b-size-sm);
  }
  .b-asst-file > .b-asst-link { display: inline-flex; align-items: center; gap: var(--b-space-2); min-width: 0; min-height: var(--b-size-touch-target); }

  /* ---- Dictation (D78): the microphone, its cancel button and its status, which floats above the
     field while it has something to say. Push-to-talk on phones: no callout, no selection, no scroll. ---- */
  .b-asst-dictate { display: flex; align-items: flex-end; gap: var(--b-space-1); }
  .b-asst-dictate[hidden] { display: none; }
  .b-asst-mic, .b-asst-mic-cancel { flex-shrink: 0; border-radius: var(--b-radius-full); }
  .b-asst-mic { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
  .b-asst-mic-cancel[hidden] { display: none; }
  .b-asst-dictating .b-asst-mic { color: var(--b-color-on-danger); background: var(--b-color-danger); border-color: var(--b-color-danger); }
  .b-asst-transcribing .b-asst-mic { color: var(--b-color-on-primary-subtle); background: var(--b-color-primary-subtle); }
  .b-asst-dictate-status { position: absolute; inset-inline-end: var(--b-space-4); bottom: calc(100% + var(--b-space-1)); margin: 0; }
  .b-asst-dictate-status:has(> span:not(:empty)) {
    display: inline-flex;
    align-items: center;
    gap: var(--b-space-2);
    max-width: calc(100% - var(--b-space-8));
    padding: var(--b-space-1) var(--b-space-3);
    border-radius: var(--b-radius-full);
    color: var(--b-color-on-toast);
    background: var(--b-color-toast);
    box-shadow: var(--b-shadow-menu);
    font-size: var(--b-size-sm);
  }
  .b-asst-dictate-timer { font-variant-numeric: tabular-nums; }
  /* While dictating, the field gives the attachment buttons' room to the text. On phones the composer
     keeps only the paperclip: the system file picker offers the camera itself. */
  .b-asst-composer-field:has(.b-asst-dictating) .b-upload-compact { display: none; }
  @media (max-width: 30rem) {
    .b-asst-composer .b-upload-compact .b-upload-picker:has(> input[capture]) { display: none; }
  }
}

@layer bryta.motion {
  @keyframes b-asst-in { from { transform: translateX(100%); } to { transform: none; } }
  @keyframes b-asst-up { from { transform: translateY(100%); } to { transform: none; } }
  @keyframes b-asst-pulse { 0%, 100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: none; } }
  @keyframes b-asst-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

  .b-asst:not([hidden]):not(.b-asst-page) { animation: b-asst-up var(--b-motion-base) var(--b-easing-emphasized) both; }
  @media (min-width: 48rem) {
    .b-asst:not([hidden]):not(.b-asst-page) { animation-name: b-asst-in; }
  }
  .b-asst-log > *, .b-asst-pinned > .b-asst-approval { animation: b-rise var(--b-motion-fast) var(--b-easing-entrance) both; }
  .b-asst-dots > span { animation: b-asst-pulse var(--b-motion-skeleton) var(--b-easing-standard) infinite; }
  .b-asst-dots > span:nth-child(2) { animation-delay: calc(var(--b-motion-skeleton) / 6); }
  .b-asst-dots > span:nth-child(3) { animation-delay: calc(var(--b-motion-skeleton) / 3); }
  .b-asst-live .b-asst-md > :last-child::after { animation: b-asst-blink var(--b-motion-countup) steps(1, end) infinite; }
  .b-asst-tool[data-b-asst-state="running"] > summary > .b-icon { animation: b-spin var(--b-motion-countup) linear infinite; }
  @keyframes b-asst-ring { 0% { box-shadow: 0 0 0 0 var(--b-color-danger-subtle); } 100% { box-shadow: 0 0 0 var(--b-space-2) transparent; } }
  .b-asst-dictating .b-asst-mic { animation: b-asst-ring var(--b-motion-skeleton) var(--b-easing-standard) infinite; }
  .b-asst-transcribing .b-asst-mic > .b-icon { animation: b-asst-pulse var(--b-motion-skeleton) var(--b-easing-standard) infinite; }
  .b-asst-dictate-status:has(> span:not(:empty)) { animation: b-rise var(--b-motion-fast) var(--b-easing-entrance) both; }

  @media (forced-colors: active) {
    .b-asst, .b-asst-log > *, .b-asst-dots > span, .b-asst-live .b-asst-md > :last-child::after, .b-asst-mic, .b-asst-mic > .b-icon, .b-asst-dictate-status { animation: none; }
  }
}

/* The upload zone (D75): a dashed drop zone with the file, camera and folder pickers, then one row per
   file with its name, size, progress and a cancel button; the compact variant is a single paperclip
   button for a composer. Framework tokens only; light, dark and tenant themes apply, and the pickers
   keep the touch-target size on phones. */
@layer bryta.components {
  .b-upload { display: grid; gap: var(--b-space-3); min-width: 0; }

  .b-upload-zone {
    display: grid;
    justify-items: center;
    gap: var(--b-space-2);
    padding: var(--b-space-6) var(--b-space-4);
    border: var(--b-border-width) dashed var(--b-color-border-strong);
    border-radius: var(--b-radius-card);
    background: var(--b-color-surface-sunken);
    color: var(--b-color-on-surface);
    text-align: center;
    transition: background-color var(--b-motion-fast) var(--b-easing-standard), border-color var(--b-motion-fast) var(--b-easing-standard);
  }
  .b-upload-zone.b-upload-over,
  .b-upload-zone:focus-within {
    border-color: var(--b-color-primary);
    background: var(--b-color-primary-subtle);
    color: var(--b-color-on-primary-subtle);
  }

  .b-upload-glyph { display: inline-flex; color: var(--b-color-primary); }
  .b-upload-glyph .b-icon { width: var(--b-size-avatar-lg); height: var(--b-size-avatar-lg); }
  .b-upload-label { margin: 0; font-weight: var(--b-weight-strong); }
  .b-upload-hint { margin: 0; color: var(--b-color-on-surface-muted); font-size: var(--b-size-sm); }

  .b-upload-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--b-space-2); }
  .b-upload-picker { position: relative; cursor: pointer; min-height: var(--b-size-touch-target); }
  .b-upload-picker:focus-within { outline: var(--b-border-focus-width) solid var(--b-color-focus-ring); outline-offset: var(--b-border-focus-offset); }
  /* The real input covers its label so a tap anywhere opens the picker; it stays focusable and named. */
  /* It also covers the button's border, so the tap target is the button's full 44 px. */
  .b-upload-input { position: absolute; inset: calc(var(--b-border-button) * -1); width: calc(100% + 2 * var(--b-border-button)); height: calc(100% + 2 * var(--b-border-button)); opacity: 0; cursor: pointer; }

  .b-upload-list { display: grid; gap: var(--b-space-2); margin: 0; padding: 0; list-style: none; }
  .b-upload-list:empty { display: none; }
  .b-upload-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--b-space-1) var(--b-space-3);
    padding: var(--b-space-2) var(--b-space-3);
    border: var(--b-border-card);
    border-radius: var(--b-radius-md);
    background: var(--b-color-card);
    color: var(--b-color-on-card);
  }
  .b-upload-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--b-weight-medium); }
  .b-upload-meta { grid-column: 1; color: var(--b-color-on-surface-muted); font-size: var(--b-size-xs); }
  .b-upload-progress { grid-column: 1 / -1; width: 100%; height: var(--b-space-1); accent-color: var(--b-color-primary); }
  .b-upload-cancel { grid-row: 1 / span 2; grid-column: 2; min-width: var(--b-size-touch-target); min-height: var(--b-size-touch-target); }
  .b-upload-item.b-upload-done { border-color: var(--b-color-border); }
  .b-upload-item.b-upload-done .b-upload-meta { color: var(--b-color-on-success-subtle); }
  .b-upload-item.b-upload-failed { background: var(--b-color-danger-subtle); color: var(--b-color-on-danger-subtle); }
  .b-upload-item.b-upload-failed .b-upload-meta { color: var(--b-color-on-danger-subtle); }

  /* Compact: the composer's paperclip; the list floats above it. */
  .b-upload-compact { display: inline-grid; gap: var(--b-space-1); }
  .b-upload-compact .b-upload-zone { padding: 0; border: 0; background: transparent; }
  .b-upload-compact .b-upload-zone:focus-within { background: transparent; }
  .b-upload-compact .b-upload-item { padding: var(--b-space-1) var(--b-space-2); }

  @media (min-width: 48rem) {
    .b-upload-zone { padding: var(--b-space-8) var(--b-space-6); }
  }

  @media (prefers-reduced-motion: reduce) {
    .b-upload-zone { transition: none; }
  }
}

/* The file preview (D75): one stored file inline. An image (the file, or its rendered preview) in a
   sunken frame that opens the file in a new tab, a scrollable text excerpt, or a file card, then a
   caption with the name, pages, type and an open button. Framework tokens only; light, dark and
   tenant themes apply. The frame keeps the image's aspect ratio and never grows past the viewport. */
@layer bryta.components {
  .b-file-preview { display: grid; gap: var(--b-space-3); min-width: 0; margin: 0; }

  .b-file-preview-frame {
    display: grid;
    place-items: center;
    min-height: calc(var(--b-size-touch-target) * 4);
    padding: var(--b-space-3);
    border: var(--b-border-card);
    border-radius: var(--b-radius-card);
    background: var(--b-color-surface-sunken);
    overflow: hidden;
  }
  .b-file-preview-link { display: block; border-radius: var(--b-radius-md); }
  .b-file-preview-link:focus-visible { outline: var(--b-border-focus-width) solid var(--b-color-focus-ring); outline-offset: var(--b-border-focus-offset); }
  .b-file-preview-image {
    display: block;
    max-width: 100%;
    max-height: 70dvh;
    height: auto;
    border-radius: var(--b-radius-md);
    box-shadow: var(--b-shadow-card);
    background: var(--b-color-card);
  }

  .b-file-preview-text {
    margin: 0;
    max-height: 60dvh;
    overflow: auto;
    padding: var(--b-space-4);
    border: var(--b-border-card);
    border-radius: var(--b-radius-card);
    background: var(--b-color-card);
    color: var(--b-color-on-card);
    font-size: var(--b-size-sm);
    line-height: var(--b-leading-body);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  .b-file-preview-text:focus-visible { outline: var(--b-border-focus-width) solid var(--b-color-focus-ring); outline-offset: var(--b-border-focus-offset); }

  .b-file-preview-card {
    display: grid;
    justify-items: center;
    gap: var(--b-space-2);
    padding: var(--b-space-8) var(--b-space-4);
    border: var(--b-border-width) dashed var(--b-color-border-strong);
    border-radius: var(--b-radius-card);
    background: var(--b-color-surface-sunken);
    color: var(--b-color-on-surface-muted);
    text-align: center;
  }
  .b-file-preview-card > .b-icon { width: var(--b-size-avatar-lg); height: var(--b-size-avatar-lg); color: var(--b-color-primary); }
  .b-file-preview-note { margin: 0; color: var(--b-color-on-surface-muted); font-size: var(--b-size-sm); }

  .b-file-preview-caption { display: flex; flex-wrap: wrap; align-items: center; gap: var(--b-space-2) var(--b-space-3); min-width: 0; }
  .b-file-preview-name { flex: 1 1 12rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--b-weight-medium); }
  .b-file-preview-meta { color: var(--b-color-on-surface-muted); font-size: var(--b-size-xs); }
}

/* Files shown inline (D75): the slice file preview's image, PDF or text frame, audio and video, from
   signed links. They fill their container, keep a readable height on phones and never overflow it.
   Framework tokens only; light, dark and tenant themes apply. */
@layer bryta.components {
  .b-file-image {
    display: block;
    max-width: 100%;
    max-height: min(70vh, 40rem);
    margin-inline: auto;
    border-radius: var(--b-radius-card);
    background: var(--b-color-surface-sunken);
    object-fit: contain;
  }

  .b-file-frame {
    display: block;
    width: 100%;
    min-height: min(50vh, 20rem);
    border: var(--b-border-width) solid var(--b-color-border);
    border-radius: var(--b-radius-card);
    background: var(--b-color-surface);
  }
  .b-file-pdf { height: min(70vh, 48rem); }
  .b-file-text { height: min(50vh, 32rem); }

  .b-file-audio { display: block; width: 100%; }

  .b-file-video {
    display: block;
    width: 100%;
    max-height: min(70vh, 40rem);
    border-radius: var(--b-radius-card);
    background: var(--b-color-surface-sunken);
  }
}

@layer bryta.motion {
  @keyframes b-rise {
    from { opacity: 0; transform: translateY(var(--b-size-motion-shift)); }
    to { opacity: 1; transform: none; }
  }
  @keyframes b-sink {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: translateY(var(--b-size-motion-shift)); }
  }
  @keyframes b-fade-out { to { opacity: 0; } }
  @keyframes b-spin { to { transform: rotate(360deg); } }
  @keyframes b-shine { from { background-position: 150% 0; } to { background-position: -50% 0; } }
  @keyframes b-toast-in-up { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } }
  @keyframes b-toast-in-side { from { opacity: 0; transform: translateX(110%); } to { opacity: 1; transform: none; } }
  @keyframes b-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }
  @keyframes b-hairline { from { border-bottom-color: transparent; } to { border-bottom-color: var(--b-color-border); } }
  @keyframes b-drift {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(6%, -4%) scale(1.08); }
    100% { transform: translate(0, 0) scale(1); }
  }
  @keyframes b-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--b-size-motion-shift) * -1.5)); } }

  /* Entrance: the page header and each region rise on first paint. */
  .b-page-header, .b-layout > .b-region, .b-status-page {
    animation: b-rise var(--b-motion-entrance) var(--b-easing-entrance) both;
  }
  .b-layout > .b-region:nth-child(2) { animation-delay: var(--b-motion-stagger); }
  .b-layout > .b-region:nth-child(3) { animation-delay: calc(var(--b-motion-stagger) * 2); }

  /* Stagger: children rise one after another; 13+ share the 12th delay. */
  .b-stagger > *, .b-table tbody > tr, .b-tile-list > li, .b-stats > *, .b-nav-group > li {
    --_i: 12;
    animation: b-rise var(--b-motion-entrance) var(--b-easing-entrance) both;
    animation-delay: calc(var(--b-motion-stagger) * var(--_i));
  }
  :is(.b-stagger, .b-table tbody, .b-tile-list, .b-stats, .b-nav-group) > :nth-child(1) { --_i: 0; }
  :is(.b-stagger, .b-table tbody, .b-tile-list, .b-stats, .b-nav-group) > :nth-child(2) { --_i: 1; }
  :is(.b-stagger, .b-table tbody, .b-tile-list, .b-stats, .b-nav-group) > :nth-child(3) { --_i: 2; }
  :is(.b-stagger, .b-table tbody, .b-tile-list, .b-stats, .b-nav-group) > :nth-child(4) { --_i: 3; }
  :is(.b-stagger, .b-table tbody, .b-tile-list, .b-stats, .b-nav-group) > :nth-child(5) { --_i: 4; }
  :is(.b-stagger, .b-table tbody, .b-tile-list, .b-stats, .b-nav-group) > :nth-child(6) { --_i: 5; }
  :is(.b-stagger, .b-table tbody, .b-tile-list, .b-stats, .b-nav-group) > :nth-child(7) { --_i: 6; }
  :is(.b-stagger, .b-table tbody, .b-tile-list, .b-stats, .b-nav-group) > :nth-child(8) { --_i: 7; }
  :is(.b-stagger, .b-table tbody, .b-tile-list, .b-stats, .b-nav-group) > :nth-child(9) { --_i: 8; }
  :is(.b-stagger, .b-table tbody, .b-tile-list, .b-stats, .b-nav-group) > :nth-child(10) { --_i: 9; }
  :is(.b-stagger, .b-table tbody, .b-tile-list, .b-stats, .b-nav-group) > :nth-child(11) { --_i: 10; }
  :is(.b-stagger, .b-table tbody, .b-tile-list, .b-stats, .b-nav-group) > :nth-child(12) { --_i: 11; }
  @supports (width: calc(sibling-index() * 1px)) {
    .b-stagger > *, .b-table tbody > tr, .b-tile-list > li, .b-stats > *, .b-nav-group > li {
      animation-delay: calc(var(--b-motion-stagger) * min(sibling-index() - 1, 12));
    }
  }

  /* Toasts: spring in from below (phones) or the right (desktop), a progress bar, then sink out. */
  .b-toast { animation: b-toast-in-up var(--b-motion-slow) var(--b-easing-spring) both; }
  @media (min-width: 48rem) {
    .b-toast { animation-name: b-toast-in-side; }
  }
  .b-toast-success, .b-toast-info {
    animation:
      b-toast-in-up var(--b-motion-slow) var(--b-easing-spring) both,
      b-sink var(--b-motion-base) var(--b-easing-exit) calc(var(--_toast-life) - var(--b-motion-base)) forwards;
  }
  @media (min-width: 48rem) {
    .b-toast-success, .b-toast-info {
      animation:
        b-toast-in-side var(--b-motion-slow) var(--b-easing-spring) both,
        b-sink var(--b-motion-base) var(--b-easing-exit) calc(var(--_toast-life) - var(--b-motion-base)) forwards;
    }
  }
  .b-toast-success::after, .b-toast-info::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 2px;
    background: currentColor;
    opacity: 0.5;
    transform-origin: left;
    animation: b-progress var(--_toast-life) linear forwards;
  }

  /* The top bar's hairline appears once the page scrolls (where scroll timelines exist). */
  @supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
      .b-topbar { animation: b-hairline linear both; animation-timeline: scroll(); animation-range: 0 4rem; }
    }
  }

  /* Cross-document page transitions; browsers without them navigate normally and still rise. */
  @media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
    ::view-transition-old(b-main) { animation: b-fade-out var(--b-motion-fast) var(--b-easing-exit) both; }
  }
  ::view-transition-new(b-main) { animation: none; }
  ::view-transition-group(b-nav-indicator) { animation-duration: var(--b-motion-page); animation-timing-function: var(--b-easing-emphasized); }

  /* In-page patches (paging, sort, filters, tabs) animate their results where match-element exists. */
  @supports (view-transition-name: match-element) {
    .b-results { view-transition-name: match-element; view-transition-class: b-results; }
    ::view-transition-group(*.b-results) { animation-duration: var(--b-motion-base); animation-timing-function: var(--b-easing-standard); }
    ::view-transition-group(root) { animation: none; }
  }

  /* Reduced motion and forced colors: no decorative motion anywhere, module layers included. */
  @media (prefers-reduced-motion: reduce) {
    *, ::before, ::after { animation: none !important; transition: none !important; }
    /* View-transition pseudo-elements escape the universal selector; same-document transitions snap too. */
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none; }
  }
  @media (forced-colors: active) {
    .b-page-header, .b-layout > .b-region, .b-stagger > *, .b-table tbody > tr, .b-tile-list > li, .b-stats > *, .b-nav-group > li, .b-auth-blob, .b-auth-float { animation: none; }
  }
}

@layer bryta.utilities {
  .b-stack { display: flex; flex-direction: column; gap: var(--b-space-stack); min-width: 0; }
  .b-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--b-space-inline); }
  .b-grid-auto { display: grid; gap: var(--b-space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--b-layout-tile-min)), 1fr)); }
  .b-container { width: 100%; max-width: var(--b-layout-content-max); margin-inline: auto; }
  .b-text-muted { color: var(--b-color-on-surface-muted); }
  .b-truncate { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .b-tabular { font-variant-numeric: tabular-nums; }
  .b-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* The shared sign-in surface: a brand pane with slow CSS-only art from 60rem, and a form card.
   Every color follows the platform, app and tenant theme; motion settles or drifts slowly and stops
   under reduced motion. */
@layer bryta.layout {
  .b-auth {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--b-color-surface);
  }
  .b-auth-main { display: grid; min-height: 100vh; min-height: 100dvh; }
  .b-auth-layout { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100%; }

  .b-auth-brand { display: none; }

  .b-auth-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--b-space-6);
    width: 100%;
    max-width: var(--b-layout-auth-compact);
    margin-inline: auto;
    padding: var(--b-space-8) var(--b-space-5) var(--b-space-6);
    padding-top: calc(var(--b-space-8) + env(safe-area-inset-top));
  }
  .b-auth-mobile-brand { display: flex; align-items: center; gap: var(--b-space-3); font-weight: var(--b-weight-heading); font-size: var(--b-size-lg); }
  .b-auth-intro { display: flex; flex-direction: column; gap: var(--b-space-2); }
  .b-auth-eyebrow { color: var(--b-color-primary); font-size: var(--b-size-sm); font-weight: var(--b-weight-strong); letter-spacing: var(--b-tracking-caps); text-transform: uppercase; }
  .b-auth-title { font-size: var(--b-size-auth-title-compact); letter-spacing: var(--b-tracking-display); line-height: 1.1; }
  .b-auth-description { color: var(--b-color-on-surface-muted); }

  .b-auth-card {
    display: flex;
    flex-direction: column;
    gap: var(--b-space-auth-field-gap);
    padding: var(--b-space-auth-panel-y) var(--b-space-auth-panel-x);
    color: var(--b-color-on-card);
    background: var(--b-color-card);
    border: var(--b-border-card) solid var(--b-color-border);
    border-radius: var(--b-radius-auth);
    box-shadow: var(--b-shadow-auth);
  }
  .b-auth-form { display: flex; flex-direction: column; gap: var(--b-space-5); max-width: none; }
  .b-auth-errors:empty { display: none; }
  .b-auth-input-wrap { position: relative; }
  .b-auth-input-wrap .b-input { min-height: max(var(--b-size-touch-target), var(--b-size-control-large)); border-radius: var(--b-radius-auth-control); }
  .b-auth-input-wrap input[name="password"] { padding-inline-end: calc(var(--b-space-4) + 5rem); }
  .b-auth-password-toggle {
    position: absolute;
    inset-inline-end: var(--b-space-1);
    top: 50%;
    translate: 0 -50%;
    min-width: max(var(--b-size-touch-target), var(--b-size-control));
    min-height: max(var(--b-size-touch-target), var(--b-size-control));
    padding: 0 var(--b-space-3);
    color: var(--b-color-on-surface-muted);
    background: transparent;
    border: 0;
    border-radius: var(--b-radius-md);
    font: inherit;
    font-size: var(--b-size-sm);
    font-weight: var(--b-weight-strong);
    cursor: pointer;
  }
  .b-auth-password-toggle:hover, .b-auth-password-toggle[aria-pressed="true"] { color: var(--b-color-on-surface); background: var(--b-color-surface-hover); }
  .b-auth-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--b-space-2); }
  .b-auth-row a { font-size: var(--b-size-sm); font-weight: var(--b-weight-medium); display: inline-flex; align-items: center; min-height: max(var(--b-size-touch-target), var(--b-size-control)); }
  .b-auth-submit { width: 100%; min-height: max(var(--b-size-touch-target), var(--b-size-control-large)); border-radius: var(--b-radius-auth-control); font-size: var(--b-size-lg); }
  .b-auth-submit-progress, .b-auth-spinner { display: none; }
  .b-auth-submit:disabled .b-auth-submit-label, .b-auth-submit:disabled .b-auth-submit-arrow { display: none; }
  .b-auth-submit:disabled .b-auth-submit-progress { display: inline; }
  .b-auth-submit:disabled .b-auth-spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: var(--b-radius-full);
    animation: b-spin var(--b-motion-countup) linear infinite;
  }
  .b-auth-submit:disabled { opacity: 1; }
  .b-auth-submit-arrow { display: inline-flex; transition: transform var(--b-motion-base) var(--b-easing-standard); }
  .b-auth-submit:hover .b-auth-submit-arrow { transform: translateX(var(--b-space-1)); }
  .b-auth-notice {
    display: flex;
    align-items: center;
    gap: var(--b-space-2);
    padding: var(--b-space-3) var(--b-space-4);
    color: var(--b-color-on-info-subtle);
    background: var(--b-color-info-subtle);
    border-radius: var(--b-radius-lg);
    font-weight: var(--b-weight-medium);
  }
  .b-auth-note { display: flex; align-items: flex-start; justify-content: center; gap: var(--b-space-2); color: var(--b-color-on-surface-muted); font-size: var(--b-size-sm); text-align: center; }
  .b-auth-note .b-icon { width: 1em; height: 1em; margin-top: calc((1lh - 1em) / 2); }
  .b-auth-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--b-space-3); }

  @media (min-width: 60rem) {
    .b-auth-layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
    .b-auth-mobile-brand { display: none; }
    .b-auth-panel { padding: var(--b-space-12) var(--b-space-10); }
    .b-auth-title { font-size: var(--b-size-auth-title); }
    .b-auth-brand {
      position: relative;
      isolation: isolate;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: var(--b-space-8);
      margin: var(--b-space-3);
      padding: var(--b-space-10);
      overflow: hidden;
      color: var(--b-color-on-sidebar);
      background: var(--b-color-sidebar);
      border: var(--b-border-width) solid var(--b-color-border);
      border-radius: var(--b-radius-auth-art);
    }
    .b-auth-brand-head { display: flex; align-items: center; gap: var(--b-space-3); font-size: var(--b-size-lg); font-weight: var(--b-weight-heading); }
    .b-auth-tagline {
      max-width: 16ch;
      font-size: var(--b-size-auth-art-title);
      font-weight: var(--b-weight-heading);
      letter-spacing: var(--b-tracking-display);
      line-height: 1.08;
      text-wrap: balance;
    }
    .b-auth-art { position: relative; min-height: 18rem; }
    .b-auth-blob {
      position: absolute;
      z-index: -1;
      width: 22rem;
      aspect-ratio: 1;
      border-radius: var(--b-radius-full);
      filter: blur(var(--b-space-16));
      opacity: 0.55;
      animation: b-drift calc(var(--b-motion-skeleton) * 10) var(--b-easing-standard) infinite;
    }
    .b-auth-blob-1 { inset-inline-start: -6rem; top: -4rem; background: var(--b-color-primary); }
    .b-auth-blob-2 { inset-inline-end: -8rem; top: 30%; background: var(--b-color-accent); animation-delay: calc(var(--b-motion-skeleton) * -3); opacity: 0.35; }
    .b-auth-blob-3 { inset-inline-start: 20%; bottom: -10rem; background: var(--b-color-series-3); animation-delay: calc(var(--b-motion-skeleton) * -6); opacity: 0.3; }
    .b-auth-float {
      position: absolute;
      inset-inline-start: 8%;
      bottom: 12%;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
      gap: var(--b-space-2) var(--b-space-3);
      width: min(20rem, 80%);
      padding: var(--b-space-4);
      color: var(--b-color-on-card);
      background: var(--b-color-card);
      border: var(--b-border-width) solid var(--b-color-border);
      border-radius: var(--b-radius-card);
      box-shadow: var(--b-shadow-menu);
      animation: b-float calc(var(--b-motion-skeleton) * 4) var(--b-easing-standard) infinite;
    }
    .b-auth-float .b-stat-icon { grid-row: 1 / span 2; }
    .b-auth-float-bars { grid-column: 1 / -1; display: flex; align-items: flex-end; gap: var(--b-space-2); height: 4rem; }
    .b-auth-float-bars > span { flex: 1; border-radius: var(--b-radius-sm) var(--b-radius-sm) 0 0; background: var(--b-color-primary-subtle); }
    .b-auth-float-bars > span:nth-child(1) { height: 35%; }
    .b-auth-float-bars > span:nth-child(2) { height: 55%; }
    .b-auth-float-bars > span:nth-child(3) { height: 45%; }
    .b-auth-float-bars > span:nth-child(4) { height: 75%; }
    .b-auth-float-bars > span:nth-child(5) { height: 100%; background: var(--b-color-primary); }
  }

  /* ---- Account pages (D65): recovery codes, the workspace picker, links under the form ---- */
  .b-auth-codes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: var(--b-space-2);
    margin: 0;
    padding: var(--b-space-4);
    font-family: var(--b-font-mono);
    color: var(--b-color-on-surface);
    background: var(--b-color-surface-sunken);
    border-radius: var(--b-radius-md);
    white-space: normal;
  }
  .b-auth-choices { display: grid; gap: var(--b-space-2); margin: 0; padding: 0; list-style: none; }
  .b-auth-choice {
    display: flex;
    align-items: center;
    gap: var(--b-space-3);
    min-height: var(--b-size-touch-target);
    padding: var(--b-space-3) var(--b-space-4);
    color: var(--b-color-on-card);
    text-decoration: none;
    background: var(--b-color-card);
    border: var(--b-border-width) solid var(--b-color-border);
    border-radius: var(--b-radius-card);
    transition: border-color var(--b-motion-fast) var(--b-easing-standard), box-shadow var(--b-motion-fast) var(--b-easing-standard);
  }
  .b-auth-choice:hover { border-color: var(--b-color-primary); box-shadow: var(--b-shadow-card-hover); }
  .b-auth-choice-text { display: grid; flex: 1; min-width: 0; }
  .b-auth-choice-text > span:first-child { font-weight: var(--b-weight-strong); overflow-wrap: anywhere; }
  .b-auth-choice-detail { color: var(--b-color-on-surface-muted); font-size: var(--b-size-sm); }
  .b-auth-links { display: flex; flex-wrap: wrap; gap: var(--b-space-2) var(--b-space-4); justify-content: center; font-size: var(--b-size-sm); }
  .b-auth-links a { display: inline-flex; align-items: center; gap: var(--b-space-1); min-height: var(--b-size-touch-target); color: var(--b-color-link); }
  .b-field-hint { margin: 0; color: var(--b-color-on-surface-muted); font-size: var(--b-size-sm); }

  @media (forced-colors: active) {
    .b-auth-brand { display: none; }
    .b-auth-layout { grid-template-columns: minmax(0, 1fr); }
    .b-auth-password-toggle { border: 1px solid ButtonText; }
  }
}