/*
 * Plain modern CSS (tech.md §4). Custom properties for the palette and spacing,
 * a fixed dark palette, no utility framework — the site is a handful of layouts and
 * one recurring table, and a framework makes it cheap to add visual complexity the site
 * should not have (README.md, the one rule).
 */

:root {
  color-scheme: dark;

  /* Fixed slate and lime palette. Native controls also use dark styling,
     independent of the operating system's appearance preference. */
  --ink: #f8fafc;
  --ink-muted: #94a3b8;
  --ink-faint: #6b7a8f;
  --bg: #0f1720;
  --bg-raised: #1e293b;
  --bg-sunken: #0a1017;
  --line: #263243;
  --line-strong: #475569;
  --accent: #a3ff00;
  --accent-bg: #26370a;
  --warn: #e5b25d;
  --warn-bg: #3a2f18;
  --error: #f08b85;
  --error-bg: #3d1d1b;

  /* Gap severity. Chosen to separate by lightness as well as hue, so the three levels stay
     distinguishable under red-green colour blindness — the visually-hidden labels in the
     table are the real guarantee, this is the belt to that pair of braces. */
  --gap-good: #7bc47f;
  --gap-noticeable: #f0bc61;
  --gap-hard: #ff9b93;

  --font: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  --radius: 6px;
  --measure: 68ch;
  --page: 1100px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  /* The result table manages its own horizontal scroll; the page never scrolls sideways. */
  overflow-x: hidden;
}

h1,
h2,
h3 {
  line-height: 1.25;
  text-wrap: balance;
  margin: 0 0 var(--space-3);
}

h1 {
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
  letter-spacing: -0.02em;
}
h2 {
  font-size: 1.3rem;
  margin-top: var(--space-7);
}
h3 {
  font-size: 1.05rem;
  margin-top: var(--space-5);
}

p,
ul,
ol {
  margin: 0 0 var(--space-4);
}

a {
  color: var(--accent);
  text-underline-offset: 0.2em;
}
a:hover {
  text-decoration-thickness: 2px;
}

:where(a, button, input, select, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-sunken);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--space-6) 0;
}

/* Available to assistive technology, invisible on screen. Used where a fact is carried
   visually by styling alone and must still exist as text. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- layout ---------- */

.page {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.prose {
  max-width: var(--measure);
}

.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  /* Centred rather than baseline-aligned: the brand is a mark beside a word, and a baseline
     would hang the mark off the text's baseline instead of centring it against the word. */
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-4);
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 650;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}

.site-header__mark {
  display: block;
  width: 28px;
  height: 28px;
  /* The mark is drawn on its own dark tile, which needs no help from the page — but it is a
     hard-edged square against a white header, so the radius follows the artwork's own. */
  border-radius: 6px;
}

.site-nav {
  display: flex;
  gap: var(--space-4);
  margin-left: auto;
}

.site-nav a {
  color: var(--ink-muted);
  text-decoration: none;
}
.site-nav a:hover,
.site-nav a[aria-current='page'] {
  color: var(--ink);
  text-decoration: underline;
}

main {
  padding-block: var(--space-6) var(--space-8);
}

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: var(--space-5);
  color: var(--ink-muted);
  font-size: 0.9rem;
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
}

.lede {
  font-size: 1.1rem;
  color: var(--ink-muted);
  max-width: var(--measure);
  margin-bottom: var(--space-6);
}

/* ---------- cards ---------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
  padding: 0;
  margin: 0;
  list-style: none;
}

.card {
  display: block;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raised);
  text-decoration: none;
  color: inherit;
}

.card:hover {
  border-color: var(--line-strong);
}

.card h2, .card h3 {
  margin: 0 0 var(--space-2);
  color: var(--accent);
}

.card p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.95rem;
}

/* ---------- news ---------- */

.post-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-5);
}

.post-item {
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--line);
}

.post-item:last-child {
  border-bottom: 0;
}

.post-item h3 {
  margin: 0 0 var(--space-1);
  font-size: 1.15rem;
}

.post-item h3 a {
  text-decoration: none;
}
.post-item h3 a:hover {
  text-decoration: underline;
}

.post-meta {
  font-size: 0.85rem;
  color: var(--ink-faint);
  margin: 0 0 var(--space-2);
}

.post-summary {
  margin: 0;
  color: var(--ink-muted);
  max-width: var(--measure);
}

.post-body {
  max-width: var(--measure);
}

.post-body h2 {
  margin-top: var(--space-6);
}

/* ---------- notes ---------- */

.note {
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink-faint);
  border-radius: var(--radius);
  background: var(--bg-raised);
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-4);
  font-size: 0.92rem;
  max-width: var(--measure);
}

.note--warn {
  border-left-color: var(--warn);
  background: var(--warn-bg);
  color: var(--warn);
}

.note--error {
  border-left-color: var(--error);
  background: var(--error-bg);
  color: var(--error);
}

.note--info {
  border-left-color: var(--accent);
  background: var(--accent-bg);
}

.note p {
  margin: 0;
}
.note p + p {
  margin-top: var(--space-2);
}

/* The wordmark. Weighted name, lighter extension, accent dot — the brand sheet's setting
   (media/brand/lockup/wordmark.png). Lowercase is deliberate and matches the domain, so it
   is left alone rather than being title-cased by any inherited transform. */
.wordmark {
  text-transform: lowercase;
}

.wordmark b {
  font-weight: 700;
}

.wordmark__dot {
  color: var(--accent);
  font-weight: 700;
}

.wordmark__tld {
  font-weight: 400;
  color: var(--ink-muted);
}

/* Shared navigation and page hierarchy. */
[hidden] { display: none !important; }
main.page { padding-block: var(--space-6) var(--space-8); }
:root { --ink-faint: #9aa9bd; }
.skip-link { position: absolute; left: 1rem; top: -8rem; z-index: 100; background: var(--bg); padding: .75rem 1rem; }
.skip-link:focus { top: .5rem; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .9rem; margin-bottom: 1rem; color: var(--ink-muted); }
.breadcrumbs a, .site-nav a { display: inline-flex; align-items: center; min-height: 44px; }
.home-intro { padding-block: 1.5rem 2rem; max-width: 760px; }
.home-section { margin-top: var(--space-6); }
.home-section h2 { margin-top: 0; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.section-head h2 { margin-bottom: 0; }
.post-item h2 { margin: 0 0 var(--space-1); font-size: 1.15rem; }
.post-item h2 a { text-decoration: none; }
.post-item h2 a:hover { text-decoration: underline; }
.home-intro h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
.eyebrow { color: var(--ink-muted); font-size: .9rem; }
.home-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.button-primary, .button-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .6rem 1rem; border-radius: var(--radius); font: inherit; text-decoration: none; cursor: pointer; }
.button-primary { background: var(--accent); color: var(--bg); border: 1px solid var(--accent); font-weight: 650; }
.button-secondary { background: var(--bg); color: var(--ink); border: 1px solid var(--line-strong); }

.geometry-intro .lede { margin-bottom: 1.8rem; }
.geometry-search-area { position: relative; max-width: 780px; z-index: 5; }
.geometry-search-label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; align-items: baseline; margin-bottom: .6rem; }
.geometry-search-label label { font-weight: 650; }
.geometry-search-label > span { color: var(--ink-muted); font-size: .85rem; }
.geometry-input-wrap { position: relative; }
.geometry-search-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 23px; height: 23px; color: var(--ink-muted); pointer-events: none; }
#geometry-query { width: 100%; min-height: 62px; padding: .9rem 3.2rem .9rem 3.25rem; font: inherit; font-size: 1.05rem; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg-sunken); appearance: none; }
#geometry-query::placeholder { color: var(--ink-muted); opacity: 1; }
#geometry-query::-webkit-search-cancel-button { appearance: none; }
#geometry-query:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
.geometry-clear { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; border-radius: 4px; background: transparent; color: var(--ink-muted); font: inherit; font-size: 1.7rem; cursor: pointer; }
.geometry-clear:hover { background: var(--bg-raised); color: var(--ink); }
.geometry-search-status { margin: .7rem 0 0; min-height: 1.5em; font-size: .85rem; color: var(--ink-muted); }
.geometry-suggestions { position: absolute; top: calc(100% + 8px); left: 0; right: 0; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg-sunken); box-shadow: 0 18px 40px #0008; overflow: hidden; }
.geometry-suggestions ul { max-height: min(420px, 55vh); overflow-y: auto; overscroll-behavior: contain; list-style: none; padding: .35rem; margin: 0; }
.geometry-option { width: 100%; min-height: 70px; padding: .7rem .85rem; text-align: left; display: grid; grid-template-columns: 1fr auto; gap: .1rem 1rem; background: transparent; color: var(--ink); border: 0; border-radius: 4px; font: inherit; cursor: pointer; }
.geometry-option:hover, .geometry-option[aria-selected='true'] { background: var(--bg-raised); }
.geometry-option[aria-selected='true'] { box-shadow: inset 3px 0 var(--accent); }
.geometry-option__name { font-weight: 650; }
.geometry-option__meta { grid-row: 2; font-size: .8rem; color: var(--ink-muted); }
.geometry-option__notice { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--warn); font-size: .75rem; white-space: nowrap; }
.geometry-no-matches { padding: 1.2rem; }
.geometry-no-matches p { margin: .35rem 0 0; color: var(--ink-muted); font-size: .9rem; }
.geometry-empty { margin-top: 2.2rem; }
.geometry-eyebrow { margin: 0 0 .65rem; color: var(--ink-muted); font-size: .75rem; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; }
.geometry-brands { display: grid; gap: 1.25rem; }
.geometry-brand-region h3 { margin: 0 0 .6rem; font-size: .85rem; font-weight: 600; color: var(--ink-muted); }
.geometry-brand-buttons { display: flex; flex-wrap: wrap; gap: .65rem; }
.geometry-brands a { display: inline-flex; align-items: center; padding: .6rem .9rem; min-height: 44px; background: transparent; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); font: inherit; font-size: .9rem; text-decoration: none; }
.geometry-brands a span { margin-left: .7rem; color: var(--ink-muted); }
.geometry-brands a:hover { border-color: var(--accent); color: var(--accent); }
.geometry-empty__message { padding: 2rem; margin-top: 1.7rem; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(115deg, var(--bg-raised), var(--bg)); }
.geometry-empty__message h2 { margin: 0 0 .75rem; font-size: 1.25rem; }
.geometry-empty__message p { max-width: 60ch; color: var(--ink-muted); margin: 0; }
.geometry-empty__message .geometry-example { margin-top: .9rem; font-size: .9rem; }
.geometry-example button { border: 0; background: transparent; color: var(--accent); font: inherit; text-decoration: underline; text-underline-offset: .2em; padding: .5rem .15rem; cursor: pointer; }
.geometry-frame { margin-top: .6rem; border: 1px solid var(--line); border-radius: 8px; }
.geometry-frame__summary { padding: 1rem; cursor: pointer; }
.geometry-frame__summary > span:first-child { font-weight: 650; }
.geometry-frame__summary > span:last-child { margin-left: 1rem; font-size: .85rem; }
.geometry-frame article { padding: 1.2rem; }
[data-enhanced] .geometry-fallback, [data-enhanced] .geometry-frame__summary { display: none; }
[data-enhanced] .geometry-frame { border: 0; margin-top: 2.5rem; }
[data-enhanced] .geometry-frame article { padding: 0; }
.geometry-frame__header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.8rem; }
.geometry-frame__header h2 { margin: 0 0 .65rem; font-size: clamp(1.5rem, 4vw, 2rem); letter-spacing: -.02em; }
.geometry-frame__header h2:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.geometry-frame__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0; font-size: .85rem; color: var(--ink-muted); }
.geometry-badge { padding: .1rem .55rem; border-radius: 4px; background: var(--accent-bg); color: var(--accent); text-transform: capitalize; }
.geometry-material { text-transform: capitalize; }
.geometry-copy { margin-top: 1.5rem; font-size: .85rem; min-width: 104px; }
.geometry-notice { max-width: none; margin-bottom: 1.5rem; }
.geometry-table-heading, .geometry-sources__heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .4rem 1rem; margin-bottom: .7rem; }
.geometry-table-heading h3, .geometry-sources__heading h3 { margin: 0; font-size: 1rem; }
.geometry-table-heading p, .geometry-sources__heading p { margin: 0; color: var(--ink-muted); font-size: .8rem; }
.geometry-table-scroll { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; isolation: isolate; }
.geometry-table-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.geometry-table { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; font-size: .9rem; white-space: nowrap; }
.geometry-table th, .geometry-table td { padding: .75rem 1rem; border-bottom: 1px solid var(--line); text-align: right; min-width: 76px; }
.geometry-table thead th { background: var(--bg-raised); color: var(--ink); font-weight: 650; }
.geometry-table tr > :first-child { position: sticky; left: 0; z-index: 1; text-align: left; min-width: 225px; background: var(--bg); box-shadow: 1px 0 var(--line); }
.geometry-table thead tr > :first-child { background: var(--bg-raised); }
.geometry-table tbody th { font-weight: 450; }
.geometry-table tbody tr:nth-child(even) td, .geometry-table tbody tr:nth-child(even) th { background: var(--bg-sunken); }
.geometry-table .geometry-table__key td, .geometry-table .geometry-table__key th { color: var(--accent); font-weight: 650; }
.geometry-table tbody tr:last-child > * { border-bottom: 0; }
.geometry-unit { display: inline-block; min-width: 1.4rem; margin-left: .6rem; font-size: .75rem; color: var(--ink-muted); font-weight: 400; }
.geometry-missing, .geometry-muted { color: var(--ink-muted); }
.geometry-table-footnote { margin: .75rem 0 0; color: var(--ink-muted); font-size: .8rem; }
.geometry-sources { margin-top: 2rem; max-width: 850px; }
.geometry-sources > ul { padding-left: 1.2rem; font-size: .85rem; }
.geometry-sources > ul li { margin-bottom: .35rem; overflow-wrap: anywhere; }
.geometry-notes { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 1.1rem; }
.geometry-notes summary { cursor: pointer; padding: .75rem 0; font-size: .9rem; }
.geometry-notes ul { color: var(--ink-muted); font-size: .85rem; padding-left: 1.2rem; }
.geometry-notes li + li { margin-top: .6rem; }
.geometry-coverage { margin-top: 3rem; border-top: 1px solid var(--line); padding-top: 1.5rem; max-width: 780px; }
.geometry-coverage h2 { font-size: .9rem; margin: 0 0 .5rem; }
.geometry-coverage p { margin: .4rem 0 0; color: var(--ink-muted); font-size: .85rem; }
@media (max-width: 560px) {
  #geometry-query { font-size: 1rem; }
  .geometry-search-label > span { font-size: .75rem; }
  .geometry-option { gap: .1rem .4rem; }
  .geometry-option__name { font-size: .9rem; }
  .geometry-option__meta { font-size: .73rem; }
  .geometry-option__notice { font-size: .65rem; }
  .geometry-empty__message { padding: 1.3rem; }
  .geometry-copy { margin-top: 0; }
  .geometry-table tr > :first-child { min-width: 185px; max-width: 185px; white-space: normal; }
  .geometry-table th, .geometry-table td { padding: .7rem .7rem; min-width: 66px; }
  .geometry-table { font-size: .82rem; }
  .geometry-unit { margin-left: .35rem; }
  .geometry-frame__summary > span { display: block; margin-left: 0 !important; }
}

.geometry-clearance { margin-block: 1.5rem; }
.geometry-clearance ul { padding-left: 1.25rem; }
.geometry-clearance li + li { margin-top: 1rem; }
.geometry-clearance p { margin-block: .35rem; }

.geometry-access { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; max-width: 780px; margin-top: 1.25rem; padding: 1rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-sunken); }
.geometry-access > div:first-child { flex: 1 1 240px; }
.geometry-access strong { font-size: .9rem; }
.geometry-access p { margin: .3rem 0 0; font-size: .85rem; color: var(--ink-muted); }
.geometry-access-status { max-width: 780px; font-size: .85rem; color: var(--ink-muted); }
.geometry-verification { flex-basis: 100%; }
.geometry-verification [data-captcha] { margin-block: 1rem; min-height: 78px; }
.geometry-brands .geometry-brand--limited { background: var(--bg-sunken); color: var(--ink-muted); border-style: dashed; }
.geometry-brands .geometry-brand--limited span { display: inline-block; font-size: .65rem; }

.geometry-access[hidden], .geometry-access-status:empty { display: none; }

.geometry-filter-chips { display:flex; flex-wrap:wrap; gap:.5rem; margin:.5rem 0 1rem; }
.geometry-filter-chips button { background:var(--surface, #18232c); color:inherit; border:1px solid #52606b; border-radius:2rem; padding:.4rem .8rem; cursor:pointer; }
.geometry-filter-dialog { color:inherit; background:#111e28; border:1px solid #52606b; border-radius:1rem; width:min(36rem, calc(100vw - 2rem)); max-height:85dvh; overflow:auto; padding:1.25rem; }
.geometry-filter-dialog::backdrop { background:rgb(0 0 0 / .6); }
.geometry-filter-dialog h2 { margin:0 0 .75rem; }
.geometry-filter-dialog p { font-size:.875rem; color:#b9c5ce; }
.geometry-filter-add { display:grid; gap:.4rem; margin:1rem 0; }
.geometry-filter-add select, .geometry-range-values input { font:inherit; color:inherit; background:#0c161e; border:1px solid #63717d; border-radius:.4rem; padding:.45rem; }
.geometry-range { position:relative; border:1px solid #40515e; border-radius:.6rem; margin:1rem 0; padding:1rem; min-width:0; }
.geometry-range legend { padding:0 .3rem; }
.geometry-range-remove { display:block; margin-left:auto; background:none; color:#bbc9d2; border:0; text-decoration:underline; cursor:pointer; }
.geometry-range-track { position:relative; height:2.5rem; margin:.5rem 0; }
.geometry-range-track::before { content:''; position:absolute; top:calc(50% - 3px); left:0; right:0; height:6px; border-radius:3px; background:#60733d; }
.geometry-range-thumb { position:absolute; inset:0; width:100%; margin:0; background:transparent; appearance:none; pointer-events:none; }
.geometry-range-thumb::-webkit-slider-thumb { appearance:none; pointer-events:auto; height:24px; width:24px; border-radius:50%; background:#c4ef53; border:2px solid #18232c; cursor:ew-resize; }
.geometry-range-thumb::-moz-range-thumb { pointer-events:auto; height:22px; width:22px; border-radius:50%; background:#c4ef53; border:2px solid #18232c; cursor:ew-resize; }
.geometry-range-thumb:focus-visible { outline:2px solid #c4ef53; outline-offset:4px; border-radius:.3rem; }
.geometry-range-values { display:flex; gap:1rem; justify-content:space-between; }
.geometry-range-values label { display:grid; gap:.3rem; font-size:.8rem; width:45%; }
.geometry-range-values input { width:100%; box-sizing:border-box; }
.geometry-filter-dialog footer { z-index:5; position:sticky; bottom:-1.25rem; display:flex; gap:.5rem; justify-content:flex-end; padding:1rem 0; background:#111e28; border-top:1px solid #40515e; }
.geometry-filter-dialog [data-filter-apply] { background:#c4ef53; color:#142008; }

/* Comparison controls share the table's quiet surfaces and lime selection accent. */
.geometry-compare-hint { display:inline-block; margin-left:1rem; color:var(--ink-muted); font-size:.8rem; }
.geometry-table [data-compare-model] { display:block; margin:.35rem 0 0 auto; width:44px; height:44px; padding:0; border:1px solid var(--line); border-radius:50%; background:transparent; color:var(--accent); font-family:inherit; font-size:1.5rem; line-height:1; cursor:pointer; }
.geometry-table [data-compare-model]:hover:not(:disabled) { background:var(--accent); color:var(--bg); border-color:var(--accent); }
.geometry-table [data-compare-model]:disabled { opacity:.35; cursor:default; }
.geometry-table [data-compare-model].is-selected { opacity:1; color:var(--accent); border-color:var(--accent); font-size:1rem; }
.geometry-comparison-bar { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:1rem; padding:.65rem .8rem; margin-bottom:1.5rem; background:var(--bg-raised); border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 24px #0003; }
.geometry-comparison-bar[hidden] { display:none; }
.geometry-comparison-chips { display:flex; gap:.75rem; overflow-x:auto; min-width:0; flex:1; scrollbar-width:thin; }
.geometry-comparison-chip { display:flex; align-items:center; flex-shrink:0; gap:.4rem; padding:.15rem .5rem .15rem 0; border-right:1px solid var(--line); }
.geometry-comparison-chip strong { display:block; max-width:14rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.8rem; font-weight:550; }
.geometry-comparison-chip small { display:block; font-size:.7rem; color:var(--ink-muted); margin-top:.2rem; }
.geometry-comparison-chip button { width:44px; height:44px; padding:0; background:none; border:0; border-radius:50%; color:var(--ink-muted); font-size:1.2rem; cursor:pointer; }
.geometry-comparison-chip button:hover { color:var(--ink); background:var(--bg-sunken); }
.geometry-comparison-bar > a { flex-shrink:0; padding:.7rem 1rem; border-radius:6px; font-size:.85rem; font-weight:600; text-decoration:none; }
.geometry-compare-primary { background:var(--accent); color:var(--bg); }
.geometry-compare-secondary { color:var(--accent); border:1px solid var(--line); }
.geometry-compare-table { table-layout:fixed; }
.geometry-compare-table th, .geometry-compare-table td { white-space:normal; }
.geometry-compare-table thead th:not(:first-child) { width:220px; vertical-align:top; text-align:left; }
.geometry-base-control { display:block; width:100%; min-height:76px; padding:0; color:var(--ink); text-align:left; font:inherit; background:transparent; border:0; cursor:pointer; }
.geometry-base-control strong { display:block; margin-top:.5rem; font-size:1rem; line-height:1.35; }
.geometry-reference-label { font-size:.65rem; letter-spacing:.06em; text-transform:uppercase; font-weight:500; color:var(--ink-muted); }
.geometry-base-control[aria-pressed="true"] .geometry-reference-label { color:var(--accent); }
.geometry-base-control:hover .geometry-reference-label { color:var(--accent); }
.geometry-compare-table select { display:inline-block; max-width:100%; min-height:44px; margin:.5rem .75rem 0 0; padding:.4rem .6rem; border:1px solid var(--line); border-radius:5px; font:inherit; font-size:.8rem; background:var(--bg); color:var(--ink); cursor:pointer; }
.geometry-compare-table thead a { color:var(--ink-muted); font-size:.75rem; text-decoration:none; }
.geometry-compare-table td strong { display:block; font-size:1.1rem; font-weight:600; }
.geometry-compare-table td small { display:block; color:var(--ink-muted); font-size:.78rem; margin-top:.3rem; }
.geometry-compare-table thead .geometry-comparison-base { box-shadow:inset 0 3px var(--accent); }
.geometry-comparison-bar :focus-visible, .geometry-table button:focus-visible, .geometry-compare-table select:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
@media (max-width:600px) {
 .geometry-comparison-bar { gap:.5rem; padding:.5rem; }
 .geometry-comparison-chip strong { max-width:9rem; }
 .geometry-comparison-bar > a { padding:.7rem; font-size:.78rem; }
 .geometry-compare-table tr > :first-child { width:105px; min-width:105px; max-width:105px; }
 .geometry-compare-table thead th:not(:first-child) { width:170px; }
 .geometry-base-control strong { font-size:.9rem; }
 .geometry-compare-hint { display:block; margin:.3rem 0 0; }
}
.geometry-compare-table tr > :first-child { width:220px; }
@media (max-width:600px) { .geometry-compare-table tr > :first-child { width:105px; } }
.geometry-compare-table thead a { display:inline-block; white-space:nowrap; }
@media (max-width:600px) { .geometry-compare-table thead a { display:block; margin-top:.4rem; } }