/* ============================================================
   Drew & Jill — styled after the diner booth in their house:
   mustard laminate tabletop, black chairs, green legs, cream
   stucco walls, a hot-sauce caddy and table tent #17.
   Mobile first.
   ============================================================ */

:root {
  /* straight off the photo */
  --wall:      #efdfbd;   /* stucco wall            */
  --wall-lo:   #e6d3ab;
  --mustard:   #e8b02a;   /* laminate tabletop      */
  --mustard-lo:#cf9412;
  --edge:      #8a6410;   /* table edge band        */
  --char:      #1a1917;   /* chair black            */
  --char-2:    #2e2b26;
  --green:     #2f6b3e;   /* chair legs             */
  --red:       #c6382c;   /* hot sauce              */
  --red-lo:    #9c2a20;
  --paper:     #fffcf3;   /* guest check            */
  --ink:       #221f1a;
  --muted:     #7b7159;
  --line:      #d9c9a4;

  --radius: 10px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  min-height: 100%;
  color: var(--ink);
  background-color: var(--wall);
  /* faint stucco tooth */
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.35) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(0,0,0,.035) 0 1px, transparent 1px);
  background-size: 7px 7px, 11px 11px;
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

h1 { margin: 0; }
.muted { color: var(--muted); font-size: .93rem; }
.error { color: var(--red-lo); font-size: .9rem; font-weight: 600; }
.error[hidden] { display: none; }

/* Menu-board lettering for anything that acts as a label. */
.sign {
  font-family: "Bebas Neue", Impact, "Haettenschweiler", sans-serif;
  letter-spacing: .04em;
}

/* red-and-white checkerboard band */
.checker {
  height: 12px;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, var(--red) 25%, transparent 25% 75%, var(--red) 75%),
    linear-gradient(45deg, var(--red) 25%, transparent 25% 75%, var(--red) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}

/* ── screens ─────────────────────────────────────────────── */
.screen { min-height: 100dvh; display: grid; place-items: center; padding: 24px 18px; }
.screen[hidden] { display: none; }
.screen-app { display: block; place-items: unset; padding: 0; }

/* the guest check: paper, hard black rule, checker header */
.card {
  position: relative;
  width: 100%; max-width: 390px;
  background: var(--paper);
  border: 2px solid var(--char);
  border-radius: 4px;
  padding: 0 22px 26px;
  box-shadow: 6px 7px 0 rgba(26,25,23,.22);
  overflow: hidden;
}
.card::before {
  content: ""; display: block;
  margin: 0 -22px 22px; height: 12px;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, var(--red) 25%, transparent 25% 75%, var(--red) 75%),
    linear-gradient(45deg, var(--red) 25%, transparent 25% 75%, var(--red) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}
/* the header off a real guest check */
.check-head {
  display: flex; justify-content: space-between; gap: 8px;
  margin: 0 0 16px; padding-bottom: 5px;
  border-bottom: 2px solid var(--red);
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: .8rem; letter-spacing: .13em;
  color: var(--red-lo);
}

.center { text-align: center; }
.card h1 {
  font-family: Lobster, Georgia, serif;
  font-size: 2rem; font-weight: 400; line-height: 1.1;
  color: var(--red); margin-bottom: 4px;
}
.logo { font-size: 40px; line-height: 1; margin-bottom: 6px; }

.spinner {
  width: 30px; height: 30px; border-radius: 50%;
  border: 4px solid var(--mustard-lo); border-top-color: var(--red);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 12px 18px; margin-top: 18px;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 1.15rem; letter-spacing: .06em;
  border-radius: 6px; border: 2px solid var(--char);
  background: var(--mustard); color: var(--char);
  box-shadow: 3px 3px 0 var(--char);
  cursor: pointer;
}
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--char); }
.btn:disabled { opacity: .55; box-shadow: 3px 3px 0 var(--char); transform: none; }
.btn-primary { background: var(--red); color: #fff; }
.btn-ghost { background: var(--paper); }
.btn-sm { padding: 8px 14px; margin-top: 10px; font-size: .95rem; }

/* ── login form ──────────────────────────────────────────── */
.loginform { margin-top: 20px; }
.field { display: block; margin-bottom: 14px; }
.field span {
  display: block; margin-bottom: 5px;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: .95rem; letter-spacing: .09em; color: var(--char);
}
.field input {
  width: 100%; padding: 12px 13px;
  font: inherit; color: var(--ink);
  background: #fff;
  border: 2px solid var(--char); border-radius: 5px;
}
.field input::placeholder { color: #b0a488; }
.field input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(198,56,44,.18); }

.card > .error { margin: 12px 0 0; text-align: center; }
.hint { margin: 14px 0 0; font-size: .82rem; }

/* the stub you tear off the bottom of the check */
.links {
  position: relative;
  display: flex; flex-direction: column; gap: 0;
  margin-top: 22px; padding-top: 14px;
}
.links::before {
  content: "";
  position: absolute; top: 0; left: -22px; right: -22px; height: 9px;
  background-image: radial-gradient(circle, var(--line) 0 1.5px, transparent 1.7px);
  background-size: 9px 9px;
}
.linkbtn {
  padding: 9px 4px; font: inherit; font-size: .9rem; font-weight: 600;
  background: none; border: 0; color: var(--red-lo);
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer; text-align: center;
}
.linkbtn:active { opacity: .6; }

/* ── the counter (top bar) ───────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px;
  background: var(--char);
  border-bottom: 3px solid var(--green);
}
.topbar h1 {
  flex: 1; min-width: 0;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 1.5rem; font-weight: 400; letter-spacing: .07em;
  color: var(--mustard);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* the little table tent from the photo */
.tent {
  flex: none; width: 32px; height: 30px;
  display: grid; place-items: center;
  background: #fff; color: var(--char);
  border: 1.5px solid var(--char); border-radius: 2px;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 1.15rem; line-height: 1;
  transform: rotate(-4deg);
  box-shadow: 2px 2px 0 rgba(0,0,0,.35);
}

.avatar {
  width: 34px; height: 34px; flex: none;
  border-radius: 50%; border: 2px solid var(--mustard);
  background: var(--char-2) center/cover no-repeat;
  color: var(--mustard);
  font-family: "Bebas Neue", Impact, sans-serif; font-size: 1.05rem;
  cursor: pointer;
}

.menu {
  position: fixed; top: 62px; right: 12px; z-index: 30;
  background: var(--paper); border: 2px solid var(--char);
  border-radius: 5px; padding: 12px 14px; min-width: 205px;
  box-shadow: 4px 5px 0 rgba(26,25,23,.3);
}
.menu[hidden] { display: none; }
.menu-email { margin: 0; font-size: .8rem; color: var(--muted); word-break: break-all; }

/* ── menu board tabs ─────────────────────────────────────── */
.toolnav {
  display: flex; gap: 7px; padding: 10px 14px 0;
  overflow-x: auto; background: var(--char);
}
.toolnav[hidden] { display: none; }
.toolnav button {
  flex: none; padding: 7px 14px 8px;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 1.02rem; letter-spacing: .05em;
  border: 2px solid var(--char); border-bottom: 0;
  border-radius: 7px 7px 0 0;
  background: var(--char-2); color: #b8ac91;
  cursor: pointer;
}
.toolnav button[aria-current="true"] {
  background: var(--mustard); color: var(--char); border-color: var(--edge);
}

/* ── the tabletop ────────────────────────────────────────── */
main {
  max-width: 640px; margin: 0 auto;
  padding: 18px 15px calc(30px + var(--safe-b));
  background-color: var(--mustard);
  /* two coffee rings someone left down by the end of the table, then the
     laminate wood grain running the length of it */
  background-image:
    radial-gradient(circle, rgba(88,56,18,0) 0 30px, rgba(88,56,18,.23) 30px 36px, rgba(88,56,18,0) 37px),
    radial-gradient(circle, rgba(88,56,18,0) 0 21px, rgba(88,56,18,.15) 21px 25px, rgba(88,56,18,0) 26px),
    repeating-linear-gradient(96deg,
      rgba(0,0,0,.055) 0 2px, rgba(0,0,0,0) 2px 10px,
      rgba(255,255,255,.13) 10px 12px, rgba(0,0,0,0) 12px 24px);
  background-repeat: no-repeat, no-repeat, repeat;
  background-position: 86% calc(100% - 78px), 24% calc(100% - 40px), 0 0;
  border: 3px solid var(--edge);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  box-shadow: inset 0 3px 10px rgba(0,0,0,.13), 0 8px 0 rgba(26,25,23,.16);
  min-height: calc(100dvh - 132px);
}

/* metadata line + delete ✕, shared by check rows and note cards */
.item-meta {
  display: block; margin-top: 1px;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: .78rem; letter-spacing: .05em; color: var(--muted);
}
.del {
  flex: none; width: 36px; height: 36px; padding: 0;
  background: transparent; border: 0; color: #9a8f77;
  font-size: 1.05rem; cursor: pointer; border-radius: 5px;
}
.del:active { background: rgba(198,56,44,.16); color: var(--red); }

/* ── the guest check ─────────────────────────────────────────
   Every list is one standard diner guest check (photo, Aug 2026):
   white header with the blue "Guest Check" wordmark and red serial
   number, the Date/Table/Guests/Server boxes, the course strip, then
   the pale-green pad with blue rules where the items are the lines.
   ──────────────────────────────────────────────────────────── */
.gcheck {
  --gc-blue:  #4193c6;   /* printed blue           */
  --gc-rule:  #85bcd9;   /* rule lines             */
  --gc-red:   #e4796d;   /* stamped serial number  */
  --gc-paper: #f8f6ee;   /* white header stock     */
  --gc-pad:   #cfe2d6;   /* the green pad          */
  max-width: 480px; margin: 0 auto;
  background: var(--gc-paper);
  border-radius: 3px;
  box-shadow: 4px 5px 0 rgba(26,25,23,.25);
  overflow: hidden;
}

.gc-top { padding: 12px 14px 0; }
.gc-brand { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.gc-title {
  font-family: "Rammetto One", "Cooper Black", Georgia, serif;
  font-size: 1.3rem; color: var(--gc-blue); white-space: nowrap;
}
.gc-num {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 1.35rem; letter-spacing: .14em; color: var(--gc-red);
}
.gc-info { width: 100%; border-collapse: collapse; margin-top: 7px; }
.gc-info th, .gc-info td { border: 1px solid var(--gc-rule); padding: 2px 7px; text-align: left; }
.gc-info th { font-size: .66rem; font-weight: 600; color: var(--gc-blue); }
.gc-info td { font-size: .85rem; font-weight: 600; color: var(--ink); height: 21px; }
.gc-strip {
  padding: 5px 1px 6px;
  font-size: .6rem; font-weight: 700; letter-spacing: .05em;
  color: var(--gc-blue);
}

/* the green pad: every child is one ruled line */
.gc-pad { position: relative; background: var(--gc-pad); padding: 0 12px 12px; }
.gc-pad::before {
  /* the vertical rule fencing off the check-mark column */
  content: ""; position: absolute; top: 0; bottom: 12px; left: 50px;
  width: 1px; background: var(--gc-rule);
}
.gc-add, .gc-pad .item, .gc-sec, .gc-msg, .gc-fill, .gc-starter, .gc-sum {
  display: flex; align-items: center;
  min-height: 46px;
  border-bottom: 1px solid var(--gc-rule);
}

/* the top line is where you write the next item */
.gc-add { gap: 0; }
.gc-add button {
  flex: none; width: 27px; height: 27px; padding: 0; margin: 0 13px 0 3px;
  font-size: 1.25rem; line-height: 1;
  border: 0; border-radius: 4px;
  background: var(--red); color: #fff;
  box-shadow: 1px 1px 0 rgba(26,25,23,.3);
  cursor: pointer;
}
.gc-add button:active { transform: translate(1px,1px); box-shadow: none; }
.gc-add button:disabled { opacity: .5; }
.gc-add input {
  flex: 1; min-width: 0; padding: 8px 6px 8px 0;
  font: inherit; font-weight: 600; color: var(--ink);
  background: transparent; border: 0; outline: none;
}
.gc-add input::placeholder { color: #8fb0a6; font-weight: 500; }

/* items are lines on the pad */
.item { gap: 0; padding: 5px 0; }
.item.pending { opacity: .55; }
.check {
  flex: none; width: 27px; height: 27px; padding: 0; margin: 0 13px 0 3px;
  border: 2px solid var(--gc-rule); border-radius: 4px;
  background: transparent; color: transparent;
  font-size: 15px; line-height: 1; cursor: pointer;
}
.item.done .check { background: var(--green); border-color: var(--green); color: #fff; }
.item-body { flex: 1; min-width: 0; }
.item-name { display: block; word-break: break-word; font-weight: 600; }
.item.done .item-name {
  color: var(--muted);
  text-decoration: line-through; text-decoration-color: var(--gc-red); text-decoration-thickness: 2px;
}
.gc-pad .item-meta { color: #6f958a; }
.gc-pad .del { color: #7fa0ad; width: 34px; height: 34px; }

/* printed section row: BOUGHT (2) · clear */
.gc-sec {
  justify-content: space-between;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: .92rem; letter-spacing: .09em; color: var(--gc-blue);
  padding-left: 3px;
}
.gc-sec button {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: .88rem; letter-spacing: .07em;
  background: none; border: 0; color: var(--gc-red);
  padding: 4px 4px; cursor: pointer;
}

/* a message printed across a line, and blank filler lines */
.gc-msg {
  justify-content: center; text-align: center;
  padding: 8px 6px; font-size: .92rem; color: var(--gc-blue);
}
.gc-starter {
  width: 100%; justify-content: center;
  font: inherit; font-size: .92rem; font-weight: 700; color: var(--gc-blue);
  background: none; border: 0;
  border-bottom: 1px solid var(--gc-rule);
  cursor: pointer;
}
.gc-starter:active { opacity: .6; }

/* tax / total, then the printer's mark */
.gc-sum {
  justify-content: flex-end; gap: 16px;
  padding-right: 5px;
  font-weight: 700; color: var(--gc-blue);
}
.gc-grand { font-size: 1.05rem; }
.gc-grand .gc-count { color: var(--ink); }
.gc-code {
  padding: 6px 2px 0; text-align: right;
  font-size: .6rem; font-weight: 700; color: var(--gc-blue); opacity: .8;
}

/* ── section headings, like a chalk line on the board ────── */
.section-label {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 22px 0 10px; padding: 5px 11px;
  background: var(--char); border-radius: 4px;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: .95rem; letter-spacing: .1em; color: var(--mustard);
}
.section-label button {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: .9rem; letter-spacing: .07em;
  background: transparent; border: 0; color: #e9a9a2;
  cursor: pointer; padding: 3px 4px;
}

/* ── empty states: a place setting ───────────────────────── */
.empty {
  text-align: center; color: var(--muted);
  padding: 34px 18px; margin: 0;
  background: var(--paper);
  border: 2px dashed var(--edge); border-radius: 6px;
}
.empty .logo { opacity: .75; margin-bottom: 8px; }
.empty p { margin: 0; }
.empty + .btn[data-act="starter"] { max-width: 330px; margin: 14px auto 0; display: block; }

.banner {
  margin-bottom: 14px; padding: 10px 12px;
  background: var(--red); color: #fff;
  border: 2px solid var(--char); border-radius: 5px;
  font-size: .88rem; font-weight: 600;
  box-shadow: 3px 3px 0 rgba(26,25,23,.25);
}
.banner[hidden] { display: none; }

/* ── comment card (notes) ────────────────────────────────── */
.composer { display: flex; flex-direction: column; gap: 10px; }
.composer textarea {
  width: 100%; padding: 12px 13px; resize: vertical;
  font: inherit; color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--char); border-radius: 5px;
  box-shadow: 2px 2px 0 rgba(26,25,23,.25);
}
.composer textarea::placeholder { color: #b0a488; }
.composer textarea:focus { outline: none; border-color: var(--red); }
.composer .btn { margin-top: 0; }
main .hint { margin: 10px 2px 0; color: #6b5f42; }

.note {
  background: var(--paper);
  border: 2px solid var(--char); border-left: 6px solid var(--muted);
  border-radius: 4px; padding: 11px 6px 12px 12px; margin-bottom: 10px;
  box-shadow: 3px 3px 0 rgba(26,25,23,.22);
}
.note.status-seen { border-left-color: var(--mustard-lo); }
.note.status-done { border-left-color: var(--green); }

.note-head { display: flex; align-items: center; gap: 8px; }
.note-head .item-meta { flex: 1; margin: 0; }
.pill {
  flex: none; padding: 3px 9px 2px;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: .8rem; letter-spacing: .09em;
  border: 1.5px solid var(--char); border-radius: 3px;
  background: #efe6d0; color: var(--char);
}
.status-seen .pill { background: var(--mustard); }
.status-done .pill { background: var(--green); color: #fff; border-color: var(--green); }

.note-body { margin: 9px 6px 0 0; white-space: pre-wrap; word-break: break-word; }
.note-reply {
  margin: 11px 6px 0 0; padding: 10px 12px;
  background: #f3ecd9; border-left: 3px solid var(--red);
  border-radius: 0 5px 5px 0;
  font-size: .93rem; white-space: pre-wrap; word-break: break-word;
}
.note-reply strong {
  font-family: "Bebas Neue", Impact, sans-serif;
  letter-spacing: .06em; color: var(--red-lo);
}

/* the bell on the pass — rung when a list comes up empty */
.ding { display: inline-block; transform-origin: 50% 12%; animation: ding 1.2s ease-in-out 2; }
@keyframes ding {
  0%, 65%, 100% { transform: rotate(0); }
  8%  { transform: rotate(-17deg); }
  20% { transform: rotate(13deg); }
  34% { transform: rotate(-8deg); }
  48% { transform: rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) { .ding { animation: none; } }