/* rushcraft.co — site styles
   Dark neutral palette with a single amber accent, matching the desktop app. */

:root {
  --bg:        #191B1E;  /* Page background */
  --surface:   #212428;  /* Cards and panels */
  --line:      #31353B;  /* Borders and dividers */
  --text:      #E2E5EA;  /* Body text */
  --text-dim:  #98A0AC;  /* Secondary text and labels */
  --accent:    #E8A33D;  /* Primary CTA, stat figures, section numbers */
  --alert:     #D9534F;  /* Warning / regression state */

  --font-body: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC",
               system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas,
               "Noto Sans TC", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.75;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
}

/* ── Layout container ─────────────────────────── */
.wrap {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 24px;
}
/* Wider container for screenshots: widest screenshot (1205px) plus 24px padding
   each side, so screenshots render at native size instead of being downsampled. */
.wrap-wide { max-width: 1253px; }

section { position: relative; padding: clamp(72px, 10vw, 128px) 0 0; }
main > section:last-child { padding-bottom: clamp(72px, 10vw, 128px); }

h1, h2, h3 { font-weight: 600; line-height: 1.3; }
h1 { font-size: 3rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.125rem; }
@media (max-width: 640px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
}

p { margin: 1em 0 0; }
a { color: var(--text); }
a:hover { color: var(--accent); transition: color 120ms; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.mono { font-family: var(--font-mono); }
.dim  { color: var(--text-dim); }

/* ── Navigation bar ───────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: 800px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 28px;
  height: 56px;
}
.nav-logo {
  font-family: var(--font-mono); font-weight: 600;
  font-size: 1rem; text-decoration: none; letter-spacing: 0.02em;
  margin-right: auto;
}
.nav a { text-decoration: none; font-size: 0.875rem; color: var(--text-dim); }
.nav a:hover { color: var(--text); }
.nav a.nav-logo { color: var(--text); }
/* Download button in the nav, shown on mobile only — on desktop the same
   destination is already one of the text links. */
.nav-dl {
  display: none;
  color: var(--accent) !important;
  border: 1px solid var(--accent);
  border-radius: 6px; padding: 4px 14px;
}
.nav-dl:hover { background: var(--accent); color: #1A1400 !important; }
@media (max-width: 640px) {
  .nav-link { display: none; }  /* Mobile nav collapses to logo + download */
  .nav-dl { display: inline-block; }
  .nav-inner { gap: 16px; }
}

/* ── Footer ───────────────────────────────────── */
footer {
  border-top: 1px solid var(--line);
  margin-top: clamp(72px, 10vw, 128px);
  padding: 40px 0 56px;
}
.foot-note { color: var(--text-dim); font-size: 0.8125rem; }
.foot-note a { color: var(--text-dim); }
.foot-links { margin-top: 16px; font-size: 0.875rem; color: var(--text-dim); }
.foot-links a { color: var(--text-dim); text-decoration: none; }
.foot-links a:hover { color: var(--text); }
.foot-sep { margin: 0 8px; color: var(--line); }

/* ── Buttons and links ────────────────────────── */
.btn-primary {
  display: inline-block;
  background: var(--accent);
  color: #1A1400;              /* Dark label: white on amber fails contrast */
  font-weight: 600; font-size: 1.125rem;
  text-decoration: none;
  padding: 12px 32px;
  border-radius: 6px;
  border: 1px solid var(--accent);
}
.btn-primary:hover { background: #F0B255; color: #1A1400; transition: background 120ms; }
.link-arrow {
  color: var(--text-dim); font-size: 1rem; text-decoration: underline;
  text-underline-offset: 4px;
}

/* ── Scroll-in reveal; only hidden when JS is available ─── */
html.js .reveal {
  opacity: 0; transform: translateY(8px);
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}
html.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Hero ─────────────────────────────────────── */
.hero-sub { color: var(--text-dim); font-size: 1.125rem; max-width: 620px; }
.hero-cta { margin-top: 40px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.hero-fine { margin-top: 16px; color: var(--text-dim); font-size: 0.875rem; }

/* ── Screenshots ──────────────────────────────────
   Never upscaled: images narrower than the container stay centred at native
   size, wider ones shrink to fit. Any resampling softens the app's small UI
   text, so the container width is derived from the screenshots themselves. */
.shot { margin-top: 48px; }
figure.shot { margin-top: 0; }
.shot img {
  display: block; margin: 0 auto;
  max-width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: 6px;
}
.shot figcaption {
  margin-top: 12px; text-align: center;
  color: var(--text-dim); font-size: 0.875rem;
}
/* Two screenshots for one scene: stacked, so neither has to shrink */
.shot-pair { display: grid; gap: 32px; }

/* ── Comparison table ─────────────────────────────
   Two-column, row-by-row contrast: dimmed left column, accented right one. */
.cmp {
  width: 100%; margin-top: 48px;
  border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
}
.cmp th {
  text-align: left; padding: 14px 20px;
  font-size: 0.875rem; font-weight: 600;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.cmp th.lhs { color: var(--text-dim); }
.cmp th.rhs { color: var(--accent); }
.cmp td {
  background: var(--surface); padding: 18px 20px;
  font-size: 0.9375rem; vertical-align: top;
  border-bottom: 1px solid var(--line); width: 50%;
}
.cmp td.lhs { color: var(--text-dim); border-right: 1px solid var(--line); }
.cmp tr:last-child td { border-bottom: 0; }
.cmp-tag { display: none; }
/* Mobile: each row becomes a card, keeping the pair adjacent */
@media (max-width: 640px) {
  .cmp, .cmp tbody, .cmp tr, .cmp td { display: block; }
  .cmp thead { display: none; }
  .cmp { border: 0; border-radius: 0; }
  .cmp tr {
    border: 1px solid var(--line); border-radius: 6px;
    overflow: hidden; margin-bottom: 16px;
  }
  .cmp td { width: auto; border-bottom: 0; }
  .cmp td.lhs { border-right: 0; border-bottom: 1px solid var(--line); }
  .cmp-tag { display: block; font-size: 0.8125rem; margin-bottom: 6px; font-weight: 600; }
  .cmp td.lhs .cmp-tag { color: var(--text-dim); }
  .cmp td.rhs .cmp-tag { color: var(--accent); }
}

/* ── Feature scenes ───────────────────────────────
   Full-width stack: text block above, screenshot below, so dense desktop
   screenshots never have to be squeezed into a half-width column. */
.scene { margin-top: clamp(64px, 9vw, 104px); }
.scene:first-of-type { margin-top: 0; }  /* Section has no heading of its own */
.scene-text { max-width: 680px; margin-bottom: 28px; }
.scene-no { font-family: var(--font-mono); color: var(--accent); font-size: 0.875rem; letter-spacing: 0.08em; }
.scene h3 { margin-top: 8px; font-size: 1.5rem; }
.scene p { color: var(--text-dim); margin-top: 12px; }
.stat { font-family: var(--font-mono); color: var(--accent); white-space: nowrap; }

/* ── Download page ────────────────────────────── */
.ver-head { font-family: var(--font-mono); color: var(--text-dim); font-size: 0.875rem; letter-spacing: 0.05em; }
.dl-block { margin-top: 32px; }
.req-list { list-style: none; margin-top: 12px; }
.req-list li { padding-left: 0; color: var(--text-dim); }
.steps { list-style: none; margin-top: 12px; counter-reset: step; }
.steps li { counter-increment: step; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--text-dim); }
.steps li::before {
  content: "0" counter(step);
  font-family: var(--font-mono);
  color: var(--accent);
  margin-right: 16px; font-size: 0.875rem;
}
.callout {
  margin-top: 20px; padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 6px;
}
.callout p { margin-top: 0.5em; }
.callout p:first-child { margin-top: 0; }
.callout .mono { font-size: 0.9375rem; }

/* ── Changelog page ───────────────────────────── */
.log-ver { font-family: var(--font-mono); font-size: 1.125rem; }
.log-date { font-family: var(--font-mono); color: var(--text-dim); font-size: 0.875rem; margin-left: 12px; }
.log-entry { margin-top: 48px; }
.log-entry ul { margin: 16px 0 0 1.2em; color: var(--text-dim); }
.log-entry li { margin-top: 8px; }
/* Category heading grouping entries within one release */
.log-sec { margin-top: 32px; font-size: 0.9375rem; color: var(--accent); }
.log-entry strong { color: var(--text); font-weight: 600; }
details { border-top: 1px solid var(--line); padding: 20px 0; }
details summary { cursor: pointer; list-style: none; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "＋"; float: right; color: var(--text-dim); font-family: var(--font-mono); }
details[open] summary::after { content: "－"; }

/* ── Prose pages (privacy, 404) ───────────────── */
.prose h2 { font-size: 1.5rem; margin-top: 56px; }
.prose p { color: var(--text-dim); }
.page-head { padding-top: clamp(56px, 8vw, 96px); }