/* Clay — light-only, hard-edged alpine surface language (Sölden reference).
   Every class reads tokens.css variables. Load tokens.css first. */

.ds-ground {
  background: var(--ground);
  color: var(--label);
  font-family: var(--font-rounded);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Card: flat white, hairline border, quiet shadow ---------- */
.clay-card {
  position: relative; box-sizing: border-box;
  border-radius: var(--radius-card);
  background: var(--card-top);
  border: 1px solid var(--card-stroke);
  box-shadow: none;
  padding: var(--space-4);
}
.clay-card.is-selected {
  background: var(--card-selected-top);
  border-color: var(--card-selected-stroke);
  box-shadow: inset 0 0 0 1px var(--card-selected-stroke);
}
.clay-card.is-outlined {
  border-color: var(--outline, var(--card-selected-stroke));
  box-shadow: none;
}
/* Tinted card: set --tint on the element. A faint wash plus a tinted hairline. */
.clay-card.is-tinted {
  background: color-mix(in srgb, var(--tint) 6%, white);
  border-color: color-mix(in srgb, var(--tint) 24%, var(--card-stroke));
  box-shadow: none;
}

/* ---------- Small chip ---------- */
.clay-chip {
  box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px;
  border-radius: 0;
  padding: 8px 14px;
  background: var(--chip-top);
  border: 1px solid var(--card-stroke);
  box-shadow: none;
  font: 500 15px/20px var(--font-rounded);
  color: var(--label);
}
.clay-chip.is-round { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: var(--radius-pill); }

/* ---------- Inset chip: a control printed ON a card, never a second tile ---------- */
.inset-chip {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 0;
  padding: 10px 14px;
  background: #eeeff1;
  border: 1px solid var(--card-stroke);
  font: 500 15px/20px var(--font-rounded);
  color: var(--label);
}
.inset-chip.is-outlined { border-color: color-mix(in srgb, var(--tint, var(--accent)) 40%, var(--card-stroke)); }
.inset-chip.is-selected {
  background: var(--ink);
  border-color: var(--ink);
  color: #ffffff;
  font-weight: 700;
}
.inset-chip.is-pill { border-radius: 0; padding: 10px 14px; }
.inset-chip.is-tag { border-radius: 0; padding: 6px 10px; font: 600 12px/16px var(--font-rounded); color: var(--tint, var(--label-secondary)); }

/* ---------- Icon chip: the 36–38pt disc a glyph sits in ---------- */
.icon-chip {
  --size: var(--icon-chip);
  position: relative; display: inline-grid; place-items: center;
  width: var(--size); height: var(--size); border-radius: 50%;
  background: color-mix(in srgb, var(--tint, var(--icon-chip-top)) 12%, var(--icon-chip-top));
  color: var(--tint, var(--label-secondary));
  font-size: calc(var(--size) * 0.45);
}
.icon-chip > * { position: relative; }
.icon-chip.is-row { --size: var(--row-icon); }
.icon-chip.is-small { --size: var(--radio); }
/* On a tinted card the disc sits one shade deeper than the card. */
.icon-chip.tints-base { background: color-mix(in srgb, var(--tint) 16%, white); }

/* ---------- Radio and check badge ---------- */
.clay-radio {
  width: var(--radio); height: var(--radio); border-radius: 50%; display: inline-grid; place-items: center;
  box-shadow: inset 0 0 0 1.5px var(--radio-stroke);
}
.clay-radio.is-selected, .check-badge {
  background: var(--radio-top);
  box-shadow: none;
}
.check-badge {
  --tint: var(--accent);
  width: var(--check-badge); height: var(--check-badge); border-radius: 50%; display: inline-grid; place-items: center;
  background: var(--tint);
}
.clay-radio svg, .check-badge svg { width: 46%; height: 46%; stroke: #fff; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.clay-radio:not(.is-selected) svg { display: none; }

/* ---------- Primary CTA: solid accent ---------- */
.clay-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: var(--cta-height); padding: 0 24px;
  border: 0; border-radius: 0; cursor: pointer;
  background: var(--accent);
  color: var(--on-accent);
  font: 700 15px/20px var(--font-rounded);
  letter-spacing: .04em; text-transform: uppercase;
  box-shadow: none;
  transition: background .18s;
}
.clay-cta:hover { background: #e85f42; }
.clay-cta:active { transform: scale(.98); }
.clay-cta[disabled] { opacity: .42; box-shadow: none; cursor: default; }
.clay-cta.is-tinted { --tint: var(--accent);
  background: var(--tint);
  box-shadow: none;
  color: #fff;
}
.clay-cta.is-tinted:hover { background: color-mix(in srgb, var(--tint) 88%, black); }
/* Hold-to-confirm: a flat accent-tinted capsule that fills as you hold. */
.hold-cta {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 15px 16px; border: 0; border-radius: 0;
  background: color-mix(in srgb, var(--tint, var(--accent)) 10%, white);
  color: var(--tint, var(--accent)); font: 600 17px/22px var(--font-rounded);
}
.hold-cta .fill { position: absolute; inset: 0; width: var(--progress, 0%); background: color-mix(in srgb, var(--tint, var(--accent)) 24%, transparent); }
.hold-cta .label { position: relative; }

/* ---------- Stepper disc and segmented control ---------- */
.stepper-btn {
  width: var(--stepper-button); height: var(--stepper-button); border-radius: 50%; border: 0;
  background: color-mix(in srgb, var(--tint, var(--accent)) 10%, white);
  color: var(--tint, var(--accent)); font: 700 17px/1 var(--font-rounded);
  display: inline-grid; place-items: center;
}
.clay-segmented { display: flex; gap: 8px; }
.clay-segmented .inset-chip { flex: 1; }

/* ---------- Row: icon disc, title, subtitle, trailing ---------- */
.clay-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.clay-row .text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.clay-row .title { font: 700 17px/22px var(--font-rounded); color: var(--label); }
.clay-row .subtitle { font: 400 13px/18px var(--font-rounded); color: var(--label-secondary); }
.clay-row .chevron { color: var(--label-tertiary); }

/* ---------- Section header, eyebrow, badge ---------- */
.section-header {
  display: flex; align-items: center; gap: 6px;
  font: 700 12px/16px var(--font-rounded);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink);
}
.section-header .glyph { width: 16px; height: 16px; display: inline-grid; place-items: center; }
.eyebrow { font: 700 10px/12px var(--font-rounded); letter-spacing: .08em; text-transform: uppercase; color: var(--label-secondary); }
.badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 0;
  background: color-mix(in srgb, var(--tint, var(--label-secondary)) 10%, white);
  border: 1px solid color-mix(in srgb, var(--tint, var(--label-secondary)) 28%, transparent);
  color: var(--tint, var(--label-secondary)); font: 700 11px/13px var(--font-rounded);
  letter-spacing: .04em; text-transform: uppercase;
}

/* ---------- Progress track ---------- */
.track { height: var(--progress-track); border-radius: 0; background: var(--track); overflow: hidden; }
.track .fill { height: 100%; width: var(--progress, 40%); border-radius: inherit; background: var(--accent); }

/* ---------- Top bar: white, hairline bottom border ---------- */
.floating-bar {
  box-sizing: border-box; display: flex; align-items: center; gap: 10px;
  height: var(--bar-height); padding: 0 8px 0 18px; border-radius: 0;
  background: #ffffff;
  border: 0; border-bottom: 1px solid var(--card-stroke);
  box-shadow: none;
  color: var(--label-secondary); font: 400 17px/22px var(--font-rounded);
}
.floating-bar .placeholder { flex: 1; }
.floating-bar .mic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); }

/* ---------- Hero card: deep navy ---------- */
.hero-card {
  position: relative; overflow: hidden; border-radius: var(--radius-card); padding: 16px;
  background: linear-gradient(180deg, var(--hero-top), var(--hero-bottom));
  color: var(--hero-text);
}
.hero-card::before, .hero-card::after { content: ""; position: absolute; border-radius: 50%; filter: blur(28px); pointer-events: none; }
.hero-card::before { width: 60%; height: 90%; left: 45%; top: -30%; background: var(--hero-glow); }
.hero-card::after { width: 40%; height: 60%; left: -10%; bottom: -20%; background: var(--hero-accent); }
.hero-card .greeting { position: relative; font: 900 24px/0.95 var(--font-rounded); letter-spacing: -.01em; text-transform: uppercase; }
.hero-card .quote { position: relative; font: 400 13px/18px var(--font-hand); color: var(--hero-subtext); margin-top: 2px; }
.hero-card .chips { position: relative; display: flex; gap: 8px; margin-top: 12px; }
.hero-card .chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 0;
  background: var(--hero-embedded); box-shadow: inset 0 0 0 1px var(--hero-embedded-border);
  font: 700 13px/16px var(--font-rounded); color: var(--hero-text);
}

/* ---------- Page hero ---------- */
.page-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 8px 16px; }
.page-hero .disc { --size: var(--hero-glyph-disc); }
.page-hero .name { font: 900 42px/0.95 var(--font-rounded); letter-spacing: -.01em; text-transform: uppercase; color: var(--ink); }
.page-hero .meta { font: 400 13px/18px var(--font-rounded); color: var(--label-secondary); }
.page-hero .actions { display: flex; gap: 12px; margin-top: 4px; }
.page-hero .ghost, .page-hero .primary { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 0; }
.page-hero .ghost { background: var(--chip-top); box-shadow: inset 0 0 0 1px var(--card-stroke); color: var(--label); }
.page-hero .primary { background: var(--tint, var(--accent)); color: #fff; box-shadow: none; }

/* ---------- Tinted row ---------- */
.tinted-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 10px; border-radius: 0; }
.tinted-row .title { flex: 1; font: 700 15px/20px var(--font-rounded); color: var(--label); }
.tinted-row .meta { font: 500 13px/18px var(--font-rounded); color: var(--label-secondary); }
.tinted-row.is-long { align-items: stretch; min-height: 120px; }
.tinted-row.is-long .bar { width: 3px; border-radius: 0; background: var(--tint); align-self: stretch; }

/* utility */
.stack { display: flex; flex-direction: column; gap: 10px; }
.row-gap { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sf { font-family: var(--font-rounded); }