@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); }
/* A "#dash/<section>" shortcut opens the dashboard rather than navigating, so it
   reads as a different class of link: set apart by a rule, and dimmed until
   hovered so it never competes with the real page links beside it. It also never
   takes .active, since there is no page for it to be the current one of. */
#gs-chrome #Nav_Links a.dash-shortcut {
    margin-left: 10px;
    padding-left: 26px;
    border-left: 2px solid rgba(255,255,255,0.18);
    color: #b8b8b8;
}
#gs-chrome #Nav_Links a.dash-shortcut:hover { 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;
}

/* ---- settings: the non-toggle kinds ---------------------------------------
   A setting row's control is chosen by its declared kind (see bar.php). Both of
   these sit in the same slot the toggle does, so the row layout is untouched. */
#gs-chrome .dash-setting-select {
    appearance: none; -webkit-appearance: none;
    flex: 0 0 auto; min-width: 210px;
    padding: 9px 14px; margin: 0;
    color: #fff; background: rgba(0,0,0,0.5);
    border: 2px solid rgba(255,255,255,0.45); border-radius: 6px;
    font-family: 'edmondsans_mediumregular', Arial, sans-serif; font-size: 17px;
    cursor: pointer;
}
#gs-chrome .dash-setting-select:hover { border-color: rgba(255,255,255,0.8); }
#gs-chrome .dash-setting-select:focus { outline: none; border-color: var(--gs-accent); }

#gs-chrome .dash-setting-colour { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
/* The native well draws its own inset swatch; the padding is what stops it
   looking like a button with a coloured sticker on it. */
#gs-chrome .dash-setting-well {
    appearance: none; -webkit-appearance: none;
    width: 54px; height: 34px; padding: 2px; margin: 0;
    background: rgba(255,255,255,0.06);
    border: 2px solid rgba(255,255,255,0.45); border-radius: 6px;
    cursor: pointer;
}
#gs-chrome .dash-setting-well:hover { border-color: rgba(255,255,255,0.8); }
#gs-chrome .dash-setting-well::-webkit-color-swatch-wrapper { padding: 0; }
#gs-chrome .dash-setting-well::-webkit-color-swatch { border: none; border-radius: 3px; }
#gs-chrome .dash-setting-reset {
    padding: 8px 14px;
    color: #ddd; background: rgba(255,255,255,0.06);
    border: 2px solid rgba(255,255,255,0.28); border-radius: 6px;
    font-family: 'edmondsans_mediumregular', Arial, sans-serif; font-size: 15px;
    letter-spacing: 1px; cursor: pointer;
}
#gs-chrome .dash-setting-reset:hover { color: #fff; border-color: var(--gs-accent); }

/* ---- settings layout ------------------------------------------------------
   Two DECLARED columns rather than a wrap, so the count cannot drift with the
   pane width -- the same fix pattern the editor's palette needed. align-items:
   start keeps a short row from being stretched to a tall neighbour's height. */
#gs-chrome .dash-settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 14px;
    /* 2 x 1100 + the gap. A single row was authored at 1100 and that was the right
       size, so the GRID takes twice it rather than dividing it -- capping the grid
       at 1100 just split one column's worth of space into two halves. #Dash_Content
       is 2443 base px less its 40px padding, so this fits with room to spare. */
    max-width: 2214px;
}
/* The grid owns the spacing now; the rows keep their own only when unGridded. */
#gs-chrome .dash-settings-grid .dash-setting-row { margin-bottom: 0; max-width: none; }
/* A row that needs the full width -- the palette does, a toggle does not. */
#gs-chrome .dash-setting-wide { grid-column: 1 / -1; }
/* Stacked rows put their control BELOW the label instead of beside it. */
#gs-chrome .dash-setting-stack { display: block; }
#gs-chrome .dash-setting-stack .dash-setting-body { margin-bottom: 16px; }

/* ---- palette: preset picker + a row of colour slots ----------------------- */
#gs-chrome .dash-palette { display: block; }
#gs-chrome .dash-palette-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
#gs-chrome .dash-palette-heading {
    color: #9a9a9a; font-size: 14px; letter-spacing: 2px; text-transform: uppercase;
}
#gs-chrome .dash-palette-head .dash-setting-select { min-width: 280px; }

#gs-chrome .dash-palette-slots { display: flex; flex-wrap: wrap; gap: 22px; }
/* position: relative so each slot is the anchor for its own swatch popover. */
#gs-chrome .dash-palette-slot { position: relative; }
#gs-chrome .dash-palette-name {
    color: #b8b8b8; font-size: 14px; letter-spacing: 1px; margin-bottom: 6px;
}
#gs-chrome .dash-swatch {
    display: block; width: 92px; height: 44px; padding: 0;
    border: 2px solid rgba(255,255,255,0.45); border-radius: 6px; cursor: pointer;
}
#gs-chrome .dash-swatch:hover { border-color: #fff; }

/* The grid of colours on offer. Absolute so it overlays the rows beneath rather
   than shoving them down as it opens. */
#gs-chrome .dash-swatch-pop {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: repeat(8, 30px);
    gap: 6px;
    padding: 12px;
    background: rgba(12,12,16,0.98);
    border: 2px solid rgba(255,255,255,0.28);
    border-radius: 8px;
    box-shadow: 0 18px 50px 8px rgba(0,0,0,0.6);
}
#gs-chrome .dash-swatch-option {
    width: 30px; height: 30px; padding: 0;
    border: 2px solid rgba(255,255,255,0.25); border-radius: 4px; cursor: pointer;
}
#gs-chrome .dash-swatch-option:hover { border-color: #fff; transform: scale(1.12); }

/* 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); }