@import url("../tokens.css");
@import url("./site-shell.css");

.home-hero {
  padding-block: var(--space-xl);
  background: var(--color-paper);
  border-block-end: var(--rule-hair) solid var(--color-rule);
}

.home-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(19rem, 0.65fr);
  gap: var(--space-xl);
  align-items: end;
}

.home-hero p {
  margin: var(--space-sm) 0 0;
  color: var(--color-neutral);
  font-size: var(--text-lg);
}

.preference-panel {
  padding: var(--space-md);
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
}

.preference-panel b {
  display: block;
  margin-block-end: var(--space-sm);
  font-family: var(--font-display);
}

.preference-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
}

.preference-grid label {
  display: grid;
  gap: var(--space-2xs);
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 700;
}

.preference-grid select {
  min-height: 2.75rem;
  width: 100%;
  padding-inline: var(--space-sm);
  background: var(--color-paper);
  border: var(--rule-fine) solid var(--color-rule-2);
  border-radius: var(--radius-input);
  color: var(--color-ink);
  font: inherit;
}

.visit-state {
  margin: var(--space-sm) 0 0;
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.workbench {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-md);
  padding-block: var(--space-xl);
}

.home-panel {
  grid-column: span 6;
  min-width: 0;
  padding: var(--space-lg);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.home-panel.full {
  grid-column: 1 / -1;
}

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block-end: var(--space-md);
  border-block-end: var(--rule-hair) solid var(--color-rule);
}

.panel-head span {
  display: block;
  margin-block-end: var(--space-2xs);
  color: var(--color-accent);
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.panel-head a,
.quick-link {
  flex: none;
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
}

.watch-list {
  display: grid;
  gap: 0;
}

.watch-item {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--space-sm);
  padding-block: var(--space-md);
  border-block-end: var(--rule-hair) solid var(--color-rule);
  color: inherit;
  text-decoration: none;
}

.watch-item:last-child {
  border-block-end: 0;
}

.watch-item time,
.watch-item .watch-status {
  color: var(--color-muted);
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
}

.tag.update {
  display: inline-flex;
  margin-inline-start: var(--space-xs);
  padding: var(--space-3xs) var(--space-xs);
  background: var(--color-success-soft);
  border-radius: var(--radius-pill);
  color: var(--color-success);
  font-size: var(--text-xs);
  font-weight: 700;
}

.watch-item b {
  display: block;
  font-family: var(--font-display);
}

.watch-item p {
  margin: var(--space-2xs) 0 0;
  color: var(--color-neutral);
  font-size: var(--text-sm);
}

.deadline-callout {
  display: block;
  margin-block-start: var(--space-md);
  padding: var(--space-md);
  background: var(--color-warning-soft);
  border-inline-start: var(--rule-bold) solid var(--color-warning);
  border-radius: 0 var(--radius-input) var(--radius-input) 0;
  color: inherit;
  text-decoration: none;
}

.deadline-callout span {
  display: block;
  color: var(--color-warning);
  font-size: var(--text-xs);
  font-weight: 700;
}

.deadline-callout b {
  display: block;
  margin-block-start: var(--space-2xs);
}

.deadline-callout p {
  margin: var(--space-2xs) 0 0;
  color: var(--color-neutral);
  font-size: var(--text-sm);
}

.risk-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block-end: var(--rule-hair) solid var(--color-rule);
}

.risk-kpi {
  min-width: 0;
  padding: var(--space-md);
  border-inline-end: var(--rule-hair) solid var(--color-rule);
  border-block-end: var(--rule-hair) solid var(--color-rule);
}

.risk-kpi:nth-child(2n) {
  border-inline-end: 0;
}

.risk-kpi:nth-last-child(-n + 2) {
  border-block-end: 0;
}

.risk-kpi span,
.health-card span {
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 700;
}

.risk-kpi strong {
  display: block;
  margin-block-start: var(--space-2xs);
  font-family: var(--font-outlier);
  font-size: clamp(1.45rem, 2vw, 2rem);
  font-variant-numeric: tabular-nums;
}

.risk-kpi small {
  display: block;
  margin-block-start: var(--space-2xs);
  color: var(--color-muted);
}

.risk-note,
.empty-state {
  margin: var(--space-md) 0 0;
  color: var(--color-neutral);
  font-size: var(--text-sm);
}

.home-depth-callout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  margin-block-start: var(--space-md);
  padding: var(--space-md);
  background: var(--color-accent-soft);
  color: inherit;
  border-inline-start: var(--rule-thick) solid var(--color-accent);
  border-radius: var(--radius-input);
  text-decoration: none;
}

.home-depth-callout span,
.home-depth-callout small {
  display: block;
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.home-depth-callout b {
  display: block;
  margin-block: var(--space-3xs);
  font-family: var(--font-outlier);
}

.competition-callout {
  background: color-mix(in srgb, var(--color-success) 7%, var(--color-paper));
  border-inline-start-color: var(--color-success);
}

.health-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
  margin-block-start: var(--space-md);
}

.health-card {
  min-width: 0;
  padding: var(--space-md);
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-input);
}

.health-card b {
  display: block;
  margin-block-start: var(--space-xs);
  font-family: var(--font-display);
}

.health-card p {
  margin: var(--space-2xs) 0 0;
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.health-state {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
}

.health-state::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-muted);
}

.health-state.current::before {
  background: var(--color-success);
}

.health-state.warning::before {
  background: var(--color-warning);
}

.health-state.stale::before,
.health-state.error::before {
  background: var(--color-danger);
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-sm);
  margin-block-start: var(--space-md);
}

.quick-card {
  padding: var(--space-md);
  color: inherit;
  text-decoration: none;
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-input);
}

.quick-card b {
  display: block;
  font-family: var(--font-display);
}

.quick-card p {
  margin: var(--space-2xs) 0 0;
  color: var(--color-neutral);
  font-size: var(--text-sm);
}

@media (hover: hover) and (pointer: fine) {
  .watch-item:hover,
  .quick-card:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
  }
}

@media (max-width: 64rem) {
  .home-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .health-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 52rem) {
  .home-panel {
    grid-column: 1 / -1;
    padding: var(--space-md);
  }

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

@media (max-width: 30rem) {
  .preference-grid,
  .risk-grid,
  .home-depth-callout {
    grid-template-columns: minmax(0, 1fr);
  }

  .risk-kpi {
    border-inline-end: 0;
    border-block-end: var(--rule-hair) solid var(--color-rule);
  }

  .risk-kpi:last-child {
    border-block-end: 0;
  }

  .watch-item {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2xs);
  }
}