/* Kleyna site-wide overrides: responsive layout and scrollbar treatment.
   Page layouts live inline in each page's <x-dc> markup; this file only holds
   rules that inline styles cannot express (media queries, pseudo-elements). */

/* The raw Design Component template is replaced by the rendered page once
   assets/js/dc-runtime.js boots; keep it out of the first paint. */
x-dc { display:none !important; }

/* Anchor targets (#contact, #how, service ids) clear the fixed 64px header. */
html { scroll-padding-top:80px; }

/* ── Scrollbars inside product demos, menus and panels ──────────────────
   Slim blue-grey thumb on a track that takes the panel's own dark background.
   WebKit/Blink get the 6px pseudo-element styling; Firefox (no
   ::-webkit-scrollbar) gets the standard properties. The page scrollbar
   itself is left to the browser.
   (Blink ignores ::-webkit-scrollbar once scrollbar-color is set, hence the split.) */
@supports not selector(::-webkit-scrollbar) {
  body * { scrollbar-width:thin; scrollbar-color:rgba(157,167,186,0.32) transparent; }
}
body *::-webkit-scrollbar { width:6px; height:6px; background:transparent; }
body *::-webkit-scrollbar-track { background:transparent; }
body *::-webkit-scrollbar-thumb { background:rgba(157,167,186,0.32); border-radius:999px; }
body *::-webkit-scrollbar-thumb:hover { background:rgba(157,167,186,0.55); }
body *::-webkit-scrollbar-button { display:none; width:0; height:0; }
body *::-webkit-scrollbar-corner { background:transparent; }

/* Mobile menu: items keep their touch height when the expanded list scrolls. */
#kleyna-mobile-menu > * { flex-shrink:0; }

/* ── Compact product stages (index.html) ──────────────────────────────────
   Below 560px the page script swaps the scaled desktop stage for a 400px-wide
   reflowed one (data-compact) so the product UI stays legible. */
[data-stage][data-compact] { width:400px !important; height:520px !important; }

/* Hero window: no sidebar, rows reflow to the window width. */
[data-stage="hero"][data-compact] [data-win] { left:0 !important; top:40px !important; width:400px !important; height:auto !important; }
[data-stage="hero"][data-compact] [data-win] > div:nth-child(2) { height:auto !important; }
[data-stage="hero"][data-compact] [data-win] > div:nth-child(2) > div:first-child { display:none !important; }
[data-stage="hero"][data-compact] [data-win] > div:nth-child(2) > div:last-child { padding:16px 18px 6px !important; }

/* Construction device: tablet frame becomes a phone-width app, nav rail hidden. */
[data-stage="con"][data-compact] { height:460px !important; }
[data-stage="con"][data-compact] [data-device] { left:0 !important; top:10px !important; width:400px !important; height:440px !important; }
[data-stage="con"][data-compact] [data-device] > div > div:nth-child(2) > div:first-child { display:none !important; }
[data-stage="con"][data-compact] [data-device] > div > div:nth-child(2) > div:last-child { padding:16px !important; }
[data-stage="con"][data-compact] [data-device] > div > div:nth-child(2) > div:last-child div { flex-wrap:wrap; }

/* Construction app in the page flow (phones, data-static set by the page script). */
[data-stage][data-static] { position:relative !important; left:auto !important; top:auto !important; width:auto !important; height:auto !important; transform:none !important; }
[data-stage][data-static] [data-sheet] { display:none !important; }
[data-stage][data-static] [data-device] { position:relative !important; left:auto !important; top:auto !important; width:auto !important; height:auto !important; padding:6px !important; opacity:1 !important; transform:none !important; }
[data-stage][data-static] [data-device] > div { height:auto !important; }
[data-stage][data-static] [data-device] > div > div:first-child { height:auto !important; min-height:40px; flex-wrap:wrap; row-gap:2px; padding:8px 14px !important; }
[data-stage][data-static] [data-device] > div > div:nth-child(2) { flex:none !important; flex-direction:column !important; }
/* Nav rail becomes a tappable row; horizontal-only, so vertical swipes still scroll the page. */
[data-stage][data-static] [data-device] > div > div:nth-child(2) > div:first-child { width:auto !important; flex-direction:row !important; gap:4px !important; padding:8px !important; overflow-x:auto; overflow-y:hidden; box-shadow:inset 0 -1px 0 rgba(216,236,248,0.07) !important; }
[data-stage][data-static] [data-device] > div > div:nth-child(2) > div:first-child > button { flex:none; white-space:nowrap; min-height:36px; }
[data-stage][data-static] [data-device] > div > div:nth-child(2) > div:last-child { padding:16px 14px 20px !important; overflow:visible !important; font-size:13px !important; }
[data-stage][data-static] [data-g="forms"] { grid-template-columns:minmax(0,1fr) 64px 74px !important; column-gap:8px !important; }
[data-stage][data-static] [data-g="ind"] { grid-template-columns:minmax(0,1fr) !important; gap:4px !important; }

/* ── Phones ───────────────────────────────────────────────────────────── */
@media (max-width:559px) {
  /* Hero scrolls normally on phones (the docking animation follows the scroll). */
  [data-hero] { height:auto !important; }
  [data-hero] > section { position:relative !important; height:auto !important; }
  [data-hero] [data-fit] { flex:none !important; min-height:0 !important; margin-top:28px !important; }
  /* Construction example: part of normal document scrolling on phones. No pinned run, natural
     height, every caption visible, and the app preview in the flow at its real size. The page
     script stops driving this section from scroll position at the same breakpoint. */
  [data-con] { height:auto !important; }
  [data-con] > section { position:relative !important; height:auto !important; min-height:0 !important; }
  [data-con] > section > div { padding-top:72px !important; padding-bottom:72px !important; gap:32px !important; }
  [data-con] > section > div > div:first-child { min-height:0 !important; }
  [data-con] [data-cc] { position:relative !important; top:auto !important; opacity:1 !important; }
  [data-con] [data-cc] + [data-cc] { margin-top:36px; }
  [data-con] [data-cc] h2 { font-size:30px !important; }
  [data-con] [data-fit] { flex:none !important; min-height:0 !important; height:auto !important; }

  /* Construction demo view tabs: all three fit without a clipped "Permits". */
  [role="tablist"][aria-label="Site workspace views"] { padding:0 4px !important; gap:0 !important; }
  [role="tablist"][aria-label="Site workspace views"] > button { flex:1 0 auto; justify-content:center; gap:7px !important; padding:0 8px !important; }

  /* Software examples: the pill becomes a full-width segmented control so
     "Reporting & integrations" wraps inside its own cell. */
  [role="tablist"][aria-label="Software examples"] { width:100%; display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)); border-radius:12px !important; }
  [role="tablist"][aria-label="Software examples"] > button { height:auto !important; min-height:40px; padding:6px 8px !important; border-radius:9px !important; line-height:1.25; }
}

/* Industries list: the two-column header only makes sense while rows are two columns
   (2 × 300px + 48px gap + page gutters). */
@media (max-width:687px) {
  [data-colhead] { display:none !important; }
}