/* ─────────────────────────────────────────────────────────────
   עונים לי בוואטסאפ — the dashboard's daily rooms: צ׳אטים (#room-chats), תורים (#room-calendar), מסלול (#room-plan),
   חשבון (#room-account), and one inquiry on a phone (dialog#inq-sheet). Loads after app.css: family.css holds the tokens
   and the key, ui.css the controls (chips, pills, the switch, the ledger, the text buttons), app.css the room head, .card,
   .group__title, .empty and the drawer. Every rule here is scoped to one of those ids.

   The family idioms, the way onimli's own customer area uses them: a state line with one dot; cards with leaf corners;
   grouped rows split by hairlines; a yellow tab on a card's top edge; the meter filling in yellow; a dashed outline for
   what is not real yet (a sample, a draft, a payment that waits); calm notices on ivory.

   Signatures
   - צ׳אטים (מרכז הפניות): the room's own row, kept and set as a work queue: chips that count and filter (מחכות לכם ·
     חדשות · טופלו · הכל), the lines in one card grouped by day (a ringed initial, who, what they asked, where it stands as
     the family's pill: a dashed ring while it waits for you, red after 4 hours, the yellow dot when new, an ink disc with
     a tick when handled); the open inquiry in a card beside them (in a sheet on phones): the customer's words on paper,
     its keys, the bot's switch, and the chat in the family's three voices.
   - תורים: a card per day with the day on its tab (today's tab is the yellow one), the time printed big at the start of
     each line; a cancelled line struck through with «בוטל».
   - מסלול: the subscription's state line, the month's meter filling in yellow, the plan cards with your plan's yellow tab.
   - חשבון: the owner's card (onimli's business card: an initial tile, the name, the business) and the signed privacy
     agreement as a stamp.
   ───────────────────────────────────────────────────────────── */

/* ---------- 0. shared by these rooms ---------- */

/* the state line: one dot, one sentence. on = the live yellow dot · wait = a dashed ring (not real yet) · bad = a red ring
   · off = a plain ring */
:is(#room-calendar, #room-plan, #room-chats, #inq-sheet) .stateline { display: flex; align-items: flex-start; gap: 10px; margin: 0; color: var(--ink); font: 18px/1.45 var(--f-ui); }
:is(#room-calendar, #room-plan, #room-chats, #inq-sheet) .stateline::before { width: 14px; height: 14px; flex: none; margin-top: calc((1.45em - 14px) / 2); content: ""; border: 2px solid var(--ink); border-radius: 50%; }
:is(#room-calendar, #room-plan, #room-chats, #inq-sheet) .stateline[data-tone="on"]::before { background: var(--yellow); box-shadow: 0 0 0 3px rgba(255, 232, 26, 0.4); }
:is(#room-calendar, #room-plan, #room-chats, #inq-sheet) .stateline[data-tone="wait"] { color: var(--ink-2); }
:is(#room-calendar, #room-plan, #room-chats, #inq-sheet) .stateline[data-tone="wait"]::before { border-style: dashed; }
:is(#room-calendar, #room-plan, #room-chats, #inq-sheet) .stateline[data-tone="bad"] { color: var(--err); }
:is(#room-calendar, #room-plan, #room-chats, #inq-sheet) .stateline[data-tone="bad"]::before { border-color: var(--err); }
:is(#room-calendar, #room-plan, #room-chats, #inq-sheet) .stateline[data-tone="off"]::before { border-color: var(--line-strong); }
:is(#room-calendar, #room-plan, #room-chats, #inq-sheet) .stateline:empty { display: none; }

/* a sample: a dashed outline and the tag «דוגמה» */
:is(#room-chats, #room-calendar) .sample { display: grid; gap: 12px; margin: 0; }
:is(#room-chats, #room-calendar) .sample figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--ink-2); font: 16px/1.4 var(--f-ui); }
:is(#room-chats, #room-calendar) .tag { display: inline-flex; min-height: 28px; align-items: center; padding: 2px 11px; color: var(--ink); background: var(--sheet); border: 1.5px dashed var(--ink); border-radius: 999px; font: 14px/1.2 var(--f-ui); }

/* ---------- 1. צ׳אטים: מרכז הפניות ---------- */
/* The room's own look, kept: the family's cards with an ink edge, the chips, the ringed initials, the pills and the
   switch. Set as a work queue: the chips count and filter what waits for you, a search and three filters narrow it, the
   lines sit in one card grouped by day (like onimli's calls log), and the open inquiry stands in a card beside them (in a
   sheet on a phone). From 1100px the two cards fit the screen under the title and scroll on their own, so the page never
   grows with the chats. */
#room-chats { --desk-h: clamp(480px, calc(100dvh - var(--appbar-h) - var(--roombar-h) - 170px), 980px); }   /* 170px: the band's end, the title, its line and a margin */
#room-chats[data-view="locked"] .chats-lede { display: none; }
#room-chats .chats-lede__go { display: inline; min-height: 0; padding: 6px 0; margin-block: -6px; font-size: inherit; }
@media (min-width: 1100px) { #room-chats .room__head { margin-bottom: 24px; } }
#room-chats .queue { display: grid; min-width: 0; gap: 16px 28px; }
#room-chats .queue__list { display: flex; min-width: 0; flex-direction: column; }
#room-chats .queue__pane { display: none; }

/* the head: the chips that count and filter (as the room's own filters were), then the search and three filters; from
   1100px one row over both cards */
#room-chats .queue__head { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
#room-chats .qtab { gap: 8px; }
#room-chats .qtab__n { display: inline-grid; min-width: 24px; height: 24px; place-items: center; padding: 0 7px; color: var(--ink-2); background: var(--ivory); border-radius: 999px; font: 13.5px/1 var(--f-ui); font-variant-numeric: tabular-nums lining-nums; }
#room-chats .qtab__n:empty::before { content: "·"; }   /* before the first list: no zeros that are not true yet */
#room-chats .qtab[aria-pressed="true"] .qtab__n { background: var(--sheet); }
/* what waits for you counts in an ink disc, as on the «צ׳אטים» key; red once one waits more than 4 hours */
#room-chats .qtab[data-queue="waiting"][data-some="1"] .qtab__n { color: var(--on-band); background: var(--ink); }
#room-chats .qtab[data-queue="waiting"][data-late="1"] .qtab__n { color: #fff; background: var(--err); }
#room-chats .queue__tools { display: flex; min-width: 0; flex: 1 1 100%; flex-wrap: wrap; align-items: center; gap: 10px; }
#room-chats .queue__search { min-width: 0; flex: 1 1 18rem; }
#room-chats #inbox-q { min-height: 48px; padding-block: 10px; padding-inline-start: 46px; background: var(--field-white) 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.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") no-repeat right 15px center / 20px; -webkit-appearance: none; appearance: none; }
/* the filters are chips that open a list: they name what they filter, and turn yellow (like a pressed chip) while on */
#room-chats .queue__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#room-chats .queue__filter select { width: auto; field-sizing: content; min-height: 44px; padding: 6px 14px; padding-inline-end: 34px; color: var(--ink); background: var(--field-white) 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 12px center / 14px; border: 1.5px solid var(--ink); border-radius: 999px; font: 15px/1.2 var(--f-ui); cursor: pointer; }
#room-chats .queue__filter select:hover { background-color: var(--ivory); }
#room-chats .queue__filter select[data-on="1"] { background-color: var(--yellow); box-shadow: var(--shadow-key-sm); }
#room-chats .queue__filter select:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: none; }
@media (max-width: 1099.98px) { #room-chats .queue__filter select { font-size: 16px; } }   /* 16px: no zoom on focus on an iPhone */

/* the lines: one card, grouped by day; from 1100px it fills the column and scrolls on its own, the day on top */
#room-chats .queue__box { min-width: 0; overflow: hidden; background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--leaf-sm); box-shadow: var(--card-shadow); }
#room-chats .qlines { margin: 0; padding: 0; list-style: none; }
#room-chats .qlines > li + li { border-top: 1px solid var(--hair); }
#room-chats .qday { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 16px 8px; background: var(--sheet); }
#room-chats .qlines > .qday + li { border-top: 0; }
#room-chats .qday__label { font: 16px/1.3 var(--f-ui); }
#room-chats .qday__count { color: var(--ink-soft); font-size: 14.5px; white-space: nowrap; }
#room-chats .queue__loading { padding: 16px; }

/* a line, the room's own row: the ringed initial, who and when, what they asked (two lines at most), then where it stands
   as the family's pill, the service, and who answers when it is not the bot. The open line is ivory, the world's open
   record, and its ring turns ink */
#room-chats .qline { display: grid; width: 100%; grid-template-columns: 42px minmax(0, 1fr); align-items: start; gap: 0 12px; padding: 12px 16px 14px; color: inherit; background: none; border: 0; font: inherit; text-align: start; }
#room-chats button.qline { cursor: pointer; }
#room-chats button.qline:hover { background: color-mix(in srgb, var(--ivory) 45%, var(--sheet)); }
#room-chats button.qline:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
#room-chats .qline[aria-current="true"] { background: var(--ivory); }
.page-app :is(#room-chats, .inq-card) .qline__av { display: grid; width: 42px; height: 42px; place-items: center; color: var(--ink); background: var(--ivory); border: 1.5px solid var(--line-strong); border-radius: 50%; font: 20px/1 var(--f-display); }
#room-chats .qline[aria-current="true"] .qline__av { background: var(--sheet); border: 2px solid var(--ink); }
#room-chats .qline__main { display: grid; min-width: 0; gap: 3px; }
#room-chats .qline__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
#room-chats .qline__name { min-width: 0; overflow: hidden; font: 17px/1.35 var(--f-ui); text-overflow: ellipsis; white-space: nowrap; }
#room-chats .qline__name[dir="ltr"] { font-variant-numeric: tabular-nums lining-nums; }
#room-chats .qline__when { flex: none; color: var(--ink-soft); font-size: 15px; font-variant-numeric: tabular-nums lining-nums; }
#room-chats .qline__ask { display: -webkit-box; overflow: hidden; color: var(--ink-2); font-size: 16px; line-height: 1.55; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
#room-chats .qline__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 5px; color: var(--ink-soft); font-size: 15px; }
#room-chats .qline[data-state="done"] :is(.qline__name, .qline__ask) { color: var(--ink-soft); }
#room-chats .queue__empty { display: grid; justify-items: start; gap: 4px; padding: 18px 20px; }
#room-chats .queue__page { margin: 4px 16px 16px; }
#room-chats .queue__none { margin: auto; padding: 24px; color: var(--ink-soft); font: 17px/1.5 var(--f-ui); text-align: center; }

/* where an inquiry stands, as the family's pill: a dashed ring while it waits for you (red ring and words after 4 hours),
   the live yellow dot when new, an ink disc with a tick once handled */
.page-app .inq-pill:empty { display: none; }
.page-app .inq-pill[data-tone="waiting"] { color: var(--ink); border-color: var(--ink); border-style: dashed; }
.page-app .inq-pill[data-tone="waiting"]::before { border-style: dashed; }
.page-app .inq-pill[data-tone="late"] { color: var(--err); border-color: var(--err); }
.page-app .inq-pill[data-tone="new"] { color: var(--ink); border-color: var(--ink); }
.page-app .inq-pill[data-tone="new"]::before { background: var(--yellow); border-color: var(--ink); box-shadow: 0 0 0 2px rgba(255, 232, 26, 0.35); }
.page-app .inq-pill[data-tone="done"] { color: var(--ink-soft); }
.page-app .inq-pill[data-tone="done"]::before { width: 13px; height: 13px; background: var(--ink) 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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 9px no-repeat; border: 0; }

/* from 1100px: the lines and the open inquiry side by side, as tall as the screen, each scrolling on its own */
@media (min-width: 1100px) {
  #room-chats .queue { height: var(--desk-h); grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: auto minmax(0, 1fr); align-items: stretch; }
  #room-chats .queue__head { grid-column: 1 / -1; flex-wrap: nowrap; }
  #room-chats :is(.queue__tools, .queue__filters) { flex: 0 0 auto; flex-wrap: nowrap; }
  #room-chats .queue__search { flex: 0 0 18rem; }
  #room-chats .queue__list { min-height: 0; }
  #room-chats .queue__box { min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; }
  #room-chats .qday { position: sticky; z-index: 1; top: 0; }
  #room-chats .queue__pane { display: flex; min-width: 0; min-height: 0; flex-direction: column; overflow: hidden; background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--leaf-sm); box-shadow: var(--card-shadow); }
}

/* the open inquiry: in the pane (from 1100px) and in the sheet (dialog#inq-sheet). Its ringed initial, the name and the
   number (it calls) with where it stands; the customer's words on ivory with a sharp corner on their side; the keys
   (answering in WhatsApp is the yellow key only while it waits for you) and, at the row's end, the bot's switch for this
   chat, as the room's rows had it; then the chat, scrolling on its own and opening at its latest message */
.page-app .inq-card { display: flex; height: 100%; min-height: 0; flex-direction: column; }
.page-app .inq-card__head { display: flex; flex: none; align-items: center; gap: 12px; padding: 16px 20px 12px; }
.page-app .inq-card__titles { min-width: 0; flex: 1; }
.page-app .inq-card__name { font: 24px/1.15 var(--f-display); overflow-wrap: anywhere; }
.page-app .inq-card__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 4px; }
.page-app .inq-card__call { min-height: 36px; padding-block: 0; font: 15.5px/1.3 var(--f-body); font-variant-numeric: tabular-nums lining-nums; }   /* the number calls */
.page-app .inq-card__call .icon { width: 17px; height: 17px; }
#inq-pane .inq-card__back { display: none; }
.page-app .inq-card__top { display: grid; flex: none; gap: 14px; padding: 2px 20px 16px; border-bottom: 1px solid var(--hair); }
.page-app .inq-card__ask { justify-self: start; max-width: 100%; padding: 11px 16px 10px; background: var(--ivory); border-radius: 16px; border-start-start-radius: 4px; }
.page-app .inq-card__said { font-size: 17px; line-height: 1.55; overflow-wrap: anywhere; }
.page-app .inq-card__meta { margin-top: 3px; color: var(--ink-2); font: 14.5px/1.4 var(--f-ui); font-variant-numeric: tabular-nums lining-nums; }
.page-app .inq-card__meta:empty { display: none; }
.page-app .inq-card__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.page-app .inq-card__bot { margin-inline-start: auto; }   /* the bot's switch for this chat, at the row's far end */
.page-app .inq-card .chat-switch .toggle__ui { font-size: 15.5px; }
.page-app .inq-card__next { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; color: var(--ink-2); font: 16px/1.5 var(--f-ui); }
.page-app .inq-card__say { color: var(--ink-2); font: 15.5px/1.5 var(--f-ui); }
.page-app .inq-card__say.is-bad { color: var(--err); }
.page-app .inq-card__marked { padding-inline: 0.08em; color: var(--ink); background: linear-gradient(176deg, transparent 56%, var(--yellow) 56%, var(--yellow) 94%, transparent 94%) no-repeat right / 100% 100%; animation: marker-sweep 0.7s var(--ease) 0.1s both; }
/* on a phone or a tablet the same card fills the drawer (full screen below 720px), with the drawer's close key */
#inq-sheet .inq-sheet { grid-template-rows: minmax(0, 1fr); }
#inq-sheet .inq-card__head { padding: 14px 16px 12px; border-bottom: 1px solid var(--hair); }
#inq-sheet .inq-card__top { padding: 14px 16px 16px; }
#inq-sheet .inq-card__bot { margin-inline-start: 0; }   /* the drawer is narrow: the switch takes a row of its own, from the start */

/* «למי הבוט עונה» open under the queue (the head's link reaches it); a plan without the queue opens on it, with the sample
   of the lines beside it from 1100px */
#room-chats .chats-layout { display: grid; align-items: start; gap: 30px; margin-top: 30px; }
#room-chats .chats-layout > * { min-width: 0; }
#room-chats[data-view="locked"] .chats-layout { margin-top: 0; }
@media (min-width: 1100px) { #room-chats[data-view="locked"] .chats-layout { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
#room-chats #f-who { scroll-margin-top: calc(var(--appbar-h) + var(--roombar-h) + 20px); }

/* «למי הבוט עונה»: a card saved like every settings topic (settings-preview.js wraps its fields and adds the example) */
#room-chats .chats-who { display: grid; gap: 18px; padding: 20px clamp(16px, 3vw, 24px); container: who / inline-size; }
#room-chats .chats-who .panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 14px; }
#room-chats .chats-who .settings-layout { display: grid; gap: 18px; }
#room-chats .chats-who .settings-content { display: grid; min-width: 0; align-content: start; gap: 16px; }
/* one rhythm inside the card: the grid's gap, without the settings rooms' extra margin on top of it */
#room-chats .chats-who .settings-content > * + * { margin-top: 4px; }
#room-chats .chats-who__lede { max-width: 56ch; color: var(--ink-2); font-size: 16.5px; line-height: 1.6; }
#room-chats .chats-who .check { font-size: 16.5px; }
@container who (min-width: 42rem) {
  #room-chats .chats-who .settings-layout { grid-template-columns: minmax(0, 1fr) 17rem; align-items: start; gap: 26px; }
}
/* the example: WhatsApp's own colours inside a family frame. Every WhatsApp screen drawn in the app is the customer's
   phone, like the test chat and the settings examples: the customer's line goes out green on the end side, the bot's
   answer comes in white on the start side. (The transcript is the family's own drawing, from the business's side.) */
#room-chats .settings-example { min-width: 0; }
#room-chats .settings-example > summary { display: inline-flex; min-height: 44px; align-items: center; color: var(--ink); font: 16px/1.3 var(--f-ui); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.25em; cursor: pointer; }
#room-chats .settings-example__body { margin-top: 6px; overflow: hidden; background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--leaf-xs); }
#room-chats .settings-example__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--hair); }
#room-chats .settings-example__head > b { min-width: 0; overflow: hidden; font: 16px/1.3 var(--f-ui); text-overflow: ellipsis; white-space: nowrap; }
#room-chats .settings-example__thread { display: flex; flex-direction: column; gap: 8px; padding: 14px 12px; background: var(--wa-wall); }
#room-chats :is(.settings-example__question, .settings-example__answer) { max-width: 92%; padding: 8px 12px; color: #111b21; background: #fff; border-radius: 10px; box-shadow: 0 1px 1px rgba(17, 27, 33, 0.13); font-size: 15.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
#room-chats .settings-example__question { align-self: flex-end; background: var(--wa-mine); border-start-end-radius: 3px; }
#room-chats .settings-example__answer { align-self: flex-start; border-start-start-radius: 3px; }
#room-chats .settings-example__body > .hint { padding: 10px 14px; border-top: 1px solid var(--hair); font-size: 14.5px; }
/* saving: a dashed «עוד לא נשמר» beside the key while it is a draft (not real yet); «נשמר» with the family marker once saved */
#room-chats .chats-who > .panel__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-top: 16px; border-top: 1px solid var(--hair); }
#room-chats .chats-who .save-msg { order: 2; color: var(--ink-2); font: 15.5px/1.5 var(--f-ui); }
#room-chats .chats-who .save-msg.is-bad { color: var(--err); }
#room-chats .chats-who[data-dirty="1"] > .panel__foot::after { display: inline-flex; min-height: 28px; order: 1; align-items: center; padding: 2px 12px; content: "עוד לא נשמר"; color: var(--ink-2); border: 1.5px dashed var(--ink); border-radius: 999px; font: 14.5px/1.2 var(--f-ui); }
#room-chats .chats-who[data-dirty="1"] > .panel__foot:has(.save-msg.is-bad, [type="submit"]:disabled)::after { display: none; }
#room-chats .chats-who[data-dirty="1"] .save-msg.is-ok { display: none; }
#room-chats .chats-who .save-msg.is-ok { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
#room-chats .chats-who .save-ink { position: static; display: inline-block; }
#room-chats .chats-who .save-ink > span { font: 17px/1.3 var(--f-ui); }
#room-chats .chats-who .save-ink__pencil { display: none; }
#room-chats .chats-who .save-ink__word { padding-inline: 0.06em; color: var(--ink); background: linear-gradient(176deg, transparent 58%, var(--yellow) 58%, var(--yellow) 94%, transparent 94%); -webkit-mask: none; mask: none; animation: none; }
#room-chats .chats-who .save-ink__note { font-family: var(--f-ui); }
#room-chats .chats-who .save-msg.is-ok > .text-btn { min-height: 44px; }

/* the owner's contacts list: the website-import box of «פרטי העסק» (app-settings.css), with the media picker's drop tile */
#room-chats .contacts { margin: 0; }
#room-chats .contacts > summary { justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; }
#room-chats .contacts__body { display: grid; gap: 14px; padding: 0 16px 16px; }
#room-chats .contacts__file { padding: 20px 14px; background: var(--sheet); }
#room-chats .contacts__file:hover { background: var(--yellow); }
#room-chats .contacts__msg { font: 15.5px/1.5 var(--f-ui); }
#room-chats .contacts__msg.is-bad { color: var(--err); }
#room-chats .contacts__how > summary { display: inline-flex; min-height: 44px; align-items: center; font: 16px/1.3 var(--f-ui); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.25em; cursor: pointer; }
#room-chats .contacts__how ul { display: grid; gap: 6px; margin: 4px 0 0; padding-inline-start: 20px; color: var(--ink-2); font-size: 16px; line-height: 1.55; }
#room-chats .contacts__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
#room-chats .contacts textarea { min-height: 84px; }             /* a few numbers, not a letter */

/* a plan without chat history: where it is, calmly, and a dashed sample of the list */
#room-chats .chats-locked { display: grid; align-content: start; gap: 14px; }
#room-chats .chats-locked__lead { max-width: 40ch; font: 20px/1.45 var(--f-ui); text-wrap: balance; }
#room-chats .chats-locked > p:not([class]) { max-width: 56ch; color: var(--ink-2); font-size: 16.5px; line-height: 1.65; }
#room-chats .chats-locked > .text-link { justify-self: start; }
#room-chats .chats-locked > .sample { margin-top: 8px; }
#room-chats .sample .qlines { overflow: hidden; background: transparent; border: 2px dashed var(--line-strong); border-radius: var(--leaf-sm); }

/* ---------- 2. the chat inside the open inquiry: the family's three voices ---------- */
/* The customer on ivory at the start side, the bot in ink and you (your own words) in yellow at the end side. Messages from
   one speaker in a row are a group, named once and 3px apart; the time sits at the end of the text, and a quiet divider
   names each day */
.page-app .inq-card .tr-msgs { display: grid; min-height: 0; flex: 1 1 auto; align-content: start; gap: 10px; margin: 0; padding: 16px 16px calc(20px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; list-style: none; }
.page-app .inq-card .tr-msgs:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
.page-app .inq-card .msg { display: flex; max-width: 86%; flex-wrap: wrap; align-items: flex-end; gap: 0 10px; padding: 8px 14px 7px; border-radius: 16px; font-size: 16px; line-height: 1.55; }
.page-app .inq-card .msg--cont { margin-top: -7px; }
.page-app .inq-card .msg--in { justify-self: start; background: var(--ivory); border-start-start-radius: 4px; }
.page-app .inq-card .msg--bot { justify-self: end; color: var(--on-band); background: var(--band); border-start-end-radius: 4px; }
.page-app .inq-card .msg--you { justify-self: end; background: var(--yellow); border: 1.5px solid var(--ink); border-start-end-radius: 4px; }
.page-app .inq-card .msg--note { display: block; justify-self: center; max-width: 92%; padding: 2px 12px; color: var(--ink-soft); font-size: 14px; line-height: 1.5; text-align: center; }
.page-app .inq-card .msg--day { display: flex; width: 100%; max-width: none; align-items: center; gap: 12px; padding: 4px 0; color: var(--ink-soft); font: 14.5px/1.3 var(--f-ui); }
.page-app .inq-card .msg--day::before, .page-app .inq-card .msg--day::after { height: 1px; flex: 1; content: ""; background: var(--hair); }
.page-app .inq-card .msg__who { flex-basis: 100%; font: 14px/1.4 var(--f-ui); }
.page-app .inq-card .msg--bot .msg__who { color: var(--on-band-2); }
.page-app .inq-card .msg--you .msg__who { color: var(--ink-2); }
.page-app .inq-card .msg__text { min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.page-app .inq-card .msg__at { margin-inline-start: auto; color: var(--ink-soft); font-size: 13.5px; font-variant-numeric: tabular-nums lining-nums; line-height: 1.7; }
.page-app .inq-card .msg--bot .msg__at { color: var(--on-band-2); }
.page-app .inq-card .msg--you .msg__at { color: var(--ink-2); }

/* ---------- 3. תורים ---------- */
#room-calendar .appts-sum { margin-top: 12px; }
#room-calendar[data-view="locked"] .appts-lede { display: none; }
/* a calm notice: ivory, one red ring, the way to fix it in the sentence */
#room-calendar .notice { position: relative; max-width: 64rem; margin: 0 0 28px; padding: 14px 16px; padding-inline-start: 42px; background: var(--ivory); border: 2px solid var(--ink); border-radius: var(--leaf-sm); font-size: 16.5px; line-height: 1.6; }
#room-calendar .notice::before { position: absolute; top: calc(14px + (1.6em - 14px) / 2); inset-inline-start: 16px; width: 14px; height: 14px; content: ""; border: 2px solid var(--err); border-radius: 50%; }
#room-calendar .notice .text-link { display: inline; min-height: 0; padding: 0; white-space: nowrap; }

#room-calendar .appts-layout { display: grid; align-items: start; gap: 30px; }
#room-calendar :is(.appts-main, .appts-side) { display: grid; min-width: 0; align-content: start; gap: 30px; }
@media (min-width: 1100px) { #room-calendar .appts-layout { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px; } }

/* a day: a card with the day on its tab and the count at the other end of the same line */
#room-calendar .appts { display: grid; gap: 54px; padding-top: 32px; }
#room-calendar .appts:empty { display: none; }
#room-calendar .appt-day { position: relative; background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--leaf-sm); box-shadow: var(--card-shadow); }
#room-calendar .appt-day__head { position: absolute; z-index: 1; bottom: 100%; inset-inline-start: 18px; display: flex; max-width: calc(100% - 36px); align-items: baseline; gap: 8px; margin: 0 0 -2px; padding: 6px 14px 5px; color: var(--ink); background: var(--ivory); border: 2px solid var(--ink); border-bottom: 0; border-radius: 10px 10px 0 0; white-space: nowrap; }
#room-calendar .appt-day.is-today .appt-day__head { background: var(--yellow); }
#room-calendar .appt-day__name { font: 18px/1.25 var(--f-ui); }
#room-calendar .appt-day__date { color: var(--ink-2); font: 15px/1.25 var(--f-ui); font-variant-numeric: tabular-nums lining-nums; }
#room-calendar .appt-day__count { position: absolute; bottom: 100%; inset-inline-end: 8px; margin: 0; padding-bottom: 7px; color: var(--ink-soft); font: 15px/1.3 var(--f-ui); white-space: nowrap; }

/* a line: the time first, then who and what, then «ביטול» (or «בוטל») at the end */
#room-calendar :is(.appt-day__list, .appts-past__list) { display: grid; margin: 0; padding: 0; list-style: none; }
#room-calendar .appt-day__list { padding-block: 4px; }
#room-calendar :is(.appt, .appt-sample) { display: grid; min-height: 66px; grid-template-columns: 4.5rem minmax(0, 1fr) auto; align-items: center; gap: 6px 14px; padding: 12px 16px; border-top: 1px solid var(--hair); }
#room-calendar :is(.appt, .appt-sample):first-child { border-top: 0; }
#room-calendar .appt__time { font: 20px/1.2 var(--f-ui); font-variant-numeric: tabular-nums lining-nums; }
#room-calendar .appt__date { display: block; color: var(--ink-soft); font: 14px/1.3 var(--f-ui); }
#room-calendar .appt__who { display: grid; min-width: 0; gap: 2px; }
#room-calendar .appt__entry { font-size: 17px; line-height: 1.45; overflow-wrap: anywhere; }
#room-calendar .appt__meta { color: var(--ink-soft); font-size: 15px; line-height: 1.45; font-variant-numeric: tabular-nums; }
#room-calendar .appt__cancel { min-height: 44px; padding: 6px 16px; font-size: 15.5px; }
#room-calendar :is(.appt, .appt-sample).is-cancelled :is(.appt__time, .appt__entry) { color: var(--ink-soft); text-decoration: line-through; text-decoration-color: var(--err); text-decoration-thickness: 2px; }
#room-calendar .appt.is-past:not(.is-cancelled) :is(.appt__time, .appt__entry) { color: var(--ink-2); }
#room-calendar .sample-bad { color: var(--err); border-color: var(--err); }
@media (max-width: 479.98px) {
  #room-calendar :is(.appt, .appt-sample) { grid-template-columns: 4rem minmax(0, 1fr); }
  #room-calendar :is(.appt, .appt-sample) > :is(.btn, .pill) { grid-column: 2; justify-self: start; }
}

/* the past week: a quieter card beside the days */
#room-calendar .appts-past { display: grid; gap: 4px; padding: 18px 0 8px; }
#room-calendar .appts-past > .group__title { padding-inline: 16px; }
#room-calendar .appts-past > .hint { padding: 0 16px 10px; }
#room-calendar .appts-past__list:empty { display: none; }
#room-calendar .appts-past .appt { min-height: 58px; }
#room-calendar .appts-past .appt__time { font-size: 17px; }

/* nothing booked yet (dashed: not real yet), or a plan without the calendar (an ivory card with the one way on) */
#room-calendar :is(.appts-empty, .appts-locked) { display: grid; justify-items: start; gap: 12px; padding: 22px clamp(18px, 3vw, 26px) 24px; border-radius: var(--leaf-sm); }
#room-calendar .appts-empty { border: 2px dashed var(--line-strong); }
#room-calendar .appts-locked { background: var(--ivory); border: 2px solid var(--ink); }
#room-calendar :is(.appts-empty__title, .appts-locked__title) { max-width: 36ch; font: 20px/1.4 var(--f-ui); text-wrap: balance; }
#room-calendar :is(.appts-empty, .appts-locked) > p:not([class]) { max-width: 52ch; color: var(--ink-2); font-size: 16.5px; line-height: 1.65; }
#room-calendar .appt-day--sample { margin-top: 34px; background: transparent; border-style: dashed; box-shadow: none; }
#room-calendar .appt-day--sample .appt-day__head { background: var(--page); border-style: dashed; }

/* ---------- 4. מסלול ---------- */
#room-plan .plan-top { display: grid; align-items: start; gap: 22px; }
@media (min-width: 900px) { #room-plan .plan-top { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); } }
#room-plan .plan-top > .card { display: grid; align-content: start; gap: 12px; padding: 20px clamp(16px, 3vw, 24px) 22px; }
/* before a plan there is nothing to count yet: the usage card waits (the subscription line already says why) */
#room-plan .usage:has(> .meter > [data-m-box][hidden]):has(> #voice[hidden]) { display: none; }

/* the subscription: one dot and one word, then the sentence and its actions */
#room-plan .sub-card__state { font-size: 22px; }
#room-plan .sub-card__text { color: var(--ink-2); font-size: 17px; line-height: 1.65; }
#room-plan .sub-card .actions:not(:has(> :not([hidden]))) { display: none; }

/* the month: the big number, then the family meter (a white track with an ink edge; the cells join into one yellow bar) */
#room-plan .meter { display: grid; gap: 10px; }
#room-plan .meter__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
#room-plan .meter__reset { color: var(--ink-soft); font: 15px/1.4 var(--f-ui); }
#room-plan [data-m-box] { display: grid; gap: 10px; }
#room-plan .meter__nums { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; color: var(--ink-2); font: 17px/1.2 var(--f-ui); }
#room-plan .meter__nums b { color: var(--ink); font: 44px/1 var(--f-display); font-variant-numeric: tabular-nums lining-nums; }
#room-plan .meter__cells { display: flex; height: 18px; padding: 2px; background: var(--field-white); border: 2px solid var(--ink); border-radius: 999px; }
#room-plan .meter__cells i { min-width: 0; flex: 1 1 0; }
#room-plan .meter__cells i.on { background: var(--yellow); }
#room-plan .meter__cells i.on:first-child { border-start-start-radius: 999px; border-end-start-radius: 999px; }
#room-plan .meter__cells i.on:not(:has(+ i.on)) { border-start-end-radius: 999px; border-end-end-radius: 999px; }
#room-plan .meter[data-level="full"] .meter__cells { border-color: var(--err); }
#room-plan .meter__text { font: 16px/1.55 var(--f-ui); }
#room-plan .meter[data-level="warn"] .meter__text { color: var(--warn-text); }
#room-plan .meter[data-level="full"] .meter__text { color: var(--err); }
#room-plan .meter__def { padding-top: 10px; color: var(--ink-soft); border-top: 1px solid var(--hair); font-size: 14.5px; line-height: 1.6; }
#room-plan .voice { display: grid; gap: 8px; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--hair); }
#room-plan .voice__title { font: 18px/1.3 var(--f-ui); }
#room-plan .voice__nums { color: var(--ink-2); font: 16px/1.2 var(--f-ui); }
#room-plan .voice__nums b { color: var(--ink); font: 30px/1 var(--f-display); font-variant-numeric: tabular-nums lining-nums; }
#room-plan .voice__bar { position: relative; display: block; height: 18px; overflow: hidden; background: var(--field-white); border: 2px solid var(--ink); border-radius: 999px; }
#room-plan .voice__bar i { position: absolute; inset-block: 2px; inset-inline-start: 2px; width: calc(var(--fill, 0) * (100% - 4px)); background: var(--yellow); border-radius: 999px; }
#room-plan .voice[data-level="full"] .voice__bar { border-color: var(--err); }
#room-plan .voice__text { color: var(--ink-2); font-size: 15px; line-height: 1.6; }

/* the plans: monthly or yearly as a segmented strip (the chosen one a yellow key), then the cards */
#room-plan .plans { display: grid; gap: 16px; margin-top: 40px; container: plans / inline-size; }
#room-plan .plans__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
#room-plan .period { display: inline-flex; gap: 4px; margin: 0; padding: 4px; background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--leaf-xs); }
#room-plan .period__opt { position: relative; display: grid; }
#room-plan .period__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
#room-plan .period__opt span { display: grid; min-width: 5.5em; min-height: 44px; place-items: center; padding: 6px 16px; color: var(--ink-2); border-radius: 9px 3px 9px 3px; font: 16px/1.2 var(--f-ui); }
#room-plan .period__opt input:checked + span { color: var(--ink); background: var(--yellow); box-shadow: inset 0 0 0 1.5px var(--ink), var(--shadow-key-sm); }
#room-plan .period__opt input:not(:checked):hover + span { background: var(--ivory); }
#room-plan .period__opt input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }

/* a plan card (lib.js planCardNode): your plan stands up with the yellow tab «המסלול שלכם», the recommended one has an
   ivory tab «מומלץ»; side by side, the rows line up across the cards */
#room-plan .plan-cards { display: grid; gap: 46px; margin: 0; padding: 26px 0 0; list-style: none; }
#room-plan .plan-card { position: relative; display: flex; min-width: 0; flex-direction: column; padding: 26px 22px 22px; background: var(--sheet); border: 2px solid var(--ink); border-radius: var(--leaf-sm); box-shadow: var(--card-shadow); }
#room-plan .plan-card.is-current { box-shadow: 0 14px 30px rgba(27, 26, 23, 0.1), var(--shadow-hard); }
#room-plan .plan-card > * { margin: 0; }
#room-plan .plan-card__tag { position: absolute; z-index: 1; bottom: 100%; inset-inline-start: 18px; margin: 0 0 -2px; padding: 6px 14px 5px; background: var(--ivory); border: 2px solid var(--ink); border-bottom: 0; border-radius: 10px 10px 0 0; font: 15px/1.3 var(--f-ui); white-space: nowrap; }
#room-plan .plan-card.is-current .plan-card__tag { background: var(--yellow); }
#room-plan .plan-card__audience { order: 0; margin-top: 6px; color: var(--ink-2); font: 16px/1.4 var(--f-ui); }
#room-plan :is(.plan-card__name, .plan-card__title, .plan-card__price) { order: -1; }
#room-plan .plan-card__name { margin-top: 4px; font: 32px/1.1 var(--f-display); }
#room-plan .plan-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 14px; }
#room-plan .plan-card__amount { font: 44px/1 var(--f-display); font-variant-numeric: tabular-nums lining-nums; }
#room-plan .plan-card__period { color: var(--ink-soft); font: 17px/1.2 var(--f-ui); }
#room-plan .plan-card__quota { margin-top: 10px; font: 16.5px/1.45 var(--f-ui); }
#room-plan .plan-card__annual { margin-top: 4px; color: var(--ink-soft); font-size: 15px; line-height: 1.55; font-variant-numeric: tabular-nums; }
#room-plan .plan-card__inherits { margin-top: 18px; padding-top: 14px; color: var(--ink-2); border-top: 1px solid var(--hair); font: 15.5px/1.5 var(--f-ui); }
#room-plan .plan-card__list { display: grid; align-content: start; gap: 10px; margin-top: 12px; padding: 0; list-style: none; }
#room-plan .plan-card__list li { position: relative; padding-inline-start: 30px; color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }
#room-plan .plan-card__list li::before { position: absolute; top: 1px; inset-inline-start: 0; width: 21px; height: 21px; content: ""; background: var(--ivory) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b1a17' 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") center / 13px no-repeat; border: 1.5px solid var(--ink); border-radius: 50%; }
#room-plan .plan-card__list b { color: var(--ink); }
#room-plan .plan-card__cta { margin-top: auto; padding-top: 22px; }
#room-plan .plan-card__cta .btn { width: 100%; }
/* a plan with two sizes (בסיסי: 100 or 300 conversations): the period strip's keys, smaller, on the name's line */
#room-plan .plan-card__title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 4px; }
#room-plan .plan-card__title .plan-card__name { margin-top: 0; }
#room-plan .plan-card__sizes .period__opt span { min-width: 0; min-height: 40px; padding: 5px 12px; font-size: 15px; }

/* more conversations for this month: under the meter, a key that turns yellow when the month is nearly used */
#room-plan .topup { display: grid; gap: 8px; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--hair); }
#room-plan .topup__title { font: 18px/1.3 var(--f-ui); }
#room-plan .topup__text { color: var(--ink-2); font-size: 15px; line-height: 1.6; }
@container plans (min-width: 46rem) {
  #room-plan .plan-cards { grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; grid-template-rows: repeat(8, auto); gap: 0 18px; }
  #room-plan .plan-card { display: grid; grid-row: span 8; grid-template-rows: subgrid; align-content: start; }
  #room-plan :is(.plan-card__name, .plan-card__title) { grid-row: 1; }
  #room-plan .plan-card__price { grid-row: 2; }
  #room-plan .plan-card__audience { grid-row: 3; }
  #room-plan .plan-card__quota { grid-row: 4; }
  #room-plan .plan-card__annual { grid-row: 5; }
  #room-plan .plan-card__inherits { grid-row: 6; }
  #room-plan .plan-card__list { grid-row: 7; }
  #room-plan .plan-card__cta { grid-row: 8; align-self: end; }
}
#room-plan .plans__fine { margin-top: 22px; padding-top: 10px; color: var(--ink-2); border-top: 1px solid var(--hair); font-size: 15.5px; line-height: 1.65; }
#room-plan .plans__fine > summary { display: inline-flex; min-height: 44px; align-items: center; color: var(--ink); font: 16px/1.3 var(--f-ui); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.25em; cursor: pointer; }
#room-plan .plans__fine > p { max-width: 70ch; margin-top: 8px; }
#room-plan .plans__fine a { color: var(--ink); }

/* ---------- 5. חשבון ---------- */
#room-account .acct { display: grid; max-width: 46rem; gap: 30px; }

/* the owner's card: an initial tile, the name, the business, then the sign-in */
#room-account .owner { display: grid; gap: 14px; padding: 22px clamp(16px, 3vw, 26px) 10px; }
#room-account .owner__head { display: flex; align-items: center; gap: 16px; }
#room-account .owner__mark { display: grid; width: 58px; height: 58px; flex: none; place-items: center; color: var(--yellow); background: var(--band); border-radius: var(--leaf-xs); font: 30px/1 var(--f-display); }
#room-account .owner__mark:empty { display: none; }
#room-account .owner__who { display: grid; min-width: 0; justify-items: start; gap: 2px; }
#room-account .owner__name { font: 22px/1.3 var(--f-ui); overflow-wrap: anywhere; }
#room-account .owner__biz { color: var(--ink-2); font-size: 17px; line-height: 1.5; overflow-wrap: anywhere; }
#room-account .owner__biz.is-empty { color: var(--ink-soft); }
#room-account .owner__add { min-height: 40px; padding-block: 2px; }
#room-account .owner__rows { display: grid; border-top: 1px solid var(--hair); }
#room-account .owner__rows > div { display: grid; grid-template-columns: minmax(7.5rem, auto) minmax(0, 1fr); gap: 2px 14px; padding: 11px 0; border-bottom: 1px solid var(--hair); }
#room-account .owner__rows dt { color: var(--ink-soft); font: 15px/1.5 var(--f-ui); }
#room-account .owner__rows dd { font-size: 16.5px; line-height: 1.5; overflow-wrap: anywhere; }
#room-account .owner__out { justify-self: start; }
@media (max-width: 479.98px) { #room-account .owner__rows > div { grid-template-columns: minmax(0, 1fr); } }

/* the connections: grouped rows, the state as one dot and a word (live yellow, dashed = not yet, red = broken) */
#room-account .acct-group { display: grid; justify-items: start; gap: 12px; }
#room-account .acct-group > .card { justify-self: stretch; }
#room-account .acct-rows { display: grid; margin: 0; padding: 0; list-style: none; }
#room-account .acct-row { display: grid; min-height: 72px; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 8px 14px; padding: 12px 16px; border-top: 1px solid var(--hair); }
#room-account .acct-row:first-child { border-top: 0; }
#room-account .acct-row__ic { display: grid; width: 42px; height: 42px; place-items: center; background: var(--ivory); border: 1.5px solid var(--hair); border-radius: 50%; }
#room-account .acct-row__ic .icon { width: 21px; height: 21px; }
#room-account .acct-row__text { display: grid; min-width: 0; gap: 2px; }
#room-account .acct-row__label { font: 17px/1.3 var(--f-ui); }
#room-account .acct-state { color: var(--ink-soft); font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; }
#room-account .acct-state::before { display: inline-block; width: 10px; height: 10px; margin-inline-end: 8px; content: ""; vertical-align: 0.05em; border: 1.5px dashed currentColor; border-radius: 50%; }
#room-account .acct-state.is-on { color: var(--ink); }
#room-account .acct-state.is-on::before { background: var(--yellow); border: 1.5px solid var(--ink); }
#room-account .acct-state.is-bad { color: var(--err); }
#room-account .acct-state.is-bad::before { border-style: solid; }
#room-account .acct-state:empty { display: none; }
@media (max-width: 479.98px) {
  #room-account .acct-row { grid-template-columns: 42px minmax(0, 1fr); }
  #room-account .acct-row > .btn { grid-column: 2; justify-self: start; }
}

/* the subscription in one sentence; the terms, with the signed agreement stamped (onimli's receipt stamp) */
#room-account .acct-box { display: grid; gap: 12px; padding: 18px clamp(16px, 3vw, 24px) 14px; }
/* עדכונים ועזרה בוואטסאפ: the subscription's box, with the connections' state line once the owner's phone is in */
#room-account #acc-updates .acct-box__text { max-width: 60ch; }
#room-account #acc-updates .hint:empty { display: none; }
#room-account .acct-box__text { font-size: 17px; line-height: 1.65; }
#room-account .acct-sign { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
#room-account .acct-sign:not(:has(> :not([hidden]))) { display: none; }
#room-account .acct-sign__text { display: flex; flex: 1 1 14rem; align-items: flex-start; gap: 10px; color: var(--ink); font: 16px/1.6 var(--f-ui); }
#room-account .acct-sign__text::before { width: 22px; height: 22px; flex: none; margin-top: 1px; content: ""; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fffdf7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat; border-radius: 50%; }
#room-account .acct-docs { display: grid; justify-items: start; padding-top: 4px; border-top: 1px solid var(--hair); }

/* deleting the account: last, apart, the one red key */
#room-account .acct-delete { display: grid; justify-items: start; gap: 10px; padding-top: 24px; border-top: 1px solid var(--hair); }
#room-account .acct-delete > p:not(.error) { max-width: 60ch; color: var(--ink-2); font-size: 16px; line-height: 1.65; }

/* ---------- high contrast: fills are dropped, so the live dot and the meters draw in the system colour ---------- */
@media (forced-colors: active) {
  :is(#room-calendar, #room-plan, #room-chats, #inq-sheet) .stateline[data-tone="on"]::before, #room-account .acct-state.is-on::before,
  #room-chats .qline[aria-current="true"] .qline__av, .page-app .inq-pill[data-tone="new"]::before, .page-app .inq-pill[data-tone="done"]::before,
  #room-plan :is(.meter__cells i.on, .voice__bar i) { background: Highlight; forced-color-adjust: none; }
  #room-calendar .appt-day.is-today .appt-day__head, #room-plan .plan-card.is-current .plan-card__tag { border-width: 3px; }
  #room-chats .qline[aria-current="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
  .page-app .inq-card .msg:is(.msg--in, .msg--bot) { border: 1px solid CanvasText; }
}

/* the family's other channel, once, at the end of the plan room: a quiet line, never a card that sells */
#room-plan .sibling { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 4px 16px; margin-top: 34px; padding: 18px 0 0; border-top: 1px solid var(--hair); }
#room-plan .sibling__mark { width: 40px; height: 40px; grid-row: span 2; align-self: start; }
#room-plan .sibling__title { font: 18px/1.35 var(--f-ui); }
#room-plan .sibling__text p { max-width: 62ch; margin-top: 2px; color: var(--ink-2); font-size: 16px; line-height: 1.6; }
#room-plan .sibling__go { grid-column: 2; justify-self: start; }
@media (min-width: 900px) {
  #room-plan .sibling { grid-template-columns: 40px minmax(0, 1fr) auto; }
  #room-plan .sibling__mark { grid-row: auto; align-self: center; }
  #room-plan .sibling__go { grid-column: auto; }
}