/*************************
**  Our Tasmania Website
**  Survey notice page style sheet  (survey-in-progress.php)
**  Build V. 0.1
**  Build Notes: the page a poster beside my gear points at. Read on a phone,
**  outdoors, by somebody standing next to unattended kit — so the request is
**  set larger than anything else on the page and everything under it is kept
**  short. The hero, .ruled, .intro-card and the buttons all come from
**  styles-base.css; only the parts below are the page's own.
**
**  No outlines anywhere here: panels are marked by a fill and, where they
**  need an accent, a solid left edge — the same way .ot-note does it.
**********************/


/* =====================================================
    THE FOUR POINTS
   ===================================================== */
/* Four, explicitly — auto-fit at 260px gave three across and left the fourth
   as an orphan on its own row, which read as a mistake rather than a row of
   facts. */
.sn-points {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem 1.75rem;
}
@media (max-width: 991px) { .sn-points { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479px) { .sn-points { grid-template-columns: 1fr; gap: 1.75rem; } }
/* No fill and no radius: these are four facts, and as panels they were four
   more cards in a page that had too many. The icon does the work the card
   outline was doing, at a size that actually registers. */
.sn-point { padding: 0; }
.sn-point__icon {
    color: var(--emerald);
    font-size: 1.6rem;
    display: block;
    margin-bottom: 1rem;
}
.sn-point__title {
    font-family: var(--font-display);
    font-size: 1rem; font-weight: 700;
    color: var(--ink);
    line-height: 1.25;
    margin: 0 0 .5rem;
}
.sn-point__text {
    font-size: .85rem; line-height: 1.8;
    color: var(--ink-2);
    margin: 0;
}


/* =====================================================
    IF SOMETHING SEEMS WRONG
    Teal, so it reads as a different kind of message from the amber request
    above it — that one is asking something of the reader, this one is
    giving them permission.
   ===================================================== */
.sn-worry {
    background: var(--bg-card);
    border-left: 4px solid var(--teal);
    border-radius: var(--radius-lg);
    padding: 2rem 2.25rem;
}
.sn-worry__lead {
    font-family: var(--font-display);
    font-size: 1.05rem; font-weight: 600;
    color: var(--ink);
    line-height: 1.6;
    margin: 0 0 1rem;
    max-width: 62ch;
}
.sn-worry__text {
    font-size: .88rem; line-height: 1.9;
    color: var(--ink-2);
    margin: 0 0 .9rem;
    max-width: 62ch;
}
/* 000 is the one piece of text on this page somebody might need to find at a
   glance in poor light. */
.sn-worry__text strong {
    color: var(--teal);
    font-weight: 700;
    font-size: 1.05em;
    letter-spacing: .04em;
}
.sn-worry__cta { margin: 1.25rem 0 0; }

/* The label flips with the theme, because the ground does.
   --teal and --emerald are bright in the dark theme and dark in the light
   one, so a single label colour fails at one end or the other:

                        white label   near-black label
     dark  --teal          2.39:1          8.00:1
     dark  --emerald       3.29:1          5.81:1
     light --teal          7.17:1          2.66:1
     light --emerald       5.64:1          3.39:1

   Near-black here, matching every other accent button on the site, and
   white under html[data-theme="light"] below. That override also has to
   exist for a second reason: these are <a> elements, and
   `html[data-theme="light"] a` outranks a single class, so without it the
   generic light link colour takes the label over — the same trap noted on
   .help-contact__btn and .photo-hero__btn. */
.btn-sn {
    display: inline-flex; align-items: center; gap: .55rem;
    background: var(--teal);
    color: #0e100f;
    font-family: var(--font-mono); font-size: .7rem;
    letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
    padding: .8rem 1.6rem .7rem;
    border-radius: var(--radius);
    text-decoration: none;
    transition: filter .2s, transform .15s;
}
.btn-sn:hover {
    color: #0e100f;
    filter: brightness(1.12);
    transform: translateY(-1px);
}
html[data-theme="light"] .btn-sn,
html[data-theme="light"] .btn-sn:hover {
    color: #fff;
}

@media (max-width: 767px) {
    .sn-worry { padding: 1.5rem 1.4rem; }
    /* A thumb on a wet phone screen: the one action on the page goes
       full width rather than being a small target in the corner. */
    .btn-sn { width: 100%; justify-content: center; }
}


/* =====================================================
    WHERE THE WORK ENDS UP
   ===================================================== */
.sn-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin-bottom: 2.5rem;
}
.sn-link {
    display: block;
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 1.5rem;
    text-decoration: none;
    transition: background .2s, transform .15s;
}
.sn-link:hover {
    background: var(--emerald-dim);
    transform: translateY(-2px);
}
.sn-link__icon {
    color: var(--emerald);
    font-size: 1.05rem;
    display: block;
    margin-bottom: .8rem;
}
.sn-link__title {
    display: block;
    font-family: var(--font-display);
    font-size: .98rem; font-weight: 700;
    color: var(--ink);
    margin-bottom: .35rem;
}
.sn-link__text {
    display: block;
    font-size: .82rem; line-height: 1.7;
    color: var(--ink-2);
}

/* One card, or two when a session is live — capped so a single one does not
   stretch across the page the way a 1fr track would. The three-up group above
   keeps 1fr and fills its row. */
.sn-links--pair {
    grid-template-columns: repeat(auto-fit, minmax(240px, 340px));
    justify-content: start;
}

.sn-thanks {
    font-family: var(--font-mono);
    font-size: .78rem; letter-spacing: .04em;
    color: var(--ink-3);
    text-align: center;
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    .sn-link, .btn-sn { transition: none; }
    .sn-link:hover, .btn-sn:hover { transform: none; }
}


/* =====================================================
    LIGHT THEME
    The surfaces take the ivory field-guide treatment the rest of the site's
    cards use. The accents themselves need no overrides: --amber, --teal and
    --emerald all carry light variants, so the edges and icons follow.
   ===================================================== */
html[data-theme="light"] .sn-worry,
html[data-theme="light"] .sn-link {
    background: var(--bg-card);
    box-shadow: 0 8px 24px rgba(55,45,28,.06);
}
html[data-theme="light"] .sn-link:hover { background: var(--emerald-dim); }
html[data-theme="light"] .sn-point__text,
html[data-theme="light"] .sn-worry__text,
html[data-theme="light"] .sn-link__text { color: var(--ink-2); }
html[data-theme="light"] .sn-thanks { color: var(--ink-2); }


/* =====================================================
    STATUS FLAG
    The first question somebody scanning the sign has: is he out there now?
    It sits straight under the hero, above the request, and is driven by
    ot_survey_sessions — see the query at the top of survey-in-progress.php.
   ===================================================== */
.sn-status-wrap { padding-top: 1.75rem; }

.sn-status {
    display: flex; align-items: baseline; flex-wrap: wrap;
    gap: .5rem .85rem;
    background: var(--bg-card);
    border-left: 4px solid var(--note-accent, var(--ink-4));
    border-radius: var(--radius);
    padding: .9rem 1.25rem .8rem;
    margin: 0;
}
.sn-status--live { --note-accent: var(--emerald); }
.sn-status--idle { --note-accent: var(--ink-4); }

/* A quiet pulse, only while somebody is actually in the water. It is the one
   thing on the page that should catch the eye on a bright screen outdoors. */
.sn-status__dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--emerald);
    flex-shrink: 0;
    align-self: center;
    animation: sn-pulse 2.4s ease-in-out infinite;
}
@keyframes sn-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .45; transform: scale(.82); }
}
@media (prefers-reduced-motion: reduce) {
    .sn-status__dot { animation: none; }
}

.sn-status__label {
    font-family: var(--font-mono);
    font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
    font-weight: 600;
    color: var(--note-accent, var(--ink-2));
    flex-shrink: 0;
}
.sn-status__detail {
    font-size: .86rem; line-height: 1.7;
    color: var(--ink-2);
}
.sn-status__note {
    font-size: .82rem; line-height: 1.7;
    color: var(--ink-3);
    margin: .6rem 0 0;
    padding-left: 1.25rem;
}


/* =====================================================
    LENDING A HAND
    Emerald, because unlike the amber request and the teal reassurance this
    one is an invitation.
   ===================================================== */
.sn-help {
    display: flex; gap: 1.5rem; align-items: flex-start;
    background: var(--bg-card);
    border-left: 4px solid var(--emerald);
    border-radius: var(--radius-lg);
    padding: 2rem 2.25rem;
}
.sn-help__icon {
    color: var(--emerald);
    font-size: 1.5rem;
    line-height: 1.5;
    flex-shrink: 0;
}
.sn-help__body { min-width: 0; }
.sn-help__over {
    font-family: var(--font-mono);
    font-size: .62rem; letter-spacing: .2em; text-transform: uppercase;
    color: var(--emerald);
    margin: 0 0 .35rem;
}
.sn-help__title {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 3vw, 1.6rem); font-weight: 800;
    color: var(--ink);
    line-height: 1.15;
    margin: 0 0 .9rem;
}
.sn-help__text {
    font-size: .88rem; line-height: 1.9;
    color: var(--ink-2);
    margin: 0 0 .9rem;
    max-width: 62ch;
}
.sn-help__cta { margin: 1.25rem 0 0; }
/* The help CTA reuses .btn-sn but belongs to this section's accent. */
.sn-help__cta .btn-sn { background: var(--emerald); }

@media (max-width: 767px) {
    .sn-help { padding: 1.5rem 1.4rem; gap: 1rem; }
    .sn-help__icon { font-size: 1.2rem; }
}

html[data-theme="light"] .sn-status,
html[data-theme="light"] .sn-help {
    background: var(--bg-card);
    box-shadow: 0 8px 24px rgba(55,45,28,.06);
}
html[data-theme="light"] .sn-status__detail,
html[data-theme="light"] .sn-help__text { color: var(--ink-2); }
html[data-theme="light"] .sn-status__note { color: var(--ink-2); }
/* --ink-4 is a label colour, not a text one, and the idle flag's edge is the
   only thing that uses it here — the label beside it takes a readable step. */
html[data-theme="light"] .sn-status--idle .sn-status__label { color: var(--ink-2); }


/* =====================================================
    THE GEAR
    A compact read of ot_gear, not the full .gear-card the survey pages use —
    that one carries per-survey usage notes and lives in two page sheets this
    page does not load. Here it only has to be interesting enough to tap.
   ===================================================== */
.sn-gear__lead {
    font-size: .9rem; line-height: 1.9;
    color: var(--ink-2);
    max-width: 62ch;
    margin: 0 0 1.5rem;
}

.sn-gear {
    display: grid;
    /* Capped rather than 1fr: the catalogue is short, and a lone item on a
       1fr track stretches into one page-wide card with a letterboxed photo.
       With a ceiling the row simply starts from the left however many there
       are. */
    grid-template-columns: repeat(auto-fit, minmax(240px, 320px));
    justify-content: start;
    gap: 1rem;
}
.sn-gear__item {
    display: flex; flex-direction: column;
    background: var(--bg-card);
    border-radius: var(--radius);
    overflow: hidden;
}

/* A fixed band rather than letting each supplier's photo set its own height,
   which otherwise leaves the names in a grid row at different heights. */
.sn-gear__shot {
    height: 150px;
    background: var(--parchment-dim);
    flex-shrink: 0;
}
.sn-gear__shot img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

.sn-gear__body {
    display: flex; flex-direction: column;
    flex: 1;
    padding: 1.25rem 1.35rem 1.1rem;
}
.sn-gear__cat {
    font-family: var(--font-mono);
    font-size: .56rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--emerald);
    margin: 0 0 .35rem;
}
.sn-gear__name {
    font-family: var(--font-display);
    font-size: .95rem; font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
    margin: 0 0 .45rem;
}
.sn-gear__text {
    font-size: .82rem; line-height: 1.75;
    color: var(--ink-2);
    margin: 0 0 1rem;
}

/* Pushed to the bottom so the buy row lines up across cards whose copy runs
   to different lengths. */
.sn-gear__foot {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: .6rem;
    margin-top: auto;
    padding-top: .9rem;
}
.sn-gear__more {
    font-family: var(--font-mono);
    font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--emerald);
    text-decoration: none;
    white-space: nowrap;
}
.sn-gear__more:hover { color: var(--emerald-lt); }

.sn-gear__buy {
    display: inline-flex; align-items: center; gap: .5rem;
}
/* The supplier logos arrive as white SVGs sized for a dark page. A rounded
   fill of their own gives them a ground in both themes, instead of the light
   theme getting white-on-ivory. Unbranded suppliers keep this neutral ink
   chip; the two we have get their own colours below. */
.sn-gear__buy-btn {
    display: inline-flex; align-items: center; justify-content: center;
    /* These are the only thing on the page somebody taps with a wet thumb
       besides the two buttons, and at 52x26 the logos came out 39px wide and
       9px tall — small to hit and hard to recognise. */
    width: 68px; height: 36px;
    padding: 0 .55rem;
    border-radius: var(--radius-sm, 6px);
    background: var(--ink);
    transition: filter .15s, transform .15s;
}
.sn-gear__buy-btn:hover { filter: brightness(1.25); transform: translateY(-1px); }
.sn-gear__buy-btn img {
    max-width: 100%; max-height: 20px;
    width: auto; height: auto;
    display: block;
}

/* Brand colours, keyed off the supplier name.

   The logos are supplied as white SVGs, which only works on a dark ground.
   AliExpress red carries white at 4.41:1, so that one is left alone. Amazon
   yellow does not — white on #ffd814 measures 1.39:1, effectively invisible
   — so its logo is inverted to black, which is also how Amazon's own buttons
   look. brightness(0) drives any solid colour to black, and is scoped to
   this one modifier so a future supplier's coloured logo is not flattened
   with it. */
.sn-gear__buy-btn--aliexpress { background: #e62e04; }
.sn-gear__buy-btn--amazon     { background: #ffd814; }
.sn-gear__buy-btn--amazon img { filter: brightness(0); }

.sn-gear__disclosure {
    font-size: .78rem; line-height: 1.8;
    color: var(--ink-3);
    max-width: 62ch;
    margin: 1.5rem 0 0;
}

@media (prefers-reduced-motion: reduce) {
    .sn-gear__buy-btn { transition: none; }
    .sn-gear__buy-btn:hover { transform: none; }
}

/* On ivory the yellow chip is 1.25:1 against the card and loses its edge. The
   soft shadow the cards already use gives it one, without an outline. */
html[data-theme="light"] .sn-gear__buy-btn {
    box-shadow: 0 2px 8px rgba(55,45,28,.18);
}

html[data-theme="light"] .sn-gear__item {
    background: var(--bg-card);
    box-shadow: 0 8px 24px rgba(55,45,28,.06);
}
html[data-theme="light"] .sn-gear__lead,
html[data-theme="light"] .sn-gear__text,
html[data-theme="light"] .sn-gear__disclosure { color: var(--ink-2); }
html[data-theme="light"] .sn-gear__more { color: var(--emerald-drk); }
html[data-theme="light"] .sn-gear__more:hover { color: var(--emerald-xdrk); }


/* =====================================================
    THE HERO
    The photograph is pinned rather than drawn from the random header pool,
    so it needs a ground of its own underneath. .ot-hero__bg has no
    background-color, which is fine on pages where the title is only ever
    over a loaded photo — but this page gets opened on coastal mobile data
    from a printed sign, and for the seconds before the image arrives the
    white title was sitting on bare parchment in the light theme. A deep
    water tone behind it means the words are readable first and the
    photograph simply fades in over the top.
   ===================================================== */
.sn-hero .ot-hero__bg { background-color: #16262b; }


/* =====================================================
    THE ASK, AS A PHOTOGRAPH
    This replaced an ivory panel. It is the loudest thing on the page and it
    was reading as one more card in a stack of them, which is the opposite of
    what a request should do.

    Built on the .feat-banner idea from styles-x-locations.css, including the
    important part: everything on the veil uses LITERAL colours, not tokens.
    The surface under this text is a photograph in both themes, so a token
    would flip the text to its dark-on-parchment value over a dark veil —
    exactly the fault .info-overline on the contact page had.
   ===================================================== */
.sn-banner-wrap { padding: 1.75rem 0 2.5rem; }

.sn-banner {
    position: relative; overflow: hidden;
    min-height: 26rem;
    display: flex; align-items: flex-end;
    border-radius: var(--radius-xl);
    background-image: var(--shot, none);
    background-size: cover;
    background-position: center 45%;
    background-color: var(--bg-3);
}
.sn-banner__veil {
    position: absolute; inset: 0;
    background:
        linear-gradient(to top,   rgba(14,16,15,.96) 0%, rgba(14,16,15,.74) 44%, rgba(14,16,15,.2) 80%),
        linear-gradient(to right, rgba(14,16,15,.76) 0%, transparent 64%);
}
.sn-banner__body {
    position: relative; z-index: 1;
    padding: 2.75rem;
    max-width: 44rem;
}
.sn-banner__over {
    display: flex; align-items: center; gap: .7rem;
    font-family: var(--font-mono);
    font-size: .64rem; letter-spacing: .22em; text-transform: uppercase;
    color: #e8b76a;
    margin: 0 0 .9rem;
}
.sn-banner__over span { width: 22px; height: 1px; background: #e8b76a; flex: none; }
.sn-banner__title {
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 5.5vw, 3.8rem);
    font-weight: 900; line-height: .95; letter-spacing: -.035em;
    color: #f7f2e8;
    margin: 0 0 1rem;
}
.sn-banner__text {
    font-size: .95rem; line-height: 1.9;
    color: rgba(247,242,232,.84);
    margin: 0;
    max-width: 48ch;
}

@media (max-width: 767px) {
    .sn-banner { min-height: 22rem; }
    .sn-banner__body { padding: 1.75rem 1.4rem; }
}


/* =====================================================
    OPEN PROSE
    What used to be an .intro-card. The accent bar and the panel fill were
    doing nothing the heading above it was not already doing, so the copy
    sits on the page now and the first paragraph carries the weight instead.
   ===================================================== */
.sn-lede { max-width: 64ch; margin-bottom: 3rem; }
.sn-lede__big {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2.4vw, 1.5rem);
    font-weight: 600; line-height: 1.5;
    color: var(--ink);
    margin: 0 0 1rem;
}
.sn-lede__text {
    font-size: .92rem; line-height: 1.95;
    color: var(--ink-2);
    margin: 0 0 .9rem;
}
.sn-lede__text:last-child { margin-bottom: 0; }
/* The open-data block runs to three paragraphs and carries a heading of its
   own, so it gets a wider measure than the one-paragraph lede above. */
.sn-lede--wide { max-width: 72ch; }
.sn-lede__head {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 3vw, 1.8rem);
    font-weight: 800; line-height: 1.15;
    color: var(--ink);
    margin: 0 0 1rem;
}


/* =====================================================
    WHAT COMES BACK
    Real photographs from the surveys, each one linking to that species. The
    strip runs the full width of the viewport rather than sitting inside the
    container, so it reads as a band of images and not a row of cards.
   ===================================================== */
.sn-shots-wrap { padding: 0 0 3.5rem; }

.sn-shots__label {
    font-family: var(--font-mono);
    font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
    color: var(--ink-3);
    text-align: center;
    margin: 0 0 1.25rem;
}

.sn-shots {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
}
.sn-shot {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--bg-3);
    text-decoration: none;
}
.sn-shot img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
.sn-shot:hover img,
.sn-shot:focus-visible img { transform: scale(1.07); }

/* The name only appears on hover, and its backdrop is the photograph, so the
   veil and the text are literal colours for the same reason the banner's are. */
.sn-shot__veil {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(14,16,15,.9) 0%, transparent 55%);
    opacity: 0;
    transition: opacity .3s ease;
}
.sn-shot__name {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: .7rem .75rem .65rem;
    font-family: var(--font-mono);
    font-size: .58rem; letter-spacing: .06em; line-height: 1.4;
    color: #f7f2e8;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .3s ease, transform .3s ease;
}
.sn-shot:hover .sn-shot__veil,
.sn-shot:focus-visible .sn-shot__veil,
.sn-shot:hover .sn-shot__name,
.sn-shot:focus-visible .sn-shot__name { opacity: 1; }
.sn-shot:hover .sn-shot__name,
.sn-shot:focus-visible .sn-shot__name { transform: translateY(0); }

/* Eight across is a hairline on a phone. Four, then two, keeps each frame big
   enough to be worth looking at, which is the whole point of the strip. */
@media (max-width: 991px) { .sn-shots { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 479px) { .sn-shots { grid-template-columns: repeat(2, 1fr); } }

/* A photograph is not a card and gets no shadow in either theme; the strip's
   own edges are the images. */
@media (prefers-reduced-motion: reduce) {
    .sn-shot img,
    .sn-shot__veil,
    .sn-shot__name { transition: none; }
    .sn-shot:hover img, .sn-shot:focus-visible img { transform: none; }
}