/* Technical Resources — the document centre on this page only.
   Nothing here is shared: the palette, the spacing, the radii and the motion
   come from assets/css/tokens.css, and the hairline rhythm follows the habit
   of assets/css/pages.css. The .doclist, .docfilter and .restypes blocks are
   defined below, so no global class (.section, .container, .btn, .card) and no
   other page's class is touched. */

/* One container, four groups: each group after the first is separated by a
   hairline and the section spacing, the way the interior pages divide blocks. */
.doclist{display:grid}
.doclist__group + .doclist__group{margin-top:var(--space-5);padding-top:var(--space-5);border-top:1px solid var(--color-line)}

.doclist__title{margin:0;font-size:17px;color:var(--color-heading)}
.doclist__list{margin:var(--space-3) 0 0;padding:0;list-style:none}

/* The separator sits between rows, so the last row never carries one. */
.doclist__item + .doclist__item{border-top:1px solid var(--color-line)}

/* The whole row is the target: label in the main column, the small facts to
   the right, the arrow at the end of the row. */
.doclist__link{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:var(--space-1) var(--space-2);min-height:44px;padding:var(--space-2) var(--space-1);border-radius:var(--radius-sm);color:var(--color-heading);text-decoration:none;transition:background var(--transition-fast)}
.doclist__label{font-size:16px;font-weight:600}
.doclist__meta{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--space-1);justify-self:end}
.doclist__applies{font-size:13px;color:var(--color-muted)}
.doclist__type{padding:3px 10px;border:1px solid var(--color-line);border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-muted)}
.doclist__arrow{font-size:15px;line-height:1;color:var(--color-accent);transition:transform var(--transition-fast)}

/* The facts line under each row: the kind of document, the product and the
   series it applies to, the date the entry states and the file itself, one
   separated run of small print across the width of the row. */
.doclist__facts{grid-column:1 / -1;grid-row:2;display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 10px;font-size:13px;color:var(--color-muted)}
.doclist__facts > * + *::before{content:"·";margin-right:10px;color:var(--color-line)}
.doclist__file{font-size:12.5px;overflow-wrap:anywhere}

/* Feedback: the row tints, the label takes the accent and an underline, and
   the arrow shifts. Keyboard focus keeps the same cue and draws its own ring
   inside the row so it is not clipped by the separator above it. */
.doclist__link:hover{background:var(--color-accent-pale)}
.doclist__link:hover .doclist__label,
.doclist__link:focus-visible .doclist__label{color:var(--color-accent);text-decoration:underline;text-underline-offset:3px}
.doclist__link:hover .doclist__arrow{transform:translate(2px,-2px)}
.doclist__link:focus-visible{background:var(--color-accent-pale);outline:2px solid var(--color-focus);outline-offset:-2px}

/* Narrow screens: the row keeps two columns, the label on the first line with
   the arrow, and the note and the facts line each drop to a line of their own,
   left aligned. */
@media(max-width:760px){
  .doclist__group + .doclist__group{margin-top:var(--space-4);padding-top:var(--space-4)}
  .doclist__link{grid-template-columns:minmax(0,1fr) auto}
  .doclist__label{grid-column:1;grid-row:1}
  .doclist__meta{grid-column:1 / -1;grid-row:2;justify-self:start}
  .doclist__arrow{grid-column:2;grid-row:1}
  .doclist__facts{grid-row:3}
}

/* Filtered out by the script: the row and the group it sits in both leave the
   page rather than staying as an empty frame. */
.doclist__item[hidden],.doclist__group[hidden]{display:none}
.doclist__empty{margin:var(--space-4) 0 0;max-width:60ch;font-size:15px;color:var(--color-muted)}

/* ------------------------------------------------------ Filter bar -- */
/* Two chip groups and a select, printed hidden and revealed by the script: a
   control that does nothing is worse than no control, so with JavaScript off
   the bar is absent and the whole list is still below it. */
.docfilter{display:grid;gap:var(--space-3);margin-bottom:var(--space-5);padding:22px 24px;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-md)}
.docfilter__group{display:grid;gap:10px}
.docfilter__label{margin:0;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-muted)}
.docfilter__chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:8px 15px;border:1px solid var(--color-line);border-radius:999px;background:var(--color-surface);color:var(--color-text);font-size:13.5px;font-weight:600;cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast)}
.chip:hover{border-color:var(--color-accent);color:var(--color-accent)}
.chip[aria-pressed="true"]{background:var(--color-accent);border-color:var(--color-accent);color:#fff}
.chip:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.docfilter__select{max-width:340px;min-height:44px;padding:10px 12px;border:1px solid var(--color-field-line);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text);font-family:inherit;font-size:15px}
.docfilter__result{margin:0;font-size:13.5px;color:var(--color-muted)}

/* ------------------------------------------------------ Document types -- */
/* What the centre holds, and where each kind actually comes from: published
   below, prepared for a matched configuration, or confirmed on request. */
.restypes{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:0;padding:0;list-style:none;background:var(--color-line);border:1px solid var(--color-line);border-radius:var(--radius-md);overflow:hidden}
.restypes__item{padding:22px 20px;background:var(--color-surface)}
.restypes__item h3{margin:14px 0 0;font-size:16px}
.restypes__item p{margin:9px 0 0;font-size:13.5px;color:var(--color-muted)}
.restypes__status{display:inline-block;margin:0;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.restypes__status--published{background:var(--color-accent-pale);color:var(--color-accent-dark)}
.restypes__status--matched{background:rgba(244,194,71,.28);color:var(--color-navy)}
.restypes__status--request{background:var(--color-pale);color:var(--color-muted)}

/* --------------------------------------------------------- Responsive -- */
@media(max-width:1180px){
  .restypes{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .restypes{grid-template-columns:1fr}
  .docfilter{padding:18px}
}

/* ------------------------------------------------------- The gate -- */
/* One form under the list, and the only way off this page with a file. It is
   printed from components/download-gate.php and posts to inc/download-gate.php;
   the shared .form, .fields, .field, .btn and .feedback rules in style.css are
   what it looks like, so nothing here repeats them. Only the two things this
   page adds are styled: the line that names the document the visitor pressed,
   and the badge that says a row is a request rather than a file. */

/* The row's action, in the row: the list says what it does rather than leaving
   the arrow to explain it. */
.doclist__gate{padding:3px 10px;border:1px solid var(--color-accent);border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent)}

/* The document the visitor pressed, stated above the questions so the form is
   recognisably about that file. Hidden until a document is named. */
.downloadgate{max-width:760px}
.downloadgate__chosen{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 var(--space-4);padding:12px 14px;background:var(--color-accent-pale);border-left:3px solid var(--color-accent);border-radius:var(--radius-sm);font-size:15px;color:var(--color-navy)}
.downloadgate__chosen[hidden]{display:none}
.downloadgate__chosen-label{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent-dark)}

/* A file that cannot be handed over is answered with the mail address that can
   supply it: the same warning weight the invalid and failed states carry. */
.downloadgate .feedback--unavailable{padding-left:12px;border-left:3px solid var(--color-sun)}

@media(max-width:760px){
  .downloadgate__chosen{margin-bottom:var(--space-3)}
}