/* ===========================================================================
   templates.css — page-scoped gaps for the homeowner templates library.

   WHAT THIS FILE IS
   Four take-away documents (scope brief, bid comparison sheet, walkthrough
   question list, project log) plus the library hub. Everything structural —
   the tool shell, the form primitives, the honest blank, the focus ring, the
   44px targets — belongs to /assets/tool-chassis.css and is NOT re-declared
   here. This file styles the gaps that chassis has no class for: the paper
   grain of a printable form, the bid matrix, and the repeating log entry.

   RULES OBSERVED
   - Not one hex literal. Every colour resolves through a canon token declared
     in /assets/v4.css and mirrored in /assets/tool-chassis.css.
   - Nothing here overrides a chassis rule. The focus ring on tool pages is the
     chassis ring, untouched; the hub (which has no .tc-tool) restates the same
     ring from the same two tokens so the two match.
   - No score, meter, badge, seal, star, grade or progress bar is styled here,
     because none exists anywhere in this library. A comparison sheet that
     totalled a column would be scoring a business. It does not.
   - prefers-reduced-motion removes motion and takes no content with it.
   - The print block is the point of the library, not an afterthought: with or
     without JavaScript, Ctrl+P produces a usable paper document.
   =========================================================================== */

/* --------------------------------------------------------------------------
   Page frame — shared by the hub and by the four template pages
   -------------------------------------------------------------------------- */

.tpl-intro {
  padding: clamp(28px, 5vw, 56px) 0 clamp(12px, 2vw, 20px);
  background: var(--foam-50);
}

.tpl-intro__inner {
  display: grid;
  gap: 14px;
  max-width: 900px;
}

.tpl-crumb {
  font-size: 13px;
  font-weight: 600;
  color: var(--pacific-700);
  letter-spacing: .01em;
}

.tpl-crumb a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tpl-intro h1 {
  margin: 0;
  font-size: clamp(30px, 4.4vw, 50px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--pacific-900);
  text-wrap: balance;
  max-width: 24ch;
}

.tpl-lede {
  margin: 0;
  max-width: 66ch;
  font-size: clamp(16px, 1.5vw, 19px);
  color: var(--pacific-700);
  text-wrap: pretty;
}

.tpl-stage {
  padding: clamp(20px, 3vw, 36px) 0 clamp(32px, 5vw, 64px);
  background: var(--foam-50);
}

.tpl-stage__inner {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  max-width: 1080px;
}

/* --------------------------------------------------------------------------
   Typography inside a template card
   -------------------------------------------------------------------------- */

.tpl-h3 {
  margin: 10px 0 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--pacific-900);
  text-wrap: balance;
}

.tpl-note {
  margin: 0;
  max-width: 74ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--pacific-900);
  text-wrap: pretty;
}

.tpl-note--caption {
  padding: 12px 14px;
  background: var(--sand-200);
  border-radius: 8px;
}

.tpl-note a,
.tpl-steps a,
.tpl-related__list a,
.tpl-src-link {
  color: var(--pacific-900);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

.tpl-priv {
  margin: 0;
  max-width: 74ch;
  font-size: 13px;
  line-height: 1.6;
  color: var(--pacific-700);
}

.tpl-priv b {
  color: var(--pacific-900);
}

.tpl-steps {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-inline-start: 22px;
  max-width: 74ch;
  color: var(--pacific-900);
  font-size: 15px;
  line-height: 1.6;
}

/* A control that should span the whole input grid. */
.tpl-control--wide {
  grid-column: 1 / -1;
}

/* --------------------------------------------------------------------------
   Sections inside a long form. Native <fieldset>/<legend>, so the grouping is
   announced rather than implied by a heading that sits next to nothing.
   -------------------------------------------------------------------------- */

.tpl-fieldset {
  min-width: 0;
  margin: 0;
  padding: clamp(14px, 2vw, 20px);
  border: 1px solid var(--ocean-600);
  border-radius: 8px;
  background: var(--white);
}

.tpl-fieldset + .tpl-fieldset {
  margin-top: 14px;
}

.tpl-legend {
  padding: 0 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--pacific-900);
  text-wrap: balance;
}

.tpl-fieldset__note {
  margin: 0 0 14px;
  max-width: 74ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--pacific-900);
}

/* --------------------------------------------------------------------------
   The generated document
   -------------------------------------------------------------------------- */

.tpl-doc {
  display: grid;
  gap: 8px;
  padding: 16px;
  background: var(--foam-100);
  border: 1px solid var(--ocean-600);
  border-radius: 8px;
}

.tpl-doc__text {
  min-height: 280px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre;
  overflow-x: auto;
  background: var(--white);
}

.tpl-doc-note {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--pacific-900);
}

/* --------------------------------------------------------------------------
   The bid matrix. A real <table>: column headers are the bids, row headers are
   what a bid either states or does not, and every cell holds a labelled native
   <select>. There is no total row and no total column, deliberately — see the
   note printed above the table on the page itself.
   -------------------------------------------------------------------------- */

.tpl-matrix-scroll {
  overflow-x: auto;
  border: 1px solid var(--ocean-600);
  border-radius: 8px;
  background: var(--white);
}

.tpl-matrix-scroll:focus-visible {
  outline: 3px solid var(--pacific-900);
  outline-offset: 2px;
  box-shadow: 0 0 0 8px var(--aqua-400);
}

.tpl-matrix {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 14px;
  color: var(--pacific-900);
}

.tpl-matrix caption {
  padding: 14px 16px 0;
  font-size: 14px;
  line-height: 1.6;
  text-align: left;
  color: var(--pacific-900);
}

.tpl-matrix th,
.tpl-matrix td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--sky-400);
  text-align: left;
  vertical-align: top;
}

.tpl-matrix thead th {
  border-bottom: 2px solid var(--ocean-600);
  font-size: 14px;
  font-weight: 700;
  background: var(--foam-100);
}

.tpl-matrix tbody th {
  width: 34%;
  font-weight: 700;
  line-height: 1.45;
  background: var(--foam-50);
}

.tpl-matrix tbody tr:last-child th,
.tpl-matrix tbody tr:last-child td {
  border-bottom: none;
}

.tpl-matrix__why {
  display: block;
  margin-top: 6px;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.55;
  color: var(--pacific-900);
}

.tpl-matrix .tc-select {
  width: 100%;
  min-width: 168px;
}

.tpl-bidname {
  display: grid;
  gap: 6px;
}

.tpl-bidname .tc-text {
  min-width: 150px;
}

/* --------------------------------------------------------------------------
   Repeating entries — the project log. Three blank entries ship in the HTML so
   the page prints as a usable paper log with JavaScript switched off; the
   "Add another entry" button clones one when JavaScript is on.
   -------------------------------------------------------------------------- */

.tpl-entries {
  display: grid;
  gap: 14px;
}

.tpl-entry {
  min-width: 0;
  margin: 0;
  padding: clamp(14px, 2vw, 20px);
  border: 1px solid var(--ocean-600);
  border-radius: 8px;
  background: var(--white);
  break-inside: avoid;
}

.tpl-entry__legend {
  padding: 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--pacific-900);
}

/* --------------------------------------------------------------------------
   Question list — the walkthrough.

   A question is a chassis .tc-control and nothing more exotic: the <label> IS
   the question, the .tc-hint under it is what a complete answer covers, and the
   box is what you were actually told. That keeps every question a real labelled
   control instead of a heading with an orphaned textarea beside it. This block
   only makes the label read at question size and gives each one its own card.
   -------------------------------------------------------------------------- */

.tpl-ask {
  grid-column: 1 / -1;
  padding: clamp(12px, 2vw, 16px);
  border: 1px solid var(--sky-400);
  border-radius: 8px;
  background: var(--foam-50);
  break-inside: avoid;
}

.tpl-ask .tc-label {
  font-size: 16px;
  line-height: 1.4;
  max-width: 74ch;
  text-wrap: pretty;
}

.tpl-ask .tc-hint {
  max-width: 74ch;
}

/* --------------------------------------------------------------------------
   Library hub cards
   -------------------------------------------------------------------------- */

.tpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tpl-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: clamp(20px, 3vw, 28px);
  background: var(--white);
  border: 1px solid var(--ocean-600);
  border-radius: 8px;
  /* The chassis already declares this shadow. Retyping the rgba() would be a
     second copy of a colour, which is how a palette drifts. */
  box-shadow: var(--tc-shadow-soft);
}

.tpl-card h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--pacific-900);
  text-wrap: balance;
}

.tpl-card h3 a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}

.tpl-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--pacific-900);
  text-wrap: pretty;
}

.tpl-card__meta {
  margin-top: auto;
  padding-top: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--pacific-700);
}

/* The hub has no .tc-tool, so the chassis ring does not reach it. Same ring,
   same two tokens, so the hub and the pages it links to focus identically. */
.tpl-page :focus-visible {
  outline: 3px solid var(--pacific-900);
  outline-offset: 2px;
  box-shadow: 0 0 0 8px var(--aqua-400);
  border-radius: 8px;
}

.tpl-page :focus:not(:focus-visible) {
  outline: none;
}

/* TARGET SIZE.

   Every STANDALONE target in this library clears 44px in its smaller dimension:
   navigation links, footer links, card links, breadcrumb steps and the source
   link. The chassis already holds every control and button at 44px; these are
   the ones it does not own.

   Links inside a sentence are deliberately left inline. WCAG's target-size
   rule exempts a target that sits in a block of text, and forcing a flex box
   with a 44px minimum onto a mid-sentence link breaks the line it lives in —
   it would make the prose worse to read in order to satisfy a rule that
   explicitly does not apply to it. The verification run encodes the same
   exception rather than waiving the check.

   The footer selector carries an attribute selector for a reason: v4.css sets
   `.site-footer__grid > div:not(.site-footer__brand) a` to 34px, which is
   specificity (0,2,2) and beat the earlier (0,2,1) selector here. Measured in
   the browser, not assumed. `[href]` buys the extra point in the class column
   without adding a wrapper element. */
.tpl-page .tpl-card h3 a,
.tpl-page .primary-nav a[href],
.tpl-page .site-footer a[href] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Two standalone links that have to keep wrapping their own text: sizing them
   with padding rather than a flex box keeps a long link readable on a phone. */
.tpl-page .tpl-crumb a[href],
.tpl-page .tc-foot__item > a[href] {
  display: inline-block;
  padding-block: 12px;
  min-height: 44px;
}

/* --------------------------------------------------------------------------
   Related links + disclosure
   -------------------------------------------------------------------------- */

.tpl-related {
  display: grid;
  gap: 12px;
  padding: clamp(18px, 2.6vw, 26px);
  background: var(--white);
  border: 1px solid var(--sky-400);
  border-radius: 8px;
}

.tpl-related__list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-inline-start: 20px;
  max-width: 80ch;
  color: var(--pacific-900);
  font-size: 15px;
  line-height: 1.6;
}

.tpl-disclosure {
  padding: clamp(20px, 3vw, 32px) 0;
  background: var(--foam-100);
}

.tpl-disclosure p {
  margin: 0 0 10px;
  max-width: 92ch;
  font-size: 14px;
  line-height: 1.65;
  color: var(--pacific-900);
}

.tpl-disclosure p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Narrow viewports
   -------------------------------------------------------------------------- */

@media (max-width: 620px) {
  .tpl-matrix {
    min-width: 640px;
  }
}

/* --------------------------------------------------------------------------
   PRINT — this is the deliverable, not a courtesy.

   Two states have to print, and both do:
   1. JavaScript ON, document built  — the generated document prints, and so
      does the form that produced it, so the paper matches the file.
   2. JavaScript OFF or nothing built — the form itself prints as a blank
      paper document with writable boxes. That is why .tc-input is NOT hidden
      here, unlike on the tool pages: the blank form IS the template.

   Site chrome, buttons, status lines and the no-JS banner come off. Every
   input keeps a visible edge so there is something to write on.
   -------------------------------------------------------------------------- */

@media print {
  /* Paper does not animate. Killing transitions here is not decoration: a
     transitioned border-color that has not been told to run yet still reports
     — and can still print — its screen value, which is how the writable edge
     below silently came out the wrong colour the first time it was measured. */
  .tpl-page *,
  .tpl-page *::before,
  .tpl-page *::after {
    transition: none !important;
    animation: none !important;
  }

  .site-header,
  .source-rail,
  .site-footer,
  .skip-link,
  .tpl-related,
  .tpl-crumb,
  .tc-actions,
  .tc-nojs,
  .tc-status,
  .tc-live,
  .tpl-priv,
  .tpl-doc-note,
  [data-tpl-print-hide] {
    display: none !important;
  }

  .tpl-intro,
  .tpl-stage,
  .tpl-disclosure {
    background: none;
    padding: 0;
  }

  .tpl-page {
    background: none;
  }

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

  .tpl-intro h1 {
    font-size: 22pt;
  }

  .tpl-lede {
    font-size: 11pt;
  }

  /* The method disclosure is closed on screen. On paper it opens, because a
     printed document that hides how it was made is a worse document.

     Two declarations are needed, not one. Setting `display` on the child is
     enough in older engines; current Chromium hides a closed <details> through
     the `::details-content` pseudo-element instead, so the child stays laid out
     and invisible. Both are set, and the result was measured under print media
     rather than assumed. Engines that do not know `::details-content` simply
     ignore that rule. */
  .tc-method > .tc-method__body {
    display: block;
  }

  .tc-method::details-content {
    content-visibility: visible;
    block-size: auto;
  }

  .tpl-fieldset,
  .tpl-entry,
  .tpl-ask,
  .tpl-matrix tbody tr {
    break-inside: avoid;
  }

  .tpl-fieldset,
  .tpl-entry,
  .tpl-ask,
  .tpl-matrix-scroll,
  .tpl-card {
    box-shadow: none;
  }

  /* Writable boxes. A printed form with invisible fields is a blank page. */
  .tc-text,
  .tc-select {
    border: 1px solid var(--pacific-900) !important;
    background: none !important;
    min-height: 34px;
  }

  textarea.tc-text {
    min-height: 76px;
  }

  .tpl-matrix-scroll {
    overflow: visible;
  }

  /* The sheet has to fit inside a Letter page with ordinary margins — roughly
     720 CSS px of printable width. On screen each cell holds a 168px select so
     the option text is readable; on paper the select is a printed box with one
     word in it, so both minimums come off and the table sizes to its content.
     Measured at 720px in the browser under print media, not assumed. */
  .tpl-matrix {
    min-width: 0;
    font-size: 10pt;
  }

  .tpl-matrix .tc-select,
  .tpl-matrix .tc-text {
    min-width: 0;
  }

  .tpl-matrix tbody th {
    width: 40%;
  }

  .tpl-doc__text {
    min-height: 0;
    height: auto;
    white-space: pre-wrap;
    border: none;
    font-size: 10pt;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    word-break: break-all;
  }
}

/* --------------------------------------------------------------------------
   Reduced motion — nothing in this library animates, and this keeps it that
   way if a future edit forgets.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .tpl-page * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}