/* PKTOK console — the "Projektor" page (in beta). docs/TERV-PROJEKTOR.md, step A3.
   Own stylesheet on purpose: the shared console css files are edited by every parallel session.
   It leans on the console's own tokens and classes (.panel, .btn, .chip, .hero-title) and only adds
   the layout this page needs. Everything is scoped under .projector-page or a pj- class. */

.projector-page .pj-hero {
  margin: 0 0 18px;
}
.projector-page .pj-hero .hero-lead {
  max-width: 78ch;
}

.projector-page .pj-note {
  min-height: 1.4em;
  margin: 0 0 12px;
  font-weight: 600;
}
.projector-page .pj-note.ok {
  color: var(--green, #28e0a0);
}
.projector-page .pj-note.err {
  color: var(--red, #ff5a7a);
}

.projector-page .pj-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.projector-page .pj-col {
  display: grid;
  gap: 16px;
  min-width: 0;
}
@media (max-width: 980px) {
  .projector-page .pj-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.projector-page .pj-panel {
  display: grid;
  gap: 14px;
}
.projector-page .pj-panel h2 {
  margin: 0;
}
.projector-page .pj-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.projector-page .pj-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.projector-page .pj-label {
  font-weight: 700;
}
.projector-page .pj-hint {
  display: block;
  opacity: 0.72;
  line-height: 1.45;
}
.projector-page .pj-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: end;
}

.projector-page .pj-seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}
.projector-page .pj-seg-btn {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.16));
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.projector-page .pj-seg-btn.on {
  border-color: var(--brand-pink, #ff337f);
  background: color-mix(in srgb, var(--brand-pink, #ff337f) 18%, transparent);
}

.projector-page .pj-toggle {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
}
.projector-page .pj-toggle input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex: 0 0 auto;
}
.projector-page .pj-toggle b {
  display: block;
}

.projector-page .pj-link-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.projector-page .pj-link {
  flex: 1 1 260px;
  min-width: 0;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.16));
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
}

/* The preview box imitates the PHYSICAL screen; the wall page letterboxes itself inside it. */
.projector-page .pj-preview {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  background: #000;
}
.projector-page .pj-preview.is-landscape {
  aspect-ratio: 16 / 9;
}
.projector-page .pj-preview.is-portrait {
  aspect-ratio: 9 / 16;
  max-height: 70vh;
  width: auto;
  margin: 0 auto;
}
.projector-page .pj-preview-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  /* the places of the wall are dragged right here (owner request 2026-10-19); the wall itself takes no other click */
  pointer-events: auto;
}

.projector-page .pj-clips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
}
.projector-page .pj-clip {
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.16));
  border-radius: 12px;
}
.projector-page .pj-clip.on {
  border-color: var(--brand-pink, #ff337f);
}
.projector-page .pj-clip-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  background: #05070b;
  object-fit: cover;
}
/* A clip is a PICTURE first (its poster) and turns into a video on a click — clipPreview in projector-page.js.
   The button IS the 16:9 box: a clip whose poster could not be made keeps a dark box with the play mark in it,
   instead of collapsing into a gap nobody can click. */
.projector-page .pj-clip-preview {
  min-width: 0;
}
.projector-page .pj-clip-preview .pj-clip-video {
  display: block;
}
.projector-page .pj-clip-poster {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #05070b;
  cursor: pointer;
}
.projector-page .pj-clip-poster .pj-clip-video {
  height: 100%;
}
.projector-page .pj-clip-play {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1;
  color: #fff;
  background: rgba(5, 7, 11, 0.72);
  pointer-events: none;
}
.projector-page .pj-clip-poster:hover .pj-clip-play,
.projector-page .pj-clip-poster:focus-visible .pj-clip-play {
  background: var(--brand-pink, #ff337f);
}
/* The clip's name: ONE line, cut with an ellipsis (the full name is in the tooltip). `overflow: hidden` is also
   what lets a grid cell shrink below the width of a long file name. */
.projector-page .pj-clip-name {
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 600;
}
.projector-page .pj-clip-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
/* Kikapcsolt fal-klip: látszik (különben nem lenne mit bekapcsolni), de halványan — a KÉP halkul,
   a gombok és a jelölés teljes erősséggel maradnak, hogy olvasható és kattintható legyen. */
.projector-page .pj-clip.off .pj-clip-video {
  opacity: 0.45;
  filter: grayscale(0.6);
}
.projector-page .pj-clip-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.projector-page .pj-clip-tag {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.16));
  opacity: 0.85;
}
.projector-page .pj-empty {
  margin: 0;
  padding: 16px;
  border: 1px dashed var(--line, rgba(255, 255, 255, 0.16));
  border-radius: 12px;
  opacity: 0.8;
}
.projector-page .pj-progress:empty {
  display: none;
}

/* ---- the people on the wall (step B3) ---- */
.projector-page .pj-wide {
  margin-top: 16px;
}
.projector-page .pj-short {
  flex: 0 0 auto;
  width: 12em;
}
.projector-page .pj-sub {
  margin: 6px 0 0;
  font-size: 1rem;
}
.projector-page .pj-people {
  display: grid;
  gap: 8px;
}
.projector-page .pj-person {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.16));
  border-radius: 12px;
}
.projector-page .pj-person.is-hidden {
  opacity: 0.55;
}
.projector-page .pj-person-main {
  min-width: 0;
}
.projector-page .pj-person-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.projector-page .pj-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.projector-page .pj-person-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.projector-page .pj-inline {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  cursor: pointer;
}
.projector-page .pj-face {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
  flex: 0 0 auto;
}
.projector-page .pj-face img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.projector-page .pj-mono {
  font-weight: 800;
}
/* the two cosmetic slips seen on the first screenshot: an underlined link-button, a full-width number */
.projector-page a.btn {
  text-decoration: none;
}
.projector-page input[type='number'] {
  width: 8em;
}
/* A grid child's default min-width is `auto`, so a long flex row could push past the panel edge on
   a phone-width screen (seen: the "add by hand" row clipped its VIP tick). */
.projector-page .pj-panel > * {
  min-width: 0;
}
@media (max-width: 560px) {
  .projector-page .pj-link-row > .pj-link {
    flex-basis: 100%;
  }
}
/* A file chooser has an intrinsic width of ~300 px; measured at a 360 px viewport it pushed its label
   10 px past the panel. Let it shrink (the browser then shortens the "no file chosen" text). */
.projector-page .pj-inline {
  min-width: 0;
  max-width: 100%;
}
.projector-page input[type='file'] {
  min-width: 0;
  max-width: 100%;
}

/* ---- TV pairing: a short address on the TV + a 6-digit code here, instead of the 100-character link ---- */
.projector-page .pj-tv {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--brand-pink, #ff337f);
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand-pink, #ff337f) 8%, transparent);
}
.projector-page .pj-tv-steps {
  margin: 0;
  padding-inline-start: 1.3em;
  display: grid;
  gap: 4px;
}
.projector-page .pj-tv-address {
  font-size: 1.15em;
  font-weight: 800;
  white-space: nowrap;
  user-select: all;
}
.projector-page .pj-tv-code {
  flex: 0 1 11em;
  font-size: 1.3em;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-align: center;
}
.projector-page .pj-tv-result:empty {
  display: none;
}
.projector-page .pj-tv-result.ok {
  color: var(--green, #28e0a0);
  opacity: 1;
  font-weight: 700;
}
.projector-page .pj-tv-result.err {
  color: var(--red, #ff5a7a);
  opacity: 1;
  font-weight: 700;
}

/* ---- the people rows, simplified (2026-09-21): a status line that tells the truth, two switches, quiet secondary actions ---- */
.projector-page .pj-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.82em;
  font-weight: 700;
}
.projector-page .pj-status::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.projector-page .pj-status.ok {
  color: var(--green, #1faf7a);
  background: color-mix(in srgb, var(--green, #1faf7a) 14%, transparent);
}
.projector-page .pj-status.off {
  color: var(--red, #d6455f);
  background: color-mix(in srgb, var(--red, #d6455f) 12%, transparent);
}
.projector-page .pj-switch {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.16));
  border-radius: 10px;
  font-weight: 600;
}
.projector-page .pj-switch input {
  width: 18px;
  height: 18px;
}
.projector-page .pj-person-more {
  opacity: 0.85;
  font-size: 0.92em;
}
.projector-page .pj-note-people {
  margin: 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(127, 127, 127, 0.1);
}

.projector-page .pj-person.is-off .pj-face,
.projector-page .pj-person.is-off .pj-person-name {
  opacity: 0.45;
}
.projector-page .pj-banner {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--red, #d6455f);
  background: color-mix(in srgb, var(--red, #d6455f) 8%, transparent);
  font-weight: 600;
}

/* ---- widgets on the wall: a 3×3 place picker + four sliders per widget ---- */
.projector-page .pj-widgets {
  display: grid;
  gap: 10px;
}
.projector-page .pj-widget {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.16));
  border-radius: 12px;
}
.projector-page .pj-widget.is-hidden {
  opacity: 0.55;
}
.projector-page .pj-widget-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.projector-page .pj-place {
  display: grid;
  grid-template-columns: repeat(3, 30px);
  grid-auto-rows: 22px;
  gap: 4px;
  margin-top: 4px;
  padding: 4px;
  border-radius: 8px;
  background: rgba(127, 127, 127, 0.12); /* reads as a little screen */
}
.projector-page .pj-place-btn {
  padding: 0;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.16));
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}
.projector-page .pj-place-btn.on {
  border-color: var(--brand-pink, #ff337f);
  background: var(--brand-pink, #ff337f);
}
.projector-page .pj-sliders {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  min-width: 0;
}
.projector-page .pj-slider {
  display: grid;
  gap: 2px;
  min-width: 0;
  font-size: 0.9em;
}
.projector-page .pj-slider input[type='range'] {
  width: 100%;
  min-width: 0;
}
@media (max-width: 560px) {
  .projector-page .pj-widget-body {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* "Videók a falon": a list, not a gallery — a phone must be able to scan it. One group is open at a time, and a
   clip's 16:9 controls only appear when its row is unfolded (nine groups of controls at once is what lost the
   first real user of this page). */
.projector-page .pj-wallclips {
  display: grid;
  gap: 8px;
}
.projector-page .pj-clipnote {
  margin: 0;
  min-height: 1em;
  font-size: 14px;
  color: var(--muted, #9aa3b2);
}
.projector-page .pj-clipnote.ok {
  color: var(--ok, #35d07f);
}
.projector-page .pj-clipnote.warn {
  color: var(--warn, #ffb020);
}
.projector-page .pj-clipnote.err {
  color: var(--danger, #ff5c6c);
}
.projector-page .pj-group {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  color: inherit;
  background: var(--panel-2, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--line, rgba(255, 255, 255, 0.16));
  border-radius: 12px;
  cursor: pointer;
}
.projector-page .pj-group.on {
  border-color: var(--brand-pink, #ff337f);
}
.projector-page .pj-cliprow {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  margin-left: 10px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.16));
  border-radius: 12px;
}
.projector-page .pj-cliprow.open {
  border-color: var(--brand-pink, #ff337f);
}
.projector-page .pj-clip-main {
  display: grid;
  gap: 2px;
}
.projector-page .pj-clip-title {
  overflow-wrap: anywhere;
}
.projector-page .pj-clip-flag {
  font-weight: 600;
}
.projector-page .pj-clip-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.projector-page .pj-clip-landscape {
  display: grid;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line, rgba(255, 255, 255, 0.16));
}
.projector-page .pj-toggle.pj-inline {
  margin: 0;
}
.projector-page .pj-namepos {
  display: grid;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px dashed var(--line, rgba(255, 255, 255, 0.16));
}

/* where a clip category plays (2026-09-28) */
.projector-page .pj-target {
  display: grid;
  gap: 6px;
  margin: 4px 0 10px;
  padding: 10px 12px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.16));
  border-radius: 12px;
}
.projector-page .pj-target .pj-hint.pj-warn {
  /* one orange that reads on the light AND the dark console (the page has no theme-scoped rules) */
  color: #d97800;
  font-weight: 600;
}
.projector-page .pj-target-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: color-mix(in srgb, var(--brand-pink, #ff337f) 18%, transparent);
}

/* the same block on the Videos page (#vcatTarget) */
.projector-page.pj-embed .pj-target {
  margin: 14px 0 12px;
}
.projector-page.pj-embed .pj-clipnote {
  display: block;
}