/* ================= THE SHARED DIALOGS, IN THIS EXPERIENCE'S CLOTHES =================
   Not a fork — `JS/components/email-paste-modal.js` and friends inject the same markup
   everywhere and the suite pages call it unchanged; this is only a presentation layer, scoped
   to `body.alt-app` (same shape as alt-message-center.css). A rule here that hides, moves or
   disables a control is a defect in this file. Covers every shared `.settings-modal` dialog the
   suite hosts (email paste, follow-up composer, board picker, link-task) — restyling one and
   not the others looks broken the moment a reader opens a second. Three families, in order:
   `.settings-modal` dialogs, the profile panel (`#accountOverlay`), then the password dialog it
   opens on top of itself. */

/* The prefixed blur is not decoration on the unprefixed one — pre-18 Safari (most iOS devices)
   knows only `-webkit-backdrop-filter` and renders no blur without it. The `rgba()` ground
   carries the scrim either way, so this is cosmetic; written here because every suite dialog
   wears this sheet (login.css and landing.css already prove the pair is the house form). */
body.alt-app .settings-modal-overlay{
  background:rgba(4, 10, 20, .58);
  -webkit-backdrop-filter:blur(1px);
  backdrop-filter:blur(1px);
}
body.alt-app.theme-light .settings-modal-overlay{ background:rgba(19, 32, 54, .34); }

body.alt-app .settings-modal{
  background:var(--a-panel); border:1px solid var(--a-line-strong);
  border-radius:var(--a-r-lg); box-shadow:var(--a-shadow-lg);
  font-family:var(--a-body); color:var(--a-text);
}
body.alt-app .settings-modal-header{
  background:var(--a-raised); border-bottom:1px solid var(--a-line);
  padding:12px var(--a-4);
}
body.alt-app .settings-modal-title{
  font:600 15px/1.2 var(--a-display); letter-spacing:.01em; color:var(--a-text);
}
body.alt-app .settings-modal-body{ padding:var(--a-4); background:transparent; }
body.alt-app .settings-modal-footer{
  background:var(--a-raised); border-top:1px solid var(--a-line); padding:12px var(--a-4);
}

/* The close button — the same 32px icon button the suite shell uses everywhere, so a shared
   dialog's corner matches one this layer drew itself. THE LIST IS THE DEFECT, NOT THE BUTTON: a
   dialog with the right markup still needs its card named here or it falls back to the user
   agent's own button chrome (a pale filled box with a dark glyph) — `.a-wa-card` was missing
   this way until 2026-09-11. The next dialog added here will look exactly like that if its card
   is forgotten too. */
body.alt-app .settings-modal .icon-btn,
body.alt-app .mc-card .icon-btn,
body.alt-app .account-card .icon-btn,
body.alt-app .a-wa-card .icon-btn,
body.alt-app .chpw-card .icon-btn{
  width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--a-r-sm); border:1px solid transparent; background:none;
  color:var(--a-dim); font-size:15px; line-height:1; cursor:pointer;
}
body.alt-app .settings-modal .icon-btn:hover,
body.alt-app .mc-card .icon-btn:hover,
body.alt-app .account-card .icon-btn:hover,
body.alt-app .a-wa-card .icon-btn:hover,
body.alt-app .chpw-card .icon-btn:hover{
  background:var(--a-panel); border-color:var(--a-line-strong); color:var(--a-text);
}
body.alt-app .settings-modal .icon-btn:focus-visible,
body.alt-app .mc-card .icon-btn:focus-visible,
body.alt-app .account-card .icon-btn:focus-visible,
body.alt-app .a-wa-card .icon-btn:focus-visible,
body.alt-app .chpw-card .icon-btn:focus-visible{
  outline:2px solid var(--a-ring); outline-offset:1px;
}

/* Fields and buttons inside a shared dialog.
   THE TYPE LIST IS EXHAUSTIVE ON PURPOSE — every text-entry type HTML has, not the three that
   happened to be needed (a partial list, missing `search`, once left the people-picker's box as
   a raw white user-agent field). Checkboxes, radios and file/colour/range keep their native
   control. NOT `input:not(…)`: each `:not()` adds specificity, which would overtake the
   `input:focus` rule below and cost every field its focus border — an enumeration keeps both at
   the same weight.

   `:where(:not(.a-input))`, ADDED 2026-09-23, SO THIS NEVER DRESSES THE SUITE'S OWN FIELD. This
   rule (0,3,2) once outranked `.a-search .a-input{padding-left:30px}` (0,2,0, alt-components.css)
   and un-bought the room an absolute magnifier needs, overlapping it with the placeholder —
   sys_design-system.md §2's "opting a control out of the base rule" trap, hit a third time
   (after okr-suite.css and alt-admin.css). This file can't use their plain `:not(.a-input)` fix:
   its base rule and `input:focus` below sit at matching specificity, and a plain `:not()` would
   unbalance them and take the focus ring away again. `:where()` contributes ZERO specificity, so
   the base rule stays exactly as strong and only the Suite's own field is spared. Above §2e's
   browser floor, so no `@supports` gate.

   `appearance` BELOW STAYS UNEXCLUDED, DELIBERATELY — it's declared nowhere in the component
   layer, so it's the only thing standing between `.a-input[type=search]` and Safari's native
   rounded shape; excluding it would fix Chrome's padding and ship a Safari shape bug nothing here
   would catch. The exclusion applies only to properties the component already owns. */
body.alt-app .settings-modal input[type="text"]:where(:not(.a-input)),
body.alt-app .settings-modal input[type="search"]:where(:not(.a-input)),
body.alt-app .settings-modal input[type="url"]:where(:not(.a-input)),
body.alt-app .settings-modal input[type="email"]:where(:not(.a-input)),
body.alt-app .settings-modal input[type="tel"]:where(:not(.a-input)),
body.alt-app .settings-modal input[type="password"]:where(:not(.a-input)),
body.alt-app .settings-modal input[type="number"]:where(:not(.a-input)),
body.alt-app .settings-modal input[type="date"]:where(:not(.a-input)),
body.alt-app .settings-modal input[type="datetime-local"]:where(:not(.a-input)),
body.alt-app .settings-modal input[type="month"]:where(:not(.a-input)),
body.alt-app .settings-modal input[type="week"]:where(:not(.a-input)),
body.alt-app .settings-modal input[type="time"]:where(:not(.a-input)),
body.alt-app .settings-modal select:where(:not(.a-select)),
body.alt-app .settings-modal textarea:where(:not(.a-textarea)),
body.alt-app .email-paste-text{
  background:var(--a-bg); border:1px solid var(--a-line-strong); color:var(--a-text);
  border-radius:var(--a-r-sm); font:inherit; font-size:13px; padding:8px 10px;
}
/* Safari and Chrome give type=search a shape of their own — rounded ends, a fixed inner height —
   that survives a border and a background. The dialog's geometry has to win; the clear glyph is
   left alone, because it is useful and the browser themes it with the page. */
body.alt-app .settings-modal input[type="search"]{ -webkit-appearance:none; appearance:none; }
body.alt-app .settings-modal input::placeholder,
body.alt-app .settings-modal textarea::placeholder{ color:var(--a-faint); }
body.alt-app .settings-modal input:focus,
body.alt-app .settings-modal select:focus,
body.alt-app .settings-modal textarea:focus,
body.alt-app .email-paste-text:focus{
  outline:none; border-color:var(--a-blue); box-shadow:0 0 0 2px var(--a-blue-soft);
}
body.alt-app .settings-modal .btn{
  background:var(--a-panel); border:1px solid var(--a-line-strong); color:var(--a-text);
  border-radius:var(--a-r-sm); font:500 13px/1 var(--a-body); height:var(--a-ctl-lg);
  padding:0 14px; cursor:pointer;
}
body.alt-app .settings-modal .btn:hover{ border-color:var(--a-blue); color:var(--a-blue-text); }
body.alt-app .settings-modal .btn.primary{
  background:var(--a-blue-fill); border-color:transparent; color:#fff;
}
body.alt-app .settings-modal .btn.primary:hover{ filter:brightness(1.06); }
body.alt-app .settings-modal .btn:focus-visible{ outline:2px solid var(--a-ring); outline-offset:1px; }
/* DESTRUCTIVE STAYS DESTRUCTIVE INSIDE `.settings-modal` TOO — the same rule the OKR dialogs
   already carry below, for the same reason, and it was missing here.

   MEASURED, NOT REASONED. `appConfirm({danger:true})` emits `.btn.danger`, and the lane that
   built it argued the global `.btn.danger` in components.css would win because its tokens are
   defined everywhere. Tokens were never the problem: specificity was. `body.alt-app
   .settings-modal .btn` above is (0,3,1) and the global `.btn.danger` is (0,2,0), so the plain
   button background won and a DELETE button rendered in panel grey — rgb(241,244,249) in light,
   rgb(16,31,54) in dark, measured in a real browser at 1440 and 390. Indistinguishable from
   Cancel beside it.

   That is the exact failure DoD 4h records from 2026-09-20: a destructive control that does not
   read as one, understating what it does. Reusing `--a-red-soft`/`--a-red` here rather than
   inventing a second red, as that rule's own header insists. */
body.alt-app .settings-modal .btn.danger{
  background:var(--a-red-soft); border-color:var(--a-red); color:var(--a-red);
}
body.alt-app .settings-modal .btn.danger:hover:not(:disabled){ filter:brightness(1.06); }
body.alt-app .settings-modal .pane-hint,
body.alt-app .settings-modal .email-paste-note{ color:var(--a-dim); font-size:13px; line-height:1.5; }

/* A second bare spot (Definition of Done 4h). orgPeopleInviteSubmit() and two other hosts
   (team-invite-email.js, board-bulk-assign.js) build per-address failure sentences as
   `<div class="empty-state">`, reusing the People admin table's class — but that class's only
   rule was scoped to `#adminModal` (alt-team.css), a structurally different overlay family this
   dialog is never inside. So a failed invite rendered as plain unstyled body text. Scoped to
   `.settings-modal` as the CANONICAL fix (every dialog reusing this class shared the gap), left-
   aligned and sentence-sized rather than the admin table's centred placeholder — a sentence to
   read, not a placeholder to glance past (the same choice alt-org-people.css's own
   `.empty-state.denied`/`.load-error` already made). */
body.alt-app .settings-modal .empty-state{
  text-align:left; padding:10px 12px; margin-top:4px;
  border:1px solid var(--a-line-strong); border-radius:var(--a-r-sm);
  background:var(--a-bg); color:var(--a-dim); font-size:13px; line-height:1.5;
}

/* ================= THE SHARED OKR DIALOGS =================
   The same problem as the settings modal above, one application later — here rather than in
   alt-okrs.css because okr-modal.js/okr-editor.js/okr-settings.js are CANONICAL, hosted
   unchanged wherever an objective is edited, emitting `.btn`/`.btn.primary`/`.btn.danger` and
   bare `input`/`select`/`textarea`. Those classes are declared only in okrs.html's inline
   <style> — without it, a host renders user-agent controls with the PRIMARY action
   indistinguishable from Cancel and the DESTRUCTIVE one stripped of its red. Not hypothetical: a
   since-deleted OKR page did exactly this. Scoped to the dialog hosts, not `.alt-app` — `.btn`
   is a classic class this file must not restyle wherever else it's used. */
body.alt-app .okr-modal input[type="text"],
body.alt-app .okr-modal input[type="number"],
body.alt-app .okr-modal input[type="date"],
body.alt-app .okr-modal input[type="search"],
body.alt-app .okr-modal select,
body.alt-app .okr-modal textarea,
body.alt-app #altOkrSettings input[type="text"],
body.alt-app #altOkrSettings input[type="number"],
body.alt-app #altOkrSettings select,
body.alt-app #altOkrFlow input[type="text"],
body.alt-app #altOkrFlow input[type="number"],
body.alt-app #altOkrFlow select,
body.alt-app #altOkrFlow textarea{
  background:var(--a-bg); border:1px solid var(--a-line-strong); color:var(--a-text);
  border-radius:var(--a-r-sm); font:inherit; font-size:13px; padding:7px 9px;
}
body.alt-app .okr-modal input:focus,
body.alt-app .okr-modal select:focus,
body.alt-app .okr-modal textarea:focus,
body.alt-app #altOkrSettings input:focus,
body.alt-app #altOkrSettings select:focus,
body.alt-app #altOkrFlow input:focus,
body.alt-app #altOkrFlow select:focus,
body.alt-app #altOkrFlow textarea:focus{
  outline:none; border-color:var(--a-blue); box-shadow:0 0 0 2px var(--a-blue-soft);
}
/* The height the rule above leaves unset was falling through to `.alt-app
   select:not(.a-select){height:var(--a-ctl)}` in okr-suite.css — density-sensitive (32px
   comfortable, 28px in `body.a-compact`), which paired with this rule's own padding clipped the
   bottom quarter of every descender in DIRECTION/QUARTER/STATE in compact. `.okr-modal .btn`
   already pins to `--a-ctl-lg` for the same footer's buttons; fields get the same tier here
   rather than a third number, keeping every row level across densities. NOT on textarea —
   `rows="3"` sizes it, and a `height` here would collapse it to one line. */
body.alt-app .okr-modal input[type="text"],
body.alt-app .okr-modal input[type="number"],
body.alt-app .okr-modal input[type="date"],
body.alt-app .okr-modal input[type="search"],
body.alt-app .okr-modal select,
body.alt-app #altOkrSettings input[type="text"],
body.alt-app #altOkrSettings input[type="number"],
body.alt-app #altOkrSettings select,
body.alt-app #altOkrFlow input[type="text"],
body.alt-app #altOkrFlow input[type="number"],
body.alt-app #altOkrFlow select{
  height:var(--a-ctl-lg);
}
/* ---------- THE PERSON COMBOBOX, WHEREVER THE SUITE MOUNTS IT ----------
   person-select.js is a classic component (classic tokens, CSS/components.css:1757-1789) that
   the Suite mounts in more than one place — OKR dialogs and the task drawer's Assignee/Owner
   fields — so a rule scoped only to `.okr-modal` left the drawer's combo boxes in another
   application's palette. Scoped to `body.alt-app` rather than copied a third time (a second
   dressing already exists, `:root.embed-task` in alt-embed-task.css, for a different document);
   a narrow selector couldn't reach it anyway since the listbox hangs off `<body>`. Reads as
   `.a-input` because it stands in for one — same height, radius, border, font, focus. */
body.alt-app .person-select-input{
  /* min-height, not height: the OKR dialogs' own field rule is more specific and sets its own
     vertical padding, so a floor leaves those combo boxes exactly as they render today while
     still giving the drawer the control height. */
  min-height:var(--a-ctl); padding:0 10px; border-radius:var(--a-r-sm);
  background:var(--a-bg); border:1px solid var(--a-line); color:var(--a-text);
  font-family:var(--a-body); font-size:13px;
}
body.alt-app .person-select-input::placeholder{ color:var(--a-faint); }
body.alt-app .person-select-input:hover:not(:disabled){ border-color:var(--a-line-strong); }
body.alt-app .person-select-input:focus{ outline:none; border-color:var(--a-blue); }
body.alt-app .person-select-input:focus-visible{ outline:2px solid var(--a-ring); outline-offset:1px; }
body.alt-app .person-select-input:disabled{ opacity:.5; }
body.alt-app .person-select-caret{
  width:26px; color:var(--a-faint); border-radius:0 var(--a-r-sm) var(--a-r-sm) 0;
}
body.alt-app .person-select-caret:hover:not(:disabled){ color:var(--a-text); }
/* The list's SURFACE is already alt — it is `.cfg-popover`, dressed in
   CSS/alt/alt-message-center.css. These are the rows inside it. */
body.alt-app .person-select-opt{ border-radius:var(--a-r-sm); font-size:13px; color:var(--a-text); }
body.alt-app .person-select-opt:hover{ background:var(--a-raised); }
/* `is-current` is who the record holds and `is-active` is where the keyboard is — two marks for
   two questions, the division CSS/components.css draws and this palette keeps. */
body.alt-app .person-select-opt.is-active{ background:var(--a-blue-soft); }
body.alt-app .person-select-opt .sub{ font-size:11px; color:var(--a-faint); }
body.alt-app .person-select-opt.is-off .nm{ color:var(--a-faint); }
body.alt-app .person-select-opt.is-off:hover{ background:none; }
body.alt-app .person-select-none{ font-size:12px; color:var(--a-faint); }

body.alt-app .okr-modal .btn,
body.alt-app #altOkrSettings .btn,
body.alt-app #altOkrFlow .btn{
  background:var(--a-panel); border:1px solid var(--a-line-strong); color:var(--a-text);
  border-radius:var(--a-r-sm); font:500 13px/1 var(--a-body); height:var(--a-ctl-lg);
  padding:0 14px; display:inline-flex; align-items:center; gap:6px; cursor:pointer;
}
body.alt-app .okr-modal .btn.small,
body.alt-app #altOkrSettings .btn.small,
body.alt-app #altOkrFlow .btn.small{ height:var(--a-ctl); padding:0 10px; font-size:12px; }
body.alt-app .okr-modal .btn:hover:not(:disabled),
body.alt-app #altOkrSettings .btn:hover:not(:disabled),
body.alt-app #altOkrFlow .btn:hover:not(:disabled){
  border-color:var(--a-blue); color:var(--a-blue-text);
}
body.alt-app .okr-modal .btn:disabled,
body.alt-app #altOkrSettings .btn:disabled,
body.alt-app #altOkrFlow .btn:disabled{ opacity:.45; cursor:default; }
body.alt-app .okr-modal .btn.primary,
body.alt-app #altOkrSettings .btn.primary,
body.alt-app #altOkrFlow .btn.primary{
  background:var(--a-blue-fill); border-color:transparent; color:#fff;
}
body.alt-app .okr-modal .btn.primary:hover:not(:disabled),
body.alt-app #altOkrSettings .btn.primary:hover:not(:disabled),
body.alt-app #altOkrFlow .btn.primary:hover:not(:disabled){ filter:brightness(1.06); color:#fff; }
/* DESTRUCTIVE STAYS DESTRUCTIVE. A delete that looks like every other button is the safeguard
   this rule exists to keep. */
body.alt-app .okr-modal .btn.danger,
body.alt-app #altOkrSettings .btn.danger,
body.alt-app #altOkrFlow .btn.danger{
  background:var(--a-red-soft); border-color:var(--a-red); color:var(--a-red);
}
body.alt-app .okr-modal .btn:focus-visible,
body.alt-app #altOkrSettings .btn:focus-visible,
body.alt-app #altOkrFlow .btn:focus-visible{ outline:2px solid var(--a-ring); outline-offset:1px; }
/* The dialog's own frame and its quiet copy, so the shared markup sits on the suite palette
   rather than the classic one. */
body.alt-app .okr-modal .okr-modal-pane{
  background:var(--a-panel); border:1px solid var(--a-line-strong);
  border-radius:var(--a-r-lg); box-shadow:var(--a-shadow-lg); color:var(--a-text);
}
body.alt-app .okr-modal .okr-field > span,
body.alt-app .okr-modal .okr-field-hint,
body.alt-app .okr-modal .okr-modal-msg{ color:var(--a-dim); }
body.alt-app .okr-modal .okr-modal-msg.err{ color:var(--a-red); }
body.alt-app .okr-modal .okr-modal-head,
body.alt-app .okr-modal .okr-modal-foot{ border-color:var(--a-line-soft); }
body.alt-app .email-paste-drop{
  border:1px dashed var(--a-line-strong); border-radius:var(--a-r);
  background:var(--a-raised); color:var(--a-dim);
}
/* The plain declaration in front of each mix is the fallback (not a comment) — an engine with no
   color-mix() discards the whole declaration at parse time, so the soft token it falls back to
   is the honest fallback: the same hue, a paler weight, rather than no feedback at all. */
body.alt-app .email-paste-drop.over{
  border-color:var(--a-blue);
  background:var(--a-blue-soft);
  background:color-mix(in srgb, var(--a-blue) 10%, transparent);
}
body.alt-app .email-status{ font-size:13px; color:var(--a-dim); }
body.alt-app .email-status.err{ color:var(--a-red); }
body.alt-app .email-status.ok{ color:var(--a-green); }
body.alt-app .email-status.working{ color:var(--a-blue-text); }

/* ================= THE PROFILE PANEL, IN THIS EXPERIENCE'S CLOTHES =================
   `#accountOverlay` is the canonical markup, hosted verbatim and driven by the canonical
   JS/features/account.js — nothing below changes a field, control or id; a rule here that hides
   or moves one is a defect in this file. It arrived naked because components.css deliberately
   keeps `.account-field`/`.acct-dest`/`.acct-verify`/`.btn` out of the shared sheet (they live in
   the classic pages' own <style> blocks), so the suite panel rendered raw user-agent inputs and
   OS buttons on a dark card. Geometry is the alternate dialog's, not a third one (`--a-panel` on
   `--a-line-strong`, pinned header and action bar, fields scrolling between — design-system
   §12). Sectioned (card / section / destination, three surface levels) rather than a column of
   full-width boxes, so "Notification email" and "Security" read as places. */

body.alt-app .account-overlay{
  background:rgba(4, 10, 20, .58);
  -webkit-backdrop-filter:blur(1px); backdrop-filter:blur(1px);
  padding:var(--a-5);
}
body.alt-app.theme-light .account-overlay{ background:rgba(19, 32, 54, .34); }

body.alt-app .account-card{
  background:var(--a-panel); border:1px solid var(--a-line-strong);
  border-radius:var(--a-r-lg); box-shadow:var(--a-shadow-lg);
  font-family:var(--a-body); color:var(--a-text);
  /* 420px is the classic width; grown since for a routing section. Capped in viewport units,
     same reason as .a-modal: a dialog must never be taller than its screen. */
  width:min(560px, 92vw); max-width:none; max-height:min(88vh, 880px);
  padding:0; overflow-y:auto;
  /* The pinned chrome must not catch the thing it scrolled to — tabbing near the bottom scrolls
     a control under the sticky action bar otherwise, focused and invisible. */
  scroll-padding-top:52px; scroll-padding-bottom:60px;
}

/* Header and action bar stay, fields scroll — `position:sticky` inside the card's own scroll
   box, not a z-index: both are positioned so paint order already stacks them above the in-flow
   fields; the layer stack (layerOpen()) owns depth, nothing here authors one. */
body.alt-app .account-title-row{
  position:sticky; top:0; margin:0 0 var(--a-1); padding:12px var(--a-5);
  background:var(--a-raised); border-bottom:1px solid var(--a-line);
}
body.alt-app .account-title-row h3{
  font:600 15px/1.2 var(--a-display); letter-spacing:.01em; color:var(--a-text);
}

/* Whose account this is — a chip, not a box: the first draft gave it `.chpw-dest`'s panel
   treatment, so the one line that CANNOT be edited looked most like a field. `.a-chip` reads as
   "a fact about this panel" instead. */
body.alt-app .account-sub{
  display:inline-flex; align-items:center; max-width:calc(100% - var(--a-5) * 2);
  margin:var(--a-4) var(--a-5); padding:0 11px; height:26px;
  background:var(--a-raised); border:1px solid var(--a-line-soft);
  border-radius:var(--a-r-pill);
  font:600 12px/1 var(--a-body); color:var(--a-text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* The card has no body wrapper to pad — the fields are its direct children — so the gutter is
   stated on the children that need it. */
body.alt-app .account-card > .account-field,
body.alt-app .account-card > .account-row-2,
body.alt-app .account-card > .account-status{
  padding-left:var(--a-5); padding-right:var(--a-5);
}
body.alt-app .account-field{ gap:6px; margin-bottom:var(--a-4); min-width:0; }
body.alt-app .account-row-2{ gap:var(--a-3); margin-bottom:0; }
body.alt-app .account-field > label{
  font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--a-dim); line-height:1.4;
}
/* "— optional" rides inside its label, so it inherits the 10px label size — and the faint tier
   has an 11px floor (responsive-layout.test.js). Separated by WEIGHT rather than by dropping a
   tier, which is the only move available at 10px. */
body.alt-app .account-field .hint{
  font-size:inherit; font-weight:500; color:var(--a-dim); letter-spacing:.06em;
}

/* ---------- fields ----------
   `.a-input`'s geometry, reached by attribute because the canonical markup carries no alt
   class and must not grow one. */
body.alt-app .account-field input[type="text"],
body.alt-app .account-field input[type="email"],
body.alt-app .account-field input[type="tel"],
body.alt-app .acct-verify input,
body.alt-app .chpw-card input[type="text"],
body.alt-app .chpw-card input[type="password"]{
  height:var(--a-ctl); width:100%; min-width:0; padding:0 10px;
  border-radius:var(--a-r-sm); background:var(--a-bg); border:1px solid var(--a-line);
  color:var(--a-text); font-family:var(--a-body); font-size:13px;
}
body.alt-app .account-field input:focus,
body.alt-app .acct-verify input:focus,
body.alt-app .chpw-card input:focus{ outline:none; border-color:var(--a-blue); }
body.alt-app .account-field input:focus-visible,
body.alt-app .acct-verify input:focus-visible,
body.alt-app .chpw-card input:focus-visible{ outline:2px solid var(--a-ring); outline-offset:1px; }
body.alt-app .account-field input::placeholder,
body.alt-app .chpw-card input::placeholder{ color:var(--a-faint); }
body.alt-app .account-field input[readonly]{ opacity:.65; cursor:default; }

/* ---------- a section: notification routing, and security ----------
   These two are `.account-field` in the markup and sections on the screen. Outlined rather
   than filled, so the destinations inside them can be the raised surface. */
body.alt-app .account-card > .acct-routing,
body.alt-app .account-card > .acct-security{
  padding:var(--a-3); margin:0 var(--a-5) var(--a-4);
  border:1px solid var(--a-line-soft); border-radius:var(--a-r);
  gap:var(--a-2);
}
/* `.a-sec-h`, plus the hairline that makes it a section rule rather than a field label. The
   rule is a ::after on the heading, so it needs no element the markup does not have. */
body.alt-app .acct-routing > label,
body.alt-app .acct-security > label{
  display:flex; align-items:center; gap:8px;
  font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--a-dim);
}
body.alt-app .acct-routing > label::after,
body.alt-app .acct-security > label::after{
  content:''; flex:1 1 auto; height:1px; background:var(--a-line-soft);
}
body.alt-app .acct-routing-note{
  font-size:12px; line-height:1.5; color:var(--a-dim); margin:0 0 var(--a-2);
}
body.alt-app .acct-dest{
  padding:10px 11px; margin:0 0 var(--a-2);
  background:var(--a-raised); border:1px solid var(--a-line-soft); border-radius:var(--a-r-sm);
}
body.alt-app .acct-dest-head{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:7px; min-width:0;
}
body.alt-app .acct-dest-head b{ font:600 13px/1.3 var(--a-body); color:var(--a-text); }
body.alt-app .acct-dest-addr{
  font-size:12px; color:var(--a-dim); min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap;
}
body.alt-app .acct-dest-controls{ display:flex; align-items:center; gap:var(--a-2); flex-wrap:wrap; }
body.alt-app .acct-dest-teams{ min-width:0; flex:1 1 200px; }
/* AN ALTERNATE ADDRESS NOBODY HAS PROVEN IS NOT A DESTINATION — acctRenderRouting() sets this
   and disables the select. Dimmed, never hidden: a control that says why it cannot be used is
   worth more than one that has vanished. */
body.alt-app .acct-dest.is-off{ opacity:.6; }
/* `.a-select`, deliberately keeping the native indicator the rest of this experience keeps. */
body.alt-app .acct-dest-controls select{
  height:var(--a-ctl); width:auto; min-width:164px; padding:0 8px;
  border-radius:var(--a-r-sm); background:var(--a-bg); border:1px solid var(--a-line);
  color:var(--a-text); font-family:var(--a-body); font-size:13px;
}
body.alt-app .acct-dest-controls select:focus{ outline:none; border-color:var(--a-blue); }
body.alt-app .acct-dest-controls select:focus-visible{ outline:2px solid var(--a-ring); outline-offset:1px; }
body.alt-app .acct-dest-controls select:disabled{ opacity:.6; cursor:not-allowed; }
/* NOT AN ERROR, so not the error colour. Somebody who put a team on both addresses meant to;
   this says it doubles the volume. `--a-blue-text` rather than `--a-blue` because it is read
   as text — the design system's 4.5:1 rule. */
body.alt-app .acct-overlap{
  font-size:12px; line-height:1.45; color:var(--a-blue-text);
  padding:8px 10px; margin:var(--a-1) 0 0;
  background:var(--a-blue-soft); border:1px solid var(--a-blue); border-radius:var(--a-r-sm);
}

/* ---------- proving the alternate address ---------- */
body.alt-app .acct-verify{
  display:flex; align-items:center; gap:var(--a-2); flex-wrap:wrap;
  margin-top:2px; font-size:12px; line-height:1.5;
}
body.alt-app .acct-verify .ok{ color:var(--a-green); font-weight:600; }
body.alt-app .acct-verify .warn{ color:var(--a-dim); flex:1 1 200px; min-width:0; }
/* A code is read back character by character — the same reasoning as .chpw-code. */
body.alt-app .acct-verify input{
  width:auto; max-width:132px; text-align:center; letter-spacing:.18em;
  font-variant-numeric:tabular-nums;
}

/* ---------- security ---------- */
body.alt-app .acct-security-row{
  padding:10px 11px; background:var(--a-raised);
  border:1px solid var(--a-line-soft); border-radius:var(--a-r-sm);
}
body.alt-app .acct-security-copy b{ font:600 13px/1.3 var(--a-body); color:var(--a-text); }
body.alt-app .acct-security-copy span{ font-size:12px; color:var(--a-faint); letter-spacing:.12em; }

/* ---------- what the panel says back ----------
   Saving / Saved / a refusal, and NOTHING AT ALL the rest of the time: `:empty` keeps the bar
   from reserving a strip of dead space above the actions for a message that is not there. */
body.alt-app .account-status,
body.alt-app .chpw-card .cfg-status{
  font-size:12px; line-height:1.5; color:var(--a-dim); min-height:0; margin:0;
}
body.alt-app .account-status:not(:empty),
body.alt-app .chpw-card .cfg-status:not(:empty){
  padding:8px 10px; margin:0 0 var(--a-3);
  border:1px solid var(--a-line-soft); border-radius:var(--a-r-sm); background:var(--a-raised);
}
body.alt-app .chpw-card .cfg-status:not(:empty){ margin:0 var(--a-5) var(--a-3); }
body.alt-app .account-status.ok:not(:empty),
body.alt-app .chpw-card .cfg-status.ok:not(:empty){
  color:var(--a-green); background:var(--a-green-soft);
  border-color:var(--a-green);
  border-color:color-mix(in srgb, var(--a-green) 45%, transparent);
}
body.alt-app .account-status.err:not(:empty),
body.alt-app .chpw-card .cfg-status.err:not(:empty){
  color:var(--a-red); background:var(--a-red-soft);
  border-color:var(--a-red);
  border-color:color-mix(in srgb, var(--a-red) 45%, transparent);
}

/* ---------- the action bar ----------
   `.account-actions` is the footer of BOTH the profile panel and the password dialog — one
   class, so one rule, and the two dialogs cannot drift apart. */
body.alt-app .account-actions{
  position:sticky; bottom:0; display:flex; justify-content:flex-end; gap:var(--a-2);
  margin:0; padding:12px var(--a-5);
  background:var(--a-raised); border-top:1px solid var(--a-line);
}

/* ---------- buttons ----------
   `.a-btn` and its `primary` / `sm` variants, reached through the canonical `.btn` classes the
   shared markup carries. Without this every control in both dialogs is an operating-system
   button: there is no shared `.btn` rule anywhere in CSS/, because each classic page declares
   its own. */
body.alt-app .account-card .btn,
body.alt-app .chpw-card .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:var(--a-ctl); padding:0 12px; border-radius:var(--a-r-sm);
  font-family:var(--a-body); font-size:13px; font-weight:600; line-height:1;
  background:var(--a-raised); color:var(--a-text); border:1px solid var(--a-line);
  cursor:pointer; white-space:nowrap; text-decoration:none;
}
body.alt-app .account-card .btn:hover,
body.alt-app .chpw-card .btn:hover{ border-color:var(--a-line-strong); }
body.alt-app .account-card .btn:focus-visible,
body.alt-app .chpw-card .btn:focus-visible{ outline:2px solid var(--a-ring); outline-offset:2px; }
body.alt-app .account-card .btn[disabled],
body.alt-app .chpw-card .btn[disabled]{ opacity:.5; cursor:not-allowed; }
/* ONE PRIMARY PER SURFACE is the suite's button rule; the markup already obeys
   it — Save here, and exactly one of Verify / Change password there. */
body.alt-app .account-card .btn.primary,
body.alt-app .chpw-card .btn.primary{
  background:var(--a-blue-fill); border-color:transparent; color:#fff;
}
body.alt-app .account-card .btn.primary:hover,
body.alt-app .chpw-card .btn.primary:hover{ filter:brightness(1.08); }
body.alt-app .account-card .btn.small,
body.alt-app .chpw-card .btn.small{ height:26px; font-size:12px; padding:0 9px; }

/* ================= CHANGE PASSWORD =================
   Opened FROM the profile panel — a layer on a layer, but the ordering is layerOpen()'s, not
   this file's (measured live: 320 over the panel's 310). Scoped to `#chpwOverlay`/`.chpw-card`
   rather than `.modal-overlay`, because `#messageCenter` on these same pages is also a
   `.modal-overlay`, dressed by alt-message-center.css. */
body.alt-app .modal-overlay#chpwOverlay{
  background:rgba(4, 10, 20, .58);
  -webkit-backdrop-filter:blur(1px); backdrop-filter:blur(1px);
}
body.alt-app.theme-light .modal-overlay#chpwOverlay{ background:rgba(19, 32, 54, .34); }
body.alt-app .chpw-card{
  background:var(--a-panel); border:1px solid var(--a-line-strong);
  border-radius:var(--a-r-lg); box-shadow:var(--a-shadow-lg);
  font-family:var(--a-body); color:var(--a-text);
  width:min(460px, 92vw); max-width:none; max-height:min(88vh, 860px);
  padding:0; overflow-y:auto;
  scroll-padding-top:52px; scroll-padding-bottom:60px;
}
body.alt-app .chpw-card .modal-title-row{
  position:sticky; top:0; margin:0 0 var(--a-4); padding:12px var(--a-5);
  background:var(--a-raised); border-bottom:1px solid var(--a-line);
}
body.alt-app .chpw-card h3{
  font:600 15px/1.2 var(--a-display); letter-spacing:.01em; color:var(--a-text);
}
body.alt-app .chpw-step{ padding:0 var(--a-5); margin:0 0 var(--a-3); gap:var(--a-2); }
body.alt-app .chpw-lead{ font-size:13px; line-height:1.55; color:var(--a-dim); }
body.alt-app .chpw-note,
body.alt-app .chpw-hint{ font-size:12px; line-height:1.5; color:var(--a-faint); }
body.alt-app .chpw-dest{
  padding:9px 11px; background:var(--a-raised);
  border:1px solid var(--a-line-soft); border-radius:var(--a-r);
  font:600 14px/1.4 var(--a-body); color:var(--a-text); word-break:break-all;
}
body.alt-app .chpw-dest-inline{ font-weight:600; color:var(--a-text); }
body.alt-app .chpw-label{
  margin-top:var(--a-1); font-size:10px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--a-dim); line-height:1.4;
}
/* The one field in either dialog that is read back a character at a time. */
body.alt-app .chpw-card .chpw-code{
  height:var(--a-ctl-lg); font-size:18px; letter-spacing:.34em; text-align:center;
  font-variant-numeric:tabular-nums; font-family:var(--a-mono);
}
body.alt-app .chpw-req-head{
  margin:var(--a-3) 0 2px; font-size:10px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--a-dim);
}
body.alt-app .chpw-match{ font-size:12px; line-height:1.45; color:var(--a-dim); }
body.alt-app .chpw-match.err{ color:var(--a-red); }
/* NEUTRAL UNTIL MET, never red for merely unfinished — the canonical checklist's own rule,
   restated in this palette rather than reinterpreted. */
body.alt-app .chpw-card .pw-req{ font-size:12px; line-height:1.45; color:var(--a-dim); }
body.alt-app .chpw-card .pw-req-mark{ color:var(--a-faint); }
body.alt-app .chpw-card .pw-req.is-met{ color:var(--a-text); }
body.alt-app .chpw-card .pw-req.is-met .pw-req-mark{ color:var(--a-green); font-weight:700; }

/* ---------- the team picker, when a routing mode asks for one ----------
   multiSelectField() draws `.ms-trigger` in place and hangs its `.ms-pop` off <body>. The pop's
   surface is already alt — CSS/alt/alt-message-center.css dresses `.cfg-popover` — and its
   depth comes from layerNextZ(), one step above whichever dialog owns it. These are the rows
   and the closed field inside it. */
body.alt-app .ms-trigger{
  height:var(--a-ctl); min-width:0; padding:0 9px; border-radius:var(--a-r-sm);
  background:var(--a-bg); border:1px solid var(--a-line); color:var(--a-text);
  font-family:var(--a-body); font-size:13px;
}
body.alt-app .ms-trigger:hover:not(:disabled){ border-color:var(--a-line-strong); }
body.alt-app .ms-trigger:focus-visible{ outline:2px solid var(--a-ring); outline-offset:1px; }
body.alt-app .ms-trigger.is-empty .ms-value{ color:var(--a-faint); }
body.alt-app .ms-caret{ color:var(--a-faint); }
body.alt-app .ms-pop-note{ font-size:11px; line-height:1.45; color:var(--a-faint); }
body.alt-app .people-pick-list{ background:transparent; border-color:var(--a-line-soft); }
body.alt-app .group-pick{ border-radius:var(--a-r-sm); color:var(--a-text); font-size:13px; }
body.alt-app .group-pick:hover{ background:var(--a-raised); }
body.alt-app .group-pick .sub{ color:var(--a-faint); }
body.alt-app .group-pick.off .nm{ color:var(--a-faint); }

/* ================= NARROW =================
   The panel at a phone width: full bleed, the two name fields stacked rather than squeezed,
   and a select that fills its row instead of forcing the card to scroll sideways. */
@media (max-width: 560px){
  body.alt-app .account-overlay{ padding:var(--a-2); }
  body.alt-app .account-card,
  body.alt-app .chpw-card{ width:100%; max-height:94vh; }
  body.alt-app .account-row-2{ flex-direction:column; gap:0; }
  body.alt-app .account-card > .account-field,
  body.alt-app .account-card > .account-row-2,
  body.alt-app .account-card > .account-status,
  body.alt-app .account-title-row,
  body.alt-app .account-actions,
  body.alt-app .chpw-step,
  body.alt-app .chpw-card .modal-title-row{ padding-left:var(--a-3); padding-right:var(--a-3); }
  body.alt-app .account-sub{ margin-left:var(--a-3); margin-right:var(--a-3);
    max-width:calc(100% - var(--a-3) * 2); }
  body.alt-app .account-card > .acct-routing,
  body.alt-app .account-card > .acct-security{ margin-left:var(--a-3); margin-right:var(--a-3); }
  body.alt-app .chpw-card .cfg-status:not(:empty){ margin-left:var(--a-3); margin-right:var(--a-3); }
  body.alt-app .acct-dest-controls select{ width:100%; min-width:0; }
  body.alt-app .acct-dest-teams{ flex:1 1 100%; }
  /* An action bar that wraps is still an action bar; one that overflows is not. */
  body.alt-app .account-actions{ flex-wrap:wrap; }
}

/* ================= MOTION =================
   A shared dialog is classic markup restated in this experience's clothes — `.btn`, `.icon-btn`,
   `input:focus` and friends are declared here, so their hover/focus states need a clock too, or
   every one of them snaps between frames inside a dialog whose own arrival (`.a-scrim > *`,
   alt-shell.css) glides in and then answers like a static image. `--dur-micro`, 140ms, linear —
   this application's clock for hover/selection/badge state (sys_design-system.md §2b); never
   `--a-quick`, since a dialog's travel belongs to the shell, not what's inside it. `filter` is
   listed only for `.btn.primary:hover`'s `brightness()` — one control at a time, never a licence
   to ease a filter across a list. The focus RING is deliberately not eased (a ring that fades in
   is briefly absent on the frame the keyboard arrives); the border eases, the ring is instant.
   Reduced motion is answered at the token — alt-tokens.css zeroes `--dur-micro` on `.alt-app`,
   which every selector here is already qualified by. */
body.alt-app .settings-modal .icon-btn,
body.alt-app .mc-card .icon-btn,
body.alt-app .account-card .icon-btn,
body.alt-app .chpw-card .icon-btn,
body.alt-app .settings-modal input,
body.alt-app .settings-modal select,
body.alt-app .settings-modal textarea,
body.alt-app .email-paste-text,
body.alt-app .settings-modal .btn,
body.alt-app .okr-modal .btn,
body.alt-app #altOkrSettings .btn,
body.alt-app #altOkrFlow .btn,
body.alt-app .account-card .btn,
body.alt-app .chpw-card .btn,
body.alt-app .okr-modal input,
body.alt-app .okr-modal select,
body.alt-app .okr-modal textarea,
body.alt-app #altOkrSettings input,
body.alt-app #altOkrSettings select,
body.alt-app #altOkrFlow input,
body.alt-app #altOkrFlow select,
body.alt-app #altOkrFlow textarea,
body.alt-app .account-field input,
body.alt-app .acct-verify input,
body.alt-app .chpw-card input,
body.alt-app .acct-dest-controls select,
body.alt-app .person-select-input,
body.alt-app .person-select-caret,
body.alt-app .person-select-opt,
body.alt-app .ms-trigger,
body.alt-app .group-pick{
  transition:background-color var(--dur-micro, 140ms) linear,
             border-color     var(--dur-micro, 140ms) linear,
             color            var(--dur-micro, 140ms) linear,
             opacity          var(--dur-micro, 140ms) linear,
             filter           var(--dur-micro, 140ms) linear;
}