/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* stylesheet */
:root {
    --light-pink: oklch(88.744% 0.03741 336.83);
    --lighter-pink: oklch(93.696% 0.02181 334.678);
    --lightest-pink: oklch(0.9547 0.0168 336.28);
    --light-medium-pink: oklch(83.967% 0.06038 336.764);
    --medium-pink: oklch(0.8165 0.0587 336.28);
    --dark-medium-pink: oklch(60.779% 0.11855 337.188);
    --darkest-pink: oklch(54.843% 0.14577 338.138);
    --black-pink: oklch(0.4288 0.0291 336.28);
    --grey: rgb(123, 123, 123);
    --light-grey: rgb(191, 191, 191);

    --emph: oklch(69.301% 0.11035 337.119);
    --emph-hover: oklch(50.94% 0.17645 340.494);
    --table-pink-1: oklch(88.585% 0.04001 334.863);
    --table-pink-2: oklch(84.194% 0.04741 335.986);
    --th-pink-1: rgb(220, 189, 213);
    --bg: var(--lighter-pink);
    --wrapper-bg: var(--lightest-pink);

    --body-padding: 16px;
    --form-padding: 8px;
    --small-padding: 4px;
    --smallest-padding: 2px;
    --column-gap: var(--form-padding);

    --dark-transition: 1s;
}

.dark {
    --medium-pink: oklch(0.7224 0.0957 336.28);
    --emph: oklch(0.7924 0.0957 336.28);
    --emph-hover: oklch(87.141% 0.0803 337.047);
    --table-pink-1: oklch(42.846% 0.04079 335.797);
    --table-pink-2: oklch(48.446% 0.03761 336.008);
    --th-pink-1: oklch(50.34% 0.048 335.339);
    --bg: oklch(38.224% 0.0252 336.355);
    --wrapper-bg: oklch(34.568% 0.02799 335.808);
}

body {
    font-family: "Arial", "Helvetica", sans-serif;
    background-color: var(--bg);
    transition: var(--dark-transition);
    min-height: calc(100vh - 2 * var(--body-padding));
    display: grid;
    align-content: space-between;
    grid-template-rows: 1fr auto;
    overflow: auto;
    padding: var(--body-padding);
}

body, p {
    line-height: var(--line-height);
}

body, input, button {
    color: var(--black-pink);
}

body, input, button, #popup {
    font-size: small;
}

.dark body, .dark input, .dark button {
    color: var(--light-pink);
}

main {
    display: flex;
    align-items: center;
    justify-content: center;
}

#wrapper {
    padding: var(--form-padding);
    border: 1px solid var(--medium-pink);
    border-radius: 15px;
    min-width: 40vw;
    max-width: 600px;
    display: flex;
    align-items: center;
    gap: var(--form-padding);
    flex-direction: column;
    background-color: var(--wrapper-bg);

    --popup-form-width: 35ch;
    --line-height: 1.5em;
    --add-remove-left-margin: var(--small-padding);
    --add-remove-padding: var(--smallest-padding);
    --button-width: calc(1ch + var(--add-remove-left-margin)
                        + var(--add-remove-padding) * 2 + 2px);
    --buttons-width: calc(var(--button-width) * 2);
    --input-padding: var(--smallest-padding);
    --input-width: calc(var(--input-padding) * 2 + 2px + var(--popup-form-width));
    --field-min-width: calc(var(--input-width) + var(--buttons-width));
}

@media screen and (max-width: 340px) {
    #wrapper {
        border: 0;
    }
}

#info, footer {
    text-align: center;
}

h2 {
    --h2-padding: var(--form-padding);
    font-size: large;
    margin-bottom: var(--h2-padding);
    padding-bottom: var(--h2-padding);
    border-bottom: 1px solid var(--light-pink);
}

.dark h2 {
    border-color: var(--black-pink);
}

kbd {
    font-family: monospace;
    font-size: medium;
}

button, input {
    background-color: var(--lighter-pink);
    border: 1px solid var(--emph);
    border-radius: 4px;
    vertical-align: middle;
}

.dark input, .dark button {
    background-color: var(--dark-medium-pink);
    border-color: var(--light-pink);
}

button {
    padding: var(--small-padding);
    color: var(--darkest-pink);
}

button:hover, input:hover {
    background-color: var(--light-pink);
}

.dark button:hover, .dark input:hover {
    background-color: var(--medium-pink);
}

button:active {
    background-color: var(--medium-pink);
}

.dark button:active {
    background-color: var(--light-medium-pink);
}

#dark-mode {
    padding-top: calc(var(--small-padding) - 1px);
    padding-bottom: calc(var(--small-padding) + 1px);
}

input[type="text"] {
    padding: var(--input-padding);
    padding-top: calc(var(--smallest-padding) - 1px);
}

input[type="text"]:focus {
    outline: 2px solid var(--dark-medium-pink);
}

.dark input[type="text"]:focus {
    outline-color: var(--light-pink);
}

h3, strong, h2 {
    color: var(--emph);
    font-weight: bold;
}

h3 {
    margin-bottom: var(--smallest-padding);
}

kbd {
    word-break: keep-all;
}

#options {
    margin-top: calc((var(--column-gap) - var(--small-padding)) * -1);
}

input[type="checkbox"] {
    margin: 0;
    margin-top: -2px;
    padding: 0;
    vertical-align: middle;
    accent-color: var(--medium-pink);
}

.dark input[type="checkbox"] {
    accent-color: var(--lightest-pink);
}

#buttons {
    display: flex;
    align-items: stretch;
    gap: var(--form-padding);
}

#form {
    --max-column-count: 2;
    display: grid;
    grid-row-gap: var(--small-padding);
    grid-column-gap: var(--column-gap);
    justify-content: center;
    max-width: calc(var(--field-min-width) * var(--max-column-count) 
            + var(--column-gap) * (var(--max-column-count) - 1));
    grid-template-columns: repeat(2, minmax(var(--field-min-width), max-content));
}

@media screen and (max-width: 550px) {
    #form {
        grid-template-columns: 1fr;
    }
}

.field {
    min-width: var(--field-min-width);
}

.field h3 {
    padding-left: var(--small-padding);
}

.input-holder {
    display: inline;
}

.input-holder input, #popup {
    width: var(--popup-form-width);
}

#popup {
    border: 1px solid var(--medium-pink);
    background-color: var(--lightest-pink);
    z-index: 2;
    position: absolute;
    overflow: auto;
    --popup-line-height: 1.4em;
    --option-line-count: 4;
    --option-height: calc(var(--popup-line-height) * var(--option-line-count) + var(--option-row-gap) * 2);
    --option-row-gap: var(--smallest-padding);
    --options-padding-y: var(--option-row-gap);
    --max-option-count: 3;
    line-height: var(--popup-line-height);
    max-height: calc(var(--options-padding-y) * 2 + var(--option-height) * var(--max-option-count));
    margin-top: -1px;
}

.dark #popup {
    background-color: var(--dark-medium-pink);
}

#options {
    width: 100%;
    padding: var(--options-padding-y) 0;
}

.option:hover {
    background-color: var(--medium-pink);
}

.dark .option:hover {
    background-color: var(--lightest-pink);
}

.option:focus, .option:hover {
    color: var(--emph-hover);
}

.dark .option.focus, .dark .option:hover {
    color: var(--black-pink);
}

.option.focus {
    background-color: var(--medium-pink);
}

.dark .option.focus {
    background-color: var(--light-pink);
}

.option:hover {
    cursor: pointer;
}

.option:not(:last-child) {
    border-bottom: 1px solid var(--light-pink);
}

.option {
    display: grid;
    row-gap: var(--option-row-gap);
    padding: var(--small-padding);
}

.option .row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    column-gap: var(--small-padding);
}

.option .name {
    font-weight: bold;
}

.option .abbr, .option .offset {
    text-align: right; 
}

.option .countries, .option .canonical {
    grid-column: 1 / -1;
}

.option .countries {
    color: var(--grey);
}

.dark .option .countries {
    color: var(--light-medium-pink);
}

.dark .option:hover .countries, .dark .option.focus .countries {
    color: var(--dark-medium-pink);
}

.sr-only {
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}

.add-remove {
    display: inline;
}

.add-remove button {
    margin-left: var(--add-remove-left-margin);
    padding: var(--add-remove-padding);
    padding-top: calc(var(--add-remove-padding) - 1px);
    padding-bottom: calc(var(--add-remove-padding) + 1px);
    font-size: calc(1rem - var(--add-remove-padding) * 2);
}

#result {
    font-size: medium;
    --border-radius: 8px;
    margin-top: var(--form-padding);
}

#result th:first-child {
    border-top-left-radius: var(--border-radius);
}

#result th:last-child {
    border-top-right-radius: var(--border-radius);
}

#result tr:last-child td:first-child {
    border-bottom-left-radius: var(--border-radius);
}

#result tr:last-child td:last-child {
    border-bottom-right-radius: var(--border-radius);
}

#result td, #result th {
    padding: var(--form-padding);
}

#result th {
    background-color: var(--th-pink-1);
    text-align: center;
    color: var(--dark-medium-pink);
    font-weight: bold;
}

.dark #result th {
    color: var(--medium-pink);
}

#results tbody tr:nth-child(odd) td {
    background-color: var(--table-pink-1);
}

#results tbody tr:nth-child(even) td {
    background-color: var(--table-pink-2);
}

footer {
    font-style: italic;
    font-size: xx-small;
}

footer p+p {
    margin-top: var(--smallest-padding);
}

footer a {
    font-style: normal;
}

a, a:visited {
    color: var(--emph);
}

a:hover {
    color: var(--emph-hover);
}