/* Child Care Directory: the commuter flow map's layout and tokens (../app.css) with a search rail,
   the map, and a results panel listing programs and the county's resource and referral agency.
   A separate printed report replaces the page when printing or saving as PDF. */
.cc-page .app { --rpanel: 400px; }
/* Read by screen readers only */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* A focus ring that keeps 3:1 contrast in the dark theme too (--accent-text is the brand red in
   the light theme) */
.cc-page :focus-visible { outline-color: var(--accent-text); }
#res-h:focus { outline: none; }
/* The map tip has its own dark (light, in the dark theme) background, so its ring takes the tip's ink */
.cc-page .tip :focus-visible { outline-color: currentColor; }
/* The suggestion that Enter will run, and the chosen tab, marked at 3:1 or more in both themes */
.cc-page .results li[aria-selected="true"] { outline: 2px solid var(--accent-text); outline-offset: -2px; }
.cc-page .tabs button[aria-selected="true"] { border-bottom-color: var(--accent-text); }
/* The partner's name stays on one line on this page's longer title */
.cc-page .product .partner strong { white-space: nowrap; }
/* The search status line stays in place for screen readers while it is empty */
#near-status:empty { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Buttons and inputs */
.btnrow { display: flex; flex-wrap: wrap; gap: 6px; }
.btn { border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); border-radius: 8px; padding: 7px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.btn:hover { filter: brightness(0.92); }
.btn.ghost { background: var(--panel); color: var(--ink); border-color: var(--line-2); }
.btn.ghost:hover { border-color: var(--ink-3); filter: none; }
.textin { width: 100%; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--panel); }
.textin::placeholder { color: var(--ink-3); }
input[type="range"] { width: 100%; margin: 2px 0 0; accent-color: var(--accent); }
.rangekey { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-3); margin-top: -2px; }
.field label b { color: var(--ink); font-weight: 600; }

/* Program types, with counts for the current search */
#types { display: grid; gap: 4px; }
#types .check { min-height: 24px; }
#types .check em { font-style: normal; color: var(--ink-3); font-variant-numeric: tabular-nums; margin-left: auto; }
.about { display: grid; gap: 8px; margin-top: 8px; }
.about p { margin: 0; }

/* Results summary */
.summary { display: grid; gap: 10px; }
.summary p { margin: 0; }
.summary .lead { color: var(--ink-2); font-size: 13.5px; }
.summary .where { font-weight: 600; font-size: 13.5px; color: var(--ink); overflow-wrap: anywhere; }
.summary .near1 { font-size: 13px; color: var(--ink-2); }
.summary .near1 b { color: var(--ink); font-weight: 600; }
.bytype { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 3px 12px; font-size: 12.5px; color: var(--ink-2); }
.bytype li { display: flex; align-items: center; gap: 6px; }
.bytype b { color: var(--ink); min-width: 1.6em; text-align: right; font-variant-numeric: tabular-nums; }
.actions { display: flex; flex-wrap: wrap; gap: 6px; }
.actions .btn { font-size: 12.5px; padding: 6px 10px; }
/* The copied link can be printed in full when the browser refuses the clipboard */
#share-note { overflow-wrap: anywhere; }

/* Resource and referral agency */
#agency { gap: 8px; }
.agency-card { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 8px; padding: 10px 12px; display: grid; gap: 3px; font-size: 13px; color: var(--ink-2); }
.agency-card p { margin: 0; }
.agency-card .an { font-family: var(--font-display); font-weight: 500; font-size: 17px; line-height: 1.2; color: var(--ink); }
.agency-card .serves { font-size: 12.5px; }
.agency-card .contact { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.agency-card a { overflow-wrap: anywhere; }
.agency-card .contact a { display: inline-block; padding: 3px 0; }
#agency .also { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-2); }
.agency-list { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 12.5px; color: var(--ink-2); }
.agency-list b { font-weight: 600; color: var(--ink); }

/* Program list */
.listhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.sortby { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.sortby select { width: auto; padding: 4px 8px; font-size: 12.5px; font-weight: 400; }
.plist { list-style: none; margin: 0; padding: 0; display: grid; }
.prog { padding: 9px 8px; border-bottom: 1px solid var(--line); display: grid; gap: 2px; border-radius: 6px; }
.prog:last-child { border-bottom: 0; }
.prog:hover { background: var(--bg); }
.prog.on { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent-text); }
.prog.on .pc, .prog.on .dash { color: var(--ink-2); }
.prog .ph { display: flex; align-items: flex-start; gap: 7px; }
.prog .ph .sym { margin-top: 2px; }
.prog .pn { font-weight: 600; font-size: 13.5px; color: var(--ink); overflow-wrap: anywhere; flex: 1 1 auto; min-width: 0; }
.prog .pd { flex: none; font-size: 12.5px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.prog .pm, .prog .pa, .prog .pc, .prog .pl { padding-left: 21px; font-size: 12.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.prog .pc { color: var(--ink-3); }
/* A 24 px line, so links that wrap onto a second line keep 24 px between their centers (WCAG 2.5.8) */
.prog .pl { line-height: 24px; }
.prog .pl .linkbtn { font-size: 12.5px; }
.flag { display: inline-block; padding: 0 6px; border-radius: 4px; background: var(--warn-bg); color: var(--warn-ink); font-size: 11.5px; font-weight: 600; }
#more { justify-self: center; margin-top: 4px; }

/* "Find programs near this one" in a pinned tip */
.tip .tipbtn { margin-top: 6px; padding: 4px 9px; border: 1px solid currentColor; border-radius: 6px; background: transparent; color: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.tip .tipbtn:hover { background: rgba(127, 127, 127, 0.2); }

/* Map legend extras; on phones the key folds away behind a "Map key" button */
.legend-toggle { display: none; }
.legend-body { display: grid; gap: 6px; }
.dashring { width: 14px; height: 14px; border-radius: 50%; border: 1.5px dashed var(--site); background: var(--radius-fill); display: inline-block; }
.fadedot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-3); opacity: 0.35; display: inline-block; }

/* Contrast themes drop backgrounds and shadows, so the chosen tab, view, and program get a line */
@media (forced-colors: active) {
  .cc-page .tabs button[aria-selected="true"], .cc-page .seg button[aria-pressed="true"] { text-decoration: underline; text-underline-offset: 3px; }
  .prog.on { outline: 2px solid CanvasText; outline-offset: -2px; }
  /* The key's faded dot would take the legend's own background and vanish */
  .fadedot { forced-color-adjust: none; background: GrayText; opacity: 1; }
}

@media (max-width: 820px) {
  /* Room for the sticky Search and Results tabs, so a focused item never hides under them */
  html { scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 52px); }
  /* 16px text keeps iOS Safari from zooming the page when a field is tapped */
  .cc-page .search input, .cc-page select, .cc-page .textin, .cc-page .sortby select { font-size: 16px; }
  .bytype { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .legend { padding: 6px 10px; }
  .legend-toggle { display: block; border: 0; background: none; padding: 2px 0; font-weight: 600; font-size: 12px; color: var(--ink); cursor: pointer; text-align: left; }
  .legend-toggle::after { content: " ▸"; }
  .legend.open .legend-toggle::after { content: " ▾"; }
  .legend:not(.open) .legend-body { display: none; }
}

/* Printed report: hidden on screen, and when there is one (html.has-report), the only thing printed.
   Fixed light colors, whatever the theme, to match the light map snapshot. */
.report { display: none; }
@media print {
  @page { margin: 14mm 12mm; }
  .has-report, .has-report body { height: auto !important; background: #ffffff !important; }
  .has-report body { display: block !important; }
  .has-report body > :not(#report) { display: none !important; }
  .has-report .report {
    display: block !important; color: #222222; background: #ffffff; font-size: 10.5pt; line-height: 1.35;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    --ink: #222222; --ink-2: #4d4d4d; --ink-3: #6b6b6b; --line: #d9d5cf; --line-2: #bdb5a9; --panel: #ffffff; --bg: #ffffff;
    --accent: #b31b1b; --accent-text: #b31b1b; --accent-soft: #f6e3e3; --logo-ink: #222222; --logo-red: #b31b1b; --logo-dash: #ffffff;
    --cc-dcc: #006699; --cc-sdcc: #4b7b2b; --cc-gfdc: #73508f; --cc-fdc: #d47500; --cc-sacc: #222222; --cc-sbcc: #8c8579;
    --cc-halo: #ffffff; --site: #222222; --site-halo: #ffffff; --radius-fill: rgba(34, 34, 34, 0.06);
  }
  .rep-key { justify-content: center; margin: -4px 0 10px; font-size: 8.5pt; color: #4d4d4d; gap: 4px 14px; }
  .rep-key .sym { width: 11px; height: 11px; }
  .report a { color: #222222; text-decoration: none; }
  .rep-head { display: flex; gap: 16px; align-items: flex-start; border-top: 4px solid #b31b1b; padding-top: 8px; margin-bottom: 10px; }
  .rep-logo .logo { width: 130px; height: auto; display: block; }
  .rep-eyebrow { margin: 0; font-family: var(--font-display); font-size: 9pt; letter-spacing: 0.06em; text-transform: uppercase; color: #b31b1b; font-weight: 500; }
  .rep-head h1 { margin: 2px 0 4px; font-family: var(--font-display); font-weight: 500; font-size: 16pt; line-height: 1.15; }
  .rep-meta { margin: 0; color: #4d4d4d; font-size: 9.5pt; }
  .rep-map { display: block; width: auto; height: auto; max-width: 100%; max-height: 105mm; border: 1px solid #d9d5cf; margin: 0 auto 10px; break-inside: avoid; }
  .rep-agency { margin: 0 0 10px; padding: 0; display: grid; gap: 6px; break-inside: avoid; }
  .rep-agency .eyebrow { font-size: 9.5pt; color: #4d4d4d; }
  .rep-agency .hint { margin: 0; font-size: 9pt; color: #4d4d4d; }
  .rep-agency .agency-card { font-size: 9.5pt; padding: 6px 10px; }
  .rep-agency .agency-card .an { font-size: 12pt; }
  .rep-agency .agency-card .contact { display: flex; flex-wrap: wrap; gap: 2px 16px; }
  .rep-table { width: 100%; border-collapse: collapse; font-size: 9pt; font-variant-numeric: tabular-nums; }
  .rep-table th, .rep-table td { text-align: left; vertical-align: top; padding: 4px 6px 4px 0; border-bottom: 1px solid #d9d5cf; max-width: none; white-space: normal; }
  .rep-table th { font-size: 8.5pt; color: #4d4d4d; border-bottom: 1px solid #8c8579; }
  .rep-table td:first-child, .rep-table th:first-child { width: 2.2em; color: #6b6b6b; }
  .rep-table .num { text-align: right; white-space: nowrap; }
  .rep-table .tel { white-space: nowrap; }
  .rep-table .sub { display: block; color: #4d4d4d; font-size: 8.5pt; }
  .rep-table tr { break-inside: avoid; }
  .rep-table thead { display: table-header-group; }
  .rep-note { margin: 8px 0 0; font-size: 8.5pt; color: #4d4d4d; }
}