/* Home: expressive, not a dashboard (design-system.md "Home"). One hero with
   the composer, then what the graph holds (D46 2): GRC Core's kinds as cards,
   each count with a bar on one shared scale. Home shows nothing it cannot
   back: every number is read from the graph. */

.home {
  max-width: 1320px;
}

.hero {
  padding: var(--space-1600) var(--space-1600) var(--space-1100);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-400);
  background: var(--surface-hero);
}

.hero__title {
  max-width: 18ch;
  margin: var(--space-600) 0 var(--space-450);
  color: var(--text-primary);
  font-size: var(--type-hero);
  overflow-wrap: anywhere;
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: calc(var(--type-tracking-hero) * 1em);
}

.hero__title-soft {
  color: var(--text-secondary);
  font-weight: 400;
}

.hero__lede {
  max-width: 54ch;
  margin: 0 0 var(--space-700);
  color: var(--text-muted);
  font-size: var(--type-section);
  line-height: 1.6;
}

/* Example questions under the box (D46 2): quiet pills that ask on Ask. */
.hero__examples {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-200);
  margin: var(--space-450) 0 0;
  padding: 0;
  list-style: none;
}

.hero__example {
  display: inline-block;
  padding: var(--space-150) var(--space-350);
  border: var(--rule-hairline) solid var(--border-subtle);
  border-radius: var(--radius-full);
  corner-shape: round;
  background: var(--surface-raised);
  color: var(--text-secondary);
  font-size: var(--type-small);
  text-decoration: none;
}

.hero__example:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.hero__guide {
  margin: var(--space-450) 0 0;
  color: var(--text-muted);
  font-size: var(--type-small);
}

.hero__guide a {
  color: var(--text-secondary);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
}

.hero__guide a:hover {
  color: var(--text-primary);
  text-decoration-color: currentColor;
}

/* What the graph holds (D46 2). Neutral cards (task 26), the kind's icon the
   only colour; the bar is drawn in the text colour on a sunk track, so it
   reads as a quantity, not a state. The number beside it is the text. */
.holds { margin-top: var(--space-800); }
.holds__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-200) var(--space-400); }
.holds__title { margin: 0; font-size: var(--type-section); font-weight: 650; }
.holds__meta { margin: 0; color: var(--text-muted); font-size: var(--type-small); }
.holds__empty { margin: var(--space-400) 0 0; color: var(--text-muted); font-size: var(--type-small); }
.holds__how { margin-top: var(--space-400); font-size: var(--type-small); color: var(--text-secondary); }
.holds__rules { margin: var(--space-200) 0 0; padding-inline-start: var(--space-400); }
.holds__rules > li + li { margin-top: var(--space-100); }

.kinds {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--space-400);
  margin: var(--space-400) 0 0;
  padding: 0;
  list-style: none;
}

.kind {
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
  padding: var(--space-400);
  border: var(--rule-hairline) solid var(--border-subtle);
  border-radius: var(--radius-300);
  background: var(--surface-raised);
}

.kind__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-300);
  margin: 0;
  font-size: var(--type-normal);
}
.kind__name {
  display: inline-flex;
  align-items: center;
  gap: var(--space-200);
  color: var(--text-primary);
  font-weight: 650;
  text-decoration: none;
}
.kind__name:hover { text-decoration: underline; text-underline-offset: 3px; }
.kind__icon { display: inline-flex; color: var(--accent-base); }
.kind__icon .icon { width: 18px; height: 18px; }
.kind__count { color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kind__unit { color: var(--text-muted); font-size: var(--type-meta); font-weight: 400; }

.kind-bar { display: block; width: 100%; height: var(--space-150); }
.kind-bar__track { fill: var(--surface-sunk); }
.kind-bar__fill { fill: var(--text-secondary); }

.kind__concepts { margin: 0; padding: 0; list-style: none; font-size: var(--type-small); }
.kind__concepts > li { display: flex; justify-content: space-between; gap: var(--space-300); padding-block: var(--space-50); }
.kind__concept { color: var(--text-primary); }
.kind__concept-count { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.kind__more { align-self: flex-start; color: var(--text-secondary); font-size: var(--type-meta); }
.kind__examples { margin: auto 0 0; padding-top: var(--space-200); color: var(--text-muted); font-size: var(--type-meta); }

/* The headline keeps its one size at every width (DS-47): a smaller size below
   a width would undo browser zoom, which narrows the window it is measured in. */
@media (max-width: 760px) {
  .hero {
    padding: var(--space-800) var(--space-500) var(--space-600);
  }
}