/* Korbonaut app. Colours, sizes and fonts come from design/tokens.css and the shared parts (buttons, fields, pills,
   logos, avatars, cards) from web/ui/ui.css, both one source with the back office; this file only lays the screens out. Light only for now: index.html sets data-theme="light" until every value here is a token. */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
/* The app is not a page to zoom: no pinch or double-tap zoom (Safari ignores user-scalable=no in index.html, it
   follows touch-action), no text inflation, and no field small enough for iOS to zoom into when it gets the focus
   (the 16 px floor is at the end of this file, so it wins over the fields' own sizes). */
html { touch-action: pan-x pan-y; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: var(--font); font-size: var(--text-body); line-height: 1.35; color: var(--ink); background: var(--page);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left; }
input { font: inherit; color: inherit; }
.faint { color: var(--faint); }
.muted { color: var(--muted); font-size: var(--text-caption); }

/* ---------- page around the phone ---------- */
.stage { min-height: 100%; display: flex; align-items: center; justify-content: center; gap: 56px; padding: 32px 24px; }
.about { width: 600px; flex: 0 1 600px; font-size: var(--text-caption); line-height: 1.5; color: var(--muted); }
.about .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.about h1 { font-size: var(--text-title); font-weight: 600; color: var(--ink); margin: 0 0 8px; }
.about h2 { font-size: var(--text-caption); font-weight: 600; color: var(--ink); margin: 20px 0 4px; }
.about ol { padding-left: 18px; margin: 0; }
.about li { margin: 5px 0; }
.about b { color: var(--ink); font-weight: 600; }
.about a { color: var(--link); }
.about .today { display: flex; gap: 8px; align-items: center; }
.about .today input { font-size: var(--text-caption); padding: 4px 6px; border: 1px solid var(--hair); border-radius: 8px; background: var(--card); }
.about .today button { color: var(--link); }
.about .link-btn { color: var(--link); }
.about .reset { margin-top: 12px; color: var(--link); }
.phone {
  position: relative; flex: none; width: 390px; height: 844px; overflow: hidden;
  background: var(--card); border: 10px solid var(--ink); border-radius: 54px;
}
#app { position: absolute; inset: 0; overflow: hidden; }

/* ---------- screen frame ---------- */
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; padding-top: 14px; }
.nav { height: 48px; flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 6px; }
.nav > :first-child { justify-self: start; }
.nav > :last-child { justify-self: end; }
.nav-right { display: flex; align-items: center; }
/* Home: the signed-in shopper next to the cog, with a dot for a buddy request; or a small Sign in */
.me-btn { position: relative; display: inline-flex; padding: 6px; }
.me-btn .avatar { font-size: var(--text-caption); }
.me-dot { position: absolute; top: 4px; right: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); border: 2px solid var(--page); }
.signin-btn { min-height: 28px; padding: 0 12px; font-size: var(--text-small); margin-right: 2px; }
.row .sub .avatar { vertical-align: top; margin-top: 1px; font-size: 7px; box-shadow: none; } /* sits on the line of small text */
.share-btn { display: flex; align-items: center; min-height: var(--touch); padding: 0 4px; }
.mark { justify-self: center; display: block; height: 30px; width: auto; }
.scroll { flex: 1; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.pad { padding: 4px 16px 120px; }
.h1 { font-size: var(--text-page); font-weight: 600; letter-spacing: -0.01em; margin: 4px 0 16px; }
.h3 { font-size: var(--text-title); font-weight: 600; letter-spacing: -0.01em; }

/* ---------- home ---------- */
.tpl-card { background: var(--page); border-radius: var(--radius-lg); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.tpl-preview {
  height: 132px; overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 70%, transparent);
  mask-image: linear-gradient(transparent, #000 22%, #000 70%, transparent);
}
.tpl-roll { list-style: none; margin: 0; padding: 0; animation: tpl-roll calc(var(--n) * 3.2s) linear infinite; }
.tpl-roll li { position: relative; height: 30px; line-height: 30px; padding-left: 15px; font-size: 16px; }
.tpl-roll li::before { content: ""; position: absolute; left: 0; top: 50%; width: 5px; height: 5px; margin-top: -2px; border-radius: 50%; background: var(--faint); }
@keyframes tpl-roll { to { transform: translateY(-50%); } }
.home .or { margin: 20px 0 4px; }
.blank-tile { display: flex; align-items: center; gap: 12px; margin-top: 12px; color: var(--accent); }
.bt-ic { flex: none; width: var(--touch); height: var(--touch); border-radius: var(--radius-control); background: var(--page); display: grid; place-items: center; } /* not .tile: that is ui.css's card */
.home .blank-tile + .deals-card { margin-top: 32px; }
.list-card { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 16px 18px; margin-bottom: 12px; background: var(--page); border-radius: var(--radius-lg); }
.list-card:active { background: var(--pressed); }
.lc-title { font-size: var(--text-lead); font-weight: 600; }
.lc-mid { font-size: var(--text-ops); }
.lc-mid b { font-weight: 600; }
.lc-foot { display: flex; align-items: center; justify-content: space-between; min-height: 26px; }
.fab {
  position: absolute; right: 20px; bottom: 28px; z-index: 4; width: 52px; height: 52px; border-radius: 26px;
  display: grid; place-items: center; background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-fab);
}

/* ---------- list: day and total bar ---------- */
.daybar {
  position: sticky; top: 0; z-index: 3; padding: 2px 16px 8px;
  background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--soft);
}
.db-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.db-date { display: flex; flex-direction: column; align-items: flex-start; min-height: 40px; font-size: var(--text-ops); font-weight: 600; }
.db-val { display: flex; align-items: center; gap: 4px; }
.db-label { display: block; font-size: var(--text-micro); font-weight: 500; line-height: 1.2; color: var(--muted); }
.db-total { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; min-height: 40px; }
.tline { display: flex; align-items: center; gap: 6px; }
.tot { font-size: var(--text-body); font-weight: 600; }
.without { font-size: var(--text-fine); color: var(--muted); }
.day-hint { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 36px; margin-top: 4px; padding: 0 12px; border-radius: 10px; font-size: var(--text-caption); }
.day-hint.cheaper { padding: 0 0 0 12px; background: var(--green-wash); color: var(--green); }
.dh-go { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; color: inherit; }
.dh-go b { font-weight: 600; }
.dh-x { width: 40px; height: 36px; display: grid; place-items: center; color: var(--green); opacity: 0.7; }
.day-hint.best { min-height: 0; padding: 2px 0; font-size: var(--text-fine); color: var(--muted); }
.tick { margin-top: 4px; text-align: right; font-size: var(--text-fine); font-weight: 600; color: var(--muted); animation: tick 3s ease-out var(--age, 0ms) both; }
@keyframes tick { 0% { opacity: 0; } 8%, 80% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- list: title and rows ---------- */
.lpad { padding: 0 16px 280px; }
.title-input { display: block; width: 100%; padding: 14px 0 6px; border: 0; outline: 0; background: none; font-size: var(--text-page); font-weight: 600; letter-spacing: -0.01em; }
.title-input::placeholder { color: var(--faint); }
.status-line { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: var(--text-fine); color: var(--muted); }
.spin { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.items { display: flex; flex-direction: column; }
.swipe { position: relative; margin: 0 -8px; border-radius: 10px; overflow: hidden; }
.swipe-bg { position: absolute; inset: 0; display: none; align-items: center; justify-content: flex-end; padding-right: 20px; background: var(--red-soft); color: var(--on-accent); font-size: var(--text-ops); font-weight: 600; }
.swiping .swipe-bg { display: flex; }
.swipe.armed .swipe-bg { background: var(--red); }
.row { position: relative; display: flex; align-items: flex-start; gap: 4px; padding: 4px 8px; border-radius: 10px; background: var(--card); touch-action: pan-y; }
.check { flex: none; width: 36px; height: var(--touch); margin-left: -6px; display: grid; place-items: center; }
.box { width: 20px; height: 20px; border-radius: 5px; border: 1.5px solid var(--faint); display: grid; place-items: center; color: var(--on-accent); transition: background 0.15s, border-color 0.15s; }
.box.on { background: var(--accent); border-color: var(--accent); }
.txt { flex: 1; min-width: 0; padding: 10px 0 6px; }
.name { font-size: var(--text-body); line-height: 1.3; overflow-wrap: anywhere; cursor: text; }
.name-input { display: block; width: 100%; padding: 0; border: 0; outline: 0; background: none; font-size: var(--text-body); line-height: 1.3; }
.sub { display: block; width: 100%; margin-top: 2px; font-size: var(--text-fine); line-height: 1.35; color: var(--muted); }
.sub.blue { color: var(--accent); }
.sub.faint { color: var(--faint); }
.price { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-height: var(--touch); padding: 10px 0 6px 8px; }
.pl { display: flex; align-items: center; gap: 6px; }
.val { font-size: var(--text-ops); font-weight: 600; }
.val.none { font-weight: 400; color: var(--faint); }
.unit { font-size: var(--text-fine); color: var(--muted); }
.was { font-size: var(--text-fine); color: var(--muted); text-decoration: line-through; }
.qchip { flex: none; min-width: 36px; height: 28px; margin-top: 8px; border-radius: var(--radius-pill); background: var(--accent-tint); color: var(--accent); font-weight: 600; text-align: center; }
.row.checked .name { text-decoration: line-through; color: var(--faint); }
.row.checked .sub, .row.checked .price { opacity: 0.5; }

.flash-new { animation: flash-new 1.6s ease-out var(--age, 0ms) both; }
.flash-new .pl { animation: price-in 0.5s ease-out var(--age, 0ms) both; }
.flash-change { animation: flash-change 3s ease-out var(--age, 0ms) both; }
@keyframes flash-new { 0% { background: var(--green-wash); } 100% { background: var(--card); } }
@keyframes flash-change { 0%, 50% { background: var(--accent-tint); } 100% { background: var(--card); } }
@keyframes price-in { from { opacity: 0; transform: translateY(3px); } }

.add-wrap { position: relative; }
.add { display: flex; align-items: center; gap: 10px; min-height: 48px; padding-left: 2px; }
.add-input { flex: 1; min-width: 0; padding: 10px 0; border: 0; outline: 0; background: none; font-size: var(--text-body); }
.add-input::placeholder { color: var(--faint); }
.suggest {
  position: absolute; left: -4px; right: -4px; top: 100%; z-index: 5; padding: 4px 0;
  background: var(--card); border: 1px solid var(--soft); border-radius: var(--radius-control); box-shadow: var(--shadow-pop);
}
.sug-list { max-height: 312px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* about six rows; the rest scroll */
.sug { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 14px; }
.sug.exact { min-height: 52px; }
.sug.on, .sug:hover { background: var(--page); }
.nm { flex: 1; min-width: 0; font-size: var(--text-ops); }
.nm-t { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.nm small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--text-fine); color: var(--muted); }
.pr { font-size: var(--text-small); color: var(--muted); }
.pr.later { color: var(--faint); }
.faded { display: inline-flex; opacity: 0.45; }
.exact-note { margin: 4px 0 12px; font-size: var(--text-caption); color: var(--muted); }
.exact-note b { color: var(--ink); font-weight: 600; }
.sug-hint { padding: 8px 14px 6px; border-top: 1px solid var(--soft); font-size: var(--text-fine); color: var(--faint); }
.hint { padding-left: 32px; font-size: var(--text-caption); line-height: 1.45; color: var(--muted); }
.hint p { margin: 0 0 6px; }
.done-toggle { display: flex; align-items: center; gap: 6px; width: 100%; min-height: var(--touch); margin-top: 8px; border-top: 1px solid var(--soft); font-size: var(--text-ops); color: var(--muted); }

/* ---------- sheets ---------- */
/* One behaviour for every sheet (app.js "Every sheet scrolls and closes the same way"): it scrolls inside itself to its
   end, never bounces or hands its scrolling on to the page behind, and keeps its last line above the phone's home bar.
   The dimmed page behind takes no panning at all. */
.backdrop { position: absolute; inset: 0; z-index: 10; background: var(--backdrop); touch-action: none; }
.backdrop.enter { animation: fade 0.2s; }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 11; max-height: 86%; overflow-y: auto; overscroll-behavior: none; -webkit-overflow-scrolling: touch;
  padding: 6px 20px calc(32px + env(safe-area-inset-bottom)); background: var(--card); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.sheet.enter { animation: sheet-up 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes fade { from { opacity: 0; } }

/* ---------- moving between screens (app.js render) ----------
   The phone's content is swapped through a view transition: forward slides the new screen in a little from the
   right over the old one fading out, back does the same from the left, and another shop or kind of deal cross-fades.
   The rest of the page (the notes beside the phone) stays still. */
#app { view-transition-name: screen; }
::view-transition-group(screen) { overflow: hidden; border-radius: 44px; animation-duration: 0.22s; }
::view-transition-old(screen), ::view-transition-new(screen) { animation-duration: 0.22s; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
[data-move="forward"]::view-transition-old(screen) { animation-name: out-left; }
[data-move="forward"]::view-transition-new(screen) { animation-name: in-right; }
[data-move="back"]::view-transition-old(screen) { animation-name: out-right; }
[data-move="back"]::view-transition-new(screen) { animation-name: in-left; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
@keyframes out-left { to { opacity: 0; transform: translateX(-24px); } }
@keyframes out-right { to { opacity: 0; transform: translateX(24px); } }
@keyframes in-right { from { opacity: 0; transform: translateX(48px); } }
@keyframes in-left { from { opacity: 0; transform: translateX(-48px); } }

/* ---------- pictures that load (ui/pictures.js) ----------
   Until a brochure picture has arrived, its box shimmers grey at its final size; then the picture fades in. */
.deal-pic:has(> .pic:not(.ready)), .deal-sheet-pic:has(> .pic:not(.ready)), .pic.thumb:not(.ready), .pic.crop-big:not(.ready) {
  background: linear-gradient(100deg, var(--soft) 30%, var(--page) 50%, var(--soft) 70%) 0 0 / 300% 100%;
  animation: shimmer 1.3s linear infinite;
}
.deal-sheet-pic:has(> .pic:not(.ready)) { min-height: 160px; }
.pic.crop-big:not(.ready) { aspect-ratio: 3 / 4; }
.deal-pic > .pic:not(.ready), .deal-sheet-pic > .pic:not(.ready) { opacity: 0; }
.pic.fresh { animation: fade 0.25s ease-out; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.grabber { display: block; position: sticky; top: -6px; z-index: 2; width: calc(100% + 40px); height: 28px; margin: -6px -20px 2px; background: var(--card); }
.grabber::before { content: ""; position: absolute; left: calc(50% - 18px); width: 36px; top: 12px; height: 5px; border-radius: 3px; background: var(--hair); }
/* The product's id for testers ("#322"): very small, muted, and selectable to copy. */
.pid { margin-left: auto; padding-left: 6px; font-size: 10px; font-variant-numeric: tabular-nums; color: var(--faint); user-select: text; -webkit-user-select: text; white-space: nowrap; }
.fine .pid { float: right; }
.sh-head { display: flex; align-items: flex-start; gap: 4px; }
.sh-head .sh-title { flex: 1; min-width: 0; }
.sh-head .icon-btn { flex: none; margin-top: -8px; color: var(--muted); }
.heart-btn[aria-pressed="true"] { color: var(--red); }
.heart-btn[aria-pressed="true"] svg { fill: currentColor; }
.sh-title { margin: 2px 0 4px; font-size: var(--text-title); font-weight: 600; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.sec-title { margin: 20px 0 6px; font-size: var(--text-small); font-weight: 600; color: var(--muted); }
.fine { margin: 12px 0; font-size: var(--text-fine); line-height: 1.45; color: var(--faint); }
.menu-item { display: flex; flex-direction: column; justify-content: center; width: 100%; min-height: 52px; padding: 8px 0; border-bottom: 1px solid var(--soft); color: var(--accent); }
.menu-item small { font-size: var(--text-small); color: var(--muted); }
.menu-item.danger { color: var(--red); }
.link.danger { color: var(--red); }
.menu-item:last-child { border-bottom: 0; }

.qty-row { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.stepper { display: flex; align-items: center; background: var(--page); border-radius: var(--radius-pill); }
.stepper button { width: var(--touch); height: 40px; display: grid; place-items: center; color: var(--accent); }
.stepper span { min-width: 64px; text-align: center; font-weight: 600; font-size: var(--text-ops); }
.stepper .qty-val { width: auto; min-width: 64px; padding: 0 6px; color: var(--ink); font-weight: 600; font-size: var(--text-ops); text-decoration: underline dotted var(--hair); text-underline-offset: 4px; }
.stepper .qty-input { width: 96px; height: 34px; text-align: center; font-weight: 600; font-size: 16px; border: 1px solid var(--accent); border-radius: 10px; background: var(--card, #fff); color: var(--ink); }
.srow { display: flex; align-items: center; gap: 10px; margin: 0 -10px; padding: 10px; border-radius: var(--radius-control); }
.srow.chosen { background: var(--green-wash); }
.srow.pickable { cursor: pointer; }
.srow.pickable:hover { background: var(--page); }
.srow .mid { flex: 1; min-width: 0; font-size: var(--text-caption); }
.srow .mid b { font-weight: 600; }
.srow small, .prow small { display: block; margin-top: 2px; font-size: var(--text-fine); color: var(--muted); }
.srow .amt { font-size: var(--text-ops); font-weight: 600; }
.srow.off .amt, .srow.off .mid { color: var(--faint); }
.srow.off .amt { font-weight: 400; }
.srow .amt small { text-align: right; font-weight: 400; } /* "from Fri" under an offer that starts later */
.thumb-btn { flex: none; }
.thumb { display: block; width: var(--touch); height: var(--touch); object-fit: cover; border-radius: 8px; border: 1px solid var(--soft); }
.crop-big { display: block; width: 100%; margin-top: 8px; border-radius: var(--radius-control); border: 1px solid var(--soft); }

.quote { margin: 4px 0 14px; font-size: var(--text-body); }
.quote small { display: block; font-size: var(--text-fine); color: var(--muted); }
.opt { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; margin-bottom: 8px; padding: 8px 14px; border: 1px solid var(--hair); border-radius: var(--radius-control); }
.opt:active, .opt:hover { border-color: var(--accent); }
.clar-search { display: block; width: 100%; height: var(--touch); margin: 10px 0 8px; padding: 0 14px; border: 1px solid var(--hair); border-radius: var(--radius-control); outline: 0; background: var(--card); }
.clar-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.clar-results:empty { display: none; }

.prow { display: flex; align-items: center; gap: 10px; width: calc(100% + 24px); margin: 0 -12px 4px; padding: 12px; border-radius: var(--radius-control); }
.prow.cur { background: var(--green-wash); }
.prow .mid { flex: 1; min-width: 0; font-size: var(--text-ops); }
.prow .mid b { font-weight: 600; }
.prow .amt { font-weight: 600; }
.ok { color: var(--green); }
.pgroup { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--soft); }
.pg-head { display: flex; align-items: center; gap: 8px; font-size: var(--text-ops); }
.pg-head b { font-weight: 600; }
.pg-head span { margin-left: auto; font-size: var(--text-caption); color: var(--muted); }
.pg-item { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0 3px 26px; font-size: var(--text-caption); }
.pg-item.np { flex-direction: column; gap: 0; padding-left: 0; }
.pg-item small { font-size: var(--text-fine); color: var(--muted); }

.wrow { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; width: calc(100% + 24px); margin: 0 -12px; padding: 12px; border-radius: var(--radius-control); }
.wrow { margin-bottom: 4px; }
.wrow.cur { box-shadow: inset 0 0 0 1.5px var(--hair); }
.wrow.cheap { background: var(--green-tint); }
.wrow.dear { background: var(--red-tint); }
.wrow.cheap .delta { color: var(--green); }
.wrow.dear .delta { color: var(--red); }
.wrow .d { font-weight: 600; font-size: var(--text-ops); }
.wrow em { font-style: normal; font-size: var(--text-fine); font-weight: 600; color: var(--green); margin-left: 4px; }
.wrow .amt { font-weight: 600; text-align: right; }
.wrow .muted { font-size: var(--text-fine); }
.wrow .delta { font-size: var(--text-small); font-weight: 600; text-align: right; color: var(--muted); }

.set-row { display: flex; align-items: center; gap: 10px; min-height: 52px; border-bottom: 1px solid var(--soft); }
.set-row > span:not(.avatar) { flex: 1; }
.set-row .b-txt small { display: block; font-size: var(--text-fine); color: var(--muted); }
.set-row .link { font-size: var(--text-caption); }
.pill-btn { min-height: 32px; padding: 0 14px; border-radius: var(--radius-pill); background: var(--accent-tint); color: var(--accent); font-size: var(--text-caption); font-weight: 600; }
.add-buddy { display: flex; align-items: center; gap: 8px; min-height: 48px; color: var(--accent); }
.fine.tight { margin: 0 0 4px; }
.bform { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 4px; padding: 12px; border-radius: var(--radius-control); background: var(--page); }
.bform .set-row { border-bottom: 0; min-height: var(--touch); font-size: var(--text-ops); }
.bform-actions { display: flex; gap: 8px; justify-content: flex-end; }
.mi-row { display: flex; align-items: center; gap: 8px; }
.seg { display: flex; gap: 8px; }
.slider-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.slider-row input { flex: 1; accent-color: var(--accent); }
.slider-row b { min-width: 44px; text-align: right; font-weight: 600; }
.seg button { flex: 1; height: var(--touch); border: 1px solid var(--hair); border-radius: var(--radius-control); text-align: center; }
.seg button { display: flex; align-items: center; justify-content: center; gap: 6px; }
.radio-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; border-bottom: 1px solid var(--soft); font-size: 16px; }
.radio { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--faint); }
.radio-row[aria-checked="true"] .radio { border: 7px solid var(--accent); }
.price-field { display: flex; align-items: center; gap: 8px; padding: 10px 0 12px 34px; font-size: var(--text-ops); color: var(--muted); }
.price-field .field { width: 110px; height: 40px; }
.seg button[aria-pressed="true"] { border: 2px solid var(--accent); color: var(--accent); font-weight: 600; }
/* The report sheet's five shops don't fit one row on a phone: they wrap, three to a row. */
.sheet-report .seg { flex-wrap: wrap; }
.sheet-report .seg button { flex: 1 1 calc(33% - 6px); min-width: 0; }

/* ---------- message at the bottom ---------- */
.toast {
  position: absolute; left: 16px; right: 16px; bottom: 28px; z-index: 20; display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: var(--radius-control); background: var(--ink); color: var(--on-accent); font-size: var(--text-caption);
  animation: toast-in 0.25s ease-out var(--age, 0ms) both;
}
.toast.top { top: 60px; bottom: auto; }
.toast span { flex: 1; }
.toast button { min-height: 32px; color: #2997ff; font-weight: 600; }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px); } }

/* ---------- phone-sized screens: the prototype fills the screen ---------- */
@media (max-width: 1100px) { .about .cols { grid-template-columns: 1fr; } .about { flex-basis: 320px; } }
@media (max-width: 500px) {
  .stage { display: block; padding: 0; }
  .about { display: none; }
  .phone { width: 100vw; height: 100dvh; border: 0; border-radius: 0; }
  ::view-transition-group(screen) { border-radius: 0; }
  .screen { padding-top: env(safe-area-inset-top); }
}
@media (prefers-reduced-motion: reduce) {
  .tpl-roll { animation: none !important; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- onboarding and settings screens ---------- */
.page .pad { padding-bottom: 32px; }
.foot { flex: none; padding: 12px 20px 30px; border-top: 1px solid var(--soft); background: var(--card); }
.fine.center, .center { text-align: center; }
.blue { color: var(--accent); }
.link.small { font-size: var(--text-ops); margin-top: 16px; min-height: var(--touch); }
.or { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--faint); font-size: var(--text-small); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--soft); }
.center-block { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding-top: 40px; }
.center-block .h1 { margin: 12px 0 4px; }

.welcome { justify-content: space-between; }
.welcome-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 32px; }
.mark-big { width: 112px; height: auto; margin-bottom: 20px; }
.welcome .h1 { font-size: var(--text-display); margin: 0; }
.tagline { margin: 6px 0 28px; font-size: var(--text-lead); color: var(--muted); }
.questions { margin: 0; font-size: var(--text-body); line-height: 1.7; color: var(--ink); }
.welcome .foot { border-top: 0; }

.setup-sec { padding: 18px 0; border-bottom: 1px solid var(--soft); }
.ss-head { display: flex; align-items: center; gap: 12px; }
.ss-status { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--page); color: var(--muted); flex: none; }
.ss-status.done { background: var(--accent-tint); color: var(--accent); }
.setup-sec .muted { margin: 6px 0 10px; }
.ss-value { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; }
.ss-value small { display: block; font-size: var(--text-fine); color: var(--muted); margin-top: 4px; }
.household { border-bottom: 1px solid var(--soft); padding: 8px 0; }
.household b { display: block; font-weight: 400; font-size: var(--text-body); }
.household small { display: block; font-size: var(--text-small); color: var(--muted); }

.pin { width: 96px; height: 96px; margin: 20px auto; border-radius: 50%; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent); }
.place { font-size: var(--text-page); font-weight: 600; margin: 2px 0 16px; letter-spacing: -0.01em; }
.search-wrap { position: relative; }
.search-ic { position: absolute; left: 14px; top: 13px; color: var(--muted); }
.field.with-ic { padding-left: 40px; }
/* Settings: feedback written in the app */
textarea.field { height: auto; min-height: 88px; margin-top: 8px; padding: 10px 14px; font: inherit; line-height: 1.4; resize: vertical; }
.place-list { margin-top: 6px; border: 1px solid var(--soft); border-radius: var(--radius-control); overflow: hidden; }
.place-opt { display: flex; justify-content: space-between; width: 100%; min-height: var(--touch); align-items: center; padding: 0 14px; border-bottom: 1px solid var(--soft); }
.place-opt:last-child { border-bottom: 0; }
.place-opt small { font-size: var(--text-fine); color: var(--muted); }
.link-row { display: flex; align-items: center; gap: 6px; min-height: var(--touch); color: var(--accent); font-size: var(--text-ops); }
.set-row.soon { opacity: 0.45; }
.logo-blank { width: var(--logo-sm); height: var(--logo-sm); border-radius: 3px; background: var(--page); flex: none !important; }
.notice { margin-top: 20px; padding: 14px; border-radius: var(--radius-control); background: var(--page); font-size: var(--text-caption); display: flex; flex-direction: column; gap: 10px; }

.shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.shop-chip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 96px; border-radius: var(--radius-control); border: 1px solid var(--hair); font-size: var(--text-caption); text-align: center; }
.shop-chip img { width: var(--logo-xl); height: var(--logo-xl); object-fit: contain; }
.shop-chip[aria-pressed="true"] { border: 2px solid var(--accent); }
.title-row { display: flex; justify-content: space-between; align-items: baseline; }
.chip-wrap { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.love-row { display: flex; align-items: center; gap: 8px; margin: 4px -16px 8px; padding: 2px 16px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.love-row::-webkit-scrollbar { display: none; }
.love-row > * { flex: 0 0 auto; }
.love-search { width: 112px; min-height: 32px; padding: 0 12px; border: 1px solid var(--hair); border-radius: var(--radius-pill); background: var(--card); font: inherit; font-size: var(--text-caption); outline: none; }
.love-search:focus { border-color: var(--accent); }
.pill-btn.love { background: none; border: 1px solid var(--hair); color: inherit; font-weight: 500; }
.pill-btn.love[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-tint); color: var(--accent); font-weight: 600; }
.heart { margin-right: 4px; color: var(--accent); }
.tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--radius-pill); background: var(--green-wash); color: var(--green); font-size: var(--text-micro); font-weight: 600; vertical-align: 1px; }
.shop-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.shop-pill { display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px 0 8px; border: 1px solid var(--hair); border-radius: var(--radius-pill); font-size: var(--text-caption); font-weight: 500; }
.shop-pill[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-tint); color: var(--accent); font-weight: 600; }
.shop-pill:disabled { opacity: 0.6; }
.list-card { -webkit-touch-callout: none; user-select: none; }
.sec-title small { font-weight: 400; color: var(--muted); }
.pchip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: var(--radius-pill); background: var(--page); font-size: var(--text-ops); }
.pchip[aria-pressed="true"] { background: var(--accent-tint); color: var(--accent); font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--accent); }

.nav-row { width: 100%; text-align: left; }
.buddy-head { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 0 4px; text-align: center; }
.buddy-head .avatar { font-size: var(--text-stat); }
.buddy-head .h1 { margin: 8px 0 0; }
.count-line { margin: -2px 0 6px; font-size: var(--text-fine); color: var(--muted); }

.search-wrap.sticky { position: sticky; top: 0; z-index: 2; margin: 0 -16px; padding: 8px 16px; background: var(--card); }
.search-wrap.sticky .search-ic { left: 30px; top: 21px; }
.pchip .ic { opacity: 0.55; }
.pchip[aria-pressed="true"] { font-weight: 400; }
.pchip[aria-pressed="true"] .ic { opacity: 1; }

.stepper button:disabled { color: var(--hair); cursor: default; }

/* ---------- public site: only the app, full screen on phones, a centred column on wider screens ---------- */
.bare { background: var(--card); }
/* The served app: the phone frame is the whole screen and scrolls inside, so the page itself never moves or pans. */
html:has(body.bare), .bare { overflow: hidden; overscroll-behavior: none; width: 100%; }
.bare .stage { display: block; padding: 0; min-height: 0; }
.bare .phone { position: fixed; inset: 0; width: 100%; max-width: 480px; height: auto; margin: 0 auto; border: 0; border-radius: 0; }
html:has(body.bare)::view-transition-group(screen) { border-radius: 0; }
.bare .screen { padding-top: max(14px, env(safe-area-inset-top)); }
.bare .foot, .bare .fab { margin-bottom: env(safe-area-inset-bottom); }
@media (min-width: 520px) { .bare { background: var(--page); } .bare .phone { box-shadow: 0 0 0 1px var(--soft); } }
/* On a phone or tablet the app always fills the screen edge to edge, even when the browser reports a wide window
   (Brave on iOS did, and showed grey bands on both sides); the narrow column with a frame is for desktop windows. */
@media (pointer: coarse) {
  html:has(body.bare), .bare { background: var(--card); }
  .bare .phone { max-width: none; box-shadow: none; }
}

/* home: what the weekly list costs, and the hint under the empty list */
.tpl-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.tpl-total { text-align: right; }
.tpl-total small { display: block; font-size: var(--text-fine); color: var(--muted); }
.tpl-total b { font-size: var(--text-title); font-weight: 600; letter-spacing: -0.01em; }
.bt-txt { display: flex; flex-direction: column; }
.bt-txt small { font-size: var(--text-small); color: var(--muted); }
/* steppers keep their own width inside rows */
.set-row > span.stepper { flex: none; }
.household .stepper span { min-width: 32px; }

.my-brand { border-bottom: 1px solid var(--soft); }
.my-brand .set-row { border-bottom: 0; }
.set-row.sub-row { min-height: var(--touch); padding-left: 14px; font-size: var(--text-caption); }
.set-row.sub-row .pill-btn { min-height: 28px; font-size: var(--text-small); font-weight: 500; }

/* ---------- deals: the week's offers that match no basket product, per shop (web/deals.js, OPS.md 6.3) ---------- */
.deals-card { margin-top: 20px; padding: 16px 18px 18px; border-radius: var(--radius-lg); background: var(--page); }
.deals-card .muted { margin-top: 2px; }
.dc-shops { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 8px; margin-top: 14px; }
.dc-shop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 4px 10px; border-radius: var(--radius-control); background: var(--card); }
.dc-shop:active { background: var(--pressed); }
.dc-shop .logo { width: var(--logo-xl); height: var(--logo-xl); }
.dc-shop b { font-size: var(--text-ops); font-weight: 600; }
.dc-shop small { font-size: var(--text-fine); color: var(--muted); }

/* a shop's deals: the top row scrolls away, the search field sticks to the top and the back button and the mark
   move in beside it (.bar, set while scrolled; web/deals.js). The logo in the field opens the list of shops. */
.deals .scroll > .nav { position: relative; }
.deal-bar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; margin: 0 -16px 12px; padding: 6px 16px; background: var(--card); transition: padding 0.2s, box-shadow 0.2s; }
.deal-bar .bar-only { flex: none; width: 0; opacity: 0; overflow: hidden; pointer-events: none; transition: width 0.2s, opacity 0.2s, margin 0.2s; }
.bar .deal-bar { padding-left: 6px; box-shadow: 0 1px 0 var(--soft); }
.bar .deal-bar .bar-only { opacity: 1; pointer-events: auto; }
.bar .deal-bar .icon-btn.bar-only { width: 40px; }
.bar .deal-bar .mark.bar-only { width: 32px; height: 28px; margin-right: 8px; }
.deal-search { flex: 1; min-width: 0; }
.deal-pick { position: absolute; left: 4px; top: 4px; bottom: 4px; z-index: 1; display: flex; align-items: center; gap: 2px; padding: 0 4px 0 8px; border-radius: 8px; color: var(--muted); }
.deal-pick .logo { width: 24px; height: 24px; }
.deal-pick[aria-expanded="true"] { background: var(--page); }
.field.deal-q { padding-left: 58px; }
.deal-veil { position: fixed; inset: 0; z-index: 2; }
.deal-menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 3; width: min(300px, 100%); max-height: 60vh; overflow-y: auto; padding: 6px; border-radius: var(--radius-control); background: var(--card); box-shadow: 0 8px 28px var(--backdrop); animation: fade 0.15s; }
.deal-menu button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--touch); padding: 0 10px; border-radius: 8px; text-align: left; font-size: var(--text-caption); }
.deal-menu button:hover { background: var(--page); }
.deal-menu button[aria-checked="true"] { font-weight: 600; color: var(--accent); }
.deal-menu .logo, .deal-menu .dm-ic { width: 24px; height: 24px; flex: none; }
.deal-menu .dm-ic { display: flex; align-items: center; justify-content: center; color: var(--muted); }
.deal-menu small { margin-left: auto; color: var(--muted); font-weight: 400; }
.deals-head { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; }
.deals-head .h1 { margin: 0; }
.logo.big { width: 44px; height: 44px; }
.deal-shops { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 12px; padding: 0 16px; }
.deal-shops::-webkit-scrollbar { display: none; }
.deal-shops .shop-pill { flex: none; }
.deal-types { display: flex; gap: 2px; margin: 12px 0 14px; padding: 3px; border-radius: var(--radius-pill); background: var(--page); }
.deal-types button { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 32px; border-radius: var(--radius-pill); font-size: var(--text-caption); }
.deal-types button[aria-pressed="true"] { background: var(--card); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.deal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.deal { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-control); background: var(--page); }
.deal-pic { display: flex; align-items: center; justify-content: center; width: 100%; height: 132px; padding: 8px; background: var(--card); }
.deal-pic img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.deal-pic.none { color: var(--faint); font-size: var(--text-fine); }
.deal-body { flex: 1; display: flex; flex-direction: column; gap: 3px; padding: 10px; }
.deal-brand { font-size: var(--text-fine); color: var(--muted); } /* the brand over the product words (core/deals.js dealParts) */
.deal-name { font-size: var(--text-caption); font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.deal-printed { display: block; font-size: var(--text-fine); color: var(--muted); overflow-wrap: anywhere; } /* the printed name under the name shoppers use (core/deals.js printedLine) */
.deal-price b { font-size: var(--text-ops); font-weight: 600; }
.deal-price span { font-size: var(--text-fine); color: var(--muted); }
.deal-member { font-size: var(--text-fine); font-weight: 600; color: var(--green); }
.deal-days { margin-bottom: 8px; font-size: var(--text-fine); color: var(--muted); }
.deal-shop { display: flex; align-items: center; gap: 5px; margin-bottom: 2px; color: var(--ink-2); } /* on the "All" page: whose deal it is */
.deal-btn { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: auto; }
.deal-none { margin: 16px 0; }
.pg-deals { display: flex; align-items: center; gap: 6px; padding: 8px 0 2px; color: var(--accent); font-size: var(--text-caption); text-align: left; }
.deal-sum { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.deal-sum .thumb { width: 64px; height: 64px; flex: none; object-fit: contain; background: var(--card); }
.deal-sum .sh-title { margin: 0; }
.deal-to { color: var(--ink); }
.deal-to .mi-row { justify-content: space-between; width: 100%; font-weight: 600; }
.deal-to .ic { flex: none; color: var(--accent); }
.deal-sheet-pic { display: block; width: 100%; margin-top: 12px; padding: 8px; border: 1px solid var(--soft); border-radius: var(--radius-control); background: var(--card); }
.deal-sheet-pic img { display: block; max-width: 100%; max-height: 220px; margin: 0 auto; object-fit: contain; }
.deal-open { display: flex; flex: 1; flex-direction: column; width: 100%; text-align: left; }
.deal-open .deal-body { padding-bottom: 6px; }
.deal-foot { flex: none; padding-top: 0; }
/* a deal's page (web/deals.js dealSheet) */
.dd-brand { margin-top: 14px; font-size: var(--text-caption); }
.dd-price b { font-size: var(--text-title); font-weight: 700; }
.dd-price span { font-size: var(--text-caption); color: var(--muted); }
.dd-shop { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: var(--text-caption); }
.dd-shop span { color: var(--muted); }
.dd-like { width: calc(100% + 20px); text-align: left; }
.dd-like .thumb { width: 56px; height: 56px; flex: none; object-fit: contain; background: var(--card); }
.dd-like .thumb.none { display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--card); } /* no picture (a website offer): the shop's logo */
.dd-like .thumb.none .logo { width: var(--logo-xl); height: var(--logo-xl); }
.dd-at { display: flex !important; align-items: center; gap: 5px; }

/* ---------- branches (core/branches.js; where the market lists them, CESTONAUTA.md §11) ----------
   A shop's logo and name open its page wherever they are shown: buttons that look like the logo and the text they hold. */
.shop-link { display: flex; align-items: center; gap: 10px; min-width: 0; flex: none; text-align: left; }
.shop-name { font-weight: inherit; text-align: left; }
.shop-name:hover, .shop-link:hover .b-txt b { text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: 2px; }
.srow .shop-link, .pg-head .shop-link, .dd-shop .shop-link { flex: none; }
/* Settings, Lojas: the branches nearest first, each with how far it is; the name opens its page, the switch picks it. */
.shops-where { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; font-size: var(--text-caption); color: var(--muted); }
.shops-where .link-row { flex: none; }
.branch-list { margin-top: 8px; }
.branch-row .shop-link { flex: 1; padding: 6px 0; }
.branch-row .shop-link .logo { width: var(--logo-lg); height: var(--logo-lg); flex: none; }
.branch-row .b-txt { min-width: 0; }
.branch-row .b-txt b { font-weight: 500; }
.branch-row.unpriced .b-txt b { color: var(--ink-2); }
/* A report about a branch: one shop a row, names are long. */
.sheet-report .seg.branches button { flex: 1 1 100%; justify-content: flex-start; padding: 0 12px; }
/* A branch's name under its logo in a tile of the deals card: two lines at most. */
.dc-shop.branch small { text-align: center; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
button.deal-shop { font-size: inherit; text-align: left; }
/* a branch's page (web/app.js branchSheet) */
.branch-head { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.branch-head > div { min-width: 0; }
.branch-head .logo.big { flex: none; }
.branch-where { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; font-size: var(--text-ops); line-height: 1.4; }
.branch-where .ic { flex: none; margin-top: 2px; color: var(--muted); }
.branch-map { display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.branch-today { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--radius-control); background: var(--green-wash); color: var(--green); font-size: var(--text-ops); }
.branch-today b { font-weight: 600; }
.branch-week { margin-top: 6px; }
.bw-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 12px; font-size: var(--text-caption); color: var(--ink-2); }
.bw-row.on { font-weight: 600; color: var(--ink); }
.branch-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.branch-chips .tag { margin-left: 0; padding: 3px 9px; font-size: var(--text-small); vertical-align: 0; }
.branch-contact { color: var(--accent); text-decoration: none; font-size: var(--text-ops); }
.branch-contact .ic { flex: none; }
.branch-pay { padding: 6px 0; border-bottom: 1px solid var(--soft); font-size: var(--text-ops); }
.branch-pay b { font-weight: 500; }
.branch-pay small { display: block; margin-top: 2px; font-size: var(--text-fine); color: var(--muted); line-height: 1.4; }
.branch-deals { margin-top: 12px; border-top: 1px solid var(--soft); }
.branch-deals .mi-row { justify-content: space-between; width: 100%; font-weight: 600; }
.branch-deals .mi-row > span:first-child { display: flex; align-items: center; gap: 8px; }

/* ---------- touch screens: iOS zooms into a field under 16 px when it gets the focus ---------- */
@media (pointer: coarse) { .field, .clar-search, .love-search { font-size: max(16px, 1em); } }