/* Maia shell — shared by Maia IT Support and Maia Assurance (served at /maia/maia-shell.css).
   Design language: canvas #e9eecb, leaf-green side panel with a lime active pill, ink text,
   mono meta labels. Panel colours only via tokens: another tint later is a one-line change.
   Extracted from Maia IT Support's index.html; Support still carries its own copy until its
   next release consolidates on this file. */
:root {
  --canvas: #e9eecb;
  --ink: #0b0b0b;
  --meta: rgba(11,11,11,.55);
  --panel-bg: #446030;
  --panel-fg: #ffffff;
  --panel-fg-muted: rgba(252,252,251,.80);   /* 5.12:1 on --panel-bg (WCAG AA) */
  --panel-accent: #f5ff90;
  --panel-accent-fg: #0b0b0b;
  --panel-hover: rgba(252,252,251,.10);
  --panel-line: rgba(252,252,251,.14);
  --row-quiet: #f4f5ee;
  --row-hover: #eef2d4;
  --warn-ink: #663a0f;
  --warn-chip: rgba(122,69,18,.12);
  --danger-ink: #7a1b1b;
  --danger-chip: rgba(143,32,32,.12);
  --card-radius: 20px;
  --card-line: rgba(11,11,11,.07);
}
.mx-canvas { background: var(--canvas); color: var(--ink); }

/* ── Side panel: sticky, scrolls itself, brand on top, account + sign-out at the bottom ── */
.mx-side { flex: none; width: 230px; background: var(--panel-bg); color: var(--panel-fg); position: sticky; top: 0; align-self: flex-start; height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; }
.mx-side :focus-visible { outline: 2px solid var(--panel-accent); outline-offset: 2px; }
.mx-side-inner { position: relative; z-index: 1; min-height: 100%; display: flex; flex-direction: column; padding: 24px 16px; gap: 24px; }
.mx-side-brand { display: flex; align-items: center; gap: 10px; font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; font-size: 18px; letter-spacing: -.02em; line-height: 1.1; color: var(--panel-fg); }
.mx-side-dot { width: 10px; height: 10px; border-radius: 9999px; background: var(--panel-accent); flex: none; }
.mx-side-product { display: block; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--panel-fg-muted); margin-top: 4px; }
.mx-side-nav { display: flex; flex-direction: column; gap: 4px; }
.mx-side-nav .nav-btn { height: 38px; border-radius: 10px; padding: 0 12px; display: flex; align-items: center; gap: 10px; border: 0; cursor: pointer; font: inherit; font-size: 14px; font-weight: 500; text-align: left; white-space: nowrap; transition: background .15s ease, color .15s ease; }
.mx-side-nav .nav-btn svg { width: 18px; height: 18px; flex: none; }
.nav-btn.active { background: var(--panel-accent); color: var(--panel-accent-fg); font-weight: 600; }
.nav-btn:not(.active) { background: transparent; color: var(--panel-fg-muted); }
.nav-btn:not(.active):hover { background: var(--panel-hover); color: var(--panel-fg); }
/* display:flex above outspecifies utility .hidden — never let styling override an authorization-driven hidden state */
.mx-side-nav .nav-btn.hidden { display: none !important; }
.mx-side-bottom { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--panel-fg-muted); border-top: 1px solid var(--panel-line); padding-top: 16px; }
.mx-side-bottom .mx-side-user { font-weight: 600; color: var(--panel-fg); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-side-signout { font-weight: 600; color: var(--panel-fg-muted); font-size: 13px; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.mx-side-signout:hover { color: var(--panel-fg); }
.mx-side-switch { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--panel-fg-muted); text-decoration: none; }
.mx-side-switch:hover { color: var(--panel-fg); text-decoration: underline; }
.mx-side-switch.hidden { display: none !important; }
.mx-side-powered { font-size: 12px; color: var(--panel-fg-muted); }
.mx-side-powered strong { color: var(--panel-fg); font-weight: 600; }
.mx-side-powered.hidden { display: none !important; }

/* ── Cards, chips, mono meta ── */
.mx-card { background: #fff; border: 1px solid var(--card-line); border-radius: var(--card-radius); }
.mx-card-quiet { background: var(--row-quiet); border: 1px solid var(--card-line); border-radius: 14px; }
.chip-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; padding: 3px 8px; border-radius: 5px; display: inline-block; }
.chip-lime { background: #e9eecb; color: #0b0b0b; }
.chip-quiet { background: var(--row-quiet); color: var(--meta); }
.chip-warn { background: var(--warn-chip); color: var(--warn-ink); }
.chip-danger { background: var(--danger-chip); color: var(--danger-ink); }
.mx-meta { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 500; font-size: 10.5px; letter-spacing: .12em; color: var(--meta); text-transform: uppercase; }
.mx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--card-line); background: #fff; color: var(--ink); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; transition: background .15s ease, transform .15s ease; }
.mx-btn:hover { background: var(--row-quiet); }
.mx-btn-primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.mx-btn-primary:hover { background: #1f2a1a; }
.mx-btn-lime { background: var(--panel-accent); color: var(--panel-accent-fg); border-color: var(--panel-accent); }
.mx-btn-lime:hover { background: #e9f472; }
.mx-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ── Responsive: tablet 768-1100px, phone < 768px (icon-only bottom bar) ── */
@media (min-width: 768px) and (max-width: 1100px) { .mx-side { width: 180px; } .mx-side-inner { padding: 20px 10px; } }
@media (max-width: 767px) {
  .mx-side { position: fixed; bottom: 0; left: 0; right: 0; top: auto; width: auto; height: auto; z-index: 40; overflow: visible; }
  .mx-side-inner { flex-direction: row; align-items: stretch; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); gap: 0; height: auto; min-height: 0; }
  .mx-side-brand, .mx-side-bottom { display: none; }
  .mx-side-nav { flex-direction: row; flex: 1; gap: 0; overflow-x: auto; }
  .mx-side-nav .nav-btn { flex: 1; flex-direction: column; justify-content: center; gap: 2px; min-height: 48px; height: auto; padding: 4px 2px; border-radius: 10px; }
  .mx-side-nav .nav-btn svg { width: 20px; height: 20px; }
  .mx-side-nav .nav-btn span { display: none; }
  .mx-side-nav .nav-btn.active span { display: block; font-size: 9px; line-height: 1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mx-main { padding-bottom: 88px; }
  /* iOS zooms in (and stays zoomed) on focus when a field is under 16px — never cap user zoom to compensate */
  input, textarea, select { font-size: 16px !important; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }