/* Sardal · Leclef — component styles. Every value comes from tokens.css. */
.sd-root, .sd-root * { box-sizing: border-box; }
body { background: var(--surface); color: var(--ink); margin: 0; }

/* Button */
.sd-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: var(--space-3) var(--space-7); border: 0; border-radius: var(--radius-pill);
  font-family: var(--font-ui); font-size: 15px; font-weight: 600; letter-spacing: .01em; line-height: 1.3;
  cursor: pointer; text-decoration: none; transition: filter .15s ease; }
.sd-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.sd-btn:hover { filter: brightness(1.06); }
.sd-btn:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.sd-btn-primary { background: var(--action); color: var(--on-action); }
.sd-btn-accent { background: var(--sand-dune); color: var(--basalt-ink); }
.sd-btn-text { background: transparent; color: var(--ink-muted); min-height: 32px; padding: var(--space-1) var(--space-2);
  font-weight: 400; font-size: 14px; }
.sd-btn-text:hover { color: var(--ink); filter: none; }
.sd-btn-block { display: flex; width: 100%; }

/* ChapterHeader — the running head */
.sd-chapter { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-5);
  padding-bottom: var(--space-5); border-bottom: 1px solid var(--hairline);
  font-family: var(--font-ui); font-size: 13px; letter-spacing: .32em; text-transform: uppercase; line-height: 1.4; }
.sd-chapter-label { color: var(--eyebrow); }
.sd-chapter-folio { color: var(--ink-faint); white-space: nowrap; }

/* Caption */
.sd-caption { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-body);
  font-size: 12px; letter-spacing: .04em; line-height: 1.5; color: var(--ink-muted); }
.sd-caption::before { content: ""; flex: 0 0 36px; height: 1px; background: var(--ink-faint); }

/* JourneySteps */
.sd-steps { list-style: none; margin: 0; padding: 0; position: relative; font-family: var(--font-ui); }
.sd-steps::before { content: ""; position: absolute; left: 23px; top: 24px; bottom: 24px; width: 2px; background: var(--hairline); }
.sd-step { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: var(--space-5); align-items: start; padding-bottom: var(--space-6); }
.sd-step:last-child { padding-bottom: 0; }
.sd-step-disc { position: relative; z-index: 1; width: 48px; height: 48px; border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: center; font-size: 15px;
  background: var(--surface); color: var(--ink-muted); border: 2px solid var(--hairline); }
.sd-step-done .sd-step-disc { background: var(--step-done); border-color: var(--step-done); color: var(--basalt-ink); }
.sd-step-current .sd-step-disc { background: var(--step-current); border-color: var(--step-current); color: var(--on-step-current); }
.sd-step-title { font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.3; margin-top: var(--space-2); }
.sd-step-note { font-family: var(--font-body); font-size: 14px; color: var(--ink-muted); line-height: 1.5; margin-top: var(--space-1); }
.sd-step-here { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-1);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--eyebrow); }
.sd-step-here::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* TicketCard */
.sd-ticket { background: var(--surface-card); color: var(--ink-on-card); border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-6) var(--space-5); font-family: var(--font-ui); box-shadow: var(--shadow-float); }
.sd-ticket-label { text-align: center; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-on-card-muted); }
.sd-ticket-media { display: flex; justify-content: center; padding: var(--space-5) 0; }
.sd-ticket-rows { margin: 0; border-top: 1px solid var(--hairline-on-card); padding-top: var(--space-4); display: grid; gap: var(--space-3); }
.sd-ticket-row { display: flex; justify-content: space-between; gap: var(--space-4); font-size: 15px; }
.sd-ticket-row dt { color: var(--ink-on-card-muted); }
.sd-ticket-row dd { margin: 0; text-align: right; }

/* ValueCard */
.sd-value { background: var(--surface-raised); border-radius: var(--radius-sm); padding: var(--space-6);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--space-5); align-items: start; }
.sd-value-title { grid-column: 1 / -1; margin: 0; font-family: var(--font-ui); font-size: 28px; font-weight: 400; line-height: 1.2; color: var(--ink); }
.sd-value-text { margin: 0; font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: var(--ink-body); }
.sd-value-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-none); display: block; }
@media (max-width: 520px) { .sd-value { grid-template-columns: 1fr; } }