@import url("tokens.css");

/* ── Reset ──────────────────────────────────────────────────────────────── */

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

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; }

ul[role="list"], ol[role="list"] { list-style: none; }

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100dvh;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--ink);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 1; /* tabular numerals — dates and counts stop jittering */
}

img, svg { display: block; max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Anyone who has asked the OS to reduce motion gets none of ours. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── App shell ──────────────────────────────────────────────────────────── */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  min-height: 100dvh;
}

/* ── The navigation panel ────────────────────────────────────────────────────
   Three bands that do not scroll together: identity at the top, destinations in
   the middle, and the person signed in pinned to the bottom. Before this the
   whole column was one flex stack, so on a short window the account and the way
   out slid off the end of their own panel — on an office machine two clerks
   share, that is the difference between leaving and thinking you left.

   Colour: the panel was --surface-sunken, the same warm off-white as the page a
   hairline away. Nothing said where navigation ended and the register began.
   Value contrast does that work, and it costs no hue. */
.app__sidebar {
  display: grid;

  /* Named, not implicit. A grid with no grid-template-columns gets one `auto` column, and an
     auto track resolves to max-content rather than clamping to the container — so "Members and
     roles" in the English UI made every band 276px wide inside a 264px panel and twelve pixels
     of navigation painted over the register. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  min-height: 0;
  color: var(--nav-ink);
  background: var(--nav-bg);
  position: sticky;
  top: 0;
  height: 100dvh;
}

.app__main { min-width: 0; } /* lets grid children shrink instead of forcing page-wide scroll */

/*
  A grid child defaults to min-width:auto, which means it refuses to shrink below its widest
  content. With a register table inside, that pushes the whole column past the viewport and the
  PAGE scrolls sideways — carrying the header and the sidebar off-screen with it. Pinning the
  main column to zero lets the table scroll inside its own wrapper, which is where a wide table
  should scroll.
*/
.app__main,
.app__sidebar { min-inline-size: 0; }

/* ── Brand ──────────────────────────────────────────────────────────────── */

/* An underline under a wordmark is the one place a link decoration is always wrong: it makes the
   product's own name look like a footnote. It is a link, so it keeps its focus ring and its
   pointer — it just stops being drawn as running text. */
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-block-end: 1px solid var(--nav-border);
  font-weight: 650;
  font-size: var(--text-base);
  color: var(--nav-ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.brand:hover { color: var(--nav-ink); }

.brand__text { display: flex; flex-direction: column; min-inline-size: 0; gap: 1px; }

.brand__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand__org {
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--nav-ink-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand__mark {
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: 0.6rem;
  background: linear-gradient(140deg, var(--accent), oklch(from var(--accent) calc(l - 0.12) c h));
  display: grid;
  place-items: center;
  color: var(--accent-ink);
  font-size: var(--text-base);
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.22);
}

/* ── Navigation ─────────────────────────────────────────────────────────── */

.nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-4) var(--space-3);
}

/* The group heading is the smallest, faintest thing in the panel on purpose. It labels a set,
   read once; the destinations under it are read every time. Rendered at the same size and weight
   as the links — which is what it was — the hierarchy is inverted and the eye has to sort out
   which of thirteen similar lines are the ones it can press. */
.nav__group {
  padding: var(--space-4) var(--space-3) var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--nav-ink-faint);
}

.nav__group:first-child { padding-block-start: 0; }

/* Icons are not decoration in a list this long. Thirteen destinations of pure text is a column
   the eye has to READ; with a glyph in a fixed gutter it becomes a column the eye can SCAN, and
   after a week the shape is what people navigate by, not the word. */
.nav__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  color: var(--nav-ink-muted);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  transition: background var(--duration-fast), color var(--duration-fast);
}

.nav__link .ico { color: var(--nav-ink-faint); flex-shrink: 0; }

.nav__link:hover { background: var(--nav-hover); color: var(--nav-ink); }
.nav__link:hover .ico { color: var(--nav-ink-muted); }

.nav__link.active {
  background: var(--nav-active);
  color: var(--nav-ink);
  font-weight: 600;
}

.nav__link.active .ico { color: var(--accent); }

/* A lit edge on the leading side of the current row. On a dark ground a fill alone moves by a few
   percent of lightness and is easy to lose; a saturated 2px rule is unmistakable. */
.nav__link.active::before {
  content: "";
  position: absolute;
  inset-block: 22%;
  inset-inline-start: 0;
  inline-size: 2px;
  border-radius: 2px;
  background: var(--accent);
}

/* A count beside a destination is the reason to go there. The register pages carry one; the rest
   simply do not render the element. */
.nav__count {
  margin-inline-start: auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--nav-ink-faint);
}

/* ── The footer band ─────────────────────────────────────────────────────── */

.nav__foot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border-block-start: 1px solid var(--nav-border);
  background: var(--nav-bg-raised);
}

.userchip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  min-inline-size: 0;
}

.userchip__avatar {
  display: grid;
  place-items: center;
  inline-size: 1.875rem;
  block-size: 1.875rem;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--nav-ink);
  background: var(--brand-700);
}

.userchip__text { display: flex; flex-direction: column; min-inline-size: 0; gap: 1px; }

.userchip__name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--nav-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.userchip__role { font-size: var(--text-xs); color: var(--nav-ink-faint); }

.nav__tools { display: flex; align-items: center; gap: 2px; }
.nav__tools form { display: contents; }

/* ── Icon button ─────────────────────────────────────────────────────────── */

.iconbtn {
  display: inline-grid;
  place-items: center;
  inline-size: 1.875rem;
  block-size: 1.875rem;
  padding: 0;
  color: inherit;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--duration-fast), color var(--duration-fast);
}

.iconbtn--nav { color: var(--nav-ink-faint); }
.iconbtn--nav:hover { color: var(--nav-ink); background: var(--nav-hover); }
.iconbtn--nav:focus-visible { outline: none; box-shadow: var(--ring-nav); }

.iconbtn--page { color: var(--ink-muted); }
.iconbtn--page:hover { color: var(--ink-strong); background: var(--surface-sunken); }

/* ── Page header ────────────────────────────────────────────────────────── */

.page {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--space-6) var(--space-5) var(--space-8);
}

.page__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-block-end: var(--space-5);
}

.page__title {
  font-size: var(--text-2xl);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
}

.page__subtitle {
  color: var(--ink-muted);
  font-size: var(--text-sm);
  margin-block-start: var(--space-1);
}

/* ── Buttons ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--surface-card);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 550;
  cursor: pointer;
  transition: background var(--duration-fast), border-color var(--duration-fast),
              transform var(--duration-fast), box-shadow var(--duration-fast);
}

.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn--primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-sm); }
.btn--primary:hover:not(:disabled) { background: var(--accent-hover); }

/* A 1px lift on press — enough to feel mechanical, not enough to shift the layout. */
.btn--primary:active:not(:disabled) { transform: translateY(1px); }

.btn--ghost { border-color: var(--border-strong); }
.btn--ghost:hover:not(:disabled) { background: var(--surface-sunken); }

.btn--sm { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }

/* ── Forms ──────────────────────────────────────────────────────────────── */

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

.field__label { font-size: var(--text-sm); font-weight: 550; color: var(--ink-strong); }

.input, .textarea, .select {
  inline-size: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-card);
  color: var(--ink-strong);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}

.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.textarea { resize: vertical; min-block-size: 5rem; line-height: 1.6; }

.field__error { font-size: var(--text-xs); color: var(--danger); }

/* ── Toolbar ────────────────────────────────────────────────────────────── */

.toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-block-end: var(--space-4);
  margin-block-end: var(--space-4);
  border-block-end: 1px solid var(--border);
}

.toolbar__search { flex: 1 1 16rem; max-inline-size: 24rem; }

/* ── Task list ──────────────────────────────────────────────────────────── */

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

.task-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast),
              transform var(--duration-fast);
}

.task-row:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
  /* Moves toward the reading edge — start in RTL, start in LTR. Logical, so it flips. */
  transform: translateX(calc(var(--nudge, 2px) * -1));
}

:dir(ltr) .task-row:hover { transform: translateX(var(--nudge, 2px)); }

.task-row__main { min-width: 0; }

.task-row__title {
  font-weight: 550;
  color: var(--ink-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-row__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block-start: 2px;
  font-size: var(--text-xs);
  color: var(--ink-muted);
  flex-wrap: wrap;
}

.task-row__aside {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* ── Status + priority ──────────────────────────────────────────────────── */

.status-dot {
  inline-size: 0.625rem;
  block-size: 0.625rem;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  background: var(--status-todo);
}

.status-dot--progress { background: var(--status-progress); }
.status-dot--blocked  { background: var(--status-blocked); }
.status-dot--done     { background: var(--status-done); }
.status-dot--cancelled{ background: var(--status-cancelled); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 1px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 550;
  background: var(--surface-sunken);
  color: var(--ink-muted);
  white-space: nowrap;
}

.chip--overdue { background: var(--danger-soft); color: var(--danger); }
.chip--high    { background: oklch(from var(--priority-high) 95% 0.04 h); color: var(--priority-high); }
.chip--urgent  { background: var(--danger-soft); color: var(--priority-urgent); }
.chip--source  { background: var(--accent-soft); color: var(--accent); font-family: var(--font-mono); }

@media (prefers-color-scheme: dark) {
  .chip--high { background: oklch(from var(--priority-high) 28% 0.05 h); }
}

/* ── Cards / panels ─────────────────────────────────────────────────────── */

.card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.card__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-strong);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-block-end: var(--space-3);
}

/* ── Empty + loading states ─────────────────────────────────────────────── */

.empty {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--ink-muted);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
}

.empty__title { font-size: var(--text-lg); color: var(--ink-strong); font-weight: 600; }
.empty__hint { font-size: var(--text-sm); margin-block-start: var(--space-2); }

.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface-sunken) 25%,
    var(--surface-raised) 50%,
    var(--surface-sunken) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius);
  block-size: 3.25rem;
}

@keyframes shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* ── Comments ───────────────────────────────────────────────────────────── */

.comment { display: flex; gap: var(--space-3); padding-block: var(--space-3); }

.comment + .comment { border-block-start: 1px solid var(--border); }

.comment__avatar {
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: var(--radius-full);
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: var(--text-xs);
  font-weight: 650;
  flex-shrink: 0;
}

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

.comment__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-block-end: 2px;
}

.comment__author { font-weight: 600; color: var(--ink-strong); font-size: var(--text-sm); }
.comment__time { font-size: var(--text-xs); color: var(--ink-faint); }
.comment__text { white-space: pre-wrap; overflow-wrap: anywhere; }

.comment--internal {
  background: oklch(from var(--priority-high) 97% 0.02 h);
  border-inline-start: 3px solid var(--priority-high);
  padding-inline-start: var(--space-3);
  border-radius: var(--radius-sm);
}

@media (prefers-color-scheme: dark) {
  .comment--internal { background: oklch(from var(--priority-high) 24% 0.03 h); }
}

/* ── Utilities ──────────────────────────────────────────────────────────── */

.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.row { display: flex; align-items: center; gap: var(--space-3); }
.spacer { flex: 1; }
.muted { color: var(--ink-muted); }
.mono { font-family: var(--font-mono); }

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

/* Wide content scrolls inside itself; the page body never scrolls sideways. */
.scroll-x { overflow-x: auto; }

/* ── Blazor error UI ────────────────────────────────────────────────────── */

#blazor-error-ui {
  display: none;
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 1000;
  padding: var(--space-3) var(--space-5);
  background: var(--danger-soft);
  color: var(--danger);
  border-block-start: 1px solid var(--danger);
  font-size: var(--text-sm);
}

#blazor-error-ui .dismiss { cursor: pointer; float: inline-end; font-weight: 700; }

/* ── Kanban board ───────────────────────────────────────────────────────── */

.board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(15rem, 1fr);
  gap: var(--space-4);
  align-items: start;
  padding-block-end: var(--space-4);
}

.board__column {
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  min-block-size: 12rem;
  transition: background var(--duration-fast), border-color var(--duration-fast);
}

/* Only the drop target lights up — a board where every column reacts tells you nothing. */
.board__column--over {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.board__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-block-end: var(--space-3);
  margin-block-end: var(--space-3);
  border-block-end: 1px solid var(--border);
}

.board__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-strong);
}

.board__count {
  margin-inline-start: auto;
  font-size: var(--text-xs);
  color: var(--ink-muted);
  background: var(--surface-card);
  border-radius: var(--radius-full);
  padding: 0 var(--space-2);
}

.board__cards { display: flex; flex-direction: column; gap: var(--space-2); }

.board__card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
  cursor: grab;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-fast), opacity var(--duration-fast),
              transform var(--duration-fast);
}

.board__card:hover { box-shadow: var(--shadow); }
.board__card:active { cursor: grabbing; }

/* The card being dragged fades and lifts, so the cursor's payload is unambiguous. */
.board__card--dragging {
  opacity: 0.4;
  transform: scale(0.98);
}

.board__card-title {
  display: block;
  font-weight: 550;
  color: var(--ink-strong);
  text-decoration: none;
  line-height: 1.4;
}

.board__card-title:hover { text-decoration: underline; }

.board__card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-block-start: var(--space-2);
  font-size: var(--text-xs);
  color: var(--ink-muted);
}

.board__due--late { color: var(--danger); font-weight: 600; }

.board__card-chips {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
  margin-block-start: var(--space-2);
}

.board__card-chips:empty { display: none; }

.board__empty {
  text-align: center;
  color: var(--ink-faint);
  font-size: var(--text-xs);
  padding-block: var(--space-4);
}

/* ── Activity feed ──────────────────────────────────────────────────────── */

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

.activity__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-3);
  align-items: baseline;
  font-size: var(--text-sm);
}

.activity__dot {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: var(--radius-full);
  background: var(--border-strong);
  align-self: center;
}

.activity__time { font-size: var(--text-xs); color: var(--ink-faint); white-space: nowrap; }

.activity__value { color: var(--ink-strong); font-weight: 550; }

/* ── Label chips ────────────────────────────────────────────────────────── */

.label-picker { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.label-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid var(--border-strong);
  background: var(--surface-card);
  font-size: var(--text-xs);
  cursor: pointer;
  transition: border-color var(--duration-fast), background var(--duration-fast);
}

.label-chip:hover { border-color: var(--accent); }

.label-chip--on {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

/* ── Notification bell ──────────────────────────────────────────────────── */

.bell { position: relative; display: inline-flex; }

.bell .iconbtn { position: relative; }

/* Ringed in the panel's own colour so it reads as sitting ON the bell rather than beside it —
   at the size the footer row allows there is no room for two separate things. */
.bell__badge {
  position: absolute;
  inset-block-start: -2px;
  inset-inline-end: -2px;
  min-inline-size: 1rem;
  padding: 0 3px;
  border-radius: var(--radius-full);
  background: var(--danger);
  color: oklch(100% 0 0);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1rem;
  text-align: center;
  box-shadow: 0 0 0 2px var(--nav-bg-raised);
}

.bell__panel {
  position: absolute;
  inset-block-end: calc(100% + var(--space-2));
  inset-inline-end: 0;
  inline-size: min(22rem, 85vw);
  max-block-size: 24rem;
  overflow-y: auto;
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 50;
}

.bell__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3);
  border-block-end: 1px solid var(--border);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-strong);
  position: sticky;
  top: 0;
  background: var(--surface-card);
}

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

.bell__item {
  padding: var(--space-3);
  border-block-end: 1px solid var(--border);
  font-size: var(--text-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.bell__item:last-child { border-block-end: none; }

/* Unread carries a bar on the reading edge — logical, so it flips with direction. */
.bell__item--unread {
  background: var(--accent-soft);
  border-inline-start: 3px solid var(--accent);
}

.bell__item a { color: var(--ink-strong); text-decoration: none; }
.bell__item a:hover { text-decoration: underline; }

.bell__time { font-size: var(--text-xs); color: var(--ink-faint); }

.bell__empty {
  padding: var(--space-5);
  text-align: center;
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

/* ── Auth screens ───────────────────────────────────────────────────────── */

.auth {
  min-block-size: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--space-5);
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, var(--accent-soft), transparent 70%),
    var(--surface-page);
}

.auth__card {
  inline-size: min(25rem, 100%);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  box-shadow: var(--shadow-lg);
}

/* The brand lockup, centred, on the two pages that are the product's front door. It is a flex row
   everywhere else; here the row itself has to sit in the middle of the card. */
.brand--centred {
  justify-content: center;
  text-align: center;
  padding: 0;
  border-block-end: 0;
  margin-block-end: var(--space-5);
}

.brand--centred .brand__text { text-align: start; }

/* On the auth card the lockup sits on paper, not on the navy panel. */
.auth__card .brand { color: var(--ink-strong); }
.auth__card .brand__org { color: var(--ink-muted); }

.auth__intro { margin-block-end: var(--space-5); }

.auth__intro h1 {
  font-size: var(--text-xl);
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--ink-strong);
}

.auth__intro .muted { font-size: var(--text-sm); margin-block-start: var(--space-1); }

.auth__aside {
  margin-block-start: var(--space-4);
  text-align: center;
  font-size: var(--text-sm);
}

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

.auth__error {
  background: var(--danger-soft);
  color: var(--danger);
  border-radius: var(--radius);
  padding: var(--space-3);
  font-size: var(--text-sm);
  margin-block-end: var(--space-4);
  list-style-position: inside;
}

/* ── Sidebar account (identity + sign out) ──────────────────────────────── */

.sidebar__account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-block-start: var(--space-3);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--border);
  min-inline-size: 0;
}

.sidebar__account-name {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-inline-size: 0;
}

@media (max-width: 900px) {
  /* The horizontal bar has no room for a name; the sign-out control must survive, so the
     name is what goes, not the button. */
  .sidebar__account {
    margin-block-start: 0;
    padding-block-start: 0;
    border-block-start: none;
  }

  .sidebar__account-name,
  .sidebar__account-label { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Narrow screens

   This block lives at the END of the file, and that is load-bearing rather than
   tidy. It used to sit up in the app-shell section, above the rules that define
   .brand__text, .userchip__text and .nav — all of which are single-class
   selectors, exactly as specific as the ones in here. Equal specificity is
   settled by source order, so every override in this block lost to the base rule
   written after it, and the phone layout silently rendered the desktop one:
   .brand__text stayed `display: flex`, the wordmark kept its full width, the two
   auto grid tracks took 447px between them on a 390px screen, the nav's 1fr was
   squeezed to zero, and the entire navigation vanished on every phone.

   Nothing errored, nothing warned, and the media query reported as matching the
   whole time — matchMedia said true while not one of its declarations applied.
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 60rem) {
  .app { grid-template-columns: 1fr; }

  /* Still a grid, three columns instead of three rows: brand, the scrolling strip of
     destinations, and the account. Switching it to `display: flex` here — which is what the
     first attempt did — left .nav with no height of its own inside a row that had none either,
     and the entire navigation collapsed to zero on every phone. A grid keeps the row heights
     resolved by the tallest cell, which is what stops that. */
  .app__sidebar {
    position: static;
    height: auto;
    /* min-content, not auto: an `auto` track sizes to max-content and refuses to give the
       space back, so on a 390px screen the brand and the account took 447px between them and
       the nav's 1fr resolved to zero. */
    grid-template-columns: min-content minmax(0, 1fr) min-content;
    grid-template-rows: auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-block-end: 1px solid var(--nav-border);
  }

  .brand { padding: 0; border-block-end: 0; }
  .brand__text { display: none; }

  .nav__foot {
    border-block-start: 0;
    background: none;
    padding: 0;
  }

  .userchip__text { display: none; }

  /* The nav becomes a horizontal strip that scrolls. Every destination stays reachable — a
     hamburger would hide the whole product behind a tap on the one screen size where people are
     most often checking a single thing quickly. */
  .app__sidebar .nav {
    flex-direction: row;
    gap: var(--space-1);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    flex: 1;
    min-inline-size: 0;
    padding: 0;
  }

  .app__sidebar .nav::-webkit-scrollbar { display: none; }

  .app__sidebar .nav__link { white-space: nowrap; }

  /* Section headings organise a vertical list; strung along a horizontal one they read as
     destinations that do not respond to a tap. */
  .app__sidebar .nav__group { display: none; }

  .app__sidebar .spacer { display: none; }
}