/* Minimal, clean landing for radar.hlukh.ch */
:root{
  --bg:#0b0d12; --card:#121622; --muted:#9aa3b2; --text:#e9eef7; --line:#222a3c;
  --ok:#4ade80; --warn:#fbbf24; --crit:#fb7185; --btn:#1f2937; --neon:#39ff14; --neonSoft:rgba(57,255,20,0.18);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}
a{color:inherit}
.container{max-width:980px;margin:0 auto;padding:28px 18px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px;flex-wrap:wrap}
.topbar-left{display:flex;align-items:center;gap:12px;min-width:0}
.back-link{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:2px solid rgba(57,255,20,.65);box-shadow:0 0 12px rgba(57,255,20,.25);background:rgba(57,255,20,.03);color:var(--text);text-decoration:none;font-weight:650;font-size:13px;white-space:nowrap}
.back-link:hover{background:rgba(57,255,20,.10);box-shadow:0 0 16px rgba(57,255,20,.35)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.badge{width:34px;height:34px;border-radius:10px;background:#000;display:grid;place-items:center;border:1px solid var(--line)}
.badge span{font-weight:800}
.lang{display:flex;align-items:center;gap:10px}
.lang a{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:999px;border:2px solid rgba(57,255,20,.55);box-shadow:0 0 10px rgba(57,255,20,.20);background:rgba(57,255,20,.04);color:var(--text);text-decoration:none;font-weight:650;font-size:13px}
.lang a:hover{background:rgba(57,255,20,.10);box-shadow:0 0 14px rgba(57,255,20,.32)}
.lang a.active{background:rgba(57,255,20,.16)}
.hero{padding:18px 0 10px}
h1{font-size:38px;line-height:1.1;margin:0 0 10px}
p.lead{color:var(--muted);margin:0 0 16px;font-size:18px}
.grid{display:grid;grid-template-columns:1fr;gap:14px;margin:18px 0}
.card{grid-column:span 12;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px}
@media(min-width:860px){.grid{grid-template-columns:repeat(12,1fr)}.card.span4{grid-column:span 4}.card.span6{grid-column:span 6}}
.card h3{margin:0 0 8px;font-size:18px}
.card p{margin:0;color:var(--muted)}
.card a{display:block;text-decoration:none}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.btn{appearance:none;border:1px solid var(--line);background:var(--btn);color:var(--text);padding:10px 12px;border-radius:12px;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.btn.primary{background:#111827;border-color:#2b3550}
.btn.neon{border:2px solid rgba(57,255,20,.75);background:rgba(57,255,20,.04);box-shadow:0 0 14px rgba(57,255,20,.22)}
.btn.neon:hover{background:rgba(57,255,20,.10);box-shadow:0 0 18px rgba(57,255,20,.33)}
.btn.primary.neon{background:rgba(17,24,39,.6);border-color:rgba(57,255,20,.85);box-shadow:0 0 18px rgba(57,255,20,.28)}
.btn:hover{transform:translateY(-1px)}
.small{font-size:13px;color:var(--muted)}
hr{border:0;border-top:1px solid var(--line);margin:18px 0}
details{border:1px solid var(--line);border-radius:14px;padding:12px;background:#0f1320}
details + details{margin-top:10px}
summary{cursor:pointer;font-weight:650}
.kv{display:grid;grid-template-columns:140px 1fr;gap:8px;margin-top:10px;color:var(--muted);font-size:14px}
.kv b{color:var(--text);font-weight:650}
.kv span{min-width:0;overflow-wrap:anywhere;word-break:break-word}
.pill{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--line);border-radius:999px;padding:6px 10px;color:var(--muted);font-size:13px}
.pill .dot{width:8px;height:8px;border-radius:99px;background:var(--ok)}
.footer{color:var(--muted);font-size:13px;margin-top:22px}
.input, select, textarea{width:100%;background:#0f1320;color:var(--text);border:1px solid var(--line);border-radius:12px;padding:10px}
label{display:block;margin:10px 0 6px;color:var(--muted);font-size:13px}
pre{background:#0f1320;border:1px solid var(--line);border-radius:12px;padding:12px;overflow:auto}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:13px}
.notice{background:#0f1320;border:1px dashed #2b3550;border-radius:14px;padding:12px;color:var(--muted)}

/* Wizard (start page) */
.stepper{position:relative;display:flex;gap:10px;align-items:center;padding:8px 2px 18px;margin-bottom:8px;flex-wrap:wrap}
/* Progress line under the stepper.
   Keep it visually uniform (single tone) to avoid the "two thirds" split look.
   The active step is still indicated by the pills, so we keep the line subtle. */
.stepper .bar{position:absolute;left:0;right:0;bottom:6px;height:2px;background:rgba(255,255,255,.14);border-radius:99px;overflow:hidden}
.stepper .bar .fill{height:100%;background:rgba(255,255,255,.14)}
.stepper .step{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02)}
.stepper .step .num{width:20px;height:20px;border-radius:8px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.10);font-weight:750;color:var(--muted)}
.stepper .step.active{color:var(--text);border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.04)}
.stepper .step.active .num{color:var(--text)}
.stepper .step.done{opacity:.85}

.wizard-steps-mini{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px}
.wizard-steps-mini .mini{font-size:12px;color:var(--muted);border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02);border-radius:999px;padding:6px 10px}


.controls{display:flex;gap:10px;align-items:center;margin:10px 0 14px 0;flex-wrap:wrap}
.controls select{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);color:inherit;padding:6px 10px;border-radius:10px}
.muted{opacity:.75}
.hint{opacity:.7;font-weight:600;margin-left:6px;cursor:help}


/* Dashboard link manager (sessions) */
.radar-dialog {
  width: min(900px, calc(100vw - 24px));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 16px;
  background: rgba(10,12,18,0.96);
  color: #e5e7eb;
}
.radar-dialog::backdrop { background: rgba(0,0,0,0.55); }
.radar-dialog__head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.radar-dialog__title { font-weight: 700; font-size: 16px; }
.radar-dialog__hint { color:#94a3b8; font-size: 12px; margin-top: 6px; }
.radar-linkrow { display:flex; gap:12px; justify-content:space-between; align-items:flex-start; padding:12px; border:1px solid rgba(255,255,255,0.08); border-radius:12px; margin-top:10px; }
.radar-linkrow__meta { flex: 1; min-width: 0; }
.radar-linkrow__btns { display:flex; flex-direction:column; gap:8px; }
.radar-linkrow__line { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; }

/* Device selector + delete (stacked to avoid word-break issues in .kv span) */
.deviceSelectWrap{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:8px;

  /* Override inherited wrapping rules from .kv span */
  overflow-wrap:normal;
  word-break:normal;
}
.deviceSelectWrap select{
  min-width:240px;
  width:100%;
}
#deleteSelectedDeviceBtn{
  width:100%;
  white-space:nowrap;
  overflow-wrap:normal;
  word-break:normal;
}
.btnDanger{border-color:rgba(220,38,38,.35);background:rgba(220,38,38,.12);color:#fecaca}
/* Locale robustness: some templates used class='danger' instead of 'btnDanger' */
.btn.danger{border-color:rgba(220,38,38,.35);background:rgba(220,38,38,.08);color:#ffd7d7}

.btnDanger:hover{background:rgba(220,38,38,.18)}
.btnDanger:disabled{opacity:.55;cursor:not-allowed}



/* Generic modal (used for device management + self-service enroll) */
.hidden{display:none!important}
.modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:18px}
.modal-overlay{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.modal-panel{position:relative;width:min(820px,100%);max-height:calc(100vh - 48px);overflow:auto;background:rgba(10,12,18,.96);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:16px;color:var(--text)}
.modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.modal-title{font-weight:750;font-size:16px}
.modal-body{margin-top:10px}
.modal-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.links-list{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.links-row{display:flex;gap:12px;justify-content:space-between;align-items:flex-start;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.02)}
.links-left{flex:1;min-width:0}
.links-title{font-weight:650}
.links-meta{color:var(--muted);font-size:12px;margin-top:4px}
.links-right{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.progress{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px}
.progress .pill{background:rgba(255,255,255,.02)}


/* Wizard command copy helper */
.codebox{position:relative}
.codebox pre{padding-top:46px}
.codecopy{position:absolute;top:10px;right:10px;z-index:2}


/* Dashboard link QR block (no inline scripts, tiny and simple) */
.dash-qr-title{ font-weight:800; margin-bottom:8px; }
.dash-qr-row{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.dash-qr-actions{ min-width:220px; }
.dash-qr img{ border-radius:12px; border:1px solid rgba(0,0,0,.08); background:#fff; }

@media(max-width:520px){
  .container{padding:18px 14px}
  h1{font-size:30px}
  p.lead{font-size:16px}
  .topbar-left{flex-wrap:wrap}
  .back-link{white-space:normal;max-width:100%}
  .lang{flex-wrap:wrap}
  .deviceSelectWrap{display:flex;flex-wrap:wrap;width:100%}
  .deviceSelectWrap select{min-width:0;width:100%}
  .deviceSelectWrap .btn{width:100%;justify-content:center}
  .kv{grid-template-columns:120px 1fr}
}
@media (max-width: 720px){
  .controls .muted{flex-basis:100%;opacity:.75}
}

/* Drawer chart panel (Pulse-like) */
.drawer{
  position:fixed;
  inset:0 0 0 auto;
  width:min(760px, 100%);
  height:100%;
  background:rgba(10,12,18,.98);
  border-left:1px solid rgba(255,255,255,.12);
  transform:translateX(100%);
  transition:transform 260ms ease;
  z-index:1200;
  display:flex;
  flex-direction:column;
}
.drawer.open{transform:translateX(0)}
.drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.drawer-body{
  padding:16px;
  overflow:auto;
}
.drawer-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  z-index:1190;
}



.drawer-canvas{
  display:block;
  width:100%;
  height:360px;
}



/* --- Installer code blocks: always visible & readable --- */
pre{margin:0}
pre code{display:block;white-space:pre-wrap;word-break:break-word;color:rgba(235,245,255,.92)}


/* Ensure installer commands are always visible */
pre, pre code{color: rgba(240,244,255,.92); white-space: pre-wrap;}


/* --- Setup: OS install cards ---
   Mobile: stack
   Desktop: 3-up when there is enough room; otherwise 2-up.
   We also neutralize the old 12-col span classes on these cards so
   layout stays stable across languages & long terminal snippets.
*/
.setup-os-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
.setup-os-grid > .card {
  grid-column: auto !important;
  min-width: 0;
}
/*
  Keep the 3 OS cards in a stable grid on desktop.
  - >= 980px: 3 columns
  - 860–979px: 2 columns
  - < 860px: stacked
*/
@media (min-width: 980px){
  .setup-os-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }
}

@media (min-width: 860px) and (max-width: 979px){
  .setup-os-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

@media (max-width: 859px){
  .setup-os-grid {
    grid-template-columns: 1fr;
  }
}