/* Guided tours (features/onboarding, static/onboarding.js).
   Everything is built from the app's own tokens (Bootstrap vars + the ADR-0018 functional accent
   palette --act-*), so light/dark follow the theme with no extra rules. One accent per step. */

.ob-card,
.ob-welcome-card,
.ob-toast {
    --ob-accent: var(--act-nav, var(--bs-primary));
    font-family: inherit;
    color: var(--bs-body-color);
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 14px;
    box-shadow: 0 14px 44px rgb(0 0 0 / 0.28), inset 0 3px 0 var(--ob-accent);
    line-height: 1.45;
}
[data-accent="create"] { --ob-accent: var(--act-create); }
[data-accent="ai"]     { --ob-accent: var(--act-ai); }
[data-accent="voice"]  { --ob-accent: var(--act-voice); }
[data-accent="fin"]    { --ob-accent: var(--act-fin); }
[data-accent="nav"]    { --ob-accent: var(--act-nav, var(--bs-primary)); }
[data-accent="manage"] { --ob-accent: var(--act-manage); }

/* ---- the step card (shared by the floating popover and the modal dock) ---- */
.ob-card {
    width: min(390px, 92vw);
    padding: 16px 18px 14px;
    font-size: 0.9rem;
}
.ob-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ob-chip {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 34px; height: 34px; border-radius: 10px; font-size: 20px;
    color: var(--ob-accent);
    background: color-mix(in srgb, var(--ob-accent) 16%, transparent);
}
.ob-eyebrow {
    flex: 1 1 auto; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ob-accent);
}
.ob-skip {
    flex: 0 0 auto; border: 0; background: transparent; padding: 4px 6px; border-radius: 6px;
    font-size: 0.78rem; color: var(--bs-secondary-color); cursor: pointer;
}
.ob-skip:hover, .ob-skip:focus-visible { color: var(--bs-emphasis-color); background: color-mix(in srgb, var(--bs-emphasis-color) 10%, transparent); }
.ob-title { margin: 0 0 6px; font-size: 1.12rem; font-weight: 650; letter-spacing: -0.01em; outline: none; }
.ob-body { margin: 0 0 10px; color: var(--bs-secondary-color); }
.ob-body strong, .ob-action strong, .ob-outcome strong, .ob-where strong { color: var(--bs-emphasis-color); }

.ob-action {
    display: flex; align-items: flex-start; gap: 8px; margin: 0 0 10px; padding: 8px 10px; border-radius: 10px;
    background: color-mix(in srgb, var(--ob-accent) 11%, transparent);
    border: 1px solid color-mix(in srgb, var(--ob-accent) 38%, transparent);
}
.ob-action iconify-icon { flex: 0 0 auto; margin-top: 2px; color: var(--ob-accent); }
.ob-waiting { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 0.8rem; color: var(--bs-secondary-color); }
.ob-waiting::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ob-accent);
    animation: ob-blink 1.4s ease-in-out infinite;
}
.ob-example {
    margin: 0 0 10px; padding: 8px 10px; border-radius: 10px; font-size: 0.82rem;
    background: color-mix(in srgb, var(--bs-emphasis-color) 6%, transparent);
}
.ob-example-label { display: block; margin-bottom: 2px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bs-secondary-color); }
.ob-example-text { display: block; margin-bottom: 6px; font-style: italic; }
.ob-example .btn { --bs-btn-padding-y: 0.15rem; --bs-btn-font-size: 0.78rem; }
.ob-outcome, .ob-where { margin: 0 0 8px; font-size: 0.82rem; }
.ob-outcome { padding-left: 10px; border-left: 2px solid var(--act-create); }
.ob-outcome strong { color: var(--act-create); }
.ob-where { color: var(--bs-secondary-color); }
.ob-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.ob-dots { display: flex; gap: 4px; }
.ob-dots span { width: 16px; height: 5px; border-radius: 4px; background: var(--bs-border-color); }
.ob-dots span.on { background: var(--ob-accent); }
.ob-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-left: auto; }   /* three buttons wrap under the dots, right-aligned, never squeezed */
.ob-nav .btn { white-space: nowrap; }
.ob-nav-wide { flex: 1 1 100%; }                       /* a checkpoint's three buttons get their own row, Back on the left */
.ob-nav-wide { gap: 5px; flex-wrap: nowrap; }
.ob-nav-wide .btn { --bs-btn-padding-x: 0.5rem; --bs-btn-font-size: 0.8rem; }
.ob-nav-wide #ob-back { margin-right: auto; }
.ob-nav .btn { --bs-btn-padding-y: 0.25rem; --bs-btn-padding-x: 0.7rem; --bs-btn-font-size: 0.82rem; }
.ob-nav .btn-primary { --bs-btn-bg: var(--ob-accent); --bs-btn-border-color: var(--ob-accent); --bs-btn-hover-bg: color-mix(in srgb, var(--ob-accent) 85%, black); --bs-btn-hover-border-color: color-mix(in srgb, var(--ob-accent) 85%, black); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; }
.ob-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- floating popover (driver.js): the card replaces driver's own chrome ---- */
.driver-popover.ob-popover { padding: 0; background: transparent; box-shadow: none; max-width: none; min-width: 0; border-radius: 14px; }
.driver-popover.ob-popover .driver-popover-title,
.driver-popover.ob-popover .driver-popover-footer,
.driver-popover.ob-popover .driver-popover-close-btn { display: none; }
.driver-popover.ob-popover .driver-popover-description { margin: 0; }
.ob-popover .driver-popover-arrow-side-left   { border-left-color: var(--bs-body-bg); }
.ob-popover .driver-popover-arrow-side-right  { border-right-color: var(--bs-body-bg); }
.ob-popover .driver-popover-arrow-side-top    { border-top-color: var(--bs-body-bg); }
.ob-popover .driver-popover-arrow-side-bottom { border-bottom-color: var(--bs-body-bg); }

/* ---- the target ring (both presenters) ---- */
.ob-target {
    outline: 2px solid var(--ob-ring, var(--act-nav, var(--bs-primary))) !important;
    outline-offset: 3px;
    border-radius: 8px;
    animation: ob-ring 1.5s ease-out 2;
}
.ob-target[data-ob-accent="create"] { --ob-ring: var(--act-create); }
.ob-target[data-ob-accent="ai"]     { --ob-ring: var(--act-ai); }
.ob-target[data-ob-accent="voice"]  { --ob-ring: var(--act-voice); }

/* ---- the dock: the card inside a Bootstrap modal (inside its focus trap) ---- */
.ob-dock {
    position: sticky; top: 0; z-index: 5; margin: 0; padding: 0 1rem 0.25rem;
    background: var(--bs-body-bg);                /* stays visible if the modal scrolls */
}
.ob-dock .ob-card { width: auto; max-width: none; margin: 0.75rem 0 0.25rem; box-shadow: inset 0 3px 0 var(--ob-accent); }
.ob-dock .ob-card .ob-body { margin-bottom: 8px; }

/* ---- welcome card + toasts ---- */
.ob-backdrop {
    position: fixed; inset: 0; z-index: 1085; display: flex; align-items: center; justify-content: center;
    padding: 16px; background: rgb(0 0 0 / 0.5); animation: ob-fade 0.2s ease-out;
}
.ob-welcome-card { width: min(460px, 100%); padding: 28px 28px 20px; text-align: center; }
.ob-welcome-icon { font-size: 44px; line-height: 1; margin-bottom: 8px; }
.ob-welcome-card h2 { margin: 0 0 8px; font-size: 1.45rem; font-weight: 700; letter-spacing: -0.02em; outline: none; }
.ob-welcome-card p { margin: 0 0 18px; color: var(--bs-secondary-color); }
.ob-welcome-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ob-welcome-actions .btn-primary { --bs-btn-bg: var(--ob-accent); --bs-btn-border-color: var(--ob-accent); --bs-btn-hover-bg: color-mix(in srgb, var(--ob-accent) 85%, black); --bs-btn-hover-border-color: color-mix(in srgb, var(--ob-accent) 85%, black); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; padding-inline: 1.4rem; }
.ob-welcome-links { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 10px; }
.ob-welcome-links .btn-link { font-size: 0.82rem; color: var(--bs-secondary-color); }
.ob-welcome-hint { margin: 8px 0 0 !important; font-size: 0.75rem; }

.ob-toast {
    position: fixed; right: 18px; bottom: 18px; z-index: 1090; width: min(360px, calc(100vw - 36px));
    padding: 14px 16px 12px; animation: ob-rise 0.3s ease-out;
}
.ob-toast h3 { margin: 0 0 4px; font-size: 1rem; font-weight: 650; }
.ob-toast p { margin: 0 0 10px; font-size: 0.86rem; color: var(--bs-secondary-color); }
.ob-toast-actions { display: flex; gap: 8px; justify-content: flex-end; }
.ob-toast .btn { --bs-btn-padding-y: 0.25rem; --bs-btn-font-size: 0.82rem; }
.ob-toast .btn-primary { --bs-btn-bg: var(--ob-accent); --bs-btn-border-color: var(--ob-accent); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; }

/* ---- card action ("add a sample") and the "what next?" cards ---- */
.ob-card-action { margin: 0 0 10px; }
.ob-card-action .btn { --bs-btn-padding-y: 0.2rem; --bs-btn-font-size: 0.8rem; }
.ob-waiting-done { margin: 0 0 10px; font-size: 0.8rem; color: var(--act-create); font-weight: 600; }
.ob-next-guides { margin: 0 0 16px; text-align: left; }
.ob-next-guides-title { margin-bottom: 6px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bs-secondary-color); }
.ob-next-guide {
    display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 6px; padding: 8px 10px; text-align: left;
    color: var(--bs-body-color); background: transparent; border: 1px solid var(--bs-border-color); border-radius: 10px; cursor: pointer;
}
.ob-next-guide:hover, .ob-next-guide:focus-visible { background: color-mix(in srgb, var(--ob-accent) 10%, transparent); border-color: var(--ob-accent); }
.ob-next-guide .ob-chip { width: 30px; height: 30px; font-size: 17px; }
.ob-next-guide-text { display: flex; flex-direction: column; line-height: 1.25; }
.ob-next-guide-text small { color: var(--bs-secondary-color); }
.ob-guide-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-top: 8px; }
.ob-guide-card { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--bs-border-color); border-radius: 12px; box-shadow: inset 0 3px 0 var(--ob-accent, var(--act-nav)); }
.ob-guide-card .ob-chip { width: 30px; height: 30px; font-size: 17px; }
.ob-guide-card h5 { margin: 0; font-size: 0.98rem; font-weight: 650; }
.ob-guide-card p { margin: 0; font-size: 0.84rem; color: var(--bs-secondary-color); flex: 1; }
.ob-guide-card .badge { align-self: flex-start; }

/* ---- the Help modal's "First steps" tab ---- */
.ob-guide-h { font-size: 1.15rem; font-weight: 650; margin: 0.25rem 0 0.5rem; }
.ob-guide-concept { padding-left: 12px; border-left: 3px solid var(--act-nav, var(--bs-primary)); }
.ob-guide-example { padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--bs-emphasis-color) 6%, transparent); }
.ob-guide-prompt { font-style: italic; }
.ob-guide-table td, .ob-guide-table th { vertical-align: top; }
.ob-guide-table td p { margin-bottom: 0; }

/* ---- the help icon, until it has been opened once ---- */
#help_btn.ob-pulse { animation: ob-ring-nav 1.6s ease-out infinite; border-radius: 8px; }

@keyframes ob-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ob-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ob-blink { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes ob-ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ob-ring, var(--bs-primary)) 55%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }
@keyframes ob-ring-nav { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--act-nav, var(--bs-primary)) 55%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }

@media (prefers-reduced-motion: reduce) {
    .ob-target, #help_btn.ob-pulse, .ob-toast, .ob-backdrop, .ob-waiting::before { animation: none !important; }
}
@media print { .ob-card, .ob-backdrop, .ob-toast { display: none !important; } }

/* ingestion progress inside the waiting card */
.ob-progress { margin: -2px 0 10px; }
.ob-progress-bar { height: 6px; border-radius: 3px; background: var(--ob-accent); transition: width .4s ease; }
.ob-progress { position: relative; }
.ob-progress::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; border-radius: 3px; background: var(--bs-secondary-bg); }
.ob-progress-bar { position: relative; }
.ob-progress-indeterminate .ob-progress-bar { animation: ob-indeterminate 1.4s ease-in-out infinite alternate; }
.ob-progress-label { margin-top: 4px; font-size: 0.75rem; color: var(--bs-secondary-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes ob-indeterminate { from { transform: translateX(-60%); } to { transform: translateX(160%); } }
@media (prefers-reduced-motion: reduce) { .ob-progress-indeterminate .ob-progress-bar { animation: none !important; } }