/* The inspections page (/inspections), on top of styles.css: official figures, Telangana's drives
   month by month, what inspectors find, and how it was counted. Built by scripts/build-inspections.mjs. */

/* ── The head and its three figures ── */
.ins-hero { padding-block: var(--space-3xl) var(--section-gap-s); }
.ins-hero__copy { display: grid; gap: var(--space-lg); max-width: 46rem; margin-bottom: var(--space-3xl); }
.ins-hero__copy h1 { max-width: 20ch; font-size: clamp(2.5rem, 4vw + 0.75rem, 4.5rem); line-height: 1; overflow-wrap: break-word; min-width: 0; }
.ins-hero__asof { margin-top: var(--space-xl); font-size: var(--text-sm); color: var(--color-muted); }
.ins-hero__asof a, .caveat a, .drive__src a, .about a { color: inherit; text-underline-offset: 3px; }
.ins-hero__asof a:hover, .caveat a:hover, .drive__src a:hover, .about a:hover { color: var(--color-ink); }
.ins-hero a:focus-visible, .ins-section a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ── Sections ── */
.ins-section { padding-block: var(--section-gap-s); }
.ins-section--tint { background: var(--color-paper-3); }
.caveat { margin-top: var(--space-xl); max-width: 52ch; font-size: var(--text-sm); color: var(--color-muted); }

/* Telangana: the months as columns beside the year's tally */
.tg { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-3xl); align-items: end; }
.chart { margin: 0; display: grid; gap: var(--space-xl); }
.chart__title { font-weight: 500; color: var(--color-ink-2); }
.cols { position: relative; height: 320px; padding-left: 2.75rem; }
.cols__grid { position: absolute; top: 0; right: 0; bottom: 3rem; left: 2.75rem; }
.cols__tick { position: absolute; left: 0; right: 0; bottom: calc(var(--at) * 100%); border-top: var(--rule-hair) solid var(--color-grid-strong); }
.cols__tick:first-child { border-top-color: var(--color-ink-2); }
.cols__tick span { position: absolute; right: calc(100% + var(--space-xs)); top: 0; translate: 0 -50%; font: 400 var(--text-xs)/1 var(--font-outlier); font-variant-numeric: tabular-nums; color: var(--color-muted); }
.cols__marks { position: relative; height: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); list-style: none; margin: 0; padding: 0; }
.col { display: grid; grid-template-rows: minmax(0, 1fr) 3rem; justify-items: center; border-radius: 4px; }
.col:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.col__plot { position: relative; width: 100%; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.col__bar { position: relative; width: min(24px, 60%); height: calc(var(--v) * 100%); border-radius: 4px 4px 0 0; background: var(--color-accent); transition: background-color var(--dur-micro) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .col:hover .col__bar { background: var(--color-accent-hover); } }
.col:focus-visible .col__bar { background: var(--color-accent-hover); }
.col__val { position: absolute; bottom: calc(100% + var(--space-2xs)); left: 50%; translate: -50% 0; font: 500 var(--text-sm)/1 var(--font-body); color: var(--color-ink); white-space: nowrap; }
.col__x { align-self: start; display: grid; justify-items: center; padding-top: var(--space-xs); font-size: var(--text-xs); line-height: 1.3; color: var(--color-muted); white-space: nowrap; }
.col__q { display: none; }
.col__year { color: var(--color-ink-2); font-weight: 500; }
.chart__note { font-size: var(--text-sm); color: var(--color-muted); }
.tally { margin: 0; border-top: var(--rule-hair) solid var(--color-ink); }
.tally div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.tally dt { color: var(--color-ink-2); }
.tally dd { margin: 0; font-size: var(--text-xl); font-weight: 500; }

/* A table of the same figures, folded */
.data { margin-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.data summary { min-height: 56px; font: 500 var(--text-md)/1.3 var(--font-body); }
.data summary::after { content: ""; flex-shrink: 0; width: 12px; height: 12px; background: linear-gradient(var(--color-muted), var(--color-muted)) center / 100% 1.5px no-repeat, linear-gradient(var(--color-muted), var(--color-muted)) center / 1.5px 100% no-repeat; transition: transform var(--dur-short) var(--ease-out); }
.data[open] > summary::after { transform: rotate(45deg); }
.data__scroll { overflow-x: auto; padding-bottom: var(--space-md); }
.figures { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.figures caption { padding-bottom: var(--space-md); text-align: start; font-weight: 500; color: var(--color-ink-2); }
.figures thead th { padding: 0 var(--space-md) var(--space-sm) 0; font: 500 var(--text-sm)/1.25 var(--font-body); color: var(--color-muted); text-align: end; vertical-align: bottom; border-bottom: var(--rule-hair) solid var(--color-ink); }
.figures thead th:first-child, .figures tbody th { text-align: start; }
.figures tbody th, .figures td { padding: var(--space-sm) var(--space-md) var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.figures tbody th { font-weight: 500; white-space: nowrap; }
.figures td { text-align: end; }
.figures--india { font-size: var(--text-lead); }
.figures + .figures { margin-top: var(--space-xl); }
.figures__total th, .figures__total td { font-weight: 500; border-bottom-color: var(--color-ink); }
.data--rest { margin-top: 0; border-top: 0; }

/* What inspectors find: each lapse, how often it was reported, and the record that prevents it */
.findings__head { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 5fr); gap: var(--gap-columns); padding-bottom: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-ink); font-size: var(--text-sm); color: var(--color-muted); }
.findings { list-style: none; margin: 0; padding: 0; }
.finding { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 5fr); gap: var(--space-xs) var(--gap-columns); align-items: center; padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.finding__what { font-weight: 500; font-size: var(--text-lead); }
.finding__bar { display: flex; align-items: center; gap: var(--space-sm); min-height: 40px; border-radius: 4px; }
.finding__bar:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.bar { flex-shrink: 0; width: calc(var(--v) * 70%); height: 14px; border-radius: 0 4px 4px 0; background: var(--color-accent); transition: background-color var(--dur-micro) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .finding__bar:hover .bar { background: var(--color-accent-hover); } }
.bar__val { font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--color-ink-2); white-space: nowrap; }
.finding__answer { color: var(--color-ink-2); }
.finding__none { color: var(--color-muted); }

/* The latest drives, newest first */
.drives { list-style: none; margin: 0; padding: 0; border-top: var(--rule-hair) solid var(--color-ink); }
.drive { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--space-sm) var(--gap-columns); padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.drive__date { color: var(--color-ink-2); padding-top: var(--space-2xs); }
.drive__body { display: grid; gap: var(--space-xs); }
.drive h3 { font-size: var(--text-title); line-height: 1.3; text-wrap: balance; }
.drive__kinds { color: var(--color-muted); }
.drive__counts { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-xl); margin: var(--space-xs) 0; }
.drive__counts div { display: flex; align-items: baseline; gap: var(--space-xs); }
.drive__counts dt { color: var(--color-muted); font-size: var(--text-sm); }
.drive__counts dd { margin: 0; font-weight: 500; font-size: var(--text-lg); }
.drive__found { color: var(--color-ink-2); max-width: 70ch; }
.drive__src { font-size: var(--text-sm); color: var(--color-muted); }
.drive__src a { white-space: nowrap; }
.data--drives { border-top: 0; }
.data--drives .drives { border-top: var(--rule-hair) solid var(--color-rule); }

/* The law, in five rows */
.law { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); }
.law h2 { grid-column: 1 / 5; align-self: start; font-size: var(--text-2xl); }
.law__list { grid-column: 6 / 13; margin: 0; }
.law__list div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-md); }
.law__list dt { font-weight: 500; }
.law__list dd { margin: 0; color: var(--color-ink-2); }
.law__note { grid-column: 6 / 13; margin-top: 0; }

/* How it was counted */
.about { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); }
.about h2 { grid-column: 1 / 5; align-self: start; font-size: var(--text-2xl); }
.about__body { grid-column: 6 / 13; display: grid; gap: var(--space-md); }
.about__body > p, .about__body details > p { color: var(--color-ink-2); max-width: 64ch; }
.about__body details > p { padding-bottom: var(--space-md); }
.about__body details .changes { padding-bottom: var(--space-lg); }
.about__body strong { color: var(--color-ink); font-weight: 500; }
.about__body h3 { margin-top: var(--space-md); font-size: var(--text-lg); }
.changes, .sources { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); color: var(--color-ink-2); }
.changes .num { margin-right: var(--space-sm); color: var(--color-muted); }
.sources { padding-bottom: var(--space-lg); }

/* One tooltip for every bar: the value first, on hover and on keyboard focus */
.tip { position: fixed; z-index: var(--z-tooltip); max-width: 280px; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-on-ink); font-size: var(--text-sm); line-height: 1.35; pointer-events: none; }

@media (max-width: 60rem) {
  .tg { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
  .findings__head { display: none; }
  .finding { grid-template-columns: minmax(0, 1fr); }
  .law h2, .law__list, .law__note, .about h2, .about__body { grid-column: 1 / -1; }
}
/* Phones: each row of a table becomes a block, every figure beside its column name. */
@media (max-width: 48rem) {
  .figures, .figures tbody, .figures tr, .figures tbody th, .figures td { display: block; }
  .figures thead { display: none; }
  .figures tr { padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
  .figures tbody th, .figures td { padding: 0; border: 0; }
  .figures tbody th { padding-bottom: var(--space-2xs); white-space: normal; }
  .figures td { display: flex; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-3xs); }
  .figures td::before { content: attr(data-label); color: var(--color-muted); font-size: var(--text-sm); text-align: start; }
  .figures--india { font-size: var(--text-md); }
  .figures__total { border-bottom-color: var(--color-ink); }
}
@media (max-width: 40rem) {
  .ins-hero__copy h1 { font-size: clamp(2.125rem, 9vw, 2.5rem); }
  .ins-hero { padding-block: var(--space-xl) var(--space-2xl); }
  .ins-hero__copy { margin-bottom: var(--space-2xl); }
  .cols { height: 240px; padding-left: 2.25rem; }
  .cols__grid { left: 2.25rem; }
  .col__span { display: none; }
  .col__q { display: block; }
  .drive { grid-template-columns: minmax(0, 1fr); }
  .law__list div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
}
@media (prefers-reduced-motion: reduce) {
  .col__bar, .bar, .data summary::after { transition: none; }
}