/* Site components. Loaded on the pages that use them. The landing loads this for the example-product note. */

.cf__row{display:grid;gap:var(--space-8);margin:0}
.cf__field{display:block;width:100%;padding:var(--space-16);border:var(--stroke) solid currentColor;border-radius:var(--radius-card);background:none;color:inherit;font:var(--role-text-body);line-height:var(--space-32);resize:vertical}
.cf__field:focus-visible{outline:var(--space-2) solid var(--focus-ring);outline-offset:var(--space-4)}

.quote{margin:0;max-width:var(--measure-text);padding:0 0 0 var(--space-16);border-left:var(--stroke) solid currentColor}
.quote .m-text{margin:0}
.quote .m-meta{margin-top:var(--space-8)}

.stat{margin:0}
.stat__n{display:block;font:var(--role-number-stat)}
.stat__l{display:block;margin-top:var(--space-8);font:var(--role-label-meta);text-transform:var(--role-label-case)}

.accordion{border-top:var(--hairline) solid currentColor}
.accordion__item{border-bottom:var(--hairline) solid currentColor}
.accordion summary{padding:var(--space-16) 0;cursor:pointer;font:var(--role-text-body)}
.accordion summary:focus-visible{outline:var(--space-2) solid var(--focus-ring);outline-offset:var(--space-4)}
.accordion .m-text{margin:0 0 var(--space-16)}

.tabs__list{display:flex;gap:var(--space-16)}
.tabs__tab{padding:var(--space-8) 0;border:0;border-bottom:var(--stroke-text) solid transparent;background:none;color:inherit;cursor:pointer;font:var(--role-label-meta);text-transform:var(--role-label-case)}
.tabs__tab[aria-selected="true"]{border-bottom-color:currentColor}
.tabs__tab:focus-visible{outline:var(--space-2) solid var(--focus-ring);outline-offset:var(--space-4)}
.tabs__panel{margin-top:var(--space-16)}

.modal{
  border:var(--stroke) solid currentColor;border-radius:var(--radius-card);
  background:var(--surface-page);color:var(--text-primary);
  padding:var(--space-32);max-width:var(--measure-text);
}
.modal::backdrop{background:var(--gaia-erebos)}
.modal--box{
  position:fixed;inset:var(--prod-h) var(--edge) var(--edge);margin:auto;height:fit-content;z-index:90;
  padding:var(--space-16);max-width:var(--measure-card);
  border-radius:var(--radius-card);border-color:var(--gaia-erebos);background:var(--gaia-erebos);color:var(--ink-on-gaia-erebos);
  font:var(--role-label-caption);
}
.modal--box:not([open]){display:none}
.modal--box .m-title,.modal--box .m-text,.modal--box .modal__open{font:inherit;text-transform:none;margin:0}
.modal--box .modal__open{padding:var(--space-4) var(--space-8)}
.modal__open{
  padding:var(--space-8) var(--space-16);border:var(--stroke) solid currentColor;border-radius:var(--radius-pill);
  background:none;color:inherit;cursor:pointer;font:var(--role-label-meta);text-transform:var(--role-label-case);
  transition:background-color var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard);
}
.modal__open:focus-visible{outline:var(--space-2) solid var(--focus-ring);outline-offset:var(--space-4)}
.modal--box .modal__open:hover,.modal--box .modal__open:focus-visible{background:var(--gaia-selene);color:var(--ink-on-gaia-selene);border-color:var(--gaia-selene);outline:0}
@media (prefers-reduced-motion:reduce){.modal__open{transition:none}}
.modal .m-text{margin:var(--space-16) 0}

.parts{display:grid;gap:var(--space-32);margin-top:var(--space-32)}
.parts>*{margin:0}