/* ECR Connect — the Admin tab (2026-10-06, Thomas's approved mockup
   https://claude.ai/artifact/HPMUpTsVqnqHTD44LPu67o). ECR's site only; Sam's site never loads
   this. Sections down the left, the open section on the right. Every colour is
   var(--dk-<role>, <light colour>), as in the staff app's other screens, so it follows the
   person's Appearance (test/dark-mode.test.js). */

#admApp[hidden] { display: none; }
#admApp { max-width: 1180px; margin: 0 auto; padding: 22px 22px 40px; display: grid; grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px; align-items: start; font-size: 14px; }

.adm-nav { background: var(--dk-surface, #fff); border: 1px solid var(--dk-line, var(--border)); border-radius: 12px; padding: 12px 8px;
  display: flex; flex-direction: column; gap: 2px; position: sticky; top: 10px; }
.adm-nav-title { font: 700 12px Raleway, Helvetica, Arial, sans-serif; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--dk-ink-2, var(--gray)); padding: 2px 10px 8px; }
.adm-nav-group { font-size: 11.5px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--dk-ink-2, var(--gray)); padding: 10px 10px 4px; }
.adm-nav button { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 10px; border: 0; border-radius: 8px; background: none;
  color: var(--dk-ink, #1a1a1a); font: 14px Helvetica, Arial, sans-serif; text-align: left; cursor: pointer; }
.adm-nav button span:first-child { flex-grow: 1; }
.adm-nav button:hover { background: var(--dk-page, var(--bg)); }
.adm-nav button[aria-current="true"] { background: var(--dk-accent-soft, var(--purple-light)); color: var(--dk-accent-text-2, var(--purple-dark)); font-weight: 700; }
.adm-nav button:focus-visible { outline: 3px solid var(--dk-accent-line, var(--purple)); outline-offset: -3px; }
.adm-soon { font-size: 11px; font-weight: 700; color: var(--dk-ink-2, var(--gray)); border: 1px solid var(--dk-line, var(--border)); border-radius: 999px; padding: 1px 7px; }

.adm-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.adm-card { background: var(--dk-surface, #fff); border: 1px solid var(--dk-line, var(--border)); border-radius: 12px; padding: 20px 22px;
  display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.adm-card h2 { margin: 0; font: 800 22px Raleway, Helvetica, Arial, sans-serif; color: var(--dk-ink, #1a1a1a); }
.adm-sub { margin: 0; color: var(--dk-ink-2, var(--gray)); max-width: 70ch; }
.adm-next { margin: 0; font-weight: 700; color: var(--dk-accent-text, var(--purple)); }
.adm-msg { margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--dk-good-soft, #e3f3e8); color: var(--dk-good-text, #155d2c); font-weight: 700; }
.adm-msg.adm-bad { background: var(--dk-bad-soft, #fdf0ee); color: var(--dk-bad-text, #9a2617); }

.adm-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--dk-line, var(--border)); }
.adm-row .adm-lbl { flex: 1 1 220px; min-width: 0; }
.adm-row .adm-lbl b { display: block; color: var(--dk-ink, #1a1a1a); }
.adm-row .adm-lbl span { color: var(--dk-ink-2, var(--gray)); font-size: 13px; }
.adm-inline { display: flex; gap: 8px; flex-wrap: wrap; }

.adm-seg { display: inline-flex; border: 1.5px solid var(--dk-line, var(--border)); border-radius: 10px; overflow: hidden; }
.adm-seg button { min-height: 38px; padding: 0 14px; border: 0; background: var(--dk-surface, #fff); color: var(--dk-ink, #1a1a1a);
  font: 700 13.5px Helvetica, Arial, sans-serif; cursor: pointer; }
.adm-seg button + button { border-left: 1.5px solid var(--dk-line, var(--border)); }
/* ECR's dark purple with white text, the same in both appearances. */
.adm-seg button[aria-pressed="true"] { background: var(--purple); color: #fff; }

.adm-btn { min-height: 38px; padding: 0 14px; border-radius: 8px; border: 1.5px solid var(--dk-line, var(--border)); background: var(--dk-surface, #fff);
  color: var(--dk-accent-text-2, var(--purple-dark)); font: 700 13.5px Helvetica, Arial, sans-serif; cursor: pointer; }
.adm-btn:hover { border-color: var(--dk-accent-line, var(--purple)); }
.adm-btn.adm-primary { border-color: var(--dk-accent-line, var(--purple)); color: var(--dk-accent-text, var(--purple)); }
/* Filled only under the pointer, as every ECR Connect button (2026-10-08). */
.adm-btn.adm-primary:not(:disabled):hover { background: var(--purple); color: #fff; }
.adm-btn.adm-quiet { border-color: transparent; background: none; }
.adm-btn:focus-visible, .adm-seg button:focus-visible, .adm-input:focus-visible { outline: 3px solid var(--dk-accent-line, var(--purple)); outline-offset: 2px; }
.adm-input { height: 40px; border: 1.5px solid var(--dk-line, var(--border)); border-radius: 8px; padding: 0 10px; font: 14px Helvetica, Arial, sans-serif;
  background: var(--dk-surface, #fff); color: var(--dk-ink, #1a1a1a); box-sizing: border-box; min-width: 0; }

.adm-add { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 8px; }
.adm-tablewrap { overflow-x: auto; }
.adm-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.adm-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--dk-ink-2, var(--gray));
  padding: 8px 10px; border-bottom: 1px solid var(--dk-line, var(--border)); }
.adm-table td { padding: 10px; border-bottom: 1px solid var(--dk-line, var(--border)); vertical-align: middle; color: var(--dk-ink, #1a1a1a); overflow-wrap: anywhere; }
.adm-table td.adm-acts { white-space: nowrap; text-align: right; }
.adm-table td .adm-input { width: 100%; }
.adm-pill { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--dk-good-soft, #e3f3e8); color: var(--dk-good-text, #155d2c); }
.adm-pill.adm-off { background: var(--dk-page, var(--bg)); color: var(--dk-ink-2, var(--gray)); }

.adm-lock { background: var(--dk-tint-accent, #f6f4fb); border: 1.5px solid var(--dk-accent-line, var(--purple)); border-radius: 10px; padding: 12px 14px; color: var(--dk-ink, #1a1a1a); }
.adm-lock b { display: block; color: var(--dk-accent-text-2, var(--purple-dark)); margin-bottom: 2px; }

.adm-log { margin: 0; padding: 0; list-style: none; }
.adm-log li { padding: 10px 0; border-top: 1px solid var(--dk-line, var(--border)); display: grid; grid-template-columns: 130px minmax(0, 1fr) auto;
  gap: 10px; align-items: baseline; color: var(--dk-ink, #1a1a1a); }
.adm-log li:first-child { border-top: 0; }
.adm-when { color: var(--dk-ink-2, var(--gray)); font-size: 12.5px; font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  #admApp { grid-template-columns: minmax(0, 1fr); }
  .adm-nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .adm-nav-title, .adm-nav-group { display: none; }
  .adm-add { grid-template-columns: minmax(0, 1fr); }
}

/* Text and email wording (2026-10-06): the parts on the left, how it reads on the right. */
.adm-word { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 18px; align-items: start; }
.adm-word-parts { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.adm-word-part { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--dk-line, var(--border)); border-radius: 10px;
  background: var(--dk-tint, #fafbfb); }
.adm-word-head { display: flex; align-items: center; gap: 10px; color: var(--dk-ink, #1a1a1a); }
.adm-word-head b { flex-grow: 1; }
.adm-word-help { font-size: 13px; }
textarea.adm-word-input { height: auto; padding: 10px; line-height: 1.45; resize: vertical; width: 100%; font: 14px/1.45 Helvetica, Arial, sans-serif; }
input.adm-word-input { width: 100%; }
.adm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-chips button { min-height: 28px; padding: 0 10px; border-radius: 14px; border: 1.5px dashed var(--dk-accent-line, var(--purple));
  background: var(--dk-tint-accent, #f6f4fb); color: var(--dk-accent-text-2, var(--purple-dark)); font: 700 12px Helvetica, Arial, sans-serif; cursor: pointer; }
.adm-chips button:focus-visible { outline: 3px solid var(--dk-accent-line, var(--purple)); outline-offset: 2px; }
.adm-word-note { margin: 0; font-size: 13px; color: var(--dk-ink-2, var(--gray)); min-height: 1em; }
.adm-word-note.adm-bad { color: var(--dk-bad-text, #9a2617); font-weight: 700; }
.adm-word-note.adm-warn { color: var(--dk-warn-text, #7a4f00); }
.adm-word-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.adm-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.adm-word-preview { position: sticky; top: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.adm-word-cap { font-size: 12.5px; color: var(--dk-ink-2, var(--gray)); }
.adm-word-subject { font-size: 13.5px; font-weight: 700; color: var(--dk-ink, #1a1a1a); overflow-wrap: anywhere; }
.adm-word-preview iframe { width: 100%; height: 620px; border: 1px solid var(--dk-line, var(--border)); border-radius: 10px; }
/* A sent text: ECR's dark purple with white text in both appearances (Thomas, 2026-10-06). */
.adm-bubble { align-self: flex-end; max-width: 100%; background: var(--purple); color: #fff; padding: 10px 13px; border-radius: 14px;
  border-bottom-right-radius: 4px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.4; }
@media (max-width: 1100px) { .adm-word { grid-template-columns: minmax(0, 1fr); } .adm-word-preview { position: static; } }

/* Chauffeurs (2026-10-06, Thomas's approved mockup): the list, and one chauffeur open in a panel
   that flies out from the right, as a lead and a ride do. */
.adm-cardhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.adm-cardhead h2 { flex-grow: 1; }
.adm-table.adm-chauffeurs { min-width: 860px; font-size: 13.5px; }
.adm-table.adm-chauffeurs td { vertical-align: top; }
.adm-click { cursor: pointer; }
.adm-click:hover td { background: var(--dk-tint, #fafbfb); }
.adm-click[aria-selected="true"] td { background: var(--dk-accent-soft, var(--purple-light)); }
.adm-click:focus-visible { outline: 3px solid var(--dk-accent-line, var(--purple)); outline-offset: -3px; }
.adm-small { display: block; color: var(--dk-ink-2, var(--gray)); font-size: 12.5px; }
.adm-small:empty { display: none; }
.adm-codes { display: flex; flex-wrap: wrap; gap: 4px; }
.adm-code { font-size: 11.5px; font-weight: 700; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--dk-line, var(--border)); color: var(--dk-ink, #1a1a1a); white-space: nowrap; }
.adm-pill.adm-warn-pill { background: var(--dk-warn-soft, #fdf3dc); color: var(--dk-warn-text, #7a4f00); }
.adm-pill.adm-bad-pill { background: var(--dk-bad-soft, #fdf0ee); color: var(--dk-bad-text, #9a2617); }
.adm-small .adm-pill { margin-top: 4px; white-space: nowrap; }

.adm-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100%); box-sizing: border-box; background: var(--dk-surface, #fff);
  border-left: 1px solid var(--dk-line, var(--border)); box-shadow: -10px 0 30px rgba(15,61,92,0.18); overflow-y: auto; padding: 0 22px 28px;
  display: flex; flex-direction: column; gap: 14px; z-index: 50; animation: admFlyOut 0.18s ease-out; color: var(--dk-ink, #1a1a1a); }
@keyframes admFlyOut { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .adm-panel { animation: none; } }
.adm-phead { position: sticky; top: 0; background: var(--dk-surface, #fff); padding: 20px 0 10px; display: flex; align-items: center; gap: 10px; z-index: 1; }
.adm-phead h2 { margin: 0; flex-grow: 1; font: 800 22px Raleway, Helvetica, Arial, sans-serif; color: var(--dk-ink, #1a1a1a); overflow-wrap: anywhere; }
.adm-x { width: 36px; height: 36px; flex-shrink: 0; border: 0; border-radius: 18px; background: var(--dk-page, var(--bg)); color: var(--dk-ink-2, var(--gray)); font-size: 18px; cursor: pointer; }
.adm-x:focus-visible { outline: 3px solid var(--dk-accent-line, var(--purple)); outline-offset: 2px; }
.adm-warnline { background: var(--dk-warn-soft, #fdf3dc); color: var(--dk-warn-text, #7a4f00); border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.adm-panel .adm-msg[hidden] { display: none; }
.adm-fs { border: 1px solid var(--dk-line, var(--border)); border-radius: 10px; padding: 12px 14px 14px; margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.adm-fs legend { font: 700 12.5px Raleway, Helvetica, Arial, sans-serif; letter-spacing: 0.5px; text-transform: uppercase; color: var(--dk-accent-text, var(--purple)); padding: 0 6px; }
.adm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.adm-grid.adm-three { grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1fr); }
.adm-f { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--dk-ink-2, var(--gray)); margin: 0; min-width: 0; }
.adm-f .adm-input { width: 100%; }
.adm-f .adm-seg { align-self: flex-start; }
.adm-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.adm-checks.adm-one { grid-template-columns: minmax(0, 1fr); }
.adm-checks label { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border: 1.5px solid var(--dk-line, var(--border)); border-radius: 8px;
  cursor: pointer; font-size: 13.5px; color: var(--dk-ink, #1a1a1a); }
.adm-checks input { width: 18px; height: 18px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--purple); }
.adm-checks small { display: block; color: var(--dk-ink-2, var(--gray)); font-size: 12px; }
.adm-panel-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.adm-grow { flex-grow: 1; }
@media (max-width: 560px) { .adm-grid, .adm-grid.adm-three, .adm-checks { grid-template-columns: minmax(0, 1fr); } }
/* The staff app styles every date box page-wide (48px, 16px type); in the panel they match the
   other boxes. */
.adm-panel .adm-input { height: 40px; padding: 0 10px; font-size: 14px; margin: 0; }
/* A chauffeur's Pay (2026-10-07, owner only): the amounts hide for Not paid. */
#admChPay .adm-grid[hidden] { display: none; }
#admChPayMethod { flex-wrap: wrap; align-self: flex-start; }

/* The do-not-call list (2026-10-07). */
.adm-dnc { list-style: none; margin: 4px 0 0; padding: 0; }
.adm-dnc li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--dk-line, var(--border)); }
.adm-dnc li:first-child { border-top: 0; }
.adm-dnc-what { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.adm-mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.adm-h3 { font-size: 15px; margin: 14px 0 0; }
textarea.adm-input { height: auto; padding: 8px 10px; resize: vertical; width: 100%; box-sizing: border-box; }
.adm-log-search { width: 100%; max-width: 440px; box-sizing: border-box; margin: 2px 0 12px; }
/* For client emails (2026-10-09): the chauffeur's photo beside its link, round as in the email. */
.adm-photo-row { display: flex; gap: 12px; align-items: flex-end; margin-bottom: 10px; }
.adm-photo { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 3px solid var(--dk-accent-line, var(--purple)); }
.adm-grow-f { flex: 1; }
.adm-photo-note { margin-top: 8px; }

/* NOTIFICATIONS (2026-10-10, stage A): the card under My profile (js/ecr-notify.js), and on the phone
   the bell in the header and the Notifications screen behind it (the phone has no Admin tab). The
   mockup: https://claude.ai/artifact/Myiruu8sJL82CJwQEsb8Yp. Every colour as var(--dk-...). */
#admNotify .adm-inline, .ntf-body .adm-inline { align-items: center; }
/* Focus waits on the card itself while its button is busy (ecr-notify.js placeFocus): no ring round
   the whole card, the busy button says what is happening. */
#admNotify:focus, #ntfSheetBody:focus { outline: none; }
.ntf-h3 { margin: 6px 0 0; font: 700 13px Raleway, Helvetica, Arial, sans-serif; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--dk-accent-text, var(--purple)); }
.adm-msg.ntf-warn { background: var(--dk-warn-soft, #fdf3dc); color: var(--dk-warn-text, #6b4500); border: 1px solid var(--dk-warn-line, #e8cf8f); font-weight: 400; }
.adm-msg.ntf-warn b { display: block; margin-bottom: 2px; }
.ntf-steps { background: var(--dk-tint-accent, #f6f4fb); border: 1.5px solid var(--dk-accent-line, var(--purple)); border-radius: 12px; padding: 14px;
  color: var(--dk-ink, #1a1a1a); }
.ntf-steps b { display: block; font: 700 13px Raleway, Helvetica, Arial, sans-serif; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--dk-accent-text, var(--purple)); }
.ntf-steps p { margin: 6px 0; }
.ntf-steps ol { margin: 0; padding-left: 22px; display: grid; gap: 4px; }
.ntf-devices { margin: 0; padding: 0; list-style: none; }
.ntf-devices li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--dk-line, var(--border)); }
.ntf-devices li:last-child { border-bottom: 1px solid var(--dk-line, var(--border)); }
.ntf-dev { flex: 1 1 auto; min-width: 0; }
.ntf-dev b { display: block; color: var(--dk-ink, #1a1a1a); }
.ntf-devices .ntf-none { color: var(--dk-ink-2, var(--gray)); }

header { position: relative; }
/* The phone's bell (stage B, 2026-10-12): on the Texts screen, in the inbox's head, as the mockup draws it.
   Shown below 700px only, once signed in. Colours as var(--dk-...), so light and dark both read. */
.ntf-bell { width: 40px; height: 40px; border-radius: 20px; border: 1.5px solid var(--dk-line, var(--border)); background: var(--dk-surface, #fff);
  color: var(--dk-accent-text, var(--purple)); display: inline-grid; place-items: center; padding: 0; cursor: pointer; flex: 0 0 auto; }
.ntf-bell:hover { border-color: var(--dk-accent-line, var(--purple)); }
.ntf-bell:focus-visible { outline: 3px solid var(--dk-accent-line, var(--purple)); outline-offset: 2px; }
.ntf-bell[hidden] { display: none; }
@media (min-width: 700px) { .ntf-bell { display: none; } }

/* The phone's Notifications screen: the whole screen, a bar with Back at the top. */
#ntfSheet[hidden] { display: none; }
#ntfSheet { position: fixed; inset: 0; z-index: 60; background: var(--dk-page, var(--bg)); display: flex; flex-direction: column; overflow: hidden; }
body.ntf-sheet-open { overflow: hidden; }
.ntf-bar { display: grid; grid-template-columns: 88px minmax(0, 1fr) 88px; align-items: center; gap: 6px; padding: 10px 12px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px)); background: var(--dk-surface, #fff); border-bottom: 1px solid var(--dk-line, var(--border)); }
.ntf-back { justify-self: start; display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 8px; border: 0; background: none;
  color: var(--dk-accent-text, var(--purple)); font: 700 15px Helvetica, Arial, sans-serif; cursor: pointer; }
.ntf-back:focus-visible { outline: 3px solid var(--dk-accent-line, var(--purple)); outline-offset: 2px; border-radius: 8px; }
.ntf-title { text-align: center; }
.ntf-title b { display: block; font: 800 17px Raleway, Helvetica, Arial, sans-serif; color: var(--dk-ink, #1a1a1a); }
.ntf-title small { color: var(--dk-ink-2, var(--gray)); font-size: 12.5px; }
.ntf-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 12px; font-size: 14px; color: var(--dk-ink, #1a1a1a); }
.ntf-body .adm-row .adm-btn { flex: 1 1 auto; }

/* Stage B (2026-10-12, the approved mockup): Tell me when, Quiet hours, What a notification shows. The
   switches are the Automations' own (.au-switch); the example is drawn like a phone's notification. */
.ntf-settings { display: flex; flex-direction: column; gap: 10px; }
.ntf-events { display: flex; flex-direction: column; }
.ntf-ev { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding: 10px 0; border-top: 1px solid var(--dk-line, var(--border)); }
.ntf-events .ntf-ev:last-child { border-bottom: 1px solid var(--dk-line, var(--border)); }
.ntf-ev-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ntf-ev-text b { color: var(--dk-ink, #1a1a1a); }
.ntf-quiet { display: flex; gap: 12px; flex-wrap: wrap; }
.ntf-pick { display: flex; flex-direction: column; gap: 4px; font-weight: 700; font-size: 13px; color: var(--dk-ink, #1a1a1a); }
.ntf-pick .adm-input { min-width: 140px; }
.ntf-seg { align-self: flex-start; max-width: 100%; }
.ntf-example { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: var(--dk-tint, #eef2f4); max-width: 420px; }
.ntf-note { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 2px 10px; align-items: start; padding: 10px 12px; border-radius: 14px;
  background: var(--dk-surface, #fff); border: 1px solid var(--dk-line, var(--border)); }
.ntf-note img { border-radius: 7px; display: block; }
.ntf-note-app { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--dk-ink-2, var(--gray)); }
.ntf-note b { display: block; color: var(--dk-ink, #1a1a1a); }
.ntf-note-body { display: block; color: var(--dk-ink, #1a1a1a); }
.ntf-note-when { font-size: 12px; color: var(--dk-ink-2, var(--gray)); }
.ntf-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 480px) {
  .ntf-seg { display: flex; width: 100%; }
  .ntf-seg button { flex: 1 1 0; padding: 0 8px; font-size: 13px; }
}

/* Automations (2026-10-10, Thomas's approved mockup https://claude.ai/artifact/N7N5nkue4gwTKNUn3M5xMw): the
   intro with its tally and the groups to jump to, then one card per group, each automation with its
   switch. The switch's colours are the mockup's: green on, grey off, the knob the card's own surface. */
.adm-lead { margin: 0; color: var(--dk-ink, #1a1a1a); font-size: 15px; max-width: 70ch; line-height: 1.45; }
.au-owner { margin: 0; padding: 8px 12px; border-radius: 8px; background: var(--dk-tint-accent, #f6f4fb); color: var(--dk-accent-text-2, var(--purple-dark));
  font-weight: 700; font-size: 13.5px; max-width: 70ch; }
.au-tally { display: flex; flex-wrap: wrap; gap: 6px; }
.au-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  background: var(--dk-page, var(--bg)); color: var(--dk-ink-2, var(--gray)); font-variant-numeric: tabular-nums; }
.au-pill.au-good { background: var(--dk-good-soft, #e3f3e8); color: var(--dk-good-text, #155d2c); }
.au-pill.au-warn { background: var(--dk-warn-soft, #fdf3dc); color: var(--dk-warn-text, #7a4f00); }
.au-jump { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; border-top: 1px solid var(--dk-line, var(--border)); }
.au-jump-lbl { width: 100%; padding-top: 8px; font: 700 12px Raleway, Helvetica, Arial, sans-serif; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--dk-ink-2, var(--gray)); }
.au-jump button { min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--dk-line, var(--border)); background: var(--dk-surface, #fff);
  color: var(--dk-accent-text-2, var(--purple-dark)); font: 700 13px Helvetica, Arial, sans-serif; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.au-jump button span { color: var(--dk-ink-2, var(--gray)); font-weight: 400; font-variant-numeric: tabular-nums; }
.au-jump button:hover { border-color: var(--dk-accent-line, var(--purple)); }
.au-jump button:focus-visible { outline: 3px solid var(--dk-accent-line, var(--purple)); outline-offset: 2px; }

.au-ghead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.au-ghead h3 { margin: 0; font: 800 18px/1.25 Raleway, Helvetica, Arial, sans-serif; color: var(--dk-ink, #1a1a1a); scroll-margin-top: 10px; }
.au-ghead h3:focus { outline: none; }
.au-ghead h3:focus-visible { outline: 3px solid var(--dk-accent-line, var(--purple)); outline-offset: 2px; }
.au-count { color: var(--dk-ink-2, var(--gray)); font-size: 13px; font-variant-numeric: tabular-nums; }
.au-subhead { margin: 10px 0 -4px; font: 700 12.5px Raleway, Helvetica, Arial, sans-serif; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--dk-accent-text, var(--purple)); }
.au-list { display: flex; flex-direction: column; }
.au-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 18px; align-items: start; padding: 14px 0; border-top: 1px solid var(--dk-line, var(--border)); }
.au-subhead + .au-list .au-row:first-child { border-top: 0; }
.au-text { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.au-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-weight: 700; color: var(--dk-ink, #1a1a1a); font-size: 14.5px; }
.au-what { margin: 0; color: var(--dk-ink, #1a1a1a); line-height: 1.45; max-width: 74ch; }
.au-small { margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: var(--dk-ink-2, var(--gray)); max-width: 74ch; }
.au-k { font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; margin-right: 6px; }
.au-row.is-off .au-ifoff { background: var(--dk-warn-soft, #fdf3dc); color: var(--dk-warn-text, #7a4f00); border-radius: 8px; padding: 7px 10px; }
.au-note { margin: 0; font-size: 12.5px; color: var(--dk-good-text, #155d2c); font-weight: 700; }
.au-note.au-bad { color: var(--dk-bad-text, #9a2617); }
.au-note:empty { display: none; }

.au-ctl { display: flex; justify-content: flex-end; padding-top: 1px; }
.au-switch { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; background: none; border: 0; padding: 0 2px; cursor: pointer;
  font: 700 13px Helvetica, Arial, sans-serif; color: var(--dk-ink, #1a1a1a); }
.au-track { width: 38px; height: 22px; border-radius: 11px; background: var(--dk-switch-off, #8a979e); position: relative; transition: background 0.15s; flex-shrink: 0; }
.au-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--dk-surface, #fff); transition: transform 0.15s; }
.au-switch[aria-checked="true"] .au-track { background: var(--dk-switch-on, #1e7d3c); }
.au-switch[aria-checked="true"] .au-track::after { transform: translateX(16px); }
.au-switch .au-state { min-width: 2.1em; text-align: left; }
.au-switch:focus-visible { outline: 3px solid var(--dk-accent-line, var(--purple)); outline-offset: 3px; border-radius: 6px; }
.au-switch[aria-busy="true"] { cursor: progress; }
/* Not the owner's: shown as it stands, and not pressable (the server refuses it anyway). */
.au-switch:disabled { cursor: not-allowed; opacity: 0.6; }

@media (prefers-reduced-motion: reduce) { .au-track, .au-track::after { transition: none; } }
@media (max-width: 600px) {
  #admApp { padding: 16px 16px 32px; gap: 14px; }
  .adm-card { padding: 16px; }
  .au-row { gap: 8px 12px; }
  .au-switch { gap: 6px; }
}

/* ADMIN › CONNECTIONS (2026-10-10, Thomas's approved mockup
   https://claude.ai/artifact/ABwMGyKjxGVLkrYyw8xCKb): one row per service, its state, what it is for
   and the one action that makes sense. The mockup's colours are the staff app's own, so each is the
   app's var(--dk-<role>, <light>) (test/dark-mode.test.js); --dk-off-* are its grey "off" chips. */
.adm-flag { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 7px; background: var(--dk-warn-soft, #fdf3dc); color: var(--dk-warn-text, #6b4500);
  border: 1px solid var(--dk-warn-line, #e6c97a); }
.adm-flag.adm-flag-bad { background: var(--dk-bad-soft, #fdf0ee); color: var(--dk-bad-text, #9a2617); border-color: var(--dk-bad-line, #f2d3cf); }
.adm-msg:focus-visible, .cx-card h2:focus-visible { outline: 3px solid var(--dk-accent-line, var(--purple)); outline-offset: 2px; }
.cx-card { gap: 14px; }
.cx-card .adm-cardhead h2 { line-height: 1.2; }
.cx-checked { font-size: 12.5px; color: var(--dk-ink-2, var(--gray)); font-variant-numeric: tabular-nums; }
.cx-slot { display: contents; }
.cx-site { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: flex-start; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--dk-line, var(--border));
  background: var(--dk-tint, #fafbfb); }
.cx-site p { margin: 0; color: var(--dk-ink, #1a1a1a); max-width: 80ch; flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }
.cx-needs { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; padding: 14px 16px; border-radius: 10px;
  background: var(--dk-warn-soft, #fdf3dc); color: var(--dk-warn-text, #6b4500); border: 1px solid var(--dk-warn-line, #e6c97a); }
.cx-needs.cx-needs-bad { background: var(--dk-bad-soft, #fdf0ee); color: var(--dk-bad-text, #9a2617); border-color: var(--dk-bad-line, #f2d3cf); }
.cx-needs div { flex: 1 1 320px; min-width: 0; }
.cx-needs b { display: block; margin-bottom: 2px; }
.cx-needs p { margin: 0; }
.cx-tally { display: flex; flex-wrap: wrap; gap: 6px; }

.cx-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.cx-chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cx-chip.cx-plain::before { display: none; }
.cx-chip.cx-good { background: var(--dk-good-soft, #e3f3e8); color: var(--dk-good-text, #155d2c); }
.cx-chip.cx-warn { background: var(--dk-warn-soft, #fdf3dc); color: var(--dk-warn-text, #6b4500); }
.cx-chip.cx-bad { background: var(--dk-bad-soft, #fdf0ee); color: var(--dk-bad-text, #9a2617); }
.cx-chip.cx-info { background: var(--dk-info-soft, #e1eef8); color: var(--dk-info-text, #0b4a75); }
.cx-chip.cx-off { background: var(--dk-off-soft, #eceff1); color: var(--dk-off-text, #46555e); }

.cx-list { display: flex; flex-direction: column; border-top: 1px solid var(--dk-line, var(--border)); }
.cx-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(170px, auto); gap: 6px 14px; padding: 18px 0; border-bottom: 1px solid var(--dk-line, var(--border)); }
.cx-ico { grid-row: 1 / span 3; width: 40px; height: 40px; border-radius: 10px; background: var(--dk-tint-accent, #f6f4fb); color: var(--dk-accent-text, var(--purple));
  display: flex; align-items: center; justify-content: center; border: 1px solid var(--dk-accent-line-soft, #ddd6ef); box-sizing: border-box; }
.cx-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.cx-name h3 { margin: 0; font: 800 17px/1.25 Raleway, Helvetica, Arial, sans-serif; color: var(--dk-ink, #1a1a1a); }
.cx-what { grid-column: 2; margin: 0; color: var(--dk-ink-2, var(--gray)); max-width: 72ch; }
.cx-act { grid-column: 3; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; }
.cx-act .lv-btn { gap: 6px; white-space: nowrap; }
.cx-where { font-size: 12.5px; color: var(--dk-ink-2, var(--gray)); max-width: 24ch; }
.cx-facts { grid-column: 2 / span 2; margin: 6px 0 0; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 6px 14px; font-size: 13.5px; }
.cx-facts dt { color: var(--dk-ink-2, var(--gray)); }
.cx-facts dd { margin: 0; color: var(--dk-ink, #1a1a1a); overflow-wrap: anywhere; }
.cx-facts dd.cx-warn { color: var(--dk-warn-text, #6b4500); font-weight: 700; }
.cx-facts dd.cx-bad { color: var(--dk-bad-text, #9a2617); font-weight: 700; }
.cx-bul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; }
.cx-confirm { grid-column: 2 / span 2; margin-top: 8px; padding: 14px 16px; border-radius: 10px; border: 1.5px solid var(--dk-bad-line, #f2d3cf);
  background: var(--dk-bad-soft, #fdf0ee); color: var(--dk-ink, #1a1a1a); display: flex; flex-direction: column; gap: 10px; }
.cx-confirm b { color: var(--dk-bad-text, #9a2617); font-size: 15px; }
.cx-confirm ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.cx-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-foot { margin: 0; font-size: 12.5px; color: var(--dk-ink-2, var(--gray)); max-width: 80ch; }
.cx-needs .lv-btn { background: var(--dk-surface, #fff); }
.cx-needs .lv-btn:hover { background: var(--purple); }
@media (max-width: 700px) {
  .cx-row { grid-template-columns: 40px minmax(0, 1fr); }
  .cx-ico { grid-row: auto; }
  .cx-what { grid-column: 1 / span 2; }
  .cx-act { grid-column: 1 / span 2; grid-row: auto; order: 9; flex-direction: row; flex-wrap: wrap; align-items: center; text-align: left; padding-top: 6px; }
  .cx-confirm { order: 10; }
  .cx-where { max-width: none; }
  .cx-facts, .cx-confirm { grid-column: 1 / span 2; }
  .cx-facts { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .cx-facts dt { font-size: 12px; font-weight: 700; margin-top: 6px; }
}
@media (prefers-reduced-motion: no-preference) {
  .cx-confirm, .cx-card .adm-msg { animation: cxIn 0.16s ease-out; }
  @keyframes cxIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}
/* Clients, Invoices and the Send invoice window point to Connections (the mockup's decision 9; with
   no Connect of their own since 2026-10-11): the warning says why, and links to Admin › Connections;
   the line under the title names the company. */
.lv-msg.cx-pointer:not([hidden]), .cal-hint.cx-pointer:not([hidden]) { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
/* Only while shown: an author display rule beats the browser's own [hidden] { display: none }, so the
   warning stayed above a list that had since loaded (2026-10-11 review). */
.cx-pointer-text { flex: 1 1 300px; min-width: 0; }
.cx-pointer .lv-btn { text-decoration: none; }
.lv-msg.cx-pointer .lv-btn { background: var(--dk-surface, #fff); }
.lv-msg.cx-pointer .lv-btn:hover { background: var(--purple); }
.cx-sublink { font-weight: 700; color: var(--dk-accent-text, var(--purple)); }
.cx-sublink:focus-visible { outline: 3px solid var(--dk-accent-line, var(--purple)); outline-offset: 2px; }