/* ─────────────────────────────────────────────────────────────
   עונים לי — אזור הלקוח (/app/), 28.9.2026
   ארבעה חדרים (בית · העוזר · שיחות · חשבון). בחדר העוזר ההגדרות הן השיחה עצמה:
   נוגעים במשפט בבועה והעורך נפתח מתחתיה, באותו מקום. אין כפתור «שמירת שינויים»
   כללי — כל עורך שומר את מה שבתוכו, ומתגים ובחירות נשמרים בלחיצה.
   יושב מעל family.css: אותם צבעים, גופנים, פינת עלה, צל קשיח, .btn, .card, .tab.
   ───────────────────────────────────────────────────────────── */

:root { --tabbar-h: 70px; --col: 720px; --ok: #1e6b37; --err: #b3261e; }

.onapp { min-height: 100vh; min-height: 100dvh; padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); background: var(--page); }
.onapp :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* ── top bar: the brand, nothing to sell; as wide as עונים לי בהודעות's (its --desk, 1240px), so the product switch
   stands in the same place in both dashboards. No accessibility key here (18.10.2026, Achiya): the law asks for an
   accessible dashboard and its statement (the link at the foot), not a toolbar; the site's pages keep a11y.js ── */
.app-top { position: sticky; top: 0; z-index: 45; border-bottom: 1px solid var(--hair); background: var(--page); }
.app-top__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: min(100% - 32px, 1240px); min-height: 60px; margin-inline: auto; }
.app-top .brand img { width: 36px; height: 36px; }
.app-top .brand__name { font-size: 22px; }
.app-top__site { font: 14.5px/1.3 var(--f-ui); color: var(--ink-2); text-decoration: none; }
.app-top__site:hover { text-decoration: underline; }

/* ── the four rooms: a bottom tab bar on phones, a segmented bar on desktop ── */
.tabbar { position: fixed; z-index: 40; inset-inline: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: var(--sheet); border-top: 2px solid var(--ink); }
.tabbar button { display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 58px; padding: 4px 2px; background: none; border: 0; color: var(--ink-2); font: 13.5px/1.1 var(--f-ui); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tabbar__ic { display: grid; place-items: center; width: 52px; height: 30px; border: 2px solid transparent; border-radius: 999px; }
.tabbar__ic .i { width: 22px; height: 22px; }
.tabbar button[aria-current="page"] { color: var(--ink); }
/* the raised key: the room you are in stands up out of the bar */
.tabbar button[aria-current="page"] .tabbar__ic { background: var(--yellow); border-color: var(--ink); box-shadow: 2px 3px 0 rgba(27, 26, 23, 0.86); transform: translateY(-1px); }
.tabbar button:active .tabbar__ic { transform: translateY(1px); box-shadow: none; }

/* ── a room ── */
.room { width: min(100% - 32px, var(--col)); margin-inline: auto; padding: 26px 0 36px; }
.room[hidden] { display: none; }
/* a room comes in softly instead of snapping (18.10.2026): it rises a little as it fades in; nothing of it stays after 0.3 s */
@media (prefers-reduced-motion: no-preference) {
  .room:not([hidden]) { animation: room-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
}
@keyframes room-in { from { opacity: 0; transform: translateY(10px); } }
/* a tab or «לכל השיחות» (soft.js softly): the room on screen fades into the next while the two bars stay put */
.app-top { view-transition-name: app-top; }
.tabbar { view-transition-name: tabbar; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.28s; animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1); }
/* ה׳ «רציף וקפיצי» (3.11.2026, soft.js): between rooms what is on both sides goes to its new place on the spring (--spring,
   --spring-d), what left fades at once and the new room's own paper comes in under it; a call's line grows into its
   screen, cut to its box. A tap during the motion reaches the page under it. */
::view-transition { pointer-events: none; }
html.vt-room::view-transition-group(*), html.vt-grow::view-transition-group(*) { animation-duration: var(--spring-d); animation-timing-function: var(--spring); }
html.vt-room::view-transition-old(root) { animation-duration: 0.13s; animation-timing-function: ease-out; }
html.vt-room::view-transition-new(root) { animation-duration: 0.32s; animation-delay: 0.06s; animation-timing-function: ease-out; }
html.vt-grow::view-transition-group(soft-grow) { overflow: clip; border-radius: 18px; z-index: 1; }   /* over the top bar, as the screen is */
html.vt-grow::view-transition-group(tabbar) { z-index: 2; }   /* the tab bar stays over the screen (.has-push .tabbar) */
html.vt-grow::view-transition-old(soft-grow) { animation-duration: 0.2s; animation-timing-function: ease-out; }
html.vt-grow::view-transition-new(soft-grow) { animation-duration: 0.18s; animation-timing-function: ease-out; }
html.vt-grow::view-transition-old(root), html.vt-grow::view-transition-new(root) { animation-duration: 0.3s; }
/* בשיחות ↔ בהודעות: the lit product goes over on the same spring */
html::view-transition-group(product-lit) { animation-duration: var(--spring-d, 0.28s); animation-timing-function: var(--spring, cubic-bezier(0.22, 1, 0.36, 1)); }
/* night, by the phone's own setting: every part takes its colours in a wave from the top (soft.js --wd) */
html.waving body, html.waving body * { transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease, fill 0.5s ease !important; transition-delay: var(--wd, 0ms) !important; }
.room__title { font: 34px/1.12 var(--f-display); }
.room__lead { max-width: 56ch; margin-top: 8px; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
/* the room's content 32px under its title, as in עונים לי בהודעות (wa-bot .room__head): the account's card sat on it */
.room__title + :is(.card, .road) { margin-top: 32px; }
.room h3 { font: 19px/1.3 var(--f-ui); }
.group { margin-top: 34px; }
.group > h3 + * { margin-top: 12px; }
.group__note { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
.group__note .i { width: 16px; height: 16px; vertical-align: -0.2em; }   /* the lock sits on the words' middle, not above it */

/* ── state line: one dot, one sentence ── */
.state { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; font: 17px/1.45 var(--f-ui); }
.state__dot { flex: none; width: 14px; height: 14px; margin-top: 5px; border: 2px solid var(--ink); border-radius: 50%; background: transparent; }
.state.is-on .state__dot { background: var(--yellow); box-shadow: 0 0 0 3px rgba(255, 232, 26, 0.35); }
.state__sub { display: block; font: 14.5px/1.5 var(--f-body); color: var(--ink-soft); }

/* ── the slip: the latest summary, the same words the WhatsApp message carries ── */
.slip { margin-top: 24px; padding: 20px 20px 18px; }
.slip__who { font: 19px/1.35 var(--f-ui); }
.slip__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 12px; font-size: 14.5px; color: var(--ink-soft); }
.slip__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.slip__all { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 6px; font: 16px/1.3 var(--f-ui); color: var(--ink); background: none; border: 0; padding: 4px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 0.25em; }
.slip--empty { border-style: dashed; box-shadow: none; background: transparent; }
.slip--empty p { font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.month { margin-top: 14px; font-size: 16px; color: var(--ink-2); }
.month b { font-size: 16px; color: var(--ink); }

/* ── the next step: one card, one yellow key ── */
.next { margin-top: 26px; padding: 20px; background: var(--ivory); border: 2px solid var(--ink); border-radius: var(--leaf-sm); }
.next__title { font: 17px/1.35 var(--f-ui); }
.next__text { margin-top: 6px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.next .btn { margin-top: 14px; }

/* ── grouped rows: the settings you open one at a time ── */
.rowlist { background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--leaf-sm); box-shadow: var(--card-shadow); }
.row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 16px; background: none; border: 0; border-top: 1px solid var(--hair); color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
.rowlist > .row:first-child, .rowlist > :first-child > .row { border-top: 0; }
.rowlist > .row:first-child { border-radius: 19px 6px 0 0; }
.rowlist > .row:last-child { border-radius: 0 0 19px 6px; }
.rowlist > .row:only-child { border-radius: 19px 6px 19px 6px; }
.row:hover { background: rgba(246, 240, 223, 0.6); }
.row[aria-expanded="true"] { background: var(--ivory); }
.row__ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--ivory); border: 1.5px solid var(--hair); }
.row[aria-expanded="true"] .row__ic { background: var(--yellow); border-color: var(--ink); }
.row__ic .i { width: 19px; height: 19px; }
.row__text { display: grid; gap: 2px; min-width: 0; }
.row__label { font: 17px/1.3 var(--f-ui); }
.row__value { overflow: hidden; font-size: 14.5px; line-height: 1.45; color: var(--ink-soft); text-overflow: ellipsis; white-space: nowrap; }
.row__go { color: var(--ink-soft); transition: transform 0.18s ease; }
.row[aria-expanded="true"] .row__go { transform: rotate(-90deg); }
.row__lock { font: 12.5px/1.2 var(--f-ui); color: var(--ink-soft); white-space: nowrap; }
.row--static { cursor: default; }
.row--static:hover { background: none; }
.rowlist > .editor { margin: 0; border: 0; border-top: 1px solid var(--hair); border-radius: 0; box-shadow: none; background: var(--ivory); }
.rowlist > .editor:last-child { border-radius: 0 0 19px 6px; }

/* ── the call: the settings, spoken ── */
.call { margin-top: 22px; }
.voicebar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 16px; background: var(--ivory); border-bottom: 2px solid var(--ink); border-radius: 28px 6px 0 0; }
.voicebar__who { display: contents; color: inherit; text-align: start; }
.voicebar__avatar { display: grid; place-items: center; width: 46px; height: 46px; background: var(--sheet); border: 2px solid var(--ink); border-radius: 50%; font: 21px/1 var(--f-display); }
.voicebar__text { display: grid; gap: 1px; min-width: 0; }
.voicebar__name { font: 17px/1.25 var(--f-ui); }
.voicebar__style { overflow: hidden; font-size: 14.5px; color: var(--ink-soft); text-overflow: ellipsis; white-space: nowrap; }
.voicebar__acts { display: flex; gap: 8px; }
.voicebar__edit { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 12px; background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--leaf-xs); font: 14.5px/1 var(--f-ui); color: var(--ink); cursor: pointer; }
.voicebar__edit[aria-expanded="true"] { background: var(--yellow); }
.call__body { display: grid; gap: 10px; padding: 18px 16px 14px; }
.call__cap { justify-self: start; font: 12.5px/1.3 var(--f-ui); color: var(--ink-soft); }
.call .editor { margin: 2px -16px; padding: 18px 16px 16px; background: var(--ivory); border: 0; border-block: 1px dashed var(--line-strong); border-radius: 0; box-shadow: none; }
.call > .editor { margin: 0; }

.bubble { position: relative; max-width: 90%; padding: 11px 15px; border-radius: 16px; font-size: 16px; line-height: 1.6; text-align: start; }
.bubble--ai { justify-self: end; background: var(--band); color: var(--on-band); border-start-end-radius: 4px; }
.bubble--caller { justify-self: start; background: var(--ivory); color: var(--ink); border-start-start-radius: 4px; }
.bubble mark { padding: 0 0.18em; background: linear-gradient(var(--yellow), var(--yellow)) no-repeat right / 100% 100%; color: var(--ink); border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.bubble--ghost mark, .bubble--caller mark { background-image: linear-gradient(var(--yellow), var(--yellow)); }
/* an editable line is a button that still reads as speech */
button.bubble { display: block; border: 2px solid transparent; font: 16px/1.6 var(--f-body); cursor: pointer; }
button.bubble--ai { padding-inline-end: 44px; }
button.bubble:hover { border-color: var(--yellow); }
button.bubble[aria-expanded="true"] { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255, 232, 26, 0.45); }
.bubble__pen { position: absolute; top: 9px; inset-inline-end: 10px; display: grid; place-items: center; width: 26px; height: 26px; background: var(--yellow); color: var(--ink); border-radius: 50%; }
.bubble__pen .i { width: 15px; height: 15px; stroke-width: 2.4; }
/* what the assistant says when you wrote nothing — drawn as deliberately as your own words */
.bubble.bubble--ghost { background: transparent; color: var(--ink-2); border: 2px dashed var(--line-strong); }
button.bubble.bubble--ghost:hover, button.bubble.bubble--ghost[aria-expanded="true"] { border-color: var(--ink); border-style: solid; }
.bubble--ghost .bubble__pen { background: var(--ivory); border: 1.5px solid var(--ink); }
.bubble__tag { display: block; margin-top: 6px; font: 12.5px/1.3 var(--f-ui); color: var(--on-band-2); }
.bubble--ghost .bubble__tag, .bubble--caller .bubble__tag { color: var(--ink-soft); }
.bubble.is-fresh mark { animation: ink 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes ink { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
.bubble--note { justify-self: end; max-width: 90%; padding: 9px 14px; background: none; color: var(--ink-soft); border: 1.5px dashed var(--line-strong); border-radius: 14px; font-size: 14.5px; line-height: 1.55; }
.linkbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 2px; background: none; border: 0; color: var(--ink); font: 16px/1.3 var(--f-ui); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.25em; cursor: pointer; }
.linkbtn[aria-expanded="true"] { background: var(--yellow); text-decoration: none; padding-inline: 8px; border-radius: 6px; }

/* ── play: one control for every sample and for the real opening ── */
.hear { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 6px 12px; overflow: hidden; background: var(--sheet); border: 2px solid var(--ink); border-radius: 999px; color: var(--ink); font: 14.5px/1 var(--f-ui); cursor: pointer; }
.hear::after { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; width: calc(var(--p, 0) * 100%); height: 3px; background: var(--ink); }
.hear .i { width: 17px; height: 17px; }
.hear[aria-pressed="true"] { background: var(--yellow); }
.hear.is-busy { opacity: 0.7; cursor: progress; }

/* ── the editor: opens under the thing you touched ── */
.editor { margin: 6px 0 4px; padding: 18px 16px 16px; background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--leaf-sm); box-shadow: 3px 4px 0 rgba(27, 26, 23, 0.16); }
.editor[hidden] { display: none; }
.editor__title { font: 17px/1.35 var(--f-ui); }
.editor__lead { margin-top: 4px; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
.editor label, .editor legend { display: block; margin: 16px 0 7px; padding: 0; font: 16px/1.4 var(--f-ui); color: var(--ink); }
.editor fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.editor :is(input[type="text"], input[type="tel"], input[type="email"], input[type="url"], input[type="date"], input[type="time"], textarea, select) { width: 100%; min-width: 0; padding: 12px 14px; background: #fff; border: 2px solid var(--ink); border-radius: var(--leaf-xs); color: var(--ink); font: 17px/1.45 var(--f-body); }
.editor textarea { resize: vertical; }
.editor :is(input, textarea, select):focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--yellow); }
.editor :is(input, textarea, select)::placeholder { color: #6c675c; opacity: 1; }
.gate input::placeholder { color: #6c675c; opacity: 1; }
.help { margin-top: 7px; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
.help--warn { color: #7a4a00; }
/* 15.10.26: the openings a line says, one per call */
.openings { margin-top: 12px; }
.openings__cap { margin: 0 0 6px; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }
.openings ul { margin: 0; padding-inline-start: 18px; display: grid; gap: 4px; font-size: 14.5px; line-height: 1.55; }
.editor__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.editor__msg { min-height: 1.4em; margin-top: 10px; font: 14.5px/1.5 var(--f-ui); }
.editor__msg.is-err { color: var(--err); }
.editor__msg.is-ok { color: var(--ok); }
.editor__part + .editor__part { margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--line-strong); }
/* two fields side by side only where both fit (18.10.2026): the iPhone draws a date or a time at its full width and
   never narrower, so in the sheet two of them ran past its edge and the whole sheet dragged sideways */
.pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr)); gap: 10px; }
.pair label { margin-top: 0; }

/* chips: ready lines you add with one tap */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip { min-height: 44px; padding: 6px 14px; background: #fff; border: 1.5px solid var(--ink); border-radius: 999px; color: var(--ink); font: 14.5px/1.2 var(--f-ui); cursor: pointer; }
.chip:hover { background: var(--ivory); }
.chip::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-inline-end: 6px; vertical-align: -1px; background: linear-gradient(var(--ink), var(--ink)) center / 10px 2px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 2px 10px no-repeat; }
.chip--plain::before { content: none; }
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; }

/* choices that save on tap */
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg[hidden] { display: none; }
.seg label { position: relative; margin: 0; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg span { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 46px; padding: 9px 16px; background: #fff; border: 2px solid var(--ink); border-radius: var(--leaf-xs); font: 16px/1.2 var(--f-ui); }
.seg input:checked + span { background: var(--yellow); box-shadow: 2px 3px 0 rgba(27, 26, 23, 0.86); }
.seg input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }
.seg input:disabled + span { opacity: 0.5; }
/* four choices don't fit one phone row: two even rows, never three and an orphan */
.seg--grid2 { display: grid; grid-template-columns: 1fr 1fr; }
.seg--grid2 span { width: 100%; }
/* a clock reads left to right even in a right-to-left form: in RTL Safari drew 12:30 as
   30:12. Aligned right like the date beside it. */
.editor input[type="time"] { direction: ltr; }
.editor input[type="time"]::-webkit-date-and-time-value { text-align: right; }   /* iOS draws the value here */
/* the week in one row, Sunday on the right, even at 320px */
.seg--days { flex-wrap: nowrap; gap: 6px; }
.seg--days label { flex: 1; }
.seg--days span { width: 100%; min-width: 0; padding: 9px 0; }

/* the voice and style pickers */
.picks { display: grid; margin-top: 6px; }
.pick { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 4px; }
.pick + .pick { border-top: 1px solid var(--hair); }
.pick:has(input:checked) { background: var(--sheet); }
.pick:has(input:checked) label { font-family: var(--f-ui); }
.pick label { display: flex; align-items: center; gap: 10px; margin: 0; min-height: 44px; font: 16px/1.3 var(--f-ui); cursor: pointer; }
.pick input { width: 1.2em; height: 1.2em; margin: 0; flex: none; accent-color: var(--ink); }
.pick small { display: block; font: 14.5px/1.35 var(--f-body); color: var(--ink-soft); }

/* the voices (21.10.26): one calm list -- a small check, a voiceprint that moves only
   while its sample plays */
.vgrid { display: grid; grid-template-columns: minmax(0, 1fr); border-radius: 16px; background: var(--sheet, #fff); box-shadow: inset 0 0 0 0.5px rgba(27, 26, 23, 0.12); overflow: hidden; }
.vtile { position: relative; display: flex; align-items: center; gap: 8px; padding-inline-end: 8px; transition: background-color 0.2s ease; }
.vtile + .vtile { box-shadow: inset 0 0.5px 0 rgba(27, 26, 23, 0.1); }
#voices .vtile__pick { display: flex; flex: 1; min-width: 0; align-items: center; gap: 12px; margin: 0; padding: 9px 14px; min-height: 52px; cursor: pointer; }
.vtile__pick input { position: absolute; opacity: 0; pointer-events: none; }
.vtile__text { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.vtile__name { font: 600 16px/1.2 var(--f-ui); color: var(--ink); white-space: nowrap; }
#voices .vtile__pick small { overflow: hidden; font: 13.5px/1.2 var(--f-body); color: var(--ink-soft); white-space: nowrap; text-overflow: ellipsis; }
.vtile__check { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(27, 26, 23, 0.25); color: transparent; transition: background-color 0.2s ease, box-shadow 0.2s ease; }
.vtile__check .i { display: block; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.vtile:has(input:checked) .vtile__check { background: #ffe81a; color: #1b1a17; box-shadow: inset 0 0 0 1.5px #1b1a17; animation: vpop 0.3s cubic-bezier(0.3, 1.6, 0.5, 1); }
.vtile:has(input:checked) .vtile__name { font-weight: 700; }
.vtile:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: -2px; }
.vtile__wave { display: flex; align-items: center; gap: 2px; height: 16px; margin-inline-start: auto; }
.vtile__wave i { flex: 0 0 2px; height: var(--h); border-radius: 2px; background: var(--ink-soft); opacity: 0.3; transition: opacity 0.2s ease; }
#voices .vtile__play { flex: none; min-width: 44px; min-height: 44px; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; box-shadow: none; }
#voices .vtile__play .i { width: 14px; height: 14px; }
#voices .vtile__play[aria-pressed="true"] { background: #ffe81a; color: #1b1a17; }
/* playing: its voiceprint talks */
.vtile:has(.vtile__play[aria-pressed="true"]) .vtile__wave i { background: var(--ink); opacity: 0.85; animation: vtalk 0.6s ease-in-out var(--d) infinite alternate; }
@keyframes vtalk { from { transform: scaleY(0.35); } to { transform: scaleY(1.15); } }
@keyframes vpop { 0% { transform: scale(0.6); } 100% { transform: scale(1); } }

@media (prefers-color-scheme: dark) {
  html:not(.a11y-contrast) :is(.vgrid, .vtile + .vtile) { box-shadow: inset 0 0 0 0.5px rgba(246, 243, 236, 0.14); }
  html:not(.a11y-contrast) .vtile + .vtile { box-shadow: inset 0 0.5px 0 rgba(246, 243, 236, 0.12); }
  html:not(.a11y-contrast) .vtile__check { box-shadow: inset 0 0 0 1.5px rgba(246, 243, 236, 0.35); }
}
@media (prefers-reduced-motion: reduce) {
  .vtile__check { transition: none; animation: none !important; }
  .vtile:has(.vtile__play[aria-pressed="true"]) .vtile__wave i { animation: none; }
}

/* a switch: on is yellow, the knob travels to the left (RTL end) */
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; cursor: pointer; }
.toggle__text { display: grid; gap: 2px; font: 17px/1.35 var(--f-ui); }
.toggle__text small { font: 14.5px/1.5 var(--f-body); color: var(--ink-soft); }
.toggle input { position: relative; flex: none; width: 54px; height: 32px; margin: 0; appearance: none; -webkit-appearance: none; background: var(--ivory); border: 2px solid var(--ink); border-radius: 999px; cursor: pointer; transition: background-color 0.18s ease; }
.toggle input::after { content: ""; position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; background: var(--ink); border-radius: 50%; transition: right 0.18s cubic-bezier(0.2, 0.8, 0.2, 1); }
.toggle input:checked { background: var(--yellow); }
.toggle input:checked::after { right: calc(100% - 24px); }
.toggle input:disabled { opacity: 0.5; cursor: default; }
.rowlist .toggle { min-height: 64px; padding: 12px 16px; border-top: 1px solid var(--hair); }
.rowlist .toggle:first-child { border-top: 0; }

/* usage: calls answered this month out of the plan */
.meter { height: 12px; margin-top: 10px; overflow: hidden; background: #fff; border: 2px solid var(--ink); border-radius: 999px; }
.meter i { display: block; height: 100%; background: var(--yellow); border-inline-end: 2px solid var(--ink); }
.plancard { padding: 20px; }
.plancard__name { font: 19px/1.3 var(--f-ui); }
.plancard__state { margin-top: 4px; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.plancard__state > span { display: block; }
.plancard__state > span + span { margin-top: 6px; }
.plancard__usage { margin-top: 14px; font-size: 14.5px; color: var(--ink-2); }
.plancard__pay { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line-strong); }
.plancard__pay .btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
/* «ביטול המנוי»: quiet, at the card's foot, like «מחיקת החשבון» */
.plancard__cancel { margin-top: 12px; }
.plancard__cancel .btn { margin-top: 8px; }

/* the messages a customer can act on right away */
.msg { min-height: 1.4em; margin-top: 10px; font: 14.5px/1.5 var(--f-ui); }
.msg.ok { color: var(--ok); }
.msg.err { color: var(--err); }

/* ── calls ── */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.filters label { display: grid; gap: 4px; font: 14.5px/1.3 var(--f-ui); color: var(--ink-2); }
.filters select { min-height: 44px; padding: 8px 36px 8px 12px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b1a17' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat left 10px center / 15px; border: 2px solid var(--ink); border-radius: var(--leaf-xs); font: 16px/1.3 var(--f-ui); color: var(--ink); appearance: none; -webkit-appearance: none; padding-left: 34px; }
.reminder { margin-top: 16px; padding: 12px 14px; background: var(--yellow); border: 2px solid var(--ink); border-radius: var(--leaf-xs); font: 14.5px/1.5 var(--f-ui); }
.callday { margin-top: 22px; }
.callday__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.callday__label { font: 17px/1.3 var(--f-ui); }
.callday__count { font-size: 14.5px; color: var(--ink-soft); }
.callrow { display: grid; gap: 6px; padding: 14px 16px; border-top: 1px solid var(--hair); }
.callrow:first-child { border-top: 0; }
.callrow--overdue { background: var(--ivory); }
.callrow__top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.callrow__who { font: 17px/1.35 var(--f-ui); }
.callrow__when { font-size: 14.5px; color: var(--ink-soft); }
.callrow__what { font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.callrow__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 4px; }
.callrow__tools a, .callrow__tools button:not(.chip, .pick) { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 2px 0; background: none; border: 0; color: var(--ink); font: 14.5px/1.3 var(--f-ui); text-decoration: underline; text-underline-offset: 0.22em; cursor: pointer; }
.callrow__tools .i { width: 17px; height: 17px; }
.callrow select { min-height: 44px; padding: 6px 12px 6px 32px; border: 2px solid var(--ink); border-radius: var(--leaf-xs); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b1a17' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat left 10px center / 14px; font: 14.5px var(--f-ui); color: var(--ink); appearance: none; -webkit-appearance: none; }
.badge { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 9px; background: var(--ivory); border: 1.5px solid var(--hair); border-radius: 999px; font: 12.5px/1.2 var(--f-ui); color: var(--ink-2); }
.badge--spam { background: var(--sheet); border-color: var(--ink); color: var(--ink); }
.badge--urgent { background: var(--yellow); border-color: var(--ink); color: var(--ink); }
.verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14.5px; }
.verdict__ask { font-family: var(--f-ui); }
.empty { padding: 22px 18px; border: 2px dashed var(--line-strong); border-radius: var(--leaf-sm); font-size: 16px; line-height: 1.6; color: var(--ink-2); }

/* blocked and trusted numbers */
.numlist { display: grid; gap: 0; margin-top: 12px; }
.numrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 6px 0; border-top: 1px solid var(--hair); }
.numrow:first-child { border-top: 0; }
.numrow__who { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 16px/1.3 var(--f-ui); }
.file-pick { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font: 14.5px/1.3 var(--f-ui); cursor: pointer; text-decoration: underline; text-underline-offset: 0.22em; }
.file-pick input { font: 14.5px var(--f-body); }

/* the connection editor keeps the codes one tap away */
.codes { margin-top: 12px; padding: 12px 14px; background: #fff; border: 1.5px dashed var(--line-strong); border-radius: var(--leaf-xs); font-size: 14.5px; line-height: 1.7; color: var(--ink-2); }
.codes code { display: inline-block; padding: 0 7px; background: var(--sheet); border: 1.5px solid var(--ink); border-radius: 6px; box-shadow: 0 2px 0 var(--ink); font: 14.5px/1.5 var(--f-ui); color: var(--ink); direction: ltr; unicode-bidi: isolate; }

/* referral link field */
.copyfield { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 10px; }
.copyfield input { width: 100%; min-width: 0; padding: 10px 12px; background: #fff; border: 2px solid var(--ink); border-radius: var(--leaf-xs); font: 14.5px/1.4 var(--f-body); color: var(--ink); }

/* the footer of the account room */
.helpline { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--hair); font-size: 14.5px; line-height: 1.7; color: var(--ink-2); }
.helpline nav { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 10px; }   /* one column (28.10.26): two uneven ones read as a slab */
.helpline a { color: var(--ink); }

/* ── the toast: the only "saved" you need ── */
.toast { position: fixed; z-index: 60; inset-inline: 16px; bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 10px; width: fit-content; max-width: calc(100% - 32px); margin-inline: auto; padding: 12px 18px; background: var(--band); color: var(--on-band); border-radius: var(--leaf-xs); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22); font: 16px/1.45 var(--f-ui); opacity: 0; transform: translateY(14px); transition: opacity 0.2s ease, transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); pointer-events: none; }
.toast.is-on { opacity: 1; transform: none; }
.toast.is-err { background: #6f1711; }
.toast.is-info .i { display: none; }
.toast__undo { flex: none; margin-inline-start: 6px; padding: 4px 2px; background: none; border: 0; color: var(--yellow); font: 600 16px/1.2 var(--f-ui); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.toast.is-on:has(.toast__undo:not([hidden])) { pointer-events: auto; }
.toast .i { flex: none; width: 20px; height: 20px; color: var(--yellow); stroke-width: 2.6; }

/* ── the way in ── */
.gate { width: min(100% - 32px, 460px); margin: 0 auto; padding: 40px 0 56px; }
.gate[hidden] { display: none; }
.gate__card { padding: 30px 24px 24px; }
.gate .msg:empty { min-height: 0; margin: 0; }   /* no gap waiting for words under the key (still announced when filled) */
.gate__brand img { width: 52px; height: 52px; }
.gate__brand .brand__name { font-size: 28px; }
.gate__brand .brand__channel { font-size: 17px; }
.gate__brand .brand__by { margin-top: 6px; font-size: 12.5px; }
.gate__brand .brand__by a { font-size: 12.5px; color: var(--achiya); text-decoration: none; }
.gate h1 { margin-top: 16px; font: 28px/1.12 var(--f-display); }
.gate__lead { margin-top: 8px; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.gate form { margin-top: 6px; }
.gate label { display: block; margin: 18px 0 8px; font: 16px/1.4 var(--f-ui); }
.gate input { width: 100%; padding: 13px 14px; background: #fff; border: 2px solid var(--ink); border-radius: var(--leaf-xs); font: 17px/1.4 var(--f-body); color: var(--ink); }
.gate input:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--yellow); }
.gate .btn { width: 100%; margin-top: 14px; }
/* the quiet second way in, as the bot's sign-in draws it (wa-bot app.css .codein): a hairline, an underlined line, no marker */
.gate details { margin-top: 18px; padding-top: 6px; border-top: 1px solid var(--hair); }
.gate summary { display: inline-flex; min-height: 44px; align-items: center; list-style: none; font: 16px/1.3 var(--f-ui); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.25em; cursor: pointer; }
.gate summary::-webkit-details-marker { display: none; }
.gate__fine { margin-top: 12px; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
.gate__lead:empty { display: none; }   /* the card says its own words only when there is something to say (gate()) */
/* «או» between the keys and the email (19.10.2026): a hairline each side, the same as the bot's card (wa-bot app.css) */
.gate__or { display: flex; align-items: center; gap: 12px; margin-top: 18px; color: var(--ink-soft); font: 14.5px/1.3 var(--f-ui); }
.gate__or::before, .gate__or::after { content: ""; flex: 1; height: 1px; background: var(--line-strong); }
.gate__or[hidden], .gate .mailin[hidden] { display: none; }
.gate .mailin label { margin-top: 10px; }
/* «from the other product» (19.10.2026): its picture and a few words, instead of a sentence (the bot's .from-chip) */
.from-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 3px 12px 3px 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.62); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink-2); font: 14.5px/1.3 var(--f-ui); }
.from-chip[hidden] { display: none; }
.from-chip img { width: 28px; height: 22px; object-fit: contain; mix-blend-mode: multiply; }
/* Google with no account here (18.10.2026): a new account first, the one they have under it; another Google at the foot */
.gate__google { margin-top: 4px; }
.gate__other { display: flex; margin: 10px auto 0; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.25em; }
.gate__other[hidden] { display: none; }
/* the other ways in (22.10.2026, SPEC «הכרטיס המכווץ»): one row of equal compact keys, icon + one word, 52px tall, 10px
   apart; a hidden key leaves the row to the others. «מייל» stays lit (the chosen state) while its form is open */
.gate__keys { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; margin-top: 16px; }
.gate__keys:not(:has(> :not([hidden]))) { display: none; }
.gate .gate__keys .btn { width: auto; min-height: 52px; height: 52px; margin: 0; padding: 0 8px; gap: 8px; font-size: 16.5px; }
.gate__keys .btn .i { width: 20px; height: 20px; }
.gate__keys .btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.gate__keys .btn--apple .i { color: #fff; }
.gate__keys #mail-open[aria-expanded="true"] { --btn-bg: var(--yellow); background: var(--yellow); color: var(--ink); box-shadow: 2px 3px 0 rgba(27, 26, 23, 0.86); }
.gate__keys + .mailin { margin-top: 4px; }
/* inside the Play app the same place holds who the app is for and the sample account (15.10.2026) */
/* inside the store apps one quiet line at the foot (22.10.2026): sign-up and the sample; the iPhone app the sample alone */
.gate__app { margin-top: 18px; text-align: center; }
.gate__app a, .gate__app .linkbtn { min-height: 44px; color: var(--ink-2); font: 15px/1.3 var(--f-ui); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.25em; }
html.ios-app .gate__appnew { display: none; }
/* the sample account's strip: the dark line the preview server shows (design/settings-simple) */
.demobar { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 4px 16px; background: var(--band); color: var(--on-band); font: 14.5px/1.4 var(--f-ui); text-align: center; }
.demobar .linkbtn { min-height: 36px; color: inherit; font-size: 14.5px; }
/* the admin inside a customer's account (admin_view.py): whose it is on its own line, the two ways out under it */
#adminbar { flex-wrap: wrap; row-gap: 0; }
#adminbar > span { flex-basis: 100%; }
.nojs-note { width: min(100% - 32px, 560px); margin: 20px auto 0; padding: 14px 16px; background: var(--ivory); border: 2px solid var(--ink); border-radius: var(--leaf-xs); font-size: 16px; }

/* loading: the shape of the room before its words arrive */
.skeleton { height: 18px; margin-top: 12px; background: linear-gradient(90deg, var(--ivory) 0%, #efe7d2 50%, var(--ivory) 100%); background-size: 200% 100%; border-radius: 6px; animation: shimmer 1.4s linear infinite; }
.skeleton--tall { height: 120px; border-radius: var(--leaf-sm); }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ── settings drawn instead of explained (13.10.2026) ──
   A setting shows what it does, the way a working tool would: the days it leaves quiet as a
   calendar, the seconds your phone rings as a line, the summary as the real message and the
   real email, a filtered call as the real line it leaves in «שיחות». One line of words beside
   each at most, small marks, no enlarged icons. */

/* the assistant itself, wherever a drawing ends on it: the voice's initial, as in the call */
.av { display: grid; place-items: center; width: 30px; height: 30px; background: var(--sheet); border: 2px solid var(--ink); border-radius: 50%; font: 15px/1 var(--f-display); color: var(--ink); }

/* three weeks as a calendar: plain days are numbers, today is an ink disc; a quiet stretch
   is an ink bar named for its reason (a pause, a holiday, the fixed days), part of a day an
   outlined bar with its hours, the temporary message a yellow bar (the owner's own words) */
.cal { margin-top: 10px; }
.cal__head, .cal__week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal__head { padding-bottom: 6px; border-bottom: 1px solid var(--hair); }
.cal__head span { font: 12.5px/1.3 var(--f-ui); color: var(--ink-soft); text-align: center; }
.cal__week { grid-template-rows: 28px 22px; row-gap: 3px; padding: 6px 0 8px; border-bottom: 1px solid var(--hair); }
.cal__day { grid-row: 1; justify-self: center; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font: 15px/1 var(--f-ui); font-variant-numeric: tabular-nums lining-nums; color: var(--ink); }
.cal__day.is-past { color: var(--ink-soft); opacity: 0.5; }
.cal__day.is-today { background: var(--ink); color: var(--on-band); }
.cal__bar { grid-row: 2; min-width: 0; margin-inline: 2px; padding: 0 4px; overflow: hidden; border-radius: 7px 2px 7px 2px; font: 12.5px/22px var(--f-ui); text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.cal__bar.is-off { background: var(--band); color: var(--on-band); }
.cal__bar.is-part { margin-inline: 1px; padding: 0 1px; background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); font-size: 11.5px; font-variant-numeric: tabular-nums lining-nums; }
.cal__bar.is-note { background: var(--yellow); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }

/* the home line: the coming seven days, in the calendar's own marks */
.weekstrip { display: inline-flex; gap: 3px; margin-inline-start: 8px; vertical-align: -4px; }
.weekstrip i { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 7px 2px 7px 2px; box-shadow: inset 0 0 0 1px var(--hair); font: 11.5px/1 var(--f-ui); font-style: normal; color: var(--ink-soft); }
.weekstrip i.is-off { background: var(--band); color: var(--on-band); box-shadow: none; }
.weekstrip i.is-part { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.weekstrip i.is-note { background: var(--yellow); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.weekstrip i.is-today { border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); }
.weekstrip i.is-today.is-off { box-shadow: none; color: var(--on-band); }
@media (max-width: 360px) { .weekstrip__word { display: none; } .weekstrip { margin-inline-start: 0; } }

/* the ring time, drawn as the call: the six keys share the whole width (44px and more to
   tap); above them a thread runs from your phone at the start edge to the chosen second,
   ink while your phone rings, where the assistant picks up, a hairline after it */
.ringtrack { --c: 3; position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: center; gap: 10px 4px; max-width: 440px; margin-top: 4px; }
.ringtrack__unit { max-width: 440px; margin: 10px 0 0; text-align: center; font: 16px/1.3 var(--f-ui); color: var(--ink); }   /* the chips' unit, said aloud by the legend */
.gate__help { width: 100%; max-width: 440px; margin: 22px auto 0; text-align: center; font: 15px/1.6 var(--f-ui); color: var(--ink-2); }
.gate__help p { margin: 0; }
.gate__help a { color: inherit; }
.gate__help > p:first-child a { font-weight: 700; }
.gate__helplinks { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 18px; margin-top: 6px !important; }
.gate__helplinks a { display: inline-flex; align-items: center; min-height: 44px; }
.ringtrack:has(input[value="5"]:checked) { --c: 1; }
.ringtrack:has(input[value="10"]:checked) { --c: 2; }
.ringtrack:has(input[value="15"]:checked) { --c: 3; }
.ringtrack:has(input[value="20"]:checked) { --c: 4; }
.ringtrack:has(input[value="25"]:checked) { --c: 5; }
.ringtrack:has(input[value="30"]:checked) { --c: 6; }
.ringtrack__you { position: absolute; z-index: 1; top: 4px; inset-inline-start: 0; display: grid; place-items: center; width: 28px; height: 28px; background: var(--sheet); border: 1.5px solid var(--ink); border-radius: 50%; }
.ringtrack__you .i { width: 15px; height: 15px; }
/* five seconds: the assistant answers almost at once, standing where the phone would */
.ringtrack:has(input[value="5"]:checked) .ringtrack__you { visibility: hidden; }
/* one thread piece per second-step (children 2–7), each from its key's centre back to the
   one before it (the first, back to the phone); pieces and keys have their own columns, so
   the assistant never pushes them aside */
.ringtrack__seg { position: relative; grid-row: 1; align-self: stretch; }
.ringtrack__seg::before { content: ""; position: absolute; top: calc(50% - 1px); inset-inline-end: 50%; width: calc(100% + 4px); border-top: 2px solid var(--hair); }
.ringtrack__seg:nth-child(2)::before { width: 50%; }
.ringtrack__seg:nth-child(2), .ringtrack .seg label:nth-child(1) { grid-column: 1; }
.ringtrack__seg:nth-child(3), .ringtrack .seg label:nth-child(2) { grid-column: 2; }
.ringtrack__seg:nth-child(4), .ringtrack .seg label:nth-child(3) { grid-column: 3; }
.ringtrack__seg:nth-child(5), .ringtrack .seg label:nth-child(4) { grid-column: 4; }
.ringtrack__seg:nth-child(6), .ringtrack .seg label:nth-child(5) { grid-column: 5; }
.ringtrack__seg:nth-child(7), .ringtrack .seg label:nth-child(6) { grid-column: 6; }
.ringtrack:has(input[value="5"]:checked) .ringtrack__seg:nth-child(-n+2)::before,
.ringtrack:has(input[value="10"]:checked) .ringtrack__seg:nth-child(-n+3)::before,
.ringtrack:has(input[value="15"]:checked) .ringtrack__seg:nth-child(-n+4)::before,
.ringtrack:has(input[value="20"]:checked) .ringtrack__seg:nth-child(-n+5)::before,
.ringtrack:has(input[value="25"]:checked) .ringtrack__seg:nth-child(-n+6)::before,
.ringtrack:has(input[value="30"]:checked) .ringtrack__seg:nth-child(-n+7)::before { top: calc(50% - 1.5px); height: 3px; background: var(--ink); border-top: 0; }
.ringtrack__bot { position: relative; z-index: 1; grid-row: 1; grid-column: var(--c); justify-self: center; display: grid; place-items: center; width: 36px; height: 36px; background: var(--ivory); border-radius: 50%; }
.ringtrack__keys { display: contents; }
.ringtrack .seg label { grid-row: 2; min-width: 0; }
.ringtrack .seg span { width: 100%; min-width: 0; padding: 9px 0; font-variant-numeric: tabular-nums lining-nums; }
/* too narrow for six keys of 44px: two rows of three, and the words of the question carry it */
@media (max-width: 349px) {
  .ringtrack { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ringtrack__you, .ringtrack__seg, .ringtrack__bot { display: none; }
  .ringtrack .seg label:nth-child(n) { grid-row: auto; grid-column: auto; }
}

/* the test call in three numbered steps (the family's numbered holes), read right to left */
.tsteps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 440px; margin: 0 0 4px; padding: 0; list-style: none; counter-reset: step; }
.tsteps li { position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; font: 14px/1.35 var(--f-ui); color: var(--ink-2); text-align: center; text-wrap: balance; counter-increment: step; }
.tsteps li::before { position: relative; z-index: 1; display: grid; place-items: center; width: 26px; height: 26px; content: counter(step); background: var(--sheet); border: 2px solid var(--ink); border-radius: 50%; font: 13.5px/1 var(--f-ui); color: var(--ink); }
.tsteps li + li::after { position: absolute; top: 12px; inset-inline-end: 50%; width: calc(100% + 8px); content: ""; border-top: 1.5px solid var(--line-strong); }

/* a call's path in one line: from a phone to the assistant, cut when the number is on the
   list, or several lines meeting in one assistant */
.cpath { display: flex; align-items: center; max-width: 360px; margin: 4px 0 6px; }
.cpath__node { flex: none; display: grid; place-items: center; width: 32px; height: 32px; background: var(--sheet); border: 1.5px solid var(--ink); border-radius: 50%; }
.cpath__node .i { width: 16px; height: 16px; }
.cpath__node.av { border-width: 2px; }
.cpath__node--off { opacity: 0.4; }
.cpath__link { position: relative; flex: 1; display: grid; place-items: center; min-width: 40px; height: 32px; }
.cpath__link::before { position: absolute; inset-inline: 0; top: calc(50% - 1px); content: ""; border-top: 2px solid var(--ink); }
.cpath__link--cut::before { border-top: 2px dashed var(--line-strong); }
.cpath__link .i { position: relative; width: 24px; height: 24px; padding: 3px; background: var(--ivory); stroke-width: 2.2; }
.cpath__group { position: relative; display: grid; gap: 5px; padding-inline-end: 14px; }
.cpath__group::after { position: absolute; top: 13px; bottom: 13px; inset-inline-end: 0; content: ""; border-inline-end: 2px solid var(--ink); }
.cpath__group.is-sample span { border-style: dashed; color: var(--ink-2); }
.cpath__cap { margin: 2px 0 -2px; font: 12.5px/1.3 var(--f-ui); color: var(--ink-soft); }
.cpath__group span { position: relative; padding: 3px 11px; background: #fff; border: 1.5px solid var(--ink); border-radius: 999px; font: 12.5px/1.3 var(--f-ui); white-space: nowrap; }
.cpath__group span::after { position: absolute; top: calc(50% - 1px); inset-inline-start: 100%; width: 14px; content: ""; border-top: 2px solid var(--ink); }
/* 18.10.26 — contacts: what she says to someone the owner shared, and the file's tick list */
.cpath__say { flex: none; margin-inline-start: 10px; padding: 4px 12px; background: var(--yellow); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 14px; border-end-start-radius: 4px; font: 14px/1.3 var(--f-ui); white-space: nowrap; }
.numrow[hidden] { display: none; }
.consent { margin-top: 14px; padding: 12px 14px; background: #fff; border: 2px solid var(--ink); border-radius: var(--leaf-xs); }
.consent[hidden] { display: none; }
.consent__title { font: 16px/1.4 var(--f-ui); }
.consent__facts { margin: 6px 0 0; padding-inline-start: 18px; display: grid; gap: 4px; }
.consent a { color: var(--ink); }
/* «.editor label» would strip the button's own box: same specificity plus one */
.editor .file-pick--btn { position: relative; display: inline-flex; margin: 0; padding: 8px 18px; font: 16px/1.2 var(--f-ui); text-decoration: none; }
#contacts-file-wrap { position: relative; }
#contacts-file-wrap input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
#contacts-file-wrap:focus-within { outline: 3px solid var(--ink); outline-offset: 2px; }
.numrow__who--stack { display: grid; gap: 2px; min-width: 0; }
.numrow__num { font-size: 13.5px; color: var(--ink-soft); justify-self: start; }
.numrow__acts { display: flex; flex: none; gap: 6px; }
#contacts-list .numrow__acts { flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; }
.numfilter { width: 100%; margin-top: 14px; padding: 10px 14px; background: #fff; border: 2px solid var(--ink); border-radius: var(--leaf-xs); color: var(--ink); font: 16px/1.4 var(--f-body); }
.picklist { margin-top: 12px; background: #fff; border: 2px solid var(--ink); border-radius: var(--leaf-xs); overflow: hidden; }
.picklist[hidden] { display: none; }
.picklist__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--hair); }
.editor .picklist__head label, .editor .picklist__row { display: flex; align-items: center; gap: 10px; margin: 0; }
.picklist__rows { max-height: 46vh; overflow-y: auto; }
.editor .picklist__row { min-height: 52px; padding: 6px 12px; border-top: 1px solid var(--hair); cursor: pointer; }
.picklist__row:first-child { border-top: 0; }
.picklist input[type="checkbox"] { flex: none; width: 20px; height: 20px; accent-color: var(--ink); }
.cpath__note { margin-top: 2px; }

/* the day as a bar, midnight on the right: the open hours lit, the rest is when the
   assistant says you are closed */
.daybar { max-width: 440px; margin: 2px 0 4px; }
.daybar__track { position: relative; height: 26px; background: #fff; border: 1.5px solid var(--line-strong); border-radius: 999px; }
.daybar__open { position: absolute; top: -1.5px; bottom: -1.5px; background: var(--yellow); border: 2px solid var(--ink); border-radius: 999px; }
.daybar__ticks { position: relative; height: 18px; margin-top: 4px; }
.daybar__ticks span { position: absolute; inset-inline-start: calc(var(--at) * 100%); translate: 50% 0; font: 12px/1.4 var(--f-ui); color: var(--ink-soft); font-variant-numeric: tabular-nums lining-nums; }
.daybar__ticks span:first-child { translate: 0 0; }
.daybar__ticks span:last-child { translate: 100% 0; }

/* a sample from the product itself, on a dashed sheet with its own tab: not real yet */
.sample { position: relative; margin: 36px 0 8px; background: rgba(255, 255, 255, 0.55); border: 1.5px dashed var(--line-strong); border-radius: var(--leaf-sm); }
.sample .tab { background: var(--sheet); border: 1.5px dashed var(--line-strong); border-bottom: 0; color: var(--ink-2); }
.sample .callrow { border-top: 0; }
.sample .verdict { margin-top: 4px; }
.sample .chip { display: inline-flex; align-items: center; min-height: 36px; cursor: default; }
.sample .chip:hover { background: #fff; }

/* the summary as it lands: the real WhatsApp message and the real email, by the choice above */
/* the summary's sample (2.11.2026, the calm settings): one quiet line above the fields opens it */
.sumprev { margin: 0 0 4px; }
.sumprev > summary { display: inline-flex; min-height: 44px; align-items: center; gap: 8px; color: var(--ink-2); font: 16px/1.3 var(--f-body); text-decoration: underline dotted 1.5px; text-underline-offset: 0.3em; list-style: none; cursor: pointer; }
.sumprev > summary::-webkit-details-marker { display: none; }
.sumprev > summary .i { width: 18px; height: 18px; }
.sumprev__pics { display: flex; align-items: flex-start; gap: 12px; margin-top: 8px; }
.sumprev__pics img { display: block; width: min(100%, 250px); height: auto; background: #fff; border: 1.5px solid var(--hair); border-radius: var(--leaf-xs); }
#ed-channel:has(input[value="whatsapp"]:checked) .sumprev__mail,
#ed-channel:has(input[value="email"]:checked) .sumprev__wa { display: none; }
.sumprev__pics { flex-wrap: wrap; }
@media (min-width: 560px) { #ed-channel:has(input[value="both"]:checked) .sumprev__pics img { width: calc(50% - 6px); max-width: 250px; } }

@media (min-width: 900px) {
  :root { --tabbar-h: 0px; }
  .onapp { padding-bottom: 40px; }
  .tabbar { position: sticky; top: 72px; bottom: auto; inset-inline: auto; width: fit-content; margin: 22px auto 0; grid-template-columns: repeat(4, auto); gap: 6px; padding: 6px; border: 2px solid var(--ink); border-radius: var(--leaf-sm); box-shadow: var(--card-shadow); }
  .tabbar button { grid-auto-flow: column; align-items: center; gap: 8px; min-height: 48px; padding: 8px 20px; border-radius: var(--leaf-xs); font-size: 16px; }
  .tabbar__ic { width: auto; height: auto; border: 0; }
  .tabbar button[aria-current="page"] { background: var(--yellow); box-shadow: 2px 3px 0 rgba(27, 26, 23, 0.86); }
  .tabbar button[aria-current="page"] .tabbar__ic { background: none; border: 0; box-shadow: none; transform: none; }
  .tabbar button:hover:not([aria-current="page"]) { background: var(--ivory); }
  .room { padding-top: 34px; }
  .room__title { font-size: 42px; }
  .toast { bottom: 28px; }
}

@media (max-width: 380px) {
  .room__title { font-size: 28px; }
  .pair { grid-template-columns: 1fr; }
  .voicebar { grid-template-columns: auto minmax(0, 1fr); }
  .voicebar__acts { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .bubble.is-fresh mark, .skeleton { animation: none; }
}

/* ── תשלום: Sumit's own payment page, held in our secure window (5.10.2026) ──
   The card is typed into Sumit's page (their PCI DSS system); the window around it is ours:
   a family card whose yellow tab names who holds the card, flush to Sumit's page inside. */
.pay__back { margin: -6px 0 4px; font-size: 14.5px; }
.pay__back .i { width: 18px; height: 18px; transform: scaleX(-1); }   /* back points right in RTL */
.pay.is-paid .room__lead { display: none; }
.pay__cycle { margin: 22px 0 0; padding: 0; border: 0; min-width: 0; }
.pay__cycle legend { margin-bottom: 10px; padding: 0; font: 19px/1.3 var(--f-ui); }
.pay__cycle .help { min-height: 1.6em; }

.payframe { margin-top: 44px; background: #fff; }
.payframe__tab { display: inline-flex; align-items: center; gap: 6px; }
.payframe__tab .i { width: 15px; height: 15px; stroke-width: 2.4; }
.payframe__wait { padding: 28px 20px 18px; text-align: center; font: 16px/1.6 var(--f-ui); color: var(--ink-2); }
.payframe__who { padding: 22px 20px 0; text-align: center; font: 15px/1.6 var(--f-ui); color: var(--ink-2); }
.payframe__who strong { color: var(--ink); }
.payframe__go { display: flex; width: calc(100% - 40px); margin: 0 auto 24px; justify-content: center; }

.pay__trust { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
.pay__trust .i { flex: none; width: 18px; height: 18px; margin-top: 3px; }

.paydone { margin-top: 22px; padding: 26px 22px 22px; }
.paydone:focus { outline: none; }
.paydone__mark { width: 52px; height: 52px; }
.paydone__title { margin-top: 14px; font: 28px/1.15 var(--f-display); }
.paydone__text { margin-top: 10px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.paydone .btn { margin-top: 18px; }

/* ── «כמה שפחות טקסט וכמה שיותר ויזואלי» (15.10.2026, approved): every room and editor is a
   title, the drawing or the real value, at most one short line and the action. The assistant's
   room is the call itself on the page (no card frame), each line spoken by a face; the settings
   that were two lists of rows are one grid of tiles, an icon, one word and a mark for their
   state. Words a screen reader still needs stay in the markup, visually hidden. ── */

/* the voice: one strip, the face, the name, a round play key and a round change key */
.call.card { margin-top: 18px; background: none; border: 0; border-radius: 0; box-shadow: none; }
.call .voicebar { gap: 10px; padding: 10px 12px; background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--leaf-sm); }
.voicebar__avatar { width: 40px; height: 40px; font-size: 19px; background: var(--ivory); }
.voicebar__name { overflow: hidden; font-size: 19px; text-overflow: ellipsis; white-space: nowrap; }
.voicebar__acts { gap: 10px; }
.hear--round { width: 46px; height: 46px; min-width: 46px; padding: 0; border-radius: 50%; background: var(--yellow); box-shadow: 2px 3px 0 rgba(27, 26, 23, 0.86); }
.hear--round .i { width: 20px; height: 20px; }
.hear--round[aria-pressed="true"] { background: var(--sheet); }
.voicebar__edit { justify-content: center; width: 46px; min-width: 46px; height: 46px; min-height: 46px; padding: 0; border-radius: 50%; }
.voicebar__edit .i { width: 22px; height: 22px; }
@media (max-width: 380px) { .voicebar { grid-template-columns: auto minmax(0, 1fr) auto; } .voicebar__acts { grid-column: auto; } }

/* the call on the page: the assistant's lines carry the dial, the caller's a face */
.call .call__body { gap: 10px; padding: 16px 0 6px; }
.call .call__body > .bubble--ai, .call .call__body > .bubble--note { max-width: calc(100% - 40px); margin-inline-end: 40px; }
.call .call__body > .bubble--caller { max-width: calc(100% - 40px); margin-inline-start: 40px; }
.call .call__body > .bubble, .call .call__body > .bubble--note { position: relative; overflow: visible; }
.call .bubble--ai::after, .call .bubble--note::after { content: ""; position: absolute; bottom: 0; inset-inline-end: -40px; width: 30px; height: 30px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--yellow) url("/assets/brand/logo-mark.svg") center / 22px no-repeat; }
.call .bubble--caller::before { content: ""; position: absolute; bottom: 0; inset-inline-start: -40px; width: 30px; height: 30px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--ivory) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b1a17' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.5' r='3.8'/%3E%3Cpath d='M4.5 20a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E") center / 17px no-repeat; }
.call .bubble { font-size: 17px; }
.call button.bubble { font-size: 17px; }
/* a line not written yet is an invitation to add it: a dashed key with a yellow plus */
.bubble.bubble--add { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; background: transparent; color: var(--ink-2); border: 2px dashed var(--line-strong); font: 16px/1.3 var(--f-ui); }
.bubble.bubble--add::before { content: ""; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b1a17' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 15px no-repeat; }
button.bubble.bubble--add { padding-inline-end: 14px; }
.bubble--add .bubble__pen { display: none; }
button.bubble.bubble--add:hover, button.bubble.bubble--add[aria-expanded="true"] { border-color: var(--ink); border-style: solid; }
.bubble__tag { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bubble--note { display: inline-flex; align-items: center; gap: 8px; justify-self: end; font: 14.5px/1.35 var(--f-ui); color: var(--ink-soft); }
.bubble--note .i { width: 18px; height: 18px; flex: none; }
.call .bubble--note::after { background-color: var(--ivory); opacity: 0.5; }
.call .call__body > .editor, .call > .editor { margin: 2px 0; border: 2px solid var(--ink); border-radius: var(--leaf-sm); }
.call > .editor { margin-top: 10px; }

/* ── «הדרך» (15.10.2026, approved «מושלם»): the assistant's room is the road a call takes, one
   line down the start edge from the caller to the summary. Every stop is a paper picture on the
   line (the same cut-paper pictures the WhatsApp messages carry, so the app and the messages are
   one family), its word beside it and its real value at the far edge; a tap opens the stop's
   editor in the sheet from the bottom, as in an app. The assistant's stop is the one lit hole,
   and the call (the lines you edit in place) runs beside the line there. Home and account use
   the same picture rows without the line. The pictures are cropped with their cream lifted to
   white (design/really-visual/road-assets.sh) and laid on the page with multiply: no box. ── */
.road, .stops { --rail: 84px; --hang: calc(var(--rail) + 12px); position: relative; display: grid; grid-template-columns: minmax(0, 1fr); max-width: 540px; margin-top: 24px; }   /* the value stays near its word on a wide screen; a long line never widens the page */
.road::before { content: ""; position: absolute; inset-block: 46px; inset-inline-start: calc(var(--rail) / 2 - 1.25px); width: 2.5px; background: var(--ink); }
.stop { position: relative; display: grid; grid-template-columns: var(--rail) minmax(0, 1fr) auto; align-items: center; column-gap: 12px; width: 100%; min-height: 92px; margin: 0; padding: 0; background: none; border: 0; color: var(--ink); font: inherit; text-align: start; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.stop[hidden] { display: none; }
.stop:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: var(--leaf-xs); }
/* the picture sits on a plate of page colour, so the line stops short of it: beads on a string */
.stop__pic { position: relative; z-index: 1; display: grid; place-items: center; width: var(--rail); height: 72px; background: var(--page); }
.stop__pic img { width: 80px; height: 64px; object-fit: contain; mix-blend-mode: multiply; transition: transform 0.14s ease; }
.stop:active .stop__pic img { transform: scale(0.94); }
.stop__label { font: 17px/1.25 var(--f-ui); }
@media (hover: hover) { .stop:not(.stop--answer):hover .stop__label { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.25em; } }
.stop__val { justify-self: end; display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px; max-width: 46vw; font: 16px/1.25 var(--f-ui); color: var(--ink-2); text-align: end; }
.stop__val:empty { display: none; }
.stop__val b { font: 22px/1 var(--f-display); color: var(--ink); }
.stop__val small { font: 14.5px/1 var(--f-ui); color: var(--ink-soft); }
.stop__val:has(> b):has(> small) { align-items: baseline; }   /* «4 שירותים»: the big number and its word on one line, not centred boxes (18.10.2026) */
.stop__val.is-time b { font-size: 19px; white-space: nowrap; }
.stop__val .i { width: 15px; height: 15px; stroke-width: 2.6; }
.stop__val:is(.is-add, .is-more) { padding: 3px 12px; border: 1.5px dashed var(--ink-soft); border-radius: 999px; font-size: 14.5px; }
.stop__val.is-lock { gap: 5px; font-size: 14.5px; color: var(--ink-soft); }
.stop__val.is-warn { padding: 5px 12px; background: var(--yellow); border: 2px solid var(--ink); border-radius: 999px; color: var(--ink); box-shadow: 2px 3px 0 rgba(27, 26, 23, 0.86); }
.road .stop__dot { display: none; }   /* on the road a value is a quiet word; the lit dot stays on the home line */
.stop__dot { flex: none; width: 12px; height: 12px; margin-inline-end: 3px; background: var(--yellow); border: 2px solid var(--ink); border-radius: 50%; box-shadow: 0 0 0 3px rgba(255, 232, 26, 0.35); }
.stop.is-not .stop__pic img { opacity: 0.32; filter: grayscale(1); }
.stop.is-not .stop__label { color: var(--ink-soft); }
.stop .weekstrip { margin: 0; }
/* the stop where the assistant answers: the logo is the one lit hole on the road */
.stop--answer { min-height: 80px; cursor: default; }
.stop--answer .stop__pic img { width: 46px; height: 46px; mix-blend-mode: normal; }
.stop--answer .stop__pic::after { content: ""; position: absolute; z-index: -1; inset: 10px 17px; border-radius: 50%; box-shadow: 0 0 0 5px rgba(255, 232, 26, 0.45); }
/* the call runs beside the line; the assistant's stop above it already carries the face */
.road .call.card { margin: 0 0 18px; margin-inline-start: var(--hang); }
.road .call.card:has(#ed-voice:not([hidden])) { margin-inline-start: 0; }   /* the voices need the width: the card covers the line while they are open */
/* a narrow phone (18.10.2026): the call hangs right beside the line, and the face gives its place to the name, which
   was cut under the play key at 360px and pushed the page sideways at 320px */
@media (max-width: 400px) {
  .road { --hang: calc(var(--rail) / 2 + 12px); }
  .road .call .voicebar { grid-template-columns: minmax(0, 1fr) auto; }
  .road .call .voicebar__avatar { display: none; }
}
.road .call .call__body { padding-top: 14px; }
.road .call .call__body > .bubble--ai, .road .call .call__body > .bubble--note { max-width: 96%; margin-inline-end: 0; }
.road .call .call__body > .bubble--caller { max-width: 96%; margin-inline-start: 0; }
.road .call .bubble--ai::after, .road .call .bubble--note::after, .road .call .bubble--caller::before { display: none; }
.road .call .bubble, .road .call button.bubble { font-size: 16px; }
/* account: the recording switch as a picture row */
.stop--switch { margin: 0; cursor: pointer; }
.stop--switch .toggle__text { display: grid; gap: 3px; font: 17px/1.25 var(--f-ui); }
.stop--switch .toggle__text small { font: 14.5px/1.5 var(--f-body); color: var(--ink-soft); }
.stop--switch input { justify-self: end; }
.giftpic { display: block; width: 200px; height: auto; margin: 2px auto 10px; mix-blend-mode: multiply; }

/* the sheet: a stop's editor rises from the bottom under the stop's own picture, as in an app;
   the page behind is inert, the toast stays above it */
.sheet { position: fixed; inset: 0; z-index: 55; }
.sheet[hidden] { display: none; }
.sheet__scrim { position: absolute; inset: 0; background: rgba(27, 26, 23, 0.42); opacity: 0; transition: opacity 0.3s ease; }
.sheet__box { position: absolute; inset-inline: 0; bottom: 0; display: flex; flex-direction: column; width: min(100%, 560px); max-height: calc(100% - 40px - env(safe-area-inset-top)); margin-inline: auto; padding-top: 10px; background: var(--page); border: 2px solid var(--ink); border-bottom: 0; border-radius: 28px 28px 0 0; box-shadow: 0 -12px 40px rgba(27, 26, 23, 0.18); transform: translateY(calc(100% + 24px + env(safe-area-inset-bottom))); transition: transform 0.34s cubic-bezier(0.4, 0, 0.9, 0.6); will-change: transform; }
/* the grab and the close key stay put; the picture, the title and the editor scroll under them */
.sheet__scroll { min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 0 20px calc(26px + env(safe-area-inset-bottom)); }
.sheet.is-open .sheet__scrim { opacity: 1; transition-duration: 0.4s; }
/* rises on the curve of an app's sheet (fast out, a long soft landing), sinks quicker, accelerating (18.10.2026) */
.sheet.is-open .sheet__box { transform: none; transition: transform 0.52s cubic-bezier(0.32, 0.72, 0, 1); }
/* sinking, the sheet lets the page have the finger at once */
.sheet:not(.is-open) { pointer-events: none; }
/* under the finger: it follows with no lag; let go and it springs back or sinks */
.sheet.is-dragging .sheet__box, .sheet.is-dragging .sheet__scrim { transition: none; }
/* what is inside rises with the box as one piece (18.10.2026): a fade of its own cut the picture off the paper, and its
   multiply showed the white square behind it while it faded */
/* the top is a handle: a finger drags it down (app.js) and the page does not scroll under it */
.sheet__pic, .sheet__title { touch-action: none; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
.sheet__grab { position: relative; display: block; width: 40px; height: 5px; margin: 0 auto 4px; background: var(--line-strong); border-radius: 999px; touch-action: none; cursor: grab; }
.sheet__grab::before { content: ""; position: absolute; inset: -12px -60px; }   /* a finger's reach around the bar */
.sheet__close { position: absolute; z-index: 1; top: 12px; inset-inline-end: 14px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; background: var(--sheet); border: 2px solid var(--ink); border-radius: 50%; color: var(--ink); cursor: pointer; }
.sheet__close .i { width: 18px; height: 18px; stroke-width: 2.4; }
.sheet__pic { display: block; width: 200px; height: 150px; margin: 6px auto 2px; object-fit: contain; mix-blend-mode: multiply; }
.sheet__pic[hidden] { display: none; }
.sheet__title { margin: 0; font: 28px/1.15 var(--f-display); text-align: center; text-wrap: balance; }
.sheet__title:focus { outline: none; }
.sheet__body { margin-top: 4px; }
@media (max-height: 720px) { .sheet__pic { width: 150px; height: 112px; } }
.sheet .editor { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
/* the round key above already closes: the editor's own «ביטול»/«סגירה» would only repeat it */
.sheet .editor__acts [data-close] { display: none; }
.sheet .editor__acts:not(:has(> :not([data-close]))) { display: none; }
.sheet .daybar { margin-top: 10px; }
.sheet .daybar__track { border: 2px solid var(--ink); }
.sheet .daybar__open { top: -2px; bottom: -2px; }
.has-sheet, .has-sheet body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .sheet__scrim, .sheet__box, .sheet.is-open .sheet__box, .stop__pic img { transition: none; }
}

/* home: the state as one word on a lit dot, the month as its real number */
.state { font-size: 17px; }
/* the month before and the whole way, quiet under the month's words (P-20, 1.11.2026) */
/* who hung up this week (P-19): one card a caller, its two keys side by side */
.hangups { display: grid; gap: 12px; margin: 14px 0; padding: 0; list-style: none; }
.hangups li { padding: 14px 16px; background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--leaf); }
.hangups__who { margin: 0; font: 18px/1.3 var(--f-ui); color: var(--ink); }
.hangups__when { margin: 4px 0 0; font-size: 14.5px; color: var(--ink-soft); }
.hangups__keys { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; margin-top: 12px; }
.hangups__keys .btn { min-height: 46px; padding: 8px 12px; }
.hangups__why { margin: 4px 0 0; font-size: 16px; line-height: 1.4; color: var(--ink-2); }
/* «למי עוד לא חזרתם» (Achiya picked ב׳ «אדם אחד», 4.11.2026): one person, big */
.cb-one { margin-top: 24px; padding: 8px 0 4px; text-align: center; }
.cb-one[hidden] { display: none; }
.cb-one__pic { display: block; width: 148px; height: 118px; margin-inline: auto; object-fit: contain; mix-blend-mode: multiply; }
.cb-one__who { margin: 10px 0 0; font: 32px/1.2 var(--f-display); color: var(--ink); overflow-wrap: anywhere; }
.cb-one__who mark { padding: 0 .12em; background: var(--yellow); color: #1b1a17; border-radius: 6px; }
.cb-one__open { display: block; width: 100%; margin-top: 8px; padding: 2px 0; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
.cb-one__why { display: block; font-size: 18px; line-height: 1.5; color: var(--ink-2); }
.cb-one__why:empty { display: none; }
.cb-one__when { display: block; margin-top: 2px; font-size: 14.5px; color: var(--ink-soft); }
.cb-acts { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.cb-quiet { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; padding: 4px 10px; background: none; border: 0; color: var(--ink-2); font: 16px/1.3 var(--f-ui); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cb-quiet[hidden] { display: none; }
.next { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 14px; }
.next__ic { grid-row: 1 / span 2; display: grid; place-items: center; width: 46px; height: 46px; background: var(--yellow); border: 2px solid var(--ink); border-radius: 50%; }
.next__ic .i { width: 24px; height: 24px; }
.next__title { font-size: 17px; }
.next__text:empty { display: none; }
.next .btn { grid-column: 1 / -1; justify-self: start; }
.slip--empty p { display: flex; align-items: center; gap: 10px; font: 16px/1.4 var(--f-ui); color: var(--ink-2); }
.slip--empty .i { width: 26px; height: 26px; flex: none; }

/* small labels that the drawing makes redundant stay for screen readers */
.editor .is-quiet { position: absolute !important; width: 1px; height: 1px; margin: 0 !important; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* calls: the tools as small icon links */
.callrow__tools a, .callrow__tools button:not(.chip, .pick) { gap: 5px; }

/* account: the plan's name, its state as a chip, the month as a number on its meter */
.plancard__name { font: 22px/1.25 var(--f-ui); }
#retention-reason { min-height: 44px; padding: 8px 34px 8px 12px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b1a17' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat left 10px center / 15px; border: 2px solid var(--ink); border-radius: var(--leaf-xs); font: 16px/1.3 var(--f-ui); color: var(--ink); appearance: none; -webkit-appearance: none; }
.plancard__chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 4px 12px; background: var(--ivory); border-radius: 999px; font: 14.5px/1.4 var(--f-ui); color: var(--ink); }
.plancard__usage { display: flex; align-items: baseline; gap: 8px; margin-top: 16px; }
.plancard__usage b { font: 28px/1 var(--f-display); color: var(--ink); }
.plancard__usage span { font: 14.5px/1.3 var(--f-ui); color: var(--ink-2); }
.giftline { display: flex; align-items: center; gap: 10px; font: 17px/1.3 var(--f-ui); color: var(--ink); }
.giftline .i { width: 26px; height: 26px; flex: none; }
.helpline p { display: flex; align-items: center; gap: 8px; font-family: var(--f-ui); }
.helpline p .i { width: 20px; height: 20px; }
.seg span { gap: 6px; }
.seg span .i { width: 18px; height: 18px; }
/* a rotating line's openings (3de88a84) read as what she says: her small bubbles, not a bullet list */
.openings ul { list-style: none; padding: 0; gap: 6px; }
.openings li { justify-self: end; max-width: 92%; padding: 7px 12px; background: var(--band); color: var(--on-band); border-radius: 14px; border-start-end-radius: 4px; font-size: 14.5px; line-height: 1.45; }

/* ── the family (15.10.2026): עונים לי בשיחות and עונים לי בהודעות, one tap apart. The site's own
   product switch (family.css) sits beside the mark in the top bar; the other product's door rises
   in the sheet; and its card closes the home, dashed like everything that is not this account's
   yet. ── */
.app-top .product-switch { margin-inline: 0 auto; }
.app-top .product-switch a { min-height: 44px; padding-inline: 14px; }
@media (pointer: coarse) { .app-top .product-switch a { min-height: 48px; } }   /* a finger on Android: 48dp */
.app-top .product-switch a[aria-busy="true"] { opacity: 0.55; cursor: progress; }
@media (max-width: 599px) { .app-top__site { display: none; } }
/* a phone: the mark alone, the switch beside it already says which product this is */
@media (max-width: 429px) { .app-top .brand__txt { display: none; } }
@media (max-width: 339px) { .app-top .product-switch a { padding-inline: 10px; font-size: 14.5px; } }

.famcard { display: grid; grid-template-columns: 80px minmax(0, 1fr) 44px; align-items: center; column-gap: 12px; max-width: 540px; margin-top: 34px; padding-block: 10px; padding-inline: 8px 4px; border: 1.5px dashed var(--line-strong); border-radius: var(--leaf-sm); }
.famcard__pic { width: 80px; height: 64px; object-fit: contain; mix-blend-mode: multiply; }
.famcard__title { font: 17px/1.3 var(--f-ui); color: var(--ink); }
.famcard__line { margin-top: 3px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.famcard__go { min-height: 44px; font-size: 14.5px; }
.famcard__where { margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.famcard__x { align-self: start; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; background: none; border: 0; border-radius: 50%; color: var(--ink-soft); cursor: pointer; }
.famcard__x:hover { background: var(--ivory); color: var(--ink); }
.famcard__x .i { width: 18px; height: 18px; stroke-width: 2.4; }
/* the moment card has no picture: its words take the picture's column too (they sat in 80px, 27.10.2026) */
#momentcard { grid-template-columns: minmax(0, 1fr) 44px; padding-inline-start: 16px; }
#momentcard .famcard__go + .famcard__go { margin-inline-start: 14px; }
/* the review ask on a success moment: one yellow sticker, stuck on a little crooked (27.10.2026) */
#momentcard .sticker { display: flex; align-items: center; gap: 8px; width: fit-content; min-height: 44px; margin-top: 10px; padding: 8px 16px; background: var(--yellow); border: 2px solid var(--ink); border-radius: var(--leaf-xs); box-shadow: var(--shadow-hard); font: 15px/1.2 var(--f-ui); color: var(--ink); text-decoration: none; transform: rotate(-2deg); }
#momentcard .sticker[hidden] { display: none; }
#momentcard .sticker .i { width: 16px; height: 16px; }

.doorsheet__does { margin-top: 2px; font: 19px/1.35 var(--f-ui); color: var(--ink); text-align: center; text-wrap: balance; }
.doorsheet__rows { margin-top: 10px; }
.stop--static { grid-template-columns: minmax(0, 1fr) auto; min-height: 44px; cursor: default; }
.doorsheet__acts { display: grid; gap: 10px; margin-top: 14px; }
.doorsheet__acts .btn { width: 100%; }

/* inside the store apps the keys behave like an app's: no grey flash on a tap, no word selected by a long press */
.in-store :is(.tabbar, .product-switch, .stop, .sheet__close, .famcard__x) { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }

/* ── app notifications (16.10.2026): this phone's row in the account is a picture row that holds its
   own keys, so the row itself presses nothing; its second line (the keys while on, or where to allow
   them) runs under the word. A notification's call is marked in the log the way an open row is. ── */
.stop--push { cursor: default; }
@media (hover: hover) { .stop--push:hover .stop__label { text-decoration: none; } }
.stop--push:active .stop__pic img { transform: none; }
.stop--push > .btn { justify-self: end; }
.push__more, .push__help { grid-column: 2 / -1; margin-top: -8px; padding-bottom: 6px; }
.push__more { display: flex; flex-wrap: wrap; column-gap: 18px; }
.push__help { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; font: 14.5px/1.5 var(--f-body); color: var(--ink-soft); }
.helpline #signout-line { margin-top: 8px; }
.helpline #delete-line { margin-top: 18px; }   /* the last line, a small gap apart */
.helpline #delete-ask { font: 14.5px/1.7 var(--f-body); }   /* the links' own face: regular weight, not grey */
.helpline #delete-confirm { margin-top: 8px; }
.helpline #delete-confirm p { display: block; font-family: inherit; }
.helpline #delete-confirm .btn { margin-top: 6px; }

/* iOS zooms into a field whose text is under 16px the moment it gets focus, in Safari and in the iPhone app
   alike, and the page stays zoomed (16.10.2026: the calls filters, the referral link and the cancel reason). */
@supports (-webkit-touch-callout: none) {
  :root input:not([type="radio"]):not([type="checkbox"]):not([type="file"]), :root select, :root textarea { font-size: 16px; }
  /* the iPhone keeps a date or a time field content-box whatever the page says (its own rule wins, measured 18.10.2026 in
     the Simulator: box-sizing border-box !important stays content-box), so width: 100% plus the padding ran 28px past
     the sheet's edge and the whole sheet dragged sideways; fill-available sizes the field's outer edge instead */
  .editor :is(input[type="date"], input[type="time"]) { width: -webkit-fill-available; }
}

/* an editor closed with an unsaved draft (16.10.2026): its bubble or row is dashed until it is saved */
.has-draft { outline: 2px dashed var(--ink-soft); outline-offset: 3px; }

/* ── the iPhone app (html.ios-app, 16.10.2026, ~/maintenance/2026-10-16/onimli-ios-apple-native/CONTRACT-NATIVE.md):
   the same rooms, keys and glass as the site; only what an app needs, in the family's own shapes ── */
/* each room comes back where it was left (app.js showRoom), at once */
html.ios-app { scroll-behavior: auto; }
/* the bars keep their size, as Apple's own bars do (their words don't follow the text size; the content does) */
html.ios-app :is(.app-top, .tabbar) { -webkit-text-size-adjust: 100%; }
/* a load that failed: one red line under the room's title, its way to try again in ink (app.js loadFailed) */
html.ios-app .loadfail { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 10px; font: 15px/1.5 var(--f-ui); color: var(--err); }
html.ios-app .loadfail .linkbtn { color: var(--ink); }
/* the lock: a row like the recording's, the family's line icon where a picture stands */
html.ios-app .stop__pic--icon .i { width: 34px; height: 34px; stroke-width: 1.8; }
/* Larger Text (the app scales text up to 200%): what holds a letter or a line grows with it; the same shapes and
   sizes at the default size */
html.ios-app :is(.av, .cpath__node, .voicebar__avatar, .cal__day) { width: auto; height: auto; aspect-ratio: 1; }
html.ios-app .av { min-width: 30px; min-height: 30px; }
html.ios-app .cpath__node { min-width: 32px; min-height: 32px; }
html.ios-app .voicebar__avatar { min-width: 40px; min-height: 40px; }
html.ios-app .cal__day { min-width: 28px; min-height: 28px; }
html.ios-app .tsteps li::before { width: auto; height: auto; min-width: 26px; min-height: 26px; aspect-ratio: 1; }
html.ios-app .weekstrip i { width: auto; height: auto; min-width: 19px; min-height: 19px; }
html.ios-app .cal__week { grid-template-rows: auto auto; }
html.ios-app .cal__bar { min-height: 22px; line-height: 1.76; }
html.ios-app .daybar__ticks { height: 1.5em; font-size: 12px; }
html.ios-app .sample .tab { white-space: normal; }
/* an app's touch, not a page's (18.10.2026, Achiya on the iPhone: «כשלוחצים פעמיים על המסך זה מגדיל כאילו זה דפדפן»,
   «המסך גם יכול לזוז הצידה»): no double-tap zoom (app.js also locks the scale), nothing drifts sideways, no grey
   flash on a tap, and a long press on a key or a picture opens no link menu (a phone number keeps its own). Never
   user-select on what holds a field: on the iPhone a field inside it can no longer be typed in. */
html.ios-app { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
html.ios-app, html.ios-app body { overflow-x: clip; }
html.ios-app :is(a:not([href^="tel:"]), img, button) { -webkit-touch-callout: none; }
html.ios-app :is(button, .btn, .chip, summary) { -webkit-user-select: none; user-select: none; }
/* the keyboard covers the bottom of the screen and leaves the page as it is: the open sheet keeps to the part above it
   (app.js sets --vv-top and --vv-h from the visual viewport), so a field's keyboard no longer pushes the sheet's top
   with its close key past the top of the screen */
html.ios-app .sheet { top: var(--vv-top, 0px); bottom: auto; height: var(--vv-h, 100%); }

/* ── proportion on a small phone (18.10.2026, Achiya on his F22: «עיצוב עם פרופורציה, תשווה לאפליקציות אחרות») ──
   Large system text on Android (html.text-lg, app.js): the WebView multiplies every font size by the phone's own
   factor (150% on the F22) while the boxes stay, so a 34px title came out at 51px and a call's opening ran six
   lines. Android itself scales big type less than small (its nonlinear curve), so here the display sizes come
   down to where that curve puts them, the road takes its narrow layout, and the body text keeps the phone's size,
   which is what the owner asked his phone for. */
html.text-lg .room { padding-top: 16px; }
html.text-lg .room__title { font-size: 26px; }
html.text-lg .room__title + :is(.card, .road) { margin-top: 22px; }
html.text-lg .gate h1 { font-size: 24px; }
html.text-lg .plancard__usage b { font-size: 24px; }
html.text-lg .stop__val b { font-size: 17px; }
html.text-lg .stop__val.is-time b { font-size: 15px; }
html.text-lg .sheet__title { font-size: 21px; }
html.text-lg .road { --hang: calc(var(--rail) / 2 + 12px); }
html.text-lg .road .call .voicebar { grid-template-columns: minmax(0, 1fr) auto; }
html.text-lg .road .call .voicebar__avatar { display: none; }
html.text-lg .demobar { font-size: 11.5px; }
/* what holds a letter or a line grows with it, as the iPhone's Larger Text fixes above do */
html.text-lg :is(.av, .cpath__node, .voicebar__avatar, .cal__day) { width: auto; height: auto; aspect-ratio: 1; }
html.text-lg .av { min-width: 30px; min-height: 30px; }
html.text-lg .cpath__node { min-width: 32px; min-height: 32px; }
html.text-lg .voicebar__avatar { min-width: 40px; min-height: 40px; }
html.text-lg .cal__day { min-width: 28px; min-height: 28px; }
html.text-lg .tsteps li::before { width: auto; height: auto; min-width: 26px; min-height: 26px; aspect-ratio: 1; }
html.text-lg .weekstrip i { width: auto; height: auto; min-width: 19px; min-height: 19px; }
html.text-lg .cal__week { grid-template-rows: auto auto; }
html.text-lg .cal__bar { min-height: 22px; line-height: 1.76; }
html.text-lg .daybar__ticks { height: 1.5em; font-size: 12px; }
html.text-lg .sample .tab { white-space: normal; }
/* A short screen (the F22: 600px between its bars, 677 with them, as the app draws under both; an iPhone SE; a phone
   held sideways): the top bar slides away while the page scrolls down and comes back the moment it scrolls up, as
   Chrome and Gmail do (app.js, tuckTop); the strip under the status bar stays. A sheet's picture and title give
   their room to its fields. A phone only: from 900px the room keys stick right under the bar (glass.css), and a
   short desk window would leave them hanging under its gap. */
@media (max-height: 700px) and (max-width: 899.98px) {
  html.lg .app-top { transition: transform .22s ease; }
  html.lg .app-top.is-tucked { transform: translateY(calc(-100% + env(safe-area-inset-top))); }
}
@media (max-height: 700px) {
  .sheet__pic { width: 120px; height: 90px; }
  .sheet__title { font-size: 22px; }
}
@media (max-height: 480px) { .sheet__pic { display: none; } }   /* the keyboard is up */
/* the call on the road stands free beside the line (.road .call.card); the glass layer's card frame drew a
   square hairline around it */
html.lg .call.card { border: 0; box-shadow: none; }
/* «חסימה» at the far end of a call's keys, away from «חזרה בלחיצה»; a second tap asks it (app.js blockFromLog) */
.callrow__tools .callrow__block { margin-inline-start: auto; }
.callrow__tools .callrow__block[data-armed="1"] { text-decoration-thickness: 2px; }
/* the sample's way out, a finger's size */
.demobar .linkbtn { min-height: 44px; }

/* ── opening «החוגה עונה» (22.10.2026, ~/maintenance/2026-10-22/onimli-intro-signin/SPEC.md) ──
   splash.js sets html.splash-on before the first paint (site: once a day per device, WP-05; apps: once per launch). ~1.2s
   build: the outline draws (0–500ms), the nine holes pop clockwise from the top (200–650), the ring dials to −30° and
   springs back (600–950), the yellow hole drops in with one ripple (900–1200). Then app.js (splashFly) measures where
   the mark lives on the next screen (the card's lockup, or the top bar's brand) and the mark glides there while the
   paper fades (1150–1550). A load slower than the build: the finished mark waits, its yellow hole breathing
   (.splash-hold), until app.js lifts it. A tap skips. The bail at 10s keeps a page whose app.js never ran from hiding. */
.splash { display: none; }
html.splash-on .splash { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; padding-bottom: 8vh;
  background: var(--page); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .4s cubic-bezier(.32,.72,0,1); animation: splash-bail 0s 10s forwards; }
html.splash-on .splash.splash-out { background-color: transparent; pointer-events: none; }
html.splash-on .splash.splash-gone { visibility: hidden; }
.splash__mark { width: 112px; height: 112px; overflow: visible; }
.splash__mark * { transform-box: view-box; }
.splash__line { stroke-dasharray: 1; animation: splash-draw .5s cubic-bezier(.65,0,.35,1) both; }
.splash__holes { transform-origin: 128px 128px; animation: splash-dial .35s .6s both; }
.splash__holes circle { animation: splash-pop .3s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(.2s + var(--i) * 40ms); }
.splash__gold { transform-origin: 85.1px 68.9px; animation: splash-drop .3s .9s cubic-bezier(.34,1.56,.64,1) both; }
.splash__ripple { transform-origin: 85.1px 68.9px; opacity: 0; animation: splash-ripple .45s 1.12s cubic-bezier(.22,1,.36,1) forwards; }
.splash-hold .splash__gold { animation: splash-breathe 1.6s ease-in-out infinite; }
/* the glide (splashFly sets --fx, --fy, --fs from the two rects) */
.splash-out .splash__mark { translate: var(--fx, 0) var(--fy, 0); scale: var(--fs, 1);
  transition: translate .4s cubic-bezier(.32,.72,0,1), scale .4s cubic-bezier(.32,.72,0,1); }
.splash-out .splash__gold { animation: none; }
.splash-target { visibility: hidden; }   /* the lockup's own mark, until the travelling one lands on it */
/* the next screen comes in under it: the card rises 12px and fades in, its parts 40ms apart (--n from splashFly) */
html.gate-in .gate__card { animation: gate-rise .4s cubic-bezier(.32,.72,0,1) both; }
html.gate-in .gate__card > :not(.gate__brand) { animation: gate-rise .4s cubic-bezier(.32,.72,0,1) both; animation-delay: calc(var(--n, 0) * 40ms); }
html.panel-in #panel { animation: panel-in .3s ease both; }
/* on to the bot's dashboard (app.js): the mark leaves and the cream stays, so its page comes up on the same paper */
.splash-leave .splash__mark { filter: opacity(0); transition: filter .4s ease; }
@keyframes splash-draw { from { stroke-dashoffset: 1; opacity: 0; } 8% { opacity: 1; } to { stroke-dashoffset: 0; } }   /* the fade hides the round caps of the empty dash */
@keyframes splash-pop { from { scale: .3; opacity: 0; } to { scale: 1; opacity: 1; } }
@keyframes splash-dial { from { rotate: 0deg; animation-timing-function: cubic-bezier(.45,0,.55,1); }
  63% { rotate: -30deg; animation-timing-function: cubic-bezier(.3,0,.3,1); } 85% { rotate: 3deg; } to { rotate: 0deg; } }
@keyframes splash-drop { from { scale: .4; translate: 0 -24px; opacity: 0; } 50% { opacity: 1; } to { scale: 1; translate: 0 0; opacity: 1; } }
@keyframes splash-ripple { from { scale: 1; opacity: .55; } to { scale: 3; opacity: 0; } }
@keyframes splash-breathe { 50% { scale: 1.12; } }
@keyframes gate-rise { from { opacity: 0; translate: 0 12px; } }
@keyframes panel-in { from { opacity: 0; } }
@keyframes splash-bail { to { opacity: 0; visibility: hidden; pointer-events: none; } }
/* signing in (SPEC «כשמתחברים», app.js signInMoment): the lockup's yellow hole pulses with one ripple, the card lifts away */
.gate__mk { position: relative; display: inline-block; flex: none; line-height: 0; }
.gate__hole { position: absolute; left: 25.8%; top: 19.5%; width: 14.85%; height: 14.85%; border-radius: 50%; background: #ffe81a; opacity: 0; pointer-events: none; }
.gate__hole::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 1.5px #ffe81a; opacity: 0; }
.gate--signing .gate__hole { opacity: 1; animation: hole-pulse .35s ease-in-out; }
.gate--signing .gate__hole::after { animation: splash-ripple .45s cubic-bezier(.22,1,.36,1); }
.gate--signing .gate__card { animation: card-away .25s .3s cubic-bezier(.4,0,1,1) forwards; }
@keyframes hole-pulse { 50% { scale: 1.25; } }
@keyframes card-away { to { opacity: 0; scale: .98; translate: 0 -8px; } }
@media (prefers-reduced-motion: reduce) { .splash *, html.gate-in .gate__card, html.gate-in .gate__card > *, html.panel-in #panel, .gate--signing * { animation: none !important; } }

/* ── the store apps feel like an app, not a page (18.10.2026, Achiya «שירגיש ביד אפליקציה… חוויה של עומק»).
   Depth by Apple's and Google's own patterns, in the family's look: a call opens a screen of its own, pushed over the
   list (it comes in from the left, as a screen does in a right-to-left iPhone, and the list draws back under it);
   a sheet sets the room behind it back; a row gives under the finger. Only in the apps (.in-store); the web as before. */
.pushdim { position: fixed; inset: 0; z-index: 59; background: rgba(27, 26, 23, 0.16); opacity: 0; transition: opacity 0.42s cubic-bezier(0.2, 0.85, 0.25, 1); pointer-events: none; }
.pushdim.is-in { opacity: 1; }
.callscreen { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: var(--page); box-shadow: 18px 0 40px rgba(27, 26, 23, 0.18); transform: translateX(-100%); transition: transform 0.42s cubic-bezier(0.2, 0.85, 0.25, 1); will-change: transform; touch-action: pan-y; }   /* across: the way back (app.js) */
.callscreen.is-in { transform: none; }
.callscreen.is-still, .pushdim.is-still, html.in-store .is-still { transition: none !important; }
.callscreen__top { touch-action: pan-y; display: flex; align-items: center; min-height: 60px; padding: calc(env(safe-area-inset-top) + 6px) 12px 6px; }
.callscreen__back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 6px 12px 6px 16px; background: var(--sheet); border: 1.5px solid var(--hair); border-radius: 999px; color: var(--ink); font: 16.5px/1 var(--f-ui); cursor: pointer; -webkit-tap-highlight-color: transparent; box-shadow: 0 6px 18px rgba(27, 26, 23, 0.08); }
.callscreen__back .i { width: 20px; height: 20px; transform: scaleX(-1); stroke-width: 2.4; }   /* back points to where the list is: right */
.callscreen__back:active { transform: scale(0.96); }
.callscreen__scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding: 8px 20px calc(env(safe-area-inset-bottom) + 120px); -webkit-overflow-scrolling: touch; }
.callscreen__title { margin: 6px 0 4px; font: 30px/1.15 var(--f-display); }
:is(.callscreen, .callpane) .callrow { gap: 14px; padding: 0; border: 0; background: none; }
:is(.callscreen, .callpane) .callrow__top { gap: 8px; }
:is(.callscreen, .callpane) .callrow__who { display: none; }   /* it is the screen's title */
:is(.callscreen, .callpane) .callrow__when { font-size: 16px; }
:is(.callscreen, .callpane) .callrow__what { padding: 18px 20px; background: var(--sheet); border: 1.5px solid var(--hair); border-radius: var(--leaf-sm, 20px); font: 18px/1.6 var(--f-ui); color: var(--ink); }
:is(.callscreen, .callpane) .callrow__tools { display: grid; gap: 10px; margin-top: 4px; }
:is(.callscreen, .callpane) .callrow__tools a, :is(.callscreen, .callpane) .callrow__tools button:not(.chip) { justify-content: center; min-height: 56px; padding: 12px 20px; border: 2px solid var(--ink); border-radius: var(--leaf-sm, 20px); background: var(--sheet); font: 17.5px/1.2 var(--f-ui); text-decoration: none; }
:is(.callscreen, .callpane) .callrow__tools a[href^="tel:"] { order: -1; background: var(--yellow); box-shadow: var(--shadow-hard, 2px 3px 0 rgba(27, 26, 23, 0.86)); }
:is(.callscreen, .callpane) .callrow__tools .callrow__block { border-color: var(--hair); color: var(--err); }
/* the call's next steps (P-09, 1.11.2026): the calendar and Waze, side by side under the call-back key */
.callnext { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; margin-top: 10px; }
.callnext a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 64px; padding: 10px 12px; border: 2px solid var(--ink); border-radius: var(--leaf-sm, 20px); background: var(--sheet); color: var(--ink); font: 16px/1.15 var(--f-ui); text-align: center; text-decoration: none; }
.callnext small { font: 14.5px/1.2 var(--f-body); color: var(--ink-soft); }
:is(.callscreen, .callpane) .callrow__tools :is(a, button):active { transform: translate(1px, 2px); box-shadow: none; }
:is(.callscreen, .callpane) .callrow select { width: 100%; min-height: 52px; font-size: 16.5px; }
html.in-store #calls-list .callrow { position: relative; padding-inline-end: 40px; cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; transition: transform 0.22s cubic-bezier(0.2, 0.85, 0.25, 1), background-color 0.22s; }
html.in-store #calls-list .callrow::after { content: ""; position: absolute; inset-inline-end: 14px; top: 50%; width: 9px; height: 9px; border-block-start: 2.2px solid var(--ink-soft); border-inline-start: 2.2px solid var(--ink-soft); transform: translateY(-50%) rotate(-135deg); }   /* the iPhone's disclosure chevron, pointing to where the screen comes from (left) */
html.in-store #calls-list .callrow:active { transform: scale(0.985); background-color: var(--ivory); transition-duration: 0.06s; }
html.in-store #calls-list :is(.callrow__tools, .verdict, .sumcheck) { display: none; }   /* on the call's own screen */
html.in-store :is(.room, .app-top, .tabbar) { transition: transform 0.42s cubic-bezier(0.2, 0.85, 0.25, 1), filter 0.42s, border-radius 0.42s; }
html.in-store.has-push :is(.room:not([hidden]), .app-top) { transform: translateX(28%); filter: brightness(0.94); }
html.in-store.has-push .tabbar { z-index: 61; }   /* Apple: the tab bar stays, over the pushed screen too */
/* a sheet sets the room back, the depth of an app's sheet (18.10.2026) */
html.in-store.has-sheet .room:not([hidden]) { transform: scale(0.94); transform-origin: 50% var(--sheet-origin, 30vh); border-radius: 28px; background: var(--page); filter: brightness(0.9); }
html.in-store.has-sheet :is(.app-top, .tabbar) { filter: brightness(0.9); }
html.in-store .stop { transition: transform 0.22s cubic-bezier(0.2, 0.85, 0.25, 1); }
html.in-store .stop:active { transform: scale(0.985); transition-duration: 0.06s; }
/* the call's screen in «שקט» (18.10.2026): one yellow key — call back — and the rest as quiet rows, an app's list */
:is(.callscreen, .callpane) .callrow__tools :is(a:not([href^="tel:"]), button:not(.chip)) { justify-content: flex-start; gap: 12px; min-height: 52px; padding: 12px 4px; background: none; border: 0; border-top: 1px solid var(--hair); border-radius: 0; box-shadow: none; font: 17px/1.25 var(--f-ui); }
:is(.callscreen, .callpane) .callrow__tools :is(a:not([href^="tel:"]), button:not(.chip)) .i { width: 20px; height: 20px; color: var(--ink-soft); }
:is(.callscreen, .callpane) .callrow__tools a[href^="tel:"] { margin-bottom: 8px; }
:is(.callscreen, .callpane) .callrow__tools .callrow__block { color: var(--err); }
:is(.callscreen, .callpane) .callrow__tools :is(a:not([href^="tel:"]), button:not(.chip)):active { transform: none; background: var(--ivory); }
/* ── the calls room, tidied (18.10.2026, the owner: «לסנן לפי פניות שלא נענו … ולסמן הכל כנקרא / נוחה יותר להכנס לכל
   שיחה / יותר מסודר / ההקלטה והתמלול משם»): chips over the log in place of the status select, the new-dot, and the call
   itself on its screen. The page's own parts only: chips, the link key, badges, the call's bubbles ── */
.callchips { margin-top: 18px; }
.callchips .chip[aria-pressed="true"] { background: var(--yellow); color: var(--ink); }   /* chosen, as a chosen choice key */
.callchips__n:not(:empty) { margin-inline-start: 6px; font-variant-numeric: tabular-nums lining-nums; }
#calls-toolbar .filters { align-items: center; margin-top: 12px; }
.callchips__seen { margin-inline-start: auto; color: var(--ink-soft); font-size: 14.5px; }
.callrow__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 1.5px var(--ink); }
/* Secular One has one weight and the family synthesises none (family.css), so a new call's name takes a touch more ink */
.callrow--new .callrow__who { -webkit-text-stroke: 0.45px currentColor; }
html.in-store #calls-list .callrow { grid-template-columns: minmax(0, 1fr); }
html.in-store #calls-list .callrow__what { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }   /* one line of what */
.calltalk { display: grid; gap: 10px; margin-top: 6px; }
.calltalk__label { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font: 16.5px/1.3 var(--f-ui); }
.calltalk__label .i { width: 20px; height: 20px; color: var(--ink-soft); }
/* the recording's player: the yellow key of the page, a line in ink that fills as it plays, the time in the UI face */
.player { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 16px; background: var(--sheet); border: 1.5px solid var(--hair); border-radius: 999px; }
.player__key { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 2px solid var(--ink); border-radius: 50%; background: var(--yellow); color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.player__key .i { width: 20px; height: 20px; }
.player__key:active { transform: scale(0.94); }
.player__line { flex: 1; min-width: 0; height: 28px; margin: 0; background: none; -webkit-appearance: none; appearance: none; direction: ltr; cursor: pointer; }
.player__line::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--ink) var(--p, 0%), var(--hair) var(--p, 0%)); }
.player__line::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: var(--ink); border: 0; }
.player__line::-moz-range-track { height: 4px; border-radius: 2px; background: var(--hair); }
.player__line::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--ink); }
.player__time { flex: none; min-width: 3.2em; font: 14px/1 var(--f-ui); color: var(--ink-soft); font-variant-numeric: tabular-nums lining-nums; direction: ltr; text-align: end; }
.calltalk__chat { display: grid; gap: 6px; }
.calltalk__who { margin: 8px 0 0; font: 13px/1.3 var(--f-ui); color: var(--ink-soft); }
.calltalk__who--caller { justify-self: start; }
.calltalk__who--ai { justify-self: end; }
.calltalk__chat .bubble { max-width: 88%; overflow-wrap: anywhere; }
.calltalk__note { justify-self: center; text-align: center; }
.calltalk__say { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.6; }
/* Android's app: Chrome's pull-to-refresh is off (a website's reload); the page's own pull refreshes the data (app.js) */
html.in-twa, html.in-twa body { overscroll-behavior-y: contain; }   /* html.in-twa: app.js, the store app without the iPhone's shell */
.ptr { position: fixed; z-index: 70; top: calc(env(safe-area-inset-top) + 10px); left: 50%; width: 30px; height: 30px; margin-left: -15px; border: 3px solid var(--hair); border-top-color: var(--ink); border-radius: 50%; opacity: 0; transform: translateY(calc(var(--pull, 0px) - 46px)) rotate(calc(var(--pull, 0px) * 3)); pointer-events: none; }
.ptr[style*="--pull"], .ptr.is-busy { opacity: 1; }
.ptr.is-ready { border-top-color: var(--ink); border-inline-end-color: var(--ink); }
.ptr.is-busy { transform: translateY(40px); animation: ptr-spin 0.8s linear infinite; }
@keyframes ptr-spin { to { transform: translateY(40px) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ptr.is-busy { animation: none; }
  .callscreen, .pushdim, html.in-store :is(.room, .app-top, .tabbar, .stop, #calls-list .callrow) { transition: none; }
}
/* ── «שקט» (18.10.2026, Achiya chose it for every screen: one line per item, details behind a link, one yellow key,
   at most three small lines in a part) ── */
/* the connection: its state in one line with a dot (lit when it answers, red when it does not, a ring while it
   waits), the carrier's paragraph in two quiet lines with «עוד», the codes behind one quiet link */
#ed-conn #conn { display: flex; align-items: baseline; gap: 9px; font: 17px/1.45 var(--f-ui); }
#ed-conn #conn::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: none; box-shadow: inset 0 0 0 2px var(--ink-soft); }
#ed-conn #conn[data-tone="on"]::before { background: var(--yellow); box-shadow: 0 0 0 1.5px var(--ink); }
#ed-conn #conn[data-tone="off"]::before { background: var(--err); box-shadow: none; }
#act-carrier { margin-top: 14px; color: var(--ink-soft); }
#act-carrier.is-folded:not([hidden]) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.carrier-more { min-height: 44px; color: var(--ink-soft); font: 14.5px/1.3 var(--f-ui); text-decoration: underline; text-underline-offset: 0.22em; }
#ed-conn .codes:not([open]) { margin-top: 4px; padding: 0; background: none; border: 0; }
#ed-conn .codes summary { display: flex; align-items: center; min-height: 44px; color: var(--ink-soft); font: 14.5px/1.3 var(--f-ui); text-decoration: underline; text-underline-offset: 0.22em; list-style: none; cursor: pointer; }
#ed-conn .codes summary::-webkit-details-marker { display: none; }
/* «ימים בלי מענה»: four keys under the calendar, one part at a time (app.js showAwayPart) */
.awayparts { display: flex; gap: 6px; margin: 4px 0 2px; }
.awayparts button { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 8px 6px; background: #fff; border: 2px solid var(--ink); border-radius: var(--leaf-xs); color: var(--ink); font: 14.5px/1.2 var(--f-ui); cursor: pointer; }
.awayparts button[aria-pressed="true"] { background: var(--yellow); }
html.lg .awayparts button { border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.78); box-shadow: inset 0 0 0 0.5px rgba(27, 26, 23, 0.14); }
html.lg .awayparts button[aria-pressed="true"] { background: var(--lg-lens); box-shadow: var(--lg-lens-shine); }
[data-away-part].is-away-off { display: none; }
/* the voice key says what it changes (a customer could not find the voice, PRODUCT.md): the swap and the word */
.voicebar__edit { width: auto; padding-inline: 12px 14px; border-radius: 999px; }
.voicebar__word { font: 14.5px/1 var(--f-ui); }
/* the iPhone app's own tab bar (Apple's glass, the shell marks html.ios-native-tabs before the first paint): the
   page's bar and its fade step aside, and the bottom keeps no room for them, as env(safe-area-inset-bottom) there
   already holds Apple's bar. The shell taps the hidden #tabbar's keys, so they stay in the page. */
html.ios-native-tabs, html.lg.ios-native-tabs { --tabbar-h: 0px; }
html.ios-native-tabs #tabbar, html.lg.ios-native-tabs .onapp::after { display: none; }

/* ── setting up, step by step (21.10.2026, polished the same day: «שיראה יותר יפה ומגניב») ── */
#home-next { position: relative; overflow: hidden; }
#home-next::after { content: ""; position: absolute; top: -90px; inset-inline-start: -90px; width: 260px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 232, 26, 0.3), transparent 62%); pointer-events: none; }
#home-next > * { position: relative; z-index: 1; }
#home-next .next__ic { grid-row: 1 / span 3; }
#home-next :is(.next__title, .next__text) { grid-column: 2; }
#home-next .next__ic { animation: nudge 2.8s ease-in-out 0.6s 2; }
@keyframes nudge { 0%, 100% { transform: none; } 8% { transform: rotate(-12deg) scale(1.06); } 16% { transform: rotate(10deg) scale(1.06); } 24% { transform: none; } }
.nsteps { grid-column: 1 / -1; position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin-top: 18px; padding: 0; list-style: none; }
.nsteps li { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; font-size: 13.5px; line-height: 1.3; color: var(--ink-2); }
/* the road between the dots: inked where it was walked */
.nsteps li:not(:last-child)::after { content: ""; position: absolute; z-index: 0; top: 15px; inset-inline-start: calc(50% + 18px); width: calc(100% - 36px); height: 3px; background: repeating-linear-gradient(to left, var(--line-strong) 0 6px, transparent 6px 11px); border-radius: 3px; }
.nsteps li.is-done:not(:last-child)::after { background: var(--ink); }
.nsteps__dot { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; font: 14px/1 var(--f-ui); background: var(--sheet); border: 2px solid var(--line-strong); border-radius: 50%; }
.nsteps__dot .i { width: 18px; height: 18px; stroke-width: 3; }
.nsteps li.is-now { color: var(--ink); font-weight: 600; }
.nsteps li.is-now .nsteps__dot { background: var(--yellow); border-color: var(--ink); color: #1b1a17; box-shadow: 2px 2px 0 var(--ink); animation: beacon 2.2s ease-out infinite; }
@keyframes beacon { 0% { box-shadow: 2px 2px 0 var(--ink), 0 0 0 0 rgba(255, 232, 26, 0.7); } 70%, 100% { box-shadow: 2px 2px 0 var(--ink), 0 0 0 12px rgba(255, 232, 26, 0); } }
.nsteps li.is-done { color: var(--ink); }
.nsteps li.is-done .nsteps__dot { background: var(--ink); border-color: var(--ink); color: var(--sheet); }
.nsteps li.just-done .nsteps__dot { animation: pop 0.55s cubic-bezier(0.3, 1.6, 0.5, 1); }
.nsteps li.just-done .nsteps__dot .i path { stroke-dasharray: 22; stroke-dashoffset: 22; animation: draw 0.45s 0.15s ease-out forwards; }
@keyframes pop { 0% { transform: scale(0.4); } 100% { transform: none; } }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ── the first-visit tour (21.10.2026) ── */
.tour { position: fixed; inset: 0; z-index: 95; pointer-events: none; }
.tour__bubble { pointer-events: auto; }
.tour__ring { position: fixed; border: 3px solid var(--yellow); border-radius: 16px; box-shadow: 0 0 0 9999px rgba(20, 19, 16, 0.62); pointer-events: none; transition: top 0.4s cubic-bezier(0.2, 0.85, 0.25, 1), left 0.4s cubic-bezier(0.2, 0.85, 0.25, 1), width 0.4s cubic-bezier(0.2, 0.85, 0.25, 1), height 0.4s cubic-bezier(0.2, 0.85, 0.25, 1); }
.tour__ring::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; border: 3px solid var(--yellow); animation: halo 1.8s ease-out infinite; }
@keyframes halo { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.12); } }
.tour__bubble { position: fixed; inset-inline: 16px; max-width: 380px; margin-inline: auto; padding: 16px 18px 12px; background: var(--sheet); color: var(--ink); border: 2px solid var(--ink); border-radius: 22px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25); transition: top 0.4s cubic-bezier(0.2, 0.85, 0.25, 1); }
.tour__bubble.is-nudge { animation: tour-shake 0.4s ease; }
@keyframes tour-shake { 25% { transform: translateX(-7px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }
.tour__bubble.is-in { animation: rise 0.45s cubic-bezier(0.2, 1.3, 0.4, 1); }
@keyframes rise { 0% { opacity: 0; transform: translateY(10px) scale(0.94); } 100% { opacity: 1; transform: none; } }
.tour__bubble.is-above.is-in { animation-name: drop; }
@keyframes drop { 0% { opacity: 0; transform: translateY(-10px) scale(0.94); } 100% { opacity: 1; transform: none; } }
.tour__arrow { position: absolute; top: -11px; width: 18px; height: 18px; margin-left: -9px; background: var(--sheet); border-top: 2px solid var(--ink); border-left: 2px solid var(--ink); border-radius: 4px 0 0 0; transform: rotate(45deg); }
.tour__bubble.is-above .tour__arrow { top: auto; bottom: -11px; transform: rotate(225deg); }
.tour__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.tour__ic { display: grid; place-items: center; width: 42px; height: 42px; background: var(--yellow); color: #1b1a17; border: 2px solid var(--ink); border-radius: 50%; box-shadow: 2px 3px 0 var(--ink); }
.tour__ic .i { width: 22px; height: 22px; }
.tour__title { font: 19px/1.25 var(--f-ui); }
.tour__dots { display: flex; gap: 5px; }
.tour__dots i { width: 7px; height: 7px; background: var(--line-strong); border-radius: 99px; transition: width 0.3s ease, background 0.3s ease; }
.tour__dots i.is-done { background: var(--ink); }
.tour__dots i.is-now { width: 20px; background: var(--ink); }
.tour__text { margin-top: 10px; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.tour__acts { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.tour__acts .linkbtn { min-height: 44px; color: var(--ink-2); }
.burst { position: fixed; z-index: 96; width: 0; height: 0; pointer-events: none; }
.burst i { position: absolute; width: 9px; height: 14px; margin: -7px 0 0 -4px; background: var(--yellow); border: 1.5px solid var(--ink); border-radius: 3px; animation: fly 1s cubic-bezier(0.15, 0.8, 0.3, 1) forwards; }
.burst i:nth-child(3n) { background: var(--sheet); }
.burst i:nth-child(4n) { border-radius: 50%; width: 10px; height: 10px; }
@keyframes fly { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--x), calc(var(--y) + 40px)) rotate(var(--r)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  #home-next .next__ic, .nsteps li.is-now .nsteps__dot, .nsteps li.just-done .nsteps__dot, .tour__ring::after, .tour__bubble.is-in, .tour__bubble.is-nudge { animation: none; }
  .nsteps li.just-done .nsteps__dot .i path { animation: none; stroke-dashoffset: 0; }
  .tour__ring, .tour__bubble { transition: none; }
}

/* «הקול שלך» (21.10.26): one quiet row under the voices; the recording opens beneath it.
   The mic is the object: a ring fills toward half a minute, the bars follow the voice live,
   and after the take they freeze into that recording's own waveform. */
.vclone { margin-top: 10px; }
.vclone__open { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 14px; border: 0; border-radius: 16px;
  background: var(--sheet, #fff); box-shadow: inset 0 0 0 0.5px rgba(27, 26, 23, 0.12); color: var(--ink); text-align: start; cursor: pointer;
  transition: transform 0.15s ease; }
.vclone__open:active { transform: scale(0.985); }
.vclone__mic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #ffe81a; box-shadow: inset 0 0 0 1.5px #1b1a17; }
.vclone__mic .i { width: 17px; height: 17px; fill: none; stroke: #1b1a17; stroke-width: 1.8; stroke-linecap: round; }
.vclone__title { display: grid; gap: 2px; }
.vclone__title b { font: 600 16px/1.2 var(--f-ui); }
.vclone__title small { font: 13.5px/1.2 var(--f-body); color: var(--ink-soft); }
.vclone__panel { display: grid; gap: 14px; padding: 14px 2px 4px; }
.vclone__read { margin: 0; font: 14px/1.4 var(--f-body); color: var(--ink-soft); }
.vclone__stage { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 18px; background: var(--sheet, #fff);
  box-shadow: inset 0 0 0 0.5px rgba(27, 26, 23, 0.12); }
.vclone__meter { flex: 1; display: flex; align-items: center; gap: 3px; height: 40px; min-width: 0; }
.vclone__meter i { flex: 1; min-width: 2px; max-width: 4px; height: var(--h, 12%); border-radius: 3px; background: var(--ink-soft); opacity: 0.25;
  transition: height 0.08s linear, opacity 0.2s ease; }
.vclone__meter.is-live i, .vclone__meter.is-take i { opacity: 0.85; background: var(--ink); }
.vclone__side { display: grid; justify-items: center; gap: 6px; flex: none; }
.vclone__time { font: 600 15px/1 var(--f-ui); font-variant-numeric: tabular-nums; color: var(--ink-soft); direction: ltr; }
#vclone .vclone__replay { min-width: 34px; min-height: 34px; width: 34px; height: 34px; padding: 0; }
#vclone .vclone__replay .i { width: 14px; height: 14px; }
#vclone .vclone__replay[hidden] { display: none; }
.editor .vclone__file { position: relative; justify-self: start; margin: -4px 0 0; font: 400 13.5px/1.3 var(--f-body); color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.vclone__file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.vclone__seg label { flex: 1; }
.vclone__seg span { width: 100%; min-height: 38px; padding: 7px 12px; font-size: 15px; }
.editor .vclone__consent { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--sheet, #fff);
  box-shadow: inset 0 0 0 0.5px rgba(27, 26, 23, 0.12); font: 400 13.5px/1.55 var(--f-body); color: var(--ink-soft); cursor: pointer; }
.editor .vclone__consent:has(input:checked) { box-shadow: inset 0 0 0 1.5px #1b1a17; color: var(--ink); }
.vclone__consent input { flex: none; width: 1.2em; height: 1.2em; margin: 2px 0 0; accent-color: #1b1a17; }
.vclone__has { display: flex; gap: 8px; padding-top: 10px; }
/* the take check: one row per thing the clone copies, a tick or what to change */
.vclone__check { margin: 0; padding: 2px 14px; list-style: none; border-radius: 14px; background: var(--sheet, #fff); box-shadow: inset 0 0 0 0.5px rgba(27, 26, 23, 0.12); }
.vclone__check[hidden] { display: none; }
.vclone__check li { display: grid; grid-template-columns: 20px 48px 1fr; align-items: baseline; gap: 8px; padding: 10px 0; font: 14px/1.4 var(--f-body); color: var(--ink-soft); }
.vclone__check li + li { border-top: 0.5px solid rgba(27, 26, 23, 0.1); }
.vclone__check li::before { content: "✓"; align-self: start; margin-top: 1px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: #2f9e5b; color: #fff; font: 700 12px/1 var(--f-ui); }
.vclone__check li.is-fix::before { content: "!"; background: #ffe81a; color: #1b1a17; box-shadow: inset 0 0 0 1.5px #1b1a17; }
.vclone__check b { font: 600 14px/1.4 var(--f-ui); color: var(--ink); }
.vclone__check li.is-fix span { color: var(--ink); }
.vclone__better { display: grid; gap: 10px; padding-top: 12px; }
.vclone__better .help { margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .vclone__meter i { transition: none; }
}
/* ready to make: the one action of the panel lights up only when there is a take and a tick */
#vclone-make { min-height: 46px; transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease; }
#vclone-make:not(:disabled) { background: #ffe81a; color: #1b1a17; box-shadow: inset 0 0 0 1.5px #1b1a17; }
#vclone-make:not(:disabled):active { transform: scale(0.98); }

/* ── the site's calls (21.10.2026, Achiya: «שלא יהיה הכל בשורה אחת… נוח לשימוש»): the apps' row — who, when, one or two
   lines of what — and a tap opens the call: beside the list from 1100px (.callpane, as עונים לי בהודעות opens a chat),
   on its own screen below that. The keys, the status and the call itself live there, not on every row ── */
html:not(.in-store) #calls-list .rowlist > .callrow { position: relative; padding-inline-end: 40px; cursor: pointer; transition: background-color 0.18s; }
html:not(.in-store) #calls-list .rowlist > .callrow:hover { background-color: color-mix(in srgb, var(--ivory) 45%, var(--sheet)); }
html:not(.in-store) #calls-list .rowlist > .callrow:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
html:not(.in-store) #calls-list .rowlist > .callrow--overdue { background-color: rgba(255, 232, 26, 0.08); }   /* as in the apps (glass.css) */
html:not(.in-store) #calls-list .rowlist > .callrow[aria-current="true"] { background-color: var(--ivory); box-shadow: inset -4px 0 0 var(--ink); }   /* the open one: a bar on its start */
html:not(.in-store) #calls-list .rowlist > .callrow::after { content: ""; position: absolute; inset-inline-end: 16px; top: 50%; width: 9px; height: 9px; border-block-start: 2.2px solid var(--ink-soft); border-inline-start: 2.2px solid var(--ink-soft); transform: translateY(-50%) rotate(-135deg); }
#calls-list .rowlist > .callrow > .callrow__top { flex-wrap: nowrap; gap: 8px; }
#calls-list .rowlist > .callrow > .callrow__top > .callrow__who { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#calls-list .rowlist > .callrow > .callrow__top > .callrow__when { order: 9; flex: none; margin-inline-start: auto; font-size: 14px; }
#calls-list .rowlist > .callrow > .callrow__top > .badge { flex: none; }
#calls-list .rowlist > .callrow > .callrow__what { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 15.5px; color: var(--ink-soft); }
.callpane { display: none; }
.callpane__title { margin: 0 0 4px; font: 28px/1.15 var(--f-display); overflow-wrap: anywhere; }
@media (min-width: 1100px) {
  html:not(.in-store) #room-calls { --col: 1180px; }
  html:not(.in-store) .callsdesk:has(> .callpane:not(:empty)) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; gap: 0 28px; }
  html:not(.in-store) .callpane:not(:empty) { display: block; position: sticky; top: 150px; max-height: calc(100vh - 170px); margin-top: 18px; overflow-y: auto; overscroll-behavior: contain; padding: 22px 24px 28px; background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--leaf-sm); box-shadow: var(--card-shadow); scrollbar-width: thin; scrollbar-color: var(--line-strong, var(--hair)) transparent; }
  html:not(.in-store) #calls-list .rowlist > .callrow::after { display: none; }   /* it opens beside, not on a screen of its own */
}

/* the notification settings (22.10.2026, the preview's h-set screen; waits for Achiya's pick) */
.nset__sec { margin: 18px 0 8px; font: 16px/1.3 var(--f-ui); }
.nset__sec:first-child { margin-top: 0; }
.nset__type { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--hair); }
.nset__type:first-child { border-top: 0; }
.nset__type > :not(.nset__ic) { grid-column: 2; }
.nset__ic { width: 24px; height: 24px; }
.nset__type.is-off .nset__ic, .nset__type.is-off .toggle__text { opacity: 0.55; }
.rowlist .nset__type .toggle { min-height: 0; padding: 0; border: 0; }
.nset__subrow { margin-top: 12px; padding-top: 10px !important; border-top: 1px dashed var(--hair) !important; }
.nset__styles label { flex: 1; }
.nset__styles span { width: 100%; }
.nset__sample { display: flex; gap: 10px; margin-top: 12px; padding: 12px 14px; background: var(--sheet); border-radius: 16px; box-shadow: 0 0 0 1px var(--hair), 0 6px 18px rgba(27, 26, 23, 0.06); font: 15px/1.45 var(--f-body); }   /* a white card, not an ink frame (2.11.2026) */
.nset__appic { flex: none; width: 26px; height: 26px; padding: 4px; background: var(--yellow); border-radius: 7px; }
.nset__sample p { margin: 0; }
.nset__top { display: flex; justify-content: space-between; gap: 8px; }
.nset__top span, .nset__sub { color: var(--ink-soft); }
.nset__times { display: flex; gap: 12px; padding: 0 16px 12px; }
.nset__times[hidden] { display: none; }
.nset__times label { display: flex; align-items: center; gap: 6px; margin: 0; font: 15px/1.3 var(--f-ui); }
.nset__times input { width: auto; min-height: 42px; }
.nset textarea { width: 100%; }
.nset__ins { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; font: 14.5px/1.3 var(--f-ui); color: var(--ink-soft); }
.nset__tok { min-height: 36px; padding: 4px 12px; background: var(--yellow); border: 2px solid var(--ink); border-radius: 999px; color: var(--ink); font: 14.5px/1.2 var(--f-ui); cursor: pointer; }
.nset .toggle { display: flex; margin: 0; }   /* over .editor label's block */
.nset .toggle__text { flex: 1; min-width: 0; }
.nset__sample > div { flex: 1; min-width: 0; }
/* where each one arrives (§11, 2.11.2026): the row's keys are the family's chips, the chosen one ink with a check
   (the calm settings: a picked choice is ink by day; at night night.css turns it into the cream pill);
   «צליל | שקט» two quiet words under them, the chosen one on a soft fill; a row the server refused says why under itself */
.nset__head { display: flex; flex-direction: column; }
.nset__type .toggle__text small, .nset__head small { display: block; margin-top: 2px; color: var(--ink-soft); font: 14.5px/1.35 var(--f-ui); }
/* the keys under the row take its whole width, so the three places stay one line on a phone */
.nset__type > :is(.nset__where, .nset__snd, .nset__subrow, .nset__why) { grid-column: 1 / -1; }
.nset__where { gap: 6px; margin-top: 12px; }
.nset__where .chip { display: inline-flex; align-items: center; padding: 6px 12px; }
/* over the glass chip (glass.css by day, night.css's html.lg:not(.a11y-contrast) :is(.chip) at night), which would leave
   the pressed one's words white on white by day and ink on the night's dark glass: ink by day, the cream pill at night */
#nset-types .nset__where .chip[aria-pressed="true"] { background: var(--ink); color: var(--sheet); box-shadow: none; }   /* the night's rule weighs (0,4,1) */
.nset__where .chip[aria-pressed="true"]::before { width: 5px; height: 10px; margin-inline-end: 8px; background: none; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-1px); }
.nset__snd { display: flex; gap: 2px; margin-top: 10px; }
.nset__snd label { position: relative; margin: 0; }
.nset__snd input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.nset__snd span { display: inline-block; padding: 8px 14px; border-radius: 999px; color: var(--ink-soft); font: 15px/1.2 var(--f-body); }
.nset__snd input:checked + span { color: var(--ink); background: var(--calm-fill); }
.nset__snd input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.nset__why { margin: 10px 0 0; font: 14.5px/1.4 var(--f-ui); color: var(--ink); }

/* ── the recording studio (22.10.2026, Achiya: «שיהיה יותר כיף להקליט… שיזהה בדיוק אם היא הקריאה את זה»):
   full screen, the script one line at a time, each word lit with the yellow marker as it is said ── */
html.vrec-on, html.vrec-on body { overflow: hidden; }
.vrec-go { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 2px solid #1b1a17; border-radius: var(--leaf-sm);
  background: var(--yellow); color: #1b1a17; box-shadow: var(--shadow-hard); text-align: start; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease; }
.vrec-go:active { transform: translate(2px, 3px); box-shadow: 1px 1px 0 rgba(27, 26, 23, 0.86); }
.vrec-go__mic { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: #1b1a17; color: var(--yellow); }
.vrec-go__mic .i { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.vrec-go__txt { display: grid; gap: 3px; }
.vrec-go__txt b { font: 19px/1.15 var(--f-ui); }
.vrec-go__txt small { font: 14px/1.4 var(--f-body); opacity: 0.8; }
.vclone__stage[hidden] { display: none; }

.vrec { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; background: var(--page); color: var(--ink);
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.vrec[hidden] { display: none; }
.vrec__top { display: flex; align-items: center; gap: 14px; width: min(100% - 32px, 640px); margin: 0 auto; padding: 12px 0; }
.vrec__x { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--sheet);
  box-shadow: inset 0 0 0 1px var(--hair); color: var(--ink); cursor: pointer; }
.vrec__x .i { width: 18px; height: 18px; }
.vrec__steps { flex: 1; display: flex; gap: 4px; }
.vrec__steps i { flex: 1; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 16%, transparent); transition: background-color 0.3s ease; }
.vrec__steps i.is-done { background: var(--ink); }
.vrec__steps i.is-now { background: var(--yellow); box-shadow: inset 0 0 0 1.5px #1b1a17; }
.vrec__time { flex: none; min-width: 40px; font: 600 15px/1 var(--f-ui); font-variant-numeric: tabular-nums; color: var(--ink-soft); direction: ltr; text-align: end; }

/* intro and done: the cassette and its words sit together in the middle */
.vrec__intro, .vrec__done { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 14px;
  width: min(100% - 40px, 460px); margin: 0 auto auto; padding: 8px 0 28px; text-align: center; overflow-y: auto; }
.vrec__intro[hidden], .vrec__done[hidden], .vrec__stage[hidden] { display: none; }
.vrec__h { margin: 0; font: 30px/1.15 var(--f-display); }
.vrec__lead { margin: 0; font: 17px/1.5 var(--f-body); color: var(--ink-soft); }
.vrec__tips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; margin: 4px 0 2px; padding: 0; list-style: none; }
.vrec__tips li { display: grid; align-content: start; gap: 2px; padding: 4px 8px; }
.vrec__tips li + li { border-inline-start: 1.5px dashed color-mix(in srgb, var(--ink) 30%, transparent); }
.vrec__tips b { font: 16px/1.2 var(--f-ui); }
.vrec__tips span { font: 13px/1.4 var(--f-body); color: var(--ink-soft); }
.vrec__start { width: 100%; min-height: 56px; margin-top: 6px; border: 2px solid #1b1a17; border-radius: 999px; background: var(--yellow); color: #1b1a17;
  box-shadow: var(--shadow-hard); font: 20px/1 var(--f-ui); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.vrec__start:active { transform: translate(2px, 3px); box-shadow: 1px 1px 0 rgba(27, 26, 23, 0.86); }
.vrec__start[hidden] { display: none; }
#vrec-start::before { content: ""; display: inline-block; width: 13px; height: 13px; margin-inline-end: 10px; border-radius: 50%; background: #1b1a17; vertical-align: 1px; }

.vrec__stage { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.vrec__read { position: relative; flex: 1; min-height: 0; overflow-y: auto; width: min(100% - 32px, 640px); margin: 0 auto; padding: 18vh 0 30vh;
  scrollbar-width: none; -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 80%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 80%, transparent); }
.vrec__read::-webkit-scrollbar { display: none; }
/* a word: grey until said, then ink under the yellow marker that sweeps in */
.vrec-say { margin: 0; }
.vrec-say .w { color: color-mix(in srgb, var(--ink) 42%, transparent); border-radius: 4px; background: linear-gradient(transparent 52%, var(--yellow) 52% 92%, transparent 92%) no-repeat 100% 0 / 0% 100%;
  transition: color 0.2s ease, background-size 0.28s ease; }
.vrec-say .w.is-said { color: var(--ink); background-size: 100% 100%; }
.vrec-say .w.is-here { text-decoration: underline 2px; text-decoration-color: color-mix(in srgb, var(--ink) 40%, transparent); text-underline-offset: 6px; }
/* the line to read big in the middle, the rest small around it */
.vrec__read--prompter .vrec-l { margin: 0 0 22px; opacity: 0.3; transform-origin: 100% 50%; transform: scale(0.82);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.vrec__read--prompter .vrec-l.is-now { opacity: 1; transform: none; }
.vrec__read--prompter .vrec-l.is-done { opacity: 0.22; }
.vrec__read--prompter .vrec-say { font: 26px/1.55 var(--f-body); }
.vrec-cue { display: none; margin: 0 0 6px; font: 16px/1.4 var(--f-body); color: var(--ink-soft); }
.vrec-cue::before { content: "הלקוח שואל · "; font-family: var(--f-ui); color: var(--ink); }
.vrec__read--prompter .vrec-l.is-now .vrec-cue { display: block; }
.vrec__read--prompter .vrec-l.is-done .vrec-say .w { color: var(--ink); background-size: 0% 100%; }

.vrec__count { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center; background: color-mix(in srgb, var(--page) 82%, transparent);
  font: 120px/1 var(--f-display); color: var(--ink); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .vrec__count.is-tick { animation: vrec-count 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
}
@keyframes vrec-count { from { transform: scale(1.6); opacity: 0; } 30% { opacity: 1; } to { transform: scale(0.9); } }
.vrec__bar { display: grid; gap: 10px; width: min(100% - 32px, 640px); margin: 0 auto; padding: 12px 0 14px; border-top: 1px solid var(--hair); }
.vrec__hear { display: flex; align-items: center; gap: 8px; font: 14px/1.3 var(--f-ui); color: var(--ink-soft); }
.vrec__hear i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 30%, transparent); transition: transform 0.15s ease, background-color 0.2s; }
.vrec__hear.is-on i { background: #2f9e5b; }
.vrec__hear.is-off i { background: #c9a400; }
.vrec__hear.is-voice i { transform: scale(1.5); }
.vrec__keys { display: flex; gap: 10px; }
.vrec__key { flex: 1; min-height: 48px; border: 2px solid var(--ink); border-radius: 999px; background: var(--sheet); color: var(--ink); font: 16.5px/1 var(--f-ui); cursor: pointer; }
.vrec__key--next { background: var(--ink); color: var(--page); }
.vrec__acts { display: flex; gap: 10px; width: 100%; }
.vrec__acts > * { flex: 1; min-height: 48px; }
.vrec__done .vclone__check { width: 100%; text-align: start; }
.vrec__confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.vrec__confetti i { position: absolute; top: -20px; left: var(--x); width: 10px; height: 16px; border: 1.5px solid #1b1a17; border-radius: 2px; background: var(--yellow);
  animation: vrec-fall 2.2s cubic-bezier(0.3, 0.6, 0.5, 1) var(--d) forwards; }
.vrec__confetti i.is-ink { background: #fffdf7; }
@keyframes vrec-fall { to { transform: translateY(105vh) rotate(var(--r)); } }
@media (prefers-reduced-motion: reduce) {
  .vrec-say .w, .vrec__read--prompter .vrec-l, .vrec__steps i { transition: none; }
}
/* at night the marker is a band under the word: light letters on yellow would not read */
@media (prefers-color-scheme: dark) {
  .vrec-say .w { background-image: linear-gradient(transparent 80%, var(--yellow) 80% 92%, transparent 92%); }
  .vrec-say .w.is-said { color: var(--yellow); }
  .vrec__read--prompter .vrec-l.is-done .vrec-say .w { color: var(--ink); }
}

/* the cassette, cut from paper like the road's pictures (app/road/tape.webp): the label strip turns yellow line by
   line, the reels turn only while you talk */
.vrec__deck { display: flex; justify-content: center; flex: none; padding: 6px 0 12px; }
.vrec:not([data-phase="stage"]) .vrec__deck { margin-top: auto; }
.cas { width: min(300px, 76vw); height: auto; overflow: visible; filter: drop-shadow(0 10px 14px rgba(27, 26, 23, 0.22)) drop-shadow(0 2px 2px rgba(27, 26, 23, 0.18));
  transition: width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.vrec[data-phase="stage"] .cas { width: min(190px, 50vw); }
.vrec[data-phase="done"] .cas { width: min(240px, 62vw); }
.cas__body { fill: #2d2c2a; }
.cas__plate { fill: #353431; stroke: #252422; stroke-width: 2; }
.cas__screws circle { fill: #e9e5dc; }
.cas__win, .cas__holes > *, .cas__hole { fill: #1f1e1c; }
.cas__strip { fill: #efebe2; }
.cas__fill { fill: var(--yellow); transform-box: fill-box; transform-origin: 100% 50%; transform: scaleX(var(--p, 0)); transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
.cas__reel { fill: #f6f3ec; }
.cas__core, .cas__teeth rect { fill: #1f1e1c; }
.cas__head { fill: #353431; stroke: #252422; stroke-width: 2; stroke-linejoin: round; }
.cas__hub { transform-box: fill-box; transform-origin: center; }
.vrec[data-phase="done"] .cas__fill { transition-delay: 0.2s; }

@media (prefers-reduced-motion: no-preference) {
  .cas__hub { animation: cas-spin 1.4s linear infinite paused; }
  .vrec.is-voice .cas__hub { animation-play-state: running; }
}
@keyframes cas-spin { to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) { .cas, .cas__fill { transition: none; } }
/* the call's screen (design-research items 1, 5, 22.10.2026): the want, then the quiet next step on its own line;
   what the assistant said right under it; one «חזרתי» row whose value is its state */
.callscreen__handled { display: flex; align-items: center; gap: 12px; }
.callscreen__handled > button { flex: 1; }
.callscreen__handled > button[aria-pressed="true"] .i { color: var(--ink); }
.callscreen__state { font-size: 16px; color: var(--ink-soft); white-space: nowrap; }
:is(.callscreen, .callpane) .callscreen__handled .pick { flex: 0 1 auto; width: auto; }
/* the forwarding-off step of a cancel (design-research item 16) */
.offstep { display: grid; gap: 6px; justify-items: start; margin-top: 10px; }
.offstep span { color: var(--ink-soft); }

/* «לשנות במילים» (25.10.2026): the ask, then what will change before anything is saved */
.askchange { display: grid; gap: 8px; margin-block: 4px 20px; }
.askchange__label { font-size: 15px; color: var(--ink-2); }
.askchange textarea { font: inherit; padding: 10px 12px; border: 1.5px solid var(--line-strong); border-radius: var(--leaf-xs); resize: vertical; }
.askchange__out { display: grid; gap: 6px; padding: 12px 14px; border: 1.5px dashed var(--line-strong); border-radius: var(--leaf-xs); font-size: 15px; line-height: 1.6; }
.askchange__out p { margin: 0; }
.askchange__head { font-weight: 700; }
.askchange__out s { color: var(--ink-soft); }
.askchange__btns { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* ─────────────────────────────────────────────────────────────
   Calm settings (2.11.2026). Achiya on עונים לי בהודעות's settings: «יותר נקיות, פחות דחוס, יותר מרוח ולא מלחיץ»,
   then «יותר ברור ויותר פשוט ופחות עמוס»; approved («כן מאשר הכל») and carried here as it is (the bot's
   app-settings.css «Calm settings» and «Simpler»). The same fields and words, quieter: a question's label in the body
   face, with room before the next one; a picked choice in ink by day (the switches keep the dial's yellow, and night.css
   keeps it at night); rows apart by air, not lines; «צליל | שקט» two quiet words; the summary's sample one quiet line
   that opens it (.sumprev); a day of hours one line (products.css .weekrow). Scope: every editor; the selectors start
   at html.lg .onapp to stand over glass.css, which loads after this sheet.
   ───────────────────────────────────────────────────────────── */
:root { --calm-fill: color-mix(in srgb, var(--ink) 6%, transparent); --calm-gap: 30px; }

/* the sheet's round key: light, no glass lift */
html.lg .onapp .sheet__close { background: color-mix(in srgb, var(--ink) 6%, var(--sheet)); border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* a question: its label in the body face, room before the next question; a section's title keeps the face of a title */
html.lg .onapp .editor :is(label[for], legend, .ringtrack__unit) { color: var(--ink-2); font: 17px/1.45 var(--f-body); }
html.lg .onapp .editor label[for] { margin: var(--calm-gap) 0 10px; }
/* a legend's own top margin is read differently by each engine (it sits in its fieldset's border), so the room goes on the fieldset */
html.lg .onapp .editor legend { margin: 0 0 10px; }
html.lg .onapp .editor fieldset:not(:first-child) { margin-top: var(--calm-gap); }
html.lg .onapp :is(.editor > label[for]:first-child, .editor .edpart > label[for]:first-child, .editor > fieldset:first-child, .editor .sumprev + fieldset) { margin-top: 12px; }
html.lg .onapp .editor p.ringtrack__unit { margin-top: 12px; font-size: 16px; }
html.lg .onapp .editor :is(.nset__sec, .edsub):not(:first-child) { margin-top: var(--calm-gap); }
html.lg .onapp :is(.editor, .editor .edpart) > label.toggle { display: flex; margin: var(--calm-gap) 0 0; }   /* a switch beside its words, not under them */

/* a choice: picked, ink by day */
@media (prefers-color-scheme: light) {
  html.lg .onapp .editor :is(.seg input:checked + span, .awayparts button[aria-pressed="true"]) { color: var(--sheet); background: var(--ink); box-shadow: none; }
}
/* «צליל | שקט»: two quiet words, the chosen one on a soft fill */
html.lg .onapp .editor .nset__snd { gap: 2px; }
html.lg .onapp .editor .nset__snd span { color: var(--ink-soft); background: none; box-shadow: none; font-family: var(--f-body); }
html.lg .onapp .editor .nset__snd input:checked + span { color: var(--ink); background: var(--calm-fill); box-shadow: none; }

/* rows apart by air, not lines */
html.lg .onapp .editor :is(.rowlist > .toggle, .nset__type, .pick + .pick) { border-top: 0; }
html.lg .onapp .editor .nset__type { padding-block: 14px; }
html.lg .onapp .editor .nset__subrow { padding-top: 0 !important; border-top: 0 !important; }
html.lg .onapp .editor .editor__part + .editor__part { margin-top: var(--calm-gap); padding-top: 0; border-top: 0; }

/* high contrast: the edges the calm look draws with a fill or a shadow come back as lines */
@media (forced-colors: active) {
  html.lg .onapp :is(.sheet__close, .nset__sample, .item) { border: 1px solid CanvasText; }
  html.lg .onapp .editor .nset__snd input:checked + span { border: 2px solid Highlight; }
}

/* ─────────────────────────────────────────────────────────────
   «כל ההגדרות מול העיניים» (2.11.2026, app.js BOARDS): a settings sheet as a board of tiles, a question and its answer
   in each; a tap opens its keys in a dock at the sheet's foot, over the board (which stays put), with the live example
   under them. The approved «לוח» of עונים לי בהודעות (its app-settings.css), in the calm settings' language: hairlines,
   the body face for a question, ink for what is picked by day (night.css: the dial's yellow), the switch in yellow.
   ───────────────────────────────────────────────────────────── */
.editor.sx .sx-src { display: none !important; }
/* nothing to press at the foot: a change saves itself, unless a save went wrong or a change was made by hand (a list, a row) */
.sheet .editor.sx-saves:not(.sx-hand):not(.sx-bad):not(.sx-ask) > .editor__acts { display: none; }
/* hours that are right as they stand have no change to save: the key that confirms them stays in sight (products.js askHours) */
.sheet .editor.sx-ask > .editor__acts { position: sticky; z-index: 8; bottom: calc(10px + env(safe-area-inset-bottom)); justify-content: center; pointer-events: none; }
.sheet .editor.sx-ask > .editor__acts > * { pointer-events: auto; }

/* the sheet's name, back on top once its head scrolled away (sticky with no height of its own, so nothing jumps) */
.sx-top { position: sticky; z-index: 6; top: 0; height: 0; pointer-events: none; }
.sheet:not(.is-board) .sx-top { display: none; }
.sx-top__in { position: absolute; inset-inline: -20px; top: 0; display: flex; height: 54px; align-items: center; gap: 10px; padding-inline: 20px 70px; background: var(--page); box-shadow: 0 1px 0 var(--hair); opacity: 0; transform: translateY(-6px); transition: opacity 0.2s ease, transform 0.2s ease; }
.sx-top.is-on .sx-top__in { opacity: 1; transform: none; }
.sx-top__pic { width: 40px; height: 30px; object-fit: contain; mix-blend-mode: multiply; }
.sx-top__pic:not([src]), .sx-top__pic[src=""] { display: none; }
.sx-top__t { font: 18px/1.2 var(--f-display); }

/* the board: a group's quiet name, then its tiles, two to a row (three from 700px) */
.sx-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.sx-board[hidden] { display: none; }
.editor > .sx-board:first-child, .edtabs + .sx-board, .edpart > .sx-board:first-child { margin-top: 12px; }
.sx-part { grid-column: 1 / -1; margin: 0 4px; color: var(--ink-soft); font: 14.5px/1.3 var(--f-body); }
.sx-tile { position: relative; display: flex; min-width: 0; min-height: 82px; flex-direction: column; justify-content: space-between; gap: 6px; margin: 0; padding: 13px 16px 14px; color: var(--ink); text-align: start; background: var(--sheet); border: 0; border-radius: 20px; box-shadow: 0 0 0 1px var(--hair); font: inherit; cursor: pointer; transition: box-shadow 0.18s ease, transform 0.18s ease, opacity 0.2s ease; -webkit-tap-highlight-color: transparent; }
.sx-tile--wide { grid-column: 1 / -1; }
.sx-tile[hidden] { display: none; }
.sx-tile:active { transform: scale(0.985); }
.sx-tile:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.sx-tile.is-open { box-shadow: 0 0 0 2px var(--ink), 0 8px 22px rgba(27, 26, 23, 0.08); }
.sx-tile.is-marked { box-shadow: 0 0 0 3px var(--yellow), 0 0 0 4px var(--ink); }   /* a hint or a link that points at it */
.sx-tile[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.sx-tile__q { color: var(--ink-soft); font: 14.5px/1.35 var(--f-body); }
.sx-tile__a { display: -webkit-box; overflow: hidden; font: 17px/1.3 var(--f-ui); overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.sx-tile__a.is-empty { color: var(--ink-soft); font-family: var(--f-body); }
.sx-tile__a[dir="auto"] { text-align: right; }
.sx-tile--switch { min-height: 62px; flex-direction: row; align-items: center; gap: 12px; }
.sx-tile__w { display: grid; flex: 1 1 auto; gap: 3px; min-width: 0; }
.sx-tile--switch .sx-tile__q { color: var(--ink-2); font-size: 16.5px; }
.sx-tile__h { color: var(--ink-soft); font: 13.5px/1.45 var(--f-body); }
.sx-tile--switch .sx-tile__a { flex: none; color: var(--ink-soft); font: 14px/1 var(--f-body); }
.sx-saved { position: absolute; bottom: 10px; inset-inline-end: 10px; padding: 3px 8px; color: var(--ink-soft); background: var(--sheet); border-radius: 999px; font: 13px/1 var(--f-body); opacity: 0; transition: opacity 0.25s ease; pointer-events: none; }
.sx-saved::before { content: "✓ "; }
.sx-saved.is-on { opacity: 1; }
/* a switch drawn small, as the dashboard's: a hairline track off, yellow on */
.sx-sw { position: relative; flex: none; width: 50px; height: 30px; background: var(--calm-fill); border: 1.5px solid var(--line-strong); border-radius: 999px; transition: background 0.18s ease; }
.sx-sw::after { position: absolute; top: 50%; inset-inline-start: 4px; width: 20px; height: 20px; margin-top: -10px; content: ""; background: var(--ink); border-radius: 50%; transition: inset-inline-start 0.18s cubic-bezier(0.2, 0.8, 0.2, 1); }
[aria-checked="true"] > .sx-sw { background: var(--yellow); border-color: transparent; }
[aria-checked="true"] > .sx-sw::after { inset-inline-start: 23px; background: #1b1a17; }

/* the dock: what opens for the tile touched, at the sheet's foot, over the board */
.sx-dock { position: sticky; z-index: 8; bottom: 0; margin: 8px -20px 0; padding: 0 8px calc(8px + env(safe-area-inset-bottom)); }
.sx-dock[hidden] { display: none; }
.sx-dock__box { max-height: min(78vh, 680px); overflow-y: auto; overscroll-behavior: contain; padding: 16px 18px 18px; background: var(--sheet); border-radius: 26px; box-shadow: 0 0 0 1px var(--hair), 0 -16px 44px rgba(27, 26, 23, 0.18); animation: sx-rise 0.3s cubic-bezier(0.32, 0.72, 0, 1); }
@keyframes sx-rise { from { opacity: 0; transform: translateY(28px); } }
.sx-dock__box::before { display: block; width: 40px; height: 5px; margin: -6px auto 12px; content: ""; background: var(--line-strong); border-radius: 999px; }   /* the sheet's own grab line */
.sx-dock__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sx-dock__q { margin: 0; font: 21px/1.25 var(--f-display); }
.sx-dock__x { display: grid; flex: none; width: 36px; height: 36px; padding: 0; place-items: center; color: var(--ink); background: var(--calm-fill); border: 0; border-radius: 50%; cursor: pointer; }
.sx-dock__x .i { width: 14px; height: 14px; stroke-width: 2.6; }
.sx-dock__x:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.sx-hint { margin: 0 0 12px; color: var(--ink-soft); font: 14.5px/1.55 var(--f-body); }
.sx-opts { display: grid; gap: 8px; }
.sx-opts--short { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sx-opt { position: relative; display: flex; min-height: 50px; flex-direction: column; justify-content: center; margin: 0; padding: 10px 16px; padding-inline-end: 38px; color: var(--ink); text-align: start; background: var(--sheet); border: 1px solid var(--line-strong); border-radius: 16px; font: 16px/1.35 var(--f-body); cursor: pointer; }
.sx-opt b { font: inherit; }
.sx-opt[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.sx-opt[aria-pressed="true"] b { font-family: var(--f-ui); }
.sx-opt[aria-pressed="true"]::after { position: absolute; top: 50%; inset-inline-end: 14px; content: "✓"; font: 17px/1 var(--f-ui); transform: translateY(-50%); }
.sx-opt:disabled { opacity: 0.45; cursor: default; }
.sx-opt:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.sx-dock__body > :is(input, textarea) { width: 100%; }
.sx-done { display: block; min-height: 44px; margin-top: 14px; padding: 0 22px; color: var(--ink); background: var(--sheet); border: 1px solid var(--line-strong); border-radius: 999px; font: 16px/1 var(--f-ui); cursor: pointer; }   /* quiet: a change saves itself, this only closes */
.sx-done:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
/* what the caller or the owner sees, live, under the keys: the dashboard's own example moved in */
.sx-dock__body > :is(.awaycal, .nset__sample, .chips, .edsub, .editor__lead, .slotnote) { margin-top: 16px; }
.sx-dock__body > .edsub { margin-bottom: 8px; }
.sx-dock__body > .nset__ins { margin-top: 10px; }
@media (min-width: 700px) { .sx-board { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) {
  .sx-dock__box { animation: none; }
  .sx-tile, .sx-top__in, .sx-sw, .sx-sw::after { transition: none; }
}
@media (forced-colors: active) {
  .sx-tile, .sx-dock__box { border: 1px solid CanvasText; }
  .sx-opt[aria-pressed="true"], .sx-tile.is-open { border: 3px solid Highlight; }
}

/* ---------- «לראות איך זה נראה» (app.js, the bot's sample room): what the plan lacks ---------- */
.is-sample { filter: grayscale(1); opacity: .62; }
button.group__note { display: flex; align-items: center; gap: 6px; padding: 0; color: var(--ink-soft); font: 14.5px/1.6 var(--f-ui); text-align: start; background: none; border: 0; }
button.group__note:not(.is-sample) { cursor: default; }
.samplebar { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; color: var(--ink-soft); font: 16px/1.3 var(--f-ui); }
.samplebar__tag { padding: 3px 11px 4px; color: var(--sheet); background: var(--ink); border-radius: 999px; font-size: 14px; }
.samplekey { position: fixed; z-index: 44; inset-inline: 0; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 14px); width: fit-content; max-width: calc(100% - 32px); margin-inline: auto; }
.room:has(> .samplebar) { padding-bottom: 76px; }
@property --sample-r { syntax: "<length>"; inherits: false; initial-value: 0px; }
.sampleveil { position: fixed; z-index: 58; inset: 0; pointer-events: none; -webkit-backdrop-filter: grayscale(1); backdrop-filter: grayscale(1);
  --sample-r: 0px;
  -webkit-mask-image: radial-gradient(circle var(--sample-r) at var(--x, 50%) var(--y, 50%), transparent 92%, #000);
  mask-image: radial-gradient(circle var(--sample-r) at var(--x, 50%) var(--y, 50%), transparent 92%, #000);
}
.sampleveil.is-washing { animation: sample-wash .9s cubic-bezier(.3, 0, .2, 1) forwards; }
@keyframes sample-wash { to { --sample-r: 160vmax; } }
.samplegate { position: fixed; z-index: 60; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(27, 26, 23, .16); transition: opacity .28s ease; }
.samplegate.is-going { opacity: 0; }
.samplegate__box { display: grid; justify-items: center; gap: 10px; width: min(100%, 372px); padding: 22px 24px 18px; text-align: center; background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--leaf-sm); }
.samplegate__pic { width: 164px; height: auto; mix-blend-mode: multiply; }
.samplegate__title { max-width: 14ch; margin: 0; color: var(--ink); font: 36px/1.12 var(--f-display); text-wrap: balance; }
.samplegate__title mark { color: inherit; background: linear-gradient(transparent 62%, var(--yellow) 62% 92%, transparent 92%); }
.samplegate__where { margin: 0; color: var(--ink-soft); font: 16px/1.3 var(--f-ui); }
.samplegate__see { width: 100%; margin-top: 8px; }
.samplegate__later { min-height: 44px; margin-top: 2px; color: var(--ink-soft); text-decoration: underline; background: none; border: 0; font: 16px/1.3 var(--f-ui); }
@media (prefers-color-scheme: dark) { .samplegate__pic { mix-blend-mode: normal; } .samplegate__title mark { background: linear-gradient(transparent 80%, var(--yellow) 80% 92%, transparent 92%); } }
@media (prefers-reduced-motion: reduce) { .sampleveil.is-washing { animation-duration: .01s; } }