/* GENERATED FILE - DO NOT EDIT.
   tokens.css + master.css synced from @navipoint/ui v0.3.0 (navipoint-ui repo)
   by scripts/sync-demo-lib.mjs. Edit the package sources and re-sync. */

/* ═══════════════════════════════════════════════════════════════════════
   @navipoint/ui - design tokens (the master template palette)
   ─────────────────────────────────────────────────────────────────────
   Single source of truth for the locked palette from the design contract
   at _docs/optiq-hq/MASTER-TEMPLATE.md (vertis-workspace-docs repo).

   THEMING: every component in this library styles itself exclusively
   through these custom properties. A product keeps its own brand by
   overriding the variables AFTER importing this file, e.g. DomusOS:

     :root {
       --mt-ink-950: #0a0a0a;
       --mt-accent-500: #06b6d4;
       ...
     }

   Do not add new tokens casually: the four semantic colors (accent, ok,
   watch, stall) carry every severity signal in the system.
   ═══════════════════════════════════════════════════════════════════════ */

/* Label font (badges, verdict pills): picked Manrope in the 2026-06-10
   component review. Imported here (not index.css) because the demo-lib
   sync concatenates tokens.css + master.css, and @import must lead. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700&display=swap');

:root {
  /* ── ink (page + card backgrounds) ─────────────────────────────── */
  --mt-ink-950: #0b1220;
  --mt-ink-900: #101828;
  --mt-ink-800: #1d2a3d;
  --mt-ink-700: #344054;

  /* ── accent (primary brand teal) ───────────────────────────────── */
  --mt-accent-400: #2dd4bf;
  --mt-accent-500: #14b8a6;
  --mt-accent-600: #0d9488;

  /* ── paper (text on dark) ──────────────────────────────────────── */
  --mt-paper-50:  #f6f7fb;
  --mt-paper-100: #eef1f6;
  --mt-paper-200: #e3e7ee;

  /* ── chrome ────────────────────────────────────────────────────── */
  --mt-muted: #6b7a90;

  /* ── semantic (severity) ───────────────────────────────────────── */
  --mt-ok:    #10b981; /* on-track / system-action / positive  */
  --mt-watch: #f59e0b; /* needs attention / soft warning       */
  --mt-stall: #f43f5e; /* stalled / overdue / critical         */
  --mt-info:  #60a5fa; /* informational / external (calendar meetings, links) */

  /* ── typography ────────────────────────────────────────────────── */
  --mt-font: 'Inter', ui-sans-serif, system-ui, sans-serif;
  /* chips + labels (badges, verdict pills); review pick 2026-06-10 */
  --mt-font-label: 'Manrope', 'Inter', ui-sans-serif, system-ui, sans-serif;
}

/* ═══════════════════════════════════════════════════════════════════════
   @navipoint/ui - Master Template component classes (mt-*)
   ─────────────────────────────────────────────────────────────────────
   Framework-agnostic CSS primitives. Two audiences:

   1. HTML surfaces (the 70 demo-library master templates) use the
      template classes directly, layered on top of Tailwind CDN.
   2. The React components in this package render these classes, so
      products get the same visual language with zero Tailwind coupling
      (works under Tailwind 3, Tailwind 4, or no Tailwind at all).

   All colors come from the custom properties in tokens.css; override
   the tokens to theme, never edit colors here.

   Design contract: _docs/optiq-hq/MASTER-TEMPLATE.md (vertis-workspace-docs).
   Origin: promoted 2026-06-10 from _docs/demo-library/_lib/master.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Body baseline ─────────────────────────────────────────────────── */
body.mt { font-family: var(--mt-font); }

/* ═══════════════════════════════════════════════════════════════════
   PAGE SHELL - every template wraps in mt-page > mt-container
   =================================================================== */
.mt-page {
  background: var(--mt-ink-950);
  color: var(--mt-paper-100);
  min-height: 100vh;
}
.mt-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.75rem 2.5rem; /* py-7 px-10 */
}

/* ═══════════════════════════════════════════════════════════════════
   ROW 1 - breadcrumb + live badge
   =================================================================== */
.mt-topbar {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.75rem; margin-bottom: 1.5rem;
}
.mt-crumb       { color: var(--mt-muted); }
.mt-crumb-here  { color: var(--mt-paper-100); }
.mt-crumb-dim   { color: rgba(238, 241, 246, 0.8); }
.mt-crumb-sep   { opacity: 0.4; padding: 0 0.3rem; }
.mt-live {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.6875rem; color: var(--mt-ok);
}
.mt-live::before {
  content: ''; width: 0.375rem; height: 0.375rem;
  border-radius: 9999px; background: var(--mt-ok);
  animation: mt-pulse 2s infinite;
}
@keyframes mt-pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.4 } }

/* ═══════════════════════════════════════════════════════════════════
   ROW 2 - title block (eyebrow + huge title + subtitle)
   =================================================================== */
.mt-title-block { margin-bottom: 1.25rem; }
.mt-eyebrow {
  font-size: 0.6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 3px;
  color: var(--mt-muted); margin-bottom: 0.5rem;
}
.mt-title {
  font-size: 3rem; font-weight: 700;          /* text-5xl */
  letter-spacing: -0.025em; line-height: 1;
  color: var(--mt-paper-100); margin-bottom: 0.25rem;
}
.mt-title.is-huge { font-size: 3.75rem; margin-bottom: 0.5rem; } /* text-6xl (My Day) */
.mt-subtitle { font-size: 1rem; color: var(--mt-muted); }

/* My Day-style: title + KPIs side-by-side (instead of stacked) */
.mt-title-row {
  display: flex; align-items: flex-start; gap: 1.5rem; margin-bottom: 2rem;
}
.mt-title-row .mt-title-block { flex-shrink: 0; margin-bottom: 0; }

/* PageHeader (React): title block left, actions right */
.mt-page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap;
}
.mt-page-head .mt-title-block { margin-bottom: 0; }
.mt-title-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════════════════
   ROW 3a - HERO (1.3fr verdict / 1fr snapshot) - most common
   =================================================================== */
.mt-hero {
  display: grid; gap: 1rem; margin-bottom: 1.25rem;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
}
@media (max-width: 900px) { .mt-hero { grid-template-columns: 1fr; } }

.mt-hero-card {
  border: 1px solid var(--mt-ink-800);
  background: rgba(16, 24, 40, 0.5);
  border-radius: 0.75rem; padding: 1.25rem;
}
.mt-hero-card.is-ok     { border-color: color-mix(in srgb, var(--mt-ok)        25%, transparent); background: color-mix(in srgb, var(--mt-ok)        8%, transparent); }
.mt-hero-card.is-watch  { border-color: color-mix(in srgb, var(--mt-watch)     25%, transparent); background: color-mix(in srgb, var(--mt-watch)     8%, transparent); }
.mt-hero-card.is-stall  { border-color: color-mix(in srgb, var(--mt-stall)     25%, transparent); background: color-mix(in srgb, var(--mt-stall)     8%, transparent); }
.mt-hero-card.is-accent { border-color: color-mix(in srgb, var(--mt-accent-500) 25%, transparent); background: color-mix(in srgb, var(--mt-accent-500) 8%, transparent); }

.mt-hero-headline {
  font-size: 3rem; font-weight: 700;          /* text-5xl */
  font-variant-numeric: tabular-nums;
  color: var(--mt-paper-100); line-height: 1;
}
.mt-hero-narrative {
  font-size: 0.78125rem;                       /* 12.5px */
  line-height: 1.55;
  color: rgba(238, 241, 246, 0.85);
  margin-top: 0.75rem; padding-top: 0.75rem;
  border-top: 1px solid var(--mt-ink-800);
}
.mt-hero-snapshot {
  display: flex; flex-direction: column; justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════
   ROW 3b - BODY GRID (1.7fr / 1fr) - My Day-shape routes
   =================================================================== */
.mt-body-grid {
  display: grid; gap: 1.5rem;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
}
@media (max-width: 900px) { .mt-body-grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════════
   KPI STRIP - 4-tile (or 2-col on mobile) row of headline numbers
   =================================================================== */
.mt-kpi-strip {
  display: grid; gap: 0.75rem; margin-bottom: 1.25rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 768px) { .mt-kpi-strip { grid-template-columns: repeat(2, 1fr); } }

/* KPI tile, candidate F locked 2026-06-10: a toned tile wears a 3px
   stripe AND a 7% severity wash (exceptions shout, neutrals stay
   plain); the delta chip lives top-right in the head; the sparkline
   fills the right of the value row; helpers clip, never wrap. */
.mt-kpi {
  border: 1px solid var(--mt-ink-800);
  background: rgba(16, 24, 40, 0.6);
  border-radius: 0.75rem; padding: 1.125rem 1.25rem;
  transition: border-color 0.15s;
}
.mt-kpi:hover { border-color: var(--mt-ink-700); }
.mt-kpi.is-accent { box-shadow: inset 3px 0 0 var(--mt-accent-500); background: color-mix(in srgb, var(--mt-accent-500) 7%, rgba(16, 24, 40, 0.6)); }
.mt-kpi.is-ok     { box-shadow: inset 3px 0 0 var(--mt-ok);         background: color-mix(in srgb, var(--mt-ok)     7%, rgba(16, 24, 40, 0.6)); }
.mt-kpi.is-watch  { box-shadow: inset 3px 0 0 var(--mt-watch);      background: color-mix(in srgb, var(--mt-watch)  7%, rgba(16, 24, 40, 0.6)); }
.mt-kpi.is-stall  { box-shadow: inset 3px 0 0 var(--mt-stall);      background: color-mix(in srgb, var(--mt-stall)  7%, rgba(16, 24, 40, 0.6)); }
.mt-kpi-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 0.5rem;
}
.mt-kpi-label {
  font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--mt-muted);
}
.mt-kpi-value {
  font-size: 2.25rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  margin-top: 0.375rem;
  color: var(--mt-paper-100);
  line-height: 1.05;
}
.mt-kpi-value.size-lg { font-size: 2.75rem; }
.mt-kpi-value.is-accent { color: var(--mt-accent-400); }
.mt-kpi-value.is-ok     { color: var(--mt-ok); }
.mt-kpi-value.is-watch  { color: var(--mt-watch); }
.mt-kpi-value.is-stall  { color: var(--mt-stall); }
.mt-kpi-helper {
  font-size: 0.8125rem; font-weight: 500;
  color: var(--mt-muted); margin-top: 0.375rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mt-kpi-helper.is-ok    { color: var(--mt-ok); }
.mt-kpi-helper.is-watch { color: var(--mt-watch); }
.mt-kpi-helper.is-stall { color: var(--mt-stall); }

/* Value row: big number left, optional sparkline filling the right. */
.mt-kpi-bottomrow {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; margin-top: 0.375rem;
}
.mt-kpi-bottomrow .mt-kpi-value { margin-top: 0; }
.mt-kpi-bottomrow .mt-kpi-sparkslot { flex-shrink: 0; margin-bottom: 0.375rem; }

/* ═══════════════════════════════════════════════════════════════════
   VERDICT PILL - rounded badge with severity color
   =================================================================== */
.mt-verdict {
  display: inline-block;
  font-family: var(--mt-font-label); /* one chip family with mt-badge */
  font-size: 0.6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.5px;
  padding: 0.1875rem 0.625rem;
  border-radius: 0.375rem;
  border: 1px solid transparent;
}
.mt-verdict.is-ok    { background: color-mix(in srgb, var(--mt-ok)        15%, transparent); color: var(--mt-ok);          border-color: color-mix(in srgb, var(--mt-ok)        30%, transparent); }
.mt-verdict.is-watch { background: color-mix(in srgb, var(--mt-watch)     15%, transparent); color: var(--mt-watch);       border-color: color-mix(in srgb, var(--mt-watch)     30%, transparent); }
.mt-verdict.is-stall { background: color-mix(in srgb, var(--mt-stall)     15%, transparent); color: var(--mt-stall);       border-color: color-mix(in srgb, var(--mt-stall)     30%, transparent); }
.mt-verdict.is-accent{ background: color-mix(in srgb, var(--mt-accent-500) 15%, transparent); color: var(--mt-accent-400); border-color: color-mix(in srgb, var(--mt-accent-500) 30%, transparent); }

/* ═══════════════════════════════════════════════════════════════════
   CARD - generic content container (with optional header)
   =================================================================== */
.mt-card {
  border: 1px solid var(--mt-ink-800);
  background: rgba(16, 24, 40, 0.5);
  border-radius: 0.75rem;
  overflow: hidden;
}
.mt-card.is-bare { background: rgba(16, 24, 40, 0.4); }
.mt-card-h {
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--mt-ink-800);
  font-size: 0.6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--mt-muted); font-family: var(--mt-font-label);
}
.mt-card-h-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
}
.mt-card-padded { padding: 1.25rem; }

/* ═══════════════════════════════════════════════════════════════════
   STAT ROW - label/value pair (snapshot lists, small cards)
   =================================================================== */
.mt-stat-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.25rem 0;
}
.mt-stat-row + .mt-stat-row { margin-top: 0.5rem; }
.mt-stat-label { font-size: 0.75rem; color: var(--mt-muted); }
.mt-stat-value {
  font-size: 1.125rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--mt-paper-100);
}
.mt-stat-value.is-ok    { color: var(--mt-ok); }
.mt-stat-value.is-watch { color: var(--mt-watch); }
.mt-stat-value.is-stall { color: var(--mt-stall); }
.mt-stat-value.is-accent{ color: var(--mt-accent-400); }

/* ═══════════════════════════════════════════════════════════════════
   ALERT CARD - centerpiece pattern (MASTER-TEMPLATE.md section 4)
   =================================================================== */
/* Candidate C won the 2026-06-10 review and is now THE alert card:
   severity enters from one bold left edge (matches the KPI stripe),
   neutral border elsewhere, hover lift, briefing-style two-column body
   via mt-alert-cols when a why-block is present. */
.mt-alert {
  border: 1px solid var(--mt-ink-800);
  border-left-width: 4px;
  background: linear-gradient(135deg, var(--mt-ink-900), rgba(16, 24, 40, 0.4));
  border-radius: 0.75rem; padding: 1.25rem;
  transition: border-color 0.15s, transform 0.15s;
}
.mt-alert:hover { border-color: var(--mt-ink-700); transform: translateY(-1px); }
.mt-alert.is-ok,    .mt-alert.is-ok:hover    { border-left-color: var(--mt-ok); }
.mt-alert.is-watch, .mt-alert.is-watch:hover { border-left-color: var(--mt-watch); }
.mt-alert.is-stall, .mt-alert.is-stall:hover { border-left-color: var(--mt-stall); }
.mt-alert-row { display: flex; align-items: flex-start; gap: 1rem; }
.mt-alert-body { flex: 1; min-width: 0; }
.mt-alert-eyebrow {
  font-size: 0.6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 2px;
  margin-bottom: 0.25rem;
}
.mt-alert.is-ok    .mt-alert-eyebrow { color: var(--mt-ok); }
.mt-alert.is-watch .mt-alert-eyebrow { color: var(--mt-watch); }
.mt-alert.is-stall .mt-alert-eyebrow { color: var(--mt-stall); }
.mt-alert-headline {
  font-size: 1.375rem; font-weight: 600;
  color: var(--mt-paper-100); line-height: 1.3;
}
.mt-alert-detail {
  font-size: 0.9375rem; margin-top: 0.375rem;
  color: color-mix(in srgb, var(--mt-paper-100) 72%, transparent);
}
.mt-alert-actions {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem;
}
.mt-alert-chevron {
  font-size: 1.5rem; color: rgba(107, 122, 144, 0.4);
}

/* Top-right metadata cluster: age + verdict chip. */
.mt-alert-meta {
  display: flex; align-items: center; gap: 0.625rem;
  margin-left: auto; flex-shrink: 0;
}
.mt-alert-age { font-size: 0.75rem; font-weight: 600; color: var(--mt-muted); font-family: var(--mt-font-label); }
.mt-alert-headrow {
  display: flex; align-items: center; gap: 0.75rem;
  margin-bottom: 0.25rem;
}
.mt-alert-headrow .mt-alert-eyebrow { margin-bottom: 0; }

/* Two-column briefing body: headline + actions left, why-it-matters
   paragraph right. */
.mt-alert-cols {
  display: grid; gap: 1.5rem;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: start;
  margin-top: 0.25rem;
}
.mt-alert-cols .mt-alert-actions { margin-top: 1rem; }
.mt-alert-why {
  border-left: 1px solid var(--mt-ink-800);
  padding-left: 1.25rem;
  font-size: 0.9375rem; line-height: 1.55;
  color: color-mix(in srgb, var(--mt-paper-100) 72%, transparent);
}
.mt-alert-why p { margin: 0; }
.mt-alert-why-label {
  font-size: 0.625rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--mt-muted); font-family: var(--mt-font-label);
  margin-bottom: 0.375rem;
}

/* Ticker avatar (2-letter entity abbreviation) */
.mt-ticker {
  width: 2.5rem; height: 2.5rem;
  border-radius: 0.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.9375rem; font-weight: 700;
  font-family: var(--mt-font-label);
  flex-shrink: 0;
}
.mt-ticker.is-ok    { background: color-mix(in srgb, var(--mt-ok)    15%, transparent); color: var(--mt-ok); }
.mt-ticker.is-watch { background: color-mix(in srgb, var(--mt-watch) 15%, transparent); color: var(--mt-watch); }
.mt-ticker.is-stall { background: color-mix(in srgb, var(--mt-stall) 15%, transparent); color: var(--mt-stall); }

/* ═══════════════════════════════════════════════════════════════════
   BUTTONS (template-grade) - dense alert actions in the HTML templates.
   Same visual language as the product-grade mt-ui-btn set (review
   feedback 2026-06-10), compact sizing for alert-card action rows.
   =================================================================== */
.mt-btn {
  font-size: 0.75rem; font-weight: 600;
  padding: 0.375rem 0.875rem;
  border-radius: 0.5rem; border: 1px solid transparent;
  cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: 0.375rem;
  transition: background 0.15s, color 0.15s, transform 0.1s;
}
.mt-btn:active { transform: scale(0.97); }
.mt-btn-primary {
  background: var(--mt-accent-500); color: var(--mt-ink-950);
  border-color: var(--mt-accent-600);
}
.mt-btn-primary:hover { background: var(--mt-accent-600); }
.mt-btn-secondary {
  background: var(--mt-ink-800); color: var(--mt-paper-100);
  border-color: var(--mt-ink-700);
}
.mt-btn-secondary:hover { background: var(--mt-ink-700); }
.mt-btn-muted { background: transparent; color: var(--mt-muted); padding: 0.375rem 0.5rem; }
.mt-btn-muted:hover { color: var(--mt-paper-100); }

/* ═══════════════════════════════════════════════════════════════════
   TAB BAR - view switcher (income-statement, etc.)
   =================================================================== */
.mt-tabs {
  display: inline-flex; align-items: center; gap: 0.25rem;
  border: 1px solid var(--mt-ink-800);
  background: rgba(16, 24, 40, 0.4);
  border-radius: 0.75rem; padding: 0.25rem;
  font-size: 0.875rem; margin-bottom: 1.5rem;
}
.mt-tab {
  padding: 0.5rem 1rem; border-radius: 0.5rem;
  font-weight: 600; cursor: pointer;
  color: var(--mt-muted); background: transparent; border: none;
  font-family: var(--mt-font-label);
}
.mt-tab:hover { color: var(--mt-paper-100); }
.mt-tab.is-active {
  background: color-mix(in srgb, var(--mt-accent-500) 15%, transparent);
  color: var(--mt-accent-400);
}

/* ═══════════════════════════════════════════════════════════════════
   FOOTER HINT - italic muted right-aligned tagline at bottom
   =================================================================== */
.mt-footer-hint {
  font-size: 0.65625rem;                                /* 10.5px */
  color: color-mix(in srgb, var(--mt-muted) 70%, transparent);
  margin-top: 0.5rem; text-align: right; font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════
   QUICK ACTIONS GRID (My Day + Quick-Actions sections)
   =================================================================== */
.mt-quick-actions {
  display: grid; gap: 0.75rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mt-qa-tile {
  border: 1px solid var(--mt-ink-800);
  background: rgba(16, 24, 40, 0.6);
  border-radius: 0.5rem; padding: 1rem;
  text-align: left; cursor: pointer;
  font-family: inherit; color: var(--mt-paper-100);
  transition: border-color 0.15s;
}
.mt-qa-tile:hover { border-color: color-mix(in srgb, var(--mt-accent-500) 50%, transparent); }
.mt-qa-icon { font-size: 1.5rem; margin-bottom: 0.25rem; }
.mt-qa-label { font-size: 0.875rem; font-weight: 600; }
.mt-qa-helper { font-size: 0.6875rem; color: var(--mt-muted); margin-top: 0.125rem; }

/* ═══════════════════════════════════════════════════════════════════
   CAPTURE BOX - anchored bottom-right on day-shape routes (My Day)
   =================================================================== */
.mt-capture {
  margin-top: 1rem;
  border-radius: 0.75rem; padding: 1.25rem;
  background: linear-gradient(135deg, var(--mt-accent-500), var(--mt-accent-600));
  color: var(--mt-ink-950);
}
.mt-capture-label {
  font-size: 0.6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 2px;
  opacity: 0.7; margin-bottom: 0.5rem;
}
.mt-capture-btn {
  width: 100%; background: var(--mt-paper-100); color: var(--mt-accent-600);
  border-radius: 0.375rem; padding: 0.625rem 0;
  font-weight: 600; border: none; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
}
.mt-capture-btn:hover { background: var(--mt-paper-50); }
.mt-capture-helper { font-size: 0.6875rem; opacity: 0.8; margin-top: 0.75rem; }
.mt-capture-helper a { text-decoration: underline; cursor: pointer; }

/* ═══════════════════════════════════════════════════════════════════
   HOUR-GRID (My Day pattern - half-hour rows, visible gaps)
   =================================================================== */
.mt-hourgrid {
  border: 1px solid var(--mt-ink-800);
  background: rgba(16, 24, 40, 0.4);
  border-radius: 0.75rem; padding: 1rem;
}
.mt-hour-row {
  display: flex; align-items: center;
  padding: 0.25rem 0;
  border-top: 1px solid color-mix(in srgb, var(--mt-ink-800) 40%, transparent);
}
.mt-hour-row.is-now { background: color-mix(in srgb, var(--mt-stall) 5%, transparent); }
.mt-hour-label {
  width: 4rem; font-size: 0.625rem; color: var(--mt-muted);
  flex-shrink: 0;
}
.mt-hour-row.is-now .mt-hour-label { color: var(--mt-stall); font-weight: 600; }
.mt-hour-body { flex: 1; min-width: 0; }
.mt-hour-gap {
  margin-left: 0.5rem; font-size: 0.625rem;
  color: rgba(107, 122, 144, 0.3); font-style: italic;
}
.mt-hour-block {
  margin-left: 0.5rem;
  padding: 0.25rem 0.75rem; border-radius: 0.25rem;
  font-size: 0.75rem; color: var(--mt-paper-100);
  background: color-mix(in srgb, var(--mt-accent-500) 15%, transparent);
  border-left: 2px solid var(--mt-accent-500);
}
.mt-hour-block.is-meeting { background: color-mix(in srgb, var(--mt-info) 15%, transparent); border-left-color: var(--mt-info); }
.mt-hour-block.is-task    { background: color-mix(in srgb, var(--mt-watch) 15%, transparent); border-left-color: var(--mt-watch); }
.mt-hour-block.is-now     { background: color-mix(in srgb, var(--mt-stall) 15%, transparent); border-left-color: var(--mt-stall); box-shadow: 0 0 0 1px color-mix(in srgb, var(--mt-stall) 40%, transparent); }
.mt-hour-block.is-now strong { color: var(--mt-stall); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════
   UTILITY - section heading inside body grid
   =================================================================== */
.mt-section-h {
  font-size: 1.5rem; font-weight: 700;       /* text-2xl */
  color: var(--mt-paper-100);
}
.mt-section-h-row {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 1rem;
}
.mt-quick-actions-h {
  font-size: 0.875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 2px;
  color: var(--mt-muted); margin-bottom: 0.75rem;
}

/* ═══════════════════════════════════════════════════════════════════
   REACT PRIMITIVES (added 2026-06-10)
   ─────────────────────────────────────────────────────────────────
   Product-grade classes rendered by the React components in this
   package. Distinct from the dense template-grade .mt-btn set above:
   these are sized for real products (touch targets, tablet POS).
   =================================================================== */

/* ── Button (mt-ui-btn) ────────────────────────────────────────────── */
.mt-ui-btn {
  font-family: inherit; font-weight: 500;
  border-radius: 0.75rem; border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, opacity 0.15s, transform 0.1s;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
}
.mt-ui-btn:active { transform: scale(0.97); }
.mt-ui-btn:disabled { opacity: 0.4; cursor: default; transform: none; }
.mt-ui-btn.size-sm { padding: 0.375rem 0.75rem; font-size: 0.875rem; }
.mt-ui-btn.size-md { padding: 0.5rem 1rem;      font-size: 1rem; }
.mt-ui-btn.size-lg { padding: 0.75rem 1.5rem;   font-size: 1.125rem; }
.mt-ui-btn.is-primary {
  background: var(--mt-accent-500); color: var(--mt-ink-950);
  border-color: var(--mt-accent-600);
}
.mt-ui-btn.is-primary:hover { background: var(--mt-accent-600); }
.mt-ui-btn.is-secondary {
  background: var(--mt-ink-900); color: var(--mt-paper-100);
  border-color: var(--mt-ink-800);
}
.mt-ui-btn.is-secondary:hover { background: var(--mt-ink-800); }
.mt-ui-btn.is-danger {
  background: var(--mt-stall); color: #ffffff;
  border-color: var(--mt-stall);
}
.mt-ui-btn.is-danger:hover { background: color-mix(in srgb, var(--mt-stall) 85%, black); }
.mt-ui-btn.is-ghost { background: transparent; color: var(--mt-muted); }
.mt-ui-btn.is-ghost:hover { color: var(--mt-paper-100); background: color-mix(in srgb, var(--mt-paper-100) 5%, transparent); }

/* ── Badge / StatusPill (mt-badge) ─────────────────────────────────── */
/* Color flows through --mt-badge-color so a tone class OR an inline
   custom color (style="--mt-badge-color: ...") both work; tinted
   background + border track the text color automatically.
   Revamped per 2026-06-10 review: squared corners + border (same chip
   family as mt-verdict), 13px/600 type, optional .has-dot status dot.
   The old fully-rounded pastel pill read dated. */
.mt-badge {
  --mt-badge-color: var(--mt-muted);
  display: inline-flex; align-items: center;
  padding: 0.1875rem 0.625rem;
  border-radius: 0.375rem;
  font-family: var(--mt-font-label);
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--mt-badge-color);
  background: color-mix(in srgb, var(--mt-badge-color) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--mt-badge-color) 28%, transparent);
  white-space: nowrap;
}
.mt-badge.is-ok     { --mt-badge-color: var(--mt-ok); }
.mt-badge.is-watch  { --mt-badge-color: var(--mt-watch); }
.mt-badge.is-stall  { --mt-badge-color: var(--mt-stall); }
.mt-badge.is-accent { --mt-badge-color: var(--mt-accent-400); }
.mt-badge.is-info   { --mt-badge-color: var(--mt-info); }
.mt-badge.is-muted  { --mt-badge-color: var(--mt-muted); }

/* ── Modal (mt-modal) ──────────────────────────────────────────────── */
.mt-modal-overlay {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
}
.mt-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); }
.mt-modal-panel {
  position: relative;
  background: var(--mt-ink-900);
  border: 1px solid var(--mt-ink-800);
  border-radius: 1rem;
  padding: 1.5rem;
  width: 100%; max-width: 28rem; margin: 0 1rem;
  max-height: 80vh; overflow: auto;
  color: var(--mt-paper-100);
}
.mt-modal-panel.size-lg { max-width: 42rem; }
.mt-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem; gap: 0.75rem;
}
.mt-modal-title { font-size: 1.25rem; font-weight: 700; margin: 0; }
/* min-width/height 0 with !important: consumers (SawaOS) set a global
   48px touch-target floor on button; the close glyph must stay compact. */
.mt-modal-close {
  width: 2rem; height: 2rem;
  min-width: 0 !important; min-height: 0 !important;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; border-radius: 0.5rem;
  color: var(--mt-muted); font-size: 1.125rem; cursor: pointer;
}
.mt-modal-close:hover { color: var(--mt-paper-100); background: color-mix(in srgb, var(--mt-paper-100) 6%, transparent); }
.mt-modal-footer {
  display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.25rem;
}

/* ── Product card (mt-ui-card) ─────────────────────────────────────── */
.mt-ui-card {
  background: var(--mt-ink-900);
  border: 1px solid var(--mt-ink-800);
  border-radius: 1rem;
  padding: 1rem;
}
.mt-ui-card.pad-sm { padding: 0.75rem; }
.mt-ui-card.pad-lg { padding: 1.5rem; }
.mt-ui-card.is-clickable { cursor: pointer; transition: transform 0.1s; }
.mt-ui-card.is-clickable:active { transform: scale(0.98); }

/* ── Empty state (mt-empty) ────────────────────────────────────────── */
.mt-empty {
  padding: 3rem 1.5rem; text-align: center;
  color: var(--mt-muted);
}
.mt-empty-icon  { font-size: 2.25rem; margin-bottom: 0.75rem; opacity: 0.4; }
.mt-empty-title { font-size: 1.0625rem; font-weight: 700; margin-bottom: 0.375rem; color: var(--mt-paper-100); }
.mt-empty-sub   { font-size: 0.8125rem; line-height: 1.55; color: var(--mt-muted); }
.mt-empty-action { margin-top: 1rem; }

/* ── Data table (mt-table) ─────────────────────────────────────────
   Scaled per the fewer-bigger-simpler creed (2026-06-10): 14px cells,
   Manrope headers, strong lead column, totals row. */
.mt-table { width: 100%; border-collapse: collapse; }
.mt-table th {
  padding: 0.75rem 1rem; text-align: left;
  font-size: 0.6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--mt-muted); font-family: var(--mt-font-label);
  border-bottom: 1px solid var(--mt-ink-800);
}
.mt-table td {
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  color: var(--mt-paper-100);
  border-bottom: 1px solid color-mix(in srgb, var(--mt-ink-800) 40%, transparent);
}
.mt-table th.is-right, .mt-table td.is-right {
  text-align: right; font-variant-numeric: tabular-nums;
}
.mt-table tr.is-clickable { cursor: pointer; }
.mt-table tr.is-clickable:hover td { background: rgba(16, 24, 40, 0.4); }
.mt-table .is-muted { color: var(--mt-muted); }
.mt-table .is-strong { font-weight: 600; }
.mt-table tfoot td {
  font-weight: 700; color: var(--mt-paper-100);
  background: rgba(16, 24, 40, 0.4);
  border-top: 1px solid var(--mt-ink-800); border-bottom: none;
}

/* Loading skeleton cell */
.mt-skel {
  display: inline-block; height: 0.75rem; width: 70%;
  border-radius: 0.25rem; background: var(--mt-ink-800);
  animation: mt-skel-pulse 1.4s ease-in-out infinite;
}
@keyframes mt-skel-pulse { 0%,100% { opacity: 0.5 } 50% { opacity: 1 } }

/* ── Drawer (right slide-over; harvested from OptiqOS FormModal + Atlas) ── */
.mt-drawer-backdrop {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0, 0, 0, 0.6);
}
.mt-drawer-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 51;
  width: 100%; max-width: var(--mt-drawer-width, 520px);
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--mt-ink-900), var(--mt-ink-950));
  border-left: 1px solid var(--mt-ink-800);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.6);
  color: var(--mt-paper-100);
  animation: mt-drawer-in 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes mt-drawer-in { from { transform: translateX(100%) } to { transform: translateX(0) } }
.mt-drawer-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 1rem 1.5rem; border-bottom: 1px solid var(--mt-ink-800); flex-shrink: 0;
}
.mt-drawer-title { font-size: 1.125rem; font-weight: 600; margin: 0; }
.mt-drawer-body { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem; }
.mt-drawer-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem;
  padding: 1rem 1.5rem; border-top: 1px solid var(--mt-ink-800); flex-shrink: 0;
}

/* ── Form fields (harvested from OptiqOS FormField + input styles) ─────── */
.mt-field { display: block; }
.mt-field + .mt-field { margin-top: 1rem; }
/* Field label aligned to the locked label system (Manrope, KPI-label scale). */
.mt-field-label {
  display: block; margin-bottom: 0.375rem;
  font-size: 0.75rem; font-weight: 600;
  font-family: var(--mt-font-label);
  text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--mt-muted);
}
.mt-field-req { color: var(--mt-accent-400); margin-left: 0.125rem; }
.mt-field-error { margin-top: 0.3125rem; font-size: 0.8125rem; color: var(--mt-stall); }

.mt-input, .mt-select, .mt-textarea {
  width: 100%; box-sizing: border-box;
  border-radius: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--mt-paper-100) 12%, transparent);
  background: rgba(0, 0, 0, 0.3);
  padding: 0.5625rem 0.8125rem;
  font-size: 0.9375rem; font-family: inherit;
  color: color-mix(in srgb, var(--mt-paper-100) 92%, transparent);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.mt-input::placeholder, .mt-textarea::placeholder {
  color: color-mix(in srgb, var(--mt-paper-100) 30%, transparent);
}
.mt-input:focus, .mt-select:focus, .mt-textarea:focus {
  border-color: var(--mt-accent-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mt-accent-500) 18%, transparent);
}
.mt-select { cursor: pointer; }
.mt-textarea { resize: vertical; min-height: 84px; }

/* ── Command palette (harvested from OptiqOS + Atlas CommandPalette) ───── */
.mt-cmdk-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
}
.mt-cmdk-panel {
  position: fixed; left: 50%; top: 20%; transform: translateX(-50%); z-index: 61;
  width: calc(100% - 2rem); max-width: 32rem;
  background: color-mix(in srgb, var(--mt-ink-950) 98%, transparent);
  border: 1px solid var(--mt-ink-700);
  border-radius: 0.75rem; overflow: hidden;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
  color: var(--mt-paper-100);
}
.mt-cmdk-input-row {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 1rem; border-bottom: 1px solid var(--mt-ink-800);
}
.mt-cmdk-input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--mt-paper-100); font-size: 0.875rem; font-family: inherit;
}
.mt-cmdk-input::placeholder { color: color-mix(in srgb, var(--mt-paper-100) 30%, transparent); }
.mt-cmdk-kbd {
  border: 1px solid color-mix(in srgb, var(--mt-paper-100) 15%, transparent);
  border-radius: 0.25rem; padding: 0.125rem 0.375rem;
  font-size: 0.625rem; font-weight: 500;
  color: color-mix(in srgb, var(--mt-paper-100) 30%, transparent);
}
.mt-cmdk-list { max-height: 20rem; overflow-y: auto; padding: 0.5rem 0; }
.mt-cmdk-item {
  display: flex; width: 100%; align-items: center; gap: 0.75rem;
  padding: 0.625rem 1rem; text-align: left;
  font-size: 0.875rem; font-family: inherit;
  color: color-mix(in srgb, var(--mt-paper-100) 60%, transparent);
  background: transparent; border: none; cursor: pointer;
}
.mt-cmdk-item.is-active {
  background: color-mix(in srgb, var(--mt-paper-100) 8%, transparent);
  color: var(--mt-paper-100);
}
.mt-cmdk-group {
  width: 5rem; flex-shrink: 0;
  font-size: 0.6875rem; font-weight: 600;
  font-family: var(--mt-font-label);
  text-transform: uppercase; letter-spacing: 1.5px;
  color: color-mix(in srgb, var(--mt-paper-100) 30%, transparent);
}
.mt-cmdk-label { flex: 1; font-weight: 500; }
.mt-cmdk-hint { font-size: 0.6875rem; color: color-mix(in srgb, var(--mt-paper-100) 25%, transparent); }
.mt-cmdk-empty {
  padding: 1.5rem 1rem; text-align: center;
  font-size: 0.875rem; color: color-mix(in srgb, var(--mt-paper-100) 30%, transparent);
}
.mt-cmdk-footer {
  display: flex; justify-content: space-between;
  padding: 0.5rem 1rem; border-top: 1px solid var(--mt-ink-800);
  font-size: 0.625rem; color: color-mix(in srgb, var(--mt-paper-100) 20%, transparent);
}

/* ── Trend hero header: latest value anchored above the chart (the
   KPI-F lesson applied to charts: the number leads, the line is
   context). Pair with renderTrend's end labels + last-point emphasis. ── */
.mt-trend-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 0.75rem;
}
.mt-trend-hero {
  display: flex; align-items: baseline; gap: 0.625rem;
  font-size: 2rem; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
  color: var(--mt-paper-100); line-height: 1.1;
  margin-top: 0.25rem;
}

/* ── Trend chart tooltip (renderTrend) ─────────────────────────────────── */
.mt-trend-tooltip {
  position: absolute; z-index: 10; pointer-events: none;
  border: 1px solid var(--mt-ink-700);
  background: color-mix(in srgb, var(--mt-ink-950) 95%, transparent);
  border-radius: 0.5rem; padding: 0.5rem 0.75rem; min-width: 9.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  font-size: 0.6875rem; color: var(--mt-paper-100);
}
.mt-trend-tip-label { font-size: 0.625rem; font-weight: 500; color: var(--mt-muted); margin-bottom: 0.375rem; }
.mt-trend-tip-row { display: flex; justify-content: space-between; gap: 1rem; }
.mt-trend-tip-row b { font-variant-numeric: tabular-nums; font-weight: 600; }
.mt-trend-empty { padding: 2rem 1rem; text-align: center; font-size: 0.875rem; color: var(--mt-muted); }