/* ============================================================
   BACKEND / SOURCE-CODE VIEW — theme overlay
   ------------------------------------------------------------
   Loads AFTER style-backend.css (an exact copy of style.css).
   It never touches layout: no widths, heights, grid, spacing,
   or text is changed here — only color, font-family and purely
   decorative additions (a line-number gutter, tag/attribute
   chips, code overlays for images). All real geometry/measure
   rules stay untouched in style-backend.css.

   Palette: VS Code "Dark+" — the actual editor theme, not a
   green matrix wash. Green is reserved for comments only, the
   same restrained role it plays in a real editor.

   Re-theme strategy: almost every visual color in the original
   stylesheet is driven by five custom properties (--white,
   --black, --mid, --soft, --surface). Re-pointing those five
   tokens re-colors the whole page for free; the rules below
   then layer the rest of the Dark+ palette on top so text reads
   like real syntax highlighting instead of one flat hue.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --white:   #1e1e1e;   /* editor background */
  --black:   #d4d4d4;   /* default editor foreground */
  --mid:     #6a9955;   /* comments — the ONLY place green belongs */
  --soft:    #3c3c3c;   /* editor border / divider gray */
  --surface: #252526;   /* panel / sidebar gray */
  --font:    'Fira Code', 'JetBrains Mono', ui-monospace, SFMono-Regular,
             Menlo, Consolas, 'Liberation Mono', monospace;

  --code-tag:     #569cd6;  /* tags: nav links, buttons */
  --code-attr:    #9cdcfe;  /* attribute names */
  --code-string:  #ce9178;  /* string values / titles */
  --code-entity:  #dcdcaa;  /* type / component name (brand) */
  --code-keyword: #c586c0;  /* keywords / CTA accents */
  --code-accent:  #4fc1ff;  /* focus accent, signature stroke */
  --code-number:  #b5cea8;  /* numeric literals (years) */
  --code-punct:   #808080;  /* punctuation in code overlays */
  --gutter-fg:    #858585;  /* line-number color, matches VS Code */
}

/* ── Global feel ─────────────────────────────────────────── */
html, body { background: var(--white); }
::selection { background: var(--code-tag); color: #04110a; }

.topnav,
.hero,
#work,
.site-footer { background: var(--white); }

/* ── Line-number gutter — sits in the page's own side margin,
   never under content: narrower than the site's own smallest
   gutter (--gutter, min 1.25rem) so nothing is displaced. ── */
#codeGutter {
  position: absolute;
  top: 0;
  left: 0;
  width: 13px;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  font-family: var(--font);
  font-size: 7px;
  line-height: 18px;
  color: var(--gutter-fg);
  text-align: right;
  padding-right: 2px;
  opacity: .55;
}

/* ── Backend-view badge (fixed, floating — adds nothing to flow) ── */
.backend-badge {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 9500;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
  background: rgba(37, 37, 38, .96);
  border: 1px solid var(--soft);
  border-radius: 6px;
  font-family: var(--font);
  font-size: .62rem;
  letter-spacing: .04em;
  color: var(--gutter-fg);
  text-decoration: none;
}
.backend-badge strong { color: var(--code-entity); font-weight: 600; }
.backend-badge:hover { border-color: var(--code-tag); color: var(--code-tag); }

/* ── Structural corner tags — show where sections/objects live ──
   Real elements, not ::before/::after: several targets (#work,
   .topnav) already use those pseudo-elements for real content
   (the "Selected Work" headline, the nav underline), so reusing
   them here would hijack that content instead of layering on it. */
.filter-bar, .site-footer { position: relative; }
#workGrid { position: relative; }

.dev-tag,
.code-chip {
  position: absolute;
  z-index: 40;
  font-family: var(--font);
  line-height: 1;
  background: rgba(37, 37, 38, .92);
  border: 1px solid var(--soft);
  border-radius: 3px;
  pointer-events: none;
  white-space: nowrap;
}
.dev-tag {
  top: 4px;
  left: 4px;
  font-size: 9px;
  color: var(--mid);
  padding: 2px 5px;
  letter-spacing: .01em;
  opacity: .85;
}

/* ── Code chips: auto-generated by code-view.js next to nav
   links, buttons, headings, etc. — shows the real tag/attribute
   for that element, positioned relative to it. ── */
.code-chip {
  font-size: 9px;
  padding: 1px 4px;
  opacity: .8;
  max-width: 230px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity .15s;
}
.code-chip .p  { color: var(--code-punct); }
.code-chip .tg { color: var(--code-tag); }
.code-chip .at { color: var(--code-attr); }
.code-chip .sv { color: var(--code-string); }

.code-chip--below     { top: 100%; left: 0; margin-top: 3px; }
.code-chip--above     { bottom: 100%; left: 0; margin-bottom: 3px; }
.code-chip--above-end { bottom: 100%; right: 0; margin-bottom: 3px; }
.code-chip--right     { left: 100%; top: 0; margin-left: 6px; }
.code-chip--corner    { top: 3px; right: 3px; }

/* Elements that sit close together (nav links, filter buttons) would
   have their always-on chips overlap into an unreadable jumble, so
   those reveal on hover instead — showing the exact markup (including
   the real onclick handler) as you interact, which reads as "reactive"
   rather than as clutter. */
.code-chip--peek { opacity: 0; left: 50%; transform: translateX(-50%); }
[data-annotated]:hover > .code-chip--peek { opacity: 1; }

/* dev-tools-style hover highlight on any annotated element */
[data-annotated] { outline: 1px solid transparent; outline-offset: 2px; transition: outline-color .15s; }
[data-annotated]:hover { outline-color: var(--code-tag); }
[data-annotated]:hover > .code-chip { opacity: 1; border-color: var(--code-tag); }

/* ── Named identifiers (brand / titles) — "type name" gold ── */
.nav-logo a,
.hero-label strong {
  color: var(--code-entity);
}

/* ── Comment-style secondary text — kept rare, like a real editor ── */
.nav-logo a::before,
.footer-copy {
  color: var(--mid);
  font-style: italic;
}

/* ── Plain labels — default editor foreground, not a comment ── */
.hero-label span,
.hero-year,
.hero-details span,
.topnav ul::after {
  color: var(--black);
  font-style: normal;
}

/* ── Nav links / filter buttons read as tags ── */
.nav-links a { color: var(--code-tag); }
.nav-links a::after { background: var(--code-tag); }

body:has(#heroWrapper) .btn {
  color: var(--code-tag);
  border-color: var(--soft);
}
body:has(#heroWrapper) .btn:hover,
body:has(#heroWrapper) .btn.active {
  background: var(--code-tag);
  color: #04110a;
  border-color: var(--code-tag);
}

/* ── Work tile titles read as string literals; years as numbers ── */
.tile-meta h2 { color: var(--code-string); }
.tile-meta span { color: var(--code-number) !important; font-style: normal !important; }
body:has(#heroWrapper) .tile-meta::before { color: var(--code-punct); }

/* ── Signature / CTA accents ── */
svg.squiggle path { stroke: var(--code-accent); }
#revealBtn, .hero-scroll { color: var(--code-keyword); }
.footer-links a svg { fill: var(--code-accent); }

/* ── Image objects: no raster loads — show the element as code ── */
.tile-img-wrap {
  aspect-ratio: 4 / 3;           /* consistent placeholder box; real images are never fetched */
  border: 1px dashed var(--soft);
  background: var(--surface);
}
.tile-img-wrap--featured { aspect-ratio: 16 / 7; }

.tile-img-wrap .ghost-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;               /* dimensions only — pixels are never rendered */
  pointer-events: none;
}

.code-peek {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: .7rem .8rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .15rem;
  font-family: var(--font);
  font-size: clamp(.58rem, 1.05vw, .76rem);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-all;
  overflow: hidden;
  pointer-events: none;
  color: var(--black);
}
.code-peek .tag    { color: var(--code-tag); }
.code-peek .attr   { color: var(--code-attr); }
.code-peek .str    { color: var(--code-string); }
.code-peek .punct  { color: var(--code-punct); }

/* subtle hover feedback, echoes the original tile hover interaction */
.tile-link:hover .tile-img-wrap { border-color: var(--code-tag); }