/* ===========================================================================
   quote-gap-analyzer.css — page-scoped only.

   Everything structural comes from /assets/tool-chassis.css and /assets/v4.css.
   This file adds the four things the chassis deliberately has no class for:
   the page frame around the tool, the checklist item layout, the question that
   travels under each line, and the built question list.

   RULES HELD HERE
   ---------------
   - No colour literal. Every colour resolves through a canon token defined in
     v4.css / tool-chassis.css :root (--pacific-900 … --coral-400) or through
     the chassis' derived --tc-* variables, which only exist inside .tc-tool.
   - No score, meter, badge, seal, star or progress bar. There is no rule here
     that could render one, and none should be added.
   - Minimum touch target is 44px on anything interactive; the chassis sets it
     on .tc-select / .tc-text / .tc-btn and nothing here reduces it.
   - prefers-reduced-motion keeps every word, state and boundary. The only
     motion this file adds is a transition, and it is removed, not replaced.
   =========================================================================== */

/* ==========================================================================
   1. PAGE FRAME
   ========================================================================== */

.qga-page {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  padding: clamp(20px, 4vw, 48px) 0 clamp(40px, 6vw, 72px);
}

.qga-crumb {
  font-size: 14px;
  color: var(--pacific-700);
}

.qga-crumb a {
  color: var(--pacific-900);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.qga-crumb span[aria-hidden] {
  padding: 0 4px;
  color: var(--ocean-600);
}

.qga-intro {
  display: grid;
  gap: 14px;
  max-width: 68ch;
}

.qga-intro h1 {
  margin: 0;
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.015em;
  color: var(--pacific-900);
  text-wrap: balance;
}

.qga-intro__lede {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--pacific-700);
  text-wrap: pretty;
}

/* ==========================================================================
   2. CHECKLIST
   ========================================================================== */

.qga-list {
  display: grid;
  gap: 14px;
}

.qga-group__title {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tc-ink-soft);
}

.qga-group__note {
  margin: 0;
  max-width: 70ch;
  font-size: 14px;
  color: var(--tc-ink);
  text-wrap: pretty;
}

.qga-group {
  display: grid;
  gap: 14px;
}

.qga-group__sub {
  margin: 4px 0 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--tc-ink);
}

/* One line of the checklist. Same box as a fact, because reading a bid line by
   line IS the work — it is not a form to get past on the way to a result. */
.qga-item {
  gap: 8px;
  padding: 14px 16px;
  background: var(--tc-surface);
  border: 1px solid var(--tc-edge);
  border-radius: var(--tc-radius-md);
}

.qga-item .tc-hint {
  max-width: 74ch;
}

.qga-item .tc-hint .tc-chip {
  margin-top: 4px;
}

.qga-item .tc-hint a {
  color: var(--tc-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

.qga-item .tc-select {
  max-width: 34ch;
}

/* The question that travels with the line. It is on the page whether or not
   JavaScript is running, which is what makes the no-JS page complete rather
   than degraded. */
.qga-item__qlabel {
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tc-ink-soft);
}

.qga-item__q {
  margin: 0;
  max-width: 74ch;
  padding: 10px 13px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--tc-ink);
  background: var(--tc-quiet);
  border-inline-start: 4px solid var(--tc-edge);
  border-radius: var(--tc-radius-sm);
  text-wrap: pretty;
}

.qga-item__caveat {
  margin: 0;
  max-width: 74ch;
  font-size: 14px;
  color: var(--tc-ink);
  padding: 10px 13px;
  background: var(--tc-warm);
  border-radius: var(--tc-radius-sm);
  text-wrap: pretty;
}

/* ==========================================================================
   3. WORD CHECK
   ========================================================================== */

.qga-wordcheck {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  background: var(--tc-surface);
  border: 1px solid var(--tc-edge);
  border-radius: var(--tc-radius-md);
}

.qga-wordcheck__terms {
  margin: 0;
  max-width: 74ch;
  font-size: 13px;
  color: var(--tc-ink-soft);
  text-wrap: pretty;
}

.qga-words {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  background: var(--tc-quiet);
  border-radius: var(--tc-radius-sm);
}

.qga-words p {
  margin: 0;
  max-width: 72ch;
  text-wrap: pretty;
}

.qga-words__caveat {
  font-size: 14px;
  color: var(--tc-ink);
}

/* ==========================================================================
   4. THE BUILT QUESTION LIST
   ========================================================================== */

.qga-held__lede {
  margin: 0;
  max-width: 72ch;
  color: var(--tc-ink);
  text-wrap: pretty;
}

.qga-built {
  display: grid;
  gap: 14px;
  padding: 18px;
  background: var(--tc-surface);
  border: 1px solid var(--tc-edge);
  border-radius: var(--tc-radius-md);
}

.qga-built__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--tc-ink);
}

.qga-built__sub {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--tc-ink);
}

.qga-built__count,
.qga-built__after {
  margin: 0;
  max-width: 72ch;
  font-size: 14px;
  color: var(--tc-ink);
  text-wrap: pretty;
}

.qga-qlist {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-inline-start: 22px;
}

.qga-qlist li {
  padding-inline-start: 4px;
}

.qga-q__label {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tc-ink-soft);
}

.qga-q__text {
  margin: 2px 0 0;
  max-width: 72ch;
  color: var(--tc-ink);
  text-wrap: pretty;
}

.qga-copy {
  margin-top: 4px;
}

.qga-copy textarea {
  font-size: 15px;
  line-height: 1.55;
}

/* ==========================================================================
   5. AFTER THE TOOL
   ========================================================================== */

.qga-next {
  display: grid;
  gap: 10px;
  max-width: 72ch;
}

.qga-next h2 {
  margin: 0;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700;
  color: var(--pacific-900);
}

.qga-next p {
  margin: 0;
  color: var(--pacific-700);
  text-wrap: pretty;
}

.qga-foot__note {
  margin: 0;
  max-width: 78ch;
  font-size: 14px;
  color: var(--tc-ink);
  text-wrap: pretty;
}

/* ==========================================================================
   6. NARROW VIEWPORTS
   ========================================================================== */

@media (max-width: 620px) {
  .qga-item .tc-select {
    max-width: none;
  }
}

/* ==========================================================================
   7. REDUCED MOTION
   Nothing in this file animates. The rule is here so that any transition added
   later is removed rather than left behind, and so the intent is on the record:
   no state in this tool is carried by motion, so removing motion removes
   nothing a reader needs.
   ========================================================================== */

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

/* ==========================================================================
   8. FORCED COLORS
   ========================================================================== */

@media (forced-colors: active) {
  .qga-item,
  .qga-wordcheck,
  .qga-built,
  .qga-item__q,
  .qga-item__caveat {
    border: 1px solid CanvasText;
  }
}

/* ==========================================================================
   9. PRINT
   The checklist and every question print, because a homeowner reading a bid at
   a kitchen table with the contractor in front of them is the actual scene.
   ========================================================================== */

@media print {
  .site-header,
  .site-footer,
  .qga-crumb,
  .qga-next,
  .tc-actions,
  .qga-wordcheck {
    display: none !important;
  }

  .tc-tool {
    border: none;
    box-shadow: none;
    padding: 0;
  }

  .tc-method[open] .tc-method__body,
  .qga-item__q {
    break-inside: avoid;
  }
}