/* gaussopt.css — Gauss-Opt page layout (on top of ../common/main.css): one window-high grid with a
 * header, the phase stepper, the 3D view, the phase inspector on the right and a tabbed dock
 * (timeline / charts / log) under the view (src/ui/shell.js). Below 1000 px the columns stack. */

#main-area.app {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  grid-template-rows: auto auto minmax(0, 1fr) 200px;
  grid-template-areas: "header header" "stepper stepper" "view inspector" "dock inspector";
  gap: 8px;
  height: calc(100vh - 2 * var(--gap));
  max-width: none;
  margin: var(--gap);
  padding: 8px 12px 10px;
}

/* ── header ─────────────────────────────────────────────────────── */
#go-header { grid-area: header; display: flex; align-items: center; gap: 12px; min-width: 0; }
#go-header #skal-back { position: static; }
#main-area.app #go-header h2 { margin: 0; padding: 0; font-size: 18px; }
#go-header .go-sub { color: var(--ink-dim); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#project-label { margin-left: auto; font: 12px var(--font-mono); color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#BtnHelp {
  width: 26px; height: 26px; border-radius: 13px; border: 1px solid var(--btn-border);
  background: var(--btn-bg); color: var(--btn-fg); cursor: pointer; font-weight: bold; flex: none;
}

/* ── phase stepper ──────────────────────────────────────────────── */
/* one box per phase, numbered, its state on the icon and its result under the name (shell.js) */
#go-stepper { grid-area: stepper; display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
#go-stepper .step {
  flex: 1 1 110px; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px;
  align-items: center; text-align: left; padding: 4px 10px 4px 6px;
  border: 1px solid var(--panel-border); border-radius: 8px; background: var(--panel-bg);
  color: var(--ink); font: 13px var(--font-ui); cursor: pointer;
}
#go-stepper .step:hover { background: var(--btn-bg-hover); }
#go-stepper .step .step-icon {
  grid-row: 1 / 3; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font: 600 12px var(--font-ui); color: var(--ink-dim); background: var(--card-bg); border: 1px solid var(--panel-border);
}
#go-stepper .step .step-label { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#go-stepper .step .step-sum {
  font: 11px var(--font-mono); color: var(--ink-dim); min-height: 1.3em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#go-stepper .step.done    .step-icon { color: #fff; background: #15803d; border-color: #15803d; }
#go-stepper .step.running .step-icon { color: #fff; background: #b45309; border-color: #b45309; animation: go-pulse 1s ease-in-out infinite; }
#go-stepper .step.stale   .step-icon { color: #000; background: #fbbf24; border-color: #b45309; }
#go-stepper .step.skipped { opacity: 0.55; }
#go-stepper .step.skipped .step-icon { border-style: dashed; }
#go-stepper .step.current { background: var(--accent); border-color: var(--accent); color: #fff; }
#go-stepper .step.current .step-sum { color: rgba(255, 255, 255, 0.8); }
#go-stepper .step.current.todo .step-icon { color: #fff; background: transparent; border-color: #fff; }
@keyframes go-pulse { 50% { opacity: 0.35; } }

/* ── 3D view ────────────────────────────────────────────────────── */
#go-view { grid-area: view; display: flex; align-items: center; justify-content: center; min-height: 0; min-width: 0; }
/* the wrap and the canvas fill the view (shell.js _fitCanvas): no bars in 3D; the 2D compare
   modes letterbox the photo inside the canvas (render.js renderCompare) */
#go-view .canvas-wrap {
  position: relative; margin: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: #0d0e13; border-radius: 10px; overflow: hidden;
}
#go-view #main-canvas { display: block; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: #0d0e13; }

#info {
  position: absolute; left: 10px; top: 10px; max-width: calc(100% - 220px);
  background: var(--panel-bg); color: var(--ink);
  border: 1px solid var(--panel-border); border-radius: 6px;
  padding: 4px 8px; font: 11px var(--font-mono); z-index: 5;
  pointer-events: none;
}
#error-line {
  display: none; margin-top: 4px; padding: 3px 6px; border-radius: 4px;
  background: rgba(220, 38, 38, 0.22); border: 1px solid #f87171; color: #7f1d1d;
}
#view-toolbar { position: absolute; right: 10px; top: 10px; z-index: 6; display: flex; gap: 6px; }
#view-toolbar button {
  font: 12px var(--font-ui); padding: 3px 8px; cursor: pointer; border-radius: 6px;
  background: var(--panel-bg); color: var(--ink); border: 1px solid var(--panel-border);
}
#view-toolbar button.on { box-shadow: 0 0 0 2px var(--card-border-hi) inset; }
#view-popover {
  display: none; position: absolute; right: 10px; top: 40px; z-index: 6;
  width: 300px; max-height: calc(100% - 50px); overflow-y: auto;
}
#view-popover.shown { display: block; }
#view-popover .skal-gui { position: static; width: 100%; max-width: 100%; }

/* Keyframe contact sheet (src/ui/frames.js): over the canvas, under the toolbar */
#frames-sheet {
  display: none; position: absolute; inset: 0; z-index: 5; overflow-y: auto; border-radius: 10px;
  background: #0d0e13; padding: 44px 8px 8px; box-sizing: border-box;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; align-content: start;
}
#frames-sheet.shown { display: grid; }
#frames-sheet figure { margin: 0; border: 2px solid #2a2d3a; border-radius: 4px; cursor: pointer; background: #000; }
#frames-sheet figure.selected { outline: 2px solid #fff; outline-offset: 1px; }
#frames-sheet img { display: block; width: 100%; aspect-ratio: var(--frame-aspect, 16 / 9); object-fit: cover; }
#frames-sheet figure.unused { opacity: 0.35; cursor: default; }  /* a photo set's photos left out (filter, size) */
#frames-sheet figcaption { font: 10px var(--font-mono); color: #aab; padding: 1px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Keys & mouse help (H): centred over the view */
#help-overlay {
  display: none;
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 7;
  max-height: calc(100% - 20px); overflow-y: auto;
  background: var(--panel-bg); color: var(--ink);
  border: 1px solid var(--panel-border); border-radius: 6px;
  box-shadow: 0 2px 8px var(--panel-shadow);
  padding: 8px 10px; font: 11px var(--font-mono);
}
#help-overlay.shown { display: block; }
#help-overlay .help-title { font-weight: bold; margin-bottom: 4px; }
#help-overlay .help-title span { font-weight: normal; opacity: 0.6; }
#help-overlay th { text-align: left; padding-top: 6px; opacity: 0.7; font-weight: normal; }
#help-overlay td { padding: 1px 10px 1px 0; vertical-align: top; }
#help-overlay td:first-child { white-space: nowrap; font-weight: bold; }

/* Photo of a picked camera: bottom left */
#frustum-thumb {
  display: none;
  position: absolute; left: 10px; bottom: 10px; z-index: 5;
  width: 240px;
  background: var(--panel-bg); color: var(--ink);
  border: 1px solid var(--panel-border); border-radius: 6px;
  box-shadow: 0 2px 8px var(--panel-shadow);
  padding: 6px; font: 11px var(--font-mono);
}
#frustum-thumb img { display: block; width: 100%; max-height: 160px; object-fit: contain; background: #000; border-radius: 4px; }
#frustum-thumb .thumb-row { display: flex; gap: 6px; align-items: center; justify-content: space-between; margin-top: 4px; }
#frustum-thumb .thumb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#frustum-thumb .thumb-tag { padding: 0 4px; border-radius: 3px; color: #000; }
#frustum-thumb .thumb-tag.train { background: #ffcc22; }
#frustum-thumb .thumb-tag.val   { background: #00ffff; }
#frustum-thumb button { font: inherit; cursor: pointer; }

/* ── inspector: the controls of the current phase ───────────────── */
#go-inspector {
  grid-area: inspector; display: flex; flex-direction: column; min-height: 0;
  background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 8px;
}
#phase-head { display: flex; align-items: baseline; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--panel-border); }
#phase-title { font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 13px; }
#phase-summary { font: 11px var(--font-mono); color: var(--ink-dim); margin-left: auto; text-align: right; }
#phase-body { flex: 1; overflow-y: auto; padding: 4px 12px 8px; }
#phase-body > section { display: none; }
#phase-body > section.shown { display: block; }
#phase-body .hint { font-size: 12px; color: var(--ink-dim); margin: 6px 0 8px; }
#phase-body .dome-preview { width: 100%; border: 1px solid var(--line, #444); border-radius: 4px; }
#phase-body .actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; margin: 4px 0 10px; }
#phase-body .actions .wide { grid-column: 1 / -1; }
#go-inspector .button, #phase-foot button {
  height: 30px; min-width: 0; padding: 0 10px; font-size: 13px; border-width: 1px;
  display: flex; align-items: center; justify-content: center; box-sizing: border-box; white-space: nowrap;
}
#go-inspector .button:disabled, #phase-foot button:disabled { opacity: 0.45; cursor: not-allowed; }
#phase-foot { display: flex; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--panel-border); }
#phase-foot:empty { display: none; }
#phase-foot button { flex: 1 1 0; overflow: hidden; text-overflow: ellipsis; cursor: pointer; border-radius: var(--radius-btn); border-style: solid;
                     border-color: var(--btn-border); background: var(--btn-bg); color: var(--btn-fg); }
#phase-foot button.primary { flex-grow: 1.4; background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
#phase-foot button:not(:disabled):hover { filter: brightness(1.08); }
.skal-row.skal-readonly .skal-btn { opacity: 0.45; pointer-events: none; }

/* The controls (common/controls.js) in the inspector and the view popover: flat sections with a
   title bar instead of boxes in boxes, one line per control (label left, control right) */
.gui-host .skal-gui, #view-popover .skal-gui { position: static; width: 100%; max-width: 100%; }
.gui-host .skal-gui { background: none; border: none; border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; overflow: visible; }
.gui-host .skal-gui-body { padding: 0; gap: 0; }
#view-popover .skal-gui-body { padding: 4px 10px 8px; gap: 0; }
.group-title,
.gui-host .skal-folder-title, #view-popover .skal-folder-title {
  display: flex; justify-content: space-between; align-items: center;
  font: 600 11px var(--font-ui); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-dim);
}
.group-title { padding: 8px 0 2px; border-top: 1px solid var(--panel-border); margin-top: 4px; }
.gui-host .skal-folder, #view-popover .skal-folder { border-left: none; padding: 8px 0; gap: 7px; border-top: 1px solid var(--panel-border); }
.gui-host .skal-folder-body, #view-popover .skal-folder-body { gap: 7px; }
.gui-host .skal-folder:hover > .skal-folder-title, #view-popover .skal-folder:hover > .skal-folder-title { color: var(--ink); }
#view-popover .skal-folder:first-child { border-top: none; }
/* a folder in a folder (Project folder > On serve.py): indented, no rule */
.gui-host .skal-folder .skal-folder { border-top: none; padding: 2px 0 0 10px; border-left: 2px solid var(--panel-border); }
.gui-host .skal-folder .skal-folder > .skal-folder-title { text-transform: none; letter-spacing: 0; font-size: 12px; }

.gui-host .skal-row-select, .gui-host .skal-row-text:not(.skal-readonly),
#view-popover .skal-row-select, #view-popover .skal-row-text { flex-direction: row; align-items: center; gap: 8px; }
.gui-host .skal-row-select > .skal-row-label, .gui-host .skal-row-text:not(.skal-readonly) > .skal-row-label,
#view-popover .skal-row-select > .skal-row-label, #view-popover .skal-row-text > .skal-row-label { flex: 0 0 42%; }
.gui-host .skal-row-select select, .gui-host .skal-row-text input,
#view-popover .skal-row-select select, #view-popover .skal-row-text input { flex: 1; min-width: 0; padding: 2px 4px; font-size: 12px; }
.gui-host .skal-row-slider, #view-popover .skal-row-slider {
  display: grid; grid-template-columns: 42% minmax(0, 1fr) 4.5em; column-gap: 8px; align-items: center;
}
.gui-host .skal-row-slider .skal-row-header, #view-popover .skal-row-slider .skal-row-header { display: contents; }
.gui-host .skal-row-slider .skal-row-label, #view-popover .skal-row-slider .skal-row-label { grid-column: 1; grid-row: 1; }
.gui-host .skal-row-slider input[type=range], #view-popover .skal-row-slider input[type=range] { grid-column: 2; grid-row: 1; }
.gui-host .skal-row-slider .skal-readout, #view-popover .skal-row-slider .skal-readout { grid-column: 3; grid-row: 1; text-align: right; overflow: hidden; text-overflow: ellipsis; }
.gui-host .skal-row-label, #view-popover .skal-row-label { font-size: 12px; }
/* read-only values (status, source): the label over a one-line value */
.gui-host .skal-row-text.skal-readonly { gap: 1px; }
.gui-host .skal-row-text.skal-readonly input { text-overflow: ellipsis; }
.gui-host .skal-row-button button.skal-btn, #view-popover .skal-row-button button.skal-btn {
  padding: 4px 8px; border-width: 1px; font-size: 12px; border-radius: var(--radius-btn);
}
/* `hidden` folders and rows (a photo set's filter, the other optimizers' folders): main.css sets their display */
.skal-folder[hidden], .skal-row[hidden] { display: none !important; }
/* a folder of actions (Cameras > Repair), two per row */
:is(.gui-host, #view-popover) .skal-folder.btn-grid > .skal-folder-body { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
:is(.gui-host, #view-popover) .skal-folder.btn-grid > .skal-folder-body > .skal-row:not(.skal-row-button) { grid-column: 1 / -1; }
:is(.gui-host, #view-popover) .skal-folder.btn-grid > .skal-folder-body > .skal-row-button:last-child:nth-child(odd) { grid-column: 1 / -1; }  /* an odd last button spans the row */

/* ── dock: timeline, charts, log ────────────────────────────────── */
#go-dock { grid-area: dock; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.dock-tabs { display: flex; gap: 2px; }
.dock-tabs button {
  font: 12px var(--font-ui); padding: 2px 12px; cursor: pointer; border: 1px solid var(--panel-border);
  border-bottom: none; border-radius: 6px 6px 0 0; background: var(--card-bg); color: var(--ink-dim);
}
.dock-tabs button.on { background: #121318; color: #8ef; border-color: #2a2d3a; }
.dock-pane {
  display: none; flex: 1; min-height: 0; position: relative;
  background: #121318; border: 1px solid #2a2d3a; border-radius: 0 6px 6px 6px; padding: 4px;
}
.dock-pane.shown { display: flex; align-items: center; justify-content: center; }
/* folded (a click on the open tab, shell.js): the tabs alone, the view takes the height */
#main-area.app.dock-folded { grid-template-rows: auto auto minmax(0, 1fr) auto; }
#main-area.app.dock-folded .dock-pane { display: none; }
/* charts and strip keep their aspect ratio inside the pane */
.dock-pane canvas { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 4px; }
/* the charts fill the pane, drawn at its size in device pixels (render.js drawTelemetryPanel): legible on a phone */
.dock-pane #side-canvas { width: 100%; height: 100%; max-width: none; max-height: none; }
#sfm-strip { background: #1b1d26; cursor: crosshair; }
#strip-hint { color: #889; font-size: 11px; }
.dock-pane[data-tab="timeline"].shown { flex-direction: column; gap: 4px; }
.dock-pane[data-tab="timeline"] canvas { min-height: 0; }
.strip-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: center; color: #99a; font-size: 11px; }
.strip-legend i { display: inline-block; width: 10px; height: 10px; margin: 0 3px 0 6px; border-radius: 2px; vertical-align: -1px; }
.strip-legend i.sel { background: rgba(255, 255, 255, 0.25); border: 1px solid #fff; }
.strip-legend i.arc { width: 12px; height: 6px; border: 1.5px solid; border-top: none; border-radius: 0 0 8px 8px; background: none; }
.dock-pane[data-tab="log"].shown { align-items: stretch; }

/* Log (src/ui/log.js): results of slow / invisible actions (snapshots, saves, loads, rebalances, SfM) */
#log-panel {
  flex: 1; display: flex; flex-direction: column; min-height: 0;
  color: #c8d0e0; font: 11px var(--font-mono);
}
#log-panel .log-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 4px 3px; border-bottom: 1px solid #2a2d3a; color: #8ef;
}
#log-panel .log-head button, #log-panel .log-head select {
  font: inherit; color: #889; background: none; border: 1px solid #2a2d3a; border-radius: 3px; cursor: pointer;
}
#log-panel .log-head select { margin-left: auto; margin-right: 6px; }
#log-body { flex: 1; min-height: 0; overflow-y: auto; padding: 3px 4px; white-space: pre-wrap; word-break: break-word; }
#log-body .log-line { line-height: 1.35; }
#log-body .log-time { color: #667; margin-right: 6px; }
#log-body .log-count { color: #889; margin-left: 6px; }
#log-body .log-ok    { color: #8f8; }
#log-body .log-warn  { color: #fd6; }
#log-body .log-error { color: #f88; }
/* filter (src/ui/log.js): one source, or the warnings and errors of all */
#log-body[data-filter="app"]   .log-line:not(.log-src-app),
#log-body[data-filter="sfm"]   .log-line:not(.log-src-sfm),
#log-body[data-filter="train"] .log-line:not(.log-src-train),
#log-body[data-filter="warn"]  .log-line:not(.log-warn):not(.log-error) { display: none; }
#log-body .log-src-sfm .log-time::after   { content: ' sfm'; color: #8ab; }
#log-body .log-src-train .log-time::after { content: ' train'; color: #a8b; }

/* ── narrow windows: one column, the page scrolls ───────────────── */
@media (max-width: 1000px) {
  #main-area.app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto 220px;
    grid-template-areas: "header" "stepper" "view" "inspector" "dock";
    height: auto;
  }
  #main-area.app.dock-folded { grid-template-rows: auto auto auto auto auto; }
  #go-header .go-sub { display: none; }
  #phase-body { max-height: 60vh; overscroll-behavior: contain; }  /* its scroll ends there, not in the page's */
}
/* phones: the status one line along the view's bottom (wrapped over the top it hid a third of the view) */
@media (max-width: 600px) {
  #info { top: auto; bottom: 6px; left: 6px; right: 6px; max-width: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10px; }
}

/* ── photo sets: the shooting guide and the advice after mapping (DESIGN-sfm §13) ── */
.sfm-advice, .shoot-guide { font-size: 12px; color: var(--ink-dim); margin: 4px 2px 8px; }
.sfm-advice b, .shoot-guide summary { color: var(--ink); }
.sfm-advice ul, .shoot-guide ul { margin: 4px 0; padding-left: 18px; }
.sfm-advice li, .shoot-guide li { margin: 2px 0; }
.shoot-guide summary { cursor: pointer; }