/* ========================================================================== VISION Canada — application shells -------------------------------------------------------------------------- Two viewport-filling archetypes cover the seven analytical pages, so the platform reads as one application rather than eight unrelated documents: .vs-shell--workspace control rail | map stage | insight panel (population, housing, water, climate, integrated, roads map view) .vs-shell--report control rail | scrolling report body (NIA metrics, roads policy view) The landing page and the story scroll as documents instead, and use .vs-body--scroll with their own content layout rather than a shell. Every shell assumes with the shared nav as the first child, so the shell fills exactly the space the nav leaves behind. ========================================================================== */ .vs-body { display: flex; flex-direction: column; min-height: 100vh; height: 100vh; overflow: hidden; } /* Pages that scroll as a document rather than filling the viewport. */ .vs-body--scroll { height: auto; overflow: visible; } .vs-body--scroll .vs-nav { position: sticky; } .vs-shell { flex: 1 1 auto; min-height: 0; display: grid; background: var(--vs-bg); } /* -------------------------------------------------------------------------- Workspace: rail | stage | insight -------------------------------------------------------------------------- */ .vs-shell--workspace { grid-template-columns: var(--vs-rail-w) minmax(0, 1fr) var(--vs-insight-w); grid-template-areas: 'rail stage insight'; } /* Roads drops the insight column in its map views: the per-community detail arrives as a slide-in panel, and the network reads better with the width. */ .vs-shell--workspace.no-insight { grid-template-columns: var(--vs-rail-w) minmax(0, 1fr); grid-template-areas: 'rail stage'; } /* -------------------------------------------------------------------------- Report: rail | scrolling body -------------------------------------------------------------------------- */ .vs-shell--report { grid-template-columns: var(--vs-rail-w) minmax(0, 1fr); grid-template-areas: 'rail stage'; } /* -------------------------------------------------------------------------- Rail — the left control column -------------------------------------------------------------------------- */ .vs-rail { grid-area: rail; display: flex; flex-direction: column; min-height: 0; background: var(--vs-surface); border-right: 1px solid var(--vs-border); } .vs-rail__head { flex: 0 0 auto; padding: var(--vs-4) var(--vs-4) var(--vs-3); border-bottom: 1px solid var(--vs-border); background: var(--vs-bg-alt); } .vs-rail__title { display: flex; align-items: baseline; gap: var(--vs-2); font-size: var(--vs-fs-lg); font-weight: 600; letter-spacing: -0.02em; } .vs-rail__sub { margin-top: 3px; font-size: var(--vs-fs-xs); color: var(--vs-text-2); line-height: 1.5; } .vs-rail__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--vs-4); display: flex; flex-direction: column; gap: var(--vs-5); } .vs-rail__foot { flex: 0 0 auto; padding: var(--vs-3) var(--vs-4); border-top: 1px solid var(--vs-border); background: var(--vs-bg-alt); } /* A labelled group of controls inside the rail. */ .vs-field { display: flex; flex-direction: column; gap: var(--vs-2); } .vs-field > .vs-eyebrow { margin-bottom: 1px; } .vs-field__hint { font-size: var(--vs-fs-xs); color: var(--vs-text-3); line-height: 1.45; } /* -------------------------------------------------------------------------- Stage — the map or report canvas -------------------------------------------------------------------------- */ .vs-stage { grid-area: stage; position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--vs-bg); } .vs-stage--scroll { overflow-y: auto; overscroll-behavior: contain; } .vs-stage--map { overflow: hidden; } /* Content width for the report shell. */ .vs-stage__inner { width: 100%; max-width: 1360px; margin: 0 auto; padding: var(--vs-6); display: flex; flex-direction: column; gap: var(--vs-6); } /* Floating chip strip over a map, echoing the current view state. */ .vs-hud { position: absolute; top: var(--vs-3); left: var(--vs-3); z-index: 20; display: flex; align-items: center; gap: var(--vs-2); pointer-events: none; } .vs-hud__chip { display: flex; align-items: center; gap: var(--vs-2); padding: 6px 11px; background: rgba(14, 19, 27, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--vs-border-2); border-radius: var(--vs-r-pill); box-shadow: var(--vs-shadow-sm); font-size: var(--vs-fs-xs); color: var(--vs-text-2); white-space: nowrap; } .vs-hud__chip strong { color: var(--vs-text); font-weight: 600; } .vs-hud__chip .vs-num { color: var(--vs-accent); } .vs-hud__sep { width: 1px; height: 11px; background: var(--vs-border-2); } /* Floating legend / caption card anchored to a map corner. */ .vs-overlay { position: absolute; z-index: 20; /* A legend can outgrow a short stage — the roads page stacks five road classes on top of a line-width key. Cap it against the stage and scroll rather than let it run off the bottom of the map. */ max-height: calc(100% - var(--vs-12)); overflow-y: auto; overscroll-behavior: contain; padding: var(--vs-3); background: rgba(14, 19, 27, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--vs-border-2); border-radius: var(--vs-r); box-shadow: var(--vs-shadow); } .vs-overlay--bl { bottom: var(--vs-5); left: var(--vs-3); } .vs-overlay--br { bottom: var(--vs-5); right: var(--vs-3); } .vs-overlay--tr { top: var(--vs-3); right: var(--vs-3); } /* -------------------------------------------------------------------------- Insight — the right analysis column -------------------------------------------------------------------------- */ .vs-insight { grid-area: insight; display: flex; flex-direction: column; min-height: 0; background: var(--vs-surface); border-left: 1px solid var(--vs-border); } .vs-insight__head { flex: 0 0 auto; padding: var(--vs-4); border-bottom: 1px solid var(--vs-border); background: var(--vs-bg-alt); } .vs-insight__title { font-size: var(--vs-fs-md); font-weight: 600; } .vs-insight__sub { margin-top: 3px; font-size: var(--vs-fs-xs); color: var(--vs-text-2); line-height: 1.5; } .vs-insight__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--vs-4); display: flex; flex-direction: column; gap: var(--vs-4); } /* Empty state shown before the user selects a region. */ .vs-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--vs-2); padding: var(--vs-10) var(--vs-5); text-align: center; color: var(--vs-text-3); font-size: var(--vs-fs-sm); line-height: 1.6; } .vs-empty__icon { font-size: 26px; opacity: 0.4; } /* Fixed-height wrapper so canvases never grow unbounded inside a flex column. */ .vs-chart { position: relative; width: 100%; height: 190px; } .vs-chart--sm { height: 140px; } .vs-chart--lg { height: 280px; } .vs-chart > canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; } /* -------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- Targets desktop, laptop, and large monitors. Below 1280px the insight column collapses under the stage rather than squeezing the map. -------------------------------------------------------------------------- */ @media (min-width: 1921px) { :root { --vs-rail-w: 380px; --vs-insight-w: 420px; } .vs-stage__inner { max-width: 1680px; } } @media (max-width: 1500px) { :root { --vs-rail-w: 310px; --vs-insight-w: 340px; } } @media (max-width: 1280px) { .vs-body { height: auto; overflow: visible; } .vs-shell--workspace { grid-template-columns: var(--vs-rail-w) minmax(0, 1fr); grid-template-areas: 'rail stage' 'insight insight'; } .vs-shell--workspace .vs-stage { min-height: 62vh; } .vs-insight { border-left: 0; border-top: 1px solid var(--vs-border); max-height: none; } .vs-insight__body { overflow: visible; } .vs-rail__body { overflow: visible; } } @media (max-width: 900px) { .vs-shell--workspace, .vs-shell--report { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'rail' 'stage' 'insight'; } .vs-rail { border-right: 0; border-bottom: 1px solid var(--vs-border); } .vs-shell--workspace .vs-stage { min-height: 70vh; } .vs-stage__inner { padding: var(--vs-4); } } @media print { .vs-nav, .vs-rail, .vs-footer { display: none !important; } .vs-body { height: auto; overflow: visible; } .vs-shell { display: block; } }