/* The first-run page, dressed as substandard.blog: paper, ink, and a red pen
   that disagrees. The tokens and the tilted-card treatment are lifted from
   web/src/styles/global.css — the two cannot share a file (one is bundled
   into the extension, the other into an Astro site), so this is a copy, and
   a change to the brand's colors belongs in both. */

:root {
  color-scheme: light dark;
  --bg: #f4f3ee;
  --card: #fdfcf9;
  --fg: #26282b;
  --muted: #6d6a62;
  --line: #dedcd3;
  --red: #d9482b;
  --gold: #e8b52a;
  --gold-hl: rgba(232, 181, 42, 0.35);
  --shadow: #dedcd3;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c1d20;
    --card: #26272b;
    --fg: #e9e7e0;
    --muted: #96938a;
    --line: #3a3b40;
    --red: #e2593a;
    --gold: #d9a826;
    --gold-hl: rgba(217, 168, 38, 0.28);
    --shadow: #131417;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.6;
  background: var(--bg);
  color: var(--fg);
}

::selection {
  background: var(--gold-hl);
}

a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--red);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

/* --- hero: the site's lockup, Subby pre-tilted beside the wordmark --------- */

.hero {
  max-width: 44rem;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 2.5rem;
  text-align: center;
}

.hero-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
}

.hero-icon {
  width: 5.5rem;
  height: 5.5rem;
  transform: rotate(2deg);
  transition: transform 0.25s ease;
}

.hero-icon:hover {
  transform: rotate(0deg);
}

.hero-wordmark {
  flex: 0 1 17rem;
  min-width: 0;
}

.hero-wordmark svg {
  display: block;
  width: 100%;
  height: auto;
}

/* The generated wordmark bakes in its ink; the theme takes it back. */
.hero-wordmark text {
  fill: var(--fg);
}

.hero-wordmark path {
  stroke: var(--red);
}

/* Looser than the site's own h1 (1.15): this headline is a full sentence and
   wraps, and at that line height the wavy underline of the second line lands
   on the descenders of the first. */
.hero h1 {
  margin: 1.25rem 0 0.75rem;
  font-size: 2.5rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
  transform: rotate(-1deg);
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--red);
  text-decoration-thickness: 3px;
  text-underline-offset: 10px;
}

.hero-sub {
  margin: 0.75rem 0 0;
  color: var(--muted);
}

/* --- cards ---------------------------------------------------------------- */

main {
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 1.5rem 2rem;
}

/* Laid out by eye: each card tilts its own way and none of the shadows agree
   on where the light is. */
main section {
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 0.75rem;
  padding: 1.5rem;
  margin-bottom: 1.75rem;
}

main section:nth-of-type(odd) {
  transform: rotate(-0.6deg);
  box-shadow: 5px 4px 0 var(--shadow);
}

main section:nth-of-type(even) {
  transform: rotate(0.45deg);
  box-shadow: -4px 5px 0 var(--shadow);
}

main h2 {
  display: inline-block;
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
  line-height: 1.3;
  padding: 0 0.35rem;
  background: linear-gradient(
    100deg,
    transparent 0.5%,
    var(--gold-hl) 3%,
    var(--gold-hl) 98%,
    transparent 99.5%
  );
  transform: rotate(-0.4deg);
}

main p {
  margin: 0.5rem 0 0;
  color: var(--muted);
}

main ul {
  margin: 0.5rem 0 0;
  padding-left: 1.5rem;
  color: var(--muted);
}

main li::marker {
  color: var(--red);
}

/* The two clicks, numbered to match the red circles in the picture. */
.steps {
  margin: 1rem 0 0;
  padding-left: 1.6rem;
  color: var(--muted);
}

.steps li {
  margin-top: 0.5rem;
}

.steps li::marker {
  color: var(--red);
  font-weight: 700;
}

/* --- the picture ---------------------------------------------------------- */

/* Framed the way the site frames its screenshots: hard border, solid misprint
   shadow, a lean that straightens when you look closer. */
.pin-figure {
  margin: 1.5rem 0 0;
}

.pin-art {
  display: block;
  width: 100%;
  height: auto;
  border: 2px solid var(--fg);
  border-radius: 0.4rem;
  background: var(--card);
  box-shadow: 5px 5px 0 var(--shadow);
  transform: rotate(-0.8deg);
  transition: transform 0.25s ease;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.pin-art:hover {
  transform: rotate(0deg);
}

.pin-figure figcaption {
  margin: 0.9rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
  transform: rotate(-0.3deg);
}

/* The drawing's own palette, so it follows the theme rather than baking one
   in — same arrangement as the site's architecture diagram. */
.w-page {
  fill: var(--card);
  stroke: var(--line);
  stroke-width: 2;
}

.w-bar {
  fill: var(--bg);
}

.w-rule {
  fill: none;
  stroke: var(--line);
  stroke-width: 2;
}

.w-glyph {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.w-omni {
  fill: var(--card);
  stroke: var(--line);
  stroke-width: 1.5;
}

.w-chip {
  fill: var(--muted);
  opacity: 0.35;
}

.w-chip-faint {
  fill: var(--muted);
  opacity: 0.18;
}

.w-dot {
  fill: var(--muted);
}

/* The puzzle piece is drawn as one filled shape plus a bite taken out of it,
   so the bite has to be painted in whatever is behind the toolbar. */
.w-ink {
  color: var(--fg);
}

.w-notch {
  fill: var(--bg);
}

.w-panel {
  fill: var(--card);
  stroke: var(--line);
  stroke-width: 2;
}

.w-panel-shadow {
  fill: var(--shadow);
}

.w-title {
  fill: var(--fg);
  font-size: 14px;
  font-weight: 650;
}

.w-name {
  fill: var(--fg);
  font-size: 13.5px;
}

/* The pin the reader is being sent to click, and the ones they are not. */
.w-pin {
  color: var(--fg);
}

.w-pin-off {
  color: var(--muted);
  opacity: 0.55;
}

.w-hi {
  fill: var(--gold-hl);
}

.pen {
  fill: none;
  stroke: var(--red);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.pen-dash {
  fill: none;
  stroke: var(--red);
  stroke-width: 2;
  stroke-dasharray: 5 5;
  stroke-linecap: round;
}

.pen-badge {
  fill: var(--red);
}

.pen-num {
  fill: var(--card);
  font-size: 13px;
  font-weight: 700;
  text-anchor: middle;
}

/* --- the live answer ------------------------------------------------------ */

/* Unpinned is a note, still asking; pinned is the gold sticker, slapped on
   almost straight. Hidden until the first read lands, and absent entirely
   when the browser will not answer. */
.pin-state {
  margin: 1.25rem 0 0;
  padding: 0.75rem 1rem;
  border: 2px dashed var(--line);
  border-radius: 0.75rem;
  color: var(--muted);
  transform: rotate(0.5deg);
}

.pin-state.is-pinned {
  border: 3px solid var(--fg);
  border-style: solid;
  background: var(--gold);
  color: #26282b;
  font-weight: 650;
  transform: rotate(-0.8deg);
  box-shadow: 4px 5px 0 var(--shadow);
}

/* --- footer: the mark's own squiggle, then the small print ---------------- */

footer {
  max-width: 44rem;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 2.5rem;
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
}

footer p {
  margin: 0.35rem 0 0;
}

footer::before {
  content: "";
  display: block;
  width: 108px;
  height: 34px;
  margin: 0 auto 1.25rem;
  background-color: var(--red);
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 108 34"><path d="M4,16 q8,-12 16,0 t16,0 t16,0 t16,0 q8,-8 16,4 q6,8 8,14" fill="none" stroke="black" stroke-width="6" stroke-linecap="round"/></svg>')
    center / contain no-repeat;
}

/* Filled from the manifest in welcome.ts; empty on a page opened outside the
   extension, where it should take no space. */
.version:empty {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-icon,
  .pin-art {
    transition: none;
  }
}