html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ===== AHG Fix — core loop components (design system §2) ===== */
:root {
  --status-new: #ba1319;        /* Christmas Red — New */
  --status-inprogress: #fdbc11; /* Dark Yellow — In progress */
  --status-done: #11bab0;       /* South Mimms — Done */
  --ahg-dark-blue: #154396;
  --ahg-yellow: #fed400;
}

body { margin-bottom: 20px; }

.dot { display:inline-block; width:11px; height:11px; border-radius:50%; vertical-align:middle; }
.dot-new { background: var(--status-new); }
.dot-inprogress { background: var(--status-inprogress); }
.dot-done { background: var(--status-done); }

.count-pill { display:inline-flex; align-items:center; gap:.35rem; font-weight:700; }

.today-tile {
  background: linear-gradient(94.5deg, #154396, #00abc4);
  color:#fff; border-radius:20px; padding:1rem;
}
.today-tile .count-pill { color:#fff; }

.group-card {
  display:block; text-decoration:none; color:inherit;
  background:#fff; border:1px solid rgba(19,12,14,.1); border-radius:20px;
  padding:1rem; box-shadow:0 1px 3px rgba(19,12,14,.06);
}
.group-card:hover { box-shadow:0 3px 10px rgba(19,12,14,.1); }

/* Status tabs on the board */
.status-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }
.status-tab {
  display:flex; flex-direction:column; align-items:center; gap:.15rem;
  text-decoration:none; color:inherit; background:#fff;
  border:1px solid rgba(19,12,14,.12); border-radius:16px; padding:.6rem .25rem;
}
.status-tab.active { border-color: var(--ahg-dark-blue); border-width:2px; }
.status-tab-count { font-size:1.35rem; font-weight:800; line-height:1; }
.status-tab-label { font-size:.75rem; color:#6c757d; }

/* Task cards, two across */
.task-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; }
.task-card {
  display:flex; flex-direction:column; gap:.35rem; text-decoration:none; color:inherit;
  background:#fff; border:1px solid rgba(19,12,14,.1); border-radius:16px; padding:.7rem;
  box-shadow:0 1px 3px rgba(19,12,14,.06); min-height:120px;
}
.task-card-top { display:flex; align-items:center; gap:.4rem; }
.task-title { font-weight:700; line-height:1.25; }
.task-meta { display:flex; flex-wrap:wrap; gap:.35rem; font-size:.8rem; color:#6c757d; }
.task-foot { margin-top:auto; display:flex; align-items:center; justify-content:space-between; }
.prio { color: var(--ahg-dark-yellow, #fdbc11); font-size:1rem; }
.unread-dot { width:9px; height:9px; border-radius:50%; background:#258cfb; margin-left:auto; }
.tag-chip { border:1px solid rgba(19,12,14,.2); border-radius:999px; padding:0 .5rem; }

.avatars { display:inline-flex; }
.avatar {
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%; background:var(--ahg-dark-blue); color:#fff;
  font-size:.7rem; font-weight:700; margin-left:-6px; border:2px solid #fff;
}
.avatar-more { background:#6c757d; }
.avatar-unassigned { background:#fff; color:#6c757d; border:2px dashed #adb5bd; }

.empty-state { text-align:center; color:#6c757d; padding:2rem 1rem; }

/* Priority radio cards on the report form */
.prio-cards { display:grid; gap:.5rem; }
.tag-picker { display:flex; flex-wrap:wrap; gap:.35rem; }
.prio-card input { position:absolute; opacity:0; }
.prio-card-body {
  display:flex; align-items:center; gap:.6rem;
  border:2px solid rgba(19,12,14,.12); border-radius:16px; padding:.75rem 1rem;
}
.prio-card input:checked + .prio-card-body { border-color:var(--ahg-dark-blue); background:#f2f6ff; }
.prio-star { color:var(--ahg-dark-yellow,#fdbc11); font-size:1.2rem; }
.prio-title { font-weight:700; }
.prio-sub { color:#6c757d; margin-left:auto; font-size:.85rem; }

/* The yellow "send" button — the only yellow control besides the shutter */
.btn-send { background:var(--ahg-yellow); border-color:var(--ahg-yellow); color:#130c0e; font-weight:800; }
.btn-send:hover { background:#fdbc11; border-color:#fdbc11; }

/* Task detail */
.status-pills { display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; }
.status-pill-form { display:contents; }
.status-pill {
  width:100%; height:48px; display:flex; align-items:center; justify-content:center; gap:.4rem;
  border:1px solid rgba(19,12,14,.15); border-radius:12px; background:#fff; color:inherit; font-weight:600;
}
.status-pill.active { border-width:2px; }
.status-pill.active.status-new { border-color:var(--status-new); }
.status-pill.active.status-inprogress { border-color:var(--status-inprogress); }
.status-pill.active.status-done { border-color:var(--status-done); }

.detail-card { background:#fff; border:1px solid rgba(19,12,14,.1); border-radius:20px; padding:1rem; }
.detail-row { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.35rem 0; border-bottom:1px solid rgba(19,12,14,.06); }
.detail-row:last-child { border-bottom:0; }
.detail-key { color:#6c757d; }

.activity { list-style:none; margin:0; padding:0; }
.activity-item { padding:.4rem 0; border-bottom:1px solid rgba(19,12,14,.06); }
.activity-item:last-child { border-bottom:0; }
.activity-item.is-message { background:#f8f9fb; border-radius:10px; padding:.5rem .6rem; margin:.25rem 0; }
.activity-time { font-size:.75rem; }

.composer { position:sticky; bottom:0; display:flex; gap:.5rem; padding:.6rem 0; background:var(--bs-body-bg,#f6f3f3); }

.sent-check {
  width:72px; height:72px; margin:0 auto; border-radius:50%;
  background:var(--status-done); color:#fff; font-size:2.2rem; display:flex; align-items:center; justify-content:center;
}

/* ===== Camera capture + annotate (M8/M8a) ===== */
.capture-row { display:flex; gap:.5rem; }
.btn-shutter { flex:1; background:var(--ahg-yellow); border-color:var(--ahg-yellow); color:#130c0e; font-weight:800; height:48px; }
.btn-shutter:hover { background:#fdbc11; border-color:#fdbc11; }

.thumbs { display:flex; flex-wrap:wrap; gap:.5rem; }
.thumb { position:relative; width:76px; height:76px; border-radius:12px; overflow:hidden; border:1px solid rgba(19,12,14,.15); }
.thumb img { width:100%; height:100%; object-fit:cover; }
.thumb-remove {
  position:absolute; top:2px; right:2px; width:22px; height:22px; border-radius:50%;
  border:0; background:rgba(19,12,14,.7); color:#fff; font-size:1rem; line-height:1; display:flex; align-items:center; justify-content:center;
}

.annotate-overlay {
  position:fixed; inset:0; z-index:1050; background:#130c0e;
  display:flex; flex-direction:column;
}
.annotate-canvas { flex:1; display:flex; align-items:center; justify-content:center; overflow:auto; padding:.5rem; }
#canvasHost { max-width:100%; max-height:100%; }
.annotate-tools {
  background:#130c0e; padding:.6rem; padding-bottom:calc(.6rem + env(safe-area-inset-bottom));
  display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; justify-content:space-between;
}
.tool-group { display:flex; gap:.35rem; align-items:center; }
.tool {
  min-width:44px; height:44px; border-radius:10px; border:1px solid rgba(255,255,255,.25);
  background:transparent; color:#fff; font-size:1.1rem; padding:0 .5rem;
}
.tool.active { background:#fff; color:#130c0e; }
.tool:disabled { opacity:.4; }
.swatches { gap:.4rem; }
.swatch { width:30px; height:30px; border-radius:50%; border:2px solid rgba(255,255,255,.4); padding:0; }
.swatch.active { border-color:#fff; box-shadow:0 0 0 2px #130c0e, 0 0 0 4px #fff; }
.annotate-actions { margin-left:auto; }

/* Board card cover */
.task-cover { height:96px; border-radius:12px; background-size:cover; background-position:center; margin:-.15rem 0 .15rem; }

/* Task detail media strip */
.media-strip { display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.25rem; }
.media-item { position:relative; flex:0 0 auto; width:120px; height:120px; border-radius:14px; overflow:hidden; border:1px solid rgba(19,12,14,.12); }
.media-item img { width:100%; height:100%; object-fit:cover; }
.media-cover-badge {
  position:absolute; left:6px; bottom:6px; background:rgba(19,12,14,.7); color:#fff;
  font-size:.7rem; padding:1px 6px; border-radius:999px;
}

/* Offline banner + queued confirmation (FR-D09 / M17) */
.offline-banner {
  background:var(--ahg-yellow); color:#130c0e; font-weight:600;
  text-align:center; padding:.5rem .75rem; font-size:.9rem;
}
.queued-cloud {
  width:72px; height:72px; margin:0 auto; border-radius:50%;
  background:var(--ahg-dark-yellow,#fdbc11); color:#130c0e; font-size:2.2rem;
  display:flex; align-items:center; justify-content:center;
}

/* ===== Bottom navigation + site view switcher + locations + my jobs ===== */
.has-bottom-nav { padding-bottom: 76px; }
.bottom-nav {
  position:fixed; left:0; right:0; bottom:0; z-index:1030;
  display:flex; background:#fff; border-top:1px solid rgba(19,12,14,.12);
  padding-bottom:env(safe-area-inset-bottom);
}
.bottom-nav-item {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:.5rem 0; text-decoration:none; color:#6c757d; font-size:.72rem;
}
.bottom-nav-item.active { color:var(--ahg-dark-blue); font-weight:700; }
.bn-icon { font-size:1.2rem; line-height:1; }

.view-switch { display:flex; gap:.4rem; }
.view-pill {
  flex:1; text-align:center; text-decoration:none; padding:.4rem .5rem; border-radius:999px;
  border:1px solid rgba(19,12,14,.15); color:inherit; font-weight:600; font-size:.85rem;
}
.view-pill.active { background:var(--ahg-dark-blue); border-color:var(--ahg-dark-blue); color:#fff; }

.loc-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; }
.loc-card {
  display:block; text-decoration:none; color:inherit; background:#fff;
  border:1px solid rgba(19,12,14,.1); border-radius:16px; padding:.9rem; box-shadow:0 1px 3px rgba(19,12,14,.06);
}
.loc-title { font-size:1.1rem; font-weight:800; margin-bottom:.5rem; }
.loc-counts { display:flex; gap:.6rem; }

.jobs-section { margin-bottom:1.25rem; }
.jobs-overline {
  text-transform:uppercase; font-size:.72rem; font-weight:800; letter-spacing:.1em;
  padding:.15rem 0; margin-bottom:.35rem; border-bottom:3px solid #ccc;
}
.jobs-overline.slug-new { border-color:var(--status-new); color:var(--status-new); }
.jobs-overline.slug-inprogress { border-color:var(--status-inprogress); color:#9a7300; }
.jobs-overline.slug-done { border-color:var(--status-done); color:var(--status-done); }
.job-thumb {
  width:44px; height:44px; border-radius:10px; background-size:cover; background-position:center;
  flex:0 0 auto; display:flex; align-items:center; justify-content:center; background-color:#eef0f3;
}
.job-thumb-empty { border:1px solid rgba(19,12,14,.1); }
/* ===== Feed + notifications (M16/M19) ===== */
.view-switch .view-pill { padding:.4rem .35rem; font-size:.8rem; white-space:nowrap; }

.feed-list { display:flex; flex-direction:column; }
.feed-row {
  display:flex; align-items:flex-start; gap:.6rem; padding:.7rem .25rem;
  text-decoration:none; color:inherit; border-bottom:1px solid rgba(19,12,14,.08);
}
.feed-row:last-child { border-bottom:0; }
.feed-dot { margin-top:.35rem; flex:0 0 auto; }
.dot-none { background:#c7ccd1; }
.feed-body { flex:1; min-width:0; }
.feed-line { display:flex; align-items:center; gap:.35rem; }
.feed-message { font-size:.9rem; color:#31383e; margin-top:.1rem; }
.feed-meta { margin-top:.15rem; }
.feed-group { color:#9aa0a6; }
.feed-time { flex:0 0 auto; white-space:nowrap; padding-top:.1rem; }
.feed-unread { background:rgba(0,86,179,.06); border-radius:10px; }
.unread-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--ahg-dark-blue); }

/* Bell in the header + badges */
.bell-btn { position:relative; text-decoration:none; font-size:1.25rem; line-height:1; padding:.15rem; }
.bell-badge {
  position:absolute; top:-4px; right:-6px; background:#d6336c; color:#fff; font-size:.62rem;
  font-weight:700; line-height:1; padding:2px 5px; border-radius:999px;
}
.bn-icon { position:relative; }
.bn-badge {
  position:absolute; top:-6px; left:12px; background:#d6336c; color:#fff; font-size:.58rem;
  font-weight:700; line-height:1; padding:1px 4px; border-radius:999px;
}

/* Queued action note (FR-O05) */
.queued-note {
  background:#fff6d6; border:1px solid #f2d98a; color:#5b4a12;
  border-radius:10px; padding:.5rem .7rem; font-size:.85rem; margin:.5rem 0;
}

/* ===== Video media items (NQ-21) ===== */
.media-video { position:relative; }
.media-play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:2rem; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.7); }
.media-processing, .media-failed { display:flex; align-items:center; justify-content:center;
  background:#eef0f3; color:#6c757d; text-align:center; }
.media-failed { background:#fde8e8; color:#b02a37; }
.media-badge { font-size:.72rem; font-weight:600; padding:0 .3rem; }

/* ===== Checklist runner (Phase 2) ===== */
.check-list { list-style:none; margin:0; padding:0; }
.check-item { padding:.5rem 0; border-bottom:1px solid rgba(19,12,14,.08); }
.check-item:last-child { border-bottom:0; }
.check-label { font-weight:500; margin-bottom:.35rem; }
.check-buttons { display:flex; gap:.4rem; }
.check-btn { flex:1; padding:.4rem 0; border-radius:8px; border:1px solid rgba(19,12,14,.2);
  background:#fff; font-size:.85rem; font-weight:600; color:#31383e; }
.check-btn.busy { opacity:.5; }
.check-btn.check-pass.active { background:#11bab0; border-color:#11bab0; color:#fff; }
.check-btn.check-flag.active { background:#fdbc11; border-color:#fdbc11; color:#130c0e; }
.check-btn.check-fail.active { background:#ba1319; border-color:#ba1319; color:#fff; }
.check-btn.check-na.active { background:#6c757d; border-color:#6c757d; color:#fff; }

/* Board toolbar: quick filters, filter drawer, layout toggle (FR-C04–C06) */
.board-toolbar { display:flex; align-items:flex-start; justify-content:space-between; gap:.5rem; }
.quick-filters { display:flex; flex-wrap:wrap; gap:.4rem; align-items:flex-start; }
.chip { display:inline-block; border:1px solid rgba(19,12,14,.2); border-radius:999px; padding:.2rem .7rem; font-size:.85rem;
  text-decoration:none; color:inherit; background:#fff; cursor:pointer; list-style:none; }
.chip.active { background:#130c0e; color:#fff; border-color:#130c0e; }
.chip-details { position:relative; }
.chip-details > summary::-webkit-details-marker { display:none; }
.filter-drawer { position:absolute; z-index:20; left:0; top:calc(100% + .4rem); min-width:260px; background:#fff;
  border:1px solid rgba(19,12,14,.12); border-radius:14px; padding:.75rem; box-shadow:0 6px 24px rgba(19,12,14,.14);
  display:grid; gap:.25rem; }
.layout-toggle { display:inline-flex; border:1px solid rgba(19,12,14,.2); border-radius:10px; overflow:hidden; }
.layout-toggle a { padding:.15rem .55rem; text-decoration:none; color:inherit; font-size:1rem; }
.layout-toggle a.active { background:#130c0e; color:#fff; }
.task-list { display:flex; flex-direction:column; gap:.5rem; }
.task-list .task-card { flex-direction:row; flex-wrap:wrap; align-items:center; gap:.25rem .6rem; }
.task-list .task-cover { width:56px; height:56px; margin:0; flex:0 0 auto; }
.task-list .task-title { flex:1 1 60%; }
.task-list .task-foot { flex:1 1 100%; }

/* Voice notes (FR-D07 / E06) */
.media-audio { width:auto; min-width:220px; height:auto; padding:.4rem .5rem; display:flex; flex-direction:column; gap:.25rem; background:#fff; }
.media-audio audio { width:220px; height:36px; }
.voice-preview { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.voice-preview audio { height:36px; max-width:240px; }
.btn.recording { background:var(--status-new); border-color:var(--status-new); color:#fff; animation:voice-pulse 1s infinite; }
@keyframes voice-pulse { 50% { opacity:.65; } }

/* Media gallery (FR-E02) */
.gallery-overlay { position:fixed; inset:0; z-index:1060; background:rgba(19,12,14,.96); display:flex; flex-direction:column; }
.gallery-top { display:flex; align-items:center; justify-content:space-between; padding:.6rem .8rem; color:#fff; }
.gallery-actions { display:flex; gap:.4rem; }
.gallery-btn { background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.25); border-radius:10px; padding:.3rem .7rem; text-decoration:none; font-size:.9rem; }
.gallery-stage { flex:1; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:.5rem; }
.gallery-stage img, .gallery-stage video { max-width:100%; max-height:100%; object-fit:contain; border-radius:8px; }
.gallery-nav { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:64px; border:0; background:rgba(255,255,255,.12); color:#fff; font-size:2rem; border-radius:10px; }
.gallery-prev { left:.4rem; } .gallery-next { right:.4rem; }

/* Onboarding + install (FR-A03 / A03a) */
.onboarding { position:fixed; inset:0; z-index:1070; background:rgba(19,12,14,.55); display:flex; align-items:flex-end; justify-content:center; }
.onboarding-card { background:#fff; border-radius:24px 24px 0 0; padding:1.5rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom)); width:100%; max-width:520px; text-align:center; }
.onboarding-emoji { font-size:3rem; line-height:1; margin-bottom:.75rem; }
.onboarding-dots { display:flex; justify-content:center; gap:.4rem; }
.dot-step { width:8px; height:8px; border-radius:50%; background:rgba(19,12,14,.2); }
.dot-step.active { background:var(--ahg-dark-blue); }

/* Site switcher sheet (FR-A04 / A05) */
.site-switch { position:relative; }
.site-switch > summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:.35rem; font-weight:600; }
.site-switch > summary::-webkit-details-marker { display:none; }
.site-sheet { position:absolute; z-index:30; left:0; top:calc(100% + .4rem); min-width:280px; max-width:92vw; background:#fff; border:1px solid rgba(19,12,14,.12); border-radius:16px; box-shadow:0 8px 28px rgba(19,12,14,.18); padding:.5rem; }
.site-row { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.45rem .5rem; border-radius:10px; text-decoration:none; color:inherit; }
.site-row:hover, .site-row.current { background:#f2f6ff; }
.site-row .counts { display:flex; gap:.5rem; font-size:.8rem; }
.site-gear { text-decoration:none; padding:.2rem .4rem; border-radius:8px; color:#6c757d; }

/* "+" and group overflow menus (FR-B04 / B07) */
.menu-details { position:relative; }
.menu-details > summary { list-style:none; cursor:pointer; }
.menu-details > summary::-webkit-details-marker { display:none; }
.menu-sheet { position:absolute; right:0; z-index:30; top:calc(100% + .4rem); min-width:240px; background:#fff; border:1px solid rgba(19,12,14,.12); border-radius:14px; box-shadow:0 8px 28px rgba(19,12,14,.18); padding:.4rem; display:grid; gap:.15rem; }
.menu-sheet a, .menu-sheet button { text-align:left; padding:.5rem .6rem; border-radius:10px; text-decoration:none; color:inherit; background:none; border:0; width:100%; }
.menu-sheet a:hover, .menu-sheet button:hover { background:#f2f6ff; }
.check-photo { width:34px; height:34px; object-fit:cover; border-radius:8px; border:1px solid rgba(19,12,14,.15); }
.check-report { display:inline-block; margin-top:.35rem; }

/* Today tile links (FR-B08) */
.tile-link { text-decoration: none; color: inherit; }
.tile-link:active { opacity: .7; }
.tile-warn { outline: 2px solid var(--status-new, #dc3545); }

/* FR-D11 duplicate hints on the report form */
.similar-panel { background: #fff8e1; border: 1px solid #ffe08a; border-radius: .5rem; padding: .5rem .75rem; }
.similar-row { display: flex; align-items: center; gap: .5rem; padding: .25rem 0; }
/* FR-Q09 request form inside a details in the Plan table */
.exempt-details summary { list-style: none; display: inline-block; }
.exempt-details summary::-webkit-details-marker { display: none; }

/* FR-H06 signature */
.sign-pad { width: 100%; max-width: 640px; height: auto; aspect-ratio: 640 / 220; background: #fff; border: 1px dashed rgba(19,12,14,.35); border-radius: 8px; touch-action: none; display: block; }
.sign-img { max-width: 320px; max-height: 110px; background: #fff; border: 1px solid rgba(19,12,14,.15); border-radius: 6px; display: block; }
.sign-block { padding-top: .5rem; border-top: 1px solid rgba(19,12,14,.08); }

/* FR-C07 bulk select */
.card-wrap { position: relative; }
.task-check { position: absolute; top: .6rem; left: .6rem; z-index: 2; width: 1.35rem; height: 1.35rem; display: none; }
.selecting .task-check { display: block; }
.selecting .task-card { cursor: pointer; }
.task-card.selected { outline: 3px solid #0d6efd; outline-offset: -3px; }
.bulk-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040; background: #fff; border-top: 1px solid rgba(19,12,14,.15); box-shadow: 0 -4px 16px rgba(0,0,0,.08); padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom)); display: grid; gap: .35rem; }
.bulk-bar .bulk-row { display: flex; gap: .4rem; align-items: center; }
.bulk-bar .bulk-row select { flex: 1; min-width: 0; }
.bulk-bar .bulk-row .btn { white-space: nowrap; }
body.bulk-open { padding-bottom: 15rem; }
@media (min-width: 768px) { .bulk-bar { grid-template-columns: auto 1fr 1fr 1fr 1fr; align-items: center; } body.bulk-open { padding-bottom: 5rem; } }

/* FR-J02 / J03 overview */
.needs-first { border-left: 4px solid var(--status-new, #dc3545); color: inherit; }
.handover-list { list-style: none; margin: 0; padding: 0; }
.handover-list li { padding: .3rem 0; border-bottom: 1px solid rgba(19,12,14,.08); display: flex; flex-direction: column; }
.handover-list li:last-child { border-bottom: 0; }
@media print {
  .print-hide, nav, .navbar, .bottom-nav, footer, #offlineBanner, .site-switch, .view-switch { display: none !important; }
  body { background: #fff; padding: 0; }
  .handover { box-shadow: none; border: 0; }
  .handover-list a { color: #000; text-decoration: none; }
}

/* Phase 4 accessibility (NFR-A01/A03) */
.skip-link { position: absolute; left: -999px; top: .5rem; z-index: 2000; background: #fff; color: #0d6efd; padding: .5rem .75rem; border-radius: .375rem; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.skip-link:focus { left: .5rem; }
:focus-visible { outline: 3px solid #0d6efd; outline-offset: 2px; }
main:focus { outline: none; }
.bottom-nav-item, .check-btn, .status-tab, .view-pill, .chip { min-height: 44px; }
.btn-primary, .btn-lg { min-height: 48px; }
.btn-sm { min-height: 36px; }

/* FR-E06 message attachments + composer; FR-B04 group photo */
.composer-chips { display: flex; flex-wrap: wrap; gap: .25rem; }
.composer-chips:empty { display: none; }
.composer-chip { display: inline-flex; align-items: center; gap: .25rem; background: #eef2f7; border-radius: 999px; padding: .1rem .6rem; font-size: .85rem; margin-bottom: .25rem; }
.composer-chip-x { border: 0; background: transparent; font-size: 1rem; line-height: 1; padding: 0 .1rem; }
.composer-row { display: flex; gap: .4rem; align-items: center; }
.composer-row .form-control { flex: 1; min-width: 0; }
.msg-attachments { display: flex; flex-wrap: wrap; gap: .4rem; margin: .25rem 0; }
.msg-photo { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; border: 1px solid rgba(19,12,14,.12); }
.msg-file { display: inline-flex; align-items: center; gap: .25rem; background: #f3f4f6; border-radius: 6px; padding: .25rem .5rem; text-decoration: none; }
.msg-audio { max-width: 100%; height: 36px; }
.group-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; }
.group-photo { height: 96px; border-radius: 10px 10px 0 0; background-size: cover; background-position: center; margin: -.75rem -.75rem .5rem; }

/* FR-I01 week / day views */
.plan-range { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; background: rgba(19,12,14,.08); border: 1px solid rgba(19,12,14,.08); border-radius: 12px; overflow: hidden; }
.plan-range.plan-range-day { grid-template-columns: 1fr; }
.plan-range-day { background: #fff; padding: .4rem .5rem; min-height: 120px; font-size: .82rem; }
.plan-range-day.today { background: #f3f7ff; }
.plan-range-head { display: flex; justify-content: space-between; font-weight: 700; margin-bottom: .25rem; }
.plan-range-items { list-style: none; margin: 0; padding: 0; }
.plan-range-items li { padding: .2rem 0; border-top: 1px solid rgba(19,12,14,.06); }
.plan-range-items li.overdue a, .plan-range-items li.overdue span:not(.dot) { color: #b02a37; }
.plan-range-items .dot { width: 8px; height: 8px; margin-right: .25rem; }
@media (max-width: 991px) { .plan-range { grid-template-columns: 1fr; } }
/* FR-M01 mention autocomplete */
.mention-menu { position: absolute; left: 0; bottom: 100%; z-index: 1050; background: #fff; border: 1px solid rgba(19,12,14,.15); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.12); min-width: 220px; overflow: hidden; }
.mention-item { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: .45rem .75rem; }
.mention-item.active, .mention-item:hover { background: #eef2f7; }

/* ===== Design-system pass: header, home views, bottom nav (M3, spec/07; values from the AHG design-system tokens) ===== */
:root {
  --ahg-dark-turquoise: #008ba8;
  --ahg-turquoise: #00abc4;
  --ahg-turquoise-20: #c8e9f0;
  --ahg-dark-yellow: #fdbc11;
  --ahg-yellow-20: #fff3d1;
  --surface-sunken: #f6f3f3;
  --border-subtle: #e2dede;
  --border-strong: #c9c3c3;
  --text-muted-ahg: #4a4a4a;
  --gradient-sea: linear-gradient(94.5deg, var(--ahg-turquoise), var(--ahg-dark-turquoise));
  --gradient-deep: linear-gradient(94.5deg, var(--ahg-dark-turquoise), var(--ahg-dark-blue));
  --font-display: 'Nunito', system-ui, sans-serif;
  --font-text: 'Nunito Sans', system-ui, sans-serif;
  --bs-body-font-family: var(--font-text);
}
body { font-family: var(--font-text); }
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 { font-family: var(--font-display); font-weight: 800; }
.icon { width: 24px; height: 24px; flex: 0 0 auto; }

/* Header: avatar · site button · "+" */
.app-header {
  position: sticky; top: 0; z-index: 1020; background: #fff; border-bottom: 1px solid var(--border-subtle);
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; padding-top: calc(10px + env(safe-area-inset-top));
}
.avatar-btn {
  position: relative; width: 44px; height: 44px; border-radius: 999px; background: var(--ahg-dark-blue); color: #fff;
  display: flex; align-items: center; justify-content: center; font: 800 15px/1 var(--font-display); cursor: pointer; list-style: none;
}
.avatar-btn::-webkit-details-marker { display: none; }
.avatar-badge {
  position: absolute; top: -3px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px;
  background: var(--status-new); color: #fff; border: 2px solid #fff; font: 700 10px/14px var(--font-text); text-align: center;
}
.menu-sheet-left { left: 0; right: auto; }
.menu-head { font: 800 15px/1.2 var(--font-display); color: var(--ahg-dark-blue); padding: .5rem .6rem .35rem; border-bottom: 1px solid var(--border-subtle); margin-bottom: .2rem; }
.menu-sheet form { margin: 0; }
.site-switch { flex: 1; min-width: 0; }
.site-pill {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px;
  border: 2px solid var(--border-subtle); background: var(--surface-sunken); border-radius: 999px;
  text-decoration: none; cursor: pointer; list-style: none; color: var(--ahg-dark-blue);
}
.site-switch > summary.site-pill { display: flex; font-weight: normal; }
.site-pill-dot { width: 26px; height: 26px; border-radius: 999px; background: var(--gradient-sea); flex: 0 0 auto; }
.site-pill-name { flex: 1; min-width: 0; font: 800 14px/1.1 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-pill .icon { width: 20px; height: 20px; }
.create-btn {
  width: 48px; height: 48px; border-radius: 999px; background: var(--ahg-dark-blue); color: #fff; list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font: 400 30px/1 var(--font-text);
}
.create-btn::-webkit-details-marker { display: none; }

/* View pills: Groups (n) · Room tasks (n) · Areas (n) */
.view-switch { display: flex; gap: 8px; padding: 12px 0; overflow-x: auto; scrollbar-width: none; }
.view-switch::-webkit-scrollbar { display: none; }
.view-switch .view-pill {
  flex: 0 0 auto; display: flex; align-items: center; height: 40px; min-height: 40px; padding: 0 16px; border-radius: 999px;
  border: 2px solid var(--border-strong); background: #fff; color: #000; font: 700 14px/1 var(--font-text); white-space: nowrap; text-decoration: none;
}
.view-switch .view-pill.active { background: var(--ahg-dark-blue); border-color: var(--ahg-dark-blue); color: #fff; }

/* "Today at this site" */
.hero { background: var(--gradient-deep); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; color: #fff; }
.hero-overline { font: 700 12px/1 var(--font-text); letter-spacing: .14em; text-transform: uppercase; }
.hero-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hero-tile {
  background: rgba(255,255,255,.16); border-radius: 16px; padding: 12px 8px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: #fff; text-decoration: none;
}
.hero-tile:hover, .hero-tile:focus-visible { background: rgba(255,255,255,.24); color: #fff; }
.hero-dot { width: 20px; height: 20px; border-radius: 999px; }
.hero-num { font: 800 24px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.hero-label { font: 700 12px/1.1 var(--font-text); text-align: center; }
.hero-checks { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font: 700 14px/1 var(--font-text); background: rgba(255,255,255,.12); border-radius: 12px; padding: 10px 12px; }
.hero-checks:hover { color: #fff; background: rgba(255,255,255,.2); }
.hero-checks .icon { width: 20px; height: 20px; }
.hero-checks .icon:last-child { margin-left: auto; }

/* Search / filter */
.search-pill { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; margin-bottom: 12px; border: 2px solid var(--border-subtle); background: var(--surface-sunken); border-radius: 999px; color: var(--text-muted-ahg); }
.search-pill .icon { width: 20px; height: 20px; }
.search-pill input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font: 400 15px/1 var(--font-text); color: #000; }
.search-pill:focus-within { border-color: var(--ahg-dark-blue); }

/* Cards (groups, areas, and every .group-card list) */
.card-stack { display: flex; flex-direction: column; gap: 12px; }
.group-card { border: 1px solid var(--border-subtle); border-radius: 20px; box-shadow: 0 2px 6px rgba(19,12,14,.08); padding: 14px; }
.g-card { display: flex; gap: 14px; align-items: center; }
.g-card[hidden] { display: none; }
.g-avatar { width: 52px; height: 52px; border-radius: 999px; background: var(--gradient-sea); background-size: cover; background-position: center; flex: 0 0 auto; }
.g-avatar-pin { background: var(--ahg-turquoise-20); color: var(--ahg-dark-turquoise); display: flex; align-items: center; justify-content: center; }
.g-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.g-title { font: 800 17px/1.2 var(--font-display); color: var(--ahg-dark-blue); }
.g-desc { font: 400 13px/1.3 var(--font-text); color: var(--text-muted-ahg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-chevron { color: var(--ahg-dark-blue); }
.g-chevron .icon { width: 20px; height: 20px; }
.cnt-row { display: flex; gap: 8px; flex-wrap: wrap; }
.cnt { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-sunken); border-radius: 999px; padding: 4px 10px; font: 700 13px/1 var(--font-text); color: #000; }
.cnt .dot { width: 12px; height: 12px; }

/* Room tasks grid */
.room-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.room-card {
  background: #fff; border: 1px solid var(--border-subtle); border-radius: 20px; box-shadow: 0 2px 6px rgba(19,12,14,.08);
  padding: 10px 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: inherit;
}
.room-no { font: 800 32px/1 var(--font-display); color: var(--ahg-dark-blue); font-variant-numeric: tabular-nums; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-counts { display: flex; gap: 4px; width: 100%; }
.room-counts > span { flex: 1; background: var(--surface-sunken); border-radius: 10px; padding: 5px 0; display: flex; flex-direction: column; align-items: center; gap: 3px; font: 700 12px/1 var(--font-text); color: #000; }
.room-counts .dot { width: 12px; height: 12px; }

/* Bottom nav */
.bottom-nav { border-top: 1px solid var(--border-subtle); padding: 6px 4px calc(8px + env(safe-area-inset-bottom)); }
.bottom-nav-item { min-height: 56px; justify-content: center; gap: 4px; padding: 0; color: var(--text-muted-ahg); font: 700 11px/1 var(--font-text); }
.bottom-nav-item.active { color: var(--ahg-dark-blue); font-weight: 700; }
.bn-icon { line-height: 0; }
.has-bottom-nav { padding-bottom: 88px; }

/* ===== Design-system pass: group board + task detail (M6/M7, prototype "Group — triage" / "Task detail") ===== */
:root { --app-header-h: calc(65px + env(safe-area-inset-top)); --bottom-nav-h: calc(70px + env(safe-area-inset-bottom)); --ahg-purple: #7256a4; }

/* Screen head under the app header: back · title · actions; sticks while the list scrolls */
.screen-head {
  position: sticky; top: var(--app-header-h); z-index: 1010; background: #fff; border-bottom: 1px solid var(--border-subtle);
  margin: 0 calc(-1 * var(--bs-gutter-x, 1.5rem) * .5) 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px;
}
.screen-head-row { display: flex; align-items: center; gap: 8px; }
.screen-head-top { align-items: flex-start; }
.back-btn { width: 44px; height: 44px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: var(--ahg-dark-blue); margin-left: -8px; }
.back-btn .icon { width: 26px; height: 26px; }
.screen-title-wrap { flex: 1; min-width: 0; }
.screen-title { font: 800 19px/1.2 var(--font-display); color: var(--ahg-dark-blue); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.screen-title-wrapping { white-space: normal; padding-top: 10px; }
.screen-sub { font: 400 13px/1.3 var(--font-text); color: var(--text-muted-ahg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.screen-sub-wrap { font: 400 12px/1.4 var(--font-text); color: var(--text-muted-ahg); margin-top: 2px; }
.icon-btn {
  width: 44px; height: 44px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border-radius: 999px;
  border: 0; background: transparent; color: var(--ahg-dark-blue); cursor: pointer; list-style: none; text-decoration: none;
}
.icon-btn::-webkit-details-marker { display: none; }
.icon-btn:hover { background: var(--surface-sunken); color: var(--ahg-dark-blue); }
.icon-btn.is-on { color: var(--ahg-dark-yellow); }
.icon-btn.is-on .icon { fill: var(--ahg-dark-yellow); }
.screen-head .create-btn { text-decoration: none; }
.screen-head .create-btn:hover { color: #fff; }
.pill-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; min-height: 36px; padding: 0 14px; border-radius: 999px;
  border: 2px solid var(--border-strong); background: #fff; color: #000; font: 700 13px/1 var(--font-text); white-space: nowrap; cursor: pointer;
}
.pill-btn .icon { width: 18px; height: 18px; color: var(--ahg-dark-blue); }
.pill-btn:hover { border-color: var(--ahg-dark-blue); }
.pill-btn-sm { height: 30px; min-height: 30px; padding: 0 10px; font-size: 12px; }
.g-avatar-sm { width: 36px; height: 36px; }
.g-avatar-xs { width: 32px; height: 32px; }

/* Board status tabs */
.status-tabs { display: flex; gap: 8px; }
.status-tab {
  flex: 1; border: 2px solid var(--border-subtle); background: #fff; border-radius: 16px; padding: 10px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: inherit; min-height: 44px;
}
.status-tab.active { border-color: var(--ahg-dark-blue); border-width: 2px; background: var(--surface-sunken); }
.status-tab-dot { width: 22px; height: 22px; border-radius: 999px; }
.status-tab-count { font: 800 18px/1 var(--font-display); color: var(--ahg-dark-blue); }
.status-tab-label { font: 700 12px/1.1 var(--font-text); color: var(--text-muted-ahg); }

/* Task cards: photo band + body, two across */
.task-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.task-card {
  background: #fff; border: 1px solid var(--border-subtle); border-radius: 20px; box-shadow: 0 2px 6px rgba(19,12,14,.08);
  overflow: hidden; padding: 0; gap: 0; min-height: 0; text-decoration: none; color: inherit;
}
.task-card .task-cover {
  display: block; position: relative; height: 110px; margin: 0; border-radius: 0; background-color: var(--ahg-dark-turquoise);
  background-size: cover; background-position: center;
}
.task-cover-empty { background: var(--gradient-sea); display: flex !important; align-items: center; justify-content: center; }
.task-cover-label { font: 700 10px/1 var(--font-text); letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.task-status-dot { position: absolute; top: 8px; left: 8px; width: 20px; height: 20px; border-radius: 999px; border: 2px solid #fff; }
.task-flags { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; }
.task-flag { background: rgba(19,12,14,.55); color: #fff; border-radius: 999px; padding: 3px 8px; font: 700 11px/1 var(--font-text); }
.task-flag.prio { color: var(--ahg-yellow); font-size: 13px; padding: 2px 7px; }
.task-body { display: flex; flex-direction: column; gap: 8px; padding: 10px; flex: 1; }
.task-card .task-title { font: 800 15px/1.2 var(--font-display); color: var(--ahg-dark-blue); display: flex; align-items: flex-start; gap: 6px; }
.task-card .task-title .unread-dot { flex: 0 0 auto; margin: 5px 0 0 auto; }
.task-sub { font: 400 12px/1.3 var(--font-text); color: var(--text-muted-ahg); }
.tag-chip { align-self: flex-start; border: 1px solid var(--border-subtle); border-radius: 999px; padding: 4px 10px; font: 700 12px/1 var(--font-text); color: #000; }
.task-card .task-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
/* List layout (FR-C06): thumbnail left, text right */
.task-list .task-card { flex-direction: row; align-items: stretch; flex-wrap: nowrap; gap: 0; }
.task-list .task-card .task-cover { width: 88px; height: auto; min-height: 88px; flex: 0 0 auto; }
.task-list .task-cover-label { display: none; }
.task-list .task-flags { top: auto; bottom: 6px; right: 6px; }
.task-list .task-title { flex: initial; }

/* Task detail: status pills */
.status-pills { display: flex; gap: 8px; }
.status-pill-form { display: contents; }
.status-pill {
  flex: 1; height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 2px solid var(--border-subtle);
  background: #fff; border-radius: 999px; font: 700 13px/1 var(--font-text); color: var(--text-muted-ahg); width: auto; cursor: pointer;
}
.status-pill.active, .status-pill.active.status-new, .status-pill.active.status-inprogress, .status-pill.active.status-done {
  border-color: var(--ahg-dark-blue); background: var(--surface-sunken); color: var(--ahg-dark-blue);
}
.status-pill-dot { width: 18px; height: 18px; border-radius: 999px; flex: 0 0 auto; }

/* Task detail: hero photo with quick-edit chip */
.task-hero {
  position: relative; height: 190px; border-radius: 20px; background-color: var(--ahg-dark-turquoise); background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center; margin-bottom: 12px;
}
.task-hero-empty { background: var(--gradient-sea); }
.task-hero-label { font: 700 11px/1 var(--font-text); letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.task-hero-open { position: absolute; inset: 0; border-radius: inherit; cursor: zoom-in; }
.task-hero-open:focus-visible { outline: 3px solid #0d6efd; outline-offset: 2px; }
.task-hero-actions {
  z-index: 1; position: absolute; left: 10px; top: 10px; display: flex; gap: 6px; background: rgba(19,12,14,.55); backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); border-radius: 999px; padding: 6px 10px; color: #fff; text-decoration: none;
}
.task-hero-actions .icon { width: 20px; height: 20px; }
.task-hero-actions .on { color: var(--ahg-yellow); }
.task-hero-actions:hover { color: #fff; background: rgba(19,12,14,.7); }
.media-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.media-add { display: flex; gap: 6px; }
.media-strip .media-item { border-radius: 16px; border-color: var(--border-subtle); width: 96px; height: 96px; }

/* Cards on the detail page */
.detail-card { background: #fff; border: 1px solid var(--border-subtle); border-radius: 20px; box-shadow: 0 2px 6px rgba(19,12,14,.08); padding: 14px; }
.card-title { font: 800 15px/1.2 var(--font-display); color: var(--ahg-dark-blue); }
.card-title-sub { font: 700 13px/1 var(--font-text); color: var(--text-muted-ahg); }
.card-overline { font: 700 12px/1 var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--ahg-dark-turquoise); }
.more-summary { cursor: pointer; list-style: none; }
.more-summary::-webkit-details-marker { display: none; }
.more-summary::after { content: " ›"; color: var(--text-muted-ahg); }
.info-card { display: flex; flex-direction: column; gap: 14px; }
.info-group { display: flex; align-items: center; gap: 10px; }
.info-group-name { font: 800 16px/1.2 var(--font-display); color: var(--ahg-dark-blue); }
.info-block { display: flex; flex-direction: column; gap: 6px; }
.assignee-box { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border-subtle); border-radius: 16px; padding: 10px 12px; }
.assignee-avatars { display: flex; }
.assignee-avatars .assignee-avatar + .assignee-avatar { margin-left: -8px; }
.assignee-avatar {
  width: 34px; height: 34px; border-radius: 999px; background: var(--ahg-purple); color: #fff; border: 2px solid #fff; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font: 800 13px/1 var(--font-display);
}
.assignee-none { background: #fff; color: var(--text-muted-ahg); border: 2px dashed var(--border-strong); }
.assignee-name { font: 700 15px/1.2 var(--font-text); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-pill { border: 2px solid var(--ahg-dark-blue); border-radius: 999px; padding: 8px 14px; font: 700 14px/1 var(--font-text); color: var(--ahg-dark-blue); }
.loc-pill { display: inline-flex; align-items: center; gap: 8px; border: 2px solid var(--border-subtle); border-radius: 999px; padding: 8px 14px; font: 700 14px/1 var(--font-text); }
.loc-pill .icon { width: 16px; height: 16px; color: var(--ahg-dark-turquoise); }
.info-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font: 600 14px/1.2 var(--font-text); padding-top: 10px; border-top: 1px solid var(--border-subtle); }
.info-meta .detail-key { font-weight: 400; color: var(--text-muted-ahg); margin-right: 4px; }
.info-meta form { margin: 0 0 0 auto; }
.notes-card { background: var(--ahg-yellow-20); border: 1px solid var(--ahg-dark-yellow); border-radius: 20px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.notes-title { font: 800 15px/1.2 var(--font-display); color: #000; }
.notes-body { font: 400 14px/1.5 var(--font-text); color: #000; white-space: pre-line; }

/* Activity */
.activity { display: flex; flex-direction: column; gap: 12px; }
.activity-item, .activity-item.is-message { display: flex; gap: 10px; padding: 0; border: 0; margin: 0; background: none; border-radius: 0; }
.activity-avatar {
  width: 30px; height: 30px; border-radius: 999px; background: var(--ahg-dark-blue); color: #fff; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font: 800 11px/1 var(--font-display);
}
.is-event .activity-avatar { background: var(--ahg-dark-turquoise); }
.activity-avatar.is-system { background: var(--border-strong); }
.activity-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.activity-who { font: 700 14px/1.3 var(--font-text); }
.activity-what { font: 400 14px/1.4 var(--font-text); color: #000; overflow-wrap: anywhere; }
.is-event .activity-what { color: var(--text-muted-ahg); }
.activity-time { font: 400 12px/1 var(--font-text); color: var(--text-muted-ahg); margin-top: 2px; }

/* Composer: sticky above the bottom nav — "+" attach · message · Send */
.composer {
  position: sticky; bottom: var(--bottom-nav-h); z-index: 1000; display: block; background: #fff; border-top: 1px solid var(--border-subtle);
  margin: 0 calc(-1 * var(--bs-gutter-x, 1.5rem) * .5); padding: 10px 12px;
}
.composer-row { display: flex; align-items: center; gap: 10px; }
.composer-plus {
  flex: 0 0 48px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--border-strong); border-radius: 999px; background: #fff; color: var(--ahg-dark-blue); cursor: pointer;
}
.composer-plus[aria-expanded="true"] { border-color: var(--ahg-dark-blue); background: var(--surface-sunken); }
.composer-input { flex: 1; min-width: 0; height: 48px; border: 2px solid var(--border-strong); border-radius: 8px; padding: 0 14px; font: 400 15px/1 var(--font-text); outline: none; }
.composer-input:focus { border-color: var(--ahg-dark-blue); }
.composer-send { height: 48px; border: 0; border-radius: 999px; background: var(--ahg-dark-blue); color: #fff; padding: 0 20px; font: 700 15px/1 var(--font-text); cursor: pointer; }
.composer-attach { display: flex; flex-direction: column; gap: 2px; margin: -10px -12px 10px; padding: 8px; background: var(--surface-sunken); border-bottom: 1px solid var(--border-subtle); }
.composer-attach[hidden] { display: none; }
.composer-attach button { display: flex; align-items: center; gap: 12px; min-height: 52px; border: 0; background: transparent; padding: 0 10px; text-align: left; font: 700 15px/1.2 var(--font-text); color: #000; cursor: pointer; border-radius: 12px; }
.composer-attach button .icon { width: 20px; height: 20px; color: var(--ahg-dark-blue); }
.composer-attach button:hover { background: #fff; }
.composer-chips { margin-bottom: 6px; }

/* Drill-down screens without the site header: the screen head takes the top edge */
.no-app-header { --app-header-h: 0px; }
.no-app-header .screen-head { padding-top: calc(10px + env(safe-area-inset-top)); }

/* Board quick filters (FR-C04–C06) in the pill style */
.quick-filters { gap: 8px; align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: 4px; height: 36px; min-height: 36px; padding: 0 14px; border-radius: 999px;
  border: 2px solid var(--border-strong); background: #fff; color: #000; font: 700 13px/1 var(--font-text); white-space: nowrap;
}
.chip.active { background: var(--ahg-dark-blue); border-color: var(--ahg-dark-blue); color: #fff; }
.chip-details > summary.chip { list-style: none; }
.layout-toggle { border: 2px solid var(--border-strong); border-radius: 999px; }
.layout-toggle a { display: inline-flex; align-items: center; height: 32px; padding: 0 .7rem; }
.layout-toggle a.active { background: var(--ahg-dark-blue); }
.toolbar-end { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.board-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px; margin-bottom: 12px !important; }
.board-toolbar .quick-filters { display: contents; }
.board-toolbar .toolbar-end { margin-left: auto; }

/* ===== Design-system pass: report flow (M8–M11, prototype "Report 1–3" + "Report sent") ===== */
.no-bottom-nav .has-bottom-nav { padding-bottom: 0; }
.report fieldset, .edit-task fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.report legend, .edit-task legend { float: none; width: auto; margin: 0 0 10px; padding: 0; }
/* With script, only the current step shows; without it every step shows and the form still posts. */
.report.js-steps .rstep { display: none; }
.report.js-steps[data-step="1"] .rstep[data-step="1"],
.report.js-steps[data-step="2"] .rstep[data-step="2"],
.report.js-steps[data-step="3"] .rstep[data-step="3"] { display: flex; }
.rstep { flex-direction: column; min-height: 100vh; min-height: 100dvh; margin: 0 calc(-1 * var(--bs-gutter-x, 1.5rem) * .5); }

/* Step 1: full-screen dark capture */
.rstep-capture { background: #130c0e; color: #fff; }
.report.js-steps .rstep-capture { position: fixed; inset: 0; z-index: 1040; margin: 0; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
body.capture-open { background: #130c0e; }
.capture-top { padding: 12px; display: flex; align-items: center; gap: 10px; }
.capture-cancel { height: 44px; display: flex; align-items: center; padding: 0 6px; color: #fff; font: 700 15px/1 var(--font-text); text-decoration: none; min-width: 70px; }
.capture-cancel:hover { color: #fff; text-decoration: underline; }
.capture-title { flex: 1; margin: 0; text-align: center; font: 800 16px/1 var(--font-display); color: #fff; }
.capture-spacer { min-width: 70px; }
.capture-stage {
  flex: 1; margin: 0 12px; border-radius: 20px; background: var(--gradient-deep); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center;
}
.capture-stage .icon { width: 44px; height: 44px; }
.capture-stage p { margin: 0; max-width: 240px; font: 700 15px/1.4 var(--font-text); }
.capture-controls { padding: 20px 12px 24px; display: flex; align-items: center; justify-content: space-between; }
.capture-side {
  width: 64px; height: 64px; border-radius: 16px; border: 2px solid rgba(255,255,255,.3); background: rgba(255,255,255,.16); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font: 700 11px/1.1 var(--font-text); cursor: pointer;
}
.capture-side .icon { width: 22px; height: 22px; }
.capture-shutter { width: 84px; height: 84px; border-radius: 999px; border: 6px solid #fff; background: var(--ahg-yellow); cursor: pointer; }
.capture-shutter:active { transform: scale(.94); }

/* Steps 2–3: sticky head, body, sticky foot */
.rstep-head {
  position: sticky; top: 0; z-index: 5; background: #fff; border-bottom: 1px solid var(--border-subtle);
  padding: 12px; padding-top: calc(12px + env(safe-area-inset-top)); display: flex; align-items: center; gap: 10px;
}
.rstep-head .back-btn { border: 0; background: transparent; margin-left: -6px; cursor: pointer; }
.rstep-title { flex: 1; margin: 0; font: 800 18px/1.2 var(--font-display); color: var(--ahg-dark-blue); }
.rstep-body { flex: 1; padding: 14px; display: flex; flex-direction: column; gap: 16px; }
.rstep-foot {
  position: sticky; bottom: 0; z-index: 5; background: #fff; border-top: 1px solid var(--border-subtle);
  padding: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px;
}
.photo-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.photo-row .thumbs:empty { display: none; }
.photo-row .thumb { width: 76px; height: 76px; border-radius: 16px; border: 0; }
.thumb-add {
  width: 76px; height: 76px; border-radius: 16px; border: 0; background: var(--gradient-sea); color: #fff; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.photo-note { flex: 1 1 140px; font: 400 14px/1.4 var(--font-text); color: var(--text-muted-ahg); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font: 700 15px/1.2 var(--font-text); color: #000; }
.field-optional { font-weight: 400; color: var(--text-muted-ahg); }
.field-input { height: 52px; border: 2px solid var(--border-strong); border-radius: 8px; padding: 0 14px; font: 400 16px/1.3 var(--font-text); outline: none; width: 100%; background: #fff; }
.field-input:focus { border-color: var(--ahg-dark-blue); }
.field-input-sm { height: 44px; margin-bottom: 8px; font-size: 15px; }
.field-textarea { height: auto; min-height: 88px; padding: 12px 14px; resize: vertical; }
.field-error { color: var(--status-new); font: 700 13px/1.3 var(--font-text); }
.field-error:empty { display: none; }
.choice-block { display: flex; flex-direction: column; gap: 10px; }
.choice-folder { font: 700 12px/1 var(--font-text); color: var(--text-muted-ahg); margin: 4px 0 6px; }
.pill-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-choice { position: relative; cursor: pointer; margin: 0; }
.pill-choice input { position: absolute; opacity: 0; pointer-events: none; }
.pill-choice span {
  display: flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--border-strong);
  background: #fff; color: #000; font: 700 14px/1 var(--font-text);
}
.pill-choice input:checked + span { background: var(--ahg-dark-blue); border-color: var(--ahg-dark-blue); color: #fff; }
.pill-choice input:focus-visible + span { outline: 3px solid #0d6efd; outline-offset: 2px; }
.card-choices { display: flex; flex-direction: column; gap: 8px; }
.card-choices-lg { gap: 14px; }
.card-choice {
  position: relative; display: flex; align-items: center; gap: 12px; border: 2px solid var(--border-subtle); background: #fff;
  border-radius: 16px; min-height: 56px; padding: 0 14px; cursor: pointer; margin: 0;
}
.card-choice[hidden] { display: none; }
.card-choice input { position: absolute; opacity: 0; pointer-events: none; }
.card-choice:has(input:checked) { border-color: var(--ahg-dark-blue); background: var(--surface-sunken); }
.card-choice:has(input:focus-visible) { outline: 3px solid #0d6efd; outline-offset: 2px; }
.card-choice-dot { width: 24px; height: 24px; border-radius: 999px; border: 2px solid var(--border-strong); background: #fff; flex: 0 0 auto; }
.card-choice:has(input:checked) .card-choice-dot { border-color: var(--ahg-dark-blue); background: var(--ahg-dark-blue); box-shadow: inset 0 0 0 4px #fff; }
.card-choice-name { font: 700 15px/1.2 var(--font-text); color: #000; }
.card-choice-hint { margin-left: auto; font: 400 12px/1 var(--font-text); color: var(--text-muted-ahg); }
.card-choice-prio { border-radius: 20px; padding: 16px; gap: 14px; }
.prio-badge {
  width: 40px; height: 40px; border-radius: 999px; background: var(--ahg-yellow-20); color: var(--ahg-dark-yellow); flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font: 400 16px/1 var(--font-text); letter-spacing: -2px;
}
.prio-text { display: flex; flex-direction: column; gap: 4px; }
.prio-label { font: 800 17px/1.2 var(--font-display); color: var(--ahg-dark-blue); }
.prio-desc { font: 400 14px/1.4 var(--font-text); color: #000; }
.card-choice-person { min-height: 60px; }
.person-avatar {
  width: 36px; height: 36px; border-radius: 999px; background: var(--ahg-purple); color: #fff; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font: 800 13px/1 var(--font-display);
}
.card-choice-person:nth-child(3n) .person-avatar { background: var(--ahg-dark-turquoise); }
.person-all { background: var(--ahg-dark-blue); font-size: 11px; }
.person-text { display: flex; flex-direction: column; }
.person-name { font: 700 15px/1.2 var(--font-text); }
.person-role { font: 400 13px/1.3 var(--font-text); color: var(--text-muted-ahg); }
.summary-box { background: var(--surface-sunken); border-radius: 20px; padding: 14px; display: flex; flex-direction: column; gap: 6px; font: 400 15px/1.5 var(--font-text); }
.btn-primary-lg, .btn-send-lg, .btn-outline-lg {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; border-radius: 999px; border: 0;
  font: 800 16px/1 var(--font-display); text-decoration: none; cursor: pointer; padding: 0 20px;
}
.btn-primary-lg { background: var(--ahg-dark-blue); color: #fff; }
.btn-primary-lg:hover { color: #fff; filter: brightness(1.08); }
.btn-send-lg { background: var(--ahg-yellow); color: #130c0e; }
.btn-send-lg:hover { background: var(--ahg-dark-yellow); }
.btn-send-lg:disabled { opacity: .7; }
.btn-outline-lg { background: #fff; color: var(--ahg-dark-blue); border: 2px solid var(--ahg-dark-blue); }
.btn-outline-lg:hover { color: var(--ahg-dark-blue); background: var(--surface-sunken); }
.send-hint { text-align: center; font: 400 13px/1.4 var(--font-text); color: var(--text-muted-ahg); }
.similar-panel { background: var(--ahg-yellow-20); border: 1px solid var(--ahg-dark-yellow); border-radius: 16px; padding: 10px 12px; }

/* Sent / saved confirmation */
.done-screen { min-height: calc(100dvh - var(--bottom-nav-h)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; text-align: center; }
.done-badge { width: 96px; height: 96px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: #fff; }
.done-badge .icon { width: 44px; height: 44px; }
.done-badge-ok { background: var(--status-done); }
.done-badge-queued { background: var(--ahg-dark-yellow); }
.done-title { margin: 0; font: 800 26px/1.2 var(--font-display); color: var(--ahg-dark-blue); letter-spacing: -.02em; }
.done-body { margin: 0; font: 400 16px/1.5 var(--font-text); max-width: 300px; }
.done-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 300px; }
.done-link { font: 700 14px/1 var(--font-text); color: var(--ahg-dark-blue); padding: 8px; }

/* ===== Design-system pass: My jobs + Scheduled checks (prototype "My jobs" / "Scheduled checks") ===== */
:root { --gradient-sun: linear-gradient(94.5deg, var(--ahg-yellow), var(--ahg-dark-yellow)); --status-error-surface: #fbeaea; --status-success-surface: #e3f7f5; }
.page-head {
  position: sticky; top: var(--app-header-h); z-index: 1010; background: #fff; border-bottom: 1px solid var(--border-subtle);
  margin: 0 calc(-1 * var(--bs-gutter-x, 1.5rem) * .5) 12px; padding: 14px; padding-top: calc(14px + env(safe-area-inset-top));
  display: flex; flex-direction: column; gap: 4px;
}
.page-head-row { flex-direction: row; align-items: center; gap: 8px; }
.page-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.page-title { margin: 0; font: 800 22px/1.15 var(--font-display); color: var(--ahg-dark-blue); letter-spacing: -.02em; }
.page-sub { margin: 0; font: 400 14px/1.3 var(--font-text); color: var(--text-muted-ahg); }
.section-stack { display: flex; flex-direction: column; gap: 16px; }
.list-section { display: flex; flex-direction: column; gap: 10px; }
.section-overline { margin: 0; font: 700 12px/1 var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--ahg-dark-turquoise); display: flex; align-items: center; gap: 6px; }
.section-overline.slug-new { color: var(--status-new); }
.section-overline.slug-inprogress { color: #8a6a00; }
.section-overline.slug-done { color: #0a7a72; }
.section-count { background: var(--surface-sunken); color: var(--text-muted-ahg); border-radius: 999px; padding: 3px 8px; letter-spacing: 0; font-size: 11px; }

/* My jobs rows */
.row-card {
  display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--border-subtle); border-radius: 20px;
  box-shadow: 0 2px 6px rgba(19,12,14,.08); padding: 12px; min-height: 76px; text-decoration: none; color: inherit;
}
.row-card:hover { color: inherit; box-shadow: 0 3px 10px rgba(19,12,14,.12); }
.row-thumb { width: 56px; height: 56px; border-radius: 16px; background: var(--gradient-sea); background-size: cover; background-position: center; flex: 0 0 auto; }
.row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.row-title { font: 800 16px/1.2 var(--font-display); color: var(--ahg-dark-blue); }
.row-sub { font: 400 13px/1.3 var(--font-text); color: var(--text-muted-ahg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-meta { font: 400 12px/1 var(--font-text); color: var(--text-muted-ahg); }
.row-dot { width: 18px; height: 18px; border-radius: 999px; flex: 0 0 auto; }

/* Scheduled checks */
.day-stepper { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.day-pick { position: relative; margin: 0; overflow: hidden; }
.day-pick form { position: absolute; inset: 0; margin: 0; }
.day-pick input[type="date"] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.day-pick input[type="date"]::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.back-to-today { display: inline-block; margin: -4px 0 12px; font: 700 14px/1 var(--font-text); color: var(--ahg-dark-blue); }
.check-card {
  background: #fff; border: 1px solid var(--border-subtle); border-radius: 20px; box-shadow: 0 2px 6px rgba(19,12,14,.08);
  padding: 14px; display: flex; flex-direction: column; gap: 12px;
}
.check-card.is-projected { box-shadow: none; background: var(--surface-sunken); }
.check-card-top { display: flex; align-items: flex-start; gap: 12px; }
.check-plate { width: 46px; height: 46px; border-radius: 999px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.check-plate .icon { width: 22px; height: 22px; }
.plate-sea { background: var(--gradient-sea); color: #fff; }
.plate-sun { background: var(--gradient-sun); color: var(--ahg-dark-blue); }
.check-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.check-card-name { font: 800 17px/1.2 var(--font-display); color: var(--ahg-dark-blue); }
.check-card-detail { font: 400 14px/1.4 var(--font-text); color: var(--text-muted-ahg); }
.central-tag { display: inline-block; vertical-align: middle; margin-left: 4px; background: var(--ahg-turquoise-20); color: var(--ahg-dark-turquoise); border-radius: 999px; padding: 3px 8px; font: 700 11px/1 var(--font-text); }
.due-badge { border-radius: 999px; padding: 6px 12px; font: 700 13px/1 var(--font-text); white-space: nowrap; flex: 0 0 auto; }
.due-now { background: var(--status-error-surface); color: var(--status-new); }
.due-later { background: var(--surface-sunken); color: var(--text-muted-ahg); }
.check-card.is-projected .due-later { background: #fff; }
.due-done { background: var(--status-success-surface); color: #0a7a72; }
.check-card-btn {
  display: flex; align-items: center; justify-content: center; height: 48px; border-radius: 999px; border: 2px solid var(--ahg-dark-blue);
  background: #fff; color: var(--ahg-dark-blue); font: 700 15px/1 var(--font-text); text-decoration: none;
}
.check-card-btn:hover { color: var(--ahg-dark-blue); background: var(--surface-sunken); }
.check-card-btn.is-primary { background: var(--ahg-dark-blue); color: #fff; }
.check-card-btn.is-primary:hover { color: #fff; filter: brightness(1.08); }
.check-card-note { font: 400 13px/1.3 var(--font-text); color: var(--text-muted-ahg); }

/* ===== Design-system pass: Site feed (prototype "Site feed", FR-B10) ===== */
.feed-stack { display: flex; flex-direction: column; gap: 10px; }
.feed-card {
  display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid var(--border-subtle); border-radius: 20px;
  box-shadow: 0 2px 6px rgba(19,12,14,.08); padding: 14px; text-decoration: none; color: inherit;
}
.feed-card:hover { color: inherit; box-shadow: 0 3px 10px rgba(19,12,14,.12); }
.feed-avatar {
  width: 36px; height: 36px; border-radius: 999px; color: #fff; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font: 800 12px/1 var(--font-display);
}
.av-0 { background: #ee386f; } .av-1 { background: var(--ahg-purple); } .av-2 { background: var(--ahg-dark-turquoise); } .av-3 { background: var(--ahg-dark-blue); }
.av-system { background: var(--border-strong); }
.feed-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.feed-card-text { font: 400 15px/1.3 var(--font-text); color: #000; }
.feed-card-text strong { font-weight: 700; }
.feed-card-quote { font: 400 14px/1.4 var(--font-text); color: #000; background: var(--surface-sunken); border-radius: 12px; padding: 6px 10px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.feed-card-task { font: 700 13px/1.3 var(--font-text); color: var(--ahg-dark-blue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-card-time { font: 400 12px/1 var(--font-text); color: var(--text-muted-ahg); }
.feed-card-dot { width: 16px; height: 16px; border-radius: 999px; flex: 0 0 auto; margin-top: 2px; }
.feed-avatar .icon { width: 18px; height: 18px; }

/* ===== Design-system pass: My sites bottom sheet (prototype "Sheet — my sites", M4) ===== */
body.sheet-open { overflow: hidden; }
body.sheet-open .app-header { z-index: 1060; }   /* the sheet lives in the header, so lift it above the bottom nav */
.site-pill-dot { background-size: cover; background-position: center; }
.site-switch .sheet-backdrop, .site-switch .bottom-sheet { display: none; }
.site-switch[open] .sheet-backdrop {
  display: block; position: fixed; inset: 0; z-index: 1; background: rgba(19,12,14,.55);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); animation: sheetFade .2s cubic-bezier(.32,.72,.28,1);
}
.site-switch[open] .bottom-sheet {
  display: flex; flex-direction: column; gap: 16px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 2;
  max-height: 85vh; max-height: 85dvh; overflow-y: auto; background: #fff; border-radius: 20px 20px 0 0;
  padding: 10px 16px calc(26px + env(safe-area-inset-bottom)); animation: sheetRise .2s cubic-bezier(.32,.72,.28,1);
  max-width: 560px; margin: 0 auto;
}
@keyframes sheetFade { from { opacity: 0; } }
@keyframes sheetRise { from { transform: translateY(24px); opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .site-switch[open] .sheet-backdrop, .site-switch[open] .bottom-sheet { animation: none; } }
.sheet-grip { width: 44px; height: 5px; border-radius: 999px; background: var(--border-strong); margin: 0 auto; flex: 0 0 auto; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; }
.sheet-title { margin: 0; font: 800 20px/1.2 var(--font-display); color: var(--ahg-dark-blue); }
.sheet-close { color: var(--text-muted-ahg); margin-right: -8px; }
.sheet-search { margin: 0; }
.sheet-list { display: flex; flex-direction: column; gap: 12px; }
.site-card-wrap { position: relative; }
.site-card-wrap[hidden] { display: none; }
.site-card {
  display: flex; gap: 14px; align-items: center; border: 2px solid var(--border-subtle); background: #fff; border-radius: 20px;
  padding: 14px; padding-right: 52px; text-decoration: none; color: inherit;
}
.site-card:hover { color: inherit; border-color: var(--border-strong); }
.site-card.is-current { border-color: var(--ahg-dark-turquoise); background: var(--ahg-turquoise-20); }
.site-photo { position: relative; width: 54px; height: 54px; border-radius: 999px; background: var(--gradient-sea); background-size: cover; background-position: center; flex: 0 0 auto; }
.site-unread {
  position: absolute; top: -4px; right: -6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; border: 2px solid #fff;
  background: var(--status-new); color: #fff; font: 800 11px/18px var(--font-display); text-align: center;
}
.site-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.site-card-name { font: 800 16px/1.2 var(--font-display); color: var(--ahg-dark-blue); }
.site-card.is-current .cnt { background: rgba(255,255,255,.7); }
.site-gear { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); color: var(--text-muted-ahg); }
.site-gear .icon { width: 20px; height: 20px; }
.sheet-foot { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sheet-foot .search-pill { width: 100%; margin: 0; }

/* ===== Design-system pass: Manager overview (prototype "Manager overview", FR-J02/J03) ===== */
.needs-first-card { background: var(--gradient-deep); border-radius: 20px; padding: 16px; color: #fff; display: flex; flex-direction: column; gap: 10px; }
.needs-first-text { font: 800 19px/1.3 var(--font-display); }
.needs-first-sub { font: 400 13px/1.3 var(--font-text); opacity: .85; margin-top: -4px; }
.needs-first-btn {
  align-self: flex-start; display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: 999px;
  background: var(--ahg-yellow); color: #000; font: 700 15px/1 var(--font-text); text-decoration: none;
}
.needs-first-btn:hover { color: #000; background: var(--ahg-dark-yellow); }
.site-overview-card {
  background: #fff; border: 1px solid var(--border-subtle); border-radius: 20px; box-shadow: 0 2px 6px rgba(19,12,14,.08);
  padding: 14px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit;
}
.site-overview-card:hover { color: inherit; box-shadow: 0 3px 10px rgba(19,12,14,.12); }
.site-overview-name { font: 800 17px/1.2 var(--font-display); color: var(--ahg-dark-blue); }
.cnt-lg { padding: 6px 12px; font-size: 14px; }
.site-overview-facts { font: 400 13px/1.3 var(--font-text); color: var(--text-muted-ahg); }
.site-overview-note { font: 400 14px/1.4 var(--font-text); color: #000; }
.fact-bad { color: var(--status-new); font-weight: 700; }
.recurring-card { display: flex; flex-direction: column; gap: 10px; }
.recurring-card .card-title { margin: 0; font-size: 17px; }
.recurring-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 40%) 28px; align-items: center; gap: 10px; }
.recurring-label { font: 400 15px/1.3 var(--font-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recurring-bar { height: 10px; border-radius: 999px; background: var(--ahg-dark-turquoise); min-width: 10px; justify-self: start; }
.recurring-count { text-align: right; font: 800 15px/1 var(--font-display); color: var(--ahg-dark-blue); }
.handover-controls { display: flex; flex-direction: column; gap: 12px; }
.handover-controls .card-title { margin: 0; font-size: 17px; }
.handover-controls .chip { text-decoration: none; }
.handover-custom { display: flex; gap: 8px; align-items: center; }
.handover-custom .field-input-sm { margin: 0; height: 40px; min-width: 0; }
.handover-custom input[type="date"] { flex: 1 1 55%; }
.handover-custom input[type="text"] { flex: 1 1 45%; }
.handover .section-overline { font-size: 11px; }
.handover-list li a { font: 700 14px/1.3 var(--font-text); color: var(--ahg-dark-blue); text-decoration: none; }
.cnt-bad { background: var(--status-error-surface); color: var(--status-new); }

/* ===== Task activity, owner's design (23 Sep 2026): avatar · blue name + time right · text · dividers ===== */
.activity { gap: 0; }
.activity-item, .activity-item.is-message { gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-subtle); }
.activity-item:first-child { padding-top: 4px; }
.activity-item:last-child { border-bottom: 0; padding-bottom: 0; }
.activity-avatar { width: 36px; height: 36px; font-size: 12px; }
.activity-avatar.av-0 { background: #ee386f; } .activity-avatar.av-1 { background: var(--ahg-purple); }
.activity-avatar.av-2 { background: var(--ahg-dark-turquoise); } .activity-avatar.av-3 { background: var(--ahg-dark-blue); }
.activity-avatar.av-system { background: var(--border-strong); }
.activity-body { gap: 4px; }
.activity-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.activity-who { font: 800 15px/1.25 var(--font-display); color: var(--ahg-dark-blue); min-width: 0; }
.activity-head .activity-time { flex: 0 0 auto; margin: 0; font: 700 13px/1 var(--font-text); color: var(--text-muted-ahg); }
.activity-what, .is-event .activity-what { font: 400 15px/1.45 var(--font-text); color: #000; }

/* ===== Task activity "thread" (design handoff 23 Sep 2026, activityStyle = thread) ===== */
.activity-thread { display: flex; flex-direction: column; gap: 12px; list-style: none; margin: 0; padding: 0; }
.thread-day { display: flex; align-items: center; gap: 12px; padding-top: 4px; }
.thread-day span { font: 700 13px/1 var(--font-text); color: var(--text-muted-ahg); }
.thread-day::after { content: ""; flex: 1; height: 1px; background: var(--border-subtle); }
.thread-event { display: flex; flex-direction: column; gap: 6px; background: var(--surface-sunken); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 12px 14px; }
.thread-event-top { display: flex; align-items: center; gap: 10px; }
.thread-event-title { flex: 1; min-width: 0; font: 800 16px/1.2 var(--font-display); color: var(--ahg-dark-blue); }
.thread-event-dot { width: 14px; height: 14px; border-radius: 999px; flex: 0 0 auto; }
.thread-event-meta { display: flex; align-items: center; gap: 8px; }
.thread-event-who { flex: 1; min-width: 0; font: 400 14px/1.2 var(--font-text); color: #000; }
.thread-event-meta time { flex: 0 0 auto; font: 400 13px/1 var(--font-text); color: var(--text-muted-ahg); font-variant-numeric: tabular-nums; }
.thread-avatar-xs, .thread-avatar { border-radius: 999px; color: #fff; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; font-family: var(--font-display); font-weight: 800; }
.thread-avatar-xs { width: 22px; height: 22px; font-size: 9px; }
.thread-avatar { width: 28px; height: 28px; font-size: 10px; }
.thread-avatar-xs.av-0, .thread-avatar.av-0 { background: #ee386f; } .thread-avatar-xs.av-1, .thread-avatar.av-1 { background: var(--ahg-purple); }
.thread-avatar-xs.av-2, .thread-avatar.av-2 { background: var(--ahg-dark-turquoise); } .thread-avatar-xs.av-3, .thread-avatar.av-3 { background: var(--ahg-dark-blue); }
.thread-avatar-xs.av-system, .thread-avatar.av-system { background: var(--border-strong); }
.thread-msg { display: flex; gap: 8px; align-items: flex-end; }
.thread-bubble {
  flex: 0 1 auto; max-width: 78%; min-width: 0; display: flex; flex-direction: column; gap: 6px; background: #fff;
  border: 1px solid var(--border-subtle); box-shadow: 0 2px 6px rgba(19,12,14,.08); border-radius: 16px 16px 16px 4px; padding: 10px 12px 8px;
}
.thread-who { font: 800 14px/1.2 var(--font-display); color: var(--ahg-dark-blue); }
.thread-text { font: 400 16px/1.4 var(--font-text); color: #000; text-wrap: pretty; overflow-wrap: anywhere; }
.thread-time { align-self: flex-end; font: 400 12px/1 var(--font-text); color: var(--text-muted-ahg); font-variant-numeric: tabular-nums; }
.thread-photo { display: block; width: 220px; max-width: 100%; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: var(--gradient-sea); }
.thread-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thread-photo-actions { display: flex; flex-direction: column; gap: 8px; align-self: center; }
.thread-round-btn {
  width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--border-subtle); background: #fff; color: var(--ahg-dark-blue);
  display: flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none;
}
.thread-round-btn .icon { width: 20px; height: 20px; }
.thread-round-btn:hover { background: var(--surface-sunken); color: var(--ahg-dark-blue); }

/* Edit task: the report flow's single-step layout (no dark capture step) */
.edit-task .rstep { display: flex; }
.edit-task .rstep-foot .done-link { align-self: center; }
.loc-picker > summary { list-style: none; cursor: pointer; }
.loc-picker > summary::-webkit-details-marker { display: none; }
.loc-current { border-color: var(--ahg-dark-blue); background: var(--surface-sunken); }
.card-choice-dot.is-on { border-color: var(--ahg-dark-blue); background: var(--ahg-dark-blue); box-shadow: inset 0 0 0 4px #fff; }
.loc-change { margin-left: auto; font: 700 14px/1 var(--font-text); color: var(--ahg-dark-blue); text-decoration: underline; }
.loc-picker[open] .loc-change { visibility: hidden; }
.loc-picker-body { margin-top: 8px; }

/* ===== Design-system pass: Offline outbox (prototype "Offline outbox", M17) ===== */
.outbox-banner { background: var(--ahg-yellow-20); border: 1px solid var(--ahg-dark-yellow); border-radius: 20px; padding: 14px; font: 400 15px/1.5 var(--font-text); color: #000; }
.outbox-banner.is-clear { background: var(--status-success-surface); border-color: var(--status-done); }
.q-card { background: #fff; border: 1px solid var(--border-subtle); border-radius: 20px; box-shadow: 0 2px 6px rgba(19,12,14,.08); padding: 14px; display: flex; gap: 12px; align-items: center; }
.q-thumb { width: 52px; height: 52px; border-radius: 16px; background: var(--gradient-sea); background-size: cover; background-position: center; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; }
.q-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.q-title { font: 800 16px/1.2 var(--font-display); color: var(--ahg-dark-blue); overflow-wrap: anywhere; }
.q-meta { font: 400 13px/1.3 var(--font-text); color: var(--text-muted-ahg); }
.q-err { font: 400 12px/1.3 var(--font-text); color: var(--status-new); }
.q-pill { border-radius: 999px; padding: 6px 12px; font: 700 13px/1 var(--font-text); white-space: nowrap; flex: 0 0 auto; }
.q-waiting { background: var(--ahg-yellow-20); color: #000; }
.q-sending { background: var(--ahg-turquoise-20); color: var(--ahg-dark-turquoise); }
.q-error { background: var(--status-error-surface); color: var(--status-new); }
.outbox-note { font: 400 13px/1.4 var(--font-text); color: var(--text-muted-ahg); }

/* ===== Design-system pass: Check runner (prototype "Check runner") ===== */
.runner-head {
  position: sticky; top: 0; z-index: 1010; background: #fff; border-bottom: 1px solid var(--border-subtle);
  margin: 0 calc(-1 * var(--bs-gutter-x, 1.5rem) * .5) 14px; padding: 12px; padding-top: calc(12px + env(safe-area-inset-top));
  display: flex; flex-direction: column; gap: 10px;
}
.runner-title { margin: 0; font: 800 18px/1.2 var(--font-display); color: var(--ahg-dark-blue); }
.runner-bar { height: 10px; border-radius: 999px; background: var(--surface-sunken); overflow: hidden; }
.runner-bar-fill { height: 100%; background: var(--gradient-sea); transition: width .25s ease; }
.runner-progress { font: 700 13px/1 var(--font-text); color: var(--text-muted-ahg); }
.runner-body { display: flex; flex-direction: column; gap: 16px; padding-bottom: 24px; }
.run-card { background: #fff; border: 1px solid var(--border-subtle); border-radius: 20px; box-shadow: 0 2px 6px rgba(19,12,14,.08); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.run-label { margin: 0; font: 800 22px/1.25 var(--font-display); color: var(--ahg-dark-blue); letter-spacing: -.01em; }
.run-help { font: 400 15px/1.5 var(--font-text); color: #000; }
.run-recorded { align-self: flex-start; background: var(--surface-sunken); border-radius: 999px; padding: 6px 12px; font: 700 13px/1.2 var(--font-text); color: var(--text-muted-ahg); }
.run-photo-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.run-photo { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; border: 1px solid var(--border-subtle); }
.run-actions { display: flex; flex-direction: column; gap: 10px; }
.run-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; height: 60px; border-radius: 999px; background: #fff;
  font: 800 18px/1 var(--font-display); cursor: pointer;
}
.run-pass { border: 2px solid var(--status-done); color: var(--ahg-dark-blue); }
.run-dot { width: 20px; height: 20px; border-radius: 999px; background: var(--status-done); }
.run-fail { border: 2px solid var(--status-new); color: var(--status-new); }
.run-btn:disabled, .run-skip:disabled { opacity: .6; }
.run-skip { border: 0; background: transparent; color: var(--ahg-dark-blue); height: 48px; font: 700 15px/1 var(--font-text); text-decoration: underline; cursor: pointer; }
.run-finish { gap: 12px; }
.run-done { background: var(--surface-sunken); border-radius: 20px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.run-done-list { display: flex; flex-direction: column; gap: 2px; }
.run-done-row { display: flex; justify-content: space-between; gap: 10px; border: 0; background: transparent; padding: 6px 0; text-align: left; font: 400 14px/1.4 var(--font-text); color: #000; cursor: pointer; }
.run-done-row:hover span:first-child { text-decoration: underline; }
.run-done-result { flex: 0 0 auto; font-weight: 700; color: var(--text-muted-ahg); }
.run-done-result.r-pass { color: #0a7a72; } .run-done-result.r-fail { color: var(--status-new); } .run-done-result.r-flag { color: #8a6a00; }

/* ===== Design-system pass: Notifications (no prototype screen; built on the "Site feed" cards) ===== */
.note-card { align-items: center; }
.note-card.is-unread { border-color: var(--ahg-dark-turquoise); box-shadow: 0 2px 8px rgba(0,139,168,.18); }
.note-plate { width: 40px; height: 40px; }
.note-plate .icon { width: 20px; height: 20px; }
.note-title { font: 800 16px/1.2 var(--font-display); color: var(--ahg-dark-blue); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.note-new { background: var(--ahg-dark-turquoise); color: #fff; border-radius: 999px; padding: 3px 8px; font: 700 11px/1 var(--font-text); letter-spacing: .02em; }
.note-where { font: 400 13px/1.3 var(--font-text); color: var(--text-muted-ahg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-card .feed-card-dot { margin-top: 0; }
.note-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 40px 24px;
  background: #fff; border: 1px solid var(--border-subtle); border-radius: 20px; font: 400 15px/1.4 var(--font-text); color: var(--text-muted-ahg);
}
.note-empty strong { font: 800 18px/1.2 var(--font-display); color: var(--ahg-dark-blue); }
.note-foot { margin: 16px 0 8px; text-align: center; font: 400 13px/1.4 var(--font-text); color: var(--text-muted-ahg); }
.note-foot a { color: var(--ahg-dark-blue); font-weight: 700; }

/* ===== Design alignment (23 Sep 2026): no bottom nav on the task page, report steps, sent/queued and the runner ===== */
.no-bottom-nav { --bottom-nav-h: 0px; }
.no-bottom-nav .composer { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }

/* Task-page checklist (prototype "Task detail"): rows with a tick box; a row opens the runner at that step */
.checklist-card { display: flex; flex-direction: column; gap: 10px; }
.checklist-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.checklist-title { font: 800 15px/1.2 var(--font-display); color: var(--ahg-dark-blue); }
.checklist-count { font: 700 13px/1 var(--font-text); color: var(--text-muted-ahg); }
.checklist-name { font: 400 13px/1.3 var(--font-text); color: var(--text-muted-ahg); margin-top: -6px; }
.checklist-rows { display: flex; flex-direction: column; gap: 8px; }
.check-row {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px; border: 1px solid var(--border-subtle);
  border-radius: 16px; background: #fff; text-decoration: none; color: #000;
}
.check-row:hover { color: #000; border-color: var(--border-strong); }
.check-box {
  width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--border-strong); background: #fff; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; color: #fff; font: 800 15px/1 var(--font-text);
}
.check-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.check-row-label { font: 400 15px/1.3 var(--font-text); }
.check-row-result { font: 400 12px/1.3 var(--font-text); color: var(--text-muted-ahg); overflow-wrap: anywhere; }
.check-row .check-photo { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; }
.check-row.r-pass { background: var(--status-success-surface); }
.check-row.r-pass .check-box { border-color: var(--status-done, #11bab0); background: var(--status-done, #11bab0); }
.check-row.r-pass .check-row-label, .check-row.r-na .check-row-label { text-decoration: line-through; }
.check-row.r-fail, .check-row.r-flag { background: var(--status-error-surface); }
.check-row.r-fail .check-box, .check-row.r-flag .check-box { border-color: var(--status-new); background: var(--status-new); }
.check-row.r-na { background: var(--surface-sunken); }
.check-row.r-na .check-box { border-color: var(--border-strong); background: var(--border-strong); }
.check-report { margin: -2px 0 2px 50px; font: 700 13px/1.3 var(--font-text); color: var(--status-new); }
.checklist-signed { display: flex; flex-direction: column; gap: 6px; font: 400 13px/1.3 var(--font-text); color: var(--text-muted-ahg); }
.checklist-actions { display: flex; flex-direction: column; gap: 8px; }
.checklist-actions .btn-primary-lg { text-decoration: none; }
.checklist-complete { display: flex; align-items: center; justify-content: center; gap: 8px; font: 700 15px/1 var(--font-text); color: #0a7a72; padding: 6px 0; }
.checklist-complete .icon { width: 18px; height: 18px; }

/* "+" create sheet (prototype "Sheet — create"): same bottom sheet as My sites, rows with a blue icon */
.sheet-details > summary { list-style: none; cursor: pointer; }
.sheet-details > summary::-webkit-details-marker { display: none; }
.sheet-details .sheet-backdrop, .sheet-details .bottom-sheet { display: none; }
.sheet-details[open] .sheet-backdrop {
  display: block; position: fixed; inset: 0; z-index: 1; background: rgba(19,12,14,.55);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); animation: sheetFade .2s cubic-bezier(.32,.72,.28,1);
}
.sheet-details[open] .bottom-sheet {
  display: flex; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; z-index: 2; max-width: 560px; margin: 0 auto;
  max-height: 85vh; max-height: 85dvh; overflow-y: auto; background: #fff; border-radius: 20px 20px 0 0;
  padding: 14px 12px calc(26px + env(safe-area-inset-bottom)); animation: sheetRise .2s cubic-bezier(.32,.72,.28,1);
}
@media (prefers-reduced-motion: reduce) { .sheet-details[open] .sheet-backdrop, .sheet-details[open] .bottom-sheet { animation: none; } }
.create-sheet .sheet-grip { margin-bottom: 12px; }
.create-row {
  display: flex; align-items: center; gap: 16px; padding: 16px 12px; border-radius: 16px; text-decoration: none; cursor: pointer;
  font: 700 17px/1.2 var(--font-text); color: #000; list-style: none;
}
.create-row::-webkit-details-marker { display: none; }
.create-row:hover { background: var(--surface-sunken); color: #000; }
.create-row .icon { width: 26px; height: 26px; color: var(--ahg-dark-blue); flex: 0 0 auto; }
.create-group-form { display: flex; flex-direction: column; gap: 10px; padding: 4px 12px 12px; }
.bottom-sheet a.create-row, .bottom-sheet a.create-row:hover { color: #000; }   /* beats the layout's scoped a { color } */
.plate-deep { background: var(--gradient-deep); color: #fff; }

/* Report capture: Video in the right-hand slot (prototype); "No photo" became a Skip link top right */
.capture-skip { min-width: 70px; height: 44px; border: 0; background: transparent; color: #fff; font: 700 15px/1 var(--font-text); text-align: right; padding: 0 6px; cursor: pointer; }
.capture-skip:hover { text-decoration: underline; }
.thumb-video video { width: 100%; height: 100%; object-fit: cover; background: #130c0e; display: block; }
.thumb-video-badge { position: absolute; left: 4px; bottom: 4px; background: rgba(19,12,14,.7); color: #fff; border-radius: 999px; padding: 2px 6px; font: 700 10px/1.2 var(--font-text); }

/* ===== Report "Room or area" (owner design 23 Sep 2026): the chosen place as a card, recent chips, and the
   full-screen "Where is it?" picker (step 4) — replaces the long list of every room ===== */
/* Shared field (_PlaceField + placepicker.js): the select is the no-script control; the card, chips and picker need script. */
.place-field { display: flex; flex-direction: column; gap: 10px; }
.place-field.is-enhanced .place-fallback { display: none; }
.place-field:not(.is-enhanced) .place-card, .place-field:not(.is-enhanced) .place-recent { display: none; }
.place-picker { position: fixed; inset: 0; z-index: 1050; overflow-y: auto; overscroll-behavior: contain; background: var(--surface-sunken); display: flex; flex-direction: column; }
.place-picker[hidden] { display: none; }
body.place-picker-open { overflow: hidden; }
.place-card {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 14px; text-align: left; cursor: pointer;
  background: #fff; border: 2px solid var(--ahg-dark-blue); border-radius: 16px; color: var(--ahg-dark-blue);
}
.place-card.is-empty { border-color: var(--border-strong); border-style: dashed; }
.place-card-icon { flex: 0 0 auto; display: flex; }
.place-card-icon .icon { width: 24px; height: 24px; }
.place-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.place-card-name { font: 800 17px/1.2 var(--font-display); color: var(--ahg-dark-blue); overflow: hidden; text-overflow: ellipsis; }
.place-card.is-empty .place-card-name { color: var(--text-muted-ahg); font-weight: 700; }
.place-card-sub { font: 400 13px/1.2 var(--font-text); color: var(--text-muted-ahg); }
.place-card-change { flex: 0 0 auto; font: 700 15px/1 var(--font-text); color: var(--ahg-dark-blue); text-decoration: underline; }
.place-recent:empty { display: none; }
.pill-choice-btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  border: 2px solid var(--border-strong); background: #fff; color: #000; font: 700 14px/1.2 var(--font-text); text-align: left;
}
.pill-choice-btn.is-on { background: var(--ahg-dark-blue); border-color: var(--ahg-dark-blue); color: #fff; }

.picker-head { flex-direction: column; align-items: stretch; gap: 12px; }
.picker-top { display: flex; align-items: center; gap: 10px; }
.picker-search {
  display: flex; align-items: center; gap: 10px; height: 52px; margin: 0; padding: 0 14px; background: #fff;
  border: 2px solid var(--border-strong); border-radius: 8px; color: var(--text-muted-ahg); cursor: text;
}
.picker-search:focus-within { border-color: var(--ahg-dark-blue); }
.picker-search .icon { width: 20px; height: 20px; flex: 0 0 auto; }
.picker-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: 400 16px/1.3 var(--font-text); color: #000; }
.picker-filters { display: flex; gap: 8px; overflow-x: auto; }
.picker-filter {
  flex: 0 0 auto; height: 40px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--border-strong); background: #fff;
  color: #000; font: 700 14px/1 var(--font-text); cursor: pointer;
}
.picker-filter.is-on { background: var(--ahg-dark-blue); border-color: var(--ahg-dark-blue); color: #fff; }
.picker-body { padding: 4px 14px calc(24px + env(safe-area-inset-bottom)); }
.picker-overline { display: block; margin: 16px 0 4px; }
.picker-list { display: flex; flex-direction: column; }
.picker-row {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 8px 2px; text-align: left; cursor: pointer;
  background: transparent; border: 0; border-bottom: 1px solid var(--border-subtle); color: #000;
}
.picker-row:hover { background: rgba(255,255,255,.6); }
.picker-row-icon { flex: 0 0 auto; display: flex; color: var(--ahg-dark-blue); }
.picker-row-icon .icon { width: 22px; height: 22px; }
.picker-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.picker-row-name { font: 700 16px/1.2 var(--font-text); }
.picker-row-sub { font: 400 13px/1.2 var(--font-text); color: var(--text-muted-ahg); }
.picker-row-check { flex: 0 0 auto; display: flex; color: var(--ahg-dark-blue); }
.picker-row-check .icon { width: 22px; height: 22px; }
.picker-row.is-on .picker-row-name { color: var(--ahg-dark-blue); }
.picker-empty { margin: 16px 0; font: 400 15px/1.4 var(--font-text); color: var(--text-muted-ahg); }
.picker-none {
  display: block; width: 100%; margin-top: 20px; min-height: 48px; border-radius: 999px; border: 2px solid var(--ahg-dark-blue);
  background: #fff; color: var(--ahg-dark-blue); font: 700 15px/1 var(--font-text); cursor: pointer;
}

/* ===== Sign in (M2) — full-height form, action pinned to the foot ===== */
main:has(> .signin) { padding-bottom: 0; }
.signin { min-height: 100dvh; display: flex; flex-direction: column; margin: 0 -12px; }
.signin-body { flex: 1; display: flex; flex-direction: column; gap: 18px; padding: calc(40px + env(safe-area-inset-top)) 24px 24px; }
/* Supplied JPG has a white margin round the mark — size it up and pull it left so the mark lines up with the text. */
.brand-mark { display: block; width: 104px; height: auto; margin: -18px 0 -6px -19px; }
.signin-overline { margin: 0 0 -10px; }
.signin-title { margin: 0 0 6px; font: 800 30px/1.1 var(--font-display); color: var(--ahg-dark-blue); }
.signin-text { margin: 0; font: 400 16px/1.5 var(--font-text); color: #000; }
.signin-field { display: flex; flex-direction: column; gap: 8px; }
.signin-label { font: 700 15px/1.2 var(--font-text); color: var(--ahg-dark-blue); margin: 0; }
.signin-alert { color: var(--status-new); font: 700 14px/1.3 var(--font-text); }
.signin-alert ul { margin: 0; padding: 0; list-style: none; }
.signin-alert.validation-summary-valid { display: none; }
.signin-check { display: flex; align-items: flex-start; gap: 12px; font: 400 16px/1.35 var(--font-text); color: #000; cursor: pointer; margin: 0; }
.signin-check input { flex: 0 0 auto; width: 22px; height: 22px; margin: 0; accent-color: var(--ahg-dark-blue); cursor: pointer; }
.signin-hint { display: block; margin-top: 3px; font-size: 13px; color: var(--text-muted-ahg); }
.signin-link { align-self: flex-start; font: 700 15px/1.2 var(--font-text); color: var(--ahg-dark-blue); text-decoration: underline; text-underline-offset: 3px; }
.signin-link:hover { color: var(--ahg-dark-turquoise); }
.signin-foot {
  position: sticky; bottom: 0; display: flex; flex-direction: column; gap: 12px; background: #fff;
  border-top: 1px solid rgba(19,12,14,.12); padding: 14px 24px calc(14px + env(safe-area-inset-bottom));
}
.signin-link-end { align-self: flex-end; }
.pw-wrap { position: relative; }
.pw-wrap .field-input { padding-right: 56px; }
.pw-wrap .field-input::-ms-reveal { display: none; }
.pw-toggle {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 48px; height: 44px;
  display: flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: none;
  color: var(--ahg-dark-blue); cursor: pointer;
}
.pw-toggle .icon { width: 22px; height: 22px; }
.pw-toggle:focus-visible { outline: 2px solid var(--ahg-dark-blue); outline-offset: -2px; }