/* ================= HEADER ================= */
.site-head{position:sticky; top:0; z-index:50; background:var(--paper); border-bottom:1px solid var(--line)}
.head-in{display:flex; align-items:center; gap:1rem; min-height:64px; padding:.5rem 0}
.brand{display:inline-flex; align-items:center; gap:.35rem; text-decoration:none; color:var(--ink); flex:0 0 auto}
.brand .mark{width:28px;height:28px;flex:0 0 auto; color:var(--accent); transition:color .25s ease, transform .25s ease}
.brand:hover .mark{color:var(--accent-2); transform:scale(1.08) rotate(-4deg)}
.brand b{font-family:var(--serif); font-size:1.22rem; font-weight:600; letter-spacing:.01em; color:var(--accent-2); transition:color .25s ease}
.brand:hover b{color:var(--accent)}
.brand span{display:block; font-size:.56rem; letter-spacing:.0em; color:color-mix(in srgb, var(--accent) 45%, var(--ink-3)); line-height:1.2; margin-top:0px}
html[lang="bn"] .brand span{letter-spacing:.03em}
.nav{display:flex; align-items:center; gap:.15rem; margin-inline-start:auto; flex-wrap:wrap}
.nav a{font-size:.93rem; color:var(--ink-2); text-decoration:none; padding:.45rem .6rem; border-radius:var(--r-sm); white-space:nowrap}
.nav a:hover{color:var(--ink); background:var(--paper-2)}
.nav a[aria-current="page"]{color:var(--ink); font-weight:600; box-shadow:inset 0 -2px 0 var(--accent)}
.head-tools{display:flex; align-items:center; gap:.5rem; margin-inline-start:.5rem}
#menuToggle{display:none}
@media (max-width:940px){
  #menuToggle{margin-inline-start:auto}
  /* Closed is the default here — display:none outright, not contingent on
     the [hidden] attribute selector winning a specificity contest against
     the desktop ".nav{display:flex}" rule. It only shows via :not([hidden]),
     so there is no path to an open dropdown without JS explicitly clearing
     the attribute (menuToggle click — see interactions.js). */
  .nav{display:none; position:fixed; top:64px; right:1rem; left:auto; z-index:60; width:min(78vw,300px); max-height:calc(100vh - 80px); overflow-y:auto; background:var(--paper); border:1px solid var(--line); border-radius:var(--r); flex-direction:column; align-items:stretch; padding:.4rem .9rem; gap:0; box-shadow:var(--shadow)}
  .nav:not([hidden]){display:flex}
  .nav a{padding:.8rem .4rem; border-bottom:1px solid var(--line); font-size:1rem; text-align:right}
  .nav a[aria-current="page"]{box-shadow:none; color:var(--accent-2)}
  #menuToggle{display:inline-flex}
  /* Nothing in .head-tools is meant to be visible on mobile any more — both
     the language toggle and the share CTA have moved into the dropdown —
     so drop it from the flex row entirely rather than leaving empty space
     that nudges the hamburger off the true right edge. */
  .head-tools{display:none}
  /* language toggle and share CTA relocate into the dropdown as its last
     two items on mobile (moved in the DOM by shell.js's placeLangToggle),
     the toggle keeping its own compact button box rather than stretching
     into a menu row, and the CTA following it as a full-width button. */
  .nav #langToggle{align-self:flex-end; margin:.7rem 0 .2rem}
  /* .nav a's own color:var(--ink-2) (line 13) outranks .btn-primary's
     color:#FFFDF9 in specificity, so the button needs its text color
     reasserted here — plain a-tag styling would otherwise wash it out
     against the accent background. */
  .nav #headCta{align-self:stretch; margin:0 0 .7rem; padding:.62rem 1.05rem; border-bottom:none; text-align:center; color:#FFFDF9}
  .nav #headCta:hover{background:var(--accent-2); border-color:var(--accent-2); color:#FFFDF9}
}
@media (min-width:941px){ .nav{display:flex !important} }
@media (max-width:480px){
  .head-in{gap:.5rem}
  .brand span{display:none}
  .head-tools{gap:.35rem; margin-inline-start:.35rem}
  #headCta{padding:.5rem .7rem; font-size:.82rem}
}

/* ================= BUTTONS ================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font:inherit;font-size:.94rem;font-weight:600;
  padding:.62rem 1.05rem;border-radius:0;border:1px solid var(--line-2);background:var(--card);color:var(--ink);
  text-decoration:none;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}
.btn:hover{background:var(--paper-2); color:var(--ink)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#FFFDF9}
.btn-primary:hover{background:var(--accent-2);border-color:var(--accent-2);color:#FFFDF9}
:root[data-theme="dark"] .btn-primary{color:#0B1E1B}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn-primary{color:#0B1E1B}}
.btn-quiet{background:transparent;border-color:var(--line-2);color:var(--ink-2)}
.btn-sm{padding:.4rem .8rem;font-size:.85rem}
.btn-block{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--r);border:1px solid var(--line-2);background:var(--card);color:var(--ink);cursor:pointer;padding:0}
.icon-btn:hover{background:var(--paper-2)}
.btn-row{display:flex;flex-wrap:wrap;gap:.6rem}

/* ================= CARDS ================= */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(1rem,2.4vw,1.5rem)}
.card-link{display:block;text-decoration:none;color:inherit;transition:border-color .15s ease, transform .15s ease}
.card-link:hover{border-color:var(--line-2); color:inherit}
.card h3{margin-top:0}
.card-tight{padding:1rem}

/* voice cards */
.voice{position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(1rem,2.4vw,1.4rem); border-inline-start:4px solid var(--line-2)}
.voice-experience{border-inline-start-color:var(--accent-line)}
.voice-perspective{border-inline-start-color:var(--slate); background:linear-gradient(to right, var(--slate-soft), var(--card) 62%)}
.voice-meta-header{display:flex;flex-direction:column;gap:.45rem;margin-bottom:.6rem}
.voice-tags{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.voice-place{font-size:.82rem;color:var(--ink-3);font-weight:500;letter-spacing:.01em}
.voice-quote{font-family:var(--serif); font-size:1.06rem; line-height:1.85; color:var(--ink); margin:.35rem 0 .9rem}
html[lang="bn"] .voice-quote{line-height:1.95}
.voice-meta{display:flex;flex-wrap:wrap;gap:.4rem .55rem;align-items:center;font-size:.82rem;color:var(--ink-3)}
.voice-foot{margin-top:.9rem;padding-top:.75rem;border-top:1px dashed var(--line-2);font-size:.78rem;color:var(--ink-3);line-height:1.6}
.origin-note{font-size:.76rem;color:var(--ink-3);font-style:italic;margin:-.4rem 0 .8rem}
.voice-title{font-family:var(--serif);font-size:1.14rem;font-weight:600;line-height:1.4;color:var(--ink);margin:.25rem 0 .6rem}
.voice-status-row{margin:0 0 .5rem}
.voice-issue-row{margin:0 0 .65rem}

/* The editorial experience card: a calmer layout with one clear reading
   path. Used everywhere experiences/perspectives are rendered as cards
   (home, experiences, issue, place, opinion, demands, search). */
.experience-card{display:flex;flex-direction:column;min-height:100%;padding:0;overflow:hidden;border-inline-start-width:5px;box-shadow:0 1px 0 rgba(21,18,14,.02);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.experience-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--accent-line)}
.experience-card-body{display:flex;flex:1;flex-direction:column;padding:clamp(1rem,2.4vw,1.35rem) clamp(1rem,2.5vw,1.5rem) 1rem}
.experience-card-perspective{align-self:flex-start;margin:1rem 1rem -.15rem}
.experience-card-topline{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:.35rem .75rem;margin-bottom:.4rem}
.experience-card-topline .voice-place{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-top:.15rem;flex:1 1 auto}
.experience-card-badges{display:flex;align-items:center;flex-wrap:wrap;gap:.35rem .45rem;justify-content:flex-end;margin-inline-start:auto}
.experience-card-badges .tag{flex:0 0 auto}
.experience-card .voice-title{font-size:clamp(1.16rem,1.05rem + .35vw,1.35rem);line-height:1.38;margin:0 0 .7rem}
.experience-card .origin-note{margin:0 0 .7rem;padding:.45rem .65rem;border-inline-start:2px solid var(--line-2);background:var(--paper-2);border-radius:0}
.experience-card .voice-quote{font-size:1.08rem;line-height:1.78;margin:0 0 1rem}
html[lang="bn"] .experience-card .voice-quote{line-height:1.95}
.experience-card .official-response{margin-top:auto}
.experience-card-actions{display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between;gap:.6rem;margin-top:auto;padding-top:.85rem}
.experience-card-buttons{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}
.experience-card-read{display:inline-flex;align-items:center;white-space:nowrap;text-decoration:none}
.experience-card-meta{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem .55rem;font-size:.8rem;color:var(--ink-3)}
.experience-card-foot{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .6rem}
.experience-card-foot .foot-sep{width:5px;height:5px;flex:0 0 auto;background:currentColor;opacity:.45}
.experience-card .voice-foot{margin:0;padding:.8rem clamp(1rem,2.5vw,1.5rem) 1rem;border-top:1px dashed var(--line-2);background:color-mix(in srgb,var(--paper-2) 52%,transparent);font-size:.75rem}
@media (prefers-reduced-motion:reduce){.experience-card:hover{transform:none}}

/* "Other accounts on this issue" — experience detail page only
   (pageExperienceDetail's .related-accounts wrapper, experienceCard
   opts.rowLayout). Reuses the same main-column/rail split as the Home and
   Experiences ledger rows so the status badges and "Me too" action sit in
   a proportioned rail instead of stretching edge-to-edge, but keeps its
   bordered card box here since .experience-card-row's rules only touch
   the inner grid, never the card's own border/background. */

/* Row layout — Home "Recent experiences" only (experienceCard opts.rowLayout).
   Message stays in a left column; status badges and the "Me too" action move
   into a right rail so the status lines up with the context row and the
   action lines up with the footer row, per the ledger reference design. */
.experience-card-row .experience-card-body{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;column-gap:clamp(1rem,2.5vw,1.75rem)}
.experience-card-row .experience-card-main{display:flex;flex-direction:column;min-width:0}
.experience-card-row .experience-card-badges{justify-content:flex-end}
.experience-card-row .experience-card-rail{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:.6rem}
.experience-card-row .experience-card-status{display:flex;flex-direction:column;align-items:flex-end;gap:.4rem}
@media (max-width:640px){
  /* Phone reflow only: same elements, same markup, same button/badge
     styling — just reordered into meta / badges / (More details + action)
     by mapping main+actions+rail's children onto named grid cells instead
     of the desktop main-column/rail split. */
  .experience-card-row .experience-card-body{
    grid-template-columns:1fr auto;
    grid-template-areas:
      "topline topline"
      "title title"
      "origin origin"
      "quote quote"
      "response response"
      "meta meta"
      "badges badges"
      "link action";
  }
  .experience-card-row .experience-card-main,
  .experience-card-row .experience-card-actions,
  .experience-card-row .experience-card-rail{display:contents}
  .experience-card-row .experience-card-topline{grid-area:topline}
  .experience-card-row .voice-title{grid-area:title}
  .experience-card-row .origin-note{grid-area:origin}
  .experience-card-row .voice-quote{grid-area:quote}
  .experience-card-row .official-response{grid-area:response}
  .experience-card-row .experience-card-meta{grid-area:meta}
  .experience-card-row .experience-card-status{grid-area:badges;flex-direction:row;align-items:center;justify-self:start}
  .experience-card-row .experience-card-read{grid-area:link;align-self:center;justify-self:start}
  .experience-card-row .cta-split{grid-area:action;align-self:center;justify-self:end}
  /* "More details" and the corroborate/support pill sit too close together
     at phone widths — give them more breathing room than the desktop gap */
  .experience-card-buttons{gap:1rem}
  /* vertical rhythm between meta, status badges and the action row */
  .experience-card-row .experience-card-meta{margin-top:.25rem}
  .experience-card-row .experience-card-status{margin-top:.9rem;flex-wrap:wrap;gap:.5rem}
  .experience-card-row .experience-card-read,
  .experience-card-row .cta-split{margin-top:1.1rem}
}

/* Split "Me too" button (label | count), used only by the row layout above. */
.cta-split{display:inline-flex;align-items:stretch;border:1px solid var(--ink);font:inherit;font-weight:700;font-size:.85rem;overflow:hidden;background:none;padding:0;cursor:pointer;white-space:nowrap}
.cta-split-label,.cta-split-count{display:flex;align-items:center;padding:.45rem .85rem}
.cta-split-label{background:var(--ink);color:#FFFDF9}
.cta-split-count{background:var(--card);color:var(--ink);border-inline-start:1px solid var(--ink)}
.cta-split:hover:not([disabled]) .cta-split-label{background:var(--accent-2)}
.cta-split[aria-pressed="true"]{border-color:var(--line-2);cursor:not-allowed}
.cta-split[aria-pressed="true"] .cta-split-label{background:var(--card);color:var(--ink-2)}
.cta-split[aria-pressed="true"] .cta-split-count{background:var(--card);color:var(--ink-2);border-inline-start-color:var(--line-2)}

/* corroboration ("this happened to me too") — justify-content:space-between
   (rather than margin-inline-start:auto on the Share button) so that when
   the row wraps to two lines on a narrow card, Share lands at the start of
   its own line instead of floating off to the right on its own. */
.corrob-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem;margin-top:.9rem;padding-top:.85rem;border-top:1px dashed var(--line-2)}
.corrob-row .btn svg{flex:0 0 auto}

/* official response — visually distinct from citizen voices, never mixed in */
.official-response{margin-top:.9rem;padding:clamp(.8rem,2vw,1.1rem);background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:var(--r-lg)}
.official-response-label{display:flex;align-items:center;gap:.4rem;font-size:.79rem;font-weight:700;color:var(--accent-2);margin:0 0 .45rem}
.official-response-body{margin:0;color:var(--ink);line-height:1.7}

/* ================= TAGS / CHIPS ================= */
.tag{display:inline-flex;align-items:center;gap:.35rem;font-size:.76rem;font-weight:600;padding:.2rem .55rem;border-radius:0;border:1px solid var(--line-2);background:var(--paper-2);color:var(--ink-2);white-space:nowrap}
.tag-accent{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-2)}
.tag-amber{background:var(--amber-soft);border-color:var(--amber-line);color:var(--amber)}
.tag-brick{background:var(--brick-soft);border-color:var(--brick-line);color:var(--brick)}
.tag-slate{background:var(--slate-soft);border-color:var(--slate-line);color:var(--slate)}
/* Quiet outline pill — used only for the constant "Unverified" badge, so
   it never competes visually with the colored, factual outcome pill next
   to it (see components/cards.js unverifiedBadge()). */
.tag-ghost{background:transparent;border-color:var(--line-2);color:var(--ink-3);font-weight:500}
.dot{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.55;flex:0 0 auto}
.divider{color:var(--ink-3);opacity:.7;font-weight:300;margin:0 .25rem}
.perspective-label{display:inline-flex;align-items:flex-start;gap:.45rem;font-size:.79rem;font-weight:600;color:var(--slate);background:var(--slate-soft);border:1px solid var(--slate-line);border-radius:var(--r);padding:.32rem .6rem;line-height:1.5}

/* ================= FORMS ================= */
label{display:block;font-weight:600;font-size:.92rem;margin-bottom:.3rem}
.field{margin-bottom:1.1rem}
.hint{font-size:.8rem;color:var(--ink-3);font-weight:400;margin:.15rem 0 .45rem;line-height:1.6}
input[type=text],input[type=search],select,textarea{
  width:100%;font:inherit;font-size:.98rem;color:var(--ink);background:var(--card);
  border:1px solid var(--line-2);border-radius:var(--r);padding:.6rem .7rem;line-height:1.6}
textarea{min-height:190px;resize:vertical;line-height:1.85;font-family:var(--serif)}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-inline-end:2.2rem}
.choice-grid{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.choice{display:flex;gap:.7rem;align-items:flex-start;border:1px solid var(--line-2);background:var(--card);border-radius:var(--r);padding:.8rem .9rem;cursor:pointer;text-align:start;font:inherit;color:var(--ink);width:100%}
.choice:hover{border-color:var(--accent-line);background:var(--paper-2)}
.choice[aria-pressed="true"],.choice.is-on{border-color:var(--accent);background:var(--accent-soft)}
.choice b{display:block;font-size:.98rem}
.month-grid-field{display:none}
.choice small{display:block;color:var(--ink-3);font-size:.8rem;line-height:1.55;font-weight:400}
@media (max-width:640px){
  .choice{min-width:0;overflow-wrap:anywhere}
  .choice-grid.cg-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .choice-grid.cg-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .choice-grid.cg-2 .choice,.choice-grid.cg-3 .choice{padding:.7rem .6rem}
  .choice-grid.cg-3 .choice{justify-content:center;text-align:center}
  /* dropdowns must never be wider than the screen */
  #shareForm select{max-width:100%;min-width:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
  #shareForm .field{min-width:0}
  .month-select-field{display:none}
  .month-grid-field{display:block}
  .choice-grid.cg-month{grid-template-columns:repeat(3,minmax(0,1fr))}
  .choice-grid.cg-month .choice{justify-content:center;text-align:center;padding:.6rem .3rem}
  .choice-grid.cg-month .choice:first-child{grid-column:1 / -1}
}
.check{display:flex;gap:.7rem;align-items:flex-start;padding:.85rem .95rem;border:1px solid var(--line-2);border-radius:var(--r);background:var(--card);margin-bottom:.7rem;cursor:pointer;font-weight:400;font-size:.92rem;line-height:1.7}
.check input{margin-top:.35rem;width:18px;height:18px;accent-color:var(--accent);flex:0 0 auto}
.check.is-on{border-color:var(--accent-line);background:var(--accent-soft)}
fieldset{border:0;padding:0;margin:0 0 1.2rem}
legend{font-family:var(--serif);font-size:1.15rem;font-weight:600;padding:0;margin-bottom:.3rem}

/* filters */
.filters{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:1rem}
.filter-grid{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.filter-grid label{font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
html[lang="bn"] .filter-grid label{letter-spacing:0;text-transform:none;font-size:.84rem}
.result-bar{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:space-between;margin:1.25rem 0 1rem;padding-bottom:.6rem;border-bottom:1px solid var(--line)}

/* Search+Clear row under expLandingFilterBar()'s grid — its own classes
   (rather than the inline style it used to carry) so the mobile media
   query below can reshape it; inline styles can't be overridden by a
   stylesheet without !important. */
.filter-search-row{display:flex;gap:.6rem;align-items:flex-end;justify-content:space-between;margin-top:.75rem}
.filter-search-field{max-width:260px;flex:1 1 260px;min-width:0}
.filter-search-row .btn{flex:0 0 auto}

@media (max-width:640px){
  .filters{padding:.85rem}
  .filter-grid{grid-template-columns:1fr;gap:.65rem}
  .filter-search-row{flex-wrap:wrap;justify-content:flex-end}
  .filter-search-field{max-width:none;flex-basis:100%}
  /* scoped to .filter-grid so the summary page's unrelated trend-range
     .seg (outside any filter box) is left alone */
  .filter-grid .seg{width:100%}
  .filter-grid .seg button{flex:1 1 auto;text-align:center}
  #filterForm .filter-grid, #expFilterForm .filter-grid{row-gap:1rem;column-gap:1rem}
}

/* Experiences page filter redesign — each dropdown is a white, bordered
   box (like the outer .filters panel's line, one level in): a real native
   <select> (so clicking it opens an actual dropdown list, not a
   permanently-visible value line) with the field's name overlaid on top,
   pointer-events:none, only while nothing is chosen (.exp-field.is-empty,
   set at render time in experiences.js's expField()). Once a value is
   picked the overlay hides and the select's own selected-option text
   shows through in its place — so the control shows either the field name
   (caps, not bold) or the chosen value (normal case), never both at once.
   A boxed search field and a square icon clear button round it out.
   Scoped to #filterForm (#/experiences/all) and #expFilterForm
   (#/experiences landing) — the only two forms that use these ids — plus
   #clearFilters/#clearExpFilters, likewise unique to the experiences page,
   so demands/opinion/summary keep the original .filters look untouched.
   The outer box itself is left as the shared .filters style (background,
   border, radius, padding) — the same box/color the Summary page's own
   filter panel already uses — so it isn't overridden here. */
#filterForm .filter-grid, #expFilterForm .filter-grid{row-gap:1.5rem;column-gap:2rem;align-items:end}
#filterForm .exp-field, #expFilterForm .exp-field{
  position:relative;background:var(--card);border:1px solid var(--ink);
  padding:.65rem 2.15rem .65rem .9rem}
#filterForm .exp-field select, #expFilterForm .exp-field select{
  width:100%;appearance:none;-webkit-appearance:none;-moz-appearance:none;
  border:0;border-radius:0;background-color:transparent;background-image:none;
  padding:0;margin:0;font:inherit;font-size:.98rem;font-weight:400;
  color:var(--ink);cursor:pointer}
#filterForm .exp-field.is-empty select, #expFilterForm .exp-field.is-empty select{color:transparent}
#filterForm .exp-field select:focus-visible, #expFilterForm .exp-field select:focus-visible{
  outline:2px solid var(--ink);outline-offset:3px}
#filterForm .exp-field-cap, #expFilterForm .exp-field-cap{
  position:absolute;inset:.65rem 2.15rem .65rem .9rem;display:none;align-items:center;
  font-size:.98rem;font-weight:400;letter-spacing:0;text-transform:uppercase;
  color:var(--ink);pointer-events:none;white-space:nowrap;overflow:hidden}
#filterForm .exp-field.is-empty .exp-field-cap, #expFilterForm .exp-field.is-empty .exp-field-cap{display:flex}
html[lang="bn"] #filterForm .exp-field-cap, html[lang="bn"] #expFilterForm .exp-field-cap{text-transform:none}
#filterForm .exp-field::after, #expFilterForm .exp-field::after{
  content:"";position:absolute;right:.9rem;top:50%;margin-top:-3px;pointer-events:none;
  width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;
  border-top:7px solid var(--ink)}
#filterForm input#f-q, #expFilterForm input#f-q{
  background:var(--paper-2);border:1px solid var(--ink);border-radius:0;
  font-weight:400;padding:.65rem .8rem}
/* Only the two filter-bar clear buttons (beside the search field, like the
   mockup's boxed X) get the icon treatment — #clearFilters2 is the bigger
   "no results" call-to-action in the empty state and keeps its normal
   labeled-button look. */
#clearFilters, #clearExpFilters{
  width:2.4rem;height:2.4rem;flex:0 0 auto;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--ink);border-radius:0;background:var(--card);font-size:0}
#clearFilters::before, #clearExpFilters::before{
  content:"\2715";font-size:1.05rem;font-weight:400;color:var(--ink)}

/* Same white-boxed dropdown treatment as the Experiences page's own
   #filterForm/#expFilterForm block above, carried over to Demands'
   demandsTable() (#demandsFilterForm/.dmd-field), Opinion's
   opinionsTable() (#opinionFilterForm/.opn-field) and the Patterns page's
   patternsFilterBar() (#patternsFilterForm/.pat-field) — see each page's
   own dmdField()/opnField()/patternsSelect(). Written as its own rule
   block (not folded into the Experiences one above) so that block stays
   untouched and these three pages' filter panels can only ever affect
   their own markup, never each other's or Experiences'/Issue's. Neither
   Demands nor Opinion nor Patterns has a search field in its filter bar,
   so there's no boxed-search-input or icon-clear-button counterpart here
   — their existing "Clear" buttons stay normal labelled buttons. The
   outer box itself is left as the shared .filters style, same as
   Experiences. */
#demandsFilterForm .filter-grid, #opinionFilterForm .filter-grid, #patternsFilterForm .filter-grid{
  row-gap:1.5rem;column-gap:2rem;align-items:end}
#demandsFilterForm .dmd-field, #opinionFilterForm .opn-field, #patternsFilterForm .pat-field{
  position:relative;background:var(--card);border:1px solid var(--ink);
  padding:.65rem 2.15rem .65rem .9rem}
#demandsFilterForm .dmd-field select, #opinionFilterForm .opn-field select, #patternsFilterForm .pat-field select{
  width:100%;appearance:none;-webkit-appearance:none;-moz-appearance:none;
  border:0;border-radius:0;background-color:transparent;background-image:none;
  padding:0;margin:0;font:inherit;font-size:.98rem;font-weight:400;
  color:var(--ink);cursor:pointer}
#demandsFilterForm .dmd-field.is-empty select, #opinionFilterForm .opn-field.is-empty select, #patternsFilterForm .pat-field.is-empty select{
  color:transparent}
#demandsFilterForm .dmd-field select:focus-visible, #opinionFilterForm .opn-field select:focus-visible, #patternsFilterForm .pat-field select:focus-visible{
  outline:2px solid var(--ink);outline-offset:3px}
#demandsFilterForm .dmd-field-cap, #opinionFilterForm .opn-field-cap, #patternsFilterForm .pat-field-cap{
  position:absolute;inset:.65rem 2.15rem .65rem .9rem;display:none;align-items:center;
  font-size:.98rem;font-weight:400;letter-spacing:0;text-transform:uppercase;
  color:var(--ink);pointer-events:none;white-space:nowrap;overflow:hidden}
#demandsFilterForm .dmd-field.is-empty .dmd-field-cap, #opinionFilterForm .opn-field.is-empty .opn-field-cap, #patternsFilterForm .pat-field.is-empty .pat-field-cap{
  display:flex}
html[lang="bn"] #demandsFilterForm .dmd-field-cap, html[lang="bn"] #opinionFilterForm .opn-field-cap, html[lang="bn"] #patternsFilterForm .pat-field-cap{
  text-transform:none}
#demandsFilterForm .dmd-field::after, #opinionFilterForm .opn-field::after, #patternsFilterForm .pat-field::after{
  content:"";position:absolute;right:.9rem;top:50%;margin-top:-3px;pointer-events:none;
  width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;
  border-top:7px solid var(--ink)}
@media (max-width:640px){
  #demandsFilterForm .filter-grid, #opinionFilterForm .filter-grid, #patternsFilterForm .filter-grid{row-gap:1rem;column-gap:1rem}
}

/* Summary page (#/summary): applied-filter chips under the filter grid. */
.sum-chip-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:.85rem}
.sum-chip{display:inline-flex;align-items:center;gap:.4rem;font:inherit;font-size:.78rem;font-weight:600;
  padding:.32rem .55rem .32rem .7rem;border-radius:0;border:1px solid var(--accent-line);
  background:var(--accent-soft);color:var(--accent-2);cursor:pointer;line-height:1}
.sum-chip:hover{border-color:var(--accent)}
.sum-chip svg{opacity:.7}
.sum-chip-clear{font:inherit;font-size:.78rem;color:var(--ink-3);text-decoration:underline;
  text-underline-offset:2px;background:none;border:0;cursor:pointer;padding:.32rem .2rem}
.sum-chip-clear:hover{color:var(--ink-2)}

/* ================= DATA DISPLAY ================= */
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.1rem 1.15rem}
.stat-k{font-size:.8rem;color:var(--ink-3);margin:0 0 .3rem;line-height:1.5}
.stat-v{font-family:var(--serif);font-size:clamp(1.6rem,1.2rem + 1.4vw,2.15rem);font-weight:600;line-height:1.15;color:var(--ink)}
.stat-s{font-size:.78rem;color:var(--ink-3);margin-top:.3rem;line-height:1.55}
.insufficient{color:var(--amber);font-weight:600;font-size:.95rem;font-family:var(--sans)}

/* Summary page (#/summary) stat tiles: a .stat with a tone accent bar and
   icon badge. Scoped to its own classes (not .stat itself) so nothing
   else that renders statCard() picks this look up. */
.sum-stat{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.1rem 1.2rem 1.05rem;overflow:hidden;transition:transform .15s ease,border-color .15s ease}
.sum-stat::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:4px;background:var(--tone)}
.sum-stat:hover{transform:translateY(-2px);border-color:var(--line-2)}
.sum-stat-top{display:flex;align-items:center;gap:.55rem;margin-bottom:.5rem}
.sum-stat-icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:50%;background:var(--tone-soft);color:var(--tone);flex:0 0 auto}
.sum-stat.tone-accent{--tone:var(--accent);--tone-soft:var(--accent-soft)}
.sum-stat.tone-slate{--tone:var(--slate);--tone-soft:var(--slate-soft)}
.sum-stat.tone-amber{--tone:var(--amber);--tone-soft:var(--amber-soft)}
.sum-stat.tone-brick{--tone:var(--brick);--tone-soft:var(--brick-soft)}
.bars{list-style:none;margin:0;padding:0}
.bars li{padding:.55rem 0;border-bottom:1px solid var(--line)}
.bars li:last-child{border-bottom:0}
.bar-top{display:flex;gap:1rem;justify-content:space-between;align-items:baseline;margin-bottom:.35rem;font-size:.9rem}
.bar-top .pctv{color:var(--ink-3);font-size:.83rem;white-space:nowrap}
.bar-track{height:8px;border-radius:0;background:var(--paper-2);border:1px solid var(--line);overflow:hidden}
.bar-fill{height:100%;background:var(--accent);border-radius:0;transition:width .5s cubic-bezier(.4,0,.2,1)}
.bar-fill.f-amber{background:var(--amber)}
.bar-fill.f-slate{background:var(--slate)}
.bar-fill.f-brick{background:var(--brick)}
.chart-note{font-size:.78rem;color:var(--ink-3);line-height:1.65;margin-top:.75rem;border-inline-start:3px solid var(--line-2);padding-inline-start:.7rem}
.note{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);padding:.9rem 1rem;font-size:.86rem;color:var(--ink-2);line-height:1.7}
.note-amber{background:var(--amber-soft);border-color:var(--amber-line)}
.note-brick{background:var(--brick-soft);border-color:var(--brick-line)}
.note-accent{background:var(--accent-soft);border-color:var(--accent-line)}
/* Collapsed by default (no [open]) — the marker arrow is the only visible
   toggle affordance; content stays hidden until it's clicked. */
.disclosure{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r)}
.disclosure summary{list-style:none;cursor:pointer;padding:.9rem 1rem;font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.disclosure summary::-webkit-details-marker{display:none}
.disclosure summary::after{content:"";width:.55rem;height:.55rem;flex:none;border-inline-end:2px solid var(--ink);border-block-end:2px solid var(--ink);transform:rotate(45deg);transition:transform .15s ease;margin-block-start:-.2rem}
.disclosure[open] summary::after{transform:rotate(-135deg);margin-block-start:.2rem}
.disclosure-body{padding:0 1rem .9rem;font-size:.86rem;color:var(--ink-2);line-height:1.7}
.disclosure-body p:first-child{margin-top:0}
.toast{position:fixed;inset-block-end:1rem;inset-inline:1rem auto;background:var(--ink);color:var(--paper);padding:.7rem 1rem;border-radius:var(--r);font-size:.88rem;z-index:200;box-shadow:var(--shadow);max-width:min(92vw,420px)}
.toast.out{opacity:0}
.disclaimer{font-size:.78rem;color:var(--ink-3);line-height:1.65}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card)}
table.data{font-size:.88rem;min-width:560px}
table.data th,table.data td{text-align:start;padding:.7rem .85rem;border-bottom:1px solid var(--line);vertical-align:top}
table.data thead th{font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);background:var(--paper-2);position:sticky;top:0}
html[lang="bn"] table.data thead th{letter-spacing:0;text-transform:none;font-size:.83rem}
table.data tbody tr:last-child td{border-bottom:0}
td.num,th.num{text-align:end}
.trend-svg{display:block;width:100%;height:auto;overflow:visible}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:0;overflow:hidden;background:var(--card);flex-wrap:wrap}
.seg button{appearance:none;border:0;background:transparent;font:inherit;font-size:.82rem;padding:.35rem .75rem;color:var(--ink-3);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--accent);color:#FFFDF9;font-weight:600}
:root[data-theme="dark"] .seg button[aria-pressed="true"]{color:#0B1E1B}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .seg button[aria-pressed="true"]{color:#0B1E1B}}

/* ================= MISC ================= */
.crumbs{font-size:.83rem;color:var(--ink-3);margin:1.25rem 0 .5rem;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.crumbs a{color:var(--ink-3)}
.empty{text-align:center;padding:clamp(2rem,6vw,3.5rem) 1.25rem;border:1px dashed var(--line-2);border-radius:var(--r-lg);background:var(--paper-2)}
.empty h3{margin-bottom:.4rem}
.empty p{max-width:52ch;margin-inline:auto;color:var(--ink-2)}
.tabs{display:flex;gap:.25rem;overflow-x:auto;border-bottom:1px solid var(--line);margin-bottom:1.75rem;padding-bottom:1px;-webkit-overflow-scrolling:touch}
.tabs button{appearance:none;border:0;background:transparent;font:inherit;font-size:.92rem;color:var(--ink-3);padding:.7rem .85rem;cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button[aria-selected="true"]{color:var(--ink);font-weight:600;border-bottom-color:var(--accent)}
.steps{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.steps li{counter-increment:s;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.1rem}
.steps li::before{content:counter(s);display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--accent-soft);color:var(--accent-2);border:1px solid var(--accent-line);font-size:.8rem;font-weight:700;font-variant-numeric:tabular-nums;margin-bottom:.6rem}
.steps li h4{margin:0 0 .25rem}
.steps li p{margin:0;font-size:.88rem;color:var(--ink-2)}
.progress{display:flex;gap:4px;margin:0 0 .35rem}
.progress i{flex:1;height:4px;border-radius:0;background:var(--line);display:block}
.progress i.on{background:var(--accent)}
.claimcode{font-family:var(--mono);font-size:clamp(1.5rem,1.1rem + 2.4vw,2.4rem);font-weight:800;letter-spacing:.08em;background:var(--paper);border:3px solid var(--ink);border-radius:var(--r);padding:1.1rem 1rem;text-align:center;word-break:break-all;user-select:all}
.refcode{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;margin-top:1.1rem;padding:.8rem 1rem;background:var(--paper);border:2px solid var(--ink);border-radius:var(--r)}
.refcode-label{font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.refcode-value{font-family:var(--mono);font-size:clamp(1.2rem,1rem + 1.2vw,1.7rem);font-weight:800;letter-spacing:.05em;word-break:break-all;user-select:all}
mark.scan{background:var(--amber-soft);color:var(--amber);box-shadow:0 0 0 1px var(--amber-line);border-radius:0;padding:0 2px;font-weight:600}
.scan-preview{border:1px solid var(--line-2);border-radius:var(--r);background:var(--paper-2);padding:.8rem;font-size:.9rem;line-height:1.85;max-height:170px;overflow:auto;white-space:pre-wrap;font-family:var(--serif)}
.timeline{list-style:none;margin:0;padding:0 0 0 1.2rem;border-inline-start:2px solid var(--line)}
.timeline li{position:relative;padding:0 0 1.4rem .3rem}
.timeline li::before{content:"";position:absolute;inset-inline-start:-1.72rem;top:.55rem;width:9px;height:9px;border-radius:50%;background:var(--paper);border:2px solid var(--line-2)}
.timeline li.done::before{background:var(--accent);border-color:var(--accent)}
.timeline time{display:block;font-size:.78rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.timeline b{display:block;margin:.1rem 0 .15rem}
.timeline p{margin:0;font-size:.88rem;color:var(--ink-2)}
.hero{padding:clamp(2.5rem,7vw,5rem) 0 clamp(2rem,5vw,3rem)}
.hero h1{max-width:23ch;margin-bottom:.75rem}
.hero .lede{font-size:clamp(1.02rem,.98rem + .35vw,1.18rem)}
.trust-bar{list-style:none;margin:1.25rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.trust-bar li{display:flex;align-items:center;gap:.4rem;background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent-2);border-radius:0;padding:.42rem .8rem;font-size:.82rem;font-weight:600;line-height:1.2}
.trust-bar svg{flex:0 0 auto}
/* English copy in the hero runs .10rem smaller than Bangla — bn keeps the base sizes above */
html[lang="en"] .hero h1{font-size:clamp(1.65rem,1.1rem + 2.4vw,2.6rem)}
html[lang="en"] .hero .lede{font-size:clamp(.92rem,.88rem + .35vw,1.08rem)}
html[lang="en"] .hero .btn-row .btn{font-size:.84rem}
html[lang="en"] .trust-bar li{font-size:.72rem}
.glance{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.1rem 1.2rem;box-shadow:var(--shadow)}
.glance ul{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.glance li{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--line);padding-bottom:.7rem}
.glance li:last-child{border-bottom:0;padding-bottom:0}
.glance li.stacked{flex-direction:column;align-items:flex-start;gap:.3rem}
.glance .k{font-size:.87rem;color:var(--ink-2)}
.glance .k.strong{font-weight:600;color:var(--ink)}
.glance .v{font-family:var(--serif);font-size:1.5rem;font-weight:600;font-variant-numeric:tabular-nums}
.principle{background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:var(--r-lg);padding:1.4rem;display:flex;flex-direction:column;justify-content:center}
.principle p:last-child{margin:0}
.principle .big{font-family:var(--serif);font-size:1.25rem;font-weight:600;color:var(--accent-2);line-height:1.5}
.poll-opt{display:flex;gap:.6rem}
.poll-res{margin-top:.9rem}
.poll-row{margin-bottom:.6rem}
.poll-row .bar-track{height:26px;border-radius:var(--r-sm)}
.poll-row .bar-fill{border-radius:var(--r-sm) 0 0 var(--r-sm)}
.poll-combo-labels{display:flex;justify-content:space-between;font-weight:700;font-size:1.15rem;margin-bottom:.5rem}
.poll-combo-track{display:flex;height:38px;border:1px solid var(--ink);overflow:hidden}
.poll-combo-seg{display:flex;align-items:center;font-size:1rem;font-weight:700;white-space:nowrap;overflow:hidden;padding:0 .7rem}
.poll-combo-yes{background:var(--ink);color:var(--paper);justify-content:flex-start}
.poll-combo-no{background:var(--paper);color:var(--ink);justify-content:flex-end}

/* financial overview cards */
.fin-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.6rem;padding:1.25rem !important;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);transition:border-color .2s ease}
.fin-card-label{font-size:.9rem;color:var(--ink-2);font-weight:500}
.fin-card-value{font-family:var(--serif);font-size:1.8rem;font-weight:600;line-height:1.1}
.fin-card-pct{font-size:.85rem;color:var(--ink-3);font-weight:500}

.reveal{animation:rise .45s cubic-bezier(.2,.7,.3,1) both}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}
.site-foot{border-top:1px solid var(--line);background:var(--paper-2);padding:1rem 0 1rem;margin-top:2rem}
.foot-grid{display:grid;gap:1.75rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.foot-grid h4{font-family:var(--sans);font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.6rem}
html[lang="bn"] .foot-grid h4{letter-spacing:0;text-transform:none;font-size:.85rem}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li{margin:.35rem 0}
.foot-grid a{color:var(--ink-2);text-decoration:none;font-size:.9rem}
.foot-grid a:hover{color:var(--ink);text-decoration:underline}
.foot-bottom{font-size:.82rem;color:var(--ink-3);display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem;justify-content:space-between}
.foot-bottom a:not(.btn){color:var(--ink-2);text-decoration:none}
.foot-bottom a:not(.btn):hover{color:var(--ink);text-decoration:underline}
.foot-links{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
@media (max-width:640px){
  .foot-bottom{justify-content:center;text-align:center}
  .foot-links{justify-content:center}
}
.two-col{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));align-items:start}
.col-head{display:flex;align-items:center;gap:.5rem;margin-bottom:.9rem;padding-bottom:.6rem;border-bottom:2px solid var(--line)}
.col-head h3{margin:0}
.col-head.is-perspective{border-bottom-color:var(--slate-line)}

/* pager (new: server-side pagination on the Experiences list) */
.pager{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:2rem}
.pager .pager-status{font-size:.85rem;color:var(--ink-3)}
/* Experiences landing page only (expStandpointSection() in experiences.js):
   a divider line right after the last card's foot text, before the
   section's Previous/Next pager — matching the same border-top line each
   card in the ledger-grid list already carries, sitting flush against the
   text above it (margin-top:0) instead of floating below it. The
   adjacent-sibling selector only matches here — no other page puts a
   .pager directly after a .ledger-grid (Home's ledger-grid rows aren't
   paginated, and Demands/Opinion/Issue paginate .stack/plain grids). */
.ledger-grid + .pager{margin-top:0;border-top:1px solid var(--line);padding-top:1.25rem}
/* Same divider-before-the-pager treatment on the Demands and Opinion
   landing pages' own card grids (pageDemands()/pageOpinion(), each grid
   tagged with its own dmd-card-grid/opn-card-grid class so this only ever
   matches those two grids, never Experiences' .ledger-grid above or any
   other grid+.pager pairing elsewhere). */
.dmd-card-grid + .pager, .opn-card-grid + .pager{margin-top:0;border-top:1px solid var(--line);padding-top:1.25rem}

/* loading skeleton (new: async page fetches show this briefly) */
.route-loading{padding:5rem 0;text-align:center;color:var(--ink-3);font-size:.92rem}