/* ─────────────────────────────────────────────────────────────
   Liquid Glass (16.10.2026, Achiya: «שהכל יתאים לעיצוב החדש של אפל זכוכית נוזלית»; then, after a harder take
   with the family's ink edges: «יותר אהבתי את הכפתורים שהיו מקודם, רק טיפה תלטש עם נגיעות קטנות של העיצוב העלה
   שלי, אבל תשאיר כמו שהיה קודם, יותר מרוכך»). The soft glass, with three small touches of the family's leaf:
   - the leaf corners come back, softened (30/14 where the site has 30/8): cards and the home card read as leaves;
   - the keys are soft leaves instead of full capsules: two corners round, two a little tighter;
   - the room you are in carries a small yellow leaf in the tab bar.
   Apple's iOS 26 material in the family's colours, under html.lg (site/app/index.html):
   - the navigation floats over the content as glass: the top bar's keys, the tab bar, the sheet,
     the toast; the content stays solid and readable underneath (Apple: glass is the controls'
     layer, never the content's);
   - one continuous radius family (concentric: an inner corner = the outer minus its padding),
     soft depth instead of the hard ink shadow, capsules for keys;
   - dial yellow stays the one tint: the chosen tab, the one action, an on switch.
   Without backdrop-filter, or with reduced transparency, the glass turns solid paper.
   The wa-bot dashboard (/bot/app/) carries the same layer in its own glass.css.
   ───────────────────────────────────────────────────────────── */

html.lg {
  --lg-tint: rgba(255, 253, 247, 0.6);
  --lg-tint-strong: rgba(255, 253, 247, 0.95);
  --lg-blur: blur(22px) saturate(180%);
  --lg-edge: rgba(27, 26, 23, 0.1);
  --lg-shine: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.4), inset 0 -10px 18px -14px rgba(255, 255, 255, 0.9);
  --lg-lift: 0 10px 30px rgba(27, 26, 23, 0.13), 0 2px 6px rgba(27, 26, 23, 0.07);
  --lg-lens: linear-gradient(180deg, #fff38a 0%, #ffe81a 58%, #f6dc00 100%);
  --lg-lens-shine: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -2px 5px rgba(170, 140, 0, 0.16);
  --lg-soft: 0 1px 2px rgba(27, 26, 23, 0.05), 0 10px 26px rgba(27, 26, 23, 0.07);
  /* the family's leaf, softened: every component that reads these follows */
  --leaf: 30px 14px 30px 14px;
  --leaf-sm: 22px 10px 22px 10px;
  --leaf-xs: 14px 6px 14px 6px;
  --lg-key: 26px 11px 26px 11px;        /* a key: round where the capsule was, the leaf's two tighter corners */
  --lg-lens-leaf: 14px 6px 14px 6px;    /* the yellow under the room you are in */
  --shadow-hard: 0 6px 18px rgba(214, 182, 0, 0.3), 0 1px 2px rgba(27, 26, 23, 0.12);
  --card-shadow: var(--lg-soft);
  --tabbar-h: 92px;   /* the floating bar: 64 + its 12px lift + room to breathe */
}

/* the paper the glass floats over: the cream page with the dial's yellow glow in its corner */
html.lg { background: var(--page); }
html.lg .onapp { position: relative; isolation: isolate; background: transparent; }
html.lg .onapp::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(110% 55% at 100% -5%, rgba(255, 232, 26, 0.2) 0%, rgba(255, 232, 26, 0) 60%),
              radial-gradient(90% 45% at -10% 105%, rgba(246, 240, 223, 0.95) 0%, rgba(246, 240, 223, 0) 65%), var(--page); }

/* ── the glass itself ── */
html.lg :is(.app-top .brand, .app-top .product-switch, .app-top__site, .tabbar, .sheet__close, .lg-glass) {
  background: var(--lg-tint); -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  border: 0.5px solid var(--lg-edge); box-shadow: var(--lg-shine), var(--lg-lift);
}

/* ── the top: no bar, the content runs under it and softens there (the scroll edge); its keys float ── */
html.lg .app-top { padding-top: env(safe-area-inset-top); background: transparent; border-bottom: 0; }
html.lg .app-top::before { content: ""; position: absolute; inset: 0 0 -18px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(251, 249, 243, 0.92) 0%, rgba(251, 249, 243, 0.7) 55%, rgba(251, 249, 243, 0) 100%);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 100%); mask-image: linear-gradient(180deg, #000 50%, transparent 100%); }
html.lg .app-top__row { min-height: 64px; }
html.lg .app-top .brand { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; }
html.lg .app-top .brand img { width: 30px; height: 30px; }
html.lg .app-top .brand .brand__txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.lg .app-top__site { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; white-space: nowrap; }
@media (max-width: 599px) { html.lg .app-top__site { display: none; } }
/* the product switch: Apple's segmented control, a glass track with a lens on the product you are in */
html.lg .app-top .product-switch { gap: 2px; padding: 4px; border-radius: 999px; }
html.lg .app-top .product-switch a { min-height: 44px; padding-inline: 16px; border-radius: 999px; color: var(--ink-soft); transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; }
@media (pointer: coarse) { html.lg .app-top .product-switch a { min-height: 48px; } }   /* a finger on Android: 48dp */
html.lg .app-top .product-switch a:hover { background: rgba(255, 255, 255, 0.55); color: var(--ink); }
html.lg .app-top .product-switch a[aria-current] { background: #fff; color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--ink), 0 2px 8px rgba(27, 26, 23, 0.14); view-transition-name: product-lit; }

@media (max-width: 339px) { html.lg .app-top .product-switch a { padding-inline: 11px; } }

/* ── the tab bar: a glass capsule floating over the content, a yellow lens on the room you are in ── */
html.lg .tabbar { inset-inline: 14px; bottom: calc(12px + env(safe-area-inset-bottom)); gap: 0; padding: 6px; border-radius: 999px; border-top: 0.5px solid var(--lg-edge); }
html.lg .tabbar button { position: relative; min-height: 56px; border-radius: 999px; color: var(--ink-2); font-size: 12.5px; transition: color 0.2s ease; }
html.lg .tabbar__ic { width: auto; height: 26px; border: 0; border-radius: 0; background: none; }
html.lg .tabbar button[aria-current="page"] { color: var(--ink); background: rgba(255, 255, 255, 0.88); box-shadow: inset 0 1px 0 #fff, 0 0 0 0.5px rgba(27, 26, 23, 0.1), 0 3px 10px rgba(27, 26, 23, 0.12); }
html.lg .tabbar button[aria-current="page"] .tabbar__ic { width: 46px; height: 28px; border-radius: var(--lg-lens-leaf); background: var(--lg-lens); box-shadow: var(--lg-lens-shine); transform: none; }
html.lg .tabbar button:active { transform: scale(0.96); }
html.lg .tabbar button:active .tabbar__ic { transform: none; }
html.lg .toast { bottom: calc(var(--tabbar-h) + 8px + env(safe-area-inset-bottom)); }
html.lg .onapp::after { content: ""; position: fixed; z-index: 39; inset: auto 0 0; height: calc(96px + env(safe-area-inset-bottom)); pointer-events: none;
  background: linear-gradient(0deg, rgba(251, 249, 243, 0.92) 0%, rgba(251, 249, 243, 0.55) 55%, rgba(251, 249, 243, 0) 100%); }

/* ── content: solid sheets on the paper, one radius, soft depth (no ink frame, no hard shadow) ── */
html.lg .card { border: 0.5px solid rgba(27, 26, 23, 0.08); box-shadow: var(--lg-soft); }
html.lg .card.slip--empty { border: 1.5px dashed var(--line-strong); box-shadow: none; }
html.lg .next { border: 0; background: rgba(246, 240, 223, 0.85); box-shadow: inset 0 0 0 0.5px rgba(27, 26, 23, 0.06); }
html.lg .editor { border: 0.5px solid rgba(27, 26, 23, 0.1); box-shadow: var(--lg-soft); }
html.lg :is(.sheet .editor, .call .call__body > .editor, .call > .editor) { border: 0; box-shadow: none; }
/* the family's ink rings that sat inside the controls, as hairlines */
html.lg :is(.voicebar__avatar, .av, .ringtrack__you) { border: 0; box-shadow: inset 0 0 0 1px rgba(27, 26, 23, 0.22), 0 1px 3px rgba(27, 26, 23, 0.08); }
html.lg .voicebar { border-bottom: 0.5px solid rgba(27, 26, 23, 0.12); }
html.lg .call .voicebar { border: 0.5px solid rgba(27, 26, 23, 0.12); }
html.lg .rowlist { border: 0.5px solid rgba(27, 26, 23, 0.08); box-shadow: var(--lg-soft); }
html.lg .reminder { border: 0; box-shadow: var(--lg-lens-shine), 0 6px 16px rgba(214, 182, 0, 0.22); background: var(--lg-lens); }
html.lg .famcard { border-radius: var(--leaf); }
html.lg .road::before { width: 2px; background: rgba(27, 26, 23, 0.22); border-radius: 2px; }
/* the road's line in pieces between the pictures (18.10.2026): the plates of page colour that cut it at each picture
   showed as pale squares on the page's yellow glow. Each stop draws the line above and below its picture (none above
   the first, none below the last), the call beside it draws it whole; the pictures need no plate, nor the layer that
   kept their multiply from the paper. The same in the
   wa-bot dashboard's glass.css. */
@media (forced-colors: none) {
  html.lg { --road-line: rgba(27, 26, 23, 0.22); }
  html.lg .road::before { content: none; }
  html.lg :is(.road, .stops) .stop__pic { background: none; }
  html.lg :is(.road, .stops) .stop:not(.stop--answer) .stop__pic { z-index: auto; }   /* no layer of its own: the picture's multiply reaches the paper */
  html.lg .road > .stop::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: calc(var(--rail) / 2 - 1px); width: 2px; pointer-events: none;
    background: linear-gradient(var(--road-line), var(--road-line)) top / 100% var(--road-up, 0px) no-repeat, linear-gradient(var(--road-line), var(--road-line)) bottom / 100% var(--road-down, 0px) no-repeat; }
  html.lg .road > :not([hidden]) ~ .stop { --road-up: calc(50% - 36px); }
  html.lg .road > .stop:has(~ :not([hidden], :empty)) { --road-down: calc(50% - 36px); }
  html.lg .road > :not(.stop) { position: relative; }
  html.lg .road > :not(.stop)::before { content: ""; position: absolute; inset-block: 0 -18px; inset-inline-start: calc(var(--rail) / 2 - 1px - var(--hang)); width: 2px; background: var(--road-line); pointer-events: none; }
}
html.lg .stop__val.is-warn { border: 0; background: var(--lg-lens); box-shadow: var(--lg-lens-shine), 0 3px 10px rgba(214, 182, 0, 0.25); }
html.lg .stop__val:is(.is-add, .is-more) { border: 0; background: rgba(255, 255, 255, 0.7); box-shadow: inset 0 0 0 0.5px rgba(27, 26, 23, 0.14), 0 1px 3px rgba(27, 26, 23, 0.06); }

/* ── keys: soft leaves; the one action is the prominent glass in the dial's yellow, the rest clear glass ── */
html.lg .btn { border: 0; border-radius: var(--lg-key); transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.16s ease, filter 0.16s ease; }
html.lg .btn--primary { background: var(--lg-lens); box-shadow: var(--lg-lens-shine), var(--shadow-hard); }
html.lg .btn--primary:hover { transform: translateY(-1px); filter: brightness(1.03); box-shadow: var(--lg-lens-shine), 0 9px 22px rgba(214, 182, 0, 0.34), 0 1px 2px rgba(27, 26, 23, 0.12); }
html.lg .btn--primary:active { transform: scale(0.97); box-shadow: var(--lg-lens-shine), 0 3px 8px rgba(214, 182, 0, 0.26); }
html.lg .btn--ghost { background: rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 0.5px rgba(27, 26, 23, 0.14), 0 4px 14px rgba(27, 26, 23, 0.08); }
html.lg .btn--ghost:hover { box-shadow: inset 0 1px 0 #fff, 0 0 0 0.5px rgba(27, 26, 23, 0.2), 0 6px 18px rgba(27, 26, 23, 0.12); }
html.lg .btn--ghost:active { transform: scale(0.97); }
html.lg :is(.voicebar__edit, .hear, .chip, .callrow select, .filters select) { border: 0; border-radius: 999px; background-color: rgba(255, 255, 255, 0.78); box-shadow: inset 0 0 0 0.5px rgba(27, 26, 23, 0.16), 0 2px 8px rgba(27, 26, 23, 0.06); }
html.lg .hear--round { background: var(--lg-lens); box-shadow: var(--lg-lens-shine), 0 4px 12px rgba(214, 182, 0, 0.28); }

/* ── choices: Apple's segmented control, a lens on the chosen one ── */
html.lg .seg { gap: 6px; }
html.lg .seg span { border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.72); box-shadow: inset 0 0 0 0.5px rgba(27, 26, 23, 0.16), 0 1px 3px rgba(27, 26, 23, 0.05); transition: background-color 0.18s ease, box-shadow 0.18s ease; }
html.lg .seg input:checked + span { background: var(--lg-lens); box-shadow: var(--lg-lens-shine), 0 4px 12px rgba(214, 182, 0, 0.26); }
html.lg .callchips .chip[aria-pressed="true"] { background: var(--lg-lens); box-shadow: var(--lg-lens-shine), 0 4px 12px rgba(214, 182, 0, 0.26); }

/* ── fields ── */
html.lg .editor :is(input[type="text"], input[type="tel"], input[type="email"], input[type="url"], input[type="date"], input[type="time"], textarea, select), html.lg :is(.copyfield input, .gate input) {
  border: 0; border-radius: 14px; background-color: #fff; box-shadow: inset 0 0 0 1px rgba(27, 26, 23, 0.16), 0 1px 2px rgba(27, 26, 23, 0.04); }
html.lg .editor :is(input, textarea, select):focus-visible, html.lg :is(.copyfield input, .gate input):focus-visible { outline: 0; box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 0 4px rgba(255, 232, 26, 0.6); }

/* ── switches: Apple's, in the dial's yellow ── */
html.lg .toggle input { width: 51px; height: 31px; border: 0; border-radius: 999px; background: rgba(120, 120, 128, 0.22); box-shadow: inset 0 0 0 1.5px rgba(27, 26, 23, 0.55); transition: background-color 0.22s ease; }
html.lg .toggle input::after { top: 2px; right: 2px; width: 27px; height: 27px; background: #fff; border: 0; border-radius: 999px; box-shadow: 0 0 0 1px rgba(27, 26, 23, 0.45), 0 3px 8px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.16); transition: right 0.24s cubic-bezier(0.3, 1.3, 0.5, 1), width 0.18s ease; }
html.lg .toggle input:checked { background: #ffe81a; box-shadow: inset 0 0 0 1.5px rgba(27, 26, 23, 0.55); }
html.lg .toggle input:checked::after { right: calc(100% - 29px); }
html.lg .toggle input:active::after { width: 33px; }
html.lg .toggle input:checked:active::after { right: calc(100% - 35px); }

/* ── the usage meter ── */
html.lg .meter { height: 8px; border: 0; background: rgba(120, 120, 128, 0.18); }
html.lg .meter i { border: 0; border-radius: 999px; background: var(--lg-lens); }

/* ── the sheet: glass that floats in from the bottom, inset from the edges ── */
html.lg .sheet__scrim { background: rgba(27, 26, 23, 0.26); }
html.lg .sheet__box { inset-inline: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); width: min(100% - 16px, 560px); max-height: calc(100% - 52px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  border: 0.5px solid var(--lg-edge); border-radius: 34px; background: var(--lg-tint-strong); -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  box-shadow: var(--lg-shine), 0 24px 60px rgba(27, 26, 23, 0.24); }
html.lg .sheet__scroll { padding-bottom: 22px; }
html.lg .sheet__close { border-radius: 50%; }
html.lg .sheet__pic, html.lg .stop__pic img, html.lg .famcard__pic { mix-blend-mode: multiply; }
html.lg .sheet .daybar__track { border: 0; box-shadow: inset 0 0 0 1px rgba(27, 26, 23, 0.16); }

/* the closing links: a finger's height each (they were 25px tall) */
html.lg .helpline nav a { display: inline-flex; align-items: center; min-height: 44px; }

/* ── the toast: a dark glass capsule ── */
html.lg .toast { border-radius: 999px; background: rgba(31, 29, 25, 0.74); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 12px 30px rgba(0, 0, 0, 0.24); }

/* a desk: the tab bar is a glass segmented capsule under the top */
@media (min-width: 900px) {
  html.lg { --tabbar-h: 0px; }
  html.lg .tabbar { inset-inline: auto; bottom: auto; top: 76px; padding: 5px; }
  html.lg .tabbar button { min-height: 46px; padding: 8px 20px; font-size: 16px; }
  html.lg .tabbar button[aria-current="page"] { background: rgba(255, 255, 255, 0.92); box-shadow: inset 0 1px 0 #fff, 0 0 0 0.5px rgba(27, 26, 23, 0.1), 0 3px 10px rgba(27, 26, 23, 0.12); }
  html.lg .tabbar button[aria-current="page"] .tabbar__ic { width: 32px; height: 26px; }
  html.lg .onapp::after { content: none; }
  html.lg .tabbar button:hover:not([aria-current="page"]) { background: rgba(255, 255, 255, 0.6); }
  html.lg .toast { bottom: 28px; }
}

/* no glass where it cannot be drawn, or for whoever asked for less transparency: the same shapes on solid paper */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html.lg { --lg-tint: rgba(255, 253, 247, 0.97); --lg-tint-strong: #fffdf7; }
}
@media (prefers-reduced-transparency: reduce) {
  html.lg { --lg-tint: rgba(255, 253, 247, 0.97); --lg-tint-strong: #fffdf7; }
  html.lg .app-top::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--page); -webkit-mask-image: none; mask-image: none; }
}
@media (prefers-contrast: more) {
  html.lg :is(.app-top .brand, .app-top .product-switch, .tabbar, .sheet__box, .card, .btn--ghost) { border: 1.5px solid var(--ink); }
  html.lg .toggle input { box-shadow: inset 0 0 0 2px var(--ink); }
  html.lg .toggle input::after { box-shadow: 0 0 0 1.5px var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
  html.lg :is(.btn, .tabbar button, .toggle input, .toggle input::after, .seg span) { transition: none; }
}

/* the iPhone app (html.ios-app, 16.10.2026): the floating tab bar reads over the content scrolling under it — its
   glass at 85% instead of 60%, the same glass; without blur, or with less transparency asked for, it stays solid */
html.lg.ios-app .tabbar { --lg-tint: rgba(255, 253, 247, 0.85); }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html.lg.ios-app .tabbar { --lg-tint: rgba(255, 253, 247, 0.97); }
}
@media (prefers-reduced-transparency: reduce) {
  html.lg.ios-app .tabbar { --lg-tint: rgba(255, 253, 247, 0.97); }
}

/* ── the calls room and the call's screen, quieter (18.10.2026, Achiya «עיצוב חייב להיות לפי החדש / שהכל יהיה פחות
   דחוס יותר נקי / תפריט נפתח יותר מיוחד ואלגנטי»): one glass track for the filter, air between the days, soft tags
   without ink rings, the lens for the one key, and the dropdowns' own glass menu (app.js fancySelect) ── */
html.lg .callchips { display: flex; gap: 2px; margin-top: 22px; padding: 4px; border-radius: 999px; background: var(--lg-tint);
  -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); border: 0.5px solid var(--lg-edge); box-shadow: var(--lg-shine), var(--lg-soft); }
html.lg .callchips .chip { flex: 1 1 0; justify-content: center; min-width: 0; min-height: 40px; padding: 6px 8px; background: none; box-shadow: none; font-size: 15px; white-space: nowrap; transition: background 0.22s ease, box-shadow 0.22s ease; }
html.lg .callchips .chip[aria-pressed="true"] { background: var(--lg-lens); box-shadow: var(--lg-lens-shine), 0 3px 10px rgba(214, 182, 0, 0.24); }
html.lg .callchips__n:not(:empty) { margin-inline-start: 5px; color: var(--ink-soft); font-size: 13.5px; }
html.lg .callchips .chip[aria-pressed="true"] .callchips__n { color: var(--ink-2); }
html.lg #calls-toolbar .filters { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
html.lg #calls-toolbar .filters label { display: contents; }
html.lg .callchips__seen { margin: 0; font-size: 14.5px; }
/* the overdue line: a sentence with a yellow dot, not a band */
html.lg #lead-reminder { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 0; background: none; box-shadow: none; font: 15px/1.45 var(--f-ui); color: var(--ink-2); }
html.lg #lead-reminder::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--lg-lens); box-shadow: 0 0 0 3px rgba(255, 232, 26, 0.35); }
html.lg .callday { margin-top: 34px; }
html.lg .callday__head { margin: 0 4px 10px; }
html.lg .callday__label { font-size: 15px; color: var(--ink-2); }
html.lg .callday__count { font-size: 13.5px; }
html.lg .badge { min-height: 22px; padding: 2px 9px; border: 0; background: color-mix(in srgb, var(--ink) 7%, transparent); font-size: 12.5px; color: var(--ink-2); }
html.lg .badge--urgent { background: var(--lg-lens); box-shadow: var(--lg-lens-shine); color: var(--ink); }
html.lg .badge--spam { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink-soft); }
html.lg.in-store #calls-list .callrow { gap: 5px; padding-block: 17px; padding-inline-start: 18px; }
html.lg.in-store #calls-list .callrow__top { flex-wrap: nowrap; gap: 8px; }
html.lg.in-store #calls-list .callrow__who { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
html.lg.in-store #calls-list .callrow__when { order: 9; flex: none; margin-inline-start: auto; font-size: 13.5px; }
html.lg.in-store #calls-list .callrow__what { font-size: 15px; color: var(--ink-soft); }
html.lg.in-store #calls-list .callrow--overdue { background: rgba(255, 232, 26, 0.08); }
html.lg .callrow__dot { width: 9px; height: 9px; box-shadow: none; background: var(--lg-lens); }

/* the call's screen: the back key in glass, the call back as the lens, the summary as words on the paper */
html.lg .callscreen__back { border: 0.5px solid var(--lg-edge); background: var(--lg-tint); -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); box-shadow: var(--lg-shine), var(--lg-lift); }
html.lg .callscreen .callrow { gap: 20px; }
html.lg .callscreen .callrow__when { font-size: 15px; }
html.lg .callscreen .callrow__tools a[href^="tel:"] { min-height: 58px; margin: 6px 0 0; border: 0; border-radius: var(--lg-key); background: var(--lg-lens); box-shadow: var(--lg-lens-shine), 0 10px 24px rgba(214, 182, 0, 0.3); font-size: 18px; }
html.lg .callscreen .callrow__tools a[href^="tel:"]:active { transform: scale(0.97); box-shadow: var(--lg-lens-shine), 0 4px 10px rgba(214, 182, 0, 0.26); }
html.lg .callscreen .callrow__what { padding: 0 2px; background: none; border: 0; font-size: 19px; line-height: 1.65; }
html.lg .callscreen .callrow__tools .pick { width: 100%; min-height: 54px; margin-top: 4px; padding: 10px 18px; border: 0; border-radius: var(--lg-key);
  background: color-mix(in srgb, var(--sheet) 88%, transparent); box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--ink) 18%, transparent), 0 2px 8px rgba(27, 26, 23, 0.06); font-size: 16.5px; }
html.lg .callscreen .callrow__tools .pick:active { transform: scale(0.98); background: color-mix(in srgb, var(--sheet) 88%, transparent); }
html.lg .callscreen .callrow__tools .pick .i, html.lg .callscreen .callrow__tools .pick__chev { color: var(--ink-soft); }
/* the recording's player in the new look: a glass capsule, the lens for play */
html.lg .player { border: 0.5px solid var(--lg-edge); background: var(--lg-tint); -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); box-shadow: var(--lg-shine), var(--lg-soft); }
html.lg .player__key { border: 0; background: var(--lg-lens); box-shadow: var(--lg-lens-shine), 0 4px 12px rgba(214, 182, 0, 0.3); }
html.lg .callscreen__away { margin-top: 18px; }
html.lg .callscreen__away .callrow__block { width: 100%; justify-content: center; border-top: 0 !important; color: var(--err); }
html.lg .calltalk__label { margin-top: 18px; font-size: 15px; color: var(--ink-2); }

/* ── the dropdown: a key of the new look, and the glass menu it floats ── */
.pick__native { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.pick { display: inline-flex; align-items: center; gap: 10px; min-height: 42px; padding: 8px 16px 8px 14px; border: 0; border-radius: var(--lg-key, 999px);
  background: color-mix(in srgb, var(--sheet) 88%, transparent); box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--ink) 18%, transparent), 0 2px 8px color-mix(in srgb, var(--ink) 7%, transparent);
  font: 15.5px/1.2 var(--f-ui); color: var(--ink); text-align: start; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.16s ease, box-shadow 0.2s ease; }
.pick:active { transform: scale(0.97); }
.pick:focus-visible { outline: 0; box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 0 4px rgba(255, 232, 26, 0.6); }
.pick:disabled { opacity: 0.55; }
.pick__label { color: var(--ink-soft); font-size: 14px; }
.pick__text { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pick__chev { flex: none; width: 16px; height: 16px; color: var(--ink-soft); transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.25, 1); }
.pick[aria-expanded="true"] { box-shadow: inset 0 0 0 1px rgba(27, 26, 23, 0.22), 0 6px 18px rgba(27, 26, 23, 0.1); }
.pick[aria-expanded="true"] .pick__chev { transform: rotate(180deg); }
.pickscrim { position: fixed; inset: 0; z-index: 89; }
.pickmenu { position: fixed; z-index: 90; overflow-y: auto; overscroll-behavior: contain; padding: 6px; border-radius: 24px;
  background: var(--sheet, #fffdf7); -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  border: 0.5px solid var(--lg-edge, rgba(27, 26, 23, 0.1)); box-shadow: var(--lg-shine, none), 0 24px 60px rgba(27, 26, 23, 0.22), 0 3px 10px rgba(27, 26, 23, 0.08);
  opacity: 0; transform: translateY(-8px) scale(0.94); transform-origin: top center;
  transition: opacity 0.18s ease, transform 0.3s cubic-bezier(0.2, 0.9, 0.25, 1.12); }
.pickmenu.is-up { transform: translateY(8px) scale(0.94); transform-origin: bottom center; }
.pickmenu.is-in { opacity: 1; transform: none; }
.pickmenu__item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 10px 16px; border: 0; border-radius: 18px 8px 18px 8px;
  background: none; font: 16.5px/1.3 var(--f-ui); color: var(--ink); text-align: start; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.15s ease; }
.pickmenu__item + .pickmenu__item { margin-top: 2px; }
.pickmenu__item:active, .pickmenu__item:focus-visible { outline: 0; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.pickmenu__item[aria-selected="true"] { background: var(--lg-lens, #ffe81a); box-shadow: var(--lg-lens-shine, none); }
.pickmenu__item:disabled { opacity: 0.45; }
.pickmenu__check { flex: none; width: 18px; height: 18px; margin-inline-start: auto; opacity: 0; transform: scale(0.6); transition: opacity 0.2s, transform 0.25s cubic-bezier(0.2, 0.9, 0.25, 1.3); }
.pickmenu__item[aria-selected="true"] .pickmenu__check { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .pickmenu, .pickmenu.is-up { transform: none; transition: opacity 0.12s ease; }
  .pick__chev, .pickmenu__check { transition: none; }
}
/* inside an editor the dropdown is a field: the full width, like the inputs around it */
html.lg .editor .pick { width: 100%; min-height: 48px; }

/* ── 19.10.2026, «פחות דחוס, ברור להבנה ופשוט ונקי»: Achiya approved the bot's chat screen's way («כן, זו הכוונה. תעשה
   ככה בהגדרות ובשאר המסכים, בשני הלוחות»), the same in עונים לי בהודעות (its app-rooms.css). In the store apps on a phone:
   the same parts with more air and fewer lines — the calls and the settings' rows divided by the space between them, not
   by a rule; the days further apart; the foot's links quieter and further apart, no rule over them. The website keeps its
   look. ── */
@media (max-width: 719px) {
  html.in-store #calls-list .callrow { border-top: 0; padding-block: 19px; }
  html.lg.in-store #calls-list .callrow { padding-block: 19px; }
  html.in-store .callday { margin-top: 40px; }
  html.in-store .rowlist .toggle { min-height: 70px; border-top: 0; }
  html.in-store .rowlist > .row { border-top: 0; }
  html.in-store :is(.pick + .pick, .numrow, .rowlist > .editor) { border-top-color: transparent; }
  html.in-store .numrow { min-height: 58px; }
  html.in-store .helpline { margin-top: 44px; padding-top: 0; border-top: 0; }
  html.in-store .helpline nav { gap: 2px 22px; margin-top: 14px; }
  html.in-store .helpline nav a { color: var(--ink-2); text-decoration-thickness: 1px; text-underline-offset: 4px; }
}