/* =========================================================================
   Traffic Signal Control · page-only styles (loaded after home.css).
   home.css tokens only: no hex, rgb or cubic-bezier here. Owner: Kallirroi.
   The hero, "where it fits", problem list and see-it layout reuse the crossings
   class names on purpose (.xhero__*, .fit*, .pb-list, .xsee*), so the integration
   pass can promote one shared rule to home.css (see pages/traffic-signals-notes.md).
   ========================================================================= */

/* Hero: the cities accent (sky) in the glow and the hotspot ring */
[data-page="traffic-signals"] .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="traffic-signals"] .hot__ring { outline-color: var(--sky-400); }

/* the junction illustration (traffic-junction.svg, 960×540, the frame's 16:9) inside a <picture> */
.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 screens it can share */
.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 16px; font-size: var(--fs-small); font-weight: 500; color: var(--ink); }
.fit__line { display: inline-flex; align-items: baseline; gap: 10px; margin-right: 4px; }
.fit__line .dot { translate: 0 -1px; }

/* 3 · the problem in four 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); }

/* 4 · the "to confirm" chips line up above the result slots */
.bn > .chip--confirm { margin-top: auto; }
.bn > .chip--confirm + .result--sm { margin-top: 0; }

/* 5 · the story: one chip covers every capability; the frame label is a chip, never a reading */
.day__confirm { margin-top: 16px; }
.day__dc .chip--media { min-height: 30px; }

/* 6 · the cross-links under the grid */
.ha-more { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; }
.ha-more .small { margin-right: 4px; }

/* 7 · what the control screen shows, beside the junction demo */
.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); }
.xsee__how { margin-top: 14px; max-width: 52rem; font-size: var(--fs-label); line-height: 1.55; color: var(--body); }
.xsee__how b { font-weight: 500; color: var(--ink); }

/* ---- the junction demo (page-traffic-signals.js): the Home app frame, one view ---- */
.tsx .btn--sm { height: 44px; }                       /* touch targets ≥ 44px in the demo */
.tsx .segs button { min-height: 44px; }
.tsx .ccv__s .val { vertical-align: baseline; }
.tsx__run .swap > span { display: inline-flex; align-items: center; gap: 8px; }
.tsx__reqs { display: flex; flex-wrap: wrap; gap: 8px; }
.tsx__reqs .btn { padding: 0 14px; }
.tsx__reqs .btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--app-bg); }
.tsx .cell.is-alert { border-color: var(--alert); }
.tsx__alarm { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--app-line); }
.tsx__alrow { display: grid; }                        /* .swap: both states share one cell, so the row never changes height */
.tsx__none { display: flex; align-items: center; min-height: 58px; padding: 0 14px; border-radius: var(--r-media); border: 1px dashed var(--app-line); font-size: var(--fs-label); color: var(--muted); }
.tsx__al { grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; }
.tsx__al .st { margin-top: 0; }
.tsx__al .al__go { grid-column: 3; justify-items: end; }
.tsx__state { min-height: calc(2 * 1.5em); }

/* the schematic: plan view, tone-aware (the pl-* tokens), signal lamps in the status colours (data) */
.tsj .pl-lane { stroke: var(--pl-zebra); }
.tsj__kerb { fill: none; stroke: var(--pl-strong); stroke-width: 1.2; opacity: 0.55; }
.tsj__stop { fill: none; stroke: var(--pl-zebra); stroke-width: 2.4; }
.tsj__loop { fill: none; stroke: var(--pl-strong); stroke-width: 1.6; opacity: 0.6; transition: stroke var(--dur-fast) var(--ease-std), fill var(--dur-fast) var(--ease-std), opacity var(--dur-fast) var(--ease-std); }
.tsj__loop.is-on { stroke: var(--pl-on); fill: var(--pl-glow); opacity: 1; }
.tsj.is-fault .tsj__loop--m { stroke: var(--alert); fill: none; opacity: 1; stroke-dasharray: 4 3; }
.tsj__car { fill: var(--pl-strong); }
.tsj__bus { fill: var(--pl-on); }
.tsj .is-off { display: none; }
.tsj__gone { transition: transform var(--dur-xslow) var(--ease-std), opacity var(--dur-xslow) var(--ease-std); }
.tsj__gone.is-w { transform: translateX(-300px); opacity: 0; }
.tsj__gone.is-n { transform: translateY(-270px); opacity: 0; }
.tsj__box { fill: var(--navy-900); stroke: var(--pl-line); stroke-width: 1; }
.tsj__l { fill: var(--navy-600); transition: fill var(--dur-fast) var(--ease-std); }
.tsj__head[data-st="red"] .tsj__l--r { fill: var(--alert); }
.tsj__head[data-st="amber"] .tsj__l--a { fill: var(--warn); }
.tsj__head[data-st="green"] .tsj__l--g { fill: var(--ok); }
.tsj__aud path { fill: none; stroke: var(--pl-on); stroke-width: 1.8; stroke-linecap: round; opacity: 0; }
.tsj__aud.is-on path { opacity: 1; animation: blink var(--dur-slow) steps(2, jump-none) infinite; }
.tsj__ped { fill: none; stroke: var(--pl-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition-property: transform; transition-timing-function: linear; }
.tsj__ped circle { fill: var(--pl-ink); stroke: none; }
.tsj__ped.is-wait, .tsj__ped.is-walk { opacity: 1; }
.tsj__ped.is-walk { transform: translateY(-88px); }

@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; }
  .tsx .ccv__vis { min-height: 0; aspect-ratio: 420 / 400; }
}
@media (max-width: 639.98px) {
  .fit__grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .fit__i { padding: 10px 14px 10px 10px; }
  .tsx__state { min-height: calc(4 * 1.5em); }
}
@media (max-width: 479.98px) {
  .tsx__al { grid-template-columns: 8px minmax(0, 1fr); }
  .tsx__al .al__go { grid-column: 2; justify-items: start; }
  .tsx__reqs .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .tsj__aud.is-on path { animation: none; }
}