/*
 * Technical Resources and Evidence — what is specific to a record library page:
 * the spacing around the type rail, and the single Technical Resource page,
 * which is a file download page. That page adds a shallow title band, a grey
 * information bar saying what the document is, the description beside the
 * download card, the products the document covers, and one line of library
 * links at the foot.
 *
 * The downloads centre at the other end of the same library — the archive and a
 * document type's own page — is scoped under .aq-library at the foot of this
 * sheet: a shallow title band, one toolbar, a count line, the compact file rows
 * and the folded-away explanation. .aq-technical is the shell both pages share.
 *
 * Everything the single page adds is scoped under .aq-doc-page.
 *
 * The record card itself is a shared primitive (assets/css/components.css), and
 * the product grids these pages render are styled by assets/css/shop.css, which
 * functions.php enqueues alongside this sheet.
 */

/* The record library — the Technical Resource archive, the Evidence entries. - */

.aq-record-body { margin-top: 30px; max-width: 80ch; }

/* The conditions/result pair and the labelled block are shared primitives:
   see assets/css/components.css. */

.aq-page.aq-technical .aq-rail,
.aq-page.aq-evidence .aq-rail { margin-bottom: 22px; }

/* The single Technical Resource — a file download page. --------------------- */

/* A narrower wrap than the rest of the site: this page is one document, and the
   closing band at its foot reads the same token. */
.aq-page.aq-doc-page { --aq-wrap: 1120px; }

/* One rhythm for the page's regions: 32px above and below the content. */
.aq-page.aq-doc-page .aq-section--tight { padding: 32px 0; }

/* The hero: the shallowest band on the site, because this page's subject is the
   file below it rather than its own title. The title is the page's only large
   type and it wraps onto a second line on a long product name, so the band is
   kept to what a two-line title needs. Its dark fill belongs to the kit. */
.aq-page.aq-doc-page .aq-doc-hero { padding: 26px 0 28px; }
.aq-page.aq-doc-page .aq-doc-hero h1 {
  margin-bottom: 0;
  font-size: 36px;
  line-height: 1.16;
  max-width: 34ch;
}

/* The grey information bar: what the document is, as one wrapping line of
   label/value pairs with the status pill at the end of it. */
.aq-page.aq-doc-page .aq-doc-facts {
  list-style: none;
  margin: 0 0 24px;
  padding: 14px 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  background: var(--aq-alt);
  border: 1px solid var(--aq-border-soft);
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--aq-body);
}
.aq-page.aq-doc-page .aq-doc-facts li { display: flex; align-items: center; gap: 6px; }
.aq-page.aq-doc-page .aq-doc-facts b { font-weight: 700; color: var(--aq-ink); }
/* The pill keeps its own size inside the row instead of stretching to it. */
.aq-page.aq-doc-page .aq-doc-facts .aq-badge { flex: none; align-self: center; }

/* The description: the page's own copy, a little larger than prose elsewhere. */
.aq-page.aq-doc-page .aq-record-body {
  margin-top: 0;
  max-width: 72ch;
  font-size: 16px;
  line-height: 1.6;
}

/* Description on the left, download card on the right, the products under the
   description. 340px holds a file's name beside its own button, which is what a
   record holding several files prints. */
.aq-page.aq-doc-page .aq-doc { display: grid; gap: 28px 32px; }
.aq-page.aq-doc-page .aq-doc__main,
.aq-page.aq-doc-page .aq-doc__more { min-width: 0; }
@media (min-width: 901px) {
  .aq-page.aq-doc-page .aq-doc {
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
  }
  /* The card stands beside the description and the products, not beside the
     description alone: the two rows it spans keep their own heights, so a long
     file list never pushes the products down the page. */
  .aq-page.aq-doc-page .aq-doc__aside { grid-column: 2; grid-row: 1 / span 2; }
  /* A record with no file has nothing to put in a side column. */
  .aq-page.aq-doc-page .aq-doc--single { grid-template-columns: minmax(0, 1fr); }
}

/* The products this document covers: compact horizontal cards — the image at
   its own size, the name, and one route to the product page. Price and
   add-to-cart stay on the product page. */
.aq-page.aq-doc-page .aq-doc-products {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
@media (min-width: 701px) {
  .aq-page.aq-doc-page .aq-doc-products {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  }
}
.aq-page.aq-doc-page .aq-doc-product {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--aq-border);
  border-radius: 12px;
  background: var(--aq-white);
}
/* A fixed frame whatever the photo's shape, so the text lines up down the list
   and the whole product shows inside it. */
.aq-page.aq-doc-page .aq-doc-product__media {
  flex: none;
  width: 96px;
  height: 96px;
  border-radius: 8px;
  background: var(--aq-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.aq-page.aq-doc-page .aq-doc-product__media img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  display: block;
}
.aq-page.aq-doc-page .aq-doc-product__body { min-width: 0; }
.aq-page.aq-doc-page .aq-doc-product__title {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.35;
}
.aq-page.aq-doc-page .aq-doc-product__title a {
  color: var(--aq-ink);
  text-decoration: none;
}
.aq-page.aq-doc-page .aq-doc-product__title a:hover {
  color: var(--aq-blue);
  text-decoration: underline;
}
.aq-page.aq-doc-page .aq-doc-product__link { margin: 6px 0 0; font-size: 13.5px; }
.aq-page.aq-doc-page .aq-doc-product__link a {
  color: var(--aq-blue);
  font-weight: 600;
  text-decoration: none;
}
.aq-page.aq-doc-page .aq-doc-product__link a:hover { text-decoration: underline; }

/* The download card: which files they are and the way to get them. The date, the
   status and the version live in the grey bar, so the card does not repeat them,
   and the card is as tall as what it holds — no height of its own, no padding
   left over under the last button. */
.aq-page.aq-doc-page .aq-doc-card {
  background: var(--aq-white);
  border: 1px solid var(--aq-border);
  border-radius: 12px;
  padding: 22px 24px;
}
.aq-page.aq-doc-page .aq-doc-card__title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aq-muted);
}
/* A file's name as a reader reads it, under the card's heading. It is not an
   eyebrow and not a filename: it keeps the case it is written in and wraps
   instead of overflowing a narrow card. */
.aq-page.aq-doc-page .aq-doc-card__name {
  margin: 12px 0 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--aq-ink);
  overflow-wrap: anywhere;
}
.aq-page.aq-doc-page .aq-doc-card__file {
  margin: 5px 0 0;
  font-size: 13.5px;
  color: var(--aq-body);
}
/* The single file's button fills the card, so the download is one target the
   width of the column. Flex rather than the kit's inline-flex, which would only
   wrap the two anchors instead of stacking them. */
.aq-page.aq-doc-page .aq-doc-card .aq-btn { display: flex; width: 100%; }
.aq-page.aq-doc-page .aq-doc-card .aq-btn.aq-btn-lg { min-height: 48px; }
.aq-page.aq-doc-page .aq-doc-card .aq-btn + .aq-btn { margin-top: 10px; }
/* The air between what a file is and the button that takes it. */
.aq-page.aq-doc-page .aq-doc-card__name + .aq-doc-card__file + .aq-btn,
.aq-page.aq-doc-page .aq-doc-card__file + .aq-btn,
.aq-page.aq-doc-page .aq-doc-card__name + .aq-btn { margin-top: 18px; }

/* A record that holds several files: one row per file — its name and its size on
   the left, one small button of the same kind on the right — with a hairline
   between the rows, so four files read as one list of four downloads rather than
   as four cards' worth of buttons. */
.aq-page.aq-doc-page .aq-doc-files { list-style: none; margin: 6px 0 0; padding: 0; }
.aq-page.aq-doc-page .aq-doc-files > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
}
.aq-page.aq-doc-page .aq-doc-files > li:last-child { padding-bottom: 0; }
.aq-page.aq-doc-page .aq-doc-files > li + li { border-top: 1px solid var(--aq-border-soft); }
.aq-page.aq-doc-page .aq-doc-file__body { min-width: 0; }
.aq-page.aq-doc-page .aq-doc-file__name {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--aq-ink);
  overflow-wrap: anywhere;
}
/* The size sits under the name, so the row is two lines tall and the button
   keeps its own height beside them. */
.aq-page.aq-doc-page .aq-doc-files .aq-doc-card__file { margin: 3px 0 0; }
/* The one button style the whole list uses: the card's own buttons are the width
   of the card, and these are not — they are one control per row. */
.aq-page.aq-doc-page .aq-doc-files .aq-btn {
  flex: none;
  display: inline-flex;
  width: auto;
  min-height: 44px;
  padding: 0 16px;
  font-size: 13px;
  white-space: nowrap;
}
/* The card's own button spacing, which the list's nesting would otherwise hide
   from the external link that follows it. */
.aq-page.aq-doc-page .aq-doc-card .aq-doc-files + .aq-btn { margin-top: 18px; }

/* The foot of a page in the record: the rest of the library as one line of links
   rather than another row of cards, with air under it before the closing band so
   the two do not read as one block. A document page ends with the records beside
   it and a library page with the other routes into the record, so the line is
   written once and printed by both. */
.aq-page.aq-doc-page .aq-record-links,
.aq-page.aq-library .aq-record-links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
  padding: 24px 0 48px;
  border-top: 1px solid var(--aq-border);
  font-size: 13.5px;
}
.aq-page.aq-doc-page .aq-record-links__label,
.aq-page.aq-library .aq-record-links__label { font-weight: 700; color: var(--aq-ink); }
.aq-page.aq-doc-page .aq-record-links ul,
.aq-page.aq-library .aq-record-links ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0;
  padding: 0;
}
.aq-page.aq-doc-page .aq-record-links a,
.aq-page.aq-library .aq-record-links a {
  color: var(--aq-blue);
  font-weight: 600;
  text-decoration: none;
}
.aq-page.aq-doc-page .aq-record-links a:hover,
.aq-page.aq-library .aq-record-links a:hover { text-decoration: underline; }

/* Small screens ------------------------------------------------------------ */

@media (max-width: 900px) {
  /* One column, in the order a reader arrives in: what the document is, what it
     says, the files themselves, and last the products they fit. The card is not
     lifted above the description, because a page that answers "what is this"
     before "take it" is the one a first-time reader can use. */
  .aq-page.aq-doc-page .aq-doc-hero h1 { font-size: 30px; }

  .aq-records { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

@media (max-width: 680px) {
  .aq-page.aq-doc-page .aq-doc-hero { padding: 22px 0 24px; }
  .aq-page.aq-doc-page .aq-doc-hero h1 { font-size: 27px; }
  .aq-page.aq-doc-page .aq-doc-facts { padding: 12px 14px; }
  .aq-page.aq-doc-page .aq-doc-card { padding: 18px 20px; }
  .aq-page.aq-doc-page .aq-doc-product { padding: 14px; }
  .aq-page.aq-doc-page .aq-record-links,
  .aq-page.aq-library .aq-record-links { padding: 20px 0 36px; }

  .aq-record-block { padding: 16px; }
}

/* A file's name and its button stop sharing a row once the card is too narrow
   for both: the button takes the row under the name rather than overflowing the
   card. */
@media (max-width: 460px) {
  .aq-page.aq-doc-page .aq-doc-files > li { flex-wrap: wrap; }
  .aq-page.aq-doc-page .aq-doc-files .aq-btn { width: 100%; }
}

/* The technical library — the archive /technical/ and a document type's own page.
 *
 * A downloads centre rather than a reading list, so the library is built the
 * other way round from the kit's pages: a shallow title band, one toolbar (the
 * library's own search box beside the types that hold something), a small count
 * line, one column of compact file cards, and the library's own rules folded
 * into a disclosure at the foot. Palette, buttons, radii and borders are the
 * single document page's, so a reader moving between the two sees one surface.
 * ------------------------------------------------------------------------- */

/* One column of file rows: a narrower wrap than the rest of the site, which is
   the measurement the single document page reads. */
.aq-page.aq-library { --aq-wrap: 1120px; }

/* One rhythm for the regions of the page. */
.aq-page.aq-library .aq-section--tight { padding: 32px 0; }

/* The title band: shallower than the kit's compact band, and the page title is
   the only large type on it — the measurement the document page's band uses. */
.aq-page.aq-library .aq-library-hero { padding: 40px 0; }
.aq-page.aq-library .aq-library-hero h1 { margin-bottom: 0; font-size: 38px; max-width: 30ch; }
.aq-page.aq-library .aq-library-hero .aq-hero-lede { margin-top: 12px; max-width: 62ch; font-size: 16px; }

/* The toolbar: the search box and the type rail on one row, the box taking the
   room it needs and the rail ending at the far edge. The rail's own bottom
   margin is taken back here, because the row's gap is what spaces it. */
.aq-page.aq-library .aq-library-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 28px;
  margin-bottom: 18px;
}
.aq-page.aq-library .aq-library-search { flex: 1 1 300px; max-width: 440px; }
/*
 * The field's label is read out and not shown: the placeholder states the promise
 * inside the field, and a toolbar is not a form. Hidden visually rather than
 * removed, because a search field with no name of its own is a field a screen
 * reader cannot announce.
 */
.aq-page.aq-library .aq-library-search__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.aq-page.aq-library .aq-library-filter { min-width: 0; }
.aq-page.aq-library .aq-library-filter .aq-rail { margin: 0; justify-content: flex-end; }

/* The count line above the list, and the way out of a search that was typed. */
.aq-page.aq-library .aq-count { margin-bottom: 14px; }
.aq-page.aq-library .aq-library-clear { margin-left: 10px; font-weight: 600; color: var(--aq-blue); text-decoration: none; }
.aq-page.aq-library .aq-library-clear:hover { text-decoration: underline; }

/* The list: one column, each document a compact horizontal card — the format on
   the left, what the document is in the middle, the download on the right. */
.aq-page.aq-library .aq-library-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
.aq-page.aq-library .aq-file-item { display: flex; min-width: 0; }
.aq-page.aq-library .aq-file {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  flex: 1 1 auto;
  padding: 24px;
  border: 1px solid var(--aq-border);
  border-radius: 12px;
  background: var(--aq-white);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
/* A hair of lift and nothing more: a list of files is read, not admired. */
.aq-page.aq-library .aq-file:hover {
  border-color: var(--aq-line);
  box-shadow: var(--aq-shadow-xs, 0 1px 2px rgba(13, 27, 42, 0.05));
}

/* The format itself, at the head of the row: the extension while it fits the
   box, a plain file glyph when the record names none. */
.aq-page.aq-library .aq-file__icon {
  flex: none;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--aq-border-soft, #E8EEF3);
  border-radius: 8px;
  background: var(--aq-alt);
  color: var(--aq-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.aq-page.aq-library .aq-file__icon svg { display: block; }

.aq-page.aq-library .aq-file__body { min-width: 0; }
.aq-page.aq-library .aq-file__type {
  margin: 0 0 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--aq-muted);
}
.aq-page.aq-library .aq-file__title {
  margin: 0;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.aq-page.aq-library .aq-file__title a { color: var(--aq-ink); text-decoration: none; }
.aq-page.aq-library .aq-file__title a:hover { color: var(--aq-blue); text-decoration: underline; }
/* The products the document fits, under the title: a reader with a part in hand
   is looking for that part's drawing, and this is the line that settles which
   product the file belongs to. */
.aq-page.aq-library .aq-file__for { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--aq-muted); }
.aq-page.aq-library .aq-file__for a { color: var(--aq-blue); font-weight: 600; text-decoration: none; }
.aq-page.aq-library .aq-file__for a:hover { text-decoration: underline; }
.aq-page.aq-library .aq-file__text {
  margin: 8px 0 0;
  max-width: 68ch;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--aq-body);
}
.aq-page.aq-library .aq-file__meta { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--aq-muted); }

/* The actions: the download at the row's own edge, the way to the record page
   under it as the quieter link. The two stack, so the column is as wide as its
   widest line and a button is never wrapped. */
.aq-page.aq-library .aq-file__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex: none;
}
.aq-page.aq-library .aq-file__download { min-height: 44px; padding: 0 20px; white-space: nowrap; }
/* The secondary link keeps a target of its own: padding on a wide screen, the
   card's own 44px row on a phone, where it sits under the download button. */
.aq-page.aq-library .aq-file__link {
  padding: 4px 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--aq-blue);
  text-decoration: none;
  white-space: nowrap;
}
.aq-page.aq-library .aq-file__link:hover { text-decoration: underline; }

/* The request for a file that is not here: one quiet sentence at the end of the
   list, where a reader who found nothing has just been looking. */
.aq-page.aq-library .aq-library-ask { margin: 20px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--aq-body); }
.aq-page.aq-library .aq-library-ask a { color: var(--aq-blue); font-weight: 600; text-decoration: none; }
.aq-page.aq-library .aq-library-ask a:hover { text-decoration: underline; }

/* How the library is kept: a disclosure on the page's grey band, closed until it
   is asked for. The trigger is a heading the reader can press — the footer's own
   pattern, chevron included — and the panel holds the paragraph and the four
   facts behind it. */
.aq-page.aq-library .aq-library-note h2 { margin: 0; font-size: 17px; line-height: 1.3; }
.aq-page.aq-library .aq-library-note__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--aq-ink);
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  appearance: none;
}
.aq-page.aq-library .aq-library-note__toggle::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--aq-muted);
  border-bottom: 2px solid var(--aq-muted);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s;
}
/* The runtime writes data-state="open" on the group and aria-expanded="true" on
   its trigger; either one turns the chevron. */
.aq-page.aq-library .aq-library-note[data-state="open"] .aq-library-note__toggle::after,
.aq-page.aq-library .aq-library-note__toggle[aria-expanded="true"]::after {
  transform: translateY(2px) rotate(-135deg);
}
.aq-page.aq-library .aq-library-note__toggle:focus-visible {
  outline: 2px solid var(--color-focus, #B55718);
  outline-offset: 3px;
}
.aq-page.aq-library .aq-library-note__panel { padding-top: 14px; }
.aq-page.aq-library .aq-library-note__panel p {
  margin: 0 0 20px;
  max-width: 82ch;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--aq-body);
}
.aq-page.aq-library .aq-library-note__panel .aq-facts { margin: 0; }

/* Small screens ------------------------------------------------------------ */

@media (max-width: 900px) {
  /* The toolbar stacks: the search box keeps a row of its own and the rail
     follows it, so neither is squeezed on a tablet. */
  .aq-page.aq-library .aq-library-search { flex: 1 1 100%; max-width: none; }
  .aq-page.aq-library .aq-library-filter { flex: 1 1 100%; }
  .aq-page.aq-library .aq-library-filter .aq-rail { justify-content: flex-start; }
  .aq-page.aq-library .aq-library-hero h1 { font-size: 32px; }
}

@media (max-width: 680px) {
  /* The card becomes two rows: the format and the document on top, the download
     under them as one full-width target a thumb can hit. */
  .aq-page.aq-library .aq-library-hero { padding: 28px 0; }
  .aq-page.aq-library .aq-library-hero h1 { font-size: 27px; }
  .aq-page.aq-library .aq-file {
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: start;
    gap: 14px 16px;
    padding: 18px;
  }
  .aq-page.aq-library .aq-file__icon { width: 40px; height: 40px; }
  .aq-page.aq-library .aq-file__title { font-size: 16px; }
  .aq-page.aq-library .aq-file__actions { grid-column: 1 / -1; align-items: stretch; gap: 8px; }
  .aq-page.aq-library .aq-file__download { width: 100%; }
  .aq-page.aq-library .aq-file__link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    text-align: center;
  }
}