/*============================================================
    welcome
============================================================ */
/* #region || welcome */
/* Table Of Contents





welcome
imports
resets
theme
\\light mode
\\dark mode
layout

headings
type scale

buttons
navigation

animations
media queries







INSPIRATION

*/
/* =============================================
    END welcome
============================================= */
/* #endregion || welcome */






/*============================================================
    imports
============================================================ */
/* #region || imports */

/* @import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600&display=swap"); */
/* @import url("https://fonts.googleapis.com/icon?family=Material+Icons"); */
/* @import url("https://fonts.googleapis.com/icon?family=Material+Icons+Outlined"); */

/* @import url("./normalize.css?v=000"); */
/* @import url("./html5boilerplate.css?v=000"); */
/* @import url("./mediaqueries.css?v=000"); */


/* =============================================
    END imports
============================================= */
/* #endregion || imports */





/*============================================================
    resets
============================================================ */
/* #region || resets */


ul[class] {
    margin: 0;
    padding: 0;
    list-style-type: none;
}


ul[class] li {
    margin: 0;
    font-size: inherit;
}


ul[class] a {
    text-decoration: inherit;
    color: inherit;
}


button, input, select {
    color: inherit;
}

button, input[type=button] {
    font: inherit;
    font-size: inherit;
}

.material-icons {
    font-size: inherit;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    opacity: 1;
}



/* =============================================
    END resets
============================================= */
/* #endregion || resets */






/*============================================================
    theme
============================================================ */
/* #region || theme */


:root {

    --slider-color: #6e6e6e;
    --slider-track-color: #d3d3d3;

    --color-primary: #fcfcfc;
    --color-secondary: #747474;
    --color-accent: #18810e;

    --surface-page: #fafafa;
    --surface-elevated: #ffffff;
    --surface-muted: rgba(0,0,0,.08);
    --surface-input: rgba(255,255,255,.7);
    --surface-overlay: rgba(255,255,255,.94);
    --shadow-color: rgba(0,0,0,.14);
    --border-color-strong: #d1d1d1;
    --border-color-soft: rgba(0,0,0,.1);
    --switch-track-color: #ccc;
    --switch-thumb-color: #ffffff;
    --site-icon-bg: #8e8e8e;
    --chart-text-color: rgba(0, 0, 0, 0.62);
    --chart-grid-color: rgba(0, 0, 0, 0.1);
    --positive-bg: #ddffd6;
    --negative-bg: #ffd6d6;
    --active-bg: rgba(0,0,0,.08);

    --rateColor0: #FF8080;
    --rateColor1: #80FF80;
    --rateColor2: #8080FF;
    --rateColor3: #60F5FF;
    --rateColor4: #FCAF54;

    --color-neutral-100: hsl(0, 0%, 90%);
    --color-neutral-300: hsl(0, 0%, 70%);
    --color-neutral-500: hsl(0, 0%, 50%);
    --color-neutral-900: hsl(214, 6%, 24%);

    --font-color-light: var(--color-neutral-100);
    --font-color-dark: var(--color-neutral-900);
    --border-color-primary: var(--color-neutral-500);

    --font-size-4xl: 4em;
    --font-size-3xl: 3em;
    --font-size-2xl: 2em;
    --font-size-xl: 1.5em;
    --font-size-lg: 1.17em;
    --font-size-md: 1em;
    --font-size-sm: .83em;
    --font-size-xs: .76em;
    --font-size-2xs: .67em;

    --font-size-scaled: clamp(1.5em, 5vw, 2.5em);

    --site-width: clamp(320px, 100%, 900px);
    --site-content-width: clamp(320px, 100%, 700px);
}


html {
    font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
    font-size: 100%;
    line-height: 1.2;
    color: var(--font-color-dark);
    background-color: var(--surface-page);
    color-scheme: light;
}

body {
    background-color: var(--surface-page);
}


h1,h2,h3,h4,h5,h6 {
    color: var(--font-color-dark);
}





/* #region || light mode */
@media (prefers-color-scheme: light ) {

}
/* #endregion || light mode */




/* #region || dark mode */
@media (prefers-color-scheme: dark ) {
    :root {
        --slider-color: #c2c8cf;
        --slider-track-color: rgba(255,255,255,.16);
        --surface-page: #101214;
        --surface-elevated: #171a1d;
        --surface-muted: rgba(255,255,255,.08);
        --surface-input: rgba(255,255,255,.08);
        --surface-overlay: rgba(23,26,29,.96);
        --shadow-color: rgba(0,0,0,.45);
        --font-color-dark: hsl(210, 12%, 88%);
        --border-color-primary: rgba(255,255,255,.24);
        --border-color-strong: rgba(255,255,255,.18);
        --border-color-soft: rgba(255,255,255,.12);
        --switch-track-color: rgba(255,255,255,.22);
        --switch-thumb-color: #f5f5f5;
        --site-icon-bg: #4d5660;
        --chart-text-color: rgba(255,255,255,.78);
        --chart-grid-color: rgba(255,255,255,.16);
        --positive-bg: rgba(86, 168, 102, 0.35);
        --negative-bg: rgba(194, 92, 92, 0.35);
        --active-bg: rgba(255,255,255,.12);
    }

    html {
        color-scheme: dark;
    }
}

:root.dark-mode {
    --slider-color: #c2c8cf;
    --slider-track-color: rgba(255,255,255,.16);
    --surface-page: #101214;
    --surface-elevated: #171a1d;
    --surface-muted: rgba(255,255,255,.08);
    --surface-input: rgba(255,255,255,.08);
    --surface-overlay: rgba(23,26,29,.96);
    --shadow-color: rgba(0,0,0,.45);
    --font-color-dark: hsl(210, 12%, 88%);
    --border-color-primary: rgba(255,255,255,.24);
    --border-color-strong: rgba(255,255,255,.18);
    --border-color-soft: rgba(255,255,255,.12);
    --switch-track-color: rgba(255,255,255,.22);
    --switch-thumb-color: #f5f5f5;
    --site-icon-bg: #4d5660;
    --chart-text-color: rgba(255,255,255,.78);
    --chart-grid-color: rgba(255,255,255,.16);
    --positive-bg: rgba(86, 168, 102, 0.35);
    --negative-bg: rgba(194, 92, 92, 0.35);
    --active-bg: rgba(255,255,255,.12);
}

html.dark-mode {
    color-scheme: dark;
}
/* #endregion || dark mode */



/* .colorpop {
    transition: all 200ms ease-out;
} */

.positive {
    background-color: var(--positive-bg);

}

.negative {
    background-color: var(--negative-bg);
}


.active {
    background-color: var(--active-bg);
    /* background-color: rgba(0, 0, 0, 0.2); */
}

/* =============================================
    END theme
============================================= */
/* #endregion || theme */





/* ============================================================
    3. site header
============================================================ */
/* #region || site header */

.header-wrapper {
    background-color: var(--surface-elevated);
    border-bottom: 1px solid var(--border-color-strong);
    box-shadow: 0 -1px 4px 0px var(--shadow-color);
}


.header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-inline: auto;
    width: var(--site-width);
}

.header-left {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-grow: 1;
}

.add-group-btn {
    color: var(--font-color-dark);
    font-size: clamp(1.9em, 6vw, 3em);
    cursor: pointer;
    user-select: none;
    margin: 5px;
}

.legacy .add-group-btn {
    font-size: clamp(1.9em, 6vw, 2.5em);
    margin: 0;
}

.site-icon {
    width: clamp(30px, 5vw, 40px);
    /* width: 40px; */
    margin: 5px;
    background-color: var(--site-icon-bg);
    border-radius: 100%;
}

.legacy .site-icon {
    width: clamp(30px, 5vw, 35px);
}



.site-title.mobile {
    display: none;
}

@media only screen and (max-width: 340px) {
    .site-title {
        display: none;
    }

    .site-title.mobile {
        display: initial;
    }
}


.site-title {
    /* font-size: clamp(1.8em, 5vw, 2em); */
    font-size: clamp(1.2rem, .8rem + 2vw, 2.2rem);
    /* font-size: clamp(1.5rem, 5vw, 2.2rem); */
    /* margin: 0 .1em .2em; */
}

.divider {
    font-size: clamp(1.8em, 5vw, 2em);
    margin: 0 .1em .2em;
}

/* #endregion || site header */






/*============================================================
    layout  
============================================================ */
/* #region || layout */


body {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    /* todo: should this be min-height */
    /* min-height: 100dvh; */
    margin: 0;
    color: var(--font-color-dark);
}

.main {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
    margin: 0 auto;
    width: 100%;
    max-width: var(--site-content-width);
}

.legacy .main {
    flex-direction: column-reverse;
    justify-content: space-evenly;
    max-width: revert;
}


.site-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    grid-area: content;
    overflow: hidden;
    overflow-y: scroll;
}







/* =============================================
    END layout
============================================= */
/* #endregion || layout */





/*============================================================
    headings
============================================================ */
/* #region || headings */




h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.5em;
}

h3 {
    font-size: 1.17em;
}

h4 {
    font-size: 1em;
}

h5 {
    font-size: .83em;
}

h6 {
    font-size: .67em;
}





/* =============================================
    END headings
============================================= */
/* #endregion || headings */





/*============================================================
    type scale
============================================================ */
/* #region || type scale */




p,
li {
    font-size: 1.1em;
    margin: 0 0 1em;
}


.font-size-4xl { font-size: 4em; }
.font-size-3xl { font-size: 3em; }
.font-size-2xl { font-size: 2em; }
.font-size-xl { font-size: 1.5em; }
.font-size-lg { font-size: 1.17em; }
.font-size-md { font-size: 1em; }
.font-size-sm { font-size: .83em; }
.font-size-xs { font-size: .76em; }
.font-size-2xs { font-size: .67em; }


blockquote > p::before {
    content: '"';
}

blockquote > p::after {
    content: '"';
}




/* =============================================
    END type scale
============================================= */
/* #endregion || type scale */



/* style="--ratetable-bg-color: rgba(0,210,213, 0.5);" */

/*============================================================
    buttons
============================================================ */
/* #region || buttons */

.convert-btn {
    text-align: center;
    margin: 0;
    border: 1px solid darkgrey;
    border-radius: .3em;
    cursor: pointer;
    height: 100%;
    background-color: rgba(0,0,0,0);
}

.convert-btn:hover {
    background-color: rgba(0,0,0,.1);
}

.legacy .convert-btn {
    margin: 2px;
    height: initial;
}






/* =============================================
    END buttons
============================================= */
/* #endregion || buttons */






/*============================================================
    utilities
============================================================ */
/* #region || utilities */




.hidden {
    display: none;
    visibility: none;
}

.ellipsis {
    max-width: 97%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}




/* =============================================
    END utilities
============================================= */
/* #endregion || utilities */




/*============================================================
    animations
============================================================ */
/* #region || animations */






.rainbow {
    background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
    background-size: 180% 180%;

    -webkit-animation: rainbow 2s ease infinite;
    -z-animation: rainbow 2s ease infinite;
    -o-animation: rainbow 2s ease infinite;
    animation: rainbow 2s ease infinite;
}

@-webkit-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-moz-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-o-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@keyframes rainbow { 
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}

/* potentially simpler solution */
/* 
.rainbow {
  background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
  background-size: 200% 200%;
  animation: rainbow 2s linear infinite;
}

@keyframes rainbow {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
} */



/* =============================================
    END animations
============================================= */
/* #endregion || animations */





/*============================================================
    media queries
============================================================ */
/* #region || media queries */






/* Extra small devices (phones, 600px and down) */
/* @media only screen and (max-width: 600px) {} */

/* Small devices (portrait tablets and large phones, 600px and up) */
/* @media only screen and (min-width: 600px) {} */

/* Medium devices (landscape tablets, 768px and up) */
/* @media only screen and (min-width: 768px) {} */

/* Large devices (laptops/desktops, 992px and up) */
/* @media only screen and (min-width: 992px) {} */

/* Extra large devices (large laptops and desktops, 1200px and up) */
/* @media only screen and (min-width: 1200px) {} */







/* =============================================
    END media queries
============================================= */
/* #endregion || media queries */


/*============================================================
    input section
============================================================ */
/* #region || input section */



.input-container {
    margin-inline: 4px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
@media screen and (max-width: 450px) {
    .input-container {
        justify-content: start;
    }
    .legacy .input-container {
        justify-content: space-evenly;
    }
}
.input-container input[type=number] {
    text-align: center;
    font-size: 1rem;
    border: none;
    background-color: var(--surface-input);
    width: 100%;
    font-size: 1.2rem;
    padding-block: .2rem;
    box-sizing: border-box;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.legacy .input-container input[type=number] {
    border: revert;
    font-size: .9rem;
    background-color: revert;
    padding-block: revert;
    border-top-left-radius: revert;
    border-top-right-radius: revert;
}


.legacy .input-container input.maxAngularVel[type=number] {
    border: none;
    background-color: none;
    padding-block: none;
    box-shadow: none;
    padding: 2px;
    margin-top: 4px;
}
/* Chrome, Safari, Edge, Opera */
input.rate-input.maxAngularVel::-webkit-outer-spin-button,
input.rate-input.maxAngularVel::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input.rate-input.maxAngularVel[type=number] {
  -moz-appearance: textfield;
}


.legacy .input-container {
    all: unset;
    /* padding: clamp(.2em, .7vw, 1.2em); */
    /* padding-top: clamp(.2em, 1.7vw, 1.2em); */
    /* padding-bottom: 0; */
    max-width: clamp(400px, 580px, 100%);
    /* max-width: clamp(400px, 550px, 100%); */
    padding: 1.2em .7em .7em;
    border: 1px solid var(--border-color-strong);
    margin: 0 auto;
    border-radius: .8em;
    box-shadow: 1px 1px 9px -3px var(--shadow-color);
}


.legacy .input-container {
    width: 100%;
    box-sizing: border-box;
}



/* =============================================
    END input section
============================================= */
/* #endregion || input section */





/*============================================================
    slider
============================================================ */
/* #region || slider */



.slider {
    --slider-thumb-size: 2rem;
    --slider-bg-size: calc(var(--slider-thumb-size) - 12px);
    margin: .7em 0 .3em;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: var(--slider-bg-size);
    background: var(--slider-track-color);
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
    border-radius: .3em;
}

.legacy .slider {
    height: 16px;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--slider-thumb-size);
    height: var(--slider-thumb-size);
    background: var(--slider-color);
    cursor: pointer;
    border-radius: 1em;
}

.legacy .slider::-webkit-slider-thumb {
    width: 14px;
    height: 14px;
}

.slider::-moz-range-thumb {
    width: var(--slider-thumb-size);
    height: var(--slider-thumb-size);
    background: var(--slider-color);
    cursor: pointer;
    border-radius: 1em;
}

.legacy .slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
}


/* =============================================
    END slider
============================================= */
/* #endregion || slider */


/*============================================================
    chart
============================================================ */
/* #region || chart */

.chart-container {
    width: 100%;
}


.legacy .chart-container {
    margin: 0 auto;
    max-width: 850px;
}


/* =============================================
    END chart
============================================= */
/* #endregion || chart */

/* ============================================================
    1. footer
============================================================ */
/* #region || footer */

.project-info-footer {
    /* position: static; */
    /* text-align: right; */
    /* bottom: 0; */
    /* right: 0; */
    color: var(--font-color-dark);
    padding: 5px 10px;
    margin-top: 1rem;
    /* margin-inline: auto; */
    /* width: var(--site-width); */
    font-size: .8rem;
    background-color: var(--surface-muted);
    box-sizing: border-box;
}

@media (max-width: 450px) {
    .footer {
        display: none;
    }
}


/* #endregion || footer */


/*============================================================
    rate tables
============================================================ */
/* #region || rate tables */



.data-row {
    margin-block: .07rem;
}
.data-cell {
    display: flex;
    flex-direction: column;
    text-align: center;
    background-color: var(--ratetable-bg-color, rgb(205, 205, 205));
    margin: 2px;
    border-radius: .4rem;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid var(--border-color-soft);
}

.legacy .data-cell {
    justify-content: flex-end;
}
/* .data-cell.convert {} */
/* .convert-btn {} */
/* .convert-btn {} */
/* .data-cell.stats {} */
/* .data-cell-title {} */
/* .rate-input.totalDelta {} */
/* .data-row.slider-container {} */
/* .slider {} */
/* .footer {} */
/* .project-info-footer {} */
.ratetable-group {
    margin-block: .4rem;
    padding: .1rem;
}
@media screen and (max-width: 450px) {
    .ratetable-group {
        margin-block: 0;
    }
}
.legacy .ratetable-group {
    margin-block: .4rem;
    /* border-left: 5px solid var(--ratetable-bg-color); */
}
/* .ratetable-group input {} */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -moz-appearance: textfield;
    -webkit-appearance: none;
    margin: 0;
}

.legacy input[type=number]::-webkit-inner-spin-button,
.legacy input[type=number]::-webkit-outer-spin-button {
    -moz-appearance: auto;
    -webkit-appearance: auto;
    margin: initial;
}

.ratetable-group .data-row:first-child {
    display: grid;
    grid-template-columns: 2fr 1fr;
}
.ratetable-group .data-row:nth-child(2) {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
.data-row.convert {
    display: grid;
    grid-template-columns: 2fr 1fr;
}
/* .data-row.ratetable-typesection {} */
/* .data-cell.rate-type {} */
.ratetype-selector {
    appearance: none;
    border: none;
    text-align-last: center;
    height: 100%;
    width: 100%;
    font-size: 1.2rem;
    background-color: rgba(0,0,0,.1);
    border: 3px solid rgba(255,255,255,.5);
    box-sizing: border-box;
}

.data-cell.rate-type .icon {
    position: absolute;
    line-height: 1;
    font-size: 0;
    height: clamp(1.2rem, 7vw, 2rem);
    width: clamp(1.2rem, 7vw, 2rem);
    margin-inline: .5rem;
    align-self: start;
    pointer-events: none;
}

.data-cell.rate-type {
    position: relative;
}

.data-cell.rate-type .icon.right {
    align-self: end;
    scale: 1.2;
}

.legacy .data-cell.rate-type .icon {
    display: none;
}

.legacy .ratetype-selector {
    appearance: auto;
    border: revert;
    font-size: revert;
    background-color: revert;
    text-align-last: revert;
    height: revert;
    color: revert;
}
/* .data-cell.max {} */
.data-cell-title {
    padding-bottom: 4px;
}
@media screen and (max-width: 450px) {
    .data-cell-title {
        font-size: 0.8rem;
        line-height: 1.4;
    }
    
}

.legacy .data-row.convert {
    display: none;
}


.legacy .ratetable {
    width: 100%;
    display: table;
    /* border-style: hidden; */
}

.legacy .ratetable td {
    padding: 2px;
    width: 20%;
}

.legacy .ratetable td:nth-child(1) {
    padding: 2px;
    width: 16px;
}

.legacy .ratetable td:last-child {
    padding: 2px;
    width: 60px;
}

.legacy .ratetable-deletesection {
    text-align: right;
    vertical-align: bottom;
}

.legacy .ratetable-delete {
    font-size: 14px;
    border-radius: 100%;
    filter: opacity(.2);
    cursor: pointer;
}

.legacy .ratetable-delete:hover {
    filter: opacity(.9);
}

.legacy .ratetable-header {
    font-size: 80%;
    padding: .1em .4em;
}

.legacy .ratetable .stats {
    text-align: center;
    font-size: .8em;
    max-width: 60px;
}

.legacy .ratetable input,
.legacy .ratetable select {
    width: 100%;
    box-sizing: border-box;
}


.data-row.slider-container {
    padding-block: 1rem;
}

/* todo: is this really necessary */
.legacy .data-row.slider-container {
    all: unset;
}




/* =============================================
    END rate tables
============================================= */
/* #endregion || rate tables */




.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    margin: 5px;
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.switchslider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--switch-track-color);
    -webkit-transition: .4s;
    transition: .4s;
}
.switchslider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: var(--switch-thumb-color);
    -webkit-transition: .4s;
    transition: .4s;
}
input:checked + .switchslider {
    /* background-color: #2196F3; */
    background-color: rgba(186, 60, 79, 0.65);
}
.switch:has(:focus-visible) .switchslider {
    /* outline: 5px solid rgba(60, 129, 186, 0.4); */
    /* box-shadow: 0 2px 3px rgba(60, 129, 186, 0.4); */
    /* box-shadow: 0 0 1px #2196F3; */
    /* outline-offset: 3px; */
    outline: 5px solid rgba(186, 60, 79, 0.4);
    box-shadow: 0 2px 3px rgba(186, 60, 79, 0.4);
}
input:checked + .switchslider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}
.switchslider.round {
    border-radius: 34px;
}
.switchslider.round:before {
    border-radius: 50%;
}

input.rate-input.maxAngularVel {
    border: none;
    box-shadow: none;
}
/* Chrome, Safari, Edge, Opera */
input.rate-input.maxAngularVel::-webkit-outer-spin-button,
input.rate-input.maxAngularVel::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input.rate-input.maxAngularVel[type=number] {
  -moz-appearance: textfield;
}

.ratetable-group .data-row:nth-child(2) .data-cell.max {
    display: none;
}

.legacy .ratetable-group .data-cell {
    background-color: transparent;
    font-size: .8rem;
    border: none;
}

.legacy .ratetable-group .data-cell input {
    font-size: .7rem;
}

.ratetable-group .convert-btn {
    display: none;
}
#convert-btn {
    font-size: 1.2rem;
    border: 4px solid rgba(255,255,255,.5);
    box-sizing: border-box;
}

.legacy .ratetable-group .convert-btn {
    display: revert;
    padding-bottom: 2px;
    font-size: inherit;
}

.legacy .ratetable-group {
    display: grid;
    grid-template-columns: 1.3fr 4fr;
}

.legacy .data-row:first-child {
    grid-template-columns: revert;
}

.legacy .data-row:first-child .data-cell.max {
    display: none;
}

.legacy .ratetable-group .data-row:nth-child(2) {
    grid-template-columns: 1fr 1fr 1fr .8fr;
    /* grid-template-columns: 1fr 1fr 1fr .6fr; */
}

.legacy .ratetable-group .data-row:nth-child(2) .data-cell.max {
    display: initial;
}


.option-dialog {
    color: var(--font-color-dark);
    background-color: var(--surface-overlay);
    border: 1px solid var(--border-color-strong);
    border-radius: .7rem;
}

.option-dialog::backdrop {
    background-color: rgba(0,0,0,.45);
}

.option-grid {
    display: grid;
    grid-template-columns: 1fr min-content;
    gap: .5rem;
    padding: 1rem;
}

.option-title {
    display: flex;
    align-items: center;
    background-color: var(--surface-muted);
    padding-inline: 1rem;
    border-radius: 10px;
}

.option-dialog button {
    border: 1px solid var(--border-color-strong);
    border-radius: .2rem;
    background-color: var(--surface-muted);
    width: 50%;
    padding-block: .4rem;
    min-width: 60px;
    margin-top: 1rem;
}
.option-dialog button:hover {
    background-color: var(--active-bg);
}




.settings-btn {
    height: 34px;
    width: 34px;
    padding: 0;
    margin: 0;
    background-color: transparent;
    border: none;
    fill: var(--btn-color, hsl(0, 0%, 38%));
    margin-inline: 0.1rem;
    cursor: pointer;
    transition: fill 100ms ease-out;
}

.settings-btn:hover {
    --btn-color: hsl(214, 0.6%, 54.23%);

}

.attention-grab {
    transform: scale(1.02); 
    background-color: var(--active-bg);
    transition: transform 0.3s ease-in-out, background-color 0.2s ease-in-out; 
}