/* «Поток» — the owner's day board, drawn as on boxsy.ru (#owner, Д3): the day's numbers in the dark band under the black
   top bar (.ow-band, owner.css; caps captions, white numbers, white progress), one compact white day bar (‹ Сегодня ›,
   legend, search), four light trays (Записаны · Ждут · Боксы · Готово) with compact white cards at the landing's size
   (×~1 on computers, ×~1.3 on phones). Phones: a segmented control shows one column at a time (swipe between them). Every class is .ow-flow-*; shared pieces (.ow-kpis .ow-code
   .plate .ow-ic .ow-btn) come from owner.css; app.css form parts (.chip-r .opt .day .slot .field .consent .part) are
   restyled for the cabinet there too. Black / white / greys, red only as an accent. */
.ow-flow { display: grid; gap: 12px; }
.ow-flow .ow-num { font-variant-numeric: tabular-nums; }
.ow-flow svg { flex: none; }

/* ---------- day bar: ‹ Сегодня, среда 4 ноября › · legend · search (landing .ob-d) ---------- */
.ow-flow-head { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; background: #fff; border-radius: 12px; padding: 7px 7px 7px 9px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .04); }
.ow-flow-daynav { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ow-flow-arrow { width: 30px; height: 30px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px #d2d2d7; display: grid; place-items: center; flex: none; color: var(--ink); transition: transform .15s, box-shadow .2s, background .2s; }
.ow-flow-arrow:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.ow-flow-arrow:active { transform: scale(.94); }
.ow-flow-arrow svg { width: 16px; height: 16px; }
.ow-flow-dayl { margin: 0; display: flex; align-items: baseline; gap: 8px; min-width: 0; cursor: default; }
.ow-flow-dayl b { font: 800 17px/1.1 var(--display); letter-spacing: -.02em; white-space: nowrap; }
.ow-flow-dayl small { font: 500 14px/1.2 var(--font); color: var(--ink-3); white-space: nowrap; }
.ow-flow-dayl.off { cursor: pointer; }
.ow-flow-today { height: 30px; padding: 0 12px; border-radius: 8px; background: var(--ink); color: #fff; font: 600 12.5px/1 var(--font); animation: ow-flow-in .3s var(--ow-ease); }
.ow-flow-today[hidden] { display: none; }
.ow-flow-legend { margin-left: auto; display: flex; gap: 6px 16px; flex-wrap: wrap; color: var(--ink-3); font-size: 12px; }
.ow-flow-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ow-flow-lg { display: inline-block; width: 10px; height: 10px; border-radius: 3px; border: 1.4px dashed var(--ink-3); flex: none; }
.ow-flow-lg.filled { background: var(--ink); border: 1.4px solid var(--ink); }
.ow-flow-search { display: flex; align-items: center; gap: 8px; height: 34px; border-radius: 8px; padding: 0 4px 0 11px; width: 280px; max-width: 100%; background: #fff; box-shadow: inset 0 0 0 1px #d2d2d7; color: var(--ink-3); transition: box-shadow .2s; }
.ow-flow-search:focus-within { box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 0 4px rgba(0, 0, 0, .06); color: var(--ink); }
.ow-flow-search svg { width: 16px; height: 16px; }
.ow-flow-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 500 13.5px var(--font); color: var(--ink); padding: 0; height: 100%; }
.ow-flow-search input::placeholder { color: #86868b; }
.ow-flow-search input::-webkit-search-cancel-button { display: none; }
.ow-flow-qx { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-2); }
.ow-flow-qx:hover { background: rgba(0, 0, 0, .06); }
.ow-flow-qx[hidden] { display: none; }

/* ---------- KPIs: in the dark band (landing .ob-k): caps caption, white number + grey note, white progress ---------- */
.ow-flow-kpis { grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); }
.ow-flow-kpis .k { display: flex; flex-direction: column; }
.ow-flow-kpis .k small { overflow-wrap: anywhere; }
.ow-flow-kpis .k b { white-space: nowrap; }
.ow-flow-ku { color: var(--ink-3); font-size: 13px; white-space: nowrap; margin-top: 6px; overflow: hidden; text-overflow: ellipsis; }
.ow-flow-prog { display: block; height: 4px; border-radius: 2px; background: #ececf0; margin-top: 10px; overflow: hidden; }
.ow-flow-prog i { display: block; height: 100%; background: var(--ow-red); transform-origin: left center; transition: transform .6s var(--ow-ease); }
.ow-band .ow-flow-kpis { background: transparent; color: #fff; border-radius: 0; box-shadow: none; overflow: visible; min-height: 60px; }
.ow-band .ow-launch-slot:not([hidden]) + .ow-flow-kpis { border-top: 1px solid var(--ow-band-line); }
.ow-band .ow-flow-kpis .k { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; align-content: start; column-gap: 7px; padding: 10px 16px 12px; border-left: 1px solid var(--ow-band-line); }
.ow-band .ow-flow-kpis .k:first-child { border-left: 0; padding-left: 0; }
.ow-band .ow-flow-kpis .k small { grid-column: 1 / -1; font: 700 10px/1.25 var(--font); letter-spacing: .08em; text-transform: uppercase; color: #8e8e93; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ow-band .ow-flow-kpis .k b { font: 800 20px/1 var(--display); letter-spacing: -.02em; margin-top: 6px; color: #fff; font-variant-numeric: tabular-nums; }
.ow-band .ow-flow-ku { margin-top: 0; font-size: 11.5px; color: #8e8e93; }
.ow-band .ow-flow-prog { grid-column: 1 / -1; height: 3px; background: #3a3a3c; margin-top: 7px; }
.ow-band .ow-flow-prog i { background: #fff; }

/* search results */
.ow-flow-found { background: #fff; border-radius: 12px; padding: 12px 18px 14px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .04); animation: ow-flow-in .25s var(--ow-ease); }
.ow-flow-found[hidden] { display: none; }
@keyframes ow-flow-in { from { opacity: 0; transform: translateY(-4px); } }
.ow-flow-fh { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 15px; }
.ow-flow-fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 4px 28px; }
.ow-flow-found .ow-flow-g { margin-top: 8px; }
.ow-flow-row { display: flex; align-items: center; gap: 10px; padding: 10px 8px; min-height: 48px; cursor: pointer; min-width: 0; border-radius: 10px; border-bottom: 1px solid var(--line); transition: background .15s; }
.ow-flow-row:last-child { border-bottom-color: transparent; }
.ow-flow-row:hover { background: var(--soft); }
.ow-flow-rn { flex: 1; min-width: 0; font-size: 13.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ow-flow-row > b { white-space: nowrap; font-size: 14px; }
.ow-flow-av { width: 32px; height: 32px; border-radius: 50%; background: var(--soft); display: grid; place-items: center; flex: none; color: var(--ink-2); }

.ow-flow-stale, .ow-flow-closed { background: #fff; border-radius: 12px; padding: 9px 14px; font-size: 13px; color: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); margin-bottom: 10px; }
.ow-flow-link { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: 13px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; text-decoration-color: rgba(0, 0, 0, .3); }
.ow-flow-link:hover { text-decoration-color: var(--ink); }
.ow-flow-link svg { width: 15px; height: 15px; }

/* phone segmented control (hidden on wide screens) */
.ow-flow-seg { display: none; }

/* ---------- 4 columns: light trays (landing .oc: compact head, white cards with a hairline) ---------- */
.ow-flow-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
.ow-flow-col { min-width: 0; background: var(--ow-panel); border-radius: 14px; padding: 9px; }
.ow-flow-ch { display: flex; align-items: center; gap: 8px; padding: 2px 2px 9px; min-width: 0; }
.ow-flow-ch .ow-ic { width: 24px; height: 24px; border-radius: 7px; }
.ow-flow-ch .ow-ic svg { width: 13px; height: 13px; }
.ow-flow-ch h3 { margin: 0; font: 700 14px/1 var(--font); letter-spacing: -.01em; white-space: nowrap; }
.ow-flow-ch h3 span { font-weight: 500; color: var(--ink-3); font-size: 13px; margin-left: 6px; font-variant-numeric: tabular-nums; }
.ow-flow-ch em { margin-left: auto; font-style: normal; font-weight: 500; color: var(--ink-3); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ow-flow-cb { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; align-content: start; }
/* group caption inside a column, small caps as .os on the landing: «СКОРО ПРИЕДУТ · 3», «ЗАВТРА, ЧТ 5 · 1 … ОТКРЫТЬ ДЕНЬ» */
.ow-flow-g { display: flex; justify-content: space-between; align-items: center; gap: 8px; font: 700 10px/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 8px 2px 1px; }
.ow-flow-g:first-child { margin-top: 0; }
.ow-flow-g > span { display: inline-flex; align-items: center; gap: 6px; }
.ow-flow-gl { font: 600 12px/1.2 var(--font); color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(0, 0, 0, .3); padding: 4px 0; }
.ow-flow-g .ow-flow-gl { font: 700 10px/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.ow-flow-gl:hover { text-decoration-color: var(--ink); }
.ow-flow-gl.more { justify-self: start; text-align: left; margin: 0 2px; }
.ow-flow-dot { width: 7px; height: 7px; border-radius: 50%; border: 1.3px dashed var(--ink-3); display: inline-block; }
.ow-flow-dot.on { background: var(--ow-red); border: 0; box-shadow: 0 0 0 3px rgba(227, 38, 43, .15); }
.ow-flow-empty { color: var(--ink-3); font-size: 12.5px; text-align: center; padding: 14px 10px; border-radius: 10px; background: rgba(255, 255, 255, .5); line-height: 1.4; }
.ow-flow-empty.sm { padding: 12px; }
.ow-modal .ow-flow-empty { background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
/* the code and the plate on the board: the landing's small badges (.oi .t / .plate) */
.ow-flow-cols .ow-code { font-size: 11.5px; padding: 3px 5px; border-radius: 5px; border-width: 1.3px; }
.ow-flow-cols .plate { font-size: 10.5px; border-width: 1px; border-radius: 3px; }
.ow-flow-cols .plate b { padding: 2px 4px; }
.ow-flow-cols .plate i { padding: 2px 3px; font-size: 8.5px; border-left-width: 1px; }

/* ticket card (landing .oi) */
.ow-flow-t { background: #fff; border-radius: 9px; padding: 8px 10px 9px; font-size: 12.5px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .03); cursor: pointer; transition: box-shadow .2s, transform .2s var(--ow-ease), opacity .2s; }
.ow-flow-t:hover { box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 6px 16px rgba(0, 0, 0, .07); transform: translateY(-1px); }
.ow-flow-t:active { transform: scale(.99); }
.ow-flow-t:focus-visible, .ow-flow-row:focus-visible, .ow-flow-bm:focus-visible, .ow-flow-dn:focus-visible, .ow-flow-ol:focus-visible { outline: 3px solid rgba(29, 29, 31, .6); outline-offset: 2px; }
.ow-flow-t.drag { cursor: grab; }
.ow-flow-t.dragging { opacity: .4; transform: scale(.98); }
.ow-flow-t.out { opacity: .62; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05); background: rgba(255, 255, 255, .7); }
.ow-flow-t1 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ow-flow-tr { margin-left: auto; font: 700 13px/1 var(--display); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ow-flow-tr.s { font: 500 11.5px/1 var(--font); color: var(--ink-3); }
.ow-flow-t.late .ow-flow-tr { color: var(--ink); font-weight: 700; }
.ow-flow-t.late .ow-flow-tr::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ow-red); margin-right: 5px; vertical-align: 1px; }
.ow-flow-t2 { margin-top: 6px; color: var(--ink); font-weight: 500; display: flex; flex-wrap: wrap; align-items: center; gap: 3px 7px; }
.ow-flow-t3 { margin-top: 3px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 11.5px; color: var(--ink-3); }
.ow-flow-t3 > span { min-width: 0; }
.ow-flow-t3 > b { color: var(--ink); font: 700 12.5px/1 var(--font); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ow-flow-st { display: inline; }
.ow-flow-late { color: var(--ink); font-weight: 700; }
.ow-flow-st svg { width: 11px; height: 11px; vertical-align: -1px; margin-right: 3px; display: inline; }
.ow-flow-np { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.ow-flow-tag { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 5px; background: var(--ink); color: #fff; white-space: nowrap; }
.ow-flow-tag.dashed { background: transparent; color: var(--ink); border: 1.2px dashed var(--ink); }

/* tomorrow at a glance (landing .ol) */
.ow-flow-ol { display: flex; align-items: center; gap: 7px; font-size: 12px; padding: 4px 4px; min-height: 28px; color: var(--ink-2); cursor: pointer; border-radius: 8px; min-width: 0; transition: background .15s; }
.ow-flow-ol:hover { background: rgba(255, 255, 255, .7); }
.ow-flow-ol i { width: 9px; height: 9px; border-radius: 50%; border: 1.3px dashed var(--ink); flex: none; }
.ow-flow-ol i.on { background: var(--ink); border-style: solid; }
.ow-flow-olt { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.ow-flow-olm { color: var(--ink-3); min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ow-flow-ol b { margin-left: auto; white-space: nowrap; color: var(--ink); font-variant-numeric: tabular-nums; }

/* «+ Без записи» */
.ow-flow-add { width: 100%; text-align: center; border-radius: 9px; min-height: 36px; padding: 8px; color: var(--ink); font: 600 12.5px/1.2 var(--font); margin-top: 2px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16); transition: background .2s, box-shadow .2s; }
.ow-flow-add:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--ink); }

/* ---------- boxes (landing .obox): «БОКС 1» in caps + state, code · plate · ring, one pill ---------- */
.ow-flow-box { background: #fff; border-radius: 9px; padding: 9px 10px 10px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .03); font-size: 12.5px; transition: box-shadow .2s, background .2s, opacity .2s, transform .2s var(--ow-ease); }
.ow-flow-box.free { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16); background: rgba(255, 255, 255, .55); }
.ow-flow-box.free p { margin: 6px 0 0; color: var(--ink-3); font-size: 12px; line-height: 1.4; }
.ow-flow-box.free .ow-flow-go { margin-top: 9px; }
.ow-flow-bh { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-width: 0; }
.ow-flow-bh b { font: 700 11px/1.2 var(--font); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ow-flow-bh span { flex: none; font: 600 11.5px/1.2 var(--font); color: var(--ink-2); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ow-flow-bh span.live::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ow-red); margin-right: 5px; vertical-align: 1px; }
.ow-flow-bmeta { margin-top: 2px; font: 500 11.5px/1.3 var(--font); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ow-flow-bmeta i { font-style: normal; }
.ow-flow-bm { cursor: pointer; border-radius: 8px; }
.ow-flow-bm .ow-flow-t1 { margin-top: 7px; }
.ow-flow-bc { margin-top: 5px; display: flex; flex-wrap: wrap; align-items: center; gap: 3px 7px; font-weight: 500; }
.ow-flow-bs { margin-top: 2px; font-size: 11.5px; color: var(--ink-3); }
/* progress ring of a car in the box: minutes passed in the middle, red arc */
.ow-flow-ring { position: relative; width: 40px; height: 40px; margin-left: auto; flex: none; }
.ow-flow-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ow-flow-ring circle { fill: none; stroke-width: 5; }
.ow-flow-ring .tr { stroke: #ececf0; }
.ow-flow-ring .pg { stroke: var(--ow-red); stroke-linecap: round; transition: stroke-dashoffset .6s var(--ow-ease); }
.ow-flow-ring.over .pg { stroke: var(--ink); }
.ow-flow-ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 800 13px/1 var(--display); font-variant-numeric: tabular-nums; }
.ow-flow-cd { margin-left: auto; flex: none; display: grid; justify-items: center; padding: 4px 8px; border-radius: 8px; background: var(--soft); line-height: 1; }
.ow-flow-cd small { font-size: 10px; font-weight: 600; color: var(--ink-3); }
.ow-flow-cd b { font: 800 15px/1 var(--display); font-variant-numeric: tabular-nums; margin-top: 2px; }
.ow-flow-cd.over { background: var(--ink); color: #fff; }
.ow-flow-cd.over small { color: #c7c7cc; }
/* pill actions in a box (landing .go: 30 px on computers; 44 px under a finger, below) */
.ow-flow-go { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 32px; border-radius: 999px; background: var(--ink); color: #fff; font: 600 12.5px/1 var(--font); margin-top: 8px; padding: 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .2s, transform .15s; }
.ow-flow-go:hover { background: #333336; }
.ow-flow-go:active { transform: scale(.98); }
.ow-flow-go svg { width: 14px; height: 14px; }
.ow-flow-go.ol { background: var(--ow-fill); color: var(--ink); }
.ow-flow-go.ol:hover { background: #dedee3; }
.ow-flow-go[disabled] { opacity: .45; pointer-events: none; }
.ow-flow-bbtns { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 5px; margin-top: 8px; }
.ow-flow-bbtns .ow-flow-go { margin-top: 0; padding: 0 6px; font-size: 12.5px; }
.ow-flow-hint-t { display: none !important; }
@media (hover: none), (max-width: 640px) { .ow-flow-hint-p { display: none !important; } .ow-flow-hint-t { display: block !important; } }
@media (hover: none) { .ow-flow-go { min-height: 44px; } .ow-flow-add { min-height: 44px; } .ow-flow-ol { min-height: 40px; } }
body.ow-flow-dragging .ow-flow-box[data-drop] { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
body.ow-flow-dragging .ow-flow-box[data-drop].over { box-shadow: inset 0 0 0 2.5px var(--ink), 0 10px 30px rgba(0, 0, 0, .12); transform: scale(1.015); }
body.ow-flow-dragging .ow-flow-box[data-drop].nodrop { opacity: .4; }

/* ---------- done (landing .ogd / .ogt) ---------- */
.ow-flow-dn { display: flex; align-items: center; gap: 6px; background: #fff; border-radius: 8px; padding: 6px 9px; min-height: 34px; font-size: 12.5px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); cursor: pointer; min-width: 0; transition: box-shadow .2s; }
.ow-flow-dn:hover { box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 4px 12px rgba(0, 0, 0, .06); }
.ow-flow-dn small { margin-left: auto; font-size: 11px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ow-flow-dn .ow-flow-np { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ow-flow-dn b { white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 52px; text-align: right; }
.ow-flow-dtot { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 4px 2px; font-size: 12px; color: var(--ink-3); }
.ow-flow-dtot b { color: var(--ink); font: 800 17px/1 var(--display); letter-spacing: -.02em; }

/* ---------- sheets (detail, walk-in, booking) ---------- */
.ow-flow-sheet .part { margin: 20px 2px 10px; }
.ow-flow-sheet .part.sub { font-size: 13.5px; color: var(--ink-3); margin-top: 14px; }
.ow-flow-sheet .ow-flow-fcol > .part:first-child, .ow-flow-sheet .ow-flow-bcol > .part:first-child { margin-top: 6px; }
.ow-flow-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; font: 700 12px/1 var(--font); margin-right: 2px; }
.ow-flow-cars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ow-flow-rads { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.ow-flow-cars .chip-r, .ow-flow-rads .chip-r { font-size: 14px; padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ow-flow-car { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 68px !important; }
.ow-flow-car svg { width: 34px; height: 34px; }
.ow-flow-car span { font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.ow-flow-opts { display: grid; gap: 8px; }
.ow-flow-opts .opt { padding: 12px 14px; }
.ow-flow-opts .opt .on1 { font-size: 14.5px; display: block; }
.ow-flow-opts .opt .os { display: block; }
.ow-flow-f input { font-size: 17px; }
.ow-flow-sheet .bxf { margin-bottom: 12px; }
.ow-flow-sheet .bxf-cap { margin-top: 2px; }
.ow-flow-sheet .consent { margin-top: 2px; }
.ow-flow-wk, .ow-flow-book { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; }
.ow-flow-fcol, .ow-flow-bcol { min-width: 0; }
.ow-flow-book .ow-flow-cars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ow-flow-need { border-radius: 16px; box-shadow: 0 0 0 2px var(--ow-red), 0 0 0 6px rgba(227, 38, 43, .1); }
.ow-flow-sheet .shake { animation: ow-flow-shake .38s cubic-bezier(.36, .07, .19, .97); }
@keyframes ow-flow-shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.ow-flow-foot { grid-column: 1 / -1; position: sticky; bottom: 0; z-index: 3; margin: 20px -24px -24px; padding: 14px 24px 18px; background: rgba(245, 245, 247, .92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: 1px solid var(--line); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ow-flow-sum { display: flex; align-items: baseline; gap: 12px; min-width: 0; flex: 1; }
.ow-flow-sum b { font-size: 28px; letter-spacing: -.03em; white-space: nowrap; }
.ow-flow-sum span { color: var(--ink-2); font-size: 14px; }
.ow-flow-err { flex-basis: 100%; order: -1; font-weight: 600; font-size: 14px; color: var(--ow-red); min-height: 0; }
.ow-flow-err:empty { display: none; }
.ow-flow-submit { min-height: 50px; padding: 0 28px; font-size: 15.5px; }
.ow-flow-days { padding-top: 0; }
.ow-flow-days .day { width: 56px; }
.ow-flow-slots { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
.ow-flow-sheet .consent[hidden] { display: none; }

/* detail */
.ow-flow-dh { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.ow-flow-chip { margin-left: auto; font-weight: 700; font-size: 12.5px; padding: 6px 11px; border-radius: 999px; background: var(--ink); color: #fff; white-space: nowrap; }
.ow-flow-chip.dashed { background: #fff; color: var(--ink); border: 1.4px dashed var(--ink); }
.ow-flow-dcar { color: var(--ink-2); font-size: 15px; margin: 10px 2px 14px; }
.ow-flow-dgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ow-flow-dc { padding: 12px 16px; margin-bottom: 10px; border-radius: 16px; }
.ow-flow-kv { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; font-size: 14px; border-bottom: 1px solid var(--line); }
.ow-flow-kv:last-child { border-bottom: 0; }
.ow-flow-kv span { color: var(--ink-2); min-width: 0; }
.ow-flow-kv b { text-align: right; font-weight: 600; white-space: nowrap; }
.ow-flow-kv.tot b { font: 800 22px/1 var(--display); letter-spacing: -.02em; }
.ow-flow-dcl1 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ow-flow-dcl1 > div { min-width: 0; }
.ow-flow-dcl1 .ow-tel { white-space: nowrap; }
.ow-flow-ml { margin-left: auto; }
.ow-flow-cstat { display: flex; gap: 6px 20px; flex-wrap: wrap; margin-top: 12px; font-size: 13.5px; color: var(--ink-2); }
.ow-flow-cstat b { font-family: var(--display); font-weight: 800; font-size: 16px; color: var(--ink); }
.ow-flow-cnote { margin-top: 10px; background: var(--soft); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; }
.ow-flow-pp { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: 12px; border: 1.4px solid var(--ink); font-size: 14px; }
.ow-flow-pp.dashed { border-style: dashed; }
.ow-flow-dacts { margin: 8px 0 14px; }
.ow-flow-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ow-flow-acts .ow-btn { min-height: 44px; padding: 0 18px; font-size: 14px; }
.ow-flow-acts.sec { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.ow-flow-acap { flex-basis: 100%; font: 600 12.5px/1.2 var(--font); color: var(--ink-3); margin: 0 2px 2px; }
.ow-flow-note { font-size: 13.5px; color: var(--ink-2); padding: 4px 2px; }
.ow-flow-tok { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; background: var(--card); border-radius: 16px; padding: 12px 16px; font-size: 13.5px; margin-bottom: 10px; box-shadow: var(--ow-shadow-s); }
.ow-flow-tok > span { color: var(--ink-3); flex-basis: 100%; }
.ow-flow-tok a { font-weight: 600; word-break: break-all; }
.ow-flow-tok .ow-flow-link { margin-left: auto; }
.ow-flow-ev { background: var(--card); border-radius: 16px; padding: 12px 16px; font-size: 13.5px; box-shadow: var(--ow-shadow-s); }
.ow-flow-ev summary { cursor: pointer; font-weight: 600; min-height: 28px; display: flex; align-items: center; }
.ow-flow-evr { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ow-flow-evr:last-child { border-bottom: 0; }
.ow-flow-back { margin: 0 0 12px; text-decoration: none; min-height: 40px; }
.ow-flow-ok-v { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 8px 0 4px; }
.ow-flow-okic { width: 64px; height: 64px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; animation: ow-flow-pop .5s cubic-bezier(.3, 1.5, .5, 1) both; }
.ow-flow-okic svg { width: 30px; height: 30px; }
@keyframes ow-flow-pop { from { transform: scale(.6); opacity: 0; } }
.ow-flow-ok-v .ow-flow-tok { width: 100%; text-align: left; margin-top: 8px; }
.ow-flow-okt { font-family: var(--display); font-weight: 800; font-size: 23px; letter-spacing: -.02em; margin-top: 6px; }
.ow-flow-oks { color: var(--ink-2); font-size: 14.5px; }

/* ---------- narrower screens ---------- */
@media (max-width: 1180px) {
  .ow-flow-legend { display: none; }
  .ow-flow-search { margin-left: auto; }
}
@media (min-width: 1101px) and (max-width: 1320px) {
  .ow-flow-dn small { display: none; } /* 4 narrow columns: badge, plate and sum; time and rating in the ticket sheet */
  .ow-flow-dn b { margin-left: auto; }
  .ow-band .ow-flow-kpis .k { padding: 10px 12px 12px; }
  .ow-band .ow-flow-kpis .k:first-child { padding-left: 0; }
}
@media (max-width: 1100px) {
  .ow-flow-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ow-flow-kpis .k:nth-child(n+4) { border-top: 1px solid var(--line); }
  .ow-flow-kpis .k:nth-child(4) { border-left: 0; }
  .ow-band .ow-flow-kpis .k:nth-child(n+4) { border-top: 1px solid var(--ow-band-line); }
  .ow-band .ow-flow-kpis .k:nth-child(3n+1) { border-left: 0; padding-left: 0; }
  .ow-flow-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ow-flow-search { width: 260px; }
}
@media (max-width: 960px) {
  .ow-flow-wk, .ow-flow-book { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ow-flow { gap: 10px; }
  /* day bar: ‹ Сегодня / среда, 4 ноября › on one row, the search under it */
  .ow-flow-head { gap: 8px; padding: 6px; }
  .ow-flow-daynav { width: 100%; flex-wrap: wrap; row-gap: 8px; }
  .ow-flow-dayl { flex: 1 0 calc(100% - 108px); flex-direction: column; align-items: center; gap: 1px; text-align: center; }
  .ow-flow-dayl b { font-size: 18px; }
  .ow-flow-dayl small { font-size: 13px; }
  .ow-flow-today { order: 5; margin: 0 auto; height: 36px; padding: 0 16px; font-size: 13.5px; }
  .ow-flow-search { width: 100%; height: 42px; }
  .ow-flow-search input { font-size: 16px; } /* no zoom-in on iOS */
  /* KPIs in the band: 3 × 2, caption on top, numbers on one line */
  .ow-band .ow-flow-kpis .k { display: flex; flex-direction: column; align-items: stretch; padding: 8px 8px 10px 10px; }
  .ow-band .ow-flow-kpis .k small { min-height: 2.5em; white-space: normal; font-size: 9.5px; letter-spacing: .06em; } /* two lines kept: the numbers of a row line up */
  .ow-band .ow-flow-kpis .k b { font-size: 18px; margin-top: 5px; }
  .ow-band .ow-flow-ku { margin-top: 3px; font-size: 11px; white-space: normal; overflow: visible; } /* «к вечеру ~33 800 ₽» wraps, never cut */
  .ow-band .ow-flow-prog { margin-top: 5px; }
  /* one column at a time */
  .ow-flow-seg { display: flex; position: sticky; top: calc(var(--ow-barh, 57px) + 6px); z-index: 5; padding: 3px; gap: 2px; border-radius: 13px; background: rgba(232, 232, 237, .92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
  .ow-flow-seg button { flex: 1 1 0; min-width: 0; min-height: 44px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--ink-2); transition: background .2s, box-shadow .2s, color .2s; }
  .ow-flow-seg button span { font: 600 12px/1.1 var(--font); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ow-flow-seg button b { font: 800 15px/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
  .ow-flow-seg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 3px 10px rgba(0, 0, 0, .06); }
  .ow-flow-cols { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ow-flow-cols[data-show] > .ow-flow-col { display: none; }
  .ow-flow-cols[data-show="booked"] > [data-col="booked"], .ow-flow-cols[data-show="waiting"] > [data-col="waiting"],
  .ow-flow-cols[data-show="boxes"] > [data-col="boxes"], .ow-flow-cols[data-show="done"] > [data-col="done"] { display: block; }
  .ow-flow-col { border-radius: 20px; background: transparent; padding: 0; }
  .ow-flow-col.from-r { animation: ow-flow-r .3s var(--ow-ease); }
  .ow-flow-col.from-l { animation: ow-flow-l .3s var(--ow-ease); }
  .ow-flow-ch { padding: 4px 2px 10px; }
  .ow-flow-ch .ow-ic { width: 28px; height: 28px; border-radius: 8px; }
  .ow-flow-ch h3 { font-size: 16px; }
  .ow-flow-ch em { font-size: 12.5px; }
  .ow-flow-cb { gap: 8px; }
  /* phones: the landing's size × ~1.3 */
  .ow-flow-t, .ow-flow-box, .ow-flow-dn { box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 1px 3px rgba(0, 0, 0, .05); }
  .ow-flow-t { padding: 12px 13px; font-size: 14px; border-radius: 12px; }
  .ow-flow-t3 { font-size: 12.5px; }
  .ow-flow-t3 > b { font-size: 14px; }
  .ow-flow-tr { font-size: 14.5px; }
  .ow-flow-tr.s { font-size: 12.5px; }
  .ow-flow-cols .ow-code { font-size: 13px; padding: 4px 6px; border-radius: 6px; }
  .ow-flow-cols .plate { font-size: 11.5px; }
  .ow-flow-cols .plate i { font-size: 9.5px; }
  .ow-flow-box { padding: 12px 13px 13px; font-size: 14px; border-radius: 12px; }
  .ow-flow-bh b { font-size: 12px; }
  .ow-flow-bh span, .ow-flow-bmeta, .ow-flow-bs { font-size: 12.5px; }
  .ow-flow-ring { width: 48px; height: 48px; }
  .ow-flow-ring b { font-size: 15px; }
  .ow-flow-cd b { font-size: 17px; }
  .ow-flow-go { min-height: 44px; font-size: 14px; margin-top: 10px; }
  .ow-flow-bbtns { margin-top: 10px; gap: 6px; }
  .ow-flow-bbtns .ow-flow-go { font-size: 13.5px; }
  .ow-flow-dn { min-height: 44px; padding: 8px 12px; font-size: 13.5px; border-radius: 12px; }
  .ow-flow-g { font-size: 11px; margin: 10px 2px 2px; }
  .ow-flow-g .ow-flow-gl { font-size: 11px; }
  .ow-flow-ol { font-size: 13.5px; }
  .ow-flow-add { min-height: 46px; font-size: 14px; border-radius: 12px; }
  .ow-flow-empty { font-size: 13.5px; padding: 18px 12px; }
  .ow-flow-fgrid { grid-template-columns: minmax(0, 1fr); }
  .ow-flow-cars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ow-flow-rads { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ow-flow-dgrid { grid-template-columns: minmax(0, 1fr); }
  .ow-flow-submit { flex: 1; }
  .ow-flow-sum { flex-basis: 100%; }
  .ow-flow-sum b { font-size: 24px; }
  .ow-flow-foot { gap: 10px; margin: 20px -16px -20px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); }
  .ow-flow-acts .ow-btn { flex: 1 1 auto; }
}
@keyframes ow-flow-r { from { opacity: 0; transform: translateX(28px); } }
@keyframes ow-flow-l { from { opacity: 0; transform: translateX(-28px); } }
@media (max-width: 360px) {
  .ow-band .ow-flow-kpis .k { padding-right: 6px; }
  .ow-flow-seg button span { font-size: 11px; }
  .ow-flow-bbtns { grid-template-columns: 1fr 1fr; }
  .ow-flow-bbtns .ow-flow-go:first-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .ow-flow-t, .ow-flow-box, .ow-flow-prog i, .ow-flow-ring .pg { transition: none !important; }
  .ow-flow-col.from-r, .ow-flow-col.from-l, .ow-flow-found, .ow-flow-today, .ow-flow-okic, .ow-flow-sheet .shake { animation: none !important; }
}

/* ticket detail: a medium sheet, values may wrap */
.ow-modal.ow-flow-dsheet { max-width: 780px; }
.ow-flow-dsheet .ow-flow-kv b { white-space: normal; }
.ow-flow-dsheet .ow-flow-dgrid > .ow-flow-dc:first-child .ow-flow-kv b { white-space: nowrap; } /* prices never break */
.ow-flow-dsheet .ow-flow-kv span { flex: none; }
.ow-flow-dsheet .ow-flow-dgrid .ow-flow-kv span { flex: 1 1 auto; }
@media (max-width: 640px) { .ow-flow-sum.empty { display: none; } }

/* contrast: grey text on the grey trays stays ≥ 4.5:1 */
.ow-flow-col { --ink-3: #5f5f64; }
.ow-flow-search input::placeholder { color: #6e6e73; }
/* phones: everything you tap is at least 44 px */
@media (max-width: 640px) {
  .ow-flow-arrow { width: 44px; height: 44px; }
  .ow-flow-gl { padding: 12px 0; }
  .ow-flow-qx { width: 40px; height: 40px; }
  .ow-flow-ol { min-height: 44px; }
}

/* «Не закрыты с прошлого дня» (P0-2): above the columns, one row per car with Готово / Неявка / Снять */
/* compact (Д3): the title and the why on one line, a row per car — the columns stay on the first screen */
.ow-flow-stale-l { display: grid; gap: 7px; padding: 10px 12px 10px 16px; margin-bottom: 10px; border-radius: 12px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), inset 3px 0 0 var(--ow-red); }
.ow-flow-stale-h { display: flex; align-items: baseline; gap: 2px 10px; flex-wrap: wrap; }
.ow-flow-stale-h b { font: 600 14px/1.3 var(--font); }
.ow-flow-stale-h span { color: var(--ink-3); font-size: 12.5px; }
.ow-flow-stale-r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 0 0; border-top: 1px solid var(--line); cursor: pointer; }
.ow-flow-stale-r .ow-code { font-size: 12px; padding: 3px 6px; border-radius: 5px; }
.ow-flow-stale-r .plate { font-size: 10.5px; }
.ow-flow-stale-t { flex: 1; min-width: 160px; color: var(--ink-2); font-size: 13px; }
.ow-flow-stale-b { display: flex; gap: 6px; flex-wrap: wrap; }
.ow-flow-stale-b .ow-btn { min-height: 32px; padding: 0 13px; font-size: 13px; }
@media (hover: none) { .ow-flow-stale-b .ow-btn { min-height: 44px; } }
@media (max-width: 640px) { .ow-flow-stale-l { padding: 12px 14px 12px 16px; } .ow-flow-stale-h { display: grid; } .ow-flow-stale-b { width: 100%; } .ow-flow-stale-b .ow-btn { flex: 1 1 0; } }
/* «Услуги и сумма» in the ticket sheet (P1-2) */
.ow-flow-svcr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.ow-flow-svcs { display: grid; gap: 2px; }
.ow-flow-svc { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; padding: 10px 4px; border-top: 1px solid var(--line); cursor: pointer; font-size: 14px; }
.ow-flow-svc:first-child { border-top: 0; }
.ow-flow-svc input { width: 18px; height: 18px; accent-color: var(--ink); }
.ow-flow-svc small { color: var(--ink-3); }

/* ---------- toast with «Отменить» (common.js actToast; UX plan У7): the dark pill + one light button ---------- */
body.ow .toast.ow-toast-act { display: flex; align-items: center; gap: 14px; width: max-content; padding: 6px 6px 6px 20px; text-align: left; }
.ow-toast-act > span { flex: 1; min-width: 0; padding: 6px 0; }
.ow-toast-act > button { flex: none; min-height: 40px; padding: 0 16px; border-radius: 999px; background: rgba(255, 255, 255, .16); color: #fff; font: 600 14px/1 var(--font); cursor: pointer; transition: background .2s, transform .15s; }
.ow-toast-act > button:hover { background: rgba(255, 255, 255, .26); }
.ow-toast-act > button:active { transform: scale(.96); }
.ow-toast-act > button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- round 2 ---------- */
/* Q1: a ticket of another day carries its day on the badge — «A-1 · вчера» (common.js codeBadge; .ow-code is in owner.css,
   this file loads on every tab, so the tag lives here for «Клиенты» too) */
.ow-code-tag { font: 600 .86em/1 var(--font); letter-spacing: 0; margin-left: .35em; opacity: .8; white-space: nowrap; }
.ow-code.lg .ow-code-tag { font-size: .5em; margin-left: .45em; align-self: center; }
/* Q4: a box held by a car left from an earlier day — no timer, no ring; quiet, it waits to be closed */
.ow-flow-box.stale { box-shadow: var(--ow-shadow-s), inset 3px 0 0 var(--ow-red); }
.ow-flow-box.stale .ow-flow-bh span { color: var(--ink); }
.ow-flow-box.stale .ow-flow-bbtns { display: flex; }
.ow-flow-box.stale .ow-flow-bbtns .ow-flow-go { flex: 1 1 0; min-width: 0; }
.ow-flow-hint-s { margin: 10px 2px 0; color: var(--ink-3); font-size: 12.5px; line-height: 1.4; }
.ow-flow-dacts > .ow-flow-acap { margin: 0 2px 8px; font-size: 13px; color: var(--ink-2); }
/* P1-4: no box takes a way in — a plaque (all boxes off) or one quiet line (only booking / only queue) */
.ow-flow-ways { margin-bottom: 10px; background: #fff; border-radius: 12px; padding: 9px 14px; font-size: 13px; line-height: 1.4; color: var(--ink-2); box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .12); }
.ow-flow-ways .ow-flow-link { font: inherit; font-weight: 600; color: var(--ink); white-space: nowrap; }
.ow-flow-ways.strong { display: grid; gap: 3px; padding: 11px 14px 11px 16px; color: var(--ink); box-shadow: var(--ow-shadow), inset 3px 0 0 var(--ow-red); }
.ow-flow-ways.strong b { font: 600 14px/1.3 var(--font); }
.ow-flow-ways.strong span { color: var(--ink-3); font-size: 12.5px; }
/* ticket history: the date of an event on another day than the ticket's, under its time */
.ow-flow-evd { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 500; color: var(--ink-3); white-space: nowrap; }
/* «Отправить талон»: WhatsApp / SMS from the owner's phone (flow.js shareBtns) */
.ow-flow-share { flex-basis: 100%; display: flex; gap: 8px; margin-top: 4px; }
.ow-flow-share .ow-btn { flex: 1; justify-content: center; gap: 6px; }