/* The /next/ build. Separate from app.css, so nothing here can reach the live Explorer.
   The three faces are the self-hosted woff2 files the live build already ships: the live
   Content-Security-Policy is default-src 'self' with font-src 'self', so an external font
   CDN is refused outright and the type system would fail silently into system faces. */
@font-face{font-family:'IBM Plex Sans';src:url(../fonts/ibm-plex-sans-latin.woff2) format('woff2');font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:'Source Serif 4';src:url(../fonts/source-serif-4-latin.woff2) format('woff2');font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(../fonts/ibm-plex-mono-400-latin.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(../fonts/ibm-plex-mono-500-latin.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  --navy:#1d3a5c;--navy-2:#2c5480;--teal:#2a7f62;--teal-dark:#1f6b52;--teal-soft:#e7f3f0;
  --ink:#18232d;--muted:#4b5a66;--line:#d8e0e5;--surface:#fff;--bg:#f3f6f7;--warm:#f7f4ed;
  --footer-bg:#0b1f36;--footer-ink:#dce6ef;--sea:#d6e6f4;--focus:#f2b134;
  --partial:#9a6a12;--partial-tint:#f7eeda;--unknown:#6d7a87;--unknown-tint:#e6eaee;--pin:#b4671d;
  --font-ui:'IBM Plex Sans',system-ui,'Segoe UI',Arial,sans-serif;
  --font-prose:'Source Serif 4',Georgia,serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  --t-chip:0.75rem;--t-caption:0.875rem;--t-ui-sm:0.9375rem;--t-ui:1rem;--t-prose:1.1875rem;
  --t-h3:1.25rem;--t-h2:1.6875rem;--t-h1:2.5rem;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font-ui);color:var(--ink);background:var(--bg);font-size:var(--t-ui);line-height:1.5}
a{color:var(--teal-dark);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--navy)}
button{font:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.skip-link{position:fixed;left:1rem;top:-5rem;background:#fff;color:var(--navy);padding:.75rem 1rem;z-index:100;border-radius:.35rem}
.skip-link:focus{top:1rem}

/* THE CCE HEADER AND FOOTER ARE NOT THIS BUILD'S TO REDESIGN.
   The logo, the stated relationship to the Charity Compliance Engine, the company number,
   the registered office, the ICO registration and the liability note all carry over from the
   live build unchanged. The company details are a legal requirement and the liability note is
   what a reader needs before acting on anything here; neither is a design element and neither
   may be dropped from any build. Shapes follow app.css so the two sit together. */
.site-header{background:var(--navy);color:#fff}
.header-inner{width:min(2000px,100%);margin:auto;padding:1rem 1.5rem;min-height:150px;display:flex;align-items:center;justify-content:flex-start;gap:2rem;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;background:#fff;border-radius:18px;padding:.55rem .9rem;text-decoration:none}
.brand img{display:block;width:250px;height:auto}
.header-context{margin:0;color:#dce6ef;font-size:var(--t-ui-sm);text-align:right}
.header-context span{display:block;color:#a9bccd;font-size:var(--t-caption)}
.header-title{display:block;font-family:var(--font-prose);font-size:var(--t-h2);line-height:1.15;font-weight:600;color:#fff;margin-bottom:.15rem}
.header-context .header-title{color:#fff;font-size:var(--t-h2)}
.header-parent{display:block;margin-top:.15rem;font-size:var(--t-caption)}
.header-parent a{color:#dce6ef;text-decoration:underline}
.primary-nav{flex:1 1 auto;display:flex;justify-content:flex-end}
.nav-inner{display:flex;flex-wrap:wrap}
.primary-nav a{color:#fff;text-decoration:none;padding:.9rem 1.05rem;border-bottom:3px solid transparent;white-space:nowrap;font-size:var(--t-ui)}
.primary-nav a:hover{background:rgba(255,255,255,.06);color:#7ee0bd;border-bottom-color:#7ee0bd}
.primary-nav a.on{background:rgba(255,255,255,.06);color:#7ee0bd;border-bottom-color:#7ee0bd}
.primary-nav a.soon{opacity:.45;cursor:default}
.primary-nav a.soon:hover{background:none;color:#fff;border-bottom-color:transparent}
/* The feedback link leaves the Explorer, so it reads as an action rather than a
   section: teal, and set apart from the routes beside it. */
.primary-nav a.nav-feedback{color:#7ee0bd;margin-left:.35rem}
.primary-nav a.nav-feedback:hover{color:#fff}

.site-footer{background:var(--footer-bg);color:var(--footer-ink);margin-top:3rem;padding:2rem 0}
.footer-inner{width:min(2000px,100%);margin:auto;padding:0 1.5rem;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);gap:2rem;align-items:start}
.site-footer p{margin:0;font-size:var(--t-ui-sm);line-height:1.6}
.site-footer a{color:var(--footer-ink)}
.site-footer a:hover{color:#7ee0bd}
.footer-links span{opacity:.45;margin:0 .35rem}
.footer-links a,.footer-accuracy a{white-space:nowrap}
.footer-copyright{text-align:right;white-space:nowrap}
.footer-accuracy{grid-column:1/-1;padding-top:.2rem;margin:.35rem 0 0;line-height:1.5}
.footer-accuracy a{color:#7ee0bd}
@media(max-width:900px){.footer-inner{grid-template-columns:1fr}.footer-copyright{text-align:left}}
@media(max-width:650px){.header-inner{min-height:66px;gap:1rem}.header-context{text-align:left}.header-context .header-title{font-size:var(--t-h3)}}

.wrap{width:min(1440px,100%);margin:auto;padding:1.6rem 1.5rem 2.4rem;min-height:60vh}
.state{color:var(--muted);padding:3rem 0;text-align:center}
.state.error{color:#923f43;background:#fff0f0;border:1px solid #e5b8b8;border-radius:10px}

h1{font-size:var(--t-h1);margin:0 0 .3rem;letter-spacing:-.015em;line-height:1.1}
h2{font-size:var(--t-h2);margin:2rem 0 .2rem;letter-spacing:-.01em}
h3{font-size:var(--t-h3);margin:0 0 .6rem}
.lede{font-family:var(--font-prose);font-size:var(--t-prose);color:var(--muted);margin:0 0 1.3rem;max-width:62ch}
.prose{font-family:var(--font-prose);font-size:var(--t-prose);line-height:1.55;max-width:74ch;margin:0 0 .8rem}
/* Explanatory text is read, not glanced at, so it sits at the UI size rather than the caption
   size. --muted was #5d6c78, 5.41:1 on white: AA, but only just, and at 14px it read as grey
   small print rather than as prose. It is now 7.11:1, which is AAA, and the caption size stays
   where it belongs, on chips, axis ticks and table captions. */
.note{font-size:var(--t-ui-sm);color:var(--muted);line-height:1.55}
.crumb{font-size:var(--t-caption);color:var(--muted);margin-bottom:.7rem}
.panel-title{font-size:var(--t-h3);margin:0 0 .1rem}
.panel-sub{font-size:var(--t-caption);color:var(--muted);margin:0 0 1rem}
.sep{font-size:var(--t-caption);font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:1rem 0 .3rem}

/* Hero: the map beside the words, never behind them, so contrast never has to be guaranteed. */
.hero{display:grid;grid-template-columns:.62fr 1.38fr;background:#fff;border-bottom:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:1.4rem}
/* Sea behind the outline and the choropleth's own blue in it, so the hero and the Areas map
   read as one family. It was navy on navy, which was legible only just. */
.hero-img{background:var(--sea);height:580px;display:flex;align-items:center;justify-content:center;padding:.35rem;overflow:hidden}
.hero-img svg{width:100%;height:100%;display:block}
.hero-txt{padding:2rem 2.2rem;display:flex;flex-direction:column;justify-content:center;gap:0}
.hero-txt .lede{margin-bottom:1rem}
.hero-txt .prose{font-size:1.0625rem;margin-bottom:.8rem;max-width:68ch}
.hero-txt .lede + .prose{margin-top:1.4rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.hero-txt h1{margin:0 0 .5rem}

.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:1.1rem 1.2rem}
.mcard{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--teal);border-radius:10px;padding:1rem;display:flex;flex-direction:column;gap:.25rem}
.mcard .n{font-family:var(--font-mono);font-size:2rem;font-weight:600;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.mcard .lb{font-size:var(--t-ui-sm);font-weight:600}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.grid5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem}

.status{display:inline-flex;align-items:center;border-radius:100px;padding:.28rem .6rem;font-size:var(--t-chip);font-weight:700;white-space:nowrap;width:fit-content}
.s-ver{background:var(--teal-soft);color:var(--teal-dark)}
.s-par{background:var(--partial-tint);color:var(--partial)}
.s-unk{background:var(--unknown-tint);color:var(--unknown)}

/* Context strip: line one the population, line two the basis, line three the applied scope. */
.ctx{background:#fff;border:1px solid var(--line);border-left:4px solid var(--navy);border-radius:8px;padding:.9rem 1.1rem;margin-bottom:1.4rem}
.ctx .l1{font-size:1.0625rem;font-weight:600}
.ctx .l1 .f{font-family:var(--font-mono);font-weight:500}
.ctx .l2{font-size:var(--t-caption);color:var(--muted);margin-top:.3rem}
.ctx .l3{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;margin-top:.65rem;padding-top:.6rem;border-top:1px solid #eef2f4}
.ctx .l3 .lbl{font-size:var(--t-chip);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
/* A chip that states a value rather than offering to remove one. Same look, no cross, and
   the right padding on both sides since there is no button to sit beside. */
.fchip-static{padding-right:.65rem}
.fchip{display:inline-flex;align-items:center;gap:.45rem;background:var(--teal-soft);color:var(--teal-dark);border:1px solid #c2dfd6;border-radius:100px;padding:.22rem .5rem .22rem .65rem;font-size:var(--t-caption);font-weight:600}
.fchip button{background:none;border:0;color:inherit;font-family:var(--font-mono);font-weight:600;opacity:.75;cursor:pointer;padding:0 .1rem;line-height:1}
.fchip button:hover{opacity:1}
.fnone{font-size:var(--t-caption);color:var(--muted);font-style:italic}
.linkish{background:none;border:0;font-size:var(--t-caption);color:var(--muted);text-decoration:underline;cursor:pointer;padding:0}
.scope{margin-left:auto;display:inline-flex;align-items:center;gap:.45rem;border:1px solid var(--navy);color:var(--navy);background:#fff;border-radius:7px;padding:.35rem .75rem;font-size:var(--t-caption);font-weight:600;cursor:pointer}

/* The drawer: hidden until Change scope is pressed, so the page carries the chips and nothing else. */
.drawer{background:#fff;border:1px solid var(--line);border-top:3px solid var(--navy);border-radius:10px;padding:1.1rem 1.2rem;margin:-.9rem 0 1.4rem;box-shadow:0 10px 26px rgba(23,54,83,.13)}
.drawer .dh{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.9rem;flex-wrap:wrap}
.drawer .dh h3{margin:0}
.flabel{font-size:var(--t-caption);font-weight:600;display:block;margin-bottom:.3rem}
/* The standard select. It was written as `.drawer select` and so reached only the Change scope
   drawer: Compare's three population selects fell through to the browser's native control and
   looked nothing like the rest of the build. A control's appearance should not depend on which
   section it happens to sit in, so the rule is now shared. next-charities.css still carries its
   own copy for the rail, which should fold into this one when that file is next open. */
.drawer select,.so-controls select{width:100%;padding:.55rem .7rem;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink);font-size:var(--t-ui-sm)}
.dgroup{margin-top:1.1rem;padding-top:.9rem;border-top:1px solid #eef2f4}
.dgroup-h{display:block;font-size:var(--t-chip);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.drawer .df{display:flex;align-items:center;gap:1rem;margin-top:1.1rem;padding-top:.9rem;border-top:1px solid #eef2f4;flex-wrap:wrap}
/* A button may be an <a> when it navigates, and several now are: the Areas panel's two exits
   and the licence pack download. Without this they inherit the global anchor underline and read
   as an underlined slab. `disabled` gets a real style too, because .btn had none: the Areas
   buttons sat disabled for days looking exactly like live ones. */
.areas-split{grid-template-columns:1.55fr 1fr}
.btn,.btn2{text-decoration:none;display:inline-block}
.btn[disabled],.btn2[disabled]{background:#eef2f4;color:#8b98a3;border-color:#dde4e9;cursor:not-allowed}
.btn{background:var(--navy);color:#fff;border:0;border-radius:7px;padding:.6rem 1rem;font-size:var(--t-ui-sm);font-weight:600;text-align:center;cursor:pointer}
.btn2{background:#fff;color:var(--navy);border:1px solid var(--navy);border-radius:7px;padding:.6rem 1rem;font-size:var(--t-ui-sm);font-weight:600;text-align:center;cursor:pointer}

/* Charts. Every bar carries its number, so nothing here needs colour to be read. */
.chart{display:flex;gap:.45rem}
.chart .yl{writing-mode:vertical-rl;transform:rotate(180deg);font-size:var(--t-chip);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:center;flex:0 0 auto}
.chart .yt{display:flex;flex-direction:column;justify-content:space-between;font-family:var(--font-mono);font-size:11px;color:var(--muted);text-align:right;padding-right:.4rem;flex:0 0 auto}
.chart .col{flex:1;min-width:0}
.plot{display:flex;align-items:flex-end;gap:14px;height:190px;padding:0 4px;border-bottom:1px solid var(--line);border-left:1px solid var(--line);position:relative}
.plot .gl{position:absolute;left:0;right:0;height:1px;background:#dbe3e8;pointer-events:none}
.plot .grp{flex:1;display:flex;gap:3px;align-items:flex-end;position:relative;z-index:1;height:100%}
.plot .grp>i{flex:1;display:block;background:var(--navy)}
.plot .grp>i.exp{background:var(--teal)}
.plot .grp.part{opacity:.5}
.xlabels{display:flex;font-family:var(--font-mono);font-size:var(--t-caption);color:var(--muted);padding-top:.35rem}
.xlabels span{flex:1}
.axis-x{font-size:var(--t-chip);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.legend{display:flex;gap:1.1rem;align-items:center;margin:0 0 .6rem;font-size:var(--t-caption);color:var(--muted)}
.legend i{width:12px;height:12px;display:inline-block;margin-right:.35rem;vertical-align:-1px}
.tip{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);background:var(--navy);color:#fff;border-radius:7px;padding:.5rem .65rem;font-size:var(--t-chip);line-height:1.5;white-space:nowrap;z-index:3;box-shadow:0 4px 14px rgba(11,31,54,.3);pointer-events:none}
.tip b{display:block;font-family:var(--font-mono);font-weight:500}
.tip span{display:block;opacity:.75}
.tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--navy)}
.grp .tip,.bar-row .tip{display:none}
.grp:hover .tip,.grp:focus-within .tip,.bar-row:hover .tip,.bar-row:focus-within .tip{display:block}

.bar-row{display:grid;grid-template-columns:104px 1fr 56px 62px;gap:.6rem;align-items:center;margin-bottom:.45rem;font-size:var(--t-caption);position:relative}
.bar-t{background:#eef2f4;height:16px;border-radius:2px;overflow:hidden}
.bar-f{background:var(--teal);height:100%;display:block}
.bar-v{font-family:var(--font-mono);font-size:var(--t-caption);text-align:right;font-variant-numeric:tabular-nums}
.bar-c{font-family:var(--font-mono);font-size:var(--t-caption);text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.bar-axis{display:grid;grid-template-columns:104px 1fr 56px 62px;gap:.6rem;align-items:center;margin-top:.15rem}
.bar-axis.head{margin:0 0 .5rem;padding-bottom:.35rem;border-bottom:2px solid var(--line)}
.bar-axis .ticks{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11px;color:var(--muted);border-top:1px solid var(--line);padding-top:.2rem}

.disc{border-top:1px solid #eef2f4;margin-top:.9rem;padding-top:.6rem}
.disc>summary{font-size:var(--t-caption);font-weight:600;color:var(--teal-dark);cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:.4rem}
.disc>summary::-webkit-details-marker{display:none}
.disc>summary::before{content:"+";font-family:var(--font-mono);font-weight:600;border:1px solid var(--line);border-radius:4px;width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.disc[open]>summary::before{content:"\2212"}
.disc-body{margin-top:.8rem}
.tbl{display:grid;gap:.6rem;font-size:var(--t-caption);align-items:baseline;padding:.35rem 0}
.tbl-5{grid-template-columns:.75fr .85fr 1.45fr 1.45fr .95fr}
.tbl.head{font-weight:600;color:var(--muted);border-bottom:2px solid var(--line)}
.tbl.row{border-bottom:1px solid #eef2f4}
.tbl .r{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
/* A column heading is a LABEL, not a figure. .r carries the mono face for the figures beneath
   it, and the head row uses the same class for its alignment, so headings over numeric columns
   were set in the figure face while headings over text columns were not: on the Funders table
   "Awards", "Recipients" and "Value" were mono and "Funder" and "Evidence window" were not, in
   one row. Alignment is kept, the face is not. */
.tbl.head .r{font-family:var(--font-ui);font-variant-numeric:normal}
.tbl.row.part{opacity:.62}

/* Tabs read as tabs: a bounded box joined to the panel beneath it. */
.tabs{display:flex;gap:.25rem;border-bottom:2px solid var(--line);margin:1.5rem 0 0;flex-wrap:wrap}
/* Anchors as well as buttons: the Data and sources tabs are part of the route, so they are
   real links that can be shared, middle-clicked and opened in a new tab. The other tab strips
   are still buttons, and both get the identical look, because the reader should not be able to
   tell which of the two a tab happens to be built from. */
.tabs button,.tabs a{padding:.6rem 1.1rem;font-size:var(--t-ui-sm);font-weight:600;color:var(--muted);border:0;background:none;border-bottom:3px solid transparent;margin-bottom:-2px;cursor:pointer;text-decoration:none;display:inline-block;line-height:1.2}
.tabs button[aria-selected=true],.tabs a[aria-selected=true]{color:var(--navy);background:#fff;border:1px solid var(--line);border-top:3px solid var(--teal);border-bottom:2px solid #fff;border-radius:6px 6px 0 0;padding-top:calc(.6rem - 2px)}
.tabpanel{border-radius:0 0 10px 10px;border-top:0}

.kv{display:grid;grid-template-columns:1fr auto;gap:.35rem 1rem;font-size:var(--t-ui-sm);padding:.3rem 0;border-bottom:1px solid #eef2f4}
.kv b{font-family:var(--font-mono);font-weight:500;font-variant-numeric:tabular-nums}
.kv b.na{font-family:var(--font-ui);font-size:var(--t-caption);color:var(--unknown);font-weight:400}
.fig{display:flex;align-items:baseline;gap:.75rem;padding:.55rem 0;border-bottom:1px solid #eef2f4}
.fig .fv{font-family:var(--font-mono);font-size:1.75rem;font-weight:600;letter-spacing:-.02em;line-height:1.05;color:var(--navy);min-width:112px;font-variant-numeric:tabular-nums}
.fig .fl{font-size:var(--t-ui-sm);font-weight:600;line-height:1.3}

.mbtn{display:inline-flex;align-items:center;border:1px solid var(--line);background:#fff;border-radius:100px;padding:.38rem .8rem;font-size:var(--t-caption);font-weight:600;color:var(--navy);cursor:pointer}
.mbtn.on{background:var(--navy);border-color:var(--navy);color:#fff}
.mbtn[disabled]{color:#9aa8b3;background:#f4f7f8;border-style:dashed;text-decoration:line-through;cursor:not-allowed}

.map-wrap{display:flex;gap:1rem;align-items:flex-start}
.map-box{flex:1;background:#bcd5ea;border:1px solid var(--line);border-radius:8px;min-height:300px;overflow:hidden}
.map-box svg{width:100%;height:420px;display:block}
.map-area{stroke:#fff;stroke-width:1;vector-effect:non-scaling-stroke;cursor:pointer;paint-order:stroke fill}
.map-area:hover{stroke:var(--navy);stroke-width:2}
.map-area.sel{stroke:var(--pin);stroke-width:2.4}
.map-key{width:150px;font-size:var(--t-caption)}
.map-key .row{display:flex;gap:.5rem;align-items:center;font-family:var(--font-mono);margin-bottom:.28rem}
.map-key i{width:22px;height:14px;display:inline-block;border:1px solid var(--line)}

.route{display:flex;flex-direction:column;gap:.15rem}
.route .ico{color:var(--teal-dark);display:block;margin-bottom:.45rem}
.route h3{font-size:var(--t-ui);margin:0 0 .25rem}


@media(max-width:1050px){
  .hero{grid-template-columns:1fr}
  .hero-img{height:260px}
  .grid5,.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid2,.grid3{grid-template-columns:1fr}
  .map-wrap{flex-direction:column}
  .map-key{width:100%;display:flex;flex-wrap:wrap;gap:.8rem}
}
@media(max-width:650px){
  .grid5,.grid4{grid-template-columns:1fr}
  .grid2>*,.grid3>*,.grid4>*,.grid5>*{min-width:0}
  .bar-row,.bar-axis{grid-template-columns:88px 1fr 50px 54px}
  .tbl-5{grid-template-columns:52px 60px 96px 96px 56px;min-width:400px}
  .disc-body{overflow-x:auto}
  .scope{margin-left:0}
  .disc>summary{padding:.75rem 0}
  .areas-split{grid-template-columns:1fr}
  .fchip button{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .scope,.mbtn{min-height:44px}
  .map-band{min-height:44px}
  .linkish{min-height:44px;display:inline-flex;align-items:center}
  select{min-height:44px}
}

/* Purposes: OSCR's statutory wording runs to fifteen words, so its label column is wider than
   the income bands' and the bar gives up the space. */
.bar-row.wide,.bar-axis.wide{grid-template-columns:minmax(180px,1.4fr) 2fr 56px 62px}
@media(max-width:650px){.bar-row.wide,.bar-axis.wide{grid-template-columns:minmax(110px,1fr) 1fr 46px 50px}}

/* Areas map: an inset for Shetland, a key that selects, and zoom that does not re-render. */
.map-box{position:relative;touch-action:none;background:#bcd5ea}
.map-box svg{width:100%;height:560px;display:block;cursor:grab}
.map-box svg:active{cursor:grabbing}
/* .dim carries no opacity rule: the flat NEUTRAL_FILL set in next.js already carries the
   distinction, and opacity on top would fade the outline and hit-target along with the fill. */
.map-zoom{position:absolute;right:.6rem;bottom:2.2rem;display:flex;flex-direction:column;gap:.3rem}
.map-zoom button{width:32px;height:32px;border:1px solid var(--line);background:#fff;border-radius:7px;font-size:var(--t-ui);font-weight:600;color:var(--navy);cursor:pointer;line-height:1}
.map-zoom button:hover{background:var(--teal-soft)}
.map-hint{position:absolute;left:.6rem;bottom:.5rem;background:rgba(255,255,255,.9);border-radius:6px;padding:.25rem .5rem;margin:0}

/* The map on a phone. `touch-action:none` is what makes drag-to-pan work with a pointer, and
   on a touch screen it also swallows the swipe that scrolls the PAGE. At 375x812 the box was
   562px tall, so it covered 69% of the screen: a finger landing on the largest thing on the
   Areas page did nothing, and the page read as frozen at exactly the point most people touch
   first. Vertical panning goes back to the browser here, so a swipe always scrolls the page,
   and the map keeps pinch-zoom and horizontal drag. Nothing is lost that a control does not
   already cover: +, - and fit sit in the corner and do not depend on a gesture. The box is
   shortened too, so the key and the councils beneath it are reachable without a long scroll. */
@media(max-width:650px){
  .map-box{touch-action:pan-y pinch-zoom}
  .map-box svg{height:380px}
}
.map-band{display:flex;align-items:center;gap:.5rem;width:100%;text-align:left;border:1px solid transparent;background:none;border-radius:6px;padding:.3rem .35rem;font-size:var(--t-caption);font-family:var(--font-mono);cursor:pointer;color:var(--ink)}
.map-band.flat{cursor:default}
.map-band:hover:not(.flat){background:var(--teal-soft)}
.map-band.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.map-band i{width:22px;height:14px;display:inline-block;border:1px solid var(--line);flex:0 0 auto}
.map-band small{margin-left:auto;font-family:var(--font-ui);color:var(--muted)}
.map-band.on small{color:#cfe0ee}
.map-key{width:200px}

/* Area against Scotland, and the SIMD fifths. */
.ar-cmp{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:.6rem;padding:.6rem 0;border-bottom:1px solid #eef2f4;font-size:var(--t-ui-sm);align-items:baseline}
.ar-cmp b{font-family:var(--font-mono);font-weight:500;text-align:right;font-variant-numeric:tabular-nums}
.ar-cmp.head{font-weight:600;color:var(--muted);border-bottom:2px solid var(--line);font-size:var(--t-caption)}
.ar-cmp.head b{font-family:var(--font-ui);font-weight:600}
.ar-simd{display:grid;grid-template-columns:1.5fr auto 2fr 52px;gap:.6rem;align-items:center;padding:.3rem 0;font-size:var(--t-caption)}
.ar-track{position:relative;background:#eef2f4;height:14px;border-radius:2px}
.ar-fill{display:block;height:100%;background:var(--teal)}
/* Same mark as Scotland's share on the purpose bars, so the two read as one idea. */
.ar-mark{position:absolute;left:20%;top:-2px;bottom:-2px;width:2px;background:var(--navy)}
@media(max-width:1050px){.map-key{width:100%}.ar-simd{grid-template-columns:1fr auto 1.4fr 46px}}
@media(max-width:650px){.ar-cmp{grid-template-columns:1.2fr 1fr 1fr}.ar-simd{grid-template-columns:1fr 1.2fr 46px}.ar-simd .note{display:none}.map-zoom button{width:44px;height:44px}}

/* Population & Place: the headline figures across the top, then two columns with room. */
.pl-top{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;padding:.2rem 0 1.2rem;border-bottom:1px solid #eef2f4;margin-bottom:1.2rem}
.pl-n{display:block;font-family:var(--font-mono);font-size:1.5rem;font-weight:600;letter-spacing:-.02em;color:var(--navy);font-variant-numeric:tabular-nums}
.pl-l{display:block;font-size:var(--t-caption);color:var(--muted);margin-top:.15rem}
.pl-cols{display:grid;grid-template-columns:1.35fr 1fr;gap:3rem}

/* Purposes against Scotland. The mark on each bar is Scotland's share of the same purpose. */
.pu-row{display:grid;grid-template-columns:minmax(150px,1.1fr) 2.2fr 56px 62px minmax(120px,.9fr);gap:.7rem;align-items:center;padding:.4rem 0;border-bottom:1px solid #f2f5f7;font-size:var(--t-caption)}
.pu-row.head{font-weight:600;color:var(--muted);border-bottom:2px solid var(--line);padding-bottom:.45rem}
.pu-track{position:relative;background:#eef2f4;height:14px;border-radius:2px}
.pu-row.head .pu-track{background:none}
.pu-fill{display:block;height:100%;background:var(--teal);border-radius:2px}
.pu-ref{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--navy)}
.pu-value,.pu-count{font-family:var(--font-mono);text-align:right;font-variant-numeric:tabular-nums}
.pu-count{color:var(--muted)}
.pu-row.head .pu-value,.pu-row.head .pu-count{font-family:var(--font-ui)}
.pu-gap{color:var(--muted)}
.pu-gap.above{color:var(--teal-dark);font-weight:600}
.pu-gap.below{color:var(--partial);font-weight:600}
@media(max-width:1050px){.pl-top{grid-template-columns:repeat(2,minmax(0,1fr))}.pl-cols{grid-template-columns:1fr;gap:1.6rem}}
@media(max-width:650px){.pl-top{grid-template-columns:1fr}.pu-row{grid-template-columns:1fr 46px 46px;gap:.4rem}.pu-row .pu-track{display:none}.pu-row .pu-gap{grid-column:1/-1;padding-bottom:.3rem}}

/* All 32 councils, under the map and at the map's width rather than across the page. */
.mapcol{display:flex;flex-direction:column;gap:1rem;min-width:0}
.ct-wrap{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:.9rem 1.1rem;margin-top:0;border-top:1px solid var(--line)}
.ct-row{display:grid;grid-template-columns:28px 1fr 1fr .8fr;gap:.6rem;align-items:center;padding:.35rem .3rem;border-bottom:1px solid #f2f5f7;font-size:var(--t-caption);cursor:pointer;border-radius:4px}
.ct-row.narrow{grid-template-columns:28px 1fr 1fr}
.ct-row.head{font-weight:600;color:var(--muted);border-bottom:2px solid var(--line);cursor:default}
.ct-row:not(.head):hover{background:var(--teal-soft)}
.ct-row.on{background:var(--teal-soft);font-weight:600}
.ct-rank{font-family:var(--font-mono);color:var(--muted);text-align:right}
.ct-row .r{font-family:var(--font-mono);text-align:right;font-variant-numeric:tabular-nums}
.ct-row.head .r,.ct-row.head .ct-rank{font-family:var(--font-ui)}
/* Four tracks, not three with the last hidden: the fourth is the charity count, which
   is data and not chrome, and hiding it at phone width would answer a layout question by
   removing a number the reader came for. */
@media(max-width:650px){.ct-row{grid-template-columns:22px 1fr .7fr .5fr;gap:.35rem;min-height:44px;font-size:var(--t-chip)}}

.tbl-c{grid-template-columns:.7fr 1.1fr .9fr 1fr .9fr}
.map-inset rect{fill:none;stroke:var(--navy-2);stroke-width:1.1;vector-effect:non-scaling-stroke}
.map-inset-label{font-size:9px;fill:var(--muted);font-family:var(--font-ui)}
.map-inset{pointer-events:none}

/* WP-N11 item 5 (Pack D). filteredChip() is the one device: a small chip reading "Filtered",
   beside a panel-title, on any panel whose own numbers move with the filters currently
   applied. It reuses .fchip's look (the same chip the context strip uses for an applied
   filter) with .fchip-static's no-button treatment, because this chip removes nothing of its
   own; the filters it names are removed from Change scope, same as the period chip. .pt-row is
   only the layout: a h3.panel-title normally sits alone with its own bottom margin, and this
   keeps that exact spacing when a chip sits beside it, and changes nothing when it does not. */
.pt-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:0 0 .1rem}
.pt-row .panel-title{margin:0}

/* The map glossary. Restored at cut-over: the old build carried one and a test enforced that no
   measure could be offered on the map without a definition under the same name. Several of the
   seven do not explain themselves, "Observed grant reach" and "Income evidence coverage" least
   of all. "Equal weight" is not carried over, because the tile map it described is not part of
   this build; "Relative bands" is reworded, because these are six bands rather than quintiles. */
.gloss{margin:0;font-size:var(--t-ui-sm)}
.gloss dt{font-weight:600;color:var(--ink);margin-top:.6rem}
.gloss dt:first-child{margin-top:0}
.gloss dd{margin:.15rem 0 0;color:var(--muted);line-height:1.5}