:root {
  --crust: #f7f0e4;
  --paper: #fffdf8;
  --ink: #2c211a;
  --ink-soft: #6d5c4e;
  --line: #e3d6c3;
  --brick: #b43e28;
  --brick-dark: #8e2f1e;
  --olive: #4f6b3f;
  --gold: #d99b2b;
  --shadow: 0 1px 2px rgba(63, 44, 28, .06), 0 8px 24px rgba(63, 44, 28, .07);
  --field-bg: #fff;
  --hover: #f1e8da;
  --note-bg: #f8f1e4;
  --btn-bg: #b43e28;
  --btn-bg-hover: #8e2f1e;
  --btn-ink: #fff;
  --btn-off: #cfc3b3;
  --ok-bg: #eef5e8;    --ok-line: #bcd0ae;  --ok-ink: #4f6b3f;
  --info-bg: #eaf2f9;  --info-line: #b9d2e8; --info-ink: #2f5d86;
  --warn-bg: #fbf2df;  --warn-line: #ecd49a; --warn-ink: #a4761c;
  --danger-bg: #fdecea; --danger-line: #f0bfb4; --danger-ink: #8e2f1e;
  --muted-bg: #f4ece0;
  --skeleton-a: #f2e9da;
  --skeleton-b: #faf4e9;
  --radius: 14px;
  --serif: "Georgia", "Iowan Old Style", "Times New Roman", serif;
  --sans: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--crust);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 700; letter-spacing: -.01em; margin: 0; }
a { color: var(--brick); }
img { max-width: 100%; }

.wrap { width: min(1100px, 100% - 2.5rem); margin-inline: auto; }

/* ------------------------------------------------------------- masthead */

.masthead {
  background:
    radial-gradient(900px 320px at 50% -140px, rgba(217, 155, 43, .28), transparent 70%),
    linear-gradient(180deg, #3a2a1e, #2c211a);
  color: #f6eddf;
  padding-block: 2.75rem 2.25rem;
  text-align: center;
  border-bottom: 4px solid var(--brick);
}
.masthead .mark { font-size: 2rem; line-height: 1; }
.masthead h1 { font-size: clamp(1.9rem, 5.5vw, 3rem); margin-top: .35rem; }
.masthead .tagline { color: #d8c6ae; margin: .4rem 0 0; font-style: italic; }
.masthead .week {
  display: inline-block;
  margin-top: 1.1rem;
  padding: .3rem .9rem;
  border: 1px solid rgba(246, 237, 223, .35);
  border-radius: 999px;
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- notes */

.notices { display: grid; gap: .75rem; margin-top: 1.75rem; }
.note {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: .85rem 1.1rem;
  box-shadow: var(--shadow);
}
.note.closed { border-left-color: var(--brick); }
.note strong { display: block; font-family: var(--serif); }

/* ----------------------------------------------------------------- menu */

.layout { display: grid; grid-template-columns: 1fr 340px; gap: 2rem; align-items: start; margin-block: 2rem 4rem; }

.category { margin-bottom: 2.5rem; }
.category > h2 {
  font-size: 1.5rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--line);
  margin-bottom: 1rem;
}

.items { display: grid; gap: .9rem; }

.item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  box-shadow: var(--shadow);
}
.item.gone { opacity: .55; }
.item .photo {
  width: 84px; height: 84px; flex: none;
  object-fit: cover; border-radius: 10px; background: var(--hover);
}
.item .body { flex: 1; min-width: 0; }
.item h3 { font-size: 1.1rem; }
.item p { margin: .25rem 0 0; color: var(--ink-soft); font-size: .92rem; }
.item .meta { margin-top: .45rem; font-size: .8rem; color: var(--olive); font-weight: 600; }
.item .meta.low { color: var(--brick); }
.item .price { font-family: var(--serif); font-size: 1.15rem; white-space: nowrap; }
.item .price small { display: block; font-size: .72rem; color: var(--ink-soft); font-family: var(--sans); font-weight: 400; }
.item .side { display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; }

/* -------------------------------------------------------------- buttons */

button { font: inherit; cursor: pointer; }

.btn {
  border: 1px solid var(--btn-bg);
  background: var(--btn-bg);
  color: var(--btn-ink);
  border-radius: 999px;
  padding: .45rem 1.05rem;
  font-weight: 600;
  font-size: .92rem;
  transition: background .15s, transform .05s;
}
.btn:hover { background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { background: var(--btn-off); border-color: var(--btn-off); cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--brick); }
.btn.ghost:hover { background: rgba(180, 62, 40, .08); }
.btn.wide { width: 100%; padding-block: .7rem; font-size: 1rem; }
.btn.quiet { border-color: var(--line); background: var(--paper); color: var(--ink); }
.btn.quiet:hover { background: var(--hover); }
.btn.small { padding: .25rem .7rem; font-size: .82rem; }

.stepper { display: flex; align-items: center; gap: .1rem; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); }
.stepper button {
  border: 0; background: none; width: 30px; height: 30px; border-radius: 999px;
  font-size: 1.1rem; color: var(--brick); line-height: 1;
}
.stepper button:hover { background: rgba(180, 62, 40, .1); }
.stepper span { min-width: 1.5rem; text-align: center; font-weight: 600; font-size: .95rem; }

/* ----------------------------------------------------------------- cart */

.cart {
  position: sticky;
  top: 1.5rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.cart h2 { font-size: 1.25rem; padding: 1rem 1.15rem; border-bottom: 1px solid var(--line); }
.cart .lines { padding: .5rem 1.15rem; display: grid; gap: .55rem; max-height: 45vh; overflow-y: auto; }
.cart .empty { padding: 1.5rem 1.15rem; color: var(--ink-soft); text-align: center; font-size: .92rem; }
.cart-line { display: grid; grid-template-columns: 1fr auto; gap: .2rem .75rem; font-size: .92rem; align-items: center; }
.cart-line .name { font-weight: 600; }
.cart-line .sub { grid-column: 1 / -1; display: flex; align-items: center; gap: .6rem; color: var(--ink-soft); font-size: .82rem; }
.total {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--serif); font-size: 1.2rem;
}
.cart .total { padding: .9rem 1.15rem; border-top: 1px solid var(--line); }
.cart .foot { padding: 0 1.15rem 1.15rem; }
.cart .fineprint { font-size: .78rem; color: var(--ink-soft); margin: .7rem 0 0; text-align: center; }

/* --------------------------------------------------------------- fields */

label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .3rem; }
input, textarea, select {
  font: inherit; width: 100%; padding: .55rem .7rem;
  border: 1px solid var(--line); border-radius: 9px; background: var(--field-bg); color: var(--ink);
}
input:focus, textarea:focus, select:focus { outline: 2px solid rgba(180, 62, 40, .35); outline-offset: 1px; border-color: var(--brick); }
textarea { min-height: 70px; resize: vertical; }
.field { margin-bottom: .85rem; }
.field .hint { font-weight: 400; color: var(--ink-soft); font-size: .78rem; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }

/* ---------------------------------------------------------------- modal */

dialog {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  width: min(520px, calc(100% - 2rem));
  box-shadow: 0 24px 60px rgba(44, 33, 26, .3);
}
dialog::backdrop { background: rgba(44, 33, 26, .55); }
dialog h2 { font-size: 1.35rem; }
.modal-head { padding: 1.15rem 1.35rem; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.modal-body { padding: 1.35rem; }
.modal-foot { padding: 0 1.35rem 1.35rem; display: flex; gap: .6rem; justify-content: flex-end; }
.close { border: 0; background: none; font-size: 1.4rem; color: var(--ink-soft); line-height: 1; }

.alert { background: var(--danger-bg); border: 1px solid var(--danger-line); color: var(--danger-ink); border-radius: 9px; padding: .6rem .8rem; font-size: .88rem; margin-bottom: .9rem; }
.alert:empty { display: none; }

#checkout-summary { border-top: 1px solid var(--line); padding-top: .9rem; margin-top: .25rem; }
#checkout-summary .lines { display: grid; gap: .4rem; }

.receipt { text-align: center; padding: 1.5rem 1.35rem 0; }
.receipt .big { font-size: 2.5rem; }
.receipt h2 { margin: .5rem 0 .35rem; }
.receipt p { color: var(--ink-soft); margin: .35rem 0; }
.receipt .num { font-family: var(--serif); font-size: 1.1rem; color: var(--ink); }
.receipt-link { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .9rem; }
.receipt-link .hint { color: var(--ink-soft); font-size: .78rem; }

footer.site { border-top: 1px solid var(--line); padding-block: 1.75rem; text-align: center; color: var(--ink-soft); font-size: .85rem; }
footer.site a { color: var(--ink-soft); }

.skeleton { height: 92px; border-radius: var(--radius); background: linear-gradient(90deg, var(--skeleton-a), var(--skeleton-b), var(--skeleton-a)); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  .cart { position: static; }
  .cart .lines { max-height: none; }
}
@media (max-width: 520px) {
  .wrap { width: calc(100% - 1.75rem); }
  .row { grid-template-columns: 1fr; }
  .item { flex-wrap: wrap; }
  .item .photo { width: 64px; height: 64px; }
  .item .body { flex-basis: calc(100% - 80px); }
  .item .side { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
}

/* ================================================================ admin */

.admin-bar {
  background: #2c211a; color: #f6eddf; padding-block: .9rem;
  display: flex; align-items: center; position: sticky; top: 0; z-index: 20;
  border-bottom: 3px solid var(--brick);
}
.admin-bar .wrap { display: flex; align-items: center; gap: 1rem; justify-content: space-between; }
.admin-bar h1 { font-size: 1.1rem; }
.admin-bar .who { font-size: .85rem; color: #c9b69d; }
.admin-bar nav { display: flex; gap: .35rem; flex-wrap: wrap; }
.tab {
  border: 1px solid transparent; background: none; color: #d8c6ae;
  padding: .3rem .85rem; border-radius: 999px; font-size: .9rem;
}
.tab:hover { color: #fff; background: rgba(255,255,255,.08); }
.tab[aria-selected="true"] { background: var(--brick); color: #fff; }

.panel {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1.35rem; margin-bottom: 1.25rem;
}
.panel > h2 { font-size: 1.2rem; margin-bottom: .25rem; }
.panel > .sub { color: var(--ink-soft); font-size: .88rem; margin: 0 0 1.1rem; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .9rem; margin-bottom: 1.25rem; }
.stat { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1.1rem; box-shadow: var(--shadow); }
.stat .k { font-size: .75rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-soft); }
.stat .v { font-family: var(--serif); font-size: 1.55rem; margin-top: .15rem; }

.toolbar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.toolbar .spacer { flex: 1; }

table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); padding: .5rem .6rem; border-bottom: 2px solid var(--line); }
td { padding: .65rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
tr.off td { opacity: .5; }
.scroller { overflow-x: auto; }

.pill { display: inline-block; padding: .12rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 600; border: 1px solid; }
.pill.on { color: var(--ok-ink); border-color: var(--ok-line); background: var(--ok-bg); }
.pill.off { color: var(--ink-soft); border-color: var(--line); background: var(--muted-bg); }
.pill.new { color: var(--brick); border-color: var(--danger-line); background: var(--danger-bg); }
.pill.confirmed { color: var(--info-ink); border-color: var(--info-line); background: var(--info-bg); }
.pill.ready { color: var(--warn-ink); border-color: var(--warn-line); background: var(--warn-bg); }
.pill.picked_up { color: var(--ok-ink); border-color: var(--ok-line); background: var(--ok-bg); }
.pill.cancelled { color: var(--ink-soft); border-color: var(--line); background: var(--muted-bg); text-decoration: line-through; }

.order { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; margin-bottom: .8rem; background: var(--paper); box-shadow: var(--shadow); }
.order header { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.order h3 { font-size: 1.05rem; }
.order .when { font-size: .78rem; color: var(--ink-soft); }
.order ul { margin: .7rem 0 0; padding-left: 1.1rem; }
.order li { font-size: .9rem; }
.order .note { margin-top: .6rem; font-size: .88rem; background: var(--note-bg); border-radius: 8px; padding: .5rem .7rem; }
.order .actions { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .85rem; align-items: center; }
.order .amount { font-family: var(--serif); font-size: 1.15rem; }

.login { max-width: 380px; margin: 5rem auto; }
.muted { color: var(--ink-soft); font-size: .85rem; }
.danger { color: var(--brick); }
.btn.danger-btn { background: transparent; border-color: var(--line); color: var(--brick); }
.btn.danger-btn:hover { background: var(--danger-bg); }
.inline-form { display: grid; gap: .85rem; }
.checkline { display: flex; align-items: center; gap: .5rem; font-size: .92rem; }
.checkline input { width: auto; }
.checkline label { margin: 0; font-weight: 500; }
.hidden { display: none !important; }
.toast {
  position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%);
  background: #2c211a; color: #f6eddf; padding: .65rem 1.2rem; border-radius: 999px;
  font-size: .9rem; box-shadow: 0 10px 30px rgba(0,0,0,.25); z-index: 50;
}

/* -------------------------------------------------- sticky bar (phones) */

.mobile-bar { display: none; }

@media (max-width: 860px) {
  .mobile-bar {
    position: fixed; inset: auto 0 0 0; z-index: 30;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .75rem 1.1rem calc(.75rem + env(safe-area-inset-bottom));
    background: var(--paper); border-top: 1px solid var(--line);
    box-shadow: 0 -6px 24px rgba(63, 44, 28, .12);
  }
  .mobile-bar[hidden] { display: none; }
  .mobile-bar strong { font-family: var(--serif); font-size: 1.15rem; }
  .mobile-bar span { color: var(--ink-soft); font-size: .85rem; margin-left: .4rem; }
  body.has-cart { padding-bottom: 4.5rem; }
}

/* ------------------------------------------------------------- printing */

@media print {
  body { background: #fff; }
  .admin-bar, .toolbar, .stats, #orders-list, .mobile-bar, footer.site, .cart, dialog { display: none !important; }
  .panel { border: 0; box-shadow: none; padding: 0; }
  #prep-table td, #prep-table th { border-color: #ccc; }
}

.photo-row { display: flex; gap: .9rem; align-items: center; }
.photo-row img { width: 74px; height: 74px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.photo-row input[type="file"] { font-size: .84rem; border: 0; padding: 0; background: none; }
.thumb { width: 42px; height: 42px; object-fit: cover; border-radius: 7px; border: 1px solid var(--line); float: left; margin-right: .6rem; }

#s-pickup_slots { min-height: 118px; font-size: .92rem; line-height: 1.5; }

/* ============================================ dark mode (follows the phone) */

@media (prefers-color-scheme: dark) {
  :root {
    --crust: #191410;
    --paper: #241d17;
    --ink: #f3e9db;
    --ink-soft: #b09c86;
    --line: #3a3027;
    --brick: #e07a5f;
    --brick-dark: #c76148;
    --olive: #9cbd84;
    --gold: #e7b75c;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
    --field-bg: #1e1813;
    --hover: #2f2620;
    --note-bg: #2c231b;
    --btn-bg: #bf4e34;
    --btn-bg-hover: #d15c41;
    --btn-ink: #fff;
    --btn-off: #453a31;
    --ok-bg: #212c1b;    --ok-line: #3f5434;  --ok-ink: #a6c98d;
    --info-bg: #1b2733;  --info-line: #32485d; --info-ink: #93bde2;
    --warn-bg: #2f2616;  --warn-line: #57451f; --warn-ink: #e7b75c;
    --danger-bg: #331d18; --danger-line: #5b2f25; --danger-ink: #f0937a;
    --muted-bg: #2a231c;
    --skeleton-a: #241d17;
    --skeleton-b: #2f2620;
  }

  /* The masthead is already dark; just soften it so it doesn't glare. */
  .masthead {
    background:
      radial-gradient(900px 320px at 50% -140px, rgba(217, 155, 43, .18), transparent 70%),
      linear-gradient(180deg, #2a211a, #191410);
  }
  .item .photo, .thumb, .photo-row img { filter: brightness(.92); }
  .toast { background: #f3e9db; color: #191410; }
}

.usual { padding: .25rem 0 1rem; text-align: center; }
.usual .btn { margin-bottom: .4rem; }
.usual .fineprint { margin: 0; }

.item .photo { cursor: zoom-in; }
.photo-viewer { width: min(560px, calc(100% - 2rem)); padding: 0; overflow: hidden; }
.photo-viewer img { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; background: var(--hover); }
.photo-viewer p { margin: 0; padding: .85rem 1.1rem; font-family: var(--serif); }
.photo-viewer .close { position: absolute; top: .4rem; right: .7rem; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.6); z-index: 2; border-radius: 999px; }
.photo-viewer .close:focus-visible { outline: 2px solid var(--brick); outline-offset: 2px; }
.photo-viewer .close:not(:focus-visible) { outline: none; }

.item-note { margin-top: .15rem; }
.item-note input {
  font-size: .85rem; padding: .35rem .55rem; border-radius: 7px;
  background: var(--crust); border: 1px dashed var(--line);
}
.item-note input:focus { border-style: solid; background: var(--field-bg); }
.note-echo { color: var(--ink-soft); font-size: .8rem; font-style: italic; }
.request { color: var(--brick); font-size: .85rem; overflow-wrap: anywhere; }
.requests { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .9rem; }
.requests h3 { font-size: .95rem; margin-bottom: .4rem; }
.requests li { font-size: .88rem; margin-bottom: .2rem; overflow-wrap: anywhere; }

.note.mine { border-left-color: var(--olive); }
.note.mine a { font-weight: 600; white-space: nowrap; }

/* ======================================================== history charts */

.viz-root {
  --series-1: #b43e28;          /* validated on the light card surface */
  --axis: var(--line);
  --viz-label: var(--ink-soft);
}
@media (prefers-color-scheme: dark) {
  .viz-root { --series-1: #d4674a; }   /* re-stepped for the dark surface */
}

.chart-scroll { overflow-x: auto; padding-bottom: .25rem; }
.chart { min-width: min-content; }

/* Bars are sized in px from JS, so nothing depends on percentage resolution
   inside a flex box, and the tick row sits in normal flow below the axis. */
.plot {
  display: flex; align-items: flex-end; gap: 2px;
  height: 190px; border-bottom: 1px solid var(--axis);
}
.col { flex: 1 0 46px; max-width: 74px; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.col .value { font-size: .72rem; font-weight: 600; color: var(--ink); margin-bottom: .3rem; white-space: nowrap; }
.col .fill {
  width: 100%; max-width: 24px;
  background: var(--series-1);
  border-radius: 4px 4px 0 0;          /* rounded data-end, square at the baseline */
}
.col:hover .fill { filter: brightness(1.08); }

.ticks { display: flex; gap: 2px; }
.ticks .tick {
  flex: 1 0 46px; max-width: 74px; padding-top: .45rem;
  font-size: .68rem; line-height: 1.25; text-align: center; color: var(--viz-label);
}

.bars { display: grid; gap: .55rem; }
.bar-row { display: grid; grid-template-columns: minmax(90px, 32%) 1fr auto; gap: .7rem; align-items: center; font-size: .88rem; }
.bar-row .track { background: var(--muted-bg); border-radius: 4px; height: 16px; }
.bar-row .fill { background: var(--series-1); height: 100%; border-radius: 0 4px 4px 0; min-width: 2px; }
.bar-row .amount { color: var(--ink-soft); font-size: .82rem; white-space: nowrap; }

.table-view { margin-top: 1rem; }
.table-view summary { cursor: pointer; font-size: .85rem; color: var(--ink-soft); }
.table-view summary:hover { color: var(--ink); }

.viz-tip {
  position: fixed; z-index: 60; pointer-events: none;
  background: var(--ink); color: var(--crust);
  padding: .4rem .6rem; border-radius: 8px; font-size: .8rem; line-height: 1.35;
  box-shadow: 0 6px 20px rgba(0,0,0,.25); max-width: 220px;
}
.viz-tip strong { display: block; }

.bar-actions { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.btn.toggle { display: inline-flex; align-items: center; gap: .4rem; border-width: 1px; }
.btn.toggle::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: currentColor; flex: none; }
.btn.toggle.on { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-ink); }
.btn.toggle.on:hover { background: var(--ok-line); }
.btn.toggle.off { background: var(--muted-bg); border-color: var(--line); color: var(--ink-soft); }
.btn.toggle.off:hover { background: var(--line); }
.btn.toggle.expired { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-ink); }
.btn.toggle.expired:hover { background: var(--warn-line); }