/* Xenticorp.net — shared styles
   Palette pulled from the Xenticorp Tag Logo (Canva). Edit the :root tokens to retheme. */

:root {
  --bg: #111111;
  --bg-raised: #181818;
  --bg-panel: #1c1c1c;
  --line: #2a2a2a;
  --text: #ffffff;
  --text-dim: #a8a8a8;
  --yellow: #ffd60a;   /* bolt / radiation symbol */
  --green: #1e5a3c;    /* "CORP" */
  --green-bright: #2f8a5b;
  --rust: #a8531a;     /* "ENGINEERING" */
  /* Color jobs: yellow = actions (buttons, links to act on), green = live / glow / circuit traces,
     rust = danger + the tagline. Surfaces stay neutral gray. */
  --live: #3db87a;                       /* bright brand green: glows, traces, "on" states */
  --live-soft: rgba(61, 184, 122, .12);
  --live-glow: rgba(61, 184, 122, .38);
  --action-glow: rgba(255, 214, 10, .28);
  --nav-h: 68px;
  --radius: 8px;
  --font-display: "Anton", "Archivo Black", Impact, "Arial Narrow", sans-serif;
  --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* `hidden` must win over display rules like .dash__grid { display: grid }. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }

/* ---------- Navbar (Browserbase-style: sticky, blurred, dropdown flyouts) ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  background: rgba(17, 17, 17, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  max-width: 1200px; height: 100%; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 32px;
}
.nav__logo { display: flex; align-items: center; flex-shrink: 0; }
.nav__logo img { height: 40px; width: 40px; object-fit: contain; }
.nav__links { display: flex; align-items: center; gap: 4px; list-style: none; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 8px;
  background: none; border: 0;
  font-size: 0.92rem; font-weight: 500; color: var(--text-dim);
  transition: color .15s, background .15s;
}
.nav__link:hover, .nav__item.is-open > .nav__link { color: var(--text); background: rgba(255,255,255,.06); }
.nav__chev { width: 10px; height: 10px; transition: transform .2s; }
.nav__item.is-open .nav__chev { transform: rotate(180deg); }

.nav__flyout {
  position: absolute; top: calc(100% + 10px); left: 0;
  min-width: 420px; padding: 14px;
  background: var(--bg-panel);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s, transform .18s, visibility .18s;
}
.nav__item.is-open .nav__flyout { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__flyout-label {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--yellow); padding: 4px 10px 8px;
}
.flyout-item {
  display: block; padding: 10px; border-radius: 8px;
  transition: background .15s;
}
.flyout-item:hover { background: rgba(255,255,255,.05); }
.flyout-item__title { font-weight: 600; font-size: .92rem; display: flex; align-items: center; gap: 8px; }
.flyout-item__desc { font-size: .8rem; color: var(--text-dim); }
.flyout-item.is-soon { opacity: .55; pointer-events: none; }
/* Projects menu: columns of at most 5 projects (site/build.py shows up to 10), then "All projects"
   across the bottom. Columns narrow on smaller screens so the menu never runs off the right edge. */
.nav__flyout { width: max-content; max-width: calc(100vw - 140px); }
.nav__flyout-grid { display: grid; grid-template-rows: repeat(5, auto); grid-auto-flow: column; grid-auto-columns: minmax(0, 392px); column-gap: 6px; }
.flyout-item--all { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; }
.badge-soon {
  font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px; background: var(--rust); color: #fff;
}

.nav__spacer { flex: 1; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 8px; border: 1px solid transparent;
  font-size: .9rem; font-weight: 700; transition: transform .12s, background .15s, border-color .15s;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--yellow); color: #111; }
.btn--primary:hover { background: #ffe14d; }
.btn--ghost { border-color: var(--line); color: var(--text); background: transparent; }
.btn--ghost:hover { border-color: var(--text-dim); }
.btn--danger { background: var(--rust); color: #fff; }
.btn--danger:hover { background: #c0631f; }
.btn:disabled { opacity: .5; cursor: default; }
.btn svg { width: 14px; height: 14px; }

.nav__burger {
  display: none; width: 42px; height: 42px; border-radius: 8px;
  background: none; border: 1px solid var(--line); align-items: center; justify-content: center;
}
.nav__burger span, .nav__burger span::before, .nav__burger span::after {
  display: block; width: 18px; height: 2px; background: var(--text); position: relative; content: "";
  transition: transform .2s, top .2s, background .2s;
}
.nav__burger span::before { position: absolute; top: -6px; }
.nav__burger span::after  { position: absolute; top: 6px; }
.nav.is-menu-open .nav__burger span { background: transparent; }
.nav.is-menu-open .nav__burger span::before { top: 0; transform: rotate(45deg); }
.nav.is-menu-open .nav__burger span::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 820px) {
  .nav__inner { gap: 12px; }
  .nav__burger { display: inline-flex; margin-left: auto; }
  .nav__cta-desktop { display: none; }
  .nav__links {
    /* Explicit height: .nav's backdrop-filter makes it the containing block for this fixed
       element, so top/bottom would size it to the 68px bar instead of the screen. */
    position: fixed; top: var(--nav-h); left: 0; right: 0;
    height: calc(100vh - var(--nav-h)); height: calc(100dvh - var(--nav-h));
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 12px 20px 28px; background: var(--bg); overflow-y: auto;
    /* Revealed with clip-path instead of sliding in from off-screen: an element parked past the
       right edge makes the whole page scroll sideways on phones. Hidden = not focusable either. */
    clip-path: inset(0 0 0 100%); visibility: hidden;
    transition: clip-path .25s, visibility 0s .25s;
  }
  .nav.is-menu-open .nav__links { clip-path: inset(0); visibility: visible; transition: clip-path .25s; }
  .nav__link { width: 100%; justify-content: space-between; padding: 14px 6px; font-size: 1.05rem; border-radius: 0; border-bottom: 1px solid var(--line); }
  .nav__flyout {
    position: static; min-width: 0; padding: 0 0 8px; border: 0; box-shadow: none; background: none;
    max-height: 0; overflow: hidden; opacity: 1; visibility: visible; transform: none; transition: max-height .25s;
  }
  .nav__item.is-open .nav__flyout { max-height: 1600px; }
  .nav__flyout { width: auto; max-width: none; }
  .nav__flyout-grid { display: block; }
  .nav__mobile-cta { display: block; margin-top: 20px; }
  .nav__mobile-cta .btn { width: 100%; justify-content: center; padding: 14px; }
}
@media (min-width: 821px) { .nav__mobile-cta { display: none; } }

/* ---------- Hero: tag logo fills the viewport ---------- */
.hero {
  position: relative;
  height: calc(100vh - var(--nav-h));
  height: calc(100svh - var(--nav-h));
  min-height: 420px;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  overflow: hidden;
}
.hero__logo {
  width: 100%; height: 100%;
  object-fit: contain;
  max-width: 1600px;
}
.hero__scroll {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--text-dim);
}
.hero__scroll svg { width: 18px; height: 18px; color: var(--yellow); animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .hero__scroll svg { animation: none; } html { scroll-behavior: auto; } }

/* ---------- Sections ---------- */
.section { max-width: 920px; margin: 0 auto; padding: 96px 24px; }
.eyebrow { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--yellow); margin-bottom: 14px; }
.h-display {
  font-family: var(--font-display);
  font-weight: 400; text-transform: uppercase; letter-spacing: .01em;
  font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1.02; margin-bottom: 28px;
}
.h-display .accent-green { color: var(--green-bright); }
.h-display .accent-rust { color: var(--rust); }
.lead { color: var(--text-dim); font-size: 1.05rem; max-width: 62ch; }
.about { display: grid; gap: 18px; }
.about__intro { font-size: clamp(1.2rem, 2.4vw, 1.45rem); font-weight: 600; line-height: 1.45; max-width: 40ch; }
.about a, .lead a { color: var(--text); text-decoration: underline; text-decoration-color: var(--green-bright); text-underline-offset: 3px; }
.about a:hover, .lead a:hover { text-decoration-color: var(--yellow); }
.placeholder-box {
  border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 28px; color: var(--text-dim); background: var(--bg-raised);
}
.placeholder-box strong { color: var(--yellow); }
.notice {
  margin-top: 20px; max-width: 62ch; padding: 12px 16px; border-radius: 8px;
  border: 1px solid var(--line); border-left: 3px solid var(--yellow);
  background: var(--bg-raised); color: var(--text-dim); font-size: .9rem;
}
.notice strong { color: var(--text); }

/* ---------- Contact cards (homepage) ---------- */
#contact { padding-top: 40px; }
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 28px; }
@media (min-width: 640px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.contact-card {
  display: grid; gap: 6px; align-content: start; min-width: 0;
  background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; color: var(--text); text-decoration: none;
  transition: border-color .15s, transform .15s;
}
.contact-card:hover { border-color: var(--green-bright); transform: translateY(-2px); }
.contact-card:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.contact-card__icon { width: 28px; height: 28px; color: var(--green-bright); margin-bottom: 8px; }
.contact-card__label { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim); }
.contact-card__value { font-weight: 700; font-size: 1.1rem; overflow-wrap: anywhere; }
.contact-card__cta { font-size: .84rem; color: var(--text-dim); margin-top: 6px; }
.contact-card:hover .contact-card__cta { color: var(--yellow); }
@media (prefers-reduced-motion: reduce) { .contact-card { transition: none; } .contact-card:hover { transform: none; } }

/* ---------- 404 page ---------- */
.notfound { text-align: center; padding-top: 96px; }
.notfound__code {
  font-family: var(--font-display); font-weight: 400; line-height: .9;
  font-size: clamp(6rem, 22vw, 11rem); color: var(--yellow); margin-bottom: 12px;
}
.notfound .h-display { font-size: clamp(1.8rem, 5vw, 2.8rem); margin-bottom: 16px; }
.notfound .lead { margin: 0 auto; }
.notfound .page__actions { justify-content: center; }
.notfound__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-top: 40px; font-size: .9rem; }
.notfound__links a { color: var(--text-dim); text-decoration: underline; text-decoration-color: var(--green-bright); text-underline-offset: 3px; }
.notfound__links a:hover { color: var(--text); text-decoration-color: var(--yellow); }

.footer {
  border-top: 1px solid var(--line);
  padding: 28px 24px; text-align: center;
  font-size: .78rem; color: var(--text-dim);
}
.footer em { color: var(--rust); font-style: normal; }

/* ---------- Dashboard ---------- */
.dash { max-width: 1100px; margin: 0 auto; padding: 56px 24px 96px; }
.dash__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 32px; }
.dash__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.refresh { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--text-dim); }
.refresh select, .update__branch select {
  font: inherit; color: var(--text); background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; cursor: pointer;
}
.refresh select:focus-visible, .update__branch select:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.dash__section {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .02em;
  font-size: 1.5rem; margin: 48px 0 16px;
}
.dash__head + .dash__section { margin-top: 0; }
.card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.card__link { font-size: .8rem; color: var(--text-dim); white-space: nowrap; text-decoration: underline; text-decoration-color: var(--green-bright); text-underline-offset: 3px; }
.card__link:hover { color: var(--text); text-decoration-color: var(--yellow); }
#svc-note { margin-top: 12px; }
.dash__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.card {
  background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px;
}
.card__title { font-weight: 700; font-size: 1rem; margin-bottom: 4px; }
.card__desc { font-size: .84rem; color: var(--text-dim); margin-bottom: 18px; }
.status-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.status { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--text-dim); }
.lamp { width: 10px; height: 10px; border-radius: 50%; background: #444; box-shadow: 0 0 0 3px rgba(255,255,255,.04); }
.lamp.is-on { background: var(--green-bright); box-shadow: 0 0 10px var(--green-bright); }
.lamp.is-warn { background: var(--yellow); box-shadow: 0 0 10px color-mix(in srgb, var(--yellow) 60%, transparent); }
.lamp.is-bad { background: var(--rust); box-shadow: 0 0 10px var(--rust); }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin-top: 16px; font-size: .8rem; }
.facts dt { color: var(--text-dim); }
.facts dd { color: var(--text); overflow-wrap: anywhere; }

/* toggle switch */
.toggle {
  position: relative; width: 56px; height: 30px; flex-shrink: 0;
  border-radius: 999px; background: #2b2b2b; border: 1px solid var(--line);
  transition: background .2s, border-color .2s;
}
.toggle::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
  border-radius: 50%; background: #777; transition: transform .2s, background .2s;
}
.toggle[aria-checked="true"] { background: var(--green); border-color: var(--green-bright); }
.toggle[aria-checked="true"]::after { transform: translateX(26px); background: var(--yellow); }
.toggle:disabled { opacity: .5; cursor: wait; }
.toggle:focus-visible, .btn:focus-visible, .nav__link:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.note { margin-top: 14px; font-size: .74rem; color: var(--rust); letter-spacing: .04em; }

/* dashboard stat cards + meters. Fill color carries severity, the track is a dim step of the same hue. */
.stat { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.stat__value { font-size: 2.4rem; font-weight: 700; line-height: 1; }
.stat__flag { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.stat__sub { margin-top: 10px; font-size: .78rem; color: var(--text-dim); }
.meter {
  --fill: var(--green-bright);
  height: 8px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--fill) 22%, var(--bg-raised));
}
.meter > span { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--fill); transition: width .4s; }
.meter[data-level="warn"] { --fill: var(--yellow); }
.meter[data-level="crit"] { --fill: var(--rust); }
.disks { list-style: none; display: grid; gap: 18px; }
.disk__head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: .84rem; }
.disk__label { font-weight: 600; }
.disk__pct { color: var(--text-dim); }
.disk .stat__sub { margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { .meter > span { transition: none; } }

/* ---------- Project pages (e.g. Ripnamer) ---------- */
.page { max-width: 920px; margin: 0 auto; padding: 72px 24px 96px; }
.page__hero { margin-bottom: 56px; }
.page__hero .h-display { margin-bottom: 18px; }
.page__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.tag { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--text-dim); }
.tag--updated { color: var(--live); border-color: color-mix(in srgb, var(--live) 60%, transparent); }
.tag--status { color: var(--yellow); border-color: color-mix(in srgb, var(--yellow) 55%, transparent); }  /* e.g. "In development" */
.tag--hold { color: #e07a3a; border-color: color-mix(in srgb, var(--rust) 80%, transparent); }  /* on-hold: "Development hell" */
.page h2.h-sub { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 1.9rem; margin: 56px 0 18px; }
.steps { list-style: none; counter-reset: step; display: grid; gap: 14px; }
.steps li { counter-increment: step; display: flex; gap: 16px; background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.steps li::before { content: counter(step); flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--yellow); color: #111; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: .9rem; }
.steps strong { display: block; margin-bottom: 2px; }
.steps span { color: var(--text-dim); font-size: .92rem; }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .compare { grid-template-columns: 1fr; } }
.code-block { background: #0c0c0c; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .8rem; line-height: 1.7; color: var(--text-dim); overflow-x: auto; white-space: pre; }
.code-block__label { display: block; font-family: var(--font-body); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--yellow); margin-bottom: 8px; white-space: normal; }
.code-block .good { color: var(--green-bright); }
.page .placeholder-box { margin-top: 14px; }
.shot { margin-top: 14px; }
.shot a {
  display: block; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: var(--bg-panel); transition: border-color .15s;
}
.shot a:hover { border-color: var(--green-bright); }
.shot a:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.shot img { display: block; width: 100%; height: auto; }
.shot figcaption { margin-top: 10px; font-size: .84rem; color: var(--text-dim); }
/* Several screenshots/photos side by side (Proton Pack). Same .shot figures, just in a grid. */
.shot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; margin-top: 14px; }
.shot-grid .shot { margin-top: 0; min-width: 0; }
/* Same-size frames; the whole photo shows inside (photos range from square to very tall). */
.shot-grid .shot img { aspect-ratio: 3 / 4; object-fit: contain; background: #0b0b0b; }
.shot-grid--cad .shot img { background: #fff; }   /* CAD renders sit on white */
/* A tall hero photo: cap its height so the page doesn't start with a wall of image. */
.shot--hero { margin-top: 28px; }
.shot--hero a { background: #0b0b0b; }
.shot--hero img { width: auto; max-width: 100%; max-height: 70vh; margin: 0 auto; }

/* Spacing the project pages used to set inline (Markdown pages can't): a paragraph after a code block,
   a paragraph introducing a table, code block or comparison, and a list right after a table. */
.page .code-block + .lead { margin-top: 16px; }
.page .lead:has(+ .spec-wrap), .page .lead:has(+ .compare), .page .lead:has(+ .code-block) { margin-bottom: 16px; }
.page .spec-wrap + .bullets { margin-top: 16px; }

/* Inline SVG block diagrams on project pages. */
.diagram { margin-top: 24px; padding: 20px; background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius); }
.diagram svg { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; font-family: var(--font-body); }
.diagram figcaption { margin-top: 12px; font-size: .84rem; color: var(--text-dim); text-align: center; }
.diagram__box rect { fill: var(--bg-raised); stroke: var(--line); stroke-width: 1.5; }
.diagram__box--live rect { stroke: var(--live); filter: drop-shadow(0 0 6px var(--live-glow)); }
.diagram__box text { fill: var(--text); font-size: 13px; font-weight: 600; text-anchor: middle; }
.diagram__box .diagram__sub { fill: var(--text-dim); font-size: 11.5px; font-weight: 500; }
.diagram__link line { stroke: var(--live); stroke-width: 1.8; }
.diagram__head { fill: var(--live); }
.diagram__label { fill: var(--yellow); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; text-anchor: middle; }
.diagram__note { fill: var(--text-dim); font-size: 11.5px; text-anchor: middle; }
@media (max-width: 560px) { .diagram { padding: 14px 8px; } }
/* Wide pipeline figures (X4 page): a desktop drawing, and a taller one for phones. Boxes are raised;
   running ones glow green like live parts elsewhere. */
.diagram--wide svg { max-width: none; color: var(--text); }
.diagram--wide .dg-box { fill: var(--bg-raised); }
.diagram--wide .dg-box--live { stroke: var(--live); filter: drop-shadow(0 0 5px var(--live-glow)); }
.diagram__mob { display: none; }
.diagram__mob svg { max-width: 420px; }
@media (max-width: 700px) { .diagram__desk { display: none; } .diagram__mob { display: block; } }
.btn__sub { font-weight: 500; font-size: .78rem; opacity: .7; }
.dl-links { margin-top: 14px; font-size: .82rem; color: var(--text-dim); }
.dl-links a, .dl-notes a, .footer__credit a { color: var(--text); text-decoration: underline; text-decoration-color: var(--green-bright); text-underline-offset: 3px; }
.dl-links a:hover, .dl-notes a:hover, .footer__credit a:hover { text-decoration-color: var(--yellow); }
.dl-notes { list-style: disc; padding-left: 1.2em; margin-top: 12px; display: grid; gap: 4px; max-width: 70ch; font-size: .84rem; color: var(--text-dim); }
.dl-notes li { min-width: 0; }
.dl-notes li::marker { color: var(--green-bright); }
.dl-notes strong { color: var(--text); }
/* Commands wrap instead of scrolling sideways (the Linux file name is long). */
.dl-notes code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .78rem; color: var(--text); background: #0c0c0c; border: 1px solid var(--line); border-radius: 4px; display: block; margin-top: 4px; padding: 6px 8px; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; }
.footer__credit { margin-top: 8px; }

/* ---------- Status-grouped project pages (X4) ---------- */
.pill {
  display: inline-block; font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-dim); white-space: nowrap;
}
.pill--live { color: var(--green-bright); border-color: var(--green-bright); }
.pill--planned { color: var(--yellow); border-color: color-mix(in srgb, var(--yellow) 55%, transparent); }
.pill--bad { color: #e07a3a; border-color: color-mix(in srgb, var(--rust) 80%, transparent); }
.status-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 24px; font-size: .8rem; color: var(--text-dim); }
.status-group { margin-top: 72px; }
.status-group__head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 4px; }
.page .status-group__head h2.h-sub { margin: 0; }
.page h3.h-sub3 { font-size: 1.1rem; font-weight: 700; margin: 40px 0 14px; }
.spec-wrap { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-panel); overflow: hidden; }
.spec { width: 100%; border-collapse: collapse; font-size: .92rem; }
.spec th, .spec td { text-align: left; vertical-align: top; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; }
.spec th { width: 30%; font-weight: 600; color: var(--text); }
.spec td { color: var(--text-dim); overflow-wrap: anywhere; }
.spec td strong { color: var(--text); font-weight: 600; }
.bullets { list-style: disc; padding-left: 1.2em; display: grid; gap: 8px; max-width: 70ch; color: var(--text-dim); }
.bullets li::marker { color: var(--green-bright); }
.page .notice { max-width: none; }
@media (max-width: 560px) {
  .spec th, .spec td { display: block; width: auto; padding: 0 14px; border: 0; }
  .spec th { padding-top: 12px; }
  .spec td { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
  .spec tr:last-child td { border-bottom: 0; }
}

/* ---------- Dashboard login ---------- */
.login { max-width: 420px; }
.login .nav__logo { display: inline-block; margin-bottom: 32px; }
.login__form { display: grid; gap: 12px; }
.login__form .note { margin-top: 0; }
.input {
  width: 100%; padding: 12px 14px; border-radius: 8px; font: inherit; color: var(--text);
  background: var(--bg-raised); border: 1px solid var(--line);
}
.input:focus { outline: 2px solid var(--yellow); outline-offset: 1px; border-color: transparent; }

/* ---------- Dashboard update card ---------- */
.update__commit { font-size: .84rem; overflow-wrap: anywhere; }
.imp__run { margin: 4px 0 10px; max-width: 70ch; }
.imp__run .meter { margin: 8px 0 6px; }
.imp__file { font-weight: 600; font-size: .9rem; overflow-wrap: anywhere; }
.imp__code { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); max-width: 70ch; }
.imp__code-label { font-size: .66rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 8px; }
.update__branch { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: .8rem; color: var(--text-dim); }
.update__branch select { flex: 1; min-width: 0; }
.update__branch select:disabled, .update__fetch:disabled { opacity: .5; cursor: default; }
.update__fetch { padding: 7px 12px; font-size: 1rem; line-height: 1; }
.imp__failed { margin: 6px 0 0 18px; font-size: .8rem; color: #e07a3a; overflow-wrap: anywhere; }
/* Jellyfin section: connected users + now playing lists. */
.jf-list { display: grid; gap: 14px; list-style: none; }
.jf-list li { min-width: 0; }
.jf-list .meter { margin: 6px 0 4px; }
.jf-item__title { font-weight: 600; font-size: .9rem; overflow-wrap: anywhere; }
.jf-list .stat__sub { overflow-wrap: anywhere; }

/* Dev copy only (DASHBOARD_MODE=dev). */
.dev-banner {
  margin-bottom: 24px; padding: 10px 14px; border-radius: 8px; font-size: .84rem;
  background: color-mix(in srgb, var(--yellow) 14%, transparent); border: 1px solid var(--yellow); color: var(--text);
}
.dev-banner strong { color: var(--yellow); letter-spacing: .12em; }
#up-desc code { font-size: .8rem; color: var(--text); }
.update__btn { margin-top: 12px; }
.update__btn:disabled { opacity: .5; cursor: wait; }
.update__log { margin-top: 14px; font-size: .78rem; color: var(--text-dim); }
.update__log summary { cursor: pointer; }
.update__log pre {
  margin-top: 8px; max-height: 240px; overflow: auto; padding: 10px 12px; border-radius: 8px;
  background: var(--bg-raised); border: 1px solid var(--line); white-space: pre-wrap; font-size: .72rem;
}

/* =====================================================================================
   Design touches (site + dashboard): circuit traces, corner brackets, trace lines,
   // titles, glow = live, hover lift, refresh flash, scroll reveal.
   ===================================================================================== */

/* Circuit traces behind every page (assets/circuit.svg as a mask, painted in --live). */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--live); opacity: .085;
  -webkit-mask: url(circuit.svg) 0 0 / 200px 200px repeat;
          mask: url(circuit.svg) 0 0 / 200px 200px repeat;
}

/* Corner brackets: top-left + bottom-right of every card. */
.card, .contact-card, .project-card { position: relative; }
.card::before, .card::after,
.contact-card::before, .contact-card::after,
.project-card::before, .project-card::after {
  content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none;
  border: 0 solid var(--live); opacity: .75; transition: opacity .2s, width .2s, height .2s;
}
.card::before, .contact-card::before, .project-card::before {
  top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; border-top-left-radius: var(--radius);
}
.card::after, .contact-card::after, .project-card::after {
  bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: var(--radius);
}
.contact-card:hover::before, .contact-card:hover::after,
.project-card:hover::before, .project-card:hover::after { width: 22px; height: 22px; opacity: 1; }

/* Section labels trail off into a trace line. */
.eyebrow, .dash__section { display: flex; align-items: center; gap: 12px; }
.eyebrow::after, .dash__section::after {
  content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--live-glow), transparent);
}
.notfound .eyebrow { justify-content: center; }
.notfound .eyebrow::after { content: none; }

/* // before page titles. */
.h-display::before { content: "// "; color: var(--live); text-shadow: 0 0 14px var(--live-glow); }
.notfound .h-display::before { content: none; }

/* Glow = live: lit things glow, idle things don't. */
.btn--primary { box-shadow: 0 0 14px var(--action-glow); transition: transform .12s, background .15s, box-shadow .2s; }
.btn--primary:hover { box-shadow: 0 0 22px rgba(255, 214, 10, .45); }
.btn--ghost:hover { border-color: var(--live); }
.card.is-live { border-left: 2px solid var(--live); box-shadow: -6px 0 18px -10px var(--live-glow); }
.lamp.is-on { animation: lamp-pulse 2.4s ease-in-out infinite; }
@keyframes lamp-pulse { 0%, 100% { box-shadow: 0 0 6px var(--live); } 50% { box-shadow: 0 0 14px var(--live); } }

/* Live numbers keep their width while they change. */
.stat__value, .facts dd, .stat__sub, .kpi__value { font-variant-numeric: tabular-nums; }

/* Hover lift. */
.contact-card:hover, .project-card:hover {
  transform: translateY(-3px); border-color: var(--live); box-shadow: 0 10px 30px -14px var(--live-glow);
}

/* Brief accent ring when a dashboard tile's value changes. */
.is-flash { animation: flash 1.2s ease-out; }
@keyframes flash { from { box-shadow: 0 0 0 1px var(--live), 0 0 18px var(--live-glow); } to { box-shadow: 0 0 0 1px transparent; } }

/* Scroll reveal (homepage only; nav.js adds .reveal-on to <html> when it's safe to animate). */
.reveal-on .reveal { transition: opacity .5s ease-out, transform .5s ease-out; }
.reveal-on .reveal:not(.is-in) { opacity: 0; transform: translateY(16px); }

@media (prefers-reduced-motion: reduce) {
  .lamp.is-on, .is-flash { animation: none; }
  .contact-card:hover, .project-card:hover { transform: none; }
}

/* ---------- Homepage: project cards ---------- */
#projects { padding-bottom: 24px; }
.project-grid { display: grid; gap: 18px; grid-template-columns: 1fr; margin-top: 28px; }
@media (min-width: 640px) { .project-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .project-grid { grid-template-columns: repeat(3, 1fr); } }
/* Exactly four cards: 2 x 2 instead of 3 + 1 left alone on its own row. */
@media (min-width: 960px) { .project-grid:has(> :nth-child(4):last-child) { grid-template-columns: 1fr 1fr; } }
.project-card {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform .15s, border-color .15s, box-shadow .2s, opacity .5s ease-out;
}
.project-card:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
.project-card__art {
  position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0; border-bottom: 1px solid var(--line); background: #0b0b0b;
}
.project-card__art img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
/* Status badge on a card's image, e.g. "In development". */
.project-card__badge {
  position: absolute; top: 10px; left: 10px; z-index: 1; background: rgba(12, 12, 12, .85);
  color: var(--yellow); border-color: color-mix(in srgb, var(--yellow) 55%, transparent);
}
.project-card__badge--live { color: var(--live); border-color: var(--live); box-shadow: 0 0 10px -4px var(--live-glow); }  /* Running / Released */
.project-card__badge--hold { color: #e07a3a; border-color: color-mix(in srgb, var(--rust) 80%, transparent); }  /* On hold */
/* Placeholder art (no photo yet): denser circuit + a glowing icon. */
.project-card__art--ph::before {
  content: ""; position: absolute; inset: 0; background: var(--live); opacity: .22;
  -webkit-mask: url(circuit.svg) 0 0 / 120px 120px repeat; mask: url(circuit.svg) 0 0 / 120px 120px repeat;
}
.project-card__art--ph svg { position: relative; width: 64px; height: 64px; color: var(--live); filter: drop-shadow(0 0 10px var(--live-glow)); }
.project-card__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 18px 20px 20px; }
.project-card__title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 1.45rem; letter-spacing: .02em; line-height: 1.1; }
.project-card__desc { color: var(--text-dim); font-size: .9rem; }
.project-card .tags { margin-top: 2px; }
.project-card__cta { margin-top: auto; padding-top: 6px; font-size: .84rem; font-weight: 600; color: var(--yellow); }

/* ---------- Dashboard: left sidebar + overview strip ---------- */
.dash-layout { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.dash-main { min-width: 0; display: flex; flex-direction: column; }
.dash-main .footer { margin-top: auto; }
.side {
  position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px; padding: 22px 14px;
  background: rgba(12, 12, 12, .92); border-right: 1px solid var(--line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.side__logo { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; }
.side__logo img { width: 34px; height: 34px; }
.side__logo span { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: .06em; }
.side__label {
  display: flex; align-items: center; gap: 10px; padding: 14px 12px 6px;
  font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--yellow);
}
.side__label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--live-glow), transparent); }
.side__nav { display: grid; gap: 2px; }
.side__link {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 6px;
  border-left: 2px solid transparent; color: var(--text-dim); font-size: .9rem; font-weight: 500;
  transition: color .15s, background .15s;
}
.side__link svg { width: 18px; height: 18px; flex-shrink: 0; }
.side__link:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.side__link:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.side__link.is-active { color: var(--live); background: var(--live-soft); border-left-color: var(--live); text-shadow: 0 0 12px var(--live-glow); }
.side__count { margin-left: auto; padding: 1px 7px; border-radius: 99px; font-size: .72rem; background: var(--live-soft); color: var(--live); }
.side__foot { display: grid; gap: 10px; margin-top: auto; padding: 14px 6px 0; border-top: 1px solid var(--line); }
.side__foot .refresh { justify-content: space-between; }
.side__foot form, .side__foot .btn { width: 100%; }
.side__foot .btn { justify-content: center; }

.dash-topbar { display: none; }
.dash { max-width: 1180px; width: 100%; }
.dash .h-display { margin-bottom: 0; }
.dash__head { margin-bottom: 24px; }

/* Pill rows on the Update and Power cards (status, how long things took, when). */
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.pills:empty { display: none; }
.pills .pill--live { color: var(--live); border-color: var(--live); box-shadow: 0 0 10px -4px var(--live-glow); }
.card--wide .card__desc { max-width: 70ch; }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpi { min-width: 0; padding: 14px 16px; background: var(--bg-panel); border: 1px solid var(--line); border-left: 2px solid var(--line); border-radius: var(--radius); }
.kpi.is-live { border-left-color: var(--live); }
.kpi__label { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); }
.kpi__value { font-family: var(--font-display); font-size: 1.9rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi__value small { margin-left: 4px; font-family: var(--font-body); font-size: .8rem; color: var(--text-dim); }

@media (max-width: 900px) {
  .dash-layout { grid-template-columns: minmax(0, 1fr); }
  .dash-topbar {
    position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 16px;
    background: rgba(17, 17, 17, .85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
  }
  .dash-topbar img { width: 32px; height: 32px; }
  .dash-topbar span { font-family: var(--font-display); letter-spacing: .06em; }
  .dash-topbar .nav__burger { display: inline-flex; margin-left: auto; }
  /* Slide-in drawer, revealed with clip-path so nothing parked off-screen causes sideways scroll. */
  .side {
    position: fixed; z-index: 60; left: 0; top: 0; width: 272px;
    clip-path: inset(0 100% 0 0); visibility: hidden; transition: clip-path .25s, visibility 0s .25s;
  }
  .dash-layout.is-side-open .side { clip-path: inset(0); visibility: visible; transition: clip-path .25s; }
  .side-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .55); border: 0; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 901px) { .side-scrim { display: none; } }
/* Desktop dashboard at 80% scale: zoom shrinks text, spacing, cards and the sidebar together. Lengths
   based on the window shrink too, so the sidebar's height and the content's max width are divided by
   the same factor to keep filling the screen. The page background (body::before) isn't zoomed. */
@media (min-width: 901px) {
  .dash-layout { --dash-zoom: .8; zoom: var(--dash-zoom); min-height: calc(100vh / var(--dash-zoom)); }
  .dash-layout .side { height: calc(100vh / var(--dash-zoom)); height: calc(100dvh / var(--dash-zoom)); }
  .dash-layout .dash { max-width: calc(1180px / var(--dash-zoom)); }
}
/* Scrollbars (mouse/trackpad devices; phones keep their native overlay bars): a thin dark rail on the
   page and everything that scrolls inside it (dashboard sidebar, code blocks, logs). The thumb is faint,
   brightens when you point at it, and turns green while dragged. Chrome/Edge/Safari use the
   ::-webkit-scrollbar rules (they'd ignore them if scrollbar-color were also set), Firefox the
   standard properties. */
@media (pointer: fine) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
  ::-webkit-scrollbar-thumb { background: #2e2e2e; border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
  ::-webkit-scrollbar-thumb:hover { background-color: var(--text-dim); }
  ::-webkit-scrollbar-thumb:active { background-color: var(--live); }
  .side::-webkit-scrollbar { width: 8px; }
  .side::-webkit-scrollbar-thumb { background-color: #262626; }
  .side:hover::-webkit-scrollbar-thumb { background-color: #3a3a3a; }
  .side::-webkit-scrollbar-thumb:hover { background-color: var(--text-dim); }
  .side::-webkit-scrollbar-thumb:active { background-color: var(--live); }
  @supports not selector(::-webkit-scrollbar) {
    * { scrollbar-width: thin; scrollbar-color: #3a3a3a transparent; }
  }
}

/* ---------- Site search (nav.js) and the /projects/ filter ---------- */
.nav__search {
  display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex-shrink: 0;
  border-radius: var(--radius); border: 1px solid var(--line); background: none; color: var(--text-dim); cursor: pointer;
  transition: color .15s, border-color .15s;
}
.nav__search:hover { color: var(--live); border-color: var(--live); }
.nav__search svg { width: 18px; height: 18px; }
.nav__search:focus-visible, .search__close:focus-visible, .search__hit:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
@media (max-width: 820px) {
  .nav__search { margin-left: auto; }
  .nav__search ~ .nav__burger { margin-left: 0; }
}
html.is-searching { overflow: hidden; }
.search {
  position: fixed; inset: 0; z-index: 100; display: flex; justify-content: center; align-items: flex-start;
  padding: 12vh 16px 16px; background: rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.search[hidden] { display: none; }
.search__panel {
  width: 100%; max-width: 620px; max-height: 76vh; display: flex; flex-direction: column;
  background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55), 0 0 0 1px var(--live-soft);
}
.search__bar { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--live); }
.search__bar svg { width: 20px; height: 20px; flex-shrink: 0; }
.search__input {
  flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--text);
  font: inherit; font-size: 1rem; padding: 4px 0;
}
.search__input::placeholder { color: var(--text-dim); }
.search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search__close {
  flex-shrink: 0; font: inherit; font-size: .68rem; font-weight: 600; letter-spacing: .1em; color: var(--text-dim);
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; cursor: pointer;
}
.search__status { padding: 10px 16px 4px; font-size: .74rem; color: var(--text-dim); }
.search__results { list-style: none; overflow-y: auto; padding: 4px 8px 10px; }
.search__hit {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: baseline;
  padding: 10px 10px; border-radius: 6px; border: 1px solid transparent; color: var(--text);
}
.search__hit:hover, .search__hit.is-active { background: var(--bg-raised); border-color: var(--line); }
.search__hit.is-active { border-color: var(--live); }
.search__title { font-weight: 600; font-size: .92rem; overflow-wrap: anywhere; }
.search__section { color: var(--live); font-weight: 500; }
.search__pill { font-size: .58rem; padding: 2px 8px; }
.search__desc { grid-column: 1 / -1; font-size: .8rem; line-height: 1.5; color: var(--text-dim); overflow-wrap: anywhere; }
.projects-filter { margin-top: 24px; max-width: 420px; }
.projects-filter input {
  width: 100%; font: inherit; font-size: .9rem; color: var(--text); background: var(--bg-raised);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px;
}
.projects-filter input:focus { outline: 2px solid var(--yellow); outline-offset: 2px; border-color: transparent; }
.projects-filter__none { margin-top: 12px; font-size: .85rem; color: var(--text-dim); }
.projects-group[hidden], .project-card[hidden] { display: none; }
@media (max-width: 560px) { .search { padding-top: 76px; } .search__panel { max-height: calc(100dvh - 92px); } }