/* The launcher — one card per space, and nothing else.
   Flat white tiles on gray-50, per ui-guidelines.md. No shadows. */

.launcher {
  max-width: 96rem;
  margin: 0 auto;
  padding: 3rem 1.25rem;
}

.launcher__lede {
  color: var(--text-muted);
  max-width: var(--measure);
  margin-bottom: 1.75rem;
}

/* Every page on the brand gradient needs the light-on-dark treatment the
   flat page background never required — the eyebrow label, the heading,
   the lede, and the two decorations specific to the companies page. Also
   applies to --gradient-alt (People, and the two "set up a company"
   forms) — same need, different gradient. */
.shell-content--gradient .eyebrow,
.shell-content--gradient-alt .eyebrow { color: rgb(var(--white-rgb) / 0.6); }

.shell-content--gradient .launcher h1,
.shell-content--gradient-alt .launcher h1 { color: var(--white); }

.shell-content--gradient .launcher__lede,
.shell-content--gradient-alt .launcher__lede { color: rgb(var(--white-rgb) / 0.85); }

/* The two secondary sections — "…has these, but you have no seat" and "Not
   part of … yet" — and the "this account also belongs to" footer sit
   directly on the gradient, not inside a card. Their default night-blue
   heading colour and mid-gray body colour are all but invisible there, so
   they take the same light-on-dark treatment as the h1 above them. The
   `:not(.panel)` is load-bearing: Applications reuses .launcher__aside
   inside a white .panel, where a white heading would vanish instead. */
.shell-content--gradient .launcher__aside:not(.panel) h2,
.shell-content--gradient-alt .launcher__aside:not(.panel) h2 {
  color: var(--white);
  font-size: 1rem;
  margin-bottom: 0.75rem;
}

.shell-content--gradient .launcher__foot,
.shell-content--gradient-alt .launcher__foot {
  color: rgb(var(--white-rgb) / 0.85);
}

.shell-content--gradient .launcher__foot a,
.shell-content--gradient-alt .launcher__foot a {
  color: var(--white);
  text-decoration: underline;
}

/* On the launcher specifically, the tenant name reads as a second, larger
   heading above "Your applications" — not the small muted eyebrow label
   the rest of the shell uses, including the "Your account" eyebrow one
   step below it on the companies page. */
.shell-content--gradient .eyebrow--tenant {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgb(var(--white-rgb) / 0.7);
  margin-bottom: 0.5rem;
}

/* The companies page's "companies" accent word, and its two below-the-fold
   elements that sit directly on the gradient rather than inside a white
   card. */
.shell-content--gradient .hl { color: var(--white); }

.shell-content--gradient .create-company-row {
  color: rgb(var(--white-rgb) / 0.85);
  border-color: rgb(var(--white-rgb) / 0.3);
}

.shell-content--gradient .create-company-row:hover {
  border-color: rgb(var(--white-rgb) / 0.5);
  background: rgb(var(--white-rgb) / 0.08);
}

.shell-content--gradient .create-company-row__icon {
  background: rgb(var(--white-rgb) / 0.15);
  color: var(--white);
}

.shell-content--gradient .create-company-row:hover .create-company-row__icon {
  background: rgb(var(--white-rgb) / 0.22);
}

.space-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.space-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.5rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 120ms ease;
}

.space-card:hover {
  text-decoration: none;
  border-color: var(--card-accent, var(--primary-edge));
}

.space-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

/* The accent square is how the two cards stay distinguishable at a glance
   without a coloured border or a shadow. */
.space-card__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-sm);
  background: var(--card-accent, var(--brand-dark));
  flex-shrink: 0;
}

.space-card__mark .icon { color: var(--white); }

.space-card__seat {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--primary-wash);
  border: 1px solid var(--primary-edge);
  color: var(--primary);
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
}

.space-card__seat::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 999px;
  background: currentColor;
}

.space-card__label {
  display: block;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--brand-dark);
  margin-bottom: 0.3rem;
}

.space-card__tagline {
  font-size: 0.8125rem;
  color: var(--text-mid);
  margin: 0 0 1.25rem;
  flex: 1 1 auto;
}

.space-card__enter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--divider);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--primary);
}

.space-card__enter .icon { color: var(--primary); }

/* Somebody who holds no space at all lands here — in plain words. */
.no-access {
  max-width: 32rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
}

.no-access > p:last-child { margin-bottom: 0; }

.tenant-list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
}

.tenant-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
}

.tenant-list li + li { border-top: 1px solid var(--divider); }

.tenant-list code {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* --- Platform host: explaining the two levels -------------------------- */

.explain {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
  max-width: var(--measure);
}

.explain li { margin-bottom: 0.5rem; }
.explain li:last-child { margin-bottom: 0; }
.explain strong { color: var(--brand-dark); }

.org-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--divider);
}

.org-row { padding: 1rem 1.25rem; }
.org-row + .org-row { border-top: 1px solid var(--divider); }

.org-row__main {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  flex-wrap: wrap;
}

.org-row__name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--brand-dark);
}

.org-row__name:hover { color: var(--primary); }

.org-row__host {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
}

.org-row__spaces {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0.5rem 0 0.75rem;
}

/* A space chip carries that space's accent, so the two are recognisable
   here in the same way they are once you are inside. */
.space-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  border-left: 3px solid var(--chip, var(--brand-dark));
  background: var(--card-bg);
  font-weight: 600;
  color: var(--text);
}

.space-chip .icon { color: var(--text-muted); }

/* An inline explanation, not an error. Used when a signed-in session does
   not mean what the visitor probably thinks it means. */
.notice {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  max-width: var(--measure);
  margin: 0 0 1.25rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--primary-edge);
  border-radius: var(--radius-sm);
  background: var(--primary-wash);
  font-size: 0.8125rem;
}

.notice .icon { color: var(--primary); margin-top: 0.15rem; }
.notice p { margin: 0; }
.notice strong { color: var(--brand-dark); }

/* --- Signup and settings ----------------------------------------------- */

.launcher--narrow { max-width: 40rem; }

.launcher__aside { margin-top: 0.75rem; }

.centred__card--wide { max-width: 32rem; }
.centred__card--xwide { max-width: 75rem; background: #a2a6b126; }

/* A roomier scale for the one screen a prospect sees before they have seen
   the product at all — signup. Everywhere else stays at the dense,
   internal-tool sizing; this is scoped to descendants of the card so it
   cannot leak into settings pages that happen to share a component. */
.centred__card--roomy { padding: 2.5rem 2.75rem; }

.centred__card--roomy .centred__brand {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
}

.centred__card--roomy > p.muted {
  font-size: 0.9375rem;
  max-width: none;
  margin-bottom: 1.75rem;
}

.centred__card--roomy .panel + .panel { margin-top: 1.5rem; }

.centred__card--roomy .panel__header { padding: 2rem 2rem 0; margin-bottom: 1.5rem; gap: 0.75rem; }

.centred__card--roomy .panel__header h2 { font-size: 1rem; }

.centred__card--roomy .panel__header--split { align-items: flex-start; }

.centred__card--roomy .panel__body { padding: 0 2rem 2rem; }

.centred__card--roomy .field label { font-size: 0.8125rem; }

.centred__card--roomy .field input {
  padding: 0.75rem 0.9rem;
  font-size: 0.9375rem;
}

.centred__card--roomy .field-domain input { padding: 0.75rem 0.5rem; font-size: 0.9375rem; }
.centred__card--roomy .field-domain__prefix,
.centred__card--roomy .field-domain__suffix { font-size: 0.9375rem; }
.centred__card--roomy .field-domain__prefix { padding-left: 0.9rem; }
.centred__card--roomy .field-domain__suffix { padding: 0 0.9rem; }

.centred__card--roomy .chip {
  font-size: 0.75rem;
  padding: 0.3rem 0.65rem;
}

.centred__card--roomy .picker__counter {
  font-size: 0.8125rem;
  margin: 0.25rem 0 0;
}

.centred__card--roomy .app-picker {
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

@media (max-width: 40rem) {
  .centred__card--roomy .app-picker { grid-template-columns: 1fr; }
}

.centred__card--roomy .app-picker__card { padding: 1rem; }

.centred__card--roomy .app-picker__mark {
  width: 2.5rem;
  height: 2.5rem;
}

.centred__card--roomy .app-picker__name { font-size: 0.9375rem; }

.centred__card--roomy .button {
  padding: 0.875rem 1.5rem;
  font-size: 0.9375rem;
}

/* A pill eyebrow, by explicit design sign-off for this one screen — every
   other eyebrow on the platform stays the plain sentence-case `.eyebrow`
   ui-guidelines.md asks for. Do not reuse this outside signup. */
.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--primary-edge);
  background: var(--primary-wash);
  color: var(--primary);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 1rem;
}

.eyebrow-pill__dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 999px;
  background: var(--primary);
  flex-shrink: 0;
}

.panel__header--split {
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}

.panel__header--split h2 { margin-bottom: 0; }

.chip--pill { border-radius: 999px; }

/* The submit button and the "already have an account" line share one row,
   instead of stacking under a divider — only signup lays them out this way. */
.signup__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.5rem;
}

.signup__foot {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.centred__foot {
  margin: 1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--divider);
  font-size: 0.8125rem;
  color: var(--text-muted);
}

/* --- The application chooser ------------------------------------------- */

.picker {
  border: 0;
  margin: 0 0 1.25rem;
  padding: 0;
}

.picker legend {
  padding: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-mid);
}

.picker__counter {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0.15rem 0 0;
}

/* The "you can change this later" line, after the grid rather than before
   it — an aside about the choice, not a caption for it. */
.picker__note {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin: 1rem 0 0;
  font-size: 0.75rem;
  color: var(--text-muted);
  max-width: var(--measure);
}

.picker__note .icon { flex-shrink: 0; margin-top: 0.1rem; }

/* --- Companies --------------------------------------------------------- */

.launcher--wide { max-width: 65rem; }

/* A short colour accent inside a heading or a value — the one place outside
   a link that sky-blue appears in running text. */
.hl { color: var(--primary); }

.companies-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.75rem;
}

.companies-hero__text .launcher__lede { margin-bottom: 0; }

/* Two stacked monogram-style tiles, purely decorative — echoes the company
   tiles below without being one itself, so it carries no border shadow. */
.companies-hero__art {
  position: relative;
  width: 4.5rem;
  height: 3.75rem;
  flex-shrink: 0;
  display: none;
}

.companies-hero__card {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--white);
}

.companies-hero__card--back {
  top: 0;
  right: 0;
  background: var(--mustard-yellow);
  border-color: var(--mustard-yellow);
}

.companies-hero__card--front {
  bottom: 0;
  right: 1.5rem;
  background: var(--primary);
  border-color: var(--primary);
}

@media (min-width: 40rem) {
  .companies-hero__art { display: block; }
}

.company-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }

.company {
  display: flex;
  align-items: stretch;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.company--current { border-color: var(--primary-edge); background: var(--primary-wash); }

.company__body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 1.15rem 1.25rem;
}

/* Every card gets a second column of real shortcuts. For the company this
   request is already on, that is a plain link. For any other, the settings
   pages only ever answer for whichever company the connection is actually
   pointed at — so the action switches to that company first, on its own
   subdomain, and lands on the page directly; see enter_company()'s
   docstring. Either way the destination view still checks who may
   administer that company, same as following any other link here would. */
.company--detailed { align-items: stretch; }

.company__actions {
  flex: 0 0 16rem;
  padding: 1.15rem 1rem;
  border-left: 1px solid var(--divider);
  display: flex;
  flex-direction: column;
}

.company__actions form { margin: 0; }

.quick-actions__title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #243fba;
  margin: 0 0 0.5rem;
}

/* Shared by the <a> (current company) and the <button type="submit"> form
   (any other company) — a quick action reads identically either way. */
.quick-actions__link {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.4rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.quick-actions__link span { flex: 1 1 auto; }

.quick-actions__link:hover {
  background: var(--card-bg);
  color: var(--primary);
  text-decoration: none;
}

.quick-actions__link:hover .icon { color: var(--primary); }

.company__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.3rem;
}

.company__name { font-size: 0.9375rem; font-weight: 700; color: var(--brand-dark); }

.company__meta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0 0 0.75rem;
}

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

.company__meta-dot { color: var(--border); }

@media (max-width: 40rem) {
  .company { flex-direction: column; }
  .company__actions { border-left: 0; border-top: 1px solid var(--divider); flex: 0 0 auto; }
}

/* --- One person, read back ---------------------------------------------- */

.profile-layout {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.profile-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.profile-card {
  flex: 0 0 16rem;
  padding: 1.5rem;
  text-align: center;
}

.profile-card__photo {
  position: relative;
  width: 6rem;
  height: 6rem;
  margin: 0 auto 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: var(--page-bg);
  color: var(--text-muted);
  overflow: hidden;
}

.profile-card__photo img { width: 100%; height: 100%; object-fit: cover; }

.profile-card__status-dot {
  position: absolute;
  right: 0.4rem;
  bottom: 0.4rem;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 999px;
  background: #22c55e;
  border: 2px solid var(--card-bg);
}

.profile-card__status-dot--off { background: var(--text-muted); }

.profile-card__name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--brand-dark);
  margin: 0 0 0.15rem;
}

.profile-card__role {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--primary);
  margin: 0 0 0.6rem;
}

.profile-card__rule { border: 0; border-top: 1px solid var(--divider); margin: 1rem 0; }

.profile-card__mail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  background: var(--primary-wash);
  color: var(--primary);
}

.profile-card__mail:hover { filter: brightness(1.06); text-decoration: none; }

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  border: 1px solid #bbf7d0;
  background: #f0fdf4;
  color: #059669;
}

.status-chip__dot { width: 0.4rem; height: 0.4rem; border-radius: 999px; background: #059669; }

.status-chip--off { border-color: var(--border); background: var(--page-bg); color: var(--text-muted); }
.status-chip--off .status-chip__dot { background: var(--text-muted); }

.profile-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }

/* The photo + account-status column beside a create/edit person form —
   .profile-layout's row mechanics, a plain stack of panels rather than one
   centred card. */
.form-sidebar {
  flex: 0 0 16rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* A pill switch — "Active account" — rather than a plain checkbox, since
   this one flips real access (apps.core.permissions._operator) rather than
   ticking a preference. */
.switch { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; }

.switch input { position: absolute; opacity: 0; width: 0; height: 0; }

.switch__track {
  position: relative;
  width: 2.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--border);
  transition: background 0.15s;
}

.switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  background: var(--white);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
  transition: transform 0.15s;
}

.switch input:checked ~ .switch__track { background: var(--primary); }
.switch input:checked ~ .switch__track .switch__thumb { transform: translateX(1rem); }

.switch__label { font-size: 0.8125rem; font-weight: 600; color: var(--text); }

@media (max-width: 40rem) {
  .profile-layout { flex-direction: column; }
  .profile-card,
  .form-sidebar { flex: 1 1 auto; width: 100%; }
}

/* --- Create another company / sign out ---------------------------------- */

.create-company-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.75rem;
  padding: 0.9rem 1.1rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--brand-dark);
  font-weight: 600;
  font-size: 0.8125rem;
}

.create-company-row:hover {
  border-color: var(--primary-edge);
  background: var(--primary-wash);
  text-decoration: none;
}

.create-company-row span:nth-child(2) { flex: 1 1 auto; }

.create-company-row__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: var(--primary-wash);
  color: var(--primary);
  flex-shrink: 0;
}

.create-company-row:hover .create-company-row__icon { background: var(--card-bg); }

.chip--on {
  border-color: var(--primary-edge);
  background: var(--card-bg);
  color: var(--primary);
}

.space-chip--off {
  color: var(--text-muted);
  border-left-color: var(--border);
}

/* --- A server-side filter bar: search, a multi-select, a page-size choice */

.filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.625rem;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--divider);
  background: var(--page-bg);
}

.filter-bar__search {
  position: relative;
  flex: 1 1 14rem;
  min-width: 10rem;
  display: flex;
}

.filter-bar__input {
  width: 100%;
  font: inherit;
  font-size: 0.8125rem;
  padding: 0.45rem 2.25rem 0.45rem 0.7rem;
  color: var(--text);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.filter-bar__search-btn {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 2.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--primary);
  color: var(--white);
  cursor: pointer;
}

.filter-bar__search-btn:hover { filter: brightness(1.06); }
.filter-bar__search-btn .icon { color: inherit; }

.filter-bar__field { position: relative; flex: 0 0 auto; }

.filter-bar__select {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.45rem 0.7rem;
  color: var(--text);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
}

.filter-bar__select:hover { border-color: var(--primary-edge); }

/* A flat, bordered popover — no box-shadow anywhere, per ui-guidelines.md. */
.filter-bar__panel {
  position: absolute;
  z-index: 10;
  top: calc(100% + 0.35rem);
  left: 0;
  min-width: 13rem;
  padding: 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
}

.filter-bar__option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.3rem;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  cursor: pointer;
}

.filter-bar__option:hover { background: var(--page-bg); }

.filter-bar__panel-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.4rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--divider);
}

.filter-bar__apply {
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.35rem 0.7rem;
  color: var(--white);
  background: var(--primary);
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.filter-bar__apply:hover { filter: brightness(1.06); }

.filter-bar__clear { font-size: 0.75rem; font-weight: 600; }

.filter-bar__reset {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.filter-bar__reset:hover { color: var(--brand-dark); text-decoration: none; }
.filter-bar__reset .icon { color: inherit; }

/* --- The seat grid ----------------------------------------------------- */

.grid-scroll { overflow-x: auto; }

.grid { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }

.grid th,
.grid td {
  text-align: left;
  padding: 0.6rem 0.85rem;
  border-top: 1px solid var(--divider);
  vertical-align: middle;
}

.grid thead th {
  background: var(--page-bg);
  border-top: 0;
  border-bottom: 1px solid var(--border);
}

.grid__app {
  white-space: nowrap;
  font-size: 0.75rem;
  color: var(--text-mid);
}

.grid__mark {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 2px;
  margin-right: 0.3rem;
}

.grid__person { min-width: 12rem; }
.grid__person-inner { display: flex; align-items: center; gap: 0.6rem; }
.grid__name { display: block; font-weight: 600; color: var(--brand-dark); }
.grid__person code { font-size: 0.6875rem; color: var(--text-muted); }
.grid__cell form { margin: 0; }

.grid__avatar {
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  border-radius: 999px;
  object-fit: cover;
  background: var(--page-bg);
}

.grid__avatar--fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.grid__actions { display: inline-flex; align-items: center; gap: 0.4rem; }

.grid__view-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-mid);
  white-space: nowrap;
}

.grid__view-link:hover {
  border-color: var(--primary-edge);
  background: var(--primary-wash);
  color: var(--primary);
  text-decoration: none;
}

.grid__view-link .icon { color: inherit; }

.seat {
  font: inherit;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
}

.seat:hover { border-style: solid; color: var(--brand-dark); }

.seat--on {
  border-style: solid;
  border-color: var(--primary-edge);
  background: var(--primary-wash);
  color: var(--primary);
}

.seat--on .icon { color: var(--primary); }

/* A seat cell for somebody whose access has ended. There is nothing to
   click — the seats were released — so it reads as a placeholder rather
   than a button that refuses. */
.seat--none {
  border-style: solid;
  border-color: transparent;
  cursor: default;
  color: var(--text-muted);
}

/* The status chip sits under the name in the people grid, where it needs
   to start a line of its own rather than trail the email address. */
.grid__person .status-chip { margin-top: 0.3rem; }

.plain-list { list-style: none; margin: 0; padding: 0; font-size: 0.8125rem; }
.plain-list li { padding: 0.3rem 0; border-top: 1px solid var(--divider); }
.plain-list li:first-child { border-top: 0; }

.field--error input { border-color: #fecaca; }

.centred__note {
  margin: 0.75rem 0 0;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
}

/* --- Restricted application rows: missing a seat, or not owned --------- */

.restricted-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.restricted-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--page-bg);
}

.restricted-row__main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.restricted-row__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-sm);
  background: var(--divider);
  color: var(--text-mid);
  flex-shrink: 0;
}

.restricted-row__name {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 700;
  color: var(--brand-dark);
}

.restricted-row__name .icon { color: var(--text-muted); }

.restricted-row__action {
  font-size: 0.8125rem;
  color: var(--text-mid);
  white-space: normal;
}

/* --- Companies: monogram cards ------------------------------------------ */

.company-monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-sm);
  background: var(--primary-wash);
  color: var(--primary);
  font-weight: 700;
  font-size: 0.9375rem;
  flex-shrink: 0;
}

.company--current .company-monogram {
  background: var(--primary);
  color: var(--white);
}

/* --- Application picker: icon cards ------------------------------------ */

.app-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.6rem;
}

.app-picker__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  cursor: pointer;
}

.app-picker__card:has(input:checked) { border-color: var(--primary); }

.app-picker__card input { position: absolute; opacity: 0; }

.app-picker__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.app-picker__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-sm);
  background: var(--mark-accent, var(--brand-dark));
  color: var(--white);
  flex-shrink: 0;
}

.app-picker__name {
  display: block;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--brand-dark);
}

.app-picker__tagline {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}

/* A rounded-square checkbox inline with the icon, not a circle floating
   over the card's corner. */
.app-picker__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 6px;
  border: 1.5px solid var(--border);
  background: var(--card-bg);
  color: transparent;
  flex-shrink: 0;
}

.app-picker__card:has(input:checked) .app-picker__check {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

/* .icon sets its own colour directly, which otherwise beats the transparent
   / white set above by inheritance — the check glyph must actually follow
   the checkbox's state, not sit there gray-visible either way. */
.app-picker__check .icon { color: inherit; }

.app-picker__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border: 0;
  border-top: 1px solid var(--divider);
  background: none;
  font: inherit;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-mid);
  text-align: left;
}

/* Only the applications-settings page renders this as a real <button> —
   the arrow means "go to it" there, so it needs to be operable, not just
   decorative chrome inside the card's own label. */
button.app-picker__foot { cursor: pointer; }
button.app-picker__foot:hover { color: var(--primary); }
button.app-picker__foot:hover .icon { color: var(--primary); }

.app-picker__foot .icon { color: var(--text-mid); }

/* --- The empty-state workspace card ------------------------------------ */
/*
   What "you have this application, but nothing has been built here yet"
   looks like — apps/core/views.py's application_home() factory, shared by
   every sellable application. One card, honest about the state: no numbers
   that are not real, no button that does not lead anywhere.
*/

.workspace-empty {
  max-width: 40rem;
  margin: 1.5rem auto 0;
  text-align: center;
  padding: 3rem 2rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.workspace-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius);
  background: var(--app-accent);
  color: var(--white);
  margin-bottom: 1.25rem;
}

.workspace-empty__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: var(--primary-wash);
  border: 1px solid var(--primary-edge);
  color: var(--primary);
  font-size: 0.6875rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.workspace-empty__badge .icon { color: var(--primary); }

.workspace-empty h1 { margin-bottom: 0.5rem; }

.workspace-empty__blurb {
  max-width: 30rem;
  margin: 0 auto 1.5rem;
  color: var(--text-mid);
}

.workspace-empty .panel {
  text-align: left;
  margin-top: 0.5rem;
}

/* --- A scaffolded sub-page: not built yet, correctly gated -------------- */

.scaffold {
  max-width: 40rem;
}