/* ==========================================================================
   Matmon.Cloud - only what this app has and MatUi does not.
   The look is MatUi's (wwwroot/matui, copied by scripts/sync-matui.ps1): this file adds the few pieces that are Matmon's
   own, with the app prefix mm- (CODE-02, CODE-04), colours only from the tokens (COLOR-01) and nothing that overrides a
   class of the toolkit - a component's shape is changed through its documented --mat-* properties (SPACE-06).
   ========================================================================== */

/* ---- The instance console: the instance's own UI in a frame that fills the page ---- */
.mm-console-page .mat-main { height: 100vh; height: 100dvh; overflow: hidden; }
.mm-console { padding: 0; gap: 0; flex: 1 1 auto; min-height: 0; }
.mm-console-frame { display: block; width: 100%; height: 100%; min-height: 0; flex: 1 1 auto; border: 0; background: var(--mat-bg); }
/* A page of the instance that stands on its own (setup assistant, sign-in) fills the whole console - cloud.js sets this from
   the frame's data-console-mode. The update screen still lies above it. */
.mm-console-full .mm-console-frame { position: fixed; inset: 0; z-index: calc(var(--mat-z-topbar) + 40); }

/* ---- Inline helpers ---- */
/* A row of facts or buttons that belongs to a card head, pushed to its end. */
.mm-push-end { margin-inline-start: auto; }
/* A value that wraps anywhere (tokens, URLs, ids in a narrow card). */
.mm-break { overflow-wrap: anywhere; }
/* A note somebody typed keeps its line breaks. */
.mm-prewrap { white-space: pre-wrap; }

/* ---- A remote probe under its instance (Instances list): one level in, its icon beside the name ---- */
.mm-probe-row__name { display: inline-flex; align-items: center; gap: var(--mat-space-2); color: var(--mat-text-muted); }
.mm-probe-row__name > span { color: var(--mat-text); }
.mm-probe-row > td.mat-table__primary { padding-inline-start: calc(var(--mat-space-4) + var(--mat-space-6)); }

/* ---- Dashboards (the same pieces as the instance's dashboard.css): a section head with its action at the end, a
   legend whose items link to the list behind each number, and one card per instance whose border carries its state ---- */
.mm-dash-section-head { display: flex; align-items: center; gap: var(--mat-space-3); margin-bottom: var(--mat-space-3); }
.mm-dash-section-head h2 { margin: 0; font-size: var(--mat-fs-lg); }
.mm-dash-legend { display: flex; flex-wrap: wrap; gap: var(--mat-space-1) var(--mat-space-5); }
.mm-dash-legend__item { --mm-legend: var(--mat-text-faint); display: inline-flex; align-items: baseline; gap: var(--mat-space-2); padding: var(--mat-space-1) 0; border-radius: var(--mat-radius-sm); color: var(--mat-text-muted); font-size: var(--mat-fs-sm); text-decoration: none; }
.mm-dash-legend__item::before { content: ""; align-self: center; width: .6rem; height: .6rem; border-radius: 50%; background: var(--mm-legend); }
.mm-dash-legend__item strong { color: var(--mat-text); font-size: var(--mat-fs-md); font-variant-numeric: tabular-nums; }
.mm-dash-legend__item small { color: var(--mat-text-faint); font-size: var(--mat-fs-xs); font-variant-numeric: tabular-nums; }
a.mm-dash-legend__item:hover { color: var(--mat-text); text-decoration: none; }
.mm-dash-legend__item:focus-visible { outline: none; box-shadow: var(--mat-focus-ring); }
.mm-dash-legend__item[data-tone="ok"] { --mm-legend: var(--mat-success); }
.mm-dash-legend__item[data-tone="warn"] { --mm-legend: var(--mat-warning); }
.mm-dash-legend__item[data-tone="error"] { --mm-legend: var(--mat-danger); }
.mm-dash-legend__item[data-tone="info"] { --mm-legend: var(--mat-accent); }
.mm-dash-instances { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: var(--mat-gap); }
.mm-dash-instance { min-width: 0; }
.mm-dash-instance[data-tone="error"] { border-color: color-mix(in srgb, var(--mat-danger) 45%, var(--mat-border)); }
.mm-dash-instance[data-tone="warning"] { border-color: color-mix(in srgb, var(--mat-warning) 45%, var(--mat-border)); }
.mm-dash-instance__body { display: flex; flex-direction: column; gap: var(--mat-space-3); height: 100%; min-width: 0; }
.mm-dash-instance__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--mat-space-2); min-width: 0; }
.mm-dash-instance__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-dash-instance__title { display: flex; flex-direction: column; min-width: 0; }
.mm-dash-instance__title small { overflow: hidden; color: var(--mat-text-muted); font-size: var(--mat-fs-xs); text-overflow: ellipsis; white-space: nowrap; }
.mm-dash-instance__alerts { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--mat-space-2); }
.mm-dash-instance__alerts > strong { font-size: var(--mat-fs-2xl); line-height: 1.1; }
.mm-dash-instance__alerts > span { color: var(--mat-text-muted); font-size: var(--mat-fs-sm); }
.mm-dash-instance__split { display: inline-flex; gap: var(--mat-space-1); margin-inline-start: auto; }
.mm-dash-instance__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mat-space-2) var(--mat-space-4); margin: 0; padding-top: var(--mat-space-3); border-top: 1px solid var(--mat-border); }
.mm-dash-instance__facts div { min-width: 0; }
.mm-dash-instance__facts dt { color: var(--mat-text-faint); font-size: var(--mat-fs-xs); }
.mm-dash-instance__facts dd { margin: 0; overflow: hidden; font-size: var(--mat-fs-sm); text-overflow: ellipsis; white-space: nowrap; }

/* ---- Pictures that are data, not interface ---- */
/* A QR code is read by a camera: black on white in both themes (COLOR-07). --mat-picker-light is white in both. */
.mm-qr {
  align-self: flex-start;
  width: max-content;
  max-width: 100%;
  padding: var(--mat-space-3);
  background: var(--mat-picker-light);
  border: 1px solid var(--mat-border);
  border-radius: var(--mat-radius);
  line-height: 0;
}
.mm-qr svg, .mm-qr img { display: block; max-width: 100%; height: auto; }
/* A partner's logo on its vanity entry page: at most 72 px high and 260 px wide, in its own proportions. */
/* The product name in the menu of a partner's address when the partner has no logo. */
.mm-brand-name { display: block; font-size: var(--mat-fs-lg); font-weight: 700; color: var(--mat-text); line-height: 1.2; }
.mm-partner-logo { display: block; width: auto; height: auto; max-height: 72px; max-width: min(260px, 100%); object-fit: contain; }
/* A partner logo with a dark-mode variant (mat-brandmark--light / --dark): its own display above must not beat the theme switch. */
.mm-partner-logo.mat-brandmark--dark { display: none; }
:root[data-theme="dark"] .mm-partner-logo.mat-brandmark--light { display: none; }
:root[data-theme="dark"] .mm-partner-logo.mat-brandmark--dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .mm-partner-logo.mat-brandmark--light { display: none; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .mm-partner-logo.mat-brandmark--dark { display: block; }
}
/* The partner's own text on its site and sign-in page: plain text, its line breaks kept. */
.mm-site-description { margin: 0 auto; white-space: pre-line; color: var(--mat-text-muted); max-width: 46ch; }

/* Partner branding: the logo on a white and on a dark ground - where it will stand on a managed instance (light theme,
   dark menu). The grounds are data, not theme, so they keep their colours in both modes (COLOR-07). */
.mm-swatch-light,
.mm-swatch-dark {
  display: grid;
  place-items: center;
  min-width: 8rem;
  min-height: 4.5rem;
  padding: var(--mat-space-2) var(--mat-space-3);
  border: 1px solid var(--mat-border);
  border-radius: var(--mat-radius);
}
.mm-swatch-light { background: var(--mat-picker-light); }
.mm-swatch-dark { background: var(--mat-picker-dark); }
.mm-swatch-light > img,
.mm-swatch-dark > img { display: block; max-width: min(190px, 100%); max-height: 54px; }

/* The branding editor's preview: the brand block of an instance on the light and on the dark ground (data grounds, like
   the swatches), then the facts beside it. */
.mm-brand-preview { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--mat-space-3); }
.mm-brand-preview__pane {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--mat-space-3);
  min-height: 8.5rem; margin: 0; padding: var(--mat-space-4);
  border: 1px solid var(--mat-border); border-radius: var(--mat-radius-lg);
}
.mm-brand-preview__pane--light { background: var(--mat-picker-light); color: var(--mat-picker-dark); }
.mm-brand-preview__pane--dark { background: var(--mat-picker-dark); color: var(--mat-picker-light); }
.mm-brand-preview__brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--mat-space-1); }
.mm-brand-preview__logo { display: block; max-width: min(200px, 100%); max-height: 56px; }
.mm-brand-preview__name { font-weight: 700; font-size: 1.05rem; }
.mm-brand-preview__slogan { font-size: var(--mat-fs-sm); font-style: italic; opacity: .75; }
.mm-brand-preview__caption { font-size: var(--mat-fs-xs); letter-spacing: .05em; text-transform: uppercase; opacity: .6; }
.mm-brand-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--mat-space-3); margin: 0; }
.mm-brand-facts > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mm-brand-facts dt { font-size: var(--mat-fs-xs); letter-spacing: .05em; text-transform: uppercase; color: var(--mat-text-muted); }
.mm-brand-facts dd { margin: 0; overflow-wrap: anywhere; }
.mm-brand-chip { width: 1rem; height: 1rem; flex: none; }
/* What white-label changes: a short list inside the info alert. */
.mm-brand-where { margin: var(--mat-space-2) 0; padding-left: 1.2rem; display: grid; gap: var(--mat-space-1); }

/* ---- An invoice: a document. On the screen a card in the theme; printed, the page on its own in the light set whatever
   the screen shows (paper is white). Its tables never become cards: a printed A4 page is narrower than 720 px. ---- */
.mm-invoice { max-width: 920px; font-variant-numeric: tabular-nums; }
.mm-invoice-table { width: 100%; border-collapse: collapse; font-size: var(--mat-fs-sm); }
.mm-invoice-table th {
  padding: var(--mat-space-2) var(--mat-space-3);
  text-align: start;
  font-weight: 600;
  color: var(--mat-text-muted);
  border-bottom: 1px solid var(--mat-border-strong);
  white-space: nowrap;
}
.mm-invoice-table td { padding: var(--mat-space-2) var(--mat-space-3); border-bottom: 1px solid var(--mat-border); vertical-align: top; }
.mm-invoice-table .mat-num { text-align: end; }
/* the logo is made for white paper, so it stands on a light plate in the dark theme too */
.mm-invoice-logo {
  display: inline-flex;
  margin-block-end: var(--mat-space-3);
  padding: var(--mat-space-2) var(--mat-space-3);
  border-radius: var(--mat-radius-sm);
  background: var(--mat-picker-light);
}
.mm-invoice-logo > img { display: block; max-height: 56px; max-width: 220px; object-fit: contain; }
.mm-invoice-pay {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--mat-space-1) var(--mat-space-4);
  margin: var(--mat-space-2) 0;
}
.mm-invoice-pay dt { color: var(--mat-text-muted); }
.mm-invoice-pay dd { margin: 0; }
.mm-invoice-table--totals { width: auto; min-width: min(100%, 260px); margin-inline-start: auto; font-size: var(--mat-fs-md); }
.mm-invoice-table--totals td { padding-block: var(--mat-space-1); border-bottom: 0; }
.mm-invoice-table--totals tr:last-child td {
  padding-top: var(--mat-space-2);
  border-top: 2px solid var(--mat-border-strong);
  font-size: var(--mat-fs-lg);
  font-weight: 650;
}
@media print {
  body * { visibility: hidden !important; }
  .mm-invoice, .mm-invoice * { visibility: visible !important; }
  .mm-invoice {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 100%;
    max-width: none;
    --mat-card-border-width: 0;
    --mat-card-pad: 0;
    --mat-surface: var(--mat-picker-light);
    --mat-text: #1f1e1b;
    --mat-text-muted: #5d5b55;
    --mat-border: rgba(31, 30, 27, .13);
    --mat-border-strong: rgba(31, 30, 27, .30);
    background: var(--mat-surface);
    color: var(--mat-text);
  }
}
/* A code snippet to copy: the block and its copy button side by side. */
.mm-snippet { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--mat-space-2); align-items: start; }
.mm-snippet > .mat-code { margin: 0; }

/* ---- A status block at the top of the menu (_NavInfo, Ui/NavInfo.cs) ----
   MatUi's menu only has count badges (SHELL-14); a badge cannot say Error / Warning / Ack at a glance or open the list
   filtered. This block can: a titled link with one big number and its state word, and a row of small linked counts.
   Built only from MatUi tokens and shaped like a menu item, so it reads as part of the menu, not as a widget dropped
   into it. The same rules are in the instance's app.css - keep the two in step. */
.mm-navinfo {
  flex: none;
  display: grid;
  gap: var(--mat-space-1);
  margin: 0 var(--mat-space-3) var(--mat-space-2);
  padding: var(--mat-space-1);
  border: 1px solid var(--mat-border);
  border-radius: var(--mat-radius-lg);
  background: var(--mat-surface);
}
.mm-navinfo[data-tone="error"] { border-color: color-mix(in srgb, var(--mat-danger) 45%, var(--mat-border)); }
.mm-navinfo[data-tone="warn"] { border-color: color-mix(in srgb, var(--mat-warning) 45%, var(--mat-border)); }
.mm-navinfo__main {
  display: flex;
  align-items: center;
  gap: var(--mat-space-2);
  min-height: var(--mat-nav-item-height, var(--mat-control-h));
  padding: 0 var(--mat-space-2);
  border-radius: var(--mat-radius);
  color: var(--mat-text);
  font-weight: 500;
  text-decoration: none;
}
.mm-navinfo__main:hover { background: var(--mat-surface-3); text-decoration: none; }
.mm-navinfo__main.is-active { background: var(--mat-accent-soft-strong); font-weight: 600; }
.mm-navinfo__main:focus-visible { outline: none; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--mat-accent) 70%, transparent); }
.mm-navinfo__main .mat-icon { flex: none; font-size: 1.2rem; color: var(--mat-text-muted); }
.mm-navinfo__main.is-active .mat-icon { color: var(--mat-accent-text); }
.mm-navinfo__title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-navinfo__value { font-size: var(--mat-fs-xl); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.mm-navinfo__state {
  min-width: 3.4rem;
  font-size: var(--mat-fs-xs);
  font-weight: 650;
  text-align: end;
  color: var(--mat-text-muted);
}
.mm-navinfo[data-tone="error"] :is(.mm-navinfo__value, .mm-navinfo__state) { color: var(--mat-danger-text); }
.mm-navinfo[data-tone="warn"] :is(.mm-navinfo__value, .mm-navinfo__state) { color: var(--mat-warning-text); }
.mm-navinfo[data-tone="info"] .mm-navinfo__state { color: var(--mat-info-text); }
.mm-navinfo[data-tone="ok"] .mm-navinfo__state { color: var(--mat-success-text); }
.mm-navinfo__stats {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--mat-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.mm-navinfo__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--mat-space-1) 0;
  border-radius: var(--mat-radius-sm);
  background: var(--mat-surface-2);
  color: var(--mat-text-muted);
  font-size: var(--mat-fs-xs);
  line-height: 1.25;
  text-decoration: none;
}
.mm-navinfo__stat strong { font-size: var(--mat-fs-sm); font-weight: 650; color: var(--mat-text); font-variant-numeric: tabular-nums; }
.mm-navinfo__stat:hover { background: var(--mat-surface-3); text-decoration: none; }
.mm-navinfo__stat:focus-visible { outline: none; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--mat-accent) 70%, transparent); }
/* A count that is not zero takes its tone; a zero stays quiet, whatever its tone. */
.mm-navinfo__stat[data-tone="error"]:not(.is-zero) { background: var(--mat-danger-bg); color: var(--mat-danger-text); }
.mm-navinfo__stat[data-tone="warn"]:not(.is-zero) { background: var(--mat-warning-bg); color: var(--mat-warning-text); }
.mm-navinfo__stat[data-tone="info"]:not(.is-zero) { background: var(--mat-info-bg); color: var(--mat-info-text); }
.mm-navinfo__stat:not(.is-zero):is([data-tone="error"], [data-tone="warn"], [data-tone="info"]) strong { color: inherit; }
.mm-navinfo__stat.is-zero strong { color: var(--mat-text-muted); font-weight: 500; }

/* ---- Touch (pwa.js / the installed app) - the same as the instance's app.css. MatUi keeps fields from zooming a phone
   (MOBILE-06) and the targets big enough (MOBILE-04); this adds no double-tap zoom (pinch zoom stays - WCAG 1.4.4), text
   that keeps its size when a phone turns, and no grey tap box over a control. ---- */
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, button, label, summary, select, [role="button"], [role="tab"], [role="menuitem"], [role="option"] { -webkit-tap-highlight-color: transparent; }

/* ---- The connection bar (pwa.js): where a toast stands - at the bottom on a wide screen, under the header bar on a
   phone - clear of notches and the home indicator; opaque like a toast, the icon keeps the tone. ---- */
.mm-connection {
  position: fixed;
  z-index: var(--mat-z-toast);
  left: calc(var(--mat-space-4) + var(--mat-safe-left));
  right: calc(var(--mat-space-4) + var(--mat-safe-right));
  bottom: calc(var(--mat-space-4) + var(--mat-safe-bottom));
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.mm-connection > .mat-alert {
  pointer-events: auto;
  width: min(40rem, 100%);
  background: var(--mat-surface);
  border-color: var(--mat-border-strong);
  box-shadow: var(--mat-shadow-2);
}
@media (max-width: 600px) {
  .mm-connection { top: calc(var(--mat-topbar-h) + var(--mat-space-2) + var(--mat-safe-top)); bottom: auto; }
}

/* ---- Admin > Updates: the update screen (same as Matmon's System > Updates) ---- */
/* Covers the page while the cloud restarts; the page itself would only show stale values and buttons that cannot work. */
.mm-update-screen {
  position: fixed; inset: 0; z-index: calc(var(--mat-z-topbar) + 50);
  display: grid; place-items: center; padding: var(--mat-space-4);
  background: color-mix(in srgb, var(--mat-bg) 72%, transparent);
  backdrop-filter: blur(6px);
}
.mm-update-screen__card {
  display: grid; justify-items: center; gap: var(--mat-space-3); text-align: center;
  width: min(28rem, 100%); padding: var(--mat-space-6) var(--mat-space-5) var(--mat-space-5);
  background: var(--mat-surface); border: 1px solid var(--mat-border); border-radius: var(--mat-radius-lg);
  box-shadow: var(--mat-shadow-3);
}
/* the Matmon logo over the card, with a rule under it: this is Matmon updating itself, not some page waiting */
.mm-update-screen__logo { display: flex; justify-content: center; width: 100%; padding-bottom: var(--mat-space-4); margin-bottom: var(--mat-space-1); border-bottom: 1px solid var(--mat-border); }
.mm-update-screen__logo img { height: 32px; width: auto; }
.mm-update-screen__card .mat-spinner { margin-top: var(--mat-space-2); }
.mm-update-screen__card h2 { margin: 0; font-size: var(--mat-fs-xl); }
.mm-update-screen__card p { margin: 0; }
/* the two versions, old above new with an arrow pointing down between them: a version label is long */
.mm-update-versions { display: grid; justify-items: center; gap: var(--mat-space-1); width: 100%; max-width: 100%; overflow-wrap: anywhere;
  padding: var(--mat-space-3); background: var(--mat-surface-2); border-radius: var(--mat-radius-md); }
.mm-update-versions__arrow { display: inline-flex; color: var(--mat-text-muted); }
.mm-update-versions[hidden] { display: none; }
/* the steps and the download the instance reports while the tunnel is up - the SAME rules as the instance's system.css */
/* the steps as a block in the middle of the card, set off from the status line above by a short rule */
.mm-update-steps { list-style: none; margin: var(--mat-space-2) 0 0; padding: var(--mat-space-3) 0 0; justify-self: center; min-width: 60%; border-top: 1px solid var(--mat-border); display: grid; gap: var(--mat-space-2); text-align: left; font-size: var(--mat-fs-sm); }
.mm-update-steps[hidden] { display: none; }
.mm-update-steps li { display: grid; grid-template-columns: 1.25rem 1fr; align-items: center; gap: var(--mat-space-2); color: var(--mat-text-muted); }
.mm-update-steps li::before { content: ""; justify-self: center; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--mat-border-strong); }
.mm-update-steps li[data-state="done"] { color: var(--mat-text); }
.mm-update-steps li[data-state="done"]::before { content: "\2713"; width: auto; height: auto; border: 0; border-radius: 0; color: var(--mat-success); font-weight: 700; line-height: 1; }
.mm-update-steps li[data-state="current"] { color: var(--mat-text); font-weight: 600; }
.mm-update-steps li[data-state="current"]::before { border-color: var(--mat-accent); background: var(--mat-accent); animation: mm-update-pulse 1.2s var(--mat-ease) infinite; }
@keyframes mm-update-pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .mm-update-steps li[data-state="current"]::before { animation: none; } }
/* the download: a meter, "80 of 115 MB · 2.4 MB/s · about 15 s left", and what happened when the line broke off */
.mm-update-download { display: grid; gap: var(--mat-space-1); width: 100%; }
.mm-update-download[hidden], .mm-update-download [hidden] { display: none; }
.mm-update-screen[hidden] { display: none; }

/* ---- The menu brand: the full Matmon logo (mark + lettering) above the part of the cloud this is ---- */
.mat-nav__brand .mm-brand--stacked { flex-direction: column; align-items: flex-start; gap: var(--mat-space-2); }
.mat-nav__brand .mm-brandlogo { height: 30px; width: auto; }
/* the line under the logo stays ONE line (a long instance name ends in an ellipsis), so the brand is the same height everywhere */
.mat-nav__brand .mm-brand--stacked { min-width: 0; max-width: 100%; }
.mat-nav__brand .mm-brand--stacked > span { display: block; min-width: 0; max-width: 100%; }

/* The full Matmon logo (mark + lettering) on the sign-in, setup and about cards - one per theme (mat-brandmark--light/--dark). */
.mm-authlogo { height: 44px; width: auto; max-width: 100%; }

/* About on a partner's address: its brand first, then "powered by" and the Matmon logo, smaller, on one line. */
.mm-about-powered { display: flex; align-items: center; gap: var(--mat-space-2); flex-wrap: wrap; }
.mm-about-powered__logo { height: 24px; width: auto; }

/* A button or pill in a card head must not make that head taller than the others: it may reach into the head's padding. */
.mat-card__head > .mat-btn,
.mat-card__head > form > .mat-btn,
.mat-card__head > .mat-btn-row,
.mat-card__head > .mat-pill { margin-block: -0.75rem; }