/* ============================================================================
   Onboarding Tour (coach marks) — first-run interface guide
   Theme-aware: reuses the app's CSS custom properties (light/dark skins).
   ========================================================================== */

.ist-tour {
    position: fixed;
    inset: 0;
    z-index: 100001;
    pointer-events: none; /* only the spotlight + card capture events */
    font-family: var(--font-ui, system-ui, sans-serif);
    animation: ist-fade-in 0.25s ease;
}

.ist-tour.ist-closing {
    animation: ist-fade-out 0.2s ease forwards;
}

/* --- Spotlight: transparent box whose huge box-shadow dims everything else -- */
.ist-spotlight {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-radius: 10px;
    pointer-events: auto; /* blocks interaction with the app underneath */
    box-shadow:
        0 0 0 100vmax color-mix(in srgb, var(--text-primary, #1d1b17) 46%, transparent),
        0 0 0 2px var(--primary-color, #211f1b),
        0 0 0 5px color-mix(in srgb, var(--primary-ink, #faf8f4) 22%, transparent),
        0 0 30px 6px color-mix(in srgb, var(--primary-ink, #faf8f4) 16%, transparent);
    transition:
        top 0.6s cubic-bezier(0.65, 0, 0.35, 1),
        left 0.6s cubic-bezier(0.65, 0, 0.35, 1),
        width 0.6s cubic-bezier(0.65, 0, 0.35, 1),
        height 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Pulsing ring to draw the eye to the highlighted control */
.ist-spotlight::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary-ink, #faf8f4) 45%, transparent);
    animation: ist-pulse 2s ease-out infinite;
}

/* Centered (welcome / finish) steps: full dim, no ring, no pulse */
.ist-spotlight.ist-spot-plain {
    box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--text-primary, #1d1b17) 52%, transparent);
}
.ist-spotlight.ist-spot-plain::after {
    display: none;
}

/* --- First-visit offer ------------------------------------------------------
   A quiet card under the header "?" (OnboardingTour._showOffer): no dimming,
   no focus change, a soft fade. The tour starts only on "Pokaži vodič". */
.ist-offer {
    position: fixed;
    z-index: 1080; /* above header (1070) and toolbar, below the tour itself */
    width: min(320px, calc(100vw - 24px));
    padding: 16px 18px 14px;
    background: var(--bg-white, #fff);
    color: var(--text-primary, #1a1a1a);
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--shadow-lg, 0 18px 44px rgba(15, 12, 6, 0.13));
    font-family: var(--font-ui, system-ui, sans-serif);
    animation: ist-offer-in 0.22s ease both;
}

.ist-offer.ist-offer-closing {
    animation: ist-fade-out 0.16s ease forwards;
}

@keyframes ist-offer-in {
    from { opacity: 0; translate: 0 -4px; }
    to { opacity: 1; translate: 0 0; }
}

.ist-offer-arrow {
    position: absolute;
    top: -6px;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    background: inherit;
    border-left: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
    border-top: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
    transform: rotate(45deg);
}

.ist-offer-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--text-muted, #777);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.ist-offer-close:hover {
    background: var(--bg-hover, rgba(0, 0, 0, 0.05));
    color: var(--text-primary, #1a1a1a);
}

.ist-offer-title {
    margin: 0 28px 4px 0;
    font-size: 14px;
    font-weight: 600;
}

.ist-offer-body {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary, #555);
}

.ist-offer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}

.ist-offer .ist-btn {
    padding: 7px 14px;
}

@media (pointer: coarse) {
    .ist-offer-close {
        width: 44px;
        height: 44px;
        top: 0;
        right: 0;
    }

    .ist-offer .ist-btn {
        min-height: 44px;
    }
}

body.focus-mode .ist-offer {
    display: none;
}

/* --- Tooltip card ---------------------------------------------------------- */
.ist-card {
    position: fixed;
    width: min(470px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    background: var(--bg-white, #fff);
    color: var(--text-primary, #1a1a1a);
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
    border-radius: var(--radius-lg, 16px);
    box-shadow:
        0 18px 44px rgba(15, 12, 6, 0.22),
        0 6px 14px rgba(15, 12, 6, 0.10);
    padding: 20px 20px 16px;
    pointer-events: auto;
    /* Step changes (OnboardingTour._renderStep): the shell glides with the
       spotlight (same 0.32s curve); appear/disappear is a short fade + scale.
       `scale`/`translate` are separate properties, so they compose with the
       centred card's inline translate(-50%, -50%). */
    transition:
        top 0.6s cubic-bezier(0.65, 0, 0.35, 1),
        left 0.6s cubic-bezier(0.65, 0, 0.35, 1),
        opacity 0.18s ease,
        scale 0.2s cubic-bezier(0.2, 0, 0, 1),
        translate 0.2s cubic-bezier(0.2, 0, 0, 1);
}

/* Never taller than the screen: title, × and the Natrag/Dalje bar always
   stay visible; only the text + illustration scroll (.ist-scroll). On a
   phone the long steps used to push "Dalje" and × off screen. */
.ist-card {
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 24px);
}

.ist-head,
.ist-foot {
    flex-shrink: 0;
}

.ist-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Height animates only while a pointed → pointed step resizes the shell */
.ist-card.ist-resizing {
    transition:
        top 0.6s cubic-bezier(0.65, 0, 0.35, 1),
        left 0.6s cubic-bezier(0.65, 0, 0.35, 1),
        height 0.6s cubic-bezier(0.65, 0, 0.35, 1),
        opacity 0.18s ease,
        scale 0.2s cubic-bezier(0.2, 0, 0, 1),
        translate 0.2s cubic-bezier(0.2, 0, 0, 1);
}

/* Appearing / disappearing card */
.ist-card.ist-out {
    opacity: 0;
    scale: 0.96;
    translate: 0 6px;
    pointer-events: none;
}

/* Reposition instantly (used while the card is invisible) */
.ist-card.ist-moving {
    transition: none !important;
}

/* Contents cross-fade while the shell glides; the pointer arrow stays */
.ist-card > :not(.ist-card-arrow) {
    transition: opacity 0.16s ease;
}
.ist-card.ist-content-out > :not(.ist-card-arrow) {
    opacity: 0;
    pointer-events: none; /* invisible controls aren't clickable mid-transition */
}

/* Left accent stripe — echoes the confirm-dialog / error-popup language.
   Drawn as the left border of a card-sized overlay with the card's radius, so
   it follows the rounded corners (a 4px-wide box with a 16px radius rendered
   as a flat bar sticking out past the curve). */
.ist-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-left: 4px solid var(--primary-color, #211f1b);
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
}

.ist-card.ist-centered {
    width: min(440px, calc(100vw - 32px));
    text-align: center;
    padding: 28px 26px 22px;
}

/* The keyboard-shortcuts step carries a two-column list — give it 100px more room */
.ist-card.ist-centered:has(.ist-shortcuts) {
    width: min(540px, calc(100vw - 32px));
}

/* Arrow that points from the card to the highlighted control */
.ist-card-arrow {
    position: absolute;
    width: 14px;
    height: 14px;
    background: var(--bg-white, #fff);
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
    transform: rotate(45deg);
    display: none;
}
.ist-card-arrow.ist-arrow-top {
    top: -8px;
    border-right: none;
    border-bottom: none;
    margin-left: -7px;
}
.ist-card-arrow.ist-arrow-bottom {
    bottom: -8px;
    border-left: none;
    border-top: none;
    margin-left: -7px;
    background: var(--bg-secondary, #f5f2ec);
}

.ist-skip {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-muted, #888);
    font-size: 22px;
    line-height: 1;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.ist-skip:hover {
    background: var(--bg-hover, rgba(0, 0, 0, 0.06));
    color: var(--text-primary, #1a1a1a);
}

.ist-title {
    margin: 0;
    font-size: 17px;
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--text-primary, #1a1a1a);
}
.ist-centered .ist-title {
    font-size: 21px;
}

/* Header row: tinted icon + title (icon stacks above title on centered steps) */
.ist-head {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 12px;
    padding-right: 26px; /* clear the skip × */
}
.ist-centered .ist-head {
    flex-direction: column;
    gap: 13px;
    padding-right: 0;
    margin-bottom: 14px;
}
.ist-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md, 11px);
    background: var(--primary-light, #efece5);
    color: var(--primary-color, #211f1b);
}
.ist-icon:empty {
    display: none;
}
.ist-centered .ist-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-lg, 16px);
}
.ist-icon svg {
    width: 21px;
    height: 21px;
}
.ist-centered .ist-icon svg {
    width: 26px;
    height: 26px;
}

.ist-body {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--text-secondary, #4a4a4a);
}
.ist-body strong {
    color: var(--text-primary, #1a1a1a);
    font-weight: 700;
}

/* Inline keyboard-key chips */
.ist-key {
    display: inline-block;
    padding: 1px 7px;
    margin: 0 1px;
    font-family: var(--font-ui, system-ui, sans-serif);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--text-primary, #1a1a1a);
    background: var(--bg-gray, #f2f0ec);
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.14));
    border-bottom-width: 2px;
    border-radius: 5px;
    white-space: nowrap;
}

/* Keyboard-shortcuts step: two-column grid of key chips + descriptions */
.ist-shortcuts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 7px 14px;
    align-items: baseline;
    margin-top: 12px;
    text-align: left;
}
.ist-shortcuts .ist-sc-group {
    grid-column: 1 / -1;
    margin-top: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted, #888);
}
.ist-shortcuts .ist-sc-group:first-child {
    margin-top: 0;
}
.ist-shortcuts .ist-sc-keys {
    justify-self: end;
    white-space: nowrap;
}
.ist-shortcuts .ist-sc-desc {
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--text-secondary, #4a4a4a);
}

/* --- Illustrations --------------------------------------------------------- */
.ist-illus:empty {
    display: none;
}
.ist-demo {
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--bg-gray, #f7f5f1);
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
    border-radius: 10px;
    font-family: Georgia, 'Merriweather', serif;
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-primary, #1a1a1a);
}
.ist-u {
    padding: 1px 2px;
    border-radius: 3px;
}
/* Match the real editor decorations: a soft coloured background + the
   category's underline shape (spelling wavy, grammar solid, info dashed). */
.ist-u-red,
.ist-u-amber,
.ist-u-blue {
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    text-decoration-skip-ink: none;
}
.ist-u-red {
    background: var(--err-spelling-soft, rgba(217, 54, 54, 0.12));
    text-decoration-style: wavy; /* fallback: no CSS masks */
    text-decoration-color: var(--err-spelling, #d93636);
}
/* Same wave as the editor (--err-wave-mask in ispravime-v3.css) */
@supports (mask-image: none) or (-webkit-mask-image: none) {
    .ist-u-red {
        position: relative;
        text-decoration: none;
    }
    .ist-u-red::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: -2px;
        height: 4px;
        background-color: var(--err-spelling, #d93636);
        -webkit-mask: var(--err-wave-mask);
        mask: var(--err-wave-mask);
    }
}
.ist-u-amber {
    background: var(--err-grammar-soft, rgba(194, 125, 24, 0.13));
    text-decoration-style: solid;
    text-decoration-color: var(--err-grammar, #c27d18);
}
.ist-u-blue {
    background: var(--err-info-soft, rgba(47, 122, 232, 0.12));
    text-decoration-style: dashed;
    text-decoration-color: var(--err-info, #2f7ae8);
}

.ist-legend {
    display: flex;
    gap: 14px;
    margin-top: 10px;
    font-family: var(--font-ui, system-ui, sans-serif);
    font-size: 12px;
    color: var(--text-secondary, #666);
}
.ist-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Correction-popup mockup */
.ist-popup {
    margin-top: 12px;
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.12));
    border-left: 4px solid var(--err-spelling, #c8362a);
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-white, #fff);
    font-family: var(--font-ui, system-ui, sans-serif);
    box-shadow: 0 4px 14px rgba(15, 12, 6, 0.1);
}
.ist-popup-head {
    padding: 9px 14px 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase; /* same as the real popup header */
    color: var(--err-spelling-text, #b42222);
}
.ist-popup-msg {
    padding: 4px 14px 10px;
    font-size: 13px;
    color: var(--text-secondary, #555);
}
.ist-popup-sugs {
    display: flex;
    gap: 8px;
    padding: 0 14px 12px;
}
.ist-sug {
    padding: 5px 12px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    background: var(--bg-white, #fff);
    color: var(--text-primary, #1d1b17);
    border: 1px solid var(--border-color, #e9e5dd);
}
.ist-sug:first-child {
    background: var(--primary-color, #2962d9);
    color: var(--primary-ink, #fff);
    border-color: var(--primary-color, #2962d9);
}

/* Inline text button in a step body ("odmah sada" → full tour) */
.ist-link {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: var(--text-primary, #1a1a1a);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.ist-link:hover { color: var(--primary-color, #211f1b); }
.ist-link:focus-visible {
    outline: 2px solid var(--primary-color, #211f1b);
    outline-offset: 2px;
    border-radius: 3px;
}

/* --- Footer: progress dots + actions --------------------------------------- */
.ist-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
}
.ist-centered .ist-foot {
    justify-content: center;
    flex-direction: column-reverse;
    gap: 16px;
}

/* Anchored steps: turn the footer into a dialog-style action bar that
   bleeds to the card edges (matches .cdlg-actions). */
.ist-card:not(.ist-centered) .ist-foot {
    margin: 18px -20px -16px;
    padding: 13px 18px;
    border-top: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
    background: var(--bg-secondary, #f5f2ec);
    border-radius: 0 0 var(--radius-lg, 16px) var(--radius-lg, 16px);
}

.ist-dots {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.ist-dot {
    position: relative;
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--border-color, rgba(0, 0, 0, 0.18));
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: background 0.2s ease, transform 0.2s ease;
}
/* Enlarge the click/tap target without changing the visual dot size */
.ist-dot::before {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
}
.ist-dot:hover {
    background: color-mix(in srgb, var(--primary-color, #b9770f) 60%, var(--border-color, #ccc));
    transform: scale(1.25);
}
.ist-dot:focus-visible {
    outline: 2px solid var(--primary-color, #b9770f);
    outline-offset: 2px;
}
.ist-dot.is-done { background: color-mix(in srgb, var(--primary-color, #b9770f) 45%, transparent); }
.ist-dot.is-active {
    background: var(--primary-color, #b9770f);
    transform: scale(1.4);
}

/* Tooltip shown on hover/focus of a dot */
.ist-dot-tip {
    position: absolute;
    bottom: calc(100% + 9px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: 4px 9px;
    background: var(--text-primary, #1a1a1a);
    color: var(--bg-white, #fff);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(15, 12, 6, 0.22);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.14s ease, transform 0.14s ease;
    z-index: 3;
}
/* Little downward pointer under the tooltip */
.ist-dot-tip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--text-primary, #1a1a1a);
}
.ist-dot:hover .ist-dot-tip,
.ist-dot:focus-visible .ist-dot-tip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.ist-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.ist-btn {
    padding: 9px 16px;
    border-radius: var(--radius-md, 11px);
    font-size: 13.5px;
    font-weight: 550;
    cursor: pointer;
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.14));
    background: var(--bg-white, #fff);
    color: var(--text-secondary, #5f5b52);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.05s ease;
}
.ist-btn:hover {
    background: var(--bg-hover, rgba(0, 0, 0, 0.05));
    color: var(--text-primary, #1a1a1a);
    border-color: var(--border-hover, #d6d1c6);
}
.ist-btn:active {
    transform: translateY(1px);
}
.ist-btn-primary {
    background: var(--primary-color, #211f1b);
    border-color: var(--primary-color, #211f1b);
    color: var(--primary-ink, #faf8f4);
}
.ist-btn-primary:hover {
    background: var(--primary-hover, #38342d);
    border-color: var(--primary-hover, #38342d);
    color: var(--primary-ink, #faf8f4);
}

/* --- Animations ------------------------------------------------------------ */
@keyframes ist-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes ist-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}
@keyframes ist-card-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ist-card-in-center {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)) scale(0.98); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes ist-pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary-color, #b9770f) 55%, transparent); }
    70% { box-shadow: 0 0 0 14px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* Reduced motion: no travel, scaling or pulsing — soft fades instead of jumps.
   The overlay still fades in/out; the card cross-fades (opacity only); the
   cutout relocates instantly while the dim briefly lightens (.ist-spot-dip). */
@media (prefers-reduced-motion: reduce) {
    .ist-spotlight::after {
        animation: none !important;
    }
    .ist-spotlight {
        transition: box-shadow 0.17s ease !important;
    }
    .ist-spotlight.ist-spot-dip {
        box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--text-primary, #1d1b17) 28%, transparent) !important;
    }
    .ist-card {
        transition: opacity 0.2s ease !important;
    }
    .ist-card.ist-out {
        scale: none;
        translate: none;
    }
    .ist-card > * {
        transition: opacity 0.16s ease !important;
    }
}

/* Small screens: pin the card to the bottom for reliable reachability */
@media (max-width: 560px) {
    .ist-card:not(.ist-centered) {
        left: 12px !important;
        right: 12px;
        width: auto;
        top: auto !important;
        bottom: 14px;
    }
    .ist-card:not(.ist-centered) .ist-card-arrow {
        display: none !important;
    }
}