@charset "utf-8";
/* ============================================================================
   GS CHROME — the Infinite platform nav bar + slide-down dashboard, extracted
   from gs-viewer 0.1.0 (recreation.css sections 1-2) for standalone spoke use.
   ----------------------------------------------------------------------------
   Differences from the viewer original:
   - Lives in its OWN fixed overlay (#gs-chrome) with its OWN width scaler
     (js sets transform:scale(vw/2443)) instead of sharing the viewer #screen.
   - No #GS_Stage offset contract: spoke pages render underneath; the parked
     bar overlays the top ~65 base-px.
   - Fonts come from the site's /FONTS/edmondsans.css (same families).
   ========================================================================== */

/* ---- 0 . PHASE FALLBACK ----
   The real palette + dash skies come from the hub's gs-phase.css (imported by
   bar.php AFTER this file, so its :root wins). These keep the chrome coherent
   when the hub is unreachable. */
:root {
    --gs-accent: #e74c3c;
    --gs-accent-deep: color-mix(in srgb, var(--gs-accent) 78%, #000);
}

/* ---- 1 · OVERLAY SHELL ---- */
#gs-chrome {
    position: fixed;
    top: 0; left: 0;
    width: 2443px;                     /* authored base width, scaled by js */
    height: 765px;                     /* pane 700 + nav 65 */
    z-index: 100000;
    transform-origin: top left;
    pointer-events: none;              /* page stays clickable below the bar */
    text-align: center;
    font-family: 'edmondsans_regularregular', 'Helvetica', 'Arial';
    letter-spacing: 1px;
    font-size: 16px;
}

/* ---- 2 · GS_DASH — slide-down dashboard (only the nav shows when parked) ---- */
#gs-chrome #GS_Dash {
    position: absolute;
    width: 100%;
    height: 765px;
    top: -700px;
    pointer-events: auto;
    background-image: url(../assets/DBG.png);
    background-size: cover;
    color: #FFF;
    font-family: 'edmondsans_regularregular', Arial, Helvetica, sans-serif;
    text-shadow: 2px 3px 2px rgba(0, 0, 0, 0.9);
    transition: top 0.3s ease;
}
#gs-chrome #GS_Dash a { text-decoration: none; }
#gs-chrome #GS_Dash a:hover { font-weight: 700; }

#gs-chrome #GS_Pane {
    position: relative;
    width: 100%;
    height: 700px;
    background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.882) 100%);
    background-size: cover;
    overflow: hidden;
}
#gs-chrome #Dash_Logo {
    position: absolute;
    width: 71px; height: 125px;
    top: 37.5px; left: 40px;
    background-image: url(../assets/Dash_Gelix.png);
    background-size: contain; background-repeat: no-repeat;
}
#gs-chrome #Dash_Body { position: relative; width: 100%; height: 200px; }
/* the active section name, bannered dead-center between company + account */
#gs-chrome #Dash_Banner {
    position: absolute; left: 50%; top: 84px; transform: translateX(-50%);
    color: #fff; font-family: 'edmondsans_boldregular', Arial, sans-serif;
    font-size: 46px; letter-spacing: 3px;
    text-shadow: 2px 3px 6px rgba(0,0,0,0.85);
    pointer-events: none; white-space: nowrap;
}
#gs-chrome #Dash_Home { position: relative; float: left; margin-top: 80px; margin-left: 120px; text-align: left; }
#gs-chrome #Dash_Home h1 { font-family: 'edmondsans_regularregular', Arial, sans-serif; font-size: 50px; margin: 0; color: #FFF; }
#gs-chrome #Dash_Home a  { font-family: 'edmondsans_regularregular', Arial, sans-serif; font-size: 20px; color: #FFF; margin: 5px 10px; }
#gs-chrome #Dash_Login { position: relative; float: right; text-align: center; width: 300px; height: 160px; margin-right: 40px; margin-top: 30px; }
#gs-chrome #Dash_Login .dash-login-note {
    color: #cfcfcf; font-size: 16px; line-height: 1.5; padding: 24px 10px;
    border: 1px dashed rgba(255,255,255,0.25); background: rgba(0,0,0,0.35);
}

/* scrollable section content below the header */
#gs-chrome #Dash_Content {
    position: absolute; left: 0; right: 0; top: 190px; bottom: 0;
    overflow-y: auto; overflow-x: hidden;
    padding: 6px 40px 40px; text-align: left;
    scrollbar-width: none;
}
#gs-chrome #Dash_Content::-webkit-scrollbar { display: none; }
#gs-chrome .dash-section-title {
    color: #fff; font-family: 'edmondsans_mediumregular', Arial, sans-serif;
    font-size: 28px; letter-spacing: 2px; margin: 8px 0 18px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.85);
}
#gs-chrome .dash-empty { color: #cfcfcf; font-size: 18px; padding: 8px 0; }

/* Dashboard home: News (left) + property cards (right) — same split as the
   media library's dash (recreation.css .dash-home family, verbatim) */
#gs-chrome .dash-home { display: flex; gap: 40px; align-items: flex-start; }
#gs-chrome .dash-home-col { flex: 1 1 0; min-width: 0; }
#gs-chrome .dash-news { display: flex; flex-direction: column; gap: 14px; padding-bottom: 24px; }
#gs-chrome .dash-news-item {
    display: flex; gap: 16px; padding: 14px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
}
#gs-chrome .dash-news-body { flex: 1 1 auto; min-width: 0; }
#gs-chrome .dash-news-meta { display: flex; align-items: center; gap: 10px; }
#gs-chrome .dash-news-source {
    font-family: 'edmondsans_mediumregular', Arial, sans-serif;
    font-size: 12px; letter-spacing: 2px; text-transform: uppercase; padding: 2px 8px; color: #fff;
}
#gs-chrome .dash-news-source.inf { background: var(--gs-accent-deep); }
#gs-chrome .dash-news-source.gs  { background: rgba(255,255,255,0.18); }
#gs-chrome .dash-news-title { color: #fff; font-family: 'edmondsans_mediumregular', Arial, sans-serif; font-size: 22px; letter-spacing: 1px; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#gs-chrome .dash-news-blurb { color: #b8b8b8; font-size: 16px; line-height: 1.4; margin-top: 4px; }

/* Dashboard home: quick-link card grid (site map of the apartment + media) */
#gs-chrome .dash-cat-grid { display: flex; flex-wrap: wrap; gap: 20px; padding: 4px 0 26px; }
#gs-chrome .dash-cat-card {
    flex: 0 0 auto; width: 300px; height: 169px;
    background-size: cover; background-position: center; background-color: #1a1a1a;
    position: relative; cursor: pointer; box-shadow: 0 8px 28px rgba(0,0,0,0.5);
    transition: transform 0.15s ease;
    display: block;
}
#gs-chrome .dash-cat-card:hover { transform: scale(1.03); }
#gs-chrome .dash-cat-label {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 14px;
    background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0));
    color: #fff; font-family: 'edmondsans_mediumregular', Arial, sans-serif;
    font-size: 22px; letter-spacing: 1px; text-align: left;
}
#gs-chrome .dash-cat-eyebrow {
    position: absolute; top: 10px; left: 14px;
    color: var(--gs-accent); font-family: 'edmondsans_mediumregular', Arial, sans-serif;
    font-size: 13px; letter-spacing: 2px; text-transform: uppercase;
}

/* drill-down back affordance (unlockables category stepping) */
#gs-chrome .dash-back {
    display: inline-block; cursor: pointer; margin: 2px 0 12px;
    color: #e0e0e0; font-family: 'edmondsans_mediumregular', Arial, sans-serif;
    font-size: 20px; letter-spacing: 1px;
}
#gs-chrome .dash-back:hover { color: #fff; }

/* Unlockables: destination sections, 50/50 achievements | items (verbatim) */
#gs-chrome .dash-unlock-head { display: flex; align-items: center; justify-content: flex-end; }
#gs-chrome .dash-reset-btn { background: color-mix(in srgb, var(--gs-accent) 15%, transparent); border: 1px solid color-mix(in srgb, var(--gs-accent) 50%, transparent); color: var(--gs-accent);
    border-radius: 6px; padding: 6px 14px; cursor: pointer; letter-spacing: 1px; font-size: 13px;
    font-family: 'edmondsans_mediumregular','Helvetica','Arial',sans-serif; }
#gs-chrome .dash-reset-btn:hover { background: var(--gs-accent-deep); border-color: var(--gs-accent-deep); color: #fff; }
#gs-chrome .dash-unlock-group { color: var(--gs-accent); letter-spacing: 2px; text-transform: uppercase; font-size: 14px; margin: 18px 0 10px;
    font-family: 'edmondsans_mediumregular','Helvetica','Arial',sans-serif; }
#gs-chrome .dash-unlock-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; }
#gs-chrome .dash-unlock-card.locked { opacity: 0.6; }
#gs-chrome .dash-unlock-ic { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; font-size: 26px;
    background: rgba(255,255,255,0.06) center/cover no-repeat; display: flex; align-items: center; justify-content: center; }
#gs-chrome .dash-unlock-ic.obscured { filter: brightness(0.3) grayscale(1); color: #777; }
#gs-chrome .dash-unlock-body { flex: 1 1 auto; min-width: 0; }
#gs-chrome .dash-unlock-name { color: #fff; font-size: 18px; font-family: 'edmondsans_boldregular','Helvetica','Arial',sans-serif; }
#gs-chrome .dash-unlock-desc { color: #bdbdbd; font-size: 13px; margin-top: 2px; }
#gs-chrome .dash-unlock-count { margin-left: auto; color: #fff; font-size: 18px; font-family: 'edmondsans_boldregular','Helvetica','Arial',sans-serif; }
#gs-chrome .dash-unlock-status { margin-left: auto; font-size: 12px; letter-spacing: 1px; color: #9a9a9a; }
#gs-chrome .dash-unlock-resets { display: flex; gap: 8px; }
#gs-chrome .dash-unlock-split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 8px; }
/* each type column flows its cards 2-up, capped so they never sprawl */
#gs-chrome .dash-unlock-col { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 12px; min-width: 0; align-content: start; }
#gs-chrome .dash-unlock-col .dash-unlock-coltitle { grid-column: 1 / -1; }
#gs-chrome .dash-unlock-card { max-width: 560px; }
/* the category we're standing in — mid-size, theme coloured */
#gs-chrome .dash-unlock-heading {
    color: var(--gs-accent); font-family: 'edmondsans_boldregular', Arial, sans-serif;
    font-size: 28px; letter-spacing: 2px; margin: 2px 0 10px;
    text-shadow: 1px 2px 4px rgba(0,0,0,0.85);
}
#gs-chrome .dash-unlock-coltitle { color: #c9c9c9; letter-spacing: 2px; text-transform: uppercase; font-size: 17px; margin-bottom: 4px;
    font-family: 'edmondsans_mediumregular','Helvetica','Arial',sans-serif; }
#gs-chrome .dash-unlock-none { color: #6f6f6f; font-size: 13px; font-style: italic; }

/* ---- GS_NAV — the always-visible 65px bar (bottom of the parked dash) ---- */
#gs-chrome #GS_Nav {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 65px;
    background-color: rgba(0,0,0,0.9);
    display: flex;
    justify-content: space-between;
    font-family: 'edmondsans_mediumregular', Arial, Helvetica, sans-serif;
    font-size: 23px;
    color: #FFF;
}
#gs-chrome #Nav_Back {
    height: 25px; width: 300px; display: flex; align-items: center;
    cursor: pointer; padding: 20px 15px; text-align: left;
    opacity: 0.4; transition: opacity 0.2s;
}
#gs-chrome #Nav_Back.enabled { opacity: 1; }
#gs-chrome #Nav_Back_Arrow { width: 24px; height: 24px; margin-right: 8px; background: url(../assets/Arrow_Left.png) center/contain no-repeat; }
#gs-chrome #Nav_Links { height: 65px; display: flex; justify-content: center; align-items: center; overflow: hidden; }
#gs-chrome #Nav_Links a { display: block; padding: 12px 18px; color: #FFF; letter-spacing: 2px; font-size: 20px; cursor: pointer; white-space: nowrap; }
#gs-chrome #Nav_Links a.active { color: var(--gs-accent); }
#gs-chrome #Nav_User { height: 25px; width: 300px; display: flex; align-items: center; justify-content: flex-end; padding: 20px 15px; cursor: pointer; }
#gs-chrome #User_Arrow { width: 23px; height: 23px; margin-right: 8px; background: url(../assets/Arrow_Right.png) center/contain no-repeat; transition: transform 0.3s; }
#gs-chrome #Nav_User_Avatar { width: 36px; height: 36px; margin-left: 10px; background: url(../assets/GSIcon.png) center/contain no-repeat; }

/* ============================================================================
   ALERT CARDS + PAGE PROMPTS (ported verbatim from gs-viewer 0.1.0)
   One adaptation: #aq-anchor is a FIXED overlay below the scaled nav (spk
   pages scroll; the viewer's stage did not). Lives on <body>, outside the
   #gs-chrome scaler, so cards render at real pixels.
   ========================================================================== */
#aq-anchor {
    position: fixed;
    top: calc(100vw * 65 / 2443 + 24px);
    right: 24px;
    width: 400px;
    z-index: 99000;
    pointer-events: none;      /* children re-enable it individually */
    font-family: 'edmondsans_mediumregular', 'Helvetica', 'Arial', sans-serif;
}
#aq-prompts { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
#aq-prompts:empty { margin-bottom: 0; }
#aq-root {
    position: relative;
    width: 100%;
    height: 0;
    pointer-events: none;
}

/* ---- persistent page prompt (bonus blurb + funnel link + close) ---- */
.aq-prompt {
    position: relative;
    pointer-events: auto;
    padding: 18px 20px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(30,30,34,0.97), rgba(18,18,20,0.97));
    border: 1px solid rgba(255,255,255,0.10);
    border-left: 4px solid #3498db;
    box-shadow: 0 18px 40px rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    transform-origin: top right;
    transition: transform 460ms cubic-bezier(0.22, 1, 0.36, 1), opacity 460ms cubic-bezier(0.22, 1, 0.36, 1);
}
.aq-prompt-enter { transform: translateX(120%); opacity: 0; }
.aq-prompt-x {
    position: absolute; top: 8px; right: 10px;
    border: 0; background: none; color: #8a8a8a; cursor: pointer;
    font-size: 22px; line-height: 1; padding: 2px 6px;
}
.aq-prompt-x:hover { color: #fff; }
.aq-prompt-eyebrow { font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: #3498db; }
.aq-prompt-title {
    font-family: 'edmondsans_boldregular', 'Helvetica', 'Arial', sans-serif;
    font-size: 20px; color: #fff; margin-top: 3px; padding-right: 20px;
}
.aq-prompt-blurb { font-size: 14px; line-height: 1.4; color: #c4c4c4; margin-top: 6px; }
.aq-prompt-link {
    display: inline-block; margin-top: 12px; padding: 7px 16px; border-radius: 6px;
    background: #3498db; color: #fff; text-decoration: none; font-size: 14px; letter-spacing: 1px;
}
.aq-prompt-link:hover { background: #2c80c0; }

/* ---- card shell ---- */
.aq-card {
    position: absolute;
    top: 0;
    right: 0;
    width: 400px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(30,30,34,0.96), rgba(18,18,20,0.96));
    border: 1px solid rgba(255,255,255,0.10);
    border-left: 4px solid rgba(255,255,255,0.5);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    transform-origin: top right;
    transition: transform 460ms cubic-bezier(0.22, 1, 0.36, 1),
                opacity   460ms cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: auto;
}
.aq-card.aq-achievement { border-left-color: #e0a83e; }
.aq-card.aq-item        { border-left-color: var(--gs-accent); }
.aq-card.aq-peek   { filter: brightness(0.78) saturate(0.85); }
.aq-card.aq-hidden { pointer-events: none; }

/* ---- icon ---- */
.aq-icon {
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    line-height: 1;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
}
.aq-achievement .aq-icon { background: rgba(224,168,62,0.14); border-color: rgba(224,168,62,0.45); }
.aq-item        .aq-icon { background: rgba(231,76,60,0.14);  border-color: rgba(231,76,60,0.45);  }
.aq-icon .aq-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

/* ---- body text ---- */
.aq-body { flex: 1 1 auto; min-width: 0; }
.aq-eyebrow {
    font-family: 'edmondsans_mediumregular', 'Helvetica', 'Arial', sans-serif;
    font-size: 11px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--gs-accent);
}
.aq-achievement .aq-eyebrow { color: #e0a83e; }
.aq-title {
    font-family: 'edmondsans_boldregular', 'Helvetica', 'Arial', sans-serif;
    font-size: 21px;
    letter-spacing: 0.5px;
    color: #fff;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* the excerpt wraps up to TWO lines before ellipsing (was one nowrap line) */
.aq-desc {
    font-size: 14px;
    line-height: 1.35;
    color: #bdbdbd;
    margin-top: 3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- count badge (x2, x3, ...) ---- */
.aq-count {
    flex: 0 0 auto;
    align-self: flex-start;
    margin-left: 6px;
    padding: 3px 10px;
    border-radius: 20px;
    font-family: 'edmondsans_boldregular', 'Helvetica', 'Arial', sans-serif;
    font-size: 14px;
    letter-spacing: 0.5px;
    color: #fff;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.22);
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 160ms ease, transform 160ms ease;
}
.aq-count.aq-visible { opacity: 1; transform: scale(1); }
.aq-achievement .aq-count.aq-visible { background: rgba(224,168,62,0.22); border-color: rgba(224,168,62,0.5); }
.aq-item        .aq-count.aq-visible { background: rgba(231,76,60,0.22);  border-color: rgba(231,76,60,0.5);  }
.aq-count.aq-pop { animation: aq-pop 320ms cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes aq-pop {
    0%   { transform: scale(1);   }
    40%  { transform: scale(1.4); }
    100% { transform: scale(1);   }
}

/* ---- timer bar (dominant only) ---- */
.aq-bar {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: var(--gs-accent);
    opacity: 0;
}
.aq-achievement .aq-bar { background: #e0a83e; }
.aq-card.aq-dominant .aq-bar { opacity: 0.9; }

/* ---- "+N more" chip ---- */
.aq-more {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 5;
    padding: 5px 14px;
    white-space: nowrap;
    border-radius: 20px;
    font-family: 'edmondsans_mediumregular', 'Helvetica', 'Arial', sans-serif;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #cfcfcf;
    background: rgba(20,20,22,0.9);
    border: 1px solid rgba(255,255,255,0.12);
    opacity: 0;
    transition: transform 460ms cubic-bezier(0.22, 1, 0.36, 1), opacity 300ms ease;
    pointer-events: none;
}

/* ===== Settings section (dash): universal Clear Progression + site toggles ===== */
#gs-chrome .dash-setting-row {
    display: flex; align-items: center; gap: 24px; max-width: 1100px;
    padding: 18px 24px; margin-bottom: 14px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px;
}
#gs-chrome .dash-setting-body { flex: 1 1 auto; min-width: 0; }
#gs-chrome .dash-setting-label { color: #fff; font-family: 'edmondsans_mediumregular','Helvetica','Arial',sans-serif; font-size: 22px; letter-spacing: 1px; }
#gs-chrome .dash-setting-desc { color: #b8b8b8; font-size: 15px; margin-top: 4px; line-height: 1.4; }
/* transparent framed cube; the checkmark lands centered when checked */
#gs-chrome .dash-setting-toggle {
    appearance: none; -webkit-appearance: none;
    flex: 0 0 auto; width: 26px; height: 26px;
    background: rgba(255,255,255,0.06);
    border: 2px solid rgba(255,255,255,0.45);
    border-radius: 6px;
    cursor: pointer; margin: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
#gs-chrome .dash-setting-toggle:hover { border-color: rgba(255,255,255,0.8); }
#gs-chrome .dash-setting-toggle:checked { border-color: var(--gs-accent); }
#gs-chrome .dash-setting-toggle:checked::after {
    content: "\2713";
    color: var(--gs-accent);
    font-size: 18px; line-height: 1;
    font-family: Arial, sans-serif;
}

/* news column extras: date stamp + the read-more link into the hub feed */
#gs-chrome .dash-news-date { color: #9a9a9a; font-size: 13px; letter-spacing: 1px; }
#gs-chrome .dash-news-more {
    display: inline-block; margin-top: 2px; color: #e0e0e0; text-decoration: none;
    font-family: 'edmondsans_mediumregular', Arial, sans-serif; font-size: 18px; letter-spacing: 1px;
}
#gs-chrome .dash-news-more:hover { color: var(--gs-accent); }

/* News section: category filter pills */
#gs-chrome .dash-news-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
#gs-chrome .dash-news-filter {
    padding: 6px 16px; border-radius: 20px; cursor: pointer; font-size: 14px;
    letter-spacing: 1.5px; text-transform: uppercase; color: #cfcfcf;
    border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.05);
    font-family: 'edmondsans_mediumregular', Arial, sans-serif;
}
#gs-chrome .dash-news-filter:hover { border-color: rgba(255,255,255,0.6); color: #fff; }
#gs-chrome .dash-news-filter.active { border-color: var(--gs-accent); color: var(--gs-accent); }