/*
 * Client Portal, the design components.
 *
 * One file every screen links, so a menu, a table or a button is the
 * same on each. Grey throughout, with colour
 * only where it names someone or something, a person, an account or
 * a role.
 *
 * THE BOX MODEL. A parent owns its padding and the gaps between its
 * children. No component sets a margin on itself, so a component can
 * be dropped into any parent and the parent decides the space.
 */

/* Proxima Nova, from the portfolio's Adobe Fonts web project. */
@import url('https://use.typekit.net/kbe0lok.css');

/* ---------- Tokens ---------- */

:root {
  /* Grey, from the page to the strongest line. */
  --white: #ffffff;
  --grey-50: #fafafa;
  --grey-100: #f4f4f5;
  --grey-150: #ececed;
  --grey-200: #e4e4e7;
  --grey-300: #d4d4d8;
  --grey-500: #71717a;
  --grey-700: #3f3f46;
  --grey-900: #18181b;

  --surface: var(--white);
  --surface-page: var(--grey-50);
  --surface-hover: var(--grey-100);
  --surface-selected: var(--grey-150);
  --surface-pressed: var(--grey-200);
  --line: var(--grey-200);
  --line-strong: var(--grey-300);
  --text: var(--grey-900);
  --text-muted: var(--grey-500);
  --solid: var(--grey-900);
  --on-solid: var(--white);

  /* Space, a 4px scale. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* Type, every size and every box on the 8 point grid, with 4 as the
     half step for fine detail. */
  --font: 'proxima-nova', system-ui, sans-serif;
  --text-xs: 12px;
  --text-sm: 12px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* One radius for every surface and control, cards, buttons,
     selects and menu items, so their corners agree. A smaller one for
     small marks, tags, chips and checkboxes. */
  --radius: 8px;
  --radius-sm: 4px;
  --radius-full: 999px;

  /* Flat. No borders and no shadows, a surface is told from the page
     by its white against the page's grey, and nothing else. */

  /* Colour, from Radix's scales, always the same two steps, step 3 for
     the fill and step 11 for the text, so every tone sits at one
     weight. */
  --indigo-3: #edf2fe;
  --indigo-11: #3a5bc7;
  --grass-3: #e9f6e9;
  --grass-11: #2a7e3b;
  --plum-3: #fbebfb;
  --plum-11: #953ea3;
  --orange-3: #ffefd6;
  --orange-11: #cc4e00;
  --crimson-3: #ffe9f0;
  --crimson-11: #cb1d63;
  --amber-3: #fff7c2;
  --amber-11: #ab6400;
  --violet-3: #f4f0fe;
  --violet-11: #6550b9;
  --blue-3: #e6f4fe;
  --blue-11: #0d74ce;
  --teal-3: #e0f8f3;
  --teal-11: #008573;
  --cyan-3: #def7f9;
  --cyan-11: #107d98;
  --ease: cubic-bezier(0.2, 0, 0.1, 1);

  /* The shell's columns, the app's rail of icons and settings' menu. */
  --rail-width: 64px;
  --nav-width: 224px;
}

/* A tone a mark takes, its fill and its text. */
.tone-indigo { --tone-fill: var(--indigo-3); --tone-text: var(--indigo-11); }
.tone-grass { --tone-fill: var(--grass-3); --tone-text: var(--grass-11); }
.tone-plum { --tone-fill: var(--plum-3); --tone-text: var(--plum-11); }
.tone-orange { --tone-fill: var(--orange-3); --tone-text: var(--orange-11); }
.tone-crimson { --tone-fill: var(--crimson-3); --tone-text: var(--crimson-11); }
.tone-amber { --tone-fill: var(--amber-3); --tone-text: var(--amber-11); }
.tone-violet { --tone-fill: var(--violet-3); --tone-text: var(--violet-11); }
.tone-blue { --tone-fill: var(--blue-3); --tone-text: var(--blue-11); }
.tone-teal { --tone-fill: var(--teal-3); --tone-text: var(--teal-11); }
.tone-cyan { --tone-fill: var(--cyan-3); --tone-text: var(--cyan-11); }
.tone-grey { --tone-fill: var(--surface-selected); --tone-text: var(--text-muted); }

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  font-family: var(--font);
  font-size: var(--text-md);
  line-height: 20px;
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

ul {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

.icon {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--sm {
  width: 16px;
  height: 16px;
}

.icon--xs {
  width: 12px;
  height: 12px;
}

.icon--lg {
  width: 24px;
  height: 24px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Shell ---------- */

/* One menu, the app's or, in settings, settings' own, then the page.
   On a phone, a top bar and the page alone. */
.shell {
  display: grid;
  grid-template-columns: var(--nav-width) minmax(0, 1fr);
  height: 100%;
}

/* In settings the app's menu gives way to settings' own, one menu, as
   most products now do, rather than a second beside it. */
.shell--settings {
  grid-template-columns: var(--nav-width) minmax(0, 1fr);
}

.shell--no-subnav {
  grid-template-columns: var(--rail-width) minmax(0, 1fr);
}

.topbar,
.scrim {
  display: none;
}

/* ---------- Side menu ---------- */

/* Brand, items, then the foot held to the bottom. The menu owns the
   padding and the gaps, its items own none. */
.sidenav {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto auto;
  /* One column that never grows past the menu, so a long email is cut
     short rather than widening it. */
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--space-5);
  min-width: 0;
  padding: var(--space-5) var(--space-3);
  border-right: 1px solid var(--line);
}

.sidenav__spacer {
  min-height: 0;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding-inline: var(--space-3);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

.brand__context {
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--text-muted);
}

.nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nav-foot {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

/* A menu item, 32 tall with 14px text and a 16px icon 8 from its
   label, after shadcn's sidebar. Its highlight is the menu's width
   less the menu's padding, and a long label is cut short inside it. */
.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 32px;
  padding-inline: var(--space-2);
  font-size: var(--text-md);
  color: var(--grey-700);
  white-space: nowrap;
  border-radius: var(--radius);
  transition: background-color 120ms var(--ease);
}

/* The icon a step quieter than its label, until the item is current. */
.nav-item .icon {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
}

.nav-item[aria-current] .icon {
  color: var(--text);
}

.nav-item__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-item:hover {
  background: var(--surface-hover);
}

.nav-item[aria-current] {
  font-weight: var(--weight-semibold);
  color: var(--text);
  background: var(--surface-selected);
}

/* The app's menu as a rail, icons alone, each a square button, their
   labels kept for screen readers and shown as a tooltip. */
.sidenav--rail {
  justify-items: center;
  padding: var(--space-4) var(--space-3);
}

.sidenav--rail .nav-list,
.sidenav--rail .nav-foot {
  gap: var(--space-1);
}

.sidenav--rail .nav-item {
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
}

.sidenav--rail .nav-item__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* The product's mark, at the rail's head. */
.brand-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--on-solid);
  background: var(--solid);
  border-radius: var(--radius);
}

/* The account the app is showing, and the way to switch to another. */
.account-switch {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 40px;
  padding-inline: var(--space-2);
  font-weight: var(--weight-semibold);
  background: var(--surface-hover);
  border-radius: var(--radius);
}

.account-switch__name {
  flex: 1;
  text-align: start;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-switch .icon {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
}

/* Who is signed in, at the foot of every menu, and the way to their
   own options, signing out among them. */
.user {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2);
  text-align: start;
  border-radius: var(--radius);
}

.user:hover {
  background: var(--surface-hover);
}

.user__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.user__name {
  font-weight: var(--weight-medium);
}

.user .icon {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
}

/* ---------- Settings menu ---------- */

.subnav {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-5) var(--space-3);
  border-right: 1px solid var(--line);
}

/* A menu's head, its title, the product's name or settings' with a
   way back, and the button that folds the menu away at its end. */
.subnav__spacer {
  flex: 1;
}

.subnav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-inline: var(--space-1) 0;
}

.subnav__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 32px;
  padding-inline: var(--space-1) var(--space-2);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius);
}

.brand-name {
  display: flex;
  align-items: center;
  height: 32px;
  padding-inline: var(--space-1);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

.subnav__title .icon {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
}

.subnav__title:hover,
.subnav__collapse:hover {
  background: var(--surface-hover);
}

.subnav__collapse .icon {
  width: 16px;
  height: 16px;
}

.subnav__collapse {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--text-muted);
  border-radius: var(--radius);
}

/* A group, its heading and items. Groups after the first are ruled
   off, the rule inside the group's own padding. */
.nav-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nav-group + .nav-group {
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.nav-heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 32px;
  padding-inline: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.06em;
  color: var(--grey-700);
  text-transform: uppercase;
  white-space: nowrap;
}

.nav-heading__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Initials in a small square, a person's profile or an account. */
.tag {
  display: grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
  color: var(--tone-text, var(--text));
  background: var(--tone-fill, var(--surface-selected));
  border-radius: var(--radius-sm);
}

/* ---------- Page ---------- */

.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  min-width: 0;
  padding: var(--space-8) var(--space-10);
  overflow: auto;
  background: var(--surface-page);
}

/* The page's content, held to a readable width, and centred by the
   page so the space either side of it is the same. */
.page__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  width: 100%;
  max-width: 880px;
}

.page__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* The trail is for the phone, where the menu that shows where you are
   is folded away. On a desk the menu says it. */
.breadcrumbs {
  display: none;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.breadcrumbs a:hover {
  color: var(--text);
}

.breadcrumbs [aria-current] {
  font-weight: var(--weight-medium);
  color: var(--text);
}

.page-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: 32px;
}

/* A section, its title, its tools and its table, spaced by itself. */
.section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.section-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: 24px;
}

/* ---------- Toolbar and controls ---------- */

.toolbar {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
}

.toolbar__label {
  align-self: center;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* Takes the room between the filters and the actions, so the
   toolbar, not a child's margin, pushes the actions to the end. */
.toolbar__spacer {
  flex: 1;
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.field__label {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 128px;
  height: 32px;
  padding-inline: var(--space-3) var(--space-2);
  font-size: var(--text-md);
  background: var(--surface);
  border-radius: var(--radius);
}

/* A select in a table cell, the cell's full width, its value on the
   column's edge under the heading. Its arrow shows only under the
   pointer, which is when it says it can be changed. */
.select--quiet {
  width: 100%;
  min-width: 0;
  height: 32px;
  padding-inline: 0;
  cursor: pointer;
  background: transparent;
}

.select--quiet .icon {
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 120ms var(--ease);
}

.select--quiet:hover .icon {
  opacity: 1;
}

.btn[hidden] {
  display: none;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 32px;
  padding-inline: var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  border-radius: var(--radius);
}

.btn--primary {
  color: var(--on-solid);
  background: var(--solid);
}

.btn--primary:hover {
  background: var(--grey-700);
}

/* A button that cannot be used yet, there but quiet, until what it
   waits on is done. */
.btn:disabled {
  cursor: not-allowed;
  opacity: 0.32;
}

.btn--secondary {
  background: var(--surface-selected);
}

.btn--secondary:hover {
  background: var(--surface-pressed);
}

.btn--ghost {
  color: var(--grey-700);
}

.btn--ghost:hover {
  background: var(--surface-hover);
}

/* ---------- Card and table ---------- */

.card {
  background: var(--surface);
  border-radius: var(--radius);
}

/* A table of cards. Its header floats on the page and each row is a
   small card of its own. The table owns the gap between them, each
   row its own inset, the same as the header's so the columns align. */
.table {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.table__row {
  display: grid;
  grid-template-columns: var(--cols);
  align-items: center;
  column-gap: var(--space-4);
  min-height: 64px;
  padding-inline: var(--space-4);
  background: var(--surface);
  border-radius: var(--radius);
}

/* Each table's columns, wide and on a phone. */
.table--members {
  --cols: 32px minmax(0, 1fr) 120px 112px 16px;
}

.table--permissions {
  --cols: minmax(0, 1fr) 136px;
}

.table--entities {
  --cols: 32px minmax(0, 1fr) 160px 16px;
}

.table--services {
  --cols: minmax(0, 1fr) 160px 16px;
}

.table__row--head {
  min-height: 32px;
  font-size: var(--text-sm);
  color: var(--text-muted);
  background: none;
}

/* A row that opens greys a little under the pointer, a little more as
   it is pressed. A slide's played pointer sets data-hover and
   data-press, since a real hover cannot be faked. */
a.table__row {
  transition: background-color 120ms var(--ease);
}

a.table__row:is(:hover, [data-hover]) {
  background: var(--surface-hover);
}

a.table__row:is(:active, [data-press]) {
  background: var(--surface-selected);
}

.sort {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.checkbox {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
}

/* Two lines in a cell, a name and what it belongs to. */
.cell {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cell__secondary {
  overflow: hidden;
  font-size: var(--text-sm);
  line-height: 16px;
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cell--muted {
  color: var(--text-muted);
}

.chevron {
  display: flex;
  justify-self: end;
  color: var(--text-muted);
}

/* ---------- People ---------- */

.avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--tone-text, var(--text));
  background: var(--tone-fill, var(--surface-selected));
  border-radius: var(--radius);
}

/* A small face, beside a name in a line of secondary text. */
.avatar--xs {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
}

/* The firm's staff are grey circles, apart at a glance from the
   client's people, who are coloured squares. */
.avatar--staff {
  border-radius: var(--radius-full);
}

.avatar--lg {
  width: 56px;
  height: 56px;
  font-size: var(--text-lg);
}

/* A role, or any short status, in its tone. */
.badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding-inline: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--tone-text, var(--text));
  white-space: nowrap;
  background: var(--tone-fill, var(--surface-selected));
  border-radius: var(--radius-sm);
}

.chip {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding-inline: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  background: var(--surface-selected);
  border-radius: var(--radius-sm);
}

/* A person at the head of their own page. */
.person {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
}

.person__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}

.person__name {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: 24px;
}

/* ---------- Services ---------- */

/* A service at the head of its own page, what it is and for whom, and
   the advisor who looks after it at the other end. */
.service-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.advisor {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.advisor__text {
  display: flex;
  flex-direction: column;
}

/* Tabs along a page, the current one marked beneath. */
.tabs {
  display: flex;
  gap: var(--space-6);
}

.tab {
  display: flex;
  align-items: center;
  height: 40px;
  color: var(--text-muted);
  white-space: nowrap;
}

.tab:hover {
  color: var(--text);
}

.tab[aria-current] {
  font-weight: var(--weight-semibold);
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--text);
}

/* A service's steps, named up front, top to bottom. The step that is
   live is a card. What is done and what is to come sit on the page,
   quieter, so the one that matters stands out. */
.steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* The folded finished steps, then the rest, as one list. */
.steps-wrap,
.done-steps[open] {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* A plain bar over the steps, named with how many are finished, that
   opens to list them. No tick of its own, so the ticks are the steps'. */
.done-steps__summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 48px;
  padding-inline: var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  list-style: none;
  background: var(--surface-selected);
  border-radius: var(--radius);
}

.done-steps__label {
  flex: 1;
}

.done-steps__count {
  color: var(--text-muted);
}

.done-steps__summary::-webkit-details-marker {
  display: none;
}

.done-steps__summary:hover {
  background: var(--surface-hover);
}

.done-steps__chevron {
  transition: rotate 160ms ease-out;
}

.done-steps[open] .done-steps__chevron {
  rotate: 180deg;
}

.step {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-3);
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
}

.step__icon {
  display: flex;
}

.step[data-state='done'] .step__icon {
  color: var(--grass-11);
}

.step[data-state='upcoming'] {
  color: var(--text-muted);
}

.step[data-state='working'] .step__icon {
  color: var(--text-muted);
}

/* Waiting on the client is information for them, so it takes info's
   blue. */
.step[data-state='waiting'] .step__icon {
  color: var(--blue-11);
}

.step--live {
  align-items: start;
  row-gap: var(--space-4);
  padding-block: var(--space-4);
  background: var(--surface);
}

.step--live .step__icon,
.step--live .badge {
  align-self: center;
}

.step__title {
  font-weight: var(--weight-medium);
}

/* The client's own steps are white cards, theirs to act on. The team's
   sit flat on the page, there to follow, not to do. */
.step[data-who='you'] {
  background: var(--surface);
}

/* Whose step, a face and a name, under the step's title. */
.owner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* The live step's body, under its title, what is asked and the way
   to do it. */
.step__body {
  display: flex;
  flex-direction: column;
  grid-column: 2 / -1;
  gap: var(--space-4);
}

.step__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* What still stands between the client and sending, beside the button
   it holds back. */
.step__hint {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* The things a step asks for, each with whether it is in. */
.checklist {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.detail[data-state='done'] .step__icon .icon {
  color: var(--grass-11);
}

.detail[data-state='upcoming'] .step__icon .icon {
  color: var(--text-muted);
}

.detail .step__icon .icon {
  width: 16px;
  height: 16px;
}

/* A team, its people overlapping, each ringed in the page's grey so
   they read apart. The stack's columns are narrower than its faces. */
.stack {
  display: grid;
  grid-auto-columns: 28px;
  grid-auto-flow: column;
  padding-inline-end: 4px;
}

.stack--xs {
  grid-auto-columns: 24px;
}

.stack .avatar {
  box-shadow: 0 0 0 2px var(--surface-page);
}

/* A thing a step holds, a document or details, on the page's grey. */
.detail {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
  padding-inline: var(--space-4) var(--space-2);
  background: var(--surface-page);
  border-radius: var(--radius);
}

.detail__text {
  flex: 1;
  min-width: 0;
}

.detail .icon {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
}

/* ---------- Phone ---------- */

/* Below a tablet's width the menus fold behind a button in a top bar,
   since this is a website, not an app, and a table drops what it can
   spare. */
@media (width < 900px) {
  /* A bar on top with the menu's button, then the page, its trail
     kept as on a desk. */
  .shell,
  .shell--no-subnav,
  .shell--settings {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  .sidenav,
  .subnav {
    display: none;
  }

  .topbar {
    display: flex;
    align-items: center;
    height: 48px;
    padding-inline: var(--space-2);
    background: var(--surface);
  }

  .topbar__menu {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    color: var(--grey-700);
    border-radius: var(--radius);
  }

  /* Open, settings' menu slides over the page from the left, the page
     dimmed behind it. */
  .shell[data-menu] :is(.sidenav, .subnav) {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 2;
    display: grid;
    width: min(280px, 85vw);
    overflow: auto;
    background: var(--surface);
  }

  .shell[data-menu] .scrim {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: block;
    background: rgb(0 0 0 / 0.24);
  }

  .page {
    padding: var(--space-4) var(--space-4) var(--space-6);
  }

  .page__content,
  .section {
    gap: var(--space-4);
  }

  .table__row {
    column-gap: var(--space-3);
    padding-inline: var(--space-3);
  }

  .hide-narrow {
    display: none;
  }

  .breadcrumbs {
    display: flex;
  }

  .table--members {
    --cols: 32px minmax(0, 1fr) 104px 16px;
  }

  .table--permissions {
    --cols: minmax(0, 1fr) 120px;
  }

  .table--entities {
    --cols: 32px minmax(0, 1fr) 136px 16px;
  }

  .table--services {
    --cols: minmax(0, 1fr) 128px 16px;
  }

  .toolbar__label {
    display: none;
  }

  /* The note on what is left takes its own line over the buttons. */
  .step__actions {
    flex-wrap: wrap;
  }

  .step__hint {
    flex-basis: 100%;
  }
}