/* Site Health report tool. Loaded on /services/site-health and /es/services/site-health.
   Markup: src/components/SiteHealthTool.astro. Behaviour: /js/site-health-snapshot.js.
   Tokens come from MainLayout (--ny-*). Cream paper, ink borders (2px), tangerine only as
   an accent. No texture, no gradient text, hovers never invert colors. */

.sht [hidden], .sht-dialog[hidden] { display: none !important; }
.sht { background: var(--ny-cream); color: var(--ny-ink); padding: clamp(2.25rem, 5vw, 4rem) 0 clamp(2.5rem, 6vw, 5rem); }
.sht__wrap { width: min(100% - 2 * var(--ny-gutter, 1.25rem), 76rem); margin: 0 auto; }
.sht .of-back { margin: 0 0 1.25rem; font-family: var(--ny-sans); text-transform: none; letter-spacing: 0; font-size: 0.9rem; }
.sht h1, .sht h2, .sht h3 { font-family: var(--ny-display); letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
.sht h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.02; font-weight: 800; max-width: 22ch; }
.sht h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.15; font-weight: 800; }
.sht h3 { font-size: 1.1rem; line-height: 1.25; font-weight: 700; }
.sht p { margin: 0; }
.sht__intro { display: grid; gap: 1rem; max-width: 52rem; margin-bottom: 1.75rem; }
.sht__lede { font-size: 1.1rem; line-height: 1.55; color: var(--ny-ink-soft); max-width: 46rem; }

/* ---------- form ---------- */
.sht__form { border: 2px solid var(--ny-ink); background: var(--ny-surface-warm); padding: clamp(1rem, 2.4vw, 1.6rem); display: grid; gap: 0.9rem; }
.sht__label { font-weight: 600; font-size: 0.95rem; }
.sht__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem; align-items: stretch; }
.sht__input { display: flex; align-items: center; gap: 0.35rem; border: 2px solid var(--ny-ink); background: var(--ny-surface); padding: 0 0.9rem; min-height: 3.4rem; }
.sht__input:focus-within { outline: 3px solid var(--ny-tangerine); outline-offset: 2px; }
.sht__input span { color: var(--ny-ink-muted); font-family: var(--ny-mono); font-size: 0.95rem; }
.sht__input input { flex: 1; min-width: 0; border: 0; background: transparent; font: 500 1.05rem var(--ny-sans); color: var(--ny-ink); outline: none; padding: 0.7rem 0; }
.sht__input input::placeholder { color: var(--ny-ink-muted); }
.sht__error { color: var(--ny-fail-text); font-weight: 600; font-size: 0.95rem; }
.sht__how { color: var(--ny-ink-muted); font-size: 0.88rem; max-width: 60rem; }
.sht__how a { color: var(--ny-tangerine-text); text-underline-offset: 0.15em; }
.sht .ny-btn[disabled] { opacity: 0.55; cursor: progress; transform: none; box-shadow: none; }
@media (max-width: 640px) { .sht__row { grid-template-columns: 1fr; } .sht .ny-btn--lg { justify-content: center; } }

/* ---------- stage strip: the same six icons in the preview and the live scan ---------- */
.sht-stages { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; }
.sht-stages li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; color: var(--ny-ink-soft); }
.sht-stage__icon { position: relative; width: 2rem; height: 2rem; display: inline-grid; place-items: center; border: 2px solid var(--ny-ink); background: var(--ny-surface); flex: none; }
.sht-stage__icon svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: var(--ny-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sht-stage__tick { position: absolute; inset: 0; margin: auto; opacity: 0; stroke: var(--ny-pass-text) !important; stroke-width: 2.4 !important; }
.sht-stages--preview li.is-active .sht-stage__icon { background: var(--ny-tangerine); }
.sht-stages--preview li.is-done .sht-stage__icon { background: var(--ny-pass-soft); border-color: var(--ny-pass); }

.sht-stages--live { display: grid; gap: 0.55rem; }
.sht-stages--live li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.7rem; padding: 0.45rem 0; border-bottom: 1px solid var(--ny-rule-soft); color: var(--ny-ink); font-weight: 600; }
.sht-stages--live li:last-child { border-bottom: 0; }
.sht-stages--live li[data-state="waiting"] { color: var(--ny-ink-muted); font-weight: 500; }
.sht-stages--live li[data-state="waiting"] .sht-stage__icon { border-color: var(--ny-rule-soft); }
.sht-stages--live li[data-state="waiting"] .sht-stage__icon svg { stroke: var(--ny-ink-muted); }
.sht-stages--live li[data-state="running"] .sht-stage__icon { background: var(--ny-tangerine); animation: sht-pulse 1.2s ease-in-out infinite; }
.sht-stages--live li[data-state="done"] .sht-stage__icon { background: var(--ny-pass-soft); border-color: var(--ny-pass); }
.sht-stages--live li[data-state="done"] .sht-stage__icon > svg:first-child { opacity: 0; }
.sht-stages--live li[data-state="done"] .sht-stage__tick { opacity: 1; }
.sht-stages--live li[data-state="partial"] .sht-stage__icon { background: var(--ny-warn-soft); border-color: var(--ny-warn-strong); }
.sht-stage__result { font-size: 0.82rem; font-weight: 500; color: var(--ny-ink-soft); font-variant-numeric: tabular-nums; align-self: center; text-align: right; }
@keyframes sht-pulse { 50% { transform: translate(1px, 1px); box-shadow: 3px 3px 0 var(--ny-ink); } }

/* ---------- results frame ---------- */
.sht__results { margin-top: 1.5rem; display: grid; gap: 1.25rem; }
.sht__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.35rem 1rem; align-items: baseline; border-bottom: 2px solid var(--ny-ink); padding-bottom: 0.65rem; }
.sht__bar-title { font-size: 1.05rem; word-break: break-word; }
.sht__bar-title span { color: var(--ny-ink-soft); }
.sht__bar-meta { display: flex; gap: 1rem; color: var(--ny-ink-soft); font-size: 0.88rem; font-variant-numeric: tabular-nums; }
.sht__banner { border: 2px solid var(--ny-ink); padding: 0.8rem 1rem; background: var(--ny-warn-soft); font-weight: 500; }
.sht__banner[data-kind="error"] { background: var(--ny-fail-soft); }
.sht__banner[data-kind="info"] { background: var(--ny-surface-warm); }

/* ---------- gauge ---------- */
.sht-gauge { position: relative; width: 9rem; height: 9rem; flex: none; }
.sht-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sht-gauge__track { fill: none; stroke: var(--ny-rule-soft); stroke-width: 10; }
.sht-gauge__arc { fill: none; stroke: var(--ny-ink); stroke-width: 10; stroke-linecap: butt; stroke-dasharray: 326.726; stroke-dashoffset: 326.726; }
.sht-gauge[data-tone="good"] .sht-gauge__arc { stroke: var(--ny-pass); }
.sht-gauge[data-tone="fair"] .sht-gauge__arc { stroke: var(--ny-warn-strong); }
.sht-gauge[data-tone="poor"] .sht-gauge__arc { stroke: var(--ny-tangerine-2); }
.sht-gauge[data-tone="bad"] .sht-gauge__arc { stroke: var(--ny-fail); }
.sht-gauge__num { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1; }
.sht-gauge__num strong { font: 800 2.1rem var(--ny-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.sht-gauge__num span { font-size: 0.8rem; color: var(--ny-ink-soft); margin-top: 0.15rem; }
.sht-gauge--big { width: 11rem; height: 11rem; }
.sht-gauge--big .sht-gauge__num strong { font-size: 2.9rem; }

/* ---------- live scan panel ---------- */
.sht-scan { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.25rem); border: 2px solid var(--ny-ink); background: var(--ny-surface-warm); padding: clamp(1rem, 2.6vw, 1.75rem); align-items: center; }
.sht-scan__body { display: grid; gap: 0.8rem; min-width: 0; }
.sht-scan__now { font-weight: 600; min-height: 1.5em; }
.sht-scan__track { height: 0.5rem; background: var(--ny-rule-soft); }
.sht-scan__track span { display: block; height: 100%; width: 0; background: var(--ny-ink); transition: width 400ms var(--ny-ease-out); }
.sht-log summary { cursor: pointer; font-size: 0.88rem; color: var(--ny-ink-soft); }
.sht-log ol { list-style: none; margin: 0.6rem 0 0; padding: 0.6rem 0.8rem; background: var(--ny-cream-2); max-height: 11rem; overflow: auto; font: 0.8rem/1.55 var(--ny-mono); color: var(--ny-ink); }
.sht-log li { display: grid; grid-template-columns: 3.2rem 1fr; gap: 0.5rem; word-break: break-word; }
.sht-log li time { color: var(--ny-ink-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 720px) { .sht-scan { grid-template-columns: 1fr; justify-items: start; } .sht-stage__result { font-size: 0.78rem; } }

/* ---------- summary ---------- */
.sht-report { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }
.sht-summary { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); border: 2px solid var(--ny-ink); background: var(--ny-surface-warm); box-shadow: 6px 6px 0 var(--ny-tangerine); padding: clamp(1.1rem, 2.8vw, 2rem); align-items: center; }
.sht-summary__text { display: grid; gap: 0.6rem; min-width: 0; }
.sht-band { font: 700 0.95rem var(--ny-sans); color: var(--ny-ink-soft); }
.sht-summary__text h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); max-width: 28ch; }
.sht-summary__sub { color: var(--ny-ink-soft); max-width: 46rem; }
.sht-google { font-size: 0.9rem; color: var(--ny-ink-soft); border-left: 4px solid var(--ny-rule-soft); padding-left: 0.75rem; }
.sht-counts { list-style: none; margin: 0.2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.92rem; }
.sht-counts li { display: inline-flex; align-items: center; gap: 0.45rem; }
.sht-dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; display: inline-block; border: 2px solid var(--ny-ink); }
.sht-dot--fail { background: var(--ny-fail); border-color: var(--ny-fail); }
.sht-dot--warn { background: var(--ny-tangerine); border-color: var(--ny-tangerine); }
.sht-dot--pass { background: var(--ny-pass); border-color: var(--ny-pass); }
.sht-dot--skip { background: transparent; border-color: var(--ny-skip); }
@media (max-width: 720px) { .sht-summary { grid-template-columns: 1fr; justify-items: start; } }

/* ---------- category tiles ---------- */
.sht-cats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(9.3rem, 1fr)); gap: 0.75rem; }
.sht-cats > li { display: flex; }
.sht-cat { align-content: start; border: 2px solid var(--ny-ink); background: var(--ny-surface-warm); padding: 0.85rem 0.95rem 0.95rem; display: grid; gap: 0.4rem; text-align: left; font: inherit; color: inherit; cursor: pointer; width: 100%; transition: transform var(--ny-t-fast) var(--ny-ease-out), box-shadow var(--ny-t-fast) var(--ny-ease-out); }
.sht-cat:hover { transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--ny-tangerine); }
.sht-cat:focus-visible { outline: 3px solid var(--ny-tangerine); outline-offset: 2px; }
.sht-cat[aria-pressed="true"] { background: var(--ny-cream-2); box-shadow: 3px 3px 0 var(--ny-ink); }
.sht-cat__name { font-weight: 700; font-size: 0.95rem; }
.sht-cat__score { font: 800 1.9rem var(--ny-display); letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.sht-cat__score small { font: 500 0.78rem var(--ny-sans); color: var(--ny-ink-soft); letter-spacing: 0; }
.sht-cat__score--none { font: 700 1rem var(--ny-sans); letter-spacing: 0; color: var(--ny-ink-soft); }
.sht-cat__bar { height: 0.4rem; background: var(--ny-rule-soft); }
.sht-cat__bar span { display: block; height: 100%; background: var(--ny-ink); }
.sht-cat[data-band="good"] .sht-cat__bar span { background: var(--ny-pass); }
.sht-cat[data-band="fair"] .sht-cat__bar span { background: var(--ny-warn-strong); }
.sht-cat[data-band="poor"] .sht-cat__bar span { background: var(--ny-tangerine-2); }
.sht-cat[data-band="bad"] .sht-cat__bar span { background: var(--ny-fail); }
.sht-cat__meta { font-size: 0.8rem; color: var(--ny-ink-soft); }

/* ---------- fix first ---------- */
.sht-fixfirst { border: 2px solid var(--ny-ink); background: var(--ny-cream-2); padding: clamp(1rem, 2.4vw, 1.6rem); display: grid; gap: 1rem; }
.sht-fixfirst header { display: grid; gap: 0.3rem; }
.sht-fixfirst header p { color: var(--ny-ink-soft); }
.sht-fixfirst ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.sht-fixfirst li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.2rem 0.85rem; align-items: start; background: var(--ny-surface-warm); border: 2px solid var(--ny-ink); padding: 0.75rem 0.9rem; }
.sht-fixfirst li strong { font-weight: 700; }
.sht-fixfirst li p { color: var(--ny-ink-soft); font-size: 0.93rem; grid-column: 2; }
.sht-fixfirst__cta { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; }
.sht-fixfirst__cta p { color: var(--ny-ink-soft); font-size: 0.9rem; max-width: 40rem; }

/* ---------- findings ---------- */
.sht-findings { display: grid; gap: 1rem; }
.sht-findings__head { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; justify-content: space-between; align-items: end; }
.sht-filter { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.sht-filter button { border: 2px solid var(--ny-ink); background: var(--ny-surface-warm); padding: 0.3rem 0.7rem; font: 600 0.85rem var(--ny-sans); color: var(--ny-ink); cursor: pointer; min-height: 2.2rem; }
.sht-filter button:hover { background: var(--ny-cream-2); }
.sht-filter button:focus-visible { outline: 3px solid var(--ny-tangerine); outline-offset: 2px; }
.sht-filter button[aria-pressed="true"] { background: var(--ny-ink); color: var(--ny-on-dark); }
.sht-list { display: grid; gap: 0.6rem; }
.sht-f { border: 2px solid var(--ny-ink); background: var(--ny-surface-warm); }
.sht-f[data-status="fail"] { border-left-width: 8px; border-left-color: var(--ny-fail); }
.sht-f[data-status="warn"] { border-left-width: 8px; border-left-color: var(--ny-tangerine); }
.sht-f summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.2rem 0.85rem; align-items: start; padding: 0.8rem 0.95rem; }
.sht-f summary::-webkit-details-marker { display: none; }
.sht-f summary:hover { background: var(--ny-cream-2); }
.sht-f summary:focus-visible { outline: 3px solid var(--ny-tangerine); outline-offset: -3px; }
.sht-f__title { font-weight: 700; display: block; }
.sht-f__found { display: block; color: var(--ny-ink-soft); font-size: 0.93rem; margin-top: 0.15rem; }
.sht-f__chev { width: 1.2rem; height: 1.2rem; stroke: var(--ny-ink); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--ny-t-base) var(--ny-ease-out); margin-top: 0.15rem; }
.sht-f[open] .sht-f__chev { transform: rotate(180deg); }
.sht-f__body { display: grid; gap: 0.9rem; padding: 0.2rem 0.95rem 1rem; border-top: 1px dashed var(--ny-rule-soft); margin: 0 0.95rem; padding-inline: 0; padding-top: 0.9rem; }
.sht-f__body h4 { margin: 0 0 0.25rem; font: 700 0.85rem var(--ny-sans); color: var(--ny-ink-soft); }
.sht-f__body p { font-size: 0.95rem; }
.sht-ev { margin: 0; padding: 0.65rem 0.8rem; background: var(--ny-cream-2); border: 1px solid var(--ny-rule-soft); font: 0.82rem/1.55 var(--ny-mono); white-space: pre-wrap; word-break: break-word; list-style: none; }
.sht-ev li + li { margin-top: 0.2rem; }
.sht-f__note { color: var(--ny-ink-muted); font-size: 0.78rem; margin-top: 0.3rem; }
.sht-f__offer { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; font-size: 0.9rem; background: var(--ny-cream-2); padding: 0.55rem 0.75rem; }
.sht-f__offer strong { font-weight: 700; }
.sht-sev { display: inline-block; font: 700 0.75rem var(--ny-sans); padding: 0.18rem 0.5rem; border: 2px solid var(--ny-ink); background: var(--ny-surface); white-space: nowrap; }
.sht-sev--critical { background: var(--ny-fail); border-color: var(--ny-fail); color: var(--ny-on-status); }
.sht-sev--high { background: var(--ny-fail-soft); border-color: var(--ny-fail); color: var(--ny-fail-text); }
.sht-sev--medium { background: var(--ny-warn-soft); border-color: var(--ny-warn-strong); color: var(--ny-warn-text); }
.sht-sev--low { background: var(--ny-skip-soft); border-color: var(--ny-skip); color: var(--ny-skip-text); }

/* ---------- locked block, plan, tools ---------- */
.sht-locked { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; border: 2px dashed var(--ny-ink); background: var(--ny-cream-2); padding: clamp(1rem, 2.4vw, 1.5rem); }
.sht-locked__copy { display: grid; gap: 0.5rem; max-width: 44rem; }
.sht-locked__copy p { color: var(--ny-ink-soft); }
.sht-chips { list-style: none; margin: 0.2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.sht-chips li { font: 600 0.8rem var(--ny-sans); border: 2px solid var(--ny-ink); background: var(--ny-surface-warm); padding: 0.15rem 0.5rem; }
.sht-plan { display: grid; gap: 0.8rem; border: 2px solid var(--ny-ink); background: var(--ny-surface-warm); padding: clamp(1rem, 2.4vw, 1.5rem); }
.sht-plan__table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.sht-plan__table th, .sht-plan__table td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--ny-rule-soft); vertical-align: top; }
.sht-plan__table th { border-bottom: 2px solid var(--ny-ink); font-size: 0.82rem; color: var(--ny-ink-soft); }
.sht-plan__summary { font-weight: 600; }
.sht-tools { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; }
.sht-tools p { color: var(--ny-ink-muted); font-size: 0.85rem; flex-basis: 100%; }
@media (max-width: 640px) { .sht-plan__table thead { display: none; } .sht-plan__table tr { display: grid; padding: 0.4rem 0; border-bottom: 1px solid var(--ny-rule-soft); } .sht-plan__table td { border: 0; padding: 0.1rem 0.2rem; } }

/* ---------- checked / method ---------- */
.sht-more { border: 2px solid var(--ny-ink); background: var(--ny-surface-warm); }
.sht-more > summary { cursor: pointer; padding: 0.85rem 1rem; font: 700 1rem var(--ny-display); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.sht-more > summary::-webkit-details-marker { display: none; }
.sht-more > summary::after { content: "+"; font: 700 1.3rem/1 var(--ny-sans); }
.sht-more[open] > summary::after { content: "\2212"; }
.sht-more > summary:focus-visible { outline: 3px solid var(--ny-tangerine); outline-offset: -3px; }
.sht-more > div { padding: 0.25rem 1rem 1.1rem; display: grid; gap: 0.9rem; }
.sht-more h4 { margin: 0.4rem 0 0.2rem; font: 700 0.9rem var(--ny-sans); }
.sht-checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.25rem 1.25rem; font-size: 0.9rem; }
.sht-checklist li { display: flex; gap: 0.45rem; align-items: baseline; }
.sht-checklist li::before { content: "\2713"; color: var(--ny-pass-text); font-weight: 700; }
.sht-checklist--skip li::before { content: "\2013"; color: var(--ny-skip-text); }
.sht-checklist small { display: block; color: var(--ny-ink-muted); font-size: 0.78rem; }
.sht-method ol { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.5rem; font-size: 0.95rem; }
.sht-weights { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.sht-weights li { border: 2px solid var(--ny-ink); background: var(--ny-cream-2); padding: 0.15rem 0.55rem; font-size: 0.85rem; font-weight: 600; }
.sht-fine { font-size: 0.85rem; color: var(--ny-ink-muted); }

/* ---------- closing call to action ---------- */
.sht-cta { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; justify-content: space-between; align-items: center; background: var(--ny-inverse-bg); color: var(--ny-on-dark); padding: clamp(1.25rem, 3vw, 2rem); }
.sht-cta > div:first-child { display: grid; gap: 0.5rem; max-width: 44rem; }
.sht-cta p { color: color-mix(in srgb, var(--ny-on-dark) 82%, transparent); }
.sht-cta .sht-cta__from { color: var(--ny-on-dark); font-weight: 600; }
.sht-cta__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.sht-cta .ny-btn--primary { background: var(--ny-tangerine); border-color: var(--ny-tangerine); color: var(--ny-on-accent) !important; }
.sht-cta .ny-btn--ghost { color: var(--ny-on-dark) !important; border-color: var(--ny-on-dark); background: transparent; }
.sht-cta .ny-btn--ghost:hover { background: transparent; box-shadow: 3px 3px 0 var(--ny-tangerine); }

/* ---------- dialogs ---------- */
.sht-dialog { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 1rem; }
.sht-dialog__backdrop { position: absolute; inset: 0; background: var(--ny-backdrop); }
.sht-dialog__panel { position: relative; width: min(100%, 44rem); max-height: calc(100dvh - 2rem); overflow: auto; background: var(--ny-cream); border: 2px solid var(--ny-ink); box-shadow: 8px 8px 0 var(--ny-tangerine); padding: clamp(1.1rem, 3vw, 1.9rem); display: grid; gap: 0.9rem; }
.sht-dialog__panel--narrow { width: min(100%, 32rem); }
.sht-dialog__close { position: absolute; top: 0.5rem; right: 0.6rem; border: 0; background: transparent; font: 400 2rem/1 var(--ny-sans); cursor: pointer; color: var(--ny-ink); width: 2.5rem; height: 2.5rem; }
.sht-dialog__close:focus-visible { outline: 3px solid var(--ny-tangerine); }
.sht-dialog h3 { padding-right: 2.5rem; font-size: 1.35rem; }
.sht-formgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
.sht-field { display: grid; gap: 0.3rem; }
.sht-field--wide { grid-column: 1 / -1; }
.sht-field label { font: 600 0.88rem var(--ny-sans); }
.sht-field input, .sht-field select, .sht-field textarea { font: 500 1rem var(--ny-sans); color: var(--ny-ink); background: var(--ny-surface); border: 2px solid var(--ny-ink); padding: 0.6rem 0.7rem; min-height: 2.8rem; width: 100%; }
.sht-field input:focus, .sht-field select:focus, .sht-field textarea:focus { outline: 3px solid var(--ny-tangerine); outline-offset: 1px; }
.sht-field input[readonly] { background: var(--ny-cream-2); }
.sht-opt { font-weight: 400; color: var(--ny-ink-muted); }
.sht-optin { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.9rem; color: var(--ny-ink-soft); }
.sht-optin input { width: 1.2rem; height: 1.2rem; margin-top: 0.15rem; accent-color: var(--ny-ink); }
.sht-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sht-ok { color: var(--ny-pass-text); font-weight: 600; }
.sht-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.sht-quote { border: 2px solid var(--ny-ink); background: var(--ny-cream-2); padding: 0.75rem 0.9rem; font-size: 0.92rem; display: grid; gap: 0.4rem; }
.sht-quote ul { margin: 0; padding-left: 1.1rem; }
@media (max-width: 640px) { .sht-formgrid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .sht *, .sht *::before, .sht *::after { animation: none !important; transition: none !important; }
}