/* =========================================================================
   netex · pages/capability-predictive-maintenance.css · predictive maintenance · the Glass Factory storyboard poster
   Loaded only on that page, after pages/capability.css (netex_capabilities_enqueue_page_css()).
   ========================================================================= */
@layer reset, tokens, base, components, layout, pages, utilities;

@layer pages {

/* =========================================================================
   s8 predictive · glass-factory poster: the three-frame storyboard
   ========================================================================= */
.gf-story { display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none; counter-reset: none; }
@media (min-width: 900px) { .gf-story { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gf-frame { display: grid; gap: var(--s-3); align-content: start; }
.gf-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: var(--s-3); background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--rule); }
.gf-mini__tile { display: grid; gap: 4px; padding: 6px 8px; background: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); min-width: 0; }
.gf-mini__tile:nth-child(5) { grid-column: 1 / -1; }
.gf-mini__name { font: 500 .6875rem/1.25 var(--f-sans); color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gf-mini__spark { width: 100%; height: 22px; }
.gf-mini__spark polyline { fill: none; stroke: var(--silver); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.gf-mini__tile.is-warning .gf-mini__spark polyline { stroke: var(--molten); }
.gf-mini__tile.is-planned .gf-mini__spark polyline { stroke: var(--cyan); }
.gf-band { fill: color-mix(in srgb, var(--paper) 9%, transparent); }
.gf-frame__cap { font: 500 .875rem/1.45 var(--f-mono); color: var(--fg); }
.gf-pill { justify-self: start; display: inline-flex; align-items: center; min-height: 20px; padding: 1px 7px; font: 600 .625rem/1.2 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: var(--steel); }
.gf-pill.is-normal { background: transparent; color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--rule); }
/* R2: amber is the X-ray heat scale only. Watching = machine sight (cyan outline); warning = time about to
   leak (Molten outline); down = leaking (Molten fill, ink text); planned = the fix (cyan fill). */
.gf-pill.is-watch { background: transparent; color: var(--cyan); box-shadow: inset 0 0 0 1px var(--cyan); }
.gf-pill.is-warning { background: transparent; color: var(--molten); box-shadow: inset 0 0 0 1.5px var(--molten); }
.gf-pill.is-down { background: var(--molten); }
.gf-pill.is-planned { background: var(--cyan); }

} /* end @layer pages */