/* Machine Music AI — hardware UI kit
   Drop this in, add the fonts, use the classes below. No JS required
   except for menu/tab toggling (see usage-example.html). */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@87.5,300;87.5,400;87.5,500;87.5,600;87.5,700&family=IBM+Plex+Mono:wght@400;500&display=swap');

@font-face {
  font-family: 'DSEG7';
  src: url('https://cdn.jsdelivr.net/npm/dseg@0.46.0/fonts/DSEG7-Classic/DSEG7Classic-Light.woff2') format('woff2');
  font-display: swap;
}

:root {
  /* surfaces */
  --mm-void: #050506;
  --mm-panel: linear-gradient(180deg, #0a0b0d 0%, #101215 100%);
  --mm-chassis: linear-gradient(180deg, #1a1d21 0%, #0a0b0d 40%, #08090b 74%, #1a1d21 100%);
  --mm-recess: #07080a;
  --mm-control: linear-gradient(180deg, #2b3037 0%, #1d2126 55%, #15181c 100%);
  --mm-control-hover: linear-gradient(180deg, #333941 0%, #23272d 55%, #1a1e22 100%);
  --mm-cap: linear-gradient(180deg, #fbfaf6 0%, #eceae3 26%, #dcd9d0 62%, #c9c5ba 88%, #bcb8ac 100%);

  /* accent — one hue only; states read by luminance */
  --mm-accent: #e8e4da;      /* ivory, matches the button caps */
  --mm-accent-dim: #9b968c;
  --mm-green: #e8e4da;       /* legacy aliases → ivory */
  --mm-blue: #cfd4d9;
  --mm-amber: #b9b3a6;
  --mm-alert: #d8877a;       /* the only hue left, errors only */

  /* ink */
  --mm-ink: #f2f3f5;
  --mm-ink-2: #c3c9d0;
  --mm-muted: #8b929a;
  --mm-dim: #7d848c;
  --mm-faint: #5b6169;

  /* geometry */
  --mm-radius: 15px;
  --mm-space-1: 4px;
  --mm-space-2: 8px;
  --mm-space-3: 12px;
  --mm-space-4: 16px;
  --mm-space-6: 24px;
  --mm-space-8: 32px;

  /* elevation */
  --mm-inset: inset 0 0 0 1px rgba(255,255,255,.07), inset 0 2px 6px rgba(0,0,0,.9);
  --mm-panel-shadow: inset 0 2px 6px rgba(0,0,0,.95), inset 0 0 0 1px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.07);
  --mm-bar-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 0 1px rgba(0,0,0,.9);
  --mm-raised: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -2px 0 rgba(255,255,255,.16),
               inset 0 0 0 1px rgba(0,0,0,.95), 0 1px 0 rgba(255,255,255,.09), -6px 14px 30px rgba(0,0,0,.85);
}

/* ---------- base ---------- */
body.mm {
  margin: 0;
  font-family: Archivo, Helvetica, sans-serif;
  color: var(--mm-ink);
  background: radial-gradient(130% 95% at 72% -12%, #141517 0%, var(--mm-void) 60%);
}
.mm a { color: var(--mm-accent); text-decoration: none; }
.mm a:hover { color: #ffffff; }
.mm-wrap { max-width: 1180px; margin: 0 auto; padding: 56px 40px 96px; display: flex; flex-direction: column; gap: 28px; }

/* ---------- type ---------- */
.mm-display { font-size: 56px; font-weight: 600; letter-spacing: -.025em; line-height: 1.04; margin: 0; text-wrap: pretty; }
.mm-h1 { font-size: 34px; font-weight: 600; letter-spacing: -.015em; margin: 0; }
.mm-h2 { font-size: 24px; font-weight: 600; letter-spacing: -.015em; margin: 0; }
.mm-h3 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; margin: 0; }
.mm-body { font-size: 14.5px; line-height: 1.6; color: var(--mm-muted); margin: 0; text-wrap: pretty; }
.mm-label { font-size: 12.5px; font-weight: 500; color: var(--mm-dim); }
.mm-caption { font-size: 11.5px; color: var(--mm-faint); }
.mm-mono { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--mm-faint); }
.mm-readout { font-family: 'DSEG7', ui-monospace, monospace; line-height: 1; color: #dfe2e5; }

/* The theme paints every h6 and .form-label #333 with !important whenever the
   document isn't in Bootstrap's dark mode (style.css, "Light mode text
   colors"). On these dark pages that lands black-on-black, and it outranks
   plain inheritance from body.mm — so headings take it back with matching
   !important and enough specificity to win. Elements that carry their own
   muted tone are excluded so they don't all flatten to full ink. */
body.mm :is(h1, h2, h3, h4, h5, h6):not(.text-muted, .text-secondary, .mm-label, .mm-caption, .mm-mono, .dropdown-header, .mm-body) {
  color: var(--mm-ink) !important;
}
body.mm :is(.h1, .h2, .h3, .h4, .h5, .h6):not(.text-muted, .text-secondary, .mm-label, .mm-caption, .mm-mono, .dropdown-header, .mm-body) {
  color: var(--mm-ink) !important;
}
body.mm .form-label:not(.text-muted) { color: var(--mm-ink-2) !important; }

/* section header with the fading rule */
.mm-section { display: flex; align-items: center; gap: 12px; }
.mm-section > span { font-size: 12px; font-weight: 600; color: var(--mm-dim); }
.mm-section::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,0)); }

/* ---------- surfaces ---------- */
.mm-panel { border-radius: var(--mm-radius); background: var(--mm-panel); box-shadow: var(--mm-panel-shadow); }
.mm-bar { border-radius: var(--mm-radius); background: linear-gradient(180deg, #0e1013 0%, #08090b 100%); box-shadow: var(--mm-bar-shadow); }
.mm-chassis {
  border-radius: var(--mm-radius);
  background:
    linear-gradient(200deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.05) 12%, rgba(255,255,255,0) 32%),
    radial-gradient(85% 55% at 88% -12%, rgba(190,215,245,.16) 0%, rgba(0,0,0,0) 58%),
    var(--mm-chassis);
  box-shadow: var(--mm-raised);
}

/* ---------- buttons ---------- */
.mm-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 22px; border: 0; border-radius: var(--mm-radius);
  font: 600 13px/1 Archivo, Helvetica, sans-serif; cursor: pointer;
  white-space: nowrap; flex: none;
  transition: background .1s ease, transform .08s ease, filter .07s ease, box-shadow .1s ease;
}
.mm-btn:disabled { cursor: not-allowed; color: #464b52; background: linear-gradient(180deg, #1a1d21, #131619); box-shadow: 0 0 0 1px rgba(0,0,0,.9); }

/* primary — the chiclet cap */
.mm-btn-primary {
  position: relative; color: #3d3a33; background: var(--mm-cap);
  transform: perspective(420px) rotateX(8deg); transform-origin: 50% 100%;
  box-shadow: 0 0 0 2px #000, 0 3px 3px rgba(0,0,0,.9), 0 9px 15px rgba(0,0,0,.6), inset 0 -1px 1px rgba(255,255,255,.28);
}
.mm-btn-primary::before {
  content: ''; position: absolute; top: 2px; left: 10px; right: 10px; height: 2px;
  border-radius: 3px; background: rgba(255,255,255,.9); filter: blur(1px); pointer-events: none;
}
.mm-btn-primary:active { transform: perspective(420px) rotateX(8deg) translateY(2px) scaleY(.985); filter: brightness(.95); }

.mm-btn-secondary { color: var(--mm-ink-2); font-weight: 500; background: var(--mm-control); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 0 0 1px rgba(0,0,0,.9), 0 2px 4px rgba(0,0,0,.7); }
.mm-btn-secondary:hover { background: var(--mm-control-hover); }
.mm-btn-secondary:active { transform: translateY(1px); }

.mm-btn-ghost { color: var(--mm-ink-2); font-weight: 500; background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.mm-btn-ghost:hover { color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.34); }

.mm-btn-danger { color: #e2b0a6; font-weight: 500; background: linear-gradient(180deg, #24201f, #171413); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(0,0,0,.9); }
.mm-btn-danger:hover { color: #f0cec7; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(0,0,0,.9); }

.mm-btn-lg { height: 46px; padding: 0 28px; font-size: 14px; }

/* ---------- form controls ---------- */
.mm-field { display: flex; flex-direction: column; gap: 7px; }
.mm-input, .mm-textarea, .mm-select {
  border: 0; border-radius: var(--mm-radius); outline: none;
  font: 400 13.5px/1.55 Archivo, Helvetica, sans-serif; color: #e8ebee;
  background: var(--mm-recess); box-shadow: var(--mm-inset);
}
.mm-input, .mm-select { height: 40px; padding: 0 15px; }
.mm-textarea { padding: 12px 15px; resize: vertical; }
.mm-input::placeholder, .mm-textarea::placeholder { color: #4f555c; }
.mm-input:focus, .mm-textarea:focus, .mm-select:focus {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.34), inset 0 2px 6px rgba(0,0,0,.9);
}

/* segmented control */
.mm-segment { display: flex; gap: 1px; padding: 3px; border-radius: var(--mm-radius); background: var(--mm-recess); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 2px 5px rgba(0,0,0,.9); }
.mm-segment button { flex: 1; height: 32px; border: 0; border-radius: 12px; cursor: pointer; background: transparent; color: var(--mm-muted); font: 500 12.5px Archivo, Helvetica, sans-serif; transition: background .1s, color .1s; }
.mm-segment button[aria-pressed="true"] { color: #e8ebee; background: linear-gradient(180deg, #2b3037, #1d2126); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 1px 3px rgba(0,0,0,.8); }

/* toggle switch */
.mm-switch { position: relative; width: 52px; height: 26px; border: 0; padding: 0; border-radius: 13px; cursor: pointer; background: linear-gradient(180deg, #131619, #0c0e10); box-shadow: inset 0 2px 5px rgba(0,0,0,.9), inset 0 0 0 1px rgba(0,0,0,.9); transition: background .14s; }
.mm-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(180deg, #fbfaf6, #dcd9d0 60%, #bcb8ac); box-shadow: 0 1px 3px rgba(0,0,0,.85); transition: left .14s cubic-bezier(.3,.8,.2,1); }
.mm-switch[aria-checked="true"] { background: linear-gradient(180deg, #2c3037, #1d2024); }
.mm-switch[aria-checked="true"]::after { left: 28px; }

/* slider */
.mm-slider { position: relative; height: 8px; border-radius: var(--mm-radius); background: var(--mm-recess); box-shadow: var(--mm-inset); }
.mm-slider-fill { position: absolute; inset: 0 auto 0 0; border-radius: var(--mm-radius); background: linear-gradient(90deg, #6e6a63, var(--mm-accent)); }
.mm-slider-thumb { position: absolute; top: 50%; width: 18px; height: 24px; margin: -12px 0 0 -9px; border-radius: 8px; background: linear-gradient(180deg, #fbfaf6, #dcd9d0 55%, #b3afa4); box-shadow: 0 2px 5px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.8); }

/* ---------- status ---------- */
.mm-led { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.mm-led-green { background: linear-gradient(180deg, #ffffff, #d9d5cb); box-shadow: 0 0 7px rgba(255,252,244,.5); }
.mm-led-blue { background: linear-gradient(180deg, #e6eaee, #aeb4ba); box-shadow: 0 0 6px rgba(220,228,236,.35); }
.mm-led-amber { background: linear-gradient(180deg, #b8b2a6, #7d786e); box-shadow: none; }
.mm-led-alert { background: linear-gradient(180deg, #e8a397, #c4695a); box-shadow: 0 0 6px rgba(216,135,122,.4); }
.mm-led-off { background: #262a2e; }

.mm-badge { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 12px; border-radius: var(--mm-radius); font-size: 11.5px; font-weight: 500; box-shadow: inset 0 0 0 1px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.06); }
.mm-badge-green { color: #f0ece2; background: linear-gradient(180deg, #1c1f23, #12151800); }
.mm-badge-blue { color: #cdd3d9; background: linear-gradient(180deg, #191c20, #101214); }
.mm-badge-amber { color: #a29c91; background: linear-gradient(180deg, #16191c, #101214); }
.mm-badge-alert { color: #e2b0a6; background: linear-gradient(180deg, #201b1a, #141110); }
.mm-badge-off { color: #61686f; background: linear-gradient(180deg, #14171a, #0e1012); }

/* credit pill */
.mm-credits { display: inline-flex; align-items: center; gap: 9px; height: 32px; padding: 0 14px; border-radius: var(--mm-radius); background: var(--mm-recess); box-shadow: var(--mm-inset); }
.mm-credits b { font-family: 'DSEG7', monospace; font-size: 13px; font-weight: 400; color: #dfe2e5; }
.mm-credits span { font-size: 12px; color: var(--mm-dim); }

/* ---------- nav ---------- */
.mm-nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px 14px; }
.mm-nav-links { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.mm-nav-links a { position: relative; height: 32px; padding: 0 16px; display: inline-flex; align-items: center; border-radius: var(--mm-radius); color: var(--mm-muted); font-size: 13px; font-weight: 500; transition: color .1s; }
.mm-nav-links a:hover { color: var(--mm-ink-2); }
.mm-nav-links a[aria-current="page"] { color: #e8ebee; }
.mm-nav-links a[aria-current="page"]::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--mm-accent); }

/* dropdown menu */
.mm-menu { position: relative; }
.mm-menu-panel { position: absolute; left: 0; top: 36px; z-index: 20; min-width: 198px; padding: 6px; border-radius: var(--mm-radius); background: linear-gradient(180deg, #15181c, #0b0d0f); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 1px rgba(0,0,0,.95), 0 14px 34px rgba(0,0,0,.85); }
.mm-menu-panel[hidden] { display: none; }
.mm-menu-item { display: flex; align-items: center; justify-content: space-between; gap: 22px; height: 30px; padding: 0 12px; border-radius: 12px; cursor: pointer; font-size: 13.5px; color: var(--mm-ink-2); }
.mm-menu-item:hover { background: rgba(255,255,255,.07); }
.mm-menu-item kbd { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--mm-faint); }

/* side menu */
.mm-side { width: 230px; display: flex; flex-direction: column; gap: 3px; padding: 8px; }
.mm-side a { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 36px; padding: 0 14px; border-radius: var(--mm-radius); color: var(--mm-muted); font-size: 13.5px; font-weight: 500; }
.mm-side a:hover { color: #e8ebee; }
.mm-side a[aria-current="page"] { color: #e8ebee; background: linear-gradient(180deg, #2b3037, #1d2126); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 1px 3px rgba(0,0,0,.8); }

/* ---------- data ---------- */
.mm-table { border-radius: var(--mm-radius); overflow: hidden; background: var(--mm-panel); box-shadow: inset 0 0 0 1px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.07); }
.mm-table-head, .mm-table-row { display: grid; grid-template-columns: 1fr 110px 110px 90px; gap: 14px; align-items: center; padding: 11px 16px; }
.mm-table-head { padding: 9px 16px; background: rgba(0,0,0,.42); font-size: 12px; font-weight: 500; color: var(--mm-dim); }
.mm-table-row { font-size: 13.5px; color: #d7dbdf; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }

.mm-meter { height: 6px; border-radius: var(--mm-radius); background: var(--mm-recess); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 1px 3px rgba(0,0,0,.9); overflow: hidden; }
.mm-meter > div { height: 100%; border-radius: var(--mm-radius); background: linear-gradient(90deg, #6e6a63, var(--mm-accent)); }

/* notice / toast */
.mm-notice { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: var(--mm-radius); background: linear-gradient(180deg, #0e1013, #08090b); box-shadow: var(--mm-bar-shadow); }
.mm-notice-chip { width: 26px; height: 26px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.mm-toast-stack { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: flex; flex-direction: column; gap: 10px; }

/* modal */
.mm [hidden], .mm-modal-backdrop[hidden] { display: none !important; }
.mm-modal-backdrop { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(3,4,5,.72); backdrop-filter: blur(3px); }
.mm-modal { width: 100%; max-width: 460px; padding: 26px 28px 28px; display: flex; flex-direction: column; gap: 16px; border-radius: var(--mm-radius); background: var(--mm-chassis); box-shadow: var(--mm-raised); }

/* skeleton + empty */
@keyframes mm-shimmer { from { background-position: -220px 0; } to { background-position: 220px 0; } }
.mm-skeleton { height: 14px; border-radius: var(--mm-radius); background: linear-gradient(90deg, #0d0f12 0%, #171a1e 50%, #0d0f12 100%); background-size: 440px 100%; animation: mm-shimmer 1.2s linear infinite; }
.mm-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 48px 24px; border-radius: var(--mm-radius); background: var(--mm-panel); box-shadow: var(--mm-panel-shadow); text-align: center; }

@keyframes mm-spin { to { transform: rotate(360deg); } }
.mm-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.1); border-top-color: var(--mm-accent); animation: mm-spin .7s linear infinite; }

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  .mm-wrap { padding: 32px 20px 64px; }
  .mm-display { font-size: 38px; }
  .mm-side { width: 100%; }
  .mm-table-head, .mm-table-row { grid-template-columns: 1fr 90px; }
  .mm-table-head > :nth-child(3), .mm-table-row > :nth-child(3) { display: none; }
}