/* Shared components. Source values: tokens.css; usage: docs/design-system/README.md. */
.glass { background:var(--surface-panel); border:var(--border-width) solid var(--border-panel); border-top-color:var(--border-panel-top); border-radius:var(--radius-panel); box-shadow:var(--shadow-panel); backdrop-filter:none; -webkit-backdrop-filter:none; }
:is(.info-panel,.description-panel,.indices-teaser,.index-card,.news-article,.chart-panel) { padding:var(--panel-padding); }
.stat-card { min-height:124px; padding:var(--panel-padding); }
.records-panel { padding:var(--space-12) var(--panel-padding) var(--space-20); }
.news-panel { padding:var(--space-12) var(--panel-padding) var(--space-8); }
.section-heading,.chart-section-heading { display:flex; align-items:center; justify-content:space-between; gap:var(--space-12); min-height:28px; margin-bottom:var(--space-16); }
.section-heading h2 { display:flex; align-items:center; gap:var(--space-12); min-width:0; }
.section-heading h2>.icon { flex:none; width:20px; height:20px; color:var(--color-text); }
:is(button,a,input,select,textarea,[tabindex]):focus-visible { outline:var(--focus-width) solid var(--color-focus); outline-offset:var(--focus-offset); }
:is(input,select,textarea,.select-trigger):focus-visible { outline-offset:0; }
.ui-button,.text-button,.report-button,.material-link,.copy-address,.download-button,.chart-tools button,.preparing-retry {
 display:inline-flex; align-items:center; justify-content:center; gap:var(--space-8); min-height:var(--control-height); padding:var(--space-10) var(--space-20); border:var(--border-width) solid var(--color-border); border-radius:var(--radius-control); background:var(--color-selected); color:var(--color-text); font:var(--font-weight-medium) var(--text-control)/var(--line-body) var(--font-family); text-align:center; cursor:pointer;
 /* Paint the themed border immediately when a browser first styles a link. */
 transition:background var(--motion-standard),transform var(--motion-fast);
}
.copy-address { justify-content:space-between; gap:var(--space-12); }
.ui-button--primary,.download-button { color:var(--color-on-primary); background:var(--surface-action); border-color:transparent; }
.ui-button--large { min-height:52px; padding-inline:var(--space-24); font-size:var(--text-body); }
.ui-button--icon,.icon-button { padding:0; width:var(--control-height); min-width:var(--control-height); height:var(--control-height); display:inline-grid; place-items:center; flex:none; border:1px solid var(--color-border); border-radius:var(--radius-control); color:var(--color-muted); background:var(--color-field); }
.icon-button { border-radius:var(--radius-pill); aspect-ratio:1; }
.ui-button--quiet { background:transparent; border-color:transparent; }
.ui-button--danger { color:var(--color-danger); background:var(--color-danger-soft); }
:is(.ui-button,.text-button,.report-button,.material-link,.copy-address,.chart-tools :where(button),.preparing-retry,.icon-button):hover:not(:disabled) { background:var(--color-hover); border-color:var(--color-border-hover); color:var(--color-text); }
:is(.ui-button--primary,.download-button):hover:not(:disabled) { background:var(--surface-action-hover); color:var(--color-on-primary); }
:is(.ui-button,.text-button,.icon-button):active:not(:disabled) { transform:translateY(1px); }
:is(.ui-button,.text-button,.icon-button):disabled,[aria-disabled="true"] { opacity:.45; cursor:not-allowed; }
.ui-button[aria-busy="true"] { cursor:progress; }
.ui-button[aria-busy="true"]::before { content:""; width:16px; height:16px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:ui-spin .8s linear infinite; }
@keyframes ui-spin { to { transform:rotate(360deg); } }
.ui-link { color:var(--color-accent-text); background:none; border:0; padding:0; font:inherit; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.ui-link:hover { color:var(--color-text); }
.ui-link--danger { color:var(--color-danger); }
.ui-field { display:grid; gap:var(--space-8); min-width:0; }
.ui-form { display:grid; gap:var(--space-20); }
.ui-field label,.ui-field-label { font-size:var(--text-control); color:var(--color-muted); }
/* Keep base geometry below state specificity, including checkbox exclusions. */
.ui-field :where(input:not([type="checkbox"]):not([type="radio"]),textarea,select),.project-dialog :is(textarea,select),.partnership-fields :is(input,textarea,select) {
 box-sizing:border-box; width:100%; min-width:0; min-height:var(--field-height); padding:var(--space-10) var(--space-12); border:1px solid var(--color-border); border-radius:var(--radius-control); background:var(--color-field); color:var(--color-text); font:inherit; font-size:var(--text-body); line-height:var(--line-body); transition:border-color var(--motion-standard),background var(--motion-standard);
}
.ui-field textarea { resize:vertical; min-height:120px; }
/* Enhanced selects use the same field sizing; compact toolbar selects keep their own geometry. */
.ui-field .select-trigger { min-height:var(--field-height); padding:var(--space-10) var(--space-12); font-size:var(--text-body); }
.ui-field :is(input,textarea,select):hover { border-color:var(--color-border-hover); }
.ui-field :is(input,textarea,select):focus { border-color:var(--color-focus); }
.ui-field :is(input,textarea,select):disabled { opacity:.5; cursor:not-allowed; }
.ui-field :is(input,textarea,select)[aria-invalid="true"],.ui-field .select-native[aria-invalid="true"] + .select-trigger { border-color:var(--color-danger); }
.ui-field :where(small,.helptext) { color:var(--color-muted); font-size:var(--text-small); line-height:var(--line-body); }
.ui-field-error { color:var(--color-danger); font-size:var(--text-control); line-height:var(--line-body); }
.ui-field-error ul { list-style:none; margin:0; padding:0; }
.ui-check,.filter-panel .check { display:flex; align-items:center; gap:var(--space-12); min-height:var(--control-height); color:var(--color-muted); }
.filter-panel .check { font-size:var(--text-small); }
.ui-check input,.filter-panel input[type="checkbox"] { width:20px; height:20px; flex:none; accent-color:var(--color-accent); }
.ui-switch { display:inline-flex; align-items:center; gap:var(--space-12); min-height:var(--control-height); color:var(--color-muted); cursor:pointer; }
.ui-switch input { appearance:none; width:44px; height:24px; margin:0; padding:var(--space-2); flex:none; border:var(--border-width) solid var(--color-border); border-radius:var(--radius-pill); background:var(--color-field); cursor:inherit; transition:background var(--motion-standard),border-color var(--motion-standard); }
.ui-switch input::before { content:""; display:block; width:18px; height:18px; border-radius:50%; background:var(--color-muted); transition:transform var(--motion-standard),background var(--motion-standard); }
.ui-switch input:checked { background:var(--color-accent); border-color:var(--color-accent); }
.ui-switch input:checked::before { background:var(--color-on-action); transform:translateX(20px); }
.ui-switch input:disabled { opacity:.45; cursor:not-allowed; }
.ui-spinner { display:inline-block; width:var(--space-24); height:var(--space-24); flex:none; border:var(--focus-width) solid var(--color-border); border-right-color:var(--color-accent); border-radius:50%; animation:ui-spin .8s linear infinite; }
.ui-tabs,.segmented { display:inline-flex; align-items:center; gap:var(--space-6); min-height:var(--control-height); padding:var(--control-inset); border:1px solid var(--color-border); border-radius:var(--radius-segment); background:var(--surface-control); }
.ui-tabs a,.segmented button { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-6); min-height:32px; padding:var(--space-6) var(--space-16); border:0; border-radius:var(--radius-segment); background:transparent; color:var(--color-muted); font-size:var(--text-small); line-height:var(--line-body); }
.ui-tabs a[aria-current],.segmented button[aria-pressed="true"] { background:var(--color-selected); color:var(--color-text); box-shadow:none; }
.ui-tabs a:hover,.segmented button:hover { color:var(--color-text); background:var(--color-hover); }
.ui-state,.empty-state,.project-empty { padding:var(--panel-padding); color:var(--color-muted); font-size:var(--text-body); line-height:var(--line-body); border-radius:var(--radius-panel); }
.ui-state strong { color:var(--color-text); display:block; margin-bottom:var(--space-8); }
.ui-state--error { background:var(--color-danger-soft); color:var(--color-danger); border:1px solid var(--color-danger); }
.ui-state--success { background:var(--color-success-soft); color:var(--color-success); border:1px solid var(--color-success); }
.ui-state--loading { background:var(--color-field); }
.tag { display:inline-flex; align-items:center; min-height:20px; max-width:100%; padding:0 var(--space-6); color:var(--color-muted); background:var(--color-badge); border:0; border-radius:var(--radius-small); font-size:var(--text-small); line-height:var(--line-body); }
.catalog-toolbar { display:flex; align-items:center; justify-content:space-between; gap:var(--space-12); margin-bottom:var(--space-16); }
.catalog-toolbar .toolbar-actions { display:flex; gap:7px; align-items:center; min-width:0; }
.search { --search-width:190px; display:flex; align-items:center; gap:var(--space-10); width:var(--search-width); min-width:0; height:var(--control-height); padding:0 var(--space-16); border:1px solid var(--color-border); border-radius:var(--radius-segment); background:var(--color-field); color:var(--color-muted); }
.search input { border:0; outline:none; background:transparent; color:var(--color-text); padding:0; min-width:0; width:100%; font-size:var(--text-control); }
.search input:is(:focus,:focus-visible) { outline:none; box-shadow:none; }
.search:focus-within { outline:var(--focus-width) solid var(--color-focus); outline-offset:0; }
.search kbd { font-size:var(--text-small); border:1px solid var(--color-border); border-radius:var(--radius-small); padding:0 var(--space-4); }
@media(min-width:801px) {
 .catalog-toolbar .search { transition:width var(--motion-standard) var(--motion-ease); }
 .catalog-toolbar .search:focus-within { width:calc(var(--search-width) + var(--space-32)); }
}
.view-toggle { display:flex; flex:none; align-items:center; gap:var(--space-4); padding:var(--space-6); }
.view-toggle button { width:32px; height:32px; min-height:32px; flex:none; padding:0; display:grid; place-items:center; }
.view-toggle .icon { width:20px; height:20px; }
.catalog-table :is(th,td) { vertical-align:middle; text-align:center; }
.catalog-table :is(th,td):first-child { text-align:left; }
.catalog-table th { font-size:var(--text-small); color:var(--color-muted); padding:var(--space-16) var(--space-8); }
.catalog-table th button { display:inline-flex; align-items:center; gap:var(--space-4); min-height:24px; font-size:inherit; }
.catalog-table td { height:78px; padding:var(--space-12) var(--space-8); font-size:var(--text-table); }
.catalog-table .language-flags { justify-content:center; }
.catalog-table .sparkline { margin-inline:auto; }
.catalog-bottom { display:flex; justify-content:space-between; align-items:center; gap:var(--space-16); min-height:calc(var(--control-height) + var(--space-16) + var(--border-width)); padding:var(--space-8) var(--panel-padding); border-top:var(--border-width) solid var(--color-border); font-size:var(--text-small); color:var(--color-muted); }
.catalog-bottom .text-button { margin-inline-start:auto; padding:var(--space-6) 0; font-size:var(--text-small); gap:var(--space-8); color:inherit; }
.catalog-bottom .text-button .icon { width:var(--space-16); height:var(--space-16); }
.catalog-bottom .text-button,.catalog-bottom .text-button:hover:not(:disabled) { background:transparent; border-color:transparent; }
.catalog-bottom .text-button:hover:not(:disabled) { color:var(--color-accent-text); }
.catalog-bottom .text-button[aria-busy="true"] { cursor:progress; opacity:1; }
.catalog-more-icon { display:grid; place-items:center; width:var(--space-16); height:var(--space-16); flex:none; }
.catalog-more-icon > .icon-arrow { transform:rotate(90deg); }
.catalog-more-icon .ui-spinner { display:none; width:100%; height:100%; }
[aria-busy="true"] > .catalog-more-icon > .icon { display:none; }
[aria-busy="true"] > .catalog-more-icon > .ui-spinner { display:block; }
.catalog-table .sort-chevron { width:12px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.sort-chevron path { opacity:.6; transition:opacity var(--motion-standard); }
[aria-sort="ascending"] .sort-up,[aria-sort="descending"] .sort-down { opacity:1; }
[aria-sort="ascending"] .sort-down,[aria-sort="descending"] .sort-up { opacity:.22; }
.entity-online[data-status="healthy"] { background:var(--color-status-healthy); }
.entity-online[data-status="problem"] { background:var(--color-danger); }
.entity-online[data-status="development"] { background:var(--color-muted); }
.chart-tools button { min-width:var(--control-height); padding-inline:var(--space-12); }
.ui-dialog,.project-dialog { width:min(560px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; padding:var(--panel-padding); border:1px solid var(--color-border); border-radius:var(--radius-panel); background:var(--surface-panel); color:var(--color-text); box-shadow:var(--shadow-dialog); }
.ui-dialog::backdrop,.project-dialog::backdrop { background:var(--color-backdrop); backdrop-filter:blur(5px); }
.dialog-intro { color:var(--color-muted); margin:var(--space-8) 0 var(--space-24); }
.dialog-close { position:absolute; right:var(--space-16); top:var(--space-16); }
.dialog-close svg { width:var(--control-icon); height:var(--control-icon); fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; }
.toast { position:fixed; bottom:var(--space-24); left:50%; transform:translateX(-50%); z-index:var(--z-toast); width:max-content; max-width:calc(100vw - 32px); padding:var(--space-16) var(--space-24); color:var(--color-text); background:var(--color-raised); border:1px solid var(--color-border); border-radius:var(--radius-control); box-shadow:var(--shadow-popover); font-size:var(--text-control); }
@media(max-width:1200px) {
 .catalog-toolbar .toolbar-actions { flex:1; justify-content:flex-end; }
}
@media(max-width:980px) {
 .catalog-toolbar .toolbar-actions { flex-basis:100%; justify-content:space-between; }
}
@media(max-width:800px) {
 .section-heading,.chart-section-heading { gap:var(--space-12); margin-bottom:var(--space-20); }
 .section-heading h2 { gap:var(--space-12); }
 .section-heading h2>.icon { width:20px; height:20px; }
 .ui-button--large { min-height:var(--field-height); }
 .ui-field :is(input,select,textarea),.ui-field .select-trigger { font-size:16px; }
 /* Children of the contents wrapper share this grid. Search expands within
    its second row; export stays beside the list-kind switch in the first. */
 .catalog-toolbar { display:grid; grid-template-columns:minmax(0,1fr) 40px 154px; gap:var(--space-12); margin-bottom:var(--space-20); }
 .catalog-toolbar .toolbar-actions { display:contents; }
 .catalog-toolbar>.segmented { grid-column:1/-1; grid-row:1; justify-self:start; align-self:center; min-width:0; max-width:calc(100% - 52px); overflow-x:auto; }
 .catalog-toolbar .banner-export { grid-column:3; grid-row:1; justify-self:end; }
 .catalog-toolbar .search { grid-column:1; grid-row:2; display:flex; min-width:0; max-width:none; width:100%; }
 .search input { font-size:16px; }
 .search kbd { display:none; }
 .catalog-toolbar #filter-toggle { grid-column:2; grid-row:2; margin:0; }
 .catalog-toolbar .view-toggle { grid-column:3; grid-row:2; width:100%; min-width:0; }
 .catalog-toolbar:has(.search:focus-within) .search { grid-column:1/-1; }
 .catalog-toolbar:has(.search:focus-within) :is(#filter-toggle,.view-toggle) { visibility:hidden; pointer-events:none; }
 body:has(>.mobile-navigation) .catalog-toolbar .search { display:none; }
 .catalog-toolbar .icon-button { width:var(--space-40); min-width:var(--space-40); height:var(--space-40); }
 .catalog-table td { height:76px; font-size:var(--text-control); padding-block:var(--space-12); }
 .ui-tabs { max-width:100%; overflow-x:auto; }
}
@media(prefers-reduced-motion:reduce) { .ui-button[aria-busy="true"]::before,.ui-spinner { animation:none; } .ui-switch input,.ui-switch input::before,.catalog-toolbar .search { transition:none; } }

/* Editorial state, shared by catalogue cards and the project heading. */
.tag.beta-status{color:var(--color-accent-text);background:color-mix(in srgb, var(--color-accent) 12%, transparent);border:1px solid color-mix(in srgb, var(--color-accent) 16%, transparent);font-weight:var(--font-weight-medium);letter-spacing:.025em;}
.tag.development-status{max-width:none;flex-shrink:0;color:var(--text-muted,var(--color-muted));background:color-mix(in srgb, var(--color-accent) 12%, transparent);white-space:nowrap}
.hero-title-group>.development-status{font-size:12px;line-height:1.5;padding:5px var(--space-10);align-self:center}
@media(max-width:600px){.hero-title-group>.development-status{margin:0}}

/* Compact pin beside the avatar; the name remains a separate navigation link. */
.catalog-table {
  --catalog-pin-size: 24px;
  --catalog-rank-size: 1.5rem;
  --catalog-pin-gap: 6px;
  --catalog-rank-gap: 12px;
  --catalog-avatar-size: 34px;
  --catalog-name-gap: 9px;
}
.catalog-table th:first-child button {
  margin-inline-start: calc(var(--catalog-pin-size) + var(--catalog-pin-gap) + var(--catalog-rank-size) + var(--catalog-rank-gap) + var(--catalog-avatar-size) + var(--catalog-name-gap));
}
.entity-cell { display: flex; align-items: center; gap: var(--catalog-pin-gap); min-width: 0; }
.entity-cell .entity-link { flex: 1; min-width: 0; gap: var(--catalog-name-gap); }
.entity-cell .entity-avatar { width: var(--catalog-avatar-size); height: var(--catalog-avatar-size); }
.catalog-pin { position: relative; flex: 0 0 var(--catalog-pin-size); width: var(--catalog-pin-size); height: 34px; padding: var(--space-4); display: grid; place-items: center; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-muted, var(--color-muted)); cursor: pointer; transition: color var(--motion-standard); }
.catalog-pin::before { content: ""; position: absolute; width: 100%; aspect-ratio: 1; border-radius: var(--radius-pill); background: transparent; pointer-events: none; transition: background var(--motion-standard); }
.catalog-pin svg { position: relative; width: 16px; height: 16px; pointer-events: none; transform:rotate(45deg); }
.catalog-pin:hover, .catalog-pin:focus-visible, .catalog-pin[aria-pressed="true"] { color: var(--color-accent-text); }
.catalog-pin:hover::before, .catalog-pin:focus-visible::before, .catalog-pin[aria-pressed="true"]::before { background: color-mix(in srgb, var(--color-accent) 7.1%, transparent); }
.catalog-pin[aria-pressed="true"] svg path:first-child { fill: currentColor; }
.catalog-pin:focus-visible { outline: none; }
html:not([data-input-modality="pointer"]) .catalog-pin:focus-visible::before { outline: 2px solid var(--color-accent); outline-offset: 1px; }
@media (pointer: coarse) { .catalog-pin { height: 44px; } }
@media (prefers-reduced-motion: reduce) { .catalog-pin, .catalog-pin::before { transition: none; } }

/* Number the displayed DOM order, including pinned rows and loaded pages. */
.catalog-table tbody { counter-reset: catalog-row; }
.catalog-table tbody>tr { counter-increment: catalog-row; }
.entity-rank { flex: 0 0 var(--catalog-rank-size); margin-inline-end: calc(var(--catalog-rank-gap) - var(--catalog-pin-gap)); text-align: right; color: var(--text-muted, var(--color-muted)); font-size: var(--text-small); line-height: 1; font-variant-numeric: tabular-nums; }
.entity-rank::before { content: counter(catalog-row); }
@container catalog (max-width: 459px) {
  .catalog-table {
    --catalog-pin-size: 24px;
    --catalog-rank-size: 1.25rem;
    --catalog-pin-gap: 6px;
    --catalog-avatar-size: 30px;
    --catalog-name-gap: 6px;
  }
  /* Stack the pin and rank in one leading track. Keep all actions/numbers,
     freeing name width without reducing text or avatar readability. */
  .catalog-section:not([data-view="cards"]) .entity-cell { display:grid; grid-template-columns:var(--catalog-pin-size) minmax(0,1fr); column-gap:var(--catalog-pin-gap); row-gap:0; }
  .catalog-section:not([data-view="cards"]) .catalog-pin { grid-column:1; grid-row:1; height:var(--control-height); }
  .catalog-section:not([data-view="cards"]) .entity-rank { grid-column:1; grid-row:2; margin:0; text-align:center; }
  .catalog-section:not([data-view="cards"]) .entity-link { grid-column:2; grid-row:1 / span 2; }
  .catalog-table th:first-child button { margin-inline-start:calc(var(--catalog-pin-size) + var(--catalog-pin-gap) + var(--catalog-avatar-size) + var(--catalog-name-gap)); }
}

/* Keep keyboard focus, suppress restored rings for pointer-operated controls. */
html[data-input-modality="pointer"] :is(a,button,[role="button"],[tabindex]):not(input,textarea,select):is(:focus,:focus-visible) {
  outline: none;
}

.section-heading h2>.icon :is(img,svg) { width:100%; height:100%; }

.facts dd { color:var(--color-text); }
:is(.chart-range,.chart-hint,.chart-status,.info-note,.indices-teaser p) { color:var(--color-muted); }
.catalog-section:not([data-view="cards"]) .catalog-table tbody tr:hover td { background:var(--color-selected); }

.section-heading { flex-wrap:wrap; }
.section-heading h2 { margin-right:auto; }
.social-links a,.footer-social { width:var(--control-height); height:var(--control-height); border-radius:var(--radius-control); }
@media(max-width:680px) {
 .stat-card { min-height:120px; }
}