/* ===== goph.re shared look: palette sampled from /gfx/crowd.png ===== */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@200;300;400;700;800&family=JetBrains+Mono:wght@400;700&display=swap');

:root {
	color-scheme: dark;
	--ink: #081019;
	--ink-2: #0e2737;
	--glass: rgba(8, 16, 25, .74);
	--glass-hi: rgba(14, 39, 55, .82);
	--line: rgba(6, 161, 166, .18);
	--line-hi: rgba(3, 213, 211, .45);
	--fg: #e4eff0;
	--fg-2: #b9cdd1;
	--dim: #6f8f98;
	--teal: #06a1a6;
	--cyan: #03d5d3;
	--coral: #fc7972;
	--pink: #dc5269;
	--peach: #fd9f7a;
	--cream: #fbd99f;
	--wine: #a13f50;
	--accent: var(--cyan);
	/* backdrop gradient map (see backdrop.js) */
	--bd0: #05090f; --bd1: #09404c; --bd2: #077676; --bd3: #dc5269; --bd4: #fd9f7a;
	--mono: "JetBrains Mono", ui-monospace, "DejaVu Sans Mono", monospace;
	--sans: "Kanit", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--ink); }
body {
	margin: 0;
	min-height: 100vh;
	background: transparent; /* html carries the ink so the backdrop layers show through */
	color: var(--fg);
	font: 300 16px/1.5 var(--sans);
	-webkit-font-smoothing: antialiased;
}
::selection { background: var(--coral); color: var(--ink); }
a { color: inherit; text-decoration: none; }
kbd { font: 700 .85em var(--mono); color: var(--peach); }
.mono { font-family: var(--mono); font-variant-ligatures: none; }
.hidden { display: none !important; }

/* source colours (ls --color, goph.re edition) */
.p-golang, .p-official { color: var(--cyan); }
.p-picks { color: var(--coral); }
.p-experts { color: var(--coral); }
.p-blogs { color: var(--peach); }
.p-podcasts { color: var(--cream); }
.p-community { color: var(--pink); }
.p-forums { color: #6fb7b9; }
.p-tools, .p-examples, .p-courses { color: #d58aa0; }

/* backdrop canvas + no-WebGL fallback */
#backdrop { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: 0; transition: opacity 1.2s ease; }
#backdrop.on { opacity: 1; }
.no-webgl body::before {
	content: ""; position: fixed; inset: 0; z-index: -1;
	background: url(/gfx/crowd.jpg) center 40% / cover no-repeat;
	opacity: .35; filter: saturate(1.2);
	mix-blend-mode: luminosity;
}
.no-webgl body::after {
	content: ""; position: fixed; inset: 0; z-index: -1;
	background: linear-gradient(160deg, rgba(9, 64, 76, .45), rgba(115, 32, 66, .35) 60%, rgba(8, 16, 25, .9));
	mix-blend-mode: color;
}

/* glass panel */
.glass {
	background: var(--glass);
	border: 1px solid var(--line);
	-webkit-backdrop-filter: blur(16px) saturate(1.3);
	backdrop-filter: blur(16px) saturate(1.3);
}

/* ===== sidebar ===== */
.side-nav {
	position: fixed; top: 0; bottom: 26px; left: 0; width: 300px;
	padding: 48px 32px 24px;
	display: flex; flex-direction: column; gap: 28px;
	z-index: 5;
}
.brand { display: block; }
.brand b { display: block; font: 800 56px/0.9 var(--sans); letter-spacing: -.02em; color: #fff; }
.brand b i { font-style: normal; color: var(--coral); }
.brand small { display: block; margin-top: 10px; font: 400 12px/1.4 var(--mono); color: var(--fg-2); letter-spacing: .02em; }
.side-nav nav { display: flex; flex-direction: column; gap: 2px; font: 400 18px/1.3 var(--sans); }
.side-nav nav a { display: flex; align-items: baseline; gap: 10px; padding: 3px 0; color: var(--fg-2); transition: color .15s, transform .15s; }
.side-nav nav a kbd { font-size: 11px; color: var(--dim); min-width: 1ch; }
.side-nav nav a:hover { color: #fff; transform: translateX(3px); }
.side-nav nav a.on { color: #fff; font-weight: 700; }
.side-nav nav a.on kbd { color: var(--coral); }
.side-nav nav .new-tag { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); background: var(--coral); padding: 1px 5px; border-radius: 3px; align-self: center; }
.side-nav nav hr { border: 0; height: 1px; background: var(--line); margin: 10px 0; width: 60%; }
.side-nav .who { margin-top: auto; font: 400 12px/1.6 var(--mono); color: var(--dim); }
.side-nav .who a { color: var(--fg-2); }
.side-nav .who a:hover { color: var(--cyan); }

.search { position: relative; }
.search span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font: 700 14px var(--mono); color: var(--coral); pointer-events: none; }
.search input {
	width: 100%; padding: 10px 12px 10px 28px;
	font: 400 14px var(--mono); color: var(--fg);
	background: rgba(8, 16, 25, .55); border: 1px solid var(--line); border-radius: 6px; outline: 0;
	transition: border-color .15s, background .15s;
}
.search input::placeholder { color: var(--dim); }
.search input:focus { border-color: var(--line-hi); background: rgba(8, 16, 25, .85); }

/* push opt-in */
.notify { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.notify[hidden] { display: none; }
.notify .label { margin: 0 0 2px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.notify label { display: flex; align-items: center; gap: 10px; color: var(--fg-2); cursor: pointer; line-height: 1.3; }
.notify input { appearance: none; flex: 0 0 auto; width: 30px; height: 17px; margin: 0; border-radius: 999px; background: rgba(8, 16, 25, .7); border: 1px solid var(--line-hi); position: relative; cursor: pointer; transition: background .2s, border-color .2s; }
.notify input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--dim); transition: transform .2s, background .2s; }
.notify input:checked { background: var(--coral); border-color: var(--coral); }
.notify input:checked::after { transform: translateX(13px); background: #fff; }
.notify input:disabled { opacity: .5; }
.notify input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.notify label:hover span { color: #fff; }
.notify .hint { margin: 2px 0 0; font-size: 11px; line-height: 1.5; color: var(--peach); }
.notify .hint[hidden] { display: none; }

/* ===== tmux status line ===== */
.status-line {
	position: fixed; left: 0; right: 0; bottom: 0; height: 26px; z-index: 20;
	display: flex; align-items: stretch;
	font: 400 12px/26px var(--mono); white-space: nowrap; overflow: hidden;
	background: rgba(8, 16, 25, .88);
	border-top: 1px solid var(--line);
	-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
	color: var(--fg-2);
}
.status-line > * { padding: 0 1.1ch; }
.status-line .session { background: var(--teal); color: var(--ink); font-weight: 700; }
.status-line .win:hover { color: #fff; }
.status-line .win.on { background: var(--ink-2); color: var(--cyan); font-weight: 700; }
.status-line .spacer { flex: 1; padding: 0; }
.status-line .count { color: var(--coral); }
.status-line .clock { background: var(--coral); color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.status-line button { all: unset; cursor: pointer; padding: 0 1.1ch; }
.status-line button:hover { color: #fff; }
.status-line .install { color: var(--ink); background: var(--cyan); font-weight: 700; }
.status-line .install[hidden] { display: none; }

/* ===== help popup ===== */
.help-pop { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(5, 9, 15, .6); }
.help-pop[hidden] { display: none; }
.help-pop pre { margin: 0; padding: 20px 28px; font: 400 13px/1.7 var(--mono); border-radius: 8px; border-color: var(--line-hi); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.help-pop b { color: var(--cyan); }

@media (max-width: 960px) {
	.side-nav { position: static; width: auto; padding: 28px 16px 8px; gap: 18px; }
	.brand b { font-size: 44px; }
	.side-nav nav { flex-direction: row; flex-wrap: wrap; gap: 4px 16px; font-size: 16px; }
	.side-nav nav hr, .side-nav nav a kbd { display: none; }
	.side-nav .who { margin-top: 0; }
	.notify { order: 5; }
	.status-line .hide-sm { display: none; }
}