/* MatUi local-20261013 (547ba6c173) - bundled from matui.tokens.css, matui.base.css, matui.shell.css, matui.controls.css, matui.forms.css, matui.pickers.css, matui.lists.css, matui.dialogs.css, matui.layout.css, matui.apps.css */
/* ==========================================================================
   MatUi · tokens
   The single source of the look of every Mat app. Components use only these custom properties, never a raw colour.

   - Format: a declaration, then its description as a comment on the same line (the MatDesign site reads the descriptions
     from here). A comment cannot contain the comment terminator, so the format is described in words.
   - Light is the base. The dark set is written TWICE on purpose: once for an explicit `data-theme="dark"` and once for
     "system" under `prefers-color-scheme: dark`. A unit test keeps both sets identical.
   - An app sets ONE colour: `--mat-app-accent` (see matui.apps.css, on <html data-app="...">). Everything else (hover,
     tint, text colour, ring) is derived from it, in both modes. The derived accent tokens are declared for
     `:root` AND `[data-app]`, so a preview inside a page (<div data-app="matcad">) gets its own accent.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* ---- Surfaces ---- */
  --mat-bg: #f5f4f1;                       /* Page background behind everything. */
  --mat-bg-2: #ecebe7;                     /* Quiet second background (wells). */
  --mat-surface: #ffffff;                  /* Cards, panels, tables, dialogs. */
  --mat-surface-2: #faf9f7;                /* Hover, zebra rows, raised inner areas. */
  --mat-surface-3: #efeeea;                /* Input fill, pressed state, tracks. */
  --mat-glass: #f5f4f1;                    /* Top bar and sticky areas: solid, so that content never shows through. */
  --mat-nav-bg: #eeede9;                   /* Menu background. */
  --mat-overlay: rgba(20, 19, 17, .5);     /* Dim layer behind dialogs and the mobile menu. */

  /* ---- Lines ---- */
  --mat-border: rgba(31, 30, 27, .13);     /* Hairlines, card borders, table rules. */
  --mat-border-strong: rgba(31, 30, 27, .30); /* Input borders, dividers that must be seen. */

  /* ---- Text ---- */
  --mat-text: #1f1e1b;                     /* Primary text. */
  --mat-text-muted: #5d5b55;               /* Secondary text, labels, hints (AA on every surface). */
  --mat-text-faint: #85827a;               /* Placeholders and disabled text only. Never for information. */

  /* ---- Status ---- */
  --mat-danger: #d92d4a;                   /* Errors and destructive actions. */
  --mat-danger-bg: rgba(217, 45, 74, .10); /* Tint behind danger text. */
  --mat-danger-text: #b3203b;              /* Danger as text on a surface or tint. */
  --mat-on-danger: #ffffff;                /* Text on a solid danger button. */
  --mat-thumb: #ffffff;                    /* Knob of a switch. */
  --mat-success: #0f9d58;                  /* Success, online, healthy. */
  --mat-success-bg: rgba(15, 157, 88, .12); /* Tint behind success text. */
  --mat-success-text: #0b7a44;             /* Success as text. */
  --mat-warning: #c47500;                  /* Attention, degraded. */
  --mat-warning-bg: rgba(245, 158, 11, .16); /* Tint behind warning text. */
  --mat-warning-text: #8a5200;             /* Warning as text. */
  --mat-info: #2563eb;                     /* Neutral information. */
  --mat-info-bg: rgba(37, 99, 235, .10);   /* Tint behind info text. */
  --mat-info-text: #1d4fc4;                /* Info as text. */

  /* ---- Elevation ---- */
  --mat-shadow-1: 0 1px 1px rgba(31, 30, 27, .04); /* Cards at rest: hardly more than their line. */
  --mat-shadow-2: 0 2px 6px rgba(31, 30, 27, .10), 0 8px 20px rgba(31, 30, 27, .08); /* Popovers, context menus. */
  --mat-shadow-3: 0 12px 40px rgba(31, 30, 27, .24); /* Dialogs. */
  --mat-scroll-thumb: rgba(31, 30, 27, .34); /* Scrollbar thumb while scrolling (hidden otherwise). */

  /* ---- Shape ---- */
  --mat-radius-xs: 3px;                    /* Tags, code, small chips. */
  --mat-radius-sm: 4px;                    /* Small buttons, marks inside a control. */
  --mat-radius: 6px;                       /* Buttons, inputs, menu items, inner panels. */
  --mat-radius-lg: 8px;                    /* Cards and dialogs. */
  --mat-radius-xl: 12px;                   /* Large surfaces: the picker panel, a sign-in card. */
  --mat-radius-pill: 999px;                /* Badges, status pills, switches. */

  /* ---- Spacing (4 px scale) ---- */
  --mat-space-1: 4px;                      /* Hairline gaps. */
  --mat-space-2: 8px;                      /* Between an icon and its label. */
  --mat-space-3: 12px;                     /* Inside compact controls. */
  --mat-space-4: 16px;                     /* Standard gap between blocks. */
  --mat-space-5: 20px;                     /* Card padding on phones. */
  --mat-space-6: 24px;                     /* Card padding, between sections. */
  --mat-space-8: 32px;                     /* Page padding on desktop. */
  --mat-space-10: 40px;                    /* Large section gaps. */
  --mat-space-12: 48px;                    /* Hero spacing. */
  --mat-gap: var(--mat-space-4);           /* Default gap of stacks and grids. */

  /* ---- Layout ---- */
  --mat-nav-w: 264px;                      /* Width of the menu on the left. */
  --mat-topbar-h: 56px;                    /* Height of the bar with the breadcrumb. */
  --mat-content-max: 1240px;               /* Maximum width of page content. */
  --mat-content-pad: clamp(16px, 3vw, 32px); /* Side padding of the page. */
  --mat-control-h: 40px;                   /* Height of buttons and inputs. */
  --mat-control-h-sm: 32px;                /* Compact controls (row actions, chips). */
  --mat-control-h-lg: 48px;                /* Prominent controls. */

  /* ---- Type ---- */
  --mat-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* UI and body. System stack: no web font. */
  --mat-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Cascadia Code", Menlo, Consolas, monospace; /* IDs, versions, ports, code. */
  --mat-fs-xs: .75rem;                     /* Captions, badges (12 px). */
  --mat-fs-sm: .8125rem;                   /* Table text, hints (13 px). */
  --mat-fs-md: .9375rem;                   /* Body text (15 px). */
  --mat-fs-lg: 1.0625rem;                  /* Lead text, card titles (17 px). */
  --mat-fs-xl: 1.25rem;                    /* Section titles (20 px). */
  --mat-fs-2xl: 1.625rem;                  /* Page titles (26 px). */
  --mat-fs-3xl: 2.125rem;                  /* Hero titles (34 px). */
  --mat-lh: 1.5;                           /* Body line height. */
  --mat-lh-tight: 1.25;                    /* Headings. */

  /* ---- Motion ---- */
  --mat-dur-fast: 120ms;                   /* Hover, press. */
  --mat-dur: 180ms;                        /* Menus, tabs, toggles. */
  --mat-dur-slow: 280ms;                   /* Dialogs, the mobile menu. */
  --mat-ease: cubic-bezier(.2, .8, .2, 1); /* The one easing curve. */

  /* ---- Layers ---- */
  --mat-z-nav: 100;                        /* Menu. */
  --mat-z-topbar: 200;                     /* Top bar. */
  --mat-z-menu: 300;                       /* Context menus and popovers. */
  --mat-z-dialog: 400;                     /* Dialogs. */
  --mat-z-toast: 500;                      /* Toasts above everything. */

  /* ---- Colour picker ---- */
  --mat-picker-light: #ffffff;             /* White end of the saturation ramp: a colour model, the same in light and dark. */
  --mat-picker-dark: #000000;              /* Black end of the brightness ramp. */
  --mat-picker-hues: linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000); /* The hue ramp of the slider. */

  /* ---- Device ---- */
  --mat-safe-top: env(safe-area-inset-top, 0px);       /* Notch. */
  --mat-safe-bottom: env(safe-area-inset-bottom, 0px); /* Home indicator. */
  --mat-safe-left: env(safe-area-inset-left, 0px);     /* Landscape notch, left. */
  --mat-safe-right: env(safe-area-inset-right, 0px);   /* Landscape notch, right. */
}

/* ---- Accent, light. Derived from --mat-app-accent; declared per scope so a nested [data-app] recomputes it. ---- */
:root,
[data-app] {
  --mat-accent: var(--mat-app-accent, #5b5fe6); /* Filled surfaces: primary button, active item, switch. */
  --mat-accent-hover: color-mix(in oklab, var(--mat-accent) 86%, black); /* Primary button on hover. */
  --mat-accent-active: color-mix(in oklab, var(--mat-accent) 74%, black); /* Primary button pressed. */
  --mat-accent-soft: color-mix(in srgb, var(--mat-accent) 11%, transparent); /* Tint: hover of ghost items, selected row. */
  --mat-accent-soft-strong: color-mix(in srgb, var(--mat-accent) 19%, transparent); /* Stronger tint: active menu item. */
  --mat-accent-text: var(--mat-app-accent-text, color-mix(in oklab, var(--mat-accent) 78%, black)); /* Accent as text or link on a surface (AA). */
  --mat-on-accent: var(--mat-app-on-accent, #ffffff); /* Text on --mat-accent. */
  --mat-focus-ring: 0 0 0 3px color-mix(in srgb, var(--mat-accent) 42%, transparent); /* Keyboard focus ring. */
  --mat-selection: color-mix(in srgb, var(--mat-accent) 28%, transparent); /* Text selection. */
}

/* Fingers need bigger targets (WCAG 2.5.5, 44 px). */
@media (pointer: coarse) {
  :root {
    --mat-control-h: 44px;
    --mat-control-h-sm: 36px;
    --mat-control-h-lg: 52px;
  }
}

:root[data-theme="light"] { color-scheme: light; }

/* ---- Dark, explicit ---- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --mat-bg: #151514;
  --mat-bg-2: #1a1a18;
  --mat-surface: #1e1e1c;
  --mat-surface-2: #252523;
  --mat-surface-3: #2d2d2a;
  --mat-glass: #151514;
  --mat-nav-bg: #111110;
  --mat-overlay: rgba(0, 0, 0, .62);
  --mat-border: rgba(255, 255, 255, .10);
  --mat-border-strong: rgba(255, 255, 255, .22);
  --mat-text: #ecebe6;
  --mat-text-muted: #a8a69e;
  --mat-text-faint: #7a786f;
  --mat-danger: #ff6f86;
  --mat-danger-bg: rgba(255, 111, 134, .14);
  --mat-danger-text: #ff9db0;
  --mat-on-danger: #1b0710;
  --mat-thumb: #ffffff;
  --mat-success: #3ddc97;
  --mat-success-bg: rgba(61, 220, 151, .14);
  --mat-success-text: #72efbb;
  --mat-warning: #fbbf24;
  --mat-warning-bg: rgba(251, 191, 36, .14);
  --mat-warning-text: #fcd34d;
  --mat-info: #7aa2ff;
  --mat-info-bg: rgba(122, 162, 255, .14);
  --mat-info-text: #a8c1ff;
  --mat-shadow-1: 0 1px 1px rgba(0, 0, 0, .3);
  --mat-shadow-2: 0 2px 6px rgba(0, 0, 0, .4), 0 8px 20px rgba(0, 0, 0, .35);
  --mat-shadow-3: 0 12px 40px rgba(0, 0, 0, .62);
  --mat-scroll-thumb: rgba(255, 255, 255, .34);
}

/* ---- Accent, dark explicit (lighter accent, dark text on it) ---- */
:root[data-theme="dark"],
:root[data-theme="dark"] [data-app] {
  --mat-accent: color-mix(in oklab, var(--mat-app-accent, #5b5fe6) 74%, white);
  --mat-accent-hover: color-mix(in oklab, var(--mat-accent) 88%, white);
  --mat-accent-active: color-mix(in oklab, var(--mat-accent) 76%, white);
  --mat-accent-soft: color-mix(in srgb, var(--mat-accent) 16%, transparent);
  --mat-accent-soft-strong: color-mix(in srgb, var(--mat-accent) 26%, transparent);
  --mat-accent-text: color-mix(in oklab, var(--mat-accent) 78%, white);
  --mat-on-accent: #0b1020;
  --mat-focus-ring: 0 0 0 3px color-mix(in srgb, var(--mat-accent) 50%, transparent);
  --mat-selection: color-mix(in srgb, var(--mat-accent) 36%, transparent);
}

/* ---- Dark, from the system (same values as above) ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --mat-bg: #151514;
    --mat-bg-2: #1a1a18;
    --mat-surface: #1e1e1c;
    --mat-surface-2: #252523;
    --mat-surface-3: #2d2d2a;
    --mat-glass: #151514;
    --mat-nav-bg: #111110;
    --mat-overlay: rgba(0, 0, 0, .62);
    --mat-border: rgba(255, 255, 255, .10);
    --mat-border-strong: rgba(255, 255, 255, .22);
    --mat-text: #ecebe6;
    --mat-text-muted: #a8a69e;
    --mat-text-faint: #7a786f;
    --mat-danger: #ff6f86;
    --mat-danger-bg: rgba(255, 111, 134, .14);
    --mat-danger-text: #ff9db0;
  --mat-on-danger: #1b0710;
  --mat-thumb: #ffffff;
    --mat-success: #3ddc97;
    --mat-success-bg: rgba(61, 220, 151, .14);
    --mat-success-text: #72efbb;
    --mat-warning: #fbbf24;
    --mat-warning-bg: rgba(251, 191, 36, .14);
    --mat-warning-text: #fcd34d;
    --mat-info: #7aa2ff;
    --mat-info-bg: rgba(122, 162, 255, .14);
    --mat-info-text: #a8c1ff;
    --mat-shadow-1: 0 1px 1px rgba(0, 0, 0, .3);
    --mat-shadow-2: 0 2px 6px rgba(0, 0, 0, .4), 0 8px 20px rgba(0, 0, 0, .35);
    --mat-shadow-3: 0 12px 40px rgba(0, 0, 0, .62);
    --mat-scroll-thumb: rgba(255, 255, 255, .34);
  }

  :root:not([data-theme="light"]):not([data-theme="dark"]),
  :root:not([data-theme="light"]):not([data-theme="dark"]) [data-app] {
    --mat-accent: color-mix(in oklab, var(--mat-app-accent, #5b5fe6) 74%, white);
    --mat-accent-hover: color-mix(in oklab, var(--mat-accent) 88%, white);
    --mat-accent-active: color-mix(in oklab, var(--mat-accent) 76%, white);
    --mat-accent-soft: color-mix(in srgb, var(--mat-accent) 16%, transparent);
    --mat-accent-soft-strong: color-mix(in srgb, var(--mat-accent) 26%, transparent);
    --mat-accent-text: color-mix(in oklab, var(--mat-accent) 78%, white);
    --mat-on-accent: #0b1020;
    --mat-focus-ring: 0 0 0 3px color-mix(in srgb, var(--mat-accent) 50%, transparent);
    --mat-selection: color-mix(in srgb, var(--mat-accent) 36%, transparent);
  }
}

/* ==========================================================================
   MatUi · base
   Reset, typography, focus, selection, scrollbars and the few utilities every page may use.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  background: var(--mat-bg);
  color: var(--mat-text);
  font-family: var(--mat-font);
  font-size: var(--mat-fs-md);
  line-height: var(--mat-lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 650; line-height: var(--mat-lh-tight); }
h1 { font-size: var(--mat-fs-2xl); }
h2 { font-size: var(--mat-fs-xl); }
h3 { font-size: var(--mat-fs-lg); }
h4, h5, h6 { font-size: var(--mat-fs-md); }
p { margin: 0 0 var(--mat-space-3); }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
small { font-size: var(--mat-fs-xs); }
strong, b { font-weight: 650; }
hr { border: 0; border-top: 1px solid var(--mat-border); margin: var(--mat-space-6) 0; }
img, svg, video { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

a { color: var(--mat-accent-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

code, kbd, samp, pre { font-family: var(--mat-mono); font-size: .92em; }
code { background: var(--mat-surface-3); padding: .1em .4em; border-radius: var(--mat-radius-xs); }
kbd {
  background: var(--mat-surface-2);
  border: 1px solid var(--mat-border-strong);
  border-bottom-width: 2px;
  border-radius: var(--mat-radius-xs);
  padding: .05em .45em;
  font-size: var(--mat-fs-xs);
}

::selection { background: var(--mat-selection); }

/* Keyboard focus is always visible; the mouse does not get a ring. */
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--mat-focus-ring); border-radius: var(--mat-radius-sm); }

[hidden] { display: none !important; }

/* The skip link is the first focusable element of every page. */
.mat-skip {
  position: fixed;
  left: var(--mat-space-3);
  top: -80px;
  z-index: calc(var(--mat-z-toast) + 1);
  background: var(--mat-accent);
  color: var(--mat-on-accent);
  padding: var(--mat-space-2) var(--mat-space-4);
  border-radius: var(--mat-radius);
  font-weight: 600;
}
.mat-skip:focus { top: var(--mat-space-3); text-decoration: none; }

/* ---- Scrollbars: invisible until something scrolls (matui.js adds .is-scrolling for ~1 s) ---- */
/* The icon sprite sits inline at the top of the page and takes no room. */
.mat-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

* { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.is-scrolling { scrollbar-color: var(--mat-scroll-thumb) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: transparent; border-radius: var(--mat-radius-pill); border: 2px solid transparent; background-clip: content-box; }
.is-scrolling::-webkit-scrollbar-thumb { background-color: var(--mat-scroll-thumb); }

/* ---- Utilities (the only ones; no inline styles in apps) ---- */
.mat-stack { display: flex; flex-direction: column; gap: var(--mat-gap); }
.mat-stack--sm { gap: var(--mat-space-2); }
.mat-stack--lg { gap: var(--mat-space-6); }
.mat-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mat-space-3); }
.mat-row--between { justify-content: space-between; }
.mat-row--nowrap { flex-wrap: nowrap; }
.mat-grid { display: grid; gap: var(--mat-gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.mat-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mat-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mat-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .mat-grid--3, .mat-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .mat-grid--2, .mat-grid--3, .mat-grid--4 { grid-template-columns: minmax(0, 1fr); } }
.mat-muted { color: var(--mat-text-muted); }
.mat-faint { color: var(--mat-text-faint); }
.mat-mono { font-family: var(--mat-mono); }
.mat-num { text-align: right; font-variant-numeric: tabular-nums; }
.mat-nowrap { white-space: nowrap; }
.mat-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mat-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.mat-hide-sm { }
@media (max-width: 720px) { .mat-hide-sm { display: none !important; } }

/* ---- Icons: inline SVG from the sprite, sized by the font ---- */
.mat-icon {
  width: 1.15em; height: 1.15em;
  flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -.2em;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   MatUi · shell
   The frame of every Mat app (rules SHELL-01 .. SHELL-12):
     - the menu is on the LEFT, the logo ABOVE it
     - at the bottom of the menu: the 3-state theme button, the user (click = context menu), and below that the version
     - the menu scrolls SEPARATELY from the content on the right
     - the content always has a BREADCRUMB above it
     - on a phone the menu is a drawer
   ========================================================================== */

.mat-app {
  display: grid;
  grid-template-columns: var(--mat-nav-w) minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--mat-bg);
}

/* ---- The menu ---- */
.mat-nav {
  position: relative;
  z-index: var(--mat-z-nav);
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--mat-nav-bg);
  border-right: 1px solid var(--mat-border);
  padding-top: var(--mat-safe-top);
  padding-left: var(--mat-safe-left);
}

.mat-nav__brand {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--mat-space-3);
  padding: var(--mat-space-5) var(--mat-space-5) var(--mat-space-4);
}
.mat-nav__brand a { display: flex; align-items: center; gap: var(--mat-space-3); color: var(--mat-text); text-decoration: none; min-width: 0; }
/* More specific than .mat-btn (controls.css comes later in the bundle and would show it everywhere). */
.mat-nav__brand > .mat-nav__close { display: none; margin-left: auto; flex: none; }
.mat-logo {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 22%;
  background: var(--mat-accent);
  color: var(--mat-on-accent);
  overflow: hidden;
}
.mat-logo img { width: 100%; height: 100%; display: block; }
.mat-logo .mat-icon { width: 56%; height: 56%; }
.mat-logo--sm { width: 28px; height: 28px; }
.mat-logo--lg { width: 56px; height: 56px; }
.mat-logo--xl { width: 88px; height: 88px; }
.mat-nav__name { font-size: var(--mat-fs-lg); font-weight: 650; line-height: 1.1; }
.mat-nav__brand a > span:last-child { min-width: 0; }
.mat-nav__tagline { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--mat-fs-xs); font-weight: 500; color: var(--mat-text-muted); margin-top: 2px; }

/* The part of the menu that scrolls; the brand above and the foot below stay in place. */
.mat-nav__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--mat-space-1) var(--mat-space-3) var(--mat-space-3);
}
.mat-nav__list { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.mat-nav__group {
  padding: var(--mat-space-5) var(--mat-space-3) var(--mat-space-1);
  font-size: var(--mat-fs-sm);
  font-weight: 600;
  color: var(--mat-text-muted);
}
.mat-nav__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--mat-space-3);
  min-height: var(--mat-control-h);
  padding: 0 var(--mat-space-3);
  border-radius: var(--mat-radius);
  color: var(--mat-text);
  font-weight: 500;
  text-decoration: none;
  transition: background var(--mat-dur-fast) var(--mat-ease), color var(--mat-dur-fast) var(--mat-ease);
}
.mat-nav__item .mat-icon { font-size: 1.2rem; color: var(--mat-text-muted); }
.mat-nav__item:hover { background: var(--mat-surface-3); text-decoration: none; }
/* The current page: a tint of the accent behind the whole item and the accent on its icon. Never a bar at one edge of a rounded item (SHELL-02). */
.mat-nav__item.is-active,
.mat-nav__item[aria-current="page"] { background: var(--mat-accent-soft-strong); font-weight: 600; }
.mat-nav__item.is-active .mat-icon,
.mat-nav__item[aria-current="page"] .mat-icon { color: var(--mat-accent-text); }
/* Keyboard focus: inside the menu the ring is drawn inward (the submenu clips what is outside its box). */
.mat-nav__item:focus-visible, .mat-switcher:focus-visible { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--mat-accent) 70%, transparent); border-radius: var(--mat-radius); }

/* ---- Badges in the menu (SHELL-14): a count at the right end of the item, or a dot for "something new" ---- */
.mat-nav__badge {
  margin-left: auto;
  flex: none;
  min-width: 22px; height: 22px;
  padding: 0 7px;
  display: inline-grid; place-items: center;
  border-radius: var(--mat-radius-pill);
  background: var(--mat-accent);
  color: var(--mat-on-accent);
  font-size: var(--mat-fs-xs);
  font-weight: 650;
  line-height: 1;
}
.mat-nav__badge--ok { background: var(--mat-success-bg); color: var(--mat-success-text); }
.mat-nav__badge--warn { background: var(--mat-warning-bg); color: var(--mat-warning-text); }
.mat-nav__badge--error { background: var(--mat-danger); color: var(--mat-on-danger); }
.mat-nav__badge--info { background: var(--mat-info-bg); color: var(--mat-info-text); }
.mat-nav__badge--plain { background: var(--mat-surface-3); color: var(--mat-text-muted); }
.mat-nav__badge--dot { min-width: 0; width: 9px; height: 9px; padding: 0; }
.mat-nav__badge--dot.mat-nav__badge--ok { background: var(--mat-success); }
.mat-nav__badge--dot.mat-nav__badge--warn { background: var(--mat-warning); }
.mat-nav__badge--dot.mat-nav__badge--info { background: var(--mat-info); }
.mat-nav__badge--dot.mat-nav__badge--plain { background: var(--mat-text-faint); }

/* ---- Submenus (SHELL-13): a parent opens its children; the branch with the current page is open ---- */
button.mat-nav__item { width: 100%; border: 0; background: transparent; font: inherit; font-weight: 560; text-align: left; cursor: pointer; }
button.mat-nav__item:hover { background: var(--mat-surface-3); }
.mat-nav__chev { margin-left: auto; flex: none; color: var(--mat-text-muted); font-size: 1rem; transition: transform var(--mat-dur) var(--mat-ease); }
.mat-nav__badge + .mat-nav__chev { margin-left: var(--mat-space-2); }
.mat-nav__branch.is-open > .mat-nav__parent .mat-nav__chev { transform: rotate(180deg); }
.mat-nav__branch.is-current > .mat-nav__parent { color: var(--mat-accent-text); }
/* the sum of the children's badges stands in for them while the branch is closed */
.mat-nav__branch.is-open > .mat-nav__parent .mat-nav__badge--sum { display: none; }
.mat-nav__sub {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows var(--mat-dur) var(--mat-ease), visibility 0s linear var(--mat-dur);
}
.mat-nav__branch.is-open > .mat-nav__sub { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
.mat-nav-init .mat-nav__sub, .mat-nav-init .mat-nav__chev { transition: none; }
.mat-nav__sub > .mat-nav__list {
  min-height: 0;
  overflow: hidden;
  margin: 2px 0 0 calc(var(--mat-space-3) + .6rem);
  padding-left: var(--mat-space-2);
  border-left: 1px solid var(--mat-border-strong);
}
.mat-nav__item--sub { min-height: var(--mat-control-h-sm); font-size: var(--mat-fs-sm); padding-left: var(--mat-space-3); }

/* ---- More than one menu (SHELL-15): the switcher under the logo; only the current menu's items are shown ---- */
.mat-nav__switch { flex: none; padding: 0 var(--mat-space-3) var(--mat-space-2); }
.mat-switcher {
  position: relative;
  width: 100%;
  display: flex; align-items: center; gap: var(--mat-space-3);
  min-height: var(--mat-control-h-lg);
  padding: var(--mat-space-2) var(--mat-space-3);
  background: var(--mat-surface);
  border: 1px solid var(--mat-border-strong);
  border-radius: var(--mat-radius);
  color: var(--mat-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--mat-dur-fast) var(--mat-ease), border-color var(--mat-dur-fast) var(--mat-ease);
}
.mat-switcher:hover, .mat-switcher[aria-expanded="true"] { background: var(--mat-surface-2); border-color: var(--mat-text-faint); }
.mat-switcher__icon { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--mat-radius-sm); background: var(--mat-surface-3); color: var(--mat-accent-text); }
.mat-switcher__icon .mat-icon { font-size: 1.1rem; }
.mat-switcher__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.mat-switcher__text small { font-size: var(--mat-fs-xs); color: var(--mat-text-muted); }
.mat-switcher__name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mat-switcher__chev { flex: none; color: var(--mat-text-muted); font-size: 1rem; }
.mat-switcher__dot { position: absolute; top: 7px; right: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--mat-warning); box-shadow: 0 0 0 2px var(--mat-surface); }
.mat-switcher__dot[hidden] { display: none; }
.mat-nav__scroll[hidden] { display: none; }
.mat-menu__item .mat-nav__badge { margin-left: auto; }
.mat-menu__item[aria-checked="true"] { font-weight: 650; color: var(--mat-accent-text); }
.mat-menu__check { margin-left: var(--mat-space-2); flex: none; visibility: hidden; }
.mat-menu__item[aria-checked="true"] .mat-menu__check { visibility: visible; }
.mat-menu__item .mat-nav__badge + .mat-menu__check { margin-left: var(--mat-space-2); }
.mat-menu__item > span:not([class]) { flex: 1 1 auto; }

/* The switcher at the foot of the menu (SHELL-15), directly above the user; the foot keeps its order whatever order the markup has. */
.mat-nav__switch--foot { padding: 0; }
.mat-nav__foot > .mat-nav__switch { order: 0; }
.mat-nav__foot > .mat-nav__account { order: 1; }
.mat-nav__foot > .mat-nav__version { order: 2; }

/* Menus in groups (SHELL-15): a parent entry in the popup opens the menus below it, one level deep. The group with the current menu is open; a closed parent
   carries the dot of the menus inside it that ask for attention (the sum, as in a submenu of the items). */
.mat-menu__parent .mat-nav__badge[hidden] { display: none; }
.mat-menu__chev { flex: none; margin-left: var(--mat-space-2); color: var(--mat-text-muted); font-size: 1rem; transition: transform var(--mat-dur) var(--mat-ease); }
.mat-menu__parent[aria-expanded="true"] .mat-menu__chev { transform: rotate(180deg); }
.mat-menu__parent[aria-expanded="true"] .mat-nav__badge--sum { display: none; }
.mat-menu__sub { margin: 2px 0 var(--mat-space-1) calc(var(--mat-space-3) + .6rem); padding-left: var(--mat-space-2); border-left: 1px solid var(--mat-border-strong); }
.mat-menu .mat-menu__item--sub { min-height: var(--mat-control-h-sm); font-size: var(--mat-fs-sm); }

/* ---- The foot of the menu: theme button + user (context menu) + version ---- */
.mat-nav__foot {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--mat-space-2);
  padding: var(--mat-space-3) var(--mat-space-3) calc(var(--mat-space-3) + var(--mat-safe-bottom));
  border-top: 1px solid var(--mat-border);
}
.mat-nav__account { display: flex; align-items: center; gap: var(--mat-space-2); }

.mat-user {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--mat-space-3);
  padding: var(--mat-space-2) var(--mat-space-3);
  min-height: var(--mat-control-h-lg);
  background: transparent;
  border: 0;
  border-radius: var(--mat-radius);
  text-align: left;
  cursor: pointer;
  color: var(--mat-text);
  transition: background var(--mat-dur-fast) var(--mat-ease);
}
.mat-user:hover, .mat-user[aria-expanded="true"] { background: var(--mat-surface-3); }
.mat-avatar {
  flex: none;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--mat-accent);
  color: var(--mat-on-accent);
  font-size: var(--mat-fs-sm);
  font-weight: 650;
}
.mat-avatar--lg { width: 56px; height: 56px; font-size: var(--mat-fs-xl); }
.mat-user__text { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.mat-user__name { font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mat-user__role { font-size: var(--mat-fs-xs); color: var(--mat-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mat-user__chev { margin-left: auto; color: var(--mat-text-muted); font-size: 1rem; }

/* The 3-state button: system -> light -> dark. It shows the icon of the current state. */
.mat-theme {
  flex: none;
  display: grid; place-items: center;
  width: var(--mat-control-h); height: var(--mat-control-h);
  border: 1px solid var(--mat-border);
  border-radius: var(--mat-radius);
  background: var(--mat-surface);
  color: var(--mat-text-muted);
  cursor: pointer;
  transition: background var(--mat-dur-fast) var(--mat-ease), color var(--mat-dur-fast) var(--mat-ease);
}
.mat-theme:hover { background: var(--mat-surface-3); color: var(--mat-text); }
.mat-theme .mat-icon { font-size: 1.15rem; }
.mat-theme [data-theme-icon] { display: none; }
.mat-theme[data-theme-state="system"] [data-theme-icon="system"],
.mat-theme[data-theme-state="light"] [data-theme-icon="light"],
.mat-theme[data-theme-state="dark"] [data-theme-icon="dark"] { display: inline-block; }

.mat-nav__version {
  font-size: var(--mat-fs-xs);
  color: var(--mat-text-muted);
  padding: 0 var(--mat-space-3);
  font-family: var(--mat-mono);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- The content side ---- */
.mat-main {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
}

.mat-topbar {
  position: sticky;
  top: 0;
  z-index: var(--mat-z-topbar);
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--mat-space-3);
  min-height: var(--mat-topbar-h);
  padding: 0 var(--mat-content-pad);
  background: var(--mat-glass);
  border-bottom: 1px solid var(--mat-border);
}
.mat-burger {
  display: none;
  flex: none;
  place-items: center;
  width: var(--mat-control-h); height: var(--mat-control-h);
  margin-left: calc(var(--mat-space-2) * -1);
  border: 0;
  border-radius: var(--mat-radius);
  background: transparent;
  color: var(--mat-text);
  cursor: pointer;
}
.mat-burger:hover { background: var(--mat-surface-3); }
.mat-burger .mat-icon { font-size: 1.35rem; }

/* The breadcrumb: the last item is the current page and is not a link. */
.mat-crumbs { min-width: 0; flex: 1 1 auto; }
.mat-crumbs ol { list-style: none; display: flex; align-items: center; flex-wrap: nowrap; gap: var(--mat-space-2); min-width: 0; }
.mat-crumbs li { display: flex; align-items: center; gap: var(--mat-space-2); min-width: 0; font-size: var(--mat-fs-sm); color: var(--mat-text-muted); white-space: nowrap; }
.mat-crumbs li + li::before { content: "/"; color: var(--mat-text-faint); flex: none; }
.mat-crumbs a { color: var(--mat-text-muted); overflow: hidden; text-overflow: ellipsis; }
.mat-crumbs a:hover { color: var(--mat-accent-text); }
.mat-crumbs li[aria-current="page"] { color: var(--mat-text); font-weight: 620; overflow: hidden; text-overflow: ellipsis; }
.mat-crumbs .mat-icon { font-size: 1rem; }

/* Icons at the right end of the bar (SHELL-17): things of the whole app (search, notifications, help), icons only. */
.mat-topbar__actions {
  flex: none;
  display: flex; align-items: center; gap: var(--mat-space-1);
  margin-left: auto;
  margin-right: calc(var(--mat-space-2) * -1);
}
.mat-topbar__actions .mat-btn { position: relative; }
.mat-topbar__badge {
  position: absolute; top: 3px; right: 3px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  display: inline-grid; place-items: center;
  border-radius: var(--mat-radius-pill);
  background: var(--mat-accent);
  color: var(--mat-on-accent);
  font-size: var(--mat-fs-xs);
  font-weight: 650;
  line-height: 1;
  pointer-events: none;
}
.mat-topbar__badge--warn { background: var(--mat-warning-bg); color: var(--mat-warning-text); }
.mat-topbar__badge--error { background: var(--mat-danger); color: var(--mat-on-danger); }
.mat-topbar__badge--dot { top: 9px; right: 9px; min-width: 0; width: 8px; height: 8px; padding: 0; }
.mat-topbar__badge--dot.mat-topbar__badge--warn { background: var(--mat-warning); }

.mat-page {
  width: 100%;
  max-width: var(--mat-content-max);
  margin: 0 auto;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--mat-space-6);
  padding: var(--mat-space-6) var(--mat-content-pad) calc(var(--mat-space-12) + var(--mat-safe-bottom));
}
.mat-page--narrow { max-width: 780px; }
.mat-page--wide { max-width: none; }

.mat-page__head { display: flex; align-items: flex-start; gap: var(--mat-space-4); }
.mat-page__title { min-width: 0; }
.mat-page__sub { margin-top: var(--mat-space-1); color: var(--mat-text-muted); }

/* Section inside a page: a title with an optional lead, then content. */
.mat-section { display: flex; flex-direction: column; gap: var(--mat-space-4); }
.mat-section__head { display: flex; flex-direction: column; gap: var(--mat-space-1); }
.mat-section__lead { color: var(--mat-text-muted); max-width: 70ch; }

/* ---- Footer (SHELL-18): after the content, in the scrolling area; legal links on one side, who made it on the other ---- */
.mat-footer {
  flex: none;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--mat-space-2) var(--mat-space-6);
  padding: var(--mat-space-4) max(var(--mat-content-pad), calc((100% - var(--mat-content-max)) / 2 + var(--mat-content-pad)));
  padding-bottom: calc(var(--mat-space-4) + var(--mat-safe-bottom));
  border-top: 1px solid var(--mat-border);
  color: var(--mat-text-muted);
  font-size: var(--mat-fs-sm);
}
.mat-footer__text { margin: 0; }
.mat-footer__links { display: flex; flex-wrap: wrap; gap: var(--mat-space-1) var(--mat-space-4); margin: 0; padding: 0; list-style: none; }
.mat-footer a { color: inherit; text-decoration: none; }
.mat-footer a:hover { color: var(--mat-accent-text); text-decoration: underline; }
.mat-footer--center { justify-content: center; text-align: center; }
.mat-footer--plain { border-top: 0; }
/* A page that is followed by a footer needs less room at its end, and the footer follows the width of the page. */
.mat-page:has(+ .mat-footer) { padding-bottom: var(--mat-space-6); }
.mat-page--narrow + .mat-footer { --mat-content-max: 780px; }
.mat-page--wide + .mat-footer { padding-left: var(--mat-content-pad); padding-right: var(--mat-content-pad); }

/* ---- Drawer: below 900 px the menu slides in over the content ---- */
.mat-backdrop {
  position: fixed; inset: 0;
  z-index: calc(var(--mat-z-nav) - 1);
  background: var(--mat-overlay);
  opacity: 0; pointer-events: none;
  transition: opacity var(--mat-dur-slow) var(--mat-ease);
}

@media (max-width: 900px) {
  .mat-app { grid-template-columns: minmax(0, 1fr); }
  /* The drawer and its backdrop cover the top bar (which has the burger): the logo stays visible above the items, and the X closes it. */
  .mat-backdrop { z-index: calc(var(--mat-z-topbar) + 1); }
  .mat-nav__brand > .mat-nav__close { display: inline-flex; }
  .mat-nav {
    position: fixed;
    z-index: calc(var(--mat-z-topbar) + 2);
    inset: 0 auto 0 0;
    width: min(86vw, 320px);
    transform: translateX(-102%);
    transition: transform var(--mat-dur-slow) var(--mat-ease), visibility 0s linear var(--mat-dur-slow);
    visibility: hidden;
    box-shadow: var(--mat-shadow-3);
  }
  .mat-app.is-nav-open .mat-nav { transform: none; visibility: visible; transition-delay: 0s; }
  .mat-app.is-nav-open .mat-backdrop { opacity: 1; pointer-events: auto; }
  .mat-burger { display: inline-grid; }
  .mat-topbar { padding-top: var(--mat-safe-top); padding-left: calc(var(--mat-content-pad) + var(--mat-safe-left)); padding-right: calc(var(--mat-content-pad) + var(--mat-safe-right)); }
}

/* Phones: of the breadcrumb only the last two items stay. */
@media (max-width: 600px) {
  .mat-crumbs li:not(:nth-last-child(-n+2)) { display: none; }
  .mat-crumbs li:nth-last-child(2)::before { content: none; }
  .mat-page { padding-top: var(--mat-space-5); gap: var(--mat-space-5); }
}

html.mat-lock { overflow: hidden; }

/* ---- Sign-in and other pages without a menu ---- */
.mat-auth {
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center;
  padding: var(--mat-space-6) var(--mat-space-4);
  background: var(--mat-bg);
}
/* A footer under the card of a page without a menu (SHELL-11): the card stays centred, the footer sits at the bottom. */
.mat-auth:has(> .mat-footer) { grid-template-rows: minmax(0, 1fr) auto; padding-bottom: 0; }
.mat-auth > .mat-footer { justify-self: stretch; width: 100%; }
.mat-auth__card {
  width: min(420px, 100%);
  display: flex; flex-direction: column; gap: var(--mat-space-5);
  padding: var(--mat-space-8) var(--mat-space-6);
  background: var(--mat-surface);
  border: 1px solid var(--mat-border);
  border-radius: var(--mat-radius-lg);
}
.mat-auth__brand { display: flex; flex-direction: column; align-items: center; gap: var(--mat-space-3); text-align: center; }
.mat-auth__brand .mat-logo { width: 56px; height: 56px; }

/* ==========================================================================
   MatUi · controls
   Buttons, button row, form fields, cards, badges and pills, alerts, toasts and the small building blocks.
   ========================================================================== */

/* ---- Buttons --------------------------------------------------------------------------------------------------
   Four kinds only: primary, secondary, ghost, danger. A button with an icon puts the icon BEFORE the label. */
.mat-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mat-space-2);
  min-height: var(--mat-control-h);
  padding: 0 var(--mat-space-4);
  border: 1px solid transparent;
  border-radius: var(--mat-radius);
  background: var(--mat-surface);
  color: var(--mat-text);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: background var(--mat-dur-fast) var(--mat-ease), border-color var(--mat-dur-fast) var(--mat-ease),
              color var(--mat-dur-fast) var(--mat-ease), transform var(--mat-dur-fast) var(--mat-ease), box-shadow var(--mat-dur-fast) var(--mat-ease);
}
.mat-btn:hover { text-decoration: none; }
.mat-btn:active:not(:disabled) { transform: translateY(1px); }
.mat-btn:disabled, .mat-btn.is-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }

.mat-btn--primary { background: var(--mat-accent); color: var(--mat-on-accent); }
.mat-btn--primary:hover { background: var(--mat-accent-hover); }
.mat-btn--primary:active:not(:disabled) { background: var(--mat-accent-active); }

.mat-btn--secondary { background: var(--mat-surface); border-color: var(--mat-border-strong); }
.mat-btn--secondary:hover { background: var(--mat-surface-3); }

.mat-btn--ghost { background: transparent; color: var(--mat-text-muted); }
.mat-btn--ghost:hover { background: var(--mat-surface-3); color: var(--mat-text); }

.mat-btn--danger { background: var(--mat-surface); border-color: color-mix(in srgb, var(--mat-danger) 45%, transparent); color: var(--mat-danger-text); }
.mat-btn--danger:hover { background: var(--mat-danger-bg); border-color: var(--mat-danger); }
.mat-btn--danger.mat-btn--solid { background: var(--mat-danger); border-color: var(--mat-danger); color: var(--mat-on-danger); }
.mat-btn--danger.mat-btn--solid:hover { background: color-mix(in oklab, var(--mat-danger) 86%, black); }

.mat-btn--sm { min-height: var(--mat-control-h-sm); padding: 0 var(--mat-space-3); font-size: var(--mat-fs-sm); border-radius: var(--mat-radius-sm); }
.mat-btn--lg { min-height: var(--mat-control-h-lg); padding: 0 var(--mat-space-6); font-size: var(--mat-fs-lg); }
.mat-btn--icon { padding: 0; width: var(--mat-control-h); }
.mat-btn--icon.mat-btn--sm { width: var(--mat-control-h-sm); }
.mat-btn--block { display: flex; width: 100%; }
.mat-btn .mat-icon { font-size: 1.15em; }
.mat-btn.is-loading { position: relative; color: transparent; pointer-events: none; }
.mat-btn.is-loading::after {
  content: "";
  position: absolute; inset: 0; margin: auto;
  width: 1.1em; height: 1.1em;
  border: 2px solid var(--mat-on-accent); border-right-color: transparent;
  border-radius: 50%;
  animation: mat-spin .7s linear infinite;
}
@keyframes mat-spin { to { transform: rotate(360deg); } }

/* ---- Button row ------------------------------------------------------------------------------------------------
   Always UNDER the content of a create/edit form, in ONE line, positive to negative:
   primary (Save) -> secondary / ghost (Back) -> spacer -> danger (Delete). The order is enforced here, whatever the markup order. */
.mat-btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mat-space-3);
  padding-top: var(--mat-space-5);
  margin-top: var(--mat-space-2);
  border-top: 1px solid var(--mat-border);
}
.mat-btn-row > .mat-btn, .mat-actions > .mat-btn { order: 1; }
.mat-btn-row > .mat-btn--primary, .mat-actions > .mat-btn--primary { order: 0; }
.mat-btn-row > .mat-btn--danger, .mat-btn-row > .mat-btn--end, .mat-actions > .mat-btn--danger, .mat-actions > .mat-btn--end { order: 3; }
.mat-btn-row__spacer { order: 2; flex: 1 1 var(--mat-space-6); min-width: var(--mat-space-4); }
.mat-btn-row--plain { border-top: 0; padding-top: 0; margin-top: 0; }
.mat-btn-row--sticky {
  position: sticky; bottom: 0;
  margin-inline: calc(var(--mat-space-4) * -1);
  padding: var(--mat-space-3) var(--mat-space-4) calc(var(--mat-space-3) + var(--mat-safe-bottom));
  background: var(--mat-glass);
  border-top: 1px solid var(--mat-border);
}
/* Actions under a list: left aligned, a danger action keeps its distance. */
.mat-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mat-space-3); }

/* ---- Cards ---------------------------------------------------------------------------------------------------- */
.mat-card {
  background: var(--mat-surface);
  border: 1px solid var(--mat-border);
  border-radius: var(--mat-radius-lg);
  box-shadow: var(--mat-shadow-1);
  min-width: 0;
}
.mat-card__head { display: flex; align-items: center; gap: var(--mat-space-3); padding: var(--mat-space-4) var(--mat-space-6); border-bottom: 1px solid var(--mat-border); }
.mat-card__head .mat-icon { font-size: 1.2rem; color: var(--mat-accent-text); }
.mat-card__title { font-size: var(--mat-fs-lg); font-weight: 650; }
.mat-card__sub { color: var(--mat-text-muted); font-size: var(--mat-fs-sm); }
.mat-card__body { padding: var(--mat-space-6); }
.mat-card__foot { padding: var(--mat-space-4) var(--mat-space-6); border-top: 1px solid var(--mat-border); }
.mat-card--flush > .mat-card__body { padding: 0; }
@media (max-width: 600px) { .mat-card__head, .mat-card__body, .mat-card__foot { padding-inline: var(--mat-space-5); } }

a.mat-card, .mat-card--link { display: block; color: inherit; text-decoration: none; transition: border-color var(--mat-dur) var(--mat-ease), background var(--mat-dur) var(--mat-ease); }
a.mat-card:hover, .mat-card--link:hover { border-color: var(--mat-text-faint); background: var(--mat-surface-2); text-decoration: none; }
.mat-card--accent { border-color: var(--mat-accent); }

/* ---- Badges, pills, chips, tags ---------------------------------------------------------------------------------
   Colour is never the only information: a pill always carries text. */
.mat-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--mat-radius-pill);
  background: var(--mat-accent); color: var(--mat-on-accent);
  font-size: var(--mat-fs-xs); font-weight: 650; line-height: 1;
}
.mat-badge--soft { background: var(--mat-accent-soft-strong); color: var(--mat-accent-text); }

.mat-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px;
  border-radius: var(--mat-radius-pill);
  background: var(--mat-surface-3); color: var(--mat-text-muted);
  font-size: var(--mat-fs-xs); font-weight: 650; white-space: nowrap;
}
.mat-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.mat-pill--ok { background: var(--mat-success-bg); color: var(--mat-success-text); }
.mat-pill--warn { background: var(--mat-warning-bg); color: var(--mat-warning-text); }
.mat-pill--error { background: var(--mat-danger-bg); color: var(--mat-danger-text); }
.mat-pill--info { background: var(--mat-info-bg); color: var(--mat-info-text); }
.mat-pill--accent { background: var(--mat-accent-soft-strong); color: var(--mat-accent-text); }
.mat-pill--busy::before { animation: mat-pulse 1.2s ease-in-out infinite; }
.mat-pill--plain::before { content: none; }
@keyframes mat-pulse { 50% { opacity: .25; } }

.mat-tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: var(--mat-radius-xs); background: var(--mat-surface-3); color: var(--mat-text-muted); font-size: var(--mat-fs-xs); font-weight: 600; }

.mat-chips { display: flex; flex-wrap: wrap; gap: var(--mat-space-2); }
.mat-chip {
  display: inline-flex; align-items: center; gap: var(--mat-space-2);
  min-height: var(--mat-control-h-sm); padding: 0 var(--mat-space-2) 0 var(--mat-space-3);
  border-radius: var(--mat-radius-pill);
  background: var(--mat-accent-soft-strong); color: var(--mat-accent-text);
  font-size: var(--mat-fs-sm); font-weight: 600;
}
.mat-chip__x { display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.mat-chip__x:hover { background: var(--mat-accent-soft-strong); }

/* ---- Alerts and toasts ------------------------------------------------------------------------------------------ */
.mat-alert {
  display: flex; align-items: flex-start; gap: var(--mat-space-3);
  padding: var(--mat-space-3) var(--mat-space-4);
  border: 1px solid transparent; border-radius: var(--mat-radius);
  background: var(--mat-info-bg); color: var(--mat-info-text);
}
.mat-alert > .mat-icon { margin-top: 2px; font-size: 1.15rem; }
.mat-alert--info { background: var(--mat-info-bg); color: var(--mat-info-text); }
.mat-alert__body { flex: 1 1 auto; min-width: 0; color: var(--mat-text); }
.mat-alert__body strong { color: inherit; }
.mat-alert--success { background: var(--mat-success-bg); color: var(--mat-success-text); }
.mat-alert--warning { background: var(--mat-warning-bg); color: var(--mat-warning-text); }
.mat-alert--danger { background: var(--mat-danger-bg); color: var(--mat-danger-text); }
.mat-alert__close { flex: none; border: 0; background: transparent; color: inherit; cursor: pointer; border-radius: 50%; width: 28px; height: 28px; display: grid; place-items: center; }
.mat-alert__close:hover { background: var(--mat-surface-3); }

.mat-toasts {
  position: fixed; z-index: var(--mat-z-toast);
  right: calc(var(--mat-space-4) + var(--mat-safe-right)); bottom: calc(var(--mat-space-4) + var(--mat-safe-bottom));
  display: flex; flex-direction: column; gap: var(--mat-space-2);
  width: min(380px, calc(100vw - 2 * var(--mat-space-4)));
  pointer-events: none;
}
.mat-toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: var(--mat-space-3);
  padding: var(--mat-space-3) var(--mat-space-4);
  background: var(--mat-surface); color: var(--mat-text);
  border: 1px solid var(--mat-border-strong);
  border-radius: var(--mat-radius); box-shadow: var(--mat-shadow-2);
  animation: mat-toast-in var(--mat-dur-slow) var(--mat-ease);
}
/* The tone is in the icon (and the words), not in a coloured edge. */
.mat-toast > .mat-icon { margin-top: 2px; font-size: 1.15rem; color: var(--mat-info-text); }
.mat-toast--success > .mat-icon { color: var(--mat-success-text); }
.mat-toast--warning > .mat-icon { color: var(--mat-warning-text); }
.mat-toast--danger > .mat-icon { color: var(--mat-danger-text); }
@keyframes mat-toast-in { from { opacity: 0; transform: translateY(10px); } }
@media (max-width: 600px) { .mat-toasts { left: var(--mat-space-4); right: var(--mat-space-4); width: auto; } }

/* ---- Small blocks -------------------------------------------------------------------------------------------------- */
.mat-empty { display: flex; flex-direction: column; align-items: center; gap: var(--mat-space-3); padding: var(--mat-space-12) var(--mat-space-6); text-align: center; color: var(--mat-text-muted); }
.mat-empty__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--mat-accent-soft); color: var(--mat-accent-text); font-size: 1.8rem; }
.mat-empty__title { font-size: var(--mat-fs-lg); font-weight: 650; color: var(--mat-text); }

.mat-kv { display: grid; grid-template-columns: minmax(110px, 200px) minmax(0, 1fr); gap: var(--mat-space-3) var(--mat-space-5); margin: 0; }
.mat-kv dt { color: var(--mat-text-muted); }
.mat-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) { .mat-kv { grid-template-columns: minmax(0, 1fr); gap: 2px; } .mat-kv dd { margin-bottom: var(--mat-space-3); } }

.mat-code {
  position: relative;
  padding: var(--mat-space-3) var(--mat-space-4);
  background: var(--mat-surface-3);
  border: 1px solid var(--mat-border);
  border-radius: var(--mat-radius);
  font-family: var(--mat-mono); font-size: var(--mat-fs-sm);
  white-space: pre; overflow-x: auto; tab-size: 2;
}
.mat-code[data-copy] { padding-right: 52px; cursor: pointer; }
/* The parts of highlighted code. They use the colours of the status texts, which are readable on the grey of the block in both modes. */
.mat-code__tag, .mat-code__kw { color: var(--mat-info-text); }
.mat-code__attr, .mat-code__num { color: var(--mat-warning-text); }
.mat-code__str { color: var(--mat-success-text); }
.mat-code__pun { color: var(--mat-text-muted); }
.mat-code__com { color: var(--mat-text-muted); font-style: italic; }

.mat-meter { height: 8px; background: var(--mat-surface-3); border-radius: var(--mat-radius-pill); overflow: hidden; }
.mat-meter__fill { height: 100%; width: var(--mat-meter, 0%); background: var(--mat-accent); border-radius: inherit; transition: width var(--mat-dur-slow) var(--mat-ease); }
.mat-meter__fill[data-tone="ok"] { background: var(--mat-success); }
.mat-meter__fill[data-tone="warn"] { background: var(--mat-warning); }
.mat-meter__fill[data-tone="error"] { background: var(--mat-danger); }

.mat-skeleton { display: block; min-height: 1em; border-radius: var(--mat-radius-sm); background: linear-gradient(90deg, var(--mat-surface-3) 25%, var(--mat-surface-2) 50%, var(--mat-surface-3) 75%); background-size: 200% 100%; animation: mat-shimmer 1.4s linear infinite; }
@keyframes mat-shimmer { to { background-position: -200% 0; } }

.mat-divider { border: 0; border-top: 1px solid var(--mat-border); margin: var(--mat-space-4) 0; }

/* Steps of a wizard. */
.mat-steps { display: flex; gap: var(--mat-space-2); list-style: none; }
.mat-steps li { flex: 1 1 0; height: 6px; border-radius: var(--mat-radius-pill); background: var(--mat-surface-3); }
.mat-steps li.is-done { background: color-mix(in srgb, var(--mat-accent) 55%, transparent); }
.mat-steps li.is-active { background: var(--mat-accent); }

/* Tooltip for icon buttons: [data-tip="Edit"]. Real information never lives only in a tooltip. */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%) translateY(2px);
  padding: 4px 8px; border-radius: var(--mat-radius-xs);
  background: var(--mat-text); color: var(--mat-bg);
  font-size: var(--mat-fs-xs); font-weight: 600; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity var(--mat-dur-fast) var(--mat-ease), transform var(--mat-dur-fast) var(--mat-ease);
  z-index: var(--mat-z-menu);
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: translateX(-50%); }
@media (hover: none) { [data-tip]::after { display: none; } }

/* ==========================================================================
   More building blocks: button groups, spinners, progress, accordions, list groups, avatars, indicators, stats, timelines, text, pictures.
   ========================================================================== */

/* ---- Button group: buttons that belong together share one border; a toolbar holds several groups ---- */
.mat-btn-group { display: inline-flex; vertical-align: middle; }
.mat-btn-group > .mat-btn { border-radius: 0; }
.mat-btn-group > .mat-btn + .mat-btn, .mat-btn-group > .mat-btn-check + .mat-btn { margin-left: -1px; }
.mat-btn-group > .mat-btn:first-child, .mat-btn-group > .mat-btn-check:first-child + .mat-btn { border-top-left-radius: var(--mat-radius); border-bottom-left-radius: var(--mat-radius); }
.mat-btn-group > .mat-btn:last-child { border-top-right-radius: var(--mat-radius); border-bottom-right-radius: var(--mat-radius); }
.mat-btn-group > .mat-btn:hover, .mat-btn-group > .mat-btn:focus-visible, .mat-btn-group > .mat-btn.is-active, .mat-btn-group > .mat-btn-check:checked + .mat-btn { position: relative; z-index: 1; }
.mat-btn-group > .mat-btn.is-active { background: var(--mat-accent-soft-strong); border-color: var(--mat-accent); color: var(--mat-accent-text); }
.mat-btn-group--vertical { flex-direction: column; }
.mat-btn-group--vertical > .mat-btn + .mat-btn { margin-left: 0; margin-top: -1px; }
.mat-btn-group--vertical > .mat-btn:first-child { border-radius: var(--mat-radius) var(--mat-radius) 0 0; }
.mat-btn-group--vertical > .mat-btn:last-child { border-radius: 0 0 var(--mat-radius) var(--mat-radius); }
.mat-btn-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mat-space-3); }
.mat-btn__caret { margin-left: var(--mat-space-1); font-size: 1em; opacity: .75; }

/* ---- Spinner: something is loading and nothing else can be shown yet. Give it a text (role="status"). ---- */
.mat-spinner { display: inline-block; flex: none; width: 1.5rem; height: 1.5rem; border: 3px solid var(--mat-surface-3); border-top-color: var(--mat-accent); border-radius: 50%; animation: mat-spin .75s linear infinite; }
.mat-spinner--sm { width: 1rem; height: 1rem; border-width: 2px; }
.mat-spinner--lg { width: 2.5rem; height: 2.5rem; border-width: 4px; }
.mat-loading { display: flex; align-items: center; justify-content: center; gap: var(--mat-space-3); padding: var(--mat-space-8); color: var(--mat-text-muted); }
/* With reduced motion the spinner turns slowly instead of stopping: a spinner that does not move says nothing is happening (the one exception to A11Y-05). */
@media (prefers-reduced-motion: reduce) { .mat-spinner { animation-duration: 3s !important; } }

/* ---- Progress (the meter): sizes, tones, stripes, unknown length, several parts. The value is written next to the bar, not on it. ---- */
.mat-meter--sm { height: 4px; }
.mat-meter--lg { height: 18px; }
.mat-meter { position: relative; }
.mat-meter--striped .mat-meter__fill { background-image: linear-gradient(45deg, color-mix(in srgb, var(--mat-on-accent) 28%, transparent) 25%, transparent 25%, transparent 50%, color-mix(in srgb, var(--mat-on-accent) 28%, transparent) 50%, color-mix(in srgb, var(--mat-on-accent) 28%, transparent) 75%, transparent 75%); background-size: 1rem 1rem; }
.mat-meter--animated .mat-meter__fill { animation: mat-stripes 1s linear infinite; }
@keyframes mat-stripes { to { background-position: 1rem 0; } }
.mat-meter--indeterminate .mat-meter__fill { width: 35%; animation: mat-indeterminate 1.4s var(--mat-ease) infinite; }
@keyframes mat-indeterminate { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
.mat-meter--stack { display: flex; }
.mat-meter--stack > .mat-meter__fill { flex: none; border-radius: 0; }

/* ---- Accordion and collapse: native <details>; with the same name only one is open ---- */
.mat-accordion { display: flex; flex-direction: column; background: var(--mat-surface); border: 1px solid var(--mat-border); border-radius: var(--mat-radius-lg); overflow: hidden; }
.mat-accordion__item { border-top: 1px solid var(--mat-border); }
.mat-accordion__item:first-child { border-top: 0; }
.mat-accordion__item > summary, .mat-collapse > summary { display: flex; align-items: center; gap: var(--mat-space-3); min-height: var(--mat-control-h-lg); padding: var(--mat-space-3) var(--mat-space-5); font-weight: 600; cursor: pointer; list-style: none; }
.mat-accordion__item > summary::-webkit-details-marker, .mat-collapse > summary::-webkit-details-marker { display: none; }
.mat-accordion__item > summary:hover { background: var(--mat-accent-soft); }
.mat-accordion__chev { margin-left: auto; flex: none; color: var(--mat-text-muted); transition: transform var(--mat-dur) var(--mat-ease); }
.mat-accordion__item[open] > summary .mat-accordion__chev, .mat-collapse[open] > summary .mat-accordion__chev { transform: rotate(180deg); }
.mat-accordion__item[open] > summary { color: var(--mat-accent-text); }
.mat-accordion__body { padding: 0 var(--mat-space-5) var(--mat-space-5); color: var(--mat-text); }
.mat-collapse > summary { padding-inline: 0; min-height: var(--mat-control-h); color: var(--mat-accent-text); width: fit-content; }
.mat-collapse > .mat-accordion__body { padding-inline: 0; }

/* ---- List group: rows of one list, as links, buttons or plain; with badges, a current row, numbers ---- */
.mat-listgroup { list-style: none; display: flex; flex-direction: column; background: var(--mat-surface); border: 1px solid var(--mat-border); border-radius: var(--mat-radius-lg); overflow: hidden; }
.mat-listgroup__item { display: flex; align-items: center; gap: var(--mat-space-3); min-height: var(--mat-control-h-lg); padding: var(--mat-space-3) var(--mat-space-5); border: 0; background: transparent; color: var(--mat-text); font: inherit; text-align: left; text-decoration: none; }
.mat-listgroup > * + * { border-top: 1px solid var(--mat-border); }
a.mat-listgroup__item, button.mat-listgroup__item { width: 100%; cursor: pointer; }
a.mat-listgroup__item:hover, button.mat-listgroup__item:hover { background: var(--mat-accent-soft); text-decoration: none; }
.mat-listgroup__item.is-active, .mat-listgroup__item[aria-current="true"] { background: var(--mat-accent-soft-strong); color: var(--mat-accent-text); font-weight: 600; }
.mat-listgroup__item.is-disabled, .mat-listgroup__item[aria-disabled="true"] { color: var(--mat-text-muted); pointer-events: none; }
.mat-listgroup__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.mat-listgroup__text small { color: var(--mat-text-muted); font-size: var(--mat-fs-sm); }
.mat-listgroup__item > .mat-icon { color: var(--mat-text-muted); font-size: 1.2rem; }
.mat-listgroup__item.is-active > .mat-icon { color: inherit; }
.mat-listgroup--flush { border: 0; border-radius: 0; background: transparent; }
.mat-listgroup--flush .mat-listgroup__item { padding-inline: 0; }
.mat-listgroup--numbered { counter-reset: mat-item; }
.mat-listgroup--numbered > .mat-listgroup__item::before { counter-increment: mat-item; content: counter(mat-item); display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--mat-surface-3); color: var(--mat-text-muted); font-size: var(--mat-fs-xs); font-weight: 650; }

/* ---- Avatars and a badge on something (a count on an icon button, a dot for the state of a person) ---- */
.mat-avatar { position: relative; }
.mat-avatar > img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.mat-avatar--sm { width: 26px; height: 26px; font-size: var(--mat-fs-xs); }
.mat-avatar--xl { width: 88px; height: 88px; font-size: var(--mat-fs-2xl); }
.mat-avatar__status { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--mat-text-faint); box-shadow: 0 0 0 2px var(--mat-surface); }
.mat-avatar__status--ok { background: var(--mat-success); }
.mat-avatar__status--warn { background: var(--mat-warning); }
.mat-avatar__status--error { background: var(--mat-danger); }
.mat-avatars { display: inline-flex; }
.mat-avatars > .mat-avatar { box-shadow: 0 0 0 2px var(--mat-surface); }
.mat-avatars > .mat-avatar + .mat-avatar { margin-left: -6px; }
.mat-badge--ok { background: var(--mat-success-bg); color: var(--mat-success-text); }
.mat-badge--warn { background: var(--mat-warning-bg); color: var(--mat-warning-text); }
.mat-badge--error { background: var(--mat-danger); color: var(--mat-on-danger); }
.mat-badge--info { background: var(--mat-info-bg); color: var(--mat-info-text); }
.mat-badge--dot { min-width: 0; width: 10px; height: 10px; padding: 0; }
.mat-indicator { position: relative; display: inline-flex; }
.mat-indicator > .mat-badge { position: absolute; top: -6px; right: -6px; box-shadow: 0 0 0 2px var(--mat-surface); }
.mat-indicator > .mat-badge--dot { top: 2px; right: 2px; }

/* ---- Stat: one number that matters, with its label and the change ---- */
.mat-stat { display: flex; flex-direction: column; gap: 2px; }
.mat-stat__label { color: var(--mat-text-muted); font-size: var(--mat-fs-sm); }
.mat-stat__value { font-size: var(--mat-fs-2xl); font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.mat-stat__delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--mat-fs-xs); font-weight: 600; color: var(--mat-text-muted); }
.mat-stat__delta--up { color: var(--mat-success-text); }
.mat-stat__delta--down { color: var(--mat-danger-text); }
.mat-stat__delta .mat-icon { font-size: 1em; }

/* ---- Timeline: what happened, newest first ---- */
.mat-timeline { list-style: none; display: flex; flex-direction: column; }
.mat-timeline > li { position: relative; padding: 0 0 var(--mat-space-5) var(--mat-space-6); }
.mat-timeline > li::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: -6px; width: 2px; background: var(--mat-border-strong); }
.mat-timeline > li:last-child::before { display: none; }
.mat-timeline > li::after { content: ""; position: absolute; left: 0; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--mat-accent); box-shadow: 0 0 0 3px var(--mat-surface); }
.mat-timeline > li.mat-timeline__ok::after { background: var(--mat-success); }
.mat-timeline > li.mat-timeline__warn::after { background: var(--mat-warning); }
.mat-timeline > li.mat-timeline__error::after { background: var(--mat-danger); }
.mat-timeline__time { display: block; color: var(--mat-text-muted); font-size: var(--mat-fs-xs); font-family: var(--mat-mono); }

/* ---- Text: a lead, a quote, running text with its lists, a figure and pictures ---- */
.mat-lead { font-size: var(--mat-fs-lg); line-height: 1.5; color: var(--mat-text-muted); }
.mat-small { font-size: var(--mat-fs-sm); }
.mat-blockquote { margin: 0; padding: var(--mat-space-1) var(--mat-space-5); border-left: 2px solid var(--mat-text-faint); color: var(--mat-text-muted); }
.mat-blockquote footer { margin-top: var(--mat-space-2); color: var(--mat-text-muted); font-size: var(--mat-fs-sm); }
.mat-prose { max-width: 70ch; line-height: 1.6; }
.mat-prose > * + * { margin-top: var(--mat-space-4); }
.mat-prose > h2, .mat-prose > h3, .mat-prose > h4 { margin-top: var(--mat-space-8); }
.mat-prose ul, .mat-prose ol { padding-left: 1.4rem; display: flex; flex-direction: column; gap: var(--mat-space-1); }
.mat-prose mark { padding: 0 4px; border-radius: 3px; background: var(--mat-warning-bg); color: var(--mat-warning-text); }
.mat-prose hr { border: 0; border-top: 1px solid var(--mat-border); }
.mat-figure { margin: 0; display: flex; flex-direction: column; gap: var(--mat-space-2); }
.mat-figure figcaption { color: var(--mat-text-muted); font-size: var(--mat-fs-sm); }
.mat-img { display: block; max-width: 100%; height: auto; }
.mat-img--rounded { border-radius: var(--mat-radius); }
.mat-img--circle { border-radius: 50%; }
.mat-img--thumb { padding: 4px; border: 1px solid var(--mat-border-strong); border-radius: var(--mat-radius); background: var(--mat-surface); }
.mat-ratio { aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--mat-radius); background: var(--mat-surface-3); }
.mat-ratio--4x3 { aspect-ratio: 4 / 3; }
.mat-ratio--1x1 { aspect-ratio: 1 / 1; }
.mat-ratio > img, .mat-ratio > svg, .mat-ratio > video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---- Cards with a picture, or a picture beside the text ---- */
.mat-card__media { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--mat-accent-soft); border-radius: var(--mat-radius-lg) var(--mat-radius-lg) 0 0; }
.mat-card--horizontal { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); overflow: hidden; }
.mat-card--horizontal > .mat-card__media { height: 100%; aspect-ratio: auto; border-radius: 0; }
@media (max-width: 600px) { .mat-card--horizontal { grid-template-columns: minmax(0, 1fr); } .mat-card--horizontal > .mat-card__media { aspect-ratio: 16 / 9; } }

/* ---- Alerts with a title, a link and actions; skeleton shapes ---- */
.mat-alert__title { display: block; font-weight: 650; }
.mat-alert__body a:not(.mat-btn) { color: inherit; text-decoration: underline; }
.mat-alert__actions { display: flex; flex-wrap: wrap; gap: var(--mat-space-2); margin-top: var(--mat-space-3); }
.mat-skeleton--circle { width: 40px; height: 40px; border-radius: 50%; }
.mat-skeleton--btn { width: 7rem; height: var(--mat-control-h); border-radius: var(--mat-radius); }
.mat-skeleton--block { height: 6rem; border-radius: var(--mat-radius); }
.mat-skeleton--w-25 { width: 25%; }
.mat-skeleton--w-50 { width: 50%; }
.mat-skeleton--w-75 { width: 75%; }

/* ==========================================================================
   MatUi · forms
   Fields, inputs, choices, switches, ranges, input groups, layouts and validation. Labels above, hints below, errors at the field and as a summary.
   Everything is drawn from the tokens; nothing here is a literal colour.
   ========================================================================== */

/* ---- Forms -----------------------------------------------------------------------------------------------------
   Labels above, hints below, errors at the field AND as a summary at the top. The space for the error is reserved,
   so the layout does not jump when it appears. */
.mat-form { display: flex; flex-direction: column; gap: var(--mat-space-4); }
.mat-form__grid { display: grid; gap: var(--mat-space-4) var(--mat-space-5); grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.mat-form__grid > .mat-field--full, .mat-form__grid > .mat-btn-row, .mat-form__grid > .mat-alert, .mat-form__grid > h2, .mat-form__grid > h3 { grid-column: 1 / -1; }
@media (max-width: 700px) { .mat-form__grid { grid-template-columns: minmax(0, 1fr); } }

.mat-field { display: flex; flex-direction: column; gap: var(--mat-space-1); min-width: 0; }
.mat-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.mat-label { font-size: var(--mat-fs-sm); font-weight: 600; color: var(--mat-text); }
.mat-label .mat-req { color: var(--mat-danger-text); margin-left: 2px; }
.mat-hint { font-size: var(--mat-fs-xs); color: var(--mat-text-muted); }
.mat-error { font-size: var(--mat-fs-xs); color: var(--mat-danger-text); min-height: 1.2em; }
.mat-field.is-invalid .mat-input, .mat-field.is-invalid .mat-select, .mat-field.is-invalid .mat-textarea { border-color: var(--mat-danger); }

.mat-input, .mat-select, .mat-textarea {
  width: 100%;
  min-height: var(--mat-control-h);
  padding: 0 var(--mat-space-3);
  background: var(--mat-surface);
  color: var(--mat-text);
  border: 1px solid var(--mat-border-strong);
  border-radius: var(--mat-radius);
  transition: border-color var(--mat-dur-fast) var(--mat-ease), box-shadow var(--mat-dur-fast) var(--mat-ease);
}
.mat-textarea { padding: var(--mat-space-3); min-height: 96px; resize: vertical; line-height: var(--mat-lh); }
.mat-input::placeholder, .mat-textarea::placeholder { color: var(--mat-text-faint); }
.mat-input:hover, .mat-select:hover, .mat-textarea:hover { border-color: color-mix(in srgb, var(--mat-accent) 40%, var(--mat-border-strong)); }
.mat-input:focus, .mat-select:focus, .mat-textarea:focus { border-color: var(--mat-accent); box-shadow: var(--mat-focus-ring); outline: none; }
.mat-input:disabled, .mat-select:disabled, .mat-textarea:disabled { background: var(--mat-surface-3); color: var(--mat-text-muted); cursor: not-allowed; }
.mat-input[readonly] { background: var(--mat-surface-2); }
.mat-select { appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--mat-text-muted) 50%), linear-gradient(135deg, var(--mat-text-muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
input[type="color"].mat-input { padding: 4px; }
input[type="file"].mat-input { padding: 6px; }

/* Prefix / suffix text or icon inside the field edge. */
.mat-input-group { display: flex; align-items: stretch; }
.mat-input-group > .mat-input { border-radius: 0; flex: 1 1 auto; min-width: 0; }
.mat-input-group > :first-child { border-top-left-radius: var(--mat-radius); border-bottom-left-radius: var(--mat-radius); }
.mat-input-group > :last-child { border-top-right-radius: var(--mat-radius); border-bottom-right-radius: var(--mat-radius); }
.mat-input-group > * + * { margin-left: -1px; }
.mat-input-addon { display: inline-flex; align-items: center; padding: 0 var(--mat-space-3); background: var(--mat-surface-3); border: 1px solid var(--mat-border-strong); color: var(--mat-text-muted); font-size: var(--mat-fs-sm); white-space: nowrap; }

/* ---- Number stepper (FORM-16): a number field with a button for less and one for more ----
   Without the script it is the native number field. The script adds the buttons and marks the wrapper .is-ready, which is what hides the spinners of the browser and
   squares the corners of the field. The size is the one of the input inside it (mat-input--sm, mat-input--lg). mat-stepper--stacked: two small arrows at the right
   of the field (a mouse); on a touch screen they would be too small to hit (MOBILE-04), so it is drawn like the default there. */
.mat-stepper { --mat-stepper-h: var(--mat-control-h); --mat-stepper-end: var(--mat-stepper-h); position: relative; display: flex; align-items: stretch; width: 100%; }
.mat-stepper:has(> .mat-input--sm) { --mat-stepper-h: var(--mat-control-h-sm); font-size: var(--mat-fs-sm); }
.mat-stepper:has(> .mat-input--lg) { --mat-stepper-h: var(--mat-control-h-lg); font-size: var(--mat-fs-lg); }
.mat-stepper.is-ready > .mat-input { flex: 1 1 auto; min-width: 0; border-radius: 0; text-align: center; font-variant-numeric: tabular-nums; appearance: textfield; -moz-appearance: textfield; }
.mat-stepper.is-ready > .mat-input::-webkit-inner-spin-button, .mat-stepper.is-ready > .mat-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.mat-stepper.is-ready > .mat-input:focus { position: relative; z-index: 1; }
.mat-stepper__btn {
  position: relative; flex: none; display: grid; place-items: center;
  width: var(--mat-stepper-h); min-height: var(--mat-stepper-h); margin: 0; padding: 0;
  border: 1px solid var(--mat-border-strong); background: var(--mat-surface); color: var(--mat-text-muted);
  font: inherit; cursor: pointer; user-select: none; touch-action: manipulation;
  transition: background var(--mat-dur-fast) var(--mat-ease), color var(--mat-dur-fast) var(--mat-ease);
}
.mat-stepper__btn:hover { background: var(--mat-surface-3); color: var(--mat-text); }
.mat-stepper__btn:active { background: var(--mat-accent-soft-strong); color: var(--mat-accent-text); }
.mat-stepper__btn:focus-visible { z-index: 1; border-color: var(--mat-accent); }
.mat-stepper__btn--dec { margin-right: -1px; border-radius: var(--mat-radius) 0 0 var(--mat-radius); }
.mat-stepper__btn--inc { margin-left: -1px; border-radius: 0 var(--mat-radius) var(--mat-radius) 0; }
.mat-stepper__arrow { display: none; }
/* a button that cannot go further is dimmed, not disabled: the focus stays on it */
.mat-stepper__btn[aria-disabled="true"], .mat-stepper__btn:disabled { color: var(--mat-text-faint); cursor: not-allowed; }
.mat-stepper__btn[aria-disabled="true"]:hover, .mat-stepper__btn[aria-disabled="true"]:active { background: var(--mat-surface); color: var(--mat-text-faint); }
.mat-stepper:has(> .mat-input[readonly]) .mat-stepper__btn[aria-disabled="true"] { background: var(--mat-surface-2); }
.mat-stepper:has(> .mat-input:disabled) .mat-stepper__btn, .mat-stepper__btn:disabled { background: var(--mat-surface-3); color: var(--mat-text-faint); cursor: not-allowed; }
.mat-field.is-invalid .mat-stepper__btn { border-color: var(--mat-danger); }
.mat-field.is-valid .mat-stepper__btn { border-color: var(--mat-success); }
/* the unit sits at the right end of the field, in front of the button; the field keeps room for it on both sides so that the number stays in the middle */
.mat-stepper__unit { position: absolute; top: 0; bottom: 0; right: calc(var(--mat-stepper-end) + var(--mat-space-3)); display: flex; align-items: center; color: var(--mat-text-muted); white-space: nowrap; pointer-events: none; }
.mat-stepper[data-unit].is-ready > .mat-input { padding-inline: calc(var(--mat-stepper-unit, 0ch) + var(--mat-space-4)); }
@media (pointer: fine) {
  .mat-stepper--stacked { --mat-stepper-end: calc(var(--mat-stepper-h) * .8); display: block; }
  .mat-stepper--stacked.is-ready > .mat-input { text-align: left; padding-inline: var(--mat-space-3) calc(var(--mat-stepper-end) + var(--mat-space-2)); }
  .mat-stepper--stacked[data-unit].is-ready > .mat-input { padding-inline: var(--mat-space-3) calc(var(--mat-stepper-end) + var(--mat-stepper-unit, 0ch) + var(--mat-space-4)); }
  .mat-stepper.mat-stepper--stacked .mat-stepper__btn {
    position: absolute; z-index: 2; right: 1px; width: calc(var(--mat-stepper-end) - 1px); height: calc(50% - 1px); min-height: 0; margin: 0;
    border: 0 solid var(--mat-border); border-left-width: 1px; border-radius: 0; background: transparent;
  }
  .mat-stepper.mat-stepper--stacked .mat-stepper__btn:hover { background: var(--mat-surface-3); }
  .mat-stepper.mat-stepper--stacked .mat-stepper__btn:active { background: var(--mat-accent-soft-strong); }
  .mat-stepper.mat-stepper--stacked .mat-stepper__btn[aria-disabled="true"], .mat-stepper.mat-stepper--stacked .mat-stepper__btn:disabled { background: transparent; }
  .mat-stepper.mat-stepper--stacked .mat-stepper__btn--inc { top: 1px; border-top-right-radius: calc(var(--mat-radius) - 1px); }
  .mat-stepper.mat-stepper--stacked .mat-stepper__btn--dec { bottom: 1px; border-top-width: 1px; border-bottom-right-radius: calc(var(--mat-radius) - 1px); }
  .mat-stepper--stacked .mat-stepper__sign { display: none; }
  .mat-stepper--stacked .mat-stepper__arrow { display: inline-flex; font-size: .85em; }
}

/* Checkbox and radio use the browser control in the accent colour; the switch is its own. */
.mat-check { display: flex; align-items: flex-start; gap: var(--mat-space-3); min-height: var(--mat-control-h-sm); cursor: pointer; }
.mat-check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--mat-accent); flex: none; cursor: pointer; }
.mat-check__text { display: flex; flex-direction: column; gap: 2px; }

.mat-switch { display: flex; align-items: center; gap: var(--mat-space-3); min-height: var(--mat-control-h-sm); cursor: pointer; }
.mat-switch input { position: absolute; opacity: 0; pointer-events: none; }
.mat-switch__track {
  flex: none; position: relative;
  width: 42px; height: 24px;
  border-radius: var(--mat-radius-pill);
  background: var(--mat-border-strong);
  transition: background var(--mat-dur) var(--mat-ease);
}
.mat-switch__track::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--mat-thumb); box-shadow: var(--mat-shadow-1);
  transition: transform var(--mat-dur) var(--mat-ease);
}
.mat-switch input:checked + .mat-switch__track { background: var(--mat-accent); }
.mat-switch input:checked + .mat-switch__track::after { transform: translateX(18px); }
.mat-switch input:focus-visible + .mat-switch__track { box-shadow: var(--mat-focus-ring); }
.mat-switch input:disabled + .mat-switch__track { opacity: .5; }

/* Dependent fields appear only when they are needed (matui.js: [data-show-if] / [data-show-value]). */
[data-show-if][hidden] { display: none !important; }

/* Segmented control: a few exclusive choices in one line (list / gallery, day / week). */
.mat-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--mat-surface-3); border-radius: var(--mat-radius); }
.mat-seg__btn {
  display: inline-flex; align-items: center; gap: var(--mat-space-2);
  min-height: calc(var(--mat-control-h) - 8px); padding: 0 var(--mat-space-3);
  border: 0; border-radius: calc(var(--mat-radius) - 3px);
  background: transparent; color: var(--mat-text-muted);
  font-weight: 600; cursor: pointer; text-decoration: none;
}
.mat-seg__btn:hover { color: var(--mat-text); text-decoration: none; }
.mat-seg__btn[aria-pressed="true"], .mat-seg__btn.is-active { background: var(--mat-surface); color: var(--mat-accent-text); box-shadow: var(--mat-shadow-1); }

/* ---- Sizes (a small field for dense places such as a toolbar or a table row, a large one for the main field of a page) ---- */
.mat-input--sm, .mat-select--sm { min-height: var(--mat-control-h-sm); font-size: var(--mat-fs-sm); padding-inline: var(--mat-space-2); }
.mat-input--lg, .mat-select--lg { min-height: var(--mat-control-h-lg); font-size: var(--mat-fs-lg); padding-inline: var(--mat-space-4); }
.mat-select--sm { padding-right: 30px; background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; }
.mat-select--lg { padding-right: 40px; }

/* ---- A value that cannot be changed: read-only (a grey well) or plain text (looks like text) ---- */
.mat-input--plain, .mat-input--plain[readonly], .mat-input--plain:hover, .mat-input--plain:focus { border-color: transparent; background: transparent; padding-inline: 0; box-shadow: none; cursor: default; }

/* ---- Validation (FORM-03, FORM-05): the message at the field, the border in the colour of the meaning ---- */
.mat-field.is-valid .mat-input, .mat-field.is-valid .mat-select, .mat-field.is-valid .mat-textarea { border-color: var(--mat-success); }
.mat-field.is-invalid .mat-input:focus, .mat-field.is-invalid .mat-select:focus, .mat-field.is-invalid .mat-textarea:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mat-danger) 35%, transparent); }
.mat-valid { font-size: var(--mat-fs-xs); color: var(--mat-success-text); min-height: 1.2em; }
.mat-legend { padding: 0; margin-bottom: var(--mat-space-2); font-size: var(--mat-fs-sm); font-weight: 600; color: var(--mat-text); }
.mat-opt { margin-left: var(--mat-space-1); font-weight: 400; color: var(--mat-text-muted); }
/* The summary at the top of a form: an alert with a link to every field that has an error. */
.mat-alert__list { margin: var(--mat-space-1) 0 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 2px; }
.mat-alert__list a { color: inherit; text-decoration: underline; }
[data-validation-summary][hidden] { display: none; }

/* ---- Code input (FORM-19): one box per character of a code (an authenticator or SMS code, a PIN, a recovery code) ----
   .mat-otp[data-otp] wraps the real input (.mat-otp__input), which is what is validated, posted and reset. Without the script it is a plain text field in the look of
   a code; matui.js hides it (.is-ready) and draws the boxes in .mat-otp__boxes (one .mat-otp__box each, .mat-otp__sep between groups) and a line for what was refused.
   The boxes are as high as a control (a touch screen gets the taller one from the tokens), keep 16 px type or more (a phone does not zoom into them) and shrink in width
   so that a code of any length fits the screen; they never make the page scroll sideways. */
.mat-otp { --mat-otp-w: 2.75rem; --mat-otp-h: var(--mat-control-h-lg); --mat-otp-fs: var(--mat-fs-xl); position: relative; display: block; min-width: 0; max-width: 100%; }
.mat-otp--sm { --mat-otp-w: 2.25rem; --mat-otp-h: var(--mat-control-h); --mat-otp-fs: 1rem; }
.mat-otp--lg { --mat-otp-w: 3.5rem; --mat-otp-h: 4rem; --mat-otp-fs: var(--mat-fs-2xl); }
.mat-otp__input {
  display: block; width: 100%; max-width: 16rem; min-height: var(--mat-otp-h); padding: 0 var(--mat-space-3);
  background: var(--mat-surface); color: var(--mat-text);
  border: 1px solid var(--mat-border-strong); border-radius: var(--mat-radius);
  font-family: var(--mat-mono); font-size: var(--mat-otp-fs); font-weight: 600; letter-spacing: .3em; text-align: center;
  transition: border-color var(--mat-dur-fast) var(--mat-ease), box-shadow var(--mat-dur-fast) var(--mat-ease);
}
.mat-otp__input:hover { border-color: color-mix(in srgb, var(--mat-accent) 40%, var(--mat-border-strong)); }
.mat-otp__input:focus { border-color: var(--mat-accent); box-shadow: var(--mat-focus-ring); outline: none; }
.mat-otp__input:disabled { background: var(--mat-surface-3); color: var(--mat-text-muted); cursor: not-allowed; }
.mat-otp__input[readonly] { background: var(--mat-surface-2); }
.mat-otp--center .mat-otp__input { margin-inline: auto; }
/* with the script the real input lies over the boxes, invisible, so that a message of the browser points at the right place; whoever focuses it lands on a box */
.mat-otp.is-ready > .mat-otp__input { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; min-height: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }

.mat-otp__boxes { display: flex; align-items: center; gap: var(--mat-space-2); max-width: 100%; }
.mat-otp--center .mat-otp__boxes { justify-content: center; }
.mat-otp__box {
  flex: 0 1 var(--mat-otp-w); width: var(--mat-otp-w); min-width: 0; height: var(--mat-otp-h); margin: 0; padding: 0;
  background: var(--mat-surface); color: var(--mat-text);
  border: 1px solid var(--mat-border-strong); border-radius: var(--mat-radius);
  font-family: var(--mat-mono); font-size: var(--mat-otp-fs); font-weight: 600; line-height: 1; text-align: center;
  caret-color: var(--mat-accent);
  transition: border-color var(--mat-dur-fast) var(--mat-ease), box-shadow var(--mat-dur-fast) var(--mat-ease);
}
.mat-otp__box:hover { border-color: color-mix(in srgb, var(--mat-accent) 40%, var(--mat-border-strong)); }
.mat-otp__box:focus { border-color: var(--mat-accent); box-shadow: var(--mat-focus-ring); outline: none; }
.mat-otp__box:disabled { background: var(--mat-surface-3); color: var(--mat-text-muted); cursor: not-allowed; }
.mat-otp__box[readonly] { background: var(--mat-surface-2); }
/* a dot box is a password field: the reveal button and the key of the browser would sit on top of the dot */
.mat-otp__box::-ms-reveal, .mat-otp__box::-ms-clear { display: none; }
.mat-otp__box::-webkit-credentials-auto-fill-button, .mat-otp__box::-webkit-contacts-auto-fill-button { visibility: hidden; pointer-events: none; position: absolute; right: 0; }
/* between the groups: a gap, or a dash when the groups are written 4-4 */
.mat-otp__sep { flex: none; align-self: stretch; display: flex; align-items: center; justify-content: center; width: var(--mat-space-3); }
.mat-otp__sep--dash { width: 1.25rem; }
.mat-otp__sep--dash::before { content: ""; width: .5rem; height: 2px; border-radius: 1px; background: var(--mat-text-muted); }
.mat-otp__status { margin: var(--mat-space-1) 0 0; font-size: var(--mat-fs-sm); color: var(--mat-text-muted); }
@media (max-width: 640px) {
  .mat-otp__boxes { gap: var(--mat-space-1); }
  .mat-otp__sep { width: var(--mat-space-2); }
  .mat-otp__sep--dash { width: 1rem; }
  .mat-otp__sep--dash::before { width: .375rem; }
  .mat-otp--lg { --mat-otp-h: 3.5rem; }
}
/* the message at the field and the border in the colour of the meaning (FORM-03) */
.mat-field.is-invalid .mat-otp__input, .mat-field.is-invalid .mat-otp__box, .mat-otp.is-invalid .mat-otp__box { border-color: var(--mat-danger); }
.mat-field.is-invalid .mat-otp__input:focus, .mat-field.is-invalid .mat-otp__box:focus, .mat-otp.is-invalid .mat-otp__box:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mat-danger) 35%, transparent); }
.mat-field.is-valid .mat-otp__input, .mat-field.is-valid .mat-otp__box { border-color: var(--mat-success); }

/* ---- Floating labels: the label sits in the field and moves up when the field has focus or a value ----
   The input comes first, the label after it, and the input has placeholder=" " (a space) so that :placeholder-shown knows whether it is empty. */
.mat-field--float { position: relative; }
.mat-field--float > .mat-input, .mat-field--float > .mat-select, .mat-field--float > .mat-textarea { min-height: 56px; padding-top: 22px; padding-bottom: 6px; }
.mat-field--float > .mat-textarea { min-height: 104px; padding-top: 26px; }
.mat-field--float > .mat-input::placeholder, .mat-field--float > .mat-textarea::placeholder { color: transparent; }
.mat-field--float > .mat-label {
  position: absolute; top: 0; left: 0; z-index: 1;
  max-width: 100%; padding: 17px var(--mat-space-3) 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 400; color: var(--mat-text-muted);
  pointer-events: none;
  transform-origin: left top;
  transition: transform var(--mat-dur) var(--mat-ease), color var(--mat-dur-fast) var(--mat-ease);
}
.mat-field--float > .mat-input:focus ~ .mat-label,
.mat-field--float > .mat-input:not(:placeholder-shown) ~ .mat-label,
.mat-field--float > .mat-textarea:focus ~ .mat-label,
.mat-field--float > .mat-textarea:not(:placeholder-shown) ~ .mat-label,
.mat-field--float > .mat-select ~ .mat-label { transform: translateY(-11px) scale(.78); }
.mat-field--float > .mat-input:focus ~ .mat-label, .mat-field--float > .mat-textarea:focus ~ .mat-label, .mat-field--float > .mat-select:focus ~ .mat-label { color: var(--mat-accent-text); }
.mat-field--float.is-invalid > .mat-label { color: var(--mat-danger-text); }

/* ---- Select: several choices, or a list that is shown open ---- */
.mat-select[multiple], .mat-select[size]:not([size="1"]) { background-image: none; padding: var(--mat-space-1); height: auto; min-height: 7.5rem; }
.mat-select[multiple] option, .mat-select[size]:not([size="1"]) option { padding: var(--mat-space-2) var(--mat-space-3); border-radius: var(--mat-radius-xs); }
.mat-select[multiple] option:checked, .mat-select[size]:not([size="1"]) option:checked { background: var(--mat-accent-soft-strong); color: var(--mat-accent-text); }

/* ---- Checks and radios: a group, in a column or in a row; toggle buttons; cards to choose from ---- */
.mat-checks { display: flex; flex-direction: column; gap: var(--mat-space-1); }
.mat-checks--inline { flex-direction: row; flex-wrap: wrap; gap: var(--mat-space-2) var(--mat-space-5); }
.mat-check:has(input:disabled) { color: var(--mat-text-muted); cursor: not-allowed; }
.mat-check input:disabled { cursor: not-allowed; }
.mat-btn-check { position: absolute; opacity: 0; pointer-events: none; }
.mat-btn-check:checked + .mat-btn { background: var(--mat-accent-soft-strong); border-color: var(--mat-accent); color: var(--mat-accent-text); }
.mat-btn-check:focus-visible + .mat-btn { box-shadow: var(--mat-focus-ring); }
.mat-btn-check:disabled + .mat-btn { opacity: .5; cursor: not-allowed; }
.mat-choices { display: grid; gap: var(--mat-space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.mat-choice {
  display: flex; align-items: flex-start; gap: var(--mat-space-3);
  padding: var(--mat-space-4);
  background: var(--mat-surface);
  border: 1px solid var(--mat-border-strong);
  border-radius: var(--mat-radius);
  cursor: pointer;
  transition: border-color var(--mat-dur-fast) var(--mat-ease), background var(--mat-dur-fast) var(--mat-ease);
}
.mat-choice input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--mat-accent); cursor: pointer; }
.mat-choice:hover { border-color: color-mix(in srgb, var(--mat-accent) 40%, var(--mat-border-strong)); }
.mat-choice:has(input:checked) { border-color: var(--mat-accent); background: var(--mat-accent-soft); }
.mat-choice:has(input:focus-visible) { box-shadow: var(--mat-focus-ring); }
.mat-choice:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.mat-choice__text { display: flex; flex-direction: column; gap: 2px; }
.mat-choice__text small { color: var(--mat-text-muted); }

/* ---- Range: the filled part of the track is drawn from --mat-range, which matui.js sets for every .mat-range ---- */
.mat-range { --mat-range: 50%; -webkit-appearance: none; appearance: none; width: 100%; height: 24px; background: transparent; cursor: pointer; }
.mat-range::-webkit-slider-runnable-track { height: 6px; border-radius: var(--mat-radius-pill); background: linear-gradient(to right, var(--mat-accent) var(--mat-range), var(--mat-surface-3) var(--mat-range)); }
.mat-range::-moz-range-track { height: 6px; border-radius: var(--mat-radius-pill); background: var(--mat-surface-3); }
.mat-range::-moz-range-progress { height: 6px; border-radius: var(--mat-radius-pill); background: var(--mat-accent); }
.mat-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%; background: var(--mat-thumb); border: 2px solid var(--mat-accent); box-shadow: var(--mat-shadow-1); }
.mat-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--mat-thumb); border: 2px solid var(--mat-accent); box-shadow: var(--mat-shadow-1); }
.mat-range:focus-visible { outline: none; }
.mat-range:focus-visible::-webkit-slider-thumb { box-shadow: var(--mat-focus-ring); }
.mat-range:focus-visible::-moz-range-thumb { box-shadow: var(--mat-focus-ring); }
.mat-range:disabled { opacity: .5; cursor: not-allowed; }
.mat-range-row { display: flex; align-items: center; gap: var(--mat-space-3); }
.mat-range-out { min-width: 3ch; text-align: right; font-family: var(--mat-mono); font-size: var(--mat-fs-sm); color: var(--mat-text-muted); }

/* ---- Input group: buttons, selects and text around a field; sizes ---- */
.mat-input-group > .mat-btn, .mat-input-group > .mat-select { border-radius: 0; }
.mat-input-group > .mat-select { flex: 0 0 auto; width: auto; }
.mat-input-group > .mat-btn:first-child, .mat-input-group > .mat-select:first-child { border-top-left-radius: var(--mat-radius); border-bottom-left-radius: var(--mat-radius); }
.mat-input-group > .mat-btn:last-child, .mat-input-group > .mat-select:last-child { border-top-right-radius: var(--mat-radius); border-bottom-right-radius: var(--mat-radius); }
.mat-input-group--sm .mat-input, .mat-input-group--sm .mat-select, .mat-input-group--sm .mat-btn, .mat-input-group--sm .mat-input-addon { min-height: var(--mat-control-h-sm); font-size: var(--mat-fs-sm); }
.mat-input-group--lg .mat-input, .mat-input-group--lg .mat-select, .mat-input-group--lg .mat-btn, .mat-input-group--lg .mat-input-addon { min-height: var(--mat-control-h-lg); font-size: var(--mat-fs-lg); }

/* ---- An icon in the field (search), a button in the field (show the password), a counter ---- */
.mat-input-icon { position: relative; display: flex; align-items: center; }
.mat-input-icon > .mat-icon { position: absolute; left: var(--mat-space-3); font-size: 1.1rem; color: var(--mat-text-muted); pointer-events: none; }
.mat-input-icon > .mat-input { padding-left: calc(var(--mat-space-3) + 1.6rem); }
.mat-input-icon--end > .mat-input { padding-right: 48px; }
.mat-input-icon__btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
.mat-toggle-off { display: none; }
[aria-pressed="true"] > .mat-toggle-on { display: none; }
[aria-pressed="true"] > .mat-toggle-off { display: inline-block; }
.mat-field__meta { display: flex; justify-content: space-between; gap: var(--mat-space-3); }
.mat-counter { margin-left: auto; font-family: var(--mat-mono); font-size: var(--mat-fs-xs); color: var(--mat-text-muted); }

/* ---- Files: the button of the browser, and a drop zone ---- */
.mat-input[type="file"]::file-selector-button { margin-right: var(--mat-space-3); padding: 4px var(--mat-space-3); border: 1px solid var(--mat-border-strong); border-radius: var(--mat-radius-xs); background: var(--mat-surface-2); color: var(--mat-text); font: inherit; cursor: pointer; }
.mat-dropzone {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: var(--mat-space-2);
  padding: var(--mat-space-8) var(--mat-space-4);
  border: 2px dashed var(--mat-border-strong);
  border-radius: var(--mat-radius-lg);
  background: var(--mat-surface-2);
  color: var(--mat-text-muted);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--mat-dur-fast) var(--mat-ease), background var(--mat-dur-fast) var(--mat-ease);
}
.mat-dropzone:hover, .mat-dropzone.is-drag, .mat-dropzone:focus-within { border-color: var(--mat-accent); background: var(--mat-accent-soft); color: var(--mat-text); }
.mat-dropzone > .mat-icon { font-size: 1.8rem; color: var(--mat-accent-text); }
.mat-dropzone input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.mat-dropzone__files { font-size: var(--mat-fs-sm); color: var(--mat-text); overflow-wrap: anywhere; }

/* ---- Layouts: columns (the grid above), a label beside the field, one line, sections with their heading on the left ---- */
.mat-form__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mat-form__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .mat-form__grid--3, .mat-form__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .mat-form__grid--3, .mat-form__grid--4 { grid-template-columns: minmax(0, 1fr); } }
.mat-form--horizontal .mat-field:not(.mat-fieldset) { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); column-gap: var(--mat-space-5); align-items: start; }
.mat-form--horizontal .mat-field:not(.mat-fieldset) > :not(.mat-label) { grid-column: 2; }
.mat-form--horizontal .mat-field:not(.mat-fieldset) > .mat-label { grid-column: 1; grid-row: 1; padding-top: calc((var(--mat-control-h) - 1.3em) / 2); }
@media (max-width: 700px) {
  .mat-form--horizontal .mat-field:not(.mat-fieldset) { display: flex; }
  .mat-form--horizontal .mat-field:not(.mat-fieldset) > .mat-label { padding-top: 0; }
}
.mat-form--inline { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: var(--mat-space-3) var(--mat-space-4); }
.mat-form--inline > .mat-field { flex: 1 1 9rem; }
.mat-form--inline > .mat-field--auto { flex: 0 0 auto; }
.mat-form__section { display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: var(--mat-space-6); padding: var(--mat-space-6) 0; border-top: 1px solid var(--mat-border); }
.mat-form__section:first-child { border-top: 0; padding-top: 0; }
.mat-form__section-head { display: flex; flex-direction: column; gap: var(--mat-space-1); }
.mat-form__section-head p { color: var(--mat-text-muted); font-size: var(--mat-fs-sm); }
@media (max-width: 900px) { .mat-form__section { grid-template-columns: minmax(0, 1fr); gap: var(--mat-space-4); } }

/* ---- A setting: what it is and what it does on the left, the switch on the right ---- */
.mat-setting { display: flex; align-items: center; justify-content: space-between; gap: var(--mat-space-4); padding: var(--mat-space-3) 0; border-bottom: 1px solid var(--mat-border); }
.mat-setting:last-child { border-bottom: 0; }
.mat-setting__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; cursor: pointer; }
.mat-setting__text small { color: var(--mat-text-muted); font-size: var(--mat-fs-sm); }
.mat-switch--bare { gap: 0; flex: none; }

/* ==========================================================================
   Slider and range slider (FORM-17)
   A native range input in a wrapper (.mat-slider), or two of them (.mat-slider--range, from and to). Without the script they are the native controls, the two
   of a range slider one under the other. With it (.is-ready) the inputs stay in place but invisible, and the script draws one track, a thumb per input with
   a target of 44 px, a bubble with the value, the marks and the labels, and moves the thumbs itself. The script sets --mat-slider-from, --mat-slider-to
   (the filled part, in percent) and, per thumb, --mat-slider-at. Sizes: --sm (a compact control: 36 px), the default (44 px) and --lg.
   ========================================================================== */
.mat-slider {
  --mat-slider-knob: 20px; --mat-slider-track: 6px; --mat-slider-hit: 44px;
  --mat-slider-from: 0%; --mat-slider-to: 0%;
  position: relative; display: block; isolation: isolate;
  width: 100%; min-width: 0;
}
.mat-slider--sm { --mat-slider-knob: 16px; --mat-slider-track: 4px; --mat-slider-hit: 36px; }
.mat-slider--lg { --mat-slider-knob: 26px; --mat-slider-track: 8px; --mat-slider-hit: 52px; }

/* ---- Without the script: the native control, in the look of the toolkit (the filled part needs the script, except in Firefox) ---- */
.mat-slider__input { display: block; width: 100%; height: var(--mat-slider-hit); margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.mat-slider__input::-webkit-slider-runnable-track { height: var(--mat-slider-track); border-radius: var(--mat-radius-pill); background: var(--mat-surface-3); box-shadow: inset 0 0 0 1px var(--mat-border); }
.mat-slider__input::-moz-range-track { height: var(--mat-slider-track); border-radius: var(--mat-radius-pill); background: var(--mat-surface-3); box-shadow: inset 0 0 0 1px var(--mat-border); }
.mat-slider__input::-moz-range-progress { height: var(--mat-slider-track); border-radius: var(--mat-radius-pill); background: var(--mat-accent); }
.mat-slider__input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; box-sizing: border-box; width: var(--mat-slider-knob); height: var(--mat-slider-knob); margin-top: calc((var(--mat-slider-track) - var(--mat-slider-knob)) / 2); border-radius: 50%; background: var(--mat-thumb); border: 2px solid var(--mat-accent); box-shadow: var(--mat-shadow-1); }
.mat-slider__input::-moz-range-thumb { box-sizing: border-box; width: var(--mat-slider-knob); height: var(--mat-slider-knob); border-radius: 50%; background: var(--mat-thumb); border: 2px solid var(--mat-accent); box-shadow: var(--mat-shadow-1); }
.mat-slider__input:focus-visible { outline: none; }
.mat-slider__input:focus-visible::-webkit-slider-thumb { box-shadow: var(--mat-focus-ring); }
.mat-slider__input:focus-visible::-moz-range-thumb { box-shadow: var(--mat-focus-ring); }
.mat-slider__input:disabled { cursor: not-allowed; }
.mat-slider--range:not(.is-ready) { display: flex; flex-direction: column; gap: var(--mat-space-1); }

/* ---- With the script: the inputs are invisible (not hidden: they keep the focus, the keyboard and the screen reader) and lie over the slider ---- */
.mat-slider.is-ready .mat-slider__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.mat-slider.is-ready[data-bubble="always"] { padding-top: 20px; }

/* The rail is as wide as the way the centre of a thumb goes; a press on it is handled by the script (touch-action: the page can still be scrolled up and down). */
.mat-slider__rail { position: relative; height: var(--mat-slider-hit); margin-inline: calc(var(--mat-slider-knob) / 2); cursor: pointer; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.mat-slider__track { position: absolute; inset-inline: 0; top: 50%; height: var(--mat-slider-track); transform: translateY(-50%); border-radius: var(--mat-radius-pill); background: var(--mat-surface-3); box-shadow: inset 0 0 0 1px var(--mat-border); }
.mat-slider__fill { position: absolute; top: 0; bottom: 0; left: var(--mat-slider-from); right: calc(100% - var(--mat-slider-to)); border-radius: var(--mat-radius-pill); background: var(--mat-accent); }

/* The thumb is the target (as wide as it is high: 44 px); the knob that is seen is smaller. */
.mat-slider__thumb { position: absolute; top: 50%; left: var(--mat-slider-at, 0%); z-index: 1; width: var(--mat-slider-hit); height: var(--mat-slider-hit); transform: translate(-50%, -50%); }
.mat-slider__thumb.is-top { z-index: 2; }
.mat-slider__thumb::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  box-sizing: border-box; width: var(--mat-slider-knob); height: var(--mat-slider-knob); margin: calc(var(--mat-slider-knob) / -2) 0 0 calc(var(--mat-slider-knob) / -2);
  border-radius: 50%; background: var(--mat-thumb); border: 2px solid var(--mat-accent); box-shadow: var(--mat-shadow-1);
}
.mat-slider__thumb.is-key::before, .mat-slider__thumb.is-drag::before { box-shadow: var(--mat-focus-ring); }

/* The bubble shows the value above the thumb while it is dragged or has the focus, or always (data-bubble="always"); two near thumbs share one (is-merged). */
.mat-slider__bubble {
  position: absolute; left: 50%; bottom: calc(50% + var(--mat-slider-knob) / 2 + 6px);
  transform: translateX(calc(-50% + var(--mat-slider-shift, 0px)));
  min-width: 2.25em; padding: 3px var(--mat-space-2); border-radius: var(--mat-radius-xs);
  background: var(--mat-text); color: var(--mat-bg);
  font-size: var(--mat-fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.3; text-align: center; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity var(--mat-dur-fast) var(--mat-ease);
}
.mat-slider__thumb.is-focus > .mat-slider__bubble, .mat-slider__thumb.is-drag > .mat-slider__bubble, .mat-slider[data-bubble="always"] .mat-slider__bubble { opacity: 1; }
.mat-slider.is-merged .mat-slider__thumb--from > .mat-slider__bubble { opacity: 0; }

/* Marks under the track (the ones inside the filled part in the accent colour) and the labels: under every few marks, or the minimum and the maximum at the ends. */
.mat-slider__ticks { position: absolute; inset: 0; pointer-events: none; }
.mat-slider__tick { position: absolute; top: calc(50% + var(--mat-slider-track) / 2 + 4px); left: var(--mat-slider-at); width: 2px; height: 6px; margin-left: -1px; border-radius: 1px; background: var(--mat-border-strong); }
.mat-slider__tick.is-on { background: var(--mat-accent); }
.mat-slider__scale { position: relative; height: 1.25rem; margin: -6px calc(var(--mat-slider-knob) / 2) 0; font-size: var(--mat-fs-xs); color: var(--mat-text-muted); font-variant-numeric: tabular-nums; pointer-events: none; }
.mat-slider__end, .mat-slider__tick-label { position: absolute; top: 0; white-space: nowrap; }
.mat-slider__end--min { left: calc(var(--mat-slider-knob) / -2); }
.mat-slider__end--max { right: calc(var(--mat-slider-knob) / -2); }
.mat-slider__tick-label { left: var(--mat-slider-at); transform: translateX(-50%); }

/* Disabled: every input of the slider is (a fieldset can disable them as well). */
.mat-slider:not(:has(.mat-slider__input:enabled)) { opacity: .5; }
.mat-slider:not(:has(.mat-slider__input:enabled)) .mat-slider__rail { cursor: not-allowed; }

/* Forced colours (a high-contrast mode): backgrounds are dropped there, so the filled part and the bubble get what they need from the system colours. */
@media (forced-colors: active) {
  .mat-slider__fill { background: Highlight; }
  .mat-slider__track, .mat-slider__bubble { border: 1px solid CanvasText; }
}

/* ==========================================================================
   MatUi · pickers (FORM-15)
   A picker is a field that is filled in a panel: a select with pictures, descriptions and tags, a date or a period, a time or a time range,
   a colour. The input inside (.mat-picker__input) holds the value that is posted; matui.js adds the button that shows it and the panel.
   On a phone the panel is a full-screen sheet with the X at the top right, like every dialog.
   ========================================================================== */

.mat-picker { position: relative; display: block; min-width: 0; }
/* The real input stays in the form (it is what is validated and posted) but is not drawn; it lies over the button so that a browser message points at it. */
.mat-picker__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }

/* ---- The button that looks like a field ---- */
.mat-picker__trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--mat-space-3); text-align: left; cursor: pointer; font: inherit; }
.mat-picker__trigger > .mat-icon { flex: none; color: var(--mat-text-muted); }
.mat-picker__trigger[aria-expanded="true"] { border-color: var(--mat-accent); box-shadow: var(--mat-focus-ring); }
.mat-picker__trigger:focus-visible { border-color: var(--mat-accent); box-shadow: var(--mat-focus-ring); outline: none; }
.mat-picker__value { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--mat-space-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mat-picker__value.is-placeholder { color: var(--mat-text-faint); }
.mat-picker__trigger.is-clearable .mat-picker__value { padding-right: 30px; }
.mat-picker__clear {
  position: absolute; top: 50%; right: 36px; transform: translateY(-50%);
  display: grid; place-items: center; width: 28px; height: 28px;
  border: 0; border-radius: 50%; background: transparent; color: var(--mat-text-muted); cursor: pointer;
}
.mat-picker__clear:hover { background: var(--mat-surface-3); color: var(--mat-text); }
.mat-picker__clear:focus-visible { outline: none; box-shadow: var(--mat-focus-ring); }
.mat-picker__clear[hidden] { display: none; }
.mat-picker--sm .mat-picker__trigger { min-height: var(--mat-control-h-sm); font-size: var(--mat-fs-sm); padding-inline: var(--mat-space-2); }
.mat-picker--lg .mat-picker__trigger { min-height: var(--mat-control-h-lg); font-size: var(--mat-fs-lg); padding-inline: var(--mat-space-4); }
.mat-picker__swatch { flex: none; width: 18px; height: 18px; border-radius: var(--mat-radius-xs); background: var(--mat-swatch, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mat-text) 22%, transparent); }

/* ---- The panel: next to the button on a wide screen, the whole screen on a phone ---- */
.mat-picker__panel {
  position: fixed; z-index: var(--mat-z-menu);
  display: flex; flex-direction: column;
  min-width: 280px; max-width: min(96vw, 720px); max-height: calc(100dvh - 16px);
  background: var(--mat-surface); color: var(--mat-text);
  border: 1px solid var(--mat-border-strong); border-radius: var(--mat-radius-lg); box-shadow: var(--mat-shadow-3);
  /* the panel only fades in: a panel that also moves and grows (as a menu does) looks as if it first appeared at the wrong place and then slid into its own */
  animation: mat-picker-in var(--mat-dur-fast) var(--mat-ease);
  transform-origin: top left;
}
@keyframes mat-picker-in { from { opacity: 0; } }
.mat-picker__panel[hidden] { display: none; }
.mat-picker__head { display: none; align-items: center; gap: var(--mat-space-3); padding: var(--mat-space-3) var(--mat-space-3) var(--mat-space-3) var(--mat-space-4); border-bottom: 1px solid var(--mat-border); flex: none; }
.mat-picker__heading { flex: 1 1 auto; min-width: 0; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mat-picker__body { padding: var(--mat-space-3); overflow: auto; min-height: 0; flex: 1 1 auto; overscroll-behavior: contain; }
.mat-picker__foot { display: flex; align-items: center; gap: var(--mat-space-3); padding: var(--mat-space-3); border-top: 1px solid var(--mat-border); flex: none; }
.mat-picker__foot[hidden] { display: none; }
.mat-picker__spacer { flex: 1 1 auto; }
.mat-picker__status { min-height: 1.4em; font-size: var(--mat-fs-sm); color: var(--mat-text-muted); }
.mat-picker__status[hidden] { display: none; }
.mat-picker__chips { display: flex; flex-wrap: wrap; gap: var(--mat-space-2); }
.mat-picker__chips[hidden] { display: none; }

@media (max-width: 640px) {
  .mat-picker__panel {
    inset: 0; width: 100%; height: 100%; min-width: 0; max-width: none; max-height: none;
    border: 0; border-radius: 0; box-shadow: none;
    padding-top: var(--mat-safe-top); padding-bottom: var(--mat-safe-bottom);
    animation: none;
  }
  .mat-picker__head { display: flex; }
  .mat-picker__body { padding: var(--mat-space-4); }
  .mat-picker__foot { padding: var(--mat-space-4); }
}

/* ---- Select with a picture, a title, a description and tags ---- */
.mat-picker__panel--list { width: max-content; }
.mat-picker__search { position: relative; padding: var(--mat-space-2) var(--mat-space-2) 0; }
.mat-picker__search > .mat-icon { position: absolute; left: calc(var(--mat-space-2) + var(--mat-space-3)); top: calc(var(--mat-space-2) + (var(--mat-control-h) - 1.25em) / 2); color: var(--mat-text-muted); pointer-events: none; }
.mat-picker__search > .mat-input { padding-left: calc(var(--mat-space-3) + 1.75em); }
.mat-picker__panel--list .mat-picker__body { padding: 0; display: flex; flex-direction: column; }
.mat-picker__options { display: flex; flex-direction: column; gap: 2px; padding: var(--mat-space-2); overflow: auto; max-height: min(360px, 55dvh); }
.mat-picker__options[hidden] { display: none; }
.mat-picker__option {
  position: relative; display: flex; align-items: center; gap: var(--mat-space-3);
  width: 100%; padding: var(--mat-space-2) var(--mat-space-3);
  border: 0; border-radius: var(--mat-radius-sm); background: transparent; color: var(--mat-text);
  font: inherit; text-align: left; cursor: pointer;
}
.mat-picker__option[hidden] { display: none; }
.mat-picker__option:hover, .mat-picker__option:focus-visible { background: var(--mat-surface-3); outline: none; }
.mat-picker__option:focus-visible { box-shadow: var(--mat-focus-ring); }
.mat-picker__option[aria-selected="true"] { background: var(--mat-accent-soft-strong); }
.mat-picker__option:disabled { opacity: .5; cursor: not-allowed; }
.mat-picker__img {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: var(--mat-radius-sm); object-fit: cover; background: var(--mat-surface-3); color: var(--mat-text-muted);
}
.mat-picker__value .mat-picker__img { width: 24px; height: 24px; border-radius: var(--mat-radius-xs); }
.mat-picker__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mat-picker__name { font-weight: 650; }
.mat-picker__desc { font-size: var(--mat-fs-sm); color: var(--mat-text-muted); line-height: 1.4; }
.mat-picker__tags { display: flex; flex-wrap: wrap; gap: var(--mat-space-1); margin-top: 2px; }
.mat-picker__check { flex: none; display: grid; place-items: center; width: 22px; height: 22px; color: var(--mat-accent-text); visibility: hidden; }
.mat-picker__option[aria-selected="true"] .mat-picker__check { visibility: visible; }
/* Several choices: a box in front of every option, filled when it is chosen. */
.mat-picker--multiple .mat-picker__check { order: -1; visibility: visible; width: 20px; height: 20px; border: 1.5px solid var(--mat-border-strong); border-radius: var(--mat-radius-xs); background: var(--mat-surface); color: transparent; }
.mat-picker--multiple .mat-picker__option[aria-selected="true"] .mat-picker__check { background: var(--mat-accent); border-color: var(--mat-accent); color: var(--mat-on-accent); }
/* "Select all" (data-select-all): the first row above the list, with the box in three states (all, some or none of the options that are shown are chosen). */
.mat-picker__all {
  display: flex; align-items: center; gap: var(--mat-space-3);
  margin: var(--mat-space-2) var(--mat-space-2) 0; padding: var(--mat-space-2) var(--mat-space-3);
  border: 0; border-radius: var(--mat-radius-sm); background: transparent; color: var(--mat-text);
  font: inherit; font-weight: 650; text-align: left; cursor: pointer;
}
.mat-picker__all[hidden] { display: none; }
.mat-picker__all:hover, .mat-picker__all:focus-visible { background: var(--mat-surface-3); outline: none; }
.mat-picker__all:focus-visible { box-shadow: var(--mat-focus-ring); }
.mat-picker__all + .mat-picker__options { margin-top: var(--mat-space-2); border-top: 1px solid var(--mat-border); }
.mat-picker__all[aria-checked="true"] .mat-picker__check, .mat-picker__all[aria-checked="mixed"] .mat-picker__check { background: var(--mat-accent); border-color: var(--mat-accent); color: var(--mat-on-accent); }
.mat-picker__all[aria-checked="mixed"] .mat-picker__check > .mat-icon { display: none; }
.mat-picker__all[aria-checked="mixed"] .mat-picker__check::after { content: ""; width: 10px; height: 2px; border-radius: 1px; background: currentColor; }
.mat-picker__empty { padding: var(--mat-space-5) var(--mat-space-4); text-align: center; color: var(--mat-text-muted); }
.mat-picker__empty[hidden] { display: none; }
@media (max-width: 640px) {
  .mat-picker__panel--list { width: 100%; }
  .mat-picker__panel--list .mat-picker__body { padding: 0; }
  .mat-picker__options { max-height: none; flex: 1 1 auto; padding: var(--mat-space-3); }
  .mat-picker__option { padding: var(--mat-space-3); }
  .mat-picker__all { margin: var(--mat-space-3) var(--mat-space-3) 0; padding: var(--mat-space-3); }
  .mat-picker__img { width: 52px; height: 52px; }
  .mat-picker__search { padding: var(--mat-space-3) var(--mat-space-3) 0; }
  .mat-picker__search > .mat-icon { left: calc(var(--mat-space-3) + var(--mat-space-3)); top: calc(var(--mat-space-3) + (var(--mat-control-h) - 1.25em) / 2); }
}

/* ---- Calendar: a date, a period ---- */
.mat-cal { display: flex; flex-direction: column; gap: var(--mat-space-3); min-width: 0; }
.mat-cal__months { display: flex; gap: var(--mat-space-6); }
.mat-cal__month { flex: 1 1 0; min-width: 252px; }
.mat-cal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--mat-space-2); min-height: 40px; }
.mat-cal__title { flex: 1 1 auto; text-align: center; font-weight: 650; text-transform: capitalize; }
.mat-cal__nav-gap { flex: none; width: var(--mat-control-h-sm); }
.mat-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 2px; }
.mat-cal__row { display: contents; }
.mat-cal__dow { padding: var(--mat-space-2) 0; text-align: center; font-size: var(--mat-fs-xs); font-weight: 600; color: var(--mat-text-muted); }
.mat-cal__day {
  height: 38px; min-width: 0; padding: 0;
  border: 1.5px solid transparent; border-radius: var(--mat-radius-sm);
  background: transparent; color: var(--mat-text); font: inherit; font-variant-numeric: tabular-nums; cursor: pointer;
}
.mat-cal__day:hover:not(:disabled) { background: var(--mat-accent-soft-strong); }
.mat-cal__day:focus-visible { outline: none; box-shadow: var(--mat-focus-ring); }
.mat-cal__day.is-today { border-color: var(--mat-accent); }
.mat-cal__day.is-in-range { background: var(--mat-accent-soft-strong); border-radius: 0; }
.mat-cal__day.is-selected, .mat-cal__day.is-selected:hover:not(:disabled) { background: var(--mat-accent); color: var(--mat-on-accent); font-weight: 650; }
.mat-cal__day.is-range-start { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.mat-cal__day.is-range-end { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.mat-cal__day:disabled { color: var(--mat-text-faint); cursor: not-allowed; }
.mat-cal__tools { display: flex; align-items: center; gap: var(--mat-space-2); }
@media (max-width: 640px) {
  .mat-cal__month { min-width: 0; }
  .mat-cal__day { height: 44px; }
  .mat-cal .mat-cal__pick { min-height: 20rem; }
}

/* ---- Time: columns of hours and minutes, and a field to type in ---- */
.mat-time { display: flex; flex-direction: column; gap: var(--mat-space-3); min-width: 0; }
.mat-time__entry { text-align: center; font-family: var(--mat-mono); max-width: 9rem; }
.mat-time__cols { display: flex; gap: var(--mat-space-2); }
.mat-timecol {
  position: relative; flex: 1 1 0; min-width: 64px; max-height: 224px; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 2px; padding: 2px;
  border: 1px solid var(--mat-border); border-radius: var(--mat-radius);
}
.mat-timecol__item {
  flex: none; height: 36px; padding: 0 var(--mat-space-2);
  border: 0; border-radius: var(--mat-radius-sm); background: transparent; color: var(--mat-text);
  font: inherit; font-variant-numeric: tabular-nums; cursor: pointer;
}
.mat-timecol__item:hover { background: var(--mat-accent-soft-strong); }
.mat-timecol__item:focus-visible { outline: none; box-shadow: var(--mat-focus-ring); }
.mat-timecol__item[aria-selected="true"] { background: var(--mat-accent); color: var(--mat-on-accent); font-weight: 650; }
@media (max-width: 640px) {
  .mat-timecol { max-height: min(40dvh, 320px); }
  .mat-timecol__item { height: 44px; }
}

/* ---- Colour: swatches, then the free choice ---- */
.mat-colour { display: flex; flex-direction: column; gap: var(--mat-space-3); min-width: 0; }
.mat-colour__swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(28px, 1fr)); gap: var(--mat-space-2); }
.mat-colour__swatch {
  position: relative; display: grid; place-items: center; aspect-ratio: 1; min-width: 0; padding: 0;
  border: 0; border-radius: var(--mat-radius-sm); background: var(--mat-swatch); color: var(--mat-swatch-on); cursor: pointer;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mat-text) 20%, transparent);
}
.mat-colour__swatch > .mat-icon { opacity: 0; }
.mat-colour__swatch[aria-pressed="true"] > .mat-icon { opacity: 1; }
.mat-colour__swatch:hover { transform: scale(1.06); }
.mat-colour__swatch:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--mat-surface), 0 0 0 4px var(--mat-text); }
.mat-colour__area {
  position: relative; height: 132px; border-radius: var(--mat-radius); cursor: crosshair; touch-action: none;
  background: linear-gradient(to top, var(--mat-picker-dark), transparent), linear-gradient(to right, var(--mat-picker-light), var(--mat-hue));
}
.mat-colour__area:focus-visible { outline: none; box-shadow: var(--mat-focus-ring); }
.mat-colour__thumb {
  position: absolute; left: var(--mat-x); top: var(--mat-y); width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border: 2px solid var(--mat-picker-light); border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 1px var(--mat-picker-dark), var(--mat-shadow-1);
}
.mat-colour__hue { -webkit-appearance: none; appearance: none; width: 100%; height: 14px; margin: 0; border-radius: var(--mat-radius-pill); background: var(--mat-picker-hues); cursor: pointer; }
.mat-colour__hue::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border: 2px solid var(--mat-picker-light); border-radius: 50%; background: var(--mat-hue); box-shadow: 0 0 0 1px var(--mat-picker-dark), var(--mat-shadow-1); }
.mat-colour__hue::-moz-range-thumb { width: 16px; height: 16px; border: 2px solid var(--mat-picker-light); border-radius: 50%; background: var(--mat-hue); box-shadow: 0 0 0 1px var(--mat-picker-dark), var(--mat-shadow-1); }
.mat-colour__hue:focus-visible { outline: none; box-shadow: var(--mat-focus-ring); }
.mat-colour__row { display: flex; align-items: center; gap: var(--mat-space-3); }
.mat-colour__preview { flex: none; width: 44px; height: var(--mat-control-h); border-radius: var(--mat-radius-sm); background: var(--mat-swatch); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mat-text) 22%, transparent); }
.mat-colour__hex { max-width: 9rem; font-family: var(--mat-mono); text-transform: uppercase; }
.mat-colour__contrast { display: flex; align-items: center; gap: var(--mat-space-2); font-size: var(--mat-fs-sm); color: var(--mat-text-muted); }
.mat-colour__sample { flex: none; display: grid; place-items: center; width: 34px; height: 26px; border-radius: var(--mat-radius-xs); background: var(--mat-swatch); color: var(--mat-swatch-on); font-weight: 650; font-size: var(--mat-fs-sm); }
@media (max-width: 640px) {
  .mat-colour__area { height: 200px; }
}

/* The chosen chip (flexible dates): the same tint as a chosen button of a group. */
.mat-picker__chips .mat-btn.is-active { background: var(--mat-accent-soft-strong); border-color: var(--mat-accent); color: var(--mat-accent-text); }
.mat-time__entry[aria-invalid="true"], .mat-colour__hex[aria-invalid="true"] { border-color: var(--mat-danger); }

/* ---- Tags: a field of chips that the user types into (data-picker="tags") ----
   The field is drawn like every field (mat-input) but grows with its chips; the text field inside has no border of its own. The suggestions are the list of a
   select, as a dropdown under the field on every screen size (it is not a full-screen sheet: the keyboard stays in the field). */
.mat-tagfield { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mat-space-1) var(--mat-space-2); height: auto; padding: var(--mat-space-1) var(--mat-space-2); cursor: text; }
.mat-tagfield:focus-within { border-color: var(--mat-accent); box-shadow: var(--mat-focus-ring); }
.mat-tagfield.is-disabled { background: var(--mat-surface-3); color: var(--mat-text-muted); cursor: not-allowed; }
.mat-tagfield.is-readonly { background: var(--mat-surface-2); cursor: default; }
.mat-tagfield .mat-chip { max-width: 100%; min-width: 0; }
.mat-tagfield.is-disabled .mat-chip { background: var(--mat-surface-3); color: var(--mat-text-muted); }
.mat-tagfield .mat-chip__x:focus-visible { outline: none; box-shadow: var(--mat-focus-ring); }
.mat-chip__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mat-tagfield__input { flex: 1 1 8ch; min-width: 8ch; min-height: var(--mat-control-h-sm); padding: 0 var(--mat-space-1); border: 0; outline: none; background: transparent; color: inherit; font: inherit; }
/* the field around it shows the focus (:focus-within), so the text field draws no ring of its own */
.mat-tagfield__input:focus-visible { box-shadow: none; border-radius: 0; }
.mat-tagfield__input::placeholder { color: var(--mat-text-faint); }
.mat-tagfield__input:disabled { cursor: not-allowed; }
.mat-picker--sm .mat-tagfield { min-height: var(--mat-control-h-sm); font-size: var(--mat-fs-sm); }
.mat-picker--lg .mat-tagfield { min-height: var(--mat-control-h-lg); font-size: var(--mat-fs-lg); }
.mat-picker__panel--suggest { min-width: 0; }
.mat-picker__option.is-active { background: var(--mat-surface-3); }
@media (max-width: 640px) {
  .mat-picker__panel.mat-picker__panel--suggest {
    inset: auto; width: auto; height: auto; max-height: min(50dvh, 320px); padding: 0;
    border: 1px solid var(--mat-border-strong); border-radius: var(--mat-radius-lg); box-shadow: var(--mat-shadow-3);
    animation: mat-picker-in var(--mat-dur-fast) var(--mat-ease);
  }
  .mat-picker__panel--suggest .mat-picker__options { max-height: min(50dvh, 320px); padding: var(--mat-space-2); }
}

/* ---- The month grid, shared by the date picker, the calendar and the appointment picker (FORM-18) ----
   A day can carry dots (events, free appointments), a day that cannot be chosen is dimmed (and struck through, or absent), the title of the month is a button that
   leads to the choice of a month and then of a year, and a column of week numbers can stand in front of the rows. */
.mat-cal__day { position: relative; }
.mat-cal__marks { position: absolute; left: 0; right: 0; bottom: 4px; display: flex; justify-content: center; gap: 2px; pointer-events: none; }
.mat-cal__mark { width: 4px; height: 4px; border-radius: 50%; background: var(--mat-accent); }
.mat-cal__day.is-selected .mat-cal__mark { background: currentColor; }
/* what cannot be chosen says so in a second way besides its colour (COLOR-04): a line through the number */
.mat-cal__day.is-unavailable { text-decoration: line-through; }
.mat-cal__day.is-absent { visibility: hidden; }
.mat-cal__grid--weeks { grid-template-columns: 2.25rem repeat(7, minmax(0, 1fr)); }
.mat-cal__wk { display: grid; place-items: center; font-size: var(--mat-fs-xs); color: var(--mat-text-muted); font-variant-numeric: tabular-nums; }
.mat-cal__title--button {
  flex: 0 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: var(--mat-space-1);
  min-height: var(--mat-control-h-sm); padding: 0 var(--mat-space-2);
  border: 0; border-radius: var(--mat-radius-sm); background: transparent; color: inherit; font: inherit; font-weight: 650; cursor: pointer;
}
.mat-cal__title--button:hover { background: var(--mat-surface-3); }
.mat-cal__title--button:focus-visible { outline: none; box-shadow: var(--mat-focus-ring); }
.mat-cal__title--button > .mat-icon { flex: none; color: var(--mat-text-muted); }
.mat-cal__pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(48px, 1fr); gap: var(--mat-space-2); min-height: 17rem; padding-top: var(--mat-space-2); }
.mat-cal__cell {
  min-width: 0; padding: 0; border: 1.5px solid transparent; border-radius: var(--mat-radius-sm);
  background: transparent; color: var(--mat-text); font: inherit; font-variant-numeric: tabular-nums; text-transform: capitalize; cursor: pointer;
}
.mat-cal__cell:hover:not(:disabled) { background: var(--mat-accent-soft-strong); }
.mat-cal__cell:focus-visible { outline: none; box-shadow: var(--mat-focus-ring); }
.mat-cal__cell.is-today { border-color: var(--mat-accent); }
.mat-cal__cell.is-current { background: var(--mat-accent-soft-strong); font-weight: 650; }
.mat-cal__cell:disabled { color: var(--mat-text-faint); cursor: not-allowed; }

/* ---- Calendar: always shown (data-calendar) ----
   A surface with a line around it, like a card. The real input is not drawn; it lies over the calendar so that a browser message points at it. */
.mat-calendar { position: relative; display: block; width: 100%; max-width: 22.5rem; padding: var(--mat-space-3); background: var(--mat-surface); border: 1px solid var(--mat-border); border-radius: var(--mat-radius-lg); }
.mat-calendar[data-months="2"] { max-width: 40rem; }
.mat-calendar__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.mat-calendar .mat-cal__months { flex-wrap: wrap; }
.mat-calendar[data-months="2"] .mat-cal__month { min-width: min(252px, 100%); }
.mat-field.is-invalid .mat-calendar { border-color: var(--mat-danger); }
.mat-calendar__agenda { display: flex; flex-direction: column; gap: var(--mat-space-2); margin-top: var(--mat-space-3); padding-top: var(--mat-space-3); border-top: 1px solid var(--mat-border); }
.mat-calendar__agenda-title { margin: 0; font-weight: 650; }
.mat-calendar__events { display: flex; flex-direction: column; gap: var(--mat-space-1); margin: 0; padding: 0; list-style: none; }
.mat-calendar__event { display: flex; align-items: baseline; gap: var(--mat-space-3); padding: var(--mat-space-2) var(--mat-space-3); border-radius: var(--mat-radius-sm); background: var(--mat-surface-2); }
.mat-calendar__time { flex: none; min-width: 5.5rem; font-size: var(--mat-fs-sm); font-variant-numeric: tabular-nums; color: var(--mat-text-muted); }
.mat-calendar__what { min-width: 0; overflow-wrap: anywhere; }
.mat-calendar__none { margin: 0; font-size: var(--mat-fs-sm); color: var(--mat-text-muted); }

/* ---- Appointment picker: a month, then the times of the chosen day (data-picker="slot") ----
   Side by side on a wide screen (the times scroll inside their column, so that the panel keeps its height when another day is chosen), one below the other on a phone. */
@media (min-width: 641px) {
  .mat-picker__panel--slots { width: min(96vw, 42rem); }
}
.mat-picker__panel--slots .mat-picker__foot { flex-wrap: wrap; }
.mat-slots { display: grid; gap: var(--mat-space-5); min-width: 0; }
.mat-slots__cal, .mat-slots__day { min-width: 0; }
@media (min-width: 641px) {
  .mat-slots { grid-template-columns: 19rem minmax(0, 1fr); gap: var(--mat-space-6); }
  .mat-slots__day { position: relative; }
  .mat-slots__scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px; }
}
.mat-slots__status { display: flex; align-items: center; gap: var(--mat-space-2); flex-wrap: wrap; }
.mat-slots__heading { margin: 0; font-weight: 650; }
.mat-slots__hint { margin: 2px 0 0; font-size: var(--mat-fs-sm); color: var(--mat-text-muted); }
.mat-slots__empty { display: flex; align-items: center; gap: var(--mat-space-2); margin: var(--mat-space-3) 0 0; color: var(--mat-text-muted); }
.mat-slots__group-title { margin: var(--mat-space-4) 0 var(--mat-space-2); font-size: var(--mat-fs-sm); font-weight: 600; color: var(--mat-text-muted); }
.mat-slots__heading + .mat-slots__list, .mat-slots__hint + .mat-slots__list { margin-top: var(--mat-space-3); }
.mat-slots__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr)); gap: var(--mat-space-2); }
.mat-slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: var(--mat-control-h); padding: 0 var(--mat-space-2);
  border: 1px solid var(--mat-border-strong); border-radius: var(--mat-radius); background: var(--mat-surface); color: var(--mat-text);
  font: inherit; font-variant-numeric: tabular-nums; cursor: pointer;
}
.mat-slot:hover:not(:disabled) { background: var(--mat-accent-soft-strong); border-color: var(--mat-accent); }
.mat-slot:focus-visible { outline: none; box-shadow: var(--mat-focus-ring); }
.mat-slot[aria-pressed="true"], .mat-slot[aria-pressed="true"]:hover { background: var(--mat-accent); border-color: var(--mat-accent); color: var(--mat-on-accent); font-weight: 650; }
/* a taken time is dashed, struck through and says "Taken": not a colour alone (COLOR-04) */
.mat-slot:disabled { background: var(--mat-surface-2); border-style: dashed; border-color: var(--mat-border); color: var(--mat-text-faint); cursor: not-allowed; }
.mat-slot:disabled .mat-slot__time { text-decoration: line-through; }
.mat-slot__note { font-size: var(--mat-fs-xs); line-height: 1.1; color: var(--mat-text-muted); }
.mat-slots__summary { flex: 1 1 100%; margin: 0; font-weight: 650; }
.mat-slots__summary.is-empty { font-weight: 400; color: var(--mat-text-muted); }

/* ==========================================================================
   MatUi · lists
   The list block (toolbar -> applied filters -> table or gallery -> empty state -> pagination -> actions), tabs and the
   context menu. A list or a gallery ALWAYS has the toolbar above it. FILTER and SORT are buttons that open a dialog, and so
   is SEARCH, unless the search is a field right in the toolbar with the dialog buttons at its right end (LIST-01 to LIST-03).
   ========================================================================== */

/* ---- The list block: the order is fixed here, whatever the markup order ---- */
.mat-list { display: flex; flex-direction: column; gap: var(--mat-space-4); min-width: 0; }
.mat-list > .mat-toolbar { order: 0; }
.mat-list > .mat-chips { order: 1; }
.mat-list > .mat-table-wrap, .mat-list > .mat-gallery { order: 2; }
.mat-list > .mat-empty { order: 3; }
.mat-list > .mat-pager { order: 4; }
.mat-list > .mat-actions { order: 5; }

/* ---- Toolbar ---- */
.mat-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mat-space-2);
  padding: var(--mat-space-2);
  background: var(--mat-surface);
  border: 1px solid var(--mat-border);
  border-radius: var(--mat-radius-lg);
  box-shadow: var(--mat-shadow-1);
}
.mat-toolbar__btn { background: transparent; border-color: transparent; color: var(--mat-text); }
.mat-toolbar__btn:hover { background: var(--mat-surface-3); }
/* A search, filter or sort that is in effect is shown on its button. */
.mat-toolbar__btn.is-active { background: var(--mat-accent-soft-strong); color: var(--mat-accent-text); }
.mat-toolbar__btn small { color: var(--mat-text-muted); font-weight: 500; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; }
.mat-toolbar__btn.is-active small { color: inherit; }
.mat-toolbar__spacer { flex: 1 1 var(--mat-space-4); }
.mat-toolbar__info { color: var(--mat-text-muted); font-size: var(--mat-fs-sm); padding: 0 var(--mat-space-3); white-space: nowrap; }
/* The search can be a field right in the toolbar, at its left (mat-input-icon puts the icon inside it), and the dialog buttons (Filter, Sort) and the
   switch of the views sit together at the right end (mat-toolbar__end). Without a field the search is a button like the others (LIST-03). */
.mat-toolbar__search { flex: 1 1 16rem; min-width: 0; max-width: 28rem; }
.mat-toolbar__end { display: flex; align-items: center; gap: var(--mat-space-2); margin-left: auto; flex: none; }
@media (max-width: 480px) {
  .mat-toolbar__btn small { display: none; }
  .mat-toolbar__info { width: 100%; padding: 0 var(--mat-space-2); order: 9; }
  .mat-toolbar__search { flex-basis: 100%; max-width: none; }
}

/* ---- Table ---- */
.mat-table-wrap {
  overflow-x: auto;
  background: var(--mat-surface);
  border: 1px solid var(--mat-border);
  border-radius: var(--mat-radius-lg);
  box-shadow: var(--mat-shadow-1);
}
.mat-table { width: 100%; border-collapse: collapse; font-size: var(--mat-fs-sm); }
.mat-table caption { text-align: left; padding: var(--mat-space-3) var(--mat-space-4); color: var(--mat-text-muted); }
.mat-table th {
  padding: var(--mat-space-3) var(--mat-space-4);
  text-align: left;
  font-size: var(--mat-fs-sm);
  font-weight: 600;
  color: var(--mat-text-muted);
  background: var(--mat-surface-2);
  border-bottom: 1px solid var(--mat-border);
  white-space: nowrap;
}
.mat-table td { padding: var(--mat-space-3) var(--mat-space-4); border-top: 1px solid var(--mat-border); vertical-align: middle; }
.mat-table tbody tr:hover { background: var(--mat-surface-2); }
.mat-table tbody tr.is-selected { background: var(--mat-accent-soft-strong); }
.mat-table th.mat-num { text-align: right; }
.mat-table--zebra tbody tr:nth-child(even) { background: var(--mat-surface-2); }
.mat-table--zebra tbody tr:nth-child(even):hover { background: var(--mat-surface-3); }
.mat-table__name { display: flex; align-items: center; gap: var(--mat-space-3); min-width: 0; font-weight: 600; }
.mat-table__name small { display: block; color: var(--mat-text-muted); font-weight: 400; }
.mat-table__name .mat-muted { font-weight: 400; } /* a part of the name that the group already says: .example.org after app */
.mat-table__actions { display: flex; justify-content: flex-end; gap: var(--mat-space-1); }
.mat-table td.mat-table__cell-actions { width: 1%; white-space: nowrap; }

/* Under 720 px a row becomes a card; every <td> needs data-label for that (RULE TABLE-02). */
@media (max-width: 720px) {
  .mat-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .mat-table, .mat-table tbody, .mat-table tr, .mat-table td { display: block; width: 100%; }
  .mat-table tr { padding: var(--mat-space-3) var(--mat-space-4); border-top: 1px solid var(--mat-border); }
  .mat-table tbody tr:first-child { border-top: 0; }
  .mat-table td { display: flex; align-items: baseline; justify-content: space-between; gap: var(--mat-space-4); padding: var(--mat-space-1) 0; border: 0; text-align: right; }
  .mat-table td::before { content: attr(data-label); flex: none; color: var(--mat-text-muted); font-size: var(--mat-fs-sm); font-weight: 500; text-align: left; }
  .mat-table td:not([data-label])::before, .mat-table td[data-label=""]::before { content: none; }
  .mat-table td.mat-table__cell-actions { width: 100%; }
  .mat-table td .mat-table__name { text-align: left; }
  /* The check of a selectable row is the first thing of its card, without a label (it has an accessible name of its own). */
  .mat-table td.mat-table__select { width: 100%; justify-content: flex-start; }
  .mat-table td.mat-table__select::before { content: none; }
}

/* ---- Groups in a table (LIST-16): rows under a heading that opens and closes. The items hang on a line below the heading, and the action that adds one
   is the last row of the group. A group is a <tbody class="mat-group">; its first row is the heading (.mat-group__head), the rows after it are items
   (.mat-group__item), the last may be the add row (.mat-group__add). The script (data-groups on the table) opens and closes a group and remembers the choice;
   without it every group stays open. ---- */
.mat-group { --mat-group-x: 1.375rem; --mat-group-line: var(--mat-border-strong); }
.mat-group__head > .mat-group__cell { padding: 0; background: var(--mat-surface-2); }
.mat-group__bar { display: flex; align-items: center; gap: var(--mat-space-2); min-height: var(--mat-control-h); padding-right: var(--mat-space-3); }
.mat-group__toggle {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--mat-space-3);
  min-height: var(--mat-control-h); padding: var(--mat-space-1) var(--mat-space-4);
  border: 0; border-radius: 0; background: transparent; color: var(--mat-text);
  font: inherit; font-weight: 600; text-align: left; cursor: pointer;
  transition: background var(--mat-dur-fast) var(--mat-ease);
}
.mat-group__toggle:hover { background: var(--mat-accent-soft); }
.mat-group__toggle:focus-visible { box-shadow: inset 0 0 0 2px var(--mat-accent); border-radius: 0; }
.mat-group__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mat-group__chev { flex: none; color: var(--mat-text-muted); transition: transform var(--mat-dur) var(--mat-ease); }
.mat-group.is-collapsed .mat-group__chev { transform: rotate(-90deg); }
.mat-group__actions { display: flex; align-items: center; gap: var(--mat-space-1); flex: none; }
.mat-group.is-collapsed > tr:not(.mat-group__head) { display: none; }
/* The line: one short stroke from the heading down the rows, a branch to each item, and the last row ends it. */
.mat-group__item > td:first-child, .mat-group__add > td:first-child { position: relative; padding-left: calc(var(--mat-group-x) + var(--mat-space-6)); }
.mat-group__item > td:first-child::before, .mat-group__add > td:first-child::before,
.mat-group__item > td:first-child::after, .mat-group__add > td:first-child::after { content: ""; position: absolute; left: var(--mat-group-x); pointer-events: none; }
.mat-group__item > td:first-child::before, .mat-group__add > td:first-child::before { top: -1px; bottom: 0; border-left: 1px solid var(--mat-group-line); }
.mat-group > tr:last-child > td:first-child::before { bottom: 50%; }
.mat-group__item > td:first-child::after, .mat-group__add > td:first-child::after { top: 50%; width: var(--mat-space-4); border-top: 1px solid var(--mat-group-line); }
.mat-group__add > .mat-group__cell { color: var(--mat-text-muted); }
.mat-group__add > .mat-group__cell > .mat-btn { margin-left: calc(var(--mat-space-3) * -1); }
@media (max-width: 720px) {
  /* A row is a card here: no line, the heading is a bar over its cards, and the add row is a card with its button. */
  .mat-table .mat-group__head { padding: 0; }
  .mat-table tbody.mat-group:not(:first-of-type) > tr.mat-group__head { border-top: 1px solid var(--mat-border); }
  .mat-group__head > .mat-group__cell { display: block; }
  .mat-group__item > td:first-child, .mat-group__add > td:first-child { padding-left: 0; }
  /* the ::before that drew the line is the label of the cell again (when it has one), the ::after is not needed */
  .mat-group__item > td:first-child::before, .mat-group__add > td:first-child::before { position: static; border: 0; content: none; }
  .mat-group__item > td:first-child[data-label]:not([data-label=""])::before { content: attr(data-label); }
  .mat-group__item > td:first-child::after, .mat-group__add > td:first-child::after { content: none; }
  .mat-group__add > .mat-group__cell { justify-content: flex-start; text-align: left; }
  .mat-group__add > .mat-group__cell > .mat-btn { margin-left: 0; }
}

/* ---- Pagination: directly under the table, nothing between ---- */
.mat-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mat-space-3); }
.mat-pager__info { color: var(--mat-text-muted); font-size: var(--mat-fs-sm); }
.mat-pager__pages { display: flex; flex-wrap: wrap; gap: var(--mat-space-1); }
.mat-pager__btn {
  display: inline-grid; place-items: center;
  min-width: var(--mat-control-h-sm); height: var(--mat-control-h-sm);
  padding: 0 var(--mat-space-2);
  border: 1px solid var(--mat-border); border-radius: var(--mat-radius-sm);
  background: var(--mat-surface); color: var(--mat-text);
  font-weight: 600; font-size: var(--mat-fs-sm); text-decoration: none;
}
a.mat-pager__btn:hover { background: var(--mat-surface-3); text-decoration: none; }
.mat-pager__btn.is-current { background: var(--mat-accent); border-color: var(--mat-accent); color: var(--mat-on-accent); }
.mat-pager__btn.is-disabled { opacity: .45; pointer-events: none; }
.mat-pager__gap { display: inline-grid; place-items: center; min-width: 20px; color: var(--mat-text-muted); }

/* ---- Gallery ---- */
.mat-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--mat-gap); }
.mat-tile {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: var(--mat-surface); border: 1px solid var(--mat-border); border-radius: var(--mat-radius-lg);
  color: inherit; text-decoration: none;
  transition: border-color var(--mat-dur) var(--mat-ease), background var(--mat-dur) var(--mat-ease);
}
a.mat-tile:hover { border-color: var(--mat-text-faint); background: var(--mat-surface-2); text-decoration: none; }
.mat-tile.is-selected { border-color: var(--mat-accent); box-shadow: var(--mat-focus-ring); }
.mat-tile__media { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--mat-surface-3); color: var(--mat-text-muted); font-size: 2rem; overflow: hidden; }
.mat-tile__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mat-tile__body { padding: var(--mat-space-3) var(--mat-space-4); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mat-tile__title { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mat-tile__meta { color: var(--mat-text-muted); font-size: var(--mat-fs-xs); }

/* ---- Tabs (one style app-wide: underline) ---- */
.mat-tabs { display: flex; gap: var(--mat-space-1); border-bottom: 1px solid var(--mat-border); overflow-x: auto; }
.mat-tab {
  display: inline-flex; align-items: center; gap: var(--mat-space-2);
  min-height: var(--mat-control-h); padding: 0 var(--mat-space-4);
  margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  background: transparent; color: var(--mat-text-muted);
  font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: color var(--mat-dur-fast) var(--mat-ease), border-color var(--mat-dur-fast) var(--mat-ease);
}
.mat-tab:hover { color: var(--mat-text); text-decoration: none; }
.mat-tab[aria-selected="true"], .mat-tab.is-active { color: var(--mat-accent-text); border-bottom-color: var(--mat-accent); }
.mat-tabpanel { padding-top: var(--mat-space-5); }

/* ---- Context menu (the user menu, row menus). Positioned by matui.js. ---- */
.mat-menu {
  position: fixed;
  z-index: var(--mat-z-menu);
  min-width: 232px;
  max-width: min(92vw, 340px);
  max-height: 80dvh;
  overflow-y: auto;
  padding: var(--mat-space-2);
  background: var(--mat-surface);
  border: 1px solid var(--mat-border-strong);
  border-radius: var(--mat-radius-lg);
  box-shadow: var(--mat-shadow-2);
  animation: mat-menu-in var(--mat-dur) var(--mat-ease);
  transform-origin: bottom left;
}
@keyframes mat-menu-in { from { opacity: 0; transform: translateY(6px) scale(.98); } }
.mat-menu__head { display: flex; align-items: center; gap: var(--mat-space-3); padding: var(--mat-space-3); border-bottom: 1px solid var(--mat-border); margin-bottom: var(--mat-space-2); min-width: 0; }
.mat-menu__head strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mat-menu__head small { display: block; color: var(--mat-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mat-menu__item {
  display: flex; align-items: center; gap: var(--mat-space-3);
  width: 100%; min-height: var(--mat-control-h);
  padding: 0 var(--mat-space-3);
  border: 0; border-radius: var(--mat-radius-sm);
  background: transparent; color: var(--mat-text);
  font-weight: 560; text-align: left; text-decoration: none; cursor: pointer;
}
.mat-menu__item:hover, .mat-menu__item:focus-visible { background: var(--mat-surface-3); text-decoration: none; }
.mat-menu__item .mat-icon { color: var(--mat-text-muted); }
.mat-menu__item--danger, .mat-menu__item--danger .mat-icon { color: var(--mat-danger-text); }
.mat-menu__item--danger:hover { background: var(--mat-danger-bg); }
.mat-menu__sep { height: 1px; background: var(--mat-border); margin: var(--mat-space-2) var(--mat-space-1); }

/* ---- On this page (SHELL-16): a long page with an index beside it, like the one of Bootstrap's documentation ----
   Below 1100 px the index is not drawn beside the content: an icon at the right end of the header bar (mat-topbar__index) opens it in a dialog (full screen on a phone). */
.mat-with-toc { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mat-space-6); align-items: start; }
.mat-with-toc__main { min-width: 0; display: flex; flex-direction: column; gap: var(--mat-space-8); }
.mat-toc-aside { display: none; }
@media (min-width: 1100px) {
  .mat-topbar__actions .mat-topbar__index { display: none; }
  .mat-with-toc { grid-template-columns: minmax(0, 1fr) 15rem; }
  .mat-toc-aside {
    display: block;
    position: sticky;
    top: calc(var(--mat-topbar-h) + var(--mat-space-4));
    align-self: start;
    max-height: calc(100dvh - var(--mat-topbar-h) - var(--mat-space-8));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: var(--mat-space-4);
  }
}
.mat-toc { display: flex; flex-direction: column; gap: var(--mat-space-1); font-size: var(--mat-fs-sm); }
.mat-toc__title { font-size: var(--mat-fs-sm); font-weight: 600; color: var(--mat-text-muted); padding: 0 var(--mat-space-3) var(--mat-space-2); }
.mat-dialog .mat-toc__title { display: none; } /* the dialog has the title already */
.mat-toc__list { list-style: none; display: flex; flex-direction: column; gap: 1px; }
.mat-toc__list .mat-toc__list { margin: 0 0 var(--mat-space-2) var(--mat-space-3); padding-left: var(--mat-space-2); border-left: 1px solid var(--mat-border); }
.mat-toc__link {
  display: flex; align-items: center; gap: var(--mat-space-2);
  min-height: var(--mat-control-h-sm);
  padding: 0 var(--mat-space-3);
  border-radius: var(--mat-radius-sm);
  color: var(--mat-text-muted);
  text-decoration: none;
  transition: background var(--mat-dur-fast) var(--mat-ease), color var(--mat-dur-fast) var(--mat-ease);
}
.mat-toc__link:hover { background: var(--mat-surface-3); color: var(--mat-text); text-decoration: none; }
.mat-toc__link.is-active { background: var(--mat-accent-soft-strong); color: var(--mat-text); font-weight: 600; }
.mat-toc__link--group { margin-top: var(--mat-space-3); font-weight: 600; color: var(--mat-text); }
.mat-toc__link .mat-nav__badge { margin-left: auto; }
/* a section that is a target of the index stays clear of the sticky top bar */
.mat-anchor { scroll-margin-top: calc(var(--mat-topbar-h) + var(--mat-space-4)); }

/* ---- Table variants: compact, with lines between the cells, a header that stays, sortable columns, selectable rows ---- */
.mat-table--compact th, .mat-table--compact td { padding-block: var(--mat-space-2); }
.mat-table--bordered th, .mat-table--bordered td { border-left: 1px solid var(--mat-border); }
.mat-table--bordered th:first-child, .mat-table--bordered td:first-child { border-left: 0; }
.mat-table-wrap--sticky { max-height: 26rem; overflow: auto; }
.mat-table-wrap--sticky .mat-table th { position: sticky; top: 0; z-index: 1; box-shadow: 0 1px 0 var(--mat-border); }
.mat-table__sort { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; }
.mat-table__sort:hover { color: var(--mat-text); text-decoration: none; }
.mat-table__sort .mat-icon { font-size: 1em; opacity: .45; }
th[aria-sort="ascending"] .mat-table__sort, th[aria-sort="descending"] .mat-table__sort { color: var(--mat-accent-text); }
th[aria-sort="ascending"] .mat-icon, th[aria-sort="descending"] .mat-icon { opacity: 1; }
th[aria-sort="descending"] .mat-icon { transform: rotate(180deg); }
.mat-table th.mat-table__select, .mat-table td.mat-table__select { width: 1%; padding-right: 0; }
.mat-table .mat-table__select input { width: 18px; height: 18px; accent-color: var(--mat-accent); cursor: pointer; vertical-align: middle; }
.mat-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mat-space-3); padding: var(--mat-space-2) var(--mat-space-4); min-height: var(--mat-control-h-lg); background: var(--mat-accent-soft-strong); color: var(--mat-accent-text); border-radius: var(--mat-radius); }
.mat-bulk[hidden] { display: none; }
.mat-bulk__count { margin-right: auto; font-weight: 600; }

/* ---- Pills and vertical tabs; tabs that fill the width ---- */
.mat-tabs--pills { gap: var(--mat-space-2); border-bottom: 0; }
.mat-tabs--pills .mat-tab { margin-bottom: 0; border-bottom: 0; border-radius: var(--mat-radius-pill); min-height: var(--mat-control-h-sm); padding-inline: var(--mat-space-4); }
.mat-tabs--pills .mat-tab:hover { background: var(--mat-accent-soft); }
.mat-tabs--pills .mat-tab[aria-selected="true"], .mat-tabs--pills .mat-tab.is-active { background: var(--mat-accent-soft-strong); }
.mat-tabs--vertical { flex-direction: column; gap: 2px; border-bottom: 0; border-right: 1px solid var(--mat-border); padding-right: var(--mat-space-3); overflow: visible; }
.mat-tabs--vertical .mat-tab { margin-bottom: 0; justify-content: flex-start; border-bottom: 0; border-radius: var(--mat-radius-sm); }
.mat-tabs--vertical .mat-tab:hover { background: var(--mat-surface-3); }
.mat-tabs--vertical .mat-tab[aria-selected="true"], .mat-tabs--vertical .mat-tab.is-active { background: var(--mat-accent-soft-strong); }
.mat-tabs--fill .mat-tab { flex: 1 1 0; justify-content: center; }

/* ---- A popover: more than a tooltip, drawn like a menu next to its button (data-menu-toggle) ---- */
.mat-popover { max-width: min(92vw, 20rem); padding: var(--mat-space-4); }
.mat-popover__title { font-weight: 650; margin-bottom: var(--mat-space-1); }
.mat-popover p { color: var(--mat-text-muted); font-size: var(--mat-fs-sm); }

/* ---- Carousel (LIST-13): a strip of slides that scrolls and snaps; the script adds the bar below it ----
   Without the script it is a strip you scroll. --mat-carousel-per-view is how many slides fit (--2 and --3 from 600 and 900 px); the gap is part of the width of a slide. */
.mat-carousel { --mat-carousel-per-view: 1; --mat-carousel-gap: var(--mat-space-3); display: flex; flex-direction: column; gap: var(--mat-space-3); min-width: 0; }
.mat-carousel__track {
  display: flex; gap: var(--mat-carousel-gap);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
}
.mat-carousel.is-ready .mat-carousel__track { scrollbar-width: none; }
.mat-carousel.is-ready .mat-carousel__track::-webkit-scrollbar { display: none; }
.mat-carousel__slide {
  flex: 0 0 calc((100% - (var(--mat-carousel-per-view) - 1) * var(--mat-carousel-gap)) / var(--mat-carousel-per-view));
  min-width: 0; scroll-snap-align: start;
}
.mat-carousel__slide > .mat-card { height: 100%; }
.mat-carousel__slide img { display: block; width: 100%; height: auto; border-radius: var(--mat-radius); }
@media (min-width: 600px) { .mat-carousel--2, .mat-carousel--3 { --mat-carousel-per-view: 2; } }
@media (min-width: 900px) { .mat-carousel--3 { --mat-carousel-per-view: 3; } }
/* the buttons stay at the two ends; with many pages it is the dots that wrap. The dots need no gap: each has its own 36 px. */
.mat-carousel__bar { display: flex; align-items: center; justify-content: center; }
.mat-carousel__bar[hidden] { display: none; }
.mat-carousel__bar > .mat-btn { flex: none; }
.mat-carousel__dots { display: flex; flex: 0 1 auto; flex-wrap: wrap; align-items: center; justify-content: center; min-width: 0; }
/* a dot is 10 px wide in a button of 36 px (MOBILE-04); the current page is longer, so that colour is not the only sign (COLOR-04) */
.mat-carousel__dot { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.mat-carousel__dot::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--mat-border-strong); transition: width var(--mat-dur) var(--mat-ease), background var(--mat-dur-fast) var(--mat-ease); }
.mat-carousel__dot:hover::before { background: var(--mat-text-faint); }
.mat-carousel__dot[aria-current="true"]::before { width: 22px; border-radius: var(--mat-radius-pill); background: var(--mat-accent); }
.mat-carousel__bar .mat-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .mat-carousel__dot::before { transition: none; } }

/* ---- Schedule (LIST-14): events one below another in five views (agenda, day, week, month, year); the script draws it all ----
   The layout follows the width of the schedule itself (is-wide from 640 px, is-narrow below), not of the window. The place of a block in the hours, a bar in the
   columns and the number of columns are set by the script as --mat-sch-* properties (no inline style in the markup). An event is tinted by its tone and always
   has an icon or a text as well (COLOR-04); the tone is a tint with a line all around, never a bar at one side (COLOR-08). */
.mat-schedule {
  --mat-schedule-hour: 3rem;             /* the height of one hour in the time grid */
  --mat-schedule-gutter: 3.5rem;         /* the column of the hours */
  --mat-schedule-max-h: 38rem;           /* what the agenda, the day and the week grow to before they scroll inside */
  position: relative; display: flex; flex-direction: column; gap: var(--mat-space-3); min-width: 0;
}
@media (pointer: coarse) { .mat-schedule { --mat-schedule-hour: 3.5rem; } }
.mat-schedule.is-narrow[data-view="day"] { --mat-schedule-hour: 5.5rem; }

/* the bar: Today and the two arrows, the title (it opens the jump to a month or year) and the views */
.mat-schedule__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mat-space-2) var(--mat-space-3); }
.mat-schedule__nav { display: flex; align-items: center; gap: var(--mat-space-1); }
.mat-schedule__nav .mat-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.mat-schedule__period {
  display: inline-flex; align-items: center; gap: var(--mat-space-1); flex: 1 1 12rem; min-width: 0;
  min-height: var(--mat-control-h); padding: 0 var(--mat-space-2);
  border: 0; border-radius: var(--mat-radius); background: transparent; color: var(--mat-text);
  font-size: var(--mat-fs-md); font-weight: 650; text-align: left; cursor: pointer;
}
.mat-schedule__period:hover { background: var(--mat-surface-3); }
.mat-schedule__period .mat-icon { color: var(--mat-text-muted); }
.mat-schedule__period[aria-expanded="true"] .mat-icon { transform: rotate(180deg); }
.mat-schedule__periodtext { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mat-schedule__busy { display: inline-flex; }
.mat-schedule__busy[hidden] { display: none; }
.mat-schedule__views { flex: none; }
.mat-schedule.is-wide .mat-schedule__views { margin-left: auto; }
.mat-schedule.is-narrow .mat-schedule__period { order: -1; flex-basis: 100%; font-size: var(--mat-fs-lg); }
.mat-schedule.is-narrow .mat-schedule__busy { position: absolute; top: var(--mat-space-3); right: var(--mat-space-3); }
.mat-schedule.is-narrow .mat-schedule__nav { flex: 1 1 auto; }
.mat-schedule.is-narrow .mat-schedule__prev { margin-left: auto; }
.mat-schedule.is-narrow .mat-schedule__views { display: flex; flex: 1 1 100%; }
.mat-schedule.is-narrow .mat-schedule__views > .mat-btn { flex: 1 1 0; min-width: 0; padding-inline: var(--mat-space-1); font-size: var(--mat-fs-sm); }
.mat-schedule.is-narrow .mat-schedule__periodtext { white-space: normal; }

/* the jump: a year with its twelve months, under the title */
.mat-schedule__jump {
  position: absolute; z-index: var(--mat-z-menu); top: calc(var(--mat-control-h) + var(--mat-space-2)); left: clamp(0px, var(--mat-sch-left, 0px), max(0px, calc(100% - 21rem)));
  width: min(100%, 21rem); padding: var(--mat-space-3);
  background: var(--mat-surface); border: 1px solid var(--mat-border-strong); border-radius: var(--mat-radius-lg); box-shadow: var(--mat-shadow-2);
}
.mat-schedule__jump[hidden] { display: none; }
.mat-schedule__jumphead { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--mat-space-2); }
.mat-schedule__jumpyear { font-size: var(--mat-fs-lg); }
.mat-schedule__jumpmonths { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--mat-space-1); }
.mat-schedule__jumpmonths .mat-btn { min-height: var(--mat-control-h); padding-inline: var(--mat-space-1); }
.mat-schedule__jump .mat-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* the body: a surface with a line; agenda, day and week scroll inside it (the headings stay), month and year have their own height */
.mat-schedule__body {
  position: relative; min-width: 0; overflow: hidden;
  background: var(--mat-surface); border: 1px solid var(--mat-border); border-radius: var(--mat-radius-lg);
  touch-action: pan-y pinch-zoom;
}
.mat-schedule__body:focus-visible { border-radius: var(--mat-radius-lg); }
.mat-schedule__body.is-scroll { max-height: var(--mat-schedule-max-h); overflow-y: auto; }
.mat-schedule.is-loading .mat-schedule__body { opacity: .55; }
/* a page slides in from the side it was turned to; the content moves, not the body, so that the page never gets wider */
.mat-schedule__body.is-from-next > * { animation: mat-schedule-next var(--mat-dur) var(--mat-ease); }
.mat-schedule__body.is-from-prev > * { animation: mat-schedule-prev var(--mat-dur) var(--mat-ease); }
@keyframes mat-schedule-next { from { opacity: 0; transform: translateX(1.5rem); } }
@keyframes mat-schedule-prev { from { opacity: 0; transform: translateX(-1.5rem); } }

/* an event: a link or a button with a tint by its tone and a line all around */
.mat-schedule__event {
  --mat-sch-bg: var(--mat-surface-2); --mat-sch-line: var(--mat-border-strong); --mat-sch-ink: var(--mat-text-muted);
  position: relative; display: flex; min-width: 0; margin: 0;
  background: var(--mat-sch-bg); border: 1px solid var(--mat-sch-line); border-radius: var(--mat-radius);
  color: var(--mat-text); font: inherit; text-align: left; text-decoration: none; cursor: pointer;
  transition: border-color var(--mat-dur-fast) var(--mat-ease);
}
.mat-schedule__event:hover { border-color: var(--mat-text-faint); text-decoration: none; }
.mat-schedule__event--accent { --mat-sch-bg: color-mix(in srgb, var(--mat-accent) 16%, var(--mat-surface)); --mat-sch-line: color-mix(in srgb, var(--mat-accent) 45%, transparent); --mat-sch-ink: var(--mat-accent-text); }
.mat-schedule__event--ok { --mat-sch-bg: color-mix(in srgb, var(--mat-success) 14%, var(--mat-surface)); --mat-sch-line: color-mix(in srgb, var(--mat-success) 45%, transparent); --mat-sch-ink: var(--mat-success-text); }
.mat-schedule__event--warn { --mat-sch-bg: color-mix(in srgb, var(--mat-warning) 16%, var(--mat-surface)); --mat-sch-line: color-mix(in srgb, var(--mat-warning) 45%, transparent); --mat-sch-ink: var(--mat-warning-text); }
.mat-schedule__event--error { --mat-sch-bg: color-mix(in srgb, var(--mat-danger) 12%, var(--mat-surface)); --mat-sch-line: color-mix(in srgb, var(--mat-danger) 45%, transparent); --mat-sch-ink: var(--mat-danger-text); }
.mat-schedule__event--info { --mat-sch-bg: color-mix(in srgb, var(--mat-info) 12%, var(--mat-surface)); --mat-sch-line: color-mix(in srgb, var(--mat-info) 45%, transparent); --mat-sch-ink: var(--mat-info-text); }
.mat-schedule__mark { display: inline-flex; margin-right: var(--mat-space-1); color: var(--mat-sch-ink); vertical-align: -.1em; }
.mat-schedule__title { min-width: 0; font-weight: 600; }
.mat-schedule__meta { min-width: 0; color: var(--mat-text-muted); font-size: var(--mat-fs-sm); }
.mat-schedule__time { color: var(--mat-text-muted); font-variant-numeric: tabular-nums; }

/* Agenda: the days one below another, each under a heading that stays at the top while its events pass */
.mat-schedule__day + .mat-schedule__day { border-top: 1px solid var(--mat-border); }
.mat-schedule__dayhead {
  position: sticky; top: 0; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--mat-space-2);
  min-height: 2.5rem; padding: var(--mat-space-1) var(--mat-space-4);
  background: var(--mat-surface-2); border-bottom: 1px solid var(--mat-border);
  font-size: var(--mat-fs-sm); font-weight: 650;
}
.mat-schedule__day.is-today > .mat-schedule__dayhead { background: color-mix(in srgb, var(--mat-accent) 16%, var(--mat-surface-2)); color: var(--mat-accent-text); }
.mat-schedule__kw, .mat-schedule__count { margin-left: auto; color: var(--mat-text-muted); font-weight: 500; }
.mat-schedule__items { list-style: none; display: flex; flex-direction: column; gap: var(--mat-space-2); padding: var(--mat-space-2) var(--mat-space-3) var(--mat-space-3); }
.mat-schedule__none { margin: 0; padding: var(--mat-space-3) var(--mat-space-4); color: var(--mat-text-muted); font-size: var(--mat-fs-sm); }
.mat-schedule__empty { padding: var(--mat-space-8) var(--mat-space-4); }
.mat-schedule__event--row { flex-wrap: wrap; align-items: center; gap: var(--mat-space-2) var(--mat-space-3); width: 100%; min-height: var(--mat-control-h); padding: var(--mat-space-2) var(--mat-space-3); }
.mat-schedule__when { display: flex; flex: 0 0 5rem; flex-direction: column; line-height: 1.25; font-variant-numeric: tabular-nums; }
.mat-schedule__from { font-weight: 650; }
.mat-schedule__to { color: var(--mat-text-muted); font-size: var(--mat-fs-xs); }
.mat-schedule__what { display: flex; flex: 1 1 9rem; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.mat-schedule__event--row .mat-schedule__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mat-schedule__event--row .mat-pill { margin-left: auto; }
/* narrow: the time on the left, the title under it on the right and the status under the title */
.mat-schedule.is-narrow .mat-schedule__event--row { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); align-items: start; gap: var(--mat-space-1) var(--mat-space-3); }
.mat-schedule.is-narrow .mat-schedule__event--row .mat-pill { grid-column: 2; justify-self: start; margin-left: 0; }

/* Day and week: a time grid. The top (the days and the bars of the events that last all day or longer) stays; the blocks stand side by side where they overlap. */
.mat-schedule__top { position: sticky; top: 0; z-index: 4; background: var(--mat-surface); border-bottom: 1px solid var(--mat-border); }
.mat-schedule__head, .mat-schedule__band { display: grid; grid-template-columns: var(--mat-schedule-gutter) repeat(var(--mat-sch-cols, 1), minmax(0, 1fr)); }
.mat-schedule__corner { display: grid; place-items: center; color: var(--mat-text-muted); font-size: var(--mat-fs-xs); font-weight: 600; }
.mat-schedule__colhead { margin: 0; min-height: var(--mat-control-h-lg); border-left: 1px solid var(--mat-border); font-size: var(--mat-fs-sm); }
.mat-schedule__colhead, .mat-schedule__dayopen { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.mat-schedule__dayopen { width: 100%; min-height: inherit; padding: var(--mat-space-1) 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.mat-schedule__dayopen:hover { background: var(--mat-surface-3); }
.mat-schedule__dow { color: var(--mat-text-muted); font-weight: 600; }
.mat-schedule__dnum { display: inline-grid; place-items: center; min-width: 1.75rem; height: 1.75rem; border-radius: var(--mat-radius-pill); font-size: var(--mat-fs-md); font-weight: 650; }
.mat-schedule__colhead.is-today .mat-schedule__dnum, .mat-schedule__cell.is-today .mat-schedule__dnum { background: var(--mat-accent); color: var(--mat-on-accent); }
.mat-schedule__band { gap: 2px; padding: 2px 0 var(--mat-space-1); border-top: 1px solid var(--mat-border); }
.mat-schedule__bandlabel { grid-column: 1; grid-row: 1; align-self: start; overflow: hidden; padding: var(--mat-space-1) var(--mat-space-1) 0 var(--mat-space-2); color: var(--mat-text-muted); font-size: var(--mat-fs-xs); text-overflow: ellipsis; }
.mat-schedule__event--bar { grid-column: var(--mat-sch-c1) / var(--mat-sch-c2); grid-row: var(--mat-sch-lane); align-items: center; gap: var(--mat-space-2); min-height: var(--mat-control-h-sm); padding: 0 var(--mat-space-2); border-radius: var(--mat-radius-sm); font-size: var(--mat-fs-xs); overflow: hidden; white-space: nowrap; }
.mat-schedule__event--bar .mat-schedule__title { overflow: hidden; text-overflow: ellipsis; }
.mat-schedule__event--bar.is-before { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.mat-schedule__event--bar.is-after { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.mat-schedule__tbody { display: grid; grid-template-columns: var(--mat-schedule-gutter) minmax(0, 1fr); }
.mat-schedule__hour { height: var(--mat-schedule-hour); padding: 2px var(--mat-space-2) 0 0; color: var(--mat-text-muted); font-size: var(--mat-fs-xs); font-variant-numeric: tabular-nums; text-align: right; }
.mat-schedule__cols { position: relative; display: grid; grid-template-columns: repeat(var(--mat-sch-cols, 1), minmax(0, 1fr)); }
.mat-schedule__lines { position: absolute; inset: 0; pointer-events: none; }
.mat-schedule__lines > div { height: var(--mat-schedule-hour); border-top: 1px solid var(--mat-border); }
.mat-schedule__col { position: relative; height: calc(var(--mat-sch-hours) * var(--mat-schedule-hour)); border-left: 1px solid var(--mat-border); }
.mat-schedule__col.is-today { background: color-mix(in srgb, var(--mat-accent) 6%, transparent); }
.mat-schedule__event--block {
  position: absolute; z-index: 1; flex-direction: column; overflow: hidden;
  top: calc(var(--mat-sch-top) * var(--mat-schedule-hour) + 1px); height: calc(var(--mat-sch-len) * var(--mat-schedule-hour) - 2px);
  left: calc(100% * var(--mat-sch-lane) / var(--mat-sch-lanes) + 1px); width: calc(100% / var(--mat-sch-lanes) - 2px);
  padding: 2px var(--mat-space-2); border-radius: var(--mat-radius-sm); font-size: var(--mat-fs-xs); line-height: 1.3;
}
.mat-schedule__event--block > * { flex: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--mat-fs-xs); }
/* half an hour is room for one line: the title and, when there is room, the time after it */
.mat-schedule__event--block.is-short { flex-direction: row; align-items: center; gap: var(--mat-space-2); padding-block: 0; }
.mat-schedule__event--block.is-short > .mat-schedule__title { flex: 0 1 auto; min-width: 0; }
.mat-schedule__event--block.is-short > .mat-schedule__time { flex: 0 100 auto; min-width: 0; }
.mat-schedule__event--block.is-short > .mat-schedule__meta { display: none; }
/* the line of the time now, in the column of today */
.mat-schedule__now { position: absolute; z-index: 2; left: 0; right: 0; top: calc(var(--mat-sch-top) * var(--mat-schedule-hour)); height: 2px; margin-top: -1px; background: var(--mat-accent); pointer-events: none; }
.mat-schedule__now::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--mat-accent); }

/* Month: a grid of weeks. Wide: the events are in the cells. Narrow: a day shows dots, and the chosen day is listed under the grid. */
.mat-schedule__mgrid { display: flex; flex-direction: column; }
.mat-schedule__row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.mat-schedule__mgrid.is-numbered .mat-schedule__row { grid-template-columns: 2.5rem repeat(7, minmax(0, 1fr)); }
.mat-schedule__row + .mat-schedule__row { border-top: 1px solid var(--mat-border); }
.mat-schedule__row--head { background: var(--mat-surface-2); }
.mat-schedule__wd, .mat-schedule__wk { display: grid; place-items: center; padding: var(--mat-space-2) var(--mat-space-1); color: var(--mat-text-muted); font-size: var(--mat-fs-xs); font-weight: 600; }
.mat-schedule__row:not(.mat-schedule__row--head) .mat-schedule__wk { background: var(--mat-surface-2); }
.mat-schedule__cell { min-width: 0; border-left: 1px solid var(--mat-border); }
.mat-schedule__row > .mat-schedule__cell:first-child { border-left: 0; }
.mat-schedule__cell.is-outside { background: var(--mat-surface-2); }
.mat-schedule__cell.is-outside .mat-schedule__dnum, .mat-schedule__cell.is-outside .mat-schedule__daynum { color: var(--mat-text-muted); font-weight: 500; }
.mat-schedule__cell.is-selected { background: var(--mat-accent-soft); }
.mat-schedule__cell.is-off { opacity: .45; }
.mat-schedule.is-wide .mat-schedule__cell { display: flex; flex-direction: column; gap: 2px; min-height: 6.5rem; padding: var(--mat-space-1); }
.mat-schedule__daynum { display: grid; place-items: center; align-self: flex-start; min-width: 1.75rem; height: 1.75rem; padding: 0 var(--mat-space-1); border: 0; border-radius: var(--mat-radius-pill); background: transparent; color: var(--mat-text); font-size: var(--mat-fs-sm); font-weight: 600; cursor: pointer; }
.mat-schedule__daynum:hover { background: var(--mat-surface-3); }
.mat-schedule__cell.is-today .mat-schedule__daynum { background: var(--mat-accent); color: var(--mat-on-accent); }
.mat-schedule__chips { list-style: none; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mat-schedule__chips > li { min-width: 0; }
.mat-schedule__gap { min-height: 1.5rem; }
.mat-schedule__event--chip { align-items: center; gap: 4px; width: 100%; min-height: 1.5rem; padding: 0 var(--mat-space-1); border-radius: var(--mat-radius-sm); font-size: var(--mat-fs-xs); overflow: hidden; white-space: nowrap; }
.mat-schedule__event--chip .mat-schedule__title { overflow: hidden; text-overflow: ellipsis; font-size: var(--mat-fs-xs); }
.mat-schedule__event--chip .mat-schedule__time { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); flex: none; font-size: var(--mat-fs-xs); }
/* the time is drawn before the title only where a cell is wide enough for both (a week row of 780 px is cells of about 105 px); a screen reader has it always */
.mat-schedule__row { container-type: inline-size; }
@container (min-width: 780px) { .mat-schedule__event--chip .mat-schedule__time { position: static; width: auto; height: auto; overflow: visible; clip: auto; } }
/* a bar over the cells it covers: as wide as they are, with the paddings and the lines between them (2 x 4 px and 1 px), and over the cells that come after it */
.mat-schedule__event--chip[data-sch-span] { --mat-sch-more: 0px; z-index: 1; width: calc(var(--mat-sch-span) * 100% + (var(--mat-sch-span) - 1) * (var(--mat-space-1) * 2 + 1px) + var(--mat-sch-more)); }
.mat-schedule__event--chip.is-before { --mat-sch-more: var(--mat-space-1); margin-left: calc(var(--mat-space-1) * -1); border-top-left-radius: 0; border-bottom-left-radius: 0; }
.mat-schedule__event--chip.is-after { --mat-sch-more: var(--mat-space-1); border-top-right-radius: 0; border-bottom-right-radius: 0; }
.mat-schedule__event--chip.is-before.is-after { --mat-sch-more: calc(var(--mat-space-1) * 2); }
.mat-schedule__more { min-height: 1.5rem; padding: 0 var(--mat-space-1); border: 0; border-radius: var(--mat-radius-sm); background: transparent; color: var(--mat-accent-text); font-size: var(--mat-fs-xs); font-weight: 650; cursor: pointer; }
.mat-schedule__more:hover { background: var(--mat-surface-3); }
.mat-schedule__daybtn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 100%; min-height: 2.75rem; padding: var(--mat-space-1) 0; border: 0; background: transparent; color: var(--mat-text); cursor: pointer; }
.mat-schedule__cell.is-selected .mat-schedule__dnum { font-weight: 800; }
.mat-schedule__dots { display: flex; justify-content: center; gap: 3px; height: 6px; }
.mat-schedule__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mat-text-faint); }
.mat-schedule__dot--accent { background: var(--mat-accent); }
.mat-schedule__dot--ok { background: var(--mat-success); }
.mat-schedule__dot--warn { background: var(--mat-warning); }
.mat-schedule__dot--error { background: var(--mat-danger); }
.mat-schedule__dot--info { background: var(--mat-info); }
.mat-schedule__daylist { border-top: 1px solid var(--mat-border); }
.mat-schedule__daylist .mat-schedule__dayhead { border-top: 0; }

/* Year: twelve small months; a day is tinted by how many events it has, a month opens the month view */
.mat-schedule__year { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: var(--mat-space-3); padding: var(--mat-space-3); }
.mat-schedule__month { min-width: 0; padding: var(--mat-space-2); border: 1px solid var(--mat-border); border-radius: var(--mat-radius-lg); background: var(--mat-surface); cursor: pointer; }
.mat-schedule__month:hover { border-color: var(--mat-text-faint); }
.mat-schedule__month.is-off { opacity: .45; cursor: not-allowed; }
.mat-schedule__monthhead { margin: 0; font-size: var(--mat-fs-md); }
.mat-schedule__monthname { display: block; width: 100%; min-height: var(--mat-control-h); padding: 0 var(--mat-space-1); border: 0; border-radius: var(--mat-radius-sm); background: transparent; color: var(--mat-text); font-weight: 650; text-align: left; cursor: pointer; }
.mat-schedule__mini { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; font-size: var(--mat-fs-xs); font-variant-numeric: tabular-nums; text-align: center; }
.mat-schedule__mwd { color: var(--mat-text-muted); font-weight: 600; }
.mat-schedule__d { display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--mat-radius-xs); }
.mat-schedule__d.is-l1 { background: var(--mat-accent-soft); }
.mat-schedule__d.is-l2 { background: var(--mat-accent-soft-strong); font-weight: 650; }
.mat-schedule__d.is-l3 { background: var(--mat-accent); color: var(--mat-on-accent); font-weight: 700; }
.mat-schedule__d.is-today { box-shadow: inset 0 0 0 2px var(--mat-text); font-weight: 700; }
.mat-schedule__hint { margin: 0; padding: var(--mat-space-2) var(--mat-space-4) var(--mat-space-3); color: var(--mat-text-muted); font-size: var(--mat-fs-sm); }
@media (prefers-reduced-motion: reduce) { .mat-schedule__body.is-from-next > *, .mat-schedule__body.is-from-prev > * { animation: none; } .mat-schedule__event { transition: none; } }

/* ==========================================================================
   MatUi · dialogs
   Every question, message and input is a dialog (never window.confirm / alert / prompt), and the search, filter and
   sort of a list are dialogs too (DIALOG-01 .. DIALOG-05).
   On a phone EVERY dialog is full screen, with the close button (X) at the top right (DIALOG-03).
   Built on the native <dialog>, opened with showModal() by matui.js.
   ========================================================================== */

dialog.mat-dialog {
  padding: 0;
  width: min(560px, calc(100vw - 2 * var(--mat-space-4)));
  max-width: 100vw;
  max-height: min(88dvh, 780px);
  color: var(--mat-text);
  background: var(--mat-surface);
  border: 1px solid var(--mat-border-strong);
  border-radius: var(--mat-radius-lg);
  box-shadow: var(--mat-shadow-3);
  overflow: hidden;
}
dialog.mat-dialog[open] { display: flex; flex-direction: column; animation: mat-dialog-in var(--mat-dur-slow) var(--mat-ease); }
dialog.mat-dialog::backdrop { background: var(--mat-overlay); }
@keyframes mat-dialog-in { from { opacity: 0; transform: translateY(6px); } }

dialog.mat-dialog--sm { width: min(420px, calc(100vw - 2 * var(--mat-space-4))); }
dialog.mat-dialog--lg { width: min(760px, calc(100vw - 2 * var(--mat-space-4))); }
dialog.mat-dialog--xl { width: min(980px, calc(100vw - 2 * var(--mat-space-4))); }

/* The dialog may be a form (search, filter, sort): then the form is the flex column. */
.mat-dialog__form { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }

.mat-dialog__head {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--mat-space-3);
  padding: var(--mat-space-4) var(--mat-space-4) var(--mat-space-4) var(--mat-space-6);
  border-bottom: 1px solid var(--mat-border);
}
.mat-dialog__head > .mat-icon { font-size: 1.25rem; color: var(--mat-accent-text); }
.mat-dialog__title { flex: 1 1 auto; min-width: 0; font-size: var(--mat-fs-lg); font-weight: 650; margin: 0; }
/* The X: always the last item of the head, so it sits at the top right. */
.mat-dialog__close { flex: none; margin-left: auto; }

.mat-dialog__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--mat-space-6); overscroll-behavior: contain; }
.mat-dialog__body > p { color: var(--mat-text); }

.mat-dialog__foot { flex: none; padding: var(--mat-space-4) var(--mat-space-6); border-top: 1px solid var(--mat-border); background: var(--mat-surface-2); }
.mat-dialog__foot .mat-btn-row { border-top: 0; padding-top: 0; margin-top: 0; }

/* A radio list for the sort dialog: one row per field, direction next to it. */
.mat-options { display: flex; flex-direction: column; gap: var(--mat-space-1); }
.mat-option { display: flex; align-items: center; gap: var(--mat-space-3); min-height: var(--mat-control-h); padding: 0 var(--mat-space-3); border-radius: var(--mat-radius-sm); cursor: pointer; }
.mat-option:hover { background: var(--mat-surface-3); }
.mat-option input { accent-color: var(--mat-accent); width: 18px; height: 18px; }
.mat-option:has(input:checked) { background: var(--mat-accent-soft-strong); color: var(--mat-accent-text); font-weight: 600; }

/* A panel from the side (the off-canvas of other kits): the same dialog, fixed to the right or the left edge. On a phone it is full screen like every dialog. */
dialog.mat-dialog--end, dialog.mat-dialog--start {
  width: min(440px, 100vw);
  height: 100dvh; max-height: 100dvh;
  margin: 0;
  border-radius: 0;
  border-width: 0 0 0 1px;
}
dialog.mat-dialog--end { margin-left: auto; border-radius: var(--mat-radius-lg) 0 0 var(--mat-radius-lg); }
dialog.mat-dialog--start { margin-right: auto; border-width: 0 1px 0 0; border-radius: 0 var(--mat-radius-lg) var(--mat-radius-lg) 0; }
/* The [open] rule of the centred dialog sets the animation, so the panel's own animation is set on [open] as well (later, same specificity). */
dialog.mat-dialog--end[open] { animation-name: mat-panel-in-end; }
dialog.mat-dialog--start[open] { animation-name: mat-panel-in-start; }
@keyframes mat-panel-in-end { from { transform: translateX(24px); opacity: 0; } }
@keyframes mat-panel-in-start { from { transform: translateX(-24px); opacity: 0; } }

/* ---- Phone: every dialog is a full-screen sheet with the X at the top right ---- */
@media (max-width: 640px) {
  dialog.mat-dialog, dialog.mat-dialog--sm, dialog.mat-dialog--lg, dialog.mat-dialog--xl {
    width: 100%; height: 100%;
    max-width: none; max-height: none;
    margin: 0; inset: 0;
    border: 0; border-radius: 0;
  }
  dialog.mat-dialog[open] { animation: mat-sheet-in var(--mat-dur-slow) var(--mat-ease); }
  .mat-dialog__head {
    padding-top: calc(var(--mat-space-3) + var(--mat-safe-top));
    padding-left: calc(var(--mat-space-4) + var(--mat-safe-left));
    padding-right: calc(var(--mat-space-3) + var(--mat-safe-right));
  }
  .mat-dialog__body { padding: var(--mat-space-5) calc(var(--mat-space-4) + var(--mat-safe-left)); }
  .mat-dialog__foot { padding-bottom: calc(var(--mat-space-4) + var(--mat-safe-bottom)); padding-inline: calc(var(--mat-space-4) + var(--mat-safe-left)); }
  .mat-dialog__foot .mat-btn-row { flex-direction: row; }
}
@keyframes mat-sheet-in { from { transform: translateY(24px); opacity: 0; } }

/* ==========================================================================
   MatUi · layout
   Containers, the grid of twelve columns and the utility classes. They come after every component so that a utility wins over the value of a
   component's own simple selector; none of them uses !important, so a component's more specific rule is not beaten (use a utility on an element of
   your own page, not to repair a component).
   Breakpoints, mobile first (min-width): sm 600px, md 900px, lg 1200px. A media query cannot read a custom property, so the numbers are written out.
   A class with a breakpoint (mat-col-md-6, mat-d-md-none, mat-flex-md-row) applies from that width up.
   ========================================================================== */

/* ---- Containers: for a page without the shell; inside the shell the page is .mat-page ---- */
.mat-container { width: 100%; max-width: var(--mat-content-max); margin-inline: auto; padding-inline: var(--mat-content-pad); }
.mat-container--narrow { max-width: 780px; }
.mat-container--wide { max-width: none; }

/* ---- Grid: twelve columns. A child spans twelve until a class says otherwise. ---- */
.mat-cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--mat-gap); }
.mat-cols > * { grid-column-end: span 12; min-width: 0; }
.mat-col-1 { grid-column-end: span 1; }
.mat-col-2 { grid-column-end: span 2; }
.mat-col-3 { grid-column-end: span 3; }
.mat-col-4 { grid-column-end: span 4; }
.mat-col-5 { grid-column-end: span 5; }
.mat-col-6 { grid-column-end: span 6; }
.mat-col-7 { grid-column-end: span 7; }
.mat-col-8 { grid-column-end: span 8; }
.mat-col-9 { grid-column-end: span 9; }
.mat-col-10 { grid-column-end: span 10; }
.mat-col-11 { grid-column-end: span 11; }
.mat-col-12 { grid-column-end: span 12; }
.mat-col-start-1 { grid-column-start: 1; }
.mat-col-start-2 { grid-column-start: 2; }
.mat-col-start-3 { grid-column-start: 3; }
.mat-col-start-4 { grid-column-start: 4; }
.mat-col-start-5 { grid-column-start: 5; }
.mat-col-start-6 { grid-column-start: 6; }
.mat-col-start-7 { grid-column-start: 7; }
.mat-col-start-8 { grid-column-start: 8; }
.mat-col-start-9 { grid-column-start: 9; }
.mat-col-start-10 { grid-column-start: 10; }
.mat-col-start-11 { grid-column-start: 11; }
.mat-col-start-12 { grid-column-start: 12; }
@media (min-width: 600px) {
  .mat-col-sm-1 { grid-column-end: span 1; }
  .mat-col-sm-2 { grid-column-end: span 2; }
  .mat-col-sm-3 { grid-column-end: span 3; }
  .mat-col-sm-4 { grid-column-end: span 4; }
  .mat-col-sm-5 { grid-column-end: span 5; }
  .mat-col-sm-6 { grid-column-end: span 6; }
  .mat-col-sm-7 { grid-column-end: span 7; }
  .mat-col-sm-8 { grid-column-end: span 8; }
  .mat-col-sm-9 { grid-column-end: span 9; }
  .mat-col-sm-10 { grid-column-end: span 10; }
  .mat-col-sm-11 { grid-column-end: span 11; }
  .mat-col-sm-12 { grid-column-end: span 12; }
  .mat-col-start-sm-1 { grid-column-start: 1; }
  .mat-col-start-sm-2 { grid-column-start: 2; }
  .mat-col-start-sm-3 { grid-column-start: 3; }
  .mat-col-start-sm-4 { grid-column-start: 4; }
  .mat-col-start-sm-5 { grid-column-start: 5; }
  .mat-col-start-sm-6 { grid-column-start: 6; }
  .mat-col-start-sm-7 { grid-column-start: 7; }
  .mat-col-start-sm-8 { grid-column-start: 8; }
  .mat-col-start-sm-9 { grid-column-start: 9; }
  .mat-col-start-sm-10 { grid-column-start: 10; }
  .mat-col-start-sm-11 { grid-column-start: 11; }
  .mat-col-start-sm-12 { grid-column-start: 12; }
}
@media (min-width: 900px) {
  .mat-col-md-1 { grid-column-end: span 1; }
  .mat-col-md-2 { grid-column-end: span 2; }
  .mat-col-md-3 { grid-column-end: span 3; }
  .mat-col-md-4 { grid-column-end: span 4; }
  .mat-col-md-5 { grid-column-end: span 5; }
  .mat-col-md-6 { grid-column-end: span 6; }
  .mat-col-md-7 { grid-column-end: span 7; }
  .mat-col-md-8 { grid-column-end: span 8; }
  .mat-col-md-9 { grid-column-end: span 9; }
  .mat-col-md-10 { grid-column-end: span 10; }
  .mat-col-md-11 { grid-column-end: span 11; }
  .mat-col-md-12 { grid-column-end: span 12; }
  .mat-col-start-md-1 { grid-column-start: 1; }
  .mat-col-start-md-2 { grid-column-start: 2; }
  .mat-col-start-md-3 { grid-column-start: 3; }
  .mat-col-start-md-4 { grid-column-start: 4; }
  .mat-col-start-md-5 { grid-column-start: 5; }
  .mat-col-start-md-6 { grid-column-start: 6; }
  .mat-col-start-md-7 { grid-column-start: 7; }
  .mat-col-start-md-8 { grid-column-start: 8; }
  .mat-col-start-md-9 { grid-column-start: 9; }
  .mat-col-start-md-10 { grid-column-start: 10; }
  .mat-col-start-md-11 { grid-column-start: 11; }
  .mat-col-start-md-12 { grid-column-start: 12; }
}
@media (min-width: 1200px) {
  .mat-col-lg-1 { grid-column-end: span 1; }
  .mat-col-lg-2 { grid-column-end: span 2; }
  .mat-col-lg-3 { grid-column-end: span 3; }
  .mat-col-lg-4 { grid-column-end: span 4; }
  .mat-col-lg-5 { grid-column-end: span 5; }
  .mat-col-lg-6 { grid-column-end: span 6; }
  .mat-col-lg-7 { grid-column-end: span 7; }
  .mat-col-lg-8 { grid-column-end: span 8; }
  .mat-col-lg-9 { grid-column-end: span 9; }
  .mat-col-lg-10 { grid-column-end: span 10; }
  .mat-col-lg-11 { grid-column-end: span 11; }
  .mat-col-lg-12 { grid-column-end: span 12; }
  .mat-col-start-lg-1 { grid-column-start: 1; }
  .mat-col-start-lg-2 { grid-column-start: 2; }
  .mat-col-start-lg-3 { grid-column-start: 3; }
  .mat-col-start-lg-4 { grid-column-start: 4; }
  .mat-col-start-lg-5 { grid-column-start: 5; }
  .mat-col-start-lg-6 { grid-column-start: 6; }
  .mat-col-start-lg-7 { grid-column-start: 7; }
  .mat-col-start-lg-8 { grid-column-start: 8; }
  .mat-col-start-lg-9 { grid-column-start: 9; }
  .mat-col-start-lg-10 { grid-column-start: 10; }
  .mat-col-start-lg-11 { grid-column-start: 11; }
  .mat-col-start-lg-12 { grid-column-start: 12; }
}

/* ---- Spacing: margin, padding and gap on the 4 px scale (SPACE-01) ---- */
.mat-m-0 { margin: 0; }
.mat-m-1 { margin: var(--mat-space-1); }
.mat-m-2 { margin: var(--mat-space-2); }
.mat-m-3 { margin: var(--mat-space-3); }
.mat-m-4 { margin: var(--mat-space-4); }
.mat-m-5 { margin: var(--mat-space-5); }
.mat-m-6 { margin: var(--mat-space-6); }
.mat-m-8 { margin: var(--mat-space-8); }
.mat-m-10 { margin: var(--mat-space-10); }
.mat-m-12 { margin: var(--mat-space-12); }
.mat-m-auto { margin: auto; }
.mat-mt-0 { margin-top: 0; }
.mat-mt-1 { margin-top: var(--mat-space-1); }
.mat-mt-2 { margin-top: var(--mat-space-2); }
.mat-mt-3 { margin-top: var(--mat-space-3); }
.mat-mt-4 { margin-top: var(--mat-space-4); }
.mat-mt-5 { margin-top: var(--mat-space-5); }
.mat-mt-6 { margin-top: var(--mat-space-6); }
.mat-mt-8 { margin-top: var(--mat-space-8); }
.mat-mt-10 { margin-top: var(--mat-space-10); }
.mat-mt-12 { margin-top: var(--mat-space-12); }
.mat-mt-auto { margin-top: auto; }
.mat-mb-0 { margin-bottom: 0; }
.mat-mb-1 { margin-bottom: var(--mat-space-1); }
.mat-mb-2 { margin-bottom: var(--mat-space-2); }
.mat-mb-3 { margin-bottom: var(--mat-space-3); }
.mat-mb-4 { margin-bottom: var(--mat-space-4); }
.mat-mb-5 { margin-bottom: var(--mat-space-5); }
.mat-mb-6 { margin-bottom: var(--mat-space-6); }
.mat-mb-8 { margin-bottom: var(--mat-space-8); }
.mat-mb-10 { margin-bottom: var(--mat-space-10); }
.mat-mb-12 { margin-bottom: var(--mat-space-12); }
.mat-mb-auto { margin-bottom: auto; }
.mat-ms-0 { margin-inline-start: 0; }
.mat-ms-1 { margin-inline-start: var(--mat-space-1); }
.mat-ms-2 { margin-inline-start: var(--mat-space-2); }
.mat-ms-3 { margin-inline-start: var(--mat-space-3); }
.mat-ms-4 { margin-inline-start: var(--mat-space-4); }
.mat-ms-5 { margin-inline-start: var(--mat-space-5); }
.mat-ms-6 { margin-inline-start: var(--mat-space-6); }
.mat-ms-8 { margin-inline-start: var(--mat-space-8); }
.mat-ms-10 { margin-inline-start: var(--mat-space-10); }
.mat-ms-12 { margin-inline-start: var(--mat-space-12); }
.mat-ms-auto { margin-inline-start: auto; }
.mat-me-0 { margin-inline-end: 0; }
.mat-me-1 { margin-inline-end: var(--mat-space-1); }
.mat-me-2 { margin-inline-end: var(--mat-space-2); }
.mat-me-3 { margin-inline-end: var(--mat-space-3); }
.mat-me-4 { margin-inline-end: var(--mat-space-4); }
.mat-me-5 { margin-inline-end: var(--mat-space-5); }
.mat-me-6 { margin-inline-end: var(--mat-space-6); }
.mat-me-8 { margin-inline-end: var(--mat-space-8); }
.mat-me-10 { margin-inline-end: var(--mat-space-10); }
.mat-me-12 { margin-inline-end: var(--mat-space-12); }
.mat-me-auto { margin-inline-end: auto; }
.mat-mx-0 { margin-inline: 0; }
.mat-mx-1 { margin-inline: var(--mat-space-1); }
.mat-mx-2 { margin-inline: var(--mat-space-2); }
.mat-mx-3 { margin-inline: var(--mat-space-3); }
.mat-mx-4 { margin-inline: var(--mat-space-4); }
.mat-mx-5 { margin-inline: var(--mat-space-5); }
.mat-mx-6 { margin-inline: var(--mat-space-6); }
.mat-mx-8 { margin-inline: var(--mat-space-8); }
.mat-mx-10 { margin-inline: var(--mat-space-10); }
.mat-mx-12 { margin-inline: var(--mat-space-12); }
.mat-mx-auto { margin-inline: auto; }
.mat-my-0 { margin-block: 0; }
.mat-my-1 { margin-block: var(--mat-space-1); }
.mat-my-2 { margin-block: var(--mat-space-2); }
.mat-my-3 { margin-block: var(--mat-space-3); }
.mat-my-4 { margin-block: var(--mat-space-4); }
.mat-my-5 { margin-block: var(--mat-space-5); }
.mat-my-6 { margin-block: var(--mat-space-6); }
.mat-my-8 { margin-block: var(--mat-space-8); }
.mat-my-10 { margin-block: var(--mat-space-10); }
.mat-my-12 { margin-block: var(--mat-space-12); }
.mat-my-auto { margin-block: auto; }
.mat-p-0 { padding: 0; }
.mat-p-1 { padding: var(--mat-space-1); }
.mat-p-2 { padding: var(--mat-space-2); }
.mat-p-3 { padding: var(--mat-space-3); }
.mat-p-4 { padding: var(--mat-space-4); }
.mat-p-5 { padding: var(--mat-space-5); }
.mat-p-6 { padding: var(--mat-space-6); }
.mat-p-8 { padding: var(--mat-space-8); }
.mat-p-10 { padding: var(--mat-space-10); }
.mat-p-12 { padding: var(--mat-space-12); }
.mat-pt-0 { padding-top: 0; }
.mat-pt-1 { padding-top: var(--mat-space-1); }
.mat-pt-2 { padding-top: var(--mat-space-2); }
.mat-pt-3 { padding-top: var(--mat-space-3); }
.mat-pt-4 { padding-top: var(--mat-space-4); }
.mat-pt-5 { padding-top: var(--mat-space-5); }
.mat-pt-6 { padding-top: var(--mat-space-6); }
.mat-pt-8 { padding-top: var(--mat-space-8); }
.mat-pt-10 { padding-top: var(--mat-space-10); }
.mat-pt-12 { padding-top: var(--mat-space-12); }
.mat-pb-0 { padding-bottom: 0; }
.mat-pb-1 { padding-bottom: var(--mat-space-1); }
.mat-pb-2 { padding-bottom: var(--mat-space-2); }
.mat-pb-3 { padding-bottom: var(--mat-space-3); }
.mat-pb-4 { padding-bottom: var(--mat-space-4); }
.mat-pb-5 { padding-bottom: var(--mat-space-5); }
.mat-pb-6 { padding-bottom: var(--mat-space-6); }
.mat-pb-8 { padding-bottom: var(--mat-space-8); }
.mat-pb-10 { padding-bottom: var(--mat-space-10); }
.mat-pb-12 { padding-bottom: var(--mat-space-12); }
.mat-ps-0 { padding-inline-start: 0; }
.mat-ps-1 { padding-inline-start: var(--mat-space-1); }
.mat-ps-2 { padding-inline-start: var(--mat-space-2); }
.mat-ps-3 { padding-inline-start: var(--mat-space-3); }
.mat-ps-4 { padding-inline-start: var(--mat-space-4); }
.mat-ps-5 { padding-inline-start: var(--mat-space-5); }
.mat-ps-6 { padding-inline-start: var(--mat-space-6); }
.mat-ps-8 { padding-inline-start: var(--mat-space-8); }
.mat-ps-10 { padding-inline-start: var(--mat-space-10); }
.mat-ps-12 { padding-inline-start: var(--mat-space-12); }
.mat-pe-0 { padding-inline-end: 0; }
.mat-pe-1 { padding-inline-end: var(--mat-space-1); }
.mat-pe-2 { padding-inline-end: var(--mat-space-2); }
.mat-pe-3 { padding-inline-end: var(--mat-space-3); }
.mat-pe-4 { padding-inline-end: var(--mat-space-4); }
.mat-pe-5 { padding-inline-end: var(--mat-space-5); }
.mat-pe-6 { padding-inline-end: var(--mat-space-6); }
.mat-pe-8 { padding-inline-end: var(--mat-space-8); }
.mat-pe-10 { padding-inline-end: var(--mat-space-10); }
.mat-pe-12 { padding-inline-end: var(--mat-space-12); }
.mat-px-0 { padding-inline: 0; }
.mat-px-1 { padding-inline: var(--mat-space-1); }
.mat-px-2 { padding-inline: var(--mat-space-2); }
.mat-px-3 { padding-inline: var(--mat-space-3); }
.mat-px-4 { padding-inline: var(--mat-space-4); }
.mat-px-5 { padding-inline: var(--mat-space-5); }
.mat-px-6 { padding-inline: var(--mat-space-6); }
.mat-px-8 { padding-inline: var(--mat-space-8); }
.mat-px-10 { padding-inline: var(--mat-space-10); }
.mat-px-12 { padding-inline: var(--mat-space-12); }
.mat-py-0 { padding-block: 0; }
.mat-py-1 { padding-block: var(--mat-space-1); }
.mat-py-2 { padding-block: var(--mat-space-2); }
.mat-py-3 { padding-block: var(--mat-space-3); }
.mat-py-4 { padding-block: var(--mat-space-4); }
.mat-py-5 { padding-block: var(--mat-space-5); }
.mat-py-6 { padding-block: var(--mat-space-6); }
.mat-py-8 { padding-block: var(--mat-space-8); }
.mat-py-10 { padding-block: var(--mat-space-10); }
.mat-py-12 { padding-block: var(--mat-space-12); }
.mat-gap-0 { gap: 0; }
.mat-gap-1 { gap: var(--mat-space-1); }
.mat-gap-2 { gap: var(--mat-space-2); }
.mat-gap-3 { gap: var(--mat-space-3); }
.mat-gap-4 { gap: var(--mat-space-4); }
.mat-gap-5 { gap: var(--mat-space-5); }
.mat-gap-6 { gap: var(--mat-space-6); }
.mat-gap-8 { gap: var(--mat-space-8); }
.mat-gap-10 { gap: var(--mat-space-10); }
.mat-gap-12 { gap: var(--mat-space-12); }
.mat-gap-x-0 { column-gap: 0; }
.mat-gap-x-1 { column-gap: var(--mat-space-1); }
.mat-gap-x-2 { column-gap: var(--mat-space-2); }
.mat-gap-x-3 { column-gap: var(--mat-space-3); }
.mat-gap-x-4 { column-gap: var(--mat-space-4); }
.mat-gap-x-5 { column-gap: var(--mat-space-5); }
.mat-gap-x-6 { column-gap: var(--mat-space-6); }
.mat-gap-x-8 { column-gap: var(--mat-space-8); }
.mat-gap-x-10 { column-gap: var(--mat-space-10); }
.mat-gap-x-12 { column-gap: var(--mat-space-12); }
.mat-gap-y-0 { row-gap: 0; }
.mat-gap-y-1 { row-gap: var(--mat-space-1); }
.mat-gap-y-2 { row-gap: var(--mat-space-2); }
.mat-gap-y-3 { row-gap: var(--mat-space-3); }
.mat-gap-y-4 { row-gap: var(--mat-space-4); }
.mat-gap-y-5 { row-gap: var(--mat-space-5); }
.mat-gap-y-6 { row-gap: var(--mat-space-6); }
.mat-gap-y-8 { row-gap: var(--mat-space-8); }
.mat-gap-y-10 { row-gap: var(--mat-space-10); }
.mat-gap-y-12 { row-gap: var(--mat-space-12); }

/* ---- Display and visibility ---- */
.mat-d-none { display: none; }
.mat-d-block { display: block; }
.mat-d-inline { display: inline; }
.mat-d-inline-block { display: inline-block; }
.mat-d-flex { display: flex; }
.mat-d-inline-flex { display: inline-flex; }
.mat-d-grid { display: grid; }
@media (min-width: 600px) {
  .mat-d-sm-none { display: none; }
  .mat-d-sm-block { display: block; }
  .mat-d-sm-inline { display: inline; }
  .mat-d-sm-inline-block { display: inline-block; }
  .mat-d-sm-flex { display: flex; }
  .mat-d-sm-inline-flex { display: inline-flex; }
  .mat-d-sm-grid { display: grid; }
}
@media (min-width: 900px) {
  .mat-d-md-none { display: none; }
  .mat-d-md-block { display: block; }
  .mat-d-md-inline { display: inline; }
  .mat-d-md-inline-block { display: inline-block; }
  .mat-d-md-flex { display: flex; }
  .mat-d-md-inline-flex { display: inline-flex; }
  .mat-d-md-grid { display: grid; }
}
@media (min-width: 1200px) {
  .mat-d-lg-none { display: none; }
  .mat-d-lg-block { display: block; }
  .mat-d-lg-inline { display: inline; }
  .mat-d-lg-inline-block { display: inline-block; }
  .mat-d-lg-flex { display: flex; }
  .mat-d-lg-inline-flex { display: inline-flex; }
  .mat-d-lg-grid { display: grid; }
}
.mat-invisible { visibility: hidden; }
.mat-visible { visibility: visible; }

/* ---- Flex: direction, wrap, growing, alignment ---- */
.mat-flex-row { flex-direction: row; }
.mat-flex-column { flex-direction: column; }
.mat-flex-wrap { flex-wrap: wrap; }
.mat-flex-nowrap { flex-wrap: nowrap; }
.mat-flex-grow { flex-grow: 1; }
.mat-flex-shrink-0 { flex-shrink: 0; }
.mat-flex-fill { flex: 1 1 auto; }
.mat-justify-start { justify-content: flex-start; }
.mat-justify-center { justify-content: center; }
.mat-justify-end { justify-content: flex-end; }
.mat-justify-between { justify-content: space-between; }
.mat-justify-around { justify-content: space-around; }
.mat-justify-evenly { justify-content: space-evenly; }
.mat-items-start { align-items: flex-start; }
.mat-items-center { align-items: center; }
.mat-items-end { align-items: flex-end; }
.mat-items-baseline { align-items: baseline; }
.mat-items-stretch { align-items: stretch; }
.mat-self-start { align-self: flex-start; }
.mat-self-center { align-self: center; }
.mat-self-end { align-self: flex-end; }
.mat-self-stretch { align-self: stretch; }
.mat-order-first { order: -1; }
.mat-order-last { order: 1; }
@media (min-width: 600px) {
  .mat-flex-sm-row { flex-direction: row; }
  .mat-flex-sm-column { flex-direction: column; }
}
@media (min-width: 900px) {
  .mat-flex-md-row { flex-direction: row; }
  .mat-flex-md-column { flex-direction: column; }
}
@media (min-width: 1200px) {
  .mat-flex-lg-row { flex-direction: row; }
  .mat-flex-lg-column { flex-direction: column; }
}

/* ---- Text: alignment, wrapping, size, weight, style ---- */
.mat-text-start { text-align: start; }
.mat-text-center { text-align: center; }
.mat-text-end { text-align: end; }
.mat-text-nowrap { white-space: nowrap; }
.mat-text-wrap { white-space: normal; }
.mat-text-break { overflow-wrap: anywhere; }
.mat-text-truncate { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mat-text-upper { text-transform: uppercase; }
.mat-text-lower { text-transform: lowercase; }
.mat-text-capitalize { text-transform: capitalize; }
.mat-fs-xs { font-size: var(--mat-fs-xs); }
.mat-fs-sm { font-size: var(--mat-fs-sm); }
.mat-fs-md { font-size: var(--mat-fs-md); }
.mat-fs-lg { font-size: var(--mat-fs-lg); }
.mat-fs-xl { font-size: var(--mat-fs-xl); }
.mat-fs-2xl { font-size: var(--mat-fs-2xl); }
.mat-fs-3xl { font-size: var(--mat-fs-3xl); }
.mat-fw-normal { font-weight: 400; }
.mat-fw-medium { font-weight: 560; }
.mat-fw-strong { font-weight: 650; }
.mat-lh-tight { line-height: var(--mat-lh-tight); }
.mat-lh-normal { line-height: var(--mat-lh); }
.mat-italic { font-style: italic; }
.mat-underline { text-decoration: underline; }
.mat-no-underline { text-decoration: none; }
.mat-line-through { text-decoration: line-through; }

/* ---- Colour: text that can be read on a surface (COLOR-05), backgrounds, and tints with their own text colour ---- */
.mat-text-default { color: var(--mat-text); }
.mat-text-muted { color: var(--mat-text-muted); }
.mat-text-accent { color: var(--mat-accent-text); }
.mat-text-success { color: var(--mat-success-text); }
.mat-text-warning { color: var(--mat-warning-text); }
.mat-text-danger { color: var(--mat-danger-text); }
.mat-text-info { color: var(--mat-info-text); }
.mat-bg-page { background-color: var(--mat-bg); }
.mat-bg-surface { background-color: var(--mat-surface); }
.mat-bg-surface-2 { background-color: var(--mat-surface-2); }
.mat-bg-surface-3 { background-color: var(--mat-surface-3); }
.mat-tint-accent { background-color: var(--mat-accent-soft); color: var(--mat-accent-text); }
.mat-tint-success { background-color: var(--mat-success-bg); color: var(--mat-success-text); }
.mat-tint-warning { background-color: var(--mat-warning-bg); color: var(--mat-warning-text); }
.mat-tint-danger { background-color: var(--mat-danger-bg); color: var(--mat-danger-text); }
.mat-tint-info { background-color: var(--mat-info-bg); color: var(--mat-info-text); }

/* ---- Borders, radius and shadow (SPACE-02, SPACE-03) ---- */
.mat-border { border: 1px solid var(--mat-border); }
.mat-border-0 { border: 0; }
.mat-border-top { border-top: 1px solid var(--mat-border); }
.mat-border-bottom { border-bottom: 1px solid var(--mat-border); }
.mat-border-start { border-inline-start: 1px solid var(--mat-border); }
.mat-border-end { border-inline-end: 1px solid var(--mat-border); }
.mat-rounded-0 { border-radius: 0; }
.mat-rounded-sm { border-radius: var(--mat-radius-sm); }
.mat-rounded { border-radius: var(--mat-radius); }
.mat-rounded-lg { border-radius: var(--mat-radius-lg); }
.mat-rounded-xl { border-radius: var(--mat-radius-xl); }
.mat-rounded-pill { border-radius: var(--mat-radius-pill); }
.mat-rounded-circle { border-radius: 50%; }
.mat-shadow-0 { box-shadow: none; }
.mat-shadow-1 { box-shadow: var(--mat-shadow-1); }
.mat-shadow-2 { box-shadow: var(--mat-shadow-2); }
.mat-shadow-3 { box-shadow: var(--mat-shadow-3); }

/* ---- Sizing, position and overflow ---- */
.mat-w-25 { width: 25%; }
.mat-w-50 { width: 50%; }
.mat-w-75 { width: 75%; }
.mat-w-100 { width: 100%; }
.mat-w-auto { width: auto; }
.mat-w-fit { width: fit-content; }
.mat-h-100 { height: 100%; }
.mat-h-auto { height: auto; }
.mat-mw-100 { max-width: 100%; }
.mat-min-w-0 { min-width: 0; }
.mat-min-h-0 { min-height: 0; }
.mat-relative { position: relative; }
.mat-absolute { position: absolute; }
.mat-fixed { position: fixed; }
.mat-top-0 { top: 0; }
.mat-bottom-0 { bottom: 0; }
.mat-start-0 { inset-inline-start: 0; }
.mat-end-0 { inset-inline-end: 0; }
.mat-inset-0 { inset: 0; }
.mat-sticky-top { position: sticky; top: calc(var(--mat-topbar-h) + var(--mat-space-4)); }
.mat-overflow-hidden { overflow: hidden; }
.mat-overflow-auto { overflow: auto; }
.mat-overflow-visible { overflow: visible; }
.mat-overflow-x-auto { overflow-x: auto; }
.mat-pointer { cursor: pointer; }

/* ==========================================================================
   MatUi · apps
   The colour of each Mat app: ONE custom property on <html data-app="...">. Everything else is derived (see matui.tokens.css).

   - --mat-app-accent      the app's identity colour (white text on it passes AA, or --mat-app-on-accent says otherwise)
   - --mat-app-on-accent   text on a filled accent surface, only when it is not white
   - --mat-app-accent-text link / text colour on a surface, only when the derived one would not pass AA
   MatDesign checks every value here against the app registry and against WCAG AA (unit tests).

   Below the apps: the accent presets a USER can pick in the settings of an app (<html data-accent="ocean">). A preset wins over the
   app colour, because the user chose it, and it resets the app's on-accent and link overrides.
   ========================================================================== */

[data-app="mattiverse"]  { --mat-app-accent: #6164ec; }
[data-app="matdock"]     { --mat-app-accent: #1d78be; }
[data-app="matos"]       { --mat-app-accent: #8558ec; }
[data-app="matcad"]      { --mat-app-accent: #2f6feb; }
[data-app="matddns"]     { --mat-app-accent: #4173d1; }
[data-app="matfile"]     { --mat-app-accent: #3472d8; }
[data-app="matmail"]     { --mat-app-accent: #1a56db; }
[data-app="matpaper"]    { --mat-app-accent: #268538; }
[data-app="matplay"]     { --mat-app-accent: #00819b; }
[data-app="matsplit"]    { --mat-app-accent: #bf5610; }
[data-app="matmon"]      { --mat-app-accent: #295cff; }
[data-app="matcms"]      { --mat-app-accent: #2563eb; }
[data-app="matdo"]       { --mat-app-accent: #8300bc; }
[data-app="matstat"]     { --mat-app-accent: #2563eb; }
[data-app="matbu"]       { --mat-app-accent: #0b7f8a; }
[data-app="mattrakr"]    { --mat-app-accent: #6c5ce7; }
[data-app="matlan"]      { --mat-app-accent: #418251; }
[data-app="matarchive"]  { --mat-app-accent: #4fd1c5; --mat-app-on-accent: #0b1020; --mat-app-accent-text: #1d7f77; }
[data-app="msbi"]        { --mat-app-accent: #6d5df6; }
[data-app="matbiz"]      { --mat-app-accent: #1b6ec2; }
[data-app="matgate"]     { --mat-app-accent: #0a7d57; }
[data-app="matdesign"]   { --mat-app-accent: #d6336c; }

/* ---- A free choice of colour: matui.js (MatUi.accent.custom) writes --mat-custom-accent and --mat-custom-on-accent ---- */
[data-accent="custom"] { --mat-app-accent: var(--mat-custom-accent, #5b5fe6); --mat-app-on-accent: var(--mat-custom-on-accent, #ffffff); --mat-app-accent-text: initial; }

/* ---- Accent presets (user choice) ---- */
[data-accent="purple"]   { --mat-app-accent: #8300bc; --mat-app-on-accent: initial; --mat-app-accent-text: initial; }
[data-accent="indigo"]   { --mat-app-accent: #3f51b5; --mat-app-on-accent: initial; --mat-app-accent-text: initial; }
[data-accent="ocean"]    { --mat-app-accent: #1a73e8; --mat-app-on-accent: initial; --mat-app-accent-text: initial; }
[data-accent="teal"]     { --mat-app-accent: #008578; --mat-app-on-accent: initial; --mat-app-accent-text: initial; }
[data-accent="forest"]   { --mat-app-accent: #1c863a; --mat-app-on-accent: initial; --mat-app-accent-text: initial; }
[data-accent="gold"]     { --mat-app-accent: #966d07; --mat-app-on-accent: initial; --mat-app-accent-text: initial; }
[data-accent="sunset"]   { --mat-app-accent: #ca4c09; --mat-app-on-accent: initial; --mat-app-accent-text: initial; }
[data-accent="red"]      { --mat-app-accent: #cb4538; --mat-app-on-accent: initial; --mat-app-accent-text: initial; }
[data-accent="berry"]    { --mat-app-accent: #c2185b; --mat-app-on-accent: initial; --mat-app-accent-text: initial; }
[data-accent="graphite"] { --mat-app-accent: #546e7a; --mat-app-on-accent: initial; --mat-app-accent-text: initial; }