/* uptime: a NOC. The room is dark, the racks are metal, the light comes from the LEDs. */

:root {
  color-scheme: dark;

  /* room and metal */
  --room: #0F151B;
  --metal: #18212A;          /* rack frame */
  --rail: #121920;           /* rails with mounting holes */
  --face: #222D38;           /* server faceplate */
  --face-light: #2A3744;
  --gap: #0B1015;            /* gap between units */
  --terminal: #0A1016;

  /* text */
  --ink: #DCE6EE;
  --dim: #8494A3;
  --muted: #4C5A67;
  --prompt: #6FB7FF;

  /* LED */
  --operativo: #43D17F;
  --mantenimiento: #5AA9FF;
  --degradado: #F2C230;
  --parcial: #FF8A2A;
  --grave: #FF4D4D;
  --desconocido: #6B7885;
  --aviso: #B79CFF;

  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --display: "Archivo", system-ui, sans-serif;
  --width: 1240px;
}

[data-level="operational"] { --level: var(--operativo); }
[data-level="maintenance"] { --level: var(--mantenimiento); }
[data-level="degraded"] { --level: var(--degradado); }
[data-level="partial"] { --level: var(--parcial); }
[data-level="major"] { --level: var(--grave); }
[data-level="unknown"] { --level: var(--desconocido); }
[data-level="advisory"] { --level: var(--aviso); }

* { box-sizing: border-box; }

html, body { background: var(--room); }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: 16px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  /* raised-floor grid, very faint */
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 60px 60px;
}

a { color: inherit; text-underline-offset: 3px; text-decoration-color: var(--muted); }
a:hover { text-decoration-color: currentColor; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--prompt); outline-offset: 2px; border-radius: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
code, .mono { font-family: var(--mono); }

.room, .footer { max-width: var(--width); margin: 0 auto; padding-inline: 24px; }
.room { padding-top: 28px; }

/* ------------------------------------------------ LED */

.led {
  display: inline-block;
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--level, var(--desconocido));
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 0 6px 1px color-mix(in srgb, var(--level, var(--desconocido)) 70%, transparent),
    inset 0 -2px 3px rgba(0, 0, 0, 0.25);
}
[data-level="unknown"] .led, .led[data-level="unknown"] { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5); }

@media (prefers-reduced-motion: no-preference) {
  [data-level="partial"] > .front .led,
  [data-level="major"] > .front .led { animation: blink 1.1s steps(2, jump-none) infinite; }
  [data-level="degraded"] > .front .led { animation: blink 2.4s steps(2, jump-none) infinite; }
}
@keyframes blink { 50% { opacity: 0.35; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5); } }

/* ------------------------------------------------ logo */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.logo { display: block; line-height: 0; border-radius: 6px; }
.logo svg { height: 44px; width: auto; }
.logo .logo-led { fill: var(--level); transition: fill 0.4s; }
.tagline { margin: 0; font-family: var(--mono); font-size: 0.8125rem; color: var(--dim); }

/* ------------------------------------------------ console (header) */

.console {
  background: var(--terminal);
  border: 1px solid #1E2933;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
}

.console-bar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 16px;
  background: #141C24;
  border-bottom: 1px solid #1E2933;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--dim);
}
.console-title, .filter-search .prompt { white-space: nowrap; }
.console-status { text-align: right; }
.console-status.stale { color: var(--parcial); }

.console-body {
  padding: 20px 24px 22px;
  font-family: var(--mono);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.line { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.output { color: var(--ink); }
.dim { color: var(--dim); }
.prompt { color: var(--prompt); }

.verdict {
  margin: 6px 0 4px;
  display: flex;
  align-items: baseline;
  gap: 0.45em;
  flex-wrap: wrap;
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 70%;
  font-size: clamp(2.1rem, 5.6vw, 4.4rem);
  line-height: 1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.systemd-mark {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.42em;
  letter-spacing: 0;
  color: var(--level);
  text-shadow: 0 0 12px color-mix(in srgb, var(--level) 55%, transparent);
  transform: translateY(-0.2em);
  white-space: pre;
}

.failures { list-style: none; margin: 10px 0 8px; padding: 0; }
.failures li { display: grid; grid-template-columns: 2ch 22ch 14ch 1fr; gap: 0 12px; }
.failures li > :first-child { color: var(--level); }
.failures .failure-level { color: var(--level); }
.failures .failure-text { color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.failures a { text-decoration: none; }
.failures a:hover { text-decoration: underline; }

.cursor { display: inline-block; width: 0.6em; height: 1.1em; background: var(--ink); vertical-align: -0.2em; }
@media (prefers-reduced-motion: no-preference) {
  .cursor { animation: cursor 1.05s steps(2, jump-none) infinite; }
}
@keyframes cursor { 50% { opacity: 0; } }

/* console reveal, only once */
@media (prefers-reduced-motion: no-preference) {
  .console-body.typing > * { visibility: hidden; }
  .console-body.typing > .visible { visibility: visible; }
}

/* ------------------------------------------------ panels */

.panel-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  flex-wrap: wrap;
  margin: 56px 0 14px;
}
.panel-header h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  font-stretch: 75%;
}
.panel-command { color: var(--muted); font-size: 0.8125rem; }

.button {
  font-family: var(--mono);
  font-size: 0.8125rem;
  border: 1px solid #2E3B48;
  background: var(--metal);
  color: var(--ink);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
}
.button:hover { border-color: var(--prompt); }

/* incident journal */

.journal {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  background: var(--terminal);
  border: 1px solid #1E2933;
  border-radius: 10px;
  font-family: var(--mono);
  font-size: 0.875rem;
}
.journal li { border-left: 3px solid var(--level); margin: 0 0 2px; }
.journal details summary {
  display: grid;
  grid-template-columns: 12ch 14ch 13ch minmax(0, 1fr);
  gap: 12px;
  padding: 8px 18px 8px 14px;
  cursor: pointer;
  list-style: none;
}
.journal summary::-webkit-details-marker { display: none; }
.journal summary:hover { background: rgba(255, 255, 255, 0.025); }
.j-time { color: var(--muted); }
.j-who { color: var(--prompt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.j-level { color: var(--level); font-weight: 700; }
.j-title { color: var(--ink); }
.j-title::after { content: " +"; color: var(--muted); }
.journal details[open] .j-title::after { content: " −"; }
.j-detail { padding: 0 18px 14px calc(14px + 12ch + 12px); color: var(--dim); }
.more {
  display: block;
  width: 100%;
  margin-top: 2px;
  padding: 8px 14px;
  border: 0;
  background: none;
  text-align: left;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--prompt);
  cursor: pointer;
}
.more:hover { background: rgba(255, 255, 255, 0.025); }
.j-detail p { margin: 0 0 6px; max-width: 90ch; white-space: pre-line; }
.j-detail a { color: var(--prompt); }

/* ------------------------------------------------ filter */

.filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  margin-bottom: 18px;
  font-family: var(--mono);
  font-size: 0.875rem;
}
.filter-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--terminal);
  border: 1px solid #1E2933;
  border-radius: 6px;
  padding: 0 12px;
}
.filter-search input {
  width: 16ch;
  border: 0;
  background: none;
  padding: 7px 0;
  font-family: var(--mono);
  outline: none;
}
.filter-search:focus-within { border-color: var(--prompt); }
.filter-search input::placeholder { color: var(--muted); }
.filter-flags { display: flex; flex-wrap: wrap; gap: 6px; }
.flag {
  border: 1px solid #26323E;
  background: none;
  color: var(--dim);
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.flag:hover { color: var(--ink); border-color: #3A4A59; }
.flag[aria-pressed="true"], .toggle:has(input:checked) { color: var(--room); background: var(--ink); border-color: var(--ink); }
.toggle { display: inline-flex; align-items: center; }
.toggle input { position: absolute; opacity: 0; }
.toggle:has(input:focus-visible) { outline: 2px solid var(--prompt); outline-offset: 2px; }

/* ------------------------------------------------ racks */

/* racks stacked in columns, no gaps */
.racks { columns: 2 520px; column-gap: 28px; }
.racks > * { break-inside: avoid; margin-bottom: 28px; }

.rack {
  background: var(--metal);
  border-radius: 8px;
  padding: 0 0 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 24px 40px -24px rgba(0, 0, 0, 0.9);
}

.rack-plate {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 12px 18px 10px;
}
.rack-name {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  font-stretch: 80%;
}
.rack-count { font-family: var(--mono); font-size: 0.75rem; color: var(--dim); }
.rack-count b { font-weight: 500; color: var(--level); }

/* the rack bay, with its two rails of mounting holes */
.rack-bay {
  margin: 0 10px;
  padding: 0 18px;
  background:
    radial-gradient(circle, #05080B 1.6px, transparent 2.2px) left 6px top 9px / 6px 14.67px repeat-y,
    radial-gradient(circle, #05080B 1.6px, transparent 2.2px) right 6px top 9px / 6px 14.67px repeat-y,
    linear-gradient(90deg, var(--rail) 18px, var(--gap) 18px, var(--gap) calc(100% - 18px), var(--rail) calc(100% - 18px));
  padding-block: 4px;
  border-radius: 3px;
}

.server { margin-bottom: 3px; }

.front {
  display: grid;
  grid-template-columns: 3ch minmax(0, 1fr) 140px 7.5ch 30px;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  padding: 0 6px 0 10px;
  background: linear-gradient(180deg, var(--face-light), var(--face) 40%);
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -1px 0 rgba(0, 0, 0, 0.4);
}
.server[data-pinned] .front { background: linear-gradient(180deg, #31404F, #283542 40%); }

.u { font-family: var(--mono); font-size: 0.625rem; color: var(--muted); text-align: right; }

.open {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 12px;
  min-width: 0;
  border: 0;
  background: none;
  padding: 7px 0;
  text-align: left;
  cursor: pointer;
}
.open .led { grid-row: 1 / 3; }
.name {
  font-weight: 700;
  font-stretch: 85%;
  font-size: 1rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.status { font-family: var(--mono); font-size: 0.6875rem; line-height: 1.3; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.server:not([data-level="operational"]) .status { color: var(--level); }
.open:hover .name { text-decoration: underline; text-decoration-color: var(--muted); text-underline-offset: 3px; }
.open[aria-expanded="true"] .name::after { content: " ▾"; font-family: var(--mono); font-size: 0.75em; color: var(--dim); }

/* 90 days: bars like an equalizer. Height repeats the colour, for people who can't tell colours apart. */
.history-bars {
  display: grid;
  grid-template-columns: repeat(90, 1fr);
  gap: 1px;
  align-items: end;
  height: 24px;
  padding: 3px 4px;
  background: var(--terminal);
  border-radius: 2px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}
.history-bars span { height: 12%; background: #1D2833; border-radius: 0.5px; }
.history-bars span[data-level] { background: var(--level); }
.history-bars span[data-level="operational"] { height: 34%; background: color-mix(in srgb, var(--operativo) 55%, var(--terminal)); }
.history-bars span[data-level="maintenance"] { height: 50%; }
.history-bars span[data-level="degraded"] { height: 66%; }
.history-bars span[data-level="partial"] { height: 84%; }
.history-bars span[data-level="major"] { height: 100%; }

.lcd {
  font-family: var(--mono);
  font-size: 0.75rem;
  text-align: right;
  padding: 3px 6px;
  background: var(--terminal);
  border-radius: 2px;
  color: color-mix(in srgb, var(--operativo) 80%, white);
  text-shadow: 0 0 6px color-mix(in srgb, var(--operativo) 50%, transparent);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}
.lcd.empty { color: var(--muted); text-shadow: none; }

.pin { border: 0; background: none; padding: 6px; cursor: pointer; line-height: 0; border-radius: 4px; }
.pin svg { width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.pin:hover svg { stroke: var(--ink); }
.pin[aria-pressed="true"] svg { stroke: var(--degradado); fill: color-mix(in srgb, var(--degradado) 30%, transparent); }

/* drawer: the server slides out and shows its terminal */
.drawer {
  margin: 0 8px 6px;
  padding: 14px 18px 16px;
  background: var(--terminal);
  border: 1px solid #1E2933;
  border-top: 0;
  border-radius: 0 0 6px 6px;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--dim);
}
@media (prefers-reduced-motion: no-preference) {
  .drawer:not([hidden]) { animation: slide-out 0.18s ease-out; }
}
@keyframes slide-out { from { transform: translateY(-6px); opacity: 0; } }

.drawer p, .drawer ul { margin: 0; }
.drawer ul { list-style: none; padding: 0; }
.drawer .command { color: var(--ink); margin-bottom: 6px; }
.drawer .block { margin-top: 10px; }
.drawer .key { color: var(--muted); }
.drawer .key-row { display: grid; grid-template-columns: 14ch 1fr; gap: 12px; }
.drawer .indent { padding-left: 2ch; }
.drawer .item { display: grid; grid-template-columns: 2ch 1fr auto; gap: 8px; }
.drawer .item > :first-child { color: var(--level); }
.drawer .level { color: var(--level); }
.drawer .message { padding-left: 2ch; color: var(--dim); white-space: pre-line; max-width: 90ch; }
.drawer .message::before { content: "> "; color: var(--muted); }
.drawer a { color: var(--ink); }
.drawer .official-link { color: var(--prompt); }
.drawer .error { color: var(--parcial); }

/* ------------------------------------------------ legend */

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 22px 0 0;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--dim);
}
.legend div { display: flex; align-items: center; gap: 8px; }
.legend dt, .legend dd { margin: 0; line-height: 0; }
.legend dd { line-height: 1.4; }
.note { margin: 10px 0 0; font-size: 0.8125rem; color: var(--dim); max-width: 80ch; }

/* ------------------------------------------------ maintenance and history */

.pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: 0 28px; }

.log {
  list-style: none;
  margin: 0;
  padding: 10px 0;
  background: var(--terminal);
  border: 1px solid #1E2933;
  border-radius: 10px;
  font-family: var(--mono);
  font-size: 0.8125rem;
  max-height: 460px;
  overflow: auto;
}
.log li {
  display: grid;
  grid-template-columns: 13ch minmax(0, 1fr);
  gap: 2px 14px;
  padding: 6px 16px;
}
.log li:hover { background: rgba(255, 255, 255, 0.025); }
.t-when { color: var(--muted); }
.t-who { color: var(--prompt); margin-right: 1ch; }
.t-what a { color: var(--ink); text-decoration: none; }
.t-what a:hover { text-decoration: underline; }
.t-duration { color: var(--dim); }
.log li[data-level] .t-who::before { content: "■ "; color: var(--level); }
.log li.now .t-when { color: var(--mantenimiento); }
.log .t-rest a { color: var(--prompt); }

.no-results { font-family: var(--mono); font-size: 0.875rem; color: var(--dim); padding: 20px 0; }

/* ------------------------------------------------ footer */

.footer { padding-block: 56px 48px; }
.footer p { margin: 0; padding-top: 20px; border-top: 1px solid #1E2933; color: var(--dim); font-size: 0.8125rem; max-width: 80ch; }

/* ------------------------------------------------ interactive terminal */

.session {
  max-height: 340px;
  overflow: auto;
  margin: 10px 0 2px;
  padding-right: 4px;
  scrollbar-color: #2C3A47 transparent;
}
.session:empty { display: none; }
.session .line { min-height: 1.6em; }
.t-table { display: grid; gap: 0 18px; margin: 2px 0; }
.t-table > * { white-space: pre-wrap; overflow-wrap: anywhere; }
.t-head { color: var(--muted); }
.t-full-row { grid-column: 1 / -1; margin-top: 6px; }
.t-key { color: var(--dim); }
.t-cmd { color: var(--ink); }
.t-error { color: var(--grave); }
.t-dir { color: var(--prompt); font-weight: 700; }
.session .level { color: var(--level); }
.session a { color: var(--ink); }
.session mark { background: color-mix(in srgb, var(--degradado) 35%, transparent); color: var(--ink); border-radius: 2px; }
.t-link {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--prompt);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: pointer;
}
.t-link:hover { text-decoration-style: solid; }
.t-neofetch { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: start; margin: 6px 0; }
.t-art { margin: 0; font: inherit; line-height: 1.3; color: var(--muted); }
.t-info p { margin: 0; }
.t-palette { margin-top: 6px !important; letter-spacing: -0.05em; }

.prompt-line {
  display: flex;
  align-items: baseline;
  gap: 1ch;
  margin-top: 4px;
  border-bottom: 1px solid transparent;
}
.prompt-line:focus-within { border-bottom-color: color-mix(in srgb, var(--prompt) 45%, transparent); }
.prompt-line .prompt { flex: none; cursor: text; }
.prompt-box { position: relative; flex: 1; min-width: 0; }
.prompt-line input {
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  outline: none;
  font: inherit;
  color: var(--ink);
  caret-color: var(--operativo);
  text-indent: 1.1ch;
}
.prompt-line input::placeholder { color: var(--muted); }
.prompt-line input:focus { text-indent: 0; }
.prompt-line .cursor { position: absolute; left: 0; top: 0.22em; pointer-events: none; }
.prompt-line input:focus + .cursor, .prompt-line input:not(:placeholder-shown) + .cursor { display: none; }
.prompt-line input:not(:placeholder-shown) { text-indent: 0; }

.shortcuts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 12px 0 0;
  font-size: 0.75rem;
}
.shortcut {
  border: 1px solid #24313D;
  background: none;
  border-radius: 4px;
  padding: 2px 8px;
  font: inherit;
  color: var(--dim);
  cursor: pointer;
}
.shortcut:hover { color: var(--ink); border-color: var(--prompt); }

/* ------------------------------------------------ language */

.console-bar { align-items: center; flex-wrap: wrap; }
.lang-switch { display: inline-flex; align-items: center; gap: 2px; margin-right: auto; margin-left: 16px; }
.lang-var { color: var(--muted); margin-right: 4px; }
.lang-switch button {
  border: 0;
  background: none;
  padding: 1px 6px;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--muted);
  cursor: pointer;
}
.lang-switch button:hover { color: var(--ink); }
.lang-switch button[aria-pressed="true"] { color: var(--room); background: var(--prompt); }

/* ------------------------------------------------ map */

.radar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  background: var(--terminal);
  border: 1px solid #1E2933;
  border-radius: 10px;
  overflow: hidden;
}

.radar-screen {
  position: relative;
  padding: 18px 14px 26px;
  /* very faint scan lines, like a monitor */
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 45%, #0F1B25 0%, var(--terminal) 75%);
  cursor: crosshair;
}

.map { display: block; width: 100%; height: auto; overflow: visible; }
#map-land { fill: none; stroke: #34475A; stroke-width: 0.62; stroke-linecap: round; }
#map-grid line { stroke: #1C2833; stroke-width: 0.18; }
#map-grid .tropic { stroke-dasharray: 0.6 1.2; }

.dot { cursor: pointer; outline: none; }
.dot .core {
  fill: var(--level);
  stroke: rgba(0, 0, 0, 0.55);
  stroke-width: 0.25;
}
.dot .halo { fill: var(--level); opacity: 0.16; }
.dot:hover .halo, .dot:focus-visible .halo, .dot.highlighted .halo, .dot.selected .halo { opacity: 0.38; }
.dot:focus-visible .core, .dot.selected .core { stroke: var(--ink); stroke-width: 0.45; }
@media (prefers-reduced-motion: no-preference) {
  .dot[data-level="partial"] .halo, .dot[data-level="major"] .halo {
    transform-box: fill-box;
    transform-origin: center;
    animation: pulse 1.6s ease-out infinite;
  }
}
@keyframes pulse {
  0% { transform: scale(0.45); opacity: 0.55; }
  100% { transform: scale(1.35); opacity: 0; }
}

.radar-coord {
  position: absolute;
  left: 16px;
  bottom: 8px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--muted);
  pointer-events: none;
}

.radar-tip {
  position: absolute;
  transform: translate(-50%, calc(-100% - 10px));
  min-width: 150px;
  max-width: 260px;
  padding: 8px 10px;
  background: rgba(10, 16, 22, 0.96);
  border: 1px solid #2E3B48;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.5;
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.9);
}
.radar-tip.below { transform: translate(-50%, 22px); }
.radar-tip p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tip-place { color: var(--ink); font-weight: 700; margin-bottom: 2px !important; }
.tip-row { color: var(--dim); }
.tip-row > span:first-child, .tip-row .level { color: var(--level); }

.radar-list {
  border-left: 1px solid #1E2933;
  padding: 14px 0 12px;
  font-family: var(--mono);
  font-size: 0.8125rem;
  contain: size;          /* the map sets the height; the list scrolls */
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.radar-summary, .radar-global { margin: 0; padding: 0 16px; color: var(--dim); font-size: 0.75rem; }
.radar-global { margin-top: 10px; color: var(--muted); }

.places { list-style: none; margin: 8px 0 0; padding: 0; }
.places button {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 0 10px;
  align-items: center;
  width: 100%;
  border: 0;
  background: none;
  padding: 6px 16px;
  text-align: left;
  cursor: pointer;
}
.places button:hover, .places .selected button { background: rgba(255, 255, 255, 0.04); }
.places .led { grid-row: 1 / 3; width: 8px; height: 8px; }
.place-name { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.place-who { color: var(--muted); font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#place-detail {
  margin: -14px 0 12px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid #1E2933;
  background: #0D151D;
  border-top: 3px solid var(--level);
  outline: none;
}
.detail-header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.detail-header .command { margin: 0; color: var(--ink); }
.close { border: 0; background: none; color: var(--muted); font-family: var(--mono); font-size: 0.75rem; cursor: pointer; padding: 2px 4px; }
.close:hover { color: var(--ink); }
.detail-place { margin: 6px 0 8px; color: var(--ink); font-weight: 700; }
.detail-place span { font-weight: 400; color: var(--dim); }
.detail-place .detail-coord { color: var(--muted); font-size: 0.75rem; }
.detail-providers { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.detail-providers .item { display: grid; grid-template-columns: 2ch 1fr auto; gap: 6px; }
.detail-providers .item > :first-child, .detail-providers .level { color: var(--level); }
.detail-providers a { color: var(--prompt); }
.examples { list-style: none; margin: 2px 0 0; padding: 0 0 0 2ch; color: var(--dim); font-size: 0.75rem; }
.examples li::before { content: "> "; color: var(--muted); }

/* ------------------------------------------------ power supply (Sponsors) */

.psu { margin-top: 56px; }

.psu-front {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 24px;
  padding: 18px 22px;
  background: linear-gradient(180deg, var(--face-light), var(--face) 30%, #1C2631);
  border-radius: 8px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 0 0 6px var(--metal),
    0 24px 40px -24px rgba(0, 0, 0, 0.9);
}

/* fan: concentric grille with the blades behind */
.psu-fan {
  position: relative;
  width: 116px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #0A0F14;
  box-shadow: inset 0 0 0 3px #2C3946, inset 0 2px 10px rgba(0, 0, 0, 0.9);
  overflow: hidden;
}
.psu-blades {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #26333F 0 9%, transparent 9% 20%, #26333F 20% 29%, transparent 29% 40%,
    #26333F 40% 49%, transparent 49% 60%, #26333F 60% 69%, transparent 69% 80%, #26333F 80% 89%, transparent 89% 100%);
}
.psu-fan::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, #3A4856 0 9%, transparent 9.5%),
    repeating-radial-gradient(circle, transparent 0 7px, #34424F 7px 8.5px);
}
@media (prefers-reduced-motion: no-preference) {
  .psu-blades { animation: spin 2.6s linear infinite; }
  .psu:hover .psu-blades, .psu:focus-within .psu-blades { animation-duration: 0.35s; }
}
@keyframes spin { to { transform: rotate(360deg); } }

.psu-model { margin: 0 0 6px; display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 0.75rem; color: var(--dim); }
.psu-standby { color: var(--muted); }
.psu h2 { margin: 0 0 6px; font-size: 1.5rem; font-weight: 800; font-stretch: 75%; }
.psu-text { margin: 0; color: var(--dim); font-size: 0.9375rem; max-width: 62ch; }

/* spec label, like the silver sticker on a real power supply */
.psu-label {
  margin: 0;
  padding: 10px 12px;
  background: linear-gradient(160deg, #C9D1D8, #9AA6B1);
  color: #1A232C;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.6;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 2px 6px rgba(0, 0, 0, 0.5);
}
.psu-label div { display: grid; grid-template-columns: 8ch auto; gap: 8px; }
.psu-label dt { font-weight: 700; }
.psu-label dd { margin: 0; white-space: nowrap; }

/* rocker switch */
.psu-switch {
  display: grid;
  justify-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--ink);
}
.psu-rocker {
  display: grid;
  grid-template-rows: 1fr 1fr;
  width: 46px;
  height: 64px;
  padding: 4px;
  background: #070B0F;
  border-radius: 5px;
  box-shadow: inset 0 0 0 2px #2C3946;
}
.psu-rocker span {
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.8125rem;
  color: #55606B;
  background: #1A232C;
}
.psu-rocker span:first-child { border-radius: 3px 3px 0 0; }
.psu-rocker span:last-child { border-radius: 0 0 3px 3px; background: #2A3540; color: #8C98A3; box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.5) inset; }
.psu-switch:hover .psu-rocker span:first-child,
.psu-switch:focus-visible .psu-rocker span:first-child {
  background: #2A3540; color: var(--operativo); text-shadow: 0 0 8px var(--operativo);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5) inset;
}
.psu-switch:hover .psu-rocker span:last-child,
.psu-switch:focus-visible .psu-rocker span:last-child { background: #1A232C; color: #55606B; box-shadow: none; }
.psu-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 0.75rem;
  white-space: nowrap;
  padding: 5px 10px;
  border: 1px solid #3A4856;
  border-radius: 6px;
}
.psu-action svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.psu-switch:hover .psu-action { border-color: #EA4AAA; color: #FF8BCF; }
.psu:has(.psu-switch:hover) #psu-led,
.psu:has(.psu-switch:focus-visible) #psu-led { --level: var(--operativo); }

/* ------------------------------------------------ mobile */

@media (max-width: 720px) {
  .room, .footer { padding-inline: 12px; }
  .room { padding-top: 12px; }
  .logo svg { height: 34px; }
  .console-body { padding: 16px; font-size: 0.8125rem; }
  .failures li { grid-template-columns: 2ch minmax(0, 1fr) auto; }
  .failures .failure-text { display: none; }
  .journal details summary { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; }
  .j-time { grid-column: 1 / -1; }
  .j-title { grid-column: 1 / -1; }
  .j-detail { padding-left: 14px; }
  .rack-bay { margin: 0 4px; padding-inline: 12px; }
  .front {
    grid-template-columns: minmax(0, 1fr) 7.5ch 30px;
    grid-template-areas: "open lcd pin" "history-bars history-bars history-bars";
    padding: 0 4px 8px 8px;
    row-gap: 0;
  }
  .u { display: none; }
  .open { grid-area: open; }
  .history-bars { grid-area: history-bars; height: 20px; }
  .lcd { grid-area: lcd; }
  .pin { grid-area: pin; }
  .drawer { margin-inline: 2px; padding: 12px; }
  .drawer .key-row { grid-template-columns: 1fr; gap: 0; }
  .filter-search, .filter-search input { width: 100%; }
  .lang-switch { margin-left: 0; order: 3; width: 100%; }
  .console-status { text-align: left; }
  .radar { grid-template-columns: 1fr; }
  .radar-screen { padding: 10px 4px 24px; }
  .radar-list { border-left: 0; border-top: 1px solid #1E2933; contain: none; max-height: 380px; }
  .psu-front { grid-template-columns: 72px minmax(0, 1fr); gap: 16px; padding: 16px; }
  .psu-fan { width: 72px; }
  .psu-label { grid-column: 1 / -1; }
  .psu-switch { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; align-items: center; }
  .psu-rocker { width: 36px; height: 50px; }
}