/* ==========================================================================
   HappyDraft Design System — Base
   Element defaults, prose typography, layout primitives, accessibility.

   Requires tokens.css to be loaded first.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Reset — the small, opinionated kind
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hd-s-8) + var(--hd-s-4));  /* clears the sticky header on anchor jumps */
}

body {
  margin: 0;
  font-family: var(--hd-font-sans);
  font-size: var(--hd-text-base);
  font-weight: var(--hd-weight-regular);
  line-height: var(--hd-leading-normal);
  color: var(--hd-text);
  background-color: var(--hd-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }

/* Never let a long URL or a dimension string blow out the layout. */
p, li, td, th, dd, h1, h2, h3, h4 { overflow-wrap: break-word; }

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */

/* One focus treatment everywhere. Visible on every surface because it pairs a
   solid ring with a halo — on ink the ring is sky, on paper it is blueprint. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--hd-focus);
  outline-offset: 2px;
  border-radius: var(--hd-radius-sm);
}

/* Keyboard users land here first. */
.hd-skip-link {
  position: absolute;
  left: var(--hd-s-4);
  top: var(--hd-s-4);
  z-index: var(--hd-z-overlay);
  transform: translateY(-200%);
  padding: var(--hd-s-2) var(--hd-s-4);
  background: var(--hd-c-ink);
  color: var(--hd-c-paper);
  border-radius: var(--hd-radius-md);
  font-size: var(--hd-text-sm);
  font-weight: var(--hd-weight-semibold);
  text-decoration: none;
  transition: transform var(--hd-dur-fast) var(--hd-ease);
}
.hd-skip-link:focus { transform: translateY(0); }

.hd-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   Headings
   -------------------------------------------------------------------------- */

.hd-display,
h1, h2, h3, h4, h5, h6 {
  font-family: var(--hd-font-sans);
  font-weight: var(--hd-weight-semibold);
  line-height: var(--hd-leading-snug);
  color: var(--hd-text);
  text-wrap: balance;      /* progressive: keeps headings from orphaning a word */
}

.hd-display {
  font-size: var(--hd-text-display);
  font-weight: var(--hd-weight-bold);
  line-height: var(--hd-leading-tight);
  letter-spacing: var(--hd-tracking-tight);
}

h1 { font-size: var(--hd-text-4xl); font-weight: var(--hd-weight-bold);
     line-height: var(--hd-leading-tight); letter-spacing: var(--hd-tracking-tight); }
h2 { font-size: var(--hd-text-3xl); letter-spacing: var(--hd-tracking-tight); }
h3 { font-size: var(--hd-text-2xl); }
h4 { font-size: var(--hd-text-xl); }
h5 { font-size: var(--hd-text-lg); font-weight: var(--hd-weight-semibold); }
h6 { font-size: var(--hd-text-base); font-weight: var(--hd-weight-semibold); }

/* Eyebrow — the small mono label above a section heading. Instrument voice. */
.hd-eyebrow {
  font-family: var(--hd-font-mono);
  font-size: var(--hd-text-sm);
  font-weight: var(--hd-weight-medium);
  letter-spacing: var(--hd-tracking-wide);
  text-transform: uppercase;
  color: var(--hd-text-muted);
  margin-bottom: var(--hd-s-2);
}

/* The tagline. Always mono, always exactly this string. */
.hd-tagline {
  font-family: var(--hd-font-mono);
  font-size: var(--hd-text-base);
  letter-spacing: var(--hd-tracking-mono);
  color: var(--hd-text-muted);
}

.hd-lead {
  font-size: var(--hd-text-lg);
  line-height: var(--hd-leading-relaxed);
  color: var(--hd-text-soft);
  max-width: var(--hd-measure);
}

/* A measurement, a dimension, a file name — anything literal. */
.hd-mono {
  font-family: var(--hd-font-mono);
  font-size: 0.94em;
  letter-spacing: var(--hd-tracking-mono);
  font-variant-numeric: tabular-nums;
}

.hd-caption {
  font-size: var(--hd-text-sm);
  line-height: var(--hd-leading-normal);
  color: var(--hd-text-muted);
}

/* --------------------------------------------------------------------------
   Links
   -------------------------------------------------------------------------- */

a {
  color: var(--hd-link);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--hd-link) 40%, transparent);
  transition: color var(--hd-dur-fast) var(--hd-ease),
              text-decoration-color var(--hd-dur-fast) var(--hd-ease);
}
a:hover { color: var(--hd-link-hover); text-decoration-color: currentColor; }
a:active { color: var(--hd-link-active); }

/* Links inside a tinted callout need the darker blue — see tokens.css. */
.hd-callout a, .hd-on-tint a { color: var(--hd-link-on-tint); }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.hd-container {
  width: 100%;
  max-width: var(--hd-container);
  margin-inline: auto;
  padding-inline: var(--hd-gutter);
}
.hd-container--narrow { max-width: var(--hd-container-narrow); }
.hd-container--wide   { max-width: var(--hd-container-wide); }

.hd-section { padding-block: var(--hd-section-y); }
.hd-section--tight { padding-block: calc(var(--hd-section-y) * 0.6); }

.hd-stack > * + * { margin-top: var(--hd-s-4); }
.hd-stack--sm > * + * { margin-top: var(--hd-s-2); }
.hd-stack--lg > * + * { margin-top: var(--hd-s-6); }

.hd-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hd-s-3);
  align-items: center;
}

.hd-grid {
  display: grid;
  gap: var(--hd-s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.hd-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }

/* --------------------------------------------------------------------------
   Graph paper — the signature surface

   Pure CSS, no image request. The minor line falls every --hd-grid-square;
   the major line every 5th square, matching how the app draws.
   Set on a section or a hero. Always behind content, never over it.
   -------------------------------------------------------------------------- */

/* The grid is painted on a ::before layer, NOT on the element's own
   background. This matters: --fade masks the grid, and a mask set on the
   element itself would fade the CONTENT too — the hero's buttons and
   screenshot came out washed grey the first time this was built. Keeping the
   texture on its own layer means the fade can only ever touch the texture.

   Negative z-index puts the layer above the element's background-color and
   below in-flow children; `isolation: isolate` keeps it from escaping into
   an ancestor's stacking context. */

.hd-paper {
  --_sq: var(--hd-grid-square);
  --_maj: calc(var(--hd-grid-square) * 5);
  position: relative;
  isolation: isolate;
  background-color: var(--hd-surface);
}

.hd-paper::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  var(--hd-c-grid-major) var(--hd-hairline), transparent var(--hd-hairline)),
    linear-gradient(to bottom, var(--hd-c-grid-major) var(--hd-hairline), transparent var(--hd-hairline)),
    linear-gradient(to right,  var(--hd-c-grid-minor) var(--hd-hairline), transparent var(--hd-hairline)),
    linear-gradient(to bottom, var(--hd-c-grid-minor) var(--hd-hairline), transparent var(--hd-hairline));
  background-size: var(--_maj) var(--_maj), var(--_maj) var(--_maj), var(--_sq) var(--_sq), var(--_sq) var(--_sq);
  background-position: -1px -1px;
}

/* Faint version for large areas — the grid should never fight the text. */
.hd-paper--soft::before {
  background-image:
    linear-gradient(to right,  color-mix(in srgb, var(--hd-c-grid-minor) 70%, transparent) var(--hd-hairline), transparent var(--hd-hairline)),
    linear-gradient(to bottom, color-mix(in srgb, var(--hd-c-grid-minor) 70%, transparent) var(--hd-hairline), transparent var(--hd-hairline));
  background-size: var(--hd-grid-square) var(--hd-grid-square);
}

/* Fades the grid out at the edges so a band doesn't end on a hard seam.
   Applies to the texture layer only — never to content. */
.hd-paper--fade::before {
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 45%, transparent 100%);
          mask-image: radial-gradient(120% 100% at 50% 0%, #000 45%, transparent 100%);
}

/* --------------------------------------------------------------------------
   Measured rule — the other signature element

   A divider with dimension ticks on each end, exactly like the app's
   dimension tool. Use it where a plain <hr> would be dull: between sections,
   under a section heading.
   -------------------------------------------------------------------------- */

.hd-rule {
  border: 0;
  height: var(--hd-rule);
  background: var(--hd-border);
  margin-block: var(--hd-s-6);
}

.hd-measured {
  position: relative;
  height: var(--hd-s-5);
  margin-block: var(--hd-s-6);
}
.hd-measured::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: var(--hd-hairline);
  background: var(--hd-border-strong);
}
.hd-measured::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: calc(50% - var(--hd-s-2));
  height: var(--hd-s-4);
  border-inline: var(--hd-rule) solid var(--hd-border-strong);
}

/* A label sitting on the rule, mono, like a dimension callout. */
.hd-measured__label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding-inline: var(--hd-s-3);
  background: var(--hd-surface);
  font-family: var(--hd-font-mono);
  font-size: var(--hd-text-xs);
  letter-spacing: var(--hd-tracking-wide);
  text-transform: uppercase;
  color: var(--hd-text-muted);
}

/* --------------------------------------------------------------------------
   Prose — docs, help, legal

   Scoped to .hd-prose so marketing layouts are never accidentally styled by
   element selectors. Everything a Markdown file can produce is covered here;
   if a legal page renders something not in this list, add it here rather
   than styling it on the page.
   -------------------------------------------------------------------------- */

.hd-prose {
  max-width: var(--hd-measure);
  line-height: var(--hd-leading-relaxed);
  color: var(--hd-text);
}

.hd-prose > * + * { margin-top: var(--hd-s-4); }

.hd-prose h2 { margin-top: var(--hd-s-7); margin-bottom: var(--hd-s-3); }
.hd-prose h3 { margin-top: var(--hd-s-6); margin-bottom: var(--hd-s-2); }
.hd-prose h4 { margin-top: var(--hd-s-5); margin-bottom: var(--hd-s-2); }
.hd-prose > h2:first-child,
.hd-prose > h3:first-child { margin-top: 0; }

.hd-prose ul, .hd-prose ol { padding-left: var(--hd-s-5); }
.hd-prose li + li { margin-top: var(--hd-s-2); }
.hd-prose li::marker { color: var(--hd-text-muted); }
.hd-prose ul { list-style: none; padding-left: var(--hd-s-5); }
.hd-prose ul > li { position: relative; }
/* A dimension tick instead of a bullet — small, and unmistakably this product. */
.hd-prose ul > li::before {
  content: "";
  position: absolute;
  left: calc(var(--hd-s-5) * -1);
  top: 0.62em;
  width: 10px;
  height: var(--hd-rule);
  background: var(--hd-border-strong);
}

.hd-prose blockquote {
  margin-inline: 0;
  padding: var(--hd-s-3) var(--hd-s-5);
  border-left: var(--hd-rule) solid var(--hd-warm);
  color: var(--hd-text-soft);
  font-style: normal;
}

.hd-prose code {
  font-family: var(--hd-font-mono);
  font-size: 0.9em;
  padding: 0.15em 0.4em;
  border-radius: var(--hd-radius-sm);
  background: var(--hd-c-sky);
  color: var(--hd-c-ink);
}
.hd-prose pre {
  font-family: var(--hd-font-mono);
  font-size: var(--hd-text-sm);
  line-height: 1.55;
  padding: var(--hd-s-4);
  border: var(--hd-hairline) solid var(--hd-border);
  border-radius: var(--hd-radius-md);
  background: var(--hd-surface-raised);
  overflow-x: auto;
}
.hd-prose pre code { background: none; padding: 0; font-size: inherit; }

.hd-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--hd-text-sm);
}
.hd-prose th, .hd-prose td {
  text-align: left;
  padding: var(--hd-s-3);
  border-bottom: var(--hd-hairline) solid var(--hd-border);
  vertical-align: top;
}
.hd-prose th {
  font-weight: var(--hd-weight-semibold);
  color: var(--hd-text-soft);
  border-bottom: var(--hd-rule) solid var(--hd-border-strong);
}
.hd-prose tbody tr:last-child td { border-bottom: 0; }

.hd-prose hr {
  border: 0;
  height: var(--hd-hairline);
  background: var(--hd-border);
  margin-block: var(--hd-s-7);
}

.hd-prose img { border-radius: var(--hd-radius-md); }
.hd-prose figcaption { font-size: var(--hd-text-sm); color: var(--hd-text-muted); margin-top: var(--hd-s-2); }

/* Anchored heading — the # that appears on hover in docs. */
.hd-prose :is(h2, h3) > .hd-anchor {
  opacity: 0;
  margin-left: var(--hd-s-2);
  font-weight: var(--hd-weight-regular);
  color: var(--hd-text-muted);
  text-decoration: none;
  transition: opacity var(--hd-dur-fast) var(--hd-ease);
}
.hd-prose :is(h2, h3):hover > .hd-anchor,
.hd-prose .hd-anchor:focus-visible { opacity: 1; }

/* Legal fine print — LICENSE, CLA. Denser, quieter, still readable. */
.hd-prose--legal {
  font-size: var(--hd-text-sm);
  line-height: var(--hd-leading-normal);
  max-width: var(--hd-measure);
}
.hd-prose--legal h2 { font-size: var(--hd-text-xl); }
.hd-prose--legal h3 { font-size: var(--hd-text-lg); }

/* --------------------------------------------------------------------------
   Utilities — a deliberately short list
   -------------------------------------------------------------------------- */

.hd-text-center  { text-align: center; }
.hd-text-muted   { color: var(--hd-text-muted); }
.hd-text-warm    { color: var(--hd-text-warm); }
.hd-measure      { max-width: var(--hd-measure); }
.hd-measure-narrow { max-width: var(--hd-measure-narrow); }
.hd-mx-auto      { margin-inline: auto; }
.hd-no-wrap      { white-space: nowrap; }