/* Guided-demo chrome layered over the FieldAgent lookalike. Green accents match FieldAgent; everything else stays quiet. */
.fa-app .fa-tour { --fa-tour-dock: corners; position: absolute; left: 16px; bottom: 24px; z-index: 50; width: min(400px, calc(100% - 32px)); padding: 12px 14px 12px 16px; border-radius: 8px; background: rgba(18,18,18,.96); color: #fff; font: 13px/1.45 Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; box-shadow: 0 6px 24px rgba(0,0,0,.55); border: 1px solid rgba(170,204,108,.35); }
.fa-app .fa-tour.hidden { display: none; }
/* after its first placement the card glides between corners instead of jumping */
.fa-app .fa-tour.placed { transition: left .28s cubic-bezier(.4,0,.2,1), top .28s cubic-bezier(.4,0,.2,1); }
/* a new step: the text fades and settles in quickly so the card never feels a beat behind the reader */
.fa-app .fa-tour.swap .fa-tour-text, .fa-app .fa-tour.swap .fa-tour-head { animation: fa-tour-in .2s ease-out both; }
@keyframes fa-tour-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.fa-app .fa-tour-head { display: flex; align-items: baseline; gap: 10px; margin-right: 26px; }
.fa-app .fa-tour-kicker { display: inline-flex; align-items: center; gap: 4px; font: 700 11px/1 "Roboto Condensed", "Arial Narrow", Roboto, Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #aacc6c; white-space: nowrap; transition: color .2s; }
.fa-app .fa-tour-kicker svg { width: 14px; height: 14px; }
.fa-app .fa-tour.stepdone .fa-tour-kicker { color: #d3f0a0; }
.fa-app .fa-tour-title { font-size: 12px; color: #9b9b9b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fa-app .fa-tour-progress { display: flex; gap: 4px; margin: 8px 0 8px; }
.fa-app .fa-tour-progress i { flex: 1; height: 3px; border-radius: 2px; background: #3a3a3a; transition: background .3s; }
.fa-app .fa-tour-progress i.past { background: #799b3e; }
.fa-app .fa-tour-progress i.now { background: #aacc6c; }
.fa-app .fa-tour-progress i.pop { background: #d3f0a0; animation: fa-tour-pop .55s ease-out; }
@keyframes fa-tour-pop { 0% { transform: scaleY(1); } 40% { transform: scaleY(2.2); } 100% { transform: scaleY(1); } }
.fa-app .fa-tour-text { font-size: 13.5px; line-height: 1.5; margin-top: 6px; }
.fa-app .fa-tour-text b { font-weight: 500; color: #fff; }
.fa-app .fa-tour-note { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; padding: 8px 10px; border-radius: 6px; background: rgba(255,255,255,.06); color: #cfcfcf; font-size: 12px; line-height: 1.45; }
.fa-app .fa-tour-note svg { width: 16px; height: 16px; flex: 0 0 auto; color: #aacc6c; margin-top: 1px; }
.fa-app .fa-tour-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.fa-app .fa-tour-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px; border: 0; border-radius: 4px; font: 500 12.5px/1 Roboto, Arial, sans-serif; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.fa-app .fa-tour-btn svg { width: 16px; height: 16px; }
.fa-app .fa-tour-btn .lbl, .fa-app .fa-tour-btn .lbl-busy { display: inline-flex; align-items: center; gap: 6px; }
.fa-app .fa-tour-btn .lbl-busy { display: none; }
.fa-app .fa-tour-btn.primary { background: #799b3e; color: #fff; }
.fa-app .fa-tour-btn.primary:hover { background: #8aae49; }
.fa-app .fa-tour-btn.ghost { background: transparent; color: #cfcfcf; border: 1px solid rgba(255,255,255,.2); }
.fa-app .fa-tour-btn.ghost:hover { color: #fff; border-color: rgba(255,255,255,.45); }
.fa-app .fa-tour-btn[data-tour="continue"] { text-transform: none; letter-spacing: 0; font-size: 13px; }
.fa-app .fa-tour-arrow { font-size: 15px; line-height: 1; margin-left: 2px; }
/* Play all sits in the head row, out of the way of the step's own actions */
.fa-app .fa-tour-head.has-play { margin-right: 96px; }
.fa-app .fa-tour-play { position: absolute; top: 7px; right: 32px; display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 8px 0 5px; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; background: transparent; color: #9b9b9b; font: 700 10.5px/1 "Roboto Condensed", "Arial Narrow", Roboto, Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: color .15s, border-color .15s; }
.fa-app .fa-tour-play svg { width: 14px; height: 14px; }
.fa-app .fa-tour-play:hover { color: #fff; border-color: rgba(170,204,108,.6); }
/* while Show me is running the button reads "Showing…" and cannot be pressed again */
.fa-app .fa-tour.busy [data-tour="showme"] { pointer-events: none; background: #5f7a31; color: #dfe9cc; }
.fa-app .fa-tour.busy [data-tour="showme"] .lbl { display: none; }
.fa-app .fa-tour.busy [data-tour="showme"] .lbl-busy { display: inline-flex; }
/* off the guided path: an amber notice and a Back to step button that reads "Going back…" while it works */
.fa-app .fa-tour.lost { border-color: rgba(255,183,77,.55); }
.fa-app .fa-tour.lost .fa-tour-kicker { color: #ffb74d; }
.fa-app .fa-tour-lost { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; padding: 8px 10px; border-radius: 6px; background: rgba(255,183,77,.12); color: #ffe0b2; font-size: 12px; line-height: 1.45; }
.fa-app .fa-tour-lost svg { width: 16px; height: 16px; flex: 0 0 auto; color: #ffb74d; margin-top: 1px; }
.fa-app .fa-tour-lost b { color: #fff; font-weight: 500; }
.fa-app .fa-tour.busy [data-tour="resync"], .fa-app [data-tour="resync"].busy { pointer-events: none; background: #5f7a31; color: #dfe9cc; }
.fa-app .fa-tour.busy [data-tour="resync"] .lbl, .fa-app [data-tour="resync"].busy .lbl { display: none; }
.fa-app .fa-tour.busy [data-tour="resync"] .lbl-busy, .fa-app [data-tour="resync"].busy .lbl-busy { display: inline-flex; }
/* catching up: earlier steps replay fast so the demo lands where the reader's step starts */
.fa-app .fa-tour.rewinding { border-color: rgba(170,204,108,.7); }
.fa-app .fa-tour.rewinding .fa-tour-kicker svg { animation: fa-tour-spin 1.1s linear infinite; }
@keyframes fa-tour-spin { to { transform: rotate(-360deg); } }
.fa-app .fa-tour-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.fa-app .fa-tour-link { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 4px; border: 1px solid rgba(170,204,108,.45); background: rgba(121,155,62,.14); color: #e6f0d5; font: 500 12px/1 Roboto, Arial, sans-serif; text-decoration: none; cursor: pointer; }
.fa-app .fa-tour-link:hover { background: rgba(121,155,62,.28); color: #fff; }
.fa-app .fa-tour-link svg { width: 15px; height: 15px; color: #aacc6c; }
.fa-app .fa-tour-x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; color: #9b9b9b; font-size: 18px; line-height: 1; cursor: pointer; }
.fa-app .fa-tour-x:hover { color: #fff; background: rgba(255,255,255,.08); }
/* full screen: the button sits between the title and ×; Play all moves left to make room */
.fa-app .fa-tour-fs { position: absolute; top: 6px; right: 32px; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; color: #9b9b9b; cursor: pointer; }
.fa-app .fa-tour-fs svg { width: 19px; height: 19px; }
.fa-app .fa-tour-fs:hover { color: #fff; background: rgba(255,255,255,.08); }
.fa-app .fa-tour.has-fs .fa-tour-head { margin-right: 54px; }
.fa-app .fa-tour.has-fs .fa-tour-play { right: 60px; }
.fa-app .fa-tour.has-fs .fa-tour-head.has-play { margin-right: 124px; }
.fa-app .fa-tour-badge-fs { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin: -5px -6px -5px 4px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #cfcfcf; cursor: pointer; }
.fa-app .fa-tour-badge-fs svg { width: 17px; height: 17px; }
.fa-app .fa-tour-badge-fs:hover { color: #fff; background: rgba(255,255,255,.1); }
/* the optional floating pill over the map's top-left corner (demo.html ?fs=pill|auto|click) */
.fa-app .fa-fs-pill { position: absolute; left: 40px; top: 12px; z-index: 6; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px 0 7px; border-radius: 15px; border: 1px solid rgba(170,204,108,.35); background: rgba(18,18,18,.92); color: #cfcfcf; font: 700 10.5px/1 "Roboto Condensed", "Arial Narrow", Roboto, Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.5); transition: color .15s, border-color .15s; }
.fa-app .fa-fs-pill svg { width: 17px; height: 17px; }
.fa-app .fa-fs-pill:hover { color: #fff; border-color: rgba(170,204,108,.7); }
@media (max-width: 700px) and (orientation: portrait) { .fa-app .fa-fs-pill { top: 60px; } }
.fa-app .fa-tour.done { border-color: rgba(170,204,108,.7); }
.fa-app .fa-tour-badge { display: none; position: absolute; left: 16px; bottom: 24px; z-index: 50; padding: 8px 12px; border-radius: 16px; background: rgba(18,18,18,.94); color: #aacc6c; font: 700 11px/1 "Roboto Condensed", "Arial Narrow", Roboto, Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.5); border: 1px solid rgba(170,204,108,.35); }
.fa-app .fa-tour-badge.show { display: inline-flex; }
/* the spotlight ring glides from one target to the next and turns solid when the step is done */
.fa-app .fa-tour-spot { position: absolute; z-index: 51; pointer-events: none; border: 2px solid #aacc6c; box-shadow: 0 0 0 4px rgba(170,204,108,.28), 0 0 18px rgba(170,204,108,.55); animation: fa-tour-pulse 1.6s ease-in-out infinite; transition: left .32s cubic-bezier(.4,0,.2,1), top .32s cubic-bezier(.4,0,.2,1), width .32s cubic-bezier(.4,0,.2,1), height .32s cubic-bezier(.4,0,.2,1), background .25s, border-color .25s; }
.fa-app .fa-tour-spot.ok { border-color: #d3f0a0; background: rgba(170,204,108,.16); animation: none; box-shadow: 0 0 0 3px rgba(170,204,108,.4), 0 0 24px rgba(170,204,108,.8); }
/* the action tag rides on the ring: step number plus the verb (Click, Drag, Type…); it flips under the ring near the top edge and right-aligns near the right edge */
.fa-app .fa-tour-tag { position: absolute; left: -2px; bottom: 100%; margin-bottom: 7px; display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px 0 3px; border-radius: 11px; background: rgba(18,18,18,.94); color: #e6f0d5; font: 700 10.5px/1 "Roboto Condensed", "Arial Narrow", Roboto, Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; border: 1px solid rgba(170,204,108,.55); box-shadow: 0 3px 10px rgba(0,0,0,.5); animation: fa-tour-tag-in .25s ease-out both; }
.fa-app .fa-tour-tag[hidden] { display: none; }
.fa-app .fa-tour-tag i { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #799b3e; color: #fff; font-style: normal; font-size: 10px; }
.fa-app .fa-tour-tag svg { width: 13px; height: 13px; color: #d3f0a0; margin-left: 4px; }
.fa-app .fa-tour-tag.below { bottom: auto; top: 100%; margin: 7px 0 0; }
.fa-app .fa-tour-tag.end { left: auto; right: -2px; }
.fa-app .fa-tour-spot.ok .fa-tour-tag { background: #799b3e; border-color: #d3f0a0; color: #fff; }
@keyframes fa-tour-tag-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes fa-tour-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(170,204,108,.28), 0 0 18px rgba(170,204,108,.55); } 50% { box-shadow: 0 0 0 8px rgba(170,204,108,.12), 0 0 26px rgba(170,204,108,.8); } }
/* the demo pointer: an arrow that glides to the control Show me is about to use, presses it, and marks the click with a ripple */
.fa-app .fa-tour-ptr { position: absolute; left: 0; top: 0; z-index: 53; pointer-events: none; opacity: 0; margin: -3px 0 0 -6px; will-change: transform; transition: transform var(--fa-ptr-dur, 0ms) cubic-bezier(.4,.05,.2,1), opacity .24s ease; }
.fa-app .fa-tour-ptr.show { opacity: 1; }
.fa-app .fa-tour-ptr svg { display: block; width: 26px; height: 26px; fill: #fff; stroke: #161616; stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgba(0,0,0,.65)); transform-origin: 6px 3px; transition: transform .13s ease; }
.fa-app .fa-tour-ptr.press svg { transform: scale(.8); }
.fa-app .fa-tour-ptr.grab svg { transform: scale(.9) rotate(-10deg); }
/* the caption under the pointer names what it is doing (Click, Type "North 80", Drag, Scroll) */
.fa-app .fa-tour-ptr-cap { position: absolute; left: 22px; top: 24px; display: none; padding: 3px 7px; border-radius: 4px; background: rgba(18,18,18,.92); color: #fff; font: 500 11px/1.2 Roboto, Arial, sans-serif; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; border: 1px solid rgba(170,204,108,.45); box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.fa-app .fa-tour-ptr.cap .fa-tour-ptr-cap { display: block; animation: fa-tour-tag-in .18s ease-out both; }
/* the pointer leaves a short trail of dots so the eye can follow where it came from */
.fa-app .fa-tour-trail { position: absolute; z-index: 52; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: rgba(170,204,108,.85); pointer-events: none; animation: fa-tour-trail .72s ease-out forwards; }
@keyframes fa-tour-trail { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(.3); } }
.fa-app .fa-tour-rip { position: absolute; z-index: 52; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 2px solid #aacc6c; background: rgba(170,204,108,.28); pointer-events: none; animation: fa-tour-rip .6s ease-out forwards; }
@keyframes fa-tour-rip { from { transform: scale(.25); opacity: .95; } to { transform: scale(1.7); opacity: 0; } }
/* the pointer's hover mirrors FieldAgent's own hover states */
.fa-app .layer-row.fa-tour-hover, .fa-app .field-row.fa-tour-hover { background: var(--fa-row-hover); }
.fa-app .layer-row.fa-tour-hover .row-actions { display: flex; }
.fa-app .menu .opt.fa-tour-hover { background: rgba(255,255,255,.08); }
.fa-app .iconbtn.fa-tour-hover, .fa-app .dl-btn.fa-tour-hover { background: rgba(255,255,255,.08); }
.fa-app .select .value.fa-tour-hover { border-color: var(--fa-green-bright); }
.fa-app .btn-wide.fa-tour-hover, .fa-app .fa-tour-btn.fa-tour-hover, .fa-app [data-act="pick"].fa-tour-hover, .fa-app [data-act="pickphotos"].fa-tour-hover, .fa-app [data-act="picksat"].fa-tour-hover, .fa-app [data-act="mode"].fa-tour-hover, .fa-app [data-act="src"].fa-tour-hover, .fa-app [data-blocked].fa-tour-hover { filter: brightness(1.15); }
/* the screen the demo moved to, named for a moment at the top of the map */
/* the list the demo is scrolling glows at its edges while it moves */
.fa-app .fa-tour-scrolling { box-shadow: inset 0 0 0 2px rgba(170,204,108,.55), inset 0 18px 18px -18px rgba(170,204,108,.55), inset 0 -18px 18px -18px rgba(170,204,108,.55); transition: box-shadow .2s; }
/* ---- transitions in the demo UI itself: a new panel view slides in, viewers and dialogs pop in ---- */
.fa-app .panel.fa-view-in .panel-scroll { animation: fa-view-in .34s cubic-bezier(.2,.7,.2,1) both; }
@keyframes fa-view-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.fa-app [data-role="modal"].fa-modal-in .photo-modal { animation: fa-fade-in .22s ease-out both; }
.fa-app [data-role="modal"].fa-modal-in .photo-dlg { animation: fa-pop-in .32s cubic-bezier(.2,.7,.2,1) both; }
.fa-app .x-overlay { animation: fa-fade-in .22s ease-out both; }
.fa-app .x-overlay.fa-modal-in .x-dialog { animation: fa-pop-in .32s cubic-bezier(.2,.7,.2,1) both; }
.fa-app .menu { animation: fa-menu-in .16s ease-out both; }
@keyframes fa-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fa-pop-in { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fa-menu-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
:root[data-motion="reduce"] .fa-app .fa-tour-spot, :root[data-motion="reduce"] .fa-app .fa-tour-progress i.pop, :root[data-motion="reduce"] .fa-app .fa-tour.swap .fa-tour-text, :root[data-motion="reduce"] .fa-app .fa-tour.swap .fa-tour-head, :root[data-motion="reduce"] .fa-app .fa-tour-tag, :root[data-motion="reduce"] .fa-app .fa-tour-ptr.cap .fa-tour-ptr-cap, :root[data-motion="reduce"] .fa-app .fa-tour.rewinding .fa-tour-kicker svg, :root[data-motion="reduce"] .fa-app .panel.fa-view-in .panel-scroll, :root[data-motion="reduce"] .fa-app [data-role="modal"].fa-modal-in .photo-modal, :root[data-motion="reduce"] .fa-app [data-role="modal"].fa-modal-in .photo-dlg, :root[data-motion="reduce"] .fa-app .x-overlay, :root[data-motion="reduce"] .fa-app .x-overlay.fa-modal-in .x-dialog, :root[data-motion="reduce"] .fa-app .menu, :root[data-motion="reduce"] .fa-app .fa-tour-rip { animation: none; } :root[data-motion="reduce"] .fa-app .fa-tour-spot, :root[data-motion="reduce"] .fa-app .fa-tour-ptr, :root[data-motion="reduce"] .fa-app .fa-tour.placed { transition: opacity .2s; } :root[data-motion="reduce"] .fa-app .fa-tour-rip, :root[data-motion="reduce"] .fa-app .fa-tour-trail { display: none; }
/* landscape phones: the engine drops the rail and narrows the panel; keep the card compact */
@media (max-height: 520px) and (min-width: 560px) { .fa-app .fa-tour { width: min(340px, calc(100% - 20px)); padding: 8px 10px 8px 12px; } .fa-app .fa-tour-text { font-size: 12.5px; } .fa-app .fa-tour-note { display: none; } }
.fa-app .fa-tour.start .fa-tour-note { display: flex; }   /* the start card's one line about full screen stays, even in a short frame */
/* portrait phones: the panel is a bottom sheet, so the card docks under the phone bar and stops moving between corners */
@media (max-width: 700px) and (orientation: portrait) { .fa-app .fa-tour { --fa-tour-dock: fixed; left: 10px !important; right: 10px !important; top: 60px !important; bottom: auto !important; width: auto; padding: 10px 12px 10px 14px; transition: none; } .fa-app .fa-tour-badge { top: 60px; bottom: auto; } .fa-app .rotate-hint { display: none !important; } }
/* while the photo viewer is open the card shrinks so whichever corner it picks stays clear of the viewer's controls */
.fa-app.tour-modal .fa-tour { width: min(290px, calc(100% - 28px)); padding: 10px 12px 10px 14px; }
.fa-app.tour-modal .fa-tour-note { display: none; }