/* AUDIT-UNIT:UI-CSS-RESULTS */ .deco-table-wrap { display: block; width: max-content; max-width: 100%; overflow-x: auto; overflow-y: visible; } .deco-table-wrap .tip-icon { position: relative; z-index: 2; } .deco-plan-caption { text-align: left; padding: 0; margin: 0 0 10px; } .deco-plan-caption .dive-plan-banner { margin: 0 0 10px; } .deco-plan-caption .alert { margin-left: 0; margin-right: 0; } .deco-plan-caption .dive-plan-banner .dpb-meta, .deco-plan-caption .dive-plan-banner .dpb-chips { overflow-wrap: anywhere; } #contingencyScheduleStack, .deco-schedule-stack { display: inline-block; width: fit-content; max-width: 100%; vertical-align: top; } #contingencyScheduleStack .deco-contingency-calc { width: auto; max-width: 100%; box-sizing: border-box; } .deco-schedule-stack__actions { display: flex; justify-content: flex-start; gap: 8px; margin-top: 12px; width: auto; max-width: 100%; } .deco-schedule-stack .alert, .deco-schedule-stack .deco-plan-caption, .deco-schedule-stack .deco-table-legend, .deco-schedule-stack .deco-totals-inner, #contingencyScheduleStack .alert, #contingencyScheduleStack .deco-plan-caption, #contingencyScheduleStack .deco-table-legend, #contingencyScheduleStack .deco-totals-inner { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; overflow-wrap: anywhere; } #decoResult #decoAlerts, #decoResult #decoAlertsNarcotic, #decoResult #decoAlertsEmergency { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } .deco-totals-row td { padding: 0; border-bottom: none; white-space: normal; vertical-align: top; } .deco-table:not(.table-view) tr.deco-totals-row td { max-width: 0; } .deco-table.table-view tr.deco-totals-row td { max-width: none; width: 100%; display: table-cell; } .deco-table.table-view tr.deco-totals-row .deco-totals-inner { font-size: 10px; gap: 4px 8px; } .deco-table-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; padding: 12px 14px; background: var(--card2); border-radius: 8px; border: 1px solid var(--border); } .deco-totals-inner { width: min(var(--deco-table-width, 100%), 100%); min-width: 0; padding: 8px 10px; font-family: 'JetBrains Mono', monospace; font-size: 11px; background: rgba(0,200,255,0.04); border-top: 2px solid var(--border-hi); display: flex; flex-wrap: wrap; gap: 4px 12px; max-width: 100%; box-sizing: border-box; overflow-wrap: anywhere; } .deco-totals-inner > span { min-width: 0; overflow-wrap: anywhere; } .deco-table { table-layout:auto; width:min-content; border-collapse:collapse; font-family:'JetBrains Mono',monospace; font-size:12px; margin-top:10px; } .deco-table th { padding:4px 6px; text-align:left; font-size:9px; letter-spacing:1px; text-transform:uppercase; color:var(--accent); border-bottom:1px solid var(--border-hi); background:var(--accent-dim); vertical-align:middle; white-space:nowrap; overflow:hidden; } .deco-table td { padding:4px 6px; border-bottom:1px solid var(--border); color:var(--text); vertical-align:middle; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .deco-table th:first-child, .deco-table td:first-child { text-align:center; } /* Gas Plan table — standalone, no deco-table inheritance */ .gas-plan-table { table-layout:auto; width:100%; border-collapse:collapse; font-family:'JetBrains Mono',monospace; font-size:12px; margin-top:10px; } .gas-plan-table th { padding:6px 6px; text-align:left; font-size:8.5px; letter-spacing:0.04em; text-transform:uppercase; color:var(--accent); border-bottom:1px solid var(--border-hi); background:var(--accent-dim); vertical-align:bottom; white-space:nowrap; word-break:keep-all; overflow-wrap:normal; line-height:1.2; hyphens:none; } .gas-plan-table td { padding:5px 6px; text-align:left; border-bottom:1px solid var(--border); color:var(--text); vertical-align:top; line-height:1.25; } .gas-plan-table th:nth-child(1), .gas-plan-table td:nth-child(1) { min-width:3.6rem; } .gas-plan-table th:nth-child(2), .gas-plan-table td:nth-child(2) { min-width:4.2rem; white-space:nowrap; } .gas-plan-table th:nth-child(3), .gas-plan-table td:nth-child(3) { min-width:4.8rem; white-space:nowrap; } .gas-plan-table th:nth-child(4), .gas-plan-table td:nth-child(4) { min-width:4.6rem; white-space:nowrap; } .gas-plan-table th:nth-child(5), .gas-plan-table td:nth-child(5) { min-width:6.8rem; white-space:normal; word-break:normal; } .gas-plan-table th:nth-child(6), .gas-plan-table td:nth-child(6) { min-width:3.4rem; white-space:nowrap; } .gas-plan-table td.gas-plan-gas-cell { word-break:normal; overflow-wrap:normal; line-height:1.1; white-space:normal; } .gas-plan-table .gas-plan-gas-mix { display:block; font-weight:700; line-height:1.1; } .gas-plan-table .gas-plan-gas-role { display:block; font-size:10px; font-weight:400; color:var(--muted); white-space:nowrap; line-height:1.1; margin-top:1px; } /* Best Mix reference table */ .bmt-ref-row td { padding:5px 6px; border-bottom:1px solid var(--border); white-space:nowrap; } .bmt-ref-row:last-child td { border-bottom:none; } .bmt-ref-row.bmt-ref-highlight { background:rgba(255,255,255,0.04); } .bmt-ref-row.bmt-ref-highlight td:first-child { border-left:2px solid var(--accent); padding-left:4px; } /* Right-align numeric columns — widths auto-sized to content */ .deco-table th:nth-child(1), .deco-table td:nth-child(1) { width:1%; } .deco-table th:nth-child(2), .deco-table td:nth-child(2) { text-align:right; } .deco-table th:nth-child(3), .deco-table td:nth-child(3) { text-align:right; } .deco-table th:nth-child(4), .deco-table td:nth-child(4) { } .deco-table th:nth-child(5), .deco-table td:nth-child(5) { text-align:right; } .deco-table th:nth-child(6), .deco-table td:nth-child(6) { text-align:right; } .deco-table th:nth-child(7), .deco-table td:nth-child(7) { text-align:right; } .deco-table th:nth-child(8), .deco-table td:nth-child(8) { text-align:right; } /* Gas switch rows always left-aligned */ /* Ascent row depth/run/arrow — visible green, not pale */ .asc-color { color: #FFBF00; } /* Gas switch row — normal background, deco-chip accent text, no divider. */ .deco-table tr[data-phase="switch"] td { color: #16a34a; } /* Phase icon cell */ .deco-table tr[data-phase="switch"] td:first-child { color: #16a34a; } /* Depth cell — switch depth only */ .deco-table tr[data-phase="switch"] td:nth-child(2) { color: #16a34a; } /* Mix cell — gas label */ .deco-table tr[data-phase="switch"] td[data-label="Mix"] { color: #16a34a; } /* PPO2 cell */ .deco-table tr[data-phase="switch"] td[data-label="PPO2"] { color: #16a34a; } body.light-theme .switch-legend-icon { color: #16a34a; } .deco-table tr:hover td { background:rgba(0,200,255,0.04); } .deco-table .deco-row td { color:var(--red); font-weight:600; } .deco-table .safe-row td { color:var(--green); } .deco-table .asc-row td { color:var(--muted); } /* ── MOBILE: gas plan + tight warning overrides ── */ @media (max-width: 600px) { /* Gas plan table — responsive */ .gas-plan-table { width:100%; min-width:0; max-width:100%; table-layout:fixed; font-size:10px; } .gas-plan-table th { min-width:0; padding:6px 4px; font-size:8px; white-space:normal; word-break:normal; overflow-wrap:anywhere; line-height:1.2; letter-spacing:0.04em; } .gas-plan-table td { min-width:0; padding:5px 4px; font-size:10px; } .gas-plan-table th:nth-child(n), .gas-plan-table td:nth-child(n) { min-width:0; max-width:none; } /* BT banner + tight warning rows */ .gas-bt-cell { background:#FF4433; color:#fff; white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; word-break:normal; min-width:0; max-width:100%; box-sizing:border-box; } .gas-bt-cell strong, .gas-bt-cell span { color:inherit; } body.light-theme .gas-bt-cell { color:#000; } .deco-table tr.gas-tight-row td, .deco-table tr.gas-tight-row td:first-child { background:#FF4433; color:#fff; font-weight:600; border-bottom:1px solid var(--border); } .deco-table tr.gas-tight-row td span { color:inherit; } body.light-theme .deco-table tr.gas-tight-row td, body.light-theme .deco-table tr.gas-tight-row td:first-child { background:#FF4433; color:#000; } } /* ── LSP SLIDER ── */ .slider-wrap { position:relative; padding-bottom:20px; } .lsp-slider { -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:2px; outline:none; cursor:pointer; background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--fill,31%), var(--border-hi) var(--fill,31%), var(--border-hi) 100%); } .lsp-slider::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%; background: var(--accent); border:3px solid var(--card); box-shadow: 0 0 0 2px var(--accent), 0 2px 8px rgba(0,200,255,0.4); cursor:grab; transition:transform 0.15s, box-shadow 0.15s; } .lsp-slider::-webkit-slider-thumb:active { cursor:grabbing; transform:scale(1.2); box-shadow: 0 0 0 3px var(--accent), 0 4px 16px rgba(0,200,255,0.5); } .lsp-slider::-moz-range-thumb { width:22px; height:22px; border-radius:50%; background: var(--accent); border:3px solid var(--card); box-shadow: 0 0 0 2px var(--accent); cursor:grab; } .slider-ticks { display:flex; justify-content:space-between; margin-top:6px; padding:0 2px; font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--muted); letter-spacing:0.5px; } .slider-ticks-abs { position:relative; height:16px; margin-top:6px; font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--muted); letter-spacing:0.5px; } .slider-ticks-abs span { position:absolute; transform:translateX(-50%); white-space:nowrap; } .slider-ticks-abs span:first-child { transform:translateX(0); } .slider-ticks-abs span:last-child { transform:translateX(-100%); } /* ── Unit Converter ── */ .conv-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; } .conv-field { flex:1; min-width:90px; } .conv-field label { display:block; font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin-bottom:5px; } .conv-field input { width:100%; background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:10px 12px; color:var(--text); font-family:'Bebas Neue',sans-serif; font-size:22px; outline:none; transition:border-color 0.2s; text-align:center; } .conv-field input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,200,255,0.08); } .conv-arrow { color:var(--accent); font-size:18px; flex-shrink:0; margin-top:18px; } .conv-ref { display:flex; flex-wrap:wrap; gap:12px; margin-top:10px; font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--muted); background:var(--card2); padding:8px 12px; border-radius:6px; border:1px solid var(--border); } /* NDL reference table */ .ndl-table { width:100%; border-collapse:collapse; font-family:'JetBrains Mono',monospace; font-size:12px; } .ndl-table th { padding:9px 12px; text-align:center; font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--accent); border-bottom:1px solid var(--border-hi); background:rgba(0,200,255,0.06); } .ndl-table td { padding:8px 12px; border-bottom:1px solid rgba(0,200,255,0.05); text-align:center; } .ndl-table tr:hover td { background:rgba(0,200,255,0.04); } .ndl-table .warn-row td { background:rgba(255,183,3,0.05); } .ndl-table .danger-row td { background:rgba(255,71,87,0.05); } .td-g { color:var(--green); font-weight:600; } .td-o { color:var(--orange); font-weight:600; } .td-r { color:var(--red); font-weight:700; } .group-badge { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:rgba(212,175,55,0.15); border:1.5px solid var(--gold); color:var(--gold); font-family:'Bebas Neue',sans-serif; font-size:13px; } /* ── RESPONSIVE ── */ @media(max-width:640px) { .stats { grid-template-columns:repeat(2,1fr); } .desktop-only { display:none !important; } /* Banner: own full-width row, between logo (order:1) and mode (order:3) */ #headerBanner { flex:0 0 100%; order:2; padding:4px 14px 8px; justify-content:center; } #headerTopRow > div:first-child { order:1; } #headerTopRow .header-actions { order:3; width:auto; justify-content:flex-end; padding:0; } } @media(min-width:641px) { .mobile-only { display:none !important; } } @media(max-width:640px) { .brand-text h1 { font-size:22px; } .tabs-nav { flex-wrap:wrap; } } /* u-classes: repeated inline styles extracted */ .u0{margin-bottom:0;} .u1{white-space:nowrap;} .u2{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;} .u3{text-align:left;padding:5px 6px;font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);font-weight:400;} .u4{margin-bottom:20px;} .u5{font-family:'Bebas Neue',sans-serif;font-size:28px;color:var(--accent);line-height:1;} .u6{color:var(--muted);} .u7{padding:4px 6px;border-radius:6px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-family:'JetBrains Mono',monospace;font-size:11px;cursor:pointer;} .u8{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);} .u9{margin-bottom:12px;} .u10{color:var(--accent);} .u11{margin-bottom:16px;} .u12{color:var(--tip);text-decoration:underline;font-size:11px;} .u13{color:var(--red);} .u14{margin-bottom:8px;} .u15{color:var(--green);} .u16{overflow-x:auto;-webkit-overflow-scrolling:touch;} .u17{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted);} .u18{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--tip);margin-bottom:10px;} .u19{display:none;align-items:center;gap:4px;} .u20{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:16px;} .u21{margin-top:20px;padding-top:16px;border-top:1px solid var(--border);} /* ═══ V3 LAYOUT & COMPONENTS ═══ */ .v4-shell .card.collapsible { border-radius: var(--radius-lg); } .v4-shell .result-tabs-nav { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 4px; } #mainTabsNav { display: none !important; } .legacy-panels { display: none !important; } .mode-toggle { display: flex; background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 2px; gap: 2px; } .mode-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0; padding: 7px 10px; border: none; background: transparent; color: var(--text-muted); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; cursor: pointer; border-radius: calc(var(--radius-md) - 2px); transition: all var(--transition); white-space: nowrap; min-width: 34px; min-height: 34px; } .mode-btn:hover { color: var(--text); background: var(--surface-4); } .mode-btn.active { color: var(--accent); background: var(--accent-dim); } .mode-btn img { width: 16px; height: 16px; display: block; opacity: 0.92; filter: brightness(0) invert(1); } .mode-btn:hover img, .mode-btn.active img { opacity: 1; filter: brightness(0) invert(1) sepia(1) saturate(4) hue-rotate(160deg); } body.light-theme .mode-btn img { filter: brightness(0); opacity: 0.78; } body.light-theme .mode-btn:hover img, body.light-theme .mode-btn.active img { opacity: 1; filter: brightness(0) sepia(1) saturate(5) hue-rotate(160deg); } .mode-ref-btn { font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: 0; line-height: 1; } .main-nav-bar { display: none; grid-template-columns: repeat(5, 1fr); gap: 0; background: var(--surface); border: 1px solid var(--border-hi); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-3); } .main-nav-bar.visible { display: grid; } .main-nav-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 10px var(--space-2); border: none; border-right: 1px solid var(--border); background: transparent; color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: all var(--transition); line-height: 1.2; } .main-nav-btn:last-child { border-right: none; } .main-nav-btn .algo-sub { font-size: 9px; font-weight: 400; color: var(--text-faint); letter-spacing: 0.04em; text-transform: none; display: block; margin-top: 2px; } .main-nav-btn:hover { color: var(--text); background: var(--accent-dim); } .main-nav-btn.active { color: var(--accent); background: color-mix(in oklab, var(--accent) 14%, transparent); border-bottom: 2px solid var(--accent); } .main-nav-btn.active .algo-sub { color: var(--accent); opacity: 0.75; } @media (max-width: 720px) { .main-nav-bar { grid-template-columns: repeat(3, 1fr); } .main-nav-btn:nth-child(3) { border-right: none; } .main-nav-btn:nth-child(1), .main-nav-btn:nth-child(2), .main-nav-btn:nth-child(3) { border-bottom: 1px solid var(--border); } .main-nav-btn:nth-child(4) { border-bottom: 1px solid var(--border); } .main-nav-btn:nth-child(5) { grid-column: span 2; border-right: none; } } @media (max-width: 420px) { .main-nav-bar { grid-template-columns: repeat(2, 1fr); } .main-nav-btn:nth-child(2), .main-nav-btn:nth-child(4) { border-right: none; } .main-nav-btn:nth-child(1), .main-nav-btn:nth-child(2), .main-nav-btn:nth-child(3), .main-nav-btn:nth-child(4) { border-bottom: 1px solid var(--border); } .main-nav-btn:nth-child(3) { border-right: 1px solid var(--border); } .main-nav-btn:nth-child(5) { grid-column: 1 / -1; border-right: none; } } .algo-bar { display: none !important; } .tools-bar { display: none; gap: 2px; padding: var(--space-3) 0; border-bottom: 1px solid var(--border); margin-bottom: var(--space-4); flex-wrap: wrap; overflow-x: auto; } .tools-bar.visible { display: flex; } .tools-bar-btn { padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 500; color: var(--text-muted); border: 1px solid transparent; background: transparent; cursor: pointer; transition: all var(--transition); white-space: nowrap; font-family: var(--font-body); } .tools-bar-btn:hover { color: var(--text); background: var(--surface-3); } .tools-bar-btn.active { color: var(--accent); background: var(--accent-dim); border-color: color-mix(in oklab, var(--accent) 25%, transparent); } .planner-main { display: none; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: start; } .planner-main.visible { display: grid; } .v3-panel { background: var(--surface); border-radius: var(--radius-xl); border: 1px solid var(--border); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); box-shadow: var(--shadow-sm); } .panel-title { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); } .panel-header-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .panel-title-wrap { display: flex; align-items: center; gap: 6px; min-width: 0; } .panel-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .panel-header-actions .btn-export { padding: 7px 10px; } .section-label { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-faint); margin-bottom: var(--space-2); } .result-tabs-nav { display: flex; gap: 2px; flex-wrap: wrap; margin-bottom: var(--space-3); } .result-tab-btn { padding: 6px 12px; border-radius: var(--radius-md); font-size: var(--text-xs); font-weight: 500; color: var(--text-muted); border: 1px solid transparent; background: transparent; cursor: pointer; transition: all var(--transition); font-family: var(--font-body); } .result-tab-btn:hover { color: var(--text); background: var(--surface-3); } .result-tab-btn.active { color: var(--accent); background: var(--accent-dim); border-color: var(--accent-border); } .result-tab-pane { display: none; flex-direction: column; gap: var(--space-3); } .result-tab-pane.active { display: flex; } #planPanelRecSection { display: none; flex-direction: column; gap: var(--space-3); } #planPanelRecSection.visible { display: flex; } #planPanelTecSection { display: none; flex-direction: column; gap: var(--space-3); } #planPanelTecSection.visible { display: flex; } /* Level 2: REC vs TECH root planner views (siblings under #plannerView) */ .planner-mode-view { display: none; flex-direction: column; gap: var(--space-3); } .planner-mode-view.visible { display: flex; } #recPlannerView, #tecPlannerView { flex: 1; min-width: 0; grid-column: 1; grid-row: 1; } #resultsPanel { grid-column: 2; grid-row: 1; } .planner-results-view { display: none; } .planner-results-view.visible { display: block; } .depth-bt-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); } .input-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); } .input-card-label { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-faint); } .input-card-inner { display: flex; align-items: center; justify-content: space-between; } .stepper-val { font-size: var(--text-num); font-weight: 700; font-family: var(--font-mono); color: var(--text); line-height: 1; min-width: 3ch; text-align: center; } .unit { font-size: var(--text-sm); color: var(--text-muted); margin-left: 4px; font-weight: 400; } .stepper-btns { display: flex; flex-direction: column; gap: 2px; } .stepper-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); border: 1px solid var(--border-med); color: var(--text-muted); font-size: 1.1rem; font-weight: 600; background: transparent; cursor: pointer; transition: all var(--transition); } .stepper-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); } .circ-btns { display: flex; gap: 2px; flex-wrap: wrap; } .circ-btn { padding: 4px 12px; border-radius: var(--radius-md); font-size: var(--text-xs); font-weight: 600; border: 1px solid var(--border-med); color: var(--text-muted); background: transparent; cursor: pointer; transition: all var(--transition); } .circ-btn:hover { color: var(--text); border-color: var(--accent); } .circ-btn.active { color: var(--accent); background: var(--accent-dim); border-color: var(--accent-border); } .gas-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: var(--space-2); } .gas-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--accent); box-shadow: 0 0 0 2px color-mix(in oklab, currentColor 25%, transparent); } .gas-dot--bottom { background: var(--accent); color: var(--accent); } .gas-dot--travel { background: var(--gas-travel); color: var(--gas-travel); } .gas-dot--deco1, .gas-dot--deco2, .gas-dot--o2 { background: var(--gas-deco-chip-bg); color: var(--gas-deco-chip-bg); } .gas-card-title-row { display: flex; align-items: center; gap: 8px; min-width: 0; } .gas-mod { font-size: var(--text-xs); color: var(--text-muted); font-family: var(--font-mono); white-space: nowrap; flex-shrink: 0; } .gf-preset-row { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; } .gf-preset-btn { padding: 4px 10px; border-radius: var(--radius-md); font-size: var(--text-xs); font-weight: 600; font-family: var(--font-mono); border: 1px solid var(--border-med); color: var(--text-muted); background: transparent; cursor: pointer; transition: all var(--transition); } .gf-preset-btn:hover { color: var(--text); border-color: var(--accent); } .gf-preset-btn.active { color: var(--accent); background: var(--accent-dim); border-color: color-mix(in oklab, var(--accent) 35%, transparent); } .vpm-cons-row { display: none; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .vpm-cons-row.visible { display: flex; } .cons-btns { display: flex; gap: 2px; flex-wrap: wrap; } .cons-btn { padding: 4px 10px; border-radius: var(--radius-md); font-size: var(--text-xs); font-weight: 600; border: 1px solid var(--border-med); color: var(--text-muted); background: transparent; cursor: pointer; transition: all var(--transition); } .cons-btn:hover { color: var(--text); border-color: var(--accent); } .cons-btn.active { color: var(--accent); background: var(--accent-dim); border-color: color-mix(in oklab, var(--accent) 35%, transparent); } .metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); } .metric-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-3); display: flex; flex-direction: column; gap: 2px; } .metric-val { font-size: var(--text-lg); font-weight: 700; font-family: var(--font-mono); line-height: 1; } .metric-val .unit { font-size: var(--text-xs); font-weight: 400; color: var(--text-muted); margin-left: 2px; vertical-align: baseline; } .metric-lbl { font-size: var(--text-xs); color: var(--text-faint); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; } .chip-row { display: flex; gap: var(--space-2); flex-wrap: wrap; } .chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 500; border: 1px solid transparent; } .chip-green { background: var(--green-dim); color: var(--green); border-color: color-mix(in oklab, var(--green) 30%, transparent); } .chip-orange { background: var(--orange-dim); color: var(--orange); border-color: color-mix(in oklab, var(--orange) 30%, transparent); } .chip-yellow { background: var(--yellow-dim); color: var(--yellow); border-color: color-mix(in oklab, var(--yellow) 30%, transparent); } .chip-red { background: var(--red-dim); color: var(--red); border-color: color-mix(in oklab, var(--red) 30%, transparent); } .chip-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } /* ═══ RESULTS PANEL V4 (static shell, no legacy table wars) ═══ */ #resultsPanel { position: relative; overflow: hidden; gap: var(--space-3); } #resultsPanel::before { content: ''; display: block; height: 1px; margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) 0; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: .25; } .results-panel-label { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 var(--space-1); } #resultsPanel.has-results .results-panel-label { display: none; } .result-empty-state { padding: var(--space-5) var(--space-4); text-align: center; font-size: var(--text-sm); color: var(--text-muted); border: 1px dashed var(--border-med); border-radius: var(--radius-lg); background: var(--surface-2); line-height: 1.5; } .result-empty-state strong { color: var(--accent); } #resultsPanel:not(.has-results) #resultMetricStrip, #resultsPanel:not(.has-results) #resultHintRow, #resultsPanel:not(.has-results) #resultChipRow, #resultsPanel:not(.has-results) #recResultTabs, #resultsPanel:not(.has-results) #tecResultTabs { display: none; } #resultsPanel.has-results #resultEmptyState { display: none; } #resultsPanel.has-results #resultMetricStrip { display: grid; } #resultsPanel.has-results #resultHintRow { display: flex; } #resultsPanel.has-results #resultChipRow { display: flex; } #resultsPanel.has-results #resultMetricStrip:empty, #resultsPanel.has-results #resultHintRow:empty, #resultsPanel.has-results #resultChipRow:empty { display: none !important; } .rec-card-hint-row { margin-top: 12px; } .rec-card-hint-row .alert { margin: 0; width: 100%; } #resultsScratch { display: none; } #resultsPanel #tableViewToggle { display: none; } #resultsPanel .result-tabs-slot { display: flex; flex-direction: column; } #resultsPanel .result-tabs-nav { display: flex; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 4px; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; margin-bottom: var(--space-2); } #resultsPanel .result-tabs-nav::-webkit-scrollbar { display: none; } #resultsPanel .result-tab-btn { flex-shrink: 0; padding: 7px 14px; border: 1px solid transparent; background: transparent; color: var(--text-faint); font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border-radius: var(--radius-md); } #resultsPanel .result-tab-btn:hover { color: var(--text); background: color-mix(in oklab, var(--accent) 4%, transparent); } #resultsPanel .result-tab-btn.active { background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 14%, transparent), color-mix(in oklab, var(--accent) 18%, transparent)); color: var(--accent); border-color: color-mix(in oklab, var(--accent) 22%, transparent); } #resultsPanel .metric-grid { gap: var(--space-2); } #resultsPanel .result-hint-row { display: flex; flex-direction: column; gap: var(--space-2); } #resultsPanel .result-inline-hint { margin: 0; } #resultsPanel .metric-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); } #resultsPanel .metric-val { font-size: var(--text-lg); font-weight: 700; font-family: var(--font-mono); color: var(--text); } #resultsPanel .metric-val.metric-val--runtime { color: #2563eb; } #resultsPanel .metric-val.metric-val--deco { color: var(--status-red); } #resultsPanel .metric-val.metric-val--cns-safe { color: var(--status-green); } #resultsPanel .metric-val.metric-val--cns-caution { color: var(--status-orange); } #resultsPanel .metric-val.metric-val--cns-warn { color: var(--status-red); } #resultsPanel .metric-val[class*="metric-val--"] .unit { color: inherit; opacity: 0.82; } #resultsPanel .chip-green { background: var(--status-green-dim); color: var(--status-green); border-color: color-mix(in oklab, var(--status-green) 30%, transparent); } #resultsPanel .chip-orange { background: var(--status-orange-dim); color: var(--status-orange); border-color: color-mix(in oklab, var(--status-orange) 30%, transparent); } #resultsPanel .chip-yellow, body.light-theme #resultsPanel .chip-yellow { background: var(--yellow-dim); color: var(--yellow); border-color: color-mix(in oklab, var(--yellow) 30%, transparent); } #resultsPanel .chip-red { background: var(--status-red-dim); color: var(--status-red); border-color: color-mix(in oklab, var(--status-red) 30%, transparent); } #resultsPanel .chip-info { background: var(--surface-2); color: #2563eb; border-color: var(--border); } #resultsPanel .chip-deco { background: var(--surface-2); color: var(--status-red); border-color: var(--border); } #resultsPanel .chip-rec-profile { background: color-mix(in oklab, var(--accent) 9%, transparent); color: var(--accent); border-color: color-mix(in oklab, var(--accent) 38%, transparent); font-weight: 700; } #resultsPanel .metric-lbl { font-size: 9px; letter-spacing: 0.1em; } #resultsPanel .chip { padding: 4px 10px; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.03em; border-radius: var(--radius-full); } #resultsPanel .result-tab-pane.active { gap: var(--space-3); } #resultsPanel #resultTab-profile.active { gap: 0; } #resultsPanel #resultTab-profile > #profileSectionHead.results-section-head { padding: var(--space-2) var(--space-4) var(--space-1); } #resultsPanel #resultTab-profile { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0; overflow: hidden; } #resultsPanel #resultTab-contingency { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0; overflow: hidden; gap: var(--space-3); } #resultsPanel #resultTab-tissue { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0; overflow: hidden; gap: var(--space-3); } #resultsPanel #tissueLoadCard { width: 100%; box-sizing: border-box; } #resultsPanel #tissueLoadInnerCard.card { background: transparent; border: none; box-shadow: none; margin: 0; } #resultsPanel #tissueLoadInnerCard .card-title { padding: var(--space-3) var(--space-4) var(--space-2); margin: 0; border-bottom: 1px solid var(--border); } #resultsPanel #tissueLoadInnerCard .card-collapsible-body { padding: var(--space-3) var(--space-4) var(--space-4); } #resultsPanel .contingency-v4-card { display: flex; flex-direction: column; gap: var(--space-3); } #resultsPanel .contingency-setup-body { padding: 0 var(--space-4) var(--space-3); display: flex; flex-direction: column; gap: var(--space-3); } #resultsPanel #contingencyScheduleStack { display: block; width: 100%; max-width: none; } #resultsPanel #contingencyResult { padding: 0 0 var(--space-4); width: 100%; box-sizing: border-box; } #resultsPanel #contingencyResult .deco-plan-caption { margin: 0 var(--space-4) var(--space-3); } #resultsPanel #contingencyResult .contingency-graph-block { width: 100%; max-width: 100%; box-sizing: border-box; padding: 0 var(--space-4) var(--space-2); overflow: hidden; } #resultsPanel #contingencyResult .contingency-graph-block .results-section-head { padding: 0 0 var(--space-2); } #resultsPanel #contingencyResult .profile-canvas-shell { width: 100%; max-width: 100%; box-sizing: border-box; overflow: hidden; } #resultsPanel #contingencyResult #contingencyProfileCanvas { width: 100%; max-width: 100%; height: auto; aspect-ratio: 760 / 260; min-height: 180px; display: block; box-sizing: border-box; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); } #resultsPanel #contingencyResult #contingencyProfileLegend { display: none !important; } #resultsPanel #contingencyResult .schedule-wrap { padding: 0; overflow-x: auto; width: 100%; box-sizing: border-box; } #resultsPanel #contingencyResult .deco-table-wrap { width: 100%; max-width: 100%; } #resultsPanel #contingencyResult .deco-table-legend.legend { border-top: 1px solid var(--border); margin-top: 10px; } #resultsPanel #contingencyResult #decoAlertsEmergency { margin: var(--space-3) var(--space-4) 0; } #resultsPanel #contingencyScheduleStack .deco-contingency-calc { width: 100%; box-sizing: border-box; padding: 11px 14px; background: color-mix(in oklab, var(--red) 10%, transparent); color: var(--red); border: 1px solid color-mix(in oklab, var(--red) 35%, transparent); border-radius: var(--radius-md); cursor: pointer; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; transition: background 0.2s ease; } #resultsPanel #contingencyScheduleStack .deco-contingency-calc:hover { background: color-mix(in oklab, var(--red) 18%, transparent); } #resultsPanel .results-section-head--sub { padding: 0; margin: 0; } #resultsPanel #tissueGfSectionHead.results-section-head--sub { padding: var(--space-3) var(--space-4) var(--space-1); margin: 0; border-bottom: 1px solid var(--border); } #resultsPanel #fullDiveGraphCard .card-title, #resultsPanel #gfCurveInlineCard .card-title { display: none !important; } #resultsPanel .profile-legend-keys { display: flex; gap: var(--space-3); flex-wrap: wrap; font-family: var(--font-mono); font-size: 9px; color: var(--text-faint); } #resultsPanel .profile-legend-keys .legend-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } #resultsPanel #fullDiveGraphCard.card { background: transparent; border: none; box-shadow: none; margin: 0; padding: 0; } #resultsPanel #fullDiveGraphCard .card-collapsible-body { padding: var(--space-3) var(--space-4) var(--space-2); box-sizing: border-box; max-width: 100%; overflow: hidden; } #resultsPanel #plannerProfileCanvas-wrap { margin-top: 0; max-width: 100%; box-sizing: border-box; } #resultsPanel #plannerProfileCanvas-wrap canvas { width: 100%; max-width: 100%; box-sizing: border-box; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); min-height: 200px; display: block; } #resultsPanel #plannerProfileLegend { display: flex; flex-direction: column; gap: var(--space-2); flex-wrap: nowrap; padding: var(--space-2) 0 var(--space-1); font-family: var(--font-mono); font-size: 9px; color: var(--text-faint); } #resultsPanel #plannerProfileLegend .profile-legend-keys { width: 100%; } #resultsPanel #plannerProfileLegend .profile-legend-table { margin-top: var(--space-2); } #resultsPanel #plannerProfileLegend tr.profile-legend-gasswitch td { color: #16a34a; } #resultsPanel #plannerProfileCanvas-hint { padding: var(--space-1) 0; } #resultsPanel #gfCurveInlineCard.card { margin: 0; background: transparent; border: none; box-shadow: none; } #resultsPanel #gfCurveInlineCard .card-collapsible-body { padding: 0 var(--space-4) var(--space-3); } #resultsPanel #gfCurveInlineCard .gf-curve-intro { margin: 0 0 var(--space-2); font-size: 11px; line-height: 1.45; color: var(--text-faint); } #resultsPanel #gfCurveInlineCard .gf-curve-stats { display: flex; align-items: center; flex-wrap: wrap; margin: 0 0 var(--space-2); gap: var(--space-3); } #resultsPanel #gfCurveCanvas-wrap { margin-bottom: 0; } #resultsPanel #gfCurveCanvas-wrap canvas { border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); } #resultsPanel .gf-curve-stop-table { margin-top: var(--space-1); } #resultsPanel .gf-curve-stop-table table { margin: 0; } #resultsPanel .gf-curve-stop-table tr:last-child { border-bottom: none; } #resultsPanel .gf-curve-legend-keys { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin: 0; padding: var(--space-2) 0 var(--space-1); border-top: 1px solid var(--border); font-family: var(--font-mono); font-size: 9px; color: var(--text-faint); } #resultsPanel .gf-curve-legend-keys > div { display: flex; align-items: center; gap: 6px; } .gf-curve-legend-keys { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--muted); } .gf-curve-legend-keys > div { display: flex; align-items: center; gap: 6px; } #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) { padding: 0 var(--space-4) var(--space-4); margin-top: var(--space-3); } #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .card { margin-top: var(--space-2); } #resultsPanel #gasConsumptionSummary .gas-plan-table { min-width:0; width:100%; table-layout:auto; } #resultsPanel #gasConsumptionSummary .gas-plan-table th { white-space:nowrap; word-break:keep-all; overflow-wrap:normal; hyphens:none; } #resultsPanel #gasConsumptionSummary .gas-plan-table td { word-break:normal; overflow-wrap:normal; } #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-consumption-card { border-radius: var(--radius-md); } #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-consumption-toolbar { display:flex; justify-content:flex-end; align-items:center; gap:var(--space-2); margin-bottom:var(--space-2); } #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-threshold-control { display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:10px; color:var(--muted); } #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-threshold-control input { width:48px; min-height:28px; padding:3px 5px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--text); font-family:var(--font-mono); font-size:11px; text-align:right; } #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-usage-inline-warning { display:flex; gap:var(--space-2); align-items:flex-start; margin:2px 0 6px; box-sizing:border-box; white-space:normal; overflow-wrap:anywhere; font-family:'Outfit', sans-serif; font-size:12px; font-weight:700; letter-spacing:0; line-height:1.45; } #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-usage-inline-warning--critical, #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-usage-inline-warning--critical :is(.tip-icon, .gas-measure, .gas-unit, strong, span) { color:#E8590C; } #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-usage-inline-warning--nogas, #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-usage-inline-warning--nogas :is(.tip-icon, .gas-measure, .gas-unit, strong, span) { color:#FF3B30; } #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-consumption-bars { display:flex; flex-direction:column; gap:var(--space-2); } #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-usage-card { --gas-status:var(--status-green); --gas-track:rgba(148,163,184,0.22); border:1px solid var(--border); border-left:4px solid var(--gas-status); border-radius:var(--radius-md); padding:var(--space-3); background:rgba(255,255,255,0.025); box-shadow:0 1px 0 rgba(255,255,255,0.02) inset; } #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-usage-card--ok { --gas-status:var(--status-green); } #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-usage-card--low { --gas-status:var(--status-orange); } #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-usage-card--critical { --gas-status:#E8590C; border-color:#E8590C; border-left-color:#E8590C; background:rgba(232,89,12,0.10); } #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-usage-card--nogas { --gas-status:#DC2626; border-color:#DC2626; border-left-color:#991b1b; background:rgba(220,38,38,0.16); box-shadow:0 0 0 1px rgba(239,68,68,0.18) inset; } #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-usage-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-2); margin-bottom:5px; } #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-usage-title { display:flex; align-items:baseline; gap:7px; min-width:0; flex-wrap:wrap; } #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-usage-mix { font-family:var(--font-mono); font-size:13px; font-weight:800; color:var(--gas-status); letter-spacing:0.02em; } #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-usage-role { font-family:var(--font-mono); font-size:9px; color:var(--muted); text-transform:uppercase; letter-spacing:0.08em; } #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-usage-card--narcotic { border-left-color:#ff4433; } #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-usage-title--narcotic { display:inline-flex; align-items:baseline; gap:7px; width:max-content; max-width:100%; padding:2px 8px 3px; border-radius:999px; background:#ff4433; border:1px solid var(--narcotic-chip-border, rgba(255,255,255,0.92)); color:#fff; } #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-usage-title--narcotic .gas-usage-mix, #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-usage-title--narcotic .gas-usage-role { color:inherit; } #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-usage-role--narcotic { font-weight:900; letter-spacing:0.02em; text-transform:none; } #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-usage-remaining { font-family:var(--font-mono); font-size:13px; font-weight:800; color:#fff; text-align:right; white-space:nowrap; } #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-usage-remaining span { color:#fff; font-weight:800; font-size:13px; } #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-measure, #gasWarningBanner.gas-warning-banner .gas-measure { font-weight:800; } #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-measure { white-space:nowrap; } #gasWarningBanner.gas-warning-banner .gas-measure { white-space:normal; overflow-wrap:anywhere; word-break:break-word; } #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-unit, #gasWarningBanner.gas-warning-banner .gas-unit { font-size:0.82em; font-weight:800; margin-left:0; } #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-pres-wrap { color:var(--muted); } :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-measure { font-weight:800; white-space:nowrap; } :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-unit { font-size:0.82em; font-weight:800; margin-left:0; } :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-pres-wrap { color:var(--muted); } #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-usage-scale { display:flex; justify-content:space-between; color:var(--text-faint); font-family:var(--font-mono); font-size:9px; margin-bottom:3px; } #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-usage-track { height:8px; border-radius:999px; background:var(--gas-track); overflow:hidden; box-shadow:inset 0 0 0 1px rgba(0,0,0,0.08); } #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-usage-remaining-bar { width:var(--gas-remaining-pct); height:100%; border-radius:999px; background:var(--gas-status); min-width:0; transition:width 0.2s ease; } #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-usage-foot { display:flex; justify-content:space-between; gap:var(--space-2); flex-wrap:wrap; margin-top:6px; font-family:var(--font-mono); font-size:10px; color:var(--muted); } #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-usage-foot strong, #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-usage-foot .gas-measure, #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-usage-foot .gas-unit, #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-usage-foot .gas-value { color:var(--muted); } #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-consumption-note { font-family:var(--font-mono); font-size:10px; color:var(--muted); margin-top:var(--space-2); letter-spacing:0.04em; overflow-wrap:anywhere; } body.light-theme #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-usage-card { background:#fff; } body.light-theme #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-usage-remaining, body.light-theme #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-usage-remaining span { color:#111; } body.light-theme #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-usage-card--critical { background:#fff3ea; border-color:#E8590C; border-left-color:#E8590C; } body.light-theme #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-usage-card--nogas { --gas-status:#DC2626; background:#ffe4e2; border-color:#FF3131; border-left-color:#B91C1C; box-shadow:0 0 0 1px rgba(127,29,29,0.10) inset; } #resultsPanel .profile-export-actions { margin-left: auto; } .results-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) var(--space-4) var(--space-2); flex-wrap: wrap; } .results-section-label { font-family: 'Outfit', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--accent); } #resultsPanel .results-section-label, #resultsPanel .card-title, #resultsPanel #gasConsumptionSummary .card-title, #resultsPanel #tissueLoadInnerCard .card-title { font-family: 'Outfit', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--accent); } .results-section-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } #resultsPanel #tissueChartToggleBtn, #resultsPanel #contingencyJumpBtn { display: none !important; } #resultsPanel #decoResult.results-v3-card { background: transparent; border: none; box-shadow: none; margin: 0; padding: 0; } #resultsPanel #decoAlerts { margin: var(--space-1) var(--space-4) 0; min-width: 0; max-width: calc(100% - var(--space-4) * 2); box-sizing: border-box; } #resultsPanel #decoAlerts:empty { display: none; margin: 0; } #resultsPanel #decoAlertsNarcotic { display: none !important; margin: 0; } #resultsPanel #decoAlerts .alert, #resultsPanel #decoAlertsNarcotic .alert { display: flex; align-items: flex-start; gap: var(--space-2); width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); font-size: 12px; line-height: 1.45; margin: 0 0 var(--space-2); white-space: normal; overflow-wrap: anywhere; word-break: normal; } #resultsPanel #decoAlerts .alert > *, #resultsPanel #decoAlertsNarcotic .alert > * { min-width: 0; overflow-wrap: anywhere; } #resultsPanel #decoAlerts .alert:first-child, #resultsPanel #decoAlertsNarcotic .alert:first-child { margin-top: 0; } #resultsPanel #decoAlerts .alert.deco, #resultsPanel #decoAlertsNarcotic .alert.deco, #resultsPanel #decoAlerts .alert.narcotic-warn, #resultsPanel #decoAlertsNarcotic .alert.narcotic-warn { background:#ff4433; border:1px solid var(--narcotic-banner-border, rgba(255,255,255,0.92)); color:#fff; font-weight:700; } #resultsPanel .deco-plan-caption { margin: var(--space-2) var(--space-4) 0; } #resultsPanel .deco-plan-card { padding: 12px 14px; background: rgba(148,160,172,0.08); border: 1px solid rgba(148,160,172,0.45); border-radius: 8px; font-family: 'JetBrains Mono', monospace; font-size: 12px; line-height: 1.55; color: var(--text); } body.light-theme #resultsPanel .deco-plan-card { background: #f3f4f6; border-color: #94a0ac; } #resultsPanel .deco-plan-top { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: 6px; flex-wrap: wrap; } #resultsPanel .deco-plan-icon { color: #FF4433; font-size: 16px; line-height: 1.1; } #resultsPanel .deco-plan-title { font-family: 'Bebas Neue', sans-serif; font-size: 18px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #FF4433; line-height: 1.1; } #resultsPanel .deco-plan-title .mode-tag { color: #FF4433; } #resultsPanel .deco-plan-timestamp { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--muted); margin-left: auto; } #resultsPanel .deco-plan-summary { font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: var(--space-2); line-height: 1.45; } #resultsPanel .deco-plan-summary strong { color: #FF4433; font-weight: 700; } #resultsPanel .deco-plan-summary span { color: var(--muted); font-size: 11px; font-weight: 400; font-family: 'JetBrains Mono', monospace; } #resultsPanel .gas-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--space-2); } #resultsPanel .gas-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 16px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; border: 2px solid; white-space: nowrap; } #resultsPanel .gas-pill.bottom-gas { background: #fff; border-color: #4169E1; color: #111; } #resultsPanel .gas-pill.deco1, #resultsPanel .gas-pill.deco2, #resultsPanel .gas-pill.deco-gas { background: var(--gas-deco-chip-bg); border-color: #16a34a; color: #166534; } #resultsPanel .gas-pill.travel-gas { background: #fff; border-color: var(--gas-travel); color: #111; } body.light-theme #resultsPanel .gas-pill.bottom-gas { background: #f0f4ff; } body.light-theme #resultsPanel .gas-pill.travel-gas { background: #f0f4ff; color: #111; border-color: var(--gas-travel); } #resultsPanel .gas-pill .pill-dot { display: none; } #resultsPanel .gas-consumption-narcotic { margin: 0 0 var(--space-2); } #resultsPanel .gas-consumption-narcotic .alert { display: flex; align-items: flex-start; gap: var(--space-2); width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); font-size: 12px; line-height: 1.45; margin: 0; white-space: normal; overflow-wrap: anywhere; word-break: normal; } #resultsPanel .gas-consumption-narcotic .alert > * { min-width: 0; overflow-wrap: anywhere; } #resultsPanel .gas-consumption-narcotic .alert.narcotic-warn { background:#ff4433; border:1px solid var(--narcotic-banner-border, rgba(255,255,255,0.92)); color:#fff; font-weight:700; } #resultsPanel .gas-consumption-narcotic .alert.narcotic-warn :is(.tip-icon, strong, span) { color:#fff; } #resultsPanel .gas-consumption-narcotic .alert.narcotic-warn .tip-icon { opacity:0.85; } #resultsPanel .alert.cns-warn { margin-top:8px; background:#ffff00; border:1px solid rgba(148,160,172,0.72); color:#111; font-weight:700; } #resultsPanel .alert.cns-warn * { color:#111; } #resultsPanel .deco-params { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--muted); line-height: 1.6; } #resultsPanel .deco-params span { color: var(--text); font-weight: 600; } body.light-theme #resultsPanel #decoAlerts .alert.deco, body.light-theme #resultsPanel #decoAlertsNarcotic .alert.deco, body.light-theme #resultsPanel #decoAlerts .alert.narcotic-warn, body.light-theme #resultsPanel #decoAlertsNarcotic .alert.narcotic-warn { background: #ff4433; border: 1px solid var(--narcotic-banner-border, #111); color: #111; font-weight: 700; } body.light-theme #resultsPanel .gas-consumption-narcotic .alert.narcotic-warn { background: #ff4433; --narcotic-banner-border:#111; color: #111; } body.light-theme #resultsPanel .alert.cns-warn { border-color:#111; } body.light-theme #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-usage-inline-warning--critical, body.light-theme #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-usage-inline-warning--critical :is(.tip-icon, .gas-measure, .gas-unit, strong, span) { color:#E8590C; } body.light-theme #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-usage-inline-warning--nogas, body.light-theme #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-usage-inline-warning--nogas :is(.tip-icon, .gas-measure, .gas-unit, strong, span) { color:#FF3131; } body.light-theme #resultsPanel #decoAlerts .alert.deco *, body.light-theme #resultsPanel #decoAlertsNarcotic .alert.deco *, body.light-theme #resultsPanel #decoAlerts .alert.narcotic-warn *, body.light-theme #resultsPanel #decoAlertsNarcotic .alert.narcotic-warn * { color: #111; } body.light-theme #resultsPanel .gas-consumption-narcotic .alert.narcotic-warn * { color: #111; } body.light-theme #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-usage-title--narcotic { --narcotic-chip-border:#111; color:#111; } body.light-theme #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-usage-role--narcotic { color:#111; } #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-usage-card--nogas .gas-usage-inline-warning, #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-usage-card--nogas .gas-usage-inline-warning :is(.tip-icon, .gas-measure, .gas-unit, strong, span) { color:#FF3B30; } body.light-theme #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-usage-card--nogas .gas-usage-inline-warning, body.light-theme #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-usage-card--nogas .gas-usage-inline-warning :is(.tip-icon, .gas-measure, .gas-unit, strong, span) { color:#FF3131; } body.light-theme #resultsPanel #decoAlertsNarcotic .alert .tip-icon { color: #cc0000; opacity: 0.85; } #resultsPanel .schedule-wrap { padding: 0 var(--space-4) var(--space-3); overflow-x: auto; display: flex; flex-direction: column; gap: 0; } #resultsPanel .schedule-wrap > .deco-table-wrap { margin-bottom: 0; } #resultsPanel .deco-table.schedule-table { width: 100%; min-width: 520px; table-layout: fixed; margin-top: 0; font-size: 11px; } #resultsPanel .deco-table.schedule-table thead { display: table-header-group; } #resultsPanel .deco-table.schedule-table tbody { display: table-row-group; } #resultsPanel .deco-table.schedule-table tr { display: table-row; margin: 0; border: none; background: transparent; padding: 0; } #resultsPanel .deco-table.schedule-table td { display: table-cell; width: auto; padding: 5px 6px; border-bottom: 1px solid var(--border); overflow: visible; text-overflow: clip; } #resultsPanel .deco-table.schedule-table td::before { display: none; content: none; } #resultsPanel .deco-table.schedule-table td:first-child { width: 22px; text-align: center; background: transparent; } #resultsPanel .deco-table.schedule-table thead th { padding: 7px 6px; text-align: left; font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); border-bottom: 1px solid var(--border-hi); background: transparent; overflow: visible; text-overflow: clip; } #resultsPanel .deco-table.schedule-table thead th.align-r, #resultsPanel .deco-table.schedule-table td.align-r { text-align: right; } #resultsPanel .deco-table.schedule-table th:nth-child(1), #resultsPanel .deco-table.schedule-table td:nth-child(1) { width: 6%; } #resultsPanel .deco-table.schedule-table th:nth-child(2), #resultsPanel .deco-table.schedule-table td:nth-child(2) { width: 11%; text-align: right; } #resultsPanel .deco-table.schedule-table th:nth-child(3), #resultsPanel .deco-table.schedule-table td:nth-child(3) { width: 11%; text-align: right; } #resultsPanel .deco-table.schedule-table th:nth-child(4), #resultsPanel .deco-table.schedule-table td:nth-child(4) { width: 16%; } #resultsPanel .deco-table.schedule-table th:nth-child(5), #resultsPanel .deco-table.schedule-table td:nth-child(5) { width: 15%; text-align: center; } #resultsPanel .deco-table.schedule-table th:nth-child(6), #resultsPanel .deco-table.schedule-table td:nth-child(6) { width: 14%; } #resultsPanel .deco-table.schedule-table th:nth-child(7), #resultsPanel .deco-table.schedule-table td:nth-child(7) { width: 13%; } #resultsPanel .deco-table.schedule-table th:nth-child(8), #resultsPanel .deco-table.schedule-table td:nth-child(8) { width: 14%; } #resultsPanel .deco-table.schedule-table tbody td { padding: 5px 6px; border-bottom: 1px solid var(--border); white-space: nowrap; } #resultsPanel .deco-table.schedule-table .phase-cell { width: 22px; text-align: center; padding: 0 2px; } #resultsPanel .deco-table.schedule-table .ph { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; } #resultsPanel .deco-table.schedule-table .ph-descent { color: var(--red); } #resultsPanel .deco-table.schedule-table .ph-bottom { color: var(--accent); } #resultsPanel .deco-table.schedule-table .ph-ascent, #resultsPanel .deco-table.schedule-table .ph-surface { color: #FFBF00; } #resultsPanel .deco-table.schedule-table .ph-deco { color: var(--red); } #resultsPanel .deco-table.schedule-table .ph-switch { color: #16a34a; } #resultsPanel .deco-table.schedule-table .col-depth { font-weight: 700; font-size: 12px; } #resultsPanel .deco-table.schedule-table .col-time { font-variant-numeric: tabular-nums; } #resultsPanel .deco-table.schedule-table .col-gas { font-weight: 600; text-align: center; } #resultsPanel .deco-table.schedule-table .col-ppo2 { font-variant-numeric: tabular-nums; text-align: right; } #resultsPanel .deco-table.schedule-table .col-cns { font-variant-numeric: tabular-nums; text-align: right; } #resultsPanel .deco-table.schedule-table .col-ead { color: var(--text-faint); text-align: right; } #resultsPanel .rec-block-card { border: 1px solid color-mix(in oklab, var(--red) 35%, var(--border)); background: color-mix(in oklab, var(--red) 6%, var(--card)); } #resultsPanel .rec-block-card .card-title { color: var(--red); letter-spacing: 0.04em; } #resultsPanel .deco-table.schedule-table tr.row-switch { background: transparent; } #resultsPanel .deco-table.schedule-table tr.row-switch td { border-bottom: none; } #resultsPanel .deco-table.schedule-table tr.row-switch .col-gas { font-weight: 600; } /* V4 schedule gas-switch contract: renderer writes data-phase, not row-switch. */ #resultsPanel .deco-table.schedule-table tr[data-phase="switch"], #resultsPanel .deco-table.schedule-table tr[data-phase^="contingency-switch"] { background: transparent; } #resultsPanel .deco-table.schedule-table tr[data-phase="switch"] td, #resultsPanel .deco-table.schedule-table tr[data-phase^="contingency-switch"] td { border-bottom: none; } #resultsPanel .deco-table.schedule-table tr[data-phase="switch"] td, #resultsPanel .deco-table.schedule-table tr[data-phase^="contingency-switch"] td { font-size: inherit; border-bottom: none; } #resultsPanel .deco-table.schedule-table tr[data-phase="switch"] td:first-child, #resultsPanel .deco-table.schedule-table tr[data-phase^="contingency-switch"] td:first-child { text-align: center; } #resultsPanel .legend-item.legend-ascent { color: #FFBF00; } #resultsPanel .legend-item.legend-switch { color: #16a34a; } body.light-theme #resultsPanel .deco-table.schedule-table .ph-switch, body.light-theme #resultsPanel .legend-item.legend-switch { color: #16a34a; } #resultsPanel .deco-table.schedule-table tr[data-phase="descent"] :is(td.phase-cell, td.col-depth, td.col-time.stop, td.col-time.run) { color: var(--red); } #resultsPanel .deco-table.schedule-table tr[data-phase="bottom"] :is(td.phase-cell, td.col-depth, td.col-time.stop, td.col-time.run) { color: var(--accent); } #resultsPanel .deco-table.schedule-table tr[data-phase="ascent"] :is(td.phase-cell, td.col-depth, td.col-time.stop, td.col-time.run) { color: #FFBF00; } #resultsPanel .deco-table.schedule-table tr[data-phase="deco"] :is(td.phase-cell, td.col-depth, td.col-time.stop, td.col-time.run) { color: var(--red); } #resultsPanel .deco-table.schedule-table tr[data-phase="safety"] :is(td.phase-cell, td.col-depth, td.col-time.stop, td.col-time.run) { color: var(--green); } #resultsPanel .deco-table.schedule-table tr[data-phase="surface"] :is(td.phase-cell, td.col-depth, td.col-time.stop, td.col-time.run) { color: #FFBF00; } #resultsPanel .deco-table.schedule-table tr[data-phase="switch"] :is(td.phase-cell, td.col-depth, td.col-time.stop, td.col-time.run), #resultsPanel .deco-table.schedule-table tr[data-phase^="contingency-switch"] :is(td.phase-cell, td.col-depth, td.col-time.stop, td.col-time.run) { color: #16a34a; } #resultsPanel .deco-table.schedule-table :is(.col-gas, .col-ppo2, .col-cns, .col-ead) { color: var(--text); } #resultsPanel .deco-table.schedule-table tr.row-summary td { background: color-mix(in oklab, var(--accent) 4%, transparent); border-top: 1px solid var(--border-hi); border-bottom: 1px solid var(--border); padding: 9px 6px; font-size: 10px; color: var(--text-muted); } #resultsPanel .deco-table.schedule-table .summary-stat span { color: var(--text); font-weight: 600; } #resultsPanel .schedule-totals { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 9px 0 0; font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); border-top: 1px solid var(--border-hi); margin-top: var(--space-2); } #resultsPanel .schedule-totals .stat strong { color: var(--text); font-weight: 600; } #resultsPanel .deco-table-legend.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-3); font-family: var(--font-mono); font-size: 9.5px; color: var(--text-faint); } #resultsPanel .legend-item { display: flex; align-items: center; gap: 5px; white-space: nowrap; } #resultsPanel .leg-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } #resultsPanel .leg-icon { display: inline-flex; width: 14px; align-items: center; justify-content: center; flex-shrink: 0; } @media (max-width: 640px) { #resultsPanel .schedule-wrap { padding-left: var(--space-2); padding-right: var(--space-2); overflow-x: visible; } #resultsPanel .schedule-wrap > .deco-table-wrap { width: 100%; overflow-x: visible; } #resultsPanel .deco-table.schedule-table { width: 100%; min-width: 0; table-layout: fixed; font-size: 10px; } #resultsPanel .deco-table.schedule-table thead th { padding: 6px 2px; font-size: 8px; letter-spacing: 0.08em; } #resultsPanel .deco-table.schedule-table tbody td { padding: 4px 2px; font-size: 10px; letter-spacing: 0; } #resultsPanel .deco-table.schedule-table th:nth-child(1), #resultsPanel .deco-table.schedule-table td:nth-child(1) { width: 7%; } #resultsPanel .deco-table.schedule-table th:nth-child(2), #resultsPanel .deco-table.schedule-table td:nth-child(2) { width: 12%; } #resultsPanel .deco-table.schedule-table th:nth-child(3), #resultsPanel .deco-table.schedule-table td:nth-child(3) { width: 11%; } #resultsPanel .deco-table.schedule-table th:nth-child(4), #resultsPanel .deco-table.schedule-table td:nth-child(4) { width: 15%; text-align: right; } #resultsPanel .deco-table.schedule-table th:nth-child(5), #resultsPanel .deco-table.schedule-table td:nth-child(5) { width: 15%; text-align: center; } #resultsPanel .deco-table.schedule-table th:nth-child(6), #resultsPanel .deco-table.schedule-table td:nth-child(6) { width: 13%; text-align: right; } #resultsPanel .deco-table.schedule-table th:nth-child(7), #resultsPanel .deco-table.schedule-table td:nth-child(7) { width: 13%; text-align: right; } #resultsPanel .deco-table.schedule-table th:nth-child(8), #resultsPanel .deco-table.schedule-table td:nth-child(8) { width: 14%; text-align: right; } #resultsPanel .deco-table.schedule-table .phase-cell { padding: 0 1px; } #resultsPanel .deco-table.schedule-table .ph { width: 16px; height: 16px; } #resultsPanel .deco-table.schedule-table .col-depth { font-size: 10px; } #resultsPanel .deco-table.schedule-table .col-gas { font-size: 9.5px; } #resultsPanel .deco-table.schedule-table .col-cns { font-size: 9px; } #resultsPanel .deco-table.schedule-table .col-ead { font-size: 9px; } #resultsPanel .schedule-totals { gap: 3px 10px; font-size: 9px; padding: 8px 6px; } } /* Tissue saturation — status colors (bars + compartment detail table) */ .deco-table.tissue-table tr.tissue-sat-safe td { background: var(--status-green-dim); } .deco-table.tissue-table tr.tissue-sat-caution td { background: var(--status-orange-dim); } .deco-table.tissue-table tr.tissue-sat-warn td { background: var(--status-red-dim); } .deco-table.tissue-table tr.tissue-sat-safe .tissue-sat-pct, .deco-table.tissue-table tr.tissue-sat-safe .tissue-sat-status { color: var(--status-green); font-weight: 600; } .deco-table.tissue-table tr.tissue-sat-caution .tissue-sat-pct, .deco-table.tissue-table tr.tissue-sat-caution .tissue-sat-status { color: var(--status-orange); font-weight: 600; } .deco-table.tissue-table tr.tissue-sat-warn .tissue-sat-pct, .deco-table.tissue-table tr.tissue-sat-warn .tissue-sat-status { color: var(--status-red); font-weight: 600; } .deco-table.tissue-table tr.tissue-sat-safe:hover td { background: color-mix(in oklab, var(--status-green) 16%, transparent); } .deco-table.tissue-table tr.tissue-sat-caution:hover td { background: color-mix(in oklab, var(--status-orange) 20%, transparent); } .deco-table.tissue-table tr.tissue-sat-warn:hover td { background: color-mix(in oklab, var(--status-red) 16%, transparent); } #gasWarningBanner.gas-warning-banner { display: none; align-items: flex-start; gap: var(--space-2); width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; padding: var(--space-2) var(--space-3); background: #fff0f0; border: 1px solid #cc0000; border-radius: var(--radius-md); color: #cc0000; font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0; line-height: 1.45; margin-top: var(--space-2); white-space: normal; overflow-wrap: anywhere; word-break: normal; } #gasWarningBanner.gas-warning-banner > span[aria-hidden="true"], #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) .gas-usage-inline-warning > span[aria-hidden="true"] { font-size: 12px; line-height: 1.45; flex-shrink: 0; } #gasWarningBanner.gas-warning-banner > * { min-width: 0; overflow-wrap: anywhere; } body.light-theme #gasWarningBanner.gas-warning-banner { background: #fff0f0; border-color: #cc0000; color: #cc0000; } @media (min-width: 641px) { .app { padding-bottom: var(--space-4); } } @media (max-width: 640px) { .planner-main.visible { display: block; } #recPlannerView, #tecPlannerView, #resultsPanel { grid-column: auto; grid-row: auto; } #resultsPanel:not(.has-results) { display: none !important; } #resultsPanel.has-results { display: flex !important; } .app { padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); } #headerTopRow .mode-toggle.algo-toggle { display: none !important; } #resultsPanel #decoAlerts, #resultsPanel #decoAlertsNarcotic { margin-left: var(--space-2); margin-right: var(--space-2); max-width: calc(100% - var(--space-2) * 2); } #resultsPanel :is(#gasConsumptionSummary, #emergencyGasConsumption) { padding-left: var(--space-2); padding-right: var(--space-2); } #resultsPanel .result-tabs-nav { flex-wrap: wrap; overflow-x: visible; } #resultsPanel .result-tab-btn { flex: 1 1 calc(50% - 2px); min-width: 0; padding: 7px 8px; text-align: center; font-size: 9px; letter-spacing: 0.045em; } #resultsPanel .rec-profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } #resultsPanel .rec-profile-stats .stat:first-child { grid-column: span 2; } } .tools-page-wrap { display: none; flex-direction: column; gap: var(--space-4); } .tools-page-wrap.visible { display: flex; } .settings-page-wrap { display: none; flex-direction: column; gap: var(--space-4); width: 100%; max-width: none; } .settings-page-wrap.visible { display: flex; } .settings-panel-body { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: var(--space-4) var(--space-5); } .settings-field-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; } .settings-version-label { order: 3; flex: 0 0 100%; text-align: center; } .settings-app-links { order: 2; flex: 0 0 100%; } .app-shell-footer-links { display: none !important; } .settings-app-links { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 0; padding-top: 12px; border-top: 1px solid var(--border); } .settings-app-links-title { display: none; } .settings-app-link-list { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; } .settings-app-link-list a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--muted); text-decoration: none; transition: color 0.18s ease, transform 0.18s ease; } .settings-app-link-list a:hover { color: var(--accent); transform: translateY(-1px); } .settings-app-link-icon { width: 32px; height: 32px; border-radius: 8px; border: 0; object-fit: contain; flex-shrink: 0; } .settings-app-link-glyph { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: 0 0 22px; border-radius: 6px; border: 1px solid var(--border-hi); background: var(--surface-2); color: var(--accent); font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0; } .settings-app-link-svg { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 8px; border: 0; background: transparent; color: currentColor; } .settings-app-link-svg svg { width: 30px; height: 30px; fill: currentColor; display: block; } .settings-app-link-svg--instagram { color: #d92e7f; } .settings-app-link-svg--thingiverse { color: #2456ff; } .settings-donate-row { display: flex; justify-content: center; width: 100%; } .settings-donate-link { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 38px; padding: 8px 18px; border: 1px solid rgba(0, 112, 186, 0.45); border-radius: 999px; background: color-mix(in oklab, #0070ba 8%, var(--surface)); color: #0070ba; text-decoration: none; font-family: var(--font-mono); font-size: 11px; font-weight: 700; } .settings-donate-link:hover { border-color: #0070ba; background: color-mix(in oklab, #0070ba 14%, var(--surface)); } .settings-paypal-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 5px; background: #0070ba; color: #fff; font-family: Arial, sans-serif; font-size: 14px; font-weight: 800; font-style: italic; } .vpm-mode-row { display: none; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-2) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .vpm-mode-row.visible { display: flex; } @media (max-width: 767px) { .settings-panel-body { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: var(--space-4); } .settings-field-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 8px 10px; } .settings-field-row .tip-icon { justify-self: start; } .settings-field-row select, .settings-field-row input { justify-self: start; max-width: 100%; } .settings-version-label, .settings-app-links { flex-basis: auto; width: 100%; } .settings-app-link-list { gap: 8px; } } .header-actions { display: flex; align-items: center; gap: 10px; padding-right: 14px; flex-shrink: 0; margin-left: auto; } .theme-pill-toggle { background: none; border: none; padding: 0; cursor: pointer; line-height: 0; flex-shrink: 0; } .theme-pill-toggle:focus-visible .theme-pill-track { outline: 2px solid color-mix(in oklab, var(--theme-sun) 55%, transparent); outline-offset: 2px; } .theme-pill-track { --theme-pill-pad: 3px; position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; justify-items: center; width: 54px; height: 28px; padding: var(--theme-pill-pad); border-radius: 999px; border: 1px solid var(--border-hi); background: var(--surface-2); box-sizing: border-box; transition: background 0.2s ease, border-color 0.2s ease; } body:not(.light-theme) .theme-pill-track { background: color-mix(in oklab, var(--theme-sun) 4%, var(--surface-2)); } body.light-theme .theme-pill-track { background: color-mix(in oklab, var(--theme-sun) 6%, var(--surface-2)); } .theme-pill-thumb { position: absolute; top: var(--theme-pill-pad); left: var(--theme-pill-pad); width: calc((100% - var(--theme-pill-pad) * 2) / 2); height: calc(100% - var(--theme-pill-pad) * 2); border-radius: 50%; background: var(--theme-thumb-sun); transition: transform 0.2s ease, background 0.2s ease; z-index: 1; pointer-events: none; } body.light-theme .theme-pill-thumb { transform: translateX(0); background: var(--theme-thumb-sun); } body:not(.light-theme) .theme-pill-thumb { transform: translateX(100%); background: #f1f5f9; } .theme-pill-icon { position: relative; z-index: 2; display: block; width: 14px; height: 14px; color: var(--theme-moon-idle); pointer-events: none; flex-shrink: 0; } .theme-pill-sun { grid-column: 1; } .theme-pill-moon { grid-column: 2; } .theme-pill-sun circle { fill: currentColor; stroke: none; } .theme-pill-sun path { fill: none; stroke: var(--theme-sun-rays); stroke-width: 2; } body.light-theme .theme-pill-sun { color: var(--theme-sun-on-thumb); } body.light-theme .theme-pill-sun path { stroke: var(--theme-sun-on-thumb); } body.light-theme .theme-pill-moon { color: var(--theme-moon-idle); } body:not(.light-theme) .theme-pill-sun { color: var(--theme-sun); } body:not(.light-theme) .theme-pill-moon { color: var(--theme-moon-on-thumb); } .header-ref-btn { width: 28px; height: 28px; min-width: 28px; padding: 0; margin: 0; border-radius: 50%; border: 1px solid var(--border-hi); background: var(--surface-2); color: var(--tip); font-family: var(--font-mono); font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .header-ref-btn:hover { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 35%, transparent); } .tools-page-wrap .card { border-radius: var(--radius-xl); } #headerTopRow { display: flex; flex-wrap: wrap; align-items: center; width: 100%; box-sizing: border-box; background: var(--surface); border: 1px solid var(--border-hi); border-radius: var(--radius-lg); /* Match .algo-bar-btn vertical rhythm (10px) */ padding: 10px var(--space-2); } #headerTopRow .brand-lockup { display: flex; align-items: center; gap: 10px; padding-left: 14px; flex-shrink: 0; min-width: 0; } #headerTopRow .brand-logo { display: block; height: 48px; width: auto; object-fit: contain; object-position: left center; flex-shrink: 0; background: transparent; border: none; border-radius: 0; } #headerTopRow .brand-text h1 { font-size: 20px; letter-spacing: 2px; } #headerTopRow .brand-text p { margin-top: 2px; font-size: 8px; letter-spacing: 1.5px; } .settings-version-label { color: var(--muted); font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; opacity: 0.72; } .header-warn { font-size: var(--text-xs); font-weight: 600; color: var(--red); background: var(--red-dim); border: 1px solid color-mix(in oklab, var(--red) 30%, transparent); border-radius: var(--radius-md); padding: 4px 10px; cursor: pointer; } .brand-text h1 .algo-label { color: var(--accent); } @media (max-width: 640px) { #headerTopRow .brand-lockup { gap: 8px; padding-left: 10px; } #headerTopRow .brand-logo { height: 40px; width: auto; } #headerTopRow .brand-text h1 { font-size: 17px; letter-spacing: 1.5px; } #headerTopRow .brand-text p { font-size: 7px; letter-spacing: 1.2px; } } #algoRow, #algorithmSelect { display: none !important; } #gfPresetsMount #gfPresetSelect { display: none !important; } #gfPresetsMount #gfCustomRow { margin-top: var(--space-2); width: 100%; flex-wrap: wrap; align-items: center; gap: 4px; display: none; } #gfPresetsMount #gfCustomRow.is-open { display: flex !important; } .hidden-v3 { display: none !important; } @media (max-width: 600px) { .metric-grid { grid-template-columns: repeat(2, 1fr); } #resultsPanel .metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } #resultsPanel .metric-card { min-width: 0; padding: 8px 6px; border-radius: var(--radius-md); } #resultsPanel .metric-val { font-size: 15px; line-height: 1.05; white-space: nowrap; } #resultsPanel .metric-val .unit { font-size: 9px; margin-left: 1px; } #resultsPanel .metric-lbl { font-size: 7px; letter-spacing: 0.06em; line-height: 1.05; } .mode-btn { padding: 6px 8px; font-size: 10px; } } @media (prefers-reduced-motion: reduce) { .lsp-slider::-webkit-slider-thumb, .mode-btn, .result-tab-btn, #resultsPanel .result-tab-btn, .theme-pill-track, .theme-pill-thumb, #resultsPanel #contingencyScheduleStack .deco-contingency-calc { transition: none !important; } } @media print { /* Allowed !important: print/PDF capture must override live tab/mobile state for a complete export page. */ #resultsPanel { overflow: visible !important; break-inside: avoid; } #resultsPanel .result-tabs-nav, #resultsPanel .deco-contingency-calc, #resultsPanel #tableViewToggle, .theme-pill, .header-ref-btn { display: none !important; } #resultsPanel .result-tab-pane { display: none !important; } #resultsPanel #resultTab-profile { display: flex !important; } #resultsPanel #resultMetricStrip, #resultsPanel #resultChipRow, #resultsPanel #decoAlerts, #resultsPanel #decoAlertsNarcotic, #resultsPanel .schedule-wrap, #resultsPanel .deco-table-legend.legend { display: block !important; } #resultsPanel #decoAlerts .alert.deco, #resultsPanel #decoAlertsNarcotic .alert.deco, #resultsPanel #decoAlerts .alert.narcotic-warn, #resultsPanel #decoAlertsNarcotic .alert.narcotic-warn { background: #fff !important; border: 2px solid #111 !important; color: #111 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } #resultsPanel .deco-table.schedule-table tr, #resultsPanel .deco-table.schedule-table td, #resultsPanel .schedule-totals { break-inside: avoid; page-break-inside: avoid; } #resultsPanel .deco-table.schedule-table .ppo2-crit { color: #b91c1c !important; } #resultsPanel .deco-table.schedule-table .ppo2-warn { color: #92400e !important; } }