/* DIATYPE FONT */
@font-face {
  font-family: "Diatype Mono Variable";
  src: url("../fonts/Diatype-Mono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}

/* RESET & BASE STYLES */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; color-scheme: dark; }
body, h1, h2, p { margin: 0; }
input { font: inherit; color: inherit; background: transparent; border: none; }
input:focus { outline: none; }
ol, ul { list-style: none; }

/* TYPOGRAPHY & THEME */
:root { background: #000; }
body {
  min-width: 320px;
  background: #000;
  color: #fff;
  font-family: "Diatype Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(22px, 2.5vw, 30px);
  line-height: 1.4;
  font-weight: 350;
  font-variation-settings: "MONO" 0, "slnt" 0, "ital" 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: clamp(30px, 5vw, 50px);
  opacity: 0;
  animation: fadeIn 0.8s ease-in forwards;
}

@keyframes fadeIn { to { opacity: 1; } }

/* LAYOUT */
#wrap, #info div { 
  width: 100%; 
}

/* HEADER (Applies to main app and info overlay) */
header { 
  display: flex; 
  justify-content: space-between; 
  align-items: baseline; 
  padding-bottom: 10px; 
}
header h1, header h2 { 
  font-size: clamp(24px, 3.2vw, 34px); 
  color: #fff; 
  font-weight: 350; 
}
header a { 
  color: #999; 
  font-size: 0.8em;
  text-decoration: underline; 
  text-underline-offset: 0.18em; 
  text-decoration-thickness: 1px; 
  transition: color .2s; 
}
header a:hover { color: #fff; }

/* TASKS LIST & NEW INPUT ALIGNMENT (The Absolute Gutter Method) */
ol#tasks li { 
  position: relative; 
}
ol#tasks li label, #new label { 
  display: block; /* Removed flexbox */
  position: relative; /* Anchors the absolute checkbox */
  width: 100%; 
  padding: 10px 0 10px 35px; /* The 35px creates the gutter on the left */
  cursor: pointer; 
}
#new label {
  cursor: text;
}

/* NATIVE CHECKBOX STYLING */
ol#tasks li input[type="checkbox"], #new input[type="checkbox"] { 
  position: absolute;
  left: 0;
  top: 10px;
  margin: 0;
  margin-top: calc((1.4em - 20px) / 2); 
  width: 20px; 
  height: 20px; 
  accent-color: #fff;
  cursor: pointer; 
}

/* DUMMY 'NEW TASK' CHECKBOX */
#new input[type="checkbox"] {
  cursor: default;
  opacity: 0.5; /* Dim the dummy checkbox */
}

/* TEXT STYLING */
ol#tasks li span { 
  display: block;
  width: 100%;
  transition: color .2s;
  word-break: break-word; 
}
ol#tasks li label span.done { 
  text-decoration: line-through; 
  color: #666; 
}
#new input[type="text"] { 
  display: block;
  width: 100%; 
}
#new input[type="text"]::placeholder { 
  color: #666; 
}

/* MODAL / INFO OVERLAY */
#info { 
  display: none; 
  z-index: 100; 
  background: #000; 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  padding: clamp(30px, 5vw, 50px); 
  overflow-y: auto; 
}
#info p { 
  font-size: clamp(24px, 3.2vw, 26px); 
  margin-top: 10px;
  margin-bottom: 20px; 
  color: #999; 
}
#info a { 
  color: #fff; 
  text-decoration: underline; 
  text-underline-offset: 0.18em; 
  text-decoration-thickness: 1px; 
  transition: color .2s; 
}
#info a:hover { color: #999; }
#info p a { text-decoration: none; }

/* MOBILE ADJUSTMENTS */
@media (max-width: 767px) {
  body { padding: 30px 20px; }
  #info { padding: 30px 20px; }
  ol#tasks li input[type="checkbox"], #new input[type="checkbox"] { 
    top: 8px;
  } 
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}