/* Extends /base.css; all UI geometry uses the approved roles. */
:root { --hub-gap:var(--space-8); --reading-top:var(--space-16); }
.brand {display:flex;flex-direction:column;justify-content:center;min-height:var(--control-min)}
.disclosure-icon {margin-left:auto;padding-left:var(--space-8);font:var(--type-control)/var(--leading-row) var(--font-ui);color:var(--pine)}
summary:focus-visible {outline:3px solid var(--focus);outline-offset:3px}
.skip {position:fixed;top:0;left:var(--gutter);padding:var(--space-12);background:var(--paper);z-index:10;transform:translateY(-120%)}
.skip:focus {transform:translateY(0)}
.icon-control {display:inline-flex;align-items:center;justify-content:center;min-height:var(--control-min);min-width:var(--control-min)}
#bottom a {min-height:var(--nav-height)}
#locale {width:var(--locale-width)}
main:focus,#discovery-content:focus {outline:none}
main:has([data-seo-article]) #discovery-content[aria-busy="true"] {display:none}
.row h3 a {display:block;min-height:var(--control-min)}
.row p,.row h3,.row small {overflow-wrap:anywhere}
.row>.story-art {flex:0 0 var(--thumb-width)}
.story-art img {display:block;width:100%;height:var(--thumb-height);object-fit:contain;background:var(--surface-route)}
.hubs {display:flex;flex-wrap:wrap;gap:var(--hub-gap);margin:var(--space-12) 0}
.hubs a,.action-link {display:inline-flex;align-items:center;gap:var(--space-6);min-height:var(--control-min);padding:0 var(--control-padding);border:1px solid var(--line-control);border-radius:var(--radius-control);font-size:var(--type-control);max-width:100%;overflow-wrap:anywhere}
.hubs a[aria-current] {background:var(--surface-active);border-color:var(--pine)}
.hub-count {font:var(--type-meta) var(--font-meta);color:var(--muted)}
.filter-fields {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8);margin:var(--space-12) 0}
.filter-fields label {font-size:var(--type-summary);margin:0;min-width:0}
.filter-fields .action-link {align-self:end}
.filter-fields select {display:block;width:100%;max-width:100%;margin-top:var(--space-4)}
.result-status {font-size:var(--type-summary);color:var(--muted);line-height:var(--leading-summary)}
.reading-body {font-size:var(--type-body);line-height:var(--leading-body);overflow-wrap:anywhere}
.reading-body img {display:block;max-width:100%;height:auto}
.reading-body pre {white-space:pre-wrap;overflow-wrap:anywhere}
.reading-body table {display:block;max-width:100%;overflow-x:auto}
.reading-body a {text-decoration:underline;text-underline-offset:var(--space-2)}
.reading-body figure {max-width:100%;margin:var(--space-20) 0}
.reading-body figcaption {font-size:var(--type-summary);line-height:var(--leading-summary)}
.reading-body h1 {font:var(--weight-emphasis) var(--type-section)/var(--leading-section) var(--font-ui)}
.article-meta {font-size:var(--type-summary);line-height:var(--leading-summary);color:var(--muted)}
.return-bar {display:flex;gap:var(--space-8);flex-wrap:wrap;margin:var(--space-12) 0}
.related-reason {color:var(--pine)!important}
.historical {color:var(--clay);font-weight:var(--weight-emphasis)}
details summary {min-height:var(--control-min);display:flex;align-items:center;cursor:pointer;font-size:var(--type-control)}
.error-detail {white-space:pre-wrap;font-size:var(--type-summary);overflow-wrap:anywhere}
button,a,select,input {touch-action:manipulation}
img[hidden] {display:none!important}
.image-unavailable {display:block;font-size:var(--type-summary);line-height:var(--leading-summary);color:var(--muted);padding:var(--space-4);overflow-wrap:anywhere}
@media(min-width:800px) {.reading-shell {max-width:var(--article-width)}}