/* =====================================================================
   cssWidgets26.css - shared building blocks for 26-series pages (KG 10/2026)
   Reads cssPalette26.css only. A page picks a MEANING (btn26--danger), never a color.
   Need something different? Add a named variant here so it is reusable.
   Loaded after cssPalette26.css by every master.
   ===================================================================== */

/* ---------- buttons: one shape, a few meanings ---------- */
.btn26 {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sw-space-2);
  padding: 9px 18px;
  border: 1px solid transparent; border-radius: var(--sw-radius-sm);
  font: 600 14px/1.2 var(--sw-font-sans);
  text-decoration: none; cursor: pointer;
  color: var(--sw-surface); background: var(--sw-theme);
  transition: background-color .12s, border-color .12s, box-shadow .12s;
}
.btn26:hover  { background: var(--sw-theme-dark); color: var(--sw-surface); text-decoration: none; }
.btn26:focus-visible { outline: none; box-shadow: var(--sw-focus); }
.btn26:disabled, .btn26.is-disabled { opacity: .5; cursor: not-allowed; }

.btn26--primary { }   /* the default look; spelled out so markup says what it means */
.btn26--secondary { background: var(--sw-surface); color: var(--sw-theme); border-color: var(--sw-theme); }
.btn26--secondary:hover { background: var(--sw-theme-tint); color: var(--sw-theme-dark); }
.btn26--danger  { background: var(--sw-danger); }
.btn26--danger:hover { background: color-mix(in srgb, var(--sw-danger) 82%, black); }
.btn26--accent  { background: var(--sw-gold); color: var(--sw-ink); }   /* gold: use once per screen at most */
.btn26--accent:hover { background: var(--sw-gold-dark); color: var(--sw-ink); }
.btn26--ghost   { background: transparent; color: var(--sw-theme); }
.btn26--ghost:hover { background: var(--sw-theme-tint); color: var(--sw-theme-dark); }
.btn26--sm { padding: 5px 12px; font-size: 13px; }

/* ---------- card ---------- */
.card26 {
  background: var(--sw-surface);
  border: 1px solid var(--sw-line); border-top: 3px solid var(--sw-theme);
  border-radius: var(--sw-radius);
  padding: var(--sw-space-4) 18px; margin-bottom: var(--sw-space-3);
  box-shadow: var(--sw-shadow);
  color: var(--sw-ink); font-family: var(--sw-font-sans);
}
.card26 h1, .card26 h2 { margin: 0 0 6px; font: 700 26px/1.05 var(--sw-font-cond); color: var(--sw-navy); }

/* ---------- chip: small status label ---------- */
.chip26 {
  display: inline-block; padding: 2px 9px;
  border-radius: var(--sw-radius-pill);
  font: 600 12px/1.5 var(--sw-font-sans);
  background: var(--sw-panel); color: var(--sw-muted); border: 1px solid var(--sw-line);
}
.chip26--success { background: var(--sw-success-bg); color: var(--sw-success); border-color: transparent; }
.chip26--warning { background: var(--sw-warning-bg); color: var(--sw-warning); border-color: transparent; }
.chip26--danger  { background: var(--sw-danger-bg);  color: var(--sw-danger);  border-color: transparent; }
.chip26--info    { background: var(--sw-info-bg);    color: var(--sw-info);    border-color: transparent; }
.chip26--accent  { background: var(--sw-gold-tint);  color: var(--sw-ink);     border-color: var(--sw-gold); }
/* injury / athlete status chips (chip26--out etc.) are added here once the 15-series colors are inventoried */

/* ---------- alert ---------- */
.alert26 { padding: 10px 14px; border-radius: var(--sw-radius-sm); border: 1px solid; font: 14px/1.4 var(--sw-font-sans); }
.alert26--success { background: var(--sw-success-bg); color: var(--sw-success); border-color: var(--sw-success); }
.alert26--warning { background: var(--sw-warning-bg); color: var(--sw-warning); border-color: var(--sw-warning); }
.alert26--danger  { background: var(--sw-danger-bg);  color: var(--sw-danger);  border-color: var(--sw-danger); }
.alert26--info    { background: var(--sw-info-bg);    color: var(--sw-info);    border-color: var(--sw-info); }

/* ---------- form field ---------- */
.field26 {
  width: 100%; box-sizing: border-box; padding: 9px 12px;
  border: 1px solid var(--sw-line-strong); border-radius: var(--sw-radius-sm);
  font: 14px/1.2 var(--sw-font-sans); color: var(--sw-ink); background: var(--sw-surface);
}
.field26::placeholder { color: var(--sw-faint); }
.field26:focus { outline: none; border-color: var(--sw-theme); box-shadow: var(--sw-focus); }

/* ---------- game strip: the one band under the navy header that carries the game color ---------- */
.gamebar26 { height: 4px; background: var(--sw-theme); }

/* ---------- selected row / highlight ---------- */
.is-selected26 { background: var(--sw-theme-tint); box-shadow: inset 3px 0 0 var(--sw-theme); }