/* /briefs/register/ (WS-015): question cards grouped by brief, the 100% bars, the filters, the table box, the scoring
   explainer and the track record. Written by sitebuild/register.py. Light page, house tokens only (site.css); no inline
   styles (the CSP forbids them). Phone first: 375px, 16px gutter. */
:root{
  --rg0:var(--navy); --rg1:var(--verm); --rg2:var(--graphite); --rg3:#6F819A; --rg4:#C98B7C; --rg5:#A7AEB5;
  --rg-no:var(--tint); --rg-rest:var(--paper);
}

/* the register's opener: the worked example */
.reg-ex{margin-top:12px;font:16px/1.5 var(--serif);color:var(--ink);max-width:66ch;padding:10px 12px;background:var(--tint)}

/* filters: status and year filter by CSS alone (:has); brief links jump, and register.js turns them into a filter */
.rf{display:grid;gap:12px;margin:0 0 24px;padding:12px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--hair)}
.rf-g{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;min-width:0}
.rf-g legend{float:left;width:100%;font:600 11px/1.4 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--graphite);margin-bottom:4px;padding:0}
.rf-g label,.rf-b{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 10px;border:1px solid var(--hair);font:500 14px/1 var(--sans);color:var(--ink);cursor:pointer;text-decoration:none;background:var(--paper)}
.rf-g input{accent-color:var(--navy);margin:0}
.rf-g label:has(input:checked),.rf-b.on{border-color:var(--ink);background:var(--tint)}
.rf-g label:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
.rf-none{display:none;font:15px/1.5 var(--serif);color:var(--graphite);margin:0 0 24px}
@media (min-width:900px){.rf{display:flex;flex-wrap:wrap;gap:12px 40px;align-items:flex-start}.rf-g{flex:0 1 auto}.rf-briefs{flex:1 1 24rem}}

.reg-app:has(#f-st-open:checked) .rf-item:not(.st-open),
.reg-app:has(#f-st-superseded:checked) .rf-item:not(.st-superseded),
.reg-app:has(#f-st-resolved:checked) .rf-item:not(.st-resolved),
.reg-app:has(#f-yr-2026:checked) .rf-item:not(.y-2026),
.reg-app:has(#f-yr-2027:checked) .rf-item:not(.y-2027),
.reg-app:has(#f-yr-2028:checked) .rf-item:not(.y-2028),
.reg-app:has(#f-yr-2029:checked) .rf-item:not(.y-2029),
.reg-app:has(#f-yr-2030:checked) .rf-item:not(.y-2030),
.reg-app:has(#f-yr-2031:checked) .rf-item:not(.y-2031),
.reg-app:has(#f-yr-2032:checked) .rf-item:not(.y-2032),
.reg-app:has(#f-yr-2033:checked) .rf-item:not(.y-2033),
.reg-app:has(#f-yr-2034:checked) .rf-item:not(.y-2034),
.reg-app:has(#f-yr-2035:checked) .rf-item:not(.y-2035){display:none}
.rf-item[hidden],.rf-group[hidden]{display:none!important}
/* a brief group with no card left shows nothing (its heading too) */
.reg-app:has(#f-st-open:checked) .rb:not(:has(.st-open)),
.reg-app:has(#f-st-superseded:checked) .rb:not(:has(.st-superseded)),
.reg-app:has(#f-st-resolved:checked) .rb:not(:has(.st-resolved)),
.reg-app:has(#f-yr-2026:checked) .rb:not(:has(.y-2026)),
.reg-app:has(#f-yr-2027:checked) .rb:not(:has(.y-2027)),
.reg-app:has(#f-yr-2028:checked) .rb:not(:has(.y-2028)),
.reg-app:has(#f-yr-2029:checked) .rb:not(:has(.y-2029)),
.reg-app:has(#f-yr-2030:checked) .rb:not(:has(.y-2030)),
.reg-app:has(#f-yr-2031:checked) .rb:not(:has(.y-2031)),
.reg-app:has(#f-yr-2032:checked) .rb:not(:has(.y-2032)),
.reg-app:has(#f-yr-2033:checked) .rb:not(:has(.y-2033)),
.reg-app:has(#f-yr-2034:checked) .rb:not(:has(.y-2034)),
.reg-app:has(#f-yr-2035:checked) .rb:not(:has(.y-2035)){display:none}
.reg-app:has(#f-st-resolved:checked):not(:has(.rq.st-resolved)) .rf-none,
.rf-none.on{display:block}

/* a brief's group */
.rq-groups{display:grid;gap:40px}
.rb{display:grid;gap:16px;scroll-margin-top:72px}
.rb-h{font:600 20px/1.25 var(--serif);color:var(--ink);margin:0;padding-top:12px;border-top:2px solid var(--ink);text-wrap:balance}
.rb-k{display:block;font:600 11px/1.4 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--graphite);margin-bottom:4px}

/* a question card */
.rq{border:1px solid var(--hair);background:var(--paper);padding:16px;display:grid;gap:10px;min-width:0;scroll-margin-top:72px}
.rq-k{font:600 12px/1.5 var(--sans);letter-spacing:.04em;color:var(--graphite);margin:0;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.rq-k a{color:var(--ink)}
.rq-st{font:600 11px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;padding:4px 6px;border:1px solid var(--ink);color:var(--ink)}
.rq-st.st-superseded{border-style:dashed;color:var(--graphite);border-color:var(--graphite)}
.rq-q{font:600 19px/1.3 var(--serif);color:var(--ink);margin:0;text-wrap:pretty;max-width:60ch}
.rq-sit,.rq-why,.rq-note{font:16px/1.5 var(--serif);color:var(--ink);margin:0;max-width:66ch}
.rq-why b{font-weight:600}
.rq-note{font-size:15px;border-left:2px solid var(--verm);padding-left:10px}
.rq-alts{display:grid;gap:8px;margin-top:4px}
.rq-lbl{font:600 12px/1.45 var(--sans);color:var(--graphite);margin:0}
.rq-bar{display:block;width:100%;height:20px}
.sg{stroke:var(--paper);stroke-width:3;vector-effect:non-scaling-stroke}
.sg0{fill:var(--rg0);background:var(--rg0)} .sg1{fill:var(--rg1);background:var(--rg1)} .sg2{fill:var(--rg2);background:var(--rg2)}
.sg3{fill:var(--rg3);background:var(--rg3)} .sg4{fill:var(--rg4);background:var(--rg4)} .sg5{fill:var(--rg5);background:var(--rg5)}
.sg-no{fill:var(--rg-no);background:var(--rg-no)}
.sg-rest{fill:var(--rg-rest);background:var(--rg-rest);stroke:var(--graphite);stroke-dasharray:4 3;stroke-width:1}
.ra-list{display:grid;gap:0;margin:0;padding:0;list-style:none}
.ra{display:grid;grid-template-columns:12px 1fr;column-gap:10px;row-gap:2px;padding:10px 0;border-top:1px solid var(--hair);min-width:0}
.ra .sw{grid-row:1 / span 3;width:12px;height:12px;margin-top:5px;display:block}
.sw.sg-rest{border:1px dashed var(--graphite)}
.sw.sg-no{border:1px solid var(--hair)}
.ra-l{font:600 15px/1.4 var(--sans);color:var(--ink);overflow-wrap:anywhere}
.ra-m{display:block;font:400 15px/1.45 var(--serif);color:var(--ink);margin-top:2px}
.ra-n{grid-column:2;display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline;font:14px/1.4 var(--sans);color:var(--ink)}
.ra-n .num{font-size:17px;font-weight:600}
.ra-w{font-style:italic;font-family:var(--serif);font-size:15px}
.ra-p{color:var(--graphite)}
.ra-x{grid-column:2;font:13px/1.4 var(--sans);color:var(--graphite)}
.ra-id{grid-column:2;font:12px/1.4 var(--sans);color:var(--graphite)}
.ra-no .ra-l{font-weight:400;color:var(--graphite)}
.rq-old{border-top:1px dashed var(--hair);padding-top:8px}
.rq-old ul{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:6px;font:14px/1.45 var(--sans);color:var(--ink)}
.rq-dates{display:flex;flex-wrap:wrap;gap:4px 16px;font:13px/1.45 var(--sans);color:var(--ink);margin:0}
.rq-dates b{font-weight:600;color:var(--graphite);margin-right:4px}
.rq-how{font:14px/1.5 var(--sans);color:var(--ink);border-top:1px solid var(--hair);padding-top:4px}
.rq-how summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;min-height:40px;font-weight:600}
.rq-how summary::-webkit-details-marker{display:none}
.rq-how summary::before{content:"+";font-family:var(--mono);width:10px}
.rq-how[open] summary::before{content:"\2212"}
.rq-how p{margin:6px 0 0;max-width:72ch;overflow-wrap:anywhere}
.rq-how .rq-k{margin-top:12px}
.rq-src ul{margin:4px 0 0;padding-left:18px;list-style:disc;display:grid;gap:4px;overflow-wrap:anywhere}
.rq-src{margin-top:4px;overflow-wrap:anywhere}
.rq-note{font-size:12.5px;color:var(--graphite)}  /* WS-059: the site's note after sealed wording, not part of it */
@media (min-width:900px){
  .rq{padding:20px 24px}
  .rq-q{font-size:21px}
  .ra{grid-template-columns:12px minmax(0,1fr) 15rem;column-gap:16px}
  .ra .sw{grid-row:1 / span 2}
  .ra-n{grid-column:3;grid-row:1;justify-content:flex-end;text-align:right}
  .ra-x{grid-column:3;grid-row:2;text-align:right}
  .ra-id{grid-column:2;grid-row:2}
}

/* the table (W-41, W-136): on the phone, shown on a tap (a checkbox, no script); from 900px always shown */
.reg-tablebox{margin-top:40px;border-top:1px solid var(--ink)}
.tb-t{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.tb-l{cursor:pointer;display:flex;align-items:center;gap:8px;min-height:48px;font:600 16px/1.3 var(--sans);color:var(--ink)}
.tb-l::before{content:"+";font-family:var(--mono);width:12px}
.tb-t:checked + .tb-l::before{content:"‘2"}
.tb-t:focus-visible + .tb-l{outline:2px solid var(--ink);outline-offset:2px}
.tb-t:not(:checked) ~ table{display:none}
@media (min-width:900px){.tb-t:not(:checked) ~ table{display:table}.tb-l{cursor:default}.tb-l::before{content:none}.tb-t{display:none}}
.cat.reg .c-w{display:block;font:italic 13px/1.3 var(--serif);color:var(--graphite)}

/* how scoring works: three blocks */
.reg-how{max-width:none}
.hw-grid{display:grid;gap:24px}
.hw h4{font:600 17px/1.3 var(--serif);color:var(--ink);margin:0 0 6px}
.hw p{font:16px/1.55 var(--serif);color:var(--ink);max-width:66ch}
.icd{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:4px}
.icd li{border-top:3px solid var(--navy);padding:4px 0 0;font:13px/1.35 var(--sans);color:var(--ink);display:flex;flex-direction:column}
.icd li:nth-child(4){border-top-color:var(--graphite)}
.icd li:nth-child(n+5){border-top-color:var(--verm)}
.icd-w{font-style:italic;font-family:var(--serif);font-size:14px}
.hw-t{border-collapse:collapse;margin-top:12px;width:100%;font:14px/1.4 var(--sans)}
.hw-t caption{text-align:left;font:600 12px/1.4 var(--sans);color:var(--graphite);padding-bottom:4px}
.hw-t th,.hw-t td{border-top:1px solid var(--hair);padding:6px 6px 6px 0;text-align:left;vertical-align:top}
.hw-t thead th{font-weight:600;color:var(--graphite);font-size:12px}
.hw-t td.num{text-align:right;white-space:nowrap}
.hw-t tbody th{font-weight:400}
@media (min-width:900px){.hw-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}}

/* track record placeholder */
.reg-track{margin-top:32px;padding:16px;border:1px dashed var(--graphite);max-width:72ch}
.reg-track h3{font:600 19px/1.3 var(--serif);color:var(--ink);margin:0 0 8px}
.reg-track p{font:16px/1.55 var(--serif);color:var(--ink)}

/* WS-020: one score per set card */
.rq-score{font:14px/1.45 var(--sans);color:var(--ink);margin:0;padding:8px 0;border-top:1px solid var(--hair);max-width:72ch}
.rq-score b{font-weight:600;margin-right:6px}
.rq-score .num{font-size:16px;font-weight:600}
.rq-sk{color:var(--graphite)}
.hw-t + .hw-t{margin-top:16px}
.hw-tot th,.hw-tot td{font-weight:600;border-top:1px solid var(--ink)}

/* WS-067 (4), M-31: the brief filter names each brief by code and title, one per line on the phone */
.rf-briefs .rf-b{line-height:1.3;padding:6px 10px;text-align:left}
.rf-b .num{flex:0 0 auto;font-weight:600}
.rf-bt{font-weight:400}
@media (max-width:899px){
  /* one short row per brief on the phone: the title is cut to the row with an ellipsis (its full text is the link's
     title and the group heading it jumps to) */
  .rf-briefs .rf-b{display:flex;width:100%;min-height:32px;padding:4px 10px;font-size:13px;white-space:nowrap}
  .rf-briefs .rf-bt{min-width:0;overflow:hidden;text-overflow:ellipsis}
}
.reg-csv{margin-top:16px}
/* the bar's fold (cards.css .ch-*): on the phone its toggle sits at the end of the subtitle's row, so folding a 20px
   bar never adds a row of its own; the bar, when shown, spans the card */
.rq-alts{grid-template-columns:minmax(0,1fr) auto}
.rq-alts > .rq-lbl{grid-column:1;grid-row:1}
.rq-alts > .ra-list{grid-column:1 / -1}
.rq-alts .ch-fold{display:contents}
.rq-alts .ch-l{grid-column:2;grid-row:1;align-self:start;min-height:24px;border-top:0;font-size:12.5px;white-space:nowrap}
.rq-alts .ch-box{grid-column:1 / -1}
/* WS-069 (1): "Cite this" on a register card sits tight under "How it is decided" (no rule, a short row) */
.rq .cite{margin-top:0;border-top:0}
.rq .cite > summary{min-height:32px;font-size:13px}