/* Vision Studio - layout on top of shared demo.css */

/* Never let the shell overflow the viewport horizontally. */
.app { width: 100%; max-width: 100vw; overflow-x: hidden; }

/* The hidden attribute must win over the display:grid/flex rules below,
   otherwise the inactive Calculators/3D workspaces stay in the flex column
   (each flex:1) and steal most of the height. */
[hidden] { display: none !important; }

.workspace.studio {
    grid-template-columns: minmax(230px, 280px) minmax(0, 1fr) minmax(260px, 320px);
    /* Fill the available height so the viewer/panels stretch down instead of
       collapsing to the (short) panel content with an empty void below. */
    grid-template-rows: minmax(0, 1fr);
}
/* Allow all three tracks to shrink instead of forcing horizontal overflow. */
.workspace.studio > * { min-width: 0; }
.panel { min-width: 0; }

.tabs .tab { font-weight: 600; }

.hist { width: 100%; height: 80px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; display: block; margin-bottom: 12px; }
.badge-soon { background: rgba(124,92,255,0.12); border: 1px solid var(--accent-2); color: var(--accent-2); padding: 6px 14px; font-size: 0.8rem; }

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

/* Calculators */
.calc-workspace {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 18px;
    align-content: start;
}
.calc-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px;
}
.calc-card h2 { font-size: 1rem; margin-bottom: 4px; }
.calc-card .formula { font-family: ui-monospace, monospace; font-size: 0.78rem; color: var(--accent); margin-bottom: 14px; }
.calc-card .field { margin-bottom: 10px; }
.calc-card label { color: var(--muted); }
.calc-out {
    margin-top: 12px;
    padding: 12px;
    background: var(--bg);
    border: 1px solid var(--border-hi);
    border-radius: 8px;
    font-variant-numeric: tabular-nums;
}
.calc-out .big { font-size: 1.4rem; font-weight: 700; color: var(--text); }
.calc-out .sub { font-size: 0.8rem; color: var(--muted); margin-top: 4px; }
.subtabs { display: flex; gap: 6px; margin-bottom: 12px; }

/* 3D height-map workspace */
.threed-workspace {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
}
.td-bar {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
}
.td-bar .field-sm { width: 86px; }
.td-bar .field-sm input, .td-bar .field-sm select { padding: 5px 6px; }
.td-toggle { display: flex; gap: 4px; }
.td-status { color: var(--muted); font-size: 0.8rem; align-self: center; margin-left: auto; }

.td-main {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
    min-height: 0;
}
.td-main > * { min-width: 0; min-height: 0; }
.td-viewer { position: relative; background: #06080b; overflow: hidden; }
.td-gl { position: relative; background: #06080b; overflow: hidden; }
.td-gl canvas { display: block; width: 100%; height: 100%; }
.td-panel { border-left: 1px solid var(--border); overflow-y: auto; }

.td-msg {
    position: absolute;
    left: 50%;
    top: 70px;
    transform: translateX(-50%);
    max-width: min(560px, 80vw);
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--border-hi);
    border-radius: 10px;
    padding: 12px 18px;
    color: var(--text);
    font-size: 0.9rem;
    line-height: 1.5;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    z-index: 20;
}
.td-msg.error { border-color: #e5534b; color: #ffb4ae; background: #2a1514; }

@media (max-width: 1100px) {
    .threed-workspace { height: auto; }
    .td-main { grid-template-columns: 1fr; }
    .td-viewer, .td-gl { height: 60vh; }
}

/* Pipeline steps */
.pipeline { display: flex; flex-direction: column; gap: 8px; }
.pstep { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.pstep.on { border-color: var(--border-hi); }
.pstep-head { display: flex; align-items: center; gap: 8px; }
.pstep-head label { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; cursor: pointer; flex: 1; }
.pstep-head input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); }
.pstep-ctrls { display: flex; gap: 4px; }
.pstep-ctrls button { background: var(--bg); border: 1px solid var(--border-hi); color: var(--muted); width: 22px; height: 22px; border-radius: 5px; cursor: pointer; font-size: 0.8rem; line-height: 1; padding: 0; }
.pstep-ctrls button:hover { border-color: var(--accent); color: var(--text); }
.pstep-param { margin-top: 8px; }
.pstep-param label { display: flex; justify-content: space-between; font-size: 0.74rem; color: var(--muted); margin-bottom: 4px; }
.pstep-param input[type=range] { width: 100%; accent-color: var(--accent-2); }

.addbar { position: relative; }
.addmenu { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.addmenu button { font-size: 0.76rem; }

/* Results table */
.results { font-size: 0.82rem; }
.results table { width: 100%; border-collapse: collapse; }
.results td { padding: 4px 0; border-bottom: 1px solid var(--border); }
.results td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

.analysis-list { display: flex; flex-direction: column; gap: 6px; }
.analysis-btn { text-align: left; }

@media (max-width: 1100px) {
    body { overflow: auto; }
    .app { height: auto; min-height: 100vh; }
    .workspace.studio { grid-template-columns: 1fr; grid-template-rows: auto; }
    .workspace.studio .viewer { height: 60vh; }
    .panel { max-height: none; }
}