/* layout.css — Grid, scroll, navigation shell
 *
 * Layout: Header → Grid (with embedded footer)
 *
 * Wide layout (default):
 *   .col wrappers use CSS subgrid (grid-template-rows: subgrid;
 *   grid-row: 1 / -1) to inherit the parent .grid's row tracks.
 *   Children auto-place top-to-bottom within each column — no
 *   explicit grid-row or grid-column rules anywhere.
 *   Grid has N+1 rows: N × 1fr content rows + 1 var(--footer-h) row.
 *   Grid has 2 columns: calc(...) 1fr — C1 (1:1, height-derived) + C2.
 *   The footer sits in the last row, column 1 — same width as C1.
 *   No scrolling.
 *
 * Narrow layout (container query):
 *   Triggered when the grid container's aspect ratio means C2 would be
 *   narrower than 1:1 per row.  The formula is:
 *
 *       cutover when  grid_width / grid_height  <  2 / N
 *
 *   where N = number of content rows (currently 3 → ratio 2/3).
 *
 *   .grid becomes a horizontal scroll-snap flex container.
 *   Each .col is a full-width, full-height CSS grid with an identical
 *   row template:  repeat(N, 1fr) var(--footer-h).
 *   Swipe left/right to switch between the two columns.
 *   Footer scrolls away with col 1 — not visible on col 2.
 *   No vertical scrolling ever.
 *
 * Three layout modes driven by @container queries on .grid-container:
 *
 * Narrow  (max-aspect-ratio: 2/3 — phone portrait):
 *   Horizontal scroll-snap. Swipe between C1 (windroses) and C2 (charts).
 *   Station cells use overlay layout (vertical metrics, see app.css).
 *
 * Medium  (default — tablet / small desktop):
 *   CSS subgrid, 2 columns side-by-side (C1 + C2).
 *   Station cells use flex-column (horizontal metrics on top).
 *
 * Full    (min-width: 75rem — wide desktop):
 *   Same grid as medium. Station cells switch to overlay layout
 *   (vertical metrics in the windrose dead space, see app.css).
 *
 * Utility classes:
 *   .aspect-square  — on a .col: children get aspect-ratio: 1/1,
 *                     centered in narrow mode.
 *   .overflow-visible — on a .cell: overflow: visible so a chart
 *                       can paint beyond its grid area.
 *
 * ┌─────────────────────────────────────────────────────────────────┐
 * │  CHANGING THE ROW COUNT                                        │
 * │                                                                │
 * │  To change from N rows to M rows:                              │
 * │    1. Update --rows to M                                       │
 * │    2. Update @container query ratio: 2/M (can't use var())     │
 * │    3. Add/remove cell <div>s in the HTML (or template loop)    │
 * │  Everything else (grid templates, column width, placement,     │
 * │  .aspect-square, .overflow-visible, footer, debug colours)     │
 * │  derives from --rows or adapts automatically.                  │
 * └─────────────────────────────────────────────────────────────────┘
 *
 * Footer/legend lives inside C1, visually full-width via grid row.
 * To change row count: update --rows and @container ratio.
 */

/* === Outer Layout === */
.layout {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* === Header === */
.header {
    flex-shrink: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--header-py) var(--header-px);
    gap: var(--header-gap);
    background: linear-gradient(180deg, #16161a 0%, var(--bg-surface) 100%);
    overflow: visible;
    border-bottom: 1px solid var(--border);
    position: relative;
    z-index: 50;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

/* Logo group (sun/cloud icon + title text) on the left of the header. */
.logo-btn {
    display: flex;
    align-items: center;
    gap: calc(var(--header-gap) / 2);
    min-width: 0;
    max-width: 100%;
    padding: 4px 10px 4px 4px;
    margin-left: -4px;
    color: var(--fg);
}

.header-title-icon {
    width: var(--control-h);
    height: var(--control-h);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-svg {
    width: var(--icon-size);
    height: var(--icon-size);
    display: block;
    pointer-events: none;
    overflow: visible;
    filter: drop-shadow(0 0 5px var(--sun-glow));
}

.logo-sun {
    stroke: var(--sun);
}

.logo-cloud {
    stroke: var(--cloud);
}

/* Title text: clipped (overflow: hidden) if the header ever gets too narrow. */
.header-title-text {
    font-family: var(--ff-ui);
    font-size: var(--title-size);
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: var(--control-h);
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
    flex-shrink: 0;
}

/* Controls group (gear button) */

/* Cycling button — capsule control with subtle fill and accent interaction */
.cycle-btn {
    height: var(--control-h);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 clamp(12px, 1.6vw, 20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--fg);
    cursor: pointer;
    flex-shrink: 0;
    min-width: 0;
    font-family: var(--ff-data);
    font-size: var(--fs-base);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    transition:
        border-color 0.2s ease,
        color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
    user-select: none;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.cycle-btn:hover {
    border-color: var(--accent);
    color: #fff;
    background: var(--accent-dim);
    box-shadow:
        0 0 12px var(--accent-glow),
        inset 0 0 12px rgba(59, 130, 246, 0.08);
}

.cycle-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.cycle-btn:active {
    transform: scale(0.96);
    transition-duration: 0.08s;
}

/* Gear button — icon-only .cycle-btn that opens the settings menu */
.gear-btn {
    width: var(--control-h);
    padding: 0;
}

.gear-icon {
    width: var(--icon-size);
    height: var(--icon-size);
    display: block;
    pointer-events: none;
}

/* === Settings panel (opened from the gear button) === */
.settings-panel {
    position: absolute;
    top: 100%;
    right: var(--header-px);
    margin-top: 8px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1.4vh, 14px);
    max-width: calc(100vw - 2 * var(--header-px));
    padding: clamp(12px, 1.8vh, 18px);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.55),
        0 0 1px rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition:
        opacity 0.16s ease,
        transform 0.16s ease;
}

.settings-panel.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(14px, 2vw, 30px);
}

.setting-label {
    font-family: var(--ff-ui);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-muted);
    white-space: nowrap;
}

/* Segmented control: all options visible, one tap to choose */
.seg {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    border-radius: 9px;
}

.seg-btn {
    border: none;
    border-radius: 6px;
    padding: clamp(5px, 0.8vh, 8px) clamp(9px, 1vw, 13px);
    background: transparent;
    color: var(--fg-muted);
    font-family: var(--ff-data);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    transition:
        background 0.14s ease,
        color 0.14s ease;
}

.seg-btn:hover {
    color: var(--fg);
    background: rgba(255, 255, 255, 0.07);
}

.seg-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.seg-btn.active {
    color: #fff;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent-glow);
}

/* ================================================================
 * Grid Container (size container for @container queries)
 * ================================================================
 * This wrapper exists because a CSS container query cannot restyle
 * the container element itself — only its descendants.  So the
 * container-type lives here, and the @container rules target the
 * inner .grid and its children.
 */
.grid-container {
    flex: 1 1 0%;
    min-height: 0;
    width: 100%;
    overflow: hidden;
    container-name: grid;
    container-type: size;
}

/* ================================================================
 * Grid – WIDE (default)
 * ================================================================
 * Content rows only. 100cqh = available grid height.
 *
 * Rows:    repeat(N, 1fr) var(--footer-h) — N content rows + footer.
 * Columns: C1 width = row-height (windrose is height-constrained,
 *          metrics auto-size within). C2 fills remaining space.
 */
.grid {
    width: 100%;
    height: 100%;
    display: grid;
    --_footer-h: var(--footer-h);
    --_gap: var(--row-gap);
    --_col-gap: clamp(6px, 0.8vmin, 14px);
    --_row-h: calc((100cqh - var(--_footer-h)) / var(--rows));
    grid-template-rows: repeat(var(--rows), 1fr) var(--_footer-h);
    row-gap: var(--_gap);
    /* C1 (metrics+windrose) wants row-height × 1.4 but must never
       exceed 1/3 of width so charts (C2) stay ≥ 2× windrose width.
       Also must be wide enough to hold the legend without wrapping. */
    --_c1-natural: calc(var(--_row-h) * 1.4);
    --_c1-max: calc(100cqw / 3);
    grid-template-columns:
        minmax(min-content, min(var(--_c1-natural), var(--_c1-max)))
        1fr;
    column-gap: var(--_col-gap);
    overflow: hidden;
    /* Paint footer bar as full-width background, covering gaps */
    background: linear-gradient(
        to top,
        var(--bg-surface) var(--_footer-h),
        var(--bg) var(--_footer-h)
    );
}

/*
 * Column wrappers use subgrid to inherit the parent's row tracks.
 * Each .col spans all rows — children auto-place into the inherited
 * row tracks in DOM order.
 */
.col {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 1 / -1;
}

/* === Cells (shared) === */
.cell {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

/* === Utility: overflow-visible ===
 * Applied to cells that need to paint beyond their grid area
 * (e.g. a chart that draws its own footer/legend).
 */
.overflow-visible {
    overflow: visible;
}

/* === Utility: aspect-square ===
 * Previously forced cells to 1:1 when windrose filled the entire cell.
 * Now that windrose lives in its own grid column within the cell,
 * the SVG maintains aspect ratio via viewBox. Cells fill row height.
 */
.aspect-square > .cell {
    /* aspect-ratio removed — cells fill grid row naturally */
}

/* ================================================================
 * Footer
 * ================================================================
 * Lives inside col 1.  Occupies the final grid row via auto-placement.
 * Height is set by the grid row template (--_footer-h), not by the
 * element itself.  No negative-margin hack — the footer row is an
 * explicit part of the grid template.
 */
.footer {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    background: var(--bg-surface);
}

#c2 > .footer {
    background: transparent;
}

/* ================================================================
 * Grid – NARROW (container query)
 * ================================================================
 * The cutover fires when the grid container's aspect ratio is at most
 * 2/N (currently 2/3 for 3 rows).  At that ratio and below, C2 would
 * be narrower than 1:1 per row in the side-by-side layout, so we
 * switch to horizontal scroll-snap columns instead.
 *
 * .grid switches from CSS grid to flex.  Each .col becomes its own
 * CSS grid with an identical row template: repeat(N, 1fr) var(--_footer-h).
 * Because both cols share the same template the N content rows get
 * identical heights — no dummy spacer elements needed.
 *
 * Col 1: cells in rows 1–N, footer in the footer row.
 *        Cells are 1:1 squares, centered horizontally.
 * Col 2: cells in rows 1–N, footer row is empty.
 *        Cells fill full col width.
 *
 * To change N, update the ratio and the repeat() below.
 */
@container grid (max-aspect-ratio: 2 / 3) {
    .grid {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .grid::-webkit-scrollbar {
        display: none;
    }

    /*
     * Cols become independent CSS grids with the same row template.
     * Single column stretches to full col width.
     */
    .col {
        display: grid;
        grid-template-rows: repeat(var(--rows), 1fr) var(--_footer-h);
        grid-template-columns: 1fr;
        grid-row: auto;
        flex: 0 0 100%;
        width: 100%;
        height: 100%;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .col > .cell {
        min-width: 0;
        min-height: 0;
        width: 100%;
        overflow: hidden;
    }

    /*
     * Square-cell columns: cells are 1:1 squares centered horizontally.
     * The grid column is full-width; justify-items centers the
     * aspect-ratio-constrained cells.
     */
    .aspect-square {
        justify-items: center;
    }
    .aspect-square > .cell {
        max-width: 100%;
        width: auto;
    }

    /* Footer inside a square-cell column: stretch to full pane width */
    .aspect-square > .footer {
        width: 100%;
        justify-self: stretch;
    }

    /* Non-square columns: cells fill full width */
    .col:not(.aspect-square) > .cell {
        width: 100%;
    }

    .overflow-visible {
        overflow: visible;
    }
}

/* ================================================================
 * Diagnostic Borders
 * ================================================================
 * Add class="debug" to any ancestor (e.g. <body> or .layout) to
 * enable coloured outlines on all grid elements.  Zero cost when
 * .debug is not applied.
 *
 * Colours are assigned by structural position within each col
 * using :nth-child(), so adding/removing rows automatically gets
 * a colour without touching these rules.
 */
.debug .header {
    outline: 2px solid hsl(30, 70%, 65%);
    outline-offset: -2px;
}
.debug .footer {
    outline: 2px solid hsl(210, 50%, 65%);
    outline-offset: -2px;
}
.debug .cell {
    outline: 2px solid rgba(255, 80, 80, 0.7);
    outline-offset: -2px;
}

/* C1 cell colours by row position */
.debug .col:nth-child(1) > .cell:nth-child(1) {
    outline-color: hsl(0, 80%, 65%);
}
.debug .col:nth-child(1) > .cell:nth-child(2) {
    outline-color: hsl(120, 80%, 55%);
}
.debug .col:nth-child(1) > .cell:nth-child(3) {
    outline-color: hsl(240, 80%, 70%);
}

/* C2 cell colours by row position */
.debug .col:nth-child(2) > .cell:nth-child(1) {
    outline-color: hsl(60, 80%, 60%);
}
.debug .col:nth-child(2) > .cell:nth-child(2) {
    outline-color: hsl(180, 80%, 55%);
}
.debug .col:nth-child(2) > .cell:nth-child(3) {
    outline-color: hsl(300, 80%, 65%);
}

/* Per-cell labels for debug: add data-cell="C1R1" etc. to cells */
.debug .cell::after {
    content: attr(data-cell);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font:
        bold 1rem/1 system-ui,
        sans-serif;
    color: rgba(255, 255, 255, 0.35);
}

/* Col outlines only visible in narrow mode */
@container grid (max-aspect-ratio: 2 / 3) {
    .debug .col {
        outline: 2px dashed rgba(160, 160, 160, 0.3);
        outline-offset: -2px;
    }
}