/* ─────────────────────────────────────────────────────────────
   עונים לי בהודעות בלילה (18.10.2026): the dashboard when the phone is dark.
   Achiya, 16.10.2026, for the store apps: «תעשה גם מצב כהה, תעשה הכל שיהיה הכי נוח ופרימיום».
   The approved look at night, never iOS greys (~/maintenance/2026-10-16/onimli-ios-apple-native/DARK.md), the same
   night as עונים לי בשיחות's /app/ (maane site/assets/night.css), so the two dashboards stay one app: the family's
   band is the night, the dial yellow keeps its ink words and edges, ink lines turn cream, the cut-paper pictures lie
   on cream paper, the glass turns dark glass, and the drawn WhatsApp screens take WhatsApp's own dark colours.
   Only /bot/app/ loads this sheet (the public pages stay light); everything waits for prefers-color-scheme: dark,
   so the day is untouched.
   ───────────────────────────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
  /* ── the family's tokens at night (DARK.md) ── */
  :root {
    color-scheme: dark;
    /* the night's papers: graphite, not brown (Achiya, 18.10.2026: «צבע חום חשוף ולא פרמיום»), and still not so dark that it feels gloomy */
    --night-rgb: 32, 32, 35;
    --night-sheet-rgb: 44, 44, 48;
    --night-ivory-rgb: 56, 56, 61;
    --page: rgb(var(--night-rgb));
    --sheet: rgb(var(--night-sheet-rgb));
    --ivory: rgb(var(--night-ivory-rgb));
    --field-white: #27272b;
    --ink: #f6f3ec;
    --ink-2: #e4e1da;
    --ink-soft: #a9a7a2;
    --hair: rgba(246, 243, 236, 0.14);
    --line-strong: rgba(246, 243, 236, 0.34);
    --band: var(--ivory);     /* one step lighter than the page, so a band still reads as a band */
    --band-2: #424248;
    --on-band: #f6f3ec;
    --on-band-2: #c9c6bf;
    --achiya: #c8b6f0;
    --placeholder: #8c8a85;
    --ok: #8fd8a6;
    --err: #ff9a8f;
    --err-band: #7a2219;
    --warn-text: #f3c56f;
    --shadow-hard: 3px 4px 0 rgba(246, 243, 236, 0.85);
    --shadow-key-sm: 2px 3px 0 rgba(246, 243, 236, 0.85);
    --card-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
    /* WhatsApp's own night, only inside a drawn WhatsApp screen */
    --wa-wall: #0b141a;
    --wa-mine: #005c4b;
    --wa-bar: #202c33;
    --wa-teal: #00a884;
    --wa-chip: #103629;
    --wa-chip-ink: #d9fdd3;
    --wa-meta: #8696a0;
  }
  /* the glass at night: dark glass over the night, the same blur; soft depth in black */
  html.lg {
    --lg-tint: rgba(var(--night-rgb), 0.85);
    --lg-tint-strong: rgba(var(--night-sheet-rgb), 0.97);
    --lg-edge: rgba(246, 243, 236, 0.12);
    --lg-shine: inset 0 1px 0 rgba(246, 243, 236, 0.1), inset 0 0 0 1px rgba(246, 243, 236, 0.04);
    --lg-lift: 0 10px 30px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
    --lg-soft: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 28px rgba(0, 0, 0, 0.4);
    --shadow-hard: 0 6px 18px rgba(214, 182, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-key-sm: 0 3px 10px rgba(0, 0, 0, 0.4);
    --card-shadow: var(--lg-soft);
    --road-line: rgba(246, 243, 236, 0.22);
  }

  /* ── on the dial's yellow the words and the edges stay ink (DARK.md: never the night's ink) ── */
  html :is(.skip, .btn--primary:not(:disabled, [aria-disabled="true"]), .btn--wa:not(:disabled, [aria-disabled="true"]), .choice:has(input:checked),
    .tab[aria-selected="true"], .pill--ok::before, .flash::before, .journey li.is-now .journey__ic,
    .page-app :is(.roomtabs a[aria-current="page"] .roomtabs__ic, .status[data-on="true"] .status__dot, .tipline, .oschoice__opt input:checked + span,
      .dayplan__now span, .ready__dot.is-ok, .ready__item[data-state="ok"] .ready__ic, .stop__val.is-warn, .stop__dot, .catalog-now__line[data-state="on"]::before,
      .voices__who--you, .voices__dash > i, .media-tile__icon, .is-dragging, .media-picker__upload:hover, .contacts__file:hover, .inq-pill[data-tone="new"]::before,
      .inq-card .msg--you),
    #room-chats .queue__filter select[data-on="1"], :is(#room-calendar, #room-plan, #room-chats, #inq-sheet) .stateline[data-tone="on"]::before,
    #room-calendar .appt-day.is-today .appt-day__head, #room-plan .period__opt input:checked + span, #room-plan .plan-card.is-current .plan-card__tag,
    #room-account .acct-state.is-on::before, #room-account .crm-line[data-state="on"]::before) {
    --ink: #1b1a17; --ink-2: #2b2925; --ink-soft: #57534a; color: #1b1a17;
    --sheet: #fffdf7; --field-white: #ffffff;   /* what sits on the yellow (a count, a field) keeps the day's paper */
  }
  html ::selection { color: #1b1a17; }
  /* the owner's own words: the marker covers the whole line at night, so its ink words sit on yellow alone */
  html :is(mark, .save-ink__word, .page-app :is(.next__title .write__ink, .inq-card__marked, .voices__word, .settings-example__answer mark, .tell mark, .site-news__diff mark),
    #room-chats .settings-example__answer mark, #room-chats .chats-who .save-ink__word) {
    color: #1b1a17; background: var(--yellow); border-radius: 3px;
  }
  html .page-app .settings-example__key::before { background: var(--yellow); border-radius: 3px; }
  /* an ink disc turns cream at night: what it holds (a count, a tick) turns the night */
  html .page-app :is(.roomtabs__n, .learn__count) { color: var(--page); }
  html .page-app .sg-key { color: var(--page); }
  html .journey li.is-done .journey__ic, html #room-account .acct-sign__text::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f1d19' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  }
  html .page-app .decl__list li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f1d19' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  }
  html .page-app .inq-pill[data-tone="done"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f1d19' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E");
  }
  html #f-interactive .message-type-picker > button:has(> small.is-on)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f1d19' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  }
  /* marks drawn in ink inside a field, a list or a key turn cream */
  html select, html #room-chats .queue__filter select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbf6e8' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  }
  html #room-chats .queue__filter select[data-on="1"] {
    background-image: 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");
  }
  html #room-chats #inbox-q {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbf6e8' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4.2-4.2'/%3E%3C/svg%3E");
  }
  html #room-plan .plan-card__list li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbf6e8' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.2 4.2L19 7'/%3E%3C/svg%3E");
  }
  html #room-account .crm-event__open {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbf6e8' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  }
  html #room-account .crm-event__open[aria-expanded="true"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbf6e8' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 15 6-6 6 6'/%3E%3C/svg%3E");
  }
  html #f-interactive .message-type-picker > button:has(> small.is-locked)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a49b86' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2.5'/%3E%3Cpath d='M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5'/%3E%3C/svg%3E");
  }

  /* ── fills that were white paper or ink shadows ── */
  html dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
  html .modal, html .page-app :is(.media-picker, .editor-live-preview) { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); }
  html .drawer__screen { box-shadow: 0 0 60px rgba(0, 0, 0, 0.6); }
  html .btn--danger:hover { color: #1b1a17; }
  /* the agreement's own page and the QR stay white paper in their frames: their words stay ink */
  html .page-app .privacy-document__wait { color: #57534a; }
  /* the voice slider's knob is a key on the night: its hard shadow turns cream */
  html .page-app .voices input[type="range"]::-webkit-slider-thumb { box-shadow: 2px 3px 0 rgba(246, 243, 236, 0.85); }
  html .page-app .voices input[type="range"]::-moz-range-thumb { box-shadow: 2px 3px 0 rgba(246, 243, 236, 0.85); }
  html .page-app .voices input[type="range"]:hover::-webkit-slider-thumb { box-shadow: 3px 4px 0 rgba(246, 243, 236, 0.85); }
  html .page-app .voices input[type="range"]:active::-webkit-slider-thumb { box-shadow: 1px 1px 0 rgba(246, 243, 236, 0.85); }
  html .page-app form[data-form]:not([data-dirty="1"]) > .panel__foot > [type="submit"]:not(:disabled) { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); }
  html .page-app form[data-form]:not([data-dirty="1"]) > .panel__foot > [type="submit"]:not(:disabled):hover { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.36); }
  html .page-app [data-settings-room] form[data-form]:is([data-dirty="1"], [data-just-saved]) > .panel__foot { box-shadow: 0 -14px 26px -16px rgba(0, 0, 0, 0.6); }

  /* ── the drawn WhatsApp screens in WhatsApp's own night (DARK.md: the borrowed screen rule) ── */
  html :is(.bubble, .tc-product, .vp-bubble, .vp-list-row, .page-app .settings-example__question, .page-app .settings-example__answer,
    #room-chats .settings-example__question, #room-chats .settings-example__answer, .page-app #f-style .choice small) { color: #e9edef; }
  html :is(.bubble, .qr-btn, .tc-card, .tc-media, .tc-product, .vp-bubble, .vp-action, .vp-card, .page-app .settings-example__answer,
    #room-chats .settings-example__answer, .page-app .learn__typing, .page-app .learn__btns > span, .page-app #f-style .choice small) { background-color: #202c33; }
  html :is(.bubble, .qr-btn, .tc-product, .vp-bubble, .page-app .settings-example__question, .page-app .settings-example__answer,
    #room-chats .settings-example__question, #room-chats .settings-example__answer, .page-app .learn__typing, .page-app .learn__btns > span, .page-app #f-style .choice small) {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  }
  html :is(.bubble--mine, .vp-bubble--mine) { background-color: var(--wa-mine); }
  html .bubble--mine :is(time, .bubble__meta) { color: #a5c9c2; }
  html .bubble--note { color: #ffd279; background-color: #182229; }
  html .bubble__action { border-top-color: #313d45; }
  html :is(button.bubble__action, .qr-btn, .vp-action, .vp-list-row):hover { background-color: #2a3942; }
  html .tc-bar__who small, html .page-app .preview-chat__head small { color: #8696a0; }
  html .tc-form, html .page-app .preview-chat__compose { background: #202c33; }
  html.lg .tc-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { color: #e9edef; background-color: #2a3942; box-shadow: none; }
  html .page-app .preview-chat__compose > span { color: #8696a0; background: #2a3942; }
  html .phone__avatar, html .page-app .preview-chat__head .phone__avatar { color: #e9edef; background: #2a3942; }
  html .wa-sheet { background: #233138; box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.4); }
  /* «#tc-msgs … button» matches the weight of the .qr-btn rule above (its :is() holds «#f-style .choice small»), which would paint them as plain bubbles */
  html #tc-msgs :is(button.wa-pill, .wa-sheet__hours button.qr-btn) { color: #e9edef; background-color: #233138; box-shadow: inset 0 0 0 1px #3b4a54; }
  html #tc-msgs :is(button.wa-pill:not([aria-pressed="true"]), .wa-sheet__hours button.qr-btn):hover { background-color: #2a3942; }
  html #tc-msgs button.wa-pill[aria-pressed="true"] { color: #111b21; background-color: #00a884; box-shadow: none; }
  html .wa-sheet__day { color: #00a884; }
  html .wa-row { border-bottom-color: #2a3942; }
  html .wa-row[aria-pressed="true"]::after { box-shadow: inset 0 0 0 3px #233138; }
  html :is(.tc-card, .tc-media, .vp-card) { border-color: #313d45; }
  html :is(.tc-document, .vp-document) { color: #e9edef; background: #2a3942; border-color: #313d45; }
  html :is(.vp-time, .vp-document small) { color: #8696a0; }
  html .tc-product img { background: #2a3942; }
  html .vp-action { color: #53bdeb; border-top-color: #313d45; }
  html .vp-scroll-hint { color: #8696a0; }
  html .vp-upload { background: #2a3942; border-bottom-color: #313d45; }
  html .vp-upload__label { background: rgba(var(--night-sheet-rgb), 0.94); }
  html .vp-list-sheet { background: #233138; border-color: #313d45; }
  html .vp-list-row { background: #233138; border-top-color: #313d45; }
  html .vp-map { border-color: #313d45;
    background: repeating-linear-gradient(35deg, transparent 0 48px, #2a3942 49px 59px, transparent 60px 100px), repeating-linear-gradient(-35deg, #18241f 0 57px, #2a3942 58px 68px, #16211c 69px 110px); }
  html .vp-map > span:last-child { background: #202c33; }

  /* ── the cut-paper pictures at night (18.10.2026, Achiya: they must not look cut out as boxes): each has its night
     twin in road/night/ (maane design/really-visual/night-paper.py), a transparent WebP: the black paper turned cream
     paper (the night's rule: ink turns cream), its white details the night, the yellow as it is, and no page around
     it, so it lies on the night as the day picture lies on the paper. Multiply has nothing to multiply into at night. ── */
  html .page-app :is(.stop__pic img, .famcard__pic img, .sheet__pic) { mix-blend-mode: normal; }
  html img[src*="/bot/assets/img/road/billing.webp"] { content: url("/bot/assets/img/road/night/billing.webp?v=6ab7f1a1"); }
  html img[src*="/bot/assets/img/road/button.webp"] { content: url("/bot/assets/img/road/night/button.webp?v=a3196c7f"); }
  html img[src*="/bot/assets/img/road/calendar-x.webp"] { content: url("/bot/assets/img/road/night/calendar-x.webp?v=f731343f"); }
  html img[src*="/bot/assets/img/road/calendar.webp"] { content: url("/bot/assets/img/road/night/calendar.webp?v=ba4e747d"); }
  html img[src*="/bot/assets/img/road/clock.webp"] { content: url("/bot/assets/img/road/night/clock.webp?v=895a57ed"); }
  html img[src*="/bot/assets/img/road/contacts.webp"] { content: url("/bot/assets/img/road/night/contacts.webp?v=4f04ec7d"); }
  html img[src*="/bot/assets/img/road/crm.webp"] { content: url("/bot/assets/img/road/night/crm.webp?v=a308d88f"); }
  html img[src*="/bot/assets/img/road/envelope.webp"] { content: url("/bot/assets/img/road/night/envelope.webp?v=e29e4a02"); }
  html img[src*="/bot/assets/img/road/hourglass.webp"] { content: url("/bot/assets/img/road/night/hourglass.webp?v=48e98ffc"); }
  html img[src*="/bot/assets/img/road/labels.webp"] { content: url("/bot/assets/img/road/night/labels.webp?v=3ad3dd99"); }
  html img[src*="/bot/assets/img/road/list.webp"] { content: url("/bot/assets/img/road/night/list.webp?v=c9e6dc9f"); }
  html img[src*="/bot/assets/img/road/message.webp"] { content: url("/bot/assets/img/road/night/message.webp?v=b86f977c"); }
  html img[src*="/bot/assets/img/road/path.webp"] { content: url("/bot/assets/img/road/night/path.webp?v=8b99f20e"); }
  html img[src*="/bot/assets/img/road/pen.webp"] { content: url("/bot/assets/img/road/night/pen.webp?v=b931d774"); }
  html img[src*="/bot/assets/img/road/phone-ringing.webp"] { content: url("/bot/assets/img/road/night/phone-ringing.webp?v=e5287453"); }
  html img[src*="/bot/assets/img/road/phone-strainer.webp"] { content: url("/bot/assets/img/road/night/phone-strainer.webp?v=9e787f1a"); }
  html img[src*="/bot/assets/img/road/policy.webp"] { content: url("/bot/assets/img/road/night/policy.webp?v=862623f6"); }
  html img[src*="/bot/assets/img/road/question.webp"] { content: url("/bot/assets/img/road/night/question.webp?v=4e19d02b"); }
  html img[src*="/bot/assets/img/road/receipt.webp"] { content: url("/bot/assets/img/road/night/receipt.webp?v=c8106e7a"); }
  html img[src*="/bot/assets/img/road/shop.webp"] { content: url("/bot/assets/img/road/night/shop.webp?v=acfbdd22"); }
  html img[src*="/bot/assets/img/road/tag.webp"] { content: url("/bot/assets/img/road/night/tag.webp?v=c4bd0344"); }
  html img[src*="/bot/assets/img/road/try.webp"] { content: url("/bot/assets/img/road/night/try.webp?v=e443e138"); }
  /* the dial mark drawn in ink: its cream twin (the yellow hole stays) */
  html img[src="/bot/assets/img/logo-mark.svg"] { content: url("/bot/assets/img/logo-mark-night.svg"); }
  /* the opening's mark drawn in cream, as the night's logo (its yellow hole stays) */
  html .splash__mark [stroke="#131311"] { stroke: var(--ink); }
  /* the sign-in's row of keys at night (22.10.2026): Apple in Apple's night colours, white with a black mark; «מייל»
     chosen keeps the dial's yellow with ink words */
  html .page-app .gate__keys .btn--apple { --btn-bg: #fff; background: #fff; color: #000; border-color: #fff; }
  html.lg .page-app .gate__keys #mailin-open[aria-expanded="true"], html .page-app .gate__keys #mailin-open[aria-expanded="true"] { background: var(--yellow); color: #1b1a17; }

  /* ── the glass: what sat on the paper sits on the night ── */
  html.lg body.page-app::before {
    background: radial-gradient(110% 55% at 100% -5%, rgba(255, 232, 26, 0.13) 0%, rgba(255, 232, 26, 0) 60%),
                radial-gradient(90% 45% at -10% 105%, rgba(var(--night-ivory-rgb), 0.75) 0%, rgba(var(--night-ivory-rgb), 0) 65%), var(--page);
  }
  html.lg .page-app .appbar::before { background: linear-gradient(180deg, rgba(var(--night-rgb), 0.92) 0%, rgba(var(--night-rgb), 0.7) 55%, rgba(var(--night-rgb), 0) 100%); }
  /* the product switch: the product you are in is the cream pill with ink words (the day's lit pill, turned over) */
  html.lg .page-app .appbar .product-switch a:hover { background: rgba(246, 243, 236, 0.08); }
  html.lg .page-app .appbar .product-switch a[aria-current] { background: #fbf6e8; color: #1b1a17; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); }
  /* the rooms' bar: the room you are in is a lighter step of the night, its yellow leaf unchanged */
  html.lg .page-app .roomtabs a:hover { background: rgba(246, 243, 236, 0.08); }
  html.lg .page-app .roomtabs a[aria-current="page"] {
    background: rgba(246, 243, 236, 0.14); box-shadow: inset 0 1px 0 rgba(246, 243, 236, 0.1), 0 0 0 0.5px rgba(246, 243, 236, 0.12), 0 3px 10px rgba(0, 0, 0, 0.35);
  }
  html.lg.ios-app .page-app .roomtabs { background: rgba(var(--night-rgb), 0.9); }
  /* content: sheets one step above the night, a cream hairline for an edge, depth in black */
  html.lg .page-app :is(.card, .home__today, .path, .gate__card, .decl, .start__draft, .noscript) { border-color: rgba(246, 243, 236, 0.1); }
  html.lg .page-app :is(.preview-chat, .settings-example__body, #room-chats .settings-example__body) { border-color: rgba(246, 243, 236, 0.12); }
  html.lg .page-app .road::before { background: var(--road-line); }
  html.lg .page-app :is(.stop__val:is(.is-add, .is-more), .stop__more) {
    background: rgba(246, 243, 236, 0.08); box-shadow: inset 0 0 0 0.5px rgba(246, 243, 236, 0.22), 0 1px 3px rgba(0, 0, 0, 0.25);
  }
  /* keys: the clear glass keys are a lighter step of the night; the one action keeps the dial's yellow */
  html.lg :is(.btn--secondary, .btn--paper, .btn--ghost, .btn--google) { background: rgba(246, 243, 236, 0.08);
    box-shadow: inset 0 1px 0 rgba(246, 243, 236, 0.06), 0 0 0 0.5px rgba(246, 243, 236, 0.22), 0 4px 14px rgba(0, 0, 0, 0.3); }
  html.lg :is(.btn--secondary, .btn--paper, .btn--ghost, .btn--google):hover {
    box-shadow: inset 0 1px 0 rgba(246, 243, 236, 0.08), 0 0 0 0.5px rgba(246, 243, 236, 0.3), 0 6px 18px rgba(0, 0, 0, 0.36); }
  html.lg .page-app .appbar .btn--secondary { background: var(--lg-tint); }
  html.lg .btn--quiet { box-shadow: inset 0 0 0 0.5px rgba(246, 243, 236, 0.24); }
  html.lg .btn--quiet:hover { background: rgba(246, 243, 236, 0.08); }
  html.lg .btn--danger { background: rgba(246, 243, 236, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 154, 143, 0.5); }
  html.lg .btn--danger:hover { background: var(--err); }
  html.lg :is(.btn:disabled, .btn[aria-disabled="true"]) { background: rgba(120, 120, 128, 0.2); }
  html.lg .chip { background: rgba(246, 243, 236, 0.08); box-shadow: inset 0 0 0 0.5px rgba(246, 243, 236, 0.22), 0 2px 8px rgba(0, 0, 0, 0.25); }
  html.lg .chip:disabled { background: rgba(120, 120, 128, 0.16); box-shadow: inset 0 0 0 1px rgba(246, 243, 236, 0.12); }
  /* fields: a step below the card they sit on, a cream hairline */
  html.lg :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]), select, textarea) {
    background-color: var(--field-white); box-shadow: inset 0 0 0 1px rgba(246, 243, 236, 0.45), 0 1px 2px rgba(0, 0, 0, 0.2);
  }
  html.lg :is(input, select, textarea):focus-visible { 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 at night, in the dial's yellow; a yellow track keeps its ink ring */
  html.lg .toggle__ui::before { background: rgba(120, 120, 128, 0.36); box-shadow: inset 0 0 0 1.5px rgba(246, 243, 236, 0.5); }
  html.lg .toggle__ui::after { background: #fbf6e8; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.3); }
  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:hover input:not(:disabled) + .toggle__ui::before { box-shadow: inset 0 0 0 1.5px rgba(246, 243, 236, 0.5), 0 0 0 4px rgba(255, 232, 26, 0.3); }
  html.lg .toggle:hover input:checked: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.3); }
  /* the sheet rises out of the night: a darker scrim, solid night paper */
  html.lg .page-app .sheet__scrim { background: rgba(0, 0, 0, 0.55); }
  html.lg .page-app .sheet__box { background: var(--sheet); box-shadow: var(--lg-shine), 0 24px 60px rgba(0, 0, 0, 0.6); }
  html.lg .page-app [data-settings-room] .sheet form[data-form]:is([data-dirty="1"], [data-just-saved]) > .panel__foot { background: rgba(var(--night-sheet-rgb), 0.92); }

  @media (min-width: 900px) {
    html.lg .page-app .roomtabs a:hover:not([aria-current="page"]) { background: rgba(246, 243, 236, 0.08); }
  }
  @media (max-width: 899.98px) {
    html.lg .page-app .roomtabs a:hover { background: none; }
    html.lg .page-app .roomtabs a[aria-current="page"] {
      background: rgba(246, 243, 236, 0.14); box-shadow: inset 0 1px 0 rgba(246, 243, 236, 0.1), 0 0 0 0.5px rgba(246, 243, 236, 0.12), 0 3px 10px rgba(0, 0, 0, 0.35);
    }
    html.lg body.page-app::after { background: linear-gradient(0deg, rgba(var(--night-rgb), 0.92) 0%, rgba(var(--night-rgb), 0.55) 55%, rgba(var(--night-rgb), 0) 100%); }
    html.lg .page-app .roomtabs__n { box-shadow: 0 0 0 2px rgba(var(--night-sheet-rgb), 0.9); }
  }
  /* no glass where it cannot be drawn, or for whoever asked for less transparency: solid night paper */
  @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    html.lg { --lg-tint: rgba(var(--night-sheet-rgb), 0.97); --lg-tint-strong: var(--sheet); }
    html.lg.ios-app .page-app .roomtabs { background: var(--lg-tint); }
  }
  @media (prefers-reduced-transparency: reduce) {
    html.lg { --lg-tint: rgba(var(--night-sheet-rgb), 0.97); --lg-tint-strong: var(--sheet); }
    html.lg.ios-app .page-app .roomtabs { background: var(--lg-tint); }
    html.lg .page-app .appbar::before { background: var(--page); }
  }
  @media (prefers-contrast: more) {
    html.lg .page-app :is(.card, .preview-chat, .settings-example__body) { border-color: var(--ink); }
  }
}