/* ─────────────────────────────────────────────────────────────
   עונים לי — אזור הלקוח (/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 ── */
.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, 1080px); min-height: 60px; margin-inline: auto; padding-inline-end: 56px; }
.app-top .brand img { width: 36px; height: 36px; }
.app-top .brand__name { font-size: 22px; }
.app-top__site { font: 15px/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; }
.room__title { font: 34px/1.12 var(--f-display); }
.room__lead { max-width: 56ch; margin-top: 8px; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }
.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); }

/* ── 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: 15px/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__topic { margin-top: 8px; font-size: 17px; line-height: 1.6; }
.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; margin-top: 14px; font: 15.5px/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: 16.5px; line-height: 1.6; color: var(--ink-2); }
.month { margin-top: 14px; font-size: 15.5px; 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: 18px/1.35 var(--f-ui); }
.next__text { margin-top: 6px; font-size: 15.5px; 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: 16.5px/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: 13px/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: 14px; 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: 15px/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: 13px/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; }
.call__after { padding: 14px 16px 16px; border-top: 1px dashed var(--line-strong); font-size: 15.5px; line-height: 1.6; }
.call__after .i { width: 20px; height: 20px; margin-inline-end: 6px; vertical-align: -4px; }
.call__after .linkbtn { min-height: 0; padding: 0 2px; vertical-align: baseline; }
.linkbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 2px; background: none; border: 0; color: var(--ink); font: 15.5px/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: 15.5px/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: 14px; line-height: 1.6; color: var(--ink-soft); }
.help--warn { color: #7a4a00; }
.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); }
.pair { display: grid; grid-template-columns: 1fr 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; }

/* choices that save on tap */
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.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: 15.5px/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; }

/* 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: 13.5px/1.35 var(--f-body); color: var(--ink-soft); }

/* 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: 16.5px/1.35 var(--f-ui); }
.toggle__text small { font: 14px/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: 20px/1.3 var(--f-ui); }
.plancard__state { margin-top: 4px; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.plancard__usage { margin-top: 14px; font-size: 15px; 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; }

/* the messages a customer can act on right away */
.msg { min-height: 1.4em; margin-top: 10px; font: 15px/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: 14px/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: 15.5px/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: 15px/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: 14px; 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: 16.5px/1.35 var(--f-ui); }
.callrow__when { font-size: 14px; color: var(--ink-soft); }
.callrow__what { font-size: 15.5px; 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) { 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: 14px 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: 15px/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: 15px; line-height: 1.7; color: var(--ink-2); }
.helpline nav { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; }
.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: 15.5px/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 .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__mark { width: 58px; height: 58px; }
.gate h1 { margin-top: 16px; font: 32px/1.12 var(--f-display); }
.gate__lead { margin-top: 8px; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }
.gate form { margin-top: 6px; }
.gate label { display: block; margin: 18px 0 8px; font: 15.5px/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: 18px/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; }
.gate details { margin-top: 22px; padding-top: 16px; border-top: 1px dashed var(--line-strong); }
.gate summary { font: 15.5px/1.4 var(--f-ui); cursor: pointer; }
.gate__fine { margin-top: 12px; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
/* the other product's door, under a dashed rule like the help above it (dashed = not this account) */
.gate__other { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--line-strong); font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.gate__other a { color: var(--ink); font-family: var(--f-ui); }
.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: 15.5px; }

/* 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; } }

/* the accessibility button sits in the top bar here: fixed at the bottom it covered the pens;
   pinned at the top it rides the sticky bar, so it is always one tap away */
.onapp #a11y-btn { position: fixed; top: 10px; bottom: auto; left: 16px; width: 40px; height: 40px; }
.onapp #a11y-btn.is-tucked { transform: none; }
.onapp #a11y-btn svg { width: 22px; height: 22px; }

@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; 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: 30px; }
  .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: 15px; }
.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: 48px 20px; text-align: center; font: 16px/1.6 var(--f-ui); color: var(--ink-2); }
/* Sumit's page fills the card edge to edge, tall enough for all of it -- the form and,
   under it, their "secured by" line -- so our page scrolls and theirs never has to
   (measured 5.10.2026: ~1,100px on a phone in one column; two columns from ~760px) */
.payframe__frame { display: block; width: 100%; height: 1140px; border: 0; border-radius: 28px 6px 28px 6px; background: #fff; }
@media (min-width: 760px) { .payframe__frame { height: 820px; } }

.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; }
.pay__hosted { margin-top: 2px; font-size: 14.5px; }

.paydone { margin-top: 22px; padding: 26px 22px 22px; }
.paydone:focus { outline: none; }
.paydone__mark { width: 52px; height: 52px; }
.paydone__title { margin-top: 14px; font: 30px/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; }