/*
 * zarnab.dev / night surface
 * Load after the page's existing styles. This is a presentation-only layer:
 * document order, grid proportions, project artwork, and preview runtimes stay
 * with their original sources. The small glyphs are decoration, not controls.
 */
:root {
  color-scheme: dark;
  --night: #0a1222;
  --night-raised: #101e33;
  --night-hover: #162740;
  --night-line: #334763;
  --night-ink: #ecf2ff;
  --night-muted: #b0bdd2;
  --night-dim: #8d9eb9;
  --night-blue: #8fbfff;
  --night-cyan: #7cd8d1;
  --paper: var(--night);
  --ink: var(--night-ink);
  --muted: var(--night-muted);
  --rule: var(--night-line);
  background: var(--night);
  color: var(--night-ink);
}
body {
  background: var(--night);
  color: var(--night-ink);
}
::selection { background: #8fbfff; color: #0a1222; }
:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--night-cyan);
  outline-offset: 5px;
}

/* Homepage chrome. The existing page geometry and typographic scale are kept. */
body:not(.portfolio-page) > header {
  background: var(--night);
  border-color: var(--night-line);
}
.wordmark { color: var(--night-ink); }
.wordmark .mark {
  display: inline-block;
  color: var(--night-cyan);
  transform-origin: 50% 50%;
  transition: transform 180ms ease, color 180ms ease;
}
body:not(.portfolio-page) > header nav a { color: var(--night-muted); }
body:not(.portfolio-page) > header nav .resume-direct { color: var(--night-ink); }
.preview-switch { color: var(--night-muted); }
.preview-switch-track {
  background: #4b5e78;
  box-shadow: inset 0 0 0 1px #637a99;
}
.preview-switch-track::after { background: var(--night-ink); }
.preview-switch[aria-checked="true"] .preview-switch-track {
  background: var(--night-cyan);
  box-shadow: none;
}
.preview-switch[aria-checked="true"] .preview-switch-track::after { background: #0a2934; }
.preview-switch:disabled { opacity: .65; }
.skip { color: var(--night); background: var(--night-cyan); }
.bench-intro {
  background: radial-gradient(ellipse at 90% 12%, #14243a 0, transparent 52%);
}
.intro-title > .eyebrow,
.section-heading > .eyebrow { color: var(--night-dim); }
.intro-title > .eyebrow::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 10px;
  border: 1px solid var(--night-cyan);
  background: linear-gradient(135deg, transparent 42%, var(--night-cyan) 43%, var(--night-cyan) 55%, transparent 56%);
  vertical-align: 0;
}
.intro-career,
.intro-note p { color: var(--night-muted); }
.intro-note .intro-availability { color: var(--night-ink); }
.intro-note > a,
.intro-actions > a { color: var(--night-blue); }
.intro-actions .resume-direct {
  color: var(--night);
  background: var(--night-blue);
}

/* A still navy spectrum remains useful when the existing pigment canvas stops. */
.pigment-margin,
.portfolio-lightweight .pigment-margin,
.pigment-still {
  background: linear-gradient(110deg, #0f263b, #213652 45%, #2a2947 72%, #12363d);
  color: var(--night-ink);
  box-shadow: inset 0 0 0 1px #536682;
}
.pigment-margin > span,
.pigment-margin button {
  color: #f1f5ff;
  background: #0a1222e8;
}
.pigment-margin > span { padding: 3px 7px; margin-left: -7px; }
.pigment-margin button { border-color: #8195b1; }
.pigment-margin button:disabled { color: #ced9e9; }
.production-proof .eyebrow { color: var(--night-dim); }
.production-proof article > div { color: var(--night-cyan); }
.production-proof article { position: relative; }
.production-proof article::after {
  content: "";
  position: absolute;
  right: 0;
  top: 1px;
  width: 16px;
  height: 16px;
  opacity: .65;
  pointer-events: none;
  background-image: radial-gradient(circle, #7cd8d1 1px, transparent 1.5px);
  background-size: 6px 6px;
}
.production-proof .eyebrow { padding-right: 24px; }
.work-paths h2 span { color: var(--night-blue); }
.work-paths a { transition: background-color 160ms ease; }
.work-paths h2 span { transition: transform 160ms ease; }

/* Written evidence is dark-mode aware. Recorded media and data marks are not recolored. */
.plate-label { color: var(--night-dim); }
.plate-copy > p { color: var(--night-muted); }
.plate-copy .plate-description { color: var(--night-ink); }
.plate-copy .plate-boundary { border-color: #607d9d; }
.plate-boundary > span { color: var(--night-muted); }
.plate-boundary > span:first-child { color: var(--night-dim); }
.plate-links a,
.project-conversation,
.project-records dt a,
.text-link { color: var(--night-blue); }
.plate-0 { border-top-color: #8da967; }
.plate-0 .plate-label { color: #b9d799; }
#robotics .plate-links a[href^="https://c1n."] {
  background: #214b78;
  color: #fff;
  border: 1px solid #7297c4;
  box-shadow: none;
}
#robotics .plate-links a[href^="https://c1n."]:hover {
  background: #2e5f92;
  transform: none;
}
#robotics .plate-links a[href^="https://c1n."]:focus-visible { outline-color: var(--night-cyan); }
.notebook-preview {
  color: var(--night-ink);
  background: var(--night-raised);
  box-shadow: inset 0 0 0 1px var(--night-line);
  transition: background-color 160ms ease, box-shadow 160ms ease;
}
.notebook-preview p { color: var(--night-muted); }
.notebook-preview .eyebrow { color: var(--night-dim); }
.notebook-preview h3 span { color: var(--night-blue); }
.workspace-notebook { border-color: #8da967; }
.notebook-preview:hover { background: var(--night-hover); }
/* These are technical specimens, not portfolio panels. Keep their light palette. */
.causal-study,
.pipeline-diagram {
  --ink: #252b28;
  --muted: #62695f;
  --paper: #f3f0e7;
  color: #252b28;
  color-scheme: light;
}
.signal-instrument { color-scheme: light; }
.causal-study ::selection,
.pipeline-diagram ::selection,
.signal-instrument ::selection { background: #214b78; color: #fff; }
.project-evidence-art figcaption,
.project-evidence-art figcaption a,
.ledger-heading > span,
.project-ledger > p,
.ledger-language,
.ledger-entry time { color: var(--night-dim); }
.ledger-entry,
.ledger-entry:last-child { border-color: var(--night-line); }
.ledger-entry > div,
.ledger-entry > div p { color: var(--night-muted); }
.ledger-entry > div a { color: var(--night-blue); }
.ledger-entry summary > span:last-child { color: var(--night-cyan); }
.practice { background: #0e1b2e; }
.practice-copy p,
.about p,
.skills p,
.archive p { color: var(--night-muted); }
.method b { color: var(--night-cyan); }
.experience article > div span { color: var(--night-dim); }
.virginia-tech,
.virginia-tech span { color: #f1a5bd; }
.archive-links a { color: var(--night-blue); }
.pocket-closing {
  background: #101d30;
  color: var(--night-ink);
  border-color: var(--night-line);
}
.pocket-closing .eyebrow,
.pocket-closing p { color: var(--night-muted); }
.pocket-link > span { color: var(--night-cyan); }
.pocket-link:focus-visible { outline-color: var(--night-cyan); }
.contact {
  color: var(--night-ink);
  background: #0d1c30;
  border-top: 1px solid var(--night-line);
}
.contact p,
.contact .contact-invitation { color: var(--night-muted); }
.contact .email,
.conversation-links a { color: var(--night-blue); border-color: #607d9d; }
body:not(.portfolio-page) > footer,
body:not(.portfolio-page) > footer span,
body:not(.portfolio-page) > footer a { color: var(--night-dim); }

/* Shared static pages. Override their historical paper variables and literals. */
body.portfolio-page {
  color-scheme: dark;
  --navy: var(--night);
  --navy-light: var(--night-raised);
  --navy-card: var(--night-raised);
  --border: var(--night-line);
  --gold: var(--night-blue);
  --gold-light: var(--night-blue);
  --teal: var(--night-cyan);
  --text: var(--night-ink);
  --text-muted: var(--night-muted);
  --text-dim: var(--night-dim);
  --ink: var(--night-ink);
  --muted: var(--night-muted);
  --accent: var(--night-blue);
  --surface: var(--night);
  --surface-raised: var(--night-raised);
  --card-shadow: none;
  --card-shadow-hover: none;
  background: var(--night);
  color: var(--night-ink);
}
.portfolio-page h1,
.portfolio-page h2,
.portfolio-page h3,
.portfolio-page h4 { color: var(--night-ink); }
.portfolio-page a:focus-visible,
.portfolio-page summary:focus-visible,
.portfolio-page button:focus-visible { outline-color: var(--night-cyan); }
.portfolio-nav,
.portfolio-footer { background: var(--night); border-color: var(--night-line); }
.portfolio-nav .portfolio-name { color: var(--night-ink); }
.portfolio-nav .portfolio-name span,
.portfolio-nav > div a,
.portfolio-footer { color: var(--night-muted); }
.portfolio-nav a:hover { color: var(--night-blue); }
.portfolio-page .page-hero,
.portfolio-page .work-hero,
.portfolio-page .lab-hero { background: radial-gradient(ellipse at 96% 10%, #14243a, transparent 54%); }
.portfolio-page .page-hero > p,
.portfolio-page .about-copy p,
.portfolio-page .timeline-bullets li,
.portfolio-page .resume-summary,
.portfolio-page .notfound .hero-sub { color: var(--night-muted); }
.portfolio-page .section-eyebrow,
.portfolio-page .project-tag,
.portfolio-page .project-date,
.portfolio-page .dates,
.portfolio-page .resume-block-title { color: var(--night-dim); }
.portfolio-page .page-hero > .section-eyebrow::before,
.portfolio-page .work-hero > .section-eyebrow::before,
.portfolio-page .lab-hero > .section-eyebrow::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  border: 1px solid var(--night-cyan);
  transform: rotate(45deg);
}
.portfolio-page .about-lead,
.portfolio-page .org,
.portfolio-page .about-avatar .title { color: var(--night-ink); }
.portfolio-page .project-card-full,
.portfolio-page .resume-block,
.portfolio-page .contact-form-card,
.portfolio-page .notes-principles,
.portfolio-page .about-avatar,
.portfolio-page .earlier-writeups,
.portfolio-page .avail-ask {
  background: var(--night-raised);
  border-color: var(--night-line);
  box-shadow: none;
}
.portfolio-page .project-card-full p,
.portfolio-page .project-card-full .project-bullets li { color: var(--night-muted); }
.portfolio-page .project-card-full:hover { border-color: #607d9d; }
.portfolio-page .project-meta > span,
.portfolio-page .avail-tag {
  color: var(--night-muted);
  background: #13243b;
  border-color: var(--night-line);
}
.portfolio-page .timeline-item,
.portfolio-page .about-photo,
.portfolio-page .about-contact-info,
.portfolio-page .avail-section,
.portfolio-page .avail-card,
.portfolio-page .avail-divider { border-color: var(--night-line); }
.portfolio-page .timeline-item::before {
  background: var(--night-cyan);
  box-shadow: 0 0 0 5px var(--night);
}
.portfolio-page .resume-download-card {
  background: #142942;
  border-color: #526d90;
  color: var(--night-ink);
}
.portfolio-page .resume-download-card strong { color: var(--night-ink); }
.portfolio-page .resume-download-card span { color: var(--night-muted); }
.portfolio-page .resume-download-card em { color: var(--night-cyan); }
.portfolio-page .resume-download-card:hover { background: #193451; border-color: var(--night-blue); }
.portfolio-page .btn-primary {
  color: var(--night);
  background: var(--night-blue);
  border-color: var(--night-blue);
  box-shadow: none;
}
.portfolio-page .btn-ghost { color: var(--night-blue); border-color: #607d9d; }
.portfolio-page .contact-detail > span { color: var(--night-dim); }
.portfolio-page .contact-detail strong,
.portfolio-page .form-group label,
.portfolio-page .notes-principles summary { color: var(--night-ink); }
.portfolio-page .form-group input,
.portfolio-page .form-group textarea,
.portfolio-page .form-group select {
  background: #0c1729;
  color: var(--night-ink);
  border-color: #60738e;
}
.portfolio-page .form-group input::placeholder,
.portfolio-page .form-group textarea::placeholder { color: #a8b7ce; opacity: 1; }
.portfolio-page .form-group input:focus,
.portfolio-page .form-group textarea:focus,
.portfolio-page .form-group select:focus-visible {
  border-color: var(--night-cyan);
  outline: 2px solid var(--night-cyan);
  outline-offset: 2px;
}
.contact-page .form-error,
.contact-page .field-error { color: #ffb7b4; }
.portfolio-page .avail-item-body strong,
.portfolio-page .earlier-writeups > summary { color: var(--night-ink); }
.portfolio-page .avail-item-body > span,
.portfolio-page .avail-section-label { color: var(--night-muted); }
.portfolio-page .integrated-project,
.portfolio-page .integrated-project:last-child { border-color: var(--night-line); }
.portfolio-page .project-number { color: var(--night-cyan); }
.portfolio-page .integrated-project .project-medium { color: var(--night-dim); }
.portfolio-page .integrated-project p { color: var(--night-muted); }
.portfolio-page .integrated-project .project-intro { color: var(--night-ink); }
.portfolio-page .integrated-project .project-limit { color: var(--night-muted); border-color: #607d9d; }
.portfolio-page .integrated-project a,
.portfolio-page .project-link { color: var(--night-blue); }
.portfolio-page .spider-avail-item {
  background-color: var(--night-raised);
  background-image: none;
  border-color: var(--night-line);
}
.portfolio-page .spider-avail-item .avail-item-body strong a,
.portfolio-page .spider-project-card-full .project-link { color: var(--night-blue); }
.portfolio-page .spider-project-card-full .engineering-note { color: var(--night-muted); background: #172d47; }
.portfolio-page .spider-project-card-full .engineering-note strong { color: var(--night-ink); }

/* Notebook wrappers use the same night surface; retained figures stay untouched. */
.portfolio-page .lab-meta,
.portfolio-page .lab-card,
.portfolio-page .source-cell,
.portfolio-page .notebook-body td,
.portfolio-page .notebook-body th { border-color: var(--night-line); }
.portfolio-page .reader-aside { border-color: var(--night-blue); }
.portfolio-page .lab-path,
.portfolio-page .evidence-note {
  background: var(--night-raised);
  color: var(--night-muted);
  border-color: #607d9d;
}
.portfolio-page .notebook-body pre { background: #111f32; color: #d8e4f7; }
.portfolio-page .prompt { color: var(--night-dim); }
.portfolio-page .notebook-body .highlight .k,
.portfolio-page .notebook-body .highlight .kn { color: #a9cfff; }
.portfolio-page .notebook-body .highlight .s,
.portfolio-page .notebook-body .highlight .s1,
.portfolio-page .notebook-body .highlight .s2 { color: #e7c691; }
.portfolio-page .notebook-body .highlight .c1 { color: #a3b3cb; }
/* Preserve the distinct charcoal/lime test-bench identity within its existing slot. */
.portfolio-page .robotics-entry { background: #20251f; color: #e7eddc; }
.portfolio-page .robotics-entry a { color: #d2e98f; }
.portfolio-page .notes-robotics {
  background: #20251f !important;
  border-color: #8da967 !important;
}
.portfolio-page .notes-robotics h2,
.portfolio-page .notes-robotics h3,
.portfolio-page .notes-robotics p { color: #e7eddc !important; }
.portfolio-page .notes-robotics a { color: #d2e98f !important; }

/* Pocket keeps its small, two-column directory and the same destinations. */
@font-face {
  font-family: "Night Manrope";
  src: url("/fonts/manrope-latin-wght-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
body.pocket-page { font-family: "Night Manrope", Manrope, Arial, sans-serif; }
.pocket-page .back,
.pocket-page .label,
.pocket-page header p,
.pocket-page footer { color: var(--night-muted); }
.pocket-page .links a,
.pocket-page footer { border-color: var(--night-line); }
.pocket-page .links span { color: var(--night-cyan); }
.pocket-page .links a:hover { color: var(--night-blue); }
.pocket-page a:focus-visible { outline-color: var(--night-cyan); }

/* Aliveness is response to real interaction, not a constantly running ornament. */
@media (hover: hover) and (pointer: fine) {
  .wordmark:hover .mark { color: var(--night-blue); transform: translate(2px, -2px); }
  body:not(.portfolio-page) > header nav a:hover { color: var(--night-cyan); }
  .preview-switch:not(:disabled):hover { color: var(--night-cyan); }
  .work-paths > a:hover { background: var(--night-raised); }
  .work-paths > a:hover h2 span { transform: translate(2px, -2px); }
  .notebook-preview:hover { box-shadow: inset 0 0 0 1px #607d9d; }
  .pocket-link:hover { color: var(--night-blue); }
  .portfolio-page .btn-primary:hover { background: #b0d2ff; color: var(--night); }
}
@media (max-width: 600px) {
  .production-proof article::after { top: 2px; }
  .production-proof article + article::after { top: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wordmark .mark,
  .work-paths a,
  .work-paths h2 span,
  .notebook-preview { transition: none; }
  .wordmark:hover .mark,
  .work-paths > a:hover h2 span { transform: none; }
}
@media (forced-colors: active) {
  .intro-title > .eyebrow::before,
  .production-proof article::after,
  .portfolio-page .page-hero > .section-eyebrow::before,
  .portfolio-page .work-hero > .section-eyebrow::before,
  .portfolio-page .lab-hero > .section-eyebrow::before { display: none; }
  .preview-switch-track { border: 1px solid ButtonText; }
  .preview-switch-track::after { background: ButtonText; }
  .preview-switch[aria-checked="true"] .preview-switch-track::after { background: Highlight; }
}