/* Review QR: owner page and print template.
   Brand tokens: Richmond Green, Warm Gold, Cream, Charcoal. */

:root {
    --green: #1a3a2a;
    --gold: #b08d3a;
    --cream: #f7f5ee;
    --cream-dark: #e7e3ca;
    --charcoal: #2d2c28;
    --mid: #6b6960;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
    background: var(--cream);
    color: var(--charcoal);
    font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.4;
}

.rq-page {
    max-width: 1040px;
    margin: 0 auto;
    padding: 24px 16px 48px;
}

.rq-message {
    background: #fff;
    border: 1px solid var(--cream-dark);
    border-radius: 6px;
    padding: 18px;
    font-size: 1.05rem;
}
.rq-message a { color: var(--green); font-weight: 700; }

[hidden] { display: none !important; }

#rq-app {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

@media (min-width: 860px) {
    #rq-app { grid-template-columns: 340px 1fr; align-items: start; }
}

/* ---------------------------------------------------------------- Controls */

.rq-title {
    font-family: 'Libre Baskerville', Georgia, serif;
    color: var(--green);
    font-size: 1.6rem;
    line-height: 1.2;
    margin: 0 0 12px;
}

.rq-lead { margin: 0 0 20px; font-size: 1.05rem; }

.rq-sizes {
    border: 1px solid var(--cream-dark);
    border-radius: 6px;
    background: #fff;
    padding: 12px 16px 16px;
    margin: 0 0 20px;
}
.rq-sizes legend { padding: 0 6px; font-weight: 700; color: var(--green); }

.rq-sizes label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 12px;
    min-height: 52px;
    padding: 8px 0;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
}
.rq-sizes input { width: 22px; height: 22px; accent-color: var(--green); }
.rq-sizes label span { flex-basis: 100%; margin-left: 34px; font-weight: 400; font-size: .9rem; color: var(--mid); }

.rq-actions { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }

.rq-btn {
    min-height: 52px;
    padding: 12px 18px;
    border: 2px solid var(--green);
    border-radius: 6px;
    background: #fff;
    color: var(--green);
    font: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
}
.rq-btn:hover, .rq-btn:focus-visible { background: var(--cream-dark); }
.rq-btn-primary { background: var(--green); color: #fff; }
.rq-btn-primary:hover, .rq-btn-primary:focus-visible { background: #12291d; }

.rq-hint, .rq-note { color: var(--mid); font-size: .95rem; margin: 0 0 16px; }

.rq-stats {
    background: #fff;
    border-left: 4px solid var(--gold);
    padding: 12px 14px;
    margin: 0 0 16px;
    font-weight: 600;
}

/* ------------------------------------------------------------------- Sheet
   Everything inside the sheet is sized in em, so one design serves every
   print size. The font size alone sets the scale. */

.rq-stage { container-type: inline-size; width: 100%; max-width: 640px; }

.rq-sheet {
    --qr: 21em;
    position: relative;
    width: 100%;
    background: #fff;
    border: 1px solid var(--cream-dark);
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(45, 44, 40, .12);
    aspect-ratio: 210 / 297;
    font-size: calc((100vw - 32px) / 42);   /* fallback */
    font-size: calc(100cqw / 42);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.1em;
    padding: 3.4em 3em 3em;
    text-align: center;
    overflow: hidden;
}

.rq-sheet[data-size="a5"] { aspect-ratio: 148 / 210; }

.rq-sheet[data-size="card"] {
    --qr: 14em;
    aspect-ratio: 90 / 120;
    font-size: calc((100vw - 32px) / 28);   /* fallback */
    font-size: calc(100cqw / 28);
    gap: .8em;
    padding: 2.6em 2em 2.2em;
    max-width: 360px;
}

/* A quiet inner frame, kept clear of the printer's unprintable margin. */
.rq-sheet::before {
    content: '';
    position: absolute;
    inset: 1.5em;
    border: .12em solid var(--gold);
    border-radius: .3em;
    pointer-events: none;
}

.rq-eyebrow {
    margin: 0;
    color: var(--gold);
    font-size: .85em;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.rq-head {
    margin: 0;
    font-family: 'Libre Baskerville', Georgia, serif;
    color: var(--green);
    line-height: 1.2;
    font-weight: 400;
}
.rq-head-lead { display: block; font-size: 1.5em; margin-bottom: .25em; }
.rq-head-name { display: block; font-size: 2.5em; font-weight: 700; }
.rq-sheet.rq-long  .rq-head-name { font-size: 2em; }
.rq-sheet.rq-xlong .rq-head-name { font-size: 1.55em; }

.rq-sheet[data-size="card"] .rq-head-lead { font-size: 1.15em; }
.rq-sheet[data-size="card"] .rq-head-name { font-size: 2em; }
.rq-sheet[data-size="card"].rq-long  .rq-head-name { font-size: 1.6em; }
.rq-sheet[data-size="card"].rq-xlong .rq-head-name { font-size: 1.3em; }

.rq-sub { margin: 0; font-size: 1.2em; max-width: 26em; }

.rq-qr {
    width: var(--qr);
    padding: 1.1em;
    background: #fff;
    border: .12em solid var(--cream-dark);
    border-radius: .4em;
}
.rq-qr img { display: block; width: 100%; height: auto; }

.rq-caption { margin: 0; font-size: 1.05em; font-weight: 600; max-width: 28em; }

.rq-foot {
    margin-top: auto;
    padding-top: .9em;
    border-top: .1em solid var(--cream-dark);
    width: 100%;
    color: var(--mid);
    font-size: .88em;
}
.rq-foot p { margin: 0; }
.rq-host { margin-top: .3em !important; color: var(--green); font-weight: 700; }

.rq-sheet[data-size="card"] .rq-sub,
.rq-sheet[data-size="card"] .rq-foot p:first-child { display: none; }
.rq-sheet[data-size="card"] .rq-caption { font-size: .95em; }

.rq-offscreen { position: absolute; left: -9999px; top: 0; width: 1000px; height: 1000px; }

/* ------------------------------------------------------------------- Print */

@media print {
    html, body { background: #fff; }
    .rq-page { max-width: none; padding: 0; margin: 0; }
    .rq-message, .rq-controls, .rq-offscreen { display: none !important; }
    #rq-app { display: block; }
    .rq-stage { container-type: normal; max-width: none; width: auto; }

    .rq-sheet {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        aspect-ratio: auto;
        max-width: none;
        overflow: hidden;
        page-break-inside: avoid;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .rq-sheet[data-size="a4"]   { width: 210mm; height: 297mm; font-size: 5mm; }
    .rq-sheet[data-size="a5"]   { width: 148mm; height: 210mm; font-size: 3.52mm; }
    .rq-sheet[data-size="card"] { width: 90mm;  height: 120mm; font-size: 3.2mm; }
}