:root{
  --ink:#101E1A; --ink-2:#182C26; --line:rgba(241,238,229,.14);
  --paper:#F1EEE5; --brass:#C89552; --sage:#7FA08C; --clay:#B0563F;
  --fg:#F1EEE5; --fg-dim:rgba(241,238,229,.56);
  /* Tells the browser to render its OWN chrome -- the calendar-picker icon
     on <input type=date>, scrollbars, spin buttons -- with the dark palette
     rather than assuming a light page. Nothing here is dark by accident;
     this makes native controls match on purpose. */
  color-scheme: dark;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--fg);
  font:16px/1.5 "Instrument Sans","Avenir Next",-apple-system,sans-serif}
a{color:var(--brass)}
.wrap,.auth{max-width:860px;margin:0 auto;padding:32px 20px 80px}
.auth{max-width:26em}
h1{font-size:26px;letter-spacing:.02em;margin:0 0 20px}
label{display:block;margin:16px 0 6px;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-dim)}
input,select,textarea{width:100%;background:rgba(0,0,0,.22);color:var(--fg);
  border:1px solid var(--line);border-radius:3px;padding:11px 12px;font:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brass)}
button,.btn{display:inline-block;margin-top:20px;background:var(--brass);color:#151313;
  border:none;border-radius:3px;padding:13px 20px;font:inherit;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;font-size:13px;cursor:pointer;text-decoration:none}
/* Same size and weight as .btn, outlined instead of filled — a secondary
   action next to a primary one, not a smaller/quieter one. */
.btn.btn-outline{background:none;border:1px solid var(--brass);color:var(--brass)}
.btn.btn-outline:hover{background:rgba(200,149,82,.1)}
.grid{width:100%;border-collapse:collapse;margin-top:20px}
.grid th{text-align:left;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-dim);padding:9px 10px}
.grid td{padding:11px 10px;border-top:1px solid rgba(241,238,229,.08)}
.grid td a{margin-right:12px}
.error{color:var(--clay);border:1px solid var(--clay);border-radius:3px;padding:10px 12px}
.notice{color:var(--fg-dim);border:1px solid var(--line);border-radius:3px;padding:10px 12px}
.adminnav{border-bottom:1px solid var(--line);padding:14px 20px}
.adminnav a{margin-right:18px;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

.planwrap{position:relative;border-radius:3px;overflow:hidden;background:var(--paper);
  box-shadow:0 12px 34px -18px rgba(0,0,0,.8)}
.planimg{display:block;width:100%;height:auto}
.markers{position:absolute;inset:0}
.mk{position:absolute;transform:translate(-50%,-50%);margin:0;
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  font-weight:700;font-size:14px;letter-spacing:0;text-transform:none;padding:0;
  transition:transform .18s cubic-bezier(.34,1.4,.5,1)}
.mk .seats{position:absolute;top:100%;left:50%;transform:translateX(-50%);
  margin-top:3px;font-size:9px;font-weight:600;letter-spacing:.1em}
.mk-free{background:var(--sage);color:#0E1A15}
.mk-free:hover{transform:translate(-50%,-50%) scale(1.13)}
.mk-free .seats{color:#5C7466}
.mk-picked{background:var(--brass);color:#1A1207;
  box-shadow:0 0 0 4px rgba(200,149,82,.3);transform:translate(-50%,-50%) scale(1.15)}
.mk-picked .seats{color:#8C6631}
.mk-taken{background:transparent;color:#9E978A;border:1.5px solid #B7AF9D;cursor:not-allowed}
.mk-taken::after{content:"";position:absolute;width:46px;height:1.5px;
  background:var(--clay);transform:rotate(-38deg)}
.mk-small{background:transparent;color:#A79F8E;border:1px dashed #B7AF9D;cursor:not-allowed}
.mk-taken .seats,.mk-small .seats{color:#A79F8E}
.mk-seated{background:var(--brass);color:#1A1207}
.mk-seated .seats{color:#8C6631}
.mk-edit{background:var(--brass);color:#1A1207;cursor:grab;
  box-shadow:0 0 0 3px rgba(200,149,82,.25)}
.mk-edit:active{cursor:grabbing}
.legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px;font-size:13px;color:var(--fg-dim)}
.legend span{display:flex;align-items:center;gap:7px}
.legend i{width:11px;height:11px;border-radius:50%}

.book{max-width:520px;margin:0 auto;padding-bottom:60px}

/* The multi-venue root page (book/index.php). Each venue is a full-width
   .btn, stacked -- reuses the button styling everywhere else rather than
   inventing a second "list of links" look for a page nobody sees twice. */
.venuelist{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.venuelist .btn{margin-top:0;width:100%;text-align:center}

/* The venue's cover photo, shown above everything else. Absent entirely for a
   venue with no hero_image — the wrapper never gets .withhero and .venuebar
   falls back to its own top border below, unchanged from before this existed. */
.hero{position:relative;width:100%;height:220px;overflow:hidden;background:var(--ink-2)}
.hero img{display:block;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(16,30,26,0) 45%, var(--ink) 100%)}
@media(min-width:640px){ .hero{height:300px} }
.book.withhero .venuebar{border-top:none;padding-top:16px}

.venuebar{padding:22px 20px 18px;border-bottom:1px solid var(--line);border-top:1px solid transparent;
  background:linear-gradient(180deg,rgba(200,149,82,.09),transparent)}
.venuebar .name{font-size:20px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.venuebar .sub{font-size:13px;color:var(--fg-dim);margin-top:3px}
.pad{padding:20px}
h2.step{display:flex;align-items:baseline;gap:9px;font-size:20px;font-weight:600;
  letter-spacing:.03em;margin:26px 0 14px}
h2.step:first-of-type{margin-top:0}
h2.step span{font:11px ui-monospace,Menlo,monospace;color:var(--brass)}
.datepager{display:flex;justify-content:space-between;font-size:12px;
  letter-spacing:.04em;margin-bottom:8px}
.datepager a{text-decoration:none}
.jumpdate{display:flex;align-items:center;gap:10px;margin-top:12px}
.jumpdate label{margin:0;flex:0 0 auto}
.jumpdate input{width:auto;flex:0 0 auto;padding:8px 10px}

.dates{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px}
.date{flex:0 0 auto;width:56px;padding:10px 0;text-align:center;border-radius:3px;
  border:1px solid var(--line);text-decoration:none;color:var(--fg)}
.date em{display:block;font-style:normal;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-dim)}
.date b{display:block;font-size:19px;margin-top:2px}
.date[aria-current]{background:var(--brass);border-color:var(--brass);color:#151313}
.date[aria-current] em{color:rgba(21,19,19,.62)}
.date.shut{opacity:.26;text-decoration:line-through}
.sittings{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.sitting{display:block;border:1px solid var(--line);border-radius:3px;padding:13px 14px;
  cursor:pointer;margin:0;text-transform:none;letter-spacing:0}
.sitting input{position:absolute;opacity:0;width:0}
.sitting em{display:block;font-style:normal;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--fg-dim)}
.sitting b{display:block;font-size:23px;margin-top:3px}
.sitting:has(input:checked){border-color:var(--brass);background:rgba(200,149,82,.11)}
.sitting:has(input:checked) b{color:var(--brass)}
.sitting:has(input:focus-visible){outline:2px solid var(--brass);outline-offset:3px}
.paxlabel{margin-top:22px}

/* Party-size stepper. Still a real <input type="number" name="pax">
   underneath — with JS disabled it is a plain number field, typeable and
   arrow-key-adjustable, exactly as it always was. The buttons only enhance
   it; they do not replace it. */
.stepper{display:flex;align-items:center;justify-content:space-between;
  border:1px solid var(--line);border-radius:3px;padding:6px}
.stepper input{width:auto;flex:1;border:none;background:none;text-align:center;
  font-size:23px;font-weight:700;color:var(--fg);padding:8px 4px;
  -moz-appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.stepper input:focus{outline:none}
.stepbtn{all:unset;box-sizing:border-box;flex:0 0 auto;width:38px;height:38px;
  border-radius:50%;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--line);color:var(--fg-dim);font-size:19px;line-height:1;
  transition:border-color .15s,color .15s,background .15s}
.stepbtn:hover{border-color:var(--brass);color:var(--brass)}
.stepbtn:active{background:rgba(200,149,82,.12)}
/* Two co-equal booking paths on a 'diner_choice' venue — stacked, not one
   primary and one afterthought, since neither is the "default" choice. */
.choicebtns{display:flex;flex-direction:column;gap:10px}
.choicebtns button{margin-top:0;width:100%}
.stepbtn:disabled{opacity:.3;cursor:not-allowed;border-color:var(--line);color:var(--fg-dim)}
.toggle{display:flex;border:1px solid var(--line);border-radius:3px;overflow:hidden;
  width:fit-content;margin-bottom:14px}
.toggle a{padding:7px 15px;font-size:10px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-dim);text-decoration:none}
.toggle a[aria-current]{background:var(--brass);color:#151313}
.tablelist{display:flex;flex-direction:column;gap:8px}
.trow{display:flex;align-items:center;gap:13px;border:1px solid var(--line);
  border-radius:3px;padding:12px 14px;width:100%;text-align:left;margin:0;
  background:none;color:var(--fg);text-transform:none;letter-spacing:0;font-size:15px}
.trow .num{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--sage);color:#0E1A15;font-weight:700;flex:0 0 auto}
.trow small{display:block;color:var(--fg-dim);font-size:12px}
.trow[disabled]{opacity:.36}
.trow[disabled] .num{background:transparent;border:1.5px solid var(--fg-dim);color:var(--fg-dim)}
.summary{border:1px solid var(--line);border-left:2px solid var(--brass);border-radius:3px;
  padding:13px 15px;margin-bottom:20px;display:grid;gap:5px}
.summary div{display:flex;justify-content:space-between;font-size:14px}
.summary span{color:var(--fg-dim)}
.ref{border:1px dashed var(--line);border-radius:3px;padding:15px;text-align:center;margin:22px 0}
.ref em{display:block;font-style:normal;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--fg-dim)}
.ref b{display:block;font:24px ui-monospace,Menlo,monospace;letter-spacing:.14em;
  color:var(--brass);margin-top:5px}
.confirmedActions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.confirmedActions .btn{margin-top:0}

.sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:18px}
.sechead h1{margin:0}
.sechead .who{font-size:13px;color:var(--fg-dim);margin:3px 0 0}
.daynav{display:flex;gap:10px;align-items:center}
.btn-quiet{border:1px solid var(--line);border-radius:3px;padding:6px 11px;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-dim);text-decoration:none}
.btn-quiet:hover{border-color:var(--brass);color:var(--brass)}
.sitgroup{margin-bottom:26px}
.sitgroup .hd{display:flex;align-items:baseline;gap:12px;padding-bottom:9px;
  border-bottom:1px solid var(--line)}
.sitgroup .hd .t{font-size:15px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.sitgroup .hd .c{font-size:12px;color:var(--fg-dim)}
table.bk td small{color:var(--fg-dim);font-size:12px}
table.bk .tno{font-weight:700;color:var(--brass)}
table.bk .ph{font:12.5px ui-monospace,Menlo,monospace;color:var(--fg-dim)}
table.bk tr.void td{opacity:.4}
table.bk tr.void .nm{text-decoration:line-through}
tr.fresh{animation:flash 2.4s ease}
@keyframes flash{from{background:rgba(200,149,82,.28)}to{background:transparent}}
.chip{font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:3px 8px;border-radius:2px;border:1px solid currentColor;white-space:nowrap}
.chip.confirmed{color:var(--sage)}
.chip.seated{color:var(--brass)}
.chip.cancelled,.chip.no_show{color:var(--clay)}
.rowacts{display:flex;gap:6px;justify-content:flex-end;margin:0}
.rowacts button{margin:0;background:none;border:1px solid var(--line);color:var(--fg-dim);
  border-radius:2px;padding:4px 8px;font-size:10px;letter-spacing:.1em}
.rowacts button:hover{color:var(--clay);border-color:var(--clay)}
@media(prefers-reduced-motion:reduce){tr.fresh{animation:none}}