/* ============================================================
   Instrument — site-wide SKIN (loads AFTER style.css)
   Keeps style.css layout/responsive/dark/flatpickr intact and
   overlays the new identity: self-hosted premium fonts, a warm
   calm palette, and monospaced numerals/labels.
   Per-page --accent (set in each page's <style>) is preserved.
   ============================================================ */

/* ---- self-hosted variable fonts (latin subset, under images/ to deploy) ---- */
@font-face{ font-family:'Space Grotesk'; font-style:normal; font-weight:500 700; font-display:swap; src:url(images/fonts/spacegrotesk.woff2) format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap; src:url(images/fonts/inter.woff2) format('woff2'); }
@font-face{ font-family:'JetBrains Mono'; font-style:normal; font-weight:500 700; font-display:swap; src:url(images/fonts/jetbrainsmono.woff2) format('woff2'); }

:root{
  --font-display:"Space Grotesk",system-ui,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;

  /* palette override (same variable names as style.css so every component recolors) */
  --surface-bg-start:#f6f5f1; --surface-bg-end:#f1efe9;
  --surface-card:#ffffff; --surface-muted:#faf9f5;
  --border-subtle:#eae8e0; --border-default:#dcdacf;
  --text-strong:#14141a; --text-default:#33333b; --text-muted:#5c5c66; --text-soft:#8a8a92;
}
html[data-theme="dark"]{
  --surface-bg-start:#0b0b0e; --surface-bg-end:#09090c;
  --surface-card:#141419; --surface-muted:#17171d;
  --border-subtle:#22222a; --border-default:#2e2e37;
  --text-strong:#f3f3f6; --text-default:#d2d2d8; --text-muted:#a6a6b0; --text-soft:#7a7a85;
}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]){
    --surface-bg-start:#0b0b0e; --surface-bg-end:#09090c;
    --surface-card:#141419; --surface-muted:#17171d;
    --border-subtle:#22222a; --border-default:#2e2e37;
    --text-strong:#f3f3f6; --text-default:#d2d2d8; --text-muted:#a6a6b0; --text-soft:#7a7a85;
  }
}

/* ---- typography ---- */
body{ font-family:var(--font-body); }

h1, h2, h3, h4,
.calc-card-title, .calc-hub-subtitle,
.result-main, .result-date, .result-symbol, .event-name-display{
  font-family:var(--font-display);
  letter-spacing:-0.5px;
}
h1{ letter-spacing:-2px; }
.result-main{ letter-spacing:-1.5px; }

/* numerals → monospaced, tabular (data-instrument feel) */
.result-item-number, .detail-number, .dc-n, .yc-n,
.live-timer, .countdown-display .result-main, #daysCount{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.5px;
}

/* small uppercase labels → monospaced
   (NOT .nav-cat — mono widened the category chips enough to collide with the
   top-right theme toggle on mobile; keep them in the body font) */
.category-kicker, .pill, .breadcrumb,
.result-item-label, .detail-label, .live-timer-label, .next-label, .updated{
  font-family:var(--font-mono);
}

/* category chips: wrap instead of scroll-hiding the last one under the
   absolute top-right theme toggle (they're only 3, so wrapping is clean).
   They no longer scroll, so kill the scroll-fade mask that was dimming the
   left edge of the labels on mobile. (The sibling row keeps its mask.) */
.nav-categories{
  flex-wrap:wrap !important;
  overflow-x:visible !important;
  padding-right:46px;
  mask-image:none !important;
  -webkit-mask-image:none !important;
}

/* subtle Instrument polish that doesn't disturb layout */
.calc-card, .card{ box-shadow:0 1px 2px rgba(20,20,26,.03), 0 12px 30px -18px rgba(20,20,26,.18); }
html[data-theme="dark"] .calc-card, html[data-theme="dark"] .card{ box-shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 32px -18px rgba(0,0,0,.6); }

/* ============================================================
   "Full Instrument" structural push — pure CSS over existing
   markup (no HTML/JS/SEO change). Turns the plain result into an
   instrument-style readout and numbers the tool grid.
   ============================================================ */

/* answer zone: result reads as a distinct accent panel with a top rule */
.result:not(:empty){
  margin-top:20px;
  padding:28px 24px 22px;
  background:color-mix(in srgb, var(--accent) 7%, var(--surface-card));
  border:1px solid color-mix(in srgb, var(--accent) 22%, var(--border-default));
  border-top:3px solid var(--accent);
  border-radius:14px;
}

/* the hero count → oversized monospaced numerals (numbers only, not dates) */
.result-number{
  font-family:var(--font-mono);
  font-size:clamp(66px,13vw,116px);
  line-height:.92;
  letter-spacing:-4px;
  font-variant-numeric:tabular-nums;
}

/* breakdown → bordered metric grid (the instrument readout).
   Covers both result layouts: .result-details/.detail-item (home, age…)
   and .result-grid/.result-item (days-ago, date-difference…). */
.result-details, .result-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(84px, 1fr));
  gap:0 !important;
  margin-top:22px !important;
  border:1px solid var(--border-default);
  border-radius:12px;
  overflow:hidden;
  background:var(--surface-card);
}
.detail-item, .result-item{
  padding:14px 16px !important;
  margin:0 !important;
  text-align:left !important;
  background:transparent !important;
  border:0 !important;
  border-left:1px solid var(--border-default) !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.detail-item:first-child, .result-item:first-child{ border-left:0 !important; }
.detail-number, .result-item-number{ font-size:20px !important; letter-spacing:-.5px; }
.detail-label, .result-item-label{
  font-family:var(--font-mono);
  font-size:10.5px !important;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--text-soft) !important;
  margin-top:6px !important;
}

/* number the tool cards (home / 404 grids) via CSS counters — no markup change */
.calc-grid{ counter-reset:toolcard; }
.calc-card{ position:relative; }
.calc-card::after{
  counter-increment:toolcard;
  content:counter(toolcard, decimal-leading-zero);
  position:absolute; top:14px; right:16px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.5px;
  color:var(--text-soft); opacity:.65;
}

/* mobile: auto-fit keeps 3 compact columns at >=360px (no orphan for the
   common 3-metric readout). On very small screens, drop to 2 columns and let
   a lone last cell span the full width. */
@media (max-width:360px){
  .result-details, .result-grid{ grid-template-columns:repeat(2,1fr) !important; }
  .result-details > .detail-item:last-child:nth-child(odd),
  .result-grid > .result-item:last-child:nth-child(odd){ grid-column:1 / -1; border-left:0 !important; }
}