/* ==========================================================================
   ONBOARDING — the welcome screen and the guided tour (js/onboarding.js),
   in the landing's look: neutral black surfaces, deep-cyan accent, Plus
   Jakarta headings, the metal pill button. The tour is driver.js; its
   popover gets .emx-tour, its dimmed overlay is set in onboarding.js.
   ========================================================================== */
.emx-onb, .driver-popover.emx-tour {
    --onb-bg: #0a0a0b;
    --onb-surface: #141417;
    --onb-line: rgba(255, 255, 255, .08);
    --onb-line-2: rgba(255, 255, 255, .14);
    --onb-text: #f4f3f0;
    --onb-text-2: #a3a3a7;
    --onb-text-3: #8a8a90;
    --onb-accent: #3cbfda;
    --onb-accent-base: #1fa4c2;
    --onb-accent-ink: #02151b;
    --onb-tint: rgba(31, 164, 194, .08);
    --onb-tint-2: rgba(31, 164, 194, .14);
    --onb-btn-fill: linear-gradient(180deg, #63d4e7 0%, #27abc8 55%, #1689a7 100%);
    --onb-btn-shine: rgba(225, 250, 255, .55);
    --onb-btn-shadow: rgba(31, 164, 194, .5);
    --onb-ease: cubic-bezier(.22, 1, .36, 1);
    --onb-head: 'EMX Jakarta', 'Plus Jakarta Sans', system-ui, sans-serif;
    --onb-body: 'EMX Inter', 'Inter', system-ui, 'Segoe UI', Arial, sans-serif;
}

/* ---------------- welcome ---------------- */
.emx-onb {
    position: fixed; inset: 0; z-index: 100050;
    display: flex; align-items: center; justify-content: center;
    padding: 24px; overflow-y: auto;
    background: rgba(5, 5, 6, .74);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    font-family: var(--onb-body); color: var(--onb-text);
    -webkit-font-smoothing: antialiased;
    opacity: 0; transition: opacity .35s var(--onb-ease);
}
.emx-onb.is-open { opacity: 1; }
.emx-onb-panel {
    position: relative; width: min(640px, 100%);
    padding: clamp(28px, 5vw, 48px);
    background: radial-gradient(ellipse 75% 55% at 0% 0%, var(--onb-tint), transparent 60%), var(--onb-surface);
    border: 1px solid var(--onb-line-2); border-radius: 24px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
    transform: translateY(18px) scale(.98); transition: transform .5s var(--onb-ease);
}
.emx-onb.is-open .emx-onb-panel { transform: none; }
.emx-onb-eyebrow {
    margin: 0 0 14px; font-size: .72rem; font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; color: var(--onb-accent);
}
.emx-onb-title {
    margin: 0; font-family: var(--onb-head); font-weight: 700;
    font-size: clamp(1.9rem, 4vw, 2.5rem); line-height: 1.08; letter-spacing: -.035em;
    color: var(--onb-text); text-transform: none;
}
.emx-onb-title::after { content: '.'; color: var(--onb-accent-base); }
.emx-onb-sub { margin: 14px 0 0; max-width: 46ch; font-size: 1rem; line-height: 1.6; color: var(--onb-text-2); }
.emx-onb-topics {
    list-style: none; margin: 28px 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.emx-onb-topics li {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start;
    padding: 16px; border: 1px solid var(--onb-line); border-radius: 16px; background: var(--onb-bg);
    opacity: 0; transform: translateY(10px);
    transition: opacity .5s var(--onb-ease), transform .5s var(--onb-ease), border-color .3s;
    transition-delay: calc(.12s + var(--i) * .06s);
}
.emx-onb.is-open .emx-onb-topics li { opacity: 1; transform: none; }
.emx-onb-topics li:hover { border-color: var(--onb-line-2); }
.emx-onb-icon {
    width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
    background: var(--onb-tint-2); color: var(--onb-accent); font-size: 15px;
}
.emx-onb-topics strong {
    display: block; font-family: var(--onb-head); font-weight: 700; font-size: 1rem;
    letter-spacing: -.015em; color: var(--onb-text);
}
.emx-onb-topics span:not(.emx-onb-icon) { display: block; margin-top: 4px; font-size: .88rem; line-height: 1.5; color: var(--onb-text-2); }
.emx-onb-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.emx-onb-btn {
    position: relative; isolation: isolate; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 52px; padding: 0 26px; border-radius: 999px; border: 0; cursor: pointer;
    font-family: var(--onb-body); font-weight: 600; font-size: .97rem; letter-spacing: -.005em; line-height: 1;
    transition: transform .4s var(--onb-ease), box-shadow .4s var(--onb-ease), border-color .2s, color .2s;
}
.emx-onb-btn:active { transform: scale(.98); }
.emx-onb-btn:focus-visible { outline: 2px solid var(--onb-accent); outline-offset: 3px; }
.emx-onb-primary {
    color: var(--onb-accent-ink); background: var(--onb-btn-fill);
    box-shadow: inset 0 1px 0 var(--onb-btn-shine), inset 0 -1px 0 rgba(0, 40, 55, .35), 0 10px 30px -12px var(--onb-btn-shadow);
}
.emx-onb-primary::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(105deg, transparent 30%, rgba(235, 252, 255, .55) 50%, transparent 70%);
    transform: translateX(-120%); transition: transform .9s var(--onb-ease);
}
.emx-onb-primary:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 var(--onb-btn-shine), inset 0 -1px 0 rgba(0, 40, 55, .35), 0 16px 36px -14px var(--onb-btn-shadow); }
.emx-onb-primary:hover::after { transform: translateX(120%); }
.emx-onb-primary i { font-size: 13px; transition: transform .4s var(--onb-ease); }
.emx-onb-primary:hover i { transform: translateX(3px); }
.emx-onb-ghost { color: var(--onb-text); background: rgba(255, 255, 255, .035); border: 1px solid var(--onb-line-2); }
.emx-onb-ghost:hover { border-color: var(--onb-accent-base); color: var(--onb-accent); transform: translateY(-2px); }
@media (max-width: 560px) {
    .emx-onb-topics { grid-template-columns: 1fr; }
    .emx-onb-actions .emx-onb-btn { flex: 1 1 100%; }
}

/* ---------------- tour popover (driver.js) ---------------- */
.driver-popover.emx-tour {
    position: fixed; overflow: hidden;
    min-width: 280px; max-width: 360px;
    padding: 22px 22px 18px;
    background: radial-gradient(ellipse 80% 60% at 0% 0%, var(--onb-tint), transparent 60%), var(--onb-surface);
    color: var(--onb-text);
    border: 1px solid var(--onb-line-2); border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
    font-family: var(--onb-body);
}
.driver-popover.emx-tour .emx-tour-bar {
    position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--onb-line);
}
.driver-popover.emx-tour .emx-tour-bar span {
    display: block; height: 100%; background: var(--onb-btn-fill);
    transition: width .5s var(--onb-ease);
}
.driver-popover.emx-tour .driver-popover-title {
    margin: 0; padding-right: 26px;
    font-family: var(--onb-head); font-weight: 700; font-size: 1.15rem; line-height: 1.25;
    letter-spacing: -.02em; color: var(--onb-text); text-transform: none;
}
.driver-popover.emx-tour .driver-popover-description {
    margin-top: 8px; font-family: var(--onb-body); font-size: .92rem; line-height: 1.55;
    color: var(--onb-text-2); font-weight: 400;
}
/* the × is drawn from two lines: the font glyph sits off-centre in the circle */
.driver-popover.emx-tour .driver-popover-close-btn {
    top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%;
    box-sizing: border-box; padding: 0;
    font-size: 0; color: var(--onb-text-3);
    background: transparent; border: 1px solid var(--onb-line);
    transition: background-color .2s, border-color .2s, color .2s;
}
.driver-popover.emx-tour .driver-popover-close-btn::before,
.driver-popover.emx-tour .driver-popover-close-btn::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 12px; height: 1.5px; border-radius: 1px; background: currentColor;
}
.driver-popover.emx-tour .driver-popover-close-btn::before { transform: translate(-50%, -50%) rotate(45deg); }
.driver-popover.emx-tour .driver-popover-close-btn::after { transform: translate(-50%, -50%) rotate(-45deg); }
.driver-popover.emx-tour .driver-popover-close-btn:hover { background: var(--onb-tint-2); border-color: rgba(60, 191, 218, .35); color: var(--onb-accent); }
.driver-popover.emx-tour .driver-popover-close-btn:focus-visible { outline: 2px solid var(--onb-accent); outline-offset: 2px; }
.driver-popover.emx-tour .driver-popover-footer { margin-top: 18px; align-items: center; gap: 10px; }
.driver-popover.emx-tour .driver-popover-progress-text {
    font-size: .72rem; font-weight: 600; letter-spacing: .14em; color: var(--onb-text-3);
}
.driver-popover.emx-tour .driver-popover-navigation-btns { gap: 8px; }
.driver-popover.emx-tour .driver-popover-footer button {
    font-family: var(--onb-body); font-size: .85rem; font-weight: 600; letter-spacing: -.005em;
    text-shadow: none; line-height: 1; padding: 10px 16px; border-radius: 999px; cursor: pointer;
    transition: transform .3s var(--onb-ease), border-color .2s, color .2s, box-shadow .3s var(--onb-ease);
}
.driver-popover.emx-tour .driver-popover-prev-btn {
    color: var(--onb-text); background: rgba(255, 255, 255, .035); border: 1px solid var(--onb-line-2);
}
.driver-popover.emx-tour .driver-popover-prev-btn:hover { border-color: var(--onb-accent-base); color: var(--onb-accent); }
.driver-popover.emx-tour .driver-popover-next-btn {
    color: var(--onb-accent-ink); background: var(--onb-btn-fill); border: 0;
    box-shadow: inset 0 1px 0 var(--onb-btn-shine), inset 0 -1px 0 rgba(0, 40, 55, .35), 0 8px 22px -10px var(--onb-btn-shadow);
}
.driver-popover.emx-tour .driver-popover-next-btn:hover { transform: translateY(-1px); }
.driver-popover.emx-tour .driver-popover-footer button:focus-visible { outline: 2px solid var(--onb-accent); outline-offset: 2px; }
.driver-popover.emx-tour .driver-popover-btn-disabled { opacity: .35; pointer-events: none; }
/* the arrow takes the panel's colour on whichever side it sits */
.driver-popover.emx-tour .driver-popover-arrow-side-left { border-left-color: var(--onb-surface); }
.driver-popover.emx-tour .driver-popover-arrow-side-right { border-right-color: var(--onb-surface); }
.driver-popover.emx-tour .driver-popover-arrow-side-top { border-top-color: var(--onb-surface); }
.driver-popover.emx-tour .driver-popover-arrow-side-bottom { border-bottom-color: var(--onb-surface); }
/* driver.css clips the parent of the highlighted element
   (:not(body):has(> .driver-active-element) { overflow: hidden !important }).
   In the sidebar that parent is a flex item: clipped, it shrinks to nothing
   and the next section slides over the one being shown. These keep their
   own (visible) overflow. */
.driver-active .sidebar > .control-group:has(> .driver-active-element),
.driver-active .sidebar > .brand:has(> .driver-active-element),
.driver-active #emarox-tools-panel:has(> .driver-active-element) { overflow: visible !important; }
/* the highlighted element keeps a thin accent ring */
.driver-active .driver-active-element { outline: 2px solid rgba(60, 191, 218, .55); outline-offset: 4px; border-radius: 10px; }
/* clicks on it are swallowed (onboarding.js), so it should not look clickable;
   the tools tab is the exception, pressing it opens the panel */
.driver-active .driver-active-element:not(#tools-trapezoid-toggle),
.driver-active .driver-active-element:not(#tools-trapezoid-toggle) * { cursor: default !important; }

@media (prefers-reduced-motion: reduce) {
    .emx-onb, .emx-onb-panel, .emx-onb-topics li, .emx-onb-btn, .emx-tour-bar span { transition: none; }
}