/* Home surface: the restricted-access login state and the authenticated
 * hub. Layered on design-system.css, which must be linked first.
 *
 * This page is two screens with one job each. Signed out, it says the
 * desk is restricted and offers the single door in. Signed in, it says
 * who you are, what your role may do, and where to go -- nothing else,
 * because everything that actually moves inventory lives one click away
 * on the matrix.
 *
 * Nothing here redefines a `.lw-*` primitive or a shared token: every
 * rule is scoped under a `.home-*` class so the matrix and the admin
 * pages cannot be changed from this file. Where a primitive needs a
 * different size for this page, it is refined through the page scope
 * (`.home-gate__action`), never at `.lw-btn`.
 */

/* ======================================================================
   Shared chrome
   ====================================================================== */

/* The same mark the matrix topbar uses: a bordered square, no fill and
   no image, so the identity of the product is one line of CSS and never
   a network request. */
.home-brand-mark {
  width: 14px;
  height: 14px;
  flex: none;
  border: 1.5px solid var(--lw-text);
  border-radius: var(--lw-radius-xs);
}

.home-brand-name {
  font-weight: var(--lw-weight-semibold);
  letter-spacing: var(--lw-tracking-tight);
}

.home-brand-sub {
  color: var(--lw-text-muted);
  font-size: var(--lw-text-size-meta);
}

/* ======================================================================
   Signed out -- the gate
   ====================================================================== */

/* Off the top edge but well above centre: a signed-out operator reads
   this card first and should not have to hunt down the page for it. */
.home-gate {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(var(--lw-space-8), 12vh, 8rem) var(--lw-page-gutter)
    var(--lw-space-10);
}

.home-gate__panel {
  width: min(30rem, 100%);
}

.home-gate__body {
  --lw-gap: var(--lw-space-3);
}

.home-gate__lede {
  margin: 0;
}

/* The one action on the page, so it is a step larger than a desk
   control -- but still start-aligned: a full-bleed button would be the
   loudest thing in the product, on its quietest screen. */
.home-gate__action {
  align-self: flex-start;
  height: 34px;
  padding: 0 var(--lw-space-4);
  font-size: var(--lw-text-size-body);
}

.home-gate__note {
  margin: 0;
  line-height: var(--lw-leading-normal);
}

/* ======================================================================
   Signed in -- the hub
   ====================================================================== */

.home-whoami {
  display: flex;
  align-items: baseline;
  gap: var(--lw-space-2);
  min-width: 0;
}

.home-whoami__name {
  color: var(--lw-text-body);
  font-size: var(--lw-text-size-control);
}

.home-whoami__email {
  color: var(--lw-text-muted);
  font-size: var(--lw-text-size-meta);
}

.home-main {
  width: min(56rem, 100%);
  margin: 0 auto;
  padding: var(--lw-space-6) var(--lw-page-gutter) var(--lw-space-10);
}

/* Always rendered, never display:none. It is the live region that
   reports a failed logout, and a region removed from the box tree
   announces nothing when it is finally filled in. Empty, it collapses
   to zero height and draws no box. */
.home-alert {
  margin: 0 0 var(--lw-space-4);
  color: var(--lw-danger);
  font-size: var(--lw-text-size-control);
  line-height: var(--lw-leading-tight);
}
.home-alert:empty {
  margin: 0;
}
.home-alert:not(:empty) {
  padding: var(--lw-space-2) var(--lw-space-3);
  background: var(--lw-danger-tint);
  border: 1px solid var(--lw-danger-line);
  border-radius: var(--lw-radius-lg);
}

.home-headline {
  margin-bottom: var(--lw-space-5);
}

.home-role-summary {
  margin: var(--lw-space-1-5) 0 0;
  max-width: 44rem;
  color: var(--lw-text-muted);
  font-size: var(--lw-text-size-control);
  line-height: var(--lw-leading-normal);
  text-wrap: pretty;
}

.home-panel {
  overflow: hidden;
}

.home-destinations {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* An index, not a deck of cards: one bordered panel, rows separated by a
   hairline. Ten destinations would still read as one quiet list. */
.home-destination {
  display: grid;
  grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr);
  align-items: baseline;
  gap: var(--lw-space-1) var(--lw-space-4);
  padding: var(--lw-space-2-5) var(--lw-space-3);
}
.home-destination + .home-destination {
  border-top: 1px solid var(--lw-border-hair);
}

.home-destination__link {
  color: var(--lw-accent);
  font-size: var(--lw-text-size-body);
  font-weight: var(--lw-weight-semibold);
  text-decoration: none;
  transition: color var(--lw-duration-fast) var(--lw-ease);
}
.home-destination__link:hover {
  color: var(--lw-accent-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.home-destination__note {
  margin: 0;
  color: var(--lw-text-muted);
  font-size: var(--lw-text-size-control);
  line-height: var(--lw-leading-tight);
  text-wrap: pretty;
}

.home-destination-group {
  border-top: 1px solid var(--lw-border);
}

.home-group-label {
  padding: var(--lw-space-2-5) var(--lw-space-3) 0;
}

/* ======================================================================
   Responsive -- the desk is seated, but this page is the one an operator
   opens on a phone to check who they are signed in as.
   ====================================================================== */

@media (max-width: 600px) {
  /* The topbar carries an email; below this width it wraps to a second
     line rather than squeezing the identity out of the page. */
  .home-page .lw-topbar {
    height: auto;
    flex-wrap: wrap;
    padding-top: var(--lw-space-2);
    padding-bottom: var(--lw-space-2);
  }

  .home-destination {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-gate {
    padding: var(--lw-space-6) var(--lw-page-gutter);
  }
}