/* Shared role scale for the static homepage and React routes.
   Size/leading are authoritative here; route styles must not redefine these roles. */
@font-face{font-family:'Monitor Barlow';src:url('/brand/Barlow-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Monitor Barlow';src:url('/brand/Barlow-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Monitor Barlow';src:url('/brand/Barlow-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Monitor Barlow';src:url('/brand/Barlow-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
:root{--type-page:1.875rem;--type-section:1.25rem;--type-title:1.125rem;--type-stat:1.75rem;--type-body:.875rem;--type-secondary:.875rem;--type-meta:.875rem;--font-reading:'Monitor Barlow',Arial,sans-serif;--font-barlow:'Monitor Barlow',Arial,sans-serif;--font-barlow-condensed:'Monitor Barlow',Arial,sans-serif;--layout-width:1480px;--layout-inset:24px;--space-1:8px;--space-2:16px;--space-3:24px;--space-4:32px}
body{font-family:var(--font-reading);font-size:var(--type-body);line-height:1.5}
body :is(main,.drawer) :is(h1,h2,h3,h4){font-family:var(--font-reading)!important;text-wrap:pretty}
body :is(main,.drawer) :is(button,input,select,textarea){font-family:var(--font-reading)}
/* Reading text, lists, controls and detail drawers share navigation's 14px role.
   Keep geographic labels and SVG/chart lettering at their deliberate data sizes. */
body :is(main,.drawer) :is(p,li,dt,dd,td,th,label,small,input,select,textarea,button,summary,a,span):not(:where(#map *, .leaflet-container *, .maplibregl-map *, svg *)){font-size:var(--type-body)!important}
body :is(main,.drawer) :is(p,li,dt,dd,td,th){line-height:1.5!important}
body :is(main,.drawer) :is(h1,h2,h3,h4) :is(a,button,span,small){font-size:inherit!important;line-height:inherit!important}
body main h1,body .drawer>h2,body main .full-record>h2{font-size:var(--type-page)!important;line-height:1.1!important;font-weight:700;letter-spacing:-.02em}
body main h2{font-size:var(--type-section)!important;line-height:1.2!important;font-weight:600}
body main h3,body main h4{font-size:var(--type-title)!important;line-height:1.3!important;font-weight:600}
body main .news h3,body main .news .lead h3,body main .focus-item h3,body main .below h3,body main .agenda-grid h3,body main .calendar-row h4,body main .legislation-item h4,body main .feed-table h2,body main .parliament-feed h2,body main .project-row h2,body main .institution-row h2,body main .institution-grid h2{font-size:var(--type-title)!important;line-height:1.3!important;font-weight:600}
body main .section-title h2{font-size:var(--type-section)!important;line-height:1.2!important}
body main p,body main .news p,body main .calendar-row p,body main .legislation-item p{font-size:var(--type-body)!important;line-height:1.5!important}
body main .meta,body main .source,body main .story-links a,body main .stage,body main .checked{font-size:var(--type-meta)!important;line-height:1.4!important}
body main .news-summary>summary,body main .calendar-filters button,body main .section-title>a,body main .text-link{font-size:var(--type-secondary)!important;line-height:1.4!important}
body main .related-panel h4,body main .explore h3,body main .institution-layout aside h2,body main .tracker-aside h2{font-size:var(--type-secondary)!important;line-height:1.4!important}
body main .calendar-row>a{font-size:var(--type-body)!important;line-height:1.4!important}
body :is(main,.drawer) :is(time,table,.metric-value,.fiscal-reading,.economy-reading){font-variant-numeric:tabular-nums}
body main :is(.observation-grid strong,.metric-value){font-family:var(--font-reading)!important;font-size:var(--type-stat)!important;line-height:1.15!important;font-weight:600;letter-spacing:-.02em}
@media(max-width:700px){:root{--layout-inset:18px}}

/* One clock control is shared by the static home and React header. */
.site-market .site-clocks,.world-clocks{align-items:center;min-width:0;max-width:100%;gap:8px 14px}
.site-clocks .custom-clocks,.world-clocks .custom-clocks{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;min-width:0}
.world-clock{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.world-clocks .world-clock time{margin:0;padding:0}
.clock-picker{position:relative;flex:0 0 auto}
.clock-picker button,.world-clock button{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:0;background:transparent;color:inherit;font:inherit;cursor:pointer;padding:0}
.clock-add,.clock-remove{width:24px;height:28px;flex:0 0 auto}
.clock-add svg,.clock-remove svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.clock-remove{opacity:0}
.world-clock:hover .clock-remove,.world-clock:focus-within .clock-remove{opacity:1}
.clock-picker .clock-add:hover,.world-clock .clock-remove:hover{background:#ffffff26}
.clock-picker button:focus-visible,.world-clock button:focus-visible{outline:2px solid var(--blue,#58c8e8);outline-offset:2px;opacity:1}
.clock-picker .clock-options{position:absolute;right:0;top:calc(100% + 8px);z-index:30;min-width:190px;max-width:calc(100vw - 36px);padding:4px;background:var(--paper,#f3f2ed);color:var(--ink,#171714);border:1px solid var(--line,#d6d4cb);text-align:left;font-size:14px;line-height:1.5}
.clock-options[hidden]{display:none!important}
.clock-options button{display:flex;justify-content:flex-start;width:100%;min-height:44px;padding:8px 12px;text-align:left}
.clock-options button:hover{background:var(--soft,#e8e6de)}
.clock-options p{margin:0;padding:10px 12px}
@media(hover:none),(pointer:coarse){.clock-remove{opacity:1}.clock-add,.clock-remove{width:44px;height:44px}.world-clock{gap:4px}}

@media(max-width:700px){.clock-remove{opacity:1}.clock-add,.clock-remove{width:44px;height:44px}}

/* Keep mobile clocks on one scrollable row; the picker stays outside the
   scrolling element so its menu can open without being clipped. */
@media(max-width:700px){
 .site-market .site-clocks,.world-clocks{display:grid;grid-template-columns:minmax(0,1fr) 44px;width:100%;gap:4px 8px}
 .site-clocks>time,.world-clocks>time{grid-column:1/-1}
 .site-clocks .custom-clocks,.world-clocks .custom-clocks{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;padding:2px 0}
 .custom-clocks .world-clock{flex-shrink:0}
}

.clock-picker .clock-options{max-height:min(60vh,360px);overflow-y:auto;overscroll-behavior:contain}

/* News summaries use the shared reading size, including nested news lists. */
body :is(main,.drawer)  .news-summary-bullets{display:block;list-style:disc outside;margin:10px 0;padding:0 0 0 1.3em;max-width:72ch}
body :is(main,.drawer)  .news-summary-bullets>:is(li,[role=listitem]){display:list-item;margin:0 0 .45em;padding:0;border:0;list-style:disc outside}
