/* ============================================================================================
   fa-guide - the teaching layer: the spotlight tour, the help panel and the "?" beacon.

   No framework and no CDN. Bootstrap's modal cannot cut a hole in its own backdrop, which is the
   one thing a spotlight has to do, and pulling in a tour library for that would add a blocking
   third-party script to every authenticated page in the product.

   THE SPOTLIGHT IS ONE ELEMENT, NOT FOUR. The dim is a single box-shadow with an enormous spread
   painted OUTWARD from the highlight rectangle. Four positioned overlay panes (the usual approach)
   have to be re-measured on every scroll and resize and always leave hairline seams at the corners;
   one shadow cannot.

   Everything is namespaced .fa-g* and z-indexed above Bootstrap's modal (1055) so a tour can point
   at something inside an open dialog.
   ============================================================================================ */

:root {
    --fa-g-brand: #0d6efd;
    --fa-g-brand-dark: #0a58ca;
    --fa-g-ink: #1c2431;
    --fa-g-muted: #5b6472;
    --fa-g-line: #e4e8ef;
    --fa-g-surface: #ffffff;
    --fa-g-soft: #f4f7fc;
    --fa-g-warn-bg: #fff8e6;
    --fa-g-warn-line: #f0c36d;
    --fa-g-ok: #1a7f4b;
}

/* ── The "?" beacon ─────────────────────────────────────────────────────────────────────────
   Bottom-right, above the page, below the tour. Small enough to ignore, always in the same
   place so it becomes muscle memory. */

.fa-g-beacon {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1040;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 0;
    background: var(--fa-g-brand);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(13, 110, 253, .35);
    transition: transform .16s ease, background .16s ease;
}

.fa-g-beacon:hover { background: var(--fa-g-brand-dark); transform: translateY(-2px); }
.fa-g-beacon:focus-visible { outline: 3px solid #9ec5fe; outline-offset: 2px; }

/* The unread pip. Present only until they have opened help once on this account, so it is a
   one-time invitation rather than a permanent alarm. */
.fa-g-beacon .fa-g-pip {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ff6b35;
    border: 2px solid #fff;
}

@media print { .fa-g-beacon { display: none; } }

/* ── Help panel ─────────────────────────────────────────────────────────────────────────────
   A right-hand slide-over rather than a modal: help is read ALONGSIDE the screen it explains,
   and a modal that covers the thing being described is self-defeating. */

.fa-g-scrim {
    position: fixed;
    inset: 0;
    z-index: 1060;
    background: rgba(16, 22, 33, .42);
    opacity: 0;
    transition: opacity .18s ease;
}

.fa-g-scrim.fa-g-in { opacity: 1; }

.fa-g-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1061;
    width: min(420px, 100vw);
    background: var(--fa-g-surface);
    box-shadow: -12px 0 40px rgba(16, 22, 33, .22);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .22s cubic-bezier(.2, .8, .3, 1);
}

.fa-g-panel.fa-g-in { transform: translateX(0); }

.fa-g-panel-head {
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--fa-g-line);
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.fa-g-panel-head h2 {
    margin: 0;
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--fa-g-ink);
    flex: 1;
}

.fa-g-x {
    border: 0;
    background: transparent;
    font-size: 24px;
    line-height: 1;
    color: var(--fa-g-muted);
    cursor: pointer;
    padding: 0 4px;
}

.fa-g-x:hover { color: var(--fa-g-ink); }

.fa-g-panel-body {
    padding: 18px 20px 28px;
    overflow-y: auto;
    flex: 1;
    color: var(--fa-g-ink);
    font-size: .94rem;
    line-height: 1.55;
}

.fa-g-panel-body p.fa-g-summary { color: var(--fa-g-muted); margin-bottom: 16px; }

.fa-g-panel-body ul { padding-left: 20px; margin-bottom: 18px; }
.fa-g-panel-body li { margin-bottom: 9px; }

.fa-g-h {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--fa-g-muted);
    margin: 20px 0 8px;
}

/* The one mistake people actually make on this screen. Amber, never red: it is a warning about a
   consequence, not a report of a failure. */
.fa-g-watch {
    background: var(--fa-g-warn-bg);
    border: 1px solid var(--fa-g-warn-line);
    border-radius: 10px;
    padding: 12px 14px;
    margin: 4px 0 18px;
    font-size: .9rem;
}

.fa-g-watch strong { display: block; margin-bottom: 4px; }

/* THE HAND-HOLD. The numbered path through this screen's job, rendered above the explanation
   because somebody who opened help is mid-task and wants the order, not a description. Blue rather
   than amber: this is the thing to do, not a thing to beware of. */
.fa-g-do {
    background: #EEF3FF;
    border: 1px solid #C7D7FB;
    border-radius: 10px;
    padding: 14px 16px 4px;
    margin: 4px 0 18px;
}

.fa-g-do-h {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--fa-g-brand);
    margin: 0 0 10px;
}

/* Counters rather than list-style, so the numeral can be a filled chip: these steps are ordered,
   and a bulleted list of imperatives reads as a menu of options rather than as a sequence. */
.fa-g-do-list { list-style: none; counter-reset: fa-do; margin: 0; padding: 0; }

.fa-g-do-list li {
    counter-increment: fa-do;
    position: relative;
    padding: 0 0 12px 32px;
    font-size: .92rem;
    line-height: 1.5;
}

.fa-g-do-list li::before {
    content: counter(fa-do);
    position: absolute; left: 0; top: 1px;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--fa-g-brand); color: #fff;
    font-size: .72rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}

/* Sectioned help, for a screen that does several jobs (Listing Details is the reason this exists).
   The rule on the left is what lets somebody scanning for one section find its edge without a
   heavier divider between every group. */
.fa-g-sec {
    border-left: 2px solid var(--fa-g-line);
    padding-left: 14px;
    margin: 0 0 20px;
}

.fa-g-sec-h {
    font-size: .95rem;
    font-weight: 700;
    color: var(--fa-g-ink);
    margin: 0 0 4px;
    display: flex;
    align-items: baseline;
    gap: 7px;
}

.fa-g-sec-icon { font-size: 1rem; line-height: 1; }
.fa-g-sec-sum { color: var(--fa-g-muted); font-size: .88rem; margin: 0 0 10px; }
.fa-g-sec ul { margin-bottom: 10px; }
.fa-g-sec li { font-size: .9rem; }
.fa-g-watch-sm { font-size: .86rem; padding: 10px 12px; margin-bottom: 4px; }

.fa-g-tipbox {
    background: var(--fa-g-soft);
    border-radius: 10px;
    padding: 12px 14px 12px;
    margin-bottom: 18px;
}

.fa-g-tipbox ul { margin: 0; padding-left: 18px; }
.fa-g-tipbox li:last-child { margin-bottom: 0; }

.fa-g-panel-foot {
    border-top: 1px solid var(--fa-g-line);
    padding: 14px 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.fa-g-btn {
    border-radius: 9px;
    border: 1px solid var(--fa-g-brand);
    background: var(--fa-g-brand);
    color: #fff;
    font-size: .88rem;
    font-weight: 600;
    padding: 9px 16px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.fa-g-btn:hover { background: var(--fa-g-brand-dark); border-color: var(--fa-g-brand-dark); color: #fff; }

/* "I need a hand" — the one action in the panel that DOES the work rather than explaining it, so it
   has to read differently from the tour and the lessons beside it. A deep amber, not the small orange
   on white the marketing shell forbids: this is white text on a solid fill. */
.fa-g-btn.fa-g-ask { background: #B45309; border-color: #B45309; }
.fa-g-btn.fa-g-ask:hover { background: #92400E; border-color: #92400E; color: #fff; }

.fa-g-btn.fa-g-ghost {
    background: transparent;
    color: var(--fa-g-brand);
}

.fa-g-btn.fa-g-ghost:hover { background: var(--fa-g-soft); color: var(--fa-g-brand-dark); }

.fa-g-btn.fa-g-quiet {
    background: transparent;
    border-color: transparent;
    color: var(--fa-g-muted);
    padding-left: 8px;
    padding-right: 8px;
}

.fa-g-btn.fa-g-quiet:hover { background: var(--fa-g-soft); color: var(--fa-g-ink); }

/* ── "For you right now" + "Want me to do it for you?" ─────────────────────────────────────────
   The top of the help panel. Big buttons, plain words, one action per row: somebody who pressed
   "?" is stuck, and the fastest way out is to be taken to the job. */

.fa-g-lead-h {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--fa-g-muted);
    margin: 0 0 10px;
}

.fa-g-foryou { margin: 0 0 18px; }

.fa-g-sugg {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: #FFF7F0;
    border: 1px solid #FFD9BF;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
}

.fa-g-sugg-icon {
    flex: 0 0 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(16, 22, 33, .08);
}

.fa-g-sugg-main { flex: 1; min-width: 0; }
.fa-g-sugg-title { font-weight: 700; color: var(--fa-g-ink); font-size: .95rem; line-height: 1.35; overflow-wrap: anywhere; }
.fa-g-panel-body p.fa-g-sugg-why { color: var(--fa-g-muted); font-size: .86rem; line-height: 1.45; margin: 3px 0 10px; }
.fa-g-sugg-go { min-height: 44px; }

.fa-g-doit { margin: 0 0 20px; }

.fa-g-act {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 12px 16px;
    margin-bottom: 10px;
    border-radius: 12px;
    border: 1px solid var(--fa-g-brand);
    font-size: .98rem;
    font-weight: 650;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    transition: background .14s ease, box-shadow .14s ease;
}

.fa-g-act i { font-size: 1.15rem; flex: 0 0 auto; }
.fa-g-act .fa-g-act-label { flex: 1; min-width: 0; }
.fa-g-act::after { content: "\203A"; font-size: 1.35rem; line-height: 1; opacity: .7; }

.fa-g-act-setup { background: var(--fa-g-brand); color: #fff; box-shadow: 0 4px 12px rgba(13, 110, 253, .22); }
.fa-g-act-setup:hover { background: var(--fa-g-brand-dark); border-color: var(--fa-g-brand-dark); color: #fff; }
.fa-g-act-open { background: #fff; color: var(--fa-g-brand); }
.fa-g-act-open:hover { background: var(--fa-g-soft); color: var(--fa-g-brand-dark); }

.fa-g-act:focus-visible, .fa-g-sugg-go:focus-visible { outline: 3px solid #9ec5fe; outline-offset: 2px; }

/* The explanation, once there is doing above it. */
.fa-g-h.fa-g-h-how { margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--fa-g-line); }

/* ── Spotlight tour ─────────────────────────────────────────────────────────────────────────── */

.fa-g-spot {
    position: absolute;
    z-index: 1070;
    border-radius: 12px;
    /* The dim IS this shadow. One element, no seams, nothing to re-tile on scroll. */
    box-shadow: 0 0 0 9999px rgba(13, 18, 28, .55), 0 0 0 3px rgba(255, 255, 255, .85);
    pointer-events: none;
    transition: top .28s cubic-bezier(.2, .8, .3, 1), left .28s cubic-bezier(.2, .8, .3, 1),
                width .28s cubic-bezier(.2, .8, .3, 1), height .28s cubic-bezier(.2, .8, .3, 1);
}

/* A step whose target is missing (a card that only renders when there is data) still gets a
   tooltip - centred, with no hole cut. Skipping such a step silently would leave gaps in the
   numbering and make the tour look broken. */
.fa-g-spot.fa-g-nospot { box-shadow: 0 0 0 9999px rgba(13, 18, 28, .55); width: 0; height: 0; }

.fa-g-tip {
    position: absolute;
    z-index: 1071;
    width: min(340px, calc(100vw - 32px));
    background: var(--fa-g-surface);
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(10, 15, 25, .35);
    padding: 18px 18px 14px;
    color: var(--fa-g-ink);
}

.fa-g-tip-step {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--fa-g-brand);
    margin-bottom: 6px;
}

/* The step counter and the way out, on one line. Every tour card carries the ✕ — see tipHead(). */
.fa-g-tip-head {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.fa-g-tip-head .fa-g-tip-step { flex: 1 1 auto; }

.fa-g-tip-x {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--fa-g-muted);
    font-size: 1rem;
    line-height: 1;
    /* 32px of tappable corner: this is the control somebody reaches for in a hurry. */
    min-width: 32px;
    min-height: 32px;
    margin: -6px -6px 0 0;
    border-radius: 8px;
    cursor: pointer;
}

.fa-g-tip-x:hover,
.fa-g-tip-x:focus-visible { background: rgba(0, 0, 0, .06); color: inherit; }

.fa-g-tip h3 { font-size: 1.02rem; font-weight: 700; margin: 0 0 8px; }
.fa-g-tip p { font-size: .9rem; line-height: 1.55; color: var(--fa-g-muted); margin: 0 0 14px; }

.fa-g-tip-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fa-g-dots { display: flex; gap: 5px; flex: 1; flex-wrap: wrap; min-width: 0; }

/* Back / Next / Skip are thumbed on phones and tablets: a 44px target, nothing that needs hover. */
.fa-g-tip .fa-g-btn { min-height: 44px; justify-content: center; touch-action: manipulation; }
/* A long step on a short landscape screen scrolls inside the tip instead of running off it. */
.fa-g-tip { max-height: calc(100vh - 32px); overflow-y: auto; }

.fa-g-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--fa-g-line);
}

.fa-g-dot.fa-g-on { background: var(--fa-g-brand); }

/* ── Welcome card, the guided tour's front door ─────────────────────────────────────────────── */

.fa-g-welcome {
    position: fixed;
    z-index: 1081;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(380px, calc(100vw - 32px));
    background: var(--fa-g-surface);
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(10, 15, 25, .38);
    padding: 26px 24px 20px;
    text-align: center;
    color: var(--fa-g-ink);
}

.fa-g-welcome-art { font-size: 3rem; line-height: 1; margin-bottom: 10px; }
.fa-g-welcome h2 { font-size: 1.32rem; font-weight: 700; margin: 0 0 8px; color: var(--fa-g-brand); }
.fa-g-welcome p { font-size: .93rem; color: var(--fa-g-muted); margin: 0 0 18px; }

/* Full-width buttons: this is a decision, not a toolbar, and the primary answer should be the
   easiest thing on the card to hit. */
.fa-g-welcome .fa-g-btn { display: block; width: 100%; padding: 13px 16px; font-size: .98rem; }
.fa-g-welcome-skip { margin-top: 10px; }
.fa-g-welcome-note { font-size: .78rem; color: var(--fa-g-muted); margin: 14px 0 0; }

/* ── Getting Started card (dashboard) ──────────────────────────────────────────────────────── */

.fa-g-gs { border: 1px solid var(--fa-g-line); border-radius: 14px; background: var(--fa-g-surface); overflow: hidden; }
.fa-g-gs-head { padding: 16px 18px 12px; display: flex; align-items: flex-start; gap: 12px; }
.fa-g-gs-head h5 { margin: 0 0 2px; font-weight: 700; }
.fa-g-gs-sub { color: var(--fa-g-muted); font-size: .88rem; margin: 0; }

.fa-g-bar { height: 7px; border-radius: 99px; background: var(--fa-g-line); overflow: hidden; }
.fa-g-bar > span { display: block; height: 100%; border-radius: 99px; background: var(--fa-g-brand); transition: width .4s ease; }

.fa-g-gs-list { list-style: none; margin: 0; padding: 0 8px 8px; }

.fa-g-gs-list li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--fa-g-ink);
}

.fa-g-gs-list li a:hover { background: var(--fa-g-soft); }

.fa-g-tick {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--fa-g-line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: transparent;
    flex: 0 0 auto;
}

.fa-g-tick.fa-g-done { background: var(--fa-g-ok); border-color: var(--fa-g-ok); color: #fff; }

.fa-g-gs-list .fa-g-done-text { color: var(--fa-g-muted); text-decoration: line-through; }
.fa-g-mins { margin-left: auto; font-size: .78rem; color: var(--fa-g-muted); white-space: nowrap; }

/* ── Learning Center ───────────────────────────────────────────────────────────────────────── */

.fa-l-hero {
    background: linear-gradient(135deg, #0d6efd 0%, #4d2fd1 100%);
    color: #fff;
    border-radius: 18px;
    padding: 30px 28px;
    margin-bottom: 26px;
}

.fa-l-hero h1 { font-weight: 800; font-size: 1.9rem; margin: 0 0 6px; }
.fa-l-hero p { margin: 0; opacity: .92; }

.fa-l-hero .fa-g-bar { background: rgba(255, 255, 255, .28); margin-top: 18px; }
.fa-l-hero .fa-g-bar > span { background: #fff; }

.fa-l-journey {
    border: 1px solid var(--fa-g-line);
    border-radius: 14px;
    background: #fff;
    padding: 18px 18px 14px;
    height: 100%;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--fa-g-ink);
    transition: box-shadow .16s ease, transform .16s ease;
}

.fa-l-journey:hover { box-shadow: 0 10px 26px rgba(16, 22, 33, .1); transform: translateY(-2px); color: var(--fa-g-ink); }
.fa-l-journey .fa-l-icon { font-size: 1.8rem; line-height: 1; margin-bottom: 10px; }
.fa-l-journey h3 { font-size: 1.02rem; font-weight: 700; margin: 0 0 4px; }
.fa-l-journey p { font-size: .87rem; color: var(--fa-g-muted); flex: 1; }

.fa-l-step {
    border: 1px solid var(--fa-g-line);
    border-radius: 14px;
    background: #fff;
    padding: 20px 22px;
    margin-bottom: 16px;
}

.fa-l-step.fa-l-done { border-color: #cfe9da; background: #fbfefc; }
.fa-l-step h3 { font-size: 1.08rem; font-weight: 700; margin: 0; }
.fa-l-step ol { padding-left: 22px; margin-bottom: 0; }
.fa-l-step ol li { margin-bottom: 8px; }

.fa-l-why {
    border-left: 3px solid var(--fa-g-brand);
    padding: 2px 0 2px 14px;
    color: var(--fa-g-muted);
    margin: 12px 0 18px;
}

.fa-l-feature {
    display: flex;
    gap: 12px;
    padding: 14px 14px;
    border: 1px solid var(--fa-g-line);
    border-radius: 12px;
    height: 100%;
    text-decoration: none;
    color: var(--fa-g-ink);
    background: #fff;
}

.fa-l-feature:hover { background: var(--fa-g-soft); color: var(--fa-g-ink); }
.fa-l-feature .fa-l-icon { font-size: 1.35rem; line-height: 1; }
.fa-l-feature strong { display: block; font-size: .95rem; }
.fa-l-feature span { font-size: .84rem; color: var(--fa-g-muted); }

/* "Do it for me" landed on a section of THIS page (#licence, #visitor-notice, Generate): a short
   ring so the eye finds what was scrolled to. */
.fa-g-flash { outline: 3px solid rgba(37, 99, 235, .55); outline-offset: 4px; border-radius: 10px; transition: outline-color 1.2s ease; }

/* Respect the setting. A spotlight that slides across the screen is exactly the motion people
   turn this on to avoid; the tour still works, it simply cuts between steps. */
@media (prefers-reduced-motion: reduce) {
    .fa-g-spot, .fa-g-panel, .fa-g-scrim, .fa-g-bar > span { transition: none !important; }
}

/* The `hidden` attribute loses to any `display` rule this file or Bootstrap sets, and every toggle
   in fa-guide.js uses el.hidden. Without this the help panel renders on page load. */
[hidden] { display: none !important; }