/* Lottable — cream table linen, one green accent, a round table of eight drawn as lit plates. */
:root {
  --linen: #F4EDE0; --ink: #1E1B16; --ink-soft: #6B6152; --rule: #DCCFB7; --cloth: #FBF7EE;
  --wood: #B99A6B; --wood-deep: #8C7148; --leaf: #1F9D6B; --leaf-deep: #136E4B; --leaf-glow: #7FE0B4;
  --plate: #FFFDF8; --plate-rim: #E6DCCB;
  --serif: 'Fraunces', Georgia, serif; --sans: 'Instrument Sans', system-ui, sans-serif; --mono: 'Martian Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { background: var(--linen); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--linen); color: var(--ink); font: 16px/1.5 var(--sans); overflow-x: hidden;
  background-image: repeating-linear-gradient(0deg, rgba(140, 113, 72, .045) 0 1px, transparent 1px 7px), repeating-linear-gradient(90deg, rgba(140, 113, 72, .035) 0 1px, transparent 1px 7px); }
a { color: inherit; }
code { font-family: var(--mono); }
b { font-weight: 700; }

/* ---------- the CA napkin: pinned to the top edge at every width ---------- */
.napkin { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 14px; background: var(--ink); color: var(--cloth); border-bottom: 3px solid var(--leaf); }
.napkin-k { font: 700 11px/1 var(--mono); letter-spacing: .12em; color: var(--leaf-glow); }
.napkin-addr { flex: 1 1 200px; min-width: 0; font-size: 11.5px; line-height: 1.35; word-break: break-all; user-select: all; color: #FFFFFF; }
.napkin-addr.is-unset { color: #B7AC98; font-style: italic; user-select: none; }
.napkin-copy { font: 600 12px/1 var(--sans); padding: 8px 14px; border-radius: 999px; border: 0; background: var(--leaf); color: #FFFFFF; cursor: pointer; }
.napkin-copy[data-done="1"] { background: var(--leaf-glow); color: var(--ink); }
.napkin-gm { font: 500 11px/1 var(--mono); color: #B7AC98; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- page frame ---------- */
.courses { max-width: 1180px; margin: 0 auto; padding: 14px 16px 40px; display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }

/* ---------- the booking slip (the hero: the action itself) ---------- */
.booking { background: var(--cloth); border: 1px solid var(--rule); border-radius: 18px; padding: 16px 16px 18px;
  box-shadow: 0 1px 0 #FFFFFF inset, 0 14px 30px -18px rgba(30, 27, 22, .35); }
.booking-mast { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.booking-home { display: flex; align-items: center; gap: 8px; text-decoration: none; font: 700 17px/1 var(--serif); }
.booking-home img { border-radius: 50%; }
.booking-tag { color: var(--ink-soft); font: 400 10.5px/1.2 var(--mono); }
.booking-menu { margin-left: auto; font: 600 12px/1 var(--sans); color: var(--leaf-deep); }
.ate-free { margin: 14px 0 0; padding: 10px 12px; border-radius: 12px; background: #EAF6EF; border: 1px dashed var(--leaf); display: grid; gap: 3px; }
.ate-free[data-state="won"] { background: var(--leaf); border-style: solid; color: #FFFFFF; box-shadow: 0 0 0 4px rgba(127, 224, 180, .35); }
.ate-free[data-state="waiting"] { background: #FFF6DE; border-color: var(--wood); }
.ate-free-k { font: 500 10px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .1em; opacity: .8; }
.ate-free-t { font-size: 14px; line-height: 1.4; }
.booking-lede { margin: 14px 0 4px; font: 900 34px/1.02 var(--serif); letter-spacing: -.01em; }
.booking-live { margin: 0 0 14px; font-size: 15px; color: #3A342B; }
.booking-live b { color: var(--leaf-deep); }
.seatslip { display: grid; gap: 10px; }
.seatslip-row { display: flex; align-items: center; gap: 10px; }
.seatslip-k { font: 500 11px/1 var(--mono); color: var(--ink-soft); text-transform: uppercase; letter-spacing: .1em; }
.stepper { display: flex; align-items: center; border: 1px solid var(--rule); border-radius: 999px; background: var(--plate); }
.stepper-b { width: 40px; height: 40px; border: 0; background: none; font: 600 20px/1 var(--sans); color: var(--ink); cursor: pointer; }
.stepper-n { width: 40px; border: 0; background: none; text-align: center; font: 700 18px/1 var(--serif); color: var(--ink); -moz-appearance: textfield; }
.stepper-n::-webkit-outer-spin-button, .stepper-n::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.seatslip-cost { margin-left: auto; font: 700 20px/1 var(--serif); }
.seatslip-go { width: 100%; padding: 16px; border: 0; border-radius: 14px; background: var(--leaf); color: #FFFFFF; font: 700 17px/1 var(--sans); cursor: pointer;
  box-shadow: 0 6px 0 var(--leaf-deep), 0 12px 24px -10px rgba(19, 110, 75, .6); transition: transform .12s, box-shadow .12s; }
.seatslip-go:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--leaf-deep); }
.seatslip-go:disabled { opacity: .7; cursor: progress; }
.seatslip-fine { display: flex; align-items: center; gap: 8px; justify-content: space-between; font-size: 12px; color: var(--ink-soft); }
.seatslip-who { border: 1px solid var(--rule); background: var(--plate); border-radius: 999px; padding: 6px 12px; font: 600 12px/1 var(--sans); color: var(--ink); cursor: pointer; white-space: nowrap; }
.seatslip-who[data-on="1"] { border-color: var(--leaf); color: var(--leaf-deep); }
.seatslip-claim { padding: 12px; border-radius: 12px; border: 2px solid var(--leaf); background: #EAF6EF; color: var(--leaf-deep); font: 700 15px/1 var(--sans); cursor: pointer; }

/* ---------- the round table ---------- */
.dining { background: var(--cloth); border: 1px solid var(--rule); border-radius: 18px; padding: 14px 14px 16px; }
.dining-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.dining-no { font: 700 20px/1 var(--serif); white-space: nowrap; }
.dining-sum { font: 400 11px/1.3 var(--mono); color: var(--ink-soft); text-align: right; }
.roundtop { --tw: min(320px, calc(100vw - 64px)); --pl: calc(var(--tw) * .2); position: relative; width: var(--tw); height: var(--tw); margin: 16px auto 8px; }
.roundtop-cloth { position: absolute; inset: 12%; border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #D4BB90 0%, var(--wood) 45%, var(--wood-deep) 100%);
  box-shadow: 0 18px 30px -10px rgba(30, 27, 22, .45), inset 0 -8px 18px rgba(30, 27, 22, .25), inset 0 6px 12px rgba(255, 255, 255, .25); }
.roundtop-mid { position: absolute; inset: 30%; display: grid; place-content: center; text-align: center; color: #FFF8EA; text-shadow: 0 1px 2px rgba(30, 27, 22, .4); }
.roundtop-pot { font: 900 calc(var(--tw) * .12)/1 var(--serif); }
.roundtop-unit { font: 500 10px/1.3 var(--mono); letter-spacing: .06em; }
.roundtop-say { margin-top: 4px; font: 600 11px/1.2 var(--sans); opacity: .9; }
.placings { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.plate { position: absolute; left: 50%; top: 50%; width: var(--pl); height: var(--pl); border-radius: 50%;
  transform: translate(-50%, -50%) rotate(calc(var(--k) * 45deg)) translateY(calc(var(--tw) * -.4)) rotate(calc(var(--k) * -45deg));
  display: grid; place-content: center; text-align: center; background: radial-gradient(circle at 40% 35%, var(--plate) 0 52%, var(--plate-rim) 53% 62%, var(--plate) 63%);
  box-shadow: 0 6px 10px -4px rgba(30, 27, 22, .4), inset 0 -2px 4px rgba(30, 27, 22, .12); border: 1px solid var(--plate-rim); transition: box-shadow .3s; }
.plate-n { font: 700 13px/1 var(--serif); color: var(--ink-soft); }
.plate-who { font: 400 8.5px/1.2 var(--mono); color: #9C9282; }
.plate--sat { background: radial-gradient(circle at 40% 35%, #FFFFFF 0 50%, #CFE9DC 51% 62%, #FFFFFF 63%); border-color: #A9D8C0; }
.plate--sat .plate-n { color: var(--ink); }
.plate--sat .plate-who { color: var(--leaf-deep); }
.plate--you { box-shadow: 0 0 0 3px var(--ink), 0 6px 10px -4px rgba(30, 27, 22, .4); }
.plate--next { box-shadow: 0 0 0 3px var(--leaf), 0 0 18px 4px rgba(127, 224, 180, .8); animation: beckon 1.6s ease-in-out infinite; }
.plate--next .plate-n { color: var(--leaf-deep); }
.plate--next .plate-who { color: var(--leaf-deep); font-weight: 500; }
.plate--new { animation: setdown .7s ease-out; }
.roundtop[data-closing="1"] .plate--next { box-shadow: 0 0 0 4px var(--ink), 0 0 22px 6px rgba(127, 224, 180, .9); }
@keyframes beckon { 50% { box-shadow: 0 0 0 3px var(--leaf), 0 0 4px 1px rgba(127, 224, 180, .4); } }
@keyframes setdown { from { filter: brightness(1.3); box-shadow: 0 0 0 6px var(--leaf-glow); } }
.dining-foot { margin: 6px 0 0; font-size: 13.5px; text-align: center; color: #3A342B; }

/* ---------- the menu ---------- */
.menucard { background: var(--plate); border: 1px solid var(--rule); border-radius: 4px; padding: 22px 18px; box-shadow: 6px 6px 0 var(--rule); }
.menucard-title { margin: 0 0 12px; text-align: center; font: italic 700 26px/1 var(--serif); }
.menucard-list { margin: 0; display: grid; gap: 14px; }
.menucard-list dt { font: 600 11px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--leaf-deep); }
.menucard-list dd { margin: 4px 0 0; font-size: 15px; }
.workedbill { margin-top: 20px; padding-top: 14px; border-top: 2px dotted var(--rule); }
.workedbill-h { margin: 0 0 8px; font: 700 16px/1 var(--serif); }
.workedbill-rows { list-style: none; margin: 0; padding: 0; font: 400 12.5px/1.4 var(--mono); }
.workedbill-rows li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px dashed var(--rule); }
.workedbill-sum { font-weight: 500; color: var(--leaf-deep); border-bottom: 0 !important; }
.workedbill-note { margin: 10px 0 0; font-size: 13px; color: var(--ink-soft); }

/* ---------- the receipt tape + tables drawn ---------- */
.ticket, .ledgerbook, .guestcard { background: var(--plate); border: 1px solid var(--rule); border-radius: 6px; padding: 14px 14px 10px;
  -webkit-mask: radial-gradient(circle 6px at 50% 100%, transparent 98%, #000) 0 0 / 14px 100% repeat-x; mask: radial-gradient(circle 6px at 50% 100%, transparent 98%, #000) 0 0 / 14px 100% repeat-x; padding-bottom: 18px; }
.ticket-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 8px; border-bottom: 2px solid var(--ink); }
.ticket-h { font: 700 18px/1 var(--serif); }
.ticket-n { font: 400 11px/1 var(--mono); color: var(--ink-soft); }
.ticket-roll, .ledgerbook-list { list-style: none; margin: 0; padding: 0; font: 400 11.5px/1.45 var(--mono); max-height: 460px; overflow-y: auto; }
.ticket-roll li { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 8px; padding: 7px 0; border-bottom: 1px dashed var(--rule); }
.ticket-roll li[data-k="drawn"] { background: #EAF6EF; }
.ticket-roll li.is-printing { animation: printline .8s steps(6); }
@keyframes printline { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.rc-k { font-weight: 500; color: var(--leaf-deep); text-transform: uppercase; font-size: 10px; }
.rc-t { min-width: 0; overflow-wrap: anywhere; }
.rc-w { color: #9C9282; }
.ticket-quiet { padding: 12px 0; color: var(--ink-soft); font-family: var(--sans); font-size: 13.5px; }
.ledgerbook-list li { padding: 9px 0; border-bottom: 1px dashed var(--rule); display: grid; gap: 2px; }
.lb-top { display: flex; justify-content: space-between; gap: 8px; }
.lb-top b { color: var(--leaf-deep); }
.lb-sub { color: var(--ink-soft); }
.lb-hash { color: #9C9282; font-size: 10px; overflow-wrap: anywhere; }
.guest-in { display: grid; gap: 6px; padding-top: 10px; font-size: 13px; overflow-wrap: anywhere; }

/* ---------- footer ---------- */
.hemline { padding: 18px 4px 0; border-top: 1px solid var(--rule); display: grid; gap: 8px; font-size: 12px; color: var(--ink-soft); }
.hemline-row { display: grid; gap: 2px; }
.hemline-row code { color: var(--ink); font-size: 11px; overflow-wrap: anywhere; }
.hemline-links { display: flex; gap: 16px; flex-wrap: wrap; font-weight: 600; }
.hemline-links a { color: var(--leaf-deep); }
.is-faint { opacity: .45; pointer-events: none; }
.hemline-small { margin: 4px 0 0; font: 400 10.5px/1 var(--mono); }

.toasts { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); display: grid; gap: 6px; z-index: 40; width: min(92vw, 420px); }
.toast-slip { background: var(--ink); color: var(--cloth); padding: 10px 14px; border-radius: 10px; font-size: 13.5px; box-shadow: 0 10px 24px -10px rgba(30, 27, 22, .6); }

/* ---------- tablet: one column still, wider measure, bigger table ---------- */
@media (min-width: 700px) {
  .courses { padding: 22px 28px 48px; max-width: 760px; gap: 22px; }
  .napkin { padding: 10px 28px; }
  .napkin-addr { font-size: 13px; flex: 0 1 auto; }
  .booking { padding: 22px 26px 24px; }
  .booking-lede { font-size: 50px; }
  .roundtop { --tw: 440px; }
  .plate-n { font-size: 16px; }
  .plate-who { font-size: 10px; }
}

/* ---------- desktop: the table and its slip on the left, the receipt running down the right ---------- */
@media (min-width: 1000px) {
  .courses { max-width: 1180px; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); column-gap: 28px;
    grid-template-areas: "booking dining" "menucard ticket" "ledgerbook ticket" "guestcard guestcard" "hemline hemline"; align-items: start; }
  .napkin { justify-content: center; }
  .booking { grid-area: booking; }
  .dining { grid-area: dining; }
  .menucard { grid-area: menucard; }
  .ticket { grid-area: ticket; position: sticky; top: 64px; }
  .ticket .ticket-roll { max-height: 640px; }
  .ledgerbook { grid-area: ledgerbook; }
  .guestcard { grid-area: guestcard; }
  .hemline { grid-area: hemline; grid-template-columns: 1fr 1fr; }
  .hemline-links, .hemline-small { grid-column: 1 / -1; }
  .booking-lede { font-size: 62px; }
  .roundtop { --tw: min(420px, calc(36vw - 40px)); }
}
@media (min-width: 1300px) { .booking-lede { font-size: 70px; } }