/* Layout: iOS Settings-style grouped lists in one centered column, translucent nav on top, fixed submit bar at the bottom */
:root {
  --bg: #F2F2F7;
  --card: #FFFFFF;
  --label: #000000;
  --label2: rgba(60, 60, 67, .6);
  --label3: rgba(60, 60, 67, .3);
  --sep: rgba(60, 60, 67, .29);
  --fill: rgba(118, 118, 128, .12);
  --seg-on: #FFFFFF;
  --bar: rgba(249, 249, 249, .82);
  --blue: #007AFF;
  --green: #34C759;
  --red: #FF3B30;
  --orange: #FF9500;
  --red-bg: rgba(255, 59, 48, .1);
  --green-bg: rgba(52, 199, 89, .15);
  --orange-bg: rgba(255, 149, 0, .15);
  --shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 3px 1px rgba(0, 0, 0, .04);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000; --card: #1C1C1E; --label: #FFFFFF; --label2: rgba(235, 235, 245, .6); --label3: rgba(235, 235, 245, .3);
    --sep: rgba(84, 84, 88, .65); --fill: rgba(118, 118, 128, .24); --seg-on: #636366; --bar: rgba(22, 22, 24, .82);
    --blue: #0A84FF; --green: #30D158; --red: #FF453A; --orange: #FF9F0A;
    --red-bg: rgba(255, 69, 58, .18); --green-bg: rgba(48, 209, 88, .18); --orange-bg: rgba(255, 159, 10, .18);
    --shadow: 0 3px 8px rgba(0, 0, 0, .3); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #000000; --card: #1C1C1E; --label: #FFFFFF; --label2: rgba(235, 235, 245, .6); --label3: rgba(235, 235, 245, .3);
  --sep: rgba(84, 84, 88, .65); --fill: rgba(118, 118, 128, .24); --seg-on: #636366; --bar: rgba(22, 22, 24, .82);
  --blue: #0A84FF; --green: #30D158; --red: #FF453A; --orange: #FF9F0A;
  --red-bg: rgba(255, 69, 58, .18); --green-bg: rgba(48, 209, 88, .18); --orange-bg: rgba(255, 159, 10, .18);
  --shadow: 0 3px 8px rgba(0, 0, 0, .3); color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--bg); color: var(--label); font: 400 17px/1.35 var(--font); letter-spacing: -.01em;
  padding-left: var(--gutter); padding-right: var(--gutter-r) }
[hidden] { display: none !important }
.vh { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 8px }

/* Nav bar */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--bar) }
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 9; margin: 0 calc(-1 * var(--gutter-r)) 0 calc(-1 * var(--gutter));
  padding: 10px var(--gutter-r) 10px var(--gutter); background: var(--bar); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: .5px solid transparent; transition: border-color .2s }
.nav.scrolled { border-bottom-color: var(--sep) }
.nav-in { max-width: 680px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px }
.nav-title { font-weight: 600; opacity: 0; transition: opacity .2s }
.nav.scrolled .nav-title { opacity: 1 }
.pill { font-size: 13px; font-weight: 600; padding: 5px 10px; border-radius: 999px; white-space: nowrap }
.pill-ok { background: var(--green-bg); color: var(--green) }
.pill-warn { background: var(--orange-bg); color: var(--orange) }
.pill-bad { background: var(--red); color: #fff }

/* Page */
.page { max-width: 680px; margin: 0 auto; padding-block: 4px calc(120px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 24px }
.hero { padding-top: 4px }
.hero h1 { font: 700 34px/1.12 var(--font-display); letter-spacing: .01em; margin: 2px 0 0 }
.eyebrow { margin: 0; color: var(--label2); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em }
.who { margin: 4px 0 0; color: var(--label2); font-size: 15px }
.who:empty { display: none }
.demo { background: var(--orange-bg); color: var(--label); border-radius: 12px; padding: 10px 14px; font-size: 15px }

.role-hint { background: var(--card); border-radius: 12px; padding: 14px 16px; font-size: 15px; color: var(--label2); line-height: 1.45 }
.role-hint strong { color: var(--label) }
.role-hint p { margin: 0 }
.role-hint p + p { margin-top: 6px }
.done-status { width: 100%; display: flex; flex-direction: column; gap: 8px }
.part { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--card); border-radius: 12px; padding: 12px 16px; text-align: left }
.part b { font-weight: 600 }
.part span { font-size: 15px; color: var(--label2) }
.part.in span { color: var(--green); font-weight: 600 }
.part.wait span { color: var(--orange); font-weight: 600 }

.oos { display: flex; gap: 12px; align-items: flex-start; background: var(--red); color: #fff; border-radius: 14px; padding: 14px 16px }
.oos svg { width: 26px; height: 26px; flex: none }
.oos strong { display: block; font-size: 17px }
.oos span, .oos em { display: block; font-size: 15px; font-style: normal; opacity: .95 }
.oos em { margin-top: 4px; font-weight: 600 }

#sections { display: flex; flex-direction: column; gap: 24px }

/* Grouped lists */
.group-wrap { display: flex; flex-direction: column; gap: 7px; scroll-margin-top: 70px }
.group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 16px }
.group-head .group-title { padding: 0 }
.group-title { margin: 0; padding: 0 16px; font-size: 13px; font-weight: 400; text-transform: uppercase; letter-spacing: .02em; color: var(--label2) }
.group-meta { font-size: 13px; color: var(--label2); font-variant-numeric: tabular-nums }
.group-meta.done { color: var(--green); font-weight: 600 }
.group-foot { margin: 0; padding: 0 16px; font-size: 13px; color: var(--label2) }
.group { background: var(--card); border-radius: 12px; overflow: hidden }
.group-pad { padding: 12px }
.text-btn { background: none; border: 0; color: var(--blue); font-size: 15px; font-weight: 400; padding: 4px 0; cursor: pointer; text-transform: none; letter-spacing: 0 }

.row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 50px; padding: 10px 16px; background: var(--card); width: 100%; text-align: left; border: 0; cursor: default }
.row + .row::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; border-top: .5px solid var(--sep) }
.row-stack { flex-direction: column; align-items: stretch; gap: 10px; padding-block: 12px }
.row-label { flex: 1; min-width: 0 }
.row-input { flex: 1; min-width: 0; text-align: right; border: 0; background: none; padding: 4px 0; color: var(--label); outline: none }
.row-input::placeholder, textarea::placeholder, .field::placeholder { color: var(--label3) }
.row-input.num { font-variant-numeric: tabular-nums }
.row-select { border: 0; background: none; color: var(--label2); text-align: right; padding: 4px 22px 4px 0; -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 9px center, right 4px center; background-size: 5px 5px; background-repeat: no-repeat; max-width: 60% }
.row-select.set { color: var(--label) }
textarea, .field { width: 100%; border: 0; border-radius: 10px; background: var(--fill); padding: 10px 12px; resize: vertical; color: var(--label); outline: none }
.field { margin-top: 12px }
.invalid { animation: shake .35s }
.invalid .row-label, .invalid.group-wrap .group-title { color: var(--red) }
@keyframes shake { 25% { transform: translateX(-4px) } 75% { transform: translateX(4px) } }

/* Segmented control */
.seg { display: flex; background: var(--fill); border-radius: 9px; padding: 2px; gap: 2px }
.seg button { flex: 1 1 0; min-width: 0; min-height: 36px; border: 0; background: none; border-radius: 7px; font-size: 15px; font-weight: 500; cursor: pointer; padding: 4px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.seg button[aria-checked="true"] { background: var(--seg-on); box-shadow: var(--shadow); font-weight: 600 }
.seg button:disabled { opacity: .45; cursor: not-allowed }
.seg-lg button { min-height: 40px; font-size: 16px }
.seg button[aria-checked="true"][data-tone="good"] { color: var(--green) }
.seg button[aria-checked="true"][data-tone="mid"] { color: var(--orange) }
.seg button[aria-checked="true"][data-tone="bad"] { color: var(--red) }

/* Photos */
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px }
.photos-sm { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) }
.photo { position: relative; aspect-ratio: 4 / 3; max-width: 100%; border-radius: 10px; background: var(--fill); border: 0; padding: 8px; cursor: pointer; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; color: var(--label) }
.photo svg.cam { width: 28px; height: 28px; color: var(--blue) }
.photo .p-title { font-size: 15px; font-weight: 600; line-height: 1.15 }
.photo .p-hint { font-size: 12px; color: var(--label2); line-height: 1.2 }
.photo.optional { background: none; border: 1.5px dashed var(--sep) }
.photo.optional svg.cam { color: var(--label2) }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.photo .badge { position: absolute; left: 6px; bottom: 6px; right: 6px; display: flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 8px;
  background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; font-size: 12px; font-weight: 600; text-align: left }
.photo .badge i { width: 14px; height: 14px; border-radius: 50%; flex: none; display: grid; place-items: center; font-style: normal; font-size: 10px }
.photo.s-done .badge i { background: var(--green) }
.photo.s-error .badge i { background: var(--red) }
.photo.s-uploading .badge i { border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: spin .8s linear infinite }
.photo:disabled { cursor: not-allowed; opacity: .5 }
@keyframes spin { to { transform: rotate(360deg) } }

/* Checklist items */
.item { cursor: pointer }
.item .mark { width: 26px; height: 26px; flex: none }
.item .mark circle { fill: var(--green) }
.item .mark path { stroke: #fff; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round }
.item.prob .mark circle { fill: var(--red) }
.item .crit { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--red); vertical-align: 1px }
.item .state { font-size: 15px; color: var(--label2); white-space: nowrap }
.item.prob .state { color: var(--red); font-weight: 600 }
.item.prob { background: var(--red-bg) }
.note-row { padding: 0 16px 12px; background: var(--red-bg) }
.note-row textarea { background: var(--card) }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px }
.chips button { border: 0; background: var(--fill); border-radius: 999px; padding: 8px 14px; min-height: 38px; font-size: 15px; cursor: pointer }
.chips button[aria-pressed="true"] { background: var(--blue); color: #fff; font-weight: 600 }

/* Switch */
.switch { -webkit-appearance: none; appearance: none; flex: none; width: 51px; height: 31px; border-radius: 999px; background: var(--fill); position: relative; cursor: pointer; transition: background .2s; margin: 0 }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .16); transition: transform .2s }
.switch:checked { background: var(--green) }
.switch:checked::after { transform: translateX(20px) }

.link-danger { align-self: center; background: none; border: 0; color: var(--red); font-size: 15px; padding: 8px 16px; cursor: pointer }

/* Bottom bar */
.bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 8; background: var(--bar); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-top: .5px solid var(--sep); padding: 10px var(--gutter-r) calc(10px + env(safe-area-inset-bottom, 0px)) var(--gutter) }
.bottom-in { max-width: 680px; margin: 0 auto }
.btn-primary, .btn-secondary { width: 100%; min-height: 52px; border: 0; border-radius: 14px; font-size: 17px; font-weight: 600; cursor: pointer }
.btn-primary { background: var(--blue); color: #fff }
.btn-primary:disabled { opacity: .5; cursor: progress }
.btn-secondary { background: var(--fill); color: var(--blue) }

/* Sheet */
.sheet-back { position: fixed; inset: 0; z-index: 20; background: rgba(0, 0, 0, .4); display: flex; align-items: flex-end; justify-content: center }
.sheet { width: 100%; max-width: 560px; max-height: 80%; overflow: auto; background: var(--card); border-radius: 16px 16px 0 0;
  padding: 8px max(20px, env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: 10px }
.sheet-grip { width: 36px; height: 5px; border-radius: 3px; background: var(--label3); align-self: center; margin-bottom: 8px }
.sheet h2 { margin: 0; font: 700 22px var(--font-display) }
.sheet-sub { margin: 0; color: var(--label2) }
.sheet-list { margin: 0 0 8px; padding: 0; list-style: none; display: flex; flex-direction: column }
.sheet-list button { width: 100%; text-align: left; background: none; border: 0; border-bottom: .5px solid var(--sep); padding: 12px 0; cursor: pointer; display: flex; gap: 10px; align-items: center }
.sheet-list button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex: none }

/* Done screen */
.done { position: fixed; inset: 0; z-index: 30; background: var(--bg); overflow: auto;
  padding: calc(40px + env(safe-area-inset-top, 0px)) var(--gutter-r) calc(24px + env(safe-area-inset-bottom, 0px)) var(--gutter) }
.done-in { max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center }
.done-icon svg { width: 84px; height: 84px }
.done-icon circle { fill: var(--green) }
.done-icon.bad circle { fill: var(--red) }
.done-icon path { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round }
.done h2 { margin: 0; font: 700 28px var(--font-display) }
.done p { margin: 0; color: var(--label2) }
.done-summary { width: 100%; text-align: left }
.done-summary .row-label { color: var(--label2) }
.done-summary .val { text-align: right; min-width: 0; overflow-wrap: anywhere }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important } }
@media (max-width: 420px) { .photos { grid-template-columns: repeat(2, minmax(0, 1fr)) } .seg button { font-size: 14px } }