/* CSite homepage — public tournament directory layout. Colour, radius and
   spacing resolve through public/theme.css tokens; this file holds layout
   only, per this repo's shared-base-then-page-specific convention. */

.masthead-mark { display: flex; align-items: center; gap: var(--space-md); }
.masthead-mark .brand-mark { height: 32px; width: auto; filter: brightness(0) invert(1); opacity: .88; }

/* -------- create panel (format picker, replaces the native prompt) -------- */
.create-panel { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); flex-wrap: wrap; }
.create-panel input, .create-panel select {
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm); font-family: inherit; font-size: var(--fs-body);
}
.create-panel input:focus, .create-panel select:focus { outline: none; border-color: var(--brand); }
.create-panel input { flex: 1; min-width: 160px; }

/* -------- card sibling-link row (Quick 260927-kz9) -------- */
.card-links { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-md); }
.card-links:empty { display: none; }

main#app { padding: var(--space-xl) var(--space-xl) var(--space-3xl); max-width: 1500px; margin: 0 auto; }

/* -------- intro band -------- */
.home-intro {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl) var(--space-xl);
  margin-bottom: var(--space-2xl);
  text-align: center;
}
.home-intro-title {
  font-family: var(--font-serif);
  font-size: clamp(28px, 4.5vw, 44px);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--text);
  margin-bottom: var(--space-md);
}
.home-intro-sub {
  color: var(--body);
  max-width: 640px; margin: 0 auto;
  font-size: var(--fs-body); line-height: 1.6;
}

/* -------- loading -------- */
.loading-placeholder { display: flex; flex-direction: column; gap: var(--space-md); }
.skeleton-card {
  height: 96px;
  border-radius: var(--radius-lg);
  background: linear-gradient(90deg, var(--panel-2) 25%, var(--line) 37%, var(--panel-2) 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
}
/* Vary heights so the loading state mimics the real card grid instead of
   three identical bars. */
.skeleton-card:nth-child(1) { height: 176px; }
.skeleton-card:nth-child(2) { height: 156px; }
.skeleton-card:nth-child(3) { height: 196px; }
@keyframes skeleton-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* -------- error -------- */
.error-banner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-lg);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-danger);
  color: var(--text);
  background: var(--tint-danger);
}

/* -------- groups -------- */
.groups { display: flex; flex-direction: column; gap: var(--space-2xl); }
.group { display: flex; flex-direction: column; gap: var(--space-md); }
.group-heading { display: flex; align-items: center; gap: var(--space-sm); font-family: var(--font-serif); font-size: var(--fs-h2); font-weight: 500; letter-spacing: -.02em; color: var(--text); }
.group-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; padding: 0 var(--space-xs);
  border-radius: var(--radius-sm);
  background: var(--tint-brand);
  color: var(--brand-2); font-size: var(--fs-caption); font-weight: 700;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-xl);
}

.tournament-card {
  display: grid;
  grid-template-columns: 48px 1fr;
  grid-template-areas:
    "emblem name"
    "emblem badge"
    "rail rail"
    "meta meta";
  column-gap: var(--space-sm);
  row-gap: var(--space-sm);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--panel);
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--text);
  transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.tournament-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-lift);
}

.tc-emblem {
  grid-area: emblem;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--brand-2); font-size: var(--fs-caption); font-weight: 700; letter-spacing: .02em;
  text-align: center; line-height: 1.1;
}
.tc-name {
  grid-area: name; align-self: center;
  font-family: var(--font-serif); font-size: var(--fs-h2); font-weight: 500; letter-spacing: -.02em;
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tc-badge { grid-area: badge; align-self: start; color: var(--brand-2); background: transparent; border-color: var(--line); }

.tc-rail { grid-area: rail; display: flex; gap: var(--space-xs); }
.tc-rail-seg { flex: 1; height: 4px; border-radius: var(--radius-sm); background: var(--panel-2); }
.tc-rail-seg.reached { background: var(--brand-2); }
.tc-rail-seg:last-child.reached { background: var(--brand); }

.tc-meta { grid-area: meta; display: flex; gap: var(--space-md); flex-wrap: wrap; align-items: center; font-size: var(--fs-caption); color: var(--muted); }
.tc-meta > span { flex-shrink: 0; }
.tc-players { display: inline-flex; align-items: center; gap: var(--space-xs); }
.tc-players-icon { flex-shrink: 0; opacity: .8; }
.tc-live { color: var(--bg); background: var(--danger); border-color: var(--danger); }
.tc-round { color: var(--brand-2); border-color: var(--line); }

/* -------- "View Results" link on a completed card (Phase 6 plan 05,
   HIST-03) -- a sibling of the card's own whole-card <a>, not nested
   inside it (an anchor cannot contain another anchor); bottom-right via
   flex + align-self, additive to the card's existing click target. This
   file (index.html's stylesheet) never loads app.css, so the secondary-
   link treatment is restated here rather than imported — same declaration
   as app.css's own .results-link (identical tokens: var(--brand-2), no new
   colour), matching this file's existing pattern of restating shared
   conventions per-stylesheet (e.g. .tc-badge's secondary-link border
   above). -------- */
.tournament-card-wrap { display: flex; flex-direction: column; gap: var(--space-xs); }
.card-results-link {
  align-self: flex-end; color: var(--brand-2); text-decoration: none;
  font-size: var(--fs-caption); font-weight: 600;
}
.card-results-link:hover { opacity: .8; }

/* -------- drafts -------- */
.drafts { margin-top: var(--space-2xl); }

/* -------- hero (delta over theme.css's shared .empty-state primitive,
   phase 11 plan 05: the container also carries the shared base class and
   the heading/body elements also carry the shared title/body classes, so
   the centred text and the muted body colour below come from theme.css
   now, not from here. This block keeps only what genuinely differs --
   the flex column layout, the larger padding scale, the display-size
   heading and the body's width cap. The illustration's own rule is gone
   outright: the svg now carries the shared art-slot class verbatim, with
   nothing page-specific left to declare.) -------- */
.hero {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-md);
  padding: var(--space-3xl) var(--space-xl);
}
.hero h2 { font-size: var(--fs-stat); }
.hero p { max-width: 480px; }

/* -------- footer (stat-tile / caption treatment) -------- */
.site-footer {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-sm);
  padding: var(--space-2xl) var(--space-xl) var(--space-3xl);
  border-top: 1px solid var(--line);
  text-align: center;
}
.footer-mark { height: 24px; width: auto; opacity: .88; filter: brightness(0) invert(1); }
.footer-tagline { color: var(--muted); font-size: var(--fs-caption); }
.footer-link { color: var(--brand-2); text-decoration: none; font-size: var(--fs-caption); font-weight: 600; }
.footer-link:hover { opacity: .8; }

/* -------- mobile pass -------- */
@media (max-width: 640px) {
  main#app { padding: var(--space-md) var(--space-md) var(--space-2xl); }
  .home-intro { padding: var(--space-lg) var(--space-md); }
  .site-footer { padding: var(--space-xl) var(--space-md) var(--space-2xl); }
}