/* Visit Planner: demo-specific layout only. Shell tokens and components are used as they are. */
[hidden]{display:none!important}
.vp-main,.vp-stack{display:grid;gap:18px}
.vp-muted{font-size:12px;color:var(--bw-ink-3)}

/* Day planner: one row per carer, 60 columns of 15 minutes from 07:00 to 22:00.
   The lane background paints hour lines over the carer's available hours (--ws / --we). */
.vp-planner{min-width:960px;display:grid;gap:6px}
.vp-row{display:grid;grid-template-columns:176px minmax(0,1fr);gap:10px;align-items:stretch}
.vp-who{font-size:12.5px;padding:4px 0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.vp-who strong{font-weight:600}
.vp-who small{font-size:11px;color:var(--bw-ink-3);line-height:1.35}
.vp-who>button{margin-top:4px}
.vp-hours{display:grid;grid-template-columns:repeat(60,minmax(0,1fr));font-size:10.5px;color:var(--bw-ink-3);font-weight:600;font-variant-numeric:tabular-nums}
.vp-hours span{grid-column:span 4;padding-left:4px;border-left:1px solid var(--bw-rule-2)}
.vp-lane{display:grid;grid-template-columns:repeat(60,minmax(0,1fr));grid-auto-rows:minmax(46px,auto);grid-auto-flow:row dense;gap:3px 0;border-radius:10px;min-height:46px;
  background:repeating-linear-gradient(to right,var(--bw-rule-2) 0 1px,transparent 1px calc(100%/15)),
             linear-gradient(to right,transparent var(--ws,0%),#fff var(--ws,0%),#fff var(--we,0%),transparent var(--we,0%)),var(--bw-mineral)}
.vp-row.is-off .vp-lane{opacity:.5}
.vp-visit{margin:5px 1px;min-width:0;border-radius:8px;border:1.5px solid var(--bw-petrol);background:var(--bw-petrol-l);color:var(--bw-ink);font-size:11px;font-weight:700;padding:4px 6px;text-align:left;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:1.3}
.vp-visit small{display:block;font-weight:600;color:var(--bw-ink-3);font-size:10px;overflow:hidden;text-overflow:ellipsis}
.vp-visit.is-short{font-size:10px;padding:6px 3px;letter-spacing:-.01em;text-align:center}
.vp-visit.is-short small{display:none}
.vp-visit.is-swap{border-style:dashed}
.vp-visit.is-open{background:var(--bw-warn-l);border-color:var(--bw-warn)}
.vp-visit.is-live{background:var(--bw-cyan-l);border-color:var(--bw-cyan)}
.vp-visit.is-done{background:var(--bw-ok-l);border-color:var(--bw-ok)}
.vp-visit:hover{filter:brightness(.97)}
.vp-visit[aria-pressed=true]{box-shadow:0 0 0 3px rgba(36,88,103,.22)}
.vp-empty{font-size:11.5px;color:var(--bw-ink-3);grid-column:1/-1;align-self:center;padding-left:8px}

/* Key */
.vp-legend{list-style:none;display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--bw-ink-3);margin-top:12px}
.vp-legend i{display:inline-block;width:14px;height:10px;border-radius:3px;border:1.5px solid var(--bw-petrol);background:var(--bw-petrol-l);vertical-align:middle;margin-right:6px}
.vp-legend .k-swap{border-style:dashed}
.vp-legend .k-open{background:var(--bw-warn-l);border-color:var(--bw-warn)}
.vp-legend .k-live{background:var(--bw-cyan-l);border-color:var(--bw-cyan)}
.vp-legend .k-done{background:var(--bw-ok-l);border-color:var(--bw-ok)}
.vp-legend .k-window{background:#fff;border-color:var(--bw-rule-2)}

/* Lists in the side panels */
.vp-options>li{align-items:center}
.vp-options .why{font-size:12px;color:var(--bw-ink-3);text-align:right;max-width:48%}
.vp-run>li{flex-direction:column;align-items:stretch;gap:8px}
.vp-run .top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.vp-run .gap{font-size:11.5px;color:var(--bw-ink-3)}
.vp-rows>li{flex-direction:column;align-items:stretch;gap:2px}
.vp-rows .top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.vp-inline{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end}
@media(max-width:600px){.vp-inline{grid-template-columns:1fr}.vp-options .why{max-width:60%}}