/* Page-specific styles: home page, message pages, style guide, admin widgets. */

/* ---------- sections ---------- */
.section { padding-block: var(--s-8); }
.section--tint { background: var(--c-primary-soft); }
.section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-5); }
.section__head h2 { margin: 0; }

/* ---------- home: hero ---------- */
.hero { padding-block: var(--s-7) var(--s-8); background: var(--c-primary); color: #fff; }
.hero__inner { display: grid; gap: var(--s-7); align-items: center; }
.hero h1 { margin-bottom: var(--s-4); color: #fff; font-size: var(--fs-hero); letter-spacing: -0.03em; }
.hero__lead { max-width: 34rem; margin-bottom: var(--s-5); color: #e3f3f2; font-size: var(--fs-lg); }

.hero-search {
  display: flex;
  gap: var(--s-2);
  max-width: 36rem;
  padding: 0.4rem;
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--shadow-2);
}
.hero-search:focus-within { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.hero-search .input { flex: 1; min-width: 0; border: 0; box-shadow: none; }
.hero-search .input:focus { box-shadow: none; }
.hero-search .btn { flex: none; }
.hero__links { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }

/* three ways to pass an item on: pinned notes */
.tag-stack { display: grid; gap: var(--s-4); list-style: none; }
.tag-card {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-left: 8px solid var(--c-line-strong);
  border-radius: var(--r-md) var(--r-lg) var(--r-lg) var(--r-md);
  background: #fff;
  color: var(--c-ink);
  box-shadow: var(--shadow-2);
}
.tag-card p { margin: 0; color: var(--c-text-muted); }
.tag-card__title { margin: 0 0 var(--s-1); font-size: var(--fs-md); }
.tag-card__icon { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; }
.tag-card--free { border-left-color: var(--c-free); }
.tag-card--free .tag-card__icon { background: var(--c-free-soft); color: var(--c-free-ink); }
.tag-card--sale { border-left-color: var(--c-accent); }
.tag-card--sale .tag-card__icon { background: var(--c-accent-soft); color: var(--c-accent-ink); }
.tag-card--exchange { border-left-color: var(--c-swap); }
.tag-card--exchange .tag-card__icon { background: var(--c-swap-soft); color: var(--c-swap-ink); }

@media (min-width: 56rem) {
  .hero__inner { grid-template-columns: 1.15fr 0.85fr; }
  .tag-card:nth-child(1) { transform: rotate(-1.8deg); }
  .tag-card:nth-child(2) { transform: translateX(1.5rem) rotate(1.2deg); }
  .tag-card:nth-child(3) { transform: rotate(-0.8deg); }
}

/* ---------- home: steps, chips, safety, call to action ---------- */
.steps { display: grid; gap: var(--s-6); margin-top: var(--s-5); list-style: none; counter-reset: step; }
.steps li { padding-top: var(--s-4); border-top: 3px solid var(--c-ink); counter-increment: step; }
.steps li::before {
  content: counter(step);
  display: block;
  margin-bottom: var(--s-2);
  color: var(--c-primary);
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 800;
  line-height: 1;
}
.steps p { margin: 0; color: var(--c-text-muted); }
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(3, 1fr); } }

.chip-list { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); list-style: none; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.55rem 1rem;
  border: 1.5px solid var(--c-line-strong);
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--c-ink);
  font-weight: 700;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}
.chip:hover { border-color: var(--c-primary); color: var(--c-primary); }
.chip .icon { color: var(--c-primary); }

.safety-list { display: grid; gap: var(--s-5); margin-top: var(--s-5); list-style: none; }
.safety-list li { display: flex; gap: var(--s-4); }
.safety-list h3 { margin-bottom: var(--s-1); font-size: var(--fs-md); }
.safety-list p { margin: 0; color: var(--c-text-muted); }
.safety-list__icon { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: var(--r-md); background: #fff; color: var(--c-primary); }
@media (min-width: 48rem) { .safety-list { grid-template-columns: repeat(3, 1fr); } .safety-list li { flex-direction: column; } }

.cta-band { padding-block: var(--s-7); background: var(--c-accent); color: var(--c-ink); }
.cta-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-5); }
.cta-band h2 { margin: 0; }

/* ---------- message pages (404, coming soon) ---------- */
.message-page { display: grid; justify-items: start; gap: var(--s-3); max-width: 36rem; }
.message-page p { margin-bottom: var(--s-2); color: var(--c-text-muted); }
.message-page__code { margin: 0; color: var(--c-primary); font-family: var(--font-display); font-size: var(--fs-hero); font-weight: 800; line-height: 1; }

/* ---------- admin widgets ---------- */
.stat-grid { display: grid; gap: var(--s-4); margin-bottom: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.stat { display: grid; gap: var(--s-1); padding: var(--s-4) var(--s-5); border: 1px solid var(--c-line); border-radius: var(--r-lg); background: #fff; }
.stat__value { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 800; line-height: 1; }
.stat__label { color: var(--c-text-muted); font-size: var(--fs-sm); }
.panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.panel__head h2 { margin: 0; font-size: var(--fs-lg); }

/* ---------- style guide ---------- */
.sg { padding-block: var(--s-7) var(--s-8); }
.sg-intro { margin-bottom: var(--s-6); }
.sg-section { padding-block: var(--s-6); border-top: 1px solid var(--c-line); }
.sg-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.sg-label { margin: var(--s-3) 0 var(--s-2); font-size: var(--fs-sm); font-weight: 700; color: var(--c-text-muted); }
.sg-type-display { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 800; }
.sg-form { max-width: 26rem; }
.sg-chat { max-width: 26rem; padding: var(--s-4); border-radius: var(--r-lg); background: var(--c-primary-soft); }

.swatches { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }
.swatch__chip { display: block; height: 4rem; border: 1px solid var(--c-line-strong); border-radius: var(--r-md); }
.swatch__name { display: block; margin-top: var(--s-1); font-size: var(--fs-sm); }
.swatch__chip--ink { background: var(--c-ink); }
.swatch__chip--primary { background: var(--c-primary); }
.swatch__chip--primary-soft { background: var(--c-primary-soft); }
.swatch__chip--accent { background: var(--c-accent); }
.swatch__chip--free { background: var(--c-free); }
.swatch__chip--swap { background: var(--c-swap); }
.swatch__chip--danger { background: var(--c-danger); }
.swatch__chip--info { background: var(--c-info); }
.swatch__chip--bg { background: var(--c-bg); }
.swatch__chip--line { background: var(--c-line); }

.icon-grid { display: grid; gap: var(--s-3); list-style: none; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); }
.icon-grid li { display: grid; justify-items: center; gap: var(--s-1); padding: var(--s-3); border: 1px solid var(--c-line); border-radius: var(--r-md); background: #fff; font-size: var(--fs-sm); text-align: center; }