/* The landing page for partsquoted.com. The values below are copies of design/system/tokens.json (light, then dark);
   scripts/check-site-tokens.mjs fails `pnpm check` when they drift. */

@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/inter-tight-latin-wght-5.3.0.woff2") format("woff2");
}

@font-face {
  font-family: Geist;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/geist-latin-wght-5.3.0.woff2") format("woff2");
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/geist-mono-latin-wght-5.3.0.woff2") format("woff2");
}

:root {
  --paper: #f1f0e9;
  --panel: #e8e6dd;
  --sheet: #f8f7f2;
  --hairline: #cfccc1;
  --pencil: #5f5e57;
  --ink: #1a1a17;
  --ink-2: #2e2e29;
  --frame: #1a1a17;
  --bar: #1a1a17;
  --on-bar: #f1f0e9;
  --bar-muted: #a9a69b;
  --bar-line: #5f5e57;
  --bar-edge: #1a1a1700;
  --orange: #ff5a00;
  --on-orange: var(--ink);
  --orange-ink: #b83d00;
  --success: #356b43;
  --danger-ink: #b80400;
  --font-display: "Inter Tight", system-ui, sans-serif;
  --font-body: Geist, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --content-max: 1200px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #161614;
    --panel: #11110f;
    --sheet: #1f1e1b;
    --hairline: #33322d;
    --pencil: #a9a79d;
    --ink: #eceae2;
    --ink-2: #d4d2c9;
    --frame: #57554e;
    --bar: #0b0b0a;
    --on-bar: #eceae2;
    --bar-muted: #8f8c82;
    --bar-line: #4a4943;
    --bar-edge: #3a3934;
    --on-orange: #1a1a17;
    --orange-ink: #ff8a4d;
    --success: #6cc287;
    --danger-ink: #ff6a5c;
    color-scheme: dark;
  }
}

* {
  box-sizing: border-box;
}

html {
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 26px;
}

a {
  color: inherit;
}

a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

p,
h2,
h3,
ul,
ol,
dl,
dd {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

.nowrap {
  white-space: nowrap;
}

/* The `label` type style: mono, 11px, uppercase. */
.label,
.status,
.nav,
.signin,
.btn,
.num,
.reach-note,
.facts dt,
.bend-note,
.readlist dt,
.bom th,
.chip,
.foot-nav {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* The `data` type style: part numbers, file names and sizes. */
.pn,
.file,
.view-size,
.files li,
.bom td {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
}

/* Every band runs full width, its content in the website's 1200px column with 64px gutters. */
.top,
.hero,
.wrap,
.foot {
  --gutter: var(--space-16);
  padding-left: max(var(--gutter), calc((100% - var(--content-max)) / 2));
  padding-right: max(var(--gutter), calc((100% - var(--content-max)) / 2));
}

/* Header: the wordmark, the sections, then Sign in and the outline Early access. */
.top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-8);
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

/* The wordmark file carries its own clear space (its square, 25 of its 141 units) around the letters. The gutter is
   wider than that, so the letters line up with the column and the clear space sits in the gutter. */
.brand {
  --wordmark-height: 40px;
  display: block;
  line-height: 0;
  margin-left: calc(var(--wordmark-height) * -25 / 141);
}

.brand img {
  display: block;
  width: auto;
  height: var(--wordmark-height);
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-6);
}

.nav a,
.signin {
  color: var(--pencil);
  text-decoration: none;
  padding: var(--space-2) 0;
}

.nav a:hover,
.signin:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.top-end {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-left: auto;
}

/* Buttons: square, mono, the arrow in its own cell. The orange one is the page's one action. */
.btn {
  display: inline-flex;
  align-items: stretch;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-decoration: none;
  border: 1px solid var(--ink);
}

.btn span {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--space-4);
}

.btn span + span {
  padding: 0 var(--space-3);
  border-left: 1px solid currentcolor;
}

.btn-outline {
  color: var(--ink);
  background: transparent;
}

.btn-outline:hover {
  background: var(--panel);
}

.btn-primary {
  color: var(--on-orange);
  background: var(--orange);
  border-color: var(--orange);
}

.btn.btn-primary > * {
  min-height: 48px;
  padding: 0 var(--space-5);
}

.btn-primary span + span {
  border-left-color: var(--on-orange);
}

.btn-primary:hover span:first-child {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.reach {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.reach-note {
  color: var(--pencil);
  text-transform: none;
  letter-spacing: 0;
}

/* The hero sits on the website's graph paper, a 24px hairline grid starting at the column's edge. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "status"
    "title"
    "about"
    "reach"
    "sheet";
  row-gap: var(--space-8);
  padding-top: 47px;
  padding-bottom: var(--space-16);
  border-top: 1px solid var(--frame);
  border-bottom: 1px solid var(--frame);
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: max(var(--gutter), calc((100% - var(--content-max) + 24px) / 2)) -1px;
}

/* Work in progress, said first: a square marker and its words, as a status is everywhere in the app. */
.status {
  grid-area: status;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--sheet);
  border: 1px solid var(--frame);
}

.marker {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  background: currentcolor;
}

h1 {
  grid-area: title;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(44px, 7.4vw, 88px);
  line-height: 1;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.hero .about {
  grid-area: about;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 34em;
  color: var(--ink-2);
  text-wrap: pretty;
}

.hero .reach {
  grid-area: reach;
}

/* Words on the graph paper get a patch of plain paper, so no grid line runs through them. */
.hero .about p,
.hero .reach-note {
  background: var(--paper);
}

.hero .reach-note {
  padding-right: var(--space-2);
}

/* The sample part, drawn like a sheet on the drafting table: its views, then what was measured. */
.sheet {
  grid-area: sheet;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  background: var(--sheet);
  border: 1px solid var(--frame);
}

.sheet-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--hairline);
}

.sheet-part,
.sheet-source {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-3);
}

.sheet-head .label,
.view-name,
.facts dt,
.fig-note,
.move-n,
.model-cap .label,
.bom caption,
.bom th,
.card-sub {
  color: var(--pencil);
}

.pname {
  font-size: 13px;
  line-height: 20px;
  color: var(--ink-2);
}

.file {
  color: var(--ink-2);
}

.views {
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

/* Each view: its name in the corner, the drawing in the middle, its caption under it. */
.view {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  align-items: center;
  row-gap: var(--space-3);
  min-width: 0;
  padding: 40px var(--space-4) var(--space-4);
}

.view + .view {
  border-left: 1px solid var(--hairline);
}

.view-name {
  position: absolute;
  top: var(--space-3);
  left: var(--space-4);
}

.view-folded img {
  display: block;
  width: 100%;
  max-width: 264px;
  height: auto;
}

.flat {
  display: block;
  width: 100%;
  max-width: 328px;
  height: auto;
  overflow: visible;
}

.flat-cut {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.3;
  stroke-linejoin: miter;
}

.flat-hole {
  fill: var(--panel);
  stroke: var(--ink);
  stroke-width: 1.1;
}

/* Bend lines in orange-ink, as the flat pattern draws what the engine found. */
.flat-bend {
  stroke: var(--orange-ink);
  stroke-width: 1.4;
  stroke-dasharray: 6 4;
}

.bend-note {
  line-height: 20px;
  color: var(--orange-ink);
}

.dim {
  stroke: var(--ink);
  stroke-width: 0.9;
}

.dim-tick {
  stroke: var(--ink);
  stroke-width: 1.2;
}

.dim-chip {
  fill: var(--panel);
}

.dim-text {
  fill: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
}

.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--hairline);
}

.facts > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: var(--space-3) var(--space-4);
}

.facts > div + div {
  border-left: 1px solid var(--hairline);
}

.facts dd {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Sections below the hero, divided by 1px rules, each opening with its number and a big headline. */
.sec {
  border-bottom: 1px solid var(--frame);
}

.wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding-top: var(--space-24);
  padding-bottom: var(--space-24);
}

.head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.num {
  color: var(--orange-ink);
  font-weight: 600;
}

h2 {
  max-width: 15em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.lede {
  max-width: 34em;
  font-size: 18px;
  line-height: 28px;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* 01: three moves, in ruled cells. */
.moves {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--frame);
}

.move {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-8) var(--space-6);
}

.move + .move {
  border-left: 1px solid var(--hairline);
}

h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 30px;
  letter-spacing: -0.02em;
}

.move > p:not(.label) {
  color: var(--ink-2);
  text-wrap: pretty;
}

.fig {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--hairline);
}

.files {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.files li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 10px;
  background: var(--sheet);
  border: 1px solid var(--hairline);
  overflow-wrap: anywhere;
}

.type {
  flex-shrink: 0;
  width: 36px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--pencil);
}

.rows,
.card {
  background: var(--sheet);
  border: 1px solid var(--frame);
}

.rows li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 10px;
}

.rows li + li {
  border-top: 1px solid var(--hairline);
}

.row-part {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.row-part .label {
  color: var(--pencil);
  font-size: 10px;
}

.chip {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  font-size: 10px;
}

.chip-ok {
  color: var(--success);
}

.chip-stop {
  color: var(--danger-ink);
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
}

.card-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--hairline);
}

.card-line {
  font-size: 13px;
  line-height: 20px;
}

/* 02: the sample assembly with the BOM read from its file, beside what the engine measures. */
.reads {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--space-12);
  align-items: start;
}

.model {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 200px);
  margin: 0;
  background: var(--sheet);
  border: 1px solid var(--frame);
}

.model-pic {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  border-right: 1px solid var(--hairline);
}

.model-pic img {
  display: block;
  width: 100%;
  max-width: 312px;
  height: auto;
}

.bom {
  align-self: start;
  width: 100%;
  border-collapse: collapse;
}

.bom caption {
  padding: var(--space-3) var(--space-4) var(--space-2);
  text-align: left;
}

.bom th,
.bom td {
  padding: 6px var(--space-4);
  text-align: left;
}

.bom th:last-child,
.bom td:last-child {
  text-align: right;
}

.bom thead th {
  font-weight: 500;
  border-bottom: 1px solid var(--frame);
}

.bom tbody tr + tr td {
  border-top: 1px solid var(--hairline);
}

.model-cap {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--hairline);
}

.readlist {
  border-top: 1px solid var(--frame);
}

.read-row {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: var(--space-5);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--hairline);
}

.readlist dt {
  padding-top: 5px;
  font-weight: 600;
  color: var(--ink);
}

.readlist dd {
  color: var(--ink-2);
  text-wrap: pretty;
}

/* 03: the reasons, one ruled row each. */
.wrap-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--space-12);
  align-items: start;
}

.whylist {
  border-top: 1px solid var(--frame);
}

.why-row {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 18px;
  line-height: 28px;
  text-wrap: pretty;
}

/* The close: the page's one dark band, because it holds what to do next. */
.closing {
  background: var(--bar);
  color: var(--on-bar);
  border-top: 1px solid var(--bar-edge);
}

.closing a:focus-visible {
  outline-color: var(--orange);
}

.closing .wrap {
  align-items: flex-start;
  gap: var(--space-8);
}

.closing-label,
.closing .reach-note {
  color: var(--bar-muted);
}

.closing h2 {
  max-width: 13em;
  font-size: clamp(42px, 6vw, 80px);
  line-height: 1;
}

.closing-text {
  max-width: 34em;
  font-size: 18px;
  line-height: 28px;
  text-wrap: pretty;
}

.closing .btn-primary span + span {
  border-left-color: var(--on-orange);
}

.next {
  width: 100%;
  max-width: 44em;
  margin-top: var(--space-8);
  border-top: 1px solid var(--bar-line);
}

.next h3 {
  padding: var(--space-4) 0 var(--space-2);
  color: var(--bar-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
}

.next-row {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--bar-line);
  text-wrap: pretty;
}

.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-top: var(--space-8);
  padding-bottom: var(--space-12);
  border-top: 1px solid var(--bar-line);
}

.foot-brand {
  --wordmark-height: 32px;
  display: block;
  line-height: 0;
  margin-left: calc(var(--wordmark-height) * -25 / 141);
}

.foot-brand img {
  display: block;
  width: auto;
  height: var(--wordmark-height);
}

.foot-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
}

.foot-nav a {
  color: var(--on-bar);
  text-decoration: none;
}

.foot-nav a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.foot-copy {
  color: var(--bar-muted);
}

/* Desktop: the headline across, then the sheet with the words beside it. */
@media (min-width: 1180px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) 408px;
    grid-template-areas:
      "status status"
      "title title"
      "sheet about"
      "sheet reach";
    grid-template-rows: auto auto auto 1fr;
    column-gap: 47px;
    row-gap: 0;
  }

  .status {
    margin-bottom: var(--space-6);
  }

  h1 {
    margin-bottom: 40px;
    line-height: 88px;
  }

  .sheet {
    height: 457px;
  }

  .hero .about {
    max-width: none;
    margin-top: -5px;
  }

  .hero .reach {
    align-self: end;
  }
}

@media (max-width: 1179px) {
  .sheet {
    max-width: 760px;
  }
}

@media (max-width: 960px) {
  .moves {
    grid-template-columns: minmax(0, 1fr);
  }

  .move + .move {
    border-left: 0;
    border-top: 1px solid var(--hairline);
  }

  .reads,
  .wrap-split {
    grid-template-columns: minmax(0, 1fr);
  }

  .model {
    max-width: 560px;
  }

  .nav {
    display: none;
  }
}

@media (max-width: 640px) {
  .top,
  .hero,
  .wrap,
  .foot {
    --gutter: var(--space-5);
  }

  .brand {
    --wordmark-height: 32px;
  }

  .top-end {
    gap: var(--space-4);
  }

  .hero {
    row-gap: var(--space-6);
    padding-top: var(--space-8);
    padding-bottom: var(--space-12);
  }

  .wrap {
    gap: var(--space-8);
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }

  .views {
    grid-template-columns: minmax(0, 1fr);
  }

  .view + .view {
    border-left: 0;
    border-top: 1px solid var(--hairline);
  }

  /* The picture is square with the tray across its middle; a 4:3 window trims the empty ground above and below. */
  .view-folded img {
    max-width: 248px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .facts > div:nth-child(3) {
    border-left: 0;
  }

  .facts > div:nth-child(n + 3) {
    border-top: 1px solid var(--hairline);
  }

  .move {
    padding: var(--space-6) var(--space-4);
  }

  .model {
    grid-template-columns: minmax(0, 1fr);
  }

  .model-pic {
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
  }

  .model-pic img {
    max-width: 260px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  .read-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }

  .why-row {
    font-size: 16px;
    line-height: 26px;
  }

  .closing-text {
    font-size: 16px;
    line-height: 26px;
  }

  .reach,
  .btn-primary {
    align-self: stretch;
  }

  .btn-primary span:first-child {
    flex: 1 1 auto;
  }
}

/* A phone keeps the header on one line: the orange action is just below it. */
@media (max-width: 480px) {
  .top .btn-outline {
    display: none;
  }
}

/* Under 360px "Quote your part." no longer fits on one line at 44px, so it may wrap. */
@media (max-width: 359px) {
  h1 .nowrap {
    white-space: normal;
  }
}