/* ===== Work order =====

   The page components for the 2026-10 rebuild: the homepage price sheet, the
   three program pages, /diagnostic, /about and /consulting. Linked after
   chrome.css and nav.css, and only by those pages; the side-line pages keep
   their own inline styles. See docs/rebuild_plan_2026_10.md.

   The motif is a job ticket: a ruled card with a mono job number, what goes
   in, what comes out, who signs off, and price and duration on one label.
   Copper is the only accent. Every component rule is scoped under main.wo.
   The one exception is the reset below, which applies to the whole page: it
   is the same reset every side-line page carries in its own <style>, and the
   shared header and footer on these pages are built against it. */

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

.wo {
  flex: 1;
  font-size: 1.0625rem;
}

.wo h1,
.wo h2,
.wo h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.08;
  text-wrap: balance;
}

.wo h1 {
  font-size: clamp(2.25rem, 7vw, 4rem);
}

.wo h2 {
  font-size: clamp(1.75rem, 4.5vw, 2.5rem);
}

.wo h3 {
  font-size: 1.5rem;
  font-weight: 600;
}

.wo p {
  max-width: 68ch;
}

.wo a:not(.btn) {
  color: var(--primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.wo a:not(.btn):hover {
  color: var(--primary-hover);
}

.wo-container {
  margin: 0 auto;
  max-width: var(--container-xl);
  padding: 0 var(--space-4);
}

/* Mono labels: job numbers, prices, durations, eyebrows. */
.wo-mono {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.wo-eyebrow {
  color: var(--text-muted);
  display: block;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-4);
  text-transform: uppercase;
}

/* ----- Hero ----- */

.wo-hero {
  padding: var(--space-10) 0 var(--space-12);
}

.wo-hero h1 {
  max-width: 18ch;
}

.wo-lede {
  color: var(--text-muted);
  font-size: 1.125rem;
  margin-top: var(--space-5);
}

/* Price and duration as one label, the way a work order states them. */
.wo-price-line {
  border-bottom: 2px solid var(--rule);
  border-top: 2px solid var(--rule);
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  font-weight: 500;
  margin-top: var(--space-6);
  padding: var(--space-2) 0;
}

.wo-price-line strong {
  color: var(--primary);
  font-weight: 500;
}

.wo-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.wo-actions .btn {
  min-height: 48px;
}

.wo-actions-note {
  color: var(--text-muted);
  font-size: 0.9375rem;
  margin-top: var(--space-3);
}

/* The homepage hero carries the first step as a ticket beside the headline on
   wide screens, and under the buttons on a phone. */
.wo-hero-grid {
  display: grid;
  gap: var(--space-10);
}

.wo-hero-ticket {
  align-self: center;
}

/* ----- Sections ----- */

.wo-section {
  border-top: 1px solid var(--border);
  padding: var(--space-12) 0;
}

.wo-section-alt {
  background: var(--bg-elevated);
}

.wo-section-head {
  margin-bottom: var(--space-8);
}

.wo-section-head p {
  color: var(--text-muted);
  margin-top: var(--space-3);
}

.wo-prose p + p {
  margin-top: var(--space-4);
}

.wo-prose h2 + p,
.wo-prose h3 + p {
  margin-top: var(--space-3);
}

.wo-prose p + h3 {
  margin-top: var(--space-8);
}

/* "Sound familiar?": what the owner actually hears, one line each. */
.wo-heard {
  display: grid;
  gap: var(--space-4);
  list-style: none;
}

.wo-heard li {
  background: var(--bg-surface);
  border-left: 4px solid var(--primary);
  padding: var(--space-4) var(--space-5);
}

.wo-heard q {
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  quotes: none;
}

.wo-heard span {
  color: var(--text-muted);
  display: block;
  font-size: 0.9375rem;
  margin-top: var(--space-2);
}

/* ----- The job ticket ----- */

.wo-tickets {
  display: grid;
  gap: var(--space-6);
  list-style: none;
}

.wo-ticket {
  background: var(--bg-surface);
  border: 2px solid var(--rule);
  display: flex;
  flex-direction: column;
}

.wo-ticket-head {
  align-items: baseline;
  border-bottom: 2px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  justify-content: space-between;
  padding: var(--space-3) var(--space-5);
}

.wo-ticket-head .wo-mono {
  color: var(--text-muted);
}

.wo-ticket-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
}

.wo-ticket h2,
.wo-ticket h3 {
  font-size: 1.625rem;
  font-weight: 700;
}

.wo .wo-ticket h3 a {
  color: var(--text);
  text-decoration: none;
}

/* The whole ticket is the link target; the heading carries the name. */
.wo-ticket h3 a::after {
  content: "";
  inset: 0;
  position: absolute;
}

.wo-ticket-linked {
  position: relative;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.wo-ticket-linked:hover {
  border-color: var(--primary);
}

.wo .wo-ticket-linked:hover h3 a,
.wo .wo-ticket-linked:has(a:focus-visible) h3 a {
  color: var(--primary);
}

/* :has(:focus-visible) rather than :focus-within, so a mouse click does not
   leave a ring on the card. */
.wo-ticket-linked:has(a:focus-visible) {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

/* Only where :has works does the card take over the ring; elsewhere the link
   keeps its own, so a keyboard user always sees focus. */
@supports selector(:has(*)) {
  .wo-ticket-linked h3 a:focus-visible {
    outline: none;
  }
}

.wo-io {
  display: grid;
  gap: 0;
}

.wo-io div {
  border-top: 1px solid var(--border);
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3) 0;
}

.wo-io dt {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wo-io dd {
  font-size: 1rem;
}

.wo-ticket-foot {
  border-top: 2px solid var(--rule);
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-5);
}

.wo-ticket-foot .wo-mono {
  color: var(--primary);
}

.wo-signoff {
  color: var(--text-muted);
  font-size: 0.875rem;
}

/* ----- How it works ----- */

.wo-steps {
  counter-reset: step;
  display: grid;
  gap: var(--space-6);
  list-style: none;
}

.wo-steps > li {
  border-top: 2px solid var(--rule);
  counter-increment: step;
  padding-top: var(--space-4);
}

.wo-steps > li::before {
  color: var(--primary);
  content: "STEP " counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-2);
}

.wo-steps h3 {
  font-size: 1.375rem;
}

.wo-steps p {
  color: var(--text-muted);
  margin-top: var(--space-2);
}

.wo-steps .wo-mono {
  color: var(--text);
  display: block;
  margin-top: var(--space-3);
}

.wo-callout {
  background: var(--bg-surface);
  border: 2px solid var(--rule);
  margin-top: var(--space-8);
  padding: var(--space-5);
}

.wo-callout strong {
  font-family: var(--font-display);
  font-size: 1.25rem;
}

/* ----- Proof ----- */

.wo-proof {
  display: grid;
  gap: var(--space-6);
  list-style: none;
}

.wo-proof > li {
  border-top: 2px solid var(--rule);
  padding-top: var(--space-4);
}

.wo-proof .wo-eyebrow {
  margin-bottom: var(--space-2);
}

.wo-proof h3 {
  font-size: 1.375rem;
}

.wo-proof p {
  color: var(--text-muted);
  margin-top: var(--space-2);
}

/* ----- Fit / not a fit ----- */

.wo-fit {
  display: grid;
  gap: var(--space-6);
}

.wo-fit > div {
  background: var(--bg-surface);
  border: 2px solid var(--rule);
  padding: var(--space-5);
}

.wo-fit h3 {
  font-size: 1.375rem;
  margin-bottom: var(--space-3);
}

.wo-fit ul {
  display: grid;
  gap: var(--space-3);
  list-style: none;
}

.wo-fit li {
  padding-left: var(--space-6);
  position: relative;
}

/* A mark, not a word, so it is hidden from assistive tech; the heading says
   which list it is. */
.wo-fit li::before {
  font-family: var(--font-mono);
  font-weight: 500;
  left: 0;
  position: absolute;
}

.wo-fit .wo-fit-yes li::before {
  color: var(--primary);
  content: "+";
  content: "+" / "";
}

.wo-fit .wo-fit-no li::before {
  color: var(--text-muted);
  content: "x";
  content: "x" / "";
}

/* ----- Facts table (diagnostic deliverables, terms) ----- */

.wo-facts {
  border-top: 2px solid var(--rule);
  display: grid;
}

.wo-facts div {
  border-bottom: 1px solid var(--border);
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3) 0;
}

.wo-facts dt {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wo-checklist {
  display: grid;
  gap: var(--space-3);
  list-style: none;
  margin-top: var(--space-4);
}

.wo-checklist li {
  border-left: 4px solid var(--primary);
  padding-left: var(--space-4);
}

/* ----- The first-step form ----- */

.wo-close {
  display: grid;
  gap: var(--space-8);
}

.wo-form {
  background: var(--bg-surface);
  border: 2px solid var(--rule);
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
}

.wo-form label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.wo-form .wo-hint {
  color: var(--text-muted);
  display: block;
  font-size: 0.875rem;
  font-weight: 400;
  margin-top: var(--space-1);
}

.wo-form input,
.wo-form select,
.wo-form textarea {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  min-height: 48px;
  padding: var(--space-3);
  width: 100%;
}

.wo-form textarea {
  min-height: 140px;
  resize: vertical;
}

.wo-form input:focus-visible,
.wo-form select:focus-visible,
.wo-form textarea:focus-visible {
  border-color: var(--primary);
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.wo-form .btn {
  min-height: 48px;
  width: 100%;
}

/* Replaces the form once Formspree accepts it. See assets/js/conversions.js. */
.wo .form-success {
  border: 2px solid var(--primary);
  font-size: 1rem;
  padding: var(--space-4);
}

.wo-contact-list {
  display: grid;
  gap: var(--space-3);
  list-style: none;
  margin-top: var(--space-5);
}

.wo-contact-list .wo-mono {
  color: var(--text-muted);
  display: block;
}

/* ----- Wider screens ----- */

@media (min-width: 640px) {
  .wo-container {
    padding: 0 var(--space-6);
  }

  .wo-heard {
    grid-template-columns: repeat(2, 1fr);
  }

  .wo-facts div {
    gap: var(--space-4);
    grid-template-columns: 9rem 1fr;
  }

  .wo-fit {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .wo-hero {
    padding: var(--space-20) 0 var(--space-16);
  }

  .wo-hero-grid {
    gap: var(--space-12);
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  }

  .wo-section {
    padding: var(--space-20) 0;
  }

  .wo-tickets {
    grid-template-columns: repeat(3, 1fr);
  }

  .wo-steps {
    grid-template-columns: repeat(4, 1fr);
  }

  .wo-proof {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-12);
  }

  .wo-close {
    align-items: start;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wo-ticket-linked {
    transition: none;
  }
}

/* /about: the one photograph on the site, a real one, ruled like a ticket. */
.wo-portrait {
  align-self: center;
  border: 2px solid var(--rule);
  display: block;
  height: auto;
  max-width: 420px;
  width: 100%;
}