html {
  display: flex;
  justify-content: center;
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  src:
    local("Atkinson Hyperlegible"),
    url('fonts/Atkinson-Hyperlegible-Regular-102.otf') format('opentype');
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src:
    local("Atkinson Hyperlegible Bold"),
    url('fonts/Atkinson-Hyperlegible-Bold-102.otf') format('opentype');
  font-weight: 700;
}

:root {
  --titanium: 255 255 255;
  --white: 255 249 242;
  --white-cherry-5: color-mix(in srgb, rgb(var(--white)), rgb(var(--cherry)) 5%);
  --white-cherry-10: color-mix(in srgb, rgb(var(--white)), rgb(var(--cherry)) 10%);
  --white-cherry-20: color-mix(in srgb, rgb(var(--white)), rgb(var(--cherry)) 20%);
  --white-cherry-30: color-mix(in srgb, rgb(var(--white)), rgb(var(--cherry)) 30%);
  --white-cherry-40: color-mix(in srgb, rgb(var(--white)), rgb(var(--cherry)) 40%);
  --white-cherry-60: color-mix(in srgb, rgb(var(--white)), rgb(var(--cherry)) 60%);
  --white-cherry-80: color-mix(in srgb, rgb(var(--white)), rgb(var(--cherry)) 80%);
  --white-cherry-90: color-mix(in srgb, rgb(var(--white)), rgb(var(--cherry)) 90%);
  --white-mango-10: color-mix(in srgb, rgb(var(--white)), rgb(var(--mango)) 10%);
  --white-mango-50: color-mix(in srgb, rgb(var(--white)), rgb(var(--mango)) 50%);
  --cherry: 131 37 79;
  --notBlack: 40 25 25;
  --notBlack-cherry-50: color-mix(in srgb, rgb(var(--notBlack)), rgb(var(--cherry)) 50%);
  --mango: 255 171 92;
  --mango-cherry-10: color-mix(in srgb, rgb(var(--mango)), rgb(var(--cherry)) 10%);
  --mango-cherry-30: color-mix(in srgb, rgb(var(--mango)), rgb(var(--cherry)) 30%);
  --blueberry: 37 99 235;
  --border-radius-sm: 3px;
  --border-thickness-sm: 2px;
  --border-thickness-lg: 3px;
}

* {
  transition: 0.3s;
  scrollbar-width: none;
}
body {
  flex: 1;
  min-width: 360px;
  min-height: fit-content;
  max-width: 720px;
  margin: 0;
  padding: 0;
  background: rgb(var(--cherry));
}
p, h1, h2, h3, span, a, ul, li, figure, section, button, textarea, input { 
  font-family: "Atkinson Hyperlegible", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  line-height: 1.5;
  margin: 0;
  padding: 0;
  color: rgb(var(--notBlack));
}
h2 { font-size: 20px; }
h3 { font-size: 18px; }

#icons-container {
  width: 0;
  height: 0;
  overflow: hidden;
}

#ui-menu {
  position: relative;
  background: rgb(var(--cherry));
  border-radius: var(--border-radius-sm);
}

#ui-tabs {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: stretch;
  background: rgb(var(--cherry));
  border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
}
#ui-menu button { cursor: pointer; }
.ui-tab {
  flex-grow: 1;
  height: 40px;
  font-size: 20px;
  font-weight: bold;
  color: var(--white-cherry-30);
  background: var(--notBlack-cherry-50);
  border: none;

  &:first-of-type { border-radius: var(--border-radius-sm) 0 0 0; }
  &:last-of-type { border-radius: 0 var(--border-radius-sm) 0 0; }
  &[active="true"] {
    color: rgb(var(--white));
    background: rgb(var(--cherry));
  }
  &:hover {
    flex-grow: 1.1;
    color: rgb(var(--white));
    background: var(--white-cherry-90);
  }
}

.ui-section {
  position: absolute;
  top: 48px;
  left: 8px;
  display: none;
  overflow: clip;
  width: calc(100% - 16px);
  background: rgb(var(--white));
  border-radius: var(--border-radius-sm);
}
.ui-section[active="true"] { display: block; }

#ui-featureTabs {
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  background-color: var(--white-cherry-20);
  border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
}
.ui-row {
  order: 1;
  display: flex;
  flex-flow: row wrap;
  justify-content: stretch;
}
.ui-row:has(button[active="true"]) { order: 2 }
.ui-featureTab {
  font-size: 15px;
  flex-grow: 1;
  background-color: var(--white-cherry-20);
  border: none;
  border-radius: var(--border-radius-sm);
  text-decoration: underline var(--white-cherry-10) 2px;
  text-underline-position: under;
  padding-bottom: 4px;

  &[active="true"] {
    background-color: rgb(var(--white));
    cursor: default !important;
    border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
    text-decoration-color: rgb(var(--mango));
  }
  &:not([active="true"]):hover {
    flex-grow: 1.25;
    background-color: var(--white-cherry-30);
  }
  &[target="all"] {
    padding-bottom: 2px;
  }
}

#ui-featureSearch {
  border: none;
  border-bottom: var(--border-thickness-sm) solid var(--white-cherry-10);
  outline: none;
  font-size: 15px;
  background-color: transparent;

  &:not([active="true"] > input) {
    padding: 0;
    width: 48px;
    text-align: center;
    border-bottom: var(--border-thickness-sm) solid var(--white-cherry-10);
    cursor: pointer;

    &::placeholder { opacity: 1; }
  }
  &:is([active="true"] > input) {
    border-bottom-color: rgb(var(--mango));
    
  }
}

div.ui-featureCategory { display: none; }
div.ui-featureCategory[active="true"] { display: block; }
ul.ui-featureCategory {
  margin: 8px 0;
  padding: 0;
}

#ui-featureContainer {
  height: calc(100vh - 96px);
  padding: 0 8px 8px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--white-cherry-40) var(--white-cherry-20);
}
#ui-featureContainer > li {
  list-style-type: none;
  position: relative;
  padding: 8px;
  background: var(--white-cherry-10);
  border: var(--border-thickness-sm) solid var(--white-cherry-60);
  border-radius: var(--border-radius-sm);

  &:not(:last-of-type) { margin-bottom: 4px; }
  &:has(input:checked:not([dummy], .ui-options input)),
  &:has(input[active="true"]) {
    background: var(--white-mango-10);
    border: var(--border-thickness-sm) solid rgb(var(--mango));
  }

  &[data-new="true"] {
    background: rgb(var(--blueberry) / .16) !important;
    border: var(--border-thickness-sm) solid rgb(var(--blueberry) / .8) !important;
  }
}

.ui-primaryContent {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;

  h2 {
    text-align: left;
    flex-basis: 216px;
  }
}
.ui-secondaryContent {
  display: none;

  &[active="true"] {
    display: block;
    margin-top: 8px; 
  }
  > p {
    margin-bottom: 8px;
    background: rgb(var(--titanium));
    padding: 8px;
    border-bottom: var(--border-thickness-sm) solid var(--white-cherry-20);
    border-radius: var(--border-radius-sm);
  }
}
.ui-featureTitle {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  border: none;
  background: transparent;
  width: 100%;
}
.ui-caretWrapper {
  height: calc(100% - 6px);
  padding-top: 6px;
}

.ui-toggleWrapper { margin-left: 8px; }
.ui-toggle {
  position: absolute;
  width: 0;
  height: 0;
  visibility: hidden;
  margin: 0;
}

.ui-options {
  display: flex;
  flex-flow: column nowrap;

  h2 {
    border-bottom: var(--border-thickness-sm) solid var(--white-mango-50);
    margin-bottom: 8px;
  }
}

input.ui-toggle + label {
  position: relative;
  display: block;
  cursor: pointer;
  text-indent: -9999px;
  width: 48px;
  height: 36px;
  background-color: var(--white-cherry-30);
  border-radius: var(--border-radius-sm);

  &:before {
    z-index: 3;
    content: "";
    position: absolute;
    width: 12px;
    height: 32px;
    background: rgb(var(--white));
    top: 2px;
    left: 2px;
    border-radius: var(--border-radius-sm);
    transition: .3s;
  }
  &:after {
    z-index: 2;
    content: "◯";
    text-indent: 0;
    color: rgb(var(--notBlack) / .2);
    font-size: 16px;
    font-weight: bold;
    line-height: 18px;
    position: absolute;
    width: 18px;
    height: 18px;
    top: 9.5px;
    right: 6px;
    border-radius: var(--border-radius-sm);
    transition: .3s;
  }

  &:active {
    background: var(--white-cherry-30);

    &:before { width: 16px; }
    &:after { right: 4px; }
  }
}
input.ui-toggle:checked + label {
  background: rgb(var(--mango));
  transform: rotate(90deg);
  margin-right: -4px;
  width: 40px;

  &:before {
    left: calc(100% - 2px);
    transform: translateX(-100%);
    top: 2px;
  }
  &:after {
    content: "—";
    right: calc(100% - 4px);
    transform: translateX(100%);
    top: 7px;
  }

  &:active:after { right: calc(100% - 2px); }
}

.ui-inputWrapper {
  position: relative;
  background: rgb(var(--titanium));
  padding: 4px 8px;
  border-bottom: var(--border-thickness-sm) solid var(--white-cherry-20);
  border-radius: var(--border-radius-sm);

  &:not(:last-of-type) { margin-bottom: 8px; }

  label {
    display: block;
    text-align: left;
    width: 100%;
    font-weight: bold;
    font-size: 16px;
  }
}

.ui-checkboxWrapper {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;

  label { max-width: calc(100% - 44px); }
}
.ui-checkbox {
  appearance: none;
  margin: 0;
  padding: 0;
  print-color-adjust: exact;
  display: inline-block;
  vertical-align: middle;
  background-origin: border-box;
  user-select: none;
  border: var(--border-thickness-sm) solid rgb(var(--cherry));
  border-radius: 8px;
  color: rgb(var(--cherry));
  height: 24px;
  width: 24px;

  &:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox=%270 0 16 16%27 fill=%27white%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3cpath d=%27M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z%27/%3e%3c/svg%3e");
    background-size: 100% 100%;
    background-color: currentColor;
    background-position: center;
    background-repeat: no-repeat;
  }
}

.ui-numInputWrapper { text-align: right; }
.ui-numInput {
  border: var(--border-thickness-sm) solid transparent;
  border-radius: var(--border-radius-sm);
  outline: none;
  padding: 4px;
  margin-top: 4px;
  background: var(--white-cherry-5);

  &:focus {
    border-color: rgb(var(--blueberry));
    background: rgb(var(--titanium));
  }
}

select {
  appearance: none;
  border: var(--border-thickness-sm) solid var(--white-cherry-60);
  border-radius: var(--border-radius-sm);
  padding: 8px 36px 8px 12px;
  font-size: 18px;
  font-family: inherit;
  line-height: 1.5;
  background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27none%27 viewBox=%270 0 20 20%27%3e%3cpath stroke=%27%23827F7C%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%271.5%27 d=%27M6 8l4 4 4-4%27/%3e%3c/svg%3e");
  background-position: right 8px center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  background-color: rgb(var(--white));
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  width: 100%;

  &:focus {
    background-color: rgb(var(--titanium));
    border-color: rgb(var(--blueberry));
  }
}

.ui-textInput {
  resize: none;
  width: 100%;
  border: var(--border-thickness-sm) solid var(--white-cherry-80);
  border-radius: var(--border-radius-sm);
  outline: none;
  padding: 4px;
  font-size: 14px;
  box-sizing: border-box;
  background: var(--white-cherry-5);

  &::placeholder { &::placeholder { opacity: .65; } }
  &textarea { height: 96px; }
  &:focus {
    border-color: rgb(var(--blueberry));
    background: rgb(var(--titanium));
  }
}

.ui-tooltipAnchor {
  position: absolute;
  top: 0;
  width: 100%;
}
.ui-tooltip {
  pointer-events: none;
  position: absolute;
  opacity: 0;
  bottom: 8px;
  left: -8px;
  padding: 8px;
  background-color: rgb(var(--white));
  border: var(--border-thickness-sm) solid rgb(var(--mango));
  border-radius: var(--border-radius-sm);
  z-index: 100;

  &:after {
    content: '';
    left: calc(50% - 16px);
    bottom: -17px;
    position: absolute;
    border: 16px solid rgb(var(--mango));
    border-top-color: transparent;
    border-left-color: transparent;
    border-radius: var(--border-radius-sm);
    transform: rotate(45deg);
    z-index: 99;
  }
}
select + .ui-tooltip { bottom: 48px; }
:hover > .ui-tooltipAnchor .ui-tooltip { opacity: 1; }

.ui-card {
  background-color: rgb(var(--white));
  padding: 8px;
  border-radius: var(--border-radius-sm);

  > li {
    list-style-type: none;
    position: relative;
    padding: 8px;
    background: var(--white-cherry-10);
    border: var(--border-thickness-sm) solid var(--white-cherry-60);
    border-radius: var(--border-radius-sm);
    margin-bottom: 4px;
  }
}

#version {
  font-weight: bold;
  color: rgb(var(--cherry));
  text-align: center;
}

.ui-preferenceIo {
  display: flex;
  flex-flow: row wrap;
  gap: 8px;
  justify-content: space-between;

  button {
    flex: 1;
    font-size: 20px;
    text-align: center;
    border: var(--border-thickness-lg) solid var(--mango-cherry-30);
    border-radius: var(--border-radius-sm);
    text-decoration: none;
    position: relative;
    background-color: rgb(var(--mango));
  
    &:hover { background-color: var(--mango-cherry-10); }
  }
}
#ui-preferenceText {
  font-family: 'Courier New', Courier, monospace;
  font-weight: bold;
  height: calc(100vh - 265px);
}

.ui-aboutLink {
  display: flex;
  font-size: 24px;
  text-align: center;
  justify-content: center;
  align-items: center;
  background-color: var(--white-cherry-10);
  border: var(--border-thickness-sm) solid var(--white-cherry-60);
  border-radius: var(--border-radius-sm);
  text-decoration: none;
  
  &:not(:last-of-type) { margin-bottom: 4px; }
  &:hover { background-color: var(--white-cherry-20); }
}