/*
Generated: 18-03-2026 15:45 UTC
Dependencies:
- index.html
Description:
- Styling extracted from the original live single-file predictor.
- Updated to support compact stacked detail cells, separate share columns,
  SoC output columns and a hide-detail dashboard mode.
*/
body{background:#0f172a;color:#e5e7eb;font-family:Arial,Helvetica,sans-serif;margin:0;padding:20px;padding-bottom:64px}
.wrap{max-width:1250px;margin:auto}
.card{background:#111827;border:1px solid #374151;border-radius:14px;padding:16px}
h1{margin-top:0}
.header-row{display:flex;align-items:center;gap:16px;justify-content:space-between}
.header-row h1{margin:0;white-space:nowrap}
.toolbar{display:flex;flex-wrap:nowrap;gap:14px;align-items:center;justify-content:flex-end;margin-left:auto}
label{font-size:.9rem;color:#cbd5e1}
input{width:70px;padding:6px;border-radius:6px;border:1px solid #374151;background:#0b1220;color:#e5e7eb}
.button-link,
button{display:inline-flex;align-items:center;justify-content:center;background:#2563eb;color:#fff;border:1px solid #2563eb;border-radius:8px;padding:8px 14px;cursor:pointer;text-decoration:none;line-height:1;font:inherit;font-size:.92rem;font-weight:400}
.button-link:hover,
button:hover{background:#1d4ed8;border-color:#1d4ed8}
.status{font-size:.85rem;color:#9ca3af}
.progress-wrap{margin-top:12px;background:#0b1220;border:1px solid #374151;border-radius:999px;overflow:hidden;height:14px}
.progress-bar{height:100%;width:0%;background:#2563eb;transition:width .42s linear}
#statusText{display:block;min-height:1.05rem;line-height:1.05rem;opacity:1;transform:translateY(0);transition:opacity .35s ease,transform .35s ease}
#statusText.is-hidden{opacity:0;transform:translateY(-2px);pointer-events:none}
.tablewrap{overflow-x:auto;overflow-y:visible;margin-top:12px}
.results-shell{position:relative;overflow:hidden}
.table-reveal-curtain{display:none}
.table-ui-lane{margin-top:12px}
.table-ui-stack{pointer-events:none}
.table-ui-stack .progress-wrap{margin-top:0;pointer-events:none}
.table-ui-lane #statusText{text-align:left;transition:opacity .35s ease,transform .35s ease}
.table-ui-stack .debug-panel{margin-top:12px;pointer-events:auto}
.table-reveal-curtain.active{visibility:visible}
.table-reveal-curtain.swipe{transform:translateY(100%)}
table{width:100%;border-collapse:collapse}
table.is-fetching tbody{visibility:hidden}
th,td{border-bottom:1px solid #374151;padding:8px;font-size:.88rem;text-align:center;vertical-align:middle}
th{background:#1f2937;line-height:1.2}
.price{font-weight:700}
.loading-row td{
  text-align:center;
  color:#9ca3af;
  font-style:italic;
  padding:14px 8px;
  background:#0b1220;
  white-space:pre;
  font-family:Arial,Helvetica,sans-serif;
  transition:transform .9s ease,opacity .9s ease;
}
.loading-row td.fetch-exit{transform:translateY(72px);opacity:0}

.good{background:#052e1a;color:#86efac}
.mid{background:#3f2a00;color:#fde68a}
.bad{background:#3b0a0a;color:#fecaca}
.solar-good{background:#052e1a;color:#86efac;font-weight:600}
.solar-mid{background:#3f2a00;color:#fde68a}
.solar-bad{background:#3b0a0a;color:#fecaca}
.small{font-size:.82rem;color:#9ca3af;margin-top:8px}

/* Compact engineering detail block for wind / demand / ratio. */
.detail-stack{display:flex;flex-direction:column;gap:3px;min-width:110px}
.detail-main{font-variant-numeric:tabular-nums;white-space:nowrap}
.detail-sub{font-size:.8rem;color:#94a3b8;white-space:nowrap}
.share-col{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.soc-col{font-weight:600;white-space:nowrap}

/* Dashboard mode can hide the raw engineering context while keeping the key signal. */
body.hide-detail .detail-col{display:none}

/* Blue slider switch for Show detail */
.switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  height: 32px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: relative;
  width: 48px;
  height: 24px;
  background: #374151;
  border-radius: 999px;
  transition: background 0.2s;
  cursor: pointer;
}
.switch input:checked + .slider {
  background: #2563eb;
}
.slider:before {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}
.switch input:checked + .slider:before {
  transform: translateX(24px);
}
.switch-label {
  font-size: .95rem;
  color: #2563eb;
  font-weight: 600;
}

@media (max-width: 900px){
  .header-row{flex-direction:column;align-items:flex-start}
  .toolbar{flex-wrap:wrap;justify-content:flex-start;margin-left:0}
  .toolbar{gap:10px}
  th,td{padding:7px;font-size:.84rem}
  .detail-stack{min-width:95px}
}
.toolbar .button-link{white-space:nowrap}
.version-row{position:fixed;right:20px;bottom:14px;font-size:.72rem;color:#8fa0b3;font-weight:300;letter-spacing:.03em;margin:0;z-index:20}
.debug-panel{margin-top:14px;padding:14px;border:1px solid #374151;border-radius:12px;background:#0b1220}
.debug-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.debug-panel h2,.debug-panel h3{margin-top:0}
.debug-panel pre{margin:0;white-space:pre-wrap;word-break:break-word;font-family:Consolas,Monaco,monospace;font-size:.84rem;color:#cbd5e1}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
#policyTable input,.form-grid input{width:100%;box-sizing:border-box}
@media (max-width: 900px){
  .button-link{padding:8px 12px}
}