@layer components{.calculator{display:grid;gap:var(--space-m);grid-template-columns:minmax(0,1fr);grid-template-areas:"form" "result" "details";color:var(--color-text);@media(max-width:55.99rem){display: flex; flex-direction: column;}@media(min-width:56rem){grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); grid-template-areas: "form result" "details details"; align-items: start;}& .calculator__form{grid-area:form;min-width:0;--stack-space:var(--space-s);padding:var(--space-s);background:var(--color-surface-mixed);border:1px solid var(--color-border);border-radius:var(--radius-m)}& fieldset{border:0;margin:0;padding:0;min-width:0}& .calculator__places{display:grid;gap:var(--space-2xs)}& .calculator__label{display:inline-flex;align-items:center;gap:var(--space-3xs);font-weight:600;margin-block-end:var(--space-3xs);& svg{width:1.1em;height:1.1em}}& .calculator__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2xs)var(--space-s)}& .calculator__field{display:grid;gap:var(--space-3xs)}& input[type=date], & input[type=number]{font:inherit;color:inherit;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-s);padding:var(--space-3xs)var(--space-2xs);min-height:2.5rem}& .calculator__check{display:inline-flex;align-items:center;gap:var(--space-2xs);cursor:pointer;& input{width:1.15rem;height:1.15rem;accent-color:var(--color-accent-strong)}}& .calculator__chips{display:flex;flex-wrap:wrap;gap:var(--space-3xs);margin-block-end:var(--space-2xs)}& .calculator__chip{display:inline-flex;align-items:baseline;gap:var(--space-3xs);font:inherit;font-size:var(--size-step--1);color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-pill);padding:var(--space-3xs)var(--space-xs);cursor:pointer;& input{position:absolute;opacity:0;pointer-events:none}& small{color:var(--color-text-muted)}&:has(input:checked), &[data-active]{background:var(--color-accent-strong);border-color:var(--color-accent-strong);color:var(--color-on-accent);& small{color:inherit}}&:has(input:focus-visible){outline:2px solid var(--color-accent-strong);outline-offset:2px}}& .calculator__add-stop{justify-self:start;display:inline-flex;align-items:center;gap:var(--space-3xs);font:inherit;font-size:var(--size-step--1);color:var(--color-accent-strong);background:0 0;border:0;padding:0 0 0 2rem;cursor:pointer}& .calculator__icon-button{display:inline-grid;place-items:center;width:2.5rem;height:2.5rem;flex:none;font:inherit;color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-s);cursor:pointer;&:disabled{opacity:.4;cursor:default}& svg{width:1.1rem;height:1.1rem}}& .calculator__stepper{display:inline-flex;gap:var(--space-3xs);& input{width:3.5rem;text-align:center}}& .calculator__error{margin:0;color:var(--color-price-up);font-size:var(--size-step--1)}& .calculator__result{grid-area:result;display:grid;gap:var(--space-s);transition:opacity .2s ease;@media(max-width:55.99rem){display: contents; &>.result{position:sticky;bottom:0;z-index:10}}}& .calculator__result--loading{opacity:.6}& .calculator__notice{margin:0;padding:var(--space-s);border:1px dashed var(--color-border);border-radius:var(--radius-m);color:var(--color-text-muted);&[data-variant=problem]{border-style:solid;border-color:var(--color-price-up);color:var(--color-text)}}& .calculator__details{grid-area:details;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-m);@media(min-width:56rem){grid-template-columns: repeat(2,minmax(0,1fr)); &>:first-child{grid-column:1/-1}}}}}@layer components{@media(prefers-color-scheme:dark){.calculator{& .calculator__form{background:var(--color-surface-mixed);border-color:var(--color-border)}& input[type=date]{color-scheme:dark}}}}