.layout:not(:has(nav)) {
  display: block;
}

.layout:not(:has(nav)) main {
  margin-inline: auto;
}

.home-intro,
.login-intro {
  color: var(--muted);
}

.home-sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 860px;
}

.home-section,
.install-access {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--white);
}

.home-section {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
}

.home-section:hover,
.install-access summary:hover {
  background: var(--soft);
}

.section-art {
  display: block;
  width: 100%;
  height: auto;
  max-height: 174px;
  aspect-ratio: 5 / 2.7;
  object-fit: cover;
}

.section-text {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 4px;
  padding: 9px 10px 11px;
}

.section-text h2 {
  margin: 0;
  font-size: clamp(16px, 5vw, 23px);
}

.section-text p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.section-text > span,
.install-arrow {
  align-self: center;
  color: var(--accent);
  font-size: 18px;
  line-height: 1;
}

.install-access {
  max-width: 860px;
  margin-top: 14px;
}

.install-access summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 10px;
  border-radius: inherit;
  cursor: pointer;
}

.install-access summary::-webkit-details-marker {
  display: none;
}

.install-access svg {
  width: 46px;
  height: 42px;
  border-radius: 4px;
}

.install-access summary strong {
  display: block;
  font: 18px/1.25 Georgia, serif;
}

.install-access summary small {
  display: block;
}

.install-access p {
  margin: 0;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  font-size: 14px;
}

.login .password-field {
  position: relative;
}

.login .password-field input {
  margin: 0;
  padding-inline-end: 50px;
}

.login .password-field .password-visibility {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 1px;
  width: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--accent);
  background: transparent;
}

.login .password-field .password-visibility:hover {
  background: var(--soft);
}

.password-visibility:focus-visible {
  outline-offset: -4px;
}

.password-visibility svg {
  width: 20px;
  height: 20px;
}

.password-field.is-enhanced input::-ms-reveal {
  display: none;
}

.recipe-identity {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero .recipe-identity .recipe-title {
  min-width: 0;
  margin: 0;
  font-size: clamp(26px, 8.2vw, 44px);
}

.recipe-identity .version-label {
  flex: 0 0 auto;
  max-width: 42%;
  padding: 4px 7px;
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.hero .version-actions {
  gap: 7px;
  margin: 8px 0 11px;
}

.wizard textarea {
  min-height: 76px;
}

.wizard input[type=file]::file-selector-button {
  margin-inline-end: 9px;
  padding: 4px 7px;
  border: 0;
  border-radius: 3px;
  background: var(--soft);
  color: var(--ink);
}

.recipe-lines {
  padding: 0;
  border: 0;
}

.recipe-lines legend {
  padding: 0;
}

.recipe-line {
  border-bottom: 1px solid var(--line);
}

.recipe-line summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  min-height: 49px;
  padding: 5px 2px;
  font-size: 14px;
  cursor: pointer;
}

.recipe-line summary > span:first-child {
  overflow-wrap: anywhere;
}

.recipe-line summary > span:last-child {
  color: var(--accent);
  font-size: 18px;
}

.recipe-line[open] summary > span:last-child {
  transform: rotate(90deg);
}

.recipe-line-fields {
  padding-bottom: 10px;
}

.recipe-lines > button {
  margin-top: 11px;
}

.ingredient-list-row {
  display: block;
  color: var(--ink);
  text-decoration: none;
}

.ingredient-list-row h2 {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.ingredient-list-row h2 span {
  color: var(--accent);
}

.ingredient-list-row:hover {
  background: var(--soft);
}

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

.ingredient-price-card,
.ingredient-stock-card {
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white);
}

.ingredient-price-card h2 {
  margin: 0 0 4px;
  color: var(--muted);
  font: 600 13px/1.5 "Segoe UI", Arial, sans-serif;
}

.ingredient-price-card > p:last-child {
  margin: 6px 0 0;
}

.ingredient-price-card .price-line:first-of-type strong {
  font: 28px/1.3 Georgia, serif;
}

.ingredient-measure > div,
.ingredient-history-entry {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.ingredient-measure > div {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.ingredient-measure dt {
  font-weight: 600;
}

.ingredient-measure dd {
  margin: 0;
}

.ingredient-stock-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 12px;
}

.ingredient-stock-card:has(details[open]) {
  grid-template-columns: minmax(0, 1fr);
}

.ingredient-stock-card .stock-value {
  text-align: left;
}

.ingredient-stock-card .stock-value strong:not(.stock-alert) {
  font: clamp(25px, 8vw, 38px)/1.2 Georgia, serif;
}

.ingredient-stock-card > small {
  grid-column: 1 / -1;
}

.ingredient-stock-card summary {
  white-space: nowrap;
}

.ingredient-stock-card summary::-webkit-details-marker {
  display: none;
}

.ingredient-history-entry small {
  display: block;
}

.ingredient-history-entry > div:last-child {
  text-align: right;
}

.price-reference-label {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: #f4e7da;
  color: #783b2a;
  font-size: 11px;
}

@media (max-width: 350px) {
  .home-sections { gap: 9px; }
  .section-text { padding-inline: 8px; }
}

@media (display-mode: standalone) {
  .install-access { display: none; }
}