/* Mirror Hub — design tokens
   Inherited from scraper.appearance.fr but flipped to a dark plum surface
   per spec: "near-black plum ground" + plum accent, mono numerals, Bricolage display.
*/

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Noto+Sans+JP:wght@400;500&display=swap');

:root {
  /* ── Surface tokens (Mirror Hub spec) ──────────────────────────── */
  --mh-bg:           #0B0A12;
  --mh-surface:      #11101A;
  --mh-card:         #161522;
  --mh-card-2:       #1B1A28;
  --mh-line:         #221F32;
  --mh-border:       #2C2940;
  --mh-border-soft:  #1E1B2E;

  /* ── Accent: plum ──────────────────────────────────────────────── */
  --mh-plum:         #A07BF5;
  --mh-plum-bright:  #C8A6FF;
  --mh-plum-deep:    #7E5EE0;
  --mh-plum-soft:    rgba(160, 123, 245, 0.13);
  --mh-plum-softer:  rgba(160, 123, 245, 0.07);
  --mh-plum-edge:    rgba(160, 123, 245, 0.32);

  /* ── Text ──────────────────────────────────────────────────────── */
  --mh-text:         #ECEAF4;
  --mh-text-dim:     #C7C3D6;
  --mh-text-mute:    #8E8AA3;
  --mh-text-faint:   #5C586F;

  /* ── State ─────────────────────────────────────────────────────── */
  --mh-good:         #4ADE80;
  --mh-warn:         #F4B860;
  --mh-danger:       #F26B7A;
  --mh-good-soft:    rgba(74, 222, 128, 0.12);
  --mh-warn-soft:    rgba(244, 184, 96, 0.13);
  --mh-danger-soft:  rgba(242, 107, 122, 0.13);

  /* ── Type ──────────────────────────────────────────────────────── */
  --mh-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --mh-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mh-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --mh-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;

  /* ── Radii ─────────────────────────────────────────────────────── */
  --mh-r-input: 6px;
  --mh-r-card: 10px;
  --mh-r-pill: 9999px;

  /* ── Motion ────────────────────────────────────────────────────── */
  --mh-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --mh-dur: 140ms;
  --mh-dur-slow: 220ms;

  /* ── Density (toggleable via Tweaks) ───────────────────────────── */
  --mh-row-h: 36px;          /* comfortable */
  --mh-pad-y: 14px;
  --mh-pad-x: 18px;
  --mh-gap: 14px;
  --mh-text-size: 13px;
  --mh-mono-size: 12px;
}

[data-density="compact"] {
  --mh-row-h: 28px;
  --mh-pad-y: 9px;
  --mh-pad-x: 13px;
  --mh-gap: 10px;
  --mh-text-size: 12px;
  --mh-mono-size: 11px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--mh-bg);
  color: var(--mh-text);
  font-family: var(--mh-sans);
  font-size: var(--mh-text-size);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}

:lang(ja) { font-family: var(--mh-jp); }

/* ── Headings: Bricolage Grotesque, no caps ─────────────────────── */
.mh-display {
  font-family: var(--mh-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0;
}
.mh-h1 { font-size: 44px; font-weight: 600; letter-spacing: -0.02em; }
.mh-h2 { font-size: 28px; font-weight: 600; letter-spacing: -0.015em; }
.mh-h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }

.mh-eyebrow {
  font-family: var(--mh-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mh-text-mute);
  font-weight: 500;
}

.mh-mono {
  font-family: var(--mh-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ── Buttons ────────────────────────────────────────────────────── */
.mh-btn {
  font-family: var(--mh-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  height: var(--mh-row-h);
  padding: 0 14px;
  border-radius: var(--mh-r-input);
  border: 1px solid transparent;
  background: transparent;
  color: var(--mh-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--mh-dur) var(--mh-ease);
  white-space: nowrap;
}
.mh-btn-ghost { color: var(--mh-plum); }
.mh-btn-ghost:hover { background: var(--mh-plum-soft); }
.mh-btn-solid { background: var(--mh-plum); color: #15102A; font-weight: 600; }
.mh-btn-solid:hover { background: var(--mh-plum-bright); }
.mh-btn-line { border-color: var(--mh-border); color: var(--mh-text-dim); }
.mh-btn-line:hover { border-color: var(--mh-plum); color: var(--mh-text); background: var(--mh-plum-softer); }
.mh-btn-danger { color: var(--mh-danger); }
.mh-btn-danger:hover { background: var(--mh-danger-soft); }
.mh-btn-icon { padding: 0; width: var(--mh-row-h); justify-content: center; }
.mh-btn:disabled, .mh-btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }

.mh-btn-sm { height: 26px; padding: 0 10px; font-size: 11px; }

/* ── Inputs ─────────────────────────────────────────────────────── */
.mh-input, .mh-select {
  font-family: var(--mh-sans);
  font-size: var(--mh-text-size);
  height: var(--mh-row-h);
  padding: 0 12px;
  background: transparent;
  color: var(--mh-text);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r-input);
  outline: 0;
  width: 100%;
  transition: border-color var(--mh-dur) var(--mh-ease), box-shadow var(--mh-dur) var(--mh-ease);
}
.mh-input.is-mono { font-family: var(--mh-mono); font-variant-numeric: tabular-nums; }
.mh-input:focus, .mh-select:focus {
  border-color: var(--mh-plum);
  box-shadow: inset 0 0 0 9999px var(--mh-plum-soft);
}
.mh-input::placeholder { color: var(--mh-text-faint); }

.mh-label {
  font-family: var(--mh-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mh-text-mute);
  font-weight: 500;
  display: block;
  margin-bottom: 6px;
}

/* ── Chips / pills ──────────────────────────────────────────────── */
.mh-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 10px;
  font-family: var(--mh-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r-pill);
  background: transparent;
  color: var(--mh-text-dim);
  white-space: nowrap;
}
.mh-chip-good   { color: var(--mh-good);   background: var(--mh-good-soft);   border-color: rgba(74,222,128,0.28); }
.mh-chip-warn   { color: var(--mh-warn);   background: var(--mh-warn-soft);   border-color: rgba(244,184,96,0.32); }
.mh-chip-danger { color: var(--mh-danger); background: var(--mh-danger-soft); border-color: rgba(242,107,122,0.32); }
.mh-chip-plum   { color: var(--mh-plum-bright); background: var(--mh-plum-soft); border-color: var(--mh-plum-edge); }

/* ── Card / surface helpers ─────────────────────────────────────── */
.mh-card {
  background: var(--mh-card);
  border: 1px solid var(--mh-line);
  border-radius: var(--mh-r-card);
}
.mh-surface {
  background: var(--mh-surface);
}

/* ── Hairline divider ───────────────────────────────────────────── */
.mh-hr { height: 1px; background: var(--mh-line); border: 0; margin: 0; }

/* ── Scrollbar (subtle) ─────────────────────────────────────────── */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--mh-line); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: var(--mh-border); }

/* ── Links ──────────────────────────────────────────────────────── */
a { color: var(--mh-plum); text-decoration: none; transition: color var(--mh-dur) var(--mh-ease); }
a:hover { color: var(--mh-plum-bright); }

/* ── Status dot ─────────────────────────────────────────────────── */
.mh-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mh-dot-good   { background: var(--mh-good); box-shadow: 0 0 0 3px var(--mh-good-soft); }
.mh-dot-warn   { background: var(--mh-warn); box-shadow: 0 0 0 3px var(--mh-warn-soft); }
.mh-dot-danger { background: var(--mh-danger); box-shadow: 0 0 0 3px var(--mh-danger-soft); }