/* =========================================================================
   LESSON: Global Base Styles
   Sets base typography, layout boundaries, and soft background color.
   ========================================================================= */
body {
  font-family: Arial, sans-serif; /* Safe, system-agnostic font */
  max-width: 600px;              /* Keeps container focused and readable */
  margin: 40px auto;             /* Auto-centers layout vertically & horizontally */
  padding: 0 20px;
  background-color: #f5f5f5;     /* Soft background reduces eye strain */
}

/* =========================================================================
   LESSON: Headings & Visual Hierarchy
   Contrasting colors establish focal points across page headers.
   ========================================================================= */
h1 {
  color: #333; /* Dark gray for prominent high-contrast titles */
}

h2 {
  color: #555;        /* Slightly lighter gray for subheadings */
  margin-top: 20px;   /* Creates visual breathing room between sections */
}

/* =========================================================================
   LESSON: Form Inputs & Controls
   Styles interactive input fields for consistent width and usability.
   ========================================================================= */
input[type="text"],
input[type="email"],
input[type="password"] {
  padding: 8px;
  margin: 4px 0;
  width: 220px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box; /* Ensures padding doesn't push width wider */
}

button {
  padding: 8px 14px;
  margin: 4px;
  cursor: pointer;        /* Visual hand cursor cue on hover */
  border: 1px solid #008fcc;
  background-color: #008fcc;
  color: white;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

button:hover {
  background-color: #0073a6; /* Darkens button color on hover for tactile feel */
}

/* =========================================================================
   LESSON: Unordered Lists & Reset
   Strips default browser bullet points and indentations.
   ========================================================================= */
ul {
  list-style: none;
  padding: 0;
}

/* =========================================================================
   LESSON: Flexbox & Task Items
   Formats individual task entries into crisp cards using Flexbox layout.
   ========================================================================= */
li {
  background: white;
  padding: 10px 12px;
  margin: 6px 0;
  border: 1px solid #ccc;
  border-left: 5px solid #008fcc; /* Accent left border for visual weight */
  border-radius: 4px;
  display: flex;
  justify-content: space-between; /* Pushes content left, buttons right */
  align-items: center;          /* Centers text and buttons vertically */
  cursor: grab;                 /* Cursor cue indicating drag-and-drop capability */
}

li:active {
  cursor: grabbing; /* Tactile feedback while holding mouse click */
}

/* =========================================================================
   LESSON: Task Completion & State Styles
   Handles strike-through and de-emphasis for completed tasks.
   Matches JavaScript class: textSpan.classList.add("completed")
   ========================================================================= */
.completed,
li.done {
  text-decoration: line-through;
  color: #888; /* Fades finished task text */
  transition: all 0.2s ease;
}

/* Checkbox styling inside list items */
li input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* Drag and Drop visual state helpers */
li.dragging {
  opacity: 0.5; /* Dims original element while dragging */
}

li.over {
  background-color: #d0ebff; /* Visual highlight for drop target zone */
  border-style: dashed;
}