/* Home dashboard (ticket 502, ticket 976), route #/home. One column: page head, status banner (with
   the page's one prominent button inside it), up to three big numbers, one short list. Reuses the
   shared .card/.glass/.btn tokens from console.css; only the page layout below is new. The level is
   always spelled out in text, the border and label colour only back it up. At phone width every block
   stacks and nothing scrolls sideways. */

.home {
  max-width: 56rem;
  margin: 1.5rem auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* "Last 7 days" in the head's time slot: the dashboard's window is fixed by the API, so it is a label,
   drawn like the time control's selected segment (css/console.css .segmented__item[aria-checked])
   and not a control (design note rule 10). */
.home__window {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  color: var(--ink);
  font: var(--type-footnote);
  font-weight: 500;
  white-space: nowrap;
}

/* Status banner: quiet is neutral, watch is amber, act is red. */
.home-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--border-strong);
  border-left-width: 0.4rem;
  border-radius: var(--radius);
  background: var(--glass);
}

.home-status__text {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

/* The banner's one action, at its trailing end. */
.home-status__action {
  flex: none;
  min-height: 2.75rem;
  padding-inline: 1.25rem;
  font-size: var(--fs-sm);
  text-decoration: none;
}

.home-status__level {
  font: var(--type-footnote);
  font-weight: 600;
  color: var(--ink-dim);
}

.home-status__headline {
  margin: 0;
  font-size: var(--fs-md);
  line-height: 1.4;
  color: var(--ink);
}

.home-status--quiet {
  border-left-color: var(--border-strong);
}

.home-status--watch {
  border-left-color: var(--st-4xx);
}

.home-status--watch .home-status__level {
  color: var(--st-4xx);
}

.home-status--act {
  border-left-color: var(--st-5xx);
}

.home-status--act .home-status__level {
  color: var(--st-5xx);
}

/* The numbers: three tiles in a row, one per line on a phone. */
.home-numbers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.home-number {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--glass);
}

/* A linked number (ticket 832): value and label are one link and the whole box is its target. The
   link's ::after covers the box, so a click anywhere in it opens the list; the focus ring is drawn
   around the box, not around the text. */
.home-number {
  position: relative;
}

.home-number__link {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  border-radius: inherit;
}

.home-number__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.home-number:has(.home-number__link):hover {
  border-color: var(--gold);
  background: var(--gold-soft);
}

.home-number__link:hover .home-number__label {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.home-number__link:focus-visible {
  outline: none;
}

.home-number__link:focus-visible::after {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.home-number__value {
  font-size: var(--fs-xl);
  line-height: 1.1;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.home-number__label {
  color: var(--ink-dim);
  font-size: var(--fs-xs);
  line-height: 1.35;
}

/* The list: at most five rows, each one a link. */
.home-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.1rem 1.25rem;
}

.home-list__title {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--ink);
}

.home-list__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.home-list__row + .home-list__row {
  border-top: 1px solid var(--border);
}

.home-row {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 0;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

/* A pixel character leads the row (ticket 913): the Rogue AI list draws one per agent. The canvas is
   sized from script; hard pixel edges survive any browser zoom. */
.agent-icon {
  flex: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.home-row--agent {
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
}

.home-row__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

/* The same character at the start of an address cell in the AI agents table. */
.agent-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 100%;
}

.agent-cell a {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

a.home-row:hover .home-row__label {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.home-row__label {
  color: var(--ink);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}

.home-row__detail {
  color: var(--ink-dim);
  font-size: var(--fs-xs);
  line-height: 1.4;
}

.home-list__empty {
  margin: 0;
  color: var(--ink-body);
  font-size: var(--fs-sm);
}

/* Error state: one sentence and Retry. */
.home-error {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.home-error__text {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-sm);
}

@media (max-width: 760px) {
  .home {
    margin-block: 1rem;
  }

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

  .home-status {
    flex-direction: column;
    align-items: stretch;
  }

  .home-status__action {
    justify-content: center;
  }
}

/* The placeholder views/home.js draws while the dashboard loads (ticket 926): the page's own rows, in
   its own column, so the content replaces them in place. Heights follow the drawn page: a 60px head,
   a status banner of one to two lines, tiles of 90px, a short list. */
.skeleton-state--home {
  max-width: 56rem;
  margin: 1.5rem auto;
  padding: 0;
}

.skeleton-state--home .skeleton-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.skeleton-state--home .skeleton-block--head {
  height: 3.75rem;
}

@media (max-width: 760px) {
  .skeleton-state--home {
    margin-block: 1rem;
  }

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

  .skeleton-state--home .skeleton-block--band {
    height: 7.25rem;
  }

  .skeleton-state--home .skeleton-block--list {
    height: 7.6rem;
  }
}