/* MatUi 0.11.0 (c862573312) - build local-20261031 - 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.
   - Colour schemes (`data-scheme` on <html>, opt-in) are at the END of this file: they change surfaces only, never an accent token.
   ========================================================================== */

: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. */
  --mat-accent-text-keep: 100%;            /* Share of the accent that its text colour keeps, the rest is --mat-text: a colour scheme lowers it where its surfaces need darker links. */

  /* ---- 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: color-mix(in oklab, var(--mat-app-accent-text, color-mix(in oklab, var(--mat-accent) 78%, black)) var(--mat-accent-text-keep, 100%), var(--mat-text)); /* 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;
  }
}


/* ---- Density (data-density on <html>) ----
   Opt-in: <html data-density="compact">. Absent or any other value is the look above. For an app whose pages are dense - a back
   office with a long menu, many fields, long tables (MatCMS, Matmon) - where the default air is made for a sparse page. It
   changes sizes only: the menu is narrower, the top bar lower, the body type 14 px and the page padding smaller; with a MOUSE the
   controls are 34 px, the menu rows 32 px and the table cells tighter (those two as rules in matui.shell.css / matui.lists.css,
   so the component properties stay the app's to set). A touch screen keeps the 44 px targets above (MOBILE-04)
   and its 16 px field type (MOBILE-06); nothing is ever under 32 px. The rules for the menu's own spacing are in matui.shell.css. */
:root[data-density="compact"] {
  --mat-nav-w: 236px;
  --mat-topbar-h: 52px;
  --mat-content-pad: 28px;
  --mat-fs-md: .875rem;
}
@media (max-width: 1199px) { :root[data-density="compact"] { --mat-content-pad: 24px; } }
@media (max-width: 899px) { :root[data-density="compact"] { --mat-content-pad: 16px; } }
@media (pointer: fine) {
  :root[data-density="compact"] {
    --mat-control-h: 34px;
    --mat-control-h-lg: 40px;
  }
}

: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, color-mix(in oklab, var(--mat-accent) 78%, white) var(--mat-accent-text-keep, 100%), var(--mat-text));
  --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, color-mix(in oklab, var(--mat-accent) 78%, white) var(--mat-accent-text-keep, 100%), var(--mat-text));
    --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);
  }
}

/* ==========================================================================
   Colour schemes (COLOR-09). Opt-in: <html data-scheme="paper|contrast|oled">. Absent, "standard" or any other value is the look above.
   - A scheme changes SURFACES only: the backgrounds, the lines, the text colours, the status texts where AA needs it, the shadows, the dim layer and the
     scrollbar. It never sets an accent token, so every combination of scheme, mode, accent and app works without a rule of its own. Where its surfaces need
     darker links it lowers --mat-accent-text-keep, the share of the accent that the colour of a link keeps (the rest is --mat-text).
   - Written like the dark set: the light values are the scheme on its own (also while the system is light), the dark values are written TWICE (explicit and
     system) and a unit test keeps the two identical. A scheme sets the same tokens in light and in dark, so its light values never show through in dark.
   - oled has no light values on purpose: in light mode it is the standard look.
   - The selectors start with :root[data-scheme=...] so that they are not read as the dark values of the base tokens (:root[data-theme="dark"]).
   ========================================================================== */

/* ---- Scheme paper: warm, slightly yellowed surfaces ---- */
:root[data-scheme="paper"] {
  --mat-bg: #f3eee3;
  --mat-bg-2: #ebe5d6;
  --mat-surface: #fcf9f2;
  --mat-surface-2: #f7f3ea;
  --mat-surface-3: #f1ebdf;
  --mat-glass: #f3eee3;
  --mat-nav-bg: #ece6d8;
  --mat-border: rgba(90, 60, 10, .19);
  --mat-border-strong: rgba(90, 60, 10, .36);
  --mat-text: #2b2620;
  --mat-text-muted: #675d4f;
  --mat-text-faint: #8c8170;
  --mat-success-text: #0a7340;
  --mat-accent-text-keep: 75%;
}

:root[data-scheme="paper"][data-theme="dark"] {
  --mat-bg: #1b1814;
  --mat-bg-2: #1f1c17;
  --mat-surface: #23201a;
  --mat-surface-2: #28251f;
  --mat-surface-3: #2c2821;
  --mat-glass: #1b1814;
  --mat-nav-bg: #161310;
  --mat-border: rgba(255, 240, 214, .10);
  --mat-border-strong: rgba(255, 240, 214, .22);
  --mat-text: #ece4d6;
  --mat-text-muted: #ab9f8b;
  --mat-text-faint: #7f7565;
  --mat-success-text: #72efbb;
  --mat-accent-text-keep: 85%;
}

@media (prefers-color-scheme: dark) {
  :root[data-scheme="paper"]:not([data-theme="light"]):not([data-theme="dark"]) {
    --mat-bg: #1b1814;
    --mat-bg-2: #1f1c17;
    --mat-surface: #23201a;
    --mat-surface-2: #28251f;
    --mat-surface-3: #2c2821;
    --mat-glass: #1b1814;
    --mat-nav-bg: #161310;
    --mat-border: rgba(255, 240, 214, .10);
    --mat-border-strong: rgba(255, 240, 214, .22);
    --mat-text: #ece4d6;
    --mat-text-muted: #ab9f8b;
    --mat-text-faint: #7f7565;
    --mat-success-text: #72efbb;
    --mat-accent-text-keep: 85%;
  }
}

/* ---- Scheme contrast: pure white and pure black, strong lines instead of shadows, near-black and near-white muted text ---- */
:root[data-scheme="contrast"] {
  --mat-bg: #ffffff;
  --mat-bg-2: #f2f2f2;
  --mat-surface: #ffffff;
  --mat-surface-2: #f5f5f5;
  --mat-surface-3: #ebebeb;
  --mat-glass: #ffffff;
  --mat-nav-bg: #ffffff;
  --mat-overlay: rgba(0, 0, 0, .7);
  --mat-border: #5c5c5c;
  --mat-border-strong: #1f1f1f;
  --mat-text: #000000;
  --mat-text-muted: #333333;
  --mat-text-faint: #595959;
  --mat-danger-text: #8f0f26;
  --mat-success-text: #07592f;
  --mat-warning-text: #6e4000;
  --mat-info-text: #0f3f9a;
  --mat-shadow-1: none;
  --mat-shadow-2: 0 0 0 1px #1f1f1f;
  --mat-shadow-3: 0 0 0 1px #1f1f1f;
  --mat-scroll-thumb: rgba(0, 0, 0, .6);
  --mat-accent-text-keep: 90%;
}

:root[data-scheme="contrast"][data-theme="dark"] {
  --mat-bg: #000000;
  --mat-bg-2: #0d0d0d;
  --mat-surface: #000000;
  --mat-surface-2: #0f0f0f;
  --mat-surface-3: #1c1c1c;
  --mat-glass: #000000;
  --mat-nav-bg: #000000;
  --mat-overlay: rgba(0, 0, 0, .8);
  --mat-border: #9a9a9a;
  --mat-border-strong: #e6e6e6;
  --mat-text: #ffffff;
  --mat-text-muted: #d6d6d6;
  --mat-text-faint: #b0b0b0;
  --mat-danger-text: #ffc2cc;
  --mat-success-text: #9ff7cf;
  --mat-warning-text: #ffe08a;
  --mat-info-text: #c9daff;
  --mat-shadow-1: none;
  --mat-shadow-2: 0 0 0 1px #e6e6e6;
  --mat-shadow-3: 0 0 0 1px #e6e6e6;
  --mat-scroll-thumb: rgba(255, 255, 255, .6);
  --mat-accent-text-keep: 100%;
}

@media (prefers-color-scheme: dark) {
  :root[data-scheme="contrast"]:not([data-theme="light"]):not([data-theme="dark"]) {
    --mat-bg: #000000;
    --mat-bg-2: #0d0d0d;
    --mat-surface: #000000;
    --mat-surface-2: #0f0f0f;
    --mat-surface-3: #1c1c1c;
    --mat-glass: #000000;
    --mat-nav-bg: #000000;
    --mat-overlay: rgba(0, 0, 0, .8);
    --mat-border: #9a9a9a;
    --mat-border-strong: #e6e6e6;
    --mat-text: #ffffff;
    --mat-text-muted: #d6d6d6;
    --mat-text-faint: #b0b0b0;
    --mat-danger-text: #ffc2cc;
    --mat-success-text: #9ff7cf;
    --mat-warning-text: #ffe08a;
    --mat-info-text: #c9daff;
    --mat-shadow-1: none;
    --mat-shadow-2: 0 0 0 1px #e6e6e6;
    --mat-shadow-3: 0 0 0 1px #e6e6e6;
    --mat-scroll-thumb: rgba(255, 255, 255, .6);
    --mat-accent-text-keep: 100%;
  }
}

/* ---- Scheme oled: dark mode only. A black page and menu, near-black surfaces (in light mode the standard look) ---- */
:root[data-scheme="oled"][data-theme="dark"] {
  --mat-bg: #000000;
  --mat-bg-2: #050505;
  --mat-surface: #0a0a0a;
  --mat-surface-2: #101010;
  --mat-surface-3: #161616;
  --mat-glass: #000000;
  --mat-nav-bg: #000000;
  --mat-border: rgba(255, 255, 255, .12);
  --mat-border-strong: rgba(255, 255, 255, .26);
  --mat-text: #e8e8e8;
  --mat-text-muted: #9c9c9c;
  --mat-text-faint: #6b6b6b;
}

@media (prefers-color-scheme: dark) {
  :root[data-scheme="oled"]:not([data-theme="light"]):not([data-theme="dark"]) {
    --mat-bg: #000000;
    --mat-bg-2: #050505;
    --mat-surface: #0a0a0a;
    --mat-surface-2: #101010;
    --mat-surface-3: #161616;
    --mat-glass: #000000;
    --mat-nav-bg: #000000;
    --mat-border: rgba(255, 255, 255, .12);
    --mat-border-strong: rgba(255, 255, 255, .26);
    --mat-text: #e8e8e8;
    --mat-text-muted: #9c9c9c;
    --mat-text-faint: #6b6b6b;
  }
}

/* ==========================================================================
   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); } }
/* A grid of figures (mat-stat, bare or as the body of a card) keeps two columns on a phone: a figure is short, and one per line turned a row of
   key figures into a long column of mostly empty cards. Only on the narrowest screens does it go to one. */
@media (max-width: 600px) { .mat-grid:has(> .mat-stat, > .mat-card > .mat-stat) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 340px) { .mat-grid:has(> .mat-stat, > .mat-card > .mat-stat) { 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
     - a main action may be the first item of the menu, filled with the accent (SHELL-19); the switcher of several menus sits under the logo or at the end of the menu (SHELL-15)
     - 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 shell scrolls inside (the content, the list of the menu); the document itself never does. Without this a wheel over a part that does not
   scroll (the foot of the menu with the account) is handed on to the document, and any pixel of overflow (rounding at a zoom, a popover, a toast,
   a touchpad) lets the whole app slide out of the window. Pages without the shell (sign-in, .mat-auth) still scroll. */
html:has(> body > .mat-app),
html:has(> body > .mat-app) > body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

/* ---- 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);
  overscroll-behavior: contain;
}

.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; }
/* The logo and the word mark of a brand (IDENT-08): a picture from the company's own files instead of the tile with a glyph, or instead of the name. A variant for dark surfaces is a second image;
   the theme shows one of the two (the dark set is written twice, like in the tokens). A wide logo carries the name itself, so the name and tagline stay for screen readers only. */
.mat-brandmark { display: block; flex: none; height: 38px; width: auto; max-width: 100%; }
.mat-brandmark--word { height: 22px; }
.mat-brandmark--dark { display: none; }
:root[data-theme="dark"] .mat-brandmark--light { display: none; }
:root[data-theme="dark"] .mat-brandmark--dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .mat-brandmark--light { display: none; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .mat-brandmark--dark { display: block; }
}
.mat-nav__brand-link--logo-only > span:last-child { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 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);
}
/* A group heading with one small icon action at its right end (SHELL-02): the title takes the room, the action is a compact square that adds no height to the row
   (a touch screen gets 44 px by a negative margin, the row stays as it is). */
.mat-nav__group--action { display: flex; align-items: center; gap: var(--mat-space-2); padding-right: var(--mat-space-1); }
.mat-nav__group-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mat-nav__group-action {
  flex: none; display: inline-grid; place-items: center;
  width: 1.75rem; height: 1.75rem; margin-block: -.25rem;
  padding: 0; border: 0; border-radius: var(--mat-radius-sm);
  background: transparent; color: var(--mat-text-muted); cursor: pointer; text-decoration: none;
  transition: background var(--mat-dur-fast) var(--mat-ease), color var(--mat-dur-fast) var(--mat-ease);
}
.mat-nav__group-action .mat-icon { font-size: 1.1rem; }
.mat-nav__group-action:hover, .mat-nav__group-action[aria-expanded="true"] { background: var(--mat-surface-3); color: var(--mat-text); text-decoration: none; }
/* An action that is a link to the current page is marked like a current item: a tint of the accent behind it and the accent on its icon (SHELL-02, COLOR-08). After the hover rule, so it wins. */
.mat-nav__group-action.is-active, .mat-nav__group-action[aria-current="page"] { background: var(--mat-accent-soft-strong); color: var(--mat-accent-text); }
.mat-nav__group-action:focus-visible { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--mat-accent) 70%, transparent); }
@media (pointer: coarse) { .mat-nav__group-action { width: 2.75rem; height: 2.75rem; margin-block: -.75rem; } }
/* @prop nav | --mat-nav-item-radius | length | var(--mat-radius) | Corner radius of an item of the menu (the focus ring of an item follows it). */
/* @prop nav | --mat-nav-item-height | length | var(--mat-control-h) | Least height of an item of the menu. A floor: on a touch screen keep it at 44 px or more (MOBILE-04). */
/* @prop nav | --mat-nav-item-pad-x | length | var(--mat-space-3) | Space between the edge of an item of the menu and its icon and label. */
/* @prop nav | --mat-nav-item-gap | length | var(--mat-space-3) | Space between the icon of an item of the menu and its label. */
/* @prop nav | --mat-nav-item-font-weight | number | 500 | Weight of the label of an item of the menu (the current item and the main action keep their own). */
.mat-nav__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--mat-nav-item-gap, var(--mat-space-3));
  min-height: var(--mat-nav-item-height, var(--mat-control-h));
  padding: 0 var(--mat-nav-item-pad-x, var(--mat-space-3));
  border-radius: var(--mat-nav-item-radius, var(--mat-radius));
  color: var(--mat-text);
  font-weight: var(--mat-nav-item-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 { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--mat-accent) 70%, transparent); border-radius: var(--mat-nav-item-radius, var(--mat-radius)); }
.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); }

/* ---- A main action (SHELL-19): the first item of the menu, filled with the accent, for the one thing the app is mostly used for ---- */
.mat-nav__item--primary {
  min-height: var(--mat-control-h-lg);
  margin-bottom: var(--mat-space-2);
  background: var(--mat-accent);
  color: var(--mat-on-accent);
  font-weight: 620;
}
.mat-nav__item--primary .mat-icon { color: inherit; }
.mat-nav__item--primary:hover { background: var(--mat-accent-hover); }
.mat-nav__item--primary:active { background: var(--mat-accent-active); }
/* On its own page it stays filled, a step darker, like the current item of the menu (SHELL-02). */
.mat-nav__item--primary.is-active,
.mat-nav__item--primary[aria-current="page"] { background: var(--mat-accent-active); font-weight: 650; }
.mat-nav__item--primary.is-active .mat-icon,
.mat-nav__item--primary[aria-current="page"] .mat-icon { color: inherit; }
/* The ring of the other items is the accent; on an item that is filled with it the ring has the colour of the text. */
.mat-nav__item--primary:focus-visible { box-shadow: inset 0 0 0 2px var(--mat-on-accent); }

/* ---- 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: var(--mat-nav-item-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); }
/* At the end of the menu, directly above the foot: for an app whose menu starts with a main action (SHELL-19). Its popup opens upwards (data-menu-place="top"). */
.mat-nav__switch--end { padding: var(--mat-space-2) var(--mat-space-3) var(--mat-space-3); }
.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); }
/* A choice in the popup of the switcher (the tenant) is a button of a small form: the form takes no room of its own, the button is the entry. */
.mat-menu__form { display: contents; }
.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 ---- */
/* position: relative makes the content the box an absolutely placed element inside it is placed in. Without it a visually hidden caption
   (mat-sr-only) or a table head hidden on a phone, far down a long page, was placed against the document and made the document as tall as
   the content: invisible since the document is locked (SHELL-07), but focusing such an element or searching the page still scrolled the
   locked document and slid the whole app out of the window. */
.mat-main {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
}

/* @prop topbar | --mat-topbar-pad-x | length | var(--mat-content-pad) | Space between the sides of the window and the content of the header bar (its height is the token for the height of the bar). */
/* @prop topbar | --mat-topbar-gap | length | var(--mat-space-3) | Space between the burger button, the breadcrumb and the actions of the header bar. */
/* @prop topbar | --mat-topbar-border-width | length | 1px | Thickness of the line under the header bar. */
.mat-topbar {
  position: sticky;
  top: 0;
  z-index: var(--mat-z-topbar);
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--mat-topbar-gap, var(--mat-space-3));
  min-height: var(--mat-topbar-h);
  padding: 0 var(--mat-topbar-pad-x, var(--mat-content-pad));
  background: var(--mat-glass);
  border-bottom: var(--mat-topbar-border-width, 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; }
/* @prop topbar | --mat-topbar-crumb-font-size | length | var(--mat-fs-sm) | Size of the text of the breadcrumb. */
.mat-crumbs li { display: flex; align-items: center; gap: var(--mat-space-2); min-width: 0; font-size: var(--mat-topbar-crumb-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; }
/* The main action of the app (scan, add) is highlighted: a filled accent button instead of a ghost one, at the right end; a second action that should be seen but is not the main
   one is a secondary icon button (a surface with a line), so that one icon only has the accent colour. A button with a fill or a line needs room around it and lines up with the edge of the content. */
.mat-topbar__actions:has(> .mat-btn--primary, > .mat-btn--secondary) { gap: var(--mat-space-2); margin-right: 0; }
.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); }

/* Search in the header bar (SHELL-20): an inline field after the breadcrumb and before the icons, whatever the order of the markup (the order is enforced here: the breadcrumb and the burger keep
   the order 0 they always had, the search is 1, the icons 2). It is a search with suggestions (FORM-23, matui.pickers.css). Below 640 px it is one icon button that opens the full-screen
   panel, so the breadcrumb and the icons keep their room. */
.mat-topbar > .mat-topbar__actions { order: 2; }
/* @prop search | --mat-search-width | length | 18rem | Width of the search field in the header bar; it gets narrower when the bar has no room for it. */
.mat-topbar > .mat-topbar__search { order: 1; flex: 0 1 var(--mat-search-width, 18rem); min-width: 0; }
@media (max-width: 640px) {
  .mat-topbar > .mat-topbar__search { flex: none; margin-right: calc(var(--mat-space-2) * -1); }
  .mat-topbar__search .mat-search { width: auto; }
  .mat-topbar__search .mat-search:not(.is-full) .mat-search__bar { display: none; }
  .mat-topbar__search .mat-search:not(.is-full) .mat-search__open { display: inline-flex; }
}

.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; }
  /* on a touch screen a sideways swipe at the edge is the app's (the drawer), not the browser's back and forward (a trackpad on a wide screen keeps them) */
  html { overscroll-behavior-x: none; }
  .mat-topbar { padding-top: var(--mat-safe-top); padding-left: calc(var(--mat-topbar-pad-x, var(--mat-content-pad)) + var(--mat-safe-left)); padding-right: calc(var(--mat-topbar-pad-x, 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; }

/* ---- Touch targets (MOBILE-04): what the shell has that is smaller than 44 px with a mouse is 44 px on a touch screen. The look is the same, there is more room around it. ---- */
@media (pointer: coarse) {
  .mat-nav__item--sub, .mat-menu .mat-menu__item--sub { min-height: 44px; }
  .mat-crumbs a { display: block; min-width: 44px; line-height: 44px; text-align: center; }
  .mat-footer__links { row-gap: 0; }
  .mat-footer__links a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
}

/* ---- Density compact (data-density="compact", the tokens are in matui.tokens.css): the menu's own spacing, which has no
   property of its own yet ---- */
:root[data-density="compact"] .mat-nav__brand { padding: 14px 14px 10px; }
:root[data-density="compact"] .mat-nav__scroll { padding: 0 8px 8px; }
:root[data-density="compact"] .mat-nav__group { padding: 14px 10px 4px; font-size: var(--mat-fs-xs); }
:root[data-density="compact"] .mat-nav__list > li:first-child.mat-nav__group { padding-top: 4px; }
:root[data-density="compact"] .mat-nav__foot { padding: 8px 8px calc(8px + var(--mat-safe-bottom)); gap: 4px; }
:root[data-density="compact"] .mat-user { min-height: var(--mat-control-h); padding: 4px 8px; gap: 10px; }
:root[data-density="compact"] .mat-avatar { width: 28px; height: 28px; font-size: var(--mat-fs-xs); }
:root[data-density="compact"] .mat-page { padding-top: var(--mat-space-5); }
/* the rows of the menu with a mouse - :where() keeps the weight of .mat-nav__item, so an app's --mat-nav-item-* still applies */
@media (pointer: fine) {
  :where(:root[data-density="compact"]) .mat-nav__item {
    gap: var(--mat-nav-item-gap, 10px);
    min-height: var(--mat-nav-item-height, 32px);
    padding: 0 var(--mat-nav-item-pad-x, 10px);
  }
}

/* ==========================================================================
   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. */
/* @prop btn | --mat-btn-radius | length | var(--mat-radius) | Corner radius of every button, in every size, in a button group and on an icon button (a button inside an input group takes the radius of the group). */
/* @prop btn | --mat-btn-height | length | var(--mat-control-h) | Least height of a button of the default size, and the width of its icon-only form. A floor: on a touch screen keep it at 44 px or more (MOBILE-04). */
/* @prop btn | --mat-btn-pad-x | length | var(--mat-space-4) | Space between the edge of a button of the default size and its content. */
/* @prop btn | --mat-btn-border-width | length | 1px | Width of the border of every button (a secondary button shows it, the others keep it transparent). */
/* @prop btn | --mat-btn-font-weight | number | 600 | Weight of the letters of every button. */
.mat-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mat-space-2);
  min-height: var(--mat-btn-height, var(--mat-control-h));
  padding: 0 var(--mat-btn-pad-x, var(--mat-space-4));
  border: var(--mat-btn-border-width, 1px) solid transparent;
  border-radius: var(--mat-btn-radius, var(--mat-radius));
  background: var(--mat-surface);
  color: var(--mat-text);
  font-weight: var(--mat-btn-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-btn-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-btn-height, 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-text-muted); border-right-color: transparent;
  border-radius: 50%;
  animation: mat-spin .7s linear infinite;
}
/* The ring takes the colour that stands on the button: on a filled one the colour on its fill, on a light one (secondary,
   ghost, danger) a text colour. It used to be the colour on the accent everywhere: white on the white of a secondary button. */
.mat-btn--primary.is-loading::after { border-color: var(--mat-on-accent); border-right-color: transparent; }
.mat-btn--danger.is-loading::after { border-color: var(--mat-danger-text); border-right-color: transparent; }
.mat-btn--danger.mat-btn--solid.is-loading::after { border-color: var(--mat-on-danger); border-right-color: transparent; }
@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 ---------------------------------------------------------------------------------------------------- */
/* @prop card | --mat-card-radius | length | var(--mat-radius-lg) | Corner radius of a card and of the picture at its top. */
/* @prop card | --mat-card-border-width | length | 1px | Width of the line around a card. */
/* @prop card | --mat-card-pad | length | var(--mat-space-6) | Space between the edge of a card and its body, and at the sides of its head and foot (also on a phone). */
/* @prop card | --mat-card-head-pad-y | length | var(--mat-space-4) | Space above and below the title row and the foot of a card. */
.mat-card {
  background: var(--mat-surface);
  border: var(--mat-card-border-width, 1px) solid var(--mat-border);
  border-radius: var(--mat-card-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-card-head-pad-y, var(--mat-space-4)) var(--mat-card-pad, 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__head .mat-check { align-items: center; min-height: 0; } /* the check of a selectable card sits on the line of the title */
.mat-card__head .mat-check input { margin: 0; }
.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-card-pad, var(--mat-space-6)); }
.mat-card__foot { padding: var(--mat-card-head-pad-y, var(--mat-space-4)) var(--mat-card-pad, 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-card-pad, 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. */
/* @prop badge | --mat-badge-size | length | 20px | Height and least width of a count badge (a dot badge keeps its own size). */
/* @prop badge | --mat-badge-pad-x | length | 6px | Space between the edge of a count badge and its number. */
/* @prop badge | --mat-badge-radius | length | var(--mat-radius-pill) | Corner radius of a count badge. */
/* @prop badge | --mat-badge-font-size | length | var(--mat-fs-xs) | Size of the number in a badge. */
.mat-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--mat-badge-size, 20px); height: var(--mat-badge-size, 20px); padding: 0 var(--mat-badge-pad-x, 6px);
  border-radius: var(--mat-badge-radius, var(--mat-radius-pill));
  background: var(--mat-accent); color: var(--mat-on-accent);
  font-size: var(--mat-badge-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); }

/* @prop pill | --mat-pill-height | length | 24px | Height of a status pill (a pill is a label, not a target). */
/* @prop pill | --mat-pill-pad-x | length | 10px | Space between the edge of a status pill and its content. */
/* @prop pill | --mat-pill-radius | length | var(--mat-radius-pill) | Corner radius of a status pill. */
/* @prop pill | --mat-pill-font-size | length | var(--mat-fs-xs) | Size of the text in a status pill. */
.mat-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--mat-pill-height, 24px); padding: 0 var(--mat-pill-pad-x, 10px);
  border-radius: var(--mat-pill-radius, var(--mat-radius-pill));
  background: var(--mat-surface-3); color: var(--mat-text-muted);
  font-size: var(--mat-pill-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; } }

/* @prop tag | --mat-tag-radius | length | var(--mat-radius-xs) | Corner radius of a tag. */
/* @prop tag | --mat-tag-pad-x | length | 8px | Space between the edge of a tag and its text. */
/* @prop tag | --mat-tag-font-size | length | var(--mat-fs-xs) | Size of the text in a tag. */
/* @prop tag | --mat-tag-font-weight | number | 600 | Weight of the text in a tag. */
.mat-tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px var(--mat-tag-pad-x, 8px); border-radius: var(--mat-tag-radius, var(--mat-radius-xs)); background: var(--mat-surface-3); color: var(--mat-text-muted); font-size: var(--mat-tag-font-size, var(--mat-fs-xs)); font-weight: var(--mat-tag-font-weight, 600); }

/* A colour a user chose is a mark next to the name (COLOR-10): data-colour="#rrggbb" on a tag, a dot or an icon, which matui.js writes into --mat-swatch (and marks is-coloured). The text of a tag
   stays muted and readable whatever the colour; a thin ring in the colour of the text keeps a white dot visible in light mode and a black one in dark mode. Without a valid colour: the neutral look. */
.mat-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--mat-swatch, var(--mat-text-faint)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mat-text) 35%, transparent); }
.mat-tag[data-colour].is-coloured::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--mat-swatch); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mat-text) 35%, transparent); }
.mat-icon[data-colour] { color: var(--mat-swatch); }

.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 ------------------------------------------------------------------------------------------ */
/* @prop alert | --mat-alert-radius | length | var(--mat-radius) | Corner radius of an alert. */
/* @prop alert | --mat-alert-pad-x | length | var(--mat-space-4) | Space at the sides between the edge of an alert and its content. */
/* @prop alert | --mat-alert-pad-y | length | var(--mat-space-3) | Space above and below the content of an alert. */
/* @prop alert | --mat-alert-gap | length | var(--mat-space-3) | Space between the icon of an alert, its text and its close button. */
/* @prop alert | --mat-alert-border-width | length | 1px | Width of the (transparent) border of an alert. */
.mat-alert {
  display: flex; align-items: flex-start; gap: var(--mat-alert-gap, var(--mat-space-3));
  padding: var(--mat-alert-pad-y, var(--mat-space-3)) var(--mat-alert-pad-x, var(--mat-space-4));
  border: var(--mat-alert-border-width, 1px) solid transparent; border-radius: var(--mat-alert-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); }

/* @prop toast | --mat-toast-radius | length | var(--mat-radius) | Corner radius of a toast. */
/* @prop toast | --mat-toast-width | length | 380px | Width of the column of toasts (never wider than the screen less its margins). */
/* @prop toast | --mat-toast-pad-x | length | var(--mat-space-4) | Space at the sides between the edge of a toast and its content. */
/* @prop toast | --mat-toast-pad-y | length | var(--mat-space-3) | Space above and below the content of a toast. */
/* @prop toast | --mat-toast-gap | length | var(--mat-space-3) | Space between the icon of a toast and its text. */
.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(var(--mat-toast-width, 380px), calc(100vw - 2 * var(--mat-space-4)));
  pointer-events: none;
}
/* A toast only tells: a tap on it goes to what lies under it (the next Delete of a list is never blocked); only its X takes the tap. */
.mat-toast {
  pointer-events: none;
  display: flex; align-items: flex-start; gap: var(--mat-toast-gap, var(--mat-space-3));
  padding: var(--mat-toast-pad-y, var(--mat-space-3)) var(--mat-toast-pad-x, var(--mat-space-4));
  background: var(--mat-surface); color: var(--mat-text);
  border: 1px solid var(--mat-border-strong);
  border-radius: var(--mat-toast-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); }
.mat-toast .mat-alert__close { pointer-events: auto; }
@keyframes mat-toast-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes mat-toast-in-top { from { opacity: 0; transform: translateY(-10px); } }
/* On a phone the bottom is where the thumb works (the actions of a list, the sheets, the main button): the toasts stand at the top, under the header bar. */
@media (max-width: 600px) {
  .mat-toasts { left: calc(var(--mat-space-4) + var(--mat-safe-left)); right: calc(var(--mat-space-4) + var(--mat-safe-right)); width: auto; top: calc(var(--mat-topbar-h) + var(--mat-space-2) + var(--mat-safe-top)); bottom: auto; }
  .mat-toast { animation-name: mat-toast-in-top; }
  /* one at a time, like a snackbar: the newest takes the place of the one before */
  .mat-toasts > .mat-toast:not(:last-child) { display: none; }
}

/* ---- 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); }

/* The label column is 200 px (or 40 % of a narrow list) and grows with the longest label; the value keeps at least 40 %, so a long label wraps
   instead of pushing the value out, and a list in a narrow card (a side panel, a two-column grid on a tablet) still has room for its values. */
.mat-kv { display: grid; grid-template-columns: minmax(min(200px, 40%), max-content) minmax(40%, 1fr); gap: var(--mat-space-3) var(--mat-space-5); margin: 0; }
.mat-kv dt { color: var(--mat-text-muted); min-width: 0; overflow-wrap: anywhere; }
.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 code inside a block is not an inline code: its padding would only push the first line to the right */
.mat-code code { padding: 0; background: none; border-radius: 0; }
/* 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.
   A tip that is not shown takes no room (display: none, not only transparent): a button at the end of a table row or of the header bar would otherwise let
   its scrolling box scroll sideways by the width of a tip nobody sees. It fades in from @starting-style.
   Where it opens: centred above the element; at the end of a row of a table (mat-table__actions) and in the actions of the header bar it opens towards the
   start, in the header bar below (above it there is no room). data-tip-align="start|end" and data-tip-place="below" do the same anywhere else. */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  display: none;
  position: absolute; left: 50%; bottom: calc(100% + 6px); translate: -50% 0;
  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: 1; pointer-events: none;
  transition: opacity var(--mat-dur-fast) var(--mat-ease);
  z-index: var(--mat-z-menu);
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { display: block; }
@starting-style { [data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 0; } }
.mat-table__actions [data-tip]::after, .mat-topbar__actions [data-tip]::after, [data-tip-align="end"]::after { left: auto; right: 0; translate: none; }
[data-tip-align="start"]::after { left: 0; translate: none; }
.mat-topbar [data-tip]::after, [data-tip-place="below"]::after { bottom: auto; top: calc(100% + 6px); }
@media (hover: none) { [data-tip]::after { display: none; } [data-tip]:hover::after, [data-tip]:focus-visible::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-btn-radius, var(--mat-radius)); border-bottom-left-radius: var(--mat-btn-radius, var(--mat-radius)); }
.mat-btn-group > .mat-btn:last-child { border-top-right-radius: var(--mat-btn-radius, var(--mat-radius)); border-bottom-right-radius: var(--mat-btn-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-btn-radius, var(--mat-radius)) var(--mat-btn-radius, var(--mat-radius)) 0 0; }
.mat-btn-group--vertical > .mat-btn:last-child { border-radius: 0 0 var(--mat-btn-radius, var(--mat-radius)) var(--mat-btn-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; }

/* A strip of key figures (mat-stats): each child .mat-stat is a compact tile of its own, no card around it. The tiles share one row while
   they fit (at least 8.5rem each, so five or six sit side by side on a desktop), two per row on a phone (MOBILE-02; an odd last tile takes
   the whole row), one only below 340 px. A tone tints the tile and draws a bar at its start; the label and the delta still say what the
   colour means (COLOR-04). An <a class="mat-stat"> is a linked tile. A .mat-stat inside a card is as before. */
.mat-stats { display: grid; gap: var(--mat-space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); }
.mat-stats > .mat-stat {
  position: relative;
  min-width: 0;
  gap: 1px;
  padding: var(--mat-space-3) var(--mat-space-4);
  overflow: hidden;
  background: var(--mat-surface);
  border: 1px solid var(--mat-border);
  border-radius: var(--mat-radius);
  box-shadow: var(--mat-shadow-1);
  color: var(--mat-text);
}
.mat-stats > .mat-stat > .mat-stat__label { overflow: hidden; font-size: var(--mat-fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; }
.mat-stats > .mat-stat > .mat-stat__value { font-size: var(--mat-fs-xl); line-height: var(--mat-lh-tight); overflow-wrap: anywhere; }
.mat-stats > .mat-stat > .mat-stat__delta { font-weight: 500; }
.mat-stats > .mat-stat > .mat-stat__icon { position: absolute; top: var(--mat-space-3); right: var(--mat-space-3); font-size: 1.05rem; color: var(--mat-text-faint); }
.mat-stats > .mat-stat:has(> .mat-stat__icon) > .mat-stat__label { padding-right: var(--mat-space-6); }
.mat-stat--danger { --mat-stat-tone: var(--mat-danger); --mat-stat-tint: var(--mat-danger-bg); --mat-stat-text: var(--mat-danger-text); }
.mat-stat--warning { --mat-stat-tone: var(--mat-warning); --mat-stat-tint: var(--mat-warning-bg); --mat-stat-text: var(--mat-warning-text); }
.mat-stat--success { --mat-stat-tone: var(--mat-success); --mat-stat-tint: var(--mat-success-bg); --mat-stat-text: var(--mat-success-text); }
.mat-stat--info { --mat-stat-tone: var(--mat-info); --mat-stat-tint: var(--mat-info-bg); --mat-stat-text: var(--mat-info-text); }
.mat-stat--accent { --mat-stat-tone: var(--mat-accent); --mat-stat-tint: var(--mat-accent-soft); --mat-stat-text: var(--mat-accent-text); }
.mat-stats > .mat-stat:is(.mat-stat--danger, .mat-stat--warning, .mat-stat--success, .mat-stat--info, .mat-stat--accent) {
  border-color: color-mix(in srgb, var(--mat-stat-tone) 32%, var(--mat-border));
  background: linear-gradient(color-mix(in srgb, var(--mat-stat-tint) 70%, transparent), color-mix(in srgb, var(--mat-stat-tint) 70%, transparent)), var(--mat-surface);
}
.mat-stats > .mat-stat:is(.mat-stat--danger, .mat-stat--warning, .mat-stat--success, .mat-stat--info, .mat-stat--accent)::before { content: ""; position: absolute; inset-block: 0; left: 0; width: 3px; background: var(--mat-stat-tone); }
.mat-stats > .mat-stat:is(.mat-stat--danger, .mat-stat--warning, .mat-stat--success, .mat-stat--info, .mat-stat--accent) > :is(.mat-stat__value, .mat-stat__icon) { color: var(--mat-stat-text); }
.mat-stats > a.mat-stat { text-decoration: none; transition: border-color var(--mat-dur) var(--mat-ease), background-color var(--mat-dur) var(--mat-ease); }
.mat-stats > a.mat-stat:hover { border-color: var(--mat-border-strong); background-color: var(--mat-surface-2); text-decoration: none; }
.mat-stats > a.mat-stat:is(.mat-stat--danger, .mat-stat--warning, .mat-stat--success, .mat-stat--info, .mat-stat--accent):hover { border-color: color-mix(in srgb, var(--mat-stat-tone) 60%, var(--mat-border)); }
.mat-stats > a.mat-stat:focus-visible { border-radius: var(--mat-radius); box-shadow: var(--mat-focus-ring); }
@media (max-width: 600px) {
  .mat-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mat-stats > .mat-stat:last-child:nth-child(odd) { grid-column-end: span 2; }
}
@media (max-width: 340px) {
  .mat-stats { grid-template-columns: minmax(0, 1fr); }
  .mat-stats > .mat-stat:last-child:nth-child(odd) { grid-column-end: auto; }
}

/* ---- 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-card-radius, var(--mat-radius-lg)) var(--mat-card-radius, 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%; }

/* ---- Touch targets (MOBILE-04): a small button that sits inside something larger (the X of a chip or an alert) keeps its look and is a target of 44 px on a touch screen.
   The target is a centred ::before (no layout moves; the ::after of an element with data-tip is its tooltip); the rows of chips are 44 px apart, so the targets of two rows do not overlap. ---- */
@media (pointer: coarse) {
  /* a link in a list of keys and values: the row is 44 px (half of what the line lacks above and below it), the link has the padding of that room */
  .mat-kv > dd:has(a:not(.mat-btn)), .mat-kv > dt:has(+ dd a:not(.mat-btn)) { padding-block: max(0px, calc((44px - 1lh) / 2)); }
  .mat-kv dd a:not(.mat-btn) { padding: 12px 4px; margin: -12px -4px; }
  .mat-chip__x, .mat-alert__close { position: relative; }
  .mat-chip__x::before, .mat-alert__close::before { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
}

/* ==========================================================================
   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); }

/* @prop input | --mat-input-radius | length | var(--mat-radius) | Corner radius of a text field, a select and a text area, and of the ends of an input group, a button in it included. */
/* @prop input | --mat-input-height | length | var(--mat-control-h) | Least height of a field of the default size. A floor: on a touch screen keep it at 44 px or more (MOBILE-04). */
/* @prop input | --mat-input-pad-x | length | var(--mat-space-3) | Space between the edge of a field and its text. */
/* @prop input | --mat-input-border-width | length | 1px | Width of the border of a field. */
.mat-input, .mat-select, .mat-textarea {
  width: 100%;
  min-height: var(--mat-input-height, var(--mat-control-h));
  padding: 0 var(--mat-input-pad-x, var(--mat-space-3));
  background: var(--mat-surface);
  color: var(--mat-text);
  border: var(--mat-input-border-width, 1px) solid var(--mat-border-strong);
  border-radius: var(--mat-input-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) var(--mat-input-pad-x, 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-input-radius, var(--mat-radius)); border-bottom-left-radius: var(--mat-input-radius, var(--mat-radius)); }
.mat-input-group > :last-child { border-top-right-radius: var(--mat-input-radius, var(--mat-radius)); border-bottom-right-radius: var(--mat-input-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-20): 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. */
/* @prop check | --mat-check-size | length | 18px | Width and height of a checkbox and of a radio button (also in a choice, in a sort option and in a table row). */
/* @prop check | --mat-check-gap | length | var(--mat-space-3) | Space between a checkbox or a radio button and its label. */
.mat-check { display: flex; align-items: flex-start; gap: var(--mat-check-gap, var(--mat-space-3)); min-height: var(--mat-control-h-sm); cursor: pointer; }
.mat-check input { width: var(--mat-check-size, 18px); height: var(--mat-check-size, 18px); margin: 2px 0 0; accent-color: var(--mat-accent); flex: none; cursor: pointer; }
.mat-check__text { display: flex; flex-direction: column; gap: 2px; }
/* On a touch screen the label is the target and it is 44 px high (MOBILE-04), whatever --mat-check-size draws: the mark stays on the first line of the text, the label gets the
   space above and below it (half of what the line lacks of 44 px). A check without text (in a card head) takes the space with a negative margin, so nothing around it moves. */
@media (pointer: coarse) {
  .mat-check { min-height: 44px; padding-block: max(0px, calc((44px - 1lh) / 2)); }
  .mat-card__head .mat-check { min-height: 0; padding: 13px; margin: -13px; }
}

.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; }
/* On a touch screen the label is the target: 44 px high, and 44 px wide where it is only the track (a switch without text). The track stays centred and keeps its size. */
@media (pointer: coarse) { .mat-switch { min-height: 44px; } .mat-switch--bare { min-width: 44px; justify-content: center; } }
/* The knob sits centred in the track: its distance from the edge is half of what the track has more than the knob, so the way it travels is the width less the height. */
/* @prop switch | --mat-switch-width | length | 42px | Length of the track of a switch. */
/* @prop switch | --mat-switch-height | length | 24px | Height of the track of a switch. */
/* @prop switch | --mat-switch-thumb | length | 18px | Diameter of the knob of a switch (smaller than the height of the track). */
.mat-switch__track {
  flex: none; position: relative;
  width: var(--mat-switch-width, 42px); height: var(--mat-switch-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: calc((var(--mat-switch-height, 24px) - var(--mat-switch-thumb, 18px)) / 2); left: calc((var(--mat-switch-height, 24px) - var(--mat-switch-thumb, 18px)) / 2);
  width: var(--mat-switch-thumb, 18px); height: var(--mat-switch-thumb, 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(calc(var(--mat-switch-width, 42px) - var(--mat-switch-height, 24px))); }
.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; }
/* On a touch screen a button is 44 px wide at least, and 44 px high: the ::before reaches over the padding of the track (MOBILE-04); the track keeps its size. */
@media (pointer: coarse) {
  .mat-seg__btn { position: relative; min-width: 44px; justify-content: center; }
  .mat-seg__btn::before { content: ""; position: absolute; inset: min(0px, calc((var(--mat-control-h) - 8px - 44px) / 2)) 0; }
}
.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-input-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-input-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: var(--mat-check-size, 18px); height: var(--mat-check-size, 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); }

/* ---- The type of a field on a touch screen (MOBILE-06) ----
   iOS Safari zooms into a field whose type is under 16 px when it takes the focus, and the page stays zoomed. So on a touch screen every field has 16 px type or more; with a mouse nothing changes.
   A field takes the size of what it stands in (15 px in the body), so max(1rem, 1em) never makes one smaller than its context gave it. The small size is raised to 16 px as well (its 36 px height
   stays), the large one keeps 17 px. This block stands after the sizes of the field, of the input group and of the stepper, whose rules have the same weight. The fields that the script draws have
   their rules next to them: the search field and the tags in matui.pickers.css, the field of a row in matui.lists.css. */
@media (pointer: coarse) {
  .mat-input, .mat-select, .mat-textarea { font-size: max(1rem, 1em); }
  .mat-input--sm, .mat-select--sm, .mat-input-group--sm .mat-input, .mat-input-group--sm .mat-select { font-size: 1rem; }
  .mat-input--lg, .mat-select--lg, .mat-input-group--lg .mat-input, .mat-input-group--lg .mat-select { font-size: max(1rem, var(--mat-fs-lg)); }
  /* the buttons and the unit of a number stepper are in the size of its field */
  .mat-stepper:has(> .mat-input--sm) { font-size: 1rem; }
  .mat-stepper:has(> .mat-input--lg) { font-size: max(1rem, 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; }
/* room at the start only for an icon that stands there: the eye of a password field is at the end and the field starts like every field */
.mat-input-icon > .mat-input:where(.mat-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; }

/* ---- File upload (FORM-21): a drop zone and the list of the files that were chosen ----
   .mat-upload[data-upload] wraps the real file input (.mat-upload__input), which is what is validated and posted. Without the script it is the file field of the browser;
   matui.js hides it (.is-ready) and draws the zone (.mat-upload__zone: the icon, the button .mat-upload__browse and the limits), the list (.mat-upload__list of
   .mat-upload__item with a thumbnail, the name, the size or the progress, and a remove button) and the line of refused files (.mat-upload__status).
   The button is the one Tab stop of the zone; its ::after covers the whole zone, so a click anywhere in the zone is a click on the button. A file that is dragged over the
   control gives the whole zone a tint and a line all around it (COLOR-08). Nothing is wider than the control, and the targets are as large as any control on a touch screen. */
.mat-upload { position: relative; display: block; min-width: 0; max-width: 100%; }
.mat-upload__input {
  display: block; width: 100%; min-height: var(--mat-control-h); padding: var(--mat-space-2) 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: inherit; font-size: var(--mat-fs-sm);
}
.mat-upload__input::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-upload__input:focus { border-color: var(--mat-accent); box-shadow: var(--mat-focus-ring); outline: none; }
.mat-upload__input:disabled { background: var(--mat-surface-3); color: var(--mat-text-muted); cursor: not-allowed; }
/* with the script the real input lies over the control, invisible, so that a message of the browser points at the right place; whoever focuses it lands on the button */
.mat-upload.is-ready > .mat-upload__input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }

.mat-upload__zone {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: var(--mat-space-1);
  padding: var(--mat-space-6) var(--mat-space-4);
  background: var(--mat-surface-2); color: var(--mat-text-muted);
  border: 2px dashed var(--mat-border-strong); border-radius: var(--mat-radius-lg);
  text-align: center;
  transition: border-color var(--mat-dur-fast) var(--mat-ease), background var(--mat-dur-fast) var(--mat-ease);
}
.mat-upload__zone > .mat-icon { font-size: 1.75rem; color: var(--mat-accent-text); }
.mat-upload__browse { position: static; min-height: var(--mat-control-h); margin: 0; padding: 0 var(--mat-space-2); background: transparent; border: 0; color: var(--mat-text); font-size: var(--mat-fs-md); font-weight: 600; cursor: pointer; }
.mat-upload__browse::after { content: ""; position: absolute; inset: 0; border-radius: var(--mat-radius-lg); }
.mat-upload__browse:focus-visible { outline: none; }
.mat-upload__title { overflow-wrap: anywhere; }
.mat-upload__limits { max-width: 100%; font-size: var(--mat-fs-xs); color: var(--mat-text-muted); overflow-wrap: anywhere; }
.mat-upload__limits[hidden] { display: none; }
.mat-upload__zone:hover { border-color: var(--mat-accent); background: var(--mat-surface-3); }
.mat-upload__zone:has(.mat-upload__browse:focus-visible) { border-color: var(--mat-accent); box-shadow: var(--mat-focus-ring); }
/* a file over the control: a tint behind the zone and the line all around it, now a solid one */
.mat-upload.is-drag .mat-upload__zone { border-style: solid; border-color: var(--mat-accent); background: var(--mat-accent-soft); color: var(--mat-text); }
.mat-upload.is-disabled .mat-upload__zone { background: var(--mat-surface-3); border-color: var(--mat-border); }
.mat-upload.is-disabled .mat-upload__zone > .mat-icon { color: var(--mat-text-faint); }
.mat-upload__browse:disabled { color: var(--mat-text-muted); cursor: not-allowed; }
/* the message and the border in the colour of the meaning (FORM-03) */
.mat-field.is-invalid .mat-upload__input, .mat-field.is-invalid .mat-upload__zone, .mat-upload.is-invalid .mat-upload__zone { border-color: var(--mat-danger); }
.mat-field.is-invalid .mat-upload__zone:has(.mat-upload__browse:focus-visible), .mat-upload.is-invalid .mat-upload__zone:has(.mat-upload__browse:focus-visible) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mat-danger) 35%, transparent); }

/* compact: one row, for a form with little room */
.mat-upload--compact .mat-upload__zone { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: var(--mat-space-1) var(--mat-space-3); padding: var(--mat-space-2) var(--mat-space-4); text-align: left; }
.mat-upload--compact .mat-upload__zone > .mat-icon { font-size: 1.25rem; }
.mat-upload--compact .mat-upload__browse { padding-inline: 0; font-size: var(--mat-fs-sm); text-align: left; }
.mat-upload--compact .mat-upload__limits { margin-left: auto; }

/* the chosen files */
.mat-upload__list { display: flex; flex-direction: column; gap: var(--mat-space-2); margin: var(--mat-space-3) 0 0; padding: 0; list-style: none; }
.mat-upload__list[hidden] { display: none; }
.mat-upload__item {
  display: flex; align-items: center; gap: var(--mat-space-3); min-width: 0; min-height: 3.5rem;
  padding: var(--mat-space-2) var(--mat-space-2) var(--mat-space-2) var(--mat-space-3);
  background: var(--mat-surface); border: 1px solid var(--mat-border); border-radius: var(--mat-radius);
}
.mat-upload__item.is-error { background: var(--mat-danger-bg); border-color: var(--mat-danger); }
.mat-upload__thumb { flex: none; display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden; background: var(--mat-surface-3); color: var(--mat-text-muted); border-radius: var(--mat-radius-sm); font-size: 1.25rem; }
.mat-upload__thumb > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mat-upload__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mat-upload__name { font-size: var(--mat-fs-sm); font-weight: 600; color: var(--mat-text); overflow-wrap: anywhere; }
.mat-upload__meta { font-size: var(--mat-fs-xs); color: var(--mat-text-muted); font-variant-numeric: tabular-nums; }
.mat-upload__state { display: inline-flex; align-items: center; gap: var(--mat-space-1); color: var(--mat-success-text); font-weight: 600; }
.mat-upload__bar { display: block; height: 4px; margin-top: var(--mat-space-1); overflow: hidden; background: var(--mat-surface-3); border-radius: var(--mat-radius-pill); }
.mat-upload__bar[hidden] { display: none; }
.mat-upload__fill { display: block; width: var(--mat-up-progress, 0%); height: 100%; background: var(--mat-accent); border-radius: inherit; transition: width var(--mat-dur-fast) var(--mat-ease); }
.mat-upload__problem { display: flex; align-items: flex-start; gap: var(--mat-space-1); font-size: var(--mat-fs-xs); color: var(--mat-danger-text); }
.mat-upload__problem[hidden] { display: none; }
.mat-upload__problem > .mat-icon, .mat-upload__issues .mat-icon { flex: none; margin-top: .15em; }
.mat-upload__remove { flex: none; }

/* what was refused, in words: the live region is always there and takes no room while it is empty */
.mat-upload__status:not(:empty) { margin-top: var(--mat-space-2); }
.mat-upload__issues { display: flex; flex-direction: column; gap: var(--mat-space-1); margin: 0; padding: 0; list-style: none; }
.mat-upload__issues li { display: flex; align-items: flex-start; gap: var(--mat-space-1); font-size: var(--mat-fs-sm); color: var(--mat-danger-text); overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .mat-upload__zone { padding: var(--mat-space-5) var(--mat-space-3); }
  .mat-upload--compact .mat-upload__limits { flex-basis: 100%; margin-left: 0; }
}
/* a touch screen: the one button of the zone is as large as a prominent control (the buttons of the list are 44 px from the tokens) */
@media (pointer: coarse) { .mat-upload__browse { min-height: var(--mat-control-h-lg); } }
/* forced colours (a high-contrast mode) drop backgrounds: the list keeps its lines, the drag and the progress use the system colours */
@media (forced-colors: active) {
  .mat-upload__fill { background: Highlight; }
  .mat-upload__bar, .mat-upload__item { border: 1px solid CanvasText; }
  .mat-upload.is-drag .mat-upload__zone { border-color: Highlight; }
}

/* ---- 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; }
}

/* ---- Rating (FORM-22): stars, hearts or dots to choose a value, or to show an average ----
   Interactive: <fieldset class="mat-field mat-fieldset mat-rating" data-rating> with a native radio and its label per value, so a form posts it and, without the
   script, it is a row of radio buttons with their labels. The script marks it is-ready, which makes the radios and labels invisible (not hidden: they keep the focus,
   the keyboard and the screen reader) and draws the shapes over them. Read-only: .mat-rating--readonly with data-value, which the script draws.
   The shapes are two layers of the same row: the outline of every shape, and over it the filled shapes, clipped to --mat-rating-fill (a share of the whole row, which
   the script writes: 70% is three and a half of five). Every cell has the same width, so the share is exact; half of a cell is the middle of its shape.
   --mat-rating-max is the number of shapes. Sizes mat-rating--sm and --lg; the shape is mat-rating--heart or --dot (the star is the default). */
.mat-rating { --mat-rating-icon: 22px; --mat-rating-h: var(--mat-control-h); --mat-rating-w: var(--mat-rating-h); --mat-rating-fill: 0%; --mat-rating-max: 5; position: relative; min-width: 0; }
.mat-rating--sm { --mat-rating-icon: 16px; --mat-rating-h: var(--mat-control-h-sm); }
.mat-rating--lg { --mat-rating-icon: 30px; --mat-rating-h: var(--mat-control-h-lg); }
/* what is only shown is as high as its shape (a small gap around it), not as high as a control */
.mat-rating--readonly { --mat-rating-h: calc(var(--mat-rating-icon) + 4px); --mat-rating-w: var(--mat-rating-h); }
.mat-rating--readonly.mat-rating--sm { --mat-rating-icon: 14px; }

/* Without the script: the radio buttons of the browser in a row, each with its label */
fieldset.mat-rating:not(.is-ready) { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--mat-space-1) var(--mat-space-4); }
fieldset.mat-rating:not(.is-ready) > .mat-hint, fieldset.mat-rating:not(.is-ready) > .mat-error { flex: 0 0 100%; }
.mat-rating__input { margin: 0 var(--mat-space-1) 0 0; accent-color: var(--mat-accent); }
.mat-rating__label { font-size: var(--mat-fs-sm); color: var(--mat-text); }

/* With the script: the radios and their labels are invisible and stay where they are */
.mat-rating.is-ready > .mat-rating__input, .mat-rating.is-ready > .mat-rating__label {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; opacity: 0;
}

.mat-rating__body, .mat-rating--readonly { display: inline-flex; align-items: center; gap: var(--mat-space-2); max-width: 100%; vertical-align: middle; }
.mat-rating__stars { position: relative; display: inline-block; max-width: 100%; line-height: 0; touch-action: manipulation; border-radius: var(--mat-radius); }
.mat-rating.is-ready:not(.mat-rating--readonly) .mat-rating__stars { cursor: pointer; }
/* the first shape lines up with the label above it, not with the edge of its target */
.mat-rating__stars { margin-inline-start: calc((var(--mat-rating-w) - var(--mat-rating-icon)) / -2); }
.mat-rating__layer { display: grid; grid-template-columns: repeat(var(--mat-rating-max), minmax(0, var(--mat-rating-w))); }
.mat-rating__layer--empty { color: var(--mat-text-muted); }
.mat-rating__layer--fill { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--mat-rating-fill)) 0 0); pointer-events: none; color: var(--mat-accent); }
.mat-rating__cell { display: flex; align-items: center; justify-content: center; height: var(--mat-rating-h); min-width: 0; }
.mat-rating__icon { width: var(--mat-rating-icon); height: var(--mat-rating-icon); stroke-width: 1.75; vertical-align: top; }
.mat-rating__layer--fill .mat-rating__icon { fill: currentColor; }
/* On a touch screen a shape is a target as wide as it is high (MOBILE-04). A row that has no room for that many (ten dots on a phone) is set in two rows: the script
   sets is-wrapped and --mat-rating-cols (half of the shapes, rounded up), and the filled part is the first row up to its share and the second row up to its share. */
@media (pointer: coarse) {
  .mat-rating.is-wrapped {
    --mat-rating-top: min(100%, calc(var(--mat-rating-fill) * var(--mat-rating-max) / var(--mat-rating-cols)));
    --mat-rating-bottom: max(0%, calc(var(--mat-rating-fill) * var(--mat-rating-max) / var(--mat-rating-cols) - 100%));
  }
  .mat-rating.is-wrapped .mat-rating__layer { grid-template-columns: repeat(var(--mat-rating-cols), minmax(0, var(--mat-rating-w))); }
  .mat-rating.is-wrapped .mat-rating__layer--fill { clip-path: polygon(0 0, var(--mat-rating-top) 0, var(--mat-rating-top) 50%, var(--mat-rating-bottom) 50%, var(--mat-rating-bottom) 100%, 0 100%); }
}
/* a heart and a dot fill their square more than a star does: drawn a little smaller they look as large */
.mat-rating--heart .mat-rating__icon { width: calc(var(--mat-rating-icon) * .9); height: calc(var(--mat-rating-icon) * .9); }
.mat-rating--dot .mat-rating__icon { width: calc(var(--mat-rating-icon) * .8); height: calc(var(--mat-rating-icon) * .8); }

.mat-rating__value { min-width: 3ch; white-space: nowrap; font-size: var(--mat-fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--mat-text); }
.mat-rating__count { font-size: var(--mat-fs-sm); color: var(--mat-text-muted); font-variant-numeric: tabular-nums; }
.mat-rating--lg .mat-rating__value, .mat-rating--lg .mat-rating__count { font-size: var(--mat-fs-md); }
.mat-rating--readonly .mat-rating__value { min-width: 0; }

/* The keyboard focus is on a radio, which is invisible: the ring is drawn around the shapes */
.mat-rating:has(.mat-rating__input:focus-visible) .mat-rating__stars { box-shadow: var(--mat-focus-ring); }
/* An error at the field: the empty shapes take the colour of the error (the message says what is wrong) */
.mat-field.is-invalid .mat-rating__layer--empty { color: var(--mat-danger); }
/* Disabled (a fieldset can disable the radios): dimmed, and the pointer does nothing */
.mat-rating:disabled .mat-rating__stars { opacity: .5; cursor: not-allowed; }
.mat-rating:disabled .mat-rating__value, .mat-rating:disabled .mat-rating__count { color: var(--mat-text-muted); }

@media (forced-colors: active) {
  .mat-rating__layer--fill { color: Highlight; }
  .mat-rating__layer--empty { color: 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; }
/* a list from the server (data-source-url): how much is shown, Show more, Try again */
.mat-picker__source { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--mat-space-2); padding: var(--mat-space-2) var(--mat-space-3); }
.mat-picker__source:not(:has(> :not([hidden]))) { display: none; }
.mat-picker__source .mat-picker__status { min-height: 0; text-align: center; }
@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); }
}

/* ---- Select: create what is missing, and suggestions (FORM-16) ---- */
/* "Create <text>" is the first row of the list, a suggested name another: the plus where a picture would be, the words in the colour of a link. While the request runs the row is busy
   (aria-busy) and a ring turns where the plus was. A message under the search field says why it did not work. */
.mat-picker__create, .mat-picker__option--new { color: var(--mat-accent-text); }
.mat-picker__create .mat-picker__name, .mat-picker__option--new .mat-picker__name { font-weight: 650; }
.mat-picker__create[hidden] { display: none; }
.mat-picker__plus { flex: none; display: grid; place-items: center; width: 22px; height: 22px; }
.mat-picker__option.is-busy { cursor: progress; opacity: .75; }
.mat-picker__option.is-busy .mat-picker__plus > .mat-icon { display: none; }
.mat-picker__option.is-busy .mat-picker__plus::after { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: mat-spin .7s linear infinite; }
.mat-picker__create-msg { margin: 0; padding: var(--mat-space-1) var(--mat-space-4) var(--mat-space-2); color: var(--mat-danger-text); }
.mat-picker__create-msg[hidden] { display: none; }
/* Suggestions: a group with its heading above the whole list, which has the heading "All". The closed button counts them in the colour of a link. */
.mat-picker__group { display: flex; flex-direction: column; gap: 2px; }
.mat-picker__group[hidden] { display: none; }
.mat-picker__group-head { padding: var(--mat-space-2) var(--mat-space-3) var(--mat-space-1); font-size: var(--mat-fs-sm); font-weight: 650; color: var(--mat-text-muted); }
.mat-picker__group-head--all { margin-top: var(--mat-space-2); }
.mat-picker__group-head[hidden] { display: none; }
.mat-picker__value.is-suggest { color: var(--mat-accent-text); }
/* An option with a colour (data-colour, COLOR-10) has the dot before its name; the closed field shows it too. */
.mat-picker__option[data-colour].is-coloured::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--mat-swatch); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mat-text) 35%, transparent); }

/* ---- 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); }

/* ---- Search with suggestions (FORM-23, SHELL-20) ----
   A search field with a magnifier at its left and a clear button at its right, and a popup under it: the list of a combobox, drawn like the panels of the pickers (fixed, a line, a shadow).
   The input is a real one: without the script it is a plain search field in a form. The active option is a tint behind the whole row (COLOR-08), the part of a title that matches is
   bold and in the colour of a link, never a colour alone (COLOR-04). On a phone the focused field is a full-screen panel: the field and the X on top, the suggestions below. */
/* @prop search | --mat-search-radius | length | var(--mat-radius) | Corner radius of a search field. */
/* @prop search | --mat-search-height | length | var(--mat-control-h) | Least height of a search field. A floor: on a touch screen keep it at 44 px or more (MOBILE-04). */
.mat-search { position: relative; display: block; min-width: 0; width: 100%; }
.mat-search__bar { display: flex; align-items: center; gap: var(--mat-space-2); min-width: 0; }
.mat-search__field { position: relative; flex: 1 1 auto; display: flex; align-items: center; min-width: 0; }
.mat-search__input {
  width: 100%; min-width: 0;
  min-height: var(--mat-search-height, var(--mat-control-h));
  padding: 0 var(--mat-input-pad-x, var(--mat-space-3));
  background: var(--mat-surface); color: var(--mat-text);
  border: var(--mat-input-border-width, 1px) solid var(--mat-border-strong);
  border-radius: var(--mat-search-radius, var(--mat-radius));
  font: inherit;
  appearance: none; -webkit-appearance: none;
  transition: border-color var(--mat-dur-fast) var(--mat-ease), box-shadow var(--mat-dur-fast) var(--mat-ease);
}
.mat-search__input::placeholder { color: var(--mat-text-faint); }
.mat-search__input:hover { border-color: color-mix(in srgb, var(--mat-accent) 40%, var(--mat-border-strong)); }
.mat-search__input:focus { border-color: var(--mat-accent); box-shadow: var(--mat-focus-ring); outline: none; }
.mat-search__input:disabled { background: var(--mat-surface-3); color: var(--mat-text-muted); cursor: not-allowed; }
.mat-search__input::-webkit-search-decoration, .mat-search__input::-webkit-search-cancel-button { appearance: none; -webkit-appearance: none; display: none; }
.mat-field.is-invalid .mat-search__input { border-color: var(--mat-danger); }
/* with the script the field has room for the magnifier at its left and the clear button and the hint of the key at its right */
.mat-search.is-ready .mat-search__input { padding-left: calc(var(--mat-space-3) + 1.6rem); padding-right: 2.5rem; }
.mat-search.is-ready:has(.mat-search__key:not([hidden])) .mat-search__input { padding-right: 5rem; }
.mat-search__lens { position: absolute; left: var(--mat-space-3); top: 50%; transform: translateY(-50%); display: grid; color: var(--mat-text-muted); pointer-events: none; }
.mat-search__lens > .mat-icon { font-size: 1.1rem; }
.mat-search__clear {
  position: absolute; top: 50%; right: 6px; 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-search__clear:hover { background: var(--mat-surface-3); color: var(--mat-text); }
.mat-search__clear:focus-visible { outline: none; box-shadow: var(--mat-focus-ring); }
.mat-search__clear[hidden] { display: none; }
.mat-search__key { position: absolute; top: 50%; right: var(--mat-space-3); transform: translateY(-50%); pointer-events: none; white-space: nowrap; }
.mat-search__key[hidden] { display: none; }
.mat-search.is-filled .mat-search__key, .mat-search:focus-within .mat-search__key { display: none; }
@media (max-width: 900px) { .mat-search__key { display: none; } }
/* the X of the full-screen panel and the button that opens it in the header bar exist on a phone only */
.mat-search__close, .mat-search__open { display: none; }

/* ---- The popup ---- */
.mat-search__panel {
  position: fixed; z-index: var(--mat-z-menu);
  display: flex; flex-direction: column;
  max-width: calc(100vw - 16px); max-height: min(28rem, calc(100dvh - 16px));
  overflow: auto; overscroll-behavior: contain;
  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);
  animation: mat-picker-in var(--mat-dur-fast) var(--mat-ease);
}
.mat-search__panel[hidden] { display: none; }
.mat-search__list { display: flex; flex-direction: column; gap: 2px; padding: var(--mat-space-2); }
.mat-search__list:empty { display: none; }
.mat-search__group { display: flex; flex-direction: column; gap: 2px; }
.mat-search__group + .mat-search__group { margin-top: var(--mat-space-1); }
.mat-search__heading { padding: var(--mat-space-2) var(--mat-space-3) var(--mat-space-1); font-size: var(--mat-fs-sm); font-weight: 650; color: var(--mat-text-muted); }
.mat-search__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; text-decoration: none; cursor: pointer;
}
.mat-search__option:hover { background: var(--mat-surface-3); text-decoration: none; }
.mat-search__option.is-active, .mat-search__option.is-active:hover { background: var(--mat-accent-soft-strong); text-decoration: none; }
.mat-search__icon { flex: none; display: grid; place-items: center; width: 1.5rem; color: var(--mat-text-muted); }
.mat-search__icon > .mat-icon { font-size: 1.15rem; }
.mat-search__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mat-search__title { font-weight: 600; overflow-wrap: anywhere; }
.mat-search__desc { font-size: var(--mat-fs-sm); line-height: 1.4; color: var(--mat-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mat-search__kind { flex: none; padding: 0 var(--mat-space-2); border: 1px solid var(--mat-border); border-radius: var(--mat-radius-xs); font-size: var(--mat-fs-xs); line-height: 1.6; color: var(--mat-text-muted); }
.mat-search__hit { background: transparent; color: var(--mat-accent-text); font-weight: 750; }
.mat-search__option--all { margin-top: var(--mat-space-1); border-top: 1px solid var(--mat-border); border-radius: 0 0 var(--mat-radius-sm) var(--mat-radius-sm); color: var(--mat-accent-text); font-weight: 650; }
.mat-search__option--clear { color: var(--mat-text-muted); }
.mat-search__note { display: flex; align-items: center; gap: var(--mat-space-3); padding: var(--mat-space-3) var(--mat-space-4); color: var(--mat-text-muted); }
.mat-search__note[hidden] { display: none; }
.mat-search__note-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mat-search__note.is-error { color: var(--mat-danger-text); }
.mat-search__note.is-error .mat-search__icon { color: inherit; }
.mat-search.is-disabled .mat-search__key { opacity: .5; }

/* ---- A phone: the focused field is the whole screen, the field and the X on top ---- */
@media (max-width: 640px) {
  .mat-search__input { font-size: 1rem; }
  .mat-search.is-full {
    position: fixed; inset: 0; z-index: var(--mat-z-menu);
    display: flex; flex-direction: column; width: auto;
    background: var(--mat-surface);
    padding-top: var(--mat-safe-top); padding-bottom: var(--mat-safe-bottom);
  }
  .mat-search.is-full .mat-search__bar { flex: none; padding: var(--mat-space-2) var(--mat-space-2) var(--mat-space-2) var(--mat-space-3); border-bottom: 1px solid var(--mat-border); }
  .mat-search.is-full .mat-search__close { display: inline-flex; flex: none; }
  .mat-search.is-full .mat-search__panel {
    position: static; flex: 1 1 auto; min-height: 0; width: auto; max-width: none; max-height: none;
    border: 0; border-radius: 0; box-shadow: none; animation: none;
  }
  .mat-search.is-full .mat-search__list { padding: var(--mat-space-3); }
  .mat-search.is-full .mat-search__option { padding: var(--mat-space-3); }
}

/* ---- Touch targets (MOBILE-04): a row is 44 px high, and the small clear button keeps its look and has a centred target of 44 px ---- */
@media (pointer: coarse) {
  .mat-search__option { min-height: 44px; }
  .mat-search__clear::before { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
}

@media (forced-colors: active) {
  .mat-search__option.is-active { outline: 2px solid Highlight; outline-offset: -2px; }
  .mat-search__hit { text-decoration: underline; }
}

/* ---- 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); }

/* ---- Touch targets (MOBILE-04): in the panels of the pickers everything that is pressed is 44 px on a touch screen. The rows and cells grow; a small button inside a field keeps
   its look and gets a centred ::before as its target; a swatch is drawn in the middle of its 44 px cell; the hue slider is 44 px high and draws its 14 px track in the middle. ---- */
@media (pointer: coarse) {
  .mat-picker__option, .mat-picker__all { min-height: 44px; }
  .mat-picker__clear::before { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
  .mat-cal__day { height: 44px; }
  .mat-cal__title--button { min-height: 44px; }
  .mat-timecol__item { height: 44px; }
  .mat-colour__swatches { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 0; }
  .mat-colour__swatch { aspect-ratio: auto; height: 44px; background: transparent; box-shadow: none; }
  .mat-colour__swatch::before { content: ""; position: absolute; inset: 7px; border-radius: var(--mat-radius-sm); background: var(--mat-swatch); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mat-text) 20%, transparent); }
  .mat-colour__swatch > .mat-icon { position: relative; }
  .mat-colour__swatch:focus-visible { box-shadow: none; }
  .mat-colour__swatch:focus-visible::before { box-shadow: 0 0 0 2px var(--mat-surface), 0 0 0 4px var(--mat-text); }
  .mat-colour__hue { box-sizing: border-box; height: 44px; padding-block: 15px; background-clip: content-box; }
}
@media (pointer: coarse) and (min-width: 641px) { .mat-cal__month { min-width: 308px; } }

/* ---- The type of a field on a touch screen (MOBILE-06): the search field and the text field of the tags have `font: inherit`, so they are raised to 16 px here, after their own rules
   (the rest is in matui.forms.css). max(1rem, 1em) never makes one smaller than the size of what it stands in. ---- */
@media (pointer: coarse) {
  .mat-search__input, .mat-tagfield__input { font-size: max(1rem, 1em); }
}

/* ==========================================================================
   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, .mat-list > .mat-itemlist { 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; }
  /* On a phone a toolbar with a search field is one row, like the search bar of a phone app: the field takes the room and the buttons at its right end
     are icons only (their name stays for screen readers, the number of filters is a badge on the icon); the count goes under the row. */
  .mat-toolbar__search { flex: 1 1 0; max-width: none; }
  .mat-toolbar__search ~ .mat-toolbar__spacer { display: none; }
  .mat-toolbar:has(> .mat-toolbar__search) .mat-toolbar__btn:has(> .mat-icon) { position: relative; padding: 0; width: var(--mat-btn-height, var(--mat-control-h)); }
  .mat-toolbar:has(> .mat-toolbar__search) .mat-toolbar__btn:has(> .mat-icon) > span:not(.mat-badge) {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .mat-toolbar:has(> .mat-toolbar__search) .mat-toolbar__btn > .mat-badge { position: absolute; top: -4px; right: -4px; box-shadow: 0 0 0 2px var(--mat-surface); }
}

/* ---- Table ---- */
/* @prop table | --mat-table-radius | length | var(--mat-radius-lg) | Corner radius of the frame around a table. */
/* @prop table | --mat-table-pad-x | length | var(--mat-space-4) | Space at the sides between the edge of a cell and its content (also in the card a row becomes on a phone). */
/* @prop table | --mat-table-pad-y | length | var(--mat-space-3) | Space above and below the content of a cell (a compact table keeps its own). */
/* @prop table | --mat-table-font-size | length | var(--mat-fs-sm) | Size of the text in a table, the headings included. */
/* @prop table | --mat-table-head-font-weight | number | 600 | Weight of the letters of the column headings. */
.mat-table-wrap {
  overflow-x: auto;
  background: var(--mat-surface);
  border: 1px solid var(--mat-border);
  border-radius: var(--mat-table-radius, var(--mat-radius-lg));
  box-shadow: var(--mat-shadow-1);
}
/* A table that fills a card (straight under the card, or alone in the body of a flush card): the card is its frame, so the table drops its own -
   two 1 px edges side by side read as a thick, doubled line. Its last row keeps inside the card's round corners. */
.mat-card > .mat-table-wrap,
.mat-card--flush > .mat-card__body > .mat-table-wrap:only-child { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.mat-card > .mat-table-wrap:last-child,
.mat-card--flush > .mat-card__body:last-child > .mat-table-wrap:only-child {
  border-bottom-left-radius: calc(var(--mat-card-radius, var(--mat-radius-lg)) - 1px);
  border-bottom-right-radius: calc(var(--mat-card-radius, var(--mat-radius-lg)) - 1px);
}
/* The empty state takes the place of the table or the gallery in a list: the same frame, so a list without rows keeps its shape and the way to fill it
   stands where the rows will be (LIST-11). Outside a list mat-empty--framed gives it the frame; in a card it needs none (the card is the frame). */
.mat-list > .mat-empty,
.mat-empty--framed {
  background: var(--mat-surface);
  border: 1px solid var(--mat-border);
  border-radius: var(--mat-table-radius, var(--mat-radius-lg));
  box-shadow: var(--mat-shadow-1);
}
/* An empty list that offers its first item in the empty state (mat-empty--first) does not show the same primary action again below it (LIST-11):
   the primary button of the actions row goes, the other actions stay, and a row with nothing else goes with it. An empty search (no modifier) keeps its actions. */
.mat-list:has(> .mat-empty--first) > .mat-actions > .mat-btn--primary { display: none; }
.mat-list:has(> .mat-empty--first) > .mat-actions:not(:has(> :not(.mat-btn--primary))) { display: none; }
.mat-table { width: 100%; border-collapse: collapse; font-size: var(--mat-table-font-size, var(--mat-fs-sm)); }
.mat-table caption { text-align: left; padding: var(--mat-table-pad-y, var(--mat-space-3)) var(--mat-table-pad-x, var(--mat-space-4)); color: var(--mat-text-muted); }
.mat-table th {
  padding: var(--mat-table-pad-y, var(--mat-space-3)) var(--mat-table-pad-x, var(--mat-space-4));
  text-align: left;
  font-size: var(--mat-table-font-size, var(--mat-fs-sm));
  font-weight: var(--mat-table-head-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-table-pad-y, var(--mat-space-3)) var(--mat-table-pad-x, var(--mat-space-4)); border-top: 1px solid var(--mat-border); vertical-align: middle; }
/* Density compact with a mouse (data-density="compact", the tokens are in matui.tokens.css): tighter cells. :where() keeps the weight of the rule
   above, so a table variant (mat-table--compact) still wins and an app's --mat-table-pad-* still applies. */
@media (pointer: fine) {
  :where(:root[data-density="compact"]) .mat-table :is(caption, th, td) { padding: var(--mat-table-pad-y, 9px) var(--mat-table-pad-x, 14px); }
}
.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; }
/* A table that is wider than its frame above 720 px leaves out the columns the phone leaves out (mat-hide-sm), the last one first, until it fits (TABLE-02,
   the script marks their cells is-col-hidden); it scrolls sideways only with data-table-scroll on the frame (TABLE-04: a table that cannot become cards). */
.mat-table .is-col-hidden { display: none; }

/* 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-table-pad-y, var(--mat-space-3)) var(--mat-table-pad-x, 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-family: var(--mat-font); 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; }
  /* The card of a row with actions reads like a phone list: its first cell (the name) is the title, without its label, and the actions stand at its right
     end in the same line; the other cells follow under it with their labels. A grouped table and a selectable row keep the plain card. */
  .mat-table > tbody:not(.mat-group) > tr:has(> td.mat-table__cell-actions):not(:has(> td.mat-table__select, > td.mat-table__primary)) {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--mat-space-3); align-items: center;
  }
  .mat-table > tbody:not(.mat-group) > tr:has(> td.mat-table__cell-actions):not(:has(> td.mat-table__select, > td.mat-table__primary)) > td { grid-column: 1 / -1; }
  .mat-table > tbody:not(.mat-group) > tr:has(> td.mat-table__cell-actions):not(:has(> td.mat-table__select, > td.mat-table__primary)) > td:first-child {
    grid-column: 1; grid-row: 1; justify-content: flex-start; font-weight: 600; text-align: left;
  }
  .mat-table > tbody:not(.mat-group) > tr:has(> td.mat-table__cell-actions):not(:has(> td.mat-table__select, > td.mat-table__primary)) > td:first-child::before { content: none; }
  .mat-table > tbody:not(.mat-group) > tr:has(> td.mat-table__cell-actions):not(:has(> td.mat-table__select, > td.mat-table__primary)) > td.mat-table__cell-actions { grid-column: 2; grid-row: 1; width: auto; padding: 0; }
  /* A record card (TABLE-02): a row whose primary cell (mat-table__primary, the name that opens the record) is marked. The primary cell is the title with a
     chevron, and its link covers the whole card, so a tap anywhere opens the record. The other cells follow in one flowing line, without their labels on the
     screen (a screen reader still reads them); the actions stand in a row of their own below, each with its text (the data-tip of an icon button).
     Links and buttons in the other cells stay above the covering link. A grouped table and a selectable row keep the plain card. */
  .mat-table > tbody:not(.mat-group) > tr:has(> td.mat-table__primary):not(:has(> td.mat-table__select)) {
    position: relative; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--mat-space-3); row-gap: var(--mat-space-1);
  }
  .mat-table > tbody:not(.mat-group) > tr:has(> td.mat-table__primary):not(:has(> td.mat-table__select)) > td {
    display: block; width: auto; min-width: 0; padding: 0; text-align: left; color: var(--mat-text-muted);
  }
  .mat-table > tbody:not(.mat-group) > tr:has(> td.mat-table__primary):not(:has(> td.mat-table__select)) > td:empty { display: none; }
  .mat-table > tbody:not(.mat-group) > tr:has(> td.mat-table__primary):not(:has(> td.mat-table__select)) > td::before {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  /* a value that says nothing without its column (an open sum, the next date) keeps its label in front of it: mat-table__keep-label */
  .mat-table > tbody:not(.mat-group) > tr:has(> td.mat-table__primary):not(:has(> td.mat-table__select)) > td.mat-table__keep-label::before {
    position: static; width: auto; height: auto; overflow: visible; clip-path: none; margin-right: var(--mat-space-1);
  }
  .mat-table > tbody:not(.mat-group) > tr:has(> td.mat-table__primary):not(:has(> td.mat-table__select)) > td.mat-table__primary {
    order: -1; flex: 1 1 100%; color: var(--mat-text); font-size: var(--mat-fs-md); font-weight: 600;
  }
  /* the chevron has a column of its own on the right: no cell of the card runs into it */
  .mat-table > tbody:not(.mat-group) > tr:has(> td.mat-table__primary a[href]):not(:has(> td.mat-table__select)) { padding-right: calc(var(--mat-table-pad-x, var(--mat-space-4)) + var(--mat-space-6)); }
  .mat-table > tbody:not(.mat-group) > tr:has(> td.mat-table__primary):not(:has(> td.mat-table__select)) > td.mat-table__primary::before { content: none; }
  .mat-table > tbody:not(.mat-group) > tr:has(> td.mat-table__primary a[href]):not(:has(> td.mat-table__select)) > td.mat-table__primary::after {
    content: ""; position: absolute; top: 50%; right: var(--mat-table-pad-x, var(--mat-space-4)); width: .5rem; height: .5rem;
    border-right: 2px solid var(--mat-text-faint); border-bottom: 2px solid var(--mat-text-faint); translate: 0 -50%; rotate: -45deg; pointer-events: none;
  }
  .mat-table > tbody:not(.mat-group) > tr:has(> td.mat-table__primary):not(:has(> td.mat-table__select)) > td.mat-table__primary a[href] { color: inherit; text-decoration: none; }
  .mat-table > tbody:not(.mat-group) > tr:has(> td.mat-table__primary):not(:has(> td.mat-table__select)) > td.mat-table__primary a[href]::after { content: ""; position: absolute; inset: 0; }
  .mat-table > tbody:not(.mat-group) > tr:has(> td.mat-table__primary):not(:has(> td.mat-table__select)) > td:not(.mat-table__primary) :is(a[href], button, input, select, textarea, label, summary) {
    position: relative; z-index: 1;
  }
  .mat-table > tbody:not(.mat-group) > tr:has(> td.mat-table__primary):not(:has(> td.mat-table__select)) > td.mat-table__cell-actions { order: 1; flex: 1 1 100%; padding-top: var(--mat-space-1); }
  .mat-table > tbody:not(.mat-group) > tr:has(> td.mat-table__primary):not(:has(> td.mat-table__select)) .mat-table__actions { justify-content: flex-start; flex-wrap: wrap; gap: var(--mat-space-2); margin-left: calc(var(--mat-space-3) * -1); }
  .mat-table > tbody:not(.mat-group) > tr:has(> td.mat-table__primary):not(:has(> td.mat-table__select)) .mat-table__actions .mat-btn--icon[data-tip] {
    width: auto; padding: 0 var(--mat-space-3); gap: var(--mat-space-2);
  }
  .mat-table > tbody:not(.mat-group) > tr:has(> td.mat-table__primary):not(:has(> td.mat-table__select)) .mat-table__actions .mat-btn--icon[data-tip]::after {
    content: attr(data-tip); display: inline; position: static; translate: none; padding: 0; border-radius: 0;
    background: none; color: inherit; font-size: var(--mat-fs-sm); font-weight: 600; opacity: 1; z-index: auto;
  }
}

/* ---- 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); }
/* A button of the pager is a control of its own on a touch screen (MOBILE-04): 44 px, and the rows of a pager that wraps are as far apart. */
@media (pointer: coarse) { .mat-pager__btn { min-width: 44px; height: 44px; } }

/* ---- 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) ---- */
/* @prop tabs | --mat-tabs-height | length | var(--mat-control-h) | Least height of a tab of the underline style. A floor: on a touch screen keep it at 44 px or more (MOBILE-04). */
/* @prop tabs | --mat-tabs-pad-x | length | var(--mat-space-4) | Space between the edge of a tab and its label. */
/* @prop tabs | --mat-tabs-gap | length | var(--mat-space-1) | Space between two tabs. */
/* @prop tabs | --mat-tabs-indicator-width | length | 2px | Thickness of the line under the current tab. */
/* @prop tabs | --mat-tabs-font-weight | number | 600 | Weight of the letters of a tab. */
/* The line under the tabs is an inset shadow inside the bar, not a border below it: the line under the current tab lies on it without a negative margin, so the bar,
   which scrolls sideways on a narrow screen (overflow-x), has nothing that stands out of it below and never scrolls up and down (overflow-y: hidden). */
.mat-tabs { display: flex; gap: var(--mat-tabs-gap, var(--mat-space-1)); box-shadow: inset 0 -1px 0 var(--mat-border); overflow-x: auto; overflow-y: hidden; }
.mat-tab {
  display: inline-flex; align-items: center; gap: var(--mat-space-2);
  min-height: var(--mat-tabs-height, var(--mat-control-h)); padding: 0 var(--mat-tabs-pad-x, var(--mat-space-4));
  border: 0; border-bottom: var(--mat-tabs-indicator-width, 2px) solid transparent; border-radius: 0;
  background: transparent; color: var(--mat-text-muted);
  font-weight: var(--mat-tabs-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. ---- */
/* @prop menu | --mat-menu-radius | length | var(--mat-radius-lg) | Corner radius of a context menu. */
/* @prop menu | --mat-menu-pad | length | var(--mat-space-2) | Space between the edge of a context menu and its items. */
.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-menu-pad, var(--mat-space-2));
  background: var(--mat-surface);
  border: 1px solid var(--mat-border-strong);
  border-radius: var(--mat-menu-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; }
/* @prop menu | --mat-menu-item-radius | length | var(--mat-radius-sm) | Corner radius of an item of a context menu. */
/* @prop menu | --mat-menu-item-height | length | var(--mat-control-h) | Least height of an item of a context menu. A floor: on a touch screen keep it at 44 px or more (MOBILE-04). */
/* @prop menu | --mat-menu-item-pad-x | length | var(--mat-space-3) | Space between the edge of an item of a context menu and its content. */
.mat-menu__item {
  display: flex; align-items: center; gap: var(--mat-space-3);
  width: 100%; min-height: var(--mat-menu-item-height, var(--mat-control-h));
  padding: 0 var(--mat-menu-item-pad-x, var(--mat-space-3));
  border: 0; border-radius: var(--mat-menu-item-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: var(--mat-check-size, 18px); height: var(--mat-check-size, 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; }
/* An item that is not a table row (a card, the row of a list: data-select-item) is marked like a row when its check is ticked: a tint behind the whole item and the accent
   colour for its line, like a ticked .mat-choice, never a bar at one side (COLOR-08). A .mat-tile has its own mark (above). */
[data-select-item].is-selected { background: var(--mat-accent-soft); border-color: var(--mat-accent); }

/* ---- Pills and vertical tabs; tabs that fill the width ---- */
.mat-tabs--pills { gap: var(--mat-space-2); box-shadow: none; }
.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; box-shadow: none; 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); }

/* ---- Lists of rows (LIST-15): the list, its rows and what goes into a row ----
   <ul class="mat-itemlist"> of <li class="mat-item">. A row is .mat-item__main (a link, a button, a label or plain text) with a lead (an avatar, an icon tile, a thumbnail or a check), a body
   (a title and the lines under it) and an end (a note, a count, a value and the arrow). What else has to be pressed (a switch, a button, the handle) is .mat-item__aside beside it, never inside
   a link. Without the script it is a list: the lines, the states and the links work, and the actions of a row stand at its end as buttons. With data-itemlist the script adds sliding actions,
   reordering, a filter and the selection of rows. --mat-item-lead is the width of the lead and --mat-item-inset where the lines between the rows begin. */
.mat-itemlist {
  --mat-item-pad: var(--mat-space-4);
  --mat-item-gap: var(--mat-space-3);
  --mat-item-lead: 40px;
  --mat-item-h: max(44px, var(--mat-control-h-lg));
  --mat-item-inset: 0px;
  --mat-item-line: var(--mat-border);
  list-style: none; min-width: 0; margin: 0; padding: 0;
  background: var(--mat-surface);
  border-block: 1px solid var(--mat-border);
}
/* the grouped card; clip (not hidden) keeps the sticky dividers working, because it makes no scroll container */
.mat-itemlist--inset { border: 1px solid var(--mat-border); border-radius: var(--mat-radius-lg); overflow: hidden; overflow: clip; }
.mat-itemlist--lines-inset { --mat-item-inset: calc(var(--mat-item-pad) + var(--mat-item-lead) + var(--mat-item-gap)); }
.mat-itemlist--lines-none { --mat-item-line: transparent; }
.mat-itemlist--lead-lg { --mat-item-lead: 56px; }
.mat-itemlist--compact { --mat-item-h: 40px; }
.mat-itemlist--compact .mat-item__main { padding-block: var(--mat-space-1); }
.mat-itemlist--scroll { max-height: 22rem; overflow-y: auto; overscroll-behavior: contain; }
.mat-itemlist__group { list-style: none; }
.mat-itemlist__group[hidden] { display: none; }
.mat-itemlist__items { list-style: none; margin: 0; padding: 0; }
/* the header of a whole list (a heading above it) and the dividers inside it; a divider can stay at the top while its rows pass */
.mat-itemlist__header { margin: 0; padding: 0 var(--mat-space-4) var(--mat-space-2); color: var(--mat-text-muted); font-size: var(--mat-fs-sm); font-weight: 600; line-height: var(--mat-lh-tight); }
.mat-itemlist__divider {
  display: flex; align-items: center; gap: var(--mat-space-2);
  min-height: var(--mat-control-h-sm);
  margin: 0; padding: var(--mat-space-1) var(--mat-item-pad);
  list-style: none;
  background: var(--mat-surface-2); color: var(--mat-text-muted);
  border-bottom: 1px solid var(--mat-border);
  font-size: var(--mat-fs-sm); font-weight: 600; line-height: var(--mat-lh-tight);
}
.mat-itemlist__group ~ .mat-itemlist__group > .mat-itemlist__divider, .mat-item ~ .mat-itemlist__divider { border-top: 1px solid var(--mat-border); }
/* a divider that holds a row (the select-all check of a list) has the row of a row: the check is where the checks of the rows are */
.mat-itemlist__divider:has(> .mat-item__main) { padding: 0; }
.mat-itemlist__divider > .mat-item__main { min-height: var(--mat-control-h); padding-block: 0; }
.mat-itemlist__divider .mat-item__title { color: inherit; font-weight: inherit; }
.mat-itemlist--sticky .mat-itemlist__divider { position: sticky; top: var(--mat-itemlist-top, 0px); z-index: 1; }
.mat-itemlist__empty { list-style: none; padding: var(--mat-space-6) var(--mat-item-pad); color: var(--mat-text-muted); text-align: center; }
.mat-itemlist__empty[hidden] { display: none; }
.mat-itemlist__empty:has(> .mat-empty) { padding: 0; }

/* a row: the line under it is drawn by the row, from the begin of the text when the list says so */
.mat-item { position: relative; display: flex; align-items: stretch; min-width: 0; list-style: none; }
.mat-item[hidden] { display: none; }
.mat-item::after { content: ""; position: absolute; left: var(--mat-item-inset); right: 0; bottom: 0; height: 1px; background: var(--mat-item-line); pointer-events: none; }
.mat-item:last-child::after, .mat-item:has(+ .mat-itemlist__divider)::after, .mat-item.is-dragging::after, .mat-item.is-picked::after { content: none; }
.mat-item__row { display: flex; flex: 1 1 auto; align-items: center; min-width: 0; }
.mat-item__main {
  position: relative;
  display: flex; flex: 1 1 auto; align-items: center; gap: var(--mat-item-gap);
  min-width: 0; min-height: var(--mat-item-h);
  margin: 0; padding: var(--mat-space-2) var(--mat-item-pad);
  border: 0; border-radius: 0; background: transparent;
  color: inherit; font: inherit; text-align: left; text-decoration: none;
}
.mat-item--top .mat-item__main { align-items: flex-start; }
/* pressed, hover and focus: a little of the text colour over whatever is behind (a selected row keeps its tint), and a ring inside the row, which nothing clips */
a.mat-item__main, button.mat-item__main, label.mat-item__main { cursor: pointer; transition: background var(--mat-dur-fast) var(--mat-ease); }
a.mat-item__main:hover, button.mat-item__main:hover, label.mat-item__main:hover { background: color-mix(in srgb, var(--mat-text) 5%, transparent); text-decoration: none; }
a.mat-item__main:active, button.mat-item__main:active, label.mat-item__main:active { background: color-mix(in srgb, var(--mat-text) 9%, transparent); }
.mat-item__main:focus-visible, .mat-item__main:has(:focus-visible), .mat-item--field:focus-within { border-radius: 0; box-shadow: inset 0 0 0 2px var(--mat-accent); }
.mat-item.is-disabled .mat-item__main, .mat-item__main[aria-disabled="true"] { opacity: .55; pointer-events: none; cursor: not-allowed; }
/* selected: a tint behind the whole row, a stronger title and the accent on the icon (COLOR-08); the tint is on the row, so a hover and a slide go over it */
.mat-item.is-selected, .mat-item:has(.mat-item__main[aria-current="true"]), .mat-item:has(.mat-item__main[aria-current="page"]), .mat-itemlist--choices .mat-item:has(.mat-item__check:checked) { background: var(--mat-accent-soft-strong); }
.mat-item.is-selected .mat-item__title, .mat-item__main[aria-current="true"] .mat-item__title, .mat-item__main[aria-current="page"] .mat-item__title, .mat-itemlist--choices .mat-item:has(.mat-item__check:checked) .mat-item__title { font-weight: 650; }
.mat-item.is-selected .mat-item__lead > .mat-icon, .mat-item.is-selected .mat-item__end > .mat-icon, .mat-item__main[aria-current="true"] .mat-item__lead > .mat-icon, .mat-item__main[aria-current="page"] .mat-item__lead > .mat-icon { color: var(--mat-accent-text); }

/* the lead: an avatar, an icon, a tile with an icon, a thumbnail or a check */
.mat-item__lead { display: flex; flex: none; align-items: center; justify-content: center; min-width: var(--mat-item-lead); color: var(--mat-text-muted); }
.mat-item__lead > .mat-icon { font-size: 1.35rem; }
.mat-item__lead > .mat-avatar { width: var(--mat-item-lead); height: var(--mat-item-lead); font-size: var(--mat-fs-md); }
.mat-item__thumb { display: grid; flex: none; place-items: center; width: var(--mat-item-lead); height: var(--mat-item-lead); overflow: hidden; border-radius: var(--mat-radius); background: var(--mat-surface-3); color: var(--mat-text-muted); font-size: 1.35rem; }
.mat-item__thumb > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mat-item__tile { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--mat-radius); background: var(--mat-surface-3); color: var(--mat-text-muted); font-size: 1.1rem; }
.mat-item__tile--accent { background: var(--mat-accent-soft-strong); color: var(--mat-accent-text); }
.mat-item__tile--ok { background: var(--mat-success-bg); color: var(--mat-success-text); }
.mat-item__tile--warn { background: var(--mat-warning-bg); color: var(--mat-warning-text); }
.mat-item__tile--error { background: var(--mat-danger-bg); color: var(--mat-danger-text); }
.mat-item__tile--info { background: var(--mat-info-bg); color: var(--mat-info-text); }
.mat-item__check { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--mat-accent); cursor: pointer; }
.mat-item__check:focus-visible { box-shadow: none; }

/* the body: a title and the lines under it, each on one line unless the row says wrap or the line is clamped */
.mat-item__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.mat-item__title { overflow: hidden; color: var(--mat-text); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.mat-item__text { overflow: hidden; color: var(--mat-text-muted); font-size: var(--mat-fs-sm); line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.mat-item__text--clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; }
.mat-item--wrap .mat-item__title, .mat-item--wrap .mat-item__text { overflow: visible; white-space: normal; }
/* what a state shows besides its colour (COLOR-04): unread is bold with a dot, done is struck through */
.mat-item.is-unread .mat-item__title { font-weight: 700; }
.mat-item.is-unread .mat-item__title + .mat-item__text { color: var(--mat-text); }
.mat-item__dot { position: absolute; left: 4px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--mat-accent); }
.mat-item--top .mat-item__dot { top: 19px; margin-top: 0; }
.mat-item.is-done .mat-item__title, .mat-itemlist--tasks .mat-item__main:has(.mat-item__check:checked) .mat-item__title { color: var(--mat-text-muted); font-weight: 500; text-decoration: line-through; }

/* the end: a note, a count, a pill, a value, and the arrow of a row that opens something */
.mat-item__end { display: flex; flex: none; align-items: center; gap: var(--mat-space-2); margin-left: var(--mat-space-2); color: var(--mat-text-muted); font-size: var(--mat-fs-sm); }
.mat-item__note { color: var(--mat-text-muted); font-size: var(--mat-fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mat-item__note--strong { color: var(--mat-text); font-weight: 600; }
.mat-item__chevron { flex: none; color: var(--mat-text-muted); font-size: 1.1rem; }
.mat-item__aside { display: flex; flex: none; align-items: center; gap: var(--mat-space-1); padding-right: var(--mat-item-pad); }
.mat-item__aside:has(> .mat-btn--icon, > .mat-item__handle) { padding-right: var(--mat-space-2); }

/* a row with a field in it: the label above the value, or beside it from 480 px */
.mat-item__label { display: block; color: var(--mat-text-muted); font-size: var(--mat-fs-sm); font-weight: 600; }
.mat-item__input { display: block; width: 100%; min-height: 1.6em; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--mat-text); font: inherit; outline: none; }
.mat-item__input::placeholder { color: var(--mat-text-faint); }
select.mat-item__input { width: calc(100% + 4px); margin-left: -4px; cursor: pointer; }
.mat-item__input:focus-visible { box-shadow: none; }
/* the type of a field on a touch screen is 16 px or more (MOBILE-06, matui.forms.css); this one has `font: inherit` and so its own rule */
@media (pointer: coarse) { .mat-item__input { font-size: max(1rem, 1em); } }
@media (min-width: 480px) {
  .mat-item--inline .mat-item__body { flex-direction: row; align-items: center; gap: var(--mat-item-gap); }
  .mat-item--inline .mat-item__label { flex: 0 0 7rem; color: var(--mat-text); font-size: var(--mat-fs-md); }
}

/* sliding actions: the options stand at the sides of the row and the row slides by --mat-item-x, which the script sets; the list clips what lies outside.
   They are out of the tab order while hidden (the script also makes them inert). */
.mat-item__options { display: flex; flex: none; align-items: stretch; }
.mat-item__option {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 76px; min-height: var(--mat-item-h); padding: 0 var(--mat-space-4);
  border: 0; border-radius: 0; background: var(--mat-surface-3); color: var(--mat-text);
  font: inherit; font-size: var(--mat-fs-xs); font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.mat-item__option .mat-icon { font-size: 1.3rem; }
.mat-item__option:hover { background: var(--mat-border-strong); text-decoration: none; }
.mat-item__option:focus-visible { border-radius: 0; box-shadow: inset 0 0 0 2px var(--mat-text); }
.mat-item__option--accent { background: var(--mat-accent); color: var(--mat-on-accent); }
.mat-item__option--accent:hover { background: var(--mat-accent-hover); }
.mat-item__option--accent:focus-visible { box-shadow: inset 0 0 0 2px var(--mat-on-accent); }
.mat-item__option--danger { background: var(--mat-danger); color: var(--mat-on-danger); }
.mat-item__option--danger:hover { background: color-mix(in oklab, var(--mat-danger) 86%, black); }
.mat-item__option--danger:focus-visible { box-shadow: inset 0 0 0 2px var(--mat-on-danger); }
.mat-item__more[aria-expanded="true"] { background: var(--mat-accent-soft-strong); color: var(--mat-accent-text); }
.mat-itemlist.is-ready .mat-item--sliding { overflow: hidden; overflow: clip; }
.mat-itemlist.is-ready .mat-item--sliding > .mat-item__row {
  position: relative;
  transform: translateX(var(--mat-item-x, 0px));
  transition: transform var(--mat-dur) var(--mat-ease);
  touch-action: pan-y; user-select: none;
}
.mat-itemlist.is-ready .mat-item--sliding.is-swiping > .mat-item__row { transition: none; }
.mat-itemlist.is-ready .mat-item--sliding .mat-item__options { position: absolute; top: 0; bottom: 0; visibility: hidden; transition: visibility 0s linear var(--mat-dur); }
.mat-itemlist.is-ready .mat-item--sliding .mat-item__options--start { right: 100%; }
.mat-itemlist.is-ready .mat-item--sliding .mat-item__options--end { left: 100%; }
.mat-itemlist.is-ready .mat-item--sliding.is-swiping .mat-item__options, .mat-itemlist.is-ready .mat-item--sliding.is-open .mat-item__options { visibility: visible; transition-delay: 0s; }

/* reordering: the handle, the row that is held (it floats, so it has the shadow of what floats) and the rows that make room */
.mat-item__handle { display: grid; flex: none; place-items: center; width: var(--mat-control-h); height: var(--mat-control-h); padding: 0; border: 0; border-radius: var(--mat-radius); background: transparent; color: var(--mat-text-muted); cursor: grab; touch-action: none; }
.mat-item__handle:hover { background: var(--mat-surface-3); color: var(--mat-text); }
.mat-item__handle[aria-pressed="true"] { background: var(--mat-accent-soft-strong); color: var(--mat-accent-text); }
.mat-itemlist.is-reordering { user-select: none; }
.mat-itemlist.is-reordering .mat-item { transform: translateY(var(--mat-item-dy, 0px)); transition: transform var(--mat-dur) var(--mat-ease); }
.mat-itemlist.is-reordering .mat-item.is-dragging { transition: none; }
.mat-item.is-dragging, .mat-item.is-picked { z-index: 2; border-radius: var(--mat-radius); background: var(--mat-surface); box-shadow: var(--mat-shadow-2); }
.mat-item.is-dragging .mat-item__handle { cursor: grabbing; }
.mat-itemlist.is-reordering .mat-item__handle::after, .mat-item.is-picked .mat-item__handle::after { display: none; }
@media (prefers-reduced-motion: reduce) {
  .mat-itemlist.is-ready .mat-item--sliding > .mat-item__row, .mat-itemlist.is-reordering .mat-item, .mat-itemlist.is-ready .mat-item--sliding .mat-item__options { transition: none; }
}

/* ---- Tree view (LIST-17): folders, categories, a hierarchy of any depth ----
   <ul class="mat-tree" data-tree aria-label="..."> of <li class="mat-tree__item">; a parent holds a <ul class="mat-tree__group"> of more items. An item is its row (.mat-tree__row: an icon, the
   label, maybe a count and actions) and, in a parent, its group. Without the script it is a nested list that is all open. The script (data-tree) gives it the roles of the tree pattern, draws the
   chevron (and, with data-multiple, the box) and writes the level of each item into --mat-tree-level, which this part turns into the indentation and the guide lines. What is open is
   aria-expanded, what is chosen is aria-selected (one) or aria-checked (several): the CSS reads those, so the markup and the state cannot disagree. ---- */
.mat-tree, .mat-tree__group { list-style: none; margin: 0; padding: 0; }
.mat-tree {
  --mat-tree-indent: 24px;
  --mat-tree-pad: var(--mat-space-2);
  --mat-tree-row-h: 36px;
  --mat-tree-line: var(--mat-border);
  min-width: 0; font-size: var(--mat-fs-md);
}
.mat-tree--compact { --mat-tree-row-h: 30px; font-size: var(--mat-fs-sm); }
.mat-tree--no-lines { --mat-tree-line: transparent; }
/* without the script the groups are nested lists; with it the level of the item is the indentation of its row, so that the tint of a selected row reaches both edges */
.mat-tree:not(.is-ready) .mat-tree__group { padding-left: var(--mat-tree-indent); }
.mat-tree__item { outline: none; }
.mat-tree__item[hidden] { display: none; }
.mat-tree__item[aria-expanded="false"] > .mat-tree__group { display: none; }
.mat-tree__row {
  position: relative; display: flex; align-items: center; gap: var(--mat-space-2);
  min-width: 0; min-height: var(--mat-tree-row-h);
  padding: var(--mat-space-1) var(--mat-space-2) var(--mat-space-1) calc(var(--mat-tree-pad) + var(--mat-tree-level, 0) * var(--mat-tree-indent));
  border-radius: var(--mat-radius); color: var(--mat-text); cursor: pointer;
  transition: background var(--mat-dur-fast) var(--mat-ease);
}
.mat-tree:not(.is-ready) .mat-tree__row { padding-left: var(--mat-tree-pad); }
.mat-tree__row:hover { background: color-mix(in srgb, var(--mat-text) 5%, transparent); }
/* the guides: one line under the chevron of each ancestor, drawn the whole height of the row, so the rows of a level make one line */
.mat-tree__row::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: calc(var(--mat-tree-pad) + var(--mat-tree-indent) / 2);
  width: calc(var(--mat-tree-level, 0) * var(--mat-tree-indent));
  background: repeating-linear-gradient(to right, var(--mat-tree-line) 0 1px, transparent 1px var(--mat-tree-indent));
  pointer-events: none;
}
/* the chevron: the whole height of the row, as wide as one level; a leaf has the space but no chevron, so the labels of one level line up */
.mat-tree__toggle {
  position: relative; flex: none; align-self: stretch; display: flex; align-items: center; justify-content: center;
  width: var(--mat-tree-indent); margin: calc(var(--mat-space-1) * -1) calc(var(--mat-space-1) * -1) calc(var(--mat-space-1) * -1) 0; color: var(--mat-text-muted);
}
.mat-tree__toggle > .mat-icon { transition: transform var(--mat-dur) var(--mat-ease); }
.mat-tree__item:not([aria-expanded]) > .mat-tree__row > .mat-tree__toggle > .mat-icon { visibility: hidden; }
.mat-tree__item[aria-expanded="true"] > .mat-tree__row > .mat-tree__toggle > .mat-icon { transform: rotate(90deg); }
/* the state of a lazy parent that is being filled: the chevron makes room for a small spinner */
.mat-tree__item.is-loading > .mat-tree__row > .mat-tree__toggle > .mat-icon { display: none; }
.mat-tree__item.is-loading > .mat-tree__row > .mat-tree__toggle::after {
  content: ""; width: 14px; height: 14px; border: 2px solid var(--mat-surface-3); border-top-color: var(--mat-accent); border-radius: 50%; animation: mat-spin .75s linear infinite;
}
/* the box of several (a tree with data-multiple): checked, or in between when some of what is below it is checked; the check and the minus are icons, so the state is a shape too (COLOR-04) */
.mat-tree__check {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  border: 2px solid var(--mat-text-muted); border-radius: var(--mat-radius-xs); background: var(--mat-surface); color: var(--mat-on-accent);
  transition: background var(--mat-dur-fast) var(--mat-ease), border-color var(--mat-dur-fast) var(--mat-ease);
}
.mat-tree__check > .mat-icon { display: none; width: 14px; height: 14px; stroke-width: 3; vertical-align: 0; }
.mat-tree__item[aria-checked="true"] > .mat-tree__row > .mat-tree__check, .mat-tree__item[aria-checked="mixed"] > .mat-tree__row > .mat-tree__check { border-color: var(--mat-accent); background: var(--mat-accent); }
.mat-tree__item[aria-checked="true"] > .mat-tree__row > .mat-tree__check > .mat-tree__check-on, .mat-tree__item[aria-checked="mixed"] > .mat-tree__row > .mat-tree__check > .mat-tree__check-mixed { display: inline-block; }
/* the icon of a row; a folder has two (closed and open) of which the state shows one */
.mat-tree__icon { flex: none; display: inline-flex; color: var(--mat-text-muted); font-size: 1.15rem; }
.mat-tree__icon--folder > .mat-icon:last-child { display: none; }
.mat-tree__item[aria-expanded="true"] > .mat-tree__row .mat-tree__icon--folder > .mat-icon:first-child { display: none; }
.mat-tree__item[aria-expanded="true"] > .mat-tree__row .mat-tree__icon--folder > .mat-icon:last-child { display: inline-block; }
.mat-tree__label { flex: 1 1 auto; min-width: 0; color: inherit; font: inherit; line-height: var(--mat-lh-tight); text-decoration: none; overflow-wrap: anywhere; }
a.mat-tree__label:hover { text-decoration: none; }
.mat-tree__count { flex: none; }
.mat-tree__actions { flex: none; display: flex; align-items: center; gap: 2px; margin-left: auto; }
.mat-tree__empty { margin: 0; padding: var(--mat-space-3) var(--mat-space-4); color: var(--mat-text-muted); font-size: var(--mat-fs-sm); }
.mat-tree__empty[hidden] { display: none; }
/* chosen: a tint behind the whole row, a stronger label and the accent on the icon (COLOR-08); in a tree of several the checked rows are tinted, a row in between is not */
.mat-tree__item[aria-selected="true"] > .mat-tree__row, .mat-tree__item[aria-checked="true"] > .mat-tree__row { background: var(--mat-accent-soft-strong); }
.mat-tree__item[aria-selected="true"] > .mat-tree__row .mat-tree__label { font-weight: 650; }
.mat-tree__item[aria-selected="true"] > .mat-tree__row .mat-tree__icon { color: var(--mat-accent-text); }
.mat-tree__item[aria-disabled="true"] > .mat-tree__row { opacity: .55; cursor: not-allowed; }
.mat-tree__item:focus-visible > .mat-tree__row { box-shadow: inset 0 0 0 2px var(--mat-accent); }
/* actions that only a pointer shows on hover are also there for the focus, for the chosen row and on every touch screen (MOBILE-04) */
@media (hover: hover) {
  .mat-tree.is-ready .mat-tree__actions { opacity: 0; }
  .mat-tree.is-ready .mat-tree__row:hover > .mat-tree__actions, .mat-tree.is-ready .mat-tree__row:focus-within > .mat-tree__actions,
  .mat-tree.is-ready .mat-tree__item:focus > .mat-tree__row > .mat-tree__actions, .mat-tree.is-ready .mat-tree__item[aria-selected="true"] > .mat-tree__row > .mat-tree__actions { opacity: 1; }
}
/* a phone or a touch screen: rows of 44 px (MOBILE-04), a wider level so that the chevron can be hit, and the chevron's own target reaches over the gap */
@media (max-width: 720px), (pointer: coarse) {
  .mat-tree { --mat-tree-indent: 28px; --mat-tree-row-h: 44px; }
  .mat-tree--compact { --mat-tree-row-h: 36px; }
  .mat-tree__toggle::before { content: ""; position: absolute; inset: 0 -8px; }
}
@media (prefers-reduced-motion: reduce) {
  .mat-tree__row, .mat-tree__toggle > .mat-icon, .mat-tree__check { transition: none; }
  .mat-tree__item.is-loading > .mat-tree__row > .mat-tree__toggle::after { animation-duration: 3s; }
}

/* ---- 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; } }

/* ---- Touch targets (MOBILE-04): on a touch screen what is pressed in a list is 44 px. The rows and the buttons of a pager grow; a sort link and the cell around the check of a row
   (a tap on the cell is a tap on the check, matui.js) take the room that the cell has; a small link in a field keeps its look and gets a centred ::after. ---- */
@media (pointer: coarse) {
  .mat-toc__link { min-height: 44px; }
  .mat-tabs--pills .mat-tab { min-height: 44px; }
  .mat-carousel__dot { width: 44px; height: 44px; }
  .mat-table__sort { min-width: 44px; padding-block: 12px; margin-block: -12px; }
  .mat-table th.mat-table__select, .mat-table td.mat-table__select { min-width: 44px; }
  /* a link in a cell is as high as its row: the line of the link has its padding in the row (the cell has room for a line of 44 px), so the layout does not move; a link that is alone
     in its cell is 44 px wide at least */
  .mat-table :is(td, th) a:not(.mat-btn):not(.mat-table__sort) { padding-block: 13px; margin-block: -13px; }
  .mat-table :is(td, th) a:not(.mat-btn):not(.mat-table__sort):only-child { display: inline-block; min-width: 44px; }
  a.mat-pill, button.mat-pill { position: relative; }
  a.mat-pill::after, button.mat-pill::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: 44px; transform: translate(-50%, -50%); }
}
@media (pointer: coarse) and (max-width: 720px) { .mat-table td.mat-table__select { min-height: 44px; align-items: center; } }

/* ==========================================================================
   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.
   ========================================================================== */

/* @prop dialog | --mat-dialog-radius | length | var(--mat-radius-lg) | Corner radius of a dialog and of a panel from the side (on a phone every dialog fills the screen and has none). */
/* @prop dialog | --mat-dialog-width | length | 560px | Width of a dialog of the default size (the small, large and extra large sizes keep their own; never wider than the screen). */
/* @prop dialog | --mat-dialog-border-width | length | 1px | Width of the line around a dialog. */
/* @prop dialog | --mat-dialog-pad | length | var(--mat-space-6) | Space between the edge of a dialog and its body, at the sides of its foot and at the left of its head. */
dialog.mat-dialog {
  padding: 0;
  width: min(var(--mat-dialog-width, 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: var(--mat-dialog-border-width, 1px) solid var(--mat-border-strong);
  border-radius: var(--mat-dialog-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-dialog-pad, 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-dialog-pad, 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-dialog-pad, 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: var(--mat-check-size, 18px); height: var(--mat-check-size, 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-dialog-radius, var(--mat-radius-lg)) 0 0 var(--mat-dialog-radius, var(--mat-radius-lg)); }
dialog.mat-dialog--start { margin-right: auto; border-width: 0 1px 0 0; border-radius: 0 var(--mat-dialog-radius, var(--mat-radius-lg)) var(--mat-dialog-radius, 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: #204db6; }
[data-app="matfile"]     { --mat-app-accent: #3472d8; }
[data-app="matmail"]     { --mat-app-accent: #475569; }
[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="schulio"]     { --mat-app-accent: #2d5fb8; }
[data-app="matcms"]      { --mat-app-accent: #2563eb; }
[data-app="matdo"]       { --mat-app-accent: #d03d33; }
[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; }
[data-app="matidentity"] { --mat-app-accent: #a21a50; }
[data-app="matsmtp"]     { --mat-app-accent: #f5b800; --mat-app-on-accent: #0b1020; --mat-app-accent-text: #8a6100; }

/* ---- 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; }