.calc-layout {
  grid-template-columns: minmax(0, 1fr);
}

.calc-layout .article {
  padding: clamp(20px, 2.4vw, 30px);
}

.calc-article-head {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.calc-workspace {
  margin-top: 20px;
}

.calc-catalog {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
  border: 1px solid rgba(72, 55, 38, .16);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(245, 235, 216, .38)),
    url("/img/rheader-bg.jpg");
  background-size: cover;
  background-position: top right;
}

.catalog-searchbar {
  grid-column: 1 / -1;
  padding: 14px 16px;
  border: 1px solid rgba(72, 55, 38, .16);
  border-radius: 10px;
  background: rgba(255, 250, 240, .62);
}

.catalog-searchbar .calc-control {
  max-width: none;
}

.catalog-searchbar .calc-control input {
  height: 52px;
  font-size: 17px;
}

.catalog-sidebar {
  padding: 15px;
  border: 1px solid rgba(72, 55, 38, .18);
  border-radius: 10px;
  background: rgba(255, 250, 240, .72);
}

.catalog-reset {
  width: 100%;
  min-height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(140, 101, 58, .42);
  border-radius: 999px;
  color: #6c4216;
  background: rgba(255, 250, 240, .78);
  font: 800 13px/1 Arial, sans-serif;
  text-decoration: none;
  cursor: pointer;
}

.catalog-nav {
  display: grid;
  gap: 4px;
  margin-top: 14px;
}

.catalog-nav a {
  min-height: 34px;
  display: flex;
  align-items: center;
  border: 0;
  border-radius: 7px;
  color: #332418;
  background: transparent;
  font: 800 14px/1 Arial, sans-serif;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
}

.catalog-nav a:hover {
  color: #5f4128;
  background: rgba(255, 255, 255, .48);
}

.catalog-nav a.is-active {
  color: #fff5df;
  background: linear-gradient(180deg, rgba(96, 65, 40, .95), rgba(67, 45, 28, .95));
  padding-left: 12px;
}

.catalog-main {
  min-width: 0;
  padding: 15px;
  border: 1px solid rgba(72, 55, 38, .18);
  border-radius: 10px;
  background: rgba(255, 250, 240, .62);
}

.catalog-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: end;
}

.calc-control {
  display: grid;
  gap: 8px;
}

.calc-control label,
.calc-amount span {
  color: var(--muted);
  font: 700 11px/1 Arial, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.calc-control input,
.calc-amount input,
.calc-table input {
  width: 100%;
  border: 1px solid rgba(72, 55, 38, .2);
  border-radius: 8px;
  color: #241a12;
  background: rgba(255, 255, 255, .86);
  font: 700 14px/1.2 Arial, sans-serif;
  outline: none;
}

.calc-control input {
  height: 46px;
  padding: 0 14px;
  font-size: 15px;
}

.calc-control input:focus,
.calc-amount input:focus,
.calc-table input:focus {
  border-color: rgba(95, 65, 40, .55);
  box-shadow: 0 0 0 3px rgba(140, 101, 58, .14);
}

.calc-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.calc-filter-row button,
.calc-filter-row a,
.calc-actions button {
  min-height: 34px;
  border: 1px solid rgba(72, 55, 38, .18);
  border-radius: 8px;
  color: #3a2716;
  background: rgba(255, 255, 255, .62);
  font: 700 12px/1 Arial, sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: transform 140ms var(--ease), background-color 140ms var(--ease), color 140ms var(--ease);
}

.calc-filter-row button,
.calc-filter-row a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0 10px;
}

.catalog-filter-group {
  display: grid;
  gap: 8px;
}

.catalog-filter-group > span {
  color: var(--muted);
  font: 700 11px/1 Arial, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.calc-filter-row button:active,
.calc-filter-row a:active,
.calc-actions button:active,
.recipe-button:active {
  transform: scale(.98);
}

.calc-filter-row button.is-active,
.calc-filter-row a.is-active,
.calc-actions button:hover,
.recipe-button.is-active {
  color: #fff5df;
  background: linear-gradient(180deg, rgba(96, 65, 40, .98), rgba(67, 45, 28, .98));
}

.recipe-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 18px;
  margin-top: 14px;
}

.recipe-button {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 66px;
  padding: 8px 10px;
  border: 1px solid rgba(72, 55, 38, .16);
  border-radius: 8px;
  background: rgba(255, 255, 255, .58);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.recipe-button img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.recipe-info {
  min-width: 0;
}

.recipe-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 5px;
}

.recipe-badges span {
  min-height: 17px;
  padding: 2px 5px;
  border: 1px solid rgba(140, 101, 58, .32);
  border-radius: 4px;
  color: #5f4128;
  background: rgba(255, 250, 240, .84);
  font: 800 11px/1 Arial, sans-serif;
}

.recipe-badges .recipe-tag {
  color: #fff5df;
  background: #8c653a;
}

.recipe-title {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #2d1f14;
  font: 800 14px/1.18 Arial, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-count {
  margin-top: 12px;
  color: var(--muted);
  font: 700 12px/1 Arial, sans-serif;
}

.catalog-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
  margin-top: 18px;
}

.catalog-pagination a {
  min-width: 36px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 11px;
  border: 1px solid rgba(72, 55, 38, .18);
  border-radius: 8px;
  color: #3a2716;
  background: rgba(255, 255, 255, .62);
  font: 800 13px/1 Arial, sans-serif;
  text-decoration: none;
}

.catalog-pagination a.is-active {
  color: #fff5df;
  background: linear-gradient(180deg, rgba(96, 65, 40, .98), rgba(67, 45, 28, .98));
}

.calc-recipe-panel {
  margin-top: 20px;
}

.item-details {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.35fr);
  gap: 12px;
  margin-top: 18px;
}

.item-details-card {
  padding: 14px;
  border: 1px solid rgba(72, 55, 38, .14);
  border-radius: 10px;
  background: rgba(255, 250, 240, .74);
}

.item-details-title {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
}

.item-details-title img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.item-details-title span,
.item-stat-list span,
.item-sa-head span {
  display: flex;
  gap: 6px;
  align-items: center;
  color: var(--muted);
  font: 700 11px/1 Arial, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.item-stat-list span img,
.item-sa-head span img {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.item-details-title strong {
  display: block;
  margin-top: 4px;
  color: #251a12;
  font: 800 20px/1.1 Arial, sans-serif;
}

.item-stat-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.item-stat-list div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid rgba(72, 55, 38, .1);
  border-radius: 8px;
  background: rgba(255, 255, 255, .48);
}

.item-stat-list strong,
.item-sa-head strong {
  color: #6c4216;
  font: 800 17px/1 Arial, sans-serif;
}

.item-sa-card {
  display: grid;
  gap: 12px;
}

.item-sa-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.item-sa-head div {
  min-width: 150px;
  padding: 9px 10px;
  border: 1px solid rgba(72, 55, 38, .1);
  border-radius: 8px;
  background: rgba(255, 255, 255, .48);
}

.sa-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.sa-option {
  min-height: 86px;
  padding: 10px;
  border: 1px solid rgba(72, 55, 38, .1);
  border-radius: 8px;
  background: rgba(255, 255, 255, .48);
}

.sa-option strong {
  display: flex;
  gap: 7px;
  align-items: center;
  margin-bottom: 8px;
  color: #8a4f12;
  font: 800 14px/1.15 Arial, sans-serif;
}

.sa-option strong img {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.sa-option span {
  display: block;
  color: #332418;
  font: 700 13px/1.35 Arial, sans-serif;
}

.back-to-catalog {
  min-height: 74px;
  display: grid;
  place-items: center;
  padding: 10px;
  border: 1px solid rgba(72, 55, 38, .14);
  border-radius: 10px;
  color: #fff5df;
  background: linear-gradient(180deg, rgba(96, 65, 40, .98), rgba(67, 45, 28, .98));
  font: 800 13px/1 Arial, sans-serif;
  text-decoration: none;
}

.calc-panel {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid rgba(72, 55, 38, .16);
  border-radius: 12px;
  background: rgba(255, 255, 255, .38);
}

.calc-panel-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 12px;
  align-items: stretch;
}

.selected-card {
  height: 100%;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(72, 55, 38, .14);
  border-radius: 10px;
  background: rgba(255, 250, 240, .74);
}

.selected-card img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.selected-card h2 {
  margin: 0 0 4px;
  color: #2b1d12;
  font: 800 22px/1.05 Arial, sans-serif;
}

.selected-card p {
  margin: 0;
  color: var(--muted);
  font: 700 13px/1.35 Arial, sans-serif;
}

.chance-pill {
  padding: 8px 10px;
  border-radius: 8px;
  color: #fff5df;
  background: #5f4128;
  font: 800 13px/1 Arial, sans-serif;
}

.calc-side-tools {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 9px;
}

.calc-stats,
.calc-amount {
  display: grid;
  align-content: center;
  gap: 6px;
  min-height: 74px;
  padding: 10px;
  border: 1px solid rgba(72, 55, 38, .14);
  border-radius: 10px;
  background: rgba(255, 250, 240, .74);
}

.calc-stats {
  text-align: center;
}

.calc-stats strong {
  color: #2b1d12;
  font: 800 26px/1 Arial, sans-serif;
}

.calc-stats span {
  color: var(--muted);
  font: 700 11px/1 Arial, sans-serif;
}

.calc-amount input {
  height: 34px;
  padding: 0 9px;
}

.calc-table-wrap {
  margin-top: 12px;
  overflow-x: auto;
  border: 1px solid rgba(72, 55, 38, .14);
  border-radius: 10px;
  background: rgba(255, 250, 240, .66);
}

.calc-note {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(95, 65, 40, .16);
  border-radius: 8px;
  color: #5b4633;
  background: rgba(255, 250, 240, .62);
  font: 700 13px/1.45 Arial, sans-serif;
}

.calc-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
}

.calc-table th,
.calc-table td {
  padding: 8px;
  border-bottom: 1px solid rgba(72, 55, 38, .1);
  text-align: right;
  vertical-align: middle;
}

.calc-table th {
  color: var(--muted);
  background: rgba(245, 235, 216, .72);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.calc-table th:first-child,
.calc-table td:first-child {
  text-align: left;
}

.ingredient-name {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-left: calc(var(--tree-depth, 0) * 22px);
  color: #2d1f14;
  font-weight: 700;
}

.is-hidden-resource {
  display: none;
}

.is-child-resource td:first-child {
  background: linear-gradient(90deg, rgba(95, 65, 40, .055), transparent 64%);
}

.is-auto-excluded td {
  color: rgba(63, 53, 45, .72);
}

.is-child-resource .ingredient-name {
  color: #554331;
  font-size: 13px;
}

.tree-branch {
  position: relative;
  flex: 0 0 14px;
  width: 14px;
  height: 30px;
}

.tree-branch::before,
.tree-branch::after {
  content: "";
  position: absolute;
  background: rgba(95, 65, 40, .36);
}

.tree-branch::before {
  left: 6px;
  top: -11px;
  bottom: 14px;
  width: 1px;
}

.tree-branch::after {
  left: 6px;
  top: 15px;
  width: 12px;
  height: 1px;
}

.is-root-resource .ingredient-name::before {
  content: "";
  display: none;
}

.ingredient-name img {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.ingredient-label {
  min-width: 0;
}

.ingredient-link {
  min-width: 0;
  color: #5f4128;
  font-weight: 800;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.ingredient-link:hover {
  color: #2b1d12;
}

.tree-toggle,
.tree-toggle-spacer {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
}

.tree-toggle {
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(95, 65, 40, .22);
  border-radius: 50%;
  color: #5f4128;
  background: rgba(255, 250, 240, .72);
  font: 800 17px/1 Arial, sans-serif;
  cursor: pointer;
  transition: transform 140ms var(--ease), background-color 140ms var(--ease);
}

.tree-toggle:hover {
  background: rgba(255, 255, 255, .95);
}

.tree-toggle:active {
  transform: scale(.92);
}

.auto-excluded {
  display: inline-block;
  padding: 5px 7px;
  border-radius: 7px;
  color: #6b5947;
  background: rgba(95, 65, 40, .08);
  font: 700 11px/1 Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.calc-table input[type="number"] {
  height: 31px;
  max-width: 106px;
  padding: 0 8px;
  text-align: right;
}

.calc-table input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

.calc-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  gap: 10px;
  align-items: stretch;
  margin-top: 12px;
}

.calc-summary div {
  padding: 13px;
  border: 1px solid rgba(72, 55, 38, .14);
  border-radius: 10px;
  background: rgba(255, 250, 240, .74);
}

.calc-summary .is-hidden-summary {
  display: none;
}

.calc-summary span {
  display: block;
  color: var(--muted);
  font: 700 11px/1 Arial, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.calc-summary strong {
  display: block;
  margin-top: 7px;
  color: #251a12;
  font: 800 24px/1 Arial, sans-serif;
}

.calc-actions {
  display: grid;
  gap: 8px;
  min-width: 150px;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.calc-actions button {
  padding: 0 12px;
}

.calc-table-empty,
.calc-empty {
  padding: 20px;
  color: var(--muted);
  text-align: center;
  font: 700 14px/1.4 Arial, sans-serif;
}

.resource-sources {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid rgba(72, 55, 38, .16);
  border-radius: 12px;
  background: rgba(255, 255, 255, .38);
}

.resource-sources-head span {
  color: var(--muted);
  font: 700 11px/1 Arial, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.resource-sources-head h2 {
  margin: 6px 0 0;
  color: #251a12;
  font: 800 24px/1.15 Arial, sans-serif;
}

.resource-source-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.resource-source-card {
  overflow: hidden;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(72, 55, 38, .14);
  border-radius: 10px;
  background: rgba(255, 250, 240, .72);
}

.resource-source-title {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.resource-source-title img {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.resource-source-title strong {
  min-width: 0;
  overflow: hidden;
  color: #2b1d12;
  font: 800 18px/1.15 Arial, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resource-source-groups {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.resource-source-group {
  display: grid;
  gap: 6px;
}

.resource-source-group > span {
  color: var(--muted);
  font: 800 11px/1 Arial, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.resource-source-group > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.resource-source-group a {
  max-width: min(100%, 360px);
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 6px 8px;
  overflow: hidden;
  border: 1px solid rgba(140, 101, 58, .22);
  border-radius: 7px;
  color: #5f4128;
  background: rgba(255, 255, 255, .56);
  font: 800 12px/1.15 Arial, sans-serif;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resource-source-group a:hover {
  color: #fff5df;
  background: #5f4128;
}

@media (max-width: 980px) {
  .calc-catalog,
  .catalog-toolbar,
  .item-details {
    grid-template-columns: 1fr;
  }

  .catalog-searchbar {
    grid-column: auto;
  }

  .catalog-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .recipe-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calc-panel-head,
  .calc-summary {
    grid-template-columns: 1fr;
  }

  .sa-options {
    grid-template-columns: 1fr;
  }

  .resource-source-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .recipe-list,
  .calc-side-tools {
    grid-template-columns: 1fr;
  }

  .calc-catalog,
  .catalog-main,
  .catalog-sidebar {
    padding: 10px;
  }

  .catalog-nav {
    grid-template-columns: 1fr;
  }

  .selected-card {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .selected-card .chance-pill {
    grid-column: 1 / -1;
    width: max-content;
  }

  .calc-table {
    min-width: 700px;
  }
}