/* ============================================================
   QUIZORIA SaaS — layout and components

   The rules the whole interface follows:

   - One primary action per screen, and it is the only filled brand button on
     it. Everything else is secondary, ghost or a plain link. A dashboard with
     six equally loud buttons has no call to action at all.
   - Panels are separated by a hairline and a shadow so faint it reads as
     depth rather than decoration. No gradients on surfaces; the only gradient
     in the product is the brand mark.
   - Density is comfortable, not compact. A teacher reads this for an hour.
   - Nothing animates on load. Motion is reserved for things that actually
     move: a menu opening, a toast arriving, a row leaving.
   ============================================================ */

/* ================= app shell ================= */

.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
}

/* ---- sidebar ---- */

.sidebar {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
  background: var(--bg-raised);
  border-inline-end: 1px solid var(--line);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-2) var(--s-4);
  color: var(--text);
}
.brand:hover { text-decoration: none; }

.brand__mark {
  width: 32px; height: 32px;
  flex: none;
  border-radius: 9px;
  background: linear-gradient(140deg, var(--brand-400), var(--brand-700));
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: .02em;
  box-shadow: var(--shadow-sm);
}

.brand__name {
  font-weight: 750;
  letter-spacing: .01em;
  font-size: 1rem;
}

/* The workspace switcher sits directly under the brand, because "which
   workspace am I in" is the question a person with three of them asks first. */
.wsswitch {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  background: var(--bg-inset);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: start;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.wsswitch:hover { border-color: var(--line-strong); }
.wsswitch__body { min-width: 0; flex: 1 1 auto; }
/* Both lines are spans inside a flex child, so they need an explicit block
   display - otherwise the name and the role below it run together on one line. */
.wsswitch__name {
  display: block;
  font-weight: 650;
  font-size: var(--fs-small);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wsswitch__role {
  display: block;
  font-size: var(--fs-micro);
  color: var(--text-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wsswitch__chevron { color: var(--text-faint); flex: none; }

.nav { display: flex; flex-direction: column; gap: 2px; margin-block-start: var(--s-4); }

.nav__group {
  font-size: var(--fs-micro);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-faint);
  padding: var(--s-4) var(--s-3) var(--s-2);
}

.nav__item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0.5rem var(--s-3);
  border-radius: var(--r-md);
  color: var(--text-muted);
  font-weight: 550;
  font-size: var(--fs-body);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav__item:hover { background: var(--bg-hover); color: var(--text); text-decoration: none; }
.nav__item[aria-current='page'] {
  background: var(--bg-active);
  color: var(--text-brand);
  font-weight: 650;
}
.nav__item svg { flex: none; opacity: .85; }


.sidebar__foot { margin-block-start: auto; padding-block-start: var(--s-4); }

/* ---- top bar ---- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-inline: var(--s-6);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--line);
}

.topbar__title { font-weight: 650; font-size: var(--fs-h3); }
.topbar__spacer { flex: 1 1 auto; }

/* `.btn.burger`, not `.burger`: the button rules are declared later in this
   file and would otherwise win on source order and put a drawer toggle on
   every desktop screen. */
.btn.burger { display: none; }

/* ---- main ---- */

.main { grid-column: 2; display: flex; flex-direction: column; min-width: 0; }

.page {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--s-8) var(--s-6) var(--s-16);
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

.page__head { display: flex; align-items: flex-start; gap: var(--s-4); flex-wrap: wrap; }
.page__head .u-grow { min-width: 12rem; }
.page__title { font-size: var(--fs-h1); font-weight: 720; letter-spacing: -.02em; }
.page__sub { color: var(--text-muted); margin-block-start: var(--s-1); }

.section { display: flex; flex-direction: column; gap: var(--s-4); }
.section__head { display: flex; align-items: baseline; gap: var(--s-3); }
.section__title { font-size: var(--fs-h2); font-weight: 650; }

/* ================= buttons ================= */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-border: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0.5625rem 0.9375rem;
  border-radius: var(--r-md);
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled='true'] {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

.btn--primary {
  --btn-bg: var(--brand-600);
  --btn-fg: #fff;
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover:not(:disabled) { --btn-bg: var(--brand-700); box-shadow: var(--shadow-md); }

.btn--secondary {
  --btn-bg: var(--bg-raised);
  --btn-fg: var(--text);
  --btn-border: var(--line-strong);
}
.btn--secondary:hover:not(:disabled) { --btn-bg: var(--bg-hover); --btn-border: var(--brand-300); }

.btn--ghost { --btn-fg: var(--text-muted); }
.btn--ghost:hover:not(:disabled) { --btn-bg: var(--bg-hover); --btn-fg: var(--text); }

.btn--danger {
  --btn-bg: var(--bad-500);
  --btn-fg: #fff;
}
.btn--danger:hover:not(:disabled) { --btn-bg: var(--bad-700); }

.btn--danger-quiet { --btn-fg: var(--bad-500); }
.btn--danger-quiet:hover:not(:disabled) { --btn-bg: var(--bad-50); }

.btn--lg { padding: 0.75rem 1.25rem; font-size: 1rem; border-radius: var(--r-md); }
.btn--sm { padding: 0.3125rem 0.625rem; font-size: var(--fs-small); }
.btn--block { width: 100%; }
.btn--icon { padding: 0.5rem; }

/* A button that is waiting on the network says so, and cannot be pressed
   twice. The spinner replaces the label rather than sitting beside it, so the
   button does not change width mid-request. */
.btn.is-busy { color: transparent; pointer-events: none; position: relative; }
.btn.is-busy::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1rem; height: 1rem;
  border: 2px solid currentColor;
  border-block-start-color: transparent;
  border-radius: 50%;
  color: var(--btn-fg);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ================= surfaces ================= */

.card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

.card__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-5) var(--s-4);
  border-block-end: 1px solid var(--line);
}
.card__title { font-size: var(--fs-h3); font-weight: 650; }
.card__body { padding: var(--s-5); }
.card__foot {
  padding: var(--s-4) var(--s-5);
  border-block-start: 1px solid var(--line);
  background: var(--bg-sunken);
  border-end-start-radius: var(--r-lg);
  border-end-end-radius: var(--r-lg);
}

/* ---- summary tiles ---- */

.tiles {
  display: grid;
  /* `auto-fill`, not `auto-fit`: with six tiles on a wide screen auto-fit
     stretches five across and strands the sixth on a line of its own. */
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--s-4);
}

.tile {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  box-shadow: var(--shadow-sm);
}

.tile__label {
  font-size: var(--fs-small);
  color: var(--text-muted);
  font-weight: 550;
}

.tile__value {
  font-size: 1.875rem;
  font-weight: 720;
  line-height: 1.1;
  letter-spacing: -.02em;
  /* Tabular figures so a column of counters does not shimmer as it updates. */
  font-variant-numeric: tabular-nums;
}

.tile__note { font-size: var(--fs-small); color: var(--text-faint); }

/* ---- quick actions ---- */

.actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-4);
}

.action {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  text-align: start;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.action:hover { border-color: var(--brand-300); box-shadow: var(--shadow-md); text-decoration: none; }
.action:disabled { opacity: .6; cursor: not-allowed; }
.action:disabled:hover { border-color: var(--line); box-shadow: var(--shadow-sm); }

.action__icon {
  width: 38px; height: 38px;
  flex: none;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: var(--bg-brand-soft);
  color: var(--text-brand);
}
.action__title { display: block; font-weight: 650; }
.action__desc { display: block; font-size: var(--fs-small); color: var(--text-muted); margin-block-start: 2px; }

/* ================= data ================= */

.tablewrap {
  /* Wide tables scroll inside their own box. The page itself must never
     scroll sideways - that is what makes a dashboard feel broken on a tablet. */
  overflow-x: auto;
  border-radius: var(--r-lg);
}

.table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }

.table th {
  text-align: start;
  font-size: var(--fs-micro);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-faint);
  padding: var(--s-3) var(--s-4);
  border-block-end: 1px solid var(--line);
  white-space: nowrap;
}

.table td {
  padding: var(--s-4);
  border-block-end: 1px solid var(--line);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-block-end: 0; }
.table tbody tr:hover { background: var(--bg-hover); }
.table__actions { text-align: end; white-space: nowrap; }

/* Figures read as a column, not as prose: aligned to the trailing edge with
   even-width digits so magnitudes line up down the table. */
.table .num {
  text-align: end;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.avatar {
  width: 34px; height: 34px;
  flex: none;
  border-radius: var(--r-full);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: var(--fs-small);
  color: #fff;
  background: var(--brand-500);
  text-transform: uppercase;
}
.avatar--sm { width: 26px; height: 26px; font-size: var(--fs-micro); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 2px 9px;
  border-radius: var(--r-full);
  font-size: var(--fs-micro);
  font-weight: 650;
  letter-spacing: .01em;
  background: var(--bg-inset);
  color: var(--text-muted);
  white-space: nowrap;
}
.badge--brand { background: var(--bg-brand-soft); color: var(--text-brand); }
.badge--ok    { background: var(--ok-50);   color: var(--ok-500); }
.badge--warn  { background: var(--warn-50); color: var(--warn-500); }
.badge--bad   { background: var(--bad-50);  color: var(--bad-500); }
.badge--gold  { background: var(--gold-100); color: var(--gold-600); }

/* ---- empty states ----
   An empty screen is a first impression, not an error. It says what the thing
   is for and offers the one action that fills it. */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-12) var(--s-6);
  text-align: center;
}
.empty__icon {
  width: 52px; height: 52px;
  border-radius: var(--r-lg);
  display: grid;
  place-items: center;
  background: var(--bg-brand-soft);
  color: var(--text-brand);
  margin-block-end: var(--s-2);
}
.empty__title { font-size: var(--fs-h3); font-weight: 650; }
.empty__text { color: var(--text-muted); max-width: 32rem; }

/* ---- loading ---- */
.skeleton {
  background: linear-gradient(90deg, var(--bg-inset) 25%, var(--bg-sunken) 37%, var(--bg-inset) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: var(--r-sm);
  min-height: 1rem;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ================= messaging ================= */

.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-size: var(--fs-body);
}
.notice--info { background: var(--info-50); color: var(--text); border-color: color-mix(in srgb, var(--info-500) 30%, transparent); }
.notice--ok   { background: var(--ok-50);   color: var(--text); border-color: color-mix(in srgb, var(--ok-500) 30%, transparent); }
.notice--warn { background: var(--warn-50); color: var(--text); border-color: color-mix(in srgb, var(--warn-500) 32%, transparent); }
.notice--bad  { background: var(--bad-50);  color: var(--text); border-color: color-mix(in srgb, var(--bad-500) 30%, transparent); }
.notice__icon { flex: none; margin-block-start: 1px; }
.notice__body { min-width: 0; }
.notice__title { font-weight: 650; }

.toasts {
  position: fixed;
  inset-block-end: var(--s-6);
  inset-inline-end: var(--s-6);
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  min-width: 16rem;
  max-width: min(26rem, calc(100vw - 3rem));
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--ink-900);
  color: #fff;
  box-shadow: var(--shadow-pop);
  font-size: var(--fs-body);
  animation: toast-in var(--t-base) var(--ease);
}
.toast--ok  { background: var(--ok-700); }
.toast--bad { background: var(--bad-700); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ================= overlays ================= */

.modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: var(--s-4);
  background: var(--bg-scrim);
  animation: fade var(--t-fast) var(--ease);
}
@keyframes fade { from { opacity: 0; } }

.modal__panel {
  width: min(30rem, 100%);
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  background: var(--bg-raised);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-pop);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

/* Wide enough for a table of attempts rather than a form. */
.modal__panel--wide { width: min(56rem, 94vw); }
.modal__title { font-size: var(--fs-h2); font-weight: 680; }
.modal__actions { display: flex; gap: var(--s-3); justify-content: flex-end; flex-wrap: wrap; }

.menu {
  position: absolute;
  z-index: 60;
  min-width: 13rem;
  padding: var(--s-2);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.menu__item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0.4375rem var(--s-3);
  border-radius: var(--r-sm);
  border: 0;
  background: none;
  font: inherit;
  color: var(--text);
  text-align: start;
  cursor: pointer;
  width: 100%;
}
.menu__item:hover { background: var(--bg-hover); text-decoration: none; }
.menu__item[aria-current='true'] { color: var(--text-brand); font-weight: 650; }
.menu__item--danger { color: var(--bad-500); }
.menu__sep { height: 1px; background: var(--line); margin: var(--s-2) 0; }
.menu__label {
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-faint);
  padding: var(--s-2) var(--s-3) var(--s-1);
  font-weight: 650;
}

/* ================= authentication screens ================= */

.auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  padding: var(--s-6);
  background:
    radial-gradient(1100px 620px at 80% -10%, var(--bg-brand-soft), transparent 60%),
    var(--bg);
}

.auth__panel {
  width: min(26rem, 100%);
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

.auth__brand { display: flex; align-items: center; gap: var(--s-3); justify-content: center; }
.auth__title { font-size: var(--fs-h1); font-weight: 720; letter-spacing: -.02em; text-align: center; }
.auth__sub { color: var(--text-muted); text-align: center; }
.auth__card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.auth__alt { text-align: center; color: var(--text-muted); font-size: var(--fs-small); }

/* ================= onboarding ================= */

.steps { display: flex; align-items: center; gap: var(--s-2); justify-content: center; }
.step {
  width: 2rem; height: 4px;
  border-radius: var(--r-full);
  background: var(--line-strong);
}
.step.is-done, .step.is-current { background: var(--brand-500); }

.choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-3);
}

.choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
  padding: var(--s-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
  font: inherit;
  color: inherit;
  text-align: start;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.choice:hover { border-color: var(--brand-300); }
.choice[aria-pressed='true'] {
  border-color: var(--brand-500);
  background: var(--bg-brand-soft);
  box-shadow: inset 0 0 0 1px var(--brand-500);
}
.choice__emoji { font-size: 1.5rem; line-height: 1; }
.choice__label { font-weight: 650; }
.choice__desc { font-size: var(--fs-small); color: var(--text-muted); }

/* ================= responsive ================= */

@media (max-width: 1024px) {
  :root { --sidebar-w: 216px; }
  .page { padding-inline: var(--s-5); }
}

@media (max-width: 820px) {
  .shell { grid-template-columns: minmax(0, 1fr); }

  /* The sidebar becomes a drawer. It is hidden from assistive technology as
     well as from view when closed, so a screen reader does not read out a
     navigation the user cannot reach. */
  .sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: min(19rem, 84vw);
    z-index: 70;
    transform: translateX(-102%);
    transition: transform var(--t-base) var(--ease);
    box-shadow: var(--shadow-pop);
  }
  html[dir='rtl'] .sidebar { transform: translateX(102%); }
  /* Both selectors, because `html[dir='rtl'] .sidebar` out-specifies a bare
     `.sidebar.is-open` - which left the drawer permanently off-screen in
     Arabic while the scrim dimmed the page behind nothing. */
  .sidebar.is-open,
  html[dir='rtl'] .sidebar.is-open { transform: none; }

  .main { grid-column: 1; }
  .btn.burger { display: inline-flex; }

  .scrim {
    position: fixed;
    inset: 0;
    z-index: 65;
    background: var(--bg-scrim);
    border: 0;
  }

  .page { padding: var(--s-6) var(--s-4) var(--s-12); }
  .topbar { padding-inline: var(--s-4); }
}

@media (max-width: 560px) {
  .tiles { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .tile__value { font-size: 1.5rem; }
  .modal__actions .btn { flex: 1 1 auto; }
  .toasts { inset-inline: var(--s-4); inset-block-end: var(--s-4); }

  /* A checklist row is a label and, on one row, a button. On a phone the two
     do not fit beside each other, and squeezing them produces a two-character
     button - so the button moves under the label and spans the width, where a
     thumb can reach it. */
  .checklist__item { flex-wrap: wrap; }
  .checklist__item .btn { flex: 1 1 100%; margin-inline-start: 2.35rem; }

  /* Page headings already wrap; at this width their action should also fill
     the row it wrapped onto rather than sitting alone at one end. */
  .page__head > :not(.u-grow) { flex: 1 1 100%; }

  /* An empty state offering three routes stacks them rather than wrapping to
     an awkward two-and-one. */
  .empty .u-row-wrap { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ================= platform console =================
   QUIZORIA's own screens. They must not be mistakable for a customer
   dashboard at a glance, so the console keeps the same components and changes
   the frame: no sidebar, and a bar tinted with the brand rather than the page
   background. */

/* Rendered outside `.shell`, so it is its own page rather than a grid cell. */
.console { min-height: 100vh; }

.console__bar {
  background: color-mix(in srgb, var(--brand-500) 12%, var(--bg));
  border-block-end: 1px solid color-mix(in srgb, var(--brand-500) 34%, transparent);
}

.console__bar .brand { margin-inline-end: var(--s-2); }

/* A row of filters above a table. Wraps on a narrow window; the search box
   takes the slack so the selects stay their natural width. */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
}
.toolbar__search { flex: 1 1 16rem; min-width: 12rem; }
.toolbar__search .input { width: 100%; }
.toolbar .select { flex: 0 0 auto; width: auto; }

/* The console's two screens: tenants and players. */
.console__tabs { display: flex; gap: var(--s-1); margin-inline-start: var(--s-4); }

.console__tab {
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-full);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
}
.console__tab:hover { color: var(--text); background: var(--bg-hover); }
.console__tab[aria-current='page'] {
  color: var(--brand-700);
  background: color-mix(in srgb, var(--brand-500) 16%, transparent);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--bg-inset);
  font-size: var(--fs-small);
}

/* ---------------- getting started ----------------
   A checklist, not a progress bar: the useful information is which step is
   next, and a bar answers "how far" instead. It leaves the page entirely once
   every step is done - see `loadChecklist`. */
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.checklist__item {
  display: flex; align-items: center; gap: var(--s-3);
  padding-block: var(--s-3);
  border-block-end: 1px solid var(--line);
}
.checklist__item:last-child { border-block-end: 0; }
.checklist__mark {
  flex: 0 0 auto;
  width: 1.35rem; height: 1.35rem;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong, var(--line));
  border-radius: 999px;
  font-size: .8rem; line-height: 1;
  color: var(--text-faint);
}
.checklist__item.is-done { color: var(--text-muted); }
.checklist__item.is-done .checklist__mark {
  border-color: var(--ok-500); background: var(--ok-500); color: #fff;
}