/*
 * walk.css — Teach's lessons on the Guides engine (js/workflow-walk.js,
 * js/guide-card.js) and their lights (js/spotlight.js), on every page that
 * carries the header band: a lesson runs on every page, drawn in a small
 * floating card (Brad, 2026-09-27: "i need to have tutorial span pages").
 */

/* ONE COLOUR FOR EVERYTHING GUIDES AND TIPS DRAW (Brad, 2026-10-01: "guides and
   FU should be similar … update guides to use the same color"): the person's
   highlight colour, Settings → Guides & tips glow (--highlight-color), the
   brand orange unless they chose another. Every accent in this sheet reads it. */

/* ── Workflow walk-through (js/workflow-walk.js) ──────────────────
   No chevron row (Brad, 2026-10-21): the card says what to do now, with its
   Next or Exit and a small "Step x of y". */
.wfw-slot { display: flex; flex-direction: column; gap: 0.45rem; padding: 0.5rem 0.6rem 0; }
.wfw-slot:empty { display: none; }
/* In the assistant's conversation, its last item (js/ai-panel.js .ai-guide;
   Brad, 2026-10-18: "located within the ai discussion"): the card of what to do
   now, scrolling with the thread, set in as the replies are. */
.ai-guide .wfw-slot { padding: 0.25rem 0 0.4rem; }
.wfw-ack {
    margin-left: 0.35rem; border: 1px solid var(--highlight-color, var(--brand-primary)); border-radius: 5px;
    background: var(--highlight-color, var(--brand-primary)); color: var(--text-inverse); cursor: pointer;
    font-size: var(--panel-fs-base); padding: 0.05rem 0.5rem;
}
.wfw-foot { display: flex; gap: 0.9rem; flex-wrap: wrap; }
.wfw-stop {
    border: 0; background: transparent; padding: 0; cursor: pointer;
    color: var(--status-error); font-size: var(--panel-fs-base); text-decoration: underline;
}
/* THE CARD READS AS THE ASSISTANT'S OWN TEXT (Brad, 2026-10-21): an answer's
   type, spacing and colours (ai-panel.css .ai-rail-msg--ai .ai-rail-bubble) —
   in the conversation and in the floating card alike. Its edge is the light's
   own (.spotlight-ring), so the card stands out from the replies around it
   (Brad, 2026-10-21: "it blends in"). */
.wfw-card {
    padding: 0.4rem 0.55rem; border-radius: 8px;
    border: 2px solid var(--highlight-color, var(--brand-primary));
    background: var(--bg-canvas); color: var(--text-primary);
    font-size: var(--ai-fs); line-height: 1.45;
}
/* How to leave, at the top of every step (js/workflow-walk.js cardHtml), in the
   red the app gives what ends something (styles.css .btn-chip-danger, on it);
   Exit's words are the same red (Brad, 2026-10-21: "too hard to see"). */
.wfw-esc { display: inline-block; margin: 0 0 0.4rem; padding: 0.1rem 0.45rem; border-radius: 5px; }
.wfw-esc kbd {
    display: inline-block; margin-right: 0.3rem; padding: 0 0.35rem;
    border: 1px solid currentColor; border-radius: 4px;
    font: inherit;
}
.wfw-lead { margin: 0 0 0.45rem; }
.wfw-do { margin: 0 0 0.45rem; }
.wfw-count { margin-right: auto; color: var(--text-muted); font-size: var(--panel-fs-small); align-self: center; }

/* A move's own button ("Open it", js/guide-practice.js) sits in its line. */
.wfw-run { margin-left: 0; }
/* The lights (js/spotlight.js): over the page and over dialogs (a walk
   lights a dialog's own button), and never in the way of the click they
   point at. */
.spotlight-layer { position: fixed; inset: 0; pointer-events: none; z-index: 1000500; }
/* In the browser's top layer (js/spotlight.js), above the menus there: none of
   the top layer's own box — no border, padding, background or size of its own. */
.spotlight-layer[popover] { margin: 0; padding: 0; border: 0; background: transparent; width: auto; height: auto; overflow: visible; color: inherit; }
.spotlight-ring {
    /* THE HALO: a 2px orange edge hugging the thing, and a soft glow that
       breathes out from it. No border box of its own (Brad chose "halo"). */
    position: fixed; border-radius: 6px;
    animation: spotlight-halo 1.4s ease-in-out infinite;
}
/* ONE GLOW, for guides and first-use tips alike, IN THE PERSON'S HIGHLIGHT
   COLOUR (Settings → Guides & tips glow, --highlight-color; the brand orange
   unless they chose another). Brad, 2026-10-01: first "a little strong", then —
   softened to almost nothing — "there is no glow … glow, since it is helpful for
   DnD". So a crisp edge and a glow that is plainly there and breathes, between
   the two. */
@keyframes spotlight-halo {
    0%, 100% { box-shadow: 0 0 0 2px var(--highlight-color, var(--brand-primary)),
                           0 0 6px 2px color-mix(in srgb, var(--highlight-color, var(--brand-primary)) 45%, transparent); }
    50%      { box-shadow: 0 0 0 2px var(--highlight-color, var(--brand-primary)),
                           0 0 14px 5px color-mix(in srgb, var(--highlight-color, var(--brand-primary)) 65%, transparent); }
}
.spotlight-mark {
    position: fixed; border-radius: 50%;
    background: radial-gradient(circle,
        var(--highlight-color, var(--brand-primary)) 0 22%,
        color-mix(in srgb, var(--highlight-color, var(--brand-primary)) 45%, transparent) 45%,
        transparent 70%);
    animation: spotlight-mark-pulse 1.2s ease-in-out infinite;
}
@keyframes spotlight-mark-pulse {
    0%, 100% { transform: scale(0.8); opacity: 0.85; }
    50%      { transform: scale(1.25); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .spotlight-ring, .spotlight-mark { animation: none; } }
/* What to do there — "Click here", "Grab this", "Drop here" — above the light
   (below it at the top of the window). Its own box: the pulse does not move it. */
.spotlight-say {
    position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
    padding: 2px 8px; border-radius: 4px; white-space: nowrap;
    background: var(--highlight-color, var(--brand-primary)); color: #000;
    font-size: 12px; font-weight: 700; line-height: 18px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.spotlight-say--below { bottom: auto; top: calc(100% + 6px); }
/* A press off what is lit was stopped: the card says why, until the next move is lit. */
.wfw-nudge {
    margin: 0 0 6px; padding: 4px 8px; border-radius: 4px;
    background: var(--highlight-color, var(--brand-primary)); color: #000; font-weight: 600;
}

/* THE FLOATING CARD (js/guide-card.js): where the assistant's panel is not
   showing (Account, Usage, the panel folded…), the same slot in a small card
   DOCKED to the right edge — the left when it would cover what the guide lit
   (data-at, set by the card) — wearing the assistant's conversation surface
   (.reading-surface, as .ai-rail-messages does). It sits under every dialog
   (a walk lights a dialog's own buttons). */
.wfw-float {
    position: fixed; top: 50%; transform: translateY(-50%); z-index: 99990;
    width: min(340px, calc(100vw - 32px)); max-height: min(70vh, 560px); overflow-y: auto;
    box-sizing: border-box; padding-bottom: 0.55rem;
    background: var(--bg-elevated, var(--bg-secondary)); color: var(--text-primary);   /* the assistant rail's own */
    border: 1px solid var(--border-soft); border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
.wfw-float[hidden] { display: none; }
.wfw-float[data-at="right"] { right: 16px; }
.wfw-float[data-at="left"] { left: 16px; }
/* Moved by its head (js/window-drag.js): it sits where it was put, its left
   and top set in place; nothing docks it any more. After the data-at rules
   on purpose — same weight, so the later one wins. */
.wfw-float.is-moved { transform: none; right: auto; bottom: auto; }
.wfw-float-head { cursor: move; touch-action: none; }
.wfw-float-head {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: 0.4rem 0.6rem 0; font-size: var(--panel-fs-base); font-weight: 700; color: var(--text-primary);
}
.wfw-float-title { flex: 1 1 auto; min-width: 0; }   /* the fold and ✕ sit together at the right */
.wfw-float-fold, .wfw-float-close {
    border: 0; background: transparent; padding: 0 0.2rem; cursor: pointer; line-height: 1;
    color: var(--text-muted); font-size: var(--panel-fs-header);
}
.wfw-float-fold:hover, .wfw-float-close:hover { color: var(--text-primary); }
.wfw-float--folded { padding-bottom: 0.4rem; }
.wfw-float--folded .wfw-slot { display: none; }

/* ── A FIRST-USE TIP THAT POINTS AT ITS CONTROL (js/first-use-tips.js) ──────
   The Guides' look, so tips and Guides read as one family (Brad, 2026-10-01):
   the halo on the control is the guide's own (.spotlight-ring, above), and the
   card beside it wears the floating Guides card's surface, border and shadow,
   with the guide card's orange edge. A small arrow points at the control; the
   card sits below it, or above it when there is no room (data-side).
   The app's own type and theme throughout — the panel text size and the theme's
   colours — so it follows a person's font and theme settings. OK sits
   bottom right in blue, the colour of a control that changes nothing in the
   project (orange is kept for the ones that do). */
.fut-card {
    position: fixed; z-index: 1000600; margin: 0;
    width: min(300px, calc(100vw - 16px)); box-sizing: border-box;
    padding: 0.6rem 0.7rem 0.55rem;
    background: var(--bg-elevated, var(--bg-secondary)); color: var(--text-secondary);
    border: 1px solid var(--highlight-color, var(--brand-primary)); border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    font-family: inherit; font-size: var(--panel-fs-base); line-height: 1.45;
    overflow: visible;
}
.fut-card[hidden] { display: none; }
.fut-card::before {
    content: ''; position: absolute; left: var(--fut-arrow-x, 50%); width: 10px; height: 10px;
    transform: translateX(-50%) rotate(45deg);
    background: var(--bg-elevated, var(--bg-secondary)); border: 1px solid var(--highlight-color, var(--brand-primary));
}
.fut-card[data-side="below"]::before { top: -6px; border-right: 0; border-bottom: 0; }
.fut-card[data-side="above"]::before { bottom: -6px; border-left: 0; border-top: 0; }
.fut-card-title { font-weight: 700; color: var(--text-primary); margin-bottom: 0.3rem; }
.fut-card .fut-line { margin: 0 0 0.3rem; font-size: var(--panel-fs-base); }
/* The way back, the last sentence of every tip: the word "reset" in the tips'
   own colour (Settings → Guides & tips glow), the rest as the tip reads. */
.fut-card-reset { color: var(--highlight-color, var(--brand-primary)); font-weight: 600; }
.fut-card-foot { display: flex; align-items: center; justify-content: flex-end; margin-top: 0.45rem; }
.fut-card-ok { flex: 0 0 auto; }

/* The admin's step capture (js/walk-capture.js): one small bar, fixed, over
   everything, so what is being recorded is never in doubt. */
.walk-capture-bar {
    position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 1000600;
    display: flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.7rem;
    border-radius: 999px; background: var(--bg-elevated, #222); color: var(--text-primary, #fff);
    border: 1px solid #e0443e; font-size: var(--panel-fs-base); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.walk-capture-dot { color: #e0443e; }
.walk-capture-btn {
    border: 0; background: transparent; padding: 0; cursor: pointer;
    color: var(--highlight-color, var(--brand-primary)); font-size: var(--panel-fs-base); text-decoration: underline;
}
/* Dot armed: the next click places the orange glow dot, not a press. */
.walk-capture-btn--dot::before { content: '●'; margin-right: 0.2rem; text-decoration: none; display: inline-block; }
.walk-capture-bar--dot { border-color: var(--highlight-color, var(--brand-primary)); }
.walk-capture-bar--dot .walk-capture-btn--dot { font-weight: 700; }
/* Dot armed: the pointer IS the dot (the spotlight's mark), and the object it
   would land on is outlined and named — the proof an object was picked. */
.walk-capture-dotting, .walk-capture-dotting * { cursor: none !important; }
.walk-capture-cursor { width: 34px; height: 34px; pointer-events: none; z-index: 1000700; }
.walk-capture-pick {
    position: fixed; pointer-events: none; z-index: 1000650; border-radius: 6px;
    box-shadow: 0 0 0 2px var(--highlight-color, var(--brand-primary)), 0 0 10px 3px color-mix(in srgb, var(--highlight-color, var(--brand-primary)) 50%, transparent);
}
.walk-capture-pick[hidden] { display: none; }
.walk-capture-pick > span {
    position: absolute; left: 0; bottom: 100%; margin-bottom: 4px; white-space: nowrap;
    padding: 1px 6px; border-radius: 4px; background: var(--highlight-color, var(--brand-primary)); color: #000;
    font-size: var(--panel-fs-base); font-weight: 600;
}

/* The edit view (js/guide-editor.js): the guide's words, its chevrons and
   their moves, in the app's own dialog (a guide card's Edit, admins). */
.ged { display: flex; flex-direction: column; gap: 0.35rem; font-size: var(--panel-fs-base); color: var(--text-secondary); }
.ged-row { display: flex; flex-direction: column; gap: 0.1rem; }
.ged-sub { font-weight: 700; color: var(--text-primary); margin-top: 0.2rem; }
.ged-in {
    width: 100%; box-sizing: border-box; padding: 0.2rem 0.4rem; min-width: 0;
    border: 1px solid var(--border-soft); border-radius: 5px;
    background: var(--bg-secondary); color: var(--text-primary); font-size: var(--panel-fs-base);
}
.ged-in:focus { outline: none; border-color: var(--highlight-color, var(--brand-primary)); }
.ged-steps { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.35rem; }
.ged-label { font-weight: 600; }
.ged-moves { margin: 0.2rem 0 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 0.2rem; }
.ged-move { display: flex; align-items: center; gap: 0.2rem; }
.ged-move .ged-text { flex: 1 1 auto; }
.ged-btn {
    flex: 0 0 auto; border: 1px solid var(--border-soft); border-radius: 4px; background: transparent; cursor: pointer;
    color: var(--text-secondary); font-size: var(--panel-fs-base); line-height: 1; padding: 0.15rem 0.3rem;
}
.ged-btn:disabled { opacity: 0.35; cursor: default; }
.ged-error { margin: 0; color: #e0443e; }
.ged-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; }
.ged-save {
    border: 1px solid var(--highlight-color, var(--brand-primary)); border-radius: 5px; background: var(--highlight-color, var(--brand-primary));
    color: var(--text-inverse); cursor: pointer; font-size: var(--panel-fs-base); padding: 0.1rem 0.7rem;
}
.ged-link {
    border: 0; background: transparent; padding: 0; cursor: pointer;
    color: var(--text-muted); font-size: var(--panel-fs-base); text-decoration: underline;
}
.ged-link:disabled { opacity: 0.45; cursor: default; text-decoration: none; }