:root {
  /* Palette: Tomato #F06449, Parchment #EDE6E3, Alabaster #DADAD9, Charcoal #36382E, Sky Aqua #5BC3EB */
  --accent: #F06449;          /* Tomato: actions, "needs an AFTER" */
  --accent-ink: #B8341C;      /* deeper Tomato for small text and badges, so they stay readable */
  --ink: #36382E;             /* Charcoal: text, dark surfaces */
  --muted: #66655C;           /* secondary text (Charcoal, lightened) */
  --sheet: #EDE6E3;           /* Parchment: page and sheet background */
  --line: #DADAD9;            /* Alabaster: dividers, placeholders */
  --line-strong: #C3C1BA;
  --nav-off: #9D9C93;
  --select: #2EAF6D;          /* green check for items picked in select mode */
  --good: #5BC3EB;            /* Sky Aqua: paired / aligned */
  --dark: #36382E;
  --nav-h: 64px;
  color-scheme: light;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--dark); }
body { font: 15px/1.4 ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); }
h1, h2, h3, p { margin: 0; }
button, select, input { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .4; cursor: default; }

#app { position: relative; max-width: 520px; margin: 0 auto; min-height: 100dvh; background: var(--sheet); }
.view { min-height: 100dvh; padding-bottom: calc(var(--nav-h) + 28px + env(safe-area-inset-bottom)); }
.view.light { background: var(--sheet); }

/* ---------- hero (Session) ---------- */
.hero {
  position: relative; height: 44dvh; min-height: 280px; color: #fff;
  background: linear-gradient(165deg, #4a4c3f 0%, #b25a47 62%, #2a2b23 100%);
  overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  isolation: isolate;                 /* keep the hero's layers (photo, gradient, stats, dots) inside it so they can't paint over the sheet */
}
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(#0006, transparent 35%, #000a 100%); }
.herotag { position: absolute; left: 20px; top: max(16px, env(safe-area-inset-top)); z-index: 2; padding: 4px 12px; border-radius: 999px; background: #0008; backdrop-filter: blur(6px); color: #fff; font-size: 12px; font-weight: 600; }
.expand { position: absolute; right: 20px; top: calc(max(16px, env(safe-area-inset-top)) - 4px); z-index: 2; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: #0008; backdrop-filter: blur(6px); color: #fff; display: grid; place-items: center; }
.expand svg, .v-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hero { cursor: zoom-in; }
.stats { position: absolute; z-index: 2; pointer-events: none; left: 0; right: 0; bottom: 44px; display: flex; justify-content: space-around; text-align: center; }
.stats b { display: block; font-size: 17px; font-weight: 700; }
.stats span { font-size: 13px; font-weight: 300; opacity: .85; }

/* Session fills the screen: the hero takes all the space the gallery doesn't need */
#view-session { display: flex; flex-direction: column; height: 100dvh; min-height: 0; padding-bottom: calc(var(--nav-h) + 10px + env(safe-area-inset-bottom)); }   /* the + only rises ~9px above the nav, so 10px is enough clearance */
#view-session .hero { flex: 1 1 auto; height: auto; min-height: 220px; }
#view-session .sheet { flex: 0 0 auto; z-index: 1; }   /* above the hero, which it overlaps by 28px */

/* ---------- bottom sheet ---------- */
.sheet { position: relative; margin-top: -28px; padding: 8px 20px 4px; background: var(--sheet); border-radius: 28px 28px 0 0; }
.sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
h3 { font-size: 13px; font-weight: 600; margin: 8px 0 10px; letter-spacing: .02em; }
.hint { color: var(--muted); font-size: 13px; }
.empty { color: var(--muted); font-size: 13px; padding: 6px 0 14px; }

.pill {
  display: inline-block; border: 1.5px solid var(--accent); color: var(--accent-ink); background: transparent;
  padding: 9px 20px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.pill.solid { background: var(--accent); color: #fff; border-color: var(--accent); }
.pill.ghost { border-color: var(--line-strong); color: var(--muted); }
.pill.danger { border-color: #d33; color: #d33; }
.pill:active { transform: scale(.97); }

/* photo strip */
.strip { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 20px; padding-bottom: 6px; margin: 0 -20px; padding-inline: 20px; }
.strip::-webkit-scrollbar { display: none; }
.ph { position: relative; flex: 0 0 auto; width: 96px; height: 96px; border-radius: 16px; overflow: hidden; scroll-snap-align: start; background: var(--line); }
.ph img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.badge { position: absolute; left: 6px; bottom: 6px; padding: 1px 7px; border-radius: 999px; background: #000a; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .06em; pointer-events: none; white-space: nowrap; }
.badge.a { background: var(--accent-ink); }
.badge.ok { background: var(--good); color: var(--ink); }
.badge.dim { background: #000a; }

/* gallery groups: unpaired BEFORE first, then paired stacks, then unpaired AFTER */
.strip { padding-block: 8px 12px; }
.grp { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; }
.grp + .grp { margin-left: 6px; padding-left: 16px; border-left: 1px solid var(--line); }
.grp-label { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.grp-label.need { color: var(--accent-ink); }
.grp-items { display: flex; gap: 12px; align-items: flex-start; }
.ph.need { outline: 2.5px solid var(--accent); }
.ph img.sel { outline: 3px solid #fff; outline-offset: -3px; }
.stack img.sel { outline: 3px solid var(--ink); outline-offset: 2px; }

/* a finished pair: AFTER card offset on top of its BEFORE card (percentages, so it scales with the container) */
.stack { position: relative; flex: 0 0 auto; width: 118px; aspect-ratio: 118 / 100; }
.stack img { position: absolute; width: 76%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; border: 3px solid #fff; box-shadow: 0 4px 12px #0003; cursor: pointer; background: var(--line); }
.stack img.back { left: 2%; top: 2%; transform: rotate(-6deg); }
.stack img.front { left: 22%; top: 8%; transform: rotate(4deg); }
.stack .badge { left: 28%; bottom: 6%; }

/* Photos screen: the same groups as the strip, stacked vertically with a 3-column grid */
.lib { padding: 0 20px; }
.lib .grp + .grp { margin: 22px 0 0; padding: 0; border: 0; }
.grp-items.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 12px; }
.grid .ph { width: auto; height: auto; aspect-ratio: 1; }
.grid .stack { width: 100%; }

/* score readout on the viewer camera */
.scorepill { padding: 6px 14px; border-radius: 999px; background: #000a; color: #fff; font-size: 13px; font-weight: 600; }
.scorepill:empty { display: none; }

/* sliders / selects */
.ctl { display: grid; gap: 12px; }
.ctl label { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 13px; font-weight: 500; }
.ctl input[type=range] { flex: 1; max-width: 62%; accent-color: var(--accent); }
.ctl select { max-width: 62%; flex: 1; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line-strong); background: #fff; }
.ctl .check { justify-content: flex-start; }
.ctl input[type=checkbox] { accent-color: var(--accent); width: 18px; height: 18px; }

/* ---------- pairs / settings pages ---------- */
.pagehead { padding: max(28px, calc(env(safe-area-inset-top) + 16px)) 20px 14px; }
.pagehead h1 { font-size: 28px; font-weight: 700; }
.pairs { padding: 0 16px; }
.card { background: #fff; border-radius: 20px; padding: 18px; margin: 0 16px 14px; box-shadow: 0 2px 10px #0000000d; }
.card .hint { margin-top: 10px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: #fff; border-radius: 20px; padding: 10px; margin: 0 0 14px; box-shadow: 0 2px 10px #0000000d; }
.pair img, .thumbs img { width: 100%; border-radius: 14px; display: block; }
.pair .hint { margin-top: 4px; padding-left: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pairScore { grid-column: 1 / -1; padding: 2px 4px 4px; font-weight: 600; font-size: 13px; color: var(--ink); }
.pairScore::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--good); margin-right: 8px; }
.pairScore.cap::before { background: var(--accent); }
.status { padding: 0 20px 10px; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; margin: 6px 0 14px; }
.pairs > .hint { margin: 14px 4px 4px; }

/* ---------- bottom nav ---------- */
#nav {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: min(100%, 520px); z-index: 5;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  display: flex; align-items: center; justify-content: space-around;
  background: #fff; border-radius: 26px 26px 0 0; box-shadow: 0 -6px 24px #0000001a;
}
#nav button { background: none; border: 0; padding: 10px 14px; color: var(--nav-off); }
#nav button.on { color: var(--accent); }
#nav svg { width: 24px; height: 24px; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#nav .fab { width: 56px; height: 56px; padding: 0; border-radius: 50%; background: var(--accent); color: #fff; margin-top: -26px; box-shadow: 0 8px 20px #F0644966; }
#nav .fab svg { margin: auto; stroke-width: 2.4; }
#nav .fab:active { transform: scale(.94); }

/* ---------- + menu (speed dial) ---------- */
/* the backdrop sits under the nav (z 5) so the + stays visible and tappable; the menu sits above it */
#actions { position: fixed; inset: 0; z-index: 4; }
.backdrop { position: absolute; inset: 0; background: #0b0b0e8c; backdrop-filter: blur(5px); animation: fade .2s ease-out; }
#dial {
  position: fixed; z-index: 6; left: 50%; transform: translateX(-50%); width: min(100% - 32px, 360px);
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 42px);
  display: flex; flex-direction: column; gap: 12px; align-items: stretch;
}
.dial-item {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 12px 18px 12px 12px;
  background: #fff; border: 0; border-radius: 22px; box-shadow: 0 10px 30px #0004; color: var(--ink);
  animation: rise .28s cubic-bezier(.2, .9, .3, 1.2) both;
}
.dial-item:nth-child(1) { animation-delay: .06s; }   /* the item nearest the + animates first */
.dial-item:nth-child(2) { animation-delay: .02s; }
.dial-item:active { transform: scale(.98); }
.dial-item .ic { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: var(--ink); color: #fff; }
.dial-item .ic.alt { background: var(--accent); }
.dial-item .ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dial-item .tx { display: grid; gap: 1px; }
.dial-item b { font-size: 16px; font-weight: 650; }
.dial-item small { color: var(--muted); font-size: 12px; }
.dial-up { display: flex; align-items: center; justify-content: center; gap: 8px; padding-top: 2px; animation: rise .28s ease-out both; animation-delay: .1s; }
.dial-up-label { color: #fffb; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-right: 4px; }
.chip { padding: 8px 18px; border-radius: 999px; background: #ffffff26; border: 1px solid #fff5; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; backdrop-filter: blur(6px); }
.chip:active { background: #ffffff40; }
#nav .fab { transition: transform .25s cubic-bezier(.2, .9, .3, 1.2), background .2s; }
#nav .fab.open { background: var(--ink); box-shadow: 0 8px 20px #0006; }
#nav .fab .i-x, #nav .fab.open .i-cam { display: none; }
#nav .fab.open .i-x { display: block; }
#nav .fab svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(22px) scale(.96); } }

/* ---------- burst camera ---------- */
#cam { position: fixed; inset: 0; z-index: 10; background: #000; }
#camVideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; transition: opacity .25s; }
#flash.on { opacity: .7; transition: none; }
#camTop { position: absolute; top: 0; left: 0; right: 0; padding: max(14px, env(safe-area-inset-top)) 20px 18px; display: flex; justify-content: space-between; color: #fff; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; background: linear-gradient(#000a, transparent); }
#camBar { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px 22px max(24px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background: linear-gradient(transparent, #000b); }
#camDone { justify-self: start; background: #fff3; color: #fff; border: 1px solid #fff8; padding: 10px 22px; border-radius: 999px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: 12px; backdrop-filter: blur(6px); }
#shutter { width: 76px; height: 76px; border-radius: 50%; background: #fff; border: 5px solid #fff; box-shadow: inset 0 0 0 4px #0008; padding: 0; }
#shutter:active { transform: scale(.92); }
#camThumb { justify-self: end; width: 52px; height: 52px; object-fit: cover; border-radius: 12px; border: 2px solid #fff; }
#camThumb:not([src]) { visibility: hidden; }

/* ---------- full-screen viewer ---------- */
#viewer { position: fixed; inset: 0; z-index: 9; background: #000; color: #fff; }
#vPager { position: absolute; inset: 0; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.v-top { position: absolute; top: 0; left: 0; right: 0; z-index: 2; padding: max(14px, env(safe-area-inset-top)) 16px 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; background: linear-gradient(#000a, transparent); }
.v-btn { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: #fff2; backdrop-filter: blur(6px); color: #fff; display: grid; place-items: center; }
.v-tag { top: calc(max(14px, env(safe-area-inset-top)) + 54px); left: 16px; z-index: 2; }
.v-bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 24px 20px max(28px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 14px; background: linear-gradient(transparent, #000a); }
.v-bottom:not(:has(> button:not([hidden]), > .v-subacts:not([hidden]))) { display: none; }
.pill.big { padding: 15px 34px; font-size: 13px; box-shadow: 0 8px 20px #F0644955; }

/* AFTER camera with the BEFORE overlay */
#vCam { position: absolute; inset: 0; z-index: 3; background: #000; }
#vCam > video, #vCam > img, #vCam > canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
#vCam.match::after { content: ""; position: absolute; inset: 0; z-index: 2; border: 6px solid #00ff55; box-shadow: inset 0 0 24px #00ff55; pointer-events: none; }
#vCam .scorepill { position: static; }
.v-cambar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 28px 20px max(24px, env(safe-area-inset-bottom)); display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; background: linear-gradient(transparent, #000c); }
.v-opts { flex: 1; display: grid; gap: 10px; font-size: 13px; font-weight: 500; }
.v-opts label { display: flex; align-items: center; gap: 12px; }
.v-opts input[type=range] { flex: 1; accent-color: var(--accent); }
.v-opts input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); }
.chips { display: flex; gap: 6px; }
.chips button { border: 1px solid #fff6; background: #0005; color: #fff; padding: 5px 14px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.chips button.on { background: #fff; color: var(--ink); border-color: #fff; }
#vShutter { flex: 0 0 auto; width: 76px; height: 76px; border-radius: 50%; background: #fff; border: 5px solid #fff; box-shadow: inset 0 0 0 4px #0008; padding: 0; }
#vShutter:active { transform: scale(.92); }

/* ---------- collapsible gallery on the Session screen ---------- */
.grab { position: relative; height: 22px; display: flex; justify-content: center; align-items: center; cursor: grab; touch-action: none; }
.grab-bar { width: 40px; height: 5px; border-radius: 3px; background: var(--line-strong); transition: opacity .2s; }
.sheet:not(.can-expand) .grab-bar { opacity: .35; }
#matchState { position: absolute; right: 0; font-size: 11px; font-weight: 600; color: var(--accent-ink); }
#sheet .strip { touch-action: pan-x; padding-block: 6px 4px; }
#sheet .empty { padding: 4px 0 8px; }
.caught { color: var(--muted); font-weight: 600; }
.sheet:not(.open) .grp-label { display: none; }   /* labels only when expanded; the tiles say 'Needs after' */
.more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
#more { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 8px; }
.sheet.open .more { grid-template-rows: 1fr; }
.sheet.open { max-height: 60dvh; overflow-y: auto; touch-action: pan-x pan-y; }
.sheet.open .strip { padding-bottom: 2px; }
#more .grp + .grp { margin: 0; padding: 0; border: 0; }
#more .grp { padding-top: 0; }
#more .grp-items { overflow-x: auto; margin: 0 -20px; padding: 2px 20px 6px; touch-action: pan-x; scrollbar-width: none; }
#more .grp-items::-webkit-scrollbar { display: none; }

/* one-tap AFTER shot from the Session hero (no need to open the full-screen viewer) */
.hero-take { position: absolute; left: 50%; transform: translateX(-50%); bottom: 96px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 0; border-radius: 999px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 8px 20px #0006; }
.hero-take svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hero-take:active { transform: translateX(-50%) scale(.96); }

/* ---------- sensors: status line, guidance, photo info ---------- */
#camSense { position: absolute; top: calc(max(14px, env(safe-area-inset-top)) + 30px); left: 20px; z-index: 2; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: #fffd; text-shadow: 0 1px 3px #000a; }
.v-meta { position: absolute; left: 16px; top: calc(max(14px, env(safe-area-inset-top)) + 88px); z-index: 2; font-size: 11px; font-weight: 600; color: #fffc; text-shadow: 0 1px 3px #000a; max-width: calc(100% - 32px); }
.v-guide { position: absolute; left: 50%; transform: translateX(-50%); top: calc(max(14px, env(safe-area-inset-top)) + 64px); z-index: 3; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 28px); padding: 12px 22px 12px 14px; border-radius: 999px; background: #000b; backdrop-filter: blur(8px); color: #fff; font-size: 19px; font-weight: 700; line-height: 1.15; box-shadow: 0 8px 24px #0006; }
.v-guide .gi { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); font-size: 22px; line-height: 1; }
.v-guide.ok .gi { background: var(--good); color: var(--ink); }
.v-guide.info .gi { background: #ffffff33; }
.v-readout { position: absolute; left: 0; right: 0; bottom: calc(150px + env(safe-area-inset-bottom)); z-index: 3; text-align: center; padding: 0 20px; font-size: 11px; font-weight: 600; letter-spacing: .03em; color: #fffd; text-shadow: 0 1px 3px #000c; pointer-events: none; }
.pairMeta { grid-column: 1 / -1; padding: 0 4px 6px; margin-top: -2px; font-size: 12px; color: var(--muted); }

/* ---------- swipeable BEFORE/AFTER pager ---------- */
.pg-track { position: absolute; inset: 0; z-index: 0; display: flex; will-change: transform; transition: transform .32s cubic-bezier(.2, .8, .2, 1); }
.pg-slide { flex: 0 0 100%; width: 100%; height: 100%; }
.hero .pg-slide { background: #111 center / cover no-repeat; }
#vPager .pg-slide { object-fit: contain; background: #000; }
.pg-dots { position: absolute; left: 0; right: 0; z-index: 2; display: flex; justify-content: center; gap: 10px; pointer-events: none; }
.hero .pg-dots { bottom: 96px; }
#viewer .pg-dots { bottom: calc(26px + env(safe-area-inset-bottom)); z-index: 4; }
.pg-dot { position: relative; pointer-events: auto; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: #ffffff66; box-shadow: 0 1px 4px #0006; transition: background .2s, transform .2s; }
.pg-dot::after { content: ""; position: absolute; inset: -12px; }                 /* bigger tap target than the dot */
.pg-dot.on { background: #fff; transform: scale(1.35); }

/* ---------- range sliders: explicit track and thumb (the browser's default track turned dark with the Tomato accent) ---------- */
input[type=range] { -webkit-appearance: none; appearance: none; background: transparent; height: 24px; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--line-strong); }
input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--line-strong); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: var(--accent); border: 3px solid #fff; box-shadow: 0 1px 4px #0004; }
input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 3px solid #fff; box-shadow: 0 1px 4px #0004; }
.v-opts input[type=range]::-webkit-slider-runnable-track { background: #ffffff59; }
.v-opts input[type=range]::-moz-range-track { background: #ffffff59; }

/* ---------- select, delete, share ---------- */
.pagehead.withact { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.pagehead.withact .pill { flex: 0 0 auto; margin-bottom: 4px; }
.selectable { cursor: pointer; }
.chk { position: absolute; top: 6px; left: 6px; z-index: 3; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: #ffffffe6; border: 2px solid #ffffff; box-shadow: 0 1px 6px #0006, inset 0 0 0 1.5px #36382E55; color: #fff; pointer-events: none; transition: background .12s, box-shadow .12s; }
.chk svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.selected .chk { background: var(--select); border-color: #fff; box-shadow: 0 2px 8px #0007; }
.selected .chk svg { opacity: 1; }
.ph.selected { outline: 3px solid var(--select); outline-offset: 2px; }
.stack.selected img { box-shadow: 0 0 0 3px var(--select), 0 4px 12px #0003; }
.grp-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lbl-act { margin-left: auto; border: 0; background: none; padding: 2px 0; color: var(--accent-ink); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* select mode: floating Delete / Share above the main nav, which stays visible */
#selbar { position: fixed; left: 50%; transform: translateX(-50%); width: min(100%, 520px); z-index: 8; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 18px); padding: 0 16px; display: flex; justify-content: space-between; align-items: center; gap: 10px; pointer-events: none; animation: popup .22s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes popup { from { opacity: 0; transform: translate(-50%, 14px) scale(.96); } }
.fab-act { pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; padding: 14px 20px; border: 0; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 10px 26px #0000004d; }
.fab-act svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fab-act.danger { width: 52px; height: 52px; padding: 0; justify-content: center; background: #fff; color: #C62828; }   /* icon only, on the left: Share is the main action */
.fab-act.danger svg { width: 22px; height: 22px; }
.fab-act.primary { background: var(--accent); color: #fff; box-shadow: 0 10px 26px #F0644973; }
.fab-act:disabled { opacity: .4; }
.fab-act:not(:disabled):active { transform: scale(.96); }
body.selecting #view-photos { padding-bottom: calc(var(--nav-h) + 112px + env(safe-area-inset-bottom)); }   /* so the last photos can scroll clear of the buttons */
body.dial-open #selbar { display: none; }
.share-start { display: block; margin: 10px auto 14px; padding: 13px 26px; }

.soon { background: var(--line); color: var(--ink); border-radius: 999px; padding: 2px 10px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

/* ---------- report preview ---------- */
#rpt { position: fixed; inset: 0; z-index: 13; background: var(--ink); display: flex; flex-direction: column; color: #fff; }
.rpt-bar { display: flex; align-items: center; gap: 12px; padding: max(12px, env(safe-area-inset-top)) 16px 12px; }
.rpt-bar .title { flex: 1; text-align: center; font-weight: 600; font-size: 15px; }
.rpt-bar .pill { border-color: #ffffff88; color: #fff; padding: 8px 16px; }
.rpt-body { position: relative; flex: 1; min-height: 0; display: flex; justify-content: center; background: #26271f; }
#rptFrame { width: min(100%, 520px); height: 100%; border: 0; background: #fff; }
#rptBusy { position: absolute; inset: 0; display: grid; place-items: center; background: #26271fe6; font-weight: 600; letter-spacing: .02em; }
.rpt-foot { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 12px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); }
/* report details: a full-screen editor */
#rptSheet, #jobSheet { position: absolute; inset: 0; z-index: 2; background: var(--sheet); color: var(--ink); display: flex; flex-direction: column; }
.rd-bar { flex: 0 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: max(10px, env(safe-area-inset-top)) 12px 10px; background: #fff; border-bottom: 1px solid var(--line); }
.rd-bar .title { font-weight: 700; font-size: 16px; text-align: center; }
.rd-link { justify-self: start; background: none; border: 0; padding: 10px 8px; font-size: 16px; font-weight: 500; color: var(--muted); }
.rd-link.strong { justify-self: end; font-weight: 700; color: var(--accent-ink); }
.rd-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 16px 16px calc(28px + env(safe-area-inset-bottom)); }
.rd-scroll.kbd { padding-bottom: 46dvh; }                   /* room to scroll the last fields above the on-screen keyboard */
.rd-col { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.rd-intro { margin: 0; font-size: 14px; color: var(--muted); }
.rd-card { background: #fff; border-radius: 20px; padding: 18px 16px 18px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 2px 10px #0000000d; }
.rd-card h3 { margin: 0; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.rd-card h3 em { font-style: normal; font-weight: 500; letter-spacing: .02em; text-transform: none; margin-left: 6px; }
.rd-sub { margin: -8px 0 0; font-size: 13px; color: var(--muted); }
.rd-field { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink); }
.rd-field input, .rd-field textarea { font: inherit; font-size: 17px; font-weight: 400; color: var(--ink); background: var(--sheet); border: 2px solid transparent; border-radius: 14px; padding: 14px; width: 100%; min-height: 54px; -webkit-appearance: none; appearance: none; }
.rd-field input::placeholder, .rd-field textarea::placeholder { color: #9a998f; }
.rd-field input:focus, .rd-field textarea:focus { outline: none; border-color: var(--accent); background: #fff; box-shadow: 0 0 0 4px #F0644933; }
.rd-field textarea { min-height: 128px; line-height: 1.45; resize: vertical; }
.rd-field small { font-size: 12px; font-weight: 400; color: var(--muted); }
.rd-pair { display: flex; flex-direction: column; gap: 12px; }
.rd-pair + .rd-pair { padding-top: 16px; border-top: 1px solid var(--line); }
.rd-thumbs { display: flex; gap: 8px; }
.rd-thumbs img { width: 88px; height: 88px; object-fit: cover; border-radius: 12px; }
.rd-col > .pill.big { align-self: stretch; text-align: center; margin: 4px 0 8px; padding: 16px; }

/* cover photo picker in the report details */
.rd-covers { display: flex; gap: 10px; overflow-x: auto; margin: 0 -4px; padding: 4px 4px 8px; scrollbar-width: none; }
.rd-covers::-webkit-scrollbar { display: none; }
.cv { position: relative; flex: 0 0 auto; width: 92px; height: 92px; padding: 0; border: 2.5px solid transparent; border-radius: 16px; overflow: hidden; background: var(--sheet); color: var(--ink); font: inherit; font-size: 12px; font-weight: 600; display: grid; place-items: center; align-content: center; gap: 2px; text-align: center; }
.cv img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cv-empty { border: 2px dashed var(--line-strong); }
.cv-empty .plus { font-size: 26px; line-height: 1; font-weight: 400; }
.cv.on { border: 2.5px solid var(--accent); box-shadow: 0 0 0 3px #F0644933; }
.cv .bdg { position: absolute; left: 6px; bottom: 6px; padding: 1px 7px; border-radius: 999px; background: #000a; color: #fff; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.cv .tick { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 13px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 1px 4px #0005; }

/* share menu + PDF panel (inside the report preview) */
#rptMenu, #rptPdf { position: absolute; inset: 0; z-index: 3; }
#rptPdf { z-index: 4; }
.msheet { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: min(100%, 520px); background: var(--sheet); color: var(--ink); border-radius: 26px 26px 0 0; padding: 22px 18px calc(18px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; animation: rise .28s cubic-bezier(.2, .9, .3, 1.1) both; }
.msheet h2 { font-size: 20px; font-weight: 700; margin-bottom: 2px; }
.mrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; padding: 16px 18px; background: #fff; border: 0; border-radius: 18px; color: var(--ink); font: inherit; box-shadow: 0 2px 10px #0000000d; }
.mrow:disabled { opacity: .55; }
.mrow:not(:disabled):active { transform: scale(.985); }
.mt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mt b { font-size: 16px; font-weight: 650; overflow-wrap: anywhere; }
.mt small { font-size: 12.5px; color: var(--muted); }
.chev { font-size: 28px; line-height: 1; color: var(--accent-ink); }
.msheet .pill.ghost { align-self: center; margin-top: 4px; }
.pdfcard { gap: 14px; }
.pdfcard .pill.big { text-align: center; }
.pill.outline { background: transparent; border-color: var(--ink); color: var(--ink); box-shadow: none; }
#pdf-busy { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 26px 0 18px; font-weight: 600; }
#pdf-busy p { margin: 0; }
.spin { width: 38px; height: 38px; border-radius: 50%; border: 4px solid var(--line); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#pdf-ready, #pdf-error { display: flex; flex-direction: column; gap: 12px; }
#pdf-error p { margin: 0; color: var(--muted); }
.pdffile { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 18px; padding: 14px 16px; box-shadow: 0 2px 10px #0000000d; }
.pdficon { flex: 0 0 auto; width: 46px; height: 54px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .06em; display: grid; place-items: center; }
#pdf-ready .hint { margin: 0; text-align: center; min-height: 0; }
#pdf-ready .hint:empty { display: none; }
#pdf-ready .pill.ghost { align-self: center; }
.mrow .soon { flex: 0 0 auto; white-space: nowrap; }

/* shot quality: live chip, soft-shot prompt, tags */
.qchip { position: absolute; left: 50%; transform: translateX(-50%); z-index: 4; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: #000b; backdrop-filter: blur(6px); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; pointer-events: none; }
.qchip::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #E0A800; }
.qchip.ok::before { background: var(--select); }
#camQ { bottom: calc(146px + env(safe-area-inset-bottom)); }
#vQ { bottom: calc(178px + env(safe-area-inset-bottom)); }
.camtoast { position: absolute; left: 16px; right: 16px; bottom: calc(200px + env(safe-area-inset-bottom)); z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 12px 16px; border-radius: 16px; background: #000d; color: #fff; font-size: 13px; font-weight: 600; }
.camtoast button { flex: 0 0 auto; border: 0; border-radius: 999px; padding: 8px 16px; background: #fff; color: var(--ink); font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
#softShot { position: absolute; inset: 0; z-index: 6; }
.softrow { display: flex; gap: 14px; align-items: center; }
.softrow img { flex: 0 0 auto; width: 76px; height: 100px; object-fit: cover; border-radius: 12px; }
.softrow p { margin: 0; font-size: 14px; color: var(--muted); }
#softWarn { position: fixed; inset: 0; z-index: 15; }
.msheet .pill.big.outline { text-align: center; }
.badge.warn { left: auto; right: 6px; top: 6px; bottom: auto; background: #E0A800; color: var(--ink); }
.stack .badge.warn { left: auto; right: 4%; top: 4%; bottom: auto; }

/* Retake / Delete for an unpaired BEFORE */
.v-subacts { display: flex; gap: 10px; }
.mini { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border: 1px solid #ffffff59; border-radius: 999px; background: #0008; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 4px 14px #0004; }
.mini svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mini:active { transform: scale(.96); }
#heroDelete, #vDelete { color: #ffb4a8; }

/* hero, unpaired BEFORE: trash icon top-left, Retake stacked above Take AFTER (same size), swipe through the others */
.hero-take { min-width: 232px; height: 40px; justify-content: center; }       /* Retake and Take AFTER are exactly the same size */
.hero-retake { bottom: 146px; background: #000a; border: 1px solid #ffffff73; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 6px 18px #0005; }
.hero-del { position: absolute; left: 16px; top: calc(max(16px, env(safe-area-inset-top)) - 4px); z-index: 3; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: #0008; backdrop-filter: blur(6px); color: #ffb4a8; display: grid; place-items: center; }
.hero-del svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hero-del:active { transform: scale(.94); }
.hero.has-del .herotag { left: 58px; }
.hero.has-take .pg-dots { bottom: 202px; }
.pg-count { padding: 4px 12px; border-radius: 999px; background: #000a; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.hero-note { position: absolute; left: 50%; transform: translateX(-50%); top: calc(max(16px, env(safe-area-inset-top)) + 40px); z-index: 4; padding: 8px 16px; border-radius: 999px; background: #000c; color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; pointer-events: none; }
#vNote { z-index: 5; top: calc(max(14px, env(safe-area-inset-top)) + 100px); }

/* jobs */
.joblist { padding-bottom: 8px; }
.jobcard { display: flex; flex-direction: column; gap: 14px; border: 2px solid transparent; }
.jobcard.active { border-color: var(--accent); }
.jobinfo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.jobinfo b { font-size: 18px; overflow-wrap: anywhere; }
.jobinfo b.dim { color: var(--muted); font-weight: 600; }
.jobinfo span { font-size: 13px; color: var(--muted); }
.jobinfo i { align-self: flex-start; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--accent); border-radius: 999px; padding: 3px 10px; }
.jobacts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.jobacts .pill { padding: 9px 16px; }
.jobacts .icon { padding: 9px 11px; margin-left: auto; line-height: 0; }
.jobacts .icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#jobSheet { position: fixed; z-index: 14; }

/* first-run welcome, over the empty hero */
.welcome { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: max(24px, env(safe-area-inset-top)) 24px 24px; background: var(--ink); color: #fff; overflow-y: auto; }
.welcome h2 { margin: 0; font-size: 24px; line-height: 1.2; }
.welcome ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; counter-reset: s; }
.welcome li { position: relative; padding-left: 40px; display: flex; flex-direction: column; counter-increment: s; }
.welcome li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.welcome li span { font-size: 13px; color: #ffffffb3; }
.welcome p { margin: 0; font-size: 12px; color: #ffffffa6; }
.welcome p em { font-style: normal; font-weight: 700; color: #fff; }
.welcome .pill.big { align-self: stretch; text-align: center; }
.welcome-skip { align-self: center; background: none; border: 0; color: #ffffffb3; font: inherit; font-size: 13px; padding: 6px 12px; text-decoration: underline; }

/* job name: an orange tag on the preview, under the Before/After tag */
.jobtag { position: absolute; left: 20px; top: calc(max(16px, env(safe-area-inset-top)) + 40px); z-index: 2; max-width: calc(100% - 40px); display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 10px; border: 0; border-radius: 999px; background: var(--accent); color: #fff; font: inherit; font-size: 12px; font-weight: 700; box-shadow: 0 2px 8px #0004; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jobtag::before { content: ""; flex: none; width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--jt) center / contain no-repeat; mask: var(--jt) center / contain no-repeat; --jt: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%273%27 y=%277%27 width=%2718%27 height=%2713%27 rx=%273%27/%3E%3Cpath d=%27M9 7V5h6v2%27/%3E%3C/svg%3E"); }
.jobtag:empty { display: none; }
.jobtag:active { transform: scale(.96); }
.hero-note { top: calc(max(16px, env(safe-area-inset-top)) + 78px) !important; }

/* =====================================================================
   Glass skin: soft light canvas, frosted floating surfaces, big rounded photos.
   Everything below overrides the earlier rules; behaviour is untouched.
   ===================================================================== */
:root {
  --sheet: #F3F0EF;
  --nav-h: 74px;
  --glass: rgba(255, 255, 255, .62);
  --glass-line: rgba(255, 255, 255, .78);
  --glass-shadow: 0 10px 36px rgba(60, 40, 36, .13), inset 0 1px 0 rgba(255, 255, 255, .85);
  --dark-glass: rgba(26, 26, 24, .34);
  --dark-glass-line: rgba(255, 255, 255, .22);
  --canvas: radial-gradient(120% 55% at 0% 0%, #ffe4dd 0%, transparent 60%), radial-gradient(110% 50% at 100% 100%, #d9ebf6 0%, transparent 60%), linear-gradient(#f8f6f5, #ece8e8);
}
#app, #rptSheet, #jobSheet { background: var(--canvas); background-color: var(--sheet); }
.view.light { background: none; }
body { letter-spacing: -.005em; }

/* frosted surfaces */
.card, .rd-card, .mrow, .pdffile, .pair, .dial-item {
  background: var(--glass); border: 1px solid var(--glass-line); border-radius: 26px; box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
}
.dial-item { background: rgba(255, 255, 255, .8); border-radius: 28px; }
.jobcard.active { border-color: var(--accent); box-shadow: 0 0 0 3px #F0644933, var(--glass-shadow); }
.rd-bar { background: rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); border-bottom: 1px solid var(--glass-line); }
.msheet { background: rgba(247, 244, 243, .86); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); border-radius: 32px 32px 0 0; border: 1px solid var(--glass-line); border-bottom: 0; }

/* page headers */
.pagehead h1 { font-size: 34px; letter-spacing: -.025em; }
.pagehead .sub { font-size: 13px; }

/* buttons: sentence case, softer */
.pill { text-transform: none; letter-spacing: .005em; font-size: 14px; font-weight: 600; padding: 10px 20px; border-width: 1px; }
.pill.solid { background: linear-gradient(180deg, #f67a60, var(--accent)); border-color: transparent; box-shadow: 0 6px 16px #F0644944, inset 0 1px 0 #ffffff55; }
.pill.big { font-size: 15px; padding: 15px 34px; }
.pill:not(.solid):not(.big) { background: rgba(255, 255, 255, .5); border-color: rgba(54, 56, 46, .14); color: var(--ink); }
.pill.danger:not(.solid) { color: #C62828; border-color: #C6282844; }
.pill.ghost { color: var(--muted); }
.rpt-bar .pill { background: #ffffff1f; color: #fff; border-color: #ffffff55; }
.fab-act, .mini, .hero-take, .camtoast button { text-transform: none; letter-spacing: .01em; font-size: 14px; }
.mini { font-size: 13px; }

/* ---------- Session: the photo is the whole screen, everything else floats on it ---------- */
#view-session { position: relative; justify-content: flex-end; padding-bottom: calc(var(--nav-h) + 12px + env(safe-area-inset-bottom)); }
#view-session .hero { position: absolute; inset: 0; height: auto; min-height: 0; }
.hero::before { background: linear-gradient(#0007, transparent 28%, transparent 55%, #0008 100%); }
#view-session .sheet {
  margin: 0 12px; padding: 8px 18px 6px; border-radius: 32px; z-index: 1;
  background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%);
}
#sheet .strip { margin: 0 -18px; padding-inline: 18px; scroll-padding-inline: 18px; }
#more .grp-items { margin: 0 -18px; padding: 2px 18px 6px; }
.grab-bar { background: rgba(54, 56, 46, .28); }
/* things on the photo keep their distance from the bottom (--under is how far the sheet covers it; set from JS) */
.stats { bottom: calc(var(--under, 0px) + 44px); text-shadow: 0 1px 8px #0006; }
.hero-take { bottom: calc(var(--under, 0px) + 96px); background: linear-gradient(180deg, #f67a60, var(--accent)); box-shadow: 0 8px 22px #F0644966, inset 0 1px 0 #ffffff55; }
.hero-retake { bottom: calc(var(--under, 0px) + 146px); background: var(--dark-glass); border: 1px solid var(--dark-glass-line); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); box-shadow: 0 6px 20px #0003; }
.hero .pg-dots { bottom: calc(var(--under, 0px) + 96px); }
.hero.has-take .pg-dots { bottom: calc(var(--under, 0px) + 202px); }
.welcome { padding-bottom: calc(var(--under, 0px) + 24px); background: linear-gradient(165deg, #41433a, #a4503f 65%, #2a2b23); }

/* glass chips on the photo */
.herotag, .expand, .hero-del, .pg-count, .scorepill, .v-btn, .hero-note {
  background: var(--dark-glass); border: 1px solid var(--dark-glass-line);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
}
.herotag { padding: 5px 13px; }
.jobtag { background: rgba(240, 100, 73, .82); border: 1px solid #ffffff55; -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); box-shadow: 0 4px 14px #F0644955; }
.mini { background: var(--dark-glass); border-color: var(--dark-glass-line); }
.chip { background: #ffffff2e; border-color: #ffffff66; }

/* photos: rounder, softer */
.ph { border-radius: 22px; width: 104px; height: 104px; box-shadow: 0 4px 14px rgba(40, 30, 30, .12); }
.grid .ph { width: auto; height: auto; }
.stack img { border-radius: 20px; border-width: 3px; box-shadow: 0 6px 18px rgba(40, 30, 30, .22); }
.stack { width: 126px; }
.grid .stack { width: 100%; }
.pair img, .thumbs img, .rd-thumbs img { border-radius: 18px; }
.badge { background: rgba(20, 20, 18, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 2px 8px; }
.badge.a { background: rgba(184, 52, 28, .85); }
.ph.need { outline: 0; box-shadow: 0 0 0 2.5px var(--accent), 0 4px 14px #F0644955; }
.grp + .grp { border-left-color: rgba(54, 56, 46, .12); }

/* ---------- floating nav: a glass pill of tabs, and a separate round camera button ---------- */
#nav { background: none; box-shadow: none; border-radius: 0; height: auto; padding: 0 14px calc(env(safe-area-inset-bottom) + 12px); justify-content: flex-start; gap: 12px; align-items: center; pointer-events: none; }
#nav > * { pointer-events: auto; }
.navpill { flex: 1; display: flex; justify-content: space-around; align-items: center; height: 62px; padding: 0 8px; border-radius: 34px; background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%); }
#nav .navpill button { width: 54px; height: 46px; padding: 0; display: grid; place-items: center; border-radius: 24px; color: #6c6b62; transition: background .2s, color .2s; }
#nav .navpill button.on { background: rgba(255, 255, 255, .9); color: var(--accent); box-shadow: 0 2px 10px rgba(40, 30, 30, .1); }
#nav .fab { order: 2; flex: none; width: 62px; height: 62px; margin: 0; background: linear-gradient(180deg, #f67a60, var(--accent)); border: 1px solid #ffffff66; box-shadow: 0 10px 26px #F0644966, inset 0 1px 0 #ffffff66; }
#nav .fab.open { background: rgba(36, 37, 31, .92); box-shadow: 0 10px 26px #0006; }

/* camera and viewer controls */
#camDone { background: var(--dark-glass); border: 1px solid var(--dark-glass-line); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); text-transform: none; letter-spacing: .01em; font-size: 14px; }
.v-guide, .qchip { -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); }
.chips button { background: var(--dark-glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.lbl-act { text-transform: none; letter-spacing: 0; font-size: 12px; }

/* ---------- calmer primary buttons: frosted white (Take AFTER) and charcoal (Share) instead of orange ---------- */
.hero-take:not(.hero-retake), #vTake {
  background: rgba(255, 255, 255, .9); color: var(--ink); border: 1px solid #fff; font-weight: 700;
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .3), inset 0 1px 0 #fff;
}
.hero-take:not(.hero-retake) svg, #vTake svg { color: var(--accent); }
.share-start, .fab-act.primary { background: linear-gradient(180deg, #4b4d41, var(--ink)); color: #fff; border-color: transparent; box-shadow: 0 10px 26px rgba(54, 56, 46, .38), inset 0 1px 0 #ffffff33; }

/* ---------- Photos page: pairs as big cards, the rest as a tight mosaic ---------- */
.lib { padding: 0 16px; }
.lib .grp-label { padding: 0 4px; margin-bottom: 10px; font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 700; color: var(--ink); }
.lib .grp-label.need { color: var(--ink); }
.lib .grp + .grp { margin-top: 30px; }
.pcards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-bottom: 22px; }
.pcard { position: relative; aspect-ratio: 3 / 4; border-radius: 30px; overflow: hidden; background: var(--line); box-shadow: 0 14px 34px rgba(50, 36, 32, .22); cursor: pointer; isolation: isolate; }
.pcard:nth-child(even) { transform: translateY(24px); }
.pcard::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(transparent 52%, rgba(0, 0, 0, .62)); }
.pcard img { position: absolute; display: block; object-fit: cover; }
.pcard img.pa { inset: 0; width: 100%; height: 100%; }
.pcard img.pb { z-index: 2; left: 10px; top: 10px; width: 38%; aspect-ratio: 3 / 4; border-radius: 18px; border: 2px solid rgba(255, 255, 255, .92); box-shadow: 0 6px 16px rgba(0, 0, 0, .35); }
.pcap { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 12px; display: flex; flex-direction: column; color: #fff; pointer-events: none; text-shadow: 0 1px 8px rgba(0, 0, 0, .45); }
.pcap b { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.pcap span { font-size: 11.5px; opacity: .85; }
.pcard .badge.warn { z-index: 3; top: 12px; right: 12px; left: auto; bottom: auto; }
.pcard .chk { z-index: 4; top: auto; bottom: 12px; left: auto; right: 12px; }
.pcard.selected { outline: 3px solid var(--select); outline-offset: 2px; }
.mosaic { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: calc((min(100vw, 520px) - 32px - 12px) / 3); grid-auto-flow: dense; gap: 6px; }
.mosaic .ph { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 20px; box-shadow: none; }
.mosaic .ph:nth-child(5n + 1) { grid-column: span 2; grid-row: span 2; border-radius: 26px; }
.mosaic .ph.need { box-shadow: none; }
.mosaic .badge { left: 8px; bottom: 8px; }

/* Photos page: one consistent grid. Pairs 2-up, everything else 3-up, all portrait and the same size within a row */
.pcard:nth-child(even) { transform: none; }
.pcards { gap: 12px; padding-bottom: 0; }
.mosaic { grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; grid-auto-flow: row; gap: 10px; }
.mosaic .ph, .mosaic .ph:nth-child(5n + 1) { grid-column: auto; grid-row: auto; width: 100%; height: auto; aspect-ratio: 3 / 4; border-radius: 20px; }
.mosaic .badge.a { background: rgba(20, 20, 18, .5); font-weight: 600; }

/* "All caught up" row in the collapsed sheet: a summary on the left, one charcoal button on the right */
.sharebar { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 2px 8px; }
.sb-text { display: flex; flex-direction: column; min-width: 0; }
.sb-text b { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.sb-text span { font-size: 13px; color: var(--muted); }
.pill.share-start, .pill.solid.share-start { margin: 0; flex: none; padding: 12px 20px; background: linear-gradient(180deg, #4b4d41, var(--ink)); color: #fff; border-color: transparent; box-shadow: 0 8px 20px rgba(54, 56, 46, .32), inset 0 1px 0 #ffffff33; }
#sheet .strip:has(.sharebar) { display: flex; }

/* AFTER camera: filmstrip of the photos still waiting, above the controls */
.v-cambar { flex-wrap: wrap; row-gap: 14px; }
.v-film { flex: 1 0 100%; display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: none; touch-action: pan-x; }
.v-film::-webkit-scrollbar { display: none; }
.vf { flex: 0 0 auto; width: 54px; height: 72px; padding: 0; border: 2px solid transparent; border-radius: 15px; overflow: hidden; background: #0006; opacity: .72; transition: transform .2s, opacity .2s, border-color .2s; }
.vf img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.vf.on { border-color: #fff; opacity: 1; transform: scale(1.1); box-shadow: 0 4px 14px #0007; }
.v-film:empty { display: none; }
.v-readout { bottom: calc(232px + env(safe-area-inset-bottom)); }
#vQ { bottom: calc(262px + env(safe-area-inset-bottom)); }
#vDone { padding: 8px 16px; background: rgba(255, 255, 255, .9); color: var(--ink); border-color: #fff; }
#viewer:has(#vCam:not([hidden])) .pg-dots { display: none; }

/* batch camera: strip of the photos taken so far, above Done / shutter */
#camBar { row-gap: 14px; }
#camFilm { grid-column: 1 / -1; display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px; scrollbar-width: none; justify-content: flex-start; }
#camFilm::-webkit-scrollbar { display: none; }
#camFilm img { flex: 0 0 auto; width: 52px; height: 66px; object-fit: cover; border-radius: 14px; border: 2px solid #ffffffb3; box-shadow: 0 4px 12px #0006; }
#camFilm:empty { display: none; }
#camThumb { display: none; }
#camDone { justify-self: start; }
#camQ { bottom: calc(214px + env(safe-area-inset-bottom)); }
.camtoast { bottom: calc(262px + env(safe-area-inset-bottom)); }

/* =====================================================================
   Calmer pass: fewer badges and words, one set of radii, quieter secondary actions.
   The glass, the floating nav and the gradient stay.
   ===================================================================== */
:root { --r-card: 24px; --r-tile: 18px; --shadow-sm: 0 4px 14px rgba(40, 30, 30, .12); }
.view { padding-bottom: calc(var(--nav-h) + 52px + env(safe-area-inset-bottom)); }   /* grids scroll fully clear of the nav */
.sub:empty { display: none; }
.stats { display: none; }                                  /* the drawer already says what is waiting */

/* badges: the group heading already says it, so tiles stay clean (only the soft-photo warning remains) */
.ph .badge:not(.warn), .stack .badge:not(.warn) { display: none; }
.ph.need { box-shadow: var(--shadow-sm); }
.ph:has(img.sel) { box-shadow: 0 0 0 2.5px var(--ink), var(--shadow-sm); }
.lbl-act { color: var(--muted); font-weight: 600; }

/* compact collapsed drawer: a small caption and smaller tiles */
.sheet:not(.open) .grp-label.need { display: flex; }
#sheet .grp-label { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); }
#view-session .sheet { padding: 6px 16px 4px; border-radius: 28px; }
#sheet .strip { margin: 0 -16px; padding-inline: 16px; scroll-padding-inline: 16px; padding-block: 2px 6px; }
#more .grp-items { margin: 0 -16px; padding: 2px 16px 6px; }
#sheet .ph { width: 84px; height: 84px; }
#sheet .stack { width: 104px; }
.grab { height: 18px; }

/* consistent radii */
.card, .rd-card, .mrow, .pdffile, .pair { border-radius: var(--r-card); }
.ph, .mosaic .ph, .mosaic .ph:nth-child(5n + 1) { border-radius: var(--r-tile); }
.stack img { border-radius: 16px; }
.pcard { border-radius: var(--r-card); }
.pill.solid { background: var(--accent); box-shadow: 0 6px 16px #F0644940; }
.pill.big, .hero-take { min-height: 46px; }

/* quieter secondary actions: Take AFTER stays the obvious one */
.hero-retake { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: #ffffffe6; text-shadow: 0 1px 8px #000a; font-weight: 600; }
.mini { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: #ffffffd9; text-shadow: 0 1px 8px #000a; }
#vDelete, #heroDelete { color: #ffb4a8; }

/* ---------- Jobs list rows ---------- */
.jobcard { display: flex; flex-direction: row; align-items: center; gap: 14px; width: calc(100% - 32px); padding: 12px 14px 12px 12px; text-align: left; font: inherit; color: inherit; position: relative; }
.jobcard.active { border-color: transparent; box-shadow: var(--glass-shadow), 0 0 0 2px #F0644966; }
.jthumb { flex: none; width: 64px; height: 64px; border-radius: 16px; background: rgba(54, 56, 46, .12) center / cover no-repeat; }
.jobcard .jobinfo { flex: 1; min-width: 0; gap: 3px; }
.jobcard .jobinfo b { font-size: 16px; }
.jobcard > i { position: absolute; top: 10px; right: 38px; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--accent); border-radius: 999px; padding: 3px 9px; }
.jchev { flex: none; width: 20px; color: #9a998f; }
.jchev svg { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Job detail ---------- */
.jd-head { display: flex; align-items: center; gap: 12px; padding: max(24px, calc(env(safe-area-inset-top) + 12px)) 16px 12px; }
.jd-back { flex: none; width: 40px; height: 40px; padding: 0; border-radius: 50%; display: grid; place-items: center; color: var(--ink); background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--shadow-sm); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.jd-back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.jd-title { flex: 1; min-width: 0; }
.jd-title h1 { font-size: 26px; letter-spacing: -.02em; overflow-wrap: anywhere; line-height: 1.15; }
.jd-title p { font-size: 13px; color: var(--muted); margin-top: 2px; }
.jd-active { flex: none; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--accent); border-radius: 999px; padding: 4px 10px; }
.jd-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 6px 16px 14px; }
.jd-stats > div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 8px; border-radius: 20px; background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); }
.jd-stats b { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.jd-stats span { font-size: 12px; color: var(--muted); }
.jd-stats .need b { color: var(--accent-ink); }
.jd-take { padding: 0 16px 14px; }
.jd-take .pill { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; }
.jd-take svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.jd-rows { padding: 4px 6px; display: flex; flex-direction: column; }
.jd-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 15px 12px; background: none; border: 0; text-align: left; font: inherit; font-size: 16px; font-weight: 600; color: var(--ink); }
.jd-row + .jd-row { border-top: 1px solid rgba(54, 56, 46, .08); }
.jd-row svg { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); }
.jd-row span { flex: 1; }
.jd-row svg:last-child:not(:first-child) { width: 18px; height: 18px; color: #9a998f; }
.jd-row.danger, .jd-row.danger svg { color: #C62828; }
.jd-recent-head { display: flex; align-items: baseline; justify-content: space-between; padding: 8px 20px 8px; }
.jd-recent-head h3 { margin: 0; font-size: 15px; }
.jd-recent { display: flex; gap: 10px; overflow-x: auto; padding: 2px 16px 8px; scrollbar-width: none; }
.jd-recent::-webkit-scrollbar { display: none; }
.jr { flex: none; width: 96px; height: 124px; padding: 0; border: 0; border-radius: var(--r-tile); background: var(--line) center / cover no-repeat; box-shadow: var(--shadow-sm); }

/* ---------- selecting photos: the tile settles back a little and gets a round check, no outlines ---------- */
.ph.selectable, .stack.selectable, .pcard.selectable { transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
.ph.selected, .stack.selected, .pcard.selected { outline: 0; transform: scale(.92); }
.stack.selected img { box-shadow: 0 6px 18px rgba(40, 30, 30, .22); }
.chk { width: 24px; height: 24px; border-radius: 50%; top: 8px; left: 8px; background: rgba(255, 255, 255, .22); border: 2px solid rgba(255, 255, 255, .95); box-shadow: 0 1px 6px rgba(0, 0, 0, .3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .18s, border-color .18s, transform .18s; }
.selected .chk { background: var(--ink); border-color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); transform: scale(1.05); }
.chk svg { width: 14px; height: 14px; stroke-width: 3.2; }
.pcard .chk { top: 12px; right: 12px; bottom: auto; left: auto; }
.pcard .badge.warn { top: auto; bottom: 12px; right: 12px; }

.acct-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
#acct h3 { margin-top: 0; }

/* ---------- plans: Go Pro sheet, replace-job sheet, plan line ---------- */
#upgrade, #replaceJob { position: fixed; inset: 0; z-index: 16; }
.uplist { margin: 4px 0 6px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.uplist li { position: relative; padding-left: 26px; font-size: 14px; }
.uplist li::before { content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
#upForm { display: flex; flex-direction: column; gap: 10px; }
.up-input { font: inherit; font-size: 17px; padding: 14px; border-radius: 14px; border: 2px solid transparent; background: #fff; color: var(--ink); width: 100%; -webkit-appearance: none; }
.up-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px #F0644933; }
.up-err { margin: 0; min-height: 0; font-size: 13px; color: #C62828; }
.up-err:empty { display: none; }
.jd-plan { display: block; margin: 0 16px 12px; padding: 8px 14px; width: calc(100% - 32px); border: 0; border-radius: 14px; background: rgba(54, 56, 46, .07); color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; text-align: left; }

/* ---------- cloud: share link sheet, links list, backup line ---------- */
#rptLink { position: absolute; inset: 0; z-index: 4; }
#lk-ready, #lk-error { display: flex; flex-direction: column; gap: 12px; }
#lk-busy { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 26px 0 18px; font-weight: 600; }
#lk-busy p { margin: 0; }
#lkUrl { font-size: 14px; }
.pill.ghost.danger { color: #C62828; }
#shares { position: fixed; inset: 0; z-index: 16; }
#sharesList { display: flex; flex-direction: column; gap: 10px; margin: 6px 0; }
.shrow { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 16px; background: #fff; }
.shrow > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.shrow span { font-size: 12px; color: var(--muted); }
.jd-plan.pro { color: var(--muted); background: rgba(46, 175, 109, .12); }

/* =====================================================================
   Desktop: a sidebar and wide pages, for managing jobs, browsing photos and building reports. No camera screen.
   ===================================================================== */
#deskGate { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 24px; background: var(--canvas); background-color: var(--sheet); }
.gate-card { width: min(100%, 460px); display: flex; flex-direction: column; gap: 16px; padding: 36px 32px; border-radius: 32px; background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); text-align: center; }
.gate-card h1 { font-size: 32px; letter-spacing: -.025em; }
.gate-lead { font-size: 16px; }
#dropzone { position: fixed; inset: 0; z-index: 25; display: flex; gap: 20px; padding: 28px; background: rgba(30, 30, 26, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.dz { flex: 1; display: grid; place-items: center; border: 3px dashed #ffffffb3; border-radius: 28px; color: #fff; font-size: 22px; text-align: center; background: rgba(255, 255, 255, .08); }
html.desktop #view-session { display: none !important; }
html.desktop body { background: var(--sheet); }
html.desktop #app { max-width: none; margin: 0 0 0 232px; background: var(--canvas); background-color: var(--sheet); }
html.desktop .view { max-width: 1180px; margin: 0 auto; padding: 12px 36px 56px; min-height: 100dvh; }
html.desktop .pagehead { padding: 36px 4px 18px; }
html.desktop .pagehead h1 { font-size: 36px; }
html.desktop .card { margin: 0 0 14px; }
html.desktop #view-settings { max-width: 760px; }
html.desktop #view-job { max-width: 820px; }
html.desktop .jd-head { padding: 36px 4px 14px; }
html.desktop .jd-stats, html.desktop .jd-take, html.desktop .jd-plan { margin-left: 0; margin-right: 0; padding-left: 4px; padding-right: 4px; width: auto; }
html.desktop .jd-recent { padding-left: 4px; }
html.desktop .jd-recent-head { padding-left: 6px; }
html.desktop .jr { width: 150px; height: 190px; }

/* sidebar */
html.desktop #nav { left: 0; top: 0; bottom: 0; transform: none; width: 232px; height: auto; padding: 26px 14px 22px; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 8px; background: var(--glass); border-right: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); pointer-events: auto; }
html.desktop #nav::before { content: "Before / After"; padding: 4px 14px 22px; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
html.desktop .navpill { flex: none; flex-direction: column; align-items: stretch; justify-content: flex-start; height: auto; padding: 0; gap: 4px; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
html.desktop #nav .navpill button { width: auto; height: 46px; padding: 0 14px; display: flex; align-items: center; justify-content: flex-start; gap: 12px; border-radius: 14px; }
html.desktop #nav .navpill button::after { content: attr(aria-label); font-size: 15px; font-weight: 600; }
html.desktop #nav .navpill button[data-view="session"] { display: none; }
html.desktop #nav .fab { order: 3; margin-top: auto; width: auto; height: 48px; border-radius: 16px; display: flex; align-items: center; justify-content: center; gap: 10px; }
html.desktop #nav .fab::after { content: "Upload photos"; color: #fff; font-size: 15px; font-weight: 700; }
html.desktop #nav .fab .i-cam { display: none; }
html.desktop #nav .fab.open .i-x { display: block; }
html.desktop #nav .fab.open::after { content: "Close"; }
html.desktop #dial { left: 16px; bottom: 86px; transform: none; width: 300px; }
html.desktop #dial .dial-item, html.desktop .dial-up-label { display: none; }
html.desktop .dial-up { flex-direction: column; align-items: stretch; gap: 10px; }
html.desktop .dial-up .chip { padding: 15px 18px; border-radius: 18px; background: #fff; color: var(--ink); border: 0; font-size: 15px; font-weight: 700; text-align: center; box-shadow: 0 10px 30px #0003; }
html.desktop #selbar { bottom: 28px; left: calc(50% + 116px); }

/* wide pages */
html.desktop .joblist { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 14px; padding: 0; }
html.desktop .jobcard { width: auto; margin: 0; }
html.desktop .lib { padding: 0 4px; }
html.desktop .pcards { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
html.desktop .pcard:nth-child(even) { transform: none; }
html.desktop .mosaic { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-rows: auto; gap: 12px; }
html.desktop .lib .grp + .grp { margin-top: 36px; }

/* no camera here: viewer keeps the photo, delete and navigation */
html.desktop #vTake, html.desktop #vRetake { display: none !important; }
html.desktop #view-job .jd-take .pill { max-width: 360px; }
html.desktop #nav .navpill button[data-view="jobs"] { order: -1; }
html.desktop .jd-take svg { display: none; }

/* proof of work switches in the report details */
.rd-switch { display: flex; align-items: flex-start; gap: 14px; cursor: pointer; }
.rd-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rd-switch .sw { flex: none; position: relative; width: 50px; height: 30px; border-radius: 999px; background: #c9c7c0; transition: background .2s; margin-top: 2px; }
.rd-switch .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.3); transition: transform .2s; }
.rd-switch input:checked + .sw { background: var(--ink); }
.rd-switch input:checked + .sw::after { transform: translateX(20px); }
.rd-switch input:focus-visible + .sw { outline: 3px solid #F0644955; }
.rd-switch input:disabled + .sw { opacity: .45; }
.rd-switch .lbl { display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.rd-switch .lbl small { font-size: 12.5px; color: var(--muted); font-weight: 400; }