/* page styles: briefs stream (loaded after site.css; no inline styles, CSP)
   /briefs/ (library), /briefs/q-021/ (draft), /corrections/. Tokens only; no new colours. */

/* the "in preparation" marker in a card's meta, drawn like the SAMPLE marker */
.card .meta .pending{color:var(--ink);border:1px solid var(--ink);padding:2px 6px}

/* five series tiles: 1 / 2 / 3 / 5 columns */
@media (min-width:900px){.tiles.five{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1100px){.tiles.five{grid-template-columns:repeat(5,1fr);column-gap:32px}}

/* ---------- the catalogue table (also the corrections change log) ---------- */
.cat{width:100%;border-collapse:collapse;border-top:1px solid var(--ink);font-size:16px}
.cat th{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--graphite);text-align:left;padding:12px 12px 12px 0;border-bottom:1px solid var(--hair);vertical-align:bottom}
.cat td{padding:16px 12px 16px 0;border-bottom:1px solid var(--hair);vertical-align:top}
.cat .cat-empty td,.cat .cat-none td{font-style:italic}
.cat .num{font-family:var(--mono)}
.cat .superseded{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--graphite)}
@media (max-width:599px){
  .cat thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .cat,.cat tbody,.cat tr,.cat td{display:block}
  .cat tr{border-bottom:1px solid var(--hair);padding:12px 0}
  .cat td{border:0;padding:2px 0}
}

/* while fewer than two series have issues, the filter is hidden (design review #20) */
.catf.single .cat-filter,.catf.single > input{display:none}
.cat .c-k{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cat .c-title a{text-decoration:none}
.cat .c-title a:hover{text-decoration:underline}
@media (max-width:599px){.cat .c-k{position:static;width:auto;height:auto;clip:auto}.cat .c-title{font-family:var(--serif);font-weight:600;font-size:18px;margin:4px 0}.cat .c-st{font-family:var(--sans);font-size:12.5px;color:var(--graphite)}}
/* the series band on brief routes (panel T-01): the secondary link reads white on navy */
.on-navy .tl{border-bottom-color:currentColor}

/* ---------- the filter by series: radio inputs (visually hidden) + labels, no script ---------- */
.catf .cat-filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:24px}
.catf .cat-filter .lbl{width:100%;margin-bottom:4px}
.catf .cat-filter label{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 14px;font:600 14px/1 var(--sans);color:var(--ink);border:1px solid var(--hair);background:var(--paper);cursor:pointer}
.catf .cat-filter label:hover{border-color:var(--ink)}
#fs-all:checked ~ .cat-filter label[for="fs-all"],#fs-q:checked ~ .cat-filter label[for="fs-q"],
#fs-c:checked ~ .cat-filter label[for="fs-c"],#fs-t:checked ~ .cat-filter label[for="fs-t"],
#fs-x:checked ~ .cat-filter label[for="fs-x"],#fs-s:checked ~ .cat-filter label[for="fs-s"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
#fs-all:focus-visible ~ .cat-filter label[for="fs-all"],#fs-q:focus-visible ~ .cat-filter label[for="fs-q"],
#fs-c:focus-visible ~ .cat-filter label[for="fs-c"],#fs-t:focus-visible ~ .cat-filter label[for="fs-t"],
#fs-x:focus-visible ~ .cat-filter label[for="fs-x"],#fs-s:focus-visible ~ .cat-filter label[for="fs-s"]{outline:2px solid var(--ink);outline-offset:3px}
/* rows: with "All" every issue shows; with a series, only its issues. Empty-state rows follow the choice. */
.catf .cat-empty{display:none}
#fs-q:checked ~ .cat .cat-row:not([data-series="Q"]),#fs-c:checked ~ .cat .cat-row:not([data-series="C"]),
#fs-t:checked ~ .cat .cat-row:not([data-series="T"]),#fs-x:checked ~ .cat .cat-row:not([data-series="X"]),
#fs-s:checked ~ .cat .cat-row:not([data-series="S"]){display:none}
#fs-all:checked ~ .cat .cat-empty[data-series="all"],#fs-q:checked ~ .cat .cat-empty[data-series="Q"],
#fs-c:checked ~ .cat .cat-empty[data-series="C"],#fs-t:checked ~ .cat .cat-empty[data-series="T"],
#fs-x:checked ~ .cat .cat-empty[data-series="X"],#fs-s:checked ~ .cat .cat-empty[data-series="S"]{display:table-row}
@media (max-width:599px){
  #fs-all:checked ~ .cat .cat-empty[data-series="all"],#fs-q:checked ~ .cat .cat-empty[data-series="Q"],
  #fs-c:checked ~ .cat .cat-empty[data-series="C"],#fs-t:checked ~ .cat .cat-empty[data-series="T"],
  #fs-x:checked ~ .cat .cat-empty[data-series="X"],#fs-s:checked ~ .cat .cat-empty[data-series="S"]{display:block}
}

/* ---------- the brief page (draft route) ---------- */
.draft-flag{margin-bottom:16px}
.draft-flag .lbl{display:inline-block;color:var(--ink);border:1px solid var(--ink);padding:4px 8px;line-height:1.4;margin-bottom:0}
.brief-hero .imprint{margin-bottom:16px}
.brief-hero h1{max-width:22ch}
.brief-hero .answer{max-width:48ch;font-size:20px;line-height:1.45}
.brief-grid{display:grid;gap:32px}
.brief-cover{margin:0;max-width:360px}
.brief-cover img{width:100%;border:1px solid var(--hair)}
.dls{border-top:1px solid var(--ink)}
.dls li{padding:24px 0;border-bottom:1px solid var(--hair);display:grid;gap:8px}
.dls h3{font-family:var(--serif);font-weight:600;font-size:20px;line-height:1.25}
.dls .notice{margin-top:4px;border-left:1px solid var(--hair);padding-left:12px}
.dls .notice summary{font:600 14px/1.4 var(--sans);color:var(--ink);cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px;list-style:none}
.dls .notice summary::-webkit-details-marker{display:none}
.dls .notice summary::before{content:"+";font-family:var(--mono);font-weight:500;width:12px}
.dls .notice[open] summary::before{content:"‘2"}
.dls .notice p{font:15px/1.5 var(--serif);color:var(--ink);max-width:60ch;margin-top:8px}
.brief-grid > .plate{align-self:start}
@media (min-width:900px){
  .brief-grid{grid-template-columns:4fr 8fr;gap:64px;align-items:start}
  .brief-cover{max-width:none}
  .brief-hero .answer{font-size:22px}
}

/* W-14: the page notice directly above the free downloads */
.pagenotice{border-top:1px solid var(--ink);padding:16px 0 20px;display:grid;gap:8px}
.pagenotice p{font:15px/1.5 var(--serif);color:var(--ink);max-width:62ch}
.pagenotice + .dls{border-top:1px solid var(--hair)}