/* microvpn: the monochrome terminal theme shared with raubcamaioni.com */
:root {
  --ink: #000000;
  --paper: #ffffff;
  --dim: #a3a3a3;
  --line: #525252;
  color-scheme: dark;
}
html, body { margin: 0; background: var(--ink); color: var(--paper); }
body {
  font-family: ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 15px;
  line-height: 1.6;
  padding: 0 1rem 4rem;
}
header {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2ch;
  padding: 0.5rem 0; border-bottom: 1px solid var(--line); margin-bottom: 1.5rem;
}
header nav { display: flex; gap: 1ch; }
main { max-width: 60rem; margin: 0 auto; }
.prompt b { color: var(--paper); font-weight: normal; }
.dim { color: var(--dim); }
h1 { font-size: 1.1rem; font-weight: bold; margin: 0 0 1rem; }
h2 { font-size: 1rem; font-weight: bold; margin: 2rem 0 0.5rem; }
h2 .dim { font-weight: normal; }
p, li { margin: 0.3rem 0; }
ol { padding-left: 2ch; }
a { color: var(--paper); text-decoration: none; padding: 0 0.15rem; white-space: nowrap; }
a:hover, a:focus-visible { background: var(--paper); color: var(--ink); outline: none; }
code, pre {
  font-family: inherit; background: #111; border: 1px solid var(--line);
}
code { padding: 0 0.3ch; }
pre { padding: 0.75rem 1rem; overflow-x: auto; margin: 0.5rem 0; white-space: pre; }
form { margin: 1rem 0; display: flex; flex-wrap: wrap; gap: 1rem 2ch; align-items: baseline; }
label { display: inline-flex; gap: 1ch; align-items: baseline; color: var(--dim); }
input, select {
  font: inherit; color: var(--paper); background: var(--ink);
  border: 0; border-bottom: 1px solid var(--line); padding: 0 0.25ch; min-width: 6ch;
}
input:focus, select:focus { outline: none; border-bottom-color: var(--paper); }
select option { background: var(--ink); }
button {
  font: inherit; color: var(--paper); background: var(--ink); border: 0; padding: 0 0.15rem; cursor: pointer;
}
button:hover, button:focus-visible { background: var(--paper); color: var(--ink); outline: none; }
.error { color: var(--paper); border-left: 2px solid var(--paper); padding-left: 1ch; }
.stale { border-left: 2px solid var(--paper); padding-left: 1ch; }
.actions { display: flex; gap: 1ch; flex-wrap: wrap; }
.qr { display: inline-block; background: var(--paper); padding: 0.5rem; line-height: 0; margin: 0.5rem 0; }
.qr svg { display: block; max-width: 100%; height: auto; }
.link { display: flex; flex-wrap: wrap; gap: 0.25rem 1ch; align-items: baseline; }
.link code { overflow-wrap: anywhere; }
#overlay { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, 0.85); display: flex; align-items: center; justify-content: center; }
#overlay[hidden] { display: none; }
#overlay .modal { position: relative; background: var(--ink); border: 1px solid var(--line); padding: 2rem 1.5rem 1rem; text-align: center; max-width: 92vw; }
#overlay .modal #overlay-close { position: absolute; top: 0.4rem; right: 0.6rem; }  /* only the [x] itself highlights */
#overlay .qr svg { max-width: min(88vw, 80vh); }
#overlay-caption { margin: 0.75rem 0 0; }
.tabs { display: flex; gap: 1ch; margin: 1rem 0 0.5rem; }
.tabs a.active { background: var(--paper); color: var(--ink); }
details { margin: 1.5rem 0; }
summary { cursor: pointer; list-style: none; display: inline-block; }  /* only the text highlights */
summary::-webkit-details-marker { display: none; }
summary:hover { background: var(--paper); color: var(--ink); }
details[open] summary { margin-bottom: 0.5rem; }
#peer-list { list-style: none; padding: 0; }
#peer-list li { display: block; }
#peer-list li.connected { color: #4ade80; }
#peer-list li .addr { color: var(--dim); }
.notice { margin-top: 2rem; border-top: 1px solid var(--line); padding-top: 0.5rem; font-size: 0.9rem; }
#new-room { margin: 1.5rem 0; }
#new-room form { margin: 0; }
.tree { margin: 1.5rem 0; white-space: nowrap; }
.tree .root { font-weight: bold; }
.tree .branch { display: flex; flex-wrap: wrap; gap: 0 1ch; align-items: baseline; }
.tree .branch > .dim:first-child { white-space: pre; }
@media (max-width: 640px) { .tree { white-space: normal; } }
#version-tag {
  position: fixed; right: 0; bottom: 0; z-index: 50; padding: 0.15rem 0.5rem; font-size: 0.75rem;
  color: var(--dim); border-left: 1px solid var(--line); border-top: 1px solid var(--line); background: var(--ink);
}
@media (max-width: 640px) { #peer-list li { grid-template-columns: 2ch 1fr; } }
.headline { display: flex; flex-wrap: wrap; gap: 0.25rem 1ch; align-items: baseline; margin: 0 0 0.5rem; }
.headline .title { font-size: 1.1rem; font-weight: bold; }
#admin-bar { display: inline-flex; flex-wrap: wrap; gap: 0.25rem 1ch; align-items: baseline; }
#admin-bar[hidden] { display: none; }
#admin-bar form { margin: 0; display: inline-flex; gap: 0.25rem 1ch; }
.badge { font-weight: bold; }
#new-profile { margin: 1rem 0; }
#new-profile form { margin: 0; }
.tree .branch.selected > a:first-of-type { background: var(--paper); color: var(--ink); }
.tree .branch .connector { white-space: pre; }
.ok { color: #4ade80; }
.bad { color: #f87171; }
#new-profile form { margin: 0; display: inline-flex; flex-wrap: wrap; gap: 0 1ch; align-items: baseline; }
/* the tree's rows share one line height so the connectors join; the form row's controls fit that line */
.tree .branch { line-height: 1.6; gap: 0 1ch; }
.tree .branch form label { display: inline-flex; gap: 0.5ch; }
.tree .branch form input { padding: 0; line-height: 1.6; height: 1.6em; min-width: 0; }
.tree .branch form button { padding: 0 0.15rem; line-height: 1.6; }
#profile-error:not([hidden]) { margin: 0 0 0 4ch; }
#profile-error[hidden] { display: none; }
.stale { display: inline; border-left: 0; padding-left: 0; }