/* Native schedule demos, styled after the app's calendar and outline timeline. */
.hd-demo{--demo-border:#e2e8f0;--demo-muted:#64748b;--demo-surface:#f8fafc;color:#1e293b;font-family:ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif}
.hd-demo [hidden]{display:none!important}
.hd-demo-sr{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hd-demo-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;padding:20px 24px;background:#fff;border:1px solid var(--demo-border);border-radius:12px 12px 0 0}
.hd-demo-brand{display:flex;align-items:center;gap:14px;min-width:0}
.hd-demo-brand img{flex:none}
.hd-demo-brand h2{margin:0;font-size:20px;line-height:1.3;font-weight:650;letter-spacing:-.02em}
.hd-demo-brand p{margin:4px 0 0;color:var(--demo-muted);font-size:13px}
.hd-demo-published{padding:5px 10px;margin-inline-start:8px;border-radius:6px;background:#eaf7ef;color:#28734a;font-size:12px;font-weight:650}
.hd-demo-actions{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:16px}
.hd-demo .hd-showcase-tabs{border:1px solid var(--demo-border);border-radius:9px;padding:3px;gap:2px;background:#f3f6f3}
.hd-demo .hd-tab{min-inline-size:90px;min-block-size:44px;padding:8px 12px;font:600 13px ui-sans-serif,system-ui,sans-serif;color:#64748b;border-radius:6px}
.hd-demo .hd-tab[aria-pressed="true"]{color:#1e293b}
.hd-demo-layers{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0;border:0}
.hd-demo-layers label{display:flex;align-items:center;gap:5px;min-block-size:44px;padding:6px 8px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer}
.hd-demo-layers input{margin:0;accent-color:currentColor;color:inherit;inline-size:14px;block-size:14px}
.hd-layer-shifts{color:#28734a;background:#eaf7ef}.hd-layer-events{color:#3564b6;background:#eef4ff}.hd-layer-leave{color:#b65c24;background:#fff1e6}
.hd-demo .hd-slides{display:block}
.hd-demo .hd-view{display:none}
.hd-demo .hd-view[aria-hidden="false"]{display:block}
.hd-demo-scroll{flex:1;min-inline-size:0;inline-size:100%;overflow-x:auto;overscroll-behavior-inline:contain;background:#fff;border:1px solid var(--demo-border);border-block-start:0;border-radius:0 0 12px 12px;box-shadow:0 12px 32px rgba(6,56,24,.05)}
.hd-demo-scroll:focus-visible{outline:2px solid #2e8b57;outline-offset:3px}
.hd-timeline-canvas,.hd-calendar-canvas{min-inline-size:1040px;block-size:100%;display:flex;flex-direction:column}
.hd-timeline-date{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--demo-surface);border-block-end:1px solid var(--demo-border);font-size:13px}
.hd-timeline-date span{font-size:12px;color:var(--demo-muted)}
.hd-timeline-table,.hd-calendar-table{inline-size:100%;border-collapse:collapse;table-layout:fixed;font-size:13px}
.hd-person-col{inline-size:176px}
.hd-timeline-table th,.hd-timeline-table td{border-block-end:1px solid var(--demo-border);text-align:start}
.hd-timeline-table thead{background:var(--demo-surface);color:#475569}
.hd-timeline-table thead th:first-child{padding:12px 16px;border-inline-end:1px solid var(--demo-border)}
.hd-timeline-table thead th:last-child{padding:0}
.hd-hour-labels{display:grid;grid-template-columns:repeat(15,minmax(0,1fr));font-weight:400}
.hd-hour-labels>span{padding:10px 2px;border-inline-end:1px solid var(--demo-border);text-align:center}
.hd-hour-labels strong{font-size:12px;font-weight:600;white-space:nowrap}
.hd-hour-labels small{display:block;margin-block-start:4px;color:var(--demo-muted);font-size:10px;font-weight:400}
.hd-timeline-table tbody th{padding:8px 16px;block-size:62px;border-inline-end:1px solid var(--demo-border);background:var(--demo-surface);font-weight:600}
.hd-timeline-table tbody th>span:last-child{display:inline-block;vertical-align:middle;max-inline-size:128px}
.hd-timeline-table tbody th small{display:block;margin-block-start:4px;color:var(--demo-muted);font-size:11px;font-weight:400}
.hd-person-dot{display:inline-block;inline-size:8px;block-size:8px;margin-inline-end:10px;border-radius:50%;background:var(--person-color);vertical-align:middle}
.hd-time-track{position:relative;padding:0;background:repeating-linear-gradient(to right,transparent 0,transparent calc(100% / 15 - 1px),#e2e8f0 calc(100% / 15 - 1px),#e2e8f0 calc(100% / 15))}
.hd-shift-bar{position:absolute;inset-inline-start:var(--shift-start);inline-size:var(--shift-width);inset-block-start:50%;block-size:46px;transform:translateY(-50%);display:grid;grid-template-columns:minmax(0,var(--before)) minmax(48px,var(--pause)) minmax(0,var(--after));align-items:center;border:1px solid var(--person-color);border-color:color-mix(in srgb,var(--person-color) 60%,white);border-radius:8px;background:#f8fafc;background:color-mix(in srgb,var(--person-color) 5%,white);padding:4px 10px;color:#8a4b08}
.hd-shift-work{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;font-size:13px;font-weight:700}
.hd-shift-break{display:flex;align-items:center;justify-content:center;align-self:stretch;border:1px solid #fdba74;border-radius:8px;background:#fffbeb;box-shadow:0 3px 7px #0f172a14;font-size:12px;font-weight:700}
.hd-shift-handle{position:absolute;inset-inline-start:5px;inset-block:8px;inline-size:5px;border:1px solid #d1d5db;border-radius:4px;background:#fff;box-shadow:0 1px 3px #0f172a33}
.hd-shift-handle-end{inset-inline-start:auto;inset-inline-end:5px}
.hd-demo-summary{display:flex;align-items:center;flex-wrap:wrap;gap:16px;padding:14px 16px;margin-block-start:auto;color:#475569;font-size:12px;background:var(--demo-surface)}
.hd-demo-summary strong{padding:5px 10px;border-radius:6px;background:#eaf7ef;color:#28734a;font-weight:650}
.hd-demo-summary-end{margin-inline-start:auto;color:var(--demo-muted)}
.hd-calendar-table thead th{padding:9px 12px;background:var(--demo-surface);border-block-end:1px solid var(--demo-border);color:#64748b;font-size:11px;font-weight:600;text-align:start;text-transform:uppercase}
.hd-calendar-table abbr{text-decoration:none}
.hd-calendar-table td{position:relative;padding:6px 8px;border-inline-end:1px solid var(--demo-border);border-block-end:1px solid var(--demo-border);vertical-align:top}
.hd-calendar-table td:last-child{border-inline-end:0}
.hd-calendar-day{display:flex;flex-direction:column;gap:5px;min-block-size:112px;min-inline-size:0;padding-block-end:34px}
.hd-calendar-date{display:flex;align-items:center;justify-content:space-between;gap:4px;color:#64748b;font-size:12px;font-weight:500;min-block-size:22px}
.hd-calendar-date>span:last-child{display:inline-flex;align-items:center;justify-content:center;min-inline-size:22px;block-size:22px;border-radius:50%}
.hd-calendar-today{color:#fff;background:#ef4444;font-weight:700}
.hd-calendar-events{display:flex;flex-direction:column;gap:3px;min-inline-size:0}
.hd-calendar-event{display:block;min-inline-size:0;padding:3px 6px;border:1px solid #dbeafe;border-radius:5px;background:#f5f9ff;color:#2563eb;font-size:12px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd-calendar-more{display:block;padding:3px 8px;min-block-size:24px;color:#2563eb;font-size:12px;font-weight:600;line-height:18px}
.hd-calendar-totals{position:absolute;inset-inline:8px;inset-block-end:8px;display:flex;flex-wrap:wrap;gap:4px;font-size:10px;font-weight:600;line-height:1.5}
.hd-calendar-shifts,.hd-calendar-leave{display:inline-flex;align-items:center;gap:4px;min-block-size:24px;padding:2px 5px;border:1px solid;border-radius:999px;font-size:13px;font-weight:500;line-height:18px;white-space:nowrap}
.hd-calendar-shifts{background:#ecfdf5;border-color:#d1fae5;color:#065f46}
.hd-calendar-leave{background:#fff7ed;border-color:#ffedd5;color:#c2410c}
.hd-calendar-totals svg{flex:none}
.hd-calendar-weekend,.hd-calendar-outside{background:#f7f8fa}.hd-calendar-outside .hd-calendar-date{color:#a7afbd}.hd-calendar-selected{background:#fffae5}
@media(max-width:700px){.hd-demo-header{padding:16px;gap:14px}.hd-demo-brand{flex-wrap:wrap;gap:10px}.hd-demo-brand h2{font-size:17px}.hd-demo-published{margin-inline-start:0}.hd-demo-actions{inline-size:100%;justify-content:space-between;gap:12px}.hd-demo-layers{order:2;inline-size:100%}.hd-demo .hd-showcase-tabs{margin-inline-start:auto}.hd-demo-header:has(.hd-demo-layers:not([hidden])) .hd-demo-brand{inline-size:100%}}

.hd-demo-hint{display:none;margin:0;padding:8px 16px;border-inline:1px solid var(--demo-border);background:var(--demo-surface);color:#64748b;font-size:12px;line-height:1.5}
.hd-demo-hint span{margin-inline-start:4px}
.hd-timeline-table tbody th,.hd-timeline-table thead th:first-child{position:sticky;inset-inline-start:0;z-index:1}
@container(max-width:1039px){.hd-demo-hint{display:block}}
.hd-timeline-table{flex:1}
@media(max-width:700px){.hd-person-col{inline-size:144px}.hd-timeline-table tbody th{padding-inline:12px}.hd-timeline-table tbody th>span:last-child{max-inline-size:102px}.hd-person-dot{margin-inline-end:6px}}