@import url("../tokens/tokens.css");

@font-face {
    font-family: "Exo 2";
    src: url("../brand/fonts/Exo_2/Exo2-VariableFont_wght.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../brand/fonts/Inter/Inter-VariableFont_opsz-wght.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "JetBrains Mono";
    src: url("../brand/fonts/JetBrains_Mono/JetBrainsMono-VariableFont_wght.ttf") format("truetype");
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: light;
    --kvt-sidebar-width: 278px;
    --kvt-radius: 8px;
    --kvt-shadow: 0 18px 44px rgba(16, 35, 49, .12);
    --kvt-grid-line: rgba(40, 75, 99, .1);
    --kvt-orange-soft: rgba(217, 106, 29, .18);
    --kvt-info-soft: rgba(127, 231, 242, .12);
    --kvt-ui-accent: var(--kvt-deep-cenote);
    --kvt-ui-accent-soft: rgba(40, 75, 99, .1);
    --kvt-ui-accent-border: rgba(40, 75, 99, .38);
    --kvt-success-soft: rgba(95, 167, 119, .14);
    --kvt-warning-soft: rgba(244, 185, 66, .16);
    --kvt-danger-soft: rgba(217, 83, 79, .16);
    --kvt-focus-ring: var(--kvt-deep-cenote);
    --kvt-sidebar-bg: linear-gradient(180deg, #ffffff, var(--kvt-wet-limestone));
    --kvt-top-row-bg: rgba(247, 250, 251, .94);
    --kvt-panel-bg: rgba(255, 255, 255, .94);
    --kvt-metric-bg: linear-gradient(180deg, #ffffff, rgba(221, 231, 236, .88));
    --kvt-tool-result-bg: linear-gradient(180deg, rgba(127, 231, 242, .12), rgba(221, 231, 236, .62)), #ffffff;
    --kvt-grid-bg: #ffffff;
    --kvt-grid-hover-bg: rgba(221, 231, 236, .68);
    --kvt-input-bg: #ffffff;
    --kvt-outline-button-text: var(--kvt-deep-cenote);
    --kvt-nav-active-bg: var(--kvt-deep-cenote);
    --kvt-nav-active-text: var(--kvt-cave-white);
    --kvt-pill-text: var(--kvt-abyss-outline);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --kvt-shadow: 0 20px 60px rgba(0, 0, 0, .28);
    --kvt-grid-line: rgba(127, 231, 242, .08);
    --kvt-ui-accent: var(--kvt-info);
    --kvt-ui-accent-soft: rgba(127, 231, 242, .1);
    --kvt-ui-accent-border: var(--kvt-cenote-surface);
    --kvt-focus-ring: var(--kvt-info);
    --kvt-sidebar-bg: linear-gradient(180deg, rgba(18, 50, 70, .76), rgba(7, 20, 28, .98)), var(--kvt-midnight-cave);
    --kvt-top-row-bg: rgba(11, 29, 41, .92);
    --kvt-panel-bg: rgba(11, 29, 41, .94);
    --kvt-metric-bg: linear-gradient(180deg, rgba(18, 50, 70, .82), var(--kvt-surface));
    --kvt-tool-result-bg: linear-gradient(180deg, rgba(127, 231, 242, .06), rgba(18, 50, 70, .24)), var(--kvt-midnight-cave);
    --kvt-grid-bg: var(--kvt-midnight-cave);
    --kvt-grid-hover-bg: rgba(18, 50, 70, .72);
    --kvt-input-bg: var(--kvt-midnight-cave);
    --kvt-outline-button-text: var(--kvt-wet-limestone);
    --kvt-nav-active-bg: var(--kvt-cenote-surface);
    --kvt-nav-active-text: var(--kvt-text);
    --kvt-pill-text: var(--kvt-wet-limestone);
}

html,
body {
    min-height: 100%;
    margin: 0;
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
    background:
        linear-gradient(90deg, var(--kvt-grid-line) 1px, transparent 1px),
        linear-gradient(180deg, var(--kvt-grid-line) 1px, transparent 1px),
        var(--kvt-bg);
    background-size: 42px 42px;
    color: var(--kvt-text);
}

body {
    font-size: 16px;
}

a {
    color: var(--kvt-ui-accent);
}

h1,
h2,
h3 {
    font-family: "Exo 2", "Inter", sans-serif;
    letter-spacing: 0;
    color: var(--kvt-text);
}

h1:focus {
    outline: none;
}

.page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--kvt-sidebar-width) minmax(0, 1fr);
}

.sidebar {
    position: relative;
    background: var(--kvt-sidebar-bg);
    color: var(--kvt-text);
    border-right: 1px solid var(--kvt-cenote-surface);
}

.sidebar::after {
    content: "";
    position: absolute;
    inset: 84px 18px auto auto;
    width: 92px;
    height: 210px;
    pointer-events: none;
    opacity: .18;
    background:
        linear-gradient(90deg, transparent 46%, var(--kvt-ui-accent) 47%, var(--kvt-ui-accent) 53%, transparent 54%),
        linear-gradient(135deg, transparent 44%, var(--kvt-safety-orange) 45%, var(--kvt-safety-orange) 55%, transparent 56%);
}

.main-shell {
    min-width: 0;
}

.top-row {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    padding: 0 26px;
    background: var(--kvt-top-row-bg);
    border-bottom: 1px solid var(--kvt-border);
    backdrop-filter: blur(14px);
}

.top-lockup {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    font-family: "Exo 2", "Inter", sans-serif;
    font-weight: 700;
    color: var(--kvt-text);
}

.top-lockup-separator {
    width: 1px;
    height: 22px;
    background: var(--kvt-cenote-surface);
}

.top-lockup-module {
    color: var(--kvt-text-muted);
    font-family: "Inter", sans-serif;
    font-size: .86rem;
    font-weight: 500;
}

.top-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.theme-toggle,
.language-combo {
    min-height: 34px;
    border: 1px solid var(--kvt-border);
    border-radius: 999px;
    background: var(--kvt-surface);
    color: var(--kvt-text);
    font: 600 .84rem "Inter", sans-serif;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    cursor: pointer;
}

.theme-toggle:hover,
.language-combo:hover,
.theme-toggle:focus-visible,
.language-combo:focus-visible {
    border-color: var(--kvt-focus-ring);
    outline: none;
}

.theme-toggle-indicator {
    position: relative;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: var(--kvt-safety-orange);
    box-shadow: inset -5px 0 0 rgba(7, 20, 28, .34);
}

html[data-theme="light"] .theme-toggle-indicator {
    background: var(--kvt-warning);
    box-shadow: 0 0 0 3px rgba(244, 185, 66, .18);
}

.language-picker {
    margin: 0;
}

.language-combo {
    max-width: 156px;
    padding: 0 34px 0 12px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.content {
    padding: 26px;
}

.page-footnote {
    max-width: 980px;
    margin: 16px 0 0;
    color: var(--kvt-text-muted);
    font-size: .76rem;
    font-style: italic;
    line-height: 1.45;
}

.page-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

.page-title h1 {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
}

.page-title h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
}

.page-title p {
    max-width: 860px;
    margin: 6px 0 0;
    color: var(--kvt-text-muted);
}

.toolbar-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.metric {
    position: relative;
    overflow: hidden;
    background: var(--kvt-metric-bg);
    border: 1px solid var(--kvt-border);
    border-radius: var(--kvt-radius);
    padding: 16px;
    box-shadow: var(--kvt-shadow);
}

.metric::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--kvt-safety-orange);
}

.metric-label {
    color: var(--kvt-text-muted);
    font-size: 13px;
    font-weight: 500;
}

.metric-value {
    margin-top: 8px;
    font-family: "JetBrains Mono", monospace;
    font-size: 1.42rem;
    font-weight: 700;
    color: var(--kvt-ui-accent);
}

.panel {
    background: var(--kvt-panel-bg);
    border: 1px solid var(--kvt-border);
    border-radius: var(--kvt-radius);
    padding: 18px;
    box-shadow: var(--kvt-shadow);
}

.panel + .panel,
.notice-panel + .panel,
.metric-grid + .notice-panel {
    margin-top: 18px;
}

.notice-panel {
    margin-bottom: 20px;
    padding: 15px 16px;
    border: 1px solid rgba(244, 185, 66, .42);
    border-left: 4px solid var(--kvt-warning);
    border-radius: var(--kvt-radius);
    background: var(--kvt-warning-soft);
    color: var(--kvt-text);
}

.notice-panel strong {
    color: var(--kvt-warning);
}

.tool-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, .8fr);
    gap: 18px;
}

.tool-inputs h2 {
    margin-top: 0;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(150px, 1fr));
    gap: 14px;
    margin: 16px 0;
}

.tool-result {
    border: 1px solid var(--kvt-cenote-surface);
    border-radius: var(--kvt-radius);
    padding: 16px;
    background: var(--kvt-tool-result-bg);
}

.result-stack {
    display: grid;
    gap: 12px;
}

.result-value {
    margin-top: 4px;
    font-family: "JetBrains Mono", monospace;
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--kvt-ui-accent);
}

.stage-calc-tool {
    --stage-frame: var(--kvt-deep-cenote);
    --stage-grid: color-mix(in srgb, var(--kvt-deep-cenote) 52%, var(--kvt-wet-limestone));
    --stage-header-bg: var(--kvt-info);
    --stage-header-text: var(--kvt-abyss-outline);
    --stage-title-bg: var(--kvt-deep-cenote);
    --stage-input-bg: color-mix(in srgb, var(--kvt-success) 38%, var(--kvt-cave-white));
    --stage-cell-bg: color-mix(in srgb, var(--kvt-info) 9%, var(--kvt-cave-white));
    --stage-panel-bg: color-mix(in srgb, var(--kvt-cave-white) 88%, var(--kvt-info-soft));
    display: grid;
    gap: 12px;
    color: var(--kvt-text);
}

html[data-theme="dark"] .stage-calc-tool {
    --stage-grid: var(--kvt-cenote-surface);
    --stage-header-bg: var(--kvt-cenote-surface);
    --stage-header-text: var(--kvt-text);
    --stage-title-bg: var(--kvt-deep-cenote);
    --stage-input-bg: color-mix(in srgb, var(--kvt-success) 30%, var(--kvt-midnight-cave));
    --stage-cell-bg: var(--kvt-midnight-cave);
    --stage-panel-bg: color-mix(in srgb, var(--kvt-midnight-cave) 88%, var(--kvt-cenote-surface));
}

.stage-sheet-title {
    border: 2px solid var(--kvt-info);
    background: var(--stage-title-bg);
    color: var(--kvt-cave-white);
    font-family: "Exo 2", "Inter", sans-serif;
    font-size: clamp(1.2rem, 2.2vw, 1.75rem);
    font-weight: 800;
    line-height: 1.1;
    padding: 7px 12px;
    text-align: center;
}

.stage-rule-strip {
    border-left: 4px solid var(--kvt-orange);
    background: color-mix(in srgb, var(--stage-panel-bg) 88%, var(--kvt-info));
    color: var(--kvt-text);
    font-weight: 800;
    padding: 8px 12px;
}

.stage-calc-grid {
    display: grid;
    grid-template-columns: minmax(430px, .9fr) minmax(560px, 1.45fr);
    gap: 14px;
    align-items: start;
}

.stage-sheet-panel {
    overflow: hidden;
    border: 1px solid var(--stage-grid);
    border-radius: 4px;
    background: var(--stage-panel-bg);
}

.stage-sheet-panel h2,
.stage-sheet-panel h3 {
    margin: 0;
    border-bottom: 1px solid var(--stage-grid);
    background: var(--stage-header-bg);
    color: var(--stage-header-text);
    font-family: "Exo 2", "Inter", sans-serif;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.15;
    padding: 7px 10px;
}

.stage-entry-list {
    display: grid;
}

.stage-entry-row {
    display: grid;
    grid-template-columns: minmax(230px, 1fr) minmax(128px, 168px) 54px;
    gap: 8px;
    align-items: center;
    min-height: 40px;
    margin: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--stage-grid) 62%, transparent);
    padding: 4px 8px;
    font-weight: 700;
}

.stage-mode-row {
    grid-template-columns: minmax(230px, 1fr) minmax(128px, 168px) 54px;
}

.stage-mode-row > span:last-child {
    display: none;
}

.stage-entry-row:last-child {
    border-bottom: 0;
}

.stage-entry-row > span:last-child {
    color: var(--kvt-text-muted);
    font-size: .88rem;
    font-weight: 700;
}

.stage-number-input,
.stage-select {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 30px;
    border: 1px solid var(--stage-grid);
    border-radius: 2px;
    background: var(--kvt-input-bg);
    color: var(--kvt-text);
    font: 800 .95rem "JetBrains Mono", monospace;
    padding: 3px 7px;
    text-align: right;
}

.stage-select {
    font-family: "Inter", sans-serif;
    text-align: left;
}

.stage-input-highlight {
    background: var(--stage-input-bg);
    color: var(--kvt-text);
}

.stage-calc-button {
    margin: 12px 8px 10px;
}

.stage-top-results {
    display: grid;
    grid-column: span 2;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    border-left: 4px solid var(--kvt-orange);
    background: var(--stage-panel-bg);
    padding: 10px;
}

.stage-top-results div {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    border: 1px solid var(--stage-grid);
    background: var(--stage-cell-bg);
    padding: 6px 8px;
}

.stage-top-results span {
    font-weight: 800;
}

.stage-top-results strong,
.stage-sheet-table td {
    font-family: "JetBrains Mono", monospace;
    font-weight: 800;
}

.stage-sheet-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    background: var(--stage-cell-bg);
}

.stage-sheet-table th,
.stage-sheet-table td {
    border: 1px solid var(--stage-grid);
    padding: 6px 8px;
    vertical-align: middle;
}

.stage-sheet-table th {
    color: var(--kvt-text);
    font-weight: 800;
    text-align: left;
}

.stage-sheet-table td {
    text-align: right;
}

.stage-sheet-table thead th {
    background: color-mix(in srgb, var(--stage-header-bg) 56%, var(--stage-cell-bg));
    color: var(--stage-header-text);
    text-align: center;
}

.stage-input-cell {
    display: grid;
    grid-template-columns: minmax(70px, 1fr) 30px;
    gap: 6px;
    align-items: center;
}

.stage-input-cell span {
    color: var(--kvt-text-muted);
    font-family: "Inter", sans-serif;
    font-size: .82rem;
    font-weight: 800;
}

.stage-note-cell {
    color: var(--kvt-text-muted);
    font-family: "Inter", sans-serif !important;
    font-size: .8rem;
    font-weight: 700 !important;
    line-height: 1.25;
    text-align: left !important;
}

.stage-result-cell {
    background: var(--stage-input-bg);
}

.stage-backgas-panel {
    grid-column: 1 / -1;
    order: 2;
}

.stage-recalc-panel {
    grid-column: 1 / -1;
    order: 3;
}

.stage-result-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-self: start;
    border-left: 4px solid var(--kvt-orange);
}

.stage-result-cards h3 {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--kvt-text);
    font-family: "Exo 2", "Inter", sans-serif;
    font-size: 1.08rem;
    font-weight: 800;
}

.stage-result-cards > div {
    border: 1px solid var(--stage-grid);
    background: var(--stage-cell-bg);
    padding: 8px 10px;
}

.stage-result-cards p {
    grid-column: 1 / -1;
    margin: 0;
}

.stage-summary-panel {
    max-width: none;
    order: 1;
}

.stage-assumption {
    margin: 4px 0 0;
    color: var(--kvt-text);
    font-weight: 800;
    text-align: center;
}

.al11-tool {
    --al11-frame: var(--kvt-deep-cenote);
    --al11-grid: color-mix(in srgb, var(--kvt-deep-cenote) 58%, var(--kvt-wet-limestone));
    --al11-header-bg: var(--kvt-deep-cenote);
    --al11-header-text: var(--kvt-cave-white);
    --al11-axis-bg: var(--kvt-cenote-surface);
    --al11-cell-bg: color-mix(in srgb, var(--kvt-info) 10%, var(--kvt-cave-white));
    --al11-cell-alt-bg: color-mix(in srgb, var(--kvt-info) 16%, var(--kvt-cave-white));
    --al11-depth-bg: var(--kvt-info);
    --al11-index-bg: var(--kvt-cave-white);
    --al11-input-bg: color-mix(in srgb, var(--kvt-info) 14%, var(--kvt-cave-white));
    --al11-input-text: var(--kvt-abyss-outline);
    --al11-data-text: var(--kvt-graphite);
    display: grid;
    gap: 14px;
}

html[data-theme="dark"] .al11-tool {
    --al11-frame: var(--kvt-cenote-surface);
    --al11-grid: color-mix(in srgb, var(--kvt-info) 22%, var(--kvt-cenote-surface));
    --al11-header-bg: var(--kvt-cenote-surface);
    --al11-header-text: var(--kvt-wet-limestone);
    --al11-axis-bg: var(--kvt-deep-cenote);
    --al11-cell-bg: color-mix(in srgb, var(--kvt-info) 8%, var(--kvt-midnight-cave));
    --al11-cell-alt-bg: color-mix(in srgb, var(--kvt-info) 14%, var(--kvt-midnight-cave));
    --al11-depth-bg: var(--kvt-info);
    --al11-index-bg: var(--kvt-midnight-cave);
    --al11-input-bg: color-mix(in srgb, var(--kvt-info) 12%, var(--kvt-cenote-surface));
    --al11-input-text: var(--kvt-wet-limestone);
    --al11-data-text: var(--kvt-wet-limestone);
}

.al11-toolbar {
    display: grid;
    grid-template-columns: minmax(260px, .72fr) minmax(280px, 1fr) auto;
    align-items: center;
    gap: 18px;
}

.al11-toolbar h2 {
    margin: 0;
    text-align: center;
}

.al11-print-button {
    justify-self: end;
    white-space: nowrap;
}

.al11-sac-control {
    display: grid;
    grid-template-columns: auto minmax(92px, 116px) minmax(0, auto);
    align-items: center;
    justify-content: start;
    gap: 8px;
    font-size: .95rem;
    font-weight: 700;
}

.al11-sac-control label {
    font-family: "Exo 2", "Inter", sans-serif;
    font-weight: 700;
    color: var(--kvt-text);
}

.al11-sac-control span {
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
    font-weight: 600;
    color: var(--kvt-text);
}

.al11-sac-input {
    width: 100%;
    min-height: 42px;
    padding: 0 10px;
    border: 2px solid var(--al11-frame);
    border-left-color: var(--kvt-safety-orange);
    border-radius: 0;
    background: var(--al11-input-bg);
    font-family: "JetBrains Mono", monospace;
    font-size: 1.05rem;
    font-weight: 700;
    text-align: right;
    color: var(--al11-input-text);
}

.al11-sac-input:focus-visible {
    outline: 3px solid var(--kvt-focus-ring);
    outline-offset: 2px;
}

.al11-table-wrap {
    overflow-x: auto;
    border: 2px solid var(--al11-frame);
    border-left: 4px solid var(--kvt-safety-orange);
    background: var(--al11-index-bg);
}

.al11-table {
    width: 100%;
    min-width: 880px;
    border-collapse: collapse;
    table-layout: fixed;
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
    color: var(--al11-data-text);
}

.al11-table th,
.al11-table td {
    height: 32px;
    padding: 4px 6px;
    border: 1px solid var(--al11-grid);
    text-align: right;
    vertical-align: middle;
    white-space: nowrap;
}

.al11-table thead th {
    height: 64px;
    background: var(--al11-header-bg);
    color: var(--al11-header-text);
    font-family: "Exo 2", "Inter", sans-serif;
    font-size: 1rem;
    font-weight: 800;
    text-align: center;
}

.al11-atm-heading {
    width: 54px;
    background: var(--al11-index-bg) !important;
    color: var(--al11-data-text) !important;
}

.al11-axis-heading {
    position: relative;
    width: 68px;
    overflow: hidden;
    background:
        linear-gradient(to top right, var(--kvt-info) 0 48%, var(--kvt-safety-orange) 48.5% 51.5%, var(--al11-axis-bg) 52% 100%) !important;
    color: var(--al11-header-text);
}

.axis-time,
.axis-depth {
    position: absolute;
    z-index: 1;
    font-weight: 800;
}

.axis-time {
    top: 8px;
    right: 12px;
}

.axis-depth {
    bottom: 12px;
    left: 16px;
    color: var(--kvt-abyss-outline);
}

.al11-time-heading {
    width: 60px;
}

.al11-table tbody th,
.al11-table tbody td {
    background: var(--al11-cell-bg);
    font-family: "JetBrains Mono", monospace;
    font-size: .95rem;
    font-weight: 500;
    color: var(--al11-data-text);
}

.al11-table tbody tr:nth-child(even) th,
.al11-table tbody tr:nth-child(even) td {
    background: var(--al11-cell-alt-bg);
}

.al11-table .al11-ata-cell {
    background: var(--al11-index-bg) !important;
    font-weight: 700;
}

.al11-depth-cell {
    background: var(--al11-depth-bg) !important;
    color: var(--kvt-abyss-outline) !important;
    font-weight: 700 !important;
    text-align: center !important;
}

.al11-legend {
    justify-self: start;
    display: grid;
    margin: 16px 0 0 142px;
    border: 1px solid var(--al11-grid);
    border-left: 3px solid var(--kvt-safety-orange);
    background: var(--kvt-panel-bg);
}

.al11-legend div {
    display: grid;
    grid-template-columns: 38px minmax(190px, auto);
    align-items: center;
}

.al11-legend div + div {
    border-top: 1px solid var(--al11-grid);
}

.al11-legend strong,
.al11-legend span {
    padding: 4px 7px;
    color: var(--kvt-text);
}

.al11-legend strong {
    border-right: 1px solid var(--al11-grid);
    font-family: "Exo 2", "Inter", sans-serif;
    text-align: center;
}

.muted {
    color: var(--kvt-text-muted);
}

.deco-tool {
    --deco-frame: var(--kvt-graphite);
    --deco-grid: var(--kvt-graphite);
    --deco-header-bg: color-mix(in srgb, var(--kvt-info) 42%, var(--kvt-cave-white));
    --deco-header-text: var(--kvt-abyss-outline);
    --deco-ndl-bg: color-mix(in srgb, var(--kvt-success) 24%, var(--kvt-cave-white));
    --deco-cell-bg: #ffffff;
    --deco-cell-text: var(--kvt-graphite);
    --deco-control-bg: color-mix(in srgb, var(--kvt-deep-cenote) 8%, var(--kvt-cave-white));
    display: grid;
    gap: 14px;
}

html[data-theme="dark"] .deco-tool {
    --deco-frame: var(--kvt-wet-limestone);
    --deco-grid: var(--kvt-cenote-surface);
    --deco-header-bg: var(--kvt-cenote-surface);
    --deco-header-text: var(--kvt-wet-limestone);
    --deco-ndl-bg: color-mix(in srgb, var(--kvt-success) 20%, var(--kvt-midnight-cave));
    --deco-cell-bg: var(--kvt-midnight-cave);
    --deco-cell-text: var(--kvt-wet-limestone);
    --deco-control-bg: color-mix(in srgb, var(--kvt-info) 7%, var(--kvt-midnight-cave));
}

.deco-control-bar {
    display: grid;
    grid-template-columns: minmax(170px, 1.1fr) repeat(2, minmax(110px, .7fr)) minmax(150px, .9fr) auto;
    gap: 10px;
    align-items: end;
    padding: 12px;
    border: 1px solid var(--kvt-border);
    border-left: 4px solid var(--kvt-safety-orange);
    background: var(--deco-control-bg);
}

.deco-control {
    display: grid;
    gap: 5px;
    margin: 0;
}

.deco-control span {
    color: var(--kvt-text-muted);
    font-size: 13px;
    font-weight: 700;
}

.deco-select,
.deco-number {
    width: 100%;
    box-sizing: border-box;
    height: 42px;
    min-height: 42px;
    border: 1px solid var(--kvt-ui-accent-border);
    border-radius: 4px;
    background: var(--kvt-input-bg);
    color: var(--kvt-text);
    font: 700 .92rem "Inter", sans-serif;
}

.deco-select {
    padding: 0 10px;
}

.deco-number {
    padding: 0 8px;
    font-family: "JetBrains Mono", monospace;
    text-align: right;
}

.deco-select:focus-visible,
.deco-number:focus-visible {
    outline: 3px solid var(--kvt-focus-ring);
    outline-offset: 2px;
}

.deco-print-button {
    align-self: end;
    height: 42px;
    min-height: 42px;
    white-space: nowrap;
}

.deco-title {
    margin: 0;
    text-align: center;
}

.deco-table-wrap {
    overflow-x: auto;
    border: 3px solid var(--deco-frame);
    border-left: 4px solid var(--kvt-safety-orange);
    background: var(--deco-cell-bg);
}

.deco-table {
    width: 100%;
    min-width: 884px;
    border-collapse: collapse;
    table-layout: fixed;
    color: var(--deco-cell-text);
}

.deco-table th,
.deco-table td {
    border: 2px solid var(--deco-grid);
    vertical-align: middle;
}

.deco-table thead th {
    height: 60px;
    background: var(--deco-header-bg);
    color: var(--deco-header-text);
    font-family: "Exo 2", "Inter", sans-serif;
    font-size: 1.08rem;
    font-weight: 800;
    text-align: center;
}

.deco-depth-heading,
.deco-depth-cell {
    width: 128px;
}

.deco-ndl-heading,
.deco-ndl-cell {
    width: 126px;
}

.deco-depth-cell,
.deco-ndl-cell {
    height: 70px;
    font-family: "JetBrains Mono", monospace;
    font-size: 1.12rem;
    font-weight: 800;
    text-align: center;
}

.deco-depth-cell {
    background: var(--deco-header-bg);
    color: var(--deco-header-text);
}

.deco-ndl-cell {
    background: var(--deco-ndl-bg);
    color: var(--deco-cell-text);
}

.deco-split-cell {
    position: relative;
    height: 70px;
    padding: 0;
    background:
        linear-gradient(to bottom right, transparent 49.2%, var(--deco-grid) 49.6% 50.4%, transparent 50.8%),
        var(--deco-cell-bg);
    color: var(--deco-cell-text);
    font-family: "JetBrains Mono", monospace;
    font-size: 1.05rem;
    font-weight: 800;
}

.deco-bg-minute,
.deco-o2-minute {
    position: absolute;
    min-width: 2ch;
    line-height: 1;
}

.deco-bg-minute {
    top: 11px;
    left: 18px;
}

.deco-o2-minute {
    right: 18px;
    bottom: 11px;
}

.deco-meta {
    display: grid;
    grid-template-columns: minmax(520px, 1fr) minmax(220px, 280px);
    gap: 24px;
    align-items: start;
    margin: 0 0 0 6px;
}

.deco-meta-left {
    display: flex;
    align-items: flex-start;
    gap: clamp(34px, 8vw, 156px);
    min-width: 0;
}

.deco-gas-summary {
    display: grid;
    grid-template-columns: 190px 86px;
    column-gap: 18px;
    align-items: center;
}

.deco-o2-label {
    grid-column: 2;
    margin-bottom: 8px;
    font: 800 1.16rem "Inter", sans-serif;
    text-align: center;
    color: var(--kvt-text);
}

.deco-gas-summary dl {
    display: grid;
    grid-column: 1 / -1;
    gap: 6px;
    margin: 0;
}

.deco-gas-summary dl div {
    display: grid;
    grid-template-columns: 190px 86px;
    column-gap: 18px;
    align-items: center;
}

.deco-gas-summary dt,
.deco-gas-summary dd {
    margin: 0;
    color: var(--kvt-text);
    font-weight: 700;
}

.deco-gas-summary dd {
    font-family: "JetBrains Mono", monospace;
    text-align: center;
}

.deco-legend {
    position: relative;
    flex: 0 0 auto;
    width: 104px;
    height: 70px;
    border: 3px solid var(--deco-frame);
    background:
        linear-gradient(to bottom right, transparent 48.8%, var(--deco-frame) 49.4% 50.6%, transparent 51.2%),
        var(--deco-cell-bg);
    color: var(--deco-cell-text);
    font-weight: 800;
}

.deco-legend span {
    position: absolute;
}

.deco-legend-bg {
    top: 10px;
    left: 12px;
}

.deco-legend-o2 {
    right: 10px;
    bottom: 10px;
}

.deco-approx {
    justify-self: end;
    width: min(100%, 300px);
    color: var(--deco-cell-text);
}

.deco-approx-title {
    margin-bottom: 2px;
    font-weight: 800;
}

.deco-approx-note {
    margin-bottom: 6px;
    color: var(--kvt-text-muted);
    font-size: .78rem;
    font-weight: 700;
}

.deco-approx-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    background: var(--deco-cell-bg);
    color: var(--deco-cell-text);
    font-family: "JetBrains Mono", monospace;
    font-size: .92rem;
    font-weight: 800;
}

.deco-approx-table + .deco-approx-table {
    margin-top: 10px;
}

.deco-approx-table th,
.deco-approx-table td {
    border: 2px solid var(--deco-grid);
    padding: 3px 8px;
}

.deco-approx-label-col {
    width: calc(100% - 68px);
}

.deco-approx-value-col {
    width: 68px;
}

.deco-approx-table th {
    text-align: left;
}

.deco-approx-table td {
    text-align: right;
}

.deco-approx-highlight {
    background: var(--deco-ndl-bg);
}

.kv-brand {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 94px;
    padding: 12px 10px 8px;
    color: var(--kvt-text);
    text-decoration: none;
}

.kv-brand-logo {
    display: block;
    width: 256px;
    max-width: calc(100% - 14px);
    height: auto;
}

.kv-brand-compact {
    display: none;
    width: 42px;
    height: 42px;
}

html[data-theme="dark"] .kv-brand-logo-light,
html[data-theme="light"] .kv-brand-logo-dark {
    display: none;
}

.nav-scrollable {
    position: relative;
    padding: 10px;
}

.nav-link {
    --kvt-nav-icon-slot: 1.5rem;
    --kvt-nav-icon-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 12px;
    border-radius: var(--kvt-radius);
    color: var(--kvt-text-muted);
    text-decoration: none;
    font-weight: 500;
    transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.nav-link:hover,
.nav-link.active {
    color: var(--kvt-nav-active-text);
    background: var(--kvt-nav-active-bg);
}

.nav-link.active {
    box-shadow: inset 3px 0 0 var(--kvt-safety-orange);
}

.nav-link .e-icons,
.kv-nav-icon {
    flex: 0 0 var(--kvt-nav-icon-slot);
    width: var(--kvt-nav-icon-slot);
    height: var(--kvt-nav-icon-slot);
    color: var(--kvt-ui-accent);
    line-height: 1;
}

.nav-link .e-icons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--kvt-nav-icon-size);
}

.kv-nav-icon {
    display: inline-block;
    background: currentColor;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: var(--kvt-nav-icon-size) var(--kvt-nav-icon-size);
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: var(--kvt-nav-icon-size) var(--kvt-nav-icon-size);
}

.kv-nav-icon-caves {
    --kvt-nav-icon-size: 1.08rem;
    mask-image: url("../brand/icons/kavetek-menu-caves.svg");
    -webkit-mask-image: url("../brand/icons/kavetek-menu-caves.svg");
}

html[data-theme="light"] .nav-link:hover .e-icons,
html[data-theme="light"] .nav-link.active .e-icons,
html[data-theme="light"] .nav-link:hover .kv-nav-icon,
html[data-theme="light"] .nav-link.active .kv-nav-icon {
    color: var(--kvt-info);
}

.nav-section {
    margin: 18px 12px 8px;
    color: var(--kvt-neutral);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.offline-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 6px 10px;
    border: 1px solid rgba(95, 167, 119, .38);
    background: var(--kvt-success-soft);
    color: var(--kvt-pill-text);
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
}

.offline-pill::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--kvt-success);
}

.difficulty {
    font-weight: 700;
    color: var(--kvt-ui-accent);
}

.difficulty-cookies {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    width: 100%;
    min-width: 0;
    line-height: 1;
    vertical-align: middle;
}

.difficulty-cookie-icon {
    display: block;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    object-fit: contain;
}

.route-token {
    display: inline-flex;
    gap: 6px;
    margin: 0 6px 6px 0;
    padding: 6px 9px;
    border: 1px solid var(--kvt-ui-accent-border);
    border-radius: 6px;
    background: var(--kvt-ui-accent-soft);
    color: var(--kvt-text);
}

.route-token-warning {
    border-color: rgba(244, 185, 66, .46);
    background: var(--kvt-warning-soft);
    color: var(--kvt-warning);
}

.text-muted {
    color: var(--kvt-text-muted) !important;
}

.e-btn.e-primary,
.e-css.e-btn.e-primary {
    background: var(--kvt-deep-cenote);
    border-color: var(--kvt-deep-cenote);
    color: var(--kvt-cave-white);
}

.e-btn.e-primary:hover,
.e-css.e-btn.e-primary:hover,
.e-btn.e-primary:focus,
.e-css.e-btn.e-primary:focus {
    background: var(--kvt-cenote-surface);
    border-color: var(--kvt-focus-ring);
    color: var(--kvt-cave-white);
}

.e-btn.e-outline,
.e-css.e-btn.e-outline {
    background: transparent;
    border-color: var(--kvt-deep-cenote);
    color: var(--kvt-outline-button-text);
}

.e-btn.e-outline:hover,
.e-css.e-btn.e-outline:hover {
    background: var(--kvt-cenote-surface);
    border-color: var(--kvt-ui-accent);
    color: var(--kvt-text);
}

html[data-theme="light"] .e-btn.e-outline:hover,
html[data-theme="light"] .e-css.e-btn.e-outline:hover {
    color: var(--kvt-cave-white);
}

.e-grid,
.e-grid .e-gridheader,
.e-grid .e-content,
.e-grid .e-table,
.e-grid .e-headercontent,
.e-grid .e-toolbar,
.e-grid .e-toolbar-items,
.e-grid .e-gridpager,
.e-pager {
    background: var(--kvt-grid-bg);
    color: var(--kvt-text);
    border-color: var(--kvt-border);
}

.e-grid .e-headercell,
.e-grid .e-rowcell {
    background: var(--kvt-grid-bg);
    color: var(--kvt-text);
    border-color: var(--kvt-cenote-surface);
}

.e-grid .e-headercelldiv {
    color: var(--kvt-text-muted);
    font-weight: 700;
}

.e-grid .e-altrow .e-rowcell,
.e-grid .e-row:hover .e-rowcell {
    background: var(--kvt-grid-hover-bg);
}

html[data-theme="light"] .e-grid,
html[data-theme="light"] .e-grid .e-gridheader,
html[data-theme="light"] .e-grid .e-content,
html[data-theme="light"] .e-grid .e-table,
html[data-theme="light"] .e-grid .e-headercontent,
html[data-theme="light"] .e-grid .e-toolbar,
html[data-theme="light"] .e-grid .e-toolbar-items,
html[data-theme="light"] .e-grid .e-toolbar .e-toolbar-item,
html[data-theme="light"] .e-grid .e-toolbar .e-tbar-btn,
html[data-theme="light"] .e-grid .e-toolbar .e-tbar-btn .e-icons,
html[data-theme="light"] .e-grid .e-toolbar .e-tbar-btn-text,
html[data-theme="light"] .e-grid .e-search,
html[data-theme="light"] .e-grid .e-gridpager,
html[data-theme="light"] .e-pager {
    background: var(--kvt-grid-bg) !important;
    color: var(--kvt-text) !important;
    border-color: var(--kvt-border) !important;
}

html[data-theme="light"] .e-grid .e-headercell,
html[data-theme="light"] .e-grid .e-rowcell {
    background: var(--kvt-grid-bg) !important;
    color: var(--kvt-text) !important;
    border-color: var(--kvt-border) !important;
}

html[data-theme="light"] .e-grid .e-headercelldiv,
html[data-theme="light"] .e-grid .e-rowcell *,
html[data-theme="light"] .e-pager,
html[data-theme="light"] .e-pager * {
    color: var(--kvt-text) !important;
}

html[data-theme="light"] .e-grid .e-altrow .e-rowcell,
html[data-theme="light"] .e-grid .e-row:hover .e-rowcell {
    background: var(--kvt-grid-hover-bg) !important;
}

html[data-theme="light"] .e-grid .e-toolbar .e-tbar-btn:hover,
html[data-theme="light"] .e-grid .e-toolbar .e-tbar-btn:focus {
    background: var(--kvt-wet-limestone) !important;
    color: var(--kvt-abyss-outline) !important;
}

.e-tab,
.e-tab .e-content,
.e-tab .e-tab-header,
.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
    background: transparent;
    color: var(--kvt-text);
}

.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
    color: var(--kvt-ui-accent);
}

.e-tab .e-tab-header .e-toolbar-item .e-tab-text {
    text-transform: none !important;
}

.e-tab .e-tab-header .e-indicator {
    background: var(--kvt-safety-orange);
}

html[data-theme="light"] .e-tab,
html[data-theme="light"] .e-tab .e-content,
html[data-theme="light"] .e-tab .e-content .e-item,
html[data-theme="light"] .e-tab .e-tab-header,
html[data-theme="light"] .e-tab .e-toolbar-items,
html[data-theme="light"] .e-tab .e-tab-header .e-toolbar-item,
html[data-theme="light"] .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
    background: transparent !important;
    color: var(--kvt-text) !important;
}

html[data-theme="light"] .e-tab .e-tab-header .e-toolbar-item .e-tab-text,
html[data-theme="light"] .e-tab .e-tab-header .e-toolbar-item .e-icons {
    color: var(--kvt-text) !important;
}

html[data-theme="light"] .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text,
html[data-theme="light"] .e-tab .e-tab-header .e-toolbar-item.e-active .e-icons {
    color: var(--kvt-deep-cenote) !important;
}

.e-input-group,
.e-control-wrapper.e-input-group {
    background: var(--kvt-input-bg);
    border-color: var(--kvt-cenote-surface);
    color: var(--kvt-text);
}

.e-input-group input,
.e-control-wrapper.e-input-group input {
    color: var(--kvt-text);
}

html[data-theme="light"] .e-input-group,
html[data-theme="light"] .e-control-wrapper,
html[data-theme="light"] .e-control-wrapper.e-input-group,
html[data-theme="light"] .e-float-input,
html[data-theme="light"] .e-float-input.e-control-wrapper,
html[data-theme="light"] .e-numeric.e-control-wrapper,
html[data-theme="light"] .e-numerictextbox,
html[data-theme="light"] .e-dropdownbase,
html[data-theme="light"] .e-dropdown-popup,
html[data-theme="light"] .e-popup,
html[data-theme="light"] .e-ddl.e-popup {
    background: #ffffff !important;
    color: var(--kvt-text) !important;
    border-color: var(--kvt-border) !important;
}

html[data-theme="light"] .e-input,
html[data-theme="light"] .e-input-group input,
html[data-theme="light"] .e-control-wrapper.e-input-group input,
html[data-theme="light"] .e-float-input input,
html[data-theme="light"] .e-numerictextbox input,
html[data-theme="light"] .e-dropdownbase .e-list-item,
html[data-theme="light"] .e-dropdown-popup .e-list-item,
html[data-theme="light"] .language-combo,
html[data-theme="light"] .language-combo option {
    background: #ffffff !important;
    color: var(--kvt-text) !important;
}

html[data-theme="light"] .e-float-text,
html[data-theme="light"] .e-float-input .e-float-text,
html[data-theme="light"] .e-control-wrapper .e-float-text,
html[data-theme="light"] .e-input-group-icon,
html[data-theme="light"] .e-spin-up,
html[data-theme="light"] .e-spin-down {
    color: var(--kvt-deep-cenote) !important;
}

html[data-theme="light"] .muted,
html[data-theme="light"] .tool-result p,
html[data-theme="light"] .tool-result .metric-label {
    color: var(--kvt-deep-cenote) !important;
}

html[data-theme="light"] .al11-sac-input,
html[data-theme="dark"] .al11-sac-input {
    background: var(--al11-input-bg) !important;
    border-color: var(--al11-frame) !important;
    border-left-color: var(--kvt-safety-orange) !important;
    color: var(--al11-input-text) !important;
}

html[data-theme="light"] .e-pager .e-pagercontainer,
html[data-theme="light"] .e-pager .e-numericcontainer,
html[data-theme="light"] .e-pager .e-parentmsgbar,
html[data-theme="light"] .e-pager .e-pagesizes,
html[data-theme="light"] .e-pager .e-currentitem,
html[data-theme="light"] .e-pager .e-numericitem,
html[data-theme="light"] .e-pager .e-link,
html[data-theme="light"] .e-pager .e-icons,
html[data-theme="light"] .e-pager .e-first,
html[data-theme="light"] .e-pager .e-prev,
html[data-theme="light"] .e-pager .e-next,
html[data-theme="light"] .e-pager .e-last,
html[data-theme="light"] .e-pager .e-firstpage,
html[data-theme="light"] .e-pager .e-prevpage,
html[data-theme="light"] .e-pager .e-nextpage,
html[data-theme="light"] .e-pager .e-lastpage,
html[data-theme="light"] .e-pager .e-firstpagedisabled,
html[data-theme="light"] .e-pager .e-prevpagedisabled,
html[data-theme="light"] .e-pager .e-nextpagedisabled,
html[data-theme="light"] .e-pager .e-lastpagedisabled,
html[data-theme="light"] .e-pager .e-pagercontainer > *,
html[data-theme="light"] .e-pager .e-numericcontainer > * {
    background: #ffffff !important;
    border-color: var(--kvt-border) !important;
    color: var(--kvt-text) !important;
    box-shadow: none !important;
}

html[data-theme="light"] .e-pager .e-currentitem,
html[data-theme="light"] .e-pager .e-currentitem:hover {
    background: var(--kvt-wet-limestone) !important;
    border-color: var(--kvt-deep-cenote) !important;
    color: var(--kvt-abyss-outline) !important;
}

#blazor-error-ui {
    color-scheme: dark;
    background: var(--kvt-warning);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, .28);
    box-sizing: border-box;
    color: var(--kvt-abyss-black);
    display: none;
    left: 0;
    padding: .7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: .75rem;
    top: .5rem;
}

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto;
}

.loading-progress circle {
    fill: none;
    stroke: var(--kvt-cenote-surface);
    stroke-width: .6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--kvt-info);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * .8), 500%;
    transition: stroke-dasharray .05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: 700;
    inset: calc(20vh + 3.25rem) 0 auto .2rem;
}

.loading-progress-text::after {
    content: var(--blazor-load-percentage-text, "Loading");
}

@media (max-width: 1000px) {
    .page {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .kv-brand {
        min-height: 68px;
        padding: 8px 12px;
    }

    .kv-brand-logo {
        width: 220px;
    }

    .nav-scrollable {
        display: flex;
        gap: 4px;
        overflow-x: auto;
    }

    .nav-section {
        display: none;
    }

    .metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tool-grid,
    .form-grid {
        grid-template-columns: 1fr;
    }

    .stage-calc-grid {
        grid-template-columns: 1fr;
    }

    .stage-result-cards,
    .stage-recalc-panel,
    .stage-backgas-panel {
        grid-column: auto;
    }

    .al11-toolbar {
        grid-template-columns: 1fr;
    }

    .al11-toolbar h2 {
        text-align: left;
    }

    .al11-print-button {
        justify-self: start;
    }

    .al11-legend {
        margin-left: 0;
    }

    .deco-control-bar {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }

    .deco-meta {
        align-items: flex-start;
        grid-template-columns: 1fr;
    }

    .deco-meta-left {
        gap: 40px;
    }
}

@media (max-width: 620px) {
    .content {
        padding: 16px;
    }

    .top-row {
        align-items: flex-start;
        flex-direction: column;
        min-height: auto;
        padding: 14px 16px;
    }

    .top-actions {
        justify-content: flex-start;
    }

    .page-title {
        align-items: flex-start;
        flex-direction: column;
    }

    .page-title h1 {
        font-size: 28px;
    }

    .metric-grid {
        grid-template-columns: 1fr;
    }

    .al11-sac-control {
        grid-template-columns: auto minmax(90px, 1fr);
        max-width: 100%;
    }

    .al11-sac-control span {
        grid-column: 2;
    }

    .al11-table {
        min-width: 880px;
    }

    .deco-control-bar {
        grid-template-columns: 1fr;
    }

    .deco-table {
        min-width: 884px;
    }

    .deco-gas-summary {
        grid-template-columns: 170px 78px;
    }

    .deco-gas-summary dl div {
        grid-template-columns: 170px 78px;
    }

    .deco-meta-left {
        align-items: flex-start;
        flex-direction: column;
    }

    .deco-approx {
        justify-self: start;
    }

    .stage-result-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stage-entry-row,
    .stage-input-cell {
        grid-template-columns: 1fr;
    }

    .stage-entry-row > span:last-child {
        grid-column: 1;
    }

    .stage-mode-row > span:last-child {
        display: none;
    }

    .stage-recalc-panel,
    .stage-backgas-panel {
        overflow-x: auto;
    }

    .stage-recalc-table,
    .stage-backgas-panel .stage-sheet-table {
        min-width: 620px;
    }
}