/* =========================================================================
   Smart industry and retail page (industry.html) · page-only rules.
   Loaded after home.css and built only from its tokens: no new colours,
   sizes, radii or timings. Shared components stay in home.css.
   ========================================================================= */

/* Hero: screen 02 keeps its auto/manual buttons and heating tank on the left,
   so the verbatim readings sit bottom-right, over the plan's delivery rooms. */
html[data-page="industry"] .shero .hot__dcs { left: auto; right: 14px; justify-content: flex-end; }

/* Day: the verbatim reading moves to the top-right corner (the clock area of the screens),
   so it never covers the production panel, the auto/manual buttons or the indoor panel the ring points at. */
html[data-page="industry"] .day__dc { left: auto; bottom: auto; top: 12px; right: 12px; }

/* Screens that are not 16:9 (Faethon offices, Katsaros) show whole inside the same 16:9 frame,
   on the app's dark surface. Their hotspot regions are measured on the letterboxed frame. */
.viewer__frame > img.fit, .day__screen > img.fit { object-fit: contain; background: var(--navy-900); }

/* Viewer: the client each real screen comes from, named under the screen tabs.
   CSS only: the name follows the selected tab (home.js owns the tabs). */
.vw-from { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: var(--fs-small); font-weight: 500; line-height: 1.4; color: var(--ink); }
.vw-from__k { font-size: var(--fs-micro); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--muted); }
.vw-from__n { display: none; }
.viewer:has(#vwScreens [data-screen="02"][aria-selected="true"]) .vw-from__n[data-for="02"],
.viewer:has(#vwScreens [data-screen="fae"][aria-selected="true"]) .vw-from__n[data-for="fae"],
.viewer:has(#vwScreens [data-screen="katov"][aria-selected="true"]) .vw-from__n[data-for="katov"],
.viewer:has(#vwScreens [data-screen="katcl"][aria-selected="true"]) .vw-from__n[data-for="katcl"] { display: inline; }

/* Clients: nine logos make one loop about 1760px wide. The strip stays inside the page width,
   so the loop never shows a gap on screens wider than the loop. */
html[data-page="industry"] .mq-rows { width: min(var(--maxw), 100% - 2 * var(--gutter)); margin-inline: auto; }
/* the named industry projects under the strip (Katsaros has no logo file, so it is named in text) */
html[data-page="industry"] .named { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); display: grid; gap: 14px; }
html[data-page="industry"] .named .rail__label { justify-content: flex-start; }
html[data-page="industry"] .named .rail__names { margin: 0; max-width: none; justify-content: flex-start; gap: 8px 28px; }
html[data-page="industry"] .named .rail__names li { font-size: var(--fs-body); color: var(--body); }
html[data-page="industry"] .named .rail__names li::before { opacity: 1; }

/* Problem: no sourced industry figure exists, so the second column lists common situations in plain words. */
.pb-card { display: grid; gap: 18px; align-content: start; padding: 32px; }
.pb-card__list { display: grid; gap: 14px; }
.pb-card__list li { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 16px; font-size: var(--fs-body); line-height: 1.5; color: var(--ink); }

/* Demo: two production sections in the dashboard frame (shared .ccx, .reading, .stepper, .sw, .st parts) */
.zgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ccx-gap); }
.zcard { display: grid; gap: 10px; align-content: start; min-width: 0; padding: 12px; border-radius: var(--r-media); border: 1px solid var(--app-line);
  transition: border-color var(--dur-base) var(--ease-std); }
.zcard.is-alarm { border-color: var(--alert); }
.zcard__t { font-size: var(--fs-small); font-weight: 500; color: var(--ink); }
.zkpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.zkpis .stepper { margin-block: -6px; }
.zkpis .data-label { text-transform: none; letter-spacing: 0.02em; }   /* "Μέση °C" and "Set °C" as printed on screen 02 */
.zstat { display: grid; min-height: 40px; }
.zstat__s { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-height: 40px; font-size: var(--fs-label); font-weight: 500; color: var(--ink); }
.zstat__s .btn { margin-left: auto; }
.zstat__s:focus-visible { outline-offset: 2px; }
.zfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.ind-demo .ccv__acts .sw { white-space: normal; }

@media (max-width: 1279.98px) {
  .zkpis { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1023.98px) {
  .zkpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .zgrid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639.98px) {
  html[data-page="industry"] .day__dc { top: 8px; right: 8px; }
  .pb-card { padding: 24px 20px; }
  .zkpis { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 479.98px) {
  html[data-page="industry"] .shero .hot__dcs { right: 8px; bottom: 8px; gap: 6px; }
  html[data-page="industry"] .shero .hot__dcs .reading { gap: 2px; padding: 6px 10px; }
  html[data-page="industry"] .shero .hot__dcs .data-value { font-size: var(--fs-small); }
  /* phones: one reading, so the ringed part of the screen stays visible */
  html[data-page="industry"] .shero .hot__dcs .reading + .reading { display: none; }
  .ind-demo .ccv__acts .sw__s { display: none; }   /* the knob and track carry the state (as in .sws--2) */
}