:root {
  --console-bg: #241a13;
  --console-fg: #e6ddd2;
}

.thumb-placeholder {
  background: repeating-linear-gradient(45deg, #ececec, #ececec 10px, #e2e2e2 10px, #e2e2e2 20px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-card .card { height: 100%; display: flex; flex-direction: column; }
.map-card .card-content { flex: 1 1 auto; }
.map-card.is-hidden-by-filter { display: none; }

.console-pane {
  background: var(--console-bg);
  color: var(--console-fg);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.5;
  height: 62vh;
  overflow-y: auto;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  white-space: pre-wrap;
  word-break: break-word;
}

.console-line { border-left: 3px solid transparent; padding-left: 0.6rem; }
.console-line.ch-log     { border-left-color: #3e8ed0; }
.console-line.ch-rcon-cmd   { border-left-color: #ffffff; font-weight: 700; }
.console-line.ch-rcon-reply { border-left-color: #48c78e; color: #b9e6cf; }
.console-line.ch-raw     { border-left-color: #666; color: #9c9186; }
.console-line.ch-notice  { border-left-color: #ffe08a; color: #ffe08a; }
.console-line.is-empty   { color: #7d746a; font-style: italic; }
/* A timeout is not an empty reply: it gets the warning colour so it cannot be
   read as "the server answered, there was nothing to say". */
.console-line.is-timeout { border-left-color: #ffe08a; color: #ffb86b; font-style: italic; }
.console-line .stamp     { color: #8a7f74; margin-right: 0.6rem; }
.console-line.is-hidden-by-filter { display: none; }

#notices { position: fixed; top: 4rem; right: 1rem; z-index: 40; max-width: 28rem; }
#notices .notification { margin-bottom: 0.5rem; }

.cycle-row.is-broken td { background: #feecf0; }
.cycle-row.is-broken td:first-child { box-shadow: inset 3px 0 0 #f14668; }
.cycle-row .js-pos { font-variant-numeric: tabular-nums; }

/* Journal tail: a fixed-height scrollback, not a page that grows forever. */
#journal-pane pre {
  max-height: 18rem;
  overflow: auto;
  font-size: 0.75rem;
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
}
#journal-pane pre.is-degraded {
  color: #b00020;
  white-space: normal;
}
#service-panel .buttons { margin-top: 0.5rem; }

/* The nav's match-mode control: the buttons keep their own size inside a
   navbar item that would otherwise stretch them. */
#match-mode-nav .buttons { flex-wrap: nowrap; }
#match-mode-nav [data-match-mode-status] { white-space: nowrap; }