/* ================================================================
   m3.css — the Material Design 3 theme for index.html.

   Toggled at runtime via #m3-toggle (see site.js); ships disabled.
   Implements the M3 baseline *dark* color scheme with the real
   design tokens from the spec — color roles (--md-sys-color-*),
   the type scale, the shape scale and the five surface-container
   elevation tints — and then maps the site's components onto M3
   patterns: the nav becomes a top app bar with an active-pill
   indicator, .btn-fill/.btn-ghost become filled/outlined buttons,
   skills and projects become filled/elevated cards, popups become
   M3 dialogs (28dp corners) and tags become assist chips.

   Like xp.css, the base stylesheet loads first; overrides lean on
   the shared custom properties and use !important only where the
   base rule is more specific.
================================================================ */

/* ----------------------------------------------------------------
   M3 design tokens — baseline dark scheme (source: m3.material.io).
---------------------------------------------------------------- */
:root {
  --md-sys-color-primary: #d0bcff;
  --md-sys-color-on-primary: #381e72;
  --md-sys-color-primary-container: #4f378b;
  --md-sys-color-on-primary-container: #eaddff;
  --md-sys-color-secondary: #ccc2dc;
  --md-sys-color-on-secondary: #332d41;
  --md-sys-color-secondary-container: #4a4458;
  --md-sys-color-on-secondary-container: #e8def8;
  --md-sys-color-tertiary: #efb8c8;
  --md-sys-color-on-tertiary: #492532;
  --md-sys-color-tertiary-container: #633b48;
  --md-sys-color-on-tertiary-container: #ffd8e4;
  --md-sys-color-error: #f2b8b5;
  --md-sys-color-on-error: #601410;
  --md-sys-color-surface: #141218;
  --md-sys-color-on-surface: #e6e0e9;
  --md-sys-color-surface-variant: #49454f;
  --md-sys-color-on-surface-variant: #cac4d0;
  --md-sys-color-surface-container-lowest: #0f0d13;
  --md-sys-color-surface-container-low: #1d1b20;
  --md-sys-color-surface-container: #211f26;
  --md-sys-color-surface-container-high: #2b2930;
  --md-sys-color-surface-container-highest: #36343b;
  --md-sys-color-outline: #938f99;
  --md-sys-color-outline-variant: #49454f;
  --md-sys-color-inverse-surface: #e6e0e9;
  --md-sys-color-inverse-on-surface: #322f35;
  --md-sys-color-inverse-primary: #6750a4;

  /* Shape scale */
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 999px;

  /* Elevation (dark theme uses shadows + surface tint containers) */
  --md-sys-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-2: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-3: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);

  /* State layers (hover 8%, focus/press 12% of the content color) */
  --md-state-hover-on-surface: rgba(230, 224, 233, 0.08);
  --md-state-hover-primary: rgba(208, 188, 255, 0.08);
  --md-state-press-primary: rgba(208, 188, 255, 0.12);

  /* Map the site's own properties onto the M3 roles. */
  --bg: var(--md-sys-color-surface);
  --bg2: var(--md-sys-color-surface-container-low);
  --bg3: var(--md-sys-color-surface-container);
  --border: var(--md-sys-color-outline-variant);
  --border2: var(--md-sys-color-outline);
  --text: var(--md-sys-color-on-surface);
  --muted: var(--md-sys-color-on-surface-variant);
  --accent: var(--md-sys-color-primary);
  --radius: var(--md-sys-shape-corner-medium);
  --glass: var(--md-sys-color-surface-container);
  --glass-strong: var(--md-sys-color-surface-container-high);
  --glass-border: transparent;
  --glass-blur: none;
  /* M3's reference typeface, falling back to whatever the system
     provides — nothing is fetched from a CDN for this theme. */
  --mono: Roboto, system-ui, sans-serif;
  --display: Roboto, system-ui, sans-serif;
}

/* ----------------------------------------------------------------
   Ground — plain surface, no dot texture, no reactive canvas,
   system pointer. M3 surfaces carry the design, not effects.
---------------------------------------------------------------- */
body {
  background: var(--md-sys-color-surface) !important;
  cursor: default !important;
}

body::after {
  content: none !important;
}

#bg-field,
.cursor,
.cursor-dot {
  display: none !important;
}

body.custom-cursor a,
body.custom-cursor button,
body.custom-cursor .btn {
  cursor: pointer !important;
}

::selection {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--md-sys-color-primary) !important;
  outline-offset: 2px;
  border-radius: var(--md-sys-shape-corner-extra-small);
}

/* ----------------------------------------------------------------
   Top app bar — the nav on a surface-container, with the active
   page shown as an M3 navigation pill (secondary container).
---------------------------------------------------------------- */
nav {
  background: var(--md-sys-color-surface-container) !important;
  border-bottom: none !important;
  box-shadow: var(--md-sys-elevation-2) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.nav-logo {
  color: var(--md-sys-color-on-surface) !important;
  text-transform: none;
  font-size: 22px; /* title-large */
  font-weight: 400;
  letter-spacing: 0;
}

.nav-links a {
  color: var(--md-sys-color-on-surface-variant) !important;
  text-transform: none;
  font-size: 14px; /* label-large */
  font-weight: 500;
  letter-spacing: 0.1px;
  padding: 8px 16px;
  border-radius: var(--md-sys-shape-corner-full);
  transition: background 0.15s;
}

.nav-links a:hover {
  color: var(--md-sys-color-on-surface) !important;
  background: var(--md-state-hover-on-surface);
}

.nav-links a.active {
  color: var(--md-sys-color-on-secondary-container) !important;
  background: var(--md-sys-color-secondary-container);
}

/* No glowing pings — a quiet tertiary dot is the M3 "badge". */
.nav-links a.nav-pulse {
  animation: none !important;
  color: var(--md-sys-color-on-surface-variant) !important;
}
.nav-links a.nav-pulse::after {
  content: "" !important;
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--md-sys-color-tertiary);
  border: none !important;
  animation: none !important;
  opacity: 1 !important;
}

nav .nav-links .nav-gh {
  color: var(--md-sys-color-primary) !important;
  border: 1px solid var(--md-sys-color-outline) !important;
  border-radius: var(--md-sys-shape-corner-full) !important;
  background: none !important;
}

nav .nav-links .nav-gh:hover {
  background: var(--md-state-hover-primary) !important;
}

.nav-menu {
  background: none !important;
  border: none !important;
  color: var(--md-sys-color-on-surface-variant) !important;
  border-radius: var(--md-sys-shape-corner-full) !important;
}

.nav-menu:hover {
  background: var(--md-state-hover-on-surface) !important;
}

/* ----------------------------------------------------------------
   Hero — display type: regular weight, sentence case, primary
   accent. M3 display styles are 400, never uppercase.
---------------------------------------------------------------- */
.page-home h1 {
  font-size: clamp(2.6rem, 6.5vw, 3.5625rem); /* display-large: 57px */
  font-weight: 400;
  line-height: 1.12; /* 64/57 */
  letter-spacing: -0.25px;
  text-transform: none;
  color: var(--md-sys-color-on-surface);
}

.page-home h1 .dim {
  color: var(--md-sys-color-on-surface-variant) !important;
  -webkit-text-stroke: 0 !important;
  font-weight: 400;
}

.page-home h1 .hi {
  color: var(--md-sys-color-primary) !important;
}

.hero-quote {
  color: var(--md-sys-color-on-surface-variant) !important;
}

.hero-body {
  font-size: 16px; /* body-large */
  line-height: 1.5;
  letter-spacing: 0.5px;
  color: var(--md-sys-color-on-surface-variant) !important;
}

.hero-body strong {
  color: var(--md-sys-color-on-surface) !important;
  font-weight: 500;
}

/* ----------------------------------------------------------------
   Buttons — 40dp height, full-round, label-large. .btn-fill is a
   filled button, .btn-ghost an outlined one; hovers add the spec'd
   state layer, filled buttons additionally gain elevation-1.
---------------------------------------------------------------- */
.btn,
.popup-btn {
  height: 40px;
  padding: 0 24px !important;
  border-radius: var(--md-sys-shape-corner-full) !important;
  font-size: 14px !important; /* label-large */
  font-weight: 500 !important;
  letter-spacing: 0.1px !important;
  text-transform: none !important;
  transition: box-shadow 0.15s, background 0.15s !important;
}

.btn-fill {
  background: var(--md-sys-color-primary) !important;
  color: var(--md-sys-color-on-primary) !important;
  border: none !important;
}

.btn-fill:hover {
  background: var(--md-sys-color-primary) !important;
  box-shadow: var(--md-sys-elevation-1) !important;
  filter: brightness(1.06);
}

.btn-ghost {
  background: none !important;
  color: var(--md-sys-color-primary) !important;
  border: 1px solid var(--md-sys-color-outline) !important;
}

.btn-ghost:hover {
  color: var(--md-sys-color-primary) !important;
  border-color: var(--md-sys-color-outline) !important;
  background: var(--md-state-hover-primary) !important;
}

.btn-ghost.is-active {
  background: var(--md-sys-color-secondary-container) !important;
  color: var(--md-sys-color-on-secondary-container) !important;
  border-color: transparent !important;
}

/* ----------------------------------------------------------------
   Marquee — a quiet surface band.
---------------------------------------------------------------- */
.marquee {
  background: var(--md-sys-color-surface-container-low) !important;
  border-top: none !important;
  border-bottom: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.marquee-item {
  color: var(--md-sys-color-on-surface-variant) !important;
}

/* ----------------------------------------------------------------
   Sections — headline type; the section number becomes a small
   primary label, as in an M3 list header.
---------------------------------------------------------------- */
.sec-head h2 {
  font-size: 32px; /* headline-large */
  font-weight: 400;
  line-height: 1.25; /* 40/32 */
  letter-spacing: 0;
  text-transform: none;
  color: var(--md-sys-color-on-surface) !important;
}

.sec-num {
  color: var(--md-sys-color-primary) !important;
  font-size: 12px; /* label-medium */
  font-weight: 500;
  letter-spacing: 0.5px;
}

.sec-num::before,
.sec-num::after {
  color: var(--md-sys-color-outline) !important;
}

/* ----------------------------------------------------------------
   About — the info list becomes a filled card (surface-container,
   12dp corners, no outline), rows divided by outline-variant.
---------------------------------------------------------------- */
.about-text,
.about-text p {
  font-size: 16px;
  letter-spacing: 0.5px;
  color: var(--md-sys-color-on-surface-variant) !important;
}

.about-text b {
  color: var(--md-sys-color-on-surface) !important;
  font-weight: 500;
}

.about-text a,
.info-row a {
  color: var(--md-sys-color-primary) !important;
}

.info-list {
  background: var(--md-sys-color-surface-container) !important;
  border: none !important;
  border-radius: var(--md-sys-shape-corner-medium) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.info-row {
  border-color: var(--md-sys-color-outline-variant) !important;
}

.info-row .k {
  color: var(--md-sys-color-on-surface-variant) !important;
  text-transform: none;
  letter-spacing: 0.5px;
}

.info-row .v {
  color: var(--md-sys-color-on-surface) !important;
}

.info-row .v.on {
  color: var(--md-sys-color-tertiary) !important;
}

.info-row .blink {
  background: var(--md-sys-color-tertiary) !important;
}

/* ----------------------------------------------------------------
   Skills & projects — filled cards and elevated cards. Hover adds
   the state layer / raises elevation, per the interactive-card
   pattern.
---------------------------------------------------------------- */
.skills-grid,
.project-list {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.skill {
  background: var(--md-sys-color-surface-container-highest) !important;
  border: none !important;
  border-radius: var(--md-sys-shape-corner-medium) !important;
  box-shadow: none !important;
}

.skill:hover {
  background: var(--md-sys-color-surface-container-highest) !important;
  box-shadow: var(--md-sys-elevation-1) !important;
  transform: none !important;
}

.project {
  background: var(--md-sys-color-surface-container-low) !important;
  border: none !important;
  border-radius: var(--md-sys-shape-corner-medium) !important;
  box-shadow: var(--md-sys-elevation-1) !important;
  transition: box-shadow 0.15s, background 0.15s !important;
}

.project:hover {
  background: var(--md-sys-color-surface-container) !important;
  box-shadow: var(--md-sys-elevation-2) !important;
  transform: none !important;
}

.skill-name,
.project-name {
  font-size: 22px; /* title-large */
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none !important;
  color: var(--md-sys-color-on-surface) !important;
}

.project:hover .project-name {
  color: var(--md-sys-color-primary) !important;
}

.skill-tags,
.project-desc {
  font-size: 14px; /* body-medium */
  line-height: 1.45;
  letter-spacing: 0.25px;
  color: var(--md-sys-color-on-surface-variant) !important;
}

/* Tags become assist chips: 8dp corners, outline, label-large. */
.project-tag {
  background: none !important;
  border: 1px solid var(--md-sys-color-outline) !important;
  border-radius: var(--md-sys-shape-corner-small) !important;
  color: var(--md-sys-color-on-surface-variant) !important;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: none !important;
  padding: 6px 12px !important;
}

.project:hover .project-tag {
  color: var(--md-sys-color-on-surface-variant) !important;
  border-color: var(--md-sys-color-outline) !important;
}

/* ----------------------------------------------------------------
   Footer — a surface-container bar; the theme toggles render as
   M3 buttons: the active theme filled-tonal, the other outlined.
---------------------------------------------------------------- */
footer {
  background: var(--md-sys-color-surface-container) !important;
  border-top: none !important;
}

footer span {
  color: var(--md-sys-color-on-surface-variant) !important;
}

footer a {
  color: var(--md-sys-color-primary) !important;
  text-transform: none;
}

footer a:hover {
  color: var(--md-sys-color-primary) !important;
  text-decoration: underline;
}

.xp-toggle-btn,
.m3-toggle-btn {
  font-family: var(--mono) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1px !important;
  text-transform: none !important;
  padding: 9px 20px !important;
  border-radius: var(--md-sys-shape-corner-full) !important;
  cursor: pointer !important;
  color: var(--md-sys-color-primary) !important;
  background: none !important;
  border: 1px solid var(--md-sys-color-outline) !important;
}

.xp-toggle-btn:hover,
.m3-toggle-btn:hover {
  color: var(--md-sys-color-primary) !important;
  border-color: var(--md-sys-color-outline) !important;
  background: var(--md-state-hover-primary) !important;
}

/* The M3 toggle is the active one here — filled tonal. */
.m3-toggle-btn {
  background: var(--md-sys-color-secondary-container) !important;
  color: var(--md-sys-color-on-secondary-container) !important;
  border-color: transparent !important;
}

.m3-toggle-btn:hover {
  background: var(--md-sys-color-secondary-container) !important;
  color: var(--md-sys-color-on-secondary-container) !important;
  box-shadow: var(--md-sys-elevation-1) !important;
}

/* ----------------------------------------------------------------
   Popups — M3 dialogs: surface-container-high, 28dp corners,
   text buttons for actions, headline-small title.
---------------------------------------------------------------- */
.popup-overlay {
  background: rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.popup-content {
  background: var(--md-sys-color-surface-container-high) !important;
  border: none !important;
  border-radius: var(--md-sys-shape-corner-extra-large) !important;
  box-shadow: var(--md-sys-elevation-3) !important;
}

.popup-content h2 {
  font-size: 24px; /* headline-small */
  font-weight: 400;
  text-transform: none !important;
  color: var(--md-sys-color-on-surface) !important;
}

.popup-desc,
.popup-disclaimer {
  color: var(--md-sys-color-on-surface-variant) !important;
}

.popup-btn {
  background: none !important;
  border: none !important;
  color: var(--md-sys-color-primary) !important;
}

.popup-btn:hover {
  background: var(--md-state-hover-primary) !important;
}

.popup-close {
  background: none !important;
  border: none !important;
  border-radius: var(--md-sys-shape-corner-full) !important;
  color: var(--md-sys-color-on-surface-variant) !important;
}

.popup-close:hover {
  background: var(--md-state-hover-on-surface) !important;
}

/* ----------------------------------------------------------------
   Terminal — framed as an M3 large-corner container, but the
   client area stays a real terminal (self-hosted mono font).
---------------------------------------------------------------- */
.terminal {
  background: var(--md-sys-color-surface-container-high) !important;
  border: none !important;
  border-radius: var(--md-sys-shape-corner-extra-large) !important;
  box-shadow: var(--md-sys-elevation-3) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: hidden;
}

.terminal-header {
  background: var(--md-sys-color-surface-container-highest) !important;
  border-bottom: 1px solid var(--md-sys-color-outline-variant) !important;
  color: var(--md-sys-color-on-surface) !important;
}

.terminal-close {
  background: none !important;
  border: 1px solid var(--md-sys-color-outline) !important;
  border-radius: var(--md-sys-shape-corner-full) !important;
  color: var(--md-sys-color-primary) !important;
}

.terminal-body,
.terminal-line,
.terminal-input,
.terminal-prompt {
  font-family: "JetBrains Mono", monospace !important;
}

.terminal-body {
  color: var(--md-sys-color-on-surface-variant) !important;
}

.terminal-line strong {
  color: var(--md-sys-color-primary) !important;
}

.terminal-prompt,
.terminal-input {
  color: var(--md-sys-color-primary) !important;
}

/* ----------------------------------------------------------------
   Hit counter — neutral, no accent frame.
---------------------------------------------------------------- */
.hit-counter img {
  border-radius: var(--md-sys-shape-corner-small);
}