@charset 'utf-8';

/**
 * TodoApp styles for BarefootJS integration demos.
 *
 * Inspired by TodoMVC but rewritten on top of the shared design tokens in
 * tokens.css so the demo sits naturally inside the dark-mode integration
 * site instead of flashing to a white background mid-navigation.
 *
 * Scoped under `.todoapp` (and `body:has(.todoapp)`) so non-todo pages keep
 * the default layout untouched.
 */

body:has(.todoapp) {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.4em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
}

body:has(.todoapp) > :not(.bf-header):not(script) {
  max-width: 550px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.todoapp button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 100%;
  vertical-align: baseline;
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}

.hidden {
  display: none;
}

.todoapp {
  position: relative;
  margin: 110px 0 var(--space-10) 0;
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.todoapp input::placeholder {
  font-style: italic;
  font-weight: 400;
  color: var(--muted-foreground);
  opacity: 0.7;
}

.todoapp h1 {
  position: absolute;
  top: -100px;
  width: 100%;
  margin: 0;
  font-size: 72px;
  font-weight: 200;
  line-height: 1;
  letter-spacing: var(--tracking-tighter);
  text-align: center;
  color: var(--foreground);
  opacity: 0.9;
  text-rendering: optimizeLegibility;
}

.new-todo,
.edit {
  position: relative;
  margin: 0;
  width: 100%;
  font-size: 20px;
  font-family: inherit;
  font-weight: inherit;
  line-height: 1.4em;
  color: var(--foreground);
  padding: var(--space-3);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.edit:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--ring) 35%, transparent);
}

.new-todo {
  padding: var(--space-4) var(--space-4) var(--space-4) 60px;
  height: 60px;
  border: none;
  border-radius: 0;
  background: color-mix(in oklch, var(--card) 92%, var(--foreground));
  border-bottom: 1px solid var(--border);
}

.new-todo:focus {
  outline: none;
  box-shadow: none;
}

.main {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--border);
}

.toggle-all {
  width: 1px;
  height: 1px;
  border: none;
  opacity: 0;
  position: absolute;
  right: 100%;
  bottom: 100%;
}

.toggle-all + label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 60px;
  font-size: 0;
  position: absolute;
  top: -60px;
  left: 0;
}

.toggle-all + label:before {
  content: '❯';
  display: inline-block;
  font-size: 20px;
  color: var(--muted-foreground);
  padding: 10px 27px 10px 27px;
  transform: rotate(90deg);
  transition: color var(--duration-fast);
}

.toggle-all:checked + label:before {
  color: var(--foreground);
}

.todo-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.todo-list li {
  position: relative;
  font-size: 18px;
  border-bottom: 1px solid var(--border);
}

.todo-list li:last-child {
  border-bottom: none;
}

.todo-list li.editing {
  border-bottom: none;
  padding: 0;
}

.todo-list li.editing .edit {
  display: block;
  width: calc(100% - 43px);
  padding: 12px var(--space-4);
  margin: 0 0 0 43px;
  border-radius: var(--radius-sm);
}

.todo-list li.editing .view {
  display: none;
}

.todo-list li .toggle {
  text-align: center;
  width: 40px;
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  border: none;
  -webkit-appearance: none;
  appearance: none;
  opacity: 0;
  cursor: pointer;
}

/*
 * Explicit white (#fff) rather than `currentColor` because Chrome does not
 * resolve `currentColor` inside a `background-image: url(data:…)` SVG — the
 * asset falls back to black and disappears against the dark card background.
 * The integration site is pinned to dark mode, so a fixed white is safe.
 */
.todo-list li .toggle + label {
  background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2246%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%225%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: center left 4px;
}

.todo-list li .toggle:checked + label {
  background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2246%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%225%22/%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
}

.todo-list li label {
  overflow-wrap: break-word;
  padding: var(--space-4) var(--space-4) var(--space-4) 60px;
  display: block;
  line-height: 1.2;
  transition: color var(--duration-normal);
  font-weight: 400;
  color: var(--foreground);
}

.todo-list li.completed label {
  color: var(--muted-foreground);
  text-decoration: line-through;
}

.todo-list li .destroy {
  display: none;
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  width: 32px;
  height: 32px;
  margin: auto 0;
  font-size: 26px;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: color var(--duration-fast);
  border-radius: var(--radius-sm);
}

.todo-list li .destroy:hover,
.todo-list li .destroy:focus {
  color: var(--destructive);
  outline: none;
}

.todo-list li .destroy:after {
  content: '×';
  display: block;
  height: 100%;
  line-height: 1.1;
}

.todo-list li:hover .destroy {
  display: block;
}

.todo-list li .edit {
  display: none;
}

.todo-list li.editing:last-child {
  margin-bottom: -1px;
}

.footer {
  padding: var(--space-3) var(--space-4);
  text-align: center;
  font-size: 13px;
  color: var(--muted-foreground);
  border-top: 1px solid var(--border);
  background: color-mix(in oklch, var(--card) 92%, var(--background));
  position: relative;
  min-height: 20px;
}

.todo-count {
  float: left;
  text-align: left;
}

.todo-count strong {
  font-weight: 600;
  color: var(--foreground);
}

.filters {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  right: 0;
  left: 0;
}

.filters li {
  display: inline;
}

.filters li a {
  color: var(--muted-foreground);
  margin: 3px;
  padding: 3px 7px;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--duration-fast), border-color var(--duration-fast), background-color var(--duration-fast);
}

.filters li a:hover {
  color: var(--foreground);
  border-color: var(--border);
  background: color-mix(in oklch, var(--accent) 50%, transparent);
}

.filters li a.selected {
  color: var(--foreground);
  border-color: var(--ring);
  background: color-mix(in oklch, var(--accent) 70%, transparent);
}

.clear-completed,
html .clear-completed:active {
  float: right;
  position: relative;
  line-height: 19px;
  color: var(--muted-foreground);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--duration-fast);
}

.clear-completed:hover {
  color: var(--foreground);
  text-decoration: underline;
}

.info {
  margin: var(--space-10) auto 0;
  color: var(--muted-foreground);
  font-size: 11px;
  text-align: center;
}

.info p {
  line-height: 1;
}

.info a {
  color: inherit;
  text-decoration: none;
  font-weight: 500;
}

.info a:hover {
  text-decoration: underline;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  .toggle-all,
  .todo-list li .toggle {
    background: none;
  }

  .todo-list li .toggle {
    height: 40px;
  }
}

@media (max-width: 430px) {
  .footer {
    height: 50px;
  }

  .filters {
    bottom: var(--space-3);
  }
}

.todoapp :focus-visible,
.todoapp .toggle:focus-visible + label,
.todoapp .toggle-all:focus-visible + label {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}