/* ==========================================================================
   MASAR — 3-components.css  (part 1: controls, form, feedback)
   Every class is prefixed `m-`. One component, one class family, one place.
   A page may compose these; a page may not restyle them.
   ========================================================================== */

/* ============================================================== BUTTON */

.m-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:var(--control-h);padding:0 14px;
  border-radius:9px;border:1px solid transparent;
  font:var(--ty-label);font-weight:600;white-space:nowrap;
  transition:background var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease),
             transform var(--t-fast) var(--ease);
}
.m-btn:active{transform:scale(.985)}
.m-btn svg,.m-btn .m-ic{flex:0 0 auto;width:16px;height:16px}

/* the primary carries a coloured glow and an inner highlight — the one
   button on the screen that visibly wants to be pressed */
.m-btn--primary{
  background:var(--accent);color:var(--accent-on);
  box-shadow:0 1px 2.5px color-mix(in srgb,var(--accent) 45%,transparent),
             inset 0 1px 0 rgba(255,255,255,.14);
}
.m-btn--primary:hover{
  background:var(--accent-hover);
  box-shadow:0 3px 10px color-mix(in srgb,var(--accent) 40%,transparent),
             inset 0 1px 0 rgba(255,255,255,.14);
}
.m-btn--primary:active{background:var(--accent-press)}

.m-btn--secondary{background:var(--surface);color:var(--text);border-color:var(--line);box-shadow:var(--sh-xs)}
.m-btn--secondary:hover{background:var(--surface-sunken);border-color:var(--line-strong)}

.m-btn--ghost{background:transparent;color:var(--text-2)}
.m-btn--ghost:hover{background:var(--surface-sunken);color:var(--text)}

.m-btn--soft{background:var(--accent-soft);color:var(--accent-press);border-color:var(--accent-soft-line)}
.m-btn--soft:hover{background:var(--accent-soft-line)}

.m-btn--danger{background:var(--crit-fill);color:var(--on-crit)}
.m-btn--danger:hover{background:var(--c-red-600)}
.m-btn--danger-soft{background:var(--crit-soft);color:var(--critical);border-color:var(--crit-line)}
.m-btn--danger-soft:hover{background:var(--crit-line)}

.m-btn--success{background:var(--ok-fill);color:var(--on-ok)}
.m-btn--success:hover{background:var(--c-green-600)}

/* identity button — used once per screen at most, for the signature action */
.m-btn--identity{background:var(--identity);color:var(--identity-on)}
.m-btn--identity:hover{background:var(--identity-deep)}

.m-btn--sm{height:var(--control-h-sm);padding:0 10px;font:var(--ty-label-sm);font-weight:600;border-radius:8px}
.m-btn--sm svg,.m-btn--sm .m-ic{width:14px;height:14px}
.m-btn--lg{height:var(--control-h-lg);padding:0 18px}
.m-btn--block{width:100%}
.m-btn:disabled,.m-btn[aria-disabled="true"]{opacity:.5;pointer-events:none}

/* ============================================================== ICON BUTTON */

.m-icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--control-h);height:var(--control-h);flex:0 0 auto;
  border-radius:var(--r-sm);color:var(--text-2);position:relative;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.m-icon-btn:hover{background:var(--surface-sunken);color:var(--text)}
.m-icon-btn[aria-pressed="true"],.m-icon-btn.is-on{background:var(--accent-soft);color:var(--accent-press)}
.m-icon-btn--sm{width:28px;height:28px;border-radius:var(--r-xs)}
.m-icon-btn--round{border-radius:var(--r-full)}
.m-icon-btn svg{width:18px;height:18px}
.m-icon-btn--sm svg{width:15px;height:15px}
.m-icon-btn__badge{
  position:absolute;top:2px;inset-inline-end:2px;min-width:16px;height:16px;padding:0 4px;
  border-radius:var(--r-full);background:var(--crit-fill);color:var(--on-crit);
  font:600 10px/16px var(--font);text-align:center;
  box-shadow:0 0 0 2px var(--surface);
}
.m-icon-btn__badge[data-count="0"]{display:none}

/* ============================================================== SEGMENTED */

.m-seg{
  display:inline-flex;align-items:center;gap:2px;padding:3px;
  background:var(--surface-sunken);border:1px solid var(--line);
  border-radius:var(--r-sm);
}
.m-seg button{
  height:26px;padding:0 11px;border-radius:var(--r-xs);
  font:var(--ty-label-sm);color:var(--text-2);white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.m-seg button svg{width:14px;height:14px}
.m-seg button:hover{color:var(--text)}
.m-seg button[aria-pressed="true"],.m-seg button.is-on{
  background:var(--surface);color:var(--text);box-shadow:var(--sh-xs);
}
.m-seg--lg button{height:30px;padding:0 14px;font:var(--ty-label)}

/* ============================================================== TABS */

/* TABS ARE PILLS, NOT AN UNDERLINE. The active view is a filled shape the
   eye finds from across the room; hover is a quiet ghost. One language for
   every strip in the product — the band, a card, a dialog. */
.m-tabs{
  display:flex;align-items:center;gap:3px;
  overflow-x:auto;scrollbar-width:none;
  padding:3px 0;
}
.m-tabs::-webkit-scrollbar{display:none}
.m-tab{
  position:relative;display:inline-flex;align-items:center;gap:7px;
  height:30px;padding:0 12px;white-space:nowrap;border-radius:9px;
  font:var(--ty-label);font-weight:550;color:var(--text-2);
  transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.m-tab svg{width:15px;height:15px;opacity:.8}
.m-tab:hover{color:var(--text);background:var(--surface-sunken)}
.m-tab[aria-selected="true"]{
  color:var(--accent-press);font-weight:650;
  background:var(--accent-soft);
}
.m-tab[aria-selected="true"] svg{opacity:1}
.m-tab__n{
  min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-full);
  background:var(--neutral-soft);color:var(--text-2);
  font:600 10.5px/18px var(--font);text-align:center;
}
.m-tab[aria-selected="true"] .m-tab__n{background:var(--accent-soft);color:var(--accent-press)}
.m-tab__n--alert{background:var(--crit-soft);color:var(--critical)}

/* ============================================================== CHIP */

.m-chip{
  display:inline-flex;align-items:center;gap:6px;
  height:26px;padding:0 10px;border-radius:var(--r-full);
  background:var(--surface);border:1px solid var(--line-strong);
  font:var(--ty-label-sm);color:var(--text-2);white-space:nowrap;
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.m-chip svg{width:13px;height:13px}
.m-chip:hover{border-color:var(--c-n-400);color:var(--text)}
.m-chip[aria-pressed="true"],.m-chip.is-on{
  background:var(--accent-soft);border-color:var(--accent-soft-line);color:var(--accent-press);font-weight:600;
}
.m-chip__dot{width:8px;height:8px;border-radius:var(--r-full);background:var(--neutral-fill);flex:0 0 auto}
.m-chip__n{font-variant-numeric:tabular-nums;color:var(--text-3);font-weight:600}
.m-chip[aria-pressed="true"] .m-chip__n{color:var(--accent-press)}
.m-chip__x{display:inline-flex;margin-inline-end:-3px;opacity:.6}
.m-chip__x:hover{opacity:1}
.m-chip--static{pointer-events:none}

/* ============================================================== STATUS PILL
   A status is never colour alone: the pill always carries its word, and
   the dot is a second channel, not the only one.                        */

.m-pill{
  display:inline-flex;align-items:center;gap:5px;
  height:20px;padding:0 8px;border-radius:var(--r-full);
  font:var(--ty-label-sm);white-space:nowrap;
  background:var(--neutral-soft);color:var(--neutral);border:1px solid transparent;
}
.m-pill__dot{width:6px;height:6px;border-radius:var(--r-full);background:currentColor;flex:0 0 auto}
.m-pill svg{width:12px;height:12px}
.m-pill--ok{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-line)}
.m-pill--live{background:var(--live-soft);color:var(--live);border-color:var(--live-line)}
.m-pill--warn{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-line)}
.m-pill--crit{background:var(--crit-soft);color:var(--critical);border-color:var(--crit-line)}
.m-pill--info{background:var(--info-soft);color:var(--info);border-color:var(--info-line)}
.m-pill--chain{background:var(--chain-soft);color:var(--chain);border-color:var(--chain-line)}
.m-pill--neutral{background:var(--neutral-soft);color:var(--neutral);border-color:var(--neutral-line)}
.m-pill--solid{border:0}
.m-pill--solid.m-pill--ok{background:var(--ok-fill);color:var(--on-ok)}
.m-pill--solid.m-pill--warn{background:var(--warn-fill);color:#3A2A00}
.m-pill--solid.m-pill--crit{background:var(--crit-fill);color:var(--on-crit)}
.m-pill--solid.m-pill--info{background:var(--info-fill);color:var(--on-info)}
.m-pill--lg{height:24px;padding:0 10px;font:var(--ty-label)}

/* a bare live dot, for "connected" indicators */
.m-dot{display:inline-block;width:8px;height:8px;border-radius:var(--r-full);background:var(--neutral-fill);flex:0 0 auto}
.m-dot--ok{background:var(--ok-fill)} .m-dot--warn{background:var(--warn-fill)}
.m-dot--crit{background:var(--crit-fill)} .m-dot--live{background:var(--live-fill)}
.m-dot--info{background:var(--info-fill)}
.m-dot--beat{animation:m-breathe 2.4s var(--ease) infinite}

/* ============================================================== FORM */

.m-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.m-field__label{font:var(--ty-label);color:var(--text-2)}
.m-field__label .m-req{color:var(--critical);margin-inline-start:2px}
.m-field__hint{font:var(--ty-caption);color:var(--text-3)}
.m-field__error{font:var(--ty-caption);color:var(--critical);display:flex;align-items:center;gap:4px}

.m-input,.m-select,.m-textarea{
  width:100%;height:var(--control-h);padding:0 11px;
  background:var(--surface);color:var(--text);
  border:1px solid var(--line-strong);border-radius:var(--r-sm);
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
  font:var(--ty-body);
}
.m-textarea{height:auto;min-height:76px;padding:9px 11px;resize:vertical;line-height:1.5}
.m-input::placeholder,.m-textarea::placeholder{color:var(--text-3)}
.m-input:hover,.m-select:hover,.m-textarea:hover{border-color:var(--c-n-400)}
.m-input:focus,.m-select:focus,.m-textarea:focus{
  border-color:var(--accent);box-shadow:var(--focus-ring);outline:none;
}
.m-input[aria-invalid="true"],.m-select[aria-invalid="true"]{border-color:var(--crit-fill)}
.m-input:disabled,.m-select:disabled,.m-textarea:disabled{background:var(--surface-sunken);color:var(--text-3)}

.m-select{
  appearance:none;padding-inline-end:30px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  background-position:right 13px center,right 8px center;
  color:var(--text);
}
html[dir="rtl"] .m-select{background-position:left 8px center,left 13px center}
.m-select--sm,.m-input--sm{height:var(--control-h-sm);font:var(--ty-body-sm);padding-inline:9px}
.m-select--sm{padding-inline-end:26px}

/* search input with a leading icon */
.m-search{position:relative;display:flex;align-items:center;min-width:0}
.m-search__ic{
  position:absolute;inset-inline-start:11px;display:flex;color:var(--text-3);
  pointer-events:none;
}
.m-search__ic svg{width:16px;height:16px}
.m-search .m-input{padding-inline-start:34px}
.m-search__clear{position:absolute;inset-inline-end:6px}

/* switch */
.m-switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;min-width:0}
.m-switch input{position:absolute;opacity:0;width:0;height:0}
.m-switch__track{
  position:relative;flex:0 0 auto;width:36px;height:20px;border-radius:var(--r-full);
  background:var(--c-n-300);transition:background var(--t-fast) var(--ease);
}
.m-switch__track::after{
  content:'';position:absolute;top:2px;inset-inline-start:2px;
  width:16px;height:16px;border-radius:var(--r-full);background:#fff;
  box-shadow:var(--sh-xs);
  transition:transform var(--t-fast) var(--ease);
}
.m-switch input:checked + .m-switch__track{background:var(--accent)}
.m-switch input:checked + .m-switch__track::after{transform:translateX(16px)}
html[dir="rtl"] .m-switch input:checked + .m-switch__track::after{transform:translateX(-16px)}
.m-switch input:focus-visible + .m-switch__track{box-shadow:var(--focus-ring)}
.m-switch input:disabled + .m-switch__track{opacity:.45}
.m-switch__text{display:flex;flex-direction:column;gap:1px;min-width:0}
.m-switch__text b{font:var(--ty-label);color:var(--text);font-weight:550}
.m-switch__text span{font:var(--ty-caption);color:var(--text-3)}

/* checkbox */
.m-check{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.m-check input{position:absolute;opacity:0;width:0;height:0}
.m-check__box{
  flex:0 0 auto;width:16px;height:16px;border-radius:4px;
  border:1.5px solid var(--line-strong);background:var(--surface);
  display:grid;place-items:center;
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.m-check__box::after{
  content:'';width:8px;height:4px;margin-top:-2px;
  border:0 solid #fff;border-width:0 0 2px 2px;transform:rotate(-45deg) scale(0);
  transition:transform var(--t-fast) var(--ease);
}
.m-check input:checked + .m-check__box{background:var(--accent);border-color:var(--accent)}
.m-check input:checked + .m-check__box::after{transform:rotate(-45deg) scale(1)}
.m-check input:indeterminate + .m-check__box{background:var(--accent);border-color:var(--accent)}
.m-check input:indeterminate + .m-check__box::after{
  width:8px;height:0;margin:0;border-width:0 0 2px 0;transform:none;
}
.m-check input:focus-visible + .m-check__box{box-shadow:var(--focus-ring)}

/* ============================================================== FEEDBACK */

.m-banner{
  display:flex;align-items:center;gap:9px;
  padding:7px 12px;border-radius:var(--r-md);
  border:1px solid var(--info-line);background:var(--info-soft);color:var(--info);
  font:var(--ty-caption);
}
.m-banner svg{width:15px;height:15px;flex:0 0 auto}
/* one line: the notice, then as much of the detail as the line holds */
.m-banner__x{
  flex:1 1 auto;min-width:0;color:var(--text);
  display:flex;align-items:baseline;gap:7px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.m-banner__x b{flex:0 0 auto;font:var(--ty-label);font-size:12px;color:inherit}
.m-banner__x span{flex:1 1 auto;min-width:0;color:var(--text-2);overflow:hidden;text-overflow:ellipsis}
.m-banner--warn{border-color:var(--warn-line);background:var(--warn-soft);color:var(--warn)}
.m-banner--crit{border-color:var(--crit-line);background:var(--crit-soft);color:var(--critical)}
.m-banner--ok{border-color:var(--ok-line);background:var(--ok-soft);color:var(--ok)}
.m-banner--demo{border-color:var(--c-sand-300);background:var(--c-sand-50);color:var(--c-sand-500)}
html[data-theme="dark"] .m-banner--demo{background:rgba(156,134,89,.16);border-color:rgba(156,134,89,.34);color:var(--c-sand-300)}

.m-toasts{
  position:fixed;bottom:22px;inset-inline-end:22px;z-index:var(--z-toast);
  display:flex;flex-direction:column-reverse;gap:10px;align-items:flex-end;
  pointer-events:none;
}
.m-toast{
  pointer-events:auto;display:flex;align-items:center;gap:10px;
  min-width:260px;max-width:400px;padding:11px 14px;
  background:var(--surface-raised);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--sh-lg);
  font:var(--ty-body-sm);
  animation:m-rise var(--t-base) var(--ease-out) both;
}
.m-toast.is-out{animation:m-fade var(--t-base) var(--ease) reverse both}
.m-toast__ic{width:18px;height:18px;flex:0 0 auto;display:grid;place-items:center;border-radius:var(--r-full)}
.m-toast--ok .m-toast__ic{background:var(--ok-soft);color:var(--ok)}
.m-toast--warn .m-toast__ic{background:var(--warn-soft);color:var(--warn)}
.m-toast--crit .m-toast__ic{background:var(--crit-soft);color:var(--critical)}
.m-toast--info .m-toast__ic{background:var(--info-soft);color:var(--info)}
.m-toast__ic svg{width:12px;height:12px}
.m-toast__x{flex:1 1 auto;min-width:0}

/* ============================================================== EMPTY / LOAD / ERROR
   Every empty state says what it is AND what to do next. */

.m-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:36px 24px;text-align:center;min-height:140px;
}
.m-empty__ic{
  width:44px;height:44px;border-radius:var(--r-lg);display:grid;place-items:center;
  background:var(--surface-sunken);color:var(--text-3);
}
.m-empty__ic svg{width:21px;height:21px}
.m-empty b{font:var(--ty-h3);color:var(--text)}
.m-empty span{font:var(--ty-body-sm);color:var(--text-2);max-width:40ch}
.m-empty--ok .m-empty__ic{background:var(--ok-soft);color:var(--ok)}
.m-empty--crit .m-empty__ic{background:var(--crit-soft);color:var(--critical)}
.m-empty--sm{padding:22px 16px;min-height:0}
.m-empty--sm .m-empty__ic{width:34px;height:34px}

.m-skel{
  background:linear-gradient(90deg,var(--surface-sunken) 25%,var(--line-subtle) 50%,var(--surface-sunken) 75%);
  background-size:320px 100%;border-radius:var(--r-sm);
  animation:m-shimmer 1.3s linear infinite;
}
.m-skel--text{height:11px;margin:5px 0}
.m-skel--row{height:var(--row-h);margin-bottom:1px;border-radius:0}
.m-spinner{
  width:16px;height:16px;flex:0 0 auto;border-radius:var(--r-full);
  border:2px solid var(--line);border-top-color:var(--accent);
  animation:m-spin .7s linear infinite;
}

/* ============================================================== TOOLTIP */

.m-tip{
  position:fixed;z-index:var(--z-toast);pointer-events:none;
  max-width:240px;padding:6px 9px;border-radius:var(--r-xs);
  background:var(--c-navy-900);color:#fff;
  font:var(--ty-caption);box-shadow:var(--sh-md);
  opacity:0;transform:translateY(3px);
  transition:opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
.m-tip.is-on{opacity:1;transform:none}
html[data-theme="dark"] .m-tip{background:#2C3A4D}

/* ============================================================== SETTING ROW
   Label and description on one side, the control on the other. Used by
   Settings, Modules, Automation and every preferences surface. */
.m-setting{
  display:flex;align-items:center;gap:var(--s-4);
  padding:13px 0;border-bottom:1px solid var(--line-subtle);
}
.m-setting:last-child{border-bottom:0}
.m-setting__x{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.m-setting__x b{font:var(--ty-label);color:var(--text);font-weight:550}
.m-setting__x span{font:var(--ty-caption);color:var(--text-2);line-height:1.5}
.m-setting__c{flex:0 0 auto;display:flex;align-items:center;gap:var(--s-2)}
@media (max-width:640px){
  .m-setting{flex-direction:column;align-items:stretch}
  .m-setting__c{justify-content:flex-start}
}

/* ==================================================================== STATS
   The quiet form of a number. A row of KPI cards is five boxes, five icons
   and five shadows arguing with the work underneath them; where the figures
   are context rather than the subject, they get one line and no chrome. */

/* the figure line: airy, no drawn dividers — the gap is the divider. The
   label is a micro-caption over a tabular figure, and a clickable figure
   raises a quiet pill under the cursor. */
.m-stats{
  display:flex;align-items:stretch;flex-wrap:wrap;
  gap:4px;padding:0;
}
.m-stats__i{
  display:flex;flex-direction:column;gap:0;justify-content:center;
  padding:2px 12px;text-align:start;position:relative;
  border-radius:9px;
}
.m-stats__i:first-child{padding-inline-start:0}
button.m-stats__i{cursor:pointer;transition:background var(--t-fast) var(--ease)}
button.m-stats__i:hover{background:var(--surface-sunken)}
.m-stats__v{
  font:var(--ty-metric-sm);font-size:16.5px;line-height:1.25;color:var(--text);
  font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:4px;
}
.m-stats__v em{font:var(--ty-caption);font-style:normal;color:var(--text-3);font-size:12px}
.m-stats__v small{font:var(--ty-caption);color:var(--text-3);font-size:11px}
.m-stats__v.is-crit{color:var(--critical)}
.m-stats__v.is-warn{color:var(--warn)}
.m-stats__v.is-ok{color:var(--ok)}
.m-stats__l{
  font:var(--ty-caption);font-size:9.5px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-3);white-space:nowrap;
}
@media (max-width:900px){
  .m-stats__i{padding-inline:14px}
}

/* THE FIGURE LINE IS THE MIDDLE COLUMN OF THE HEADER GRID.
   It is centred on the page, not on the gap the title happened to leave,
   and it is given a shape of its own — a sunken tray with hairline
   dividers — so a row of numbers reads as one object rather than as text
   scattered across the header. */
/* ON THE PAGE, when the bar had no room for it: a full-width line under the
   page's tabs, reading from the start like everything else on the page. */
.m-stats-slot{display:flex;justify-content:flex-start;min-width:0}
.m-stats-slot .m-stats{justify-content:flex-start}
/* IN THE BAR: centred, and shaped as one object */
.m-top__figs .m-stats-slot{justify-content:center}
.m-stats-slot .m-stats{
  flex-wrap:nowrap;
  padding:2px 2px;border-radius:var(--r-md);
  background:var(--surface-sunken);border:1px solid var(--line-subtle);
}
.m-stats-slot .m-stats__i{
  padding:2px 13px;align-items:center;text-align:center;gap:0;
}
.m-stats-slot .m-stats__i:first-child{padding-inline-start:13px}
.m-top__figs .m-stats{justify-content:center}
.m-stats-slot .m-stats__i + .m-stats__i::before{inset-block:4px}
.m-stats-slot .m-stats__v{font-size:15px;justify-content:center}
.m-stats-slot .m-stats__l{font-size:10.4px}
.m-page-head__acts,.m-head__acts{flex-wrap:nowrap}
@media (max-width:1380px){
  /* the centred line would run into the title on one side or the buttons on
     the other, so it gives up the bar; every figure it carried is still on
     the page it belongs to */
  .m-top__figs{display:none}
}

/* ============================================================== PAGE HEADER
   One shape on every page: what this place is, what you can do to the whole
   of it, and — under a single hairline — its own sections. The tabs never
   move from this line, so arriving on a page never means finding the
   navigation again. */

.m-head{display:flex;flex-direction:column;gap:0;flex:0 0 auto}
/* the same band and the same three columns as .m-page-head */
.m-head__top{
  flex:0 0 auto;
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;column-gap:var(--s-4);
  margin:0 calc(var(--gutter) * -1);
  padding:6px var(--gutter);min-height:42px;
  background:var(--surface);border-bottom:1px solid var(--line);
}
.m-head:has(.m-tabs--head) .m-head__top{border-bottom:0}
.m-head__x{
  grid-column:1;display:flex;flex-direction:row;align-items:baseline;
  gap:8px;min-width:0;
}
.m-head__x h1{
  font:var(--ty-h1);color:var(--text);letter-spacing:-.018em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.m-head__x p{
  font:var(--ty-caption);color:var(--text-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.m-head__acts{
  grid-column:3;justify-self:end;
  display:flex;align-items:center;gap:var(--s-2);flex:0 0 auto;
}
.m-head--tabs{gap:0}

/* the tab strip on the shell's band */
.m-tabs--head{gap:2px}

/* The strip lives on the shell's band now (see .m-bar in 5-shell.css), so
   it carries no bleed, no ground and no rule of its own — the band has all
   three, and the strip shares them with the figures beside it. */
.m-tabs--head{
  /* it may shrink and scroll inside the band; refusing to would push the
     figures beside it off the end of the row */
  flex:0 1 auto;min-width:0;margin:0;padding:0;background:none;border-bottom:0;
}
.m-tabs--head .m-tab{height:28px;padding:0 11px;font-size:11.8px;border-radius:8px}
/* the figure tray and the page filters share the band too */
.m-stats__d{
  display:inline-flex;align-items:center;gap:2px;
  font:600 11px/1 var(--font);font-style:normal;color:var(--text-3);
}
.m-stats__d svg{width:11px;height:11px}
.m-stats__d.is-up{color:var(--ok)}
.m-stats__d.is-down{color:var(--critical)}
.m-stats__d.is-good{color:var(--ok)}
.m-stats__d.is-bad{color:var(--critical)}

/* ------------------------------------------------------------- folded notes
   In page content a notice is a pill: icon + its title (or first line of
   text), with the whole text in a popover on hover, focus or click. Inside
   a drawer or a modal the SAME markup is the full strip again — there the
   person is mid-action and the note must be read, not hovered. */
.m-banner--fold{
  display:inline-flex;width:auto;max-width:100%;align-self:flex-start;
  position:relative;padding:3px 10px;border-radius:var(--r-full);
  cursor:default;vertical-align:middle;
}
.m-banner--fold svg{width:13px;height:13px}
.m-banner--fold .m-banner__x{flex:0 1 auto}
.m-banner--fold .m-banner__x b ~ span{display:none}
.m-banner--fold .m-banner__x > span{max-width:52ch}
.m-banner--fold:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.m-banner--fold + .m-banner--fold{margin-inline-start:6px}
.m-banner__pop{
  display:none;position:absolute;z-index:70;
  top:calc(100% + 6px);inset-inline-start:0;
  width:max-content;max-width:min(460px,72vw);
  padding:10px 12px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--line);
  box-shadow:0 10px 28px rgba(9,30,54,.16);
  font:var(--ty-body-sm);line-height:1.6;color:var(--text-2);
  white-space:normal;cursor:auto;
}
.m-banner__pop b{display:block;margin-block-end:4px;font:var(--ty-label);color:var(--text)}
.m-banner__pop p{margin:0}
.m-banner__pop .m-btn{margin-block-start:8px}
.m-banner--fold:hover .m-banner__pop,
.m-banner--fold:focus-visible .m-banner__pop,
.m-banner--fold.is-pin .m-banner__pop{display:block}
.m-banner--fold.m-note-flip .m-banner__pop{inset-inline-start:auto;inset-inline-end:0}
/* a pill sitting directly in a flush card body needs its own breathing room */
.m-card__body--flush > .m-banner--fold{margin:10px 12px 4px}
.m-card__body--flush > .m-banner--fold + .m-banner--fold{margin-inline-start:0}
/* the strip again, where reading it is the point */
.m-drawer .m-banner--fold,
.m-modal .m-banner--fold{
  display:flex;width:auto;max-width:none;position:static;
  padding:7px 12px;border-radius:var(--r-md);cursor:auto;
}
.m-drawer .m-banner--fold .m-banner__x b ~ span,
.m-modal .m-banner--fold .m-banner__x b ~ span{display:inline}
.m-drawer .m-banner--fold .m-banner__x > span,
.m-modal .m-banner--fold .m-banner__x > span{max-width:none}
.m-drawer .m-banner--fold svg,
.m-modal .m-banner--fold svg{width:15px;height:15px}
.m-drawer .m-banner__pop,
.m-modal .m-banner__pop{display:none !important}