/* Data Dashboard laptop illustration (homepage and the Data Dashboard page).
   The numbers count up and the graph draws when it comes into view: see dashboard-laptop.js. */
.br-laptop { width: 100%; max-width: 520px; margin: 0 auto; }
.br-laptop__screen { padding: 2.2% 2.2% 2.6%; border-radius: 16px 16px 4px 4px; background: #1d1f2b; box-shadow: 0 24px 50px rgba(33, 39, 113, 0.28); }
.br-laptop__base { position: relative; height: 14px; margin: 0 -6%; border-radius: 2px 2px 14px 14px; background: linear-gradient(180deg, #d9dce4, #aeb3c0); }
.br-laptop__base span { position: absolute; top: 0; left: 50%; width: 18%; height: 5px; transform: translateX(-50%); border-radius: 0 0 8px 8px; background: #9aa0ad; }

.br-dash { container-type: inline-size; display: grid; grid-template-columns: 11% 1fr; aspect-ratio: 16 / 10.4; overflow: hidden; border-radius: 4px; background: #fff; font-family: "Red Hat Display", "Segoe UI", Arial, sans-serif; color: #2f3437; }
.br-dash__side { display: flex; flex-direction: column; align-items: center; gap: 1.2cqw; padding-top: 2.4cqw; background: linear-gradient(180deg, #bf3765 0%, #7a2c63 55%, #212771 100%); color: #fff; }
.br-dash__logo { display: grid; place-items: center; width: 6cqw; height: 6cqw; border-radius: 50%; background: #fff; color: #bf3765; font-size: 3cqw; font-weight: 800; }
.br-dash__sidelabel { font-size: 1.5cqw; font-weight: 700; letter-spacing: 0.04em; }
.br-dash__menu { display: grid; gap: 0.6cqw; margin-top: 1.6cqw; }
.br-dash__menu i { display: block; width: 3.4cqw; height: 0.4cqw; border-radius: 1px; background: #fff; }
.br-dash__main { display: flex; flex-direction: column; min-width: 0; }
.br-dash__title { margin: 0; padding: 2.4cqw 3cqw 1.6cqw; font-size: 3.8cqw; font-weight: 600; line-height: 1; }
.br-dash__tabs { display: flex; padding-left: 3cqw; background: #bf3765; }
.br-dash__tabs span { display: flex; flex-direction: column; align-items: center; gap: 0.3cqw; padding: 0.9cqw 1.8cqw; background: #2f3437; color: #fff; font-size: 1.45cqw; font-weight: 600; }
.br-dash__tabs span.is-on { background: #fff; color: #2f3437; }
.br-dash__tabs svg { width: 2.4cqw; height: 2.4cqw; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.br-dash__body { position: relative; flex: 1; padding: 1.8cqw 3cqw 2cqw; }
.br-dash__school { margin: 0 0 1.4cqw; font-size: 2cqw; font-weight: 700; }
.br-dash__cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2cqw; }
.br-dash__card { display: grid; gap: 0.3cqw; padding: 1.2cqw 1.4cqw; border-radius: 1cqw; color: #fff; }
.br-dash__card small { font-size: 1.35cqw; font-weight: 600; opacity: 0.95; }
.br-dash__card b { font-size: 3.2cqw; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.br-dash__card--green { background: linear-gradient(135deg, #86b817, #55700f); }
.br-dash__card--red { background: linear-gradient(135deg, #f36a2d, #e1306c); }
.br-dash__card--cyan { background: linear-gradient(135deg, #34c9d6, #5a8fe6); }
.br-dash__card--indigo { background: linear-gradient(135deg, #6c70f2, #262a78); }
.br-dash__subtabs { display: flex; gap: 2.4cqw; margin: 2cqw 0 1cqw; font-size: 1.6cqw; font-weight: 700; color: #9aa0a8; }
.br-dash__subtabs span { border-bottom: 0.25cqw solid #dfe2ea; }
.br-dash__subtabs .is-on { color: #2f3437; border-color: #ffc93c; }
.br-dash__legend { display: flex; align-items: center; justify-content: center; gap: 0.8cqw; font-size: 1.3cqw; color: #6b7178; }
.br-dash__key { display: inline-block; width: 3cqw; height: 1.2cqw; border-radius: 1px; }
.br-dash__key--school { background: #2e8fdc; }
.br-dash__key--brna { margin-left: 1.2cqw; background: #f0587e; }
.br-dash__chart { display: block; width: 100%; height: 19cqw; margin-top: 0.6cqw; overflow: visible; }
.br-dash__grid path { fill: none; stroke: #e6e8ee; stroke-width: 1; vector-effect: non-scaling-stroke; }
.br-dash__line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.br-dash__line--school { stroke: #2e8fdc; stroke-width: 3; }
.br-dash__line--brna { stroke: #f0587e; }
.br-dash__plot { position: relative; margin-top: 0.6cqw; }
.br-dash__plot .br-dash__chart { margin-top: 0; }
.br-dash__dot { position: absolute; right: 0; top: 14.67%; width: 1.8cqw; height: 1.8cqw; margin: -0.9cqw -0.9cqw 0 0; border: 0.4cqw solid #fff; border-radius: 50%; background: #2e8fdc; box-shadow: 0 0 0 0 rgba(46, 143, 220, 0.5); }
.br-dash__badge { position: absolute; right: 3cqw; top: -1.6cqw; padding: 0.6cqw 1.2cqw; border-radius: 999px; background: #eef3e0; color: #4c6112; font-size: 1.4cqw; font-weight: 800; }

/* animation: set up only when the script runs, played when the laptop scrolls into view */
.br-laptop.is-ready .br-dash__line { stroke-dashoffset: 1; }
.br-laptop.is-ready .br-dash__area, .br-laptop.is-ready .br-dash__dot, .br-laptop.is-ready .br-dash__badge { opacity: 0; }
.br-laptop.is-ready .br-dash__card { opacity: 0; transform: translateY(8px); }
.br-laptop.is-live .br-dash__card { opacity: 1; transform: none; transition: opacity 500ms ease, transform 500ms ease; }
.br-laptop.is-live .br-dash__card:nth-child(2) { transition-delay: 120ms; }
.br-laptop.is-live .br-dash__card:nth-child(3) { transition-delay: 240ms; }
.br-laptop.is-live .br-dash__card:nth-child(4) { transition-delay: 360ms; }
.br-laptop.is-live .br-dash__line--brna { stroke-dashoffset: 0; transition: stroke-dashoffset 1600ms ease 500ms; }
.br-laptop.is-live .br-dash__line--school { stroke-dashoffset: 0; transition: stroke-dashoffset 2000ms cubic-bezier(.4, 0, .2, 1) 700ms; }
.br-laptop.is-live .br-dash__area { opacity: 1; transition: opacity 900ms ease 2200ms; }
.br-laptop.is-live .br-dash__dot { opacity: 1; transition: opacity 300ms ease 2600ms; animation: br-dash-ping 2.4s ease-out 2.9s infinite; }
.br-laptop.is-live .br-dash__badge { opacity: 1; transition: opacity 500ms ease 2900ms; }
@keyframes br-dash-ping { 0% { box-shadow: 0 0 0 0 rgba(46, 143, 220, 0.55); } 100% { box-shadow: 0 0 0 2.4cqw rgba(46, 143, 220, 0); } }
@media (prefers-reduced-motion: reduce) {
  .br-laptop .br-dash__dot { animation: none !important; }
}