/* 3D design page (on top of ../style.css) */
.navlink { color: var(--muted); text-decoration: none; font-weight: 600; padding: 6px 10px; border-radius: 8px; }
.navlink:hover { color: var(--text); background: var(--panel-2); }
.navlink.active { color: var(--text); background: var(--accent-soft); }
.small { font-size: 0.8rem; }
.span2 { grid-column: 1 / -1; }

.dlayout { grid-template-columns: minmax(320px, 380px) minmax(0, 1fr); }
.toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 8px; }
.tools { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.tool {
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text); border-radius: 8px;
  padding: 6px 10px; font-weight: 600; font-size: 0.84rem; cursor: pointer;
}
.tool:hover { border-color: var(--muted); }
.tool.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.dview { height: min(68vh, 680px); min-height: 360px; position: relative; outline: none; }
.dview canvas { display: block; width: 100% !important; height: 100% !important; touch-action: none; }
.view-hint { padding: 6px 12px; font-size: 0.82rem; color: var(--muted); border-top: 1px solid var(--line); min-height: 1.6em; }
.sunbar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; padding: 8px 12px 12px; border-top: 1px solid var(--line); }
.sunbar .field { min-width: 90px; }
.sunbar .field.grow { flex: 1; min-width: 200px; }
.sunbar #s-day { width: 70px; }
.sunbar input[type="range"] { width: 100%; accent-color: var(--accent); }
#s-time { color: var(--text); font-variant-numeric: tabular-nums; }

.objlist { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow: auto; display: flex; flex-direction: column; gap: 1px; }
.obj button { width: 100%; display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 5px 6px; border-radius: 7px; cursor: pointer; text-align: left; }
.obj button:hover { background: var(--panel-2); }
.obj.active button { background: var(--accent-soft); }
.obj.ctx .nm { color: var(--muted); }
.obj .nm { font-size: 0.86rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.obj .mt { margin-left: auto; font-size: 0.76rem; color: var(--muted); white-space: nowrap; }
.k { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.k-field { background: #1d3557; }
.k-building { background: #b4553d; }
.k-tree { background: #4f8f3a; border-radius: 50%; }
.k-mast { background: #707880; }
.props-info { white-space: pre-line; font-size: 0.82rem; color: var(--muted); margin-top: 10px; }
.row-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.btn.danger { color: var(--danger); }
.results { display: flex; flex-direction: column; gap: 14px; }
.stale { font-size: 0.8rem; color: var(--danger); align-self: center; }
.heat-legend { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--muted); margin-top: 10px; flex-wrap: wrap; }
.heat-bar { width: 120px; height: 10px; border-radius: 4px; background: linear-gradient(90deg, #2eb84d, #ebb838, #eb3a2a); }
@media (max-width: 900px) {
  .dview { height: 60vh; }
}
.design .calc-card { position: static; }
.check.rng input[type="range"] { width: 90px; accent-color: var(--accent); }
body.waiting, body.waiting .dview canvas { cursor: progress !important; }
.tool.sam { border-style: dashed; }
.toolbar .check { margin: 0 6px; }
.field-result { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; padding: 8px 10px; border-radius: 8px;
  background: var(--accent-soft); font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.seg { display: flex; gap: 0; margin-bottom: 10px; }
.seg .btn { flex: 1; border-radius: 0; }
.seg .btn:first-child { border-radius: 8px 0 0 8px; }
.seg .btn:last-child { border-radius: 0 8px 8px 0; }
.seg .btn.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.chart-mode { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.chart-mode .seg { margin: 0; }
.span-charts { grid-column: 1 / -1; }
.tip { position: fixed; z-index: 3000; pointer-events: none; background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: 0.82rem; line-height: 1.4;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); font-variant-numeric: tabular-nums; }
.chart-mode .seg .btn { white-space: nowrap; }
.objects-card summary { cursor: pointer; list-style: none; margin-bottom: 0; }
.objects-card summary::-webkit-details-marker { display: none; }
.objects-card summary h2::before { content: "\25B8"; display: inline-block; margin-right: 6px; transition: transform 0.15s; color: var(--muted); }
.objects-card[open] summary h2::before { transform: rotate(90deg); }
.objects-card[open] summary { margin-bottom: 10px; }
.popup { position: fixed; z-index: 2500; width: 300px; max-width: calc(100vw - 16px); background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22); padding: 10px 12px 12px; }
.popup-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.popup .grid2 { gap: 8px 10px; }
.popup-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }