/* «Заказы» (/orders) and the waiter's page (/me): the page's styles, moved out of mePage() in
   src/me.js as they were. Loaded before /app/client/sheet.css (see mePage). */
:root { --brand: #12787E; --bg: #F7F2EE; --card: #fff; --ink: #14110E; --dim: #6F675E; --line: #E7E1D9; --soft: #FBF9F6; --line2: #CFC7BD; --mute: #B5A898; color-scheme: light }
/* «Заказы» in the dark (2026-10-06): the waiter picks system / dark / light in «Настройки»
   (html data-theme, stored on the phone); system follows the phone. The same tokens, warm greys. */
html[data-app][data-theme="dark"] { --bg: #121110; --card: #1C1A18; --ink: #F1ECE4; --dim: #A39B90; --line: #2E2A26; --soft: #191715; --line2: #4A443D; --mute: #6F675E; color-scheme: dark }
@media (prefers-color-scheme: dark) {
  html[data-app]:not([data-theme="light"]) { --bg: #121110; --card: #1C1A18; --ink: #F1ECE4; --dim: #A39B90; --line: #2E2A26; --soft: #191715; --line2: #4A443D; --mute: #6F675E; color-scheme: dark }
}
* { box-sizing: border-box }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/1.5 "Golos Text", -apple-system, "Helvetica Neue", Arial, sans-serif }
/* One column up to 640px: any phone, a wide Android at a small display size included, is filled
   edge to edge (the controls grow with it); a tablet keeps a column in the middle (2026-10-07). */
.wrap { max-width: 640px; margin: 0 auto; padding: 18px 16px calc(28px + env(safe-area-inset-bottom, 0px)) }
.ohead { padding: 2px 0 10px; text-align: center }
/* The link dot: green all is well, amber no register, red no internet; a tap explains. */
.ohead h1 { display: inline-flex; align-items: center; gap: 4px }
.linkdot { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; background: transparent; cursor: pointer }
.linkdot i, .linkrow i { display: block; width: 11px; height: 11px; border-radius: 50%; background: #B8B0A6 }
.linkdot.ok i, .linkrow.ok i { background: #1C7F46; box-shadow: 0 0 0 4px rgba(28,127,70,.15) }
/* Reading the orders ahead (their buttons blank): the dot blinks. */
.linkdot.loading i { animation: dot-blink 1s ease-in-out infinite }
@keyframes dot-blink { 50% { opacity: .25 } }
@media (prefers-reduced-motion: reduce) { .linkdot.loading i { animation: none } }
.linkdot.warn i, .linkrow.warn i { background: #D08A16; box-shadow: 0 0 0 4px rgba(208,138,22,.18) }
.linkdot.off i, .linkrow.off i { background: #B4413C; box-shadow: 0 0 0 4px rgba(180,65,60,.15) }
.linkrow { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 0; border-top: 1px solid var(--line) }
.linkrow i { margin-top: 6px }
.linkrow b { display: block }
.linkrow span { display: block; color: var(--dim); font-size: 14px }
/* Sign-out: the icon in the top left corner, the arrow pointing out to the left. */
.ohead { position: relative }
.ohead .out { position: absolute; left: 0; top: 0 }
/* The bell, mirroring the logout: top right. The link dot sits by the venue's name. */
.ohead .bell { position: absolute; right: 0; top: 0 }
.bell-n { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #B4413C; color: #fff; font: 600 11px/18px "Golos Text", sans-serif }
.bell-n[hidden] { display: none }
/* With Golos Text the line box's middle is the capitals' middle: no nudge (measured 2026-10-04).
   The margin and height are reset: the green state's class «ok» is also the green caption's. */
.ohead h1 .linkdot { width: 24px; height: 24px; margin: 0 0 0 2px; min-height: 0 }
/* A block, not a grid: Safari sized the button rows of a scrolling grid short and clipped them. */
.notes { display: block; margin: 4px 0 8px; max-height: 55vh; overflow-y: auto }
/* «Уведомления»: the buttons stay at the bottom of the screen, only the list scrolls (its head
   with «Прочитать все» stays on top of it). */
.sheet-in.bell-sheet { display: flex; flex-direction: column; overflow: hidden }
.bell-sheet > h3, .bell-sheet > .pushbox, .bell-sheet > .sheet-acts { flex: none }
.bell-sheet > .notes { flex: 0 1 auto; min-height: 0; max-height: none; margin: 0; overscroll-behavior: contain; -webkit-overflow-scrolling: touch }
.bell-sheet .notes-head { position: sticky; top: 0; z-index: 1; background: var(--card) }
.note { display: block; width: 100%; height: auto; line-height: 1.4; white-space: normal; text-align: left; padding: 9px 0 9px 16px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); font: inherit; position: relative; min-height: 0 }
.note.new::before { content: ""; position: absolute; left: 2px; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: #B4413C }
.note:not(.new) b { font-weight: 500; color: var(--dim) }
/* «Уведомления»: the unread count and «Прочитать все» on one line over the list; the push
   buttons share their row equally. */
.notes-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 0 8px; color: var(--dim); font-size: 14px }
.readall { min-height: 0; padding: 4px 0; border: 0; background: none; color: var(--brand); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer }
.pushbox .row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px }
.pushbox .row button { width: 100% }
.ptr { position: fixed; top: calc(6px + env(safe-area-inset-top, 0px)); left: 50%; z-index: 70; width: 34px; height: 34px; border-radius: 50%; background: var(--card); box-shadow: 0 2px 10px rgba(0,0,0,.18); display: grid; place-items: center; opacity: 0; transform: translate(-50%, 0); pointer-events: none }
.ptr i { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid var(--line); border-top-color: var(--brand) }
.ptr.ready i { border-color: var(--brand); border-top-color: transparent }
.ptr.spin { opacity: 1 !important; transition: transform .15s }
.ptr.spin i { animation: ptr-spin .7s linear infinite }
@keyframes ptr-spin { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) { .ptr.spin i { animation: none } }
.ncard { position: fixed; left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 60; max-width: 616px; margin: 0 auto; display: flex; align-items: stretch;
  background: var(--ink); color: var(--bg); border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.25); animation: ncard-in .25s ease-out }
.ncard-in { flex: 1; min-width: 0; text-align: left; padding: 12px 14px; background: transparent; color: inherit; border: 0; font: inherit; min-height: 0 }
.ncard-in b { display: block }
.ncard-in span { display: block; opacity: .8; font-size: 14px }
.ncard-x { flex: 0 0 44px; background: transparent; color: inherit; border: 0; font-size: 16px; opacity: .7; min-height: 0; padding: 0 }
@keyframes ncard-in { from { transform: translateY(20px); opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .ncard { animation: none } }
.note b { display: block }
.note span { display: block; color: var(--dim); font-size: 14px }
.note time { display: block; color: var(--dim); font-size: 12.5px }
.pushbox { display: grid; gap: 8px; margin: 2px 0 0; padding-top: 12px; border-top: 1px solid var(--line) }
.pushbox p { margin: 0; color: var(--dim); font-size: 14px }
.ohead > div { padding: 0 46px }
.install { display: grid; gap: 8px; margin: 4px 0 12px; padding: 14px; border: 1.5px dashed var(--brand); border-radius: 14px; background: var(--card) }
.install b { font-size: 16px }
.install p, .install ol { margin: 0; font-size: 14.5px; line-height: 1.4 }
.install ol { padding-left: 20px; display: grid; gap: 4px }
.install .share-ico { vertical-align: -3px; color: var(--brand) }
.install button { min-height: 44px; border: 0; border-radius: 12px; background: var(--brand); color: #fff; font: inherit; font-weight: 600 }
.install button.quiet { min-height: 30px; background: none; color: var(--dim); font-weight: 500 }
.ofoot .powered { margin-top: 8px; color: var(--dim); font-size: 13px; text-decoration: none }
.ofoot .powered b { color: var(--ink) }
.ofoot .powered span { color: var(--brand) }
/* The app's own title says «Заказы»: the card does not say it again. */
.mode-orders #sb-orders-card > h2 { display: none }
.ohead h1 { margin: 0 }
.ohead p { margin: 2px 0 0; color: var(--dim); font-size: 13.5px }
.ofoot { display: grid; gap: 8px; justify-items: center; text-align: center; padding: 10px 0 4px }
/* «Заказы»: the page fills the screen, the install hint and «Выйти» sit at its bottom. */
.wrap.mode-orders { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)) }
.wrap.mode-orders .ofoot { margin-top: auto; padding: 24px 0 0 }
.ofoot a { color: var(--brand); font-weight: 600; text-decoration: none }
.to-orders { display: inline-block; margin-top: 10px; padding: 8px 14px; border-radius: 12px; background: var(--brand); color: #fff; font-weight: 600; text-decoration: none }
.tg-login { min-height: 46px; margin: 6px 0 14px }
header { text-align: center; padding: 6px 0 14px }
.roles { display: flex; gap: 4px; padding: 4px; margin: 0 0 12px; background: var(--line); border-radius: 12px }
.roles > * { flex: 1; text-align: center; padding: 8px 6px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none }
.roles [aria-current] { background: var(--card); box-shadow: 0 1px 2px rgba(0,0,0,.08) }
header h1 { margin: 0; font-size: 20px }
header p { margin: 4px 0 0; color: var(--dim); font-size: 13px }
section { background: var(--card); border-radius: 16px; padding: 14px 16px 16px; margin-top: 12px; box-shadow: 0 1px 2px rgba(20,17,14,.05) }
h2 { margin: 0 0 4px; font-size: 15px }
.hint { color: var(--dim); font-size: 13px; margin: 0 0 10px; white-space: pre-line }
.qr-hint { font-size: 16px; line-height: 1.4; margin: 0 0 12px }
input[type=text], input[type=tel] { width: 100%; height: 46px; border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; font: inherit; background: var(--card); color: var(--ink) }
/* 16 px in every field: iPhone zooms the page into any field set smaller, and stays zoomed. */
input[type=text], input[type=tel], textarea, select { font-size: max(16px, 1em) !important }
input:focus { outline: none; border-color: var(--brand) }
.row { display: flex; gap: 8px; margin-top: 10px }
button { font: inherit; font-weight: 600; border: 0; border-radius: 12px; min-height: 46px; padding: 0 16px; background: var(--brand); color: #fff; cursor: pointer }
button.quiet { background: transparent; color: var(--ink); border: 1px solid var(--line); font-weight: 500 }
button:disabled { opacity: .55 }
.dd { position: relative }
.dd-btn { width: 100%; height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font-weight: 500; text-align: left }
.dd-btn:focus-visible, .dd-btn[aria-expanded="true"] { outline: none; border-color: var(--brand) }
.dd-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.dd-value.empty { color: var(--dim); font-weight: 400 }
.dd-chev { flex: none; width: 9px; height: 9px; border-right: 2px solid var(--dim); border-bottom: 2px solid var(--dim); transform: translateY(-2px) rotate(45deg); transition: transform .15s }
.dd-btn[aria-expanded="true"] .dd-chev { transform: translateY(2px) rotate(-135deg) }
.dd-list { list-style: none; margin: 6px 0 0; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); max-height: 312px; overflow-y: auto; box-shadow: 0 12px 30px -18px rgba(20,17,14,.45) }
.dd-list:focus { outline: none }
.dd-list li { padding: 11px 12px; border-radius: 9px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px }
.dd-list li.active, .dd-list li:hover { background: var(--bg) }
.dd-list li[aria-selected="true"] { font-weight: 600 }
.dd-list li[aria-selected="true"]::after { content: "✓"; color: var(--brand) }
@media (prefers-reduced-motion: reduce) { .dd-chev { transition: none } }
.goals { display: flex; flex-wrap: wrap; gap: 8px }
.goals button { min-height: 40px; font-size: 14px; font-weight: 500; background: var(--bg); color: var(--ink) }
.goals button[aria-pressed="true"] { background: var(--brand); color: #fff }
.ok { color: #1C7F46; font-size: 13px; margin: 8px 0 0; min-height: 18px }
.bad { color: #B4413C; font-size: 13px; margin: 8px 0 0 }
.avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: var(--bg); display: block; margin: 0 auto 10px }
.pics { display: grid; grid-template-columns: repeat(5, 1fr); gap: 26px 8px; margin: 4px 0 2px }
.pic { position: relative; aspect-ratio: 1; min-height: 0; padding: 0; border-radius: 50%; background: color-mix(in srgb, var(--brand) 14%, #F3EFE6); border: 0; box-shadow: 0 0 0 1px var(--line); overflow: visible; display: grid; place-items: center; cursor: pointer }
.pic img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block }
.pic[aria-checked="true"] { box-shadow: 0 0 0 3px var(--brand) }
.pic i { position: absolute; left: 50%; bottom: -17px; transform: translateX(-50%); font-style: normal; font-size: 10.5px; font-weight: 500; color: var(--dim); white-space: nowrap }
.pic.add { background: var(--bg); box-shadow: 0 0 0 1px var(--line), inset 0 0 0 2px var(--card) }
.pic .plus { font-size: 26px; font-weight: 300; color: var(--dim); line-height: 1 }
.pic .ini { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; font-weight: 600; font-size: 17px }
.pics + .row { margin-top: 26px }
.preview { display: block; text-align: center; margin-top: 16px; color: var(--dim); font-size: 13px }
.preview.guide { margin-top: 8px }
.gone { text-align: center; padding: 60px 20px; color: var(--dim) }
/* Only shown while the Click link is missing: the one field that changes the guest's path. */
.callout { margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--brand) 9%, transparent); border-left: 3px solid var(--brand); font-size: 13.5px; line-height: 1.45 }
.callout.bad { background: color-mix(in srgb, #D93B30 10%, transparent); border-left-color: #D93B30; color: var(--ink) }
/* The gear's red dot: no card and no Click link yet. */
[data-settings] { position: relative }
[data-settings] .gdot { display: none; position: absolute; top: 5px; right: 5px; width: 10px; height: 10px; border-radius: 50%; background: #D93B30; box-shadow: 0 0 0 2px var(--card) }
[data-settings].need .gdot { display: block }
.need-pill { margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: #D93B30; color: #fff; font-size: 12px; font-weight: 600 }
.langs { display: flex; gap: 6px; justify-content: center; padding-top: 4px }
.langs button { min-height: 32px; padding: 0 12px; font-size: 13px; font-weight: 500; background: transparent; color: var(--dim); border: 1px solid var(--line) }
.langs button[aria-pressed="true"] { background: var(--brand); color: #fff; border-color: var(--brand) }
.venues { display: grid; gap: 8px; margin: 0 0 10px }
.venues div { display: grid; gap: 2px }
.venues b { font-weight: 600 }
.venues span { color: var(--dim); font-size: 13.5px; font-variant-numeric: tabular-nums }
.screen h2 { font-size: 16px }
.two { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px }
.two input { font-size: 17px }
#sb-amount { font-variant-numeric: tabular-nums; font-weight: 600 }
.saved-card { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 10px 12px; border-radius: 12px; background: var(--bg); font-variant-numeric: tabular-nums }
.saved-card b { font-size: 16px; letter-spacing: .04em }
.saved-card span { color: #1C7F46; font-size: 13px; font-weight: 600 }
.saved-card[hidden] { display: none }
.recent { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 2px }
.recent li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px }
.recent li b { font-variant-numeric: tabular-nums }
.recent li span { color: var(--dim); font-size: 12.5px }
.recent .st { font-size: 12.5px; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: var(--bg); color: var(--dim); min-height: 0; border: 0 }
.recent .st.paid { background: color-mix(in srgb, #1C7F46 13%, transparent); color: #1C7F46 }
.recent button.st { background: var(--brand); color: #fff; cursor: pointer }
.sb { position: fixed; inset: 0; z-index: 10; background: var(--card); overflow-y: auto; -webkit-overflow-scrolling: touch }
.sb-in { max-width: 640px; margin: 0 auto; padding: 16px 18px calc(22px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 10px; text-align: center }
/* The bill by QR: the common popup (/app/client/sheet.js), its title on the left, the bill centred under it. */
.qrsheet .sb-sum, .qrsheet .sb-hint { text-align: center }
.qrsheet .sb-sub { margin: -10px 0 0; color: var(--dim); font-size: 13.5px; font-variant-numeric: tabular-nums }
.sb-top b { display: block; font-size: 16px }
.sb-top span { color: var(--dim); font-size: 13.5px; font-variant-numeric: tabular-nums }
/* A table number, wherever it is shown: large, first. */
.tno { display: block; font: 700 21px/1.15 "Golos Text", sans-serif; color: var(--ink); letter-spacing: -.01em; margin-bottom: 2px }
.sb-top .tno { font-size: 26px; margin-bottom: 4px }
.sb-sum { font: 700 34px/1.1 "Golos Text", sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.01em }
.sb-sum small { font-size: 16px; font-weight: 500; color: var(--dim) }
.sb-qr { width: min(78vw, 330px); margin: 0 auto }
.sb-qr svg { display: block; width: 100%; height: auto }
.sb-scan { margin: 0; color: var(--dim); font-size: 13px ; display: flex; align-items: center; justify-content: center; gap: 9px; text-align: left }
.sb-apps { display: flex; flex-direction: column; gap: 4px; flex: none }
.sb-apps img { width: 24px; height: 24px; border-radius: 6px; display: block; box-shadow: 0 0 0 1px rgba(26,22,20,.08) }
.sb-scan > span:last-child { max-width: 26ch }
.sb-status { margin: 4px auto 0; padding: 8px 14px; border-radius: 999px; background: var(--bg); color: var(--dim); font-weight: 600; font-size: 14px }
.sb-status.paid { background: #1C7F46; color: #fff }
.sb-hint { margin: 0; color: var(--dim); font-size: 12px }
.sb-tips { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 12px; text-align: left; margin-top: 6px; padding: 10px; border-radius: 14px; background: var(--bg) }
.sb-tips .sb-qr { width: 112px }
.sb-tips b { font-size: 14px }
.sb-cam { display: flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--dim); font-size: 13px }
.sb-cam svg { flex: none }
.sb .row { justify-content: center }
button.armed { background: var(--brand, #12787E) !important; color: #fff !important; border-color: transparent !important }
/* A tap on «Отправить?» too soon after the first: a short blink, nothing sent. */
button.armed { transition: opacity .15s ease-out }
button.armed.arming { opacity: .5 }
button.armed.blink { animation: armBlink .3s ease-out }
@keyframes armBlink { 0% { opacity: 1 } 40% { opacity: .45 } 100% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { button.armed.blink { animation: none } }
.hall { margin: 10px 0 6px; font-size: 13px; color: var(--dim); font-weight: 600 }
/* Every hall's tables one under another; a chain's many halls scroll inside the sheet. */
.halls { max-height: 60vh; overflow-y: auto; margin: 0 -2px; padding: 0 2px }
.closed { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card) }
/* A closed order unfolds: a chevron down at the right says so, up once open. */
.closed summary { cursor: pointer; list-style: none; display: grid; gap: 2px; position: relative; padding-right: 26px }
.closed summary::after { content: "›"; position: absolute; right: 2px; top: 50%; font-size: 22px; line-height: 1; color: var(--dim); transform: translateY(-50%) rotate(90deg); transition: transform .15s }
.closed[open] > summary::after { transform: translateY(-50%) rotate(-90deg) }
.closed summary::-webkit-details-marker, .closed-box summary::-webkit-details-marker { display: none }
.closed-box { margin: 0 0 8px; border-bottom: 1px solid var(--line); padding-bottom: 4px }
.closed-box > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 44px; font-size: 14.5px; font-weight: 600; color: var(--ink) }
.closed-box > summary::after { content: "›"; font-size: 20px; color: var(--dim); transition: transform .15s }
.closed-box[open] > summary::after { transform: rotate(90deg) }
.closed-box .orders { margin-top: 4px }
.closed .hbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; margin: 2px 0 8px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--brand); font: inherit; font-size: 13.5px; font-weight: 600 }
.closed .hbtn svg { width: 18px; height: 18px }
/* A row's first line: the table and the sum, large; the rest under it. */
.oline { display: flex; align-items: baseline; gap: 8px; min-width: 0 }
.oline .tno { display: inline; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0 }
.oline .osep, .orders .order .oline .osep { font-style: normal; font-size: 20px; font-weight: 700; color: var(--dim); line-height: 1 }
.oline .osum { font: 700 18px/1.15 "Golos Text", sans-serif; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap }
.ometa { display: block; color: var(--dim); font-size: 12.5px; margin-top: 2px; font-variant-numeric: tabular-nums }
.closed ul { margin: 8px 0 0; padding-left: 18px; color: var(--dim); font-size: 14px }
.shiftgate { display: grid; gap: 8px; padding: 18px 16px; border-radius: 14px; background: color-mix(in srgb, var(--brand) 8%, var(--card)); border: 1.5px dashed color-mix(in srgb, var(--brand) 40%, var(--card)); text-align: center }
.shiftgate b { font-size: 17px }
.tggate { gap: 12px; margin-top: 10px }
.tggate button { width: 100% }
.tggate .tgwait { color: var(--dim); font-size: 13.5px }
.shiftgate p { margin: 0; line-height: 1.45 }
.shiftgate span { color: var(--dim); font-size: 13.5px }
.orders-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; margin: 4px 0 14px }
.orders-head button { white-space: nowrap }
/* As tall as the «Найти стол» field beside it (40 px). */
.orders-head .tabs { display: inline-flex; gap: 3px; background: var(--bg); padding: 3px; border-radius: 10px; box-sizing: border-box; height: 40px; align-items: stretch }
.orders-head .tabs button { min-height: 0; padding: 0 10px; font-size: 13px; font-weight: 500; background: transparent; color: var(--dim) }
.orders-head .tabs button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(20,17,14,.08) }
/* «Найти стол»: the dish's table for whoever carries the plate. */
.oq-field { position: relative; display: flex; flex: 1 1 170px; min-width: 0 }
.oq-field svg { position: absolute; left: 11px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); color: var(--dim); pointer-events: none }
.oq-field input { flex: 1; min-width: 0; height: 40px; padding-left: 35px; font-size: 16px }
.finding-t .onew { display: none }
/* The search fields stand out from the plain ones: the dashed brand frame and tint of «+», a brand magnifier. */
.ord-qi input, .oq-field input { border: 1.5px dashed color-mix(in srgb, var(--brand) 45%, var(--card)); background: color-mix(in srgb, var(--brand) 11%, var(--card)) }
.ord-qi input:focus, .oq-field input:focus { border-color: var(--brand); background: var(--card); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); outline: none }
.ord-qi svg, .oq-field svg { color: var(--brand) }
.otabs .stopn { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 5px; padding: 0 6px; border-radius: 10px; background: #B4413C; color: #fff; font-size: 12.5px; font-weight: 700; vertical-align: 3px }

/* A dish found for the stop list: «+» (onto the list) on every row, in red — the menu's «›» of
   a dish with options included (its rule came after this one and won, 2026-10-06). */
.st-search .prods i::after, .st-search .prods .more i::after { content: "+"; background: #F6E3E1; color: #B4413C; font-weight: 700 }
.orders-head .ofind { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; font-size: 13.5px; font-weight: 600; background: color-mix(in srgb, var(--brand) 11%, var(--card)); color: var(--brand); border: 1.5px dashed color-mix(in srgb, var(--brand) 45%, var(--card)) }
.orders-head .ofind svg { width: 16px; height: 16px }
.find-list { display: grid; grid-auto-rows: max-content; align-content: start; gap: 8px; padding: 0 16px 12px; max-width: 608px; margin: 0 auto }
/* (Without max-content rows a short sheet — the keyboard up — squeezed every card into the list's height.) */
.find-cap { margin: 0; font-size: 12.5px; color: var(--dim); text-transform: uppercase; letter-spacing: .06em }
.find-i { display: flex; justify-content: space-between; gap: 8px; font-size: 14.5px }
.find-s { font-size: 12.5px; color: #1C7F46; white-space: nowrap }
.find-s.un { color: var(--dim) }
.orders { display: grid; gap: 6px }
.orders .order { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; min-height: 52px; padding: 8px 12px; border-radius: 12px; text-align: left; background: var(--bg); color: var(--ink); border: 1px solid var(--line); font-weight: 500 }
.orders .order b { font-variant-numeric: tabular-nums }
.orders .order span { color: var(--dim); font-size: 12.5px }
.orders .order span b { color: var(--ink) }
.orders .order i { font-style: normal; color: var(--brand); font-weight: 600; font-size: 13.5px }
.orders .empty { color: var(--dim); font-size: 13px; padding: 8px 0 }
/* «Powered by» at the very bottom of the screen, whatever the list's length. */
.wrap.mode-orders .ofoot { margin-top: auto }
/* «Бегунок» of another waiter's order in «Все столы»: shown, not pressed from here. */
.oacts button:disabled { opacity: .45; cursor: default }
/* The row's button not known yet (the order not read ahead): its place held, nothing shown. */
.oacts .ghost { visibility: hidden }
/* A бегунок on its way: the button stays, off, in the status line's grey. */
.oacts button.inflight:disabled, .ord-acts button.inflight:disabled { background: color-mix(in srgb, var(--dim) 14%, var(--card)); color: var(--dim); border-color: transparent; opacity: 1 }
.orow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px }
.orow.solo { grid-template-columns: minmax(0, 1fr) }
/* A phone-orders row: the arrow stands last, after the row's action button. */
.orow.arrowed { grid-template-columns: minmax(0, 1fr) auto auto }
.orow.solo.arrowed { grid-template-columns: minmax(0, 1fr) auto }
.oarrow { display: grid; place-items: center; min-height: 44px; min-width: 30px; padding: 0 2px; margin: 0; border: 0; background: transparent; color: var(--brand); font: inherit; font-size: 20px; font-weight: 600; cursor: pointer }
.oacts { display: flex; gap: 6px }
.oacts button { min-height: 52px; padding: 0 12px; font-size: 13.5px; background: var(--card); color: var(--brand); border: 1px solid var(--line) }
/* «Бегунок» in the row: filled, as on the order screen — the step that is due. */
.oacts button[data-order-kitchen] { background: var(--brand); color: #fff; border-color: transparent }
/* «Бегунок» again after the register could not print the last one. */
.oacts button[data-order-kitchen].redo { background: #B4413C }
.pmsg.ok, .pmsg.bad, .pmsg.wait { margin: 0; min-height: 0; font-size: 12.5px }
/* A print under way or not confirmed yet: grey; green only once it is done, red when not. */
.pmsg.wait { color: var(--dim) }
.onew { width: 100%; margin: 18px 0 2px }
/* «Сегодня»: the waiter's day in four large numbers. */
.mystats h2 { margin: 0 0 8px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--dim) }
.mstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px }
/* The manager's second row: orders from phones, the takings, the average bill. */
.mstats + .mstats { margin-top: 8px }
.mstat { padding: 10px 10px 11px; border-radius: 14px; background: var(--card, var(--card)); box-shadow: 0 1px 3px rgba(20,17,14,.06) }
.mstat b { display: block; white-space: nowrap; font-size: min(21px, 5.6vw); line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -.01em }
.mstat b small { font-size: 14px; font-weight: 600 }
/* A work tool, not a page to read: no zoom by a double tap (iOS ignores user-scalable for pinches). */
html { touch-action: manipulation }
.mstat[data-tips-opened] { cursor: pointer; -webkit-tap-highlight-color: transparent }
.mstat[data-tips-opened] i::after { content: " ›" }
.mstat[data-tips-opened]:active { background: var(--bg) }
.tips-opened { display: grid; max-height: 60vh; overflow-y: auto; margin: 0 -4px }
.tip-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 52px; padding: 8px 4px; border-radius: 0; border-top: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; font-weight: 500 }
.tip-row span { display: grid; gap: 2px }
.tip-row small { color: var(--dim); font-size: 12.5px; font-weight: 400 }
.tip-row i { font-style: normal; color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap }
.mstat i { display: block; margin-top: 2px; font-style: normal; font-size: 12px; line-height: 1.25; color: var(--dim) }
.mystats { margin: 0 0 14px }
/* «Активные / Закрытые»: two large tab links over the card's text — the current one dark, the other beige — and a rule under them. */
.otabs { display: flex; align-items: center; gap: 22px; margin: 0 0 14px; padding: 0 0 12px; border-bottom: 1px solid var(--line) }
#sb-orders-hint { margin: 0 0 14px }
.orders .orow + .pmsg + .orow, .orders .orow + .orow { margin-top: 8px }
.otabs:empty { display: none }
.otabs a { color: var(--mute); font-size: 20px; font-weight: 700; text-decoration: none; white-space: nowrap }
/* Three tabs on a phone: a touch smaller and closer, each on one line. */
.otabs:has(a:nth-child(3)) { gap: 16px }
.otabs:has(a:nth-child(3)) a { font-size: min(20px, 4.8vw) }
.orders .find-list { padding: 0; max-width: none; margin: 0 }
.orders .find-o { width: 100% }
/* A found table is a row of the list (.order); its found dishes, one a line, under the number. */
.orders .order .find-i { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 4px; color: var(--ink); font-size: 14.5px }
.orders .order .find-i:first-of-type { margin-top: 6px }
.orders .order .find-d { color: var(--ink); font-size: 14.5px; min-width: 0 }
.orders .order .find-s { font-size: 12.5px; color: #1C7F46 }
.orders .order .find-s.un { color: var(--dim) }
.orders .order .find-z { font-weight: 500; color: var(--dim) }
.otabs a[aria-current="page"] { color: var(--ink) }
.otabs .refresh { margin-left: auto }
.refresh { min-height: 30px; padding: 0 10px; font-size: 13px; font-weight: 500; background: transparent; color: var(--brand); border: 1px solid var(--line) }
/* «Официант со смартфоном»: the order screen, the menu over it, and bottom sheets over both. */
.ord { display: flex; flex-direction: column; text-align: left }
.ord-in { flex: 1 0 auto; width: 100%; max-width: 640px; margin: 0 auto; padding: 14px 16px 12px }
.ord-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px }
.ord-top > div { flex: 1 1 140px; min-width: 0 }
/* «Комментарий» and «Обновить» go to a line of their own when the table needs the room. */
.ord-top > .ord-close { flex: none; align-self: flex-start }
/* «+» in the bottom bar: only a skin shows it there (theme-poster.css); ours keeps it in the head. */
.ord-plus-bot { display: none }
.ico.ord-plus-top { background: color-mix(in srgb, var(--brand) 11%, var(--card)); color: var(--brand); border: 1.5px dashed color-mix(in srgb, var(--brand) 45%, var(--card)); font-size: 26px; font-weight: 700; line-height: 1 }
.osum.oempty { color: var(--dim); font-weight: 500 }
.ord-now .now-cat { width: 100%; margin-top: 4px; font-style: normal; font-size: 13.5px; font-weight: 700; color: var(--ink) }
/* Back is in the head of the order; the bar keeps its own only before the order has loaded. The
   search is left by a tap beside it or the system's back. */
.ord:has(.ord-close) .ord-acts > .ico-back { display: none }
.ord-top > .ord-tools { flex: none; display: flex; gap: 8px; margin-left: auto }
.ord-top b { display: block; font-size: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ord-top span { color: var(--dim); font-size: 13px; font-variant-numeric: tabular-nums }
.ord-top b .ordno { display: inline; color: var(--dim); font-size: 17px; font-weight: 600 }
.ord-who { display: block; font-size: 13.5px; color: var(--dim); margin-top: 2px }
.back { flex: none; min-height: 38px; padding: 0 12px; background: var(--bg); color: var(--ink); font-weight: 500 }
.ord-sum { font: 700 30px/1.1 "Golos Text", sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.01em; margin: 14px 0 8px }
.ord-sum small { font-size: 15px; font-weight: 500; color: var(--dim) }
.ord-paid { margin: -2px 0 10px; padding: 8px 12px; border-radius: 10px; background: #E5F4EA; color: #1E6B3A; font-size: 14px; font-weight: 600; line-height: 1.35 }
.ord-paid::before { content: "✓ " }
.ord-paid.part { background: #FDF1DC; color: #8A5300 }
.orders .order em.paid { font-style: normal; margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: #E5F4EA; color: #1E6B3A; font-size: 12px; font-weight: 600; white-space: nowrap }
.ord-in .empty { color: var(--dim); font-size: 14px; padding: 10px 0; margin: 0; border-top: 1px solid var(--line) }
.ord-items { list-style: none; margin: 0; padding: 0 }
.ord-items li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 9px 0; border-top: 1px solid var(--line) }
.ord-items .nm { font-weight: 500; line-height: 1.3 }
.ord-items .iedit { cursor: pointer; border-radius: 8px; -webkit-tap-highlight-color: transparent }
.ord-items .iedit:active { background: var(--bg) }
.ord-items .iedit .nm .bn::after { content: " ›"; color: var(--dim); font-weight: 400 }
/* The price in ink, apart from the grey modifiers above it; «на кухне: 2» stays grey. */
.ord-items .pr { color: var(--ink); font-weight: 500; font-size: 12.5px; font-variant-numeric: tabular-nums }
.ord-items .pr.sent { color: var(--dim); font-weight: 400 }
.step { display: inline-flex; align-items: center; gap: 2px }
.step button { min-height: 36px; width: 36px; padding: 0; border-radius: 10px; background: var(--bg); color: var(--ink); font-size: 19px; font-weight: 500; line-height: 1 }
.step b { min-width: 28px; text-align: center; font-variant-numeric: tabular-nums }
/* «+ Блюдо»: the main action of an order that is being taken — tinted, large, never a plain outline. */
/* «Поиск» and «+ Блюдо» side by side under the order, in the bar's order (magnifier, then «+»). */
.ord-add-row { display: flex; gap: 8px; margin-top: 12px }
/* «Часто берут вместе»: a caption, then one or two dishes to add with a tap. */
.also { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 12px; padding: 10px 12px 12px; border: 1.5px dashed var(--line2); border-radius: 14px; background: var(--soft) }
.also > span { width: 100%; color: var(--dim); font-size: 13px }
button.quiet.also-b { min-height: 38px; padding: 0 12px; display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; max-width: 100%; background: var(--card) }
button.quiet.also-b b { color: var(--brand); font-size: 17px; font-weight: 700 }
.ord-add-row button.quiet.ord-add { margin-top: 0; flex: 1 1 auto; width: auto; min-width: 0 }
button.quiet.ord-add { width: 100%; margin-top: 12px; min-height: 54px; background: color-mix(in srgb, var(--brand) 11%, var(--card)); color: var(--brand); border: 1.5px dashed color-mix(in srgb, var(--brand) 45%, var(--card)); font-size: 17px; font-weight: 700 }
.opt-g h4 { font-size: 14px; font-weight: 600; margin: 0 }
textarea { width: 100%; min-height: 64px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font: inherit; color: var(--ink); background: var(--card); resize: vertical }
textarea:focus { outline: none; border-color: var(--brand) }
button.ico { position: relative; display: grid; place-items: center; width: 42px; min-height: 42px; height: 42px; padding: 0; border-radius: 12px; background: transparent; color: var(--brand); border: 1px solid var(--line) }
button.ico[aria-busy] svg { animation: ico-spin .9s linear infinite }
@keyframes ico-spin { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) { button.ico[aria-busy] svg { animation: none } }
/* The register is off line: phones may not change orders (remote.js registerOnline). */
button.ico.regoff { color: #8A5A00; background: #FFE9A8; border-color: #F0C24B }
button.ico.regoff[hidden] { display: none }
.ico.ocmt.has::after { content: ""; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--brand); border: 2px solid var(--card) }
/* The history screen: its head stays put while the list scrolls, its bar at the bottom of the
   window however short the list. */
.sb.hist { display: flex; flex-direction: column; overflow: hidden }
.sb.hist .ord-in { padding-top: 0; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch }
.sb.hist .ord-top { position: sticky; top: 0; z-index: 2; margin-top: 0; padding-top: 14px; padding-bottom: 6px; background: var(--card) }
.ord-bar { position: sticky; bottom: 0; background: var(--card); border-top: 1px solid var(--line); padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)) }
.ord-bar-in { max-width: 608px; margin: 0 auto; display: grid; gap: 6px }
/* Searching: the field, ▲ ▼ and «Отмена» / «Добавить» to its right; «←» and the rest step aside. */
.ord.finding .ord-acts > :not(.ord-qi):not(.ord-qok):not(.ord-qnav), .ord.finding .pmsg[data-pmsg="kitchen"], .ord.finding .pmsg[data-pmsg="prebill"] { display: none }
.ord-qok, .ord-qnav { display: none; order: 2; flex: 0 0 auto; min-height: 48px; padding: 0 14px; white-space: nowrap }
.ord-qnav { padding: 0; width: 40px; font-size: 13px; color: #2E9E4F }
/* «Отмена» and «Добавить» one and the same width, whatever the word. */
.ord.finding .ord-acts > .ord-qok { flex: 0 0 104px; width: 104px; min-width: 0; padding: 0 6px }
.ord-qok:not(.quiet) { background: #2E9E4F; color: #fff; border: 0; font-weight: 600 }
.ord-qnav:disabled { opacity: .45 }
.ord.finding .ord-acts > .ord-qok, .ord.finding .ord-acts > .ord-qnav { display: inline-flex; align-items: center; justify-content: center }
/* The stop list's search layer (orders.js loadStopsTab): «Ок» beside the field takes the top dish found. */
.mn-q .st-ok { flex: 0 0 auto; min-height: 42px; padding: 0 16px; border-radius: 12px; font-weight: 600 }
.mn-q .st-ok:not(.quiet) { background: #2E9E4F; color: #fff; border: 0 }
/* The search beside «Бегунок»: half of what the back button leaves, the whole bar while searching. */
.ord-qi { position: relative; flex: 1 1 0; display: flex; order: 2 }
.ord-qi svg { position: absolute; left: 12px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--dim); pointer-events: none }
.ord-qi input { flex: 1; min-width: 0; height: 48px; padding-left: 38px; font-size: 16px }
/* The search on the right, under the thumb (2026-10-06: used most); the buttons on the left. With
   one button beside it the field takes half; with more, the buttons keep their words and the
   field shrinks down to its magnifier (a tap still opens it across the bar). */
.ord-btns { display: flex; gap: 8px; flex: 1 1 0; min-width: 0 }
.ord-acts:has(.ord-qi) .ord-btns { min-width: max-content }
.ord-btns:not(:has(> button:not([hidden]))) { display: none }
.ord-btns button { flex: 1 1 auto; white-space: nowrap }
.ord-qi { min-width: 48px }
.ord-qi input::placeholder { text-overflow: clip }
.mn-q[hidden], .st-row[hidden] { display: none }
.prods li.stopped button, .prods li.stopped button:disabled { opacity: 1; color: #ABA49C }
.prods li.stopped button i, .prods li.stopped button small { color: #C4BEB7 }
.prods li.stopped button i::after { display: none }
.stopb { display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 6px; background: #B4413C; color: #fff; font-style: normal; font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; vertical-align: 1px }
.st-list { list-style: none; margin: 0; padding: 0 }
.st-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 8px 2px; border-top: 1px solid var(--line) }
.st-list li span { display: grid; gap: 2px; font-weight: 500 }
.st-list li small { color: var(--dim); font-size: 12.5px; font-weight: 400 }
.st-list li button { flex: none; min-height: 34px; padding: 0 12px; font-size: 14px }
.st-row { display: flex; gap: 8px }
.st-row [data-st-add] { flex: 1 }
/* Searching: only the order (or the dishes found) scrolls, the field stays put at the bottom —
   iOS then has nothing to scroll to reach it when it takes the focus. */
.ord.finding { overflow: hidden; box-sizing: border-box }
.ord.finding .ord-in { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch }
.ord.finding .ord-bar { position: relative; flex: none }
.ord.finding.kbup .ord-bar { padding-bottom: 8px }
/* White under the field down to the keyboard, however the layer was fitted to it (a search that
   starts on its own, with the keyboard already up, left a see-through gap there). */
.ord.finding::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 50vh; background: var(--card); z-index: -1; pointer-events: none }
body.regdown :is([data-ord-kitchen], [data-ord-prebill], [data-order-new], [data-ord-add], [data-ord-add-bot], .ord-qi, [data-also], .ord-items .step button, [data-ord-cmt], [data-order-prebill], [data-order-kitchen], .menu:not(.stops) [data-prod], .ord-found [data-prod], [data-mn-less], [data-mn-more]) { opacity: .4 }
.ord-found { padding-bottom: 8px }
.ord-found .mn-h:first-child { margin-top: 6px }
/* A dish just added: a green glow over its whole row, rule to rule (the row's own padding is
   kept by an inset shadow of the same colour, so the fill reaches the screen's side edges of
   the list). */
.ord-items li.lit { animation: row-lit 1.6s ease-out forwards }
/* A dish on its way to Poster: faded, a spinner by its count. */
.ord-items li.pend > div:first-child { opacity: .5 }
.step.pending { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 6px; opacity: .6 }
.spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--brand); animation: spin .8s linear infinite }
@keyframes spin { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 2s } }
/* «−» or «+» on a line while the register makes the change: a spinner in the button's place. */
.step button[aria-busy], .mn-ord li button[aria-busy] { position: relative; color: transparent !important }
.mn-ord li button[aria-busy]:disabled { opacity: 1 }
.step button[aria-busy]::after, .mn-ord li button[aria-busy]::after { content: ''; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; box-sizing: border-box;
  border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--brand); animation: spin .8s linear infinite }
@media (prefers-reduced-motion: reduce) { .step button[aria-busy]::after, .mn-ord li button[aria-busy]::after { animation-duration: 2s } }
.ord-acts { display: flex; gap: 8px }
.ord-acts button { flex: 1; min-width: 0; padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.ord-acts button.quiet { flex: 0 0 auto; padding: 0 14px }
.ord-acts button[hidden] { display: none }
/* «Бегунок» again after the register could not print the last one, as in the list. */
.ord-acts button[data-ord-kitchen].redo { background: #B4413C; color: #fff }
/* The bar keeps its places: «←» left, the magnifier right, the next step stretched between —
   «Бегунок», or «Пречек» once «Бегунок» has stepped aside. */
.ord-acts button[data-ord-kitchen][hidden] ~ button[data-ord-prebill],
.ord-acts:not(:has(button[data-ord-kitchen])) button[data-ord-prebill] { flex: 1 1 auto }
/* The order's history: time, what happened, who; a phone's doing in the brand colour. */
.hlist { list-style: none; margin: 8px 0 0; padding: 0 }
.hlist li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-top: 1px solid var(--line) }
.hlist li:first-child { border-top: 0 }
.hlist time { color: var(--dim); font-size: 13px; font-variant-numeric: tabular-nums; padding-top: 1px }
.hlist span { display: block; overflow-wrap: anywhere }
.hlist small { display: block; color: var(--dim); font-size: 12.5px; margin-top: 1px }
.hlist li.ph small { color: var(--brand) }
.hlist li.bad span { color: #B4413C }
/* ← at the bottom left, in the bar and under the menu: back under the thumb. */
button.ico-back { flex: 0 0 46px; display: grid; place-items: center; width: 46px; padding: 0; background: var(--bg); color: var(--ink); border: 0 }
.mn-q { display: flex; gap: 8px }
.mn-q input { flex: 1; min-width: 0 }
.ord-acts button.ord-plus { flex: 0 0 48px; display: grid; place-items: center; padding: 0; background: color-mix(in srgb, var(--brand) 11%, var(--card)); color: var(--brand); border: 1.5px dashed color-mix(in srgb, var(--brand) 45%, var(--card)); font-size: 26px; font-weight: 700; line-height: 1 }
.menu { z-index: 11; text-align: left; display: flex; flex-direction: column }
.menu .mn-head, .menu .mn-list { width: 100% }
.menu .mn-list { flex: 1 0 auto }
.mn-foot { position: sticky; bottom: 0; background: var(--card); border-top: 1px solid var(--line); box-shadow: 0 -6px 16px rgba(20,17,14,.06); padding: 8px 16px calc(10px + env(safe-area-inset-bottom, 0px)) }
.mn-foot-in { max-width: 608px; margin: 0 auto; display: grid; gap: 8px }
/* The keyboard up: no room kept for the home bar under the search. */
.menu.kb .mn-foot { padding-bottom: 8px }
/* The keyboard up: the layer is the visible part only and does not scroll; the head and the
   search stay put and the list between them scrolls on its own, from its top. (Scrolling the
   whole layer let iPhone pan it off the keys when only a few dishes were found.) */
.menu.kb { overflow: hidden }
.menu.kb .mn-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch }
.mn-ord { position: relative; list-style: none; margin: 0; padding: 0; max-height: 150px; overflow-y: auto; scrollbar-width: none;
  /* A finger on the order scrolls the order, not the menu behind it. */
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y }
/* Lines scrolled away above fade out at the top: there is more of the order up there. */
.mn-ord.up { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px); mask-image: linear-gradient(to bottom, transparent 0, #000 22px) }
.imod { color: var(--dim); font-size: .88em; font-weight: 400 }
.ord-items .nm .imod, .mn-ord .imod { display: block; margin-top: 1px }
.mn-ord .imod { font-size: 12px; line-height: 15px; overflow: hidden; text-overflow: ellipsis }
.mn-ord::-webkit-scrollbar { display: none }
.mn-ord li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 8px; align-items: center; min-height: 34px; padding: 3px 4px 3px 8px; line-height: 20px; border-radius: 8px; font-size: 14px }
.mn-ord li button { width: 28px; min-height: 28px; height: 28px; padding: 0; border-radius: 8px; background: var(--bg); color: var(--ink); font-size: 17px; font-weight: 500; line-height: 1 }
.mn-ord li button:disabled { opacity: .35 }
.mn-ord li[data-mn-line] { cursor: pointer }
.mn-ord li b { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 700 }
.mn-ord li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.mn-ord li i { font-style: normal; color: var(--dim); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap }
.mn-ord li.none { display: block; color: var(--dim) }
.mn-ord li.lit { animation: mn-lit 1.6s ease-out forwards }
/* The glow of a dish just added: green (--lit, the skin sets its own), the row and its sides. */
:root { --lit: color-mix(in srgb, #2E9E4F 15%, var(--card)) }
@keyframes mn-lit { 0%, 55% { background: var(--lit) } 100% { background: transparent } }
@keyframes row-lit { 0%, 55% { background: var(--lit); box-shadow: -16px 0 0 var(--lit), 16px 0 0 var(--lit) } 100% { background: transparent; box-shadow: none } }
@media (prefers-reduced-motion: reduce) { .mn-ord li.lit { animation: none } }
.mn-tot { display: flex; align-items: center; gap: 10px }
.mn-tot span { flex: 1; font-size: 14px; color: var(--dim); font-variant-numeric: tabular-nums }
.mn-tot span b { color: var(--ink); font-size: 16px }
.mn-head { position: sticky; top: 0; z-index: 1; background: var(--card); padding: 14px 16px 6px; max-width: 640px; margin: 0 auto; display: grid; gap: 8px }
/* As tall as «←» beside it: the row stretches the field to the button. */
.mn-foot input[data-mn-q] { height: auto; min-height: 42px; align-self: stretch }
/* Typing a search, the keyboard takes half the screen: the order's lines step aside for the
   dishes found, its total stays. */
.mn-foot:has([data-mn-q]:focus) .mn-ord { display: none }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px }
.chips::-webkit-scrollbar { display: none }
.mhead { position: relative; padding-left: 48px; padding-right: 48px }
.mhead .gear-top { position: absolute; left: 0; top: 0 }
.set-links { display: grid; gap: 10px; margin: 6px 0 2px }
/* «Настройки»: the theme's caption sits by its switch. */
.set-sheet > .hint { margin-bottom: -6px }
.quiet-link { display: flex; align-items: center; min-height: 46px; padding: 0 14px; border-radius: 12px; background: var(--bg); color: var(--ink); font-weight: 600; text-decoration: none }
.seg3 { display: flex; gap: 3px; padding: 3px; border-radius: 12px; background: var(--bg) }
.seg3 button { flex: 1; min-height: 40px; padding: 0 8px; font-size: 14px; font-weight: 500; background: transparent; color: var(--dim) }
.seg3 button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(20,17,14,.12) }
button.quiet.danger { color: #B4413C }
.chips button { flex: none; min-height: 34px; padding: 0 12px; border-radius: 999px; font-size: 13.5px; font-weight: 500; background: var(--bg); color: var(--ink) }
.chips button[aria-pressed="true"] { background: var(--brand); color: #fff }
.mn-list { max-width: 640px; margin: 0 auto; padding: 0 16px calc(20px + env(safe-area-inset-bottom, 0px)) }
.prods { list-style: none; margin: 0; padding: 0 }
.prods button { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 52px; padding: 8px 2px; border-radius: 0; border-top: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; font-weight: 500 }
.prods i { font-style: normal; color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap }
.prods i::after { content: "+"; display: inline-grid; place-items: center; width: 26px; height: 26px; margin-left: 8px; border-radius: 50%; background: color-mix(in srgb, var(--brand) 12%, var(--card)); color: var(--brand); font-weight: 600 }
.prods .more i::after { content: "›" }
/* Not ordered in 30 days: still there, but grey and last. */
.prods li.stale button { color: var(--dim) }
.prods li.stale i::after { background: var(--bg); color: var(--dim) }
.mn-h.mn-stale { color: var(--dim); font-weight: 500; font-size: 13px }
.prods li { display: flex; align-items: stretch; border-top: 1px solid var(--line) }
.prods li > [data-prod] { flex: 1; border-top: 0 }
/* The top dish found: a faint frame says «Поиск» on the keyboard takes this one. */
.prods li:has(> [data-prod].top) { background: color-mix(in srgb, #2E9E4F 10%, var(--card)) }
.inote { margin-top: 3px; font-size: 13px; color: var(--ink); background: color-mix(in srgb, var(--brand) 7%, var(--card)); border-radius: 8px; padding: 3px 8px; width: fit-content; max-width: 100%; overflow-wrap: anywhere }
.mn-h { margin: 14px 0 6px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--dim) }
.mn-h.mn-cat { margin-top: 4px; font-size: 20px; letter-spacing: 0; text-transform: none; color: var(--ink) }
.mn-crumb { display: block; min-height: 36px; margin-top: 6px; padding: 0; background: transparent; color: var(--brand); font-size: 15px; font-weight: 500 }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 2px 0 12px }
/* A tile: its picture fills the left part edge to edge, the name beside it. */
.tile { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: stretch; gap: 0; min-height: 68px; padding: 0; overflow: hidden; border-radius: 12px; background: var(--bg); color: var(--ink); text-align: left; font-weight: 600; font-size: 14px; line-height: 1.2 }
.tile .th { display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 14%, var(--card)) center / cover no-repeat; color: var(--brand); font-size: 20px; font-weight: 700 }
.tile .tn { align-self: center; min-width: 0; padding: 8px 10px; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto }
.prods .inord { display: inline-grid; place-items: center; min-width: 26px; height: 22px; margin-right: 8px; padding: 0 6px; border-radius: 999px; background: var(--brand); color: #fff; font-style: normal; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; vertical-align: 1px }
.tile small, .prods small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--dim) }
.mn-list .empty { color: var(--dim); font-size: 14px; padding: 12px 0 }
.sheet .pmsg:empty { display: none }
.opt-g h4 span { color: var(--dim); font-weight: 400; font-size: 12.5px }
.opt { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-top: 1px solid var(--line); cursor: pointer }
.opt input { width: 20px; height: 20px; margin: 0; accent-color: var(--brand) }
.opt span { flex: 1 }
.opt i { font-style: normal; color: var(--dim); font-size: 13.5px; font-variant-numeric: tabular-nums }
/* An option of a group of several: its own − count +; taken ones stand out. */
.opt.multi { padding: 6px 2px; cursor: pointer }
.opt.multi.on span:first-child { font-weight: 600 }
.opt .ostep { flex: none; display: flex; align-items: center; gap: 6px }
.ostep button { width: 32px; min-height: 32px; height: 32px; padding: 0; border-radius: 9px; background: var(--bg); color: var(--ink); font-size: 18px; font-weight: 500; line-height: 1 }
.ostep b { min-width: 16px; text-align: center; font-variant-numeric: tabular-nums; color: var(--dim) }
.opt.multi.on .ostep b { color: var(--ink) }
.opt.off { opacity: .45 }
.line { display: flex; align-items: center; justify-content: space-between; gap: 10px }
.line > span:first-child { font-weight: 600; font-size: 14px }
.tables { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px }
.tables + .tables { padding-top: 8px; border-top: 1px solid var(--line) }
.tables button { min-height: 44px; padding: 0 6px; background: var(--bg); color: var(--ink) }
.tables button[aria-pressed="true"] { background: var(--brand); color: #fff }
/* A table with an open order: a dot in its corner. */
/* The tables in Poster's own colours, as the register's hall map shows them: free ones graphite,
   ones with an open order blue, on Poster's grey-lilac floor. */
.tables button.busy, .plan button.busy { background: #2B92E6; color: #fff; border-color: transparent }
/* The hall's plan: the tables where the register puts them, scrolled sideways when tight. */
.hall-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none }
.hall-tabs button { flex: none; min-height: 34px; padding: 0 12px; background: var(--bg); color: var(--ink); font-weight: 500; font-size: 14px }
.hall-tabs button[aria-pressed="true"] { background: var(--brand); color: #fff }
.plan-scroll { overflow: auto; max-height: 52vh; margin: 0 -2px; padding: 2px }
.plan { position: relative; background: #D9DCE8; border-radius: 12px }
.plan button { position: absolute; min-height: 0; padding: 1px 2px; margin: 0; border-radius: 6px; background: #373D48; color: #fff; border: 0; font-size: 12.5px; line-height: 1.05; font-weight: 700; white-space: normal; overflow-wrap: anywhere; box-sizing: border-box; overflow: hidden; box-shadow: 0 0 0 2px #D9DCE8 }
.plan button.round { border-radius: 999px }


/* The doors of a manager signed in to the app (orders.js drawHub). */
.hubv { display: grid; gap: 10px; margin-top: 12px }
.hubv a { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 72px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); color: var(--ink); text-decoration: none }
.hubv a:active { transform: scale(.99) }
.hubv a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px }
.hubv .hub-ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand) }
.hubv .hub-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.hubv .hub-tx { display: grid; gap: 2px; min-width: 0 }
.hubv .hub-tx b { font-size: 16.5px; font-weight: 600 }
.hubv .hub-tx span { font-size: 13.5px; color: var(--dim); line-height: 1.35 }
.hubv .hub-go { font-size: 26px; line-height: 1; color: var(--dim) }
/* The same doors in the menu (openSettings): one line each, the section open now marked. */
.hubv.menu-doors { margin: 4px 0 6px; gap: 8px }
.hubv.menu-doors a { grid-template-columns: 36px minmax(0, 1fr); min-height: 52px; padding: 8px 12px }
.hubv.menu-doors .hub-ico { width: 36px; height: 36px; border-radius: 10px }
.hubv.menu-doors .hub-ico svg { width: 20px; height: 20px }
.hubv.menu-doors .hub-tx b { font-size: 15.5px }
.hubv.menu-doors a[aria-current] { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand) }
/* The table the order is at, in the move's picker. */
.tables button.here, .tables button.here:disabled { background: transparent; color: var(--dim); border: 1.5px dashed var(--line); opacity: 1 }
/* «Зачем ссылка Click» on the waiter's page: the guest's way through Click playing small. */
a.callout.click-why { display: flex; gap: 12px; align-items: center; color: var(--ink); text-decoration: none }
a.callout.click-why video { flex: none; width: 58px; aspect-ratio: 780 / 1688; border-radius: 8px; background: var(--bg); object-fit: cover; box-shadow: 0 1px 3px rgba(0,0,0,.15) }
a.callout.click-why > span { display: grid; gap: 6px }
a.callout.click-why b { color: var(--brand); font-weight: 600 }
/* The red dot on the menu's door to the waiter's own page: nowhere to be paid yet. */
.hubv .hub-ico { position: relative }
.hubv .hub-ico .gdot { position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: #D93B30; box-shadow: 0 0 0 2px var(--card) }