/* =========================================================================
   Smart pedestrian crossings · page-only styles (loaded after home.css).
   home.css tokens only: no hex, rgb or cubic-bezier here. Owner: Kallirroi.
   ========================================================================= */

/* Hero: the crossings accent (cube-light) in the glow and the hotspot ring */
[data-page="crossings"] .shero__glow {
  background: radial-gradient(44% 60% at 72% 40%, var(--glow-sky), transparent 70%), radial-gradient(36% 50% at 96% 76%, var(--glow-indigo), transparent 70%), radial-gradient(34% 44% at 50% 92%, var(--glow-sky), transparent 70%); }
[data-page="crossings"] .hot__ring { outline-color: var(--sky-300); }
/* hotspot rings that move by transform from a fixed corner (page-crossings.js, as on poles): no layout shift while
   they glide. home.js still positions #hotRing / #dayRing / #vwRing with left/top; those are hidden here */
#hotRing, #dayRing, #vwRing { display: none; }
.tring { left: 0; top: 0; pointer-events: none; will-change: transform;
  transition: transform var(--dur-slow) var(--ease-enter), width var(--dur-slow) var(--ease-enter), height var(--dur-slow) var(--ease-enter), opacity var(--dur-base) var(--ease-std); }

/* the crossing, cropped from the hero city (s1-crossing.svg, 960×540, same 16:9 as the frame): no cropping in CSS */
.xhero__art > picture, .xhero__art > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.xhero__art > picture > img { object-fit: cover; }
.xhero__chip { position: absolute; z-index: 3; left: 12px; top: 12px; }
.xhero__confirm { margin-top: 18px; }

/* 2 · Where it fits: four places, one line about the street lighting it joins */
.fit { padding-block: 32px 36px; }
.fit__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.fit__i { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 14px; padding: 14px 16px 14px 14px; border-radius: var(--r-card); background: var(--card); border: 1px solid var(--card-line); }
.fit__i b { display: block; font-size: var(--fs-small); font-weight: 500; line-height: 1.3; color: var(--ink); }
.fit__i > span:not(.ico) > span { display: block; margin-top: 2px; font-size: var(--fs-label); line-height: 1.4; color: var(--muted); }
.fit__foot { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; }
.fit__same { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; font-size: var(--fs-small); font-weight: 500; color: var(--ink); }
.fit__line { display: inline-flex; align-items: baseline; gap: 10px; }
.fit__line .dot { translate: 0 -1px; }
/* the one delivered line: what our screens prove (the crossings dashboard), with the role chip (owner question #1) */
.fit__del { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: var(--fs-small); color: var(--ink); }
.fit__who { font-weight: 500; }
.fit__del .link { min-height: 40px; }

/* 3 · the problem in three lines, under the lead */
.pb-list { margin-top: 28px; display: grid; gap: 12px; max-width: 36rem; }
.pb-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; font-size: var(--fs-small); font-weight: 500; line-height: 1.5; color: var(--ink); }
.pb-list .i { margin-top: 2px; color: var(--accent-ink); }

/* 5 · the story's frame label: an "Illustration" chip on the drawn moments, a verbatim reading on the real dashboard.
   It sits top right, so the reading never covers the people-flow chart it quotes (bottom left of the dashboard). */
.day__dc .chip--media { min-height: 30px; }
[data-page="crossings"] .day__dc { left: auto; bottom: auto; right: 12px; top: 12px; }

/* 6 · one note for the whole grid: components and specs are confirmed per project */
.ha-note { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.ha-note .small { max-width: 46rem; }

/* 7 · the real dashboard first: a viewer framed at the screens' own ratio (1280×780; the statistics screen,
   1280×789, loses 4 px top and bottom), so hotspot regions are the screen's own coordinates */
[data-page="crossings"] .viewer__frame { aspect-ratio: 1280 / 780; }
.xview__chip { position: absolute; z-index: 3; right: 12px; top: 12px; }   /* top right, over the weather map: never on a chart it labels */
.xview__del { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: var(--fs-small); color: var(--ink); }
.xview__who { font-weight: 500; }
.xsee__head { margin-top: 56px; }

/* then the demo: what it shows, beside the smart crossing view */
.xsee { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap); align-items: start; }
.xsee__list { display: grid; gap: 18px; padding: var(--card-pad); }
.xsee__list ul { display: grid; gap: 16px; }
.xsee__list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; font-size: var(--fs-small); line-height: 1.5; color: var(--body); }
.xsee__list li .i { margin-top: 2px; color: var(--acc-ink); }
.xsee__list b { display: block; font-weight: 500; color: var(--ink); }
.xsee__fine { padding-top: 14px; border-top: 1px solid var(--line); font-size: var(--fs-label); }

/* 8 · funding context: a sourced programme line beside the assessment offer (decision 19 treatment, no figures) */
.fund { margin-top: 32px; max-width: 34rem; display: grid; gap: 10px; padding: 20px 22px; border-radius: var(--r-card); border: 1px solid var(--line); background: var(--card); }
.fund__t { font-size: var(--fs-small); line-height: 1.55; color: var(--body); }
.fund__src { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; }
.fund__src .link { min-height: 40px; }

@media (max-width: 1179.98px) {
  .fit__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023.98px) {
  .xsee { grid-template-columns: minmax(0, 1fr); }
  .xsee__demo { order: -1; }
}
@media (max-width: 639.98px) {
  [data-page="crossings"] .day__dc { right: 8px; top: 8px; }
  .xview__chip { right: 8px; top: 8px; }
  .xsee__head { margin-top: 40px; }
  .fit__grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .fit__i { padding: 10px 14px 10px 10px; }
  .fund { padding: 18px 16px; }
}