/* Shared by the client page and the help pages. */
:root {
  color-scheme: light dark;
  --paper:#eef1f4; --panel:#fff; --ink:#18212b; --muted:#5a6773; --line:#c9d2db; --soft:#e3e8ed;
  --signal:#2f6fde; --signal-ink:#fff; --caution:#9a6412; --caution-soft:#fbf3e4; --danger:#b3261e;
  --mono:ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
}
/* the theme: the system's (no data-theme), or the one chosen in the header (theme.js) */
:root[data-theme=light] { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) { --paper:#121820; --panel:#1a222c; --ink:#e3e9ef; --muted:#97a4b1; --line:#2d3845;
          --soft:#232d39; --signal:#7aa7ff; --signal-ink:#0d1726; --caution:#e2b25c; --caution-soft:#2a2418; --danger:#ff8a80; }
}
:root[data-theme=dark] { color-scheme: dark; --paper:#121820; --panel:#1a222c; --ink:#e3e9ef; --muted:#97a4b1;
  --line:#2d3845; --soft:#232d39; --signal:#7aa7ff; --signal-ink:#0d1726; --caution:#e2b25c; --caution-soft:#2a2418;
  --danger:#ff8a80; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color:var(--signal); text-underline-offset:2px; }
code, kbd, pre { font-family:var(--mono); font-size:13px; }
kbd { padding:0 5px; border:1px solid var(--line); border-bottom-width:2px; border-radius:4px; background:var(--panel); }
:focus-visible { outline:2px solid var(--signal); outline-offset:2px; }
[hidden] { display:none !important; }

/* controls */
button, .button { font:inherit; font-size:14px; padding:7px 14px; border:1px solid var(--line); border-radius:6px;
  background:var(--panel); color:var(--ink); cursor:pointer; text-decoration:none; }
button:hover:not(:disabled), .button:hover { border-color:var(--signal); }
button:disabled { opacity:.5; cursor:default; }
button.primary { background:var(--signal); border-color:var(--signal); color:var(--signal-ink); font-weight:600; }
button.small { font-size:12px; padding:3px 9px; }
input:not([type=checkbox]):not([type=radio]), select { font:inherit; width:100%; min-width:0; padding:7px 9px;
  border:1px solid var(--line); border-radius:6px; background:var(--panel); color:var(--ink); }
input[type=checkbox], input[type=radio] { accent-color:var(--signal); margin:0; }
input:disabled, select:disabled { opacity:.55; }
.muted { color:var(--muted); }

/* ---- client page, before the session ---- */
.shell { max-width:760px; margin:0 auto; padding:28px 16px 48px; }
.top { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 16px; margin-bottom:18px; }
/* the same header on every page: the title (a link home) and the same items */
.top .brand { font-size:22px; font-weight:700; letter-spacing:-.2px; color:var(--ink); text-decoration:none; }
.top .brand:hover { color:var(--signal); }
/* the header's items, one style: links, the Intro button and the theme select alike */
.top nav { display:flex; flex-wrap:wrap; align-items:center; gap:2px 4px; font-size:13px; }
.top nav a, .top nav button, .top nav select { box-sizing:border-box; height:28px; display:inline-flex; align-items:center;
  padding:0 8px; font:inherit; font-size:13px; line-height:1; color:var(--muted); text-decoration:none;
  background:transparent; border:1px solid transparent; border-radius:6px; cursor:pointer; }
.top nav a:hover, .top nav button:hover, .top nav select:hover { color:var(--signal); border-color:var(--line); }
.top nav a[aria-current=page] { color:var(--signal); background:var(--soft); }
.top nav select { width:auto; appearance:none; -webkit-appearance:none; padding-right:22px;
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E") no-repeat right 8px center; }
.top nav select option { color:var(--ink); background:var(--panel); }

/* the slogan under the header (index.html) */
.tagline { margin:-8px 0 6px; font-size:15px; }
.tagline.hint { margin:0 0 18px; font-size:13px; }

/* the route from this browser to the remote desktop, with the command that builds it */
.route { margin:0 0 20px; padding:12px 14px; border:1px solid var(--line); border-left:4px solid var(--caution);
  border-radius:6px; background:var(--caution-soft); font-size:13px; }
.route p { margin:0 0 8px; }
.hops { display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; margin:0 0 10px; padding:0; list-style:none; }
.hops li { display:flex; flex-direction:column; padding:4px 9px; border:1px solid var(--line); border-radius:5px; background:var(--panel); }
.hops li b { font-weight:600; font-size:12px; }
.hops li span { font-family:var(--mono); font-size:12px; color:var(--muted); }
.hops .via { padding:0; border:0; background:none; color:var(--muted); font-size:12px; }
.cmd { display:flex; gap:8px; align-items:stretch; }
.cmd code { flex:1; min-width:0; padding:6px 9px; border:1px solid var(--line); border-radius:5px; background:var(--panel);
  overflow-wrap:anywhere; user-select:all; }

/* the first visit's demo (splash.js) */
.splash { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:16px; background:rgba(8,12,18,.72); }
.splash-box { width:min(960px, 100%); max-height:100%; overflow:auto; display:flex; flex-direction:column; gap:10px;
  padding:18px; border:1px solid var(--line); border-radius:8px; background:var(--panel); }
.splash-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.splash-head h2 { margin:0; font-size:18px; }
.splash-tabs { display:flex; flex-wrap:wrap; gap:6px; }
.splash-tabs [role=tab] { font-size:13px; padding:5px 12px; }
.splash-tabs [role=tab][aria-selected=true] { border-color:var(--signal); color:var(--signal); box-shadow:inset 0 0 0 1px var(--signal); }
.splash video { width:100%; aspect-ratio:16/9; background:#000; border-radius:6px; }
.splash .hint { margin:0; }
.splash .row { justify-content:flex-end; }
.splash .splash-foot { justify-content:space-between; }
.splash-link { flex:1; min-width:0; overflow-wrap:anywhere; }
.splash-link button { margin-left:6px; }

/* the saved hosts, under the safety notice */
.hosts { margin:0 0 16px; }
.host-list { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.host { display:flex; flex-direction:column; align-items:flex-start; gap:1px; min-width:9em; max-width:100%;
  padding:7px 12px; text-align:left; border-radius:6px; }
.host b { font-weight:600; font-size:14px; }
.host span { font-family:var(--mono); font-size:12px; color:var(--muted); overflow-wrap:anywhere; }
.host[aria-checked=true] { border-color:var(--signal); box-shadow:inset 0 0 0 1px var(--signal); }
.host[aria-checked=true] b { color:var(--signal); }
.host-actions { display:flex; flex-wrap:wrap; gap:6px; }
#hostStatus:empty { display:none; }
dialog { max-width:min(520px, calc(100vw - 32px)); padding:0; border:1px solid var(--line); border-radius:8px;
  background:var(--panel); color:var(--ink); }
dialog::backdrop { background:rgba(10,16,24,.45); }
.dialog { display:flex; flex-direction:column; gap:10px; padding:20px; }
.dialog h2 { margin:0; font-size:17px; }
.dialog .hint, .dialog .note { margin:0; }
.dialog .row { justify-content:flex-end; margin-top:6px; }
form.connect { padding:20px; border:1px solid var(--line); border-radius:8px; background:var(--panel); }
.field { display:grid; grid-template-columns:8.5em 1fr; align-items:center; gap:4px 12px; margin:0 0 12px; font-size:14px; }
.field > span { color:var(--muted); }
.field small { grid-column:2; font-size:12px; color:var(--muted); }
.actions { display:flex; align-items:center; gap:12px; margin-top:16px; }
.actions .primary { min-width:9em; padding:9px 18px; font-size:15px; }
#status { font-size:13px; color:var(--muted); }
#summary { margin:12px 0 0; font-size:12px; color:var(--muted); }
#summary:empty { display:none; }

/* collapsible panels inside the connection form */
.panel { margin-top:16px; border-top:1px solid var(--line); padding-top:12px; }
.panel > summary { cursor:pointer; font-weight:600; font-size:14px; list-style-position:outside; }
.panel > summary small { font-weight:400; color:var(--muted); margin-left:6px; }
.panel[open] > summary { margin-bottom:12px; }
.panel fieldset { margin:0 0 14px; padding:0; border:0; }
.panel legend { padding:0; margin-bottom:6px; font-size:13px; color:var(--muted); }
.checks { display:flex; flex-wrap:wrap; gap:8px 18px; font-size:14px; }
.checks label, .choice label, label.check { display:inline-flex; align-items:center; gap:6px; }
label.check { font-size:14px; }
.choice { display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--line); border-radius:6px; overflow:hidden; width:fit-content; max-width:100%; }
.choice label { padding:6px 12px; font-size:13px; cursor:pointer; border-right:1px solid var(--line); }
.choice label:last-child { border-right:0; }
.choice input { position:absolute; opacity:0; pointer-events:none; }
.choice label:has(input:checked) { background:var(--signal); color:var(--signal-ink); }
.choice label:has(input:focus-visible) { outline:2px solid var(--signal); outline-offset:-2px; }
.hint { margin:6px 0 0; font-size:12px; color:var(--muted); }
.note { margin:0 0 14px; padding:8px 10px; font-size:12px; border-radius:5px; background:var(--soft); }
.row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
#preview { display:block; margin-top:6px; padding:6px 9px; border-radius:5px; background:var(--soft); overflow-wrap:anywhere; font-size:12px; }
#vaultPanel { margin:0 0 14px; padding:12px; border:1px solid var(--line); border-radius:6px; }
#vaultControls { display:flex; flex-wrap:wrap; gap:8px; align-items:end; }
#vaultControls label { display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--muted); }
#vaultStatus { flex-basis:100%; font-size:12px; color:var(--muted); }

/* notice about the saved log of a session that ended unexpectedly */
#lastlog { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 16px; padding:8px 12px; font-size:13px;
  border:1px solid var(--line); border-left:4px solid var(--danger); border-radius:6px; background:var(--panel); }
#lastlog[hidden] { display:none; }
#logPanel { margin-top:16px; font-size:13px; }
#logPanel summary { cursor:pointer; color:var(--muted); }
pre#log { max-height:40vh; overflow:auto; font-size:12px; background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:8px; }

/* ---- during the session: only the remote desktop, the toolbar and the overlays ---- */
/* the stylesheet sizes the canvas, so SDL treats its size as external and follows it:
   with /dynamic-resolution the remote desktop then resizes with the window */
canvas { display:none; width:100%; height:calc(100vh - var(--hdr, 0px) - 24px); background:#000; outline:none; }
body.session { background:#000; }
body.session .shell { max-width:none; padding:8px 12px 0; }
body.session .top, body.session .route, body.session form.connect, body.session #lastlog { display:none; }
/* SDL (or the runtime) writes an inline 800 x 600 CSS size on the canvas; the page owns its size,
   in a window as in full screen, so the remote desktop fills the window (hence !important) */
body.session canvas { display:block; width:100% !important; height:calc(100vh - var(--hdr, 0px) - 24px) !important; }
body.fs .shell { padding:0; }
/* full screen session: SDL sets inline sizes, hence !important */
body.fs canvas { position:fixed; inset:0; width:100vw !important; height:100vh !important; }
/* session toolbar: top centre of the remote screen; in full screen it hides and comes back
   when the mouse rests at the top edge right above it (app.js) */
#toolbar { position:fixed; top:var(--tbtop, 8px); left:50%; transform:translateX(-50%); z-index:10; display:none; gap:6px;
  padding:5px 8px; border-radius:0 0 8px 8px; background:rgba(24,33,43,.88); box-shadow:0 2px 10px rgba(0,0,0,.3);
  transition:opacity .2s, transform .2s; }
body.session #toolbar { display:flex; }
body.fs #toolbar { top:0; }
body.fs.tbhide:not(.tbpinned) #toolbar { opacity:0; transform:translate(-50%, -100%); pointer-events:none; }
/* the grip marks where the hidden toolbar comes back; clicks go through it to the remote side */
#tbGrip { display:none; position:fixed; top:0; left:50%; z-index:10; width:56px; height:4px; margin-left:-28px;
  border-radius:0 0 4px 4px; background:rgba(255,255,255,.4); box-shadow:0 0 0 1px rgba(0,0,0,.25); pointer-events:none; }
body.fs.tbhide:not(.tbpinned):not(.captured) #tbGrip { display:block; }
#toolbar button { font-size:12px; padding:4px 10px; border:0; background:#34404d; color:#fff; }
#toolbar button:hover { background:#2f6fde; }
#toolbar #tbCapture.on { background:#2f6fde; }
/* the remote pointer while the mouse is captured (app.js draws it; the browser hides its own) */
#vcursor { position:fixed; left:0; top:0; z-index:11; pointer-events:none; image-rendering:pixelated; }
#captureToast { position:fixed; top:calc(var(--tbtop, 8px) + 52px); left:50%; transform:translateX(-50%); z-index:12; padding:8px 14px; border-radius:6px;
  background:rgba(24,33,43,.92); color:#e3e9ef; font-size:13px; pointer-events:none; }
/* after connecting: offer to keep the typed password in the passkey vault. It and the capture
   notice sit below the toolbar (--tbtop is 0 in full screen), never over its buttons */
#saveBar { position:fixed; top:calc(var(--tbtop, 8px) + 52px); left:50%; transform:translateX(-50%); z-index:12;
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; max-width:min(640px, calc(100vw - 32px)); padding:10px 14px;
  border-radius:8px; background:rgba(24,33,43,.95); color:#e3e9ef; font-size:13px; box-shadow:0 4px 16px rgba(0,0,0,.35); }
#saveBar[hidden] { display:none; }
#saveBar .row { display:flex; gap:6px; }
#saveBar button:not(.primary) { background:#34404d; color:#fff; border-color:#4a5866; }
#captureToast kbd { background:#34404d; color:#fff; border-color:#4a5866; }
#toolbar #tbPin { opacity:.55; } #toolbar #tbPin.on { opacity:1; background:#2f6fde; }
/* connection info overlay, toggled from the toolbar */
#info { position:fixed; top:calc(var(--tbtop, 8px) + 44px); right:24px; z-index:10; min-width:260px; padding:8px 12px;
  border-radius:6px; background:rgba(24,33,43,.9); color:#e3e9ef; font:12px/1.6 var(--mono); pointer-events:none; }
body.fs #info { top:44px; }
#info td:first-child { color:#97a4b1; padding-right:12px; }
/* during a session the log is an overlay at the bottom (toggled with the toolbar's Log button) */
body.session #logPanel { position:fixed; left:12px; right:12px; bottom:0; margin:0; z-index:9; background:var(--panel);
  border:1px solid var(--line); border-bottom:0; border-radius:6px 6px 0 0; padding:4px 8px; opacity:.95; }
body.session #logPanel pre { max-height:35vh; margin:4px 0; }
body.session #logPanel:not([open]) { display:none; }

/* ---- help pages ---- */
.help { max-width:760px; margin:0 auto; padding:28px 16px 64px; }
.help h1 { font-size:24px; margin:0 0 6px; }
.help .lead { margin:0 0 24px; color:var(--muted); }
.help h2 { font-size:17px; margin:30px 0 8px; }
.help h3 { font-size:15px; margin:18px 0 6px; }
.help li { margin:5px 0; }
.help pre { margin:8px 0; padding:9px 11px; border:1px solid var(--line); border-radius:6px; background:var(--panel);
  overflow-x:auto; white-space:pre; }
.help .copyable { display:flex; gap:8px; align-items:start; }
.help .copyable pre { flex:1; min-width:0; }
.help .warn { padding:8px 12px; border-left:4px solid var(--caution); background:var(--caution-soft); border-radius:4px; }
.help table { border-collapse:collapse; width:100%; font-size:14px; }
.help td, .help th { text-align:left; padding:6px 8px 6px 0; border-bottom:1px solid var(--line); vertical-align:top; }
.help th { font-weight:600; color:var(--muted); font-size:13px; }
.help td code, .help li code { overflow-wrap:anywhere; }
.help .ok { color:#2e7d32; } .help .bad { color:var(--caution); }
dl.keys > div { display:grid; grid-template-columns:minmax(10em, 15em) 1fr; align-items:baseline; gap:4px 16px; padding:8px 0; border-bottom:1px solid var(--line); }
dl.keys dt { font-family:var(--mono); font-size:13px; } dl.keys dd { margin:0; }

@media (max-width:560px) {
  .field { grid-template-columns:1fr; }
  .field small { grid-column:1; }
  form.connect { padding:16px; }
  .cmd { flex-direction:column; }
  dl.keys > div { grid-template-columns:1fr; }
  .choice { width:100%; } .choice label { flex:1 1 auto; justify-content:center; }
}
@media (prefers-reduced-motion: reduce) { #toolbar { transition:none; } }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }