/* The logo's own lettering font. It only contains A B C D E G I L N O R U, the digits 0 2 5 and a hyphen,
   so it is used for the business name in the menu bar (set in capitals) and nowhere else. */
@font-face { font-family:'Celadon'; src:url("../fonts/celadon.6ec7518d5f7a.woff2") format('woff2'); font-weight:400; font-style:normal; font-display:swap; }

:root {
  /* Brand palette (downloads/branding/colors_ref.md) */
  --title-green:#3f5f55; --text-green:#5e8e7e; --sub-text-green:#7faf9c;
  --border-gold-1:#b29f6d; --border-gold-2:#c2a869; --background-green-1:#d7eee6; --background-green-2:#eefff9; --background-green-3:#bff5de;
  --logo-background-green:#bed5cd;
  --category-background-1:#a9c8bd; --category-background-2:#8faea3; --category-background-3:#cbe1d9;
  --beige-1:#eae2d6; --beige-2:#f4efe6; --beige-3:#fcf8ef;
  /* Roles assigned so far: title, text and background */
  --title:var(--title-green); --fg:var(--text-green); --bg:var(--background-green-2);
  /* Section title cards: a tinted card with a thick gold bar down its left edge */
  --section-bg:var(--sub-text-green); --section-bar:var(--border-gold-2);
  /* The heading text on those cards is light now that the card is the stronger green */
  --section-text:var(--background-green-2);
  /* Category titles (the Extras heading on a baking day): a softer green than the page and section titles, with the
     darkest brand green for the text on it */
  --category-bg:var(--background-green-1); --category-text:var(--title-green);
  /* The outline round today's box on the calendar */
  --today-outline:var(--title-green);
  /* How far a title card sticks out past the content on each side */
  --title-overhang:.75rem;
  /* Small secondary text under a title (the pickup and order-by line on a baking day card) */
  --meta-text:var(--sub-text-green);
  /* Baking day card: the title band, and the pickup row under it (the menu stays on the plain card color) */
  --day-title-bg:var(--beige-2); --day-bg:var(--beige-3);
  /* Something that is closed or inactive: a plain neutral grey, deliberately outside the brand palette (4.6:1 for the text) */
  --disabled-bg:#efefef; --disabled-text:#6b6b6b;
  /* A baking day that is not taking orders: a light red background with a dark red text (5.5:1), used by the
     "Closed" badge, the closed cells on the calendar and the "orders are closed" label on the day page */
  --closed-bg:#f6dcdc; --closed-text:#a33;
  /* Buttons and highlights: the pale green the title cards used to have (the two swapped colors), with the darkest
     brand green for the text on it. The hover is the palest green. Solid buttons get a thin outline (see .btn). */
  --btn-bg:var(--background-green-1); --btn-bg-hover:var(--background-green-3); --btn-text:var(--title-green);
  /* Not assigned from the palette yet */
  --muted:#7a6a5a; --accent:#a8602b; --line:#e4d9c8; --card:#fefffe;   /* a cool near-white with a hint of celadon, lighter than the minty page background */
  /* Menu item hover: the menu brown, about 4% lighter */
  --accent-hover:#b86a2f;
  /* The outline of the input fields: the brand text green (3.6:1 on the card color). The browsers draw their own when none is set, and iOS draws a very pale one. */
  --field-border:var(--text-green);
}
* { box-sizing: border-box; }
body { margin:0; font:16px/1.5 system-ui, sans-serif; background:var(--bg); color:var(--fg);
  min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }   /* the footer stays at the bottom of short pages */
body > main { flex:1 0 auto; width:100%; }
h1, h2, h3 { color:var(--title); }
/* Title cards, for page headings (.page-title) and section headings (.section-title) alike:
   a tinted card with a thin accent bar down its left edge. */
.section-title, .page-title {
  background:var(--section-bg); border-left:.25rem solid var(--section-bar); border-radius:8px; }
/* The title cards reach a little past the content on both sides (negative side margins). The overhang must stay
   smaller than the page's side padding (1rem), or it would cause a sideways scrollbar. */
.section-title { border-radius:12px; display:block; margin:2rem calc(-1 * var(--title-overhang)) 1rem; padding:.55rem 1rem .55rem .9rem; font-size:clamp(1.15rem, 4.8vw, 1.35rem); line-height:1.3; }
.page-title { margin:0 calc(-1 * var(--title-overhang)) 1.25rem; padding:.65rem 1rem .65rem .9rem; border:1px solid var(--text-green); border-left:.25rem solid var(--section-bar); }   /* a thin border all round, the gold bar stays on the left */
h1.page-title, .page-title h1 { font-size:clamp(1.4rem, 5.6vw, 1.7rem); line-height:1.25; }
.page-title h1 { margin:0; }   /* h1.page-title is the card itself: it keeps the card margins above */
.section-title, .page-title, .page-title h1 { color:var(--section-text); }
/* A page heading with buttons: the whole row is the card, the buttons sit inside it on the right. */
.page-head.page-title, .cal-head.page-title { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.category-title, .sub-title { background:var(--category-bg); color:var(--category-text); border:1px solid var(--sub-text-green); border-left:.25rem solid var(--sub-text-green); box-shadow:none; }   /* after the rules it overrides */
.section-title a, .cart-day-title a, .day-link { color:inherit; text-decoration:none; }
.section-title .muted, .section-title .tag, .cart-day-title .tag { font-size:.85rem; vertical-align:middle; }
.section-title .muted { color:inherit; opacity:.85; }   /* the gray "order #…" note would clash on the green */
a { color:var(--accent); }
/* Every input field, select and text area gets the same outline, on every browser. :where() keeps this at the lowest specificity, so the rules for a
   particular field (the search bars, the quantity boxes) can still change it. */
:where(input:not([type=checkbox], [type=radio], [type=file], [type=range], [type=color], [type=submit], [type=button], [type=hidden]), select, textarea) {
  border:1px solid var(--field-border); border-radius:6px; background:var(--card); color:var(--title-green);
}
:where(input:not([type=checkbox], [type=radio], [type=file], [type=range], [type=color], [type=submit], [type=button], [type=hidden]), textarea) { -webkit-appearance:none; appearance:none; }   /* iOS adds its own inner shadow and rounding */
/* The top bar. Desktop, left to right: the name, the main links (they take the free space, which pushes what follows
   to the right), the cart, then the user menu. .site-menu is only a wrapper there (display:contents), so its two
   children are laid out by the bar itself and `order` can put the cart between them. */
.topbar { display:flex; align-items:center; gap:1.25rem; padding:.75rem 1.25rem; background:var(--card); border-bottom:1px solid var(--line); position:relative; }
.site-menu { display:contents; }
.main-nav { order:1; display:flex; gap:.3rem; align-items:center; margin-right:auto; }
.cart-link { order:2; position:relative; display:inline-flex; align-items:center; justify-content:center; color:var(--text-green); }
.user-menu { order:3; display:flex; gap:1rem; align-items:center; }
.main-nav a, .cart-link, .user-menu > a, .user-dropdown summary { padding:.35rem .7rem; border-radius:6px; text-decoration:none; transition:color .15s, background-color .15s; }
.main-nav a:hover, .main-nav a:focus-visible, .cart-link:hover, .cart-link:focus-visible, .user-menu > a:hover, .user-menu > a:focus-visible, .user-dropdown summary:hover, .user-dropdown[open] summary { background:var(--background-green-1); }
.topbar nav a:hover, .topbar nav a:focus-visible,
.topbar .user-menu > a:hover, .topbar .user-menu > a:focus-visible, .user-dropdown summary:hover { color:var(--accent-hover); }
.topbar [aria-current="page"] { font-weight:600; }
/* The user dropdown: a <details> element, so it works with the keyboard and without JavaScript */
.user-dropdown { position:relative; }
.user-dropdown summary { cursor:pointer; white-space:nowrap; list-style:none; color:var(--accent); }
.user-dropdown summary::-webkit-details-marker { display:none; }
.user-icon { display:none; width:1.4rem; height:1.4rem; vertical-align:middle; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }   /* shown instead of the name on a phone */
.user-name { display:inline-block; max-width:12rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; }   /* a very long first name is cut with … */
.user-dropdown summary::after { content:' \25BE'; text-decoration:none; display:inline-block; }
.dropdown-panel { position:absolute; right:0; top:calc(100% + .6rem); min-width:13rem; z-index:20; display:flex; flex-direction:column; padding:.35rem;
  background:var(--card); border:1px solid var(--line); border-radius:8px; box-shadow:0 4px 14px rgba(63,95,85,.18); }
.dropdown-panel form { margin:0; }
.dropdown-panel a, .dropdown-panel .menu-item { display:block; width:100%; padding:.5rem .75rem; border:0; border-radius:6px; background:none; font:inherit; text-align:left; text-decoration:none; color:var(--title-green); cursor:pointer; }
.dropdown-panel a:hover, .dropdown-panel a:focus-visible, .dropdown-panel .menu-item:hover, .dropdown-panel .menu-item:focus-visible { background:var(--background-green-1); }
.menu-sep { border:0; border-top:1px solid var(--line); margin:.3rem .2rem; }
/* The List | Calendar tabs at the top of the two baking day pages, full width */
.view-switch { display:flex; margin:0 0 1rem; }
.view-switch .btn, .day-checkout .btn { flex:1; text-align:center; }
.view-switch .btn { border-radius:0; }
.view-switch .btn:first-child { border-radius:6px 0 0 6px; }
.view-switch .btn:last-child { border-radius:0 6px 6px 0; }
.view-switch .btn.active { background:var(--sub-text-green); color:var(--title-green); cursor:default; }   /* the page you are on: not a link */
/* Capitals only: that is all the Celadon font has, and lowercase letters would fall back to another font.
   Weight 400 on purpose: the font has no bold, so asking for bold would make the browser fake it. */
.brand { font-family:'Celadon', Georgia, 'Times New Roman', serif; font-weight:400; font-size:1.05rem; letter-spacing:.02em; word-spacing:.15em; text-transform:uppercase; text-decoration:none; color:var(--title);
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.25rem .7rem .25rem .3rem; margin-left:-.3rem; border-radius:10px; transition:background-color .15s; }
.brand-mark { display:block; width:2.5rem; height:2.5rem; border-radius:8px; }   /* the favicon's mark: the C in its wreath */
/* Like the other menu items, the mark and name get the palest green behind them on hover. The padding is taken back with a negative margin so nothing moves. */
.brand:hover, .brand:focus-visible { background:var(--background-green-1); }
@media (min-width:481px) { .brand { white-space:nowrap; flex:none; } }   /* the name stays on one line; on a small phone it may wrap */
.container { max-width:60rem; margin:0 auto; padding:1.5rem 1rem; }
.inline { display:inline; margin:0; }
.linklike { background:none; border:0; padding:0; font:inherit; color:var(--accent); cursor:pointer; text-decoration:underline; }
.btn { display:inline-block; padding:.5rem 1rem; background:var(--btn-bg); color:var(--btn-text); border:0; border-radius:6px; font:inherit; font-weight:600; text-decoration:none; cursor:pointer; transition:background-color .15s;
  box-shadow:inset 0 0 0 1px var(--sub-text-green); }   /* the pale button color is only 1.2:1 against the page, so it needs an edge */
.btn:hover { background:var(--btn-bg-hover); }
.btn:focus-visible { outline:2px solid var(--title-green); outline-offset:2px; }
/* The outline is an inset shadow, not a border, so outline and solid buttons are exactly the same size. */
.btn.ghost { background:transparent; box-shadow:inset 0 0 0 1px var(--text-green); }
.btn.ghost:hover { background:var(--btn-bg); }
/* Every button inside a page title card looks the same, like "Add product": the standard solid button, even when
   a template marks it as an outline (ghost) one, which would look dark and faint on the green card. */
.page-title .btn.ghost { background:var(--btn-bg); box-shadow:inset 0 0 0 1px var(--sub-text-green); }
.page-title .btn.ghost:hover { background:var(--btn-bg-hover); }
.btn.danger { background:#a33; color:#fff; box-shadow:none; }
.btn.danger:hover { background:#b84444; }
.msg { padding:.6rem 1rem; border-radius:6px; background:#e6f2e6; margin-bottom:1rem; }
.msg.error { background:#f6dcdc; }
.msg.toast { position:fixed; left:50%; bottom:1.5rem; transform:translateX(-50%); z-index:1000; margin:0; box-shadow:0 2px 10px rgba(0,0,0,.25); }
.toast-hidden { display:none; }
.cal-head h1 { text-transform:capitalize; }
.cal-grid { display:grid; grid-template-columns:repeat(7, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.cal-dow { background:var(--card); padding:.4rem; text-align:center; font-weight:600; color:var(--muted); }
.cal-cell { background:var(--card); min-height:5.5rem; padding:.3rem; transition:box-shadow .12s, background-color .12s; }
.cal-cell.out { background:#f3eee5; color:var(--muted); }
.cal-cell.today .cal-num { background:var(--btn-bg); color:var(--btn-text); font-weight:600; box-shadow:inset 0 0 0 1px var(--sub-text-green); border-radius:50%; display:inline-block; width:1.6rem; text-align:center; }
.cal-cell.baking { background:var(--closed-bg); position:relative; }             /* a baking day that is closed: the light red of the "Closed" badge */
.cal-cell.baking.open { background:var(--background-green-2); } /* one that is taking orders */
/* Today: the whole box is outlined, not just the date number */
.cal-cell.today { box-shadow:inset 0 0 0 2px var(--today-outline); }
/* Staff: an empty day from today onward is one big "add" target. The button's ::after covers the cell, so a click
   anywhere in the cell works; its label shows on hover or keyboard focus, and always on touch screens. */
.cal-cell.can-add { position:relative; }
.cal-add { position:static; display:block; width:100%; margin-top:.4rem; padding:.2rem .4rem; font:inherit; font-size:.8rem; background:none; border:1px dashed var(--border-gold-1); border-radius:6px; color:var(--title-green); cursor:pointer; opacity:0; transition:opacity .12s; }
.cal-add::after { content:''; position:absolute; inset:0; }
.cal-cell:hover .cal-add, .cal-add:focus-visible { opacity:1; }
.cal-cell.can-add:hover { background:var(--beige-3); }
/* Hover: only the cells that do something react (a baking day opens its page, an empty day lets staff add one).
   A past or out-of-month empty day does nothing, so it stays still. The edge is the gold accent, and on today's
   cell it sits inside the dark today ring so both stay visible. */
.cal-cell.baking:hover, .cal-cell.can-add:hover { box-shadow:inset 0 0 0 2px var(--section-bar); cursor:pointer; }
.cal-cell.today.baking:hover, .cal-cell.today.can-add:hover { box-shadow:inset 0 0 0 2px var(--today-outline), inset 0 0 0 4px var(--section-bar); }
.cal-link::after { content:''; position:absolute; inset:0; }            /* the link covers the whole baking day cell */
.cal-link:focus-visible { outline:none; }
.cal-link:focus-visible::after { outline:2px solid var(--title-green); outline-offset:-2px; }
@media (hover:none) { .cal-add { opacity:1; } }
.cal-link { display:block; margin-top:.2rem; text-decoration:none; color:inherit; font-size:.85rem; }
.search-bar { margin:0 0 1rem; }
.search-bar-field { position:relative; }
.search-bar input { width:100%; box-sizing:border-box; height:40px; padding:0 2.4rem 0 .8rem; font:inherit; border:1px solid var(--field-border); border-radius:6px; background:var(--card); color:var(--title-green); }
.search-bar input::-webkit-search-cancel-button { display:none; }   /* we have our own clear button */
.search-bar-clear { position:absolute; top:0; right:0; width:40px; height:40px; border:0; background:none; font-size:1.4rem; line-height:1; color:var(--title-green); cursor:pointer; }
.search-bar-clear[hidden] { display:none; }
.search-bar-count { margin:.3rem 0 0; min-height:1.2em; font-size:.85rem; }
/* Days without the product: gone from the list; in the calendar grid the cell stays (the grid needs it) but shows only its date */
.day.no-match, .card.no-match { display:none; }
.cal-cell.baking.no-match, .cal-cell.no-match { background:var(--card); cursor:default; }
.cal-cell.baking.no-match:hover, .cal-cell.can-add.no-match:hover { box-shadow:none; }
.cal-cell.no-match .cal-link, .cal-cell.no-match .cal-add { visibility:hidden; pointer-events:none; }
.cal-label { display:block; font-weight:600; color:var(--title-green); }
.cal-count { display:block; font-size:.8rem; color:var(--muted); }
/* The tag sets its own text color: inside a title card it would otherwise inherit the heading's light text,
   which is unreadable on the tag's pale pill. */
.tag { display:inline-block; font-size:.7rem; padding:0 .4rem; border-radius:99px; background:#d9ecd0; color:var(--title-green); }
.tag.closed { background:#eee; color:var(--muted); }
.tag.closed-day { background:var(--closed-bg); color:var(--closed-text); }
/* Text for screen readers only: it takes no space and shows nothing */
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(14rem, 1fr)); gap:1rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:1rem; }
/* The empty card at the end of the products grid (staff only) that adds a product */
.card-add { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem; min-height:12rem; font:inherit; font-weight:600; color:var(--title-green); background:none; border:2px dashed var(--border-gold-1); cursor:pointer; transition:background-color .15s, border-color .15s; }
.card-add-plus { font-size:3rem; line-height:1; }
.card-add:hover, .card-add:focus-visible { background:var(--background-green-1); border-color:var(--border-gold-2); }
.card img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:6px; }
.price { font-weight:700; }
.empty-state { text-align:center; padding:2rem 1rem; }   /* a short message and one button, like an empty bag */
.empty-state p:first-child { margin-top:0; font-size:1.1rem; }
.empty-state p:last-child { margin-bottom:0; }
.note { background:#fff8e8; padding:.6rem 1rem; border-left:4px solid var(--section-bar); }
table.list { width:100%; border-collapse:collapse; background:var(--card); }
table.list th, table.list td { text-align:left; padding:.5rem; border-bottom:1px solid var(--line); }
.form div { margin-bottom:.8rem; }
.form label { display:block; font-weight:600; }
.form input[type=text], .form input[type=url], .form input[type=email], .form input[type=number], .form input[type=date], .form input[type=time],
.form input[type=datetime-local], .form input[type=password], .form select, .form textarea { width:100%; max-width:28rem; padding:.4rem; font:inherit; }
.form .helptext { display:block; color:var(--muted); font-size:.85rem; }
.form .errorlist { color:#a33; margin:0; padding-left:1rem; }
/* Justified gallery: rows of equal height built from each photo's aspect ratio (--r), no JS. */
.jg { --row-h: clamp(100px, 32vw, 220px); display:flex; flex-wrap:wrap; gap:6px; }
.jg::after { content:''; flex-grow:1000000; }
.jg-item { position:relative; flex-grow:calc(var(--r) * 100); flex-basis:calc(var(--r) * var(--row-h)); }
.jg-item a { display:block; position:relative; }
.jg-item a::before { content:''; display:block; padding-bottom:calc(100% / var(--r)); }
.jg-item img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:var(--line); }
.jg-caption { position:absolute; inset:auto 0 0 0; padding:1.6rem .8rem .5rem; color:#eee; font-size:.9rem; opacity:0; transition:opacity .15s;
  background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.7)); }
.jg-item a:hover .jg-caption, .jg-item a:focus-visible .jg-caption { opacity:1; }
.jg-edit { position:absolute; top:.4rem; right:.4rem; font-size:.8rem; padding:.1rem .5rem; border:0; border-radius:4px; background:rgba(255,255,255,.9); cursor:pointer; }
.dropzone { border:2px dashed var(--line); border-radius:10px; padding:1rem 1.25rem; margin-bottom:1.25rem; text-align:center; background:var(--card); cursor:pointer; }
.dropzone.highlight { border-color:var(--section-bar); background:#fff8e8; }
.dropzone p { margin:.2rem 0; }
.upload-list { list-style:none; margin:.5rem 0 0; padding:0; text-align:left; font-size:.9rem; }
.upload-list .error { color:#a33; }
.edit-preview { max-width:100%; max-height:14rem; border-radius:6px; display:block; margin-bottom:1rem; }
.tag.ordered { background:var(--title-green); color:var(--section-text); }
.cal-ordered { display:block; font-size:.8rem; font-weight:600; color:var(--title-green); }
.my-order p { margin:.3rem 0; }
.my-order ul { margin:.2rem 0; padding-left:1.2rem; }
.my-order-total { margin-left:auto; font-weight:600; }
.my-order-head { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.in-cart { margin:.2rem 0; font-size:.9rem; color:var(--title-green); }
.add-form { display:flex; gap:.4rem; align-items:center; }
.add-form input[type=number] { width:4.5rem; padding:.25rem; font:inherit; }
.totals { margin:1rem 0 1rem auto; min-width:16rem; border-collapse:collapse; }
.totals td { padding:.25rem .5rem; }
.totals td:last-child { text-align:right; }
.totals .grand td { font-weight:700; border-top:1px solid var(--line); }
.error-text { color:#a33; font-size:.9rem; }
table.narrow { width:auto; min-width:16rem; }
tr.cancelled { opacity:.5; }
.row-actions form { display:inline; }
.row-actions { white-space:nowrap; }
.test-payment { border:2px dashed var(--section-bar); border-radius:10px; padding:.5rem 1.25rem 1rem; margin:1.5rem 0; background:#fff8e8; }
.head-actions { display:flex; align-items:center; gap:.75rem; }
/* baking day title: on a phone the year drops to a second line so the title and the buttons stay side by side */
@media (max-width:600px) {
  .day-page-head { flex-wrap:wrap; gap:.6rem; }
  .day-page-head h1 { flex:1 1 0; min-width:0; }       /* takes what is left, so the arrows stay beside it */
  .day-page-head .head-actions { display:contents; }   /* the arrows and the Edit button become items of the head itself */
  .day-page-head .day-nav { flex:none; }
  .day-page-head .head-actions > .btn { flex:1 0 100%; }   /* staff: Edit gets a line of its own */
  .day-year { display:block; font-size:.6em; font-weight:400; }
  .year-comma { display:none; }
}
.day-nav { display:flex; gap:.35rem; }
.chevron { display:block; width:1.25rem; height:1.5rem; }   /* as tall as a line of text, so the button matches the others */
/* Arrow buttons are only narrower than other buttons. Their height must come from .btn, so they line up with a
   neighbouring button (e.g. Edit on a day page): no vertical padding or line-height of their own. */
.btn.icon { padding-left:.75rem; padding-right:.75rem; }
.btn.disabled { opacity:.4; cursor:default; pointer-events:none; }
.info-card .closed-text strong { color:var(--closed-text); }   /* the "orders are closed" row inside the day's info card (5.6:1 on the beige) */
.cart-day { margin-bottom:1rem; }
.cart-day-title { margin:0 0 .75rem; padding:0 2.5rem .4rem 0;   /* the right padding leaves room for the remove-day button */
  border-bottom:1px solid var(--border-gold-2); font-size:1.3rem; color:var(--title-green); }
.cart-day .totals { margin-bottom:0; }
.inline-check { display:inline-flex; gap:.3rem; align-items:center; font-weight:400; }
tr[hidden] { display:none; }
.chips { display:flex; flex-wrap:wrap; gap:.4rem; margin:.5rem 0 1rem; }
.chip { display:inline-block; padding:.2rem .8rem; border:1px solid var(--line); border-radius:99px; background:var(--card); color:var(--fg); text-decoration:none; font:inherit; font-size:.9rem; cursor:pointer; }
.chip.active { background:var(--btn-bg); border-color:var(--sub-text-green); color:var(--btn-text); font-weight:600; }
.photo-picker .pp-preview { display:block; max-width:12rem; max-height:9rem; border-radius:6px; margin-bottom:.5rem; }
.photo-picker .pp-buttons { display:flex; gap:.5rem; }
.pp-panel { border:1px solid var(--line); border-radius:8px; padding:.75rem; margin-top:.6rem; background:var(--bg); }
.pp-items { display:grid; grid-template-columns:repeat(auto-fill, minmax(6rem, 1fr)); gap:.4rem; max-height:16rem; overflow:auto; }
.pp-item { padding:0; border:2px solid transparent; border-radius:6px; background:none; cursor:pointer; }
.pp-item:hover, .pp-item:focus-visible { border-color:var(--section-bar); }
.pp-item img { display:block; width:100%; aspect-ratio:1; object-fit:cover; border-radius:4px; }
label.btn { cursor:pointer; }
.btn.small { padding:.15rem .6rem; font-size:.85rem; }
/* A button as wide as its column, e.g. under a list of cards */
.btn.block { display:block; width:100%; text-align:center; margin-top:1rem; padding:.65rem 1rem; }
.muted { color:var(--muted); font-weight:400; }
.foot { text-align:center; color:var(--muted); padding:2rem 1rem; font-size:.9rem; }
.foot .legal-links { margin:0 0 .15rem; }
.foot .legal-links a { color:inherit; text-decoration:none; padding:.1rem .5rem; border-radius:6px; transition:background-color .15s; }
.foot .legal-links a:hover, .foot .legal-links a:focus-visible { background:var(--btn-bg); color:var(--btn-text); }
.legal h2 { font-size:1.15rem; margin:1.5rem 0 .5rem; }
.legal ul { padding-left:1.25rem; }
.legal li { margin-bottom:.4rem; }
.hero { display:grid; grid-template-columns:minmax(16rem, 26rem) 1fr; gap:2rem; align-items:start; margin-bottom:2rem; }
.hero-logo { margin:0; }
.hero-logo img { display:block; width:100%; height:auto; border-radius:12px; }
.hero-about > .section-title { margin-top:0; }
/* Baking day card: a tinted title band, a line, the smaller pickup/order-by row, a line, then the menu.
   The whole card is one link to that day's ordering page. */
.day { position:relative; background:var(--card); border:1px solid var(--line); border-radius:8px; margin-bottom:.8rem; transition:box-shadow .15s, border-color .15s; }
.day:hover { border-color:var(--section-bar); box-shadow:0 2px 8px rgba(63,95,85,.18); }
.day-head { border-bottom:1px solid var(--section-bar); }
/* 7px = the card's 8px corner minus its 1px border, so the band follows the card's curve exactly */
.day-title { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; padding:.6rem 1rem; background:var(--day-title-bg); border-bottom:1px solid var(--section-bar); border-radius:7px 7px 0 0; }
.day h3 { margin:0; }
.day-link::after { content:''; position:absolute; inset:0; border-radius:8px; }   /* stretches the link over the whole card */
.day-link:focus-visible { outline:none; }
.day-link:focus-visible::after { outline:2px solid var(--title-green); outline-offset:2px; }
.day-edit { position:relative; z-index:1; margin-left:auto; }   /* stays clickable above the stretched link */
.day-meta { margin:0; padding:.25rem 1rem; font-size:.85rem; color:var(--meta-text); background:var(--day-bg); }
.day-body { padding:.7rem 1rem .85rem; }
.day .menu { margin:0; padding:0; list-style:none; display:grid; gap:.4rem; }
.day .menu li { display:flex; align-items:center; gap:.6rem; }
.menu-thumb { width:2.5rem; height:2.5rem; flex:none; border-radius:6px; object-fit:cover; background:var(--beige-2); }
/* Footer call to action, full width. It is not a second link: the stretched title link already covers the card,
   so a click anywhere (including here) opens the ordering page. */
.day-foot { border-top:1px solid var(--section-bar); }
.day-cta { display:block; width:100%; text-align:center; border-radius:0 0 7px 7px; padding:.65rem 1rem; box-shadow:none; }
.day:hover .day-cta:not(.closed) { background:var(--btn-bg-hover); }
.day-cta.closed { background:var(--disabled-bg); color:var(--disabled-text); }
.card.inactive { opacity:.6; }
.card h3 { margin:.5rem 0 .2rem; }
.card-photo { display:block; cursor:zoom-in; }
/* Staff: the whole card opens the edit window (a button stretched over the card); the photo stays clickable above it for the zoom */
.card.editable { position:relative; transition:box-shadow .12s; }
.card-edit { position:absolute; inset:0; width:100%; padding:0; border:0; border-radius:8px; background:none; cursor:pointer; }
a.card-edit { display:block; }
.card.editable .my-order-pay { position:relative; z-index:1; }   /* stays clickable above the link that covers the card */   /* out of the flow: it adds no height */
.card-edit:focus-visible { outline:2px solid var(--title-green); outline-offset:-2px; }
.card.editable:hover { box-shadow:inset 0 0 0 2px var(--section-bar); }
.card.editable .card-photo { position:relative; z-index:1; }
/* Info card: the beige palette colors, with the dark title green for the text so it stays readable */
.info-card { background:var(--beige-2); border:1px solid var(--beige-1); border-radius:8px; padding:.8rem 1rem; margin:0 0 1.25rem; color:var(--title-green); }
.info-card p { margin:0 0 .5rem; }
.info-card p:last-child { margin-bottom:0; }
.cal-month { display:none; font-size:.7rem; color:var(--muted); }
dialog { border:0; border-radius:10px; padding:1.25rem; max-width:44rem; width:calc(100% - 2rem); max-height:90vh; overflow:auto; }
dialog::backdrop { background:rgba(0,0,0,.45); }
#confirm-dialog { max-width:26rem; }
#confirm-dialog p { margin:0; font-size:1.05rem; }
.actions { display:flex; gap:.6rem; margin-top:1rem; }
/* In a dialog the buttons stay at the bottom edge while a long form scrolls (flush with the edges, over the padding) */
dialog .actions .btn { flex:1 1 9rem; text-align:center; }   /* the buttons share the width of the dialog */
dialog .actions { position:sticky; bottom:-1.25rem; margin:1rem -1.25rem -1.25rem; padding:.75rem 1.25rem; background:var(--card); border-top:1px solid var(--line); }
.form input[type=checkbox] { width:auto; }
/* Phones and tablets: two rows. The name and the cart, then the links with the user menu at the right end, under a thin line.
   .site-menu stays a wrapper (display:contents). The name takes the whole first row but the cart (3.6rem), so what is on the
   second row, signed in or not, cannot change how the first one wraps; the links then do not fit beside it and go down. */
@media (max-width:900px) {
  .topbar { flex-wrap:wrap; gap:.2rem 0; padding:.6rem .75rem; }
  .brand { flex:1 1 calc(100% - 3.6rem); min-width:0; gap:.45rem; margin:0; padding:.2rem .5rem .2rem .25rem; margin-left:-.25rem; white-space:nowrap; font-size:min(1.05rem, 3.7vw); }   /* the normal size from about 450px up, smaller on a narrower screen, always on one line */
  .brand-mark { width:2rem; height:2rem; border-radius:6px; }
  .cart-link { order:1; }
  .main-nav { order:2; flex:1 1 auto; flex-wrap:wrap; align-items:flex-start; gap:0; margin:0; }
  .user-menu { order:3; align-self:flex-start; margin-left:auto; gap:0; }   /* always at the right edge, so its dropdown (anchored on its right) stays on screen */
  .user-menu:not(:has(.user-dropdown))::before { content:''; align-self:center; width:1px; height:1em; margin-right:.3rem; background:var(--text-green); opacity:.3; }   /* a thin bar between the links and Sign in, outside the link so the hover does not cover it */
  .main-nav, .user-menu { border-top:1px solid var(--line); padding-top:.2rem; }
  .main-nav a, .user-menu > a, .user-dropdown summary { display:inline-block; padding:.35rem .5rem; }
}
/* Every grid of cards on a phone: two side by side (a card is 14rem wide at least, which is a whole phone) */
@media (max-width:600px) {
  .cards { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.6rem; }
  .cards > .card { padding:.6rem; }
  .cards h3 { font-size:1rem; }
  .cards p { font-size:.9rem; margin:.3rem 0; }
  /* The quantity and the button of a baking day card do not fit side by side in a half-width card: one above the other */
  .cards .add-form { flex-direction:column; align-items:stretch; gap:.35rem; }
  .cards .add-form input[type=number] { width:100%; box-sizing:border-box; }
  .cards .add-form .btn { text-align:center; }
}
/* Small phones, signed in: an account icon instead of the first name, so staff (four links) still fit on one row. The name stays for screen readers. */
@media (max-width:600px) {
  .user-icon { display:inline-block; }
  .user-name { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
}
@media (max-width:700px) {
  :root { --title-overhang:.5rem; }   /* less room at the screen edge on phones */
  .hero { grid-template-columns:1fr; gap:1.25rem; }
  .hero-logo { width:min(15rem, 60%); margin:0 auto; }   /* stacked above the text, the logo is no longer the width of the whole screen */
  /* The month grid stays on a phone, compact: the day number and the cell color (taking orders / closed), tap to open. */
  .cal-grid { font-size:.8rem; }
  .cal-dow { padding:.25rem 0; font-size:.7rem; }
  .cal-cell { min-height:4.4rem; padding:.2rem; overflow:hidden; }
  .cal-cell.today .cal-num { width:1.4rem; }
  .cal-count { display:none; }
  .cal-label { font-size:.62rem; line-height:1.15; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .cal-ordered { font-size:.7rem; }
  .cal-add { font-size:0; padding:.1rem 0; text-align:center; }
  .cal-add::before { content:'+'; font-size:1rem; line-height:1; }
}

/* The day cards of the cart, payment and order pages share column widths, so the columns line up from card to card. */
.cart-table, .receipt-table { table-layout:fixed; }
.cart-table th:nth-child(2), .cart-table th:nth-child(4) { width:5.5rem; }
.cart-table th:nth-child(3) { width:6.5rem; }
.cart-table th:nth-child(5) { width:3rem; }
.cart-update[hidden] { display:none; }   /* .btn sets a display, which would show the button hidden by the script */
.line-remove { display:inline-flex; align-items:center; justify-content:center; width:2rem; height:2rem; padding:0; border:0; border-radius:6px; background:transparent; box-shadow:inset 0 0 0 1px #d9a3a3; color:var(--closed-text); cursor:pointer; }
.line-remove:hover, .line-remove:focus-visible { background:var(--closed-bg); }
.receipt-table td:last-child { width:6rem; text-align:right; }
.line-product { display:flex; align-items:center; gap:.6rem; }
.card .line-thumb { width:3.25rem; height:3.25rem; aspect-ratio:1; flex:none; border-radius:6px; }
.amount-due { margin-bottom:1rem; }
.amount-due-title { margin-bottom:.4rem; }
.amount-due-row { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.amount-due-total { font-size:1.6rem; line-height:1.2; }
.card.cart-day { position:relative; }
.cart-day-remove { position:absolute; top:.6rem; right:.6rem; margin:0; }
.cart-day-remove button { width:2rem; height:2rem; padding:0; border:0; border-radius:50%; background:none; font:inherit; font-size:1.5rem; line-height:1; color:var(--title-green); cursor:pointer; }
.cart-day-remove button:hover, .cart-day-remove button:focus-visible { background:var(--background-green-1); }
.cart-actions { display:flex; flex-direction:column; gap:.75rem; }
.cart-actions-row { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.75rem; }
.cart-actions-row > * { margin:0; }
.cart-actions-row .btn { display:block; width:100%; text-align:center; }
.cart-checkout { display:block; text-align:center; }
.extras-head th { color:var(--title-green); }
.extras-note td { font-size:.95rem; }
.extra-check { display:flex; align-items:flex-start; gap:.6rem; margin:.4rem 0; }
.note-card { margin-bottom:1rem; }
.price-history { margin:.8rem 0; }
.price-history summary { cursor:pointer; font-weight:600; }
.price-history ul { margin:.4rem 0 0; padding-left:1.2rem; }
.day-note { margin:1rem 0; }
.day-note textarea { width:100%; margin:.3rem 0; }
/* On the baking day page the cards of a row line up: the description takes the free space, and the price, the
   quantity and the button sit at the bottom of every card. */
#day-items .card { display:flex; flex-direction:column; }
#day-items .card .card-foot { margin-top:auto; }
#day-items .card .in-cart { min-height:1.4em; }
.note.day-notes { background:var(--card); }   /* the baker's notes for the day, on the baking day page */
/* The progress through the order (cart, details, payment), above the page title. */
.steps { margin:0 0 .9rem; }
.steps ol { display:flex; justify-content:center; gap:1.4rem; margin:0; padding:0; list-style:none; flex-wrap:wrap; }
.steps li { position:relative; display:flex; align-items:center; gap:.4rem; padding:.2rem .7rem .2rem .3rem; border-radius:999px; color:var(--text-green); font-weight:600; }
.steps li + li::before { content:"\203A"; position:absolute; left:-.95rem; top:50%; transform:translateY(-52%); color:var(--sub-text-green); }   /* the separator sits outside the pill */
.steps .step-num { display:inline-flex; align-items:center; justify-content:center; width:1.5rem; height:1.5rem; border-radius:50%; border:1px solid var(--sub-text-green); font-size:.85rem; }
.steps .current { background:var(--btn-bg); color:var(--title-green); box-shadow:inset 0 0 0 1px var(--sub-text-green); }
.steps .current .step-num { background:var(--title-green); border-color:var(--title-green); color:var(--background-green-2); }
.steps .done .step-num { background:var(--sub-text-green); border-color:var(--sub-text-green); color:var(--title-green); }
.steps .todo { opacity:.75; }
.checkout-form input[type=text], .checkout-form textarea { max-width:none; }
.receipt-head { margin-bottom:1rem; }
.receipt-head p { margin:0 0 .6rem; }
.receipt-head > :last-child { margin-bottom:0; }
.ingredient-totals { margin:1rem 0; }
.ingredient-totals h3 { margin:0 0 .5rem; }
.ingredient-totals .amount { text-align:right; white-space:nowrap; }
/* The Kitchen page: the day, with the previous and next day that has orders on each side */
.day-switcher { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:0; padding-top:.4rem; padding-bottom:.4rem; }
.day-switcher-date { flex:1; margin:0; text-align:center; font-size:1.35rem; font-weight:600; }
.production td { padding:.9rem .6rem; vertical-align:top; }
.production .qty { font-size:1.2rem; font-weight:700; white-space:nowrap; color:var(--title-green); margin-right:.2rem; }
.production .product { width:45%; font-size:1.05rem; }
.production .needs div { padding:.1rem 0; }
.production .extra td { padding-top:.6rem; padding-bottom:.6rem; }
.production .extra .qty { font-size:1rem; }
.paid-total { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin:1rem 0; }
.verify-notice { margin:0 0 1rem; }
.verify-notice p { margin:0 0 .6rem; }
.verify-actions { display:flex; gap:.6rem; flex-wrap:wrap; }
.verify-actions form { margin:0; }
.verify-ok { margin:0 0 1rem; }
/* The profile: a list of rows (label, value, Edit button) */
.profile-row { display:grid; grid-template-columns:10rem 1fr auto; gap:1rem; align-items:start; padding:.9rem 0; border-bottom:1px solid var(--line); }
.profile-row:first-child { padding-top:0; }
.profile-row:last-child { padding-bottom:0; border-bottom:0; }
.profile-label { font-weight:600; color:var(--title-green); }
.profile-value { overflow-wrap:anywhere; }
.profile-value p { margin:.3rem 0 0; }
.profile-value .tag { margin-left:.4rem; vertical-align:middle; }
.profile-value .verify-actions { margin-top:.5rem; }
@media (max-width:600px) { .profile-row { grid-template-columns:1fr auto; } .profile-label { grid-column:1 / -1; } }
/* The eye button on a password field (js/password_toggle.js) */
.password-field { position:relative; display:block; max-width:28rem; }
.password-field input { padding-right:2.6rem; }
.password-eye { position:absolute; top:50%; right:.3rem; transform:translateY(-50%); display:flex; align-items:center; justify-content:center; width:2.2rem; height:2.2rem; padding:0; border:0; border-radius:6px; background:none; color:var(--text-green); cursor:pointer; }
.password-eye:hover, .password-eye:focus-visible { background:var(--background-green-1); color:var(--title-green); }
/* The bag in the menu bar: the icon takes the text colour, the count sits on the body of the bag */
.topbar .cart-link:hover, .topbar .cart-link:focus-visible { color:var(--title-green); }
.bag-icon { display:block; width:2.1rem; height:2.1rem; }
.bag-count { position:absolute; left:50%; top:56%; transform:translate(-50%, -50%); font-size:.75rem; font-weight:800; line-height:1; color:var(--title-green); }
.production .needs, .ingredient-totals td { color:var(--muted); }   /* the ingredients, in the same gray as "No recipe yet" */
.hidden-orders-note { display:flex; align-items:center; gap:1rem; margin:.6rem 0 0; flex-wrap:wrap; }
.refund-note { color:var(--closed-text); }
/* Login, sign up and password reset: a narrow card in the middle of the page. */
.auth-card { max-width:26rem; margin:1.5rem auto 1rem; }
.auth-card .form input[type=text], .auth-card .form input[type=email], .auth-card .form input[type=password], .auth-card .form .password-field { max-width:none; }
.auth-card .form > :last-child, .auth-card form { margin-bottom:0; }
.auth-card p:first-child { margin-top:0; }
.auth-links { text-align:center; margin:0 0 1rem; }
.guest-note { margin:0 0 1rem; }
.guest-note p { margin:0; }
.preview-list { margin:0; padding-left:1.2rem; }
.preview-list li { padding:.25rem 0; }

.profile-card + .profile-card { margin-top:1.25rem; }
#card-container { min-height:90px; margin:.5rem 0 1rem; }
.form-error { color:#a33; margin:.5rem 0; }
.saved-cards { display:grid; gap:.4rem; margin:.5rem 0 1rem; }
.saved-card, .save-card label { display:flex; gap:.5rem; align-items:center; cursor:pointer; }
.save-card { margin:0 0 1rem; }
.save-card p { margin:.2rem 0 0 1.6rem; font-size:.9rem; }
.square-note { text-align:center; font-size:.9rem; margin:.75rem 0 0; }
/* Apple Pay and Google Pay: Square draws the Google button, the Apple one is the browser's own button style */
.square-pay .card { margin-bottom:1rem; }
.wallet-button { display:block; width:100%; height:48px; margin:0 0 .6rem; }
.wallet-button[hidden] { display:none; }
.apple-pay-button { -webkit-appearance:-apple-pay-button; appearance:-apple-pay-button; -apple-pay-button-type:pay; -apple-pay-button-style:black; border:0; border-radius:6px; cursor:pointer; }
.bag-dot { position:absolute; top:-2px; right:-2px; width:.7rem; height:.7rem; border-radius:50%; background:#c0392b; box-shadow:0 0 0 2px var(--bg, #fff); }
.waiting-order { margin-bottom:1rem; }
.waiting-order .actions form { margin:0; }
.edit-bag { display:flex; gap:.6rem; flex-wrap:wrap; margin:0 0 .5rem; }
.edit-bag form { margin:0; }
.day-checkout { display:flex; gap:.75rem; margin:1.5rem calc(-1 * var(--title-overhang)) .5rem; }   /* as wide as the title bars, so the buttons do not look like part of the section above */
.btn.soft-danger { background:var(--closed-bg); color:var(--closed-text); box-shadow:inset 0 0 0 1px #d9a3a3; }
.btn.soft-danger:hover { background:#f0c8c8; }
.btn.ghost-danger { background:transparent; color:var(--closed-text); box-shadow:inset 0 0 0 1px #d9a3a3; }
.btn.ghost-danger:hover { background:var(--closed-bg); }
.foot .social { margin:0 0 1rem; }
.foot .social a { display:inline-flex; align-items:center; gap:.5rem; padding:.45rem 1rem; border-radius:6px; background:var(--btn-bg); color:var(--btn-text); font-weight:600; line-height:1.2; text-decoration:none; transition:background-color .15s; }
.foot .social a:hover, .foot .social a:focus-visible { background:var(--btn-bg-hover); }
.foot .social img { width:1.4rem; height:1.4rem; }
.preset-picker { margin:0 0 1rem; }
.preset-picker label { display:block; font-weight:600; margin-bottom:.25rem; }
.preset-picker select { width:100%; max-width:28rem; padding:.4rem; font:inherit; }
.copy-date { margin:.3rem 0; }
.totals.refunds { margin-top:.5rem; }
.totals.refunds td:first-child { text-align:left; }
.order-search { display:flex; gap:.6rem; flex-wrap:wrap; margin:0 0 1rem; }
.order-search input[type=search] { flex:1 1 18rem; padding:.45rem .6rem; font:inherit; border:1px solid var(--field-border); border-radius:6px; background:var(--card); color:var(--title-green); }
.order-search select { padding:.45rem .5rem; font:inherit; }
.pager { display:flex; gap:1rem; align-items:center; justify-content:center; margin:1rem 0 0; }

/* Maintenance mode: the reminder staff see on every page, and the page customers see */
.maintenance-bar { background:#b3261e; color:#fff; padding:.5rem 1.25rem; text-align:center; font-size:.95rem; }
.maintenance-bar button { background:none; border:0; padding:0; margin-left:.5rem; color:#fff; font:inherit; text-decoration:underline; cursor:pointer; }
.maintenance-page { text-align:center; padding-top:3rem; }
.maintenance-logo { display:block; width:min(100%, 360px); height:auto; margin:0 auto 1.5rem; border-radius:12px; }

/* Settings dialog: one card per setting */
.settings-form .setting-card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:.85rem 1rem; margin-bottom:.75rem; }
.settings-form .setting-label { display:block; font-weight:600; color:var(--title-green); margin-bottom:.35rem; }
.settings-form .setting-check { display:flex; align-items:center; gap:.5rem; cursor:pointer; color:var(--title-green); }
.settings-form .setting-help { margin:.4rem 0 0; font-size:.9rem; }
.settings-form .setting-card input[type="text"], .settings-form .setting-card input[type="url"], .settings-form .setting-card input[type="email"], .settings-form .setting-card input[type="number"],
.settings-form .setting-card textarea { width:100%; max-width:none; box-sizing:border-box; }
.settings-form .setting-sub { margin-top:.9rem; }
.settings-version { margin:1rem 0 0; font-size:.85rem; text-align:center; }

/* Staff-only Square ids on the order page */
.square-info summary { cursor:pointer; font-weight:600; color:var(--title-green); }
.square-info table { margin-top:.6rem; }
.square-info th { text-align:left; font-weight:600; vertical-align:top; padding-right:1rem; }
.square-info code { overflow-wrap:anywhere; user-select:all; }
/* A baking day with a product photo: the photo fills the cell, the date sits in a badge, the status is the outline */
.cal-cell.has-photo { display:flex; flex-direction:column; isolation:isolate; padding:0; background:var(--card); }
.cal-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; }
.cal-cell.has-photo .cal-num { position:absolute; top:.25rem; left:.25rem; min-width:1.6rem; box-sizing:border-box; padding:0 .3rem; border-radius:999px; text-align:center; background:rgba(255,255,255,.88); color:var(--title-green); font-weight:600; }
.cal-cell.has-photo.today .cal-num { display:block; width:auto; border-radius:999px; }
.cal-cell.has-photo .cal-link { margin-top:auto; padding:1rem .35rem .3rem; background:linear-gradient(transparent, rgba(0,0,0,.7)); }
.cal-cell.has-photo .cal-label, .cal-cell.has-photo .cal-count, .cal-cell.has-photo .cal-ordered { color:#fff; }
.cal-cell.has-photo.baking { outline:3px solid #d9a3a3; outline-offset:-3px; }            /* closed */
.cal-cell.has-photo.baking .cal-photo { filter:grayscale(.6) brightness(.85); }
.cal-cell.has-photo.baking.open { outline-color:var(--section-bar); }
.cal-cell.has-photo.baking.open .cal-photo { filter:none; }
.cal-cell.has-photo.no-match .cal-photo { display:none; }
.cal-cell.has-photo.no-match .cal-num { background:none; }
@media (max-width:700px) {
  .cal-cell.has-photo .cal-num { top:.15rem; left:.15rem; min-width:1.3rem; padding:0 .2rem; font-size:.75rem; }
  .cal-cell.has-photo .cal-label { display:none; }   /* a phone cell is too small for text on the photo */
}
/* The bag on a phone: the five columns do not fit, so each line becomes two rows: the item and
   Remove on top, then the quantity, "× price each" and the total, which reads as a sum. Remove sits right above the total. */
@media (max-width:650px) {
  .card .line-thumb { width:2.25rem; height:2.25rem; border-radius:5px; }   /* smaller than the 3.25rem of a desktop */
  .line-product { gap:.5rem; }
  .cart-table, .cart-table tbody { display:block; }
  .cart-table tbody > tr:first-child { display:none; }   /* the column titles */
  .cart-table tr { display:grid; grid-template-columns:auto 1fr auto; grid-template-areas:"item item remove" "qty price total"; gap:.4rem .6rem; align-items:center; padding:.6rem .5rem; border-bottom:1px solid var(--line); }
  table.list.cart-table td, table.list.cart-table th { display:block; padding:0; border:0; width:auto; }   /* more specific than `table.list td`, which gives each cell its own bottom line */
  .cart-table td:nth-child(1) { grid-area:item; font-weight:600; }
  .cart-table td:nth-child(2) { grid-area:price; }
  .cart-table td:nth-child(2)::before { content:'\00d7\00a0'; color:var(--muted); }
  .cart-table td:nth-child(2)::after { content:' each'; color:var(--muted); font-size:.85rem; }
  .cart-table td:nth-child(3) { grid-area:qty; }
  .cart-table td:nth-child(4) { grid-area:total; justify-self:end; font-weight:600; }
  .cart-table td:nth-child(5) { grid-area:remove; justify-self:end; }
  .cart-table tr.extras-head, .cart-table tr.extras-note { display:block; }
  .cart-table tr.extras-head th { display:block; }
}

/* voucher code field (bag and baking day page) */
.voucher-form { margin:1rem 0; }
.voucher-row-input { display:flex; gap:.5rem; flex-wrap:wrap; }
.voucher-row-input input { flex:1 1 12rem; max-width:16rem; text-transform:uppercase; letter-spacing:.08em; }

/* the dialog where a voucher's free item is chosen */
.voucher-options { list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:.6rem; }
.voucher-option { display:flex; align-items:center; gap:.8rem; padding:.6rem; border:1px solid var(--line); border-radius:10px; }
.voucher-option.chosen { border-color:var(--section-bar); box-shadow:inset 0 0 0 1px var(--section-bar); }
.voucher-option img, .voucher-option-blank { width:4.5rem; height:4.5rem; flex:none; border-radius:8px; object-fit:cover; background:var(--line); }
.voucher-option-text { flex:1 1 auto; display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.voucher-option form { flex:none; }
.voucher-actions { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }

/* things that wait for something in the bag (note for the baker) are shown, but dimmed */
textarea:disabled, .btn:disabled, button.btn:disabled { opacity:.45; cursor:not-allowed; }

/* a voucher code you click to copy */
.copy-code { white-space:nowrap; font:inherit; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing:.06em; padding:.1rem .4rem; border:1px dashed var(--line); border-radius:6px; background:none; color:inherit; cursor:copy; }
.copy-code:hover, .copy-code:focus-visible { border-color:var(--section-bar); background:#fff8e8; }
.copied { display:block; margin-top:.25rem; font-size:.85rem; color:var(--title-green); }   /* on its own line, so it cannot push the table wider on a phone */
.copied:empty { display:none; }

.voucher-delete .line-remove { width:1.5rem; height:1.5rem; }
.voucher-delete .line-remove svg { width:11px; height:11px; }

/* a wide table scrolls sideways on a phone instead of squeezing its cells (a code must stay on one line) */
.table-scroll { overflow-x:auto; }
.voucher-table td:first-child { white-space:nowrap; }

.order-search .search-bar-field { flex:1 1 18rem; }   /* the box with its x, next to the Search button */
.order-search.search-bar { margin:0 0 1rem; }

.order-customer span, .order-items > span { display:block; }
.order-items { text-align:inherit; }   /* name, email, phone / each item on its own line */
.order-note { font-style:italic; }

/* every orders list (all orders, the kitchen, my orders): on a phone each order becomes a small card instead of a
   five-column squeeze. Columns carry a data-label for their title; the first cell is the order itself. */
@media (max-width:600px) {
  table.order-table, table.order-table tbody { display:block; }
  table.order-table tr:first-child:has(th) { display:none; }
  table.order-table tr { display:block; padding:.6rem 0; border-bottom:1px solid var(--line); }
  table.order-table tr[hidden] { display:none; }        /* the kitchen hides cancelled orders this way */
  table.order-table td[colspan] { display:block; text-align:left; }
  table.order-table td { display:flex; justify-content:space-between; gap:.8rem; padding:.15rem 0; border:0; text-align:right; overflow-wrap:anywhere; }
  table.order-table td:first-child { display:block; text-align:left; font-weight:600; }
  table.order-table td.order-customer { display:block; text-align:left; }
  table.order-table td[data-label]::before { content:attr(data-label); flex:none; color:var(--muted, inherit); font-weight:400; text-align:left; }
}

/* choosing codes in the list to print or mark */
.voucher-bulk { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin:.25rem 0 .75rem; }
.voucher-table th:first-child, .voucher-table td:first-child { width:1%; }

/* voucher states: available is the usual green, waiting for payment is amber, used is grey, expired is red */
.tag.pending { background:#fbe6b8; color:#6b4a00; }
.copy-code.spent { color:var(--muted); border-color:var(--line); text-decoration:line-through; }

/* Two-factor authentication */
.qr { max-width:15rem; margin:.5rem auto 1rem; }   /* centered on the page */
.form.full input, .form.full .password-field { max-width:none; }
.qr svg { width:100%; height:auto; display:block; shape-rendering:crispEdges; }   /* scales through its viewBox; the white margin is part of the drawing */
.backup-codes { list-style:none; padding:0; display:grid; grid-template-columns:repeat(2, max-content); gap:.4rem 2rem; font-size:1.1rem; }
.msg.nudge { background:#fff4d6; }
.setup-steps h2 { font-size:1.05rem; margin:1.4rem 0 .3rem; }
.setup-steps h2:first-child { margin-top:0; }
.setup-steps p { margin:.2rem 0 .6rem; }
/* two buttons side by side, each taking half of the width (cancel + confirm) */
.btn-row { display:flex; gap:.8rem; margin-top:1rem; }
.btn-row .btn.block { flex:1 1 0; width:auto; margin-top:0; }
.gate-title { font-size:1.05rem; margin:0 0 .3rem; }
/* Town and state share one card: the town takes the room, the state is a short field */
.settings-form .setting-pair { display:flex; gap:.8rem; align-items:flex-start; }
.settings-form .setting-pair .setting-town { flex:1 1 auto; min-width:0; }
.settings-form .setting-pair .setting-state { flex:0 0 6.5rem; }