/*
 * Havbrest on the web, for pages that do not use the dashboard's Skeleton
 * theme: the cloud's front page and PeerAuth's dashboard. The colours are the
 * dashboard's own (dashboard/src/havbrest-theme.css), so a person moving from
 * one to another sees one product.
 *
 * Light or dark follows the operating system unless someone chose in the
 * dashboard's Settings; the choice is kept as `theme` in localStorage, which
 * every page on one host shares. A script before first paint puts `dark` on
 * the root element, as the dashboard's app.html does:
 *
 *   try { var c = localStorage.getItem('theme');
 *     var d = c === 'dark' || (c !== 'light' && matchMedia('(prefers-color-scheme: dark)').matches);
 *     document.documentElement.classList.toggle('dark', d); } catch (e) {}
 *
 * Copies live in cloud/web/ and peerauth/dash/src/lib/styles/; this is where
 * they come from.
 */

@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap; src: url('fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url('fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-display: swap; src: url('fonts/inter-latin-700-normal.woff2') format('woff2'); }

:root {
	--primary-300: oklch(77% 0.085 242deg);
	--primary-400: oklch(67.5% 0.1 242deg);
	--primary-500: oklch(58% 0.105 242deg);
	--primary-600: oklch(49.7% 0.09 242deg);
	--primary-700: oklch(43% 0.08 242deg);
	--secondary-400: oklch(71.5% 0.095 182deg);
	--secondary-500: oklch(62.4% 0.101 182deg);
	--surface-50: oklch(98.3% 0.006 237deg);
	--surface-100: oklch(95.8% 0.01 237deg);
	--surface-200: oklch(91% 0.016 237deg);
	--surface-300: oklch(83.5% 0.022 237deg);
	--surface-400: oklch(69% 0.03 237deg);
	--surface-500: oklch(56% 0.035 237deg);
	--surface-600: oklch(45.5% 0.035 237deg);
	--surface-700: oklch(36.5% 0.034 237deg);
	--surface-800: oklch(29% 0.031 237deg);
	--surface-900: oklch(23% 0.029 237deg);
	--surface-950: oklch(18.9% 0.021 237deg);

	/* What pages use. */
	--bg: var(--surface-50);
	--panel: var(--surface-100);
	--field: #fff;
	--line: var(--surface-200);
	--line-strong: var(--surface-300);
	--text: var(--surface-950);
	--soft: var(--surface-700);
	--muted: var(--surface-500);
	--link: var(--primary-600);
	--focus: var(--primary-500);
	--good: oklch(56.5% 0.15 150deg);
	--good-bg: oklch(96.5% 0.03 150deg);
	--warn: oklch(61% 0.13 78deg);
	--danger: oklch(55.5% 0.19 25deg);
	--danger-bg: oklch(96% 0.025 25deg);
	--gradient: linear-gradient(135deg, var(--primary-600), var(--secondary-500));
	--radius: 0.375rem;
	--radius-container: 0.625rem;
	--font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--mono: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
	color-scheme: light;
}

:root.dark {
	--bg: var(--surface-950);
	--panel: var(--surface-900);
	--field: var(--surface-950);
	--line: var(--surface-800);
	--line-strong: var(--surface-700);
	--text: var(--surface-100);
	--soft: var(--surface-300);
	--muted: var(--surface-400);
	--link: var(--primary-300);
	--focus: var(--primary-400);
	--good: oklch(72.5% 0.16 150deg);
	--good-bg: oklch(29.5% 0.07 150deg);
	--warn: oklch(82.5% 0.16 78deg);
	--danger: oklch(69.5% 0.18 25deg);
	--danger-bg: oklch(29% 0.095 25deg);
	color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); }
body { margin: 0; min-width: 320px; font: 15px/1.5 var(--font); background: var(--bg); color: var(--text); }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
code { font-family: var(--mono); font-size: 0.85em; overflow-wrap: anywhere; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ── The bar every cloud page carries ──────────────────────────────────── */

.hb-header {
	display: flex; align-items: center; gap: 20px; min-height: 56px; padding: 0 20px;
	background: var(--panel); border-bottom: 1px solid var(--line);
}
.hb-brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.hb-brand:hover { text-decoration: none; }
.hb-brand img { width: 28px; height: 28px; display: block; }
.hb-wordmark {
	font-size: 15px; font-weight: 600; letter-spacing: 0.25em;
	background: linear-gradient(90deg, var(--primary-500), var(--secondary-400));
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Scrolls sideways on a narrow screen, and never up and down. */
.hb-nav { display: flex; align-items: stretch; gap: 4px; flex: 1; align-self: stretch; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.hb-nav a {
	display: flex; align-items: center; gap: 6px; padding: 0 10px; position: relative;
	color: var(--soft); font-weight: 500; white-space: nowrap; text-decoration: none;
}
.hb-nav a:hover { color: var(--text); }
.hb-nav a[aria-current='page'] { color: var(--text); }
.hb-nav a[aria-current='page']::after {
	content: ''; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; background: var(--gradient);
}
.hb-account { display: flex; align-items: center; min-width: 28px; }
@media (max-width: 640px) {
	.hb-header { gap: 12px; padding: 0 12px; }
	.hb-wordmark { display: none; }
}
/* The organisation someone works as, beside their account. */
.hb-org { display: flex; align-items: center; color: var(--soft); font-weight: 500; white-space: nowrap; }
.hb-org select { width: auto; max-width: 16rem; padding: 5px 10px; font-weight: 500; }
@media (max-width: 640px) { .hb-org select { max-width: 8.5rem; } }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }


/* ── Pages ─────────────────────────────────────────────────────────────── */

.hb-page { width: min(100%, 1160px); margin: 0 auto; padding: 24px 20px 56px; }
.hb-page-heading { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 20px; }
.hb-page-heading h1 { margin: 0 0 4px; font-size: 1.5rem; }
.hb-page-heading p { margin: 0; color: var(--muted); max-width: 70ch; }
@media (max-width: 640px) { .hb-page { padding: 16px 12px 40px; } }

.card {
	margin-bottom: 16px; padding: 16px 18px;
	background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-container);
}
.card > h2, .card header h2 { margin: 0 0 10px; font-size: 1.05rem; }
.card h3 { margin: 16px 0 8px; font-size: 0.95rem; }
.card header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 10px; }
.card header h2 { margin: 0; }

.muted { color: var(--muted); }
.error { color: var(--danger); }
.notice { padding: 10px 14px; border-radius: var(--radius); background: var(--good-bg); color: var(--text); border: 1px solid color-mix(in oklab, var(--good) 40%, transparent); }

/* ── Controls ──────────────────────────────────────────────────────────── */

button, .button {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	font: inherit; font-weight: 500; line-height: 1.2; padding: 7px 14px;
	color: var(--text); background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius);
	cursor: pointer; text-decoration: none;
}
button:hover, .button:hover { border-color: var(--primary-500); text-decoration: none; }
button.primary, .button.primary { background: var(--gradient); color: #fff; border-color: transparent; }
button.primary:hover { filter: brightness(1.08); }
button.danger { color: var(--danger); border-color: color-mix(in oklab, var(--danger) 45%, transparent); }
button.danger:hover { border-color: var(--danger); }
button:disabled { cursor: default; opacity: 0.55; }
form.inline { display: inline; }

input:not([type='checkbox'], [type='radio']), select, textarea {
	width: 100%; padding: 7px 10px; font: inherit; color: var(--text);
	background: var(--field); border: 1px solid var(--line-strong); border-radius: var(--radius);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
input[type='checkbox'], input[type='radio'] { accent-color: var(--primary-500); }
label > span { display: block; margin-bottom: 4px; color: var(--soft); font-size: 0.82rem; font-weight: 600; }
label small, legend small { color: var(--muted); font-weight: 400; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: end; gap: 12px 16px; margin-top: 12px; }
.form-grid .wide { grid-column: 1 / -1; }

/* ── Tables and chips ──────────────────────────────────────────────────── */

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 9px 8px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
tr:last-child td { border-bottom: 0; }
th { color: var(--muted); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }

.chip {
	display: inline-flex; align-items: center; gap: 4px; margin: 0 4px 4px 0; padding: 1px 9px;
	font-size: 0.8rem; font-weight: 500; color: var(--soft);
	border: 1px solid var(--line-strong); border-radius: 999px;
}
.chip.scope { color: var(--link); border-color: color-mix(in oklab, var(--link) 45%, transparent); }
.chip.write { color: var(--warn); border-color: color-mix(in oklab, var(--warn) 45%, transparent); }

.token {
	display: block; margin-top: 8px; padding: 12px; user-select: all;
	background: var(--field); border: 1px solid var(--line); border-radius: var(--radius);
}