:root {
    --dial-width: min(20em, 50vw);
    --button-width: max(10em, 10vw);
    --controls-height: calc(var(--dial-width) * 0.60 + 6em);      
}

html, body {
    height: 100%;
}

.wrapper {
    position: relative;
    width: 100vw;
    height: 100vh;    
    overflow: hidden;
}
  
.container {
    position:absolute;
    display: flex;
    flex-direction: row;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.0s;
}

.container.active {
    opacity: 1;
    pointer-events: auto;
    z-index: 100;
}

.container-v {
    flex-direction: column;
    text-align: center;
}

.container.error {
    transition: none;
}

.debug-overlay {
    position: absolute; 
    top: 0; 
    left: 0;
    width: 100vw; 
    height: 100vh;
    z-index: 1000; 
    background-color: var(--bg-colour); 
    display: none;
}

.debug-overlay .inner {
    --debug-overlay-width: min(100vw, 900px);
    position: absolute;
    max-height: 100vh;
    padding-left: 2rem; 
    left: calc((100vw - var(--debug-overlay-width)) / 2);
    width: var(--debug-overlay-width, 100vw); 
}

.debug-overlay .content {
    max-height: 100vh;
    overflow: auto;
}

.debug-overlay pre {
    white-space: pre-wrap;
    padding: 1em;
}

.show-debug .debug-overlay {
    display: block;
}

.debug-overlay .buttons-overlay {
    z-index: 1000; 
}

.error.active {
    z-index: 200;
    background-color: var(--bg-colour);
    align-items: center;
    text-align: center;
    flex-direction: column;
}

.error img {
    height: min(256px, 25vh, 50vw);
    margin: 0 auto;
}

.error h1 {
    font-size: 2em;    
    font-weight: normal;
    margin: 0;
}

.popup-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;    
    z-index: 400;
    pointer-events: none;
}

.popup {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    max-height: 90vh;
    min-width: min(400px, 25vw);
    max-width: 90vw;
    border: 1px solid var(--fg-colour);
    border-radius: .5rem;
    padding: .5rem;
    background-color: var(--bg-colour);
    transition: opacity .5s;
}

.popup.active {
    opacity: 1;
    z-index: 500;
    pointer-events: auto;
}

.popup-backdrop {
    opacity: 0;
    pointer-events: none;
    z-index: 400;
    position: absolute;
    background-color: #000;
    top:0;
    left:0;
    bottom:0;
    right:0;    
    transition: opacity 1s;
}

.popup.active ~ .popup-backdrop {
    opacity: .5;
    pointer-events: auto;
}

.popup .close-popup {
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
}

.popup-header .close-popup {
    position: absolute;
    top: .5rem;
    right: .5rem;
}

.popup-header {
    margin-bottom: .5rem;
}

.popup-footer {
    text-align: end;
    margin-top: .5rem;
}

.popup p {
    margin: .25rem 0;
}

.popup h1 {
    margin: 0;
    font-weight: normal;
    font-size: 1.5rem;
}

.splash {
    background-image: url('/img/doris-blue-not-loading.svg');
    background-position: center;
    background-size: min(75%, 500px);
    background-repeat: no-repeat;
}

.logo-bg-wide {
    background-image: url('/img/doris-blue.svg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.loading {
    background-image: url('/img/loading.svg');
    background-position: center;
    background-size: min(75%, 500px);
    background-repeat: no-repeat;
}

.splash.loading {
    background-image: url('/img/doris-blue-loading.svg');
}

.loading-overlay {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.0s;
}

.with-loading-overlay .loading-overlay {
    z-index: 200;
    opacity: 1;
    pointer-events: auto;
}

.fade-on-loading {
    transition: opacity 1.0s;
}

.with-loading-overlay .fade-on-loading {
    pointer-events: none;
    opacity: 0.125;
}

/* inverse splash screen images for dark mode */
@media (prefers-color-scheme: dark) {
    .splash {
        background-image: url('/img/doris-white-not-loading.svg');
    }
    .splash.loading {
        background-image: url('/img/doris-white-loading.svg');
    }
    .logo-bg-wide {
        background-image: url('/img/doris-white.svg');
    }    
}

html.dark {
    .splash {
        background-image: url('/img/doris-white-not-loading.svg');
    }
    .splash.loading {
        background-image: url('/img/doris-white-loading.svg');
    }
    .logo-bg-wide {
        background-image: url('/img/doris-white.svg');
    }    
}

/* default splash screen images regardless of prefers-color-scheme if .light explicitly set on root element */
html.light {
    .splash {
        background-image: url('/img/doris-blue-not-loading.svg');
    }
    .splash.loading {
        background-image: url('/img/doris-blue-loading.svg');
    }
    .logo-bg-wide {
        background-image: url('/img/doris-blue.svg');
    }    
}

  
.chart, .controls {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

.chart {
    overflow: hidden;
    justify-content: center;
    align-items: stretch;
    position: relative;
}

.buttons-overlay {
    position: absolute;
    padding: .5em;
    z-index: 100;
}

.buttons-overlay-tr {
    top: 0;
    right: 0;    
}

.buttons-overlay-tl {
    top: 0;
    left: 0;    
}

.buttons-overlay button {
    all: unset;
    cursor: pointer;
}

.buttons-overlay a, .buttons-overlay button {
    display: block;
    padding:.25em;
    opacity: 0.80;
    color: var(--fg-colour);
    background-color: transparent;
}

.buttons-overlay a {
    text-decoration: none;
}

.buttons-overlay a:hover, .buttons-overlay button:hover {
    opacity: 1;
    background-color: transparent;
}

.zoomed svg .zoom-in {
    fill: none;
    stroke: none;
}

.controls {
    --button-height: 2.5em;
    --controls-width: min(16em, calc((100vh - var(--button-height) * 3.5) / 2.0));
    min-width: 12em;
    max-width: max(12em, var(--controls-width));
    min-height: 100vh;
    max-height: 100vh;
}

.dials {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto auto 1fr;    
    width: 100%;
/*    height: 100vh; */
}

#cash-rate-slider { 
    text-align: center;
    svg {
        width: 100%;
        height: auto;
    }
}

.cash-rate-label p {
    margin: .5rem;
}

.buttons {
    width: 100%;
    text-align: center;
    min-height: 3em;
}

button, a.button {
    --button-bg-colour: var(--accent-colour);
    --button-hl-colour: var(--accent-colour-highlight);
    all: unset;
    display: inline-block;
    padding: 0.25em 1em;
    background-color: var(--button-bg-colour);
    border:1px solid var(--button-bg-colour);
    color: var(--button-fg-colour);
    border-radius: 0.5em;
    height:2.0em;
    box-sizing: border-box;
    font-size: 1em;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    transition: background-color 0.2s, opacity 0.2s;
  }
  
  button:hover, button:active, a.button:hover, a.button:active {
    background-color: var(--button-hl-colour);
  }
 
  button:disabled, a.button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  button.secondary, a.button.secondary {
    --button-bg-colour: var(--secondary-colour);
    --button-hl-colour: var(--secondary-colour-highlight);
  }

.dial-wrapper, .dial-inner-wrapper {
    width: var(--controls-width);
    text-align: center;
    margin: 0 auto;
}

.dial-pointer, .dial-fg, .dial-bg {
    cursor: pointer;
}

.dial-pointer-fg {
    fill: var(--accent-colour);
}

.dial-fg {
    stroke: var(--accent-colour);
}

.dial-wrapper:hover .dial-pointer-fg {
    fill: var(--accent-colour-highlight);
}

.dial-wrapper:hover .dial-fg {
    stroke: var(--accent-colour-highlight);
}

.dial-bg {
    stroke: var(--mid-colour);
}

.controls-h {
    position: relative;
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 40em;
    --dial-width: min(20em, 45vw);
    --controls-height: calc(var(--dial-width) * 0.50);
    min-height: var(--controls-height);
    margin: 0 auto;
}

.cash-rate-label {
    font-size:.8rem;
    text-align: center;
}

select {
    display: inline-block;
    width: 100%;
    max-width: 16rem;
    padding: .125rem 0.75rem .125rem .25rem;
    -moz-padding-start: calc(0.25rem - 3px);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--fg-colour);
    background-color: var(--bg-colour);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .25rem center;
    background-size: 16px 12px;
    border: 1px solid var(--accent-colour);
    border-radius: .375rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-transform: none;
    word-wrap: normal;
    margin: 0;
}

input {
    display: inline-block;
    width: 100%;
    max-width: 16rem;
    padding: .125rem .25rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--fg-colour);
    background-color: var(--bg-colour);
    background-clip: padding-box;
    border: 1px solid var(--accent-colour);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .375rem;
 }

 input, select {
    font-family: var(--font-family);
 }

 .input-group {
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 16rem;
    margin: .5rem auto;
 }

 .input-group span {
    padding: .125rem .25rem;
    min-width: 1.5em;
    font-size: 1rem;
    border: 1px solid var(--accent-colour);
    background-color: var(--mid-colour-25);
 }

 .input-group * {
    border-radius: 0;
 }

.input-group :not(:last-child) {
    border-right:none;
}

 .input-group :first-child {
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
 }

 .input-group :last-child {
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
 }

 input:focus, select:focus {
    border-color: var(--accent-colour);
    outline: 0;
    box-shadow: 0 0 0 0.125rem var(--accent-colour-fade);
}

.params-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.logo-bg-wide {
    min-height: 6rem;
    margin: .5rem;
}

#design h1 {
    margin: 0;
    padding: 0;
    font-size: 1.25rem;
    font-weight: normal;
    text-align: center;
}

@media (max-height: 28rem) {
    .params-form {
        flex-direction: row;
    }
    .input-group {
        margin: .5rem;
    }
    .logo-bg-wide {
        min-height: 4rem;
    }
    .controls-h {
        max-width: 32rem;
    }
    .controls-h {
        --dial-width: min(16rem, 45vw);
    }
}

@media (min-height: 540px) and (max-aspect-ratio: 5/6) {
    .controls-h {
        flex-direction: column;
        --dial-width: min(20em, 60vw);
    }
}

@media (max-aspect-ratio: 1.4) {
    .container {
        flex-direction: column;
    }
    .controls {        
        min-width: 100vw;
        max-width: 100vw;
        min-height: var(--controls-height);
        max-height: var(--controls-height);
        --dial-height: calc(var(--controls-height) - 6rem);
    }
    .dials {
        height: calc(var(--controls-height) - 3em);
        width: 100%;
        grid-template-columns: 1fr 1fr;
        order: 0;
    }
    .dial-wrapper {
        --dial-start-angle: 85;
    }
    .dial-wrapper, .dial-inner-wrapper {
        height: var(--dial-height);
        width: 100%;
    }    
    #cash-rate-slider svg {
        width: calc(var(--dial-height) * 5 / 3);
    }    
    .controls button {
        width: var(--button-width);
    }
}

@media (max-height: 400px) {
    .controls {
        --controls-width: min(16em, calc((100vh - var(--button-height) * 2.5) / 2.0));
    }    
    .cash-rate-label {
        font-size: 0.5rem;
    }
}

@media (max-width: 750px) {
    #design h1 {
        font-size: 1rem;
    }
}

@media (max-width: 500px) {
    #design h1 {
        font-size: .8rem;
    }
}