/*
 * 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: shallower than the kit's compact band, with the title as the page's
   only large type. Its dark fill belongs to the kit and stays untouched. */
.aq-page.aq-doc-page .aq-doc-hero { padding: 40px 0; }
.aq-page.aq-doc-page .aq-doc-hero h1 {
  margin-bottom: 0;
  font-size: 38px;
  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; 300px is enough for two
   full-width buttons and a two-line fact list. */
.aq-page.aq-doc-page .aq-doc { display: grid; gap: 32px; }
.aq-page.aq-doc-page .aq-doc__main { min-width: 0; }
@media (min-width: 901px) {
  .aq-page.aq-doc-page .aq-doc {
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
  }
  /* 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: 16px;
  padding: 20px;
  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 file it is and the way to get it. The date, the
   status and the version live in the grey bar, so the card does not repeat
   them. */
.aq-page.aq-doc-page .aq-doc-card {
  background: var(--aq-white);
  border: 1px solid var(--aq-border);
  border-radius: 12px;
  padding: 20px;
}
.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);
}
/* The file's own name, which is what the button below it hands over. A
   filename is not an eyebrow: it keeps the case it was uploaded in, and wraps
   instead of overflowing a narrow card. */
.aq-page.aq-doc-page .aq-doc-card__name {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.4;
  color: var(--aq-ink);
  overflow-wrap: anywhere;
}
.aq-page.aq-doc-page .aq-doc-card__file {
  margin: 8px 0 14px;
  font-size: 13.5px;
  color: var(--aq-body);
}
/* Each button fills the card and they stack, so a 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 { margin-top: 10px; }

/* 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) {
  /* The file comes before the description: a reader arrives here for it. */
  .aq-page.aq-doc-page .aq-doc__aside { order: -1; }
  .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 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; }
  .aq-page.aq-doc-page .aq-doc-product { padding: 16px; }
  .aq-page.aq-doc-page .aq-record-links,
  .aq-page.aq-library .aq-record-links { padding: 20px 0 36px; }

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

/* 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; }
.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;
  }
}