@font-face { font-family: "Space Mono"; src: url("/static/fonts/SpaceMono-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("/static/fonts/SpaceMono-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  color-scheme: light dark;
  font-family: "Space Mono", monospace;
  --bg: #ffffff; --fg: #111111; --muted: #444444;
  --border: #bbbbbb; --border-light: #dddddd; --link: #0000c4;
  --head-bg: #f7f7f7; --input-bg: #ffffff; --btn-border: #999999;
  --ok: #1a6b3c; --err: #8b1717; --warn: #8a6b17; --bar-x: #dddddd;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141518; --fg: #e8e8e8; --muted: #a3a8af;
    --border: #3a3f47; --border-light: #26292f; --link: #8ab4ff;
    --head-bg: #1d2025; --input-bg: #101114; --btn-border: #4a505a;
    --ok: #45c78a; --err: #ff8080; --warn: #e3b341; --bar-x: #26292f;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-size: 13px; line-height: 1.55; background: var(--bg); color: var(--fg); }
button, input, select, textarea, code, pre, .mono { font-family: inherit; }
button, input, select, textarea { font-size: inherit; }
h1, h2, h3 { line-height: 1.4; margin: 1.2em 0 .5em; }
h1 { font-size: 19px; margin-top: 0; } h2 { font-size: 16px; } h3 { font-size: 14px; }
p { margin: .6em 0; } a { color: var(--link); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
.wrap { max-width: 960px; margin: auto; padding: 0 16px; }
.page-narrow { max-width: 720px; margin: 0 auto; }
.narrow { max-width: 100%; } .center { text-align: center; }
.muted, .help { color: var(--muted); } small, .small, .help { font-size: 12px; }
img { max-width: 100%; height: auto; }

.site-head { padding: 12px 0 0; }
.head-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; border-bottom: 1px solid var(--border); padding-bottom: 10px; }
.logo { margin-right: auto; display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.logoimg { display: block; height: 42px; width: auto; }
.logo-sub { font-weight: bold; font-size: 16px; line-height: 1.2; color: var(--fg); }
main.page { padding: 20px 0 28px; }
.site-foot { padding-bottom: 24px; font-size: 12px; }
.site-foot .wrap { border-top: 1px solid var(--border); padding-top: 12px; }

.card { border: 1px solid var(--border); padding: 14px; margin: 0 0 14px; }
.card > :first-child { margin-top: 0; } .card > :last-child { margin-bottom: 0; }
.note, .flash { padding: 12px; margin-bottom: 14px; border: 1px solid var(--border); }
.note.err { border-color: var(--err); color: var(--err); }
.note.ok { border-color: var(--ok); }

.btn { display: inline-block; border: 1px solid var(--btn-border); background: var(--input-bg); color: var(--link); padding: 7px 12px; cursor: pointer; text-decoration: underline; text-align: center; }
.btn:hover { border-color: var(--link); }
.btn-primary, .btn-primary:visited { color: var(--link); font-weight: bold; }
.btn-danger, .btn-danger:visited { color: var(--err); border-color: var(--err); }
.btn-block { display: block; width: 100%; }
.logout-form { margin: 0; display: inline; }
.logout-button { border: 0; background: none; color: var(--link); padding: 8px 0; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; font-size: inherit; }

.field { margin-bottom: 16px; } .label { display: block; margin-bottom: 5px; font-weight: bold; }
.input, .textarea, .select { display: block; width: 100%; border: 1px solid var(--btn-border); background: var(--input-bg); padding: 8px; color: inherit; }
.textarea { resize: vertical; } input, textarea, select { max-width: 100%; } .help { margin-top: 5px; }

.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th, .table td { padding: 8px; text-align: left; border-bottom: 1px solid var(--border-light); vertical-align: top; overflow-wrap: anywhere; }
.tablewrap { max-width: 100%; overflow-x: auto; }

.badge { display: inline-block; border: 1px solid var(--border); padding: 1px 6px; font-size: 12px; }
.badge-up   { border-color: var(--ok); color: var(--ok); font-weight: bold; }
.badge-down { border-color: var(--err); color: var(--err); font-weight: bold; }
.badge-open { border-color: var(--link); color: var(--link); font-weight: bold; }
.badge-closed { border-style: dashed; color: var(--muted); }
.badge-staff { border-color: var(--err); color: var(--err); font-style: italic; }
.badge-answer { border-color: var(--ok); color: var(--ok); }
.btn-sm { padding: 4px 8px; font-size: 12px; }
.here { font-weight: bold; color: var(--fg); text-decoration: none; border-bottom: 2px solid var(--link); }
.heroimg { display: block; max-width: 380px; width: 100%; height: auto; margin: 4px auto 12px; }

.msg { border: 1px solid var(--border); margin: 0 0 12px; }
.msg-head { padding: 8px 12px; border-bottom: 1px solid var(--border-light); background: var(--head-bg); font-size: 12px; }
.msg-body { padding: 10px 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-head.note { color: var(--muted); }
details summary { cursor: pointer; } details.card summary { font-weight: bold; }
.token { display: inline-block; padding: 6px 8px; border: 1px dashed var(--btn-border); overflow-wrap: anywhere; }
.hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }

@media (max-width: 700px) {
  .wrap { padding: 0 12px; } main.page { padding: 16px 0 24px; }
  .input, .textarea, .select { font-size: 16px; }
  .btn, .btn-sm { min-height: 44px; }
  .table { font-size: 12px; }
  .table th, .table td { padding: 6px 4px; }
  .svc-name { min-width: 100%; }
  .svc-meta { flex-direction: column; gap: 2px; }
  .card { padding: 12px; }
  .note, .flash { padding: 10px; }
  .msg-head { padding: 7px 10px; }
  .msg-body { padding: 9px 10px; }
  h1 { font-size: 18px; }
  .token { padding: 5px 6px; }
  .logoimg { height: 28px; }
  .logo-sub { font-size: 14px; }
  .heroimg { max-width: 260px; }
}