/* Live-app additions on top of the demo's styles (app.css). */

/* Working pages: the painting stays a faint backdrop so boards read cleanly. */
body:not(.on-home):not(.signed-out) .veil { opacity: .95; }

/* ---------- Sign-in ---------- */
body.signed-out .veil { opacity: 0; }
.signin { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; }
.signin-card {
  width: min(380px, 100%); padding: 32px 30px 26px; text-align: center;
  background: rgba(255, 255, 255, .94); border: 1px solid var(--hair); border-radius: 22px; box-shadow: var(--sh-pop);
}
.signin-card img { display: block; margin: 0 auto 6px; }
.signin-card h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 28px; color: var(--ink); }
.signin-card .hint { margin: 2px 0 0; }
.google-btn { margin-top: 22px; width: 100%; padding: 12px 16px; font-size: 14px; }
.signin-note { margin-top: 10px !important; }
.signin-error { margin: 14px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--gold-wash); border: 1px solid #f3dcae; color: var(--gold-ink); font-size: 13px; text-align: left; }

/* ---------- Nominations board ---------- */
.nboard { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(166px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 10px; align-items: start; }
.ncol { background: rgba(247, 251, 250, .94); border: 1px solid var(--hair); border-radius: 18px; padding: 12px 10px 6px; min-height: 160px; transition: background .15s var(--ease), box-shadow .15s var(--ease); }
.ncol.drop { background: var(--mint-2); box-shadow: inset 0 0 0 2px var(--teal); }
.ncol .col-desc { margin: 2px 0 10px 22px; }
.ncol .col-head h2 { font-size: 16px; }
.ncard {
  position: relative; display: flex; flex-direction: column; gap: 3px; margin-bottom: 9px; padding: 11px 12px 11px 14px;
  background: var(--card); border: 1px solid var(--hair); border-radius: 13px; box-shadow: var(--sh); cursor: grab;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), opacity .15s;
}
.ncard:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(31, 53, 80, .05), 0 12px 26px rgba(31, 53, 80, .1); }
.ncard:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.ncard.dragging { opacity: .45; cursor: grabbing; }
.ncard::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: transparent; }
.ncard.overdue::before { background: var(--gold); }
.ncard.booked::before { background: var(--teal); }
.ncard.decide::before { background: var(--navy); }
.ncard .flag { margin-top: 3px; white-space: normal; max-width: 100%; line-height: 1.35; padding: 2px 8px; border-radius: 9px; }
.flag.teal { color: var(--teal-ink); background: var(--mint-2); }

/* ---------- Card panel ---------- */
.stepper { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 2px 0 8px; }
.stepper span { height: 5px; border-radius: 999px; background: var(--hair); }
.stepper span.done { background: rgba(20, 155, 155, .45); }
.stepper span.now { background: var(--teal); }
.next .flag { align-self: flex-start; }
.actions { gap: 6px; }
.actions .btn { padding: 6px 11px; font-size: 12.5px; }
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { padding: 7px 0; border-top: 1px solid var(--hair); }
.checklist li:first-child { border-top: 0; }
.checklist label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 13.5px; }
.checklist small { display: block; color: var(--muted); font-size: 11px; }
.timeline-live { list-style: none; margin: 0; padding: 0; }
.ev { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 9px 0; border-top: 1px solid var(--hair); }
.ev:first-child { border-top: 0; }
.ev-ic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: var(--paper-2); color: var(--text-2); }
.ev-call .ev-ic, .ev-visit .ev-ic { background: var(--mint-2); color: var(--teal-ink); }
.ev-stage .ev-ic { background: rgba(44, 88, 133, .08); color: var(--navy); }
.ev.open .ev-ic { background: var(--gold-wash); color: var(--gold-ink); }
.ev-agent .ev-ic { background: var(--gold-wash); color: var(--gold-ink); }
.ev-title { font-size: 13px; color: var(--ink); }
.ev-body { font-size: 13px; color: var(--text); white-space: pre-wrap; margin-top: 2px; overflow-wrap: anywhere; }   /* long Drive links wrap (9 Oct) */
.ev-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.details-form { display: grid; gap: 10px; margin-top: 12px; }
.details-form .facts { margin: 4px 0; }
.skip-list { margin: 8px 0; padding-left: 18px; font-size: 13px; color: var(--text-2); }

/* ---------- Forms in modals ---------- */
.outcomes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.outcomes label { display: flex; flex-direction: column; gap: 1px; padding: 10px 12px; border: 1px solid var(--hair-2); border-radius: 12px; cursor: pointer; font-weight: 500; }
.outcomes label:has(input:checked) { border-color: var(--teal); background: var(--mint-2); }
.outcomes input { position: absolute; opacity: 0; pointer-events: none; }
.outcomes b { font-size: 13.5px; color: var(--ink); }
.outcomes small { font-size: 11.5px; color: var(--muted); }
.pick-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pick-row button { border: 1px solid var(--hair-2); background: #fff; border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.pick-row button.on { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ---------- Misc ---------- */
.toast.error { background: #6b3a00; }
.avatar.krystian { background: #c47a00; }
.avatar.legacy { background: transparent; border: 1.5px solid var(--faint); color: var(--muted); }
.me-btn { border: 0; background: none; padding: 0; border-radius: 50%; }
.me-btn:hover .avatar { box-shadow: 0 0 0 3px var(--mint); }
.today-foot { display: flex; gap: 16px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--hair); font-size: 12px; color: var(--text-2); }
.today-foot span { display: inline-flex; align-items: center; gap: 6px; }
.row-btn.team-row > span.team-pic { flex: 0 0 52px; width: 52px; height: 64px; display: grid; place-items: center; overflow: hidden; }
.team-pic img { width: 52px; height: 64px; object-fit: contain; display: block; }
.team-row > span:nth-child(2) { flex: 1; min-width: 0; }
.hero-art img { width: 150px; height: 190px; object-fit: contain; display: block; }
@media (max-width: 760px) { .outcomes { grid-template-columns: 1fr; } }

/* ---------- Tasks ---------- */
.quick-add { display: flex; gap: 8px; margin: 0 0 6px; }
.quick-add input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--hair-2); border-radius: 11px; background: #fff; font: inherit; font-size: 14px; }
.quick-add input:focus, .add-line input:focus { outline: 2px solid var(--teal); outline-offset: 0; border-color: transparent; }
.task { position: relative; }
.task[draggable="true"] { cursor: grab; }
.task.dragging { opacity: .4; }
.task.drop-before { box-shadow: inset 0 2px 0 var(--teal); }
.task.drop-after { box-shadow: inset 0 -2px 0 var(--teal); }
.task.t-crit::before { content: ""; position: absolute; left: -10px; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--gold); }
.task.open { background: rgba(212, 240, 236, .25); border-radius: 12px; }
.t-main { min-width: 0; }
.t-open { all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer; border-radius: 6px; }
.t-open:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.t-open .t-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.t-open .t-meta .chip { font-size: 10.5px; padding: 0 7px; }
.prio { display: inline-block; width: 16px; font-size: 10px; vertical-align: 1px; }
.prio.hi { color: var(--gold-ink); }
.prio.lo { color: var(--faint); }
.t-latest { margin-top: 4px; font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-latest b { font-weight: 600; color: var(--text); }
.t-stuck { display: inline-block; margin-top: 5px; padding: 2px 9px; border-radius: 999px; background: var(--gold-wash); color: var(--gold-ink); font-size: 11.5px; font-weight: 600; }
.t-side { align-self: start; padding-top: 1px; }
.star { border: 0; background: none; padding: 0 2px; font-size: 15px; line-height: 1; color: var(--hair-2); cursor: pointer; }
.task:not(:hover):not(.open) .star:not(.on) { visibility: hidden; }
.star.on { color: var(--gold); }
.t-ring { --p: 0; width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: radial-gradient(closest-side, #fff 72%, transparent 73%), conic-gradient(var(--teal) calc(var(--p) * 1%), var(--mint-2) 0); }
.t-more { margin-top: 8px; }
.t-more .subs { margin-top: 4px; }
.t-more .subs .x { border: 0; background: none; color: var(--faint); font-size: 16px; line-height: 1; padding: 0 4px; cursor: pointer; visibility: hidden; }
.t-more .subs li:hover .x { visibility: visible; }
.add-line input { width: 100%; padding: 7px 10px; border: 1px dashed var(--hair-2); border-radius: 9px; background: rgba(255, 255, 255, .8); font: inherit; font-size: 13px; }
.t-notes { list-style: none; margin: 0 0 6px; padding: 0; }
.t-notes li { padding: 6px 0; border-top: 1px solid var(--hair); }
.t-notes li:first-child { border-top: 0; font-weight: 500; }
.t-notes .btn.link.small { padding: 0; font-size: 11px; }
.t-group { margin-top: 10px; }
.t-group summary { padding: 6px 4px; }
.t-carried { font-style: italic; }
.card-head .cnt { font-size: 12px; font-weight: 700; color: var(--gold-ink); background: var(--gold-wash); border-radius: 999px; padding: 0 8px; }
.check-line { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 600; color: var(--text-2); cursor: pointer; }

/* ---------- Goals ---------- */
.quarter .card-head .btn.link.small { padding: 2px 6px; font-size: 16px; }
.goal-line.row-btn { display: block; padding: 8px 6px; margin: 0 -6px; width: calc(100% + 12px); }
.goal-line.row-btn:hover { background: rgba(212, 240, 236, .35); }
.goal-line .row { font-size: 13px; }
.goal-line .bar { display: block; }
.goal-grid.one { grid-template-columns: 1fr; }
.done-t { text-decoration: line-through; color: var(--muted); }
.field-inline { padding: 6px 8px; border: 1px solid var(--hair-2); border-radius: 9px; font: inherit; text-align: center; }
@media (max-width: 900px) { .goal-grid { grid-template-columns: 1fr; } }

/* ---------- Trips ---------- */
.trip-live { padding: 12px 0; border-top: 1px solid var(--hair); }
.trip-live:first-of-type { border-top: 0; padding-top: 0; }
.trip-live .row-btn small { display: block; margin-top: 2px; color: var(--muted); font-size: 11.5px; font-weight: 500; }   /* "Day 1 of 1 · Piseth" under the title (.rows small doesn't reach here) */
.trip-live.overdue .row-btn b, .trip-live.help .row-btn b { color: var(--gold-ink); }
.trip-last { margin: 6px 0 2px; font-size: 13px; color: var(--text); }
.checkin-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.checkin-row .btn { padding: 5px 10px; font-size: 12px; }
.site-picks { max-height: 180px; overflow: auto; border: 1px solid var(--hair-2); border-radius: 10px; padding: 4px 10px; background: #fff; font-weight: 500; }
.pick-site { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; font-size: 13px; cursor: pointer; }
.pick-site small { display: block; color: var(--muted); font-size: 11px; }
.pick-site[hidden] { display: none; }
.stop { padding: 10px 0 4px; border-top: 1px dashed var(--hair-2); display: grid; gap: 8px; }
.stop:first-child { border-top: 0; padding-top: 4px; }
.stop .btn.link { justify-self: start; padding: 0; }
.money-in { display: flex; gap: 6px; margin-top: 5px; }
.money-in input { flex: 1; margin-top: 0 !important; min-width: 0; }
.money-in select { width: 84px; margin-top: 0 !important; }
.inv-checks { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: flex-start; }
.inv-checks .eyebrow, .inv-checks p { flex-basis: 100%; }
.inv-checks .flag, .dr-body .flag { white-space: normal; }
.inv-preview { display: block; max-width: 100%; max-height: 320px; margin: 8px 0; border-radius: 10px; border: 1px solid var(--hair); object-fit: contain; background: #fff; }
.inv-total { margin-top: 4px; font-family: var(--serif); font-size: 22px; color: var(--ink); }
.inv-row .amt { font-weight: 700; color: var(--ink); font-feature-settings: "tnum"; }
.inv-row .flag { margin-right: 4px; }
.inv-row { display: flex; align-items: center; gap: 8px; }
.inv-row > .row-btn { flex: 1; min-width: 0; }
.paid-tick { flex: none; display: flex; align-items: center; gap: 6px; padding: 8px 4px 8px 8px; font-size: 13px; font-weight: 600; color: var(--text-2); cursor: pointer; border-left: 1px solid var(--hair); }
.paid-tick input { width: 18px; height: 18px; margin: 0; accent-color: var(--teal); cursor: pointer; }
.paid-tick:has(input:checked) { color: var(--teal-ink); }
.paid-tick:has(input:disabled) { cursor: default; opacity: .7; }

/* ---------- Installed ---------- */
.igrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.icard { all: unset; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; cursor: pointer;
  background: var(--card); border: 1px solid var(--hair); border-radius: 16px; box-shadow: var(--sh); transition: transform .15s var(--ease), box-shadow .15s var(--ease); }
.icard:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(31, 53, 80, .05), 0 12px 26px rgba(31, 53, 80, .1); }
.icard:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.i-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.i-stats b { color: var(--ink); font-weight: 700; font-feature-settings: "tnum"; }
.i-upd { font-size: 12px; color: var(--text-2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.teal-t { color: var(--teal-ink) !important; }
.muted-t { color: var(--muted); }
.bills-due { margin-bottom: 14px; background: rgba(255, 249, 236, .96); border-color: #f3dcae; }
.bills-due .btn { font-size: 12px; }
.impact { margin: 0 0 4px; font-size: 13.5px; line-height: 1.5; }
.bill-chart { display: block; width: 100%; max-width: 360px; height: auto; margin: 4px 0 2px; }
.bill-chart .ax { font-size: 9px; fill: var(--muted); font-family: var(--sans, Montserrat), sans-serif; }
.bill-chart g:hover path { opacity: .8; }
.legend { display: flex; gap: 14px; font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.rows.bills .amt { font-weight: 700; font-feature-settings: "tnum"; color: var(--ink); min-width: 90px; text-align: right; }
.report { white-space: pre-wrap; font-size: 13.5px; line-height: 1.55; padding: 10px 12px; background: var(--paper-2); border-radius: 12px; }
.safe-note { margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--mint-2); color: var(--teal-ink); font-size: 12px; }

/* ---------- Socials ---------- */
.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.stat-tile { padding: 14px 16px; background: var(--card); border: 1px solid var(--hair); border-radius: 16px; box-shadow: var(--sh); min-width: 0; }
.stat-val { margin: 4px 0 2px; font-family: var(--serif); font-size: 26px; color: var(--ink); line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-note { margin: 8px 2px 16px; }
.plat-filter { padding: 5px 8px; border: 1px solid var(--hair-2); border-radius: 9px; background: #fff; font: inherit; font-size: 12.5px; }
.cal-head, .cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-head span { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 0 6px 4px; }
.cal-day { min-height: 92px; padding: 5px 6px; border-radius: 10px; background: var(--paper-2); border: 1px solid transparent; min-width: 0; }
.cal-day.empty { background: transparent; }
.cal-day.today { border-color: var(--teal); background: var(--mint-2); }
.dnum { font-size: 11px; font-weight: 700; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.post-chip { position: relative; width: 38px; height: 38px; padding: 0; border: 1px solid var(--hair); border-radius: 8px; overflow: hidden; background: #fff; cursor: pointer; }
.post-chip img, .post-chip .no-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.post-chip .no-img { background: linear-gradient(135deg, var(--mint-2), #fff); }
.post-chip .plat { position: absolute; left: 2px; bottom: 2px; padding: 0 3px; border-radius: 4px; background: rgba(31, 53, 80, .82); color: #fff; font-size: 8.5px; font-weight: 700; line-height: 13px; }
.post-chip.planned { border: 1.5px dashed var(--navy); }
.post-chip.unconfirmed { opacity: .55; border-style: dashed; }
.post-chip:hover { box-shadow: 0 0 0 2px var(--teal); }
.post-chip:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.more-n { font-size: 11px; font-weight: 700; color: var(--muted); align-self: center; }
.post-img { display: block; width: 100%; max-height: 420px; object-fit: contain; border-radius: 12px; background: #fff; border: 1px solid var(--hair); }
.stats-form { display: grid; grid-template-columns: 90px 1fr 1fr; gap: 6px 10px; align-items: center; }
.stats-form input { padding: 7px 9px; border: 1px solid var(--hair-2); border-radius: 9px; font: inherit; min-width: 0; }
@media (max-width: 900px) { .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cal-day { min-height: 64px; } .post-chip { width: 28px; height: 28px; } }

/* ---------- Numbers ---------- */
.table-card { padding: 6px 0; overflow-x: auto; }
.num-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.num-table th { text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 8px 12px; border-bottom: 1px solid var(--hair); white-space: nowrap; }
.num-table td { padding: 9px 12px; border-top: 1px solid var(--hair); vertical-align: middle; }
.num-table tbody tr:first-child td { border-top: 0; }
.num-table td small { display: block; color: var(--muted); font-size: 11px; }
.num-table .num { text-align: right; font-feature-settings: "tnum"; white-space: nowrap; }
.num-table .btn.link { padding: 0; font-weight: 700; color: var(--ink); }
.status { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.status i { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.status.ok i { background: var(--teal); }
.status.bad { color: var(--gold-ink); }
.status.bad i { background: var(--gold); box-shadow: 0 0 0 3px var(--gold-wash); }
.status.none { color: var(--muted); font-weight: 500; }
.status.none i { background: transparent; border: 1.5px dashed var(--faint); }
.spark { display: block; width: 90px; height: 22px; }
.tile-btn { all: unset; box-sizing: border-box; display: block; cursor: pointer; padding: 14px 16px; background: var(--card); border: 1px solid var(--hair); border-radius: 16px; box-shadow: var(--sh); min-width: 0; }
.tile-btn:hover { box-shadow: 0 0 0 2px var(--mint), var(--sh); }
.tile-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.tile-btn .stat-val { font-size: 17px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ---------- First-visit guides ---------- */
.me { display: inline-flex; align-items: center; gap: 10px; }
.help-btn { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--hair-2); background: #fff; color: var(--navy); font-weight: 700; font-size: 13px; cursor: pointer; }
.help-btn:hover { border-color: var(--teal); color: var(--teal-ink); }
.help-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* ---------- The bell (066): your notifications, short by design ---------- */
.bell-btn { position: relative; width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: 50%; border: 1px solid var(--hair-2); background: #fff; color: var(--navy); cursor: pointer; padding: 0; }
.bell-btn:hover { border-color: var(--teal); color: var(--teal-ink); }
.bell-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.bell-btn.has { color: var(--ink); }
.bell-count { position: absolute; top: -5px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; background: var(--gold); color: #3a2800; font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px #fff; }
.bell-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bell-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--hair); border-radius: 14px; background: #fff; text-align: left; cursor: pointer; font: inherit; color: var(--text-2); }
.bell-item:hover { border-color: var(--teal); }
.bell-item:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.bell-item .grow { flex: 1; min-width: 0; display: grid; gap: 2px; }
.bell-item b { font-weight: 600; color: var(--text-2); }
.bell-item small { font-size: 12px; color: var(--text-2); opacity: .8; }
.bell-item.unread { background: var(--mint-2); border-color: var(--mint); }
.bell-item.unread b { color: var(--ink); font-weight: 700; }
.bell-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: transparent; }
.bell-item.unread .bell-dot { background: var(--teal); }
.bell-go { flex: none; font-size: 20px; color: var(--hair-2); }
.bell-item:hover .bell-go { color: var(--teal); }
.guide { position: fixed; right: 20px; bottom: 20px; z-index: 45; width: min(400px, calc(100vw - 32px)); }
.guide-card { padding: 20px 22px 16px; background: #fff; border: 1px solid var(--hair); border-radius: 20px; box-shadow: var(--sh-pop); animation: guide-in .25s var(--ease); }
.guide-card h2 { margin: 2px 0 12px; font-family: var(--serif); font-weight: 400; font-size: 22px; color: var(--ink); }
.guide-steps { list-style: none; counter-reset: g; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.guide-steps li { counter-increment: g; position: relative; padding-left: 34px; font-size: 13.5px; line-height: 1.5; color: var(--text); }
.guide-steps li::before { content: counter(g); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--mint-2); color: var(--teal-ink); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.guide-steps b { color: var(--ink); }
.guide .row .hint { font-size: 11px; }
@keyframes guide-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .guide-card { animation: none; } }
@media (max-width: 600px) { .guide { right: 16px; left: 16px; bottom: 16px; width: auto; } }

/* Installed cards with photos */
.i-cover { position: relative; display: block; aspect-ratio: 16 / 10; background: linear-gradient(135deg, var(--mint-2), #fff7e6); overflow: hidden; }
.i-cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.icard:hover .i-cover img { transform: scale(1.03); }
.i-cover::after { content: ""; position: absolute; inset: 55% 0 0 0; background: linear-gradient(to top, rgba(18, 38, 58, .45), transparent); pointer-events: none; }
.i-cover.empty::after { display: none; }
.i-sun { position: absolute; inset: 0; display: grid; place-items: center; font-size: 40px; color: var(--gold); opacity: .8; }
.i-when { position: absolute; left: 10px; bottom: 10px; z-index: 1; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--teal-ink); font-size: 11.5px; font-weight: 700; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.i-when.soon { color: var(--navy); }
.i-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.i-body .s-name { font-family: var(--serif); font-size: 17px; color: var(--ink); line-height: 1.25; }
.i-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.i-facts b { color: var(--ink); font-weight: 700; font-feature-settings: "tnum"; }
.i-donor { font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.i-foot { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--hair); font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-cover { margin: -1px 0 0; height: 210px; overflow: hidden; background: var(--mint-2); }
.dr-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dr-close.on-photo { position: absolute; z-index: 2; top: 12px; right: 12px; background: rgba(255, 255, 255, .92); box-shadow: 0 1px 4px rgba(0, 0, 0, .15); }
@media (prefers-reduced-motion: reduce) { .icard:hover .i-cover img { transform: none; } }

/* ---------- Phones ----------
   Top bar: logo and your picture on one row, the tabs on a swipeable row underneath, so the
   page is never wider than the phone. Home: the painting is a band across the top and the
   cards are a sheet that scrolls up over it. */
@media (max-width: 760px) {
  html, body { overflow-x: clip; }
  .topbar { flex-wrap: wrap; row-gap: 2px; padding: max(8px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left)); gap: 10px; }
  .topbar .brand { order: 1; }
  .topbar .brand-name { display: inline; font-size: 17px; }
  .topbar .me { order: 2; margin-left: auto; }
  .bell-btn { width: 36px; height: 36px; }
  .topbar .nav { order: 3; flex: 1 0 100%; min-width: 0; gap: 0; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; margin: 0 -14px; padding: 0 8px 2px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10px, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, transparent 0, #000 10px, #000 calc(100% - 28px), transparent); }
  .topbar .nav::-webkit-scrollbar { display: none; }
  .nav a { flex: none; }

  body.on-home .veil { opacity: 0 !important; }
  body.on-home .world { bottom: auto; height: 64svh; touch-action: pan-y;
    -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent);
            mask-image: linear-gradient(to bottom, #000 80%, transparent); }
  body.on-home .home { min-height: 0; padding-top: calc(64svh - 170px); }
  .home-side { flex-direction: column; align-items: stretch; gap: 12px; }
  .home-side .today, .home-side .quarter-mini { width: auto; }
  .home-side .card { background: rgba(255, 255, 255, .97); }
  .home-side .today { position: relative; border-radius: 22px; padding-top: 22px; box-shadow: 0 -6px 28px rgba(31, 53, 80, .14); }
  .home-side .today::before { content: ""; position: absolute; top: 8px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 4px; background: var(--hair-2); }
  .pan-hint { display: inline-flex; }
  /* Nominations: one stage at a time, snapping, with the next one peeking in. */
  .nboard { grid-auto-columns: 80vw; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 0 16px 10px; scroll-padding: 0 16px; }
  .ncol { scroll-snap-align: start; }
  .igrid { grid-template-columns: 1fr; }
  .page-actions .search { flex: 1 1 100%; }
}
.pan-hint { display: none; position: fixed; left: 50%; top: calc(64svh - 214px); transform: translateX(-50%); z-index: 2; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .88); color: var(--text-2); font-size: 11.5px; font-weight: 600;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .12); pointer-events: none; animation: hint-out .6s ease 4s forwards; }
body:not(.on-home) .pan-hint { display: none !important; }
@keyframes hint-out { to { opacity: 0; } }

/* ---------- Nominations: pathway tabs and grid ---------- */
.path-tabs { display: flex; gap: 6px; margin: -6px 0 14px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.path-tabs::-webkit-scrollbar { display: none; }
.path-tabs button { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--hair-2);
  background: rgba(255, 255, 255, .92); font-size: 13px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.path-tabs button .cnt { font-size: 11.5px; font-weight: 700; color: var(--muted); font-feature-settings: "tnum"; }
.path-tabs button.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.path-tabs button.on .cnt { color: #d7e3ef; }
.path-desc { margin: -4px 0 12px; }
.ngrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; align-items: start; }
.ngrid .ncard { margin-bottom: 0; cursor: pointer; }
.n-reason { font-size: 12px; color: var(--text-2); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; }
.leave-row { gap: 2px 4px; margin-top: 6px; align-items: center; }
.leave-row .hint { margin-right: 4px; }
.leave-row .btn.link.small { padding: 4px 6px; }
@media (max-width: 760px) { .ngrid { grid-template-columns: 1fr; } .path-tabs { margin: -6px -16px 14px; padding: 0 16px 2px; } }

/* ---------- Phones: forms and panels ----------
   Forms open as a sheet from the bottom with the buttons always in view; typing boxes use
   16px text so iPhones don't zoom the page when you tap one; side-by-side fields stack. */
@media (max-width: 760px) {
  input, select, textarea, .field input, .field select, .field textarea, .quick-add input, .add-line input, .search { font-size: 16px; }
  .modal-back { place-items: end stretch; padding: 0; }
  .modal { width: 100%; max-height: 92svh; display: flex; flex-direction: column; overflow: hidden; border-radius: 20px 20px 0 0; }
  .modal .mh { flex: none; padding: 18px 18px 0; }
  .modal .mh h2 { font-size: 21px; }
  .modal .mb { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 14px 18px; }
  .modal .mf { flex: none; padding: 10px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--hair); flex-wrap: wrap; }
  .modal .mf .btn { flex: 1 1 auto; }
  .modal .mf .spacer { display: none; }
  .drawer { width: 100vw; }
  .dr-head { padding: 18px 18px 14px; }
  .dr-body { padding-left: 18px; padding-right: 18px; }
  .toasts { bottom: calc(16px + env(safe-area-inset-bottom)); width: calc(100vw - 32px); }
  .toast { justify-content: center; text-align: center; }
  .card-head { flex-wrap: wrap; row-gap: 8px; }
}
@media (max-width: 480px) {
  .two { grid-template-columns: 1fr; }
  .stats-form { grid-template-columns: 80px 1fr 1fr; }
  .page-title { font-size: 28px; }
}

/* ---------- Stories (top of Socials) ---------- */
.stories { margin-bottom: 4px; }
.stories-head { flex-wrap: wrap; }
.stories-head h2 { flex: 0 0 auto; }
.stories-head .hint { flex: 1; }
.sboard { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
.scard { position: relative; display: flex; flex-direction: column; gap: 3px; margin-bottom: 9px; padding: 11px 12px 11px 14px; cursor: pointer;
  background: var(--card); border: 1px solid var(--hair); border-radius: 13px; box-shadow: var(--sh); }
.scard:hover { box-shadow: 0 2px 4px rgba(31, 53, 80, .05), 0 12px 26px rgba(31, 53, 80, .1); }
.scard:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.scard.mine::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--gold); }
.ngrid .scard { margin-bottom: 0; }
.s-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11.5px; color: var(--muted); }
.s-meta:empty { display: none; }
.chip.nova { background: var(--gold-wash); color: var(--gold-ink); border-color: #f3dcae; font-size: 10.5px; }
.chip.file { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; background: var(--paper-2); }
.story-add { display: flex; gap: 6px; margin-top: 8px; }
.story-add input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--hair-2); border-radius: 10px; font: inherit; font-size: 13px; background: #fff; }
.brief p { margin: 0 0 6px; font-size: 13.5px; line-height: 1.5; }
@media (max-width: 1100px) { .sboard { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .sboard { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 80vw; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 0 16px 10px; scroll-padding: 0 16px; scrollbar-width: none; }
  .sboard .scol { scroll-snap-align: start; }
  .story-add input { font-size: 16px; }
}

/* A form's body is a grid; when it scrolls inside a fixed-height sheet, rows keep their natural
   height (otherwise anything with overflow: hidden, like the matrix sections, is squashed). */
.modal .mb { grid-auto-rows: max-content; align-content: start; }

/* ---------- Decision matrix (Scoring) ----------
   A wide sheet: the questions scroll, the total and the buttons stay in view. */
.modal.mx-modal { width: min(820px, 100%); display: flex; flex-direction: column; overflow: hidden; }
.modal.mx-modal .mb { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; gap: 14px; }
.modal.mx-modal .mf { flex: none; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--hair); }
.mx-by { display: flex; align-items: center; gap: 8px; margin-top: 11px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.mx-by small { font-weight: 500; }
.mx-sec { border: 1px solid var(--hair); border-radius: 16px; overflow: hidden; }
.mx-sh { display: flex; align-items: baseline; gap: 10px; padding: 12px 16px 10px; background: var(--paper-2); }
.mx-sh h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 17px; color: var(--ink); }
.mx-sub { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--text-2); font-feature-settings: "tnum"; white-space: nowrap; }
.mx-modal .crit { grid-template-columns: minmax(0, 1fr) 46px; padding: 11px 16px 12px; }
.mx-modal .crit .opts { grid-column: 1 / -1; justify-content: flex-start; gap: 6px; }
.mx-modal .opts button { min-height: 34px; padding: 6px 12px; font-size: 12.5px; }
.mx-modal .opts button:hover:not(:disabled):not(.on) { border-color: var(--teal); }
.mx-modal .opts button:disabled { cursor: default; opacity: 1; }
.mx-modal .opts button:disabled:not(.on) { color: var(--faint); }
.crit .q small.mx-why { color: var(--teal-ink); }
.mx-score { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.mx-total { font-family: var(--serif); font-size: 30px; line-height: 1; color: var(--ink); font-feature-settings: "tnum"; }
.mx-score .verdict { margin-top: 0; }
.quick-score { align-self: flex-start; padding: 0; font-size: 12px; }
.chip.gold { background: var(--gold-wash); color: var(--gold-ink); border-color: #f3dcae; }
.rows > li.rp-li { flex-wrap: wrap; gap: 6px 8px; }
.rows > li.rp-li .grow { flex: 1 1 180px; }
@media (max-width: 760px) {
  .modal.mx-modal { max-height: 94svh; }
  .mx-score { flex: 1 1 100%; }
  .mx-modal .crit { padding: 10px 12px 12px; }
  .mx-modal .opts button { min-height: 40px; padding: 8px 13px; font-size: 13px; }
}

/* ---------- Site reports ----------
   The site report (after the matrix) and the install report: a tall sheet with the parts down
   the left (a swipe row on phones), the preview, and what each part feeds. */
.rp-back { padding: 16px; }
.modal.rp-modal { width: min(1080px, 100%); height: 100%; max-height: none; display: flex; flex-direction: column; overflow: hidden; }
.modal .mh.rp-head { flex: none; padding: 20px 26px 14px; border-bottom: 1px solid var(--hair); }
.modal .rp-head h2 { margin: 4px 0 0; font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.2; color: var(--ink); }
.rp-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; }
.rp-time { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--gold-ink); }
.modal .mb.rp-mb { flex: 1 1 auto; min-height: 0; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.rp-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 228px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.rp-rail { overflow-y: auto; padding: 16px 10px; border-right: 1px solid var(--hair); background: var(--paper-2); }
.rp-link { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 10px; border: 0; border-radius: 9px; background: none; font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--text-2); text-align: left; }
.rp-link:hover { background: #fff; color: var(--navy); }
.rp-lt { flex: 1; }
.rp-mins { font-size: 11px; font-weight: 600; color: var(--muted); font-feature-settings: "tnum"; }
.rp-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--hair-2); background: #fff; }
.rp-dot.half { border-color: var(--teal); background: linear-gradient(90deg, var(--teal) 50%, #fff 50%); }
.rp-dot.on { border-color: var(--teal); background: var(--teal); }
.rp-legend { margin: 18px 10px 0; padding-top: 12px; border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; gap: 5px; }
.rp-legend .eyebrow { flex: 1 1 100%; margin-bottom: 2px; }
.rp-main { overflow-y: auto; overscroll-behavior: contain; padding: 18px 30px 44px; }
.rp-lead { margin: 0; padding: 10px 14px; border-left: 3px solid var(--teal); border-radius: 10px; background: var(--mint-2); color: var(--text-2); font-size: 13px; line-height: 1.5; }

/* What each part feeds */
.rp-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.rp-tag.partners { background: #e8eef6; color: var(--navy); }
.rp-tag.stories { background: var(--gold-wash); color: var(--gold-ink); }
.rp-tag.impact { background: var(--mint-2); color: var(--teal-ink); }
.rp-tag.us { background: var(--paper-2); color: var(--text-2); border: 1px solid var(--hair-2); }
.rp-tagrow { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }

/* Parts and fields */
.rp-sec { padding: 20px 0 18px; border-bottom: 1px solid var(--hair); scroll-margin-top: 8px; }
.rp-sec:last-child { border-bottom: 0; }
.rp-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.rp-n { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; font-size: 12px; font-weight: 700; }
.rp-h h3 { flex: 1; margin: 0; font-family: var(--serif); font-weight: 400; font-size: 18px; color: var(--ink); }
.rp-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.rp-f { min-width: 0; }
.rp-k { display: block; font-size: 12px; font-weight: 700; color: var(--text-2); }
.rp-ask { display: block; margin-top: 1px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.rp-f input[readonly] { background: var(--paper-2); color: var(--text-2); }
.rp-f textarea { min-height: 70px; line-height: 1.55; }
.rp-count { display: block; margin-top: 3px; font-size: 11px; font-weight: 500; color: var(--muted); min-height: 1em; }
.rp-seg, .rp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.rp-seg button, .rp-chips button { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--hair-2); background: #fff; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.rp-seg button:hover, .rp-chips button:hover { border-color: var(--teal); }
.rp-seg button.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.rp-chips button.on { background: var(--mint-2); border-color: var(--teal); color: var(--teal-ink); }
.rp-chips button.on::before { content: "✓ "; }
.rp-warn { margin: 8px 0 0; padding: 7px 11px; border-radius: 10px; background: var(--gold-wash); border: 1px solid #f3dcae; color: var(--gold-ink); font-size: 12.5px; font-weight: 600; line-height: 1.45; }
.rp-tick { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--hair-2); border-radius: 12px; cursor: pointer; font-size: 13.5px; }
.rp-tick b { color: var(--ink); font-weight: 600; }
.rp-tick small { display: block; color: var(--muted); font-size: 11.5px; }

/* Repeatable rows (moments, heroes, quotes, loose ends) and bills */
.rp-rows, .rp-bills { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }
.rp-row { display: grid; gap: 6px; align-items: center; }
.rp-row input, .rp-row select { width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid var(--hair-2); border-radius: 9px; background: #fff; font: inherit; font-size: 13px; }
.rp-row-head { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rp-x { width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: 17px; }
.rp-x:hover { background: var(--paper-2); color: var(--ink); }
.rp-rows > .btn.link { align-self: flex-start; }
.rp-bill-sum { font-size: 12.5px; font-weight: 600; color: var(--teal-ink); }

/* The coverage estimate */
.rp-sv { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 8px; padding: 12px 14px; border-radius: 12px; background: var(--gold-wash); }
.rp-sv-kw { font-size: 13px; font-weight: 600; color: var(--text-2); }
.rp-sv-kw input { width: 64px; margin: 0 4px; padding: 6px 8px; border: 1px solid var(--hair-2); border-radius: 8px; font: inherit; text-align: center; background: #fff; }
.rp-sv-out { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.rp-sv-out b { font-family: var(--serif); font-weight: 400; font-size: 19px; color: var(--ink); }
.rp-sv-out > span:not(.chip) { font-size: 12.5px; color: var(--text-2); }
.rp-savings .rp-tips { margin-top: 6px; }
.rp-tips summary { width: max-content; max-width: 100%; cursor: pointer; font-size: 12px; font-weight: 700; color: var(--teal-ink); }
.rp-tips p { margin: 6px 0 0; line-height: 1.5; }

/* Photos and videos: named, not uploaded */
.rp-need { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.rp-need-i { padding: 3px 10px; border-radius: 999px; border: 1px dashed var(--hair-2); font-size: 12px; font-weight: 600; color: var(--muted); }
.rp-need-i.on { border-style: solid; border-color: #c5e8e3; background: var(--mint-2); color: var(--teal-ink); }
.rp-need-i.on::before { content: "✓ "; }
.rp-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.rp-media:empty { display: none; }
.rp-tile { position: relative; margin: 0; padding: 9px 44px 8px 10px; display: flex; flex-direction: column; gap: 6px; min-width: 0; border: 1px solid var(--hair); border-radius: 12px; background: #fff; }
.rp-tile.star { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(245, 166, 35, .35); }
.rp-ref { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; }
.rp-ref a, .rp-ref .chip.file { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-ref .chip.file { display: block; }
.rp-star { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--hair); background: #fff; color: var(--hair-2); font-size: 16px; line-height: 1; }
.rp-tile.star .rp-star { color: var(--gold); border-color: #f3dcae; }
.rp-tile figcaption { display: flex; align-items: center; gap: 4px; }
.rp-tile select { flex: 1; min-width: 0; padding: 4px 6px; border: 1px solid var(--hair-2); border-radius: 7px; background: #fff; font: inherit; font-size: 12px; }
.rp-media-add { display: flex; gap: 6px; align-items: flex-start; margin-top: 8px; }
.rp-media-add textarea { flex: 1; min-width: 0; min-height: 44px; padding: 8px 10px; border: 1px solid var(--hair-2); border-radius: 10px; background: #fff; font: inherit; font-size: 13px; resize: vertical; }

/* Read-only (sent): no adding or removing */
.rp-ro .rp-main [data-add-row], .rp-ro .rp-main .rp-x, .rp-ro .rp-main .rp-media-add, .rp-ro .rp-main .rp-count { display: none; }
.rp-ro .rp-main button:disabled { cursor: default; }
.rp-ro .rp-main .rp-seg button:disabled:not(.on), .rp-ro .rp-main .rp-chips button:disabled:not(.on) { opacity: .6; }

/* Footer */
.modal .mf.rp-foot { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--hair); }
.rp-status { display: flex; flex-direction: column; line-height: 1.35; }
.rp-saved { font-size: 12px; font-weight: 700; color: var(--teal-ink); }
.rp-need { color: var(--gold-ink); font-weight: 600; }

/* Preview: the document as it goes in Drive, and what it feeds */
.rp-body.rp-doc-wrap { display: block; overflow-y: auto; padding: 18px 20px 40px; background: var(--paper-2); }
.rp-pv-tabs { display: flex; width: max-content; margin: 0 auto 16px; }
.rp-doc { max-width: 740px; margin: 0 auto; padding: 40px 52px 48px; background: #fff; border-radius: 6px; box-shadow: var(--sh); font-size: 14px; line-height: 1.65; color: var(--text); overflow-wrap: anywhere; }
.rp-doc h1 { margin: 0 0 14px; font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.2; color: var(--ink); }
.rp-doc h2 { margin: 22px 0 6px; font-size: 15.5px; font-weight: 700; color: var(--ink); }
.rp-doc p { margin: 0 0 8px; }
.rp-doc-facts { font-size: 13.5px; }
.rp-doc-media { margin: 0; padding-left: 18px; font-size: 13.5px; }
.rp-filed { font-size: 11.5px; color: var(--muted); }
.rp-empty { color: var(--muted); font-style: italic; }
.rp-feeds { max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.rp-feed { padding: 16px 18px; background: #fff; border: 1px solid var(--hair); border-radius: 14px; box-shadow: var(--sh); overflow-wrap: anywhere; }
.rp-feed h3 { margin: 4px 0 10px; font-family: var(--serif); font-weight: 400; font-size: 17px; color: var(--ink); }
.rp-feed ul { margin: 0 0 10px; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; font-size: 13px; line-height: 1.45; }

/* Phones: a full-height sheet from the bottom; the parts become a swipe row; everything stacks */
@media (max-width: 760px) {
  .rp-back { padding: 0; }
  .modal.rp-modal { height: 94svh; max-height: 94svh; }
  .modal .mh.rp-head { padding: 16px 16px 12px; }
  .modal .rp-head h2 { font-size: 20px; }
  .rp-time { margin-left: 0; }
  .rp-body { display: flex; flex-direction: column; }
  .rp-rail { flex: none; display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; padding: 10px 14px; border-right: 0; border-bottom: 1px solid var(--hair); scrollbar-width: none; }
  .rp-rail::-webkit-scrollbar { display: none; }
  .rp-link { flex: none; width: auto; white-space: nowrap; padding: 5px 11px; border: 1px solid var(--hair-2); border-radius: 999px; background: #fff; font-size: 12px; }
  .rp-mins, .rp-legend { display: none; }
  .rp-main { flex: 1; min-height: 0; padding: 14px 16px 30px; }
  .rp-h { flex-wrap: wrap; }
  .rp-tagrow { flex: 1 1 100%; justify-content: flex-start; padding-left: 34px; }
  .rp-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-grid4 > [style*="span 2"], .rp-grid4 > [style*="span 3"], .rp-grid4 > [style*="span 4"] { grid-column: 1 / -1 !important; }
  .rp-row input, .rp-row select, .rp-sv-kw input, .rp-tile select, .rp-media-add textarea { font-size: 16px; }
  .rp-rows .rp-row:not(.rp-row-head) { grid-template-columns: 1fr 28px !important; padding: 8px; border: 1px solid var(--hair); border-radius: 10px; }
  .rp-rows .rp-row:not(.rp-row-head) > :not(.rp-x) { grid-column: 1; }
  .rp-rows .rp-row:not(.rp-row-head) > .rp-x { grid-column: 2; grid-row: 1; }
  .rp-rows .rp-row-head { display: none; }
  .rp-bills .rp-row { grid-template-columns: 1fr 72px 1fr !important; }
  .rp-media { grid-template-columns: 1fr; }
  .rp-seg button, .rp-chips button { padding: 8px 13px; font-size: 13px; }
  .modal .mf.rp-foot { flex-wrap: wrap; padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); }
  .rp-status { flex: 1 1 100%; flex-direction: row; justify-content: space-between; gap: 8px; }
  .rp-need { flex: 1 1 100%; }
  .rp-doc { padding: 24px 18px 30px; }
  .rp-feeds { grid-template-columns: 1fr; }
}

/* ---------- Photos and videos: uploads, gallery, viewer, media consent (uploads.js, media.js) ----------
   A picked file goes straight to the site's Drive folder. The tray shows each file's progress
   (a sheet from the bottom on phones) and shrinks to a pill while you carry on. */
.up-file { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
label.btn { cursor: pointer; position: relative; }
label.btn:focus-within { outline: 2px solid var(--teal); outline-offset: 2px; }
.up-from label:has(input:focus-visible) { outline: 2px solid var(--teal); outline-offset: 2px; }
.up-where { margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--paper-2); overflow-wrap: anywhere; }

/* The tray */
.up-tray { position: fixed; right: 20px; bottom: 20px; z-index: 65; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
.up-tray > * { pointer-events: auto; }
.up-pill { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 7px 16px 7px 9px; border: 1px solid var(--hair-2); border-radius: 999px; background: #fff; box-shadow: var(--sh-pop); font-size: 13px; font-weight: 700; color: var(--ink); }
.up-ring { flex: none; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(closest-side, #fff 62%, transparent 64%), conic-gradient(var(--teal) calc(var(--p, 0) * 1%), var(--mint-2) 0); }
.up-pill.bad { border-color: #f3dcae; background: var(--gold-wash); color: var(--gold-ink); }
.up-pill.bad .up-ring { background: radial-gradient(closest-side, var(--gold-wash) 62%, transparent 64%), conic-gradient(var(--gold) calc(var(--p, 0) * 1%), #fbe3b5 0); }
.up-sheet { width: min(390px, calc(100vw - 32px)); max-height: min(72vh, 580px); display: flex; flex-direction: column; background: #fff; border: 1px solid var(--hair); border-radius: 18px; box-shadow: var(--sh-pop); overflow: hidden; }
.up-head { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px 10px; }
.up-head b { display: block; font-family: var(--serif); font-weight: 400; font-size: 19px; color: var(--ink); line-height: 1.2; }
.up-head .dr-close { position: static; flex: none; width: 32px; height: 32px; }
.up-total { flex: none; margin: 0 16px 10px; }
.up-note { flex: none; margin: 0 16px 10px; padding: 7px 10px; border-radius: 10px; background: var(--gold-wash); border: 1px solid #f3dcae; color: var(--gold-ink); font-size: 12px; font-weight: 600; line-height: 1.45; }
.up-list { flex: 1 1 auto; min-height: 0; list-style: none; margin: 0; padding: 0 16px; overflow-y: auto; overscroll-behavior: contain; }
.up-item { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-top: 1px solid var(--hair); }
.up-item:first-child { border-top: 0; }
.up-thumb { width: 46px; height: 46px; border-radius: 9px; overflow: hidden; background: var(--paper-2); display: grid; place-items: center; font-size: 18px; color: var(--muted); }
.up-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.up-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.up-name { font-size: 13px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-main small { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-main .bar { height: 5px; margin-top: 2px; }
.up-state { font-size: 12px; color: var(--text-2); }
.up-item.failed .up-state { color: var(--gold-ink); font-weight: 600; }
.up-item.failed .bar > i { background: var(--gold); }
.up-item.duplicate .up-state { color: var(--teal-ink); font-weight: 600; }
.up-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; font-size: 12.5px; font-weight: 600; }
.up-acts .btn.link { padding: 2px 0; }
.up-foot { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 16px 12px; border-top: 1px solid var(--hair); }

/* The gallery */
.media-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.media-head .sec { flex: 1; margin: 0; }
.mg { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.mg-tile { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 1px solid var(--hair); border-radius: 11px; overflow: hidden; background: var(--paper-2); cursor: pointer; }
.mg-tile:hover { box-shadow: 0 0 0 2px var(--mint), var(--sh); }
.mg-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mg-ic { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px; font-size: 22px; color: var(--muted); text-align: center; }
.mg-ic small { max-width: 100%; font-size: 10.5px; font-weight: 600; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-tile.star { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(245, 166, 35, .35); }
.mg-star { position: absolute; top: 5px; left: 5px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--gold); font-size: 13px; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.mg-play { position: absolute; top: 5px; right: 5px; padding: 1px 7px; border-radius: 999px; background: rgba(31, 53, 80, .78); color: #fff; font-size: 10.5px; font-weight: 700; font-feature-settings: "tnum"; }
.mg-badge { position: absolute; left: 5px; right: 5px; bottom: 5px; width: max-content; max-width: calc(100% - 10px); padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--text-2); font-size: 10.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.mg-badge.warn { color: var(--gold-ink); background: var(--gold-wash); }
.mg-tile.dnu img, .mg-tile.rejected img { opacity: .45; filter: grayscale(.6); }
.mg-filter { display: flex; gap: 6px; margin: 0 0 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.mg-filter::-webkit-scrollbar { display: none; }
.mg-filter.mg-shape { margin-top: -2px; }
.mg-filter.mg-shape button { padding: 3px 10px; font-size: 11.5px; background: var(--paper-2); }
.mg-filter.mg-shape button.on { background: var(--mint); border-color: #b4e1da; color: var(--teal-ink); }
.mg-filter button { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--hair-2); background: #fff; font-size: 12.5px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.mg-filter button .cnt { font-size: 11px; font-weight: 700; color: var(--muted); font-feature-settings: "tnum"; }
.mg-filter button.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.mg-filter button.on .cnt { color: #d7e3ef; }
.mg-review { margin-bottom: 12px; padding: 10px 12px 12px; border-radius: 14px; background: var(--gold-wash); border: 1px solid #f3dcae; }
.mg-review .eyebrow { color: var(--gold-ink); margin-bottom: 8px; }
.mg-review .hint { margin: 8px 0 0; }
.mg-rv-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.mg-rv { display: flex; flex-direction: column; gap: 6px; }
.mg-rv-acts { display: flex; gap: 4px; }
.mg-rv-acts .btn { flex: 1 1 0; padding-left: 6px; padding-right: 6px; }
.mg-empty { text-align: left; padding: 6px 0; }

/* The viewer */
.mv { display: flex; flex-direction: column; gap: 12px; }
/* The picture sits out of flow, so it never sizes the 4:3 frame. In flow, a tall photo at full width made the grid row taller than the frame, and centring pushed it down and out the bottom. */
.mv-img { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: var(--paper-2); }
.mv-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.mv-img .mg-ic { font-size: 40px; }
.mv-meta { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.mv-meta b { color: var(--ink); }
.mv-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.mv-star { color: var(--text-2); }
.mv-star.on { background: var(--gold); border-color: var(--gold); color: #3a2800; }   /* unmistakably on */
.mv-dnu { display: flex; align-items: flex-start; gap: 8px; flex: 1 1 220px; font-size: 13px; cursor: pointer; }
.mv-dnu b { color: var(--ink); font-weight: 600; }
.mv-dnu small { display: block; font-size: 11.5px; color: var(--muted); }
.mv-why { margin: -4px 0 0; }
.mv-why:empty { display: none; }
.mv-review { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--gold-wash); border: 1px solid #f3dcae; font-size: 13px; color: var(--gold-ink); }
.mv-review.ok { background: var(--mint-2); border-color: #c5e8e3; color: var(--teal-ink); }
.mv-review p { margin: 0; }
.mv-review .btn { align-self: flex-start; }
.mv-saved { margin: 0; }

/* Media consent */
.consent { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--hair-2); font-size: 13.5px; }
.consent p { margin: 0; }
.consent.none { background: var(--paper-2); border-style: dashed; color: var(--text-2); }
.consent.ok { background: var(--mint-2); border-color: #c5e8e3; }
.consent-line b { color: var(--ink); }
.consent-line small { display: block; margin-top: 1px; font-size: 11.5px; color: var(--muted); }
.consent-limits { padding: 9px 12px; border-radius: 10px; background: var(--gold-wash); border: 1px solid #f3dcae; }
.consent-limits .eyebrow { color: var(--gold-ink); }
.consent-limits p { margin-top: 2px; font-size: 14px; font-weight: 700; line-height: 1.45; color: var(--gold-ink); }
.consent-past { margin-top: 8px; }
.consent-past summary { width: max-content; max-width: 100%; cursor: pointer; font-size: 12px; font-weight: 700; color: var(--teal-ink); }

/* Stories and site updates */
.story-media { margin-bottom: 8px; }
.story-media:empty { display: none; }
.story-up { gap: 6px 10px; margin: 0 0 10px; }
.upd-photo { display: block; width: 64px; height: 64px; margin: 6px 0 2px; padding: 0; border: 1px solid var(--hair); border-radius: 10px; overflow: hidden; background: var(--paper-2); position: relative; cursor: pointer; }
.upd-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.upd-photo .mg-ic { font-size: 18px; }

/* The reports' uploaded files */
.rp-up-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.rp-up-row .hint { flex: 1 1 240px; }
.rp-legacy { margin-top: 10px; }
.rp-legacy summary { width: max-content; max-width: 100%; cursor: pointer; font-size: 12px; font-weight: 700; color: var(--teal-ink); }
.rp-media + .rp-media { margin-top: 8px; }
.rp-mtile { flex-direction: row; align-items: stretch; gap: 10px; padding: 8px 44px 8px 8px; }
.rp-thumb { position: relative; flex: none; width: 64px; height: 64px; border-radius: 9px; overflow: hidden; background: var(--paper-2); display: grid; place-items: center; }
.rp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rp-thumb .mg-ic { font-size: 20px; padding: 0; }
.rp-mbody { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.rp-name { font-size: 12.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-name a { color: inherit; }
.rp-mtile figcaption { flex-wrap: wrap; }
.rp-dnu { flex: none; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--hair-2); background: #fff; font-size: 11.5px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.rp-dnu.on { background: var(--gold-wash); border-color: #f3dcae; color: var(--gold-ink); }
.rp-mtile.dnu .rp-thumb img { opacity: .45; filter: grayscale(.6); }
.rp-mtile.up .bar { height: 5px; }
.rp-ustate { font-size: 11.5px; color: var(--muted); }
.rp-mtile.failed .rp-ustate { color: var(--gold-ink); font-weight: 600; }
.rp-mtile.failed .bar > i { background: var(--gold); }
.rp-mtile.gone { border-style: dashed; }
.rp-mtile .btn.link { align-self: flex-start; padding: 0; }
.rp-ro .rp-main .rp-up-row, .rp-ro .rp-main .rp-legacy, .rp-ro .rp-main .rp-up-row + .hint { display: none; }

/* Phones: the tray is a sheet from the bottom, the pill sits above the home bar, buttons are thumb-sized */
@media (max-width: 760px) {
  .up-tray { left: 0; right: 0; bottom: 0; align-items: center; }
  .up-pill { margin-bottom: calc(14px + env(safe-area-inset-bottom)); min-height: 44px; }
  .up-sheet { width: 100%; max-height: 74svh; border: 0; border-radius: 20px 20px 0 0; }
  .up-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .up-foot .btn, .up-acts .btn.link { min-height: 44px; }
  .up-foot .btn { flex: 1 1 auto; }
  .up-foot .spacer { display: none; }
  .up-head .dr-close { width: 40px; height: 40px; }
  .media-head .btn, .rp-up-btn, .story-up .btn, .consent .btn.small, .mg-rv-acts .btn { min-height: 44px; }
  .mg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mg-filter { margin: 0 -18px 8px; padding: 0 18px 2px; }
  .mg-filter button { padding: 8px 13px; font-size: 13px; }
  .mg-rv-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mv-star { min-height: 44px; }
  .rp-dnu { padding: 8px 12px; font-size: 12.5px; }
  .rp-up-btn { flex: 1 1 100%; }
}
.rp-mx { position: absolute; top: 6px; right: 6px; }
/* While a form is open, the tray sits above its buttons (the report's Send, a modal's Save). */
body:has(#modal-root .modal-back) .up-tray { bottom: 88px; }
@media (max-width: 760px) {
  body:has(#modal-root .modal-back) .up-tray { bottom: 0; }
  body:has(#modal-root .modal-back) .up-pill { margin-bottom: calc(82px + env(safe-area-inset-bottom)); }
  body:has(#modal-root .rp-modal) .up-pill { margin-bottom: calc(136px + env(safe-area-inset-bottom)); }
}

/* ---------- Galleries a page at a time, and travel photos (media.js, migration 032) ----------
   "Show more" reads the next 48 from the database. Travel uploads (a trip's panel, Socials) carry
   the reminder about people who can be recognised, and need a place name when there's no trip. */
.mg-more { margin-top: 10px; }
.mg-more .hint { font-weight: 500; }
.up-remind { margin: 0; padding: 8px 11px; border-radius: 10px; background: var(--gold-wash); border: 1px solid #f3dcae; color: var(--gold-ink); font-size: 13px; font-weight: 600; line-height: 1.45; }
.up-trip-line { margin: 0; font-size: 13.5px; color: var(--text-2); }
.up-trip-line b { color: var(--ink); }
.up-need { margin: 0; color: var(--gold-ink); font-weight: 600; }
.up-need:empty { display: none; }
label.btn.up-choose.off { opacity: .5; cursor: not-allowed; box-shadow: none; }
.travel-card { margin-top: 16px; }
.travel-seg { margin-bottom: 10px; }
.travel-note { margin: 10px 0 0; }
@media (max-width: 760px) {
  .mg-more, .travel-seg .seg button { min-height: 44px; }
  .mg-more { width: 100%; }
  /* The upload sheets (a site's, a story's, a trip's, travel) and the photo viewer: thumb-sized buttons */
  .modal:has(.up-choose) .mf .btn, .modal:has(.mv) .mf .btn { min-height: 44px; }
}

/* ---------- Library files linked to a story (056; media.js, stories.js) ----------
   "Add photos or videos" on a story is a sheet with two tabs: Upload new, and From our library, which is the gallery's own grid in
   a pick mode that adds (teal ticks; the removing pick mode stays red). Linked files sit with the story's uploads, each with "from <site>"
   under it and a way to take it out of the story. */
.modal.lib-modal { width: min(860px, 100%); height: min(780px, calc(100vh - 32px)); max-height: none; display: flex; flex-direction: column; overflow: hidden; }
.modal.lib-modal .mb { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; align-content: start; }
.modal.lib-modal .mf { flex: none; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--hair); }
.lib-tabs { display: flex; gap: 6px; margin: 12px 0 2px; }
.lib-tabs button { flex: 1 1 0; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--hair-2); background: #fff; font-size: 13px; font-weight: 600; color: var(--text-2); }
.lib-tabs button.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.lib-pane > * + * { margin-top: 10px; }
.lib-note { margin: 0; }
.lib-bar { position: sticky; top: 0; z-index: 2; display: flex; flex-direction: column; gap: 8px; padding: 2px 0 8px; background: #fff; }
.lib-sels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lib-sel { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 11.5px; font-weight: 700; color: var(--text-2); }
.lib-sel select { width: 100%; min-width: 0; padding: 7px 10px; border: 1px solid var(--hair-2); border-radius: 10px; background: #fff; font-weight: 500; }
.lib-bar .mg-filter { margin: 0; }
.mg.linking .mg-tile.picked { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(20, 155, 155, .4); }
.mg.linking .mg-tile.picked img { opacity: 1; }
.mg.linking .mg-tile.picked .mg-check { background: var(--teal); }
.mg.linking .mg-tile.pick:not(.locked):not(.was):hover { box-shadow: 0 0 0 2px var(--mint), var(--sh); }
.mg.linking .mg-tile.picked:not(.was):hover { box-shadow: 0 0 0 2px rgba(20, 155, 155, .4); }
.mg.linking .mg-tile.was { cursor: default; }
.mg.linking .mg-tile.was .mg-badge { color: var(--teal-ink); background: var(--mint-2); }
.mg-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mg-note { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.mg-from { flex: 1 1 auto; min-width: 0; font-size: 11px; font-weight: 600; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-unlink { flex: none; padding: 0; font-size: 11px; font-weight: 700; }
@media (max-width: 760px) {
  .modal.lib-modal { width: 100%; height: 92svh; max-height: 92svh; }
  .lib-bar { position: static; }
  .lib-tabs button { min-height: 44px; }
  .lib-sel select { min-height: 44px; }
  .lib-bar .mg-filter { margin: 0 -18px; padding: 0 18px 2px; }
  .modal.lib-modal .mf .btn { min-height: 44px; }
  .mg-note { flex-direction: column; align-items: flex-start; gap: 0; }
  .mg-unlink { min-height: 36px; }
  .mg.linking .mg-tile { border-radius: 10px; }
}

/* ---------- Approval review and sign-off (review.js, migration 030) ----------
   A full-height sheet like the reports: the sections down the left (a swipe row of chips on
   phones), the review in the middle, and the decision on the right. Below 1100px the decision is a
   full-sheet step of its own ("Make your decision"). It sits over the site panel (50) and under
   forms, the photo viewer and the signed record (60). Signatures are drawn on a pad with a finger,
   a pen or the mouse. */
#review-root .modal-back.rv-back { z-index: 55; padding: 16px; }
.modal.rv-modal { position: relative; width: min(1360px, 100%); height: 100%; max-height: none; display: flex; flex-direction: column; overflow: hidden; }
.modal .mh.rv-head { position: relative; flex: none; padding: 18px 64px 12px 26px; border-bottom: 1px solid var(--hair); }
.modal .rv-head h2 { margin: 4px 0 0; font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.2; color: var(--ink); }
.rv-close { top: 14px; right: 16px; }
.modal .mb.rv-mb { flex: 1 1 auto; min-height: 0; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.rv-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 208px minmax(0, 1fr) 380px; grid-template-rows: minmax(0, 1fr); }
.rv-rail .rp-link { gap: 8px; }
.rv-rail .rp-link.on { background: #fff; color: var(--navy); box-shadow: var(--sh); }
.rp-n.rv-n { width: 20px; height: 20px; font-size: 10.5px; background: var(--hair-2); color: var(--ink); }
.rv-rail .rp-link.on .rv-n { background: var(--navy); color: #fff; }
.rv-main { min-width: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 28px 48px; }
.rv-sub { margin: -4px 0 8px; }
/* The gallery and consent blocks bring their own small headings; the section already has one. */
.rv-sec .media-head h3.sec, .rv-sec .consent-sec > h3.sec { display: none; }
.modal .mf.rv-foot { display: none; }

/* The sections */
.rv-facts { margin: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rv-facts .rv-wide { grid-column: 1 / -1; }
.rv-facts dd { overflow-wrap: anywhere; }
.rv-h4 { margin: 16px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.rv-moments { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.rv-moments li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; font-size: 13px; color: var(--text); overflow-wrap: anywhere; }
.rv-moments b { color: var(--ink); font-weight: 600; }
.rv-moments small { display: block; font-size: 11.5px; color: var(--muted); }
.rv-m-when { font-size: 12px; color: var(--muted); font-feature-settings: "tnum"; }
.rv-report-meta { margin: 0 0 8px; }
.rv-doc-wrap { padding: 16px; border-radius: 14px; background: var(--paper-2); }
.rv-mx-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 12px; }
.rv-mx-top .verdict { margin-top: 0; }
.rv-mx-sec { margin-bottom: 10px; }
.rv-crit { display: grid; grid-template-columns: minmax(0, 1fr) auto 46px; gap: 6px 12px; align-items: center; padding: 8px 16px; border-top: 1px solid var(--hair); font-size: 13px; }
.rv-cq { color: var(--ink); font-weight: 600; }
.rv-cq .w { font-size: 11px; font-weight: 600; color: var(--faint); }
.rv-ans { padding: 2px 10px; border-radius: 999px; border: 1px solid var(--hair); background: var(--paper-2); font-size: 12px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.rv-ans.none { color: var(--faint); font-style: italic; }
.rv-crit .pts { text-align: right; font-weight: 700; color: var(--navy); font-feature-settings: "tnum"; }
.rv-crit .pts.neg { color: var(--gold-ink); }
.rv-bills { display: grid; gap: 4px; max-width: 540px; }
.rv-bill { display: grid; grid-template-columns: 1fr 90px 1fr; gap: 10px; padding: 6px 10px; border-radius: 9px; background: var(--paper-2); font-size: 13px; font-feature-settings: "tnum"; overflow-wrap: anywhere; }
.rv-bill.head { padding-bottom: 0; background: none; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rv-bill-avg { margin: 8px 0; font-size: 13px; font-weight: 600; color: var(--teal-ink); }
.rv-sv { margin-top: 6px; }
.rv-working { margin-top: 10px; }
.rv-ck + .rv-ck { margin-top: 2px; }
.rv-cklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.rv-cklist li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }
.rv-cklist small { display: block; font-size: 11.5px; color: var(--muted); }
.rv-ck-i { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.rv-cklist li.on .rv-ck-i { background: var(--teal); color: #fff; }
.rv-cklist li.off .rv-ck-i { background: var(--gold-wash); border: 1px solid #f3dcae; color: var(--gold-ink); }
.rv-cklist li.off > span:last-child { color: var(--text-2); }
.rv-round { margin-top: 14px; }

/* Questions and answers (also on the site panel and in the answer sheet) */
.rv-answers { padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--hair-2); }
.rv-answers .sec { margin-bottom: 2px; }
.rv-asked { margin: 0 0 8px; }
.rv-qa { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 12px; }
.rv-qa > li { padding-left: 2px; }
.rv-q-text { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.rv-a-text { margin: 5px 0 0; padding: 8px 10px; border-left: 3px solid var(--teal); border-radius: 8px; background: var(--mint-2); font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.rv-a-text small { display: block; margin-top: 3px; font-size: 11px; color: var(--muted); white-space: normal; }
.rv-a-field { margin-top: 6px; }
.rv-a-field textarea { min-height: 72px; }
.rv-qa .row { margin-top: 6px; }
.rv-note { margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--paper-2); font-size: 12.5px; color: var(--text-2); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ev-decision .ev-ic { background: rgba(44, 88, 133, .08); color: var(--navy); }

/* The decision */
.rv-decide { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--hair); background: var(--paper-2); }
.rv-dh { flex: none; display: flex; align-items: center; gap: 10px; padding: 16px 18px 8px; }
.rv-dh h3 { flex: 1; margin: 0; font-family: var(--serif); font-weight: 400; font-size: 19px; color: var(--ink); }
.rv-dclose { display: none; }
.rv-dbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 18px 18px; display: flex; flex-direction: column; gap: 12px; }
.rv-dfoot { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--hair); background: #fff; }
.rv-dfoot .btn.primary { margin-left: auto; }
.rv-need { color: var(--gold-ink); font-weight: 600; }
.rv-choices { display: grid; gap: 8px; }
.rv-choice { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 11px 14px 11px 16px; border: 1px solid var(--hair-2); border-radius: 12px; background: #fff; text-align: left; }
.rv-choice b { font-size: 14px; font-weight: 700; color: var(--ink); }
.rv-choice small { font-size: 12px; line-height: 1.4; color: var(--muted); }
.rv-choice:hover { border-color: var(--teal); }
.rv-choice.on { border-color: var(--navy); box-shadow: inset 4px 0 0 var(--navy), 0 0 0 1px var(--navy); }
.rv-choice.approve_install.on, .rv-choice.release.on { border-color: var(--teal); box-shadow: inset 4px 0 0 var(--teal), 0 0 0 1px var(--teal); }
.rv-choice.approve_hold.on { border-color: var(--gold); box-shadow: inset 4px 0 0 var(--gold), 0 0 0 1px var(--gold); }
.rv-form { display: grid; gap: 10px; }
.rv-form:empty { display: none; }
.rv-qs { display: grid; gap: 8px; }
.rv-qrow { position: relative; }
.rv-qrow .rp-x { position: absolute; top: -4px; right: -4px; }
.rv-seg { display: flex; width: 100%; }
.rv-seg button { flex: 1; }
.rv-fhint { display: block; margin-top: 1px; font-weight: 500; }
.rv-date input { max-width: 210px; }
.rv-holdbox { padding: 10px 12px; border-radius: 12px; background: var(--gold-wash); border: 1px solid #f3dcae; color: var(--gold-ink); }
.rv-holdbox .eyebrow { color: var(--gold-ink); }
.rv-holdbox p { margin: 2px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.rv-holdbox .hint { color: var(--gold-ink); opacity: .85; }
.rv-nothing { margin: 8px 0 0; font-size: 14px; color: var(--text-2); }
.rv-sign { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--hair-2); }
.rv-summary { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--mint-2); border: 1px solid #c5e8e3; color: var(--teal-ink); font-size: 13.5px; font-weight: 600; line-height: 1.45; }
.rv-summary:empty { display: none; }
.rv-sign > .hint { margin: 0; }

/* The signature pad */
.rv-pad { position: relative; height: 170px; margin-top: 6px; border: 1px solid var(--hair-2); border-radius: 12px; background: #fff; overflow: hidden; touch-action: none; }
.rv-pad canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.rv-pad-line { position: absolute; left: 18px; right: 18px; bottom: 38px; border-bottom: 1.5px dashed var(--hair-2); pointer-events: none; }
.rv-pad-hint { position: absolute; left: 20px; bottom: 44px; font-size: 13px; font-weight: 500; color: var(--faint); pointer-events: none; }
.rv-pad-clear { position: absolute; top: 4px; right: 4px; }

/* The signed record */
.modal.rv-rec-modal { width: min(860px, 100%); display: flex; flex-direction: column; overflow: hidden; }
.modal.rv-rec-modal .mb { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--paper-2); }
.modal.rv-rec-modal .mf { flex: none; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--hair); }
.rv-rec .rv-doc { padding: 34px 42px 30px; }
.rv-doc-qs { margin: 0 0 8px; padding-left: 20px; }
.rv-doc-qs li { margin-bottom: 8px; }
.rv-doc-qs p { margin: 0 0 3px; white-space: pre-wrap; }
.rv-doc-a { padding-left: 10px; border-left: 3px solid var(--hair-2); }
.rv-sigs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 10px; }
.rv-sig { margin: 0; }
.rv-sig-img { height: 96px; display: flex; align-items: flex-end; border-bottom: 1px solid var(--ink); }
.rv-sig-img img { max-width: 100%; max-height: 90px; object-fit: contain; }
.rv-sig figcaption { display: flex; flex-direction: column; margin-top: 6px; font-size: 12.5px; }
.rv-sig figcaption b { font-size: 14px; color: var(--ink); }
.rv-sig figcaption span { font-size: 11.5px; color: var(--muted); }
.rv-sig-wait { display: flex; align-items: flex-end; min-height: 96px; }
.rv-sig-wait p { margin: 0; }
.rv-doc-id { margin: 24px 0 0; font-size: 11px; color: var(--muted); overflow-wrap: anywhere; }
.rv-cosign { display: grid; gap: 10px; padding: 16px 18px; border-radius: 16px; background: #fff; border: 1px solid var(--hair-2); }
.rv-cosign h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 19px; color: var(--ink); }
.rv-cosign .hint, .rv-cosign .rv-note { margin: 0; }
/* Filed in Drive (the filer's file_decision): filing, filed, or not yet with "File it in Drive" */
.rv-filed { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--hair-2); background: #fff; font-size: 13px; }
.rv-filed p { flex: 1 1 240px; margin: 0; color: var(--text-2); }
.rv-filed p b { color: var(--ink); }
.rv-filed small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere; }
.rv-filed .row { gap: 8px; }
.rv-filed.ok { background: var(--mint-2); border-color: #c5e8e3; }
.rv-filed.ok p b { color: var(--teal-ink); }
.rv-filed.failed { background: var(--gold-wash); border-color: #f3dcae; }
.rv-filed.failed p, .rv-filed.failed p b { color: var(--gold-ink); }
.rv-filed.busy p b { color: var(--text-2); font-weight: 600; }
.rv-filed-box:empty { display: none; }
@media (max-width: 760px) {
  .rv-filed .btn { min-height: 44px; }
  .rv-filed .row { flex: 1 1 100%; }
  .rv-filed .row .btn { flex: 1 1 auto; }
}

/* Narrower screens: the decision becomes its own full-sheet step */
@media (max-width: 1100px) {
  .rv-body { grid-template-columns: 190px minmax(0, 1fr); }
  .rv-decide { display: none; position: absolute; inset: 0; z-index: 3; border-left: 0; }
  .rv-modal.rv-deciding .rv-decide { display: flex; }
  .rv-modal.rv-deciding .rv-foot { display: none; }
  .rv-dclose { display: inline-flex; }
  .modal .mf.rv-foot { display: flex; flex: none; align-items: center; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--hair); }
}

/* Phones: a full-screen sheet, the sections as a swipe row of chips, thumb-sized buttons */
@media (max-width: 760px) {
  #review-root .modal-back.rv-back { padding: 0; place-items: stretch; }
  .modal.rv-modal { width: 100%; height: 100svh; max-height: 100svh; border-radius: 0; }
  .modal .mh.rv-head { padding: max(14px, env(safe-area-inset-top)) 64px 10px 16px; }
  .modal .rv-head h2 { font-size: 20px; }
  .rv-close { width: 44px; height: 44px; top: max(8px, env(safe-area-inset-top)); right: 10px; }
  .rv-body { display: flex; flex-direction: column; }
  .rv-rail .rv-n { display: none; }
  .rv-rail .rp-link { min-height: 40px; }
  .rv-rail .rp-link.on { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: none; }
  .rv-main { flex: 1; min-height: 0; padding: 0 16px 24px; }
  .rv-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rv-moments li { grid-template-columns: 76px minmax(0, 1fr); }
  .rv-doc-wrap { padding: 0; background: none; }
  .rv-crit { grid-template-columns: minmax(0, 1fr) 40px; padding: 9px 12px; }
  .rv-crit .rv-ans { grid-column: 1; grid-row: 2; justify-self: start; }
  .rv-crit .pts { grid-column: 2; grid-row: 1 / span 2; }
  .rv-bill { grid-template-columns: 1fr 64px 1fr; }
  .modal .mf.rv-foot { padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); }
  .rv-foot .hint { display: none; }
  .rv-dh { padding: max(14px, env(safe-area-inset-top)) 16px 8px; }
  .rv-dbody { padding: 4px 16px 18px; }
  .rv-dfoot { padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); }
  .rv-dfoot .btn.primary { flex: 1 1 100%; }
  .rv-foot .btn, .rv-dfoot .btn, .rv-dclose, .rv-pad-clear, .rv-seg button, .rv-form .pick-row button, .rv-answers .btn, .rows .btn[data-rv-record], .ev .btn[data-rv-record] { min-height: 44px; }
  .rv-choice { min-height: 56px; }
  .rv-pad { height: 190px; }
  .rv-sigs { grid-template-columns: 1fr; }
  .rv-rec .rv-doc { padding: 22px 16px 24px; }
  .rv-cosign { padding: 14px; }
}

/* Printing the signed record: just the document */
@media print {
  body.cc-print-doc { background: #fff; }
  body.cc-print-doc > :not(#modal-root) { display: none !important; }
  body.cc-print-doc #modal-root .modal-back { position: static; display: block; padding: 0; background: none; }
  body.cc-print-doc #modal-root .modal { display: block; width: auto; height: auto; max-height: none; overflow: visible; border-radius: 0; box-shadow: none; }
  body.cc-print-doc #modal-root .mh, body.cc-print-doc #modal-root .mf, body.cc-print-doc #modal-root .rv-cosign, body.cc-print-doc #modal-root .rv-filed-box { display: none !important; }
  body.cc-print-doc #modal-root .mb { display: block; padding: 0; overflow: visible; background: none; }
  body.cc-print-doc .rv-doc { max-width: none; margin: 0; padding: 0; border-radius: 0; box-shadow: none; font-size: 11pt; }
  body.cc-print-doc .rv-sig, body.cc-print-doc .rv-doc h2 { break-inside: avoid; }
}

/* ---------- Connect Claude Code (connect.js; migration 031, the cc-mcp connector) ----------
   The profile's "Connect Claude Code" sheet: the one-time command to paste, and the connections list.
   Phones: the command box uses 16px text (no zoom on tap) and the buttons are thumb-sized. */
.cx-sec { margin: 6px 0 0; font-size: 12px; font-weight: 700; color: var(--text-2); }
.cx-list { list-style: none; margin: 0; padding: 0; }
.cx-list > li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--hair); font-size: 13.5px; }
.cx-list > li:first-child { border-top: 0; }
.cx-main { flex: 1; min-width: 0; }
.cx-main b { overflow-wrap: anywhere; }
.cx-main small { display: block; margin-top: 2px; color: var(--muted); font-size: 11.5px; font-weight: 500; }
.cx-once { display: grid; gap: 10px; padding: 12px 14px; background: var(--gold-wash); border: 1px solid #f3dcae; border-radius: 14px; }
.cx-once p { margin: 0; }
.cx-cmd { width: 100%; min-height: 96px; padding: 10px 11px; border: 1px solid var(--hair-2); border-radius: 10px; background: #fff; color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.45; resize: none; word-break: break-all; }
.cx-copy-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
@media (max-width: 760px) {
  .cx-cmd { font-size: 16px; min-height: 160px; }
  .cx-list .btn, .cx-copy-row .btn { min-height: 44px; }
}

/* ---------- The install: booking, payments, completion (install.js, migration 033) ----------
   The install card on an Installing or Installed site's panel, its forms (bottom sheets on phones,
   with 16px typing boxes and 44px buttons), the installers list, and the spend card on Numbers. */
.ib { display: flex; flex-direction: column; gap: 10px; }
.ib .sec { margin: 6px 0 0; }
.ib-head { display: flex; align-items: center; gap: 8px; }
.ib-head .sec { margin: 0; }
.ib-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.ib-next .ib-note { color: var(--teal-ink); }
.ib-facts { margin: 0; }
.ib-facts dd small { display: block; margin-top: 1px; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.ib-facts .ib-wide { grid-column: 1 / -1; }
.ib-pre { white-space: pre-wrap; overflow-wrap: anywhere; font-weight: 500; }
.ib-facts dd, .ib-inv b, .ib-inv small { overflow-wrap: anywhere; }
.btn.link.ib-link { padding: 0; white-space: normal; text-align: left; }

/* The money: four cells, what's paid in teal, what's due in gold */
.ib-money { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ib-m { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 10px 12px; border: 1px solid var(--hair); border-radius: 12px; background: var(--paper-2); }
.ib-k { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ib-m b { font-family: var(--serif); font-weight: 400; font-size: 17px; line-height: 1.25; color: var(--ink); font-feature-settings: "tnum"; overflow-wrap: anywhere; }
.ib-state { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.ib-state.paid { color: var(--teal-ink); }
.ib-state.due, .ib-state.part { color: var(--gold-ink); }
.ib-state.invoiced { color: var(--navy); }
.ib-m.ib-out { background: var(--mint-2); border-color: #c5e8e3; }
.ib-flag { margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--gold-wash); border: 1px solid #f3dcae; color: var(--gold-ink); font-size: 12.5px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }

/* The invoices */
.ib-invs > li.ib-inv { flex-wrap: wrap; align-items: flex-start; gap: 6px 10px; }
.ib-inv .grow { flex: 1 1 200px; }
.ib-inv b { font-size: 13.5px; color: var(--ink); }
.ib-inv-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px; flex: 0 1 auto; }
.ib-inv.paid b { color: var(--teal-ink); }
.ib-add, .ib-foot { gap: 6px; }
.ib-foot { padding-top: 4px; border-top: 1px solid var(--hair); }
.ib-hist .ev { grid-template-columns: 26px minmax(0, 1fr); }
.ev-install .ev-ic { background: var(--gold-wash); color: var(--gold-ink); }

/* The forms */
.ib-group { margin: 0; padding: 10px 12px 12px; border: 1px solid var(--hair-2); border-radius: 14px; display: grid; gap: 10px; min-width: 0; }
.ib-group legend { padding: 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ib-legend-hint { margin: -2px 0 0; }
.ib-seg { margin-top: 6px; }
.ib-balance { margin: -2px 0 0; font-size: 13px; font-weight: 600; color: var(--teal-ink); }
.ib-balance:empty, .ib-need:empty, .ib-match:empty { display: none; }
.ib-need { margin: 0; font-size: 13px; font-weight: 600; color: var(--gold-ink); }
.ib-match { margin: -4px 0 0; font-size: 12.5px; color: var(--teal-ink); }
.ib-match.off { color: var(--gold-ink); font-weight: 600; }
.ib-nudge { margin: 0; padding: 9px 11px; border-radius: 10px; background: var(--mint-2); color: var(--teal-ink); font-size: 12.5px; line-height: 1.45; }
.ib-paybox { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px 12px; border-radius: 12px; background: var(--paper-2); border: 1px solid var(--hair); }
.ib-paybox b { color: var(--ink); overflow-wrap: anywhere; }
.ib-paybox small { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.ib-paybox .btn { margin-top: 4px; }
.money-in .ib-cur { flex: none; align-self: center; min-width: 44px; font-weight: 700; color: var(--text-2); }
.ib-firms small { overflow-wrap: anywhere; }

/* Numbers: the spend card */
.card.ib-spend, .card.num-retired { margin-top: 16px; }
.ib-spend .card-head, .num-retired .card-head { padding: 12px 16px 0; margin-bottom: 4px; }
.ib-spend-note, .num-retired-note { margin: 0 16px 8px; }

@media (max-width: 760px) {
  .ib .btn, .ib-next .btn, .ib-modal .mf .btn, .ib-modal .pick-row button, .ib-paybox .btn { min-height: 44px; }
  .ib-inv-acts { justify-content: flex-start; flex: 1 1 100%; }
  .ib-m b { font-size: 16px; }
  .ib-modal .money-in select { min-height: 44px; }
}
/* 033 attack pass: a booking's cost and installer stay once a payment is recorded (leads) */
.ib-note.ib-locked { padding: 8px 10px; border-radius: 10px; background: var(--gold-wash); border: 1px solid #f3dcae; color: var(--gold-ink); font-weight: 600; }
.ib-modal select:disabled, .ib-modal input:disabled { background: var(--paper-2); color: var(--muted); }

/* Numbers: the portal check hasn't run for a while (30 Sep) */
.stale-note { margin: 0 0 6px; padding: 8px 12px; font-size: 12.5px; font-weight: 600; color: var(--gold-ink); background: var(--gold-wash); border: 1px solid #f3dcae; border-radius: 10px; }

/* Stories: a brief's caption and notes keep their line breaks (30 Sep) */
.brief p.pre { white-space: pre-wrap; overflow-wrap: anywhere; }
/* Story captions, one per platform, with Copy (stories.js CAPTIONS) */
.captions .cap-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.captions .cap-top .sec { margin: 0; }
.cap-block { border: 1px solid var(--hair); border-radius: 12px; background: #fff; padding: 10px 12px; margin-top: 10px; }
.cap-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; }
.cap-head .btn { margin-left: auto; }
.cap-count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cap-count.over, [data-cap-count].over { color: #b42318; font-weight: 700; }
.cap-block p.pre { margin: 0; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Avatars with a face from the watercolour art (30 Sep) */
.avatar.pic { background: #fff; overflow: hidden; box-shadow: inset 0 0 0 1px var(--hair); }
.avatar.pic img { width: 100%; height: 100%; display: block; object-fit: cover; }

/* ---------- Wins (040): postcards over the painting; the big ones pop up once ---------- */
body.on-wins:not(.on-home):not(.signed-out) .veil { opacity: .55; }   /* beats live.css's other-pages veil */
.wins { max-width: 680px; margin: 0 auto 60px; display: grid; gap: 22px; }
.win-tally { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; padding: 12px 18px; font-size: 13.5px; color: var(--text-2); }
.win-tally b { font-family: var(--serif); font-size: 22px; font-weight: 400; color: var(--ink); margin-right: 3px; }
.win-month { justify-self: center; margin: 10px 0 -6px; padding: 3px 14px; border-radius: 999px; background: rgba(255, 255, 255, .9); font-family: var(--serif); font-weight: 400; font-size: 15px; color: var(--teal-ink); box-shadow: var(--sh); }
.win-card { position: relative; background: #fffdf8 url(../img/art/paper.jpg) center / 627px; border: 1px solid rgba(31, 53, 80, .08); border-radius: 18px;
  box-shadow: 0 2px 4px rgba(31, 53, 80, .05), 0 14px 34px rgba(31, 53, 80, .12); transform: rotate(var(--tilt, 0deg)); transition: transform .25s var(--ease); }
.win-card:hover { transform: rotate(0deg) translateY(-2px); }
.win-card.major { border: 2px solid #f3c56d; box-shadow: 0 0 0 5px rgba(245, 166, 35, .12), 0 14px 34px rgba(31, 53, 80, .14); }
.win-photo { margin: 0; }
.win-photo img { display: block; width: 100%; max-height: 440px; object-fit: cover; border-radius: 16px 16px 0 0; background: var(--mint-2); }
.win-card.major .win-photo img { border-radius: 15px 15px 0 0; }
.win-inner { padding: 16px 20px 12px; }
.win-ribbon { display: inline-block; margin-bottom: 4px; padding: 2px 10px; border-radius: 999px; background: var(--gold-wash); color: var(--gold-ink); font-size: 11.5px; font-weight: 700; letter-spacing: .02em; }
.win-title { margin: 4px 0 6px; font-family: var(--serif); font-weight: 400; font-size: 23px; line-height: 1.22; color: var(--ink); overflow-wrap: anywhere; }
.win-text { margin: 0 0 10px; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.win-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12.5px; color: var(--muted); }
.win-meta .chip { cursor: pointer; font: inherit; font-weight: 600; }
.win-by { display: inline-flex; align-items: center; gap: 6px; }
.win-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--hair-2); }
.win-cheer { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: 999px; border: 1px solid var(--hair-2); background: #fff; font-size: 13px; font-weight: 600; color: var(--text-2); cursor: pointer; transition: transform .15s var(--ease), background .15s; }
.win-cheer:hover { transform: scale(1.05); }
.win-cheer:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.win-cheer.on { background: var(--mint); border-color: #b4e1da; color: var(--teal-ink); }
.win-cheerers { display: inline-flex; padding-left: 6px; }
.win-cheerers .avatar { margin-left: -7px; box-shadow: 0 0 0 2px #fffdf8; }
.win-sticker { position: absolute; z-index: 2; top: -30px; right: -20px; width: 88px; height: auto; transform: rotate(var(--rot, 0deg)); pointer-events: none;
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 6px 8px rgba(31, 53, 80, .22)); }
.win-sticker.left { right: auto; left: -22px; }
.win-sticker.small { width: 66px; top: -22px; right: -12px; }
.win-sticker.wide { width: 138px; }
.win-sticker.small.wide { width: 112px; }
.win-card.milestone { background: linear-gradient(135deg, #fff8e8, #fffdf8 60%); }
.win-card.milestone .win-title { font-size: 19px; }
.win-mile { display: flex; gap: 14px; align-items: flex-start; }
.win-sun { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; color: #fff; background: radial-gradient(circle at 35% 35%, #ffd27a, #f5a623 70%); box-shadow: 0 0 0 6px rgba(245, 166, 35, .15); }
.win-empty { text-align: center; padding: 30px 20px; }
.win-team { display: flex; justify-content: center; gap: 4px; margin-bottom: 8px; }
.win-team img { height: 110px; width: auto; }
.win-major-check { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: var(--gold-wash); cursor: pointer; }
.win-major-check small { display: block; color: var(--text-2); font-size: 12px; margin-top: 2px; }
.win-form-preview { display: block; max-width: 100%; max-height: 220px; margin: -4px 0 8px; border-radius: 10px; object-fit: contain; }

.win-pop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(16, 42, 62, .42); backdrop-filter: blur(3px); animation: win-fade .3s var(--ease); }
.win-pop-card { position: relative; width: min(520px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; background: #fffdf8 url(../img/art/paper.jpg) center / 627px; border-radius: 22px; border: 2px solid #f3c56d; box-shadow: 0 30px 80px rgba(16, 42, 62, .35); animation: win-pop-in .55s cubic-bezier(.2, 1.4, .4, 1); }
.win-pop-card .win-photo img { max-height: 300px; border-radius: 20px 20px 0 0; }
.win-pop-body { padding: 18px 24px 20px; overflow: auto; }
.win-pop-body h2 { margin: 6px 0 8px; font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.18; color: var(--ink); overflow-wrap: anywhere; }
.win-pop-btns { margin-top: 16px; gap: 8px; justify-content: center; }
.win-pop-body > .btn.link { display: block; margin: 8px auto 0; }
.win-pop-team { position: absolute; inset: auto -138px -16px -138px; height: 0; pointer-events: none; }
.win-pop-team img { position: absolute; bottom: 0; height: 150px; width: auto; filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 8px 10px rgba(16, 42, 62, .25));
  opacity: 0; animation: win-hop .7s cubic-bezier(.2, 1.5, .4, 1) forwards; }
.win-pop-team .t0 { left: 0; animation-delay: .25s; transform: rotate(-8deg); }
.win-pop-team .t1 { left: 62px; height: 112px; animation-delay: .4s; }
.win-pop-team .t2 { right: 62px; height: 112px; animation-delay: .55s; }
.win-pop-team .t3 { right: 0; animation-delay: .7s; }
.win-confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 70; pointer-events: none; }
@keyframes win-fade { from { opacity: 0; } }
@keyframes win-pop-in { from { opacity: 0; transform: scale(.85) translateY(20px); } }
@keyframes win-hop { from { opacity: 0; translate: 0 60px; } to { opacity: 1; translate: 0 0; } }
@media (max-width: 1000px) {
  .win-pop-team { inset: auto -70px -16px -70px; }
  .win-pop-team .t1, .win-pop-team .t2 { display: none; }
}
@media (max-width: 760px) {
  .win-card { transform: none; }
  .win-sticker { width: 68px; top: -22px; right: -6px; }
  .win-sticker.left { left: -6px; }
  .win-sticker.wide { width: 104px; }
  .win-sticker.small.wide { width: 92px; }
  .win-pop-team { inset: auto 0 -10px 0; }
  .win-pop-team img { height: 92px; }
  .win-pop-team .t1, .win-pop-team .t2 { display: none; }
  .win-pop-team .t0 { left: -10px; } .win-pop-team .t3 { right: -10px; }
  .win-pop-body h2 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .win-pop, .win-pop-card, .win-pop-team img { animation: none; opacity: 1; }
  .win-card, .win-cheer { transition: none; }
}

/* Wins (041): several photos as a stack of prints */
.win-stack { position: relative; aspect-ratio: 4 / 3; margin: 16px 18px 6px; touch-action: pan-y; outline: none; user-select: none; -webkit-user-select: none; }
.win-stack:focus-visible { outline: 2px solid var(--teal); outline-offset: 6px; border-radius: 12px; }
.ws-photo { position: absolute; inset: 0; margin: 0; padding: 7px 7px 7px; background: #fff; border-radius: 10px; box-shadow: 0 2px 4px rgba(31, 53, 80, .08), 0 10px 22px rgba(31, 53, 80, .16);
  transition: transform .45s var(--ease), opacity .35s var(--ease); }
.ws-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; border-radius: 5px; background: var(--mint-2); }
.ws-photo img.missing { visibility: hidden; }
.ws-photo.top { z-index: 3; transform: none; }
.ws-photo.next1 { z-index: 2; transform: translate(12px, -9px) rotate(3deg) scale(.97); }
.ws-photo.next2 { z-index: 1; transform: translate(-12px, -13px) rotate(-3.5deg) scale(.94); }
.ws-photo.rest { z-index: 0; opacity: 0; transform: scale(.9); }
.ws-photo.gone { z-index: 4; opacity: 0; transform: translateX(-110%) rotate(-12deg); }
.ws-nav { all: unset; position: absolute; top: 50%; z-index: 5; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, .92); color: var(--ink); font-size: 24px; line-height: 1; box-shadow: 0 2px 8px rgba(31, 53, 80, .25); opacity: .85; transition: opacity .2s, transform .15s; }
.ws-nav:hover { opacity: 1; transform: scale(1.06); }
.ws-nav:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.ws-nav.prev { left: 12px; } .ws-nav.next { right: 12px; }
.ws-count { position: absolute; top: 15px; right: 15px; z-index: 5; padding: 2px 9px; border-radius: 999px; background: rgba(16, 42, 62, .62); color: #fff; font-size: 11.5px; font-weight: 700; }
.ws-dots { position: absolute; left: 0; right: 0; bottom: -16px; display: flex; justify-content: center; gap: 6px; }
.ws-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--hair-2); transition: background .2s, transform .2s; }
.ws-dots i.on { background: var(--teal); transform: scale(1.25); }
.win-card .win-stack + .win-inner { padding-top: 22px; }
.win-pop-card .win-stack { margin: 18px 22px 8px; }
@media (hover: none) { .ws-nav { opacity: .75; width: 32px; height: 32px; font-size: 21px; } }
@media (prefers-reduced-motion: reduce) { .ws-photo { transition: none; } }
/* the form's photo tiles */
.wn-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin: 6px 0 8px; }
.wn-photos:empty { display: none; }
.wn-tile { position: relative; margin: 0; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--mint-2); border: 1px solid var(--hair); }
.wn-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wn-heic { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font-weight: 700; color: var(--teal-ink); font-size: 13px; padding: 6px; }
.wn-heic small { display: block; font-weight: 500; font-size: 10.5px; color: var(--text-2); margin-top: 2px; }
.wn-top { position: absolute; top: 5px; left: 5px; padding: 1px 7px; border-radius: 999px; background: var(--gold); color: #fff; font-size: 10px; font-weight: 700; }
.wn-tile-acts { position: absolute; right: 4px; bottom: 4px; display: flex; gap: 3px; }
.wn-tile-acts .btn { padding: 1px 7px; font-size: 11px; min-height: 0; background: rgba(255, 255, 255, .92); }
.wn-add { display: inline-flex; cursor: pointer; }
.wn-add[hidden] { display: none; }

/* Site details (042): the map location row */
.place-row { display: flex; gap: 6px; align-items: center; }
.place-row input { flex: 1; min-width: 0; }
.place-row .btn { flex: none; white-space: nowrap; }
.place-msg a { font-weight: 600; }

/* Private tasks (043) */
.t-private { color: var(--navy); font-weight: 600; }

/* Removing files (044): Select mode in a gallery, and the Remove buttons */
.btn.danger { background: #B3412E; border-color: #B3412E; color: #fff; }
.btn.danger:hover { background: #9C3625; border-color: #9C3625; }
.btn.danger:disabled { opacity: .45; }
.btn.link.danger, .btn.link.danger:hover { background: none; border: 0; color: #B3412E; }
.media-head .mg-select { margin-left: auto; margin-right: 6px; }
.mg-pickbar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 8px 10px; border: 1px solid var(--hair-2); border-radius: 12px; background: var(--card, #fff); box-shadow: var(--sh); }
.mg-pick-n { font-size: 13px; font-weight: 700; color: var(--ink); }
.mg.picking .mg-tile.pick:hover { box-shadow: 0 0 0 2px #e9b9ae, var(--sh); }
.mg-tile.picked { border-color: #B3412E; box-shadow: 0 0 0 2px rgba(179, 65, 46, .45); }
.mg-tile.picked img { opacity: .78; }
.mg-tile.locked { cursor: not-allowed; }
.mg-tile.locked img, .mg-tile.locked .mg-ic { opacity: .35; filter: grayscale(.7); }
.mg-check { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 2px solid #fff; background: rgba(31, 53, 80, .35); color: #fff; font-size: 13px; font-weight: 800; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.mg-tile.picked .mg-check { background: #B3412E; }
.mg-tile.pick .mg-play { right: auto; left: 5px; top: auto; bottom: 30px; }

/* Partner packs (045) */
.pk-status { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; vertical-align: 1px; background: var(--paper-2); color: var(--text-2); }
.pk-status.pk-built { background: var(--mint); color: var(--teal-ink); }
.pk-status.pk-shared { background: var(--gold-wash); color: var(--gold-ink); }

/* Electricity bills (053): the list on a page, and the form (its own layer above any modal) */
.bl-count { margin: 0 0 8px; padding: 7px 11px; border-radius: 10px; font-size: 12.5px; font-weight: 600; line-height: 1.45; }
.bl-count.soft { background: var(--gold-wash); border: 1px solid #f3dcae; color: var(--gold-ink); }
.bl-count.ok { background: var(--mint-2); border: 1px solid #c5e8e3; color: var(--teal-ink); }
.bl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bl-card { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 9px; border: 1px solid var(--hair); border-radius: 12px; background: #fff; }
.bl-thumb { position: relative; width: 64px; height: 64px; border-radius: 9px; overflow: hidden; background: var(--paper-2); display: grid; place-items: center; }
.bl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bl-thumb .mg-ic { font-size: 22px; padding: 0; }
.bl-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bl-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.bl-month { color: var(--ink); font-size: 14px; }
.bl-nums { font-size: 13px; font-weight: 600; color: var(--ink); font-feature-settings: "tnum"; overflow-wrap: anywhere; }
.bl-warns, #bl-warn { display: flex; flex-direction: column; gap: 4px; }
.bl-w { display: block; padding: 5px 9px; border-radius: 9px; background: var(--gold-wash); border: 1px solid #f3dcae; color: var(--gold-ink); font-size: 12px; font-weight: 600; line-height: 1.4; }
#bl-warn:empty { display: none; }
.bl-meta { color: var(--muted); font-size: 11.5px; }
.bl-acts { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.bl-acts .btn.link { padding: 0; }
.bl-foot { margin-top: 8px; }
.bl-more { margin: 6px 0 0; }
.bl-legacy { margin-top: 8px; }
#bill-root .modal-back.bl-back { z-index: 62; }
.modal.bl-modal { width: min(560px, 100%); }
.bl-pages { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bl-pages li { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 7px 10px; border: 1px solid var(--hair); border-radius: 10px; background: var(--paper-2); font-size: 12.5px; }
.bl-pages li.hint { border-style: dashed; background: none; }
.bl-pages li.failed { border-color: #f3dcae; background: var(--gold-wash); }
.bl-pg { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; }
.bl-pg b, .bl-pg small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-pg small { color: var(--muted); font-size: 11px; }
.bl-state { font-size: 11.5px; font-weight: 600; color: var(--teal-ink); }
.bl-pages li.failed .bl-state { color: var(--gold-ink); }
.bl-multi { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-2); cursor: pointer; }
.bl-multi input { width: 17px; height: 17px; margin: 0; accent-color: var(--teal); }
.bl-panel { padding: 10px 12px; border: 1px solid #c5e8e3; border-radius: 12px; background: var(--mint-2); font-size: 13px; }
.bl-panel[hidden] { display: none; }
@media (max-width: 640px) {
  .bl-card { grid-template-columns: 56px minmax(0, 1fr); }
  .bl-thumb { width: 56px; height: 56px; }
  .bl-acts { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; gap: 14px; }
}
body:has(#bill-root .modal-back) .up-tray { bottom: 88px; }

/* ---------- The Monday Rewind (054): badges, the lead's card, the story viewer, the approval screen ---------- */
/* Badges (app.js CC.badgeHtml): on the profile and on the Rewind's first card */
/* Each badge picture is a sticker with a clear background, so it is shown whole (contain), never cropped into a circle. The base is
   the small side-by-side card the Rewind's first card starts from (it makes its own pill below); the profile's grid turns it into a
   sticker: picture over name, three across on a phone, four in the desktop sheet. */
.bdg { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 9px; align-items: center; padding: 6px 9px 6px 6px; border: 1px solid var(--hair); border-radius: 12px; background: #fff; }
.bdg-pic { grid-row: 1 / span 2; width: 52px; height: 52px; display: grid; place-items: center; position: relative; }
.bdg-x { position: absolute; right: -6px; bottom: -3px; min-width: 24px; padding: 1px 6px; border-radius: 999px; background: var(--gold-ink); color: #fff; font-size: 11px; font-weight: 700; font-style: normal; line-height: 1.45; text-align: center; box-shadow: 0 1px 4px rgba(31, 53, 80, .25); }
.bdg-miles { margin: 0 0 14px; padding: 10px 10px 9px; border-radius: 16px; border: 1px solid #f3dcae; background: linear-gradient(180deg, #fffdf6, var(--gold-wash)); }
.bdg-miles-row.bdg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bdg-miles-bar { margin: 10px 2px 5px; }
.bdg-miles > small { display: block; text-align: center; }
.bdg-miles .bdg-grid .bdg { padding: 8px 4px 7px; }
.bdg-miles .bdg-grid .bdg-pic { width: 60px; height: 60px; margin-bottom: 2px; }
.bdg-miles .bdg .bdg-how { display: none; }
.bdg-miles .bdg.open .bdg-how { display: block; }
.bdg-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bdg-emoji { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--gold-wash); font-size: 22px; line-height: 1; }
.bdg b { align-self: end; font-size: 12.5px; line-height: 1.2; color: var(--ink); }
.bdg small { align-self: start; font-size: 11px; line-height: 1.3; color: var(--muted); }
.bdg.off { background: var(--paper-2); }
.bdg.off .bdg-pic { filter: grayscale(1); opacity: .45; }
.bdg.off b { color: var(--muted); }
.bdg-block details { margin-top: 12px; }
.bdg-block details .bdg-grid { margin-top: 10px; }
.bdg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.bdg-grid .bdg { appearance: none; -webkit-appearance: none; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 10px 6px 9px; border-radius: 14px; text-align: center; font: inherit; color: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: transform .15s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease); }
.bdg-grid .bdg-pic { grid-row: auto; width: 76px; height: 76px; margin-bottom: 3px; }
.bdg-grid .bdg b, .bdg-grid .bdg small { align-self: auto; max-width: 100%; overflow-wrap: anywhere; }
.bdg-grid .bdg.on { border-color: #f3dcae; background: linear-gradient(180deg, #fff 52%, var(--gold-wash)); box-shadow: var(--sh); }
.bdg-grid .bdg.on:hover { transform: translateY(-1px); }
.bdg-grid .bdg.open { border-color: var(--teal); }
.bdg-grid .bdg .bdg-when { font-weight: 600; color: var(--gold-ink); }
/* Earned: the picture, the name and the day; tap for how. Not yet: faded, with the plain how always showing. */
.bdg.on .bdg-how { display: none; }
.bdg.on.open .bdg-how { display: block; }
.bdg-soon { margin-top: 3px; padding: 0 8px; border-radius: 999px; background: var(--gold-wash); border: 1px solid #f3dcae; font-size: 10.5px; font-weight: 700; color: var(--gold-ink); }
/* Home: "New badge: First Light 🎉", until the person opens their profile */
.bdg-new { margin: 0 0 12px; padding: 9px 12px; border-radius: 12px; background: var(--gold-wash); border: 1px solid #f3dcae; color: var(--gold-ink); font-size: 13px; font-weight: 600; }
.bdg-new > span:first-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bdg-new .chev { color: var(--gold-ink); }

/* Home: the lead's "Your week in review is ready" */
.rw-home { padding: 0; overflow: hidden; }
.rw-home .row-btn { padding: 10px 14px 10px 10px; gap: 12px; }
.rw-home .row-btn > .rw-home-pic { flex: 0 0 52px; width: 52px; height: 68px; border-radius: 10px; background-size: cover; background-position: center; box-shadow: var(--sh); }
.rw-home .row-btn > span:nth-child(2) { flex: 1; min-width: 0; }
.rw-home-t { display: block; margin: 1px 0; font-family: var(--serif); font-weight: 400; font-size: 17px; line-height: 1.2; color: var(--ink); }
.rw-home small { display: block; color: var(--muted); font-size: 12px; }
.rw-past { margin-top: 2px; }

/* The viewer: a 9:16 frame, five painted cards (img/rewind/). Sizes are shares of the frame's width (cqw) so the type scales
   with it. The paper wash at the top keeps the text legible on every picture; the buttons sit in a frosted strip. */
body.rw-lock { overflow: hidden; }
#rewind-root .rw-back { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: rgba(20, 32, 48, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#rewind-root .rw-back.rw-ap-back { z-index: 55; align-items: start; overflow-y: auto; background: rgba(31, 53, 80, .32); backdrop-filter: none; -webkit-backdrop-filter: none; }
.rw-view { position: relative; overflow: hidden; container-type: size; border-radius: 22px; background: #fbf7ee; box-shadow: var(--sh-pop); outline: none; font-size: 15px; color: var(--ink); user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.rw-view.rw-full { height: 100vh; height: min(calc(100dvh - 32px), 920px); aspect-ratio: 9 / 16; max-width: 100%; }
.rw-view.rw-mini { width: 100%; max-width: 300px; aspect-ratio: 9 / 16; margin: 0 auto; border-radius: 18px; }
.rw-bg { position: absolute; inset: 0; background-size: cover; background-position: center bottom; }
.rw-fade { position: absolute; inset: 0 0 auto 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(251, 247, 238, .97) 0%, rgba(251, 247, 238, .94) 55%, rgba(251, 247, 238, .6) 80%, rgba(251, 247, 238, 0) 100%); }
.rw-tap { position: absolute; top: 0; bottom: 0; z-index: 2; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rw-tap.prev { left: 0; width: 30%; }
.rw-tap.next { right: 0; width: 70%; }
.rw-tap:focus-visible { outline-offset: -4px; }
.rw-top { position: absolute; z-index: 3; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 3cqw; padding: 3cqw 4cqw 0; pointer-events: none; }
.rw-bars { flex: 1; display: flex; gap: 1.4cqw; }
.rw-bar { flex: 1; display: flex; align-items: center; height: 14px; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; }
.rw-bar i { display: block; width: 100%; height: max(3px, .9cqw); border-radius: 99px; background: rgba(31, 53, 80, .2); }
.rw-bar.on i, .rw-bar.done i { background: var(--teal-ink); }
.rw-x { pointer-events: auto; flex: 0 0 auto; width: 9cqw; height: 9cqw; min-width: 32px; min-height: 32px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .85); color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; }
.rw-text { position: absolute; z-index: 3; left: 7cqw; right: 7cqw; top: 15cqw; pointer-events: none; text-shadow: 0 0 .7em rgba(251, 247, 238, .95); animation: rwIn .35s var(--ease); }
.rw-text[data-card="note"] { top: 13cqw; }
@keyframes rwIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.rw-text a, .rw-text button { pointer-events: auto; }
.rw-eyebrow { margin-bottom: 1.4cqw; font-size: 12px; font-size: 2.9cqw; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-ink); }
.rw-h { margin: 0 0 3cqw; font-family: var(--serif); font-weight: 400; font-size: 26px; font-size: 8.2cqw; line-height: 1.12; color: var(--ink); }
.rw-text[data-card="note"] .rw-h { font-size: 7.4cqw; margin-bottom: 2.2cqw; }
.rw-xp { display: flex; align-items: baseline; gap: 2.4cqw; margin: 0 0 3.2cqw; }
.rw-xp b { font-family: var(--serif); font-weight: 400; font-size: 70px; font-size: 22cqw; line-height: .95; color: var(--teal-ink); }
.rw-xp span { font-size: 14px; font-size: 4.2cqw; font-weight: 700; }
.rw-light { margin: 0 0 3.2cqw; }
.rw-light b { display: block; font-family: var(--serif); font-weight: 400; font-size: 34px; font-size: 11cqw; line-height: 1.05; color: var(--teal-ink); }
.rw-light p { margin: 1.5cqw 0 0; font-size: 14px; font-size: 4.2cqw; line-height: 1.4; font-weight: 500; }
.rw-lv { display: flex; align-items: baseline; gap: 2cqw; }
.rw-lv b { font-family: var(--serif); font-weight: 400; font-size: 18px; font-size: 5.6cqw; }
.rw-lv span { font-size: 12px; font-size: 3.6cqw; font-weight: 600; color: var(--text-2); }
.rw-level .bar { height: max(6px, 2.2cqw); margin: 1.6cqw 0 1.2cqw; background: rgba(20, 155, 155, .2); }
.rw-level small { font-size: 11px; font-size: 3.4cqw; font-weight: 600; color: var(--text-2); }
.rw-wins { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.4cqw; font-size: 14px; font-size: 4.3cqw; }
.rw-wins.s2 { font-size: 3.8cqw; }
.rw-wins.s3 { font-size: 3.3cqw; }
.rw-wins li { position: relative; padding-left: 1.5em; line-height: 1.35; font-weight: 500; }
.rw-wins li::before { content: "✦"; position: absolute; left: 0; top: 0; color: var(--gold); }
.rw-impact { list-style: none; margin: 0 0 3cqw; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw 4cqw; font-size: 11px; font-size: 3.3cqw; }
.rw-impact li b { display: block; font-family: var(--serif); font-weight: 400; font-size: 2.1em; line-height: 1.05; color: var(--teal-ink); }
.rw-impact li span { display: block; margin-top: .25em; line-height: 1.3; font-weight: 500; color: var(--text); }
.rw-kind { margin: 0; font-size: 14px; font-size: 4.1cqw; line-height: 1.4; font-weight: 500; }
.rw-note { margin: 0; white-space: pre-line; line-height: 1.38; font-weight: 500; font-size: 14px; font-size: 3.9cqw; }
.rw-note.s2 { font-size: 3.5cqw; }
.rw-note.s3 { font-size: 3.1cqw; }
.rw-note.s4 { font-size: 2.8cqw; }
.rw-quests { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.4cqw; font-size: 13px; font-size: 3.9cqw; }
.rw-quests li { display: flex; align-items: flex-start; gap: 2.4cqw; padding: 1.8cqw 2.6cqw; border-radius: 3cqw; background: rgba(255, 255, 255, .72); box-shadow: 0 1px 6px rgba(31, 53, 80, .1); }
.rw-n { flex: 0 0 auto; display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--gold); color: #3a2800; font-weight: 700; font-size: .85em; }
.rw-qt { flex: 1; min-width: 0; line-height: 1.3; font-weight: 600; overflow-wrap: anywhere; }
.rw-bonus { flex: 0 0 auto; align-self: center; font-size: .85em; font-weight: 700; color: var(--teal-ink); white-space: nowrap; }
.rw-extras { position: absolute; z-index: 3; left: 5cqw; right: 5cqw; bottom: calc(22cqw + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; gap: 2cqw; justify-content: center; pointer-events: none; }
.rw-extras > * { pointer-events: auto; }
.rw-chip, .rw-more, .rw-extras .bdg { background: rgba(255, 255, 255, .92); border: 1px solid rgba(31, 53, 80, .1); box-shadow: 0 1px 8px rgba(31, 53, 80, .15); }
.rw-chip { display: inline-flex; align-items: center; gap: 1.4cqw; padding: 1.4cqw 3cqw; border-radius: 99px; font-size: 12px; font-size: 3.4cqw; font-weight: 700; color: var(--ink); text-align: center; }
.rw-mini .rw-extras { bottom: 22cqw; }
/* A badge on a card is a pill: its picture and its name, side by side and centred (not the profile's two-line card). */
.rw-extras .bdg { display: inline-flex; align-items: center; gap: 1.6cqw; padding: .8cqw 3.2cqw .8cqw 1.2cqw; border-radius: 99px; }
.rw-extras .bdg-pic { flex: none; width: 11cqw; height: 11cqw; min-width: 34px; min-height: 34px; grid-row: auto; }
.rw-extras .bdg b { align-self: center; font-size: 12px; font-size: 3.4cqw; line-height: 1.15; white-space: nowrap; }
.rw-extras .bdg small { display: none; }
.rw-more { all: unset; box-sizing: border-box; cursor: pointer; display: block; padding: 2cqw 4cqw; border-radius: 4cqw; background: rgba(255, 255, 255, .92); border: 1px solid rgba(31, 53, 80, .1); box-shadow: 0 1px 8px rgba(31, 53, 80, .15); font-size: 13px; font-size: 3.7cqw; font-weight: 700; color: var(--ink); text-align: center; }
.rw-more small { display: block; margin-top: .2em; font-size: .82em; font-weight: 500; color: var(--text-2); }
.rw-more:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
/* The buttons sit in a frosted strip. On a phone the strip also covers the home bar (the safe area), and everything above it
   (the chips, the badges) is lifted by the same amount, so they never meet; the preview card is no phone screen, so it has none
   (Krystian, 6 Oct 2026: the buttons clashed with the badges in the installed app). */
.rw-foot { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; display: flex; gap: 2.4cqw; justify-content: flex-end; align-items: center; padding: 3cqw 4cqw calc(3cqw + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .5); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 -1px 0 rgba(255, 255, 255, .55); }
.rw-mini .rw-foot { padding-bottom: 3cqw; }
.rw-btn { padding: 2.2cqw 4.4cqw; min-height: 40px; border-radius: 99px; border: 1px solid rgba(31, 53, 80, .14); background: rgba(255, 255, 255, .9); color: var(--navy); font-size: 13px; font-size: 3.7cqw; font-weight: 700; cursor: pointer; white-space: nowrap; }
.rw-btn.go { background: var(--navy); border-color: var(--navy); color: #fff; }
.rw-btn:disabled { opacity: .5; cursor: default; }
.rw-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.rw-mini .rw-btn { min-height: 0; }
.rw-mini .rw-btn:disabled { opacity: 1; }   /* the preview shows the buttons as the lead sees them; they just don't act */
@media (max-width: 560px) {
  #rewind-root .rw-back:not(.rw-ap-back) { padding: 0; }
  .rw-view.rw-full { width: 100vw; height: 100vh; height: 100dvh; max-width: none; aspect-ratio: auto; border-radius: 0; }
}

/* The approval screen (Krystian and Peter): the form on the left, the live preview on the right */
.rw-admin { width: min(1020px, 100%); margin: 0 auto; background: #fff; border-radius: 20px; box-shadow: var(--sh-pop); }
.rw-ap-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 16px 22px 10px; }
.rw-ap-head h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 22px; color: var(--ink); }
.rw-weeks { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.rw-tabs { display: flex; gap: 6px; padding: 0 22px; flex-wrap: wrap; }
.rw-tabs button { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 99px; border: 1px solid var(--hair-2); background: #fff; font-weight: 700; font-size: 13px; color: var(--navy); }
.rw-tabs button.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.rw-tabs button.on .chip { background: rgba(255, 255, 255, .18); border-color: transparent; color: #fff; }
.rw-ap-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; padding: 14px 22px 22px; align-items: start; }
.rw-form { display: grid; gap: 16px; min-width: 0; }
.rw-form .sec { margin: 0 0 6px; }
.rw-prevcol { position: sticky; top: 14px; }
.rw-edit-wins { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.rw-edit-wins li { display: flex; align-items: center; gap: 6px; }
.rw-edit-wins input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--hair-2); border-radius: 10px; background: #fff; font-weight: 500; }
.rw-form textarea { display: block; width: 100%; padding: 10px 12px; border: 1px solid var(--hair-2); border-radius: 12px; background: #fff; font-weight: 500; line-height: 1.5; resize: vertical; }
.rw-form textarea:disabled, .rw-edit-wins input:disabled { background: var(--paper-2); color: var(--text-2); }
.rw-draftbox { margin: 8px 0; padding: 10px 12px; border-radius: 10px; background: var(--paper-2); border: 1px dashed var(--hair-2); white-space: pre-line; font-size: 13px; line-height: 1.5; }
.rw-picks { display: grid; gap: 6px; max-height: 260px; overflow-y: auto; padding-right: 2px; }
.rw-pick { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border: 1px solid var(--hair); border-radius: 10px; background: #fff; font-size: 13px; font-weight: 600; cursor: pointer; }
.rw-pick.on { border-color: #c5e8e3; background: var(--mint-2); }
.rw-pick input[type=checkbox] { width: 17px; height: 17px; margin: 0; accent-color: var(--teal); flex: 0 0 auto; }
.rw-bonus-in { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--teal-ink); white-space: nowrap; }
.rw-bonus-in input { width: 64px; padding: 4px 6px; border: 1px solid var(--hair-2); border-radius: 8px; font-weight: 600; }
.rw-ap-foot { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 860px) {
  .rw-ap-body { grid-template-columns: minmax(0, 1fr); }
  .rw-prevcol { position: static; order: -1; }
}
@media (max-width: 560px) {
  #rewind-root .rw-back.rw-ap-back { padding: 0; }
  .rw-admin { border-radius: 0; min-height: 100vh; }
  .rw-ap-head, .rw-tabs, .rw-ap-body { padding-left: 14px; padding-right: 14px; }
}

/* ---------- Phone notifications (055): the profile's setting ---------- */
.push-set { margin: 14px 0 6px; padding: 12px 14px; border: 1px solid var(--hair); border-radius: 14px; background: var(--paper-2); }
.push-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.push-set .push-line { margin: 6px 0 0; }
.push-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.push-others { margin: 8px 0 0; font-size: 12px; }
.push-others .btn.link { padding: 0 2px; font-size: 12px; }

/* ---------- Check-ins (058): the list, the send flow and the check screen ---------- */
.ck-card { padding-top: 6px; }
.ck-h { margin: 14px 0 6px; }
.ck-list .ck-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ck-row .grow small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.ck-row .chip { margin-left: 4px; vertical-align: 1px; }
.chip.coral { background: #fdeee9; color: #9a3b22; border-color: #f4cfc3; }
.ck-contact { padding: 10px 12px; border: 1px solid var(--hair-2); border-radius: 12px; background: var(--paper-2); }
.ck-contact small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.ck-msg { width: 100%; font: inherit; font-size: 14px; line-height: 1.5; padding: 10px 12px; border: 1px solid var(--hair-2); border-radius: 12px; background: #fff; resize: vertical; }
.ck-en { margin: 6px 0 0; font-size: 13px; color: var(--text-2); }
.ck-body section { margin-bottom: 18px; }
.ck-item { display: flex; flex-direction: column; gap: 8px; }
.ck-big { margin: 0; font-size: 15px; }
.ck-big b { font-size: 20px; color: var(--ink); }
.ck-quote { margin: 0; padding: 10px 12px; border-left: 3px solid var(--teal); background: var(--mint-2); border-radius: 0 12px 12px 0; font-size: 14px; line-height: 1.55; }
.ck-acts { gap: 6px; }
.ck-edit { padding: 10px 12px; border: 1px dashed var(--hair-2); border-radius: 12px; }
.ck-note { margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--paper-2); font-size: 12.5px; color: var(--text-2); }
.ck-note.ok { background: var(--mint-2); color: var(--teal-ink); }
.ck-note.warn { background: var(--gold-wash); color: var(--gold-ink); }
.ck-transcript { margin-top: 4px; }
.ck-photos { list-style: none; margin: 0 0 6px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.ck-photo { display: flex; flex-direction: column; gap: 6px; }
.ck-pic { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; background: var(--paper-2); cursor: pointer; }
.ck-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ck-pic .mg-ic { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 28px; }
.ck-flags { display: flex; flex-wrap: wrap; gap: 4px; }
.ck-flags:empty { display: none; }
.ck-bill { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 10px; border: 1px solid var(--hair); border-radius: 12px; background: #fff; margin-bottom: 10px; }
.ck-bill-pic { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.ck-bill-pic img, .ck-bill-pic .mg-ic { width: 120px; height: 150px; object-fit: cover; border-radius: 8px; border: 1px solid var(--hair); display: flex; align-items: center; justify-content: center; font-size: 30px; background: var(--paper-2); }
.ck-bill-pic .mg-ic { position: static; inset: auto; } /* the shared .mg-ic is absolute for tiles; here it sits in the flow */
.ck-bill-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ck-bill-main p { margin: 0; }
.ck-foot { padding-top: 6px; border-top: 1px solid var(--hair); }
@media (max-width: 560px) {
  .ck-bill { grid-template-columns: 1fr; }
  .ck-bill-pic img, .ck-bill-pic .mg-ic { width: 100%; height: 200px; }
}

/* Improvements needed (9 Oct): the ask, then the thread; an admin's reply sits in gold. */
.rv-imp-ask { padding: 10px 12px; border-radius: 10px; background: var(--paper-2); }
.rv-imp-ask .hint { margin: 4px 0 0; }
.rv-imp-ups { margin-top: 8px; padding-left: 0; list-style: none; gap: 0; }
.rv-imp-ups .rv-a-text { margin-top: 6px; }
.rv-a-text.from-admin { border-left-color: var(--gold); background: var(--paper-2); }
.rv-imp .rv-a-field { margin-top: 10px; }
.ck-tpl { margin-top: 4px; align-items: center; gap: 4px 12px; }

/* Contacts (063) and the how-to video (9 Oct) */
.contact-rows li { align-items: flex-start; }
.contact-rows .chip { margin-left: 6px; vertical-align: 1px; }
.contact-btns { display: flex; gap: 6px; flex: none; }
.contacts [data-contact-add] { margin-top: 8px; }
.check-row { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink); }
.check-row small { display: block; }
.guide-video { display: block; width: 100%; max-height: 72vh; aspect-ratio: 9 / 16; border-radius: 14px; background: #1c3454; object-fit: contain; }

/* Ticks that ask for their answer, and the printable site checklist (9 Oct) */
.checklist .ck-answer { display: block; margin: -2px 0 6px 34px; padding: 0; border: 0; background: none; text-align: left; font: inherit; font-size: 12.5px; color: var(--teal); cursor: pointer; overflow-wrap: anywhere; }
.checklist .ck-answer.missing { color: var(--gold-ink); text-decoration: underline; }
.ck-sheet h2 { margin: 0; font-family: var(--serif, inherit); }
.ck-sheet .sub { margin: 4px 0 12px; color: var(--muted); font-size: 13px; }
.ck-sheet h3 { margin: 14px 0 6px; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--teal); }
.ck-sheet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ck-sheet li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; font-size: 13.5px; break-inside: avoid; }
.ck-sheet .box { width: 18px; height: 18px; border: 1.5px solid var(--ink); border-radius: 4px; display: grid; place-items: center; font-size: 13px; line-height: 1; }
.ck-sheet .q { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.ck-sheet .ck-opts { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: 12.5px; }
.ck-sheet .ck-opts > span { display: inline-flex; align-items: center; gap: 5px; }
.ck-sheet .box.sm { width: 13px; height: 13px; border-width: 1.2px; border-radius: 3px; }
.ck-sheet .line { min-height: 22px; border-bottom: 1px solid #b9c2c9; margin-top: 4px; font-size: 13px; color: var(--ink); }
@media screen { .ck-sheet > h2 { display: none; } }   /* the modal title says it on screen; the sheet needs it on paper */
@media print { body.cc-print-doc .ck-sheet { font-size: 11pt; } body.cc-print-doc .ck-sheet .line { min-height: 26px; } }