/* The surge site, in the fx-blog house style: the sdlc `sakura`
 * preset, which is what fxblog.dev itself serves — rounded display
 * type over Zen Kaku Gothic New, a rose primary, a plum ground in dark
 * and a blush paper in light, 16-20px corners and almost no shadow.
 *
 * It used to be the `editorial` preset: serif headings, coral, 2px
 * corners. The two sites sit on one domain and a reader crosses
 * between them, so they now render from the same preset rather than
 * from two that merely rhymed.
 *
 * Every colour and size here is a token from tokens.css; nothing is a
 * literal, so re-rendering the preset restyles both sites. Re-render
 * with sdlc's dev/scripts/design-system.mjs from the preset json in
 * fx-blog/.sdlc/docs/skins/ — not by editing tokens.css. */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; }
h1 { font-size: var(--type-h1-size); line-height: var(--type-h1-line); font-weight: var(--type-h1-weight); letter-spacing: var(--type-h1-tracking); }
h2 { font-size: var(--type-h2-size); line-height: var(--type-h2-line); font-weight: var(--type-h2-weight); letter-spacing: var(--type-h2-tracking); }
h3 { font-size: var(--type-h3-size); line-height: var(--type-h3-line); font-weight: var(--type-h3-weight); }

a { color: var(--color-primary); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--color-primary-hover); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-sm); }

code, pre, kbd { font-family: var(--font-mono); }
code { font-size: 0.9em; background: var(--color-surface-2); padding: 0.12em 0.36em; border-radius: var(--radius-sm); }
pre { margin: 0; overflow-x: auto; }
pre code { background: none; padding: 0; font-size: var(--text-sm); line-height: 1.6; }

img, svg { max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-7) 0; }

/* --- shell ------------------------------------------------------- */

.wrap { width: 100%; max-width: 1140px; margin: 0 inline; margin-inline: auto; padding-inline: var(--space-5); }

.topbar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--color-border);
}
.topbar .wrap { display: flex; align-items: center; gap: var(--space-5); height: 64px; }
.brand { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); color: var(--color-text); text-decoration: none; }
.brand svg, .brand img { width: 28px; height: 28px; display: block; }
.brand span { letter-spacing: -0.01em; }
nav.top { margin-left: auto; display: flex; align-items: center; gap: var(--space-5); }
nav.top a { color: var(--color-text-muted); text-decoration: none; font-size: var(--text-sm); font-weight: var(--weight-medium); }
nav.top a:hover, nav.top a[aria-current] { color: var(--color-text); }
.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border: 1px solid var(--color-border);
  background: var(--color-surface); color: var(--color-text-muted);
  border-radius: var(--radius-md); cursor: pointer;
}
.iconbtn:hover { color: var(--color-text); border-color: var(--color-border-strong); }

/* --- buttons ----------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--control-height-md); padding-inline: var(--space-5);
  border-radius: var(--radius-md); border: 1px solid transparent;
  font-weight: var(--weight-semibold); font-size: var(--text-sm);
  text-decoration: none; cursor: pointer;
  transition: background var(--motion-fast) var(--motion-easing), border-color var(--motion-fast) var(--motion-easing);
}
.btn-primary { background: var(--color-primary); color: var(--color-primary-fg); }
.btn-primary:hover { background: var(--color-primary-hover); color: var(--color-primary-fg); }
.btn-ghost { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); }
.btn-ghost:hover { border-color: var(--color-border-strong); color: var(--color-text); }

/* --- hero -------------------------------------------------------- */

.hero { padding-block: var(--space-8); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--space-7); align-items: center; }
.hero h1 { font-size: var(--type-display-size); line-height: var(--type-display-line); letter-spacing: var(--type-display-tracking); font-weight: var(--type-display-weight); }
.hero .lede { font-size: var(--text-lg); line-height: 1.55; color: var(--color-text-muted); margin-top: var(--space-5); max-width: 36ch; }
.hero .cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-primary);
  background: var(--color-tint-info); border: 1px solid var(--color-border);
  border-radius: var(--radius-full); padding: var(--space-1) var(--space-3);
}

.install {
  display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-5);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono); font-size: var(--text-sm);
}
.install span { color: var(--color-text-muted); user-select: none; }
.install code { background: none; padding: 0; flex: 1; overflow-x: auto; white-space: nowrap; font-size: var(--text-xs); }
.install .copy { flex: none; width: 28px; height: 28px; }

/* --- terminal / code panels -------------------------------------- */

.panel {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.panel > header {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-2);
  font-size: var(--text-xs); color: var(--color-text-muted);
  font-family: var(--font-mono);
}
.panel .dots { display: flex; gap: 6px; margin-right: var(--space-2); }
.panel .dots i { width: 9px; height: 9px; border-radius: var(--radius-full); background: var(--color-border-strong); opacity: 0.5; }
.panel pre { padding: var(--space-4); font-size: var(--text-xs); line-height: 1.55; }

/* --- sections ---------------------------------------------------- */

section { padding-block: var(--space-8); }
section.alt { background: var(--color-surface); border-block: 1px solid var(--color-border); }
.section-head { max-width: 62ch; margin-bottom: var(--space-7); }
.section-head p { color: var(--color-text-muted); margin-top: var(--space-3); }

.grid { display: grid; gap: var(--space-5); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-5);
}
section.alt .card { background: var(--color-bg); }
.card h3 { font-size: var(--text-lg); font-family: var(--font-display); }
.card p { color: var(--color-text-muted); margin: var(--space-3) 0 0; font-size: var(--text-sm); line-height: 1.6; }
.card .mark { width: 28px; height: 28px; color: var(--color-primary); margin-bottom: var(--space-4); }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-8); align-items: start; }
.lead-list { list-style: none; padding: 0; margin: var(--space-5) 0 0; display: grid; gap: var(--space-4); }
.lead-list li { padding-left: var(--space-6); position: relative; color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.6; }
.lead-list li strong { color: var(--color-text); display: block; font-size: var(--text-md); font-weight: var(--weight-semibold); margin-bottom: 2px; }
.lead-list li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 10px; height: 10px; border-radius: var(--radius-full);
  background: var(--color-primary);
}

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
.stat { border-left: 3px solid var(--color-primary); padding-left: var(--space-4); }
.stat b { display: block; font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.1; }
.stat span { color: var(--color-text-muted); font-size: var(--text-sm); }

.tabs { display: flex; gap: var(--space-1); margin-bottom: var(--space-4); flex-wrap: wrap; }
.tabs button {
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text-muted); font: inherit; font-size: var(--text-sm);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); cursor: pointer;
}
.tabs button[aria-selected="true"] { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-fg); font-weight: var(--weight-semibold); }
.tabpanel[hidden] { display: none; }

.verdict {
  display: grid; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-sm);
  background: var(--color-surface-2); border-left: 3px solid var(--color-danger);
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-sm);
}
.verdict b { color: var(--color-danger); }

footer.site { border-top: 1px solid var(--color-border); padding-block: var(--space-7); margin-top: var(--space-8); color: var(--color-text-muted); font-size: var(--text-sm); }
footer.site .wrap { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center; }
footer.site nav { margin-left: auto; display: flex; gap: var(--space-5); flex-wrap: wrap; }
footer.site a { color: var(--color-text-muted); text-decoration: none; }
footer.site a:hover { color: var(--color-text); }

@media (max-width: 920px) {
  .hero .wrap, .split { grid-template-columns: minmax(0, 1fr); }
  .grid-3, .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero h1 { font-size: var(--type-h1-size); }
  nav.top .hide-sm { display: none; }
}

/* ---- report screenshots -------------------------------------------
   Three views of one real run, moving left to right. Both themes are
   in the page and CSS picks one: the site has a manual light/dark
   button, so prefers-color-scheme alone would show the wrong shot to
   anyone who had used it. The light pair is the default because the
   document starts as data-theme="light" before the boot script runs. */
/* Qualified with .shots-slide because the rule below that sets every
   image in a slide to display:block is more specific than a bare
   .only-dark, and won it: the light theme drew both shots, stacked. */
.shots-slide img.only-dark { display: none; }
[data-theme="dark"] .shots-slide img.only-dark { display: block; }
[data-theme="dark"] .shots-slide img.only-light { display: none; }

.shots { margin: var(--space-7) 0 var(--space-7); }

.shots-frame {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.shots-track {
  display: flex;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.shots-slide {
  flex: 0 0 100%;
  min-width: 0;
}

.shots-slide img {
  display: block;
  width: 100%;
  height: auto;
}

.shots-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-4);
}

.shots-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.shots-tabs button {
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 0.35rem 0.9rem;
  cursor: pointer;
}

.shots-tabs button:hover {
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

.shots-tabs button[aria-pressed="true"] {
  color: var(--color-primary-fg);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.shots-tabs button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.shots-note {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* The strip still moves between views on a click; it just does not
   move on its own, and it does not slide while it does. */
@media (prefers-reduced-motion: reduce) {
  .shots-track { transition: none; }
}