.section-preview {
  display: flex;

  flex-direction: row;
  column-gap: min(10px, calc(10 * 0.1667vh));

  border-radius: min(20px, calc(20 * 0.1667vh));

  padding: min(12px, calc(12 * 0.1667vh));
  background-color: rgba(100, 100, 100, 0.15);
}

.section-title {
  font-size: max(36px, calc(36vh/12));
  font-weight: 600;

  text-shadow: min(5px, calc(5 * 0.1667vh)) min(5px, calc(5 * 0.1667vh)) min(5px, calc(5 * 0.1667vh)) rgba(0, 0, 0, 0.2) !important;
  filter: drop-shadow(min(2px, calc(2 * 0.1667vh)) min(2px, calc(2 * 0.1667vh)) min(3px, calc(3 * 0.1667vh)) rgba(0, 0, 0, 0.8));
}

.section-subtitle {
  font-size: max(24px, calc(24vh/12));

  filter: drop-shadow(min(2px, calc(2 * 0.1667vh)) min(2px, calc(2 * 0.1667vh)) min(3px, calc(3 * 0.1667vh)) rgba(0, 0, 0, 0.8));
}

.subsection-layout {
  display: flex;
  flex-direction: column;
  row-gap: min(10px, calc(10 * 0.1667vh));

  padding-left: min(12px, calc(12 * 0.1667vh));
  border-radius: min(20px, calc(20 * 0.1667vh));
}

.subsection-divider {
  padding-left: min(6px, calc(6 * 0.1667vh));

  font-size: max(24px, calc(24vh/12))
}

/* Calculator page: make section titles and dividers more prominent */
body.calculator-page .section-title {
  font-size: max(32px, calc(32vh/12));
  font-weight: 650;
}

body.calculator-page .subsection-divider {
  display: inline-flex;
  align-items: center;
  padding: min(3px, calc(3 * 0.1667vh)) min(10px, calc(10 * 0.1667vh));
  margin-bottom: min(6px, calc(6 * 0.1667vh));

  border-radius: 999px;
  background-color: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.6);
}

.subsection {
  display: flex;

  flex-direction: column;
  row-gap: max(12px, calc(12vh/12));

  padding: max(12px, calc(12vh/12));

  border-radius: min(20px, calc(20 * 0.1667vh));

  background-color: rgba(0, 0, 0, 0.3);
}

.tab-structure {
  display: flex;

  width: 100%;

  flex-direction: row;
  column-gap: max(6px, calc(6vh/12));

  align-items: center;
  justify-content: space-between;
}

.align-left {
  flex-wrap: wrap;

  row-gap: min(6px, calc(6 * 0.1667vh));

  justify-content: flex-start !important;
}

.align-right {
  flex-wrap: wrap;

  row-gap: min(6px, calc(6 * 0.1667vh));

  justify-content: flex-end !important;
}

.dropdown-button {
  font-size: max(20px, calc(20vh/12)) !important;

  cursor: pointer;
}

.passive-layout {
  display: flex;

  flex-direction: column;
  row-gap: min(18px, calc(18 * 0.1667vh));

  padding: min(12px, calc(12 * 0.1667vh));

  border-radius: min(16px, calc(16 * 0.1667vh));

  background-color: rgba(0, 0, 0, 0.3);

  transition: 0.3s;
}

.passive-top {
  display: flex;

  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  column-gap: min(12px, calc(12 * 0.1667vh));
  
  border-radius: min(12px, calc(12 * 0.1667vh));
}

.passive-name {
  font-size: max(28px, calc(28vh/12))
}

.passive-bottom {
  display: flex;

  flex-wrap: wrap-reverse;

  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;

  gap: min(8px, calc(8 * 0.1667vh));
  
  border-radius: min(12px, calc(12 * 0.1667vh));

  transition: 0.3s;
}

.passive-number-padding {
  padding-left: max(16px, calc(16vh/12));
  padding-right: max(16px, calc(16vh/12));
}

.passive-condition {
  flex: 1;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;

  font-size: max(18px, calc(18vh/12)) !important;
  border-radius: 20px;
}

.passive-condition-group {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: min(8px, calc(8 * 0.1667vh));
  flex-wrap: nowrap;
  flex: 1 1 min(200px, calc(200 * 0.1667vh));
  min-width: min(150px, calc(150 * 0.1667vh));

  transition: 0.3s;
}

.passive-condition-group .slider {
  flex: 1 1 auto;
  min-width: min(60px, calc(60 * 0.1667vh));
}

.passive-condition-group .slider-value {
  flex: 0 0 min(80px, calc(80 * 0.1667vh));
  width: min(80px, calc(80 * 0.1667vh));
  text-align: center;
}

.faded-passive {
  filter: opacity(0.8) brightness(0.5);
}