/*
 * Site Engineer visual system
 * Scope: every field-work route except Teams. The Teams route intentionally
 * inherits its existing implementation and styling without overrides here.
 */

.role-site-engineer:not(.route-chat) {
  /* SE owns its field-work layout, while PM remains the single source of
     truth for every light/dark colour and elevation token. */
  --se-canvas: var(--bg);
  --se-nav: var(--surface-container-lowest);
  --se-surface: var(--panel);
  --se-surface-soft: var(--surface-container-low);
  --se-ink: var(--ink);
  --se-muted: var(--muted);
  --se-line: var(--line);
  --se-brand: var(--brand);
  --se-brand-strong: var(--brand);
  --se-focus: var(--brand);
  --se-accent: var(--brand-2);
  --se-accent-soft: var(--brand-soft);
  --se-warning: var(--amber);
  --se-warning-soft: color-mix(in srgb, var(--amber) 18%, var(--surface-container-lowest));
  --se-danger: var(--red);
  --se-danger-soft: color-mix(in srgb, var(--red) 14%, var(--surface-container-lowest));
  --se-info: var(--blue);
  --se-info-soft: color-mix(in srgb, var(--blue) 14%, var(--surface-container-lowest));
  --se-shadow: var(--shadow-soft);
  --se-shadow-float: var(--shadow);
  background: transparent;
  color: var(--se-ink);
  grid-template-columns: 248px minmax(0, 1fr);
}

.role-site-engineer:not(.route-chat) ::selection {
  background: color-mix(in srgb, var(--se-accent) 34%, transparent);
  color: var(--se-ink);
}

.role-site-engineer:not(.route-chat) * {
  scrollbar-color: color-mix(in srgb, var(--se-muted) 45%, transparent) transparent;
  scrollbar-width: thin;
}

.role-site-engineer:not(.route-chat):not(.map-mode):not(.settings-mode) .main,
.role-site-engineer:not(.route-chat):not(.map-mode):not(.settings-mode) .content {
  background: transparent;
}

.role-site-engineer:not(.route-chat) .sidebar {
  padding: 22px 16px;
  background: var(--se-surface);
  border-color: var(--se-line);
}

.role-site-engineer:not(.route-chat) .nav-group {
  gap: 20px;
}

.role-site-engineer:not(.route-chat) .nav-section {
  display: grid;
  gap: 4px;
}

.role-site-engineer:not(.route-chat) .nav-label {
  margin: 0 12px 6px;
  color: var(--se-muted);
  font-size: 10px;
  letter-spacing: .12em;
}

.role-site-engineer:not(.route-chat) .nav-btn {
  min-height: 46px;
  padding: 10px 12px;
  border-radius: 13px !important;
  color: var(--se-muted);
}

.role-site-engineer:not(.route-chat) .nav-btn.active {
  background: var(--se-accent-soft);
  color: var(--se-brand-strong);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--se-accent) 18%, transparent);
}

.role-site-engineer:not(.route-chat) .topbar {
  min-height: 72px;
  padding: 12px 24px;
  background: var(--page-wash);
  border-color: var(--se-line);
}

.role-site-engineer:not(.route-chat) .topbar > div:first-of-type {
  margin-right: auto;
}

.role-site-engineer:not(.route-chat) .topbar > div:first-of-type > strong {
  color: var(--se-ink);
  font-size: 17px;
  letter-spacing: -.025em;
}

.role-site-engineer:not(.route-chat) .topbar > div:first-of-type > .muted {
  margin-top: 2px;
  color: var(--se-muted);
  font-size: 12px;
}

.role-site-engineer:not(.route-chat) .mobile-menu,
.role-site-engineer:not(.route-chat) .topbar-map-button,
.role-site-engineer:not(.route-chat) .notify-button,
.role-site-engineer:not(.route-chat) .profile {
  background: var(--surface-container-lowest);
  border: 1px solid var(--se-line);
  color: var(--se-ink);
  box-shadow: 0 8px 22px rgba(20, 48, 40, .06);
}

.role-site-engineer:not(.route-chat) .topbar-map-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 14px !important;
}

.role-site-engineer:not(.route-chat) .profile .avatar {
  background: var(--se-accent-soft);
  color: var(--se-brand-strong);
}

.role-site-engineer:not(.route-chat):not(.map-mode):not(.settings-mode) .content {
  width: 100%;
  max-width: 1120px;
  padding: clamp(22px, 4vw, 48px);
  gap: 24px;
}

.role-site-engineer:not(.route-chat) .page-head {
  max-width: 920px;
  width: 100%;
  margin: 0 auto 2px;
  align-items: flex-end;
}

.role-site-engineer:not(.route-chat) .page-head h1,
.role-site-engineer:not(.route-chat) .se-page-intro h1 {
  margin: 0;
  color: var(--se-ink);
  font-size: clamp(30px, 5vw, 48px);
  line-height: 1.04;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.role-site-engineer:not(.route-chat) .page-head p,
.role-site-engineer:not(.route-chat) .se-page-intro p {
  max-width: 64ch;
  margin: 8px 0 0;
  color: var(--se-muted);
  font-size: 15px;
  line-height: 1.55;
}

.role-site-engineer:not(.route-chat) .btn {
  min-height: 46px;
  padding: 11px 17px;
  /* The manager's shape language: core.css gives every .btn 22px, and this
     sheet used to trim it to 14, which is what made the engineer's buttons read
     as square corners next to the same button on a manager screen. */
  border-radius: 22px !important;
  background: var(--se-brand);
  color: #fff;
  box-shadow: none;
}

.role-site-engineer:not(.route-chat) .btn.secondary {
  background: var(--se-surface);
  color: var(--se-brand-strong);
  border: 1px solid var(--se-line);
}

.role-site-engineer:not(.route-chat) .btn.danger {
  background: var(--se-danger-soft);
  color: var(--se-danger);
  border: 1px solid color-mix(in srgb, var(--se-danger) 30%, var(--se-line));
}

.role-site-engineer:not(.route-chat) .btn:disabled,
.role-site-engineer:not(.route-chat) button:disabled {
  opacity: .52;
  cursor: not-allowed;
}

.role-site-engineer:not(.route-chat) button:focus-visible,
.role-site-engineer:not(.route-chat) a:focus-visible,
.role-site-engineer:not(.route-chat) input:focus-visible,
.role-site-engineer:not(.route-chat) select:focus-visible,
.role-site-engineer:not(.route-chat) textarea:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

/* Home — the field shift rail. */
.se-home {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  gap: 20px;
  align-items: start;
}

.se-shift-head {
  grid-column: 1 / -1;
  padding: 8px 2px 4px;
}

.se-project-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.se-project-line > span:first-child {
  color: var(--se-brand-strong);
  font-size: 13px;
  font-weight: 750;
}

.se-sync-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--se-muted);
  font-size: 12px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.se-sync-state i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--se-warning);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--se-warning) 15%, transparent);
}

.se-sync-state.ready i {
  background: var(--se-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--se-accent) 15%, transparent);
}

.se-shift-head h1 {
  max-width: 14ch;
  margin: 0;
  color: var(--se-ink);
  font-size: clamp(38px, 7vw, 68px);
  line-height: .98;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.se-shift-head > p {
  margin: 13px 0 0;
  color: var(--se-muted);
  font-size: 16px;
}

.se-focus-card {
  grid-column: 1;
  position: relative;
  min-height: 320px;
  padding: clamp(24px, 4vw, 38px);
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  border: 1px solid color-mix(in srgb, var(--se-focus) 76%, #000);
  border-radius: 28px !important;
  /* Fallbacks matter here: every --se-* token is scoped to
     `.role-site-engineer:not(.route-chat)`, but this card also renders for
     roles that never get that class (a viewer on the home route). Without the
     fallback the background was an unresolvable var() -> transparent, leaving
     near-white text on the light page wash at 1.42:1 - an invisible card. */
  background: var(--se-focus, var(--brand));
  color: var(--se-focus-ink, #f6fffa);
  box-shadow: var(--se-shadow-float);
  isolation: isolate;
  animation: se-focus-arrive .52s cubic-bezier(.16, 1, .3, 1) both;
}

.se-focus-card::after {
  content: "";
  position: absolute;
  right: -92px;
  bottom: -126px;
  width: 300px;
  height: 300px;
  border: 42px solid rgba(255,255,255,.07);
  border-radius: 50%;
  z-index: -1;
}

.se-focus-state {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.13);
  color: #d9f6e7;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
}

.se-focus-state.complete {
  background: rgba(99,211,154,.18);
}

.se-focus-copy h2 {
  max-width: 15ch;
  margin: 18px 0 10px;
  color: #fff;
  font-size: clamp(28px, 4.6vw, 44px);
  line-height: 1.05;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.se-focus-copy > p {
  max-width: 58ch;
  margin: 0;
  color: rgba(240,255,247,.72);
  font-size: 15px;
  line-height: 1.55;
}

.se-focus-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.se-focus-meta span {
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 10px;
  background: rgba(255,255,255,.07);
  color: #eefaf4;
  font-size: 12px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.se-focus-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.se-focus-actions .btn {
  background: #f6fffa;
  color: #12372d;
}

.se-focus-actions .btn.secondary {
  background: rgba(255,255,255,.08);
  color: #f6fffa;
  border-color: rgba(255,255,255,.2);
}

.se-action-rail {
  grid-column: 2;
  overflow: hidden;
  border: 1px solid var(--se-line);
  border-radius: 22px;
  background: var(--se-surface);
  box-shadow: var(--se-shadow);
}

.se-action-rail > button {
  width: 100%;
  min-height: 86px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 13px;
  padding: 15px 16px;
  border-radius: 0 !important;
  background: transparent;
  color: var(--se-ink);
  text-align: left;
  transition: background .16s ease, color .16s ease;
}

.se-action-rail > button + button {
  border-top: 1px solid var(--se-line);
}

.se-action-rail > button:hover {
  background: var(--se-surface-soft);
}

.se-action-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--se-accent-soft);
  color: var(--se-brand-strong);
}

.se-action-icon svg {
  width: 21px;
  height: 21px;
}

.se-action-rail strong,
.se-action-rail small {
  display: block;
}

.se-action-rail strong {
  color: var(--se-ink);
  font-size: 15px;
}

.se-action-rail small {
  margin-top: 4px;
  color: var(--se-muted);
  font-size: 12px;
  font-weight: 550;
}

.se-action-rail b {
  color: var(--se-muted);
}

.se-action-rail b svg {
  width: 18px;
  height: 18px;
}

.se-field-summary {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 18px 0;
  border-top: 1px solid var(--se-line);
  border-bottom: 1px solid var(--se-line);
}

.se-field-summary > div {
  min-width: 0;
  padding: 0 22px;
}

.se-field-summary > div:first-child {
  padding-left: 2px;
}

.se-field-summary > div + div {
  border-left: 1px solid var(--se-line);
}

.se-field-summary strong,
.se-field-summary span {
  display: block;
}

.se-field-summary strong {
  color: var(--se-ink);
  font-size: 25px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.se-field-summary span {
  margin-top: 7px;
  color: var(--se-muted);
  font-size: 12px;
}

.se-evidence-log {
  grid-column: 1 / -1;
  border: 1px solid var(--se-line);
  border-radius: 22px;
  background: var(--se-surface);
  overflow: hidden;
}

.se-evidence-log > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--se-line);
}

.se-evidence-log h2,
.se-evidence-log p {
  margin: 0;
}

.se-evidence-log h2 {
  font-size: 19px;
  letter-spacing: -.025em;
}

.se-evidence-log p {
  margin-top: 4px;
  color: var(--se-muted);
  font-size: 12px;
}

.se-evidence-log > header button {
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 16px !important;
  background: var(--se-surface-soft);
  color: var(--se-brand-strong);
  font-size: 12px;
}

.se-evidence-row {
  position: relative;
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 17px 22px;
}

.se-evidence-row + .se-evidence-row {
  border-top: 1px solid var(--se-line);
}

.se-evidence-mark {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--se-warning);
  box-shadow: 0 0 0 4px var(--se-warning-soft);
}

.se-evidence-mark.green { background: var(--se-accent); box-shadow: 0 0 0 4px var(--se-accent-soft); }
.se-evidence-mark.red { background: var(--se-danger); box-shadow: 0 0 0 4px var(--se-danger-soft); }
.se-evidence-mark.blue { background: var(--se-info); box-shadow: 0 0 0 4px var(--se-info-soft); }

.se-evidence-row strong,
.se-evidence-row span {
  display: block;
}

.se-evidence-row strong { color: var(--se-ink); font-size: 14px; }
.se-evidence-row div > span { margin-top: 3px; color: var(--se-muted); font-size: 12px; }

.se-evidence-empty,
.se-report-empty,
.se-duty-empty {
  padding: 42px 24px;
  text-align: center;
}

.se-evidence-empty strong,
.se-evidence-empty span {
  display: block;
}

.se-evidence-empty span { margin-top: 6px; color: var(--se-muted); }

/* Duties — one actionable queue instead of a dashboard table. */
.se-duty-page,
.se-reports-page {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  gap: 24px;
}

.se-report-detail { display:grid; gap:18px; max-width:980px; margin:0 auto; }
.se-report-detail-head { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; padding:4px 0 18px; border-bottom:1px solid var(--line); }
/* Pre-existing latent bug, caught only now by actually rendering the page: an
   inline <svg> with no width/height is sized by the UA as a 300x150 replaced
   element, so the back chevron filled almost the whole button. */
.se-report-detail-back svg { width: 20px; height: 20px; }
.se-report-detail-head h1 { margin:8px 0 4px; font-size:clamp(28px,4vw,46px); letter-spacing:-.04em; }
.se-report-detail-kicker, .se-report-detail-label { margin:0; color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.se-report-detail-status { display:grid; justify-items:end; gap:8px; color:var(--muted); font-size:13px; white-space:nowrap; }
.se-report-detail-summary, .se-report-detail-section { border:1px solid var(--line); border-radius:18px; background:var(--surface); padding:18px; }
.se-report-detail-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.se-report-detail-summary div { display:grid; gap:5px; }
.se-report-detail-summary span { color:var(--muted); font-size:12px; font-weight:700; }
.se-report-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.se-report-detail-section > p:not(.se-report-detail-label) { margin:9px 0 0; line-height:1.6; white-space:pre-wrap; }
.se-report-detail-section.has-comment { border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); }
.se-report-detail-section-head { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.se-report-detail-section h2 { margin:7px 0 0; font-size:20px; }
.se-report-detail-media { display:grid; gap:12px; margin-top:16px; }
.se-report-detail-media .photo-block { margin:0; padding:12px; border:1px solid var(--line); border-radius:14px; background:var(--surface-2); }
.se-report-detail-media .photo-block img { display:block; border-radius:10px; }
.se-report-detail-actions { display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; }
.report-view-btn { white-space:nowrap; }

@media (max-width: 700px) {
  .se-report-detail-head { display:grid; }
  .se-report-detail-status { justify-items:start; }
  .se-report-detail-summary, .se-report-detail-grid { grid-template-columns:1fr 1fr; }
  .se-report-detail-summary { gap:14px 10px; }
  .se-report-detail-section-head { display:grid; }
  .se-report-detail-actions { justify-content:stretch; }
  .se-report-detail-actions .btn { flex:1 1 180px; }
}

.se-page-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 4px 2px 0;
}

.se-count-chip {
  flex: none;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 8px 13px;
  border-radius: 999px;
  background: var(--se-accent-soft);
  color: var(--se-brand-strong);
  font-size: 12px;
  font-weight: 800;
}

.se-duty-strip,
.se-report-statuses {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  border: 1px solid var(--se-line);
  border-radius: 18px;
  background: var(--se-surface);
}

.se-duty-strip > div,
.se-report-statuses > div,
.se-report-statuses > button {
  padding: 18px 20px;
}

.se-duty-strip > div + div,
.se-report-statuses > * + * {
  border-left: 1px solid var(--se-line);
}

/* Each count is the way into its own page. Same tile, now a real control:
   left-aligned like the plain tile it replaces, with the chevron riding beside
   the label so the number keeps the emphasis. */
.se-status-door {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-instant) var(--ease-out);
}
.se-status-door:hover { background: var(--se-surface-2, var(--surface-container-low)); }
.se-status-door:active { transform: scale(var(--press)); }
.se-status-door:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; }
/* The label and the chevron are one line: on its own row the chevron read as a
   stray mark rather than a way through. */
.se-status-door > span {
  display: flex;
  align-items: center;
  gap: 4px;
}
.se-status-chev {
  flex: none;
  width: 13px;
  height: 13px;
  opacity: .55;
}

/* The bucket page. It rides settings-mode itself (app.js's shell() puts
   my-report-status through the same isSettingsRoute check as Settings), so
   .settings-subpage-head/.settings-back-btn/.settings-title already give it
   the real fixed topbar Settings has -- hidden app topbar, floating
   bottom-nav pill on this role, safe-area handling, the works -- with no
   bespoke bar of its own to keep in sync. Entering a bucket is still a
   descent, so the page arrives rather than sliding in from the side. */
.se-status-page { animation: se-status-arrive var(--dur-base) var(--ease-out) both; }
/* The head gains a trailing count pill Settings' own subpages don't have;
   the title has to give up the space for it. */
.se-status-subpage-head .settings-title {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.se-status-subtitle { margin: 0; }
.se-status-count-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--se-surface-2, var(--surface-container-low));
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.se-status-count-pill.se-status-pending { color: var(--blue); }
.se-status-count-pill.se-status-approved { color: var(--green); }
.se-status-count-pill.se-status-returned { color: var(--red); }

/* One compact row per report -- title, date and manhole, a chevron. A native
   <details>, so tapping opens the report's own table in place (no route, no
   page, nothing to navigate back out of) rather than the tall multi-field
   mobile card the project page's own report list uses, which ate the whole
   screen for two items here. */
.se-status-list { display: grid; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--surface); }
.se-status-row-item { border-bottom: 1px solid var(--line); }
.se-status-row-item:last-child { border-bottom: 0; }
.se-status-row-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 60px;
  padding: 12px 16px;
  list-style: none;
  cursor: pointer;
}
.se-status-row-item > summary::-webkit-details-marker { display: none; }
.se-status-row-item > summary:hover { background: var(--se-surface-2, var(--surface-container-low)); }
.se-status-row-item > summary:active { transform: scale(var(--press)); }
.se-status-row-item > summary:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; }
.se-status-row-copy { display: grid; gap: 3px; min-width: 0; }
.se-status-row-copy strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.se-status-row-copy small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.se-status-row-item .se-status-chev { flex: none; transition: transform var(--dur-fast) var(--ease-out); }
.se-status-row-item[open] .se-status-chev { transform: rotate(90deg); }
.se-status-row-detail { padding: 0 16px 16px; display: grid; gap: 12px; }
.se-status-detail-field { display: grid; gap: 3px; }
.se-status-detail-field span { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.se-status-detail-field strong { font-size: 14px; font-weight: 600; word-break: break-word; }

@keyframes se-status-arrive {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to { opacity: 1; transform: none; }
}

/* A list arriving as a list, capped at six rows so it stays an arrival and
   never becomes a reveal sequence. */
.se-status-page .se-status-row-item {
  animation: se-status-row var(--dur-fast) var(--ease-out) both;
}
.se-status-page .se-status-row-item:nth-child(1) { animation-delay: 0ms; }
.se-status-page .se-status-row-item:nth-child(2) { animation-delay: 24ms; }
.se-status-page .se-status-row-item:nth-child(3) { animation-delay: 48ms; }
.se-status-page .se-status-row-item:nth-child(4) { animation-delay: 72ms; }
.se-status-page .se-status-row-item:nth-child(5) { animation-delay: 96ms; }
.se-status-page .se-status-row-item:nth-child(n+6) { animation-delay: 120ms; }

@keyframes se-status-row {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .se-status-door { transition: none; }
  .se-status-door:active { transform: none; }
  .se-status-row-item > summary:active { transform: none; }
  .se-status-row-item .se-status-chev { transition: none; }
  .se-status-page,
  .se-status-page .se-status-row-item { animation: none; }
}

.se-duty-strip strong,
.se-duty-strip span,
.se-report-statuses strong,
.se-report-statuses span {
  display: block;
}

.se-duty-strip strong,
.se-report-statuses strong {
  color: var(--se-ink);
  font-size: 26px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.se-duty-strip span,
.se-report-statuses span {
  margin-top: 7px;
  color: var(--se-muted);
  font-size: 12px;
}

.se-report-statuses .approved strong { color: var(--se-accent); }
.se-report-statuses .returned strong { color: var(--se-danger); }
.se-report-statuses .pending strong { color: var(--se-warning); }

.se-section-heading,
.se-report-tools {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.se-section-heading h2,
.se-section-heading p,
.se-report-tools h2,
.se-report-tools p {
  margin: 0;
}

.se-section-heading h2,
.se-report-tools h2 {
  color: var(--se-ink);
  font-size: 21px;
  letter-spacing: -.025em;
}

.se-section-heading p,
.se-report-tools p {
  margin-top: 5px;
  color: var(--se-muted);
  font-size: 13px;
}

.role-site-engineer.route-tasks .mobile-task-cards {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.role-site-engineer.route-tasks .task-mobile-card {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--se-line) !important;
  border-left-width: 1px !important;
  border-radius: 20px !important;
  background: var(--se-surface) !important;
  box-shadow: none;
}

.role-site-engineer.route-tasks .task-mobile-head {
  align-items: flex-start;
  gap: 12px;
}

.role-site-engineer.route-tasks .task-mobile-head strong {
  color: var(--se-ink);
  font-size: 18px;
  letter-spacing: -.025em;
}

.role-site-engineer.route-tasks .task-mobile-head p {
  margin-top: 7px;
  color: var(--se-muted);
  font-size: 13px;
  line-height: 1.5;
}

.role-site-engineer.route-tasks .task-mobile-card dl {
  gap: 0;
  margin: 18px 0;
  border-top: 1px solid var(--se-line);
  border-bottom: 1px solid var(--se-line);
}

.role-site-engineer.route-tasks .task-mobile-card dl > div {
  padding: 12px 0;
}

.role-site-engineer.route-tasks .task-mobile-card dt {
  color: var(--se-muted);
  font-family: inherit;
  font-size: 10px;
  letter-spacing: .06em;
}

.role-site-engineer.route-tasks .task-mobile-card dd {
  color: var(--se-ink);
  font-size: 13px;
}

.role-site-engineer.route-tasks .task-mobile-actions .btn {
  width: 100%;
}

.se-duty-empty,
.se-report-empty {
  border: 1px dashed var(--se-line);
  border-radius: 20px;
  background: color-mix(in srgb, var(--se-surface) 72%, transparent);
}

.se-duty-empty > span,
.se-report-empty > span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
  border-radius: 14px;
  background: var(--se-accent-soft);
  color: var(--se-brand-strong);
}

.se-duty-empty h2,
.se-report-empty h2 { margin: 0; color: var(--se-ink); }
.se-duty-empty p,
.se-report-empty p { max-width: 52ch; margin: 8px auto 18px; color: var(--se-muted); line-height: 1.55; }

/* New report — a two-stage capture sheet with one stable submit zone. */
.role-site-engineer.route-new-report .content {
  max-width: 1280px;
}
.role-site-engineer.route-new-report .page-head,
.role-site-engineer.route-new-report #reportForm,
.role-site-engineer.route-new-report .content > .card {
  max-width: 100%;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.role-site-engineer.route-new-report .page-head {
  position: relative;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--se-line);
}

.role-site-engineer.route-new-report .page-head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 46%;
  height: 3px;
  border-radius: 999px;
  background: var(--se-accent);
}

.role-site-engineer.route-new-report #reportForm {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 18px;
}
/* The supervision report is a single-column, full-width form; the 2-column
   grid above is the legacy report layout and must not split its sections. */
.role-site-engineer.route-new-report #reportForm.se-sr {
  grid-template-columns: 1fr;
}

.role-site-engineer.route-new-report #reportForm > .form-card {
  height: 100%;
  padding: 24px;
  border: 1px solid var(--se-line) !important;
  border-radius: 22px !important;
  background: var(--se-surface) !important;
  box-shadow: none;
}

.role-site-engineer.route-new-report .section-title {
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--se-line);
}

.role-site-engineer.route-new-report .section-title b {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 10px !important;
  background: var(--se-accent-soft);
  color: var(--se-brand-strong);
}

.role-site-engineer.route-new-report .section-title h2 {
  color: var(--se-ink);
  font-size: 19px;
}

.role-site-engineer.route-new-report .form-grid {
  gap: 16px;
}

.role-site-engineer.route-new-report label > span {
  color: var(--se-muted);
  font-size: 12px;
  font-weight: 750;
}

.role-site-engineer.route-new-report .control,
.role-site-engineer.route-new-report textarea {
  min-height: 50px;
  border: 1px solid var(--se-line) !important;
  /* inputs, selects and textareas are 22px everywhere else in the app. */
  border-radius: 22px !important;
  background: var(--se-canvas) !important;
  color: var(--se-ink) !important;
  box-shadow: none;
}

.role-site-engineer.route-new-report textarea {
  min-height: 132px;
}

.role-site-engineer.route-new-report .file-picker-ui {
  min-height: 116px;
  border: 1px dashed color-mix(in srgb, var(--se-accent) 55%, var(--se-line));
  border-radius: 16px !important;
  background: var(--se-accent-soft);
}

.role-site-engineer.route-new-report .report-file-input .file-picker-icon .material-symbols-outlined {
  display: none;
}

.role-site-engineer.route-new-report .report-file-input .file-picker-icon::before {
  content: "";
  width: 32px;
  height: 32px;
  display: block;
  background: currentColor;
  -webkit-mask: url("../icons/camera-upload.svg") center / contain no-repeat;
  mask: url("../icons/camera-upload.svg") center / contain no-repeat;
}

.role-site-engineer.route-new-report .form-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  border: 1px solid var(--se-line);
  border-radius: 18px;
  background: var(--se-surface);
}

.role-site-engineer.route-new-report .form-actions p {
  max-width: 64ch;
  margin: 0;
  color: var(--se-muted);
}

.role-site-engineer.route-new-report .manhole-sketch-card {
  grid-column: 1 / -1;
}

/* My reports — evidence history, not a generic data table. */
.se-report-history {
  padding: 20px;
  border: 1px solid var(--se-line);
  border-radius: 22px;
  background: var(--se-surface);
}

.role-site-engineer.route-my-reports .mobile-report-cards {
  display: none;
}

.role-site-engineer.route-my-reports .table-wrap {
  border: 1px solid var(--se-line) !important;
  /* 22px matches the manager's tables; overflow clipping is what actually
     rounds the table inside, since a <table> paints its own square corners
     straight over the wrapper's radius. */
  border-radius: 22px !important;
  overflow: hidden !important;
  box-shadow: none;
}

.role-site-engineer.route-my-reports table {
  background: var(--se-surface) !important;
}

.role-site-engineer.route-my-reports th {
  background: var(--se-surface-soft) !important;
  color: var(--se-muted);
}

.role-site-engineer.route-my-reports td {
  color: var(--se-ink);
  border-color: var(--se-line);
}

/* Notifications and settings are quiet utility surfaces. */
.role-site-engineer.route-notifications .notifications-feed {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  gap: 10px;
}

.role-site-engineer.route-notifications .notification-item {
  width: 100%;
  padding: 18px 20px;
  border: 1px solid var(--se-line) !important;
  border-radius: 18px !important;
  background: var(--se-surface) !important;
  box-shadow: none;
  text-align: left;
}

.role-site-engineer.route-notifications .notification-item.unread {
  background: var(--se-accent-soft) !important;
}

.role-site-engineer.route-notifications .notification-item h2 {
  margin: 5px 0 6px;
  color: var(--se-ink);
  font-size: 17px;
}

.role-site-engineer.route-notifications .notification-item p {
  color: var(--se-muted);
}

.role-site-engineer.settings-mode {
  min-height: 100dvh;
  padding-top: env(safe-area-inset-top, 0px);
  background: transparent;
}

body.dark .role-site-engineer.settings-mode .main, body.dark .role-site-engineer.settings-mode .content{
  background: var(--se-canvas) !important;
  color: var(--se-ink) !important;
}

.role-site-engineer.settings-mode .content {
  max-width: 820px;
  min-height: 100dvh;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: auto;
  scroll-padding-top: 72px;
}

.role-site-engineer.settings-mode .settings-shell {
  width: 100%;
  max-width: none;
  margin: 0 !important;
  padding: 0 24px 48px;
  gap: 24px;
}

.role-site-engineer.settings-mode .settings-subpage-head {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 40 !important;
  box-sizing: border-box;
  height: 64px !important;
  min-height: 64px !important;
  margin: 0 !important;
  padding: 10px 12px 9px 12px !important;
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--surface-container-lowest) 94%, transparent) !important;
  border-color: var(--se-line) !important;
  border-bottom: 1px solid var(--se-line);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.role-project-manager.settings-mode .settings-subpage-head {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 40 !important;
  box-sizing: border-box;
  height: 64px !important;
  min-height: 64px !important;
  margin: 0 !important;
  padding: 10px 12px 9px 12px !important;
}

.role-site-engineer.settings-mode .settings-back-btn {
  width: 46px;
  height: 46px;
  border: 1px solid var(--se-line);
  border-radius: 14px !important;
  background: var(--surface-container-low);
  color: var(--se-ink);
  flex: 0 0 46px;
}

.role-site-engineer.settings-mode .settings-title {
  color: var(--se-ink);
  font-size: 30px;
  letter-spacing: -.035em;
}

.role-site-engineer.settings-mode .settings-group-card {
  border: 1px solid var(--se-line) !important;
  border-radius: 18px !important;
  background: var(--se-surface) !important;
  box-shadow: none;
}

.role-site-engineer.settings-mode .settings-icon-row-link {
  min-height: 58px;
  color: var(--se-ink);
}

.role-site-engineer.settings-mode .settings-row-icon {
  background: var(--se-surface-soft);
  color: var(--se-brand-strong);
}

.role-site-engineer.settings-mode .settings-profile-row:hover,
.role-site-engineer.settings-mode .settings-profile-row:focus-visible,
.role-site-engineer.settings-mode .settings-icon-row-link:hover {
  background: var(--se-surface-soft);
}

/* Map owns the whole viewport; Settings keeps the app navigation visible. */
.role-site-engineer.map-mode .bottom-nav {
  display: none !important;
}

.role-site-engineer.settings-mode .bottom-nav,
/* Settings keeps the rail visible; it just has to stay the same floating pill
   it is everywhere else rather than snapping back to a full-bleed bar. */
.role-project-manager.settings-mode .bottom-nav {
  display: grid !important;
  position: fixed !important;
  left: var(--nav-inset, 14px) !important;
  right: var(--nav-inset, 14px) !important;
  bottom: var(--bottom-dock) !important;
  z-index: 30 !important;
}

.role-site-engineer.settings-mode .content,
.role-project-manager.settings-mode .content {
  padding-top: 72px !important;
  padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px)) !important;
}

body.dark .role-site-engineer:not(.route-chat) .se-focus-card,
body.dark .role-site-engineer:not(.route-chat) .se-action-rail > button,
body.dark .role-site-engineer:not(.route-chat) .file-picker-ui {
  background: var(--panel) !important;
  border-color: var(--line) !important;
}

body.dark .role-site-engineer:not(.route-chat) .se-focus-state.complete {
  background: var(--surface-container) !important;
  color: var(--ink) !important;
}

@keyframes se-focus-arrive {
  from { clip-path: inset(0 0 18% 0 round 28px); transform: translateY(12px); filter: saturate(.75); }
  to { clip-path: inset(0 round 28px); transform: translateY(0); filter: saturate(1); }
}

@media (max-width: 980px) {
  .role-site-engineer:not(.route-chat):not(.map-mode):not(.settings-mode) {
    display: block;
    min-height: 100dvh;
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  }

  .role-site-engineer:not(.route-chat) .topbar,
  .role-site-engineer:not(.route-chat) .topbar.mobile-scroll-hidden {
    position: sticky;
    top: 0;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* The engineer's gutter is the app's gutter (--page-pad, core.css): this
     was hardcoded 16px while every other role rendered 12px, so the SE's
     pages were the narrowest in the app on the smallest screens. */
  .role-site-engineer:not(.route-chat):not(.map-mode):not(.settings-mode) .content {
    max-width: none;
    padding: 20px max(var(--page-pad), env(safe-area-inset-left, 0px)) 28px max(var(--page-pad), env(safe-area-inset-right, 0px));
  }

  /* Same floating pill the manager gets, on the engineer's own surface. The
     engineer rail carries five destinations, so it rests on a tighter inset.
     Static: position and size never change on scroll or tap. */
  .role-site-engineer:not(.route-chat) .bottom-nav {
    --nav-inset: max(12px, env(safe-area-inset-left, 0px));
    position: fixed !important;
    z-index: 50 !important;
    left: var(--nav-inset) !important;
    right: max(12px, env(safe-area-inset-right, 0px)) !important;
    bottom: var(--bottom-dock) !important;
    display: grid;
    grid-template-columns: repeat(var(--nav-count, 5), minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 6px 8px !important;
    border: 1px solid color-mix(in srgb, var(--line) 70%, transparent) !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--surface-container-lowest) 97%, transparent) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .18) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .role-site-engineer:not(.route-chat) .bottom-nav::after,
  .role-site-engineer:not(.route-chat) .bottom-nav::before {
    display: none !important;
  }

  /* Height follows the content, floored at Apple's 44pt touch target, which
     matches the manager rail. */
  .role-site-engineer:not(.route-chat) .bottom-nav button {
    min-width: 0;
    min-height: 44px !important;
    height: auto !important;
    padding: 4px 2px;
    border-radius: 22px !important;
    background: transparent !important;
    color: var(--se-muted) !important;
    transform: none !important;
  }

  /* The active/pressed highlight is a fixed-size circle behind the icon
     (see .bottom-icon sizing below) -- it never resizes the button. */
  .role-site-engineer:not(.route-chat) .bottom-nav button.active,
  .role-site-engineer:not(.route-chat) .bottom-nav button.pressed {
    background: transparent !important;
    color: var(--se-ink) !important;
  }

  body.dark .role-site-engineer:not(.route-chat) .bottom-nav button.active,
  body.dark .role-site-engineer:not(.route-chat) .bottom-nav button.pressed {
    color: #ffffff !important;
  }

  .role-site-engineer:not(.route-chat) .bottom-nav .bottom-icon {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    transition: background .16s ease, color .16s ease;
  }

  .role-site-engineer:not(.route-chat) .bottom-nav button.active .bottom-icon,
  .role-site-engineer:not(.route-chat) .bottom-nav button.pressed .bottom-icon {
    background: linear-gradient(145deg, #73db9a, #b8f4c2) !important;
    box-shadow: 0 4px 12px rgba(53, 168, 83, .28) !important;
    color: inherit !important;
  }

  body.dark .role-site-engineer:not(.route-chat) .bottom-nav button.active .bottom-icon,
  body.dark .role-site-engineer:not(.route-chat) .bottom-nav button.pressed .bottom-icon {
    background: linear-gradient(145deg, #e15a5a, #ff9a9a) !important;
    box-shadow: 0 4px 12px rgba(150, 35, 35, .30) !important;
    color: inherit !important;
  }

  .role-site-engineer:not(.route-chat) .bottom-nav button.pressed .bottom-label {
    color: inherit !important;
  }

  @media (prefers-reduced-motion: reduce) {
    .role-site-engineer:not(.route-chat) .bottom-nav .bottom-icon { transition: none !important; }
  }

  .role-site-engineer:not(.route-chat) .bottom-nav .bottom-icon svg {
    width: 24px;
    height: 24px;
  }

  /* Icon-only rail: the label stays in the markup for screen readers
     (aria-label on the button covers it too) but is not shown. */
  .role-site-engineer:not(.route-chat) .bottom-nav .bottom-label {
    display: none !important;
  }

  .se-home {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .se-shift-head,
  .se-focus-card,
  .se-action-rail,
  .se-field-summary,
  .se-evidence-log {
    grid-column: 1;
  }

  .se-shift-head h1 {
    font-size: clamp(36px, 11vw, 52px);
  }

  .se-focus-card {
    min-height: 300px;
  }

  .se-action-rail > button {
    min-height: 78px;
  }

  .role-site-engineer.route-tasks .mobile-task-cards {
    grid-template-columns: 1fr;
  }

  .role-site-engineer.route-new-report #reportForm {
    grid-template-columns: 1fr;
  }

  .role-site-engineer.route-new-report .form-actions,
  .role-site-engineer.route-new-report .manhole-sketch-card {
    grid-column: 1;
  }

  .role-site-engineer.route-my-reports .mobile-report-cards {
    display: grid !important;
    gap: 12px;
  }

  .role-site-engineer.route-my-reports .table-wrap {
    display: none !important;
  }

  .role-site-engineer.route-my-reports .report-mobile-card {
    padding: 18px;
    border: 1px solid var(--se-line) !important;
    border-radius: 18px !important;
    background: var(--se-surface) !important;
    box-shadow: none;
  }

  .role-site-engineer.route-my-reports .report-mobile-meta {
    gap: 0;
    margin-top: 14px;
    border-top: 1px solid var(--se-line);
  }

  .role-site-engineer.route-my-reports .report-mobile-meta > div {
    padding: 12px 0;
    border-bottom: 1px solid var(--se-line);
  }

  .role-site-engineer.route-my-reports .report-mobile-actions .btn-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 620px) {
  .role-site-engineer:not(.route-chat) .topbar {
    min-height: 64px;
    padding: 9px 12px;
    gap: 8px;
  }

  .role-site-engineer:not(.route-chat) .mobile-menu,
  .role-site-engineer:not(.route-chat) .topbar-map-button,
  .role-site-engineer:not(.route-chat) .notify-button {
    width: 42px;
    height: 42px;
    flex: none;
  }

  .role-site-engineer:not(.route-chat) .profile {
    width: 42px;
    height: 42px;
    padding: 0;
    display: grid;
    place-items: center;
  }

  .role-site-engineer:not(.route-chat) .profile > span:last-child {
    display: none;
  }

  .role-site-engineer:not(.route-chat) .profile .avatar {
    width: 32px;
    height: 32px;
    border-radius: 10px !important;
    font-size: 11px;
  }

  .role-site-engineer:not(.route-chat) .content {
    padding-top: 18px;
  }

  .role-site-engineer.settings-mode .content {
    padding-top: 0 !important;
  }

  .role-site-engineer.settings-mode .settings-shell {
    padding: 0 16px 32px;
  }

  .role-site-engineer.settings-mode .settings-subpage-head {
    min-height: 64px;
    margin: 0 -16px;
    padding: 10px 16px;
  }

  .role-site-engineer:not(.route-chat) .page-head,
  .se-page-intro {
    display: grid;
    align-items: start;
  }

  .role-site-engineer:not(.route-chat) .page-head h1,
  .role-site-engineer:not(.route-chat) .se-page-intro h1 {
    font-size: 34px;
  }

  .se-project-line {
    align-items: flex-start;
  }

  .se-sync-state {
    max-width: 46%;
    justify-content: flex-end;
    text-align: right;
  }

  .se-focus-card {
    min-height: 330px;
    padding: 24px 20px;
    border-radius: 24px !important;
  }

  .se-focus-copy h2 {
    font-size: 31px;
  }

  .se-focus-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .se-focus-actions .btn {
    width: 100%;
  }

  .se-field-summary,
  .se-duty-strip,
  .se-report-statuses {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .se-field-summary > div,
  .se-duty-strip > div,
  .se-report-statuses > div {
    padding: 14px 10px;
  }

  .se-field-summary > div:first-child {
    padding-left: 0;
  }

  .se-field-summary strong,
  .se-duty-strip strong,
  .se-report-statuses strong {
    font-size: 22px;
  }

  .se-field-summary span,
  .se-duty-strip span,
  .se-report-statuses span {
    font-size: 10px;
    line-height: 1.25;
  }

  .se-evidence-log > header,
  .se-evidence-row {
    padding-left: 16px;
    padding-right: 16px;
  }

  .se-evidence-row {
    grid-template-columns: 9px minmax(0, 1fr);
  }

  .se-evidence-row > .pill {
    grid-column: 2;
    justify-self: start;
  }

  .se-section-heading,
  .se-report-tools {
    display: grid;
    align-items: start;
  }

  .se-report-tools .btn-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .se-report-tools .btn-row .danger {
    grid-column: 1 / -1;
  }

  .role-site-engineer.route-new-report .page-head {
    padding-bottom: 18px;
  }

  .role-site-engineer.route-new-report #reportForm > .form-card {
    padding: 18px 16px;
    border-radius: 18px !important;
  }

  .role-site-engineer.route-new-report .form-actions {
    position: static;
    margin-top: 16px;
    z-index: auto;
    display: grid;
    padding: 12px;
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(15,38,31,.15);
  }

  .role-site-engineer.route-new-report .form-actions p {
    display: none;
  }

  .role-site-engineer.route-new-report .form-actions .btn-row,
  .role-site-engineer.route-new-report .form-actions .btn {
    width: 100%;
  }

  .role-site-engineer.route-my-reports .se-page-intro > .btn {
    width: 100%;
  }

  .role-site-engineer.settings-mode .content {
    padding: 0 !important;
  }

  .role-site-engineer.settings-mode .settings-subpage-head {
    top: 0;
    height: 64px;
    min-height: 64px;
    margin: 0 -16px;
    padding: 10px 16px;
  }

  .role-site-engineer.settings-mode .settings-back-btn {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }
}

@media (max-width: 980px) {
  .role-site-engineer.settings-mode .content,
  .role-project-manager.settings-mode .content {
    padding-top: 64px !important;
    padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .role-site-engineer.settings-mode .settings-subpage-head,
  .role-project-manager.settings-mode .settings-subpage-head {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 64px !important;
    min-height: 64px !important;
    margin: 0 !important;
    padding: 10px 12px 9px 12px !important;
    z-index: 40 !important;
  }
}

/* Settings must enter already settled: the fixed header must not inherit route-slide transforms. */
.app.settings-mode .content,
.app.settings-mode .content.route-slide-left,
.app.settings-mode .content.route-slide-right {
  animation: none !important;
  transform: none !important;
  will-change: auto !important;
}

.app.settings-mode .settings-subpage-head {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: calc(64px + env(safe-area-inset-top, 0px)) !important;
  min-height: calc(64px + env(safe-area-inset-top, 0px)) !important;
  margin: 0 !important;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 9px 12px !important;
  z-index: 40 !important;
  box-sizing: border-box !important;
}

.app.settings-mode .content {
  padding-top: calc(64px + env(safe-area-inset-top, 0px)) !important;
}

@media (prefers-reduced-motion: reduce) {
  .se-focus-card {
    animation: none;
  }

  .role-site-engineer:not(.route-chat) *,
  .role-site-engineer:not(.route-chat) *::before,
  .role-site-engineer:not(.route-chat) *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* ============================================================
   Settings polish (both roles): a scannable menu, not a data
   table, and sub-page action buttons that match everywhere.
   Loads last, so it settles the settings list and buttons for
   Project Manager and Site Engineer alike. */

/* De-table the list. Full-width row rules read as a spreadsheet;
   an inset hairline that begins past the icon reads as a settings
   menu. The icon tiles and comfortable row height carry the
   grouping, the hairline only whispers it. */
.settings-mode .settings-group-card { border-radius: 18px; }
.role-project-manager.settings-mode .settings-shell,
.role-site-engineer.settings-mode .settings-shell {
  gap: 16px;
  padding-top: 12px !important;
}
.role-project-manager.settings-mode .settings-icon-row-link,
.role-site-engineer.settings-mode .settings-icon-row-link {
  position: relative;
  min-height: 52px;
  gap: 13px;
  padding: 9px 14px;
  border-bottom: 0;
}
.settings-mode .settings-row-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}
.settings-mode .settings-row-icon svg {
  width: 18px;
  height: 18px;
}
.settings-mode .settings-icon-row-link .settings-row-label {
  font-size: 14.5px;
}
.settings-security-actions { overflow: hidden; }
.settings-security-actions .settings-icon-row-link {
  min-height: 70px;
  padding: 11px 14px;
}
.settings-security-actions .settings-row-copy {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 3px;
}
.settings-security-actions .settings-row-copy small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.settings-security-actions .settings-row-danger .settings-row-copy small {
  color: color-mix(in srgb, var(--red) 68%, var(--muted));
}
.personal-info-form {
  display: grid;
  gap: 14px;
}
.personal-info-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.personal-info-field > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.personal-info-help {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.personal-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 520px) {
  .personal-info-grid { grid-template-columns: 1fr; }
}
.settings-mode .settings-icon-row-link:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 61px;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--line);
  pointer-events: none;
}

/* One button system across every sub-page. The WhatsApp page split
   its footer 1fr/2fr (a small Delete beside a wide Save); Language
   and Notifications used a single full-width button. Now every
   footer button is the same height and shape, and split footers are
   an even two-up, so nothing looks arbitrarily larger or smaller. */
.settings-mode .settings-row-foot,
.settings-mode .settings-row-foot-split { padding: 16px 18px; }
.settings-mode .settings-row-foot-split {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.settings-mode .settings-row-foot .btn,
.settings-mode .settings-row-foot-split .btn {
  width: 100%;
  min-height: 48px;
  font-size: 15px;
  border-radius: 22px;
}

/* Preference rows: a clean stacked list with equal, full-width tap targets.
   Language / Theme / Measurement system were laid out label-left, select-
   right, so the two-line "Measurement system" label knocked its row out of
   alignment and the selects ended up different widths. Stack each as a small
   label above a full-width 48px select -- even, aligned, easy to scan and
   tap. Applies in every sub-page body (Language, Notifications, WhatsApp). */
.settings-mode .settings-icon-row-body .settings-inline-row {
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  padding: 0;
}
.settings-mode .settings-icon-row-body .settings-inline-row + .settings-inline-row {
  margin-top: 16px;
}
.settings-mode .settings-icon-row-body .settings-inline-row > span {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.settings-mode .settings-inline-row select.control,
.settings-mode .settings-inline-row .control {
  width: 100%;
  max-width: none;
  min-height: 48px;
  font-size: 15px;
}

/* Pipe slope validator block inside the pipe detail panel. */
.pipe-slope { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--outline-variant, rgba(0,0,0,.14)); }
.pipe-slope-head { margin-bottom: 6px; }
.pipe-slope-reverse .pill.red { font-weight: 700; }
.point-invert-editor { margin-top: 10px; }

/* Duty date-time picker in the PM duty composer (schedule duty). */
.dw-duty-date { display: block; margin-top: 12px; }
.dw-duty-date > span { display: block; font-size: 13px; margin-bottom: 6px; opacity: .85; }
.dw-duty-date input { width: 100%; }
.dw-schedule-meta { flex: none; align-self: center; display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 5px 8px; border: 1px solid color-mix(in srgb, var(--green, #3a9b63) 35%, var(--line, #d9dee3)); border-radius: 9px; background: color-mix(in srgb, var(--green, #3a9b63) 10%, var(--surface-container-lowest, #fff)); color: var(--ink, #0a1f18); white-space: nowrap; }
.dw-schedule-meta svg { flex: none; color: var(--green, #3a9b63); }
.dw-schedule-meta > span { color: var(--green, #28784d); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.dw-schedule-meta time { font: 700 11px var(--font-mono); }
body.dark .dw-schedule-meta { border-color: #426451; background: #1d3026; color: #f1f6f3; }
body.dark .dw-schedule-meta svg,
body.dark .dw-schedule-meta > span { color: #7de0a4; }
@media (max-width: 520px) {
  .dw-schedule-meta { white-space: normal; }
  .dw-schedule-meta > span { display: none; }
  .dw-schedule-meta time { font-size: 10px; text-align: right; }
}

/* The AI launcher is the robot itself; shared notify-button chrome must not
   draw a second circle behind it in either theme or interaction state. */
.role-site-engineer:not(.route-chat) .ai-fab .ai-topbar-button,
body.dark .role-site-engineer:not(.route-chat) .ai-fab .ai-topbar-button {
  width: 52px !important;
  height: 52px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Informational rain banner (weather). Fills left-to-right as a passive signal. */
.weather-banner { position: relative; overflow: hidden; display: block; width: 100%; margin: 0 0 14px; padding: 0; text-align: left; cursor: pointer; border: 1px solid var(--danger, #d64545); border-radius: 12px; background: color-mix(in srgb, var(--danger, #d64545) 12%, transparent); color: var(--danger, #d64545); }
.weather-banner-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: color-mix(in srgb, var(--danger, #d64545) 16%, transparent); animation: weatherFill 2.4s ease forwards; }
@keyframes weatherFill { to { width: 100%; } }
.weather-banner-content { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.weather-banner-ico { display: flex; }
.weather-banner-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.weather-banner-text strong { font-size: 13px; font-weight: 700; }
.weather-banner-text small { font-size: 12px; opacity: .85; }
.weather-banner-pct { font-size: 12px; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .weather-banner-fill { animation: none; width: 100%; } }

/* Public-holiday list in Language & display settings. */
.holiday-list { margin-top: 8px; display: flex; flex-direction: column; }
.holiday-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--outline-variant, rgba(0,0,0,.1)); font-size: 14px; }
.holiday-row:last-child { border-bottom: 0; }
.holiday-row time { color: var(--muted, #6b7280); white-space: nowrap; }
.settings-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }

/* Custom "Schedule a duty" calendar (weekends + holidays greyed). */
.dw-cal-toggle { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line, #d9dee3); border-radius: 10px; background: var(--surface-container-lowest, #fff); color: inherit; cursor: pointer; text-align: center; }
.dw-cal-toggle-label { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 13px; }
.dw-cal-toggle-label svg { flex: 0 0 auto; color: var(--brand, #2f6b46); }
.dw-cal-toggle > b { position: absolute; right: 12px; font-weight: 500; font-size: 13px; opacity: .75; }
.dw-cal-toggle:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand, #2f6b46) 35%, transparent); outline-offset: 2px; }
@media (max-width: 520px) {
  .dw-cal-toggle.is-open { justify-content: flex-start; text-align: left; }
  .dw-cal-toggle.is-open > b { position: static; margin-left: auto; white-space: nowrap; }
}
.dw-cal-pop { margin-top: 8px; border: 1px solid var(--line, #d9dee3); border-radius: 12px; padding: 12px; background: var(--surface-container-lowest, #fff); }
.dw-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dw-cal-nav { border: 1px solid var(--line, #d9dee3); background: transparent; color: inherit; border-radius: 8px; width: 32px; height: 32px; font-size: 18px; line-height: 1; cursor: pointer; }
.dw-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.dw-cal-wd { text-align: center; font-size: 11px; color: var(--muted, #5f716b); font-weight: 600; padding-bottom: 4px; }
.dw-cal-empty { aspect-ratio: 1; }
.dw-cal-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: var(--ink, #0a1f18); cursor: pointer; font-size: 13px; font-weight: 600; }
.dw-cal-day.is-gray { color: var(--muted, #5f716b); background: var(--surface-container-low, #e1f9ec); }
.dw-cal-day.is-selected { background: var(--brand-2, #006c45); color: #fff; font-weight: 800; }
.dw-cal-day.is-past { color: color-mix(in srgb, var(--muted, #5f716b) 82%, var(--surface-container-lowest, #fff)); opacity: 1; cursor: not-allowed; }
.dw-cal-time-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.dw-cal-time-row span { font-size: 13px; color: var(--muted, #5f716b); font-weight: 600; }
.dw-cal-time-row input.dw-cal-time { width: 132px; min-height: 44px; padding: 0 10px; border: 1px solid var(--line, #d9dee3); border-radius: 10px; background: var(--surface-container-low, #e1f9ec); color: var(--ink, #0a1f18); font-size: 15px; font-weight: 700; text-align: center; }
.dw-cal-time::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .8; }
.dw-cal-legend { display: flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--muted, #5f716b); font-size: 11px; font-weight: 600; }
.dw-cal-swatch { width: 12px; height: 12px; border-radius: 3px; background: rgba(120, 130, 140, .28); display: inline-block; }
body.dark .dw-cal-pop { background: var(--surface-container-lowest); border-color: var(--outline-variant); }
body.dark .dw-cal-wd { color: #c4cbc7; }
body.dark .dw-cal-day { color: #f1f4f2; }
body.dark .dw-cal-day.is-gray { color: #c9d0cc; background: #26302b; }
body.dark .dw-cal-day.is-past { color: #949d98; }
body.dark .dw-cal-day.is-selected { background: #73db9a; color: #092218; }
body.dark .dw-cal-time-row span,
body.dark .dw-cal-legend { color: #c4cbc7; }
body.dark .dw-cal-time-row input.dw-cal-time { background: #202a25 !important; border-color: #53635a !important; color: #f6f8f7 !important; color-scheme: dark; }

/* Tasks Review — grouped by whose turn it is. */
.pmr { display: flex; flex-direction: column; gap: 22px; }
.pmr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pmr-head h1 { margin: 0; font-size: clamp(23px, 4.5vw, 30px); letter-spacing: -0.03em; line-height: 1.12; }
.pmr-head p { margin: 7px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; max-width: 44ch; }
.pmr-preview { align-self: center; flex: none; background: transparent; border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 8px 15px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: border-color .18s ease, color .18s ease; }
.pmr-preview:hover { border-color: var(--outline); color: var(--ink); }
.pmr-note { margin: -10px 0 0; font-size: 12px; color: var(--muted); }

/* Segmented toggle: whose turn is it — You / Site Engineer. */
.pmr-seg { display: flex; gap: 4px; padding: 4px; background: var(--surface-container-low); border: 1px solid var(--line); border-radius: 999px; }
.pmr-seg-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 14px; font-weight: 600; cursor: pointer; transition: background .18s ease, color .18s ease; }
.pmr-seg-btn:hover { color: var(--ink); }
.pmr-seg-btn.is-on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-soft, 0 8px 22px rgba(10, 31, 24, .10)); }
.pmr-seg-btn b { font-size: 12px; font-weight: 700; min-width: 21px; height: 21px; padding: 0 6px; border-radius: 999px; background: var(--surface-container-low); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; }
.pmr-seg-btn.is-on b { background: color-mix(in srgb, var(--brand) 20%, transparent); color: var(--brand); }

/* Groups */
.pmr-group { display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--line); border-radius: 18px; padding: 16px; background: var(--surface); }
.pmr-group-head { display: flex; align-items: center; gap: 12px; }
.pmr-ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 13px; background: var(--surface-container-low); color: var(--muted); flex: none; }
.pmr-ico svg { width: 20px; height: 20px; }
.pmr-group-title { flex: 1; min-width: 0; }
.pmr-group-title h2 { margin: 0; font-size: 17px; letter-spacing: -0.01em; line-height: 1.2; }
.pmr-group-title p { margin: 3px 0 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
.pmr-count { flex: none; min-width: 30px; height: 30px; padding: 0 10px; border-radius: 999px; background: var(--surface-container-low); color: var(--ink); font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }

/* Every group is a framed card; a soft accent (tint + border + icon) names
   its lane, so all four read as the same model. */
.pmr-needs { border-color: color-mix(in srgb, var(--amber) 30%, var(--line)); background: color-mix(in srgb, var(--amber) 7%, var(--surface)); }
.pmr-needs .pmr-ico { background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber); }
.pmr-engineer { border-color: color-mix(in srgb, var(--blue) 28%, var(--line)); background: color-mix(in srgb, var(--blue) 6%, var(--surface)); }
.pmr-engineer .pmr-ico { background: color-mix(in srgb, var(--blue) 15%, transparent); color: var(--blue); }
.pmr-declined { border-color: color-mix(in srgb, var(--red) 28%, var(--line)); background: color-mix(in srgb, var(--red) 6%, var(--surface)); }
.pmr-declined .pmr-ico { background: color-mix(in srgb, var(--red) 15%, transparent); color: var(--red); }
.pmr-closed { border-color: color-mix(in srgb, var(--green) 26%, var(--line)); background: color-mix(in srgb, var(--green) 5%, var(--surface)); }
.pmr-closed .pmr-ico { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }

/* Empty state */
.pmr-empty { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); font-size: 13px; }
.pmr-empty svg { width: 18px; height: 18px; opacity: .55; flex: none; }

/* Card type tags replace the status dots. The summary loses its middle status
   column, so drop back to a single content column. */
.pmr .pm-review-duty summary { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.pmr .pm-review-duty-copy { gap: 6px; }
.pmr-tag { align-self: start; display: inline-flex; align-items: center; white-space: nowrap; font-size: var(--text-caption, 12px); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; font-family: var(--font-mono, ui-monospace, monospace); }
/* Tag colours are set explicitly per theme (like .pill) so they keep their
   hue in both light and dark, which otherwise desaturates. */
.pmr-tag-duty { background: #e4f0f7; color: #1f5f8c; }
.pmr-tag-review, .pmr-tag-report { background: #fff2d5; color: #8b5c05; }
.pmr-tag-done { background: #dff3e6; color: #2b7d4f; }
.pmr-tag-declined { background: #fae8e7; color: #a5352b; }
body.dark .pmr-tag-duty { background: rgba(90, 160, 214, .18); color: #79b4ec; }
body.dark .pmr-tag-review, body.dark .pmr-tag-report { background: rgba(255, 186, 72, .16); color: #ffc266; }
body.dark .pmr-tag-done { background: rgba(58, 155, 99, .20); color: #6fd39a; }
body.dark .pmr-tag-declined { background: rgba(196, 77, 67, .22); color: #f28b82; }





/* Closed group controls: sort + see-more. */
.pmr-closed-tools { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.pmr-date-filter { flex: 1 1 180px; min-width: 0; display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 650; }
.pmr-date-filter .control { width: 100%; min-height: 40px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 10px !important; font-size: 13px; color-scheme: light dark; }
.pmr-date-clear { min-height: 40px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 650; cursor: pointer; }
.pmr-date-clear:hover { border-color: var(--outline); color: var(--ink); }
.pmr-sort { display: flex; gap: 6px; margin: 0; }
.pmr-sort-btn { border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 999px; padding: 5px 13px; font-size: var(--text-caption, 12px); font-weight: 600; cursor: pointer; transition: color .18s ease, border-color .18s ease; }
.pmr-sort-btn:hover { color: var(--ink); }
.pmr-sort-btn.is-on { background: var(--surface-container-low); color: var(--ink); border-color: var(--outline); }
.pmr-seemore { width: 100%; margin-top: 10px; border: 1px dashed var(--line); background: transparent; color: var(--muted); border-radius: 12px; padding: 11px; font-size: var(--text-footnote, 13px); font-weight: 600; cursor: pointer; transition: color .18s ease, border-color .18s ease; }
.pmr-seemore:hover { color: var(--ink); border-color: var(--outline); }
.pmr .pm-review-duty-copy strong { font-size: var(--text-subheadline, 15px); font-weight: 600; letter-spacing: -0.01em; }
.pmr .pm-review-duty-copy small { font-size: var(--text-footnote, 13px); color: var(--muted); }

/* Site Engineer duty items — same framed-group model as the PM review. */
.pmr-se-list { display: flex; flex-direction: column; }
.pmr-se-item { border-top: 1px solid var(--line); padding: 12px 0; }
.pmr-se-item:first-child { border-top: 0; padding-top: 4px; }
/* Actionable rows (To do / Corrections / Completed) ARE the tap target — same
   convention as .notification-feed-item: no separate "Start report" button,
   the whole row opens it. .pmr-se-item stays the shared box (border, padding)
   for both the plain <article> ("With the PM", nothing to do yet) and this
   <button> variant, so only the button-chrome reset lives here. */
button.pmr-se-item.pmr-se-row {
  display: block; width: 100%; margin: 0; font: inherit; color: inherit; text-align: left;
  background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer;
}
.pmr-se-row:hover, .pmr-se-row:focus-visible { background: var(--surface-container-low); }
.pmr-se-row[disabled] { cursor: default; opacity: .6; }
.pmr-se-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; }
.pmr-se-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pmr-se-copy strong { font-size: var(--text-subheadline, 15px); font-weight: 600; letter-spacing: -0.01em; }
.pmr-se-copy small { font-size: var(--text-footnote, 13px); color: var(--muted); }
/* Tag + chevron share the row's right column; the chevron is the only cue
   that a row with no visible button is still tappable. */
.pmr-se-top-right { display: flex; align-items: center; gap: 6px; }
.pmr-se-chev { width: 16px; height: 16px; flex: none; color: var(--muted); }
/* Clamped so one verbose PM instruction can't make its card taller than the
   rest of the list — the full text is still on the report/detail screen. */
.pmr-se-instr { margin: 6px 0 0; color: var(--muted); font-size: var(--text-footnote, 13px); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pmr-se-note { margin-top: 8px; padding: 11px 13px; border-radius: 12px; background: color-mix(in srgb, var(--red) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--red) 22%, var(--line)); text-align: left; }
.pmr-se-note b { display: block; font-size: var(--text-caption, 12px); text-transform: uppercase; letter-spacing: .04em; color: var(--red); margin-bottom: 3px; }
.pmr-se-note p { margin: 0; font-size: var(--text-footnote, 13px); color: var(--ink); line-height: 1.45; }

@media (max-width: 400px) {
  .pmr-seg-btn { font-size: var(--text-footnote, 13px); padding: 0 10px; gap: 6px; }
}

/* Project page — create/join shell, consistent for PM and Site Engineer. */
.project-shell { display: flex; flex-direction: column; gap: 18px; }
.project-toolbar { display: flex; justify-content: flex-end; }
.project-create-btn { display: inline-flex; align-items: center; gap: 8px; }
.project-create-btn svg { width: 18px; height: 18px; flex: none; }
.project-join-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; border: 1px solid var(--line); border-radius: 18px; padding: 36px 24px; background: var(--surface); }
.project-join-icon { display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 62px; border-radius: 18px; background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); }
.project-join-icon svg { width: 28px; height: 28px; }
.project-join-state h2 { margin: 4px 0 0; font-size: var(--text-title-3, 20px); }
.project-join-state p { margin: 0; color: var(--muted); font-size: 14px; max-width: 44ch; line-height: 1.55; }
.project-join-state .btn { margin-top: 6px; min-width: 190px; }
.project-join-state.is-pending .project-join-icon { background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber); }

/* Shared project identity card (PM portfolio + SE active project). */
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
@media (max-width: 620px) { .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.project-card { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--line); border-radius: 16px; padding: 14px 15px; background: var(--surface); animation: projectCardIn .4s cubic-bezier(.16,1,.3,1) both; }
.project-card.is-clickable { cursor: pointer; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.project-card.is-clickable:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); transform: translateY(-2px); box-shadow: var(--shadow-soft, 0 10px 24px rgba(10,31,24,.12)); }
.project-card.is-clickable:active { transform: translateY(0); }
.project-card.is-clickable:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.project-card.is-active { border-color: color-mix(in srgb, var(--green) 34%, var(--line)); background: color-mix(in srgb, var(--green) 4%, var(--surface)); }
.project-card.is-archived { opacity: .82; }
.project-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.project-card-head h2 { margin: 0; font-size: var(--text-headline, 17px); letter-spacing: -0.01em; line-height: 1.2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-card-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.project-card-sub code { flex: 1; min-width: 0; font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--text-footnote, 13px); letter-spacing: .05em; padding: 7px 10px; border-radius: 9px; background: var(--surface-container-low); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-card-members { flex: none; font-size: var(--text-caption, 12px); color: var(--muted); white-space: nowrap; }
.project-card-copy { flex: none; }
@keyframes projectCardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.project-card:nth-child(2) { animation-delay: .04s; }
.project-card:nth-child(3) { animation-delay: .08s; }
.project-card:nth-child(4) { animation-delay: .12s; }
.project-card:nth-child(n+5) { animation-delay: .16s; }
@media (prefers-reduced-motion: reduce) { .project-card { animation: none; } .project-card.is-clickable:hover { transform: none; } }

/* ===== Data Import / Export (dataView) =====
   Every block is a framed lane — tonal icon chip, title, one-line note —
   reusing the .pmr-group model so Setup, Export and Reports read as one system. */
.dataio { display: flex; flex-direction: column; gap: 16px; margin-top: 4px; }
.dataio-section { display: flex; flex-direction: column; gap: 16px; border: 1px solid var(--line); border-radius: 18px; padding: 18px; background: var(--surface); }
.dataio-head { display: flex; align-items: center; gap: 13px; }
.dataio-ico { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 13px; background: var(--surface-container-low); color: var(--muted); flex: none; }
.dataio-ico svg { width: 21px; height: 21px; }
.dataio-head-text { flex: 1; min-width: 0; }
.dataio-head-text h2 { margin: 0; font-size: 17px; letter-spacing: -0.01em; line-height: 1.2; }
.dataio-head-text p { margin: 3px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.dataio-body { display: flex; flex-direction: column; gap: 14px; }

/* Tonal accents name each lane (tint + border + icon), same as .pmr-group. */
.dataio-setup { border-color: color-mix(in srgb, var(--blue) 26%, var(--line)); background: color-mix(in srgb, var(--blue) 5%, var(--surface)); }
.dataio-setup .dataio-ico { background: color-mix(in srgb, var(--blue) 15%, transparent); color: var(--blue); }
.dataio-export { border-color: color-mix(in srgb, var(--green) 26%, var(--line)); background: color-mix(in srgb, var(--green) 5%, var(--surface)); }
.dataio-export .dataio-ico { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
.dataio-reports { border-color: color-mix(in srgb, var(--amber) 28%, var(--line)); background: color-mix(in srgb, var(--amber) 6%, var(--surface)); }
.dataio-reports .dataio-ico { background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber); }

/* Setup action row + inline note. */
.dataio-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.dataio-note { border: 1px solid var(--line); border-radius: 13px; background: var(--surface-container-low); padding: 12px 14px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.dataio-note strong { color: var(--ink); }

/* Export tiles — icon chip, label, sub-label; hover-lift like .project-card. */
.dataio-export-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 10px; }
.dataio-export-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; text-align: left; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 14px; cursor: pointer; color: var(--ink); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.dataio-export-btn:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); transform: translateY(-2px); box-shadow: var(--shadow-soft, 0 10px 24px rgba(10,31,24,.12)); }
.dataio-export-btn:active { transform: translateY(0); }
.dataio-export-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.dataio-export-ico { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--surface-container-low); color: var(--brand); flex: none; }
.dataio-export-ico svg { width: 18px; height: 18px; }
.dataio-export-btn strong { font-size: 14px; font-weight: 650; line-height: 1.2; }
.dataio-export-btn small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.dataio-export-btn.is-primary { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); background: color-mix(in srgb, var(--brand) 7%, var(--surface)); }
.dataio-export-btn.is-primary .dataio-export-ico { background: color-mix(in srgb, var(--brand) 16%, transparent); }

/* Reports output + rain preview footer. */
.dataio-reports .backend-pre { margin: 0; }
.dataio-preview-foot { display: flex; }

@media (max-width: 560px) {
  .dataio-actions { display: grid; grid-template-columns: 1fr; }
  .dataio-actions .btn { width: 100%; }
}
/* WhatsApp settings — per-project group links. Frames reuse the .pmr-group /
   .project-card visual language: same tokens, radii, and framed-card accent. */
.wa-intro { margin: 0 0 14px; color: var(--muted); font-size: var(--text-footnote, 13px); line-height: 1.5; }
.wa-projects { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.wa-single { display: flex; flex-direction: column; gap: 12px; }
.wa-body { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.wa-ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 13px; background: var(--surface-container-low); color: var(--green); flex: none; }
.wa-ico svg { width: 20px; height: 20px; }

/* Shared-group card: a framed switch row that reveals one link when on. */
.wa-shared { border: 1px solid var(--line); border-radius: 18px; padding: 16px; background: var(--surface); }
.wa-shared.is-on { border-color: color-mix(in srgb, var(--green) 30%, var(--line)); background: color-mix(in srgb, var(--green) 5%, var(--surface)); }
.wa-shared-head { display: flex; align-items: center; gap: 12px; }
.wa-shared-copy { flex: 1; min-width: 0; }
.wa-shared-copy strong { display: block; font-size: var(--text-subheadline, 15px); letter-spacing: -0.01em; line-height: 1.25; color: var(--ink); }
.wa-shared-copy span { display: block; margin-top: 3px; color: var(--muted); font-size: var(--text-footnote, 13px); line-height: 1.4; }

/* Switch — token-only so it holds its hue in light, dark, and gray. */
.wa-switch { flex: none; position: relative; width: 46px; height: 27px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-container-low); cursor: pointer; padding: 0; transition: background .18s ease, border-color .18s ease; }
.wa-switch-knob { position: absolute; top: 2px; left: 2px; width: 21px; height: 21px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgba(10, 31, 24, .3); transition: transform .18s cubic-bezier(.16,1,.3,1); }
.wa-switch.is-on { background: var(--green); border-color: var(--green); }
.wa-switch.is-on .wa-switch-knob { transform: translateX(19px); background: #fff; }
.wa-switch:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Per-project card: same frame as .project-card, active/archived accents. */
.wa-project { display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--line); border-radius: 16px; padding: 14px 15px; background: var(--surface); }
.wa-project.is-active { border-color: color-mix(in srgb, var(--green) 32%, var(--line)); background: color-mix(in srgb, var(--green) 4%, var(--surface)); }
.wa-project.is-archived { opacity: .82; }
.wa-project-head { display: flex; align-items: center; gap: 12px; }
.wa-project-title { flex: 1; min-width: 0; }
.wa-project-title h3 { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--text-subheadline, 15px); letter-spacing: -0.01em; line-height: 1.2; color: var(--ink); }
.wa-project-code { display: inline-block; margin-top: 5px; font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--text-caption, 12px); letter-spacing: .05em; padding: 4px 8px; border-radius: 8px; background: var(--surface-container-low); color: var(--muted); }
.wa-badge { flex: none; font-size: var(--text-caption, 12px); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
.wa-badge-muted { background: var(--surface-container-low); color: var(--muted); }
.wa-open { flex: none; align-self: flex-start; font-size: var(--text-footnote, 13px); font-weight: 600; text-decoration: none; padding: 6px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--green) 34%, var(--line)); color: var(--green); background: color-mix(in srgb, var(--green) 6%, transparent); }
.wa-open:hover { background: color-mix(in srgb, var(--green) 12%, transparent); }

.wa-single .control, .wa-body .control, .wa-project .control { width: 100%; }
.wa-row-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wa-row-foot .btn { width: 100%; }
.wa-row-foot .btn:only-child { grid-column: 1 / -1; }
/* Settings -> WhatsApp: compact accordion, one project open at a time. */
.wa-proj { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; transition: border-color .18s ease, background .18s ease; }
.wa-proj.is-active { border-color: color-mix(in srgb, var(--green) 30%, var(--line)); }
.wa-proj.is-open { border-color: color-mix(in srgb, var(--green) 34%, var(--line)); background: color-mix(in srgb, var(--green) 4%, var(--surface)); }
.wa-proj.is-archived { opacity: .82; }
.wa-proj-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 14px; background: transparent; border: 0; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.wa-proj-main { flex: 1; min-width: 0; display: grid; gap: 4px; }
.wa-proj-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--text-subheadline, 15px); font-weight: 650; letter-spacing: -0.01em; line-height: 1.2; color: var(--ink); }
.wa-proj-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wa-proj-state { font-size: var(--text-caption, 12px); font-weight: 600; color: var(--muted); }
.wa-proj-state.is-set { color: var(--green); }
.wa-proj-state.is-set::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 999px; background: currentColor; vertical-align: middle; }
.wa-proj-chev { flex: none; display: inline-flex; color: var(--muted); transition: transform .2s ease; }
.wa-proj.is-open .wa-proj-chev { transform: rotate(90deg); color: var(--green); }
.wa-proj-edit { display: grid; gap: 10px; padding: 0 14px 14px; }
.wa-proj-open { justify-self: end; }
/* Settings -> Notifications: framed cards sharing the pmr-group / project-card language. */
.notif-stack { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.notif-card { display: flex; flex-direction: column; gap: 14px; border: 1px solid var(--line); border-radius: 18px; padding: 16px; background: var(--surface); }
.notif-card-head { display: flex; align-items: flex-start; gap: 12px; }
.notif-ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 13px; background: var(--surface-container-low); color: var(--brand); flex: none; }
.notif-ico svg { width: 20px; height: 20px; }
.notif-card-title { flex: 1; min-width: 0; }
.notif-card-title h2 { margin: 0; font-size: 16px; letter-spacing: -0.01em; line-height: 1.25; color: var(--ink); }
.notif-card-title p { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.notif-chip { align-self: start; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; font-family: var(--font-mono, ui-monospace, monospace); }
.notif-chip::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: currentColor; flex: none; }
.notif-chip-on { background: color-mix(in srgb, var(--green) 16%, var(--surface)); color: color-mix(in srgb, var(--green) 60%, var(--ink)); }
.notif-chip-off, .notif-chip-warn { background: color-mix(in srgb, var(--amber) 18%, var(--surface)); color: color-mix(in srgb, var(--amber) 58%, var(--ink)); }
.notif-chip-muted { background: var(--surface-container-low); color: var(--muted); }
.notif-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.notif-actions .btn { width: 100%; min-height: 46px; }
.notif-actions .btn:only-child { grid-column: 1 / -1; }
.notif-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.notif-step { display: flex; align-items: flex-start; gap: 12px; }
.notif-step-dot { flex: none; margin-top: 5px; width: 9px; height: 9px; border-radius: 999px; background: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 16%, transparent); }
.notif-step strong { display: block; font-size: 14px; font-weight: 650; color: var(--ink); line-height: 1.3; }
.notif-step span { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.notif-card-row { flex-direction: row; align-items: center; gap: 12px; }
.notif-switch { flex: none; position: relative; width: 50px; height: 30px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-container-low); cursor: pointer; padding: 0; transition: background .18s ease, border-color .18s ease; }
.notif-switch-thumb { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 999px; background: var(--surface); box-shadow: 0 1px 3px rgba(10, 31, 24, .3); transition: transform .18s ease, background .18s ease; }
.notif-switch.is-on { background: var(--brand); border-color: var(--brand); }
.notif-switch.is-on .notif-switch-thumb { transform: translateX(20px); background: #fff; }
.notif-switch:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.notif-diag-pre { margin: 0; max-height: 240px; overflow: auto; user-select: text; white-space: pre-wrap; word-break: break-word; font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; line-height: 1.5; color: var(--ink); background: var(--surface-container-low); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
@media (prefers-reduced-motion: reduce) { .notif-switch-thumb { transition: none; } }
@media (max-width: 380px) { .notif-actions { grid-template-columns: 1fr; } }

/* Engineer's project switcher (project screen). An engineer can belong to
   several projects; this is the only place to change the active one once the
   day's session is open. Tokens only -- dark mode here is a body.dark class
   with several palette variants, so a literal colour would break one of them. */
.se-project-switch {
  display: grid;
  gap: 6px;
  margin: 16px 0 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
}
.se-project-switch h2 { margin: 0; font-size: 17px; letter-spacing: -.01em; color: var(--text, var(--ink)); }
.se-project-switch > p { margin: 0 0 6px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.se-project-switch-list { display: grid; gap: 8px; }
.se-project-switch-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 12px 14px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2, var(--bg));
  color: var(--text, var(--ink));
}
.se-project-switch-item:hover { border-color: var(--brand); }
.se-project-switch-item.active {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, var(--surface));
}
.se-project-switch-name { display: grid; gap: 2px; min-width: 0; }
.se-project-switch-name b { color: var(--text, var(--ink)); font-size: 15px; overflow-wrap: anywhere; }
.se-project-switch-name small { color: var(--muted); font-size: 12px; letter-spacing: .06em; }
.se-project-switch-item > .pill { flex: none; }

/* ============================================================
   Supervision daily report (Site Engineer) — tokens only, so
   light and body.dark both resolve without any literal colour.
   ============================================================ */
.se-sr { display: grid; gap: 18px; }
.se-sr-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.se-sr-eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 800; color: var(--brand-2, var(--accent)); }
.se-sr-intro h1 { margin: 6px 0 0; font-size: clamp(28px, 5vw, 40px); line-height: 1.04; letter-spacing: -.03em; color: var(--text, var(--ink)); max-width: 14ch; }
.se-sr-intro p { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; max-width: 60ch; }
.se-sr-recipient { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 10px 13px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-container-lowest); }
.se-sr-recipient-mini { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-container-low); color: var(--brand-2, var(--accent)); font-weight: 800; font-size: 12px; }
.se-sr-recipient b { display: block; font-size: 12px; color: var(--text, var(--ink)); }
.se-sr-recipient span { display: block; font-size: 10px; color: var(--muted); margin-top: 2px; }

.se-sr-card { padding: 0; overflow: hidden; }
.se-sr-section { padding: 20px 22px; }
.se-sr-section + .se-sr-section { border-top: 1px solid var(--line); }
.se-sr-section.is-validation-target {
  box-shadow: inset 3px 0 0 var(--brand), 0 0 0 2px color-mix(in srgb, var(--brand) 42%, transparent);
  animation: se-sr-validation-pulse .5s ease-out 2;
}
@keyframes se-sr-validation-pulse {
  50% { background: color-mix(in srgb, var(--brand-soft) 62%, transparent); }
}
.se-sr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 15px; }
.se-sr-head-text { display: flex; align-items: flex-start; gap: 11px; min-width: 0; }
.se-sr-step { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-container-low); color: var(--brand-2, var(--accent)); font-weight: 800; font-size: 13px; }
.se-sr-step:empty { display: none; }
.se-sr-head h2 { margin: 0; font-size: 17px; letter-spacing: -.02em; color: var(--text, var(--ink)); }
.se-sr-head p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.se-sr-badge { flex: 0 0 auto; font-size: 10px; font-weight: 800; color: var(--brand-2, var(--accent)); background: var(--surface-container-low); border-radius: 999px; padding: 6px 10px; white-space: nowrap; }

/* Activities — tap-to-toggle grid */
.se-sr-activities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.se-sr-act { position: relative; display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 9px; min-height: 58px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-container-lowest); color: var(--text, var(--ink)); text-align: left; transition: border-color .16s ease, background .16s ease, transform .12s ease; }
.se-sr-act:active { transform: scale(.98); }
.se-sr-act-ico { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-container-low); color: var(--brand, var(--text)); transition: background .16s ease, color .16s ease; }
.se-sr-act-ico svg { width: 20px; height: 20px; }
.se-sr-act-name { font-size: 12.5px; font-weight: 650; line-height: 1.22; min-width: 0; padding-right: 6px; }
.se-sr-act.is-on { border-color: color-mix(in srgb, var(--brand-2, var(--accent)) 55%, var(--line)); background: color-mix(in srgb, var(--brand-2, var(--accent)) 10%, var(--surface-container-lowest)); }
.se-sr-act.is-on .se-sr-act-ico { background: var(--brand-2, var(--accent)); color: var(--accent-contrast); }
.se-sr-act-mark { position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: 50%; background: var(--brand-2, var(--accent)); color: var(--accent-contrast); display: grid; place-items: center; }
.se-sr-act-mark svg { width: 12px; height: 12px; }

/* Location — segmented control + panels */
.se-sr-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 5px; background: var(--surface-container-low); border: 1px solid var(--line); border-radius: 14px; }
.se-sr-mode { min-height: 40px; border-radius: 10px; background: transparent; color: var(--muted); font-weight: 800; font-size: 12px; transition: background .16s ease, color .16s ease, box-shadow .16s ease; }
.se-sr-mode.is-on { background: var(--surface-container-lowest); color: var(--brand-2, var(--accent)); box-shadow: var(--shadow-soft); }
.se-sr-panel { display: none; margin-top: 12px; }
.se-sr-panel.is-shown { display: block; }
.se-sr-note { margin: 8px 2px 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
/* Nearest-manhole shortcut. Chips are 44px tall because this is tapped with a
   thumb, outdoors, often with a glove on. */
.se-sr-near { display: grid; gap: 8px; margin-bottom: 10px; }
.se-sr-near-btn { width: 100%; min-height: 44px; }
.se-sr-near-list { display: flex; flex-wrap: wrap; gap: 8px; }
.se-sr-near-list:empty { display: none; }
.se-sr-near-list .se-sr-note { margin: 0; }
.se-sr-near-chip {
  display: inline-flex; align-items: baseline; gap: 8px;
  min-height: 44px; padding: 8px 14px;
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--text); background: var(--surface-container-low);
  font: inherit; cursor: pointer;
}
.se-sr-near-chip b { font-size: 13px; font-weight: 750; }
.se-sr-near-chip span { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.se-sr-near-chip:active { transform: scale(var(--press)); }
.se-sr-near-chip:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.se-sr-gps { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-container-lowest); }
.se-sr-gps-ico { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--surface-container-low); color: var(--brand, var(--text)); }
.se-sr-gps-ico svg { width: 22px; height: 22px; }
.se-sr-gps-text { min-width: 0; margin-right: auto; }
.se-sr-gps-text b { display: block; font-size: 13px; color: var(--text, var(--ink)); overflow-wrap: anywhere; }
.se-sr-gps-text span { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; }
.se-sr-gps.is-captured { border-color: color-mix(in srgb, var(--brand-2, var(--accent)) 45%, var(--line)); background: color-mix(in srgb, var(--brand-2, var(--accent)) 8%, var(--surface-container-lowest)); }

/* Assessment verdict */
.se-sr-assess { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.se-sr-verdict { display: flex; align-items: center; gap: 9px; min-height: 58px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-container-lowest); color: var(--text, var(--ink)); text-align: left; transition: border-color .16s ease, background .16s ease, transform .12s ease; }
.se-sr-verdict:active { transform: scale(.98); }
.se-sr-verdict svg { width: 21px; height: 21px; flex: 0 0 auto; color: var(--muted); }
.se-sr-verdict strong { font-size: 12.5px; line-height: 1.2; font-weight: 700; }
.se-sr-verdict.ok.is-on { border-color: color-mix(in srgb, var(--success, var(--accent)) 60%, var(--line)); background: color-mix(in srgb, var(--success, var(--accent)) 12%, var(--surface-container-lowest)); }
.se-sr-verdict.ok.is-on svg { color: var(--success, var(--accent)); }
.se-sr-verdict.warn.is-on { border-color: color-mix(in srgb, var(--warning, var(--amber)) 60%, var(--line)); background: color-mix(in srgb, var(--warning, var(--amber)) 15%, var(--surface-container-lowest)); }
.se-sr-verdict.warn.is-on svg { color: color-mix(in srgb, var(--warning, var(--amber)) 78%, var(--text)); }
.se-sr-verdict.bad.is-on { border-color: color-mix(in srgb, var(--danger, var(--red)) 55%, var(--line)); background: color-mix(in srgb, var(--danger, var(--red)) 12%, var(--surface-container-lowest)); }
.se-sr-verdict.bad.is-on svg { color: var(--danger, var(--red)); }
.se-sr-comment { display: none; margin-top: 12px; }
.se-sr-comment.is-shown { display: block; }
.se-sr-comment textarea { min-height: 88px; resize: vertical; }

/* Photos */
.se-sr-photo { display: flex; align-items: center; gap: 12px; padding: 15px; border: 1.5px dashed color-mix(in srgb, var(--brand-2, var(--accent)) 45%, var(--line)); border-radius: 16px; background: var(--surface-container-low); cursor: pointer; }
/* The input carried the `hidden` attribute, which removes it from the tab
   order AND the accessibility tree -- on the Site Engineer's only reporting
   surface, so a keyboard or switch user could not attach field evidence at
   all. Hidden visually, still focusable, same approach as .field-file-button
   in field-workflow.css. The label needs its own focus ring because the ring
   would otherwise be drawn on a 1px box nobody can see. */
.se-sr-photo-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.se-sr-photo:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.se-sr-photo-ico { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--surface-container-lowest); color: var(--brand, var(--text)); }
.se-sr-photo-ico svg { width: 22px; height: 22px; }
.se-sr-photo-copy { min-width: 0; margin-right: auto; }
.se-sr-photo-copy strong { display: block; font-size: 13px; color: var(--text, var(--ink)); }
.se-sr-photo-copy span { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; line-height: 1.4; }
.se-sr-photo-btn { flex: 0 0 auto; border-radius: 12px; background: var(--brand-2, var(--accent)); color: var(--accent-contrast); padding: 10px 14px; font-weight: 750; font-size: 13px; }
.se-sr-thumbs { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 12px; }
.se-sr-thumb { position: relative; width: 76px; height: 76px; border-radius: 13px; overflow: hidden; border: 1px solid var(--line); }
.se-sr-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.se-sr-thumb-x { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-container-lowest); color: var(--text, var(--ink)); border: 1px solid var(--line); display: grid; place-items: center; box-shadow: var(--shadow-soft); }
.se-sr-thumb-x svg { width: 14px; height: 14px; }
.se-sr-photo-status { align-self: center; color: var(--muted); font-size: 12px; }
.se-sr-photo-error { flex-basis: 100%; color: var(--danger, var(--red)); font-size: 12px; }

/* Live preview */
.se-sr-summary { display: grid; gap: 1px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--line); }
.se-sr-summary-row { display: grid; grid-template-columns: minmax(90px, 34%) 1fr; align-items: baseline; gap: 14px; padding: 12px 16px; background: var(--surface-container-low); }
.se-sr-summary-row span { color: var(--muted); font-size: 12px; }
.se-sr-summary-row strong { color: var(--text, var(--ink)); font-size: 13px; font-weight: 700; text-align: right; overflow-wrap: anywhere; }

/* PM duty context, when the report answers one */
.se-sr-duty { margin-bottom: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--brand-2, var(--accent)) 6%, var(--surface-container-low)); }
.se-sr-duty-eyebrow { text-transform: uppercase; letter-spacing: .1em; font-size: 9px; font-weight: 800; color: var(--muted); }
.se-sr-duty strong { display: block; margin-top: 3px; color: var(--text, var(--ink)); font-size: 13px; }
.se-sr-duty p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }

/* Send bar */
/* Sits directly above the send card, so what is missing and the button that
   refuses to send are read in one glance. Colour is a support, not the signal:
   the words carry it, for sunlight and for colour-blind readers alike. */
.se-sr-errors { margin: 0 0 12px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--danger) 42%, var(--line)); border-left-width: 4px; border-radius: 14px; background: color-mix(in srgb, var(--danger) 8%, var(--surface)); }
.se-sr-errors strong { display: block; font-size: 14px; color: var(--text, var(--ink)); }
.se-sr-errors ul { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.se-sr-errors li { font-size: 13.5px; line-height: 1.45; color: var(--text, var(--ink)); }
.se-sr-send { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface-container-lowest); box-shadow: var(--shadow-soft); }
.se-sr-send-meta { min-width: 0; text-align: center; }
.se-sr-send-meta b { display: block; font-size: 13px; color: var(--text, var(--ink)); }
.se-sr-send-meta span { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; overflow-wrap: anywhere; }
.se-sr-send-btn { width: 100%; min-height: 56px; padding: 0 22px; font-size: 16px; font-weight: 800; }

/* Assessment chip reused in report detail / review surfaces */
.sr-assess-chip { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; border: 1px solid var(--line); }
.sr-assess-chip.ok { color: var(--success, var(--accent)); background: color-mix(in srgb, var(--success, var(--accent)) 14%, var(--surface-container-lowest)); border-color: color-mix(in srgb, var(--success, var(--accent)) 40%, var(--line)); }
.sr-assess-chip.warn { color: color-mix(in srgb, var(--warning, var(--amber)) 82%, var(--text)); background: color-mix(in srgb, var(--warning, var(--amber)) 18%, var(--surface-container-lowest)); border-color: color-mix(in srgb, var(--warning, var(--amber)) 45%, var(--line)); }
.sr-assess-chip.bad { color: var(--danger, var(--red)); background: color-mix(in srgb, var(--danger, var(--red)) 13%, var(--surface-container-lowest)); border-color: color-mix(in srgb, var(--danger, var(--red)) 40%, var(--line)); }


.se-sr-sketch .manhole-sketch-launch { width: 100%; justify-content: center; min-height: 50px; }
.se-sr-sketch .manhole-sketch-card { gap: 12px; }

@media (min-width: 720px) {
  .se-sr-activities { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .se-sr-intro { flex-direction: column; align-items: flex-start; gap: 12px; }
  .se-sr-recipient { display: none; }
  .se-sr-assess { grid-template-columns: 1fr; }
  .se-sr-section { padding: 18px 16px; }
}

/* SE reports, now living inside the project page */
.se-project-reports { margin-top: 14px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-container-lowest); display: grid; gap: 14px; }
.se-project-reports-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 12px; }
.se-project-reports-head > div { flex: 1 1 200px; min-width: 0; }
.se-project-reports-head h2 { margin: 0; font-size: 18px; letter-spacing: -.02em; color: var(--text, var(--ink)); }
.se-project-reports-head p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.se-project-reports-head .btn { flex: 0 0 auto; min-height: 40px; }
.se-project-reports-tools { justify-content: flex-end; }

/* ===== Desktop (>= 981px): Settings and the project dossier live INSIDE the shell (v1.0.227) =====
   Both modes hid the sidebar but kept the sidebar's 272-292px gutter on .app, so
   the left third of the screen was blank and there was no way to reach another
   section except the back arrow. Settings also forced the PHONE's floating
   bottom nav on at every width (the rules above), and at desktop width that nav
   has no icon sizing: it rendered as a ~5000px grid of oversized icons painted
   over the page. Here the sidebar stays, the bottom nav goes, and the page
   header becomes a sticky bar inside the content instead of a fixed bar across
   the whole viewport. Everything is inside the media query: phones are
   untouched. */
@media (min-width: 981px) {
  .app.settings-mode .sidebar,
  .app.project-detail-mode .sidebar { display: flex !important; }
  .app.settings-mode .bottom-nav,
  .role-site-engineer.settings-mode .bottom-nav,
  .role-project-manager.settings-mode .bottom-nav,
  .app.project-detail-mode .bottom-nav { display: none !important; }

  .app.settings-mode .content,
  .role-site-engineer.settings-mode .content,
  .role-project-manager.settings-mode .content {
    max-width: none;
    margin: 0 !important;
    padding: 0 24px 48px !important;
    scroll-padding-top: 0;
  }
  .app.settings-mode .settings-subpage-head,
  .role-site-engineer.settings-mode .settings-subpage-head,
  .role-project-manager.settings-mode .settings-subpage-head {
    /* The shell's own topbar is sticky at the top already, so this header is
       an ordinary row of the page, not a second bar fighting it for the edge. */
    position: static !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 8px !important;
    padding: 16px 0 8px !important;
    background: transparent !important;
    border: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .app.settings-mode .settings-shell,
  .role-site-engineer.settings-mode .settings-shell {
    max-width: 760px;
    margin: 0 auto !important;
    padding: 24px 0 48px;
  }
}

/* ===== Desktop: the topbar stays on screen while the page scrolls (v1.0.227) =====
   `overflow-x: hidden` on .main (core.css, desktop block) forces the other axis
   to `auto`, which turns .main into a scroll container -- one that never
   scrolls, because its height is its content. The sticky topbar inside it then
   sticks to THAT container, not the viewport, and scrolled away with the page
   (measured: top -600px after a 600px scroll). `clip` clips horizontally
   without creating a scroll container; the phone layout already does the same
   in its own block (core.css @supports (overflow: clip)). */
@supports (overflow: clip) {
  @media (min-width: 981px) {
    #root,
    .app:not(.map-mode) .main {
      overflow-x: clip;
      overflow-y: visible;
    }
  }
}

/* ===== Desktop: the review inspector docks beside the list (v1.0.228) =====
   On a phone the record is a centred modal over a dimmed page, which is right.
   At >= 981px the manager is working through a QUEUE: a modal dims and blocks
   the list they are working through, and its footer was too narrow for its own
   buttons ("Decline with comment" was cut off at 520px). Here the same markup
   docks to the right edge under the topbar, the list stays live beside it
   (click another row and the record switches), and the page makes room for it
   instead of sitting underneath. No markup or handler changed. */
@media (min-width: 981px) {
  .pm-review-record-backdrop {
    position: fixed !important;
    z-index: 55 !important;
    inset: 70px 0 0 auto !important;
    width: min(580px, 42vw) !important;
    padding: 0 !important;
    display: block !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation: none !important;
    pointer-events: none;
  }
  .pm-review-record {
    pointer-events: auto;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    padding: 24px 26px 32px !important;
    border-radius: 0 !important;
    border-width: 0 0 0 1px !important;
    box-shadow: -18px 0 40px -30px color-mix(in srgb, var(--ink) 45%, transparent) !important;
    overflow: auto !important;
  }
  /* On .content, not .main: the topbar lives in .main and must stay full width. */
  .app:has(.pm-review-record-backdrop) .content { padding-right: calc(min(580px, 42vw) + 24px) !important; }
  /* The footer buttons wrap instead of clipping their own labels. */
  .pm-review-record .pm-review-duty-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .pm-review-record .pm-review-duty-actions .btn {
    flex: 1 1 150px !important;
    white-space: normal !important;
    line-height: 1.2;
  }
  /* The photos are the evidence the decision rests on: show them at a size
     that can be judged without opening the lightbox. */
  .pm-review-record .pmr-shots { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
}

/* ===== Settings as a split view on desktop (v1.0.229) =====
   The Profile index is a list; every section is its own page behind a back
   arrow, so at desktop width a manager read one section at a time and went
   back to the list between each. Under 981px the wrappers are display:contents
   and the rail is hidden, so a phone renders exactly the markup it always did.
   At >= 981px the list becomes a rail beside the open section. */
.settings-split, .settings-pane { display: contents; }
.settings-rail { display: none; }
@media (min-width: 981px) {
  .app.settings-mode .settings-split {
    display: grid;
    grid-template-columns: 300px minmax(0, 720px);
    gap: 28px;
    max-width: 1060px;
    margin: 0 auto;
    padding: 8px 0 48px;
    align-items: start;
  }
  .app.settings-mode .settings-pane { display: block; min-width: 0; }
  .app.settings-mode .settings-pane .settings-shell { max-width: none; margin: 0 !important; padding: 0 0 48px; }
  .app.settings-mode .settings-rail {
    display: block;
    position: sticky;
    top: 86px;
    /* Level with the section's card, which starts below the page title row. */
    margin-top: 86px;
  }
  /* The rail is the way back to the list; a back arrow beside it is noise. */
  .app.settings-mode .settings-pane .settings-back-btn { display: none !important; }
  .app.settings-mode .settings-rail .settings-icon-row-link.is-active {
    background: var(--surface-container-low);
    box-shadow: inset 3px 0 0 var(--brand-2);
  }
  .app.settings-mode .settings-rail .settings-icon-row-link.is-active .settings-row-label { font-weight: 800; }
}

/* ===== Data import / export on desktop (v1.0.229) =====
   Four full-width stacked cards left most of a 1440px screen empty and put the
   export tiles a long scroll below the import. At >= 1200px the sections sit in
   two columns (import | export, then reports | preview), and a completed CSV can
   be dragged straight onto the import card. Phones are untouched. */
.dataio-drop-hint { display: none; }
@media (min-width: 1200px) {
  .app:not(.map-mode) .dataio {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 18px;
  }
  .app:not(.map-mode) .dataio .dataio-export-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 981px) {
  .dataio-drop-hint {
    display: block;
    padding: 14px 16px;
    border: 2px dashed var(--line);
    border-radius: 14px;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
    transition: border-color .16s ease, background-color .16s ease, color .16s ease;
  }
  .dataio-setup.is-dragover { border-color: var(--brand-2); }
  .dataio-setup.is-dragover .dataio-drop-hint {
    border-color: var(--brand-2);
    color: var(--ink);
    background: color-mix(in srgb, var(--brand-2) 10%, var(--surface));
  }
}

/* ===== Progress on desktop (v1.0.230) =====
   The delivery curve was a 13-row table with clipped headers; the KPI rows had
   no gap between them; the hero headline was 58px. Phones keep the compact
   month rows (the chart is display:none there). */
.scurve-chart { display: none; margin: 0 0 14px; }
.scurve-chart svg { display: block; width: 100%; height: auto; }
.scurve-chart .scurve-grid { stroke: var(--line); stroke-width: 1; }
.scurve-chart .scurve-axis { fill: var(--muted); font-size: 11px; font-family: var(--mono, monospace); }
.scurve-chart .scurve-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.scurve-chart .scurve-line.is-planned { stroke: var(--muted); stroke-dasharray: 6 5; }
.scurve-chart .scurve-line.is-actual { stroke: var(--brand-2); }
.scurve-chart figcaption { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin-top: 6px; color: var(--muted); font-size: 12px; }
.scurve-chart .scurve-key::before { content: ""; display: inline-block; width: 22px; height: 0; margin-right: 7px; vertical-align: middle; border-top: 3px solid var(--brand-2); }
.scurve-chart .scurve-key.is-planned::before { border-top: 3px dashed var(--muted); }
.scurve-chart .scurve-unit { margin-left: auto; }
@media (min-width: 981px) {
  .scurve-chart { display: block; }
  .progress-command-data { display: grid; gap: 18px; }
  .progress-command-intro h1 { max-width: none; font-size: clamp(30px, 3vw, 42px); letter-spacing: -.045em; }
  .scurve-table-wrap { max-height: 280px; overflow: auto; }
}
@media (min-width: 1200px) {
  .progress-command-data > .grid.two { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: start; }
}

/* v1.0.230 — desktop Project directory: use the width instead of a 575px phone column. */
@media (min-width: 981px) {
  .app:not(.map-mode) .pm-project-management.project-shell { width: 100%; }
  .app:not(.map-mode) .pc-project-control { width: 100%; }
  .app:not(.map-mode) .pd-shell { width: min(100%, 1100px); padding-top: 28px; }
  .app:not(.map-mode) .pd-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
  }
  .app:not(.map-mode) .pd-row { border-right: 1px solid var(--line); }
  .app:not(.map-mode) .pd-row:only-child { grid-column: 1 / -1; border-right: 0; }
  .app:not(.map-mode) .pd-row:nth-child(2n) { border-right: 0; }
  .app:not(.map-mode) .pd-row:last-child { border-bottom: 0; }
  .app:not(.map-mode) .pd-row:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}
@media (min-width: 1500px) {
  .app:not(.map-mode) .pd-shell { width: min(100%, 1280px); }
  .app:not(.map-mode) .pd-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app:not(.map-mode) .pd-row:nth-child(2n) { border-right: 1px solid var(--line); }
  .app:not(.map-mode) .pd-row:nth-child(3n) { border-right: 0; }
}

/* v1.0.230 — printing a page: the chrome stays on screen, the content goes on paper. */
@media print {
  .sidebar, .topbar, .bottom-nav, .mobile-menu, .ai-fab, #aiLauncher, .toast, .modal-backdrop { display: none !important; }
  .app, .main, .content { display: block !important; padding: 0 !important; margin: 0 !important; width: auto !important; overflow: visible !important; }
  .card, .kpi, .pd-list { break-inside: avoid; box-shadow: none !important; }
  body { background: none !important; }
}

/* v1.0.233 — the assistant launcher on desktop. Its positioning lived only in
   the phone media query, so at >=981px it was a static block at the end of
   .app (a full-width strip below the page, off-screen at the bottom). */
@media (min-width: 981px) {
  .ai-fab { position: fixed; z-index: 51; right: 28px; bottom: 28px; display: block; }
  .ai-fab .ai-topbar-button {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 999px;
    border: 0;
    background: transparent;
    color: var(--amber, var(--brand-2));
    box-shadow: none;
    transition: transform 160ms ease;
  }
  /* Same two-class + element specificity as the notify chrome it inherits from, so
     no role or theme paints a plate behind the round mark. */
  .app .ai-fab .ai-topbar-button, body.dark .app .ai-fab .ai-topbar-button { background: transparent; border: 0; box-shadow: none; }
  .ai-fab .ai-topbar-button svg { filter: drop-shadow(0 8px 12px color-mix(in srgb, var(--ink) 35%, transparent)); }
  .ai-fab .ai-topbar-button:hover { transform: translateY(-2px); }
  .ai-fab .ai-topbar-button:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary, var(--brand)) 45%, transparent); outline-offset: 3px; }
  .ai-fab .ai-topbar-button svg { width: 42px; height: 42px; display: block; overflow: visible; }
  body.ai-page .ai-fab, body.ai-open .ai-fab, .app.map-mode .ai-fab,
  body:has(.pm-review-record-backdrop) .ai-fab { display: none; }
}

/* v1.0.233 — desktop details found in a page-by-page pass at 1440x900. */
@media (min-width: 981px) {
  /* The launcher floats over the page, so the last card must clear it. */
  body.has-ai-fab .app:not(.map-mode) .content { padding-bottom: 104px; }
  /* Both roles get the same bar: the Site Engineer's was taller and tinted, and
     carried a map button the sidebar already has. */
  .role-site-engineer:not(.route-chat) .topbar { min-height: 70px; padding: 8px 24px; background: var(--surface-container-lowest); }
  .topbar-map-button { display: none !important; }
  /* Tasks and Tasks review sat in a 460px phone column inside a 1148px page. */
  .app:not(.map-mode) .pm-task-review { width: min(100%, 820px); }
  /* The greeting is one line when there is room for it, not a 16-character stack. */
  .app:not(.map-mode) .pm-command-intro h1 { max-width: none; font-size: clamp(34px, 3.4vw, 52px); }
  /* Rows in a list card are flat; the phone's rounded buttons left a notch at each divider. */
  .app:not(.map-mode) .pm-command-list .pm-command-row { border-radius: 0 !important; }
  .app:not(.map-mode) .pm-command-list .pm-command-row:last-child { border-radius: 0 0 16px 16px !important; }
}

/* Project detail on a phone: the header is fixed and opaque exactly like the
   Settings subpage header (no blur, no sticky-inside-a-non-scrolling box). */
@media (max-width: 980px) {
  .app.project-detail-mode .pdp-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 40;
    box-sizing: border-box;
    height: calc(64px + env(safe-area-inset-top, 0px));
    min-height: calc(64px + env(safe-area-inset-top, 0px));
    margin: 0;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 9px;
    align-items: center;
    gap: 10px;
    background: var(--surface-container-lowest);
    border-bottom: 1px solid var(--line);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .app.project-detail-mode .pdp-nav-title {
    margin: 0;
    font-size: 1.25rem;
    max-width: calc(100% - 64px);
  }
  .app.project-detail-mode .pdp-shell {
    padding-top: calc(64px + env(safe-area-inset-top, 0px) + 14px);
  }
}

/* Pull to refresh, Facebook style: a bare icon in a spacer that opens right
   under the top bar and pushes the page down; nothing slides over the bar. */
.ptr-spacer {
  position: absolute;
  inset: 0 0 auto 0;
  height: 40px;
  transform: translate3d(0, calc(var(--ptr-h, 0px) - 40px), 0);
  transition: transform 240ms cubic-bezier(.16, 1, .3, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  pointer-events: none;
}
.content.ptr-active { position: relative; }
.content.ptr-active > :not(.ptr-spacer) {
  transform: translate3d(0, var(--ptr-h, 0px), 0);
  transition: transform 240ms cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}
.content.ptr-active:has(.ptr-spacer.pulling) > :not(.ptr-spacer),
.content.ptr-active .ptr-spacer.pulling { transition: none; }
.ptr-spacer svg {
  width: 26px;
  height: 26px;
  opacity: calc(var(--ptr-p, 0) * 1);
  transform: rotate(calc(var(--ptr-p, 0) * 270deg)) scale(calc(.6 + var(--ptr-p, 0) * .4));
}
.ptr-spacer.ready { color: var(--brand); }
.ptr-spacer.loading svg { opacity: 1; transform: none; animation: ptr-spin 800ms linear infinite; color: var(--brand); }
@keyframes ptr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .content.ptr-active > :not(.ptr-spacer) { transition: none; }
  .ptr-spacer.loading svg { animation: none; }
}

/* Personal information: the date field must stay inside the card, and the
   photo picker is a plain row, not a box inside the card. */
.personal-info-form .profile-photo-picker {
  border: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}
.personal-info-form input[type="date"] {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
}
.personal-info-form input[type="date"]::-webkit-date-and-time-value { text-align: left; }

/* Settings subpages slide like the rest of the app. The fixed header is a
   child of .settings-shell, so only its siblings move (a transform on an
   ancestor would turn the header's position:fixed into position:absolute). */
@keyframes settingsPageLeft { from { opacity: .4; transform: translateX(44px); } to { opacity: 1; transform: none; } }
@keyframes settingsPageRight { from { opacity: .4; transform: translateX(-44px); } to { opacity: 1; transform: none; } }
.app.settings-mode .content.route-slide-left .settings-shell > :not(.settings-subpage-head) { animation: settingsPageLeft var(--dur-slow, 320ms) cubic-bezier(.12, .92, .18, 1) both; }
.app.settings-mode .content.route-slide-right .settings-shell > :not(.settings-subpage-head) { animation: settingsPageRight var(--dur-slow, 320ms) cubic-bezier(.12, .92, .18, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .app.settings-mode .content .settings-shell > :not(.settings-subpage-head) { animation: none !important; }
}

/* Map: "follow my location" is the first button of the tool rail (R M P L ↓),
   above the others, not a floating button of its own. */
.app.map-mode .map-quick-tools .map-follow-button {
  position: static;
  left: auto;
  bottom: auto;
  transform: none;
}

/* Quiet toasts: the text stays for screen readers, nothing is painted. */
.toast .toast-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  background: none;
  box-shadow: none;
  animation: none;
}
.ptr-spacer.note { font-size: 13px; font-weight: 700; letter-spacing: .01em; }

/* Problems appear next to the control that caused them, never over the nav. */
.inline-note {
  position: fixed;
  z-index: 80;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--red);
  border-radius: 12px;
  background: var(--surface-container-lowest);
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.4;
  box-shadow: 0 10px 24px -14px var(--ink);
  pointer-events: none;
  animation: inlineNoteIn 160ms cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes inlineNoteIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .inline-note { animation: none; } }

/* A problem with one field: soft red text under its label, red outline on the field. */
.field-error {
  display: block;
  color: color-mix(in srgb, var(--red) 82%, var(--ink));
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.35;
  animation: fieldErrorIn 180ms cubic-bezier(.16, 1, .3, 1) both;
}
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 14%, transparent);
}
@keyframes fieldErrorIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .field-error { animation: none; } }
input[aria-invalid="true"]:focus, input[aria-invalid="true"]:focus-visible, select[aria-invalid="true"]:focus-visible { outline-color: var(--red) !important; }

/* One page gutter on a phone: Settings and the project page used 16px while every
   other page (Home, Tasks, Progress...) uses --page-pad, so their cards were narrower. */
@media (max-width: 980px) {
  .app.settings-mode .settings-shell {
    padding-left: var(--page-pad) !important;
    padding-right: var(--page-pad) !important;
  }
  .app.settings-mode .settings-icon-row-body {
    padding-left: 20px;
    padding-right: 20px;
  }
  .app.project-detail-mode .pdp-shell {
    padding-left: var(--page-pad);
    padding-right: var(--page-pad);
  }
}

/* Bottom nav: a small bar under the active icon that slides to the next tab. */
.bottom-nav .nav-slider {
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 22px;
  height: 3px;
  border-radius: 999px;
  background: var(--success);
  pointer-events: none;
  transform: translateX(calc(var(--nav-slider-x, 0px) - 11px));
}
.bottom-nav .nav-slider.is-sliding { transition: transform 340ms cubic-bezier(.16, 1, .3, 1); }
body.dark .bottom-nav .nav-slider { background: var(--red); }
@media (prefers-reduced-motion: reduce) { .bottom-nav .nav-slider.is-sliding { transition: none; } }

/* A note with nothing to anchor to floats below the status bar and its blur. */
.inline-note.is-floating { top: calc(env(safe-area-inset-top, 0px) + 112px); }

/* A problem written inside the card that holds the control. */
.inline-error {
  margin: 12px 0 0;
  color: color-mix(in srgb, var(--red) 82%, var(--ink));
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.45;
  animation: fieldErrorIn 180ms cubic-bezier(.16, 1, .3, 1) both;
}
@media (prefers-reduced-motion: reduce) { .inline-error { animation: none; } }

/* Duty calendar: holidays in soft red (also when selected), several days, ranges. */
.dw-cal-day.is-holiday { background: color-mix(in srgb, var(--red) 14%, var(--surface-container-lowest)); color: color-mix(in srgb, var(--red) 80%, var(--ink)); }
.dw-cal-day.is-selected { background: var(--brand-2); color: var(--surface-container-lowest); font-weight: 800; }
.dw-cal-day.is-selected.is-holiday { background: color-mix(in srgb, var(--red) 34%, var(--surface-container-lowest)); color: var(--ink); box-shadow: inset 0 0 0 2px var(--red); }
body.dark .dw-cal-day.is-holiday { background: color-mix(in srgb, var(--red) 24%, var(--surface-container-lowest)); color: var(--ink); }
body.dark .dw-cal-day.is-selected { background: var(--brand-2); color: var(--surface-container-lowest); }
body.dark .dw-cal-day.is-selected.is-holiday { background: color-mix(in srgb, var(--red) 44%, var(--surface-container-lowest)); color: var(--ink); }
.dw-cal-swatch.is-holiday { background: color-mix(in srgb, var(--red) 40%, var(--surface-container-lowest)); margin-left: 12px; }
.dw-cal-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 6px; }
.dw-cal-mode { min-height: 40px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: inherit; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.dw-cal-mode.is-on { background: var(--brand-2); border-color: transparent; color: var(--surface-container-lowest); }

/* Scheduled duties table (PM): rows that open in place. */
.sched-duty-list { display: grid; gap: 8px; margin-top: 8px; }
.sched-duty { border: 1px solid var(--line); border-radius: 14px; background: var(--surface-container-lowest); }
.sched-duty > summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; }
.sched-duty > summary::-webkit-details-marker { display: none; }
.sched-duty-copy { flex: 1; min-width: 0; display: grid; gap: 3px; }
.sched-duty-copy strong { font-size: 15px; }
.sched-duty-copy small { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.sched-duty-chev { color: var(--muted); transition: transform 160ms ease; }
.sched-duty[open] .sched-duty-chev { transform: rotate(180deg); }
.sched-duty-body { display: grid; gap: 8px; padding: 0 14px 14px; }
.sched-duty-body p { margin: 0; line-height: 1.45; }
.sched-duty-when { color: var(--muted); font-size: 13px; font-weight: 650; }
.sched-duty-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .sched-duty-chev { transition: none; } }

/* The schedule row keeps one height whatever it says, so the calendar below it never moves. */
.dw-cal-toggle { min-height: 52px; }
.dw-cal-toggle-label { flex: none; white-space: nowrap; }
.dw-cal-toggle.is-open > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Date and time fields inside a dialog stay inside it (iOS gives them an intrinsic width). */
.modal input[type="date"], .modal input[type="time"] {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
}
.modal input[type="date"]::-webkit-date-and-time-value, .modal input[type="time"]::-webkit-date-and-time-value { text-align: left; }

/* A dialog opened on a phone follows the space above the keyboard instead of
   sitting under it: the backdrop becomes the visible viewport and the sheet
   scrolls inside it. */
@media (max-width: 980px) {
  html.keyboard-open .modal-backdrop {
    inset: auto 0 auto 0;
    top: var(--visual-viewport-top, 0px);
    height: var(--visible-viewport-height, 100dvh);
    padding-bottom: 8px;
    align-items: end;
  }
  html.keyboard-open .modal-backdrop > .modal {
    max-height: calc(var(--visible-viewport-height, 100dvh) - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* Project directory on phones: the list uses the full page width (the shell's
   own side padding stacked on the page gutter left a wide empty strip). */
@media (max-width: 980px) {
  .pd-shell { padding-inline: 0; }
  .pd-head, .pd-list-head { padding-inline: 6px; }
}