/* Field quote concept demo, project 21.

   Two design systems share this page and neither may bleed into the other.
   The site's own dark system dresses the landing page with the usual fq-
   prefix and the shared tokens. Everything inside the phone frame belongs to
   Truckside, a fictional product, and is scoped under .ts-app with its own
   light token set and a ts- prefix on every class. The point of the light
   palette is that the fictional product visibly is not this site. */

/* ------------------------------------------------------- landing page */

.fq {
  padding-block: var(--s-6) var(--s-9);
}

.fq-intro {
  max-width: var(--measure);
}

.fq h1 {
  font-size: var(--t-xxl);
  font-weight: var(--t-xxl-weight);
  margin-block-end: var(--s-5);
}

.fq-lede2 {
  margin-block-start: var(--s-4);
  color: var(--text-2);
}

.fq-split {
  margin-block-start: var(--s-7);
  display: grid;
  gap: var(--s-7);
  align-items: start;
}

@media (min-width: 1024px) {
  .fq-split {
    grid-template-columns: minmax(0, 1fr) 403px;
    column-gap: var(--s-7);
  }

  .fq-demo {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: var(--s-5);
  }

  .fq-walk {
    grid-column: 1;
    grid-row: 1;
    max-width: 620px;
  }
}

/* Direct children only. As a descendant selector this reached the demo's own
   h2 inside the frame and outranked .ts-screenTitle, which is the same bleed
   in the other direction: the site's type leaking into Truckside. */
.fq-demo > h2,
.fq-walk > h2,
.fq-life > h2 {
  font-size: var(--t-xl);
  font-weight: var(--t-xl-weight);
  margin-block-end: var(--s-4);
}

.fq-demoIntro {
  color: var(--text-2);
  margin-block-end: var(--s-5);
}

/* The concept line is load bearing honesty and is never moved, softened or
   removed. It sits directly under the frame, at body size, not as a caption. */
.fq-concept {
  margin-block-start: var(--s-5);
  padding: var(--s-4);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  color: var(--text-1);
  max-width: 403px;
}

.fq-printNote {
  display: none;
}

.fq-block {
  margin-block-end: var(--s-6);
  max-width: var(--measure);
}

.fq-block h3 {
  font-size: var(--t-lg);
  font-weight: var(--t-lg-weight);
  margin-block-end: var(--s-2);
}

.fq-block p {
  color: var(--text-2);
}

.fq-life {
  margin-block-start: var(--s-7);
  max-width: var(--measure);
}

.fq-life p {
  color: var(--text-2);
}

/* -------------------------------------------------------- phone frame */

.fq-frame {
  position: relative;
  width: 403px;
  max-width: 100%;
  margin-inline: auto;
  padding: 14px;
  background: #23262B;
  border-radius: 40px;
  box-shadow: var(--shadow);
}

/* The spec says 10px from the top. With a 14px bezel a 6px pill starting at
   10px ends at 16 and lands two pixels onto the screen, where it reads as an
   artifact across the white top bar. Centred in the bezel instead. */
.fq-frame__speaker {
  position: absolute;
  inset-block-start: 4px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 6px;
  border-radius: var(--r-pill);
  background: #3A3F46;
}

.fq-frame__screen {
  width: 375px;
  height: 740px;
  max-width: 100%;
  border-radius: 28px;
  overflow: hidden;
}

/* Under 768 the bezel goes and the demo runs full bleed. A phone drawn
   inside a phone is a joke that stops being funny at the second one. */
@media (max-width: 767px) {
  .fq-frame {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    border-block: 1px solid var(--line);
  }

  .fq-frame__speaker { display: none; }

  .fq-frame__screen {
    width: 100%;
    height: min(720px, calc(100dvh - 64px));
    border-radius: 0;
  }

  .fq-concept { max-width: none; }
}

/* ==================================================================== */
/* Truckside. Everything below is scoped to .ts-app and nothing above    */
/* this line may reach into it.                                          */
/* ==================================================================== */

.ts-app {
  --ts-bg: #F4F1EA;
  --ts-surface: #FFFFFF;
  --ts-ink: #201D18;
  --ts-ink-2: #5B564D;
  --ts-line: #D8D2C4;
  /* Dividers use --ts-line. Anything a finger lands on needs 3:1 against
     both surfaces, and --ts-line measures 1.51 on white, so interactive
     boundaries take this instead: 3.80 on the surface, 3.37 on the bg. */
  --ts-line-control: #8A8275;
  --ts-accent: #B84812;
  --ts-accent-ink: #FFFFFF;
  --ts-focus: #1D4ED8;

  --ts-chip-logged-bg: #E6E1D5;
  --ts-chip-logged-ink: #201D18;
  --ts-chip-sent-bg: #FFE4B8;
  --ts-chip-sent-ink: #6B4A00;
  --ts-chip-approved-bg: #D9EDD9;
  --ts-chip-approved-ink: #1F5B32;

  --ts-r-card: 10px;
  --ts-r-btn: 8px;
  --ts-r-pill: 999px;

  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--ts-bg);
  color: var(--ts-ink);
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  text-align: start;
}

/* The bleed guard. site.css sets `h1, h2, h3, h4 { color: var(--text-1) }`,
   which is near white and beats plain inheritance, so every heading inside the
   light demo rendered at 1.03 against the Truckside background: invisible, and
   axe said so. :where() contributes no specificity, so this resets the
   elements to inherit from .ts-app while every ts- class below still wins. */
.ts-app :where(h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, legend, label,
  table, caption, th, td, figure, figcaption, blockquote) {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: normal;
}

.ts-app *:focus-visible {
  outline: 2px solid var(--ts-focus);
  outline-offset: 2px;
}

.ts-noscript {
  margin: 0;
  padding: 24px;
  color: var(--ts-ink);
}

/* ------------------------------------------------------------- chrome */

.ts-top {
  flex: none;
  padding: 12px 16px;
  background: var(--ts-surface);
  border-block-end: 1px solid var(--ts-line);
}

.ts-wordmark {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.ts-company {
  margin: 0;
  font-size: 13px;
  color: var(--ts-ink-2);
}

.ts-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
}

.ts-tabs {
  flex: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--ts-surface);
  border-block-start: 1px solid var(--ts-line);
}

.ts-tab {
  min-height: 52px;
  padding: 8px 4px;
  background: transparent;
  border: 0;
  border-block-start: 3px solid transparent;
  font: inherit;
  font-weight: 600;
  color: var(--ts-ink-2);
  cursor: pointer;
}

.ts-tab[aria-current="page"] {
  color: var(--ts-accent);
  border-block-start-color: var(--ts-accent);
}

/* ------------------------------------------------------ common pieces */

.ts-screenTitle {
  margin: 0 0 2px;
  font-size: 20px;
  font-weight: 700;
}

.ts-sub {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--ts-ink-2);
}

.ts-card {
  padding: 12px;
  margin-block-end: 12px;
  background: var(--ts-surface);
  border: 1px solid var(--ts-line);
  border-radius: var(--ts-r-card);
}

.ts-card__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.ts-card__meta {
  margin: 2px 0 8px;
  font-size: 13px;
  color: var(--ts-ink-2);
}

.ts-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--ts-r-pill);
  font-size: 12px;
  font-weight: 700;
  background: var(--ts-chip-logged-bg);
  color: var(--ts-chip-logged-ink);
}

.ts-chip--sent {
  background: var(--ts-chip-sent-bg);
  color: var(--ts-chip-sent-ink);
}

.ts-chip--approved {
  background: var(--ts-chip-approved-bg);
  color: var(--ts-chip-approved-ink);
}

.ts-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: var(--ts-r-btn);
  border: 1px solid transparent;
  background: transparent;
  font: inherit;
  font-weight: 600;
  color: var(--ts-ink);
  cursor: pointer;
}

.ts-btn--primary {
  background: var(--ts-accent);
  border-color: var(--ts-accent);
  color: var(--ts-accent-ink);
}

.ts-btn--secondary {
  border-color: var(--ts-ink);
}

.ts-btn--link {
  min-height: 32px;
  padding: 4px 0;
  color: var(--ts-accent);
  text-decoration: underline;
}

.ts-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.ts-btn--primary:disabled {
  background: var(--ts-ink-2);
  border-color: var(--ts-ink-2);
}

.ts-btnRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block: 12px;
}

.ts-empty {
  margin: 0 0 12px;
  padding: 14px;
  background: var(--ts-surface);
  border: 1px dashed var(--ts-line-control);
  border-radius: var(--ts-r-card);
  color: var(--ts-ink-2);
  font-size: 14px;
}

.ts-note {
  margin: 8px 0;
  font-size: 13px;
  color: var(--ts-ink-2);
}

.ts-heading {
  margin: 20px 0 8px;
  font-size: 15px;
  font-weight: 700;
}

.ts-label {
  display: block;
  margin-block-end: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ts-ink-2);
}

.ts-input,
.ts-select,
.ts-textarea {
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  background: var(--ts-surface);
  border: 1px solid var(--ts-line-control);
  border-radius: var(--ts-r-btn);
  color: var(--ts-ink);
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.ts-textarea {
  min-height: 96px;
  resize: vertical;
}

.ts-field {
  margin-block-end: 12px;
}

.ts-fieldset {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
}

.ts-fieldset legend {
  padding: 0;
  margin-block-end: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ts-ink-2);
}

.ts-radioRow {
  display: flex;
  gap: 16px;
}

.ts-radio,
.ts-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 14px;
  cursor: pointer;
}

.ts-radio input,
.ts-check input {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--ts-accent);
}

.ts-error {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: #8C2F0B;
}

/* -------------------------------------------------------- quote lines */

.ts-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 8px;
  padding: 10px 0;
  border-block-end: 1px solid var(--ts-line);
}

.ts-line:last-of-type {
  border-block-end: 0;
}

.ts-line__name {
  grid-column: 1;
  font-weight: 600;
}

.ts-line__total {
  grid-column: 2;
  text-align: end;
  font-weight: 700;
}

.ts-line__controls {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ts-step {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--ts-line-control);
  border-radius: var(--ts-r-btn);
  background: var(--ts-surface);
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  color: var(--ts-ink);
  cursor: pointer;
}

.ts-step:disabled {
  opacity: 0.45;
  cursor: default;
}

.ts-qty {
  min-width: 2.5ch;
  text-align: center;
  font-weight: 700;
}

.ts-each {
  color: var(--ts-ink-2);
  font-size: 13px;
}

.ts-line__remove {
  margin-inline-start: auto;
}

.ts-totals {
  margin-block-start: 12px;
  padding-block-start: 12px;
  border-block-start: 2px solid var(--ts-ink);
}

.ts-total {
  display: flex;
  justify-content: space-between;
  padding-block: 3px;
  font-size: 14px;
}

.ts-total--grand {
  margin-block-start: 6px;
  font-size: 18px;
  font-weight: 700;
}

/* ------------------------------------------------------------ photos */

.ts-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-block: 12px;
}

.ts-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--ts-r-btn);
  overflow: hidden;
  background: var(--ts-surface);
  border: 1px solid var(--ts-line);
}

.ts-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ts-photo__remove {
  position: absolute;
  inset-block-start: 4px;
  inset-inline-end: 4px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: var(--ts-r-pill);
  background: var(--ts-ink);
  color: var(--ts-surface);
  font: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

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

/* ------------------------------------------------- sheets and overlays */

/* A sheet replaces the screen rather than floating over it, so there is
   nothing behind it to tab into and no trap to build. The two overlays are
   different: they are dialogs and they say so. */
.ts-sheet {
  padding-block-end: 8px;
}

.ts-sheetTitle {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
}

.ts-catalogItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  padding: 10px 12px;
  margin-block-end: 8px;
  background: var(--ts-surface);
  border: 1px solid var(--ts-line-control);
  border-radius: var(--ts-r-card);
  font: inherit;
  text-align: start;
  color: var(--ts-ink);
  cursor: pointer;
}

.ts-catalogItem span:first-child {
  font-weight: 600;
}

.ts-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  background: var(--ts-bg);
  padding: 16px;
  overflow-y: auto;
}

.ts-overlayTitle {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
}

.ts-sheetDoc {
  padding: 14px;
  background: var(--ts-surface);
  border: 1px solid var(--ts-line);
  border-radius: var(--ts-r-card);
}

.ts-sheetDoc__company {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.ts-sheetDoc__job {
  margin: 2px 0 12px;
  font-size: 13px;
  color: var(--ts-ink-2);
}

.ts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.ts-table th,
.ts-table td {
  padding: 6px 4px;
  border-block-end: 1px solid var(--ts-line);
  text-align: end;
}

.ts-table th:first-child,
.ts-table td:first-child {
  text-align: start;
}

.ts-table th {
  font-size: 12px;
  color: var(--ts-ink-2);
}

.ts-sign {
  margin-block-start: 16px;
  padding-block-start: 6px;
  border-block-start: 1px solid var(--ts-ink);
  font-size: 12px;
  color: var(--ts-ink-2);
}

.ts-honesty {
  margin-block: 12px 0;
  padding: 12px;
  background: var(--ts-chip-logged-bg);
  border-radius: var(--ts-r-card);
  font-size: 13px;
}

.ts-detail {
  display: flex;
  gap: 6px;
  padding-block: 6px;
  border-block-end: 1px solid var(--ts-line);
  font-size: 14px;
}

/* ---------------------------------------------------------- utilities */

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

@media (prefers-reduced-motion: reduce) {
  .ts-app *,
  .fq-demo {
    transition: none;
    animation: none;
  }
}

/* -------------------------------------------------------------- print */

@media print {
  .fq-frame {
    display: none;
  }

  .fq-printNote {
    display: block;
    color: #000000;
  }

  .fq-demo {
    position: static;
  }
}