/* Prometheus Metrics Simulator. Opened full screen or in an iframe, which cannot see the site's own
   light/dim switch, so it follows the reader's system preference, as the viewers do. */

:root {
  --bg: #ffffff; --card: #ffffff; --border: #dfe3e8; --text: #22272e; --dim: #5f6b78; --accent: #326ce5;
  --btn: #f4f5f7; --panel: #0d2436; --panel-text: #eaf1f6; --raw: #f7f8fa; --code-bg: #f1f3f6;
  --bad: #cf222e; --warn-bg: #fff4e0; --warn-line: #b87500;
  --counter: #1f6fd0; --gauge: #0d8f62; --histogram: #c2540f; --summary: #7a55c7;
  /* the series of a graph, in the fixed order validated for light and dark surfaces */
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4; --s6: #008300; --s7: #6250d6; --s8: #e34948;
  --heat: #1c5cab; --grid: #e1e0d9; --axis: #6f6d68; --win: rgba(50, 108, 229, 0.16);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1d2b; --card: #112b40; --border: #234862; --text: #eaf1f6; --dim: #9fb2c2; --accent: #6f9bff;
    --btn: #16374f; --panel: #081b29; --raw: #0d2233; --code-bg: #0d2233;
    --bad: #ff7b72; --warn-bg: #3a2e12; --warn-line: #e3b341;
    --counter: #6fa8ff; --gauge: #4ac2a0; --histogram: #ff9a5c; --summary: #b69cf0;
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
    --heat: #6da7ec; --grid: #234862; --axis: #9fb2c2; --win: rgba(111, 155, 255, 0.26);
  }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
code, input, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.app { padding: 0.5rem 12px; max-width: 1800px; margin: 0 auto; }
.head h1 { font-size: 1.2rem; margin: 0 0 0.4rem; }
.in-viewer .head { display: none; }
.grid { display: grid; gap: 10px; grid-template-columns: 21rem minmax(0, 1fr) 22rem; height: calc(100vh - 3.4rem); min-height: 560px; }
.in-viewer .grid { height: calc(100vh - 1rem); }
.card { border: 1px solid var(--border); border-radius: 12px; background: var(--card); padding: 0.55rem 0.7rem; min-height: 0; min-width: 0; overflow: auto; }
h2 { font-size: 0.95rem; margin: 0 0 0.35rem; }
h3 { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--dim); margin: 0.6rem 0 0.3rem; }
button, select { font: inherit; color: var(--text); background: var(--btn); border: 1px solid var(--border); border-radius: 7px; padding: 0.15rem 0.5rem; cursor: pointer; }
button:hover, select:hover { border-color: var(--accent); }
.none { color: var(--dim); font-size: 0.82rem; margin: 0.3rem 0; }
.err { color: var(--bad); font: 0.8rem/1.45 ui-monospace, Menlo, monospace; margin: 0.3rem 0; }
.ty { font-size: 0.68rem; font-weight: 700; padding: 0 0.4rem; border-radius: 10px; color: var(--c); border: 1px solid var(--c); white-space: nowrap; }
.t-counter { --c: var(--counter); } .t-gauge { --c: var(--gauge); } .t-histogram { --c: var(--histogram); } .t-summary { --c: var(--summary); }

/* --- the service */
.run { display: flex; align-items: center; gap: 0.4rem; }
.clock { font: 700 1.05rem ui-monospace, Menlo, monospace; margin-right: auto; font-variant-numeric: tabular-nums; }
.hint { color: var(--dim); font-size: 0.78rem; margin: 0.3rem 0 0; }
.hint ul { margin: 0; padding-left: 1rem; }
.hint li { margin-bottom: 0.1rem; }
.hint b { color: var(--text); }
.copy { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; margin-bottom: 0.25rem; font-size: 0.8rem; }
.copy b { font: 700 0.8rem ui-monospace, Menlo, monospace; margin-right: auto; }
.copy button { font-size: 0.74rem; padding: 0.08rem 0.4rem; }
.copy button.on { background: var(--bad); border-color: var(--bad); color: #fff; }
.mc { border: 1px solid var(--border); border-radius: 8px; padding: 0.3rem 0.45rem; margin-bottom: 0.3rem; cursor: pointer; }
.mc:hover { border-color: var(--accent); }
.mc.sel { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.mt code { font-size: 0.74rem; font-weight: 700; overflow-wrap: anywhere; }
.mb { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.15rem; }
.lv { flex: 1; min-width: 0; display: flex; gap: 0.5rem; font: 0.72rem ui-monospace, Menlo, monospace; color: var(--dim); white-space: nowrap; overflow: hidden; }
.lv b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.ex { font-size: 0.72rem; padding: 0.05rem 0.45rem; }

/* --- the guided query */
.brow { display: flex; gap: 0.45rem; align-items: baseline; padding: 0.22rem 0; border-bottom: 1px solid var(--grid); }
.brow .no { width: 1.1rem; height: 1.1rem; flex: none; text-align: center; border-radius: 50%; background: var(--accent); color: #fff; font-size: 0.68rem; font-weight: 700; line-height: 1.1rem; }
.brow .bl { width: 5rem; flex: none; font-size: 0.8rem; font-weight: 600; }
.brow .bc { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0.3rem; align-items: center; }
.mname { font-size: 0.8rem; font-weight: 700; }
.fg { display: inline-flex; flex-wrap: wrap; gap: 0.2rem; align-items: center; margin-right: 0.5rem; }
/* the filter's groups: a bar before each, and the row shifted left so the bar of whichever group starts a line is cut off */
.bc:has(> .fgs) { overflow: hidden; }
.fgs { display: flex; flex-wrap: wrap; gap: 0.25rem 0; margin-left: calc(-1.1rem - 4px); margin-right: -1.1rem; }
.fgs .fg { border-left: 4px solid var(--dim); padding-left: 1.1rem; margin-right: 1.1rem; }
.bc > button + .fg { margin-left: 1.5rem; }
.fg i { font: 0.72rem ui-monospace, Menlo, monospace; color: var(--dim); font-style: normal; }
.ch { font-size: 0.76rem; padding: 0.05rem 0.45rem; }
.ch code { font-size: 0.95em; }
.ch.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.ch.risky:not(.on) { border-style: dashed; }
.qline { display: flex; gap: 0.3rem; margin: 0.5rem 0; }
#q-text { flex: 1; min-width: 0; font-size: 0.82rem; font-weight: 600; color: var(--text); background: var(--raw); border: 1px solid var(--border); border-radius: 7px; padding: 0.35rem 0.5rem; }
#q-text:focus { outline: 2px solid var(--accent); }
.exhead { display: flex; align-items: baseline; gap: 0.6rem; }
.exhead h2 { margin: 0; }
#q-at { font-size: 0.76rem; color: var(--dim); }
#q-at button { font-size: 0.72rem; padding: 0 0.35rem; }
.asked { font-size: 1.02rem; font-weight: 650; margin: 0.2rem 0 0.4rem; }
.asked code, .sx code, .warn code { background: var(--code-bg); padding: 0 0.2em; border-radius: 3px; font-size: 0.88em; overflow-wrap: anywhere; }
.warn { background: var(--warn-bg); border-left: 3px solid var(--warn-line); border-radius: 4px; padding: 0.25rem 0.5rem; margin: 0.3rem 0; font-size: 0.84rem; }
.part { font-size: 0.85rem; }
.part h2 { margin: 0 0 0.15rem; }
.part h2 code { font-size: 0.86rem; font-weight: 700; overflow-wrap: anywhere; }
.part + .part { border-top: 4px solid var(--dim); margin-top: 0.6rem; padding-top: 0.5rem; }
.bl[data-tip], .fg i[data-tip] { cursor: default; border-bottom: 1px dotted var(--dim); }
.ftip { position: fixed; z-index: 40; width: max-content; max-width: 19rem; pointer-events: none; background: var(--panel); color: var(--panel-text); border-radius: 6px; padding: 0.3rem 0.5rem; font-size: 0.78rem; line-height: 1.35; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); }
.ftip[hidden] { display: none; }
.ftip code { font-size: 0.92em; }
.sx.re { color: var(--warn-line); }
.swrap { overflow-x: auto; margin-top: 0.15rem; }
table.series { border-collapse: separate; border-spacing: 0; font: 0.72rem/1.4 ui-monospace, Menlo, Consolas, monospace; }
table.series th { position: sticky; left: 0; background: var(--card); text-align: left; font-weight: 400; color: var(--dim); padding-right: 0.8rem; white-space: nowrap; z-index: 1; }
table.series td { text-align: right; padding: 0.04rem 0.35rem; min-width: 3.4rem; color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
table.series thead td { font-size: 0.62rem; }
table.series td.w { color: var(--text); font-weight: 700; background: var(--win); box-shadow: inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent); }
table.vals { border-collapse: collapse; font: 0.72rem/1.35 ui-monospace, Menlo, Consolas, monospace; margin-top: 0.1rem; color: var(--dim); }
table.vals th { text-align: left; font-weight: 400; padding-right: 0.9rem; }
table.vals td { color: var(--text); font-weight: 600; white-space: pre; font-variant-numeric: tabular-nums; }
table.vals th.more { font-style: italic; }

/* --- the small Grafana panel */
.gf { display: flex; flex-direction: column; align-self: start; max-height: 100%; }
#q-builder.typed { opacity: 0.45; }
.gh { display: flex; align-items: center; gap: 0.3rem; }
.gh h2 { margin: 0 auto 0 0; }
.gh select { font-size: 0.74rem; padding: 0.05rem 0.2rem; }
.cap { font-size: 0.72rem; color: var(--dim); margin: 0.25rem 0; }
.plot { position: relative; flex: none; height: 15rem; cursor: crosshair; overflow: auto; }
.legend { display: flex; flex-wrap: wrap; gap: 0.1rem 0.7rem; margin-top: 0.25rem; font: 0.7rem ui-monospace, Menlo, Consolas, monospace; }
.legend span { display: inline-flex; align-items: center; gap: 0.3rem; }
.legend i { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }
svg text.ax { font: 10px ui-monospace, Menlo, Consolas, monospace; fill: var(--axis); }
svg .grid { stroke: var(--grid); stroke-width: 1; }
svg .sr polyline { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; }
svg .sr circle { fill: var(--c); }
svg .cur { stroke: var(--accent); stroke-width: 1; }
.tip { position: absolute; z-index: 5; pointer-events: none; background: var(--panel); color: var(--panel-text); border-radius: 6px; padding: 0.2rem 0.4rem; font-size: 0.68rem; white-space: nowrap; }
.tip div { display: flex; align-items: center; gap: 0.25rem; }
.tip i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.stats { display: flex; flex-wrap: wrap; min-height: 100%; align-items: center; justify-content: center; gap: 0.6rem 1.2rem; text-align: center; }
.stats small { display: block; color: var(--dim); font: 0.72rem ui-monospace, Menlo, monospace; }
.stats b { font-size: 2.1rem; }
.bg { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 4.5rem; align-items: center; gap: 0.4rem; margin: 0.5rem 0; font-size: 0.76rem; }
.bg span { font-family: ui-monospace, Menlo, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bg .tr { height: 12px; background: var(--grid); border-radius: 4px; overflow: hidden; }
.bg .tr i { display: block; height: 100%; background: var(--s1); }
.bg b { text-align: right; font-variant-numeric: tabular-nums; }
table.gt { width: 100%; border-collapse: collapse; font: 0.74rem ui-monospace, Menlo, Consolas, monospace; }
table.gt td { padding: 0.2rem 0.3rem; border-bottom: 1px solid var(--grid); overflow-wrap: anywhere; }
table.gt td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- a metric's explanation */
.dlg { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.dlg[hidden] { display: none; }
.dlg .box { background: var(--card); border-radius: 12px; width: min(38rem, 100%); max-height: 100%; display: flex; flex-direction: column; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35); }
.dlg header { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--border); }
.dlg header h2 { flex: 1; margin: 0; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.dlg header h2 code { font-size: 0.9rem; overflow-wrap: anywhere; }
.dlg .scroll { overflow: auto; padding: 0.55rem 0.8rem 0.8rem; font-size: 0.9rem; }
.dlg p { margin: 0 0 0.4rem; }
.dlg ul { margin: 0 0 0.4rem; padding-left: 1.15rem; }
.dlg li { margin-bottom: 0.15rem; }
.dlg code { background: var(--code-bg); padding: 0 0.2em; border-radius: 3px; font-size: 0.9em; }
#dlg-lines { display: grid; grid-template-columns: 1fr; gap: 0.4rem; margin: 0.5rem 0; }
.page { background: var(--raw); border: 1px solid var(--border); border-radius: 8px; padding: 0.3rem 0.5rem; font: 0.72rem/1.5 ui-monospace, Menlo, Consolas, monospace; }
.page .url { font-weight: 700; color: var(--dim); }
.page .c { color: var(--dim); }
.page .ln { display: flex; justify-content: space-between; gap: 0.6rem; }
.page .ln i { font-style: normal; color: var(--dim); }
.page .ln b { font-variant-numeric: tabular-nums; }
#dlg-try .ch { margin: 0 0.3rem 0.3rem 0; }

@media (max-width: 1100px) {
  .grid, .in-viewer .grid { grid-template-columns: minmax(0, 1fr); height: auto; }
  .card { overflow: visible; }
}