/* ============================================================
   Back Home Bakery — shared theme
   Tokens are lifted from the current backhomebakeryco.com so the
   rebuild feels like the same bakery. Both the customer site and
   Amanda's console use this file. Don't hardcode colors elsewhere.
   ============================================================ */

:root {
  /* Farmhouse neutrals */
  --cream: #F8F4EE;
  --cream-dark: #EFE8DE;
  --shiplap: #F5F1E9;
  --shiplap-line: rgba(90, 70, 55, 0.07);
  --white: #FFFDF8;
  --line: rgba(92, 70, 54, 0.13);
  --line-strong: rgba(92, 70, 54, 0.22);

  /* Brand */
  --terracotta: #C45C3E;
  --terracotta-deep: #B4512F;   /* buttons: keeps white text readable */
  --terracotta-dark: #A3482F;
  --terracotta-wash: rgba(196, 92, 62, 0.10);
  --sage: #7A8B6E;
  --sage-dark: #5C6B52;
  --sage-light: #A3B194;
  --sage-wash: rgba(122, 139, 110, 0.13);
  --wood: #5C4636;
  --wood-light: #7A624E;
  --butter: #E8D5A3;
  --butter-light: #F5E8C0;
  --butter-wash: rgba(232, 213, 163, 0.38);

  /* Chalkboard (the "This Week" board) */
  --chalk: #F5F0E6;
  --chalk-board: #2A382C;
  --chalk-frame: #3D4F40;
  --chalk-trim: #6E5238;                      /* the wooden edge on the console's chalkboard */
  --chalk-wash: rgba(245, 240, 230, 0.12);    /* a light tint on the chalkboard */
  --markup: #E8743F;                          /* circles and arrows drawn on Site Ideas screenshots */

  /* The footer, and the Powered by FetchPulse badge in it (FetchPulse's own colors) */
  --footer: #3E2F25;
  --footer-ink: rgba(245, 240, 230, 0.8);
  --fp-badge: #F1F2F4;
  --fp-ink: #20262E;
  --fp-teal: #1E9E92;
  --fp-muted: #5B6470;

  /* Ink */
  --charcoal: #2F2A26;
  --muted: #6B5E52;
  --faint: #9A8E82;

  /* Order states */
  --st-new: #A3482F;        --st-new-bg: rgba(196, 92, 62, 0.12);
  --st-confirmed: #4E5D45;  --st-confirmed-bg: rgba(122, 139, 110, 0.16);
  --st-baking: #8A5A12;     --st-baking-bg: rgba(232, 190, 110, 0.28);
  --st-ready: #2F6B3F;      --st-ready-bg: rgba(63, 125, 78, 0.14);
  --st-done: #6B5E52;       --st-done-bg: rgba(92, 70, 54, 0.08);

  /* Type */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-script: 'Yellowtail', 'Brush Script MT', cursive;
  --font-chalk: 'Amatic SC', 'Segoe Print', cursive;   /* chalkboard lettering */
  --font-hand: 'Caveat', 'Segoe Print', cursive;       /* chalkboard handwriting */

  /* Shape */
  --radius-sm: 8px;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 8px 28px rgba(92, 70, 54, 0.10);
  --shadow-soft: 0 4px 16px rgba(92, 70, 54, 0.07);
  --shadow-lift: 0 18px 50px rgba(47, 42, 38, 0.18);

  /* Glass: frosted bars that float over the page (header, the menu's add bar) */
  --glass: rgba(245, 241, 233, 0.9);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);       /* arrives fast, settles softly */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);            /* leaves */
  --ease-move: cubic-bezier(0.4, 0, 0.2, 1);        /* slides */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* a little overshoot */
  /* A real spring (about 3% past, then settles): screens sliding like an app */
  --spring: linear(0, 0.0235, 0.0835, 0.1667, 0.2627, 0.3635, 0.4631, 0.5576, 0.6442, 0.7214, 0.7884, 0.8453, 0.8925, 0.9307, 0.9609, 0.984, 1.0011, 1.0131, 1.0211, 1.0258, 1.028, 1.0283, 1.0273, 1.0253, 1.0228, 1.02, 1.0172, 1.0144, 1.0117, 1.0094, 1.0073, 1.0055, 1.0039, 1.0027, 1.0017, 1.0009, 1);
  --shadow-edge: -14px 0 36px rgba(47, 42, 38, 0.2);  /* the leading edge of a screen sliding over another */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--charcoal);
  background: var(--shiplap);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--terracotta-dark); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; }
p { margin: 0; }
:focus-visible { outline: 3px solid rgba(196, 92, 62, 0.45); outline-offset: 2px; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Textures ---------- */
.shiplap {
  background-color: var(--shiplap);
  background-image: linear-gradient(to bottom, transparent 0, transparent calc(100% - 1.5px), var(--shiplap-line) calc(100% - 1.5px));
  background-size: 100% 44px;
}
.shiplap-dark {
  background-color: #EDE6DB;
  background-image: linear-gradient(to bottom, transparent 0, transparent calc(100% - 1.5px), rgba(70, 55, 40, 0.09) calc(100% - 1.5px));
  background-size: 100% 44px;
}

/* ---------- Type helpers ---------- */
.script { font-family: var(--font-script); font-weight: 400; color: var(--terracotta); }
.display { font-family: var(--font-display); font-weight: 600; color: var(--wood); }
.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage-dark);
}
.muted { color: var(--muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.7rem 1.4rem;
  border-radius: 10px;
  border: 2px solid transparent;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--terracotta-deep); color: #fff; }
.btn-primary:hover { background: var(--terracotta-dark); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(196, 92, 62, 0.28); }
.btn-outline { background: transparent; border-color: var(--wood); color: var(--wood); }
.btn-outline:hover { background: var(--wood); color: #fff; }
.btn-sage { background: var(--sage-dark); color: #fff; }
.btn-sage:hover { background: #4E5D45; transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--wood); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--cream-dark); }
.btn-butter { background: var(--butter); color: var(--chalk-board); }
.btn-butter:hover { background: var(--butter-light); transform: translateY(-1px); }
.btn-sm { min-height: 36px; padding: 0.45rem 0.95rem; font-size: 0.85rem; border-radius: 8px; }
.btn-lg { min-height: 52px; padding: 0.9rem 1.8rem; font-size: 1.02rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--white);
  color: var(--wood);
  cursor: pointer;
}
.icon-btn:hover { background: var(--cream-dark); }
.icon-btn svg { width: 16px; height: 16px; }

/* ---------- Cards ---------- */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

/* ---------- Status (a colored dot + text, no bubble) ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}
.pill::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.pill.no-dot::before { display: none; }
.st-new       { color: var(--st-new); }
.st-confirmed { color: var(--st-confirmed); }
.st-baking    { color: var(--st-baking); }
.st-ready     { color: var(--st-ready); }
.st-done      { color: var(--st-done); }

/* ---------- Forms ---------- */
.field { display: grid; gap: 0.35rem; }
.field > span, .field-label { font-size: 0.85rem; font-weight: 700; color: var(--wood); }
.field small { color: var(--muted); font-size: 0.8rem; }
.input, .select, .textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.85rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.textarea { min-height: 96px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--sage); box-shadow: 0 0 0 3px var(--sage-wash); }

/* Quantity stepper: only as wide as it needs to be, even inside a form's grid */
.stepper { display: inline-flex; align-items: center; justify-self: start; align-self: start; width: max-content; border: 1.5px solid var(--line-strong); border-radius: 10px; background: #fff; }
.stepper button { width: 44px; height: 44px; border: 0; background: none; cursor: pointer; color: var(--wood); display: grid; place-items: center; border-radius: 8px; }
.stepper button:hover { background: var(--cream-dark); }
.stepper button svg { width: 14px; height: 14px; }
.stepper output { min-width: 2.25rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Toggle switch */
.switch { position: relative; display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track { width: 44px; height: 26px; border-radius: 999px; background: #D8CFC4; position: relative; transition: background 0.2s ease; flex: none; }
.switch .track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: transform 0.2s ease; }
.switch input:checked + .track { background: var(--sage-dark); }
.switch input:checked + .track::after { transform: translateX(18px); }
.switch input:focus-visible + .track { outline: 3px solid rgba(122, 139, 110, 0.5); outline-offset: 2px; }

/* ---------- Toasts ---------- */
.toasts { position: fixed; z-index: 500; right: 16px; bottom: calc(16px + var(--toast-lift, 0px)); display: grid; gap: 0.6rem; max-width: min(380px, calc(100vw - 32px)); }
.toast {
  display: flex; gap: 0.75rem; align-items: flex-start;
  padding: 0.85rem 1rem;
  background: var(--chalk-board);
  color: var(--chalk);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  font-size: 0.92rem;
  animation: toast-in 0.25s ease;
}
.toast strong { color: var(--butter); display: block; }
.toast svg { width: 20px; height: 20px; flex: none; color: var(--butter); margin-top: 2px; }
@keyframes toast-in { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Pop-up (a small centered note or choice; BHB.modal in store.js) ---------- */
:root { --scrim: rgba(47, 42, 38, 0.45); }
.modal-scrim {
  position: fixed; inset: 0; z-index: 450;
  display: grid; place-items: center; padding: 16px;
  background: var(--scrim);
  animation: modal-fade 0.2s ease;
}
.modal {
  position: relative; width: 100%; max-width: 420px;
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto;
  padding: 1.5rem 1.25rem 1.25rem;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  animation: modal-in 0.22s ease;
}
.modal:focus { outline: none; }
.modal-x { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; }
.modal-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 0.8rem; border-radius: 50%; background: var(--butter-wash); color: var(--wood); }
.modal-icon svg { width: 26px; height: 26px; }
.modal-title { font-family: var(--font-display); font-weight: 600; font-size: 1.65rem; line-height: 1.15; color: var(--wood); margin: 0 0 0.5rem; padding-right: 2.75rem; }
.modal-body { display: grid; gap: 0.7rem; font-size: 0.97rem; color: var(--charcoal); }
.modal-body .muted { font-size: 0.9rem; }
.modal-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.25rem; }

/* ---------- Bakery team bar (showSwitchBar in store.js) ----------
   Across the top of the website and the console, only for people who
   can open the console. The highlight glides to the side you pick. */
.switchbar { background: var(--chalk-board); color: var(--chalk); box-shadow: inset 0 -3px 0 var(--chalk-trim); }
.switchbar-in { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 58px; padding: 4px clamp(16px, 3vw, 2rem) 7px; }
.switchbar-in.wrap { padding-inline: 0; }
.switchbar-who { display: grid; min-width: 0; font-size: 0.82rem; line-height: 1.25; }
.switchbar-who small { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--butter); }
.switchbar-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switchbar-pick { position: relative; flex: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 196px; padding: 3px; border-radius: 12px; background: var(--chalk-wash); }
.switchbar-pick a {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; min-height: 44px;
  border-radius: 9px; color: var(--chalk); font-weight: 700; font-size: 0.88rem; text-decoration: none; transition: color 0.2s ease;
}
.switchbar-pick a[aria-current] { color: var(--charcoal); }
.switchbar-pick a:not([aria-current]):hover { background: var(--chalk-wash); }
.switchbar-pick a:focus-visible { outline: 2px solid var(--butter); outline-offset: 2px; }
.switchbar-glide {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 9px;
  background: var(--butter); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); transition: transform 0.4s var(--spring);
}
.switchbar-pick[data-side="console"] .switchbar-glide { transform: translateX(100%); }
@media (min-width: 761px) {
  .switchbar-who { display: flex; align-items: baseline; gap: 0.6rem; font-size: 0.88rem; }
}
/* Amanda and Chad: whose account is in use, and a tap to switch (loadPair in store.js). */
.switchbar-who.has-acct { gap: 4px; align-items: center; }
.switchbar-acct { display: inline-flex; justify-self: start; padding: 3px; border-radius: 12px; background: var(--chalk-wash); }
.switchbar-acct > span, .switchbar-acct > button {
  display: flex; align-items: center; justify-content: center; min-height: 44px; min-width: 52px; padding: 0 10px;
  border: 0; border-radius: 9px; background: none; font: inherit; font-size: 0.85rem; font-weight: 700; color: var(--chalk);
}
.switchbar-acct > span[aria-current] { background: var(--butter); color: var(--charcoal); }
.switchbar-acct > button { cursor: pointer; }
.switchbar-acct > button:hover { background: var(--chalk-wash); }
.switchbar-acct > button:focus-visible { outline: 2px solid var(--butter); outline-offset: 2px; }

/* ---------- Capturing a screenshot for Site Ideas (captureStart in store.js) ----------
   A small bar in the corner of every page until they tap Capture. */
.capture-bar { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 900; display: grid; justify-items: end; gap: 10px; max-width: calc(100vw - 32px); }
.capture-tip { margin: 0; max-width: 260px; padding: 10px 14px; border-radius: 12px; background: var(--white); border: 1px solid var(--line-strong); box-shadow: var(--shadow); font-size: 0.88rem; line-height: 1.4; color: var(--charcoal); }
.capture-row { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 16px; background: var(--chalk-board); box-shadow: var(--shadow-lift), inset 0 -3px 0 var(--chalk-trim); }
.capture-cancel { min-height: 48px; padding: 0 14px; border: 0; border-radius: 11px; background: transparent; color: var(--chalk); font: inherit; font-weight: 700; cursor: pointer; }
.capture-cancel:hover { background: var(--chalk-wash); }
.capture-go { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 18px; border: 0; border-radius: 11px; background: var(--butter); color: var(--charcoal); font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; }
.capture-go svg { width: 20px; height: 20px; }
.capture-go:disabled { opacity: 0.75; cursor: wait; }
/* Phones: sit above the bottom tab bars. */
@media (max-width: 860px) { .capture-bar { bottom: calc(86px + env(safe-area-inset-bottom)); } }
.modal-actions .btn { flex: 1 1 auto; }
@keyframes modal-in { from { transform: translateY(8px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }

/* Birthday: two drop-downs, month and day (no year, never a date box). */
.bday { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0.5rem; max-width: 340px; }
.bday .select { min-height: 44px; }

/* ---------- "Photo coming soon" (BHB.noPhoto in store.js) ----------
   A treat without a photo of its own shows a drawing of its kind. It fills
   the box it's put in; each page sizes the drawing for its own boxes. */
.no-photo { display: grid; place-items: center; align-content: center; gap: 0.35rem; width: 100%; height: 100%; color: var(--wood-light); text-align: center; }
.treat-art { display: block; width: 72%; height: 72%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.treat-art .ta-dough { fill: var(--butter-light); }
.treat-art .ta-crust { fill: var(--butter); }
.treat-art .ta-cream { fill: var(--white); }
.treat-art .ta-wrap { fill: var(--sage-light); fill-opacity: 0.45; }
.treat-art .ta-choc { fill: var(--wood-light); fill-opacity: 0.6; }
.treat-art .ta-fudge { fill: var(--wood); fill-opacity: 0.8; }
.treat-art .ta-pop { fill: var(--terracotta); }
.treat-art .ta-glass { fill: var(--white); fill-opacity: 0.22; }
.treat-art .ta-shine { stroke-opacity: 0.45; }
.treat-art .ta-pop-line { stroke: var(--terracotta); stroke-width: 2.6; }
.treat-art .ta-leaf-line { stroke: var(--sage); stroke-width: 2.6; }
.treat-art .ta-cream-line { stroke: var(--white); stroke-width: 2.4; }
/* Handwritten, but never chalk-roughened: it has to read easily. */
.no-photo-words { font-family: var(--font-hand); font-weight: 500; font-size: 1.5rem; line-height: 1.05; color: var(--wood-light); }

/* Little color dots beside a custom request's colors (BHB.colorDots) */
.color-dots { display: inline-flex; gap: 3px; margin-right: 0.45rem; vertical-align: -2px; }
.color-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14); }