/* Layout for the 3D view. Shares the palette in style.css. */

.viewer-body { height: 100vh; display: flex; flex-direction: column; }

.viewer-layout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 24rem);
  gap: 1rem;
  padding: 0 1rem 1rem;
}
@media (max-width: 60rem) {
  .viewer-layout { grid-template-columns: 1fr; grid-template-rows: minmax(18rem, 1fr) auto; }
}

.scene-panel, .commentary-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/*
 * The canvas, and the colour behind whatever is drawn on it.
 *
 * Two declarations of the same thing that have to agree: this one shows
 * before three.js has loaded and wherever WebGL is unavailable, and the one
 * in scene.js is the renderer's own clear colour. CSS cannot reach that, so
 * scene.js reads the same media query and they are changed together or not
 * at all.
 */
.scene {
  flex: 1;
  min-height: 16rem;
  width: 100%;
  border-radius: 4px;
  display: block;
  background: #dfe6ea;
}

@media (prefers-color-scheme: dark) {
  .scene {
    background: #1b242a;
  }
}

.pose {
  margin: 0.6rem 0 0;
  font-size: 1.02rem;
  font-weight: 600;
}

.scene-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: center;
  margin-top: 0.6rem;
}
.scene-controls label { display: flex; gap: 0.5rem; align-items: center; }

.focus-label {
  margin: 0 0 0.5rem;
  min-height: 1.4em;
  color: var(--muted);
}

/* The transcript is this window's main body of text now that the narration
   list has gone, so it takes the room the list used to have rather than
   sitting in the corner it had as a footnote inside the scene panel. */
.commentary-panel .commentary {
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.commentary-panel .commentary-transcript {
  flex: 1;
  min-height: 8rem;
  max-height: none;
}

/* --- tabs, shared by the editor's reference panel ----------------------- */

.tab-section { display: flex; flex-direction: column; }

.tablist {
  display: flex;
  gap: 0.25rem;
  border-bottom: 2px solid var(--line);
  margin-bottom: 0.6rem;
}

.tablist [role="tab"] {
  font: inherit;
  background: transparent;
  color: var(--ink);
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  padding: 0.45rem 0.9rem;
  margin-bottom: -2px;
  cursor: pointer;
}
.tablist [role="tab"]:hover { background: var(--page); }

/* The selected tab is marked by a weight change and a solid underline, not by
   colour alone, so it still reads when colour is unavailable. */
.tablist [role="tab"][aria-selected="true"] {
  font-weight: 600;
  border-color: var(--line);
  border-bottom: 2px solid var(--panel);
  background: var(--panel);
}

.tab-panel { display: flex; flex-direction: column; }

/* In the editor the canvas sits in a panel rather than filling a page. */
.side-panel .scene { height: 17rem; flex: none; }
/* The pose keeps its full size in the side panel too: it is the sentence the
   picture is a picture of, and shrinking it to fit a narrow column would
   shrink the one line a low-vision reader most needs. */