/* Operational shell: three reading roles, native flow on constrained screens. */
body.dashboard{font-size:1rem}
.dashboard{--text-body:1rem;--text-meta:.857rem;--text-display:1.714rem}
.dashboard .top-right{min-width:0;gap:8px}.dashboard .brand{max-height:none;overflow:visible}.dashboard .brand h1{font-size:var(--text-display);white-space:normal}.dashboard .country{font-size:var(--text-meta)}
.dashboard .reference-menu,.dashboard .map-tools{position:relative;min-width:0;z-index:1300}
.dashboard summary{cursor:pointer}.dashboard .reference-menu>summary,.dashboard .map-tools>summary{display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px 12px;border:1px solid var(--ink);font-size:var(--text-body);background:white}
.dashboard .reference-menu>div,.dashboard .map-tools>div{position:absolute;top:100%;right:0;width:240px;max-width:calc(100vw - 24px);background:white;border:2px solid var(--ink);padding:6px;display:grid;gap:6px;z-index:1400}
.dashboard .reference-menu:not([open])>div,.dashboard .map-tools:not([open])>div{display:none}
.dashboard .reference-menu .toplink,.dashboard .map-tools .btn{display:flex;align-items:center;justify-content:center;min-height:44px;font-size:var(--text-body);width:100%;margin:0}
.dashboard .langs button{height:auto;min-width:44px;min-height:44px;font-size:var(--text-body)}
.dashboard .search select{height:auto;min-height:44px;font-size:var(--text-body)}
.dashboard .map-chrome-toggle{display:none}
/* The map's tools are ONE set of controls. On the phone they drop from the bar as a panel
   (below, max-width:1100px). On the desktop they become items of the bar itself:
   display:contents dissolves the wrapper so its buttons join the band — the second row, which
   was 26% full and hid its emptiness in 205px of padding, is gone. */
.dashboard .quick-tools{display:contents}
.dashboard .quick-tools>.btn{font-size:var(--text-body);min-height:44px;padding:8px 12px;flex:0 1 auto}
.dashboard #startMap{display:none}.dashboard .kpis .unit{font-size:var(--text-body);font-weight:400;letter-spacing:0}.dashboard .kpis{overflow:visible}.dashboard .kpis dt,.dashboard .kpis small{font-size:var(--text-meta);line-height:1.5}.dashboard .kpis dd{font-size:var(--text-display);min-height:0;line-height:1.4}
.dashboard .hint,.dashboard .privacy,.dashboard .calc-block p,.dashboard .calc-block code,.dashboard .province-row small,.dashboard .feed-tier,.dashboard .world-item p,.dashboard .world-item>small,.dashboard .world-item a,.dashboard .map-caption span{font-size:var(--text-meta)!important;line-height:1.6}
.dashboard .tab-body p,.dashboard .field,.dashboard .tabs,.dashboard .calc-block h3,.dashboard .world-item h3,.dashboard .select-actions .btn{font-size:var(--text-body)}
.dashboard .calc-answer,.dashboard .world-value{font-size:var(--text-display)}
.dashboard .stage{min-width:0}.dashboard .map-wrap,.dashboard .rail,.dashboard .world-rail{min-width:0}
.dashboard .foot{display:block;background:white;border-top:2px solid var(--ink);margin-top:24px;padding:12px 0;font-size:var(--text-meta)}
.dashboard .foot .brand-strip{background:white;margin-bottom:12px}.dashboard .foot .release-note{display:block;margin-bottom:8px}
.dashboard .about-inner{min-height:0}.dashboard .about-links{flex-wrap:wrap}
@media(min-width:1101px){body.dashboard{height:100dvh;min-height:640px;grid-template-rows:auto auto minmax(0,1fr);overflow:hidden}.dashboard .stage{grid-template-columns:230px minmax(320px,1fr) 350px}.dashboard .bottom-nav{display:none}.dashboard .rail,.dashboard .map-wrap,.dashboard .world-rail{height:100%;min-height:0}.dashboard .map-wrap{display:block}.dashboard .rail{display:flex}.dashboard[data-about] .about{height:100%;overflow:auto}}
/* ONE band on the desktop too. The assessment switcher used to float at the viewport's
   bottom-right corner, roughly 880px from the map tools it belongs beside; the bar now holds
   everything. The bar's controls are a dense text group, so they keep label-plus-padding
   boxes at the design system's own --control-block (28px fine pointer) — MSH wins over the
   44px rule for dense groups. The place selector is never the control that gives up width. */
@media(min-width:1101px){
 body.dashboard>.top{display:flex;align-items:center;gap:8px 12px;padding:6px 16px;position:relative;z-index:1300;border-bottom:1px solid var(--ink)}
 .dashboard .workspace-bar{flex:1 1 auto;min-width:0;min-height:0;border-bottom:0;padding-block:0}
 .dashboard .workspace-bar .search{min-width:160px}
 /* The brand column sizes to the mark and wordmark; a fixed 140px floor made the selector slide under Read at 1101px. */
 .dashboard .workspace-bar{grid-template-columns:max-content minmax(160px,380px) max-content;justify-content:start}
 .dashboard .quick-tools>.btn,.dashboard .quick-tools .map-tools>summary{font-size:var(--text-meta);padding:2px 10px;white-space:nowrap}
 .dashboard .top>.advanced-tools{order:2;position:relative;right:auto;bottom:auto;flex:0 0 auto;z-index:1300;font-size:var(--text-meta)}
 .dashboard .top>.advanced-tools>summary{font-size:var(--text-meta);padding:2px 10px;white-space:nowrap}
}

.dashboard .reference-menu #guideLink{display:flex}
/* The world feeds are context for the selection, not its readout. Shown by default they took 230px from
   the map and held it to 51% of a 1440x900 screen; the law asks 60%. They open as the left column on request. */
.dashboard .world-toggle{display:none}
@media(min-width:1101px){
 .dashboard .world-toggle{display:inline-flex;align-items:center}
 .dashboard .world-toggle[aria-expanded=true]{background:var(--signal)}
 body.dashboard:not([data-world-open]) .stage{grid-template-columns:minmax(320px,1fr) 350px}
 body.dashboard:not([data-world-open]) .stage>.world-rail{display:none}
 /* The figures' edges land on the columns below them: the last figure sits over the selection rail. */
 body.dashboard .kpis{grid-template-columns:repeat(3,minmax(0,1fr)) 350px}
 body.dashboard[data-world-open] .kpis{grid-template-columns:230px repeat(2,minmax(0,1fr)) 350px}
}
/* Between 1101 and 1279px one band cannot hold the wordmark, the place selector and every tool: the
   bar's grid columns overran each other (the selector slid under Read). The mark carries identity there;
   the heading text stays for screen readers. */
@media(min-width:1101px) and (max-width:1279px){.dashboard .brand h1{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}body.dashboard>.top{column-gap:6px;padding-inline:12px}.dashboard .workspace-bar{column-gap:6px}.dashboard .quick-tools>.btn,.dashboard .quick-tools .map-tools>summary,.dashboard .top>.advanced-tools>summary{padding-inline:6px}}
@media(max-width:1100px){
 body.dashboard{height:auto;min-height:100dvh;display:block;overflow:auto;padding-bottom:var(--nav-space,64px)}
 .dashboard .top{display:flex;flex-wrap:wrap;align-items:center;padding:0 12px;gap:0;position:relative}
 /* The phone header is ONE band. The map's tools were a second row of three buttons under the
    bar, which pushed the map a third of the way down the screen for furniture the reader
    opens once. They drop from the bar as a panel instead, opened by one control. */
 .dashboard .quick-tools{position:absolute;top:100%;left:0;right:0;z-index:1200;display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:0;padding:8px 12px;background:#fff;border-bottom:2px solid var(--ink)}
 .dashboard .quick-tools>.map-tools{grid-column:1/-1}
 .dashboard .top.map-chrome-open .quick-tools{display:grid}
 .dashboard .map-chrome-toggle{display:flex;align-items:center;justify-content:center;min-height:var(--control-block);min-width:44px;padding:2px 8px;border:1px solid var(--ink);background:white;color:var(--ink);font-size:var(--text-meta);font-weight:400;line-height:1.4;white-space:nowrap}
 /* The signal colour in this design system means "pressed". A toggle that is collapsed and
    painted in it would claim a state it is not in, and would outweigh the place selector,
    which is the control the numbers actually belong to. */
 .dashboard .map-chrome-toggle[aria-expanded=true]{background:var(--signal)}
 /* On the narrowest phones the bar cannot hold the word and the place selector: the selector
    says which place the numbers belong to, and it is not allowed to be clipped for the sake
    of a label. The control keeps its accessible name and draws itself as a stack of layers. */
 @media(max-width:380px){
  .dashboard .map-chrome-toggle{font-size:0;min-width:var(--control-block);padding:0 6px}
  .dashboard .map-chrome-toggle::before{content:'';display:block;width:16px;height:12px;background:linear-gradient(currentColor 0 0) 0 0/16px 3px no-repeat,linear-gradient(currentColor 0 0) 0 4px/16px 3px no-repeat,linear-gradient(currentColor 0 0) 0 8px/16px 3px no-repeat}
  /* The place selector has to show the place. The space it needs comes out of the controls
     that have slack in it — the language pair's padding, the gaps between the bar's groups
     and the selector's own padding — and not out of the selector. */
 }
 /* Leaflet's own zoom buttons are 30px. A thumb is not a mouse: on a touch screen they join
    the rest of the phone's controls at the same 36px the design system sets everywhere else. */
 @media(pointer:coarse){.dashboard .leaflet-control-zoom a,.dashboard .leaflet-control-zoom .leaflet-bar a{width:36px;height:36px;line-height:36px}}
 .dashboard .brand{order:0;flex:1 1 150px}.dashboard .brand h1{font-size:1.43rem}.dashboard .brand .country{display:none}
 .dashboard .kabonna-mark{width:32px;height:32px;flex-basis:32px}
 .dashboard .top-right{order:1;flex:0 1 auto;flex-wrap:wrap}.dashboard .reference-menu>summary{padding:6px 8px}
 .dashboard .search{order:2;flex:1 0 100%;width:100%}
 .dashboard .quick-tools>.btn,.dashboard .map-tools>summary{font-size:var(--text-meta);line-height:1.5;min-height:44px;padding:6px}
 .dashboard .advanced-tools{display:none}.dashboard .kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;border-bottom:1px solid var(--ink)}
 .dashboard .kpis dl{min-width:0;padding:6px 12px;margin:0}.dashboard .kpis dl:nth-child(3){border-left:2px solid var(--ink)}
 /* A phone held the four figures in a strip that scrolled sideways: absorption and emission, the
    pair this map exists to show, sat off-screen with nothing saying they were there. Two by two,
    every figure is on the first screen and the pairs read as pairs: what is here, what it does. */
 @media(max-width:700px){.dashboard .kpis{grid-template-columns:1fr 1fr}.dashboard .kpis dl{min-width:0;border-bottom:1px solid var(--rule)}.dashboard .kpis dl:nth-child(3){border-left:0}}
 .dashboard .stage{display:block;position:relative;height:auto;min-height:0}
 .dashboard .stage .map-wrap{height:max(340px,calc(100dvh - 290px));min-height:340px;width:100%}
 .dashboard .stage .rail,.dashboard .stage .world-rail{display:none;width:100%;height:auto;max-height:none;overflow:visible}
 .dashboard[data-view=rail] .stage .map-wrap,.dashboard[data-view=world] .stage .map-wrap{display:none}
 .dashboard[data-view=map] .stage .map-wrap{display:block}.dashboard[data-view=rail] .stage .rail{display:flex}.dashboard[data-view=world] .stage .world-rail{display:block}
 .dashboard .tab-body{overflow:visible;height:auto}
 /* With the bottom nav on screen, the panel's black title band repeated the active tab's name
    above every panel, and on the Carbon tab named a map that is not on screen. It stays for
    screen readers. */
 .dashboard .stage .tabs{position:absolute;width:1px;height:1px;min-height:0;padding:0;overflow:hidden;clip-path:inset(50%);border:0;white-space:nowrap}
 .dashboard .bottom-nav{display:flex;flex-wrap:wrap;position:fixed;bottom:0;left:0;right:0;z-index:2000;min-height:56px;background:var(--ink);padding-bottom:env(safe-area-inset-bottom);border-top:1px solid white;overflow:visible}
 /* The fixed bottom nav sat exactly on top of the map's Leaflet attribution. The OpenStreetMap
    credit was invisible AND unclickable on the phone, because the nav's own button was what the
    hit test returned at the attribution's centre. The nav is furniture and the credit is the work,
    so the map's bottom controls now clear the nav's occupied area instead of hiding under it.
    The nav is 56px plus the device's safe-area inset. */
 .dashboard .leaflet-bottom{bottom:calc(56px + env(safe-area-inset-bottom))}
 .dashboard .bottom-nav>button,.dashboard .bottom-nav>.more-nav{flex:1 1 max(20%,4rem);width:auto;min-width:0}
 .dashboard .bottom-nav button{background:transparent;border:0;font-size:var(--text-meta);min-height:56px;min-width:0;padding:6px 3px;color:white;white-space:normal;overflow-wrap:normal;word-break:normal;line-height:1.5}
 .dashboard .bottom-nav button[aria-pressed=true]{background:var(--signal);color:var(--ink);border:0}
 .dashboard .more-nav{position:relative;color:white}.dashboard .more-nav>summary{display:flex;align-items:center;justify-content:center;min-height:56px;padding:6px;font-size:var(--text-meta);height:100%}
 .dashboard .more-nav>div{position:absolute;bottom:100%;right:0;width:220px;max-height:calc(100dvh - var(--nav-space,64px) - 12px);overflow:auto;border:2px solid var(--ink);background:var(--ink);display:grid;padding:4px;gap:4px}
 .dashboard .more-nav:not([open])>div{display:none}.dashboard .more-nav>div button{width:100%;font-size:var(--text-body);min-height:44px;flex:none}
 .dashboard .more-nav:has(button[aria-pressed=true])>summary{background:var(--signal);color:var(--ink);border-top:3px solid var(--ink)}
 .dashboard .about{overflow:visible;max-height:none;height:auto}.dashboard .about-inner{padding:16px 12px 24px}
 .dashboard .overlay-legend{font-size:var(--text-meta);max-width:calc(100% - 80px);max-height:45%;overflow:auto}.dashboard .layer-panel{max-width:calc(100% - 24px);max-height:75%}
 .dashboard .reference-preview dl{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.dashboard .reference-preview dt,.dashboard .reference-preview dd{overflow-wrap:anywhere}
}
@media(max-width:360px){.dashboard .brand h1{font-size:1.28rem}.dashboard .brand{gap:6px}.dashboard .top-right{gap:4px}}
@media print{.dashboard .reference-menu,.dashboard .map-tools{display:none}.dashboard .foot{display:block}}

/* The map is the coloured instrument. Supporting feeds use neutral structure. */
.dashboard .world-rail{--ink:#161616;--ink-mid:#383838;--ink-low:#595959;--rule:#ccc;--rule-strong:#161616;background:#f0f0ee;color:var(--ink)}
.dashboard .world-heading{background:transparent}.dashboard .world-heading h2,.dashboard .world-item h3,.dashboard .world-value,.dashboard .world-value small{color:var(--ink)}
.dashboard .world-heading .btn{color:var(--ink)}.dashboard .world-item a{color:var(--ink)}.dashboard .world-item svg{color:var(--ink)}
.dashboard #exploreProvinces{background:var(--structure);color:white;border-color:var(--structure)}
.dashboard .tab-body>.btn,.dashboard .tab-body .actions>.btn{width:auto;flex:0 1 auto}
/* Tree cover lost each year: ink for loss outside plantations, a pale tone for plantation harvest. No new accent. */
.loss-figure{margin:8px 0}.loss-chart{display:block;width:100%;height:96px}.loss-chart line{stroke:var(--rule-strong);stroke-width:1;vector-effect:non-scaling-stroke}
.loss-natural{fill:var(--ink)}.loss-plantation{fill:#cfccc2}
.loss-axis{display:flex;justify-content:space-between;font-size:var(--text-meta);color:var(--ink-mid)}
.loss-figure figcaption{font-size:var(--text-meta);color:var(--ink-mid);margin-top:4px}
.loss-key{display:inline-block;width:10px;height:10px;margin:0 4px 0 0;vertical-align:-1px}.loss-key-natural{background:var(--ink)}.loss-key-plantation{background:#cfccc2;margin-left:10px}
.loss-facts{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;margin:8px 0;font-size:var(--text-meta)}.loss-facts dt{color:var(--ink-mid)}.loss-facts dd{margin:0;font-family:var(--num);text-align:right}
.loss-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
/* The ranking was the first expansion: a full-width select, full-width prose and name and number 740px apart cost 7.9 screens at 1024. */
.province-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.province-head h2{margin:0}
#provinceBrowser .field select{width:max-content;max-width:100%}
#provinceRanking{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));column-gap:16px}
#provinceRanking .hint{grid-column:1/-1;max-width:65ch;margin:0 0 4px}
.dashboard .province-row{padding:5px 4px;row-gap:0;align-content:center}
.dashboard .province-row:nth-child(even):not(:hover):not(:focus-visible){background:transparent}
/* The ranking is read against the map and the national KPI band says nothing about it, so the band gives way. */
@media(max-width:1100px){.dashboard[data-provinces=open] .kpis,.dashboard[data-provinces=open] .verdict{display:none}}
/* A tablet is a small desktop, not a stretched phone: the panel keeps its reading width and the map stays beside it. */
@media(min-width:768px) and (max-width:1100px){
 body.dashboard[data-view=rail]:not([data-about]){display:flex;flex-direction:column;height:100dvh;overflow:hidden}
 .dashboard[data-view=rail]:not([data-about]) .stage{display:grid;grid-template-columns:minmax(0,1fr) 340px;flex:1;min-height:0}
 .dashboard[data-view=rail]:not([data-about]) .stage .map-wrap{display:block;height:100%;min-height:0}
 .dashboard[data-view=rail]:not([data-about]) .stage .rail{height:100%;min-height:0;overflow:hidden}
 .dashboard[data-view=rail]:not([data-about]) .tab-body{height:100%;overflow:auto}
}
.stock-block h4,.loss-block h4{margin:8px 0 0;font-size:var(--text-meta);font-weight:600}
.stock-strip{display:flex;height:12px;margin:6px 0}
.loss-actions .btn.small{font-size:var(--text-meta)}
.stock-block summary{display:flex;align-items:center;width:max-content;min-height:32px}
/* A date field is several segments plus a calendar button. On the button the input is neither :focus nor :focus-visible,
   only :focus-within, so the ring vanished for the keyboard reader. */
.dashboard input[type=date]:focus-within{outline:3px solid var(--focus);outline-offset:3px}
/* A wrapped label must not drop its field below its neighbour's: pairs share the fields' bottom edge. */
.dashboard .pair{align-items:end}