/* ==========================================================================
   AP ITE&C Policies — tablet-style display (Apple-inspired, light).
   Portrait-first: every policy fits on one screen, no scrolling.
   Colour tokens live in css/themes.css. Sizes in rem scale with the screen.
   ========================================================================== */

@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("../assets/fonts/inter-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("../assets/fonts/inter-latin-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("../assets/fonts/inter-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url("../assets/fonts/inter-latin-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-weight: 800; font-display: swap; src: url("../assets/fonts/inter-latin-800.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("../assets/fonts/inter-latin-ext-400.woff2") format("woff2"); unicode-range: U+0100-02AF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("../assets/fonts/inter-latin-ext-500.woff2") format("woff2"); unicode-range: U+0100-02AF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("../assets/fonts/inter-latin-ext-600.woff2") format("woff2"); unicode-range: U+0100-02AF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url("../assets/fonts/inter-latin-ext-700.woff2") format("woff2"); unicode-range: U+0100-02AF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-weight: 800; font-display: swap; src: url("../assets/fonts/inter-latin-ext-800.woff2") format("woff2"); unicode-range: U+0100-02AF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --tab-h: 5.8rem;
  --tab-gap: 1.6rem;
  --gutter: 3rem;
  --r-lg: 2.2rem;
  --r-md: 1.6rem;
  --shadow-card: 0 0.06rem 0.12rem rgba(0, 0, 0, 0.04), 0 0.8rem 2.4rem rgba(0, 0, 0, 0.06);
  --shadow-float: 0 0 0 0.04rem rgba(0, 0, 0, 0.06), 0 1rem 3rem rgba(0, 0, 0, 0.14);
  --font: "Inter", -apple-system, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  font-size: clamp(12px, calc(0.62vmin + 0.5vmax), 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg-paint, var(--bg));
  background-color: var(--bg);
  color: var(--label);
  font-family: var(--font);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overscroll-behavior: none;
}
body.kiosk { user-select: none; -webkit-user-select: none; }
body.kiosk img, body.kiosk video { -webkit-user-drag: none; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
button:focus-visible { outline: 0.2rem solid var(--accent); outline-offset: 0.2rem; }
[hidden] { display: none !important; }
.ico { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
[data-icon] { display: inline-flex; align-items: center; justify-content: center; }
.noscript { position: fixed; inset: 0; display: grid; place-items: center; font-size: 2rem; }

/* ============================================================ policy pages */
/* Each policy fills exactly one screen. Inside .fit every size is in em, so
   board.js can scale the whole page (font-size) until it fits without scrolling. */
/* ---------------------------------------------------- background motion
   Behind every page. Styles (html data-bg): "glow" = soft colour lights drifting
   very slowly; "waves" = translucent waves flowing along the top and bottom;
   "both"; "off". Colours come from the theme. Only transforms animate (cheap). */
.backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.backdrop > * { position: absolute; display: none; will-change: transform; }
:root[data-bg="glow"] .orb, :root[data-bg="both"] .orb,
:root[data-bg="waves"] .wave, :root[data-bg="both"] .wave { display: block; }

.orb { width: 85vmax; height: 85vmax; border-radius: 50%; }
.orb-1 { left: -30vmax; top: -35vmax; background: radial-gradient(closest-side, var(--orb-1), transparent); animation: float-a 46s ease-in-out infinite alternate; }
.orb-2 { right: -35vmax; top: 10vh; background: radial-gradient(closest-side, var(--orb-2), transparent); animation: float-b 58s ease-in-out infinite alternate; }
.orb-3 { left: -10vmax; bottom: -45vmax; background: radial-gradient(closest-side, var(--orb-3), transparent); animation: float-c 52s ease-in-out infinite alternate; }

/* a seamless wave shape, repeated sideways and slid by exactly one repeat */
.wave {
  left: 0; width: 200%;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 60C200 0 400 0 600 60S1000 120 1200 60V120H0Z'/%3E%3C/svg%3E") repeat-x 0 0 / 50% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 60C200 0 400 0 600 60S1000 120 1200 60V120H0Z'/%3E%3C/svg%3E") repeat-x 0 0 / 50% 100%;
}
.wave-1 { bottom: 0; height: 26vh; background: linear-gradient(180deg, var(--wave-1), transparent 140%); animation: wave-slide 38s linear infinite; }
.wave-2 { bottom: 0; height: 34vh; background: linear-gradient(180deg, var(--wave-2), transparent 140%); animation: wave-slide 61s linear infinite reverse; -webkit-mask-position: 25% 0; mask-position: 25% 0; }
.wave-top { top: 0; height: 30vh; background: linear-gradient(180deg, var(--wave-2), transparent 140%); animation: wave-slide-top 54s linear infinite; }

.stage { position: fixed; inset: 0; z-index: 1; }

/* ------------------------------------------------- Version 2: top bar
   html data-layout="v2": AP logo (left), "Government of Andhra Pradesh" (centre),
   Sunrise logo (right) above every page; the pages start below it. */
:root { --gov-h: 7.6rem; }
.govbar { display: none; }
:root[data-layout="v2"] .govbar {
  position: fixed; z-index: 20; top: 0; left: 0; right: 0; height: var(--gov-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 1.2rem;
  padding: 0 var(--gutter);
  background: var(--card);
  box-shadow: 0 0.06rem 0 var(--sep), 0 0.6rem 1.8rem rgba(var(--shadow-rgb), 0.07);
  animation: fade 0.6s var(--ease) both;
}
:root[data-layout="v2"] .stage { top: var(--gov-h); }
.gb-left { justify-self: start; }
.gb-right { justify-self: end; }
.gb-title { font-size: 1.95rem; font-weight: 800; letter-spacing: -0.015em; line-height: 1.15; text-align: center; color: var(--title); }
.gb-logo { display: flex; align-items: center; height: 5.9rem; }
.gb-logo img { height: 100%; width: auto; max-width: 16rem; object-fit: contain; display: block; }
/* placeholder until the logo file is supplied */
.gb-ph { height: 5.9rem; min-width: 5.9rem; padding: 0 1.1rem; display: grid; place-items: center; border: 0.12rem dashed var(--label-4); border-radius: 2.4rem; font-size: 0.78rem; font-weight: 600; line-height: 1.2; text-align: center; color: var(--label-3); }
.gb-left .gb-ph { width: 5.9rem; padding: 0; border-radius: 50%; }
:root[data-layout="v2"] .fit .p-gov { display: none !important; }   /* the fixed top bar shows the logos */

/* Version 2 page (portrait): full-width title, then a wide banner image */
@media (orientation: portrait) {
  :root[data-layout="v2"] .p-intro { grid-template-columns: minmax(0, 1fr); gap: 1.3em; }
  :root[data-layout="v2"] .p-title { font-size: 3.8rem; }
  :root[data-layout="v2"] .p-tagline { max-width: 46em; }
  :root[data-layout="v2"] .hero-card { aspect-ratio: 3 / 1; }
}

/* Pages slide: the next policy comes in from the right, the old one leaves to the left
   (reversed when going back). */
.page {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transform: translateX(5rem);
  transition: opacity 0.55s var(--ease), transform 0.8s var(--ease-out), visibility 0s linear 0.8s;
}
.page.is-leaving { transform: translateX(-5rem); }
.stage.is-back .page { transform: translateX(-5rem); }
.stage.is-back .page.is-leaving { transform: translateX(5rem); }
.page.is-active, .stage.is-back .page.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity 0.7s var(--ease) 0.15s, transform 0.95s var(--ease-out) 0.15s, visibility 0s; }
.page-inner {
  position: absolute; inset: 0;
  padding: 2.2rem var(--gutter) calc(var(--tab-h) + var(--tab-gap) * 2);
  overflow: hidden;
}
.page-inner.is-overflow { overflow-y: auto; scrollbar-width: none; touch-action: pan-y; } /* only if a screen is far too small */
.page-inner::-webkit-scrollbar { display: none; }
.fit { font-size: calc(1rem * var(--fit, 1)); overflow-wrap: break-word; }
/* Chips, title, photo and Key Incentives (.side) have one shared size on every page
   (board.js syncSide sets --side and equal heights for the text block and the Key
   Incentives box), so they look identical from page to page; only the incentives scale. */
.side { font-size: calc(1rem * var(--side, 1)); }
.keyband { display: flex; flex-direction: column; }
.kgrid { flex: 1 1 auto; }
/* After scaling, .fit takes the full screen height and the spare space is shared out,
   so the page always reaches the bottom of the screen. */
.fit.is-fill { height: 100%; display: flex; flex-direction: column; }
.fit.is-fill .details { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1em; }   /* gap = the collapsed margins of the measured layout */
.fit.is-fill .details-head, .fit.is-fill .sec-card, .fit.is-fill .footnote { margin: 0; }
.fit.is-fill .sec-card { flex: 1 1 auto; display: flex; flex-direction: column; }
.fit.is-fill .rows { flex: 1 1 auto; align-content: space-evenly; }
.fit.is-fill .rows.l-tiles, .fit.is-fill .rows.l-wide { align-content: stretch; }   /* tiles grow instead of spreading */
.fit.is-fill .footnote { flex: none; }

/* top row: chips, counter, logos */
.p-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin-bottom: 0.7em; }
.chip { padding: 0.4em 0.9em; border-radius: 0.5em; font-size: 0.95em; font-weight: 600; color: var(--chip-ink); background: var(--chip-bg); white-space: nowrap; }
/* coloured chips above the title: policy version in saffron, years in green */
.chip.c-ver, .chip.c-yr { padding: 0.3em 0.75em; border-radius: 2em; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.3; color: #fff; }   /* compact, fixed size on every slide */
.chip.c-ver { background: linear-gradient(135deg, #F7A23E, #E0700F); box-shadow: 0 0.2em 0.5em rgba(224, 112, 15, 0.22); }
.chip.c-yr  { background: linear-gradient(135deg, #2AA563, #16794A); box-shadow: 0 0.2em 0.5em rgba(22, 121, 74, 0.2); }
/* Version 1 logo row: AP logo (left) · Government of Andhra Pradesh (centre) · Sunrise logo (right) */
.p-gov { font-size: 1rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 1em; margin-bottom: 1.3em; }   /* 1rem: same size on every slide, not scaled with the page content */
.p-gov > :first-child { justify-self: start; }
.p-gov-r { justify-self: end; display: flex; }
.p-gov-title { font-size: 1.75em; font-weight: 800; letter-spacing: -0.015em; line-height: 1.15; text-align: center; color: var(--title); }
.p-logo { flex: none; height: 4.6em; width: auto; object-fit: contain; display: block; }

/* title + photo */
.p-intro { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.8em; align-items: center; }
.p-pre { margin: 0; font-size: 1.45em; font-weight: 600; color: var(--label-3); }
/* titles use rem: the same size on every slide (the content below is what scales to fit) */
.p-title { margin: 0.1em 0 0; font-size: 3.4rem; font-weight: 800; line-height: 1.04; letter-spacing: -0.035em; color: var(--title); }
.p-tagline { margin: 0.6em 0 0; font-size: 1.3rem; line-height: 1.42; color: var(--label-3); }
.hero-card { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: 1.1em; overflow: hidden; background: linear-gradient(160deg, var(--photo-a), var(--photo-b)); isolation: isolate; box-shadow: 0 0.6em 1.8em rgba(var(--shadow-rgb), 0.12); }
.hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(160deg, var(--photo-a), var(--photo-b)); }
.ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65%); transform: translateX(-100%); animation: shimmer 6s var(--ease) infinite 1.2s; }
.ph-icon { width: 5.6em; height: 5.6em; border-radius: 50%; display: grid; place-items: center; background: var(--ph-icon-bg); color: var(--label-4); box-shadow: 0 0.6em 1.8em rgba(var(--shadow-rgb), 0.12); }
.ph-icon .ico { font-size: 2.6em; stroke-width: 1.4; }

/* key incentives band */
.keyband { position: relative; overflow: hidden; margin-top: 1.6em; padding: 1.4em 1.5em 1.5em; border-radius: 1.1em; color: #fff; background: linear-gradient(135deg, var(--band-a), var(--band-b)); }
.keyband::after { /* one soft light sweep after the figures land */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.16) 50%, transparent 62%);
  transform: translateX(-100%);
}
.band-title { margin: 0 0 1em; font-size: 0.92em; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--band-title); }
/* tiles are separate rounded cards (no clipping frame), so highlight frames and zooms are never cut off */
.kgrid { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 0.45em; }
.k { padding: 1.1em 1.1em 1.2em; border-radius: 0.75em; background: var(--tile); }
.k-val { display: block; font-size: 2.3em; font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--kval); white-space: nowrap; font-variant-numeric: tabular-nums; }
.k-lbl { display: block; margin-top: 0.55em; font-size: 0.98em; line-height: 1.38; color: var(--klbl); }

/* Key Incentives colour styles (html data-band; Style chip -> Key Incentives).
   "theme" follows the colour theme; the others override just this band. */
:root[data-band="saffron"]  { --band-a: #C9500A; --band-b: #F28C1E; --tile: #D2610E; --band-title: #FFFFFF; --kval: #FFFFFF; --klbl: rgba(255, 255, 255, 0.95); --kgap: rgba(255, 255, 255, 0.35); }
:root[data-band="green"]    { --band-a: #08402A; --band-b: #168A55; --tile: #0C5A39; --band-title: #FFD27A; --kval: #FFC94D; --klbl: rgba(255, 255, 255, 0.92); --kgap: rgba(255, 255, 255, 0.2); }
:root[data-band="midnight"] { --band-a: #040E22; --band-b: #0D2350; --tile: #0A1B3D; --band-title: #FFA94D; --kval: #FFA94D; --klbl: rgba(255, 255, 255, 0.9); --kgap: rgba(255, 169, 77, 0.35); }
:root[data-band="teal"]     { --band-a: #034850; --band-b: #0B8A8F; --tile: #06636B; --band-title: #FFE066; --kval: #FFE066; --klbl: rgba(255, 255, 255, 0.92); --kgap: rgba(255, 255, 255, 0.22); }
/* colour tiles: each figure in its own colour */
:root[data-band="multi"]    { --band-a: #0B2A5C; --band-b: #133A78; --band-title: #FFC46B; --kval: #FFFFFF; --klbl: rgba(255, 255, 255, 0.95); --kgap: transparent; }
:root[data-band="multi"] .k { box-shadow: 0 0.5em 1.2em rgba(0, 0, 0, 0.25); }
:root[data-band="multi"] .k:nth-child(4n+1) { background: linear-gradient(135deg, #F7A23E, #E0650C); }
:root[data-band="multi"] .k:nth-child(4n+2) { background: linear-gradient(135deg, #3B82F6, #1D4ED8); }
:root[data-band="multi"] .k:nth-child(4n+3) { background: linear-gradient(135deg, #2BB673, #13804B); }
:root[data-band="multi"] .k:nth-child(4n+4) { background: linear-gradient(135deg, #A855F7, #7E22CE); }
/* light cards: white cards on the page, coloured figures */
:root[data-band="light"] .keyband { color: var(--label); background: var(--card); box-shadow: 0 0.6em 1.8em rgba(var(--shadow-rgb), 0.1); }
:root[data-band="light"] { --band-title: var(--head); --klbl: var(--label-2); --kgap: transparent; }
:root[data-band="light"] .k { background: var(--fill); }
:root[data-band="light"] .k:nth-child(4n+1) .k-val { color: #E0700F; }
:root[data-band="light"] .k:nth-child(4n+2) .k-val { color: #0B4A9E; }
:root[data-band="light"] .k:nth-child(4n+3) .k-val { color: #16794A; }
:root[data-band="light"] .k:nth-child(4n+4) .k-val { color: #7E22CE; }
:root[data-band="light"][data-theme="navy"] .k:nth-child(4n+2) .k-val { color: #6FA8FF; }
:root[data-band="light"][data-theme="navy"] .k:nth-child(4n+3) .k-val { color: #4CCB8A; }
:root[data-band="light"][data-theme="navy"] .k:nth-child(4n+4) .k-val { color: #C99BFF; }
:root[data-band="light"] .keyband::after { background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.5) 50%, transparent 62%); }

/* every incentive */
.details { margin-top: 1.5rem; }   /* rem: the incentives start at the same place on every page */
.details-head { display: flex; align-items: center; gap: 0.8em; margin: 0 0 1em; font-size: 0.92em; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--head); }
.details-head::before { content: ""; width: 2.2em; height: 0.28em; border-radius: 1em; background: var(--saffron); }
.sec-card { --acc: var(--acc-a); margin: 0 0 1em; padding: 1.15em 1.5em 0.5em; border-radius: 0.9em; background: var(--card); border-left: 0.42em solid var(--acc); box-shadow: 0 0.5em 1.5em rgba(var(--shadow-rgb), 0.08); }
.sec-title { margin: 0 0 0.3em; font-size: 1.42em; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--title); }
.sec-card.acc-1 { --acc: var(--acc-b); }
.sec-card.acc-2 { --acc: var(--acc-c); }
.sec-card.is-tiles, .sec-card.is-wide { padding-bottom: 1.3em; }

/* incentive items: an icon that matches the incentive (no numbers), title, details.
   The section's layout (board.js layoutFor) decides how they are arranged. */
.rows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--rc, 2), minmax(0, 1fr)); column-gap: 1.8em; }
.row { display: grid; grid-template-columns: 2.1em minmax(0, 1fr); gap: 0.8em; padding: 0.8em 0; border-top: 0.06em solid var(--sep); }
.row.r-top { border-top: 0; }
.row-ic { width: 2.1em; height: 2.1em; border-radius: 0.65em; display: grid; place-items: center; color: var(--acc); background: color-mix(in srgb, var(--acc) 13%, transparent); }
.row-ic .ico { font-size: 1.15em; stroke-width: 2; }

/* tiles: items side by side as soft cards (one row of 2-3, or a grid of 4-6) */
.rows.l-tiles { gap: 0.8em; margin-top: 0.4em; }
/* icon on the left, text on the right: saves the height of a whole line per tile */
.l-tiles .row { grid-template-columns: 2.1em minmax(0, 1fr); align-items: start; align-content: start; gap: 0.75em; padding: 0.85em 1em 0.9em; border: 0; border-radius: 0.8em; background: color-mix(in srgb, var(--acc) 7%, var(--card)); }
.l-tiles .row-ic { width: 2.1em; height: 2.1em; border-radius: 0.65em; }
.l-tiles .row-ic .ico { font-size: 1.15em; }

/* list: one item per line - title on the left, details on the right */
.l-list .row { grid-template-columns: 2.1em minmax(0, 0.85fr) minmax(0, 1.5fr); align-items: start; column-gap: 0.9em; }
.l-list .row-tx { display: contents; }
.l-list .row-text { margin: 0; }

/* wide: a single item as a full-width banner */
.rows.l-wide { margin-top: 0.4em; }
.l-wide .row { grid-template-columns: 3em minmax(0, 1fr); align-items: center; gap: 1em; padding: 1.1em 1.3em; border: 0; border-radius: 0.8em; background: color-mix(in srgb, var(--acc) 8%, var(--card)); }
.l-wide .row-ic { width: 3em; height: 3em; border-radius: 0.9em; }
.l-wide .row-ic .ico { font-size: 1.55em; }
.row-title { margin: 0; font-size: 1.08em; font-weight: 700; line-height: 1.28; color: var(--label); }
.row-text { margin: 0.25em 0 0; font-size: 1em; line-height: 1.4; color: var(--label-2); }
.num { font-weight: 700; color: var(--num); white-space: nowrap; }
.sec-card table { width: 100%; margin: 0.4em 0 0.8em; border-collapse: collapse; }
.sec-card th { padding: 0.65em 0.8em; font-size: 0.8em; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-align: left; color: var(--head); background: var(--chip-bg); }
.sec-card td { padding: 0.7em 0.8em; font-size: 1em; line-height: 1.32; color: var(--label-2); border-bottom: 0.06em solid var(--sep); }
.sec-card tr:last-child td { border-bottom: 0; }
.sec-card td:first-child { font-weight: 700; color: var(--title); }
.footnote { margin: 0.2em 0 0; font-size: 0.88em; line-height: 1.45; color: var(--label-3); }

/* ------------------------------------------------------------ motion
   Every entrance runs when a page becomes active, each element after its own
   delay (--d, set in board.js). "both" keeps it hidden until its turn. */
.page.is-active .in { animation: rise 0.9s var(--ease-out) backwards; animation-delay: var(--d, 0s); }
/* title: words rise out of a mask, one after another */
.p-title .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.p-title .w > span { display: inline-block; }
.page.is-active .p-title .w > span { animation: word-up 0.95s var(--ease-out) both; animation-delay: var(--d, 0s); }
/* photo opens out, then drifts slowly for as long as the page is shown */
.page.is-active .hero-card { animation: reveal 1.2s var(--ease-out) 0.28s both; }
.page.is-active .hero-card > * { animation: drift var(--dur, 30s) linear both; }
/* key figures */
.page.is-active .keyband { animation: rise 0.9s var(--ease-out) 0.45s backwards; }
.page.is-active .k { animation: pop 0.75s var(--ease-out) backwards; animation-delay: var(--d, 0s); }
.page.is-active .keyband::after { animation: sheen 1.8s var(--ease) 1.5s both; }
/* incentive cards, then their rows one by one */
.page.is-active .details-head { animation: rise 0.8s var(--ease-out) 0.6s backwards; }
.page.is-active .sec-card { animation: rise 0.85s var(--ease-out) backwards; animation-delay: var(--d, 0s); }
.page.is-active .row, .page.is-active .sec-card tbody tr { animation: row-in 0.65s var(--ease-out) backwards; animation-delay: var(--d, 0s); }
.page.is-active .row-ic { animation: dot 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; animation-delay: calc(var(--d, 0s) + 0.12s); }
.page.is-active .footnote { animation: fade 0.8s var(--ease) 1.6s both; }

/* Highlight: while a page plays, the key figures and then each incentive are
   highlighted in turn (board.js times it, ~1.4 s each). Styles (html data-spot):
   "glide"  = a glowing frame glides from item to item + highlighter stroke + pops;
   "marker" = highlighter stroke + pops only;  "off" = none. */
.fit { position: relative; }
.spot {
  position: absolute; z-index: 5; left: 0; top: 0; pointer-events: none;
  width: var(--sw, 0); height: var(--sh, 0);
  transform: translate(var(--sx, 0), var(--sy, 0));
  border-radius: 0.8em;
  background: var(--spot-fill);
  box-shadow: 0 0 0 0.16em var(--focus-ring), 0 0 1.6em 0.2em var(--spot-glow);
  opacity: 0;
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), width 0.38s cubic-bezier(0.22, 1, 0.36, 1), height 0.38s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s var(--ease), box-shadow 0.3s var(--ease);
}
.spot.is-on { opacity: 1; }
.spot.is-jump { transition: opacity 0.35s var(--ease); }          /* first appearance: no slide in from a corner */
.spot.on-k { background: transparent; box-shadow: 0 0 0 0.16em var(--kval), 0 0 1.8em 0.3em rgba(255, 196, 107, 0.35); }
:root:not([data-spot="glide"]) .spot { display: none; }

/* highlighter stroke under the incentive title: sweeps in, then wipes out */
.mk {
  background-image: linear-gradient(90deg, var(--marker) 50%, transparent 50%);
  background-repeat: no-repeat;
  background-size: 200% 0.85em;
  background-position: 100% 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-position 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.row.is-focus .mk { background-position: 0 100%; }
:root[data-spot="off"] .mk { background: none; }

/* quick pops on the focused item */
.row-ic { transition: background-color 0.3s var(--ease), color 0.3s var(--ease); }
/* keep the entrance "dot" animation first in the list so removing the pop never restarts it */
.page.is-active .row.is-focus .row-ic {
  background: var(--acc); color: #fff;
  animation: dot 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) backwards, pop-q 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation-delay: calc(var(--d, 0s) + 0.12s), 0s;
}
.row.is-focus .num, .sec-card tbody tr.is-focus .num { animation: glow-q 0.6s var(--ease) 0.05s; }   /* glow, not scale: keeps line wrapping unchanged */
.k.is-focus .k-val { animation: pop-k 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes pop-q { 0% { transform: scale(1); } 45% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes glow-q { 0% { text-shadow: none; } 35% { text-shadow: 0 0 0.6em var(--focus-ring), 0 0 0.15em var(--focus-ring); } 100% { text-shadow: none; } }
@keyframes pop-k { 0% { transform: scale(1); } 45% { transform: scale(1.1); } 100% { transform: scale(1); } }
.k-val { transform-origin: left center; }

/* "zoom": only the highlighted item zooms in and lifts like a card, then
   settles back when the highlight moves on (no frame). */
:root[data-spot="zoom"] .row,
:root[data-spot="zoom"] .sec-card tbody tr { position: relative; transition: transform 0.3s cubic-bezier(0.34, 1.35, 0.64, 1); }
:root[data-spot="zoom"] .row { isolation: isolate; --zs: 1.07; }
:root[data-spot="zoom"] .sec-card tbody tr { --zs: 1.03; }
:root[data-spot="zoom"] .k { --zs: 1.04; }
:root[data-spot="zoom"] .row::after {   /* the lifted card behind the item */
  content: ""; position: absolute; z-index: -1; inset: 0.1em -0.7em; border-radius: 0.8em;
  background: var(--card);
  box-shadow: 0 0.9em 2.4em rgba(var(--shadow-rgb), 0.24), 0 0 0 0.08em color-mix(in srgb, var(--acc) 45%, transparent);
  opacity: 0; transition: opacity 0.25s var(--ease);
}
:root[data-spot="zoom"] .l-tiles .row::after,
:root[data-spot="zoom"] .l-wide .row::after { inset: 0; }
:root[data-spot="zoom"] .row.is-focus { transform: scale(var(--zs)); z-index: 3; }
:root[data-spot="zoom"] .row.is-focus::after { opacity: 1; }
:root[data-spot="zoom"] .sec-card tbody tr.is-focus { transform: scale(var(--zs)); z-index: 3; }
:root[data-spot="zoom"] .sec-card tbody tr.is-focus td { background: var(--card); box-shadow: 0 0.6em 1.6em rgba(var(--shadow-rgb), 0.18); }
:root[data-spot="zoom"] .k { position: relative; transition: transform 0.3s cubic-bezier(0.34, 1.35, 0.64, 1), background-color 0.4s var(--ease); }
:root[data-spot="zoom"] .k.is-focus { background: var(--band-b); transform: scale(var(--zs)); z-index: 2; }

/* Each highlighted item arrives with a different soft effect, picked at random
   (board.js sets data-fx). Every effect ends exactly at the zoomed state, so it
   then simply holds and settles back when the highlight moves on. The entrance
   animation stays first in each list so it never restarts. */
[data-fx="pop"]   { --fx: fx-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
[data-fx="tilt"]  { --fx: fx-tilt 0.55s var(--ease-out); }
[data-fx="rise"]  { --fx: fx-rise 0.45s var(--ease-out); }
[data-fx="flip"]  { --fx: fx-flip 0.5s var(--ease-out); }
[data-fx="slide"] { --fx: fx-slide 0.45s var(--ease-out); }
[data-fx="glow"]  { --fx: fx-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
[data-fx="sheen"] { --fx: fx-pop 0.4s var(--ease-out); }
:root[data-spot="zoom"] .page.is-active .row.is-focus[data-fx],
:root[data-spot="zoom"] .page.is-active .sec-card tbody tr.is-focus[data-fx] {
  animation: row-in 0.65s var(--ease-out) backwards, var(--fx);
  animation-delay: var(--d, 0s), 0s;
}
:root[data-spot="zoom"] .page.is-active .k.is-focus[data-fx] {
  animation: pop 0.75s var(--ease-out) backwards, var(--fx);
  animation-delay: var(--d, 0s), 0s;
}
/* glow: a soft ring spreads out from the lifted card */
:root[data-spot="zoom"] .row.is-focus[data-fx="glow"]::after { animation: fx-ring 0.65s var(--ease-out) 0.05s; }
:root[data-spot="zoom"] .k.is-focus[data-fx="glow"] { box-shadow: inset 0 0 0 0.12em var(--kval); }
/* sheen: a light sweeps across the card */
:root[data-spot="zoom"] .row::before {
  content: ""; position: absolute; z-index: 1; inset: 0.1em -0.7em; border-radius: 0.8em; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.7) 50%, transparent 62%) no-repeat;
  background-size: 260% 100%; background-position: 130% 0; opacity: 0;
}
:root[data-spot="zoom"] .l-tiles .row::before, :root[data-spot="zoom"] .l-wide .row::before { inset: 0; }
:root[data-spot="zoom"] .row.is-focus[data-fx="sheen"]::before { animation: fx-sheen 0.6s var(--ease) 0.08s; }
:root[data-theme="navy"] .row::before { background-image: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.16) 50%, transparent 62%); }

@keyframes fx-pop   { 0% { transform: scale(1); } 55% { transform: scale(calc(var(--zs) + 0.04)); } 100% { transform: scale(var(--zs)); } }
@keyframes fx-tilt  { 0% { transform: scale(1) rotate(0); } 35% { transform: scale(var(--zs)) rotate(-1.6deg); } 65% { transform: scale(var(--zs)) rotate(0.9deg); } 100% { transform: scale(var(--zs)) rotate(0); } }
@keyframes fx-rise  { 0% { transform: translateY(0.8em) scale(0.98); } 70% { transform: translateY(-0.12em) scale(var(--zs)); } 100% { transform: translateY(0) scale(var(--zs)); } }
@keyframes fx-flip  { 0% { transform: perspective(40em) rotateX(24deg) scale(1); } 100% { transform: perspective(40em) rotateX(0deg) scale(var(--zs)); } }
@keyframes fx-slide { 0% { transform: translateX(-1em) scale(1); } 100% { transform: translateX(0) scale(var(--zs)); } }
@keyframes fx-ring  { 0% { box-shadow: 0 0.9em 2.4em rgba(var(--shadow-rgb), 0.24), 0 0 0 0 color-mix(in srgb, var(--acc) 70%, transparent); }
                      100% { box-shadow: 0 0.9em 2.4em rgba(var(--shadow-rgb), 0.24), 0 0 0 1.1em color-mix(in srgb, var(--acc) 0%, transparent); } }
@keyframes fx-sheen { 0% { opacity: 1; background-position: 130% 0; } 100% { opacity: 1; background-position: -30% 0; } }

/* ======================================================= floating tab bar */
.tabbar { position: fixed; z-index: 50; left: 50%; bottom: var(--tab-gap); transform: translateX(-50%); display: flex; gap: 0.8rem; }
.capsule {
  position: relative;
  display: flex; align-items: center; gap: 0.2rem;
  height: var(--tab-h);
  padding: 0.45rem;
  border-radius: 3rem;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  backdrop-filter: saturate(180%) blur(28px);
  border: 0.06rem solid var(--glass-border);
  box-shadow: var(--shadow-float), inset 0 0.06rem 0 var(--glass-border);
}
.capsule::before { content: ""; position: absolute; left: 10%; right: 10%; top: 0.08rem; height: 45%; border-radius: 3rem 3rem 50% 50%; background: linear-gradient(180deg, var(--glass-shine), transparent); pointer-events: none; }
.tb-btn { position: relative; width: calc(var(--tab-h) - 0.9rem); height: calc(var(--tab-h) - 0.9rem); border-radius: 50%; display: grid; place-items: center; color: var(--label); transition: background 0.2s, transform 0.15s; }
.tb-btn .ico { font-size: 1.7rem; stroke-width: 2; }
.tb-btn:active { transform: scale(0.92); background: rgba(0, 0, 0, 0.06); }
.tb-play { background: linear-gradient(135deg, var(--navy), var(--blue)); color: #fff; }
.tb-play:active { background: var(--navy-2); }
.tb-tab { position: relative; height: 100%; min-width: 7.4rem; padding: 0 1rem; border-radius: 2.6rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; font-size: 0.85rem; font-weight: 600; color: var(--label-3); transition: background 0.25s, color 0.25s; }
.tb-tab .ico { font-size: 1.65rem; stroke-width: 1.9; }
.tb-tab.is-active { background: var(--chip-bg); color: var(--title); }
.tb-tab.is-active .ico { color: var(--accent); }
.tb-tab:active { transform: scale(0.96); }
body.has-overlay .capsule-ctrl { display: none; }
/* "01 / 10" next to the play controls; fills as the page plays (--prog from board.js) */
.tb-count {
  position: relative; isolation: isolate; overflow: hidden;
  height: calc(var(--tab-h) - 0.9rem); min-width: 6.2rem; margin-left: 0.3rem; padding: 0 1.1rem;
  display: flex; align-items: center; justify-content: center; gap: 0.3em; border-radius: 2rem;
  font-size: 1.05rem; font-weight: 600; color: var(--label-3); font-variant-numeric: tabular-nums; white-space: nowrap;
  background: var(--chip-bg);
}
.tb-count b { font-weight: 800; color: var(--title); }
.tb-count::before {
  content: ""; position: absolute; z-index: -1; left: 0; top: 0; bottom: 0;
  width: calc(var(--prog, 0) * 100%);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}
/* portrait: the Style chip shows only its icon, so it clears the wider control bar */
@media (orientation: portrait) {
  .style-chip { width: 3rem; padding: 0; justify-content: center; }
  .style-chip > span:last-child { display: none; }
}

/* Style chip (bottom-right) and its options panel */
.style-ui { position: fixed; z-index: 60; right: 1.2rem; bottom: calc(var(--tab-gap) + (var(--tab-h) - 3rem) / 2); }
.style-chip {
  height: 3rem; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0 1rem 0 0.8rem;
  border-radius: 2rem; font-size: 0.9rem; font-weight: 600; color: var(--label);
  background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border: 0.06rem solid var(--glass-border); box-shadow: var(--shadow-float);
}
.style-chip .ico { font-size: 1.3rem; color: var(--accent); }
.style-chip[aria-expanded="true"] { background: var(--title); color: var(--bg); }
.style-pop {
  position: absolute; right: 0; bottom: calc(100% + 0.8rem);
  width: min(30rem, calc(100vw - 2.4rem)); padding: 1.1rem 1.2rem 1.2rem;
  /* never taller than the window (the space above the chip); scroll inside if needed */
  max-height: calc(100vh - var(--tab-gap) - (var(--tab-h) - 3rem) / 2 - 3rem - 0.8rem - 1rem);
  max-height: calc(100dvh - var(--tab-gap) - (var(--tab-h) - 3rem) / 2 - 3rem - 0.8rem - 1rem);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  border-radius: 1.4rem; background: var(--card); color: var(--label);
  box-shadow: 0 1.2rem 3.5rem rgba(0, 0, 0, 0.22), 0 0 0 0.06rem var(--sep);
  animation: rise 0.3s var(--ease-out) both;
}
/* wide screens: a wider panel needs fewer rows, so it is shorter */
@media (orientation: landscape) { .style-pop { width: min(48rem, calc(100vw - 2.4rem)); } }
.style-h { margin: 0.5rem 0 0.5rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--head); }
.style-h:first-child { margin-top: 0; }
.style-opts { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.style-opt {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.8rem; border-radius: 2rem;
  font-size: 0.85rem; font-weight: 600; color: var(--label-2); background: var(--fill);
}
.style-opt[aria-checked="true"] { color: #fff; background: var(--title); }
:root[data-theme="navy"] .style-opt[aria-checked="true"] { color: #061733; }
.style-link { display: block; margin-top: 0.9rem; font-size: 0.85rem; font-weight: 600; color: var(--head); text-decoration: none; }
.sw { width: 1.05rem; height: 1.05rem; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 0.06rem rgba(0, 0, 0, 0.18); }
.sw-classic { background: linear-gradient(135deg, #F3F6FA 50%, #0B4A9E 50%); }
.sw-white   { background: linear-gradient(135deg, #FFFFFF 50%, #0B4A9E 50%); }
.sw-ivory   { background: linear-gradient(135deg, #FBF6EE 50%, #0B4A9E 50%); }
.sw-sky     { background: linear-gradient(135deg, #DCEAFA 50%, #1866C8 50%); }
.sw-green   { background: linear-gradient(135deg, #EEF6F1 50%, #15804F 50%); }
.sw-saffron { background: linear-gradient(135deg, #FFF7EF 50%, #F28C1E 50%); }
.sw-navy    { background: linear-gradient(135deg, #061733 50%, #1659B8 50%); }
/* Key Incentives swatches */
.swb-theme    { background: conic-gradient(#0B4A9E 0 25%, #F28C1E 0 50%, #1E8E4E 0 75%, #08306B 0); }
.swb-saffron  { background: linear-gradient(135deg, #E8660A 50%, #FFFFFF 50%); }
.swb-green    { background: linear-gradient(135deg, #0A4A30 50%, #FFC94D 50%); }
.swb-midnight { background: linear-gradient(135deg, #040E22 50%, #FFA94D 50%); }
.swb-teal     { background: linear-gradient(135deg, #04535E 50%, #FFE066 50%); }
.swb-multi    { background: conic-gradient(#F28C1E 0 25%, #2563EB 0 50%, #1E9E5E 0 75%, #9333EA 0); }
.swb-light    { background: linear-gradient(135deg, #FFFFFF 50%, #E0700F 50%); }

/* ========================================================== browse sheet */
.sheet-wrap { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, 0.22); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); animation: fade 0.35s var(--ease) both; }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; top: 6.4rem;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  padding: 2.6rem var(--gutter) calc(var(--tab-h) + var(--tab-gap) + 3rem);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--bg);
  box-shadow: 0 -1rem 3rem rgba(0, 0, 0, 0.12);
  animation: sheet-up 0.55s var(--ease-out) both;
}
.sheet::-webkit-scrollbar { display: none; }
.eyebrow { font-size: 1rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--saffron-ink); }
.sheet .eyebrow { margin: 0 0 0.5rem; }
.sheet-title { margin: 0 0 2rem; font-size: 3.2rem; font-weight: 700; letter-spacing: -0.035em; }
.picker { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
.pick { display: flex; flex-direction: column; text-align: left; border-radius: var(--r-md); overflow: hidden; background: var(--card); box-shadow: var(--shadow-card); transition: transform 0.2s var(--ease); animation: rise 0.6s var(--ease-out) both; animation-delay: var(--d, 0s); }
.pick:active { transform: scale(0.98); }
.pick.is-current { box-shadow: 0 0 0 0.2rem var(--accent), var(--shadow-card); }
.pick-media { position: relative; aspect-ratio: 16 / 10; background: var(--fill); overflow: hidden; }
.pick-media .ph-icon { width: 4.6rem; height: 4.6rem; }
.pick-media .ph-icon .ico { font-size: 2.2rem; }
.pick-body { padding: 1.1rem 1.3rem 1.3rem; }
.pick-years { display: block; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-ink); }
.pick-name { display: block; margin-top: 0.35rem; font-size: 1.25rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--label); }

/* ======================================================== assistant card */
#ov-chat { display: grid; place-items: center; padding: 2rem; }
.soon { max-width: 36rem; padding: 3.4rem 3rem; border-radius: var(--r-lg); text-align: center; background: var(--card); box-shadow: var(--shadow-float); animation: rise 0.5s var(--ease-out) both; }
.soon-icon { width: 6rem; height: 6rem; margin: 0 auto 1.4rem; border-radius: 1.6rem; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--navy), var(--blue)); }
.soon-icon .ico { font-size: 3rem; stroke-width: 1.6; }
.soon h2 { margin: 0; font-size: 2.4rem; font-weight: 700; letter-spacing: -0.03em; }
.soon p { margin: 0.8rem 0 1.6rem; font-size: 1.3rem; line-height: 1.5; color: var(--label-3); }
.soon-badge { display: inline-block; padding: 0.5rem 1.2rem; border-radius: 2rem; font-weight: 600; font-size: 1rem; color: var(--accent-ink); background: var(--accent-soft); }

/* ==================================================================== map */
/* the map keeps its light panels in every theme */
.overlay-map { --label: #0E2240; --label-2: #34496A; --label-3: #4A5D7A; --card: #FFFFFF; --fill: #EEF2F8; --sep: #E4EAF2; position: fixed; z-index: 25; top: 0; left: 0; right: 0; bottom: 0; background: #E9EEF0; animation: fade 0.4s var(--ease) both; }
.map { position: absolute; inset: 0; background: #E9EEF0; font-family: var(--font); }
.leaflet-container { font-family: var(--font); background: #E9EEF0; }
.leaflet-control-attribution { font-size: 0.6rem; }
.map-glass, .map-btn, .region-chip, .map-panel {
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: var(--shadow-float);
}
.map-regions { position: absolute; z-index: 500; top: 1.4rem; left: 1.4rem; right: 1.4rem; display: flex; gap: 0.6rem; overflow-x: auto; scrollbar-width: none; pointer-events: none; }
.map-regions::-webkit-scrollbar { display: none; }
.region-chip { pointer-events: auto; flex: none; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.3rem; border-radius: 3rem; font-weight: 600; font-size: 1.02rem; color: var(--label); }
.region-chip .ico { font-size: 1.2rem; }
.region-chip.is-active { background: var(--navy); color: #fff; }
.map-tools { position: absolute; z-index: 500; right: 1.4rem; top: 6rem; display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-end; }
.map-btn { width: 4rem; height: 4rem; border-radius: 1.2rem; display: grid; place-items: center; color: var(--label); }
.map-btn .ico { font-size: 1.6rem; stroke-width: 2; }
.map-btn:active { transform: scale(0.94); }
.map-btn-wide { width: auto; display: flex; gap: 0.5rem; padding: 0 1.1rem; font-weight: 600; }
.map-panel { position: absolute; z-index: 600; left: 1.4rem; right: 1.4rem; bottom: calc(var(--tab-h) + var(--tab-gap) * 2); height: 28%; display: flex; flex-direction: column; border-radius: var(--r-md); overflow: hidden; transition: height 0.3s var(--ease); }
.map-panel.is-collapsed { height: 4.4rem; }
.panel-tabs { display: flex; align-items: center; gap: 0.3rem; padding: 0.55rem; border-bottom: 0.06rem solid var(--sep); }
.panel-tab { padding: 0.65rem 1.2rem; border-radius: 1rem; font-weight: 600; font-size: 1rem; color: var(--label-3); }
.panel-tab.is-active { background: rgba(0, 0, 0, 0.06); color: var(--label); }
.panel-toggle { margin-left: auto; width: 2.8rem; height: 2.8rem; border-radius: 50%; display: grid; place-items: center; color: var(--label-3); }
.panel-toggle .ico { font-size: 1.4rem; }
.panel-body { flex: 1; min-height: 0; position: relative; }
.panel-pane { position: absolute; inset: 0; overflow-y: auto; padding: 0.4rem 0.6rem 1rem; display: none; overscroll-behavior: contain; }
.panel-pane.is-active { display: block; }
.layer-row { width: 100%; display: flex; align-items: center; gap: 0.9rem; padding: 0.75rem 0.7rem; border-radius: 0.9rem; text-align: left; }
.layer-row:active { background: rgba(0, 0, 0, 0.05); }
.layer-swatch { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 0.45rem; border: 0.18rem solid var(--sw); background: var(--swf); }
.layer-swatch.line { height: 0.35rem; border-radius: 1rem; background: var(--sw); border: 0; }
.layer-name { flex: 1; font-weight: 600; font-size: 1rem; line-height: 1.25; color: var(--label); }
.layer-name small { display: block; font-weight: 500; color: var(--label-3); font-size: 0.82rem; }
.switch { flex: none; position: relative; width: 3.2rem; height: 1.95rem; border-radius: 2rem; background: #E5E5EA; transition: background 0.25s; }
.switch::after { content: ""; position: absolute; top: 0.15rem; left: 0.15rem; width: 1.65rem; height: 1.65rem; border-radius: 50%; background: #fff; box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.2); transition: transform 0.25s var(--ease-out); }
.layer-row[aria-checked="true"] .switch { background: #34C759; }
.layer-row[aria-checked="true"] .switch::after { transform: translateX(1.25rem); }
.site-group { margin: 0.6rem 0 0.2rem; padding: 0.3rem 0.7rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--label-3); }
.site-row { width: 100%; display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem; border-radius: 0.8rem; text-align: left; font-weight: 500; font-size: 1rem; color: var(--label); }
.site-row:active { background: rgba(0, 0, 0, 0.05); }
.site-dot { flex: none; width: 0.85rem; height: 0.85rem; border-radius: 50%; background: var(--sw); }
.site-row small { margin-left: auto; color: var(--label-3); font-size: 0.85rem; white-space: nowrap; }
.site-empty { padding: 1rem; color: var(--label-3); }
.info-card { position: absolute; z-index: 700; left: 1.4rem; right: 1.4rem; bottom: calc(28% + var(--tab-h) + var(--tab-gap) * 3); max-height: 34%; overflow-y: auto; padding: 1.5rem 1.6rem 1.4rem; border-radius: var(--r-md); background: #fff; box-shadow: var(--shadow-float); animation: rise 0.3s var(--ease-out) both; }
.map-panel.is-collapsed ~ .info-card { bottom: calc(4.4rem + var(--tab-h) + var(--tab-gap) * 3); }
.info-close { position: absolute; top: 0.9rem; right: 0.9rem; width: 2.8rem; height: 2.8rem; border-radius: 50%; display: grid; place-items: center; background: var(--fill); color: var(--label-3); }
.info-close .ico { font-size: 1.3rem; }
.info-kind { margin: 0 3.4rem 0.3rem 0; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-ink); }
.info-title { margin: 0 3.4rem 0.9rem 0; font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.info-list { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1.2rem; font-size: 1.05rem; }
.info-list dt { color: var(--label-3); }
.info-list dd { margin: 0; color: var(--label); font-weight: 600; }
.map-offline { position: absolute; z-index: 650; left: 50%; top: 6rem; transform: translateX(-50%); padding: 0.6rem 1.2rem; border-radius: 2rem; background: rgba(0, 0, 0, 0.75); color: #fff; font-size: 0.9rem; }
.region-pin { display: flex; flex-direction: column; align-items: center; transform: translate(-50%, -100%); width: max-content; }
.region-pin-bubble { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 1rem 0.5rem 0.5rem; border-radius: 3rem; background: #fff; box-shadow: var(--shadow-float); font-family: var(--font); white-space: nowrap; }
.region-pin-count { min-width: 2.5rem; height: 2.5rem; padding: 0 0.5rem; border-radius: 2rem; display: grid; place-items: center; background: var(--sw); color: #fff; font-weight: 700; font-size: 1.05rem; }
.region-pin-text b { display: block; font-size: 1rem; font-weight: 700; color: var(--label); }
.region-pin-text small { display: block; font-size: 0.75rem; color: var(--label-3); }
.region-pin-stem { width: 0.2rem; height: 1.1rem; background: #fff; }
.region-pin-dot { width: 0.95rem; height: 0.95rem; border-radius: 50%; background: var(--sw); border: 0.2rem solid #fff; box-shadow: var(--shadow-card); }
.leaflet-div-icon.region-icon { background: none; border: 0; }
.leaflet-tooltip.site-label { display: none; padding: 0.2rem 0.5rem; border: 0; border-radius: 0.4rem; background: rgba(255, 255, 255, 0.92); color: var(--label); font-weight: 600; font-size: 0.75rem; box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.2); }
.leaflet-tooltip.site-label::before { display: none; }
.labels-vizagExisting .lbl-vizagExisting,
.labels-vizagAllotted .lbl-vizagAllotted,
.labels-vizagLayout .lbl-vizagLayout,
.labels-tirupati .lbl-tirupati,
.labels-palakolanu .lbl-palakolanu,
.labels-kondakamarla .lbl-kondakamarla { display: block; }

/* ============================================================= landscape */
@media (orientation: landscape) {
  .p-title { font-size: 3.1rem; }
  .p-tagline { font-size: 1.2rem; }
  :root { --gutter: 3.4rem; --tab-h: 5.2rem; }
  /* left: chips, title, photo, key figures; right: every incentive. Both columns
     run to the bottom of the screen: the photo takes whatever height is left. */
  .fit, .fit.is-fill { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); grid-template-rows: auto 1fr; column-gap: 2.4rem; align-items: start; }   /* rem gap: same column widths on every page */
  .p-gov { grid-column: 1; grid-row: 1; }   /* logo row stays in the left column */
  .side { grid-column: 1; grid-row: 2; }
  .details { grid-column: 2; grid-row: 1 / span 2; }   /* incentives start at the top on the right */
  .fit.is-fill { align-items: stretch; }
  .side { display: flex; flex-direction: column; min-height: 0; }
  .p-intro { display: flex; flex-direction: column; align-items: stretch; gap: 1.2em; flex: 1 1 auto; min-height: 0; }
  .hero-card { aspect-ratio: auto; height: 10em; flex: none; }   /* minimum while measuring */
  .fit.is-fill .hero-card { height: auto; flex: 1 1 0; min-height: 10em; }
  .kgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kgrid.n3 .k:last-child { grid-column: 1 / -1; }
  .details { margin-top: 0; }
  .sheet { top: 3rem; left: 5rem; right: 5rem; border-radius: var(--r-lg); bottom: calc(var(--tab-h) + var(--tab-gap) * 2); padding-bottom: 3rem; }
  .picker { grid-template-columns: repeat(4, 1fr); }
  .map-regions { right: 31rem; }
  .map-tools { right: auto; left: 1.4rem; align-items: flex-start; }
  .map-panel { left: auto; top: 1.4rem; right: 1.4rem; bottom: calc(var(--tab-h) + var(--tab-gap) * 2); width: 28rem; height: auto; }
  .map-panel.is-collapsed { height: 4.4rem; bottom: auto; }
  .info-card { left: auto; right: 31rem; bottom: calc(var(--tab-h) + var(--tab-gap) * 2); width: 29rem; max-height: 60%; }
  .map-panel.is-collapsed ~ .info-card { right: 1.4rem; bottom: calc(var(--tab-h) + var(--tab-gap) * 2); }
}

/* ============================================================= keyframes */
@keyframes rise { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }
@keyframes word-up { from { transform: translateY(110%); } to { transform: none; } }
@keyframes reveal { from { opacity: 0; clip-path: inset(9% 9% 9% 9% round 1.1em); } to { opacity: 1; clip-path: inset(-3em round 1.1em); } }
@keyframes drift { from { transform: scale(1.12) translateX(-1.5%); } to { transform: scale(1) translateX(0); } }
@keyframes pop { from { opacity: 0; transform: translateY(0.9em) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes sheen { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes row-in { from { opacity: 0; transform: translateX(-0.9em); } to { opacity: 1; transform: none; } }
@keyframes dot { from { transform: scale(0.3); } to { transform: none; } }
@keyframes float-a { from { transform: translate(0, 0) scale(1); } to { transform: translate(28vmax, 22vmax) scale(1.15); } }
@keyframes float-b { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(-24vmax, 30vmax) scale(0.95); } }
@keyframes float-c { from { transform: translate(0, 0) scale(0.95); } to { transform: translate(30vmax, -26vmax) scale(1.1); } }
@keyframes wave-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes wave-slide-top { from { transform: scaleY(-1) translateX(0); } to { transform: scaleY(-1) translateX(-50%); } }
@keyframes shimmer { 0%, 55% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet-up { from { transform: translateY(8%); opacity: 0; } to { transform: none; opacity: 1; } }

/* screenshot / print mode: final state, no motion */
.static *, .static *::before, .static *::after { animation: none !important; transition: none !important; }
.static .pick { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ============================================================ screen view
   Style → Screen → Portrait / Landscape: the same app at the kiosk resolution,
   scaled to fit this monitor (app.js setView). The full-size page underneath is
   hidden while the framed screen runs. */
.viewframe { position: fixed; inset: 0; z-index: 200; background: radial-gradient(120% 90% at 50% 0%, #22324A 0%, #121A27 70%); }
.vf-device { position: absolute; left: 50%; top: calc(50% - 10px); border: 14px solid #0B0F16; border-radius: 28px; background: #000; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55); transform-origin: center center; }
.vf-device iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: 14px; background: #F3F6FA; }
.vf-info { position: absolute; left: 0; right: 0; bottom: 10px; margin: 0; text-align: center; font: 500 12px/1.4 var(--font); color: rgba(255, 255, 255, 0.6); }
body.is-viewing .stage, body.is-viewing .tabbar, body.is-viewing .style-ui, body.is-viewing .backdrop,
body.is-viewing .sheet-wrap, body.is-viewing .overlay-map { display: none !important; }
.ico.rot { transform: rotate(90deg); }
.style-opt .ico { font-size: 1.05rem; }

/* optional separate banner image for Version 2 (media.js "<id>-banner") */
.hero-media.banner-only { display: none; }
@media (orientation: portrait) {
  :root[data-layout="v2"] .hero-media.banner-only { display: block; }
  :root[data-layout="v2"] .hero-media.photo-only { display: none; }
}

/* logos with a light and a dark version (config.js logo / logoDark) */
.on-dark { display: none !important; }
:root[data-theme="navy"] .on-light { display: none !important; }
:root[data-theme="navy"] .on-dark { display: block !important; }

/* Key Incentives "light cards" + zoom highlight: keep the focused card light */
:root[data-band="light"] .k.is-focus { background: var(--card); box-shadow: 0 0 0 0.14em var(--saffron), 0 0.6em 1.4em rgba(var(--shadow-rgb), 0.15); }
:root[data-band="light"] .spot.on-k { box-shadow: 0 0 0 0.16em var(--saffron), 0 0 1.6em 0.2em rgba(242, 140, 30, 0.3); }

/* Section colours (html data-acc; Style chip -> Section colours): the edge and icon
   colour of the incentive cards, cycling card 1, 2, 3. Shades chosen to read well on
   both light and dark cards. */
:root[data-acc="vivid"]  { --acc-a: #E07B12; --acc-b: #8B5CF6; --acc-c: #0EA5A0; }
:root[data-acc="jewel"]  { --acc-a: #E11D74; --acc-b: #6366F1; --acc-c: #0D9488; }
:root[data-acc="ocean"]  { --acc-a: #0284C7; --acc-b: #0D9488; --acc-c: #7C3AED; }
:root[data-acc="sunset"] { --acc-a: #E07B12; --acc-b: #E11D48; --acc-c: #CA8A04; }
:root[data-acc="mono"]   { --acc-a: #E07B12; --acc-b: #E07B12; --acc-c: #E07B12; }
/* "classic" keeps the theme's own saffron / blue / green */
.swa-vivid   { background: conic-gradient(#E07B12 0 33%, #8B5CF6 0 66%, #0EA5A0 0); }
.swa-jewel   { background: conic-gradient(#E11D74 0 33%, #6366F1 0 66%, #0D9488 0); }
.swa-ocean   { background: conic-gradient(#0284C7 0 33%, #0D9488 0 66%, #7C3AED 0); }
.swa-sunset  { background: conic-gradient(#E07B12 0 33%, #E11D48 0 66%, #CA8A04 0); }
.swa-mono    { background: #E07B12; }
.swa-classic { background: conic-gradient(#E07B12 0 33%, #0B4A9E 0 66%, #1E8E4E 0); }

/* "View Policy" button under the subtitle (rem: same size on every slide) */
.p-doc {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: 0.9rem; padding: 0.6rem 1.2rem 0.6rem 0.95rem; border-radius: 2rem;
  font-size: 0.95rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--navy), var(--blue));
  box-shadow: 0 0.4rem 1rem rgba(var(--shadow-rgb), 0.25);
  transition: transform 0.15s var(--ease);
}
.p-doc .ico { font-size: 1.15rem; stroke-width: 2; }
.p-doc:active { transform: scale(0.96); }
:root[data-theme="navy"] .p-doc { color: #061733; background: #FFFFFF; }

/* Policy PDF viewer: the document fills the screen, with tabs and a Close button */
.doc-wrap { position: fixed; inset: 0; z-index: 70; background: rgba(6, 23, 51, 0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: fade 0.3s var(--ease) both; }
.doc { position: absolute; inset: 1.2rem; display: flex; flex-direction: column; border-radius: 1.4rem; overflow: hidden; background: var(--card); box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.35); animation: sheet-up 0.45s var(--ease-out) both; }
.doc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1rem; padding: 1rem 1.2rem; border-bottom: 0.06rem solid var(--sep); }
.doc-titles { min-width: 0; flex: 1 1 18rem; }
.doc-titles .eyebrow { margin: 0; font-size: 0.75rem; }
.doc-title { margin: 0.15rem 0 0; font-size: 1.5rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; color: var(--title); }
.doc-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.doc-tab { padding: 0.6rem 1.1rem; border-radius: 2rem; font-size: 0.95rem; font-weight: 600; color: var(--label-2); background: var(--fill); }
.doc-tab[aria-selected="true"] { color: #fff; background: var(--title); }
:root[data-theme="navy"] .doc-tab[aria-selected="true"] { color: #061733; }
.doc-close { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.65rem 1.2rem; border-radius: 2rem; font-size: 1rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, #F7A23E, #E0700F); }
.doc-close .ico { font-size: 1.15rem; stroke-width: 2.2; }
.doc-frame { flex: 1; width: 100%; min-height: 0; border: 0; background: #525659; }