/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Page shell: one grid for the whole layout.
   Rows: 96px header | rest of viewport.
   Columns: 49px (48px aside + 1px divider) | main.
   Only the main area scrolls. */
.bt-shell[b-5a6q1v5rl8] {
    position: relative; /* anchors the slide-down drawer */
    display: grid;
    grid-template-rows: 96px 1fr;
    grid-template-columns: 49px 1fr;
    height: 100dvh;
    /* floor = header 96 + corner line 72 + 12 + era tabs 290 + 12 +
       social zone 150 + a little comfort — fits an iPhone SE (667px)
       without cutting the header or footer */
    min-height: 644px;
    overflow: hidden;
}

.bt-header[b-5a6q1v5rl8] {
    grid-row: 1;
    grid-column: 1 / -1; /* spans aside + main */
    position: relative;
    z-index: 50; /* above the drawer, which slides out from underneath */
    background: var(--bt-bg); /* opaque: masks the retracted drawer */
    width: 100%;
    height: 96px;
    display: flex;
    align-items: center;
    /* (96px − 48px logo) / 2 = 24px top/bottom; left = double = 48px */
    padding-left: 48px;
}

/* Main menu: occupies the zone between the logo's vertical line (457px)
   and the right-side vertical line (48px from the right edge) */
.bt-menu[b-5a6q1v5rl8] {
    position: absolute;
    left: 458px;
    right: 49px;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center; /* items are 72px tall: 12px clearance top & bottom */
    justify-content: space-evenly;
}

.bt-menu a[b-5a6q1v5rl8] {
    position: relative; /* anchor for the mega panel */
    display: flex;
    align-items: center;
    gap: 20px;
    height: 72px;
    /* hover zone ≈ twice the text+icon group width */
    padding: 0 50px;
    color: var(--bt-text);
    text-transform: uppercase;
    text-decoration: none;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
}

.bt-menu a:hover[b-5a6q1v5rl8] {
    text-decoration: none;
}

@media (max-width: 1450px) {
    .bt-menu a[b-5a6q1v5rl8] {
        padding: 0 20px;
    }
}

/* Below this the header zone can no longer fit the four items:
   the menu disappears and returns when the window widens again */
@media (max-width: 1199px) {
    .bt-menu[b-5a6q1v5rl8] {
        display: none;
    }
}

/* Compact view: hide until the mobile menu is designed */
@media (max-width: 960px) {
    .bt-menu[b-5a6q1v5rl8] {
        display: none;
    }
}

/* Clipping strip for the header's left-anchored vertical line:
   ends at the right-side vertical line (72px from right), so the line
   disappears when it would cross it and reappears on resize. */
.bt-header-guides[b-5a6q1v5rl8] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 48px;
    overflow: hidden;
    pointer-events: none;
}

/* Vertical divider at 457px from the left — exactly above the C1/C2
   boundary in the main area (48px aside + 1px border + 408px) */
.bt-header-guide-left[b-5a6q1v5rl8] {
    position: absolute;
    left: 457px;
    top: 0;
    height: 100%;
    width: 1px;
    background: darkgray;
}

/* Vertical divider 48px in from the right edge, aligned with C4's left
   boundary in the main area */
.bt-header-line-right[b-5a6q1v5rl8] {
    position: absolute;
    right: 48px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: darkgray;
}

/* Bottom divider: starts 24px from the left, runs to the right edge */
.bt-header[b-5a6q1v5rl8]::after {
    content: "";
    position: absolute;
    left: 24px;
    right: 0;
    bottom: 0;
    height: 1px;
    background: darkgray;
}

/* First header section: left edge up to the first vertical line (457px).
   White by default with the grayscale logo; darkgrey with the color logo
   on hover. */
.bt-logo[b-5a6q1v5rl8] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 457px;
    max-width: calc(100% - 48px); /* never overlap the right-side line */
    display: flex;
    align-items: center;
    padding-left: 48px;
    background: var(--bt-item);
    transition: background-color 200ms ease;
}

.bt-logo:hover[b-5a6q1v5rl8] {
    background: var(--bt-hover);
}

.bt-logo img[b-5a6q1v5rl8] {
    height: 48px;
    width: auto;
    display: block;
}

.bt-logo .bt-logo-gray[b-5a6q1v5rl8] {
    display: none;            /* colour logo shows by default */
}

.bt-logo:hover .bt-logo-color[b-5a6q1v5rl8] {
    display: none;            /* swap to the grayscale logo on hover */
}

.bt-logo:hover .bt-logo-gray[b-5a6q1v5rl8] {
    display: block;
}

.bt-aside[b-5a6q1v5rl8] {
    grid-row: 2;
    grid-column: 1;
    position: relative;
    border-right: 1px solid darkgrey; /* fills the shell column's 49th px */
}

/* Top-left corner area of the aside (24px × 72px, bounded by the two
   aside lines): white normally, darkgray while hovered */
.bt-aside-corner[b-5a6q1v5rl8] {
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 72px;
    background: var(--bt-item);
    transition: background-color 200ms ease;
}

.bt-aside-corner:hover[b-5a6q1v5rl8] {
    background: var(--bt-hover);
}

/* ===== Era tabs (PAST / PRESENT / FUTURE) =====
   Vertical buttons centered in the aside, stacked flush, above the
   guide lines. The shell's min-height guarantees they always keep at
   least 60px clearance from the aside's top and bottom. */
.bt-era-tabs[b-5a6q1v5rl8] {
    position: absolute;
    /* centered in the zone from 12px below the top-left corner line
       (72px + 12px = 84px) down to 12px above the top social button
       (bottom: 6px + 3×36px + 2×12px gaps + 12px = 150px):
       zone midpoint = 50% + (84 − 150)/2 = 50% − 33px */
    top: calc(50% - 33px);
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    z-index: 10;
}

.bt-era-tab[b-5a6q1v5rl8] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-height: 96px;
    background: var(--bt-item);
    border: 1px solid darkgrey;
    color: var(--bt-text);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition: background-color 150ms ease, color 150ms ease;
}

.bt-era-tab:hover[b-5a6q1v5rl8] {
    text-decoration: none;
}

/* only the main label is vertical (reads bottom-to-top) */
.bt-era-tab > span[b-5a6q1v5rl8] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* horizontal year strip at the tab's bottom: equal 4px margins left,
   right and bottom; digits spread across the remaining width */
.bt-era-year[b-5a6q1v5rl8] {
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 4px;
    display: flex;
    justify-content: space-between;
    font-size: 8px;
    line-height: 1;
    letter-spacing: 0;
}

/* FUTURE variant: same strip, but at the tab's top */
.bt-era-year-top[b-5a6q1v5rl8] {
    bottom: auto;
    top: 4px;
}

/* PRESENT: label shifts left, current month-year runs vertically on its
   right; space-evenly gives three equal gaps (edge–label–date–edge),
   and both stay vertically centered to each other */
.bt-era-present[b-5a6q1v5rl8] {
    justify-content: center; /* label + year grouped in the middle */
    gap: 2px;
}

/* Current year in vertical writing (rotated like the PRESENT label),
   digits spread over 28px — the same span/ratio as PAST's "1 9 8 0" */
.bt-era-now[b-5a6q1v5rl8] {
    display: flex;
    justify-content: space-between;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    inline-size: 28px;
    font-size: 8px;
    line-height: 1;
}

.bt-era-tab + .bt-era-tab[b-5a6q1v5rl8] {
    margin-top: -1px; /* collapse adjacent borders */
}

.bt-era-tab:hover[b-5a6q1v5rl8] {
    background: var(--bt-hover);
    color: var(--bt-hover-text);
}

/* tab of the page currently open */
.bt-era-tab.active[b-5a6q1v5rl8] {
    background: black;
    border-color: black;
    color: white;
}

/* ===== Social buttons at the aside's bottom =====
   Round, 36px diameter (same as the era tab width), 6px from each side
   of the 48px aside, black & white icons */
.bt-aside-social[b-5a6q1v5rl8] {
    position: absolute;
    left: 6px;
    bottom: 6px; /* same as the side margin */
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 10;
}

.bt-aside-social a[b-5a6q1v5rl8] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bt-item);
    border: 1px solid darkgray;
    color: #111111;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 150ms ease, color 150ms ease;
}

.bt-aside-social a:hover[b-5a6q1v5rl8] {
    background: var(--bt-hover);
    color: var(--bt-hover-text);
}

/* Personal LinkedIn button: round photo with 2px margin on white */
.bt-social-photo img[b-5a6q1v5rl8] {
    width: 30px;  /* 36 − 2×1px border − 2×2px margin */
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    transition: opacity 0.25s ease; /* soft cross-fade on rotation */
}

/* Vertical line in the aside: from top down to 72px, 24px from the left */
.bt-aside[b-5a6q1v5rl8]::before {
    content: "";
    position: absolute;
    left: 24px;
    top: 0;
    height: 72px;
    width: 1px;
    background: darkgrey;
}

/* Horizontal line from the end of the vertical line (24px, 72px) to the aside's left edge */
.bt-aside[b-5a6q1v5rl8]::after {
    content: "";
    position: absolute;
    left: 0;
    top: 71px;
    width: 24px;
    height: 1px;
    background: darkgray;
}

/* Black overlay on the aside's right border (= cell 1's left guide line) for the
   grid's last three rows: the bottom ~360px (a ~300px content row + the 60px
   footer band). right:-1px puts it exactly on the 1px border. Adjust the height
   if a different extent is wanted. */
.bt-aside-foot-line[b-5a6q1v5rl8] {
    position: absolute;
    right: -1px;
    bottom: 0;
    width: 1px;
    height: 360px;
    background: black;
    pointer-events: none;
    z-index: 11;
}

/* Horizontally scrolling grid: sections are columns, scroll length grows with content */
.bt-main[b-5a6q1v5rl8] {
    grid-row: 2;
    grid-column: 2;
    position: relative;
    min-width: 0;
    min-height: 0; /* allows scrolling instead of growing the shell row */
    overflow-x: hidden; /* no horizontal scrolling */
    overflow-y: auto;
    scrollbar-width: none; /* hide scrollbar (Firefox) */
}

/* Hide scrollbar (Chrome/Edge/Safari) */
.bt-main[b-5a6q1v5rl8]::-webkit-scrollbar {
    display: none;
}

/* Placement grid — tracks match the painted guide lines exactly.
   Columns:  C1: 0–408px | C2: 408px–center | C3: center–(right−48px) | C4: last 48px
   Place objects with grid-row / grid-column (rows listed below). */
.bt-grid[b-5a6q1v5rl8] {
    display: grid;
    grid-template-columns: 408px calc(50% - 408px) calc(50% - 48px) 48px;
    /* 18 rows. R1 = 12px green strip · R2 = 120px dotted · R3 = 12px ·
       R4 = ≥288px · R5 = 48px dotted · R6 = ≥288px · R7 = 48px dotted ·
       R8 = ≥288px · R9–R12 = flexible fillers (48px floor, share
       leftover height) · R13 = ≥288px · R14 = 120px dotted · R15 = 12px ·
       R16 = ≥288px · R17 = 12px black strip · R18 = 48px footer links */
    grid-template-rows: 12px 120px 12px minmax(288px, auto) 48px minmax(288px, auto) 48px minmax(288px, auto) 96px minmax(48px, 1fr) minmax(48px, 1fr) minmax(48px, 1fr) minmax(48px, 1fr) minmax(200px, auto) 196px 12px minmax(300px, auto) 12px 48px;
    width: 100%;
    min-height: 100%;
}

/* Responsive collapse: below 960px the design grid stacks everything
   into a single column in source order; guide lines and labels hide. */
@media (max-width: 960px) {
    /* Single content column + the C4 rail (48px, reserved as padding),
       which never hides — its boundary line is drawn as a background
       spanning the full height. The column always fills the viewport,
       so the page never collapses when content is sparse. */
    .bt-grid[b-5a6q1v5rl8] {
        display: flex;
        flex-direction: column;
        gap: 24px;
        /* no top padding: row 1 starts directly below the header; 60px bottom
           clearance so content isn't hidden behind the anchored footer */
        padding: 0 48px 60px 0;
        min-height: 100%;
        /* Right guide line: darkgray full height, with the bottom 348px BLACK to
           match the grid's "last three rows" (a ~288px content row + the 60px
           footer band). Adjust the 348px if a different extent is wanted. */
        background:
            linear-gradient(black, black) no-repeat right 47px bottom 0 / 1px 348px,
            linear-gradient(darkgray, darkgray) no-repeat right 47px top 0 / 1px 100%;
    }

    .bt-line[b-5a6q1v5rl8] {
        display: none;
    }

    /* First row: 12px green strip in compact view too */
    .bt-r1c1-accent[b-5a6q1v5rl8] {
        flex: 0 0 12px;
        order: -2; /* stays at the very top */
    }

    /* R2/R14 blocks: 120px, flush (negative margin cancels the flex
       gap); dotted lines come from app.css */
    .bt-r2-spacer[b-5a6q1v5rl8],
    .bt-r14-spacer[b-5a6q1v5rl8] {
        flex: 0 0 120px;
        margin-top: -24px;
    }

    /* R3/R15 blocks: 12px, flush, solid row line at the bottom */
    .bt-r3-spacer[b-5a6q1v5rl8],
    .bt-r15-spacer[b-5a6q1v5rl8] {
        flex: 0 0 12px;
        margin-top: -24px;
        border-bottom: 1px solid darkgray;
    }

    /* R4/R13/R16 blocks: grow with content, min 288px, solid row line at bottom */
    .bt-r4-spacer[b-5a6q1v5rl8],
    .bt-r13-spacer[b-5a6q1v5rl8],
    .bt-r16-spacer[b-5a6q1v5rl8] {
        flex: 0 0 auto;
        min-height: 288px;
        margin-top: -24px;
        border-bottom: 1px solid darkgray;
    }

    /* R5 block: 48px, flush under R4; dotted line comes from app.css */
    .bt-r5-spacer[b-5a6q1v5rl8] {
        flex: 0 0 48px;
        margin-top: -24px;
    }

    /* R6 block: like R4 — grows with content, min 288px, solid line */
    .bt-r6-spacer[b-5a6q1v5rl8] {
        flex: 0 0 auto;
        min-height: 288px;
        margin-top: -24px;
        border-bottom: 1px solid darkgray;
    }

    /* R7 block: like R5 — 48px; dotted line comes from app.css */
    .bt-r7-spacer[b-5a6q1v5rl8] {
        flex: 0 0 48px;
        margin-top: -24px;
    }

    /* R8 block: like R6 — grows with content, min 288px, solid line */
    .bt-r8-spacer[b-5a6q1v5rl8] {
        flex: 0 0 auto;
        min-height: 288px;
        margin-top: -24px;
        border-bottom: 1px solid darkgray;
    }

    /* R9–R12 filler blocks: share leftover height, min 48px, solid line */
    .bt-rfill-spacer[b-5a6q1v5rl8] {
        flex: 1 0 48px;
        margin-top: -24px;
        border-bottom: 1px solid darkgray;
    }

    /* Compact view: no columns, so the R9 block itself goes darkgrey
       and the C2–C3 accent element is dropped */
    .bt-r9-fill[b-5a6q1v5rl8] {
        background: darkgrey;
    }

    .bt-r9c2-accent[b-5a6q1v5rl8],
    .bt-r9c3-accent[b-5a6q1v5rl8] {
        display: none;
    }

    /* Compact view: R15 block takes C2's white; cell accents drop */
    .bt-r15-spacer[b-5a6q1v5rl8] {
        background: white;
    }

    .bt-r4c3-accent[b-5a6q1v5rl8],
    .bt-r5c12-accent[b-5a6q1v5rl8],
    .bt-r7c3-accent[b-5a6q1v5rl8],
    .bt-r14c3-accent[b-5a6q1v5rl8],
    .bt-r15c1-accent[b-5a6q1v5rl8],
    .bt-r15c2-accent[b-5a6q1v5rl8],
    .bt-r15c3-accent[b-5a6q1v5rl8] {
        display: none;
    }

    /* Black strip sits directly above the footer (margin-top: auto pins
       the pair to the bottom; the negative margin cancels the flex gap) */
    .bt-r17-accent[b-5a6q1v5rl8] {
        flex: 0 0 12px;
        order: 998;
        /* flush against R16 (the filler rows absorb leftover height) */
        margin-top: -24px;
        margin-bottom: -24px;
    }
}

/* Green accent cell: R1·C1, same green as "thinkers" in the logo */
.bt-r1c1-accent[b-5a6q1v5rl8] {
    grid-row: 1;
    grid-column: 1;
    background: #CCCC33;
}

/* R2 spacer: placement is inline on the element; its dotted bottom line
   is styled globally in app.css (applies identically to both views). */

/* R7: C3 darkgray */
.bt-r7c3-accent[b-5a6q1v5rl8] {
    background: darkgray;
}

/* R9: C2 black, C3 darkgrey */
.bt-r9c2-accent[b-5a6q1v5rl8] {
    background: black;
}

.bt-r9c3-accent[b-5a6q1v5rl8] {
    background: #CCCC33; /* logo green, swapped from R7·C3 */
}

/* R4: C3 black */
.bt-r4c3-accent[b-5a6q1v5rl8] {
    background: black;
}

/* R5: C1–C2 white */
.bt-r5c12-accent[b-5a6q1v5rl8] {
    background: white;
}

/* R14: C3 black */
.bt-r14c3-accent[b-5a6q1v5rl8] {
    background: black;
}

/* R15: C1 darkgrey, C2 white, C3 black */
.bt-r15c1-accent[b-5a6q1v5rl8] {
    background: darkgrey;
}

.bt-r15c2-accent[b-5a6q1v5rl8] {
    background: white;
}

.bt-r15c3-accent[b-5a6q1v5rl8] {
    background: black;
}

/* Black strip: R21 (second-last row), up to the rail */
.bt-r17-accent[b-5a6q1v5rl8] {
    grid-row: 17;
    grid-column: 1 / 4;
    background: black;
}

/* ===== Guide lines as grid items =====
   Horizontal lines sit on each row's bottom boundary and stretch with it;
   vertical lines sit on each column's start boundary. They track the grid
   exactly, however much rows grow from content. */
.bt-line[b-5a6q1v5rl8] {
    pointer-events: none;
}

/* Bottom boundary of each row, from the left edge to the C4 line
   (column 4 stays free of horizontal borders) */
.bt-line-row[b-5a6q1v5rl8] {
    grid-column: 1 / 4;
    align-self: end;
    width: 100%;
    height: 1px;
    margin-top: -1px; /* net height 0: lines never inflate empty auto rows */
    background: darkgray;
}

/* Column start boundaries, spanning every row except the last (R22) */
.bt-line-v[b-5a6q1v5rl8] {
    grid-row: 1 / 19;
    justify-self: start;
    width: 1px;
    height: 100%;
    background: darkgray;
}

.bt-line-v1[b-5a6q1v5rl8] { grid-column: 2; } /* C1/C2 boundary (the 408px line) */
.bt-line-v2[b-5a6q1v5rl8] { grid-column: 3; } /* C2/C3 boundary (the center line) */

/* C3's right border (C4's left border is hidden — this line owns the
   boundary). Spans all rows incl. the last; never hides. */
.bt-line-c3-right[b-5a6q1v5rl8] {
    grid-column: 3;
    grid-row: 1 / -1;
    justify-self: end;
}

/* Black overlay on the C3/C4 boundary for the last three rows (17–19).
   Sits on top of the darkgray .bt-line-c3-right (later in DOM), so those rows
   read as a 1px BLACK line. The anchored footer overlays rows 18–19 and carries
   the same black on its own right border. */
.bt-line-c3-foot[b-5a6q1v5rl8] {
    grid-column: 3;
    grid-row: 17 / -1;
    justify-self: end;
    background: black;
}

/* Right border of the last column (C4), at the grid's right edge —
   spans all rows including the last one */
.bt-line-right[b-5a6q1v5rl8] {
    grid-column: 4;
    grid-row: 1 / -1;
    justify-self: end;
}


#blazor-error-ui[b-5a6q1v5rl8] {
    background: #b32121;
    color: #fff;
    bottom: 0;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.25);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-5a6q1v5rl8] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

#blazor-error-ui a.reload[b-5a6q1v5rl8] {
    color: #fff;
    text-decoration: underline;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Home page styles — marquee styles are shared globally (.bt-marquee in app.css) */