/* The reference pages (/references, /references/<area>; tools/site-references.mjs) and [ref:<id>] links in any page.
   Colours are web/site.css's tokens only, so both themes (and any new token values) apply; tests/site/
   website-references.test.mjs checks no literal colour is set here. */
.refs-page{padding:8px 0 24px}
.refs-head{max-width:880px}.refs-head h1{margin:6px 0 14px}.refs-head .eyebrow{margin:28px 0 0}
.refs-lede{font-size:17px;line-height:1.6;color:var(--text-1);margin:0 0 10px}
.refs-caveat{font-size:13.5px;line-height:1.6;color:var(--muted);margin:0 0 4px;padding:10px 14px;border-left:3px solid var(--line-3);background:var(--soft);border-radius:0 10px 10px 0}
.refs-caveat a,.refs-note-line a{color:var(--link)}
.refs-page h2{font-size:clamp(24px,2.4vw,32px);margin:36px 0 12px}
.refs-lede-small,.refs-note-line{font-size:13.5px;line-height:1.6;color:var(--muted);margin:0 0 12px}
.refs-table-wrap+.refs-note-line,.refs-cov-cards+.refs-note-line,section+.refs-note-line{margin-top:14px}
.refs-cov-card a{color:var(--link)}
/* charts: drawn by the build as SVG, filled with tokens */
.refs-charts{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin:26px 0 8px}
.refs-charts-wide{grid-template-columns:repeat(auto-fit,minmax(min(100%,560px),1fr))}
.refs-chart{margin:0;padding:14px 16px 10px;border:1px solid var(--line-2);border-radius:16px;background:var(--card);min-width:0}
.refs-chart figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 8px;font-size:14px}
.refs-chart figcaption span{font-size:12px;color:var(--muted)}
.refs-chart svg{display:block;width:100%;height:auto;font-family:var(--font);overflow:visible}
.refs-chart-label{font-size:12px;fill:var(--ink)}.refs-chart-n{font:600 12px var(--mono);fill:var(--muted)}
.refs-chart-group{font:650 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;fill:var(--eyebrow)}
/* catalogued (not yet read) bars are outlined, not filled: the two read apart without telling colours apart */
.refs-chart-track{fill:var(--soft-3)}.refs-chart-bar{fill:var(--teal)}.refs-chart-bar.tone-catalogued{fill:var(--card);stroke:var(--ink);stroke-width:1.5;stroke-dasharray:3 2}
.refs-chart a{cursor:pointer}.refs-chart a:hover .refs-chart-bar:not(.tone-catalogued),.refs-chart a:focus .refs-chart-bar:not(.tone-catalogued){fill:var(--orange)}
.refs-chart a:hover .tone-catalogued,.refs-chart a:focus .tone-catalogued{stroke:var(--orange)}
.refs-chart a:hover .refs-chart-label,.refs-chart-link{text-decoration:underline;text-decoration-color:var(--line-3)}
.refs-chart a[aria-current] .refs-chart-bar{fill:var(--orange)}
.refs-key{display:inline-block;width:10px;height:10px;border-radius:3px;margin:0 4px 0 6px;vertical-align:-1px;background:var(--teal)}
.refs-key.tone-catalogued{background:var(--card);border:1.5px dashed var(--ink)}
.refs-cov-dot{stroke:var(--line-3);stroke-width:1}.refs-cov-word{font:600 10px var(--mono);fill:var(--ink)}
.cov-implemented{fill:var(--green);background:var(--green)}.cov-partly{fill:var(--yellow);background:var(--yellow)}.cov-missing{fill:var(--peach-2);background:var(--peach-2)}
/* coverage and wanted cards */
.refs-cov-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.refs-cov-card{padding:12px 14px;border:1px solid var(--line-2);border-radius:14px;background:var(--card);font-size:13px;line-height:1.55}
.refs-cov-card.cov-implemented,.refs-cov-card.cov-partly,.refs-cov-card.cov-missing{background:var(--card);border-left-width:5px}
.refs-cov-card.cov-implemented{border-left-color:var(--green-line)}.refs-cov-card.cov-partly{border-left-color:var(--yellow-line)}.refs-cov-card.cov-missing{border-left-color:var(--peach-line)}
.refs-cov-card p{margin:0 0 6px}.refs-cov-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.refs-cov-card .refs-note-line{margin:4px 0 0;font-size:12px}
/* filters and the table */
.refs-filters{display:flex;flex-wrap:wrap;align-items:end;gap:10px 12px;margin:0 0 10px}.refs-filters[hidden]{display:none}
.refs-filters label{display:grid;gap:3px;font:600 10px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.refs-filters input,.refs-filters select{font:13px var(--font);color:var(--ink);background:var(--card);border:1px solid var(--line-3);border-radius:10px;padding:7px 10px;min-height:36px}
.refs-filters input{width:min(260px,100%)}.refs-filters ::placeholder{color:var(--muted);opacity:1}.refs-q{flex:1 1 200px}
.refs-clear{font:600 12px var(--font);color:var(--ink);background:var(--soft-2);border:1px solid var(--line-3);border-radius:999px;padding:8px 14px;cursor:pointer;min-height:36px}
.refs-count{font:600 12px var(--mono);color:var(--muted);margin:0 0 8px}
.refs-table-wrap{max-height:min(520px,65vh);overflow:auto;border:1px solid var(--line-2);border-radius:14px;background:var(--card);overscroll-behavior:contain}
.refs-table{border-collapse:separate;border-spacing:0;width:100%;min-width:880px;font-size:12.5px;line-height:1.5}
.refs-table th{position:sticky;top:0;z-index:1;text-align:left;font:650 10px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--soft-2);padding:9px 10px;border-bottom:1px solid var(--line-2)}
.refs-table td{vertical-align:top;padding:10px;border-bottom:1px solid var(--line-soft);color:var(--ink)}
.refs-table tr[hidden]{display:none}
.refs-table tr:target td{background:var(--yellow)}
.refs-rec{min-width:300px;max-width:520px}
.refs-title{font-weight:650;color:var(--link)}.refs-who{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.refs-sum{margin:5px 0 0;color:var(--text-2);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.refs-table tr:target .refs-sum{display:block}.refs-caveat-row{font-style:italic}
.refs-claim{margin:6px 0 0}.refs-meta{margin:6px 0 0;font-size:11px;color:var(--muted)}.refs-meta code{font:11px var(--mono);color:var(--muted)}
.refs-note{display:block;font-size:11px;color:var(--muted);margin-top:3px}
.refs-group{display:inline-block;font-size:11px;padding:1px 7px;margin:0 4px 4px 0;border:1px solid var(--line-2);border-radius:999px;background:var(--soft);white-space:nowrap}
/* badges: token backgrounds with ink text (contrast held by tests/site/website-theme.test.mjs's pairs) */
.refs-badge{display:inline-block;font:600 10px/1.3 var(--mono);letter-spacing:.03em;padding:3px 8px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink);background:var(--grey);white-space:nowrap}
.ev-read,.conf-medium,.lic-share-alike,.cl-unconfirmed{background:var(--yellow);border-color:var(--yellow-line)}
.ev-verified-at-source,.ev-encoded,.ev-measured,.conf-high,.lic-open,.cl-corroborated,.cl-encoded,.cov-implemented.refs-badge{background:var(--green);border-color:var(--green-line)}
.conf-low,.lic-non-commercial,.cl-conflicting,.cov-missing.refs-badge{background:var(--peach-2);border-color:var(--peach-line)}
.lic-proprietary{background:var(--blue);border-color:var(--blue-line)}
.cov-partly.refs-badge{background:var(--yellow);border-color:var(--yellow-line)}
.refs-meter{display:block;width:64px;height:5px;margin-top:6px;border-radius:3px;background:var(--soft-3);overflow:hidden}
.refs-meter i{display:block;height:100%;background:var(--teal)}
/* [ref:<id>] in any page */
.ref-cite{font:12px var(--mono);white-space:nowrap;color:var(--muted)}
.ref-cite .ref-key{color:var(--link)}.ref-cite .ref-out{margin-left:2px;text-decoration:none;color:var(--teal)}
.ref-unread{border-bottom:1px dotted var(--line-3)}
/* on a phone the all-areas charts keep a readable size and scroll sideways in their own box */
@media(max-width:700px){.refs-chart-wide{overflow-x:auto}.refs-chart-wide svg{min-width:600px}.refs-charts{grid-template-columns:1fr}.refs-filters label{flex:1 1 40%}.refs-table-wrap{max-height:70vh}}