/* ManagEm AI — component stylesheet. Values come from tokens.css; this file only arranges them. */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap");

.mg, .mg * { box-sizing: border-box; }
.mg { font-family: var(--font-sans); color: var(--text); background: var(--surface); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
.mg a { color: var(--signal); text-decoration: none; }
.mg a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mg :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.mg code, .mg .mg-code { font-family: var(--font-mono); font-size: 13px; font-variant-numeric: tabular-nums; }
.mg .mg-num { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; }

/* Eyebrow label: mono, uppercase, tracked. */
.mg-eyebrow { font-family: var(--font-mono); font-size: 11px; line-height: 1.2; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); display: inline-flex; align-items: center; gap: var(--space-2); }
.mg-eyebrow::before { content: ""; width: var(--node-size); height: var(--node-size); background: var(--node); }

/* Rail: a hairline with a node at each end. */
.mg-rail { position: relative; height: var(--node-size); margin: 0; border: 0; }
.mg-rail::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: var(--stroke); background: var(--hairline-strong); }
.mg-rail::after { content: ""; position: absolute; top: 0; left: 0; width: var(--node-size); height: var(--node-size); background: var(--node); box-shadow: 0 0 0 0 transparent; }
.mg-rail > i { position: absolute; top: 0; right: 0; width: var(--node-size); height: var(--node-size); background: var(--node); }
.mg-rail.is-vertical { width: var(--node-size); height: 100%; }
.mg-rail.is-vertical::before { left: 50%; right: auto; top: 0; bottom: 0; width: var(--stroke); height: auto; }
.mg-rail.is-vertical > i { right: auto; top: auto; bottom: 0; left: 0; }

/* Blueprint grid ground. */
.mg-grid { background-image: linear-gradient(var(--grid-line) var(--stroke), transparent var(--stroke)), linear-gradient(90deg, var(--grid-line) var(--stroke), transparent var(--stroke)); background-size: var(--grid-pitch) var(--grid-pitch); }

/* Frame: a drafted container. Crosshairs by default; anchors with .is-anchored. */
.mg-frame { position: relative; border: var(--stroke) solid var(--hairline-strong); border-radius: var(--radius-0); background: var(--surface-raised); padding: var(--space-6);
  --x: var(--crosshair); --xo: 2px;
  background-image:
    linear-gradient(var(--node), var(--node)), linear-gradient(var(--node), var(--node)),
    linear-gradient(var(--node), var(--node)), linear-gradient(var(--node), var(--node)),
    linear-gradient(var(--node), var(--node)), linear-gradient(var(--node), var(--node)),
    linear-gradient(var(--node), var(--node)), linear-gradient(var(--node), var(--node));
  background-repeat: no-repeat;
  background-size: var(--stroke) var(--x), var(--x) var(--stroke), var(--stroke) var(--x), var(--x) var(--stroke), var(--stroke) var(--x), var(--x) var(--stroke), var(--stroke) var(--x), var(--x) var(--stroke);
  background-position:
    calc(var(--xo) + 3px) var(--xo), var(--xo) calc(var(--xo) + 3px),
    calc(100% - var(--xo) - 3px) var(--xo), calc(100% - var(--xo)) calc(var(--xo) + 3px),
    calc(var(--xo) + 3px) calc(100% - var(--xo)), var(--xo) calc(100% - var(--xo) - 3px),
    calc(100% - var(--xo) - 3px) calc(100% - var(--xo)), calc(100% - var(--xo)) calc(100% - var(--xo) - 3px); }
.mg-frame.is-anchored { background-image: none; }
.mg-frame.is-sunken { background-color: var(--surface-sunken); }
.mg-node { position: absolute; width: var(--node-size); height: var(--node-size); background: var(--node); }
.mg-node.tl { top: calc(var(--node-size) / -2 - 0.5px); left: calc(var(--node-size) / -2 - 0.5px); }
.mg-node.tr { top: calc(var(--node-size) / -2 - 0.5px); right: calc(var(--node-size) / -2 - 0.5px); }
.mg-node.bl { bottom: calc(var(--node-size) / -2 - 0.5px); left: calc(var(--node-size) / -2 - 0.5px); }
.mg-node.br { bottom: calc(var(--node-size) / -2 - 0.5px); right: calc(var(--node-size) / -2 - 0.5px); }

/* Card: the plain raised container for everything that is not under measurement. */
.mg-card { background: var(--surface-raised); border: var(--stroke) solid var(--hairline); border-radius: var(--radius-md); padding: var(--space-6); }
.mg-card.is-floating { box-shadow: var(--shadow-raise); }

/* Buttons. */
.mg-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 36px; padding: 0 var(--space-4); border-radius: var(--radius-sm); border: var(--stroke) solid transparent; font: 500 14px/1 var(--font-sans); color: var(--text); background: transparent; cursor: pointer; white-space: nowrap; transition: background-color 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out; }
.mg-btn.is-lg { height: 44px; padding: 0 var(--space-6); font-size: 15px; }
.mg-btn.is-sm { height: 28px; padding: 0 var(--space-3); font-size: 13px; }
.mg-btn-primary { background: var(--chrome); color: var(--on-chrome); border-color: var(--chrome); }
.mg-btn-primary:hover { background: var(--chrome-hover); border-color: var(--chrome-hover); }
.mg-btn-outline { border-color: var(--hairline-strong); color: var(--text); }
.mg-btn-outline:hover { background: var(--surface-sunken); }
.mg-btn-ghost { color: var(--text-muted); }
.mg-btn-ghost:hover { background: var(--surface-sunken); color: var(--text); }
.mg-btn-link { padding: 0; height: auto; color: var(--signal); }
.mg-btn-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.mg-btn-critical { border-color: var(--critical); color: var(--critical); }
.mg-btn-critical:hover { background: var(--critical-soft); }
.mg-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
/* Buttons rendered as links keep the button colours, not the link colour. */
.mg a.mg-btn { color: var(--text); text-decoration: none; }
.mg a.mg-btn:hover { text-decoration: none; }
.mg a.mg-btn-primary { color: var(--on-chrome); }
.mg a.mg-btn-ghost { color: var(--text-muted); }
.mg a.mg-btn-ghost:hover { color: var(--text); }
.mg a.mg-btn-link { color: var(--signal); }
.mg a.mg-btn-link:hover { text-decoration: underline; }
.mg a.mg-btn-critical { color: var(--critical); }
.mg-btn .mg-kbd { font-family: var(--font-mono); font-size: 11px; opacity: 0.7; }

/* Status pill. */
.mg-status { display: inline-flex; align-items: center; gap: var(--space-2); height: 22px; padding: 0 var(--space-2) 0 var(--space-2); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); background: var(--surface-sunken); border: var(--stroke) solid var(--hairline); white-space: nowrap; }
.mg-status::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-pill); background: currentColor; flex: none; }
.mg-status.is-running { color: var(--signal); background: var(--signal-soft); border-color: transparent; }
.mg-status.is-running::before { animation: mg-pulse 1.6s ease-in-out infinite; }
.mg-status.is-warn { color: var(--warn); background: var(--warn-soft); border-color: transparent; }
.mg-status.is-ok { color: var(--ok); background: var(--ok-soft); border-color: transparent; }
.mg-status.is-critical { color: var(--critical); background: var(--critical-soft); border-color: transparent; }
@keyframes mg-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.7); } }
@media (prefers-reduced-motion: reduce) { .mg-status.is-running::before { animation: none; } }

/* Approval card. */
.mg-approval { display: grid; gap: var(--space-4); }
.mg-approval-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.mg-approval-title { font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
.mg-approval-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3) var(--space-6); padding: var(--space-4) 0; border-top: var(--stroke) solid var(--hairline); border-bottom: var(--stroke) solid var(--hairline); }
.mg-approval-meta dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 var(--space-1); }
.mg-approval-meta dd { margin: 0; font-size: 14px; }
.mg-approval-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.mg-approval-actions .mg-spacer { flex: 1; }

/* Table. */
.mg-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mg-table th { text-align: left; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); padding: var(--space-2) var(--space-3); border-bottom: var(--stroke) solid var(--hairline-strong); background: var(--surface-sunken); }
.mg-table td { padding: var(--space-3); border-bottom: var(--stroke) solid var(--hairline); vertical-align: middle; }
.mg-table tr.is-selected td { background: var(--signal-soft); }

/* Navigation bar. */
.mg-nav { display: flex; align-items: center; gap: var(--space-6); height: 56px; padding: 0 var(--space-6); border-bottom: var(--stroke) solid var(--hairline); background: var(--surface-raised); }
.mg-nav-links { display: flex; gap: var(--space-4); font-size: 14px; color: var(--text-muted); }
.mg-nav-links a { color: inherit; }
.mg-nav-links a.is-active { color: var(--text); font-weight: 500; }
.mg-nav .mg-spacer { flex: 1; }

/* Particle field container: the canvas fills it, content sits above. */
.mg-field { position: relative; overflow: hidden; }
.mg-field > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mg-field > * { position: relative; }
.mg-field > canvas { z-index: 0; }