:root {
  --navy: #07376f;
  --navy-deep: #052b58;
  --navy-soft: #244f7d;
  --ice: #eef7fb;
  --ice-deep: #d9eaf3;
  --white: #ffffff;
  --sky: #67b7e3;
  --sky-soft: #bfe1f3;
  --green: #1e6a47;
  --green-soft: #d8eee4;
  --ink: #062f62;
  --ink-soft: #315878;
  --focus: #c8462f;
  --shadow: #70b8df;
  --danger: #9d2f2f;
  --radius: 3px;
  --site-width: 1400px;
  /* Column headings, status chips and other microtype set in a serif at .72rem
     turn muddy. This is the system sans stack, so it costs no download and adds
     no third-party dependency. */
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #d7e8f1; }
body {
  margin: 0;
  min-width: 320px;
  background: #d7e8f1;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.48;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background:
    radial-gradient(circle at 12% 8%, rgba(255,255,255,.55), transparent 25%),
    linear-gradient(90deg, rgba(7,55,111,.05), transparent 18%, transparent 82%, rgba(7,55,111,.05));
}
.film-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .025;
  z-index: 50;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.72' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

a { color: var(--navy); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
button, input, select { font: inherit; }
button, a { touch-action: manipulation; }
:focus-visible { outline: 4px solid var(--focus); outline-offset: 4px; }
.skip-link {
  position: fixed;
  left: 1rem;
  top: -6rem;
  z-index: 100;
  padding: .8rem 1rem;
  background: var(--white);
  color: var(--navy-deep);
  border: 3px solid var(--navy);
}
.skip-link:focus { top: 1rem; }

.site-header {
  width: min(100%, var(--site-width));
  margin: 0 auto;
  background: var(--navy);
  color: var(--white);
}
.header-inner {
  min-height: 92px;
  display: flex;
  align-items: center;
  padding: 1rem clamp(1.2rem, 5vw, 4.25rem);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  color: var(--white);
  text-decoration: none;
  text-transform: uppercase;
}
.brand:hover { text-decoration: none; }
.brand-emblem { width: 3.3rem; height: 3.3rem; flex: 0 0 auto; }
.brand-emblem-disc { fill: var(--ice); stroke: var(--sky); stroke-width: 4; }
.brand-emblem-star { fill: var(--navy); }
.brand-emblem-core { fill: var(--sky); }
.brand-wordmark {
  display: grid;
  line-height: 1;
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: .13em;
}
.brand-wordmark b,
.brand-wordmark small { font-family: inherit; }
.brand-wordmark b { font-size: 1.18rem; font-weight: 700; }
.brand-wordmark small {
  margin-top: .45rem;
  color: var(--sky-soft);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .38em;
}
.flag-rule {
  width: min(100%, var(--site-width));
  height: 14px;
  margin: 0 auto;
  position: relative;
  background: linear-gradient(to bottom, var(--sky) 0 9px, var(--green) 9px 11px, var(--ice) 11px 14px);
  overflow: hidden;
}
.flag-rule::before {
  content: "";
  position: absolute;
  inset: 0 auto 5px 0;
  width: 34%;
  background: var(--navy);
}
.flag-rule span {
  position: absolute;
  left: 34%;
  top: 0;
  width: 12px;
  height: 9px;
  background: var(--white);
}

main {
  width: min(100%, var(--site-width));
  margin: 0 auto;
  padding: 2.75rem clamp(1.2rem, 5vw, 4.25rem) 4.25rem;
  background: var(--ice);
  min-height: 62vh;
}

h1, h2, h3, h4 {
  color: var(--navy);
  line-height: 1.06;
  margin-top: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.75rem, 6vw, 5.25rem); letter-spacing: -.045em; }
h2 { font-size: clamp(2rem, 4.2vw, 3.65rem); letter-spacing: -.025em; }
h3 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); }
p { text-wrap: pretty; }

.paper-panel,
.search-form,
.result-card,
.county-map-frame,
.notice-card,
.auth-card {
  background: var(--white);
  border: 3px solid var(--navy);
  border-radius: var(--radius);
  box-shadow: 8px 8px 0 var(--shadow);
}
.paper-panel { position: relative; }
.paper-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--green) 0 34%, var(--sky) 34% 100%);
}

.eyebrow {
  margin: 0 0 .65rem;
  color: var(--green);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .23em;
  text-transform: uppercase;
}
.section-wrap { margin: 3rem 0; }
.search-section { margin: .65rem 0 3.1rem; }
.map-section { margin: 2.75rem 0 3.7rem; position: relative; }
.section-heading { margin-bottom: 1.25rem; }
.section-title { margin-bottom: .45rem; font-size: clamp(2.6rem, 5vw, 4.6rem); }
.section-note { margin: 0; color: var(--green); font-weight: 700; }
.search-heading-row,
.map-heading-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
}
.map-heading-row { margin-bottom: .35rem; }
.map-heading-row h2 { margin-bottom: 0; }

.button {
  min-height: 48px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: .4rem;
  border: 2px solid var(--navy);
  border-radius: 999px;
  background: var(--navy);
  color: var(--white);
  font-weight: 800;
  padding: .7rem 1.35rem;
  text-decoration: none;
  box-shadow: 4px 4px 0 var(--sky);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.button:hover {
  transform: translateY(-2px);
  box-shadow: 5px 6px 0 var(--sky);
  background: var(--navy-deep);
  text-decoration: none;
}
.button:active { transform: translateY(2px); box-shadow: 1px 2px 0 var(--sky); }
.button-outline { background: var(--white); color: var(--navy); }
.button-outline:hover { background: var(--ice); }
.button-blue { background: var(--green); border-color: var(--green); box-shadow: 4px 4px 0 #87c9a8; }
.button-blue:hover { background: #155a3b; box-shadow: 5px 6px 0 #87c9a8; }
.button-small { min-height: 42px; padding: .52rem 1rem; font-size: .9rem; }
.text-button {
  border: 0;
  background: transparent;
  color: var(--navy);
  font-weight: 800;
  padding: .5rem 0;
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}

.search-form {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) minmax(180px, 1.12fr) auto;
  gap: 1rem 1.25rem;
  align-items: end;
  padding: 1.45rem 1.55rem;
}
.form-field { min-width: 0; }
.search-form > .button { min-height: 50px; height: 50px; padding-block: 0; }
.search-form-hint { grid-column: 1 / -1; margin: -.35rem 0 0; }
.search-form label,
.stack-form label {
  display: block;
  margin-bottom: .38rem;
  color: var(--navy);
  font-size: .91rem;
  font-weight: 800;
}
input,
select {
  width: 100%;
  min-height: 50px;
  height: 50px;
  border: 2px solid var(--navy);
  border-radius: 6px;
  background: var(--white);
  color: var(--navy-deep);
  padding: .68rem .8rem;
}
input::placeholder { color: #73889a; opacity: 1; }
input:hover,
select:hover { border-color: var(--navy-deep); }
.field-hint,
.optional { color: var(--green); font-size: .84rem; }
.status-message { min-height: 1.5rem; margin: 1rem 0; color: var(--green); font-weight: 800; }

.results-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.25rem; }
.result-card { padding: 1.2rem; }
.result-card h3 { margin-bottom: .35rem; }
.result-meta { display: grid; grid-template-columns: auto 1fr; gap: .25rem .7rem; margin: .85rem 0; }
.result-meta dt { color: var(--navy); font-weight: 800; }
.result-meta dd { margin: 0; }
.charge-list { margin: .5rem 0 0; padding-left: 1.2rem; }
.skeleton {
  min-height: 220px;
  border: 3px solid var(--navy);
  background: linear-gradient(90deg, var(--ice-deep) 25%, var(--white) 50%, var(--ice-deep) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
  box-shadow: 8px 8px 0 var(--shadow);
}
@keyframes shimmer { to { background-position: -200% 0; } }

.legend { display: flex; flex-wrap: wrap; gap: 1rem; color: var(--navy); font-size: .92rem; font-weight: 800; }
.legend span { display: inline-flex; align-items: center; gap: .42rem; }
.legend-swatch {
  width: 1.2rem;
  height: 1.2rem;
  display: inline-block;
  border: 2px solid var(--navy);
  background: var(--ice);
}
.legend-swatch.active { background: var(--sky); }
.map-description { max-width: 63rem; margin: .35rem 0 1.35rem; color: var(--ink-soft); }
.county-map-frame {
  overflow: auto;
  padding: 1rem 1rem 2rem;
}
.map-current-county {
  width: fit-content;
  max-width: 100%;
  margin: .2rem auto 1.1rem;
  padding: .45rem .85rem;
  border: 2px solid var(--navy);
  background: var(--white);
  color: var(--navy);
  box-shadow: 3px 3px 0 var(--sky-soft);
  font-weight: 800;
}
.map-current-county span { color: var(--green); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.county-map-svg {
  display: block;
  width: min(100%, 680px);
  height: auto;
  margin: 0 auto;
  overflow: visible;
  filter: drop-shadow(8px 10px 0 rgba(103,183,227,.25));
}
.county-shape-link { color: inherit; outline: none; }
.county-shape {
  fill: var(--ice);
  stroke: var(--navy-deep);
  stroke-width: 1.75;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .14s ease, filter .14s ease, fill .14s ease, stroke-width .14s ease;
}
.county-shape-link.is-active .county-shape { fill: var(--sky); }
.county-shape-link:hover .county-shape,
.county-shape-link:focus .county-shape,
.county-shape-link:focus-visible .county-shape {
  transform: translateY(-7px) scale(1.026);
  filter: drop-shadow(4px 8px 0 var(--navy));
  fill: var(--sky-soft);
  stroke-width: 2.8;
}
.county-shape-link.is-active:hover .county-shape,
.county-shape-link.is-active:focus .county-shape { fill: #4da7d8; }
.county-shape-link:focus-visible .county-shape { stroke: var(--focus); stroke-width: 4.5; }

/* The page header and the visiting details are one panel. They answered the same
   question in two boxes: the title said which county, the panel below repeated
   the county in its own heading, and the facility name repeated it a third time.
   Merged, the title states the subject once and the facts sit under it.

   The county name is a page title, not the homepage's brand moment, so it is
   held to a smaller scale than the homepage h1. */
.county-hero {
  margin: .5rem 0 1.35rem;
  padding: clamp(1.1rem, 2.4vw, 1.75rem) clamp(1.1rem, 3vw, 1.9rem);
}
.county-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .6rem 1rem;
  margin-bottom: 1rem;
}
.county-hero h1 {
  margin: 0;
  font-size: clamp(1.9rem, 3.5vw, 2.9rem);
  letter-spacing: -.02em;
}
.county-hero .verification-warning { margin: 0 0 1rem; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .8rem; color: var(--green); font-weight: 700; }
.availability-badge {
  display: inline-block;
  padding: .38rem .72rem;
  border: 2px solid var(--navy);
  background: var(--sky);
  color: var(--navy-deep);
  font-weight: 800;
  box-shadow: 3px 3px 0 var(--sky-soft);
}
.availability-badge.muted { background: var(--ice-deep); }
/* The county page reads top to bottom: title, where the jail is, who to search
   for, then the roster. The visiting details used to sit in a tall right-hand
   column whose height set the whole row, pushing the roster roughly 1200px down
   the page. Laid out horizontally they occupy a band a few hundred pixels tall,
   and the table follows the search box directly. */
.facility-body {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(260px, .85fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
  align-items: start;
}
.facility-main { min-width: 0; }
/* Facts sit side by side rather than stacked, which is what turns a tall column
   into a short band. auto-fit collapses them to one column on a narrow screen. */
.county-hero .contact-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0 1.75rem;
  margin: 0;
}
/* The address is a link, so it needs to look like one. A large enough tap
   target matters here: this is the control someone uses on a phone, outside a
   jail, to work out where they are going. */
.address-link {
  display: inline-block;
  padding: .15rem 0;
  color: var(--navy);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .18em;
}
.address-link:hover { color: var(--navy-deep); text-decoration-thickness: 3px; }

.county-hero .contact-list div { border-top: 2px solid var(--ice-deep); padding: .6rem 0; }
.county-hero .contact-list div:last-child { border-bottom: none; }
.facility-summary { margin: .9rem 0 1rem; }
.county-hero .privacy-map { margin-top: 0; min-height: 0; }
.county-hero .map-placeholder { min-height: 0; padding: 1.1rem; gap: .35rem; }
.county-hero .map-placeholder p { margin: .3rem 0 .6rem; font-size: .88rem; }
.county-hero .map-pin { width: 2.2rem; height: 2.2rem; }
.county-hero .privacy-map iframe { min-height: 260px; }

.county-search-section { margin: 0 0 1.35rem; }
/* Section headings on this page sit below the county title, so they share one
   scale rather than each competing with it. */
.county-search-section h2 { margin-bottom: .85rem; font-size: clamp(1.6rem, 2.8vw, 2.3rem); }
.search-panel { padding: clamp(1.1rem, 2.4vw, 1.6rem) clamp(1.1rem, 3vw, 1.9rem); }
/* The panel draws the box, so the form inside it must not draw a second one. */
.search-panel .search-form {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}
.county-search { grid-template-columns: 1fr auto; }
.county-roster-section { margin-top: 0; }

/* The live region and the results grid are both empty until a search runs.
   Reserving their height pushed the table down by roughly 100px on every page
   view, including the ones where nobody searches. They still occupy space the
   moment they hold content, so nothing shifts under an announcement. */
.county-search-section .status-message:empty { min-height: 0; margin: 0; }
.county-search-section .results-grid:empty { display: none; }
.contact-list { margin: 1rem 0; }
.contact-list div { border-top: 2px solid var(--ice-deep); padding: .78rem 0; }
.contact-list div:last-child { border-bottom: 2px solid var(--ice-deep); }
.contact-list dt { color: var(--navy); font-weight: 800; }
.contact-list dd { margin: .15rem 0 0; }
.notice-card { padding: 1.15rem; background: var(--white); border-style: dashed; }
.verification-warning { border-left: 6px solid var(--green); padding: .75rem .9rem; background: var(--green-soft); color: var(--navy-deep); }
.map-unavailable { margin-top: 1.2rem; }
.privacy-map {
  margin-top: 1.25rem;
  min-height: 320px;
  overflow: hidden;
  border: 3px solid var(--navy);
  background: var(--ice-deep);
  box-shadow: 6px 6px 0 var(--sky-soft);
}
.map-placeholder {
  min-height: 320px;
  padding: 1.5rem;
  display: grid;
  place-items: center;
  text-align: center;
  align-content: center;
  background:
    linear-gradient(rgba(7,55,111,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7,55,111,.06) 1px, transparent 1px),
    var(--ice-deep);
  background-size: 32px 32px;
}
.map-pin {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border: 3px solid var(--navy);
  border-radius: 50% 50% 50% 0;
  background: var(--sky);
  color: var(--navy);
  box-shadow: 4px 4px 0 var(--navy);
  transform: rotate(-45deg);
}
.privacy-map iframe { width: 100%; min-height: 320px; border: 0; display: block; }

.auth-card { max-width: 720px; margin: 1rem auto 4rem; padding: clamp(1.4rem, 4vw, 2.3rem); }
.auth-card h1 { font-size: clamp(2.45rem, 5vw, 4rem); }
.auth-card h2 { margin-top: 2rem; font-size: clamp(1.7rem, 3vw, 2.35rem); }
.stack-form { display: grid; gap: .75rem; }
.stack-form .button { width: fit-content; margin-top: .45rem; }
.auth-card form + p,
.auth-card form + form { margin-top: 1.5rem; }

.site-footer {
  width: min(100%, var(--site-width));
  margin: 0 auto;
  padding: 0 clamp(1.2rem, 5vw, 4.25rem) 3rem;
  background: var(--ice);
}
.footer-ornament {
  width: 100%;
  min-height: 74px;
  margin-bottom: 2.5rem;
  overflow: hidden;
  background: var(--navy);
  border-top: 3px solid var(--green);
}
.footer-ornament svg { display: block; width: 100%; height: 86px; }
.footer-bird { fill: var(--ice); stroke: var(--sky); stroke-width: 2; }
.footer-bird .bird-mark { fill: var(--sky); stroke: none; }
.footer-water { fill: none; stroke: var(--sky); stroke-width: 2; opacity: .78; }
.footer-star path { fill: var(--sky); }
.footer-star circle { fill: var(--navy); }
.footer-copy { display: grid; gap: 1.2rem; }
.footer-copy strong { color: var(--navy); }
.footer-actions,
.jail-links { display: flex; flex-wrap: wrap; gap: .85rem; }

@media (max-width: 850px) {
  .header-inner { min-height: 82px; }
  main { padding-top: 2rem; }
  .facility-body { grid-template-columns: 1fr; }
  .search-form,
  .county-search { grid-template-columns: 1fr; }
  .search-form-hint { grid-column: 1; }
  .search-form > .button { width: 100%; }
  .search-heading-row,
  .map-heading-row { align-items: start; flex-direction: column; }
  .legend { margin-top: .25rem; }
  .footer-ornament svg { width: 145%; margin-left: -22.5%; }
}

@media (max-width: 520px) {
  .brand-emblem { width: 2.85rem; height: 2.85rem; }
  .brand-wordmark b { font-size: 1rem; }
  .brand-wordmark small { font-size: .63rem; }
  .search-form { padding: 1.1rem; }
  .county-map-frame { padding-inline: .45rem; }
  .footer-actions .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (forced-colors: active) {
  .button,
  .county-shape,
  .paper-panel,
  .search-form,
  .county-map-frame,
  .county-hero { forced-color-adjust: auto; }

  /* The sticky heading row keeps its own background in forced colours, or the
     rows scrolling beneath it show through and the headings become unreadable.
     The charge-state chip loses its tint here, so it keeps a border to stay
     distinguishable from an ordinary charge list. */
  .roster-table thead th {
    background: Canvas;
    color: CanvasText;
    border-bottom: 2px solid CanvasText;
  }
  .charge-pending { border: 1px dashed CanvasText; }
}

/* Connected roster integration */
.label-optional {
  display: block;
  margin-top: .2rem;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--green);
}

.county-roster-section {
  margin-top: clamp(1.75rem, 4vw, 3rem);
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
.roster-heading-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1rem;
}
.roster-heading-row h2 { margin-bottom: .35rem; }
.roster-export-button { flex: 0 0 auto; }
.roster-scroll {
  max-height: 42rem;
  overflow: auto;
  overscroll-behavior: contain;
  border: 3px solid var(--navy);
  background: #fff;
  box-shadow: 8px 8px 0 var(--sky);
  scrollbar-color: var(--sky) var(--ice-deep);
  scrollbar-width: thin;
}
.roster-scroll:focus-visible {
  outline: 4px solid var(--green);
  outline-offset: 4px;
}
.roster-table {
  width: 100%;
  min-width: 1100px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .9rem;
}
/* Sticky is applied to the cells rather than to thead: a sticky thead is a
   comparatively recent behaviour, and a browser that ignores it scrolls the
   headings away, which is exactly the thing the scroll container exists to
   prevent. Sticky th has been reliable far longer. */
.roster-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}
.roster-table th,
.roster-table td {
  padding: .9rem .85rem;
  text-align: left;
  vertical-align: top;
  border-right: 1px solid rgba(7,55,111,.18);
  border-bottom: 1px solid rgba(7,55,111,.22);
}
.roster-table thead th {
  background: var(--navy);
  color: var(--ice);
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.roster-table tbody tr:nth-child(even) { background: rgba(199,225,238,.32); }
.roster-table tbody tr:hover { background: rgba(115,184,220,.22); }
.roster-table tbody th { min-width: 190px; color: var(--navy); }
.roster-source-link {
  display: block;
  width: fit-content;
  margin-top: .35rem;
  font-size: .76rem;
  font-weight: 600;
}
.status-chip {
  display: inline-block;
  padding: .28rem .55rem;
  border: 1px solid var(--navy);
  background: var(--ice-deep);
  color: var(--navy);
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 800;
  white-space: nowrap;
}
.status-in-custody { background: var(--sky); }
.status-released { background: #edf3f5; }
.roster-charge-list {
  min-width: 260px;
  margin: 0;
  padding-left: 1.1rem;
}
.roster-charge-list li + li { margin-top: .28rem; }
.muted-copy { color: #526878; }

.more-charges { margin-top: .4rem; }
.more-charges > summary {
  display: inline-block;
  padding: .55rem .1rem;
  color: var(--green);
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
}
.more-charges > summary:hover { text-decoration: underline; }
.more-charges > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.more-charges[open] > summary { margin-bottom: .3rem; }

/* "Pending enrichment" and "Not published by source" mean different things: one
   is a gap this project has not filled yet, the other is the county's own
   answer. They differ in colour and weight so the distinction is not carried by
   wording alone. */
.charge-state {
  display: inline-block;
  font-family: var(--sans);
  font-size: .78rem;
  line-height: 1.35;
}
.charge-pending {
  padding: .28rem .5rem;
  border: 1px dashed var(--green);
  background: var(--green-soft);
  color: #14512f;
  font-weight: 700;
}
.cell-age { font-variant-numeric: tabular-nums; white-space: nowrap; }
.roster-load-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
}
.roster-load-row .field-hint { margin: 0; }
.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;
}

@media (max-width: 850px) {
  .roster-heading-row,
  .roster-load-row {
    align-items: stretch;
    flex-direction: column;
  }
  .roster-export-button,
  .roster-load-row .button { width: 100%; }
  .roster-scroll { max-height: 34rem; }
}