/* mograndom — global styles
   Voltage default; surfaces driven by --mg-* variables overridable per-screen.
   Type: Geist for UI, JetBrains Mono for numerics, tier chips, hashes, timers.
*/
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  --mg-bg:        oklch(0.16 0.020 262);
  --mg-bg-2:      oklch(0.20 0.022 262);
  --mg-surface:   oklch(0.225 0.020 262);
  --mg-surface-2: oklch(0.265 0.022 262);
  --mg-line:      oklch(0.32 0.020 262);
  --mg-line-2:    oklch(0.40 0.020 262);
  --mg-text:      oklch(0.97 0.005 262);
  --mg-text-2:    oklch(0.78 0.010 262);
  --mg-text-3:    oklch(0.58 0.015 262);
  --mg-danger:    oklch(0.65 0.220 25);
  --mg-ok:        oklch(0.78 0.180 152);
  --mg-warn:      oklch(0.80 0.170 75);
}

/* base panel reset for any screen rendered in canvas */
.mg {
  font-family: 'Geist', system-ui, -apple-system, sans-serif;
  color: var(--mg-text);
  background: var(--mg-bg);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}

.mg-mono { font-family: 'JetBrains Mono', monospace; font-feature-settings: "tnum" 1; }
.mg-display {
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.95;
}

/* hairline button */
.mg-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--mg-line-2);
  border-radius: 6px;
  background: transparent;
  color: var(--mg-text);
  font: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, transform 120ms;
}
.mg-btn:hover { background: var(--mg-surface-2); border-color: var(--mg-text-3); }
.mg-btn:active { transform: translateY(1px); }
.mg-btn-primary {
  background: var(--mg-text);
  border-color: var(--mg-text);
  color: var(--mg-bg);
  font-weight: 600;
}
.mg-btn-primary:hover { background: var(--mg-text); filter: brightness(0.92); }
.mg-btn-ghost { border-color: var(--mg-line); color: var(--mg-text-2); }

/* card */
.mg-card {
  background: var(--mg-surface);
  border: 1px solid var(--mg-line);
  border-radius: 10px;
}

/* input */
.mg-input {
  width: 100%;
  padding: 10px 12px;
  background: var(--mg-bg-2);
  border: 1px solid var(--mg-line);
  border-radius: 6px;
  color: var(--mg-text);
  font: inherit; font-size: 14px;
  outline: none;
  transition: border-color 120ms, background 120ms;
}
.mg-input:focus { border-color: var(--mg-text-3); background: var(--mg-surface); }

.mg-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mg-text-3);
}

.mg-divider {
  border: 0; border-top: 1px solid var(--mg-line); margin: 0;
}

/* live "rec" pulse */
@keyframes mg-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}
@keyframes mg-rim-rotate {
  to { transform: rotate(360deg); }
}
@keyframes mg-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.25; }
}
@keyframes mg-fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes mg-tick {
  0% { transform: scale(1.6); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* segmented bars (confidence rating) */
.mg-conf-bar {
  width: 100%; cursor: pointer;
  border: 1px solid var(--mg-line-2);
  background: var(--mg-bg-2);
  border-radius: 4px;
  transition: background 120ms, border-color 120ms;
}
.mg-conf-bar.on {
  background: var(--mg-tier, #fbbf24);
  border-color: var(--mg-tier, #fbbf24);
}
.mg-conf-bar:hover { border-color: var(--mg-text-3); }

/* horizontal scroll of tier chips on small screens */
.mg-scroll-x { overflow-x: auto; scrollbar-width: none; }
.mg-scroll-x::-webkit-scrollbar { display: none; }

/* table */
.mg-table { width: 100%; border-collapse: collapse; }
.mg-table th, .mg-table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--mg-line);
}
.mg-table th {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mg-text-3);
  font-weight: 500;
  border-bottom: 1px solid var(--mg-line-2);
}
.mg-table tr:last-child td { border-bottom: none; }
.mg-table tr.me { background: color-mix(in oklab, var(--mg-text) 4%, transparent); }

/* lock icon (commit phase) */
.mg-seal {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 7px;
  border: 1px dashed var(--mg-line-2);
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--mg-text-3);
  letter-spacing: 0.06em;
}

/* artboard root keeps every screen pinned to its frame size */
.mg-screen {
  position: relative;
  width: 100%; height: 100%;
  background: var(--mg-bg);
  overflow: hidden;
  color: var(--mg-text);
  font-family: 'Geist', system-ui, sans-serif;
}