/* Scanner guide - shared by scanner.html and the scan.html instructions modal.
 *
 * #342 put the guide's single copy in scanner.html and made scan_ui.js lift
 * #scanner-guide into the modal. Only the NODES travel, so a <style> block in
 * scanner.html would leave the modal unstyled - which is why the guide markup
 * used to carry its whole layout inline. Both pages link this file instead.
 *
 * TWO RULES for anything added here:
 *
 * 1. No hardcoded colours. Every colour is a --sg-* token whose default is the
 *    LIGHT one, because .modal-input-instructions is `background: white`.
 *    scanner.html re-declares the tokens for its dark page. A literal colour
 *    would be wrong in one of the two hosts.
 * 2. Any class used INSIDE the guide belongs in this file, not in scanner.html.
 *    scanner.html's own .panel/.faq-section do not travel to the modal, so a
 *    guide that leaned on them would come apart there.
 *
 * The photos are deliberately `object-fit: contain`. Several exist to show a
 * "Cropped" or "Cut off" card, so a `cover` box would crop away the very
 * defect the caption points at.
 */
.sg {
    --sg-ink: #1b1b1f;
    --sg-muted: #5b5b66;
    --sg-line: #e3e3ea;
    --sg-panel: #f6f6f9;   /* the section slab */
    --sg-card: #fff;       /* tiles nested inside a slab */
    --sg-mat: rgba(0, 0, 0, .05); /* letterbox behind a contained photo */
    --sg-good: #1a7f37;
    --sg-bad: #b42318;
    --sg-accent: coral;
    color: var(--sg-ink);
}

/* One slab per factor. Mirrors .panel on the public pages (same radius and
   padding) but is defined here so the modal gets it too. */
.sg-section {
    background: var(--sg-panel);
    border: 1px solid var(--sg-line);
    border-radius: 20px;
    padding: 1.25rem 1.5rem;
    margin: 0 0 1.25rem;
}

.sg-section > h2:first-child { margin-top: .2rem; }

.sg h2 {
    /* styles.css - which the scan page loads and scanner.html does not - carries
       three bare h2 rules: `h1,h2{text-align:center;color:black}` and two
       `h2{font-size:...px !important}`. In the modal they centred this heading
       away from its own accent bar and resized it. Hence the explicit
       text-align and colour, and the !important on font-size, which is the only
       way to beat an !important from a lower-specificity rule. */
    font-size: clamp(1.1rem, 2.4vw, 1.4rem) !important;
    text-align: left;
    color: var(--sg-ink);
    line-height: 1.25;
    margin: 1.5rem 0 .4rem;
    padding-left: .6rem;
    border-left: 4px solid var(--sg-accent);
    scroll-margin-top: 5rem; /* the checklist links jump here; clear the fixed nav */
}

.sg p { margin: .5rem 0 .9rem; line-height: 1.65; }
.sg p:last-child { margin-bottom: 0; }
.sg a { color: var(--sg-accent); }

/* The four factors as jump links, in place of a bare <ul> of four words. */
.sg-checklist {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .6rem;
    margin: 1rem 0 .25rem;
    padding: 0;
}
.sg-checklist a {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .7rem .8rem;
    border: 1px solid var(--sg-line);
    border-radius: 10px;
    background: var(--sg-card);
    color: inherit;
    font-weight: 600;
    text-decoration: none;
}
.sg-checklist a:hover { border-color: var(--sg-accent); }
.sg-checklist svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--sg-accent); }

/* Photo grids. auto-fit gives three across on a desktop and one on a phone with
   no media query, and every cell gets the same box so rows line up even though
   the sources run from 500x700 to 2990x2991. */
.sg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1rem;
    margin: 1rem 0 .25rem;
}
.sg-grid--wide { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.sg-shot {
    position: relative;
    margin: 0;
    border: 1px solid var(--sg-line);
    border-radius: 12px;
    background: var(--sg-card);
    padding: .5rem;
}
.sg-shot img {
    display: block;
    width: 100%;
    /* height:auto is load-bearing. The width/height attributes on the <img> are
       presentational hints that map to CSS width/height, and an explicit height
       BEATS aspect-ratio - so without this every tile rendered at the photo's
       height="700" with a tall empty letterbox above and below it. */
    height: auto;
    aspect-ratio: 5 / 7;
    object-fit: contain;
    background: var(--sg-mat);
    border-radius: 8px;
}
.sg-grid--wide .sg-shot img { aspect-ratio: 4 / 3; }

.sg-shot figcaption {
    display: block;
    margin-top: .5rem;
    font-size: .85rem;
    font-weight: 600;
    text-align: center;
    color: var(--sg-muted);
}

.sg-shot--good { border-color: var(--sg-good); }
.sg-shot--bad { border-color: var(--sg-bad); }
.sg-shot--good figcaption { color: var(--sg-good); }
.sg-shot--bad figcaption { color: var(--sg-bad); }

/* A corner pill, in place of the 2rem bare emoji that sat under each photo.
   The glyph is aria-hidden; the caption carries the meaning. */
.sg-mark {
    position: absolute;
    top: .9rem;
    left: .9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
.sg-shot--good .sg-mark { background: var(--sg-good); }
.sg-shot--bad .sg-mark { background: var(--sg-bad); }

@media (max-width: 480px) {
    .sg-section { padding: 1rem; border-radius: 14px; }
    .sg-grid { grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: .6rem; }
    .sg-shot { padding: .35rem; }
    .sg-mark { top: .7rem; left: .7rem; width: 22px; height: 22px; font-size: .8rem; }
}