/* Variables are now imported from calc-variables.css */

#calcoutput-main {
  background-color: var(--frame-background);
  width: 100%;
  font-weight: var(--calc-output-weight-body);
  font-family: var(--calc-font-primary);
  user-select: none;
}

.calcoutput__main-container {
  display: flex;
  position: relative;
  row-gap: var(--calc-output-space-section-gap);
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  container-name: calcoutput;
  container-type: inline-size;
  margin: 0 auto;
  padding: var(--calc-output-space-input-padding);
  max-width: 81.25rem; /* 1300px */
  color: var(--calc-color-text-primary);
  line-height: var(--calc-output-line-body);
  font-family: var(--calc-font-primary);
}

@media (min-width: 768px) {
  .calcoutput__main-container {
    gap: var(--calc-output-space-layout-gap-large);
  }
}

.calcoutput__card-wrapper {
  flex: 0 1 25rem; /* 400px */
  transition: var(--calc-output-transition-ui);
  max-width: 1100px;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .calcoutput__card-wrapper:hover {
    transform: scale(1.05);
  }

  .calcoutput__card-wrapper[data-card-state='visible']:hover {
    transform: translateY(0) scale(1.05);
  }

  .calcoutput__card-wrapper[data-card-state='error']:hover {
    transform: translateY(0) scale(1.05);
  }

  .calcoutput__card-wrapper[data-card-state='loading']:hover {
    transform: translateY(0) scale(1.05);
  }
}

.calcoutput__recommendation {
  visibility: visible;
  margin: 0 auto;
  box-shadow: var(--calc-output-shadow-card);
  border-radius: var(--calc-radius-none);
  background-color: var(--calc-brand-accent);
  padding: var(--calc-output-space-card-padding) var(--calc-output-space-recommendation-padding-x);
  width: 90%;
  height: var(--calc-output-space-recommendation-height);
  line-height: var(--calc-output-line-badge);
  font-family: var(--calc-font-primary);
  text-align: center;
}

.calcoutput__recommendation-text {
  margin: 0;
  color: var(--calc-color-text-on-brand);
  font-size: var(--calc-output-text-body-large);
}

.calcoutput__recommendation--invisible {
  visibility: hidden;
}

@media (min-width: 768px) {
  .calcoutput__recommendation-text {
    font-size: var(--calc-output-text-button);
  }

  .calcoutput__recommendation--invisible {
    display: block;
  }
}

.calcoutput__card {
  display: flex;
  position: relative;
  flex-direction: column;
  gap: var(--calc-output-space-card-padding);
  box-shadow: var(--calc-output-shadow-card);
  border-radius: var(--calc-output-radius-card);
  background-color: var(--calc-surface-card);
  padding: var(--calc-output-space-card-padding-large) var(--calc-output-space-card-padding);
  font-family: var(--calc-font-primary);
}

@media (min-width: 768px) {
  .calcoutput__card {
    padding: var(--calc-output-space-card-padding-large) var(--calc-output-space-card-padding);
  }
}

/* Card States for Tariff Retrieval */
.calcoutput__main-container {
  transition: height 0.4s ease-out;
  overflow: hidden;
}

.calcoutput__main-container:has(.calcoutput__card-wrapper[data-card-state='initial']) {
  height: 1px;
}

.calcoutput__card-wrapper {
  transform: translateY(0);
  transition:
    opacity 0.3s ease-in-out,
    transform 0.3s ease-in-out;
}

.calcoutput__card-wrapper[data-card-state='initial'] {
  transform: translateY(-10px);
  opacity: 0;
  pointer-events: none;
}

.calcoutput__card-wrapper[data-card-state='loading'] {
  transform: translateY(0);
  opacity: 0.6;
  pointer-events: none;
}

.calcoutput__card-wrapper[data-card-state='visible'] {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Error state cards - debug mode enabled (show with reduced opacity) */
[data-debug-mode='1'] .calcoutput__card-wrapper[data-card-state='error'] {
  transform: translateY(0);
  opacity: 0.3;
  pointer-events: auto;
}

/* Error state cards - debug mode disabled (hide completely) */
[data-debug-mode='0'] .calcoutput__card-wrapper[data-card-state='error'],
[data-debug-mode='false'] .calcoutput__card-wrapper[data-card-state='error'] {
  display: none;
}

/* Default fallback for when data-debug-mode is not set (backward compatibility) */
.calcoutput__card-wrapper[data-card-state='error'] {
  transform: translateY(0);
  opacity: 0.3;
  pointer-events: auto;
}

.calcoutput__card-wrapper[data-card-state='error'] .calcoutput__card {
  border-left: 4px solid var(--calc-color-error, #e74c3c);
}

/* Loading Overlay */
.calcoutput__loading-overlay {
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  z-index: 10;
  inset: 0;
  border-radius: var(--calc-output-radius-card);
  background-color: rgb(255 255 255 / 90%);
}

.calcoutput__loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.calcoutput__loading-text {
  color: var(--calc-color-text-secondary);
  font-weight: var(--calc-output-weight-body);
  font-size: var(--calc-output-text-body);
}

/* Loading Spinner */
.calcoutput__spinner {
  animation: calcoutput-spin 1s linear infinite;
  border: 3px solid #f3f3f3;
  border-top: 3px solid var(--calc-brand-primary, #007bff);
  border-radius: 50%;
  width: 30px;
  height: 30px;
}

@keyframes calcoutput-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Error Messages */
.calcoutput__error-message {
  display: none;
  border: 1px solid var(--calc-color-error-border, #fecaca);
  border-radius: var(--calc-radius-small, 4px);
  background-color: var(--calc-color-error-background, #fdf2f2);
  padding: var(--calc-output-space-card-padding);
  color: var(--calc-color-error, #e74c3c);
  font-weight: var(--calc-output-weight-body);
  font-size: var(--calc-output-text-body-small);
  text-align: center;
}

.calcoutput__card[data-card-state='error'] .calcoutput__error-message {
  display: block;
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
  .calcoutput__spinner {
    animation: none;
    border-top-color: var(--calc-brand-primary, #007bff);
  }

  .calcoutput__card-wrapper:hover {
    transform: none;
  }
}

.calcoutput__header {
  font-family: var(--calc-font-primary);
}

.calcoutput__product-name {
  margin: 0;
  color: var(--calc-color-text-primary);
  font-weight: var(--calc-output-weight-heading);
  font-size: var(--calc-output-text-heading);
  line-height: var(--calc-output-line-heading);
  font-family: var(--calc-font-primary);
  text-align: left;
}

@media (min-width: 768px) {
  .calcoutput__product-name {
    font-size: var(--calc-output-text-heading);
  }
}

.calcoutput__price-section {
  display: flex;
  flex-direction: column;
  gap: var(--calc-output-space-element-gap);
  text-align: left;
}

.calcoutput__main-price {
  color: var(--calc-color-text-primary);
  font-weight: var(--calc-output-weight-price);
  font-size: var(--calc-output-text-price);
  line-height: var(--calc-output-line-price);
}

@media (min-width: 768px) {
  .calcoutput__main-price {
    font-size: var(--calc-output-text-price);
  }
}

.calcoutput__price-description {
  color: var(--calc-color-text-secondary);
  font-weight: var(--calc-output-weight-body);
  font-size: var(--calc-output-text-body);
}

@media (min-width: 768px) {
  .calcoutput__price-description {
    font-size: var(--calc-output-text-body-large);
  }
}

.calcoutput__details {
  display: flex;
  flex-direction: column;
  gap: var(--calc-output-space-detail-gap);
}

.calcoutput__detail-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.calcoutput__detail-label {
  gap: var(--calc-output-space-button-padding-y);
  color: var(--calc-color-text-primary);
  font-weight: var(--calc-output-weight-heading);
  font-size: var(--calc-output-text-body);
}

.calcoutput__detail-value {
  color: var(--calc-color-text-primary);
  font-weight: var(--calc-output-weight-body);
  font-size: var(--calc-output-text-body);
  text-align: right;
}

@media (min-width: 768px) {
  .calcoutput__detail-label,
  .calcoutput__detail-value {
    font-size: var(--calc-output-text-body-large);
  }
}

/* Rechnung Field Styles (currently same as base, but allows future customization) */
.calcoutput__detail-row--rechnung {
  /* Inherits from .calcoutput__detail-row */
}

.calcoutput__detail-label--rechnung {
  /* Inherits from .calcoutput__detail-label */
}

.calcoutput__detail-value--rechnung {
  /* Inherits from .calcoutput__detail-value */
}

.calcoutput__cta-section {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--calc-output-space-element-gap);
  text-align: center;
}

.calcoutput__order-button {
  transition: var(--calc-output-transition-ui);
  cursor: pointer;
  border: none;
  border-radius: var(--calc-output-radius-button);
  background-color: var(--calc-brand-primary);
  padding: var(--calc-output-space-button-padding-y) 2.5rem; /* 40px */
  width: 100%;
  color: var(--calc-color-text-on-brand);
  font-weight: var(--calc-output-weight-button);
  font-size: var(--calc-output-text-body-large);
  line-height: var(--calc-output-line-button);
  font-family: inherit;
  text-decoration: none;
}

.calcoutput__order-button:hover {
  background-color: var(--calc-brand-primary-hover);
  color: var(--calc-color-text-on-brand-hover);
}

.calcoutput__order-button:active {
  transform: translateY(0);
}

@media (min-width: 768px) {
  .calcoutput__order-button {
    padding: var(--calc-output-space-button-padding-y) 3.125rem; /* 50px */
    font-size: var(--calc-output-text-button);
  }
}

.calcoutput__disclaimer,
.calcoutput__bonus-disclaimer,
.calcoutput__rounding-disclaimer {
  color: var(--calc-color-text-tertiary);
  font-style: italic;
  font-size: var(--calc-output-text-disclaimer);
  line-height: var(--calc-output-line-disclaimer);
  text-align: center;
}

@media (min-width: 768px) {
  .calcoutput__disclaimer,
  .calcoutput__bonus-disclaimer {
    font-size: var(--calc-output-text-disclaimer);
  }
}

/* Grundversorger Comparison Styles */
.calcoutput__grundversorger-comparison {
  margin-top: var(--calc-output-space-element-gap);
  border-left: 3px solid var(--calc-brand-accent, #90c846);
  border-radius: var(--calc-output-radius-small, 4px);
  background-color: var(--calc-color-background-highlight, rgb(144 200 70 / 10%));
  padding: var(--calc-output-space-detail-gap);
}

.calcoutput__grundversorger-text {
  display: block;
  color: var(--calc-color-text-primary);
  font-weight: var(--calc-output-weight-body);
  font-size: var(--calc-output-text-comparison);
  line-height: var(--calc-output-line-body);
  text-align: center;
}

.calcoutput__grundversorger-amount {
  color: var(--calc-color-text-secondary, #666666);
  font-weight: var(--calc-output-weight-price);
  font-size: var(--calc-output-text-comparison);
}

.calcoutput__grundversorger-tariff {
  color: var(--calc-color-text-secondary);
  font-weight: var(--calc-output-weight-heading);
  font-size: var(--calc-output-text-comparison);
}

@media (min-width: 768px) {
  .calcoutput__grundversorger-text,
  .calcoutput__grundversorger-amount,
  .calcoutput__grundversorger-tariff {
    font-size: var(--calc-output-text-comparison);
  }
}

.calcoutput__more-info > details {
  display: flex;
  flex-direction: column;
}

.calcoutput__more-info > details[open] {
  gap: var(--calc-output-space-card-padding);
}

[id^='calcoutput-details-'] {
  margin: 0;
  border: none;
  padding: 0;
}

[id^='calcoutput-details-'] summary {
  list-style: none;
}

[id^='calcoutput-details-'] summary::-webkit-details-marker {
  display: none;
}

.calcoutput__more-info-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: var(--calc-output-transition-color);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  color: var(--calc-color-text-secondary);
  font-weight: var(--calc-output-weight-heading);
  font-size: var(--calc-output-text-body);
  font-family: inherit;
}

.calcoutput__more-info-toggle:hover {
  color: var(--calc-color-text-primary);
}

@media (min-width: 768px) {
  .calcoutput__more-info-toggle {
    font-size: var(--calc-output-text-body);
  }
}

.calcoutput__more-info-text {
  flex: 1;
  text-align: left;
}

/* Toggle text visibility based on details state */
.calcoutput__more-info-text--closed {
  display: inline;
}

.calcoutput__more-info-text--open {
  display: none;
}

/* When details is open, flip the visibility */
.calcoutput__more-info > details[open] .calcoutput__more-info-text--closed {
  display: none;
}

.calcoutput__more-info > details[open] .calcoutput__more-info-text--open {
  display: inline;
}

.calcoutput__more-info-icon {
  display: flex;
  align-items: center;
  margin-left: var(--calc-output-space-icon-margin);
}

.calcoutput__chevron {
  transition: var(--calc-output-transition-hover);
  width: var(--calc-output-size-icon);
  height: var(--calc-output-size-icon);
}

#calcoutput-details[open] .calcoutput__chevron {
  transform: rotate(180deg);
}

.calcoutput__more-info-content {
  display: flex;
  flex-direction: column;
  gap: var(--calc-output-space-card-padding);
}

.calcoutput__contract-details {
  display: flex;
  flex-direction: column;
  gap: var(--calc-output-space-detail-gap);
}

.calcoutput__tariff-properties p {
  margin: 0;
  line-height: var(--calc-output-line-properties);
}

.calcoutput__tariff-properties ul {
  padding-left: 0.875rem; /* 14px */
}

.calcoutput__tariff-properties img {
  margin-top: 1rem;
  border-radius: 1.5rem;
  width: 100%;
  object-fit: cover;
}

.calcoutput__downloads-title {
  display: flex;
  flex-direction: column;
  gap: var(--calc-output-space-detail-gap);
  margin: 0;
  color: var(--calc-color-text-primary);
  font-weight: var(--calc-output-weight-heading);
  font-size: var(--calc-output-text-body);
  font-family: var(--calc-font-primary);
}

@media (min-width: 768px) {
  .calcoutput__downloads-title {
    font-size: var(--calc-output-text-body-large);
  }
}

.calcoutput__download-list {
  display: flex;
  flex-direction: column;
  gap: var(--calc-output-space-element-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.calcoutput__download-item {
  line-height: var(--calc-output-line-downloads);
}

.calcoutput__download-link {
  transition: var(--calc-output-transition-color);
  color: var(--calc-brand-primary);
  font-size: var(--calc-output-text-body);
  text-decoration: underline;
}

.calcoutput__download-link:hover {
  color: var(--calc-brand-primary-hover);
  text-decoration: none;
}

.calcoutput__download-link:focus {
  outline: 2px solid var(--calc-brand-primary);
  outline-offset: 2px;
}

@media (min-width: 768px) {
  .calcoutput__download-link {
    font-size: var(--calc-output-text-body-large);
  }
}

/* Separator */
.calcoutput__seperator {
  opacity: 0.2;
  border: none;
  background-color: var(--calc-color-text-secondary);
  height: 1px;
}

/* Gridview für Tablet */
@container calcoutput (min-width: 768px) and (max-width: 968px) {
  .calcoutput__card-wrapper {
    flex: 0 1 100%;
  }

  .calcoutput__card {
    display: grid;
    grid: 'header price' 'seperator1 seperator1' 'details button' 'grundversorger grundversorger' 'seperator2 seperator2' 'info info' / 1fr 1fr;
    column-gap: 4rem;
  }

  header.calcoutput__header {
    grid-area: header;
  }

  .calcoutput__price-section {
    grid-area: price;
    text-align: center;
  }

  .calcoutput__grundversorger-comparison {
    grid-area: grundversorger;
  }

  .calcoutput__details {
    grid-area: details;
  }

  .calcoutput__cta-section {
    grid-area: button;
  }

  .calcoutput__more-info {
    grid-area: info;
  }

  .calcoutput__card > .calcoutput__seperator--1 {
    grid-area: seperator1;
  }

  .calcoutput__card > .calcoutput__seperator--2 {
    /* grid-area: seperator2; */
    display: none;
  }

  .calcoutput__seperator.calcoutput__seperator--3 {
    grid-area: seperator2;
  }

  .calcoutput__more-info-content {
    display: grid;
    grid: 'seperator4 seperator4' 'details downloads' 'seperator5 seperator5' 1px 'properties properties' / 1fr 1fr;
    column-gap: 4rem;
  }

  .calcoutput__contract-details {
    grid-area: details;
  }

  .calcoutput__tariff-properties {
    grid-area: properties;
  }

  .calcoutput__downloads {
    grid-area: downloads;
  }

  .calcoutput__seperator.calcoutput__seperator--4 {
    grid-area: seperator4;
  }

  .calcoutput__seperator.calcoutput__seperator--6 {
    display: none;
  }

  .calcoutput__seperator.calcoutput__seperator--5 {
    grid-area: seperator5;
  }

  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .calcoutput__card-wrapper[data-card-state='visible']:hover {
      transform: unset;
    }
  }
}

/* Gridview for single visible card (tablet and desktop) */
@container calcoutput (min-width: 768px) {
  .calcoutput__main-container:not(
      :has(.calcoutput__card-wrapper[data-card-state='visible'] ~ .calcoutput__card-wrapper[data-card-state='visible'])
    )
    .calcoutput__card-wrapper[data-card-state='visible'] {
    flex: 0 1 100%;
  }

  .calcoutput__main-container:not(
      :has(.calcoutput__card-wrapper[data-card-state='visible'] ~ .calcoutput__card-wrapper[data-card-state='visible'])
    )
    .calcoutput__card-wrapper[data-card-state='visible']
    .calcoutput__card {
    display: grid;
    grid: 'header price' 'seperator1 seperator1' 'details button' 'grundversorger grundversorger' 'seperator2 seperator2' 'info info' / 1fr 1fr;
    column-gap: 4rem;
  }

  .calcoutput__main-container:not(
      :has(.calcoutput__card-wrapper[data-card-state='visible'] ~ .calcoutput__card-wrapper[data-card-state='visible'])
    )
    .calcoutput__card-wrapper[data-card-state='visible']
    header.calcoutput__header {
    grid-area: header;
  }

  .calcoutput__main-container:not(
      :has(.calcoutput__card-wrapper[data-card-state='visible'] ~ .calcoutput__card-wrapper[data-card-state='visible'])
    )
    .calcoutput__card-wrapper[data-card-state='visible']
    .calcoutput__price-section {
    grid-area: price;
    text-align: center;
  }

  .calcoutput__main-container:not(
      :has(.calcoutput__card-wrapper[data-card-state='visible'] ~ .calcoutput__card-wrapper[data-card-state='visible'])
    )
    .calcoutput__card-wrapper[data-card-state='visible']
    .calcoutput__grundversorger-comparison {
    grid-area: grundversorger;
  }

  .calcoutput__main-container:not(
      :has(.calcoutput__card-wrapper[data-card-state='visible'] ~ .calcoutput__card-wrapper[data-card-state='visible'])
    )
    .calcoutput__card-wrapper[data-card-state='visible']
    .calcoutput__details {
    grid-area: details;
  }

  .calcoutput__main-container:not(
      :has(.calcoutput__card-wrapper[data-card-state='visible'] ~ .calcoutput__card-wrapper[data-card-state='visible'])
    )
    .calcoutput__card-wrapper[data-card-state='visible']
    .calcoutput__cta-section {
    grid-area: button;
  }

  .calcoutput__main-container:not(
      :has(.calcoutput__card-wrapper[data-card-state='visible'] ~ .calcoutput__card-wrapper[data-card-state='visible'])
    )
    .calcoutput__card-wrapper[data-card-state='visible']
    .calcoutput__more-info {
    grid-area: info;
  }

  .calcoutput__main-container:not(
      :has(.calcoutput__card-wrapper[data-card-state='visible'] ~ .calcoutput__card-wrapper[data-card-state='visible'])
    )
    .calcoutput__card-wrapper[data-card-state='visible']
    .calcoutput__card
    > .calcoutput__seperator--1 {
    grid-area: seperator1;
  }

  .calcoutput__main-container:not(
      :has(.calcoutput__card-wrapper[data-card-state='visible'] ~ .calcoutput__card-wrapper[data-card-state='visible'])
    )
    .calcoutput__card-wrapper[data-card-state='visible']
    .calcoutput__card
    > .calcoutput__seperator--2 {
    display: none;
  }

  .calcoutput__main-container:not(
      :has(.calcoutput__card-wrapper[data-card-state='visible'] ~ .calcoutput__card-wrapper[data-card-state='visible'])
    )
    .calcoutput__card-wrapper[data-card-state='visible']
    .calcoutput__seperator.calcoutput__seperator--3 {
    grid-area: seperator2;
  }

  .calcoutput__main-container:not(
      :has(.calcoutput__card-wrapper[data-card-state='visible'] ~ .calcoutput__card-wrapper[data-card-state='visible'])
    )
    .calcoutput__card-wrapper[data-card-state='visible']
    .calcoutput__more-info-content {
    display: grid;
    grid: 'seperator4 seperator4' 'details downloads' 'seperator5 seperator5' 1px 'properties properties' / 1fr 1fr;
    column-gap: 4rem;
  }

  .calcoutput__main-container:not(
      :has(.calcoutput__card-wrapper[data-card-state='visible'] ~ .calcoutput__card-wrapper[data-card-state='visible'])
    )
    .calcoutput__card-wrapper[data-card-state='visible']
    .calcoutput__contract-details {
    grid-area: details;
  }

  .calcoutput__main-container:not(
      :has(.calcoutput__card-wrapper[data-card-state='visible'] ~ .calcoutput__card-wrapper[data-card-state='visible'])
    )
    .calcoutput__card-wrapper[data-card-state='visible']
    .calcoutput__tariff-properties {
    grid-area: properties;
  }

  .calcoutput__main-container:not(
      :has(.calcoutput__card-wrapper[data-card-state='visible'] ~ .calcoutput__card-wrapper[data-card-state='visible'])
    )
    .calcoutput__card-wrapper[data-card-state='visible']
    .calcoutput__downloads {
    grid-area: downloads;
  }

  .calcoutput__main-container:not(
      :has(.calcoutput__card-wrapper[data-card-state='visible'] ~ .calcoutput__card-wrapper[data-card-state='visible'])
    )
    .calcoutput__card-wrapper[data-card-state='visible']
    .calcoutput__seperator.calcoutput__seperator--4 {
    grid-area: seperator4;
  }

  .calcoutput__main-container:not(
      :has(.calcoutput__card-wrapper[data-card-state='visible'] ~ .calcoutput__card-wrapper[data-card-state='visible'])
    )
    .calcoutput__card-wrapper[data-card-state='visible']
    .calcoutput__seperator.calcoutput__seperator--6 {
    display: none;
  }

  .calcoutput__main-container:not(
      :has(.calcoutput__card-wrapper[data-card-state='visible'] ~ .calcoutput__card-wrapper[data-card-state='visible'])
    )
    .calcoutput__card-wrapper[data-card-state='visible']
    .calcoutput__seperator.calcoutput__seperator--5 {
    grid-area: seperator5;
  }

  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .calcoutput__main-container:not(
        :has(
          .calcoutput__card-wrapper[data-card-state='visible'] ~ .calcoutput__card-wrapper[data-card-state='visible']
        )
      )
      .calcoutput__card-wrapper[data-card-state='visible']:hover {
      transform: unset;
    }
  }
}

/* Utility classes */
.calcoutput__hidden {
  display: none;
}

/* Animation classes */
.calcoutput__fade-in {
  animation: calcoutput-fade-in 0.5s ease-in-out;
}

@keyframes calcoutput-fade-in {
  from {
    transform: translateY(20px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Focus states for accessibility */
.calcoutput__order-button:focus,
.calcoutput__more-info-toggle:focus {
  outline: none;
  outline-offset: 2px;
}

#calcoutput-details summary:focus {
  outline: 2px solid var(--calc-brand-primary);
  outline-offset: 2px;
}