/* 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)}

/* 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 small facts drop to a second line, 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}
}

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