/* 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; }

/* GRP-13: one application's groups a person is a member of, under the
   chooser — shown while that application is ticked, every one without JS. */
.membership-field { margin-top: 1rem; }

/* Nothing on offer at all. Not an error state — at signup only a released
   application can be chosen, so a platform with nothing released has an
   empty picker, and it has to say so rather than show a blank box. */
.picker__empty {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin: 0;
  padding: 1.25rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  font-size: 0.8125rem;
  color: var(--text-muted);
  max-width: var(--measure);
}

.picker__empty .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; }
}

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

/* A second fact under another in the same panel — the groups a person is
   in, under the applications they hold a seat in. */
.info-field--spaced { margin-top: 0.875rem; }

/* 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) {
  .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);
}

/* --- 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;
}

/* Flex rather than block so a Preview chip can sit beside the name instead
   of under it. With one child it lays out exactly as the block did. */
.app-picker__name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem;
  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;
}

/* You, on a company card. Sits between the company's monogram and your
   role in it — the two halves of "who am I here". */
.company__you { display: inline-flex; flex: 0 0 auto; }