/* 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: none; /* the page's own content column, like every Workbench page (ticket 001076, audit SC4) */
  margin: 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* The head sits in the column's flex gap, so it adds only what the page-head gap has over it (css/
   console.css --page-head-gap): the gap under the title is the same here as on every page. */
.home > .workspace-head {
  margin-bottom: calc(var(--page-head-gap) - var(--space-5));
}

/* "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;
  /* One numeral line for every tile, so a tile whose value is a short text (css/depth.css takes
     it a step down) still starts its label on the same line as its neighbours (ticket 001088). */
  min-height: calc(var(--fs-xl) * 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);
}

/* "Finish setting up" (ticket 1000, ticket 001088): one line (title, count, bar, Dismiss) that opens
   the six rows below it. The title is the toggle, so the card stays small while the owner has the
   page's headline, numbers and list on the first screen. */
.home-setup {
  gap: var(--space-3);
  padding-block: var(--space-3);
}

.home-setup__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}

.home-setup__title {
  font-size: var(--fs-base);
}

.home-setup__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.home-setup__toggle::after {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid var(--ink-dim);
  border-bottom: 2px solid var(--ink-dim);
  transform: rotate(-45deg);
}

.home-setup__toggle[aria-expanded="true"]::after {
  transform: rotate(45deg);
}

.home-setup__toggle:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 0.25rem;
}

.home-setup__count {
  color: var(--ink-dim);
  font-size: var(--fs-xs);
  white-space: nowrap;
}

/* The bar repeats the count for the eye (the progress element is aria-hidden). */
.home-setup__bar {
  flex: 0 1 8rem;
  width: 8rem;
  height: 0.4rem;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: var(--border-strong);
  accent-color: var(--st-2xx);
  -webkit-appearance: none;
  appearance: none;
}

.home-setup__bar::-webkit-progress-bar {
  background: var(--border-strong);
}

.home-setup__bar::-webkit-progress-value {
  background: var(--st-2xx);
}

.home-setup__bar::-moz-progress-bar {
  background: var(--st-2xx);
}

/* Dismiss is at the head's trailing end, never against the count. */
.home-setup__dismiss {
  margin-left: auto;
}

.home-setup__error {
  margin: 0;
  color: var(--st-5xx);
  font-size: var(--fs-xs);
}

/* `display: flex` on the shared rows rule would beat the hidden attribute. */
.home-setup__rows[hidden] {
  display: none;
}

/* A row is its state icon, then its label and sentence, on one line each. */
.home-setup__row {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-3);
  padding-inline: var(--space-2);
  border-radius: 0.5rem;
}

.home-setup__tick {
  flex: none;
  width: 1.25rem;
  color: var(--ink-dim);
  font-size: var(--fs-sm);
  line-height: 1.4;
  text-align: center;
}

.home-setup__row.is-done .home-setup__tick {
  color: var(--st-2xx);
}

/* Every row answers a hover alike, with a tint and no underline on one of them. */
a.home-setup__row:hover {
  background: rgba(255, 255, 255, 0.05);
}

a.home-setup__row:hover .home-row__label {
  text-decoration: none;
}

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

/* 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: none;
  margin: 1.5rem 0;
  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;
  }
}