@import url('https://fonts.googleapis.com/css2?family=Ancizar+Sans:ital,wght@0,100..1000;1,100..1000&display=swap');

/* LIONS dashboards - shared styles (identical across all dashboards). */
:root{--bg:#fbfbfb;--panel:#ffffff;--panel2:#ffffff;--ink:#212123;--mut:#6b6c68;--line:#e4e4e1;--accent:#eaf54c;--accent-ink:#212123}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{
  margin:0;
  background:var(--bg);color:var(--ink);
  font-weight: 400;
  font-family: 'Ancizar Sans', 'Arial', sans-serif;
  font:14px/1.5em 'Ancizar Sans', 'Arial', sans-serif;
}
.wrap{max-width:1120px;margin:0 auto;padding:18px 16px 44px}
.sub{color:var(--mut);font-size:14px;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:16px}
.controls{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.ctl{display:flex;flex-direction:column;gap:5px}
.ctl label{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);white-space:nowrap;height:14px;line-height:14px}
input[type=month],select,button{font:inherit;color:var(--ink);background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:7px 10px}
select,input[type=month],.ms-btn{font-size:15px;padding:8px 12px}
button{cursor:pointer}
.seg{display:flex;gap:6px}
.seg button:hover{border-color:var(--accent)}
.seg button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
/* .seg is flex-wrap:nowrap, so a seg wider than its container overflows the DOCUMENT rather than wrapping. The five Administration buttons need 321px at their own min-content widths; below 760px shell2.js folds .controls into the Filters panel,  which is 254px wide at a 320px viewport, so the row hung 34px off the right edge of all four dashboards. Wrapping is the only fix that leaves the type size, the padding and the labels alone. */
#presets{flex-wrap:wrap}
#presets button{padding:8px 12px;font-size:15px}
.ms{position:relative}
.ms-bar{display:flex;gap:14px;padding:2px 4px 6px;border-bottom:1px solid var(--line);margin-bottom:4px}
.ms-bar a{color:#3a3b37;font-size:11.5px;text-decoration:none}
.ms-search{width:100%;margin-bottom:6px;font:inherit;background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:6px 8px;color:var(--ink)}
.ms-list label:hover{background:var(--panel2)}
.ms-list input{accent-color:#212123}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:12px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.card h3{margin:0 0 6px;font-size:14px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.lg{display:flex;align-items:center;gap:5px}
.sw{width:11px;height:11px;border-radius:2px;display:inline-block}
#summary b{color:var(--ink);font-weight:600}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
th,td{padding:6px 9px;text-align:right;white-space:nowrap;border-bottom:1px solid #ececea}
th:first-child,td:first-child{text-align:left}
thead th{position:sticky;top:0;background:var(--panel);color:var(--mut);font-size:11px;text-transform:uppercase;z-index:2}
tbody tr:hover{background:#f5f5f3}
tr.edge td{color:#b0b1ac}
/* Provisional rows. #9a7b2e was 4.00:1 on #ffffff and 3.67:1 on the tbody tr:hover fill
   #f5f5f3 - both under WCAG 1.4.3's 4.5:1. #846826 is 5.26 / 5.09 / 4.82 on white, --bg and the hover fill. */
tr.recent td{color:#846826}
/* key columns read left, metrics read right */
th.k,td.k{text-align:left}
/* the first key column stays put while the metrics scroll sideways. thead th is already sticky-top, so the corner cell needs both axes and the highest z-index of the three. */
th.k:first-child,td.k:first-child{position:sticky;left:0;background:var(--panel);z-index:1}
td.k:first-child{box-shadow:1px 0 0 var(--line)}
thead th.k:first-child{z-index:3}

tr.rowtotal td{font-weight:600;border-top:2px solid var(--line)}
.sw-prov{width:11px;height:11px;border-radius:2px;display:inline-block;border:1px solid #cfd0cb;
  background:#dcdcd8;
  background-image:repeating-linear-gradient(45deg,transparent 0 3px,rgba(251,251,251,.90) 3px 4px),
                   repeating-linear-gradient(45deg,transparent 0 3px,rgba(33,33,35,.55) 3px 4px);
  background-position:0 0,2px 2px}
td .provmark{color:#9a9b96;font-size:11px;padding-left:3px}
.bottombar{display:flex;justify-content:flex-end;margin-top:10px}
.tabletoggle{margin:8px 0}
.disc{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 12px;font:inherit;font-size:13px;color:var(--ink);cursor:pointer}
.disc:hover{border-color:var(--accent)}
#dl,#dl2{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
/* a refused download must not go on reading as a live yellow call to action */
#dl:disabled,#dl2:disabled{background:var(--panel);border-color:var(--line);color:var(--mut);font-weight:400;cursor:not-allowed}
.foot{
    color:var(--mut);
    font-size:12px;
    margin-top:10px;
    border-top:1px solid var(--line);
    padding-top:10px;
    white-space: pre-line;
}
#status{display:block;color:var(--mut);font-size:12px}
#status:not(:empty){margin-top:10px}
#status.st-err{color:var(--ink);font-weight:600}
/* The dashboard nav, presentation. shared/config.js is the single source of truth for this component's CONTENT; this block is the single source of truth for its LOOK, and it */
.dashnav{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 16px}
.dashnav a{position:relative;font-size:14.5px;padding:8px 14px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);text-decoration:none;font-weight:600;overflow:hidden;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease,background .15s ease}
.dashnav a::after{content:"";position:absolute;left:10px;right:10px;bottom:6px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.dashnav a:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.10);border-color:#d7d7d3;background:var(--panel2);opacity:1}
.dashnav a:hover::after{transform:scaleX(1)}
.dashnav a.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.dashnav a.on::after{transform:scaleX(1);background:var(--accent)}
.nv-acc{border:1px solid var(--line);border-radius:12px;background:var(--panel);margin:0 0 12px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.nv-head{width:100%;display:flex;align-items:center;gap:10px;padding:11px 14px;background:var(--panel);border:0;cursor:pointer;font:inherit;text-align:left}
.nv-head:hover{background:var(--panel2)}
.nv-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);font-weight:700;flex:none}
.nv-cur{flex:1;font-weight:700;color:var(--ink);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nv-chev{color:var(--mut);transition:transform .2s;flex:none}
.nv-acc.open .nv-chev{transform:rotate(180deg)}
.nv-body{display:none;padding:10px 14px 12px;border-top:1px solid var(--line)}
.nv-acc.open .nv-body{display:block}
.nv-body .dashnav{margin:0}
.dashsel{display:none;font:inherit;font-size:14.5px;font-weight:600;color:var(--accent);background:var(--ink);border:1px solid var(--ink);border-radius:8px;padding:9px 12px;margin:2px 0 16px;width:100%;max-width:360px}
.preserve-breaks {
  white-space: pre-line; /* Keeps your manual line breaks and wraps text normally */
}

@media(max-width:600px){.dashnav{display:none}.dashsel{display:block}}

/* ── THE TOPLINE SECTION ─────────────────────────────────────────────────────── */
.kpis{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;margin-bottom:14px;box-shadow:0 1px 2px rgba(0,0,0,.04)}

/* THE CAPTION ROW. The caption tells a user this section is not the chart's filter bar */
.tf-cap{font-size:12px;color:var(--mut);margin-bottom:10px;display:flex;
  align-items:flex-start;justify-content:space-between;gap:10px}
.tf-captxt{min-width:0}

/* ── THE SECTION'S ONE PROVISIONAL MARK ────────────────────────────────────────────── */
.tf-provwrap{position:relative;flex:none;display:inline-flex}
.tf-prov{display:inline-flex;align-items:center;justify-content:center;width:26px;
  height:26px;padding:0;background:var(--panel);border:1px solid var(--line);
  border-radius:7px;cursor:pointer}
.tf-prov:hover{border-color:var(--ink)}
.tf-prov:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.tf-prov .sw-prov{width:14px;height:14px}
/* the bubble. */
.tf-tip{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap;margin:-1px;padding:0;border:0}
.tf-provwrap:hover .tf-tip,.tf-prov:focus-visible~.tf-tip,.tf-prov[aria-expanded="true"]~.tf-tip{
  position:absolute;top:calc(100% + 6px);right:0;left:auto;bottom:auto;
  width:max-content;max-width:min(320px,calc(100vw - 56px));height:auto;
  overflow:visible;clip-path:none;white-space:normal;margin:0;z-index:5;
  border-left:4px solid var(--ink);border-top:1px solid var(--line);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--panel);border-radius:0 8px 8px 0;padding:8px 10px;
  font-size:11.5px;line-height:1.4;color:var(--ink);text-align:left;
  box-shadow:0 8px 24px rgba(0,0,0,.14)}

/* the glance strip. A GRID rather than a flex row, because flex lets the last item on a wrapped row grow to fill it: measured in Chromium at 620px, three flex items came out 279/279/558 and the third read as a different kind of thing. The divider is a box-shadow rather than a border so the first column of EVERY row has no rule to its left: at -1px it falls outside the strip's box and is clipped by overflow:hidden. */
.tf-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:10px 0;overflow:hidden;margin:0 -14px}
.tf-stat{padding:2px 14px;box-shadow:-1px 0 0 var(--line)}
.tf-v{font-size:25px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.15}
.tf-v.big{font-size:31px}
.tf-v.muted-v{color:var(--mut)}
.tf-k{color:var(--ink);font-size:12.5px;margin-top:2px}
.tf-win{color:var(--mut);font-size:11.5px;margin-top:2px}
.tf-def{color:var(--mut);font-size:11.5px;margin-top:5px;line-height:1.35}
.tf-sub{color:var(--ink);font-size:13px;margin-top:2px}
.tf-foot{color:var(--mut);font-size:11.5px;margin-top:12px;border-top:1px solid var(--line);
  padding-top:9px;display:flex;align-items:flex-start;gap:6px}

/* the ask line and the answer block */
.tf-ask2{border-top:1px solid var(--line);margin-top:12px;padding-top:11px}
.tf-ask{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;font-size:13px;
  border:1px solid var(--line);border-radius:10px;padding:9px 11px;margin:0 0 10px}
/* a <select> is as wide as its widest option and does not shrink in a flex row, so a long option label pushes the section past the viewport. MEASURED at 390px before this line: one element escaped the section and the page scrolled sideways. */
.tf-ask select{font-size:12.5px;padding:6px 9px;max-width:100%;min-width:0}
.tf-ask button{font-size:12.5px;padding:6px 10px}
.tf-ask .lead{font-weight:600}
.tf-askline{flex:1 1 100%;margin:0}
.tf-addcmp{background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px 10px;
  font:inherit;font-size:12.5px;color:var(--ink)}
.tf-addcmp:hover{border-color:var(--ink)}
.tf-addcmp.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.tf-answer{border:1px solid var(--line);border-radius:10px;padding:11px 13px;background:#fff}
.tf-q{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);
  font-weight:700;margin-bottom:6px}
/* THE TWO PERIODS OF A COMPARISON ARE DIVIDED. The same grid-plus-box-shadow
   idiom .tf-strip already uses, for the same reason: auto-fit re-columns with no media query, and a box-shadow at -1px/-1px falls outside the container's own box and is  clipped by overflow:hidden, so the first cell of every ROW carries no rule. Side by side that draws a vertical hairline between the two periods and before the change; stacked on a phone the vertical rules are clipped at the left edge and the horizontal ones appear instead. One rule, two behaviours, no media query and no new colour: it is --line, the hairline the strip, the basis line and the answer border already use. The -13px margin matches .tf-answer's own 13px padding. .tf-delta's rule is deleted with
   the flex row it belonged to; the class stays on the change cell as a hook. */
.tf-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:12px 0;align-items:flex-start;margin:0 -13px 4px;overflow:hidden}
.tf-side{padding:0 13px;box-shadow:-1px 0 0 var(--line),0 -1px 0 var(--line)}
/* the figure's own label on each side of a pair. */
.tf-side .tf-fig{color:var(--mut);font-size:11.5px;margin-top:2px}
.tf-basis{font-size:12px;color:var(--ink);margin-top:8px;border-top:1px solid var(--line);padding-top:7px}
.tf-basis b{font-weight:700}
.tf-also{margin-top:10px;border-top:1px solid var(--line);padding-top:8px}
.tf-alsohd{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);
  font-weight:700;margin-bottom:5px}
.tf-other{display:flex;justify-content:space-between;gap:14px;font-size:12.5px;padding:2px 0;
  border-bottom:1px solid #f0f0ee}
.tf-other .ok{color:var(--mut);font-weight:400;font-size:12px}
.tf-value {font-size:13px}
.tf-other .os{color:var(--mut);font-weight:400;font-size:12px}
/* a flag that qualifies a figure: the fill encodes nothing (1.04:1 against the page) and the 4px charcoal rule carries it at 15.00:1 on the fill. */
.tf-flag{margin-top:8px;border-left:4px solid var(--ink);background:#fff9c4;
  border-radius:0 6px 6px 0;padding:6px 9px;font-size:11.5px;line-height:1.35;color:var(--ink)}
/* a refusal: the comparison asked for cannot be answered honestly on this period, so the section says so in words instead of printing a figure. */
.tf-refusal{margin-top:2px;border-left:4px solid var(--ink);background:#fff;
  border-radius:0 6px 6px 0;padding:6px 10px;font-size:12.5px;line-height:1.4;color:var(--ink)}
.ancizar-sans {
  font-family: "Ancizar Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

/* Consolidated page-level controls (moved from per-page CSS to reduce duplication) */
.masters{display:flex;flex-wrap:wrap;gap:22px;margin-bottom:12px}
.master{display:flex;flex-direction:column;gap:6px;margin:0 0 12px}
.master .ml{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut)}
.mini{font:inherit;font-size:12px;padding:5px 8px;background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:7px}
.ax2row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.chk{display:flex;align-items:center;gap:7px;padding-bottom:7px}
.chk label{font-size:12.5px;text-transform:none;letter-spacing:0;color:var(--ink)}
.ms-btn{min-width:150px;text-align:left}
.ms-panel{position:absolute;z-index:30;top:calc(100% + 4px);left:0;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:6px;overflow:auto;box-shadow:0 8px 24px rgba(0,0,0,.14)}
/* text-transform/letter-spacing are restored verbatim from styles/index.css, styles/agency.css and styles/declinations.css, which carried them until this rule was consolidated here and they were dropped. Without them .ctl label's uppercase inherits down onto the option rows, and because these labels are white-space:nowrap  and .ms-panel has no max-width the panel sizes to its widest label and grows ~34%, overflowing the viewport at 390 and 320. civil.html never carried them, so this moves civil's option labels to lowercase too - a knowing,accepted change for consistency, not a regression. */
.ms-list label{display:flex;align-items:center;gap:7px;padding:4px 6px;border-radius:6px;font-size:13px;text-transform:none;letter-spacing:0;color:var(--ink);cursor:pointer;white-space:nowrap}
.ms-dept{font-weight:600;margin-top:4px}
.ms-sub label{padding-left:22px;font-size:12.5px;color:#333}
#legend,#legend2,#legend3{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:8px;font-size:12px;color:var(--mut)}
.chartbox{position:relative;width:100%}
#summary{color:var(--mut);font-size:12.5px;margin:2px 2px}
.tblwrap{overflow:auto;border:1px solid var(--line);border-radius:12px;position:relative}
/* Restored verbatim from styles/index.css and styles/agency.css, which carried these two rules identically until the rest of the block moved here and these were dropped. The basis control row - "Program-category basis:" on index.html, "Agency basis:" on agency.html - is the only user of either. */
.occbar{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:12px;font-size:12.5px;color:var(--mut)}
.occhint{font-size:11.5px;color:var(--mut);opacity:.8}

/* ── The wide data table ─────────────────────────────────────────────────────────── ONE declaration of this block is deliberately NOT here: `.tblwrap{max-height:70vh}` at phone width. `.tblwrap`'s max-height is per-page and lives in each page's own stylesheet - index/agency/declinations 520px, civil 480px - and every page stylesheet  loads AFTER this file, so a media rule here at equal specificity would lose the cascade and never apply. It is in all four page stylesheets, beside the value each one overrides - styles/index.css, styles/civil.css, styles/agency.css and styles/declinations.css. */
/* the two shape controls - INSIDE the table panel, never a .wrap child with a
   controls/masters/master/occbar class, which shell2.js folds away below 760px */
.tbl-shape{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin:0 0 10px;font-size:12.5px}
.tbl-shape .grp{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0}
.tbl-shape .seg{flex-wrap:wrap}
.tbl-shape .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut)}
.tbl-shape button{font-size:12px;padding:5px 9px}
.tbl-shape button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.tbl-shape button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* the basis line and the refusal reuse the topline section's idioms, so the page has one vocabulary for "here is what this is" and "here is why there is no figure" */
.tbl-basis{font-size:12px;color:var(--ink);margin:0 0 8px;border-left:4px solid var(--ink);padding:6px 9px;background:#fff;border-radius:0 6px 6px 0}
.tbl-refusal{border-left:4px solid var(--ink);background:#fff;border-radius:0 6px 6px 0;padding:8px 10px;font-size:12.5px;line-height:1.4;color:var(--ink);margin:0 0 8px}
/* the one-line screen/file difference note, next to the download button */
.csvline{color:var(--mut);font-size:12px;margin:8px 0 0}
/* accessibility helper: visually-hidden but available to screen readers */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
.tf-bool{font-weight:600}
/* the table's own caveats, INSIDE the panel. Never #footnote: shell2.js replaces that element's whole innerHTML with one shared string on all four dashboards. */
.tbl-notes{color:var(--mut);font-size:11.5px;margin:8px 0 0}
.tbl-notes div{margin-top:3px}
.scrollhint{display:none;color:var(--mut);font-size:11.5px;margin:0 0 6px}
.tbl-pending{margin:0;padding:0;color:var(--mut);font-size:12.5px;line-height:1.4}
.tbl-pending:not(:empty){padding:10px 12px}
th.stock,td.stock{border-left:1px solid var(--line)}
/* the declinations table's reason columns partition the row's own total, exactly as the criminal table's five disposition columns do; the totals block is separated the same way */
th.tot,td.tot{border-left:1px solid var(--line)}
/* below 560px the two trap columns FOLD INTO the category cell rather than disappearing */
.kmeta{display:none}
.topbar{display:none}
@media(max-width:560px){
  .topbar{display:flex;justify-content:flex-start;margin:0 0 10px}
  .scrollhint{display:block}
  th.b,td.b{display:none}
  .kmeta{display:block;font-size:11px;color:var(--mut);font-weight:400}
  th.k,td.k{white-space:normal}
  td.k,th.k{max-width:120px}
  td.k:first-child{white-space:nowrap;max-width:none}
}