/*
 * Home + error pages — design-system re-skin (COD-308, batch 6).
 * ============================================================================
 * Scoped under .home-view / .error-view; every value reads a design token.
 *
 * The landing page was three saturated Bootstrap buttons (btn-primary,
 * btn-success, a custom purple) blown up to 3rem icons and card height. They
 * were buttons only in markup — each is a titled panel with an icon and a
 * description, which is not what a button is. They are anchors on panel chrome
 * here, and the colour is carried by a tinted icon badge and hover border rather
 * than by a full saturated fill, which is convention 5: colour marks state and
 * category, not decoration.
 */

/* ── Hero ────────────────────────────────────────────────────────────────── */
.home-view .hm-hero {
  text-align: center;
  padding: var(--sp-8) var(--sp-5) var(--sp-7);
}
.home-view .hm-wordmark {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--blue);
  line-height: var(--lh-tight);
}
.home-view .hm-tagline {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-section);
  font-weight: 600;
  color: var(--text-muted);
}

/* ── Call-to-action cards ────────────────────────────────────────────────── */
/* auto-fit, not auto-fill: there are always exactly three, and a collapsed empty
   track is impossible — so the cards share the width evenly at every size. */
.home-view .hm-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-5);
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--sp-5) var(--sp-8);
}
.home-view .hm-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-6);
  background: var(--white);
  border: 1px solid var(--border-solid);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: var(--dark);
}
@media (prefers-reduced-motion: no-preference) {
  .home-view .hm-card { transition: border-color var(--dur-fast) var(--ease-ui), box-shadow var(--dur-fast) var(--ease-ui); }
}
.home-view .hm-card:hover { box-shadow: var(--shadow-hub-card); }
.home-view .hm-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
}
.home-view .hm-card__title {
  font-size: var(--fs-section);
  font-weight: 700;
  line-height: var(--lh-snug);
}
.home-view .hm-card__text {
  font-size: var(--fs-meta);
  color: var(--text-muted);
  line-height: var(--lh-base);
}

.home-view .hm-card--blue .hm-card__icon { background: var(--blue-pale); color: var(--blue); }
.home-view .hm-card--blue:hover { border-color: var(--blue); }
.home-view .hm-card--green .hm-card__icon { background: var(--green-bg); color: var(--green); }
.home-view .hm-card--green:hover { border-color: var(--green); }
.home-view .hm-card--purple .hm-card__icon { background: var(--purple-bg); color: var(--purple); }
.home-view .hm-card--purple:hover { border-color: var(--purple); }

/* ── Error pages (403 / 404 / 500) ───────────────────────────────────────── */
.error-view {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-5);
  text-align: center;
}
.error-view .er-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--sp-5);
  border-radius: 50%;
  background: var(--gray-bg);
  border: 1px solid var(--border-solid);
  color: var(--text-muted);
}
.error-view .er-icon--warn { background: var(--amber-bg); border-color: var(--amber-border); color: var(--amber-text); }
.error-view .er-icon--danger { background: var(--red-bg); border-color: var(--red-border); color: var(--red-text); }
.error-view .er-code {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-sub);
}
.error-view .er-title {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-stat);
  font-weight: 800;
  color: var(--dark);
  line-height: var(--lh-tight);
}
.error-view .er-text {
  margin: var(--sp-4) auto 0;
  max-width: 52ch;
  font-size: var(--fs-read);
  line-height: var(--lh-read);
  color: var(--text-muted);
}
.error-view .er-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-6);
}
.error-view .er-detail {
  margin-top: var(--sp-6);
  padding: var(--sp-4);
  text-align: left;
  background: var(--gray-bg);
  border: 1px solid var(--border-solid);
  border-radius: var(--r-sm);
  font-family: var(--mono);
  font-size: var(--fs-label);
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

/* The 500 page renders standalone (no app shell), so it owns its own page reset —
   base.html's body rules are not available to it. */
.error-body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--sans);
  background: var(--gray-bg);
  color: var(--dark);
}
.error-body *,
.error-body *::before,
.error-body *::after { box-sizing: border-box; }
.error-body .ds-icon { box-sizing: content-box; }