/* Status Monitor — "Signal" brand foundation
   Shared by the workspace, account and docs pages. Mirrors status-monitor.co.uk:
   near-black surfaces, one mint signal for "up", red only when something breaks. */
:root {
    color-scheme: dark;
    --bg: #06080b;
    --bg-2: #0a0d12;
    --panel: #0e1218;
    --panel-2: #131922;
    --panel-3: #18202b;
    --line: rgba(220, 235, 255, .08);
    --line-2: rgba(220, 235, 255, .14);
    --line-3: rgba(220, 235, 255, .26);
    --text: #e8eef3;
    --text-2: #a7b2bd;
    --dim: #7c8793;
    --signal: #4dffc3;
    --signal-2: #1fd69b;
    --signal-ink: #032a1d;
    --signal-soft: rgba(77, 255, 195, .09);
    --down: #ff5a5f;
    --down-soft: rgba(255, 90, 95, .1);
    --warn: #ffc24d;
    --warn-soft: rgba(255, 194, 77, .1);
    --info: #7aa7ff;
    --info-soft: rgba(122, 167, 255, .1);
    --paused: #7c8793;
    --sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: "Martian Mono", ui-monospace, Menlo, Consolas, monospace;
    --r-sm: 8px;
    --r: 12px;
    --r-lg: 16px;
    --ease: cubic-bezier(.2, .75, .15, 1);
    --shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 18px 40px -24px rgba(0, 0, 0, .8);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); font-size: 14.5px; line-height: 1.55; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01", "cv11"; }
img, svg, canvas { max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, p, dl, dd, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
code, pre, kbd { font-family: var(--mono); font-size: .86em; }
::selection { background: var(--signal); color: var(--signal-ink); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
.icon { display: inline-block; flex: none; vertical-align: middle; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.mono { font-family: var(--mono); }
.tabular { font-variant-numeric: tabular-nums; }

/* Brand mark */
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16.5px; letter-spacing: -.025em; color: var(--text); white-space: nowrap; }
.brand-mark { display: block; flex: none; }

/* Status dot — the signal */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--c, var(--signal)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, var(--signal)) 18%, transparent); }
.dot.-up { --c: var(--signal); }
.dot.-down { --c: var(--down); }
.dot.-warning { --c: var(--warn); }
.dot.-info { --c: var(--info); }
.dot.-disabled, .dot.-paused { --c: var(--paused); }
.dot.-live { animation: live 2.2s infinite; }
.dot.-down.-live { animation-duration: 1.4s; }
@keyframes live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c, var(--signal)) 55%, transparent); } 80%, 100% { box-shadow: 0 0 0 8px transparent; } }

/* Eyebrow / kicker labels use the mono face, like the website */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .02em; text-transform: uppercase; color: var(--signal); }
.eyebrow::after { content: ""; width: 32px; height: 1px; background: linear-gradient(90deg, currentColor, transparent); }
.eyebrow.-plain::after { display: none; }

/* Buttons */
.btn, .theme-button, .button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 15px; border-radius: 10px; font: 600 14px/1 var(--sans); letter-spacing: -.01em; white-space: nowrap; cursor: pointer; border: 1px solid var(--signal); color: var(--signal-ink); background: var(--signal); box-shadow: 0 8px 24px -12px rgba(77, 255, 195, .6); transition: background .2s, border-color .2s, color .2s, box-shadow .3s, transform .2s; overflow: hidden; text-decoration: none; }
.btn:hover, .theme-button:hover, .button:hover { background: #7affd4; border-color: #7affd4; box-shadow: 0 0 0 4px rgba(77, 255, 195, .12), 0 10px 28px -12px rgba(77, 255, 195, .75); }
.btn:active, .theme-button:active, .button:active { transform: translateY(1px); }
.btn .icon, .theme-button .icon, .button .icon { transition: transform .3s var(--ease); }
.btn:hover .icon.-nudge, .theme-button:hover .icon.-nudge, .button:hover .icon.-nudge { transform: translateX(2px); }
.btn.-secondary, .theme-button.-secondary, .button.button-secondary { color: var(--text); background: rgba(255, 255, 255, .03); border-color: var(--line-2); box-shadow: none; }
.btn.-secondary:hover, .theme-button.-secondary:hover, .button.button-secondary:hover { background: rgba(255, 255, 255, .06); border-color: var(--line-3); box-shadow: none; }
.btn.-ghost, .theme-button.-ghost { color: var(--text-2); background: transparent; border-color: transparent; box-shadow: none; }
.btn.-ghost:hover, .theme-button.-ghost:hover { color: var(--text); background: rgba(255, 255, 255, .05); border-color: transparent; box-shadow: none; }
.btn.-red, .theme-button.-red { color: #ffd9da; background: var(--down-soft); border-color: rgba(255, 90, 95, .4); box-shadow: none; }
.btn.-red:hover, .theme-button.-red:hover { color: #fff; background: rgba(255, 90, 95, .2); border-color: rgba(255, 90, 95, .7); box-shadow: none; }
.btn.-sm, .theme-button.-sm { min-height: 32px; padding: 0 11px; font-size: 13px; border-radius: 8px; gap: 6px; }
.btn.-block, .theme-button.-block { width: 100%; }
.btn:disabled, .theme-button:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn.-icon, .theme-button.-icon { width: 38px; padding: 0; }
.btn.-sm.-icon, .theme-button.-sm.-icon { width: 32px; }

.text-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 1px; }
.text-link:hover { color: var(--signal); }

/* Form controls */
input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="number"], input[type="search"], input[type="time"], input[type="datetime-local"], input[type="date"], select, textarea {
    width: 100%; min-height: 40px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--text); font-size: 14.5px; line-height: 1.4; transition: border-color .2s, box-shadow .2s, background .2s; appearance: none; -webkit-appearance: none;
}
input::placeholder, textarea::placeholder { color: #56616d; }
input:hover, select:hover, textarea:hover { border-color: var(--line-3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: rgba(77, 255, 195, .6); box-shadow: 0 0 0 3px rgba(77, 255, 195, .14); background: #080b0f; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: rgba(255, 90, 95, .7); }
input[readonly] { color: var(--text-2); background: var(--panel); }
textarea { min-height: 140px; resize: vertical; }
select { padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a7b2bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; }
select option { background: var(--panel); color: var(--text); }
input[type="time"]::-webkit-calendar-picker-indicator, input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: invert(.8); cursor: pointer; }
input[type="checkbox"], input[type="radio"] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; flex: none; border: 1.5px solid var(--line-3); background: var(--bg-2); border-radius: 5px; display: inline-grid; place-content: center; cursor: pointer; transition: background .15s, border-color .15s; vertical-align: -4px; }
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]::before { content: ""; width: 10px; height: 10px; transform: scale(0); transition: transform .15s var(--ease); background: var(--signal-ink); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
input[type="radio"]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; transform: scale(0); transition: transform .15s var(--ease); background: var(--signal-ink); }
input[type="checkbox"]:checked, input[type="radio"]:checked { background: var(--signal); border-color: var(--signal); }
input[type="checkbox"]:checked::before, input[type="radio"]:checked::before { transform: scale(1); }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: #222a35 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #222a35; border-radius: 10px; border: 2px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}