/* Shell: demo bar, inverted-L chrome, sidebar, popovers, modal, peek, phone frame. Logical properties only. */
html, body { overflow: hidden; }
body { background: var(--bg-sidebar); }
.ic, .status-icon, .prio-icon { flex: none; display: block; }
.prio-icon { color: var(--ink-3); }
.prio-none { color: var(--ink-3); }
a, button, .sb-item, .menu-item, .row { transition: background-color var(--dur-2), color var(--dur-2), border-color var(--dur-2), opacity var(--dur-2); }

/* ── demo bar: clearly outside the product ── */
#demo-bar { position: fixed; inset-inline: 0; inset-block-start: 0; block-size: var(--demo-h); z-index: var(--z-header); display: flex; align-items: center; gap: var(--sp-1-5); padding-inline: var(--sp-2-5);
  background: var(--demo-bg); color: var(--demo-ink); font-size: var(--fs-xs); border-block-end: 1px solid var(--frame-edge); }
#demo-bar .db-badge { display: inline-flex; align-items: center; gap: 5px; padding: var(--sp-0-5) var(--sp-2); border-radius: var(--radius-pill); background: var(--demo-badge); color: var(--demo-badge-ink); font-weight: 600; font-size: var(--fs-xs); letter-spacing: .02em; }
#demo-bar .db-note { color: var(--demo-muted); font-size: var(--fs-xs); }
#demo-bar .db-spacer { flex: 1; }
#demo-bar .db-seg { display: inline-flex; border: 1px solid var(--demo-line); border-radius: var(--radius-sm); overflow: hidden; }
#demo-bar .db-seg button { block-size: 24px; min-inline-size: 30px; padding-inline: var(--sp-2); color: var(--demo-muted); display: inline-grid; place-items: center; font-size: var(--fs-xs); }
#demo-bar .db-seg button[aria-pressed="true"] { background: var(--demo-active); color: var(--on-primary); }
#demo-bar .db-seg button:hover { color: var(--on-primary); }
#demo-bar .db-btn { display: inline-flex; align-items: center; gap: var(--sp-1-5); block-size: 24px; padding-inline: var(--sp-2); border-radius: var(--radius-sm); border: 1px solid var(--demo-line); color: var(--demo-ink); font-size: var(--fs-xs); }
#demo-bar .db-btn:hover { background: var(--demo-hover); }
#demo-bar .db-role { color: var(--demo-muted); }
#demo-bar .avatar { --avatar-size: 16px; }
#demo-bar .center-logo { border-radius: var(--radius-xs); font-size: var(--fs-xs); }

/* ── app chrome ── */
#app { position: fixed; inset: var(--demo-h) 0 0 0; display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); background: var(--bg-sidebar); }
#app[data-sb="collapsed"] { grid-template-columns: 0 minmax(0, 1fr); }
#sb-edge { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 10px; z-index: var(--z-peek); display: none; }
#app[data-sb="collapsed"] #sb-edge { display: block; }
#sidebar { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; min-inline-size: 0; overflow: hidden; padding: var(--sp-2) var(--sp-2) var(--sp-1-5); color: var(--ink-2); }
#app[data-sb="collapsed"] #sidebar { position: absolute; inset-block: 8px; inset-inline-start: 0; inline-size: var(--sidebar-w); z-index: var(--z-sidebar); background: var(--bg-sidebar); border-radius: 0 10px 10px 0; box-shadow: var(--shadow-pop);
  transform: translateX(-105%); transition: transform var(--dur-3) var(--ease); }
[dir="rtl"] #app[data-sb="collapsed"] #sidebar { transform: translateX(105%); border-radius: 10px 0 0 10px; }
#app[data-sb="collapsed"].sb-reveal #sidebar { transform: none; }
#main { grid-column: 2; grid-row: 1; min-inline-size: 0; margin: var(--sp-2); margin-inline-start: 0; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-frame); overflow: hidden; display: flex; flex-direction: column; outline: none; }
#app[data-sb="collapsed"] #main { margin-inline-start: 8px; }
:root[data-theme="dark"] #main { background: var(--surface); }
.view { flex: 1; min-block-size: 0; display: flex; flex-direction: column; }

/* sidebar */
.sb-top { display: flex; align-items: center; gap: var(--sp-0-5); margin-block-end: 8px; }
.sb-center { flex: 1; min-inline-size: 0; display: flex; align-items: center; gap: var(--sp-2); block-size: 32px; padding-inline: var(--sp-1-5); border-radius: var(--radius-sm); font-weight: 600; color: var(--ink); font-size: var(--fs); }
.sb-center:hover { background: var(--hover); }
.sb-center-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-center .ic { color: var(--ink-3); }
.center-logo { display: inline-grid; place-items: center; border-radius: var(--radius-sm); color: var(--on-primary); font: 700 var(--fs-xs)/1 var(--font-display); flex: none; }
.sb-top-actions { display: flex; gap: var(--sp-0-5); }
.sb-new { border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); }
.sb-nav { flex: 1; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 1px; scrollbar-width: thin; }
.sb-item { position: relative; display: flex; align-items: center; gap: var(--sp-2); block-size: 30px; padding-inline: var(--sp-2); border-radius: var(--radius-sm); color: var(--ink-2); font-size: var(--fs-sm); font-weight: 500; text-align: start; inline-size: 100%; }
.sb-item:hover { background: var(--hover); color: var(--ink); }
.sb-item.active { background: var(--active); color: var(--ink); }
.sb-icon { inline-size: 16px; display: grid; place-items: center; color: var(--ink-3); flex: none; }
.sb-item.active .sb-icon { color: var(--ink-2); }
.sb-label { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-pre { color: var(--ink-3); font-size: var(--fs-xs); flex: none; }
.sb-count { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 500; }
.sb-dot { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--brand); flex: none; }
.sb-tag { font-size: var(--fs-xs); line-height: 1; padding: 3px var(--sp-1-5); border-radius: var(--radius-pill); background: var(--surface-2); border: 1px dashed var(--line-strong); color: var(--ink-3); font-weight: 500; white-space: nowrap; }
.sb-group { position: relative; }
.sb-caret { position: absolute; inset-inline-end: 4px; inset-block-start: 5px; inline-size: 20px; block-size: 20px; display: grid; place-items: center; border-radius: var(--radius-xs); color: var(--ink-3); transform: rotate(0); transition: transform var(--dur-2); }
.sb-caret:not(.open) { transform: rotate(-90deg); }
[dir="rtl"] .sb-caret:not(.open) { transform: rotate(90deg); }
.sb-caret:hover { background: var(--active); }
.sb-children { display: flex; flex-direction: column; gap: 1px; margin-block: 1px var(--sp-1); }
.sb-item.child { block-size: 28px; padding-inline-start: 32px; font-weight: 400; }
.sb-item.hidden-item { opacity: .75; }
.sb-section { margin-block-start: 14px; display: flex; flex-direction: column; gap: 1px; }
.sb-section-head { display: flex; align-items: center; gap: var(--sp-1); block-size: 24px; padding-inline: var(--sp-2); color: var(--ink-3); font-size: var(--fs-xs); font-weight: 500; border-radius: var(--radius-sm); inline-size: fit-content; }
.sb-section-head:hover { background: var(--hover); color: var(--ink-2); }
.sb-item.pinned { font-weight: 400; }
.sb-empty { padding: var(--sp-1) var(--sp-2); font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.5; }
.sb-bottom { border-block-start: 1px solid var(--line); padding-block-start: 6px; margin-block-start: 6px; display: flex; flex-direction: column; gap: var(--sp-1); }
.sb-bottom-row { display: flex; align-items: center; gap: var(--sp-1); }
.sb-me { flex: 1; min-inline-size: 0; display: flex; align-items: center; gap: var(--sp-1-5); font-size: var(--fs-xs); color: var(--ink-3); overflow: hidden; white-space: nowrap; }
.sb-me span:last-child { overflow: hidden; text-overflow: ellipsis; }

/* avatars */
.avatar-empty { background: transparent; border: 1px dashed var(--ink-3); color: var(--ink-3); }
.avatar-empty .ic { inline-size: 11px; block-size: 11px; }

/* ── popover pick ── */
.popover.pick { inline-size: 280px; padding: 0; overflow: hidden; display: flex; flex-direction: column; max-block-size: min(440px, calc(100vh - 80px)); animation: pop var(--dur-1) var(--ease); }
.popover.pick.wide { inline-size: 340px; }
@keyframes pop { from { opacity: 0; transform: translateY(-3px) scale(.99); } }
.pick-title { padding: var(--sp-2-5) var(--sp-3) 0; font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-title .case-id { color: var(--ink-2); font-weight: 500; }
.pick-search { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-block-end: 1px solid var(--line); color: var(--ink-3); }
.pick-search input { flex: 1; border: 0; outline: 0; background: transparent; block-size: 22px; font-size: var(--fs-sm); color: var(--ink); }
.pick-list { overflow-y: auto; padding: var(--sp-1); }
.pick-header { padding: var(--sp-1-5) var(--sp-2) var(--sp-0-5); font-size: var(--fs-xs); color: var(--ink-3); }
.pick-empty { padding: var(--sp-3); text-align: center; color: var(--ink-3); font-size: var(--fs-sm); }
.pick-foot { border-block-start: 1px solid var(--line); padding: var(--sp-1-5) var(--sp-3); font-size: var(--fs-xs); color: var(--ink-3); }
.menu-item { color: var(--ink); min-block-size: 32px; block-size: auto; padding-block: var(--sp-1); }
.menu-item.danger { color: var(--danger); }
.mi-icon { display: grid; place-items: center; inline-size: 18px; flex: none; color: var(--ink-3); }
.mi-label { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; line-height: 1.3; overflow: hidden; }
.mi-sub { font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mi-check { color: var(--brand); display: grid; }
.menu-item .kbd { margin-inline-start: auto; }
.check { inline-size: 15px; block-size: 15px; border-radius: var(--radius-xs); border: 1px solid var(--line-strong); display: grid; place-items: center; flex: none; background: var(--surface); }
.check.on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.dot-lg { inline-size: 9px; block-size: 9px; border-radius: 50%; display: inline-block; }

/* ── modal ── */
.modal-wrap { position: fixed; inset: 0; z-index: var(--z-dialog); background: var(--scrim); display: grid; place-items: start center; padding-block-start: 12vh; animation: fade var(--dur-1); }
:root[data-theme="dark"] .modal-wrap { background: var(--scrim); }
@keyframes fade { from { opacity: 0; } }
.modal { inline-size: min(520px, calc(100vw - 32px)); max-block-size: 76vh; display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); outline: none; animation: pop var(--dur-1) var(--ease); }
.modal.wide { inline-size: min(720px, calc(100vw - 32px)); }
.modal-head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) 14px var(--sp-1); }
.modal-title { flex: 1; font: 600 var(--fs) var(--font-display); color: var(--ink); display: flex; align-items: center; gap: var(--sp-2); }
.modal-body { padding: var(--sp-2-5) var(--sp-4) 14px; overflow-y: auto; }
.modal-foot { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-2-5) 14px; border-block-start: 1px solid var(--line); }
.demo-note { display: flex; gap: var(--sp-2); align-items: flex-start; padding: var(--sp-2) var(--sp-2-5); border-radius: var(--radius); background: var(--attention-soft); color: var(--attn); font-size: var(--fs-xs); border: 1px solid var(--attention-line); }
:root[data-theme="dark"] .demo-note { background: var(--attention-soft); color: var(--attn); border-color: var(--attention-line); }

/* ── peek (floating preview at inline-end) ── */
#peek { position: absolute; inset-block: 16px; inset-inline-end: 16px; inline-size: min(var(--peek-w), 46vw); z-index: var(--z-peek); background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); overflow: hidden; display: flex; flex-direction: column; animation: peekIn var(--dur-2) var(--ease); }
@keyframes peekIn { from { opacity: 0; transform: translateX(12px); } }
[dir="rtl"] #peek { animation-name: peekInRtl; }
@keyframes peekInRtl { from { opacity: 0; transform: translateX(-12px); } }
#peek[hidden] { display: none; }

/* ── keyboard hint row / misc ── */
.kbd + .kbd { margin-inline-start: 2px; }
.case-id { color: var(--ink-3); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.due { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; }
.due .ic { opacity: .8; }
.due-over { color: var(--due-over); font-weight: 500; }
.due-today { color: var(--due-over); }
.due-soon { color: var(--due-soon); }
.teeth-chip { color: var(--ink-2); gap: var(--sp-1); }
.teeth-chip .ic { color: var(--ink-3); }
.label-pill { gap: var(--sp-1-5); color: var(--ink-2); }

/* ── phone: hide sidebar, compact header, bottom bar ── */
:root[data-device="phone"] #app { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
:root[data-device="phone"] #sidebar, :root[data-device="phone"] #sb-edge { display: none; }
:root[data-device="phone"] #main { grid-column: 1; margin: 0; border: 0; border-radius: 0; }
:root[data-device="phone"] #phone-bar { grid-column: 1; grid-row: 2; }
#phone-bar[hidden] { display: none; }
#phone-bar:not([hidden]) { display: flex; justify-content: space-around; align-items: stretch; block-size: 60px; padding-block-end: env(safe-area-inset-bottom); background: var(--surface); border-block-start: 1px solid var(--line); }
.pb-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-0-5); font-size: var(--fs-xs); color: var(--ink-3); }
.pb-item.active { color: var(--brand); }
.phone-head { flex: none; display: flex; align-items: center; gap: var(--sp-2); block-size: 52px; padding-inline: var(--sp-3); border-block-end: 1px solid var(--line); background: var(--surface); }
.ph-center { display: flex; align-items: center; gap: var(--sp-1-5); font-weight: 600; font-family: var(--font-display); color: var(--ink); }
.ph-search { flex: 1; min-inline-size: 0; display: flex; align-items: center; gap: var(--sp-1-5); block-size: 34px; padding-inline: var(--sp-2-5); border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-3); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; }
.ph-search span { overflow: hidden; text-overflow: ellipsis; }
.ph-inbox { position: relative; inline-size: 36px; block-size: 36px; }
.ph-inbox .sb-dot { position: absolute; inset-block-start: 7px; inset-inline-end: 7px; }
:root[data-device="phone"] #peek { inset: auto 0 0 0; inline-size: auto; max-block-size: 82%; border-radius: 16px 16px 0 0; animation-name: sheetUp; }
@keyframes sheetUp { from { transform: translateY(30px); opacity: 0; } }

/* framed phone inside a desktop window */
:root[data-frame] body { background: radial-gradient(circle at 50% 30%, var(--frame-start), var(--frame-end)); }
:root[data-frame][data-theme="dark"] body { background: radial-gradient(circle at 50% 30%, var(--frame-start), var(--frame-end)); }
:root[data-frame] #app { inset: auto; inset-block-start: calc(var(--demo-h) + (100vh - var(--demo-h) - min(844px, calc(100vh - var(--demo-h) - 24px))) / 2); inset-inline: 0; margin-inline: auto; inline-size: 390px; block-size: min(844px, calc(100vh - var(--demo-h) - 24px));
  border-radius: 36px; overflow: hidden; box-shadow: var(--shadow-frame); transform: translateZ(0); background: var(--surface); }
:root[data-frame] .phone-head { padding-block-start: 10px; block-size: 60px; }
#demo-bar { overflow: hidden; white-space: nowrap; }
#demo-bar .db-btn { min-inline-size: 0; flex-shrink: 1; }
#demo-bar .db-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#demo-bar .db-btn[data-db="persona"] { max-inline-size: 300px; }
@media (max-width: 639px) {
  #demo-bar { gap: var(--sp-1); padding-inline: var(--sp-1-5); }
  #demo-bar .db-note, #demo-bar .db-role, #demo-bar [data-db="tour"] span, #demo-bar [data-db="reset"] span, #demo-bar [data-db="center"] span { display: none; }
  #demo-bar .db-btn[data-db="persona"] { max-inline-size: 110px; }
  #demo-bar .db-badge { font-size: 0; gap: 0; padding: var(--sp-1); }
}

/* Super Admin area (#/admin, AdminPrint): its own full-area layout, no business sidebar or phone bar. */
:root[data-area="admin"] #sidebar, :root[data-area="admin"] #sb-edge, :root[data-area="admin"] #phone-bar { display: none; }
:root[data-area="admin"] #app { grid-template-columns: minmax(0, 1fr); }
:root[data-area="admin"] #main { grid-column: 1; margin-inline-start: 8px; }
#demo-bar .db-btn.on { background: var(--demo-active); color: var(--on-primary); border-color: var(--demo-line); }