/* Polite Platform :: Control Center
 * Path: /control-plane/public/assets/share-station-preview.css
 * Description: Shared synthetic Share Station preview styling for Kiosk and Storyboard.
 * Author: Polite Platform Team
 * Date: 2026-10-28T16:52:31Z
 * Generated by: GPT-6 Codex
 */
.ss-preview-tabs { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.ss-preview-tabs { gap: 6px; margin-bottom: 12px; }
.ss-preview-tabs button {
  min-height: 44px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--surface); color: var(--text-dim); font: inherit; cursor: pointer;
}
.ss-preview-tabs button[aria-pressed=true] { color: var(--accent); border-color: var(--accent); }
.ss-preview-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ss-preview-stage {
  display: grid;
  place-items: center;
  height: 55vh;
  min-height: 280px;
  overflow: hidden;
  background: #070708;
  border-radius: 10px;
}
.ss-preview-device {
  position: relative;
  width: min(100%, calc(55vh * var(--ss-ratio, 1.333333)));
  container-type: inline-size;
  overflow: hidden;
}
.ss-preview-kiosk {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ss-page-bg);
  color: var(--ss-header-text);
}
.ss-preview-header {
  flex: 0 0 7%;
  display: grid;
  place-items: center;
  background: var(--ss-header-bg);
  color: var(--ss-header-text);
  font-size: clamp(10px,2cqw,18px);
}
.ss-preview-footer {
  flex: 0 0 6%;
  display: grid;
  place-items: center;
  background: var(--ss-footer-bg);
  color: var(--ss-footer-text);
  font-size: clamp(9px,1vw,13px);
}
.ss-preview-media-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 10px;
  padding: 14px;
  overflow: hidden;
}
.ss-preview-media-grid.grid-square .ss-preview-media-tile {
  aspect-ratio: 1;
}
.ss-preview-media-grid.grid-full .ss-preview-media-tile,
.ss-preview-media-grid.grid-masonry .ss-preview-media-tile {
  aspect-ratio: 3/4;
}
.ss-preview-media-grid.density-compact {
  gap: 7px;
  padding: 10px;
}
.ss-preview-media-grid.density-dense {
  gap: 4px;
  padding: 7px;
}
.ss-preview-media-grid.grid-carousel {
  display: flex;
  overflow: hidden;
}
.ss-preview-media-grid.grid-carousel .ss-preview-media-tile {
  flex: 0 0 24%;
}
.ss-preview-media-grid.grid-justified {
  grid-template-columns: repeat(4,minmax(0,1fr));
}
.ss-preview-media-tile {
  overflow: hidden;
  background: #777;
}
.ss-preview-media-tile:nth-child(3n) {
  background: #8e8e94;
}
.ss-preview-media-tile:nth-child(3n+1) {
  background: #67676e;
}
.ss-preview-media-tile span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg,transparent 42%,#babac0 43% 52%,transparent 53%);
}
.ss-preview-modal-backdrop {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 3%;
  background: #000b;
}
.ss-preview-modal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(88%,1080px);
  aspect-ratio: 3/2;
  padding: 2%;
  gap: 2%;
  border-radius: 12px;
  background: var(--ss-modal-bg,#28292f);
  color: var(--ss-modal-text,#fff);
}
.ss-preview-modal.layout-single-column,
.ss-preview-modal.layout-single-column-tabbed {
  grid-template-columns: 1fr;
  width: min(70%,576px);
  aspect-ratio: 3/4;
}
.ss-preview-modal.size-wide {
  aspect-ratio: 16/9;
}
.ss-preview-modal.size-fullscreen {
  width: 94%;
  height: 94%;
}
.ss-preview-modal .ss-preview-media-grid {
  padding: 0;
  align-content: center;
}
.ss-preview-modal-pane {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}
.ss-preview-modal-pane h2,.ss-preview-modal-pane p {
  margin: 0;
  overflow-wrap: anywhere;
}
.ss-preview-field {
  min-height: 38px;
  padding: 10px;
  border: 1px solid #666;
  border-radius: 6px;
  color: #aaa;
}
.ss-preview-button {
  align-self: flex-start;
  padding: 10px 14px;
  border-radius: 6px;
  background: var(--ss-button-bg, #fff);
  color: var(--ss-button-text, #111);
}
.ss-preview-art {
  display: block;
  max-width: 100%;
  max-height: 32%;
  object-fit: contain;
}
.ss-preview-welcome {
  flex: 1;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 8%;
  text-align: center;
  background: #000;
}
.ss-preview-welcome h2,.ss-preview-welcome p {
  margin: 0;
}
.ss-preview-prompt {
  opacity: .72;
}
.ss-preview-modal-pane h2 { font-size: clamp(12px, 3cqw, 24px); }
.ss-preview-modal-pane p, .ss-preview-field { font-size: clamp(10px, 2cqw, 16px); }
.ss-preview-header img { max-height: 80%; max-width: 30%; }
.ss-preview-masthead { flex: 0 0 auto; width: 100%; object-fit: contain; }
.ss-preview-welcome { position: relative; overflow: hidden; }
.ss-preview-welcome > :not(.ss-preview-welcome-bg) { position: relative; z-index: 1; }
.ss-preview-welcome-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ss-preview-welcome .prompt-bottom_center { position: absolute; bottom: 5%; }
@media (min-width: 761px) {
.ss-preview-stage { flex: 1; min-height: 0; height: auto; }
.ss-preview-device { width: min(100%, calc((100vh - 430px) * var(--ss-ratio, 1.333333))); }
}
@media (max-width: 760px) {
.ss-preview-stage { height: 280px; min-height: 0; }
.ss-preview-device { width: min(100%, calc(280px * var(--ss-ratio, 1.333333))); }
}