:root {
  /* let native controls (buttons, scrollbars) follow the OS light/dark scheme */
  color-scheme: light dark;
  --bg: #fff;
  --fg: #111;
  --accent: #C33;
  --accent-strong: #A22;
  --muted: #666;
  --strong: #333;
  --border: #AAA;
  --border-light: #DDD;
  --pre-bg: #F8F8F8;
  --info: #090;
  --warning: #999;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1e1e1e;
    --fg: #ddd;
    --accent: #f77;
    --accent-strong: #e66;
    --muted: #aaa;
    --strong: #ccc;
    --border: #555;
    --border-light: #444;
    --pre-bg: #2a2a2a;
    --info: #6c6;
    --warning: #999;
  }
}

body {
  font-family: Calibri, Helvetica, sans-serif;
  font-size: 16px;
  overflow-y: scroll;
  /* no top margin: the sticky header supplies its own top spacing (via padding) */
  margin: 0 1rem 1rem 1rem;
  background-color: var(--bg);
  color: var(--fg);
}

p {
  margin: 0 0 .6rem 0;
}

h1 {
  font-size: 220%;
  color: var(--accent-strong);
  margin: -2px 0 0 0;
}

h2 {
  font-size: 150%;
  color: var(--accent);
  margin: 0 0 .2rem 0;
}

h3 {
  font-size: 120%;
  color: var(--muted);
  margin: .2rem 0 .2rem 0;
}

table {
  table-layout: fixed;
}

th {
  vertical-align: top;
  text-align: left;
  padding: 0 1rem 0rem 0;
}

td {
  vertical-align: top;
  padding: 0 1rem 0 0;
  border: 0;
}

ol, ul, dd {
  padding-left: 1.2rem;
  margin-left: 0;
}

dl {
  margin: 0;
}

dt {
  margin: .6rem 0 .6rem 0;
  font-weight: bold;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration:underline;
}

b {
  color: var(--strong);
}

code {
  font-family: SFMono-Regular, Consolas, Menlo, monospace;
  font-size: 90%;
  border: 1px solid var(--border-light);
  border-radius: 3px;
  padding: 0 4px 0 4px;
  margin: 0 2px 0 2px;
}

pre {
  font-family: SFMono-Regular, Consolas, Menlo, monospace;
  font-size: 90%;
  border-color: var(--border-light);
  border-width: 1px;
  border-style: solid;
  border-radius: 3px;
  background-color: var(--pre-bg);
  padding: .5rem;
  margin: .2rem 0 .5rem 0;
}

textarea {
  font-family: SFMono-Regular, Consolas, Menlo, monospace;
  border: 1px solid var(--border);
  border-radius: 3px;
  outline: none;
  width: 100%;
  resize: vertical;
  background-color: var(--bg);
  color: var(--fg);
}

input[type=text], input[type=password], input[type=number], select, button {
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 3px;
  outline: none;
}

input[type=submit], button {
  padding: 4px 8px 4px 8px;
  border: 1px solid var(--border);
  border-radius: 3px;
  outline: none;
}

input[type=text], input[type=password], input[type=number], select {
  width: 200px;
  /* entry fields keep themed colours; buttons stay native so disabled greys out */
  background-color: var(--bg);
  color: var(--fg);
}

input:focus, select:focus, button:focus {
  outline: .5px solid var(--fg);
}

hr {
  height: .7px;
  border: 0;
  background-color: var(--border);
}

.right {
  float: right;
}

.error {
  color: var(--accent);
  font-weight: bold;
}

.info {
  color: var(--info);
  font-weight: bold;
}

.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  /* fixed row height (matches the DBA header) */
  line-height: 1.4;
}

.warning {
  color: var(--warning);
  font-weight: bold;
}

.note {
  color: var(--muted);
}

.footnote {
  font-size: 70%;
  color: var(--muted);
}

.small {
  height: 10px;
}

.vertical {
  width: 1px;
  border-left: .7px solid var(--border);
  height: 100%;
}

/* page header (mirrors the DBA layout): pinned to the top while scrolling */
header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--bg);
  padding-top: .5rem;
}

.header-main {
  flex: 1;
  /* allow the nav line to shrink and truncate instead of pushing the logo away */
  min-width: 0;
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}

.header-logo {
  flex: none;
}

/* short page title, shown on narrow screens instead of the full one */
.title-short {
  display: none;
}

/* room selector: the active room is shown in bold red (like the active
   header links in the DBA); the link colour (--accent) comes from the `a` rule */
.room.active {
  font-weight: bold;
}

/* wide enough for the longest hint (the private-message placeholder),
   overriding the generic 200px input width */
#input {
  width: 30rem;
  max-width: 100%;
}

/* narrow screens */
@media (max-width: 800px) {
  /* shorten the page title */
  .title-full { display: none; }
  .title-short { display: inline; }
  /* let the navigation wrap instead of truncating with an ellipsis */
  nav.ellipsis {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  /* keep the status message on one line: short ones stay inline after the nav
     links, a long one truncates with an ellipsis instead of wrapping */
  #info {
    display: inline-block;
    max-width: 100%;
    vertical-align: bottom;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}