* { margin: 0; padding: 0; }

button { background: none; border: none; }
input, textarea, select, button { border: none; font: inherit; letter-spacing: inherit; }
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { display: none; }

:root {
  --color-button-rgb: 55 54 80;
  --color-cooldown: rgb(50 205 50 / 0.3);
  --color-darkred: darkred;
  --color-disabled-button: lightgray;
  --color-done: rgb(30 144 255 / 0.3);
  --color-due: #F9F9F9;
  --color-gray1: #BFBFBF;
  --color-light-gray: #666666;
  --color-lighter-gray: #F9F9F9;
  --color-overdue: rgb(255 0 0 / 0.2);
  --color-pink: pink;
  --color-red: #FF383C;
  --color-white: #F9F9F9;
  --color-yellow: #C9A84A;
  --font-size-lg: 1.2rem;
  --font-size-sm: 0.8rem;
  --font-size-xs: 0.6rem;
  --rem-lg: 1rem;
  --rem-md: 0.5rem;
  --rem-sm: 0.25rem;
  --rem-xl: 2rem;
  --rem-xs: 0.1rem;
}

/* Work around Elm's inability to put classes directly on the body */
body:has(> .noscroll) {
  overflow: hidden;
}

#available-tag-filters:popover-open {
  top: calc(anchor(bottom) + var(--rem-sm));
  right: anchor(right);
}

.small-number-field { width: 5ch; }
@supports (field-sizing: content) {
  .small-number-field { field-sizing: content; min-width: 5ch; width: auto; }
}

.align-items-center { align-items: center; }
.align-items-flex-end { align-items: flex-end; }
.align-self-center { align-self: center; }
.align-self-flex-start { align-self: flex-start; }
.appearance-none { appearance: none; }
.background-button { background: rgb(var(--color-button-rgb)); }
.background-cooldown { background: var(--color-cooldown); }
.background-disabled-button { background: var(--color-disabled-button); }
.background-done { background: var(--color-done); }
.background-due { background: var(--color-due); }
.background-lighter-gray { background: var(--color-lighter-gray); }
.background-lightgray { background: lightgray; }
.background-overdue { background: var(--color-overdue); }
.background-red { background: var(--color-red); }
.border-1px-solid-black { border: 1px solid black; }
.border-1px-solid-gray1 { border: 1px solid var(--color-gray1); }
.border-1px-solid-red { border: 1px solid var(--color-red); }
.border-1px-solid-transparent { border: 1px solid transparent; }
.border-bottom-1px-solid-light-gray { border-bottom: 1px solid var(--color-light-gray); }
.border-bottom-2px-solid-black { border-bottom: 2px solid black; }
.border-left-2px-solid-cooldown { border-left: 2px solid var(--color-cooldown); }
.border-left-2px-solid-done { border-left: 2px solid var(--color-done); }
.border-left-2px-solid-overdue { border-left: 2px solid var(--color-overdue); }
.border-left-2px-solid-transparent { border-left: 2px solid transparent; }
.border-left-none { border-left: none; }
.border-none { border: none; }
.border-radius-0px-4px-4px-0px { border-radius: 0px 4px 4px 0px; }
.border-radius-4px { border-radius: 4px; }
.border-radius-4px-0px-0px-4px { border-radius: 4px 0px 0px 4px; }
.bottom-100pct { bottom: 100%; }
.box-sizing-border-box { box-sizing: border-box; }
.color-black { color: black; }
.color-darkred { color: darkred; }
.color-gray1 { color: var(--color-gray1); }
.color-light-gray { color: var(--color-light-gray); }
.color-overdue { color: var(--color-overdue); }
.color-pink { color: var(--color-pink); }
.color-red { color: var(--color-red); }
.color-white { color: var(--color-white); }
.color-yellow { color: var(--color-yellow); }
.cursor-default { cursor: default; }
.cursor-pointer { cursor: pointer; }
.display-flex { display: flex; }
.error-if-empty:empty::before { color: red; content: "empty"; font-style: italic; }
.field-sizing-content { field-sizing: content; }
.flex-basis-0 { flex-basis: 0; }
.flex-direction-column { flex-direction: column; }
.flex-grow-1 { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-wrap-wrap { flex-wrap: wrap; }
.font-size-lg { font-size: var(--font-size-lg); }
.font-size-sm { font-size: var(--font-size-sm); }
.font-size-xs { font-size: var(--font-size-xs); }
.font-style-italic { font-style: italic; }
.font-weight-600 { font-weight: 600; }
.gap-lg { gap: var(--rem-lg); }
.gap-md { gap: var(--rem-md); }
.gap-sm { gap: var(--rem-sm); }
.height-1p1rem { height: 1.1rem; }
.height-1rem { height: 1rem; }
.height-2rem { height: 2rem; }
.inset-auto { inset: auto; }
.justify-content-center { justify-content: center; }
.line-height-1 { line-height: 1; }
.margin-0-auto { margin: 0 auto; }
.margin-left-auto { margin-left: auto; }
.margin-left-sm { margin-left: var(--rem-sm); }
.margin-top-auto { margin-top: auto; }
.margin-xl { margin: var(--rem-xl); }
.max-width-50ch { max-width: 50ch; }
.min-height-100vh { min-height: 100vh; }
.min-width-0 { min-width: 0; }
.min-width-1ch { min-width: 1ch; }
.min-width-max-content { min-width: max-content; }
.padding-lg { padding: var(--rem-lg); }
.padding-md { padding: var(--rem-md); }
.padding-sm { padding: var(--rem-sm); }
.padding-xs { padding: var(--rem-xs); }
.position-absolute { position: absolute; }
.position-relative { position: relative; }
.processing { animation: pulse 1.2s ease-in-out infinite; }
.resize-none { resize: none; }
.right-100pct { right: 100%; }
.text-align-center { text-align: center; }
.text-decoration-none { text-decoration: none; }
.top-100pct { top: 100%; }
.top-n0p1rem { top: -0.1rem; }
.user-select-none { user-select: none; }
.visibility-hidden { visibility: hidden; }
.white-space-nowrap { white-space: nowrap; }
.width-1p1rem { width: 1.1rem; }
.width-1rem { width: 1rem; }

.font-roboto, body {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.chore-static-due {
  background: #f9f9f9;
  flex-shrink: 0;
  /* border-bottom: 2px solid transparent; */
  padding: 0.25rem 0.5rem;
}

.chore-list-empty {
  align-self: center;
  line-height: 1.2;
  padding: 0.8rem 1rem;
}

.chore-list-item {
  display: flex;
  gap: var(--rem-sm);
  overflow: hidden;

  &.fading {
    animation: chore-list-item-fade-out 180ms cubic-bezier(.4, 0, 1, 1) forwards;
  }
}

.chore-list-item-details {
  background: var(--color-due);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: var(--rem-sm);
  justify-content: center;
  line-height: 1.2;
  padding: 0.8rem 1rem;
}

.every-button {
  align-items: center;
  border: 1px solid var(--color-gray1);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  padding: var(--rem-xs);

  &.selected {
    background: rgb(var(--color-button-rgb));
    border: 1px solid rgb(var(--color-button-rgb));
    color: white;
  }
}

.form-line {
  line-height: 1.4rem;
}

.icon-event {
  height: 1.4rem;
  padding: 0.25rem 0;
  width: 1.4rem;
}

.input-chore-date-picker {
  border: none;
  cursor: pointer;
  height: 100%;
  opacity: 0;
  position: absolute;
  width: 100%;
}

.input-chore-description {
  border-radius: 8px;
  padding: 0.25rem;

  &:focus {
    outline: none;
    box-shadow: 0 0 10px 0 rgb(var(--color-button-rgb));
  }
}

.input-chore-number {
  background: #f9f9f9;
  box-shadow: inset 0 -2px var(--color-gray1);
  box-sizing: border-box;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  text-align: center;
}

.input-chore-schedule-tabs {
  background: #f9f9f9;
  display: flex;

  & > * {
    cursor: pointer;
    flex-basis: 0;
    flex-grow: 1;
    padding: var(--rem-sm);
    text-align: center;
  }

  & > .selected {
    background: rgb(var(--color-button-rgb));
    color: white;
  }
}

.input-chore-schedules {
  display: grid;

  & > * {
    grid-area: 1 / 1;
  }
  visibility: hidden;

  & > .selected {
    visibility: visible;
  }
}

.input-chore-tags {
  border-radius: 8px;
  padding: 0.25rem;

  &:focus {
    outline: none;
    box-shadow: 0 0 10px 0 rgb(var(--color-button-rgb));
  }
}

.input-chore-text {
  background: #f9f9f9;
  box-shadow: inset 0 -2px var(--color-gray1);
  field-sizing: content;
  padding: 0.25rem 0.5rem;
  resize: none;
}

.input-chore-textarea {
  border: 1px solid var(--color-gray1);
  border-radius: 8px;
  field-sizing: content;
  padding: 0.8rem 1rem;
  resize: none;
}

.modal {
  animation: modal-fade-in 140ms cubic-bezier(0.25, 0.1, 0, 1) forwards;
  background: white;
  display: flex;
  flex-direction: column;
  gap: var(--rem-lg);
  margin-bottom: 4rem;
  padding: var(--rem-lg);
  will-change: opacity, transform;
  z-index: 1001;
}

.modal-backdrop {
  animation: modal-backdrop-fade-in 60ms linear forwards;
  backdrop-filter: blur(4px);
  background-color: rgb(0 0 0 / 0.4);
  inset: 0;
  position: fixed;
  z-index: 1000;
}

.modal-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin: 0 auto;
  min-height: 100vh;
  max-width: 50ch;
}

.month-button {
  align-items: center;
  border: 1px solid var(--color-gray1);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  padding: var(--rem-xs);
  width: 4ch;

  &.selected {
    background: rgb(var(--color-button-rgb));
    border: 1px solid rgb(var(--color-button-rgb));
    color: white;
  }
}

.monthday-button {
  align-items: center;
  border: 1px solid var(--color-gray1);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  padding: var(--rem-xs);
  width: 3ch;

  &.selected {
    background: rgb(var(--color-button-rgb));
    border: 1px solid rgb(var(--color-button-rgb));
    color: white;
  }
}

.ordinal-week {
  align-items: center;
  border: 1px solid transparent;
  display: flex;
  font-size: var(--font-size-sm);
  justify-content: center;
  padding: var(--rem-xs);
}

.slide-right {
  opacity: 0;
  transform: translateX(-24px);
  animation: slide-right 140ms ease-out forwards;
}

.toggles-row {
  align-items: center;
  display: flex;
  gap: var(--rem-sm);
}

.weekday-button {
  align-items: center;
  border: 1px solid var(--color-gray1);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  padding: var(--rem-sm);
  width: 3ch;

  &.selected {
    background: rgb(var(--color-button-rgb));
    border: 1px solid rgb(var(--color-button-rgb));
    color: white;
  }
}

.weeknum-button {
  align-items: center;
  border: 1px solid var(--color-gray1);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  padding: var(--rem-sm);
  width: 4ch;

  &.selected {
    background: rgb(var(--color-button-rgb));
    border: 1px solid rgb(var(--color-button-rgb));
    color: white;
  }
}

.display-none { display: none; }

@keyframes chore-list-item-fade-out {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-96px);
  }
}

@keyframes modal-backdrop-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes modal-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  50% { transform: scale(0.98); opacity: 0.6; }
}

@keyframes slide-right {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}