/* ═══════════════════════════════════════════════════════════════════
   StandbyRoster shared components — Phase 3 UX overhaul (Aug 2026)
   New classes ONLY — added alongside existing classes, never replacing
   JS-bound ones. Spec: docs/ux-redesign-phase2-2026-08-12.md
   ═══════════════════════════════════════════════════════════════════ */

/* ── Buttons ── */
.btn-sbr, .btn-sbr-secondary, .btn-sbr-text {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'Inter', system-ui, sans-serif; font-weight: 600; font-size: 1rem;
  border-radius: var(--r-md); padding: 12px 20px; min-height: 48px;
  cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s;
}
.btn-sbr { background: var(--ink-900); color: #fff; border: none; }
.btn-sbr:hover { background: var(--ink-800); color: #fff; }
.btn-sbr:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn-sbr:disabled, .btn-sbr[aria-disabled="true"] {
  background: var(--slate-300); color: var(--slate-500); cursor: not-allowed; }
.btn-sbr-hero { background: linear-gradient(90deg, var(--gold-500), var(--gold-300));
  color: var(--ink-900); border: none; }
.btn-sbr-hero:hover { filter: brightness(1.06); color: var(--ink-900); }
.btn-sbr-secondary { background: transparent; color: var(--ink-900);
  border: 1.5px solid var(--ink-900); }
.btn-sbr-secondary:hover { background: rgba(10,22,40,.06); color: var(--ink-900); }
.btn-sbr-secondary.on-dark { color: #fff; border-color: rgba(255,255,255,.6); }
.btn-sbr-secondary.on-dark:hover { background: rgba(255,255,255,.1); color: #fff; }
.btn-sbr-text { background: none; border: none; color: var(--gold-600);
  padding: 8px 12px; min-height: 44px; }
.btn-sbr-text:hover { text-decoration: underline; color: var(--gold-600); }
.btn-sbr-danger { background: var(--error-600); color: #fff; border: none; }
.btn-sbr.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn-sbr.is-loading::after { content: ""; position: absolute; width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%;
  animation: sbr-spin .7s linear infinite; }
@keyframes sbr-spin { to { transform: rotate(360deg); } }

/* ── Cards ── */
.card-sbr { background: var(--surface); border: 1px solid var(--slate-300);
  border-radius: var(--r-md); box-shadow: var(--e1); padding: var(--space-5); }
.card-sbr-marketing { border-radius: var(--r-lg); padding: var(--space-6); }
.card-sbr-featured { border: 2px solid var(--gold-500); box-shadow: var(--e2); }

/* ── Form fields ── */
.field-sbr { margin-bottom: var(--space-4); }
.field-sbr label { display: block; font-size: .875rem; font-weight: 600;
  color: var(--slate-700); margin-bottom: 6px; }
.field-sbr input, .field-sbr select, .field-sbr textarea {
  width: 100%; font-size: 1rem; min-height: 48px; padding: 10px 14px;
  border: 1px solid var(--slate-300); border-radius: var(--r-sm);
  background: var(--surface); color: var(--slate-700); }
.field-sbr input:focus, .field-sbr select:focus, .field-sbr textarea:focus {
  outline: none; border-color: var(--ink-900); box-shadow: var(--focus-ring); }
.field-sbr.has-error input, .field-sbr.has-error select, .field-sbr.has-error textarea {
  border-color: var(--error-600); }
.field-sbr .field-error { display: flex; align-items: center; gap: 6px;
  color: var(--error-600); font-size: .8125rem; margin-top: 5px; }
.field-sbr .field-hint { color: var(--slate-500); font-size: .8125rem; margin-top: 5px; }

/* ── Entitlement chip (dashboard/tool pages) ── */
.chip-sbr { display: inline-flex; align-items: center; gap: 7px;
  border-radius: var(--r-pill); font-size: .8125rem; font-weight: 700;
  padding: 5px 14px; }
.chip-sbr-member { background: rgba(21,128,61,.1); color: var(--success-600);
  border: 1px solid rgba(21,128,61,.3); }
.chip-sbr-credits { background: rgba(138,100,16,.1); color: var(--gold-600);
  border: 1px solid rgba(138,100,16,.3); }

/* ── Badges ── */
.badge-sbr { display: inline-block; border-radius: var(--r-pill);
  font-size: .78rem; font-weight: 600; padding: 3px 10px; }
.badge-sbr-success { background: rgba(21,128,61,.1); color: var(--success-600); }
.badge-sbr-warning { background: rgba(180,83,9,.1); color: var(--warning-700); }
.badge-sbr-error   { background: rgba(179,38,30,.1); color: var(--error-600); }
.badge-sbr-info    { background: rgba(29,78,216,.1); color: var(--info-600); }
.badge-sbr-neutral { background: var(--slate-100); color: var(--slate-600); }
.badge-sbr-gold    { background: rgba(138,100,16,.1); color: var(--gold-600); }

/* ── Inline alerts ── */
.alert-sbr { display: flex; gap: 10px; align-items: flex-start;
  border-left: 4px solid var(--slate-300); background: var(--slate-100);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 12px 16px;
  font-size: .9rem; color: var(--slate-700); }
.alert-sbr-success { border-left-color: var(--success-600); background: rgba(21,128,61,.06); }
.alert-sbr-warning { border-left-color: var(--warning-700); background: rgba(180,83,9,.06); }
.alert-sbr-error   { border-left-color: var(--error-600); background: rgba(179,38,30,.06); }
.alert-sbr-info    { border-left-color: var(--info-600); background: rgba(29,78,216,.06); }

/* ── Shared paywall modal (truthful 402) ── */
.paywall-sbr-backdrop { position: fixed; inset: 0; background: rgba(10,22,40,.55);
  z-index: 9999; display: flex; align-items: center; justify-content: center;
  padding: 1rem; }
.paywall-sbr { background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--e3); max-width: 520px; width: 100%; overflow: hidden; }
.paywall-sbr-head { background: var(--ink-900); color: #fff; padding: 1.5rem;
  text-align: center; }
.paywall-sbr-head .pw-icon { font-size: 1.9rem; color: var(--gold-300);
  margin-bottom: .5rem; }
.paywall-sbr-head h2 { font-size: 1.25rem; font-weight: 700; margin: 0 0 .25rem; }
.paywall-sbr-head p { margin: 0; color: rgba(255,255,255,.75); font-size: .875rem; }
.paywall-sbr-body { padding: 1.5rem; }
.paywall-sbr-body ul { list-style: none; padding: 0; margin: 0 0 1.25rem; }
.paywall-sbr-body li { padding: .3rem 0 .3rem 1.7rem; position: relative;
  color: var(--slate-700); font-size: .9rem; }
.paywall-sbr-body li::before { content: "\2713"; position: absolute; left: 0;
  color: var(--gold-600); font-weight: 800; }
.paywall-sbr-balance { text-align: center; color: var(--slate-500);
  font-size: .8125rem; margin-top: .75rem; }

/* ── Edge/error page shell ── */
.errorpage-sbr { max-width: 560px; margin: 0 auto; padding: var(--space-8) var(--space-4);
  text-align: center; }
.errorpage-sbr .ep-code { font-size: .8rem; font-weight: 700; letter-spacing: 2px;
  color: var(--gold-600); text-transform: uppercase; margin-bottom: var(--space-3); }
.errorpage-sbr h1 { font-size: 1.75rem; font-weight: 700; color: var(--ink-900);
  margin-bottom: var(--space-3); }
.errorpage-sbr p { color: var(--slate-600); margin-bottom: var(--space-5); }

/* ── Prose width for readability (45-75ch) ── */
.prose-sbr { max-width: 68ch; }

/* ── Visible focus for keyboard users, site-wide ── */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gold-600); outline-offset: 2px; }