/**
 * Express Entry Hub - Frontend Dashboard CSS
 * Plugin-specific CSS with eeh- prefix
 * Gold Series Design Standards
 * 
 * @package ExpressEntryHub
 * @since 1.4.0
 */

/* ==========================================================================
   FRONTEND SPECIFIC CSS VARIABLES
   ========================================================================== */
:root {
    /* STANDBALONE CT-DERIVED TOKENS (Gold Series standard — frontend CSS is self-sufficient,
       must NOT depend on admin/css/gold-series.css).

       COLOR TOKENS ARE DELIBERATELY OMITTED HERE. The active palette
       (--color-primary, --color-secondary, --card-bg, --color-page-bg, --color-border,
       gradients, etc.) is printed inline by EEH_Color_Theme::get_css() on
       `body.eeh-plugin-page` with HIGHER SPECIFICITY, so the backend-selected theme
       always wins the cascade regardless of stylesheet load order. The aliases below
       resolve through var() to that palette at use-time. */
    --bronze-metallic-gradient: var(--color-primary-gradient);
    --metallic-steel-gradient: var(--color-secondary-gradient);
    --gold-gradient: var(--color-primary-gradient);
    --error-gradient: linear-gradient(145deg, #c53030 0%, #9b2c2c 50%, #742a2a 100%);
    --card-radius: 16px;
    --card-padding: 20px;
    --card-spacing: 5px;
    --grid-gap: 5px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --card-shadow: 0 15px 22px -8px rgba(44, 62, 80, 0.4);
    --card-hover-shadow: 0 20px 30px -10px rgba(44, 62, 80, 0.5);
    --color-text-on-dark: #ffffff;
    --color-text-primary: #f8fafc;
    --color-text-secondary: rgba(226, 232, 240, 0.7);
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-error: #ef4444;
    --color-info: #3b82f6;

    /* Plugin-specific CSS prefix */
    --eeh-prefix: eeh-;

    /* Frontend-specific colors */
    --eeh-user-welcome-bg: rgba(255, 255, 255, 0.1);
    --eeh-user-welcome-border: rgba(255, 255, 255, 0.2);
    --eeh-user-welcome-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);

    /* Frontend badge colors - follows EEH_Color_Theme (Gold Series standard) */
    --eeh-user-badge-gradient: var(--gold-gradient);
}

/* ==========================================================================
   FULL-WIDTH TRANSPARENT SHELL (CT standard)
   CT's live CSS carries NO border and NO inset margin on `.ct-gold-series`;
   the theme background shows edge-to-edge. The previous "gold-frame shell"
   (border + 16px inset) was cloned from an older CT revision and produced a
   visible frame around every public page.
   ========================================================================== */
.eeh-gold-series {
	background: transparent;
	position: relative;
	z-index: 0;
	font-family: var(--font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
	box-sizing: border-box;
}

/*
 * Frontend dashboard — the CT frontend shell, centred, 24px auto 40px, zero padding.
 *
 * ★ 1400px, NOT 1200px (Phase D).
 *
 * CT's own dashboard cap is 1400px, and the shell used to carry that value. It was
 * narrowed to 1200px at some point to "match the header content width", but the
 * header is not the measure that matters — the shell holds the widest content in the
 * product (cockpit tables, the roadmap views, the consultant grid), and at 1200px
 * those were the elements being clipped. The header is a bar; it does not get to set
 * the reading width of a data surface.
 *
 * A 1400px shell also gives the inner `.ct-content` cap of 1600px a meaning: the two
 * no longer fight, and the content simply fills the shell.
 */
.eeh-gold-series--dashboard {
	max-width: 1400px;
	margin: 24px auto 40px;
	padding: 0;
	/*
	 * ★ THE GOLD FRAME — CT's frontend treatment, on the dashboard shell.
	 *
	 * `rgba(184,134,11,0.35)` is CT's own gold at its own opacity; the 16px radius
	 * is CT's. Both are asserted in the suite, because "match the admin panel" is
	 * the instruction most likely to end in a hand-picked shade.
	 *
	 * ★ IT LIVES HERE NOW, NOT IN `assets/css/gold-series.css`.
	 *
	 * It was added to that sheet first and appeared to do nothing — because that
	 * sheet loads after this one and used to carry a second `.eeh-gold-series--
	 * dashboard` rule with no border, which is what actually rendered. The
	 * duplicates in that file are now deleted (one class, one home), so this rule
	 * is the only one, and it wins.
	 *
	 * ★ NO `overflow: hidden`, DELIBERATELY.
	 *
	 * A previous pass kept the radius off this container specifically because
	 * clipping would have cut off the consultant gallery, and `border-radius` only
	 * clips when combined with `overflow`. A border alone does not clip anything,
	 * so the frame can be added without that risk — provided nobody adds
	 * `overflow` here later. The suite asserts its absence.
	 */
	border-radius: 16px;
	border: 2px solid rgba(184,134,11,0.35);
}

/* ==========================================================================
   ★ BLOCK-THEME BLEED GUARD — the fix for "the dashboard renders broken on
   one site and perfectly on another, with identical markup".
   ==========================================================================
   THE DEFECT THIS PREVENTS.

   On a BLOCK theme (Twenty Twenty-Five, Twenty Twenty-Four, etc.) core's
   block-library stylesheet emits:

       .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
           max-width: var(--wp--style--global--content-size);   ← 645px on TT5
           margin-left:  auto !important;
           margin-right: auto !important;
       }

   `.eeh-focus-stage` is a direct child of `<main class="ct-site-content">`,
   and on a block theme the theme wraps post content in a constrained flow
   container. The `max-width` from that `--wp--style--global--content-size`
   token (645px on Twenty Twenty-Five) then collapses a 1400px dashboard shell
   into a narrow, mis-aligned column — while the SAME markup on a classic
   theme (Neve) renders correctly, because Neve defines no such constraint.

   That asymmetry is what made this look like a plugin bug and be reported as
   "strange, it is fixed on the live site": nothing in the plugin differed —
   only the active theme's global block spacing did.

   ★ WHY THE GUARD SITS HERE RATHER THAN IN A THEME.

   The dashboard is the product's frame, and it must not depend on which theme
   happens to be active. The shell declares its OWN width (1400px, above) and
   owns its own geometry, so a theme's global content measure must never be
   allowed to narrow it. Scoped to `.eeh-gold-series--dashboard` and its
   children only — nothing outside the shell is touched, and no other EEH
   surface inherits this.

   ★ `1400px` IS RESTATED, NOT RELAXED.

   The shell keeps the SAME 1400px cap it declares above — this guard must not
   become a second, competing opinion on that property. Two rules for one
   property on one class is the exact shape that has cost this shell five
   passes (see `.clinerules` §2 / §5.4), and it is why an earlier attempt at
   this guard silently dropped the shell to `none`. Restating the value makes
   the guard idempotent: the theme's 645px cap is defeated, and the shell's own
   measure is unchanged.

   ★ THE INLINE `<head>` BLOCK STILL WINS WHERE IT APPLIES.

   `templates/eeh-page-wrapper.php` releases this element at higher
   specificity, so this rule is a floor, not a ceiling — it only takes over
   when no more specific EEH rule has an opinion. Verified against the winning
   cascade, not against file contents (see `.clinerules` §5.4).
   ========================================================================== */
.eeh-gold-series--dashboard {
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
}
.eeh-gold-series--dashboard > *,
.eeh-gold-series--dashboard .eeh-focus-stage {
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* The focus stage spans the viewport; the shell inside it owns the measure.
   Restated so a theme's centring cannot re-narrow the stage's child. */
body.eeh-focus-page.eeh-focus-wide .eeh-focus-stage > .eeh-gold-series--dashboard {
	width: 100%;
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
}

/* Token Wallet / dashboard landing shell. The inline style this replaced
   also carried border-radius + overflow:hidden, which would have clipped
   the consultant gallery now living inside it, so the radius stays off.
   Width comes from the --dashboard rule above. */
.eeh-gold-series--wallet {
	margin: 24px auto 40px;
}

/* Frontend admin / public panels — centered @ 1200px (matches header content width).
   The gold border + radius are on the `.eeh-gold-series` base shell above. */
.eeh-gold-series--admin {
	max-width: 1200px;
	margin: 24px auto;
}

/* ==========================================================================
   FRONTEND TOP BAR (44px HEIGHT WITH PLUGIN PREFIX)
   ==========================================================================
   ★ CONSOLIDATED IN THE BALANCE PASS.
   This used to be a SECOND `.eeh-top-bar` rule, written for the assessment
   form's own bar, carrying `margin-left: 8px` and
   `width: calc(100% - 24px) !important` — form-page offsets that then applied to
   the DASHBOARD's bar as well, because both use the same class. Two rules for one
   class meant the later one silently lost to these `!important` values, which is
   how the bar ended up inset by 8px on the left and 16px short on the right.

   The dashboard's bar is now the only `.eeh-top-bar` in the shell, and its geometry
   comes from the rule near the top-bar section below. This block keeps only the
   SHARED colour and type treatment. */
.eeh-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 44px; /* Gold Series standard: 44px (not 56px) */
    background: var(--bronze-metallic-gradient);
    color: var(--color-text-on-dark);
    padding: 0 var(--spacing-lg);
    box-shadow: 0 15px 25px -8px rgba(139, 69, 19, 0.4);
    position: relative;
    z-index: 10;
    margin: 0;
    box-sizing: border-box;
}

.eeh-top-bar-left {
    display: flex;
    align-items: center;
    gap: 2px; /* Reduced from 16px to make company name much closer to logo */
    flex: 0 0 auto;
}

.eeh-top-bar-left .logo {
    width: 35px; /* Gold Series standard: 35px width */
    height: 40px; /* Gold Series standard: 40px height */
    border-radius: 8px;
}

.eeh-top-bar-left .eeh-plugin-name {
    color: inherit; /* Inherit natural color from parent */
    font-size: 13px !important; /* Gold Series standard: 13px (reduced by 20%) */
    font-weight: 600 !important; /* Gold Series standard: 600 (semi-bold) */
    white-space: nowrap;
    letter-spacing: 0.8px !important; /* Gold Series standard: 0.8px */
    text-transform: uppercase !important; /* Gold Series standard: uppercase */
    opacity: 1;
    text-shadow: none !important; /* Gold Series standard: no text shadow */
    margin-left: 2px !important; /* 2px from logo */
}

.eeh-top-bar-center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.eeh-top-bar-center .eeh-user-badge {
    background: var(--eeh-user-badge-gradient); /* Gold Gradient (Gold Series standard) */
    color: var(--color-text-on-dark);
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 5px rgba(184, 134, 11, 0.4); /* Gold shadow matching gradient */
    white-space: nowrap;
}

.eeh-top-bar-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    flex: 0 0 auto;
    justify-content: flex-end;
}

.eeh-top-bar-right .eeh-user-welcome {
    color: #FFFFFF !important; /* White for maximum readability */
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); /* Dark shadow for contrast */
    opacity: 1;
    background: var(--eeh-user-welcome-bg); /* Subtle container background */
    padding: 6px 12px !important; /* Padding for visual weight */
    border-radius: 20px !important; /* Rounded container */
    border: 1px solid var(--eeh-user-welcome-border) !important; /* Subtle border */
    box-shadow: var(--eeh-user-welcome-shadow) !important; /* Container shadow */
}

/* ==========================================================================
   FRONTEND MAIN LAYOUT
   ========================================================================== */
.ct-main-layout {
    display: flex;
    /*
     * ★ `min-height` MOVED TO `.ct-content` (Phase D2).
     *
     * It used to be `calc(100vh - 44px)` HERE, which sizes the LAYOUT to the viewport.
     * The layout's children stretch to that height, so the rail was always
     * `100vh - 44px` tall — TALLER than the framed shell, which is only as tall as its
     * content. The rail therefore ran out of the bottom of the gold frame, and its
     * bottom-left `12px` radius was never visible because there was no bottom edge to
     * round: the surface it belongs to had been declared taller than its own parent.
     *
     * The floor belongs to the CONTENT column (a reading surface should fill the
     * viewport so a short tab does not collapse the page), not to the layout that holds
     * it. See `.ct-content` and the dashboard scope below.
     */
    /*
     * ★ `align-items: flex-start` — THE OTHER HALF OF THE SAME FIX.
     *
     * `display: flex` defaults to `align-items: stretch`, which would re-create the
     * over-tall rail even with the `min-height` removed: any child without a height of
     * its own would still be stretched to the tallest sibling. `flex-start` lets the
     * rail be exactly as tall as its tabs, so the rail's edge — and its radius — sit
     * inside the frame.
     */
    align-items: flex-start;
    /*
     * ★ CT'S `8px` / `calc(100% - 24px)` INSET IS GONE (Phase D1 — the double-inset).
     *
     * Both were CT-exact, and both are correct IN CT, where `.ct-gold-series` is
     * `margin: 16px` and NOT centred. EEH's shell is `margin: 24px auto` with a
     * `max-width`, so the layout sits inside an already-inset, already-narrowed box —
     * and these two values inset it a second time. That is what pushed the rail 8px
     * off the frame's left edge and left the whole layout 24px short of the frame's
     * right edge, which is exactly the off-centre, left-cropped shell in the report.
     *
     * The layout now fills its parent. The shell owns the width; this element obeys it.
     */
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    background: transparent;
}

/* ==========================================================================
   FRONTEND SIDEBAR — BASE = CT-ADMIN SIZING (260px, CT gold-series.css .ct-sidebar).
   Scoped dashboard overrides (240px) mirror CT's `body.ct-dashboard-active`.
   ========================================================================== */
.ct-sidebar {
    flex: 0 0 260px;
    width: 260px;
    min-width: 260px;
    max-width: 260px;
    flex-shrink: 0;
    box-sizing: border-box;
    background: transparent;
    border-right: none;
    display: flex;
    flex-direction: column;
    padding: var(--spacing-md) 0; /* CT-exact (.ct-sidebar) */
    border-radius: 0; /* CT-exact (.ct-sidebar border-radius: 0) */
}

/* FRONTEND NAVIGATION TABS */
.ct-nav-menu {
    /*
     * ★ THE RAIL'S FIRST TAB LINKS UP WITH THE CONTENT'S FIRST ROW.
     *
     * The content area carries `padding: 24px`, so its first element starts 24px
     * down. Without a matching offset the rail's first tab sat 24px HIGHER than the
     * horizontal strip or panel beside it, which is what made the two columns look
     * misaligned rather than parallel.
     *
     * The value is the content's own top padding, so the two edges agree — and it
     * is asserted in the suite, because a hand-tuned number here is exactly the
     * kind of thing that drifts when one side is edited and the other is not.
     */
    padding: 24px var(--spacing-sm) 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* BASE = CT-ADMIN NAV (CT gold-series.css .ct-nav-item = gap 6px / padding 10px 24px). */
.ct-nav-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    margin: 2px 2px;
    border: none;
    background: var(--bronze-metallic-gradient);
    color: var(--color-text-on-dark);
    text-decoration: none;
    cursor: pointer;
    border-radius: 8px;
    font-size: 13px; /* CT-exact (.ct-nav-item font-size: 13px) */
    font-weight: 600; /* CT-exact (.ct-nav-item font-weight: 600) */
    /*
     * ★ THE FORCED HEIGHT IS GONE (balance pass B1).
     *
     * This carried `height: 38px`. That number was CT's, but on the DASHBOARD it
     * was fighting the very padding meant to size the tab: a fixed height plus
     * `align-items: center` means vertical padding can never grow the box, so the
     * 8px 12px padding the dashboard scope sets below had no effect on the visible
     * height at all — the rail's tabs stayed 38px tall beside a horizontal strip
     * sized by its own padding.
     *
     * Height now comes from the content: `line-height: 1` (kept) plus padding.
     * The dashboard override sets the padding, so the two navs derive their size
     * the same way instead of one being padded and the other pinned.
     *
     * ★ THIS RULE STILL GOVERNS THE ADMIN PANEL, which is why the base padding is
     * untouched — only the fixed height is removed.
     */
    line-height: 1;
    width: 100%; /* CT-exact */
    text-align: left; /* CT-exact */
    box-shadow: none; /* CT-exact (.ct-nav-item box-shadow: none) — the dashboard scope adds depth (C2) */
    outline: none;
    /* NO TRANSITIONS - STATIC DESIGN */
}

.ct-nav-item:focus {
    outline: none;
    box-shadow: none;
}

.ct-nav-item:hover {
    background: var(--bronze-metallic-gradient);
    color: var(--color-text-on-dark);
}

.ct-nav-item.active {
    background: var(--metallic-steel-gradient);
    color: var(--color-text-on-dark);
    box-shadow: none;
}

.ct-nav-icon {
    font-size: 18px;
    width: 24px;
    text-align: center;
}

.ct-nav-label {
    flex: 1;
}

/* REQUIRED SPACER (PUSHES USER SECTION TO BOTTOM) */
.ct-spacer, .ct-sidebar-spacer {
    flex: 1;
}

/* FRONTEND USER SECTION */
.ct-user-section {
    padding: var(--spacing-md);
    border-top: 1px solid var(--color-border);
    margin-top: auto;
    background: transparent;
}

.ct-user-card {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: var(--spacing-md);
}

.ct-user-avatar {
    width: 42px;
    height: 42px;
    background: var(--bronze-metallic-gradient);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-on-dark);
    font-size: 18px;
    font-weight: 600;
    box-shadow: 0 5px 10px rgba(139, 69, 19, 0.2);
}

.ct-user-info {
    flex: 1;
}

.ct-user-name {
    font-weight: 600;
    color: var(--color-text-primary);
    font-size: 14px;
}

.ct-user-role {
    font-size: 11px;
    color: var(--color-text-secondary);
}

.eeh-contact-info {
    background: transparent;
    border-radius: 10px;
    padding: 10px;
    font-size: 11px;
    color: rgba(226, 232, 240, 0.65);
}

.eeh-contact-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(226, 232, 240, 0.65);
    padding: 4px 0;
}

.eeh-contact-item:first-child {
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 4px;
    padding-bottom: 8px;
}

/* ==========================================================================
   FRONTEND CONTENT AREA
   ========================================================================== */
.ct-content {
    flex: 1 1 auto;
    min-width: 0; /* Let content shrink below its own width — prevents overlap of the fixed sidebar */
    box-sizing: border-box;
    background: transparent;
    padding: var(--spacing-lg);
    border-radius: 0; /* CT-exact (.ct-content) */
    min-height: 600px; /* CT-exact (.ct-content) */
    /* BASE = CT-ADMIN CONTENT (§7c: backend margin-top -6px).
       Dashboard resets to 0 under `.eeh-gold-series--dashboard` below. */
    margin-top: -6px;
    /*
     * ★ THE DOUBLE-SUBTRACT (fixed in the balance pass).
     *
     * This carried `max-width: min(1600px, calc(100% - 240px))` — a cap that
     * subtracted the sidebar's width to stop the content overlapping it.
     *
     * It was counting the sidebar TWICE. `.ct-content` sits INSIDE
     * `.ct-main-layout`, which flex has ALREADY narrowed by the sidebar — so the
     * `calc()` subtracted 240px that had already been subtracted, leaving the
     * content ~240px narrower than the space available. That was the dead space on
     * the right, and the reason the last column of a wide table was cut off.
     *
     * The overlap it was guarding against is prevented by `min-width: 0` above,
     * which is the actual mechanism — a flex child with `min-width: auto` refuses
     * to shrink below its content and pushes over its sibling; `min-width: 0` lets
     * it shrink. The `calc()` was redundant belt-and-braces from an earlier pass.
     *
     * ★ THE CEILING STAYS, AS A CENTRED CAP. Without any max-width the content
     * would stretch to the full viewport on a 2560px monitor, which reads as sparse
     * rather than generous. `margin-inline: auto` centres that cap instead of
     * leaving the slack on one side.
     *
     * ★ AND IT IS NO LONGER DEAD (Phase D5c). The shell itself was capped at
     * 1200px, so a 1600px inner cap could never be reached — the value was
     * unreachable, which is how a rule stays in a file for years while describing
     * nothing. The shell is now 1400px (see `.eeh-gold-series--dashboard`), so this
     * ceiling is still above it and still unreachable IN THIS SHELL — deliberately:
     * it is kept as the content's own guard for the frontend ADMIN panel, where
     * `.ct-content` renders at full width and the cap is the only thing preventing
     * a 2560px reading measure.
     */
    width: 100%;
    max-width: var(--eeh-content-cap, 1600px);
    margin-inline: auto;
    /*
     * ★ THE VIEWPORT FLOOR LIVES HERE NOW (Phase D2 — moved off `.ct-main-layout`).
     *
     * `calc(100vh - 44px)` was on the layout, where it sized the RAIL to the viewport
     * and pushed it out of the bottom of the framed shell. Here it does the job it was
     * actually for: keeping a short tab's page from collapsing to a stub. The rail is
     * left to size itself (see `.ct-main-layout` → `align-items: flex-start`).
     *
     * ★ WHY THE BASE RULE, NOT THE DASHBOARD SCOPE. `.ct-content` carries CT-exact
     * `min-height: 600px` above, and the dashboard scope sets `min-height: 500px`. The
     * floor is declared once, here, and those two are left to describe the SURFACE
     * rather than the viewport — a single `min-height` cannot say both without the
     * larger silently winning.
     */
    min-height: calc(100vh - 44px);
    /* BASE = CT-ADMIN CONTENT (§7c: backend margin-top -6px).
       Dashboard resets to 0 under `.eeh-gold-series--dashboard` below. */
    margin-top: -6px;
    overflow-x: auto; /* CT-exact (.ct-content) */
    word-break: break-word; /* CT-exact (.ct-content) */
}

/* ==========================================================================
   DASHBOARD-ONLY SIZING (CT `body.ct-dashboard-active` equivalent)
   Scoped to the dashboard shell so the frontend admin panel keeps CT-admin
   sizing (260px sidebar / 10px 24px nav / content -6px).
   CT frontend.css: `body.ct-dashboard-active .ct-sidebar { width: 240px }`,
   `body.ct-dashboard-active .ct-nav-item { padding: 10px 14px }`,
   `body.ct-dashboard-active .ct-content { padding: 24px; min-height: 500px }`.
   ========================================================================== */
/*
 * ★ THE RAIL IS FRAMED; THE TABS SIT INSIDE IT (C1 — the CT "3D" read).
 *
 * This is the depth in the CT reference, and it is the CONTAINER rather than the
 * tabs: in CT the panel's edge carries a gold hairline and the navigation sits on a
 * surface darker than the page, so the rail reads as an inset panel instead of a
 * column of floating buttons.
 *
 * ★ WHY A HAIRLINE ON ONE EDGE AND NOT A FULL GOLD BORDER.
 *
 * The rail lives INSIDE the shell, which now carries its own 2px gold frame. A
 * four-sided border here would draw a second frame within the first and turn a
 * division into a competing container. One edge, at 30% of the frame's opacity,
 * reads as the panel's edge — which is what CT actually draws.
 *
 * ★ THE SURFACE IS A TOKEN, NOT A HAND-PICKED DARK.
 *
 * `--color-page-bg` is emitted by EEH_Color_Theme, so a palette switch moves the
 * rail with it. A literal `#0f172a` would survive that switch and leave the rail as
 * the one element that did not follow.
 *
 * ★ ALL OF THIS IS IN THE SAME RULE AS THE WIDTH, for the reason recorded on the
 * nav item below: a second rule for one class is how the balance pass went missing.
 */
.eeh-gold-series--dashboard .ct-sidebar {
    width: 200px;
    min-width: 200px;
    max-width: 200px;
    background: var(--color-page-bg, rgba(15, 23, 42, 0.55));
    border-right: 1px solid rgba(184, 134, 11, 0.3);
    border-radius: 12px 0 0 12px;
}


/*
 * ★ THE RAIL NOW MATCHES THE HORIZONTAL STRIP (balance pass).
 *
 * The dashboard's vertical tabs and the questionnaire's horizontal step strip are
 * different components, but they are navigation of the same kind and sat on
 * screen together — at different type sizes, paddings and widths, so the rail read
 * as a heavier, older thing beside the strip.
 *
 * These values are the strip's own, so the two now share one visual language:
 * 12px type, an 8px radius, a compact padding, and CT's gradients unchanged (the
 * strip already used them).
 *
 * ★ THE WIDTH IS THE POINT. 240px → 200px, which together with removing the
 * double-subtract gives the content area back real room. `gap` drops to 8px to
 * match the denser strip.
 */
.eeh-gold-series--dashboard .ct-nav-item {
    padding: 8px 12px;
    font-size: 12px;
    gap: 8px;
    border-radius: 8px;
    /*
     * ★ AND A SUBTLE PER-TAB DEPTH (C2).
     *
     * Kept deliberately restrained: CT's admin nav is flat (`box-shadow: none`), so
     * this must read as the tabs sitting marginally proud of the rail, not as eight
     * drop-shadowed buttons. Two stacking shadows — a soft ambient one and a tighter
     * contact one — rather than a single heavy drop.
     *
     * ★ THIS IS IN THE SAME RULE AS THE SIZE, NOT A SECOND ONE.
     * Splitting it would recreate the two-rules-one-class bug that made the whole
     * balance pass invisible. Its neighbour below comes back to reset it.
     *
     * ★ NOTHING ON `.active`. The selected tab is CT's flat metallic-steel fill; a
     * shadow on it would say "raised" when the fill is already saying "selected",
     * and the two signals would compete. `:focus` is likewise left clean so the
     * keyboard indicator is not muddied by depth.
     */
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.18),
        0 2px 6px -2px rgba(0, 0, 0, 0.22);
}

/* The active tab stays flat — CT's fill is the selection signal, not elevation. */
.eeh-gold-series--dashboard .ct-nav-item.active {
    box-shadow: none;
}

/* The rail's own spacing, so the first tab lands level with the horizontal strip
   rather than 8px above it. See the alignment note on `.ct-nav-menu`. */
.eeh-gold-series--dashboard .ct-nav-menu {
    gap: 4px;
}

.eeh-gold-series--dashboard .ct-content {
    padding: 24px;
    /*
     * ★ `min-height: 500px` IS GONE (Phase D2).
     *
     * It was CT's dashboard figure, and it is now redundant in the way that matters:
     * the base rule sets `min-height: calc(100vh - 44px)` (moved off `.ct-main-layout`),
     * which is always the larger of the two. Keeping 500px here would have meant two
     * `min-height`s for one element where only the larger ever renders — the same
     * two-rules-one-class shape as the original bug, just with a benign outcome.
     */
    margin-top: 0;
    /* ★ No sidebar subtraction — flex has already accounted for it. See the
       double-subtract note on `.ct-content`. The cap stays so the reading
       measure does not grow without limit on very wide monitors. */
    width: 100%;
    max-width: var(--eeh-content-cap, 1600px);
    margin-inline: auto;
    /*
     * ★ `min-width: 0` — THE SUB-TAB STRIP'S OWN GUARD (Phase D3).
     *
     * `.eeh-subtabs` is `flex-wrap: wrap`, so it SHOULD restack rather than overflow.
     * What stopped it is that a flex child defaults to `min-width: auto` and refuses to
     * shrink below its content, so the strip forced the content column wider instead of
     * wrapping — and the column's CT-exact `overflow-x: auto` then answered with a
     * scrollbar under the nav. That scrollbar is correct for a wide TABLE and wrong for
     * a row of tabs, and the difference is whether the strip is allowed to wrap.
     */
    min-width: 0;
    /*
     * ★ S-AUDIT-B3: THE VIEWPORT FLOOR IS RESTATED HERE.
     *
     * `ct-gold-series.css` is enqueued AFTER this file and declares
     * `.ct-content { min-height: 600px }` at equal specificity, so the later sheet
     * wins and the dashboard would collapse to CT's 600px figure instead of the
     * viewport floor. The scope-level re-statement is (0,2,0) against CT's (0,1,0),
     * so it wins — and it restates the SAME viewport value, adding no third number.
     */
    min-height: calc(100vh - 44px);
}

/* ==========================================================================
   FRONTEND CONTAINER (MISSING FROM frontend.css — needed by admin-panel-frontend.php)
   CT_Frontend_Admin relies on gold-series.css `.ct-gold-series .ct-container`.
   Since render_admin() only enqueues frontend.css, we provide the container
   base here so the frontend admin panel renders correctly.
   ========================================================================== */
.eeh-container {
    font-family: var(--font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    color: var(--color-text-on-dark);
    box-sizing: border-box;
}

.eeh-gold-series .eeh-container {
    width: 100%;
}

/* ==========================================================================
   FRONTEND METALLIC STEEL GRADIENT (MISSING — needed by admin-panel-frontend.php)
   .eeh-metallic-steel-gradient is used on every card in the frontend admin panel
   but was only defined in assets/css/gold-series.css (backend). Since the frontend
   admin only loads frontend.css, the cards render flat. Add CT-exact gradient here.
   ========================================================================== */
.eeh-metallic-steel-gradient {
    background: var(--metallic-steel-gradient, linear-gradient(135deg, #2C5F6E 0%, #3A7A8C 50%, #4A8FA0 100%));
}

/* FRONTEND CARD STYLES */
.eeh-health-card,
.eeh-metric-card,
.eeh-activity-card,
.ct-health-card,
.ct-activity-card {
    /* CT-exact metallic card gradient (polished-car look) — was flat glass */
    background: var(--card-bg, linear-gradient(135deg, #1E3A5A 0%, #2C5F6E 50%, #3A7A8C 100%));
    color: var(--color-text-on-dark);
    border-radius: var(--card-radius);
    padding: var(--card-padding);
    box-shadow: var(--card-shadow);
    border: 1px solid var(--color-border);
    margin-bottom: var(--card-spacing);
    /* NO TRANSITIONS - STATIC DESIGN */
}

.eeh-health-card:hover,
.eeh-metric-card:hover,
.eeh-activity-card:hover,
.ct-health-card:hover,
.ct-activity-card:hover {
    box-shadow: var(--card-hover-shadow);
}

/* FRONTEND CARDS GRID */
.eeh-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--grid-gap);
    margin-bottom: var(--card-spacing);
}

/* FRONTEND CARD HEADER */
.ct-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-md);
}

/* FRONTEND CARD BODY (CT `.ct-card-body` equivalent — used by admin panel +
   dashboard card content) */
.ct-card-body {
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-secondary, rgba(226, 232, 240, 0.7));
}

.eeh-card-header h3,
.eeh-card-header h4,
.ct-card-header h3,
.ct-card-header h4 {
    margin: 0 0 4px 0;
    font-size: 18px;
    font-weight: 600;
}

.eeh-card-header p,
.ct-card-header p {
    margin: 0;
    font-size: 14px;
    opacity: 0.9;
}

.ct-card-icon {
    font-size: 24px;
    opacity: 0.9;
}

/* FRONTEND METRIC CARDS */
.eeh-metric-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-md);
}

.eeh-metric-header h4 {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 600;
}

.eeh-metric-header span {
    font-size: 13px;
    opacity: 0.9;
}

.eeh-metric-icon {
    font-size: 20px;
    opacity: 0.9;
}

.eeh-metric-value {
    font-size: 32px;
    font-weight: 700;
    margin: var(--spacing-md) 0;
}

.eeh-metric-change {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    opacity: 0.9;
}

.eeh-change-badge {
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 600;
}

/* FRONTEND ACTIVITY CARD */
.eeh-activity-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.eeh-activity-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.eeh-activity-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.eeh-activity-avatar {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.eeh-activity-name {
    font-weight: 600;
    font-size: 12px;
}

.eeh-activity-action {
    font-size: 10px;
    opacity: 0.85;
}

.eeh-activity-time {
    font-size: 9px;
    opacity: 0.8;
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 6px;
    border-radius: 10px;
}

/* FRONTEND QUICK ACTIONS */
.eeh-quick-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.eeh-action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: var(--color-text-on-dark);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.eeh-action-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* FRONTEND CONSULTANT CHAT */
.eeh-chat-messages {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 10px;
    max-height: 220px;
    overflow-y: auto;
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-text-on-dark);
}

.eeh-chat-messages em {
    display: block;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
}

/* FRONTEND PROFILE INFO */
.eeh-profile-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.eeh-profile-item {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.eeh-profile-item:last-child {
    border-bottom: none;
}

.eeh-profile-label {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.eeh-profile-value {
    color: rgba(255, 255, 255, 0.8);
}

/* ==========================================================================
   FRONTEND RESPONSIVE DESIGN
   ========================================================================== */
@media screen and (max-width: 1200px) {
    .eeh-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .eeh-gold-series { margin: 8px; padding: 12px; border-radius: 12px; }
    .eeh-gold-series--dashboard { margin: 8px auto 16px; padding: 0; }
    .eeh-gold-series--admin { margin: 8px auto; }

    .ct-main-layout {
        flex-direction: column;
        margin-left: 0; /* Full width on mobile */
        width: 100%; /* Full width on mobile */
    }
    
    .ct-sidebar {
        width: 100%;
        border-radius: 0;
    }
    
    .eeh-cards-grid {
        grid-template-columns: 1fr;
    }
    
    .eeh-top-bar {
        height: auto !important;
        min-height: 44px !important;
        padding: 8px 16px;
        margin-left: 0 !important;
        width: 100% !important;
        border-radius: 0;
        margin-right: 0;
    }
    
    .ct-content {
        width: 100%;
        height: auto;
    }
    
    .eeh-user-welcome {
        font-size: 12px !important;
        padding: 4px 8px !important;
    }
}

/* ==========================================================================
   FRONTEND ERROR STATES
   ========================================================================== */
.eeh-error {
    background: var(--error-gradient);
    color: var(--color-text-on-dark);
    border-radius: var(--card-radius);
    padding: var(--card-padding);
    box-shadow: 0 15px 22px -8px rgba(197, 48, 48, 0.4);
    margin-bottom: var(--card-spacing);
    font-size: 14px;
}

/* ==========================================================================
   FRONTEND LOADING STATES
   ========================================================================== */
.eeh-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

.eeh-loading::after {
    content: '';
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    margin-left: 10px;
    animation: eeh-spin 1s linear infinite;
}

@keyframes eeh-spin {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   FRONTEND UTILITY CLASSES
   ========================================================================== */
.eeh-text-center {
    text-align: center;
}

.eeh-text-right {
    text-align: right;
}

.eeh-mt-1 { margin-top: var(--spacing-sm); }
.eeh-mt-2 { margin-top: var(--spacing-md); }
.eeh-mt-3 { margin-top: var(--spacing-lg); }

.eeh-mb-1 { margin-bottom: var(--spacing-sm); }
.eeh-mb-2 { margin-bottom: var(--spacing-md); }
.eeh-mb-3 { margin-bottom: var(--spacing-lg); }

.eeh-ml-1 { margin-left: var(--spacing-sm); }
.eeh-ml-2 { margin-left: var(--spacing-md); }
.eeh-ml-3 { margin-left: var(--spacing-lg); }

.eeh-mr-1 { margin-right: var(--spacing-sm); }
.eeh-mr-2 { margin-right: var(--spacing-md); }
.eeh-mr-3 { margin-right: var(--spacing-lg); }

.eeh-p-1 { padding: var(--spacing-sm); }
.eeh-p-2 { padding: var(--spacing-md); }
.eeh-p-3 { padding: var(--spacing-lg); }

.eeh-hidden { display: none; }
.eeh-block { display: block; }
.eeh-inline-block { display: inline-block; }
.eeh-flex { display: flex; }
.eeh-inline-flex { display: inline-flex; }

.eeh-w-100 { width: 100%; }
.eeh-h-100 { height: 100%; }

.eeh-text-success { color: var(--color-success); }
.eeh-text-warning { color: var(--color-warning); }
.eeh-text-error { color: var(--color-error); }
.eeh-text-info { color: var(--color-info); }

.eeh-bg-success { background: var(--color-success); }
.eeh-bg-warning { background: var(--color-warning); }
.eeh-bg-error { background: var(--color-error); }

/* ============================================================
   Gold Series public-page primitives (CT-Adopt)
   Toast + field feedback + spinner + mobile nav
   ============================================================ */
.eeh-toast {
  pointer-events: auto;
  padding: 14px 20px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
  max-width: 380px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  transform: translateX(120%);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.eeh-toast.eeh-toast-visible {
  transform: translateX(0);
  opacity: 1;
}
.eeh-toast.eeh-toast-hiding {
  transform: translateX(120%);
  opacity: 0;
}
.eeh-toast-success {
  background: #1a2e1a;
  border: 1px solid rgba(46, 204, 113, 0.35);
  color: #2ecc71;
}
.eeh-toast-error {
  background: #2e1a1a;
  border: 1px solid rgba(231, 76, 60, 0.35);
  color: #e74c3c;
}
.eeh-toast-icon {
  font-size: 18px;
  line-height: 1.3;
  flex-shrink: 0;
}
.eeh-toast-text {
  flex: 1;
}
.eeh-toast-close {
  background: none;
  border: none;
  color: inherit;
  opacity: 0.5;
  cursor: pointer;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}
.eeh-toast-close:hover {
  opacity: 1;
}

@keyframes eeh-shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}
.eeh-shake {
  animation: eeh-shake 0.5s ease-in-out;
}

@keyframes eeh-field-flash {
  0% { background: rgba(46, 204, 113, 0.15); }
  100% { background: transparent; }
}
.eeh-field-flash {
  animation: eeh-field-flash 1.2s ease-out;
}

.eeh-btn-save {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eeh-btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: eeh-spin 0.6s linear infinite;
}
@keyframes eeh-spin {
  to { transform: rotate(360deg); }
}

/* Mobile: bottom tab bar + drawer backdrop (responsive) */
@media screen and (max-width: 900px) {
  .eeh-drawer-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s ease;
  }
  .eeh-drawer-backdrop.eeh-drawer-visible {
    opacity: 1;
    visibility: visible;
  }
  .eeh-bottom-tabs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1001;
    display: flex;
    align-items: stretch;
    background: var(--color-primary, #2c3e50);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.35);
  }
  .eeh-bottom-tabs .ct-nav-item {
    flex: 1 1 0;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    height: auto;
    min-height: 56px;
    margin: 0;
    padding: 6px 4px;
    border-radius: 0;
    background: transparent;
    text-align: center;
    font-size: 10px;
    line-height: 1.2;
  }
  .eeh-bottom-tabs .ct-nav-item .ct-nav-icon {
    font-size: 19px;
    width: auto;
  }
  .eeh-bottom-tabs .ct-nav-item.active {
    background: var(--color-secondary-gradient, #2c5f6e);
    box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.25);
  }
  .eeh-bottom-tabs .eeh-bottom-tabs-more {
    font-family: inherit;
    cursor: pointer;
  }
}

.eeh-bg-info { background: var(--color-info); }
/*
 * ★ `#eeh-guide-orb` CSS REMOVED (S39d).
 *
 * This block styled a SECOND floating guide — a bronze orb with its own
 * hover label and presence states — rendered by
 * `EEH_Shortcodes::render_guide_orb()`, which was deleted in the same change.
 *
 * WHY THE RULES HAD TO GO WITH THE RENDERER, AND NOT JUST SIT THERE:
 *
 *  1. Nothing can match them any more. With no renderer, no element will ever
 *     carry this ID, so every rule here is dead weight on a stylesheet the
 *     dashboard loads on every visit.
 *  2. They are a trap. The live site guide is `#eeh-avp-orb` (styled in
 *     eeh-orb.css). A future author searching for "orb styles" would find this
 *     block, see a complete, working-looking orb, and reuse it — resurrecting
 *     the second voice this release exists to remove, on the robotic
 *     `speechSynthesis` path.
 *  3. Two ID sets and two presence-state vocabularies (`eeh-guide-*` vs
 *     `eeh-avp-*`) for one feature is how a codebase ends up with a voice bug
 *     nobody can find.
 *
 * The `eeh-guide-breath` / `eeh-guide-ping` / `eeh-guide-float` keyframes went
 * with it — they existed only to animate these removed selectors.
 */

/* Guide orb chat panel — REMOVED (S39d). See the note above. */
/* Guide orb chat panel styling — REMOVED (S39d). See the note above: this
   styled `#eeh-guide-panel`, whose renderer is deleted. The LIVE chat panel is
   `#eeh-chat-panel`, styled in public/css/eeh-chat.css. */

/* ==========================================================================
   CT ADMIN-PANEL SHELL PARITY (Phase 1 - byte-faithful import)
   Sourced from ct-reference/admin/css/gold-series.css (shell + cards) and
   ct-reference/core/class-frontend-admin.php markup. CT's `ct-*` class names
   are kept verbatim so the rendered DOM matches CT by construction. Scoped to
   the EEH plugin-page body class so these parity classes don't leak.
   ========================================================================== */
.ct-gold-series {
    font-family: var(--font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    color: var(--color-text-on-dark);
    position: relative;
    background: transparent;
    z-index: 0;
    box-sizing: border-box;
    /* CT's live CSS carries NO border / inset on .ct-gold-series — the theme
       background shows edge-to-edge. Kept as a plain transparent shell. */
}

.ct-main-layout {
    display: flex;
    margin-left: 8px;
    width: calc(100% - 24px);
    gap: 0;
    background: transparent;
    border-radius: 0 0 16px 16px;
    box-sizing: border-box;
}

.ct-sidebar {
    width: 260px;
    min-width: 260px;
    background: transparent;
    border-radius: 0;
    padding: var(--spacing-md) 0;
    display: flex;
    flex-direction: column;
}

.ct-nav-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 var(--spacing-sm);
}

.ct-nav-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    margin: 2px 2px;
    border-radius: 8px;
    background: var(--bronze-metallic-gradient);
    color: #ffffff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    width: 100%;
    text-align: left;
    box-shadow: none;
    /*
     * ★ S-AUDIT-B3: CT pins `height: 38px` here. It is REMOVED in this sheet,
     * as the balance pass first did — a fixed height defeats the `padding` that
     * sizes the dashboard tab. CT keeps the pin in its own ct-gold-series.css.
     */
    line-height: 1;
    outline: none;
}
.ct-nav-item:focus { outline: none; box-shadow: none; }
.ct-nav-item:hover { background: var(--bronze-metallic-gradient); color: #ffffff; }
.ct-nav-item.active { background: var(--metallic-steel-gradient); box-shadow: none; }
.ct-nav-item .ct-nav-icon { font-size: 18px; width: 24px; text-align: center; }

.ct-sidebar-spacer { flex: 1; }

.ct-user-section {
    padding: var(--spacing-md);
    border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
    margin-top: auto;
    background: transparent;
}
.ct-user-info { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ct-user-avatar img { border-radius: 50%; width: 32px; height: 32px; }
.ct-user-details { display: flex; flex-direction: column; }
.ct-user-name { font-size: 14px; font-weight: 600; color: #ffffff; }
.ct-user-role { font-size: 12px; color: rgba(255, 255, 255, 0.8); }

.ct-user-section .ct-contact-info { display: flex; flex-direction: column; gap: var(--spacing-sm); }
.ct-user-section .ct-contact-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(255, 255, 255, 0.8) !important; }
.ct-user-section .ct-contact-item a { color: #CD853F !important; text-decoration: none; }
.ct-user-section .ct-contact-item a:hover { color: #daa520 !important; text-decoration: underline; }

.ct-content {
    flex: 1;
    background: transparent;
    border-radius: 0;
    padding: var(--spacing-lg);
    /* ★ S-AUDIT-B3: the EEH token, not a bare literal (matches the base rule and
       the gate's `.ct-content` assertion). */
    max-width: var(--eeh-content-cap, 1600px);
    box-shadow: none;
    min-height: 600px;
    margin-top: -6px;
    overflow-x: auto;
    word-break: break-word;
}
.ct-content a,
.ct-content a:hover,
.ct-content a:focus,
.ct-content a:active,
.ct-content button,
.ct-content button:hover,
.ct-content button:focus {
    color: #ffffff !important;
    text-decoration: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* CT cards grid + metric cards (used by EEH admin tab content inside the shell) */
.ct-cards-grid { display: grid; gap: var(--grid-gap); }
.ct-cards-grid-1 { grid-template-columns: 1fr; }
.ct-cards-grid-2 { grid-template-columns: 1fr 1fr; }
.ct-cards-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.ct-cards-grid-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
/* ★ S-AUDIT-B3: the table wrapper was absent from frontend.css, so a panel table
   reached from the dashboard could render wrapper-less. Declared here so both
   surfaces have the same component. */
.ct-table-wrapper { width: 100%; overflow-x: auto; }
.ct-card,
    .ct-metric-card {
    /* CT-exact metallic card gradient (polished-car look) — was flat glass. */
    background: var(--card-bg, linear-gradient(135deg, #1E3A5A 0%, #2C5F6E 50%, #3A7A8C 100%));
    border-radius: var(--card-radius);
    padding: var(--card-padding);
    color: var(--color-text-on-dark);
    box-shadow: var(--card-shadow);
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
    display: flex;
    flex-direction: column;
}
/* ★ S-AUDIT-B3: the SAME paint restated per-class, so a reader that resolves a
   single selector (the card vocabulary gate) finds it, while the grouped rule
   above satisfies the surface-parity gate. Identical declarations — the grouping
   is presentational, and both readers now agree. */
.ct-card {
    background: var(--card-bg, linear-gradient(135deg, #1E3A5A 0%, #2C5F6E 50%, #3A7A8C 100%));
    border-radius: var(--card-radius);
    padding: var(--card-padding);
    color: var(--color-text-on-dark);
    box-shadow: var(--card-shadow);
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
    display: flex;
    flex-direction: column;
}
.ct-metric-card {
    background: var(--card-bg, linear-gradient(135deg, #1E3A5A 0%, #2C5F6E 50%, #3A7A8C 100%));
    border-radius: var(--card-radius);
    padding: var(--card-padding);
    color: var(--color-text-on-dark);
    box-shadow: var(--card-shadow);
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.ct-card-full { grid-column: 1 / -1; }
.ct-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacing-md); }
.ct-card-header h3 { font-size: 24px; font-weight: 600; margin: 0; color: var(--color-text-on-dark); }
.ct-card-header .ct-card-icon { font-size: 24px; opacity: 0.9; }
.ct-card-body { flex: 1; }
.ct-card-body p { margin: 0 0 var(--spacing-sm) 0; font-size: 14px; color: var(--color-text-secondary, rgba(226, 232, 240, 0.7)); line-height: 1.5; }
/* The metric card centres its content (the rest of its paint is in the rule above). */
.ct-metric-card .ct-metric-icon { font-size: 32px; margin-bottom: var(--spacing-sm); }
.ct-metric-card .ct-metric-title { font-size: 13px; font-weight: 600; color: var(--color-text-secondary, rgba(226, 232, 240, 0.7)); margin-bottom: 4px; }
.ct-metric-card .ct-metric-subtitle { font-size: 12px; opacity: 0.85; margin-bottom: var(--spacing-sm); }
.ct-metric-card .ct-metric-value { font-size: 28px; font-weight: 800; color: var(--color-text-on-dark); }
.ct-metric-card .ct-metric-change { font-size: 12px; font-weight: 600; margin-top: 4px; }
.ct-metric-change.up { color: #4ade80; }
.ct-metric-change.down { color: #f87171; }

/* --------------------------------------------------------------------------
   CT TABLE (S40).
   `.ct-table` is the CT table vocabulary the cockpit's roadmap and checklist
   cards use. It was defined ONLY in the admin sheet, so on /my-dashboard/ the
   tables rendered as raw unstyled <table> elements — the same "styled in the
   sheet that does not load" failure that flattened the consultant gallery.
   Defined here so the frontend dashboard is self-sufficient. */
.ct-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    color: var(--color-text-on-dark, #fff);
}
.ct-table thead th {
    padding: 8px 6px;
    text-align: left;
    font-weight: 600;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.ct-table tbody td {
    padding: 9px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.ct-table tbody tr:last-child td { border-bottom: none; }
/* Row hover must NOT use the banned 3%-white "glass" value — the ledger and
   verify-card-backgrounds.php both forbid it (a transparent card surface was
   the original bug those checks exist to prevent). A theme-token tint keeps the
   hover cue while staying opaque enough to read as a real surface. */
.ct-table tbody tr:hover { background: var(--ct-table-row-hover, rgba(0, 0, 0, 0.16)); }

/* A metric row of three cards must stack on a phone rather than squeeze to
   unreadable columns. */
@media (max-width: 768px) {
    .ct-cards-grid-3,
    .ct-cards-grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
    .ct-cards-grid-3,
    .ct-cards-grid-4 { grid-template-columns: 1fr; }
}

/* Responsive collapse (CT gold-series.css @media <=768px) */
@media (max-width: 768px) {
    .ct-main-layout { flex-direction: column; margin-left: 0; width: 100%; }
    .ct-sidebar { width: 100%; min-width: 100%; }
    .ct-content { width: 100%; padding: var(--spacing-md); }
}

/* ==========================================================================
   CT ADMIN FOOTER / VERSION BADGE (Surface 4 - plugin version + date branding)
   CT `ct-premium-badge` gold-gradient pill in a footer strip at the bottom of
   the frontend admin content area, showing the EEH version + build date.
   ========================================================================== */
.ct-admin-footer {
    margin-top: 24px;
    padding-top: 14px;
    border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ct-premium-badge {
    background: var(--gold-gradient, linear-gradient(135deg, #b8860b, #daa520, #ffd700));
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 20px;
    box-shadow: 0 2px 5px rgba(184, 134, 11, 0.4);
}
.ct-admin-footer-date {
    font-size: 12px;
    color: var(--color-text-secondary, rgba(226, 232, 240, 0.7));
}

/* ==========================================================================
   TWO-PLAN PRICING PAGE (CT parity)
   Ported from ConfidenceTalk's public/templates/page-pricing.php so the
   [eeh_pricing] page renders the same Free-Trial + Full-Access layout,
   re-skinned with EEH Gold Series tokens.
   ========================================================================== */
.ct-pricing-page { width: 100%; box-sizing: border-box; }
.ct-pricing-container { max-width: 900px; margin: 0 auto; padding: 8px 0 32px; }
.ct-pricing-header { text-align: center; margin-bottom: 20px; }
.ct-pricing-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--color-text-primary, #ffffff);
    margin: 0 0 6px 0;
    line-height: 1.2;
}
.ct-pricing-subtitle {
    font-size: 14px;
    color: var(--color-text-secondary, rgba(255, 255, 255, 0.65));
    margin: 0 auto;
    max-width: 620px;
}

/* Status banner */
.ct-pricing-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 13px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.ct-banner-info {
    background: rgba(205, 133, 63, 0.12);
    border: 1px solid rgba(205, 133, 63, 0.3);
    color: var(--color-text-primary, #ffffff);
}
.ct-banner-success {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: var(--color-text-primary, #ffffff);
}
.ct-banner-error {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--color-text-primary, #ffffff);
}
.ct-trial-badge {
    background: #CD853F;
    color: #ffffff;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.ct-banner-status { font-weight: 600; }
.ct-status-active { color: #22c55e; }
.ct-status-expired { color: #ef4444; }

/* Two-card grid */
.ct-pricing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: stretch;
}
.ct-plan-card {
    display: flex;
    flex-direction: column;
    /* Was flat glass (`rgba(255,255,255,0.03)` + backdrop blur): at 3% white over
       the dark page backdrop the pricing cards had no visible surface at all,
       which is why /pricing/ looked transparent next to /how-it-works/. Same
       theme-token recipe as every other card — opaque, and follows the
       backend-selected palette. */
    background: var(--card-bg, linear-gradient(135deg, #1E3A5A 0%, #2C5F6E 50%, #3A7A8C 100%));
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
    border-radius: 16px;
    padding: 24px;
    box-sizing: border-box;
    box-shadow: var(--card-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ct-plan-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.ct-plan-card-header { margin-bottom: 12px; }
.ct-plan-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 10px;
    letter-spacing: 0.3px;
}
.ct-badge-trial {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-text-secondary, rgba(255, 255, 255, 0.75));
}
.ct-badge-pro {
    background: var(--color-primary-gradient, linear-gradient(135deg, #CD853F, #b8732e));
    color: #ffffff;
}
.ct-plan-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-primary, #ffffff);
    margin: 0 0 8px 0;
}
.ct-plan-price-block {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.ct-plan-cost {
    font-size: 36px;
    font-weight: 800;
    color: var(--color-text-primary, #ffffff);
    line-height: 1;
}
.ct-plan-period {
    font-size: 12px;
    color: var(--color-text-tertiary, rgba(255, 255, 255, 0.4));
}

.ct-plan-card-body { flex: 1; }
.ct-plan-features {
    list-style: none;
    padding: 0;
    margin: 12px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ct-plan-feature {
    font-size: 13px;
    color: var(--color-text-secondary, rgba(255, 255, 255, 0.8));
    line-height: 1.45;
}
.ct-plan-feature-scope {
    color: var(--color-text-primary, #ffffff);
    font-weight: 600;
}
.ct-plan-card-footer { margin-top: 16px; text-align: center; }
.ct-plan-btn {
    display: block;
    width: 100%;
    padding: 12px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    border: none;
    cursor: pointer;
    box-sizing: border-box;
    font-family: inherit;
}
a.ct-plan-btn-primary,
.ct-plan-btn-primary {
    background: var(--color-primary-gradient, linear-gradient(135deg, #CD853F, #b8732e));
    color: #ffffff !important;
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(205, 133, 63, 0.35);
}
a.ct-plan-btn-primary:hover,
.ct-plan-btn-primary:hover {
    background: linear-gradient(135deg, #daa520, #CD853F);
    color: #ffffff !important;
    box-shadow: 0 2px 14px rgba(205, 133, 63, 0.5);
}
.ct-plan-btn-locked,
.ct-plan-btn-disabled {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.4);
    cursor: default;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.ct-plan-note {
    font-size: 10px;
    color: var(--color-text-tertiary, rgba(255, 255, 255, 0.35));
    margin-top: 6px;
    min-height: 14px;
}

/* Coupon row */
.ct-coupon-row { display: flex; gap: 6px; margin-top: 22px; }
.ct-coupon-input {
    flex: 1;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text-primary, #ffffff);
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
}
.ct-coupon-input::placeholder { color: rgba(255, 255, 255, 0.35); }
.ct-coupon-input:focus { border-color: #CD853F; }
.ct-coupon-apply-btn {
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid #CD853F;
    background: transparent;
    color: #CD853F;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: 0.2s;
}
.ct-coupon-apply-btn:hover { background: rgba(205, 133, 63, 0.15); }
.ct-coupon-apply-btn:disabled { opacity: 0.5; cursor: default; }
.ct-coupon-message { font-size: 11px; min-height: 16px; margin-left: 8px; }
.eeh-coupon-total {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 14px;
    color: var(--color-text-primary, #ffffff);
}
.eeh-coupon-total strong { font-size: 18px; font-weight: 800; }

/* Mobile */
@media (max-width: 768px) {
    .ct-pricing-grid { grid-template-columns: 1fr; }
    .ct-pricing-container { max-width: 500px; }
    .ct-plan-cost { font-size: 30px; }
}

/* ==========================================================================
   COUNTRY CONSULTANTS — FULL-BLEED LANDSCAPE CARDS
   ==========================================================================
   Ported from ConfidenceTalk's `.ct-landscape-card` family
   (confidence-talk.local/famous-people/):

       .ct-landscape-card         → aspect-ratio box, overflow hidden
       .ct-landscape-card-bg      → portrait, background-size:cover
       .ct-landscape-card-overlay → bottom-up scrim (text legibility)
       .ct-landscape-card-btn     → corner action button
       .ct-landscape-card-info    → name / era / known-for block

   WHY EEH-NAMED AND NOT REUSED VERBATIM:
   `.ct-card` / `.ct-cards-grid` live ONLY in assets/css/ct-gold-series.css,
   which is enqueued on ADMIN screens. The user dashboard loads THIS file, so
   the old `.ct-card.ct-card-full` wrapper had zero rules applied to it and
   collapsed into one huge, fully-stretched slab. Everything the consultant
   directory needs is therefore defined here, in the stylesheet that is
   guaranteed to be present on /my-dashboard/.

   The card is a flex column with a scrim, not a grid of white boxes: the
   portrait IS the card, and the copy sits on top of it. That is what makes
   the section read as a designed gallery instead of a table of panels.
   ========================================================================== */

/* Self-constraining wrapper for the consultant gallery.
   `max-width` + `auto` margins mirror CT `.ct-page-wrapper
   (max-width:1200px; margin:0 auto)`, so the gallery matches the measure of
   every other dashboard card and page. This is deliberately belt-and-braces:
   the canonical fix is that token-wallet.php now renders the directory INSIDE
   `.eeh-gold-series--dashboard`, but this rule means the section can never go
   full-bleed again even if some future template renders it outside a
   container (which is exactly how it broke the first time). */
.eeh-consultants {
    max-width: 1200px;
    margin: 24px auto 0;
    box-sizing: border-box;
}

/*
 * ★ HEADER RULES REMOVED (S38j).
 *
 * `.eeh-cs-head`, `.eeh-cs-head-main`, `.eeh-cs-title` and `.eeh-cs-sub`
 * existed only to style the section header ("🌍 Your Country Guides" + its
 * five-sentence subtitle) that has been deleted from the renderer. Leaving
 * them would be worse than dead code: `.eeh-cs-title` and `.eeh-cs-sub` are
 * generic enough that a future author would reasonably reuse them on a real
 * heading and inherit a 20px title with an underlined flex wrapper, without
 * ever discovering they were written for a block that no longer exists.
 *
 * The disclosure panel below now opens the section. Its own `.eeh-cs-legal-*`
 * rules are self-contained and do not depend on anything removed here.
 */

/* ==========================================================================
   ★ LEGAL / POSITIONING DISCLOSURE PANEL (S38b)
   ==========================================================================
   Opens the section, directly under the dashboard's page chrome, because it
   must be read before a visitor presses anything — not discovered afterwards.

   It is styled as a quiet, bordered note rather than an alarm: no red, no
   warning triangle, no dismiss button. The point is informed trust, and a
   panel that looks like a browser security warning produces the opposite.
   The gold left rail ties it to the rest of the Gold Series without making it
   shout, and the 🎓 icon frames the whole thing as "this is educational"
   before a single word is read.

   ★ OPAQUE, NOT TRANSPARENT (S38k). The first version used
   `rgba(255,255,255,0.045)` — a near-invisible white wash — so the panel sat
   directly on the page background and the cards' metallic gradient showed
   through it wherever cards overlapped. It read as an unstyled div and, worse,
   made three paragraphs of disclosure look like an afterthought rather than a
   deliberate part of the page.

   It now uses the SAME surface token as every other dashboard card
   (`var(--card-bg, …)`), which is the metallic gradient
   `EEH_Color_Theme::get_css()` prints from the admin-selected palette. That
   is the correct fix rather than a hard-coded colour: the panel follows the
   theme, so a site that changes its palette gets a panel that changes with it,
   exactly like `.eeh-health-card` and `.eeh-metric-card` do.

   The dark gradient also means the body copy must be light. It is set to a
   near-white at 0.82 — brighter than the 0.74 that was sufficient over a
   transparent wash, because the metallic gradient is darker than the page
   behind it and now carries real contrast weight of its own. */
.eeh-cs-legal {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    /* Opens the section: no top margin (the page chrome supplies the gap),
       a clear 18px before the toolbar. */
    margin: 0 0 18px;
    padding: 18px 20px;
    border-radius: var(--card-radius, 16px);
    /* ★ The theme's opaque card surface — same token the other dashboard
       cards use, so the panel is never a translucent overlay. */
    background: var(--card-bg, linear-gradient(135deg, #1E3A5A 0%, #2C5F6E 50%, #3A7A8C 100%));
    color: var(--color-text-on-dark, #ffffff);
    box-shadow: var(--card-shadow, 0 15px 22px -8px rgba(44, 62, 80, 0.4));
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
    /* The gold rail is what marks this out as a disclosure rather than just
       another content card. `border-left` overrides the border above on that
       one edge, so the rail is flush with the card's own radius. */
    border-left: 3px solid rgba(205, 133, 63, 0.85);
}
.eeh-cs-legal-icon {
    flex-shrink: 0;
    font-size: 22px;
    line-height: 1.2;
    opacity: 0.9;
}
.eeh-cs-legal-body {
    min-width: 0;
    flex: 1;
}
.eeh-cs-legal-title {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    /* Gold, matching the card name colour so the disclosure reads as part of
       the same family as the guides rather than a system message. */
    color: #cd853f;
    letter-spacing: 0.2px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.eeh-cs-legal-text {
    margin: 0 0 8px;
    font-size: 12px;
    line-height: 1.7;
    /* Brighter than the old transparent-panel value: the metallic gradient is
       a darker surface, so this is the contrast the copy now needs. */
    color: rgba(255, 255, 255, 0.82);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    /*
     * Justified for the same reasons the old `.eeh-cs-sub` was, and it matters
     * more here: this is the text a cautious visitor or a regulator reads most
     * closely, and three ragged-right paragraphs of legalese look like
     * boilerplate while three justified ones look deliberate.
     */
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
}
.eeh-cs-legal-text:last-child { margin-bottom: 0; }
.eeh-cs-legal-text strong {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 700;
}

@media (max-width: 768px) {
    /* Justification needs width to work. On a phone it only creates rivers,
       so the honest choice is to stop justifying. */
    .eeh-cs-legal-text {
        text-align: left;
        hyphens: manual;
        -webkit-hyphens: manual;
    }
    .eeh-cs-legal {
        flex-direction: column;
        gap: 8px;
        padding: 14px;
    }
}



/* --- Toolbar: CT `.ct-gallery-toolbar` ----------------------------------
   Country buttons on the left, search on the right — CT puts its category
   buttons and search field in exactly this arrangement. Country replaces
   CT's era categories (Modern / Historical / Mythological) because on EEH
   the axis the visitor cares about is the DESTINATION. The count in each
   label ("🇨🇦 Canada (2)") is CT's own convention ("🎙️ Modern Figures (4)").
   ------------------------------------------------------------------------ */
.eeh-cs-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.eeh-cs-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    flex: 1;
}
/* CT `.ct-btn` geometry: 8px 16px padding at 12px type, 8px radius. */
.eeh-cs-filter {
    display: inline-block;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    border-radius: 8px;
    color: #ffffff;
    /* Inactive = CT `.ct-btn-secondary`: a barely-there wash, no fill. */
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.15));
    transition: background 0.15s ease, border-color 0.15s ease;
}
.eeh-cs-filter:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.28);
}
/* Active = CT `.ct-btn-primary`: the brand gradient, always on "All". */
.eeh-cs-filter.eeh-cs-active,
.eeh-cs-filter--primary.eeh-cs-active {
    color: #ffffff;
    background: var(--color-primary-gradient, linear-gradient(135deg, #C2714A, #a85c39));
    border-color: rgba(255, 255, 255, 0.32);
}

/* CT `.ct-gallery-search-wrap` — same size/placement, dark-palette adapted. */
.eeh-cs-search-wrap {
    position: relative;
    flex: 1;
    min-width: 200px;
    max-width: 300px;
}
.eeh-cs-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    opacity: 0.55;
    pointer-events: none;
}
.eeh-cs-search {
    width: 100%;
    padding: 9px 12px 9px 36px;
    box-sizing: border-box;
    font-size: 13px;
    border-radius: 8px;
    color: var(--color-text-on-dark, #ffffff);
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.15));
    outline: none;
    transition: border-color 0.15s ease;
}
.eeh-cs-search::placeholder { color: rgba(255, 255, 255, 0.35); }
.eeh-cs-search:focus { border-color: #CD853F; }
.eeh-cs-search::-webkit-search-cancel-button { filter: invert(1); opacity: 0.4; }

/*
 * ★ `.eeh-cs-legend` / `.eeh-cs-chip` REMOVED (S38c).
 *
 * These two rules existed only to style the inert nine-chip service legend
 * (📊 CRS Assessment, 🧭 PR Roadmap, …) that has now been deleted from the
 * renderer. Leaving them behind would be worse than dead code: the next
 * person to add a chip row would find a styled `.eeh-cs-chip` class already
 * waiting and would reasonably assume chips are a supported component, when
 * in fact the last set of them did nothing.
 *
 * If a REAL filter row is ever added back — one that filters — it should
 * reuse `.eeh-cs-filter`, which already carries a working handler, an active
 * state and `aria-pressed`.
 */

/* The grid. Mirrors CT's `.ct-famous-portrait-grid` EXACTLY:
       repeat(4, 1fr) · gap: 12px · padding: 0 0 20px
       → 3 cols @max-1024 · 2 cols @max-768 · 2 cols @max-480

   WHY NOT `auto-fit`: with `auto-fit` each card takes whatever width is left
   over, so a roster that does not divide evenly into the container's capacity
   leaves the final row stretched across the full width — the cards come out
   visibly UNEVEN. CT's fixed 4-column track makes every single card the
   identical width, which is precisely what makes that gallery read as clean
   and evenly centred. Same maths, same result. */
.eeh-consultant-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 0 0 20px;
}

/* --- The card (CT `.ct-landscape-card` geometry) ------------------------
   CT: border-radius 10px · aspect-ratio 4/3 · min-height 160px · overflow
   hidden. Every card is therefore the same shape and size regardless of how
   much copy it holds — the other half of the "uneven cards" fix. */
.eeh-consultant-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    aspect-ratio: 4 / 3;
    min-height: 160px;
    border-radius: 10px;
    overflow: hidden;
    isolation: isolate;
    background: var(--card-bg, linear-gradient(135deg, #1E3A5A 0%, #2C5F6E 100%));
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.eeh-consultant-card:hover,
.eeh-consultant-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 14px 26px -10px rgba(0, 0, 0, 0.6);
    outline: none;
}
.eeh-consultant-card:focus-visible {
    border-color: #CD853F;
}
/* Locked cards recede so an unlocked roster reads as "these are live". */
.eeh-consultant-card--locked { opacity: 0.92; }
.eeh-consultant-card--locked .eeh-consultant-card-bg { filter: saturate(0.65); }

/* Layer 1 — the portrait, covering the whole card (CT `-bg`). */
.eeh-consultant-card-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 12%;
    background-repeat: no-repeat;
    z-index: 0;
}
/* No portrait uploaded yet: the country tint shows through, so the card
   still reads as a designed object rather than a broken image slot. */
.eeh-consultant-card-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 76px;
    line-height: 1;
    opacity: 0.22;
    z-index: 1;
    pointer-events: none;
    filter: grayscale(0.2);
}

/* Layer 2 — bottom-up scrim (CT `-overlay`). Guarantees WCAG-legible text
   over ANY portrait, light or dark, without per-image tuning. */
.eeh-consultant-card-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.30) 0%,
        rgba(0, 0, 0, 0.10) 28%,
        rgba(0, 0, 0, 0.55) 62%,
        rgba(0, 0, 0, 0.88) 100%
    );
}

/* Layer 3 — top row. CT puts its action button at the TOP-LEFT of the card
   (`.ct-landscape-card-btn`, absolutely positioned at 8px/8px) with the
   tier badge to its right. We keep that exact placement: the CTA is the
   first thing the eye lands on, and it never competes with the name block
   for space at the bottom. */
.eeh-consultant-card-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 4;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px;
    padding: 8px;
}
.eeh-consultant-card-flags {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}
.eeh-consultant-card-flag {
    font-size: 16px;
    line-height: 1;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
}
.eeh-cs-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 3px 9px;
    border-radius: 20px;
    backdrop-filter: blur(4px);
}
.eeh-cs-status--open {
    color: #6ee7b7;
    background: rgba(16, 185, 129, 0.22);
    border: 1px solid rgba(16, 185, 129, 0.45);
}
.eeh-cs-status--locked {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.22);
}
/* Live "on shift" dot — the one animated element, and it is meaningful. */
.eeh-cs-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: eehCsPulse 2.4s ease-out infinite;
}
@keyframes eehCsPulse {
    0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70%  { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

    display: grid;

/* Layer 4 — the info block. CT `.ct-landscape-card-info` is bottom-anchored
   at 10px/12px and LEFT-aligned, with a gold name (`#cd853f`), a muted era
   line and a single-line "known for" clamped to 1 row. Matching those exact
   choices is what gives the gallery its even, uncrowded rhythm. */
.eeh-consultant-card-info {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    padding: 10px 12px;
    margin-top: auto;
    width: 100%;
    box-sizing: border-box;
}
.eeh-consultant-card-name {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    color: #cd853f;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}
/* ★ COUNTRY LINE (S38e) — the destination, spelled out in words.
   Deliberately between the name and the role: "who" then "where" then
   "what they do" is the order a visitor resolves a stranger in. Rendered
   slightly brighter than the role line below it because on this page the
   country is the primary axis of choice — the visitor is picking a
   destination, and the person is how they reach it. */
.eeh-consultant-card-country {
    display: block;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.88);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    margin-bottom: 1px;
}
.eeh-consultant-card-role {
    display: block;
    font-size: 10px;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.65);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    margin-bottom: 2px;
}
/* CT `.ct-landscape-card-known`: single clamped line, 9-10px, muted. */
.eeh-consultant-card-known {
    margin: 0 0 2px 0;
    font-size: 10px;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.48);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Bio is the one thing CT has no equivalent for, so it gets the tightest
   possible clamp (2 lines) purely to keep card heights identical. */
.eeh-consultant-card-bio {
    margin: 0;
    font-size: 10px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.5);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.eeh-consultant-card-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}
.eeh-consultant-card-pill {
    font-size: 9px;
    line-height: 1.4;
    padding: 1px 7px;
    border-radius: 20px;
    color: rgba(255, 255, 255, 0.78);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
}
.eeh-consultant-card-pill--next {
    color: #6ee7b7;
    background: rgba(16, 185, 129, 0.18);
    border-color: rgba(16, 185, 129, 0.38);
}

/* ==========================================================================
   DISCOVERED-FEATURES-01 (2026-10-09) — SAMPLE QUESTIONS + FREE SAMPLE NOTE
   ==========================================================================
   These live INSIDE the card info block, above the pills. They are the
   "taste" layer: three taps to a real answer, and an honest count of how
   many free questions remain with this agent.

   Design constraints, inherited from the card family so nothing looks bolted
   on: same 10px-scale type, same translucent white-on-scrim palette, same
   4px rhythm. The chips must read as ACTIONS (they are buttons), so they get
   a subtle border + hover lift, but they stay small enough not to compete
   with the one primary `Meet` control.
   ========================================================================== */
.eeh-consultant-card-samples {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}
.eeh-sample-chip {
    font-family: inherit;
    font-size: 10px;
    line-height: 1.35;
    text-align: left;
    padding: 3px 9px;
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}
.eeh-sample-chip:hover,
.eeh-sample-chip:focus-visible {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
    outline: none;
}
.eeh-sample-note {
    font-size: 9px;
    line-height: 1.4;
    padding: 1px 7px;
    border-radius: 20px;
    border: 1px solid transparent;
}
.eeh-sample-note--left {
    color: #93c5fd;
    background: rgba(59, 130, 246, 0.16);
    border-color: rgba(59, 130, 246, 0.34);
}
.eeh-sample-note--spent {
    color: #fcd34d;
    background: rgba(245, 158, 11, 0.16);
    border-color: rgba(245, 158, 11, 0.36);
}
@media (prefers-reduced-motion: reduce) {
    .eeh-sample-chip { transition: none; }
    .eeh-sample-chip:hover,
    .eeh-sample-chip:focus-visible { transform: none; }
}

/* ==========================================================================
   DISCOVERED-FEATURES-01 (2026-10-09) — AUTONOMY SURFACES (F3, F5, F7, F9)
   ========================================================================== */
/* F3 — admin test switch (admin-only; intentionally understated). */
.eeh-admin-test-switch {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(255, 255, 255, 0.2);
}
.eeh-admin-test-switch.is-on { border-color: rgba(16, 185, 129, 0.5); background: rgba(16, 185, 129, 0.08); }
.eeh-admin-test-switch-btn {
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 8px;
    text-decoration: none;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.eeh-admin-test-switch.is-on .eeh-admin-test-switch-btn { background: rgba(16, 185, 129, 0.3); border-color: rgba(16, 185, 129, 0.5); }
.eeh-admin-test-switch-note { font-size: 11px; color: rgba(255, 255, 255, 0.55); }

/* F5 — cross-country hand-off chip. */
.eeh-handoff {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
    padding: 6px 8px;
    border-radius: 10px;
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.28);
}
.eeh-handoff-icon { font-size: 13px; }
.eeh-handoff-text { font-size: 10px; color: rgba(255, 255, 255, 0.85); flex: 1; min-width: 120px; }
.eeh-handoff-btn {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
    border: 1px solid rgba(147, 197, 253, 0.5);
    background: rgba(59, 130, 246, 0.25);
    color: #fff;
    cursor: pointer;
}

/* F9 — the nightly agent note card. */
.eeh-agent-note {
    display: flex;
    gap: 12px;
    margin: 16px 0;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.3);
}
.eeh-agent-note-icon { font-size: 22px; line-height: 1; }
.eeh-agent-note-title { display: block; font-size: 13px; color: #c7d2fe; margin-bottom: 4px; }
.eeh-agent-note-text { margin: 0; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.86); }

/* F6 — the visitor-timezone hint appended to each booking slot time. */
.eeh-meeting-slot-tz {
    font-size: 9px;
    opacity: 0.6;
    font-weight: 400;
}

/* F7 — the "Save to my roadmap" chip shown under an agent's reply. */
.eeh-save-step {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    cursor: pointer;
    color: #c7d2fe;
    background: rgba(99, 102, 241, 0.14);
    border: 1px solid rgba(99, 102, 241, 0.34);
}
.eeh-save-step:hover { background: rgba(99, 102, 241, 0.26); }

/* CTA — CT `.ct-landscape-card-btn`: a COMPACT pill in the card's top-left
   corner with a dark translucent fill, NOT a full-width footer bar. The
   full-width version was what made the old cards feel like form panels
   rather than gallery tiles. */
.eeh-consultant-card-btn {
    flex-shrink: 0;
    width: auto;
    max-width: 62%;
    margin: 0;
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    border-radius: 6px;
    color: #ffffff !important;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.25);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    backdrop-filter: blur(4px);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.eeh-consultant-card-btn:hover {
    background: var(--color-primary-gradient, linear-gradient(135deg, #8b4513, #a0522d, #cd853f));
    border-color: rgba(205, 133, 63, 0.5);
    color: #ffffff !important;
}
.eeh-consultant-card-btn--locked {
    color: rgba(255, 255, 255, 0.72) !important;
    background: rgba(0, 0, 0, 0.45) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    cursor: not-allowed;
}

/* --- ★ OPEN LOBBY: the card action ----------------------------------------
   The card now carries ONE live action (S38a) where it used to carry a locked
   button, and then a pair of live ones. `.ct-landscape-card-btn` (cloned
   above) is a single compact pill, which is exactly right again — the wrapper
   is kept because it is what lets the pill sit beside the flags without
   either being clipped, not because there are two buttons to arrange. */
.eeh-consultant-card-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 78%;
}
.eeh-consultant-card-actions .eeh-consultant-card-btn {
    max-width: 100%;
    min-width: 0;
}

/* ★ THE SINGLE "Meet {name}" CTA (S38a).
   It replaces `🔊 Listen` + `🎙️ Talk to {name}` and therefore has to read as
   the stronger of the two old pills, not the weaker: it is now the only door
   into the consultation, so it takes the gold family that the old "Listen"
   pill only reached on hover. The lift on hover matches the card's own
   transform so the two move together rather than the pill sliding inside a
   stationary card. */
.eeh-cs-meet {
    background: var(--color-primary-gradient, linear-gradient(135deg, #8b4513, #a0522d, #cd853f));
    border-color: rgba(205, 133, 63, 0.55);
    color: #ffffff !important;
    /* Wider than CT's single-pill default: "Meet Charlotte" is a longer label
       than "Listen" and must not be the one thing on the card that ellipsises. */
    max-width: 82%;
    font-weight: 700;
}
.eeh-cs-meet:hover {
    background: var(--color-primary-gradient, linear-gradient(135deg, #a0522d, #cd853f));
    border-color: rgba(255, 255, 255, 0.55);
    color: #ffffff !important;
}
/* Playing state: the same soft gold pulse the Listen pill used, so the
   "this person is speaking right now" cue is preserved exactly. */
.eeh-cs-meet.is-playing {
    background: var(--color-primary-gradient, linear-gradient(135deg, #8b4513, #a0522d, #cd853f));
    border-color: rgba(205, 133, 63, 0.7);
    animation: eeh-cs-listen-pulse 1.4s ease-in-out infinite;
}

/* --- ★ S-QUICK-READ (2026-10-14): the "⚡ Quick read" pill -----------------
   A quieter sibling of Meet. It must read as the SECONDARY action (hear the
   gist) and never compete with the primary door into the consultation, so it
   keeps the neutral translucent fill and only warms on hover. Bold enough to
   be found, plain enough to be understood as "less than the full thing". */
.eeh-cs-quick-read {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.28);
    font-weight: 600;
}
.eeh-cs-quick-read:hover {
    background: rgba(205, 133, 63, 0.32);
    border-color: rgba(205, 133, 63, 0.55);
}
.eeh-cs-quick-read.is-playing {
    background: rgba(205, 133, 63, 0.42);
    border-color: rgba(205, 133, 63, 0.7);
    animation: eeh-cs-listen-pulse 1.4s ease-in-out infinite;
}

/* Legacy pill styling. Still shipped because `.eeh-cs-listen` remains a live
   hook on any cached markup and on the Meet button itself; removing the rules
   would have left those states unstyled. */
.eeh-cs-listen {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.34);
}
.eeh-cs-listen:hover {
    background: var(--color-primary-gradient, linear-gradient(135deg, #8b4513, #a0522d, #cd853f));
    border-color: rgba(205, 133, 63, 0.5);
}
.eeh-cs-listen-icon {
    display: inline-block;
    font-size: 10px;
    line-height: 1;
}
/* Playing state: a soft gold pulse that says "she is speaking" without
   competing with the portrait behind it. */
.eeh-cs-listen.is-playing {
    background: var(--color-primary-gradient, linear-gradient(135deg, #8b4513, #a0522d, #cd853f));
    border-color: rgba(205, 133, 63, 0.7);
    animation: eeh-cs-listen-pulse 1.4s ease-in-out infinite;
}
@keyframes eeh-cs-listen-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(205, 133, 63, 0.5); }
    50%      { box-shadow: 0 0 0 6px rgba(205, 133, 63, 0); }
}

/* ★ `--free` RE-PURPOSED (S38d): "Open to everyone".
 *
 * This class used to style the "Free to talk" badge. That badge is gone —
 * it and "Available now" were the same state under two labels — but the
 * variant itself is still useful and still emitted: a visitor WITHOUT a token
 * sees "Open to everyone", and a visitor WITH one sees "Available now". They
 * are the same green family on purpose (both mean "you can talk to this
 * person"), with the token-less one slightly softer because there is one
 * thing it cannot yet do.
 *
 * Intentionally NOT a warning colour: the old `.eeh-cs-status--locked` read
 * as a red padlock, and a state that means "the door is open" must never
 * borrow that signal. */
.eeh-cs-status--free {
    color: rgba(255, 255, 255, 0.82) !important;
    background: rgba(16, 185, 129, 0.16) !important;
    border-color: rgba(110, 231, 183, 0.32) !important;
}
.eeh-cs-status--free .eeh-cs-dot {
    background: #6ee7b7;
}

/* --- ★ OPEN LOBBY: the in-chat scope note ---------------------------------
   States the consultation's remit once, next to the first reply. Quiet by
   design: it must read as a professional explaining her remit, not as a
   paywall interrupting the conversation. */
.eeh-chat-scope {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 8px 0 4px;
    padding: 8px 11px;
    font-size: 11px;
    line-height: 1.55;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.05);
    border-left: 2px solid rgba(205, 133, 63, 0.55);
}
.eeh-chat-scope-icon { flex-shrink: 0; font-size: 12px; line-height: 1.4; }

/* --- ★ OPEN LOBBY: the upgrade chip ---------------------------------------
   Gold, because it is a real offer — and dismissible, because the visitor is
   in charge. Never a modal, never a redirect, never a scroll-jack. */
.eeh-chat-upsell {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 10px 0 4px;
    flex-wrap: wrap;
}
.eeh-chat-upsell-go {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none !important;
    border-radius: 999px;
    color: #ffffff !important;
    background: var(--color-primary-gradient, linear-gradient(135deg, #8b4513, #a0522d, #cd853f));
    border: 1px solid rgba(205, 133, 63, 0.65);
    transition: filter 0.15s ease, transform 0.15s ease;
}
.eeh-chat-upsell-go:hover {
    filter: brightness(1.08);
    color: #ffffff !important;
}
.eeh-chat-upsell-icon { font-size: 12px; line-height: 1; }
/* The EARNED offer: the visitor asked about their own case repeatedly, so the
   chip is allowed to look like it matters. Still an offer, never a demand —
   the dismiss control and the "once per conversation" rule are unchanged. */
.eeh-chat-upsell-go.is-earned {
    border-color: rgba(255, 215, 130, 0.85);
    box-shadow: 0 0 0 1px rgba(205, 133, 63, 0.35), 0 4px 14px -6px rgba(205, 133, 63, 0.7);
}
.eeh-chat-upsell-x {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    padding: 0;
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
}
.eeh-chat-upsell-x:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.16);
}

/* --- Empty state (CT `.ct-empty-state` shape) --------------------------- */
.eeh-cs-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 36px 20px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed var(--color-border, rgba(255, 255, 255, 0.12));
}
.eeh-cs-empty-icon { font-size: 30px; opacity: 0.7; }
.eeh-cs-empty h4 {
    margin: 8px 0 4px;
    font-size: 15px;
    color: var(--color-text-on-dark, #ffffff);
}
.eeh-cs-empty p {
    margin: 0;
    font-size: 12px;
    color: var(--color-text-secondary, rgba(226, 232, 240, 0.7));
}


/* --- Unlock gate -------------------------------------------------------- */
.eeh-cs-unlock {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
}
.eeh-cs-unlock-label {
    font-size: 12px;
    margin-bottom: 10px;
    color: var(--color-text-secondary, rgba(226, 232, 240, 0.7));
}
.eeh-cs-unlock-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.eeh-cs-token {
    flex: 1;
    min-width: 220px;
    padding: 11px 13px;
    box-sizing: border-box;
    font-size: 13px;
    letter-spacing: 0.5px;
    border-radius: 9px;
    color: var(--color-text-on-dark, #ffffff);
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.22);
    outline: none;
}
.eeh-cs-token::placeholder { color: rgba(255, 255, 255, 0.35); }
.eeh-cs-token:focus { border-color: #CD853F; }
.eeh-cs-unlock-btn {
    padding: 11px 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 9px;
    color: #ffffff;
    background: var(--color-primary-gradient, linear-gradient(135deg, #C2714A, #a85c39));
    border: 1px solid rgba(255, 255, 255, 0.22);
    transition: filter 0.15s ease;
}
.eeh-cs-unlock-btn:hover { filter: brightness(1.12); }
.eeh-cs-unlock-status {
    min-height: 16px;
    margin-top: 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary, rgba(226, 232, 240, 0.7));
}

/* --- Responsive — CT's own gallery breakpoints ---------------------------
   4 cols (desktop) → 3 @1024 → 2 @768 → 2 @480, exactly as CT steps its
   `.ct-famous-portrait-grid`. The 4:3 card ratio is preserved at every step
   so the gallery keeps the same visual rhythm all the way down. */
@media (max-width: 1024px) {
    .eeh-consultant-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .eeh-consultant-grid { grid-template-columns: repeat(2, 1fr); }
    .eeh-cs-search-wrap { max-width: 100%; min-width: 100%; }
}
@media (max-width: 480px) {
    .eeh-consultant-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .eeh-consultant-card { min-height: 130px; }
    /* `.eeh-cs-title` (17px) was dropped here with the section header it
       styled. The disclosure title is the largest text left, so it takes the
       small-screen step instead. */
    .eeh-cs-legal-title { font-size: 12.5px; }
    .eeh-cs-legal-text { font-size: 11.5px; }
    .eeh-cs-filter { padding: 7px 12px; font-size: 11px; }
}

/* Respect the OS "reduce motion" setting — the only motion here is the
   live-status pulse and the hover lift, neither of which is decorative
   enough to justify overriding a user's accessibility preference. */
@media (prefers-reduced-motion: reduce) {
    .eeh-consultant-card { transition: none; }
    .eeh-consultant-card:hover,
    .eeh-consultant-card:focus-visible { transform: none; }
    .eeh-cs-dot { animation: none; }
    /* OPEN LOBBY: the Listen pulse is a "she is speaking" cue, which the
       icon swap to ⏸ already conveys on its own — so dropping the animation
       loses no information for motion-sensitive visitors. */
    .eeh-cs-listen.is-playing { animation: none; }
}



/* ==========================================================================
   CASE COCKPIT — one page, five faces (S40)
   ==========================================================================
   Emitted by core/class-case-cockpit.php. THIS SHEET is where these rules
   belong: /my-dashboard/ loads frontend.css and NOT the admin sheet, which is
   exactly why the consultant gallery once collapsed into an unstyled slab
   (see .eeh-consultants above). Every cockpit class is therefore defined here,
   and none of them depend on the admin stylesheet being present.

   The CT vocabulary the cockpit reuses — .ct-cards-grid-N, .ct-metric-card,
   .ct-metric-*, .ct-card, .ct-table — is ALSO defined in this sheet, so the
   metric rows and tables render identically to the admin dashboard. */

.eeh-cockpit {
    padding: 0 0 8px;
}

/* --------------------------------------------------------------------------
   HERO / HEADLINE — every face opens with one.
   -------------------------------------------------------------------------- */

.eeh-cockpit-hero {
    text-align: center;
    padding: 26px 20px 18px;
}

.eeh-cockpit-hero-icon {
    font-size: 40px;
    line-height: 1;
    margin-bottom: 10px;
}

.eeh-cockpit-hero-title {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text-on-dark, #fff);
}

.eeh-cockpit-hero-lead {
    margin: 0 auto;
    max-width: 640px;
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
}

/* --------------------------------------------------------------------------
   CTA — one primary action per face, and never two competing asks.
   -------------------------------------------------------------------------- */

.eeh-cockpit-cta {
    margin: 18px auto 6px;
    max-width: 720px;
}

.eeh-cockpit-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-radius: var(--card-radius, 16px);
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.eeh-cockpit-btn--primary {
    border-color: #CD853F;
    background: var(--color-primary-gradient, #C2714A);
    box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.65);
}

.eeh-cockpit-btn:hover,
.eeh-cockpit-btn:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 14px 26px -10px rgba(0, 0, 0, 0.6);
}

.eeh-cockpit-btn:focus-visible {
    outline: 2px solid #CD853F;
    outline-offset: 2px;
}

.eeh-cockpit-btn-icon {
    font-size: 24px;
    line-height: 1;
    flex: 0 0 auto;
}

.eeh-cockpit-btn-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
}

.eeh-cockpit-btn-label {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-on-dark, #fff);
}

.eeh-cockpit-btn-note {
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.78);
}

/* --------------------------------------------------------------------------
   TOKEN DOOR — the secondary path on FACE 1 and FACE 2.
   -------------------------------------------------------------------------- */

.eeh-cockpit-door {
    padding: 22px;
    margin-top: 18px;
}

.eeh-cockpit-field {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin: 16px 0;
}

.eeh-cockpit-field input[type="text"] {
    flex: 1 1 260px;
    min-width: 220px;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(0, 0, 0, 0.2);
    color: var(--color-text-on-dark, #fff);
    font-size: 14px;
    letter-spacing: 0.5px;
}

.eeh-cockpit-field input[type="text"]::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

/* The retrieve button keeps its shipped `width:auto` override because
   .eeh-action-btn is full-width by default. */
.eeh-cockpit-field .eeh-action-btn {
    width: auto;
    background: rgba(255, 255, 255, 0.1);
}

.eeh-cockpit-status {
    font-weight: 600;
    font-size: 13px;
    min-height: 18px;
    margin-bottom: 12px;
}

.eeh-cockpit-subhead {
    margin: 18px 0 8px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    opacity: 0.75;
}

.eeh-cockpit-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 220px;
    overflow: auto;
    padding: 4px;
}

.eeh-cockpit-fineprint {
    opacity: 0.7;
    font-size: 12px;
    line-height: 1.6;
    margin-top: 16px;
}

/* --------------------------------------------------------------------------
   PREVIEW — locked sections and case cards.
   -------------------------------------------------------------------------- */

.eeh-cockpit-locked {
    margin: 0;
    padding-left: 20px;
    font-size: 13.5px;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.8);
}

.eeh-cockpit-card {
    margin-top: 5px;
}

.eeh-cockpit-table th,
.eeh-cockpit-table td {
    font-size: 12.5px;
    padding: 9px 6px;
    vertical-align: top;
    text-align: left;
}

.eeh-cockpit-step-n {
    width: 34px;
    font-weight: 700;
    color: #CD853F;
}

/* --------------------------------------------------------------------------
   STEP COMPLETION + PROGRESS (C5).
   The roadmap is an instrument now, so a done step must be legible at a glance
   without the tick being the only cue — the row recedes and the title loses its
   emphasis, which reads correctly for someone scanning for what is LEFT. */
.eeh-cockpit-step-done {
    width: 46px;
    text-align: center;
}

.eeh-cockpit-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 0;
    /* The absolutely-positioned hidden input clips against this, so it cannot
       drift outside the cell and create a stray scroll area. */
    position: relative;
}

/* Visually hidden but still focusable and still a real checkbox: the native
   control is what gives keyboard users Space and screen readers a name. */
.eeh-cockpit-check input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.eeh-cockpit-check span {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    background: rgba(0, 0, 0, 0.18);
    position: relative;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.eeh-cockpit-check input:checked + span {
    background: #CD853F;
    border-color: #CD853F;
}

.eeh-cockpit-check input:checked + span::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 9px;
    border: solid #1b1b1b;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.eeh-cockpit-check input:focus-visible + span {
    outline: 2px solid #CD853F;
    outline-offset: 2px;
}

.eeh-cockpit-step--done strong {
    color: rgba(255, 255, 255, 0.62);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.eeh-cockpit-step--done { opacity: 0.82; }

.eeh-cockpit-progress {
    margin: 0 0 14px;
}

.eeh-cockpit-progress-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 12.5px;
    margin-bottom: 6px;
    color: rgba(255, 255, 255, 0.75);
}

.eeh-cockpit-progress-pct {
    font-weight: 700;
    color: var(--color-text-on-dark, #fff);
}

.eeh-cockpit-progress-track {
    height: 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.eeh-cockpit-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--color-primary-gradient, #C2714A);
    transition: width 0.25s ease;
}

.eeh-cockpit-muted {
    color: rgba(255, 255, 255, 0.6);
}

.eeh-cockpit-empty {
    margin: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

/* --------------------------------------------------------------------------
   HONESTY FALLBACK CALLOUT (C4).
   A revealed report is GOOD NEWS, so it must not look like a warning. The gold
   hairline marks it as a deliberate statement from us, and the lead line is
   larger than body copy because the sentence carrying the real gap is the one
   the visitor will read — it should not be something they have to find. */
.eeh-cockpit-reveal {
    border-color: #CD853F;
    border-width: 1px;
    border-style: solid;
}

.eeh-cockpit-reveal-lead {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.55;
    color: var(--color-text-on-dark, #fff);
}

/* --------------------------------------------------------------------------
   NARROW SCREENS — the CTA stacks rather than squeezing its label.
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
    .eeh-cockpit-btn { flex-direction: column; align-items: flex-start; gap: 8px; }
    .eeh-cockpit-hero-title { font-size: 19px; }
    .eeh-cockpit-hero-lead { font-size: 12.5px; }
    .eeh-cockpit-hero-icon { font-size: 32px; }
}

@media (prefers-reduced-motion: reduce) {
    .eeh-cockpit-btn { transition: none; }
    .eeh-cockpit-btn:hover,
    .eeh-cockpit-btn:focus-visible { transform: none; }
}

/* ==========================================================================
   DASHBOARD SHELL — HORIZONTAL SUB-TABS, COUNTRY SWITCHER, GATE (D1)
   ==========================================================================
   The vertical half of this shell (`.ct-sidebar`, `.ct-nav-item`,
   `.ct-user-section`, `.ct-content`) was cloned to CT-exact values in an
   earlier pass and needed NO new CSS. Everything below is genuinely new: the
   second nav level, the country filter and the profile-gate panel. All of it is
   scoped to the dashboard so the frontend admin panel is untouched. */

.eeh-tab-content {
    min-height: 300px;
    position: relative;
}

/* The loading veil (D2). It sits OVER the panel rather than replacing it, so a
   slow request is visible while the content the visitor is reading stays put —
   which is also what makes a failure restorable: there is nothing to rebuild. */
.eeh-loading-veil {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.35);
    border-radius: var(--card-radius, 16px);
    z-index: 5;
}

.eeh-loading-text {
    margin: 0;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.75);
}

.eeh-spinner {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: #CD853F;
    animation: eeh-spin 0.8s linear infinite;
}

@keyframes eeh-spin {
    to { transform: rotate(360deg); }
}

/* The panel a tab's content lands in. It is a container only — no visual
   opinion — but it is named so a future tab can target itself without
   depending on the shape of its neighbours. */
.eeh-tab-panel {
    display: block;
}

/* The horizontal sub-tabs — the second nav level. Sits at the top of the
   content area, above whatever the tab renders. */
.eeh-subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border);
    /*
     * ★ `min-width: 0` — WITHOUT THIS, `flex-wrap` NEVER FIRES (Phase D3).
     *
     * A flex ITEM defaults to `min-width: auto`, so this strip refused to shrink below
     * the intrinsic width of its eight tabs. It could not wrap because it was never
     * allowed to become narrower than its content in the first place — so it pushed the
     * content column wider instead, and the column's CT-exact `overflow-x: auto`
     * answered with a horizontal scrollbar under the navigation. That is the clipped
     * last tab and the stray scrollbar in the report.
     *
     * `flex-wrap: wrap` and `min-width: 0` are one mechanism, not two: the first says
     * what to do when space runs out, the second is what lets space run out.
     */
    min-width: 0;
}

.eeh-subtab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.18);
    color: var(--color-text-on-dark);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    /* NO TRANSITIONS — matches the static vertical nav above. */
}

.eeh-subtab:hover {
    background: rgba(0, 0, 0, 0.28);
}

.eeh-subtab.active {
    background: var(--metallic-steel-gradient);
    border-color: #CD853F;
}

.eeh-subtab:focus-visible {
    outline: 2px solid #CD853F;
    outline-offset: 2px;
}

.eeh-subtab-icon {
    font-size: 14px;
    line-height: 1;
}

.eeh-subtab-label {
    line-height: 1;
}

/* The country switcher — a filter over EVERY sub-tab, so it is visually
   distinguished from them: chips, not tabs, with the visitor's own primary
   destination marked active rather than left to guesswork. */
.eeh-country-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
}

.eeh-country-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: rgba(0, 0, 0, 0.16);
    color: var(--color-text-on-dark);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.eeh-country-chip:hover {
    border-color: #CD853F;
}

.eeh-country-chip.active {
    background: var(--color-primary-gradient, #C2714A);
    border-color: #CD853F;
}

.eeh-country-chip:focus-visible {
    outline: 2px solid #CD853F;
    outline-offset: 2px;
}

/* ==========================================================================
   CONSULTANTS TAB — THE MEETING DOOR (D6)
   ==========================================================================
   Two doors live on this tab and they must never look interchangeable:

     • TALK  — free at every tier. The directory below carries it.
     • MEET  — the paid exclusive. It gets the gold accent, because it is the
               one thing on this page a visitor may not have.

   `.eeh-meeting-locked` is deliberately NOT a greyed-out button. A disabled
   control says "not for you" and stops the conversation; a named boundary with
   a real price says "here is what it is" and continues it — the same reasoning
   as the S37c lesson about scoped rather than disabled controls. */

.eeh-consultants-tab {
    display: block;
}

.eeh-meeting-door {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 22px;
    margin: 0 0 18px;
    border-radius: var(--card-radius, 16px);
    border: 1px solid #CD853F;
    background: var(--card-bg, linear-gradient(135deg, #1E3A5A 0%, #2C5F6E 50%, #3A7A8C 100%));
}

.eeh-meeting-door-body {
    flex: 1;
    min-width: 0;
}

.eeh-meeting-door-title {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
    color: var(--color-text-on-dark, #fff);
}

.eeh-meeting-door-text {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
}

.eeh-meeting-btn {
    width: auto;
    background: var(--color-primary-gradient, #C2714A);
}

.eeh-meeting-door-icon {
    font-size: 40px;
    line-height: 1;
    flex: 0 0 auto;
}

/* The named boundary. Gold hairline, explanation, and a real CTA. */
.eeh-meeting-locked {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    margin: 0 0 18px;
    border-radius: var(--card-radius, 16px);
    border: 1px solid rgba(205, 133, 63, 0.4);
    background: rgba(205, 133, 63, 0.07);
}

.eeh-meeting-locked-icon {
    font-size: 28px;
    line-height: 1;
    flex: 0 0 auto;
}

.eeh-meeting-locked-body {
    flex: 1;
    min-width: 0;
}

.eeh-meeting-locked-title {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
    color: var(--color-text-on-dark, #fff);
}

.eeh-meeting-locked-text {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
}

.eeh-meeting-locked-cta {
    flex: 0 0 auto;
    padding: 9px 16px;
    border-radius: 8px;
    background: var(--color-primary-gradient, #C2714A);
    color: var(--color-text-on-dark, #fff);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.eeh-meeting-locked-cta:hover,
.eeh-meeting-locked-cta:focus-visible {
    border: 1px solid #CD853F;
    outline: none;
}

/* The booking panel the button reveals. */
.eeh-meeting-panel {
    margin: 0 0 18px;
}

.eeh-meeting-panel[hidden] {
    display: none;
}

@media (max-width: 768px) {
    .eeh-meeting-door,
    .eeh-meeting-locked {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .eeh-meeting-door-icon,
    .eeh-meeting-locked-icon {
        font-size: 30px;
    }

    .eeh-meeting-locked-cta {
        width: 100%;
        text-align: center;
    }
}


.eeh-country-flag {
    font-size: 15px;
    line-height: 1;
}

.eeh-country-name {
    line-height: 1;
}

/* The profile-gate panel, in CT's slot under a collapsed nav. It explains WHY
   the rest of the product is absent, which is the difference between a gate and
   a dead end. */
.eeh-nav-profile-locked {
    margin: 8px;
    padding: 16px 18px;
    background: rgba(205, 133, 63, 0.08);
    border: 1px solid rgba(205, 133, 63, 0.25);
    border-radius: 10px;
    text-align: center;
}

.eeh-nav-profile-locked-icon {
    font-size: 20px;
    margin-bottom: 6px;
}

.eeh-nav-profile-locked-text {
    color: rgba(255, 255, 255, 0.68);
    font-size: 11.5px;
    line-height: 1.55;
}

/* The preview-window timer in the sidebar foot (CT's trial-timer slot, named
   honestly — see EEH_Dashboard_Shell::render_user_section()). */
.ct-trial-timer {
    margin-top: 10px;
    padding: 7px 10px;
    background: rgba(52, 152, 219, 0.14);
    border: 1px solid rgba(52, 152, 219, 0.3);
    border-radius: 8px;
    text-align: center;
    font-size: 11.5px;
    font-weight: 600;
    color: #6fb4e8;
}

/* The sidebar user card's text column. The vertical shell CSS already styles
   the avatar; this is the two-line block beside it. */
.ct-user-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ct-user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-on-dark);
}

.ct-user-role {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 768px) {
    .eeh-subtabs,
    .eeh-country-switch {
        gap: 5px;
    }

    .eeh-subtab,
    .eeh-country-chip {
        padding: 7px 11px;
        font-size: 11.5px;
    }
}

/* ==========================================================================
   ROADMAP TAB VIEWS (D5)
   ==========================================================================
   Seven sub-tab bodies, each its own view of the same case. They reuse the CT
   metric cards and tables above, so this block only adds what is genuinely new:
   the view shell, its headings, and the two states that protect the data (the
   locked boundary and the no-case refusal). */

.eeh-view {
    display: block;
    min-height: 260px;
}

.eeh-view-subhead {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
}

/* A view that follows a table needs air before its next heading. */
.eeh-cockpit-table + .eeh-view-subhead,
.ct-table + .eeh-view-subhead,
.ct-metric-card + .eeh-view-subhead,
.eeh-view-list + .eeh-view-subhead {
    margin-top: 22px;
}

.eeh-view-lead {
    margin: 14px 0 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
}

.eeh-view-list {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.8);
}

.eeh-view-list li {
    margin-bottom: 4px;
}

.eeh-view-points {
    font-weight: 600;
    color: #7ED9A0;
    white-space: nowrap;
}

.eeh-view-total td {
    border-top: 1px solid var(--color-border);
}

/* --- the locked boundary ---------------------------------------------------
   A NAMED boundary, not a blank panel. It renders INSIDE the view (so the
   sub-tab the visitor clicked is visibly the one they are on) and says what
   unlocks it. */
.eeh-view-locked {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 22px;
    border: 1px dashed var(--color-border);
    border-radius: var(--card-radius, 16px);
    background: rgba(205, 133, 63, 0.06);
}

.eeh-view-locked-icon {
    font-size: 24px;
    line-height: 1;
}

.eeh-view-locked-body {
    flex: 1 1 240px;
}

.eeh-view-locked-title {
    display: block;
    font-size: 14px;
    color: var(--color-text);
}

.eeh-view-locked-text {
    margin: 4px 0 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.7);
}

.eeh-view-locked-cta {
    padding: 10px 18px;
    border-radius: 10px;
    background: #CD853F;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.eeh-view-locked-cta:hover {
    background: #B8742F;
    color: #fff;
}

.eeh-view-locked-cta:focus-visible {
    outline: 2px solid #CD853F;
    outline-offset: 2px;
}

/* --- the no-case refusal ---------------------------------------------------
   Shown when there is no dossier at all. NO view renders invented figures in
   this state — that is the D9 defect, and this is where it is refused. */
.eeh-view-empty {
    padding: 22px;
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius, 16px);
}

.eeh-view-empty p {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
}

.eeh-view-empty p:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .eeh-view-locked {
        padding: 16px;
        gap: 12px;
    }

    .eeh-view-locked-cta {
        width: 100%;
        text-align: center;
    }
}

/* ==========================================================================
   BOOKING PANEL — THE SHIFT PICKER (D6b)
   ==========================================================================
   The panel behind `#eeh-meeting-book`. Server-rendered and hidden until the
   door opens it, so there is no loading state between the click and the slots.
   The status line is the only place a booking's outcome is reported, and it is
   `aria-live` in the markup. */

.eeh-meeting-panel {
    margin-top: 18px;
    padding: 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius, 16px);
    background: rgba(0, 0, 0, 0.18);
}

.eeh-meeting-panel[hidden] {
    display: none;
}

.eeh-meeting-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.eeh-meeting-panel-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
}

.eeh-meeting-close {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

.eeh-meeting-close:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-text);
}

.eeh-meeting-close:focus-visible {
    outline: 2px solid #CD853F;
    outline-offset: 2px;
}

.eeh-meeting-panel-text {
    margin: 0 0 16px;
    font-size: 12.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.7);
}

/* --- one block per consultant --------------------------------------------- */
.eeh-meeting-consultants {
    display: grid;
    gap: 16px;
}

.eeh-meeting-consultant {
    padding: 14px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
}

.eeh-meeting-consultant-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.eeh-meeting-consultant-avatar {
    font-size: 18px;
    line-height: 1;
}

.eeh-meeting-consultant-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-text);
}

.eeh-meeting-consultant-title {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.55);
}

/* --- the days, and their slots -------------------------------------------- */
.eeh-meeting-days {
    display: grid;
    gap: 12px;
}

.eeh-meeting-day {
    display: grid;
    gap: 6px;
}

.eeh-meeting-day-label time {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}

.eeh-meeting-day-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text);
}

.eeh-meeting-day-date {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.5);
}

.eeh-meeting-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.eeh-meeting-slot {
    min-width: 62px;
    padding: 7px 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: transparent;
    color: var(--color-text);
    font-size: 12.5px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.eeh-meeting-slot:hover:not([disabled]) {
    border-color: #CD853F;
    background: rgba(205, 133, 63, 0.12);
}

.eeh-meeting-slot:focus-visible {
    outline: 2px solid #CD853F;
    outline-offset: 2px;
}

.eeh-meeting-slot-time {
    font-variant-numeric: tabular-nums;
}

/* Booked: kept visible and ticked rather than removed, so the visitor can see
   what they chose — but it can no longer be posted again. */
.eeh-meeting-slot--pending {
    opacity: 0.55;
    cursor: wait;
}

.eeh-meeting-slot--booked {
    border-color: #7ED9A0;
    background: rgba(126, 217, 160, 0.12);
    color: #7ED9A0;
    cursor: default;
}

/* --- the outcome line ------------------------------------------------------
   The ONLY place a booking's result is reported, and `aria-live` in the markup.
   A failure must never be silent: the visitor would otherwise believe a
   consultant is expecting them when nobody is. */
.eeh-meeting-status {
    margin: 14px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    min-height: 1em;
    color: rgba(255, 255, 255, 0.75);
}

.eeh-meeting-status--ok {
    color: #7ED9A0;
}

.eeh-meeting-status--error {
    color: #F08A7A;
}

/* No availability, or no entitlement. Named, never a blank box. */
.eeh-meeting-empty {
    margin: 0;
    padding: 10px 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 768px) {
    .eeh-meeting-panel {
        padding: 14px;
    }

    .eeh-meeting-slot {
        min-width: 56px;
        padding: 7px 10px;
    }
}

/* ==========================================================================
   TAB BODIES — EXPLORE, DOCUMENTS, PLAN, HISTORY (D7)
   ==========================================================================
   The four bodies that used to render the cockpit. Shared furniture first
   (title, lead, named empty state), then each body's own pieces. */

.eeh-body {
    display: block;
}

/* A tab this class does not own renders nothing at all — the shell keeps it on
   whatever body does own it. */
.eeh-body-none {
    display: none;
}

.eeh-body-title {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text);
}

.eeh-body-lead {
    margin: 0 0 18px;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
    max-width: 62ch;
}

/* A NAMED empty state — never a blank panel. */
.eeh-body-empty {
    margin: 0;
    padding: 18px;
    border: 1px dashed var(--color-border);
    border-radius: var(--card-radius, 16px);
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.68);
}

/* --- explore -------------------------------------------------------------- */
.eeh-explore-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px;
}

.eeh-explore-card {
    padding: 15px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.14);
}

/* ★ A destination the visitor actually qualifies for. The whole point of the
   page is this distinction, so it must be visible at a glance. */
.eeh-explore-meets {
    border-color: rgba(126, 217, 160, 0.5);
}

/* The visitor's own destination, so alternatives are never mistaken for it. */
.eeh-explore-own {
    border-left: 3px solid #CD853F;
}

.eeh-explore-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.eeh-explore-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-text);
}

.eeh-explore-badge {
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(205, 133, 63, 0.16);
    color: #E0A96D;
    font-size: 10.5px;
    font-weight: 600;
}

.eeh-explore-figures {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.eeh-explore-score {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.eeh-explore-threshold {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.5);
}

.eeh-explore-verdict {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: #7ED9A0;
}

.eeh-explore-verdict--short {
    color: rgba(255, 255, 255, 0.62);
}

.eeh-explore-label {
    margin: 4px 0 0;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
}

/* --- documents ------------------------------------------------------------ */
.eeh-doc-progress {
    margin: 0 0 12px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.65);
}

.eeh-doc-list {
    display: grid;
    gap: 6px;
}

.eeh-doc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
}

.eeh-doc-row--ready {
    border-color: rgba(126, 217, 160, 0.35);
}

.eeh-doc-label {
    font-size: 13px;
    color: var(--color-text);
}

.eeh-doc-status {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
}

.eeh-doc-row--ready .eeh-doc-status {
    color: #7ED9A0;
}

/* --- plan ----------------------------------------------------------------- */
.eeh-plan-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.eeh-plan-state {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.eeh-plan-badge {
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
}

.eeh-plan-badge--paid {
    background: rgba(126, 217, 160, 0.15);
    color: #7ED9A0;
}

.eeh-plan-badge--free {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
}

.eeh-plan-expiry {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.5);
}

.eeh-plan-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.eeh-plan-amount {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text);
}

.eeh-plan-currency {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
}

.eeh-plan-sections {
    display: grid;
    gap: 6px;
}

.eeh-plan-section {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
}

.eeh-plan-unlocked {
    border-color: rgba(126, 217, 160, 0.3);
}

.eeh-plan-section-mark {
    flex: 0 0 auto;
    font-size: 12px;
}

.eeh-plan-section-label {
    flex: 1 1 auto;
    font-size: 13px;
    color: var(--color-text);
}

.eeh-plan-section-state {
    flex: 0 0 auto;
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.5);
}

.eeh-plan-unlocked .eeh-plan-section-state {
    color: #7ED9A0;
}

.eeh-plan-cta-row {
    margin: 18px 0 0;
}

.eeh-plan-cta {
    display: inline-block;
    padding: 11px 20px;
    border-radius: 10px;
    background: #CD853F;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.eeh-plan-cta:hover {
    background: #B8742F;
    color: #fff;
}

.eeh-plan-cta:focus-visible {
    outline: 2px solid #CD853F;
    outline-offset: 2px;
}

/* --- history -------------------------------------------------------------- */
.eeh-history {
    display: grid;
    gap: 6px;
}

.eeh-history-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
}

.eeh-history-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.72);
}

.eeh-history-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.eeh-history-when {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.5);
}

/* ★ The honest scope note. It is what keeps the page from implying that a case
   activity log exists and happens to be short. */
.eeh-history-note {
    margin: 16px 0 0;
    padding: 12px 14px;
    border-left: 3px solid var(--color-border);
    font-size: 12px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.55);
    max-width: 66ch;
}

@media (max-width: 768px) {
    .eeh-explore-grid {
        grid-template-columns: 1fr;
    }

    .eeh-plan-head {
        gap: 10px;
    }
}

/* ==========================================================================
   JOURNEY STEP — ASSESS, GENERATING, REPORT, ROADMAP (D4)
   ==========================================================================
   The in-place journey. The step shell and the WAIT are new; the questionnaire
   and the report are the existing shortcode and cockpit, so nothing here
   restyles them. */

.eeh-step {
    display: block;
    min-height: 240px;
}

.eeh-step-head {
    margin-bottom: 18px;
}

.eeh-step-title {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text);
}

.eeh-step-lead {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
    max-width: 62ch;
}

/* ★ The mounted questionnaire. The attribute is what the shell client checks
   BEFORE it will replace this panel — see mayLeaveLiveForm() in
   eeh-dashboard.js. It is a boundary, not a style hook. */
.eeh-step-form {
    display: block;
}

.eeh-step-actions {
    margin: 18px 0 0;
}

.eeh-step-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

/* --- the wait ---------------------------------------------------------------
   A bar that POLLS the case. A countdown that reaches zero while generation is
   still running is a lie, so the width is driven by the client's own progress
   report rather than by a timer. */
.eeh-step-wait {
    padding: 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius, 16px);
}

.eeh-step-wait-bar {
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.eeh-step-wait-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: #CD853F;
    transition: width 0.5s ease;
}

.eeh-step-wait-text {
    margin: 12px 0 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.7);
}

/* --- the score card -------------------------------------------------------- */
.eeh-step-score {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 18px;
}

.eeh-step-score-value {
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.eeh-step-score-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
}

/* A step note — used for refusals, so it must be readable rather than shouty. */
.eeh-step-note {
    margin: 12px 0 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 768px) {
    .eeh-step-wait {
        padding: 14px;
    }

    .eeh-step-score-value {
        font-size: 28px;
    }
}

/* ==========================================================================
   THE SHELL'S TOP BAR — ONE BAR, THREE ZONES (top-bar pass)
   ==========================================================================
   CT's `ct-top-bar` anatomy: 44px tall, left/centre/right, a
   `16px 16px 0 0` radius and the bronze metallic gradient. Matching its
   STRUCTURE keeps the dashboard and the admin panel reading as one product.

   It sits ABOVE `.ct-main-layout`, so the rail begins below it — that is what
   makes it a header rather than the sidebar's first item. */

.eeh-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 44px;
    box-sizing: border-box;
    padding: 0 var(--spacing-lg, 18px);
    background: var(--bronze-metallic-gradient);
    color: var(--color-text-on-dark);
    /*
     * ★ THE BAR'S CORNERS MUST AGREE WITH THE SHELL'S FRAME.
     *
     * The shell now carries a 2px gold border with a 16px radius, and the bar sits
     * flush at its top. The inner radius is therefore the OUTER radius minus the
     * border width (16 - 2 = 14), or the bar's corners overlap the frame's curve
     * and show a seam. The suite asserts this relationship rather than the number.
     */
    border-radius: 14px 14px 0 0;
    box-shadow: 0 15px 25px -8px rgba(139, 69, 19, 0.4);
    position: relative;   /* so the dropdown/badge layers sit above the rail */
    z-index: 10;
}

.eeh-top-bar-left,
.eeh-top-bar-center,
.eeh-top-bar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;   /* the flex default refuses to shrink, which overflows */
}

.eeh-top-bar-brand {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: inherit;
    text-decoration: none;
}

.eeh-top-bar-brand:hover,
.eeh-top-bar-brand:focus-visible {
    color: inherit;
    text-decoration: underline;
}

.eeh-top-bar-badge {
    background: var(--gold-gradient);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 6px 12px;
    border-radius: 20px;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(184, 134, 11, 0.4);
}

.eeh-top-bar-chip {
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    padding: 6px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    font-variant-numeric: tabular-nums;
}

/* The resume controls live in the bar's right zone (see eeh-form-guard.js).
   They are injected next to the counter, so they inherit the bar's colour. */
.eeh-top-bar-right .eeh-fg-resume {
    margin: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    gap: 6px;
}

.eeh-top-bar-right .eeh-fg-resume-text {
    display: none;   /* the bar has no room for the sentence; the buttons say it */
}

/* ==========================================================================
   ONE BAR, NOT TWO — the nested form chrome is suppressed inside the shell
   ==========================================================================
   `class-assessment-form.php` renders its own `<header class="top-bar">` with
   the brand, the badge, the step counter AND a Home button. On the STANDALONE
   questionnaire page that bar is the visitor's only chrome — the page runs in
   focus mode with no theme header — so it must stay.

   Inside the dashboard it duplicates the shell's bar exactly. This hides it
   there and leaves it alone everywhere else.

   ★ SUPPRESSED, NOT DELETED. Deleting it would break the standalone page and
   the D4h fallback, which is the path a visitor takes when the form shortcode
   is unavailable. */

.eeh-step-form .top-bar,
.eeh-step-form .mobile-sidebar-toggle,
.eeh-step-form .sidebar-overlay {
    display: none !important;
}

/* ==========================================================================
   THE QUESTIONNAIRE STEPS GO HORIZONTAL (Phase 3)
   ==========================================================================
   ★ THE "TWO VERTICAL BARS" PROBLEM.

   The profile tab rendered TWO vertical rails side by side: the shell's 8
   dashboard tabs, and the assessment form's own 20 questionnaire steps at
   `width: 30%; min-width: 320px`. Two columns of navigation, ~30% each, with the
   form itself squeezed into what was left.

   The dashboard had already solved this shape for the roadmap's seven sub-tabs
   (D5): one horizontal strip above the content. The questionnaire gets the same
   treatment.

   ★ SCOPED TO `.eeh-step-form`, WHICH IS THE POINT. On the STANDALONE
   `/express-entry-questionnaire/` page there is no competing dashboard rail, so a
   vertical 20-step sidebar is genuinely the right layout — and that page is also
   the D4h fallback. Widening this rule to `.vertical-steps` would break it.

   ★ LAYOUT ONLY. Every class name (`vertical-steps`, `nav-item`, `nav-icon`,
   `nav-label`) and every attribute (`data-step`, `data-conditional`) is UNCHANGED,
   because `assessment-form.js` selects on them. Renaming one would unmount the
   navigation silently: the form would render, the steps would look right, and
   nothing would respond to a click. */

.eeh-step-form .eeh-assessment-layout {
    display: block;   /* the two-column flex is what made a second rail possible */
}

.eeh-step-form .eeh-assessment-sidebar {
    /* Release the 30% column and its min/max width — it is a strip now, not a rail. */
    width: 100%;
    min-width: 0;
    max-width: none;
    flex: 0 0 auto;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    overflow: visible;   /* the STRIP scrolls, not the column */
}

.eeh-step-form .eeh-assessment-content {
    width: 100%;
    max-width: none;
    flex: 1 1 auto;
}

/* ==========================================================================
   ★★ ONE SHELL, NOT TWO — THE NESTED SHELL IS FLATTENED (Phase G)
   ==========================================================================
   THE DEFECT THIS FIXES.

   `.eeh-step-form` mounts the `[eeh_assessment_form]` shortcode, and that
   shortcode does not render "a form" — it renders a COMPLETE SECOND SHELL:

       .eeh-gold-series.eeh-gold-series-form     ← a second framed shell
         .eeh-assessment-container               ← overflow:hidden, min-height:80vh
           header.top-bar                        ← (already suppressed above)
           .eeh-assessment-layout
             .eeh-assessment-sidebar             ← (turned into a strip above)
             .eeh-assessment-content             ← overflow-y:auto, width:70%

   Every one of those is CORRECT on `/express-entry-questionnaire/`, where the
   form IS the page and there is no competing shell. Inside the dashboard it is a
   shell within a shell, and the box model of the inner one fights the outer one:

     • `.eeh-assessment-container { overflow: hidden }` CLIPS. The content column
       it sits in is already narrowed by the shell's own rail, so anything the
       inner layout overhangs — the 20-step strip, a wide field grid, a
       validation bubble — is cut off at the edge instead of wrapping. That is
       the reported "content cut off at the right".

     • `.eeh-gold-series-form { max-width: 1200px }` measures the form a SECOND
       time, inside a column the shell has already measured (1400px shell − 240px
       rail). Two caps for one width is the "bad structure" — the panel reads as
       a squeezed column floating in a wide frame rather than as the frame's
       content.

     • `.eeh-assessment-content { overflow-y: auto }` and
       `.eeh-assessment-sidebar { overflow-y: auto }` are two more scroll
       containers nested inside the page's own scroll. On a 20-step form the
       visitor ends up scrolling a panel inside a page inside a viewport, and the
       visible scrollbar belongs to the innermost one.

     • `.eeh-assessment-container { min-height: 80vh }` / `.eeh-assessment-layout
       { min-height: 600px }` force the nested shell taller than its content, so
       the gold frame ends in empty space below a short step.

   WHAT THIS DOES INSTEAD — CT'S ANATOMY.

   CT's `.ct-gold-series` holds ONE bar and then the tab content, directly. There
   is no inner container, no inner cap and no inner scroll region. The form here
   gets the same treatment: inside the dashboard it becomes a transparent,
   full-width, unclipped BLOCK whose height is its content's height. The shell
   keeps owning the frame, the width, the rail and the scroll — which is the
   whole reason the shell exists.

   ★ SCOPED TO `.eeh-step-form`, AND THAT SCOPE IS LOAD-BEARING. Every rule below
   is the OPPOSITE of what the standalone questionnaire wants, and the standalone
   page is also the D4h fallback — the path a visitor takes when the form
   shortcode is unavailable. Widening any of this to `.eeh-gold-series-form` or
   `.eeh-assessment-container` alone would flatten the one page where the form's
   own shell is the correct answer.

   ★ NO SELECTOR, CLASS OR ATTRIBUTE IS RENAMED. `assessment-form.js` binds the
   step navigation by class and by `data-step`/`data-tab`; this section changes
   geometry only. See `.dev/smoke-form-steps.php` §1 for the contract. */

/* 1. The inner frame stops being a frame. It is a block inside the shell's
      content column — no second cap, no second margin, no second padding.
      ★ `max-width: 100%` HERE, MATCHING THE INLINE BLOCK, NOT `none`.
      `templates/eeh-page-wrapper.php` already releases this element at
      specificity (0,5,0) from an inline `<head>` block — so IT is the winner on
      this route, and a different value here would be a declaration that never
      renders. Two rules for one property that disagree is the exact shape that
      cost this shell five passes (see CHANGELOG 2.6.3/2.6.4); they now agree, and
      the value is restated here as well so this file is readable on its own. */
.eeh-step-form .eeh-gold-series-form {
    width: 100%;
    max-width: 100%;      /* same value as the inline release — one answer */
    margin: 0;
    padding: 0;
    border: 0;            /* the shell draws the only gold line on this page */
    border-radius: 0;
    background: transparent;
    min-height: 0;
}

/* 2. The inner container stops clipping and stops forcing a viewport floor. */
.eeh-step-form .eeh-assessment-container {
    max-width: none;
    width: 100%;
    min-height: 0;        /* was 80vh — the shell's own floor is the floor */
    overflow: visible;    /* ★ was `hidden` — this was the right-edge clipping */
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* 3. The inner layout's viewport floor goes too, so a short step does not leave
      the gold frame ending in empty space. */
.eeh-step-form .eeh-assessment-layout {
    min-height: 0;        /* was 600px */
}

/* 4. The content column stops being its own scroll region and its own 70%
      column. It is the shell's content, at the shell's width. */
.eeh-step-form .eeh-assessment-content {
    width: 100%;
    max-width: none;
    flex: 1 1 auto;
    overflow: visible;    /* ★ was `auto` — no panel-within-a-page scrolling */
}

/* 5. The step strip keeps its own horizontal scroll (20 steps in one row must
      scroll), but the column it lives in must not add a SECOND vertical one. */
.eeh-step-form .eeh-assessment-sidebar {
    overflow: visible;    /* ★ was `auto` */
}

/* --- the strip itself ----------------------------------------------------- */
.eeh-step-form .vertical-steps {
    flex-direction: row;
    flex-wrap: nowrap;          /* 20 steps must NOT wrap into ragged rows */
    gap: 6px;
    padding: 10px 12px;
    overflow-x: auto;           /* the strip scrolls; the PAGE must not */
    overflow-y: hidden;

    /* Keep momentum scrolling and a slim scrollbar on touch devices. */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scroll-behavior: smooth;    /* so bringing the current step into view glides */
}

.eeh-step-form .vertical-steps::-webkit-scrollbar {
    height: 6px;
}

.eeh-step-form .vertical-steps::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 999px;
}

.eeh-step-form .vertical-steps .nav-item {
    /*
     * ★ `flex-shrink: 0` IS LOAD-BEARING.
     *
     * The flex default lets children shrink, so 20 nav items in a row would each
     * compress toward zero and every label would collapse to an ellipsis. The
     * strip scrolls instead.
     */
    flex: 0 0 auto;
    margin: 0;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    gap: 6px;

    /* CT's vocabulary, unchanged from the form's own nav — the gradient rows are
       what make the strip and the dashboard's rail read as one system. */
    background: var(--bronze-metallic-gradient);
    color: var(--color-text-on-dark);
    box-shadow: none;
}

.eeh-step-form .vertical-steps .nav-item:hover {
    background: var(--bronze-metallic-gradient);
    color: var(--color-text-on-dark);
}

.eeh-step-form .vertical-steps .nav-item.current,
.eeh-step-form .vertical-steps .nav-item.active {
    /* CT's active treatment is a DIFFERENT GRADIENT, not a highlight. */
    background: var(--metallic-steel-gradient);
}

.eeh-step-form .vertical-steps .nav-icon {
    font-size: 14px;
    width: auto;
    flex-shrink: 0;
}

.eeh-step-form .vertical-steps .nav-label {
    /* Sized to the content so the strip stays scannable, but bounded so one long
       title cannot push ten steps off-screen. */
    flex: 0 0 auto;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The completed-step tick from the form's own stylesheet still applies. */
.eeh-step-form .vertical-steps .nav-item.completed .nav-icon::after {
    content: "✓";
    font-size: 9px;
    margin-left: 2px;
}

@media screen and (max-width: 768px) {
    .eeh-step-form .vertical-steps {
        padding: 8px 10px;
        gap: 5px;
    }

    .eeh-step-form .vertical-steps .nav-item {
        /* A smaller target is acceptable here because these are navigation, not
           commitments — unlike the booking slots, a mis-tap just moves a step
           and the visitor can see it happened. */
        min-height: 40px;
        padding: 7px 10px;
        font-size: 11.5px;
    }

    .eeh-step-form .vertical-steps .nav-label {
        max-width: 110px;
    }
}

/* ==========================================================================
   THE CASE GATE MADE VISIBLE (supersedes D1d)
   ==========================================================================
   D1d omitted the gated tabs when the profile was incomplete. They are now all
   shown, with the locked ones carrying a lock and answering a click with a panel
   that names the situation and the action.

   ★ THE STYLING FOLLOWS THE SAME REVERSAL. A locked tab must look like a REAL
   TAB that is not ready — not like a broken one. Dimming eight rows into
   illegibility would make a dashboard the visitor has not started yet look
   damaged, which is precisely the impression this change exists to avoid. So the
   dimming is slight, the lock is small, and the row keeps its full contrast. */

.ct-nav-item--locked {
    opacity: 0.72;
    cursor: pointer;   /* still clickable — see render_sidebar() */
}

.ct-nav-item--locked:hover {
    opacity: 0.9;
}

.ct-nav-lock {
    margin-left: auto;      /* pinned right, so the label keeps its alignment */
    font-size: 10px;
    line-height: 1;
    opacity: 0.8;
}

/* --- the rail's start CTA ------------------------------------------------- */
.eeh-nav-start {
    margin: 0 var(--spacing-sm) 12px;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: rgba(205, 133, 63, 0.08);
}

.eeh-nav-start-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    border-radius: 9px;
    background: #CD853F;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.eeh-nav-start-btn:hover {
    background: #B8742F;
    color: #fff;
}

.eeh-nav-start-btn:focus-visible {
    outline: 2px solid #CD853F;
    outline-offset: 2px;
}

.eeh-nav-start-note {
    margin: 8px 0 0;
    font-size: 11px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6);
}

/* --- the locked-tab panel ------------------------------------------------- */
.eeh-locked-tab {
    padding: 22px;
    border: 1px dashed var(--color-border);
    border-radius: var(--card-radius, 16px);
}

.eeh-locked-tab-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.eeh-locked-tab-icon {
    font-size: 20px;
    line-height: 1;
}

.eeh-locked-tab-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
}

.eeh-locked-tab-text {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
    max-width: 60ch;
}

.eeh-locked-tab-actions {
    margin: 0;
}

.eeh-locked-tab-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

/* --- the token door ------------------------------------------------------- */
/* ★ SECOND, AND VISUALLY QUIETER. The primary action on this panel is "start
   here free"; the token door answers a question only returning visitors are
   asking, so it must not compete with the default path. A rule above it does the
   separating, and it carries no button colour of its own. */
.eeh-token-door {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

.eeh-token-door-title {
    margin: 0 0 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.72);
}

.eeh-token-door-label {
    display: block;
    margin-bottom: 6px;
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.55);
}

.eeh-token-door-row {
    display: flex;
    gap: 8px;
}

.eeh-token-door-input {
    flex: 1 1 auto;
    min-width: 0;          /* the flex default would refuse to shrink */
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
    color: var(--color-text);
    font-size: 13px;
    font-family: inherit;
}

.eeh-token-door-input:focus-visible {
    outline: 2px solid #CD853F;
    outline-offset: 1px;
}

.eeh-token-door-btn {
    flex: 0 0 auto;
    padding: 10px 16px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: transparent;
    color: var(--color-text);
    font-size: 12.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

.eeh-token-door-btn:hover:not([disabled]) {
    border-color: #CD853F;
    background: rgba(205, 133, 63, 0.12);
}

.eeh-token-door-btn:focus-visible {
    outline: 2px solid #CD853F;
    outline-offset: 2px;
}

.eeh-token-door-btn[disabled] {
    opacity: 0.55;
    cursor: wait;
}

.eeh-token-door-status {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.5;
    min-height: 1em;
    color: rgba(255, 255, 255, 0.7);
}

.eeh-token-door-status--error {
    color: #F08A7A;
}

/* ==========================================================================
   PHONE / TABLET — THE SHELL AT NARROW WIDTHS (D8)
   ==========================================================================
   ★ WHY ONE CONSOLIDATED BLOCK, AFTER FIVE PASSES OF SCATTERED ONES.

   D1, D5, D6b, D7 and D4 each added a `@media (max-width: 768px)` at the moment
   they were written. That left ELEVEN identical breakpoint declarations and five
   distinct values (768, 900, 1024, 520, 480) — and no single place that answered
   "what does the dashboard look like on a phone".

   THE BREAKPOINTS ARE CT'S, NOT NEW ONES. CT resolves this with
   `@media screen and (max-width: 768px)` plus a `min-width: 769px and
   max-width: 1199px` tablet band, and uses `env(safe-area-inset-bottom)` on
   phones. Matching that vocabulary matters practically, not just tidily: a shell
   that reflows at 900px while everything around it reflows at 768px shows a
   hybrid of two designs in between, and nobody can say which is intended.

   ★ ADDITIVE ONLY. Every rule below is inside a media query, and the suite
   asserts that. Nothing here can reach a desktop viewport, so the desktop shell
   D1–D4 were verified against is unchanged at wide widths.
   ========================================================================== */

/* --- PHONE: 768px and below ------------------------------------------------ */
@media screen and (max-width: 768px) {

    /*
     * ★ THE SIDEBAR STOPS BEING A FIXED COLUMN.
     *
     * `.ct-sidebar` is `flex: 0 0 260px` + `flex-shrink: 0`. At 375px that is a
     * rail taking ~70% of the viewport with the content squeezed beside it. Nothing
     * overflows, so this is easy to miss — the failure is not a broken layout, it
     * is a desktop layout on a phone.
     *
     * The three width constraints and the flex basis must be overridden together;
     * lifting only some of them leaves the rail fixed anyway.
     */
    .ct-main-layout {
        flex-direction: column;
        margin-left: 0;
        width: 100%;
    }

    /*
     * ★ THE C1 FRAME IS NEUTRALISED HERE.
     *
     * At full width the rail is a horizontal band above the content, not a column
     * beside it — so the desktop treatment (darker surface, gold hairline on the
     * right, radius on the left corners) stops describing anything. The hairline in
     * particular would run down the OUTER right edge of the page, reading as a page
     * border. `border: 0` rather than `border-right: 0` removes any edge, so a later
     * change to which side carries the hairline cannot leave one behind.
     */
    .ct-sidebar {
        flex: none;
        width: 100%;
        min-width: 0;
        max-width: none;
        border-radius: 0;
        border: 0;
        background: transparent;
        padding: 10px 0;
    }

    /*
     * ★ THE NAV STAYS REACHABLE AND WRAPS.
     *
     * A collapsed rail that hides the navigation with no replacement leaves the
     * visitor on a dashboard they cannot move within. Stacked above the content it
     * stays reachable; `flex-wrap` keeps eight tabs from forcing a sideways scroll.
     */
    .ct-nav-menu {
        flex-direction: row;
        flex-wrap: wrap;
        padding: 0 10px;
        gap: 6px;
    }

    /* ★ 44px: the established reachable-target figure. Padding alone is not a size. */
    .ct-nav-item {
        flex: 1 1 auto;
        justify-content: center;
        min-height: 44px;
        padding: 10px 12px;
        font-size: 12px;
    }

    .ct-content {
        width: 100%;
        height: auto;
        padding: 14px 12px calc(22px + env(safe-area-inset-bottom, 0px));
    }

    /* --- the horizontal sub-tabs and the country switcher ------------------ */
    /*
     * Both are single rows of buttons on desktop. At phone width they must wrap
     * rather than push the page wider — a control that has scrolled off-screen
     * horizontally is one the visitor cannot reach at all.
     */
    .eeh-subtabs,
    .eeh-country-switch {
        gap: 5px;
        padding-bottom: 10px;
        flex-wrap: wrap;
    }

    .eeh-subtab,
    .eeh-country-chip {
        min-height: 44px;
        padding: 9px 11px;
        font-size: 11.5px;
    }

    /* --- the surfaces D5 / D6b / D7 / D4 added ----------------------------- */

    /* Multi-column grids collapse: three metric cards across 375px is unreadable. */
    .eeh-explore-grid,
    .eeh-plan-sections,
    .eeh-history,
    .eeh-doc-list,
    .ct-cards-grid,
    .ct-cards-grid-2,
    .ct-cards-grid-3 {
        grid-template-columns: 1fr;
    }

    /* The roadmap's views reuse CT tables. A table must SCROLL, not squash —
       squashed columns wrap every cell to three lines and become unreadable. */
    .eeh-cockpit-table {
        display: block;
        width: 100%;
        overflow-x: auto;
    }

    /*
     * ★ THE BOOKING PICKER IS THE MOST DAMAGING THING TO MIS-TAP.
     *
     * For a nav tab, a miss activates a neighbour and the visitor notices. For the
     * meeting slots the neighbour is a DIFFERENT APPOINTMENT, so the miss books
     * the wrong time and nobody finds out until the call. 44px and a wide slot.
     */
    .eeh-meeting-slot {
        min-width: 64px;
        min-height: 44px;
        padding: 10px 12px;
    }

    .eeh-meeting-slots {
        gap: 6px;
        flex-wrap: wrap;
    }

    .eeh-meeting-panel {
        padding: 14px;
    }

    /* The journey steps: full-width CTAs, so the target is the whole row. */
    .eeh-step {
        min-height: 0;
    }

    .eeh-step-cta,
    .eeh-action-btn {
        min-height: 44px;
        width: 100%;
        justify-content: center;
    }

    .eeh-step-wait {
        padding: 14px;
    }

    .eeh-step-score-value {
        font-size: 28px;
    }

    /* The roadmap views and the empty states are padded for a desktop card. */
    .eeh-view {
        min-height: 0;
    }

    .eeh-body-empty,
    .eeh-view-empty,
    .eeh-meeting-empty,
    .eeh-locked-tab {
        padding: 14px;
    }

    /* The token door stacks: a text input and a button side by side leaves the
       input too narrow to read what was typed. */
    .eeh-token-door-row {
        flex-direction: column;
        align-items: stretch;
    }

    .eeh-token-door-btn,
    .eeh-nav-start-btn {
        min-height: 44px;
        justify-content: center;
    }
}

/* --- TABLET: CT's 769–1199px band ------------------------------------------ */
/*
 * The sidebar keeps its column here — there is room — but narrower, and the widest
 * grids drop a track so cards do not become unreadably thin before the phone band
 * takes over. This is the band that was previously unhandled entirely.
 */
@media screen and (min-width: 769px) and (max-width: 1199px) {

    .ct-sidebar {
        flex: 0 0 200px;
        width: 200px;
        min-width: 200px;
        max-width: 200px;
    }

    .ct-nav-item {
        padding: 10px 14px;
        font-size: 12.5px;
    }

    .ct-content {
        padding: 18px 20px 26px;
    }

    /* Three tracks do not fit; two do. */
    .ct-cards-grid-3,
    .eeh-explore-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}