@aracreate/arm-ui 3.6.0

package/dist/tokens.css

@@ -0,0 +1,769 @@
+/* ── Poppins font binding ──────────────────────────────────────────────────
+ * The app's fonts.css self-hosts Poppins via @fontsource; the DS package
+ * doesn't own font files, so consumers must load Poppins themselves and this
+ * only binds Radix's font-family variables to it. */
+.radix-themes {
+  --default-font-family: var(--font-poppins), sans-serif;
+  --heading-font-family: var(--font-poppins), sans-serif;
+}
+
+/* ── DS-specific custom tokens ──────────────────────────────────────────────
+ * Only the tokens the components in src/ actually reference — a minimal
+ * subset of the app's full theme-overrides.css, not the whole file (which
+ * also carries app-only tokens). Keep in sync by hand if either file's
+ * values change. */
+:root {
+  --color-paused: #d21120;           /* "Paused" badge — Figma's measured red
+                                        (purer than red-10, deliberate anchor) */
+  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.08);
+
+  /* The fixed shell surface white. The platform ships light appearance only,
+   * so these have no alternate value. The ink tokens moved to the contested
+   * block below. */
+  --shell-surface: #ffffff;
+  --border-hairline: var(--gray-4);
+}
+
+/* ── Contested tokens — declared on .radix-themes, NOT :root ────────────────
+ * Consuming apps declare these same tokens in their own theme-overrides.css on
+ * `:root`, and their stylesheet is bundled after this one — so a `:root`
+ * declaration here always loses on source order. `.radix-themes` is the Theme
+ * wrapper div, an inner element, so its value beats one inherited from `:root`
+ * (html) by proximity regardless of source order. That is what makes these
+ * effective without editing the apps.
+ *
+ * The four --color-* aliases carry literal hex rather than var(--amber-9) /
+ * var(--gray-12) on purpose: this package never defines the --amber-* scale and
+ * re-anchors --gray-12 to #1a1a1a in radix-brand-tokens.css, so a var() would
+ * resolve to a different color in Storybook than in the shell. The hex values
+ * are the shell's resolved values. Nothing references these four yet — they are
+ * a meaning-first layer awaiting adoption at the call sites. */
+.radix-themes {
+  --color-success: #186A43;          /* account "active" status */
+  --color-warning: #F9BF3B;          /* brand amber — metric "warn" status */
+  --color-danger:  #B3261E;          /* account "suspended" status */
+  --color-info:    #555555;          /* flat ink — "sync" activity / info copy */
+
+  --surface-content: #F6F6F6;        /* main content/page background */
+  --surface-input: #FFFFFF;          /* text-field + OTP fill */
+  --surface-readonly: #CECECE;       /* disabled/readonly input fill */
+
+  /* Ink tiers. Strong and mid used to be the same #555555, so every component
+   * that reached for the strong tier (page titles, auth headings, field labels,
+   * hover states) got nothing for it and hierarchy rested on size and weight
+   * alone. Strong is now its own darker step of the same neutral: 12.63:1 on
+   * white and 8.22:1 on the amber bar, against mid's 7.46:1 and 4.85:1.
+   * Declared here rather than on :root because core-fe and calendar-fe still
+   * carry their own :root copies at #555555, which would otherwise win. */
+  --ink-strong: #333333;             /* headings, labels, emphasis */
+  --ink-mid: #555555;                /* body ink, secondary labels */
+  --shell-ink-strong: #333333;       /* shell chrome — same tiers, pinned */
+  --shell-ink-mid: #555555;
+}
+
+/* --gray-11 / --gray-a11. Radix declares these on `:root, .light, .light-theme`
+ * and the preset preflight in style.css on `.radix-themes` — both 0,1,0 on the
+ * Theme div, so this rule wins on source order alone: tokens.css must load after
+ * `@radix-ui/themes/styles.css` and `style.css`, as every consumer's import
+ * order already has it. No app declares its own copy of this row any more. */
+.radix-themes {
+  --gray-11: #646464;                /* AA on white (5.92:1), #F6F6F6 (5.48:1) and the gray-3 selected-row wash (4.96:1) */
+
+  /* Solid, not #6F6F6Fe3. The alpha variant is what components actually render
+   * for muted text, and 0xe3 = 0.89 composited against the page gave 4.00:1 on
+   * white and 3.76:1 on #F6F6F6 — under the 4.5:1 AA floor for normal text, on
+   * body copy, table cells, addresses, counts and descriptions across every
+   * page. The accessible value was already defined on the line above and was
+   * not the one being used.
+   *
+   * It shipped because the base token was inspected and the base token is fine:
+   * #6F6F6F passes. The failure only exists after alpha compositing against a
+   * real background, which reading a token value never shows. Check this token
+   * by compositing against the rendered background, not by reading it.
+   *
+   * Darkening the base instead would have needed #616161 to clear 4.5:1 at
+   * alpha 0.89, landing at 4.52:1 — over the line by 0.02. Dropping the alpha
+   * kept the colour and gave 4.65:1/5.02:1.
+   *
+   * #6F6F6F then still failed on the tinted surfaces muted text also sits on:
+   * 4.21:1 on --gray-3 (a selected search result) and 4.37:1 on --gray-a3 (a
+   * selected table row). #646464 is Radix's own stock gray-11, the same
+   * neutral, and clears all of them. contrast-pairs.test.ts measures each. */
+  --gray-a11: #646464;
+}
+
+/* ── Premium amber primary button (ConfirmDialog's Confirm action) ─────────
+ * Color/shadow treatment ONLY — geometry (height, padding, font-size) comes
+ * from the Radix `size` prop so every button stays on the DS scale. */
+.btn-amber-primary {
+  font-family: var(--font-poppins), sans-serif !important;
+  font-weight: 600 !important;
+  box-shadow: none !important;
+}
+
+.btn-amber-primary:focus-visible {
+  outline: 2px solid var(--accent-9) !important;
+  outline-offset: 2px !important;
+  box-shadow: none !important;
+}
+
+/* 0.55 left the label reading roughly 1.3:1 against its own fill — legible as a
+   shape, not as words. Disabled controls are exempt from the contrast rules,
+   but this is the state the login screen *opens* in, so its primary action was
+   effectively invisible until the form validated. Still plainly inactive at
+   0.7, just readable. */
+.btn-amber-primary:disabled {
+  opacity: 0.7 !important;
+}
+
+/* ── Skeleton loading pulse ─────────────────────────────────────────────── */
+
+.skeleton {
+  background: var(--gray-4);
+  animation: skeletonPulse 1.4s ease-in-out infinite;
+}
+
+@keyframes skeletonPulse {
+  0%, 100% { opacity: 0.45; }
+  50%       { opacity: 1; }
+}
+
+/* ── Auth layout — full-page split (AuthCard) ──────────────────────────── */
+
+@media (max-width: 767px) {
+  .auth-card-left {
+    display: none !important;
+  }
+  /* Tightens rather than loosens. This block used to raise the horizontal
+     padding from --space-5 (21.6px) to --space-6 (28.8px), adding 14.4px per
+     side to the card's minimum width at exactly the widths where the login
+     page was already overflowing. */
+  .auth-card-right {
+    padding: var(--space-6) var(--space-4) !important;
+  }
+}
+
+/* Auth art card — white rounded panel on the amber page (BrandPanel). */
+.auth-art-card {
+  background: var(--accent-9);
+  border-radius: var(--radius-5);
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+/* ── OTP input boxes (OtpInput) ────────────────────────────────────────── */
+
+.otp-box.rt-TextFieldRoot {
+  width: var(--space-9);
+  height: var(--space-9);
+  border-radius: var(--radius-5);
+  background: var(--shell-surface);
+  padding: 0;
+}
+
+.otp-box .rt-TextFieldInput {
+  height: 100%;
+  text-align: center;
+  text-indent: 0;
+  color: var(--shell-ink-strong);
+  font-family: var(--font-poppins), sans-serif;
+  font-size: var(--font-size-6);
+  font-weight: 600;
+  padding: 0;
+  line-height: normal;
+}
+
+.otp-box.rt-TextFieldRoot:where(:has(.rt-TextFieldInput:focus)) {
+  box-shadow: 0 0 0 1px var(--gray-6), 0 0 0 3px rgba(85, 85, 85, 0.10);
+}
+
+/* ── Underlined ink links on amber (OtpVerifyStep's "Use a Different Email") ── */
+
+.auth-underline-link {
+  color: var(--ink-mid);
+  font-family: var(--font-poppins), sans-serif;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  font-weight: 500;
+  border-radius: var(--radius-1);
+  transition: color 120ms ease;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  /* With `padding: 0` the height came from the text line box alone — 18px,
+     under the 24px pointer-target minimum. These are real buttons ("Resend
+     code", "Use a different email"), so the inline-text exception does not
+     cover them. */
+  display: inline-flex;
+  align-items: center;
+  min-height: var(--space-6);
+}
+.auth-underline-link:hover { color: var(--ink-strong); }
+.auth-underline-link:focus-visible {
+  outline: 2px solid var(--shell-ink-strong);
+  outline-offset: 2px;
+}
+
+/* ── Shell nav (Sidebar) ────────────────────────────────────────────────── */
+
+/*
+ * shell-nav-item: applied to <Link> (renders as <a>) and action <button>s.
+ * The row is a full-bleed click target; hover/focus visuals land on the inset
+ * .nav-pill surface (inset pill, not a full-width wash).
+ */
+.shell-nav-item {
+  outline: none;        /* suppress default browser outline */
+  -webkit-tap-highlight-color: transparent;
+}
+/* Inactive: neutral gray wash on the pill on hover */
+.shell-nav-item:not([data-active]):hover .nav-pill {
+  background-color: var(--gray-a3);
+}
+/* Active (solid amber pill): deeper amber on hover */
+.shell-nav-item[data-active="true"]:hover .nav-pill {
+  background-color: var(--accent-10);
+}
+.shell-nav-item:focus-visible .nav-pill {
+  outline: 2px solid var(--accent-8);
+  outline-offset: -2px;
+}
+
+.shell-profile-chip:hover {
+  background-color: var(--gray-a3);
+}
+
+/* Sidebar icon button (collapse toggle, close, hamburger) */
+.sidebar-icon-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--space-6);
+  height: var(--space-6);
+  border-radius: var(--radius-2);
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: var(--gray-9);
+  transition: background 100ms ease, color 100ms ease;
+  flex-shrink: 0;
+  outline: none;
+}
+.sidebar-icon-btn:hover {
+  background: var(--gray-a3);
+  color: var(--gray-12);
+}
+.sidebar-icon-btn:focus-visible {
+  outline: 2px solid var(--accent-8);
+  outline-offset: 1px;
+}
+
+/* Sidebar collapse toggle — white square straddling the sidebar's right edge.
+   Position (top/right) set inline. */
+.sidebar-collapse-btn {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--space-5);
+  height: var(--space-5);
+  padding: 0;
+  background: var(--shell-surface);
+  border: 1px solid var(--gray-6);
+  border-radius: var(--radius-2);
+  color: var(--shell-ink-mid);
+  cursor: pointer;
+  transition: background 100ms ease;
+}
+/* The visible square is 21.6px on purpose — it straddles the rail edge and the
+   Figma treatment depends on that size. Pointer-target size is measured on the
+   clickable area rather than the paint, so the hit box is widened to 28.8px
+   here instead of growing the button and pushing it off the edge. */
+.sidebar-collapse-btn::before {
+  content: "";
+  position: absolute;
+  inset: calc((var(--space-6) - var(--space-5)) / -2);
+}
+
+.sidebar-collapse-btn:hover {
+  background: var(--gray-2);
+}
+.sidebar-collapse-btn:focus-visible {
+  outline: 2px solid var(--accent-8);
+  outline-offset: 1px;
+}
+
+/* ── Topbar search trigger ─────────────────────────────────────────────── */
+
+/* White search field on the amber bar — Radix space scale + radius-3. */
+.topbar-search {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: 0 var(--space-2) 0 var(--space-4);
+  height: var(--space-7);
+  flex: 1;
+  max-width: calc(4 * var(--space-9) + var(--space-3));
+  border-radius: var(--radius-3);
+  border: none;
+  background: var(--shell-surface);
+  cursor: pointer;
+  outline: none;
+  flex-shrink: 1;
+  /* No floor. It used to be `calc(3 * var(--space-8))` (129.6px), which the
+     pill refused to shrink past — so on a 320px bar, once the hamburger,
+     breadcrumb and bell were placed, the pill was painted 93px on top of the
+     breadcrumb text. Below 500px it collapses to an icon instead (see the
+     media query below), so it needs no minimum here. */
+  min-width: 0;
+}
+.topbar-search:focus-visible {
+  outline: 2px solid var(--shell-ink-strong);
+  outline-offset: 2px;
+}
+.topbar-search-placeholder {
+  font-family: var(--font-poppins), sans-serif;
+  font-size: var(--font-size-2);
+  /* Fixed — the pill is pinned white regardless of appearance. #8b8d98 was the
+     cool gray's step 9, a background step, at 3.30:1; this is step 11 of the
+     same hue, 5.94:1. */
+  color: #60646c;
+  flex: 1;
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  /* Without this the label was cut mid-word — "Search for so". */
+  text-overflow: ellipsis;
+}
+
+/* Phone widths: there is no room for a search field beside a breadcrumb, so
+   the pill becomes a square icon button matching the bell. The button keeps
+   its accessible name, so nothing changes for a screen reader. */
+@media (max-width: 499px) {
+  .topbar-search {
+    flex: 0 0 var(--space-7);
+    width: var(--space-7);
+    padding: 0;
+    justify-content: center;
+  }
+  .topbar-search-placeholder {
+    display: none;
+  }
+}
+
+/* Topbar breadcrumb parent segment — clickable back to the section landing
+   page; underline on hover signals it's a link, not just a label. */
+.topbar-breadcrumb-link:hover {
+  text-decoration: underline;
+}
+.topbar-breadcrumb-link:focus-visible {
+  outline: 2px solid var(--shell-ink-strong);
+  outline-offset: 2px;
+}
+
+/* Bell (and future topbar actions): matches .topbar-search height and radius. */
+.topbar-icon-circle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--space-7);
+  height: var(--space-7);
+  border-radius: var(--radius-3);
+  border: none;
+  background: var(--shell-surface);
+  color: var(--shell-ink-strong);
+  cursor: pointer;
+  flex-shrink: 0;
+  outline: none;
+  padding: 0;
+}
+.topbar-icon-circle:focus-visible {
+  outline: 2px solid var(--shell-ink-strong);
+  outline-offset: 2px;
+}
+.topbar-icon-circle:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+.topbar-icon-circle:disabled:hover {
+  background: var(--shell-surface);
+}
+
+/* ── Search result items ───────────────────────────────────────────────── */
+
+.search-result-item {
+  transition: background 80ms ease;
+  font-family: var(--font-poppins), sans-serif;
+  outline: none;
+}
+.search-result-item:focus-visible {
+  outline: 2px solid var(--accent-8);
+  outline-offset: -2px;
+}
+
+/* Search overlay query field — body size matches Radix Text size 2 */
+.search-overlay-input {
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: var(--font-poppins);
+  font-size: var(--font-size-2);
+  color: var(--gray-12);
+  line-height: 1;
+}
+
+/* ── Sentry-style data density foundation ──────────────────────────────── */
+
+/* Monospace for IDs, timestamps, version strings, error codes */
+.data-mono {
+  font-family: ui-monospace, "SF Mono", "Cascadia Code", "Fira Code", monospace;
+  font-size: var(--font-size-1);
+  letter-spacing: 0;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Dense data row hover (DataTableRow) */
+.data-table-row:hover {
+  background: var(--gray-a2);
+}
+
+/* Caps eyebrow / section label, applied as `<Text className="ds-section-label">`
+ * for DataTableRow column headers. gray-11 (Radix accessible muted text) for
+ * legible low-contrast labels. */
+.ds-section-label {
+  font-size: var(--font-size-1);
+  font-weight: 600;
+  line-height: 1.4;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  color: var(--gray-11);
+  /* letter-spacing visually shifts the first glyph right of the element's
+   * own left edge (browsers apply tracking before AND after each
+   * character, not just after) — table headers using this class then sit
+   * out of alignment with plain-text cells below them in the same grid
+   * column. Pull it back by the same amount so the glyph's visible left
+   * edge lines up with the box edge, matching sibling cells. */
+  display: inline-block;
+  margin-inline-start: calc(-0.07em);
+}
+/* size="2": matches Radix Text size-1 (scale-aware) for the larger calendar
+ * eyebrows, so swapping them in changes nothing but the source of the styles. */
+.ds-section-label[data-size="2"] {
+  font-size: var(--font-size-1);
+}
+
+/* Interactive data row (DataTableRow's onActivate prop): native keyboard
+ * focus affordance, amber ring to match the rest of the app's focus treatment. */
+.data-table-row--interactive {
+  cursor: pointer;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+}
+.data-table-row--interactive:focus-visible {
+  outline: 2px solid var(--accent-8);
+  outline-offset: -2px;
+}
+.data-table-row--selected {
+  background: var(--gray-a3);
+}
+
+/* ── MetricCard ──────────────────────────────────────────────────────────── */
+
+.metric-card-value {
+  font-family: var(--font-poppins);
+  font-size: var(--font-size-6);
+  font-weight: 500;
+  letter-spacing: -0.03em;
+  line-height: 1;
+  color: var(--gray-12);
+  margin: 0 0 var(--space-4);
+}
+
+.metric-card {
+  box-shadow: var(--shadow-card) !important;
+  transition: box-shadow 140ms ease, transform 110ms ease;
+}
+.metric-card:hover {
+  box-shadow:
+    0 2px 4px rgba(0, 0, 0, 0.05),
+    0 4px 14px rgba(0, 0, 0, 0.06) !important;
+  transform: translateY(-1px);
+}
+
+
+/* ── Component classes the library's own components emit ─────────────────── *
+ *
+ * Everything below is rendered by a component in this package, so the rules
+ * belong in the package too. They were absent, which left each consumer to
+ * rediscover the gap and hand-port a copy — the calendar app had already done
+ * so for the provider rows and the add-account tile, while the three calendar
+ * legend/picker rules were simply unstyled everywhere.
+ *
+ * `src/components/emitted-classes.test.ts` fails if a component starts emitting
+ * a class that has no rule here.
+ */
+
+/* Provider choice rows (ConnectProviderList, ConnectProviderRows) */
+.provider-choice {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  width: 100%;
+  min-width: 0;
+  padding: var(--space-4);
+  background: var(--color-panel-solid);
+  border: 1px solid var(--gray-5);
+  border-radius: var(--radius-3);
+  cursor: pointer;
+  text-align: left;
+  font-family: var(--font-poppins), sans-serif;
+  color: inherit;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+  transition: border-color 80ms ease, background 80ms ease, box-shadow 80ms ease;
+}
+
+.provider-choice:hover:not(:disabled) {
+  border-color: var(--accent-8);
+  background: var(--accent-2);
+}
+
+.provider-choice:active:not(:disabled) {
+  border-color: var(--accent-9);
+  background: var(--accent-3);
+}
+
+.provider-choice:focus-visible {
+  outline: 2px solid var(--accent-8);
+  outline-offset: 2px;
+}
+
+.provider-choice[data-connecting="true"] {
+  border-color: var(--accent-8);
+  background: var(--accent-2);
+  cursor: progress;
+}
+
+.provider-choice:disabled:not([data-connecting="true"]) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.provider-choice__copy {
+  flex: 1 1 0;
+  min-width: 0;
+  overflow: hidden;
+}
+.provider-choice__chevron {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--space-5);
+  height: var(--space-5);
+  margin-left: var(--space-2);
+  color: var(--gray-9);
+}
+
+/* Add-account tile (AddAccountMenu's tile variant; calendar-fe's "Add Calendar")
+ *
+ * A grid tile, not a button: it sits in the card grid as the last cell, so its
+ * height is the card height (layout.connectedAccountCardH, 54px at 90%), not a
+ * button role's 29px. Squashing it to button height would leave a short cell in
+ * a row of cards and hide the page's onboarding action.
+ *
+ * It used to be `height: 100%`, which gave it no height of its own — each
+ * consumer had to wrap it in a box sized to the cards, and a wrapper of any
+ * other height produced a tile that did not line up with its row. The tile now
+ * owns the card height, and AddAccountMenu.test.tsx fails if the two drift. */
+.connect-account-tile {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  box-sizing: border-box;
+  width: 100%;
+  height: calc(var(--space-9) - var(--space-1));
+  padding: var(--space-3);
+  background: transparent;
+  border: 1px dashed var(--gray-7);
+  border-radius: var(--radius-3);
+  color: var(--gray-10);
+  font-family: var(--font-poppins), sans-serif;
+  font-size: var(--font-size-2);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+  transition: border-color 80ms ease, background 80ms ease, color 80ms ease;
+}
+
+/* Guarded on :not(:disabled), and paired with a :disabled rule — the tile is a
+ * <button> the calendar app disables while a connect popup is already open, and
+ * the reference's bare :hover gave a dead control full hover feedback. */
+.connect-account-tile:hover:not(:disabled) {
+  border-color: var(--accent-8);
+  background: var(--accent-2);
+  color: var(--gray-12);
+}
+
+.connect-account-tile:disabled {
+  opacity: 0.55;
+  cursor: default;
+}
+
+.connect-account-tile:focus-visible {
+  outline: 2px solid var(--accent-8);
+  outline-offset: 2px;
+}
+
+/* Card title button (AccountCard, ConnectedAccountCard). A clickable card can't
+ * itself be role="button" when its kebab sits inside it — axe nested-interactive.
+ * The card keeps the mouse click; the title is the keyboard control, styled to
+ * read as the plain text it replaces. */
+.card-title-button {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  max-width: 100%;
+  min-height: var(--space-6);
+  padding: 0;
+  background: none;
+  border: none;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  outline: none;
+}
+
+.card-title-button:focus-visible {
+  outline: 2px solid var(--accent-8);
+  outline-offset: 2px;
+  border-radius: var(--radius-1);
+}
+
+/* "Or" divider (AuthCard consumers) */
+.auth-divider {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  margin: var(--space-5) 0;
+}
+
+.auth-divider::before,
+.auth-divider::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: var(--gray-6); /* same hairline as TextField / social-login button borders on the white card */
+}
+
+/* Auth CTA geometry (AuthCard consumers) */
+.btn-auth-cta {
+  width: 100%;
+  border-radius: var(--radius-3) !important;
+  font-family: var(--font-poppins), sans-serif !important;
+  font-size: var(--font-size-3) !important;
+  font-weight: 600 !important;
+}
+
+/* Large auth field label (AuthCard consumers) */
+.field-label-lg {
+  display: block;
+  font-family: var(--font-poppins), sans-serif;
+  font-size: var(--font-size-2);
+  font-weight: 600;
+  color: var(--ink-strong);
+  letter-spacing: 0em;
+  margin-bottom: var(--space-2);
+  cursor: default;
+  user-select: none;
+}
+
+/* Merged-view legend rows (CalendarMergedView) */
+.calendar-legend-account-row:hover,
+.calendar-legend-row:hover {
+  background: var(--gray-a3);
+}
+
+/* Calendar picker rows (ImportCalendarsDialog) */
+.calendar-picker-row {
+  border: 1px solid var(--gray-5);
+  border-radius: var(--radius-3);
+  background: var(--color-panel-solid);
+  transition: border-color 80ms ease, background 80ms ease;
+}
+
+.calendar-picker-row:hover {
+  border-color: var(--accent-8);
+  background: var(--accent-2);
+}
+
+.calendar-picker-row:has(:focus-visible) {
+  outline: 2px solid var(--accent-8);
+  outline-offset: 2px;
+}
+
+.calendar-picker-row :focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+
+.calendar-picker-row[data-selected="true"] {
+  border-color: var(--accent-8);
+  background: var(--accent-2);
+}
+
+.calendar-picker-row[data-disabled="true"] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.calendar-picker-row[data-disabled="true"]:hover {
+  border-color: var(--gray-5);
+  background: var(--color-panel-solid);
+}
+
+/* ── Wizard stepper dividers (WizardStepper) ───────────────────────────── */
+
+/* Matched on role + label rather than a class: the component emits no class of
+   its own, and `emitted-classes.test.ts` pairs every className literal with a
+   rule here, so introducing one purely for a divider would mean carrying it in
+   both places for no gain.
+
+   The segments wrap to a column when they no longer fit three abreast, and a
+   right-hand rule on a full-width row reads as a stray mark — so below the
+   width where that happens the divider becomes a bottom rule. The breakpoint
+   approximates the wrap point: the stepper sits inside the page column, so the
+   exact width it wraps at depends on the shell around it. */
+[role="list"][aria-label="Wizard progress"] > [role="listitem"]:not(:last-child) {
+  border-right: 1px solid var(--gray-5);
+}
+
+@media (max-width: 699px) {
+  [role="list"][aria-label="Wizard progress"] > [role="listitem"]:not(:last-child) {
+    border-right: none;
+    border-bottom: 1px solid var(--gray-5);
+  }
+}
+
+/* Phone widths: the breadcrumb section and its separator give way to the page
+   title.
+   Both carry flexShrink: 0, so at 375px the whole squeeze landed on the <h1> —
+   measured at 53px against a 67px title, ellipsised on every admin page while
+   "Admin Portal /" beside it stayed whole. The page title is the primary
+   orientation cue and the one thing the sidebar does not already show, so it is
+   the segment that should survive.
+   Same 499px breakpoint the search pill collapses at, so the row changes shape
+   once rather than twice. */
+@media (max-width: 499px) {
+  .topbar-breadcrumb-link,
+  .topbar-breadcrumb-sep {
+    display: none;
+  }
+}