/* Previo Analytics - the site as a Previo window: the navy rail on the left, the pale page beside it, white cards with
   square corners, gold only in the rail. Red is a loss, green a gain; navy is the product. Light surfaces only: the Previo
   apps are projected in council chambers and printed into board packets, and so is this. */
:root {
  --navy: #082747; --navy-2: #0D3A66; --gold: #FFC425; --gold-ink: #9a6b00;
  --page: #F3F6FA; --card: #ffffff; --line: #E1E8F0; --line-strong: #C7D3E0;
  --ink: #1B2733; --mut: #5B6B7C; --faint: #8CA0B3; --track: #E9EEF5; --hover: #F0F5FB; --selected: #E3EDF8;
  --loss: #B3261E; --gain: #1E7E3E; --warn: #B26A00; --warn-bg: #FFF6DE; --band: #D6E4F5; --forecast: #1F5FA8;
  --rail-text: #C4D6E8; --rail-muted: #7E97B2; --rail-group: #5F7A96; --rail-line: #153E6B;
}
* { box-sizing: border-box; }
html { scrollbar-gutter: stable; overflow-y: scroll; }   /* the scrollbar is always accounted for, so a short page and a long page are the same width */
html, body { margin: 0; background: #dfe5ec; color: var(--ink); font: 13.5px/1.45 "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif; }
a { color: var(--forecast); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--forecast); outline-offset: 2px; }
.grow { flex: 1; }

/* the window */
.win { max-width: 1500px; margin: 18px auto; background: var(--page); border: 1px solid var(--line-strong); box-shadow: 0 12px 44px rgba(8, 39, 71, .18); min-height: calc(100vh - 36px);
       display: grid; grid-template-columns: 230px 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: "title title" "rail page" "rail status"; }
.titlebar { grid-area: title; display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: var(--card); border-bottom: 1px solid var(--line); font-size: 12px; color: var(--mut); }
.titlebar .logo { width: 16px; height: 16px; }
.titlebar .app { color: var(--ink); font-weight: 600; }
.titlebar .dash { color: var(--faint); margin: 0 4px; font-weight: 400; }
.titlebar .chip { font-weight: 400; color: var(--mut); }
.titlebar .wbtn { width: 34px; text-align: center; color: var(--mut); font-size: 13px; }
.titlebar .menu { display: none; }

/* the rail */
.rail { grid-area: rail; background: var(--navy); color: var(--rail-text); display: flex; flex-direction: column; padding: 0 0 14px; }
.rail .brand { padding: 22px 18px 18px; display: flex; flex-direction: column; }
.rail .brand .p { color: var(--gold); font-size: 22px; font-weight: 800; letter-spacing: .01em; line-height: 1; }
.rail .brand .n { color: #fff; font-size: 22px; font-weight: 800; line-height: 1.05; }
.rail .brand .tag { color: var(--rail-muted); font-size: 11px; margin-top: 8px; line-height: 1.35; }
.rail .group { color: var(--rail-group); font-size: 10px; font-weight: 700; letter-spacing: .08em; padding: 12px 18px 4px; }
.rail a { display: block; color: var(--rail-text); font-size: 14px; font-weight: 600; padding: 10px 20px; border-left: 3px solid transparent; }
.rail a:hover { background: var(--rail-line); text-decoration: none; color: #fff; }
.rail a.on { background: var(--navy-2); color: #fff; border-left-color: var(--gold); }
.rail .foot { margin-top: auto; padding: 14px 18px 0; border-top: 1px solid var(--rail-line); display: flex; flex-direction: column; gap: 4px; color: var(--rail-muted); font-size: 10.5px; line-height: 1.4; }
.rail .foot .maker { color: var(--rail-muted); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; padding: 0; border: 0; }
.rail .foot .maker:hover { color: #fff; background: none; }

/* the page */
.page { grid-area: page; padding: 20px 26px 28px; min-width: 0; }
.statusbar { grid-area: status; display: flex; gap: 18px; align-items: center; padding: 7px 26px; background: var(--card); border-top: 1px solid var(--line); color: var(--mut); font-size: 11.5px; }
.statusbar a { color: var(--forecast); }

.ph { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.ph h1, .ph h2 { margin: 0; font-size: 22px; font-weight: 700; color: var(--navy); }
.ph .num { color: var(--faint); font-size: 14px; font-weight: 600; }
.ph .sub { color: var(--mut); font-size: 13.5px; flex-basis: 100%; }
.ph .sub:first-of-type { flex-basis: auto; }
.ph .btn { margin-left: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.btn { display: inline-block; border: 1px solid var(--line-strong); padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--ink); background: var(--card); white-space: nowrap; }
.btn:hover { background: var(--hover); text-decoration: none; }
.btn.primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn.primary:hover { background: var(--navy-2); }

/* cards and tiles, as the apps draw them */
.card { background: var(--card); border: 1px solid var(--line); padding: 16px 18px; margin-bottom: 14px; }
.st { font-size: 16px; font-weight: 700; color: var(--navy); margin: 0 0 2px; }
.ss { color: var(--mut); font-size: 12.5px; margin: 0 0 12px; }
.tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 14px; }
.tile { background: var(--card); border: 1px solid var(--line); padding: 14px 16px; display: flex; flex-direction: column; min-width: 0; }
.tile .kl { font-size: 10px; letter-spacing: .08em; font-weight: 700; color: var(--mut); }
.tile b { font-size: 26px; font-weight: 700; color: var(--navy); line-height: 1.2; margin: 4px 0 2px; }
.tile b.gain { color: var(--gain); }
.tile .kn { font-size: 11.5px; color: var(--mut); }

.split { display: grid; grid-template-columns: 1fr 340px; gap: 14px; align-items: start; }
.main-col, .side { min-width: 0; }

/* the grid */
.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
.grid th { text-align: left; font-size: 10px; letter-spacing: .08em; font-weight: 700; color: var(--mut); padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.grid td { padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.grid tr:last-child td { border-bottom: 0; }
.grid tr[data-href] { cursor: pointer; }
.grid tr[data-href]:hover td { background: var(--hover); }
.grid .name { font-weight: 600; white-space: nowrap; }
.grid .name .stage { display: block; font-weight: 400; font-size: 11px; color: var(--mut); }
.grid .num, .grid th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.grid .num .note { display: block; font-weight: 400; font-size: 11px; color: var(--mut); }
.grid .mut { color: var(--mut); }
.grid .q { color: var(--ink); max-width: 34ch; }
.grid .mk { width: 28px; padding-right: 0; }
.grid .mk img.mark { width: 18px; height: 18px; display: block; }
.grid.small td, .grid.small th { white-space: normal; }
.grid.small .btn { padding: 4px 10px; font-size: 12px; }
.grid tr.group td { background: var(--page); color: var(--mut); font-size: 10.5px; letter-spacing: .06em; font-weight: 700; padding: 6px 8px; }
.grid tr.group td b { color: var(--navy); margin-right: 6px; font-size: 12px; letter-spacing: 0; }
.grid .cur { color: var(--gain); margin-left: 10px; }
.grid.releases td.when, .grid.releases td.tool { white-space: nowrap; }
.hint { color: var(--mut); font-size: 12px; margin: 8px 2px 14px; }

/* the posters under the grid */
.posters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.poster { margin: 0; }
.poster a { position: relative; display: block; }
.poster img { width: 100%; height: auto; display: block; border: 1px solid var(--line); }
.poster .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; display: grid; place-items: center; background: rgba(8, 39, 71, .85); color: var(--gold); font-size: 16px; padding-left: 3px; }
.poster a:hover img { border-color: var(--forecast); }
.poster figcaption { font-size: 12px; color: var(--mut); margin-top: 6px; }
.poster figcaption b { color: var(--ink); }

/* the side panels */
.stages { list-style: none; margin: 0; padding: 0; }
.stages li { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.stages li:last-child { border-bottom: 0; }
.stages .no { background: var(--navy); color: #fff; font-weight: 700; font-size: 12px; text-align: center; padding: 4px 0; }
.stages .what { font-size: 12.5px; color: var(--mut); }
.stages .what b { display: block; color: var(--ink); }
.stages .open { font-size: 11.5px; color: var(--forecast); background: var(--selected); padding: 2px 8px; }
.facts-list { margin: 0; padding-left: 18px; }
.facts-list li { margin: 5px 0; color: var(--ink); }
.small { font-size: 12px; color: var(--mut); margin: 0; }

/* the product pages */
.buybar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--line); padding: 12px 14px; margin: 0 0 14px; }
.buybar .price { font-size: 22px; font-weight: 700; color: var(--navy); }
.buybar .once { color: var(--mut); font-size: 12px; margin-right: auto; }
.subnav { display: flex; gap: 2px; margin: 0 0 14px; border-bottom: 1px solid var(--line); }
.subnav a { padding: 6px 12px; font-size: 12.5px; font-weight: 600; color: var(--mut); border-bottom: 3px solid transparent; }
.subnav a:hover { color: var(--navy); text-decoration: none; border-bottom-color: var(--gold); }
.two { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; align-items: start; margin-bottom: 16px; }
.two.hero .video video { aspect-ratio: 16 / 9; }
.video video { width: 100%; height: auto; border: 1px solid var(--line); background: #000; display: block; }
.cap { color: var(--mut); font-size: 12px; margin: 6px 2px 0; }
.facts h2, .facts h3, .sect { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); margin: 0 0 6px; font-weight: 700; }
.help summary h3 { display: inline; margin: 0; font-size: inherit; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); }
.sect { margin: 18px 0 8px; }
.facts ul { margin: 0 0 14px; padding-left: 18px; }
.facts li { margin: 4px 0; }
.facts p { margin: 0 0 10px; }
.facts .big { font-size: 16px; font-weight: 600; margin: 4px 0 10px; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px 16px; margin-bottom: 8px; }
.gallery figure { margin: 0; min-width: 0; }
.gallery figure img { width: 100%; height: auto; display: block; border: 1px solid var(--line); aspect-ratio: 16 / 9.3; object-fit: cover; object-position: top left; background: #fff; }   /* height: auto lets the aspect ratio win over the height attribute */
.gallery figure a { cursor: zoom-in; }
.gallery figure a:hover img { border-color: var(--forecast); }
.gallery figcaption { color: var(--mut); font-size: 12px; margin-top: 6px; }
.help.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.help details { border-bottom: 1px solid var(--line); padding: 6px 0; }
.help summary { cursor: pointer; font-weight: 600; color: var(--ink); padding: 4px 0; list-style: none; display: flex; align-items: center; gap: 8px; }
.help summary::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid var(--mut); border-bottom: 1.5px solid var(--mut); transform: rotate(-45deg); transition: transform .15s; }
.help details[open] summary::before { transform: rotate(45deg); }
.help details p, .help details ol { margin: 4px 0 8px 14px; color: var(--mut); max-width: 66ch; }
.help details ol { padding-left: 18px; }
.help details li { margin: 3px 0; }
.help details b { color: var(--ink); }

/* What's new */
.videos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 4px; }
.videos .cap .len { color: var(--faint); font-variant-numeric: tabular-nums; margin-left: 6px; }

/* the image viewer */
.viewer { position: fixed; inset: 0; background: rgba(8, 20, 36, .9); z-index: 50; display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; padding: 24px 8px; }
.viewer[hidden] { display: none; }
.viewer figure { grid-column: 2; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; max-height: calc(100vh - 48px); }
.viewer img { max-width: 100%; max-height: calc(100vh - 110px); border: 1px solid #3a4553; background: #fff; box-shadow: 0 16px 48px rgba(0,0,0,.5); }
.viewer figcaption { color: #e6e9ee; font-size: 14px; text-align: center; max-width: 80ch; }
.viewer button { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #fff; font-size: 30px; line-height: 1; width: 44px; height: 44px; cursor: pointer; padding: 0; }
.viewer button:hover { background: rgba(255,255,255,.18); }
.viewer .v-prev { grid-column: 1; justify-self: center; }
.viewer .v-next { grid-column: 3; justify-self: center; }
.viewer .v-close { position: fixed; top: 16px; right: 16px; }
.viewer .v-count { position: fixed; top: 26px; left: 20px; color: #9aa5b1; font-size: 13px; font-variant-numeric: tabular-nums; }

/* smaller screens: the side panel drops under, the tiles wrap */
@media (max-width: 1200px) {
  .tiles { grid-template-columns: repeat(3, 1fr); }
  .split, .two, .help.cols { grid-template-columns: 1fr; }
  .posters, .videos { grid-template-columns: 1fr; }
}
/* a tablet and a phone: the rail folds behind the Menu button, the window fills the screen */
@media (max-width: 900px) {
  html, body { font-size: 14px; }
  .win { margin: 0; border: 0; min-height: 100vh; grid-template-columns: 1fr; grid-template-areas: "title" "rail" "page" "status"; }
  .titlebar { flex-wrap: wrap; gap: 6px 8px; }
  .titlebar .wbtn { display: none; }
  .titlebar .menu { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; font-weight: 600; border: 1px solid var(--line-strong); padding: 5px 10px; background: var(--card); cursor: pointer; color: var(--ink); }
  .rail { display: none; }
  .rail.open { display: flex; padding-bottom: 10px; }
  .rail.open .brand { padding: 14px 18px 10px; }
  .rail.open .foot { display: none; }
  .rail.open a { padding: 13px 20px; font-size: 15px; }
  .page { padding: 14px 12px 20px; }
  .ph h1, .ph h2 { font-size: 19px; }
  .ph .btn { margin-left: 0; }
  .tiles { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .tile b { font-size: 22px; }
  table.grid { display: block; overflow-x: auto; max-width: 100%; }
  .grid .q { max-width: none; }
  .gallery { grid-template-columns: 1fr; }
  .buybar .once { flex-basis: 100%; order: 2; margin-right: 0; }
  .buybar .btn { flex: 1 1 auto; text-align: center; }
  .subnav { overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .statusbar { flex-wrap: wrap; gap: 4px 14px; padding: 7px 12px; }
  .viewer { grid-template-columns: 32px 1fr 32px; padding: 8px 2px; }
  .viewer button { width: 36px; height: 36px; font-size: 24px; }
}