/* Public event viewer. Editor presentation and exported field colours are unchanged. */
.public-viewer-only { display: none; }
html.layout-readonly .public-viewer-only { display: block; }
html.layout-readonly, html.layout-readonly body.ipba-layout-studio { min-height: 100%; }
html.layout-readonly body.ipba-layout-studio {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  min-width: 0;
  color: var(--ipba-text);
  background: var(--ipba-bg);
}
html.layout-readonly .ipba-layout-header { flex: 0 0 auto; }
html.layout-readonly .ipba-layout-header > .ipba-layout-identity:not(.public-viewer-only),
html.layout-readonly .ipba-layout-header > .ipba-layout-nav,
html.layout-readonly .ipba-layout-actions,
html.layout-readonly .studio-view-toolbar > .tabs:not(.view-switch),
html.layout-readonly .studio-view-toolbar > label:not(.layout-label-control),
html.layout-readonly .studio-view-toolbar > select,
html.layout-readonly #sourceBtn,
html.layout-readonly #kitAlert,
html.layout-readonly main > aside,
html.layout-readonly .workspace > .bottom,
html.layout-readonly .workspace > .fieldfoot,
html.layout-readonly #motionHint,
html.layout-readonly #alerts,
html.layout-readonly .threeToolbar > label:not(.layout-label-control),
html.layout-readonly .threeToolbar [data-camera]:not([data-camera="player"]),
html.layout-readonly #expand3d,
html.layout-readonly #export3d,
html.layout-readonly .threeNote,
html.layout-readonly body > dialog { display: none !important; }
html.layout-readonly .ipba-layout-header > .public-viewer-only { flex: 1; }
html.layout-readonly #publicLayoutTitle { margin: 0; font-size: 18px; line-height: 1.3; overflow-wrap: anywhere; }
html.layout-readonly .public-viewer-only > p { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 4px 0 0; }
html.layout-readonly .public-readonly-badge { display: inline-block; padding: 2px 5px; border: 1px solid #738087; border-radius: 3px; color: #fff; font-size: 10px; line-height: 1.3; }
html.layout-readonly #publicLayoutStatus { color: #d4dadd; font-size: 11px; line-height: 1.4; }
html.layout-readonly .ipba-layout-header > .ipba-theme-toggle { margin-left: auto; }
html.layout-readonly body.ipba-layout-studio > .studio-view-toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 8px 12px;
  background: var(--ipba-surface);
  border-bottom: 1px solid var(--ipba-border);
}
html.layout-readonly .studio-view-toolbar .view-switch { display: flex; flex-wrap: wrap; gap: 5px; }
html.layout-readonly .studio-view-toolbar .public-viewer-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-left: auto; }
html.layout-readonly .public-viewer-actions .button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
html.layout-readonly .public-viewer-actions #viewerPhoto { background: var(--ipba-accent); border-color: var(--ipba-accent-border); color: #07323c; font-weight: 700; }
html.layout-readonly .public-layout-error { flex: 0 0 auto; margin: 12px; padding: 12px 14px; color: var(--ipba-warning-text); background: var(--ipba-warning-bg); border: 1px solid var(--ipba-warning-border); border-radius: 4px; font-size: 13px; line-height: 1.5; }
html.layout-readonly body.ipba-layout-studio main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  grid-template-columns: minmax(0,1fr);
  width: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
}
html.layout-readonly body.ipba-layout-studio main > .workspace {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  grid-column: 1/-1;
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 10px 12px;
}
html.layout-readonly .fieldbar { flex: 0 0 auto; align-items: center; padding-bottom: 7px; font-size: 10px; gap: 5px 10px; }
html.layout-readonly #stage { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; min-height: 220px; }
html.layout-readonly #field { width: 100%; height: 100%; min-height: 220px; max-height: none; cursor: grab; }
html.layout-readonly #field .bunker { cursor: inherit; }
html.layout-readonly #field.is-panning { cursor: grabbing; }
html.layout-readonly .public-viewer-help { flex: 0 0 auto; margin: 7px 0 0; color: var(--ipba-text-muted); font-size: 11px; line-height: 1.4; }
html.layout-readonly #stage[hidden] + .public-viewer-help { display: none; }
html.layout-readonly #threePanel {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(0,1fr) auto;
  grid-template-rows: auto minmax(220px,1fr) auto;
  min-height: 0;
  border: 1px solid var(--ipba-border);
  border-radius: 4px;
  overflow: hidden;
}
html.layout-readonly .presetKeys { grid-row: 1; grid-column: 1; min-width: 0; padding: 7px 8px; gap: 4px; border-bottom: 1px solid var(--ipba-border); }
html.layout-readonly .presetKeys button { min-width: 32px; min-height: 32px; padding: 5px 7px; }
html.layout-readonly .presetKeys > span { margin-left: 4px; font-size: 10px; }
html.layout-readonly .threeToolbar { grid-row: 1; grid-column: 2; padding: 7px 8px; border-bottom: 1px solid var(--ipba-border); }
html.layout-readonly .threeToolbar [data-camera="player"] { min-height: 32px; padding: 5px 8px; }
html.layout-readonly body.ipba-layout-studio #view3d {
  grid-row: 2;
  grid-column: 1/-1;
  width: 100%;
  height: 100%;
  min-height: 220px;
}
html.layout-readonly .threeHelp { grid-row: 3; grid-column: 1/-1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 0; padding: 6px 9px; background: var(--ipba-surface); color: var(--ipba-text-muted); font-size: 11px; line-height: 1.4; }
html.layout-readonly .heightControl { top: 10px; bottom: 10px; right: 9px; width: 80px; padding: 8px 5px; }
html.layout-readonly .heightControl input[type="number"] { width: 66px; }
html.layout-readonly .cameraPresetLabel { left: 10px; top: 10px; max-width: calc(100% - 112px); padding: 6px 9px; font-size: 12px; }

/* Embedding only reduces the surrounding controls; it never enables editing. */
html.layout-readonly.layout-embed, html.layout-readonly.layout-embed body.ipba-layout-studio { height: 100%; min-height: 0; }
html.layout-readonly.layout-embed .ipba-layout-header { min-height: 52px; padding: 6px 10px; gap: 10px; }
html.layout-readonly.layout-embed #publicLayoutTitle { font-size: 15px; }
html.layout-readonly.layout-embed .public-viewer-only > p { margin-top: 2px; gap: 5px; }
html.layout-readonly.layout-embed #publicLayoutStatus { font-size: 10px; }
html.layout-readonly.layout-embed body.ipba-layout-studio > .studio-view-toolbar { padding: 6px 8px; }
html.layout-readonly.layout-embed body.ipba-layout-studio main > .workspace { padding: 7px 8px; }

@media (max-width: 850px) {
  html.layout-readonly #threePanel { grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto minmax(220px,1fr) auto; }
  html.layout-readonly .threeToolbar { grid-row: 2; grid-column: 1; padding-top: 0; border-bottom: 1px solid var(--ipba-border); }
  html.layout-readonly .presetKeys { border-bottom: 0; }
  html.layout-readonly body.ipba-layout-studio #view3d { grid-row: 3; }
  html.layout-readonly .threeHelp { grid-row: 4; }
}
@media (max-width: 600px) {
  html.layout-readonly .ipba-layout-header { grid-template-columns: auto minmax(0,1fr) auto; padding: 8px 10px; gap: 9px; }
  html.layout-readonly #publicLayoutTitle { font-size: 15px; }
  html.layout-readonly .ipba-layout-header .ipba-theme-toggle { min-height: 44px; margin-left: 0; }
  html.layout-readonly .ipba-layout-header .ipba-theme-toggle [data-ipba-theme-label] { font-size: 0; }
  html.layout-readonly .ipba-layout-header .ipba-theme-toggle [data-ipba-theme-label]::after { content: 'Tema'; font-size: 11px; }
  html.layout-readonly body.ipba-layout-studio > .studio-view-toolbar { padding: 7px 8px; gap: 7px; }
  html.layout-readonly .studio-view-toolbar .view-switch, html.layout-readonly .studio-view-toolbar .public-viewer-actions { width: 100%; margin-left: 0; }
  html.layout-readonly .studio-view-toolbar .view-switch button { flex: 1; }
  html.layout-readonly .studio-view-toolbar .public-viewer-actions > * { flex: 1; min-height: 44px; padding: 6px 8px; font-size: 11px; }
  html.layout-readonly .presetKeys { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 4px; padding: 7px; }
  html.layout-readonly .presetKeys button { min-height: 40px; padding: 5px; }
  html.layout-readonly .presetKeys > span { grid-column: 1/-1; margin: 1px 0 0; text-align: center; }
  html.layout-readonly .threeToolbar { justify-content: center; padding: 0 7px 7px; }
  html.layout-readonly .threeToolbar [data-camera="player"] { min-height: 40px; width: 100%; }
  html.layout-readonly .threeHelp { flex-direction: column; align-items: flex-start; font-size: 10px; padding: 5px 7px; }
  html.layout-readonly .heightControl { width: 70px; right: 6px; top: 6px; bottom: 6px; gap: 5px; }
  html.layout-readonly .heightControl input[type="number"] { width: 58px; font-size: 12px; }
  html.layout-readonly .heightControl label { font-size: 9px; }
  html.layout-readonly .cameraPresetLabel { max-width: calc(100% - 93px); left: 6px; top: 6px; padding: 6px; font-size: 10px; }
  html.layout-readonly #count { font-size: 9px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  html.layout-readonly .ipba-layout-header { display: flex; min-height: 48px; padding: 5px 8px; }
  html.layout-readonly .ipba-layout-header .public-viewer-only > p { display: none; }
  html.layout-readonly body.ipba-layout-studio > .studio-view-toolbar { flex-wrap: nowrap; padding: 5px 8px; }
  html.layout-readonly .studio-view-toolbar .view-switch, html.layout-readonly .studio-view-toolbar .public-viewer-actions { width: auto; }
  html.layout-readonly .studio-view-toolbar .public-viewer-actions > * { min-height: 32px; white-space: nowrap; }
  html.layout-readonly .fieldbar { display: none; }
  html.layout-readonly .presetKeys { display: flex; padding: 4px 6px; }
  html.layout-readonly .presetKeys > span { display: none; }
  html.layout-readonly .presetKeys button { min-height: 32px; min-width: 28px; }
  html.layout-readonly #threePanel { grid-template-columns: minmax(0,1fr) auto; grid-template-rows: auto minmax(200px,1fr) auto; }
  html.layout-readonly .threeToolbar { grid-row: 1; grid-column: 2; padding: 4px 6px; }
  html.layout-readonly .threeToolbar [data-camera="player"] { min-height: 32px; width: auto; }
  html.layout-readonly body.ipba-layout-studio #view3d { grid-row: 2; min-height: 200px; }
  html.layout-readonly .threeHelp { grid-row: 3; }
}

/* The event page already supplies photo/full-page links. Give its iframe to the field. */
html.layout-readonly.layout-embed .studio-view-toolbar .public-viewer-actions,
html.layout-readonly.layout-embed .fieldbar,
html.layout-readonly.layout-embed .threeHelp { display: none; }
html.layout-readonly.layout-embed .studio-view-toolbar .view-switch { width: auto; flex: 1 1 auto; }
html.layout-readonly.layout-embed #publicLayoutTitle {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 13px;
  line-height: 17px;
  max-height: 34px;
}
html.layout-readonly.layout-embed #publicLayoutStatus {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}
html.layout-readonly.layout-embed .public-readonly-badge { padding: 1px 4px; font-size: 9px; }
html.layout-readonly.layout-embed #threePanel {
  grid-template-columns: minmax(0,1fr) auto;
  grid-template-rows: auto minmax(260px,1fr);
  height: 100%;
  min-height: 0;
}
html.layout-readonly.layout-embed .presetKeys {
  display: flex;
  flex-wrap: nowrap;
  grid-column: 1;
  grid-row: 1;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 4px;
  padding: 4px 6px;
  border-bottom: 1px solid var(--ipba-border);
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
html.layout-readonly.layout-embed .presetKeys button { flex: 0 0 38px; min-width: 38px; min-height: 44px; padding: 5px; scroll-snap-align: start; }
html.layout-readonly.layout-embed .presetKeys > span { display: none; }
html.layout-readonly.layout-embed .threeToolbar { grid-column: 2; grid-row: 1; padding: 4px 6px; border-bottom: 1px solid var(--ipba-border); }
html.layout-readonly.layout-embed .threeToolbar [data-camera="player"] { width: auto; min-height: 44px; padding: 5px 7px; font-size: 11px; }
html.layout-readonly.layout-embed body.ipba-layout-studio #view3d { grid-column: 1/-1; grid-row: 2; height: 100%; min-height: 260px; }

@media (max-width: 600px) {
  html.layout-readonly.layout-embed .ipba-layout-header { grid-template-columns: auto minmax(0,1fr) auto; gap: 7px; padding: 6px 8px; }
  html.layout-readonly.layout-embed .ipba-layout-home img { max-width: 76px; height: 36px; }
  html.layout-readonly.layout-embed .ipba-layout-header .ipba-theme-toggle { padding: 5px 7px; }
  html.layout-readonly.layout-embed body.ipba-layout-studio > .studio-view-toolbar { padding: 5px 7px; }
  html.layout-readonly.layout-embed .studio-view-toolbar .view-switch button { min-height: 44px; padding: 5px 7px; font-size: 11px; }
  html.layout-readonly.layout-embed body.ipba-layout-studio main > .workspace { padding: 6px; }
  html.layout-readonly.layout-embed .heightControl {
    top: auto;
    bottom: 6px;
    left: 6px;
    right: 6px;
    display: grid;
    grid-template-columns: 42px minmax(35px,1fr) 58px 10px;
    align-items: center;
    gap: 5px;
    width: auto;
    height: 44px;
    padding: 4px 7px;
  }
  html.layout-readonly.layout-embed .heightControl label[for="cameraHeight"] { grid-column: 1; grid-row: 1; font-size: 8px; letter-spacing: 0; }
  html.layout-readonly.layout-embed .heightControl output { display: none; }
  html.layout-readonly.layout-embed .heightControl input[type="range"] {
    grid-column: 2;
    grid-row: 1;
    writing-mode: horizontal-tb;
    direction: ltr;
    width: 100%;
    height: 28px;
    min-height: 0;
    padding: 0;
  }
  html.layout-readonly.layout-embed .heightControl label[for="cameraHeightNumber"] { grid-column: 4; grid-row: 1; font-size: 0; letter-spacing: 0; }
  html.layout-readonly.layout-embed .heightControl label[for="cameraHeightNumber"]::after { content: 'm'; font-size: 10px; }
  html.layout-readonly.layout-embed .heightControl input[type="number"] { grid-column: 3; grid-row: 1; width: 58px; min-height: 32px; height: 32px; padding: 3px; font-size: 12px; }
  html.layout-readonly.layout-embed .cameraPresetLabel { max-width: calc(100% - 12px); }
  html.layout-readonly.layout-embed .public-viewer-help { margin-top: 4px; font-size: 10px; }
}

html.layout-readonly .studio-view-toolbar > .layout-label-control { flex: 0 1 auto; margin: 0; }
@media (max-width: 600px) {
  html.layout-readonly .studio-view-toolbar > .layout-label-control { justify-content: space-between; width: 100%; }
  html.layout-readonly .studio-view-toolbar > .layout-label-control select { flex: 1 1 auto; max-width: 240px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  html.layout-readonly body.ipba-layout-studio > .studio-view-toolbar { flex-wrap: wrap; }
  html.layout-readonly .studio-view-toolbar > .layout-label-control { width: auto; min-height: 32px; }
  html.layout-readonly .studio-view-toolbar > .layout-label-control select { min-height: 32px; font-size: 12px; }
}

/* Camera preferences apply only to navigation, never to bunker placement. */
.ipba-layout-studio .threeHelp { flex-wrap: wrap; gap: 6px 12px; }
.ipba-layout-studio .threeHelp .mouse-mode { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--ipba-text); font-size: 11px; }
.ipba-layout-studio .mouse-mode select { min-height: 30px; max-width: 100%; padding: 4px 6px; color: var(--ipba-text); background: var(--ipba-surface); border: 1px solid var(--ipba-border); border-radius: 3px; }
.ipba-layout-studio .mouse-mode select:focus-visible { outline: 2px solid var(--ipba-accent); outline-offset: 2px; }
@media(max-width:600px) { .ipba-layout-studio .threeHelp .mouse-mode { flex: none; width: 100%; justify-content: space-between; } .ipba-layout-studio .mouse-mode select { min-height:44px; font-size:16px; } }

html.layout-readonly.layout-embed .threeHelp {display:flex;grid-row:3;}
html.layout-readonly.layout-embed #threePanel {grid-template-rows:auto minmax(260px,1fr) auto;}
html.layout-readonly.layout-embed .threeHelp > span {display:none;}
@media(max-width:600px) {html.layout-readonly .threeHelp {flex-wrap:nowrap;} }