@font-face { font-family: "Mona Sans"; src: url("/fonts/MonaSans-latin.woff2") format("woff2"); font-weight: 400 800; font-stretch: 75% 125%; font-display: swap; }
:root {
  --bg: #f4f5f7; --card: #fff; --ink: #1b1f27; --muted: #5d6675; --line: #d9dde4;
  --brand: #14213d; --accent: #1f5eff; --accent-ink: #fff; --ok: #1a7f4b; --warn: #a15c00; --bad: #b3261e;
  --chip: #e8ebf1;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #11141a; --card: #1b2029; --ink: #eceef2; --muted: #a2abbb; --line: #333b49; --brand: #0c1424; --accent: #6b94ff; --accent-ink: #0b1020; --ok: #4cc58a; --warn: #f0b24a; --bad: #ff8b82; --chip: #2a3140; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; padding-bottom: env(safe-area-inset-bottom); }
header#top { background: var(--brand); color: #fff; display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; padding-top: calc(12px + env(safe-area-inset-top)); position: sticky; top: 0; z-index: 5; }
.brand { color: #fff; text-decoration: none; font-weight: 700; letter-spacing: .3px; }
#who { font-size: 14px; opacity: .85; }
#who button { margin-left: 10px; }
main { max-width: 720px; margin: 0 auto; padding: 16px; }
a { color: var(--accent); }
h1 { font-size: 22px; margin: 4px 0 14px; }
h2 { font-size: 17px; margin: 0 0 10px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 14px; }
label { display: block; font-size: 14px; font-weight: 600; margin: 12px 0 4px; }
label small { font-weight: 400; color: var(--muted); }
input, select, textarea { width: 100%; font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; min-height: 46px; }
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.row { display: flex; gap: 10px; } .row > * { flex: 1; min-width: 0; }
button, .btn { font: inherit; font-weight: 600; border: 0; border-radius: 10px; padding: 12px 16px; min-height: 46px; cursor: pointer; background: var(--chip); color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
button.primary, .btn.primary { background: var(--accent); color: var(--accent-ink); }
button.danger { background: transparent; color: var(--bad); border: 1px solid var(--line); }
button.wide { width: 100%; }
button[disabled] { opacity: .5; cursor: not-allowed; }
.muted { color: var(--muted); font-size: 14px; }
.err { color: var(--bad); font-weight: 600; }
/* Classes, not style attributes: the content policy allows no inline styles. */
#who .nav { color: #fff; margin-right: 10px; }
.mt8 { margin-top: 8px; } .mt10 { margin-top: 10px; } .mt12 { margin-top: 12px; }
.my8 { margin: 8px 0; } .mb8 { margin: 0 0 8px; }
.row > .go { flex: 0 0 90px; }
.tall { min-height: 140px; }
.pick { margin-top: 6px; text-align: left; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 8px; }
.chips button { white-space: nowrap; min-height: 38px; padding: 6px 14px; }
.chips button.on { background: var(--accent); color: var(--accent-ink); }
.item { display: flex; gap: 12px; align-items: center; text-decoration: none; color: inherit; }
.item img, .item .ph { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; background: var(--chip); flex: none; }
.item .t { font-weight: 600; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--chip); }
.badge.drafted { background: #fde9b8; color: #6b4300; } .badge.published { background: #c9f0dc; color: #0d5a33; } .badge.err { background: #fbd5d1; color: #8a1c14; }
.fab { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 6px 18px rgba(0,0,0,.25); border-radius: 99px; padding: 14px 22px; }
.cats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cats button { min-height: 64px; text-align: left; justify-content: flex-start; }
.photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.photos div { position: relative; aspect-ratio: 1; }
.photos img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.photos .x { position: absolute; top: 4px; right: 4px; min-height: 32px; width: 32px; padding: 0; border-radius: 99px; background: rgba(0,0,0,.65); color: #fff; }
.list { margin: 6px 0 0; padding-left: 20px; } .list li { margin: 3px 0; }
.problems { border-left: 4px solid var(--warn); }
.review { border-left: 4px solid var(--warn); }
.comps b { font-size: 18px; }
.fact-q { font-size: 14px; font-weight: 600; margin: 12px 0 4px; }
.fact-q small { font-weight: 400; color: var(--muted); }
#facts button.on { background: var(--accent); color: var(--accent-ink); }
.sticky { position: sticky; bottom: 0; background: var(--bg); padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); display: grid; gap: 8px; }
#toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 84px; background: #1b1f27; color: #fff; padding: 10px 16px; border-radius: 10px; opacity: 0; pointer-events: none; transition: opacity .2s; max-width: 90vw; z-index: 40; }
#toast.on { opacity: 1; }
.spin { display: inline-block; width: 16px; height: 16px; border: 3px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: s .8s linear infinite; margin-right: 8px; }
@keyframes s { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 3s; } }

#camera { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; background: #000; color: #fff; }
#camera video { flex: 1; width: 100%; min-height: 0; object-fit: contain; }
.cam-count { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 12px; padding: 6px 12px; border-radius: 99px; background: rgba(0,0,0,.6); font-size: 14px; font-weight: 600; }
.cam-thumbs { display: flex; gap: 6px; min-height: 72px; padding: 8px 12px; overflow-x: auto; }
.cam-thumbs img { flex: none; width: 56px; height: 56px; border-radius: 10px; object-fit: cover; }
.cam-thumbs img.bad { outline: 3px solid #ff8b82; }
.cam-bar { display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 8px; padding: 4px 12px calc(12px + env(safe-area-inset-bottom)); }
.cam-bar button { min-height: 66px; padding: 8px; border-radius: 99px; background: #fff; color: #14151A; }
#cam-shot { background: #2337FF; color: #fff; font-size: 17px; }

/* Approvals and the review card: the Bento boards. Fixed light palette, on any phone setting. */
body.bento { background: #E7E9F0; color: #14151A; font-family: "Mona Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.35; -webkit-font-smoothing: antialiased; }
body.bento header#top { display: none; }
body.bento main { max-width: 480px; padding: 0; }
.bento p, .bento h1 { margin: 0; }
.bento a { color: inherit; text-decoration: none; }
.bento .pad { padding: 16px 12px; }
.bento .err { color: #8A1C14; }
.bento .mute { color: #565B6A; }
.bento .small { font-size: 14px; }
.bento .strong { font-size: 15px; font-weight: 600; line-height: 1.2; }
.bento .num { font-stretch: 125%; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.bento .two { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.bento .round { display: flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: #fff; }
.bento .bar { display: flex; align-items: center; gap: 10px; padding: calc(12px + env(safe-area-inset-top)) 12px 12px; }
.bento .bar h1 { font-size: 25px; }
.bento .bar-end { margin-left: auto; padding-right: 4px; font-size: 14px; font-weight: 600; }
.bento .lcs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 12px; }
.bento .lc { box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; min-height: 236px; padding: 8px 8px 12px; border-radius: 26px; background: #fff; }
.bento .pic { display: block; height: 136px; border-radius: 19px; background: #D8D2FF; overflow: hidden; }
.bento .pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bento .lc-text { display: flex; flex-direction: column; flex: 1; gap: 4px; padding: 0 6px; font-size: 14px; font-weight: 600; line-height: 1.25; }
.bento .lc-end { margin-top: auto; }
.bento span.num.lc-end { font-size: 18px; }
.bento .lc-need { display: flex; align-items: center; gap: 5px; }
.bento .go { position: sticky; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 5; display: flex; align-items: center; justify-content: center; gap: 8px; height: 64px; margin: 22px 12px 18px; border-radius: 999px; background: #2337FF; color: #fff; font-size: 17px; font-weight: 600; box-shadow: 0 12px 30px rgba(35,55,255,.34); }

.bento .stage { position: relative; display: flex; align-items: center; justify-content: center; height: 300px; margin: calc(12px + env(safe-area-inset-top)) 12px 0; border-radius: 34px; background: #D8D2FF; overflow: hidden; }
.bento .stage img { width: 100%; height: 100%; object-fit: contain; }
.bento .stage .round { position: absolute; left: 12px; top: 12px; z-index: 1; }
.bento .pill { position: absolute; right: 12px; z-index: 1; display: flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px; border-radius: 999px; background: #fff; font-size: 14px; font-weight: 600; }
.bento .pill.top { top: 12px; }
.bento .pill.bottom { bottom: 12px; font-weight: 500; }
.bento .tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 10px 12px 12px; }
.bento .t { box-sizing: border-box; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 16px; border: 0; border-radius: 28px; background: #fff; color: inherit; font: inherit; text-align: left; }
.bento .t h1 { font-size: 20px; font-weight: 600; letter-spacing: -.015em; line-height: 1.22; overflow-wrap: anywhere; }
.bento .span { grid-column: 1 / -1; }
.bento .apart { justify-content: space-between; gap: 8px; min-height: 128px; }
.bento .blue { background: #2337FF; color: #fff; cursor: pointer; }
.bento button.blue { align-items: flex-start; justify-content: space-between; min-height: 128px; }
.bento .blue .small { color: #E6E9FF; }
.bento .blue .lbl { color: #fff; }
.bento .big { font-size: 31px; }
.bento .lime { gap: 6px; background: #D4FF4F; }
.bento .peach, .bento .warn { background: #FFE0CF; }
.bento .ink { background: #14151A; color: #fff; }
.bento .check { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; }
.bento .range { position: relative; height: 14px; }
.bento .rail { position: absolute; left: 0; right: 0; top: 5px; height: 4px; border-radius: 2px; background: #E7E9F0; }
.bento .mid { position: absolute; top: 1px; width: 2px; height: 12px; background: #14151A; }
.bento .dot { position: absolute; top: 0; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #2337FF; box-shadow: 0 0 0 2px #fff; }
.bento .ends { display: flex; justify-content: space-between; margin-top: 4px; font-size: 13px; }
.bento .kvs { gap: 10px; }
.bento .kv { display: flex; flex-direction: column; gap: 1px; }
.bento .kv b { font-size: 15px; font-weight: 600; }
.bento .code { flex-direction: row; align-items: center; justify-content: space-between; font-size: 15px; }
.bento .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 20px; font-weight: 600; letter-spacing: .16em; }
.bento .edit-all { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; min-height: 44px; font-size: 14px; font-weight: 600; }
.bento .small-btn { align-self: flex-start; min-height: 44px; padding: 8px 14px; border-radius: 999px; background: rgba(20,21,26,.08); color: inherit; font-size: 14px; }
.bento .flags { gap: 2px; }
.bento .lbl, .bento .flags label, .bento .fact-q { margin: 10px 0 4px; font-size: 14px; font-weight: 600; }
.bento .flags .lbl:first-child, .bento .flags label:first-child, .bento .flags .fact-q:first-child { margin-top: 0; }
.bento .fact-q small, .bento .flags label small { font-weight: 400; color: #565B6A; }
.bento input, .bento select, .bento textarea { min-height: 48px; border: 1px solid #C9CDD8; border-radius: 14px; background: #fff; color: #14151A; }
.bento .picks { display: flex; flex-wrap: wrap; gap: 6px; }
.bento .row button, .bento .picks button { flex: 1 1 auto; min-height: 48px; border-radius: 999px; background: #E7E9F0; color: #14151A; }
.bento .row button.on, .bento .picks button.on { background: #14151A; color: #fff; }
.bento .foot { position: sticky; bottom: 0; z-index: 5; display: flex; gap: 8px; padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); background: rgba(231,233,240,.72); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.bento .skip { display: flex; align-items: center; justify-content: center; flex: none; width: 92px; height: 66px; border-radius: 999px; background: #fff; font-size: 16px; font-weight: 600; }
.bento .hold { position: relative; flex: 1; height: 66px; padding: 0; border: 0; border-radius: 999px; overflow: hidden; background: #14151A; color: #fff; font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.bento .hold.link { display: flex; align-items: center; justify-content: center; }
.bento .hold[disabled] { opacity: 1; background: #565B6A; }
.bento .hold .fill { position: absolute; inset: 0; width: 0; background: #2337FF; transition: width .18s ease-out; }
.bento .hold[data-on="true"] .fill { width: 100%; transition: width 1s linear; }
.bento .hold[data-done="true"] .fill { width: 100%; }
.bento .hold .say { position: relative; }
.bento .foot-note { padding: 12px 4px; }