/*
 * @file Kiosk.css
 * @copyright X Laboratory B.V - All Rights Reserved
 * Unauthorized copying of this file, via any medium is strictly prohibited
 * Proprietary and confidential
 * @author Andre Schiele <andre@deltaxlab.com>
 * @author Claude code
 * @date 2026/08/27
 * @brief Overrides that apply only to the visitor display (?mode=kiosk) and to
 *        very large screens. The same markup is used in both modes.
 */

#app[data-mode="kiosk"] {
  --touch-target-min: 64px;
}

#app[data-mode="kiosk"] #top-bar {
  min-height: 88px;
  padding: var(--space-2) var(--space-4);
}

#app[data-mode="kiosk"] .control {
  font-size: 0.95rem;
  padding: 0 var(--space-3);
}

#app[data-mode="kiosk"] .breadcrumbs__list {
  font-size: 0.95rem;
}

#app[data-mode="kiosk"] #page {
  padding: var(--space-4);
}

#app[data-mode="kiosk"] .tiles {
  grid-template-columns: repeat(auto-fill, minmax(min(460px, 100%), 1fr));
  gap: var(--space-4);
}

#app[data-mode="kiosk"] .tile {
  min-height: 300px;
}

#app[data-mode="kiosk"] .tile__title {
  font-size: 2.1rem;
}

#app[data-mode="kiosk"] .tile__summary {
  font-size: 1.15rem;
}

#app[data-mode="kiosk"] #status-bar {
  min-height: 60px;
  font-size: 0.88rem;
}

#app[data-mode="kiosk"] #page {
  padding: var(--space-5) var(--space-4);
}

#app[data-mode="kiosk"] .tile__summary {
  font-size: 1.15rem;
}

/* Text selection and long-press callouts are unwanted on a public display. */
#app[data-mode="kiosk"] {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Large-format displays: the root size is already fluid (see html in App.css),
   so nothing needs to step here. Only the content measure is widened, because
   a very large screen can carry a longer line comfortably. */
@media (min-width: 2200px) {
  :root {
    --content-max-width: 84rem;
  }
}

/* Coarse pointers get larger hit areas regardless of mode. */
@media (pointer: coarse) {
  .control {
    min-height: 56px;
    padding: 0 var(--space-3);
  }

  .breadcrumbs__link {
    padding: 0.5em 0;
  }
}

/* ------------------------------------------------- narrow desktop, tablet */

/* The chrome row is the widest fixed element in the layout: five controls with
   text labels plus the breadcrumb trail. Below roughly 1100 px their combined
   minimum width exceeds the viewport and pushes the whole document sideways,
   which showed up as a horizontal scrollbar on every deep page at 768 px.
   The labels are dropped first - each control keeps its icon and its
   aria-label, so nothing is lost to assistive technology. */
@media (max-width: 1100px) {
  #top-bar {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
    gap: var(--space-1);
  }

  .control__label {
    display: none;
  }

  .control {
    padding: 0 0.85rem;
  }

  #status-bar {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }

  #page {
    padding: var(--space-4) var(--space-2);
  }

  /* Keeps the progress rail aligned with the content at this width. */
  .progress-rail {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }

  .node__meta,
  .tile__meta {
    gap: var(--space-1);
  }
}

/* The breadcrumb trail is the first thing to go: Home and Back already cover
   the same navigation. The threshold is 860 px rather than 720 px because the
   chrome row now carries six controls, and a truncated trail beside them reads
   worse than no trail at all. */
@media (max-width: 860px) {
  .breadcrumbs {
    display: none;
  }
}


/* The rail scales with the rest of the chrome on the visitor display. */
#app[data-mode="kiosk"] .progress-rail {
  padding-top: var(--space-2);
}

#app[data-mode="kiosk"] .progress,
#app[data-mode="kiosk"] .progress__bar {
  height: 4px;
}