/*
 * Base — premium tech-editorial v1.2.0
 *
 * Reset + body + typography defaults + utilities.
 * 17px body. Source Serif 4 Variable headings with optical sizing.
 * Inter Variable body. JetBrains Mono Variable for numbers + dates.
 */

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--dm-paper);
  color: var(--dm-ink-soft);
  font-family: var(--dm-sans);
  font-size: var(--dm-fs-body);
  line-height: var(--dm-lh-prose);
  font-feature-settings: 'cv11' 1, 'ss01' 1; /* Inter humanist alts */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Variable font weight + optical sizing where supported */
@supports (font-variation-settings: normal) {
  body { font-variation-settings: 'wght' 425; }
  h1, h2, h3, h4 { font-optical-sizing: auto; }
}

/* Typography defaults */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--dm-serif);
  font-weight: 540;
  line-height: var(--dm-lh-display);
  color: var(--dm-ink);
  margin: 0 0 var(--dm-s2);
  text-wrap: balance;
}

h1 {
  font-size: var(--dm-fs-h1);
  font-weight: 580;
  letter-spacing: var(--dm-ls-display);
  font-variation-settings: 'wght' 580, 'opsz' 36;
}
h2 {
  font-size: var(--dm-fs-h2);
  font-weight: 540;
  letter-spacing: var(--dm-ls-tight);
  font-variation-settings: 'wght' 540, 'opsz' 26;
}
h3 {
  font-size: var(--dm-fs-h3);
  font-weight: 540;
  font-variation-settings: 'wght' 540, 'opsz' 20;
}
h4 {
  font-family: var(--dm-sans);
  font-size: var(--dm-fs-h4);
  font-weight: 600;
  letter-spacing: 0;
}

p {
  margin: 0 0 var(--dm-s3);
  text-wrap: pretty;
}

a {
  color: var(--dm-indigo);
  text-decoration: none;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dm-dur-fast) var(--dm-ease-out);
}
a:hover {
  color: var(--dm-indigo-deep);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--dm-indigo) 60%, transparent);
}
/* Prose links inside articles get underline by default */
.dm-article-body a,
.dm-prose a {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--dm-indigo) 35%, transparent);
}

img { max-width: 100%; height: auto; display: block; }
button, input, textarea, select {
  font: inherit;
  color: inherit;
}

/* Skip link */
.dm-skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--dm-ink); color: #fff;
  padding: var(--dm-s1) var(--dm-s2);
  z-index: 9999;
  border-radius: 0 0 var(--dm-r-sm) 0;
}
.dm-skip-link:focus { left: 0; outline: 2px solid var(--dm-mint); }

/* Focus styling — premium 2px ring with offset */
:focus-visible {
  outline: 2px solid var(--dm-indigo);
  outline-offset: 2px;
  border-radius: 2px;
}
button:focus-visible,
.dm-btn:focus-visible {
  outline-offset: 3px;
}

/* Eyebrow labels — small caps tracking */
.dm-eyebrow,
.eyebrow {
  font-family: var(--dm-sans);
  font-size: var(--dm-fs-micro);
  letter-spacing: var(--dm-ls-widest);
  color: var(--dm-slate);
  font-weight: 500;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: var(--dm-s1);
}
.dm-eyebrow-small {
  font-family: var(--dm-sans);
  font-size: var(--dm-fs-micro);
  letter-spacing: var(--dm-ls-wide);
  color: var(--dm-slate);
  font-weight: 500;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* === Premium utility classes === */

/* Mono numbers — for prices, dates, ratings, stats. Tabular alignment. */
.mono-numbers,
.dm-mono {
  font-family: var(--dm-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'zero' 1;
  letter-spacing: -0.005em;
}

/* TEM brand mark — small monospace identity stamp */
.dm-tem-mark {
  font-family: var(--dm-mono);
  font-size: var(--dm-fs-micro);
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--dm-slate);
  text-transform: uppercase;
}
.dm-tem-mark-strong {
  color: var(--dm-ink);
}

/* Hairline divider */
.dm-hairline,
hr.dm-hairline {
  border: 0;
  border-top: var(--dm-border-hairline);
  margin: var(--dm-s4) 0;
}

/* Selection styling */
::selection {
  background: color-mix(in srgb, var(--dm-indigo) 18%, transparent);
  color: var(--dm-ink);
}

/* Scrollbar polish (WebKit + Firefox) */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--dm-slate-soft) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--dm-slate-soft);
  border-radius: var(--dm-r-pill);
  border: 2px solid var(--dm-paper);
}
*::-webkit-scrollbar-thumb:hover { background: var(--dm-slate); }

/* Reading progress bar — sits at top of viewport on article pages */
.dm-reading-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--dm-hairline-soft);
  z-index: var(--dm-z-progress);
  transform-origin: 0 50%;
  pointer-events: none;
}
.dm-reading-progress::before {
  content: '';
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--dm-indigo), color-mix(in srgb, var(--dm-indigo) 70%, var(--dm-mint)));
  transform: scaleX(0);
  transform-origin: 0 50%;
}
@supports (animation-timeline: scroll()) {
  .dm-reading-progress::before {
    animation: dm-fill-progress linear;
    animation-timeline: scroll(root);
  }
  @keyframes dm-fill-progress {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }
}

/* Custom selection style for code-like UI captions */
code, kbd, pre, samp {
  font-family: var(--dm-mono);
  font-size: 0.92em;
}
code {
  background: var(--dm-paper-deep);
  padding: 2px 6px;
  border-radius: var(--dm-r-xs);
  border: var(--dm-border-soft);
}

/* Visually hidden helper */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Live dot — pulsing indicator used in Live Testing Log + status badges */
.dm-live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dm-mint);
  position: relative;
  vertical-align: middle;
}
.dm-live-dot::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: var(--dm-mint);
  opacity: 0.4;
  animation: dm-pulse 1.6s var(--dm-ease-in-out) infinite;
}
@keyframes dm-pulse {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50%      { transform: scale(2); opacity: 0; }
}