:root {
  --color-primary: oklch(0.7509 0.2372 145); /* #00d23a */
  --color-neutral: oklch(0.7509 0 145);
  --color-neutral-darker: oklch(0.2558 0 145);
  --color-black: oklch(0 0 145);

  --time-height: 40dvh;
  --controls-height: 3rem;
  --controls-padding-bottom: calc(1rem + env(safe-area-inset-bottom));

  accent-color: var(--color-primary);
}

body, html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  /*overscroll-behavior-y: contain;*/
  overflow: hidden;

  background: var(--color-neutral-darker);
  color: white;
  font-family: system-ui;
  margin: 0;
  padding: 0;
}

button {
  touch-action: manipulation;

  &:disabled {
    pointer-events: none;
    touch-action: manipulation;
  }
}

#app {
  margin-inline: auto;
  padding: 0;
}

.time {
  font-family: 'Andale Mono', 'Courier New', Courier, monospace;
  letter-spacing: -.10em;
}

#app:has(#start:disabled) {
  #time-wrapper {
    color: var(--color-primary);
  }
}
#time-wrapper {
  background: oklch(from var(--color-black) l c h / .85);
  color: white;
  height: var(--time-height);
  padding-block: env(safe-area-inset-top) 0;
  align-content: center;

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}
#time {
  align-content: center;
  font-size: 5rem;
  line-height: 1;
  text-align: center;
  user-select: none;
}

#controls-wrapper {
  text-align: center;
  padding-block: 0 var(--controls-padding-bottom);

  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 11;
}
#controls {
  background: white;
  display: inline-flex;
  border-radius: 50px;
  align-content: center;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .5rem;
  height: var(--controls-height);

  button {
    background-color: var(--color-primary);
    color: black;
    appearance: none;
    border: 0;
    border-radius: 50%;
    line-height: 1;
    padding: .75rem;

    &:active {
      background-color: var(--color-primary);
    }

    &:disabled {
      background-color: transparent;
      color: var(--color-neutral);
    }

    svg {
      width: 24px;
      height: 24px;
    }
  }

  #start,
  #pause {
    svg {
      width: 48px;
      height: 48px;
    }
  }

  #start {
    background: var(--color-primary);
    color: black;
  }
  #pause {
    color: var(--color-primary);
    color: white;
  }
}

#history-wrapper {
  overscroll-behavior-y: contain;
  overflow-y: scroll;

  box-sizing: border-box;
  height: 100dvh;
  @media (display-mode: standalone) {
    height: 100vh;
  }

  #history-wrapper-block-start {
    height: calc(.5rem + var(--time-height) + env(safe-area-inset-top));
  }
  #history-wrapper-block-end {
    height: calc(.5rem + 1rem + var(--controls-height) + var(--controls-padding-bottom));
  }
}
#history-filters {
  button {
    padding-inline: 1rem;
    padding-block: .5rem;
  }
}

#history {
  --separator: var(--color-neutral-darker);
  background: oklch(from var(--color-black) l c h / .85);
  border-radius: 10px;
  color: white;
  list-style: none;
  margin-inline: .5rem;
  padding: 0;

  .history-item {
    border-top: 1px solid var(--separator);
  }
  .history-item:first-child {
    border-radius: 10px 10px 0 0;
    border-top: 0;

    &[hidden] ~ .history-item:nth-child(2) {
      border-radius: 10px 10px 0 0;
      border-top: 0;
    }
  }
  .history-item:last-child {
    border-radius: 0 0 10px 10px;
  }
}

.history-item {
  align-items: center;
  justify-content: space-between;
  font-size: 1rem;
  padding-block: .75rem;
  padding-inline: 1rem;

  &:not([hidden]) {
    display: flex;
  }

  --color: #fff;
  color: var(--color);

  .icon {
    color: var(--color);
    border-radius: 50%;
    padding: .33rem;
    border: 1px solid var(--color);

    svg {
      display: block;
      width: 1rem;
      height: 1rem;
    }
  }

  &.type-pause,
  &.type-point {
    --color: oklch(from var(--color-neutral) l c h / .75);
  }
}

body[data-debug-layout] {
  background: silver;

  #time-wrapper {
    background: rgba(255,100,000, .33);
  }
  #time {
    background: rgba(000,100,255, .33);
  }
  #controls-wrapper {
    background: rgba(255,000,100, .33);
  }
  #history-wrapper {
    background: rgba(255,255,000, .33);
    border: 1px solid springgreen;
    @media (display-mode: standalone) {
      background: rgba(255,255,000, .53);
    }
  }
  #history {
    background:  rgba(000,000,000, .33);
  }
}




.history-item {
  view-transition-class: history-item;
}
::view-transition-group(*.history-item) {
  animation-timing-function: ease-in-out;
  animation-duration: 0.5s;
  z-index: 1;
}
::view-transition-new(targeted-item) {
  background-color: lightgoldenrodyellow;
}
::view-transition-old(targeted-item) {
  background-color:  palegreen;
}