/* ==========================================================================
   CrewConfirm — Component styles
   Built only on tokens.css variables. No hardcoded colors/spacing.
   These classes back the partials in templates/_components/.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body.cc {
  margin: 0;
  font-family: var(--cc-font);
  font-size: var(--cc-text-base);
  line-height: var(--cc-leading-body);
  color: var(--cc-ink);
  background: var(--cc-bg);
  -webkit-font-smoothing: antialiased;
}

/* Mobile-first app column */
.cc-app {
  max-width: var(--cc-app-max);
  margin: 0 auto;
  padding: var(--cc-space-4) var(--cc-space-4) calc(var(--cc-bottom-nav-h) + var(--cc-space-6));
  min-height: 100vh;
}

/* ---- Typography helpers ------------------------------------------------ */
.cc-h1 { font-size: var(--cc-text-2xl); font-weight: var(--cc-weight-bold);
         line-height: var(--cc-leading-tight); margin: 0 0 var(--cc-space-2); }
.cc-h2 { font-size: var(--cc-text-xl);  font-weight: var(--cc-weight-semi);
         line-height: var(--cc-leading-tight); margin: 0 0 var(--cc-space-2); }
.cc-eyebrow { font-size: var(--cc-text-xs); font-weight: var(--cc-weight-semi);
              letter-spacing: 0.06em; text-transform: uppercase;
              color: var(--cc-ink-faint); margin: 0 0 var(--cc-space-2); }
.cc-meta { font-size: var(--cc-text-sm); color: var(--cc-ink-soft); }
.cc-faint { color: var(--cc-ink-faint); }

/* ---- Pills ------------------------------------------------------------- */
/* A pill is a soft, tinted, rounded label. The product leans on these. */
.cc-pill {
  display: inline-flex; align-items: center; gap: var(--cc-space-1);
  padding: 3px 10px;
  border-radius: var(--cc-radius-pill);
  font-size: var(--cc-text-xs); font-weight: var(--cc-weight-semi);
  line-height: 1.4; white-space: nowrap;
  background: var(--cc-neutral-tint); color: var(--cc-neutral-ink);
}
.cc-pill--brand   { background: var(--cc-brand-tint); color: var(--cc-brand-ink); }
.cc-pill--ok      { background: var(--cc-ok-tint);    color: var(--cc-ok); }
.cc-pill--warn    { background: var(--cc-warn-tint);  color: var(--cc-warn); }
.cc-pill--risk    { background: var(--cc-risk-tint);  color: var(--cc-risk); }

/* ---- Status chip ------------------------------------------------------- */
/* A status chip is a pill with a leading dot — used for lifecycle status. */
.cc-chip { /* inherits pill look */ }
.cc-chip .cc-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; display: inline-block;
}

/* ---- Buttons ----------------------------------------------------------- */
.cc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--cc-space-2);
  min-height: var(--cc-tap-min);
  padding: 0 var(--cc-space-5);
  border-radius: var(--cc-radius-pill);
  font-size: var(--cc-text-base); font-weight: var(--cc-weight-semi);
  border: 1px solid transparent; cursor: pointer;
  text-decoration: none; transition: filter .12s ease, background .12s ease;
}
.cc-btn--primary   { background: var(--cc-brand); color: var(--cc-on-brand); }
.cc-btn--primary:hover { filter: brightness(0.96); }
.cc-btn--secondary { background: var(--cc-surface); color: var(--cc-ink);
                     border-color: var(--cc-line-strong); }
.cc-btn--ghost     { background: transparent; color: var(--cc-brand-ink); }
.cc-btn--danger    { background: var(--cc-risk-tint); color: var(--cc-risk); }
.cc-btn--block     { width: 100%; }
.cc-btn--sm        { min-height: 36px; font-size: var(--cc-text-sm);
                     padding: 0 var(--cc-space-4); }

/* ---- Cards ------------------------------------------------------------- */
.cc-card {
  background: var(--cc-surface);
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius-lg);
  box-shadow: var(--cc-shadow-card);
  padding: var(--cc-space-4);
  margin-bottom: var(--cc-space-3);
}
.cc-card__row { display: flex; align-items: center; justify-content: space-between;
                gap: var(--cc-space-3); }
.cc-card__title { font-size: var(--cc-text-lg); font-weight: var(--cc-weight-semi);
                  margin: 0; }
.cc-card__sub { font-size: var(--cc-text-sm); color: var(--cc-ink-soft);
                margin: 2px 0 0; }
.cc-card__divider { height: 1px; background: var(--cc-line);
                    margin: var(--cc-space-3) 0; border: 0; }
.cc-pill-row { display: flex; flex-wrap: wrap; gap: var(--cc-space-2); }

/* ---- Empty state ------------------------------------------------------- */
.cc-empty {
  text-align: center;
  background: var(--cc-surface-sunk);
  border: 1px dashed var(--cc-line-strong);
  border-radius: var(--cc-radius-lg);
  padding: var(--cc-space-8) var(--cc-space-5);
  color: var(--cc-ink-soft);
}
.cc-empty__icon { font-size: 28px; margin-bottom: var(--cc-space-2); opacity: .7; }
.cc-empty__title { font-weight: var(--cc-weight-semi); color: var(--cc-ink);
                   margin: 0 0 var(--cc-space-1); }

/* ---- Bottom nav -------------------------------------------------------- */
.cc-bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0;
  height: var(--cc-bottom-nav-h);
  max-width: var(--cc-app-max); margin: 0 auto;
  background: var(--cc-surface);
  border-top: 1px solid var(--cc-line);
  display: flex; align-items: center; justify-content: space-around;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.cc-bottom-nav__item {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 2px; text-decoration: none;
  color: var(--cc-ink-faint); font-size: var(--cc-text-xs);
  font-weight: var(--cc-weight-medium);
}
.cc-bottom-nav__item.is-active { color: var(--cc-brand); }
.cc-bottom-nav__icon { font-size: 20px; line-height: 1; }

/* ---- Form inputs ------------------------------------------------------- */
.cc-input {
  width: 100%;
  min-height: var(--cc-tap-min);
  padding: 0 var(--cc-space-4);
  font-size: var(--cc-text-base); font-family: inherit;
  color: var(--cc-ink); background: var(--cc-surface);
  border: 1px solid var(--cc-line-strong);
  border-radius: var(--cc-radius-md);
  margin: 4px 0 var(--cc-space-3);
}
textarea.cc-input { min-height: 80px; padding-top: var(--cc-space-2);
                    line-height: var(--cc-leading-body); }
.cc-input:focus { outline: none; border-color: var(--cc-brand); }
label.cc-eyebrow { display: block; }

/* ---- Section spacing --------------------------------------------------- */
.cc-section { margin-bottom: var(--cc-space-6); }
.cc-section__head { display: flex; align-items: baseline;
                    justify-content: space-between; margin-bottom: var(--cc-space-3); }