/* The site's header, from the home page (Editorial, October 21-22), on every page: a pill per
   section with Getting started first, and a white Suggest pill. Used with SR.pillHeader(). */
.head-nav.pills { gap: 6px; font-size: 13.5px; }
.head-nav.pills a { font-size: 13.5px; }
.head-nav .chip { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px 0 5px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); text-decoration: none !important; white-space: nowrap; font-weight: 500; transition: border-color .18s; }
.head-nav .chip:hover { border-color: var(--ink-2); }
.head-nav .chip.plain { padding: 0 14px; }
.chip-icon { width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; flex: none; }
.chip-icon svg { width: 17px; height: 17px; }
.head-nav .start { display: inline-flex; align-items: center; height: 36px; margin-right: 8px; padding: 0 16px; border-radius: 999px; background: var(--ink); color: var(--paper); font-weight: 600; text-decoration: none !important; white-space: nowrap; }
.head-nav .start:hover { opacity: .9; color: var(--paper); }
/* On the Getting started page itself, a ring marks the pill as the page you are on. */
.head-nav .start[aria-current] { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink); }
.site-head .btn.suggest { height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: #FFFFFF; color: #0E1116; font-size: 14px; font-weight: 600; box-shadow: 0 1px 2px rgba(14, 17, 22, .08), 0 6px 18px -10px rgba(14, 17, 22, .35); }
.site-head .btn.suggest:hover { background: #FFFFFF; color: #0E1116; box-shadow: 0 1px 2px rgba(14, 17, 22, .1), 0 10px 22px -10px rgba(14, 17, 22, .45); }
/* The pills share the wordmark's line whenever they fit (the script measures). Otherwise, first
   .compact: the pills as text alone; then .collapsed: one picker naming the section in view, which
   opens them as a list under the header (October 22). */
/* si.css gives narrow screens a full-width nav line of its own; these fits replace that. */
.site-head.with-nav .head-nav.pills { display: flex; flex-wrap: nowrap; flex-basis: auto; order: 0; gap: 6px; margin-top: 0; padding: 0; }
.site-head.compact .wrap { gap: 12px 10px; }
.site-head.compact .head-nav.pills { gap: 3px; }
.site-head.compact .head-nav.pills a { font-size: 13px; }
.site-head.compact .head-nav .chip { padding: 0 9px; }
.site-head.compact .head-nav .chip-icon { display: none; }
.site-head.compact .head-nav .start { margin-right: 2px; padding: 0 12px; }
.site-head.compact .btn.suggest { padding: 0 12px; font-size: 13.5px; }
/* Collapsed keeps Getting started on the line and folds only the section pills into the picker. */
.site-head.collapsed .head-nav .chip { display: none; }
.site-head.nostart .head-nav.pills { display: none; }
.site-head:not(.nostart) .menu-panel .menu-start { display: none; }
/* Collapsed, the head-end's parts are laid out one by one: navigation on the left (Getting started,
   the picker), the switch and Suggest on the right. */
.site-head.collapsed .head-end { display: contents; }
.site-head.collapsed .brand { order: 1; }
.site-head.collapsed .head-nav.pills { order: 2; }
.site-head.collapsed .menu-btn { order: 3; }
.site-head.collapsed .head-end > :not(.menu-btn):not(.suggest) { order: 4; margin-left: auto; }
.site-head.collapsed .head-end > .suggest { order: 5; }
.site-head.collapsed .menu-btn + .suggest { margin-left: auto; }
/* Two rows: the wordmark and Getting started above; the picker, the switch and Suggest below. */
.row-break { display: none; }
.site-head.two-row .wrap { flex-wrap: wrap; gap: 8px 10px; padding-block: 10px; }
.site-head.two-row .head-nav .start { margin-right: 0; padding: 0 13px; }
.site-head.two-row .brand { order: 1; }
.site-head.two-row .head-nav.pills { order: 2; }
.site-head.two-row .row-break { display: block; order: 4; flex-basis: 100%; height: 0; }
.site-head.two-row .menu-btn { order: 5; }
.site-head.two-row .head-end > :not(.menu-btn):not(.suggest) { order: 6; margin-left: auto; }
.site-head.two-row .head-end > .suggest { order: 7; margin-left: 0; }
.site-head.two-row .menu-btn + .suggest { margin-left: auto; }
/* Without Getting started (the resources page on phones), Suggest takes its place above. */
.site-head.two-row.nostart .head-end > .suggest { order: 3; margin-left: auto; }
.site-head .menu-btn { display: none; height: 40px; padding: 0 12px 0 16px; gap: 6px; font-size: 14px; }
.site-head .menu-btn svg { width: 16px; height: 16px; color: var(--ink-2); transition: transform .15s ease; }
.site-head.collapsed .menu-btn { display: inline-flex; }
.site-head .menu-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .site-head .menu-btn svg { transition: none; } }
.menu-panel { position: absolute; top: 100%; left: 0; right: 0; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 18px 30px -24px rgba(14, 17, 22, .45); }
.menu-panel .wrap { display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-height: 0; padding-block: 10px 14px; }
.menu-panel a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 10px; line-height: 1.35; border-radius: 12px; color: var(--ink); font-size: 15px; font-weight: 500; text-decoration: none; }
.menu-panel a:hover { background: var(--hover); }
.menu-panel .menu-start { align-self: flex-start; min-height: 40px; margin: 2px 0 8px; padding: 0 18px; border-radius: 999px; background: var(--ink); color: var(--paper); font-weight: 600; }
.menu-panel .menu-start:hover { background: var(--ink); opacity: .9; }
.menu-panel a[aria-current] { background: var(--hover); font-weight: 600; }
/* The section in view, on the resources page. */
.head-nav .chip[aria-current] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.head-nav .chip[aria-current] .chip-icon { background: var(--paper); color: var(--ink); }
/* The keyboard focus ring follows the round buttons and pills instead of base.css's 6px corners. */
.site-head .btn:focus-visible, .head-nav a:focus-visible, .menu-panel .menu-start:focus-visible { border-radius: 999px; }
.menu-panel a:focus-visible { outline-offset: 0; }
@media (max-width: 760px) { .head-nav .chip, .head-nav .start { height: 34px; } .site-head .btn.suggest, .site-head .menu-btn { height: 34px; padding: 0 14px; font-size: 13.5px; } .site-head .menu-btn { padding-right: 10px; } }