/* ============================================================ */
/* header.css — FarangThai header port (HTML + CSS only)         */
/* Source: user frontend - Prototype/styles.css                   */
/* All rule bodies are byte-identical to source; selectors are    */
/* prefixed with .ft-port-scope per prompt constraint #4.         */
/* Cascade order preserved (source line ranges noted).            */
/* ============================================================ */

/* === source styles.css:16-23 — @font-face Lora (additive global, no override) === */
@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    src: url(https://fonts.bunny.net/lora/files/lora-latin-400-normal.woff2) format('woff2'),
         url(https://fonts.bunny.net/lora/files/lora-latin-400-normal.woff) format('woff');
}

/* === source styles.css:25-31 — @font-face Merriweather (additive global, no override) === */
@font-face {
    font-family: 'Merriweather';
    font-style: normal;
    font-weight: 700;
    src: url(https://fonts.bunny.net/merriweather/files/merriweather-latin-700-normal.woff2) format('woff2'),
         url(https://fonts.bunny.net/merriweather/files/merriweather-latin-700-normal.woff) format('woff');
}

/* === Scope-bound custom properties (re-declared from source :root + has-light-text override, on .ft-port-scope so cascade is confined to the wrapper; target's :root tokens unaffected) === */
.ft-port-scope {
    margin: -10px -10px 0 -10px;     /* escape target body's 10px padding (user frontend/styles.css:29) so the nav goes edge-to-edge */
    --primary-color: #6900ff;
    --secondary-color: #4a1a8a;
    --bg-color: #212121;
    --card-bg: #2a2a2a;
    --text-color: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.64);
    --border-color: rgba(255, 255, 255, 0.15);
    --success-color: #10b981;
    --error-color: #ef4444;
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    --brand-gradient: linear-gradient(135deg, #1a0533 0%, #2d1054 40%, #4a1a8a 70%, #6900ff 100%);
    --brand-gradient-2stop: linear-gradient(135deg, #1a0533, #2d1054);
    --brand-accent: #2d1054;
    --radius-sm: 4px;
    --radius-md: 5px;
    --radius-lg: 8px;
    --gh-font-heading: Merriweather;
    --gh-font-body: Lora;
    --content-font-size: 20px;
    --ghost-accent-color: #6900ff;
    --background-color: transparent;
    --color-white: #fff;
    --color-lighter-gray: hsla(0, 0%, 100%, .1);
    --color-light-gray: #e6e6e6;
    --color-mid-gray: #ccc;
    --color-dark-gray: #444;
    --color-darker-gray: #fff;
    --color-black: #000;
    --color-primary-text: var(--color-darker-gray);
    --color-secondary-text: hsla(0, 0%, 100%, .64);
    --color-border: hsla(0, 0%, 100%, .15);
    --color-dark-border: hsla(0, 0%, 100%, .5);
    --container-width: 1320px;
    --container-gap: clamp(24px, 17.032px + 1.9355vw, 48px);
    --grid-gap: 42px;
}

/* === source styles.css:158-177 — .btn-lang === */
.ft-port-scope .btn-lang {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 14.4px;         /* was 0.9rem × 1.6 */
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.ft-port-scope .btn-lang:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
}

/* === source styles.css:179-181 — .lang-icon === */
.ft-port-scope .lang-icon {
    font-size: 17.6px;         /* was 1.1rem × 1.6 */
}

/* === source styles.css:348-371 — .btn base + states === */
.ft-port-scope .btn {
    padding: 12px 24px;
    border: none;
    font-size: 16px;          /* was 1rem × 1.6 */
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}


.ft-port-scope .btn:active {
    transform: translateY(0);
}

.ft-port-scope .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* === source styles.css:391-408 — .btn-outline (first def) === */
.ft-port-scope .btn-outline {
    align-items: center;
    background-color: #6900ff !important;
    border: 0;
    border-radius: 0;                /* override target .btn{border-radius:8px} leaking into scope */
    display: inline-flex;
    font-size: 15px;
    font-weight: 600;
    gap: .4em;
    justify-content: center;
    letter-spacing: -.004em;
    line-height: 1;
    padding: .8em 1.4em
}

.ft-port-scope .btn-outline:hover:not(:disabled) {
    background: var(--primary-color);
    color: white;
    transform: none;                 /* override target .btn:hover lift */
    box-shadow: none;                /* override target .btn:hover shadow */
}

/* === source styles.css:615-623 — .btn-outline (second def, cascade wins on overlap) === */
.ft-port-scope .btn-outline {
    /* index.html:763 — pill-style: white border, white text, transparent bg */
    color: #fff;
}

.ft-port-scope .btn-outline:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* === source styles.css:718-720 — .gh-outer === */
.ft-port-scope .gh-outer {
    padding: 0 max(4vmin, 20px);
}

/* === source styles.css:722-728 — .gh-navigation (first def) === */
.ft-port-scope .gh-navigation {
    background-color: var(--background-color);
    color: var(--color-darker-gray);
    font-size: 15px;
    font-weight: 550;
    height: 100px;
}

/* === source styles.css:730-734 — .gh-navigation (second def, cascade wins) === */
.ft-port-scope .gh-navigation {
    /* second .gh-navigation rule from inspector — wins via cascade */
    height: unset !important;
    background: linear-gradient(135deg, #1a0533 0%, #2d1054 40%, #4a1a8a 70%, #6900ff 100%);
}

/* === source styles.css:736-739 — .gh-navigation.is-stacked === */
.ft-port-scope .gh-navigation.is-stacked {
    height: auto;
    position: relative;
}

/* === source styles.css:743-751 — .gh-navigation (third def, structural baseline) === */
.ft-port-scope .gh-navigation {
    flex-shrink: 0;
    width: 100%;
    padding-block: 12px;
    border-radius: 0;               /* nav is full-width bar, not a card */
    margin-bottom: 0;
    box-shadow: none;
    padding: 12px max(4vmin, 20px); /* edge-to-edge horizontal, no card padding */
    padding-bottom: 0;              /* G26 — flush with menu's ::after divider line */
}

/* === source styles.css:761-771 — .gh-navigation.is-stacked .gh-navigation-inner === */
.ft-port-scope .gh-navigation.is-stacked .gh-navigation-inner {
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px 16px;
    max-width: var(--container-width);
    margin: 0 auto;
    width: 100%;
    padding: 0 max(4vmin, 20px);   /* mirrors .gh-outer */
}

/* === source styles.css:773-775 — brand display:contents === */
.ft-port-scope .gh-navigation.is-stacked .gh-navigation-brand {
    display: contents;             /* children participate in parent grid */
}

/* === source styles.css:777-781 — brand .gh-search === */
.ft-port-scope .gh-navigation.is-stacked .gh-navigation-brand .gh-search {
    grid-row: 1;
    grid-column: 1;
    display: inline-flex;          /* override the global brand-search hide below */
}

/* === source styles.css:783-787 — brand logo grid placement === */
.ft-port-scope .gh-navigation.is-stacked .gh-navigation-brand .gh-navigation-logo {
    grid-row: 1;
    grid-column: 2;
    justify-self: center;
}

/* === source styles.css:789-791 — brand burger hidden on desktop === */
.ft-port-scope .gh-navigation.is-stacked .gh-navigation-brand .gh-burger {
    display: none;                 /* desktop — burger only appears in the mobile media query */
}

/* === source styles.css:793-797 — actions grid placement === */
.ft-port-scope .gh-navigation.is-stacked .gh-navigation-actions {
    grid-row: 1;
    grid-column: 3;
    justify-self: end;
}

/* === source styles.css:799-801 — actions .gh-search hidden on desktop === */
.ft-port-scope .gh-navigation.is-stacked .gh-navigation-actions .gh-search {
    display: none;                 /* duplicate; only the brand's search shows on desktop */
}

/* === G14 — menu grid placement; divider lines moved to ::before/::after to match Ghost theme (default.hbs:650-663) === */
.ft-port-scope .gh-navigation.is-stacked .gh-navigation-menu {
    grid-row: 2;
    grid-column: 1 / -1;
    justify-content: center;
    position: relative;             /* anchor for absolutely-positioned ::before/::after divider lines */
    padding-top: 8px;
    margin-top: 4px;
}

/* G14 — two horizontal divider lines BRACKETING the menu row (top + bottom edges of the menu container, full viewport width). Visually matches Ghost screen.css:650-663 but anchored to the menu's own bounds so it adapts to my port's taller logo (80px) instead of Ghost's hardcoded 80px brand height. */
.ft-port-scope .gh-navigation.is-stacked .gh-navigation-menu::before,
.ft-port-scope .gh-navigation.is-stacked .gh-navigation-menu::after {
    position: absolute;
    left: calc(50% - 50vw);
    width: 100vw;
    height: 1px;
    content: "";
    background-color: #fff;
}

.ft-port-scope .gh-navigation.is-stacked .gh-navigation-menu::before {
    top: 0;
}

.ft-port-scope .gh-navigation.is-stacked .gh-navigation-menu::after {
    bottom: 0;
}

/* === G14 — REMOVED: the source's `.gh-navigation { border-bottom: 1px solid #fff }` would create a third line below the menu's ::after divider. Menu's ::before/::after now provide the two and only two divider lines. === */

/* === source styles.css:823-831 — .gh-navigation-inner fallback === */
.ft-port-scope .gh-navigation-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: var(--container-width);
    margin: 0 auto;
    width: 100%;
}

/* === source styles.css:833-837 — .gh-navigation-brand === */
.ft-port-scope .gh-navigation-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* === source styles.css:840-844 — .gh-navigation-logo img === */
.ft-port-scope .gh-navigation-logo img {
    max-height: 80px;            /* farangthai/index.html:95 — already 62.5%-root sized; do NOT rescale */
    padding: 5px;
    display: block;
}

/* === source styles.css:846-849 — .gh-navigation-logo === */
.ft-port-scope .gh-navigation-logo {
    display: inline-flex;
    align-items: center;
}

/* === source styles.css:852-861 — .gh-icon-button === */
.ft-port-scope .gh-icon-button {
    background: transparent;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* === G16 — .gh-icon-button svg: 31.25px matches Ghost default.hbs:503-506 === */
.ft-port-scope .gh-icon-button svg {
    color: white;
    height: 31.25px;
    width: 31.25px;
}

/* === G17 — .gh-burger: hide-by-default desktop + margins/alignment matches Ghost default.hbs:511-517 === */
.ft-port-scope .gh-burger {
    display: none;
    align-items: center;
    justify-content: center;
    margin-left: 6.25px;
    margin-right: 5.625px;
    position: relative;
}

/* === G16 — .gh-burger svg: 31.25px matches Ghost default.hbs:507-510 === */
.ft-port-scope .gh-burger svg {
    height: 31.25px;
    width: 31.25px;
}

/* === source styles.css:872-874 — .gh-burger second svg hide === */
.ft-port-scope .gh-burger svg + svg {
    display: none;
}

/* === source styles.css:876-878 — open state burger first-svg hide === */
.ft-port-scope #gh-navigation.is-open .gh-burger svg:first-child {
    display: none;
}

/* === source styles.css:880-882 — open state burger second-svg show === */
.ft-port-scope #gh-navigation.is-open .gh-burger svg + svg {
    display: inline-block;
}

/* === source styles.css:885-891 — .gh-navigation-menu === */
.ft-port-scope .gh-navigation-menu {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* === G27 — .gh-navigation-menu .nav, matches Ghost screen.css:464-472 (replaces prototype's diverged values: display:flex→inline-flex, gap:20px→28px, flex-wrap→white-space) === */
.ft-port-scope .gh-navigation-menu .nav {
    align-items: center;
    display: inline-flex;
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

/* === G15 — nav anchor styling: Prompt 27.5px, white, matches Ghost default.hbs:465-481 === */
.ft-port-scope .gh-navigation-menu .nav > li > a {
    font-family: 'Prompt', sans-serif !important;
    font-weight: 500 !important;
    font-size: 27.5px !important;
    color: white;
    text-decoration: none;
    white-space: nowrap;
    padding: 8px 4px;
    display: inline-block;
    transition: color 0.3s ease !important;
}

/* === G23 — nav anchor hover: color shift to violet, matches Ghost default.hbs:482-487 === */
.ft-port-scope .gh-navigation-menu .nav > li > a:hover {
    color: #6900ff !important;
}

/* === source styles.css:918-920 — gh-more-toggle hide === */
.ft-port-scope .gh-navigation .gh-more-toggle {
    display: none !important;
}

/* === source styles.css:922-924 — nav li opacity === */
.ft-port-scope .gh-navigation-menu .nav > li {
    opacity: 1 !important;
}

/* === source styles.css:926-928 — has-dropdown position === */
.ft-port-scope .gh-navigation-menu .nav > li.has-dropdown {
    position: relative;
}

/* === source styles.css:930-933 — has-dropdown caret === */
.ft-port-scope .gh-navigation-menu .nav > li.has-dropdown > a::after {
    content: ' ▾';
    font-size: 1.1em;
}

/* === source styles.css:935-950 — .gh-dropdown-menu === */
.ft-port-scope .gh-navigation-menu .nav > li.has-dropdown > .gh-dropdown-menu {
    position: absolute;
    top: 100%;
    left: -16px;
    z-index: 90;
    min-width: 200px;
    padding: 12px 0;
    margin-top: 0;
    visibility: hidden;
    opacity: 0;
    background: var(--brand-gradient);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: none;
    transition: opacity 0.2s;
    list-style: none;
}

/* === source styles.css:952-956 — dropdown hover/expanded show === */
.ft-port-scope .gh-navigation-menu .nav > li.has-dropdown:hover > .gh-dropdown-menu,
.ft-port-scope .gh-navigation-menu .nav > li.has-dropdown.is-expanded > .gh-dropdown-menu {
    visibility: visible;
    opacity: 1;
}

/* === G15 — dropdown li a: Prompt 16px, matches Ghost default.hbs:198-212 === */
.ft-port-scope .gh-navigation-menu .nav .gh-dropdown-menu li a {
    display: block;
    padding: 8px 20px;
    color: #fff !important;
    font-family: 'Prompt', sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.2s;
}

/* === source styles.css:970-973 — dropdown li a hover === */
.ft-port-scope .gh-navigation-menu .nav .gh-dropdown-menu li a:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff !important;
}

/* === source styles.css:976-983 — .gh-nav-arrow === */
.ft-port-scope .gh-nav-arrow {
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 19.2px;         /* was 1.20px × 1.6 */
    padding: 8px;
}

/* === source styles.css:986-990 — .gh-navigation-actions === */
.ft-port-scope .gh-navigation-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* === source styles.css:992-996 — .gh-navigation-members === */
.ft-port-scope .gh-navigation-members {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* === source styles.css:998-1003 — members signin link === */
.ft-port-scope .gh-navigation-members a[data-portal="signin"] {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    font-size: 15.2px;         /* was 0.95rem × 1.6 */
    white-space: nowrap;
}

/* === source styles.css:1005-1007 — members signin link hover === */
.ft-port-scope .gh-navigation-members a[data-portal="signin"]:hover {
    opacity: 0.8;
}

/* === source styles.css:1010-1021 — .gh-button === */
.ft-port-scope .gh-button {
    background: var(--brand-gradient-2stop);
    color: #fff;
    text-decoration: none;
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid #fff;
    font-weight: 600;
    font-size: 15.2px;         /* was 0.95rem × 1.6 */
    display: inline-block;
    transition: background 0.2s;
}

/* === source styles.css:1023-1026 — .gh-button hover === */
.ft-port-scope .gh-button:hover {
    background: var(--brand-gradient);
    opacity: 1;
}

/* === source styles.css:1029-1133 — mobile @media (each inner selector prefixed) === */
@media (max-width: 767px) {
    /* G18 — Ghost default.hbs:148-156 + 498-500: sticky top bar, 68.75px height, white bg, padding-bottom 1px */
    .ft-port-scope #gh-navigation {
        position: sticky;
        top: 0;
        z-index: 999;
        background-color: #fff;
        padding-bottom: 1px;
        height: 68.75px;
    }

    /* G19 — Ghost default.hbs:158-162: inner grid gap 14px on mobile */
    .ft-port-scope #gh-navigation .gh-navigation-inner {
        gap: 14px;
    }

    .ft-port-scope .gh-burger {
        display: inline-flex;
    }

    .ft-port-scope .gh-navigation.is-stacked .gh-navigation-inner {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto auto;
    }

    .ft-port-scope .gh-navigation.is-stacked .gh-navigation-brand .gh-search {
        display: none;             /* hidden in compact mobile header */
    }

    .ft-port-scope .gh-navigation.is-stacked .gh-navigation-brand .gh-navigation-logo {
        grid-row: 1;
        grid-column: 1;
        justify-self: start;
    }

    .ft-port-scope .gh-navigation.is-stacked .gh-navigation-brand .gh-burger {
        display: inline-flex;
        grid-row: 1;
        grid-column: 2;
    }

    .ft-port-scope .gh-navigation.is-stacked .gh-navigation-menu {
        grid-row: 2;
        grid-column: 1 / -1;
        display: none;
        border-top: none;          /* drop the desktop divider in mobile */
        padding-top: 0;
        margin-top: 0;
    }

    .ft-port-scope .gh-navigation.is-stacked .gh-navigation-actions {
        grid-row: 3;
        grid-column: 1 / -1;
        display: none;
        justify-content: center;
    }

    .ft-port-scope #gh-navigation.is-open .gh-navigation-menu,
    .ft-port-scope #gh-navigation.is-open .gh-navigation-actions {
        display: flex;
    }

    .ft-port-scope .gh-navigation-inner {
        flex-wrap: wrap;
    }

    .ft-port-scope .gh-navigation-menu,
    .ft-port-scope .gh-navigation-actions {
        display: none;
        flex-basis: 100%;
        justify-content: center;
    }

    .ft-port-scope #gh-navigation.is-open .gh-navigation-menu,
    .ft-port-scope #gh-navigation.is-open .gh-navigation-actions {
        display: flex;
    }

    .ft-port-scope #gh-navigation.is-open .gh-navigation-menu .nav {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 4px;
    }

    .ft-port-scope .gh-navigation-menu .nav > li.has-dropdown > a::after {
        display: none;
    }

    .ft-port-scope .gh-navigation-menu .nav > li.has-dropdown > a::before {
        content: '▸ ';
        font-size: 2em;
    }

    .ft-port-scope .gh-navigation-menu .nav > li.has-dropdown.is-expanded > a::before {
        content: '▾ ';
    }

    .ft-port-scope .gh-navigation-menu .nav > li.has-dropdown > .gh-dropdown-menu {
        position: static;
        display: none;
        visibility: visible;
        opacity: 1;
        background: none;
        padding: 0;
        margin: 0;
        min-width: auto;
        border-radius: 0;
    }

    .ft-port-scope .gh-navigation-menu .nav > li.has-dropdown.is-expanded > .gh-dropdown-menu {
        display: block;
    }

    .ft-port-scope .gh-navigation-menu .nav .gh-dropdown-menu li a {
        padding: 4px 0 4px 20px;
        font-size: 20px !important;       /* farangthai/index.html:244 — already 62.5%-root sized */
        opacity: 0.7;
    }
}

/* === G22 — Ghost default.hbs:488-496: logo responsive max-height ladder === */
@media (max-width: 768px) {
    .ft-port-scope .gh-navigation-logo img {
        max-height: 122px;
    }
}
@media (max-width: 480px) {
    .ft-port-scope .gh-navigation-logo img {
        max-height: 150px;
    }
}

/* === G21 — Tablet (768-1199 non-iPad) scroll-arrow styling, matches Ghost default.hbs:386-460. CSS only; JS-driven scroll math + .inactive toggling deferred to next session. === */
@media (min-width: 768px) and (max-width: 1199px) {
    .ft-port-scope {
        --nav-arrow-size: clamp(28px, 4vw, 44px);
    }

    .ft-port-scope .gh-navigation.is-stacked .gh-navigation-menu {
        grid-column: 1 / 4;
        grid-row-start: 2;
        height: auto;
        margin: 0 calc(-1 * max(4vmin, 20px));
        position: relative;
        display: flex;
        align-items: center;
    }

    /* G14/G21 — divider lines hidden on tablets per Ghost default.hbs:381-383 */
    .ft-port-scope .gh-navigation.is-stacked .gh-navigation-menu::before,
    .ft-port-scope .gh-navigation.is-stacked .gh-navigation-menu::after {
        display: none;
    }

    .ft-port-scope .gh-navigation.is-stacked .gh-navigation-menu .nav {
        display: flex;
        flex-wrap: nowrap;
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-behavior: smooth;
        gap: 20px;
        margin: 0 var(--nav-arrow-size);
        padding: 10px 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        width: 100%;
    }

    .ft-port-scope .gh-navigation.is-stacked .gh-navigation-menu .nav::-webkit-scrollbar {
        display: none;
    }

    .ft-port-scope .gh-navigation-menu .nav,
    .ft-port-scope .gh-navigation-menu .nav a,
    .ft-port-scope .gh-navigation-menu li {
        font-size: 18px !important;
    }

    .ft-port-scope .gh-nav-arrow {
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: 20;
        width: var(--nav-arrow-size);
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #1a0533, #2d1054);
        border: none;
        color: #fff;
        font-size: 14px;
        cursor: pointer;
        padding: 0;
        transition: opacity 0.3s;
        opacity: 1;
    }

    .ft-port-scope .gh-nav-arrow.inactive {
        opacity: 0.4;
        cursor: default;
    }

    .ft-port-scope .gh-nav-arrow-left {
        left: 0;
    }

    .ft-port-scope .gh-nav-arrow-right {
        right: 0;
    }
}

/* === G28 — desktop only: constrain .container to nav's inner content width (1320px) so the body has equal white margins on each side for future ad slots. Breakpoint 1200px matches existing tablet/desktop boundary in header.css line 653 and Ghost screen.css. Below 1200px, .container retains target's `width: 100%` behavior. === */
@media (min-width: 1200px) {
    .container {
        max-width: 1320px;
    }
}

/* G33 — hide quotaIndicator while it has no text content (prevents the brief "Quota: —" / "Quota: unknown" flash before refreshQuota() populates the localized role label) */
.quota-indicator:empty {
    visibility: hidden;
}

/* G34 — chart-modal-close button is mobile-only (visible only when .chart-preview has .has-chart). Hide globally by default; the @media (max-width: 767px) block below conditionally shows it. */
.chart-modal-close {
    display: none;
}

/* === G30 — MOBILE ONLY (≤767px) — fixes for: oversized logo, brand-row wrap, body lock, cropped content, chart modal === */
@media (max-width: 767px) {

    /* G30.1 — FT header brand row: shrink logo, clamp width, keep lang+logo+burger inline */
    .ft-port-scope .gh-navigation-logo img {
        max-height: 50px;
        max-width: calc(100vw - 120px);
        width: auto;
        height: auto;
        object-fit: contain;
    }
    .ft-port-scope .gh-navigation.is-stacked .gh-navigation-inner {
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto;
        gap: 8px;
        align-items: center;
    }
    .ft-port-scope .gh-navigation.is-stacked .gh-navigation-brand .gh-navigation-logo {
        min-width: 0;
        overflow: hidden;
    }
    .ft-port-scope .btn-lang {
        padding: 4px 8px;
        font-size: 12px;
        gap: 4px;
    }
    .ft-port-scope .lang-icon { font-size: 14px; }
    .ft-port-scope .gh-icon-button svg,
    .ft-port-scope .gh-burger svg {
        height: 28px;
        width: 28px;
    }

    /* G30.2 — Release target body's overflow:hidden / 100vh lock so page scrolls naturally */
    body {
        overflow: visible !important;
        height: auto !important;
        display: block !important;
    }
    .container {
        height: auto;
        min-height: auto;
        display: block;
    }
    main {
        display: block;
        overflow: visible;
    }
    .form-section,
    .chart-section {
        overflow: visible;
        flex: 0 0 auto;
        min-height: 0;
    }

    /* G30.3 — In-container header simplifications */
    .container > header {
        padding: 16px;
        margin-bottom: 16px;
    }
    .container > header h1 { font-size: 1.5rem; }
    .header-top {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }
    .header-controls {
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
    }
    .header-controls .btn {
        width: auto;
        flex: 1 1 auto;
        min-width: 110px;
    }
    .api-status {
        width: 100%;
        justify-content: center;
    }

    /* G30.4 — Buttons full-width on mobile + text overflow protection */
    .button-group { grid-template-columns: 1fr; }
    .status-message,
    .no-chart {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* G35 — On mobile, hide the entire chart-section UNTIL a chart is generated (.has-chart on .chart-preview). Prevents the empty "Your Birth Chart" card with placeholder text from sitting inline under the form. */
    .chart-section:not(:has(.chart-preview.has-chart)) {
        display: none;
    }

    /* G30.5 — Chart modal: when chart is generated (has-chart class on .chart-preview), promote chart-section to bottom-sheet modal */
    .chart-section:has(.chart-preview.has-chart) {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: 80px;
        z-index: 9999;
        margin: 0;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.7);
        overflow-y: auto;
        padding: 16px;
    }
    .chart-section:has(.chart-preview.has-chart) .chart-preview {
        flex: 1 1 auto;
        aspect-ratio: 1 / 1;
        max-width: 100%;
        margin: 0 auto;
    }
    .chart-section:has(.chart-preview.has-chart) #chartActions {
        display: grid !important;
    }

    /* G30.6 — Close button: visible only when chart-section is in modal state on mobile (global hide is outside this @media block). Clamped to 36×36 with !important so target's section flex-stretch cannot pull it horizontal. */
    .chart-section:has(.chart-preview.has-chart) .chart-modal-close {
        display: flex !important;
        position: absolute;
        top: 12px;
        right: 12px;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px;
        max-width: 36px;
        flex: none;
        box-sizing: border-box;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.15);
        color: #fff;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        font-size: 20px;
        line-height: 1;
        cursor: pointer;
        padding: 0;
        z-index: 1;
        align-self: auto;
    }
}