/* styles/phone-admin.css — the PHONE Admin page (6 Oct 2026, phone page group 5; Hugo's phone mockup 18-admin;
   src/PhoneAdmin.jsx). Rebuilt to the mockup's MEASURED geometry (phone-specs/18-admin.spec.md, CSS px at 412 wide):
   the header and project band of mockup 18 (a 56px bar: an amber-glass plate round the menu, a 26px wordmark, three
   37px glass discs; then the project as a dark glass pill, PROJECT over the 19px title), the page's own ADMIN
   heading, ONE glass tab card (People · Roles & permissions · Integrations over All accounts | System, the active
   tab amber with a 4.5px gold underline), then the cards: PEOPLE IN THIS PROJECT (one 142px card per person),
   ADD A PERSON WITH AN ACCOUNT and INVITE SOMEONE NEW (28px fields, 32px amber buttons), and mockup 18's 58px
   bottom bar. ONE scrolling page (spec 18): the heading + tabs scroll away with the cards; the page ends 7.5px
   above the nav, as the mockup's second panel does.
   The other tabs reuse the desktop panels, restyled under .pad-desk so they fit a 360px phone.
   - Phone tier only: every rule sits under body[data-ui-tier="s"] and names a .pad- class (the header / band / bar
     rules are scoped to this page with :has(.pad-page)).
   - Tokens only (no hex / rgb / hsl). Corners from the phone scale only (--pk-radius-*; circles 50%).
   - VISUAL sizes are the mockup's (text 9-15px as drawn); every control keeps a 40px TAP area (a transparent
     top/bottom border with an equal negative margin, or an invisible ::before hit area). */

body[data-ui-tier="s"] .pad-page {
  --pad-field: color-mix(in srgb, var(--card-bg-solid) 78%, var(--bg));         /* the selects + inputs */
  --pad-field-rim: color-mix(in srgb, var(--ink) 24%, transparent);
  --pad-inner: color-mix(in srgb, var(--ink) 2.5%, transparent);                   /* a person card: one step lighter */
  --pad-line: color-mix(in srgb, var(--ink) 13%, transparent);
  --pad-label: color-mix(in srgb, var(--ink) 40%, var(--ink-muted));
  --pad-red: var(--danger);
  --pad-gold: color-mix(in srgb, var(--status-warn) 50%, var(--ink));            /* the active tab's word */
  --pad-amber-hi: color-mix(in srgb, var(--status-warn) 65%, var(--ink));        /* the primary buttons' gradient */
  --pad-amber-lo: color-mix(in srgb, var(--accent) 72%, var(--status-warn));
  --pad-on-amber: color-mix(in srgb, var(--card-bg-solid) 55%, var(--black));
  --pad-ok-fill: color-mix(in srgb, var(--chart-ok) 34%, var(--card-bg-solid));
  --pad-ok-rim: color-mix(in srgb, var(--chart-ok) 78%, transparent);
  /* the shell's bar stays; the scroller under it holds the heading, the tabs and the cards */
  overflow: hidden; padding-bottom: 0;
}
/* mockup 18's light (7 Oct, measured): the white text NEUTRAL (the skin's ink is cream), the small tracked labels a cool
   pale slate, the words on the amber buttons navy-black. Glass family only: a pale skin keeps its own ink. */
body[data-ui-tier="s"][data-skin-family="glass"] .pad-page {
  --ink: color-mix(in srgb, var(--white) 90%, var(--ink-muted));
  --pad-label: color-mix(in srgb, var(--white) 55%, color-mix(in srgb, var(--blue-5, var(--ink-muted)) 55%, var(--ink-muted)));
  --pad-on-amber: oklch(from var(--card-bg-solid) calc(l - 0.12) calc(c * 1.4) h);
}
body[data-ui-tier="s"] .pad-page > .pk-page-body { flex: 1 1 auto; min-height: 0; gap: 0; padding: 0; }
body[data-ui-tier="s"] .pad-top { flex: 0 0 auto; padding: 0; margin-bottom: 7px; }
body[data-ui-tier="s"] .pad-scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: 0 17.5px 7.5px;
}
body[data-ui-tier="s"] .pad-body { display: flex; flex-direction: column; gap: 8.7px; min-width: 0; }

/* ════════ THE ADMIN HEADING + THE TAB CARD (they scroll with the page) ════════ */
body[data-ui-tier="s"] .pad-title {
  margin: 0 0 0 3px; font-family: var(--font-body); font-size: 19px; font-weight: 800; line-height: 1; letter-spacing: -0.037em;
  text-transform: uppercase; color: var(--ink);
  text-shadow: 0 1px 6px color-mix(in srgb, var(--black) 55%, transparent);   /* white on a bright photo: the mockup's contrast */
}
body[data-ui-tier="s"] .pad-tabs { margin-top: 7.5px; padding: 0; display: flex; flex-direction: column; border-radius: var(--pk-radius-card); }
/* the tab card: the mockup's dark glass (#282d30 over the sunset) - denser than the shell's light glass */
body[data-ui-tier="s"] .pad-tabs.shl-glass { background: color-mix(in srgb, var(--card-bg-solid) 92%, transparent); }
body[data-ui-tier="s"] .pad-tabs-row { position: relative; display: flex; align-items: center; min-width: 0; }
body[data-ui-tier="s"] .pad-tabs-row--1 { height: 37px; padding: 0 10.2px 0 12.1px; }
body[data-ui-tier="s"] .pad-tabs-row--2 { height: 35.3px; padding: 0 10.2px 0 12.1px; border-top: 1px solid var(--pad-line); }
body[data-ui-tier="s"] .pad-tab {
  position: relative; flex: 1 1 0; min-width: 0; min-height: 0; height: 40px; padding: 0; margin: -1.5px 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--ink);
  font-family: var(--font-body); font-size: 12.5px; font-weight: 400; letter-spacing: -0.034em; line-height: 1;
  -webkit-tap-highlight-color: transparent; cursor: pointer;
}
/* 40px to tap: the buttons overhang their 37 / 35px rows (the row is what you see) */
body[data-ui-tier="s"] .pad-tabs-row--2 .pad-tab { margin: -2.35px 0; }
/* the mockup's 73 | 186 | the rest at 412; on a narrower phone the first two give way and "Integrations" keeps its words */
body[data-ui-tier="s"] .pad-tabs-row--1 .pad-tab:nth-child(1) { flex: 0 1 73.3px; }
body[data-ui-tier="s"] .pad-tabs-row--1 .pad-tab:nth-child(2) { flex: 0 1 186.4px; }
body[data-ui-tier="s"] .pad-tabs-row--1 .pad-tab:nth-child(3) { flex: 1 0 auto; }
body[data-ui-tier="s"] .pad-tabs-row--2 .pad-tab { flex: 1 1 0; }
body[data-ui-tier="s"] .pad-tabs-row--2 .pad-tab:first-child { flex: 0 0 194.5px; }
body[data-ui-tier="s"] .pad-tabs-split { flex: 0 0 1px; align-self: center; height: 25.5px; background: var(--pad-line); }
body[data-ui-tier="s"] .pad-tab-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-top: 1px; }
body[data-ui-tier="s"] .pad-tabs-row--1 .pad-tab:nth-child(1) .pad-tab-label { transform: translateX(1.6px); }
body[data-ui-tier="s"] .pad-tabs-row--1 .pad-tab:nth-child(3) { letter-spacing: -0.027em; }
body[data-ui-tier="s"] .pad-tabs-row--2 .pad-tab:first-child .pad-tab-label { transform: translateX(1.8px); }
body[data-ui-tier="s"] .pad-tabs-row--2 .pad-tab:last-child { letter-spacing: -0.07em; }
body[data-ui-tier="s"] .pad-tabs-row--2 .pad-tab:last-child .pad-tab-label { transform: translateX(-7px); }
body[data-ui-tier="s"] .pad-tab-bar { display: none; }
body[data-ui-tier="s"] .pad-tab.is-active { color: var(--pad-gold); font-weight: var(--fw-med); font-size: 13.2px; letter-spacing: -0.063em; }
body[data-ui-tier="s"] .pad-tab.is-active .pad-tab-bar {
  display: block; position: absolute; left: 0; right: 0; bottom: 2.1px; height: 4.5px; border-radius: var(--pk-radius-small);
  background: linear-gradient(90deg, color-mix(in srgb, var(--status-warn) 88%, var(--ink)), var(--status-warn));
}
body[data-ui-tier="s"] .pad-tab:active { background: color-mix(in srgb, var(--ink) 6%, transparent); }

/* ════════ CARDS ════════ */
body[data-ui-tier="s"] .pad-card {
  display: flex; flex-direction: column; gap: 0; padding: 0; margin: 0; border-radius: var(--pk-radius-card);
  background: color-mix(in srgb, color-mix(in srgb, var(--card-bg-solid) 96%, var(--ink)) 86%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 9%, transparent);
}
body[data-ui-tier="s"] .pad-card-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; padding: 10px 17.2px 0 19.8px; height: 23.1px; box-sizing: border-box;
}
body[data-ui-tier="s"] .pad-card-title {
  margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-body); font-size: 11px; font-weight: var(--fw-bold); letter-spacing: 0.152em; text-transform: uppercase; line-height: 1; color: var(--ink);
}
body[data-ui-tier="s"] .pad-card-meta { flex: 0 0 auto; font-size: 11.8px; line-height: 1; color: color-mix(in srgb, var(--ink) 45%, var(--ink-muted)); white-space: nowrap; }
body[data-ui-tier="s"] .pad-empty { min-height: 44px; display: flex; align-items: center; padding: 0 19.8px; font-size: 12.5px; color: var(--ink-muted); }
body[data-ui-tier="s"] .pad-alert { padding: 10px 12px; font-size: 12.5px; color: var(--pad-red); border-color: color-mix(in srgb, var(--danger) 55%, transparent); }
body[data-ui-tier="s"] .pad-note { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; }
body[data-ui-tier="s"] .pad-note-line { margin: 0; font-size: 12.5px; line-height: 1.4; overflow-wrap: anywhere; }
body[data-ui-tier="s"] .pad-code { font-family: var(--font-body); font-weight: var(--fw-bold); letter-spacing: var(--track-04); }

/* the small tracked labels (JOINED, LAST LOGIN, ROLE HERE: 9px; the form labels: 10px) */
body[data-ui-tier="s"] .pad-k {
  display: block; font-size: 9px; font-weight: var(--fw-semi); letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--pad-label); line-height: 1; white-space: nowrap;
}

/* ════════ PEOPLE IN THIS PROJECT: one 142px card per person, 11px in from the section card ════════ */
body[data-ui-tier="s"] .pad-card--people { padding-bottom: 8px; }
body[data-ui-tier="s"] .pad-card--people .pad-card-head { margin-bottom: 10.1px; }
body[data-ui-tier="s"] .pad-person {
  position: relative; display: block; min-width: 0; height: 142.5px; box-sizing: border-box; margin: 0 11px 11.5px;
  border-radius: var(--pk-radius-card); background: var(--pad-inner); box-shadow: inset 0 0 0 1px var(--pad-line);
}
body[data-ui-tier="s"] .pad-person:last-child { margin-bottom: 0; }
body[data-ui-tier="s"] .pad-person.is-suspended { opacity: 0.72; }
body[data-ui-tier="s"] .pad-person-name {
  position: absolute; left: 14px; right: 14px; top: 2.4px; font-size: 14.6px; font-weight: var(--fw-bold); letter-spacing: -0.02em; line-height: 1.2; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body[data-ui-tier="s"] .pad-person-email {
  position: absolute; left: 14.7px; right: 100px; top: 21.6px; font-size: 11.9px; line-height: 1.25; color: color-mix(in srgb, var(--ink) 55%, var(--ink-muted));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body[data-ui-tier="s"] .pad-person-meta { position: absolute; left: 14.7px; right: 14px; top: 48px; height: 26px; display: flex; align-items: flex-start; min-width: 0; }
body[data-ui-tier="s"] .pad-meta-cell { display: flex; flex-direction: column; gap: 3.6px; min-width: 0; flex: 0 0 auto; }
body[data-ui-tier="s"] .pad-meta-cell:first-child { width: 96.3px; }
body[data-ui-tier="s"] .pad-vrule { flex: 0 0 1px; width: 1px; height: 23.6px; margin: 0.9px 18.7px 0 0; background: color-mix(in srgb, var(--ink) 30%, transparent); }
body[data-ui-tier="s"] .pad-person-meta .pad-k { font-size: 8.7px; letter-spacing: 0.133em; }
body[data-ui-tier="s"] .pad-v { font-size: 11.55px; line-height: 1.15; color: color-mix(in srgb, var(--ink) 75%, var(--ink-muted)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-ui-tier="s"] .pad-pill {
  margin-left: auto; margin-top: -1.7px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  width: 77.2px; height: 24.9px; padding: 0; border-radius: var(--pk-radius-chip);
  font-size: 9.1px; font-weight: var(--fw-semi); letter-spacing: 0.1em; text-transform: uppercase; line-height: 1;
}
body[data-ui-tier="s"] .pad-pill.is-ok {
  color: var(--ink); background: var(--pad-ok-fill); border: 1.5px solid var(--pad-ok-rim);
  box-shadow: 0 0 6px color-mix(in srgb, var(--chart-ok) 22%, transparent);
}
body[data-ui-tier="s"] .pad-pill.is-bad { color: var(--pad-red); background: color-mix(in srgb, var(--danger) 18%, var(--card-bg-solid)); border: 1.5px solid color-mix(in srgb, var(--danger) 70%, transparent); }
body[data-ui-tier="s"] .pad-person-role { position: absolute; left: 15.3px; right: 8px; top: 77.1px; height: 27.4px; display: flex; align-items: center; gap: 0; min-width: 0; }
body[data-ui-tier="s"] .pad-person-role > .pad-k { flex: 0 0 75.9px; width: 75.9px; letter-spacing: 0.129em; }
body[data-ui-tier="s"] .pad-person-role > .pad-select-wrap { flex: 1 1 auto; min-width: 0; }
body[data-ui-tier="s"] .pad-person > .pad-btn--danger { position: absolute; left: 8.3px; right: 6.7px; width: auto; }
body[data-ui-tier="s"] .pad-temp { min-width: 0; font-size: 12px; color: var(--ink-muted); }
body[data-ui-tier="s"] .pad-person:has(.pad-temp) { height: auto; min-height: 142.5px; padding-bottom: 8px; }
body[data-ui-tier="s"] .pad-person:has(.pad-temp) .pad-temp { position: relative; margin: 142px 14px 0; }
body[data-ui-tier="s"] .pad-temp .admin-account-pending { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; padding: 0; min-width: 0; }
body[data-ui-tier="s"] .pad-temp .admin-account-pending > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
body[data-ui-tier="s"] .pad-temp .admin-account-pending-btn { min-height: 40px; padding: 0 12px; border-radius: var(--pk-radius-control); font-size: 12.5px; }
body[data-ui-tier="s"] .pad-temp .admin-reset-link { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; max-width: 100%; }

/* ════════ ADD A PERSON · INVITE SOMEONE NEW: 13px tracked titles, 10px labels, 28px fields, 32px amber buttons ════════ */
body[data-ui-tier="s"] .pad-form { padding: 9.3px 16.3px 0 17.9px; }
body[data-ui-tier="s"] .pad-form > .pad-card-title { font-size: 12px; letter-spacing: 0.119em; margin: 0 0 0 1.3px; height: 13px; }
body[data-ui-tier="s"] .pad-field { display: flex; flex-direction: column; gap: 0; min-width: 0; margin: 0; }
body[data-ui-tier="s"] .pad-field > .pad-k { font-size: 9.1px; letter-spacing: 0.16em; margin: 0 0 7.2px 0.2px; }
body[data-ui-tier="s"] .pad-form--add > .pad-card-title { margin-bottom: 14.6px; }
body[data-ui-tier="s"] .pad-form--add .pad-field + .pad-field { margin-top: 10.5px; }
body[data-ui-tier="s"] .pad-form--add .pad-help { margin-top: 3.6px; }
body[data-ui-tier="s"] .pad-form--invite > .pad-card-title { margin-bottom: 11.3px; }
body[data-ui-tier="s"] .pad-form--invite .pad-field + .pad-field { margin-top: 10.3px; }
body[data-ui-tier="s"] .pad-form--invite .pad-help { margin-top: 3.3px; }
body[data-ui-tier="s"] .pad-select-wrap { position: relative; display: block; min-width: 0; }
body[data-ui-tier="s"] .pad-select,
body[data-ui-tier="s"] .pad-input {
  display: block; width: 100%; min-width: 0; height: 40px; box-sizing: border-box; margin: -6px 0;
  padding: 0 12px 0 11.2px; border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 6px); border: 6px solid transparent; border-left-width: 0; border-right-width: 0;
  background: var(--pad-field); background-clip: padding-box; box-shadow: inset 0 0 0 1px var(--pad-field-rim); color: var(--ink);
  font-family: var(--font-body); font-size: 13px; letter-spacing: -0.04em; line-height: 1; outline: none;
}
body[data-ui-tier="s"] .pad-person-role .pad-select { height: 40px; padding-left: 11.5px; font-size: 11.9px; letter-spacing: 0; }
body[data-ui-tier="s"] .pad-select {
  -webkit-appearance: none; appearance: none; padding-right: 34px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; cursor: pointer;
}
body[data-ui-tier="s"] .pad-input { font-size: 12.45px; }
body[data-ui-tier="s"] .pad-input::placeholder { color: color-mix(in srgb, var(--ink-muted) 80%, var(--blue-5)); }
body[data-ui-tier="s"] .pad-select:focus-visible,
body[data-ui-tier="s"] .pad-input:focus { box-shadow: inset 0 0 0 1px var(--accent); }
body[data-ui-tier="s"] .pad-select:disabled,
body[data-ui-tier="s"] .pad-input:disabled { opacity: 1; color: color-mix(in srgb, var(--ink) 90%, transparent); cursor: default; }
body[data-ui-tier="s"] .pad-select-chev {
  position: absolute; right: 5.6px; top: 50%; transform: translateY(-50%); pointer-events: none;
  display: grid; place-items: center; color: var(--ink);
}
body[data-ui-tier="s"] .pad-select-chev svg { width: 18.2px; height: 18.2px; stroke-width: 1.8; }
body[data-ui-tier="s"] .pad-select-wrap.is-disabled .pad-select-chev { opacity: 0.7; }

body[data-ui-tier="s"] .pad-btn {
  display: flex; align-items: center; justify-content: center; width: 100%; box-sizing: border-box; height: 40px; min-height: 0; margin: -4px 0; padding: 0 16px;
  border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 4px); border: 4px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box;
  font-family: var(--font-body); font-size: 12.9px; font-weight: var(--fw-semi); letter-spacing: 0; line-height: 1;
  box-shadow: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .pad-btn--primary {
  width: calc(100% + 1.3px); margin-left: -0.6px; margin-top: 1.6px;
  color: var(--pad-on-amber); font-weight: var(--fw-bold);
  background: linear-gradient(180deg, var(--pad-amber-hi), var(--pad-amber-lo)) padding-box;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 40%, transparent);
}
body[data-ui-tier="s"] .pad-form--add .pad-btn--primary { height: 40.5px; }
body[data-ui-tier="s"] .pad-btn--primary:disabled { opacity: 1; cursor: default; }
/* not available here at all (Railway's read-only access, nobody to add): the mockup's full amber - the help line
   under the button says why it does nothing (a faded amber read as a broken button) */
body[data-ui-tier="s"] .pad-btn--primary.is-off:disabled { opacity: 1; }
body[data-ui-tier="s"] .pad-btn--danger {
  height: 40.8px; border-width: 7px 0; margin: 0; border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 7px);
  color: var(--pad-red); font-size: 11.8px; font-weight: var(--fw-med);
  background: color-mix(in srgb, var(--black) 9%, transparent) padding-box; box-shadow: inset 0 0 0 1.5px var(--pad-red);
}
body[data-ui-tier="s"] .pad-person > .pad-btn--danger { top: calc(109.7px - 7px); }
body[data-ui-tier="s"] .pad-btn--danger:disabled { opacity: 1; cursor: default; }
body[data-ui-tier="s"] .pad-btn--ghost { color: var(--ink); background: transparent; box-shadow: inset 0 0 0 1px var(--pad-line); }
body[data-ui-tier="s"] .pad-btn:active:not(:disabled) { filter: brightness(1.08); }
body[data-ui-tier="s"] .pad-help {
  margin: 0; min-height: 33px; padding: 0 0 0 1.9px; font-size: 11.8px; font-style: italic; letter-spacing: -0.015em; line-height: 16.5px;
  color: color-mix(in srgb, var(--ink) 40%, var(--ink-muted));
}
body[data-ui-tier="s"] .pad-form--invite .pad-help { min-height: 0; padding-bottom: 9px; }
body[data-ui-tier="s"] .pad-form--add { padding-bottom: 6.5px; }

/* the styled Remove confirm fits a phone */
body[data-ui-tier="s"] .pad-confirm .confirm-delete-modal { width: calc(100vw - 32px); max-width: 420px; box-sizing: border-box; }
body[data-ui-tier="s"] .pad-confirm .confirm-delete-actions button { min-height: 44px; }

/* ════════ THE OTHER TABS: the desktop panels, restyled to fit ════════ */
body[data-ui-tier="s"] .pad-desk { display: flex; flex-direction: column; gap: var(--pk-3); min-width: 0; }
body[data-ui-tier="s"] .pad-desk .admin-section {
  margin: 0; padding: 14px; min-width: 0; max-width: 100%; box-sizing: border-box;
  border-radius: var(--pk-radius-card); background: var(--shl-glass); border: 1px solid var(--shl-line);
  backdrop-filter: blur(18px) saturate(1.1); -webkit-backdrop-filter: blur(18px) saturate(1.1);
  overflow-x: auto; overflow-y: visible;
}
body[data-ui-tier="s"] .pad-desk .admin-section-head { flex-wrap: wrap; gap: 4px 12px; }
body[data-ui-tier="s"] .pad-desk button { min-height: 40px; }
body[data-ui-tier="s"] .pad-desk select,
body[data-ui-tier="s"] .pad-desk input:not([type="checkbox"]):not([type="radio"]) { min-height: 40px; max-width: 100%; }

/* All accounts: each desktop table row becomes a stacked card (name + status, email, project chips, joined |
   last login, actions, the temp-password line); the column head is not needed */
body[data-ui-tier="s"] .pad-desk .admin-table--accounts,
body[data-ui-tier="s"] .pad-desk .admin-table--roles { display: flex; flex-direction: column; gap: 10px; overflow: visible; }
body[data-ui-tier="s"] .pad-desk .admin-table--accounts .admin-table-head,
body[data-ui-tier="s"] .pad-desk .admin-table--roles .admin-table-head { display: none; }
body[data-ui-tier="s"] .pad-desk .admin-table--accounts .admin-table-row {
  min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px 12px; align-items: center;
  grid-template-areas: "name name status" "email email email" "chips chips chips" "joined last last" "act act act" "pend pend pend";
  padding: 12px; border-radius: var(--pk-radius-row); font-size: var(--fs-14); transform: none;
}
body[data-ui-tier="s"] .pad-desk .admin-table--accounts .admin-table-row:hover { transform: none; }
body[data-ui-tier="s"] .pad-desk .admin-table--accounts .admin-cell-name {
  grid-area: name; min-width: 0; font-size: var(--fs-17); font-weight: var(--fw-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body[data-ui-tier="s"] .pad-desk .admin-table--accounts .admin-cell-email {
  grid-area: email; min-width: 0; font-size: var(--fs-14); color: color-mix(in srgb, var(--ink) 84%, transparent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body[data-ui-tier="s"] .pad-desk .admin-table--accounts .admin-proj-chips { grid-area: chips; min-width: 0; min-height: 40px; align-content: center; }
body[data-ui-tier="s"] .pad-desk .admin-table--accounts .admin-proj-chips .admin-invite-project-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-12); }
body[data-ui-tier="s"] .pad-desk .admin-table--accounts .admin-proj-chips + .admin-cell-date { grid-area: joined; }
body[data-ui-tier="s"] .pad-desk .admin-table--accounts .admin-cell-date + .admin-cell-date { grid-area: last; }
body[data-ui-tier="s"] .pad-desk .admin-table--accounts .admin-proj-chips + .admin-cell-date::before { content: "Joined "; color: var(--ink-muted); }
body[data-ui-tier="s"] .pad-desk .admin-table--accounts .admin-cell-date + .admin-cell-date::before { content: "Last login "; color: var(--ink-muted); }
body[data-ui-tier="s"] .pad-desk .admin-table--accounts .admin-cell-date { font-size: var(--fs-13); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
body[data-ui-tier="s"] .pad-desk .admin-table--accounts .admin-status-pill { grid-area: status; justify-self: end; }
body[data-ui-tier="s"] .pad-desk .admin-table--accounts .admin-row-actions { grid-area: act; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; min-width: 0; }
body[data-ui-tier="s"] .pad-desk .admin-table--accounts .admin-row-actions > button { width: 100%; min-width: 0; min-height: 40px; padding: 0 6px; border-radius: var(--pk-radius-control); font-size: var(--fs-13); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-ui-tier="s"] .pad-desk .admin-table--accounts .admin-account-pending { grid-area: pend; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
body[data-ui-tier="s"] .pad-desk .admin-account-pending > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }

/* Roles in this project: order buttons + the name on one line, "works like" + the head count, then Remove */
body[data-ui-tier="s"] .pad-desk .admin-table--roles .admin-table-row {
  min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 10px; align-items: center;
  grid-template-areas: "order name name" "tier tier count" "act act act";
  padding: 10px 12px; border-radius: var(--pk-radius-row); transform: none;
}
body[data-ui-tier="s"] .pad-desk .admin-table--roles .admin-role-order { grid-area: order; gap: 4px; }
body[data-ui-tier="s"] .pad-desk .admin-table--roles .admin-role-move { width: 40px; height: 40px; min-height: 40px; border-radius: var(--pk-radius-control); font-size: var(--fs-16); }
body[data-ui-tier="s"] .pad-desk .admin-table--roles .admin-table-row > input { grid-area: name; width: 100%; min-width: 0; }
body[data-ui-tier="s"] .pad-desk .admin-table--roles .admin-table-row > select { grid-area: tier; width: 100%; min-width: 0; }
body[data-ui-tier="s"] .pad-desk .admin-table--roles .admin-cell-date { grid-area: count; white-space: nowrap; font-size: var(--fs-13); color: var(--ink-muted); }
body[data-ui-tier="s"] .pad-desk .admin-table--roles .admin-row-actions { grid-area: act; }
body[data-ui-tier="s"] .pad-desk .admin-table--roles .admin-row-actions > button { width: 100%; min-height: 40px; border-radius: var(--pk-radius-control); }
body[data-ui-tier="s"] .pad-desk .admin-role-row.is-drop-before::before,
body[data-ui-tier="s"] .pad-desk .admin-role-row.is-drop-after::after { left: 10px; right: 10px; }

/* the closed side drawer's shadow (responsive.css: 26px 0 70px) darkened this page's left ~80px even while the drawer
   is shut (measured: the active pill read 17% darker at x 20 than at x 56); off while closed, as the drawer opens it returns.
   (A shell-wide fix belongs in responsive.css - flagged to the coordinator.) */
body[data-ui-tier="s"]:has(.pad-page):not(.sb-mobile-open) .sidebar { box-shadow: none; }