.demo-cal{--cal-row:1.375rem;padding:var(--bk-space-4);border-radius:var(--bk-web-radius-card);background-color:var(--bk-web-card);box-shadow:var(--bk-web-elev-2);color:var(--bk-fg);container:cal/inline-size}@media (width>=48rem){.demo-cal{--cal-row:1.5rem;padding:var(--bk-space-5)}}.demo-cal .cal-frame{gap:var(--bk-space-3);display:grid}.demo-cal .cal-head{order:-2}.demo-cal .cal-sms{order:-1}@container cal (width>=40rem){.demo-cal .cal-frame{gap:var(--bk-space-4)var(--bk-space-6);grid-template-columns:minmax(0,1fr) minmax(14rem,20rem);grid-template-areas:"head head""help help""grid sms";align-items:start}.demo-cal .cal-head{grid-area:head}.demo-cal .cal-help{grid-area:help}.demo-cal .cal-grid{grid-area:grid}.demo-cal .cal-sms{grid-area:sms}}.demo-cal .cal-head{align-items:baseline;gap:var(--bk-space-2)var(--bk-space-4);flex-wrap:wrap;display:flex}.demo-cal .cal-date{font-weight:var(--bk-weight-semibold);margin:0}.demo-cal .cal-doctor{color:var(--bk-fg-subtle);font-size:var(--bk-text-body-sm);margin:0}.demo-cal .demo-sample{font-size:var(--bk-text-body-sm)}.demo-cal .cal-grid{gap:var(--bk-space-2);grid-template-columns:3rem minmax(0,1fr);display:grid}.demo-cal .cal-hours,.demo-cal .cal-day{grid-template-rows:repeat(var(--rows),var(--cal-row));margin:0;padding:0;list-style:none;display:grid}.demo-cal .cal-hours li{color:var(--bk-fg-subtle);font-size:var(--bk-text-body-sm);line-height:var(--cal-row)}.demo-cal .cal-free{border:1px dashed var(--bk-border);border-radius:var(--bk-radius-control);color:var(--bk-fg-subtle);font-size:var(--bk-text-body-sm);place-items:center;margin:1px 0;line-height:1.4;display:grid;overflow:hidden}.demo-cal .cal-appt{min-inline-size:0;transition:transform var(--bk-duration-fast,.15s)ease;margin:1px 0}.demo-cal .cal-move{align-items:center;gap:var(--bk-space-2);block-size:100%;inline-size:100%;padding:0 var(--bk-space-2);border:0;border-inline-start:3px solid var(--bk-primary);border-radius:var(--bk-radius-control);background-color:var(--bk-bg-subtle);color:inherit;font:inherit;text-align:start;-webkit-touch-callout:none;user-select:none;line-height:1.4;display:flex;overflow:hidden}@media (pointer:fine){.demo-cal button.cal-move{cursor:grab;touch-action:none}}.demo-cal [data-dragging] .cal-move{cursor:grabbing;box-shadow:var(--bk-web-elev-2)}.demo-cal button.cal-move:focus-visible{outline:var(--bk-focus-ring-width)solid var(--bk-ring);outline-offset:var(--bk-focus-ring-offset)}.demo-cal .is-success .cal-move{border-inline-start-color:var(--bk-success)}.demo-cal .is-info .cal-move{border-inline-start-color:var(--bk-info)}.demo-cal .cal-grip{color:var(--bk-fg-subtle);flex-shrink:0;display:inline-flex}.demo-cal .cal-grip svg{fill:currentColor;block-size:.625rem;inline-size:.375rem}.demo-cal .cal-time{flex-shrink:0}.demo-cal .cal-text{min-inline-size:0;display:grid}.demo-cal .cal-service,.demo-cal .cal-patient{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.demo-cal .cal-service{font-weight:var(--bk-weight-medium)}.demo-cal .cal-patient{color:var(--bk-fg-subtle);font-size:var(--bk-text-body-sm)}.demo-cal .cal-sep{color:var(--bk-fg-subtle);display:none}.demo-cal .is-short .cal-text{white-space:nowrap;text-overflow:ellipsis;flex:1;display:block;overflow:hidden}.demo-cal .is-short .cal-sep{display:inline}.demo-cal .cal-sms{max-inline-size:22rem;padding:var(--bk-space-3)var(--bk-space-4);border-radius:var(--bk-web-radius-card);background-color:var(--bk-bg-muted);justify-self:end}.demo-cal .cal-sms p{margin:0}.demo-cal .cal-sms-from{color:var(--bk-fg-subtle);font-size:var(--bk-text-body-sm)}.demo-cal .cal-sms-text{font-size:var(--bk-text-body-sm);line-height:1.7}.demo-cal .cal-help{color:var(--bk-fg-muted);font-size:var(--bk-text-body-sm);margin:0;line-height:1.6}.demo-cal:not([data-demo-mounted=true]) .cal-help{visibility:hidden}.demo-cal .cal-help-coarse{display:none}@media (pointer:coarse){.demo-cal .cal-help-fine{display:none}.demo-cal .cal-help-coarse{display:inline}}.demo-pf{gap:var(--bk-space-4);padding:var(--bk-space-5);border-radius:var(--bk-web-radius-card);background-color:var(--bk-web-card);box-shadow:var(--bk-web-elev-2);color:var(--bk-fg);display:grid;container-type:inline-size}.demo-pf .pf-body{gap:var(--bk-space-4);display:grid}@container (width>=32rem){.demo-pf .pf-body{align-items:start;gap:var(--bk-space-5);grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}.demo-pf .pf-head{align-items:baseline;gap:var(--bk-space-3);flex-wrap:wrap;display:flex}.demo-pf .pf-head p{margin:0}.demo-pf .pf-patient{font-weight:var(--bk-weight-semibold)}.demo-pf .pf-timeline{gap:var(--bk-space-3);margin:0;padding:0;list-style:none;display:grid}.demo-pf .pf-session{border-inline-start:2px solid var(--bk-border);padding-inline-start:var(--bk-space-4)}.demo-pf .pf-session p{margin:0}.demo-pf .pf-when,.demo-pf .pf-use,.demo-pf .pf-note,.demo-pf figcaption,.demo-pf .pf-log{color:var(--bk-fg-subtle);font-size:var(--bk-text-body-sm);line-height:1.6}.demo-pf .pf-service{font-weight:var(--bk-weight-medium)}.demo-pf .pf-photos-title{align-items:baseline;gap:0 var(--bk-space-2);margin:0 0 var(--bk-space-2);font-weight:var(--bk-weight-semibold);flex-wrap:wrap;display:flex}.demo-pf .pf-note{font-weight:var(--bk-weight-regular)}.demo-pf .pf-split:focus-visible,.demo-pf .pf-pair input:focus-visible{outline:var(--bk-focus-ring-width)solid var(--bk-ring);outline-offset:var(--bk-focus-ring-offset)}.demo-pf .pf-photos{min-inline-size:0}.demo-pf .pf-compare{gap:var(--bk-space-1);max-inline-size:30rem;display:grid}.demo-pf .pf-figure{gap:var(--bk-space-1);margin:0;display:grid}.demo-pf .pf-figure[hidden]{display:none}.demo-pf .pf-pairs{min-inline-size:0;margin:var(--bk-space-3)0 0;border:0;padding:0}.demo-pf .pf-pairs legend{color:var(--bk-fg-muted);font-size:var(--bk-text-body-sm);margin-block-end:var(--bk-space-2);padding:0}.demo-pf .pf-pair-row{contain:inline-size;gap:var(--bk-space-2);overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:var(--bk-space-1);margin:calc(-1*var(--bk-space-1));scrollbar-width:thin;display:flex;overflow-x:auto}@media (pointer:fine){.demo-pf .pf-pair-row{flex-wrap:wrap;overflow-x:visible}}.demo-pf .pf-pair{align-items:center;gap:var(--bk-space-2);min-block-size:2.75rem;padding:0 var(--bk-space-3);border:1px solid var(--bk-border);border-radius:var(--bk-web-radius-control);white-space:nowrap;scroll-snap-align:start;cursor:pointer;flex:none;display:inline-flex}.demo-pf .pf-pair:has(input:checked){border-color:var(--bk-fg)}.demo-pf .pf-frame{border-radius:var(--bk-web-radius-media);background-color:var(--bk-bg-subtle);touch-action:pan-y;cursor:ew-resize;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;max-block-size:min(45svh,32rem);inline-size:100%;max-inline-size:30rem;position:relative;overflow:hidden}.demo-pf .pf-frame picture{position:absolute;inset:0}.demo-pf .pf-frame img{object-fit:cover;object-position:50% 40%;pointer-events:none;-webkit-user-drag:none;block-size:100%;inline-size:100%;display:block}.demo-pf .pf-after{clip-path:inset(0 calc(100% - var(--split,50%))0 0)}.demo-pf .pf-tag{padding:var(--bk-space-1)var(--bk-space-2);border-radius:var(--bk-web-radius-pill);background-color:var(--bk-web-card);font-size:var(--bk-web-text-caption);pointer-events:none;position:absolute;inset-block-start:var(--bk-space-2)}.demo-pf .pf-tag-after{inset-inline-start:var(--bk-space-2)}.demo-pf .pf-tag-before{inset-inline-end:var(--bk-space-2)}.demo-pf .pf-divider{transform:translateX(var(--split,50%));pointer-events:none;position:absolute;inset:0}.demo-pf .pf-divider:before{content:"";background-color:var(--bk-bg);inline-size:2px;box-shadow:1px 0 0 var(--bk-fg),-1px 0 0 var(--bk-fg);position:absolute;inset-block:0;inset-inline-start:-1px}.demo-pf .pf-grip{border:1px solid var(--bk-fg);border-radius:var(--bk-web-radius-pill);background-color:var(--bk-bg);block-size:2.25rem;inline-size:2.25rem;color:var(--bk-fg);place-items:center;display:grid;position:absolute;inset-block-start:50%;inset-inline-start:0;transform:translate(-50%,-50%)}.demo-pf .pf-frame[data-dragging] .pf-grip{outline:var(--bk-focus-ring-width)solid var(--bk-ring)}.demo-pf .pf-split{min-block-size:2.75rem;inline-size:100%;max-inline-size:30rem;accent-color:var(--bk-fg);margin:0;display:block}.demo-pf .pf-log{align-content:start;gap:0;block-size:3.2em;margin:0;padding:0;list-style:none;display:grid;overflow:hidden}.demo-pf .pf-log li:first-child{min-block-size:3.2em}.demo-pf .pf-log li{-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.demo-scan{gap:var(--bk-space-4);padding:var(--bk-space-5);border-radius:var(--bk-web-radius-card);background-color:var(--bk-web-card);box-shadow:var(--bk-web-elev-2);color:var(--bk-fg);display:grid;container-type:inline-size}.demo-scan .scan-head{align-items:baseline;gap:var(--bk-space-3);flex-wrap:wrap;display:flex}.demo-scan .scan-head p,.demo-scan .scan-note{margin:0}.demo-scan .scan-title{font-weight:var(--bk-weight-semibold)}.demo-scan .scan-soon{padding:0 var(--bk-space-2);border:1px solid var(--bk-border);border-radius:var(--bk-web-radius-pill);font-size:var(--bk-web-text-caption)}.demo-scan .scan-body{gap:var(--bk-space-5);align-items:start;display:grid}@container (width>=48rem){.demo-scan .scan-body{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}.demo-scan .scan-paper{border:1px solid var(--bk-border);border-radius:var(--bk-web-radius-media);background-color:var(--bk-bg-subtle);max-inline-size:35rem;position:relative;overflow:hidden}.demo-scan .scan-paper img{object-fit:cover;block-size:100%;inline-size:100%;display:block}.demo-scan .scan-marks{pointer-events:none;position:absolute;inset:0}.demo-scan .scan-mark{block-size:calc(var(--bottom) - var(--top));border-radius:var(--bk-radius-control);transition:outline-color var(--bk-duration-fast)ease,background-color var(--bk-duration-fast)ease;outline:2px solid #0000;position:absolute;inset-block-start:var(--top);inset-inline:2%}.demo-scan .scan-mark[data-active]{outline-color:var(--bk-accent);background-color:color-mix(in srgb,var(--bk-accent)12%,transparent)}.demo-scan .scan-line{background-color:var(--bk-accent);opacity:0;block-size:2px;position:absolute;inset-block-start:0;inset-inline:0}@media (prefers-reduced-motion:no-preference){.demo-scan .is-scanning .scan-line{animation:scan-sweep 1.4s var(--bk-ease-standard,ease-in-out)1}}@keyframes scan-sweep{0%{opacity:1;transform:translateY(0)}to{opacity:1;transform:translateY(var(--scan-travel,12rem))}}.demo-scan .scan-table{border-collapse:collapse;inline-size:100%;font-size:var(--bk-text-body-sm)}.demo-scan caption{color:var(--bk-fg-muted);text-align:start;margin-block-end:var(--bk-space-2)}.demo-scan th,.demo-scan td{padding:var(--bk-space-2);border-block-end:1px solid var(--bk-border-subtle);text-align:start;white-space:nowrap}.demo-scan tbody tr{block-size:2.5rem}.demo-scan .scan-note{color:var(--bk-fg-subtle);font-size:var(--bk-text-body-sm)}.demo-scan .scan-run{min-block-size:2.75rem;padding:0 var(--bk-space-5);border:1.5px solid var(--bk-fg);border-radius:var(--bk-web-radius-control);color:var(--bk-fg);font:inherit;font-weight:var(--bk-weight-semibold);cursor:pointer;background-color:#0000;justify-self:start}.demo-scan .scan-run:focus-visible{outline:var(--bk-focus-ring-width)solid var(--bk-ring);outline-offset:var(--bk-focus-ring-offset)}.demo-scan .scan-run:disabled{opacity:.6;cursor:progress}.demo-scan .scan-run[aria-disabled=true]{opacity:.6;cursor:default}