:root {
    --font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --accent-colour: #ed7d31;
    --accent-colour-highlight: #da671b;

    --accent-colour-fade: rgba(237, 125, 49,.25);
    --accent-colour-fade: color-mix(in srgb, var(var(--accent-colour)) 25%, transparent);

    --good-colour: #349934;
    --good-colour-highlight: #267626;

    --bad-colour: #d13434;
    --bad-colour-highlight: #a52727;

    --secondary-colour: #435569;
    --secondary-colour-highlight: #283646;

    --bg-colour-light: #fff;    
    --fg-colour-light: #000;
    --mid-colour-light: #bbb;    
    --good-shading-light: rgba(0,255,0,0.2);
    --bad-shading-light: rgba(255,0,0,0.2);

    --bg-colour-dark: #222;
    --fg-colour-dark: #bbb;
    --mid-colour-dark: #555;
    --good-shading-dark: rgba(0,120,0,0.4);
    --bad-shading-dark: rgba(120,0,0,0.4);

    --bg-colour: var(--bg-colour-light);
    --fg-colour: var(--fg-colour-light);
    --mid-colour: var(--mid-colour-light);

    --mid-colour-25: var(--mid-colour);
    --mid-colour-25: color-mix(in srgb, var(--mid-colour) 50%, var(--bg-colour));

    --button-fg-colour: #fff;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-colour: var(--bg-colour-dark);
        --fg-colour: var(--fg-colour-dark);
        --mid-colour: var(--mid-colour-dark);
        --good-shading: var(--good-shading-dark);
        --bad-shading: var(--bad-shading-dark);
    }
}

html.dark {
    --bg-colour: var(--bg-colour-dark);
    --fg-colour: var(--fg-colour-dark);
    --mid-colour: var(--mid-colour-dark);
    --good-shading: var(--good-shading-dark);
    --bad-shading: var(--bad-shading-dark);
}

@media (prefers-color-scheme: light) {
    :root {
        --bg-colour: var(--bg-colour-light);
        --fg-colour: var(--fg-colour-light);
        --mid-colour: var(--mid-colour-light);
        --good-shading: var(--good-shading-light);
        --bad-shading: var(--bad-shading-light);
    }
}

html.light {
    --bg-colour: var(--bg-colour-light);
    --fg-colour: var(--fg-colour-light);
    --mid-colour: var(--mid-colour-light);
    --good-shading: var(--good-shading-light);
    --bad-shading: var(--bad-shading-light);
}

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
    background-color: var(--bg-colour);
    color: var(--fg-colour);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}

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, button.disabled, a.button.disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  button.disabled, a.button.disabled {
    pointer-events: none;
  }

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

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

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

  label {
    display: inline-block;
    vertical-align: top;
  }

  input[type="checkbox"] {
    vertical-align: top;
    margin-right: 0.25em;
  }

  input[type="checkbox"] + label {
    max-width: calc(100% - 2em);
  }
  
  .narrow {
    max-width: 800px;
    margin: 0 auto;
}

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    padding: .25em;
    text-align: left;
    font-weight: normal;
    min-width: 2em;
}

th {
    border-bottom: 1px solid var(--mid-colour);
}

table.values tr :not(:first-child) {
    text-align: right;
}

table.values .good {
    color: var(--good-colour);
}

table.values .bad {
    color: var(--bad-colour);
}

.quote-tiles {
    display: flex;
    flex-wrap: wrap;
}

.quote-tiles > div {
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 800px) {
    .quote-tiles .whatif {
        display: none;
    }
}

@media (min-width: 801px) {
    .quote-tiles > div {
        width: 50%;
    }
}