/* =====================================================================
   Michigan Juvenile Data Dashboard
   Design system implementing the State of Michigan Digital Guidelines
   (v5.5.0): Montserrat type, teal/navy brand palette, UI status colors,
   neutral ramp, WCAG 2.1 AA targets (4.5:1 text, 3:1 large text/UI).
   ===================================================================== */

:root {
  /* --- Brand --------------------------------------------------------- */
  --primary:        #277C78;   /* teal  - interactive / primary actions  */
  --primary-hover:  #1d605d;   /* dark teal for hover                    */
  --light-teal:     #61C8AF;   /* accents on navy                        */
  --secondary:      #142D3E;   /* navy  - headers bar, focus, selected   */
  --secondary-2:    #1f4257;

  /* --- UI status (meaning only, never decorative) -------------------- */
  --success:        #0D8252;  --success-bg: #EAFBEB;
  --warning:        #E5A612;  --warning-bg: #FFEFCA;  --warning-text:#AE5400;
  --error:          #B30518;  --error-bg:   #FFE8E3;
  --info:           #0077A7;  --info-bg:    #E3F7FF;

  /* --- Neutrals ------------------------------------------------------ */
  --header-copy:    #161618;
  --body-copy:      #353535;
  --caption:        #707070;
  --border:         #D0D0D0;
  --alt-bg:         #F7F7F7;
  --smoke:          #EAF1F4;
  --white:          #ffffff;

  /* --- Sequential region ramp (brand-derived, categorical groupings) - */
  --reg1:#cfe8e3; --reg2:#8fd0c4; --reg3:#4ea99c; --reg4:#277C78; --reg5:#1d5d63; --reg6:#142D3E;

  /* --- Type & metrics ----------------------------------------------- */
  --font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ls: 0.3px;
  --radius: 6px;
  --shadow: 0 1px 3px rgba(20,45,62,.12), 0 1px 2px rgba(20,45,62,.08);
  --shadow-lg: 0 4px 16px rgba(20,45,62,.14);
  --maxw: 1180px;
}

/* --- Reset / base ---------------------------------------------------- */
* { box-sizing: border-box; }
html { font-size: 100%; }                 /* 1rem = 16px, user-scalable  */
body {
  margin: 0; font-family: var(--font); letter-spacing: var(--ls);
  color: var(--body-copy); background: var(--alt-bg); line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4 { color: var(--header-copy); font-weight: 700; line-height: 1.2; margin: 0 0 .4em; }
h1 { font-size: 1.6rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; } h4 { font-size: .95rem; }
p { margin: 0 0 .75rem; }
a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--primary-hover); }
:focus-visible { outline: 3px solid var(--secondary); outline-offset: 2px; border-radius: 3px; }

.skip-link {
  position:absolute; left:-999px; top:0; background:var(--secondary); color:#fff;
  padding:.6rem 1rem; z-index:100; border-radius:0 0 var(--radius) 0;
}
.skip-link:focus { left:0; }

/* --- Header ---------------------------------------------------------- */
/* State-style header: white bar, teal logo tile with the white Michigan mark. */
.site-header { background:#fff; border-bottom:1px solid var(--border); }
.site-header .bar { max-width: var(--maxw); margin:0 auto; padding: .7rem 1.25rem;
  display:flex; align-items:center; gap:.85rem; flex-wrap:wrap; }
.site-header .logo-box { flex:0 0 auto; width:52px; height:52px; border-radius:8px;
  background: var(--primary); display:flex; align-items:center; justify-content:center; }
.site-header .logo-box img { width:34px; height:40px; display:block; }
.site-header .brand { display:flex; flex-direction:column; line-height:1.15; }
.site-header .brand h1 { color: var(--header-copy); font-size:1.3rem; margin:0; }
.site-header .brand .subtitle { font-size:.82rem; color: var(--caption); letter-spacing:.2px; }
.site-header .asof { margin-left:auto; font-size:.78rem; color: var(--caption); text-align:right; }
.site-header .asof strong { color: var(--header-copy); }
.site-header .asof a { color: var(--primary); font-weight:600; text-decoration:none; }
.site-header .asof a:hover { text-decoration:underline; }

/* --- Tab navigation -------------------------------------------------- */
.tabs { background: var(--white); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:30; }
/* Tabs wrap onto multiple rows instead of scrolling — no horizontal scrollbar. */
.tabs .inner { max-width: var(--maxw); margin:0 auto; display:flex; flex-wrap:wrap; gap:.1rem .2rem;
  padding: .15rem .75rem; }
.tab {
  appearance:none; border:none; background:none; font-family:inherit; letter-spacing:var(--ls);
  padding: .7rem .8rem; font-size:.85rem; font-weight:600; color: var(--caption);
  border-bottom: 3px solid transparent; cursor:pointer; white-space:nowrap;
}
.tab:hover { color: var(--header-copy); background: var(--smoke); }
.tab[aria-selected="true"] { color: var(--primary); border-bottom-color: var(--primary); }

/* --- Layout ---------------------------------------------------------- */
main { max-width: var(--maxw); margin: 0 auto; padding: 1.25rem; }
.view-head { margin-bottom: 1rem; }
.view-head .kicker { font-size:.72rem; text-transform:uppercase; letter-spacing:1.2px;
  color: var(--primary); font-weight:700; }
.view-head .view-title { font-size:1.5rem; margin:.1rem 0 .45rem; }
.lead { max-width: 70ch; color: var(--body-copy); }

.grid { display:grid; gap:1rem; }
.cols-2 { grid-template-columns: 1fr 1fr; }
.cols-3 { grid-template-columns: repeat(3,1fr); }
.sidebar-layout { grid-template-columns: 280px 1fr; align-items:start; }
@media (max-width: 860px){ .cols-2,.cols-3,.sidebar-layout { grid-template-columns:1fr; } }

/* --- Cards ----------------------------------------------------------- */
.card { background: var(--white); border:1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1rem 1.1rem; }
.card > h3 { margin-top:0; }
.card .sub { font-size:.8rem; color: var(--caption); margin-top:-.25rem; }

/* --- Filter panel ---------------------------------------------------- */
.filters { background: var(--white); border:1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1rem; position:sticky; top:64px; }
.filters .field { margin-bottom: 1rem; }
.filters label, .field-label { display:block; font-size:.78rem; font-weight:700; color:var(--header-copy);
  text-transform:uppercase; letter-spacing:.6px; margin-bottom:.4rem; }

/* segmented control (region framework) */
.segment { display:inline-flex; border:1px solid var(--border); border-radius: var(--radius); overflow:hidden; }
.segment button { appearance:none; border:none; background:var(--white); font-family:inherit;
  letter-spacing:var(--ls); padding:.5rem .8rem; font-size:.82rem; font-weight:600; color:var(--body-copy);
  cursor:pointer; }
.segment button + button { border-left:1px solid var(--border); }
.segment button[aria-pressed="true"] { background: var(--secondary); color:#fff; }

/* radio chips */
.chips { display:flex; flex-wrap:wrap; gap:.4rem; }
.chip { display:inline-flex; align-items:center; gap:.35rem; border:1px solid var(--border);
  border-radius: 999px; padding:.35rem .7rem; font-size:.82rem; cursor:pointer; background:#fff; }
.chip input { accent-color: var(--secondary); }
.chip:has(input:checked) { border-color: var(--secondary); background: var(--smoke); font-weight:600; }

select, .select {
  width:100%; font-family:inherit; letter-spacing:var(--ls); font-size:.9rem; color:var(--body-copy);
  padding:.55rem .6rem; border:1px solid var(--border); border-radius: var(--radius); background:#fff;
}
select:focus { border-color: var(--secondary); }
input[type="range"]{ width:100%; accent-color: var(--primary); }

.btn { appearance:none; font-family:inherit; letter-spacing:var(--ls); font-weight:700; cursor:pointer;
  border-radius: var(--radius); padding:.55rem .9rem; font-size:.85rem; border:1px solid var(--primary);
  background: var(--primary); color:#fff; }
.btn:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn.secondary { background:#fff; color: var(--primary); }

/* --- Badges & alerts ------------------------------------------------- */
.badge { display:inline-flex; align-items:center; gap:.35rem; font-size:.72rem; font-weight:700;
  padding:.2rem .5rem; border-radius:999px; border:1px solid; }
.badge.ok   { color: var(--success); background: var(--success-bg); border-color: var(--success); }
.badge.bad  { color: var(--error);   background: var(--error-bg);   border-color: var(--error); }
.badge.warn { color: var(--warning-text); background: var(--warning-bg); border-color: var(--warning); }
.badge.info { color: var(--info); background: var(--info-bg); border-color: var(--info); }

.alert { border:1px solid var(--info); background: var(--info-bg); border-left-width:5px;
  border-radius: var(--radius); padding:.7rem .9rem; font-size:.85rem; color:#0a3a4f; }
.alert .ttl { font-weight:700; display:block; margin-bottom:.15rem; }

/* --- KPI stat boxes -------------------------------------------------- */
.stats { display:grid; grid-template-columns: repeat(4,1fr); gap:1rem; }
@media (max-width:760px){ .stats { grid-template-columns: repeat(2,1fr);} }
.stat { background: var(--white); border:1px solid var(--border); border-top:4px solid var(--primary);
  border-radius: var(--radius); padding: .9rem 1rem; box-shadow: var(--shadow); }
.stat .label { font-size:.74rem; font-weight:700; color: var(--caption); text-transform:uppercase; letter-spacing:.5px; }
.stat .value { font-size:1.8rem; font-weight:800; color: var(--header-copy); line-height:1.1; margin-top:.2rem; }
.stat .foot { font-size:.72rem; color: var(--caption); margin-top:.25rem; }

/* --- Tables ---------------------------------------------------------- */
.tbl-wrap { overflow:auto; border:1px solid var(--border); border-radius: var(--radius); background:#fff; }
/* Two county panels side by side (Summary by Sex). Their headers differ in height — one
   has a longer caption and a legend — so giving both scroll boxes the same fixed height
   still leaves their bottoms misaligned. Instead let the card fix the row height and the
   scroll box take whatever is left, so the two boxes start and end together. */
.grid.cols-2 > .card.panel { display:flex; flex-direction:column; max-height:640px; }
.grid.cols-2 > .card.panel > .tbl-wrap { flex:1 1 auto; min-height:0; }
table.data { border-collapse: collapse; width:100%; font-size:.82rem; }
table.data caption { text-align:left; padding:.6rem .8rem; font-weight:700; color:var(--header-copy); }
table.data th, table.data td { padding:.4rem .55rem; text-align:right; border-bottom:1px solid var(--smoke); }
table.data thead th { position:sticky; top:0; background: var(--secondary); color:#fff; font-size:.72rem;
  text-transform:uppercase; letter-spacing:.4px; z-index:1; }
table.data tbody th { text-align:left; font-weight:600; color:var(--header-copy); background:var(--alt-bg);
  position:sticky; left:0; }
table.data tbody tr:hover td { background: var(--smoke); }
.num { font-variant-numeric: tabular-nums; }
.masked { color: var(--caption); }

/* --- Icons (IBM Carbon, inline) ------------------------------------- */
.ico { display:inline-block; vertical-align:middle; flex:0 0 auto; }
.badge .ico { margin-right:.1rem; }
.use-notes summary .ico { color: var(--info); margin-right:.25rem; }

/* --- Legend ---------------------------------------------------------- */
.legend { display:flex; flex-wrap:wrap; gap:.6rem 1rem; font-size:.78rem; color:var(--body-copy); margin:.5rem 0; }
.legend .item { display:inline-flex; align-items:center; gap:.4rem; }
.legend .swatch { width:14px; height:14px; border-radius:3px; display:inline-block; border:1px solid rgba(0,0,0,.1); }

/* --- Overflow safety (grid/flex children must be allowed to shrink) -- */
.grid { min-width:0; }
.card, .spark-cell, .stat, aside.filters { min-width:0; overflow-wrap:break-word; }
.card { overflow:hidden; }

/* --- Charts ---------------------------------------------------------- */
.chart { width:100%; height:auto; display:block; max-width:100%; }
/* Horizontal scroller for charts whose x-axis grows over time (see CH.scrollX).
   overscroll-behavior-x keeps a sideways swipe inside the chart instead of
   triggering browser back-navigation. */
.chart-scroll { overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; }
.chart text { font-family: var(--font); letter-spacing: var(--ls); fill: var(--body-copy); }
.axis line, .axis path { stroke: var(--border); }
.gridline { stroke: var(--smoke); }
.spark-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap:.5rem; }
.spark-cell { border:1px solid var(--border); border-radius: var(--radius); padding:.4rem .5rem; background:#fff; }
.spark-cell { overflow:hidden; }
.spark-cell .name { font-size:.74rem; font-weight:600; color:var(--header-copy); display:flex;
  justify-content:space-between; align-items:center; gap:.3rem; min-width:0; }
.spark-cell .name > span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.spark-cell .badge { flex:0 0 auto; }
.sm-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:.75rem; }
@media (max-width:760px){ .sm-grid { grid-template-columns:1fr; } }

/* --- Map ------------------------------------------------------------- */
.map-wrap { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:.5rem; }
.county { stroke:#fff; stroke-width:.5; }
.county:hover { stroke: var(--secondary); stroke-width:1.2; }
.county:focus, .county:focus-visible { stroke: var(--secondary); stroke-width:2; outline:none; }

/* --- Tooltip --------------------------------------------------------- */
.tooltip { position:fixed; pointer-events:none; background: var(--secondary); color:#fff;
  font-size:.76rem; padding:.4rem .55rem; border-radius:5px; box-shadow: var(--shadow-lg);
  z-index:80; max-width:240px; opacity:0; transition:opacity .08s; }
.tooltip strong { color: var(--light-teal); }

/* --- Notes / info ---------------------------------------------------- */
.notebox { border:1px dashed var(--border); border-radius: var(--radius); padding:.75rem .9rem;
  background: var(--alt-bg); font-size:.84rem; }
details.use-notes summary { cursor:pointer; font-weight:600; color: var(--primary); }
.help-icon { display:inline-flex; width:1.15rem; height:1.15rem; border-radius:50%; background:var(--info);
  color:#fff; font-size:.72rem; align-items:center; justify-content:center; font-weight:700; cursor:help; }

/* --- Footer ---------------------------------------------------------- */
.site-footer { border-top:1px solid var(--border); background:#fff; margin-top:2rem; }
.site-footer .inner { max-width: var(--maxw); margin:0 auto; padding:1.25rem; font-size:.78rem; color:var(--caption); }

.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; }
.muted { color: var(--caption); }
.right { text-align:right; } .center{ text-align:center; }
hr.soft { border:none; border-top:1px solid var(--border); margin:1.25rem 0; }