/* Auto-generated surgeons-state-index CSS - do not edit manually */
/* Source: scripts/lib/surgeons-index-css.js - run: node scripts/generate-shared-css.js */
/* Cascade contract: linked AFTER /css/shared.css. */

    /* === /surgeons/ STATE INDEX === */
    /* Header, footer, card, hero-system and background CSS: /css/shared.css */
    * { box-sizing: border-box; }

    /* The hero is centered, like /surgeons/<code>/ (scripts/lib/state-css.js):
       this page is the parent of those 51 pages and has to read as the same
       page type. */
    .hero-content {
      position: relative;
      text-align: center;
    }

    /* Breadcrumb. The hero system positions it; the colours live in each page
       type's own sheet, so without this the links fell back to the UA default
       (#0000ee on #202124, contrast 1.71 in dark mode). Values match
       scripts/lib/state-css.js so /surgeons/ and /surgeons/<code>/ agree. */
    .breadcrumb {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 14px;
      color: #5f6368;
    }
    html.dark .breadcrumb { color: #9aa0a6; }
    .breadcrumb a { color: #1d4ed8; text-decoration: none; }
    .breadcrumb a:hover { color: #1e40af; text-decoration: underline; }
    html.dark .breadcrumb a { color: #93c5fd; }
    html.dark .breadcrumb a:hover { color: #bfdbfe; }
    .breadcrumb-current { color: var(--text-primary); }
    @media (max-width: 640px) {
      /* WCAG 2.5.8: breadcrumb links get >=44px tap height on mobile */
      .breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; }
    }

    .surgeons-index-main {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 16px 64px;
    }

    /* Section rhythm comes from the --space-* scale, like the hero system. */
    .surgeons-index-section {
      margin-top: var(--space-7);
    }
    /* Section headings take the shared h2 size (var(--step-2), 25px at every
       width, above the 24px floor the display serif is allowed at). This used
       to be a private clamp, 28px down to 24px at 700 weight, which was the
       only place on the site a section heading was not 25/600. */
    .surgeons-index-section > h2 {
      color: var(--text-primary);
      margin: 0 0 var(--space-3);
    }
    .surgeons-index-section > .surgeons-index-note {
      font-size: 15px;
      color: var(--text-secondary);
      max-width: var(--measure);
      margin: 0 0 var(--space-5);
    }

    /* --- 51-state card grid --- */
    .state-card-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      list-style: none;
      margin: 0;
      padding: 0;
    }
    @media (min-width: 768px) {
      .state-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    }
    @media (min-width: 1024px) {
      .state-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }

    .state-card {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      color: var(--text-primary);
      text-decoration: none;
      min-height: 84px;
    }
    .state-card:hover,
    .state-card:focus-visible {
      border-color: var(--accent-primary);
      box-shadow: var(--shadow-2);
    }

    /* Silhouette as a card mark: same render as the state page hero
       (scripts/lib/state-silhouette.js), token-colored so html.dark repaints
       it, and fixed-width so 51 cards of very different shapes still line up. */
    .state-card .state-silhouette {
      flex: 0 0 auto;
      height: 44px;
      width: 52px;
      overflow: visible;
    }
    .state-card .state-silhouette path {
      fill: var(--interactive-surface);
      stroke: var(--accent-primary);
    }

    .state-card-body { min-width: 0; }
    .state-card-name {
      display: block;
      font-weight: 600;
      font-size: 15px;
      line-height: 1.3;
      color: var(--text-primary);
    }
    .state-card-count {
      display: block;
      font-size: 14px;
      font-variant-numeric: tabular-nums;
      color: var(--text-secondary);
      margin-top: 2px;
    }
    .state-card-share {
      display: block;
      font-size: 13px;
      color: var(--text-secondary);
      margin-top: 2px;
    }

    /* One column under 640px. Two 175px columns wrapped "Knee, 57% of
       procedures" onto three lines in every card, which turned a scannable
       grid into a wall of ragged text. */
    @media (max-width: 640px) {
      .state-card-grid { grid-template-columns: 1fr; gap: 8px; }
      .state-card { padding: 10px 12px; min-height: 64px; }
      .state-card .state-silhouette { height: 38px; width: 44px; }
    }


    /* ===== US CHOROPLETH (scripts/lib/us-map.js) =====
       Five solid shading buckets from the Gemini accent, one <a> per state. */
    :root {
      --map-b1: rgba(59,130,246,0.18);
      --map-b2: rgba(59,130,246,0.34);
      --map-b3: rgba(59,130,246,0.5);
      --map-b4: rgba(59,130,246,0.68);
      --map-b5: rgba(59,130,246,0.88);
    }
    html.dark {
      --map-b1: rgba(96,165,250,0.12);
      --map-b2: rgba(96,165,250,0.28);
      --map-b3: rgba(96,165,250,0.46);
      --map-b4: rgba(96,165,250,0.66);
      --map-b5: rgba(96,165,250,0.88);
    }

    .us-map {
      position: relative;
      max-width: 900px;
      margin: 0 auto;
    }
    .us-map__svg {
      display: block;
      width: 100%;
      height: auto;
      overflow: visible;
    }

    /* Each state is an <a> wrapping one <path>; fill inherits down to the path. */
    .us-map__state {
      stroke: var(--bg-primary);
      stroke-width: 1;
      stroke-linejoin: round;
      cursor: pointer;
      outline: none;
      transition: fill 0.15s ease, stroke 0.15s ease, stroke-width 0.15s ease;
    }
    .us-map__state[data-bucket="1"] { fill: var(--map-b1); }
    .us-map__state[data-bucket="2"] { fill: var(--map-b2); }
    .us-map__state[data-bucket="3"] { fill: var(--map-b3); }
    .us-map__state[data-bucket="4"] { fill: var(--map-b4); }
    .us-map__state[data-bucket="5"] { fill: var(--map-b5); }
    .us-map__state:hover,
    .us-map__state:focus,
    .us-map__state:focus-visible {
      fill: var(--accent-dark);
      stroke: var(--text-primary);
      stroke-width: 2;
    }
    /* Keyboard focus gets a visible ring on top of the fill swap. */
    .us-map__state:focus-visible {
      outline: 3px solid var(--accent-primary);
      outline-offset: 2px;
    }
    .us-map__state path { vector-effect: non-scaling-stroke; }

    /* --- Tooltip --- */
    .us-map__tip {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 4;
      pointer-events: none;
      opacity: 0;
      visibility: hidden;
      max-width: 220px;
      padding: 8px 12px;
      background-color: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-sm);
      box-shadow: var(--shadow-2);
      text-align: left;
      line-height: 1.35;
      transition: opacity 0.12s ease;
    }
    .us-map__tip.is-visible { opacity: 1; visibility: visible; }
    /* Caret: a rotated square borrowing the tooltip's own surface + border, so
       two of its sides read as the pointer and the other two hide under the
       body. --tip-caret-x is set by the inline script to the hovered state's
       center, because the tooltip itself is clamped to the container. */
    .us-map__tip::after {
      content: '';
      position: absolute;
      left: var(--tip-caret-x, 50%);
      bottom: -6px;
      width: 10px;
      height: 10px;
      background-color: var(--bg-card);
      border: 1px solid var(--border-color);
      border-top: 0;
      border-left: 0;
      transform: translateX(-50%) rotate(45deg);
    }
    /* Near the top edge of the container (WA, ND, ME) the tooltip would clamp
       on top of the state it describes, so it flips underneath and the caret
       moves to the top edge. */
    .us-map__tip--below::after {
      bottom: auto;
      top: -6px;
      border: 1px solid var(--border-color);
      border-bottom: 0;
      border-right: 0;
    }
    .us-map__tip-name {
      display: block;
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--text-primary);
    }
    .us-map__tip-count {
      display: block;
      font-size: 0.85rem;
      color: var(--text-secondary);
    }

    /* --- Legend --- */
    .us-map__legend {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px 18px;
      margin: 14px 0 0;
      padding: 0;
      list-style: none;
    }
    .us-map__legend-item {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--text-secondary);
      white-space: nowrap;
    }
    .us-map__swatch {
      display: inline-block;
      width: 16px;
      height: 16px;
      border: 1px solid var(--border-color);
      border-radius: 3px;
    }
    .us-map__swatch--b1 { background-color: var(--map-b1); }
    .us-map__swatch--b2 { background-color: var(--map-b2); }
    .us-map__swatch--b3 { background-color: var(--map-b3); }
    .us-map__swatch--b4 { background-color: var(--map-b4); }
    .us-map__swatch--b5 { background-color: var(--map-b5); }

    /* --- A-to-Z fallback list (also the crawlable link set) --- */
    .us-map__list {
      max-width: 900px;
      margin: 20px auto 0;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-sm);
      background-color: var(--bg-card);
    }
    /* No 'display: flex' here: it suppresses the native disclosure triangle in
       every engine, leaving the collapsed bar with no affordance. The 44px hit
       target comes from padding + line-height instead. */
    .us-map__list-summary {
      padding: 11px 16px;
      font-size: 0.95rem;
      line-height: 22px;
      font-weight: 700;
      color: var(--text-primary);
      cursor: pointer;
      /* The homepage wrapper is .text-center; the bar heads a left-aligned
         directory list, so it opts back out along with the list. */
      text-align: left;
    }
    .us-map__list-summary::marker { color: var(--text-secondary); }
    /* Safari renders the triangle as ::-webkit-details-marker, not ::marker. */
    .us-map__list-summary::-webkit-details-marker { color: var(--text-secondary); }
    .us-map__list-summary:focus-visible {
      outline: 3px solid var(--accent-primary);
      outline-offset: -3px;
    }
    .us-map__list-items {
      columns: 2;
      column-gap: 24px;
      margin: 0;
      padding: 0 16px 16px;
      list-style: none;
      /* The homepage's main wrapper is .text-center; the link list reads as a
         directory, so opt back out of it. */
      text-align: left;
    }
    .us-map__list-items li { break-inside: avoid; }
    .us-map__list-link {
      display: block;
      padding: 6px 0;
      font-size: 0.9rem;
      color: var(--text-primary);
      text-decoration: none;
    }
    .us-map__list-link:hover { text-decoration: underline; }
    .us-map__list-count { color: var(--text-secondary); }

    /* --- Compact block (homepage first screen: renderUSMap(c, {compact})) ---
       Below 1024px this is plain block flow, i.e. exactly the stacked
       map-then-legend order the full-width render has always used. From
       1024px up the legend becomes a column to the right of the map and the
       map takes the height cap. */
    .us-map-block { margin: 0 auto; }
    @media (min-width: 1024px) {
      .us-map-block--compact {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-6);
      }
      .us-map-block--compact .us-map {
        /* grow, do not shrink-to-fit: an <svg> with width:100% and no
           intrinsic width has a 300px default size, so flex-basis:auto would
           render the map at 300x188 instead of filling the row. */
        flex: 1 1 auto;
        min-width: 0;
        /* = height cap min(40vw, 40vh, 360px), expressed on the width so the
           drawing fills its box instead of letterboxing inside it. */
        max-width: calc(min(40vw, 40vh, 360px) * 1.5984);
        margin: 0;
      }
      .us-map-block--compact .us-map__legend--column {
        flex: 0 0 auto;
        flex-wrap: nowrap;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 10px;
        width: 168px;
        margin: 0;
      }
    }

    /* From 1200px there is room to take the legend out of flow, which puts the
       map back on the page's centre axis. Centring the map and the legend as
       one flex group pulled the drawing ~92px left of the h1 and the search. */
    @media (min-width: 1200px) {
      .us-map-block--compact {
        display: block;
        position: relative;
      }
      .us-map-block--compact .us-map { margin: 0 auto; }
      .us-map-block--compact .us-map__legend--column {
        position: absolute;
        /* The block is >= 1120px here and the map is always at its max-width
           (cap * aspect), centred, so its right edge is 50% + half that
           width. Pin the legend a fixed step past it instead of to the
           block's edge, which drifted 104-136px away as the cap changed. */
        left: calc(50% + (min(40vw, 40vh, 360px) * 1.5984) / 2 + var(--space-6));
        top: 50%;
        transform: translateY(-50%);
      }
    }

    @media (max-width: 640px) {
      .us-map__legend-item { font-size: 0.72rem; }
      .us-map__swatch { width: 13px; height: 13px; }
    }

    /* --- One-shot reveal on first scroll into view --- */
    @media (prefers-reduced-motion: no-preference) {
      .us-map--armed .us-map__state {
        opacity: 0;
        transition: opacity 200ms ease, fill 0.15s ease, stroke 0.15s ease, stroke-width 0.15s ease;
      }
      .us-map--armed.us-map--revealed .us-map__state { opacity: 1; }
      .us-map--armed .us-map__state:nth-child(1) { transition-delay: 0ms; }
      .us-map--armed .us-map__state:nth-child(2) { transition-delay: 8ms; }
      .us-map--armed .us-map__state:nth-child(3) { transition-delay: 16ms; }
      .us-map--armed .us-map__state:nth-child(4) { transition-delay: 24ms; }
      .us-map--armed .us-map__state:nth-child(5) { transition-delay: 32ms; }
      .us-map--armed .us-map__state:nth-child(6) { transition-delay: 40ms; }
      .us-map--armed .us-map__state:nth-child(7) { transition-delay: 48ms; }
      .us-map--armed .us-map__state:nth-child(8) { transition-delay: 56ms; }
      .us-map--armed .us-map__state:nth-child(9) { transition-delay: 64ms; }
      .us-map--armed .us-map__state:nth-child(10) { transition-delay: 72ms; }
      .us-map--armed .us-map__state:nth-child(11) { transition-delay: 80ms; }
      .us-map--armed .us-map__state:nth-child(12) { transition-delay: 88ms; }
      .us-map--armed .us-map__state:nth-child(13) { transition-delay: 96ms; }
      .us-map--armed .us-map__state:nth-child(14) { transition-delay: 104ms; }
      .us-map--armed .us-map__state:nth-child(15) { transition-delay: 112ms; }
      .us-map--armed .us-map__state:nth-child(16) { transition-delay: 120ms; }
      .us-map--armed .us-map__state:nth-child(17) { transition-delay: 128ms; }
      .us-map--armed .us-map__state:nth-child(18) { transition-delay: 136ms; }
      .us-map--armed .us-map__state:nth-child(19) { transition-delay: 144ms; }
      .us-map--armed .us-map__state:nth-child(20) { transition-delay: 152ms; }
      .us-map--armed .us-map__state:nth-child(21) { transition-delay: 160ms; }
      .us-map--armed .us-map__state:nth-child(22) { transition-delay: 168ms; }
      .us-map--armed .us-map__state:nth-child(23) { transition-delay: 176ms; }
      .us-map--armed .us-map__state:nth-child(24) { transition-delay: 184ms; }
      .us-map--armed .us-map__state:nth-child(25) { transition-delay: 192ms; }
      .us-map--armed .us-map__state:nth-child(26) { transition-delay: 200ms; }
      .us-map--armed .us-map__state:nth-child(27) { transition-delay: 208ms; }
      .us-map--armed .us-map__state:nth-child(28) { transition-delay: 216ms; }
      .us-map--armed .us-map__state:nth-child(29) { transition-delay: 224ms; }
      .us-map--armed .us-map__state:nth-child(30) { transition-delay: 232ms; }
      .us-map--armed .us-map__state:nth-child(31) { transition-delay: 240ms; }
      .us-map--armed .us-map__state:nth-child(32) { transition-delay: 248ms; }
      .us-map--armed .us-map__state:nth-child(33) { transition-delay: 256ms; }
      .us-map--armed .us-map__state:nth-child(34) { transition-delay: 264ms; }
      .us-map--armed .us-map__state:nth-child(35) { transition-delay: 272ms; }
      .us-map--armed .us-map__state:nth-child(36) { transition-delay: 280ms; }
      .us-map--armed .us-map__state:nth-child(37) { transition-delay: 288ms; }
      .us-map--armed .us-map__state:nth-child(38) { transition-delay: 296ms; }
      .us-map--armed .us-map__state:nth-child(39) { transition-delay: 304ms; }
      .us-map--armed .us-map__state:nth-child(40) { transition-delay: 312ms; }
      .us-map--armed .us-map__state:nth-child(41) { transition-delay: 320ms; }
      .us-map--armed .us-map__state:nth-child(42) { transition-delay: 328ms; }
      .us-map--armed .us-map__state:nth-child(43) { transition-delay: 336ms; }
      .us-map--armed .us-map__state:nth-child(44) { transition-delay: 344ms; }
      .us-map--armed .us-map__state:nth-child(45) { transition-delay: 352ms; }
      .us-map--armed .us-map__state:nth-child(46) { transition-delay: 360ms; }
      .us-map--armed .us-map__state:nth-child(47) { transition-delay: 368ms; }
      .us-map--armed .us-map__state:nth-child(48) { transition-delay: 376ms; }
      .us-map--armed .us-map__state:nth-child(49) { transition-delay: 384ms; }
      .us-map--armed .us-map__state:nth-child(50) { transition-delay: 392ms; }
      .us-map--armed .us-map__state:nth-child(51) { transition-delay: 400ms; }
    }