:root {
  --ink: #172126;
  --muted: #5f6b70;
  --paper: #f5f6f4;
  --surface: #ffffff;
  --line: #d9ddda;
  --accent: #8a2e23;
  --focus: #d9772f;
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); line-height: 1.5; }
a { color: var(--accent); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
h1, h2, p { margin-top: 0; }
h1, h2 { line-height: 1.12; }
h1 { font-size: clamp(2.25rem, 6vw, 4.6rem); letter-spacing: -.045em; }
h2 { margin-top: 3.5rem; font-size: clamp(1.45rem, 3vw, 2rem); }
.shell { width: min(1080px, calc(100% - 2rem)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 20; top: .75rem; left: .75rem; transform: translateY(-200%); padding: .65rem .9rem; color: white; background: var(--ink); }
.skip-link:focus-visible { transform: none; }
.site-header { position: sticky; z-index: 10; top: 0; padding-block: 1.15rem; border-bottom: 1px solid var(--line); background: var(--surface); }
.site-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.wordmark { color: var(--ink); font-weight: 750; text-decoration: none; }
.primary-navigation { display: inline-flex; gap: .25rem; padding: .2rem; border: 1px solid var(--line); border-radius: .3rem; background: var(--paper); }
.primary-navigation-link { padding: .42rem .72rem; border-radius: .2rem; color: var(--muted); font-size: .86rem; font-weight: 700; text-decoration: none; }
.primary-navigation-link:hover { color: var(--ink); background: var(--surface); }
.primary-navigation-active { color: white; background: var(--ink); }
.primary-navigation-active:hover { color: white; background: #303c41; }
.main-content { min-height: calc(100vh - 9rem); padding-block: clamp(2.8rem, 7vw, 6rem); }
.site-footer { padding-block: 1.4rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; }
.page-intro { margin-bottom: 2.5rem; }
.page-intro h1 { margin-bottom: .6rem; }
.page-intro p { color: var(--muted); font-size: 1.08rem; }
.legend-intro { max-width: 51rem; }
.legend-index { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .7rem; margin-bottom: 3.7rem; padding: .7rem; border: 1px solid var(--line); border-radius: .25rem; background: var(--surface); }
.legend-index span { padding-inline: .35rem; color: var(--muted); font-size: .72rem; font-weight: 750; letter-spacing: .055em; text-transform: uppercase; }
.legend-index a { padding: .35rem .55rem; border-radius: .2rem; color: var(--ink); font-size: .84rem; font-weight: 650; text-decoration: none; }
.legend-index a:hover { background: var(--paper); }
.legend-sections { border-bottom: 1px solid var(--line); }
.legend-section { display: grid; grid-template-columns: minmax(10rem, .62fr) minmax(0, 1.75fr); gap: clamp(2rem, 6vw, 5rem); padding-block: 2.5rem; border-top: 1px solid var(--line); scroll-margin-top: 6.5rem; }
.legend-section-heading h2, .legend-reading h2 { margin: .35rem 0 0; font-size: clamp(1.35rem, 2.8vw, 1.85rem); letter-spacing: -.025em; }
.legend-section-number { color: var(--accent); font-size: .72rem; font-weight: 800; letter-spacing: .08em; }
.legend-list { margin: 0; }
.legend-entry { display: grid; grid-template-columns: minmax(11.5rem, .9fr) minmax(0, 1.65fr); gap: 1.4rem; padding-block: 1.05rem; border-top: 1px solid var(--line); }
.legend-entry:first-child { padding-top: .15rem; border-top: 0; }
.legend-entry dt { font-weight: 750; line-height: 1.35; }
.legend-entry dd { margin: 0; color: var(--muted); }
.legend-entry var { font-family: ui-serif, Georgia, serif; font-style: italic; }
.legend-entry sub, .legend-entry sup { line-height: 0; }
.legend-term, .legend-unit { display: block; }
.legend-unit { margin-top: .22rem; color: var(--muted); font-size: .73rem; font-weight: 600; letter-spacing: .025em; }
.legend-code { white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .9em; }
.legend-reading { display: grid; grid-template-columns: minmax(10rem, .62fr) minmax(0, 1.75fr); gap: clamp(2rem, 6vw, 5rem); margin-top: 3.6rem; padding: clamp(1.3rem, 3vw, 2rem); border-left: .25rem solid var(--accent); background: var(--surface); }
.legend-conventions { display: grid; gap: .75rem; margin: 0; padding-left: 1.2rem; color: var(--muted); }
.legend-conventions strong { color: var(--ink); }
.catalogue-controls { display: grid; grid-template-columns: minmax(14rem, 1fr) auto; align-items: end; gap: .85rem; margin-bottom: 1.75rem; }
.correlation-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: .85rem; margin-bottom: 1.75rem; }
.correlation-controls .form-message { grid-column: 1 / -1; }
.field label { display: block; margin-bottom: .35rem; font-size: .8rem; font-weight: 750; }
.field input, .field select { width: 100%; min-height: 2.75rem; padding: .55rem .65rem; border: 1px solid #aab3af; border-radius: .2rem; color: var(--ink); background: var(--surface); font: inherit; }
.field-error, .form-message { display: block; margin-top: .35rem; color: #8f1f18; font-size: .82rem; }
button { min-height: 2.75rem; padding: .55rem 1rem; border: 1px solid var(--ink); border-radius: .2rem; color: white; background: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
button:hover { background: #303c41; }
.result-count { margin-bottom: .7rem; color: var(--muted); font-size: .9rem; }
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: .2rem; background: var(--surface); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .9rem 1rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
thead th { color: var(--muted); background: #eef0ed; font-size: .76rem; letter-spacing: .045em; text-transform: uppercase; }
.catalogue-sort { display: inline-flex; align-items: center; gap: .35rem; color: inherit; text-decoration: none; }
.catalogue-sort:hover { color: var(--ink); }
.catalogue-sort-arrow { opacity: .35; color: var(--muted); font-size: 1rem; line-height: 1; }
.catalogue-sort:hover .catalogue-sort-arrow { opacity: .7; }
.catalogue-sort-active .catalogue-sort-arrow { opacity: 1; color: var(--accent); }
.catalogue-mr-label { text-transform: none; }
.catalogue-mr-label sub { position: relative; bottom: -.08em; font-size: .82em; line-height: 0; }
tbody tr:last-child > * { border-bottom: 0; }
tbody th { font-weight: 650; }
.catalogue-table { min-width: 64rem; }
.catalogue-table th:first-child { width: 24%; }
.catalogue-table th:nth-child(2), .catalogue-table th:nth-child(3) { width: 15%; }
.catalogue-table th:nth-child(4) { width: 18%; }
.catalogue-table th:nth-child(5) { width: 28%; }
.availability-value { display: block; font-weight: 650; }
.numeric-value { display: block; font-variant-numeric: tabular-nums; }
.secondary-value, .uncertainty { display: block; color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.catalogue-measurement-cell { font-variant-numeric: tabular-nums; }
.catalogue-value-list { display: grid; justify-items: start; gap: .12rem; }
.catalogue-reported-value { display: block; font-weight: 650; white-space: nowrap; }
.missing { color: var(--muted); font-style: italic; }
.empty-state { padding: 1.25rem; border: 1px solid var(--line); background: var(--surface); color: var(--muted); }
.pagination { display: flex; align-items: center; justify-content: center; gap: 1.4rem; margin-top: 1.4rem; font-size: .9rem; }
.htmx-indicator { display: none; color: var(--muted); font-size: .85rem; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline; }
.back-link { display: inline-block; margin-bottom: 2.3rem; font-size: .9rem; }
.object-title { margin-bottom: 2.5rem; }
.object-title h1 { margin-bottom: 0; }
.object-summary { margin-bottom: 3.8rem; }
.object-summary dl { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; border-top: 1px solid var(--line); }
.object-summary div { padding: 1rem 1rem 1rem 0; border-bottom: 1px solid var(--line); }
.object-summary dt { color: var(--muted); font-size: .75rem; font-weight: 750; letter-spacing: .035em; text-transform: uppercase; }
.object-summary dd { margin: .3rem 0 0; font-variant-numeric: tabular-nums; }
.measurement-description { max-width: 48rem; color: var(--muted); font-size: .9rem; }
.measurement-matrix th:first-child { position: sticky; left: 0; z-index: 1; width: 15rem; min-width: 15rem; border-right: 1px solid var(--line); background: var(--surface); }
.measurement-matrix thead th:first-child { z-index: 2; background: #eef0ed; }
.measurement-matrix thead th:not(:first-child), .measurement-matrix td { min-width: 12rem; }
.measurement-source-list { display: grid; gap: .2rem; }
.measurement-property-label, .measurement-property-detail { display: block; }
.measurement-property-symbol { font-weight: 400; white-space: nowrap; }
.measurement-property-symbol sub { font-size: .76em; line-height: 0; }
.measurement-property-detail { margin-top: .2rem; color: var(--muted); font-size: .76rem; font-weight: 400; }
.measurement-cell-value { display: block; }
.measurement-cell-value + .measurement-cell-value { margin-top: .55rem; padding-top: .55rem; border-top: 1px solid var(--line); }
.chart-panel { margin-top: 3.5rem; padding: clamp(1rem, 3vw, 1.5rem); border: 1px solid var(--line); border-radius: .25rem; background: var(--surface); }
.chart-panel h2 { margin-top: 0; margin-bottom: .45rem; }
.chart-heading { display: flex; align-items: start; justify-content: space-between; gap: 1.5rem; }
.chart-heading > :first-child { max-width: 42rem; }
.chart-description, .chart-status { color: var(--muted); font-size: .9rem; }
.chart-description { margin-bottom: 0; }
.chart-status { min-height: 1.4em; margin: 1rem 0 .35rem; }
.chart-controls { min-width: min(100%, 15rem); }
.chart-controls > label, .passband-selector legend { display: block; margin-bottom: .35rem; color: var(--muted); font-size: .75rem; font-weight: 750; letter-spacing: .035em; text-transform: uppercase; }
.chart-controls select { width: 100%; min-height: 2.5rem; padding: .45rem .55rem; border: 1px solid #aab3af; border-radius: .2rem; color: var(--ink); background: var(--surface); font: inherit; }
.photometry-coordinate-selector { margin-bottom: .8rem; }
.passband-selector { display: flex; max-width: 27rem; flex-wrap: wrap; gap: .4rem .8rem; margin: 0; padding: 0; border: 0; }
.passband-selector legend { width: 100%; }
.passband-selector label { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; }
.passband-selector input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--accent); }
.chart-canvas { position: relative; width: 100%; min-height: 440px; }
.chart-hover-point { position: absolute; z-index: 5; width: .55rem; height: .55rem; border: 2px solid #fff; border-radius: 50%; background: var(--chart-hover-color, var(--accent)); box-shadow: 0 0 0 1px rgba(23, 33, 38, .28); pointer-events: none; transform: translate(-50%, -50%); }
.chart-hover-point[hidden] { display: none; }
.spectrum-hover-panel { min-height: 3.2rem; margin: .35rem 0 0; padding: .65rem .75rem; border: 1px solid var(--line); border-radius: .25rem; background: #f7f8f6; color: var(--muted); font-size: .82rem; }
.spectrum-hover-prompt { display: block; padding-top: .25rem; }
.spectrum-hover-values { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; }
.spectrum-hover-value { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: .1rem .4rem; min-width: min(100%, 14rem); }
.spectrum-hover-value-name { color: var(--ink); font-weight: 700; }
.spectrum-hover-value-details { grid-column: 2; font-variant-numeric: tabular-nums; }
.spectrum-hover-swatch { width: .55rem; height: .55rem; border-radius: 50%; background: var(--chart-hover-color, var(--accent)); }
.spectrum-controls { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.spectrum-display-selector { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: 0 0 1rem; padding: 0 0 1rem; border: 0; border-bottom: 1px solid var(--line); }
.spectrum-display-selector legend { width: 100%; margin-bottom: .2rem; color: var(--muted); font-size: .75rem; font-weight: 750; letter-spacing: .035em; text-transform: uppercase; }
.spectrum-display-selector label { display: inline-flex; align-items: center; gap: .35rem; font-size: .86rem; }
.spectrum-display-selector input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--accent); }
.spectrum-normalization-note { width: 100%; color: var(--muted); font-size: .78rem; }
.spectrum-slot-list { display: grid; gap: .55rem; }
.spectrum-slot { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .65rem; }
.spectrum-slot-color { width: .75rem; height: .75rem; border-radius: 50%; background: var(--spectrum-color); box-shadow: 0 0 0 1px rgba(23, 33, 38, .2); }
.spectrum-slot select { width: 100%; min-height: 2.5rem; padding: .45rem .55rem; border: 1px solid #aab3af; border-radius: .2rem; color: var(--ink); background: var(--surface); font: inherit; }
.spectrum-remove-button { min-height: 2.5rem; padding: .4rem .7rem; border-color: #aab3af; color: var(--muted); background: var(--surface); font-size: .82rem; }
.spectrum-remove-button:hover { color: var(--ink); background: #eef0ed; }
.spectrum-remove-button:disabled { cursor: not-allowed; opacity: .45; }
.spectrum-control-footer { display: flex; align-items: center; gap: .8rem; margin-top: .8rem; }
.spectrum-add-button { min-height: 2.5rem; padding-block: .4rem; }
.spectrum-add-button:disabled { cursor: not-allowed; opacity: .45; }
.spectrum-selection-count { color: var(--muted); font-size: .82rem; font-variant-numeric: tabular-nums; }
.chart-error { border-color: #c9746c; }
.correlation-panel { margin-top: 2rem; }
.correlation-fit-controls { display: flex; flex-wrap: wrap; gap: .55rem 1.1rem; margin: 1rem 0 0; padding: 1rem 0 0; border: 0; border-top: 1px solid var(--line); }
.correlation-fit-controls legend { width: 100%; margin-bottom: .15rem; color: var(--muted); font-size: .75rem; font-weight: 750; letter-spacing: .035em; text-transform: uppercase; }
.correlation-fit-option { display: inline-flex; align-items: center; gap: .35rem; font-size: .84rem; }
.correlation-fit-option input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--fit-color); }
.correlation-fit-option:has(input:disabled) { opacity: .42; }
.correlation-fit-swatch { width: 1.25rem; height: .18rem; border-radius: 1rem; background: var(--fit-color); }
.correlation-fit-degree-1 { --fit-color: #275dad; }
.correlation-fit-degree-2 { --fit-color: #d05a17; }
.correlation-fit-degree-3 { --fit-color: #238b45; }
.correlation-fit-degree-4 { --fit-color: #8c2d7e; }
.correlation-fit-note { width: 100%; color: var(--muted); font-size: .78rem; }

@media (max-width: 720px) {
  .catalogue-controls { grid-template-columns: 1fr; }
  .correlation-controls { grid-template-columns: 1fr; }
  .correlation-controls .form-message { grid-column: auto; }
  .legend-section, .legend-reading { grid-template-columns: 1fr; gap: 1.5rem; }
  .legend-entry { grid-template-columns: minmax(9rem, .75fr) minmax(0, 1.5fr); }
  .object-summary dl { grid-template-columns: repeat(2, 1fr); }
  .chart-heading { display: block; }
  .chart-controls { margin-top: 1rem; }
  .spectrum-slot { grid-template-columns: auto minmax(0, 1fr); }
  .spectrum-remove-button { grid-column: 2; justify-self: start; }
  h1 { font-size: clamp(2.2rem, 13vw, 3.5rem); }
}

@media (max-width: 480px) {
  .shell { width: min(100% - 1.2rem, 1080px); }
  .site-header-inner { align-items: flex-start; flex-direction: column; }
  .primary-navigation { max-width: 100%; flex-wrap: wrap; }
  .legend-index { align-items: stretch; flex-direction: column; }
  .legend-entry { grid-template-columns: 1fr; gap: .35rem; }
  .object-summary dl { grid-template-columns: 1fr; }
  .chart-panel { padding-inline: .5rem; }
  .chart-canvas { min-height: 380px; }
  th, td { padding: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}