:root {
  --sp-base: 1rem;
  --sp-border-radius: var(--sp-base);

  --cp-night100: hsl(229deg 73% 96%);
  --cp-night90: hsl(229deg 73% 86%);
  --cp-night80: hsl(229deg 73% 76%);
  --cp-night70: hsl(229deg 73% 66%);
  --cp-night60: hsl(229deg 73% 56%);
  --cp-night50: hsl(229deg 73% 46%);
  --cp-night40: hsl(229deg 73% 36%);
  --cp-night30: hsl(229deg 73% 26%);
  --cp-night20: hsl(229deg 73% 16%);
  --cp-night10: hsl(229deg 73% 06%);

  --cp-day100: hsl(229deg 25% 96%);
  --cp-day90: hsl(229deg 25% 86%);
  --cp-day80: hsl(229deg 25% 76%);
  --cp-day70: hsl(229deg 25% 66%);
  --cp-day60: hsl(229deg 25% 56%);
  --cp-day50: hsl(229deg 25% 46%);
  --cp-day40: hsl(229deg 25% 36%);
  --cp-day30: hsl(229deg 25% 26%);
  --cp-day20: hsl(229deg 25% 16%);
  --cp-day10: hsl(229deg 25% 10%);

  --cp-sunny50: golden;
  --cp-wine30: purple;
  --cp-absinth30: limegreen;

  --color-surface-1: var(--cp-day100);
  --color-surface-2: var(--cp-day90);
  --color-surface-3: var(--cp-day80);
  --color-surface-4: var(--cp-day70);
  --color-surface-5: var(--cp-day60);

  --color-text-1: var(--cp-day20);
  --color-text-2: var(--cp-day30);
  --color-text-3: var(--cp-sunny50, golden);
  --color-text-4: var(--cp-wine30, purple);
  --color-text-5: var(--cp-absinth30, green);

  --color-text-success: hsl(130deg 50% 55%);
  --color-text-warning: hsl(39deg 70% 56%);
  --color-text-danger: hsl(332deg 70% 64%);

  --color-accent: hsl(162deg 50% 30%);
  --color-accent-2: hsl(191deg 37% 43%);
  --color-accent-3: hsl(306deg 60% 61%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-surface-1: var(--cp-day20);
    --color-surface-2: var(--cp-day10);
    --color-surface-3: var(--cp-day30);
    --color-surface-4: var(--cp-day40);
    --color-surface-5: var(--cp-day50);

    --color-text-1: var(--cp-day100);
    --color-text-2: var(--cp-day70);
    --color-text-3: var(--cp-sunny50, golden);
    --color-text-4: var(--cp-wine30, purple);
    --color-text-5: var(--cp-absinth30, green);

    --color-text-success: hsl(120deg 100% 75%);
    --color-text-warning: hsl(39deg 100% 66%);
    --color-text-danger: hsl(332deg 100% 74%);

    --color-accent: hsl(162deg 91% 49%);
    --color-accent-2: hsl(191deg 67% 53%);
    --color-accent-3: hsl(306deg 100% 71%);
  }
}
:root {
  --outline-base: 2px solid var(--color-accent);
  --form-elem-rounded: calc(var(--sp-base) / 2);
  --brand-gradient: linear-gradient(
    30deg,
    var(--color-accent),
    var(--color-accent-2),
    var(--color-accent-3)
  );
}
html {
  font-size: 16px;
  line-height: 1.5;
  scroll-behavior: smooth;
  height: 100%;
}

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  background: var(--color-surface-1);
  color: var(--color-text-1);

  accent-color: var(--color-accent);
  min-height: 100%;
}

a {
  color: var(--color-accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
  color: var(--color-accent);
}

* {
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400;
  background-image: var(--brand-gradient);
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
}

:focus {
  outline: var(--outline-base);
  z-index: 1;
}
button {
  --_padding: calc(var(--sp-base) / 4);
  all: unset;
  cursor: pointer;
  padding: var(--_padding) calc(var(--_padding) * 2);
  border-radius: var(--_padding);
  background: var(--color-surface-2);
}
main {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  min-height: 100%;
  padding-bottom: 5rem;
}
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-surface-2);
  color: var(--color-text-2);
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 0.5rem;
  padding: 0.5em;
}
footer button {
  background: var(--color-surface-3);
  color: var(--color-accent);
}
.note-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0;
}
.note-item {
  display: flex;
  align-items: end;
}
.note-item:not(:first-of-type) label {
  display: none;
}
.note-item form {
  display: flex;
  gap: 1px;
}
.note-item button {
  background: var(--color-surface-3);
  color: var(--color-accent);
  height: 1.5rem;
  width: 1.5rem;
  display: grid;
  align-items: center;
  justify-content: center;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.form-control {
  display: flex;
  flex-direction: column;
}
.form-control select,
.form-control input {
  border: none;
  background: var(--color-surface-2);
  color: var(--color-text-1);
  font-size: 1rem;
  padding: 0.5rem;
  min-width: 0;
  height: 2rem;
}
.form-control input {
  width: calc(5ch + 1rem);
}
.form-control:first-of-type input {
  --_radius: calc(var(--sp-base) / 4);
  border-top-left-radius: var(--_radius);
  border-bottom-left-radius: var(--_radius);
}

.form-control.standalone input {
  --_radius: calc(var(--sp-base) / 4);
  border-radius: var(--_radius);
}

.form-control input:invalid {
  outline: 2px solid var(--color-text-danger);
  z-index: 1;
}
.form-control input:focus {
  z-index: 1;
}
.form-control label {
  font-size: 0.5rem;
  color: var(--color-text-2);
}
.app header {
  display: flex;
  justify-content: center;
  background: linear-gradient(180deg, var(--color-surface-2), transparent);
}
.app main {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.table-container {
  max-width: 100vw;
  overflow: auto;
}
.scale-table {
  font-size: 1rem;
  table-layout: fixed;
  border-collapse: collapse;
  max-width: 100vw;
  border: 0px solid var(--color-surface-3);
  color: var(--color-text-1);
}
.scale-table col:hover {
  color: var(--color-text-1);

  background: var(--color-accent);
}
.scale-table th,
.scale-table td {
  text-align: end;
  padding: 0.25rem;
}

.scale-table th {
  color: var(--color-accent);
  background: var(--color-surface-2);
  position: sticky;
  left: 0;
}
.scale-table td {
  width: 3ch;
}
.scale-table tr {
  background: var(--color-surface-4);
}
.scale-table tr:first-of-type {
  background: var(--color-surface-3);
  color: var(--color-text-1);
}

.scale-table caption {
  display: block;
  font-size: 0.75rem;
  text-align: start;
  position: sticky;
  left: 0;
}
.sr-only {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
}
.total {
  color: var(--color-text-1);
}
.total strong {
  color: var(--color-accent);
  font-weight: bold;
}
.total small {
  font-size: 0.75rem;
  color: var(--color-text-2);
  font-weight: normal;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}