/* Speed, distance and time calculator */
.container--sdt{max-width:70rem}
.sdt-top-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin:1.25rem 0;padding:0;border:0;min-width:0}
.sdt-top-modes legend{grid-column:1/-1;margin-bottom:.1rem;font-weight:900}
.sdt-top-modes label{display:block;min-width:0;cursor:pointer}
.sdt-top-modes input{position:absolute;opacity:0;pointer-events:none}
.sdt-top-modes span{display:flex;align-items:center;justify-content:center;min-height:52px;padding:.7rem 1rem;border:2px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-muted);font-weight:800;text-align:center}
.sdt-top-modes input:checked+span{border-color:var(--color-primary);background:rgba(20,107,99,.08);color:var(--color-primary)}
.sdt-top-modes input:focus-visible+span{outline:3px solid rgba(20,107,99,.3);outline-offset:2px}
[data-speed-pace-mode-panel][hidden]{display:none!important}
.sdt-app{display:grid;gap:1rem;margin:1.25rem 0 2rem}
.sdt-mode-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;padding:.5rem;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface-soft)}
.sdt-mode-tab{min-width:0;min-height:48px;padding:.75rem .65rem;border:1px solid transparent;border-radius:calc(var(--radius-lg) - 6px);background:transparent;color:var(--color-muted);font:inherit;font-weight:700;cursor:pointer}
.sdt-mode-tab[aria-selected="true"]{border-color:var(--color-primary);background:var(--color-surface);color:var(--color-primary);box-shadow:var(--shadow-sm)}
.sdt-mode-tab:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px}
.sdt-form{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem}
.sdt-input-panel,.sdt-result-panel{min-width:0;margin:0}
.sdt-panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.sdt-panel-heading h2{margin:0}
.sdt-panel-heading p{margin:.25rem 0 0;color:var(--color-muted)}
.sdt-fieldset{min-width:0;margin:0 0 1rem;padding:1rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-soft)}
.sdt-fieldset legend{padding:0 .35rem;color:var(--color-text);font-weight:800}
.sdt-value-unit{display:grid;grid-template-columns:minmax(0,1fr) minmax(7rem,.38fr);gap:.75rem;align-items:end}
.sdt-value-unit label,.sdt-time-inputs label{display:grid;min-width:0;gap:.4rem;font-weight:700}
.sdt-value-unit input,.sdt-value-unit select,.sdt-time-inputs input,.sdt-precision select{box-sizing:border-box;width:100%;min-width:0;min-height:46px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text);font:inherit}
.sdt-value-unit input,.sdt-time-inputs input{padding:.7rem .75rem}
.sdt-value-unit select,.sdt-precision select{padding:.7rem 2rem .7rem .7rem}
.sdt-time-inputs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}
.sdt-input-suffix{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface)}
.sdt-input-suffix input{border:0;border-radius:0}
.sdt-input-suffix>span{padding:0 .7rem;color:var(--color-muted);font-weight:700;white-space:nowrap}
.sdt-error{min-height:1.5em;margin:.5rem 0;color:var(--color-danger);font-weight:700}
.sdt-actions{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:.75rem}
.sdt-actions .button{width:100%}
.sdt-placeholder{display:grid;min-height:260px;margin:0;place-items:center;border:1px dashed var(--color-border);border-radius:var(--radius-md);color:var(--color-muted);text-align:center}
.sdt-results{display:grid;gap:1rem}
.sdt-primary-result{padding:1.35rem;border:1px solid var(--color-primary-light);border-radius:var(--radius-lg);background:linear-gradient(145deg,var(--color-surface-soft),var(--color-surface));text-align:center}
.sdt-primary-result h3{margin:0 0 .45rem;color:var(--color-muted);font-size:.95rem}
.sdt-primary-result output{display:block;overflow-wrap:anywhere;color:var(--color-primary);font-size:clamp(1.8rem,7vw,2.75rem);font-weight:800;line-height:1.15}
.sdt-result-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}
.sdt-result-grid article{min-width:0;padding:1rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-soft)}
.sdt-result-grid h3{margin:0 0 .4rem;color:var(--color-muted);font-size:.84rem}
.sdt-result-grid output{display:block;overflow-wrap:anywhere;font-size:1.08rem;font-weight:800}
.sdt-precision{display:grid;grid-template-columns:minmax(0,1fr) minmax(6.25rem,.3fr);align-items:center;gap:.75rem;font-weight:700}
.sdt-formula{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-soft)}
.sdt-formula summary{padding:.85rem 1rem;font-weight:800;cursor:pointer}
.sdt-formula p{margin:0;padding:0 1rem 1rem;overflow-wrap:anywhere;line-height:1.8}
.sdt-status{min-height:1.5em;margin:.6rem 0 0}
.sdt-guide{display:grid;gap:.85rem}
.sdt-guide>h2{margin:1rem 0 0}
.sdt-formula-grid,.sdt-unit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}
.sdt-formula-grid p,.sdt-unit-grid section{min-width:0;margin:0;padding:1rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-soft)}
.sdt-formula-grid strong,.sdt-formula-grid span{display:block;text-align:center}
.sdt-formula-grid strong{margin-bottom:.45rem;color:var(--color-primary)}
.sdt-formula-grid span{font-weight:800}
.sdt-unit-grid h3{margin:0 0 .4rem}
.sdt-unit-grid p{margin:0}
@media(min-width:900px){.sdt-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}.sdt-result-panel{position:sticky;top:5.5rem}}
@media(max-width:700px){.sdt-result-grid,.sdt-formula-grid,.sdt-unit-grid{grid-template-columns:1fr}.sdt-result-panel{position:static}}
@media(max-width:520px){.sdt-time-inputs{grid-template-columns:1fr}.sdt-value-unit{grid-template-columns:1fr}.sdt-precision{grid-template-columns:1fr}}
@media(max-width:420px){.container--sdt{width:min(100% - 1rem,70rem)}.sdt-top-modes{grid-template-columns:1fr}.sdt-top-modes legend{grid-column:auto}.sdt-mode-tabs{grid-template-columns:1fr}.sdt-input-panel,.sdt-result-panel{padding:.9rem}.sdt-panel-heading{align-items:stretch;flex-direction:column}.sdt-panel-heading .button{width:100%}.sdt-actions{grid-template-columns:1fr}.sdt-fieldset{padding:.8rem}.sdt-placeholder{min-height:180px}}