/*
 * visitor-guide.css — the "before you travel" guide on a facility page.
 *
 * Owns only `vg-*` roots. Does not touch the site shell, header, footer,
 * navigation, base typography or shared buttons. Uses canonical --j411-* tokens
 * only, so it works on any facility page in any state rather than inheriting a
 * single county's palette.
 */

.vg {
  max-width: var(--j411-shell, 1260px);
  margin: clamp(3rem, 6vw, 5rem) auto 0;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 4vw, 2.5rem);
  background: var(--j411-ice, #f3f7fb);
  border-top: 6px solid var(--j411-blue, #0877d9);
}

.vg__label {
  margin: 0 0 .35rem;
  font: 700 .72rem/1 Plein, Arial, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--j411-orange, #c5450c);
}

.vg h2 {
  margin: 0 0 .6rem;
  font: 700 clamp(1.9rem, 3.4vw, 2.9rem)/1.05 Plein, Arial, sans-serif;
  letter-spacing: -.025em;
  color: var(--j411-ink, #0b1930);
}

.vg__lede {
  margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
  max-width: 72ch;
  font: 400 1.05rem/1.55 Atkinson, Arial, sans-serif;
  color: var(--j411-copy, #3f5068);
}

/* ---------- bands ---------- */
.vg__band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

.vg__band--three { grid-template-columns: repeat(3, 1fr); }
.vg__band--single { grid-template-columns: 1fr; }

.vg__card {
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
  background: var(--j411-white, #fff);
  border: 1px solid var(--j411-line, #d8e2ec);
}

/* The one card that is an action, not a fact. */
.vg__card--act {
  background: var(--j411-navy, #061b3a);
  border-color: var(--j411-navy, #061b3a);
}

.vg__card--act h3,
.vg__card--act .vg__list li { color: #fff; }
.vg__card--act .vg__list li::marker { color: var(--j411-gold, #f3aa3d); }

.vg__card--rule { border-left: 4px solid var(--j411-orange, #c5450c); }

.vg h3 {
  margin: 0 0 .8rem;
  font: 700 clamp(1.08rem, 1.5vw, 1.28rem)/1.2 Plein, Arial, sans-serif;
  color: var(--j411-ink, #0b1930);
}

.vg h4 {
  margin: 1rem 0 .45rem;
  font: 700 .72rem/1 Plein, Arial, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--j411-muted, #63738a);
}

.vg__ok { color: var(--j411-blue, #0877d9) !important; }
.vg__no { color: var(--j411-orange, #c5450c) !important; }

/* ---------- content ---------- */
.vg__list {
  margin: 0;
  padding-left: 1.1rem;
  max-width: none;
  font: 400 .95rem/1.5 Atkinson, Arial, sans-serif;
  color: var(--j411-copy, #3f5068);
}

.vg__list li { margin-bottom: .4rem; }
.vg__list--no li::marker { color: var(--j411-orange, #c5450c); }

.vg__dl { margin: 0; }

.vg__dl > div {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: .5rem 1rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--j411-line, #d8e2ec);
}

.vg__dl dt {
  font: 700 .72rem/1.3 Plein, Arial, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--j411-muted, #63738a);
}

.vg__dl dd {
  margin: 0;
  font: 400 .98rem/1.4 Atkinson, Arial, sans-serif;
  color: var(--j411-ink, #0b1930);
}

/* The booking number is the action the whole card exists for. */
.vg__tel {
  display: block;
  font: 400 clamp(1.9rem, 3vw, 2.4rem)/1 Tanker, Impact, sans-serif;
  color: #fff;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.vg__tel:hover, .vg__tel:focus-visible { color: var(--j411-gold, #f3aa3d); }

.vg__tel-label {
  margin: .35rem 0 1rem;
  font: 700 .68rem/1 Plein, Arial, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #9fb0c1;
}

.vg__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem clamp(1rem, 2.5vw, 2rem);
}

.vg__warn {
  margin: 0 0 .9rem;
  padding-left: .85rem;
  border-left: 3px solid var(--j411-orange, #c5450c);
  font: 700 .95rem/1.45 Atkinson, Arial, sans-serif;
  color: var(--j411-ink, #0b1930);
}

.vg__tip, .vg__intro {
  margin: .9rem 0 0;
  font: 400 .93rem/1.5 Atkinson, Arial, sans-serif;
  color: var(--j411-copy, #3f5068);
}

.vg__intro { margin: 0 0 .9rem; }

.vg__caveat {
  margin: .8rem 0 0;
  font: 400 .85rem/1.45 Atkinson, Arial, sans-serif;
  color: var(--j411-muted, #63738a);
}

.vg__bands {
  list-style: none;
  margin: 0 0 .25rem;
  padding: 0;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
}

.vg__bands li {
  padding: .8rem .9rem;
  background: var(--j411-ice, #f3f7fb);
  border-left: 3px solid var(--j411-blue, #0877d9);
}

.vg__bands b {
  display: block;
  font: 400 1.22rem/1 Tanker, Impact, sans-serif;
  color: var(--j411-ink, #0b1930);
}

.vg__bands small {
  display: block;
  margin-top: .3rem;
  font: 400 .84rem/1.35 Atkinson, Arial, sans-serif;
  color: var(--j411-muted, #63738a);
}

.vg__addr {
  margin: 0 0 .9rem;
  padding: .8rem .9rem;
  background: var(--j411-ice, #f3f7fb);
  font: 400 .95rem/1.5 Atkinson, Arial, sans-serif;
  color: var(--j411-ink, #0b1930);
}

.vg__foot, .vg__source {
  margin: 1.25rem 0 0;
  font: 400 .92rem/1.5 Atkinson, Arial, sans-serif;
  color: var(--j411-copy, #3f5068);
  max-width: 78ch;
}

.vg__source { color: var(--j411-muted, #63738a); font-size: .86rem; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .vg__band,
  .vg__band--three { grid-template-columns: 1fr; }
  .vg__bands { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .vg__split { grid-template-columns: 1fr; }
  .vg__dl > div { grid-template-columns: 1fr; gap: .15rem; }
  .vg__tel { font-size: 2rem; }
}

/* ---------- specificity floor ----------
 * This component renders inside state page-scopes (.state-scope-california and
 * friends) whose own rules are more specific than a bare class. Without this
 * the appointment number computed to rgb(7,95,174) -- dark blue on navy, all
 * but unreadable. Every rule below is the same value as above, raised by one
 * class so the component wins inside any scope.
 */
.vg .vg__card--act h3,
.vg .vg__card--act .vg__list,
.vg .vg__card--act .vg__list li { color: #fff; }

.vg .vg__tel,
.vg .vg__card--act a.vg__tel { color: #fff; }

.vg .vg__tel:hover,
.vg .vg__tel:focus-visible,
.vg .vg__card--act a.vg__tel:hover,
.vg .vg__card--act a.vg__tel:focus-visible { color: var(--j411-gold, #f3aa3d); }

.vg .vg__tel-label { color: #cfe0f2; }

.vg .vg__label { color: var(--j411-orange, #c5450c); }
.vg .vg__ok { color: var(--j411-blue, #0877d9); }
.vg .vg__no { color: var(--j411-orange, #c5450c); }
.vg .vg__list { color: var(--j411-copy, #3f5068); }
.vg .vg__caveat, .vg .vg__source { color: var(--j411-muted, #63738a); }
.vg .vg__dl dd, .vg .vg__warn, .vg .vg__bands b { color: var(--j411-ink, #0b1930); }
.vg .vg__dl dt { color: var(--j411-muted, #63738a); }

/* ---------- paragraph floor ----------
 * Diagnosed, not guessed: `.state-scope-california .ca-record-body p` (0,2,1)
 * was recolouring EVERY paragraph in this component, including the appointment
 * label on the navy card where it went unreadable. The others only survived
 * because --ca-copy happens to sit near our own slate.
 *
 * `section.vg p.x` is (0,2,2), so the component wins inside that scope and any
 * future state scope built the same way -- without !important.
 */
section.vg p.vg__lede { color: var(--j411-copy, #3f5068); }
section.vg p.vg__label { color: var(--j411-orange, #c5450c); }
section.vg p.vg__warn { color: var(--j411-ink, #0b1930); }
section.vg p.vg__tip,
section.vg p.vg__intro,
section.vg p.vg__foot { color: var(--j411-copy, #3f5068); }
section.vg p.vg__caveat,
section.vg p.vg__source { color: var(--j411-muted, #63738a); }
section.vg p.vg__addr { color: var(--j411-ink, #0b1930); }
section.vg .vg__card--act p.vg__tel-label { color: #cfe0f2; }
section.vg .vg__card--act a.vg__tel { color: #fff; }
section.vg .vg__card--act a.vg__tel:hover,
section.vg .vg__card--act a.vg__tel:focus-visible { color: var(--j411-gold, #f3aa3d); }

/* 4.48:1 against the ice ground was a hair under AA at this size. */
section.vg p.vg__source { color: var(--j411-copy, #3f5068); }

/* ---------- blocks restored in the faithful rebuild ---------- */
.vg__phones { list-style: none; margin: 0; padding: 0; max-width: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 2rem; }
.vg__phones li { display: flex; flex-direction: column; gap: .2rem;
  padding: .7rem 0; border-bottom: 1px solid var(--j411-line, #d8e2ec); }
.vg__phones span { font: 700 .7rem/1.3 Plein, Arial, sans-serif; letter-spacing: .1em;
  text-transform: uppercase; color: var(--j411-muted, #63738a); }
.vg__phones a { font: 400 1.5rem/1 Tanker, Impact, sans-serif; color: var(--j411-navy, #061b3a);
  text-underline-offset: 4px; }
section.vg .vg__phones a:hover, section.vg .vg__phones a:focus-visible { color: var(--j411-orange, #c5450c); }

.vg__flag { display: inline-block; margin-left: .5rem; padding: .2rem .5rem;
  background: var(--j411-orange, #c5450c); color: #fff;
  font: 700 .62rem/1 Plein, Arial, sans-serif; letter-spacing: .12em; vertical-align: middle; }

section.vg p.vg__no-line { margin: .8rem 0 0; padding-left: .85rem;
  border-left: 3px solid var(--j411-orange, #c5450c);
  font: 400 .9rem/1.45 Atkinson, Arial, sans-serif; color: var(--j411-copy, #3f5068); }

section.vg p.vg__inline-tel { margin: .9rem 0 0; font: 400 .98rem/1.5 Atkinson, Arial, sans-serif;
  color: var(--j411-ink, #0b1930); }
section.vg p.vg__inline-tel a { font: 400 1.25rem/1 Tanker, Impact, sans-serif;
  color: var(--j411-navy, #061b3a); }

@media (max-width: 700px) { .vg__phones { grid-template-columns: 1fr; } }

/* ---------- the visiting page hero ---------- */
.vgp__hero { max-width: var(--j411-shell,1260px); margin: 0 auto;
  padding: clamp(2.5rem,5vw,4rem) clamp(1.25rem,4vw,2.5rem) 0; }
.vgp__kicker { margin:0 0 .4rem; font:700 .72rem/1 Plein,Arial,sans-serif; letter-spacing:.16em;
  text-transform:uppercase; color: var(--j411-orange,#c5450c); }
.vgp__hero h1 { margin:0 0 .6rem; font:700 clamp(2.1rem,4vw,3.4rem)/1.03 Plein,Arial,sans-serif;
  letter-spacing:-.03em; color: var(--j411-ink,#0b1930); }
.vgp__addr { margin:0 0 1.25rem; font:400 1.05rem/1.5 Atkinson,Arial,sans-serif; color: var(--j411-copy,#3f5068); }
.vgp__actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-bottom:1rem; }
.vgp__back { margin:0; font:400 .92rem/1.5 Atkinson,Arial,sans-serif; }

/* ---------- the callout on the facility record ---------- */
.vgc { max-width: var(--j411-shell,1260px); margin: clamp(2rem,4vw,3rem) auto 0;
  padding: clamp(1.5rem,3vw,2.25rem); background: var(--j411-ice,#f3f7fb);
  border-left: 6px solid var(--j411-blue,#0877d9);
  display:grid; grid-template-columns: 1fr auto; gap:1.25rem 2rem; align-items:center; }
.vgc__label { margin:0 0 .3rem; font:700 .7rem/1 Plein,Arial,sans-serif; letter-spacing:.14em;
  text-transform:uppercase; color: var(--j411-orange,#c5450c); }
.vgc h2 { margin:0 0 .5rem; font:700 clamp(1.3rem,2.2vw,1.75rem)/1.15 Plein,Arial,sans-serif;
  color: var(--j411-ink,#0b1930); }
.vgc h2 a { color: inherit; }
.vgc__lede { margin:0 0 .9rem; max-width:70ch; font:400 .98rem/1.5 Atkinson,Arial,sans-serif;
  color: var(--j411-copy,#3f5068); }
.vgc__at-a-glance { display:flex; flex-wrap:wrap; gap:.5rem 2rem; margin:0; }
.vgc__at-a-glance dt { font:700 .66rem/1.3 Plein,Arial,sans-serif; letter-spacing:.1em;
  text-transform:uppercase; color: var(--j411-muted,#63738a); }
.vgc__at-a-glance dd { margin:0; font:400 .98rem/1.4 Atkinson,Arial,sans-serif; color: var(--j411-ink,#0b1930); }
.vgc__go { align-self:center; padding:.85rem 1.25rem; background: var(--j411-navy,#061b3a); color:#fff;
  font:700 .75rem/1 Plein,Arial,sans-serif; letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none; white-space:nowrap; }
.vgc__go:hover, .vgc__go:focus-visible { background: var(--j411-orange,#c5450c); color:#fff; }
@media (max-width:760px){ .vgc { grid-template-columns:1fr; } .vgc__go { text-align:center; } }

.vgp__btn { display:inline-flex; align-items:center; gap:.5rem; padding:.85rem 1.2rem;
  border:2px solid var(--j411-navy,#061b3a); background: var(--j411-white,#fff);
  color: var(--j411-navy,#061b3a); font:700 .78rem/1 Plein,Arial,sans-serif;
  letter-spacing:.06em; text-transform:uppercase; text-decoration:none; }
.vgp__btn strong { font:400 1.15rem/1 Tanker,Impact,sans-serif; letter-spacing:0; }
.vgp__btn--primary { background: var(--j411-orange,#c5450c); border-color: var(--j411-orange,#c5450c); color:#fff; }
.vgp__btn:hover, .vgp__btn:focus-visible { background: var(--j411-navy,#061b3a); border-color: var(--j411-navy,#061b3a); color:#fff; }
@media (max-width:560px){ .vgp__actions{display:grid} .vgp__btn{justify-content:center} }

/* ---------- onward routes ----------
 * A visiting page is a common landing point from search and had no link back to
 * the county hub, the charge and bail lookup, or the sibling jails. Eight pages
 * were dead ends.
 */
.vgp__onward {
  max-width: var(--j411-shell, 1260px);
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 4vw, 2.5rem);
  background: var(--j411-navy, #061b3a);
}

.vgp__onward h2 {
  margin: 0 0 1rem;
  font: 700 clamp(1.2rem, 1.9vw, 1.5rem)/1.2 Plein, Arial, sans-serif;
  color: #fff;
}

.vgp__onward ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: .75rem;
}

.vgp__onward a {
  display: block;
  padding: .9rem 1rem;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .25);
  text-decoration: none;
}

.vgp__onward a b { display: block; font: 700 .98rem/1.25 Plein, Arial, sans-serif; color: #fff; }
.vgp__onward a small { display: block; margin-top: .25rem; font: 400 .82rem/1.35 Atkinson, Arial, sans-serif; color: #9fb0c1; }
.vgp__onward a:hover, .vgp__onward a:focus-visible { background: #fff; border-color: #fff; }
.vgp__onward a:hover b, .vgp__onward a:focus-visible b { color: var(--j411-navy, #061b3a); }
.vgp__onward a:hover small, .vgp__onward a:focus-visible small { color: var(--j411-muted, #63738a); }

/* The callout on a facility record carries the county route too. */
.vgc__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.vgc__up {
  font: 700 .74rem/1 Plein, Arial, sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--j411-orange, #c5450c);
  white-space: nowrap;
}

@media (max-width: 760px) {
  .vgc__actions { display: grid; }
  .vgc__up { text-align: center; }
}

/* ---------- AA floor for small text on the charges page ----------
 * Measured at 1440: `small` 4.37, statute links 4.09, `.cb__tag` 3.54 — all
 * under 4.5 at 12–16px. Darker siblings of the same hues, scoped to this page's
 * own components only.
 */
.cb__what small,
.cb__what em,
.bs__what small,
section.bs p.bs__group-note,
.cb__general-list span,
.cb__hint,
.cb__bail i,
.bs-flow figcaption,
.bs-flow__s { color: #45566b !important; }

.bs-flow__s { fill: #45566b !important; }

.cb__bail--unlisted a { color: #0a5ca8 !important; }

section.bs p.bs__label,
.cb__kicker,
.bs__qual,
.cb__qual { color: #a8390b !important; }

/* The badge was the worst at 3.54 — muted on ice at 16px. */
.cb__what b span.cb__tag { color: #3f5068; background: #e4ecf4; border-color: #b9c8d8; }
.cb__what b span.cb__tag--sub { color: #fff; background: #a8390b; border-color: #a8390b; }
.cb__what b span.cb__tag--combo { color: #fff; background: #45566b; border-color: #45566b; }

/* The visiting guide's source note and captions sit at 4.48. */
section.vg p.vg__source,
section.vg p.vg__caveat,
.vg__phones span,
.vg__list small { color: #45566b !important; }

/* Visiting guide: the three remaining 4.48 items are small print on ice. */
section.vg .vg__dl dt,
section.vg .vg__bands small,
section.vg .vg__card small { color: #45566b; }

/* ---------- B1: the visiting-guide CTA was unreadable ----------
 * `.state-scope-california .ca-record-body a` (0,2,1) in california-shared.css
 * paints every link in that body #075fae, which on the navy button measured
 * 2.66:1. Raise specificity rather than reach for !important. White on navy
 * measures 17.13:1.
 */
.state-scope-california .ca-record-body a.vgc__go,
a.vgc__go { color: #fff; }

/* ---------- B2: the provenance label was navy-on-navy ----------
 * site.css sets `.source-line b { color: var(--ink) }` for a light ground; the
 * California facility hero puts the same element on navy, so the label rendered
 * invisible AND still occupied 193px, leaving the sentence starting ~290px in
 * with nothing before it. Inherit the hero's own colour instead.
 */
.state-scope-california .ca-record-hero .source-line b { color: inherit; }

/* A second upward link sits beside the first; keep them from colliding. */
.vgc__actions { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }