/* The seating chart: its colours over the web iOS kit (src/ioskit/ios.css), the tab bar (as Stitchbay's), and its own
   pieces: the counts, guest rows, chips, the room (a canvas: js/room.js reads the --sc- colours), the tray of people
   without a seat, the bar over the room, and the print previews. Warm paper and berry in light, ink and rose in dark. */
:root {
  --canvas: #f5f2ee; --grouped: #f5f2ee; --row: #fffdfa; --card: #fffdfa;
  --berry: #8c2f55; --tint: var(--berry); --forest: var(--berry); --coral: var(--berry);
  --sc-floor: #fbf8f2; --sc-out: #e9e4dc; --sc-line: #c8c0b3; --sc-table: #ffffff; --sc-seat: #ffffff; --sc-thing: #ece6da; --sc-dim: #7b746a; --sc-on: #ffffff;
  --sc-hi: rgba(140, 47, 85, 0.1);
  --tabbar-space: calc(var(--sab) + 96px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #121113; --grouped: #121113; --row: #1f1d21; --card: #1f1d21;
    --berry: #f2a4c2; --tint: #f2a4c2; --forest: #f2a4c2; --coral: #f2a4c2; --text: #f4f1f3; --text2: rgba(244, 241, 243, 0.62); --text3: rgba(244, 241, 243, 0.3); --sep: rgba(244, 241, 243, 0.13);
    --glass: rgba(38, 35, 40, 0.86); --glass-edge: rgba(255, 240, 248, 0.08);
    --sc-floor: #1b191d; --sc-out: #0c0b0d; --sc-line: #4a454d; --sc-table: #2c2930; --sc-seat: #232026; --sc-thing: #2a272d; --sc-dim: #9a939c; --sc-on: #2a0f1b;
    --sc-hi: rgba(242, 164, 194, 0.14);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --canvas: #121113; --grouped: #121113; --row: #1f1d21; --card: #1f1d21;
  --berry: #f2a4c2; --tint: #f2a4c2; --forest: #f2a4c2; --coral: #f2a4c2; --text: #f4f1f3; --text2: rgba(244, 241, 243, 0.62); --text3: rgba(244, 241, 243, 0.3); --sep: rgba(244, 241, 243, 0.13);
  --glass: rgba(38, 35, 40, 0.86); --glass-edge: rgba(255, 240, 248, 0.08);
  --sc-floor: #1b191d; --sc-out: #0c0b0d; --sc-line: #4a454d; --sc-table: #2c2930; --sc-seat: #232026; --sc-thing: #2a272d; --sc-dim: #9a939c; --sc-on: #2a0f1b;
  --sc-hi: rgba(242, 164, 194, 0.14);
  color-scheme: dark;
}
body { background: var(--canvas); }
.btn-primary { --btn: var(--berry); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-primary, :root:not([data-theme="light"]) .btn-bordered.prominent, :root:not([data-theme="light"]) .glass-prominent { color: #2a0f1b; } }
:root[data-theme="dark"] .btn-primary, :root[data-theme="dark"] .btn-bordered.prominent, :root[data-theme="dark"] .glass-prominent { color: #2a0f1b; }

/* ---------- tabs ---------- */
#stack .tab-pane { position: absolute; inset: 0; }
#stack .tab-pane[hidden] { display: none; }
#stack .screen-body { padding-bottom: var(--tabbar-space); }
.tabbar { position: absolute; z-index: 10; left: 50%; bottom: calc(var(--sab) + 14px); transform: translateX(-50%); display: grid; grid-template-columns: repeat(3, 96px); padding: 4px; border-radius: 34px;
  background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8); box-shadow: 0 0 0 0.5px var(--glass-edge), 0 8px 30px rgba(30, 10, 20, 0.14); --i: 0; }
.tab-pill { position: absolute; top: 4px; bottom: 4px; left: 4px; width: 96px; border-radius: 30px; background: var(--fill); transform: translateX(calc(var(--i) * 100%)); transition: transform 0.38s var(--ease); }
.tab-item { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 54px; border: 0; background: none; border-radius: 30px; color: var(--text); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tab-item.on { color: var(--berry); }
.tab-item svg { width: 24px; height: 24px; }
.tab-label { font-size: 10.5px; line-height: 12px; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; }
body.has-sheet .tabbar { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .tab-pill { transition: none; } }
@media (min-width: 700px) {
  .tabbar { bottom: auto; top: calc(var(--sat) + 8px); grid-template-columns: repeat(3, 164px); padding: 3px; border-radius: 26px; }
  .tab-pill { top: 3px; bottom: 3px; left: 3px; width: 164px; border-radius: 22px; }
  .tab-item { flex-direction: row; gap: 6px; height: 44px; border-radius: 22px; }
  .tab-item svg { width: 19px; height: 19px; }
  .tab-label { font-size: 15px; line-height: 20px; }
  #stack .screen.tab-root .nav-title { visibility: hidden; }
  #stack .screen-body { padding-bottom: calc(var(--sab) + 32px); }
}
@media (min-width: 700px) and (max-width: 900px) { .tabbar { grid-template-columns: repeat(3, 138px); } .tab-pill { width: 138px; } .tab-label { font-size: 13px; } }

/* ---------- shared ---------- */
.wrap { max-width: 760px; margin: 0 auto; padding: 0 16px; }
.big-title { font: 800 30px/1.1 var(--sys); letter-spacing: -0.02em; margin: 6px 4px 2px; overflow-wrap: anywhere; }
.sub-title { color: var(--text2); font-size: 15px; margin: 0 4px 12px; }
.title-btn { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 0; color: inherit; font: inherit; cursor: pointer; border-radius: 12px; }
.title-btn .sub-title svg { width: 13px; height: 13px; vertical-align: -1px; margin-left: 3px; opacity: 0.7; }
.counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 4px 0 6px; }
.count { background: var(--row); border-radius: 16px; padding: 10px 6px 9px; text-align: center; box-shadow: 0 0 0 0.5px var(--sep); min-width: 0; }
.count b { display: block; font: 800 22px/1.1 var(--rounded); letter-spacing: -0.01em; }
.count span { display: block; font-size: 11.5px; line-height: 14px; color: var(--text2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.count.warn b { color: var(--berry); }
.meal-line { font-size: 13px; line-height: 18px; color: var(--text2); margin: 2px 4px 10px; }
.tools { display: flex; gap: 8px; align-items: center; margin: 4px 0 2px; }
.tools .search-wrap { flex: 1; min-width: 0; position: relative; }
.tools input[type="search"] { box-sizing: border-box; width: 100%; height: 38px; border: 0; border-radius: 12px; background: var(--fill); color: var(--text); font: inherit; font-size: 16px; padding: 0 12px 0 34px; outline: none; -webkit-appearance: none; appearance: none; }
.tools input[type="search"]:focus-visible { box-shadow: 0 0 0 2px var(--tint); }
.tools .search-wrap svg { position: absolute; left: 10px; top: 10px; width: 18px; height: 18px; color: var(--text2); pointer-events: none; }
.filter-chips { display: flex; gap: 6px; overflow-x: auto; padding: 8px 0 4px; scrollbar-width: none; }
.filter-chips::-webkit-scrollbar { display: none; }
.fchip { flex: none; border: 0; border-radius: 999px; padding: 7px 12px; font: inherit; font-size: 14px; font-weight: 600; background: var(--fill2); color: var(--text); cursor: pointer; }
.fchip[aria-pressed="true"] { background: var(--tint); color: var(--sc-on); }
.g-row .row-main { min-width: 0; }
.g-line { display: flex; align-items: center; gap: 10px; min-width: 0; width: 100%; }
.g-dot { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 700 13px/1 var(--rounded); background: var(--sc-hi); color: var(--tint); }
.g-dot.no { background: var(--fill2); color: var(--text2); }
.g-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.g-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-sub { font-size: 13px; line-height: 17px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-at { flex: none; font-size: 13px; font-weight: 600; color: var(--tint); max-width: 38%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-at.none { color: var(--text3); font-weight: 500; }
.g-bad { flex: none; color: var(--red); display: grid; }
.g-bad svg { width: 17px; height: 17px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tchip { border: 0; border-radius: 999px; padding: 7px 11px; font: inherit; font-size: 14px; background: var(--fill2); color: var(--text); cursor: pointer; }
.tchip[aria-pressed="true"] { background: var(--tint); color: var(--sc-on); font-weight: 600; }
.row.block { display: block; }
.row.block .cap { font-size: 13px; color: var(--text2); margin-bottom: 8px; }
.paste { box-sizing: border-box; width: 100%; min-height: 150px; border: 0; background: none; color: var(--text); font: 15px/1.4 var(--sys); resize: vertical; outline: none; padding: 0; }
.note-list { margin: 0; padding: 0 0 0 18px; font-size: 15px; line-height: 21px; }
.note-list li { margin: 4px 0; }
.kind-tabs { margin: 10px 0 4px; }
.starter h2 { text-wrap: balance; }
.tpl-c { font-size: 12px; font-weight: 600; color: var(--tint); padding: 3px 14px 0; }
#lay-grid .tpls { margin-top: 0; }
.tpl-pic { display: block; aspect-ratio: 300 / 190; background: var(--sc-floor); border-bottom: 0.5px solid var(--sep); }
.tpl-pic canvas { display: block; width: 100%; height: 100%; }
.tpl .tpl-n { margin-top: 8px; }
@media (min-width: 700px) { .tpls { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- the room ---------- */
#stack .screen-body.room-body { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.room-wrap { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; padding-bottom: var(--tabbar-space); }
.room-tools { display: flex; gap: 8px; align-items: center; padding: 6px 12px 8px; overflow-x: auto; scrollbar-width: none; }
.room-tools::-webkit-scrollbar { display: none; }
.room-tools .btn-bordered { flex: none; }
.room-tools .spacer { flex: 1; }
.issue-chip { flex: none; display: inline-flex; align-items: center; gap: 5px; border: 0; border-radius: 999px; padding: 7px 11px; font: inherit; font-size: 14px; font-weight: 600; background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red); cursor: pointer; }
.issue-chip svg { width: 15px; height: 15px; }
.room-stage { position: relative; min-height: 0; min-width: 0; }
.room-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none; }
.room-zoom { position: absolute; right: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 6px; }
.room-zoom button { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--glass); color: var(--text); box-shadow: 0 0 0 0.5px var(--glass-edge), 0 3px 10px rgba(0, 0, 0, 0.1); font: 600 20px/1 var(--sys); cursor: pointer; display: grid; place-items: center; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.room-zoom button svg { width: 18px; height: 18px; }
.room-bar { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 6px 10px 6px 16px; margin: 0 12px 8px; border-radius: 18px; background: var(--row); box-shadow: 0 0 0 0.5px var(--sep); min-width: 0; }
.room-bar.idle { background: none; box-shadow: none; color: var(--text2); font-size: 14px; padding-left: 6px; }
.room-bar[hidden] { display: none; }
.rb-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rb-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-sub { font-size: 12.5px; line-height: 16px; color: var(--text2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rb-sub.bad { color: var(--red); }
.rb-btn { flex: none; border: 0; background: var(--fill); color: var(--text); border-radius: 999px; height: 34px; min-width: 34px; padding: 0 11px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; display: inline-grid; place-items: center; }
.rb-btn svg { width: 16px; height: 16px; }
.rb-btn.x { padding: 0; }
.room-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; text-align: center; pointer-events: none; }
.room-empty > div { pointer-events: auto; max-width: 320px; }
.tray { border-top: 0.5px solid var(--sep); background: var(--row); min-width: 0; }
.tray-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 8px 14px 2px; font-size: 13px; color: var(--text2); }
.tray-head b { color: var(--text); font-size: 14px; }
.tray-list { display: flex; gap: 6px; overflow-x: auto; padding: 6px 12px 10px; scrollbar-width: none; }
.tray-list::-webkit-scrollbar { display: none; }
.gchip { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; padding: 8px 12px; font: inherit; font-size: 14.5px; font-weight: 600; background: var(--fill2); color: var(--text); cursor: pointer; max-width: 220px; touch-action: pan-x; -webkit-user-select: none; user-select: none; }
.gchip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gchip i { font-style: normal; font-size: 12px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--fill); color: var(--text2); }
.gchip[aria-pressed="true"] { background: var(--tint); color: var(--sc-on); }
.gchip[aria-pressed="true"] i { background: rgba(255, 255, 255, 0.25); color: inherit; }
.tray-done { padding: 6px 14px 12px; font-size: 14px; color: var(--text2); }
@media (min-width: 700px) {
  .room-wrap { grid-template-columns: 264px minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); padding-bottom: 0; }
  .room-tools { grid-column: 1 / 3; padding: 4px 16px 10px; }
  .tray { grid-column: 1; grid-row: 2 / 4; border-top: 0; border-right: 0.5px solid var(--sep); display: flex; flex-direction: column; min-height: 0; background: none; }
  .room-bar { grid-column: 2; grid-row: 2; margin: 0 16px 10px; }
  .room-stage { grid-column: 2; grid-row: 3; }
  .tray-list { flex-direction: column; overflow-x: hidden; overflow-y: auto; flex: 1; min-height: 0; padding: 6px 12px 16px; }
  .gchip { max-width: none; justify-content: space-between; border-radius: 12px; touch-action: pan-y; cursor: grab; }
}

/* ---------- print and share ---------- */
.preview { display: grid; place-items: center; padding: 14px 10px; background: var(--fill2); border-radius: 16px; margin: 4px 0 2px; }
.preview canvas { max-width: 100%; max-height: 46vh; width: auto; height: auto; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18); border-radius: 2px; background: #fff; }
.preview .pv-note { font-size: 12.5px; color: var(--text2); margin-top: 8px; text-align: center; }
.looks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.look { position: relative; border: 0; border-radius: 12px; padding: 10px 6px 8px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 0 0 1px var(--sep); }
.look[aria-pressed="true"] { box-shadow: 0 0 0 2.5px var(--tint); }
.look b { display: block; font-size: 17px; line-height: 1.1; margin-bottom: 3px; }
.look i { font-style: normal; font-size: 10px; font-weight: 700; opacity: 0.8; margin-left: 4px; }
.pro-tag { font-size: 11px; font-weight: 700; color: var(--tint); background: var(--sc-hi); padding: 2px 7px; border-radius: 999px; margin-left: 6px; white-space: nowrap; }
.about-p { font-size: 15px; line-height: 21px; color: var(--text2); margin: 0 4px 10px; }
@media print { .tabbar, .navbar, #sheets { display: none !important; } }

/* the confirmation sits above the tab bar on a phone, not over it */
@media (max-width: 699px) { #toast { bottom: calc(var(--sab) + 84px); } }