/* Soft Glass mobile component CSS — ported from Claude Design prototype
   public/preview/mobile/mobile.css. The prototype mounted inside an iOS
   device frame (402×874); for production we strip that frame and let
   .mob-screen fill the viewport, honouring safe-area-inset for notched
   devices.

   Tokens come from public/css/tokens.css (loaded earlier in index.html).
   No @import here — keeps the cascade explicit. Fonts loaded in index.html. */

#app, .mob-screen * { box-sizing: border-box; }

/* ─────────────────────────────────────────────────────────────────────
   iOS Safari auto-zooms on focus when an input/textarea/select has a
   computed font-size below 16px. We have plenty of inputs styled at 12-14px
   (.ob-input, .search-input, .draft-text, .np-input, etc.) — so tapping
   any of them jumps the page in by ~10%.

   user-scalable=no in the viewport meta is ignored by iOS 10+ for
   accessibility reasons, so the only real fix is to raise the font-size.
   We do this only on coarse-pointer devices so the desktop UI keeps its
   tighter 14px form fields.

   `!important` because many of these inputs have a more specific selector
   that would otherwise win — and there's no visual harm in 16px on a
   touch device (it's the same size iOS uses by default).
   ───────────────────────────────────────────────────────────────────── */
@media (pointer: coarse) {
  input, select, textarea,
  .ob-input, .search-input, .draft-text, .report-textarea,
  .mob-asst-input, .np-input, .wrm-input, .wrm-textarea {
    font-size: 16px !important;
  }
}

body {
  font-feature-settings: 'ss01', 'cv11';
}

/* ──────────────────────────────────────────────────────────────
   The mobile screen — full viewport on a real phone, with safe-area
   support for the dynamic island and home indicator.
   ────────────────────────────────────────────────────────────── */
.mob-screen {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;            /* dvh respects browser-chrome collapse */
  width: 100%;
  max-width: 480px;              /* letterbox on tablet+ until the desktop port lands */
  margin: 0 auto;
  background: var(--gradient-surface);
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ── Topbar — thin-glass, minimal ─────────────────────────────── */
.mob-topbar {
  flex-shrink: 0;
  height: 112px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid rgba(37, 99, 235, 0.08);
  z-index: 5;
}
.mob-topbar .brand-l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mob-topbar img { height: 80px; width: auto; display: block; }
/* Back button — same icon-btn chrome, slides in with a tiny fade so it
   doesn't pop when you navigate away from the projects list. */
.topbar-back { transition: opacity 160ms ease; }
.topbar-back[hidden] { display: none !important; }
.topbar-back:not([hidden]) { animation: topbar-back-in 220ms var(--ease-out) both; }
@keyframes topbar-back-in {
  from { opacity: 0; transform: translateX(-4px); }
  to   { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .topbar-back:not([hidden]) { animation: none; }
}
.icon-btn {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 10px;
  color: var(--ink-strong);
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-out), transform var(--motion-fast);
  -webkit-tap-highlight-color: transparent;
}
.icon-btn:active { background: rgba(11, 36, 71, 0.08); transform: scale(0.94); }
.icon-btn.notif { position: relative; }
.icon-btn.notif .dot {
  position: absolute;
  top: 7px; right: 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--sev-critical-text);
  border: 2px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 6px var(--sev-critical-text);
}

/* ── Scrollable body ─────────────────────────────────────────── */
.mob-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px 16px 96px;
  scroll-behavior: smooth;
}

.mob-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin: 6px 0 18px;
}
.mob-head h1 {
  font: 700 26px/1.15 var(--font-display);
  letter-spacing: -0.022em;
  color: var(--ink-strong);
  margin: 0;
}
.mob-head .sub {
  font: 400 13px/1.45 var(--font-body);
  color: var(--ink-muted);
  margin-top: 4px;
}

/* Compact search */
.mob-search {
  position: relative;
  margin: 0 0 16px;
}
.mob-search input {
  width: 100%;
  height: 40px;
  padding: 0 14px 0 38px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(37, 99, 235, 0.12);
  border-radius: 12px;
  font: 400 14px/1 var(--font-body);
  color: var(--ink);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--motion-fast), background var(--motion-fast);
}
.mob-search input:focus { background: #FFF; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37,99,235,0.14); }
.mob-search input::placeholder { color: var(--ink-soft); }
.mob-search svg {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--ink-soft);
  pointer-events: none;
}

/* ── Project card (mobile) ──────────────────────────────────── */
.mob-proj-list { display: flex; flex-direction: column; gap: 12px; }

.mob-proj-card {
  display: block;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 4px 14px rgba(40, 70, 130, 0.06);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.mob-proj-card:active {
  transform: scale(0.985);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 2px 6px rgba(40, 70, 130, 0.10);
}
.mob-proj-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.mob-proj-icon {
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(220, 231, 251, 0.6));
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 4px 10px rgba(37, 99, 235, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-accent);
}
.mob-proj-body { flex: 1; min-width: 0; }
.mob-proj-name {
  font: 600 16px/1.25 var(--font-body);
  color: var(--ink-strong);
  margin: 0 0 2px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mob-proj-sub {
  font: 400 12.5px/1.4 var(--font-body);
  color: var(--ink-muted);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mob-proj-chev { color: var(--ink-soft); flex-shrink: 0; }
.mob-proj-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.mob-proj-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.mob-proj-value {
  font: 600 11.5px/1 var(--font-mono);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.mob-proj-quick-row {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(37, 99, 235, 0.08);
}
.mob-proj-quick {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 38px;
  padding: 0 8px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(37, 99, 235, 0.10);
  border-radius: 9px;
  font: 600 11.5px/1 var(--font-body);
  color: var(--ink-strong);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: all 160ms var(--ease-out);
}
.mob-proj-quick:active {
  background: var(--brand-soft);
  transform: scale(0.97);
}
.mob-proj-quick svg { color: var(--brand-accent); }

.mob-quick-toast {
  position: fixed;                /* viewport */
  left: 16px;
  right: 16px;
  bottom: max(50px, calc(env(safe-area-inset-bottom) + 24px));
  max-width: 448px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 12px;
  box-shadow: 0 14px 28px rgba(40, 70, 130, 0.18), inset 0 1px 0 rgba(255,255,255,0.9);
  font: 500 12.5px/1.4 var(--font-body);
  color: var(--ink);
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
  z-index: 200;
}
.mob-quick-toast.show { opacity: 1; transform: translateY(0); }
.mob-quick-toast strong { color: var(--ink-strong); font-weight: 600; }
.mob-quick-toast .ico {
  width: 26px; height: 26px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-accent) 100%);
  color: #FFF;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 5px rgba(37, 99, 235, 0.25);
}

/* ── Severity chip (compact mobile size) ─────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 9999px;
  font: 600 11.5px/1.2 var(--font-body);
  border: 1px solid;
  white-space: nowrap;
}
.chip::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 4px currentColor;
  opacity: 0.85;
}
.chip.no-dot::before { display: none; }
.chip.critical { color: var(--sev-critical-text); background: var(--sev-critical-fill); border-color: var(--sev-critical-stroke); }
.chip.high     { color: var(--sev-high-text);     background: var(--sev-high-fill);     border-color: var(--sev-high-stroke); }
.chip.medium   { color: var(--sev-medium-text);   background: var(--sev-medium-fill);   border-color: var(--sev-medium-stroke); }
.chip.low      { color: var(--sev-low-text);      background: var(--sev-low-fill);      border-color: var(--sev-low-stroke); }
.chip.info     { color: var(--sev-info-text);     background: var(--sev-info-fill);     border-color: var(--sev-info-stroke); }

/* ── Back row + project banner ───────────────────────────────── */
.mob-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px 6px 4px;
  margin: -4px -6px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font: 600 13px/1 var(--font-body);
  color: var(--brand);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mob-back:active { opacity: 0.6; }

.mob-banner {
  position: relative;
  padding: 18px 18px 16px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 6px 18px rgba(40, 70, 130, 0.06);
  margin-bottom: 16px;
  overflow: hidden;
}
.mob-banner h1 {
  position: relative;
  font: 700 22px/1.2 var(--font-display);
  letter-spacing: -0.018em;
  color: var(--ink-strong);
  margin: 0 0 6px;
}
.mob-banner .meta {
  position: relative;
  font: 500 12px/1.4 var(--font-body);
  color: var(--ink-muted);
  margin: 0 0 12px;
}
.mob-banner .meta .dot { color: var(--ink-soft); margin: 0 4px; }
.mob-banner-chips { position: relative; display: flex; gap: 5px; flex-wrap: wrap; }

/* ── Tabs — horizontally scrollable, with fade mask ──────────── */
.mob-tabs-wrap {
  position: relative;
  margin: 0 -16px 14px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(37, 99, 235, 0.10);
}
.mob-tabs-wrap::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 24px;
  background: linear-gradient(90deg, transparent, var(--surface-low));
  pointer-events: none;
}
.mob-tabs {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.mob-tabs::-webkit-scrollbar { display: none; }
.mob-tab {
  position: relative;
  flex-shrink: 0;
  padding: 12px 2px 14px;
  background: transparent;
  border: none;
  font: 500 13.5px/1 var(--font-body);
  color: var(--ink-muted);
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.mob-tab.active { color: var(--ink-strong); font-weight: 600; }
.mob-tab::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--brand);
  border-radius: 2px 2px 0 0;
  transform: scaleX(0);
  transition: transform 240ms var(--ease-out);
}
.mob-tab.active::after { transform: scaleX(1); }
.mob-tab .count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  margin-left: 5px;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(11, 36, 71, 0.06);
  color: var(--ink-muted);
}
.mob-tab.active .count { background: var(--brand-soft); color: var(--brand-hover); }

/* ── Date marker ─────────────────────────────────────────────── */
.mob-date {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 2px 8px;
}
.mob-date-label {
  font: 600 10.5px/1 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.mob-date-line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(37,99,235,0.15), transparent); }

/* ── Email row (compact, tap-to-open) ────────────────────────── */
.mob-email-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  padding-left: 26px;
}
.mob-email-list::before {
  /* the rail */
  content: '';
  position: absolute;
  left: 8px;
  top: 4px; bottom: 4px;
  width: 1.5px;
  background: linear-gradient(180deg,
    rgba(37,99,235,0.06) 0%,
    rgba(37,99,235,0.22) 12%,
    rgba(37,99,235,0.22) 88%,
    rgba(37,99,235,0.06) 100%);
}
.mob-email {
  position: relative;
  display: block;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 14px;
  overflow: visible;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 2px 8px rgba(40, 70, 130, 0.04);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 180ms var(--ease-out), opacity 220ms var(--ease-out);
}
/* Acknowledged emails fade down a notch and the subject drops to
   regular weight — standard email-inbox convention. Unacked rows keep
   the bolder subject so they read as "needs attention" without any
   dots, badges or decoration. */
.mob-email.is-acked { opacity: 0.62; }
.mob-email.is-acked .mob-email-subject { font-weight: 500; }
.mob-email.is-unacked .mob-email-subject { font-weight: 700; }
.mob-email::before {
  /* the timeline dot — glass marble */
  content: '';
  position: absolute;
  left: -26px; top: 18px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.95) 0%, var(--gloss) 38%, var(--core) 92%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.9),
    inset 0 -1px 1px rgba(0,0,0,0.06),
    0 0 0 3px var(--halo-soft),
    0 0 12px var(--halo-glow),
    0 2px 5px rgba(11, 36, 71, 0.10);
  z-index: 1;
}
.mob-email::after {
  /* tiny highlight speck on the dot */
  content: '';
  position: absolute;
  left: -22px; top: 21px;
  width: 4px; height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  filter: blur(0.5px);
  z-index: 2;
}
.mob-email.critical { --core: #C24A3B; --gloss: #E88577; --halo-soft: rgba(241,179,168,0.55); --halo-glow: rgba(194,74,59,0.38); }
.mob-email.high     { --core: #C77A1C; --gloss: #E8A85A; --halo-soft: rgba(241,197,127,0.55); --halo-glow: rgba(199,122,28,0.38); }
.mob-email.medium   { --core: #2860C8; --gloss: #5C8FE0; --halo-soft: rgba(159,191,238,0.55); --halo-glow: rgba(40,96,200,0.38); }
.mob-email.low      { --core: #1F8A7A; --gloss: #5BB3A4; --halo-soft: rgba(143,207,193,0.50); --halo-glow: rgba(31,138,122,0.30); }
.mob-email:active { transform: scale(0.985); }
.mob-email-body { padding: 12px 14px; }
.mob-email-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.mob-email-time { font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.mob-email-subject {
  font: 600 14px/1.3 var(--font-body);
  color: var(--ink-strong);
  margin: 0 0 3px;
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.mob-email-from {
  font: 400 12px/1.4 var(--font-body);
  color: var(--ink-muted);
  margin: 0 0 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mob-email-preview {
  font: 400 12.5px/1.5 var(--font-body);
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mob-email-preview .hl {
  border-bottom: 2px solid currentColor;
  background: color-mix(in srgb, currentColor 8%, transparent);
  padding: 0 1px;
}
.mob-email-preview .hl.critical { color: var(--sev-critical-text); }
.mob-email-preview .hl.high     { color: var(--sev-high-text); }
.mob-email-preview .hl.medium   { color: var(--sev-medium-text); }

/* ── Slide-in sidebar sheet ──────────────────────────────────── */
.scrim {
  position: fixed;                /* viewport, not parent — prototype was inside iOS frame */
  inset: 0;
  background: rgba(11, 36, 71, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms var(--ease-out);
  z-index: 80;
}
.scrim.open { opacity: 1; pointer-events: auto; }

.mob-sheet-l {
  position: fixed;                /* viewport */
  top: 0; left: 0;
  height: 100%;
  width: 80%;
  max-width: 280px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-right: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 18px 40px rgba(40, 70, 130, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transform: translateX(-100%);
  transition: transform 320ms var(--ease-out);
  z-index: 90;
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
}
.mob-sheet-l.open { transform: translateX(0); }
.mob-sheet-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  margin-bottom: 16px;
}
.mob-sheet-brand img { height: 88px; width: auto; }

.nav-section { margin-top: 6px; }
.nav-section-label {
  font: 600 11px/1 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 4px 12px 8px;
}
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font: 500 14px/1 var(--font-body);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--motion-fast) var(--ease-out);
}
.nav-item:active { background: rgba(11, 36, 71, 0.06); }
.nav-item.active {
  background: var(--brand-soft);
  color: var(--brand-hover);
  font-weight: 600;
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: -14px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 22px;
  background: var(--brand);
  border-radius: 0 3px 3px 0;
}
.nav-item svg { flex-shrink: 0; opacity: 0.7; }
.nav-item.active svg { opacity: 1; }

/* ── AI Assistant nav icon — gentle twinkle ────────────────────
   Each star twinkles on its own clock. Calmer than the composer
   version (smaller scale, smaller opacity range) because this
   icon is always on screen — too much motion would be distracting.
   Tint shifts to brand-accent so it reads as a "live" item even
   when the row isn't active. */
.nav-item-ai .ai-sparkles-nav { overflow: visible; color: var(--brand-accent); opacity: 1; }
.nav-item-ai.active .ai-sparkles-nav { color: var(--brand); }
.nav-item-ai .ai-sparkles-nav .ai-star {
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform, opacity;
}
.nav-item-ai .ai-sparkles-nav .ai-star-1 { animation: ai-nav-twinkle-1 2.4s ease-in-out infinite; }
.nav-item-ai .ai-sparkles-nav .ai-star-2 { animation: ai-nav-twinkle-2 1.9s ease-in-out infinite 0.4s; }
.nav-item-ai .ai-sparkles-nav .ai-star-3 { animation: ai-nav-twinkle-3 1.6s ease-in-out infinite 0.85s; }

@keyframes ai-nav-twinkle-1 {
  0%, 100% { opacity: 0.85; transform: scale(1)    rotate(0deg); }
  50%      { opacity: 1;    transform: scale(1.06) rotate(-3deg); }
}
@keyframes ai-nav-twinkle-2 {
  0%, 100% { opacity: 0.45; transform: scale(0.7); }
  50%      { opacity: 1;    transform: scale(1.05); }
}
@keyframes ai-nav-twinkle-3 {
  0%, 100% { opacity: 0.5;  transform: scale(0.72); }
  50%      { opacity: 0.9;  transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-item-ai .ai-sparkles-nav .ai-star { animation: none; }
}
.nav-item .count {
  margin-left: auto;
  font: 600 11px/1 var(--font-mono);
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--sev-critical-fill);
  color: var(--sev-critical-text);
  font-variant-numeric: tabular-nums;
}
.nav-item .count.muted { background: rgba(11,36,71,0.06); color: var(--ink-muted); }

.mob-sheet-foot {
  margin-top: auto;
  padding: 12px;
  border-top: 1px solid rgba(37, 99, 235, 0.08);
  font: 500 11.5px/1.5 var(--font-body);
  color: var(--ink-muted);
}
.mob-sheet-foot .hash { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-soft); margin-top: 4px; }
.mob-sheet-foot .verified-line { display: flex; align-items: center; gap: 8px; }
.mob-sheet-foot svg { color: var(--brand-accent); }

/* ── Bottom-sheet email detail ──────────────────────────────── */
.mob-sheet-b {
  position: fixed;                /* viewport, not parent */
  left: 0; right: 0; bottom: 0;
  margin: 0 auto;
  max-width: 480px;               /* match the .mob-screen letterbox */
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-top: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -18px 40px rgba(40, 70, 130, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  max-height: 85%;
  transform: translateY(100%);
  transition: transform 320ms var(--ease-out);
  z-index: 90;
  display: flex;
  flex-direction: column;
}
.mob-sheet-b.open { transform: translateY(0); }
/* Static HTML wraps everything below the drag handle in
   <div id="bottom-sheet-content">. Without these rules the wrapper
   isn't a flex container, so .mob-sheet-b-body's `flex: 1` had no
   effect — the body grew to its content height, the sheet overflowed
   the viewport, and the body's own overflow-y: auto never engaged.
   This is the real reason the email sheet wouldn't scroll. */
#bottom-sheet-content {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.mob-sheet-handle {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  padding: 10px 0 4px;
}
.mob-sheet-handle::after {
  content: '';
  width: 38px; height: 4px;
  background: rgba(11, 36, 71, 0.18);
  border-radius: 2px;
}
.mob-sheet-b-head {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 18px 14px;
  border-bottom: 1px solid rgba(37, 99, 235, 0.08);
}
.mob-sheet-b-head-l { min-width: 0; }
.mob-sheet-b-head h3 {
  font: 600 15px/1.3 var(--font-body);
  color: var(--ink-strong);
  margin: 4px 0 4px;
  letter-spacing: -0.005em;
}
.mob-sheet-b-head .from {
  font: 400 12px/1.4 var(--font-body);
  color: var(--ink-muted);
}
.mob-sheet-b-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;    /* momentum scroll on older iOS */
  overscroll-behavior: contain;          /* don't bounce the page underneath */
  touch-action: pan-y;                   /* explicit: vertical pan, no h-scroll */
  /* Generous bottom padding + env() for iOS home-indicator safe area so
     the final button never sits flush against the screen edge. */
  padding: 16px 18px calc(40px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* CRITICAL: every direct child of the sheet body must not shrink.
   `.action-box` has `overflow: hidden` (for clipping its radial glow),
   which sets its min-content height to 0 when it's a flex item — flex
   then shrinks the box to the size of its head, hiding the action text
   and buttons. flex-shrink:0 on all body children keeps them at their
   natural size; the body's overflow-y:auto handles scrolling when the
   total exceeds available height. */
.mob-sheet-b-body > * { flex-shrink: 0; min-height: max-content; }

.detail-block-label {
  font: 600 10.5px/1 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.detail-triggers { display: flex; gap: 5px; flex-wrap: wrap; }
.trig {
  padding: 4px 10px;
  border-radius: 9999px;
  font: 600 11.5px/1.2 var(--font-body);
  border: 1px solid transparent;
}
.trig.critical { background: var(--sev-critical-fill); color: var(--sev-critical-text); border-color: var(--sev-critical-stroke); }
.trig.high     { background: var(--sev-high-fill);     color: var(--sev-high-text);     border-color: var(--sev-high-stroke); }
.trig.medium   { background: var(--sev-medium-fill);   color: var(--sev-medium-text);   border-color: var(--sev-medium-stroke); }

.ai-summary {
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(207, 250, 254, 0.4), rgba(220, 231, 251, 0.4));
  border: 1px solid rgba(8, 145, 178, 0.15);
  border-radius: 12px;
  font: 400 13px/1.6 var(--font-body);
  color: var(--ink);
}
.ai-summary strong { color: var(--ink-strong); font-weight: 600; }
.ai-summary-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 11px/1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brand-accent);
  margin-bottom: 10px;
}

.action-box {
  position: relative;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(37, 99, 235, 0.14);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 4px 14px rgba(37, 99, 235, 0.06);
  /* No overflow:hidden, no ::before radial glow — both were doing more harm
     than good (the glow read as a coloured smudge on the right; overflow:hidden
     also collapsed the action-box as a flex item, hiding its content). */
}
.action-box-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.action-box-icon {
  width: 30px; height: 30px;
  flex-shrink: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-accent) 100%);
  display: flex; align-items: center; justify-content: center;
  color: #FFF;
  box-shadow:
    0 3px 8px rgba(37, 99, 235, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
.action-box-label {
  font: 700 10.5px/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-accent);
}
.action-box-text {
  font: 500 13px/1.55 var(--font-body);
  color: var(--ink);
  margin: 0 0 12px;
}
.action-box-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* Draft reply (primary) grows to fill leftover width; Mark actioned and
   Snooze are sized by their label. Real button heights — no more
   "long and thin" stretched ribbons. On narrow viewports the row wraps
   gracefully so nothing gets squished. */
.action-box-actions .btn { height: 36px; padding: 0 14px; font-size: 13px; }
.action-box-actions .btn-primary { flex: 1 1 50%; min-width: 140px; }
.action-box-actions .btn-secondary,
.action-box-actions .btn-ghost { flex: 0 0 auto; }
.action-box-actions .clause-ref {
  font: 500 11px/1 var(--font-mono);
  color: var(--ink-soft);
  padding: 6px 10px;
  background: rgba(11, 36, 71, 0.04);
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.detail-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px;
  border: none;
  border-radius: 10px;
  font: 600 13.5px/1 var(--font-body);
  cursor: pointer;
  white-space: nowrap;
  transition: all 180ms var(--ease-out);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: var(--brand);
  color: #FFF;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 4px 14px rgba(37, 99, 235, 0.28);
}
.btn-secondary {
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink-strong);
  border: 1px solid rgba(37, 99, 235, 0.14);
}
.btn-ghost { background: transparent; color: var(--ink-muted); padding: 0 12px; }
.btn-light {
  background: rgba(255, 255, 255, 0.22);
  color: #FFF;
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.btn-block { width: 100%; }
.btn-sm { height: 34px; padding: 0 13px; font-size: 12.5px; border-radius: 8px; gap: 6px; }

/* ── AI Assistant view (mobile) ──────────────────────────────── */
.mob-asst-composer {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(37, 99, 235, 0.14);
  border-radius: 18px;
  padding: 14px 16px 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 8px 20px rgba(37, 99, 235, 0.08);
  margin-bottom: 18px;
}
.mob-asst-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mob-asst-icon {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-accent) 100%);
  color: #FFF;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  box-shadow: 0 2px 5px rgba(37, 99, 235, 0.25), inset 0 1px 0 rgba(255,255,255,0.3);
  /* The icon gently floats; the glow breathes underneath via box-shadow keyframes. */
  animation: mob-asst-icon-float 3.6s ease-in-out infinite,
             mob-asst-icon-glow  2.8s ease-in-out infinite;
}
.mob-asst-icon .ai-sparkles {
  width: 20px; height: 20px;
  overflow: visible;     /* lets each star scale beyond its bounding box */
  display: block;
}
/* Per-star twinkles — independent timing so the icon never looks "synced". */
.mob-asst-icon .ai-star {
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform, opacity;
}
.mob-asst-icon .ai-star-1 { animation: ai-twinkle-1 1.9s ease-in-out infinite; }
.mob-asst-icon .ai-star-2 { animation: ai-twinkle-2 1.4s ease-in-out infinite 0.35s; }
.mob-asst-icon .ai-star-3 { animation: ai-twinkle-3 1.15s ease-in-out infinite 0.7s; }

@keyframes mob-asst-icon-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.5px); }
}
@keyframes mob-asst-icon-glow {
  0%, 100% { box-shadow: 0 2px 5px  rgba(37, 99, 235, 0.25), 0 0 0 0  rgba(37, 99, 235, 0.35), inset 0 1px 0 rgba(255,255,255,0.3); }
  50%      { box-shadow: 0 4px 14px rgba(37, 99, 235, 0.45), 0 0 0 5px rgba(37, 99, 235, 0.12), inset 0 1px 0 rgba(255,255,255,0.3); }
}
@keyframes ai-twinkle-1 {
  0%, 100% { opacity: 1;    transform: scale(1)    rotate(0deg); }
  50%      { opacity: 0.9;  transform: scale(1.08) rotate(-3deg); }
}
@keyframes ai-twinkle-2 {
  0%, 100% { opacity: 0.4;  transform: scale(0.65); }
  50%      { opacity: 1;    transform: scale(1.05); }
}
@keyframes ai-twinkle-3 {
  0%, 100% { opacity: 0.45; transform: scale(0.7); }
  50%      { opacity: 0.95; transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .mob-asst-icon,
  .mob-asst-icon .ai-star { animation: none; }
}
.mob-asst-label {
  font: 700 10.5px/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-accent);
}
.mob-asst-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  font: 400 14px/1.55 var(--font-body);
  color: var(--ink);
  padding: 2px 0 10px;
  -webkit-appearance: none;
  appearance: none;
}
.mob-asst-input::placeholder { color: var(--ink-soft); }
.mob-asst-tools { display: flex; gap: 6px; margin-bottom: 10px; }
.mob-asst-tool {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 10px;
  background: rgba(11, 36, 71, 0.04);
  border: 1px solid transparent;
  border-radius: 7px;
  font: 500 12px/1 var(--font-body);
  color: var(--ink-muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mob-asst-tool:active { background: var(--brand-soft); color: var(--brand-hover); }
.mob-asst-tool.recording { background: var(--sev-critical-fill); color: var(--sev-critical-text); border-color: var(--sev-critical-stroke); }
.mob-asst-tool .rec-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sev-critical-text);
  box-shadow: 0 0 5px var(--sev-critical-text);
  animation: rec-pulse 1.6s ease-in-out infinite;
}
@keyframes rec-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.mob-asst-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(37, 99, 235, 0.08);
}
.mob-asst-context { font: 500 11.5px/1 var(--font-body); color: var(--ink-muted); }
.mob-asst-context strong { color: var(--ink-strong); font-weight: 600; }

.mob-asst-suggest {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 22px;
}
.mob-asst-suggest-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 2px 6px rgba(11,36,71,0.04);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms var(--ease-out), box-shadow 160ms var(--ease-out), border-color 120ms var(--ease-out);
}
.mob-asst-suggest-card:hover {
  border-color: rgba(37, 99, 235, 0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 6px 16px rgba(37, 99, 235, 0.10);
  transform: translateY(-1px);
}
.mob-asst-suggest-card:active { transform: scale(0.985); }
.mob-asst-suggest-glyph {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--brand-soft) 0%, var(--brand-accent-soft) 100%);
  color: var(--brand-accent);
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.12);
}
.mob-asst-suggest-glyph svg { width: 22px; height: 22px; }
/* The glyph tile picks up a slightly stronger accent when the card is hovered,
   so the icon feels reactive to the same hover state as the card itself. */
.mob-asst-suggest-card:hover .mob-asst-suggest-glyph {
  background: linear-gradient(135deg, var(--brand-accent-soft) 0%, var(--brand-soft) 100%);
  color: var(--brand);
}
.mob-asst-suggest-label {
  font: 600 12.5px/1.25 var(--font-body);
  color: var(--ink-strong);
  letter-spacing: -0.005em;
}

.mob-asst-recent-title {
  font: 600 14px/1.3 var(--font-display);
  letter-spacing: -0.005em;
  color: var(--ink-strong);
  margin: 0 0 10px;
}
.mob-asst-recent { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.mob-asst-recent-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms var(--ease-out), border-color 120ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.mob-asst-recent-row:hover {
  border-color: rgba(37, 99, 235, 0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 4px 12px rgba(37, 99, 235, 0.08);
  transform: translateY(-1px);
}
.mob-asst-recent-row:active { transform: scale(0.985); }
.mob-asst-recent-icon {
  width: 28px; height: 28px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11, 36, 71, 0.04);
  color: var(--ink-muted);
  flex-shrink: 0;
}
.mob-asst-recent-row.kind-reply         .mob-asst-recent-icon { background: var(--brand-soft);          color: var(--brand-hover); }
.mob-asst-recent-row.kind-scan          .mob-asst-recent-icon { background: var(--brand-accent-soft);   color: var(--brand-accent); }
.mob-asst-recent-row.kind-project       .mob-asst-recent-icon { background: var(--sev-low-fill);        color: var(--sev-low-text); }
.mob-asst-recent-row.kind-notice        .mob-asst-recent-icon { background: var(--sev-high-fill);       color: var(--sev-high-text); }
.mob-asst-recent-row.kind-flagged_email .mob-asst-recent-icon { background: var(--sev-high-fill);       color: var(--sev-high-text); }
.mob-asst-recent-row.kind-contract_scan .mob-asst-recent-icon { background: var(--brand-accent-soft);   color: var(--brand-accent); }
.mob-asst-recent-title-row { font: 600 13px/1.3 var(--font-body); color: var(--ink-strong); letter-spacing: -0.005em; }
.mob-asst-recent-meta { font: 500 11px/1.4 var(--font-body); color: var(--ink-muted); margin-top: 1px; }
.mob-asst-status {
  font: 600 10.5px/1 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 9999px;
  white-space: nowrap;
}
.mob-asst-status.done    { background: var(--sev-low-fill);  color: var(--sev-low-text);  border: 1px solid var(--sev-low-stroke); }
.mob-asst-status.pending { background: var(--sev-info-fill); color: var(--sev-info-text); border: 1px solid var(--sev-info-stroke); }

/* ── Documents pane (simple upload button — no drop zone) ──── */
.mob-docs-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.mob-docs-top h3 { font: 600 16px/1.3 var(--font-body); color: var(--ink-strong); margin: 0 0 3px; }
.mob-docs-top p  { font: 400 12.5px/1.5 var(--font-body); color: var(--ink-muted); margin: 0; max-width: 32ch; }

.mob-doc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.mob-doc-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 2px 8px rgba(40,70,130,0.04);
  cursor: pointer;
  transition: transform 120ms var(--ease-out), box-shadow 120ms var(--ease-out), border-color 120ms var(--ease-out);
}
.mob-doc-row:hover,
.mob-doc-row:focus-within {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, 0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 4px 14px rgba(40,70,130,0.08);
}
.mob-doc-row:active { transform: translateY(0); }
.mob-doc-icon {
  width: 36px; height: 36px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(220, 231, 251, 0.65));
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 1px 0 rgba(255,255,255,1);
  color: var(--brand-accent);
  flex-shrink: 0;
}
.mob-doc-icon.critical { color: var(--sev-critical-text); background: linear-gradient(135deg, #FFF, var(--sev-critical-fill)); border-color: var(--sev-critical-stroke); }
.mob-doc-icon.medium   { color: var(--sev-medium-text);   background: linear-gradient(135deg, #FFF, var(--sev-medium-fill));   border-color: var(--sev-medium-stroke); }
.mob-doc-icon.high     { color: var(--sev-high-text);     background: linear-gradient(135deg, #FFF, var(--sev-high-fill));     border-color: var(--sev-high-stroke); }
.mob-doc-icon.low      { color: var(--sev-low-text);      background: linear-gradient(135deg, #FFF, var(--sev-low-fill));      border-color: var(--sev-low-stroke); }

.mob-doc-body { min-width: 0; }   /* lets the long filename truncate inside the grid */
.mob-doc-name {
  font: 600 13.5px/1.3 var(--font-body);
  color: var(--ink-strong);
  margin: 0 0 2px;
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mob-doc-project {
  display: inline-block;
  font: 500 11px/1.35 var(--font-body);
  color: var(--brand-accent);
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.16);
  padding: 1px 7px;
  border-radius: 999px;
  margin-bottom: 4px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mob-doc-meta { display: flex; align-items: center; gap: 6px; font: 500 11.5px/1.3 var(--font-body); color: var(--ink-muted); flex-wrap: wrap; }
.mob-doc-meta .dot { color: var(--ink-soft); }
.mob-doc-findings { margin-top: 6px; display: flex; gap: 4px; flex-wrap: wrap; }
.mob-doc-clean { font: 500 11.5px/1 var(--font-body); color: var(--sev-low-text); }
.mob-doc-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.mob-doc-actions .btn-sm {
  font-size: 11.5px;
  padding: 4px 10px;
  height: 26px;
  border-radius: 8px;
}

/* ── Per-project Documents slot grid ─────────────────────────────
   The in-project Documents tab shows the six category slots
   (Contract / PO / Schedule / Programme / Drawings / Other) so the
   user always sees where things go even when nothing's been uploaded
   yet. Soft Glass cards, brand-tinted on hover. */
.mob-proj-docs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mob-proj-doc-slot {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 2px 6px rgba(40,70,130,0.04);
  padding: 12px 14px;
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.mob-proj-doc-slot.has-files { border-color: rgba(37, 99, 235, 0.16); }
.mob-proj-doc-slot.empty     { border-style: dashed; }

.mob-proj-doc-slot-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}
.mob-proj-doc-slot-glyph {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(220, 231, 251, 0.65));
  border: 1px solid rgba(37, 99, 235, 0.12);
  color: var(--brand-accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,1);
}
.mob-proj-doc-slot-glyph.critical { color: var(--sev-critical-text); background: linear-gradient(135deg, #FFF, var(--sev-critical-fill)); border-color: var(--sev-critical-stroke); }
.mob-proj-doc-slot-glyph.high     { color: var(--sev-high-text);     background: linear-gradient(135deg, #FFF, var(--sev-high-fill));     border-color: var(--sev-high-stroke); }
.mob-proj-doc-slot-glyph.medium   { color: var(--sev-medium-text);   background: linear-gradient(135deg, #FFF, var(--sev-medium-fill));   border-color: var(--sev-medium-stroke); }
.mob-proj-doc-slot-glyph.low      { color: var(--sev-low-text);      background: linear-gradient(135deg, #FFF, var(--sev-low-fill));      border-color: var(--sev-low-stroke); }

.mob-proj-doc-slot-titleblock { min-width: 0; }
.mob-proj-doc-slot-name {
  font: 600 13.5px/1.3 var(--font-body);
  color: var(--ink-strong);
  letter-spacing: -0.005em;
}
.mob-proj-doc-slot-count {
  font: 500 11.5px/1.3 var(--font-body);
  color: var(--ink-muted);
  margin-top: 1px;
}
.mob-proj-doc-slot-upload {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(218, 232, 252, 0.65));
  color: var(--brand-accent);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
  transition: transform 120ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.mob-proj-doc-slot-upload:hover {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 4px 12px rgba(37, 99, 235, 0.14);
  transform: translateY(-1px);
}
.mob-proj-doc-slot-upload:active { transform: scale(0.95); }

.mob-proj-doc-slot-files {
  list-style: none;
  padding: 10px 0 0;
  margin: 10px 0 0;
  border-top: 1px solid rgba(37, 99, 235, 0.08);
  display: flex; flex-direction: column; gap: 4px;
}
.mob-proj-doc-slot-file {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
}
.mob-proj-doc-slot-file:hover { background: rgba(37, 99, 235, 0.04); }
.mob-proj-doc-slot-file-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  background: transparent;
  border: none;
  padding: 8px 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  min-width: 0;
  width: 100%;
}
.mob-proj-doc-slot-file-main .file-name {
  font: 500 12.5px/1.3 var(--font-body);
  color: var(--ink-strong);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 100%;
}
.mob-proj-doc-slot-file-main .file-meta {
  font: 500 11px/1.3 var(--font-mono);
  color: var(--ink-muted);
  margin-top: 2px;
}
.mob-proj-doc-slot-file-act {
  font: 600 11px/1 var(--font-body);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 5px 10px;
  margin-right: 8px;
  border-radius: 7px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  background: transparent;
  color: var(--brand-accent);
  cursor: pointer;
}
.mob-proj-doc-slot-file-act:hover { background: rgba(37, 99, 235, 0.06); }
.mob-proj-doc-slot-file-act:active { transform: scale(0.96); }

/* ── Org-wide Documents view — project overview cards ──────────────
   One card per project. The whole left side is a button that lands
   the user on that project's Documents tab. The right side has a
   per-project Upload button. Soft Glass styling that blends with
   the rest of the surface. */
.mob-doc-projects {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mob-doc-proj-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 2px 6px rgba(40,70,130,0.04);
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.mob-doc-proj-card.empty { border-style: dashed; }
.mob-doc-proj-card:hover {
  border-color: rgba(37, 99, 235, 0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 6px 16px rgba(37, 99, 235, 0.08);
}
.mob-doc-proj-main {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 6px 6px 6px 4px;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  min-width: 0;
  -webkit-tap-highlight-color: transparent;
}
.mob-doc-proj-main:active { transform: scale(0.99); }
.mob-doc-proj-glyph {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(220, 231, 251, 0.65));
  border: 1px solid rgba(37, 99, 235, 0.12);
  color: var(--brand-accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,1);
  flex-shrink: 0;
}
.mob-doc-proj-body { min-width: 0; }
.mob-doc-proj-name {
  font: 600 13.5px/1.3 var(--font-body);
  color: var(--ink-strong);
  letter-spacing: -0.005em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mob-doc-proj-meta {
  font: 500 11.5px/1.4 var(--font-body);
  color: var(--ink-muted);
  margin-top: 1px;
}
.mob-doc-proj-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.mob-doc-proj-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font: 500 10.5px/1 var(--font-body);
  letter-spacing: 0.01em;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.06);
  color: var(--brand-accent);
  border: 1px solid rgba(37, 99, 235, 0.10);
}
.mob-doc-proj-chip strong { font-weight: 700; color: var(--brand); }
.mob-doc-proj-chev { color: var(--ink-soft); display: inline-flex; align-items: center; }
.mob-doc-proj-card:hover .mob-doc-proj-chev { color: var(--brand-accent); }

.mob-doc-proj-upload {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(218, 232, 252, 0.65));
  color: var(--brand-accent);
  font: 600 11.5px/1 var(--font-body);
  letter-spacing: -0.005em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
  transition: transform 120ms var(--ease-out), box-shadow 160ms var(--ease-out);
  align-self: center;
}
.mob-doc-proj-upload:hover {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 4px 12px rgba(37, 99, 235, 0.14);
  transform: translateY(-1px);
}
.mob-doc-proj-upload:active { transform: scale(0.96); }
.mob-doc-proj-upload svg { color: var(--brand-accent); }
@media (max-width: 360px) {
  .mob-doc-proj-upload span { display: none; }
  .mob-doc-proj-upload { padding: 0 9px; }
}

/* ── Upload bottom sheet ──────────────────────────────────────────── */
.docs-upload-body { padding: 4px 4px 16px; }
.docs-upload-field-label {
  display: block;
  font: 700 10.5px/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-accent);
  margin-bottom: 6px;
}
.docs-upload-dropzone {
  display: block;
  margin-top: 4px;
  padding: 18px 14px;
  border: 1.5px dashed rgba(37, 99, 235, 0.28);
  background: linear-gradient(135deg, rgba(255,255,255,0.65), rgba(218, 232, 252, 0.5));
  border-radius: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.docs-upload-dropzone:hover {
  background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(218, 232, 252, 0.75));
  border-color: rgba(37, 99, 235, 0.45);
}
.docs-upload-dropzone-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.docs-upload-dropzone-glyph {
  width: 40px; height: 40px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(220, 231, 251, 0.65));
  border: 1px solid rgba(37, 99, 235, 0.18);
  color: var(--brand-accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,1);
  margin-bottom: 2px;
}
.docs-upload-dropzone-text {
  font: 600 13.5px/1.3 var(--font-body);
  color: var(--ink-strong);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.docs-upload-dropzone-sub {
  font: 500 11.5px/1.4 var(--font-body);
  color: var(--ink-muted);
}
.docs-upload-foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 16px;
}
.docs-upload-foot .btn { flex: 1; }

/* ── Hash chain bar (sticky-feel, bottom of body) ────────────── */
.mob-hash-chain {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(8, 145, 178, 0.12);
  border-radius: 12px;
  font: 500 11.5px/1.45 var(--font-body);
  color: var(--ink-muted);
}
.mob-hash-chain svg { color: var(--brand-accent); flex-shrink: 0; }
.mob-hash-chain .hash { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-soft); }

/* ── Per-project inbound forwarding address (with copy button) ──
   Sits between the tab body and the chain-intact footer. Users forward
   emails to this address and they flow through the Postmark webhook +
   classifier. Mono font for the address itself so it reads cleanly. */
.mob-inbound-addr {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(11,36,71,0.04);
}
.mob-inbound-addr > svg { color: var(--brand-accent); flex-shrink: 0; }
.mob-inbound-addr-label {
  font: 700 10.5px/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-accent);
  flex-shrink: 0;
}
.mob-inbound-addr-value {
  flex: 1 1 auto;
  min-width: 0;
  font: 500 11.5px/1.3 var(--font-mono);
  color: var(--ink-strong);
  background: rgba(37, 99, 235, 0.04);
  padding: 5px 8px;
  border-radius: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: all;
}
.mob-inbound-addr-copy {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(218, 232, 252, 0.65));
  color: var(--brand-accent);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.mob-inbound-addr-copy:hover {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 4px 12px rgba(37, 99, 235, 0.14);
  transform: translateY(-1px);
}
.mob-inbound-addr-copy:active { transform: scale(0.95); }

/* ── Empty / placeholder for stubs ───────────────────────────── */
.empty-pane {
  padding: 56px 18px;
  text-align: center;
  border: 1px dashed rgba(37, 99, 235, 0.18);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.4);
}
.empty-pane h3 { font: 600 16px/1.3 var(--font-body); color: var(--ink-strong); margin: 0 0 6px; }
.empty-pane p { font: 400 13px/1.55 var(--font-body); color: var(--ink-muted); margin: 0; max-width: 34ch; margin-left: auto; margin-right: auto; }
.empty-pane-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  margin: 0 auto 14px;
  border-radius: 12px;
  color: var(--brand-accent);
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(220, 231, 251, 0.65));
  border: 1px solid rgba(37, 99, 235, 0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,1);
}
.empty-pane-glyph svg { width: 22px; height: 22px; }

/* ── Stagger entrance ────────────────────────────────────────── */
.stagger-in { animation: stagger 480ms var(--ease-out) both; }
.stagger-in:nth-child(1) { animation-delay: 20ms; }
.stagger-in:nth-child(2) { animation-delay: 70ms; }
.stagger-in:nth-child(3) { animation-delay: 120ms; }
.stagger-in:nth-child(4) { animation-delay: 170ms; }
.stagger-in:nth-child(5) { animation-delay: 220ms; }
.stagger-in:nth-child(6) { animation-delay: 270ms; }
@keyframes stagger {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.view-fade { animation: viewIn 320ms var(--ease-out); }
@keyframes viewIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .stagger-in, .view-fade, .mob-sheet-l, .mob-sheet-b, .scrim { animation: none !important; transition: none !important; opacity: 1; transform: none; }
}

/* ──────────────────────────────────────────────────────────────
   Override conflicting rules from legacy app.css
   (#app rule from line 36 and 1504 set max-width:1200px and
   padding-top: calc(topbar-h + space-5) which fight the new layout).
   Higher-specificity selector to win the cascade.
   ────────────────────────────────────────────────────────────── */
#app.mob-screen {
  max-width: 480px;
  margin: 0 auto;
  padding: 0;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  min-height: 100vh;
  min-height: 100dvh;
}

/* Hide the legacy footer when inside .mob-screen — the design has the
   hash-chain "evidence verified" pattern in its place. */
#app.mob-screen .footer { display: none; }

/* Hide legacy view chrome that the JS render functions replace
   (page-head, back button, search bar). The new mob-* markup replaces
   these inside the same #view-* containers.

   !important because checkBilling()/checkOrgVisibility() write inline
   display:block in legacy code paths — belt-and-braces while we prune. */
#app.mob-screen #view-dashboard > .back,
#app.mob-screen #view-dashboard > .dash-header-compact,
#app.mob-screen #view-dashboard > .tabs,
#app.mob-screen #view-dashboard > .email-sidebar-toggle,
#app.mob-screen #view-dashboard > .email-sidebar,
#app.mob-screen #view-dashboard > .email-sidebar-backdrop,
#app.mob-screen #view-dashboard > .email-capture,
#app.mob-screen #view-projects > .page-head,
#app.mob-screen #view-projects > #new-project-form,
#app.mob-screen #view-projects > #master-dash-btn,
#app.mob-screen #view-projects > #billing-banner {
  display: none !important;
}

/* ── Settings — Team member row + invite-form segmented control ─────────
   Fixes for: orphaned "owner" pill mid-row, and native <select> dropdown
   floating into the wrong screen position when opened. */

/* Push the role-pill and Remove button to the right edge of the row */
.member-row { gap: 12px; }
.member-row .meta { flex: 1; min-width: 0; }
.member-row .meta .name {
  font-weight: 600;
  color: var(--ink);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.member-row .meta .email {
  font-size: 12px;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 1px;
}
.member-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}
.member-row .role-pill {
  font-size: 10.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 9999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.member-row .role-pill-owner  { background: var(--brand-soft); color: var(--brand-hover); }
.member-row .role-pill-admin  { background: var(--brand-accent-soft); color: var(--brand-accent); }
.member-row .role-pill-member { background: rgba(11, 36, 71, 0.06); color: var(--ink-muted); }

/* Invite form — vertical stack on mobile, segmented role picker */
.invite-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(37, 99, 235, 0.10);
  border-radius: 14px;
}
.invite-form .ob-input { margin-bottom: 0; }

.role-segment {
  display: flex;
  background: rgba(11, 36, 71, 0.05);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.role-segment-btn {
  flex: 1;
  min-height: 36px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font: 600 13px/1 var(--font-body);
  color: var(--ink-muted);
  cursor: pointer;
  transition: background var(--motion-fast), color var(--motion-fast), box-shadow var(--motion-fast);
  -webkit-tap-highlight-color: transparent;
}
.role-segment-btn:active { transform: scale(0.97); }
.role-segment-btn.active {
  background: #FFFFFF;
  color: var(--brand);
  box-shadow: 0 1px 2px rgba(15, 79, 224, 0.10), 0 0 0 1px rgba(15, 79, 224, 0.14);
}

/* ── Project · Tools tab — premium grid of 8 tool cards ────────────── */
.mob-tools-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.mob-tool-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 2px 8px rgba(40,70,130,0.04);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
  min-height: 96px;
}
.mob-tool-card:active { transform: scale(0.98); }
.mob-tool-glyph {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--brand-soft) 0%, var(--brand-accent-soft) 100%);
  color: var(--brand-accent);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
  flex-shrink: 0;
}
.mob-tool-card.is-crit .mob-tool-glyph {
  background: linear-gradient(135deg, var(--sev-critical-fill) 0%, var(--sev-high-fill) 100%);
  color: var(--sev-critical-text);
}
.mob-tool-label {
  font: 600 13px/1.25 var(--font-body);
  color: var(--ink-strong);
  letter-spacing: -0.005em;
}
.mob-tool-hint {
  font: 400 11px/1.4 var(--font-body);
  color: var(--ink-muted);
}

/* Notice-period row sitting below the tools grid */
.mob-tool-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(37, 99, 235, 0.10);
  border-radius: 12px;
  font: 500 12.5px/1 var(--font-body);
  color: var(--ink-muted);
  flex-wrap: wrap;
}
.mob-tool-meta label { font-weight: 600; color: var(--ink-strong); }
.mob-tool-meta input {
  width: 64px;
  height: 32px;
  padding: 0 8px;
  background: #FFF;
  border: 1.5px solid rgba(15, 79, 224, 0.18);
  border-radius: 8px;
  font: 600 13px/1 var(--font-mono);
  color: var(--ink);
  outline: none;
  font-variant-numeric: tabular-nums;
}
.mob-tool-meta input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(15, 79, 224, 0.12);
}

/* ── Timeline · user-captured report row ─────────────────────────────
   Reports slot into the same .mob-email-list as inbound emails so the
   timeline is one chronological evidence stream. Visually differentiated
   via the cyan-accent "Site report" chip and a softer dot in the rail. */
.mob-email.is-report::before {
  /* Suppress the severity-marble dot — replace with a cyan-tinted marker */
  background: radial-gradient(circle at 35% 30%,
    rgba(255, 255, 255, 0.95) 0%,
    var(--brand-accent-soft) 38%,
    var(--brand-accent) 92%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.9),
    inset 0 -1px 1px rgba(0,0,0,0.06),
    0 0 0 3px rgba(8, 145, 178, 0.18),
    0 0 12px rgba(8, 145, 178, 0.30),
    0 2px 5px rgba(11, 36, 71, 0.10);
}
.mob-email.is-report .chip.captured {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 9999px;
  background: var(--brand-accent-soft);
  color: var(--brand-accent);
  border: 1px solid rgba(8, 145, 178, 0.30);
  font: 600 11.5px/1.2 var(--font-body);
}
.mob-email.is-report .chip.captured::before { display: none; }
.mob-email.is-report .chip.captured svg {
  color: var(--brand-accent);
  flex-shrink: 0;
}

/* ── Timeline marble pulse ───────────────────────────────────────────
   The glass-marble rail dots on .mob-email rows now breathe — a subtle
   2.4s ease-in-out shadow expansion that fades the halo without
   changing the marble itself. Same look, just alive. */
@keyframes mob-marble-pulse {
  0%, 100% {
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.9),
      inset 0 -1px 1px rgba(0, 0, 0, 0.06),
      0 0 0 3px var(--halo-soft),
      0 0 12px var(--halo-glow),
      0 2px 5px rgba(11, 36, 71, 0.10);
  }
  50% {
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.9),
      inset 0 -1px 1px rgba(0, 0, 0, 0.06),
      0 0 0 6px var(--halo-soft),
      0 0 22px var(--halo-glow),
      0 2px 5px rgba(11, 36, 71, 0.10);
  }
}
.mob-email::before {
  animation: mob-marble-pulse 2.4s ease-in-out infinite;
}
/* Honour reduced-motion users — no pulse, static halo */
@media (prefers-reduced-motion: reduce) {
  .mob-email::before { animation: none; }
}

/* ── Unified report colour everywhere ────────────────────────────────
   Reports are cyan (--brand-accent) in BOTH the Timeline (merged stream)
   AND the Reports tab — same dot, same chip, same vibe. Halo vars live
   on the row so the pulse animation reads them automatically. */
.mob-email.is-report {
  --core: var(--brand-accent);
  --gloss: #5BBFD8;
  --halo-soft: rgba(8, 145, 178, 0.30);
  --halo-glow: rgba(8, 145, 178, 0.36);
}

/* ── Report bottom-sheet photo grid ───────────────────────────────── */
.mob-report-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 6px;
}
.mob-report-photos img {
  width: 100%;
  height: 96px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(37, 99, 235, 0.10);
}

/* ── AI-generated bottom-sheet body wrapper ────────────────────────── */
.ai-gen-body {
  font: 400 13.5px/1.6 var(--font-body);
  color: var(--ink);
}
.ai-gen-body .dispute-readiness { margin-top: 0; }

.dispute-recommendation {
  margin-top: 14px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(207, 250, 254, 0.4), rgba(220, 231, 251, 0.4));
  border: 1px solid rgba(8, 145, 178, 0.15);
  border-radius: 12px;
}
.dispute-recommendation .detail-block-label {
  color: var(--brand-accent);
  margin-bottom: 6px;
}
.dispute-recommendation p {
  font: 400 13px/1.55 var(--font-body);
  color: var(--ink);
  font-style: italic;
  margin: 0;
}

/* ── Sentence-level highlights inside the email bottom sheet ─────────
   The classifier returns sentence_numbers[] per detected signal; we
   render the matching sentences with a subtle severity-coloured fill
   + underline so the AI's reasoning has a direct visual link to the
   words that triggered it. Same colour vocabulary as the chips. */
.mob-email-fullbody .hl {
  border-bottom: 2px solid currentColor;
  background-color: color-mix(in srgb, currentColor 10%, transparent);
  padding: 0 2px;
  border-radius: 2px;
}
/* Fallback for older Safari that doesn't support color-mix */
@supports not (background-color: color-mix(in srgb, red 50%, transparent)) {
  .mob-email-fullbody .hl { background-color: rgba(0, 0, 0, 0.04); }
}
.mob-email-fullbody .hl-critical { color: var(--sev-critical-text); }
.mob-email-fullbody .hl-high     { color: var(--sev-high-text); }
.mob-email-fullbody .hl-medium   { color: var(--sev-medium-text); }
.mob-email-fullbody .hl-low      { color: var(--sev-low-text); }
.mob-email-fullbody .hl-info     { color: var(--sev-info-text); }

/* Highlighted sentences become tappable buttons (role=button) — show
   a pointer cursor + a stronger ring when active (i.e. its info card
   is currently displayed). */
.mob-email-fullbody {
  font: 400 13.5px/1.7 var(--font-body);
  color: var(--ink);
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}
.mob-email-fullbody .hl {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 120ms var(--ease-out), box-shadow 120ms var(--ease-out);
}
.mob-email-fullbody .hl:hover { background-color: color-mix(in srgb, currentColor 18%, transparent); }
.mob-email-fullbody .hl.is-active {
  background-color: color-mix(in srgb, currentColor 22%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 35%, transparent);
}

/* Hint pill that sits beside the "Email body" section label. */
.detail-block-hint {
  font: 500 10.5px/1 var(--font-body);
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ink-muted);
  margin-left: 6px;
}

/* ── Highlight info panel (slides in below the body when a sentence is tapped) ──
   No internal scroll. Two nested scroll containers (panel + sheet body)
   were causing touch-scroll capture issues on iOS — the inner panel
   intercepted swipes intended for the outer sheet. Now the panel grows
   naturally and the sheet body's overflow-y handles all scrolling. The
   panel is just a tall card in the flow. */
/* `display: flex` below would otherwise win over the HTML `hidden`
   attribute's default `display: none`, leaving an empty glass card
   in the middle of every email body. Attribute-selector specificity
   beats class — no !important needed. */
.hl-info-panel[hidden] { display: none; }
.hl-info-panel {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 4px 14px rgba(37, 99, 235, 0.10);
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: hl-info-in 200ms var(--ease-out) both;
}
.hl-info-panel .hl-info-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
@keyframes hl-info-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hl-info-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.hl-info-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 700 11px/1 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-accent);
}
.hl-info-title svg { color: var(--brand-accent); }
.icon-btn-sm { width: 26px; height: 26px; }
.hl-info-row {
  border-top: 1px solid rgba(37, 99, 235, 0.10);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hl-info-row:first-of-type { border-top: none; padding-top: 0; }
.hl-info-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hl-info-tag {
  font: 600 11.5px/1 var(--font-body);
  letter-spacing: 0.02em;
  color: var(--ink-strong);
  text-transform: capitalize;
}
.hl-info-quote {
  font: 400 12.5px/1.5 var(--font-body);
  color: var(--ink-muted);
  margin: 0;
  padding: 6px 10px;
  background: rgba(37, 99, 235, 0.04);
  border-left: 2px solid var(--brand-accent);
  border-radius: 0 6px 6px 0;
}
.hl-info-reasoning {
  font: 400 13px/1.55 var(--font-body);
  color: var(--ink);
  margin: 0;
}

/* ── Slot head is now a <button> — make it look like the card body it was ── */
.mob-proj-doc-slot-head {
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 120ms var(--ease-out);
}
.mob-proj-doc-slot-head:hover { background: rgba(37, 99, 235, 0.04); }
.mob-proj-doc-slot-head:active { transform: scale(0.995); }
.mob-proj-doc-slot.has-files .mob-proj-doc-slot-head:hover { background: transparent; }
.mob-proj-doc-slot-upload {
  cursor: inherit;   /* let the parent button drive */
}

/* ── Premium notification bell + count badge ────────────────────────
   Default: subtle outline bell in ink-strong, neutral hover.
   With unread: bell shifts to brand-accent (cyan) with a soft same-
   colour wash behind it, and a count badge (1, 2, 3 … 9+) sits in the
   top-right where the old red dot was. Badge has its own gentle pulse
   so the eye is drawn without strobing. */
.icon-btn.notif {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  transition:
    background var(--motion-fast) var(--ease-out),
    color var(--motion-fast) var(--ease-out),
    box-shadow var(--motion-base) var(--ease-out);
}
.icon-btn.notif:hover {
  background: rgba(11, 36, 71, 0.05);
}
.icon-btn.notif.has-unread {
  color: var(--brand-accent);
  background: linear-gradient(135deg, var(--brand-accent-soft) 0%, rgba(220, 231, 251, 0.6) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 2px 8px rgba(8, 145, 178, 0.18);
}
.icon-btn.notif.has-unread:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 4px 14px rgba(8, 145, 178, 0.28);
}

/* Count badge — replaces the old plain red dot */
.icon-btn.notif .badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  font: 700 10.5px/1 var(--font-body);
  letter-spacing: 0.02em;
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--sev-critical-text) 0%, #C77A1C 100%);
  border: 2px solid rgba(255, 255, 255, 0.96);
  box-shadow: 0 2px 6px rgba(194, 74, 59, 0.42);
  font-variant-numeric: tabular-nums;
  animation: notif-badge-pulse 2.4s ease-in-out infinite;
}
@keyframes notif-badge-pulse {
  0%, 100% { box-shadow: 0 2px 6px rgba(194, 74, 59, 0.42), 0 0 0 0 rgba(194, 74, 59, 0.45); }
  50%      { box-shadow: 0 2px 6px rgba(194, 74, 59, 0.42), 0 0 0 4px rgba(194, 74, 59, 0.00); }
}
@media (prefers-reduced-motion: reduce) {
  .icon-btn.notif .badge { animation: none; }
}

/* The old .dot rule is retained for compat with any cached
   service-worker version that still has the dot in the HTML. */

/* ── Notifications list inside the bottom sheet ────────────────────── */
.mob-notif-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mob-notif {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 1px 3px rgba(11, 36, 71, 0.03);
  position: relative;
}
.mob-notif.is-unread {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 2px 8px rgba(37, 99, 235, 0.06);
}
.mob-notif.is-unread::before {
  content: '';
  position: absolute;
  top: 12px; left: -3px;
  width: 3px; height: calc(100% - 24px);
  background: var(--brand);
  border-radius: 0 3px 3px 0;
}
.mob-notif-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
  box-shadow: 0 0 6px currentColor;
}
.mob-notif-dot-critical { color: var(--sev-critical-text); background: var(--sev-critical-text); }
.mob-notif-dot-high     { color: var(--sev-high-text);     background: var(--sev-high-text); }
.mob-notif-dot-medium   { color: var(--sev-medium-text);   background: var(--sev-medium-text); }
.mob-notif-dot-info     { color: var(--brand-accent);      background: var(--brand-accent); }
.mob-notif-body { min-width: 0; }
.mob-notif-title { font: 600 13.5px/1.3 var(--font-body); color: var(--ink-strong); letter-spacing: -0.005em; }
.mob-notif-text  { font: 400 12.5px/1.5 var(--font-body); color: var(--ink-muted); margin-top: 2px; }
.mob-notif-meta  { font: 500 11px/1 var(--font-body);     color: var(--ink-soft);  margin-top: 6px; }

/* ── AI-generating loader keyframes ─────────────────────────────────── */
@keyframes ai-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ai-gen-overlay > div:first-child { animation: none !important; }
}

/* ── Shared bottom-sheet tool-result styling ─────────────────────────
   The Tools tab buttons (Dispute / Deadlines / Invoice Defence /
   Protection / Delay / EOT / Templates) all now render through the
   same Soft Glass bottom sheet. These classes give them a coherent
   visual vocabulary instead of each result using its own ad-hoc
   inline styles. */

.tool-prose {
  font: 400 13.5px/1.6 var(--font-body);
  color: var(--ink);
  margin: 0 0 14px 0;
}
.tool-section { margin-top: 16px; }
.tool-section:first-child { margin-top: 0; }
.tool-footnote {
  font: 500 11.5px/1.4 var(--font-body);
  color: var(--ink-muted);
  margin: 10px 0 0;
}
.tool-footnote strong { color: var(--ink); }

/* Numbered / bulleted action list */
.tool-actions {
  list-style: decimal inside;
  margin: 0;
  padding: 0;
  font: 400 13.5px/1.7 var(--font-body);
  color: var(--ink);
}
.tool-actions li { padding: 2px 0; }
.tool-actions li::marker { color: var(--brand-accent); font-weight: 700; }

/* Inline chip rail (e.g. suggested notice templates) */
.tool-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Big number + label stat block — used by EOT (days claimed) and
   Delay Analysis (days by attribution) */
.tool-stat-row {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.tool-stat {
  flex: 1;
  min-width: 130px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(37, 99, 235, 0.10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 1px 3px rgba(11, 36, 71, 0.03);
}
.tool-stat-num {
  display: block;
  font: 700 24px/1 var(--font-body);
  letter-spacing: -0.02em;
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
}
.tool-stat-label {
  display: block;
  font: 600 10.5px/1 var(--font-body);
  color: var(--ink-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 4px;
}
.tool-stat-critical { border-left: 3px solid var(--sev-critical-text); }
.tool-stat-high     { border-left: 3px solid var(--sev-high-text); }
.tool-stat-medium   { border-left: 3px solid var(--sev-medium-text); }
.tool-stat-info     { border-left: 3px solid var(--brand-accent); }

/* List of rows (Deadlines, Invoice Defence sections, Delay events) */
.tool-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tool-list-row {
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(37, 99, 235, 0.10);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 1px 3px rgba(11, 36, 71, 0.03);
}
.tool-list-row-critical { border-left: 3px solid var(--sev-critical-text); }
.tool-list-row-high     { border-left: 3px solid var(--sev-high-text); }
.tool-list-row-medium   { border-left: 3px solid var(--sev-medium-text); }
.tool-list-row-low      { border-left: 3px solid var(--sev-low-text); }
.tool-list-row-info     { border-left: 3px solid var(--brand-accent); }
.tool-list-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.tool-list-meta {
  font: 500 11px/1 var(--font-mono);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}
.tool-list-body {
  font: 500 13px/1.4 var(--font-body);
  color: var(--ink);
}
.tool-list-foot {
  font: 400 12px/1.5 var(--font-body);
  color: var(--ink-muted);
  margin-top: 4px;
}

/* Empty state inside a section */
.tool-empty {
  font: 500 12.5px/1.5 var(--font-body);
  color: var(--ink-soft);
  margin: 0;
  padding: 10px 0;
}

/* Preformatted document text (EOT notice, generated template) — soft
   surface, mono font for legal documents, scrollable wrapper */
.tool-pre {
  margin: 0;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(37, 99, 235, 0.10);
  border-radius: 10px;
  font: 400 12.5px/1.65 var(--font-mono);
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 320px;
  overflow-y: auto;
}

/* Template picker grid */
.tool-template-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.tool-template-card {
  text-align: left;
  padding: 12px 14px;
  border: 1px solid rgba(37, 99, 235, 0.10);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--motion-fast), transform var(--motion-fast);
}
.tool-template-card:hover { background: rgba(255, 255, 255, 0.95); }
.tool-template-card:active { transform: scale(0.98); }
.tool-template-name {
  font: 600 13px/1.3 var(--font-body);
  color: var(--ink-strong);
  letter-spacing: -0.005em;
  margin-bottom: 2px;
}
.tool-template-hint {
  font: 400 11.5px/1.4 var(--font-body);
  color: var(--ink-muted);
}

/* ── Project banner row — back button on the left, settings gear right ─ */
.mob-banner-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 6px;
}
.mob-banner-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mob-banner-settings {
  width: 36px;
  height: 36px;
  color: var(--ink-muted);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(37, 99, 235, 0.10);
}
.mob-banner-settings:hover { color: var(--ink-strong); background: rgba(255, 255, 255, 0.85); }

/* ── Quick add-report pill (banner-row, left of settings cog) ──
   Compact button that opens the voice-report modal — primary path
   for dropping a report straight onto the timeline without leaving
   the project view. Soft brand-tinted background, brand-accent text,
   sits comfortably next to the settings cog. */
.mob-banner-add-report {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 10px 0 8px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(218, 232, 252, 0.65));
  color: var(--brand-accent);
  border-radius: 999px;
  font: 600 12px/1 var(--font-body);
  letter-spacing: -0.005em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(37, 99, 235, 0.08);
  transition: transform 120ms var(--ease-out), box-shadow 160ms var(--ease-out), background 160ms var(--ease-out);
}
.mob-banner-add-report:hover {
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(218, 232, 252, 0.95));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 4px 12px rgba(37, 99, 235, 0.14);
  transform: translateY(-1px);
}
.mob-banner-add-report:active { transform: scale(0.97); }
.mob-banner-add-report svg { color: var(--brand-accent); }
.mob-banner-add-report-label { line-height: 1; }
/* On very narrow viewports the label hides — the icon alone is enough. */
@media (max-width: 360px) {
  .mob-banner-add-report-label { display: none; }
  .mob-banner-add-report { padding: 0 9px; }
}

/* mob-head — let it carry a primary CTA on the right (e.g. + New project) */
.mob-head { align-items: center; }
.mob-head .btn { flex-shrink: 0; }

/* ── Settings + Team views ─────────────────────────────────────────
   Section card with a head + a stack of rows. Used by the new
   Settings (cron prefs, org info, account actions) and Team (members
   list + invite) views. Same Soft Glass surface as Tools / Documents. */

.settings-card {
  margin-bottom: 14px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 2px 8px rgba(40, 70, 130, 0.04);
}
.settings-card-head { margin-bottom: 12px; }
.settings-card-title {
  font: 600 16px/1.3 var(--font-body);
  color: var(--ink-strong);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.settings-card-sub {
  font: 400 12.5px/1.5 var(--font-body);
  color: var(--ink-muted);
  margin: 0;
}

.settings-section { margin-bottom: 16px; }

/* Row inside a settings card — title + meta on the left, control on the right */
.settings-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid rgba(37, 99, 235, 0.08);
  cursor: pointer;
}
.settings-card > .settings-row:first-of-type { border-top: none; padding-top: 4px; }
.settings-row-static { cursor: default; }
.settings-row-stack { flex-direction: column; align-items: stretch; cursor: default; }
.settings-row-text { flex: 1; min-width: 0; }
.settings-row-title {
  font: 600 13.5px/1.3 var(--font-body);
  color: var(--ink-strong);
  letter-spacing: -0.005em;
}
.settings-row-meta {
  font: 400 12px/1.55 var(--font-body);
  color: var(--ink-muted);
  margin-top: 4px;
}
.settings-row-meta strong { color: var(--ink); font-weight: 600; }
.settings-row-meta em { font-style: italic; color: var(--brand-accent); }

/* iOS-style toggle */
.settings-toggle {
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  height: 26px;
  border-radius: 13px;
  background: rgba(11, 36, 71, 0.18);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--motion-fast) var(--ease-out);
  margin-top: 2px;
}
.settings-toggle::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(11, 36, 71, 0.16), 0 2px 5px rgba(11, 36, 71, 0.12);
  transition: transform var(--motion-fast) var(--ease-out);
}
.settings-toggle:checked {
  background: var(--brand);
}
.settings-toggle:checked::before { transform: translateX(18px); }
.settings-toggle:focus-visible { box-shadow: 0 0 0 3px rgba(15, 79, 224, 0.30); }

.settings-readonly {
  font: 400 12.5px/1.5 var(--font-body);
  color: var(--ink-soft);
  font-style: italic;
  margin: 0;
  padding: 12px 0;
}

/* Member list inside the Team view — pulls in the existing .member-row
   rules from app.css; this just gives it a host container. */
.member-list-host { display: block; }

/* ── sg-select — Soft Glass custom dropdown ────────────────────────
   Replaces every native <select.ob-input> in sheet/form contexts.
   The wrapper holds the trigger (styled identical to .ob-input), the
   panel (drops below with the option list), and the original <select>
   (kept hidden so form-data + change events still work natively). */

.sg-select {
  position: relative;
  width: 100%;
  margin-bottom: 10px;
}
.sg-select select { display: none; }    /* belt + braces with inline style="display:none" */

.sg-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 44px;
  padding: 0 14px;
  background: #FFFFFF;
  border: 1.5px solid rgba(15, 79, 224, 0.18);
  border-radius: 10px;
  font: 400 14px/1.2 var(--font-body);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.sg-select-trigger:hover { border-color: rgba(15, 79, 224, 0.32); }
.sg-select-trigger:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(15, 79, 224, 0.12);
}
.sg-select.is-open .sg-select-trigger {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(15, 79, 224, 0.12);
}

.sg-select-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 8px;
}
.sg-select-chevron {
  flex-shrink: 0;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  transition: transform var(--motion-fast) var(--ease-out);
}
.sg-select.is-open .sg-select-chevron { transform: rotate(180deg); }

.sg-select-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 110;
  padding: 6px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 12px 28px rgba(40, 70, 130, 0.16),
    0 2px 6px rgba(11, 36, 71, 0.06);
  max-height: 280px;
  overflow-y: auto;
  animation: sg-select-pop 180ms var(--ease-out);
}
@keyframes sg-select-pop {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .sg-select-panel { animation: none; }
}

.sg-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font: 500 14px/1.3 var(--font-body);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--motion-fast) var(--ease-out);
}
.sg-select-option:hover { background: rgba(15, 79, 224, 0.06); }
.sg-select-option:active { background: rgba(15, 79, 224, 0.10); }
.sg-select-option.is-selected {
  background: var(--brand-soft);
  color: var(--brand-hover);
  font-weight: 600;
}
.sg-select-option-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sg-select-option-tick {
  flex-shrink: 0;
  color: var(--brand);
  font-weight: 700;
}

/* When the trigger sits inside a settings-row-stack or a tool-section
   that has zero bottom margin elsewhere, kill the duplicate gap. */
.tool-section > .sg-select,
.settings-row-stack > .sg-select { margin-bottom: 0; }