/* ==================================================================
   zip-code-tools.v5.css - ONE stylesheet for every ZIP Code tool page (v5.1)
   Address / ZIP Code search, Radius Finder, Distance Calculator, Post Office Locator.
   Load after product-system.v5.css; nothing else is needed.

   Part A (was search.v5.css)                 Part B (was radius.v5.css)
     search box + tabs + forms (.zs-*)           map + key (.zr-map*, .zr-k)
     address card, details, neighborhood         chart blocks (.zr-block*)
     ten-year table, schools                     ZIP list (.zr-table, .zr-chips)
     print a map or chart (#zcPrint)             compare table, API excerpt (.zr-pre)
     neighborhood charts (.nb-chart*)            Print Map button, phone sort
     post office cards (.po-*)
     distance facts (.dc-*)
     button rows (.zcp-btn-row)
     asides: FIPS codes, margins of error (.zc-aside)
     status line: working (spinner) or a problem (.zc-status)
     compact forms (.zs-row, .zs-f, .zs-go) + state combobox (.zcs-*)
     "Try one" chips (.zr-examples, .zr-chip)

   Reuse these classes on any new tool rather than writing new ones; the
   zr- (radius), nb- (neighborhood), po-, dc- prefixes are where a pattern was
   born, not where it may be used.
   ================================================================== */

/* ============================== PART A ============================== */
/* ==================================================================
   Part A: search page components, now shared by every tool page.
   Loaded AFTER product-system.v5.css. Holds just what the shared system
   has no component for; everything else on the page is .zcp-* markup.
   Rules: every selector starts with .zcp5 (product-system rule 1), and
   nothing here styles site chrome.
   ================================================================== */

/* ---- 1. Search forms: tab chips + one panel ----------------------- */
.zcp5 .zs-search{ max-width:56rem; margin:0 auto; }

/* The eight searches as one wrapped row of chips (was a vertical pill
   column on a dark band). Bootstrap's tab JS still drives .active. */
.zcp5 .zs-tabs{ display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 1rem; padding:0; list-style:none; }
.zcp5 .zs-tabs .nav-item{ margin:0 !important; }
/* style.min.css paints EVERY ".nav .nav-item button" purple/green with
   color:#fff !important (meant for an old tab set). The colour can only be
   taken back with !important, so it is - here and nowhere else. */
.zcp5 .zs-tabs .nav-link{
  border:1px solid #cbd5e1; border-radius:999px; background:#fff;
  padding:.35rem .85rem; margin:0; font-size:.82rem; font-weight:500; line-height:1.3;
  color:var(--zcp-ink, #0f172a) !important;
}
.zcp5 .zs-tabs .nav-link:hover{ border-color:#3b82f6; color:#1d4ed8 !important; }
.zcp5 .zs-tabs .nav-link.active{ background:var(--zcp-ink, #0f172a); border-color:var(--zcp-ink, #0f172a); color:#fff !important; font-size:.82rem; }
.zcp5 .zs-tabs .nav-link:focus-visible{ outline:2px solid #3b82f6; outline-offset:2px; }

.zcp5 .zs-panel{
  border:1px solid #e2e8f0; border-radius:.75rem; background:#fff;
  padding:1.25rem 1.25rem 1rem; box-shadow:0 1px 3px rgba(15,23,42,.06);
}
/* label-above form model (account_edit). The asterisk is CSS, as there. */
/* style.css floats these labels over the field's top border (absolute,
   top:-11px, white fill) - pin them back above the field */
.zcp5 :is(.zs-panel, .zs-form) .form-label{ position:static; top:auto; padding:0; background:none; font-weight:600; font-size:.8rem; margin-bottom:.3rem; }
.zcp5 :is(.zs-panel, .zs-form) .form-label.required::after{ content:" *"; color:#dc2626; }
/* the clear-field icon (script.js .toggle-clearfield) sits inside the field */
.zcp5 :is(.zs-panel, .zs-form) .search-field{ position:relative; }
/* style.css gives every .form-control a 45px left pad for an icon these
   fields no longer have */
.zcp5 :is(.zs-panel, .zs-form) .search-field .form-control{ padding:.55rem 2.4rem .55rem .75rem; }
/* the select2 state picker carries the same icon indent */
.zcp5 :is(.zs-panel, .zs-form) .select2-container .select2-selection__rendered{ padding-left:.75rem; }
.zcp5 :is(.zs-panel, .zs-form) .select2-container .select2-selection__placeholder{ margin-left:0; }
/* a button that is a direct child of a .row picks up the row's gutter
   padding and runs wider than the fields above it */
.zcp5 :is(.zs-panel, .zs-form) .row > .zcp-cta{ width:calc(100% - var(--bs-gutter-x)) !important; margin-inline:calc(var(--bs-gutter-x) * .5); padding-inline:1rem; }

/* ---- 2. Result views ------------------------------------------------ */
/* the compact hero centres its text; its action row should follow */
.zcp5 .zcp-hero.compact .zcp-ctas{ justify-content:center; }

/* ---- 3. Address view ------------------------------------------------- */
/* the address card: head (toggle + copy), a fixed-height body the address and
   the map share (so switching doesn't move the page), foot (notices + buttons) */
.zcp5 .zs-addr{ background:#fff; border:1px solid #e2e8f0; border-radius:.9rem; box-shadow:0 1px 3px rgba(15,23,42,.06); overflow:hidden; }
.zcp5 .zs-addr-head{ display:flex; justify-content:space-between; align-items:center; gap:.5rem; padding:.55rem .7rem; border-bottom:1px solid #f1f5f9; }
.zcp5 .zs-addr-kick{ font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#64748b; }
.zcp5 .zs-copy{ border:1px solid #cbd5e1; background:#fff; border-radius:999px; padding:.2rem .7rem; font-size:.8rem; color:#334155; }
.zcp5 .zs-copy:hover{ border-color:#3b82f6; color:#1d4ed8; }
.zcp5 .zs-addr-body{ height:240px; position:relative; }
.zcp5 .zs-addr-body > [role=tabpanel]{ height:100%; }
.zcp5 #addrPaneAddress{ display:flex; align-items:center; justify-content:center; padding:1rem; }
.zcp5 #answer address{ margin:0; text-align:center; line-height:1.75; font:clamp(1rem, 3.6vw, 1.3rem)/1.75 Monaco, "Lucida Console", monospace; }
.zcp5 .zs-addr-zip{ color:#e60000; }
.zcp5 .zs-addr-county{ display:block; margin-top:.25rem; font:italic .85rem/1.4 var(--bs-body-font-family, system-ui, sans-serif); color:#64748b; }
.zcp5 #addrMap{ height:100%; }
.zcp5 .zs-map-note{ position:absolute; left:.5rem; right:.5rem; bottom:.5rem; display:flex; justify-content:space-between; gap:.5rem; flex-wrap:wrap; pointer-events:none; font-size:.72rem; }
.zcp5 .zs-map-note > *{ background:rgba(255,255,255,.92); border-radius:.4rem; padding:.15rem .45rem; pointer-events:auto; }
.zcp5 .zs-addr-foot{ padding:.75rem; border-top:1px solid #f1f5f9; background:#fbfcfd; }
.zcp5 .zs-addr-notes{ display:flex; flex-wrap:wrap; justify-content:center; gap:.35rem; list-style:none; margin:0 0 .65rem; padding:0; }
.zcp5 .zs-addr-notes li{ border:1px solid; border-radius:999px; padding:.15rem .6rem; font-size:.75rem; line-height:1.4; }
.zcp5 .zs-addr-notes .ok{ color:#166534; border-color:#bbf7d0; background:#f0fdf4; }
.zcp5 .zs-addr-notes .fix{ color:#475569; border-color:#e2e8f0; background:#f8fafc; }
.zcp5 .zs-addr-notes .warn{ color:#92400e; border-color:#fde68a; background:#fffbeb; }
/* label/value tables in the answer band and Address Details: the label column
   stays narrow so the values line up across tables */
.zcp5 #answer .zcp-manifest td:first-child,
.zcp5 #address-details .zcp-manifest td:first-child{ width:38%; }


/* ---- 4. Tables: stripes and a row hover on every data table of the page */
.zcp5 .zcp-manifest tbody tr:nth-child(even) > *{ background:#f8fafc; }
.zcp5 .zcp-manifest tbody tr:hover > *{ background:#eef4fb; }

/* ---- 5. Neighborhood ---------------------------------------------------- */
.zcp5 .nb-stand{ border:1px solid #e2e8f0; border-radius:.9rem; padding:1rem 1.25rem; background:#fbfcfd; }
.zcp5 .nb-verdict-line{ font-size:1.05rem; margin-bottom:.75rem; }
.zcp5 .nb-list{ list-style:none; padding:0; margin:0 0 .5rem; }
.zcp5 .nb-list li{ padding:.35rem 0 .35rem 1.6rem; position:relative; border-top:1px solid #f1f5f9; }
.zcp5 .nb-list li:first-child{ border-top:0; }
.zcp5 .nb-list li > i{ position:absolute; left:.2rem; top:.6rem; font-size:.8rem; color:#0f172a; }
.zcp5 .nb-legend{ font-size:.8rem; color:#334155; margin-bottom:.25rem; }
.zcp5 .nb-key{ display:inline-block; width:1.4rem; height:.45rem; border-radius:999px; vertical-align:middle; }
.zcp5 .nb-key.t, .zcp5 .nb-bar.t{ background:#1e40af; }
.zcp5 .nb-key.z, .zcp5 .nb-bar.z{ background:#94a3b8; }
.zcp5 .nb-group-h{ font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#475569; margin:1.5rem 0 .25rem; padding-bottom:.35rem; border-bottom:2px solid #e2e8f0; }
.zcp5 .nb-group-h span{ display:inline-block; min-width:1.4rem; text-align:center; margin-left:.35rem; border-radius:999px; background:#e2e8f0; color:#334155; font-size:.7rem; padding:0 .35rem; }
.zcp5 .nb-row{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.6fr); gap:.25rem 1rem; align-items:center; padding:.6rem .5rem; border-bottom:1px solid #f1f5f9; font-size:.86rem; }
.zcp5 .nb-row:nth-of-type(even){ background:#f8fafc; }
.zcp5 .nb-row:hover{ background:#eef4fb; }
.zcp5 .nb-name{ font-weight:600; }
.zcp5 .nb-v{ display:block; font-weight:400; font-size:.8rem; }
.zcp5 .nb-v i{ font-size:.72rem; }
/* each value names its side: a swatch always; the words show on phones and stay for screen readers on desktop */
.zcp5 .nb-who{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.zcp5 .nb-val{ position:relative; }
.zcp5 .nb-val.t::before, .zcp5 .nb-val.z::before{ content:""; display:inline-block; width:.6rem; height:.6rem; border-radius:50%; margin-right:.4rem; vertical-align:.05rem; }
.zcp5 .nb-val.t::before{ background:#1e40af; }
.zcp5 .nb-val.z::before{ border:2px solid #94a3b8; background:#fff; }
.zcp5 .nb-val.t{ font-weight:600; }
.zcp5 .nb-sw{ display:inline-block; width:.6rem; height:.6rem; border-radius:50%; margin-right:.35rem; vertical-align:.05rem; }
.zcp5 .nb-sw.t{ background:#1e40af; }
.zcp5 .nb-sw.z{ border:2px solid #94a3b8; background:#fff; }
/* the header row above each group */
.zcp5 .nb-row.nb-head{ background:none !important; padding-top:.35rem; padding-bottom:.35rem; font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#334155; border-bottom:1px solid #e2e8f0; }
.zcp5 .nb-row.nb-head small{ display:block; font-size:.7rem; font-weight:400; letter-spacing:0; text-transform:none; color:#64748b; }
/* ZIP dot on the bars: a hollow ring, the tract dot stays solid */
.zcp5 .nb-bar.z i{ background:#fff; border:2px solid #94a3b8; }
.zcp5 .nb-range{ display:block; font-size:.72rem; color:#64748b; }
.zcp5 .nb-bars{ position:relative; height:26px; }
.zcp5 .nb-bar{ position:absolute; height:6px; border-radius:999px; }
.zcp5 .nb-bar.t{ top:5px; }
.zcp5 .nb-bar.z{ top:15px; }
.zcp5 .nb-bar.none{ display:none; }
.zcp5 .nb-bar i{ position:absolute; top:-3px; width:12px; height:12px; margin-left:-6px; border-radius:50%; background:inherit; border:2px solid #fff; box-shadow:0 0 0 1px rgba(15,23,42,.25); }
.zcp5 .nb-bar.dim{ background:repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px); opacity:.55; }
.zcp5 .nb-bar.t.dim{ color:#1e40af; } .zcp5 .nb-bar.z.dim{ color:#94a3b8; }
.zcp5 .nb-bar.dim i{ background:#fff; }
/* a top-coded value: the bar runs off the edge, there is no upper end */
.zcp5 .nb-bar.open{ border-top-right-radius:0; border-bottom-right-radius:0; -webkit-mask:linear-gradient(90deg, #000 70%, transparent); mask:linear-gradient(90deg, #000 70%, transparent); }
@media (max-width: 767.98px){
  .zcp5 .nb-row{ grid-template-columns:1fr 1fr; }
  .zcp5 .nb-name, .zcp5 .nb-bars{ grid-column:1 / -1; }
  .zcp5 .nb-row.nb-head{ display:none; }
  .zcp5 .nb-val.t::before, .zcp5 .nb-val.z::before{ display:none; }
  .zcp5 .nb-who{ position:static; width:auto; height:auto; overflow:visible; clip:auto; display:block; font-size:.75rem; font-weight:600; color:#334155; }
}

/* Neighborhood tabs: the search form's chips, a little air under them */
.zcp5 #neighborhood .zs-tabs{ margin-bottom:.75rem; }
.zcp5 .nb-name .dT{ font-weight:600; }

/* ---- 6. Ask your AI ------------------------------------------------------ */
.zcp5 .zs-more > summary{ cursor:pointer; font-weight:600; color:#1d4ed8; }
.zcp5 .zs-ai .modal-body{ padding:1.25rem; }
.zcp5 .zs-ai-steps{ display:flex; gap:.4rem; list-style:none; padding:0; margin:0 0 1rem; counter-reset:s; }
.zcp5 .zs-ai-steps li{ flex:1; font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#64748b; border-top:3px solid #e2e8f0; padding-top:.35rem; counter-increment:s; }
.zcp5 .zs-ai-steps li::before{ content:counter(s) ". "; }
.zcp5 .zs-ai-steps li.on{ color:#0f172a; border-top-color:#0f172a; }
.zcp5 .zs-ai-choice{ display:block; width:100%; text-align:left; border:1px solid #cbd5e1; border-radius:.75rem; background:#fff; padding:.75rem 1rem; margin-bottom:.5rem; color:inherit; text-decoration:none; }
.zcp5 .zs-ai-choice:hover, .zcp5 .zs-ai-choice:focus-visible{ border-color:#3b82f6; background:#f8fbff; }
.zcp5 .zs-ai-choice b{ display:block; font-size:1rem; }
.zcp5 .zs-ai-choice small{ color:#64748b; }
.zcp5 .zs-ai-list{ padding-left:1.25rem; }
.zcp5 .zs-ai-list li{ margin-bottom:.75rem; }
.zcp5 .zs-ai-url{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin:.4rem 0; padding:.4rem .4rem .4rem .7rem; border:1px solid #e2e8f0; border-radius:.5rem; background:#f8fafc; }
.zcp5 .zs-ai-url code{ color:#0f172a; font-size:.85rem; word-break:break-all; }
.zcp5 .zs-ai-nav{ display:flex; justify-content:space-between; gap:.5rem; margin-top:1rem; }

/* The AI bar's "Set It Up" is a button that opens the walkthrough. The modal
   hands focus back to it, and Bootstrap's light focus fill would hide its white text. */
.zcp5 .cta-divider .btn-outline-light:focus,
.zcp5 .cta-divider .btn-outline-light:active{ background:rgba(255,255,255,.15); border-color:#fff; color:#fff; }
.zcp5 .cta-divider .btn-outline-light:focus-visible{ box-shadow:0 0 0 .2rem rgba(255,255,255,.4); }

/* .zcp-cta sets no text-align: a <button> centers by default, an <a> does not */
.zcp5 .zcp-cta{ text-align:center; }
/* the key call-to-action at the foot of "Questions about this address" */
.zcp5 .zs-more-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; padding-top:.75rem; border-top:1px solid #e2e8f0; }
.zcp5 .zs-more-cta .zcp-cta{ font-size:.88rem; padding:.5rem 1rem; }
/* address card: the two links are secondary, keep them small */

/* Neighborhood: four at-a-glance tiles above the tabs (meaning first, figures second) */
.zcp5 .nb-tiles{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:.75rem; margin:1rem 0 1.25rem; }
.zcp5 .nb-tile{ border:1px solid #e2e8f0; border-radius:.75rem; padding:.8rem .9rem; background:#fbfcfd; }
.zcp5 .nb-tile-h{ font-size:.7rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#64748b; }
.zcp5 .nb-tile-h i{ margin-right:.2rem; }
.zcp5 .nb-tile-v{ font-weight:700; font-size:1rem; line-height:1.3; margin:.3rem 0 .25rem; color:#0f172a; }
.zcp5 .nb-tile-d{ font-size:.8rem; line-height:1.45; color:#475569; }
@media (max-width: 991.98px){ .zcp5 .nb-tiles{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px){ .zcp5 .nb-tiles{ grid-template-columns:1fr; } }

/* the school district box in Address Details: a quiet panel on the tinted band */
.zcp5 .zs-district{ padding:.75rem 1rem; font-size:.82rem; line-height:1.55; }
.zcp5 .zs-district b{ font-size:.9rem; }

/* Neighborhood: the closing nudge to the AI assistant (and the API) */
.zcp5 .nb-cta{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; border:1px solid #ddd6fe; border-radius:.9rem; background:#f5f3fc; padding:.9rem 1.1rem; }
.zcp5 .nb-cta > i{ font-size:1.4rem; color:#6d28d9; }
.zcp5 .nb-cta-text{ flex:1 1 22rem; font-size:.88rem; color:#334155; }
.zcp5 .nb-cta-go{ display:flex; align-items:center; gap:.4rem 1rem; flex-wrap:wrap; }
.zcp5 .nb-cta-go .zcp-btn{ font-size:.82rem; padding:.45rem .9rem; }

/* Hero: real Census TIGER/Line streets around Bayou Texar (Pensacola) with one address lit.
   Line art needs a lighter veil than the photo heroes; the title still sits on navy.
   Anchored toward the lit address so phones keep it in frame. */
.zcp5 .zcp-hero.compact.veil-soft .zcp-veil{
  background:linear-gradient(180deg, rgba(9,17,34,.42) 0%, rgba(9,17,34,.58) 52%, rgba(9,17,34,.74) 100%);
}
.zcp5 .zs-hero-streets{ object-position:72% 50%; }

/* after a search the page opens at the answer (address) or the results (other searches):
   land below the sticky site header and the product bar, not under them */
.zcp5 #answer, .zcp5 #results{ scroll-margin-top:calc(var(--zcp-topnav-h, 76px) + 52px + 8px); }

/* ---- 7. Polish council (2026-10-23) ------------------------------------ */
/* row labels with a definition: a quiet dotted underline, so they don't read as links */
.zcp5 .zcp-manifest .dT{ text-decoration:underline dotted #94a3b8; text-underline-offset:3px; cursor:help; color:inherit; }
/* the Quick Link: one line, the copy button does the work */
.zcp5 div.copy{ max-width:100%; overflow-wrap:anywhere; word-break:break-all; font-size:.78rem; line-height:1.45; }
/* cached ZIP school cards in the v5.1 card look */
.zcp5 #schools .card.school{ background:#fff !important; border:1px solid #e2e8f0 !important; border-radius:.75rem !important; box-shadow:none !important; font-size:.84rem; line-height:1.5; padding:.75rem .9rem !important; }
.zcp5 #schools .card.school b{ display:block; font-size:.9rem; margin-bottom:.15rem; }
/* address-card buttons: 40px tap targets; the Address/Map toggle too */
.zcp5 .zs-addr-head .btn, .zcp5 .zs-copy{ min-height:40px; }
/* ZIP results table on phones: let long county names wrap instead of cutting off */
@media (max-width: 575.98px){ .zcp5 #tblZIP td, .zcp5 #tblZIP th{ white-space:normal; word-break:normal; } }
/* the ten-year table on phones: each measure a small card */
@media (max-width: 575.98px){
  .zcp5 #trend .zcp-manifest thead{ display:none; }
  .zcp5 #trend .zcp-manifest tr{ display:grid; grid-template-columns:repeat(3, 1fr); gap:.15rem .5rem; padding:.55rem .35rem; }
  .zcp5 #trend .zcp-manifest td{ border:0; padding:.05rem .2rem; font-size:.82rem; }
  .zcp5 #trend .zcp-manifest td:first-child, .zcp5 #trend .zcp-manifest td:last-child{ grid-column:1 / -1; }
  .zcp5 #trend .zcp-manifest td:nth-child(2)::before{ content:"2010\2013 14"; }
  .zcp5 #trend .zcp-manifest td:nth-child(3)::before{ content:"2015\2013 19"; }
  .zcp5 #trend .zcp-manifest td:nth-child(4)::before{ content:"2020\2013 24"; }
  .zcp5 #trend .zcp-manifest td:nth-child(n+2):nth-child(-n+4)::before{ display:block; font-size:.66rem; letter-spacing:.04em; color:#64748b; }
  .zcp5 #trend .zcp-manifest td:last-child{ font-weight:600; }
}

/* ---- 8. Print a map or a chart (zcPrint, includes/inc-print-modal) ---- */
.zc-print-img img{ display:block; margin:0 auto; max-height:62vh; border:1px solid #e2e8f0; border-radius:.4rem; }
.zcp5 .zc-print-mini{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid transparent; border-radius:.5rem; background:transparent; color:#64748b; font-size:.95rem; }
.zcp5 .zc-print-mini:hover, .zcp5 .zc-print-mini:focus-visible{ border-color:#cbd5e1; background:#f8fafc; color:#1e40af; }
@media print{
  html.zc-printing body > *:not(#zcPrint){ display:none !important; }
  html.zc-printing #zcPrint{ position:static !important; display:block !important; overflow:visible !important; }
  html.zc-printing #zcPrint .modal-dialog{ max-width:none; margin:0; transform:none !important; }
  html.zc-printing #zcPrint .modal-content{ border:0; box-shadow:none; }
  html.zc-printing #zcPrint .modal-header, html.zc-printing #zcPrint .modal-footer, html.zc-printing #zcPrint .zc-print-help{ display:none !important; }
  html.zc-printing #zcPrint .modal-body{ padding:0; }
  html.zc-printing .zc-print-img img{ width:100%; max-height:none; border:0; }
}

/* ---- 9. Compare charts (#nb-charts: address and distance) --------------- */
.zcp5 .nb-charts{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1rem; }
@media (max-width: 767.98px){ .zcp5 .nb-charts{ grid-template-columns:1fr; } }
.zcp5 .nb-chart{ background:#fff; border:1px solid #e2e8f0; border-radius:.9rem; padding:1rem 1.1rem; min-width:0; }
.zcp5 .nb-chart > h3{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; font-size:1.05rem; font-weight:600; margin:0 0 .2rem; }
.zcp5 .nb-chart-box{ position:relative; height:240px; }
.zcp5 .nb-chart-box.short{ height:130px; }
.zcp5 .nb-chart-box canvas{ display:block; }
.zcp5 .nb-nums{ margin-top:.5rem; font-size:.85rem; }
.zcp5 .nb-nums summary{ cursor:pointer; color:#1e40af; font-size:.8rem; }
.zcp5 .nb-nums .zcp-manifest{ margin-top:.5rem; }
.zcp5 .nb-nums table{ width:100%; table-layout:fixed; }
.zcp5 .nb-nums th, .zcp5 .nb-nums td{ white-space:normal; overflow-wrap:anywhere; }
.zcp5 .nb-nums th:first-child, .zcp5 .nb-nums td:first-child{ width:44%; }
/* an odd number of charts: the last one takes the whole row */
.zcp5 .nb-charts > .nb-chart:last-child:nth-child(odd){ grid-column:1 / -1; }
.zcp5 .nb-charts > .nb-chart:last-child:nth-child(odd) .nb-chart-box{ max-width:44rem; }

/* ---- 10. Locate a Post Office (postoffice.v5.js) ------------------------ */
.zcp5 .po-layout{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.15fr); gap:1.25rem; align-items:start; }
.zcp5 .po-map-col{ position:sticky; top:calc(var(--zcp-topnav-h, 76px) + 60px); }
@media (max-width: 991.98px){ .zcp5 .po-layout{ grid-template-columns:1fr; } .zcp5 .po-map-col{ position:static; order:-1; } }
.zcp5 .po-list{ list-style:none; margin:0; padding:0; display:grid; gap:.45rem; }
.zcp5 .po-card{ display:flex; gap:.65rem; background:#fff; border:1px solid #e2e8f0; border-radius:.8rem; padding:.6rem .75rem; }
.zcp5 .po-card:hover, .zcp5 .po-card:focus-within{ border-color:#93c5fd; }
.zcp5 .po-card.po-facility{ background:#f8fafc; }
.zcp5 .po-num{ flex:none; width:1.6rem; height:1.6rem; margin-top:.05rem; border-radius:50%; background:#1e40af; color:#fff; font-weight:700; font-size:.85rem; display:flex; align-items:center; justify-content:center; }
.zcp5 .po-facility .po-num{ background:#64748b; }
.zcp5 .po-body{ min-width:0; flex:1; }
/* the name wraps; the distance stays at the top right */
.zcp5 .po-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:.6rem; }
.zcp5 .po-name{ font-weight:600; min-width:0; overflow-wrap:anywhere; line-height:1.3; }
.zcp5 .po-name .zr-tag{ margin-left:.25rem; }
.zcp5 .po-tag-f{ background:#f1f5f9; color:#475569; font-weight:500; }
.zcp5 .po-addr{ font-size:.86rem; color:#334155; line-height:1.35; margin-top:.1rem; }
.zcp5 .po-also{ margin-top:.2rem; }
.zcp5 .po-acts{ margin-top:.4rem; }
.zcp5 .po-mi{ flex:none; white-space:nowrap; font-weight:600; font-size:.82rem; color:#0f172a; background:#f1f5f9; border-radius:999px; padding:.1rem .55rem; }
.zcp5 .po-usps{ background:#fff; border:1px solid #e2e8f0; border-radius:.8rem; padding:.8rem 1rem; font-size:.92rem; }
/* map pins: numbered as in the list */
.po-pin{ width:26px; height:26px; border-radius:50%; border:2px solid #fff; background:#1e40af; color:#fff; font:700 12px/22px system-ui, sans-serif; text-align:center; padding:0; box-shadow:0 1px 4px rgba(15,23,42,.35); cursor:pointer; }
.po-pin.f{ background:#64748b; }
.po-pin.hot, .po-pin:focus-visible{ transform:scale(1.25); background:#ff182b; z-index:3; }
.po-pin-c{ width:14px; height:14px; border-radius:50%; background:#ff182b; border:2px solid #fff; box-shadow:0 1px 3px rgba(15,23,42,.4); }
.zcp5 .po-k{ display:inline-block; width:.8rem; height:.8rem; border-radius:50%; background:#1e40af; vertical-align:-.1rem; margin-right:.2rem; }
.zcp5 .po-k.c{ background:#ff182b; }

/* ---- 11. Distance Calculator (distance.v5.js) ---------------------------- */
.zcp5 .dc-swap{ min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
.zcp5 .dc-facts{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:.75rem; }
@media (max-width: 767.98px){ .zcp5 .dc-facts{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.zcp5 .dc-fact{ background:#fff; border:1px solid #e2e8f0; border-radius:.8rem; padding:.7rem .85rem; display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.zcp5 .dc-fact-k{ font-size:.7rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#64748b; }
.zcp5 .dc-fact b{ font-size:1.15rem; line-height:1.25; }
.zcp5 .dc-k{ display:inline-flex; align-items:center; justify-content:center; width:1.25rem; height:1.25rem; border-radius:50%; background:#1e40af; color:#fff; font-style:normal; font-weight:700; font-size:.7rem; vertical-align:-.15rem; }
.zcp5 .dc-k.b{ background:#0f172a; }
.zcp5 .zr-k.ring.dc-k-line{ width:1.1rem; height:0; border:0; border-top:2.5px dashed #1d4ed8; border-radius:0; background:none; vertical-align:.2rem; }
.zcp5 .zr-k.dc-k-road{ display:inline-block; width:1.1rem; height:0; border-top:3.5px solid #eb6834; vertical-align:.2rem; }
.dc-pin{ width:28px; height:28px; border-radius:50%; border:2px solid #fff; background:#1e40af; color:#fff; font:700 13px/24px system-ui, sans-serif; text-align:center; box-shadow:0 1px 4px rgba(15,23,42,.4); }
.dc-pin.b{ background:#0f172a; }
.zcp5 .dc-table th[scope="row"]{ font-weight:500; color:#334155; }
.zcp5 .dc-table thead th{ white-space:normal; }
.zcp5 .dc-table td, .zcp5 .dc-table th{ vertical-align:top; }
@media (max-width: 575.98px){
  .zcp5 .dc-table{ font-size:.82rem; width:100%; table-layout:fixed; }
  .zcp5 .dc-table th, .zcp5 .dc-table td{ overflow-wrap:anywhere; }
  .zcp5 .dc-table thead th{ letter-spacing:0; font-size:.68rem; }
  .zcp5 .dc-table th:first-child{ width:28%; }
  .zcp5 .dc-table td, .zcp5 .dc-table th{ padding:.4rem .35rem; }
}

/* ---- 12. A row of small buttons (address card, post office cards...) --- */
.zcp5 .zcp-btn-row{ display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; }
.zcp5 .zcp-btn-row .zcp-btn{ display:inline-flex; align-items:center; gap:.3rem; min-height:34px; padding:.25rem .65rem; font-size:.76rem; line-height:1.2; border-width:1px; margin:0; vertical-align:middle; }

/* ---- 12b. An aside to a value: FIPS codes, +/- margins of error --------
   Smaller and gray so it is not read as part of the value; one line, even
   digits. #566375 passes 4.5:1 on white and on the #f0f7fc details band. */
.zcp5 .zc-aside{ font-size:.8em; color:#566375; white-space:nowrap; font-variant-numeric:tabular-nums; font-weight:400; }
/* a note in words ("census-designated place, ...", "City Delivery") may wrap */
.zcp5 .zc-aside-wrap{ white-space:normal; }

/* ---- 12c. A status line: "working on it" with a spinner, or a problem ----
   <div class="zc-status is-busy" role="status" aria-live="polite">; hidden until
   used. is-busy spins; is-error says what went wrong. */
.zcp5 .zc-status{ display:flex; align-items:center; gap:.65rem; margin:.25rem 0 1rem; padding:.8rem 1rem; border:1px solid #bcd7f0; border-radius:.6rem; background:#eef6fd; color:#123a5c; font-size:1rem; font-weight:600; line-height:1.35; }
.zcp5 .zc-status[hidden]{ display:none; }
.zcp5 .zc-status .zc-status-icon{ flex-shrink:0; font-size:1.3rem; color:#2a78d6; }
.zcp5 .zc-status small{ display:block; font-size:.8rem; font-weight:400; color:#40566b; }
.zcp5 .zc-status.is-error{ border-color:#f1c4bf; background:#fdf1ef; color:#7a1f16; }
.zcp5 .zc-status.is-error .zc-status-icon{ color:#c0392b; }
@media (prefers-reduced-motion: reduce){ .zcp5 .zc-status .fa-spin{ animation:none; } }

/* ---- 13. Compact search forms (inc-search-boxes, zip-code-tools.v5.js) -- */
.zcp5 .zs-pane-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.15rem .6rem; margin-bottom:.75rem; }
.zcp5 .zs-pane-head h3{ font-size:1.05rem; font-weight:600; margin:0; }
.zcp5 .zs-pane-head span{ font-size:.85rem; color:#64748b; }
.zcp5 .zs-row{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:.6rem .75rem; }
.zcp5 .zs-row > .zs-f{ flex:1 1 10rem; min-width:0; }
.zcp5 .zs-row > .zs-f.zs-wide{ flex:2 1 16rem; }
.zcp5 .zs-row > .zs-f.zs-sm{ flex:0 1 9rem; }
.zcp5 .zs-row > .zs-f.zs-xs{ flex:0 1 7.5rem; }
.zcp5 .zs-row > .zs-f.zs-state{ flex:0 1 12rem; }
.zcp5 .zs-row > .zs-go{ flex:0 0 auto; }
.zcp5 .zs-row > .zs-go .zcp-cta{ min-height:42px; white-space:nowrap; padding-inline:1.1rem; }
.zcp5 .zs-row .form-control, .zcp5 .zs-row .form-select{ min-height:42px; }
.zcp5 .zs-try{ margin-top:.75rem; }
@media (max-width: 575.98px){
  .zcp5 .zs-row > .zs-f, .zcp5 .zs-row > .zs-f.zs-wide, .zcp5 .zs-row > .zs-go{ flex:1 1 100%; }
  .zcp5 .zs-row > .zs-f.zs-state, .zcp5 .zs-row > .zs-f.zs-xs, .zcp5 .zs-row > .zs-f.zs-sm{ flex:1 1 40%; }
}
/* the clear buttons are real buttons now (keyboard reachable) */
.zcp5 .search-field > button.toggle-clearfield{ border:0; background:none; padding:.25rem; line-height:1; color:#94a3b8; }
.zcp5 .search-field > button.toggle-clearfield:hover, .zcp5 .search-field > button.toggle-clearfield:focus-visible{ color:#1e40af; }
/* state combobox (desktop); phones keep the native select */
.zcp5 .zcs{ position:relative; }
.zcp5 .zcs-native{ position:absolute !important; width:1px !important; height:1px !important; opacity:0; pointer-events:none; overflow:hidden; clip:rect(0 0 0 0); }
.zcp5 .zcs-input{ background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-repeat:no-repeat; background-position:right .7rem center; background-size:12px 10px; padding-right:2rem; }
.zcp5 .zcs-list{ position:absolute; z-index:30; left:0; right:0; top:calc(100% + 4px); max-height:16rem; overflow:auto; margin:0; padding:.25rem; list-style:none; background:#fff; border:1px solid #cbd5e1; border-radius:.6rem; box-shadow:0 8px 24px rgba(15,23,42,.14); }
.zcp5 .zcs-opt{ display:flex; justify-content:space-between; gap:.5rem; padding:.4rem .6rem; border-radius:.4rem; cursor:pointer; font-size:.9rem; }
.zcp5 .zcs-opt small{ color:#64748b; font-weight:600; }
.zcp5 .zcs-opt.on, .zcp5 .zcs-opt:hover{ background:#eff6ff; color:#1e3a8a; }
.zcp5 .zcs-none{ padding:.4rem .6rem; color:#64748b; font-size:.85rem; }
/* "Try one" chips: shared by every tool's search box */
.zcp5 .zr-examples{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; }
.zcp5 .zr-examples-label{ font-size:.82rem; color:#64748b; margin-right:.2rem; }
.zcp5 .zr-examples .zr-chip{ display:inline-flex; align-items:center; min-height:34px; border:1px solid #cbd5e1; border-radius:999px; background:#fff; padding:.2rem .8rem; font-size:.8rem; color:#0f172a; text-decoration:none; }
.zcp5 .zr-examples .zr-chip:hover, .zcp5 .zr-examples .zr-chip:focus-visible{ border-color:#1e40af; color:#1e40af; }
/* plain fields: the site's old search-box indent doesn't apply here; quieter sample text */
.zcp5 .zs-row .form-control, .zcp5 .zs-row .form-select{ padding-left:.75rem; text-align:left; }
.zcp5 .zs-row .search-field .form-control{ padding-right:2.4rem; }
.zcp5 .zs-row .zcs-input{ padding-right:2rem; }
.zcp5 .zs-row .form-control::placeholder{ color:#94a3b8; opacity:1; }

/* ============================== PART B ============================== */
/* ==================================================================
   Part B: map, chart blocks and lists (born on the Radius Finder), shared.
   Part A above already
   carry the form panel, tiles, AI modal, stripes and table hover).
   Every selector starts with .zcp5.
   ================================================================== */

/* form */
.zcp5 .zr-form .form-control{ padding:.55rem .75rem; }
.zcp5 .zr-more > summary{ cursor:pointer; font-weight:600; color:#1d4ed8; font-size:.88rem; }
.zcp5 .zr-radio{ display:block; font-size:.85rem; margin:.15rem 0; }
.zcp5 .zr-radio input{ margin-right:.35rem; }

/* answer band */
.zcp5 .zr-lead{ font-size:1.5rem; }
.zcp5 .zr-line{ color:#334155; font-size:1rem; }
.zcp5 .zr-map-wrap{ border:1px solid #e2e8f0; border-radius:.9rem; overflow:hidden; background:#fff; }
/* fixed height: the map loading never moves the page */
.zcp5 .zr-map{ height:440px; display:flex; align-items:center; justify-content:center; background:#e8eef6; }
.zcp5 .zr-map-key{ display:flex; flex-wrap:wrap; gap:.4rem 1.25rem; padding:.55rem .9rem; border-top:1px solid #f1f5f9; color:#475569; }
.zcp5 .zr-k{ display:inline-block; vertical-align:-.1rem; margin-right:.25rem; }
.zcp5 .zr-k.ring{ width:1.1rem; height:.75rem; border:2.5px solid #1d4ed8; border-radius:50%; }
.zcp5 .zr-k.dot{ width:.7rem; height:.7rem; border-radius:50%; background:#1e40af; }
.zcp5 .zr-k.point{ width:.7rem; height:.7rem; border-radius:50%; border:2px solid #1e40af; background:#fff; }
@media (max-width: 575.98px){ .zcp5 .zr-map{ height:320px; } .zcp5 .zr-lead{ font-size:1.25rem; } }

/* profile: one-line facts */
.zcp5 .zr-facts{ list-style:none; padding:0; margin:1.25rem 0 0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.5rem 2rem; }
.zcp5 .zr-facts li{ position:relative; padding:.45rem 0 .45rem 1.9rem; border-bottom:1px solid #e2e8f0; font-size:.92rem; color:#1e293b; }
.zcp5 .zr-facts li > i{ position:absolute; left:.2rem; top:.62rem; width:1.2rem; text-align:center; color:#1d4ed8; }
@media (max-width: 767.98px){ .zcp5 .zr-facts{ grid-template-columns:1fr; } }

/* banded blocks: chart beside its table (desktop); chart with a table swap (phones) */
.zcp5 .zr-blocks{ display:grid; grid-template-columns:1fr; gap:1.25rem; margin-top:2rem; }
.zcp5 .zr-block{ background:#fff; border:1px solid #e2e8f0; border-radius:.9rem; padding:1rem 1.1rem; }
.zcp5 .zr-block-body{ display:grid; grid-template-columns:minmax(0, 1.7fr) minmax(19rem, 1fr); gap:1.5rem; align-items:start; }
.zcp5 .zr-chart{ position:relative; height:240px; }
.zcp5 .zr-block-table table{ font-size:.78rem; }
.zcp5 .zr-block-table td, .zcp5 .zr-block-table th{ padding:.3rem .55rem; }
.zcp5 .zr-swap{ display:none; }
/* without the chart script the table stands alone */
.zcp5 .zr-block:not(.charted) .zr-chart{ display:none; }
.zcp5 .zr-block:not(.charted) .zr-block-body{ grid-template-columns:1fr; }
@media (max-width: 767.98px){
  .zcp5 .zr-block-body{ grid-template-columns:1fr; }
  .zcp5 .zr-block.charted .zr-swap{ display:inline-block; border:1px solid #cbd5e1; background:#fff; border-radius:999px; padding:.15rem .7rem; font-size:.78rem; margin-bottom:.5rem; }
  .zcp5 .zr-block.charted .zr-block-table{ display:none; }
  .zcp5 .zr-block.charted.show-table .zr-block-table{ display:block; }
  .zcp5 .zr-block.charted.show-table .zr-chart{ display:none; }
}

/* ZIP list */
.zcp5 .zr-chips{ display:flex; flex-wrap:wrap; gap:.4rem; margin:.75rem 0; }
.zcp5 .zr-chip{ border:1px solid #cbd5e1; border-radius:999px; background:#fff; padding:.25rem .8rem; font-size:.8rem; color:#0f172a; }
.zcp5 .zr-chip.active{ background:#0f172a; border-color:#0f172a; color:#fff; }
.zcp5 .zr-table-wrap{ max-height:640px; overflow:auto; }
.zcp5 .zr-table thead th{ position:sticky; top:0; z-index:1; background:#f8fafc; cursor:pointer; user-select:none; white-space:nowrap; }
.zcp5 .zr-table thead th.sorted::after{ content:" \25B2"; font-size:.6rem; color:#64748b; }
.zcp5 .zr-table thead th.sorted.desc::after{ content:" \25BC"; }
.zcp5 .zr-tag{ display:inline-block; margin-left:.35rem; padding:0 .4rem; border-radius:999px; background:#eef2f7; color:#475569; font-size:.68rem; font-weight:600; }
.zcp5 .zr-point{ color:#64748b; border-bottom:1px dotted #94a3b8; cursor:help; }
.zcp5 .zr-share{ display:inline-block; width:3rem; height:.4rem; margin-right:.45rem; vertical-align:.1rem; border-radius:999px; background:linear-gradient(90deg, #1e40af var(--p), #e2e8f0 var(--p)); }
.zcp5 .zr-copies{ display:flex; flex-wrap:wrap; gap:.5rem; }
/* phones: each ZIP Code a small card, no sideways scrolling */
@media (max-width: 575.98px){
  .zcp5 .zr-table-wrap{ max-height:none; }
  .zcp5 .zr-table thead{ display:none; }
  .zcp5 .zr-table tr{ display:grid; grid-template-columns:1fr 1fr; padding:.5rem .25rem; }
  .zcp5 .zr-table td{ padding:.1rem .35rem; border:0; }
  .zcp5 .zr-table td::before{ content:attr(data-label) " "; color:#64748b; font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; }
}

/* compare + API */
.zcp5 .zr-compare table td:first-child{ font-weight:600; }
.zcp5 .zr-pre{ background:#0f172a; color:#e2e8f0; border-radius:.6rem; padding:.9rem 1rem; font-size:.75rem; max-height:420px; overflow:auto; white-space:pre-wrap; word-break:break-word; }

/* hero: rings around 32504 over real streets (TIGER/Line), anchored toward the rings on phones */
.zcp5 .zr-hero-rings{ object-position:70% 50%; }

/* miles: a slider under the number box (drag for speed, type for precision) */
.zcp5 .zr-range{ margin-top:.45rem; accent-color:#1d4ed8; }
/* the button lines up with the inputs, not with the sliders under them */
.zcp5 .zr-go{ padding-top:1.85rem; }
@media (max-width: 575.98px){ .zcp5 .zr-go{ padding-top:0; } }

/* GPS: a button inside the right edge of the ZIP box */
.zcp5 .zr-zip-box{ position:relative; }
.zcp5 .zr-zip-box .form-control{ padding-right:2.6rem; }
.zcp5 .zr-gps{ position:absolute; right:.35rem; top:50%; transform:translateY(-50%); border:0; background:none; color:#1d4ed8; padding:.35rem .5rem; border-radius:.4rem; }
.zcp5 .zr-gps:hover{ background:#eff6ff; }

/* after a search the page opens at the answer (the form posts to #answer): land below the
   sticky site header and the product bar, not under them */
.zcp5 #answer{ scroll-margin-top:calc(var(--zcp-topnav-h, 76px) + 52px + 8px); }

/* Canada has no county: the empty column goes */
.zcp5 .zr-table.zr-ca th:nth-child(3), .zcp5 .zr-table.zr-ca td:nth-child(3){ display:none; }
/* tap targets: 40px at least */
.zcp5 .zr-chip, .zcp5 .zr-block.charted .zr-swap{ min-height:40px; }
.zcp5 .zr-gps{ min-width:40px; min-height:40px; }
/* the ten-year table on phones: each measure a small card (period labels from the header) */
@media (max-width: 575.98px){
  .zcp5 .zr-compare thead{ display:none; }
  .zcp5 .zr-compare tr{ display:grid; grid-template-columns:repeat(3, 1fr); gap:.15rem .5rem; padding:.55rem .35rem; }
  .zcp5 .zr-compare td{ border:0; padding:.05rem .2rem; font-size:.82rem; }
  .zcp5 .zr-compare td:first-child, .zcp5 .zr-compare td:last-child{ grid-column:1 / -1; }
  .zcp5 .zr-compare td:nth-child(2)::before{ content:"2010\2013 14"; }
  .zcp5 .zr-compare td:nth-child(3)::before{ content:"2015\2013 19"; }
  .zcp5 .zr-compare td:nth-child(4)::before{ content:"2020\2013 24"; }
  .zcp5 .zr-compare td:nth-child(n+2):nth-child(-n+4)::before{ display:block; font-size:.66rem; letter-spacing:.04em; color:#64748b; }
  .zcp5 .zr-compare td:last-child{ font-weight:600; }
}

/* Print Map */
.zcp5 .zr-map-key .zr-print-btn{ margin-left:auto; min-height:34px; padding:.2rem .75rem; font-size:.8rem; }
/* phones: sort menu (the column headings are hidden) */
.zcp5 .zr-sort{ display:flex; align-items:center; gap:.5rem; margin:-.25rem 0 .75rem; font-size:.85rem; color:#475569; }
.zcp5 .zr-sort select{ width:auto; min-height:40px; }
@media (min-width: 576px){ .zcp5 .zr-sort{ display:none; } }
/* one-tap examples */
.zcp5 .zr-examples{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; }
.zcp5 .zr-examples-label{ font-size:.82rem; color:#64748b; margin-right:.2rem; }
.zcp5 .zr-examples .zr-chip{ text-decoration:none; display:inline-flex; align-items:center; }
.zcp5 .zr-examples .zr-chip:hover{ border-color:#1e40af; color:#1e40af; }

/* female and male: one split bar */
.zcp5 .zr-split{ display:flex; gap:2px; height:16px; border-radius:999px; overflow:hidden; margin:.75rem 0 .5rem; max-width:40rem; }
.zcp5 .zr-split span{ display:block; height:100%; }
.zcp5 .zr-split .f, .zcp5 .zr-split-key i.f{ background:#e87ba4; }
.zcp5 .zr-split .m, .zcp5 .zr-split-key i.m{ background:#2a78d6; }
.zcp5 .zr-split-key{ display:flex; justify-content:space-between; max-width:40rem; font-size:.88rem; color:#334155; }
.zcp5 .zr-split-key i{ display:inline-block; width:.7rem; height:.7rem; border-radius:2px; margin-right:.3rem; vertical-align:-.05rem; }
/* the work ring and the long-label bars need a little more height */
.zcp5 #zr-work .zr-chart, .zcp5 #zr-race .zr-chart{ height:270px; }

/* print one chart: a small button at the right end of the heading */
.zcp5 .zr-block > h3{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
/* column headings may wrap rather than push the table wider than its column */
.zcp5 .zr-block-table th{ white-space:normal; }
/* female and male: the split bar beside its table */
.zcp5 #zr-sex .zr-block-body{ grid-template-columns:minmax(0, 1.7fr) minmax(19rem, 1fr); align-items:center; }
@media (max-width: 767.98px){ .zcp5 #zr-sex .zr-block-body{ grid-template-columns:1fr; } }

/* the schools of the ZIP Code: opened from the School District box (address details) */
.zcp5 .zs-schools-toggle{ display:inline-flex; align-items:center; gap:.4rem; min-height:36px; padding:.3rem .8rem; font-size:.8rem; border-width:1px; }
.zcp5 .zs-schools-toggle .zs-chev{ transition:transform .2s ease; }
.zcp5 .zs-schools-toggle.open .zs-chev{ transform:rotate(180deg); }
.zcp5 .zs-schools{ background:#fff; border:1px solid #e2e8f0; border-radius:.9rem; padding:1rem 1.1rem; }
.zcp5 .zs-schools > div > p{ font-size:.88rem; color:#475569; }
.zcp5 .zs-schools .row{ --bs-gutter-x:.75rem; margin-top:.5rem !important; margin-bottom:0 !important; }
.zcp5 .zs-schools .card.school{ background:#f8fafc !important; }
@media (prefers-reduced-motion: reduce){ .zcp5 #zsSchools.collapsing{ transition:none; } }