/* ─────────────────────────────────────────────────────────────
   עונים לי בלילה (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 family's own 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. Only /app/ loads this sheet (the
   marketing pages stay light); everything here waits for prefers-color-scheme: dark, so the day is untouched.
   The high-contrast choice of the accessibility panel (html.a11y-contrast) keeps its own black on white.
   The wa-bot dashboard (/bot/app/) carries the same night in its own night.css.
   ───────────────────────────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
  /* ── the family's tokens at night (DARK.md) ── */
  html:not(.a11y-contrast) {
    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;   /* inputs, the light fills under a value */
    --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;
    --wa-meta: #8696a0;
    --ok: #8fd8a6;
    --err: #ff9a8f;
    --shadow-hard: 3px 4px 0 rgba(246, 243, 236, 0.85);
    --card-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  }
  /* the glass at night: dark glass over the night, the same blur; soft depth in black */
  html.lg:not(.a11y-contrast) {
    --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);
    --card-shadow: var(--lg-soft);
    --road-line: rgba(246, 243, 236, 0.22);
  }
  html.lg.ios-app:not(.a11y-contrast) .tabbar { --lg-tint: rgba(var(--night-rgb), 0.9); }

  /* ── on the dial's yellow the words and the edges stay ink (DARK.md: never the night's ink) ── */
  html:not(.a11y-contrast) :is(.tabbar button[aria-current="page"] .tabbar__ic, .row[aria-expanded="true"] .row__ic,
    .bubble:not(.bubble--ghost) .bubble__pen, .linkbtn[aria-expanded="true"], .hear--round:not([aria-pressed="true"]),
    .seg input:checked + span, .callchips .chip[aria-pressed="true"], .reminder, .badge--urgent, .cal__bar.is-note, .weekstrip i.is-note, .daybar__open,
    .stop__val.is-warn, .stop__dot, .state.is-on .state__dot, .next__ic, .btn--primary, .tab:not(.sample__tab),
    .skip-link, #a11y-btn, #a11y-panel button:hover, .call .bubble--ai::after) {
    --ink: #1b1a17; --ink-2: #2b2925; --ink-soft: #57534a; color: #1b1a17;
  }
  html:not(.a11y-contrast) #a11y-btn { box-shadow: 2px 3px 0 rgba(246, 243, 236, 0.85); }
  html:not(.a11y-contrast) #a11y-btn:hover { --ink: #f6f3ec; color: #fbf6e8; }
  html:not(.a11y-contrast) ::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:not(.a11y-contrast) mark { color: #1b1a17; background: var(--yellow); border-radius: 3px; }
  html:not(.a11y-contrast) .bubble mark { color: #1b1a17; }
  /* the pressed chip is the cream pill (the day's ink pill turned over), its words ink */
  html:not(.a11y-contrast) .chip[aria-pressed="true"] { color: #1b1a17; }
  /* a day in the calendar: today is the cream disc, its number the night */
  html:not(.a11y-contrast) .cal__day.is-today { color: var(--page); }

  /* a quiet stretch in the calendar is the strong mark it is by day: the day's ink bar turns cream, its words the night */
  html:not(.a11y-contrast) :is(.cal__bar.is-off, .weekstrip i.is-off) { background: var(--ink); color: var(--page); }

  /* ── fills that were white paper ── */
  html:not(.a11y-contrast) :is(.cal__bar.is-part, .weekstrip i.is-part, .cpath__group span, .daybar__track, .codes) { background-color: var(--field-white); }
  html:not(.a11y-contrast) .sample { background: rgba(246, 243, 236, 0.04); }
  html:not(.a11y-contrast) .sample .chip:hover { background: rgba(246, 243, 236, 0.08); }
  html:not(.a11y-contrast) .gate__door { background: rgba(246, 243, 236, 0.06); }
  html:not(.a11y-contrast) .row:hover { background: rgba(var(--night-ivory-rgb), 0.6); }
  html:not(.a11y-contrast) .skeleton { background-image: linear-gradient(90deg, var(--ivory) 0%, #46464c 50%, var(--ivory) 100%); }
  html:not(.a11y-contrast) .help--warn { color: #f3c56f; }
  html:not(.a11y-contrast) :is(.editor :is(input, textarea, select), .gate input)::placeholder { color: #8c8a85; }
  /* the marks drawn in ink inside a field or a face turn cream */
  html:not(.a11y-contrast) :is(.filters select, .callrow select, #retention-reason) {
    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:not(.a11y-contrast) #retention-reason { background-color: var(--field-white); }
  html:not(.a11y-contrast) .call .bubble--caller::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='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.5' r='3.8'/%3E%3Cpath d='M4.5 20a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E");
  }
  /* the call: the assistant's lines are the band, the caller's a step nearer the night with a cream hairline, so the
     two voices stay apart as they do by day (dark band / ivory) */
  html:not(.a11y-contrast) .bubble--caller { background: var(--sheet); box-shadow: inset 0 0 0 1px rgba(246, 243, 236, 0.12); }
  /* Sumit's page is white paper in its frame: the words around it inside the frame stay ink */
  html:not(.a11y-contrast) .payframe { --ink: #1b1a17; --ink-2: #2b2925; --ink-soft: #57534a; color: #1b1a17; }

  /* ── 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/ (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:not(.a11y-contrast) :is(.stop__pic img, .famcard__pic, .sheet__pic, .giftpic, .gate__door img) { mix-blend-mode: normal; }
  html:not(.a11y-contrast) img[src*="/assets/app/road/clock.webp"] { content: url("/assets/app/road/night/clock.webp?v=895a57ed"); }
  html:not(.a11y-contrast) img[src*="/assets/app/road/contacts.webp"] { content: url("/assets/app/road/night/contacts.webp?v=ccde466d"); }
  html:not(.a11y-contrast) img[src*="/assets/app/road/cups.webp"] { content: url("/assets/app/road/night/cups.webp?v=afd3ef4d"); }
  html:not(.a11y-contrast) img[src*="/assets/app/road/horn.webp"] { content: url("/assets/app/road/night/horn.webp?v=8a1aad44"); }
  html:not(.a11y-contrast) img[src*="/assets/app/road/moon.webp"] { content: url("/assets/app/road/night/moon.webp?v=71d935a2"); }
  html:not(.a11y-contrast) img[src*="/assets/app/road/noentry.webp"] { content: url("/assets/app/road/night/noentry.webp?v=2755f616"); }
  html:not(.a11y-contrast) img[src*="/assets/app/road/plug.webp"] { content: url("/assets/app/road/night/plug.webp?v=6fa5c776"); }
  html:not(.a11y-contrast) img[src*="/assets/app/road/receipt.webp"] { content: url("/assets/app/road/night/receipt.webp?v=c8106e7a"); }
  html:not(.a11y-contrast) img[src*="/assets/app/road/ringing.webp"] { content: url("/assets/app/road/night/ringing.webp?v=e5287453"); }
  html:not(.a11y-contrast) img[src*="/assets/app/road/stopwatch.webp"] { content: url("/assets/app/road/night/stopwatch.webp?v=4730fa06"); }
  html:not(.a11y-contrast) img[src*="/assets/app/road/strainer.webp"] { content: url("/assets/app/road/night/strainer.webp?v=9e787f1a"); }
  html:not(.a11y-contrast) img[src*="/assets/app/road/tape.webp"] { content: url("/assets/app/road/night/tape.webp?v=6f709fc5"); }
  html:not(.a11y-contrast) img[src*="/assets/app/road/wa-calendar.webp"] { content: url("/assets/app/road/night/wa-calendar.webp?v=ba4e747d"); }
  html:not(.a11y-contrast) img[src*="/assets/app/road/wa-message.webp"] { content: url("/assets/app/road/night/wa-message.webp?v=b86f977c"); }
  html:not(.a11y-contrast) img[src*="/assets/app/road/wa-question.webp"] { content: url("/assets/app/road/night/wa-question.webp?v=4e19d02b"); }
  /* the dial mark drawn in ink: its cream twin (the yellow hole stays); on the opening too */
  html:not(.a11y-contrast) img[src="/assets/brand/logo-mark.svg"] { content: url("/assets/brand/logo-mark-night.svg"); }
  html:not(.a11y-contrast) .splash__mark [stroke="#131311"] { stroke: var(--ink); }

  /* ── the glass: what sat on the paper sits on the night ── */
  html.lg:not(.a11y-contrast) .onapp::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:not(.a11y-contrast) .app-top::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%); }
  html.lg:not(.a11y-contrast) .onapp::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%); }
  /* the product switch: the product you are in is the cream pill with ink words (the day's lit pill, turned over) */
  html.lg:not(.a11y-contrast) .app-top .product-switch a:hover { background: rgba(246, 243, 236, 0.08); }
  html.lg:not(.a11y-contrast) .app-top .product-switch a[aria-current] { background: #fbf6e8; color: #1b1a17; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); }
  /* the tab bar: the room you are in is a lighter step of the night, its yellow leaf unchanged */
  html.lg:not(.a11y-contrast) .tabbar button[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);
  }
  /* content: sheets one step above the night, a cream hairline for an edge, depth in black */
  html.lg:not(.a11y-contrast) .card { border-color: rgba(246, 243, 236, 0.1); }
  html.lg:not(.a11y-contrast) .card.slip--empty { border-color: var(--line-strong); }
  html.lg:not(.a11y-contrast) .next { background: rgba(var(--night-ivory-rgb), 0.85); box-shadow: inset 0 0 0 0.5px rgba(246, 243, 236, 0.08); }
  html.lg:not(.a11y-contrast) .editor { border-color: rgba(246, 243, 236, 0.12); }
  html.lg:not(.a11y-contrast) :is(.voicebar__avatar, .av, .ringtrack__you) { box-shadow: inset 0 0 0 1px rgba(246, 243, 236, 0.24), 0 1px 3px rgba(0, 0, 0, 0.3); }
  html.lg:not(.a11y-contrast) .voicebar { border-bottom-color: rgba(246, 243, 236, 0.12); }
  html.lg:not(.a11y-contrast) .call .voicebar { border-color: rgba(246, 243, 236, 0.12); }
  html.lg:not(.a11y-contrast) .rowlist { border-color: rgba(246, 243, 236, 0.1); }
  html.lg:not(.a11y-contrast) .road::before { background: var(--road-line); }
  /* keys: the clear glass keys are a lighter step of the night; the one action keeps the dial's yellow */
  html.lg:not(.a11y-contrast) .btn--ghost { 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:not(.a11y-contrast) .btn--ghost: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:not(.a11y-contrast) :is(.voicebar__edit, .hear, .chip, .callrow select, .filters select, .seg span, .stop__val:is(.is-add, .is-more)) {
    background-color: 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:not(.a11y-contrast) .seg input:checked + span { background: var(--lg-lens); box-shadow: var(--lg-lens-shine), 0 4px 12px rgba(214, 182, 0, 0.22); }
  html.lg:not(.a11y-contrast) .callchips .chip[aria-pressed="true"] { background: var(--lg-lens); box-shadow: var(--lg-lens-shine), 0 4px 12px rgba(214, 182, 0, 0.22); }
  html.lg:not(.a11y-contrast) .hear--round:not([aria-pressed="true"]) { background: var(--lg-lens); box-shadow: var(--lg-lens-shine), 0 4px 12px rgba(214, 182, 0, 0.22); }
  /* fields: a step below the card they sit on, a cream hairline */
  html.lg:not(.a11y-contrast) :is(.editor :is(input[type="text"], input[type="tel"], input[type="email"], input[type="url"], input[type="date"], input[type="time"], textarea, select), .copyfield input, .gate input) {
    background-color: var(--field-white); box-shadow: inset 0 0 0 1px rgba(246, 243, 236, 0.22), 0 1px 2px rgba(0, 0, 0, 0.2);
  }
  html.lg:not(.a11y-contrast) :is(.editor :is(input, textarea, select), .copyfield input, .gate input):focus-visible { box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 0 4px rgba(255, 232, 26, 0.6); }
  /* switches: Apple's at night, in the dial's yellow; a yellow track keeps its ink ring */
  html.lg:not(.a11y-contrast) .toggle input { background: rgba(120, 120, 128, 0.36); box-shadow: inset 0 0 0 1.5px rgba(246, 243, 236, 0.5); }
  html.lg:not(.a11y-contrast) .toggle input::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:not(.a11y-contrast) .toggle input:checked { background: #ffe81a; box-shadow: inset 0 0 0 1.5px rgba(27, 26, 23, 0.55); }
  html.lg:not(.a11y-contrast) .meter { background: rgba(120, 120, 128, 0.32); }
  /* the sheet rises out of the night: a darker scrim, the glass a step above the page */
  html.lg:not(.a11y-contrast) .sheet__scrim { background: rgba(0, 0, 0, 0.55); }
  html.lg:not(.a11y-contrast) .sheet__box { box-shadow: var(--lg-shine), 0 24px 60px rgba(0, 0, 0, 0.6); }
  html.lg:not(.a11y-contrast) .sheet .daybar__track { box-shadow: inset 0 0 0 1px rgba(246, 243, 236, 0.22); }
  /* the toast: a band-coloured glass capsule over the night */
  html.lg:not(.a11y-contrast) .toast { background: rgba(52, 52, 57, 0.92);
    box-shadow: inset 0 0 0 0.5px rgba(246, 243, 236, 0.16), inset 0 1px 0 rgba(246, 243, 236, 0.1), 0 12px 30px rgba(0, 0, 0, 0.5); }

  @media (min-width: 900px) {
    html.lg:not(.a11y-contrast) .tabbar button[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:not(.a11y-contrast) .tabbar button:hover:not([aria-current="page"]) { background: rgba(246, 243, 236, 0.08); }
  }
  /* 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:not(.a11y-contrast), html.lg.ios-app:not(.a11y-contrast) .tabbar { --lg-tint: rgba(var(--night-sheet-rgb), 0.97); --lg-tint-strong: var(--sheet); }
  }
  @media (prefers-reduced-transparency: reduce) {
    html.lg:not(.a11y-contrast), html.lg.ios-app:not(.a11y-contrast) .tabbar { --lg-tint: rgba(var(--night-sheet-rgb), 0.97); --lg-tint-strong: var(--sheet); }
    html.lg:not(.a11y-contrast) .app-top::before { background: var(--page); }
  }
  @media (prefers-contrast: more) {
    html.lg:not(.a11y-contrast) :is(.card, .btn--ghost) { border-color: var(--ink); }
  }
  /* «לא זמינים?»'s four keys (app.css «שקט»): dark glass, the chosen one the yellow lens with its ink word */
  html.lg:not(.a11y-contrast) .awayparts button { background-color: 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:not(.a11y-contrast) .awayparts button[aria-pressed="true"] { color: #1b1a17; background: var(--lg-lens); box-shadow: var(--lg-lens-shine), 0 4px 12px rgba(214, 182, 0, 0.22); }
}