/* Add a spot (Pages/Spots/Add.cshtml, spot-add.js): one question at a time in a card, the steps across the hero.
   Without script every question shows, one after the other, and the send button sits at the end. */
.sa-hero .ag-eyebrow a { color: inherit; }
.sa-progress { display: flex; flex-wrap: wrap; gap: 6px; margin: 22px 0 0; padding: 0; list-style: none; }
.sa-progress li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 6px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: rgba(207, 234, 240, 0.78); font-size: 13px; font-weight: 700; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.sa-progress__n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); font-family: var(--ag-font-display); font-size: 11px; }
.sa-progress li.is-done { color: #FFFFFF; }
.sa-progress li.is-done .sa-progress__n { background: var(--ag-sky); color: var(--ag-deepest); }
.sa-progress li.is-now { border-color: var(--ag-sky); background: rgba(127, 211, 227, 0.16); color: #FFFFFF; }
.sa-progress li.is-now .sa-progress__n { background: #FFFFFF; color: var(--ag-deepest); }

.sa-layout { display: grid; grid-template-columns: minmax(0, 760px); gap: 32px; align-items: start; }
@media (min-width: 1100px) { .sa-layout { grid-template-columns: minmax(0, 760px) minmax(300px, 380px); } }
.sa-form { position: relative; display: grid; gap: 20px; max-width: 760px; }
.sa-form.sa-js { padding: clamp(18px, 4vw, 34px); border: 1px solid var(--ag-line); border-radius: 24px; background: #FFFFFF; box-shadow: var(--ag-shadow-soft); }
.sa-step { display: grid; gap: 16px; min-width: 0; margin: 0; padding: 0; border: 0; }
.sa-form:not(.sa-js) .sa-step + .sa-step { padding-top: 26px; border-top: 1px solid var(--ag-line); }
.sa-js .sa-step:not(.is-now) { display: none; }
.sa-js .sa-step.is-now { animation: sa-in 0.28s ease-out; }
@keyframes sa-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sa-js .sa-step.is-now { animation: none; } }
.sa-q { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 0; font-family: var(--ag-font-display); font-size: clamp(21px, 3.2vw, 30px); font-weight: 600; line-height: 1.2; color: var(--ag-ink); outline: none; text-wrap: balance; }
/* the question gets focus when it shows (for screen readers): no ring on a heading */
.sa-q:focus, .sa-q:focus-visible { outline: none !important; box-shadow: none !important; }
.sa-q small { font-family: var(--ag-font-body); font-size: 15px; font-weight: 600; color: var(--ag-muted); }
.sa-q__n { display: inline-grid; flex-shrink: 0; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ag-tint); color: var(--ag-cyan-ink); font-size: 15px; }
.sa-hint { margin: 0; color: var(--ag-text); font-size: 15.5px; }
small.sa-hint { margin: 0; font-size: 13.5px; color: var(--ag-muted); }
.sa-err { color: #9B1C1C; font-size: 14px; font-weight: 700; }
.sa-err:empty { display: none; }
.sa-big { font-size: 18px !important; font-weight: 600; }

/* 1. where */
.sa-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sa-way { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 14px; border: 1.5px solid var(--ag-line); border-radius: 16px; background: #FFFFFF; color: var(--ag-ink); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
.sa-way:hover { border-color: var(--ag-arc); transform: translateY(-1px); }
.sa-way:focus-visible { outline: 2px solid var(--ag-cyan); outline-offset: 2px; }
.sa-way.is-on { border-color: var(--ag-cyan); box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.16); }
.sa-way b { display: block; font-size: 15.5px; }
.sa-way small { display: block; color: var(--ag-muted); font-size: 13px; line-height: 1.35; }
.sa-way__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--ag-tint); color: var(--ag-cyan-ink); }
.sa-way.is-busy .sa-way__icon { animation: sa-pulse 1s ease-in-out infinite; }
@keyframes sa-pulse { 50% { background: rgba(8, 145, 178, 0.2); } }
.sa-paste { display: grid; gap: 6px; }
.sa-paste label { font-weight: 700; color: var(--ag-ink); }
.sa-paste__row { display: flex; gap: 8px; }
.sa-paste__row input { flex: 1; min-width: 0; }
.sa-paste small { color: var(--ag-muted); font-size: 13px; }
.sa-paste small.is-bad { color: #9B1C1C; font-weight: 700; }
.sa-map { display: grid; gap: 6px; }
.sa-map__canvas { height: clamp(280px, 52vh, 440px); border: 1px solid var(--ag-line); border-radius: 18px; background: #D7ECF1; overflow: hidden; z-index: 0; }
.sa-map__tip { margin: 0; color: var(--ag-muted); font-size: 13.5px; }
.sa-map .leaflet-container { font-family: var(--ag-font-body); }
.sa-pin { position: relative; width: 34px; height: 44px; }
.sa-pin svg { width: 34px; height: 44px; filter: drop-shadow(0 6px 8px rgba(6, 47, 56, 0.35)); }
.sa-known { padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: var(--ag-ink); font-size: 11.5px; font-weight: 700; white-space: nowrap; box-shadow: 0 2px 6px rgba(6, 47, 56, 0.2); }
.sa-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; padding: 12px 14px; border-radius: 14px; background: #E3F6EC; color: #11694A; font-weight: 700; font-size: 14.5px; }
.sa-status small { color: #1B4D36; font-weight: 600; }
.sa-status.is-bad { background: #FDE8E8; color: #9B1C1C; }
.sa-dupe { display: grid; gap: 10px; padding: 14px 16px; border: 1.5px solid var(--ag-attn-line); border-radius: 16px; background: var(--ag-attn-bg); color: var(--ag-attn); }
.sa-dupe b { color: var(--ag-ink); }
.sa-dupe .ag-actions { margin: 0; }
.sa-manual summary { cursor: pointer; color: var(--ag-cyan-ink); font-weight: 700; font-size: 14.5px; }
.sa-manual[open] summary { margin-bottom: 10px; }

/* 3. the compass: sixteen points round a dial, the arrow in the middle */
.sa-compass { --r: clamp(118px, 34vw, 150px); position: relative; width: calc(var(--r) * 2 + 56px); max-width: 100%; aspect-ratio: 1; margin: 6px auto 0; }
.sa-compass__ring { position: absolute; inset: 28px; border-radius: 50%; background: radial-gradient(circle, #FFFFFF 0 56%, var(--ag-tint) 57% 100%); border: 1px solid var(--ag-line); }
/* the needle: from the middle out to the chosen point, turning with it */
.sa-compass__needle { position: absolute; left: 50%; top: calc(50% - var(--r) + 26px); width: 4px; height: calc(var(--r) - 26px); margin-left: -2px; border-radius: 2px; transform-origin: 50% 100%;
    background: linear-gradient(to top, rgba(14, 107, 130, 0) 0 30%, var(--ag-cyan-ink) 100%); transform: rotate(var(--f, 0deg)); opacity: var(--wedge, 0); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s; }
.sa-compass__face { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 2px; pointer-events: none; }
.sa-compass__face::before { content: ""; position: absolute; left: 50%; top: 50%; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 6px 18px rgba(11, 79, 94, 0.1); }
.sa-compass__face b, .sa-compass__face small { position: relative; }
.sa-compass__face b { font-family: var(--ag-font-display); font-size: 28px; font-weight: 600; color: var(--ag-ink); line-height: 1; }
.sa-compass__face small { color: var(--ag-muted); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.sa-compass__pt { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; transform: rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(calc(var(--a) * -1)); }
.sa-compass__pt input { position: absolute; opacity: 0; pointer-events: none; }
.sa-compass__pt span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: #FFFFFF; border: 1.5px solid var(--ag-line); color: var(--ag-muted); font-size: 11.5px; font-weight: 800; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s; }
.sa-compass__pt.is-main span { color: var(--ag-ink); font-size: 13px; }
.sa-compass__pt:not(.is-main) span { transform: scale(0.82); }
.sa-compass__pt span:hover { border-color: var(--ag-arc); }
.sa-compass__pt input:focus-visible + span { outline: 2px solid var(--ag-cyan); outline-offset: 2px; }
.sa-compass__pt input:checked + span { background: var(--ag-cyan-ink); border-color: var(--ag-cyan-ink); color: #FFFFFF; transform: scale(1.06); }
.sa-compass__pt.is-guess input:not(:checked) + span { border-style: dashed; border-color: var(--ag-cyan); }
.sa-read { margin: 0; text-align: center; color: var(--ag-text); font-size: 15px; }
.sa-read b { color: var(--ag-ink); }
.sa-phone { display: grid; justify-items: center; gap: 6px; text-align: center; }
.sa-phone small { color: var(--ag-muted); font-size: 13px; }
.sa-phone .is-live { border-color: var(--ag-cyan); color: var(--ag-cyan-ink); }

/* 4. the wave: chips */
.sa-group { display: grid; gap: 8px; }
.sa-group__label { font-weight: 800; color: var(--ag-ink); font-size: 15px; }
.sa-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sa-chip { position: relative; margin: 0; }
.sa-chip input { position: absolute; opacity: 0; pointer-events: none; }
.sa-chip span { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border: 1.5px solid var(--ag-line); border-radius: 999px; background: #FFFFFF; color: var(--ag-ink); font-size: 14.5px; font-weight: 700; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.sa-chip span:hover { border-color: var(--ag-arc); }
.sa-chip input:focus-visible + span { outline: 2px solid var(--ag-cyan); outline-offset: 2px; }
.sa-chip input:checked + span { background: var(--ag-deep); border-color: var(--ag-deep); color: #FFFFFF; }

/* 5. the photo */
.sa-photo__drop { display: grid; justify-items: center; gap: 4px; padding: 24px 16px; border: 2px dashed var(--ag-line); border-radius: 18px; background: var(--ag-tint); color: var(--ag-cyan-ink); text-align: center; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.sa-photo__drop:hover { border-color: var(--ag-arc); }
.sa-photo__drop b { color: var(--ag-ink); font-size: 16px; }
.sa-photo__drop small { color: var(--ag-muted); font-size: 13px; }
.sa-js .sa-photo__input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.sa-photo__input:focus-visible ~ .sa-photo__drop, .sa-photo:focus-within .sa-photo__drop { border-color: var(--ag-cyan); }
.sa-photo .sp-file__preview { max-width: 100%; }

/* 6. who sees it */
.sa-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sa-card { position: relative; display: block; margin: 0; cursor: pointer; }
.sa-card input { position: absolute; opacity: 0; pointer-events: none; }
.sa-card > span { display: grid; gap: 4px; height: 100%; padding: 14px; border: 1.5px solid var(--ag-line); border-radius: 16px; background: #FFFFFF; transition: border-color 0.15s, box-shadow 0.15s; }
.sa-card b { color: var(--ag-ink); font-size: 15.5px; }
.sa-card small { color: var(--ag-muted); font-size: 13px; line-height: 1.4; }
.sa-card input:checked + span { border-color: var(--ag-cyan); box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.16); }
.sa-card input:focus-visible + span { outline: 2px solid var(--ag-cyan); outline-offset: 2px; }
.sa-secret { margin: 0; }
.sa-js .sa-secret:not(.is-on) { display: none; }

/* 7. the summary and the send */
.sa-summary { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 8px; padding: 14px; border-radius: 16px; background: var(--ag-tint); }
.sa-summary div { display: grid; gap: 1px; align-content: start; min-width: 0; }
.sa-summary small { color: var(--ag-muted); font-size: 11.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.sa-summary b { overflow: hidden; color: var(--ag-ink); font-size: 14.5px; text-overflow: ellipsis; }
.sa-send { justify-self: start; }
@media (max-width: 560px) { .sa-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sa-js .sa-send { justify-self: stretch; min-height: 52px; font-size: 16.5px; }

.sa-nav { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding-top: 16px; border-top: 1px solid var(--ag-line); }
.sa-nav__count { text-align: center; color: var(--ag-muted); font-size: 13.5px; font-weight: 700; }
.sa-nav [data-back][hidden] { display: inline-flex !important; visibility: hidden; }
.sa-nav [data-next][hidden] { display: none; }

/* sent */
.sa-done { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.sa-done__card { display: grid; gap: 16px; padding: 22px; border: 1px solid var(--ag-line); border-radius: 24px; background: linear-gradient(160deg, #FFFFFF, var(--ag-tint)); box-shadow: var(--ag-shadow-soft); }
.sa-done__top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: center; }
.sa-done__pin { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--ag-deep); color: var(--ag-sky); animation: sa-drop 0.6s cubic-bezier(0.3, 1.4, 0.5, 1) both; }
@keyframes sa-drop { from { transform: translateY(-18px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sa-done__pin { animation: none; } }
.sa-done__top h2 { margin: 0; font-family: var(--ag-font-display); font-size: 24px; font-weight: 600; color: var(--ag-ink); }
.sa-done__top p { margin: 0; color: var(--ag-muted); }
.sa-done__status { grid-column: 1 / -1; justify-self: start; margin-top: 6px; padding: 4px 12px; border-radius: 999px; background: var(--ag-attn-bg); color: var(--ag-attn); font-size: 13px; font-weight: 800; }
.sa-done__facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 120px), 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.sa-done__facts li { display: grid; gap: 1px; padding: 10px 12px; border-radius: 12px; background: #FFFFFF; border: 1px solid var(--ag-line); }
.sa-done__facts small { color: var(--ag-muted); font-size: 11.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.sa-done__facts b { color: var(--ag-ink); }
.sa-done__who { margin: 0; color: var(--ag-text); font-size: 14.5px; }
.sa-done__next h3 { margin: 0 0 10px; font-family: var(--ag-font-display); font-size: 20px; font-weight: 600; color: var(--ag-ink); }
.sa-done__next ol { display: grid; gap: 10px; margin: 0 0 18px; padding-left: 20px; color: var(--ag-text); }
.sa-done__next b { color: var(--ag-ink); }

@media (max-width: 760px) {
    .sa-ways, .sa-cards { grid-template-columns: minmax(0, 1fr); }
    .sa-done { grid-template-columns: minmax(0, 1fr); }
    .sa-progress__w { display: none; }
    .sa-progress li { padding: 4px; }
    .sa-progress li.is-now { padding-right: 12px; }
    .sa-progress li.is-now .sa-progress__w { display: inline; }
}
@media (max-width: 400px) {
    .sa-paste__row { flex-direction: column; }
}

/* the live preview beside the questions (wide screens only) */
.sa-preview { position: sticky; top: calc(var(--ag-header-h, 88px) + 24px); display: none; gap: 10px; }
@media (min-width: 1100px) { .sa-preview:not([hidden]) { display: grid; } }
.sa-preview__label { margin: 0; color: var(--ag-muted); font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.sa-preview__card { overflow: hidden; border: 1px solid var(--ag-line); border-radius: 22px; background: #FFFFFF; box-shadow: var(--ag-shadow-soft); }
.sa-preview__pic { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(170deg, #9ED9E6 0%, #3AA3BC 52%, #0E6B82 100%); }
.sa-preview__sea { position: absolute; inset: 0; width: 100%; height: 100%; }
.sa-preview__sea path { fill: rgba(255, 255, 255, 0.18); }
.sa-preview__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sa-preview__status { position: absolute; left: 12px; top: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 234, 214, 0.95); color: var(--ag-attn); font-size: 12px; font-weight: 800; }
.sa-preview__body { display: grid; gap: 10px; padding: 16px 18px 18px; }
.sa-preview__body h3 { margin: 0; font-family: var(--ag-font-display); font-size: 22px; font-weight: 600; color: var(--ag-ink); overflow-wrap: anywhere; }
.sa-preview__body h3.is-empty, .sa-preview__body p.is-empty { color: var(--ag-muted); }
.sa-preview__body > p { margin: 0; color: var(--ag-text); font-size: 14.5px; }
.sa-preview__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.sa-preview__facts li { display: grid; gap: 1px; padding: 8px 10px; border-radius: 12px; background: var(--ag-tint); min-width: 0; }
.sa-preview__facts small { color: var(--ag-muted); font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.sa-preview__facts b { overflow: hidden; color: var(--ag-ink); font-size: 14.5px; text-overflow: ellipsis; white-space: nowrap; }
.sa-preview__season { font-weight: 700; color: var(--ag-cyan-ink) !important; }
.sa-preview__note { color: var(--ag-muted) !important; font-size: 13px !important; }