/* Theme variables */
:root{
    --bg: #0a1628; /* deep blue-black from banner */
    --panel: #0f1f35; /* slightly lighter blue */
    --muted: #1a2d47; /* blue-gray for controls */
    --accent: #00d9ff; /* cyan blue from logo */
    --accent-secondary: #0099cc; /* darker cyan */
    --text: #e8f4f8; /* light blue-white */
    --muted-text: #a8c5d4;
    --card: rgb(0 217 255 / 5%);
    --success: #00d9ff;
    --danger: #ff7b7b;
    --border: rgb(0 217 255 / 12%);
    --shadow: rgb(0 0 0 / 30%);
    --field-bg: color-mix(in srgb, var(--panel) 85%, transparent);
    --field-border: color-mix(in srgb, var(--border) 150%, transparent);
    --field-focus: color-mix(in srgb, var(--accent) 55%, transparent);
}

html.light-theme, body.light-theme{ 
    --bg: #e8f4f8;
    --panel: #d4ebf0;
    --muted: #c0dde5;
    --accent: #0099cc;
    --accent-secondary: #00d9ff;
    --text: #0a1628;
    --muted-text: #1a2d47;
    --card: rgb(0 153 204 / 8%);
    --success: #00b8d4;
    --danger: #ff6b6b;
    --border: rgb(0 153 204 / 20%);
    --shadow: rgb(0 153 204 / 15%);
    --field-bg: #fff;
    --field-border: #dcdde6;
    --field-focus: color-mix(in srgb, var(--accent) 55%, transparent);
}

html{
    scroll-behavior: smooth;
    font-size: clamp(0.9em, 0.75em + 0.5vw, 1.05em);
}

body { 
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    background-color: var(--bg);
    color: var(--text);
    margin: 0; 
    padding: 0; 
}

.form-field,
/* ===== Results tables (shared: Charms, Fire Crystals) ===== */
.results-wrap{ 
    margin: 1em; 
    padding: 0.75em; 
    background: color-mix(in srgb, var(--panel) 80%, transparent); 
    border: 0.0625em solid var(--border); 
    border-radius: 0.625em; 
    box-shadow: 0 0.25em 0.875em var(--shadow);
}

.results-table{ 
    width: 100%; 
    border-collapse: collapse; 
    background: var(--panel);
}

.results-table thead th{ 
    position: sticky; 
    top: 0; 
    background: color-mix(in srgb, var(--panel) 92%, transparent); 
    text-align: left; 
    padding: 0.625em 0.75em; 
    border-bottom: 0.0625em solid var(--border); 
    font-weight: 700; 
}

.results-table tbody td{ 
    padding: 0.625em 0.75em; 
    border-bottom: 0.0625em solid var(--border);
}

.results-table tbody tr:nth-child(even){ 
    background: color-mix(in srgb, var(--card) 70%, transparent); 
}

.results-table tfoot td{ 
    padding: 0.75em; 
    border-top: 0.125em solid var(--border); 
    font-weight: 700; 
}

/* Align numeric columns right, leave first three left-aligned */
.results-table td:nth-child(n+4),
.results-table th:nth-child(n+4){ text-align: right; }
.results-table td:nth-child(-n+3),
.results-table th:nth-child(-n+3){ text-align: left; }

/* Sort indicators */
.results-table thead th.sorted-asc::after{ content: ' \25B2'; opacity: 0.8; }
.results-table thead th.sorted-desc::after{ content: ' \25BC'; opacity: 0.8; }

/* CSV/data status pill for FC page */
.csv-status{
    display: inline-flex;
    align-items: center;
    gap: 0.375em;
    margin-left: 0.625em;
    padding: 0.25em 0.625em;
    border-radius: 62.4375em;
    font-size: 0.85rem;
    border: 0.0625em solid var(--border);
    background: color-mix(in srgb, var(--panel) 80%, transparent);
    color: var(--text);
}
.csv-status[data-status="ok"]{ border-color: rgba(0,200,140,.4); box-shadow: inset 0 0 0 62.4375em rgba(0,200,140,.08); }
.csv-status[data-status="warn"]{ border-color: rgba(255,180,0,.45); box-shadow: inset 0 0 0 62.4375em rgba(255,180,0,.06); }
.csv-status[data-status="loading"]{ opacity: 0.8; }

/* ===== Inventory + Profiles Row (shared) ===== */
.inventory-profiles-row{
    display: flex;
    gap: 1em;
    align-items: flex-start;
    flex-wrap: wrap;
    margin: 0.75em 1em;
}

.inventory-section{ flex: 1 1 30em; order: 1; }
.profiles{ flex: 1 1 26.25em; order: 2; }

/* Keep inventory on the left on wide layouts */
@media (min-width: 56.25em){
    .inventory-section{ order: 1; }
    .profiles{ order: 2; }
}

/* Profiles rows */
.profiles .profiles-row{
    display: flex;
    gap: 0.5em;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0.5em;
}

/* Minor helpers for inputs with icons (used by Chief Gear markup) */
.input-with-icon, .select-with-icon{ display: inline-flex; gap: 0.375em; align-items: center; }
.icon-button{ padding: 0.625em 0.75em; min-width: 2.5em; }
.icon-button img{ width: 1em; height: 1em; display: block; }

/* Responsive nav -------------------------------------------------------- */
.header-with-nav{
    display:flex;
    gap:0.75em;
    align-items:center;
}
.header-with-nav,
.header-with-nav > *{
    min-width:0;
}
.header-with-nav .logo-link{
    flex:0 0 auto;
}
.nav-toggle{
    display:none;
    background: transparent;
    border:0.0625em solid var(--border);
    color: var(--text);
    font-size: 1.4rem;
    padding: 0.5em 0.625em;
    border-radius: 0.375em;
}
.main-nav{
    display:flex;
    align-items:center;
    flex:1 1 auto;
    gap:0.75em;
    flex-wrap:wrap;
    min-width:0;
}
.nav-links{
    display:flex;
    gap:0.75em;
    flex-wrap:wrap;
    align-items:center;
    flex:1 1 60%;
    min-width:0;
    justify-content:flex-start;
}
.nav-actions{
    display:flex;
    gap:0.625em;
    margin-left:auto;
    align-items:center;
    flex:0 0 auto;
    flex-wrap:wrap;
    justify-content:flex-end;
}

@media (max-width: 75em){
    .header-with-nav{
        flex-wrap: wrap;
        flex-direction: column;
        align-items: flex-start;
    }
    .header-with-nav .logo-link{
        width: 100%;
    }
    .main-nav{
        width: 100%;
    }
    .nav-links{
        flex: 1 1 100%;
        justify-content: flex-start;
    }
    .nav-actions{
        width: 100%;
        justify-content: flex-start;
        margin-left: 0;
    }
}

@media (max-width: 56.25em){
    .nav-toggle{ display:none; }
    .main-nav{
        width:100%;
        flex-direction:column;
        align-items:flex-start;
        gap:0;
        display:flex;
    }
    .nav-links{
        flex-direction:column;
        width:100%;
    }
    .nav-links a{
        width:100%;
        padding:0.625em 0;
        border-bottom:0.0625em solid var(--border);
    }
    .nav-actions{
        width:100%;
        justify-content:space-between;
        padding:0.5em 0;
    }
    .header-with-nav{align-items:flex-start;}
}

/* Responsive layout helpers -------------------------------------------- */
.table-responsive{ overflow-x:auto; width:100%; }
.table-responsive table{ width:100%; min-width:37.5em; }

@media (max-width: 64em){
    .inventory-profiles-row{ flex-direction:column; }
    .profiles-row{ flex-direction:column; align-items:stretch; }
    .profiles.stacked .profiles-row{ align-items:stretch; }
    .profiles .profiles-list,
    .profiles input[type="text"]{ width:100%; }
    .fc-two-column,
    .buildings-section,
    .results-section{ width:100%; }
    .buildings-grid{ grid-template-columns: repeat(auto-fit, minmax(16.25em, 1fr)); }
    .main-layout-wrapper{ grid-template-columns: 1fr; }
    .main-layout-wrapper .results-section{
        position: static;
        max-height: none;
    }
}

@media (max-width: 48em){
    body{ padding: 0 0.625em; }
    .inventory-section,
    .profiles{ width:100%; }
    .fc-two-column{ flex-direction:column; gap:1em; }
    .buildings-grid{ grid-template-columns: repeat(auto-fit, minmax(13.75em, 1fr)); }
    .calculation-input, .calculation-output{ padding:0.75em; }
    .main-layout-wrapper{ flex-direction:column; }
}

@media (max-width: 30em){
    .nav-actions{ flex-direction:column; align-items:flex-start; }
    .main-layout-wrapper{ gap:0.75em; }
.profiles-row button,
.profiles-row input,
.profiles-row select{ width:100%; }
.inventory-grid{ grid-template-columns: repeat(auto-fit, minmax(8.75em,1fr)); }
}

/* App-like shell for mobile/tablet ------------------------------------- */
html, body{
    overflow-x: hidden;
}
.header-with-nav{
    width: 100%;
}
.header-with-nav .logo-link,
.header-with-nav .site-logo{
    width: 100%;
}
.app-shell{
    width: 100%;
    max-width: 87.5em;
    margin: 0 auto;
    padding: 1.25em;
    box-sizing: border-box;
}
.card{
    background: color-mix(in srgb, var(--panel) 92%, transparent);
    border: 0.0625em solid var(--border);
    border-radius: 1em;
    box-shadow: 0 0.5em 1.5em color-mix(in srgb, var(--shadow) 50%, transparent);
    padding: 1em;
    margin-bottom: 1em;
}
.card h3, .card h2{
    margin-top: 0;
}
.app-bar{
    position: sticky;
    top: 0;
    z-index: 200;
    background: color-mix(in srgb, var(--panel) 94%, transparent);
    box-shadow: 0 0.5em 1.25em rgb(0 0 0 / 25%);
    padding: 0.625em 0.875em;
    border-bottom: 0.0625em solid var(--border);
}
.app-bar .nav-toggle{
    border-radius: 0.625em;
}

/* Touch-friendly controls on small/medium screens */
@media (max-width: 64em){
    body{ padding: 0 0.5em; }
    .card{ padding: 1.125em; }
    input, select, button{
        min-height: 2.75em;
    }
    .header-with-nav{ position: sticky; top:0; z-index:150; background: var(--panel); }
}
@media (max-width: 48em){
    .app-shell{ padding: 0.75em; }
    h1, h2{ font-size: 1.4rem; }
    h3{ font-size: 1.15rem; }
    .card{ padding: 1em; }
    .main-nav a{ padding: 0.75em 0.625em; }
}
@media (max-width: 30em){
    .app-shell{ padding: 0.625em; }
    h1, h2{ font-size: 1.25rem; }
    h3{ font-size: 1.05rem; }
    .card{ padding: 0.875em; border-radius: 0.875em; }
    input, select, button{ font-size: 1rem; }
    .nav-links a{ font-size: 1rem; }
}

/* Cards keep form controls aligned */
.card input[type="number"],
.card select,
.card input[type="text"]{
    width: 100%;
    box-sizing: border-box;
}
.inventory-profiles-row{
    align-items: stretch;
    width: 100%;
}
.fc-two-column{
    gap: 1em;
    width: 100%;
}
.results-section .results-display{
    width: 100%;
}

/* Bottom navigation (mobile/tablet only) */
.bottom-nav{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
    background: color-mix(in srgb, var(--panel) 96%, transparent);
    border: 0.0625em solid var(--border);
    box-shadow: 0 -0.625em 1.5em color-mix(in srgb, var(--shadow) 45%, transparent);
    z-index: 250;
    margin: 0 auto 0.625em;
    width: 94%;
    max-width: 56.25em;
    border-radius: 1.125em;
    overflow: hidden;
}
.bottom-nav__list{
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
}
.bottom-nav__item{
    flex: 1;
}
.bottom-nav__item a{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25em;
    padding: 0.75em 0.625em;
    color: var(--text);
    text-decoration: none;
    font-size: 0.95rem;
}
.bottom-nav__item a.is-active,
.bottom-nav__item a[aria-current="page"]{
    color: #fff;
    background: color-mix(in srgb, var(--accent) 60%, transparent);
}

@media (max-width: 64em){
    .bottom-nav{ display: block; }
    .app-shell{ padding-bottom: 6em; width: 100%; max-width: none; }
    .fc-two-column{ flex-direction: column; }
    .inventory-profiles-row{ flex-direction: column; gap: 1em; }
    .buildings-section,
    .results-section,
    .calculation-output,
    .calculation-input,
    .inventory-section,
    .profiles{ width: 100%; }
    .card{ width: 100%; margin-left: 0; margin-right: 0; }
    .app-shell{ margin: 0; }
}
@media (min-width: 64.0625em){
    .bottom-nav{ display: none; }
    .app-shell{ max-width: none; width: 100%; padding-left: 2em; padding-right: 2em; }
    .inventory-profiles-row{ flex-direction: row; }
    .fc-two-column{ flex-direction: row; }
    .main-layout-wrapper{ flex-direction: row; gap: 1.25em; }
}

/* ===== Inventory grid (compact) ===== */
.inventory-grid{ display: grid; gap: 0.625em 0.75em; }
.inventory-grid.compact{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 68.75em){
    .inventory-grid.compact{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.inventory-item label{ font-size: 0.95rem; color: var(--text); opacity: 0.9; }
.inventory-item input[type="number"]{ width: 100%; box-sizing: border-box; text-align: center; }
.label-with-icon{ display: inline-flex; gap: 0.375em; align-items: center; }
.res-icon{ width: 1.125em; height: 1.125em; object-fit: contain; }

/* ===== Single-row inventory (Charms & Chief Gear) ===== */
/* Keep their legacy inventory layout as one continuous row */
.inventory-section .inventory-row{
    display: flex;
    align-items: center;
    gap: 0.75em;
    overflow-x: auto;
    padding-bottom: 0.25em; /* space for potential scrollbar */
}

.inventory-section .inventory-row h3{ flex: 0 0 auto; margin: 0; }

.inventory-section .inventory-row .inventory-inputs{
    display: flex;
    align-items: center;
    gap: 0.75em;
    flex-wrap: nowrap; /* force single row */
}

.inventory-section .inventory-row .inventory-item{
    flex: 0 0 auto;
    min-width: 12.5em;
}

.inventory-section .inventory-row button.secondary{
    margin-left: auto; /* push reset to the far right */
}

/* --- Layout refinements: full-width header, centered content, reduce overflow --- */
main{ width: 100%; box-sizing: border-box; }
.app-shell{ max-width: 80em; padding-left: 1.5em; padding-right: 1.5em; }
.inventory-profiles-row{ margin: 0.75em 0; }
.fc-two-column{ margin: 0; }
.fc-two-column .buildings-section,
.fc-two-column .results-section{
    width: 100%;
    box-sizing: border-box;
}
.card{ margin-left: 0; margin-right: 0; }
.bottom-nav{
    background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 88%, transparent), color-mix(in srgb, var(--panel) 96%, transparent));
    backdrop-filter: blur(1.125em);
    -webkit-backdrop-filter: blur(1.125em);
    border-radius: 1.125em 1.125em 0 0;
    padding: 0.375em 0.625em;
    width: 100%;
    max-width: none;
    margin: 0;
    left: 0;
    right: 0;
}
.bottom-nav__list{ padding: 0.375em 0.25em; gap: 0.5em; scroll-snap-type: x mandatory; }
.bottom-nav__item{ flex: 0 0 auto; }
.bottom-nav__item a{
    border-radius: 0.75em;
    min-width: 5.25em;
    scroll-snap-align: center;
}
.bottom-nav__item a.is-active,
.bottom-nav__item a[aria-current="page"]{
    font-weight: 700;
    box-shadow: 0 0.5em 1.25em color-mix(in srgb, var(--shadow) 30%, transparent);
}

@media (max-width: 56.25em){
    body{ padding: 0; }
    .app-shell{
        padding: 1em 0.875em 7.5em;
        max-width: none;
        width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }
    .inventory-profiles-row{
        flex-direction: column;
        gap: 0.875em;
        margin: 0;
    }
    .card{
        width: 100%;
        margin: 0 0 0.875em;
    }
    .inventory-section .inventory-row{
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75em;
    }
    .inventory-section .inventory-row .inventory-inputs{
        flex-wrap: wrap;
        width: 100%;
        gap: 0.625em;
        overflow: visible;
    }
    .inventory-section .inventory-row .inventory-item{
        flex: 1 1 9.375em;
        min-width: 0;
    }
    .fc-two-column{
        display: flex;
        flex-direction: column;
        gap: 0.875em;
        grid-template-columns: 1fr;
    }
    .fc-two-column .results-section{
        position: static;
        max-height: none;
    }
    .inventory-grid,
    .inventory-grid.compact,
    .buildings-grid,
    .gear-grid-two-columns{
        grid-template-columns: 1fr;
    }
    .main-layout-wrapper{
        display: flex;
        flex-direction: column;
        gap: 0.875em;
    }
    .calculation-input{ width: 100%; }
    .equipment-grid{ width: 100%; box-sizing: border-box; grid-template-columns: 1fr; }
    .bottom-nav{
        width: 100%;
        border-radius: 1.125em 1.125em 0 0;
    }
    .bottom-nav__list{
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Global container safety */
    html, body, main{ width: 100%; max-width: none; box-sizing: border-box; overflow-x: hidden; }
    /* Text-heavy pages: readable on mobile */
    p{
        margin: 0.75em 0;
        text-align: left;
        letter-spacing: normal;
        word-spacing: normal;
        line-height: 1.6;
    }
    .introduction,
    .introduction p,
    .introduction li{
        text-align: left;
        letter-spacing: normal;
        word-spacing: normal;
        line-height: 1.6;
    }
    .introduction{ margin: 0; padding: 1em; }
    .introduction p{ margin: 0.75em 0; }
    .introduction ul{ padding-left: 1.25em; margin: 0 0 0.75em; }

    /* Charms & Chief Gear: force single-column stack */
    .calculation-input,
    .calculation-output,
    .left-column,
    .equipment-section,
    .gear-grid-two-columns{
        width: 100%;
        box-sizing: border-box;
    }
    .equipment-section,
    .gear-grid-two-columns{
        display: flex;
        flex-direction: column;
        gap: 0.625em;
    }
    .gear-selects,
    .batch-controls,
    .profiles-row{
        flex-wrap: wrap;
    }
    .batch-controls .button-group,
    .gear-selects > div{
        width: 100%;
    }
    /* Charms & Chief Gear: force true single-column cards */
    .main-layout-wrapper{
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
    .calculation-input,
    .calculation-output{
        width: 100%;
        box-sizing: border-box;
    }
    .equipment-grid,
    .gear-grid-two-columns{
        display: flex;
        flex-direction: column;
        gap: 0.75em;
        width: 100%;
        box-sizing: border-box;
    }
    .equipment-section{
        width: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        gap: 0.625em;
    }
    .equipment-grid > *{
        width: 100%;
    }
    .gear-selects > div,
    .batch-controls .button-group{
        width: 100%;
    }
    .calculation-output .table-responsive{
        width: 100%;
        box-sizing: border-box;
        overflow-x: auto;
    }

    /* Fire Crystals: keep all cards aligned full width */
    .buildings-section,
    .results-section,
    .building-card{
        width: 100%;
        box-sizing: border-box;
    }
    .fc-two-column{
        width: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        gap: 0.75em;
    }
    .inventory-section input,
    .inventory-section select{
        width: 100%;
        box-sizing: border-box;
    }

    /* Keep wide tables contained */
    .table-responsive{ max-width: 100%; overflow-x: auto; }
    .results-wrap{ width: 100%; overflow-x: auto; }
}
@media (min-width: 75em){
    .app-shell{
        max-width: none;
        padding-left: 2em;
        padding-right: 2em;
    }
}

main {
    background-image: url('../../assets/background.png');
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
    background-repeat: no-repeat;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text);
    display: flex;
    justify-content: center;
    padding-top: 1%;
    padding-bottom: 1%;
}

.title {
    text-align: center; 
    text-decoration: none;
    color: var(--text);
    display: flex;
    justify-content: center;
    margin: auto;
    padding-bottom: 0.625em;
    margin-top: 1.25em; 
}

header[role="banner"] {
    background: var(--panel);
    padding: 0;
    box-shadow: 0 0.125em 0.5em var(--shadow);
    position: relative;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    height: 10.625em;
    width: 100%;
}

.logo-link {
    display: block;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-logo {
    height: 10.625em;
    width: 100%;
    object-fit: cover;
    display: block;
}

.header-with-nav{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: var(--panel);
}
.header-with-nav .logo-link{
    flex: 0 0 32.5em;
    height: 10.625em;
}
.header-with-nav .site-logo{
    height: 10.625em;
    width: 100%;
    object-fit: cover;
}
.header-with-nav .main-nav{
    position: sticky;
    top: 0;
    flex: 1;
    height: 10.625em;
    box-shadow: none;
    border-bottom: none;
}

.main-nav{
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.625em 0.875em;
    background: color-mix(in srgb, var(--panel) 88%, transparent);
    backdrop-filter: blur(0.5em);
    -webkit-backdrop-filter: blur(0.5em);
    border-bottom: 0.0625em solid var(--border);
    box-shadow: 0 0.375em 1.25em rgb(0 0 0 / 12%);
    gap: 0.5em;
}

.main-nav a{
    font-size: 0.95rem;
    color: var(--text);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5em 0.75em;
    margin: 0;
    border-radius: 62.4375em;
    border: 0.0625em solid transparent;
    background: transparent;
    position: relative;
    transition: color 150ms ease, background-color 150ms ease, transform 150ms ease, border-color 150ms ease;
}

/* Animated underline inspired by modern navs */
.main-nav a::after{
    content: '';
    position: absolute;
    left: 0.75em;
    right: 0.75em;
    bottom: 0.375em;
    height: 0.125em;
    background: currentColor;
    opacity: 0.0;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 200ms ease, opacity 150ms ease;
}

.main-nav a:hover{
    background: var(--muted);
    transform: translateY(-0.0625em);
}

.main-nav a:hover::after{ opacity: 0.6; transform: scaleX(1); }

/* Active page highlight via aria-current */
.main-nav a[aria-current="page"]{
    background: var(--accent);
    color: #fff;
    border-color: color-mix(in srgb, var(--accent) 70%, transparent);
}
.main-nav a[aria-current="page"]::after{ opacity: 0; transform: scaleX(0); }

/* Restore font-size for controls hidden by font-size:0 on container */
.main-nav .dark-mode-toggle,
.main-nav select{
    font-size: 0.95rem;
}

/* Push utilities to the right side of the bar */
.main-nav #dark-mode-toggle{ margin-left: auto; }

.dark-mode-toggle {
    background-color: var(--accent);
    border: none;
    border-radius: 0.375em;
    color: #fff;
    margin: 0.0625em 0.625em;
    padding: 0.625em 1em;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    transition: all 150ms ease;
    min-height: 2.75em;
    box-shadow: 0 0.125em 0.5em rgb(0 0 0 / 20%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375em;
}

.dark-mode-toggle:hover {
    transform: translateY(-0.125em);
    box-shadow: 0 0.375em 1em rgb(0 0 0 / 25%);
    filter: brightness(1.1);
    text-decoration: none;
}

.dark-mode-toggle:active {
    transform: translateY(0);
    box-shadow: 0 0.125em 0.375em rgb(0 0 0 / 20%);
}

.dark-mode-toggle:focus {
    outline: 0.1875em solid rgb(124 108 255 / 50%);
    outline-offset: 0.125em;
    box-shadow: 0 0.125em 0.5em rgb(0 0 0 / 20%), 0 0 0 0.1875em rgb(124 108 255 / 20%);
}
.muted { color: var(--text); opacity: 0.85; }
p { line-height: 1.6; margin: 0.625em 1.25em; }

.introduction {
    background-color: var(--panel); 
    padding: 1.25em; 
    margin: 1.25em; 
    border-radius: 0.3125em; 
}

/* Smooth transitions for theme changes */
body, .main-nav, .introduction, .main-nav a, p, .title, select, input {
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

/* Enhanced select styling for consistency across browsers and Windows */
/* Enhanced button and interactive control styling */
button, input[type="button"] {
    padding: 0.75em 1.25em;
    min-height: 2.75em;  /* Accessibility: minimum touch target size */
    min-width: 2.75em;
    font-weight: 600;
    letter-spacing: 0.0312em;
    transition: all 120ms ease;
    cursor: pointer;
    border: none;
    border-radius: 0.5em;
    font-size: 1em;
    font-family: "Segoe UI Emoji","Apple Color Emoji","Segoe UI Symbol", Inter, Arial, sans-serif;
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 90%, transparent), color-mix(in srgb, var(--accent) 70%, transparent));
    color: #fff;
    box-shadow: 0 0.1875em 0.625em rgb(0 0 0 / 18%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

/* Unified form controls ---------------------------------------------------- */
:root{
    --field-radius: 0.75em;
    --field-padding: 0.625em 0.875em;
    --field-height: 3em;
    --field-font: 1rem;
}

:where(.form-field,
       input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
       select,
       textarea){
    font-family: inherit;
    font-size: var(--field-font);
    color: var(--text);
    background: var(--field-bg);
    border: 0.0625em solid var(--field-border);
    border-radius: var(--field-radius);
    padding: var(--field-padding);
    min-height: var(--field-height);
    line-height: 1.25;
    letter-spacing: 0;
    font-weight: 500;
    box-sizing: border-box;
    transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
    -webkit-appearance: none;
    appearance: none;
}

:where(select){
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e9eef8' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.875em center;
    background-size: 1em;
    padding-right: 3em;
}

:where(html.light-theme select, body.light-theme select){
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a1628' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
}

:where(input[type="number"], select){
    text-align: center;
    text-align-last: center;
    font-feature-settings: "tnum","lnum";
    font-variant-numeric: tabular-nums lining-nums;
}

:where(input[type="text"], input[type="search"], textarea){
    text-align: left;
}

:where(input[type="text"]::placeholder,
       input[type="search"]::placeholder,
       textarea::placeholder){
    text-align: left;
}

:where(.form-field,
       input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
       select,
       textarea):focus{
    outline: none;
    box-shadow: 0 0 0 0.125em var(--field-focus);
    background: color-mix(in srgb, var(--field-bg) 82%, var(--accent) 10%);
}

/* Profile / reset buttons: refined look */
.profiles-row button,
.inventory-section .inventory-row button.secondary{
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 80%, transparent), color-mix(in srgb, var(--accent-secondary) 65%, transparent));
    border: 0.0625em solid color-mix(in srgb, var(--accent) 40%, transparent);
    box-shadow: 0 0.375em 1em color-mix(in srgb, var(--shadow) 35%, transparent);
}
.profiles-row button.danger{
    background: linear-gradient(180deg, color-mix(in srgb, var(--danger) 85%, transparent), color-mix(in srgb, var(--danger) 65%, transparent));
    border-color: color-mix(in srgb, var(--danger) 45%, transparent);
    box-shadow: 0 0.375em 1em color-mix(in srgb, var(--shadow) 35%, transparent);
}

button:not(.icon-button):hover, input[type="button"]:hover {
    background-color: var(--accent);
    color: #fff;
    transform: translateY(-0.0625em);
    box-shadow: none;
    filter: none;
    cursor: pointer;
}

button:not(.icon-button):active, input[type="button"]:active {
    transform: translateY(-0.0625em) scale(0.98);
    box-shadow: 0 0.1875em 0.5em rgb(0 0 0 / 25%);
}

button:focus, input[type="button"]:focus {
    outline: 0.1875em solid rgb(124 108 255 / 60%);
    outline-offset: 0.1875em;
    box-shadow: 0 0.125em 0.5em rgb(0 0 0 / 20%), 0 0 0 0.25em rgb(124 108 255 / 25%);
}

button:disabled, input[type="button"]:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: 0 0.125em 0.3125em rgb(0 0 0 / 10%);
    background-color: #a0a0a0;
    color: #777777;
}

/* Light theme button adjustments */
html.light-theme button, html.light-theme input[type="button"],
body.light-theme button, body.light-theme input[type="button"] {
    background-color: #6b6bf0;
    color: #fff;
    box-shadow: 0 0.125em 0.5em rgb(0 0 0 / 15%);
}

html.light-theme button:hover, html.light-theme input[type="button"]:hover,
body.light-theme button:hover, body.light-theme input[type="button"]:hover {
    box-shadow: 0 0.375em 1em rgb(0 0 0 / 20%);
}

html.light-theme button:focus, html.light-theme input[type="button"]:focus,
body.light-theme button:focus, body.light-theme input[type="button"]:focus {
    outline: 0.1875em solid rgb(107 107 240 / 50%);
}

/* Button type variants - for different button actions */

/* Primary action buttons (default) */
button.primary, input[type="button"].primary,
#charms-reset {
    background-color: var(--accent);
    color: #fff;
}

/* Secondary/neutral buttons */
button.secondary, input[type="button"].secondary,
#profile-overwrite {
    background-color: var(--muted);
    color: var(--text);
    border: 0.0625em solid rgb(255 255 255 / 10%);
}

button.secondary:hover, input[type="button"].secondary:hover,
#profile-overwrite:hover {
    background-color: var(--accent);
    color: #fff;
    transform: translateY(-0.0625em);
    box-shadow: none;
}

/* Danger buttons for destructive actions */
button.danger, input[type="button"].danger,
#profile-delete {
    background-color: #ff6b6b;
    color: #fff;
}

button.danger:hover, input[type="button"].danger:hover,
#profile-delete:hover {
    background-color: var(--accent);
    color: #fff;
    transform: translateY(-0.0625em);
    box-shadow: none;
    filter: none;
}

button.danger:active, input[type="button"].danger:active,
#profile-delete:active {
    background-color: #ff4444;
    transform: translateY(-0.0625em) scale(0.98);
    box-shadow: 0 0.1875em 0.5em rgb(0 0 0 / 25%);
}

/* Light theme variants */
html.light-theme button.secondary, html.light-theme input[type="button"].secondary,
html.light-theme #profile-overwrite,
body.light-theme button.secondary, body.light-theme input[type="button"].secondary,
body.light-theme #profile-overwrite {
    background-color: #e9e9ee;
    color: #111;
    border: 0.0625em solid #dcdde6;
}

html.light-theme button.secondary:hover, html.light-theme input[type="button"].secondary:hover,
html.light-theme #profile-overwrite:hover,
body.light-theme button.secondary:hover, body.light-theme input[type="button"].secondary:hover,
body.light-theme #profile-overwrite:hover {
    background-color: #6b6bf0;
    color: #fff;
    transform: translateY(-0.0625em);
}

html.light-theme button.danger, html.light-theme input[type="button"].danger,
html.light-theme #profile-delete,
body.light-theme button.danger, body.light-theme input[type="button"].danger,
body.light-theme #profile-delete {
    background-color: #ff6b6b;
    color: #fff;
}

/* Disabled options styling */
select option:disabled {
    color: #666;
    opacity: 0.6;
    background: rgba(255, 0, 0, 0.1);
}

html.light-theme select option:disabled {
    color: #ccc;
    opacity: 0.7;
    background: rgba(200, 0, 0, 0.08);
}

.calculation-input, .calculation-output {
    margin: 0.75em;
    padding: 0.5em;
    border-radius: 0.5em;
    border: 0.0625em solid var(--border);
    box-sizing: border-box;
    background: var(--card);
}

.calculation-input {
    display: block;
    width: calc(100% - 1.5em);
}
/* Compact controls inside calculation area to save vertical space */
.calculation-input button:not(.icon-button),
.calculation-input select,
.calculation-input input[type="number"],
.calculation-input input[type="text"]{
    min-height: 2.25em;
    padding: 0.375em 0.5em;
    font-size: 0.95em;
}

/* Main wrapper for side-by-side layout */
.main-layout-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
    align-items: start;
}

.main-layout-wrapper .results-section{
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    position: sticky;
    top: 0.75em;
    max-height: calc(100vh - 10em);
    overflow: auto;
}

/* Left column containing batch controls + equipment grid */
.left-column {
    display: flex;
    flex-direction: column;
    gap: 0.75em;
}

/* Equipment Grid: 2 rows, 3 columns layout - compact version */

.equipment-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 0.75em;
    width: 100%;
}

/* Each equipment section (Hat, Chestplate, Ring, Watch, Pants, Staff) */
.equipment-section {
    background: var(--panel);
    padding: 0.625em;
    border-radius: 0.5em;
    border: 0.0625em solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.375em;
}

/* Explicit positioning: 2 rows × 3 columns */
.equipment-grid > .equipment-section:nth-of-type(1) { grid-column: 1; grid-row: 1; } /* Helmet */
.equipment-grid > .equipment-section:nth-of-type(2) { grid-column: 1; grid-row: 2; } /* Chestplate */
.equipment-grid > .equipment-section:nth-of-type(3) { grid-column: 1; grid-row: 3; } /* Ring */
.equipment-grid > .equipment-section:nth-of-type(4) { grid-column: 2; grid-row: 1; } /* Watch */
.equipment-grid > .equipment-section:nth-of-type(5) { grid-column: 2; grid-row: 2; } /* Pants */
.equipment-grid > .equipment-section:nth-of-type(6) { grid-column: 2; grid-row: 3; } /* Staff */

.equipment-section h3 {
    margin: 0;
    padding: 0 0 0.25em 0;
    font-size: 0.95em;
    border-bottom: 0.0625em solid var(--border);
    justify-content: flex-start;
}

/* Batch controls row - compact */
.batch-controls-row {
    display: flex;
    align-items: center;
    gap: 0.375em;
    padding: 0.25em 0.375em;
    background: var(--muted);
    border-radius: 0.25em;
}

.batch-controls-row .badge {
    background: var(--muted);
    color: var(--muted-text);
    padding: 0.125em 0.375em;
    border-radius: 0.1875em;
    font-size: 0.8em;
    font-weight: 600;
    border: 0.0625em solid var(--border);
}

.batch-controls-row .batch-inline {
    display: flex;
    align-items: center;
    gap: 0.375em;
    flex: 1;
}

.batch-controls-row .batch-inline label {
    font-size: 0.85em;
    color: var(--muted-text);
    margin: 0;
}

.batch-controls-row .batch-inline select {
    flex: 1;
    padding: 0.25em;
    border-radius: 0.25em;
    background: var(--bg);
    color: var(--text);
    border: 0.0625em solid var(--border);
    font-size: 0.9em;
}

/* Individual charm row - compact */
.charm-row {
    display: flex;
    align-items: center;
    gap: 0.375em;
    padding: 0.25em 0.375em;
    background: var(--card);
    border-radius: 0.25em;
}

.charm-row > label:first-child {
    min-width: 3.75em;
    font-weight: 500;
    font-size: 0.9em;
}

.charm-inputs {
    display: flex;
    align-items: center;
    gap: 0.375em;
    flex: 1;
}

.charm-inputs label {
    font-size: 0.8em;
    color: var(--muted-text);
    min-width: 2.5em;
}

.charm-inputs select {
    flex: 1;
    padding: 0.25em 0.375em;
    border-radius: 0.25em;
    background: var(--muted);
    color: var(--text);
    border: 0.0625em solid var(--border);
    font-size: 0.9em;
}

/* Gear item row - similar to charm-row but for Chief Gear */
.gear-item-row {
    display: flex;
    align-items: center;
    gap: 0.375em;
    padding: 0.25em 0.375em;
    background: var(--card);
    border-radius: 0.25em;
    margin-top: 0.375em;
}

.gear-item-row label {
    font-size: 0.8em;
    color: var(--muted-text);
    min-width: 2.8125em;
}

.gear-item-row select {
    flex: 1;
    padding: 0.25em 0.375em;
    border-radius: 0.25em;
    background: var(--muted);
    color: var(--text);
    border: 0.0625em solid var(--border);
    font-size: 0.9em;
}


input {
    padding: 0.5em 0.625em;
    border-radius: 0.375em;
    font-size: 1em;
    font-family: inherit;
    background-color: var(--muted);
    color: var(--text);
    border: 0.0625em solid var(--border);
    transition: background-color 150ms ease, border-color 150ms ease;
}

.table {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    gap: 0.5em;
}

.table .batch-select{
    width: 100%;
    padding: 0.5em;
    border-radius: 0.5em;
    background: var(--muted);
    color: var(--text);
    border: 0.0625em solid var(--border);
}

.table-top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75em;
    width: 100%;
}

    /* resource color hints */
    .col-dot{ display:inline-block; width:0.625em; height:0.625em; border-radius:50%; margin-right:0.5em; vertical-align:middle; }
    .res-guides{ background:#ffd166; }
    .res-designs{ background:#6ad29a; }
    .res-secrets{ background:#7c6cff; }

.batch-inline{
    display: flex;
    gap: 0.375em;
    align-items: center;
}

.batch-inline .batch-select{
    width: 5.25em;
}

.inner-selection {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    gap: 0.15em;
    
}

/* Building header with optional icon */
.building-header {
    display: flex;
    align-items: center;
    gap: 0.625em;
}
.building-header .building-icon {
    width: 1.5em;
    height: 1.5em;
    object-fit: contain;
    filter: drop-shadow(0 0.0625em 0.0625em var(--shadow));
}

/* Batch controls styling -------------------------------------------------- */
.batch-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25em;
    margin: 0 0 0.5em 0;
    padding: 0.5em;
    border-radius: 0.375em;
    background: var(--card);
    border: 0.0625em solid var(--border);
}

.batch-controls h3 {
    margin: 0 0 0.25em 0;
    font-size: 1em;
}

.batch-controls .batch-row{
    display:flex; 
    gap:0.5em; 
    align-items:center; 
    width:100%; 
    max-width:68.75em; 
    justify-content:space-between;
    flex-wrap: wrap;
}

.batch-controls #charms-reset {
    /* Uses primary button styling from above */
    font-size: 0.95em;
    padding: 0.5625em 0.875em;
}

.batch-help { 
    margin: 0; 
    font-size: 0.9em; 
    color: var(--muted-text); 
    text-align:center;
    line-height: 1.35;
}

html.light-theme .batch-help {
    color: rgb(0 0 0 / 70%);
}

.batch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.5em, 1fr));
    gap: 0.5em;
    align-items: center;
}

.batch-item {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    background: var(--card);
    padding: 0.375em 0.5em;
    border-radius: 0.5em;
}

.batch-item label{
    font-weight: bold;
    color: var(--text);
    text-transform: capitalize;
    font-size: 0.95em;
}

.batch-select{
    width: 100%;
    padding: 0.5em;
    border-radius: 0.375em;
    background: var(--panel);
    color: var(--text);
    border: 0.0625em solid var(--muted);
}

/* Light theme overrides for batch controls */
html.light-theme .batch-controls #charms-reset{ background-color: #e9e9ee; color:#111; border:0.0625em solid #ddd; }
html.light-theme .batch-item{ background: rgb(0 0 0 / 2%); }

/* Profiles UI ------------------------------------------------------------ */
.profiles{ 
    margin: 0.5em 0.75em; 
    padding: 0.375em 0.5em; 
    border-radius: 0.5em; 
    background: var(--card); 
    display:flex; 
    flex-direction:row; 
    align-items:center;
    gap: 0.75em;
    border: 0.0625em solid var(--border);
}
.profiles h3{ 
    margin: 0; 
    color: var(--text);
    font-size: 1.1em;
    flex-shrink: 0;
}
.profiles-row{ 
    display:flex; 
    gap: 0.625em; 
    align-items:center; 
    margin-bottom: 0; 
    justify-content:center;
    flex-wrap: wrap;
    flex: 1;
}
.profiles input[type="text"]{ 
    padding: 0.375em 0.5em; 
    border-radius:0.375em; 
    min-width:11.25em; 
    background-color: var(--muted);
    color: var(--text);
    border: 0.0625em solid var(--border);
    font-size: 0.9em;
    transition: all 150ms ease;
    height: 2.25em;
    line-height: 1;
}
.profiles input[type="text"]:focus {
    outline: 0.125em solid var(--accent);
    outline-offset: 0.125em;
    background-color: var(--panel);
}
.profiles .profiles-list{ 
    padding: 0.375em 0.5em; 
    padding-right: 2.25em;
    border-radius:0.375em; 
    min-width:11.25em; 
    background: var(--panel); 
    color:var(--text); 
    border:0.0625em solid var(--muted);
    font-size: 0.9em;
    cursor: pointer;
    height: 2.25em;
}

.select-with-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    overflow: hidden; /* keep icon inside */
    border-radius: 0.375em; /* match field radius to clip hover */
}

/* Input with inline icon (for profile save) */
.input-with-icon{
    position: relative;
    display: inline-flex;
    align-items: center;
    overflow: hidden; /* keep icon inside */
    border-radius: 0.375em; /* match field radius to clip hover */
}
.input-with-icon input{
    padding-right: 2.25em; /* room for icon */
}

.select-with-icon .icon-button,
.input-with-icon .icon-button {
    position: absolute;
    right: 0.375em;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--text);
    cursor: pointer;
    padding: 0; /* use explicit square size */
    width: 1.75em;
    height: 1.75em;
    font-size: 0.9em;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25em;
    transition: background-color 150ms ease, color 150ms ease;
    min-width: auto;
    min-height: auto;
    height: 1.75em;
    width: 1.75em;
    margin: 0;
    line-height: 1;
    z-index: 2; /* ensure above input/select */
    pointer-events: auto;
}

.select-with-icon .icon-button:hover,
.input-with-icon .icon-button:hover {
    background: transparent;
    color: var(--accent);
    transform: translateY(-50%);
}

/* Focus state to match button focus visuals */
.select-with-icon .icon-button:focus,
.input-with-icon .icon-button:focus {
    outline: 0.1875em solid rgb(124 108 255 / 60%);
    outline-offset: 0.125em;
}
.profiles-help{ 
    font-size:0.9em; 
    color: var(--muted-text); 
    margin:0;
    text-align: center;
    line-height: 1.4;
}
html.light-theme .profiles input[type="text"]{ 
    background-color: var(--muted);
    color: var(--text);
    border: 0.0625em solid var(--border);
}
html.light-theme .profiles input[type="text"]:focus {
    background-color: var(--panel);
    outline-color: var(--accent);
}
html:not(.light-theme) .profiles input[type="text"]{ 
    background-color: var(--muted);
    color: var(--text);
    border: 0.0625em solid var(--border);
}

/* Button group styling for better spacing */
.profiles-row button,
.batch-controls button {
    flex: 0 1 auto;
    min-width: 6em;
    margin: 0.125em;
}

.profiles-row button:not(:last-child) {
    margin-right: 0.375em;
}

/* Normalize profile controls to match select height */
.profiles-row button {
    padding: 0.375em 0.625em;
    min-height: 2.25em;
    line-height: 1;
    font-size: 0.9em;
    border-radius: 0.375em;
}

/* Keep profiles row hover consistent with nav */
.profiles-row button:not(.icon-button):hover {
    transform: translateY(-0.0625em);
    box-shadow: none;
    filter: none;
}

/* Fire Crystals page: stack profile controls vertically */
.profiles.stacked { flex-direction: column; align-items: flex-start; }
.profiles.stacked .profiles-row { 
    flex-direction: column; 
    align-items: stretch; 
    justify-content: flex-start; 
    gap: 0.5em;
    width: 100%;
}
.profiles.stacked .input-with-icon,
.profiles.stacked .select-with-icon { width: 100%; }
.profiles.stacked .profiles-list,
.profiles.stacked input[type="text"] { width: 100%; box-sizing: border-box; }
.profiles.stacked button.icon-button { align-self: flex-end; }

@media (max-width: 48em) {
    .profiles-row {
        gap: 0.375em;
    }
    .profiles input[type="text"],
    .profiles .profiles-list {
        min-width: 9.375em;
        font-size: 0.9em;
    }
    .profiles-row button {
        min-width: 5em;
        padding: 0.5em 0.75em;
        font-size: 0.85em;
    }
}

/* Results styling ------------------------------------------------------- */
.calculation-output { 
    background: var(--panel); 
    padding: 0.75em; 
    border-radius: 0.5em;
    border: 0.0625em solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    /* Expand naturally to avoid internal overflow on large result sets */
    position: static;
    top: auto;
    max-height: none;
    overflow: visible;
}

.calculation-output h2 {
    margin: 0;
    padding: 0 0 0.375em 0;
    font-size: 1.15em;
    border-bottom: 0.125em solid var(--border);
}

.results-section #calculation-results{
    display: flex;
    flex-direction: column;
    gap: 0.75em;
    width: 100%;
    box-sizing: border-box;
}

.calculation-output #calculation-results{
    width: 100%;
    box-sizing: border-box;
}

.calculation-output #calculation-results .results-wrap{
    width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    margin: 0;
}

.calculation-output #calculation-results .results-table{
    min-width: 40em;
    width: max-content;
}


.gap-line.deficit{ 
    color: var(--danger); 
    background: rgba(255,123,123,0.15); 
    border-color: rgba(255,123,123,0.35); 
    font-weight: 600; 
}

.gap-line.surplus{ 
    color: var(--success); 
    background: rgba(106,210,154,0.15); 
    border-color: rgba(106,210,154,0.35); 
    font-weight: 600; 
}
/* Summary pills (Power and SvS) */
.result-totals .summary-pill{
    border: 0.0625em solid var(--border);
    border-radius: 0.375em;
    padding: 0.375em 0.625em;
    margin: 0;
}
.results-wrap{ 
    /* Allow horizontal scroll if table gets wide, but no vertical clipping */
    overflow-x: auto; 
    overflow-y: visible;
    border-radius: 0.5em; 
    background: var(--card); 
    padding: 0.625em; 
    border: 0.0625em solid var(--border); 
    max-height: none;
}
.results-table{ width: 100%; border-collapse: collapse; }
.results-table th, .results-table td{ padding: 0.25em 0.375em; text-align: left; border-bottom: 0.0625em solid var(--border); font-size: 0.9em; }
.results-table thead th{ background: linear-gradient(90deg, var(--card), transparent); position: sticky; top: 0; backdrop-filter: blur(0.125em); }
.results-table tfoot td{ font-weight: 700; border-top: 0.125em solid var(--border); }

/* Responsive breakpoints */
@media (max-width: 75em) {
    .main-layout-wrapper {
        grid-template-columns: 1fr;
    }
    
    .calculation-output {
        position: static;
        max-height: none;
    }
    
    .result-totals {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 56.25em) {
    .equipment-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }
    .equipment-grid > .equipment-section{
        grid-column: 1;
        grid-row: auto;
    }
}

@media (max-width: 48em) {
    .equipment-grid {
        grid-template-columns: 1fr;
    }
    
    .equipment-grid > .equipment-section { 
        grid-column: 1; 
        grid-row: auto; 
    }
}

@media (width <=45em){
    .batch-inline .batch-select{ width:4em; }
    .results-table{ min-width:30em; }
    .result-totals{ justify-content:center; }
}

/* Chief Gear specific styling ------------------------------------------------------- */
.gear-input-section {
    margin: 1.25em;
}

.gear-grid-two-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25em;
    max-width: 87.5em;
    margin: 0 auto;
}

.gear-column {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.gear-card {
    background: var(--card);
    border: 0.0625em solid var(--border);
    border-radius: 0.5em;
    padding: 1em;
    box-shadow: 0 0.125em 0.25em var(--shadow);
}

.gear-card h4 {
    margin: 0 0 0.75em 0;
    padding: 0;
    color: var(--accent);
    font-size: 1.1em;
    justify-content: flex-start;
}

.gear-selects {
    display: flex;
    gap: 0.5em;
    flex-wrap: wrap;
}

.gear-selects > div {
    flex: 1;
    min-width: 7.5em;
}

.gear-selects label {
    display: block;
    margin-bottom: 0.25em;
    color: var(--muted-text);
    font-size: 0.85em;
}

.gear-selects select {
    width: 100%;
    padding: 0.375em;
    background: var(--muted);
    color: var(--text);
    border: 0.0625em solid var(--border);
    border-radius: 0.25em;
    font-size: 0.9em;
}

.inventory-profiles-row {
    display: flex;
    align-items: stretch;
    gap: 0.75em;
    margin: 0.5em 0.75em;
}
.inventory-profiles-row .inventory-section,
.inventory-profiles-row .profiles {
    margin: 0; /* managed by the row container */
}
.inventory-profiles-row .inventory-section,
.inventory-profiles-row .profiles {
    align-self: stretch; /* ensure equal heights */
}
.inventory-profiles-row .inventory-section { flex: 2 1 0; }
.inventory-profiles-row .profiles { flex: 1 1 0; min-width: 22.5em; }
.inventory-profiles-row .inventory-section { order: 1; }
.inventory-profiles-row .profiles { order: 2; }

.inventory-section {
    margin: 0.5em 0.75em;
    padding: 0.5em 0.625em;
    background: var(--card);
    border: 0.0625em solid var(--border);
    border-radius: 0.5em;
}

.inventory-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5em;
    margin-top: 0.5em;
}

/* Compact inventory variant for sidebar */
.inventory-section.compact h3 { margin: 0 0 0.5em; }
.inventory-grid.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5em;
}
@media (min-width: 68.75em) {
    .inventory-grid.compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.inventory-grid.compact .inventory-item {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.inventory-grid.compact .inventory-item input[type=number] {
    width: 6.875em;
    max-width: 45%;
    text-align: right;
}
    .results-table{ 
        width: 100%; 
        border-collapse: collapse; 
        background: var(--panel);
        table-layout: fixed; /* stretch columns to fill available width */
    }
    gap: 0.625em;
    flex-wrap: wrap;
}

.inventory-row h3 {
    margin: 0;
    font-size: 1.1em;
    white-space: nowrap;
}

.inventory-inputs {
    display: flex;
    align-items: center;
    gap: 0.5em;
    flex: 1;
    justify-content: center;
    flex-wrap: nowrap;
}

.inventory-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375em;
}

.inventory-item label {
    margin: 0;
    color: var(--text);
    font-size: 1em;
    white-space: nowrap;
}

.inventory-item input {
    padding: 0.375em 0.5em;
    background: var(--muted);
    color: var(--text);
    border: 0.0625em solid var(--border);
    border-radius: 0.25em;
    font-size: 0.9em;
    width: 4.375em;
}

@media (max-width: 56.25em) {
    .inventory-profiles-row { flex-direction: column; }
    .inventory-row {
        flex-direction: column;
        align-items: stretch;
    }
    .inventory-inputs {
        justify-content: space-around;
    }
}

.label-with-icon { display: inline-flex; align-items: center; gap: 0.375em; }
.res-icon { width: 1em; height: 1em; object-fit: contain; filter: drop-shadow(0 0.0625em 0.0625em var(--shadow)); }

.inventory-item input {
    padding: 0.5em;
    background: var(--muted);
    color: var(--text);
    border: 0.0625em solid var(--border);
    border-radius: 0.25em;
    font-size: 0.95em;
}

.results-section {
    margin: 1.25em;
    padding: 1.25em;
    background: var(--panel);
    border: 0.0625em solid var(--border);
    border-radius: 0.5em;
    min-height: 12.5em;
}

.results-section h3 {
    margin-top: 0;
    margin-bottom: 1em;
    color: var(--text);
    font-size: 1.3em;
}

/* Fire Crystals results summary */
.totals-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13.75em, 1fr));
    gap: 0.75em;
    margin-bottom: 1em;
}
.totals-summary .total-item {
    background: var(--panel);
    border: 0.0625em solid var(--border);
    border-radius: 0.5em;
    padding: 0.625em 0.75em;
    display: flex;
    flex-direction: column;
    gap: 0.375em;
    text-align: center;
}
.totals-summary .resource-label { color: var(--muted-text); font-size: 0.95em; }
.totals-summary .resource-value { font-weight: 700; font-size: 1.05em; }
.totals-summary .gap.deficit { color: var(--danger); font-weight: 600; }
.totals-summary .gap.surplus { color: var(--success); font-weight: 600; }

/* Fire Crystals specific layout */
.buildings-section {
    margin: 0.75em 1.25em 1.25em 1.25em;
    padding: 1em;
    background: var(--panel);
    border: 0.0625em solid var(--border);
    border-radius: 0.625em;
}

/* Make FC results breakdown use full container width */
.results-section #results-display{ width: 100%; }
.results-section .results-wrap{ margin-left: 0; margin-right: 0; width: 100%; }
.results-section #results-display .results-wrap{ grid-column: 1 / -1; }
.results-table th, .results-table td{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* FC breakdown specific column sizing (10 columns) */
.results-section .results-table th:nth-child(1),
.results-section .results-table td:nth-child(1){ width: 18%; }
.results-section .results-table th:nth-child(2),
.results-section .results-table td:nth-child(2){ width: 8%; }
.results-section .results-table th:nth-child(3),
.results-section .results-table td:nth-child(3){ width: 8%; }
.results-section .results-table th:nth-child(4),
.results-section .results-table td:nth-child(4){ width: 8.5%; }
.results-section .results-table th:nth-child(5),
.results-section .results-table td:nth-child(5){ width: 8.5%; }
.results-section .results-table th:nth-child(6),
.results-section .results-table td:nth-child(6){ width: 8.5%; }
.results-section .results-table th:nth-child(7),
.results-section .results-table td:nth-child(7){ width: 8.5%; }
.results-section .results-table th:nth-child(8),
.results-section .results-table td:nth-child(8){ width: 8.5%; }
.results-section .results-table th:nth-child(9),
.results-section .results-table td:nth-child(9){ width: 8.5%; }
.results-section .results-table th:nth-child(10),
.results-section .results-table td:nth-child(10){ width: 15%; min-width: 8.125em; overflow: visible; text-overflow: clip; white-space: nowrap; }

/* Fire Crystals: two-column layout for buildings (left) and results (right) */
.fc-two-column{
    display: grid;
    /* Buildings wider to fit FC10 properly, results still spacious */
    grid-template-columns: 5fr 6fr;
    gap: 1em;
    align-items: start;
    margin: 0.75em 1.25em;
}
.fc-two-column .buildings-section,
.fc-two-column .results-section{ margin: 0; }
.fc-two-column .results-section{
    padding: 0.75em;
    position: sticky;
    top: 0.75em;
    max-height: calc(100vh - 10em);
    overflow: auto;
}
/* Results content: 2-column grid on desktop (better for 50/50 layout) */
.results-section #results-display{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75em;
    align-items: start;
}
/* Direct grid items (flattened results) */
.results-section #results-display .total-item{
    background: var(--panel);
    border: 0.0625em solid var(--border);
    border-radius: 0.5em;
    padding: 0.625em 0.75em;
    display: flex;
    flex-direction: column;
    gap: 0.375em;
    text-align: center;
}
.results-section #results-display .resource-label{ color: var(--muted-text); font-size: 0.95em; }
.results-section #results-display .resource-value{ font-weight: 700; font-size: 1.05em; }
.results-section #results-display .gap.deficit{ color: var(--danger); font-weight: 600; }
.results-section #results-display .gap.surplus{ color: var(--success); font-weight: 600; }
@media (max-width: 75em){
    .results-section #results-display{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 43.75em){
    .results-section #results-display{ grid-template-columns: 1fr; }
}
@media (max-width: 75em){
    .fc-two-column{ grid-template-columns: 1fr; }
    .fc-two-column .results-section{ position: static; max-height: none; }
}

.results-container {
    margin-top: 0.75em;
}

.results-container h2 {
    margin-top: 0.5em;
    margin-bottom: 0.75em;
}

/* Separate time section styling */
.time-section {
    margin-top: 1em;
    padding-top: 1em;
    border-top: 0.125em solid var(--border);
}

.building-card {
    background: var(--card);
    border: 0.0625em solid var(--border);
    border-radius: 0.625em;
    padding: 0.5em;
    box-shadow: 0 0.25em 0.75em var(--shadow);
    text-align: center;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.building-main {
    border: 0.0625em solid var(--accent);
}

.building-selects {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.375em;
    align-items: start;
    width: 100%;
}

.select-group {
    background: var(--panel);
    border: 0.0625em solid var(--border);
    border-radius: 0.5em;
    padding: 0.5em;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.select-group label {
    display: block;
    margin-bottom: 0.375em;
    color: var(--muted-text);
    text-align: center;
}

.buildings-grid {
    margin-top: 0.5em;
    display: grid;
    /* Desktop: arrange items into exactly 3 rows, auto-expanding columns */
    grid-auto-flow: column;
    grid-template-rows: repeat(3, auto);
    grid-auto-columns: 1fr;
    gap: 0.75em;
    width: 100%;
}

.building-select {
    width: 100%;
    text-align-last: center;
}

/* Building breakdown compact styles */
.building-breakdown {
    grid-column: 1 / -1;
    margin-top: 1.25em;
    padding-top: 1em;
    border-top: 0.125em solid var(--border);
}

.building-breakdown h3 {
        margin-top: 0;
    margin-bottom: 0.75em;
}

.breakdown-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12.5em, 1fr));
    gap: 0.625em;
}

.building-result-compact {
    background: var(--card);
    border: 0.0625em solid var(--border);
    border-radius: 0.5em;
    padding: 0.5em 0.625em;
    font-size: 0.9em;
}

.building-result-compact strong {
    display: block;
    margin-bottom: 0.25em;
    color: var(--accent);
    font-size: 0.95em;
}

.compact-line {
    display: flex;
    align-items: center;
    gap: 0.25em;
    margin: 0.125em 0;
    font-size: 0.85em;
}

.compact-line .res-icon {
    width: 0.875em;
    height: 0.875em;
}

@media (max-width: 75em) {
    .buildings-grid { 
        /* Tablet: simple 2-column grid */
        grid-auto-flow: row;
        grid-template-rows: none;
        grid-template-columns: repeat(2, 1fr);
        gap: 1em;
    }
}
@media (max-width: 56.25em) {
    .building-selects { grid-template-columns: 1fr; }
    .buildings-grid { 
        /* Mobile: stack vertically */
        grid-auto-flow: row;
        grid-template-rows: none;
        grid-template-columns: 1fr;
        gap: 0.75em;
    }
}

@media (max-width: 56.25em) {
    .gear-grid-two-columns {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 37.5em) {
    .gear-selects {
        flex-direction: column;
    }
    
    .gear-selects > div {
        min-width: 100%;
    }
    
    .inventory-grid {
        grid-template-columns: 1fr;
    }
    
    .profiles {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .profiles h3 {
        margin-bottom: 0.5em;
    }
}

/* Responsive table wrapper for mobile horizontal scroll */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0.75em 0;
}

.table-responsive table {
    min-width: 37.5em; /* Force scroll on narrow screens */
}

/* Ensure touch targets are at least 44x2.75em */
button, .dark-mode-toggle, select, input[type="number"] {
    min-height: 2.75em;
    min-width: 2.75em;
}

@media (max-width: 30em) {
    .main-nav {
        flex-wrap: wrap;
        gap: 0.5em;
    }
    
    .main-nav a {
        padding: 0.625em 0.75em;
        font-size: 0.9em;
    }
    
    h1 {
        font-size: 1.5em;
    }
    
    .introduction {
        margin: 0.75em;
        padding: 1em;
    }
}

/* Modal dialog -------------------------------------------------------------- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / 55%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.modal-dialog {
    background: var(--panel);
    color: var(--text);
    border: 0.0625em solid var(--border);
    border-radius: 0.625em;
    box-shadow: 0 0.75em 2.25em var(--shadow);
    width: min(32.5em, calc(100% - 2em));
    padding: 0.875em 1em;
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75em;
    margin-bottom: 0.5em;
}
.modal-title {
    margin: 0;
    font-size: 1.05em;
    justify-content: flex-start;
}
.modal-body {
    font-size: 0.95em;
    color: var(--text);
    line-height: 1.5;
    white-space: normal;
    word-break: break-word;
}
.modal-body p{
    margin: 0.5em 0;
}
.modal-body .warning {
    color: var(--danger);
    font-weight: 600;
}
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5em;
    margin-top: 0.875em;
}
.modal-actions .btn {
    padding: 0.5em 0.75em;
    border-radius: 0.5em;
    font: inherit;
    cursor: pointer;
    border: none;
}
.modal-actions .btn.secondary { background: var(--muted); color: var(--text); border: 0.0625em solid var(--border); }
.modal-actions .btn.secondary:hover { background: var(--accent); color: #fff; transform: translateY(-0.0625em); }
.modal-actions .btn.danger { background: #ff6b6b; color: #fff; }
.modal-actions .btn.danger:hover { background: var(--accent); color: #fff; transform: translateY(-0.0625em); }

/* Back to top button -------------------------------------------------------- */
.back-to-top{
    position: fixed;
    right: 1.125em;
    bottom: 1.5em;
    width: 3em;
    height: 3em;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 80%, transparent);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 0.5em 1.25em color-mix(in srgb, var(--shadow) 40%, transparent);
    z-index: 260;
    opacity: 0.85;
    transition: opacity 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.back-to-top:hover{
    opacity: 1;
    transform: translateY(-0.125em);
    box-shadow: 0 0.625em 1.5em color-mix(in srgb, var(--shadow) 45%, transparent);
}

/* Final mobile overrides to keep calculators single-column */
@media (max-width: 56.25em){
    .main-layout-wrapper{
        display: flex;
        flex-direction: column;
        gap: 0.875em;
        width: 100%;
    }
    .calculation-input,
    .calculation-output{
        width: 100%;
        box-sizing: border-box;
    }
    .equipment-grid,
    .gear-grid-two-columns{
        display: flex;
        flex-direction: column;
        gap: 0.75em;
        width: 100%;
        box-sizing: border-box;
    }
    .equipment-grid > *,
    .gear-grid-two-columns > *,
    .equipment-section{
        width: 100%;
        box-sizing: border-box;
    }
    .inventory-grid,
    .inventory-grid.compact,
    .buildings-grid{
        grid-template-columns: 1fr;
    }
    .fc-two-column{
        display: flex;
        flex-direction: column;
        gap: 0.75em;
        width: 100%;
        max-width: 32.5em;
        margin: 0 auto;
        box-sizing: border-box;
    }
    .table-responsive,
    .results-wrap{
        max-width: 100%;
        overflow-x: auto;
    }
    /* Prevent header/logo from forcing horizontal overflow on mobile */
    .header-with-nav,
    .header-with-nav .logo-link,
    .header-with-nav .site-logo{
        width: 100%;
        max-width: 100%;
    }
    .header-with-nav .logo-link{
        flex: 1 1 auto;
        height: auto;
    }
    .header-with-nav .site-logo{
        height: 8.75em;
        object-fit: cover;
    }
    .header-with-nav .main-nav{
        width: 100%;
        height: auto;
    }
    .app-shell{
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-left: 0.75em;
        padding-right: 0.75em;
    }
    main{
        width: 100%;
        max-width: 32.5em;
        margin: 0 auto;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        gap: 0.875em;
    }
    .card,
    .inventory-section,
    .profiles{
        max-width: 32.5em;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }
    .inventory-profiles-row{
        width: 100%;
        max-width: 32.5em;
        margin: 0 auto;
        align-items: stretch;
    }
    .inventory-profiles-row{
        width: 100%;
        margin: 0 auto;
        align-items: stretch;
    }
    /* Charm inventory: single-column inputs on mobile */
    .inventory-section .inventory-row .inventory-inputs{
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.625em;
    }
    .inventory-section .inventory-item{
        background: color-mix(in srgb, var(--panel) 90%, transparent);
        border: 0.0625em solid var(--border);
        border-radius: 0.75em;
        padding: 0.5em 0.625em;
    }
    .inventory-section .inventory-item label{
        display: inline-flex;
        align-items: center;
        gap: 0.5em;
        margin-bottom: 0.375em;
    }
    /* Center key controls */
    .inventory-section .inventory-row button.secondary{
        align-self: center;
        margin-left: 0;
        margin-right: 0;
    }
    .profiles .profiles-row{
        width: 100%;
        justify-content: center;
        align-items: center;
    }
    .profiles .profiles-row > *{
        width: 100%;
    }
    /* Center calculation sections/cards */
    .main-layout-wrapper,
    .calculation-input,
    .calculation-output{
        width: 100%;
        max-width: 32.5em;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
        align-items: center;
        overflow: visible;
    }
    .left-column{
        width: 100%;
    }
    .batch-controls,
    .batch-row,
    .gear-item-row{
        width: 100%;
        box-sizing: border-box;
        justify-content: center;
        gap: 0.5em;
    }
    .buildings-section,
    .results-section{
        width: 100%;
        max-width: 32.5em;
        margin: 0 auto;
        box-sizing: border-box;
        overflow: visible;
    }
    .results-section #results-display{
        width: 100%;
        box-sizing: border-box;
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.75em;
        overflow-x: hidden;
    }
    .results-section #results-display .result-totals{
        flex-direction: column !important;
        flex-wrap: nowrap;
        gap: 0.625em;
    }
    .results-section .result-totals{
        display: flex;
        flex-direction: column !important;
        flex-wrap: nowrap;
        gap: 0.625em;
    }
    .results-section .result-totals .total-line{
        width: 100%;
        border-width: 0.0625em;
        border-radius: 0.375em;
        padding: 0.375em 0.5em;
        overflow: hidden;
    }
    .results-section .result-totals .total-line p{
        margin: 0;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.375em;
        text-align: center;
        word-break: break-word;
        box-sizing: border-box;
    }
    .results-section #results-display > *{
        width: 100%;
        box-sizing: border-box;
    }
    .results-section #results-display .summary-pill{
        display: block;
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }
    .results-section .results-table{
        min-width: 40em;
        width: max-content;
    }
    .results-section .table-responsive{
        width: 100%;
        box-sizing: border-box;
        overflow-x: auto;
    }
    /* Make first column sticky inside horizontal scroll */
    .results-section .results-table th:first-child,
    .results-section .results-table td:first-child{
        position: sticky;
        left: 0;
        z-index: 2;
        background: var(--panel);
    }
    .results-section .results-table thead th:first-child{
        z-index: 3;
    }
    /* Align result stacks on all calculators (mobile) */
    .result-totals{
        display: flex;
        flex-direction: column !important;
        flex-wrap: nowrap;
        gap: 0.625em;
        width: 100%;
        box-sizing: border-box;
    }
    .result-totals .total-line{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .result-totals .total-line p{
        margin: 0;
        width: 100%;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.375em;
        box-sizing: border-box;
    }
    .result-totals .summary-pill{
        display: block;
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }
    .calculation-results .table-responsive{
        width: 100%;
        box-sizing: border-box;
        overflow-x: auto;
    }
    /* Center form/control text on mobile */
    select,
    input[type="number"],
    input[type="text"]{
        text-align: center;
        text-align-last: center;
    }
    /* ---- MOBILE FORM CONTROL FIX ---- */
    :where(.form-field,
           input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
           select,
           textarea){
        line-height: 1.4 !important;
        padding: 0.75em 1em !important;
        min-height: 3.25em !important;
        font-size: 1rem !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    /* Fix Safari/iOS baseline issue */
    :where(select,
           input:not([type="checkbox"]):not([type="radio"]):not([type="range"])) {
        -webkit-appearance: none !important;
    }

    /* ---- MOBILE RESULTS NUMBER FIX ---- */
    .results-section,
    .results-section * {
        letter-spacing: normal !important;
        word-spacing: normal !important;
        text-justify: auto !important;
    }

    /* Normalize numeric punctuation and baseline */
    .results-section .result-value,
    .card .result-value,
    .result-number,
    .number-output {
        font-feature-settings: "tnum", "lnum" !important;
        font-variant-numeric: tabular-nums lining-nums !important;
        letter-spacing: 0 !important;
        line-height: 1.6 !important;
        display: inline-block !important;
        vertical-align: middle !important;
    }

    /* Ensure apostrophes stay on correct baseline */
    .results-section .result-value::after,
    .results-section .result-value::before {
        vertical-align: middle !important;
    }

    /* Prevent accidental justification of large numbers & center content */
    .results-section .results-table th,
    .results-section .results-table td,
    .results-section .result-value,
    .results-section .result-line,
    .results-section .result-totals,
    .results-section .result-totals .total-line,
    .results-section .result-totals .total-line p,
    .results-section .summary-pill,
    .card .results-table th,
    .card .results-table td {
        text-align: center !important;
    }
    .results-section .result-line,
    .results-section .result-totals,
    .results-section .result-totals .total-line,
    .results-section .result-totals .total-line p{
        justify-content: center;
    }
    .results-section .results-table td,
    .results-section .results-table th{
        white-space: nowrap;
    }

    /* ---- OPTIONAL (IMPROVES READABILITY) ---- */
    .card p,
    .card span,
    .card div {
        line-height: 1.55 !important;
    }
    button{
        justify-content: center;
    }
    /* Refinements for profile/reset buttons */
    .profiles-row button,
    .inventory-section .inventory-row button.secondary{
        background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 80%, transparent), color-mix(in srgb, var(--accent-secondary) 65%, transparent));
        border: 0.0625em solid color-mix(in srgb, var(--accent) 40%, transparent);
        box-shadow: 0 0.375em 1em color-mix(in srgb, var(--shadow) 35%, transparent);
    }
    .profiles-row button.danger{
        background: linear-gradient(180deg, color-mix(in srgb, var(--danger) 85%, transparent), color-mix(in srgb, var(--danger) 65%, transparent));
        border-color: color-mix(in srgb, var(--danger) 45%, transparent);
    }
    .results-section .results-wrap{
        width: 100%;
        box-sizing: border-box;
        overflow-x: auto;
        position: relative;
    }
    /* Make first column sticky inside horizontal scroll */
    .results-section .results-table th:first-child,
    .results-section .results-table td:first-child{
        position: sticky;
        left: 0;
        z-index: 2;
        background: var(--panel);
    }
    .results-section .results-table thead th:first-child{
        z-index: 3;
    }
    .back-to-top{
        bottom: 6em;
        right: 0.75em;
        width: 2.75em;
        height: 2.75em;
    }
}





@media (max-width: 56.25em){
    #calculation-results .results-table{
        width: auto;
        margin-left: auto;
        margin-right: auto;
    }
    #calculation-results .results-table th,
    #calculation-results .results-table td{
        text-align: center;
        white-space: nowrap;
    }
    #calculation-results .results-table td:nth-child(n+4),
    #calculation-results .results-table th:nth-child(n+4){
        text-align: center;
    }
    #calculation-results .results-table td:nth-child(-n+3),
    #calculation-results .results-table th:nth-child(-n+3){
        text-align: center;
    }
    #calculation-results .results-table tfoot td{
        text-align: center;
    }
    #calculation-results .results-wrap{
        align-items: center;
    }
}
.result-totals { 
    display: grid; 
    grid-template-columns: repeat(2, minmax(12.5em, 1fr));
    gap: 0.75em; 
    align-items: stretch;
}

.result-totals .total-line{ 
    padding: 0.375em 0.625em; 
    background: var(--card); 
    border-radius: 0.375em; 
    border: 0.0625em solid var(--border); 
    display: flex;
    flex-direction: column;
    align-items: center;
}

.result-totals .total-line p{ 
    margin: 0; 
    width: 100%;
    text-align: center;
}

.gap-line{ 
    margin-top: 0.25em; 
    font-size: 0.9em; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    text-align: center;
    gap: 0.375em; 
    padding: 0.375em 0.625em; 
    border-radius: 0.375em; 
    border: 0.0625em solid transparent; 
}

/* ==========================================================================
   War Laboratory – Helios Research (scoped)
   ========================================================================== */
/* Main 2-column layout */
.war-lab-page .war-lab-main{
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 1.5em;
    align-items: flex-start;
}
.war-lab-page .war-lab-left{
    display: flex;
    flex-direction: column;
    gap: 1.5em;
}
.war-lab-page .war-lab-right{
    display: flex;
    flex-direction: column;
    gap: 1em;
}
@media (max-width: 61.9375em){
    .war-lab-page .war-lab-main{
        grid-template-columns: minmax(0,1fr);
    }
}

/* Inventory grid (mobile stack -> 2x4 desktop) */
.war-lab-inventory-grid{
    display: block;
}
@media (min-width: 64em){
    .war-lab-inventory-grid{
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-auto-rows: 1fr;
        gap: 0.75em 1em;
    }
    .war-lab-inv-item{
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .war-lab-inv-item input,
    .war-lab-inv-item .input,
    .war-lab-inv-item .text-input{
        width: 100%;
    }
}

/* Branch tabs */
.war-lab-page .tab-row{
    display:flex;
    gap:0.5em;
    background: var(--card);
    padding:0.375em;
    border-radius: 0.75em;
    border:0.0625em solid var(--border);
}
.war-lab-page .tab{
    background: transparent;
    color: var(--text);
    border:0.0625em solid transparent;
    border-radius:0.625em;
    padding:0.5em 0.75em;
    cursor:pointer;
    font-weight:600;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.war-lab-page .tab:hover{
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.war-lab-page .tab.is-active{
    background: color-mix(in srgb, var(--accent) 25%, transparent);
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    color: var(--text);
}

/* Tree surface + positioning */
.war-lab-page .tree-surface{
    min-height: 26.25em !important;
    width: 100%;
    overflow: hidden; /* fill available space, no scrollbars on desktop */
}
@media (max-width:63.9375em){
  .war-lab-page .tree-surface{ overflow-x: auto; overflow-y: hidden; }
  .war-lab-page .mobile-branch-nav{ display:flex !important; }
}
.war-lab-page .trees-column{
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625em;
}

/* Desktop tree layout: fill width, no inner scrollbars */
@media (min-width: 64em){
  .war-lab-page .war-lab-tree-section{
    width: 100%;
    overflow: visible;
  }
  .war-lab-page .war-lab-tree-wrapper{
    width: 100%;
    max-width: none;
    display: flex;
    justify-content: center;
    overflow: visible !important;
  }
  .war-lab-page .war-lab-trees-row{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: flex-start;
    gap: 1.125em;
    width: 100%;
    overflow-x: visible !important;
    overflow-y: visible !important;
    flex-wrap: nowrap;
    max-width: 71.25em;
    margin: 0 auto;
  }
  .war-lab-page .war-lab-tree-column{
    flex: 1 1 0;
    max-width: 33%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .war-lab-page #helios-tree{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    gap: 1.5em;
    width: 100%;
    max-width: none;
    overflow-x: visible !important;
    overflow-y: visible !important;
  }
  .war-lab-page #helios-tree .tree-column{
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    justify-content: center;
  }
}

/* Mobile: allow single horizontal scroll only */
@media (max-width: 63.9375em){
  .inventory-profiles-row .profiles {
    flex: 1 1 0;
    min-width: 1em;
  }
.war-lab-page .war-lab-tree-section{
    width: 100%;
    display: flex;
    justify-content: center;
}
  .war-lab-page .war-lab-tree-wrapper{
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 0 0.5em 0.25em;
    display: flex;
    justify-content: center;
    max-width: 100vw;
  }
  .war-lab-page .war-lab-trees-row{
    display: inline-flex;
    flex-direction: row;
    gap: 0;
    overflow: visible;
    padding-bottom: 4.5em;
    justify-content: center;
    width: 100%;
    /* mobile-specific theming */
    --bg: #0a1628;
    --panel: #0f1f35;
    --muted: #1a2d47;
    --accent: #00d9ff;
    --accent-secondary: #0099cc;
    --text: #e8f4f8;
    --muted-text: #a8c5d4;
    --card: rgb(0 217 255 / 5%);
    --success: #00d9ff;
    --danger: #ff7b7b;
    --border: rgb(0 217 255 / 12%);
    --shadow: rgb(0 0 0 / 30%);
    --field-bg: color-mix(in srgb, var(--panel) 85%, transparent);
    --field-border: color-mix(in srgb, var(--border) 150%, transparent);
    --field-focus: color-mix(in srgb, var(--accent) 55%, transparent);
    --field-radius: 0.75em;
    --field-padding: 0.625em 0.875em;
    --field-height: 3em;
    --field-font: 1rem;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    color: var(--text);
    line-height: 1.55 !important;
    min-width: 13.75em;
    position: relative;
    align-items: flex-start;
    min-height: 50vh;
  }
  .war-lab-page .war-lab-tree-column{
    flex: 0 0 auto;
    position: relative;
    padding: 0.5em;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25em;
  }
  .war-lab-page #helios-tree{
    display: inline-flex;
    flex-direction: row;
    gap: 0;
    overflow: visible;
    min-width: 13.75em;
    justify-content: center;
    align-items: flex-start;
  }
  .war-lab-page #helios-tree .tree-column{
    flex: 0 0 auto;
    position: relative;
    width: 12.5em;
    height: 23em;
    margin: 0 auto;
    transform-origin: center top;
    transform: scale(1.3);
  }
}
.war-lab-page .mobile-branch-nav{
    display: flex;
    margin: 0.75em 0;
    justify-content: center;
    gap: 0.5em;
    text-align: center;
}
.war-lab-page .mobile-branch-nav .tab{
    min-width: 1em;
    flex: 0 0 auto;
}
@media (min-width: 64em){
    .war-lab-page .mobile-branch-nav{
        display: none !important;
    }
}

/* Stat recap */
.war-lab-page .stat-recap-card{ margin-top: 0.75em; }
.war-lab-page .stat-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 0.75em;
}
.war-lab-page .stat-col{
    background: color-mix(in srgb, var(--panel) 80%, transparent);
    border: 0.0625em solid var(--border);
    border-radius: 0.625em;
    padding: 0.625em 0.75em;
}
.war-lab-page .stat-list{
    list-style: none;
    padding: 0;
    margin: 0;
}
.war-lab-page .stat-list li{ margin: 0.25em 0; font-size: 0.95em; }
.war-lab-page .stat-list .muted{ color: var(--muted-text); }
@media (max-width: 56.25em){
    .war-lab-page .stat-grid{ grid-template-columns: 1fr; }
}

/* Results (scoped) */
.war-lab-results .results-wrap{
    overflow-x: auto;
    overflow-y: auto;
    border-radius: 0.5em;
    background: var(--card);
    padding: 0.625em;
    max-height: 16.25em;
    width: 100%;
}
.war-lab-results .slot-card{
    overflow: hidden;
}
@media (max-width: 63.9375em) {
  .war-lab-results .slot-card .results-wrap{
      overflow-x: auto;
      overflow-y: hidden;
      width: 100%;
      max-width: calc(100vw - 8rem);
  }
  .war-lab-results .results-table-wrapper{
      width: max-content;
      min-width: 100%;
  }
}
.war-lab-results .result-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 0.75em;
}
.war-lab-results .result-card.span-2{
    grid-column: 1 / -1;
}
.war-lab-results .summary-pill{
    border: 0.0625em solid var(--border);
    background: color-mix(in srgb, var(--panel) 80%, transparent);
    border-radius: 0.5em;
    padding: 0.625em 0.75em;
    display: flex;
    flex-direction: column;
    gap: 0.25em;
}
.war-lab-results .summary-pill.accent{
    background: linear-gradient(90deg, var(--accent), var(--accent-strong));
    color: #fff;
}
.war-lab-results .summary-pill.span-2{
    grid-column: 1 / -1;
}
.war-lab-results .results-table{
    width: 100%;
    border-collapse: collapse;
}
.war-lab-results .results-table th,
.war-lab-results .results-table td{
    padding: 0.25em 0.375em;
    text-align: left;
    border-bottom: 0.0625em solid var(--border);
    font-size: 0.9em;
    white-space: nowrap;
}
.war-lab-results .results-table thead th{
    position: sticky;
    top: 0;
    background: linear-gradient(90deg, var(--card), transparent);
    backdrop-filter: blur(0.125em);
}
.war-lab-results .results-table tfoot td{
    font-weight: 700;
    border-top: 0.125em solid var(--border);
}
.war-lab-results .war-lab-slot-table{
    width: max-content;
    border-collapse: collapse;
    table-layout: auto;
}
.war-lab-results .war-lab-slot-table th,
.war-lab-results .war-lab-slot-table td{
    min-width: 5em;
}
.war-lab-results .war-lab-slot-table .col-name{ min-width: 11.25em; }
.war-lab-results .war-lab-slot-table .col-icon{ min-width: 3em; width:3em; text-align: center; }