/* GENM Data page (custom-data-hub.hbs)
/* ----------------------------------------------------------
Loaded only by custom-data-hub.hbs, after genm-home.css and genm-tool.css (the page's
main element has .genm-home, .genm-tool-page and .genm-data-hub, so the breadcrumb,
title, section and source styles apply). Every rule here is scoped to .genm-data-hub.
Colors and fonts come only from genm-tokens.css. Figures use IBM Plex Mono
(.genm-figures). Motion is quiet: a short fade on tab change, off when the visitor
asks for reduced motion. Sizes are in px because Source sets the root font size to 10px.

States (set on the main element):
- is-js: JavaScript is running (added by the inline script right after <main>, before the
  first paint), so the counts, tablist and live values have their space from the start;
- is-tabs: the tabs are set up (genm-data-hub.js); panels then follow their hidden attribute.
Tiles: is-live shows the value, record date, trend line and tool link; without it the
tile shows Coming soon, dimmed and not clickable.
*/

/* ---------- JavaScript-only parts, live-only parts ---------- */
.genm-data-hub:not(.is-js) .genm-data-jsonly,
.genm-data-hub .genm-data-tile:not(.is-live) .genm-data-liveonly,
.genm-data-hub .genm-data-tile.is-live .genm-data-soon {
    display: none;
}

/* ---------- counts ---------- */
.genm-data-hub .genm-data-counts-wrap {
    margin-bottom: 32px;
}

.genm-data-hub .genm-data-counts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 560px;
    margin: 0;
}

.genm-data-hub .genm-data-counts > div {
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--genm-navy) 18%, transparent);
    border-radius: 8px;
}

.genm-data-hub .genm-data-counts dt {
    font-size: 13px;
    line-height: 1.4;
    color: color-mix(in srgb, var(--genm-navy) 80%, transparent);
}

.genm-data-hub .genm-data-counts dd {
    min-height: 30px;
    margin: 4px 0 0;
    font-size: clamp(18px, 4vw, 24px);
    font-weight: 500;
    line-height: 30px;
    color: var(--genm-navy);
    overflow-wrap: anywhere;
}

/* ---------- tile grid ---------- */
.genm-data-hub .genm-data-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: 16px;
}

.genm-data-hub .genm-data-tile {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: 16px 16px 18px;
    border: 1px solid color-mix(in srgb, var(--genm-navy) 14%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--genm-navy) 4%, transparent);
    color: color-mix(in srgb, var(--genm-navy) 80%, transparent);
    scroll-margin-top: 16px;
}

.genm-data-hub .genm-data-id {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}

.genm-data-hub .genm-data-name {
    margin: 0 0 8px;
    font-family: var(--genm-font-serif);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: inherit;
}

.genm-data-hub .genm-data-calc {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.genm-data-hub .genm-data-meta {
    flex-grow: 1;
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.5;
}

.genm-data-hub .genm-data-meta > div {
    display: flex;
    flex-wrap: wrap;
    gap: 0 6px;
}

.genm-data-hub .genm-data-meta dt {
    font-weight: 600;
}

.genm-data-hub .genm-data-meta dt::after {
    content: ":";
}

.genm-data-hub .genm-data-meta dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.genm-data-hub .genm-data-soon {
    background: color-mix(in srgb, var(--genm-navy) 75%, transparent);
    color: var(--genm-cream);
}

/* ---------- live tiles (navy panel, gold figures, like the homepage's pace band) ---------- */
.genm-data-hub .genm-data-tile.is-live {
    border: 0;
    border-top: 3px solid var(--genm-gold);
    background: var(--genm-navy);
    color: var(--genm-cream);
}

.genm-data-hub .genm-data-tile.is-live .genm-data-id,
.genm-data-hub .genm-data-tile.is-live .genm-data-meta {
    color: var(--genm-muted);
}

.genm-data-hub .genm-data-tile.is-live .genm-data-meta {
    flex-grow: 0;
}

.genm-data-hub .genm-data-liveonly.genm-data-jsonly {
    flex-grow: 1;
}

/* The value is sized to its tile (container units), so even a whole-dollar figure stays on one
line and the reserved line height never changes when the value arrives */
.genm-data-hub .genm-data-tile.is-live {
    container-type: inline-size;
}

.genm-data-hub .genm-data-value {
    min-height: 34px;
    margin: 2px 0 4px;
    font-size: clamp(20px, 4.6vw, 26px);
    font-size: clamp(14px, 7.5cqi, 26px);
    white-space: nowrap;
    font-weight: 500;
    line-height: 34px;
    color: var(--genm-gold);
}

.genm-data-hub .genm-data-date {
    min-height: 19px;
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 19px;
    color: var(--genm-cream);
}

/* TIC foreign holdings tiles: one-line custodial note under the TIC month */
.genm-data-hub .genm-data-note {
    margin: -4px 0 10px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--genm-muted);
}

.genm-data-hub .genm-data-note[hidden] {
    display: none;
}

.genm-data-hub .genm-data-trend {
    margin: 0 0 12px;
}

.genm-data-hub .genm-data-trend-canvas {
    width: 100%;
    height: 56px;
    border-bottom: 1px solid var(--genm-navy-track);
}

.genm-data-hub .genm-data-trend-label {
    min-height: 34px;
    margin: 6px 0 0;
    font-size: 11px;
    line-height: 17px;
    color: var(--genm-muted);
}

.genm-data-hub .genm-data-tool {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

.genm-data-hub .genm-data-tool a {
    color: var(--genm-cream);
    text-decoration: underline;
    text-decoration-color: var(--genm-gold);
    text-underline-offset: 3px;
}

.genm-data-hub .genm-data-state {
    margin: -8px 0 16px;
    font-size: 13px;
}

/* ---------- group tabs ---------- */
.genm-data-hub .genm-data-tablist {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
}

.genm-data-hub .genm-data-tab {
    margin: 0;
    padding: 8px 14px;
    border: 1px solid var(--genm-navy);
    border-radius: 999px;
    background: transparent;
    color: var(--genm-navy);
    font-family: var(--genm-font-sans);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.genm-data-hub .genm-data-tab[aria-selected="true"] {
    background: var(--genm-navy);
    color: var(--genm-gold);
}

.genm-data-hub .genm-data-tab:focus-visible,
.genm-data-hub .genm-data-panel:focus-visible {
    outline: 2px solid var(--genm-gold);
    outline-offset: 2px;
}

/* Before the tabs are set up, only the first group shows, so nothing moves when they are */
.genm-data-hub.is-js:not(.is-tabs) .genm-data-panel ~ .genm-data-panel,
.genm-data-hub .genm-data-panel[hidden] {
    display: none;
}

/* With JavaScript off each group is its own section with a visible heading;
with tabs, the selected tab names the group, so the heading is for screen readers only */
.genm-data-hub .genm-data-panel {
    margin-bottom: 32px;
}

.genm-data-hub .genm-data-panel-title {
    margin-top: 0;
}

.genm-data-hub.is-js .genm-data-panel-title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.genm-data-hub.is-tabs .genm-data-panel:not([hidden]) {
    animation: genm-data-fade 0.2s ease-out;
}

@keyframes genm-data-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .genm-data-hub .genm-data-tab {
        transition: none;
    }

    .genm-data-hub.is-tabs .genm-data-panel:not([hidden]) {
        animation: none;
    }
}

@media (max-width: 420px) {
    .genm-data-hub .genm-data-counts {
        gap: 8px;
    }

    .genm-data-hub .genm-data-counts > div {
        padding: 10px;
    }
}

.genm-data-hub .genm-data-live noscript p {
    margin: -8px 0 16px;
    font-size: 13px;
}