[data-phasi-demo] { --hd-bg:#fff; --hd-text:#262626; --hd-muted:#4f4f4f; --hd-line:#e5e5e5; --hd-soft:#e8e8e9; --hd-day:28px; --hd-row:26px; --hd-project:180px; --hd-task:200px; --hd-poc:60px; font:13px/1.25 Inter,Arial,sans-serif; font-weight:450; color:var(--hd-text); background:var(--hd-bg); overflow:hidden; isolation:isolate; color-scheme:light; }
[data-phasi-demo] * { box-sizing:border-box; }
[data-phasi-demo] button { font:inherit; color:inherit; cursor:pointer; }
[data-phasi-demo] button:focus-visible { outline:2px solid #396ddd; outline-offset:2px; }
.hd-toolbar { display:flex; align-items:center; gap:12px; height:56px; padding:4px 12px; border-bottom:1px solid var(--hd-line); }
.hd-logo { flex:0 0 80px; line-height:0; }
.hd-logo img { height:14px; width:auto; }.hd-logo-dark{display:none}
.hd-categories { display:flex; gap:8px; flex:1; justify-content:safe center; overflow-x:auto; padding:4px; scrollbar-width:none; }
.hd-category { border:0; background:transparent; white-space:nowrap; padding:6px 12px; border-radius:4px; font-size:12px!important; }
.hd-category[aria-pressed=true] { font-weight:650; color:#111; }
.hd-category:hover { background:color-mix(in srgb,var(--category-color) 18%,var(--hd-bg)); }
.hd-dot { display:inline-block; height:9px; width:9px; border-radius:2px; margin-right:6px; background:var(--phase-color); }
.hd-palette { display:flex; gap:42px; align-items:center; justify-content:safe center; height:51px; padding:12px 32px; overflow-x:auto; border-bottom:1px solid var(--hd-line); scrollbar-width:none; }
.hd-phase { flex:0 0 88px; height:20px; border:1px solid color-mix(in srgb,var(--phase-color),#000 12%); border-radius:4px; background:var(--phase-color); color:#17202d!important; font-size:10px!important; font-weight:500!important; touch-action:none; user-select:none; cursor:grab!important; box-shadow:0 1px 2px #0f172a14; }
.hd-phase[aria-pressed=true] { outline:2px solid #396ddd; outline-offset:2px; }
.hd-scroll { overflow:auto; height:calc(587px / .9 - 107px); overscroll-behavior-x:contain; scrollbar-width:none; }
.hd-scroll::-webkit-scrollbar { display:none; }
.hd-canvas,.hd-calendar { cursor:grab; user-select:none; }
.hd-panning .hd-canvas,.hd-panning .hd-calendar { cursor:grabbing; }
.hd-task-heading { justify-content:space-between; }
.hd-grid { display:grid; grid-template-columns:var(--hd-project) var(--hd-task) var(--hd-poc) var(--hd-width); min-width:max-content; }
.hd-heading { height:64px; display:flex; align-items:center; padding:12px; background:var(--hd-bg); border-right:1px solid var(--hd-line); border-bottom:1px solid var(--hd-line); position:sticky; top:0; z-index:4; }
.hd-project-heading,.hd-project { left:0; }
.hd-project-heading { justify-content:space-between; }
.hd-project-toggle { border:0; background:transparent; color:var(--hd-muted); font-size:24px!important; padding:0; width:24px; height:28px; line-height:1; }
[data-phasi-demo][data-projects-collapsed=true] { --hd-project:40px; }
[data-projects-collapsed=true] .hd-project-title,[data-projects-collapsed=true] .hd-project-label { display:none; }
[data-projects-collapsed=true] .hd-project-heading { justify-content:center; padding:0; }
.hd-task-heading,.hd-tasks { left:var(--hd-project); }
.hd-poc-heading,.hd-pocs { left:calc(var(--hd-project) + var(--hd-task)); }
.hd-poc-heading { justify-content:center; padding:0; }
.hd-calendar { position:sticky; top:0; z-index:3; background:var(--hd-bg); height:64px; font-size:12px; }
.hd-months,.hd-weeks,.hd-days { height:22px; display:flex; border-bottom:1px solid var(--hd-line); }.hd-weeks{height:18px}.hd-days{height:24px}
.hd-period { flex-shrink:0; padding:2px 6px; border-right:1px solid var(--hd-line); overflow:hidden; white-space:nowrap; }
.hd-day { width:var(--hd-day); flex-shrink:0; text-align:center; border-right:1px solid var(--hd-line); padding-top:2px; }
.hd-weekend { background-image:radial-gradient(circle,rgba(127,127,127,.28) .7px,transparent .8px); background-size:5px 5px; background-position:1px 1px; }
.hd-project,.hd-tasks,.hd-pocs { position:sticky; z-index:2; background:var(--hd-bg); border-right:1px solid var(--hd-line); }
.hd-project-label { display:flex; justify-content:space-between; align-items:center; gap:8px; font-weight:600; background:var(--hd-soft); padding:0 12px; height:var(--hd-row); white-space:nowrap; }
.hd-task,.hd-poc { height:var(--hd-row); display:flex; align-items:center; padding:0 12px; white-space:nowrap; }
.hd-task[data-level="1"] { padding-left:34px; }
.hd-chevron { color:var(--hd-muted); margin-right:8px; border:0; background:transparent; padding:0; width:18px; height:24px; flex-shrink:0; }
.hd-poc { justify-content:center; padding:0; }
.hd-canvas { position:relative; z-index:0; height:var(--hd-height); background:repeating-linear-gradient(to right,transparent 0,transparent calc(var(--hd-day) - 1px),var(--hd-line) calc(var(--hd-day) - 1px),var(--hd-line) var(--hd-day)); }
.hd-weekend-column { position:absolute; top:0; bottom:0; width:var(--hd-day); pointer-events:none; }
.hd-today { position:absolute; top:0; bottom:0; width:1px; background:#5c6470; opacity:.65; pointer-events:none; z-index:1; }
.hd-target-row { position:absolute; left:0; right:0; height:var(--hd-row); background:#648ce51a; pointer-events:none; }
.hd-bar { position:absolute; height:20px; display:flex; align-items:center; justify-content:center; min-width:28px; background:var(--phase-color); color:#17202d; border:1px solid color-mix(in srgb,var(--phase-color),#000 18%); border-radius:2px; font-size:10px; touch-action:none; user-select:none; cursor:grab; z-index:2; box-shadow:0 1px 2px #0f172a14; }
.hd-bar:focus-within,.hd-bar.hd-dragging { z-index:5; box-shadow:0 2px 7px #0002; }
.hd-bar:focus-within { outline:2px solid #396ddd; outline-offset:1px; }
.hd-bar[hidden] { display:none; }
.hd-bar-label { background:transparent; border:0; width:100%; height:100%; padding:0 8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:grab!important; touch-action:none; }
.hd-handle { position:absolute; top:0; bottom:0; width:7px; padding:0; border:0; background:transparent; cursor:ew-resize!important; touch-action:none; }
.hd-handle:hover,.hd-handle:focus-visible { background:#ffffff55; }
.hd-handle-start { left:0; }.hd-handle-end { right:0; }
.hd-footer { padding:10px 16px; border-top:1px solid var(--hd-line); color:var(--hd-muted); min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:11px; }
.hd-help { margin:0; }.hd-reset-note { white-space:nowrap; }
.hd-ghost { position:fixed; pointer-events:none; z-index:9999; box-sizing:border-box; display:flex; align-items:center; justify-content:center; padding:0 6px; border:1px solid color-mix(in srgb,var(--phase-color),#000 12%); border-radius:4px; background:var(--phase-color); color:#17202d; font:500 10px/1.25 Inter,Arial,sans-serif; white-space:nowrap; box-shadow:0 1px 2px #0f172a14; }
.hd-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.dark [data-phasi-demo],[data-theme="dark"] [data-phasi-demo] { --hd-bg:#17181b; --hd-text:#e2e4e9; --hd-muted:#a2a7b0; --hd-line:#303238; --hd-soft:#24262b; color-scheme:dark; }
.dark .hd-logo-light,[data-theme="dark"] .hd-logo-light{display:none}.dark .hd-logo-dark,[data-theme="dark"] .hd-logo-dark{display:block}
.dark .hd-category[aria-pressed=true],[data-theme="dark"] .hd-category[aria-pressed=true]{color:#f1f2f4}

/* Keep the embedded window size while showing the interface at 90%. */
[data-phasi-demo] { zoom: .9; }