/* TMM-only layout; shared RCWA styles remain independent. */
.home-page { background:#f3f4f6; color:#222; font-size:14px; }
.home-page .page-container { max-width:1500px; padding:24px 32px; margin:0 auto; border:0; overflow:visible; }
/* Original centered, bordered masthead and navigation, sized to this layout. */
.home-page .site-header { display:block; text-align:center; border:2px solid #cfcfcf; border-radius:3px; background:white; padding:22px 16px; }
.home-page .site-header h1 { margin:0; font-size:30px; line-height:1.25; letter-spacing:normal; }
.home-page .header-caption { display:block; margin-top:6px; color:#666; font-size:13px; }
.home-page .site-nav { margin-top:12px; border:2px solid #cfcfcf; border-radius:3px; padding:8px 12px; background:white; }
.home-page .site-nav ul { justify-content:center; flex-wrap:wrap; margin:0; padding:0; gap:8px 24px; }
.home-page .site-nav a { padding:6px 10px; display:block; color:#0645ad; text-decoration:none; }
.home-page .site-nav a.active { color:#0645ad; background:none; font-weight:600; }
.home-page .site-nav a:hover { text-decoration:underline; }
.home-page .site-nav a:focus-visible { outline:2px solid #0645ad; outline-offset:2px; }
.home-page .layout-grid { grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-areas:'section materials plots'; grid-template-rows:auto; align-items:stretch; gap:24px; margin:12px 0 0; }
.home-page .main-section, .home-page .material-selection, .home-page .preview, .home-page #tmm-results-panel, .home-page .configuration-summary { background:white; border:2px solid #cfcfcf; border-radius:0; padding:16px; box-shadow:none; }
.home-page .section-title { margin:0; font-size:18px; font-weight:650; }
.home-page .section-description { margin:6px 0 18px; color:#666; font-size:13px; }
.home-page .parameters-form { gap:18px; }
.home-page .radio-container { flex-direction:row !important; flex-wrap:wrap; gap:14px; }
.home-page .radio-group { width:auto; padding:0; }
.home-page .panels-row { display:flex; flex-direction:column; gap:18px; }
.home-page .panels-row .left-panels, .home-page .panels-row .right-panels { width:100%; flex:none; gap:18px; }
.home-page .panel, .home-page .options-box { border:2px solid #cfcfcf; padding:10px; background:#f3f3f3; }
.home-page .panel-inner { display:block; }
.home-page .range-panel .panel-left { width:auto; justify-content:flex-start; background:none; border:0; padding:0 0 8px; font-weight:600; }
.home-page .range-panel .panel-right { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:0; }
.home-page .panel-row, .home-page .small-panel .small-row { display:flex; flex-direction:column; align-items:stretch; gap:6px; padding:0; margin:0; }
.home-page .panel-key, .home-page .small-panel label { width:auto; flex:0 0 auto; background:none; border:0; padding:0; text-align:left; color:#666; font-size:12px; }
.home-page .small-panel { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.home-page input:not([type=checkbox]):not([type=radio]), .home-page select { font:inherit; min-width:0; max-width:100%; min-height:38px; border:1px solid #bbb; border-radius:3px; padding:8px 10px; background:#fff9c4; color:#222; box-sizing:border-box; }
.home-page input:disabled, .home-page select:disabled { background:#eee; color:#888; cursor:default; }
.home-page input:focus-visible, .home-page select:focus-visible, .home-page button:focus-visible, .home-page summary:focus-visible { outline:2px solid #3a70d6; outline-offset:2px; }
.home-page input[type=checkbox], .home-page input[type=radio] { accent-color:#3267c8; }
.home-page .options-title { margin-bottom:12px; }
.home-page .options-body { gap:12px; }
.home-page .aside-controls { display:grid; grid-template-columns:110px minmax(0,1fr); align-items:center; gap:10px; }
.home-page .aside-controls label, .home-page .aside-controls select { margin:0; }
.home-page .control-guide { margin:18px 0; color:#666; font-size:12px; }
.home-page summary { cursor:pointer; }
.home-page .control-guide p { line-height:1.7; }
.home-page .material-selection-panel { margin:22px 0 0; border:0; border-top:1px solid #ddd; padding:20px 0 0; background:none; }
.home-page .material-search { padding:0.4rem 0.6rem; border-radius:4px; }
.home-page .material-search input { border:0; box-shadow:none; background:none; }
.home-page .workflow-panel { padding:16px 0 0; margin-top:18px; border:0; border-top:1px solid #ddd; background:none; }
.home-page .workflow-panel summary { font-weight:600; }
.home-page .workflow-panel .small-row { display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.home-page .structure-preview { display:grid; grid-template-columns:minmax(0,1fr); grid-template-areas:'layers' 'summary'; align-items:start; gap:24px; border:0; padding:0; background:none; }
.home-page .structure-preview > .material-selection { grid-area:layers; min-width:0; }
.home-page .structure-preview > .preview { grid-area:diagram; min-width:0; width:auto; }
.home-page .structure-preview > .workflow-panel { grid-area:summary; min-width:0; margin:0; }
.home-page .editor-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:16px; }
.home-page .editor-heading .layers-control { display:flex; flex-direction:column; align-items:flex-start; gap:6px; font-size:12px; width:auto; margin:0; }
.home-page .layers-control select { width:85px; }
.home-page .material-selection .ms-grid { grid-template-columns:44px minmax(0,1fr) 115px; max-height:none; overflow:visible; gap:14px 10px; align-items:start; }
.home-page .ms-col-label { border:0; background:none; color:#666; font-size:11px; text-transform:uppercase; letter-spacing:.04em; padding:0 0 10px; border-bottom:1px solid #ddd; }
.home-page .ms-col-number { display:flex; align-items:center; justify-content:center; height:38px; min-height:38px; padding:5px; color:#222; background:#e6e6e6; border:1px solid #cfcfcf; font-size:14px; }
.home-page .ms-col-label:first-child { text-align:center; color:#222; font-size:14px; }
.home-page .ms-col-material > select { width:100%; height:38px; min-height:38px; padding:0.25rem; }
.home-page .ms-col-thickness > input { height:38px; min-height:38px; margin:0; }
.home-page .material-specific-fields { display:block; }
.home-page .silicon-settings { padding:12px; border:1px solid #cfcfcf; border-radius:3px; background:#f3f3f3; }
.home-page .silicon-settings summary { font-size:12px; line-height:1.6; color:#444; }
.home-page .silicon-settings label { font-size:12px; }
.home-page .silicon-settings select, .home-page .silicon-settings input:not([type=checkbox]) { display:block; width:100%; margin-top:6px; }
.home-page .silicon-settings button { font-size:11px; padding:7px 9px; border:1px solid #ccc; background:white; border-radius:3px; color:#444; }
.home-page .silicon-settings p { color:#666; font-size:12px; line-height:1.6; }
.home-page .layer-coherence { margin-top:10px; }
.home-page .layer-coherence[hidden] { display:none; }
.home-page .ms-actions { display:flex; flex-wrap:wrap; gap:8px; padding:16px 0 0; margin-top:22px; }
.home-page .action-btn, .home-page .material-chart-close { border:1px solid #ccc; background:white; border-radius:3px; padding:9px 14px; color:#444; cursor:pointer; flex:0 1 auto; }
.home-page #btn-calculate { margin-left:auto; background:#e6e6e6; border-color:#aaa; color:#222; font-weight:600; }
.home-page button:disabled { opacity:.5; cursor:default; }
.home-page .preview-header { background:none; border:0; padding:0 0 14px; color:#666; font-size:12px; text-transform:uppercase; letter-spacing:.05em; }
.home-page .preview-content { padding:0; min-height:0; }
.home-page .layer-stack { max-width:480px; margin:auto; }
.home-page #tmm-results-panel { grid-area:results; margin:0; }
.home-page #tmm-results-panel[hidden] { display:none; }
.home-page #tmm-results-panel .material-chart-wrap { height:420px; }
.home-page .material-chart-title { font-size:16px; }
.home-page [data-model-warnings] { color:#666; font-size:12px; line-height:1.6; }
.home-page .site-footer { border:0; background:none; color:#777; font-size:12px; padding:10px 0; }
@media(max-width:1200px) {
 .home-page .layout-grid { grid-template-columns:minmax(0,1fr); grid-template-areas:'section' 'materials' 'plots'; }
 .home-page .page-container { padding:18px; }
}
@media(max-width:520px) {
 .home-page .site-header { padding:18px 12px; }
 .home-page .main-section, .home-page .material-selection, .home-page .preview, .home-page #tmm-results-panel { padding:16px; }
 .home-page .material-selection .ms-grid { grid-template-columns:36px minmax(0,1fr) 80px; gap:10px 6px; }
 .home-page .editor-heading { flex-wrap:wrap; }
 .home-page #btn-calculate { margin-left:0; }
 .home-page #tmm-results-panel .material-chart-wrap { height:300px; }
}
.home-page #material-search { border:0; background:none; min-height:0; padding:1px 2px; }
.home-page .ms-col-label { text-transform:none; background:#e6e6e6; padding:7px; border:1px solid #cfcfcf; }
.home-page .workflow-panel[hidden] { display:none; }

@media(max-width:700px) {
 .home-page .structure-preview { grid-template-columns:minmax(0,1fr); grid-template-areas:'layers' 'summary'; }
}

/* Shared visual language with the RCWA panels. */
.home-page .main-section > .section-title,
.home-page .editor-heading,
.home-page .preview-header,
.home-page .summary-header,
.home-page #tmm-results-panel > .material-chart-heading {
 background:#e6e6e6;
 border:0;
 border-bottom:2px solid #cfcfcf;
 padding:8px;
 margin:0 0 12px;
 color:#222;
 font-size:0.9rem;
 font-weight:600;
 text-transform:none;
 letter-spacing:normal;
}
.home-page .editor-heading { flex-wrap:wrap; align-items:center; gap:10px; }
.home-page .editor-heading .section-title { font-size:0.9rem; font-weight:600; }
.home-page .editor-heading .section-description { margin:4px 0 0; font-size:12px; }
.home-page .editor-heading .layers-control { flex-direction:row; align-items:center; flex-wrap:wrap; }
.home-page .editor-heading .layers-control select { width:65px; min-height:0; padding:4px; }
.home-page .range-panel .panel-left,
.home-page .options-title {
 background:#e6e6e6;
 border-bottom:2px solid #cfcfcf;
 padding:8px;
 margin-bottom:10px;
 font-size:0.9rem;
}
.home-page .material-selection-panel,
.home-page .workflow-panel {
 border:2px solid #cfcfcf;
 padding:10px;
 background:#f3f3f3;
}
.home-page .material-selection-title,
.home-page .workflow-panel > summary {
 background:#e6e6e6;
 border-bottom:2px solid #cfcfcf;
 padding:8px;
 margin-bottom:10px;
 color:#222;
 font-size:0.9rem;
 font-weight:600;
}
.home-page .workflow-panel:not([open]) > summary { margin-bottom:0; }
.home-page .preview-content { min-height:200px; }

/* Editable bands retain the original structure preview's material colors. */
.home-page .material-selection .ms-grid { display:flex; flex-direction:column; align-items:stretch; gap:0; padding:0; border:1px solid #bbb; }
.home-page .stack-medium { display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px; margin:0; background:white; color:#2a4365; font-weight:500; }
.home-page .stack-medium span { color:#666; font-size:12px; font-weight:400; }
.home-page .stack-layer-row { width:100%; min-width:0; position:relative; display:grid; grid-template-columns:32px minmax(0,1fr) 32px; gap:4px 6px; align-items:center; min-height:84px; padding:8px; box-sizing:border-box; background:var(--layer-color,#f3f3f3); color:#2a4365; }
.home-page .stack-layer-row + .stack-layer-row { border-top:1px solid rgba(0,0,0,.2); }
.home-page .stack-layer-row .ms-col-number { grid-column:1; grid-row:1 / 3; height:28px; min-height:28px; padding:0; background:rgba(255,255,255,.5); border:1px solid rgba(0,0,0,.15); font-size:12px; }
.home-page .stack-layer-row .ms-col-material { grid-column:2; grid-row:1; min-width:0; padding:0; border:0; background:none; text-align:center; }
.home-page .stack-layer-row .material-choice { width:100%; height:32px; min-height:32px; padding:4px 22px 4px 8px; text-align:center; text-align-last:center; border:1px solid transparent; background:transparent; color:#20344e; font-weight:500; }
.home-page .stack-layer-row .material-choice option { background:white; color:#222; }
.home-page .stack-layer-row .material-choice:enabled:hover,
.home-page .stack-layer-row .material-choice:focus { background:rgba(255,255,255,.65); border-color:rgba(0,0,0,.25); }
.home-page .stack-layer-row .ms-col-thickness { grid-column:2; grid-row:2; display:flex; align-items:center; justify-content:center; gap:5px; font-size:12px; }
.home-page .stack-layer-row .ms-col-thickness input { flex:0 0 11ch; width:11ch; max-width:11ch; height:28px; min-height:28px; padding:3px 6px; text-align:center; background:rgba(255,249,196,.8); border-color:rgba(0,0,0,.2); font-size:12px; }
.home-page .stack-layer-row .ms-col-thickness input:disabled { background:transparent; border-color:transparent; color:inherit; opacity:1; }
.home-page .stack-layer-row .material-specific-fields { text-align:left; }
.home-page .stack-backing { margin-bottom:8px; }
.home-page .stack-backing::after { content:''; position:absolute; left:-1px; right:-1px; bottom:-8px; height:8px; background:repeating-linear-gradient(45deg,#ccc,#ccc 5px,#999 5px,#999 10px); }
.home-page .backing-label { font-size:12px; font-style:italic; }
.home-page .backing-label[hidden], .home-page .ms-col-thickness input[hidden], .home-page .stack-medium[hidden], .home-page .stack-backing .thickness-unit { display:none; }

/* Materials sit between the equal-width settings and stack columns. */
.home-page .materials-column { grid-area:materials; min-width:0; background:white; border:2px solid #cfcfcf; padding:16px; }
.home-page .materials-column > .material-selection-panel { margin-top:0; }
.home-page .main-section, .home-page .structure-preview { min-width:0; }

/* All chart canvases share the third column. */
.home-page .materials-column > .structure-preview { margin-top:0; }
.home-page .plots-column { grid-area:plots; min-width:0; padding:16px; background:white; border:2px solid #cfcfcf; }
.home-page .plots-column > .section-title { background:#e6e6e6; border-bottom:2px solid #cfcfcf; padding:8px; font-size:0.9rem; }
.home-page .plots-column .material-chart-panel { min-width:0; margin:16px 0 0; padding:10px; border:1px solid #cfcfcf; }
.home-page .plots-column .material-chart-wrap,
.home-page .plots-column #tmm-results-panel .material-chart-wrap { height:280px; }
.home-page .workflow-panel .small-row[hidden],
.home-page .plots-column .material-chart-panel[hidden] { display:none; }

.home-page .plots-column > .configuration-summary { margin:0 0 18px; }

/* Keep model settings compact while allowing access to every control. */
.home-page #si-model-panel, .home-page #config-summary { max-height:none; overflow:visible; box-sizing:border-box; }
.home-page .silicon-model-content { max-height:230px; }
.home-page #config-summary > .summary-content { max-height:310px; }
.home-page .silicon-model-content, .home-page #config-summary > .summary-content { overflow-y:auto; scrollbar-gutter:stable; box-sizing:border-box; padding-right:10px; }

.home-page .structure-preview > .editor-actions { grid-column:1; margin:0; padding-top:12px; }
.home-page .simulation-actions { margin:0 0 18px; padding-top:12px; }

/* Outer columns scroll; the middle column reserves space for its actions. */
.home-page .layout-grid { --column-height:min(940px, calc(100dvh - 32px)); }
.home-page .layout-grid > .main-section,
.home-page .layout-grid > .materials-column,
.home-page .layout-grid > .plots-column {
 height:var(--column-height); min-height:0; box-sizing:border-box;
}
.home-page .layout-grid > .main-section,
.home-page .layout-grid > .plots-column { overflow-y:auto; scrollbar-gutter:stable; }
.home-page .materials-column { display:flex; flex-direction:column; }
.home-page .materials-column > .structure-preview {
 flex:1; min-height:0; grid-template-rows:minmax(0,max-content) auto auto;
 align-content:start; gap:16px;
}
.home-page .structure-preview > .material-selection {
 min-height:0; height:100%; max-height:640px; align-self:stretch; box-sizing:border-box;
 display:flex; flex-direction:column;
}
.home-page .material-selection .editor-heading,
.home-page .material-selection .stack-medium { flex-shrink:0; }
.home-page .material-selection .ms-grid {
 min-height:0; max-height:480px; overflow:auto; flex:0 1 auto;
}
.home-page .stack-layer-row { flex-shrink:0; }
.home-page .silicon-model-content { max-height:min(230px, 22dvh); }
.home-page .editor-actions { flex-shrink:0; }
@media(max-width:1200px), (max-height:650px) {
 .home-page .layout-grid > .main-section,
 .home-page .layout-grid > .materials-column,
 .home-page .layout-grid > .plots-column { height:auto; }
 .home-page .layout-grid > .main-section,
 .home-page .layout-grid > .plots-column { max-height:var(--column-height); }
}

/* Header is outside the scrollport, so content cannot pass behind it. */
.home-page .layout-grid > .main-section { display:flex; flex-direction:column; overflow:hidden; scrollbar-gutter:auto; }
.home-page .main-section > .section-title { position:static; flex-shrink:0; }
.home-page .simulation-settings-content { min-height:0; overflow-y:auto; scrollbar-gutter:stable; }


/* Contextual help is available on hover, keyboard focus, and tap. */
.home-page .control-help-row, .home-page .control-help-label { display:flex; align-items:center; gap:6px; position:relative; }
.home-page .options-body { position:relative; }
.home-page .control-info { display:inline-flex; }
.home-page .info-button { width:18px; height:18px; padding:0; border:1px solid #777; border-radius:50%; background:white; color:#555; font:italic 12px Georgia,serif; cursor:help; }
.home-page .info-tooltip { display:none; position:absolute; left:0; top:100%; width:260px; max-width:calc(100vw - 100px); box-sizing:border-box; padding:10px; border:1px solid #aaa; border-radius:3px; background:#fff; color:#333; box-shadow:0 2px 6px #0002; font-size:12px; line-height:1.5; z-index:10; }
.home-page .control-info:hover .info-tooltip,
.home-page .control-info:focus-within .info-tooltip { display:block; }

/* Compact laptop workspace: fit the shell to the available browser viewport. */
@media (min-width:1050px) and (max-width:1500px) and (min-height:600px) {
 .home-page { font-size:12px; }
 .home-page .page-container { height:100dvh; min-height:0; width:100%; max-width:none; box-sizing:border-box; padding:10px 14px; display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; gap:8px; }
 .home-page .site-header { padding:8px 12px; }
 .home-page .site-header h1 { font-size:23px; }
 .home-page .header-caption { margin-top:2px; font-size:11px; }
 .home-page .site-nav { margin:0; padding:2px 8px; }
 .home-page .site-nav a { padding:4px 10px; }
 .home-page .layout-grid { margin:0; min-height:0; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:minmax(0,1fr); grid-template-areas:'section materials plots'; gap:12px; }
 .home-page .layout-grid > .main-section,
 .home-page .layout-grid > .materials-column,
 .home-page .layout-grid > .plots-column { height:100%; max-height:none; min-height:0; padding:10px; }
 .home-page .site-footer { margin:0; padding:0; font-size:10px; }
 .home-page .site-footer p { margin:0; }
 .home-page .section-description { margin:4px 0 10px; font-size:11px; }
 .home-page .parameters-form, .home-page .panels-row,
 .home-page .panels-row .left-panels, .home-page .panels-row .right-panels { gap:10px; }
 .home-page .panel, .home-page .options-box { padding:7px; }
 .home-page .options-body { gap:7px; }
 .home-page .aside-controls { grid-template-columns:95px minmax(0,1fr); gap:7px; }
 .home-page input:not([type=checkbox]):not([type=radio]), .home-page select { min-height:30px; padding:5px 7px; }
 .home-page .material-selection-panel { margin-top:12px; padding:7px; }
 .home-page .materials-column > .structure-preview { gap:10px; }
 .home-page .structure-preview > .material-selection { padding:10px; }
 .home-page .editor-heading { padding:6px; margin-bottom:6px; }
 .home-page .editor-heading .section-description { font-size:11px; }
 .home-page .stack-medium { padding:7px; }
 .home-page .stack-layer-row { min-height:72px; padding:5px; }
 .home-page .silicon-model-content { max-height:min(170px, 23dvh); }
 .home-page .workflow-panel .small-row { margin-top:8px; gap:4px; }
 .home-page .workflow-panel { padding:7px; }
 .home-page .control-guide { margin:10px 0; }
 .home-page #config-summary { padding:8px; }
 .home-page #config-summary > .summary-content { max-height:145px; }
 .home-page .simulation-actions { margin-bottom:10px; padding-top:8px; }
 .home-page .action-btn, .home-page .material-chart-close { padding:6px 9px; }
 .home-page .plots-column .material-chart-wrap,
 .home-page .plots-column #tmm-results-panel .material-chart-wrap { height:220px; }
}

.home-page #material-library-select { width:100%; background:#fff9c4; }

.home-page .stack-editor > .editor-heading { position:relative; justify-content:flex-start; gap:6px; }
.home-page .stack-editor > .layers-control { display:flex; justify-content:flex-start; flex-direction:row; align-items:center; flex-wrap:wrap; gap:8px; width:auto; margin:0 0 6px; flex-shrink:0; font-size:12px; }
.home-page .stack-editor > .layers-control select { width:65px; min-height:30px; padding:4px; }

/* Fit the stack to its column without accumulating nested side padding. */
.home-page .materials-column > .structure-preview { width:100%; }
.home-page .structure-preview > .material-selection { width:100%; padding:10px; box-sizing:border-box; }
.home-page .material-selection .ms-grid { width:100%; box-sizing:border-box; }
.home-page .stack-layer-row { max-width:100%; }

/* The heading and layer count sit above the bordered structure preview. */
.home-page .structure-preview > .stack-editor { grid-area:layers; display:flex; flex-direction:column; min-height:0; max-height:640px; height:100%; }
.home-page .stack-editor > .editor-heading, .home-page .stack-editor > .layers-control { flex-shrink:0; }
.home-page .stack-editor > .material-selection { display:flex; flex-direction:column; flex:0 1 auto; min-height:0; width:100%; box-sizing:border-box; padding:10px; }

/* Compact visual layer bands; physical thickness values are unchanged. */
.home-page .stack-layer-row { min-height:64px; padding:4px 8px; row-gap:2px; }
.home-page .stack-layer-row .material-choice { height:28px; min-height:28px; padding-top:2px; padding-bottom:2px; }
.home-page .stack-layer-row .ms-col-thickness input { height:24px; min-height:24px; padding-top:2px; padding-bottom:2px; }

.home-page .plots-column > #config-summary { border:0; padding:0; background:transparent; box-shadow:none; }

/* Match the settings panels' separation in the stack column. */
.home-page .materials-column > .structure-preview { gap:18px; }
.home-page .stack-editor > .layers-control { margin-bottom:18px; }

/* Consistent header and section spacing across the workspace. */
.home-page .main-section > .section-title { margin-bottom:18px; }
.home-page .simulation-settings-content > .section-description { margin:0 0 18px; }
.home-page #config-summary > .summary-header { margin-bottom:18px; }
.home-page .plots-column > #config-summary { margin-bottom:18px; }
.home-page .plots-column > .simulation-actions { margin:0 0 18px; padding-top:18px; }
.home-page .plots-column > .section-title { margin:0 0 18px; }
.home-page .plots-column > .section-description { margin:0 0 18px; }
.home-page .plots-content > .material-chart-panel { margin-top:0; margin-bottom:18px; }

/* Let the response chart use the full plot container width. */
.home-page .plots-column #tmm-results-panel { width:100%; min-width:0; box-sizing:border-box; padding:0; border:0; background:transparent; }
.home-page #tmm-results-panel .material-chart-heading { width:100%; box-sizing:border-box; }
.home-page #tmm-results-panel .material-chart-wrap { width:100%; min-width:0; }

/* One shared plot heading and tabs replace the individual panel headings. */
.home-page .plots-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; background:#e6e6e6; border-bottom:2px solid #cfcfcf; padding:8px; margin-bottom:12px; }
.home-page .plots-heading .section-title { font-size:0.9rem; min-width:0; }
.home-page #active-plot-close { flex-shrink:0; }
.home-page #plot-tabs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.home-page #plot-tabs button { border:1px solid #bbb; padding:6px 9px; background:white; color:#444; cursor:pointer; }
.home-page #plot-tabs button[aria-selected=true] { background:#e6e6e6; border-color:#777; font-weight:600; }
.home-page #plot-tabs[hidden], .home-page #plot-tabs button[hidden], .home-page #plots-empty[hidden], .home-page .plots-content .inactive-plot { display:none; }
.home-page .plots-content .material-chart-panel > .material-chart-heading { display:none; }
.home-page .plots-content > .material-chart-panel { width:100%; box-sizing:border-box; border:0; padding:0; background:transparent; }

.home-page #plot-material-control { margin-bottom:12px; }
.home-page #plot-material-control label { display:block; margin-bottom:6px; }
.home-page #plot-material-select { width:100%; }

/* Compact plot navigation and an aligned material picker. */
.home-page .plots-heading { margin-bottom:12px; }
.home-page #plot-tabs { gap:0; padding-bottom:0; border-bottom:1px solid #ccc; }
.home-page #plot-tabs button { border:0; border-bottom:2px solid transparent; background:transparent; padding:8px 12px; }
.home-page #plot-tabs button[aria-selected=true] { background:#f3f3f3; border-bottom-color:#666; }
.home-page #plot-material-control { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:10px; margin:0 0 16px; }
.home-page #plot-material-control[hidden] { display:none; }
.home-page #plot-material-control label { margin:0; font-size:12px; color:#555; }
.home-page #plot-material-select { min-height:32px; padding:5px 8px; }

/* Compact controls in the plot section. */
.home-page .plots-heading #active-plot-close { box-sizing:border-box; flex:0 0 48px; width:48px; height:24px; min-height:24px; max-height:24px; padding:0; font-size:11px; line-height:22px; }
.home-page #plot-material-control { grid-template-columns:auto minmax(0,260px); justify-content:center; gap:8px; }
.home-page #plot-material-select { height:26px; min-height:26px; padding:3px 6px; font-size:12px; }

/* The active chart fills the remaining height of the plotting column. */
.home-page .layout-grid > .plots-column { display:flex; flex-direction:column; }
.home-page .plots-column > :not(.plots-content) { flex-shrink:0; }
.home-page .plots-column > .plots-content { display:flex; flex-direction:column; flex:1 0 280px; min-height:280px; }
.home-page .plots-content > .material-chart-panel:not([hidden]):not(.inactive-plot) { display:flex; flex-direction:column; flex:1; min-height:0; margin-bottom:0; }
.home-page .plots-content .material-chart-wrap,
.home-page .plots-column #tmm-results-panel .material-chart-wrap { position:relative; flex:1; height:auto; min-height:220px; }
.home-page .plots-content .material-chart-wrap > canvas { position:absolute; inset:0; width:100% !important; height:100% !important; }

/* Use spare column height for library and model content. */
.home-page .simulation-settings-content { display:flex; flex-direction:column; flex:1; }
.home-page .simulation-settings-content > * { flex-shrink:0; }
.home-page .simulation-settings-content > .material-selection-panel { flex:1 0 auto; }
.home-page .materials-column > .structure-preview { grid-template-rows:minmax(0,max-content) minmax(0,1fr) auto; }
.home-page .structure-preview > .editor-actions { grid-row:3; }

/* A defined grid track gives model content a real scrollable height. */
.home-page .structure-preview > #si-model-panel { align-self:stretch; display:grid; grid-template-rows:auto minmax(0,1fr); height:100%; min-height:0; overflow:hidden; box-sizing:border-box; }
.home-page .structure-preview > #si-model-panel[hidden] { display:none; }
.home-page #si-model-panel > .summary-header { margin:0 0 10px; }
.home-page #si-model-panel > .silicon-model-content { height:auto; max-height:none; min-height:0; overflow-y:auto; box-sizing:border-box; padding-bottom:8px; }

/* Compact doping controls within the shared silicon model. */
.home-page #si-model-panel #si-dopant-field,
.home-page #si-model-panel #si-concentration-field { margin-top:8px; gap:4px; }
.home-page #si-model-panel #si-dopant-field label,
.home-page #si-model-panel #si-concentration-field label { font-size:12px; line-height:1.3; }
.home-page #si-model-panel #si-dopant,
.home-page #si-model-panel #si-concentration { flex:none; height:28px; min-height:28px; padding:3px 7px; font-size:12px; box-sizing:border-box; }

.home-page .silicon-doping-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; align-items:end; }
.home-page .silicon-doping-row > .small-row { min-width:0; }
.home-page .silicon-doping-row input,
.home-page .silicon-doping-row select { width:100%; }

/* Consistent rhythm throughout the silicon model content. */
.home-page #si-model-panel > .silicon-model-content { display:flex; flex-direction:column; gap:12px; }
.home-page #si-model-panel .silicon-model-content > * { flex-shrink:0; margin:0; }
.home-page #si-model-panel .small-row,
.home-page #si-model-panel #si-dopant-field,
.home-page #si-model-panel #si-concentration-field { margin:0; gap:6px; }
.home-page #si-model-panel .control-guide > summary { margin:0; }
.home-page #si-model-panel .control-guide p { margin:8px 0 0; }
.home-page #si-model-panel #si-shared-error:empty { display:none; }
.home-page #si-model-panel .silicon-doping-row:has(> [hidden]):not(:has(> :not([hidden]))) { display:none; }

.home-page #si-model-panel .silicon-model-choice { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:8px; }
.home-page .silicon-model-choice label { white-space:nowrap; font-size:12px; }
.home-page .silicon-model-choice select { width:100%; min-width:0; }

.home-page .model-information-title { font-weight:600; font-size:12px; color:#666; }

/* Footer echoes the bordered masthead. */
.home-page .site-footer { text-align:center; background:white; border:2px solid #cfcfcf; border-radius:3px; padding:14px 20px; margin-top:12px; color:#666; font-size:14px; }
.home-page .site-footer p { margin:0; }
@media (min-width:1050px) and (max-width:1500px) and (min-height:600px) {
 .home-page .site-footer { margin-top:0; padding:12px 16px; font-size:14px; }
}

.home-page .material-plot-empty { margin:24px 0; padding:24px 16px; text-align:center; color:#666; font-size:14px; line-height:1.5; }
.home-page .material-plot-empty[hidden] { display:none; }

/* Roomier desktop workspace; the compact laptop rules remain independent. */
@media (min-width:1501px) {
 .home-page { font-size:15px; }
 .home-page .page-container { width:85%; max-width:2200px; padding:24px 0; box-sizing:border-box; }
 .home-page .section-description,
 .home-page .panel-key, .home-page .small-panel label,
 .home-page .stack-editor > .layers-control,
 .home-page .control-guide, .home-page .model-information-title,
 .home-page .silicon-model-choice label,
 .home-page #si-model-panel #si-dopant-field label,
 .home-page #si-model-panel #si-concentration-field label,
 .home-page #plot-material-control label { font-size:14px; }
 .home-page .stack-layer-row .material-choice { font-size:15px; }
 .home-page .stack-layer-row .ms-col-thickness input,
 .home-page #si-model-panel #si-dopant,
 .home-page #si-model-panel #si-concentration,
 .home-page #plot-material-select { font-size:14px; min-height:30px; height:30px; }
 .home-page .stack-layer-row { min-height:96px; padding:10px 8px; row-gap:6px; }
 .home-page .summary-content { font-size:14px; }
 .home-page #config-summary > .summary-content { max-height:360px; }
 .home-page .simulation-settings-content > .material-selection-panel { flex:0 0 auto; }
 .home-page .plots-column > .plots-content { min-height:340px; flex-basis:340px; }
}

/* Give the structure editor more prominence on roomy desktop viewports. */
@media (min-width:1501px) and (min-height:800px) {
 .home-page .structure-preview > .stack-editor { min-height:420px; }
 .home-page .stack-editor > .material-selection { flex:1 1 auto; }
}

.home-page #config-summary > .summary-content { grid-template-columns:repeat(2,minmax(0,1fr)); }
.home-page #config-summary .summary-section { min-width:0; }
.home-page #btn-calculate { background:#d3d7dc; border-color:#89919b; font-weight:650; }
.home-page #btn-calculate:hover:enabled { background:#c3c9d0; }
.home-page #simulation-readiness { color:#666; font-size:12px; line-height:1.5; margin:0 0 12px; }
@media(max-width:520px) { .home-page #config-summary > .summary-content { grid-template-columns:minmax(0,1fr); } }

/* Fill tall desktop viewports, with the footer in the normal grid flow. */
@media (min-width:1501px) and (min-height:800px) {
 .home-page .page-container {
  height:100dvh; min-height:0; box-sizing:border-box;
  display:grid; grid-template-rows:auto auto minmax(0,1fr) auto;
  gap:12px; padding-top:24px; padding-bottom:24px;
 }
 .home-page .site-nav, .home-page .site-footer { margin:0; }
 .home-page .layout-grid {
  margin:0; min-height:0;
  grid-template-rows:minmax(0,1fr);
 }
 .home-page .layout-grid > .main-section,
 .home-page .layout-grid > .materials-column,
 .home-page .layout-grid > .plots-column {
  height:100%; min-height:0; max-height:none;
 }
}

.home-page .example-picker { margin-top:18px; padding:12px; border:1px solid #cfcfcf; background:#f3f3f3; }
.home-page .example-picker label { display:block; font-weight:600; margin-bottom:8px; }
.home-page .example-picker select { width:100%; }
.home-page .example-picker p, .home-page #silicon-model-empty { color:#666; font-size:12px; line-height:1.5; }
.home-page .example-picker p { margin:8px 0 0; }
.home-page #silicon-model-empty { grid-area:summary; margin:0; padding:12px; background:#f7f7f7; border:1px dashed #ccc; }
.home-page #silicon-model-empty[hidden] { display:none; }
.home-page .materials-column > .structure-preview:has(> #si-model-panel[hidden]) { grid-template-rows:minmax(0,max-content) auto auto; align-content:start; }
.home-page .plots-column > #plots-empty { flex:1; display:flex; align-items:center; justify-content:center; text-align:center; background:#f7f7f7; border:1px dashed #ddd; padding:24px; margin:0; }
.home-page .plots-column > #plots-empty[hidden] { display:none; }
.home-page .plots-column:has(> #plots-empty:not([hidden])) > .plots-content { display:none; }

/* Size model information to its content, retaining bounded internal scrolling. */
.home-page .materials-column > .structure-preview { grid-template-rows:minmax(0,max-content) minmax(0,max-content) auto; align-content:start; }
.home-page .structure-preview > #si-model-panel { height:auto; max-height:340px; align-self:start; }
.home-page #si-model-panel > .silicon-model-content { max-height:270px; }
.home-page #si-model-panel .model-information { display:flex; flex-direction:column; gap:10px; }
.home-page #si-model-panel .model-information p { margin:0; }
.home-page #si-shared-temperature { font-size:12px; color:#666; }
.home-page .model-limits { border-top:1px solid #ddd; padding-top:10px; }
.home-page .model-limits[hidden] { display:none; }
.home-page .model-limits p { margin:6px 0 0; }
.home-page .model-limits .info-tooltip { top:auto; bottom:100%; }

/* Match configuration dropdowns to the doping input height. */
.home-page #si-model,
.home-page #formulation,
.home-page #polarization,
.home-page #load-example,
.home-page .stack-editor > .layers-control #layers {
 height:28px; min-height:28px; box-sizing:border-box; padding:3px 7px;
}
@media (min-width:1501px) {
 .home-page #si-model,
 .home-page #formulation,
 .home-page #polarization,
 .home-page #load-example,
 .home-page .stack-editor > .layers-control #layers { height:30px; min-height:30px; }
}

.home-page #material-library-select,
.home-page #plot-material-select,
.home-page .stack-layer-row .material-choice {
 height:28px; min-height:28px; box-sizing:border-box; padding-top:3px; padding-bottom:3px;
}
@media (min-width:1501px) {
 .home-page #material-library-select,
 .home-page #plot-material-select,
 .home-page .stack-layer-row .material-choice { height:30px; min-height:30px; }
}

.home-page #layer-coherence-note { flex-shrink:0; margin:auto 0 0; padding-top:10px; font-size:12px; }
.home-page #layer-coherence-note[hidden] { display:none; }
.home-page #layer-coherence-note .info-button { flex-shrink:0; }
.home-page #layer-coherence-note .info-tooltip { top:auto; bottom:100%; }

/* Touch tablets need natural page height rather than the laptop viewport lock. */
@media (min-width:768px) and (max-width:1500px) and (hover:none) and (pointer:coarse) {
 .home-page .page-container { display:block; height:auto; min-height:100dvh; width:100%; padding:12px; box-sizing:border-box; }
 .home-page .site-nav { margin-top:10px; }
 .home-page .layout-grid { margin:12px 0 0; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-areas:'section materials' 'plots plots'; grid-template-rows:auto auto; align-items:start; gap:12px; }
 .home-page .layout-grid > .main-section,
 .home-page .layout-grid > .materials-column,
 .home-page .layout-grid > .plots-column { height:auto; max-height:none; min-height:0; overflow:visible; }
 .home-page .simulation-settings-content { overflow:visible; display:block; }
 .home-page .materials-column > .structure-preview { display:flex; flex-direction:column; height:auto; gap:18px; }
 .home-page .structure-preview > .stack-editor { flex:none; height:auto; min-height:0; max-height:none; width:100%; }
 .home-page .stack-editor > .material-selection { flex:none; height:auto; min-height:0; max-height:none; }
 .home-page .material-selection .ms-grid { flex:none; height:auto; max-height:400px; overflow:auto; }
 .home-page .structure-preview > #si-model-panel { flex:none; width:100%; height:auto; max-height:none; overflow:visible; }
 .home-page #si-model-panel > .silicon-model-content { height:auto; max-height:300px; overflow-y:auto; }
 .home-page .structure-preview > .editor-actions { width:100%; box-sizing:border-box; }
 .home-page #config-summary > .summary-content { max-height:260px; }
 .home-page .plots-column > .plots-content { flex:none; min-height:0; }
 .home-page .plots-content > .material-chart-panel:not([hidden]):not(.inactive-plot) { flex:none; }
 .home-page .plots-content .material-chart-wrap,
 .home-page .plots-column #tmm-results-panel .material-chart-wrap { flex:none; height:360px; min-height:360px; }
 .home-page .site-footer { margin-top:12px; }
 .home-page #layer-coherence-note { flex-wrap:wrap; }
 .home-page .info-button { min-width:24px; min-height:24px; }
}

/* Phones and touch tablets use page scrolling, not nested scrollports. */
@media (max-width:1049px), (max-width:1500px) and (hover:none) and (pointer:coarse) {
 .home-page .page-container { height:auto; min-height:100dvh; display:block; }
 .home-page .layout-grid { height:auto; min-height:0; grid-template-rows:auto; align-items:start; }
 .home-page .layout-grid > .main-section,
 .home-page .layout-grid > .materials-column,
 .home-page .layout-grid > .plots-column,
 .home-page .simulation-settings-content,
 .home-page .structure-preview > .stack-editor,
 .home-page .stack-editor > .material-selection,
 .home-page .material-selection .ms-grid,
 .home-page .structure-preview > #si-model-panel,
 .home-page #si-model-panel > .silicon-model-content,
 .home-page #config-summary > .summary-content {
   height:auto; min-height:0; max-height:none; overflow:visible; scrollbar-gutter:auto;
 }
 .home-page .simulation-settings-content { display:block; flex:none; }
 .home-page .materials-column > .structure-preview { display:flex; flex-direction:column; flex:none; height:auto; gap:18px; }
 .home-page .structure-preview > .stack-editor,
 .home-page .structure-preview > #si-model-panel,
 .home-page .structure-preview > .editor-actions { flex:none; width:100%; box-sizing:border-box; }
 .home-page .material-selection .ms-grid { flex:none; }
 .home-page .plots-column > .plots-content { flex:none; min-height:0; overflow:visible; }
 .home-page .plots-content > .material-chart-panel:not([hidden]):not(.inactive-plot) { flex:none; }
 .home-page .site-footer { margin-top:12px; }
}