/* Frezsight capture site (contributors' phones), Phase 6 step 1:
   joining from the invite link.
   Large targets (56px+), one-handed use, meaning never by colour alone,
   WCAG 2.2 AA in light and dark (colours as the main app). */
@font-face { font-family: Inter; src: url(/inter.woff2) format('woff2'); font-weight: 400 700; font-display: swap; }
:root {
	--bg: #F6F7F9; --surface: #FFFFFF; --text: #1B2230; --muted: #5B6575; --line: #D9DEE6; --control: #8792A3;
	--accent: #2457D6; --on-accent: #FFFFFF; --accent-soft: #E8EEFC; --danger: #A3261E; --danger-soft: #FBEFEE; --focus: #2457D6;
	color-scheme: light;
}
@media (prefers-color-scheme: dark) {
	:root {
		--bg: #121418; --surface: #1A1D23; --text: #EEF1F5; --muted: #AEB7C4; --line: #333944; --control: #8792A3;
		--accent: #8DB8FF; --on-accent: #0B1220; --accent-soft: #233552; --danger: #FFB3AA; --danger-soft: #3A1F1C; --focus: #FFD166;
		color-scheme: dark;
	}
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.6 Inter, system-ui, -apple-system, sans-serif; }
main { max-width: 34rem; margin: 0 auto; padding: 20px 16px 40px; }
h1 { font-size: 24px; line-height: 1.3; margin: 8px 0 16px; }
h2 { font-size: 19px; line-height: 1.3; margin: 0 0 8px; }
p, ul { margin: 0 0 12px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin: 0 0 16px; }
label { display: block; font-weight: 600; margin: 0 0 6px; }
input {
	width: 100%; min-height: 56px; padding: 10px 14px; border: 2px solid var(--control); border-radius: 12px;
	background: var(--surface); color: var(--text); font: 700 19px/1.2 ui-monospace, Menlo, monospace; letter-spacing: 0.02em; text-transform: uppercase;
}
button {
	width: 100%; min-height: 56px; margin-top: 12px; border: 2px solid var(--accent); border-radius: 12px;
	background: var(--accent); color: var(--on-accent); font: 700 18px/1.2 Inter, system-ui, sans-serif; cursor: pointer;
}
button[disabled] { opacity: 0.6; }
button.secondary { margin-top: 0; background: var(--accent-soft); color: var(--text); border-color: var(--accent); font-weight: 600; }
#form { margin-top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.muted { color: var(--muted); }
.msg { display: flex; gap: 10px; align-items: flex-start; border-radius: 12px; padding: 12px 14px; margin: 12px 0 0; font-weight: 600; }
.msg.bad { background: var(--danger-soft); color: var(--danger); border: 2px solid var(--danger); }
.msg.ok { background: var(--accent-soft); color: var(--text); border: 2px solid var(--accent); }
.msg.warn { background: var(--surface); color: var(--text); border: 2px solid var(--danger); margin: 0 0 16px; font-weight: 500; }
#msg { margin: 0 0 16px; }
/* On a computer the invite would be used up there: no way to join. */
.desk #join-card, .desk #code-card { display: none; }
.msg .sym { font-size: 20px; line-height: 1.2; }
.projects { list-style: none; padding: 0; margin: 0; }
.projects li { padding: 0; }
.projects b { display: block; font-size: 18px; }
.foot { text-align: center; font-size: 13px; color: var(--muted); padding: 16px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Phase 6 step 2: a project's areas and its plans on the phone. */
/* Rows that open something are real buttons: the same tinted fill and
   blue border as the other secondary buttons, and a › on the right. */
button.row {
	position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 64px;
	margin: 0 0 10px; padding: 12px 44px 12px 14px; background: var(--accent-soft); border: 2px solid var(--accent); border-radius: 12px;
	color: var(--text); text-align: left; font: inherit;
}
button.row b { font-size: 18px; }
button.row::after { content: '›'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 34px; line-height: 1; font-weight: 400; color: var(--text); }
button.row:active { filter: brightness(1.15); }
.topbar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface); border-bottom: 1px solid var(--line); }
.topbar h1 { flex: 1; min-width: 0; margin: 0; font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar button { width: auto; min-height: 48px; margin: 0; padding: 0 14px; font-size: 16px; }
.topbar .back { background: var(--accent-soft); color: var(--text); border-color: var(--accent); }
.topbar { position: relative; }
.topbar .morebtn { width: 48px; padding: 0; display: flex; align-items: center; justify-content: center; background: var(--surface); color: var(--text); border-color: var(--control); }
/* The ⋯ menu: compact rows with an icon and a word. */
.tmenu { position: absolute; z-index: 20; right: 12px; top: calc(100% + 4px); min-width: 210px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); }
.tmenu .tmi { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; margin: 0; padding: 0 12px; background: none; color: var(--text); border: 0; border-radius: 8px; font: 600 17px/1.2 Inter, system-ui, sans-serif; text-align: left; }
.tmenu .tmi:active { background: var(--accent-soft); }
#screen main { padding-top: 0; }
#screen main .topbar { margin: 0 -16px 16px; }
.areas { list-style: none; padding: 0; margin: 0; }
.area-name { padding: 10px 4px; font-weight: 700; color: var(--muted); }
.viewer { position: relative; flex: 1; overflow: hidden; background: #E9EDF2; touch-action: none; user-select: none; -webkit-user-select: none; }
.vlayer, .vpins { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.vlayer img { position: absolute; display: block; max-width: none; pointer-events: none; }
.pin {
	position: absolute; width: 36px; height: 36px; min-height: 0; margin: 0; padding: 0; border: 0; background: none;
	transform: translate(-50%, calc(-50% - 25px)); touch-action: manipulation;
}
.pin .drop { position: absolute; inset: 0; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 2px solid #FFFFFF; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); }
.pin .glyph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #FFFFFF; }
.pin .num { position: absolute; left: 30px; top: -6px; min-width: 20px; padding: 0 5px; border-radius: 10px; background: #FFFFFF; color: #111111; border: 1px solid #111111; font: 700 12px/18px Inter, system-ui, sans-serif; text-align: center; }
.pin.s-requested .drop, .chip.s-requested { background: #5B6575; }
.pin.s-captured .drop, .chip.s-captured { background: #2457D6; }
.pin.s-accepted .drop, .chip.s-accepted { background: #15803D; }
.pin.s-reshoot .drop, .chip.s-reshoot { background: #B45309; }
/* Photo pins (FR-003): a rounded square with a point, so the type is told
   by SHAPE (as in the main app); the number's label carries its icon. */
.pin.t-photo .drop { inset: 2px; border-radius: 8px; transform: none; }
.pin.t-photo .drop::after { content: ''; position: absolute; left: 50%; bottom: -6.5px; width: 10px; height: 10px; background: inherit; border-right: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; transform: translateX(-50%) rotate(45deg); }
.pin.t-photo.local .drop::after { border-style: dashed; }
.pin .num { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.pin .num svg { flex: none; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); border-radius: 16px 16px 0 0; box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.3); }
.status { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.chip { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; color: #FFFFFF; }
.chip.t-photo { border-radius: 8px; }

/* Plan screen: fills the phone; area switcher in the top bar. */
#screen:not([hidden]) { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--bg); }
#screen > main { overflow: auto; }
.topbar .areasw { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px; background: var(--surface); color: var(--text); border-color: var(--control); }
.topbar .areasw span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.strip { padding: 8px 12px; background: var(--surface); border-bottom: 1px solid var(--line); }
/* Progress: green fill from the left on a plain grey track. */
.progress { width: 100%; margin: 6px 0 2px; }
.ptrack { height: 12px; border-radius: 6px; background: var(--line); overflow: hidden; }
.pfill { height: 100%; background: #15803D; border-radius: 6px; }
.pdone { font-weight: 700; margin-top: 6px; }
.kv { color: var(--muted); }
.kv .k { font-weight: 600; }
.pcounts { display: flex; flex-wrap: wrap; gap: 2px 16px; margin-top: 2px; font-size: 15px; font-weight: 600; }
.pc { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
button.row.here { border-color: var(--accent); }
.sheet.tall { top: 64px; overflow: auto; }
.notebody { white-space: pre-wrap; padding: 10px 12px; border-left: 4px solid var(--control); background: var(--bg); border-radius: 6px; }
.pop {
	position: absolute; z-index: 2; width: min(260px, calc(100% - 16px)); box-sizing: border-box;
	background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.popin { max-height: 40vh; overflow: auto; padding: 6px 6px 12px 14px; touch-action: pan-y; }
/* A small point (half a turned square) on the edge nearest the pin, so it's clear which pin the window belongs to. */
.poptail { position: absolute; width: 16px; height: 16px; background: var(--surface); border: 1px solid var(--line); transform: rotate(45deg); }
.poptail.up { top: -9px; border-right: 0; border-bottom: 0; clip-path: polygon(0 0, 100% 0, 0 100%); }
.poptail.down { bottom: -9px; border-left: 0; border-top: 0; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.pophead { display: flex; align-items: center; gap: 10px; }
.pophead .chip { flex: none; }
.pophead h2 { flex: 1; min-width: 0; margin: 0; font-size: 17px; line-height: 1.3; }
button.popclose {
	flex: none; width: 44px; min-height: 44px; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center;
	background: var(--surface); color: var(--text); border: 2px solid var(--control); border-radius: 10px;
}
.pop p { margin: 8px 8px 0 0; }
.popbody { white-space: pre-wrap; }
/* Phase 6 step 4: the contributor's own notes. */
.addhint { position: absolute; z-index: 3; left: 8px; right: 8px; top: 8px; display: flex; align-items: center; gap: 10px; padding: 4px 4px 4px 12px; border-radius: 12px; background: var(--surface); color: var(--text); border: 2px solid var(--accent); font-weight: 600; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }
.addhint span { flex: 1; }
/* Small icon buttons (44 × 44: comfortable for a finger), named for screen readers. */
button.iconbtn { flex: none; width: 44px; min-height: 44px; margin: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--surface); color: var(--text); border: 2px solid var(--control); border-radius: 10px; }
button.iconbtn.pri { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.ntools { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.ntools .spacer { flex: 1; }
button.smallbtn { width: auto; min-height: 44px; margin: 10px 0 0; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; background: var(--accent-soft); color: var(--text); border: 2px solid var(--accent); border-radius: 10px; font-size: 16px; font-weight: 600; }
textarea.notetext {
	display: block; width: 100%; margin: 8px 0 0; padding: 10px 12px; border: 2px solid var(--control); border-radius: 12px;
	background: var(--surface); color: var(--text); font: 16px/1.5 Inter, system-ui, sans-serif; resize: vertical;
}
.pop .small, .small { font-size: 14px; }
.locnote { margin: 8px 0 0; }
.locnote p { margin: 4px 0 0; }
.locnote { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; align-items: start; }
.locnote > span, .locnote > p { grid-column: 1; }
.locnote > button { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
/* Not sent yet: a dashed edge (and the words in its window), not colour alone. */
.npin.unsent .bub { border-style: dashed; border-width: 3px; }
.npin.draft { pointer-events: none; }
.npin { position: absolute; width: 32px; height: 32px; min-height: 0; margin: 0; padding: 0; border: 0; background: none; transform: translate(0, -100%); touch-action: manipulation; }
.npin .bub { position: absolute; inset: 0; border-radius: 50% 50% 50% 0; background: var(--c); border: 2px solid #FFFFFF; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); }
.npin .glyph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #FFFFFF; }

.head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.head h1 { margin: 8px 0 16px; }
button.helpbtn { width: auto; min-height: 48px; padding: 0 18px; margin: 0 0 8px; }

/* Cards on the phone: smaller text so each fact fits on one line. */
button.row { font-size: 15px; line-height: 1.45; padding: 10px 40px 10px 12px; }
button.row b { font-size: 17px; line-height: 1.3; }
button.row .pdone { font-size: 15px; }
button.row .pcounts, .strip .pcounts { font-size: 14px; }
button.row .kv { font-size: 14px; }
.card { padding: 14px 12px; }

/* Save for offline (plan screen). */
.nosignal { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); padding: 6px 12px; border-radius: 16px; background: rgba(17, 17, 17, 0.85); color: #FFFFFF; font-size: 14px; font-weight: 600; white-space: nowrap; pointer-events: none; }
button.small { width: auto; min-height: 44px; margin: 0; padding: 0 14px; font-size: 15px; }

/* Project card: the card's button opens the project; the offline button
   sits in its top-right corner. */
.pcard { position: relative; }
.pcard > button.row { padding-right: 60px; }
/* The › sits bottom-right on project cards, clear of the offline icon. */
.pcard > button.row::after { top: auto; bottom: 8px; transform: none; font-size: 30px; }
.offbtn {
	position: absolute; top: 6px; right: 6px; width: 50px; min-height: 48px; margin: 0; padding: 4px 0; border: 0; border-radius: 10px;
	background: none; color: var(--text); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 1px; font: 600 11px/1.2 Inter, system-ui, sans-serif;
}
.offbtn .mark { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.offbtn.unsaved .mark { border: 2px solid #8792A3; color: var(--text); background: var(--surface); }
.offbtn.saved .mark { background: #15803D; color: #FFFFFF; border: 2px solid #15803D; }

/* Phase 6 step 3: recording at a capture location. Guidance sits on the
   camera picture (Phase 1: below it, nobody saw it). Warnings carry an
   icon and words, never colour alone; yellow and white read on any scene. */
button.recbtn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; margin: 12px 0 0; font-size: 17px; }
.alignbar button.smallbtn { margin: 0; }
.flash { position: absolute; z-index: 4; left: 8px; right: 8px; bottom: 16px; display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--surface); color: var(--text); border: 2px solid var(--danger); font-weight: 600; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }
.rec { position: fixed; inset: 0; z-index: 50; background: #000; color: #fff; --rec-lift: 40px; }
/* In a Safari tab its floating address bar covers the bottom of the
   screen, so the buttons sit above it (--rec-lift). A Home Screen app has
   no bar. */
@media (display-mode: standalone) { .rec { --rec-lift: 0px; } }
.rec-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rec-top { position: absolute; left: 0; right: 0; top: 0; padding: calc(12px + env(safe-area-inset-top)) 16px 12px; background: rgba(0, 0, 0, 0.6); }
.rec-top h2 { margin: 0; font-size: 19px; color: #fff; }
.rec-top p { margin: 4px 0 0; font-size: 16px; line-height: 1.45; }
.rec-ring { position: absolute; top: 42%; left: 50%; width: min(60vw, 40vh, 300px); transform: translate(-50%, -50%); pointer-events: none; }
.rec-ring svg { display: block; width: 100%; height: auto; }
.ring-track { fill: none; stroke: rgba(255, 255, 255, 0.35); stroke-width: 14; }
.ring-progress { fill: none; stroke: #FFD23F; stroke-width: 14; stroke-linecap: round; }
.pace-dot { fill: #FFFFFF; stroke: #000; stroke-width: 3; }
.you-mark { fill: #FFD23F; stroke: #000; stroke-width: 3; }
.ring-text { fill: #fff; font-size: 30px; font-weight: 700; paint-order: stroke; stroke: #000; stroke-width: 4px; }
.rec-tilt { position: absolute; top: 26%; bottom: 44%; right: 12px; width: 56px; }
.tilt-scale { position: relative; height: 100%; width: 22px; margin: 0 auto; border: 3px solid #fff; border-radius: 12px; background: rgba(0, 0, 0, 0.5); }
.tilt-band { position: absolute; left: -3px; right: -3px; background: rgba(255, 255, 255, 0.45); border-top: 3px dashed #fff; border-bottom: 3px dashed #fff; }
.tilt-mark { position: absolute; left: -12px; right: -12px; height: 8px; margin-top: -4px; background: #FFD23F; border: 2px solid #000; border-radius: 4px; }
.tilt-label { display: block; margin-top: 4px; text-align: center; font-weight: 700; text-shadow: 0 1px 2px #000; }
.rec-msg { flex-basis: 100%; display: flex; gap: 8px; align-items: center; justify-content: center; margin: 0; padding: 2px 8px; font-size: 18px; font-weight: 700; text-align: center; text-shadow: 0 1px 3px #000; }
.rec-msg:empty { display: none; }
/* A warning is a message, never a button: dark, yellow outline and text, ! icon. */
.rec-msg.warn { padding: 6px 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.75); color: #FFD23F; border: 2px solid #FFD23F; }
.rec-bottom { position: absolute; left: 0; right: 0; bottom: var(--rec-lift); display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); background: rgba(0, 0, 0, 0.6); }
.rec-bottom .rec-time { flex-basis: 100%; margin: 0; text-align: center; font-weight: 700; }
.rec-bottom .rec-time:empty { display: none; }
/* The one thing to tap: big, bright, the width of the screen. */
.rec-bottom button.rec-go { flex: 1; margin: 0; min-height: 64px; background: #FFD23F; color: #000; border: 3px solid #000; font-size: 20px; font-weight: 800; }
.rec-steps { margin: 0 44px 6px 0; font-size: 14px; font-weight: 700; letter-spacing: 0.01em; white-space: pre-wrap; }
/* Leaving early: small, in the corner, out of the thumb's way. */
button.rec-x { position: absolute; top: calc(8px + env(safe-area-inset-top)); right: 8px; width: 40px; min-height: 40px; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.35); color: #fff; border: 2px solid rgba(255, 255, 255, 0.7); border-radius: 10px; }
.rec-top h2 { margin-right: 44px; }
/* 3, 2, 1: big, white with a dark edge, readable on any scene. */
.rec-count { position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%); font: 800 160px/1 Inter, system-ui, sans-serif; color: #fff; -webkit-text-stroke: 4px #000; paint-order: stroke; text-shadow: 0 4px 16px rgba(0, 0, 0, 0.6); pointer-events: none; }
.rec-between { position: absolute; top: 46%; left: 16px; right: 16px; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 16px; border-radius: 16px; background: rgba(0, 0, 0, 0.75); border: 2px solid #fff; text-align: center; }
.rec-between b { font-size: 22px; }
.rec-between span { font-size: 17px; line-height: 1.45; }
.rec-between svg { color: #FFD23F; }
/* A capture location's videos: one line each, state in words + tick. */
.vidlist { margin: 4px 0 0; }
.vidrow { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 3px 0; font-size: 15px; font-weight: 600; line-height: 1.4; }
.okdot, .tododot { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; }
.okdot { background: #15803D; color: #FFFFFF; }
.tododot { border: 2px solid var(--control); }
.vidlist p { margin: 4px 0 0; font-size: 13px; }
.recrow { display: flex; gap: 8px; align-items: stretch; margin-top: 10px; }
/* Always in view in a capture location's window: the videos scroll behind it. */
.popin .recrow { position: sticky; bottom: -12px; margin-top: 4px; padding: 6px 0 12px; margin-bottom: -12px; background: var(--surface); }
.recrow button.recbtn { flex: 1; margin: 0; }
.recrow button.notebtn { width: 52px; min-height: 48px; }
/* After a capture location is done: a gold outline pulses round the
   progress bar itself (gold, as selection elsewhere; never the blue of
   keyboard focus), with a line of words; steady for reduced motion. */
.ptrack.pulse { overflow: visible; box-shadow: 0 0 0 3px #F5B400; animation: bar-pulse 1s ease-in-out 4; }
@keyframes bar-pulse { 50% { box-shadow: 0 0 0 6px #F5B400, 0 0 12px 4px rgba(245, 180, 0, 0.6); } }
@media (prefers-reduced-motion: reduce) { .ptrack.pulse { animation: none; } }
.pfill { transition: width 0.8s ease-out; }
@media (prefers-reduced-motion: reduce) { .pfill { transition: none; } }
.stripnote { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-weight: 700; font-size: 15px; }
/* Recorded on this phone, not uploaded: the captured look with a dashed
   white edge (the same "not sent yet" mark as notes). */
.pin.local .drop { border-style: dashed; border-width: 3px; }
.chip.local { outline: 2px dashed #FFFFFF; outline-offset: -4px; }
/* Uploads: a light green, striped layer over the dark green progress
   (stripes so it reads even where the two greens look alike), and a line
   of words under the bar. */
.ptrack { position: relative; }
.pup { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: rgba(134, 239, 172, 0.55); transition: width 0.25s linear; }
@media (prefers-reduced-motion: reduce) { .pup { transition: none; } }
.pupline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; font-weight: 700; font-size: 15px; }
.pupline > svg { flex: none; }
.pupline > span { flex: 1 1 12em; min-width: 0; }
.pupline button.smallbtn { margin: 0; }
.choices { display: flex; flex-direction: column; gap: 10px; }
button.choice { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 14px; background: var(--surface); color: var(--text); border: 2px solid var(--control); border-radius: 12px; text-align: left; font: inherit; }
button.choice.on { border-color: var(--accent); background: var(--accent-soft); }
.choicewords { display: flex; flex-direction: column; gap: 2px; }
/* Line-up step (step 1 of 3): an explain card, a live camera with a
   crosshair, the own capture location pulsing (others faded), a preview
   (eye, dotted line, view wedge) and one bottom panel with the action.
   The panel sits above Safari's address bar (--lu-lift); a Home Screen
   app has no bar. */
.viewer { --lu-lift: 40px; }
@media (display-mode: standalone) { .viewer { --lu-lift: 0px; } }
.lu-scrim { position: absolute; inset: 0; z-index: 5; display: flex; align-items: flex-start; justify-content: center; padding: 12px 12px calc(12px + var(--lu-lift) + env(safe-area-inset-bottom)); background: rgba(18, 20, 24, 0.72); overflow: auto; }
.lu-card { position: relative; max-width: 34rem; display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 14px 16px; border-radius: 16px; border: 2px solid #FFFFFF; background: var(--surface); color: var(--text); }
.lu-step { margin: 0 44px 0 0; font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.lu-card h2 { margin: 0 44px 0 0; font-size: 21px; line-height: 1.25; }
.lu-card .lu-x { position: absolute; top: 8px; right: 8px; }
.lu-card .lu-list { font-size: 16px; gap: 4px; }
.lu-card button.lu-go { margin-top: 4px; }
.lu-why { margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--accent-soft); font-size: 16px; line-height: 1.45; }
.lu-list { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; font-size: 17px; line-height: 1.5; }
.lu-panel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px calc(14px + var(--lu-lift) + env(safe-area-inset-bottom)); background: var(--surface); color: var(--text); border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.3); }
.lu-panel .lu-x { position: absolute; top: 8px; right: 8px; }
.lu-title { margin: 0 44px 0 0; font-size: 19px; font-weight: 800; }
.lu-sub { margin: 0; font-size: 17px; line-height: 1.45; color: var(--muted); }
.lu-panel .lu-list { font-size: 16px; }
button.lu-go { margin: 0; min-height: 60px; border-radius: 12px; border: 3px solid #000000; background: #FFD23F; color: #000000; font-size: 20px; font-weight: 800; }
button.lu-again { align-self: center; width: auto; margin: 0; min-height: 44px; padding: 0 18px; border-radius: 10px; border: 2px solid var(--control); background: transparent; color: var(--text); font-size: 16px; font-weight: 600; }
.lu-warn { display: flex; gap: 8px; align-items: flex-start; margin-right: 44px; padding: 8px 10px; border-radius: 10px; border: 2px solid #B45309; background: #FFF7E6; color: #7A3A00; font-weight: 700; line-height: 1.4; }
@media (prefers-color-scheme: dark) { .lu-warn { border-color: #FFD23F; background: rgba(0, 0, 0, 0.6); color: #FFD23F; } }
.lu-warn svg { flex: none; margin-top: 2px; }
.lu-cam { position: absolute; top: 10px; right: 10px; z-index: 4; width: 96px; height: 128px; border-radius: 12px; border: 3px solid #FFFFFF; overflow: hidden; background: #000000; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); }
.lu-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.lu-cross { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; transform: translate(-50%, -50%); }
.lu-camlabel { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 6px; background: rgba(0, 0, 0, 0.65); color: #FFFFFF; font-size: 12px; font-weight: 700; text-align: center; }
.lu-svg { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; }
.vpins.lu-on > * { opacity: 0.3; }
.vpins.lu-on > .lu-me { opacity: 1; animation: lu-pulse 1.3s ease-in-out infinite; }
@keyframes lu-pulse { 50% { filter: drop-shadow(0 0 10px #FFD23F) drop-shadow(0 0 4px #FFD23F); } }
@media (prefers-reduced-motion: reduce) { .vpins.lu-on > .lu-me { animation: none; filter: drop-shadow(0 0 6px #FFD23F); } }

/* Help: a popup over the whole page, with an X (and Esc) to close.
   Styled after the IAPViewer documentation (as the main app's Help):
   system font, its type scale and colours, section cards with a
   one-line summary, and callouts (icon + label + edge). Sections fold
   open one at a time. */
#more {
	--doc-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--doc-ink: #161A1E; --doc-body: #3A4048; --doc-muted: #697280;
	--doc-page: #FFFFFF; --doc-surface: #F6F8FB; --doc-surface-2: #FBFCFE; --doc-border: #E4E7EC; --doc-soft: #EEF1F5;
	--tip-wash: #ECFDF3; --tip-edge: #12996A; --tip-ink: #0F7A54;
	--note-wash: #FFF8E6; --note-edge: #D99000; --note-ink: #875600;
	--warn-wash: #FDEEEE; --warn-edge: #D0453F; --warn-ink: #9B2C27;
	--doc-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05), 0 2px 8px rgba(16, 24, 40, 0.06);
}
@media (prefers-color-scheme: dark) {
	#more {
		--doc-ink: #F2F4F7; --doc-body: #C6CCD4; --doc-muted: #939DAA;
		--doc-page: #101317; --doc-surface: #181D24; --doc-surface-2: #1D232B; --doc-border: #2B333D; --doc-soft: #232A33;
		--tip-wash: rgba(18, 153, 106, 0.12); --tip-edge: #1FB583; --tip-ink: #54D6A5;
		--note-wash: rgba(217, 144, 0, 0.12); --note-edge: #E6A23C; --note-ink: #ECB45C;
		--warn-wash: rgba(208, 69, 63, 0.12); --warn-edge: #E0655F; --warn-ink: #F2938E;
		--doc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.30);
	}
}
#more:not([hidden]) { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; background: var(--doc-page); color: var(--doc-body); font-family: var(--doc-font); }
body.helpopen { overflow: hidden; }
.helptop { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(10px + env(safe-area-inset-top)) 12px 10px 18px; background: var(--doc-page); border-bottom: 1px solid var(--doc-border); }
.helptop h1 { margin: 0; color: var(--doc-ink); font-size: 1.75rem; font-weight: 750; letter-spacing: -0.02em; }
.helpbody { flex: 1; overflow: auto; padding: 16px 14px calc(40px + env(safe-area-inset-bottom)); font-size: 17px; line-height: 1.7; }
.helpbody > * { max-width: 40rem; margin-left: auto; margin-right: auto; }
.helpsec { margin-bottom: 12px; border: 1px solid var(--doc-border); border-radius: 14px; background: var(--doc-surface-2); box-shadow: var(--doc-shadow-sm); scroll-margin-top: 8px; }
.helpsec summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 12px 14px 12px 16px; cursor: pointer; list-style: none; }
.helpsec summary::-webkit-details-marker { display: none; }
.helpsum { display: flex; flex-direction: column; gap: 2px; }
.helpsum b { color: var(--doc-ink); font-size: 1.06rem; line-height: 1.35; }
.helpsum span { color: var(--doc-muted); font-size: 0.88rem; line-height: 1.45; }
.helpsec summary::after { content: '+'; flex: none; width: 34px; height: 34px; border: 2px solid var(--doc-border); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--doc-ink); font-size: 22px; line-height: 1; }
.helpsec[open] summary::after { content: '−'; }
.helpsec[open] summary { border-bottom: 1px solid var(--doc-soft); }
.helpin { padding: 14px 16px 6px; }
.helpin p { margin: 0 0 16px; }
.helpin h3 { margin: 24px 0 8px; color: var(--doc-ink); font-size: 1.18rem; font-weight: 650; line-height: 1.3; }
.helpin h3:first-child { margin-top: 0; }
.helpin ul, .helpin ol, .helpsec.flat ul { margin: 0 0 18px; padding-left: 24px; }
.helpin li, .helpsec.flat li { margin: 4px 0 8px; }
.helpsec.flat { padding: 16px; }
.helpsec.flat h2 { color: var(--doc-ink); font-size: 1.18rem; font-weight: 650; }
.callout { display: flex; gap: 12px; margin: 18px 0; padding: 14px 16px; border: 1px solid var(--doc-soft); border-left-width: 4px; border-radius: 10px; }
.callout p { margin: 0; }
.callout-ic { flex: none; display: inline-flex; margin-top: 4px; }
.callout.tip { background: var(--tip-wash); border-left-color: var(--tip-edge); }
.callout.tip .callout-ic, .callout.tip strong { color: var(--tip-ink); }
.callout.notice { background: var(--note-wash); border-left-color: var(--note-edge); }
.callout.notice .callout-ic, .callout.notice strong { color: var(--note-ink); }
.callout.important { background: var(--warn-wash); border-left-color: var(--warn-edge); border-left-width: 5px; }
.callout.important .callout-ic, .callout.important strong { color: var(--warn-ink); }

/* Help pictures: still copies of the real controls. */
.hm { margin: 4px 0 16px; padding: 12px; border: 1px dashed var(--control); border-radius: 12px; background: var(--bg); pointer-events: none; }
.hm.hm-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.hm-frame { position: relative; flex: none; width: 100%; max-width: 260px; height: 300px; margin: 0 auto; border: 3px solid var(--text); border-radius: 18px; overflow: hidden; background: #F4F5F7; }
.hm-row .hm-frame { width: 220px; margin: 0; }
.hm-frame.hm-pad { display: flex; align-items: center; padding: 8px; background: rgba(18, 20, 24, 0.72); }
.hm-frame.hm-short { height: 200px; max-width: none; }
.hm-plan { position: absolute; inset: 0; width: 100%; height: 100%; }
.hm .lu-card { padding: 10px; gap: 6px; }
.hm .lu-card h2 { font-size: 16px; margin-right: 0; }
.hm .lu-step { font-size: 11px; margin-right: 0; }
.hm .lu-list { font-size: 13px; line-height: 1.4; }
.hm button.lu-go { min-height: 40px; font-size: 15px; }
.hm .lu-panel { padding: 8px 10px; gap: 6px; }
.hm .lu-title { margin: 0; font-size: 14px; line-height: 1.3; }
.hm .lu-cam { width: 72px; height: 96px; }
.hm .lu-cross { width: 40px; height: 40px; }
.hm-door { position: absolute; left: 30%; top: 22%; width: 40%; height: 70%; background: #6B4F35; border: 3px solid #C8B8A4; }
.hm-glow { filter: drop-shadow(0 0 8px #FFD23F) drop-shadow(0 0 3px #FFD23F); }
.hm .pin { z-index: 1; }
.hm .npin { z-index: 1; }
.hm-pins { display: flex; flex-direction: column; gap: 10px; }
.hm-pinrow { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; line-height: 1.4; }
.hm-pinbox { position: relative; flex: none; width: 64px; height: 44px; }
.hm-pinbox .pin { left: 20px; top: 50%; transform: translate(-50%, -50%); }
.hm .pop { position: relative; width: 100%; max-width: 300px; margin: 0 auto; padding-top: 8px; }
.hm .pophead { padding: 0 8px 0 10px; }
.hm .tmenu { position: relative; right: auto; top: auto; max-width: 260px; }
.hm .strip { border: 1px solid var(--line); border-radius: 10px; }
.hm .hm-upstate + .hm-upstate { margin-top: 10px; }
.hm-cap { margin: 0 0 2px; font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.hm .pcard > button.row { margin: 0; }
.hm-rec { background: linear-gradient(160deg, #3A3226, #15120D 60%, #2B2E35); color: #fff; height: 380px; max-width: 300px; }
.hm-rec .rec-top { padding: 8px 10px; }
.hm-rec .rec-top h2 { font-size: 15px; margin-right: 0; }
.hm-rec .rec-steps { font-size: 11px; margin: 0 0 4px; }
.hm-rec .rec-ring { width: 150px; top: 46%; }
.hm-rec .rec-tilt { right: 4px; width: 44px; top: 30%; bottom: 40%; }
.hm-rec .rec-bottom { bottom: 0; padding: 8px 10px 10px; gap: 6px; }
.hm-rec .rec-msg { font-size: 15px; }
.hm-rec button.rec-go { min-height: 44px; font-size: 17px; }
.hm-key { margin: 10px 0 0; padding-left: 22px; font-size: 15px; }
.hm-offrow { display: flex; flex-wrap: wrap; gap: 20px; }
.hm-offitem { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.hm-offitem .offbtn { position: relative; top: auto; right: auto; }
.hm-fresnel { display: block; width: 100%; height: auto; font: 600 12px Inter, system-ui, sans-serif; fill: currentColor; }
.hm-fresnel .fz-zone { fill: rgba(36, 87, 214, 0.14); stroke: var(--accent); stroke-width: 2; stroke-dasharray: 7 5; }
.hm-fresnel .fz-los { stroke: currentColor; stroke-width: 2.5; }
.hm-fresnel .fz-shelf { fill: #8A4B0F; stroke: currentColor; stroke-width: 1.5; }
.hm-fresnel .fz-dev { fill: var(--surface); stroke: currentColor; stroke-width: 2.5; }
.hm-fresnel .fz-ant { stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }
.hm-fresnel .fz-zl { fill: var(--accent); font-weight: 700; }

/* "Have a code?" card: last on the projects page. */
#code-card h2 { margin-bottom: 10px; }

/* Code expired: still uploading (icon + words, not colour alone) */
.latedlg { max-width: 420px; width: calc(100% - 32px); background: var(--surface); color: var(--text); border: 2px solid var(--danger); border-radius: 14px; padding: 20px; }
.latedlg::backdrop { background: rgba(0, 0, 0, 0.5); }
.latedlg p { margin: 0 0 10px; font-size: 17px; line-height: 1.5; }
.lateh { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 21px; }

/* DEV copy marker (src/index.js): only on the DEV copy. The word DEV in a
   tag shape and the words beside it carry the meaning, not the colour.
   Black on yellow in both themes (about 14:1). */
.copy-band { flex: none; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 6px 12px; background: #FFD400; color: #000; border-bottom: 3px solid #000; font-weight: 600; font-size: 14px; line-height: 1.4; text-align: center; }
.copy-tag { padding: 0 6px; border-radius: 4px; background: #000; color: #FFD400; letter-spacing: 0.08em; }

/* Photos (FR-003): the preview of a photo just taken, and a photo pin's
   list of this phone's photos (thumbnail, words, bin). */
.phprev { display: block; width: 100%; max-height: 50vh; object-fit: contain; margin: 0 0 12px; border-radius: 10px; background: #000; }
.phrow { display: flex; gap: 8px; margin-top: 8px; }
.phrow button { flex: 1; margin: 0; }
.phlist { margin: 6px 0 0; }
.phlist > p { margin: 4px 0; font-size: 13px; }
.phitem { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.phthumb { flex: none; width: 56px; height: 42px; border-radius: 6px; object-fit: cover; background: var(--bg); }
.phthumb.none { display: inline-flex; align-items: center; justify-content: center; color: var(--muted); border: 1px solid var(--line); }
.phwords { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.phwords b { font-size: 15px; overflow-wrap: anywhere; }