/* Sacred Command Center · shell: sidebar and rail, top bar, bottom bar and capture button, page head, command palette,
   popovers, notification drawer, sign-in. Zoho CRM's frame (modules down the left, one slim top bar) in the Brand Kit.
   Layers: only the top bar and the phone bottom bar use the translucent --chrome material; nothing with a backdrop
   filter sits inside or over another. Everything sticky below them is solid. */

/* ── App grid ─────────────────────────────────────────────────────────────────────────── */
#app { min-height: 100dvh; }
.app { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100dvh; }
/* 768 to 1023: the 72 px rail. 1024 and up: the 264 px sidebar (.is-full), unless the person collapsed it or a filter
   panel opened below 1280 px (the shell removes .is-full then). */
@media (min-width: 768px) { .app { grid-template-columns: calc(var(--rail-w) + env(safe-area-inset-left)) minmax(0, 1fr); } }
@media (min-width: 1024px) { .app.is-full { grid-template-columns: calc(var(--side-w) + env(safe-area-inset-left)) minmax(0, 1fr); } }
@media (min-width: 1680px) {
  .app.has-dock { grid-template-columns: calc(var(--rail-w) + env(safe-area-inset-left)) minmax(0, 1fr) 360px; }
  .app.is-full.has-dock { grid-template-columns: calc(var(--side-w) + env(safe-area-inset-left)) minmax(0, 1fr) 360px; }
}
.main-col { min-width: 0; display: flex; flex-direction: column; }
.view {
  flex: 1; width: 100%;
  padding: var(--s-3) max(var(--gutter), env(safe-area-inset-right)) var(--s-7) max(var(--gutter), env(safe-area-inset-left));
  /* No transform, filter or containment on .view: position: fixed overlays rendered inside it would be trapped. */
  transition: opacity var(--t-feedback) var(--ease-out);
}
.view.is-leaving { opacity: 0; transition: none; }
@media (min-width: 768px) { .view { padding-left: var(--gutter); } }
@media (max-width: 767px) {
  .view { padding-top: var(--s-3); padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom) + var(--fab) + var(--s-5)); }
}
.view-skip { position: absolute; left: var(--s-2); top: -100px; z-index: 100; }
.view-skip:focus { top: var(--s-2); }

/* ── Sidebar (>= 1024) and icon rail (768–1023, collapsed, or filter panel open) ───────── */
.side { display: none; }
@media (min-width: 768px) {
  .side {
    position: sticky; top: 0; z-index: 10;
    display: flex; flex-direction: column;
    height: 100dvh;
    padding: 0 calc((var(--rail-w) - var(--tap)) / 2) 0 calc((var(--rail-w) - var(--tap)) / 2 + env(safe-area-inset-left));   /* centres a 44 px item in the 72 px rail, clear of a notch */
    background: var(--bg);
    border-right: 1px solid var(--line);
    overflow: hidden;
  }
}
.side-brand {
  flex: none; display: flex; align-items: center; justify-content: center;
  min-height: calc(var(--head-h) + var(--safe-top)); padding-top: var(--safe-top);
  border-radius: var(--r-button); text-decoration: none;
}
.side-brand .logo-full { display: none; }
.side-brand .logo-eye img { width: 48px; max-width: none; height: 48px; }   /* Eye Small: 48 px file = 32 px art, its minimum */
.side-brand .logo-full img { width: 226px; max-width: none; height: 78px; margin: -11px 0 -11px -6px; }   /* 1D: 226 px file = 193 px art (min 180); the file's own clear space may overlap the padding */
.app.is-full .side-brand { justify-content: flex-start; }
.app.is-full .side-brand .logo-full { display: block; }
.app.is-full .side-brand .logo-eye { display: none; }
.side-scroll {
  flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 0; padding: var(--s-1) 0 var(--s-2);
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.nav-group { display: flex; flex-direction: column; gap: 1px; }
.nav-group + .nav-group, .nav-group--lead + .nav-group { margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--line); }
.nav-group-label { display: none; padding: 7px var(--s-3) 2px; font-size: var(--fs-caption); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.app.is-full .nav-group-label { display: block; }
.app.is-full .nav-group + .nav-group { border-top: 0; margin-top: 0; padding-top: 0; }

.nav-item {
  position: relative;
  display: flex; align-items: center; gap: var(--s-3);
  min-height: var(--tap); width: var(--tap); padding: 0 10px;
  border-radius: var(--r-button);
  color: var(--text-2); text-decoration: none; font-size: var(--fs-cell); font-weight: 600; white-space: nowrap;
  transition: background-color var(--t-feedback) var(--ease-out), color var(--t-feedback) var(--ease-out);
}
.nav-item .i { width: 22px; height: 22px; color: var(--text-3); transition: color var(--t-feedback) var(--ease-out); }
.nav-item .nav-eye { width: 24px; height: 24px; flex: none; margin: 0 -2px; }   /* Eye Micro, 24 px file = 16 px art (its floor); the file's clear space sits in the 20 px icon column */
.nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) { .nav-item:hover { background: var(--hover); color: var(--text); } .nav-item:hover .i { color: var(--text); } }
.nav-item[aria-current="page"] { background: var(--raised); color: var(--text); }
.nav-item[aria-current="page"] .i { color: var(--accent-mark); }
/* Counts are plain tabular numerals: no circle, no color but Linen. In the rail they sit on the icon's corner. */
.nav-count { margin-left: auto; font-size: var(--fs-caption); font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }
.app:not(.is-full) .nav-count { position: absolute; top: 0; right: 0; margin: 0; padding: 0 3px; background: var(--bg); border-radius: var(--r-button); color: var(--text); line-height: 1.3; }
.app:not(.is-full) .nav-item[aria-current="page"] .nav-count { background: var(--raised); }
.app:not(.is-full) .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.app.is-full .nav-item { width: auto; }
@media (pointer: fine) and (min-width: 1024px) {
  .app.is-full .nav-item { min-height: 34px; padding: 0 10px; gap: var(--s-2); }
  .app.is-full .nav-item .i { width: 20px; height: 20px; }
  .app.is-full .nav-item .nav-eye { width: 24px; height: 24px; }
}
.nav-folder { display: flex; flex-direction: column; }
.nav-folder-row { display: flex; align-items: center; }
.nav-folder-row .nav-item { flex: 1; min-width: 0; }
.nav-fold { display: none; flex: none; width: 32px; height: 32px; place-items: center; border-radius: var(--r-button); color: var(--text-3); }
.nav-fold .i { width: 18px; height: 18px; transition: transform var(--t-feedback) var(--ease-out); }
.nav-fold[aria-expanded="true"] .i { transform: rotate(90deg); }
@media (hover: hover) { .nav-fold:hover { background: var(--hover); color: var(--text); } }
.app.is-full .nav-fold { display: grid; }
.nav-children { display: none; flex-direction: column; gap: 1px; margin: 1px 0 var(--s-1) 18px; padding-left: var(--s-2); border-left: 1px solid var(--line); }
.app.is-full .nav-folder.is-open .nav-children { display: flex; }
.nav-child { display: flex; align-items: center; min-height: 32px; padding: 0 10px; border-radius: var(--r-button); color: var(--text-2); text-decoration: none; font-size: var(--fs-cell); font-weight: 600; }
@media (pointer: coarse) { .nav-child { min-height: var(--tap); } }
@media (hover: hover) { .nav-child:hover { background: var(--hover); color: var(--text); } }
.nav-child[aria-current="page"] { background: var(--raised); color: var(--text); }
.side-foot { flex: none; display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-2) 0 max(var(--s-3), env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.side-toggle { display: none; }
@media (min-width: 1024px) { .side-toggle { display: flex; } }
.side-toggle .i { transition: transform var(--t-move) var(--spring); }
.app:not(.is-full) .side-toggle .i { transform: rotate(180deg); }
.side-toggle .nav-label { text-align: left; }

/* ── Top bar ──────────────────────────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: var(--crit-h); z-index: 20;   /* under the critical banner while one shows */
  display: flex; align-items: center; gap: var(--s-3);
  min-height: calc(var(--head-h) + var(--safe-top)); padding: var(--safe-top) max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
  background: var(--chrome);
  -webkit-backdrop-filter: var(--chrome-filter); backdrop-filter: var(--chrome-filter);
  border-bottom: 1px solid var(--line);
}
.topbar-eye { flex: none; margin-left: -8px; }
.topbar-eye img { width: 48px; height: 48px; max-width: none; }   /* Eye Small at its 32 px art minimum */
@media (min-width: 768px) { .topbar-eye { display: none; } }
.search-btn {
  flex: 1 1 auto; max-width: 560px; min-width: 0;
  display: flex; align-items: center; gap: var(--s-2);
  height: 40px; padding: 0 var(--s-3);
  background: var(--surface-2); color: var(--text-3);
  border: 1px solid var(--line-field); border-radius: var(--r-button);
  font-size: var(--fs-cell); font-weight: 500; text-align: left;
}
.search-btn > .i { width: 20px; height: 20px; flex: none; }
.search-btn > span:not(.kbd) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) { .search-btn:hover { border-color: var(--text-3); } }
.kbd { flex: none; padding: 1px 6px; border: 1px solid var(--line-strong); border-radius: var(--r-button); font-size: var(--fs-caption); font-weight: 600; color: var(--text-3); line-height: 1.4; }
@media (hover: none) { .search-btn .kbd { display: none; } }
.topbar-tools { display: flex; align-items: center; gap: 2px; margin-left: auto; flex: none; }
.create-btn { margin-right: var(--s-1); }
.tools-bell { position: relative; }
.bell-n { position: absolute; top: 3px; right: 2px; min-width: 16px; padding: 0 3px; font-size: var(--fs-caption); font-weight: 700; line-height: 1.2; color: var(--accent-text); background: var(--bg); border-radius: var(--r-button); text-align: center; font-variant-numeric: tabular-nums; }
@media (min-width: 768px) { .topbar-title { display: none; } }
.topbar-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: var(--fs-body); }
@media (max-width: 767px) {
  .topbar { gap: var(--s-2); }
  .topbar-title + .search-btn { margin-left: 0; }
  .search-btn { flex: none; width: var(--tap); padding: 0; justify-content: center; background: transparent; border-color: transparent; margin-left: auto; }
  .search-btn > span { display: none; }
  .topbar-tools { margin-left: 0; margin-right: -8px; }
  .tools-cal, .tools-gear { display: none; }
}
@media (max-width: 1023px) { .create-btn .label { display: none; } .create-btn { width: var(--tap); padding: 0; } .create-btn .i { margin: 0; } }

/* ── Phone: bottom bar and capture button (< 768) ─────────────────────────────────────── */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(5, minmax(min-content, 1fr));   /* a label never truncates */
  padding: 0 max(var(--s-1), env(safe-area-inset-right)) env(safe-area-inset-bottom) max(var(--s-1), env(safe-area-inset-left));
  background: var(--chrome);
  -webkit-backdrop-filter: var(--chrome-filter); backdrop-filter: var(--chrome-filter);
  border-top: 1px solid var(--line);
}
@media (min-width: 768px) { .tabbar { display: none; } }
.tab-item {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 0; min-height: var(--bar-h); padding: 0 2px;
  color: var(--text-3); text-decoration: none; background: none;
  font-size: var(--fs-caption); font-weight: 600; line-height: 1.2; letter-spacing: 0;
  border-radius: var(--r-button);
}
.tab-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab-item[aria-current="page"] { color: var(--text); }
.tab-item[aria-current="page"] .i { color: var(--accent-mark); }
.tab-item .tab-n { position: absolute; top: 6px; left: calc(50% + 12px); font-size: var(--fs-caption); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.fab {
  position: fixed; z-index: 21;
  right: max(var(--s-3), env(safe-area-inset-right));
  bottom: calc(var(--bar-h) + env(safe-area-inset-bottom) + var(--s-3));
  display: grid; place-items: center;
  width: var(--fab); height: var(--fab);
  border-radius: var(--r-panel);
  background: var(--accent); color: var(--on-accent);
}
.fab:active { background: var(--accent-press); }
@media (min-width: 768px) { .fab { display: none; } }
.more-list { display: flex; flex-direction: column; }
.more-group { padding: var(--s-3) var(--s-4) var(--s-1); font-size: var(--fs-caption); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.more-row { display: flex; align-items: center; gap: var(--s-3); min-height: var(--tap); padding: 0 var(--s-4); color: var(--text); text-decoration: none; font-weight: 600; text-align: left; width: 100%; }
.more-row .i { color: var(--text-3); }
.more-row .nav-eye { width: 24px; height: 24px; }
.more-row[aria-current="page"] .i { color: var(--accent-mark); }
.more-row .nav-count { margin-left: auto; position: static; }
.more-row--child { padding-left: calc(var(--s-4) + 32px); font-weight: 500; }
@media (hover: hover) { .more-row:hover { background: var(--hover); } }

/* ── Page head: eyebrow, title, deck, as-of, Refresh, sync chip ─────────────────────── */
/* One head for every page: the title is 18 px (Leads, Deals and Contacts already had it), the deck sits beside it on one line, and a
   module's tabs sit in the same row from 1024 px up (.page-head--tabs), so a tabbed page spends one row on its head, not two. */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-3); }
.page-head-main { min-width: 0; flex: 1 1 24rem; display: flex; flex-direction: column; gap: var(--s-1); }
.page-title {
  min-width: 0;
  font-size: var(--fs-h3); font-weight: 800; line-height: 1.2; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--text); overflow-wrap: break-word;
}
.page-title-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s-4); min-width: 0; }
.page-head .eyebrow + .page-title-row { margin-top: var(--s-1); }
@media (max-width: 767px) { .page-title { font-size: var(--fs-head-title); letter-spacing: -0.012em; } }
.deck { color: var(--text-2); font-weight: 500; max-width: var(--measure); min-width: 0; }
.deck b { color: var(--text); font-weight: 700; }   /* a state line: the number leads */
.page-head--tabs { margin-bottom: var(--s-4); border-bottom: 1px solid var(--line); }
.page-head--tabs .module-tabs { margin: 0; flex: 1 0 100%; order: 3; min-width: 0; }
.page-head--tabs .module-tabs .tabs { border-bottom: 0; }
@media (min-width: 1024px) {
  .page-head--tabs .page-title-row { flex-wrap: nowrap; align-items: baseline; }
  .page-head--tabs .page-title { flex: none; white-space: nowrap; }
  .page-head--tabs .deck { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-cell); }   /* one line: the head never changes height between sub-tabs */
  .page-head--tabs .page-head-main { flex: 1 1 0; }
  .page-head--tabs:not(.is-stacked) { flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: var(--s-2) var(--s-5); margin-bottom: var(--s-3); }
  .page-head--tabs:not(.is-stacked) .page-head-main { flex: 0 1 auto; max-width: 42%; }
  .page-head--tabs:not(.is-stacked) .module-tabs { flex: 0 0 auto; order: 0; align-self: stretch; display: flex; align-items: flex-end; }   /* the tabs keep their width; the deck gives way */
  .page-head--tabs:not(.is-stacked) .module-tabs .tabs { flex: none; overflow: visible; }
  .page-head--tabs:not(.is-stacked) .module-tabs .tab::after { bottom: 0; }
  .page-head--tabs:not(.is-stacked) .page-meta { flex: none; flex-wrap: nowrap; margin-left: auto; align-self: center; }
  .page-head--tabs.is-stacked { align-items: center; }
  .page-head--tabs.is-stacked .page-meta { flex: none; flex-wrap: nowrap; }
  .page-head--tabs.is-stacked .module-tabs .tab::after { bottom: 0; }
}
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.page-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); color: var(--text-3); font-size: var(--fs-caption); }
.page-meta .asof { font-variant-numeric: tabular-nums; }
.sync-chip { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 32px; padding: 0 var(--s-2); border: 1px solid var(--line-strong); border-radius: var(--r-button); font-size: var(--fs-caption); font-weight: 700; color: var(--text); position: relative; }
.sync-chip::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--text-3); }
.sync-chip::after { content: ""; position: absolute; inset: -6px -2px; }
@media (hover: hover) { button.sync-chip:hover { background: var(--hover); } }
.section-title { font-size: var(--fs-h2); font-weight: 800; line-height: 1.18; letter-spacing: -0.008em; text-transform: uppercase; color: var(--text); }

/* ── Command palette ─────────────────────────────────────────────────────────────────── */
.pal-scrim { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-start; justify-content: center; padding: max(var(--s-3), 10dvh) var(--s-3) var(--s-3); background: var(--scrim); }
.pal { width: min(640px, 100%); max-height: min(560px, 80dvh); display: flex; flex-direction: column; background: var(--surface); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--r-panel); box-shadow: var(--shadow); overflow: hidden; }
.pal-input-wrap { position: relative; border-bottom: 1px solid var(--line); flex: none; }
.pal-input-wrap > .i { position: absolute; left: var(--s-3); top: 50%; translate: 0 -50%; color: var(--text-3); }
.pal-input { width: 100%; min-height: 56px; padding: 0 var(--s-3) 0 52px; background: transparent; border: 0; color: var(--text); font-size: 1rem; font-weight: 600; }
.pal-input::placeholder { color: var(--text-3); font-weight: 500; opacity: 1; }
.pal-input:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.pal-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--s-1); }
.pal-group { padding: var(--s-2) var(--s-3) var(--s-1); font-size: var(--fs-caption); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.pal-row { display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 48px; padding: var(--s-1) var(--s-3); border-radius: var(--r-button); text-align: left; color: var(--text); }
.pal-row[aria-selected="true"] { background: var(--raised); box-shadow: inset 0 0 0 1px var(--line-strong); }
.pal-kind { flex: none; width: 6.5rem; font-size: var(--fs-caption); font-weight: 600; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pal-t { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-s { font-size: var(--fs-caption); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-empty { padding: var(--s-5) var(--s-3); text-align: center; color: var(--text-3); }
.pal-foot { flex: none; display: flex; gap: var(--s-4); padding: var(--s-2) var(--s-3); border-top: 1px solid var(--line); font-size: var(--fs-caption); color: var(--text-3); }
@media (max-width: 767px) { .pal-kind { width: 4.5rem; } .pal-foot { display: none; } }

/* ── Popovers (calendar, create) and the notification drawer ──────────────────────────── */
.pop {
  position: fixed; z-index: 60; top: 0; left: 0;
  width: 360px; max-width: calc(100vw - var(--s-5)); max-height: calc(100dvh - var(--s-5)); overflow-y: auto; overscroll-behavior: contain;
  background: var(--raised); border: 1px solid var(--line-strong); border-radius: var(--r-card); box-shadow: var(--shadow);
  opacity: 0; transform: scale(0.96); visibility: hidden; pointer-events: none;
  transition: opacity var(--t-feedback) var(--ease-out), transform var(--t-feedback) var(--ease-out), visibility 0s linear var(--t-feedback);
}
.pop.is-open { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition: opacity var(--t-feedback) var(--ease-out), transform var(--t-feedback) var(--ease-out), visibility 0s; }
.pop-h { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-3) var(--s-3) var(--s-2); }
.pop-t { font-weight: 700; }
.pop-day { padding: var(--s-2) var(--s-3) var(--s-1); font-size: var(--fs-caption); font-weight: 600; letter-spacing: var(--caption-ls); color: var(--text-3); }
.pop-item { display: flex; align-items: baseline; gap: var(--s-3); padding: var(--s-1) var(--s-3); }
.pop-item time { flex: none; width: 4.5rem; font-size: var(--fs-caption); font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pop-item span { min-width: 0; overflow-wrap: anywhere; }
.pop-foot { display: flex; padding: var(--s-2) var(--s-3) var(--s-3); border-top: 1px solid var(--line); margin-top: var(--s-2); }
@media (prefers-reduced-motion: reduce) { .pop, .pop.is-open { transform: none; } }

.note-item { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3); border-top: 1px solid var(--line); }
.note-item:first-child { border-top: 0; }
.note-item.is-target { background: var(--hover); }   /* the alert a pushed notification pointed at */
.note-item .row-end { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-1); padding-right: var(--s-1); }
.note-item .row-main { flex: 1 1 8rem; }
.note-grp { padding: var(--s-3) var(--s-3) var(--s-1); font-size: var(--fs-caption); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.dock { display: none; }
@media (min-width: 1680px) {
  .dock {
    display: flex; flex-direction: column; position: sticky; top: 0; height: 100dvh; min-width: 0;
    background: var(--surface); border-left: 1px solid var(--line); overflow: hidden;
  }
  .dock .dock-b { flex: 1; min-height: 0; overflow-y: auto; }
}
.dock-h { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3); border-bottom: 1px solid var(--line); min-height: calc(var(--head-h) + var(--safe-top)); }
.dock-h .sheet-t { flex: 1; font-size: var(--fs-h3); }

/* ── Sign-in (gate.js owns the logic; ids and the hidden toggles are unchanged) ──────── */
#loginGate { min-height: 100dvh; background: var(--bg); padding: calc(env(safe-area-inset-top) + var(--s-8)) var(--gutter) calc(env(safe-area-inset-bottom) + var(--s-5)); }
.lg { max-width: 24rem; margin: 0 auto; display: grid; gap: var(--s-4); justify-items: stretch; }
.lg-brand { display: grid; justify-items: start; gap: var(--s-3); }
.lg-brand .lg-logo { display: block; width: 226px; max-width: none; height: 78px; margin: -11px 0 0 -6px; }   /* 1D at its 193 px art size (min 180) */
.lg-form { display: grid; gap: var(--s-4); width: 100%; }
.lg-form[hidden], .lg-step[hidden] { display: none; }
.lg-group { display: grid; gap: var(--s-3); }
.lg-err { color: var(--danger-text); font-size: var(--fs-caption); font-weight: 600; min-height: 1.45em; }
.lg-err:empty { min-height: 0; }
.lg-note { color: var(--text-2); font-size: var(--fs-caption); }
.lg-note:empty { display: none; }
.lg-foot { margin-top: var(--s-4); color: var(--text-3); font-size: var(--fs-caption); letter-spacing: var(--caption-ls); }   /* the build stamp, as CC v3's sign-in footer carried it */
.lg-step { display: grid; gap: var(--s-3); justify-items: start; }
.lg-step > .i { width: 40px; height: 40px; color: var(--text-3); }
.lg-step h2 { font-size: var(--fs-h2); font-weight: 700; }
.lg-step p { color: var(--text-2); }
.lg-step .lg-sent { font-weight: 600; color: var(--text); }
.lg-step .lg-sent:empty { display: none; }
.lg-step .btn { width: 100%; }
.lg-step .input[hidden] { display: none; }

/* Fatal / boot pages inside the new frame */
.boot-card { max-width: 32rem; padding: var(--s-6) var(--gutter); margin: 0 auto; display: flex; flex-direction: column; gap: var(--s-3); }

/* ── Present mode: the page alone ─────────────────────────────────────────────────────── */
html.is-present { --head-h: 0px; --safe-top: 0px; }
html.is-present .side, html.is-present .topbar, html.is-present .tabbar, html.is-present .fab, html.is-present .dock, html.is-present .view-skip { display: none; }
html.is-present .app, html.is-present .app.is-full, html.is-present .app.has-dock { grid-template-columns: minmax(0, 1fr); }
.present-exit { position: fixed; top: var(--s-3); right: var(--s-3); z-index: 55; }
/* With the critical strip showing, Exit present mode sits in the strip, so it never covers the page's own controls */
html.has-crit .present-exit { top: 2px; right: var(--s-2); min-height: 24px; height: 24px; padding: 0 var(--s-2); background: transparent; color: var(--linen); border-color: var(--linen); }

/* One filled button per view: a record page's own primary (Outcome) takes the place of the phone's capture button. */
.app:has(#main .rp-acts .btn--primary) .fab { display: none; }

/* ── Critical banner and its bell (P6 C-13) ───────────────────────────────────────────────
   A flat Crimson bar above the top bar, on every page, until acknowledged. Linen on Crimson is 4.90 to 1 in both themes (AA for normal
   text), so the text is Linen and Crimson is never a text colour here. The two buttons are Linen: Open is a Linen fill with Void text,
   Acknowledge a Linen outline. No gradient, no glow, no side stripe, no pulse. CriticalBanner sets --crit-h to the bar's height. */
.crit { position: sticky; top: 0; z-index: 30; background: var(--accent); color: var(--linen); padding-top: var(--safe-top); animation: crit-in var(--t-feedback) var(--ease-out); }
@keyframes crit-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .crit { animation: none; } }
.has-crit .topbar { padding-top: 0; min-height: var(--head-h); }
.crit-in { display: flex; align-items: center; gap: var(--s-3); min-height: 48px; padding: var(--s-1) max(var(--gutter), env(safe-area-inset-right)) var(--s-1) max(var(--gutter), env(safe-area-inset-left)); }
.crit-label { flex: none; display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--eyebrow-size); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.crit-label .i { color: var(--linen); }
/* up to two lines (the bar stays 48 px tall): the headline, then as much of the detail as fits; the whole text is on hover and in Open */
.crit-t { flex: 1 1 auto; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: var(--fs-cell); font-weight: 500; line-height: 1.3; }
.crit-h { font-weight: 700; }
.crit-more { flex: none; color: var(--linen); font-size: var(--fs-caption); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; padding: 0 var(--s-1); }
.crit-acts { flex: none; display: flex; align-items: center; gap: var(--s-2); }
.crit-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 0 var(--s-3); font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.04em; border-radius: var(--r-button); white-space: nowrap; }
.crit-btn--solid { background: var(--linen); color: var(--void); border: 1px solid var(--linen); }
.crit-btn--line { background: transparent; color: var(--linen); border: 1px solid var(--linen); }
@media (hover: hover) { .crit-btn--solid:hover { background: var(--linen-mute); border-color: var(--linen-mute); } .crit-btn--line:hover { background: var(--hover); } .crit-more:hover { text-decoration-thickness: 2px; } }
.crit :focus-visible { outline: 2px solid var(--linen); outline-offset: 2px; }
@media (pointer: fine) { .crit-btn { min-height: 32px; } }
@media (max-width: 767px) {
  /* a phone: the label and the headline on top (two lines at most), then the two buttons at 44 px */
  .crit-in { flex-wrap: wrap; row-gap: var(--s-2); padding-top: var(--s-2); padding-bottom: var(--s-2); }
  .crit-t { flex: 1 1 0; }
  .crit-d { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* still read aloud; the detail is one tap away in Open */
  .crit-acts { flex: 1 0 100%; flex-wrap: wrap; }
  .crit-acts .crit-btn { flex: 1 1 calc(50% - var(--s-1)); min-width: 0; min-height: var(--tap); white-space: normal; text-align: center; }
  /* "and 3 more" and Acknowledge all share the second row, so the headline keeps the width beside the label and three buttons never push the page wider than the phone */
  .crit-acts .crit-more { order: 3; flex: 1 1 calc(50% - var(--s-1)); display: inline-flex; align-items: center; min-height: var(--tap); text-align: left; }
  .crit-acts .crit-btn--all { order: 4; flex-basis: calc(50% - var(--s-1)); }
}
.crit--strip { display: flex; align-items: center; gap: var(--s-3); min-height: 28px; padding: 0 var(--gutter); font-size: var(--fs-caption); font-weight: 600; }
.crit--strip .crit-t { display: block; white-space: nowrap; text-overflow: ellipsis; font-size: var(--fs-caption); }
@media (max-width: 767px) { .crit--strip { padding-right: 13.5rem; } .crit--strip .crit-label { display: none; } }   /* the Exit button sits at the right of the strip: the text keeps clear of it */
html.is-present .crit { top: 0; }
.bell-n--crit { background: var(--accent); color: var(--on-accent); }

/* A critical row in the drawer: the words take the width and the buttons sit under them (three buttons beside the text left it one letter wide). */
.note-item--crit { flex-wrap: wrap; }
.note-item--crit .row-main { flex: 1 1 12rem; min-width: 0; }
.note-item--crit .row-end { flex: 1 0 100%; justify-content: flex-start; padding-right: 0; }
.note-item--crit .row-s { flex-wrap: wrap; }