/* ZoneSafe Plus — application stylesheet
 * Sections: design tokens & base → layout & topbar → views (home/jobs/sources) →
 * builder → review & reviewer → admin → geometry sketch → responsive & print →
 * mobile-first layer (appended last; owns small-screen ergonomics). */

:root {
  /* ── Field Mode tokens (docs/brand.md) ── */
  --action-amber:#ffb300;
  --action-amber-pressed:#d89a00;
  --ink:#17181c;
  --sub-text:#55585f;
  --go-green:#1a7f45;
  --go-green-pressed:#126334;
  --go-green-tint:#e3f3e9;
  --go-green-border:#a9d9bd;
  --stop-red:#d8402a;
  --stop-red-tint:#fbe8e4;
  --stop-red-border:#ecb3a8;
  --stop-red-text:#b23320;
  --waiting-blue:#1663c7;
  --waiting-blue-tint:#e6eef9;
  --waiting-blue-border:#b9cdf0;
  --caution-tint:#fff4d6;
  --caution-border:#f0c34d;
  --caution-text:#8a6400;
  --page-bg:#e7e5df;
  --surface:#f4f3ef;
  --card:#ffffff;
  --border-card:#e0ded6;
  --border-choice:#cfcdc5;
  --border-input:#b9b7ae;
  --radius-card:14px;
  /* ── Legacy aliases → Field Mode values (single family, no mono/serif) ── */
  --ink-2:#17181c;
  --muted:#55585f;
  --paper:#f4f3ef;
  --line:#e0ded6;
  --amber:#ffb300;
  --amber-light:#fff4d6;
  --teal:#1a7f45;
  --teal-light:#e3f3e9;
  --red:#d8402a;
  --red-light:#fbe8e4;
  --green:#1a7f45;
  --mono:'Hanken Grotesk',system-ui,sans-serif;
  --sans:'Hanken Grotesk',system-ui,sans-serif;
  --shadow:0 16px 40px #17181c14
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  background:var(--page-bg);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased
}

button,input,textarea,select {
  font:inherit
}

button {
  cursor:pointer
}

.app-shell {
  max-width:1200px;
  min-height:100vh;
  margin:0 auto;
  background:var(--paper);
  position:relative;
  box-shadow:0 0 80px #18302b17
}

.topbar {
  height:76px;
  background:var(--ink);
  color:#fff;
  padding:0 5vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  z-index:20
}

.brand-lockup {
  display:flex;
  align-items:center;
  gap:11px
}

.brand-button {
  border:0;
  background:none;
  color:inherit;
  padding:0;
  text-align:left
}

.brand-mark {
  display:flex;
  gap:3px;
  align-items:flex-end;
  height:25px
}

.brand-mark i {
  display:block;
  background:var(--amber);
  width:5px
}

.brand-mark i:nth-child(1) {
  height:12px
}

.brand-mark i:nth-child(2) {
  height:19px
}

.brand-mark i:nth-child(3) {
  height:25px
}

.brand-name {
  display:block;
  letter-spacing:.08em;
  font-size:18px;
  font-weight:700
}

.brand-name span {
  color:var(--amber)
}

.brand-kicker,.eyebrow,.mono {
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.08em
}

.brand-kicker {
  display:block;
  opacity:.55;
  margin-top:2px;
  text-transform:uppercase
}

.topbar-right {
  display:flex;
  align-items:center;
  gap:18px;
  position:relative
}

.online-dot {
  font:700 13px var(--sans);
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#a7c7bc
}

.online-dot i,.save-state i {
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#73c27c;
  margin-right:5px;
  box-shadow:0 0 0 3px #73c27c24
}

.avatar {
  border:1px solid #ffffff35;
  background:#ffffff12;
  color:#fff;
  border-radius:50%;
  height:34px;
  width:34px;
  font:700 13px var(--sans)
}

.avatar.large {
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  background:#e7f0eb;
  color:var(--teal);
  border:0
}

.profile-popover {
  position:absolute;
  right:0;
  top:51px;
  width:252px;
  background:#fff;
  color:var(--ink);
  box-shadow:var(--shadow);
  border:1px solid var(--line);
  padding:10px;
  z-index:30
}

.profile-head {
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px
}

.profile-head strong,.profile-head small {
  display:block
}

.profile-head strong {
  font-size:13px
}

.profile-head small {
  font:700 13px var(--sans);
  color:var(--muted);
  margin-top:3px
}

.profile-rule {
  height:1px;
  background:var(--line);
  margin:8px 0
}

.profile-popover button {
  width:100%;
  display:flex;
  align-items:center;
  gap:9px;
  background:none;
  border:0;
  color:var(--ink);
  padding:10px 8px;
  text-align:left;
  font-size:14px
}

.profile-popover button:hover {
  background:#eef4f0
}

.profile-popover button b {
  margin-left:auto;
  color:var(--teal);
  font:700 13px var(--sans)
}

.menu-icon {
  color:var(--teal);
  width:17px
}

.profile-popover .profile-muted {
  color:#8b9793;
  font:700 13px var(--sans);
  text-transform:uppercase;
  letter-spacing:.03em
}

.view {
  min-height:calc(100vh - 76px)
}

[hidden] {
  display:none!important
}

main {
  padding-bottom:104px
}

.eyebrow {
  color:var(--teal);
  font-weight:500;
  text-transform:uppercase
}

.eyebrow span {
  color:#a8b4b1
}

.review-title em {
  font-family:var(--sans);
  font-weight:400;
  color:var(--teal);
  letter-spacing:-.06em
}

.primary-cta,.step-next,.submit-button {
  background:var(--ink);
  color:#fff;
  border:0;
  padding:16px 18px;
  font:600 14px var(--sans);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  transition:transform .2s,background .2s
}

.primary-cta:hover,.step-next:hover,.submit-button:hover {
  transform:translateY(-2px);
  background:var(--teal)
}

.primary-cta:focus-visible,.step-next:focus-visible,.submit-button:focus-visible,.choice:focus-visible,.filter:focus-visible,.text-button:focus-visible,.secondary-button:focus-visible {
  outline:3px solid #efad4388;
  outline-offset:3px
}

.plus {
  color:var(--amber);
  font-size:22px;
  font-weight:400;
  line-height:0
}

.arrow {
  color:var(--amber);
  font-size:18px
}

.text-button {
  border:0;
  background:none;
  padding:8px 0;
  color:var(--teal);
  font:700 13px var(--sans);
  text-transform:uppercase;
  letter-spacing:.03em
}

.text-button span {
  font-size:15px;
  color:var(--amber)
}


.bottom-nav {
  height:82px;
  position:fixed;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:min(1200px,100%);
  background:#fff;
  box-shadow:0 -8px 30px #15362b10;
  display:flex;
  justify-content:center;
  gap:clamp(20px,8vw,100px);
  z-index:10;
  padding-top:10px
}

.nav-item {
  position:relative;
  min-width:55px;
  background:none;
  border:0;
  color:#99a7a8;
  font:inherit
}

.nav-item span {
  display:block;
  font-size:22px;
  height:28px
}

.nav-item small {
  font:700 13px var(--sans);
  text-transform:uppercase;
  letter-spacing:.03em
}

.nav-item.active {
  color:var(--teal)
}

.nav-badge {
  position:absolute;
  top:-2px;
  right:0;
  background:var(--red);
  color:#fff;
  border-radius:10px;
  padding:2px 5px;
  font:700 13px var(--sans)
}

.page-section,.builder-section,.review-section {
  max-width:760px;
  margin:auto;
  padding:58px 8vw
}

.section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  margin-bottom:25px;
  gap:20px
}

.section-heading h2,.builder-header h2 {
  font-size:42px;
  letter-spacing:-.06em;
  line-height:1;
  margin:8px 0 0
}

.section-subtitle {
  color:#74837e;
  font-size:13px;
  margin:12px 0 0;
  line-height:1.4
}

.square-button,.more-button,.icon-button {
  width:42px;
  height:42px;
  border:1px solid var(--line);
  background:#fff;
  font-size:24px;
  color:var(--teal);
  cursor:pointer
}

.square-button:hover,.icon-button:hover {
  border-color:var(--teal)
}

.filter-row {
  display:flex;
  gap:7px;
  overflow-x:auto;
  padding-bottom:4px;
  margin-bottom:18px
}

.filter {
  border:1px solid var(--line);
  background:transparent;
  color:#71807b;
  padding:8px 11px;
  font:700 13px var(--sans);
  text-transform:uppercase;
  white-space:nowrap
}

.filter.active {
  background:var(--teal);
  border-color:var(--teal);
  color:#fff
}

.job-list {
  display:grid;
  gap:13px
}

.job-card {
  border:1px solid var(--line);
  background:#fff;
  padding:20px;
  text-align:left;
  cursor:pointer;
  transition:box-shadow .2s,transform .2s;
  width:100%;
  color:var(--ink)
}

.job-card:hover {
  transform:translateY(-2px);
  box-shadow:12px 18px 28px #12342a0d
}

.job-card-top,.review-top {
  display:flex;
  justify-content:space-between;
  align-items:center
}

.status-pill {
  font:700 13px var(--sans);
  letter-spacing:.08em;
  padding:6px 8px;
  display:inline-block
}

.status-pill.in_progress {
  color:#75827e;
  background:#edf0ed
}

.status-pill.needs_info {
  color:#a26014;
  background:var(--amber-light)
}

.status-pill.ready {
  color:var(--teal);
  background:#dceee8
}

.status-pill.couldnt_build {
  color:#a04430;
  background:#ffe6df
}

.status-pill.generating {
  color:#5f658c;
  background:#e9e9fa
}

.mono {
  color:#879594
}

.job-card h3 {
  font-size:18px;
  letter-spacing:-.03em;
  margin:18px 0 7px
}

.job-card p {
  font:700 13px var(--sans);
  color:#82908e;
  margin:0
}

.job-card p span {
  color:var(--amber)
}

.job-progress {
  height:3px;
  background:#edf0ed;
  margin-top:22px
}

.job-progress span {
  display:block;
  height:100%;
  background:var(--amber)
}

.job-card-bottom {
  font:700 13px var(--sans);
  color:#7d8c89;
  margin-top:11px;
  display:flex;
  justify-content:space-between;
  gap:10px
}

.job-card-bottom b {
  color:var(--teal);
  font-size:15px
}

.issue-count {
  color:var(--red)
}

.empty-state {
  border:1px dashed #bdc9c5;
  padding:34px 20px;
  text-align:center;
  color:#7a8987;
  margin-top:18px
}

.empty-mark {
  display:block;
  color:var(--amber);
  font-size:30px
}

.empty-state strong {
  display:block;
  color:var(--ink);
  font-size:15px;
  margin-top:8px
}

.empty-state p {
  font-size:14px;
  margin:8px 0
}

.source-heading {
  margin-bottom:16px
}

.mini-source>span {
  width:35px;
  height:35px;
  display:grid;
  place-items:center;
  background:var(--ink);
  color:var(--amber);
  font:700 13px var(--sans);
  flex:none
}

.mini-source>span.fl {
  background:var(--teal);
  color:#fff
}

.source-footnote {
  border-left:3px solid var(--amber);
  padding:10px 0 10px 13px;
  color:#889592;
  font-size:13px;
  line-height:1.5;
  margin-top:24px
}

.builder-header {
  display:flex;
  align-items:flex-start;
  gap:16px
}

.builder-header>div:nth-child(2) {
  flex:1
}

.back-button {
  border:0;
  background:none;
  color:var(--teal);
  font-size:25px;
  padding:0;
  cursor:pointer
}

.save-state {
  font:700 13px var(--sans);
  color:#8d9b96;
  text-transform:uppercase;
  padding-top:10px;
  white-space:nowrap
}

.step-indicator {
  display:flex;
  gap:6px;
  margin:28px 0 32px
}

.step-indicator span {
  height:3px;
  width:33%;
  background:#dbe1dd
}

.step-indicator span.active {
  background:var(--amber)
}

.step-lede {
  font-size:16px;
  line-height:1.5;
  color:#667674;
  margin:0 0 26px;
  max-width:600px
}

.photo-drop {
  height:190px;
  background:#fff;
  border:1px dashed #aebeb8;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:relative;
  cursor:pointer;
  text-align:center
}

.photo-drop input {
  display:none
}

.photo-drop strong {
  font-size:14px;
  margin-top:10px
}

.photo-drop small {
  font:700 13px var(--sans);
  color:#93a09c;
  margin-top:5px
}

.inline-error {
  background:var(--red-light);
  border:1px solid #edc1b5;
  color:#983e2d;
  padding:10px 12px;
  font-size:14px;
  line-height:1.4;
  margin-top:10px
}

.photo-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:9px;
  margin-top:9px
}

.photo-thumb {
  height:148px;
  background:#dbe5de center/cover no-repeat;
  position:relative;
  overflow:hidden
}

.photo-thumb:before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,#10233300 55%,#102333c2)
}

.photo-thumb .photo-meta {
  position:absolute;
  left:9px;
  right:9px;
  bottom:8px;
  display:flex;
  align-items:center;
  gap:6px;
  z-index:1
}

.photo-thumb select {
  min-width:0;
  flex:1;
  background:#fff;
  color:var(--ink);
  border:0;
  padding:6px 7px;
  font:700 13px var(--sans)
}

.photo-remove {
  width:26px;
  height:26px;
  border:0;
  background:#102333cc;
  color:#fff;
  border-radius:50%;
  font-size:17px;
  line-height:1
}

.photo-check {
  position:absolute;
  right:8px;
  top:8px;
  width:19px;
  height:19px;
  border-radius:50%;
  background:var(--teal);
  color:#fff;
  text-align:center;
  font-size:14px;
  line-height:19px
}

.location-card {
  display:flex;
  align-items:center;
  gap:12px;
  background:#e6eeea;
  padding:14px;
  margin-top:23px
}

.location-pin {
  color:var(--teal);
  font-size:25px
}

.location-card div:nth-child(2) {
  flex:1
}

.location-card label {
  display:block;
  font:700 13px var(--sans);
  color:#82908b
}

.location-card input {
  display:block;
  width:100%;
  background:transparent;
  border:0;
  border-bottom:1px solid #b8c9c1;
  padding:5px 0 3px;
  color:var(--ink);
  font-size:13px;
  outline:0
}

.location-card input:focus {
  border-color:var(--teal)
}

.location-card button {
  border:0;
  background:none;
  color:var(--teal);
  font:700 13px var(--sans);
  text-transform:uppercase;
  cursor:pointer
}

.capture-note {
  display:flex;
  gap:9px;
  align-items:flex-start;
  color:#84928e;
  margin-top:13px
}

.capture-note span {
  width:17px;
  height:17px;
  border:1px solid #a5b4ae;
  border-radius:50%;
  text-align:center;
  font:700 13px var(--sans);
  line-height:16px
}

.capture-note p {
  font:700 13px var(--sans);
  line-height:1.5;
  margin:0
}

.step-next {
  width:100%;
  margin-top:25px
}

.builder-step {
  display:none
}

.builder-step.active {
  display:block
}

.field-group {
  margin:22px 0
}

.field-group>label {
  font:700 13px var(--sans);
  color:#536966;
  display:block;
  margin-bottom:10px;
  text-transform:uppercase
}

.field-group>label span {
  color:#a4afaa;
  text-transform:none
}

.choice-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px
}

.choice {
  border:1px solid var(--line);
  background:#fff;
  padding:12px 13px;
  color:#526662;
  font:600 16px var(--sans);
  cursor:pointer;
  text-align:left
}

.choice:hover {
  border-color:#9db9ad
}

.choice.selected {
  border-color:var(--teal);
  box-shadow:inset 0 -3px var(--teal);
  color:var(--ink)
}

textarea {
  width:100%;
  min-height:85px;
  border:1px solid var(--line);
  padding:13px;
  background:#fff;
  font:600 16px var(--sans);
  resize:vertical;
  outline-color:var(--teal)
}

.secondary-button {
  border:1px solid var(--line);
  background:#fff;
  color:var(--teal);
  padding:15px 16px;
  font:600 13px var(--sans)
}

.secondary-button:hover {
  border-color:var(--teal)
}

.agent-working {
  background:var(--ink);
  color:#fff;
  padding:22px;
  display:flex;
  align-items:center;
  gap:17px
}

.agent-working .eyebrow {
  color:var(--amber)
}

.agent-working h3 {
  font-size:22px;
  letter-spacing:-.04em;
  margin:7px 0 5px
}

.agent-working p {
  font-size:14px;
  color:#a8bbb4;
  margin:0
}

.agent-orb {
  width:52px;
  height:52px;
  border:1px solid #70bcae;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  flex:none
}

.agent-orb span {
  width:4px;
  height:4px;
  background:var(--amber);
  border-radius:50%;
  animation:pulse 1s infinite alternate
}

.agent-orb span:nth-child(2) {
  animation-delay:.2s
}

.agent-orb span:nth-child(3) {
  animation-delay:.4s
}

@keyframes pulse {
  to {
    transform:translateY(-7px);
    opacity:.4
  }
}

.analysis-list {
  margin:18px 0
}

.analysis-row {
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:13px 0;
  border-bottom:1px solid var(--line)
}

.analysis-row>span {
  width:21px;
  height:21px;
  border-radius:50%;
  background:#dceee8;
  color:var(--teal);
  text-align:center;
  font-size:14px;
  line-height:21px;
  flex:none
}

.analysis-row strong,.analysis-row small {
  display:block
}

.analysis-row strong {
  font-size:14px
}

.analysis-row small {
  font:700 13px var(--sans);
  color:#86948f;
  margin-top:4px;
  line-height:1.4
}

.analysis-row.warning>span,.analysis-row.blocking>span {
  background:var(--amber-light);
  color:#a15f0c
}

.analysis-row.resolved>span {
  background:#dceee8;
  color:var(--teal)
}

.analysis-row button {
  margin-left:auto;
  border:0;
  background:none;
  color:var(--teal);
  font:700 13px var(--sans);
  text-transform:uppercase;
  white-space:nowrap
}

.draft-preview,.review-card {
  background:#fff;
  border:1px solid var(--line);
  padding:18px;
  margin-top:15px
}

.draft-preview h3 {
  font-size:19px;
  margin:17px 0 7px
}

.draft-preview p,.review-card p {
  font-size:13px;
  line-height:1.55;
  color:#6d7d79;
  margin:0
}

.draft-preview .draft-meta {
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center
}

.draft-preview .draft-meta .mono {
  font-size:13px
}

.plan-diagram {
  height:128px;
  background:#19484b;
  margin-top:18px;
  overflow:hidden;
  position:relative
}

.diagram-road {
  position:absolute;
  height:55px;
  left:-5%;
  right:-5%;
  top:37px;
  background:#2b5654;
  transform:none;
  border-top:1px solid #90ada366;
  border-bottom:1px solid #90ada366
}

.diagram-road:after {
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:26px;
  border-top:2px dashed #e6d99499
}

.diagram-arrow {
  position:absolute;
  left:12%;
  top:15px;
  color:#dfe9dd
}

.diagram-arrow.second {
  left:72%;
  top:29px
}

.diagram-road .bar {
  position:absolute;
  width:38px;
  height:7px;
  background:var(--amber);
  top:2px;
  transform:none
}

.bar.one {
  left:36%
}

.bar.two {
  left:43%
}

.bar.three {
  left:50%
}

.diagram-road .cone {
  transform:scale(.55);
  top:15px
}

.diagram-road .c1 {
  left:34%
}

.diagram-road .c2 {
  left:41%
}

.diagram-road .c3 {
  left:48%
}

.work-zone-label {
  position:absolute;
  left:40%;
  top:31px;
  color:#fff;
  font:700 13px var(--sans);
  text-align:center;
  line-height:1.1
}

.cite-row {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
  font:700 13px var(--sans)
}

.cite-row span {
  color:#93a09c
}

.cite-row a {
  color:var(--teal);
  text-decoration:none;
  border-bottom:1px solid #a8c9bf
}

.review-top {
  margin-bottom:38px
}

.review-top-actions {
  display:flex;
  gap:7px;
  margin-left:auto
}

.review-top .more-button {
  border:0;
  background:none
}

.review-title h2 {
  font-size:52px;
  line-height:.95;
  letter-spacing:-.07em;
  margin:12px 0 17px
}

.review-title p {
  color:#6c7d78;
  font-size:14px;
  line-height:1.5;
  max-width:490px
}

.alert-card {
  display:flex;
  gap:12px;
  align-items:flex-start;
  border-color:#e8c27a;
  background:#fff8e9;
  margin:27px 0
}

.alert-card strong {
  font-size:13px
}

.alert-card p {
  font-size:14px;
  margin-top:5px;
  color:#806d4f
}

.alert-card button {
  margin-left:auto;
  background:none;
  border:0;
  color:#a46315;
  font:700 13px var(--sans);
  text-transform:uppercase;
  cursor:pointer;
  white-space:nowrap
}

.issue-stack {
  display:grid;
  gap:12px;
  width:100%
}

.issue-item {
  display:flex;
  gap:10px;
  align-items:flex-start
}

.issue-item+.issue-item {
  border-top:1px solid #ecd9ae;
  padding-top:12px
}

.issue-item .issue-icon {
  background:var(--amber);
  color:#fff;
  width:24px;
  height:24px;
  border-radius:50%;
  text-align:center;
  line-height:24px;
  font-weight:700;
  flex:none
}

.issue-item.resolved .issue-icon {
  background:var(--green)
}

.issue-item>div {
  flex:1
}

.issue-item strong {
  display:block;
  font-size:13px
}

.issue-item p {
  font-size:14px;
  margin-top:4px;
  color:#806d4f
}

.issue-item button {
  border:0;
  background:none;
  color:#a46315;
  font:700 13px var(--sans);
  text-transform:uppercase;
  white-space:nowrap
}

.card-label {
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--teal);
  font:700 13px var(--sans);
  letter-spacing:.06em;
  margin-bottom:17px
}

.card-label span {
  color:#a0aca8
}

.card-label button {
  margin-left:auto;
  border:0;
  background:none;
  color:var(--teal);
  font:700 13px var(--sans);
  text-transform:uppercase;
  cursor:pointer
}

.review-card h3 {
  font-size:21px;
  letter-spacing:-.04em;
  margin:0 0 7px
}

.tag-row {
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-top:16px
}

.tag-row span {
  font:700 13px var(--sans);
  padding:7px 9px;
  background:#edf3ef;
  color:#55716b
}

.checklist {
  list-style:none;
  padding:0;
  margin:0
}

.checklist li {
  font-size:13px;
  border-top:1px solid #edf0ed;
  padding:12px 0;
  display:flex;
  gap:10px;
  align-items:center;
  color:#5a6b67
}

.checklist li.done {
  color:#8a9893;
  text-decoration:line-through
}

.checklist input {
  appearance:none;
  border:1px solid #9eb3a9;
  width:15px;
  height:15px;
  margin:0;
  flex:none
}

.checklist input:checked {
  background:var(--teal);
  border-color:var(--teal);
  box-shadow:inset 0 0 0 3px #fff
}

.sources-review>p {
  font-size:14px;
  margin-bottom:15px
}

.mini-source {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 0;
  border-top:1px solid #edf0ed
}

.mini-source>span {
  width:27px;
  height:27px;
  font-size:13px
}

.mini-source div {
  flex:1
}

.mini-source strong,.mini-source small {
  display:block
}

.mini-source strong {
  font-size:13px
}

.mini-source small {
  font:700 13px var(--sans);
  color:#879691;
  margin-top:3px
}

.mini-source>b {
  color:var(--teal)
}

.audit-card {
  background:#f8faf8
}

.audit-list {
  display:grid;
  gap:14px
}

.audit-event {
  display:grid;
  grid-template-columns:80px 1fr;
  gap:12px;
  border-top:1px solid #e6ece8;
  padding-top:10px
}

.audit-event:first-child {
  border-top:0;
  padding-top:0
}

.audit-event time {
  font:700 13px var(--sans);
  color:#899791
}

.audit-event strong {
  font-size:13px
}

.audit-event small {
  display:block;
  color:#8b9993;
  font:700 13px var(--sans);
  margin-top:4px
}

.submit-button {
  width:100%;
  margin-top:22px
}

.submit-button[disabled] {
  opacity:.45;
  cursor:not-allowed;
  transform:none;
  background:#667671
}

.submit-button.sent {
  background:var(--teal)
}

.review-disclaimer {
  text-align:center;
  font:700 13px var(--sans);
  color:#96a09d;
  line-height:1.5;
  margin:17px auto;
  max-width:500px
}

.reviewer-list {
  display:grid;
  gap:12px
}

.toast {
  position:fixed;
  left:50%;
  bottom:103px;
  transform:translate(-50%,20px);
  background:var(--ink);
  color:#fff;
  box-shadow:var(--shadow);
  padding:12px 16px;
  font:700 13px var(--sans);
  z-index:50;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s,transform .2s;
  max-width:min(90vw,440px);
  text-align:center
}

.toast.show {
  opacity:1;
  transform:translate(-50%,0)
}

.modal-backdrop {
  position:fixed;
  inset:0;
  background:#10233399;
  z-index:60;
  display:grid;
  place-items:center;
  padding:20px
}

.modal {
  width:min(100%,520px);
  background:var(--paper);
  box-shadow:0 25px 80px #10233355;
  position:relative;
  padding:25px
}

.modal-close {
  position:absolute;
  right:12px;
  top:10px;
  border:0;
  background:none;
  color:var(--teal);
  font-size:25px
}

.modal h3 {
  font-size:26px;
  letter-spacing:-.05em;
  margin:0 35px 9px 0
}

.modal p {
  font-size:13px;
  line-height:1.5;
  color:#697a75
}

.modal .modal-actions {
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  margin-top:20px
}

.modal .modal-actions button {
  flex:1;
  min-width:150px
}

.modal textarea {
  margin-top:10px
}

@media(max-width:700px) {
  .topbar {
    padding:0 20px;
    height:68px
  }

  .online-dot {
    display:none
  }

  .page-section,.builder-section,.review-section {
    padding-left:20px;
    padding-right:20px
  }

  .section-heading h2,.builder-header h2 {
    font-size:36px
  }

  .save-state {
    font-size:13px
  }

  .bottom-nav {
    gap:11vw
  }

  .nav-item {
    min-width:52px
  }

  .review-title h2 {
    font-size:48px
  }

  .photo-grid {
    grid-template-columns:1fr 1fr
  }

  .agent-working {
    align-items:flex-start
  }

  .location-card {
    align-items:flex-start
  }

  .location-card button {
    padding-top:12px
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    transition-duration:.01ms!important
  }
}

@media print {
  body {
    background:#fff
  }

  .app-shell {
    max-width:none;
    box-shadow:none
  }

  .topbar,.bottom-nav,.review-top-actions,.submit-button,.review-disclaimer,.toast {
    display:none!important
  }

  .review-section {
    display:block!important;
    max-width:900px;
    padding:20px
  }

  .review-card {
    break-inside:avoid
  }

  .review-title h2 {
    font-size:38px
  }

  .review-title p {
    max-width:none
  }

  .draft-preview {
    box-shadow:none
  }
}


.reviewer-comparison {
  border:1px solid #dce7e1;
  background:#f7faf8;
  padding:10px 11px;
  margin-top:14px;
  display:grid;
  gap:4px
}

.reviewer-comparison strong {
  font:700 13px var(--sans);
  letter-spacing:.06em;
  color:var(--teal)
}

.reviewer-comparison span,.reviewer-comparison small {
  font:700 13px var(--sans);
  color:#71827c;
  line-height:1.4
}

.reviewer-comparison small {
  color:#536b64
}


.inline-fields {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:12px
}


.inline-fields label {
  display:grid;
  gap:7px;
  color:var(--muted);
  font-size:15px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase
}


.inline-fields input,.inline-fields select {
  width:100%;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  color:var(--ink);
  font:inherit;
  font-size:.9rem;
  letter-spacing:0;
  padding:11px 12px;
  text-transform:none
}


.inline-fields input:focus,.inline-fields select:focus {
  outline:2px solid rgba(17,151,145,.25);
  border-color:var(--teal)
}


.auth-gate {
  min-height:calc(100vh - 76px);
  display:grid;
  place-items:center;
  padding:50px 20px;
  background:linear-gradient(130deg,#f5f7f4 35%,#e5efea 100%)
}


.auth-card {
  width:min(100%,520px);
  background:#fff;
  border:1px solid var(--line);
  padding:36px;
  box-shadow:var(--shadow)
}


.auth-card h1 {
  font-size:48px;
  line-height:.95;
  letter-spacing:-.07em;
  margin:15px 0
}


.auth-card h1 em {
  font-family:var(--sans);
  font-weight:400;
  color:var(--teal)
}


.auth-card>p {
  color:#687975;
  font-size:14px;
  line-height:1.55;
  margin:0 0 25px
}


.auth-card form {
  display:grid;
  gap:14px
}

.auth-card form label {
  display:grid;
  gap:7px;
  color:#536966;
  font:700 13px var(--sans);
  text-transform:uppercase
}

.auth-card form input {
  border:1px solid var(--line);
  padding:13px;
  background:#fbfcfb;
  color:var(--ink);
  font:14px var(--sans);
  letter-spacing:0;
  text-transform:none
}

.auth-card form input:focus {
  outline:2px solid #126b6944;
  border-color:var(--teal)
}

.auth-card form .primary-cta {
  width:100%;
  margin-top:7px
}

.auth-demo-note {
  display:grid;
  gap:6px;
  border-top:1px solid var(--line);
  margin-top:24px;
  padding-top:16px;
  color:#899792;
  font:700 13px var(--sans);
  line-height:1.4
}

.auth-demo-note strong {
  color:var(--teal);
  font-size:13px;
  letter-spacing:.07em;
  text-transform:uppercase
}

.auth-tabs {
  display:flex;
  gap:8px;
  background:#eff4f2;
  padding:4px;
  border-radius:12px;
  margin-bottom:18px
}

.auth-tab {
  flex:1;
  min-height:52px;
  border:0;
  background:transparent;
  color:#5f6e69;
  font:700 14px var(--sans);
  border-radius:10px;
  cursor:pointer;
  transition:background .15s ease,color .15s ease
}

.auth-tab.active {
  background:#ffffff;
  color:var(--teal);
  box-shadow:0 2px 6px rgba(0,0,0,.08)
}

.auth-card form select {
  width:100%;
  min-height:52px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#ffffff;
  font:500 16px var(--sans);
  color:var(--text);
  appearance:auto
}

.auth-demo-sub {
  margin:0;
  font-size:13px;
  color:#687772;
  font-weight:400
}

.demo-buttons {
  display:grid;
  gap:8px;
  margin-top:8px
}

.demo-login-button {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  width:100%;
  min-height:54px;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#ffffff;
  color:var(--text);
  cursor:pointer;
  text-align:left;
  transition:background .15s ease,border-color .15s ease
}

.demo-login-button:hover,
.demo-login-button:focus-visible {
  background:#f4f8f7;
  border-color:var(--teal)
}

.auth-gate[hidden] {
  display:none
}



.calculation-ledger {
  border-top:1px solid var(--line);
  margin-top:18px;
  padding-top:15px
}


.calc-row {
  display:grid;
  grid-template-columns:1fr auto;
  gap:4px 12px;
  border-top:1px solid #edf0ed;
  padding:10px 0
}


.calc-row:first-of-type {
  border-top:0
}


.calc-row span {
  font-size:14px;
  color:var(--ink)
}


.calc-row strong {
  font:700 13px var(--sans);
  color:var(--teal)
}


.calc-row small {
  grid-column:1/-1;
  font:700 13px var(--sans);
  color:#899792;
  line-height:1.4
}


.device-schedule {
  border-top:1px solid var(--line);
  margin-top:18px;
  padding-top:15px
}


.device-row {
  display:grid;
  grid-template-columns:1fr auto;
  gap:4px 12px;
  border-top:1px solid #edf0ed;
  padding:10px 0
}


.device-row:first-of-type {
  border-top:0
}

.device-row span {
  font-size:14px;
  color:var(--ink)
}

.device-row strong {
  font:700 13px var(--sans);
  color:var(--teal)
}

.device-row small {
  grid-column:1/-1;
  font:700 13px var(--sans);
  color:#899792;
  line-height:1.4
}


.dimensioned-diagram .diagram-caption {
  position:absolute;
  left:14px;
  top:10px;
  color:#b6d3c7;
  font:700 13px var(--sans);
  letter-spacing:.08em;
  z-index:2
}


.diagram-dimension {
  position:absolute;
  color:#f4d88e;
  font:700 13px var(--sans);
  letter-spacing:.03em;
  white-space:nowrap
}


.taper-dimension {
  left:38%;
  top:-15px
}

.warning-dimension {
  left:7%;
  top:44px
}

.diagram-foot {
  position:absolute;
  right:12px;
  bottom:9px;
  color:#a8c8bc;
  font:700 13px var(--sans);
  letter-spacing:.04em
}


@media (max-width:640px) {
  .inline-fields {
    grid-template-columns:1fr
  }
}


.review-evidence-grid  {
   display:grid;
   grid-template-columns:repeat(2,minmax(0,1fr));
   gap:10px;
}


.review-evidence-grid figure  {
   margin:0;
}


.review-evidence-image  {
   min-height:130px;
   background:#e7efea center/cover no-repeat;
   display:grid;
   place-items:center;
   color:var(--muted);
   font:700 13px var(--sans);
   border:1px solid var(--line);
}


.review-evidence-grid figcaption  {
   margin-top:5px;
   color:var(--muted);
   font:700 13px var(--sans);
}


.admin-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px
}

.admin-card {
  background:#fff;
  border:1px solid var(--line);
  padding:18px;
  margin-top:14px
}

.admin-card .secondary-button {
  margin-top:14px
}

.admin-list {
  display:grid;
  gap:0
}

.admin-row {
  display:flex;
  align-items:center;
  gap:12px;
  border-top:1px solid #edf0ed;
  padding:12px 0
}

.admin-row:first-child {
  border-top:0
}

.admin-row>div {
  flex:1
}

.admin-row strong,.admin-row small {
  display:block
}

.admin-row strong {
  font-size:14px
}

.admin-row small {
  color:var(--muted);
  font:700 13px var(--sans);
  margin-top:4px
}

.admin-state {
  font:700 13px var(--sans);
  text-transform:uppercase
}

.admin-state.ok {
  color:var(--green)
}

.admin-state.warn {
  color:var(--red)
}

.admin-count {
  margin-left:auto;
  color:var(--muted)
}

.admin-subheading {
  padding-top:16px;
  color:var(--muted);
  font:700 13px var(--sans);
  letter-spacing:.1em
}

.admin-empty {
  color:var(--muted);
  font-size:14px
}

@media(max-width:640px) {
  .admin-grid {
    grid-template-columns:1fr
  }
}


.jobs-search {
  margin-left:auto;
  min-width:190px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  padding:8px 10px;
  font:700 13px var(--sans);
  outline-color:var(--teal)
}


.jobs-advanced-filters {
  margin:-8px 0 18px;
  border:1px solid var(--line);
  background:#f6f9f6;
  padding:0 12px
}


.jobs-advanced-filters summary {
  cursor:pointer;
  padding:11px 2px;
  color:var(--teal);
  font:700 13px var(--sans);
  letter-spacing:.06em;
  text-transform:uppercase
}


.jobs-advanced-filters .inline-fields {
  margin:0;
  padding:0 0 12px
}


@media(max-width:640px) {
  .jobs-search {
    min-width:150px;
    width:100%;
    margin-left:0
  }
}



.geometry-sketch-card {
  margin-top:22px;
  border:1px solid var(--line);
  background:#fff;
  padding:14px
}


.geometry-sketch-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px
}


.geometry-sketch-head p {
  font-size:13px;
  line-height:1.45;
  color:#71817c;
  margin:7px 0 0;
  max-width:520px
}


.geometry-state {
  font:700 13px var(--sans);
  color:var(--teal);
  text-transform:uppercase;
  white-space:nowrap;
  border:1px solid var(--line);
  padding:6px 7px
}


.geometry-sketch {
  display:block;
  width:100%;
  height:auto;
  min-height:180px;
  background:#163c41;
  border:1px solid #245457
}


.sketch-bg {
  fill:#163c41
}

.sketch-shoulder {
  fill:#729080
}

.sketch-road {
  fill:#2b5654
}

.sketch-center {
  fill:none;
  stroke:#e6d994;
  stroke-width:2;
  stroke-dasharray:9 8;
  opacity:.85
}

.sketch-edge {
  fill:none;
  stroke:#cfe0d0;
  stroke-width:2;
  opacity:.75
}

.sketch-work {
  fill:#efad43;
  stroke:#fff1d5;
  stroke-width:2
}

.intersection-work {
  fill:#bd593d
}

.sketch-taper {
  fill:none;
  stroke:#efad43;
  stroke-width:4
}

.sketch-crosswalk {
  fill:none;
  stroke:#fff;
  stroke-width:3;
  opacity:.9
}

.sketch-approach {
  fill:none;
  stroke:#efad43;
  stroke-width:4
}

.sketch-dimension-line {
  fill:none;
  stroke:#a7c7bc;
  stroke-width:1
}

.sketch-label,.sketch-dimension {
  fill:#e8eee3;
  font:700 13px var(--sans);
  letter-spacing:.03em
}

.sketch-dimension {
  fill:#efad43;
  font-size:13px
}

.sketch-work-label {
  fill:#102333;
  font-weight:700;
  font-size:13px
}

.geometry-sketch-caption {
  font:700 13px var(--sans);
  line-height:1.5;
  color:#7b8b86;
  margin:10px 0 0
}

.geometry-sketch-caption strong {
  color:var(--teal)
}


@media(max-width:640px) {
  .geometry-sketch-card {
    padding:11px
  }

  .geometry-sketch {
    min-height:150px
  }

  .geometry-sketch-head {
    display:block
  }

  .geometry-state {
    display:inline-block;
    margin-top:8px
  }
}


.photo-upload-status {
  display:grid;
  gap:4px;
  flex:1;
  background:#ffffffdd;
  padding:6px 7px;
  color:var(--teal);
  font:700 13px var(--sans);
  line-height:1.2
}

.photo-upload-status progress {
  width:100%;
  height:5px;
  accent-color:var(--teal)
}

.photo-thumb.is-uploading:before {
  background:linear-gradient(180deg,#10233300 20%,#10233388)
}


@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.01ms!important
  }
}


.photo-input-links {
  position:absolute;
  left:9px;
  right:9px;
  bottom:43px;
  width:calc(100% - 18px);
  border:0;
  background:#ffffffdd;
  color:var(--ink);
  padding:5px 7px;
  font:700 13px var(--sans)
}


.diagram-accessible-description {
  position:absolute!important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}


.photo-thumb-img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover
}


.photo-thumb:before,.photo-thumb .photo-check,.photo-thumb .photo-meta {
  z-index:1
}


.review-evidence-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block
}


.job-progress progress {
  display:block;
  width:100%;
  height:3px;
  border:0;
  accent-color:var(--amber)
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE-FIRST LAYER
   Appended last so equal-specificity rules here win. Base layout targets
   phones (~360px); larger breakpoints enhance. Existing desktop rules above
   remain the desktop experience; this layer owns small-screen ergonomics.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Global mobile safeguards ─────────────────────────────────────────────── */
html {
  -webkit-text-size-adjust: 100%;
}

img,
svg,
video {
  max-width: 100%;
}

.app-shell {
  /* never let content hide under the fixed bottom-nav (+ iOS home indicator) */
  padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
}

/* ── Bottom navigation: thumb-sized, safe-area aware ─────────────────────── */
.bottom-nav {
  height: calc(72px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  gap: clamp(8px, 4vw, 100px);
  align-items: flex-start;
}

.nav-item {
  min-width: 56px;
  min-height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

/* ── Touch targets: primary actions ──────────────────────────────────────── */
.primary-cta,
.step-next,
.submit-button {
  min-height: 52px;
  font-size: 15px;
}

.secondary-button,
.text-button,
.back-button {
  min-height: 52px;
}

.square-button,
.more-button,
.icon-button {
  min-width: 52px;
  min-height: 52px;
}

.choice {
  min-height: 62px;
  display: flex;
  align-items: center;
  font-size: 16px;
}

.filter {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
}

/* ── Small screens (phones) ──────────────────────────────────────────────── */
@media (max-width: 700px) {
  /* compact topbar */
  .topbar {
    height: 60px;
    padding: 0 16px;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }

  .brand-name {
    font-size: 15px;
  }

  .brand-mark {
    height: 20px;
  }

  .brand-kicker {
    display: none;
  }

  .online-dot {
    display: none;
  }

  .view {
    min-height: calc(100vh - 60px);
  }

  /* readable type without fixed desktop sizes */
  .auth-card h1 {
    font-size: clamp(32px, 9vw, 48px);
  }

  .auth-card {
    padding: 24px 20px;
  }

  .auth-gate {
    padding: 24px 14px;
    min-height: calc(100vh - 60px);
  }

  .section-heading h2,
  .builder-header h2 {
    font-size: clamp(26px, 7vw, 34px);
  }

  .page-section,
  .builder-section,
  .review-section {
    padding: 32px 16px;
  }

  /* inputs: 16px minimum prevents iOS auto-zoom on focus */
  .inline-fields input,
  .inline-fields select,
  .location-card input,
  .auth-card form input,
  .jobs-search,
  textarea,
  .modal textarea {
    font-size: 16px;
  }

  .inline-fields {
    grid-template-columns: 1fr;
  }

  /* builder primary action rides above the keyboard/nav as a sticky bar */
  .builder-step > .step-next {
    position: sticky;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 8px);
    z-index: 15;
    display: flex;
  }

  /* photos: keep 2-up grid but with bigger tap targets */
  .photo-thumb select {
    font-size: 14px;
    min-height: 52px;
  }

  .photo-remove {
    min-width: 52px;
    min-height: 52px;
  }

  /* wide diagrams scroll horizontally instead of overflowing */
  .plan-diagram,
  .dimensioned-diagram,
  .geometry-sketch-card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* review action row wraps on phones */
  .review-top {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }

  .review-top-actions {
    display: flex;
    gap: 6px;
    margin-left: auto;
  }

  .submit-button {
    width: 100%;
    justify-content: space-between;
  }

  /* job cards and admin rows breathe */
  .job-card,
  .admin-card,
  .review-card,
  .draft-preview {
    margin-left: 0;
    margin-right: 0;
  }

  /* filter row scrolls sideways instead of wrapping into chaos */
  .filter-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }

}

/* ── Medium screens (large phones / small tablets) ───────────────────────── */
@media (min-width: 701px) and (max-width: 1023px) {
  .page-section,
  .builder-section,
  .review-section {
    padding: 44px 6vw;
  }
}

/* ── Coarse-pointer refinement (any size touch device) ───────────────────── */
@media (pointer: coarse) {
  .choice,
  .filter,
  .nav-item,
  .photo-thumb select,
  .checklist li {
    min-height: 52px;
  }

  .checklist input {
    width: 22px;
    height: 22px;
  }
}

.photo-camera-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  margin-top: 10px;
  border: 1px dashed var(--teal);
  background: var(--teal-light);
  color: var(--teal);
  font: 600 13px var(--sans);
  cursor: pointer;
}

.photo-camera-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ── Assist layer UI (ADR-0015): always labeled non-authoritative ────────── */
.assist-card {
  border: 1px dashed var(--teal);
  background: #f4faf7;
  padding: 14px 15px;
  margin: 16px 0;
  display: grid;
  gap: 10px;
}

.assist-card textarea {
  min-height: 64px;
  background: #fff;
}

.assist-tag {
  margin-left: auto;
  font:700 13px var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--red);
  border: 1px solid var(--red-light);
  background: var(--red-light);
  padding: 3px 6px;
}

.assist-note {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

.assist-obs-head {
  font:700 13px var(--sans);
  letter-spacing: 0.08em;
  color: var(--red);
  text-transform: uppercase;
  margin-top: 4px;
}

.gmaps-badge {
  background: rgba(66, 133, 244, 0.08);
  border: 1px solid rgba(66, 133, 244, 0.3);
  border-radius: var(--radius-md, 8px);
  padding: 10px 14px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gmaps-badge span {
  font: 700 13px var(--sans);
  color: #1a73e8;
  letter-spacing: 0.04em;
}
.gmaps-badge small {
  font-size: 13px;
  color: var(--muted);
}
.gmaps-badge button {
  align-self: flex-start;
  margin-top: 6px;
}

.assist-observation {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-top: 1px solid #dcebe4;
  padding: 9px 0;
}

.assist-observation > div {
  flex: 1;
}

.assist-observation strong {
  font-size: 13px;
  display: block;
}

.assist-observation p {
  font-size: 13px;
  color: var(--ink-2);
  margin: 3px 0;
  line-height: 1.45;
}

.assist-observation small {
  font:700 13px var(--sans);
  color: var(--muted);
}

.assist-observation > button {
  min-width: 52px;
  min-height: 52px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 16px;
}

.assist-explanation-card {
  border-style: dashed;
}

.assist-explanation-card p {
  font-size: 13px;
  line-height: 1.55;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIELD MODE LAYER (docs/brand.md · docs/screens/…Design System.dc.html)
   Appended last so equal-specificity rules win. One family (Hanken Grotesk),
   physical buttons, 14px card radii, 2px+ borders, 13px type floor, one amber
   per screen, plain sub-heads (mono eyebrows retired).
   ═══════════════════════════════════════════════════════════════════════════ */

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
}

/* ── Sub-heads replace mono eyebrows: sentence-friendly, no caps tricks ──── */
.eyebrow,
.brand-kicker,
.card-label,
.card-label span,
.admin-subheading {
  font: 700 13px var(--sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--sub-text);
}

.eyebrow span { color: var(--border-input); }
.card-label strong { color: var(--ink); }

/* ── Primary action: the one amber, physical button ──────────────────────── */
.primary-cta,
.step-next,
.submit-button {
  min-height: 62px;
  padding: 14px 22px;
  border: 0;
  border-radius: 14px;
  background: var(--action-amber);
  color: var(--ink);
  font: 800 20px var(--sans);
  letter-spacing: 0;
  justify-content: center;
  gap: 12px;
  box-shadow: 0 4px 0 var(--action-amber-pressed);
  transition: transform .08s, box-shadow .08s, background .08s;
}

.primary-cta:hover,
.step-next:hover,
.submit-button:hover {
  transform: none;
  background: var(--action-amber);
}

.primary-cta:active,
.step-next:active,
.submit-button:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--action-amber-pressed);
}

.primary-cta .plus,
.primary-cta .arrow,
.step-next .arrow,
.step-next span,
.submit-button span {
  color: var(--ink);
}

.submit-button[disabled] {
  background: #e4e2db;
  color: var(--sub-text);
  box-shadow: none;
  transform: none;
}

/* Positive actions (approve / done) go green, same physical treatment */
.primary-cta.positive,
.step-next.positive,
.submit-button.positive,
.submit-button.sent {
  background: var(--go-green);
  color: #fff;
  box-shadow: 0 4px 0 var(--go-green-pressed);
}

.primary-cta.positive:active,
.step-next.positive:active,
.submit-button.positive:active,
.submit-button.sent:active {
  box-shadow: 0 0 0 var(--go-green-pressed);
}

.primary-cta.positive span,
.step-next.positive span,
.submit-button.sent span {
  color: #fff;
}

/* ── Secondary + destructive ─────────────────────────────────────────────── */
.secondary-button {
  min-height: 56px;
  padding: 12px 18px;
  border: 2px solid var(--border-choice);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  font: 700 17px var(--sans);
}

.secondary-button:hover {
  border-color: var(--border-input);
}

/* Destructive actions are outlined red — never solid red */
.secondary-button.danger,
.step-next.danger,
.primary-cta.danger {
  background: #fff;
  border: 2px solid var(--stop-red-border);
  color: var(--stop-red-text);
  box-shadow: none;
}

.text-button {
  font: 700 15px var(--sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--go-green);
  min-height: 52px;
}

.back-button {
  color: var(--ink);
}

.primary-cta:focus-visible,
.step-next:focus-visible,
.submit-button:focus-visible,
.choice:focus-visible,
.filter:focus-visible,
.text-button:focus-visible,
.secondary-button:focus-visible {
  outline: 3px solid var(--action-amber);
  outline-offset: 3px;
}

/* ── Choice rows: whole-row tap, amber pick state ────────────────────────── */
.choice {
  min-height: 62px;
  padding: 14px 16px;
  border: 2px solid var(--border-choice);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  font: 600 16px var(--sans);
  gap: 10px;
}

.choice:hover {
  border-color: var(--border-input);
}

.choice.selected {
  border: 3px solid var(--action-amber);
  background: #fffbf0;
  box-shadow: none;
  color: var(--ink);
  padding: 13px 15px; /* keep row height stable with the thicker border */
}

.choice.selected::after {
  content: '\2713';
  margin-left: auto;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--action-amber);
  color: var(--ink);
  font: 800 15px var(--sans);
  display: grid;
  place-items: center;
}

/* ── Status chips: pill + dot, tinted per state ──────────────────────────── */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 2px solid transparent;
  font: 800 13px var(--sans);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.status-pill::before {
  content: '';
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
}

/* The four field-facing states (ADR-0023). Neutral for work still owed, caution
   for a resolvable gap, go-green for a plan with a downloadable artifact, and
   stop-red for a job the engine cannot build as described. */
.status-pill.in_progress {
  color: var(--sub-text);
  background: var(--surface);
  border-color: var(--border-card);
}

.status-pill.needs_info {
  color: var(--caution-text);
  background: var(--caution-tint);
  border-color: var(--caution-border);
}

.status-pill.ready {
  color: var(--go-green);
  background: var(--go-green-tint);
  border-color: var(--go-green-border);
}

.status-pill.couldnt_build {
  color: var(--stop-red-text);
  background: var(--stop-red-tint);
  border-color: var(--stop-red-border);
}

/* Transient only: shown while a generation is in flight, never at rest. */
.status-pill.generating {
  color: var(--waiting-blue);
  background: var(--waiting-blue-tint);
  border-color: var(--waiting-blue-border);
}

/* ── Inputs: big, labeled above, 2px borders ─────────────────────────────── */
.inline-fields input,
.inline-fields select,
.auth-card form input,
.jobs-search,
textarea,
.modal textarea {
  min-height: 58px;
  padding: 14px 16px;
  border: 2px solid var(--border-input);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font: 500 16px var(--sans);
  letter-spacing: 0;
  text-transform: none;
}

.location-card input {
  font-size: 16px;
  border-bottom: 2px solid var(--border-input);
}

.inline-fields input:focus,
.inline-fields select:focus,
.auth-card form input:focus,
.jobs-search:focus,
textarea:focus {
  outline: 3px solid var(--action-amber);
  outline-offset: 1px;
  border-color: var(--border-input);
}

.inline-fields label,
.auth-card form label,
.field-group > label {
  font: 700 15px var(--sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

.field-group > label span {
  color: var(--sub-text);
  font-weight: 500;
}

/* ── Filter chips ────────────────────────────────────────────────────────── */
.filter {
  min-height: 52px;
  padding: 10px 15px;
  border: 2px solid var(--border-choice);
  border-radius: 999px;
  background: #fff;
  color: var(--sub-text);
  font: 800 13px var(--sans);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.filter.active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* ── Progress: chunky rounded segments ───────────────────────────────────── */
.step-indicator {
  gap: 8px;
}

.step-indicator span {
  height: 9px;
  border-radius: 6px;
  background: #e4e2db;
}

.step-indicator span.active {
  background: var(--action-amber);
}

/* ── Bottom nav: 80px, icon + word ───────────────────────────────────────── */
.bottom-nav {
  height: calc(80px + env(safe-area-inset-bottom, 0px));
  padding-top: 8px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: #fff;
  border-top: 2px solid var(--border-card);
  box-shadow: none;
  align-items: center;
}

.nav-item {
  min-height: 60px;
  color: var(--sub-text);
  gap: 3px;
}

.nav-item small {
  font: 800 13px var(--sans);
  letter-spacing: .02em;
  text-transform: uppercase;
}

.nav-item span {
  font-size: 24px;
  height: 28px;
}

.nav-item.active {
  color: var(--ink);
}

.nav-badge {
  background: var(--stop-red);
  font: 800 13px var(--sans);
  border-radius: 999px;
  padding: 1px 7px;
}

/* content clearance for the taller nav */
.app-shell {
  padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
}

/* ── Checklist rows: done = green tint + strikethrough ───────────────────── */
.checklist li {
  font-size: 16px;
  color: var(--ink);
  padding: 12px;
  border-top: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  margin-top: 6px;
  background: var(--surface);
}

.checklist li.done {
  background: var(--go-green-tint);
  border-color: var(--go-green-border);
  color: var(--ink);
  text-decoration: line-through;
}

.checklist input {
  width: 24px;
  height: 24px;
  border: 2px solid var(--border-input);
  border-radius: 6px;
}

.checklist input:checked {
  background: var(--go-green);
  border-color: var(--go-green);
  box-shadow: inset 0 0 0 3px #fff;
}

/* ── Cards: 14px radius, 2px borders, calm surfaces ──────────────────────── */
.job-card,
.review-card,
.draft-preview,
.admin-card,
.auth-card,
.empty-state,
.modal,
.profile-popover,
.geometry-sketch-card,
.assist-card,
.photo-drop,
.location-card,
.alert-card,
.agent-working,
.jobs-advanced-filters,
.reviewer-comparison,
.inline-error,
.toast {
  border-radius: var(--radius-card);
}

.job-card,
.review-card,
.draft-preview,
.admin-card,
.auth-card,
.empty-state,
.modal,
.profile-popover,
.geometry-sketch-card {
  border-width: 2px;
  border-style: solid;
  border-color: var(--border-card);
}

.photo-thumb,
.plan-diagram,
.geometry-sketch,
.review-evidence-image {
  border-radius: 10px;
}

.inline-error {
  border-width: 2px;
  border-color: var(--stop-red-border);
  background: var(--stop-red-tint);
  color: var(--stop-red-text);
  font-size: 14px;
  font-weight: 600;
}

.alert-card {
  border: 2px solid var(--caution-border);
  border-left-width: 2px;
  background: var(--caution-tint);
}

/* ── Type scale (800-weight titles, no tracking tricks) ──────────────────── */
.section-heading h2,
.builder-header h2 {
  font-size: clamp(28px, 6vw, 34px);
  font-weight: 800;
  letter-spacing: -.01em;
}

.review-title h2 {
  font-size: clamp(28px, 7vw, 40px);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.05;
}

.auth-card h1 {
  font-size: clamp(28px, 8vw, 40px);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.1;
}

.review-title em,
.auth-card h1 em {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 800;
  color: var(--go-green);
  letter-spacing: inherit;
}

.job-card h3,
.review-card h3,
.draft-preview h3,
.modal h3 {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0;
}

.step-lede,
.review-title p,
.auth-card > p,
.modal p {
  font-size: 16px;
  color: var(--sub-text);
}

.job-card p,
.empty-state p,
.section-subtitle {
  font-size: 14px;
  color: var(--sub-text);
}

.toast {
  font: 600 15px var(--sans);
  border-radius: 12px;
  padding: 14px 18px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIELD MODE — PHASE 2/3 LAYER (nav & role surfaces, Home, Help, Your crew,
   Rule books, builder step 1). Appended last so equal-specificity rules win.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Home ────────────────────────────────────────────────────────────────── */
.home-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px 5vw 24px;
  max-width: 720px;
}

.home-greeting {
  font-size: clamp(28px, 7vw, 34px);
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 0;
  color: var(--ink);
}

.home-question {
  font-size: 18px;
  font-weight: 600;
  color: var(--sub-text);
  margin: -8px 0 4px;
}

.home-hero-cta {
  width: 100%;
  min-height: 76px;
  font-size: 21px;
}

.plan-card-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.plan-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px;
  min-height: 96px;
  border: 2px solid var(--border-card);
  border-radius: var(--radius-card);
  background: #fff;
  text-align: left;
  cursor: pointer;
  font-family: var(--sans);
}

.plan-card:hover { border-color: var(--border-input); }

.plan-card strong {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
}

.plan-card small {
  font-size: 14px;
  font-weight: 600;
  color: var(--sub-text);
}

.home-crew-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  min-height: 72px;
  border: 2px solid var(--border-card);
  border-radius: var(--radius-card);
  background: #fff;
  text-align: left;
  cursor: pointer;
  font-family: var(--sans);
}

.home-crew-card .crew-card-icon { font-size: 22px; color: var(--ink); }
.home-crew-card span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.home-crew-card strong { font-size: 17px; font-weight: 800; color: var(--ink); }
.home-crew-card small { font-size: 14px; color: var(--sub-text); }
.home-crew-card b { color: var(--ink); font-size: 18px; }

.home-rulebooks-link { align-self: flex-start; }

/* ── Help ────────────────────────────────────────────────────────────────── */
.help-section { max-width: 720px; }

.help-contact {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 18px 0;
}

.help-call {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 72px;
  padding: 14px 22px;
  border-radius: 14px;
  background: var(--go-green);
  color: #fff;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 4px 0 var(--go-green-pressed);
  font-family: var(--sans);
}

.help-call:active { transform: translateY(4px); box-shadow: 0 0 0 var(--go-green-pressed); }
.help-call strong { font-size: 20px; font-weight: 800; }
.help-call small { font-size: 14px; font-weight: 600; opacity: .9; }
.help-call.is-static { box-shadow: none; cursor: default; }

.help-text {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.help-card {
  border: 2px solid var(--border-card);
  border-radius: var(--radius-card);
  background: #fff;
  padding: 18px;
}

.help-card h3 { font-size: 19px; font-weight: 800; margin: 0 0 12px; color: var(--ink); }

.help-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.help-steps li { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--ink); }

.help-steps b {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--action-amber);
  color: var(--ink);
  font: 800 16px var(--sans);
}

/* ── Your crew ───────────────────────────────────────────────────────────── */
.crew-section { max-width: 720px; display: flex; flex-direction: column; gap: 14px; }

.crew-list { display: flex; flex-direction: column; gap: 10px; }

.crew-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 12px 16px;
  border: 2px solid var(--border-card);
  border-radius: var(--radius-card);
  background: #fff;
}

.crew-avatar {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font: 800 15px var(--sans);
}

.crew-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.crew-info strong { font-size: 17px; font-weight: 800; color: var(--ink); }
.crew-info small { font-size: 14px; color: var(--sub-text); }

.role-chip {
  padding: 5px 12px;
  border-radius: 999px;
  border: 2px solid var(--border-choice);
  font: 800 13px var(--sans);
  letter-spacing: .04em;
  color: var(--ink);
  background: var(--surface);
}

.role-chip.role-qualified_reviewer { background: var(--go-green-tint); border-color: var(--go-green-border); color: var(--go-green); }
.role-chip.role-organization_admin { background: var(--waiting-blue-tint); border-color: var(--waiting-blue-border); color: var(--waiting-blue); }

.crew-add-cta { width: 100%; }

/* ── Rule books ──────────────────────────────────────────────────────────── */
.rulebook-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  min-height: 84px;
  border: 2px solid var(--border-card);
  border-radius: var(--radius-card);
  background: #fff;
  margin-bottom: 12px;
}

.rulebook-info { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.rulebook-info strong { font-size: 17px; font-weight: 800; color: var(--ink); }
.rulebook-info small { font-size: 14px; color: var(--sub-text); }

.rulebook-status {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  font: 800 13px var(--sans);
}

.rulebook-status.ok { background: var(--go-green-tint); border: 2px solid var(--go-green-border); color: var(--go-green); }
.rulebook-status.warn { background: var(--caution-tint); border: 2px solid var(--caution-border); color: var(--caution-text); }

.rulebook-check {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  white-space: nowrap;
}

/* ── Builder step 1: photos ──────────────────────────────────────────────── */
.photo-camera-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 76px;
  margin: 14px 0 0;
  border: 0;
  border-radius: 14px;
  background: var(--action-amber);
  color: var(--ink);
  font: 800 20px var(--sans);
  cursor: pointer;
  box-shadow: 0 4px 0 var(--action-amber-pressed);
}

.photo-camera-button:active { transform: translateY(4px); box-shadow: 0 0 0 var(--action-amber-pressed); }
.photo-camera-button input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.photo-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 64px;
  margin-top: 12px;
  padding: 14px;
  border: 2px solid var(--border-choice);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  text-align: center;
}

.photo-drop strong { font-size: 16px; font-weight: 700; color: var(--ink); }
.photo-drop small { font-size: 13px; color: var(--sub-text); letter-spacing: 0; text-transform: none; }


.photo-count {
  font: 700 15px var(--sans);
  color: var(--ink);
  margin: 12px 0 0;
}

.capture-note-plain {
  font-size: 14px;
  color: var(--sub-text);
  line-height: 1.5;
  margin: 10px 0 0;
}

.location-card label {
  font: 700 15px var(--sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

/* Step 1 keeps one amber: "Next" is the quiet secondary-style action */
.step-next.alt {
  background: #fff;
  color: var(--ink);
  border: 2px solid var(--border-choice);
  box-shadow: none;
}

.step-next.alt:hover { background: #fff; border-color: var(--border-input); }
.step-next.alt:active { transform: none; }
.step-next.alt span { color: var(--ink); }

/* ── Desktop ≥1024px: bottom nav becomes a 240px left sidebar ────────────── */
@media (min-width: 1024px) {
  .bottom-nav {
    position: fixed;
    top: 76px;
    bottom: 0;
    left: 0;
    right: auto;
    width: 240px;
    height: auto;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 6px;
    padding: 20px 14px;
    border-top: 0;
    border-right: 2px solid var(--border-card);
  }

  .nav-item {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    min-height: 52px;
    padding: 0 18px;
    border-radius: 999px;
  }

  .nav-item small { text-transform: none; font-size: 15px; letter-spacing: 0; }

  .nav-item.active {
    background: var(--ink);
    color: #fff;
  }

  main {
    margin-left: 240px;
    padding-bottom: 40px;
  }

  .app-shell { padding-bottom: 40px; }
  .home-section, .help-section, .crew-section { margin: 0 auto; width: 100%; }
}

/* ── Field Mode wizard (Phase 4) ─────────────────────────────────────────── */
.wizard-progress { margin: 18px 0 10px; display: grid; gap: 8px; }
.wizard-segments { display: flex; gap: 6px; }
.wizard-segments span { flex: 1; height: 8px; border-radius: 6px; background: var(--border-card); }
.wizard-segments span.active { background: var(--action-amber); }
.wizard-progress-label { margin: 0; font: 700 14px var(--sans); color: var(--sub-text); }
.wizard-question { display: grid; gap: 12px; margin: 6px 0 24px; }
.question-title { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.25; }
.question-helper { margin: 0; color: var(--sub-text); font-size: 15px; line-height: 1.5; }
.followup-why { margin: 0; padding: 10px 12px; border-radius: 10px; border: 2px solid var(--caution-border); background: var(--caution-tint); font-size: 14px; font-weight: 600; }
.wizard-back { justify-self: start; min-height: 52px; padding: 8px 12px 8px 0; font-size: 15px; font-weight: 700; }
.wizard-not-sure { min-height: 52px; }
.wizard-choices .choice { width: 100%; }
.choice.suggested { border-color: var(--action-amber); box-shadow: inset 0 0 0 2px var(--caution-tint); }
.choice-suggested-note { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--sub-text); }
.wizard-field { display: grid; gap: 6px; font-size: 15px; font-weight: 700; }
.wizard-field input, .wizard-field select { min-height: 52px; font-size: 16px; }
.wizard-field small { font-weight: 400; color: var(--sub-text); font-size: 13px; }
.wizard-lookup { display: grid; gap: 8px; }
.calm-reasons { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 15px; line-height: 1.5; }

/* ── Field Mode step 3: the ready screen (ADR-0023) ─────────────────────────
   One amber primary (Download PDF). The secondary grid sits under it, and the
   optional professional review is a plain text action below that, so nothing on
   this screen competes with the download. */
.plan-ready-title { margin: 12px 0 4px; font-size: 24px; font-weight: 800; }
.missing-info-list { margin: 14px 0; padding-left: 20px; display: grid; gap: 8px; font-size: 15px; line-height: 1.5; }
.ready-secondary { margin-top: 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.ready-secondary .secondary-button { width: 100%; }
.review-request-note { margin: 16px 0 0; font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--sub-text); }
.text-button.ask-review { margin-top: 14px; justify-self: start; }
.ask-review-note { display: block; margin-top: 2px; font-size: 13px; color: var(--sub-text); }
.caution-banner { margin: 14px 0; padding: 12px 14px; border-radius: var(--radius-card); border: 2px solid var(--caution-border); background: var(--caution-tint); font-size: 15px; font-weight: 700; line-height: 1.4; }
.plan-plain-card { margin: 14px 0; padding: 16px; border-radius: var(--radius-card); border: 2px solid var(--border-card); background: #fff; display: grid; gap: 10px; }
.plan-plain-card > strong { font-size: 17px; }
.plan-plain-lines { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 15px; line-height: 1.5; }
.plan-provenance { margin: 0; font-size: 13px; color: var(--sub-text); }
.full-drawing > summary { cursor: pointer; min-height: 52px; display: flex; align-items: center; font-size: 15px; font-weight: 700; color: var(--waiting-blue, #1d4ed8); }
.full-drawing[open] > summary { margin-bottom: 10px; }
/* ── Reviewer flow (Phase 6): inbox + decision screen ────────────────────── */
.reviewer-greeting { margin: 0; }
.reviewer-inbox-heading { margin: 2px 0 18px; font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.inbox-card { width: 100%; text-align: left; display: grid; gap: 6px; padding: 16px; border: 2px solid var(--border-card); border-radius: var(--radius-card); background: #fff; min-height: 62px; }
.inbox-card:hover { border-color: var(--border-input); }
.inbox-card strong { font-size: 19px; font-weight: 800; color: var(--ink); }
.inbox-card small { font-size: 15px; color: var(--sub-text); }
.wait-chip { display: inline-flex; align-items: center; gap: 7px; justify-self: start; padding: 5px 11px; border-radius: 999px; border: 2px solid var(--caution-border); background: var(--caution-tint); color: var(--caution-text); font: 800 13px var(--sans); letter-spacing: .04em; }
.wait-chip::before { content: ''; width: 8px; height: 8px; flex: none; border-radius: 50%; background: #e5a500; }
.wait-chip.late { border-color: var(--stop-red-border); background: var(--stop-red-tint); color: var(--stop-red-text); }
.wait-chip.late::before { background: var(--stop-red); }
.reviewer-week-line { margin: 16px 0 0; text-align: center; font-size: 15px; color: var(--sub-text); }
.reviewer-governance-disclosure { margin-top: 24px; border: 2px solid var(--border-card); border-radius: var(--radius-card); background: #fff; padding: 0 16px; }
.reviewer-governance-disclosure > summary { cursor: pointer; min-height: 52px; display: flex; align-items: center; font-size: 15px; font-weight: 700; color: var(--sub-text); }
.reviewer-governance-disclosure[open] { padding-bottom: 16px; }
.reviewer-governance-note { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--sub-text); }
.decision-back { justify-self: start; min-height: 52px; padding-left: 0; color: var(--ink); font-size: 16px; }
.decision-title { margin: 6px 0 2px; font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.decision-sub { margin: 0 0 14px; font-size: 15px; color: var(--sub-text); }
#decision-content { display: grid; gap: 4px; }
.photo-strip { display: flex; gap: 12px; margin: 4px 0 14px; }
.photo-strip-img { flex: 1; min-width: 0; height: 88px; object-fit: cover; border-radius: 12px; border: 2px solid var(--border-card); }
.photo-strip-more { flex: 1; min-width: 0; height: 88px; display: grid; place-items: center; border-radius: 12px; border: 2px solid var(--border-card); background: var(--surface); font: 800 17px var(--sans); color: var(--sub-text); }
.decision-sources, .decision-more { border: 2px solid var(--border-card); border-radius: var(--radius-card); background: #fff; padding: 0 16px; margin: 6px 0; }
.decision-sources > summary, .decision-more > summary { cursor: pointer; min-height: 52px; display: flex; align-items: center; font-size: 15px; font-weight: 700; color: var(--waiting-blue); }
.decision-sources[open], .decision-more[open] { padding-bottom: 16px; }
.decision-more-actions { display: grid; gap: 10px; margin-top: 12px; }
.decision-actions { display: grid; gap: 12px; margin-top: 16px; }
.decision-actions .status-pill { justify-self: start; }
.decision-approve { width: 100%; min-height: 62px; }
.decision-sendback { width: 100%; min-height: 56px; font-size: 17px; }

/* ── On-site setup (Phase 7): approved plan checklist ────────────────────── */
#setup-content { display: grid; gap: 0; }
.setup-hero { padding: 18px; border-radius: var(--radius-card); background: var(--go-green); color: #fff; display: grid; gap: 6px; margin-bottom: 20px; }
.setup-hero .status-pill.ready { background: #fff; color: var(--go-green); border-color: #fff; justify-self: start; }
.setup-hero h2 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.setup-hero p { margin: 0; font-size: 15px; color: #c4e4d0; }
.setup-order-title { margin: 0 0 12px; font-size: 18px; font-weight: 800; }
.setup-list { display: grid; gap: 12px; }
.setup-check { display: flex; align-items: center; gap: 14px; min-height: 62px; padding: 14px 16px; border: 2px solid var(--border-choice); border-radius: var(--radius-card); background: #fff; font-size: 17px; font-weight: 700; line-height: 1.35; cursor: pointer; }
.setup-check input { width: 34px; height: 34px; flex: none; margin: 0; accent-color: var(--go-green); cursor: pointer; }
.setup-check.done { border-color: var(--go-green-border); background: var(--go-green-tint); }
.setup-check.done span { text-decoration: line-through; text-decoration-color: var(--go-green); font-weight: 600; }
.setup-progress { margin: 16px 0; font-size: 15px; color: var(--sub-text); }
.setup-done-cta { width: 100%; }
.setup-section .text-button { width: 100%; text-align: center; margin-top: 10px; }

/* ── No signal (Phase 7): calm full-screen, reached from the sync dot ────── */
button.online-dot { background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; }
button.online-dot:focus-visible { outline: 3px solid var(--action-amber); outline-offset: 3px; }
.nosignal-section { display: grid; place-items: center; min-height: 70vh; padding: 40px 22px calc(110px + env(safe-area-inset-bottom)); }
.nosignal-card { max-width: 420px; width: 100%; text-align: center; display: grid; gap: 14px; justify-items: center; }
.nosignal-mark { width: 110px; height: 110px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border-card); display: grid; place-items: center; font-size: 44px; font-weight: 800; color: var(--ink); }
.nosignal-card h2 { margin: 0; font-size: 20px; font-weight: 800; color: var(--sub-text); }
.nosignal-headline { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.nosignal-card p { margin: 0; font-size: 18px; line-height: 1.55; color: var(--sub-text); }
.nosignal-cta { width: 100%; margin-top: 12px; }
/* Reviewer/admin side of the standards wait: a counted status line, deliberately styled as
   information rather than as an action, and never placed beside a verify control. */
.standards-wait-demand-list { display: grid; gap: 10px; }
.standards-wait-demand-list:empty { display: none; }
.standards-wait-demand { margin: 0 0 14px; padding: 12px 14px; border-radius: var(--radius-card); border: 2px solid var(--waiting-blue-border); background: var(--waiting-blue-tint); display: grid; gap: 4px; }
.standards-wait-demand strong { font-size: 14px; color: var(--waiting-blue); }
.standards-wait-demand span { font-size: 14px; line-height: 1.5; color: var(--ink); }
.standards-wait-demand small { font-size: 13px; font-weight: 600; color: var(--sub-text); }
.admin-row .admin-waiting { color: var(--waiting-blue); font-weight: 700; }

/* ── Beta-hardening P1 additions (busy states, retry rows, undo toast) ────── */
button[data-busy='true'] { opacity: 0.75; cursor: wait; }
.crew-retry { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; padding: 12px 16px; border-radius: var(--radius-card); border: 2px solid var(--stop-red-border); background: var(--stop-red-tint); color: var(--ink); font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer; }
.toast .toast-undo { min-height: 52px; min-width: 88px; margin-left: 10px; padding: 8px 14px; border: 0; border-radius: 10px; background: var(--action-amber); color: var(--ink); font-size: 15px; font-weight: 800; font-family: inherit; cursor: pointer; }
.admin-error-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; padding: 12px 14px; border-radius: var(--radius-card); border: 2px solid var(--stop-red-border); background: var(--stop-red-tint); color: var(--ink); font-size: 14px; font-weight: 700; }
.admin-error-banner .secondary-button { min-height: 52px; width: auto; }

/* ── PRD-0003 compliance cards (step 2): collapsible detail groups, Field Mode ── */
.compliance-cards { margin-top: 18px; display: grid; gap: 10px; }
.compliance-cards-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--sub-text); }
.compliance-card { background: var(--card); border: 2px solid var(--border-choice); border-radius: var(--radius-card); overflow: hidden; }
.compliance-card > summary { min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 16px; font-size: 15px; font-weight: 700; color: var(--ink); cursor: pointer; list-style: none; }
.compliance-card > summary::-webkit-details-marker { display: none; }
.compliance-card > summary::after { content: '+'; margin-left: auto; font-size: 20px; font-weight: 800; color: var(--sub-text); }
.compliance-card[open] > summary::after { content: '-'; }
.compliance-card > summary:focus-visible { outline: 3px solid var(--action-amber); outline-offset: -3px; }
.compliance-field { display: block; padding: 8px 16px 12px; font-size: 14px; font-weight: 600; color: var(--sub-text); }
.compliance-field select, .compliance-field input, .compliance-field textarea { width: 100%; min-height: 52px; margin-top: 6px; padding: 10px 12px; border: 2px solid var(--border-choice); border-radius: 10px; background: #fff; color: var(--ink); font-size: 16px; font-family: inherit; }
.compliance-field textarea { min-height: 84px; resize: vertical; }
.compliance-check { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 16px; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; }
.compliance-check input { width: 26px; height: 26px; flex: none; margin: 0; accent-color: var(--action-amber); cursor: pointer; }

/* ── Weather auto-fill and confirmation cards ── */
.wizard-weather-card { background: var(--card); border: 2px solid var(--border-choice); border-radius: var(--radius-card); padding: 16px; margin-top: 14px; display: grid; gap: 12px; }
.weather-report-title { margin: 0; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sub-text); }
.weather-summary-line { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); }
.weather-preview-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; color: var(--ink); }
.weather-preview-list strong { color: var(--sub-text); font-weight: 600; }
.weather-autofill-box { padding: 8px 16px 4px; }
.weather-autofill-card { background: #f5f6f8; border: 1px solid var(--border-choice); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--ink); }
.weather-autofill-card p { margin: 0; font-weight: 600; }
.wizard-manual-toggle { min-height: 52px; }