/* Shared sizing for the frame, recipe views, dialogs and application menu. */
:root {
  --rail-width: 5.5rem;
  --top-height: 3.5rem;
  --content-space: clamp(1rem, 2vw, 1.75rem);
  --dialog-space: clamp(1rem, 2vw, 1.5rem);
  --rail-item-height: clamp(2.75rem, 8dvh, 4rem);
  --rail-bottom-height: clamp(2.75rem, 7dvh, 3.5rem);
}
html:has(dialog[open]), html:has(body.menu-open) { overflow: hidden; }

body > .top {
  left: var(--rail-width);
  height: var(--top-height);
  padding-inline: var(--content-space);
}
#workspace > .shell { grid-template-columns: var(--rail-width) minmax(0, 1fr); }
#workspace .rail {
  width: var(--rail-width);
  padding: clamp(.5rem, 1.5dvh, .875rem) .25rem max(.5rem, env(safe-area-inset-bottom));
}
#workspace .rail-brand {
  height: clamp(2rem, 7dvh, 3.25rem);
  margin-bottom: .5rem;
}
.rail-brand img { width: 2rem; height: 2rem; }
.rail-local { grid-template-columns: minmax(0, 1fr); gap: .25rem; min-width: 0; overflow-x: hidden; overscroll-behavior: contain; }
#workspace .rail button, #workspace .rail-bottom a {
  min-height: var(--rail-item-height);
  min-width: 0;
  gap: .1875rem;
  padding: .25rem .125rem;
  border-radius: .625rem;
  font-size: .75rem;
  line-height: 1.2;
}
#workspace .rail svg { width: 1.375rem; height: 1.375rem; }
#workspace .rail button > span, #workspace .rail-bottom a > span { line-height: 1.2; }
.rail-bottom { gap: .125rem; margin-top: .5rem; padding-top: .5rem; }
#workspace .rail-bottom a, #workspace .rail-bottom button { min-height: var(--rail-bottom-height); }
#workspace .rail button small { top: .125rem; right: .125rem; font-size: .75rem; line-height: 1; }

#workspace .content {
  max-width: 90rem;
  padding: calc(var(--top-height) + var(--content-space)) var(--content-space) calc(var(--content-space) + env(safe-area-inset-bottom));
}
.heading { gap: 1rem; margin-bottom: 1.125rem; }
.heading > div:first-child, .heading-title > div { min-width: 0; }
.heading h1 {
  margin: .25rem 0;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.heading p:last-child { font-size: .875rem; line-height: 1.4; }
.heading-actions { flex-shrink: 0; gap: .5rem; }
button, .button-link { padding: .5rem .75rem; font-size: .875rem; line-height: 1.35; min-height: 2.375rem; }
.heading > .primary { min-height: 2.375rem; margin-top: .375rem; font-size: .875rem; }
.toolbar { gap: .75rem; margin-bottom: .875rem; }
.search { min-width: 0; height: 2.625rem; padding-inline: .75rem; }
.search input { font-size: .875rem; }
.search span { font-size: 1.375rem; }
.toolbar > button { flex-shrink: 0; }
.list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: .75rem; }
.item-card { min-width: 0; min-height: 5rem; padding: .75rem; gap: .625rem; border-radius: .75rem; }
.item-mark { width: 2.375rem; height: 2.375rem; font-size: 1.125rem; }
.item-main strong { font-size: .9375rem; }
.item-main small { font-size: .8125rem; }
.empty { padding: 2rem 1rem; }
.empty-icon { width: 3.75rem; height: 3.75rem; border-radius: 1rem; }
.empty-icon img { width: 2.5rem; }
.empty h2 { margin-top: 1rem; }
.companion { flex-wrap: wrap; gap: .5rem 1rem; margin-top: 1rem; padding-top: 1rem; }
.recipe-tabs { flex-wrap: wrap; margin-bottom: 1rem; overflow: visible; }
.recipe-tabs button { padding: .5rem .75rem; font-size: .875rem; }

.library-list { gap: .5rem; }
.library-card { min-width: 0; border-radius: .75rem; }
.library-card-open { padding: .75rem; gap: .75rem; }
.library-card-open strong { font-size: .9375rem; line-height: 1.35; }
.library-card-open small { margin-top: .25rem; font-size: .8125rem; line-height: 1.4; }
.recipe-select { padding: .75rem 0 .75rem .75rem; }
.recipe-select input { margin: 0; }
.library-count { margin-block: .75rem; font-size: .8125rem; }
.recipe-filters { margin: .75rem 0 1rem; padding: .75rem; }
.recipe-filters summary { font-size: .875rem; }
.filter-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.25rem), 1fr)); gap: .75rem; margin-top: .75rem; }
.filter-grid label { min-width: 0; font-size: .875rem; }
.recipe-filters > p { margin-bottom: 0; font-size: .8125rem; line-height: 1.45; }
.recipe-selection { padding: .625rem; gap: .5rem; font-size: .875rem; }
.collection-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: .875rem; }
.collection-tile { min-width: 0; min-height: 9rem; padding: 1rem; border-radius: .875rem; overflow-wrap: anywhere; }
.collection-symbol { font-size: 1.625rem; }
.collection-tile strong { font-size: 1rem; margin-top: .5rem; }
.collection-tile p { margin-block: .625rem; font-size: .875rem; }
.collection-tile small { font-size: .8125rem; }
.browse-card-main { min-height: 5rem; padding: .625rem; gap: .625rem; }
.browse-card-photo { width: 3.75rem; height: 3.5rem; border-radius: .5rem; }
.browse-card-copy strong { font-size: .9375rem; overflow-wrap: anywhere; }
.browse-card-copy small { margin-top: .25rem; font-size: .75rem; }
.browse-card-actions { padding: 0 .625rem .625rem; flex-wrap: wrap; gap: .5rem; }
.browse-card-actions button { font-size: .8125rem; }

dialog {
  width: min(44rem, calc(100vw - 1.5rem));
  max-width: calc(100vw - 1.5rem);
  max-height: calc(100dvh - 1.5rem);
  padding: var(--dialog-space);
  border-radius: 1rem;
  overscroll-behavior: contain;
}
dialog h2, .modal-head h2 { font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.25; overflow-wrap: anywhere; }
.modal-head { gap: .75rem; margin-bottom: 1rem; }
.modal-head > div { min-width: 0; }
.modal-head > button, .ecosystem-close { flex: none; display: grid; place-items: center; width: 2.5rem; min-height: 2.5rem; padding: 0; }
dialog p { overflow-wrap: anywhere; }
.form-grid, .integration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.form-grid label, .integration-field { min-width: 0; gap: .375rem; }
.form-grid input:not([type=checkbox]), .form-grid textarea,
.filter-grid input, .filter-grid select, .nutrition-editor select,
#import-form input, #import-form textarea, #import-collection input,
#add-collection select, #plan-form > label input,
.integration-field input, .integration-field select {
  min-width: 0;
  max-width: 100%;
  min-height: 2.375rem;
  padding: .5rem .625rem;
  font: inherit;
  font-size: .875rem;
  border: 1px solid var(--line);
  border-radius: .5rem;
  background: #fff;
  color: inherit;
}
#recipe-form fieldset { min-width: 0; padding: .75rem; }
.nutrition-editor { margin-block: 1rem; }
#recipe-form textarea, .form-grid textarea { min-height: 6rem; }
#import-form textarea { min-height: clamp(7rem, 25dvh, 12rem); }
.modal-actions { flex-wrap: wrap; gap: .5rem; margin-top: 1.125rem; }
.modal-actions button, .modal-actions a { max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
#editor:has(.recipe-detail) { width: min(56rem, calc(100vw - 1.5rem)); max-height: calc(100dvh - 1.5rem); }
.recipe-detail-photo { height: clamp(8rem, 24dvh, 14rem); margin-bottom: 1rem; border-radius: .75rem; }
.recipe-detail-meta { gap: .375rem; margin-bottom: .875rem; }
.recipe-detail-meta span, .recipe-status { padding: .375rem .5rem; font-size: .75rem; }
.recipe-detail-grid { gap: 1.25rem; margin: 1.125rem 0; }
.recipe-detail-grid > section { min-width: 0; }
.recipe-detail-grid h3 { font-size: 1rem; margin-bottom: .625rem; }
.recipe-ingredient-list li { gap: .625rem; padding-block: .5rem; font-size: .875rem; }
.recipe-ingredient-list li > span, .recipe-ingredient-list li strong { min-width: 0; overflow-wrap: anywhere; }
.recipe-ingredient-list strong { max-width: 45%; font-size: .8125rem; white-space: normal; text-align: right; }
.recipe-step-list { gap: .625rem; }
.recipe-step-list li { gap: .625rem; }
.recipe-step-list p { min-width: 0; margin-top: .125rem; font-size: .875rem; overflow-wrap: anywhere; }
.recipe-detail-actions {
  bottom: calc(-1 * var(--dialog-space));
  margin: 1.25rem calc(-1 * var(--dialog-space)) calc(-1 * var(--dialog-space));
  padding: .75rem var(--dialog-space);
}
.recipe-detail-actions button { font-size: .8125rem; }
.recipe-nutrition { padding: 1rem; margin-top: 1.125rem; }
.recipe-nutrition h3 { font-size: 1rem; margin-bottom: .5rem; }
.recipe-nutrition p { margin-top: 0; font-size: .8125rem; }
.nutrition-scroll { min-width: 0; }
.recipe-nutrition table { width: 100%; table-layout: fixed; font-size: .8125rem; }
.recipe-nutrition th, .recipe-nutrition td { padding: .5rem .375rem; white-space: normal; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.recipe-nutrition th:first-child { width: 40%; }
.recipe-nutrition thead th { vertical-align: bottom; }

#ecosystem-dialog { width: min(60rem, calc(100vw - 1.5rem)); padding: var(--dialog-space); }
.ecosystem-heading { gap: .75rem; }
.ecosystem-heading > div { min-width: 0; }
.ecosystem-heading h2 { font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: .375rem; }
.ecosystem-heading p { font-size: .875rem; }
.ecosystem-search { gap: .375rem; margin-top: .875rem; font-size: .875rem; }
.ecosystem-search input { min-width: 0; min-height: 2.375rem; padding: .5rem .625rem; font-size: .875rem; }
.ecosystem-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: .5rem; margin-top: .875rem; }
.ecosystem-item { min-height: 3.25rem; gap: .5rem; padding: .5rem; border-radius: .625rem; }
.ecosystem-item > span:last-child { min-width: 0; }
.ecosystem-icon { width: 2rem; height: 2rem; border-radius: .5rem; font-size: 1rem; }
.ecosystem-item strong { font-size: .875rem; }
.ecosystem-item small { font-size: .75rem; margin-top: .125rem; }

#cooking { width: min(64rem, calc(100% - 1.5rem)); height: min(calc(100dvh - 1.5rem), 52rem); }
.cooking-header { gap: .75rem; padding: 1rem 1.25rem .75rem; }
.cooking-header > div { min-width: 0; }
.cooking-header h2 { margin-top: .375rem; font-size: clamp(1.25rem, 2vw, 1.5rem); }
.cooking-body { grid-template-columns: minmax(0, 1fr) minmax(13rem, 17rem); gap: 1rem; padding: 1rem 1.25rem; }
.cooking-photo { height: clamp(7rem, 22dvh, 14rem); min-height: 0; max-height: none; }
.cooking-step { min-width: 0; min-height: 0; padding: 1rem; }
.cooking-step h3 { font-size: clamp(1.125rem, 1.5vw, 1.375rem); overflow-wrap: anywhere; }
.cooking-timer { margin-top: 1rem; gap: .5rem; }
.cooking-timer strong { font-size: 1.375rem; }
.cooking-ingredients summary { padding: .75rem; font-size: .875rem; }
.cooking-serving-control { flex-wrap: wrap; padding: .625rem .75rem; }
.cooking-ingredients ul { padding-inline: .75rem; }
.cooking-ingredients li label { padding-block: .5rem; gap: .5rem; }
.cooking-ingredients li span, .cooking-ingredients li strong { min-width: 0; overflow-wrap: anywhere; }
.cooking-controls { padding-top: .25rem; }

@media (max-width: 1400px), (max-height: 700px) {
  :root { --top-height: 3.25rem; --content-space: 1rem; }
  .heading h1 { font-size: 1.5rem; }
  .heading { margin-bottom: 1rem; }
  .collection-tile { min-height: 8rem; padding: .875rem; }
  .entry-card { padding: 1.75rem 1.5rem; }
  .entry-card > img { width: 3.5rem; height: 3.5rem; margin-bottom: 1rem; }
  .entry-card h1 { font-size: 1.625rem; }
  .entry-card #enter { min-height: 2.75rem; margin-top: 1.25rem; }
}

/* The same query is used by app-drawer.js, including landscape screens. */
@media (max-width: 900px), (max-height: 480px) {
  :root { --top-height: 3.5rem; --content-space: .875rem; }
  body > .top { left: 0; padding-inline: .5rem; gap: .375rem; }
  #app-menu-toggle { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: transparent; }
  .top-context { display: none; }
  .top .mobile-brand { display: flex; align-items: center; gap: .375rem; flex: 1; min-width: 0; font-size: .9375rem; font-weight: 750; color: inherit; }
  .mobile-brand img { width: 1.75rem; height: 1.75rem; flex: none; }
  .top .ecosystem-open { margin: 0; padding: .5rem; font-size: .8125rem; }
  .account-link > span:last-child { display: none; }
  .account-avatar { width: 2rem; height: 2rem; }
  #workspace > .shell { display: block; }
  #workspace .rail {
    position: fixed; inset: 0 auto 0 0; z-index: 52;
    width: min(16rem, calc(100vw - 2.75rem)); height: 100dvh;
    padding: .5rem .625rem max(.5rem, env(safe-area-inset-bottom));
    visibility: hidden; transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: .5rem 0 2rem #27313f24;
  }
  body.menu-open { overflow: hidden; }
  body.menu-open #workspace .rail { visibility: visible; transform: translateX(0); }
  #workspace .rail .rail-brand { display: none; }
  #workspace .rail .rail-close { display: grid; place-items: center; align-self: flex-end; width: 2.75rem; height: 2.75rem; min-height: 2.75rem; margin: 0 0 .375rem; padding: 0; font-size: 1.75rem; }
  #workspace .rail button, #workspace .rail-bottom a {
    flex-direction: row; justify-content: flex-start;
    min-height: 2.75rem; gap: .625rem; padding: .625rem .75rem;
    font-size: .875rem; text-align: left;
  }
  #workspace .rail button > span, #workspace .rail-bottom a > span { min-width: 0; overflow-wrap: anywhere; }
  #workspace .rail button small { position: static; margin-left: auto; font-size: .75rem; flex: none; }
  .rail-bottom { margin-top: .5rem; padding-top: .5rem; }
  #app-menu-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 51; width: 100%; height: 100dvh; padding: 0; border: 0; border-radius: 0; background: #27313f66; }
  #workspace .content { padding-top: calc(var(--top-height) + var(--content-space)); }
  .heading { flex-wrap: wrap; gap: .75rem; }
  .heading-actions { flex-wrap: wrap; }
  .recipe-detail-grid { grid-template-columns: 1fr; gap: 1rem; }
}

@media (max-width: 600px) {
  .heading-actions { width: 100%; }
  .heading-actions button { flex: 1 1 8rem; }
  .heading > .primary { white-space: normal; margin-top: 0; }
  .toolbar { flex-direction: column; align-items: stretch; gap: .5rem; }
  .toolbar > button { align-self: flex-end; }
  .search { width: 100%; height: 2.75rem; }
  .list { grid-template-columns: minmax(0, 1fr); }
  .library-card-open { padding: .625rem; gap: .5rem; }
  .library-card-open .item-mark { display: none; }
  .library-card-open strong { font-size: .875rem; }
  .recipe-select { display: grid; place-items: center; min-width: 2.75rem; min-height: 2.75rem; padding: .5rem; }
  .collection-remove { flex: none; min-width: 2.75rem; min-height: 2.75rem; margin-right: .25rem; }
  .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .collection-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
  .form-grid, .integration-grid { grid-template-columns: minmax(0, 1fr); }
  .form-grid .wide, .integration-wide { grid-column: 1 / -1; }
  .recipe-detail-actions { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recipe-detail-photo { height: clamp(7rem, 20dvh, 10rem); }
  .recipe-detail-actions button { font-size: .8125rem; }
  .recipe-nutrition { padding: .75rem; }
  .recipe-nutrition th, .recipe-nutrition td { padding: .5rem .25rem; }
  .recipe-nutrition th:first-child { width: 36%; }
  .ecosystem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ecosystem-item { gap: .375rem; padding: .375rem; }
  .ecosystem-icon { width: 1.75rem; height: 1.75rem; }
  #cooking { inset: 0; width: 100%; height: 100dvh; border: 0; border-radius: 0; }
  .cooking-header { padding: .75rem 1rem; }
  .cooking-body { display: flex; flex-direction: column; gap: .875rem; padding: .875rem 1rem 1rem; }
  .cooking-photo { flex: none; height: clamp(6rem, 20dvh, 9rem); min-height: 0; max-height: none; }
  .cooking-ingredients { width: 100%; overflow: visible; }
  .cooking-controls { bottom: -1rem; width: calc(100% + 2rem); margin: auto -1rem -1rem; padding: .625rem 1rem calc(.625rem + env(safe-area-inset-bottom)); }
  .cooking-controls button { flex: 1; min-width: 0; }
  input:not([type=checkbox]):not([type=radio]), select, textarea,
  .search input, .filter-grid input, .filter-grid select,
  .form-grid input:not([type=checkbox]), .form-grid textarea,
  #import-form input, #import-form textarea, #import-collection input,
  #add-collection select, #plan-form > label input, .nutrition-editor select,
  .ecosystem-search input, .integration-field input, .integration-field select { font-size: 1rem; }
}

@media (max-width: 420px) {
  .filter-grid { grid-template-columns: minmax(0, 1fr); }
  .collection-grid { grid-template-columns: minmax(0, 1fr); }
  .ecosystem-item strong { font-size: .8125rem; }
  .ecosystem-icon { width: 1.5rem; height: 1.5rem; }
  .recipe-selection > a { width: 100%; justify-content: center; text-align: center; }
  .top .ecosystem-open { font-size: .75rem; padding-inline: .375rem; }
}

@media (max-height: 480px) {
  #workspace .rail { width: min(22rem, calc(100vw - 2.75rem)); }
  .rail-local, .rail-bottom { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem; }
  #workspace .rail button, #workspace .rail-bottom a { padding-inline: .5rem; gap: .375rem; }
  .recipe-detail-actions { position: static; }
  .cooking-header { padding-block: .5rem; }
  .cooking-body { gap: .625rem; padding-block: .625rem; }
  .cooking-step { padding: .75rem; }
  .entry-card { padding: 1rem; }
  .entry-card > img { width: 2.5rem; height: 2.5rem; margin-bottom: .5rem; }
  .entry-card #enter { margin-block: .75rem; }
}

@media (pointer: coarse) {
  button, .button-link, .filter-grid input, .filter-grid select { min-height: 2.75rem; }
  .browse-card-actions button { padding-block: .625rem; }
}
@media (prefers-reduced-motion: reduce) { #workspace .rail { transition: none; } }