/* A self-contained, fictional preview of the app's real view patterns. */
.product-figure {
  --demo-planned:#f4b942;
  --demo-actual:#52b2cf;
  --demo-done:#44af69;
  --demo-target:#6b7f94;
  position:relative;
  margin:0;
  width:100%;
}
.app-window { background:#fff; border:1px solid #c2d3e1; border-radius:12px; box-shadow:0 20px 50px -22px #08234c40; overflow:hidden; }
.demo-intro { padding:16px 18px 13px; border-bottom:1px solid #cbdbe7; background:linear-gradient(#f8fbfe,#e7f0f7); }
.demo-intro h2 { color:var(--brand); font-size:18px; line-height:1.3; letter-spacing:-.025em; margin:0; }
.demo-content { padding:16px 16px 0; }
.preview-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; padding:5px; background:#edf2f7; border:1px solid #dce5ed; border-radius:10px; margin-bottom:17px; }
.preview-tabs button { display:flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:10px 6px; border:1px solid #c8d8e4; border-radius:6px; background:linear-gradient(#fff,#e8f0f7); color:var(--brand); font-size:13px; font-weight:700; box-shadow:0 1px 1px #6f879f35; transition:background .15s,border-color .15s; }
.preview-tabs .icon { width:17px; height:17px; }
.preview-tabs button:hover { border-color:var(--brand); background:#fff; }
.preview-tabs button[aria-selected=true] { background:var(--brand); border-color:var(--brand); color:var(--on-brand); }
.preview-tabs button:focus-visible { outline-offset:2px; }
/* Each view gets the same viewport, including filters, lists and narrow screens.
   Details open in a native dialog and never resize the hero. */
.preview-panels { display:grid; block-size:430px; }
.preview-panel { grid-area:1 / 1; min-width:0; min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#b9cad8 transparent; padding:2px 2px 12px; }
.preview-panel[aria-hidden=true] { visibility:hidden; pointer-events:none; }
.demo-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; }
.demo-kicker { display:block; font-size:9px; font-weight:700; letter-spacing:.12em; color:#597085; margin-bottom:5px; }
.demo-toolbar h3 { font-size:19px; letter-spacing:-.025em; line-height:1.2; }
.demo-segments { display:flex; flex:none; padding:3px; gap:3px; border:1px solid #bfcfdd; border-radius:999px; background:#edf4f9; box-shadow:0 1px 1px #6f879f25; }
.demo-segments button { min-height:32px; padding:5px 12px; border:1px solid transparent; border-radius:999px; background:transparent; color:#476279; font-size:12px; font-weight:700; }
.demo-segments button:hover { background:#fff; border-color:#bbcedf; }
.demo-segments button[aria-pressed=true] { background:#fff; color:var(--brand); border-color:#b4c9d9; box-shadow:0 1px 2px #08234c18; }
.demo-segments button:focus-visible { outline-offset:1px; }
.demo-context { display:flex; align-items:center; flex-wrap:wrap; gap:6px; color:#536c81; font-size:11px; margin:0 0 13px; }
.demo-context>span { display:flex; gap:5px; align-items:center; margin-left:auto; }
.demo-context .icon { width:13px; height:13px; }
.demo-table-frame { border:1px solid #cbdbe7; border-radius:8px; overflow:hidden; background:#fff; }
.product-figure table { width:100%; border-collapse:collapse; table-layout:fixed; font-size:12px; line-height:1.4; }
.product-figure table caption { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.product-figure thead { background:linear-gradient(#eef5fb,#dce9f3); }
.product-figure thead th { font-size:11px; font-weight:700; color:#425e75; padding:11px 9px; text-align:left; border-bottom:1px solid #c6d8e6; }
.product-figure tbody th,.product-figure td { padding:12px 9px; border-bottom:1px solid #e1eaf1; text-align:left; vertical-align:middle; }
.product-figure tbody tr:last-child>* { border-bottom:0; }
.product-figure tbody tr:nth-child(even) { background:#f6f9fc; }
.product-figure[data-preview-details=true] tbody tr:hover { background:#edf4f9; }
/* A marketing illustration: comparable hour types, not a full app screen. */
.demo-team-chart { display:grid; gap:9px; }
.demo-staff-chart { display:block; position:relative; width:100%; padding:8px 12px; background:#fff; border:1px solid #d5e2ed; border-radius:9px; color:var(--brand); text-align:left; font:inherit; transition:border-color .15s,box-shadow .15s; }
.product-figure[data-preview-details=true] .demo-staff-chart:hover { border-color:var(--brand); box-shadow:0 2px 8px #08234c12; }
.demo-staff-heading { display:flex; align-items:center; gap:9px; margin-bottom:7px; }
.demo-staff-heading>strong { font-size:14px; }
.demo-staff-heading>.icon { width:13px; height:13px; flex:none; color:#6a879d; }
.demo-staff-avatar { display:grid; place-items:center; width:28px; height:28px; flex:none; border-radius:50%; background:#e4eef5; color:var(--brand); font-size:9px; }
.demo-staff-capacity { margin-left:auto; font-size:10px; line-height:1.3; color:#587287; }
.demo-staff-bars { display:grid; gap:4px; }
.demo-hour-working { --demo-hour-color:#6b7f94; }
.demo-hour-planned { --demo-hour-color:var(--brand); }
.demo-hour-expected { --demo-hour-color:var(--accent); }
.demo-hour-row { display:grid; grid-template-columns:106px minmax(0,1fr) 45px; align-items:center; gap:9px; font-size:10px; line-height:1.25; }
.demo-hour-label { color:#536b7f; }
.demo-hour-track { display:block; height:7px; background:#edf2f7; border-radius:4px; overflow:hidden; }
.demo-hour-track i { display:block; height:100%; border-radius:4px; background:var(--demo-hour-color); }
.demo-hour-row>strong { text-align:right; color:var(--demo-hour-color); font-size:11px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.demo-chart-description { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.demo-chart-scale { display:flex; align-items:center; gap:5px; color:#61798d; font-size:9px; line-height:1.4; margin-top:10px; }
.demo-chart-scale .icon { width:12px; height:12px; }
.demo-team-totals { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:12px 0 0; padding:12px; border:1px solid #d8e4ed; border-radius:7px; background:#f5f9fc; }
.demo-team-totals dt { font-size:10px; color:#587085; line-height:1.4; }
.demo-team-totals dd { margin:3px 0 0; color:var(--demo-hour-color); font-size:18px; line-height:1.3; font-weight:700; font-variant-numeric:tabular-nums; }
.demo-row-link { display:flex; align-items:center; justify-content:space-between; gap:4px; width:100%; min-height:32px; background:none; border:0; padding:0; color:var(--brand); text-align:left; font-size:13px; font-weight:700; line-height:1.35; }
.product-figure[data-preview-details=true] .demo-row-link:hover { text-decoration:underline; text-underline-offset:3px; }
.demo-row-link .icon { width:13px; height:13px; color:#6b879e; }
.demo-row-link small { display:block; font-size:9px; color:#627c90; font-weight:400; margin-bottom:3px; }
.demo-capacity-summary { display:flex; justify-content:space-between; align-items:center; gap:12px; background:#eef4f8; border:1px solid #d6e2eb; border-radius:7px; padding:12px; margin-top:12px; font-size:12px; }
.demo-capacity-summary>span { display:flex; gap:7px; align-items:center; }
.demo-capacity-summary .icon { width:16px; height:16px; }
.demo-capacity-summary strong { font-size:19px; }
.demo-hint { display:flex; align-items:center; gap:7px; font-size:11px; line-height:1.4; margin:14px 0 0; color:#536c81; }
.demo-hint .icon { width:15px; height:15px; }
.demo-footer { display:flex; justify-content:center; align-items:center; border-top:1px solid #d8e4ed; padding:12px 18px; background:#f5f9fc; color:#5b7284; font-size:10px; text-align:center; }
.demo-footer>span { min-width:0; line-height:1.45; }
/* Daily columns use the actual app's activity palette and hour-based plans. */
.demo-days { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.demo-day { border:1px solid #cbdbe7; border-radius:8px; overflow:hidden; background:#f5f9fc; min-width:0; }
.demo-day-head { padding:10px 8px; background:linear-gradient(#eaf3fa,#dbeaf5); border-bottom:1px solid #cbdbe7; }
.demo-day-head h4 { font-size:13px; margin:0 0 5px; }
.demo-day-head>span { font-size:9px; color:#597086; display:block; }
.demo-day-capacity { height:6px; border-radius:4px; background:#bdcddd; margin:6px 0; overflow:hidden; }
.demo-day-capacity i { display:block; height:100%; background:var(--demo-planned); }
.demo-day-head p { font-size:9px; color:#40596c; line-height:1.4; }
.demo-day-plans { display:grid; gap:7px; padding:7px; }
.demo-area-bh { --demo-area:var(--bh); }
.demo-area-lv { --demo-area:var(--lv); }
.demo-area-ja { --demo-area:var(--ja); }
.demo-area-br { --demo-area:var(--br); }
.demo-area-internal { --demo-area:#d9e3ee; }
.demo-plan-card { display:flex; flex-direction:column; align-items:stretch; width:100%; gap:6px; padding:8px; border:1px solid color-mix(in srgb,var(--demo-area) 65%,#a8bac6); border-top:4px solid var(--demo-area); border-radius:6px; background:linear-gradient(#fff,color-mix(in srgb,var(--demo-area) 18%,white)); color:var(--brand); font:inherit; text-align:left; min-width:0; transition:border-color .15s,box-shadow .15s; }
.product-figure[data-preview-details=true] .demo-plan-card:hover,.demo-plan-card.is-related { border-color:var(--brand); box-shadow:0 0 0 1px var(--brand); }
.demo-plan-card-top { display:flex; align-items:center; justify-content:space-between; gap:3px; font-size:11px; font-weight:700; }
.demo-plan-card-top .icon { width:12px; height:12px; }
.demo-plan-card>strong { font-size:11px; line-height:1.3; min-height:29px; }
.demo-client-number { font-size:9px; line-height:1.4; color:#536a7c; }
.demo-progress { display:grid; gap:3px; width:100%; height:13px; background:repeating-linear-gradient(to bottom,#ecebe7 0 5px,transparent 5px 8px); border-radius:2px; }
.demo-progress i { display:block; height:5px; max-width:100%; border-radius:2px; background:var(--demo-planned); }
.demo-progress i+i { background:var(--demo-actual); }
.demo-plan-values { display:flex; align-items:center; gap:4px; white-space:nowrap; font-size:9px; color:#546a7b; line-height:1.5; }
.demo-plan-period { font-size:9px; line-height:1.35; background:color-mix(in srgb,var(--demo-area) 55%,white); padding:5px; border-radius:3px; margin-top:auto; }
.demo-plan-list { display:grid; gap:8px; }
.demo-plan-list>div { display:grid; grid-template-columns:45px minmax(0,1fr); gap:10px; }
.demo-list-date { font-size:10px; text-align:center; padding-top:12px; color:#5a7287; }
.demo-list-date strong { display:block; font-size:12px; color:var(--brand); }
.demo-plan-list .demo-plan-card { display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; }
.demo-plan-list .demo-plan-card-top { grid-column:1 / -1; }
.demo-plan-list .demo-plan-card>strong { min-height:0; }
.demo-plan-list .demo-plan-period { margin:0; }
/* Task table mirrors the app's client / period / progress / status structure. */
.demo-task-filters { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
.demo-task-filters>span { font-size:10px; color:#5a7287; white-space:nowrap; }
.demo-task-filters .demo-segments button { padding-inline:10px; }
.demo-tasks-table thead th { padding:9px 7px; font-size:10px; }
.demo-tasks-table th:first-child { width:27%; }
.demo-tasks-table thead th:nth-child(3) { width:30%; }
.demo-tasks-table td,.demo-tasks-table tbody th { padding:13px 7px; }
.demo-tasks-table td>small { display:block; font-size:9px; color:#5b7183; margin-top:6px; }
.demo-tasks-table .demo-row-link { font-size:12px; }
.demo-area-label { display:block; border-left:3px solid var(--demo-area); padding-left:5px; font-size:10px; line-height:1.4; overflow-wrap:anywhere; }
.demo-task-hours { gap:2px; color:#5b7183; margin-top:6px; }
.demo-status { display:inline-flex; align-items:center; gap:4px; padding:4px 6px; border:1px solid #c4d6e4; border-radius:999px; font-size:9px; font-weight:700; line-height:1.3; }
.demo-status .icon { width:10px; height:10px; }
.demo-status-active { background:linear-gradient(#d7e8f9,#bdd8f1); color:#21496f; border-color:#91b4d4; }
.demo-status-ready { background:linear-gradient(#edf4fa,#d6e4ef); color:#355c7a; }
.demo-status-waiting { background:linear-gradient(#fff2d4,#f9e1ad); color:#705018; border-color:#d9bf81; }
.demo-status-done { background:linear-gradient(#d8efde,#b8dfc4); color:#245533; border-color:#93c3a1; }
/* Native details dialog, scoped to the fictional preview. */
.demo-dialog { width:min(590px,calc(100% - 28px)); max-height:calc(100dvh - 40px); padding:26px; color:var(--brand); border:1px solid #b9cfdf; border-radius:14px; background:#fff; box-shadow:0 24px 90px #08234c45; overflow-y:auto; font-family:inherit; }
.demo-dialog::backdrop { background:#08234c75; backdrop-filter:blur(3px); }
.demo-dialog-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:17px; }
.demo-dialog h2 { font-size:28px; line-height:1.2; }
.demo-dialog h3 { font-size:16px; line-height:1.4; margin:0 0 10px; }
.demo-close { display:grid; place-items:center; min-width:36px; min-height:36px; background:#edf4f9; border:1px solid #c8dae7; border-radius:50%; color:var(--brand); }
.demo-close .icon { rotate:45deg; width:18px; height:18px; }
.demo-detail-context { font-size:13px; margin-bottom:18px; }
.demo-detail-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0 0 23px; }
.demo-detail-metrics>div { padding:13px; border:1px solid #d9e4ed; border-radius:7px; background:#f1f6fa; }
.demo-detail-metrics dt { font-size:11px; color:#587085; line-height:1.4; }
.demo-detail-metrics dd { font-size:23px; line-height:1.3; font-weight:700; margin:5px 0 0; }
.demo-detail-summary,.demo-detail-note { padding:13px; font-size:14px; border-radius:6px; background:#edf5ee; line-height:1.5; margin-top:18px; }
.demo-detail-note { background:#f0f5f9; }
.demo-day-chart { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; padding:16px; border:1px solid #dbe6ee; border-radius:8px; }
.demo-day-chart>div { text-align:center; font-size:12px; }
.demo-day-chart>div>div { height:100px; background:#edf3f7; display:flex; align-items:flex-end; margin:8px 0; border-radius:4px; overflow:hidden; }
.demo-day-chart i { display:block; width:100%; background:#1f4e78; }
.demo-detail-status { display:flex; align-items:center; flex-wrap:wrap; gap:12px; font-size:12px; }
.demo-detail-status .demo-status { font-size:12px; padding:6px 10px; }
.demo-hours-detail { display:grid; grid-template-columns:160px 1fr; align-items:center; gap:22px; padding:20px 0; }
.demo-hours-rings { width:160px; height:160px; }
.demo-hours-detail dl { margin:0; }
.demo-hours-detail dl>div { display:flex; justify-content:space-between; align-items:center; gap:10px; border-bottom:1px solid #e2eaf0; padding:9px 0; font-size:12px; }
.demo-hours-detail dt { display:flex; align-items:center; gap:6px; }
.demo-hours-detail dt i { width:8px; height:8px; flex:none; border-radius:50%; }
.demo-hours-detail dd { margin:0; font-weight:700; white-space:nowrap; }
.demo-detail-dates { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:15px 0; padding:15px; background:#f3f7fa; border:1px solid #dbe6ee; border-radius:7px; }
.demo-detail-dates dt { font-size:11px; color:#526b7e; }
.demo-detail-dates dd { margin:4px 0 0; font-size:14px; }
.demo-message { border-left:3px solid #bfd5e6; padding:8px 0 8px 13px; margin:18px 0; }
.demo-message h3 { font-size:13px; margin-bottom:6px; }
.demo-message p { font-size:14px; line-height:1.5; }
.demo-action { display:inline-flex; align-items:center; gap:8px; margin-top:18px; background:var(--brand); border:1px solid var(--brand); border-radius:6px; color:var(--on-brand); padding:11px 15px; font-size:13px; font-weight:700; }
.demo-action .icon { width:16px; height:16px; }
.demo-dialog-footnote { margin:22px 0 0; padding-top:13px; border-top:1px solid #e1eaf1; color:#688093; font-size:11px; }
@media(max-width:1150px) and (min-width:901px) {
  .demo-content { padding-inline:12px; }
  .demo-toolbar h3 { font-size:16px; }
  .demo-segments button { padding-inline:9px; }
  .demo-plan-card { padding:6px; }
  .demo-plan-card .demo-plan-values { font-size:8px; }
}
@media(max-width:640px) {
  .demo-intro { padding:14px 12px 12px; }
  .demo-intro h2 { font-size:17px; }
  .demo-content { padding:12px 10px 0; }
  .preview-tabs { gap:4px; padding:4px; margin-bottom:13px; }
  .preview-tabs button { flex-direction:column; gap:4px; font-size:12px; padding:8px 4px; }
  .preview-panels { block-size:430px; }
  .demo-toolbar { flex-wrap:wrap; gap:9px; }
  .demo-toolbar h3 { font-size:17px; }
  .demo-segments button { min-height:36px; padding:5px 10px; font-size:11px; }
  .demo-context { font-size:10px; gap:5px; }
  .demo-context>span { margin-left:0; }
  .demo-staff-chart { padding:11px 9px; }
  .demo-staff-heading { gap:7px; }
  .demo-staff-capacity { max-width:100px; text-align:right; }
  .demo-hour-row { grid-template-columns:97px minmax(0,1fr) 43px; gap:6px; }
  .demo-team-totals { gap:6px; padding:10px; }
  .demo-team-totals dd { font-size:16px; }
  .demo-row-link { font-size:12px; }
  .demo-days { grid-template-columns:1fr; gap:10px; }
  .demo-day-head { display:grid; grid-template-columns:1fr 1fr; gap:4px 10px; padding:9px; }
  .demo-day-head h4 { margin:0; }
  .demo-day-head>span { text-align:right; }
  .demo-day-capacity { margin:3px 0; }
  .demo-day-head p { text-align:right; }
  .demo-day-plans { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .demo-plan-card { padding:8px; }
  .demo-plan-list .demo-plan-card { display:flex; }
  .demo-plan-list .demo-plan-card>strong { min-height:0; }
  .demo-task-filters { flex-wrap:wrap; }
  .demo-task-filters .demo-segments button { padding-inline:8px; }
  .demo-tasks-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .demo-tasks-table tbody tr { display:grid; grid-template-columns:1fr 1fr; padding:8px; gap:8px; border-bottom:1px solid #dce6ee; }
  .demo-tasks-table tbody th,.demo-tasks-table td { width:auto; border:0; padding:3px; }
  .demo-tasks-table th:first-child { width:auto; }
  .demo-tasks-table .demo-row-link { font-size:13px; min-height:44px; }
  .demo-tasks-table tbody td:last-child { align-self:center; }
  .demo-area-label { font-size:11px; }
  .demo-footer { padding:10px; font-size:9px; }
  .demo-dialog { padding:19px; }
  .demo-dialog h2 { font-size:23px; }
  .demo-detail-metrics>div { padding:10px 8px; }
  .demo-detail-metrics dd { font-size:19px; }
  .demo-hours-detail { grid-template-columns:110px 1fr; gap:12px; }
  .demo-hours-rings { width:110px; height:110px; }
  .demo-hours-detail dl>div { font-size:10px; gap:6px; }
  .demo-day-chart { padding:10px; gap:6px; }
  .demo-day-chart>div { font-size:10px; }
}
@media(max-width:380px) {
  .demo-day-plans { grid-template-columns:1fr; }
  .demo-toolbar .demo-segments { margin-top:1px; }
  .demo-staff-capacity { max-width:80px; font-size:9px; }
  .demo-hour-row { grid-template-columns:88px minmax(0,1fr) 39px; gap:5px; font-size:9px; }
  .demo-hour-row>strong { font-size:10px; }
  .demo-detail-metrics { gap:5px; }
  .demo-detail-metrics dd { font-size:17px; }
  .demo-hours-detail { grid-template-columns:1fr; }
  .demo-hours-rings { margin:auto; }
}