/* Warranty host components. Uses the design tokens from theme/site.css only. */
.wr-narrow { max-width: 40rem; margin-inline: auto; }
.wr-req { color: var(--danger); }
.wr-help { font-size: var(--text-sm); color: var(--ink-muted); }
.wr-hp { position: absolute !important; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }
.wr-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.wr-actions .btn { min-width: 8rem; }
@media (max-width: 479px) { .wr-actions .btn { flex: 1 1 100%; } }
.field--invalid .field-input { border-color: var(--danger); }

.wr-alert { border-radius: var(--radius-control); padding: .75rem 1rem; border: 1px solid var(--line); background: var(--surface-alt); }
.wr-alert--danger { border-color: color-mix(in oklab, var(--danger) 35%, white); background: color-mix(in oklab, var(--danger) 7%, white); color: #8a1c12; }
.wr-alert--success { border-color: color-mix(in oklab, var(--success) 35%, white); background: color-mix(in oklab, var(--success) 7%, white); color: #05603a; }
.wr-readonly { min-height: 2.75rem; display: flex; align-items: center; padding: .5rem .875rem; border-radius: var(--radius-control); background: var(--surface-alt); font-weight: 600; }

/* Progress */
.wr-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; list-style: none; padding: 0; margin: 0; counter-reset: none; }
.wr-steps__item > a, .wr-steps__item > span:first-child { text-decoration: none; color: inherit; }
.wr-steps__item a, .wr-steps__item { display: flex; flex-direction: column; align-items: center; gap: .25rem; text-align: center; font-size: var(--text-sm); color: var(--ink-muted); }
.wr-steps__num { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px; border: 2px solid var(--line); background: var(--surface); font-weight: 700; }
.wr-steps__item.is-done .wr-steps__num { border-color: var(--brand); color: var(--brand-strong); }
.wr-steps__item.is-current { color: var(--ink); font-weight: 700; }
.wr-steps__item.is-current .wr-steps__num { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
@media (max-width: 379px) { .wr-steps__label { display: none; } .wr-steps__item.is-current .wr-steps__label { display: inline; } }

/* Summary */
.wr-summary { display: grid; gap: .5rem; margin: 0; }
.wr-summary > div { display: flex; justify-content: space-between; gap: 1rem; padding-block: .5rem; border-bottom: 1px solid var(--line); }
.wr-summary dt { color: var(--ink-muted); }
.wr-summary dd { margin: 0; font-weight: 600; text-align: end; }
.wr-ref { font-size: var(--text-xl); letter-spacing: .08em; }
.wr-check { display: flex; gap: .625rem; align-items: flex-start; cursor: pointer; }
.wr-check input { width: 1.25rem; height: 1.25rem; margin-top: .3rem; accent-color: var(--brand); }
.wr-done-icon { width: 4rem; height: 4rem; border-radius: 999px; display: grid; place-items: center; background: color-mix(in oklab, var(--success) 12%, white); color: var(--success); }

/* Landing */
.wr-hero { background: linear-gradient(180deg, var(--brand-tint), var(--surface)); }
.wr-entries { display: grid; gap: 1rem; }
@media (min-width: 640px) { .wr-entries { grid-template-columns: 1fr 1fr; } }
.wr-entry { display: grid; gap: .375rem; padding: 1.5rem; min-height: 9rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.wr-entry:hover { border-color: var(--brand); box-shadow: 0 6px 20px -12px color-mix(in oklab, var(--brand) 60%, transparent); }
.wr-entry:first-child { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.wr-entry:first-child .wr-entry__text { color: inherit; opacity: .92; }
.wr-entry__icon { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: 12px; background: color-mix(in oklab, currentColor 12%, transparent); }
.wr-entry__title { font-size: var(--text-xl); font-weight: 800; }
.wr-entry__text { color: var(--ink-muted); }
.wr-quick { padding: 1rem; display: grid; gap: .5rem; max-width: 36rem; }
.wr-quick__row { display: flex; gap: .5rem; }
.wr-quick__row .field-input { flex: 1; }
.wr-how { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
@media (min-width: 768px) { .wr-how { grid-template-columns: repeat(3, 1fr); } }
.wr-how li { display: flex; gap: .875rem; align-items: flex-start; }
.wr-how__num { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; background: var(--brand-soft); color: var(--brand-strong); font-weight: 800; }
.wr-faq { display: grid; gap: .5rem; }
.wr-faq details { border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); }
.wr-faq summary { cursor: pointer; padding: .875rem 1rem; font-weight: 700; min-height: 2.75rem; }
.wr-faq details p { padding: 0 1rem 1rem; color: var(--ink-muted); }
.htmx-request .btn-primary[type=submit] { opacity: .7; }
#code-feedback { display: grid; gap: 1.25rem; }
#wizard-heading, #lookup-result { scroll-margin-top: 5rem; }
#wizard-heading:focus, #lookup-result:focus { outline: none; }