/* ==========================================================================
   Screen "openings" (js/ui/openings.js): the openings of the person's downloaded games, by family and colour.
   Every class starts with .openings-. Built on the shared components of css/system.css (.card, .btn, .empty);
   tokens come from styles.css, none is redefined.

   Layout
     phone      one column: heading, summary (source, three numbers, the action), then White and Black, one card per row
     tablet+    the summary numbers in a row, family cards in a grid of two or three columns
   ========================================================================== */

.openings {
  display: grid;
  gap: var(--space-7);
  min-width: 0;
}

.openings-head { max-width: 48rem; }
.openings-head .t-eyebrow { margin-bottom: var(--space-2); letter-spacing: 0.18em; }
.openings-title {
  font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.openings-title:focus { outline: none; }
.openings-sub { margin-top: var(--space-3); max-width: 60ch; line-height: 1.55; text-wrap: pretty; }

.openings-account { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.openings-account-label { color: var(--color-text-muted); font-size: var(--text-sm, 0.875rem); }
.openings-account-select { min-width: 12rem; max-width: 100%; }

.openings-loading,
.openings-error p {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--color-text-muted);
}
.openings-error { display: grid; justify-items: start; gap: var(--space-3); }

/* ── Summary ── */
.openings-summary { display: grid; gap: var(--space-5); }
.openings-source {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}
.openings-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
}
.openings-stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--space-1); min-width: 0; }
.openings-stat dt { color: var(--color-text-muted); font-size: var(--text-sm); line-height: var(--lh-snug); }
.openings-stat dd {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 650;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.openings-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.openings-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
}
.openings-note svg { flex: none; margin-top: 2px; }

/* ── By colour ── */
.openings-color { display: grid; gap: var(--space-4); min-width: 0; }
.openings-h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 650;
  line-height: var(--lh-tight);
}
.openings-h2-count { color: var(--color-text-muted); font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 500; }
.openings-swatch {
  flex: none;
  width: 18px;
  height: 18px;
  border: 1px solid var(--color-hairline-strong);
  border-radius: var(--radius-xs);
}
.openings-swatch-w { background: #f2ede2; }
.openings-swatch-b { background: #1d1b18; }

.openings-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ── A family ── */
.openings-card { display: flex; flex-direction: column; gap: var(--space-4); }
.openings-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.openings-card-title {
  margin: 0;
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 650;
  line-height: var(--lh-tight);
  overflow-wrap: anywhere;
}
.openings-card-games { color: var(--color-text-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }

.openings-results { display: grid; gap: var(--space-1); }
.openings-bar {
  display: flex;
  overflow: hidden;
  height: 22px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-3);
}
.openings-bar-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-basis: 0;
  min-width: 22px;
  font-size: var(--text-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.openings-bar-win { background: var(--color-perfect-bg); color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-perfect-bd); }
.openings-bar-draw { background: var(--color-surface-4); color: var(--color-text); }
.openings-bar-loss { background: var(--color-blunder-bg); color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-blunder-bd); }
.openings-results-text { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }

.openings-facts { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.openings-fact { display: flex; align-items: flex-start; gap: var(--space-2); color: var(--color-text); font-size: var(--text-sm); line-height: var(--lh-snug); }
.openings-fact svg { flex: none; margin-top: 1px; color: var(--color-text-muted); }
.openings-fact.is-warn svg { color: var(--color-dubious); }

.openings-vars { display: grid; gap: var(--space-1); }
.openings-vars-title { margin: 0; color: var(--color-text-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.openings-vars-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.openings-var { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; font-size: var(--text-sm); }
.openings-var-eco { flex: none; color: var(--color-gold); font-weight: 700; font-variant-numeric: tabular-nums; }
.openings-var-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.openings-var-n { flex: none; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

.openings-card-foot { margin-top: auto; display: flex; justify-content: flex-end; }
.openings-card-foot .btn { min-height: 44px; }

@media (max-width: 560px) {
  .openings-stats { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .openings-stat { flex-direction: row-reverse; justify-content: space-between; align-items: baseline; }
  .openings-stat dd { flex: none; font-size: var(--text-2xl); white-space: nowrap; }
  .openings-stat dt { text-align: right; }
  .openings-actions .btn { width: 100%; justify-content: center; }
  .openings-card-foot .btn { width: 100%; justify-content: center; }
}