/* ─────────────────────────────────────────────────────────────
   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, as in
   עונים לי בשיחות's /app/: the leaf corners come back softened (30/14 where the site has 30/8), the keys are soft
   leaves instead of full capsules, and 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 (public/app/index.html), the same layer as
   עונים לי בשיחות's /app/ (maane site/assets/glass.css), so the two dashboards stay one app:
   - the navigation floats over the content as glass: the top bar's keys, the tab bar, the sheet; the content
     stays solid and readable underneath (Apple: glass is the controls' layer, never the content's);
   - one continuous radius family, soft depth instead of the hard ink shadow, capsules for keys;
   - dial yellow stays the one tint: the room you are in, the one action, an on switch.
   Without backdrop-filter, or with reduced transparency, the glass turns solid paper.
   ───────────────────────────────────────────────────────────── */

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);
  --shadow-key-sm: 0 3px 10px rgba(27, 26, 23, 0.1);
  --card-shadow: var(--lg-soft);
  background: var(--page);
}

/* the paper the glass floats over: the cream page with the dial's yellow glow in its corner */
html.lg body.page-app { position: relative; isolation: isolate; background: transparent; }
html.lg body.page-app::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 .page-app :is(.appbar__brand, .appbar .product-switch, .appbar__pill, .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 .page-app .appbar { padding-top: env(safe-area-inset-top); background: transparent; border-bottom: 0; }
/* the top row as high as עונים לי בשיחות's (64px, maane glass.css .app-top__row), so the mark and the switch sit at the
   same height in both dashboards */
html.lg { --appbar-h: calc(64px + var(--view-h)); }
html.lg .page-app .appbar__in { min-height: 64px; padding-block: 0; }
html.lg .page-app .appbar::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%); }
/* on a phone too the top stays (the switch between the products is one tap away from anywhere), as in עונים לי בשיחות */
@media (max-width: 699.98px) {
  html.lg { --appbar-h: calc(var(--view-h) + 76px); }
  html.lg .page-app .appbar { position: sticky; }
  html.lg .page-app .appbar__in { column-gap: 16px; }   /* the mark and the switch as far apart as in עונים לי בשיחות */
}
html.lg .page-app .appbar__brand { display: grid; place-items: center; width: 46px; height: 46px; gap: 0; border-radius: 50%; }
html.lg .page-app .appbar__brand img { width: 30px; height: 30px; }
html.lg .page-app .appbar__brand .brand__txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.lg .page-app .appbar__title { border-inline-start: 0; }
html.lg .page-app .appbar__pill { border-radius: 999px; }
/* the product switch: Apple's segmented control, a glass track with a lens on the product you are in */
html.lg .page-app .appbar .product-switch { gap: 2px; padding: 4px; border-radius: 999px; }
html.lg .page-app .appbar .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 .page-app .appbar .product-switch a { min-height: 48px; } }   /* a finger on Android: 48dp */
html.lg .page-app .appbar .product-switch a:hover { background: rgba(255, 255, 255, 0.55); color: var(--ink); }
html.lg .page-app .appbar .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; }
/* moving between the two dashboards on the web: the lit product key slides to its place (/app/ opts in through family.css) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

/* ── the rooms' bar: a glass segmented capsule on a desk; a floating glass tab bar on a phone ── */
html.lg .page-app .roomtabs { padding: 5px; border: 0.5px solid var(--lg-edge); border-radius: 999px; 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 .page-app .roomtabs a { border-radius: 999px; transition: background-color 0.2s ease, color 0.2s ease; }
html.lg .page-app .roomtabs a:hover { background: rgba(255, 255, 255, 0.55); }
html.lg .page-app .roomtabs a[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); }
/* a desk (18.10.2026, «שיהיה זהה»): the bar of עונים לי בשיחות's /app/ key for key (maane glass.css .tabbar, from 900px):
   22px under the top, stuck 12px under it, the same keys, and the small yellow leaf under the room you are in */
@media (min-width: 900px) {
  html.lg { --roombar-h: 81px; }
  html.lg .page-app .roomnav { top: calc(var(--appbar-h) - 10px); margin-bottom: 22px; padding-block: 22px 12px; background: transparent; }
  html.lg .page-app .roomtabs { gap: 0; }
  html.lg .page-app .roomtabs a { padding: 8px 20px; line-height: 1.1; }
  html.lg .page-app .roomtabs a:hover:not([aria-current="page"]) { background: rgba(255, 255, 255, 0.6); }
  html.lg .page-app .roomtabs__ic { height: 26px; }
  html.lg .page-app .roomtabs a[aria-current="page"] .roomtabs__ic { width: 32px; border-radius: var(--lg-lens-leaf); background: var(--lg-lens); box-shadow: var(--lg-lens-shine); }
}
@media (max-width: 899.98px) {
  html.lg .page-app { --app-bottom-bar: calc(92px + env(safe-area-inset-bottom)); }
  html.lg.ios-native-tabs .page-app { --app-bottom-bar: env(safe-area-inset-bottom); }   /* the iPhone app's own bar holds its room (19.10.2026: 92 px twice was an empty band under every room) */
  html.lg .page-app .desk { padding-top: 26px; }   /* the title 26px under the top, as in עונים לי בשיחות (maane .room) */
  html.lg .page-app .roomnav { inset-inline: 14px; bottom: calc(12px + env(safe-area-inset-bottom)); padding: 0; background: transparent; border-top: 0; }
  html.lg .page-app .roomtabs { gap: 0; padding: 6px; }
  html.lg .page-app .roomtabs a { min-height: 56px; border-radius: 999px; font-size: 12.5px; }
  html.lg .page-app .roomtabs a:hover { background: none; }
  html.lg .page-app .roomtabs__ic { width: auto; height: 26px; border: 0; border-radius: 0; }
  html.lg .page-app .roomtabs a[aria-current="page"] { 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 .page-app .roomtabs a[aria-current="page"] .roomtabs__ic { width: 46px; height: 28px; border-radius: var(--lg-lens-leaf); background: var(--lg-lens); box-shadow: var(--lg-lens-shine); }
  /* the bottom softens under the floating bar as the top does */
  html.lg body.page-app::after { content: ""; position: fixed; z-index: 44; 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%); }
  html.lg body.page-app:has(#roomnav[hidden])::after { content: none; }
  html.lg .page-app .roomtabs a:active { transform: scale(0.96); }
  html.lg .page-app .roomtabs__n { box-shadow: 0 0 0 2px rgba(255, 253, 247, 0.9); }
}
/* the iPhone app (html.ios-app): the words that scroll under the floating tab bar showed through its labels; a denser
   tint there, the same glass (16.10.2026). Solid paper still wins below, where the glass gives way. */
html.lg.ios-app .page-app .roomtabs { background: rgba(255, 253, 247, 0.85); }

/* ── content: solid sheets on the paper, one radius, soft depth (no ink frame, no hard shadow) ── */
html.lg .page-app :is(.card, .home__today, .path, .gate__card, .decl, .start__draft, .noscript) { border: 0.5px solid rgba(27, 26, 23, 0.08); box-shadow: var(--lg-soft); }
html.lg .page-app .famcard { border-radius: var(--leaf); }
/* the stops' small keys and the chat preview in עונים לי בשיחות's material (18.10.2026; maane glass.css .stop__val, .call .voicebar):
   a soft white capsule for «+ להוסיף», the dial-yellow lens for «לא מחובר», a hairline instead of the ink frame on the preview */
html.lg .page-app .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 .page-app :is(.stop__val:is(.is-add, .is-more), .stop__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); }
html.lg .page-app :is(.preview-chat, .settings-example__body, #room-chats .settings-example__body) { border: 0.5px solid rgba(27, 26, 23, 0.12); border-radius: 18px; box-shadow: var(--lg-soft); }
html.lg .page-app .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 chat beside it draws it whole; the pictures need no plate, nor the layer that
   kept their multiply from the paper. The same in
   עונים לי בשיחות's glass.css (maane). */
@media (forced-colors: none) {
  html.lg { --road-line: rgba(27, 26, 23, 0.22); }
  html.lg .page-app .road::before { content: none; }
  html.lg .page-app :is(.road, .stops) .stop__pic { background: none; }
  html.lg .page-app :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 .page-app .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 .page-app .road > :not([hidden]) ~ .stop { --road-up: calc(50% - 36px); }
  html.lg .page-app .road > .stop:has(~ :not([hidden], :empty)) { --road-down: calc(50% - 36px); }
  html.lg .page-app .road > :not(.stop) { position: relative; }
  html.lg .page-app .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; }
}

/* ── 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 :is(.btn--wa, .btn--primary) { background: var(--lg-lens); box-shadow: var(--lg-lens-shine), var(--shadow-hard); }
html.lg :is(.btn--wa, .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 :is(.btn--wa, .btn--primary):active { transform: scale(0.97); box-shadow: var(--lg-lens-shine), 0 3px 8px rgba(214, 182, 0, 0.26); }
html.lg :is(.btn--secondary, .btn--paper, .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); }
/* the «נסו» key floats on the top's glass, so it is glass too */
html.lg .page-app .appbar .btn--secondary { min-width: 46px; min-height: 46px; -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); background: var(--lg-tint); }
html.lg :is(.btn--secondary, .btn--paper, .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 :is(.btn--secondary, .btn--paper, .btn--ghost, .btn--quiet):active { transform: scale(0.97); }
html.lg .btn--quiet { background: transparent; box-shadow: inset 0 0 0 0.5px rgba(27, 26, 23, 0.2); }
html.lg .btn--quiet:hover { background: rgba(255, 255, 255, 0.6); }
html.lg .btn--danger { background: rgba(255, 255, 255, 0.72); box-shadow: inset 0 0 0 1px rgba(179, 38, 30, 0.45); }
html.lg .btn--danger:hover { background: var(--err); color: #fff; }
html.lg :is(.btn:disabled, .btn[aria-disabled="true"]) { background: rgba(120, 120, 128, 0.12); box-shadow: none; filter: none; }
html.lg .chip { 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.16), 0 2px 8px rgba(27, 26, 23, 0.06); }
html.lg .chip:disabled { background: rgba(120, 120, 128, 0.1); box-shadow: inset 0 0 0 1px rgba(27, 26, 23, 0.12); }

/* ── fields ── (the ring 0.48: about 3.2:1 on white, WCAG 1.4.11; polish round 2, #24) */
html.lg :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]), select, textarea) {
  border: 0; border-radius: 14px; background-color: #fff; box-shadow: inset 0 0 0 1px rgba(27, 26, 23, 0.48), 0 1px 2px rgba(27, 26, 23, 0.04); }
html.lg :is(input, select, textarea):focus-visible { outline: 0; box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 0 4px rgba(255, 232, 26, 0.6); }
html.lg [aria-invalid="true"]:is(input, select, textarea) { box-shadow: inset 0 0 0 1.5px var(--err); }

/* ── switches: Apple's, in the dial's yellow ── */
html.lg .toggle__ui { padding-inline-start: 63px; }
html.lg .toggle__ui::before { width: 51px; height: 31px; margin-top: -15.5px; 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__ui::after { inset-inline-start: 2px; width: 27px; height: 27px; margin-top: -13.5px; 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: inset-inline-start 0.24s cubic-bezier(0.3, 1.3, 0.5, 1), width 0.18s ease; }
html.lg .toggle input:checked + .toggle__ui::before { background: #ffe81a; box-shadow: inset 0 0 0 1.5px rgba(27, 26, 23, 0.55); }
html.lg .toggle input:checked + .toggle__ui::after { inset-inline-start: 22px; }
html.lg .toggle input:active + .toggle__ui::after { width: 33px; }
html.lg .toggle input:checked:active + .toggle__ui::after { inset-inline-start: 16px; }
html.lg .toggle:hover input:not(:disabled) + .toggle__ui::before { box-shadow: inset 0 0 0 1.5px rgba(27, 26, 23, 0.55), 0 0 0 4px rgba(255, 232, 26, 0.35); }
html.lg .toggle input:disabled + .toggle__ui::before { border: 0; }

/* ── the sheet: glass that floats in from the bottom, inset from the edges ── */
html.lg .page-app .sheet__scrim { background: rgba(27, 26, 23, 0.26); }
html.lg .page-app .sheet__box { inset-inline: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); width: min(100% - 16px, 640px);
  max-height: calc(100% - 52px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow: hidden; overflow: clip;
  border: 0.5px solid var(--lg-edge); border-radius: 34px; background: #fffdf7;   /* solid paper (18.10.2026): a see-through box isolates its picture, whose multiply then drew a pale square around it */
  box-shadow: var(--lg-shine), 0 24px 60px rgba(27, 26, 23, 0.24); }
html.lg .page-app .sheet__close { border-radius: 50%; }
html.lg .page-app [data-settings-room] .sheet form[data-form] > .panel__foot { padding-bottom: 18px; }
html.lg .page-app [data-settings-room] .sheet form[data-form]:is([data-dirty="1"], [data-just-saved]) > .panel__foot { padding-bottom: 14px; background: rgba(255, 253, 247, 0.9); -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); }

/* 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; }
  html.lg.ios-app .page-app .roomtabs { background: var(--lg-tint); }
}
@media (prefers-reduced-transparency: reduce) {
  html.lg { --lg-tint: rgba(255, 253, 247, 0.97); --lg-tint-strong: #fffdf7; }
  html.lg.ios-app .page-app .roomtabs { background: var(--lg-tint); }
  html.lg .page-app .appbar::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--page); -webkit-mask-image: none; mask-image: none; }
}
@media (prefers-contrast: more) {
  html.lg .page-app :is(.appbar__brand, .appbar .product-switch, .roomtabs, .sheet__box, .card, .preview-chat, .settings-example__body, .btn--secondary, .btn--paper) { border: 1.5px solid var(--ink); }
  html.lg .toggle__ui::before { box-shadow: inset 0 0 0 2px var(--ink); }
  html.lg .toggle__ui::after { box-shadow: 0 0 0 1.5px var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
  html.lg :is(.btn, .roomtabs a, .toggle__ui::before, .toggle__ui::after) { transition: none; }
}
@media (forced-colors: active) {
  html.lg body.page-app::before { display: none; }
}