/* -------------------------------------------------------------------------
   Fonts, served from this site.

   They used to come from Google, which meant every reader's address was
   disclosed to a third party on every page — while the cookie policy told
   them no third party saw their visit. Both cannot be true. These are the
   same typefaces, subset to Latin and pinned to the weights actually used,
   which comes to about 81 KB and loads faster than the round trip did.

   Indic scripts are deliberately not included: these families do not carry
   them, so Hindi, Kannada and Tamil fall back to the reader's system font,
   which renders them correctly and costs nothing.
   ------------------------------------------------------------------------- */
@font-face{
  font-family:'Archivo'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/archivo-600.woff2') format('woff2');
}
@font-face{
  font-family:'Archivo'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/archivo-700.woff2') format('woff2');
}
@font-face{
  font-family:'Source Sans 3'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/sourcesans-400.woff2') format('woff2');
}
@font-face{
  font-family:'Source Sans 3'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/sourcesans-600.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/plexmono-400.woff2') format('woff2');
}

/* Voice of India — palette taken from the logo: navy #002868, saffron #F87008, green #008030 */

:root{
  --navy:#002868;          /* logo blue */
  --navy-700:#00214f;
  --blue-900:#002868;
  --blue-800:#00347f;      /* primary — overridable from Company settings */
  --blue-600:#0a4aa6;
  --blue-500:#1565c9;
  --blue-100:#cfe0f5;
  --blue-50:#eef4fc;

  --saffron:#f87008;       /* logo orange — reserved for the main call to action */
  --saffron-dark:#d15c00;
  --saffron-50:#fff4ea;
  --india-green:#008030;   /* logo green */
  --green-50:#eefaf1;

  --page:#f1f5f9;
  --surface:#ffffff;
  --ink:#0f172a;
  --ink-soft:#64748b;
  --line:#e2e8f0;
  --line-blue:#cfe0f8;

  --danger:#c62828;
  --amber:#b45309;
  --green:#008030;

  --radius:10px;
  --radius-sm:7px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow:0 1px 3px rgba(15,23,42,.08), 0 8px 24px -8px rgba(30,64,175,.18);
  --shadow-lg:0 2px 6px rgba(15,23,42,.10), 0 18px 40px -14px rgba(30,64,175,.30);

  --gloss:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0) 55%);
  --display:"Archivo","Segoe UI",Roboto,sans-serif;
  --body:"Source Sans 3","Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}   /* older WebKit ignores the attribute on its own */
html{
  -webkit-text-size-adjust:100%;
  /* Always reserve the scrollbar. Without this, a short page has no scrollbar
     and a long one does, so the centred column jumps sideways by ~15px every
     time you move between pages. */
  overflow-y:scroll;
  scrollbar-gutter:stable;
}
body{
  margin:0;color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;
  background:
    radial-gradient(900px 380px at 50% -170px, rgba(0,40,104,.13), transparent 70%),
    var(--page);
}
img{max-width:100%;display:block}
a{color:var(--blue-800)}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.02em;margin:0 0 .5rem;color:var(--navy)}
h1{font-size:1.65rem}
h2{font-size:1.25rem}
h3{font-size:1.05rem}
:focus-visible{outline:3px solid var(--blue-500);outline-offset:2px}
.wrap{max-width:960px;margin:0 auto;padding:0 16px}

.icon{flex:none;vertical-align:-.18em}
.is-muted{color:var(--ink-soft)}

/* ---------- header: light bar carrying the logo, tricolour rule below ---------- */
.site-head{
  position:relative;color:var(--navy);
  background:linear-gradient(180deg,#ffffff 0%,#ffffff 58%,#f4f7fb 100%);
  box-shadow:0 2px 14px -4px rgba(0,40,104,.18);
}
.site-head::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--saffron) 0 33.3%,#ffffff 33.3% 66.6%,var(--india-green) 66.6% 100%);
}
.site-head .wrap{position:relative;display:flex;align-items:center;gap:14px;min-height:78px;flex-wrap:nowrap}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--navy);flex:0 0 auto}
.brand__text{font-family:var(--display);font-weight:700;font-size:1.2rem;letter-spacing:-.02em}
.brand__text em{font-style:normal;color:var(--saffron)}
.brand__text b{font-weight:700;color:var(--india-green)}
.brand img{
  /* --logo-h comes from the height set in Company settings. The logo scales
     down on smaller screens rather than being pinned to a fixed size, which
     is what made the slider look as though it did nothing. */
  height:var(--logo-h, 52px);
  width:auto; max-width:min(58vw, 560px); object-fit:contain;
  border-radius:2px;
}
.brand__badge{
  font-family:var(--display);font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--navy);background:var(--blue-50);border:1px solid var(--blue-100);
  padding:3px 8px;border-radius:99px;align-self:center;
}

.site-nav{
  margin-left:auto;display:flex;gap:4px;flex-wrap:nowrap;min-width:0;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.site-nav::-webkit-scrollbar{display:none}
.site-nav a{
  display:inline-flex;align-items:center;gap:6px;
  color:#41536e;text-decoration:none;font-size:.88rem;font-weight:600;font-family:var(--display);
  padding:9px 12px;border-radius:var(--radius-sm);border:1px solid transparent;
  white-space:nowrap;flex:0 0 auto;
}
/* Tamil and Kannada labels run a good deal longer than English, so give the
   bar a little more room to work with before anything has to scroll. */
@media (min-width:861px) and (max-width:1180px){
  .site-nav a{padding:8px 9px;font-size:.82rem;gap:5px}
  .admin-account > summary{padding:7px 10px;font-size:.8rem}
  .site-head .wrap{gap:10px}
  .brand img{ height:clamp(30px, calc(var(--logo-h, 52px) * .82), var(--logo-h, 52px)); }
}
.site-nav a:hover{background:var(--blue-50);color:var(--navy);border-color:var(--blue-100)}
.site-nav a.is-active{
  color:#fff;border-color:var(--navy);
  background:linear-gradient(180deg,var(--blue-600),var(--navy));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
}
.site-nav a.is-cta{
  color:#fff;border-color:var(--saffron-dark);
  background:linear-gradient(180deg,#fb8c26,var(--saffron) 55%,var(--saffron-dark));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}
.site-nav a.is-cta:hover{filter:brightness(1.06);color:#fff}
@media (max-width:700px){
  .site-head .wrap{min-height:0;padding-top:12px;padding-bottom:12px}
  .site-nav{margin-left:0;width:100%}
  .site-nav a{padding:8px 10px;font-size:.83rem}
}
main{padding:24px 0 64px}

/* ---------- location stamp ---------- */
.stamp{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--blue-800);background:var(--blue-50);border:1px solid var(--line-blue);
  padding:3px 9px;border-radius:99px;max-width:100%;word-break:break-word;
}
.ref{font-family:var(--mono);font-size:.7rem;color:var(--ink-soft);letter-spacing:.05em}

/* ---------- cards ---------- */
.card{
  position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px;margin-bottom:14px;box-shadow:var(--shadow);
  overflow:hidden;
}
.card::before{
  content:"";position:absolute;inset:0 0 auto;height:64px;background:var(--gloss);
  opacity:.7;pointer-events:none;
}
.card>*{position:relative}
.card__top{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;margin-bottom:8px}
.card h3{margin:0 0 6px}
.card h3 a{color:var(--navy);text-decoration:none}
.card h3 a:hover{color:var(--blue-800)}
.card__excerpt{color:var(--ink-soft);margin:10px 0 14px}
.card__foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.85rem;color:var(--ink-soft)}
.card__foot > span{display:inline-flex;align-items:center;gap:5px}
.card__thumb{border:1px solid var(--line);border-radius:var(--radius-sm);margin:12px 0;max-height:280px;object-fit:cover;width:100%}

/* ---------- tags ---------- */
.tag{
  display:inline-flex;align-items:center;gap:5px;
  font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:4px 10px;border-radius:99px;white-space:nowrap;
  border:1px solid currentColor;background:rgba(255,255,255,.6);
}
.tag--problem{color:#b3261e;background:#fdf0ee}
.tag--idea{color:var(--saffron-dark);background:var(--saffron-50)}
.tag--open{color:var(--amber);background:#fffbeb}
.tag--in_progress{color:var(--blue-800);background:var(--blue-50)}
.tag--resolved{color:var(--india-green);background:var(--green-50)}
.tag--cat{color:var(--ink-soft);background:#f8fafc;text-transform:none;letter-spacing:0;font-weight:600}
.tag--pending{color:var(--amber);background:#fffbeb}
.tag--approved{color:var(--india-green);background:var(--green-50)}
.tag--rejected{color:var(--danger);background:#fef2f2}

/* ---------- buttons: glossy primary ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:7px;justify-content:center;
  font-family:var(--display);font-size:.92rem;font-weight:600;line-height:1.2;
  padding:11px 17px;border-radius:var(--radius-sm);cursor:pointer;text-decoration:none;
  color:#fff;border:1px solid var(--blue-800);
  background:linear-gradient(180deg,var(--blue-500) 0%,var(--blue-600) 48%,var(--blue-800) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38), var(--shadow-sm);
}
.btn:hover{filter:brightness(1.07);color:#fff}
.btn:active{box-shadow:inset 0 2px 5px rgba(15,23,42,.32);transform:translateY(1px)}
.btn[disabled]{opacity:.55;cursor:not-allowed;filter:grayscale(.3)}
.btn--quiet{
  color:var(--navy);border-color:var(--line);
  background:linear-gradient(180deg,#fff,#f1f5f9);
  box-shadow:inset 0 1px 0 #fff, var(--shadow-sm);
}
.btn--quiet:hover{color:var(--blue-800);border-color:var(--line-blue);background:linear-gradient(180deg,#fff,#eaf1fd)}
.btn--ghost{background:none;border-color:transparent;color:var(--blue-800);box-shadow:none}
.btn--ghost:hover{background:var(--blue-50);color:var(--blue-800);filter:none}
.btn--danger{
  border-color:#b91c1c;
  background:linear-gradient(180deg,#f87171,#dc2626 55%,#b91c1c);
}
.btn--cta{
  border-color:var(--saffron-dark);
  background:linear-gradient(180deg,#fb8c26,var(--saffron) 55%,var(--saffron-dark));
}
.btn--sm{padding:7px 12px;font-size:.82rem;border-radius:6px}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---------- vote ---------- */
.vote{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--display);font-weight:700;
  font-size:.85rem;color:var(--navy);cursor:pointer;padding:6px 13px;border-radius:99px;
  border:1px solid var(--line);background:linear-gradient(180deg,#fff,#f1f5f9);
  box-shadow:inset 0 1px 0 #fff;
}
.vote:hover{border-color:var(--blue-500);color:var(--blue-800)}
.vote[disabled]{
  cursor:default;color:#fff;border-color:var(--blue-800);
  background:linear-gradient(180deg,var(--blue-500),var(--blue-800));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}

/* ---------- forms ---------- */
.field{margin-bottom:17px}
.field label{display:block;font-family:var(--display);font-weight:600;font-size:.88rem;margin-bottom:6px;color:var(--navy)}
.field .hint,.hint{font-size:.82rem;color:var(--ink-soft);margin:5px 0 0}
input[type=text],input[type=password],input[type=email],input[type=url],input[type=search],select,textarea{
  width:100%;padding:11px 13px;font-family:var(--body);font-size:1rem;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
  box-shadow:inset 0 1px 2px rgba(15,23,42,.05);
}
input:focus,select:focus,textarea:focus{border-color:var(--blue-500);outline-offset:1px}
textarea{min-height:150px;resize:vertical}
input[type=file]{font-size:.9rem;padding:9px;background:#f8fafc;border:1px dashed var(--line-blue);border-radius:var(--radius-sm);width:100%}
input[type=range]{width:100%;accent-color:var(--blue-600)}
input[type=color]{width:56px;height:40px;padding:3px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:620px){.grid-2{grid-template-columns:1fr}}

/* ---------- filters + tabs ---------- */
.filters{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;margin-bottom:20px;box-shadow:var(--shadow-sm);
}
.filters .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (max-width:760px){.filters .grid-4{grid-template-columns:1fr 1fr}}
.filters select{font-size:.9rem;padding:9px 10px}
.filters .btn-row{margin-top:13px}

.tabs{display:flex;gap:7px;margin-bottom:16px;flex-wrap:wrap}
.tabs a{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 15px;border-radius:99px;text-decoration:none;font-size:.88rem;font-weight:600;
  font-family:var(--display);color:var(--ink-soft);border:1px solid var(--line);
  background:linear-gradient(180deg,#fff,#f1f5f9);box-shadow:inset 0 1px 0 #fff;
}
.tabs a:hover{color:var(--blue-800);border-color:var(--line-blue)}
.tabs a.is-active{
  color:#fff;border-color:var(--blue-800);
  background:linear-gradient(180deg,var(--blue-600),var(--blue-800));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),var(--shadow-sm);
}

/* ---------- flash + empty ---------- */
.flash{
  display:flex;gap:9px;align-items:flex-start;
  padding:13px 15px;border-radius:var(--radius-sm);margin-bottom:16px;font-size:.93rem;border:1px solid;
}
.flash--ok{background:var(--green-50);border-color:#b6e3c4;color:#00602a}
.flash--error{background:#fef2f2;border-color:#fecaca;color:#7f1d1d}
.flash--info{background:var(--blue-50);border-color:var(--line-blue);color:#1e3a8a}
.errors{background:#fef2f2;border:1px solid #fecaca;color:#7f1d1d;padding:13px 15px 13px 32px;border-radius:var(--radius-sm);margin-bottom:16px}
.errors li{margin:3px 0}
.empty{
  background:var(--surface);border:1px dashed var(--line-blue);border-radius:var(--radius);
  padding:36px 20px;text-align:center;color:var(--ink-soft);
}
.empty h3{color:var(--navy)}
.empty .icon{color:var(--blue-500);margin:0 auto 8px}

/* ---------- post detail ---------- */
.post-head{
  position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px;margin-bottom:22px;box-shadow:var(--shadow);
}
.post-head::before{content:"";position:absolute;inset:0 0 auto;height:80px;background:var(--gloss);opacity:.75}
.post-head>*{position:relative}
.post-head h1{margin-bottom:10px}
.meta-row{display:flex;gap:9px;align-items:center;flex-wrap:wrap;font-size:.85rem;color:var(--ink-soft);margin-bottom:11px}
.body-text{white-space:pre-wrap;margin:15px 0}
.section-title{display:flex;align-items:center;gap:10px;margin:28px 0 13px}
.section-title h2{margin:0;display:inline-flex;align-items:center;gap:8px}
.section-title .count{font-family:var(--mono);font-size:.75rem;color:var(--ink-soft)}

/* ---------- pagination ---------- */
.pager{display:flex;gap:7px;justify-content:center;margin-top:22px}
.pager a,.pager span{
  padding:8px 13px;border-radius:var(--radius-sm);border:1px solid var(--line);
  background:#fff;text-decoration:none;font-size:.9rem;font-weight:600;font-family:var(--display);
}
.pager span{color:#fff;border-color:var(--blue-800);background:linear-gradient(180deg,var(--blue-600),var(--blue-800))}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--line);vertical-align:top}
th{
  font-family:var(--display);font-size:.75rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--blue-900);background:linear-gradient(180deg,#f8fbff,#eef4fd);
}
tr:last-child td{border-bottom:none}

/* ---------- admin ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px}
@media (max-width:760px){.stat-grid{grid-template-columns:1fr 1fr}}
.stat{
  position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:15px;box-shadow:var(--shadow-sm);
}
.stat::before{content:"";position:absolute;inset:0 0 auto;height:44px;background:var(--gloss)}
.stat>*{position:relative}
.stat .icon{color:var(--blue-600);margin-bottom:6px}
.stat--alert .icon{color:var(--saffron)}
.stat .n{font-family:var(--display);font-size:1.75rem;font-weight:700;line-height:1;color:var(--navy)}
.stat .k{font-size:.76rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em;margin-top:5px;font-weight:600}
.stat--alert{border-color:var(--line-blue);background:linear-gradient(180deg,#f5f9ff,#fff)}

.login-box{max-width:400px;margin:48px auto;text-align:center}
.login-box form,.login-box .field{text-align:left}
.login-box .logo-full{max-width:230px;margin:0 auto 18px}
.login-box .card{padding:24px}

/* settings preview strip */
.preview-bar{
  display:flex;align-items:center;gap:12px;padding:16px;border-radius:var(--radius-sm);
  background:linear-gradient(180deg,#fff,#f4f7fb);color:var(--navy);
  border:1px solid var(--line);border-bottom:3px solid transparent;
  border-image:linear-gradient(90deg,var(--saffron) 0 33.3%,#fff 33.3% 66.6%,var(--india-green) 66.6%) 0 0 1 0;
  box-shadow:inset 0 1px 0 #fff;
}
.preview-bar img{max-height:80px}
.preview-bar .brand__text{font-family:var(--display);font-weight:700;font-size:1.18rem}
.asset-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.asset-box{
  display:grid;place-items:center;min-width:96px;min-height:72px;padding:10px;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:#f8fafc;
}
.asset-box img{max-height:56px;max-width:150px}

/* ---------- footer ---------- */
.site-foot{
  position:relative;border-top:1px solid var(--line);background:linear-gradient(180deg,#fff,#eef2f7);
  padding:22px 0;color:var(--ink-soft);font-size:.86rem;
}
.site-foot::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--saffron) 0 33.3%,#ffffff 33.3% 66.6%,var(--india-green) 66.6% 100%);
}
.site-foot .wrap{display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.powered{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--display);font-weight:600;
  color:var(--blue-900);text-decoration:none;padding:6px 12px;border-radius:99px;
  border:1px solid var(--line-blue);background:linear-gradient(180deg,#fff,var(--blue-50));
  box-shadow:inset 0 1px 0 #fff;
}
a.powered:hover{border-color:var(--blue-500);color:var(--blue-800)}

/* ---------- language switcher ---------- */
.lang-switch{display:flex;gap:4px;flex-wrap:wrap;margin-left:8px}
.lang-switch a{
  font-family:var(--display);font-size:.8rem;font-weight:600;text-decoration:none;
  color:#41536e;padding:5px 10px;border-radius:99px;border:1px solid var(--line);
  background:linear-gradient(180deg,#fff,#f1f5f9);
}
.lang-switch a:hover{color:var(--navy);border-color:var(--blue-100);background:var(--blue-50)}
.lang-switch a.is-active{
  color:#fff;border-color:var(--navy);
  background:linear-gradient(180deg,var(--blue-600),var(--navy));
}
@media (max-width:700px){.lang-switch{margin-left:0;width:100%}}

/* ---------- photo location capture ---------- */
.geo-box{
  border:1px solid var(--line-blue);background:var(--blue-50);
  border-radius:var(--radius-sm);padding:14px;
}
.geo-box > label:first-child{display:flex;align-items:center;gap:6px}
.geo-toggle{display:flex!important;align-items:flex-start;gap:9px;font-weight:500!important;margin:2px 0 0;cursor:pointer}
.geo-toggle input{width:18px;height:18px;margin-top:2px;accent-color:var(--blue-600);flex:none}
.geo-status{font-size:.85rem;margin:8px 0 0;min-height:1.2em;font-family:var(--mono)}
.geo-status.is-working{color:var(--ink-soft)}
.geo-status.is-ok{color:var(--india-green)}
.geo-status.is-warn{color:var(--saffron-dark)}
.geo-line{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  font-size:.83rem;color:var(--ink-soft);margin:-4px 0 10px;
}
.geo-chip{
  display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.06em;text-decoration:none;color:var(--india-green);background:var(--green-50);
  border:1px solid #b6e3c4;border-radius:99px;padding:2px 8px;
}
.geo-chip:hover{border-color:var(--india-green)}

/* ---------- a photo that survived a failed submit ---------- */
.photo-kept{
  display:flex;gap:14px;align-items:flex-start;margin-bottom:10px;padding:12px;
  border:1px solid #b6e3c4;background:var(--green-50);border-radius:var(--radius-sm);
}
.photo-kept img{
  width:96px;height:96px;object-fit:cover;flex:none;
  border-radius:var(--radius-sm);border:1px solid #b6e3c4;
}
.photo-kept strong{display:flex;align-items:center;gap:6px;color:var(--india-green);font-family:var(--display)}
.photo-kept .hint{margin-top:4px}
@media (max-width:520px){.photo-kept img{width:72px;height:72px}}

/* ---------- inline field validation ---------- */
.field-msg{
  font-size:.83rem;color:var(--danger);margin:5px 0 0;min-height:0;
  display:none;
}
.field-msg.is-error,.field-msg:not(:empty){display:block}
input.has-error,textarea.has-error,select.has-error{
  border-color:var(--danger);box-shadow:inset 0 1px 2px rgba(198,40,40,.12)
}
.counter{font-family:var(--mono);font-size:.75rem;margin-top:5px}
.counter.is-short{color:var(--saffron-dark)}
#formErrors:focus{outline:3px solid var(--blue-500);outline-offset:3px}

/* ---------- photo buttons ---------- */
.photo-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.file-input{display:none}
.btn.is-busy{opacity:.7;pointer-events:none}
.btn.is-busy::after{
  content:"";width:14px;height:14px;border-radius:50%;
  border:2px solid rgba(255,255,255,.45);border-top-color:#fff;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- confirmation ---------- */
.done-panel{border-color:#b6e3c4;background:linear-gradient(180deg,#fff,var(--green-50))}
.done-panel h2{color:var(--india-green);display:flex;align-items:center;gap:8px}
.ref-big{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:1.05rem;margin:14px 0;
}
.ref-big strong{
  font-family:var(--mono);font-size:1.3rem;letter-spacing:.06em;color:var(--navy);
  background:#fff;border:1px solid var(--line-blue);border-radius:var(--radius-sm);padding:6px 14px;
}

#feed.is-loading{opacity:.55;transition:opacity .15s}

/* ---------- roles ---------- */
.role-pill{
  display:inline-flex;align-items:center;gap:5px;font-family:var(--display);font-size:.7rem;
  font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:3px 9px;border-radius:99px;
  border:1px solid currentColor;
}
.role-owner{color:var(--navy);background:var(--blue-50)}
.role-moderator{color:var(--saffron-dark);background:var(--saffron-50)}
.role-editor{color:var(--india-green);background:var(--green-50)}
.role-viewer{color:var(--ink-soft);background:#f1f5f9}
.perm-list{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 0}
.perm-list span{font-size:.72rem;color:var(--ink-soft);background:#f1f5f9;border-radius:4px;padding:2px 7px;font-family:var(--mono)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* =========================================================================
   MOBILE APP LAYER
   Built to the interface rules in the design skill: 44px minimum touch
   targets, 8px minimum spacing between them, 3–5 bottom tabs, visible
   feedback for anything slower than 300ms.
   ========================================================================= */

:root{
  --tabbar-h:60px;
  --safe-b:env(safe-area-inset-bottom, 0px);
  --safe-t:env(safe-area-inset-top, 0px);
  --safe-l:env(safe-area-inset-left, 0px);
  --safe-r:env(safe-area-inset-right, 0px);
  --tap:44px;
}

html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{
  -webkit-tap-highlight-color:rgba(0,40,104,.12);
  overscroll-behavior-y:contain;
}
/* let the browser handle taps immediately instead of waiting for a double-tap */
a,button,input,select,textarea,.tabbar__item,.vote{ touch-action:manipulation; }

/* iOS zooms the page when a field smaller than 16px gets focus */
@media (max-width:900px){
  input[type=text],input[type=password],input[type=email],input[type=url],
  input[type=search],input[type=number],select,textarea{
    font-size:16px;
  }
}

/* ---------- bottom tab bar ---------- */
.tabbar{ display:none; }

@media (max-width:860px){
  .tabbar{
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    display:flex; align-items:stretch;
    padding:0 max(6px, var(--safe-l)) var(--safe-b) max(6px, var(--safe-r));
    background:rgba(255,255,255,.97);
    border-top:1px solid var(--line);
    box-shadow:0 -4px 20px -8px rgba(15,23,42,.28);
  }
  @supports (backdrop-filter: blur(12px)){
    .tabbar{ background:rgba(255,255,255,.86); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
  }
  .tabbar::before{
    content:""; position:absolute; left:0; right:0; top:0; height:2px;
    background:linear-gradient(90deg,var(--saffron) 0 33.3%,#fff 33.3% 66.6%,var(--india-green) 66.6%);
  }
  .tabbar__item{
    flex:1 1 0; min-width:0; min-height:var(--tap);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; padding:8px 4px calc(8px + var(--safe-b) * 0);
    text-decoration:none; color:var(--ink-soft);
    font-family:var(--display); font-size:.68rem; font-weight:600; line-height:1.1;
    border-radius:10px; margin:5px 4px;
  }
  .tabbar__label{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .tabbar__item:active{ background:var(--blue-50); transform:scale(.96); }
  .tabbar__item.is-active{ color:var(--navy); background:var(--blue-50); }
  .tabbar__item.is-active .tabbar__icon{ color:var(--blue-800); }
  .tabbar__item.is-primary.is-active{
    color:#fff; background:linear-gradient(180deg,#fb8c26,var(--saffron) 55%,var(--saffron-dark));
  }
  .tabbar__item.is-primary.is-active .tabbar__icon{ color:#fff; }

  body.has-tabbar{ padding-bottom:calc(var(--tabbar-h) + var(--safe-b) + 14px); }
  body.keyboard-open .tabbar{ display:none; }
  body.keyboard-open.has-tabbar{ padding-bottom:0; }
  main{ padding-bottom:28px; }
  .site-foot{ padding-bottom:calc(22px + var(--tabbar-h) * .35); }
}

/* ---------- compact top bar ---------- */
@media (max-width:860px){
  .site-head{
    position:sticky; top:0; z-index:55;
    padding-top:var(--safe-t);
  }
  .site-head .wrap{
    min-height:56px; padding-left:max(14px,var(--safe-l)); padding-right:max(14px,var(--safe-r));
    gap:8px; flex-wrap:nowrap;
  }
  .brand img{ height:clamp(28px, calc(var(--logo-h, 52px) * .74), var(--logo-h, 52px)); max-width:62vw; }
    /* One navigation on a phone, not two. The tab bar carries the four things
       people do most and a More button holding everything else, so nothing is
       hidden off the side of a scrolling strip. */
    .site-nav{ display:none; }
  main{ padding-top:16px; }
  .wrap{ padding-left:max(14px,var(--safe-l)); padding-right:max(14px,var(--safe-r)); }
}

/* language as a compact menu on small screens */
.lang-menu{ position:relative; margin-left:auto; }
.lang-menu summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  min-height:38px; padding:7px 12px; border-radius:99px;
  border:1px solid var(--line); background:linear-gradient(180deg,#fff,#f1f5f9);
  font-family:var(--display); font-weight:600; font-size:.82rem; color:var(--navy);
}
.lang-menu summary::-webkit-details-marker{ display:none; }
.lang-menu[open] summary{ border-color:var(--blue-500); }
.lang-menu .lang-switch{
  position:absolute; right:0; top:calc(100% + 8px); z-index:70;
  flex-direction:column; gap:6px; margin:0; padding:10px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); min-width:150px;
}
.lang-menu .lang-switch a{ min-height:var(--tap); display:flex; align-items:center; }
@media (min-width:861px){
  .lang-menu{ margin-left:8px; }
}

/* ---------- touch sizing everywhere ---------- */
@media (max-width:860px){
  .btn{ min-height:var(--tap); padding:12px 18px; }
  .btn--sm{ min-height:38px; }
  .btn-row{ gap:10px; }                     /* the guidance asks for 8dp minimum */
  .tabs{ gap:8px; overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch;
         padding-bottom:4px; scrollbar-width:none; }
  .tabs::-webkit-scrollbar{ display:none; }
  .tabs a{ min-height:var(--tap); flex:0 0 auto; }
  .vote{ min-height:var(--tap); padding:10px 16px; }
  select,input,textarea{ min-height:var(--tap); }
  .field label{ font-size:.95rem; }
  .card{ padding:16px; border-radius:12px; }
  .filters .grid-4{ grid-template-columns:1fr; gap:10px; }
  h1{ font-size:1.35rem; }
  .photo-actions .btn{ flex:1 1 46%; }
  .geo-toggle input{ width:22px; height:22px; }
  table{ font-size:.86rem; }
}

@media (max-width:360px){
  .wrap{ padding-left:12px; padding-right:12px; }
  .tabbar__label{ font-size:.62rem; }
  .brand img{ height:clamp(24px, calc(var(--logo-h, 52px) * .58), var(--logo-h, 52px)); max-width:58vw; }
  h1{ font-size:1.2rem; }
}

/* one-handed reach: the main action sits above the tab bar on the form */
@media (max-width:860px){
  #reportForm .btn-row{
    position:sticky; bottom:calc(var(--tabbar-h) + var(--safe-b) + 8px); z-index:40;
    background:linear-gradient(180deg,rgba(255,255,255,0),#fff 28%);
    padding:12px 0 4px; margin:0 -4px;
  }
  #reportForm .btn-row .btn{ flex:1 1 auto; }
  body.keyboard-open #reportForm .btn-row{ position:static; background:none; }
}

/* ---------- filters as a drawer on phones ---------- */
.filter-drawer{ margin-bottom:20px; }
.filter-drawer > summary{
  display:none; list-style:none; cursor:pointer;
  padding:12px 16px; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm);
  font-family:var(--display); font-weight:600; color:var(--navy);
}
.filter-drawer__row{
  display:flex; align-items:center; gap:8px; min-height:20px;
}
.filter-drawer__label{ flex:1 1 auto; }
.filter-drawer > summary::-webkit-details-marker{ display:none; }
.filter-drawer .chev{ flex:none; transition:transform .18s ease; }
.filter-drawer[open] > summary{ border-radius:var(--radius) var(--radius) 0 0; border-bottom-color:transparent; }
.filter-drawer[open] .chev{ transform:rotate(180deg); }
.filter-drawer .count-pill{
  font-family:var(--mono); font-size:.7rem; color:#fff; background:var(--saffron);
  border-radius:99px; padding:2px 8px;
}
@media (max-width:860px){
  .filter-drawer > summary{ display:block; }
  .filter-drawer > .filters{ border-radius:0 0 var(--radius) var(--radius); margin-bottom:0; }
}

/* ---------- toast, install prompt, offline ---------- */
.toast-host{
  position:fixed; left:0; right:0; z-index:80;
  bottom:calc(var(--tabbar-h) + var(--safe-b) + 14px);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  pointer-events:none; padding:0 14px;
}
@media (min-width:861px){ .toast-host{ bottom:24px; } }
.toast{
  max-width:420px; width:100%; padding:12px 16px; border-radius:12px;
  font-size:.92rem; color:#fff; background:var(--navy);
  box-shadow:var(--shadow-lg); opacity:0; transform:translateY(10px);
  transition:opacity .2s ease, transform .2s ease;
}
.toast.is-in{ opacity:1; transform:translateY(0); }
.toast--ok{ background:var(--india-green); }
.toast--error{ background:var(--danger); }

.install-bar{
  position:fixed; left:0; right:0; z-index:75;
  bottom:calc(var(--tabbar-h) + var(--safe-b));
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px max(14px,var(--safe-l));
  background:var(--navy); color:#fff; font-size:.9rem;
  box-shadow:0 -6px 18px -10px rgba(15,23,42,.6);
}
.install-bar span{ display:flex; align-items:center; gap:8px; }
.install-bar__actions{ flex:none; gap:8px; }
@media (min-width:861px){ .install-bar{ bottom:0; } }

.offline-bar{
  position:fixed; left:0; right:0; top:0; z-index:90;
  padding:calc(8px + var(--safe-t)) 14px 8px;
  background:var(--amber); color:#fff; font-size:.85rem; text-align:center;
  display:flex; align-items:center; justify-content:center; gap:8px;
}

/* ---------- installed-app polish ---------- */
body.is-app .site-head{ box-shadow:none; }
body.is-app .site-foot{ display:none; }

/* ---------- loading skeleton for the board ---------- */
#feed.is-loading{ position:relative; }
#feed.is-loading::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,rgba(255,255,255,0) 20%,rgba(255,255,255,.6) 50%,rgba(255,255,255,0) 80%);
  background-size:200% 100%; animation:shimmer 1.1s linear infinite; pointer-events:none;
}
@keyframes shimmer{ to{ background-position:-200% 0; } }

@media (prefers-reduced-motion:reduce){
  .toast,.tabbar__item{ transition:none !important; }
  #feed.is-loading::after{ animation:none; }
}

/* =========================================================================
   ADMIN: attachments, preview overlay, permission editor
   ========================================================================= */

.attach{
  display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap;
  margin:12px 0; padding:12px;
  border:1px solid var(--line); border-radius:var(--radius-sm); background:#f8fafc;
}
.attach__thumb{
  position:relative; flex:none; width:120px; height:96px; padding:0; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; background:#fff;
}
.attach__thumb img{ width:100%; height:100%; object-fit:cover; }
.attach__thumb:hover{ border-color:var(--blue-500); }
.attach__zoom{
  position:absolute; right:6px; bottom:6px; display:grid; place-items:center;
  width:26px; height:26px; border-radius:50%; color:#fff; background:rgba(15,23,42,.72);
}
.attach__meta{ flex:1 1 240px; min-width:0; }
.attach__name{ display:flex; align-items:center; gap:6px; margin-bottom:6px; color:var(--navy); }
.attach__facts{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  font-size:.8rem; color:var(--ink-soft);
}
.attach__facts > span{
  display:inline-flex; align-items:center; gap:4px;
  background:#fff; border:1px solid var(--line); border-radius:99px; padding:2px 9px;
}
.attach__facts .tag,.attach__facts .geo-chip{ background:#fff; }
@media (max-width:860px){
  .attach__thumb{ width:84px; height:70px; }
  .attach__meta .btn{ flex:1 1 auto; }
}

/* preview overlay */
.lightbox{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(15,23,42,.88);
}
.lightbox__body{ margin:0; max-width:100%; max-height:100%; display:flex; flex-direction:column; gap:10px; }
.lightbox__img{
  max-width:100%; max-height:78vh; object-fit:contain;
  border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-lg);
}
.lightbox__cap{
  color:#cfe0f5; font-family:var(--mono); font-size:.78rem; text-align:center; word-break:break-all;
}
.lightbox__close{
  position:absolute; top:max(12px, env(safe-area-inset-top)); right:14px;
  width:var(--tap); height:var(--tap); border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.12);
  color:#fff; font-size:1.6rem; line-height:1;
}
.lightbox__close:hover{ background:rgba(255,255,255,.24); }
body.no-scroll{ overflow:hidden; }

/* permission editor */
.perm-card{ padding:14px 16px; }
.perm-card > summary,.perm-inline > summary{ list-style:none; cursor:pointer; }
.perm-card > summary::-webkit-details-marker,
.perm-inline > summary::-webkit-details-marker{ display:none; }
.perm-card__row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-height:32px; }
.perm-card__row .chev{ margin-left:auto; transition:transform .18s ease; }
.perm-card[open] .chev,.perm-inline[open] .chev{ transform:rotate(180deg); }
.perm-group{
  font-family:var(--display); font-size:.74rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--blue-900); margin:16px 0 8px; padding-bottom:5px; border-bottom:1px solid var(--line);
}
.perm-tick{
  align-items:flex-start !important; padding:9px 10px; border-radius:var(--radius-sm);
  margin-bottom:6px; border:1px solid transparent;
}
.perm-tick:hover{ background:var(--blue-50); border-color:var(--line-blue); }
.perm-tick strong{ display:block; font-family:var(--body); font-weight:600; font-size:.92rem; }
.perm-inline{
  margin-top:10px; padding:12px; border:1px dashed var(--line-blue);
  border-radius:var(--radius-sm); background:#f8fafc;
}

/* admin action feedback */
.reject-box{ display:inline-block; }
.reject-box > summary{ list-style:none; display:inline-flex; }
.reject-box > summary::-webkit-details-marker{ display:none; }
.reject-form{
  margin-top:10px; padding:12px; display:flex; flex-direction:column; gap:8px;
  border:1px solid var(--line); border-radius:var(--radius-sm); background:#fff;
  box-shadow:var(--shadow-sm); max-width:420px;
}
.reject-form label{ font-family:var(--display); font-weight:600; font-size:.82rem; color:var(--navy); }
.reject-form select,.reject-form input{ font-size:.9rem; }

/* photos are not draggable or long-press saveable; text stays selectable */
img{
  -webkit-user-drag:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}
input,textarea,select{ user-select:auto; -webkit-user-select:auto; -webkit-touch-callout:default; }

/* ---------- admin account menu ----------
   Sign out lives here rather than in the scrolling section list, so it is
   reachable no matter how many sections an account can open. */
.admin-account{ position:relative; flex:0 0 auto; margin-left:8px; }
.admin-account > summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:7px;
  min-height:40px; padding:8px 13px; border-radius:99px;
  border:1px solid var(--line); background:linear-gradient(180deg,#fff,#f1f5f9);
  font-family:var(--display); font-weight:600; font-size:.85rem; color:var(--navy);
  white-space:nowrap;
}
.admin-account > summary::-webkit-details-marker{ display:none; }
.admin-account[open] > summary{ border-color:var(--blue-500); }
.admin-account__name{ max-width:120px; overflow:hidden; text-overflow:ellipsis; }
.admin-account__menu{
  position:absolute; right:0; top:calc(100% + 8px); z-index:70; min-width:190px;
  display:flex; flex-direction:column; padding:8px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
}
.admin-account__role{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft); padding:4px 10px 8px; border-bottom:1px solid var(--line); margin-bottom:6px;
}
.admin-account__menu a{
  display:flex; align-items:center; gap:8px; min-height:var(--tap);
  padding:9px 10px; border-radius:var(--radius-sm);
  text-decoration:none; color:var(--navy); font-size:.9rem;
}
.admin-account__menu a:hover{ background:var(--blue-50); }
.admin-account__menu a.is-signout{ color:var(--danger); }
.admin-account__menu a.is-signout:hover{ background:#fdf0ee; }
@media (max-width:860px){
  .admin-account__name{ display:none; }
  .admin-account{ margin-left:auto; }
}

/* the place the coordinates resolve to, next to the coordinates themselves */
.geo-chip--place{ color:var(--blue-800); background:var(--blue-50); border-color:var(--line-blue); }

/* place packs */
.pack{
  display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  padding:14px; margin-top:10px;
  border:1px solid var(--line-blue); border-radius:var(--radius-sm); background:var(--blue-50);
}
.pack form{ flex:0 0 auto; }

/* a card being approved collapses rather than vanishing, so the page
   underneath does not jump while somebody is reading it */
[data-item].is-going{
  opacity:0;
  overflow:hidden;
  transition:opacity .18s ease, height .24s ease, padding .24s ease, margin .24s ease;
}

/* =========================================================================
   LANDING PAGE
   ========================================================================= */

.hero{
  display:grid; grid-template-columns:1.4fr 1fr; gap:36px; align-items:center;
  padding:18px 0 34px;
}
.hero h1{ font-size:2.3rem; line-height:1.15; margin-bottom:14px; }
.hero__lead{ font-size:1.08rem; color:var(--ink-soft); max-width:56ch; margin:0 0 22px; }
.hero__actions{ margin-bottom:16px; }
.btn--big{ padding:14px 22px; font-size:1rem; }
.hero__note{
  display:flex; align-items:flex-start; gap:8px;
  font-size:.88rem; color:var(--ink-soft); max-width:52ch; margin:0;
}
.hero__note .icon{ color:var(--india-green); flex:none; margin-top:2px; }

.hero__stats{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
.hero__stats > div{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; box-shadow:var(--shadow-sm); text-align:center;
}
.hero__stats strong{
  display:block; font-family:var(--display); font-size:1.9rem; color:var(--navy); line-height:1;
}
.hero__stats span{
  display:block; margin-top:6px; font-size:.76rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--ink-soft); font-weight:600;
}

.band{ padding:26px 0; border-top:1px solid var(--line); }
/* the last thing in a section keeps its own bottom margin, which is then added
   to the section's padding and the next section's — three gaps where one was
   intended */
.band > :last-child,
.band .split > div > :last-child{ margin-bottom:0; }
.band h2{
  font-size:1.5rem; margin-bottom:10px;
  display:flex; align-items:flex-start; gap:10px;
}
.band h2 .icon{ flex:none; margin-top:5px; }
.band__lead{ color:var(--ink-soft); max-width:70ch; margin:0 0 18px; }
.band--tint{
  border-top:none; background:linear-gradient(180deg,var(--blue-50),transparent);
  border-radius:var(--radius); padding:24px 24px 26px; margin:8px 0;
}

/* how it works */
.steps{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.steps li{ position:relative; padding-top:6px; }
.steps__n{
  display:grid; place-items:center; width:34px; height:34px; margin-bottom:10px;
  border-radius:50%; font-family:var(--display); font-weight:700; color:#fff;
  background:linear-gradient(180deg,var(--blue-600),var(--navy));
}
.steps strong{ display:block; font-family:var(--display); color:var(--navy); margin-bottom:5px; }
.steps p{ margin:0; font-size:.92rem; color:var(--ink-soft); }
.next-up{
  margin-top:22px; padding:12px 14px; border-radius:var(--radius-sm);
  background:var(--saffron-50); border:1px solid #f6d5b4; color:var(--saffron-dark);
  display:flex; align-items:flex-start; gap:8px;
}

/* promises and institutional cards */
.promise{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.promise > div{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px; box-shadow:var(--shadow-sm);
}
.promise .icon{ color:var(--blue-600); margin-bottom:8px; }
.promise strong{ display:block; font-family:var(--display); color:var(--navy); margin-bottom:6px; }
.promise p{ margin:0; font-size:.9rem; color:var(--ink-soft); }

.band--dark{
  background:linear-gradient(180deg,#24387e,var(--navy));
  color:#fff; border-radius:var(--radius); padding:26px; border-top:none; margin:8px 0;
}
.band--dark h2{
  color:#fff; display:flex; gap:10px;
  /* centred against a heading that wraps to two lines, the icon ended up
     level with the second line instead of the first */
  align-items:flex-start;
}
.band--dark .band__lead{ color:#cfe0f5; }
.promise--dark > div{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); box-shadow:none; }
.promise--dark strong{ color:#fff; }
.promise--dark p{ color:#cfe0f5; }

/* category chips */
.chips{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:0; }
.chip{
  padding:8px 14px; border-radius:99px; font-size:.88rem; font-weight:600;
  color:var(--navy); background:var(--surface); border:1px solid var(--line-blue);
}

/* recent reports */
.recent{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.recent__item{
  display:block; text-decoration:none; padding:16px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-sm);
}
.recent__item:hover{ border-color:var(--blue-500); }
.recent__item strong{ display:block; color:var(--navy); margin:10px 0 8px; line-height:1.35; }

.band--closing{ text-align:center; padding:40px 0 10px; }
.band--closing h2{ margin-bottom:18px; }
.band--closing .btn-row{ justify-content:center; }

@media (max-width:860px){
  .hero{ grid-template-columns:1fr; gap:14px; padding-top:2px; }
  .band{ padding:20px 0 18px; }
  .band--tint, .band--dark{ padding:20px 16px; margin:6px 0; }
  /* a plain band followed by a tinted one used to add both paddings together
     and leave a hand's width of nothing between the two */
  .band + .band--tint, .band + .band--dark{ margin-top:0; }
  .band--tint + .band, .band--dark + .band{ padding-top:16px; }
  .band h2{ font-size:1.25rem; }
  .band__lead{ margin-bottom:16px; font-size:.95rem; }
  .hero__lead{ margin-bottom:16px; font-size:1rem; }
  .hero__actions{ margin-bottom:12px; }
  .section-title{ margin-bottom:10px; }
  .statband{ padding-bottom:18px; }
  .band--closing{ padding:26px 0 6px; }
  /* On a phone the banner already fills the top of the screen. Showing the
     hero drawing straight underneath it reads as two banners stacked, so it
     is dropped when a banner is present and kept when there is none. */
  .hero--with-banner .hero__art{ display:none; }
  .hero h1{ margin-top:4px; }
  .hero h1{ font-size:1.7rem; }
  .hero__actions .btn{ flex:1 1 100%; }
  .steps{ grid-template-columns:1fr 1fr; gap:16px; }
  .promise{ grid-template-columns:1fr 1fr; }
  .recent{ grid-template-columns:1fr; }
  .band{ padding:26px 0; }
}
@media (max-width:520px){
  /* Two across rather than one. Four stacked cards ate most of a screen on
     their own and pushed everything below them out of sight. */
  .hero__stats{ grid-template-columns:1fr 1fr; gap:10px; }
  .hero__stats > div{ padding:12px 8px; }
  .hero__stats strong{ font-size:1.45rem; }
  .hero__stats span{ font-size:.66rem; letter-spacing:.03em; }

  .steps{ grid-template-columns:1fr 1fr; gap:14px; }
  .steps__n{ width:28px; height:28px; margin-bottom:7px; font-size:.9rem; }
  .steps strong{ font-size:.92rem; }
  .steps p{ font-size:.85rem; }

  .promise{ grid-template-columns:1fr; gap:10px; }
  .promise > div{ padding:13px 14px; }
  .promise p{ font-size:.86rem; }
}

/* landing illustrations and layout helpers */
.hero__art{ display:flex; justify-content:center; }
.hero__art img{ width:100%; max-width:420px; height:auto; }
.statband{ padding:0 0 30px; }
.split{
  display:grid; grid-template-columns:1.25fr .75fr; gap:28px;
  align-items:start;              /* was centre, which stretched short columns */
}
.split__art{ width:100%; max-width:360px; height:auto; justify-self:end; align-self:center; }
@media (max-width:1100px){
  /* a tablet is not wide enough for text beside a picture without one of them
     looking stranded, so they stack from here down */
  .split{ grid-template-columns:1fr; gap:18px; }
  .split__art{ max-width:420px; justify-self:center; }
  .volcard{ justify-self:center; max-width:380px; }
}

@media (max-width:860px){
  .split{ grid-template-columns:1fr; }
  .split__art{ max-width:100%; width:100%; justify-self:stretch; order:-1; }
  .hero__art{ order:-1; }
  .hero__art img{ max-width:300px; }
}

/* keyboard users need a way past the menu */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--navy); color:#fff; padding:12px 18px; border-radius:0 0 var(--radius) 0;
  font-family:var(--display); font-weight:600;
}
.skip-link:focus{ left:0; }

/* landing editor: section switches */
.switchchip{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:8px 14px; border-radius:99px; border:1px solid var(--line);
  background:var(--surface); font-size:.88rem; font-weight:600; color:var(--navy);
}
.switchchip input{ width:18px; height:18px; }
.switchchip:has(input:checked){ border-color:var(--blue-500); background:var(--blue-50); }

.seo-group{
  font-family:var(--display); font-size:.8rem; color:var(--blue-900);
  margin:16px 0 8px; padding-left:10px; border-left:3px solid var(--line-blue);
}

/* =========================================================================
   FULL-WIDTH LAYOUT, BANNER SLIDER, SITE FOOTER
   ========================================================================= */

/* 960px left a laptop looking half empty */
.wrap{ max-width:1180px; }
.wrap--wide{ max-width:1320px; }
@media (min-width:1500px){
  .wrap{ max-width:1280px; }
  .wrap--wide{ max-width:1440px; }
}

/* ---------- banner slider ---------- */
.slider{
  /* Sits inside the page column with room around it, rather than bleeding to
     the window edges. That also means its width is known, so the height can
     follow the picture's own proportions and nothing gets cropped. */
  position:relative; margin:18px 0 30px;
  border-radius:var(--radius); overflow:hidden;
  background:var(--navy); box-shadow:var(--shadow-md);
}
.slider__track{
  position:relative;
  /* 1600 x 620 is the supplied proportion; matching it means a correctly
     sized picture is shown whole instead of being cut top and bottom */
  padding-top:38.75%;                    /* 620 / 1600, for older engines */
  max-height:560px;
}
@supports (aspect-ratio: 1 / 1){
  .slider__track{ padding-top:0; aspect-ratio:1600 / 620; }
}
.slide{
  position:absolute; top:0; right:0; bottom:0; left:0; opacity:0; visibility:hidden;
  transition:opacity .55s ease;
}
.slide.is-current{ opacity:1; visibility:visible; }
.slide__photo{ display:none; }
.slide__img{
  position:absolute; top:0; right:0; bottom:0; left:0;
  background-position:center; background-repeat:no-repeat; background-size:cover;
  /* keep the browser from softening a large picture as it scales it down */
  image-rendering:auto;
  transform:translateZ(0);
}
/* No wash over the picture at all: the words carry their own panel, so the
   image is shown exactly as it was uploaded. */   /* nothing written on it, nothing to lift */
.slide__body{
  position:absolute; top:0; right:0; bottom:0; left:0;
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:12px;
  color:#fff; padding-top:20px; padding-bottom:20px;
}
/* the words sit on their own panel so they stay readable without draining
   the colour out of the photograph behind them */
.slide__panel{
  max-width:min(52ch, 58%);
  padding:20px 24px; border-radius:var(--radius);
  background:rgba(4,18,46,.72);
  display:flex; flex-direction:column; align-items:flex-start; gap:12px;
}
/* No backdrop blur here. It blurs the banner showing through the panel, which
   makes a sharp photograph look like a low quality one — the panel is simply
   opaque enough to read against instead. */
.slide__body h2,
.slide__h{
  font-family:var(--display); font-weight:700;
  color:#fff; font-size:2.1rem;
  font-size:clamp(1.6rem, 3.2vw, 2.7rem); line-height:1.12; margin:0; max-width:20ch;
  text-shadow:0 2px 18px rgba(0,0,0,.35);
}
.slide__body p{
  color:#e2ecfa; margin:0; max-width:46ch;
  font-size:1.05rem;
  font-size:clamp(.95rem, 1.4vw, 1.15rem);
}

.slider__arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:46px; height:46px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.4); background:rgba(4,18,46,.45);
  color:#fff; font-size:1.7rem; line-height:1; display:grid; place-items:center;
}
.slider__arrow:hover{ background:rgba(4,18,46,.75); }
.slider__arrow--prev{ left:16px; }
.slider__arrow--next{ right:16px; }

.slider__dots{
  position:absolute; left:0; right:0; bottom:16px; z-index:3;
  display:flex; justify-content:center; gap:10px;
}
.slider__dots button{
  width:11px; height:11px; padding:0; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.7); background:transparent;
}
.slider__dots button.is-current{ background:#f87008; border-color:#f87008; transform:scale(1.25); }

@media (max-width:860px){
  /* A phone screen is far squarer than a banner, so filling it cropped the
     sides off every picture. The picture is shown whole across the top at its
     own proportions and the words sit underneath.

     Everything here is in normal flow rather than stacked absolutely: with a
     fixed box, room had to be reserved for the tallest possible caption, and
     any slide with a short caption — or none at all — left a band of brand
     colour under the picture with nothing in it. In flow, the box is exactly
     as tall as the picture plus whatever words there are. */
  .slider__track{ padding-top:0; height:auto; max-height:none; }
  @supports (aspect-ratio: 1 / 1){ .slider__track{ aspect-ratio:auto; } }

  .slide{
    position:relative; display:none; opacity:1; visibility:visible; transition:none;
  }
  .slide.is-current{ display:block; }

  /* the background version steps aside for a real image, which every engine
     sizes correctly at its own proportions */
  .slide__img{ display:none; }
  .slide__photo{ display:block; width:100%; height:auto; }

  .slide__body{
    position:relative; inset:auto; display:block;
    padding:14px 0 18px;
  }
  .slide--plain .slide__body{ display:none; }

  .slide__panel{
    max-width:100%; width:100%; background:transparent;
    padding:0 4px; gap:8px; display:flex; flex-direction:column; align-items:flex-start;
  }
  .slide__body h2, .slide__h{ font-size:1.3rem; max-width:100%; text-shadow:none; margin:0; }
  .slide__body p{ font-size:.94rem; margin:0; }

  .slider__arrow{ display:none; }
  .slider__dots{ position:relative; bottom:auto; padding:2px 0 12px; }
  .slider{ margin:12px 0 22px; }
}
@media (max-width:400px){
  /* the fixed height that used to be here is gone with the rest of it: the
     box now takes its height from the picture and the caption */
  .slide__body h2, .slide__h{ font-size:1.2rem; }
}
@media (prefers-reduced-motion:reduce){
  .slide{ transition:none; }
}

/* ---------- a footer that looks like a site, not a strip ---------- */
.foot-cols{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:32px;
  padding:34px 0 26px;
}
.foot-cols h3,
.foot-cols h4{
  font-family:var(--display); font-size:.78rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--navy); margin:0 0 12px;
}
.foot-cols a{ display:block; padding:5px 0; color:var(--ink-soft); text-decoration:none; font-size:.92rem; }
.foot-cols a:hover{ color:var(--blue-800); }
.foot-about p{ color:var(--ink-soft); font-size:.92rem; margin:0 0 12px; max-width:42ch; }
.foot-bar{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:16px 0; border-top:1px solid var(--line); font-size:.85rem; color:var(--ink-soft);
}
@media (max-width:860px){
  .foot-cols{ grid-template-columns:1fr 1fr; gap:22px; padding:26px 0 18px; }
  .foot-about{ grid-column:1 / -1; }
}
@media (max-width:520px){
  .foot-cols{ grid-template-columns:1fr; }
}

/* banner slide management */
.slide-preview{
  height:150px; border-radius:var(--radius-sm); border:1px solid var(--line);
  background-position:center; background-size:cover; background-repeat:no-repeat; margin-bottom:12px;
}
.slide-chip{
  display:inline-block; width:52px; height:30px; flex:none; border-radius:5px;
  border:1px solid var(--line); background-position:center; background-size:cover;
}

/* ---------- vote button and sharing ---------- */
.vote__label{ font-weight:600; }
.vote .count{
  display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 6px;
  border-radius:99px; background:var(--blue-50); color:var(--blue-800);
  font-family:var(--mono); font-size:.78rem; line-height:1;
}
.vote:disabled .count{ background:rgba(255,255,255,.25); color:#fff; }

.share{ display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; }
.share__label{
  display:inline-flex; align-items:center; gap:5px; margin-right:2px;
  font-size:.78rem; font-weight:600; color:var(--ink-soft);
}
.share__btn{
  display:grid; place-items:center; width:32px; height:32px; padding:0; cursor:pointer;
  border-radius:50%; border:1px solid var(--line); background:var(--surface);
  color:var(--ink-soft); text-decoration:none;
}
.share__btn:hover{ color:#fff; }
.share__btn--wa:hover{ background:#25d366; border-color:#25d366; }
.share__btn--fb:hover{ background:#1877f2; border-color:#1877f2; }
.share__btn--x:hover{ background:#0f172a; border-color:#0f172a; }
.share__btn--tg:hover{ background:#28a8e9; border-color:#28a8e9; }
.share__btn--copy:hover,.share__btn--native:hover{ background:var(--navy); border-color:var(--navy); }
.share__btn.is-done{ background:var(--india-green); border-color:var(--india-green); color:#fff; }

@media (max-width:860px){
  /* a 32px circle is below the 44px the guidance asks for, so give them room */
  .share__btn{ width:40px; height:40px; }
  .share__label{ width:100%; margin-bottom:2px; }
  .share{ gap:8px; }
}

/* ---------- summary cards on the board ---------- */
.kpis{
  display:grid; grid-template-columns:repeat(6, 1fr); gap:12px; margin:0 0 8px;
}
.kpi{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 12px; text-align:center; box-shadow:var(--shadow-sm);
  border-top:3px solid var(--line-blue);
}
.kpi strong{
  display:block; font-family:var(--display); font-size:1.6rem; line-height:1; color:var(--navy);
}
.kpi span{
  display:block; margin-top:6px; font-size:.72rem; font-weight:600; line-height:1.25;
  text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft);
}
.kpi--open{ border-top-color:var(--saffron); }
.kpi--progress{ border-top-color:var(--blue-500); }
.kpi--resolved{ border-top-color:var(--india-green); }
.kpi--resolved strong{ color:var(--india-green); }

.kpis__scope{
  display:flex; align-items:center; gap:6px;
  margin:0 0 18px; font-size:.82rem; color:var(--ink-soft);
}

@media (max-width:900px){ .kpis{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:520px){
  /* three across rather than two: six figures then fit in two short rows and
     the first report is still near the top of the screen */
  .kpis{ grid-template-columns:repeat(3, 1fr); gap:8px; }
  .kpi{ padding:10px 4px; border-top-width:2px; }
  .kpi strong{ font-size:1.15rem; }
  .kpi span{ font-size:.58rem; letter-spacing:.02em; }
}

/* ---------- volunteers ---------- */
.vol-head{
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  margin-bottom:18px;
}
.vol-head__who{ display:flex; align-items:center; gap:14px; }
.vol-avatar{
  width:64px; height:64px; border-radius:50%; object-fit:cover; flex:none;
  border:2px solid var(--line-blue); background:var(--blue-50);
}
.vol-avatar--blank{
  display:grid; place-items:center; font-family:var(--display); font-size:1.6rem; color:var(--blue-800);
}
.vol-avatar--big{ width:110px; height:110px; }
.member-card{ text-align:center; }
.member-card table{ margin:0 auto; text-align:left; }
.vol-chip{
  display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  padding:7px 12px; border-radius:99px; border:1px solid var(--line-blue);
  background:var(--blue-50); color:var(--navy); font-weight:600; font-size:.84rem; white-space:nowrap;
}
.vol-chip span{ max-width:110px; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:860px){ .vol-chip span{ display:none; } }

/* ---------- blog ---------- */
.blog-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.blog-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
}
.blog-card:hover{ border-color:var(--blue-500); }
.blog-card__link{ text-decoration:none; color:inherit; display:block; }
.blog-card__img{
  display:block; height:170px; background-size:cover; background-position:center; background-color:var(--blue-50);
}
.blog-card__img--none{ display:grid; place-items:center; color:var(--blue-500); }
.blog-card__body{ display:block; padding:16px; }
.blog-card__body strong{
  display:block; margin:8px 0 6px; font-family:var(--display); font-size:1.05rem;
  line-height:1.3; color:var(--navy);
}
.blog-card__excerpt{ display:block; font-size:.9rem; color:var(--ink-soft); line-height:1.5; }
.blog-card__foot{
  margin-top:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:12px 16px; border-top:1px solid var(--line); font-size:.84rem; color:var(--ink-soft);
}
.vol-avatar--tiny{ width:26px; height:26px; border-width:1px; }

.article{ max-width:760px; margin:0 auto; }
.article h1{ font-size:2rem; line-height:1.2; margin:6px 0 14px; }
.article__by{ display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.article__hero{ width:100%; border-radius:var(--radius); margin-bottom:22px; }
.article__body p{ font-size:1.06rem; line-height:1.75; color:#243044; margin:0 0 18px; }
.article__share{ margin-top:26px; padding-top:18px; border-top:1px solid var(--line); }

@media (max-width:900px){ .blog-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){
  .blog-grid{ grid-template-columns:1fr; }
  .article h1{ font-size:1.5rem; }
  .article__body p{ font-size:1rem; }
}

/* ---------- policy pages ---------- */
.policy{ max-width:760px; margin:0 auto; }
.policy h1{ font-size:1.9rem; margin:14px 0 6px; }
.policy__body h2{
  font-size:1.15rem; margin:28px 0 10px; padding-bottom:6px;
  border-bottom:1px solid var(--line); color:var(--navy);
}
.policy__body p{ font-size:1rem; line-height:1.72; color:#243044; margin:0 0 14px; }

/* Quiet, at the very bottom, where people look for them. Prominent enough to
   find and not so prominent that a noticeboard looks like a bank. */
.foot-legal{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:0 0 18px; font-size:.8rem; color:var(--muted);
}
.foot-legal a{ color:var(--ink-soft); text-decoration:none; }
.foot-legal a:hover{ color:var(--blue-800); text-decoration:underline; }
.foot-legal span{ color:var(--line-blue); }

/* the report an official opens */
.repcover{
  background:linear-gradient(180deg,#24387e,var(--navy)); color:#fff;
  border-radius:var(--radius); padding:30px 26px; margin-bottom:22px; text-align:center;
}
.repcover__eyebrow{
  margin:0 0 10px; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:#cfe0f5;
}
.repcover h1{ color:#fff; margin:0 0 6px; font-size:1.8rem; }
.repcover__period{ margin:0; color:#cfe0f5; }

/* =========================================================================
   DASHBOARD
   ========================================================================= */

.dash-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-bottom:18px;
}

.dash-grid{ display:grid; grid-template-columns:repeat(6, 1fr); gap:12px; margin-bottom:8px; }

.statcard{
  display:block; text-decoration:none; position:relative;
  background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--line-blue);
  border-radius:var(--radius); padding:16px 14px; box-shadow:var(--shadow-sm);
}
a.statcard:hover{ border-color:var(--blue-500); border-top-color:var(--blue-500); }
.statcard__n{
  display:block; font-family:var(--display); font-size:1.9rem; line-height:1; color:var(--navy);
}
.statcard__k{
  display:block; margin-top:7px; font-size:.72rem; font-weight:600; line-height:1.3;
  text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft);
}
.statcard__sub{ display:block; margin-top:6px; font-size:.75rem; color:var(--muted); }

.statcard--alert{ border-top-color:var(--saffron); background:var(--saffron-50); }
.statcard--alert .statcard__n{ color:var(--saffron-dark); }
.statcard--open{ border-top-color:var(--saffron); }
.statcard--progress{ border-top-color:var(--blue-500); }
.statcard--good{ border-top-color:var(--india-green); }
.statcard--good .statcard__n{ color:var(--india-green); }

.dash-two{ display:grid; grid-template-columns:1fr 1.4fr; gap:14px; margin:14px 0 4px; }
.dash-big{
  font-family:var(--display); font-size:2.4rem; line-height:1; color:var(--navy); margin:6px 0 8px;
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
}
.dash-delta{ font-family:var(--body); font-size:.82rem; font-weight:600; }
.dash-delta.is-up{ color:var(--india-green); }
.dash-delta.is-down{ color:var(--saffron-dark); }

.bar-row{ display:flex; align-items:center; gap:10px; margin-bottom:9px; font-size:.88rem; }
.bar-row__label{ flex:0 0 34%; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar-row__track{ flex:1 1 auto; height:9px; border-radius:99px; background:var(--blue-50); overflow:hidden; }
.bar-row__fill{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--blue-500),var(--navy)); }
.bar-row__n{ flex:0 0 auto; font-family:var(--mono); font-size:.8rem; color:var(--navy); min-width:26px; text-align:right; }

.dash-links{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
.dash-link{
  display:flex; align-items:flex-start; gap:11px; text-decoration:none;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 15px; box-shadow:var(--shadow-sm); color:var(--navy);
}
.dash-link:hover{ border-color:var(--blue-500); }
.dash-link .icon{ color:var(--blue-600); flex:none; margin-top:2px; }
.dash-link strong{ display:block; font-family:var(--display); font-size:.95rem; }
.dash-link .hint{ display:block; margin:2px 0 0; font-size:.8rem; }

@media (max-width:1100px){
  .dash-grid{ grid-template-columns:repeat(3, 1fr); }
  .dash-links{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:860px){
  .dash-two{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .dash-grid{ grid-template-columns:repeat(2, 1fr); gap:10px; }
  .dash-links{ grid-template-columns:1fr; }
  .statcard{ padding:13px 11px; }
  .statcard__n{ font-size:1.5rem; }
  .statcard__k{ font-size:.65rem; }
  .dash-big{ font-size:1.9rem; }
  .bar-row__label{ flex-basis:40%; }
}

/* -------------------------------------------------------------------------
   Admin bar with a full set of sections.

   The panel now has ten places to go, which is more than fits on one line
   beside the logo. Rather than let the last item slide under the account
   menu, the bar drops the navigation onto its own row below the logo once
   the window is narrower than a wide desktop, and keeps it scrollable on a
   phone.
   ------------------------------------------------------------------------- */
@media (max-width:1500px){
  body.is-admin .site-head > .wrap{ flex-wrap:wrap; row-gap:6px; }
  body.is-admin .site-nav{
    order:3; width:100%; margin-left:0;
    padding:4px 0 2px; border-top:1px solid var(--line);
  }
  body.is-admin .admin-account{ margin-left:auto; }
}
body.is-admin .site-nav a{ white-space:nowrap; }

/* volunteers who went and looked */
.verifs{
  margin-top:18px; padding:16px 18px; border-radius:var(--radius);
  background:var(--blue-50); border:1px solid var(--line-blue);
}
.verifs h3{ margin:0 0 4px; font-size:1rem; display:flex; align-items:center; gap:8px; }
.verif{ display:flex; align-items:flex-start; gap:10px; padding:9px 0; border-top:1px solid var(--line-blue); }
.verif:first-of-type{ border-top:none; }
.verif strong{ margin-right:6px; }
.verif a{ text-decoration:none; }

.vol-chip--quiet{ background:var(--surface); border-color:var(--line); color:var(--ink-soft); }
.vol-chip--quiet:hover{ border-color:var(--blue-500); color:var(--navy); }

/* the invitation on the landing page */
.vol-points{ list-style:none; padding:0; margin:0 0 14px; }
.vol-points li{
  /* Deliberately not a flex row. Older engines would not wrap the text inside
     one and ran it off the right of the screen; a block with the tick placed
     absolutely behaves the same everywhere. */
  position:relative; padding-left:26px; margin-bottom:9px; color:var(--ink-soft);
}
.vol-points li .icon{ position:absolute; left:0; top:3px; }
.vol-points .icon{ color:var(--india-green); flex:none; margin-top:3px; }
/* The membership card shown on the landing page. Modelled on a real card
   rather than a coloured box: a soft gradient, a light sheen across the
   corner, the number set apart the way an account number is, and a seal. */
.volcard{
  position:relative; overflow:hidden;
  align-self:center; justify-self:end; width:100%; max-width:330px;
  padding:20px 20px 18px; border-radius:18px;
  background:linear-gradient(145deg, #1d3a7d 0%, var(--navy) 55%, #071634 100%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 40px -18px rgba(4,18,46,.75), 0 2px 6px rgba(4,18,46,.25);
  color:#fff;
}
.volcard__sheen{
  position:absolute; top:-60%; right:-30%; width:80%; height:180%;
  background:linear-gradient(100deg, rgba(255,255,255,.16), rgba(255,255,255,0) 62%);
  transform:rotate(18deg); pointer-events:none;
}
.volcard__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.volcard__eyebrow{
  font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:#a9c4ea; font-weight:700;
}
.volcard__seal{
  display:grid; place-items:center; width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,.12); color:#ffd9a0; flex:none;
}
.volcard__who{ display:flex; align-items:center; gap:12px; margin:18px 0 20px; }
.volcard__avatar{
  display:grid; place-items:center; width:46px; height:46px; border-radius:50%; flex:none;
  background:linear-gradient(160deg, var(--saffron), #d95f00); color:#fff;
}
.volcard__who strong{ display:block; font-family:var(--display); font-size:1.15rem; line-height:1.2; }
.volcard__area{ display:block; margin-top:2px; font-size:.8rem; color:#a9c4ea; }
.volcard__foot{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  padding-top:14px; border-top:1px solid rgba(255,255,255,.14);
}
.volcard__no{
  font-family:var(--mono); font-size:.92rem; letter-spacing:.06em;
  background:rgba(255,255,255,.1); padding:6px 11px; border-radius:8px;
}
.volcard__check{
  display:inline-flex; align-items:center; gap:5px;
  font-size:.7rem; color:#9fe0b4;
}
@media (max-width:860px){
  .volcard{ justify-self:stretch; max-width:none; margin-top:16px; }
}

/* board search */
.searchbar{
  display:flex; align-items:center; gap:8px; margin:0 0 12px;
  background:var(--surface); border:1px solid var(--line); border-radius:99px;
  padding:6px 8px 6px 14px; box-shadow:var(--shadow-sm);
}
.searchbar .icon{ color:var(--ink-soft); flex:none; }
.searchbar input[type="search"]{
  flex:1 1 auto; border:none; background:transparent; padding:8px 0;
  font-size:16px; min-width:0; outline:none;
}
.searchbar input[type="search"]:focus{ box-shadow:none; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.chip.is-active{ background:var(--navy); color:#fff; border-color:var(--navy); }

/* pager, shared by the board, the blog and the queue */
.pager{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin:18px 0 4px; }
.pager a{
  min-width:38px; text-align:center; padding:8px 10px; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:var(--surface); color:var(--navy);
  text-decoration:none; font-weight:600; font-size:.88rem;
}
.pager a:hover{ border-color:var(--blue-500); }
.pager a.is-active{ background:var(--navy); color:#fff; border-color:var(--navy); }

/* -------------------------------------------------------------------------
   The More sheet on the bottom bar.

   A <details> element, so it opens and closes with no JavaScript. The panel
   slides up from the bar itself, which is where the thumb already is.
   ------------------------------------------------------------------------- */
.tabbar__more{ flex:1 1 0; display:flex; position:relative; }
.tabbar__more > summary{
  list-style:none; cursor:pointer; width:100%;
}
.tabbar__more > summary::-webkit-details-marker{ display:none; }
.tabbar__more[open] > summary{ color:var(--navy); }
.tabbar__more[open] > summary .tabbar__icon{ transform:rotate(45deg); }
.tabbar__more.is-active > summary{ color:var(--navy); }

.moresheet{
  position:fixed; left:0; right:0; bottom:0; top:0; z-index:60;
  background:rgba(4,18,46,.42);
  display:flex; align-items:flex-end;
}
.moresheet__panel{
  width:100%; background:var(--surface);
  border-radius:16px 16px 0 0; padding:10px 14px calc(74px + var(--safe-b, 0px));
  box-shadow:0 -10px 30px rgba(4,18,46,.22);
  max-height:76vh; overflow-y:auto;
}
.moresheet__grip{
  width:42px; height:4px; border-radius:99px; background:var(--line-blue);
  margin:2px auto 12px;
}
.moresheet__link{
  display:flex; align-items:center; gap:12px; padding:14px 8px;
  border-bottom:1px solid var(--line); text-decoration:none;
  color:var(--navy); font-family:var(--display); font-weight:600; font-size:1rem;
}
.moresheet__link .icon{ color:var(--blue-600); flex:none; }
.moresheet__link:active{ background:var(--blue-50); }

.moresheet__row{ display:flex; gap:8px; flex-wrap:wrap; padding:14px 8px 4px; }
.moresheet__lang{
  padding:9px 14px; border-radius:99px; border:1px solid var(--line);
  text-decoration:none; color:var(--navy); font-size:.9rem; font-weight:600;
}
.moresheet__lang.is-active{ background:var(--navy); color:#fff; border-color:var(--navy); }
.moresheet__row--quiet{ padding-top:10px; border-top:1px solid var(--line); margin-top:8px; }
.moresheet__row--quiet a{
  color:var(--ink-soft); text-decoration:none; font-size:.8rem;
  margin:0 12px 6px 0;          /* older engines ignore flex gap */
}
.moresheet__lang{ margin:0 4px 4px 0; }

@media (min-width:861px){ .tabbar__more{ display:none; } }

/* the honest note under the steps: quiet, not an alarm */
.plainly{
  display:flex; align-items:flex-start; gap:8px;
  margin-top:18px; padding:12px 14px; border-radius:var(--radius-sm);
  background:var(--blue-50); border:1px solid var(--line-blue); color:var(--ink-soft);
}
.plainly .icon{ color:var(--blue-600); flex:none; margin-top:2px; }

/* choosing a public address */
.handle-field{
  display:flex; align-items:stretch; border:1px solid var(--line);
  border-radius:var(--radius-sm); overflow:hidden; background:var(--surface);
}
.handle-field__prefix{
  display:flex; align-items:center; padding:0 10px;
  background:var(--blue-50); color:var(--ink-soft);
  font-family:var(--mono); font-size:.82rem; white-space:nowrap;
  border-right:1px solid var(--line);
}
.handle-field input{ border:none; border-radius:0; flex:1 1 auto; min-width:0; font-family:var(--mono); }
.handle-field input:focus{ box-shadow:none; }
@media (max-width:520px){
  .handle-field{ flex-direction:column; }
  .handle-field__prefix{ border-right:none; border-bottom:1px solid var(--line); padding:7px 10px; }
}