/**
 * SwiftGigs component + spacing primitives.
 * Colors come from qg-tokens.css — never hardcode a hex in this file.
 * Load AFTER qg-tokens.css and after page CSS.
 *
 * Naming: .sg-* so these never collide with existing .qg-* rules.
 */

:root {
  /* Spacing scale from the mockup */
  --sg-page-x: 20px;
  --sg-gap-sm: 8px;
  --sg-gap-md: 10px;
  --sg-gap-section: 20px;
  --sg-radius-card: 15px;
  --sg-radius-btn: 14px;
  --sg-radius-square: 10px;
}

/* ── Layout ───────────────────────────────────────────────────────────── */

.sg-page {
  padding-left: var(--sg-page-x);
  padding-right: var(--sg-page-x);
}

.sg-header {
  padding: 20px var(--sg-page-x) 12px;
}

.sg-section + .sg-section {
  margin-top: var(--sg-gap-section);
}

/* Sticky bottom action bar (not the tab bar — see note at end of file) */
.sg-actionbar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  padding: 14px var(--sg-page-x) 20px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

/* ── Typography ───────────────────────────────────────────────────────── */

.sg-h1 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
}

.sg-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.sg-body {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--text);
}

.sg-body--muted {
  color: var(--text-muted);
}

/* Money is always green, always 700. Size varies by context. */
.sg-money {
  font-weight: 700;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}

.sg-money--sm { font-size: 14px; }
.sg-money--md { font-size: 17px; }
.sg-money--lg { font-size: 22px; }

/* ── Cards ────────────────────────────────────────────────────────────── */

.sg-card {
  display: block;
  width: 100%;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: var(--sg-radius-card);
  background: var(--surface);
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}

/* Selected "choice card" = teal outline + tint.
 * The inset shadow fakes the extra 0.5px of border so selecting a card
 * never reflows the layout. */
.sg-card.is-selected {
  border-color: var(--teal);
  box-shadow: inset 0 0 0 0.5px var(--teal);
  background: var(--teal-tint);
}

.sg-card--compact { padding: 13px 14px; }
.sg-card--roomy   { padding: 18px 16px; }

/* ── Rows ─────────────────────────────────────────────────────────────── */

.sg-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}

.sg-row + .sg-row {
  border-top: 1px solid var(--border);
}

/* ── Icon in rounded square ───────────────────────────────────────────── */

.sg-isq {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: var(--sg-radius-square);
  background: var(--surface-alt);
  color: var(--text);
}

.sg-isq svg { width: 19px; height: 19px; }

/* Smaller variant used inside the urgency selector cards */
.sg-isq--sm { width: 30px; height: 30px; }
.sg-isq--sm svg { width: 16px; height: 16px; }

.sg-isq--primary { color: var(--primary); }
.sg-isq--teal    { color: var(--teal); }

/* ── Pills / chips ────────────────────────────────────────────────────── */

.sg-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sg-gap-sm);
  padding: 8px 15px;
  border: 1px solid var(--border);
  border-radius: 100px;
  background: var(--surface);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

/* Pills are ~34px tall by design but must stay a 44px tap target.
 * The pseudo-element extends the hit area without changing the visual. */
.sg-pill::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 44px;
}

/* Selected pill = solid purple fill (distinct from the teal-tint card state) */
.sg-pill.is-selected {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-text);
}

.sg-pill--teal.is-selected {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--primary-text);
}

.sg-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sg-gap-md);
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

.sg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sg-gap-md);
  width: 100%;
  min-height: 48px;
  padding: 15px;
  border: none;
  border-radius: var(--sg-radius-btn);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: filter 0.15s;
}

.sg-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.sg-btn:not(:disabled):active { filter: brightness(0.93); }

/* Posting flow */
.sg-btn--primary {
  background: var(--primary);
  color: var(--primary-text);
}

/* Earning flow */
.sg-btn--teal {
  background: var(--teal);
  color: var(--primary-text);
}

.sg-btn--quiet {
  background: var(--surface-alt);
  color: var(--text);
}

.sg-btn--auto { width: auto; }

/* ── Wordmark ─────────────────────────────────────────────────────────── */
/* Requires Playfair Display to be loaded on the page. */

.sg-wordmark {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 700;
  letter-spacing: -0.01em;
  background: var(--grad-wordmark);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Fallback for engines without background-clip:text support */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .sg-wordmark {
    background: none;
    color: var(--primary);
    -webkit-text-fill-color: var(--primary);
  }
}

/* ── Focus ────────────────────────────────────────────────────────────── */

.sg-card:focus-visible,
.sg-pill:focus-visible,
.sg-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ── Motion ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .sg-card,
  .sg-pill,
  .sg-btn { transition: none; }
}

/*
 * Bottom tab bar is intentionally NOT styled here. The brief says to leave
 * the existing nav untouched, so the mockup's tab-bar metrics (10px 8px 16px,
 * 22px icons, 11px labels) are recorded in docs rather than applied.
 */