@import url('/fonts.css?v=1');

:root {
  --bg: #141414;
  --surface: #1b1b1b;
  --raised: #232323;
  --border: #2e2e2e;
  --text: #ececec;
  --muted: #a3a3a3;
  --accent: #2ec4a6;
  --accent-hi: #4fd6bb;
  --on-accent: #03211b;
  --live: #8fd16a;
  --danger: #ef6a5e;
  --series-1: #22a68c;
  --series-2: #d95926;
  --grid: #262626;
  --sans: 'Fira Sans', system-ui, sans-serif;
  --mono: 'Fira Code', ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; }
html { background: var(--bg); color: var(--text); font: 400 15px/1.55 var(--sans); -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
button, input, select, textarea { font: inherit; color: inherit; }
code, pre, kbd, samp { font-family: var(--mono); }
a { color: inherit; text-decoration: none; }
p a, li a, td a, .legal a { color: var(--accent); }
p a:hover, li a:hover, td a:hover, .legal a:hover { color: var(--accent-hi); }
[hidden] { display: none !important; }

/* Layout */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
section { padding: 64px 0; border-top: 1px solid var(--border); }
section.alt { background: var(--surface); }
h1 { font-size: 40px; line-height: 1.15; font-weight: 700; letter-spacing: -0.015em; }
h2 { font-size: 26px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
h3 { font-size: 17px; line-height: 1.35; font-weight: 600; }
.sub { margin-top: 8px; color: var(--muted); max-width: 62ch; }
.page-head { padding-top: 48px; padding-bottom: 32px; }
.page-head .sub { font-size: 16px; }

/* Nav and footer, one shared include */
nav.top { border-bottom: 1px solid var(--border); }
nav.top .wrap { display: flex; align-items: center; gap: 28px; height: 60px; }
.word { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
nav.top .links { display: flex; gap: 22px; color: var(--muted); font-size: 14px; }
nav.top .links a:hover, nav.top .links a[aria-current] { color: var(--text); }
nav.top .right { margin-left: auto; display: flex; gap: 10px; align-items: center; }
nav.top .who { color: var(--muted); font-size: 14px; }
footer.bottom { border-top: 1px solid var(--border); padding: 28px 0 40px; color: var(--muted); font-size: 13.5px; }
footer.bottom .wrap { display: flex; gap: 22px; flex-wrap: wrap; }
footer.bottom a:hover { color: var(--text); }
footer.bottom .end { margin-left: auto; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 16px; border-radius: 6px; border: 1px solid var(--border); background: var(--raised); color: var(--text); font-weight: 500; font-size: 14px; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn.primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); }
.btn:disabled, .btn[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.actions { display: flex; gap: 10px; margin-top: 28px; flex-wrap: wrap; }

/* Inline code */
.chip { color: var(--text); background: var(--raised); border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; font-size: 0.92em; }

/* Hero */
.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: start; padding-top: 64px; padding-bottom: 72px; }
.hero h1 { max-width: 19ch; }
.lead { margin-top: 18px; color: var(--muted); font-size: 17px; max-width: 46ch; }

/* Command list, used on the home page and the commands page */
.cmds { border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.cmds header { padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--muted); font: 500 12px/1.4 var(--mono); }
.cmd { display: grid; grid-template-columns: 250px 1fr; gap: 14px; padding: 11px 14px; border-bottom: 1px solid var(--border); font-size: 14px; }
.cmds.short .cmd { grid-template-columns: 110px 1fr; }
.sub + .cmds { margin-top: 20px; }
.cmd:last-child { border-bottom: 0; }
.cmd code { color: var(--accent); font-size: 13.5px; }
.cmd span { color: var(--muted); }

/* Module list */
.mods { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 32px; margin-top: 28px; }
.mod { padding: 12px 0; border-top: 1px solid var(--border); font-size: 14px; }
.mod b { display: block; font-weight: 600; font-size: 14.5px; }
.mod span { color: var(--muted); }

/* Tables */
table { width: 100%; border-collapse: collapse; margin-top: 28px; font-size: 14.5px; }
th, td { text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
thead th { font-weight: 600; color: var(--muted); font-size: 13px; }
thead th.mark { color: var(--accent); }
tbody th { font-weight: 500; width: 38%; }
td { color: var(--muted); }

/* Panels, a plain bordered box for forms and account details */
.panel { border: 1px solid var(--border); border-radius: 8px; background: var(--surface); padding: 22px; }
.panel + .panel { margin-top: 16px; }
.panel h3 + p, .panel h3 + .rows { margin-top: 8px; }
.rows { display: grid; grid-template-columns: 180px 1fr; gap: 10px 18px; font-size: 14.5px; }
.rows dt { color: var(--muted); }
.note { margin-top: 14px; color: var(--muted); font-size: 13.5px; }
.error { color: var(--danger); }
.live { color: var(--live); }

/* Forms */
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; margin-top: 16px; }
.check input { margin-top: 4px; width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; padding: 3px; gap: 3px; margin-top: 18px; }
.seg label { padding: 5px 14px; border-radius: 999px; cursor: pointer; color: var(--muted); font-size: 14px; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg input:checked + span { color: var(--text); }
.seg label:has(input:checked) { background: var(--raised); }
.seg .tab { padding: 5px 14px; border-radius: 999px; color: var(--muted); font-size: 14px; }
.seg .tab:hover { color: var(--text); }
.seg .tab.on { background: var(--raised); color: var(--text); }

/* Sign in sits on its own, so it's the one centred thing */
.narrow { max-width: 460px; margin: 56px auto 72px; }

/* Legal and other long text at reading width */
.legal { max-width: 760px; padding-top: 48px; padding-bottom: 72px; }
.legal h1 { font-size: 32px; }
.legal .updated { margin-top: 8px; color: var(--muted); font-size: 14px; }
.legal h2 { font-size: 20px; margin-top: 36px; }
.legal p, .legal ul { margin-top: 12px; }
.legal ul { padding-left: 20px; }
.legal li + li { margin-top: 6px; }

/* Charts, drawn as SVG on the server, hover shows each value through the mark's title */
.chart { margin-top: 20px; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .axis text, .chart .label { fill: var(--muted); font: 400 11px var(--sans); }
.chart .end-label { font: 600 11.5px var(--sans); fill: var(--text); }
.chart .grid line { stroke: var(--grid); stroke-width: 1; }
.chart .baseline { stroke: var(--border); stroke-width: 1; }
.chart .s1 { fill: var(--series-1); stroke: var(--series-1); }
.chart .s2 { fill: var(--series-2); stroke: var(--series-2); }
.chart path.line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .hit { fill: transparent; stroke: none; }
.chart .hit:hover + .dot, .chart .dot:hover { opacity: 1; }
.chart .dot { opacity: 0; stroke: var(--bg); stroke-width: 2; }
.legend { display: flex; gap: 18px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.legend span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.legend .s1::before { background: var(--series-1); }
.legend .s2::before { background: var(--series-2); }
details.data { margin-top: 10px; font-size: 13.5px; }
details.data summary { cursor: pointer; color: var(--muted); }
details.data table { margin-top: 10px; font-size: 13.5px; }

/* Server dashboard */
.page-head .seg { margin-top: 20px; }
.chart-title { margin-top: 36px; color: var(--muted); font-weight: 500; font-size: 14px; }
h2.space { margin-top: 48px; }
form.search { display: flex; gap: 10px; max-width: 560px; }
form.search input { flex: 1; height: 38px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); }
form.search input:focus { outline: none; border-color: var(--accent); }
table.logs th { width: 190px; font-weight: 400; color: var(--muted); }
table.logs td:nth-child(2) { color: var(--text); width: 220px; }

/* Monitor */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); border: 1px solid var(--border); border-radius: 8px; margin-top: 24px; }
.stat { padding: 16px 18px; border-right: 1px solid var(--border); }
.stat:last-child { border-right: 0; }
.stat dt { color: var(--muted); font-size: 13px; }
.stat dd { margin-top: 4px; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
pre.log { margin-top: 16px; padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; color: var(--muted); }

@media (max-width: 760px) {
  nav.top .links { display: none; }
  .hero { grid-template-columns: 1fr; gap: 32px; padding-top: 40px; padding-bottom: 48px; }
  h1 { font-size: 31px; }
  .lead { font-size: 16px; }
  .mods { grid-template-columns: 1fr; }
  .cmd, .cmds.short .cmd { grid-template-columns: 1fr; gap: 2px; }
  table.split thead { display: none; }
  table.split tbody tr { display: block; border-bottom: 1px solid var(--border); padding: 10px 0; }
  table.split tbody th, table.split tbody td { display: block; border: 0; padding: 3px 0; width: auto; }
  table.split tbody td::before { content: attr(data-col) ': '; color: var(--text); }
  .rows { grid-template-columns: 1fr; gap: 2px 0; }
  .rows dd { margin-bottom: 10px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .chart .axis text, .chart .label { font-size: 22px; }
  .chart .end-label { font-size: 21px; }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n + 2) { border-bottom: 1px solid var(--border); }
  footer.bottom .end { margin-left: 0; }
}