/* Meta page - custom overrides only. Shared styles in sections.css */

.meta {
    overflow-x: hidden;
}


/* ═══════════════════════════════════════════════════════════════
   VIEW TABS
   ═══════════════════════════════════════════════════════════════ */

.cg-view-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 32px;
}

.cg-view-tab {
    padding: 10px 24px;
    border: 1.5px solid var(--sec-border);
    border-radius: 8px;
    background: #fff;
    font-size: 0.92em;
    font-weight: 600;
    color: var(--sec-muted);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.cg-view-tab:hover {
    border-color: var(--sec-muted);
    color: var(--sec-text);
}

.cg-view-tab--active {
    background: var(--sec-accent);
    border-color: var(--sec-accent);
    color: #fff;
}

.cg-view-tab--active:hover {
    background: var(--sec-accent-hover);
    border-color: var(--sec-accent-hover);
    color: #fff;
}

.cg-view {
    display: none;
}

.cg-view--active {
    display: block;
}

.cg-view__desc {
    color: var(--sec-muted);
    line-height: 1.7;
    margin: 0 0 24px;
    max-width: 680px;
}

.cg-view__note {
    margin-top: 24px;
    font-size: 0.92em;
    color: var(--sec-faint);
    line-height: 1.6;
}


/* ═══════════════════════════════════════════════════════════════
   FEATURE TRACKS
   ═══════════════════════════════════════════════════════════════ */

/* ── Tracks mode (default) - natural flex flow ── */

.cg-feature-rows .cl-track {
    display: flex;
    border: none;
    background: none;
    padding: 8px 0;
    gap: 0;
    align-items: center;
}

.cg-feature-rows .cl-track__label {
    flex-shrink: 0;
    width: 140px;
    min-width: 140px;
    font-size: 0.82em;
    font-weight: 700;
    color: var(--sec-faint);
    transition: opacity 0.4s ease;
}

.cg-feature-rows .cl-track__chain {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 0;
}

.cg-feature-rows .cl-ficon[data-min] {
    position: static;
    z-index: 1;
}

.cg-feature-rows .cl-ficon--sm {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 0;
    border-color: transparent;
    background: transparent;
    white-space: nowrap;
}

.cg-feature-rows .cl-ficon--sm img {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

.cg-feature-rows .cl-ficon--sm span {
    font-size: 0.82em;
    font-weight: 600;
    white-space: nowrap;
    color: var(--sec-text);
}

/* arrow between icons */
.cg-feature-rows .cl-ficon--sm::after {
    content: '\2192';
    display: inline-block;
    margin: 0 14px;
    font-size: 0.92em;
    color: var(--sec-faint);
    opacity: 0.5;
    transition: opacity 0.4s ease;
}

.cg-feature-rows .cl-ficon--last::after {
    display: none;
}

/* Special track - invisible arrow (keeps spacing) */
.cg-feature-rows .cl-ficon--special::after {
    visibility: hidden;
}

/* ── Hierarchy mode - absolute positioning ── */

.cg-allfeatures--hierarchy .cg-feature-rows .cl-track__chain {
    position: relative;
    height: 30px;
    min-height: 30px;
    display: block;
}

.cg-allfeatures--hierarchy .cg-feature-rows .cl-ficon[data-min] {
    position: absolute;
    top: 0;
    transition: left 0.6s ease;
}

.cg-allfeatures--hierarchy .cg-feature-rows .cl-ficon--sm {
    padding: 2px 8px 2px 2px;
    transition: left 0.6s ease;
    background: var(--sec-surface);
    /* center the icon image on the threshold position
       (image is 26px wide with 2px left-padding ⇒ image center is 15px from icon left) */
    transform: translateX(-15px);
}

.cg-allfeatures--hierarchy .cg-feature-rows .cl-ficon--sm::after {
    display: none;
}


/* ── Size scale + grid (hierarchy mode only) ── */

.cg-feature-rows {
    position: relative;
}

.cl-scale,
.cl-scale__grid {
    display: none;
}

.cg-allfeatures--hierarchy .cl-scale {
    display: flex;
    align-items: center;
    height: 22px;
    margin-top: 6px;
}

.cl-scale__label {
    box-sizing: border-box;
    flex-shrink: 0;
    width: 140px;
    min-width: 140px;
    padding-right: 22px;
    text-align: right;
    font-size: 0.7em;
    font-weight: 500;
    color: var(--sec-faint);
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
}

.cl-scale__chain {
    position: relative;
    flex: 1;
    height: 22px;
}

.cl-scale__tick {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.7em;
    font-weight: 600;
    color: var(--sec-faint);
    opacity: 0.55;
    line-height: 1;
    pointer-events: none;
}

.cl-scale__tick--major {
    font-size: 0.82em;
    font-weight: 700;
    color: var(--sec-text);
    opacity: 0.8;
}

.cg-allfeatures--hierarchy .cl-scale__grid {
    display: block;
    position: absolute;
    top: 0;
    bottom: 28px;          /* above the scale row at the bottom */
    left: 140px;           /* skip the track-label column */
    right: 0;
    pointer-events: none;
    z-index: 0;
}

.cl-scale__line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--sec-border);
    opacity: 0.4;
}

.cl-scale__line--major {
    opacity: 0.7;
}

/* keep icons above the grid */
.cg-allfeatures--hierarchy .cg-feature-rows .cl-track {
    position: relative;
    z-index: 1;
}


/* ═══════════════════════════════════════════════════════════════
   HIERARCHY INFO
   ═══════════════════════════════════════════════════════════════ */

.cg-hierarchy-info {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.4s ease, margin 0.4s ease;
    margin-top: 0;
}

.cg-allfeatures--hierarchy .cg-hierarchy-info {
    max-height: 200px;
    opacity: 1;
    margin-top: 24px;
}

.cg-hierarchy-info p {
    font-size: 0.92em;
    color: var(--sec-faint);
    line-height: 1.6;
    margin: 0 0 16px;
    max-width: 620px;
}

.cg-hierarchy-info__tiers {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cg-hierarchy-info__tier {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 16px;
    font-size: 0.78em;
    font-weight: 600;
    color: var(--tier-color);
    background: color-mix(in srgb, var(--tier-color) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--tier-color) 20%, transparent);
}

.cg-hierarchy-info__tier em {
    font-style: normal;
    font-weight: 500;
    opacity: 0.7;
}


/* ═══════════════════════════════════════════════════════════════
   ANATOMY - "How a city looks in the dashboard"
   Side-by-side: copy on the left, screenshot on the right.
   ═══════════════════════════════════════════════════════════════ */

.mt-anatomy .sec__intro {
    margin-bottom: 28px;
}

.mt-anatomy__shot {
    max-width: 420px;
    margin-left: auto;
}

.mt-anatomy__shot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55),
                0 0 0 1px rgba(255, 255, 255, 0.06);
}

.mt-anatomy .sec-bullets {
    margin-bottom: 0;
}

.mt-anatomy .sec-bullets li {
    color: rgba(255, 255, 255, 0.72);
}

.mt-anatomy .sec-bullets strong {
    color: #fff;
    font-weight: 600;
}

@media (max-width: 860px) {
    .mt-anatomy__shot {
        max-width: 480px;
        margin: 24px auto 0;
    }

    /* ── Feature tracks: horizontal scroll on mobile ── */
    .cg-features-scroll {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        /* fade right edge to hint at scrollable content */
        -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
        mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
        /* bleed to the right gutter so the fade has somewhere to land */
        margin-right: calc(-1 * var(--sec-gutter));
        padding-right: var(--sec-gutter);
    }

    /* tighter label column to give chains more room before scroll kicks in */
    .cg-feature-rows .cl-track__label,
    .cg-feature-rows .cl-scale__label {
        width: 96px;
        min-width: 96px;
    }

    .cg-allfeatures--hierarchy .cl-scale__grid {
        left: 96px;
    }

    /* each row drives the scroll content width */
    .cg-feature-rows .cl-track,
    .cg-feature-rows .cl-scale {
        min-width: 620px;
    }
}