/* Policy Nepal: phone-first layer.
   Loaded after styles.css (and agenda.css on generated pages) by every page shell.
   Desktop navigation and branding are unchanged; most rules below apply under 761px only.
   Sections: 1 crispness and anchors · 2 header and menu · 3 phone tab bar · 4 type scale ·
   5 spacing and cards · 6 tap targets · 7 tables · 8 charts · 9 in-page tabs · 10 desktop tidy-ups */

/* ---------- 1. Crispness, safe areas and anchor jumps (all widths) ---------- */
:root{--header-h:71px;--tabbar-h:0px}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 14px)}
body{text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
/* Pages with sticky in-page tabs: jumps land below the header and the tabs. */
html:has(.fin-tabs){scroll-padding-top:calc(var(--header-h) + 78px)}
html:has(.pn-tabbar){scroll-padding-top:calc(var(--header-h) + 82px)}
@media(max-width:1150px){:root{--header-h:66px}}
@media(max-width:760px){:root{--header-h:57px;--tabbar-h:64px}}

/* ---------- 2. Header and menu ---------- */
/* Current section in the header menu (aria-current is set by the page generator). */
.site-header nav>a[aria-current]{color:var(--blue)}
.site-header nav>a[aria-current]:after{width:100%}

@media screen and (max-width:1150px){
  /* Keep the reading position while the navigation sheet scrolls independently. */
  html.navigation-open{overflow:hidden}
  /* Without JavaScript the tab bar's "More" link targets the menu and opens it. */
  .site-header #main-navigation:target{display:flex;flex-direction:column;gap:0;align-items:stretch}
}
@media(max-width:760px){
  .site-header .header-inner{min-height:56px;padding-block:6px;gap:8px}
  .site-header .header-language button,.site-header .menu-toggle{min-height:44px;min-width:44px}
  .site-header .header-language button{padding:6px 10px;font-size:13px}
  .site-header .header-language button[lang="ne"]{font-size:14px}
  .site-header .menu-toggle{justify-content:center;padding:0 12px}
  .site-header .menu-lines,.site-header .menu-lines:after{width:16px}
  /* The menu opens as a sheet under the header, scrolls on its own and never hides behind the tab bar. */
  .site-header nav{max-height:calc(100vh - var(--header-h) - var(--tabbar-h));max-height:calc(100dvh - var(--header-h) - var(--tabbar-h) - env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;padding:6px 20px 14px}
  .site-header nav>a{display:flex;align-items:center;min-height:50px;padding:0 0 0 12px;font-size:17px;font-weight:600;border-bottom:1px solid #edf1f2}
  html[lang="ne"] .site-header nav>a{font-size:17px}
  .site-header nav>a:after{display:none}
  .site-header nav>a[aria-current]{box-shadow:inset 3px 0 0 var(--red);font-weight:700}
  .site-header nav .nav-about{margin-top:0;padding-top:0;border-top:0;border-bottom:0}
}
@media(max-width:400px){.site-header nav{padding-inline:16px}
  /* Four words do not fit four columns at phone sizes: two rows of two, so nothing scrolls sideways. */
  .principle-strip>.container{grid-template-columns:1fr 1fr}}
@media(max-width:340px){
  .site-header .header-inner{gap:6px}
  .site-header .header-language button{padding-inline:7px}
  .site-header .menu-toggle{padding-inline:10px}
}

/* ---------- 3. Phone tab bar ---------- */
.tab-bar{display:none}
@media(max-width:760px){
  body{padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom))}
  .tab-bar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(255,255,255,.98);border-top:1px solid var(--line);box-shadow:0 -4px 16px #142d3a14;padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
  .tab-bar a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;height:var(--tabbar-h);overflow:hidden;padding:6px 2px 4px;color:#4e5f66;font-size:12px;font-weight:600;line-height:1.15;letter-spacing:0;text-align:center;text-decoration:none;-webkit-tap-highlight-color:transparent}
  html[lang="ne"] .tab-bar a{font-size:12px;line-height:1.15}
  .tab-bar span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:100%}
  .tab-icon{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .tab-bar a[aria-current],.tab-bar a.is-current,.tab-bar .tab-more[aria-expanded="true"]{color:var(--blue)}
  .tab-bar a[aria-current] .tab-icon,.tab-bar a.is-current .tab-icon{stroke-width:2.2}
  .tab-bar a[aria-current]:before,.tab-bar a.is-current:before{content:'';position:absolute;top:0;left:24%;right:24%;height:3px;border-radius:0 0 3px 3px;background:var(--red)}
  .tab-bar a:active{background:#f1f4f6}
  .tab-bar a:focus-visible{outline:2px solid var(--red);outline-offset:-3px}
}
@media print{.tab-bar{display:none}}

/* ---------- 4. Type scale on phones ---------- */
@media(max-width:760px){
  body{font-size:16px}
  /* Running text: 16px. #main is the page's <main>, so these beat component sizes without !important. */
  #main :is(p,li,dd,blockquote,td):not(.viz *,figure *,.stat-tiles *,.tabs *,.filter-row *,.question-nav *,.breadcrumb *){font-size:16px;line-height:1.6}
  html[lang="ne"] #main :is(p,li,dd,blockquote,td):not(.viz *,figure *,.stat-tiles *,.tabs *,.filter-row *,.question-nav *,.breadcrumb *){line-height:1.75}
  #main .question-nav li,#main .question-nav a{font-size:15px;line-height:1.45}
  /* Notes and call-outs: 15px. */
  #main :is(.coverage-callout,.section-note,.forthcoming,.privacy-note,.q-explainer,.coverage-note p,.library-note p){font-size:15px;line-height:1.6}
  /* Meta, sources and captions: 14px. */
  #main :is(.agenda-meta,.agenda-meta *,.hero-footnote,.micro-copy,.breadcrumb,.accessed,.sys-cite,.sys-cite *,small,.muted,figcaption,.library-meta,.library-meta span,.source-publisher,.change-log,.table-view,.member-table small){font-size:14px}
  #main p:is(.agenda-meta,.hero-footnote,.micro-copy),#main .change-log li{font-size:14px;line-height:1.55}
  /* Labels in capitals stay small but never below 12px. */
  #main :is(.eyebrow,.small-label,.small-label span,.badge,.agenda-status,.source-main>p.small-label){font-size:12px}
  #main .cite{font-size:13px}
  #main .cite a{padding:0 3px}
  #main dt{font-size:14px}
  #main dd{font-size:16px}
  .agenda-dek,.hero-intro{font-size:17px}
  .agenda-hero h1{font-size:clamp(32px,9vw,40px);line-height:1.12;text-wrap:balance}
  #main h2{text-wrap:balance}
  #main h3,#main h4{text-wrap:balance}
  .agenda-section h2{font-size:clamp(26px,7.4vw,30px);line-height:1.18}
  /* styles.css pins these at 11px with !important; on phones they are lifted to a readable size. */
  .badge,.badge.light,.directory-top .badge,.issue-panel-top .badge,.feature-status,.poll-action>span,.issue-navigation>p,.template-heading p,.dialog-note{font-size:12px!important}
  .micro-copy,.poll-intro .micro-copy,.profile-preview .micro-copy,.coverage-note,.source-publisher,.library-meta,.footer-bottom{font-size:14px!important}
  .level-tag,.evidence-layers>span{font-size:12px}
  .evidence-layers>strong{font-size:14px}
  .select-field label{font-size:13px}
  .principle-strip a,.source-links a{font-size:14px}
  .hero-actions .button,.agenda-intro .button{font-size:14px;min-height:48px}
  .sys-branch span{font-size:15px}
  .pathway span:last-child{font-size:15px}
  .q-other label{font-size:15px}
  .strip-unplaced{font-size:14px}
  /* Footer */
  .site-footer .footer-main>div>p{font-size:14px}
  .site-footer .footer-links a,.site-footer .footer-links button{font-size:15px}
  .site-footer .footer-bottom span,.site-footer .footer-bottom a,.site-footer .footer-governance,.site-footer p{font-size:14px}
}

/* ---------- 5. Spacing rhythm and cards on phones ---------- */
@media(max-width:760px){
  .section{padding-block:44px}
  .agenda-page .section{padding-block:34px}
  .agenda-hero{padding-bottom:20px}
  .agenda-section{padding-block:26px}
  .nonpartisan-band{margin-bottom:0}
  /* Bars: keep each label close to its own bar. */
  .bar-row{row-gap:4px;margin-bottom:6px}
  /* Stat tiles: two per row, an odd last tile spans the row. */
  .stat-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .stat-tiles>:last-child:nth-child(odd){grid-column:1/-1}
  .stat-tile{padding:14px}
  .stat-label{font-size:14px}
}

/* ---------- 6. Tap targets on phones (44px minimum) ---------- */
@media(max-width:760px){
  #main .text-link,.site-footer .text-link{min-height:44px;font-size:14px}
  #main .breadcrumb a{display:inline-flex;align-items:center;min-height:44px}
  #main .breadcrumb{margin-bottom:4px}
  #main summary{min-height:44px;padding-block:10px;font-size:15px;box-sizing:border-box}
  #main .change-log summary,#main .table-view summary{font-size:15px}
  .site-footer .footer-links a,.site-footer .footer-links button{display:flex;align-items:center;min-height:44px}
  .site-footer .footer-bottom a{display:inline-flex;align-items:center;min-height:44px}
  #main .party-chip{min-height:44px}
  #main .chip-cloud .party-chip{font-size:14px}
  #main .filter-row button,#main .tabs button{min-height:44px;font-size:14px}
  #main .pathway{min-height:44px}
  #main select,#main input[type="search"],#main input[type="text"]{min-height:44px;font-size:16px}
  .site-header .brand,.principle-strip a,#main .poll-action .button{min-height:44px}
  .principle-strip a{display:flex;flex-direction:column;justify-content:center}
}

/* ---------- 7. Tables ---------- */
/* Member directory and documents: stacked cards on phones (agenda.css), made compact here. */
@media(max-width:760px){
  .member-table tr{padding:8px 0;margin-bottom:8px}
  /* The 300+ member and document cards render lazily as they approach the screen. */
  #member-table tbody tr,#doc-table tbody tr{content-visibility:auto;contain-intrinsic-size:auto 150px}
  .member-table td{padding:2px 14px;font-size:15px}
  #main .member-table td{font-size:15px;line-height:1.45}
  .member-table td:first-child{padding-top:4px}
  .member-table td:first-child a{display:block;font-size:17px;line-height:1.35}
  .member-table td:first-child a span{font-size:14px}
}
/* Table views under charts keep their columns and scroll sideways inside their own box,
   with shadows at the edges as the visible hint (never page-level scrolling). */
.table-view .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;background:linear-gradient(90deg,#fff 30%,#fff0) left/36px 100% no-repeat local,linear-gradient(270deg,#fff 30%,#fff0) right/36px 100% no-repeat local,radial-gradient(farthest-side at 0 50%,#142d3a33,#142d3a00) left/12px 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,#142d3a33,#142d3a00) right/12px 100% no-repeat scroll}
.table-view .table-wrap:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media(max-width:760px){
  .table-view .table-wrap{border:1px solid var(--line)}
  .table-view .member-table{display:table;width:max-content;min-width:100%;font-size:14px}
  .table-view .member-table thead{position:static;width:auto;height:auto;overflow:visible;clip:auto;display:table-header-group}
  .table-view .member-table tbody{display:table-row-group}
  .table-view .member-table tr{display:table-row;border:0;margin:0;padding:0;background:transparent}
  .table-view .member-table th,.table-view .member-table td,#main .table-view .member-table td{display:table-cell;width:auto;padding:8px 12px;font-size:14px;border-bottom:1px solid #edf0ef;white-space:nowrap}
  .table-view .member-table td{background:transparent}
  .table-view .member-table :is(th,td):first-child{position:sticky;left:0;z-index:1;background:#fff;box-shadow:1px 0 0 var(--line)}
  .table-view .member-table th:first-child{background:var(--paper)}
}

/* ---------- 8. Charts ---------- */
/* Column charts: on phones each column keeps ~56px and the chart scrolls inside its frame;
   label sizes are set so they render at ~13px, and in-between ticks are hidden. */
.cols-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cols-scroll:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media(max-width:760px){
  .cols-scroll{background:linear-gradient(90deg,#fff 30%,#fff0) left/36px 100% no-repeat local,linear-gradient(270deg,#fff 30%,#fff0) right/36px 100% no-repeat local,radial-gradient(farthest-side at 0 50%,#142d3a2e,#142d3a00) left/12px 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,#142d3a2e,#142d3a00) right/12px 100% no-repeat scroll}
  .cols-scroll{padding-left:14px}
  .viz-cols svg{width:max(100%,calc(var(--n,8) * 56px + 60px));max-width:none;overflow:visible}
  .viz-cols .col-tick,.viz-cols .col-cat,.viz-cols .col-total{font-size:min(26px,calc(9880px / (var(--n,8) * 56 + 60)))}
  .viz-cols .col-tick.minor{display:none}
  .viz-cols .share-legend.inline li,.viz figcaption{font-size:14px}
}

/* Legends, labels and keys: readable on phones. */
@media(max-width:760px){
  .share-legend li{font-size:15px;gap:6px}
  .share-val small{font-size:13px}
  .bar-row{font-size:15px}
  .bar-label small,.bar-note{font-size:13px}
  .color-key,.color-key li{font-size:14px}
  .color-key li{white-space:normal}
  .zone-label{font-size:13px}
  .party-chip{font-size:14px}
  .chip-quote{font-size:14px}
  .hemi-sub{font-size:14px}
  .line-ends p{font-size:14px}
  .line-ends strong{font-size:15px}
}

/* Spectrum line on phones: one row per family; the coloured tick sits on the vertical line,
   the family name above its parties, parties side by side. */
@media(max-width:640px){
  .line-slots::after{left:12px;width:4px}
  .line-slot{display:grid;grid-template-columns:28px minmax(0,1fr);grid-template-areas:"tick label" ". bubbles";column-gap:10px;row-gap:6px;align-items:center;padding:10px 0;text-align:left}
  .line-tick{grid-area:tick;justify-self:center;margin:0}
  .slot-label{grid-area:label;width:auto;min-height:0;margin:0;font-size:14px;font-weight:700;color:var(--ink)}
  .line-bubbles{grid-area:bubbles;flex-direction:row;flex-wrap:wrap;gap:8px 16px;justify-content:flex-start;align-items:center}
  .line-bubble{display:grid;grid-template-columns:auto auto;column-gap:8px;align-items:center;min-height:44px;text-align:left}
  .line-bubble .bubble-dot{grid-row:1/3;width:min(var(--d),48px);height:min(var(--d),48px)}
  .bubble-name{margin-top:0;font-size:15px;align-self:end}
  .bubble-seats{font-size:13px;align-self:start}
}

/* Dot strips on phones: one row per party (name, then its dot on a shared scale),
   so labels can never collide; the scale's tick labels sit above the first row. */
@media(max-width:640px){
  .viz-dots{padding:14px 14px 12px}
  .dots-track{height:auto;margin:0;padding-top:24px;display:flex;flex-direction:column;gap:2px;--name:40%}
  .dots-track::before{display:none}
  .dots-tick{top:16px;height:6px;left:calc(var(--name) + (100% - var(--name)) * var(--x) / 100)}
  .dots-tick span{top:auto;bottom:calc(100% + 1px);font-size:12px}
  .viz-dots .dots-pt{position:relative;left:auto;top:auto;transform:none;display:grid;grid-template-columns:var(--name) minmax(0,1fr);align-items:center;min-height:40px}
  .viz-dots .dots-pt::after{content:'';grid-column:2;grid-row:1;height:3px;border-radius:2px;background:linear-gradient(90deg,#2a78d6,#c9cdd3 50%,#eb6834)}
  .viz-dots .dots-pt .dots-label{position:static;grid-column:1;grid-row:1;transform:none;white-space:normal;font-size:14px;line-height:1.25;padding-right:10px}
  .viz-dots .dots-pt .dots-label::before{display:none}
  .viz-dots .dots-pt .dots-dot{grid-column:2;grid-row:1;position:relative;z-index:1;width:18px;height:18px;margin-left:calc(var(--x) * 1% - 9px)}
  .viz-dots .dots-pt:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  .viz-dots .dots-pt:focus-visible .dots-dot{outline:0}
  .dots-ends{margin-left:var(--name, 40%);gap:8px;font-size:13px}
  .dots-ends>span:last-child{text-align:right}
  .dots-title{font-size:15px}
  .dots-missing{font-size:14px}
  .dots-source{font-size:13px}
}

/* The System diagrams on phones: comfortable reading sizes. */
@media(max-width:760px){
  .sys-flow li,.sys-pyramid li,.sys-chain li,.sys-appeal,.sys-yes,.sys-fallback,.sys-after{font-size:15px}
  .sys-ask{font-size:15.5px}
  .sys-pyramid li strong{font-size:17px}
  .sys-people span{font-size:15px}
  .sys-no::before{font-size:12px}
  .sys-yes-tag{font-size:12px}
  .sys-watch p{font-size:15px}
}

/* ---------- 9. Sticky in-page tabs (Budget & Debt) ---------- */
.fin-tabs{top:var(--header-h)}
@media(max-width:760px){
  .fin-tabs.container{width:100%;box-sizing:border-box;padding:8px 20px;margin:0 0 10px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line);box-shadow:0 6px 12px -10px #142d3a40}
  .fin-tabs::-webkit-scrollbar{display:none}
  .fin-tabs a{flex:none;display:flex;align-items:center;max-width:74%;min-height:44px;padding:4px 16px;line-height:1.25;text-align:left;font-size:14px}
}
@media(max-width:400px){.fin-tabs.container{padding-inline:16px}}

/* ---------- 10. Desktop tidy-ups ---------- */
/* The sticky header is opaque, so text scrolling underneath never shows through it. */
.site-header{background:#fff}
@media(min-width:1280px){html:not([lang="ne"]) .site-header nav{font-size:13px}}
@media(min-width:761px){
  /* Legend rows: label, swatch and value stay on one baseline and wrap cleanly. */
  .share-legend li{align-items:center}
  .share-legend .swatch{align-self:center;margin-top:0}
}

/* Desktop header: the logo, nine menu items and the language switch cannot share one row inside the
   1,280px container, so on desktop the menu gets its own row under the logo (nav.js re-measures --header-h). */
@media(min-width:1151px){
  .header-inner{flex-wrap:wrap;min-height:0;padding-top:6px;column-gap:20px;row-gap:6px}
  .site-header .brand .brand-emblem{height:46px}
  .site-header .brand-name{font-size:26px}
  .site-header .brand{flex:none;order:1}
  .header-inner>.header-language{order:2;margin-left:auto}
  .site-header nav{order:3;flex:1 0 100%;justify-content:space-between;gap:12px;padding:5px 0 7px;border-top:1px solid var(--line);font-size:13px}
}

/* Overnight QA fixes (320–400px phones) */
/* Goal cards sit on a dark blue panel: their "reasoning" toggle must be light. */
.bp-goals .goal-debate>summary{color:var(--ink)}
.bp-goals .goal-debate p{color:var(--ink)}
.bp-goals .goal-debate a{color:var(--ink)}
@media(max-width:400px){
  /* Keep the whole tagline visible next to the language and menu buttons. */
  .site-header .brand-tagline{font-size:9.6px;letter-spacing:-.01em}
  .site-header .brand-name{font-size:21px}
  /* Listen collapses to an icon so it does not cover reading text. */
  .listen.is-floating{right:10px}
  .listen.is-floating .listen-play span:last-child,.listen.is-floating .listen-stop span:last-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .listen.is-floating button{min-width:44px;min-height:44px;padding:6px 12px;justify-content:center}
}
/* Small links (sources, official sites, photo credits) get a 24px+ tap area on touch screens without changing layout. */
@media(pointer:coarse){
  .sys-cite a,.photo-credit a,.inst-site,.court-link small a{display:inline-block;padding-block:4px;min-height:24px}
}
/* Phone cards: the photo + name cell is a row, so names use the full card width instead of wrapping word by word. */
@media(max-width:760px){
  .member-table td.has-thumb{display:flex;align-items:center;gap:10px}
  .member-table td.has-thumb>a{flex:1;max-width:none;min-width:0}
  .member-table td.has-thumb .row-thumb{margin-right:0;flex:none}
}

@media(max-width:340px){.site-header .brand-tagline{font-size:8.6px}}

/* Keep the new speaker and language controls together without shrinking the wordmark. */
.header-inner:has(.header-listen) .brand{flex:none;width:auto}
@media(min-width:1151px){
  .header-inner:has(.header-listen) .header-listen{order:2;margin-left:auto}
  .header-inner:has(.header-listen)>.header-language{order:3;margin-left:0}
  .header-inner:has(.header-listen) nav{order:5}
}
/* At 360px and below the logo, Listen, language and menu cannot share one row with the tagline, and a two-row
   sticky header took 105 of 568px. Keep one row: stack the name on two lines and hide the decorative tagline. */
@media(max-width:360px){
  .header-inner:has(.header-listen) .brand{flex:0 1 auto;min-width:0}
  .site-header .brand-tagline{display:none}
  .site-header .brand-name{font-size:18px;line-height:1.05;display:flex;flex-direction:column}
}
@media print{.header-listen{display:none!important}}

/* Home: Fast facts from official records (build-agenda.mjs fastFacts). */
.fast-facts{padding-block:40px 8px}
.fast-facts h2{font-family:var(--serif);font-size:clamp(24px,3vw,32px);margin-bottom:16px}
.fast-facts-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.fast-facts-list li{border:1px solid var(--line);border-top:4px solid var(--blue);background:#fff;padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.fact-number{font-family:var(--serif);font-size:38px;line-height:1;color:var(--blue)}
.fact-label{font-size:15px;line-height:1.45}
.fact-source{margin-top:auto;font-size:13px;color:var(--muted);line-height:1.45}
.fact-source a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.fast-facts .section-note{margin-top:12px}
@media(max-width:400px){.fast-facts-list{grid-template-columns:1fr;gap:8px}.fast-facts-list li{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;padding:12px 14px}.fact-number{font-size:30px}.fact-source{grid-column:1/-1}}
/* Footer: public beta note on every page. */
.site-footer .footer-beta{margin-top:18px;padding:10px 14px;border:1px solid #e8d59c;border-left:4px solid #c99a00;background:#fffbea;color:var(--ink);font-size:14px;line-height:1.5}
.site-footer .footer-beta a{text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}

/* ---------- 11. Main menu with submenus (content/navigation.json) ---------- */
/* Each top section is a link plus a small toggle; its submenu lists the section's major pages.
   Desktop: opens on hover or with the toggle (Enter/Space); closed submenus are out of the tab order.
   Phone menu: each section's list expands in place under it. */
.site-header nav .nav-group{position:relative;display:flex;align-items:center;gap:2px}
.site-header nav .nav-group>a{position:relative;padding:12px 0}
.site-header nav .nav-group>a:after{content:'';position:absolute;bottom:6px;left:0;width:0;height:2px;background:var(--red);transition:width .2s}
.site-header nav .nav-group>a:hover:after,.site-header nav .nav-group>a[aria-current]:after{width:100%}
.site-header nav .nav-group>a[aria-current]{color:var(--blue)}
.nav-sub-toggle{border:0;background:none;color:inherit;width:20px;min-height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.nav-sub-toggle::before{content:'';width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.nav-sub-toggle[aria-expanded="true"]::before{transform:translateY(1px) rotate(-135deg)}
.nav-sub{display:none}
.nav-sub ul{list-style:none;margin:0;padding:0}
.nav-sub a{display:block;padding:9px 16px;line-height:1.35;font-weight:500;color:var(--ink);white-space:normal}
.nav-sub a:hover,.nav-sub a:focus-visible{background:#f2f5f9;color:var(--blue)}
@media(min-width:1151px){
  .nav-sub{position:absolute;top:100%;left:-14px;z-index:60;min-width:250px;max-width:340px;max-height:min(70vh,560px);overflow-y:auto;background:#fff;border:1px solid var(--line);box-shadow:0 14px 32px #142d3a24;padding:6px 0;font-size:13px}
  .nav-group:nth-last-child(-n+4) .nav-sub{left:auto;right:-14px}
  .nav-group:hover>.nav-sub,.nav-group.is-open>.nav-sub{display:block}
  /* Touch screens wider than 1150px (tablets in landscape): submenu links are at least 44px tall; toggles are 44px tall and 24px wide (WCAG 2.5.8 minimum) so the menu row keeps its width. */
  .nav-sub a{display:flex;align-items:center;min-height:44px;padding:6px 16px}
  .nav-sub-toggle{width:24px;min-height:44px}
  /* Wraps to a second row on narrow desktops (and longer Nepali labels) instead of overflowing. */
  .site-header nav{gap:2px 10px;flex-wrap:wrap}
}
@media(max-width:1150px){
  .site-header nav .nav-group{flex-wrap:wrap;border-bottom:1px solid #edf1f2}
  .site-header nav .nav-group>a{flex:1;padding:12px 0}
  .site-header nav .nav-group>a:after{display:none}
  .nav-sub-toggle{width:44px;min-height:44px}
  .nav-group.is-open>.nav-sub{display:block;flex:1 0 100%;padding:0 0 10px 12px}
  .nav-sub a{padding:9px 0}
}
@media(max-width:760px){
  .site-header nav .nav-group>a{display:flex;align-items:center;min-height:50px;padding:0 0 0 12px;font-size:17px;font-weight:600}
  .site-header nav .nav-group>a[aria-current]{box-shadow:inset 3px 0 0 var(--red);font-weight:700}
  .nav-sub a{font-size:15px}
}
/* Grouped submenus: a small label above each group of links (The System). */
.nav-sub-heading{padding:10px 16px 2px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.nav-sub-heading:first-child{padding-top:6px}
/* The System: one grouped panel of ordinary links ("Start here", then labelled groups). Wide screens show the
   groups as columns under the menu row; the compact menu stacks the same groups inside the section. */
.nav-start .nav-sub-heading,.nav-col .nav-sub-heading{margin:0}
@media(min-width:1151px){
  .site-header nav{position:relative}
  .site-header nav .nav-group.has-panel{position:static}
  .nav-panel{left:0;right:auto;width:min(920px,100%);min-width:0;max-width:none;max-height:calc(100vh - var(--header-h) - 12px);padding:10px 8px 12px}
  /* An invisible bridge over the gap between the menu row and the panel keeps hover open. */
  .nav-panel::before{content:'';position:absolute;left:0;right:0;top:-14px;height:14px}
  /* The panel starts just under the menu row, so moving the pointer down never crosses a gap that ends the hover. */
  .nav-panel{top:calc(100% - 10px);padding-top:20px}
  .nav-start ul{display:flex;flex-wrap:wrap}
  .nav-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 8px;margin-top:8px;padding-top:6px;border-top:1px solid var(--line)}
  /* Utilities (Account, About) sit apart from the eight subject sections. */
  .site-header nav{justify-content:flex-start;column-gap:16px}
  .site-header nav .nav-account{margin-left:auto;padding-left:14px;border-left:1px solid var(--line)}
}
@media(max-width:1150px){
  /* The compact menu scrolls within the space under the header and above the phone tab bar. */
  .site-header nav{max-height:calc(100vh - var(--header-h) - var(--tabbar-h));max-height:calc(100dvh - var(--header-h) - var(--tabbar-h) - env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain}
  .nav-panel .nav-sub-heading{padding-left:0}
  .site-header nav .nav-account{margin-top:8px;border-top:1px solid var(--line)}
}
/* A practical tool related to the page (build-agenda.mjs toolLink). */
.tool-link{margin:14px 0;padding:10px 14px;border-left:4px solid var(--blue);background:#f5f8fc;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.tool-link-label{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
/* Provincial issues (/agenda/provinces/) are province-first cards; local issues (/agenda/local/) start with a municipality finder. */
.place-hub .eyebrow a{text-decoration:underline;text-underline-offset:3px}
.place-hub-provinces{border-top:6px solid var(--blue)}
.place-hub-local{border-top:6px solid var(--red)}
.province-hub-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.province-hub-count{margin:0 0 6px;color:var(--blue);font-size:14px}
.province-hub-count strong{font-family:var(--serif);font-size:34px;line-height:1;margin-right:4px}
.local-finder{margin-block:8px 28px;padding:18px;border:1px solid var(--line);background:#fbf7f8}
.local-finder label{display:block;font-weight:600;margin:10px 0 6px}
.local-finder input{width:100%;max-width:32rem;min-height:44px;padding:8px 12px;border:1px solid #a8b8c7;border-radius:6px;font-size:16px}
.local-directory{list-style:none;margin:12px 0 0;padding:0}
.place-hub-links{display:flex;flex-wrap:wrap;gap:6px 18px;padding-left:0;list-style:none}
.place-hub-links a{text-decoration:underline;text-underline-offset:3px}
.province-hub-card h2{font-size:clamp(22px,2.4vw,28px);line-height:1.15}

/* Phone tap targets: at least 24px for footnote numbers, table row links, checkboxes and link lists (beta audit 2026-10-18). */
@media (max-width: 760px) {
  sup.cite a { display: inline-block; min-width: 24px; min-height: 24px; padding: 4px 3px; line-height: 16px; text-align: center; }
  main table th a, main table td a { display: inline-block; min-height: 24px; padding: 3px 0; }
  main input[type="checkbox"], main input[type="radio"] { min-width: 24px; min-height: 24px; }
  .place-hub-links a, .where-next a, .how-we-know-list a { display: inline-block; min-height: 24px; padding: 3px 0; }
  /* Stand-alone links on phones are at least 44px tall: hub card titles, in-page tabs, back links, source links and buttons. */
  .inst-card h3 a, .page-tabs a, .agenda-hero > a, .agenda-section > a, main section > a[target="_blank"], main h4 > a, main .btn, .local-mp-link { display: inline-flex; align-items: center; min-height: 44px; }
  /* Links that sit in a line of text (meta lines, definition values, citations) keep flowing with it, at the 24px minimum. */
  .agenda-meta a, main dd > a, .sys-cite a { display: inline-block; min-height: 24px; padding-block: 3px; }
}
.local-directory-row.is-target { background: color-mix(in srgb, var(--blue) 10%, transparent); outline: 2px solid var(--blue); outline-offset: 2px; }
.where-next { margin-top: 32px; margin-bottom: 24px; }
.where-next h2 { font-size: 1.15rem; margin-bottom: 8px; }
/* Tap targets of at least 24px at every width (WCAG 2.2, 2.5.8). Vertical padding on inline links enlarges the target without changing line spacing. */
main p > a[target="_blank"], main small > a, .committee-name, .how-we-know a { padding-block: 2px; }
.ratings-how-link, .discovery-directory { display: inline-block; min-height: 24px; padding-block: 3px; }
.how-we-know-list a { display: inline-block; min-width: 24px; text-align: center; }