/* Shared across public pages. Each page keeps its own dark :root palette;
   :root[data-theme="light"] out-specifies it, so light mode only needs overrides here. */

:root[data-theme="light"]{
  --bg:#FAFAF7;--surface:#FFFFFF;--border:#E2E2DD;--border2:#F1F1EC;
  --text:#141416;--muted:#45454B;--hint:#66666D;--faint:#8E8E95;
  --blue:#2563EB;--blue-bg:rgba(37,99,235,.08);--blue-border:rgba(37,99,235,.3);
  --green:#047857;--green-bg:rgba(4,120,87,.08);--green-border:rgba(4,120,87,.3);
  --accent2:#B45309;--accent2-bg:rgba(180,83,9,.08);--accent2-border:rgba(180,83,9,.3);
  --red:#B91C1C;--red-bg:rgba(185,28,28,.07);--red-border:rgba(185,28,28,.3);
  color-scheme:light;
}
:root[data-theme="dark"]{color-scheme:dark}

/* Hard-coded colours in the page stylesheets */
:root[data-theme="light"] nav{background:rgba(250,250,247,.88)}
:root[data-theme="light"] .prose{color:#33333A}
:root[data-theme="light"] .prose code{background:rgba(0,0,0,.06)}
:root[data-theme="light"] .prose pre code{background:transparent}
:root[data-theme="light"] .prose th{background:rgba(0,0,0,.04)}
:root[data-theme="light"] .tab.active{box-shadow:0 1px 3px rgba(0,0,0,.12)}
:root[data-theme="light"] .contact-submit:hover,
:root[data-theme="light"] .proj-link.primary:hover{background:#2E2E33}
/* Category badges use fixed bright hues (--c); darken their text for contrast on white. */
:root[data-theme="light"] .proj-type{color:color-mix(in srgb,var(--c) 62%,#000)}

/* Smooth page-to-page navigation (Chrome/Edge/Safari 18.2+; others just navigate) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.2s}
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* Nav tools: search + theme toggle */
nav .nav-links,nav .nav-back{margin-left:auto}
.nav-tools{display:flex;align-items:center;gap:.35rem;margin-left:1rem;flex-shrink:0}
.nav-tool{display:inline-flex;align-items:center;gap:6px;height:30px;min-width:30px;justify-content:center;padding:0 8px;border-radius:6px;border:1px solid var(--border);background:transparent;color:var(--hint);cursor:pointer;transition:color .18s,border-color .18s,background .18s;font:inherit}
.nav-tool:hover{color:var(--text);border-color:var(--hint)}
.nav-tool:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.nav-tool kbd{font-family:'IBM Plex Mono',monospace;font-size:.62rem;color:var(--faint)}
:root[data-theme="dark"] .icon-sun,:root[data-theme="light"] .icon-moon{display:none}
@media(max-width:640px){
  .nav-tools{margin-left:.5rem}
  .nav-tool kbd{display:none}
  .nav-tool{padding:0;width:30px}
}

/* Cmd+K palette */
#cmdk{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.5);backdrop-filter:blur(3px);display:flex;justify-content:center;align-items:flex-start;padding:12vh 1rem 1rem}
#cmdk[hidden]{display:none}
.cmdk-panel{width:min(600px,100%);background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 24px 60px rgba(0,0,0,.45);overflow:hidden;animation:cmdk-in .14s ease-out}
@keyframes cmdk-in{from{opacity:0;transform:translateY(-6px) scale(.985)}to{opacity:1;transform:none}}
.cmdk-bar{display:flex;align-items:center;gap:.65rem;padding:.9rem 1rem;border-bottom:1px solid var(--border);color:var(--hint)}
.cmdk-bar input{flex:1;min-width:0;background:transparent;border:none;outline:none;color:var(--text);font-family:'Outfit',sans-serif;font-size:1rem}
.cmdk-bar kbd{font-family:'IBM Plex Mono',monospace;font-size:.62rem;color:var(--faint);border:1px solid var(--border);border-radius:4px;padding:1px 6px}
#cmdk-results{max-height:min(55vh,420px);overflow-y:auto;padding:.4rem}
.cmdk-group{font-family:'IBM Plex Mono',monospace;font-size:.6rem;text-transform:uppercase;letter-spacing:.12em;color:var(--faint);padding:.7rem .7rem .35rem}
.cmdk-item{display:flex;flex-direction:column;gap:2px;padding:.6rem .75rem;border-radius:6px;text-decoration:none;color:var(--text)}
.cmdk-item.sel{background:var(--border2)}
.cmdk-title{font-size:.88rem;font-weight:500}
.cmdk-sub{font-family:'IBM Plex Mono',monospace;font-size:.66rem;color:var(--hint)}
.cmdk-empty{padding:2rem 1rem;text-align:center;color:var(--hint);font-size:.85rem}

/* London clock */
.site-clock{display:inline-flex;align-items:center;gap:7px;font-family:'IBM Plex Mono',monospace;font-size:.68rem;color:var(--hint)}
.clock-dot{width:6px;height:6px;border-radius:50%;background:var(--faint)}
.site-clock.open .clock-dot{background:var(--green);box-shadow:0 0 0 3px var(--green-bg)}

/* KaTeX */
.math-display{display:block;overflow-x:auto;overflow-y:hidden;margin:1.25rem 0;text-align:center}