/* ==========================================================================
   OrthoAgent — Layout
   --------------------------------------------------------------------------
   Page-level structure (as opposed to reusable components):
     1. Auth split-screen (login).
     2. Signed-in app shell (sidebar + topbar + content), rendered by shell.js.
   Consumes tokens.css; load after tokens.css + components.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Auth split-screen
   -------------------------------------------------------------------------- */
.auth-layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
}

/* Left: brand / value panel. Deep teal with a soft layered gradient (CSS only,
   no images → stays within the same-origin CSP). */
.auth-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-8);
  color: #ecfeff;
  background: radial-gradient(
      1200px 600px at 15% -10%,
      rgba(255, 255, 255, 0.14),
      transparent 60%
    ),
    linear-gradient(150deg, #0f766e 0%, #0d9488 42%, #0b5a52 100%);
  overflow: hidden;
}

.auth-brand__logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
}

.auth-brand__headline {
  font-size: clamp(1.75rem, 2.5vw, 2.5rem);
  line-height: 1.15;
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  max-width: 18ch;
}

.auth-brand__sub {
  margin-top: var(--space-3);
  font-size: var(--text-base);
  color: rgba(236, 254, 255, 0.85);
  max-width: 42ch;
}

.auth-brand__features {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: rgba(236, 254, 255, 0.95);
}

.auth-brand__features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

/* The feature ticks are inline SVG now (Phase 10 §8), so the chip styles the icon directly
   rather than a unicode character that rendered differently on every platform. */
.auth-brand__features li > svg {
  flex: none;
  width: 22px;
  height: 22px;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.18);
}

/* The brand lockup: an uploaded logo, or the built-in mark. */
.auth-brand__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.auth-brand__mark {
  display: inline-flex;
}
.brandmark {
  width: auto;
  max-width: 160px;
  object-fit: contain;
}

.auth-brand__disclaimer {
  font-size: var(--text-xs);
  color: rgba(236, 254, 255, 0.7);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: var(--space-4);
  max-width: 52ch;
}

/* Right: the form column. */
.auth-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--color-bg);
}

.auth-card {
  width: 100%;
  max-width: 384px;
}

.auth-card__title {
  font-size: var(--text-2xl);
  letter-spacing: -0.01em;
}

.auth-card__subtitle {
  margin-top: var(--space-1);
  margin-bottom: var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.auth-hint {
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  line-height: var(--leading-normal);
}

.auth-hint code {
  font-family: var(--font-mono);
  color: var(--color-text);
}

/* Stack on narrow screens: hide the brand panel, keep the form usable. */
@media (max-width: 800px) {
  .auth-layout {
    grid-template-columns: 1fr;
  }
  .auth-brand {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   2. App shell — sidebar + topbar + scrollable content (rendered by shell.js)
   -------------------------------------------------------------------------- */
.app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 248px 1fr;
}

/* Sidebar */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-4);
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-inline: var(--space-2);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-brand);
  letter-spacing: -0.01em;
  text-decoration: none;
}

.sidebar__brand:hover {
  text-decoration: none;
}

/* The mark sits in a tinted tile so the wordmark is not competing with a bare line drawing. */
.sidebar__mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--radius-md);
  background: var(--color-brand-weak);
  color: var(--color-brand-hover);
}

.sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Grouped nav (Phase 9.1): clinical work and oversight are different kinds of task and
   should not sit at the same visual level in one flat list. */
.navgroup {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.navgroup__label {
  padding: 0 var(--space-3) var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.navlink {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.navlink:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
  text-decoration: none;
}

.navlink.is-active {
  background: var(--color-brand-weak);
  color: var(--color-brand-hover);
  font-weight: var(--weight-semibold);
}

.navlink__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: var(--color-text-faint);
}

.navlink:hover .navlink__icon {
  color: var(--color-text-muted);
}

.navlink.is-active .navlink__icon {
  color: var(--color-brand);
}

.sidebar__spacer {
  flex: 1;
}

.sidebar__foot {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  padding-inline: var(--space-2);
}

/* --------------------------------------------------------------------------
   Identity card (Phase 9.1) — who you are signed in as, and where.
   Replaces a raw email address in the topbar: an address is not an identity,
   and it leaks on a screen a patient can see.
   -------------------------------------------------------------------------- */
.identity {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  min-width: 0;
}

.identity__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
  color: var(--color-brand-contrast);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
}

.identity__text {
  min-width: 0;
}

.identity__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The one line that tells the three staff roles apart at a glance, in words as well as
   in colour — colour alone is never the only carrier of meaning. */
.identity__role {
  font-size: var(--text-xs);
  color: var(--color-brand-hover);
  font-weight: var(--weight-medium);
  /* Wrap rather than clip: the centre name is the half that was getting cut off, and it is
     the half that answers "where am I signed in". Two short lines beat a truncated one. */
  line-height: 1.35;
}

.identity__flag {
  margin-top: 2px;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

/* Body column */
.app__body {
  display: flex;
  flex-direction: column;
  min-width: 0; /* let wide tables scroll instead of stretching the grid */
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: var(--header-height);
  padding-inline: var(--space-6);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: var(--z-header);
}

.topbar__heading {
  min-width: 0;
}

.topbar__title {
  font-size: var(--text-xl);
  letter-spacing: -0.01em;
}

/* One line of orientation under the title: what this page is for, or what state it is in.
   Optional — a page passes it to mountShell() only when it has something to say. */
.topbar__subtitle {
  margin-top: 2px;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Page-level actions belong beside the page title, not buried in the content. */
.topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.topbar__user {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

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

.content {
  flex: 1;
  padding: var(--space-6);
  max-width: var(--reading-max);
  width: 100%;
  /* Flex item default min-width:auto lets a wide child stretch the whole shell instead of
     scrolling inside its own container. */
  min-width: 0;
}

/* Case page: viewer (left) + verdict (right), stacking on narrow screens. */
.case-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--space-4);
  align-items: start;
}

.case-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

@media (max-width: 900px) {
  .case-grid {
    /* minmax(0, ...) not 1fr: a 1fr track has an implicit `auto` minimum, so the collapsed
       column still refuses to shrink below its widest child and pushes the page sideways. */
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Review page: queue (left) + evidence & decision (right). */
.reviews-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: var(--space-4);
  align-items: start;
}

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

/* Two X-rays side by side in the evidence pack. */
.evidence-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

@media (max-width: 560px) {
  .evidence-images {
    grid-template-columns: 1fr;
  }
}

/* Responsive: collapse the sidebar into a horizontal top strip. */
@media (max-width: 860px) {
  .app {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: static;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    /* A grid item defaults to min-width:auto, so it refuses to shrink below its content and
       pushes the whole grid wider than the viewport — `overflow-x: auto` above never got the
       chance to scroll anything. Without this every staff page overflowed at 390px (measured
       435-505px against a 390px viewport), which also clipped the tables inside .content even
       though they have their own scroll container. .app__body already carries this fix; the
       sidebar was simply missed. */
    min-width: 0;
  }
  .sidebar__nav {
    flex-direction: row;
    /* Wrap rather than hide the overflow behind a scroll: a nav item a phone user cannot see
       is a feature they do not know exists. Two short rows beat a hidden scrollable strip. */
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  .navgroup {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
  }
  /* The group headings are vertical-list furniture; in a horizontal strip they would read as
     nav items themselves. The grouping still shows through the accent + order. */
  .navgroup__label {
    display: none;
  }
  .sidebar__spacer,
  .sidebar__foot,
  .identity {
    display: none;
  }
  .content {
    padding: var(--space-4);
  }
  .topbar {
    padding-inline: var(--space-4);
    /* The measured cause of every staff page overflowing at 390px. The topbar is a flex row
       (title + bell + email + role badge + sign-out) whose default min-width:auto refuses to
       shrink below its content, forcing 496px and dragging .app__body, .app, body and html
       out with it. Wrapping to a second line and letting the email truncate keeps the page
       inside the viewport; the height is auto so the row can grow. */
    min-width: 0;
    flex-wrap: wrap;
    height: auto;
    row-gap: var(--space-2);
    padding-block: var(--space-3);
  }
  .topbar__user {
    min-width: 0;
  }
  .topbar__email {
    /* The one genuinely unbounded item: an address can be any length. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 45vw;
  }
}

/* When the verdict card has nothing of its own to say (the header covers status, finding and
   author), the viewer takes the whole row rather than sitting beside an empty box. */
.case-grid--single {
  grid-template-columns: minmax(0, 1fr);
}