/* Site styles on top of BeerCSS 5. Keep it small: BeerCSS helpers first. */

/* Scanner screen (scan.html + static/js/scanner.js) */
#scanner [hidden] {
    display: none !important;    /* BeerCSS sets display on buttons and nav, which beats the hidden attribute */
}
#scanner {
    display: flex; flex-direction: column;
    block-size: calc(100dvh - 5rem - var(--top, 0px));    /* under the 4rem header and main's 0.5rem padding */
    min-block-size: 24rem;
}
.scanner-stage {
    position: relative; flex: 1;
    overflow: hidden;
    container-type: size;
}
#reader, #reader video {    /* the camera fills the stage; the whole frame is decoded, not just the viewfinder */
    position: absolute;
    inset: 0;
    inline-size: 100%; block-size: 100%;
    object-fit: cover;
}
/* Viewfinder: four corners in the middle of the stage. Not too large: filling it must not bring the phone closer
   than its camera can focus (~10 cm); the whole frame is decoded anyway. */
.scanner-frame {
    --corner: 2.5rem;
    position: absolute;
    inset: 0;
    margin: auto;
    inline-size: 12rem; block-size: 12rem;    /* without container units (iOS < 16) */
    inline-size: 45cqmin; block-size: 45cqmin;
    border: 0.25rem solid #fff;
    border-radius: 1rem;
    mask: conic-gradient(at var(--corner) var(--corner), #0000 75%, #000 0)
          0 0 / calc(100% - var(--corner)) calc(100% - var(--corner));
    pointer-events: none;
}
.scanner-hint { padding: 1.25rem 4.5rem; text-shadow: 0 1px 3px #000; }    /* text clear of the close button */
@media (min-width: 601px) { #scanner { block-size: min(calc(100dvh - 7rem), 44rem); } }

/* Share link (qr_link.html): field, copy and share (touch screens only, iOS icon on WebKit) as one square-joined control */
.share-link > .field { border-start-end-radius: 0; border-end-end-radius: 0; }
.share-link > button, .share-link > button:not(.chip):active {    /* :active: BeerCSS morphs pressed buttons */
    align-self: stretch; block-size: auto; border-radius: 0 0.25rem 0.25rem 0 !important;
}
@media not all and (pointer: coarse) { .share-link > [data-share-link] { display: none; } }
@media (pointer: coarse) { .share-link > button:not(:last-child) { border-radius: 0 !important; border-inline-end: 1px solid var(--surface); } }
@supports not (-webkit-touch-callout: none) { .share-link .ios { display: none; } }
@supports (-webkit-touch-callout: none) { .share-link .ios + i { display: none; } }
/* Record page (qr_show.html); long scanned links in qr_error.html wrap at any character */
html { text-size-adjust: 100%; }
.wrap-anywhere { overflow-wrap: anywhere; }
.qr-code { inline-size: min(70vw, 20rem); block-size: auto; }
/* Two QR downloads side by side on a 393px phone: icon + download icon + short label, a little tighter than BeerCSS */
.downloads > :is(.button, button) { padding-inline: 0.75rem; gap: 0.25rem; }
/* BeerCSS cuts main's padding to 0.1px when a child has a *margin* class (auto-margin), so text touched the screen
   edge on a phone. The scanner stays edge to edge. */
main:has(> [class*=margin]:not(#scanner)) { padding: var(--_padding); }
/* Settings sheet (include/settings.html): full width on a phone, a centred 36rem sheet on a wide screen */
#settings-sheet { max-inline-size: 36rem; inset-inline: 0; margin-inline: auto; }

/* Home page feature list (include/main_description.html): inline rows on a phone, aligned columns from 601px */
.feature-list { margin: 0.75rem 0 1rem; }
.feature-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
}
.feature-row > :first-child { flex-shrink: 0; }    /* the chip keeps its label on one line, the text wraps */
@media (min-width: 601px) {
    .feature-list {
        display: grid;
        grid-template-columns: max-content 1fr;
        gap: 0.5rem 1rem;
    }
    .feature-row {
        display: contents;
    }
}