/* Omarchy look (Tokyo Night, JetBrains Mono, oh-my-zsh prompt), shared by the home page and every lab page.
   Loaded after each page's own <style>, so it overrides the colour variables and the few hard-coded colours. */
@import url("/fonts/fonts.css");
:root {
  --ink: #16161e; --panel: #1a1b26; --line: #3b4261; --text: #c0caf5; --muted: #a9b1d6; --accent: #7aa2f7;
  --comment: #565f89; --green: #9ece6a; --cyan: #7dcfff; --red: #f7768e; --yellow: #e0af68; --purple: #bb9af7; --orange: #ff9e64; --teal: #73daca;
  --m0: #7aa2f7; --m1: #7aa2f7; --m2: #7dcfff; --m3: #f7768e; --m4: #bb9af7; --m5: #9ece6a; --m6: #ff9e64; --m7: #73daca;
  --cmd: #9ece6a;
  --display: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --body: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --sans: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}
body { background: var(--ink); font-family: var(--body); font-size: 14px; }


/* oh-my-zsh (robbyrussell) prompt */
.prompt { font: 500 14px/1.6 var(--mono); color: var(--text); margin: 0 0 6px; overflow-wrap: anywhere; }
.prompt .arrow { color: var(--green); font-weight: 700; }
.prompt .dir { color: var(--cyan); font-weight: 700; }
.prompt .git { color: var(--accent); font-weight: 700; }
.prompt .br { color: var(--red); font-weight: 700; }
.prompt .dirty { color: var(--yellow); font-weight: 700; }
.prompt .cmd { color: var(--text); }
.cursor { display: inline-block; width: .6em; height: 1.1em; vertical-align: text-bottom; background: var(--text); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }

/* markdown headings */
h1 { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; color: var(--accent) !important;
  font-family: var(--display); font-weight: 800; letter-spacing: 0; line-height: 1.15; font-size: clamp(26px, 4vw, 40px); margin: 14px 0 10px; }
h1::before { content: "# "; color: var(--comment); }
.now h2::before, .card h2::before { content: "## "; color: var(--comment); font-weight: 500; }
.eyebrow { color: var(--comment); letter-spacing: 0; text-transform: none; }
.lede { color: var(--muted); }

/* tiled windows */
.card, .request, aside, .now, .gate, .code, details.term, .rail, video { border-radius: 8px !important; border-color: var(--line) !important; background-color: var(--panel); }
video { background: #000; }
.card { position: relative; padding-top: 26px; transition: border-color .15s; }
.card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 26px; border-bottom: 1px solid var(--line); background:
  radial-gradient(circle at 14px 13px, var(--red) 4px, transparent 4.5px), radial-gradient(circle at 30px 13px, var(--yellow) 4px, transparent 4.5px),
  radial-gradient(circle at 46px 13px, var(--green) 4px, transparent 4.5px), #16161e; }
.card:hover, .card:focus-visible { border-color: var(--accent) !important; }
.card img { aspect-ratio: 16/9; }
.tags span { color: var(--purple); border-color: #bb9af755; border-radius: 4px; }
.meta, .foot { color: var(--comment); }
.foot a, .back, .link { color: var(--accent); }
.request a { background: var(--accent); color: var(--ink); border-radius: 4px; font-weight: 700; }
.request p strong { color: var(--text) !important; }

/* terminal blocks and code */
.cmds code, details.term, .code, details.term pre, .code pre { background: #16161e !important; color: var(--text); }
.cmds code { border-color: #9ece6a55 !important; border-radius: 4px; }
details.term pre, .code pre { color: var(--text); }
.err, .rc { color: var(--red) !important; }
.badge { background: var(--yellow); border-radius: 4px; }
.tab { border-radius: 6px 6px 0 0; }
.tab[aria-selected="true"], .tab[aria-selected="true"] ~ * { background: #16161e; border-bottom-color: #16161e; }
.seg { border-radius: 3px !important; }
.back { display: inline-block; font-size: 18px; font-weight: 500; margin-bottom: 6px; }

/* Cookie notice (bottom bar; script in /theme.js) */
.consent { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 50; max-width: 760px; margin: 0 auto; display: flex; gap: 14px; align-items: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; font: 400 13px/1.5 var(--mono); color: var(--text); box-shadow: 0 8px 30px #0008; }
.consent p { margin: 0; flex: 1; }
.consent button { font: 700 13px var(--mono); color: var(--ink); background: var(--accent); border: 0; border-radius: 4px; padding: 8px 16px; cursor: pointer; }
.consent button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
@media (max-width: 520px) { .consent { flex-direction: column; align-items: stretch; } }