/* Shared by the desktop and mobile pages (Mari, 2026-10-17: Edit / Delete
   recipe on mobile too): the recipe pop-up's ⋯ menu and its Edit recipe and
   Delete recipe views, buttons, form fields, tags, "Goes with" and
   checkboxes. Colours, sizes, spacing and text styles come from tokens.css
   (System v2: Button, Icon button, Input, Select, Checkbox, Recipe menu, Field
   label, Dropdown row in the Figma components). Each page's own <style> comes
   after this file, so it can adjust these. */
/* Icons (both pages; drawn by icon() in core.js): the line is --icon-stroke
   (1px) on screen at any size, rather than growing with the icon (a 22px
   basket was 1.8px). */
.icon{ stroke-width:var(--icon-stroke); }
.icon *{ vector-effect:non-scaling-stroke; }
/* In the recipe pop-up: the name with its ⋯ button, the recipe it goes with,
   and the note on a recipe with no ingredients yet */
.modal-title{ display:flex; align-items:flex-start; gap:var(--space-12); margin-bottom:var(--space-8); }
.modal-body .modal-title h2{ margin:0; flex:1; min-width:0; }
/* Icon button "recipe-edit-btn": 36px, outlined */
.recipe-edit-btn{
  flex:none;
  width:36px;
  height:36px;
  border:1px solid var(--border-default);
  border-radius:var(--radius-control);
  background:var(--surface-panel);
  color:var(--text-primary);
  cursor:pointer;
}
.recipe-edit-btn:hover{ background:var(--surface-subtle); border-color:var(--border-default); }
/* The ⋯ button's menu: Edit recipe / Delete recipe (Mari, 2026-10-17) */
.recipe-menu{ position:relative; flex:none; }
.recipe-menu-list{
  position:absolute;
  right:0;
  top:calc(100% + var(--space-4));
  z-index:5;
  min-width:180px;
  padding:var(--space-4);
  display:flex;
  flex-direction:column;
  background:var(--surface-panel);
  border-radius:var(--radius-control);
  box-shadow:var(--shadow-float);  /* no border, like the dropdown lists (Mari, 2026-10-22) */
}
.recipe-menu-list[hidden]{ display:none; }
.recipe-menu .recipe-menu-list button{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:var(--space-12);
  height:36px;
  padding:0 var(--space-12);
  border:none;
  border-radius:var(--radius-base);
  background:none;
  color:var(--text-primary);
  font:var(--type-body);
  text-align:left;
  cursor:pointer;
}
.recipe-menu-list button:hover{ background:var(--surface-subtle); }
.recipe-menu-list .icon{ width:16px; height:16px; }
.confirm-delete p{ margin:var(--space-8) 0 0; font:var(--type-body); color:var(--text-secondary); }
.confirm-delete .cm-error{ margin-top:var(--space-12); }
.goes-with{ margin:0 0 var(--space-16); font:var(--type-body); color:var(--text-secondary); }
.goes-with b{ color:var(--text-primary); font-weight:600; }
.goes-with button{
  padding:0;
  border:none;
  background:none;
  font:inherit;
  font-weight:600;
  color:var(--text-primary);
  text-decoration:underline;
  text-underline-offset:2px;
  cursor:pointer;
}
.goes-with button:hover{ text-decoration-thickness:2px; }
.no-ingredients{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-12);
  padding:var(--space-12) var(--space-16);
  border:1px solid var(--border-default);
  border-radius:var(--radius-card);
  background:var(--surface-subtle);
  font:var(--type-body);
}
.no-ingredients > span{ flex:1; min-width:220px; }
.no-ingredients .btn-secondary{ height:var(--size-control-form); }

/* Button: primary, secondary, primary outline and text. 44px in the header
   and drawer, 40px inside forms (--size-control-form). Regular weight. */
.btn-primary, .btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-8);
  flex:none;
  height:var(--size-control-default);
  padding:0 var(--space-16);
  border-radius:var(--radius-control);
  font:var(--type-body);
  cursor:pointer;
  white-space:nowrap;
}
.btn-primary{ background:var(--action-primary); color:var(--text-inverse); border:1px solid var(--action-primary); }
.btn-primary:hover:not(:disabled){ background:var(--action-hover); border-color:var(--action-hover); }
.btn-primary:disabled{ background:var(--border-default); border-color:var(--border-default); color:var(--text-secondary); cursor:default; }
.btn-secondary{ background:var(--surface-panel); color:var(--text-primary); border:1px solid var(--border-default); }
/* "Clear plan" / "Undo" in the header: ink text, no box; a light fill on
   hover (System v2; was orange text, Mari's design 2026-10-15) */
.btn-text{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-8);
  height:var(--size-control-default);
  padding:0 var(--space-12);
  border:none;
  border-radius:var(--radius-control);
  background:none;
  font:var(--type-body);
  color:var(--text-primary);
  cursor:pointer;
  white-space:nowrap;
}
.btn-text:hover{ background:var(--surface-subtle); }
.btn-primary .icon{ width:16px; height:16px; }
/* "View current week" on a past week: brown text and outline on the panel */
.btn-primary.is-outline{ background:var(--surface-panel); color:var(--action-primary); }
.btn-primary.is-outline:hover{ background:var(--selection-surface); border-color:var(--action-primary); color:var(--selection-text); }
.btn-secondary:hover:not(:disabled){ background:var(--surface-subtle); border-color:var(--border-default); }
.btn-secondary:disabled{ color:var(--text-secondary); cursor:default; }
.spin{ animation:spin .9s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
/* Edit recipe: the recipe's image with "Replace image" (or "Add image")
   on it. A new image is shown here and saved with the rest on Save. */
.re-photo{
  position:relative;
  height:200px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border-default);
  border-radius:var(--radius-card);
  background:var(--border-default);
  overflow:hidden;
}
.re-photo .modal-img{ position:absolute; inset:0; height:100%; }
.re-photo .btn-secondary{ position:relative; height:var(--size-control-form); box-shadow:var(--shadow-lift); }
.cm-body{ padding:var(--space-20) var(--space-24) var(--space-24); overflow-y:auto; min-height:0; flex:1; }
.cm-title{ font:var(--type-heading-small-semibold); margin:0 0 var(--space-8); padding-right:var(--space-40); }
.cm-field{ display:block; margin-bottom:var(--space-16); }
.cm-field:last-child{ margin-bottom:0; }
/* Field label: the name in semibold, an optional hint after it */
.cm-label{ display:block; font:var(--type-body-semibold); margin-bottom:var(--space-8); }
.cm-label small{ font:var(--type-support); color:var(--text-secondary); }
/* Input (text, URL, textarea) in the "Create new" pop-up and in Edit recipe */
:is(.cm, .re-form) input[type=text], .cm input[type=url], :is(.cm, .re-form) textarea{
  width:100%;
  border:1px solid var(--border-default);
  border-radius:var(--radius-control);
  font:var(--type-body);
  color:var(--text-primary);
  background:var(--surface-panel);
}
:is(.cm, .re-form) input[type=text], .cm input[type=url]{ height:var(--size-control-form); padding:0 var(--space-12); }
:is(.cm, .re-form) textarea{ padding:var(--space-12); resize:vertical; min-height:96px; }
:is(.cm, .re-form) :is(input, textarea):hover{ border-color:var(--border-default); }
.cm input:disabled, .cm textarea:disabled{ background:var(--surface-subtle); color:var(--text-secondary); }
:is(.cm, .re-form) ::placeholder{ font:var(--type-support); color:var(--text-secondary); }
/* Tags (kind, meals, protein) in "Manually enter", the check screen and Edit recipe */
.tag-fields{ margin:0 0 var(--space-16); padding:0; border:none; min-width:0; }
.tag-fields > legend{ padding:0; }
.tag-hint{ margin:0 0 var(--space-12); font:var(--type-support); color:var(--text-secondary); }
.tag-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-12); margin-bottom:var(--space-12); }
.tag-sub{ display:block; font:var(--type-body); margin-bottom:var(--space-8); }
/* Select: the arrow is drawn in --text-secondary (#675b54; a data: picture
   can't read CSS variables), its line 1px (1.5 of 24 units at 16px) */
.tag-fields select{
  width:100%;
  height:var(--size-control-form);
  padding:0 var(--space-36) 0 var(--space-12);
  border:1px solid var(--border-default);
  border-radius:var(--radius-control);
  background:var(--surface-panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23675b54' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right var(--space-12) center;
  appearance:none;
  font:var(--type-body);
  color:var(--text-primary);
  cursor:pointer;
}
.tag-fields select:hover{ border-color:var(--border-default); }
.tag-meals{ margin:0; padding:0; border:none; min-width:0; }
.tag-meals > legend{ padding:0; }
.tag-checks{ display:flex; flex-wrap:wrap; gap:var(--space-8) var(--space-20); }
.tag-checks label{ display:inline-flex; align-items:center; gap:var(--space-8); font:var(--type-body); cursor:pointer; min-height:24px; }
.tag-checks input{ cursor:pointer; }
.cm-error{
  display:flex;
  gap:var(--space-8);
  align-items:flex-start;
  margin:var(--space-12) 0 0;
  font:var(--type-body);
  color:var(--text-primary);
}
.cm-error .icon{ margin-top:var(--space-4); }
.cm-foot{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--space-8);
  padding:var(--space-12) var(--space-24);
  border-top:1px solid var(--border-default);
  background:var(--surface-panel);
}
.cm-foot .btn-primary, .cm-foot .btn-secondary{ height:var(--size-control-form); }
/* Stepper: a number with small ˄ ˅ arrows stacked on its right (Mari's
   mockup, 2026-10-18). Plan meals' entrées and servings (an <input>), and
   the recipe pop-up's servings (a number shown, changed by the arrows only). */
.stepper{
  display:inline-flex;
  align-items:center;
  width:96px;
  height:var(--size-control-form);
  padding:0 var(--space-4) 0 var(--space-12);
  border:1px solid var(--border-default);
  border-radius:var(--radius-control);
  background:var(--surface-panel);
}
.stepper:hover{ border-color:var(--border-default); }
.stepper:focus-within{ border-color:var(--text-secondary); }
.stepper input{
  flex:1;
  min-width:0;
  height:100%;
  padding:0;
  border:none;
  background:none;
  color:var(--text-primary);
  font:var(--type-body);
  outline:none;
  -moz-appearance:textfield;
}
.stepper-arrows{ display:flex; flex-direction:column; }
.stepper button{
  display:flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:16px;
  padding:0;
  border:none;
  border-radius:var(--radius-base);
  background:none;
  color:var(--text-primary);
  cursor:pointer;
}
.stepper button .icon{ width:14px; height:14px; }
.stepper button:hover:not(:disabled){ background:var(--surface-subtle); }
.stepper button:disabled{ color:var(--border-default); cursor:default; }
.stepper button:focus-visible{ outline:2px solid var(--text-primary); outline-offset:-2px; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
/* Fingers need bigger arrows than Figma's 24 × 16 (the old − / + were 36px). */
@media (pointer:coarse){
  .stepper{ height:44px; }
  .stepper button{ width:32px; height:20px; }
}
/* Checkbox everywhere: brown with a thin tick when ticked (the tick is drawn
   in --text-inverse, #faf8f5; a data: picture can't read CSS variables) */
input[type=checkbox]{
  appearance:none;
  flex:none;
  width:16px;
  height:16px;
  margin:0;
  border:1px solid var(--text-secondary);
  border-radius:var(--radius-base);
  background:var(--surface-panel) center / 12px no-repeat;
  cursor:pointer;
}
input[type=checkbox]:hover{ border-color:var(--text-primary); }
input[type=checkbox]:checked{
  background-color:var(--action-primary);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23faf8f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  border-color:var(--action-primary);
}
input[type=checkbox]:checked:hover{ background-color:var(--action-hover); border-color:var(--action-hover); }
input[type=checkbox]:focus-visible{ outline:2px solid var(--text-primary); outline-offset:2px; }
/* Edit recipe: the recipe pop-up becomes a form, scrolling in its middle
   with a fixed footer, like the "Create new" screens */
.modal.editing{ display:flex; flex-direction:column; overflow:hidden; }
.re-form{ display:flex; flex-direction:column; min-height:0; flex:1; }
/* Edit recipe (both pages): 24px 16px padding, fields 16px apart, each label
   4px over its box; the footer like the other forms' */
.re-form .cm-body{ padding:var(--space-24) var(--space-16); }
.re-form .cm-label{ margin-bottom:var(--space-4); }
.re-form .cm-foot{ padding:var(--space-16) var(--space-24); }
/* "Goes with": type to search the recipes, pick one from the list below
   (or above, when there's more room there) */
.combo{ position:relative; }
.combo input[type=text]{ padding-right:var(--space-40); }
.combo-clear{
  position:absolute;
  top:6px;
  right:6px;
  width:28px;
  height:28px;
  border:none;
  border-radius:var(--radius-base);
  background:none;
  color:var(--text-secondary);
  cursor:pointer;
}
.combo-clear:hover{ background:var(--surface-subtle); color:var(--text-primary); }
.combo-list{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + var(--space-4));
  z-index:5;
  margin:0;
  padding:var(--space-4);
  list-style:none;
  max-height:240px;
  overflow-y:auto;
  background:var(--surface-panel);
  border-radius:var(--radius-control);
  box-shadow:var(--shadow-float);  /* no border on dropdown lists (Mari, 2026-10-22) */
}
.combo.up .combo-list{ top:auto; bottom:calc(100% + var(--space-4)); }
/* Dropdown row: 37px, highlighted with the subtle fill */
.combo-list li{ padding:var(--space-8) var(--space-12); border-radius:var(--radius-base); font:var(--type-body); cursor:pointer; }
.combo-list li.active{ background:var(--surface-subtle); }
.combo-list li[aria-selected=true]{ font-weight:600; }
.combo-list li.combo-empty{ color:var(--text-secondary); cursor:default; }