/* Sequences: the sample results (/samples and /samples/<name>), after style.css. It uses only the colors and sizes
   defined there, as docs.css and offer.css do: the top bar, hero, pill, buttons, fields, row chips, alignment block
   and footer come from style.css, and this file adds the compact hero, the cards of the samples, the facts of a
   search, the form over the list, the rows with their details and the pager. Every link a finger presses outside a
   sentence is at least 44 px tall. */

/* A compact hero: the pill, the sample's name, the read-only line and the buttons. */
.sample-hero .hero-inner { padding-bottom: 36px; }
@media (min-width: 768px) {
  .sample-hero .hero-inner { padding-bottom: 44px; }
}
.sample-pill { margin-bottom: 16px; }
.sample-title { font-size: clamp(1.875rem, 1.3rem + 2.2vw, 3rem); overflow-wrap: anywhere; }
.sample-lead { max-width: 38rem; }

.sample-main { display: grid; gap: 24px; padding-block: 32px 64px; }
@media (min-width: 768px) {
  .sample-main { padding-block: 40px 80px; }
}
.sample-h2 { font-size: 18px; line-height: 1.3; font-weight: 600; color: var(--brand-ink); }
.sample-h3 { font-size: 15px; line-height: 1.35; font-weight: 600; color: var(--brand-ink); }
.sample-empty { font-size: 16px; color: var(--ink-2); text-align: center; }

/* The samples: one card to a row on a phone, two from 640 px and three from 1024 px. */
.sample-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) {
  .sample-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .sample-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sample-card { display: grid; align-content: start; gap: 8px; min-width: 0; padding: 12px 20px 20px; }
.sample-card-title { font-size: 18px; line-height: 1.3; font-weight: 600; }
.sample-card-title a { display: inline-flex; align-items: center; min-height: 44px; color: var(--brand-ink); text-decoration: none; }
.sample-card-title a:hover { color: var(--brand-link); text-decoration: underline; }
.sample-card-search { font: 400 13px/1.4 var(--font-mono); color: var(--ink-2); }

/* The facts of a search: the term over its value on a phone, beside it from 640 px. */
.sample-search, .sample-results { display: grid; gap: 16px; min-width: 0; padding: 18px; }
@media (min-width: 768px) {
  .sample-search, .sample-results { padding: 24px; }
}
.sample-facts, .sample-card-facts { display: grid; gap: 10px; margin: 0; }
.sample-facts > div, .sample-card-facts > div { display: grid; gap: 2px; min-width: 0; }
@media (min-width: 640px) {
  .sample-facts > div { grid-template-columns: 7rem minmax(0, 1fr); gap: 12px; }
}
.sample-facts dt, .sample-card-facts dt { font: 400 11.5px/1.6 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.sample-facts dd, .sample-card-facts dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.sample-letters {
  display: block; margin-top: 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--well); font-size: 13px; line-height: 1.5; word-break: break-all;
}
.sample-source { display: inline-flex; align-items: center; min-height: 44px; }
.sample-limits { font-size: 13.5px; color: var(--ink-2); }

/* The form over the list: a field to a row on a phone, two to a row from 640 px, with Show at the start of its cell,
   and all four in one row from 1024 px, where each choice has room for its words. */
.sample-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: end; }
@media (min-width: 640px) {
  .sample-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sample-show { justify-self: start; }
}
@media (min-width: 1024px) {
  .sample-form { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
}
.sample-count { font-weight: 500; }
.sample-fold { padding: 4px 14px; border: 1px solid var(--warn-line); border-radius: var(--radius); background: var(--warn-tint); font-size: 14px; line-height: 1.5; }
.sample-fold-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }

/* The rows: the number and its date, the title, the applicant, the measures, then the details. */
.sample-rows { display: grid; margin: 0; padding: 0; border-top: 1px solid var(--line-faint); list-style: none; }
.sample-row { display: grid; gap: 2px; min-width: 0; padding: 8px 0 10px; border-bottom: 1px solid var(--line-faint); }
.sample-row-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; min-width: 0; }
.sample-number { display: inline-flex; align-items: center; min-height: 44px; font: 500 14px/1.3 var(--font-mono); overflow-wrap: anywhere; }
span.sample-number { color: var(--ink); }
.sample-date { font-size: 13px; color: var(--ink-2); }
.sample-row-title { font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.sample-row-applicant { font-size: 13.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.sample-measures { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 2px; font: 400 13px/1.5 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.sample-detail summary { display: flex; align-items: center; width: max-content; max-width: 100%; min-height: 44px; font-weight: 500; color: var(--brand-link); cursor: pointer; }
.sample-detail[open] { padding-bottom: 6px; }
.sample-detail .detail-line { margin-bottom: 8px; font-size: 13.5px; color: var(--ink-2); }
.sample-detail .aln-words { margin-top: 8px; }
.sample-family { display: grid; gap: 4px; margin-top: 16px; }
.sample-family p { font-size: 13.5px; color: var(--ink-2); }
.sample-members { display: flex; flex-wrap: wrap; gap: 0 24px; margin: 0; padding: 0; list-style: none; }
.sample-members li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; }
.sample-members a, .sample-members li > span:first-child { display: inline-flex; align-items: center; min-height: 44px; font: 500 13.5px/1.3 var(--font-mono); }
.sample-members .mono { font-size: 13px; color: var(--ink-2); }

/* The pager under the list. */
.sample-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.sample-page { font-size: 14px; color: var(--ink-2); }
.sample-step[aria-disabled="true"] { opacity: 0.45; cursor: default; }