/* MS:NET Service Status — Statuspage-style component list inside Kener's page.
   Injected by the meh-status-edge Worker on public pages (not /manage, /account).
   Everything else (top bar, toolbar, banner, footer) is Kener's own look.
   Colours come from Kener's theme variables, so light/dark follow its toggle. */

.meh-hidden { display: none !important; }

/* Font: Inter — open-licence (OFL) stand-in for Atlassian Sans, the proprietary
   face on status.claude.com. Kener's own --font-family variable is never read. */
body { font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important; }

/* Light theme: warm ivory like status.claude.com. Dark stays Kener's own. */
html:not(.dark) {
  --background: #faf9f5; --card: #faf9f5; --popover: #faf9f5;
  --foreground: #141413; --card-foreground: #141413; --popover-foreground: #141413;
  --muted: #f0eee6; --secondary: #f0eee6; --accent: #f0eee6;
  --muted-foreground: #87867f; --border: #dedcd1; --input: #dedcd1;
}

/* Header logo: show the whole mark (Kener clips it to a circle). */
main a[href="/"] > img { border-radius: 0 !important; object-fit: contain !important; }

/* ── component list (rendered by theme.js inside Kener's card) ── */
.meh-components { --meh-line: var(--border, #e3e6ea); --meh-muted: var(--muted-foreground, #8b95a1); }
.meh-group + .meh-group { border-top: 1px solid var(--meh-line); }
.meh-group-head { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 16px 20px; background: var(--muted, #f7f8fa); border-bottom: 1px solid var(--meh-line); }
.meh-group:first-child .meh-group-head { border-top-left-radius: inherit; border-top-right-radius: inherit; }
.meh-group-name { font-weight: 700; font-size: 16px; color: var(--foreground, #333a42); }
.meh-comp { padding: 16px 20px 14px 36px; }
.meh-comp + .meh-comp { border-top: 1px solid var(--meh-line); }
.meh-comp-head { display: flex; align-items: center; gap: 8px; }
.meh-comp-name { font-size: 15px; font-weight: 500; color: var(--foreground, #333a42); text-decoration: none; }
.meh-comp-name:hover { text-decoration: underline; }
.meh-info { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  border-radius: 50%; border: 1px solid var(--meh-line); color: var(--meh-muted); font-size: 10px; cursor: help; }
.meh-status { margin-left: auto; font-size: 14px; font-weight: 500; white-space: nowrap; }
.meh-bars { display: block; width: 100%; height: 34px; margin: 10px 0 6px; }
.meh-bar { cursor: pointer; transition: opacity .1s; } .meh-bar:hover { opacity: .6; }
.dark .meh-bar-nodata { fill: #4a515b; }
.meh-legend { display: flex; align-items: center; gap: 10px; color: var(--meh-muted); font-size: 12px; }
.meh-legend .meh-rule { flex: 1; height: 1px; background: var(--meh-line); }

/* ── past incidents (card after the component card, Kener-style) ── */
.meh-past { border: 1px solid var(--border, #e3e6ea); border-radius: 24px; padding: 20px 24px; margin-top: 16px; }
.meh-past h2 { font-size: 20px; font-weight: 600; margin: 0 0 4px; color: var(--foreground, #333a42); }
.meh-past-day { padding: 14px 0 4px; }
.meh-past-day h3 { font-size: 15px; font-weight: 600; margin: 0 0 8px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border, #e3e6ea); color: var(--foreground, #333a42); }
.meh-past-item { padding: 2px 0; font-size: 14px; }
.meh-past-item a { color: var(--down, #e74c3c); font-weight: 600; text-decoration: none; }
.meh-past-item a:hover { text-decoration: underline; }
.meh-muted { color: var(--muted-foreground, #8b95a1); font-size: 14px; margin: 0; }

/* ── day tooltip ── */
.meh-tip { display: none; position: absolute; z-index: 60; min-width: 190px; max-width: 280px;
  background: var(--popover, var(--background, #fff)); color: var(--popover-foreground, var(--foreground, #333a42));
  border: 1px solid var(--border, #e3e6ea); border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.18);
  padding: 10px 12px; font-size: 13px; pointer-events: none; }
.meh-tip-date { font-weight: 700; margin-bottom: 4px; }
.meh-tip-line { color: var(--muted-foreground, #5a636e); }

@media (max-width: 600px) {
  .meh-group-head { padding: 14px 16px; } .meh-comp { padding: 14px 16px 12px 24px; }
}