/* ==========================================================================
   The Clubhouse — app-specific styles.
   Loaded AFTER formline-tokens.css — this file only adds what the tokens
   system doesn't already define: layout for match-list, the wizard forms,
   and small helpers. Colors/type/spacing all come from tokens as CSS vars.
   ========================================================================== */

.app-header {
  padding: var(--s-5) 0 var(--s-3);
}

.app-header .title {
  margin-top: 2px;
}

/* --- Match list --- */

#match-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.empty-state {
  color: var(--muted);
  font-size: 0.875rem;
  padding: var(--s-6) var(--s-2);
  text-align: center;
}

/* card-head already exists in tokens; this covers what's specific to a match card */
.card-actions {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

.card-actions button {
  font: 600 0.75rem var(--font-ui);
  padding: 6px 12px;
  min-height: 32px;
  border-radius: var(--r-btn);
  border: 1px solid var(--line-strong);
  background: var(--raised);
  color: var(--muted);
}
.card-actions button:hover { color: var(--text); }

/* expandable detail list — animates open/closed via max-height, not display */
.card-details {
  list-style: none;
  padding: 0;
  margin: 0;
  font: 400 0.8125rem var(--font-ui);
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease, padding-top 0.4s ease, margin-top 0.4s ease;
}
.card-details.expanded {
  max-height: 500px;
  opacity: 1;
  padding-top: var(--s-3);
  margin-top: var(--s-3);
  border-top: 1px solid var(--line);
}

/* --- Action row: Log match / Export / Import --- */

.action-row {
  display: flex;
  gap: var(--s-2);
  margin: var(--s-4) 0;
}

.action-row .btn {
  flex: 1.4;
}

.btn--sm {
  flex: 1;
  padding: 10px;
  font-size: 0.8125rem;
}

/* --- Match / wizard forms ---
   The tokens system defines a richer .field component (label + input
   wrapper); for now these bare inputs are styled directly so no markup
   changes are needed in script.js yet. Worth migrating to .field later. */

#match-form {
  display: none;
  flex-direction: column;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}

#match-form input,
#match-form select {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-field);
  padding: 11px 13px;
  min-height: var(--tap-min);
  color: var(--text);
  font: 600 0.90625rem var(--font-ui);
}
#match-form input::placeholder { color: var(--faint); font-weight: 400; }
#match-form input:focus, #match-form select:focus {
  outline: none;
  border-color: var(--sport);
}

#match-form button[type="submit"],
#match-form button[type="button"] {
  display: block;
  width: 100%;
  padding: 16px;
  border: 0;
  border-radius: var(--r-btn);
  background: var(--sport);
  color: var(--on-accent);
  font: var(--t-btn);
  text-align: center;
}

/* golf wizard back/next sit side by side rather than full-width stacked */
#match-form div[style*="flex"] button {
  width: auto;
  flex: 1;
}

/* --- Bottom tab bar ---
   Kept as sport-tabs for this pass (not yet the modes+rail model from the
   design system — that's a separate structural change, see backlog). */

.tabs a {
  text-decoration: none;
}

.tabs .log {
  border: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}