/* Shared design controls, for the desktop panel and mobile sheet. */
.panel { background: #fafcf9; scrollbar-width: thin; scrollbar-color: #c1d1c7 transparent; }
.panel .context-note { color: #698075; font-size: 11px; line-height: 1.55; }
.panel .section-head { margin-top: 28px; padding-top: 19px; border-top: 1px solid #dfe7df; }
.panel .section-head h3 { font-size: 13px; font-weight: 650; }
.panel .section-head span { color: #7f9488; font-size: 10px; }
.panel .lead { margin: 14px 0 20px; color: #698075; font-size: 12px; }
.panel .rule { display: none; }
.panel .view-switch { background: #eaf0e9; padding: 4px; }
.panel .view-switch button { min-height: 35px; font-family: inherit; }
.panel .option { background: #fff; border-color: #dce6dd; padding: 10px 12px; }
.panel .option.active { border-color: #62947b; background: #f0f6ed; box-shadow: inset 3px 0 #62947b; }
.panel .option small { color: #758b7e; }
.panel .depth { padding-top: 17px; }
.panel .depth label { font-size: 11px; font-weight: 600; align-items: center; gap: 12px; }
.panel .depth output { padding: 3px 7px; border-radius: 5px; background: #eaf2e7; color: #365f47; font-variant-numeric: tabular-nums; white-space: nowrap; }
.panel input, .panel select, .panel button { font-family: inherit; }
.panel input[type="text"], .panel input[type="number"], .panel select {
  min-height: 39px; min-width: 0; max-width: 100%; padding: 9px 11px;
  border: 1px solid #cbd9ce; border-radius: 7px; background: #fff; color: #284b37; font-size: 12px;
}
.panel select { padding-right: 26px; }
.panel input::placeholder { color: #8c9c91; }
.panel input[type="range"] { accent-color: #477c5e; cursor: pointer; }
.panel button:not(.option):not(.variant-explorer-launch):not(.sheet-handle):not([role="tab"]):not([data-form]):not([data-layer]):not([data-shape]):not([data-result]):not([data-variant]) {
  min-height: 36px; padding: 8px 11px; border: 1px solid #c7d7ca; border-radius: 7px;
  background: #f0f5ed; color: #345a42; font-size: 11px; font-weight: 600; cursor: pointer;
}
.panel button:disabled, .panel select:disabled { opacity: .45; cursor: default; }
.panel button:not(:disabled):hover { filter: brightness(.97); }
.panel :is(input, select, button, summary):focus-visible { outline: 2px solid #408865; outline-offset: 3px; }
.panel details { margin-top: 17px; border: 1px solid #dce5db; border-radius: 9px; background: #f3f7ef; padding: 0 13px; }
.panel details > summary { display: flex; align-items: center; gap: 8px; padding: 13px 0; color: #42624b; font-size: 11px; font-weight: 600; list-style: none; cursor: pointer; }
.panel details > summary::-webkit-details-marker { display: none; }
.panel details > summary::after { content: '+'; margin-left: auto; font-size: 17px; font-weight: 400; }
.panel details[open] > summary::after { content: '−'; }
.panel details > summary span { color: #829681; font-size: 10px; font-weight: 400; }
.panel details[open] { padding-bottom: 13px; }
.panel details > .context-note { margin-top: 0; }
.panel .single-study-presets { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; margin: 12px 0 0; }
.panel .single-study-presets button { padding: 7px 0 !important; min-height: 33px !important; font-size: 10px !important; border-radius: 5px !important; }
.panel .preset-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.panel .preset-field label { grid-column: 1 / -1; font-size: 11px; color: #506d58; }
.save-design-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; margin-top: 13px; }
.panel #save-scenario { background: #315e43; color: #fff; border-color: #315e43; }
.saved-design-row { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 18px; }
.saved-design-row > label, .saved-design-row > select { grid-column: 1 / -1; width: 100%; }
.saved-design-row > label { color: #506d58; font-size: 11px; }
.panel #delete-scenario { color: #98674e; background: transparent; }
.design-file-actions { display: flex; gap: 7px; margin-top: 14px; }
.design-file-actions > * { flex: 1; }
.import-design-button { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: 36px; padding: 8px 11px; border: 1px solid #c7d7ca; border-radius: 7px; background: #f0f5ed; color: #345a42; font-size: 11px; font-weight: 600; cursor: pointer; }
.import-design-button input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.import-design-button:focus-within { outline: 2px solid #408865; outline-offset: 3px; }
.panel #export-model { width: 100%; margin-top: 16px; background: transparent; }
.panel .cost-row { font-size: 11px; color: #58725e; }
.panel .cost-row b { font-weight: 600; }
.panel .model-notes { background: transparent; }
.panel a { color: #437852; font-size: 11px; text-underline-offset: 3px; }
.panel .pending { padding: 14px; border: 1px solid #e0e7d9; border-radius: 9px; background: #f2f5eb; }
.panel .pending b { font-size: 11px; }
.panel .pending p { font-size: 11px; }
@media (max-width: 760px) {
  .panel input[type="text"], .panel input[type="number"], .panel select { font-size: 16px; }
  .panel .sheet-page > .section-head:first-child { padding-top: 0; border-top: 0; }
}
