/* The sample dashboard page and the stand-in runtime's popover. Same palette as botgumi.com, light and dark. */
:root {
  --bg: #fafafa;
  --panel: #ffffff;
  --line: #e6e6e8;
  --fg: #0a0a0b;
  --fg-2: #52525b;
  --fg-3: #8b8b93;
  --ok: #15803d;
  --bad: #b91c1c;
  --bad-soft: #fef2f2;
  --warn: #a16207;
  --warn-soft: #fefce8;
  --chart-1: #e8502a;
  --chart-2: #2563eb;
  --chart-3: #0d9488;
  --chart-4: #a16207;
  --grid: #ececef;
  --skel: #efeff1;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 12px 32px -12px rgb(0 0 0 / 0.18);
  --sans: "Geist", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: light dark;
}
/* The site's theme choice (botgumi.theme, applied by theme.js) beats the system, as on botgumi.com.
   Dark is written twice; test/dashboard.test.ts checks the two blocks match. */
:root[data-theme="light"] {
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d0d0f;
    --panel: #141417;
    --line: #26262b;
    --fg: #ededef;
    --fg-2: #a1a1aa;
    --fg-3: #71717a;
    --ok: #4ade80;
    --bad: #f87171;
    --bad-soft: #2a1213;
    --warn: #facc15;
    --warn-soft: #2a2410;
    --chart-1: #f2794f;
    --chart-2: #60a5fa;
    --chart-3: #2dd4bf;
    --chart-4: #facc15;
    --grid: #232327;
    --skel: #1f1f23;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 32px -12px rgb(0 0 0 / 0.7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0d0d0f;
  --panel: #141417;
  --line: #26262b;
  --fg: #ededef;
  --fg-2: #a1a1aa;
  --fg-3: #71717a;
  --ok: #4ade80;
  --bad: #f87171;
  --bad-soft: #2a1213;
  --warn: #facc15;
  --warn-soft: #2a2410;
  --chart-1: #f2794f;
  --chart-2: #60a5fa;
  --chart-3: #2dd4bf;
  --chart-4: #facc15;
  --grid: #232327;
  --skel: #1f1f23;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 32px -12px rgb(0 0 0 / 0.7);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }

.pg { max-width: 1080px; margin: 0 auto; padding: 24px 16px 40px; display: grid; gap: 22px; }
.pg-head h1 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.pg-take { margin: 6px 0 0; color: var(--fg-2); max-width: 70ch; }
.pg-take b { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.pg-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pill { font-size: 12px; border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; background: var(--panel); cursor: pointer; }
.pill.ok::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); margin-right: 6px; vertical-align: 1px; }
.pg-nav { display: flex; flex-wrap: wrap; gap: 6px; }
.pg-nav a { font-size: 12px; color: var(--fg-2); text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; }
.pg-nav a:hover { color: var(--fg); }

.pg-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.pg-sec { display: grid; gap: 10px; scroll-margin-top: 12px; }
.pg-sec h2 { margin: 6px 0 0; font-size: 16px; font-weight: 600; }
.pg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; min-width: 0; display: grid; gap: 8px; align-content: start; }
.card.wide { grid-column: 1 / -1; }
.card h3 { margin: 0; font-size: 13px; font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.note { margin: 0; color: var(--fg-3); font-size: 12px; }
.tile .big { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.tile .sub { color: var(--fg-3); font-size: 12px; }
.delta.up { color: var(--ok); }
.delta.down { color: var(--bad); }

.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.kv > div { display: grid; }
.kv .v { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kv .k { color: var(--fg-3); font-size: 12px; }

.chart { min-height: 160px; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .grid { stroke: var(--grid); }
.chart .tick { fill: var(--fg-3); font-size: 10px; font-family: var(--sans); }
.legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--fg-2); }
.sw { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }

.list { display: grid; gap: 6px; }
.row { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 12px; }
.row .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-2); }
.track { height: 8px; border-radius: 4px; background: var(--grid); overflow: hidden; }
.fill { display: block; height: 100%; border-radius: 4px; }
.val { font-variant-numeric: tabular-nums; text-align: right; }

.tablebox { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th { text-align: left; font-weight: 500; color: var(--fg-3); border-bottom: 1px solid var(--line); padding: 4px 8px 6px 0; white-space: nowrap; }
td { border-bottom: 1px solid var(--line); padding: 6px 8px 6px 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
.r { text-align: right; }
.mono { font-family: var(--mono); font-size: 11px; }
.wrap { white-space: normal; min-width: 14rem; }

.meter { position: relative; height: 14px; border-radius: 7px; background: var(--grid); margin: 18px 0 4px; }
.meter .proj, .meter .now { position: absolute; inset: 0 auto 0 0; border-radius: 7px; background: var(--chart-1); }
.meter .proj { opacity: 0.3; }
.meter .mark { position: absolute; top: -4px; bottom: -4px; width: 1px; background: var(--fg-3); }
.meter .mark span { position: absolute; bottom: 100%; transform: translateX(-50%); font-size: 10px; color: var(--fg-3); white-space: nowrap; }

/* Panel states */
.skel { color: transparent !important; background: var(--skel); border-radius: 6px; animation: pulse 1.4s ease-in-out infinite; }
.card.is-loading .chart, .card.is-loading .list:empty { background: var(--skel); border-radius: 8px; min-height: 120px; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.55; } }
.msg { margin: 0; font-size: 12px; border-radius: 8px; padding: 6px 10px; background: var(--bad-soft); color: var(--bad); }
.msg::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: 1px; }
.card.is-off .msg { background: var(--warn-soft); color: var(--warn); }
.pg-sec > .msg { background: var(--warn-soft); color: var(--warn); }
.badge { font-size: 11px; font-weight: 500; color: var(--warn); background: var(--warn-soft); border-radius: 999px; padding: 1px 8px; }
.card.is-failed .chart, .card.is-off .chart { min-height: 0; }

/* Click to see where a number comes from */
[data-source][data-dash-source-state="ok"] { cursor: pointer; }
[data-field][data-dash-source-state="ok"]:hover, .val[data-dash-source-state="ok"]:hover { text-decoration: underline dotted; text-underline-offset: 3px; }
.dash-pop { position: fixed; z-index: 10; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 12px 14px; font-size: 12px; display: grid; gap: 6px; }
.dash-pop[hidden] { display: none; }
.dash-pop-head { display: flex; justify-content: space-between; align-items: start; gap: 8px; font-size: 13px; }
.dash-pop-x { border: 0; background: none; color: var(--fg-3); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; }
.dash-pop p { margin: 0; color: var(--fg-2); }
.dash-pop-line { display: flex; gap: 8px; }
.dash-pop-line span:first-child { color: var(--fg-3); min-width: 4.5rem; }
.dash-pop-line span:first-child:empty { display: none; }

.pg-foot { margin: 0; color: var(--fg-3); font-size: 12px; }

@media (max-width: 30rem) {
  .pg { padding: 16px 12px 32px; }
  .pg-grid { grid-template-columns: minmax(0, 1fr); }
  .row { grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr) auto; }
}