/* Views: header, list, board, calendar, peek body, case detail, inbox, my day, calendar, palette, money, people. */

/* ── view header ── */
.view-head { flex: none; border-block-end: 1px solid var(--line); }
.vh-row { display: flex; align-items: center; gap: var(--sp-2); block-size: 46px; padding-inline: 14px var(--sp-2-5); min-inline-size: 0; }
.vh-spacer { flex: 1; }
.crumbs { display: flex; align-items: center; gap: var(--sp-1-5); font-size: var(--fs-sm); color: var(--ink); font-weight: 500; white-space: nowrap; min-inline-size: 0; }
.crumbs a { color: var(--ink-2); }
.crumbs a:hover { color: var(--ink); }
.crumb-icon { color: var(--ink-3); display: grid; }
.crumb-sep { color: var(--ink-3); }
.crumb-title { color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.tabs { display: flex; gap: var(--sp-0-5); margin-inline-start: 8px; overflow-x: auto; scrollbar-width: none; min-inline-size: 0; }
.tab { display: inline-flex; align-items: center; gap: 5px; block-size: 26px; padding-inline: var(--sp-2-5); border-radius: var(--radius-pill); border: 1px solid transparent; font-size: var(--fs-xs); color: var(--ink-2); white-space: nowrap; font-weight: 500; }
.tab:hover { background: var(--hover); color: var(--ink); }
.tab.active { border-color: var(--line-strong); background: var(--surface); color: var(--ink); box-shadow: 0 1px 1px var(--shadow-color); }
.btn.on { color: var(--brand); }
.count-dot { min-inline-size: 16px; block-size: 16px; border-radius: var(--radius); background: var(--brand-soft); color: var(--brand-ink); font-size: var(--fs-xs); display: inline-grid; place-items: center; padding-inline: var(--sp-1); }
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.seg button { display: inline-flex; align-items: center; gap: 5px; block-size: 26px; padding-inline: var(--sp-2); color: var(--ink-3); font-size: var(--fs-xs); }
.seg button + button { border-inline-start: 1px solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--active); color: var(--ink); }
.seg button:hover { color: var(--ink); }
.seg button span { display: none; }
.seg.wide { inline-size: 100%; display: flex; }
.seg.wide button { flex: 1; justify-content: center; block-size: 30px; }
.seg.wide button span { display: inline; }
.link { color: var(--brand); font-weight: 500; }
.link:hover { text-decoration: underline; }

/* filter chips */
.filter-bar { flex: none; display: flex; align-items: center; gap: var(--sp-1-5); padding: var(--sp-1-5) 14px; border-block-end: 1px solid var(--line); flex-wrap: wrap; }
.fchip { display: inline-flex; align-items: stretch; block-size: 26px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); font-size: var(--fs-xs); overflow: hidden; }
.fchip-main { display: inline-flex; align-items: center; gap: var(--sp-1-5); padding-inline: var(--sp-2); }
.fchip-main:hover, .fchip-x:hover { background: var(--hover); }
.fchip-k { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); }
.fchip-op { color: var(--ink-3); }
.fchip-v { color: var(--ink); font-weight: 500; max-inline-size: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fchip-x { padding-inline: var(--sp-1-5); border-inline-start: 1px solid var(--line); color: var(--ink-3); display: grid; place-items: center; }

/* ── list ── */
.cases-body { flex: 1; min-block-size: 0; overflow: auto; position: relative; }
.list { padding-block-end: 80px; }
.group-head { position: sticky; inset-block-start: 0; z-index: var(--z-header); display: flex; align-items: center; gap: var(--sp-2); block-size: 36px; padding-inline: var(--sp-2-5) var(--sp-3); background: var(--surface-2); border-block-end: 1px solid var(--line); font-size: var(--fs-sm); font-weight: 500; color: var(--ink); }
:root[data-theme="dark"] .group-head { background: var(--surface-2); }
.gh-toggle { inline-size: 18px; block-size: 18px; display: grid; place-items: center; color: var(--ink-3); border-radius: var(--radius-xs); transition: transform var(--dur-2); }
.gh-toggle:hover { background: var(--hover); }
.group-head.collapsed .gh-toggle { transform: rotate(-90deg); }
[dir="rtl"] .group-head.collapsed .gh-toggle { transform: rotate(90deg); }
.gh-icon { display: grid; place-items: center; }
.gh-count { color: var(--ink-3); font-weight: 400; font-size: var(--fs-xs); }
.gh-add { inline-size: 24px; block-size: 24px; }
.row { position: relative; display: flex; align-items: center; gap: var(--sp-2-5); block-size: 40px; padding-inline: var(--sp-2-5) 14px; border-block-end: 1px solid color-mix(in srgb, var(--line) 60%, transparent); cursor: default; font-size: var(--fs-sm); }
.row:hover, .row.focused { background: var(--hover); }
.row.focused::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 2px; background: var(--brand); }
.row.selected { background: var(--brand-soft); }
.row.selected.focused { background: color-mix(in srgb, var(--brand-soft) 70%, var(--hover)); }
.r-check { inline-size: 18px; display: grid; place-items: center; opacity: 0; }
.row:hover .r-check, .row.selected .r-check, .list:has(.row.selected) .r-check { opacity: 1; }
.r-prio, .r-status, .r-assignee, .r-due, .cc-status, .cc-prio { display: grid; place-items: center; border-radius: var(--radius-xs); padding: var(--sp-0-5); flex: none; }
.r-prio:hover, .r-status:hover, .r-assignee:hover, .r-due:hover { background: var(--active); }
.r-id { inline-size: 66px; flex: none; font-size: var(--fs-xs); }
.r-main { flex: 1; min-inline-size: 0; display: flex; align-items: baseline; gap: var(--sp-2-5); overflow: hidden; white-space: nowrap; }
.r-title { color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.r-person { color: var(--ink-3); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; flex: none; max-inline-size: 40%; }
.r-meta { display: flex; align-items: center; gap: var(--sp-1-5); flex: none; }
.r-due { min-inline-size: 72px; justify-content: end; display: flex; }
.risk-chip { color: var(--due-over); border-color: color-mix(in srgb, var(--due-over) 35%, var(--line)); background: color-mix(in srgb, var(--due-over) 7%, var(--surface)); font-weight: 500; flex: none; }
.warn-chip { color: var(--due-soon); border-color: color-mix(in srgb, var(--due-soon) 35%, var(--line)); flex: none; }
.list-foot { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-xs); color: var(--ink-3); }
.empty-title { font: 600 var(--fs-lg) var(--font-display); color: var(--ink-2); }

/* bulk bar */
.bulk-bar { position: absolute; inset-block-end: 18px; inset-inline-start: 50%; translate: -50% 0; z-index: var(--z-bulk); display: flex; align-items: center; gap: var(--sp-1-5); padding: var(--sp-1-5) var(--sp-2); background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); animation: pop var(--dur-1) var(--ease); white-space: nowrap; }
[dir="rtl"] .bulk-bar { translate: 50% 0; }
.view-cases { position: relative; }
.bulk-count { font-size: var(--fs-sm); font-weight: 500; padding-inline: var(--sp-1-5); }
.bulk-sep { inline-size: 1px; block-size: 18px; background: var(--line); }
.bulk-bar .kbd { margin-inline-start: 2px; }

/* ── board ── */
.layout-board { background: var(--bg); }
.board { display: flex; gap: var(--sp-2-5); padding: var(--sp-3); min-block-size: 100%; align-items: flex-start; inline-size: max-content; min-inline-size: 100%; }
.col { inline-size: 284px; flex: none; display: flex; flex-direction: column; border-radius: var(--radius-lg); background: var(--surface-2); border: 1px solid transparent; transition: border-color var(--dur-2), background-color var(--dur-2); max-block-size: 100%; }
:root[data-theme="dark"] .col { background: var(--surface-2); }
.col.drop { border-color: var(--brand); background: var(--brand-soft); }
.col-head { display: flex; align-items: center; gap: var(--sp-2); block-size: 38px; padding-inline: var(--sp-2-5) var(--sp-1-5); font-size: var(--fs-sm); font-weight: 500; }
.col-body { display: flex; flex-direction: column; gap: var(--sp-1-5); padding: 0 var(--sp-1-5) var(--sp-2); min-block-size: 60px; }
.col-empty { border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 14px; text-align: center; color: var(--ink-3); font-size: var(--fs-xs); }
.case-card { padding: 9px var(--sp-2-5); border-radius: var(--radius); display: flex; flex-direction: column; gap: 5px; cursor: pointer; box-shadow: 0 1px 2px var(--shadow-color); }
.case-card:hover { border-color: var(--line-strong); }
.case-card.focused { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.case-card.selected { background: var(--brand-soft); }
.case-card.dragging { opacity: .45; }
.cc-top { display: flex; align-items: center; gap: var(--sp-1-5); font-size: var(--fs-xs); }
.cc-title { display: flex; gap: var(--sp-1-5); align-items: flex-start; font-size: var(--fs-sm); font-weight: 500; color: var(--ink); line-height: 1.4; }
.cc-title .cc-status { margin-block-start: 2px; }
.cc-person { font-size: var(--fs-xs); color: var(--ink-3); }
.cc-meta { display: flex; align-items: center; gap: var(--sp-1-5); flex-wrap: wrap; }
.cc-meta .chip { block-size: 20px; }
.cc-labels { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.cc-labels .chip { block-size: 20px; }
.board[data-draggable="true"] .case-card { cursor: grab; }

/* ── month calendar layout ── */
.month { display: flex; flex-direction: column; block-size: 100%; min-block-size: 560px; }
.month-head { display: flex; align-items: center; gap: var(--sp-1-5); padding: var(--sp-2) 14px; }
.month-name { font: 600 var(--fs) var(--font-display); margin-inline-start: 6px; }
.legend { display: inline-flex; align-items: center; gap: var(--sp-1-5); font-size: var(--fs-xs); color: var(--ink-3); }
.lg:not(.avatar) { inline-size: 10px; block-size: 10px; border-radius: 3px; display: inline-block; }
.lg-due { background: var(--surface); border: 1px solid var(--line-strong); }
.lg-step { background: var(--brand-soft); }
.cal-grid { flex: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: minmax(96px, 1fr); border-block-start: 1px solid var(--line); }
.cal-dow { block-size: 30px; display: grid; place-items: center; font-size: var(--fs-xs); color: var(--ink-3); border-block-end: 1px solid var(--line); border-inline-end: 1px solid var(--line); }
.cal-cell { border-block-end: 1px solid var(--line); border-inline-end: 1px solid var(--line); padding: var(--sp-1); display: flex; flex-direction: column; gap: 3px; min-inline-size: 0; }
.cal-cell.out { background: var(--surface-2); }
.cal-cell.out .cal-date { color: var(--ink-3); }
.cal-cell.weekend { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.cal-date { font-size: var(--fs-xs); color: var(--ink-3); padding-inline: var(--sp-1); inline-size: fit-content; border-radius: var(--radius-frame); min-inline-size: 20px; text-align: center; }
.cal-cell.today .cal-date { background: var(--primary); color: var(--on-primary); font-weight: 600; }
.cal-ev { display: flex; align-items: center; gap: var(--sp-1); block-size: 22px; padding-inline: 5px; border-radius: 5px; font-size: var(--fs-xs); background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); overflow: hidden; white-space: nowrap; text-align: start; min-inline-size: 0; }
.cal-ev span { overflow: hidden; text-overflow: ellipsis; }
.cal-ev bdi { color: var(--ink-3); flex: none; }
.cal-ev:hover { border-color: var(--line-strong); color: var(--ink); }
.cal-ev.ev-step { background: var(--brand-soft); border-color: transparent; color: var(--brand-ink); }
.cal-ev.due-over, .cal-ev.due-today { border-color: color-mix(in srgb, var(--due-over) 40%, var(--line)); }
.cal-more { font-size: var(--fs-xs); color: var(--ink-3); padding-inline: 5px; }

/* ── display options popover ── */
.display-pop { inline-size: 330px; padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-1-5); animation: pop var(--dur-1) var(--ease); }
.dp-row { margin-block-end: 4px; }
.dp-line { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2-5); min-block-size: 32px; font-size: var(--fs-sm); color: var(--ink-2); }
.dp-line .sel { inline-size: 150px; block-size: 28px; padding-inline: var(--sp-1-5); font-size: var(--fs-xs); }
.dp-sub { font-size: var(--fs-xs); color: var(--ink-3); margin-block-start: 6px; }
.dp-props { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.pchip { block-size: 24px; padding-inline: var(--sp-2); border-radius: var(--radius-sm); border: 1px solid var(--line); font-size: var(--fs-xs); color: var(--ink-3); }
.pchip.on { background: var(--active); color: var(--ink); border-color: var(--line-strong); }
.dp-foot { border-block-start: 1px solid var(--line); margin-block-start: 8px; padding-block-start: 8px; }
.dp-note { font-size: var(--fs-xs); }
.dp-actions { display: flex; justify-content: space-between; gap: var(--sp-1-5); }
.toggle { appearance: none; inline-size: 28px; block-size: 16px; border-radius: var(--radius); background: var(--line-strong); position: relative; cursor: pointer; transition: background var(--dur-2); flex: none; }
.toggle::after { content: ''; position: absolute; inset-block-start: 2px; inset-inline-start: 2px; inline-size: 12px; block-size: 12px; border-radius: 50%; background: var(--on-primary); transition: inset-inline-start var(--dur-2); box-shadow: 0 1px 2px var(--shadow-color); }
.toggle:checked { background: var(--brand); }
.toggle:checked::after { inset-inline-start: 14px; }
.field { display: flex; flex-direction: column; gap: var(--sp-1-5); font-size: var(--fs-sm); color: var(--ink-2); }
.field + .field { margin-block-start: 12px; }

/* ── phone: list drops secondary columns ── */
:root[data-device="phone"] .vh-row { padding-inline: var(--sp-2-5); gap: var(--sp-1-5); block-size: auto; min-block-size: 46px; flex-wrap: wrap; padding-block: var(--sp-1-5); }
:root[data-device="phone"] .crumbs, :root[data-device="phone"] .vh-new, :root[data-device="phone"] .vh-row .btn span:not(.count-dot) { display: none; }
:root[data-device="phone"] .tabs { margin-inline-start: 0; order: 5; inline-size: 100%; }
:root[data-device="phone"] .seg button[data-layout="board"] { display: none; }
:root[data-device="phone"] .row { block-size: auto; min-block-size: 56px; padding-block: var(--sp-2); align-items: flex-start; }
:root[data-device="phone"] .r-main { flex-direction: column; gap: 0; white-space: normal; }
:root[data-device="phone"] .r-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
:root[data-device="phone"] .r-person { max-inline-size: none; }
:root[data-device="phone"] .r-check, :root[data-device="phone"] .risk-chip span, :root[data-device="phone"] .warn-chip { display: none; }
:root[data-device="phone"] .r-due { min-inline-size: 0; }
:root[data-device="phone"] .cal-grid { grid-auto-rows: minmax(64px, 1fr); }
:root[data-device="phone"] .cal-ev span, :root[data-device="phone"] .cal-ev bdi { display: none; }
:root[data-device="phone"] .legend { display: none; }

/* ── banners ── */
.banner { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius); font-size: var(--fs-sm); border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); }
.banner.risk { display: flex; gap: var(--sp-2); align-items: center; padding: var(--sp-2) var(--sp-2-5); border-radius: var(--radius); font-size: var(--fs-sm); color: var(--due-over); border-color: color-mix(in srgb, var(--due-over) 30%, var(--line)); background: color-mix(in srgb, var(--due-over) 10%, var(--surface)); }
.banner.risk .btn { color: var(--ink); }
.banner.linked { margin: var(--sp-2-5) 14px 0; background: var(--brand-soft); border-color: transparent; color: var(--brand-ink); flex: none; }
.banner.linked .btn { margin-inline-start: auto; }

/* ── case detail ── */
.stepper { display: flex; align-items: center; gap: var(--sp-0-5); font-size: var(--fs-xs); color: var(--ink-3); }
.stepper bdi { margin-inline-end: 4px; }
.stepper .icon-btn:disabled { opacity: .35; pointer-events: none; }
.on-star { color: var(--attn); }
.on-star svg path { fill: var(--attn); }
.detail { flex: 1; min-block-size: 0; overflow: auto; display: grid; grid-template-columns: minmax(0, 1fr) 280px; }
.detail-main { padding: 26px clamp(18px, 4vw, 56px) 80px; display: flex; flex-direction: column; gap: var(--sp-4); max-inline-size: 860px; inline-size: 100%; justify-self: center; min-inline-size: 0; }
.detail-side { border-inline-start: 1px solid var(--line); padding: 18px var(--sp-4) 40px; display: flex; flex-direction: column; gap: var(--sp-0-5); background: var(--bg); }
:root[data-theme="dark"] .detail-side { background: var(--surface); }
.cd-title { font: 600 var(--fs-h1)/1.35 var(--font-display); margin: 0; color: var(--ink); outline: none; border-radius: var(--radius-sm); padding: var(--sp-0-5) var(--sp-1); margin-inline-start: -4px; }
.cd-title[contenteditable]:hover { background: var(--hover); }
.cd-title[contenteditable]:focus { background: var(--surface); box-shadow: 0 0 0 2px var(--brand-soft); }
.cd-person, .pk-person { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1-5) var(--sp-3); font-size: var(--fs-sm); }
.person-link { display: inline-flex; align-items: center; gap: var(--sp-1-5); color: var(--ink); font-weight: 500; padding: var(--sp-0-5) var(--sp-1-5); margin-inline-start: -6px; border-radius: var(--radius-sm); }
.person-link:hover { background: var(--hover); }
.person-link .ic { color: var(--ink-3); }
.alert-badge { display: inline-flex; align-items: center; gap: 5px; min-block-size: 24px; padding-inline: var(--sp-2); border-radius: var(--radius-pill); background: var(--danger-soft); color: var(--danger); font-size: var(--fs-xs); font-weight: 500; border: 1px solid var(--danger-line); max-inline-size: 100%;  white-space: normal;  }
:root[data-theme="dark"] .alert-badge { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-line); }
.cd-chips { display: none; flex-wrap: wrap; gap: var(--sp-1-5); }
.money-strip { display: flex; align-items: center; gap: var(--sp-1) 18px; flex-wrap: wrap; padding: var(--sp-2-5) 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.ms-cell { display: flex; flex-direction: column; line-height: 1.25; }
.ms-k { font-size: var(--fs-xs); color: var(--ink-3); }
.ms-v { font-weight: 600; font-size: var(--fs); color: var(--ink); }
.ms-cell.owed .ms-v { color: var(--money-owed); }
.inst-chip { color: var(--ink-2); }
.cd-teeth { display: flex; }
.cd-desc p { margin: 0; color: var(--ink-2); line-height: 1.75; }
.cd-section { display: flex; flex-direction: column; gap: var(--sp-2); }
.sec-head { display: flex; align-items: center; gap: var(--sp-2); min-block-size: 28px; }
.sec-head h3 { margin: 0; font: 600 var(--fs) var(--font-display); color: var(--ink); }
.file-btn { cursor: pointer; }

/* teeth chart */
.teeth-chart { display: inline-flex; flex-direction: column; gap: 3px; padding: var(--sp-2-5) var(--sp-3) var(--sp-1-5); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.tc-row { display: flex; gap: var(--sp-0-5); align-items: flex-end; }
.tc-row.lower { align-items: flex-start; }
.tooth { display: flex; flex-direction: column; align-items: center; gap: 1px; inline-size: 18px; }
.tc-row.lower .tooth { flex-direction: column-reverse; }
.tooth i { inline-size: 14px; block-size: 16px; border-radius: 5px 5px 7px 7px; border: 1px solid var(--line-strong); background: var(--surface-2); display: block; }
.tc-row.lower .tooth i { border-radius: 7px 7px 5px 5px; }
.tooth b { font: 500 var(--fs-xs)/1 var(--font); color: var(--ink-3); }
.tooth.on i { background: var(--brand); border-color: var(--brand); }
.tooth.on b { color: var(--brand); font-weight: 700; }
.tc-row .mid { inline-size: 1px; align-self: stretch; background: var(--line-strong); margin-inline: var(--sp-1); }
.tc-cap { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--ink-3); margin-block-start: 3px; }
.teeth-chart.small { padding: var(--sp-1-5) var(--sp-2); }
.teeth-chart.small .tooth { inline-size: 12px; }
.teeth-chart.small .tooth i { inline-size: 9px; block-size: 11px; border-radius: 3px; }
.teeth-chart.small .tooth b { display: none; }

/* attachments */
.att-strip { display: flex; gap: var(--sp-2); overflow-x: auto; padding-block-end: 4px; }
.att { flex: none; inline-size: 152px; display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-1); border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); text-align: start; }
.att:hover { border-color: var(--line-strong); box-shadow: 0 2px 8px -4px var(--shadow-color); }
.att img { inline-size: 100%; block-size: 96px; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-2); display: block; }
.att-name { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs); color: var(--ink-2); overflow: hidden; white-space: nowrap; padding-inline: var(--sp-0-5); }
.att-name bdi { overflow: hidden; text-overflow: ellipsis; }
.att-meta { font-size: var(--fs-xs); color: var(--ink-3); padding-inline: var(--sp-0-5); }
.att.sm { inline-size: 120px; }
.att.sm img { block-size: 70px; }
.att-empty { padding: var(--sp-2-5); font-size: var(--fs-xs); display: flex; gap: var(--sp-1-5); align-items: center; }

/* options */
.opt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-2-5); }
.opt { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); background: var(--surface); }
.opt.rec { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); box-shadow: 0 0 0 3px var(--brand-soft); }
.opt-top { display: flex; align-items: center; gap: var(--sp-2); }
.opt-name { font-weight: 600; flex: 1; }
.opt-total { font: 600 var(--fs-h3) var(--font-display); }
.opt .btn { align-self: flex-start; }
.rec-chip { color: var(--brand-ink); background: var(--brand-soft); border-color: transparent; }
.opt-note { font-size: var(--fs-xs); }

/* steps */
.inherit-note { font-size: var(--fs-xs); display: flex; align-items: center; gap: var(--sp-1-5); }
.steps { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.step { display: flex; align-items: center; gap: var(--sp-2-5); min-block-size: 42px; padding: var(--sp-1-5) var(--sp-3); border-block-end: 1px solid var(--line); font-size: var(--fs-sm); }
.step:last-child { border-block-end: 0; }
.step:hover { background: var(--hover); }
.step.done .st-title { color: var(--ink-3); }
.st-status { display: grid; place-items: center; padding: var(--sp-0-5); border-radius: var(--radius-xs); }
.st-status:hover:not(:disabled) { background: var(--active); }
.st-kind { color: var(--ink-3); display: grid; }
.st-title { flex: 1; min-inline-size: 0; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.st-date { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--ink-3); font-size: var(--fs-xs); white-space: nowrap; }
.st-who { inline-size: 22px; display: grid; place-items: center; }
.inherited { opacity: .45; }
.lab-live { display: inline-flex; align-items: center; gap: 5px; block-size: 24px; padding-inline: var(--sp-2); border-radius: var(--radius-pill); border: 1px solid var(--line-strong); font-size: var(--fs-xs); color: var(--ink-2); background: var(--surface-2); white-space: nowrap; }
.lab-live:hover { border-color: var(--brand); color: var(--ink); }
.add-step { display: inline-flex; align-items: center; gap: var(--sp-1-5); color: var(--ink-3); font-size: var(--fs-sm); padding: var(--sp-1) var(--sp-1-5); border-radius: var(--radius-sm); inline-size: fit-content; }
.add-step:hover { background: var(--hover); color: var(--ink); }
.step-composer { display: flex; gap: var(--sp-1-5); align-items: center; flex-wrap: wrap; }
.step-composer select { inline-size: auto; }
.step-composer input[name=title] { flex: 1; min-inline-size: 180px; }
.step-composer input[type=date] { inline-size: 150px; }

/* activity */
.acts { display: flex; flex-direction: column; gap: var(--sp-2); }
.ev { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--ink-3); padding-inline: var(--sp-1); line-height: 1.6; }
.ev b { color: var(--ink-2); font-weight: 500; }
.ev-icon { inline-size: 18px; block-size: 18px; display: grid; place-items: center; flex: none; border-radius: 50%; background: var(--surface-2); color: var(--ink-3); margin-block-start: 1px; }
.ev-body { color: var(--ink-2); }
.ev-time { color: var(--ink-3); white-space: nowrap; font-size: var(--fs-xs); }
.comment { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: var(--sp-2-5) var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-1-5); }
.comment.external { border-inline-start: 3px solid var(--info); }
.cm-head { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); }
.cm-head b { font-weight: 600; color: var(--ink); }
.ext-chip { block-size: 18px; font-size: var(--fs-xs); color: var(--info); }
.cm-body { color: var(--ink); line-height: 1.7; white-space: pre-wrap; }
.mention { color: var(--brand-ink); background: var(--brand-soft); padding: 0 var(--sp-1); border-radius: var(--radius-xs); font-weight: 500; }
.mention-role { color: var(--role-ink); background: var(--role-soft); }
:root[data-theme="dark"] .mention-role { color: var(--role-ink); background: var(--role-soft); }
.cm-files { display: flex; gap: var(--sp-1-5); flex-wrap: wrap; }
.reply { border-block-start: 1px solid var(--line); padding-block-start: 8px; margin-inline-start: 26px; display: flex; flex-direction: column; gap: var(--sp-1); }
.cm-actions { display: flex; gap: var(--sp-3); }
.link-btn { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs); color: var(--ink-3); }
.link-btn:hover { color: var(--ink); }
.resolved-collapsed { flex-direction: row; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--ink-3); background: var(--surface-2); padding: var(--sp-1-5) var(--sp-2-5); }
.sub-avatars { display: flex; }
.sub-avatars .avatar { margin-inline-start: -4px; box-shadow: 0 0 0 2px var(--bg); }
.composer { display: flex; gap: var(--sp-2-5); align-items: flex-start; margin-block-start: 6px; }
.composer > .avatar { margin-block-start: 8px; }
.cmp-box { flex: 1; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); padding: var(--sp-2) var(--sp-2-5) var(--sp-1-5); transition: border-color var(--dur-2), box-shadow var(--dur-2); }
.cmp-box:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.cmp-box textarea { inline-size: 100%; border: 0; outline: 0; resize: vertical; background: transparent; min-block-size: 36px; line-height: 1.6; }
.cmp-bar { display: flex; align-items: center; gap: var(--sp-1-5); }
.cmp-bar label { cursor: pointer; }
.cmp-files { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.cmp-hint .kbd { font-size: var(--fs-xs); }
.reply-composer { margin-block-start: 4px; }
.mention-pop { inline-size: 280px; padding: var(--sp-1); z-index: var(--z-menu); }
.role-icon { inline-size: 20px; block-size: 20px; border-radius: 50%; background: var(--role-soft); color: var(--role-ink); display: grid; place-items: center; }

/* properties panel */
.pp-title { display: flex; align-items: center; gap: var(--sp-1-5); font-size: var(--fs-xs); color: var(--ink-3); font-weight: 500; margin-block-end: 6px; }
.pp-row { display: flex; align-items: center; gap: var(--sp-2); min-block-size: 32px; }
.pp-row.col { flex-direction: column; align-items: stretch; gap: var(--sp-0-5); padding-block: var(--sp-1); }
.pp-k { inline-size: 92px; flex: none; font-size: var(--fs-xs); color: var(--ink-3); }
.pp-v { flex: 1; min-inline-size: 0; display: flex; align-items: center; gap: 7px; min-block-size: 30px; padding-inline: var(--sp-1-5); border-radius: var(--radius-sm); font-size: var(--fs-sm); color: var(--ink); text-align: start; overflow: hidden; }
.pp-v span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.pp-v:hover:not(:disabled), a.pp-v:hover { background: var(--hover); }
.pp-v.wrap { flex-wrap: wrap; padding-block: var(--sp-1); white-space: normal; }
.pp-v.wrap span { white-space: normal; }
.pp-v:disabled { cursor: default; }
.pp-sep { block-size: 1px; background: var(--line); margin-block: var(--sp-2-5); }
.pp-sub { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 500; margin-block-end: 4px; }
.rel { display: flex; align-items: center; gap: var(--sp-1-5); min-block-size: 28px; padding-inline: var(--sp-1-5); border-radius: var(--radius-sm); font-size: var(--fs-sm); color: var(--ink-2); }
a.rel:hover { background: var(--hover); }
.pp-subs { display: flex; gap: var(--sp-1); flex-wrap: wrap; padding-inline: var(--sp-1-5); }
.shade-dot { inline-size: 12px; block-size: 12px; border-radius: 50%; background: var(--shade); border: 1px solid var(--shade-line); flex: none; }

/* ── peek ── */
.pk-head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2-5) var(--sp-3); border-block-end: 1px solid var(--line); font-size: var(--fs-xs); }
.pk-body { padding: var(--sp-4) 18px var(--sp-5); overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-3); }
.pk-title { margin: 0; font: 600 var(--fs-h3)/1.35 var(--font-display); }
.pk-props { display: flex; flex-wrap: wrap; gap: var(--sp-1-5); }
.pk-props .chip { block-size: 26px; }
button.chip:hover { background: var(--hover); }
.pk-steps { display: flex; align-items: center; gap: var(--sp-2-5); font-size: var(--fs-xs); }
.pk-steps-bar { flex: 1; block-size: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; border: 1px solid var(--line); }
.pk-steps-bar span { display: block; block-size: 100%; background: var(--pos); }
.pk-flag { display: flex; align-items: center; gap: var(--sp-1-5); color: var(--due-soon); font-size: var(--fs-sm); font-weight: 500; }
.pk-desc { margin: 0; color: var(--ink-2); line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.pk-link { display: inline-flex; align-items: center; gap: var(--sp-1-5); color: var(--brand); font-size: var(--fs-sm); font-weight: 500; inline-size: fit-content; }

/* ── lightbox ── */
.modal.lightbox { inline-size: min(980px, calc(100vw - 40px)); max-block-size: 86vh; background: var(--demo-bg); color: var(--demo-ink); }
.modal-wrap:has(.lightbox) { padding-block-start: 6vh; background: var(--scrim); }
.lightbox .modal-body { padding: 0; display: flex; flex-direction: column; }
.lb-top { display: flex; align-items: center; gap: var(--sp-2-5); padding: var(--sp-2-5) var(--sp-3); font-size: var(--fs-sm); }
.lb-top .muted { color: var(--demo-muted); font-size: var(--fs-xs); }
.lb-name { display: inline-flex; align-items: center; gap: var(--sp-1-5); font-weight: 500; }
.lightbox .btn { background: var(--demo-active); border-color: var(--demo-line); color: var(--demo-ink); }
.lightbox .icon-btn { color: var(--demo-muted); }
.lb-stage { position: relative; display: grid; place-items: center; padding: var(--sp-2-5) 56px; min-block-size: 360px; }
.lb-stage img { max-inline-size: 100%; max-block-size: 60vh; border-radius: var(--radius); inline-size: 640px; block-size: auto; object-fit: contain; }
.lb-stage video, .lb-stage audio { position: absolute; inset-block-end: 20px; inline-size: 70%; }
.lb-nav { position: absolute; inset-block-start: 50%; translate: 0 -50%; inline-size: 38px; block-size: 38px; border-radius: 50%; background: var(--demo-active); color: var(--on-primary); display: grid; place-items: center; }
.lb-nav.prev { inset-inline-start: 10px; }
.lb-nav.next { inset-inline-end: 10px; }
.lb-foot { text-align: center; padding: var(--sp-2); font-size: var(--fs-xs); color: var(--demo-muted); }

/* phone: detail */
:root[data-device="phone"] .detail { grid-template-columns: minmax(0, 1fr); }
:root[data-device="phone"] .detail-side { display: none; }
:root[data-device="phone"] .detail-main { padding: var(--sp-4) 14px 90px; gap: var(--sp-3); }
:root[data-device="phone"] .cd-title { font-size: var(--fs-h2); }
:root[data-device="phone"] .cd-chips { display: flex; }
:root[data-device="phone"] .crumb-title, :root[data-device="phone"] .crumbs a { display: none; }
:root[data-device="phone"] .teeth-chart .tooth { inline-size: 15px; }
:root[data-device="phone"] .teeth-chart .tooth i { inline-size: 11px; }
:root[data-device="phone"] .money-strip { gap: var(--sp-1) 14px; }
:root[data-device="phone"] .step { flex-wrap: wrap; }
:root[data-device="phone"] .composer > .avatar { display: none; }
:root[data-device="phone"] .banner.risk { flex-wrap: wrap; }

/* ── patient hub / dentist page ── */
.hub { flex: 1; min-block-size: 0; overflow: auto; padding: 22px clamp(var(--sp-4), 3vw, 40px) 80px; }
.hub-head { display: flex; align-items: flex-start; gap: var(--sp-4); max-inline-size: 1180px; margin-inline: auto; margin-block-end: 18px; flex-wrap: wrap; }
.hub-avatar { inline-size: 52px; block-size: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-2), var(--brand)); color: var(--on-primary); display: grid; place-items: center; font: 600 var(--fs-h3)/1 var(--font-display); white-space: nowrap; flex: none; }
.hub-avatar.lab { background: linear-gradient(135deg, var(--status-teal), var(--role-ink)); }
.hub-id { flex: 1; min-inline-size: 220px; display: flex; flex-direction: column; gap: var(--sp-1); }
.hub-id h1 { margin: 0; font: 600 var(--fs-h1)/1.3 var(--font-display); }
.hub-meta { display: flex; flex-wrap: wrap; gap: var(--sp-1) 14px; color: var(--ink-3); font-size: var(--fs-sm); }
.hub-alerts { display: flex; gap: var(--sp-1-5); flex-wrap: wrap; margin-block-start: 4px; }
.hub-note { font-size: var(--fs-xs); }
.hub-actions { display: flex; gap: var(--sp-1-5); flex-wrap: wrap; }
.hub-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-4); max-inline-size: 1180px; margin-inline: auto; align-items: start; }
.hub-main, .hub-side { display: flex; flex-direction: column; gap: var(--sp-4); min-inline-size: 0; }
.hub-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-3) 14px; display: flex; flex-direction: column; gap: var(--sp-1-5); }
.hub-group + .hub-group { margin-block-start: 6px; }
.hub-gh { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--ink-2); font-weight: 500; padding-block: var(--sp-1); }
.hub-row, .hub-appt { display: flex; align-items: center; gap: var(--sp-2-5); min-block-size: 38px; padding-inline: var(--sp-2); border-radius: var(--radius-sm); font-size: var(--fs-sm); text-align: start; inline-size: 100%; }
.hub-row:hover, .hub-appt:hover { background: var(--hover); }
.hub-row .r-title, .hub-appt .r-title { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ha-date { display: flex; flex-direction: column; line-height: 1.2; inline-size: 92px; flex: none; font-size: var(--fs-xs); }
.ha-date b { font-weight: 600; color: var(--ink); }
.hub-sub { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 500; margin-block-start: 6px; }
.hub-empty { font-size: var(--fs-sm); padding: var(--sp-1-5) var(--sp-2); display: flex; align-items: center; gap: var(--sp-1-5); }
.file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-2); }
.file-grid .att { inline-size: auto; }
.bal-big { display: flex; flex-direction: column; font: 600 var(--fs-num-xl)/1.2 var(--font-display); }
.bal-big.owed { color: var(--due-soon); }
.bal-big .muted { font: 400 var(--fs-xs) var(--font); }
.kv { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2-5); font-size: var(--fs-sm); min-block-size: 28px; color: var(--ink-2); }
.kv.col { flex-direction: column; align-items: flex-start; gap: 0; padding-block: 3px; }
.kv.col span { font-size: var(--fs-xs); color: var(--ink-3); }
.kv b { font-weight: 500; color: var(--ink); }
.inst { display: flex; flex-direction: column; gap: var(--sp-0-5); }
.inst-row { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); min-block-size: 26px; color: var(--ink-2); }
.inst-dot { inline-size: 8px; block-size: 8px; border-radius: 50%; border: 1.5px solid var(--ink-3); }
.inst-row.paid .inst-dot { background: var(--pos); border-color: var(--pos); }
.inst-row.paid { color: var(--ink-3); }
.hub-side .teeth-chart { align-self: flex-start; }
:root[data-device="phone"] .hub-grid { grid-template-columns: minmax(0, 1fr); }
:root[data-device="phone"] .hub { padding: 14px var(--sp-3) 90px; }
:root[data-device="phone"] .hub-row .chip, :root[data-device="phone"] .hub-row .due { display: none; }

/* ── inbox split ── */
.split { flex: 1; min-block-size: 0; display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); }
.split-list { overflow-y: auto; border-inline-end: 1px solid var(--line); }
.split-pane { overflow: hidden; display: flex; flex-direction: column; min-inline-size: 0; }
.pane-case { flex: 1; min-block-size: 0; display: flex; flex-direction: column; }
.pane-case .detail-main { padding-block-start: 18px; }
.pane-note { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) 14px; border-block-end: 1px solid var(--line); background: var(--surface-2); font-size: var(--fs-sm); color: var(--ink-2); flex: none; }
.pane-acts { display: flex; gap: var(--sp-0-5); }
.pane-empty { flex: 1; align-content: center; }
.pane-empty .ic { color: var(--ink-3); }
.kbd-row { display: flex; gap: var(--sp-1); align-items: center; color: var(--ink-3); font-size: var(--fs-xs); }
.ib-row { position: relative; display: flex; align-items: flex-start; gap: var(--sp-2-5); padding: var(--sp-2-5) var(--sp-3) var(--sp-2-5) var(--sp-2-5); border-block-end: 1px solid color-mix(in srgb, var(--line) 60%, transparent); cursor: default; }
.ib-row:hover { background: var(--hover); }
.ib-row.selected { background: var(--active); }
.ib-row.selected::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 2px; background: var(--brand); }
.ib-dot { inline-size: 7px; block-size: 7px; border-radius: 50%; margin-block-start: 8px; flex: none; }
.ib-row.unread .ib-dot { background: var(--brand); }
.ib-av { margin-block-start: 2px; }
.avatar.sys { background: var(--surface-2); color: var(--ink-3); border: 1px solid var(--line); }
.ib-main { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--sp-0-5); }
.ib-l1 { display: flex; align-items: center; gap: var(--sp-1-5); font-size: var(--fs-xs); min-inline-size: 0; }
.ib-title { color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); }
.ib-row:not(.unread) .ib-title { color: var(--ink-2); font-weight: 400; }
.ib-l2 { font-size: var(--fs-xs); color: var(--ink-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.55; }
.ib-kind { display: inline-flex; align-items: center; gap: 3px; color: var(--ink-2); margin-inline-end: 6px; }
.ib-time { font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-1); }
.split-pane .detail { grid-template-columns: minmax(0, 1fr) 250px; }
.split-pane .detail-main { padding-inline: var(--sp-6); }
:root[data-device="phone"] .split { grid-template-columns: minmax(0, 1fr); }
:root[data-device="phone"] .split-pane { display: none; }
:root[data-device="phone"] .split.pane-open .split-list { display: none; }
:root[data-device="phone"] .split.pane-open .split-pane { display: flex; }

/* ── my day ── */
.myday { flex: 1; min-block-size: 0; overflow: auto; padding: 26px clamp(var(--sp-4), 4vw, 56px) 80px; }
.myday > * { max-inline-size: 920px; margin-inline: auto; }
.md-tip { font-size: var(--fs-xs); }
.md-hero h1 { margin: 0; font: 600 var(--fs-num-xl)/1.3 var(--font-display); }
.md-date { color: var(--ink-3); font-size: var(--fs-sm); margin-block: var(--sp-0-5) var(--sp-2-5); }
.md-sum { display: flex; gap: var(--sp-1-5); flex-wrap: wrap; }
.md-sum .chip { block-size: 26px; }
.md-sections { display: flex; flex-direction: column; gap: 18px; margin-block-start: 22px; }
.md-sec { display: flex; flex-direction: column; }
.md-sec-head { display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-1) var(--sp-1-5); border-block-end: 1px solid var(--line); margin-block-end: 2px; }
.md-sec-head h3 { margin: 0; font: 600 var(--fs) var(--font-display); }
.md-sec.empty-sec .md-sec-head { opacity: .6; }
.md-none { font-size: var(--fs-xs); color: var(--ink-3); padding: var(--sp-2) var(--sp-1-5); }
.md-row { position: relative; display: flex; align-items: center; gap: var(--sp-2-5); min-block-size: 48px; padding: var(--sp-1-5) var(--sp-2-5); border-radius: var(--radius-sm); font-size: var(--fs-sm); cursor: default; }
.md-row:hover, .md-row.focused { background: var(--hover); }
.md-row.focused::before { content: ''; position: absolute; inset-block: 6px; inset-inline-start: 0; inline-size: 2px; border-radius: 2px; background: var(--brand); }
.md-main { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; line-height: 1.35; }
.md-main .r-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-sub { font-size: var(--fs-xs); color: var(--ink-3); display: flex; align-items: center; gap: var(--sp-1); white-space: nowrap; overflow: hidden; }
.chip.why { color: var(--ink-2); background: var(--surface-2); }
.md-time { inline-size: 64px; flex: none; font-size: var(--fs-sm); }
.appt-bar { inline-size: 3px; align-self: stretch; border-radius: 2px; flex: none; }
.md-row.past { opacity: .55; }
.alert-inline { color: var(--danger); display: inline-flex; align-items: center; gap: 3px; }
:root[data-theme="dark"] .alert-inline { color: var(--danger); }
.lab-strip { margin-block-start: 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: var(--sp-3) 14px; }
.ls-head { display: flex; align-items: center; gap: var(--sp-2); margin-block-end: 10px; }
.ls-head h3 { margin: 0; font: 600 var(--fs) var(--font-display); }
.ls-cells { display: flex; gap: var(--sp-1-5); flex-wrap: wrap; align-items: stretch; }
.ls-cell { display: flex; flex-direction: column; gap: var(--sp-0-5); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius); background: var(--surface-2); min-inline-size: 92px; }
.ls-cell:hover { background: var(--hover); }
.ls-n { font: 600 var(--fs-h2)/1.1 var(--font-display); }
.ls-l { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; }
.ls-cell.hot .ls-n { color: var(--due-over); }
.ls-sep { inline-size: 1px; background: var(--line); margin-inline: var(--sp-1); }
:root[data-device="phone"] .md-tip { display: none; }
:root[data-device="phone"] .myday { padding: var(--sp-4) var(--sp-2-5) 90px; }
:root[data-device="phone"] .md-row .chip, :root[data-device="phone"] .md-row .due, :root[data-device="phone"] .md-row .case-id { display: none; }
:root[data-device="phone"] .md-row .btn { padding-inline: var(--sp-1-5); }

/* ── calendar ── */
.cal-range { font: 600 var(--fs-sm) var(--font-display); margin-inline-start: 4px; white-space: nowrap; }
.docs { display: flex; gap: var(--sp-1); }
.doc { display: inline-flex; align-items: center; gap: var(--sp-1-5); block-size: 26px; padding-inline: var(--sp-2); border-radius: var(--radius-pill); border: 1px solid var(--line); font-size: var(--fs-xs); color: var(--ink-2); }
.doc.off { opacity: .45; text-decoration: line-through; }
.doc-dot { inline-size: 8px; block-size: 8px; border-radius: 50%; flex: none; }
.cal-body { flex: 1; min-block-size: 0; overflow: auto; }
.wk { min-inline-size: 760px; }
.wk-head { position: sticky; inset-block-start: 0; z-index: var(--z-header); display: grid; grid-template-columns: 56px repeat(var(--cols), minmax(0, 1fr)); background: var(--bg); border-block-end: 1px solid var(--line); }
:root[data-theme="dark"] .wk-head { background: var(--surface); }
.wk-dh { display: flex; align-items: center; justify-content: center; gap: var(--sp-1-5); block-size: 44px; font-size: var(--fs-sm); color: var(--ink-2); border-inline-start: 1px solid var(--line); }
.dh-num { font: 600 var(--fs) var(--font-display); color: var(--ink); inline-size: 26px; block-size: 26px; display: grid; place-items: center; border-radius: 50%; }
.wk-dh.today .dh-num, .lw-day.today .dh-num { background: var(--primary); color: var(--on-primary); }
.wk-dh.today .dh-name { color: var(--brand); font-weight: 600; }
.wk-grid { display: grid; grid-template-columns: 56px repeat(var(--cols), minmax(0, 1fr)); position: relative; }
.wk-hour { position: relative; font-size: var(--fs-xs); color: var(--ink-3); }
.wk-hour span { position: absolute; inset-block-start: -7px; inset-inline-end: 8px; white-space: nowrap; }
.wk-col { position: relative; border-inline-start: 1px solid var(--line); }
.wk-col.today { background: color-mix(in srgb, var(--brand-soft) 35%, transparent); }
.wk-cell { border-block-end: 1px solid color-mix(in srgb, var(--line) 70%, transparent); cursor: copy; }
.wk-cell:hover { background: var(--hover); }
.now-line { position: absolute; inset-inline: 0; block-size: 2px; background: var(--danger); z-index: var(--z-overlay); pointer-events: none; }
.now-line::before { content: ''; position: absolute; inset-inline-start: -4px; inset-block-start: -3px; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--danger); }
.appt { position: absolute; inset-inline: 3px; z-index: var(--z-content); display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 3px var(--sp-1-5); border-radius: var(--radius-sm); text-align: start; overflow: hidden; font-size: var(--fs-xs); line-height: 1.35;
  background: color-mix(in srgb, var(--c) 14%, var(--surface)); border-inline-start: 3px solid var(--c); color: var(--ink); box-shadow: 0 1px 2px var(--shadow-color); }
.appt:hover { background: color-mix(in srgb, var(--c) 22%, var(--surface)); z-index: var(--z-overlay); }
.appt.tentative { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 10%, var(--surface)) 0 6px, var(--surface) 6px 12px); border-inline-start-style: dashed; }
.appt.done { opacity: .55; }
.ap-time { color: var(--ink-3); font-size: var(--fs-xs); }
.ap-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-inline-size: 100%; }
.ap-title { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-inline-size: 100%; }
.ap-risk { position: absolute; inset-block-start: 3px; inset-inline-end: 4px; display: inline-flex; align-items: center; gap: 3px; padding: 1px var(--sp-1-5); border-radius: var(--radius-pill); background: var(--danger-fill); color: var(--on-primary); font-size: var(--fs-xs); font-weight: 600; }
.lab-week { display: grid; grid-template-columns: repeat(var(--cols), minmax(170px, 1fr)); gap: var(--sp-2); padding: var(--sp-3); min-block-size: 100%; align-items: start; }
.lw-day { background: var(--surface-2); border-radius: var(--radius-lg); padding: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-1-5); min-block-size: 240px; }
.lw-day.today { box-shadow: inset 0 0 0 1px var(--brand); }
.lw-day header { display: flex; align-items: center; gap: var(--sp-1-5); font-size: var(--fs-sm); padding: var(--sp-0-5) var(--sp-1) var(--sp-1); }
.lw-sub { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs); color: var(--ink-3); padding-inline: var(--sp-1); margin-block-start: 2px; }
.lab-ev { display: flex; flex-direction: column; gap: 3px; padding: var(--sp-2); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); text-align: start; font-size: var(--fs-sm); }
.lab-ev:hover { border-color: var(--line-strong); }
.lab-ev.pickup { border-style: dashed; }
.lab-ev.due-over { border-color: color-mix(in srgb, var(--due-over) 45%, var(--line)); }
.le-top { display: flex; align-items: center; gap: var(--sp-1-5); font-size: var(--fs-xs); }
.le-title { font-weight: 500; color: var(--ink); }
.le-sub { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs); color: var(--ink-3); }
.agenda { padding: var(--sp-2) var(--sp-2-5) 90px; display: flex; flex-direction: column; gap: var(--sp-3); }
.ag-head { font: 600 var(--fs-sm) var(--font-display); padding: var(--sp-1) var(--sp-1-5); color: var(--ink-2); }
.ag-day.today .ag-head { color: var(--brand); }
.ag-row { display: flex; align-items: center; gap: var(--sp-2-5); inline-size: 100%; min-block-size: 52px; padding: var(--sp-1-5) var(--sp-2); border-radius: var(--radius); text-align: start; }
.ag-row:hover { background: var(--hover); }
.ag-day .lab-ev { margin-block-end: 6px; }
:root[data-device="phone"] .docs, :root[data-device="phone"] .cal-range { display: none; }

/* ── command menu ── */
.modal.palette { inline-size: min(640px, calc(100vw - 32px)); max-block-size: 70vh; overflow: hidden; }
.palette .modal-body { padding: 0; display: flex; flex-direction: column; min-block-size: 0; overflow: hidden; }
.pal-ctx:empty { display: none; }
.pal-ctx { padding: var(--sp-2-5) 14px 0; }
.ctx-chip { display: inline-flex; align-items: center; gap: var(--sp-1-5); max-inline-size: 100%; block-size: 24px; padding-inline: var(--sp-2) var(--sp-1); border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); font-size: var(--fs-xs); color: var(--ink-2); }
.ctx-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctx-chip button { display: grid; place-items: center; inline-size: 16px; block-size: 16px; border-radius: var(--radius-xs); color: var(--ink-3); }
.ctx-chip button:hover { background: var(--hover); }
.pal-input { display: flex; align-items: center; gap: var(--sp-2-5); padding: var(--sp-3) var(--sp-4); border-block-end: 1px solid var(--line); color: var(--ink-3); }
.pal-input input { flex: 1; border: 0; outline: 0; background: transparent; font-size: var(--fs-lg); color: var(--ink); }
.pal-list { overflow-y: auto; padding: var(--sp-1-5); flex: 1; min-block-size: 0; }
.pal-group { padding: var(--sp-2) var(--sp-2-5) var(--sp-1); font-size: var(--fs-xs); color: var(--ink-3); font-weight: 500; }
.pal-item { display: flex; align-items: center; gap: var(--sp-2-5); inline-size: 100%; min-block-size: 38px; padding: var(--sp-1) var(--sp-2-5); border-radius: var(--radius-sm); text-align: start; font-size: var(--fs-sm); color: var(--ink); }
.pal-item[aria-selected="true"] { background: var(--hover); }
.pi-icon { inline-size: 18px; display: grid; place-items: center; color: var(--ink-3); flex: none; }
.pi-label { flex: 1; min-inline-size: 0; display: flex; align-items: baseline; gap: var(--sp-2); overflow: hidden; white-space: nowrap; }
.pi-label > :not(.pi-sub) { flex: none; }
.pi-sub { color: var(--ink-3); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; }
.pi-hint { display: flex; gap: var(--sp-0-5); flex: none; }
.pal-foot { padding: var(--sp-2) 14px; border-block-start: 1px solid var(--line); font-size: var(--fs-xs); color: var(--ink-3); }
/* shortcuts sheet */
.sc-note { margin-block-end: 12px; }
.sc-grid { columns: 2 260px; column-gap: 28px; }
.sc-sec { break-inside: avoid; margin-block-end: 16px; }
.sc-sec h4 { margin: 0 0 var(--sp-1-5); font: 600 var(--fs-sm) var(--font-display); color: var(--ink-2); }
.sc-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2-5); min-block-size: 28px; font-size: var(--fs-sm); color: var(--ink-2); border-block-end: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.sc-keys { display: flex; align-items: center; gap: var(--sp-0-5); }
/* create */
.modal.create .modal-body { display: flex; flex-direction: column; gap: var(--sp-3); }
.cr-tpls { display: flex; gap: var(--sp-1-5); flex-wrap: wrap; }
.tpl { display: inline-flex; align-items: center; gap: var(--sp-1-5); block-size: 30px; padding-inline: var(--sp-2-5); border-radius: var(--radius-pill); border: 1px solid var(--line); font-size: var(--fs-xs); color: var(--ink-2); }
.tpl:hover { background: var(--hover); }
.tpl.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink); }
.cr-title { border: 0; outline: 0; background: transparent; font: 600 var(--fs-h2)/1.4 var(--font-display); color: var(--ink); padding: var(--sp-1) 0; }
.cr-props { display: flex; gap: var(--sp-1-5); flex-wrap: wrap; }
.cr-props .sel { inline-size: auto; min-inline-size: 120px; block-size: 30px; font-size: var(--fs-xs); }
.cr-steps { font-size: var(--fs-xs); line-height: 1.6; }
.cr-more { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--ink-3); }
.modal-foot .kbd { background: var(--primary-hover); border-color: transparent; color: var(--on-primary); margin-inline-start: 4px; }
.ltr-input { direction: ltr; text-align: start; }
[dir="rtl"] .ltr-input { text-align: end; }

/* ── money ── */
.money { flex: 1; min-block-size: 0; overflow: auto; padding: 18px clamp(14px, 3vw, var(--sp-8)) 80px; }
.mo-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-2-5); }
.mo-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: var(--sp-3) 14px; display: flex; flex-direction: column; gap: var(--sp-0-5); }
.mo-k { font-size: var(--fs-xs); color: var(--ink-3); }
.mo-v { font: 600 var(--fs-h2)/1.25 var(--font-display); }
.mo-card.hot .mo-v { color: var(--due-soon); }
.mo-lock { font-size: var(--fs-xs); display: flex; align-items: center; gap: var(--sp-1-5); margin-block: 14px var(--sp-2); }
.mo-actions { display: flex; justify-content: flex-end; margin-block-end: 8px; }
.mo-table { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow-x: auto; }
.mo-tr { display: grid; grid-template-columns: repeat(var(--n, 6), minmax(100px, 1fr)); min-inline-size: calc(var(--n, 6) * 120px); align-items: center; gap: var(--sp-3); min-block-size: 42px; padding-inline: 14px; border-block-end: 1px solid color-mix(in srgb, var(--line) 60%, transparent); font-size: var(--fs-sm); }
.mo-tr:last-child { border-block-end: 0; }
.mo-tr:not(.mo-th):hover { background: var(--hover); }
.mo-th { min-block-size: 34px; background: var(--surface-2); font-size: var(--fs-xs); color: var(--ink-3); font-weight: 500; }
.mo-tr > * { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mo-tr a:hover { color: var(--brand); }
.mo-tr .btn { justify-self: start; }
.mo-tr.fresh { background: color-mix(in srgb, var(--pos) 8%, transparent); }
.amt { text-align: end; font-weight: 500; }
.amt.owed { color: var(--due-soon); }
.mo-case { display: inline-flex; align-items: center; gap: var(--sp-1-5); }
.mo-case span { overflow: hidden; text-overflow: ellipsis; }
.state-pending { color: var(--due-soon); }
.state-cleared { color: var(--pos); }
.state-returned { color: var(--due-over); }
:root[data-device="phone"] .mo-th { display: none; }
:root[data-device="phone"] .money { padding: var(--sp-3) var(--sp-2-5) 90px; }
.detail-side { position: sticky; inset-block-start: 0; align-self: start; max-block-size: 100%; overflow-y: auto; min-block-size: 100%; }
.appt.short { flex-direction: row; align-items: center; gap: var(--sp-1-5); padding-block: 0; }
.appt.short .ap-name { flex: 1; min-inline-size: 0; }
.appt.short .ap-time { flex: none; }
.appt.short .ap-risk { position: static; flex: none; padding: 1px 3px; }
.appt.short .ap-risk span { display: none; }

/* ── round 2: appointment states + legend (booked = needs confirmation, tentative = striped) ── */
.appt.booked { background: var(--surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent); }
.appt.confirmed { background: color-mix(in srgb, var(--c) 16%, var(--surface)); }
.appt.arrived { background: color-mix(in srgb, var(--pos) 18%, var(--surface)); border-inline-start-color: var(--pos); }
.appt.in_chair { background: color-mix(in srgb, var(--c) 34%, var(--surface)); font-weight: 600; }
.appt.no_show { opacity: .6; } .appt.no_show .ap-name { text-decoration: line-through; color: var(--due-over); }
.cal-legend { display: flex; flex-wrap: wrap; gap: var(--sp-1) 14px; padding: 0 var(--sp-4) var(--sp-2); font-size: var(--fs-xs); color: var(--ink-3); }
.cal-legend .lg, .ap-chip .lg, .mi-icon .lg { inline-size: auto; block-size: auto; border-radius: 0; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.lg i { inline-size: 14px; block-size: 10px; border-radius: 3px; border-inline-start: 3px solid var(--brand); background: color-mix(in srgb, var(--brand) 16%, var(--surface)); }
.lg.booked i { background: var(--surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 45%, transparent); }
.lg.arrived i { border-color: var(--pos); background: color-mix(in srgb, var(--pos) 18%, var(--surface)); }
.lg.in_chair i { background: color-mix(in srgb, var(--brand) 34%, var(--surface)); }
.lg.done i { opacity: .5; }
.lg.no_show i { border-color: var(--due-over); background: var(--surface); }
.lg.tentative i { border-inline-start-style: dashed; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--brand) 16%, var(--surface)) 0 3px, var(--surface) 3px 6px); }
.cal-split { flex: 1; min-block-size: 0; display: flex; }
.cal-split > .cal-body { flex: 1; min-inline-size: 0; }
.cal-rail { inline-size: 264px; flex: none; overflow-y: auto; border-inline-end: 1px solid var(--line); padding: var(--sp-2-5); display: flex; flex-direction: column; gap: var(--sp-1-5); background: var(--surface-2); }
.rail-head { display: flex; align-items: center; gap: var(--sp-1-5); font-weight: 600; font-size: var(--fs-sm); padding-block-end: 4px; }
.rail-item { display: flex; flex-direction: column; gap: var(--sp-1-5); padding: var(--sp-2); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.rail-item .ri-main { display: flex; flex-direction: column; align-items: flex-start; text-align: start; gap: var(--sp-0-5); min-inline-size: 0; }
.rail-item .md-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-inline-size: 100%; }
.rail-item .btn { align-self: flex-start; }

/* booking dialog */
.modal.booking { inline-size: min(520px, 94vw); }
.modal.booking .modal-body { display: flex; flex-direction: column; gap: var(--sp-3); }
.bk-row { display: grid; align-items: end; grid-template-columns: 1.3fr 1.2fr 1fr; gap: var(--sp-2-5); }
.bk-search { position: relative; }
.bk-results { display: flex; flex-direction: column; }
.bk-results:not(:empty) { margin-block-start: 4px; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-1); background: var(--surface); }
.bk-msg:empty { display: none; }

/* privacy lock (F1) */
.att.locked-att { display: flex; align-items: center; justify-content: center; }
.kbd.ar-k { margin-inline-start: 2px; font-family: inherit; }

/* F11: tooth chart scales inside the hub side column */
.hub-side { min-inline-size: 0; }
.hub-side .teeth-chart { max-inline-size: 100%; overflow-x: auto; box-sizing: border-box; }
/* board: show that more columns exist off-screen */
.layout-board { overflow-x: auto; scrollbar-width: auto; }
.layout-board::-webkit-scrollbar { block-size: 10px; }
.layout-board::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--radius-sm); }
.board-fade { position: sticky; inset-inline-end: 0; inset-block-start: 0; inline-size: 28px; flex: none; align-self: stretch; background: linear-gradient(to left, var(--bg), transparent); pointer-events: none; }
:root[dir="rtl"] .board-fade { background: linear-gradient(to right, var(--bg), transparent); }
.next-visit { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--ink-3); font-size: var(--fs-xs); white-space: nowrap; }
.money-hero { font-weight: 700; }
.charge-pending { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs); color: var(--due-soon); }
:root[data-device="phone"] .bk-row { grid-template-columns: 1fr 1fr; }
:root[data-device="phone"] .bk-row > :first-child { grid-column: 1 / -1; }
:root[data-device="phone"] .modal.booking { inline-size: 100%; }
.banner.risk-act { flex-direction: column; align-items: stretch; gap: var(--sp-2); }
.ra-main { display: flex; gap: var(--sp-2); align-items: flex-start; }
.ra-text { display: flex; flex-direction: column; gap: var(--sp-0-5); min-inline-size: 0; }
.ra-meta { color: var(--ink-3); font-size: var(--fs-xs); }
.ra-actions { display: flex; flex-wrap: wrap; gap: var(--sp-1-5); padding-inline-start: 23px; }
.banner .case-id, .ra-meta .case-id { white-space: nowrap; }
.ms-cell.hero .ms-v { font-size: 1.15em; font-weight: 700; }
.ap-chip { gap: 5px; } .ap-chip .lg i { inline-size: 10px; block-size: 8px; }
.ch-list { display: flex; flex-direction: column; gap: var(--sp-1-5); margin-block: var(--sp-2); }
.ch-row { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-2-5); border: 1px solid var(--line); border-radius: var(--radius); }
.md-appt .btn { flex: none; }
.md-time .md-sub { display: block; font-size: var(--fs-xs); }

/* ── people directory (#/people) ── */
.dir-wrap { max-inline-size: 980px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--sp-3); }
.dir-search { inline-size: 100%; max-inline-size: 420px; }
.dir-row { min-block-size: 52px; }
.dir-row[hidden] { display: none; }
.dir-col { display: flex; flex-direction: column; line-height: 1.25; font-size: var(--fs-xs); inline-size: 130px; flex: none; }
.dir-col.dir-money { inline-size: 112px; white-space: nowrap; }
.dir-col b { font-weight: 600; color: var(--ink); font-size: var(--fs-sm); }
.dir-col b.owed { color: var(--danger, var(--danger)); }
:root[data-device="phone"] .dir-col:not(.dir-money) { display: none; }
.dir-col b.zero { color: var(--ink-3); font-weight: 500; }
.dir-list [data-dir-empty][hidden] { display: none; }
:root[data-device="phone"] .dir-row .md-sub { white-space: normal; flex-wrap: wrap; }

/* ── round 3 (ClinicR3): one charge at acceptance, checkout, express, chairs, WhatsApp ── */
.ms-note { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs); }
.consent-chip { color: var(--pos); border-color: color-mix(in srgb, var(--pos) 35%, var(--line)); }
.express-chip { color: var(--ink-2); background: var(--surface-2); flex: none; }
.st-portion { font-size: var(--fs-xs); white-space: nowrap; }
.opt-items { display: flex; flex-direction: column; gap: var(--sp-0-5); font-size: var(--fs-xs); color: var(--ink-2); }
.opt-item { display: flex; align-items: center; gap: var(--sp-1-5); min-block-size: 20px; }
.opt-total .muted { font: 400 var(--fs-xs) var(--font); }
.inst-row.due { color: var(--due-soon); font-weight: 500; }
.inst-row.due .inst-dot { border-color: var(--due-soon); }

/* plan acceptance: review → confirm */
.modal.accept { inline-size: min(560px, 94vw); }
.modal.accept .modal-body { max-block-size: min(70vh, 640px); overflow-y: auto; }
.acc { display: flex; flex-direction: column; gap: var(--sp-3); }
.acc-steps { display: flex; gap: 14px; font-size: var(--fs-xs); color: var(--ink-3); }
.acc-steps .on { color: var(--brand); font-weight: 600; }
.acc-steps .done { color: var(--ink-2); }
.acc-opt { display: flex; align-items: baseline; gap: var(--sp-2-5); flex-wrap: wrap; }
.acc-items { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-1-5) var(--sp-2-5); display: flex; flex-direction: column; }
.acc-h { font-size: var(--fs-xs); color: var(--ink-3); padding-block: var(--sp-0-5) var(--sp-1); }
.acc-item { display: flex; align-items: center; gap: var(--sp-2); min-block-size: 30px; font-size: var(--fs-sm); border-block-start: 1px solid var(--line); }
.acc-item.total { font-weight: 600; }
.acc-check { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); cursor: pointer; }
.acc-check.consent { padding: var(--sp-2) var(--sp-2-5); border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line); font-weight: 500; }
.acc-inst { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2-5); }
.acc-inst .field + .field { margin: 0; }
.acc-inst-list { max-block-size: 160px; overflow-y: auto; padding-inline-end: 4px; }
.acc-sched { font-size: var(--fs-xs); }
.acc-print { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.acc-foot { display: flex; align-items: center; gap: var(--sp-2); inline-size: 100%; }
.acc-need { font-size: var(--fs-xs); }
.acc-big { display: flex; flex-direction: column; gap: var(--sp-0-5); font: 700 var(--fs-num-xl) var(--font-display); }
.acc-big .muted { font: 400 var(--fs-sm) var(--font); }
.acc p { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.6; }
.acc .kv { justify-content: flex-start; }

/* checkout */
.modal.checkout { inline-size: min(480px, 94vw); }
.modal.checkout .modal-body, .modal .co-kv { display: flex; flex-direction: column; gap: var(--sp-3); }
.modal .co-kv { flex-direction: row; gap: 22px; padding: var(--sp-2) var(--sp-2-5); border: 1px solid var(--line); border-radius: var(--radius); }
.co-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; font-size: var(--fs-sm); }
.co-note { font-size: var(--fs-xs); margin-block-start: -6px; }
.co-amt { font-weight: 600; white-space: nowrap; }
.md-co .btn { flex: none; }
.co-kvrow { gap: var(--sp-2); flex-wrap: wrap; }
.co-kvrow .btn { flex: none; }

/* booking: mode toggle + single visit */
.bk-mode { margin-block-end: 2px; }
.bk-single { display: flex; flex-direction: column; gap: var(--sp-2-5); }
.bk-single[hidden], [data-bk-casef][hidden], .bk-row > [hidden] { display: none; }
.bk-price { max-inline-size: 160px; }
.bk-note { font-size: var(--fs-xs); }
.modal.booking .bk-row { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }

/* WhatsApp delivery chip (simulated; nothing is sent) */
.wa-chip { gap: var(--sp-1); flex: none; color: var(--ink-2); }
.wa-chip b { font-size: var(--fs-xs); letter-spacing: -2px; color: var(--ink-3); font-weight: 600; }
.wa-chip.wa-delivered b { color: var(--ink-3); }
.wa-chip.wa-read { color: var(--whatsapp); border-color: color-mix(in srgb, var(--whatsapp) 35%, var(--line)); }
.wa-chip.wa-read b { color: var(--info); }
.wa-chip.wa-failed { color: var(--due-over); border-color: color-mix(in srgb, var(--due-over) 40%, var(--line)); }
.wa-chip.wa-failed b { color: var(--due-over); letter-spacing: 0; }
.wa-toggle { display: inline-flex; align-items: center; gap: var(--sp-1-5); font-size: var(--fs-xs); cursor: pointer; }
button.ap-chip { cursor: pointer; }
.am-title { display: flex; align-items: center; gap: var(--sp-1-5); flex-wrap: wrap; white-space: normal; }
.am-title b { color: var(--ink); }

/* calendar: chairs, badges */
.seg.seg-text button span { display: inline; }
.ap-badges { position: absolute; inset-block-start: 3px; inset-inline-end: 4px; display: inline-flex; align-items: center; gap: 3px; }
.appt.short .ap-badges { position: static; margin-inline-start: auto; }
.ap-chair { font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; }
.ap-doc .avatar { --avatar-size: 14px; }
.ap-co { color: var(--due-soon); display: inline-flex; }
.ap-wa { display: inline-flex; color: var(--ink-3); }
.ap-wa.wa-read { color: var(--whatsapp); } .ap-wa.wa-failed { color: var(--due-over); }
:root[data-device="phone"] .md-appt .wa-chip span, :root[data-device="phone"] .md-co .express-chip { display: none; }
:root[data-device="phone"] .md-appt, :root[data-device="phone"] .md-co { flex-wrap: wrap; }
:root[data-device="phone"] .md-co { display: grid; grid-template-columns: 64px 3px minmax(0, 1fr) auto; }
:root[data-device="phone"] .md-co .md-main { grid-column: 3; }
:root[data-device="phone"] .md-co .md-sub { white-space: normal; }
:root[data-device="phone"] .md-co .co-amt { grid-column: 4; grid-row: 1; }
:root[data-device="phone"] .md-co [data-checkout-appt] { grid-column: 3; justify-self: start; }
:root[data-device="phone"] .md-co [data-co-skip] { grid-column: 4; }
.modal .seg.wide button[aria-pressed="true"] { background: var(--brand-soft); color: var(--brand); font-weight: 600; }