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

/* 1 · Hero: the cities accent (sky) in the glow and the hotspot ring; the illustration through <picture> */
[data-page="poles"] .shero__glow {
  background: radial-gradient(44% 60% at 72% 36%, 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="poles"] .hot__ring { outline-color: var(--sky-400); }
.phero__art > picture, .phero__art > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.phero__art > picture > img { object-fit: cover; }
.phero__chip { position: absolute; z-index: 3; left: 12px; bottom: 12px; }   /* bottom-left: the art's floating map card owns the top-left */
.phero__confirm { margin-top: 18px; }
/* hotspot rings that move by transform from a fixed corner (page-poles.js): no layout shift while they glide.
   home.js still positions #hotRing / #dayRing with left/top; those are hidden here (shared request in the notes) */
#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); }

/* 2 · Where it fits: four places, one line about the street lighting it can run with */
.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__same { margin-top: 20px; 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; }

/* 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 is an "Illustration" chip, never a reading */
.day__dc .chip--media { min-height: 30px; }

/* 6 · one note for the whole grid: modules 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 poles view of the dashboard demo (same app frame as Home's .ccx)
   map of the street · the selected pole · status, alarms and the technical sheet
   ========================================================================= */
.pdx__body { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); }
.pdx__map, .pdx__pole, .pdx__side { display: grid; gap: 14px; align-content: start; min-width: 0; padding: 18px; }
.pdx__map { border-right: 1px solid var(--app-line); }
.pdx__side { border-left: 1px solid var(--app-line); gap: 18px; }
.pdx__head { display: grid; align-content: center; gap: 2px; min-height: 44px; }

/* a · the map: tone-aware schematic, pins are 44px buttons (radio group) */
.pmap { position: relative; aspect-ratio: 400 / 320; border-radius: var(--r-media); overflow: hidden; border: 1px solid var(--app-line); background: var(--pl-bg); }
.pmap__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pmap__kerb { fill: none; stroke: var(--pl-line); stroke-width: 1.5; }
.pmap__sq { stroke: var(--pl-line); stroke-width: 1; }
.pmap__tree { fill: var(--pl-line); }
.ppin { position: absolute; z-index: 2; width: 44px; height: 44px; translate: -50% -50%; border-radius: 50%; display: grid; place-items: center; --pin: var(--ok); }
.ppin::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--pin); border: 3px solid var(--app-bg); outline: 1.5px solid var(--pl-strong); transition: background-color var(--dur-fast) var(--ease-std); }
.ppin[data-st="fault"] { --pin: var(--alert); }
.ppin[data-st="fault"]:not(.is-ack)::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 2px solid var(--alert); animation: ping var(--dur-pulse) var(--ease-enter) infinite; }
.ppin[aria-checked="true"]::before { outline: 2px solid var(--ink); outline-offset: 2px; }
.ppin:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ppin__n { position: absolute; left: 50%; bottom: calc(100% - 9px); translate: -50% 0; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--app-line); background: var(--app-bg);
  font-size: var(--fs-micro); font-weight: 500; line-height: 1.2; color: var(--ink); white-space: nowrap; }
.ppin[aria-checked="true"] .ppin__n { border-color: var(--ink); }
.pdx__legend { gap: 6px 16px; }
.pdx__legend .st { flex: none; }
.pdx__sel { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); outline: 2px solid var(--ink); outline-offset: 1px; }

/* b · the selected pole: drawing beside the module switches, readings below */
.pdx__split { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: 14px; align-items: start; }
.pdx__vis { border-radius: var(--r-media); overflow: hidden; border: 1px solid var(--app-line); background: var(--pl-bg); }
.pvis { width: 100%; height: auto; aspect-ratio: 160 / 260; }
.pvis__ground { fill: none; stroke: var(--pl-line); stroke-width: 2; stroke-linecap: round; }
.pvis__pole, .pvis__base { fill: var(--pl-strong); }
.pvis__arm { fill: none; stroke: var(--pl-strong); stroke-width: 4; stroke-linecap: round; }
.pvis__cone { fill: var(--pl-glow); opacity: 0; transition: opacity var(--dur-base) var(--ease-std); }
.pvis.is-lit .pvis__cone { opacity: 1; }
.pm-body { fill: var(--pl-off); stroke: var(--pl-strong); stroke-width: 1.2; transition: fill var(--dur-fast) var(--ease-std); }
.pm-line { fill: none; stroke: var(--pl-strong); stroke-width: 1.2; opacity: 0.7; }
.pm-lens { fill: var(--pl-strong); }
.pm-ring { fill: none; stroke: var(--alert); stroke-width: 2; opacity: 0; }
.pmod.is-on .pm-body { fill: var(--pl-on); }
.pmod.is-fault .pm-body { fill: var(--alert); }
.pmod.is-fault .pm-ring { opacity: 1; animation: blink var(--dur-xslow) steps(2, jump-none) infinite; }
.pdx__mods { gap: 8px; }
.pdx__modsl { min-height: 16px; }
.pdx__mods .sw__l { overflow: hidden; text-overflow: ellipsis; }
.pdx__s .swap { justify-items: end; }
.pdx__mods .sw.is-fault { border-color: var(--alert); }   /* the module in fault: a red edge (3:1 on every app surface), the word "Fault" in the state */
.pdx__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

/* c · status (three stacked states), the alarm slot (empty or one alarm, same height), the sheet */
.pdx__blk { display: grid; gap: 8px; align-content: start; min-width: 0; }
.pdx__status { padding: 12px 14px; }
.pdx__st { display: grid; }
.pdx__st > span { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-label); font-weight: 500; line-height: 1.4; color: var(--ink); }
.pdx__st .st { margin-top: 5px; }
.pdx__ackdot { background: transparent; border: 2px solid var(--alert); }   /* acknowledged: the same red, hollow */
.pal { display: grid; }
.pal > * { align-self: stretch; }
.pal__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; border-radius: var(--r-media); border: 1px dashed var(--edge); font-size: var(--fs-label); font-weight: 500; color: var(--muted); text-align: center; }
.pal__empty .i { color: var(--muted); }
.pal .al__go { align-items: start; }
.pal__done { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.pdx__sheet li { min-height: 40px; }
.pdx__sheet span { color: var(--muted); }

/* 7a · the real screens first: a viewer framed at the pole map's own ratio (1280×648), so its hotspot regions are the
   map's own coordinates. Screen 13 (1280×720, nocost) is anchored at the top: the tabs stay, the bottom 72 px of quay go. */
[data-page="poles"] .viewer__frame { aspect-ratio: 1280 / 648; }
.viewer__frame > img.pview__top { object-position: top; }
.pview__chip { position: absolute; z-index: 3; right: 12px; bottom: 12px; }
.pview__cap { display: grid; margin: 12px 8px 4px; font-size: var(--fs-small); font-weight: 500; color: var(--ink); }
/* one caption and one verbatim reading per screen, each stacked in one cell so nothing moves when the screen changes */
.pview__reads { display: grid; margin-top: 4px; }
.pview__cap > span, .pview__reads > .reading { grid-area: 1 / 1; visibility: hidden; }
#viewer:has(#vwFrame > img[data-screen="map"].is-on) :is(.pview__cap, .pview__reads) > [data-screen="map"],
#viewer:has(#vwFrame > img[data-screen="13"].is-on) :is(.pview__cap, .pview__reads) > [data-screen="13"] { visibility: visible; }
.pview__demohead { margin-top: 56px; }

/* 7b · below the demo: what the demo shows, as one legend row, and what is real and what is to confirm */
.psee { margin-top: var(--gap); }
.psee__list { display: grid; gap: 18px; padding: var(--card-pad); }
.psee__list ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px 24px; }
.psee__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); }
.psee__list li .i { margin-top: 2px; color: var(--acc-ink); }
.psee__list b { display: block; font-weight: 500; color: var(--ink); }
.psee__fine { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; 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; }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 1179.98px) {
  .fit__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pdx__body { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .pdx__side { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); border-left: 0; border-top: 1px solid var(--app-line); }
}
@media (max-width: 1179.98px) {
  .psee__list ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .psee__list ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .pdx__body { grid-template-columns: minmax(0, 1fr); }
  .pdx__map { border-right: 0; border-bottom: 1px solid var(--app-line); }
  .pdx__side { grid-template-columns: minmax(0, 1fr); }
  .pdx__map, .pdx__pole, .pdx__side { padding: 14px 12px; }
}
@media (max-width: 639.98px) {
  .fit__grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .fit__i { padding: 10px 14px 10px 10px; }
  .fund { padding: 18px 16px; }
  .pdx__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pdx__kpis > :last-child { grid-column: 1 / -1; }
  .psee__list ul { grid-template-columns: minmax(0, 1fr); }
  .pview__chip { right: 8px; bottom: 8px; }
  .pview__demohead { margin-top: 40px; }
}
@media (max-width: 479.98px) {
  .pdx__split { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 10px; }
  .pdx__mods .sw { gap: 8px; padding: 0 10px 0 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .ppin::after { display: none; }
  .pmod.is-fault .pm-ring { animation: none; }
}