/* The Mehrotra Kitchen - styles. Poppins + mono labels carried over from saarthm.com; Lora for titles.
   Palette: vintage berry #94384f, almond silk #c5afa4, jungle teal #53917e, baltic blue #235789, coffee bean #170f11.

   The palette has one home: sitekit's Kitchen skin, packages/sitekit/css/skin-kitchen.css, built into
   assets/sitekit/sitekit.css and linked before this file. That gives the kit's roles (--bg, --ink, --head,
   --card, --card-edge, --rule, --tag, --trim, --shadow, ...) and the Kitchen's own palette names
   (--kitchen-berry, --kitchen-teal, ...). The block below is this stylesheet's older vocabulary, kept so
   eight hundred lines of rules did not have to change, with every name pointing at the skin. There is no
   colour literal left here: change one in the skin and it changes everywhere. */
:root {
  --berry: var(--kitchen-berry); --almond: var(--kitchen-almond); --teal: var(--kitchen-teal);
  --baltic: var(--kitchen-baltic); --coffee: var(--kitchen-coffee);
  /* surfaces: the page ground and card come from the kit's roles; the second paper is the Kitchen's own */
  --paper: var(--bg); --paper-2: var(--kitchen-paper-2); --edge: var(--card-edge);
  --muted: var(--tag);
  /* accent = berry; teal for selections and tags; baltic blue for links */
  --terra: var(--kitchen-berry); --terra-ink: var(--kitchen-berry-ink); --terra-soft: var(--kitchen-berry-soft);
  --olive: var(--kitchen-teal); --olive-ink: var(--kitchen-teal-ink); --olive-soft: var(--kitchen-teal-soft);
  --link: var(--kitchen-baltic); --link-hover: var(--kitchen-baltic-ink);
  --on-accent: var(--kitchen-cream);
  /* legacy aliases used in a few rules */
  --carbon: var(--kitchen-coffee); --mauve: var(--kitchen-berry); --candy: var(--kitchen-teal); --orchid: var(--kitchen-teal);
  /* type and shape: the kit's, under this file's older names (--font and --radius are the kit's own) */
  --serif: var(--font-serif); --mono: var(--font-mono); --pill: var(--radius-pill);
  /* the kit's --shadow is a colour; the card shadow this file draws with it */
  --shadow-card: 0 10px 30px var(--shadow-card);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.55; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }
img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; color: var(--head); font-weight: 600; line-height: 1.15; }
p { margin: 0; }
.serif { font-family: var(--serif); }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.mt { margin-top: 8px; }
.kicker { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
code { font-family: var(--mono); font-size: .92em; background: var(--paper-2); padding: 1px 6px; border-radius: 6px; }
[hidden] { display: none !important; }
.ico { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.linklike { background: none; border: none; padding: 0; font: inherit; color: var(--terra-ink); cursor: pointer; font-weight: 600; font-size: 13px; }
.linklike:hover { color: var(--terra); }
:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; border-radius: 6px; }

/* ---- Top bar ------------------------------------------------------------
   sitekit's shell draws the bar and the footer: sticky, the berry rule
   beneath it, the mono nav voice, the phone stacking, the monogram. What
   follows is the Kitchen's own on top of that: the cloche and serif name
   inside .brand, an inner measure as wide as its 1400px pages, the active
   link's underline, and the room its actions need. Nothing here restates a
   shell rule; a rule about the bar itself belongs in packages/sitekit. */
.topbar .inner { max-width: 1400px; padding: 18px clamp(16px, 4vw, 56px); gap: 24px; }
/* The two-line wordmark and the underlined current link are the kit's
   shell now (they started here). What stays is the Kitchen's own voice on
   top of them: the serif name, the half-pixel-larger berry address with its
   teal dots, and the heavier tracked nav. */
.brand-name { font-family: var(--serif); }
.brand-url { font-size: 13.5px; color: var(--terra-ink); }
.brand-url .dot { background: var(--teal); }
.nav { gap: 22px; margin-left: auto; flex-wrap: wrap; }
.nav a { letter-spacing: .08em; font-weight: 700; }
.nav-short { display: none; }
.nav a.on { color: var(--terra-ink); border-color: var(--terra); }
.signin-link { font-size: 13px; font-weight: 600; }
.who { position: relative; }
.who summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--head); }
.who summary::-webkit-details-marker { display: none; }
.who-menu { position: absolute; right: 0; top: calc(100% + 8px); background: var(--card); border: 1px solid var(--edge); border-radius: 12px; padding: 12px 14px; min-width: 190px; box-shadow: var(--shadow-card); z-index: 10; display: flex; flex-direction: column; gap: 8px; }
.who-hint { font-size: 12px; color: var(--muted); }

/* ---- Buttons, pills, avatars ------------------------------------------
   .btn, .btn-primary and .btn-ghost are sitekit's (buttons layer); the
   skin gives them berry, cream and coffee. The Kitchen adds a compact size
   for the bar, hover states, and its own darker and danger fills. */
.btn { white-space: nowrap; }
.btn-sm { padding: 10px 16px; font-size: 13px; }
.btn-primary:hover { background: var(--kitchen-berry-ink); color: var(--on-accent); }
.btn-ghost:hover { border-color: var(--head); color: var(--head); }
.btn-danger { color: var(--terra-ink); }
.btn-danger-solid { background: #6f2f3f; }
.btn[disabled] { opacity: .5; cursor: default; }
.pill { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--pill); padding: 6px 12px; font-size: 12px; font-weight: 500; border: 1px solid var(--edge); background: var(--card); color: var(--head); white-space: nowrap; font-family: var(--font); cursor: default; line-height: 1.3; }
button.pill { cursor: pointer; }
button.pill:hover { border-color: rgba(23,15,17,.45); }
.pill.on { background: var(--teal); border-color: var(--teal); color: #fff; }
.pill-olive { background: var(--olive-soft); border-color: rgba(83,145,126,.45); color: var(--olive-ink); }
.pill-terra { background: var(--terra-soft); border-color: rgba(148,56,79,.35); color: var(--terra-ink); }
.pill-danger { color: var(--terra-ink); }
.pill-soon { position: absolute; top: 12px; right: 12px; font-size: 10.5px; padding: 3px 8px; }
.pill-float { position: absolute; left: 12px; top: 12px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--olive); color: #fff; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.avatar-me { background: var(--terra); width: 38px; height: 38px; font-size: 16px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- Layout ----------------------------------------------------------- */
.wrap { padding: 36px clamp(16px, 4vw, 56px) 64px; max-width: 1400px; margin: 0 auto; width: 100%; }
.narrow { max-width: 980px; margin: 0 auto; }
.narrow-sm { max-width: 560px; }
.section { margin-top: 36px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.section-head h2 { font-size: 24px; }
.page-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 26px; }
.page-head h1 { font-size: var(--fs-h1); letter-spacing: -.015em; }
.lede { font-size: 15px; color: var(--muted); line-height: 1.6; max-width: 62ch; }
/* The footer is sitekit's (shell layer): the monogram, its link home, the copyright line, the fine print. */

.card { background: var(--card); border: 1px solid var(--edge); border-top: 3px solid var(--terra); border-radius: var(--radius); }
.card-olive { border-top-color: var(--olive); }
.card-title-row { display: flex; align-items: center; gap: 8px; }
.card-title-row h2 { font-size: 22px; }

/* ---- Flash messages --------------------------------------------------- */
.flash { margin: 18px clamp(16px, 4vw, 56px) 0; padding: 12px 18px; border-radius: 12px; font-size: 14px; background: var(--olive-soft); color: var(--olive-ink); }
.flash-error { background: var(--terra-soft); color: var(--terra-ink); }
.flash-code { background: var(--card); border: 1px solid var(--edge); color: var(--ink); display: flex; flex-direction: column; gap: 8px; }
.flash.inline { margin: 0 0 12px; }
.code-reveal { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.code-reveal code { font-size: 20px; letter-spacing: .04em; padding: 8px 14px; border-radius: 10px; background: var(--paper-2); }

/* ---- Browse ----------------------------------------------------------- */
/* ---- the recipe book: a side column that folds away, and the recipes ------
   Wide screens: two columns. The side column holds the statuses and the
   filters and stays put while the recipes scroll; the Filters button folds it
   away and the script remembers that on this device. Phones: the same column
   is a panel the button opens above the recipes. Search and sort sit in the
   bar over the recipes so they are there either way. */
.book { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 32px; align-items: start; }
.book[data-side="closed"] { grid-template-columns: minmax(0, 1fr); }
.book[data-side="closed"] .book-side { display: none; }
.book-side { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; display: flex; flex-direction: column; gap: 18px; padding: 2px 4px 8px 0; scrollbar-width: thin; }
.side-group { display: flex; flex-direction: column; gap: 8px; }
.side-group > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 0; user-select: none; }
.side-group > summary::-webkit-details-marker { display: none; }
.side-group[open] > summary .filters-chev { transform: rotate(-135deg) translateY(-2px); }
.side-group .chips .pill { cursor: pointer; }
.side-list { flex-direction: column; flex-wrap: nowrap; gap: 2px; }
.pill.side-item { justify-content: flex-start; width: 100%; border: none; background: none; border-radius: 10px; padding: 8px 10px; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.pill.side-item .n { margin-left: auto; color: var(--muted); font-weight: 500; }
.pill.side-item:hover { background: var(--paper-2); }
.pill.side-item.on { background: var(--card); color: var(--head); box-shadow: inset 3px 0 0 var(--teal); }
.side-clear { align-self: flex-start; }
.book-main { min-width: 0; }
.book-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
/* The three controls in the bar share one height. The count of filters in use
   rides on the corner of the button, so the button never changes width and
   nothing in the bar is pushed onto a new line when a filter is chosen. */
.book-toggle, .search.book-search, .book-sort select { height: 40px; box-sizing: border-box; }
.book-toggle { position: relative; cursor: pointer; font-weight: 600; padding: 0 16px; flex: none; }
.book-toggle[aria-expanded="true"] { background: var(--teal); border-color: var(--teal); color: #fff; }
.book-toggle-n { position: absolute; top: -6px; right: -6px; display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--pill); background: var(--berry); color: var(--on-accent); font-size: 11px; font-weight: 700; box-shadow: 0 0 0 2px var(--paper); }
/* The heading block above both columns: the title with the count beside it, then one sentence about the book. */
.book-head { margin-bottom: 18px; }
.book-head-line { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.book-title { font-size: 28px; line-height: 1.1; }
.book-intro { margin: 6px 0 0; line-height: 1.5; }
.book-active { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search.book-search { width: min(320px, 100%); padding: 0 16px; margin-left: auto; }
.book-sort { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.book-sort select { width: auto; padding: 0 34px 0 14px; font-size: var(--fs-sm); border-radius: var(--pill); }
@media (max-width: 760px) {
  .book { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* The main column dissolves so the panel can sit between the bar and the recipes. */
  .book-main { display: contents; }
  .book-bar { order: 1; }
  .book > .book-main > .grid, .book-main > .empty-results, .book-main > .offdiet { order: 3; }
  .book-side { order: 2; position: static; max-height: none; overflow: visible; background: var(--card); border: 1px solid var(--edge); border-top: 3px solid var(--teal); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }
  /* One row: the search takes what is left beside the Filters button and the sort. */
  .book-head { margin-bottom: 12px; }
  .book-bar { gap: 8px; margin-bottom: 12px; flex-wrap: nowrap; }
  .book-toggle, .search.book-search, .book-sort select { height: 44px; }
  .search.book-search { order: 1; flex: 1 1 0; width: auto; min-width: 0; margin-left: 0; padding: 0 14px; }
  .book-toggle { order: 2; width: 44px; padding: 0; justify-content: center; }
  .book-toggle-text { display: none; }
  .book-title { font-size: 24px; }
  .book-active { display: none; }
  .book-sort { order: 3; }
  .book-sort > span { display: none; }
}
.search { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--edge); border-radius: var(--pill); padding: 12px 18px; width: min(440px, 100%); color: var(--muted); }
.search input[type=search] { border: none; padding: 0; border-radius: 0; box-shadow: none; background: none; font: inherit; font-size: 15px; color: var(--ink); width: 100%; outline: none; }
.filters-chev { width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-2px); transition: transform .15s ease; flex: none; }
.count { font-size: 15px; font-weight: 400; margin-left: 6px; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.empty, .empty-results { padding: 40px 24px; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.empty h2 { font-size: 24px; }
.empty-results .serif { font-size: 22px; color: var(--head); }

/* ---- Recipe card ------------------------------------------------------ */
.recipe-card { position: relative; overflow: hidden; display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease; }
.recipe-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.recipe-card.hide { display: none; }
.card-photo { position: relative; display: flex; align-items: center; justify-content: center; height: 180px; overflow: hidden; }
.card-photo img { width: 100%; height: 100%; object-fit: cover; }
.tint-indian { background: #f1d2da; color: #7a2d40; }
.tint-chinese { background: #d3e5de; color: #2f5a4e; }
.tint-italian { background: #e8d9d0; color: #6b4a3e; }
.tint-mexican { background: #f3dccb; color: #8a4a2a; }
.tint-thai { background: #dfe8cf; color: #4e6a2f; }
.tint-middle-eastern { background: #ecdfc3; color: #6e5426; }
.tint-japanese { background: #d6dfe9; color: #235789; }
.tint-korean { background: #eed6d1; color: #8a3a2e; }
.tint-american { background: #dcd9e6; color: #3f3a6b; }
.tint-other { background: #e3d8d1; color: #4a3a3f; }
.dish { width: 56px; height: 56px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.heart-form { display: inline-flex; align-items: center; gap: 8px; }
.heart-float { position: absolute; right: 12px; top: 12px; z-index: 2; }
.heart-btn { width: 34px; height: 34px; border-radius: 50%; border: none; background: var(--card); color: var(--mauve); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 8px rgba(23,15,17,.14); transition: transform .12s ease; }
.heart-btn:hover { transform: scale(1.08); }
.heart-btn.on .ico { fill: var(--berry); stroke: var(--berry); }
.card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.card-title { font-size: 18px; font-weight: 600; color: var(--head); line-height: 1.25; }
.card-title:hover { color: var(--terra-ink); }
.meta { display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }
.meta span { display: inline-flex; align-items: center; gap: 5px; }
.card-foot { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--rule); padding-top: 10px; font-size: 12px; color: var(--muted); }
.card-foot .by, .card-foot .hearts { display: inline-flex; align-items: center; gap: 8px; }

/* ---- Recipe page ------------------------------------------------------ */
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 26px; flex-wrap: wrap; }
.recipe-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; align-items: start; }
.recipe-photo { position: relative; border-radius: var(--radius); height: 440px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.recipe-photo img { width: 100%; height: 100%; object-fit: cover; }
.recipe-photo .dish { width: 72px; height: 72px; }
.recipe-intro { display: flex; flex-direction: column; gap: 18px; }
.recipe-intro h1 { font-size: var(--fs-hero); letter-spacing: -.015em; line-height: 1.05; }
.heart-line { gap: 10px; }
.heart-line .heart-btn { width: 40px; height: 40px; border: 1px solid var(--edge); box-shadow: none; }
.heart-count.big { font-size: 20px; font-weight: 600; color: var(--head); }
.glance { padding: 18px 22px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.glance .big { font-size: 20px; font-weight: 600; margin-top: 4px; color: var(--head); }
.actions { display: flex; gap: 10px; flex-wrap: wrap; }
.source { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.recipe-body { display: grid; grid-template-columns: 5fr 7fr; gap: 36px; align-items: start; margin-top: 36px; }
.ingredients { padding: 22px 26px; }
.ing-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ing-group { margin-top: 8px; }
.ing label { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 14.5px; line-height: 1.45; }
.ing input { position: absolute; opacity: 0; width: 0; height: 0; }
.check { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid rgba(23,15,17,.4); flex: none; background: var(--card); margin-top: 2px; }
.ing input:checked + .check { background: var(--olive); border-color: var(--olive); }
.ing input:checked ~ .ing-text { color: var(--muted); text-decoration: line-through; }
.ing input:focus-visible + .check { outline: 2px solid var(--terra); outline-offset: 2px; }
.method-col { display: flex; flex-direction: column; gap: 28px; }
.method h2 { font-size: 24px; margin-bottom: 18px; }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.steps li { display: flex; gap: 16px; align-items: flex-start; }
.steps p { font-size: 15px; line-height: 1.65; }
.step-num { font-size: 22px; font-weight: 600; color: var(--terra); width: 32px; flex: none; line-height: 1.2; }
.notes { border-top-color: var(--olive); padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.notes-head { display: flex; align-items: center; gap: 8px; }
.notes-head h3 { font-size: 15px; }
.note { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.55; }
.note-body { flex: 1; }
.note-delete { margin-left: auto; }
.iconbtn { background: none; border: none; color: var(--muted); cursor: pointer; padding: 4px; border-radius: 6px; display: inline-flex; }
.iconbtn:hover { color: var(--terra-ink); background: var(--paper-2); }
.note-form { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.note-form textarea { width: 100%; }

/* ---- Forms ------------------------------------------------------------ */
.form-card { padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.recipe-form { display: flex; flex-direction: column; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .field > label { font-size: 12.5px; font-weight: 600; color: var(--head); }
input[type=text], input[type=url], input[type=search], select, textarea { font: inherit; font-size: 14px; color: var(--ink); background: var(--card); border: 1px solid var(--edge); border-radius: 12px; padding: 11px 14px; width: 100%; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--terra); box-shadow: 0 0 0 3px var(--terra-soft); }
textarea { line-height: 1.6; resize: vertical; min-height: 90px; }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d6b58' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 36px; }
input[type=file] { font-size: 13px; }
.field-grid { display: grid; gap: 14px; }
.field-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.form-cols { align-items: start; }
.checks { display: flex; gap: 8px; flex-wrap: wrap; }
.pill-check { position: relative; }
.pill-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.pill-check span { display: inline-flex; border-radius: var(--pill); padding: 6px 12px; font-size: 12px; font-weight: 500; border: 1px solid var(--edge); background: var(--card); color: var(--head); cursor: pointer; }
.pill-check input:checked + span { background: var(--teal); border-color: var(--teal); color: #fff; }
.pill-check.olive input:checked + span { background: var(--teal); border-color: var(--teal); color: #fff; }
.pill-check input:focus-visible + span { outline: 2px solid var(--terra); outline-offset: 2px; }
.field-error { font-size: 12.5px; color: var(--terra-ink); font-weight: 600; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; }
.form-actions.left { justify-content: flex-start; }
.saving-as { text-align: right; }
.photo-current { display: flex; align-items: center; gap: 14px; }
.photo-current img { width: 96px; height: 72px; object-fit: cover; border-radius: 10px; }
.options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.option { position: relative; padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 8px; border-top-color: var(--edge); }
.option.on { border-color: var(--terra); box-shadow: 0 0 0 3px var(--terra-soft); }
.option.soon { opacity: .72; }
.option-icon { width: 38px; height: 38px; border-radius: 11px; background: var(--paper-2); color: var(--head); display: inline-flex; align-items: center; justify-content: center; }
.option.on .option-icon { background: var(--terra); color: var(--on-accent); }
.option-title { font-size: 16px; font-weight: 600; color: var(--head); line-height: 1.2; }
.signin-form { max-width: 100%; }
.signin-form .form-inner { display: flex; flex-direction: column; gap: 14px; }

/* Sign in with Google (0.13.0). Google's own button colours so it reads as
   the button people know; the shape and type are the site's .btn. */
.btn-google { background: #fff; color: #1f1f1f; border: 1px solid #747775; gap: 10px; justify-content: center; }
.btn-google:hover { background: #f3f3f3; color: #1f1f1f; }
.gsi-logo { flex: none; width: 18px; height: 18px; }
.gsi-logo-sm { width: 14px; height: 14px; }
.or-rule { display: flex; align-items: center; gap: 12px; color: var(--muted); font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; }
.or-rule::before, .or-rule::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }
.google-line { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12.5px; flex-wrap: wrap; }
.google-line form { display: inline; }
.email-form input[type=email] { flex: 1; min-width: 0; max-width: 220px; padding: 4px 8px; font-size: 12px; border-radius: 8px; }
.linklike.small { font-size: 12px; }
.invites { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.invite-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--rule); }
.invite-row code { word-break: break-all; }
.invite-row form { display: inline; }
.code-input { font-family: var(--mono); font-size: 17px; letter-spacing: .04em; }
.code-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.code-row input { flex: 1 1 200px; }
.checkline { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }

/* ---- Admin ------------------------------------------------------------ */
.admin-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 24px; align-items: start; margin-bottom: 24px; }
.people-card { padding: 22px 24px; border-top-color: var(--edge); }
.people { display: flex; flex-direction: column; }
.people-head, .person { display: grid; grid-template-columns: 2fr 1.1fr .7fr .7fr 1.6fr 2.2fr; gap: 12px; align-items: center; }
.people-head { padding-bottom: 8px; }
.person { padding: 12px 0; border-top: 1px solid var(--rule); font-size: 13.5px; }
.person.removed { opacity: .6; }
.who-cell { display: flex; align-items: center; gap: 10px; }
.who-cell .avatar { width: 28px; height: 28px; font-size: 11px; }
/* Desktop: the wrapper dissolves so the two counts are their own columns,
   labelled by the header row. Narrow: it becomes one line, "3 recipes · 2 hearts". */
.nums { display: contents; }
.num { font-variant-numeric: tabular-nums; }
.num-label { display: none; }
.status { font-size: 12.5px; }
.dot-status { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--olive); }
.dot-status.wait { background: var(--terra); }
.dot-status.off { background: var(--muted); }
.person-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.person-actions form { display: inline; }

/* ---- Print ------------------------------------------------------------ */
@media print {
  .topbar, footer, .actions, .notes form, .heart-btn, .crumbs, .flash { display: none !important; }
  body { background: #fff; }
  .recipe-top, .recipe-body { display: block; }
  .recipe-photo { height: 240px; margin-bottom: 16px; }
  .card { border: 1px solid #ccc; break-inside: avoid; }
}

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 1100px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-grid { grid-template-columns: 1fr; }
  /* Once the header row goes, each person becomes a small stacked block:
     name and role together, then the counts (self-labelled), status, actions. */
  .people-head { display: none; }
  .person { grid-template-columns: auto 1fr; gap: 6px 10px; align-items: start; padding: 16px 0; }
  .person > span:nth-child(2) { justify-self: start; align-self: center; }
  .person .nums, .person .status, .person .person-actions { grid-column: 1 / -1; }
  .person .person-actions { margin-top: 4px; }
  .nums { display: block; }
  .num-label { display: inline; color: var(--muted); }
  .num + .num::before { content: "\00a0\00b7\00a0"; color: var(--muted); }
}
/* The bar has two states, the same two the homepage has: one row, or brand
   and actions on the first row with the nav centred beneath. The kit's
   shell.js measures the bar and applies is-stacked whenever the one row
   would overflow, so the switch happens exactly when it is needed, for a
   signed-in bar (avatar, name, four links) and a signed-out one alike.
   There is no third state: once stacked, the nav is a full-width centred
   row and the actions stay on the brand's row, shrinking (text-less
   buttons, then a text-less toggle) rather than wrapping under it. */
.topbar.is-stacked .inner { gap: 12px 16px; padding-top: 14px; padding-bottom: 12px; }
.topbar.is-stacked .brand { gap: 10px; flex: 1; }
.topbar.is-stacked .nav { margin-left: 0; gap: 18px; }
.topbar.is-stacked .top-actions { margin-left: auto; }
.topbar.is-stacked .who-name { display: none; }
@media (max-width: 760px) {
  .brand .mark { width: 54px; height: 54px; }
  .brand-name { font-size: 22px; white-space: normal; }
  .brand-url { font-size: 13px; }
  .btn-sm span { display: none; }
  .btn-sm { padding: 10px; }
  .wrap { padding-top: 22px; }
  .grid { grid-template-columns: 1fr; gap: 14px; }
  .recipe-card { flex-direction: row; align-items: stretch; }
  .card-photo { width: 110px; height: auto; min-height: 110px; flex: none; }
  .card-photo .pill-float { display: none; }
  .heart-float { top: auto; bottom: 12px; }
  /* The floating heart sits at the card's bottom-right, where the count also lives:
     make room and drop the count's own icon so it reads as one "3 [heart]" unit. */
  .card-foot { padding-right: 42px; }
  .card-foot .hearts .ico { display: none; }
  .card-body { flex: 1; min-width: 0; padding: 12px 14px; }
  .card-title { font-size: 16px; }
  .card-foot .hearts { display: none; }
  .recipe-top, .recipe-body { grid-template-columns: 1fr; gap: 22px; }
  .recipe-photo { height: 240px; }
  .glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-grid.four, .field-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-grid.form-cols { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---- v0.2: add flow, review ------------------------------------------- */
.stepper { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.step { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.step.on { color: var(--head); }
.step-dot { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: var(--card); color: var(--muted); border: 1.5px solid var(--edge); }
.step.on .step-dot, .step.done .step-dot { background: var(--terra); color: var(--on-accent); border-color: var(--terra); }
.step-line { width: 48px; height: 1.5px; background: var(--edge); }
button.option { text-align: left; font: inherit; cursor: pointer; color: inherit; transition: box-shadow .15s ease, border-color .15s ease; }
button.option:hover { border-color: rgba(23,15,17,.4); }
.option-title { display: block; }
.panel { margin-bottom: 18px; }
.recipe-form.panel { margin-bottom: 0; }
.input-icon { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--edge); border-radius: 12px; padding: 0 14px; color: var(--muted); }
.input-icon input { border: none; background: none; padding: 12px 0; border-radius: 0; }
.input-icon input:focus { box-shadow: none; }
.input-icon:focus-within { border-color: var(--terra); box-shadow: 0 0 0 3px var(--terra-soft); }
.input-static { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--muted); word-break: break-all; }
.label-text { font-size: 12.5px; font-weight: 600; color: var(--head); }
.hint-row { display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; }
.form-actions.between { justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.ai-note-plain { background: var(--olive-soft); color: var(--olive-ink); }
.order-first { order: -1; }
.btn-extract.busy { opacity: .75; pointer-events: none; }
.guess { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: 10.5px; font-weight: 600; color: var(--terra-ink); background: var(--terra-soft); border-radius: var(--pill); padding: 2px 8px; vertical-align: middle; font-family: var(--font); text-transform: none; letter-spacing: 0; }
.guess .ico { width: 12px; height: 12px; }
.review-wrap { max-width: 1400px; margin: 0 auto; }
.review-grid { display: grid; grid-template-columns: 8fr 4fr; gap: 28px; align-items: start; }
.review-aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 20px; }
.card-plain { border-top-color: var(--edge); }
.excerpt { line-height: 1.6; max-height: 260px; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.ai-note { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; background: var(--terra-soft); color: var(--terra-ink); line-height: 1.55; }
.ai-note .ico { flex: none; margin-top: 2px; }
@media (max-width: 1000px) { .review-grid { grid-template-columns: 1fr; } .review-aside { position: static; order: -1; } }
@media (max-width: 760px) { .step-line { width: 20px; } }

/* ---- v0.12: the link bar on top, three tiles under it, voice memo ------- */
.link-row { display: flex; gap: 10px; flex-wrap: wrap; }
.link-row .input-icon { flex: 1 1 260px; }
.link-row .btn { flex: none; margin-left: auto; }
.link-kind { color: var(--muted); }
.link-kind .kind-icon { display: inline-flex; color: var(--terra); margin-top: 2px; }
.link-kind[data-kind="notyet"] { color: var(--terra-ink); }
.or-row { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; }
.or-row::before, .or-row::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.voice-box { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 6px 0 2px; text-align: center; }
.voice-btn { display: inline-flex; align-items: center; gap: 10px; font: inherit; font-weight: 600; color: var(--on-accent); background: var(--terra); border: none; border-radius: var(--pill); padding: 13px 24px; cursor: pointer; box-shadow: 0 3px 14px var(--shadow); transition: background .15s ease; }
.voice-btn .ico { width: 20px; height: 20px; }
.voice-btn:hover, .voice-btn.on { background: var(--terra-ink); }
.voice-btn.on .ico { animation: voice-pulse 1.2s ease-in-out infinite; }
@keyframes voice-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.2); opacity: .65; } }
.voice-status { max-width: 48ch; line-height: 1.5; margin: 0; }
@media (prefers-reduced-motion: reduce) { .voice-btn.on .ico { animation: none; } }
@media (max-width: 760px) {
  .options { grid-template-columns: 1fr; gap: 10px; }
  .option { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: center; padding: 12px 14px; }
  .option .option-icon { grid-row: 1 / span 2; }
  .link-row .btn { width: 100%; justify-content: center; }
}

/* ---- the recipe form's save row stays in reach ---------------------------
   Sticky, not fixed: it rides at the bottom of the screen while the long form
   scrolls and settles into its own place at the end, so it never covers the
   last field or the footer. It is a child of the page wrapper, after the
   form, so it rides from the top of the page (see the note in add.php). Nothing follows the keyboard; on a phone the
   keyboard may cover it while typing and it is back when the keyboard closes.
   .stuck is set by the script while it is riding, for the rule and shadow. */
.save-bar { position: sticky; bottom: 0; z-index: 6; margin: 20px 0 0; background: var(--paper); padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid transparent; transition: box-shadow .15s ease, border-color .15s ease; }
.save-bar.stuck { border-top-color: var(--rule); box-shadow: 0 -12px 22px -14px rgba(23,15,17,.28); }
.save-bar-end { display: block; height: 0; }
html:has(.save-bar) { scroll-padding-bottom: 96px; }
/* On the wide review screen the form is the left 8 of 12 columns (28px gap);
   keep the buttons and the "Saving as" line under the form, not the side panel. */
@media (min-width: 1001px) {
  .review-wrap > .save-bar, .review-wrap > .saving-as { padding-right: calc((100% - 28px) / 3 + 28px); }
}
@media (max-width: 760px) {
  .save-bar { margin-inline: calc(-1 * clamp(16px, 4vw, 56px)); padding-inline: clamp(16px, 4vw, 56px); }
  .save-bar .btn-primary { flex: 1 1 auto; justify-content: center; }
}
@media print { .save-bar { display: none; } }

/* ---- lists: the button on a recipe, the picker, the Lists pages --------- */
/* One button, three faces, all in the markup: a plus (on none of my lists), a
   heart (in my favorites), a number (on other lists only). With both, the
   heart stays and the number rides on it as a small badge. */
.list-btn { position: relative; text-decoration: none; }
.list-btn .i-heart, .list-btn .list-num { display: none; }
.list-btn .list-num { font-family: var(--font); font-size: var(--fs-sm); font-weight: 700; line-height: 1; color: var(--terra-ink); }
.list-btn[data-fav="1"] .i-plus { display: none; }
.list-btn[data-fav="1"] .i-heart { display: block; fill: var(--berry); stroke: var(--berry); }
.list-btn[data-fav="0"]:not([data-count="0"]) .i-plus { display: none; }
.list-btn[data-fav="0"]:not([data-count="0"]) .list-num { display: block; }
.list-btn[data-fav="0"]:not([data-count="0"]) { background: var(--terra-soft); }
.list-btn[data-fav="1"]:not([data-count="0"]) .list-num { display: flex; align-items: center; justify-content: center; position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--pill); background: var(--berry); color: var(--on-accent); font-size: 10.5px; box-shadow: 0 0 0 2px var(--card); }
.list-line { display: inline-flex; align-items: center; }
.i-fav { fill: var(--berry); stroke: var(--berry); }

.list-picker { width: min(440px, calc(100vw - 28px)); max-height: min(620px, calc(100vh - 40px)); padding: 0; border: 1px solid var(--edge); border-top: 3px solid var(--terra); border-radius: var(--radius); background: var(--card); color: var(--ink); box-shadow: 0 24px 60px rgba(23,15,17,.28); }
.list-picker::backdrop { background: rgba(23,15,17,.45); }
.list-picker[open] { display: flex; flex-direction: column; }
.list-picker-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 20px 10px; }
.list-picker-head h2 { font-size: 20px; line-height: 1.2; margin-top: 4px; }
.list-picker-rows { display: flex; flex-direction: column; padding: 0 12px; overflow: auto; min-height: 60px; }
.list-picker-hint { padding: 8px; margin: 0; }
.list-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; color: var(--head); background: none; border: none; border-radius: 10px; padding: 11px 8px; cursor: pointer; }
.list-row:hover { background: var(--paper-2); }
.list-row:focus-visible { outline: 2px solid var(--terra); outline-offset: -2px; }
.list-row-name { font-weight: 600; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.list-row .ico { width: 16px; height: 16px; }
.pick-check { width: 20px; height: 20px; flex: none; border-radius: 6px; border: 1.5px solid var(--edge); background: var(--card); position: relative; }
.list-row[aria-pressed="true"] .pick-check { background: var(--teal); border-color: var(--teal); }
.list-row[aria-pressed="true"] .pick-check::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.list-picker-new { display: flex; gap: 8px; align-items: center; padding: 12px 20px; border-top: 1px solid var(--rule); margin-top: 8px; }
.list-picker-new input { flex: 1 1 auto; min-width: 0; padding: 9px 12px; }
.list-picker-new .pill { cursor: pointer; flex: none; }
.list-picker-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 20px 18px; }
.list-picker-page { gap: 2px; }
.list-picker-page .list-picker-new { padding: 12px 0 0; }
.list-row-form { display: block; }

.list-section .section-head h2 { font-size: var(--fs-xl); }
.list-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.list-tile { display: flex; flex-direction: column; overflow: hidden; color: inherit; text-decoration: none; transition: box-shadow .15s ease, transform .15s ease; }
a.list-tile:hover { box-shadow: 0 10px 26px rgba(23,15,17,.12); transform: translateY(-2px); }
.list-tile-family { border-top-color: var(--teal); }
.list-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; aspect-ratio: 16 / 9; background: var(--paper-2); }
.list-thumb { overflow: hidden; background: var(--paper-2); }
.list-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.list-tile-body { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; align-items: flex-start; }
.list-tile-name { font-size: var(--fs-lg); font-weight: 600; color: var(--head); line-height: 1.2; display: inline-flex; align-items: center; gap: 8px; }
.list-badge-pill { margin-top: 4px; font-size: 11px; padding: 3px 9px; }
/* The new-list box: baltic blue all round, the colour of links and of things you can act on. */
.list-new { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 14px; align-items: end; padding: 18px 20px; border: 1.5px solid var(--baltic); border-top-width: 3px; }
.list-new input, .list-new select { padding: 9px 12px; }
.list-new .btn { height: 40px; }
.list-new-head { display: inline-flex; align-items: center; gap: 8px; }
.list-new-head .ico { width: 18px; height: 18px; color: var(--baltic); }
.list-tools { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
.list-tools summary { cursor: pointer; font-weight: 600; color: var(--head); display: flex; align-items: center; gap: 8px; list-style: none; }
.list-tools summary::-webkit-details-marker { display: none; }
.list-add .pick-row { gap: 10px; }
.list-add .pick-row .pill { cursor: pointer; margin-left: 8px; }
.list-edit { display: flex; flex-direction: column; gap: 12px; }
.list-delete { border-top: 1px solid var(--rule); padding-top: 12px; }
.list-item { display: flex; flex-direction: column; gap: 6px; }
.list-item .recipe-card { flex: 1 1 auto; }
.list-remove { text-align: right; }
@media (max-width: 1100px) { .list-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.list-mosaic.none { display: flex; align-items: center; justify-content: center; color: var(--muted); }
.list-mosaic.none .ico { width: 30px; height: 30px; }
@media (max-width: 640px) {
  .list-grid { grid-template-columns: 1fr; gap: 12px; }
  .list-new { grid-template-columns: 1fr; align-items: stretch; }
  /* On a phone a tile is a row: a small square of photos, then the words. */
  a.list-tile { flex-direction: row; align-items: stretch; }
  a.list-tile .list-mosaic { width: 96px; aspect-ratio: 1 / 1; flex: none; }
  a.list-tile .list-tile-body { justify-content: center; padding: 12px 14px; min-width: 0; }
  .list-picker-new { flex-wrap: wrap; }
  .list-picker-new .pill { margin-left: auto; }
}

/* ---- the cookbook's settings page (the book itself is book.css) --------- */
.cookbook-form { display: flex; flex-direction: column; gap: 18px; }
.cookbook-form .checkline { padding: 2px 0; }
.check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; }
.pick-tools { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.pick-tools .label-text { margin-right: auto; }
.pick-list { max-height: 380px; overflow: auto; border: 1px solid var(--edge); border-radius: 12px; padding: 4px 14px; margin-top: 8px; background: var(--card); }
.pick-row { padding: 7px 0; border-bottom: 1px solid var(--rule); }
.pick-row:last-child { border-bottom: 0; }
.pick-row .dmark { flex: none; }
.pick-title { font-weight: 600; color: var(--head); }
.pick-meta { margin-left: auto; text-align: right; }
.row-tools-line { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .check-grid { grid-template-columns: 1fr; }
  .pick-meta { display: none; }
}

/* ---- queue ------------------------------------------------------------- */
.queue-card { gap: 16px; }
.queue-row { display: flex; align-items: center; gap: 14px; }
.queue-status { font-weight: 600; color: var(--head); }
.queue-spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--terra-soft); border-top-color: var(--terra); animation: mk-spin 1s linear infinite; flex: none; }
.queue-spinner.off { animation: none; border-color: var(--edge); }
@keyframes mk-spin { to { transform: rotate(360deg); } }
.queue-inline { margin-bottom: 18px; }
.job-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--rule); font-size: 13.5px; }
.job-row:first-child { border-top: none; padding-top: 0; }
.queue-inline .job-row:first-of-type { border-top: 1px solid var(--rule); padding-top: 12px; }
.job-main { flex: 1; min-width: 0; }
.job-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.job-actions form { display: inline; }
.job-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--terra); flex: none; }
.job-dot.done { background: var(--olive); }
.job-dot.failed { background: var(--muted); }
.job-dot.running { animation: mk-pulse 1s ease-in-out infinite; }
@keyframes mk-pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .queue-spinner, .job-dot.running { animation: none; } }


/* ---- v0.4: ingredients with quantity set apart, clear-all ------------------- */
.ing-text { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.ing-qty { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--terra-ink); background: var(--terra-soft); border-radius: 6px; padding: 1px 7px; white-space: nowrap; }
.ing input:checked ~ .ing-text .ing-qty { color: var(--muted); background: var(--paper-2); }
.ing-tools { display: inline-flex; align-items: baseline; gap: 12px; }

/* ---- v0.4: cover photo panel ---------------------------------------------- */
.pill-cover { position: absolute; right: 12px; bottom: 12px; cursor: pointer; background: rgba(249,245,242,.92); backdrop-filter: blur(4px); }
.cover-panel { padding: 18px 20px; margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.cover-panel h3 { font-size: 15px; }
.cover-options { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.cover-option { display: flex; flex-direction: column; gap: 6px; }
.row-end { display: flex; justify-content: flex-end; }
.linklike.danger { color: var(--terra-ink); }
.check-inline { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }

/* ---- v0.4: photos from the family ----------------------------------------- */
.gallery { margin-top: 36px; }
.gallery-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin-bottom: 18px; }
.gallery-item { margin: 0; background: var(--card); border: 1px solid var(--edge); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.gallery-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gallery-item figcaption { padding: 10px 14px 12px; font-size: 13px; line-height: 1.45; display: flex; flex-direction: column; gap: 4px; }
.gallery-actions { display: flex; gap: 14px; margin-top: 4px; }
.gallery-actions form { display: inline; }
.gallery-form { padding: 16px 20px; display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; border-top-color: var(--olive); }
.gallery-form .grow { flex: 1 1 220px; }
.gallery-form input[type="file"] { font-size: 13px; }
@media print { .gallery, .cover-panel, .pill-cover, #clear-ticks { display: none !important; } }

/* ---- v0.4: tag chips + structured ingredient / step editors ----------------- */
.tag-editor { display: flex; flex-direction: column; gap: 8px; }
.tag-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-chips:empty { display: none; }
.tag-chip { padding-right: 6px; }
.tag-remove { background: none; border: none; color: inherit; font-size: 15px; line-height: 1; padding: 0 2px; cursor: pointer; margin-left: 2px; opacity: .7; }
.tag-remove:hover { opacity: 1; }
.tag-suggest { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.tag-pick { cursor: pointer; }
.kicker-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ing-editor, .steps-editor { display: flex; flex-direction: column; gap: 8px; }
/* One grid shared by the header, the rows and the dots - so everything lines up.
   Areas: g grip · q qty/number · i the text · n/v the circles · t tools,
   with an al/aq/ai/an/av/at second row for a linked alternative. */
.ed-grid { display: grid; gap: 8px; align-items: center;
  grid-template-columns: 20px 96px minmax(0, 1fr) 30px 30px 84px;
  grid-template-areas: "g q i n v t"; }
.ed-grid.has-alt { grid-template-areas: "g q i n v t" "al aq ai an av at"; }
.ed-grid.step-grid { grid-template-columns: 20px 32px minmax(0, 1fr) 30px 30px 84px; align-items: start; }
.ed-grid.title-grid { grid-template-areas: "g i i n v t"; }
.ed-grid.title-grid.has-alt { grid-template-areas: "g i i n v t" "al ai ai an av at"; }
.grip { grid-area: g; }
.ing-qty-in, .step-row-num { grid-area: q; }
.ing-item-in { grid-area: i; }
.step-grid textarea { grid-area: i; }
#title { grid-area: i; }
.ed-grid > .side-dot.dot-nv:not(.alt-dot) { grid-area: n; }
.ed-grid > .side-dot.dot-veg:not(.alt-dot) { grid-area: v; }
.ed-grid > .row-tools:not(.alt-piece) { grid-area: t; }
.alt-link { grid-area: al; color: #8a7264; display: inline-flex; justify-content: center; }
.alt-qty-in { grid-area: aq; font-family: var(--mono); }
.alt-item-in, .step-grid textarea.alt-step-in, #veg_title { grid-area: ai; }
.ed-grid > .alt-dot.dot-nv { grid-area: an; }
.ed-grid > .alt-dot.dot-veg { grid-area: av; }
.ed-grid > .row-tools.alt-piece { grid-area: at; }
.alt-spacer { display: none; }

.ing-editor-head { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.ing-editor-head .edh { justify-self: center; width: 13px; height: 13px; }
.ing-rows, .step-rows { display: flex; flex-direction: column; gap: 6px; }
.ing-row input, .step-row textarea { min-width: 0; padding: 8px 10px; font-size: 14px; }
.ing-row .ing-qty-in { font-family: var(--mono); font-size: 13px; color: var(--terra-ink); background: var(--terra-soft); border-color: transparent; }
.ing-row-group { display: grid; grid-template-columns: 1fr 28px; gap: 8px; align-items: center; margin-top: 8px; }
.ing-row-group input { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; background: var(--paper-2); border-color: transparent; }
.row-remove { font-size: 18px; line-height: 1; }
.row-tools { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }
.row-tools .alt-btn { font-size: 12px; white-space: nowrap; }
.step-grid .row-tools { margin-top: 8px; }
.editor-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.editor-actions .pill { cursor: pointer; }
.step-row-num { font-size: 18px; font-weight: 600; color: var(--terra); line-height: 1.6; }
.step-row textarea { min-height: 42px; resize: none; overflow: hidden; line-height: 1.5; }

.grip { color: #b5a49a; cursor: grab; display: inline-flex; justify-content: center; touch-action: none; }
.dragging { opacity: .9; background: var(--card); border-radius: 12px; box-shadow: 0 8px 20px rgba(23,15,17,.16); outline: 1.5px dashed var(--olive); }
.side-dot { width: 18px; height: 18px; border-radius: 50%; background: #fff; padding: 0; cursor: pointer; justify-self: center; flex: none; transition: transform .1s ease, box-shadow .1s ease, background-color .1s ease; }
.side-dot.dot-nv { border: 2px solid #94384f; }
.side-dot.dot-veg { border: 2px solid #53917e; }
.side-dot:hover { transform: scale(1.15); box-shadow: 0 1px 5px rgba(23,15,17,.25); }
.side-dot:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; }
.side-dot.dot-nv.on { background: #94384f; }
.side-dot.dot-veg.on { background: #53917e; }
.side-dot.static { cursor: default; pointer-events: none; }
.step-grid .side-dot { margin-top: 10px; }
.ing-item-in.is-meat { border-color: rgba(148,56,79,.5); box-shadow: inset 3px 0 0 #94384f; }
.ing-item-in.is-egg { border-color: rgba(201,138,0,.5); box-shadow: inset 3px 0 0 #c98a00; }

/* the pair's box is drawn with a shadow ring only, so the columns never shift */
.ing-row.has-alt, .step-row.has-alt, .title-rows.has-alt { border-radius: 12px; box-shadow: 0 0 0 1.7px #8a7264; padding: 6px 0; margin: 3px 0; }
.step-grid .alt-link { margin-top: 10px; }
.alt-input { font-size: 13px !important; color: #2f5a4e !important; background: #eaf0ed !important; border-color: rgba(83,145,126,.3) !important; }
textarea.alt-step-in { min-height: 38px; resize: none; overflow: hidden; }
.alt-unlink { font-size: 11px; }
.step-grid .alt-dot { margin-top: 10px; }
.title-rows .alt-input { font-size: 13.5px !important; }

/* phones: the text gets the full width; circles and buttons drop to a second line */
@media (max-width: 640px) {
  /* One column plan for the title, the ingredients and the steps: grip, a
     92px column that holds the quantity (or the step number) on the first
     line and the "Non-veg" pill on the second, a 64px column for the "Veg"
     pill, and the rest. So the pills sit in the same place on every row and
     the "+ alt" and remove tools sit at the right edge of the same line. */
  .ed-grid, .ed-grid.step-grid { grid-template-columns: 18px 92px 64px minmax(0, 1fr); gap: 6px 8px;
    grid-template-areas: "g q i i" "g n v t"; }
  .ed-grid.has-alt { grid-template-areas: "g q i i" "g n v t" "al aq ai ai" "al an av at"; }
  .ed-grid.title-grid { grid-template-areas: "g i i i" "g n v t"; }
  .ed-grid.title-grid.has-alt { grid-template-areas: "g i i i" "g n v t" "al ai ai ai" "al an av at"; }
  .ed-grid > .row-tools { justify-self: end; align-self: center; margin-top: 0; }
  .ed-grid > .side-dot { justify-self: start; align-self: center; margin-top: 0 !important; }
  /* The circle grows into a pill that carries its word, filled when the line
     is in that version. Same taps as the circle. */
  .side-dot { width: auto; height: 28px; border-radius: var(--pill); padding: 0 10px 0 8px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font); font-size: var(--fs-xs); font-weight: 600; line-height: 1; }
  .side-dot:hover { transform: none; }
  .side-dot::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; box-sizing: border-box; flex: none; }
  .side-dot.dot-nv { color: #94384f; border-width: 1.5px; }
  .side-dot.dot-veg { color: #53917e; border-width: 1.5px; }
  .side-dot.dot-nv::after { content: "Non-veg"; }
  .side-dot.dot-veg::after { content: "Veg"; }
  .side-dot.dot-nv.on, .side-dot.dot-veg.on { color: #fff; }
  .side-dot.on::before { background: #fff; border-color: #fff; }
  .ing-editor-head .edh { display: none; }
  .ing-editor-head > span:nth-child(3) { grid-column: 3 / span 2; }
  .ing-row input, .step-row textarea { font-size: 16px; }
  .ing-rows, .step-rows { gap: 12px; }
}

/* photo card: big preview + crop */
.photo-box { border-radius: 12px; overflow: hidden; background: var(--paper-2); }
#photo-preview { width: 100%; max-height: 340px; object-fit: cover; display: block; }
.photo-empty { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: 13px; padding: 34px 0; }
.photo-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.photo-choose { cursor: pointer; }
.cropper { display: flex; flex-direction: column; gap: 10px; }
#crop-canvas { width: 100%; height: auto; border-radius: 12px; touch-action: none; cursor: grab; display: block; }
.crop-row { display: flex; align-items: center; gap: 12px; }
.crop-row input[type=range] { flex: 1; }

/* ---- v0.4: personal icons (letter or drawing, two colours) ------------------ */
.avatar { overflow: hidden; }
.avatar-draw i { display: block; width: 100%; height: 100%; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.avatar-lg { width: 56px; height: 56px; font-size: 24px; }
.avatar-xl { width: 120px; height: 120px; font-size: 50px; }
.by-line { display: inline-flex; align-items: center; gap: 8px; }
.icon-preview-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.icon-preview { display: flex; align-items: center; gap: 14px; }
.color-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.color-row input[type=color] { width: 44px; height: 36px; padding: 2px; border: 1px solid var(--edge); border-radius: 8px; background: var(--card); cursor: pointer; }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(23,15,17,.15); cursor: pointer; padding: 0; }
.swatch:hover { transform: scale(1.12); }
.drawpad { display: flex; flex-direction: column; gap: 10px; }
.drawpad-wrap { width: 240px; height: 240px; border-radius: 50%; overflow: hidden; border: 1px solid var(--edge); box-shadow: var(--shadow-card); touch-action: none; }
#draw-canvas { display: block; width: 240px; height: 240px; cursor: crosshair; }
.drawpad-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.drawpad-tools .spacer { flex: 1; }
.pen-size { cursor: pointer; }

/* ---- Phones: nothing smaller than ~13px, body text 16px ------------------- */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .small, .meta, .field label, .field > label, .field-error, .status, .label-text, .who-hint, .card-foot, .source { font-size: 14px; }
  .kicker, .ing-editor-head, .ing-row-group input { font-size: 12px; }
  .pill, .pill-check span, .ing-qty, .guess, .pill-soon { font-size: 13.5px; }
  .pill { padding: 7px 13px; }
  .note, .checkline, .person, .input-static, .gallery-item figcaption, .check-inline, .crumbs, .signin-link, .btn-sm, .step, .who summary, .linklike, .filters-title { font-size: 14.5px; }
  .ing label { font-size: 16px; }
  .steps p, .lede, .note-body div, .excerpt { font-size: 16px; }
  input[type=text], input[type=url], input[type=search], select, textarea, .ing-row input, .step-row textarea { font-size: 16px; } /* 16px also stops iOS zooming on focus */
  .card-title { font-size: 17px; }
  .card-foot .hearts { display: inline-flex; }
}

/* ---- v0.5: Kitchen tested / Want to try, hearts on photos and notes -------- */
.ribbon { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; z-index: 2; }
.ribbon .ico { width: 12px; height: 12px; }
.ribbon-want { background: var(--baltic); color: #fff; }
.ribbon-tested { background: var(--teal); color: #fff; }
.ribbon.inline { position: static; font-size: 11px; padding: 5px 10px; }
.status-line { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.status-form { display: inline-flex; gap: 14px; }
.heart-mini { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.heart-mini .heart-btn { width: 26px; height: 26px; box-shadow: none; border: 1px solid var(--edge); }
.heart-mini .heart-btn .ico { width: 13px; height: 13px; }
.note .heart-mini { margin-left: auto; align-self: flex-start; }
.note-delete { margin-left: 4px; }
.gallery-item figcaption .heart-mini { margin-top: 2px; }
@media (max-width: 760px) {
  .card-photo .ribbon { left: 6px; bottom: 6px; font-size: 9px; padding: 3px 6px; }
  .card-photo .ribbon .ico { display: none; }
}

/* ---- v0.6: veg / non-veg ---------------------------------------------------- */
/* The Indian packaged-food mark: a square outline with a dot. */
.dmark { display: inline-block; width: 14px; height: 14px; border: 1.5px solid; border-radius: 3px; position: relative; vertical-align: -2px; flex: none; }
.dmark::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: currentColor; }
.dmark-veg { color: #53917e; }
.dmark-ovo { color: #c98a00; }
.dmark-nonveg { color: #94384f; }
h1 .dmark, .card-title .dmark { margin-right: 8px; }
.ing .dmark { width: 11px; height: 11px; border-width: 1.2px; margin-left: 6px; vertical-align: -1px; }
.ing .dmark::after { inset: 2.5px; }

.diet-toggle { display: inline-flex; align-items: center; gap: 7px; border-radius: var(--pill); padding: 8px 14px; font-size: 12.5px; font-weight: 600; border: 1.5px solid var(--edge); background: var(--card); color: var(--head); cursor: pointer; font-family: var(--font); }
.diet-toggle.on { background: #e0eae6; border-color: #53917e; color: #2f5a4e; }
.diet-toggle-form { display: inline-flex; }

.vegopt-badge { display: inline-block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: #2f5a4e; background: #e0eae6; border-radius: 5px; padding: 2px 6px; vertical-align: 2px; margin-left: 4px; white-space: nowrap; }

/* Greyed sections at the bottom of the book in veg mode */
.offdiet { margin-top: 28px; }
.offdiet.hide-section { display: none; }
.offdiet-summary { list-style: none; display: flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; padding: 10px 0; border-top: 1px solid var(--rule); flex-wrap: wrap; }
.offdiet-summary::-webkit-details-marker { display: none; }
.offdiet-summary h2 { font-size: 20px; }
.offdiet-summary .filters-chev { margin-left: auto; }
.offdiet[open] .filters-chev { transform: rotate(-135deg) translateY(-2px); }
.offdiet-grid { margin-top: 12px; }
.offdiet .recipe-card { opacity: .55; filter: grayscale(.35); transition: opacity .15s ease, filter .15s ease, transform .15s ease, box-shadow .15s ease; }
.offdiet .recipe-card:hover, .offdiet .recipe-card:focus-within { opacity: 1; filter: none; }

/* Recipe page: Non-veg / Veg / Both --------------------------------------- */
.ing-view-switch { margin-bottom: 4px; }
.ing-view-switch .pill { cursor: pointer; }
.ing-view-switch .pill .dmark { width: 11px; height: 11px; border-width: 1.2px; }
.ing-view-switch .pill.on .dmark { color: #fff; }

/* one shared left rail so every checkbox lines up */
.ing-list { gap: 6px !important; }
.irow { display: flex; gap: 12px; align-items: flex-start; padding: 7px 10px; border-left: 3px solid transparent; border-radius: 8px; width: 100%; box-sizing: border-box; }
.irow-nv { background: rgba(148,56,79,.06); border-left-color: #94384f; }
.irow-veg { background: rgba(83,145,126,.06); border-left-color: #53917e; }
.side-tag { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; border-radius: 5px; padding: 2px 6px; flex: none; margin-left: auto; white-space: nowrap; }
.tag-nv { background: #f0dbe2; color: #7a2d40; }
.tag-veg { background: #e0eae6; color: #2f5a4e; }
.ing-pair .pairbox { display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1.7px #8a7264; margin: 2px 0; width: 100%; }
.ing-pair .pairbox .irow { border-radius: 0; }
.pair-split { height: 1px; background: var(--rule); display: block; }
.ing-pair, .ing-row-li { display: flex; }

.pots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; flex: 1; min-width: 0; }
.pot { border-radius: 10px; padding: 9px 11px; font-size: 14px; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.pot p { margin: 0; font-size: 14.5px; line-height: 1.55; }
.pot-nv { border: 1px solid rgba(148,56,79,.35); background: rgba(148,56,79,.05); }
.pot-veg { border: 1px solid rgba(83,145,126,.35); background: rgba(83,145,126,.05); }
.pot-ghost { border: 1px dashed var(--edge); color: var(--muted); font-size: 12.5px; justify-content: center; }

/* the three views */
.view-nonveg .only-veg, .view-nonveg .half-veg, .view-nonveg .pot-veg, .view-nonveg .pot-ghost, .view-nonveg .pair-split { display: none; }
.view-veg .only-nonveg, .view-veg .half-nonveg, .view-veg .pot-nv, .view-veg .pot-ghost, .view-veg .pair-split { display: none; }
.view-nonveg .pots, .view-veg .pots { grid-template-columns: 1fr; }
.view-nonveg .pairbox, .view-veg .pairbox { box-shadow: none; margin: 0; }
.view-nonveg .pairbox .irow, .view-veg .pairbox .irow { border-radius: 8px; }
.view-nonveg .side-tag, .view-veg .side-tag { display: none; }
.view-nonveg .pot .side-tag, .view-veg .pot .side-tag { display: none; }
@media (max-width: 640px) { .pots { grid-template-columns: 1fr; } }
@media print { .ing-view-switch { display: none; } }

/* Add form: flagged rows + swap inputs */
.nonveg-note { display: flex; align-items: center; gap: 8px; background: rgba(148,56,79,.08); border: 1px solid rgba(148,56,79,.25); color: #7a2d40; border-radius: 10px; padding: 8px 12px; }
.kicker-tools { display: inline-flex; gap: 14px; align-items: baseline; }
.ing-row .ing-swap-in { grid-column: 2; font-size: 13px; color: #2f5a4e; background: #eaf0ed; border-color: rgba(83,145,126,.3); }
.ing-row.flag-meat .ing-item-in { border-color: rgba(148,56,79,.5); box-shadow: inset 3px 0 0 #94384f; }
.ing-row.flag-egg .ing-item-in { border-color: rgba(201,138,0,.5); box-shadow: inset 3px 0 0 #c98a00; }
.diet-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.diet-row select { max-width: 260px; }

@media (max-width: 760px) {
  .diet-toggle { padding: 7px 10px; font-size: 12px; }
  .offdiet-summary h2 { font-size: 17px; }
  .offdiet-summary .small { width: 100%; order: 3; }
}
@media print { .diet-toggle-form { display: none; } }

/* ---- v0.7: per-person kitchen-tested / want-to-try -------------------------- */
.my-mark { margin-top: -2px; }
.my-mark .kicker { flex: none; }
.status-form { display: inline-flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.status-form .pill { cursor: pointer; }
.marks-sentences { line-height: 1.5; }

/* ---- v0.8.x: separate names for the veg version ----------------------------- */
.veg-aka { margin-top: 2px; }
.card-aka { margin-top: -6px; font-size: 12px; }
.veg-title-field label .dmark { width: 12px; height: 12px; border-width: 1.2px; vertical-align: -1px; }

/* ---- v0.9.1: stacked editors, linked title, diet pills ----------------------- */
.editor-stack { display: flex; flex-direction: column; gap: 18px; }
.title-rows.has-alt { border-radius: 12px; box-shadow: 0 0 0 1.7px #8a7264; padding: 6px 0; margin: 3px 0; }
.title-rows .alt-input { font-size: 13.5px !important; }

/* tag suggestion counts */
.tag-pick .tag-n { font-family: var(--mono); font-size: 10px; opacity: .65; margin-left: 2px; }

/* ---- v0.9.4: baltic-blue trim on recipes, footer mark ----------------------- */
.recipe-card, .recipe-body .card.ingredients, .recipe-top .glance { border-top-color: var(--baltic); }

/* ---- v0.10: sharing from a phone ------------------------------------------ */
.howto { margin-bottom: 18px; }
.howto-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.howto-head h2 { font-size: 20px; margin: 0 0 2px; }
.howto-head p { margin: 0; }
.howto-badge { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--teal); color: #fff; }
.howto-badge .ico { width: 20px; height: 20px; }
.howto-steps { margin: 0 0 12px; padding-left: 22px; display: flex; flex-direction: column; gap: 11px; line-height: 1.55; }
.howto-steps li { padding-left: 3px; }
.howto-steps code, .howto-copy code { font-family: var(--mono); font-size: 12.5px; background: var(--paper-2); border: 1px solid var(--edge); border-radius: 6px; padding: 1px 5px; }
.howto-copy { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.howto-copy code { padding: 8px 10px; word-break: break-all; }
.share-hint { display: flex; gap: 8px; align-items: center; justify-content: center; margin: -4px 0 20px; font-size: 13.5px; }
.share-hint .ico { width: 16px; height: 16px; flex: none; color: var(--teal); }

@media (max-width: 620px) {
  .nav { gap: 8px 14px; }
  /* Four links won't sit on one phone line at full length - shorten the longest. */
  .nav-long { display: none; }
  .nav-short { display: inline; }
  .top-actions { gap: 10px; }
}
/* The actions stay beside the brand on a phone by giving up their words:
   the add button is already its plus sign; here the diet toggle becomes
   its mark, and the name may wrap. */
@media (max-width: 480px) {
  .diet-toggle-text { display: none; }
  .brand-name { font-size: 22px; }
}
/* On a small phone the name gets two lines at most: the domain line goes
   (the footer carries it), the cloche and the actions tighten up, and the
   name has the width it needs beside them. Without this it wrapped to three
   lines at 375px, which is where most phones are. */
@media (max-width: 430px) {
  .brand-url { display: none; }
  .brand .mark { width: 44px; height: 44px; }
  .brand { gap: 8px; }
  .brand-name { font-size: 20px; }
  .top-actions { gap: 6px; }
  .diet-toggle { padding: 7px 9px; }
  .btn-sm { padding: 9px; }
}
/* 360px Androids: the same two lines need a smaller name and cloche. */
@media (max-width: 375px) {
  .brand .mark { width: 40px; height: 40px; }
  .brand-name { font-size: 17px; }
  .top-actions { gap: 4px; }
}

/* ---- v0.11: by the numbers ------------------------------------------------ */
.tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  background: var(--card); border: 1px solid var(--edge);
  border-top: 3px solid var(--terra); border-radius: var(--radius); overflow: hidden;
}
/* Each tile draws its own right and bottom divider rather than relying on grid
   gaps. Gaps would leave a grey block where the last row is short; borders on
   the leading edges would leave a tile with no neighbour undrawn. Drawn this
   way every tile is enclosed however the grid wraps, and the outermost lines
   overhang by 1px so the container's overflow clips them against its border. */
.tile {
  padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 3px;
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  margin-right: -1px; margin-bottom: -1px;
}
.tile-v { font-family: var(--serif); font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tile-k { font-size: 13px; color: var(--muted); line-height: 1.35; }
.tile.green .tile-v { color: var(--olive-ink); }
.tile.accent .tile-v { color: var(--terra-ink); }

.stat-section { margin-top: 40px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; align-items: start; }
.stat-card { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 12px; border-top-color: var(--baltic); }
.stat-card > h3 { font-size: 18px; }
.stat-card-wide { grid-column: 1 / -1; }
.stat-card > p { font-size: 14.5px; }
.stat-card .chips { gap: 6px; }

.bars { display: flex; flex-direction: column; gap: 8px; }
.bar-row { display: grid; grid-template-columns: minmax(78px, 34%) 1fr 28px; align-items: center; gap: 10px; }
.bar-label { font-size: 13px; color: var(--muted); text-align: right; overflow-wrap: anywhere; line-height: 1.3; }
.bar-track { display: block; height: 14px; background: var(--paper-2); border-radius: 4px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--olive); border-radius: 0 4px 4px 0; min-width: 3px; }
.bar-val { font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--head); }

.facts { margin: 0; display: flex; flex-direction: column; gap: 9px; }
.facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; border-bottom: 1px solid var(--rule); padding-bottom: 8px; }
.facts > div:last-child { border-bottom: none; padding-bottom: 0; }
.facts dt { font-size: 13px; color: var(--muted); flex: none; }
.facts dd { margin: 0; font-size: 14.5px; text-align: right; font-variant-numeric: tabular-nums; }

.rank { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; counter-reset: r; }
.rank li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; border-bottom: 1px solid var(--rule); padding-bottom: 7px; font-size: 14.5px; }
.rank li:last-child { border-bottom: none; padding-bottom: 0; }
.rank-name { overflow-wrap: anywhere; }
.rank-n { font-family: var(--mono); font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }

.roster-card { gap: 0; }
.roster-scroll { overflow-x: auto; }
.roster { border-collapse: collapse; width: 100%; min-width: 520px; }
.roster th, .roster td { text-align: right; padding: 10px 0 10px 14px; border-bottom: 1px solid var(--rule); font-variant-numeric: tabular-nums; font-size: 14.5px; }
.roster th { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; border-bottom: 1.5px solid var(--edge); }
.roster th:first-child, .roster td:first-child { text-align: left; padding-left: 0; }
.roster tbody tr:last-child td { border-bottom: none; }
.roster .who { display: flex; align-items: center; gap: 9px; font-weight: 500; }
.variant-split { border-top: 1px solid var(--rule); margin-top: 4px; padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.variant-split h4 { margin: 0; font-size: 13px; font-weight: 600; }

.months-scroll { overflow-x: auto; padding-bottom: 4px; }
.months { display: flex; gap: 8px; align-items: flex-end; justify-content: flex-start; min-height: 150px; }
.month { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 0 1 46px; min-width: 38px; }
.month-n { font-family: var(--mono); font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--head); }
.month-n.zero { color: var(--muted); opacity: .45; }
.month-col { display: block; width: 100%; max-width: 46px; height: 96px; background: var(--paper-2); border-radius: 4px; display: flex; align-items: flex-end; overflow: hidden; }
.month-fill { display: block; width: 100%; background: var(--olive); border-radius: 4px 4px 0 0; min-height: 0; }
.month-lbl { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.months-note { line-height: 1.6; }

@media (max-width: 560px) {
  .tile { padding: 14px 14px 16px; }
  .tile-v { font-size: 32px; }
  .bar-row { grid-template-columns: minmax(64px, 38%) 1fr 26px; }
}

/* ---- v0.11.6: phone headings ---------------------------------------------
   The page title block reads better centred in a narrow column. Section
   headings stay left, because they label left-aligned content underneath -
   centring those would leave each one floating away from what it names. */
@media (max-width: 620px) {
  .page-head { align-items: center; text-align: center; }
  .page-head .lede, .page-head p { max-width: 34ch; }
  .empty, .empty-results { text-align: center; }
}

/* the way back to prep + cook under a Total that was set by hand */
.total-reset { align-self: flex-start; text-align: left; }

/* ---- unit conversions added at display time (app/convert.php) ----------
   The other system sits beside what was typed, quieter than the recipe itself. */
.conv { color: var(--muted); font-size: .9em; font-weight: 400; white-space: nowrap; }
.ing-text .conv { font-family: var(--mono); font-size: 12px; }

/* ---- no zoom on tap -------------------------------------------------------
   iOS Safari zooms the page into any field whose text is under 16px and does
   not zoom back out, which makes editing a recipe a chore. On touch screens
   and narrow ones every field reads the kit's 16px body size. A wide screen
   with a mouse keeps the denser sizes. This block stays last so it wins. */
@media (pointer: coarse), (max-width: 760px) {
  /* :not(#_) adds weight without matching anything less: older rules here set
     smaller sizes with !important, and between two !important rules the heavier selector wins. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not(#_), select:not(#_), textarea:not(#_) { font-size: var(--fs-base) !important; }
}

/* ---- v0.19: the draft held up against its source on the review screen ----
   v0.20: the marks sit inside the ingredient and step fields. Each marked field has a twin behind it
   (.prov-back) in the same grid cell, carrying the highlight and the underline; app.js copies the
   field's type and padding onto it, so the two sets of words lie exactly on top of one another. */
.prov-note { margin: 0 0 16px; padding: 12px 16px; border-radius: 12px; background: var(--paper, transparent); border: 1px solid var(--edge); line-height: 1.6; }
.prov-note p { margin: 0; }
.prov-note p + p { margin-top: 4px; }
.prov-score { display: inline-block; margin-left: 6px; font-size: 12.5px; font-weight: 600; color: var(--olive-ink); background: var(--olive-soft); border-radius: var(--pill); padding: 1px 10px; white-space: nowrap; }
.pv-src { background: var(--olive-soft); color: inherit; border-radius: 3px; padding: 1px 0; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.pv-ai { text-decoration: underline wavy var(--terra); text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-skip-ink: none; }
.prov-back { box-sizing: border-box; min-width: 0; align-self: center; border: 0 solid transparent; color: transparent; pointer-events: none; user-select: none; -webkit-user-select: none; overflow: hidden; }
.prov-back-area { align-self: start; white-space: pre-wrap; overflow-wrap: break-word; }
.prov-back-line { display: flex; align-items: center; white-space: pre; }
.prov-back .pv-src { color: transparent; padding: 2px 0; }
.prov-back .pv-ai { color: transparent; }
.prov-field:not(#_) { position: relative; z-index: 1; background-color: transparent; }

/* ---- v0.20.1: the photos picked for one recipe, added to one at a time ---- */
.image-tray { list-style: none; margin: 12px 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.tray-item { position: relative; width: 84px; height: 112px; border-radius: 10px; overflow: hidden; border: 1px solid var(--edge); background: var(--terra-soft); }
.tray-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tray-num { position: absolute; left: 6px; bottom: 6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--pill); background: rgba(0,0,0,.62); color: #fff; font-size: 12px; font-weight: 600; line-height: 20px; text-align: center; }
.tray-remove { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(0,0,0,.62); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.tray-remove:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
#image-more { margin-bottom: 6px; }

/* ---- v0.21: several photos in one post under "From our kitchen" ---- */
.gallery-post { position: relative; container-type: inline-size; }
.gallery-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.gallery-strip::-webkit-scrollbar { display: none; }
.gallery-strip > a { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.gallery-strip:focus-visible { outline: 2px solid var(--terra); outline-offset: -2px; }
.gallery-pos { position: absolute; top: 8px; right: 8px; padding: 2px 9px; border-radius: var(--pill); background: rgba(0,0,0,.62); color: #fff; font-size: 12px; font-weight: 600; pointer-events: none; }
.gallery-picks { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.gallery-picks:not(:has(> :not([hidden]))) { display: none; }
.gallery-tray { margin: 0; }
.gallery-form .field .muted { display: block; margin-top: 4px; }
.gallery-arrow { position: absolute; top: 60px; top: calc(37.5cqw - 15px); /* half way down a 4:3 picture as wide as the post */ width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; display: none; align-items: center; justify-content: center; padding: 0 0 2px; }
.gallery-prev { left: 8px; }
.gallery-next { right: 8px; }
@media (hover: hover) and (pointer: fine) { .gallery-arrow { display: flex; } }

/* ---- v0.21.1: reordering under a finger ---- */
.grip { position: relative; align-items: center; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.grip:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; border-radius: 6px; }
/* the handle sits level with what it moves: the step's number, the ingredient's amount. In the step grid
   everything hangs from the top, so the handle is given the number's own line box and centres in that. */
.step-grid > .grip { align-self: start; font-size: 18px; line-height: 1.6; height: 1.6em; }
.dragging { position: relative; z-index: 5; transition: none; cursor: grabbing; }
.dragging .grip { color: var(--terra); cursor: grabbing; }
.step-rows.sorting textarea, #step-rows.sorting textarea { height: 52px !important; }
.step-rows.sorting .prov-back, #step-rows.sorting .prov-back { height: 52px !important; }
.is-sorting, .is-sorting body { -webkit-user-select: none; user-select: none; overscroll-behavior: contain; }
@media (pointer: coarse), (max-width: 760px) {
  /* a thumb-sized target around a small icon, without moving the icon */
  .ed-grid > .grip::before { content: ""; position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; transform: translate(-50%, -50%); }
  .ed-grid > .grip svg { width: 18px; height: 18px; }
}
@media (max-width: 760px) {
  /* on a phone a line is two rows (amount and name, then the pills). The handle spanned both and so floated
     between them; it belongs on the first, beside the amount or the number. */
  .ed-grid > .grip { grid-area: auto; grid-row: 1; grid-column: 1; }
}

/* ---- v0.22: rewording your own note or caption, in place ---- */
.edit-own { margin-top: 4px; }
.edit-own > summary { display: inline-block; list-style: none; cursor: pointer; font-size: 12.5px; }
.edit-own > summary::-webkit-details-marker { display: none; }
.edit-own[open] > summary { color: var(--muted); }
.edit-own .note-form { margin-top: 8px; gap: 8px; }
.edit-own input[type=text] { width: 100%; }

/* ---- v0.23: a line made with another recipe (the sauce, the filling, the dough) ---- */
/* the editor */
.ed-grid { grid-template-columns: 20px 96px minmax(0, 1fr) 30px 30px 112px; }
.ed-grid.step-grid { grid-template-columns: 20px 32px minmax(0, 1fr) 30px 30px 84px; }
.link-btn { width: 26px; height: 26px; color: var(--muted); }
.link-btn.on { color: var(--terra); }
.ing-linkbox { grid-column: 3 / -1; margin: -2px 0 4px; }
.link-chip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 4px 10px; border-radius: 10px; background: var(--olive-soft); color: var(--olive-ink); font-size: 12.5px; line-height: 1.4; }
.link-chip svg { flex: none; }
.link-chip .linklike { font-size: 12.5px; }
.link-ask { background: var(--terra-soft); color: var(--terra-ink); }
.link-ask > span { flex: 1 1 160px; min-width: 0; }  /* the question shares a line with its icon; the two answers wrap under it */
.link-picker-search { padding: 0 20px 10px; }
.link-picker-search input { width: 100%; }
.link-picker-rows { padding-bottom: 6px; }
.link-pick { display: block; width: 100%; text-align: left; padding: 10px 8px; border: 0; border-bottom: 1px solid var(--rule); background: none; font: inherit; font-size: 15px; color: inherit; cursor: pointer; border-radius: 6px; }
.link-pick:hover, .link-pick:focus-visible { background: var(--terra-soft); outline: none; }
.link-picker-hint { padding: 8px 20px 16px; }
@media (max-width: 760px) {
  .ed-grid, .ed-grid.step-grid { grid-template-columns: 18px 92px 64px minmax(0, 1fr); }
  .ing-linkbox { grid-column: 2 / -1; }
}
/* the recipe page */
.ing-link { color: inherit; text-decoration: underline; text-decoration-color: var(--terra); text-underline-offset: 3px; }
.ing-link .ico { width: 13px; height: 13px; margin-left: 4px; vertical-align: -1px; color: var(--terra); }
.ing-component { list-style: none; margin: 2px 0 10px 34px; }
.component { border: 1px solid var(--edge); border-left: 3px solid var(--olive); border-radius: 10px; background: var(--paper, transparent); }
.component > summary { cursor: pointer; list-style: none; padding: 8px 12px; font-size: 13.5px; font-weight: 600; color: var(--olive-ink); }
.component > summary::-webkit-details-marker { display: none; }
.component > summary .muted { font-weight: 400; margin-left: 4px; }
.component:not([open]) .component-hide, .component[open] .component-show { display: none; }
.component-body { padding: 2px 14px 12px; font-size: 14px; line-height: 1.55; }
.component-ings, .component-steps { margin: 8px 0 10px; padding: 0; list-style: none; }
.component-ings li { padding: 0; }
.component-ings li .ing { font-size: inherit; }
.component-ings .ing-group { margin-top: 8px; }
.component-steps { counter-reset: comp; }
.component-steps li { counter-increment: comp; position: relative; padding: 4px 0 4px 26px; }
.component-steps li::before { content: counter(comp); position: absolute; left: 0; top: 4px; font-weight: 600; color: var(--olive-ink); }
.component-steps .comp-pot { display: block; }
.used-in { margin-top: 36px; }
.used-in-list { display: flex; flex-wrap: wrap; gap: 12px; }
.used-in-item { display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border: 1px solid var(--edge); border-radius: 12px; background: var(--card); color: inherit; text-decoration: none; font-size: 14px; font-weight: 600; }
.used-in-item:hover { border-color: var(--terra); }
.used-in-item img, .used-in-blank { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex: none; }
.used-in-blank { display: flex; align-items: center; justify-content: center; background: var(--olive-soft); color: var(--olive-ink); }
.used-in-badge { display: inline-flex; align-items: center; gap: 4px; color: var(--olive-ink); }
@media (max-width: 760px) { .ing-component { margin-left: 0; } .component-body { font-size: 15.5px; } }

/* ---- v0.24: photos open in a viewer on the page, with the way out always in reach ---- */
.photo-view { width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(15,10,11,.94); color: #fff; overflow: hidden; }
.photo-view[open] { display: flex; align-items: center; justify-content: center; }
.photo-view::backdrop { background: rgba(15,10,11,.94); }
.photo-view img { max-width: 100vw; max-height: calc(100dvh - 120px); object-fit: contain; display: block; }
.photo-view-close { position: fixed; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; z-index: 2; }
.photo-view-close:hover, .photo-view-close:focus-visible { background: rgba(255,255,255,.3); outline: none; }
.photo-view-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 44px; height: 64px; border: 0; border-radius: 12px; background: rgba(255,255,255,.14); color: #fff; font-size: 30px; cursor: pointer; z-index: 2; }
.photo-view-prev { left: max(8px, env(safe-area-inset-left)); }
.photo-view-next { right: max(8px, env(safe-area-inset-right)); }
.photo-view-foot { position: fixed; left: 0; right: 0; bottom: max(14px, env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: center; gap: 16px; font-size: 14px; z-index: 2; }
.photo-view-foot .btn { color: #fff; border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.08); }
.photo-open, .photo-open body { overflow: hidden; }
.voice-upload { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--rule); }

/* ---- v0.25.1: the admin's connections, one block per service ---- */
.svc { padding: 14px 0; border-top: 1px solid var(--rule); }
.svc:first-of-type { border-top: 0; padding-top: 4px; }
.svc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.svc-head h3 { margin: 0; font-size: 16px; }
.svc-head form { margin-left: auto; }
.svc-state { font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: var(--pill); background: var(--terra-soft); color: var(--terra-ink); }
.svc-state.on { background: var(--olive-soft); color: var(--olive-ink); }
.svc-queue { margin: 8px 0 0; }
.svc-when { margin: 8px 0 0; }
.svc-when + .svc-lines { margin-top: 4px; }
.svc-lines { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.45; }
.svc-lines li { display: flex; gap: 8px; align-items: baseline; padding: 6px 10px; border-radius: 8px; background: var(--olive-soft); color: var(--olive-ink); overflow-wrap: anywhere; }
.svc-lines li.bad { background: var(--terra-soft); color: var(--terra-ink); }
.svc-lines li.wait { background: transparent; border: 1px solid var(--rule); color: inherit; }
.svc-lines code { flex: none; font-weight: 600; }
/* a busy label longer than the button's room wraps inside it and never runs off the card */
.btn-extract { max-width: 100%; white-space: normal; text-align: center; }

/* ---- v0.26: where an uploaded voice memo has got to ---- */
.upbar { position: relative; height: 34px; border-radius: var(--pill); background: var(--terra-soft); overflow: hidden; margin: 4px 0 12px; }
.upbar-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--olive-soft); transition: width .2s linear; }
.upbar span { position: relative; display: block; text-align: center; line-height: 34px; font-size: 13.5px; font-weight: 600; color: var(--head); }
.track { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.track li { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 15px; }
.track-dot { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2px solid var(--edge); box-sizing: border-box; }
.track li.done { color: var(--head); }
.track li.done .track-dot { border-color: var(--olive); background: var(--olive); box-shadow: inset 0 0 0 3px var(--card); }
.track li.now { color: var(--head); font-weight: 600; }
.track li.now .track-dot { border-color: var(--terra-soft); border-top-color: var(--terra); animation: mk-spin 1s linear infinite; }
.track li.held { color: var(--terra-ink); font-weight: 600; }
.track li.held .track-dot { border-color: var(--terra); border-style: dashed; }
.track-clock { margin: 0; }
@media (prefers-reduced-motion: reduce) { .track li.now .track-dot { animation: none; border-color: var(--terra); } }

/* ---- v0.26.1: a drag that lasts until you let go, with the landing place shown ---- */
.ing-rows, .step-rows, #ing-rows, #step-rows { position: relative; }
.drop-slot { position: absolute; box-sizing: border-box; border: 2px dashed var(--olive); border-radius: 12px; background: var(--olive-soft); opacity: .55; pointer-events: none; z-index: 1; }
.sorting > :not(.dragging):not(.drop-slot) { transition: transform .14s ease; }
.dragging { transition: none !important; }
/* a group heading is a line like any other: handle, name, remove */
.ing-row-group { grid-template-columns: 20px 1fr 28px; }
.ing-row-group > .grip { grid-area: auto; align-self: center; }
@media (max-width: 760px) { .ing-row-group { grid-template-columns: 18px 1fr 28px; } }
@media (prefers-reduced-motion: reduce) { .sorting > :not(.dragging):not(.drop-slot) { transition: none; } }

/* ---- v0.27: a real recording on the page ---- */
.voice-cancel { display: block; margin: 8px auto 0; }
.voice-btn.on #voice-btn-label { font-variant-numeric: tabular-nums; }

/* ---- v0.29: scaling, and photos pinned to a step ---- */
.scale { display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; }
.scale .pill { padding: 2px 10px; line-height: 1.4; cursor: pointer; }
.scale input { width: 52px; padding: 3px 6px; text-align: center; font-family: var(--mono); font-size: 13px; }
.scaled .conv { display: none; }
.ing-qty[data-n] { cursor: pointer; }
.step-shots { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; margin: 6px 0 0 56px; }
.step-shots img { width: 88px; height: 66px; object-fit: cover; border-radius: 8px; border: 1px solid var(--edge); display: block; }
.steps li { flex-wrap: wrap; }
.steps li > p { flex: 1 1 0; min-width: 0; }   /* so the text keeps its place beside the number and only the photos wrap under */
.step-shots { flex-basis: 100%; }
@media (max-width: 760px) { .step-shots { margin-left: 0; } .scale input { font-size: 16px; width: 60px; } }

/* ---- v0.30: the admin's log of requests ---- */
.api-log { width: 100%; border-collapse: collapse; font-size: 12.5px; line-height: 1.4; margin-top: 6px; }
.api-log td { padding: 5px 8px 5px 0; border-top: 1px solid var(--rule); vertical-align: top; }
.api-log td:last-child { overflow-wrap: anywhere; }
.api-log tr.bad code { color: var(--terra-ink); }
.api-log tr.ok code { color: var(--olive-ink); }
@media (max-width: 760px) { .api-log, .api-log tr, .api-log td { display: block; } .api-log td { border: 0; padding: 0 0 2px; } .api-log tr { padding: 8px 0; border-top: 1px solid var(--rule); } }

/* ---- v0.30.1: a step for each photo ---- */
.tray-item.with-step { height: auto; display: flex; flex-direction: column; width: 120px; }
.tray-item.with-step img { height: 90px; }
.tray-item.with-step .tray-num { top: 6px; bottom: auto; }
.tray-item.with-step select { width: 100%; font-size: 12px; padding: 4px 4px; border: 0; border-top: 1px solid var(--edge); border-radius: 0; background: var(--card); }
.step-pick { display: inline-flex; align-items: center; gap: 4px; }
.step-pick select { max-width: 150px; font-size: 12.5px; padding: 2px 4px; }

/* ---- v0.31: the design pass ---- */
/* 1. the rarer actions fold under More */
.more-actions { display: contents; }
.more-actions > summary { list-style: none; cursor: pointer; }
.more-actions > summary::-webkit-details-marker { display: none; }
.more-actions > summary .ico { margin-left: 2px; transition: transform .15s; }
.more-actions[open] > summary .ico { transform: rotate(180deg); }
.more-actions:not([open]) > .more-list { display: none; }
.more-list { flex-basis: 100%; }
/* 3, 4. ingredients: the scale beside the title, one even height; hint and pills on the next line */
#ing-card .section-head { flex-wrap: nowrap; align-items: center; margin-bottom: 8px; }
.scale { margin-right: 0; }
.scale .pill, .scale input { height: 30px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; line-height: 28px; }
.ing-sub { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.ing-sub .ing-view-switch { margin: 0; }
.ing-sub .ing-tools { margin-left: auto; }
/* 5. the step chooser on its own line, wide enough to read */
.step-pick { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.step-pick label { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; }
.step-pick select { flex: 1 1 auto; max-width: 220px; height: 34px; font-size: 14px; padding: 0 30px 0 10px; }
/* 10. the footer line, readable */
footer .copyright { font-size: 12.5px; opacity: 1; color: var(--muted); }
/* lists: square mosaics, so a tile takes less room and reads as four photos */
.list-mosaic { aspect-ratio: 1; }
@media (max-width: 760px) {
  .list-tile { flex-direction: row; align-items: stretch; }
  .list-mosaic { width: 104px; flex: none; aspect-ratio: auto; }
  .list-mosaic.none { min-height: 104px; }
  .list-tile-body { justify-content: center; padding: 12px 14px; }
}
@media (max-width: 760px) {
  /* four actions share the one row: Edit, Share, Print, More */
  .actions > .btn, .actions > details > summary { flex: 1 1 0; justify-content: center; padding-left: 8px; padding-right: 8px; }
  .more-list > * { flex: 1 1 0; justify-content: center; }
  .more-list form { display: contents; }
  /* the tick boxes say it themselves; the hint only wrapped to a line of its own */
  .ing-sub .ing-tools .muted { display: none; }
}
/* square tiles are small tiles: more of them to a row on a wide screen */
@media (min-width: 761px) { .list-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; } .list-tile-body { padding: 12px 14px 14px; } .list-tile-name { font-size: var(--fs-md, 16px); } }