/* Pho N Rolls POS - brand orange #E17616 on black and white, from the logo. */

:root {
  --brand:        #E17616;
  --brand-dark:   #B85D0F;
  --brand-tint:   #FDF1E7;
  --brand-line:   #F3D2B4;
  --ink:          #16130F;
  --ink-2:        #4A423A;
  --ink-3:        #857A6E;
  --paper:        #FFFFFF;
  --paper-2:      #FAF7F4;
  --line:         #E6DFD8;
  --ok:           #1E7A5A;
  --ok-tint:      #E6F4EF;
  --warn:         #B7791F;
  --warn-tint:    #FDF6E3;
  --bad:          #C0392B;
  --bad-tint:     #FCEDEB;
  --radius:       12px;
  --radius-lg:    18px;
  --tap:          52px;
  --shadow:       0 1px 2px rgba(22,19,15,.06), 0 8px 24px rgba(22,19,15,.08);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

html, body {
  margin: 0; padding: 0;
  height: 100%;
  font-family: var(--font);
  font-size: 16px;
  color: var(--ink);
  background: var(--paper-2);
  overscroll-behavior: none;
}

body.app {
  /* dvh, not vh: on a tablet vh hides the last row of buttons under the toolbar.
     --app-h is the screen's measured height (keepScreenWhole() in app.js), so
     an iPad that comes back from its keyboard confused still gets the whole
     screen. Pinned, so Safari can't slide the page up under the keyboard and
     leave it there. */
  height: var(--app-h, 100dvh);
  position: fixed; top: 0; left: 0; right: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ------------------------------ top bar ------------------------------ */

.topbar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px;
  background: var(--ink);
  color: #fff;
  border-bottom: 3px solid var(--brand);
}
.topbar .logo {
  font-weight: 800; letter-spacing: .5px; font-size: 18px;
  display: flex; align-items: center; gap: 8px;
}
.topbar .logo b { color: var(--brand); }
.topbar .spacer { flex: 1 1 auto; }
.topbar .who { font-size: 14px; opacity: .85; }
.topbar a, .topbar button.linkish {
  color: #fff; text-decoration: none; font-size: 14px;
  padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.22);
  background: transparent; cursor: pointer;
}
.topbar a.on, .topbar a:active { background: var(--brand); border-color: var(--brand); }

/* ------------------------------ layout ------------------------------- */

.split {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(320px, 400px) 1fr;
  min-height: 0;              /* or a long order pushes the totals off-screen */
}
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .split .orderpane { order: 2; max-height: 45dvh; }
}

.pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.pane > .scroll { flex: 1 1 auto; overflow-y: auto; min-height: 0; -webkit-overflow-scrolling: touch; }

.orderpane { background: var(--paper); border-right: 1px solid var(--line); }
.menupane  { background: var(--paper-2); }

/* ---------------------------- order header --------------------------- */

.orderhead {
  padding: 12px 14px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.orderhead .title { font-size: 20px; font-weight: 800; }
.orderhead .sub { font-size: 13px; color: var(--ink-3); }
.pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; background: var(--brand-tint);
  color: var(--brand-dark); border: 1px solid var(--brand-line);
}
.pill.ok   { background: var(--ok-tint);   color: var(--ok);   border-color: #BFE3D6; }
.pill.warn { background: var(--warn-tint); color: var(--warn); border-color: #F0DFB0; }
.pill.bad  { background: var(--bad-tint);  color: var(--bad);  border-color: #F3C9C4; }

/* ----------------------------- order lines --------------------------- */

.lines { padding: 6px 0; }
.line {
  padding: 10px 14px; border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: start;
  cursor: pointer;
}
.line:active { background: var(--brand-tint); }
.line.sent  { background: #fff; }
.line.unsent { background: #FFFDF8; }
.line.unsent .qty { background: var(--brand); color: #fff; }
.line.void { opacity: .5; }
.line.void .nm { text-decoration: line-through; }
.line.sel { box-shadow: inset 4px 0 0 var(--brand); background: var(--brand-tint); }
.line .qty {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  font-weight: 800; background: var(--paper-2); border: 1px solid var(--line);
}
.line .nm { font-weight: 650; line-height: 1.3; }
.line .price { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.line .mods { font-size: 13px; color: var(--ink-2); margin-top: 3px; }
.line .mods span { display: block; }
.line .note {
  margin-top: 5px; font-size: 13px; font-weight: 700; color: #7A3D00;
  background: #FFF3E2; border: 1px solid var(--brand-line);
  padding: 4px 8px; border-radius: 7px; display: inline-block;
}
.line .flags { margin-top: 4px; display: flex; gap: 6px; flex-wrap: wrap; }

/* A line slides left to reveal "Remove" / "Void" underneath it. */
.linewrap { position: relative; overflow: hidden; }
.linewrap .line { position: relative; z-index: 2; background: var(--paper); will-change: transform;
                  touch-action: pan-y; }
.linewrap .line.unsent { background: #FFFDF8; }
.linedrawer {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 22px; background: var(--bad); color: #fff;
  font-weight: 800; font-size: 16px; letter-spacing: .3px;
}
.linewrap.armed .linedrawer { background: #8E1F14; }
.linewrap.armed .linedrawer span::after { content: ' →'; }
.linewrap.isvoid { overflow: visible; }

.empty { padding: 42px 20px; text-align: center; color: var(--ink-3); }

/* ------------------------------ totals ------------------------------- */

.totals { flex: 0 0 auto; border-top: 2px solid var(--ink); background: var(--paper); padding: 10px 14px 6px; }
.totals .row { display: flex; justify-content: space-between; padding: 3px 0; font-size: 14px; color: var(--ink-2); }
.totals .row.big { font-size: 24px; font-weight: 800; color: var(--ink); padding: 6px 0; }
.totals .row .v { font-variant-numeric: tabular-nums; }

.actions { flex: 0 0 auto; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); display: grid; gap: 8px; grid-template-columns: 1fr 1fr; background: var(--paper); }
.actions .wide { grid-column: 1 / -1; }

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

.btn {
  min-height: var(--tap); padding: 12px 16px;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--paper); color: var(--ink);
  font-size: 16px; font-weight: 700; font-family: var(--font);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .04s ease;
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:active { background: var(--brand-dark); }
.btn.dark    { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn.ok      { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn.danger  { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.ghost   { background: transparent; }
.btn.sm      { min-height: 40px; padding: 8px 12px; font-size: 14px; }
.btn.xl      { min-height: 64px; font-size: 19px; }

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

.cats {
  flex: 0 0 auto; display: flex; gap: 8px; padding: 10px 12px;
  overflow-x: auto; background: var(--paper); border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}
.cats::-webkit-scrollbar { display: none; }
.cat {
  flex: 0 0 auto; min-height: 44px; padding: 10px 16px; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--paper); font-weight: 700;
  font-size: 15px; cursor: pointer; white-space: nowrap; font-family: var(--font);
  color: var(--ink); text-decoration: none; display: inline-flex; align-items: center;
}
a.cat:visited { color: var(--ink); }
a.cat.on, a.cat.on:visited { color: #fff; }
.cat.on { background: var(--brand); border-color: var(--brand); color: #fff; }

.searchbar { flex: 0 0 auto; padding: 8px 12px; background: var(--paper); border-bottom: 1px solid var(--line); }
.searchbar input {
  width: 100%; min-height: 46px; padding: 10px 14px; font-size: 16px;
  border: 1.5px solid var(--line); border-radius: var(--radius); font-family: var(--font);
  background: var(--paper-2);
}
.searchbar input:focus { outline: none; border-color: var(--brand); background: #fff; }

.grid {
  display: grid; gap: 10px; padding: 12px;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
}
.tile {
  min-height: 92px; padding: 12px; text-align: left;
  border: 1.5px solid var(--line); border-radius: var(--radius);
  background: var(--paper); cursor: pointer; font-family: var(--font);
  display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow);
}
.tile:active { border-color: var(--brand); background: var(--brand-tint); }
.tile .no { font-size: 11px; font-weight: 800; color: var(--brand); letter-spacing: .4px; }
.tile .nm { font-size: 15px; font-weight: 700; line-height: 1.25; flex: 1 1 auto; }
.tile .pr { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tile .veg { font-size: 11px; color: var(--ok); font-weight: 700; }
.grouphead { grid-column: 1 / -1; font-size: 13px; font-weight: 800; color: var(--ink-3);
             text-transform: uppercase; letter-spacing: .6px; padding: 10px 2px 0; }

/* ------------------------------- sheet ------------------------------- */

.sheet-back {
  position: fixed; inset: 0; background: rgba(22,19,15,.5);
  display: flex; align-items: flex-end; justify-content: center; z-index: 60;
}
.sheet {
  background: var(--paper); width: min(620px, 100%);
  max-height: 92dvh; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  display: flex; flex-direction: column; min-height: 0;
  box-shadow: 0 -12px 40px rgba(0,0,0,.25);
}
@media (min-width: 700px) {
  .sheet-back { align-items: center; }
  .sheet { border-radius: var(--radius-lg); max-height: 88dvh; }
}
.sheet header {
  flex: 0 0 auto; padding: 14px 16px; border-bottom: 1px solid var(--line);
  display: flex; align-items: flex-start; gap: 12px;
}
.sheet header h2 { margin: 0; font-size: 19px; line-height: 1.25; }
.sheet header .pr { margin-left: auto; font-weight: 800; font-size: 19px; white-space: nowrap; }
.sheet .body { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding: 4px 16px 12px; }
.sheet footer {
  flex: 0 0 auto; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); display: grid; gap: 10px;
  grid-template-columns: auto 1fr; align-items: center;
}

.grp { margin: 14px 0 6px; }
.grp h3 {
  margin: 0 0 8px; font-size: 14px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .5px; color: var(--ink-3);
}
.grp h3 em { font-style: normal; color: var(--brand); font-weight: 700; text-transform: none; letter-spacing: 0; }
.opt {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center;
  padding: 9px 10px; border: 1.5px solid var(--line); border-radius: 10px;
  margin-bottom: 7px; background: var(--paper);
}
.opt.on { border-color: var(--brand); background: var(--brand-tint); }
.opt .nm { font-weight: 650; font-size: 15px; }
.opt .dl { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.opt .dl.plus { color: var(--brand-dark); font-weight: 700; }

.stepper { display: flex; align-items: center; gap: 2px; }
.stepper button {
  width: 42px; height: 42px; border-radius: 9px; border: 1.5px solid var(--line);
  background: var(--paper); font-size: 22px; font-weight: 700; line-height: 1;
  cursor: pointer; color: var(--ink); font-family: var(--font);
}
.stepper button:active { background: var(--brand); color: #fff; border-color: var(--brand); }
.stepper button:disabled { opacity: .3; }
.stepper .n {
  min-width: 34px; text-align: center; font-weight: 800; font-size: 17px;
  font-variant-numeric: tabular-nums;
}
.stepper .n.zero { color: var(--ink-3); font-weight: 500; }

.pickone { display: grid; gap: 7px; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); }
.pickone .opt { grid-template-columns: 1fr auto; }
.opt.toggle { cursor: pointer; }
.opt.toggle .nm::before {
  content: ''; display: inline-block; width: 17px; height: 17px; margin-right: 9px;
  border: 2px solid var(--line); border-radius: 5px; vertical-align: -3px;
}
.opt.toggle.on .nm::before {
  background: var(--brand); border-color: var(--brand);
  box-shadow: inset 0 0 0 3px #fff;
}

.notebox { margin-top: 16px; }
.notebox label { display: block; font-size: 14px; font-weight: 800; margin-bottom: 6px; }
.notebox textarea {
  width: 100%; min-height: 72px; padding: 10px 12px; font-size: 16px;
  border: 1.5px solid var(--line); border-radius: 10px; font-family: var(--font);
  resize: vertical; background: var(--paper-2);
}
.notebox textarea:focus { outline: none; border-color: var(--brand); background: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip {
  padding: 7px 12px; border-radius: 999px; border: 1.5px solid var(--line);
  background: var(--paper); font-size: 13px; font-weight: 650; cursor: pointer;
  font-family: var(--font);
}
.chip:active,
.chip.on { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ----------------------------- floor plan ---------------------------- */

.floor { position: relative; flex: 1 1 auto; min-height: 0; margin: 10px 12px 12px;
         display: grid; place-items: center; overflow: auto; }
.floorarea {
  position: relative;
  width: 100%; max-width: 100%; max-height: 100%;
  aspect-ratio: 1.6;
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 5%,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 5% 100%,
    var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
}
.floorarea.editing { outline: 2px dashed var(--brand); outline-offset: 3px; }

.tbl {
  position: absolute; transform: translate(-50%, -50%);
  padding: 6px; border-radius: 12px; border: 2.5px solid var(--line); background: var(--paper);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; font-family: var(--font); box-shadow: var(--shadow); gap: 1px;
  overflow: hidden; text-align: center; container-type: inline-size;
}
.tbl.round { border-radius: 50%; }
.tbl .n  { font-size: clamp(14px, 4.5cqw, 30px); font-weight: 800; line-height: 1.05; }
.tbl .s  { font-size: clamp(9px, 2.1cqw, 13px); color: var(--ink-3); }
.tbl .t  { font-size: clamp(11px, 2.6cqw, 16px); font-weight: 700; font-variant-numeric: tabular-nums; }
.tbl .mins { font-size: clamp(9px, 2.2cqw, 13px); color: var(--ink-2); font-weight: 650;
             font-variant-numeric: tabular-nums; }
.tbl .badge {
  margin-top: 2px; font-size: clamp(8px, 1.9cqw, 11px); font-weight: 800;
  background: var(--brand); color: #fff; border-radius: 999px; padding: 1px 7px;
}
.tbl.free     { border-color: var(--line); }
.tbl.seated   { border-color: var(--warn); background: var(--warn-tint); }
.tbl.ordering { border-color: var(--brand); background: var(--brand-tint); }
.tbl.away     { border-color: var(--ok); background: var(--ok-tint); }
.tbl.long-stay { border-color: var(--bad); background: var(--bad-tint); }
.tbl.long-stay .mins { color: var(--bad); font-weight: 800; }
.tbl.drag { opacity: .75; z-index: 5; }
.tbl.picked { outline: 3px solid var(--brand); outline-offset: 2px; z-index: 4; }

/* Tables pushed together read as one unit: a dashed tie and a shared name. */
.tbl.joined { border-style: dashed; border-width: 3px; }
.tbl.joined::after {
  content: ''; position: absolute; inset: -7px; border-radius: inherit;
  border: 2px dotted var(--brand); opacity: .45; pointer-events: none;
}
.tbl.chosen { outline: 4px solid var(--brand); outline-offset: 3px; z-index: 6;
              box-shadow: 0 0 0 9px rgba(225,118,22,.16); }
.floorarea.joining { outline: 2px dashed var(--ok); outline-offset: 3px; }

.floorarea.editing .tbl { cursor: grab; }
.tbl .grip {
  position: absolute; right: -2px; bottom: -2px; width: 26px; height: 26px;
  border-radius: 0 0 10px 0; cursor: nwse-resize; display: none;
  background:
    linear-gradient(135deg, transparent 52%, var(--brand) 52%, var(--brand) 62%, transparent 62%,
                    transparent 70%, var(--brand) 70%, var(--brand) 80%, transparent 80%);
}
.floorarea.editing .tbl .grip { display: block; }

.toolbar { flex: 0 0 auto; padding: 0 12px 8px; }
.toolrow {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  background: var(--paper); border: 1.5px solid var(--brand-line); border-radius: var(--radius);
  padding: 10px 14px; box-shadow: var(--shadow);
}
.toolrow label.inline { display: flex; gap: 7px; align-items: center; font-size: 13px; font-weight: 650; }
.stepper.sm button { width: 34px; height: 34px; font-size: 18px; }
.stepper.sm .n { min-width: 26px; font-size: 15px; }

.pill.sat { background: var(--paper-2); color: var(--ink-2); border-color: var(--line);
            font-variant-numeric: tabular-nums; }
.pill.sat.warn { background: var(--bad-tint); color: var(--bad); border-color: #F3C9C4; }

.legend { display: flex; gap: 14px; flex-wrap: wrap; padding: 0 14px 10px; font-size: 13px; color: var(--ink-2); }
.legend i { width: 13px; height: 13px; border-radius: 4px; display: inline-block; margin-right: 5px; border: 2px solid; vertical-align: -2px; }

/* ------------------------------ misc UI ------------------------------ */

.toast-wrap { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90;
              display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast {
  background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 999px;
  font-size: 15px; font-weight: 650; box-shadow: var(--shadow); max-width: 90vw;
}
.toast.bad  { background: var(--bad); }
.toast.ok   { background: var(--ok); }
.toast.warn { background: var(--warn); }

.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
        padding: 16px; margin-bottom: 14px; box-shadow: var(--shadow); }
.card h2 { margin: 0 0 12px; font-size: 17px; }

table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th, table.data td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--line); }
table.data th { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-3); }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }

input[type=text], input[type=number], input[type=password], input[type=tel], input[type=email],
input[type=search], input[type=date], select, textarea {
  font-family: var(--font); font-size: 16px; padding: 10px 12px;
  border: 1.5px solid var(--line); border-radius: 9px; background: var(--paper);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); }
label.fld { display: block; margin-bottom: 12px; font-size: 14px; font-weight: 650; }
label.fld input, label.fld select, label.fld textarea { display: block; width: 100%; margin-top: 5px; font-weight: 400; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 18px; }
.muted { color: var(--ink-3); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
pre.paper {
  background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 14px;
  font-family: ui-monospace, Menlo, monospace; font-size: 12px; line-height: 1.45;
  white-space: pre-wrap; overflow-x: auto;
}

/* ------------------------------ sign in ------------------------------ */

.signin { min-height: 100dvh; display: grid; place-items: center; padding: 20px;
          background: var(--ink); }
.signin .box { background: var(--paper); border-radius: var(--radius-lg); padding: 26px 28px 30px;
               width: min(400px, 100%); box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.signin h1 { margin: 0 0 4px; font-size: 26px; text-align: center; }
.signin h1 b { color: var(--brand); }
.signin .brandmark { display: block; width: min(190px, 62%); height: auto; margin: 2px auto 14px; }
.signin .tag { text-align: center; color: var(--ink-3); font-size: 13px; margin-bottom: 16px;
               text-transform: uppercase; letter-spacing: .6px; font-weight: 700; }
.pinwho { text-align: center; font-size: 15px; color: var(--ink-2); margin-bottom: 4px; }
.pinmsg { text-align: center; font-size: 13px; min-height: 18px; margin: 2px 0 6px; }
.pinmsg.bad { color: var(--bad); font-weight: 700; }

.pinpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 12px; }
.pinpad button { min-height: 62px; font-size: 23px; font-weight: 700; border-radius: 12px;
                 border: 1.5px solid var(--line); background: var(--paper-2); cursor: pointer;
                 font-family: var(--font); color: var(--ink);
                 -webkit-user-select: none; user-select: none; }
.pinpad button:active { background: var(--brand); color: #fff; border-color: var(--brand); }
.pinpad button.go { font-size: 17px; background: var(--ink); color: #fff; border-color: var(--ink); }
.pinpad button.go:active { background: var(--brand); border-color: var(--brand); }

.pindots { display: flex; gap: 13px; justify-content: center; margin: 14px 0 2px; }
.pindots i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line);
             transition: transform .12s ease, background .12s ease; }
.pindots i.on { background: var(--brand); border-color: var(--brand); transform: scale(1.12); }
.pindots.busy { opacity: .55; }
.pindots.shake { animation: shake .42s ease; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-9px); } 40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); } 80% { transform: translateX(4px); }
}

.topbar .who.dev {
  border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 4px 11px;
  font-size: 12px; opacity: .8;
}

/* Bigger touch targets on a tablet, where there is no cursor to aim with. */
@media (pointer: coarse) {
  :root { --tap: 58px; }
  .btn { font-size: 17px; }
  .tile { min-height: 104px; }
  .line { padding: 13px 14px; }
  .stepper button { width: 48px; height: 48px; }
}

@media print { .noprint { display: none !important; } }

/* ------------------------- PIN screen (dark) ------------------------- */
/*
 * Four cards you type into. On the last digit they fan out like a hand,
 * are gathered up left to right into one, and that one spins while the PIN
 * is checked: green with a tick to go in, red with a shake to try again.
 * Everything here is scoped to .pinmode: the sign-in page's body, and the
 * .pinoverlay a manager's PIN comes up in (voids, discounts, refunds) - one
 * pad, built by POS.pinStage in app.js.
 */

.pinmode {
  --pin-bg:      #0D0B09;
  --pin-card:    #181512;
  --pin-cell:    #24201C;
  --pin-key:     #211D19;
  --pin-line:    rgba(255,255,255,.08);
  --pin-text:    #F6F0E9;
  --pin-muted:   #9C9186;
  --pin-faint:   #72685F;
  --pin-glow:    rgba(225,118,22,.38);
  --pin-ok:      #34D399;
  --pin-ok-glow: rgba(52,211,153,.42);
  --pin-bad:     #F87171;
  --pin-bad-glow:rgba(248,113,113,.4);
  --spring:      cubic-bezier(.2,.9,.25,1.22);
  --glide:       cubic-bezier(.55,0,.25,1);
  background:
    radial-gradient(ellipse 70% 45% at 50% -8%, rgba(225,118,22,.17), transparent 70%),
    var(--pin-bg);
  color: var(--pin-text);
}

.pinstage { width: min(420px, 100%); }

.pincard {
  background: linear-gradient(180deg, #1D1916 0%, var(--pin-card) 100%);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 26px;
  padding: 14px 24px 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);
}
.pincard .grab { width: 38px; height: 4px; border-radius: 3px; background: rgba(255,255,255,.12);
                 margin: 0 auto 18px; }

.pinlogo { display: block; width: 76px; height: 76px; border-radius: 18px; margin: 0 auto 14px;
           object-fit: cover; box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06); }
.pinword { text-align: center; font-size: 24px; font-weight: 800; margin-bottom: 12px; letter-spacing: .5px; }
.pinword b { color: var(--brand); }

.pinhead { text-align: center; }
.pinhead h2 { margin: 0; font-size: 21px; font-weight: 750; letter-spacing: -.2px;
              color: var(--pin-text); transition: color .25s ease; }
.pinhead p  { margin: 5px 0 0; font-size: 13.5px; color: var(--pin-muted); min-height: 1.3em; }
.pinhead p b { color: var(--pin-text); font-weight: 650; }
.pinhead .pindevice { font-weight: 650; color: #C9BEB2; }
.pinstage[data-tone="ok"]  .pinhead h2 { color: var(--pin-ok); }
.pinstage[data-tone="bad"] .pinhead h2 { color: var(--pin-bad); }

/* the cards */
.pinmode .cells { position: relative; display: flex; justify-content: center; gap: 12px;
                  height: 66px; margin: 22px 0 16px; }

.pinmode .cell {
  position: relative; flex: 0 0 auto;
  width: 58px; height: 66px; border-radius: 14px;
  background: var(--pin-cell);
  border: 1.5px solid var(--pin-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 6px 16px rgba(0,0,0,.35);
  display: grid; place-items: center;
  transition: transform .42s var(--spring), opacity .18s ease,
              border-color .2s ease, box-shadow .2s ease;
  will-change: transform;
}
.pinmode .cell.active {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(225,118,22,.13), 0 0 24px var(--pin-glow);
}
.pinmode .cell.filled { border-color: rgba(225,118,22,.45); }
.pinmode .cell.pop    { animation: pinpop .2s ease; }
@keyframes pinpop { 50% { transform: scale(1.08); } }

.pinmode .cell .digit, .pinmode .cell .dot, .pinmode .cell .caret { position: absolute; }
.pinmode .cell .digit { font-size: 28px; font-weight: 750; color: var(--pin-text);
                        opacity: 0; transform: translateY(4px);
                        transition: opacity .12s ease, transform .12s ease; }
.pinmode .cell .dot   { width: 13px; height: 13px; border-radius: 50%; background: var(--pin-text);
                        opacity: 0; transform: scale(.4);
                        transition: opacity .14s ease, transform .18s var(--spring); }
.pinmode .cell .caret { width: 2px; height: 26px; border-radius: 1px; background: var(--brand);
                        opacity: 0; }
.pinmode .cell.show .digit                { opacity: 1; transform: none; }
.pinmode .cell.filled:not(.show) .dot     { opacity: 1; transform: none; }
.pinmode .cell.active .caret              { opacity: 1; animation: caret 1.05s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* 1. fan: lift into an arc, like a hand of cards */
.pinstage[data-state="fan"] .cell {
  transform: translate(calc(var(--k) * -9px), calc(-10px + var(--kk) * 5px)) rotate(calc(var(--k) * 8deg));
  border-color: rgba(225,118,22,.55);
  box-shadow: 0 14px 26px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
}

/* 2. gather: picked up left to right into the middle */
.pinstage[data-state="gather"] .cell {
  transform: translate(var(--dx), 0) rotate(0deg);
  transition: transform .34s var(--glide) calc(var(--i) * 70ms), opacity .18s ease;
}
.pinstage[data-state="gather"] .cell .dot { opacity: 0; transition-delay: calc(var(--i) * 70ms + .18s); }

/* 3-5. check / ok / bad: the gathered stack becomes the one sealed card */
.pinstage[data-state="check"] .cell,
.pinstage[data-state="ok"] .cell,
.pinstage[data-state="bad"] .cell { transform: translate(var(--dx), 0); opacity: 0; transition: none; }

/* deal: the empty cards snap back to the stack, then fan out to their places */
.pinstage[data-state="deal"] .cell { transform: translate(var(--dx), 0); opacity: 1; transition: none; }
.pinstage[data-state="idle"] .cell { transition-delay: calc(var(--i) * 50ms), 0s, 0s, 0s; }

/* the sealed card */
.pinmode .seal {
  position: absolute; left: 50%; top: 0; width: 58px; height: 66px; margin-left: -29px;
  border-radius: 14px; opacity: 0; transform: scale(.94); pointer-events: none; z-index: 20;
  transition: opacity .16s ease, transform .3s var(--spring), box-shadow .3s ease;
}
.pinmode .seal .ring { position: absolute; inset: 0; border-radius: 14px; overflow: hidden;
                       background: var(--pin-line); }
.pinmode .seal .spin {
  position: absolute; inset: -60%;
  background: conic-gradient(from 0deg, transparent 0 58%, rgba(225,118,22,.18) 70%,
                             var(--brand) 88%, #FFC08A 95%, transparent 100%);
  animation: sealspin .95s linear infinite;
}
.pinmode .seal .fill { position: absolute; inset: 2px; border-radius: 12px; background: var(--pin-cell);
                       box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
@keyframes sealspin { to { transform: rotate(360deg); } }

.pinstage[data-state="check"] .seal,
.pinstage[data-state="ok"] .seal,
.pinstage[data-state="bad"] .seal { opacity: 1; transform: none; }
.pinstage[data-state="check"] .seal { box-shadow: 0 0 26px rgba(225,118,22,.28), 0 10px 22px rgba(0,0,0,.45); }

.pinstage[data-state="ok"] .seal  { box-shadow: 0 0 30px var(--pin-ok-glow), 0 0 0 1px rgba(52,211,153,.3); }
.pinstage[data-state="ok"] .seal .spin  { animation: none; background: var(--pin-ok); }
.pinstage[data-state="bad"] .seal { box-shadow: 0 0 26px var(--pin-bad-glow);
                                    animation: shake .42s ease; }
.pinstage[data-state="bad"] .seal .spin { animation: none; background: var(--pin-bad); }

/* success: a ring pulses out, sparks burst, the tick draws itself */
.pinmode .seal .pulse { position: absolute; inset: 0; border-radius: 14px; border: 2px solid var(--pin-ok);
                        opacity: 0; }
.pinstage[data-state="ok"] .seal .pulse { animation: sealpulse .75s ease-out forwards; }
@keyframes sealpulse { 0% { opacity: .85; transform: scale(1); }
                       100% { opacity: 0; transform: scale(1.75); } }

.pinmode .seal .burst i {
  position: absolute; left: 50%; top: 50%; width: 2px; height: 10px; margin: -5px 0 0 -1px;
  border-radius: 2px; background: var(--pin-ok); opacity: 0;
  transform: rotate(var(--r)) translateY(-40px) scaleY(.2);
}
.pinstage[data-state="ok"] .seal .burst i { animation: sealburst .62s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes sealburst {
  0%   { opacity: 1; transform: rotate(var(--r)) translateY(-38px) scaleY(.2); }
  55%  { opacity: 1; transform: rotate(var(--r)) translateY(-52px) scaleY(1); }
  100% { opacity: 0; transform: rotate(var(--r)) translateY(-64px) scaleY(.3); }
}

.pinmode .seal svg { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px;
                     margin: -14px 0 0 -14px; fill: none; stroke-width: 2.6;
                     stroke-linecap: round; stroke-linejoin: round; }
.pinmode .seal .tick  { stroke: var(--pin-ok);  stroke-dasharray: 24; stroke-dashoffset: 24; }
.pinmode .seal .cross { stroke: var(--pin-bad); stroke-dasharray: 30; stroke-dashoffset: 30; }
.pinstage[data-state="ok"]  .seal .tick  { animation: sealdraw .38s ease-out .14s forwards; }
.pinstage[data-state="bad"] .seal .cross { animation: sealdraw .3s ease-out forwards; }
@keyframes sealdraw { to { stroke-dashoffset: 0; } }

.pinhint { text-align: center; font-size: 12.5px; color: var(--pin-faint); margin: 0 0 16px; }

/* the keypad */
.pinmode .pinpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0;
                   transition: opacity .2s ease; }
.pinmode .pinpad button {
  min-height: 60px; border-radius: 16px; cursor: pointer;
  background: var(--pin-key); color: var(--pin-text);
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  font: 650 24px/1 var(--font);
  -webkit-user-select: none; user-select: none;
  transition: background .12s ease, transform .08s ease, color .12s ease;
}
.pinmode .pinpad button.fn { font-size: 19px; color: #B4A99D; }
.pinmode .pinpad button:active { background: var(--brand); color: #fff; transform: scale(.96); }
.pinstage:not([data-state="idle"]) .pinpad { opacity: .4; pointer-events: none; }

.pinfoot { text-align: center; color: var(--pin-faint); font-size: 12px; margin: 16px 0 0; }

/* The same pad over any screen, for a manager's PIN: a void, a discount, a refund. */
.pinoverlay { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
              padding: 20px; overflow-y: auto; animation: pinin .18s ease-out; }
.pinoverlay.out { opacity: 0; transition: opacity .18s ease; }
@keyframes pinin { from { opacity: 0; } to { opacity: 1; } }
.pinoverlay .pincancel { background: none; border: 1px solid rgba(255,255,255,.14); color: var(--pin-text);
                         font: 650 16px/1 var(--font); padding: 14px 34px; border-radius: 14px; cursor: pointer; }
.pinoverlay .pincancel:active { background: rgba(255,255,255,.08); }

@media (max-width: 380px) {
  .pinmode .cells { gap: 9px; }
  .pinmode .cell, .pinmode .seal { width: 52px; height: 60px; }
  .pinmode .seal { margin-left: -26px; }
  .pinmode .cells { height: 60px; }
  .pincard { padding: 12px 16px 18px; }
}
@media (max-height: 700px) {
  .pinlogo { width: 56px; height: 56px; border-radius: 14px; margin-bottom: 10px; }
  .pinmode .pinpad button { min-height: 52px; }
  .pinmode .cells { margin: 16px 0 12px; }
}

/* Motion is decoration here, never the message: without it you still get
   the card, the colour and the words. */
@media (prefers-reduced-motion: reduce) {
  .pinmode .cell, .pinmode .seal { transition: none !important; }
  .pinmode .seal .burst, .pinmode .seal .pulse { display: none; }
  .pinmode .seal .spin { animation-duration: 2.4s; }
  .pinstage[data-state="bad"] .seal { animation: none; }
}

/* ------------------- order page: customer, recall ------------------- */

.custchip {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
  margin-top: 6px; padding: 5px 10px; border-radius: 10px; max-width: 100%;
  border: 1.5px dashed var(--brand-line); background: var(--brand-tint); color: var(--brand-dark);
  font: 650 13px/1.25 var(--font); cursor: pointer; text-align: left;
}
.custchip.has { border-style: solid; background: var(--paper); color: var(--ink); }
.custchip .cnote { font-weight: 500; color: var(--ink-2); font-size: 12px;
                   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 280px; }

.recall { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-bottom: 8px; }
.recall .btn { min-height: 48px; font-size: 14px; }
.removednote { background: var(--bad-tint); color: var(--bad); border-radius: 10px; padding: 8px 12px;
               font-size: 13px; font-weight: 650; margin-bottom: 8px; }

/* a paid order's menu is behind glass */
.menupane { position: relative; }
.menupane.closed::after {
  content: 'This order is closed. Reopen it to change it, or press Next order.';
  position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 24px;
  background: rgba(250,247,244,.82); backdrop-filter: blur(2px);
  font-weight: 700; color: var(--ink-2); text-align: center; font-size: 16px;
}

/* ------------------------- picking a table -------------------------- */

.tablepick { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 8px 0 4px; }
.tablepick .tp {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 72px; border-radius: 12px; cursor: pointer; font-family: var(--font);
  border: 1.5px solid var(--line); background: var(--paper);
}
.tablepick .tp b { font-size: 20px; }
.tablepick .tp span { font-size: 12px; color: var(--ink-3); }
.tablepick .tp.taken { border-color: var(--brand); background: var(--brand-tint); }
.tablepick .tp.taken span { color: var(--brand-dark); font-weight: 650; }

/* -------------------------- counting the till -------------------------- */

.countsheet { width: min(560px, 100%); }
.count-grid { display: grid; gap: 6px; }
.count-h { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px;
           color: var(--ink-3); margin-top: 6px; }
.count-row { display: grid; grid-template-columns: 64px 16px 1fr 92px; align-items: center; gap: 8px; }
.count-row .den { font-weight: 800; font-size: 18px; }
.count-row .x { color: var(--ink-3); }
.count-row input { width: 100%; font-size: 20px; padding: 8px 10px; text-align: right; }
.count-row .sub { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.count-sum { position: sticky; bottom: -12px; background: var(--paper); border-top: 1px solid var(--line);
             margin-top: 12px; padding: 10px 0 4px; }
.count-sum .line { display: flex; justify-content: space-between; padding: 3px 0; font-variant-numeric: tabular-nums; }
.count-sum .line.big { font-size: 19px; }
.count-sum .line.ok b   { color: var(--ok); }
.count-sum .line.warn b { color: var(--warn); }
.count-sum .line.bad b  { color: var(--bad); }

/* ---------------------------- past orders ---------------------------- */

.tabs2 { display: flex; gap: 6px; margin-bottom: 12px; }
.tabs2 a { padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--line); font-weight: 700;
           text-decoration: none; color: var(--ink); background: var(--paper); }
.tabs2 a.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.pastbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.pastbar input[type=search] { flex: 1 1 220px; }
tr.removed td { color: var(--ink-3); text-decoration: line-through; }
tr.removed td.why { text-decoration: none; color: var(--bad); }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--paper-2); }

/* ------------------------ admin: side navigation ------------------------ */

.adminshell { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 220px 1fr; }
.sidenav { background: var(--paper); border-right: 1px solid var(--line); overflow-y: auto; padding: 12px 10px 24px; }
.sidenav .grp-t { font-size: 11px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase;
                  color: var(--ink-3); padding: 14px 10px 6px; }
.sidenav .grp-t:first-child { padding-top: 4px; }
.sidenav a { display: block; padding: 9px 12px; border-radius: 10px; text-decoration: none;
             color: var(--ink); font-weight: 600; font-size: 15px; }
.sidenav a:hover { background: var(--paper-2); }
.sidenav a.on { background: var(--brand); color: #fff; }
.adminshell > .pane { min-height: 0; }
@media (max-width: 760px) {
  .adminshell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .sidenav { display: flex; gap: 4px; overflow-x: auto; overflow-y: hidden; padding: 8px 10px;
             border-right: 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
  .sidenav .grp-t { display: none; }
  .sidenav a { flex: 0 0 auto; }
}

/* A phone is narrower than the top bar: let the bar scroll sideways on its
   own, rather than the whole page. */
@media (max-width: 760px) {
  .topbar { overflow-x: auto; scrollbar-width: none; gap: 8px; padding: 8px 10px; }
  .topbar::-webkit-scrollbar { display: none; }
  .topbar > * { flex: 0 0 auto; }
  .topbar .spacer { flex: 1 0 8px; }
}

/* the paid-order buttons: two across, so the items above keep their room */
.recall { grid-template-columns: 1fr 1fr; gap: 6px; }
.recall .btn { min-height: 42px; font-size: 13.5px; padding: 6px 8px; }
.recall .btn.danger { grid-column: 1 / -1; }
.actions > .recall, .actions > .removednote { grid-column: 1 / -1; }

/* a discount under a dish on the order */
.line .disc { display: block; font-size: 12.5px; color: var(--ok); font-weight: 650; margin-top: 2px; }

/* ---- refunds ---- */
.btn.warn    { background: var(--warn); border-color: var(--warn); color: #fff; }
.refundnote { background: var(--warn-tint, #fff4e0); border-radius: 10px; padding: 8px 12px; font-size: 13px; line-height: 1.5; }
.actions > .refundnote { grid-column: 1 / -1; }
.refundsheet { max-width: 560px; }
.refundsheet .rf-lines { margin: 10px 0 4px; border-top: 1px solid var(--line); }
.rf-line { display: grid; grid-template-columns: 1fr auto 76px; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.rf-line.on { background: var(--warn-tint, #fff4e0); }
.rf-line.done { opacity: .5; }
.rf-line .step { display: inline-flex; align-items: center; gap: 8px; }
.rf-line .step b { min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; }
.rf-line .amt { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.rf-h { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); margin-top: 14px; }