/* comp: the shape themes and their comparison on /design-system (ext/comp.js explains the switch; the samples are comp-samples.css).
   A sample cell of meta labels starts from the site's own labels, whatever the page around it has picked. */
[data-c-meta] { --c-lab-tt: initial; --c-lab-ls: initial; --c-lab-min: initial; }

.dsc { padding: var(--sp-section) 0; }
.dsc-head { display: grid; gap: var(--sp-head-desc); max-width: 62em; margin: 0 0 var(--sp-3); }
.dsc-head h2 { margin: 0; font: 500 var(--h-section)/1.04 var(--font-display); letter-spacing: -.03em; }
.dsc-lede { margin: 0; max-width: 46em; font-size: 18px; line-height: 1.55; color: var(--ink-2); }

.dsc-btns { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); }

/* Rounded (the default, V2): the green build's control shapes — rounded edges, not pills — and cards
   that lift on hover. Pill is the site's own rules untouched, so it needs nothing here.
   Each rule has two branches: the page in Default (outside any Pill column), and a Default column
   ([data-shape="default"], the theme comparison on /design-system) on a page in either theme. */
html[data-ia="v2"]:not([data-shape="pill"]) :is(.btn, .btn-view, .lst .tools .btn-ghost, .lst .filters-btn, .sortmenu > summary, .btn-arrow, .hs-go, .sub-pill, .icon-link, .nav-top):not([data-shape="pill"] *),
html[data-ia="v2"] [data-shape="default"] :is(.btn, .btn-view, .lst .tools .btn-ghost, .lst .filters-btn, .sortmenu > summary, .btn-arrow, .hs-go, .sub-pill, .icon-link, .nav-top) { --btn-r: 20px; border-radius: var(--btn-r); }
html[data-ia="v2"]:not([data-shape="pill"]) :is(.hsearch, .searchbox):not([data-shape="pill"] *),
html[data-ia="v2"] [data-shape="default"] :is(.hsearch, .searchbox) { border-radius: 16px; }
/* segmented toggles (Map view / Table view) stay fully rounded in both themes */
/* the navigation: a rounded bar and rounded items, not a pill; same inset right as top and bottom */
html[data-ia="v2"]:not([data-shape="pill"]) .head-bar:not([data-shape="pill"] *),
html[data-ia="v2"] [data-shape="default"] .head-bar { border-radius: 22px; padding-right: 12px; }
/* cards lift on hover, as they did; the notch corner already opens on its own */
html[data-ia="v2"]:not([data-shape="pill"]) .nc:not([data-shape="pill"] *),
html[data-ia="v2"] [data-shape="default"] .nc { transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
html[data-ia="v2"]:not([data-shape="pill"]) .nc:hover:not([data-shape="pill"] *),
html[data-ia="v2"] [data-shape="default"] .nc:hover { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { html[data-ia="v2"] .nc:hover { transform: none; } }

/* iOS-style continuous corners on the Rounded theme. A squircle reads tighter than a circular arc at the
   same radius, so the radii step up with it; browsers without corner-shape keep the plain values above. */
@supports (corner-shape: squircle) {
  html[data-ia="v2"]:not([data-shape="pill"]) :is(.btn, .btn-view, .lst .tools .btn-ghost, .lst .filters-btn, .sortmenu > summary,
    .btn-arrow, .hs-go, .hsearch, .searchbox, .sub-pill, .icon-link, .head-bar, .nav-top):not([data-shape="pill"] *),
  html[data-ia="v2"] [data-shape="default"] :is(.btn, .btn-view, .lst .tools .btn-ghost, .lst .filters-btn, .sortmenu > summary,
    .btn-arrow, .hs-go, .hsearch, .searchbox, .sub-pill, .icon-link, .head-bar, .nav-top) { corner-shape: squircle; }
  html[data-ia="v2"]:not([data-shape="pill"]) :is(.hsearch, .searchbox):not([data-shape="pill"] *),
  html[data-ia="v2"] [data-shape="default"] :is(.hsearch, .searchbox) { border-radius: 26px; }
}

/* Themes: Default vs Pill on /design-system. One row per slice of the site, a column per theme. Plain rules
   and labels, no extra cards: each column is the site's own markup on the page ground. */
.th { padding: var(--sp-section) 0; }
.th-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.th-heads { padding-bottom: var(--sp-1-5); border-bottom: 2px solid var(--b-ink); }
.th-heads h3 { margin: 0 0 var(--sp-0-5); font: 500 24px/1.15 var(--font-display); letter-spacing: -.02em; }
.th-heads p { margin: 0; max-width: 34em; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.th-row { padding: var(--sp-3) 0; border-bottom: 1px solid var(--rule); }
.th-rh { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-2); margin: 0 0 var(--sp-2); font: 600 16px/1.3 var(--font-text); }
.th-col { display: grid; align-content: start; gap: var(--sp-1-5); min-width: 0; }
.th-k { margin: 0; font: 500 12.5px/1.3 var(--font-text); color: var(--ink-3); }
.th-k b { font-weight: 600; color: var(--ink-2); }
.th-col > .th-k:first-child { display: none; }
.th-spec { min-width: 0; }
.th-spec ul { margin: 0; padding: 0; list-style: none; }
.th-spec > :is(.hd-chips, .seg, .rv-tabs, .pj-tags, .hsearch) { margin: 0; }
.th-spec .rv-tabs { display: flex; width: fit-content; max-width: 100%; margin: 0; }
.th-spec .nw-feat { max-width: 520px; }
.th-spec .card { list-style: none; }
.th-stack { display: grid; gap: var(--sp-2); justify-items: start; }
/* the nav bar is drawn at its 1280px desktop width, zoomed to the column (--th-s, set by ext/comp.js) */
.th-nav { overflow: hidden; border-radius: 16px; background: var(--b-ground); box-shadow: 0 0 0 1px var(--rule); }
.th-nav > .site-head { position: relative !important; inset: auto !important; top: auto !important; transform: none !important; width: 1280px; margin: 0; zoom: var(--th-s, .45); }
@media (max-width: 900px) { .th-cols { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); } .th-heads { display: none; } .th-col > .th-k:first-child { display: block; } }