/* 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)}
@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(max-width:1050px){
  /* 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}}
@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}
}