:root {
  --bg: #0f1419;
  --fg: #e6e1cf;
  --muted: #8a9199;
  --accent: #39bae6;
}
html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.4 system-ui, sans-serif;
}
body {
  display: flex;
  flex-direction: column;
}
header {
  display: flex;
  gap: 1em;
  align-items: baseline;
  padding: 8px 16px;
  border-bottom: 1px solid #253340;
}
header nav {
  margin-left: auto;
}
header a {
  color: var(--accent);
}
#status {
  color: var(--muted);
}
#notice {
  color: var(--fg);
}
#notice[hidden] {
  display: none;
}
#notice button {
  font: inherit;
  color: var(--bg);
  background: var(--accent);
  border: 0;
  border-radius: 4px;
  padding: 2px 10px;
  cursor: pointer;
}
header {
  flex-wrap: wrap;
}
main {
  flex: 1;
  min-height: 0;
  padding: 8px 16px 16px;
}
#terminal {
  height: 100%;
}
#screen {
  display: none;
}
/* Join class: a line under the header of the terminal page; the dashboard
   has its own (Networks view, through window.__wctrClass). */
#classbar {
  display: flex;
  gap: 0.8em;
  padding: 4px 16px;
  color: var(--muted);
}
#classbar button, #classinfo button {
  font: inherit;
  color: var(--accent);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}
body.dash #classbar {
  display: none;
}
#classinfo[hidden], #joinerr[hidden], #joinstep1[hidden], #joinstep2[hidden] {
  display: none;
}
#joindlg {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid #253340;
  border-radius: 6px;
  max-width: min(32em, calc(100vw - 32px));
}
#joindlg label {
  display: block;
  margin: 0.6em 0;
}
#joindlg input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  margin-top: 0.2em;
}
#joinerr {
  color: #f07178;
}

/* The dashboard (the default UI): the canvas fills the viewport from its
   top-left corner (its controls are addressed in canvas pixels); the
   header becomes an overlay for the status and the notices, hidden once
   the dashboard runs unless a notice needs the user. */
body.dash main {
  display: none;
}
body.dash #screen {
  display: block;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
}
body.dash header {
  position: fixed;
  z-index: 1;
  right: 12px;
  bottom: 12px;
  max-width: calc(100vw - 48px);
  background: rgba(15, 20, 25, 0.92);
  border: 1px solid #253340;
  border-radius: 6px;
}
body.dash.running header {
  display: none;
}
body.dash.running.noticed header {
  display: flex;
}