/* Downloads page — the file list 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. Only the .doclist block is 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}
}