/* resources.tymaxey.com, over the site's style.css (copied in by build/vendor.py, never edited here).
   A wider page than the site's 66ch, since seven columns need the room; the lede keeps the
   site's measure. Colours are the site's tokens only (tokens.mjs). tymaxey-llc D545. */
body.catalog { max-width: 75rem; padding-left: var(--s5); padding-right: var(--s5); }
@media (max-width: 1023px) { body.catalog { padding-left: var(--s4); padding-right: var(--s4); } }
@media (max-width: 639px)  { body.catalog { padding-left: var(--s3); padding-right: var(--s3); } }
.lede { max-width: 66ch; }

/* The search box and the chips, shown by catalog.js; without it the page is the whole table. */
.finder { margin: var(--s4) 0 0; }
.finder[hidden] { display: none; }
.search { display: block; width: 100%; max-width: 32rem; box-sizing: border-box; margin: 0 0 var(--s3); padding: var(--s2); font: inherit; color: var(--ink-5); background: var(--ink-1); border: 1px solid var(--ink-3); border-radius: var(--radius); }
.search::placeholder { color: var(--ink-3); }
.chip-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2); margin: 0 0 var(--s2); }
.chip-group .caption { min-width: 4.5rem; }
.chip { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-4); background: none; border: 1px solid var(--ink-2); border-radius: var(--radius); padding: var(--s1) var(--s2); min-height: 24px; cursor: pointer; }
.chip:hover, .chip:focus-visible { color: var(--accent); }
.chip[aria-pressed="true"] { color: var(--ink-5); border-color: var(--ink-4); }
.count { margin: var(--s3) 0 0; }
.none { margin-top: var(--s3); color: var(--ink-3); }

/* The table: ruled rows, the system voice for the heads. */
.catalog-table { width: 100%; border-collapse: collapse; margin-top: var(--s3); }
.catalog-table thead th { text-align: left; vertical-align: bottom; font-family: var(--mono); font-size: 0.75rem; font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); padding: 0 var(--s3) var(--s2) 0; border-bottom: 1px solid var(--ink-2); }
.catalog-table tbody th, .catalog-table td { text-align: left; vertical-align: top; font-weight: 400; padding: var(--s3) var(--s3) var(--s3) 0; border-bottom: 1px solid var(--ink-2); }
.catalog-table thead th:last-child, .catalog-table td:last-child { padding-right: 0; }
.catalog-table tbody th.c-title { font-weight: 600; color: var(--ink-5); }
.catalog-table tr[hidden] { display: none; }
.c-title { width: 11rem; }
.c-does { min-width: 16rem; }
.c-for { width: 10rem; }
.c-kind, .c-taught, .c-lib { width: 6.5rem; white-space: nowrap; }
.c-access { width: 8rem; white-space: nowrap; }
.fact { display: block; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); line-height: 1.5rem; }
.fact.free { color: var(--green); }
.links { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); margin: var(--s1) 0 0; padding: 0; list-style: none; }
.links li { margin: 0; }
.links a.cta { display: inline-block; min-height: 24px; padding-block: 2px; }
.cta-arrow { margin-left: 0.3em; }
.links a.cta:hover .cta-arrow, .links a.cta:focus-visible .cta-arrow { transform: translateY(0.2em); }

/* Below 1200 wide a row is a ruled block: the title, the sentence, the facts, the way to get it.
   Seven columns need about 1000px of measure (layout.mjs read 935 at 800 wide). The heads go: a
   block-drawn table has no table semantics left to carry them, and each fact says its own label. */
@media (max-width: 1199px) {
  .catalog-table thead { display: none; }
  .catalog-table, .catalog-table tbody, .catalog-table tr, .catalog-table tbody th, .catalog-table td { display: block; width: auto; min-width: 0; }
  .catalog-table tr { padding: var(--s3) 0; border-bottom: 1px solid var(--ink-2); }
  .catalog-table tbody th, .catalog-table td { padding: 0; border: 0; white-space: normal; }
  .c-does { margin-top: var(--s1); max-width: 66ch; }
  .catalog-table .c-for, .catalog-table .c-kind, .catalog-table .c-taught, .catalog-table .c-lib { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--s2); max-width: 40rem; }
  .c-for { margin-top: var(--s2); }
  .c-for::before, .c-kind::before, .c-taught::before, .c-lib::before { content: attr(data-label); font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); line-height: 1.5rem; }
  .c-access { margin-top: var(--s2); }
}