/**
 * Product visuals for the public pages (sample data only):
 * guest-book page, scan review, origin map, monthly report, QR check-in sign.
 * Sizes match the Field Journal design at desktop width and reflow on phones.
 */

.pv-badge {
    font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: #8A7A60; border: 1px solid #DDD7CC; padding: 3px 8px; border-radius: 4px; white-space: nowrap;
}

/* The design renders every component at line-height: normal. */
.pv-guestbook, .pv-scan, .pv-origin, .pv-report, .pv-sign { line-height: normal; }

/* ---------- Guest-book page (420 x 520) ---------- */
.pv-guestbook {
    width: 420px; height: 520px; background: #FBF8F1; border-radius: 3px;
    box-shadow: 0 1px 0 #E6DFD0, 0 18px 40px rgba(27, 58, 45, .22);
    padding: 26px 26px 0; display: flex; flex-direction: column;
    font-family: var(--font-body); position: relative; overflow: hidden; color: var(--color-forest);
    text-align: left;
}
.pv-guestbook::before { content: ''; position: absolute; top: 0; bottom: 0; left: 84px; width: 1px; background: var(--color-margin); }
.pv-guestbook__head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; }
.pv-guestbook__title { font-family: var(--font-heading); font-size: 22px; color: var(--color-forest); }
.pv-guestbook__please { font-size: 10px; font-weight: 700; letter-spacing: .14em; color: #8A7A60; }
.pv-guestbook__cols, .pv-guestbook__row { display: grid; grid-template-columns: 58px 1fr 1fr 36px; gap: 0 10px; }
.pv-guestbook__cols { font-size: 9px; font-weight: 700; letter-spacing: .12em; color: #8A7A60; border-bottom: 2px solid var(--color-forest); padding-bottom: 6px; }
.pv-guestbook__row {
    height: 37px; flex-shrink: 0; align-items: end; padding-bottom: 3px; border-bottom: 1px solid #D3CAB7;
    font-family: var(--font-hand); font-weight: 400; font-size: 21px; line-height: 1; color: #27406B;
    white-space: nowrap; overflow: hidden;
}
.pv-guestbook__row span { overflow: hidden; }
.pv-guestbook__party { text-align: center; }

/* ---------- Scan review (760 x 460) ---------- */
.pv-scan {
    width: 760px; max-width: 100%; height: 460px; background: #FFFFFF; border-radius: 10px;
    box-shadow: 0 18px 48px rgba(27, 58, 45, .18); overflow: hidden; display: flex; flex-direction: column;
    font-family: var(--font-body); color: var(--color-forest); text-align: left;
}
.pv-scan__bar { height: 48px; flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: 0 18px; border-bottom: 1px solid #E8E4DC; }
.pv-scan__title { font-size: 14px; font-weight: 600; white-space: nowrap; }
.pv-scan__context { font-size: 13px; color: var(--color-muted-green); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pv-scan__spacer { flex: 1; }
.pv-scan__progress { font-size: 12px; font-weight: 600; color: var(--color-pine); background: #E6F0E9; padding: 4px 10px; border-radius: 100px; white-space: nowrap; }
.pv-scan__body { flex: 1; display: flex; min-height: 0; }
.pv-scan__photo { width: 300px; flex-shrink: 0; background: #3A3F3B; position: relative; overflow: hidden; }
.pv-scan__page { position: absolute; left: 24px; top: 22px; transform: scale(.6); transform-origin: top left; }
.pv-scan__highlight { position: absolute; left: 24px; top: 206px; width: 252px; height: 24px; border: 2px solid #E0A33A; border-radius: 3px; background: rgba(224, 163, 58, .12); }
.pv-scan__caption { position: absolute; left: 12px; bottom: 10px; font-size: 11px; color: #D8DDD9; z-index: 1; }
.pv-scan__table { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pv-scan__row { display: grid; grid-template-columns: 1fr 1fr 40px 116px; gap: 10px; padding: 0 18px; height: 38px; align-items: center; font-size: 13px; border-bottom: 1px solid #F0EDE7; background: #FFFFFF; }
.pv-scan__row--head { height: auto; padding: 10px 18px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted-green); border-bottom-color: #E8E4DC; }
.pv-scan__cell { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pv-scan__date { white-space: nowrap; color: var(--color-muted-green); }
.pv-scan__status { font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--color-pine); }
.pv-scan__row--flagged { background: #FDF5E6; }
.pv-scan__row--flagged .pv-scan__home { font-weight: 600; }
.pv-scan__row--flagged .pv-scan__status { color: #A86A12; }
.pv-scan__foot { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid #E8E4DC; }
.pv-scan__hint { flex: 1; min-width: 0; font-size: 12px; line-height: 1.35; color: var(--color-muted-green); }
.pv-scan__btn { flex-shrink: 0; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--color-forest); border: 1px solid var(--color-input-border); padding: 7px 12px; border-radius: 6px; }
.pv-scan__btn--primary { color: #FFFFFF; background: var(--color-pine); border-color: var(--color-pine); padding: 7px 13px; }

/* ---------- Origin map ---------- */
.pv-origin {
    width: 100%; min-width: 0; height: 420px; background: #FFFFFF; border-radius: 10px;
    box-shadow: 0 18px 48px rgba(27, 58, 45, .14); padding: 22px 24px; display: flex; flex-direction: column; gap: 16px;
    font-family: var(--font-body); color: var(--color-forest);
}
.pv-origin__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.pv-origin__titles { display: flex; flex-direction: column; gap: 4px; }
.pv-origin__title { font-size: 16px; font-weight: 700; }
.pv-origin__sub { font-size: 12px; color: var(--color-muted-green); }
/* The design grid box is 462 x 272; the last column (col 11) sits just outside
   it, as in the design. On narrow screens the box shrinks so that column fits. */
.pv-origin__map { position: relative; width: 100%; max-width: 462px; aspect-ratio: 462 / 272; margin: 0 auto; container-type: inline-size; }
.pv-origin__tile {
    position: absolute; width: 8.4416%; height: 11.0294%; border-radius: 3px;
    font-size: clamp(6px, 2.1645cqw, 10px); font-weight: 600; display: flex; align-items: center; justify-content: center;
}
.pv-origin__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 11px; color: var(--color-muted-green); }
.pv-origin__ramp { display: flex; gap: 2px; }
.pv-origin__ramp i { display: block; width: 22px; height: 8px; border-radius: 2px; }
.pv-origin__spacer { flex: 1; }

/* ---------- Monthly report (440 x 580) ---------- */
.pv-report {
    width: 440px; max-width: 100%; height: 580px; background: #FFFFFF; border-radius: 4px;
    box-shadow: 0 1px 0 #E6DFD0, 0 18px 44px rgba(27, 58, 45, .2); padding: 30px 32px;
    display: flex; flex-direction: column; gap: 20px; font-family: var(--font-body); color: var(--color-forest); text-align: left;
}
.pv-report__brand { display: flex; align-items: center; gap: 10px; }
.pv-report__brand img { display: block; }
.pv-report__kicker { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--color-muted-green); }
.pv-report__weeks .pv-report__kicker, .pv-report__towns .pv-report__kicker { letter-spacing: .1em; }
.pv-report__title { display: flex; flex-direction: column; gap: 4px; border-bottom: 2px solid var(--color-forest); padding-bottom: 14px; }
.pv-report__name { font-family: var(--font-heading); font-size: 30px; line-height: 1.05; }
.pv-report__meta { font-size: 13px; color: var(--color-muted-green); }
.pv-report__sources { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pv-report__source { display: flex; flex-direction: column; gap: 4px; border-top: 3px solid; padding-top: 8px; }
.pv-report__value { font-family: var(--font-heading); font-size: 26px; line-height: 1; }
.pv-report__label { font-size: 11px; line-height: 1.35; color: var(--color-muted-green); }
.pv-report__weeks { display: flex; flex-direction: column; gap: 8px; }
.pv-report__bars { display: flex; align-items: flex-end; gap: 10px; height: 86px; border-bottom: 1px solid var(--color-forest); }
.pv-report__bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.pv-report__bar span { font-size: 10px; color: var(--color-muted-green); }
.pv-report__bar i { display: block; width: 100%; background: var(--color-pine); border-radius: 2px 2px 0 0; }
.pv-report__towns { display: flex; flex-direction: column; }
.pv-report__towns .pv-report__kicker { padding-bottom: 6px; }
.pv-report__town { display: flex; justify-content: space-between; font-size: 13px; padding: 6px 0; border-bottom: 1px solid #EEEAE2; }
.pv-report__town strong { font-weight: 600; }
.pv-report__spacer { flex: 1; }
.pv-report__foot { display: flex; justify-content: space-between; gap: 16px; font-size: 10px; color: var(--color-muted-green); }
.pv-report__page { flex-shrink: 0; }

/* ---------- QR check-in sign (300 x 450): a big QR code with the organization's logo ---------- */
.pv-sign {
    width: 300px; height: 450px; background: #FFFFFF; border-radius: 14px;
    box-shadow: 0 1px 0 #DDD7CC, 0 18px 44px rgba(27, 58, 45, .22); overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
    padding: 28px 24px 34px; font-family: var(--font-body); position: relative; text-align: center;
}
.pv-sign__screw { position: absolute; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: #C9C2B5; }
.pv-sign__screw--left { left: 10px; }
.pv-sign__screw--right { right: 10px; }
.pv-sign__logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-heading); font-size: 19px; line-height: 1.1; color: var(--color-forest); text-align: left; }
.pv-sign__emblem { display: block; flex-shrink: 0; }
.pv-sign__qr { display: block; box-sizing: border-box; width: 246px; height: 246px; background: #FFFFFF; padding: 10px; }
.pv-sign__qr img { display: block; width: 226px; height: 226px; }

/* ---------- Phones ---------- */
@media (max-width: 760px) {
    .pv-scan { height: auto; }
    .pv-scan__context { display: none; }
    .pv-scan__body { flex-direction: column; }
    .pv-scan__photo { width: 100%; height: 190px; }
    .pv-scan__page { left: 50%; top: 14px; transform: translateX(-50%) scale(.6); transform-origin: top center; }
    .pv-scan__highlight { display: none; }
    .pv-scan__caption { background: rgba(58, 63, 59, .9); padding: 2px 6px; border-radius: 3px; }
    .pv-scan__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 104px; gap: 8px; padding: 0 14px; font-size: 12px; height: 34px; }
    .pv-scan__row--head { height: auto; padding: 9px 14px; }
    .pv-scan__date { display: none; }
    .pv-scan__status { font-size: 11px; }
    .pv-scan__foot { flex-wrap: wrap; padding: 12px 14px; }
    .pv-scan__hint { flex-basis: 100%; }
    .pv-origin { height: auto; padding: 18px 16px; }
    .pv-origin__map { width: calc(100% * 462 / 501); margin: 0; }
    .pv-report { height: auto; padding: 24px 20px; gap: 18px; }
    .pv-report__value { font-size: 23px; }
}