/* ============================================================
   TO-DO — calendar to-do lines, board, cards, scale fields, category select
   Part of Daybook's styles — split from the original styles.css.
   Load ORDER matters (cascade): see the <link> order in app.html.
   ============================================================ */

/* ============================================================
   CALENDAR — to-do lines under each day header
   ============================================================ */
.cal-todos {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 80%;
  margin-top: 5px;
}
.cal-todo-line { height: 3px; border-radius: 2px; cursor: pointer; }
.cal-todo-line:hover { outline: 1px solid rgba(0,0,0,0.25); }
.cal-todo-line.done { opacity: 0.35; }

/* Timed to-do marker sitting on the grid at its due time */
.cal-todo-marker {
  position: absolute;
  left: 2px; right: 2px;
  transform: translateY(-50%);   /* centre the band on the due time */
  height: 14px;                  /* taller transparent band = easy to click */
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 6;                    /* above event blocks */
  cursor: pointer;
}
.cal-todo-dots { display: flex; align-items: center; }
.cal-todo-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  cursor: pointer;
  box-shadow: 0 0 0 1.5px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.cal-todo-dot + .cal-todo-dot { margin-left: 2px; } /* a small gap between clustered dots */
.cal-todo-dot.done { opacity: 0.4; }
.cal-todo-rule {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.75); /* outline so it pops over events */
}
.cal-todo-marker:hover .cal-todo-rule { filter: brightness(1.15); }

/* ============================================================
   TO-DO BOARD
   ============================================================ */
/* minmax(0, 1fr) not 1fr: a plain 1fr has an automatic content-based minimum,
   so a long deadline name in a card would push its whole column wider. */
.todo-board { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
/* The renderer sets --td-day-count and a layout class. In the 4-day "window"
   tier the grid follows that count; in the "list" tier it's a single column. */
.todo-board.td-window { grid-template-columns: repeat(var(--td-day-count, 4), minmax(0, 1fr)); }
.todo-board.td-list   { grid-template-columns: 1fr; gap: 6px; }

/* Medium widths: seven columns get cramped, so the board shows a 4-day window
   you page through (Sun–Wed / Thu–Sun), mirroring the calendar's mobile view.
   The toolbar also stacks so the title can centre. */
@media (max-width: 1200px) {
  .todo-col { min-height: 120px; }

  /* Stack the To-Do toolbar zones so the title can centre across the full
     width (above this it shares a row with the week nav and filters). */
  #view-todo .cal-toolbar { flex-wrap: wrap; gap: 10px; align-items: center; }
  #view-todo .cal-left,
  #view-todo .cal-center,
  #view-todo .cal-right { flex: 1 1 100%; }
  #view-todo .cal-center { align-items: center; }
  #view-todo .cal-right { justify-content: center; }
  #view-todo .todo-filters { flex-wrap: wrap; justify-content: center; }

  /* To-Do header: title centered across the full width, "+" pinned right so it
     never pushes the title off-centre. Matches the board dropping to rows. */
  #view-todo .cal-left {
    position: relative;
    display: block;
    width: 100%;
  }
  #view-todo .cal-left h2 {
    display: block;
    width: 100%;
    text-align: center;
    margin: 0;
    height: auto;
  }
  #view-todo #addTodoBtn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
  }
}

/* Very narrow: the 4-day window is still too tight, so drop to a single-column
   list showing all seven days stacked. */
@media (max-width: 620px) {
  .todo-col { min-height: 0; }
  .todo-col-head { text-align: left; }
}
.todo-col {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-height: 140px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.todo-col.today { border-color: var(--sidebar-bg); }
/* Today gets a thick bar under its day header, in the menu/sidebar shade. */
.todo-col.today .todo-col-head {
  border-bottom: 5px solid var(--sidebar-bg);
  color: var(--text);
}
.todo-col-head {
  padding: 8px;
  border-bottom: 1px solid var(--border);
  text-align: center;
  font-size: 0.78rem;
  color: var(--muted);
}
.todo-col-head .todo-dom { font-weight: 600; color: var(--text); }
.todo-col-body { padding: 8px; display: flex; flex-direction: column; gap: 6px; flex: 1; }

.todo-card {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 5px solid var(--accent);
  border-radius: 6px;
  padding: 6px 8px;
  cursor: pointer;
  font-size: 0.85rem;
}

/* A "do on" item is a soft plan, so its edge is a dashed stripe in the category
   colour; a deadline keeps the solid bar. A real dashed border gives tiny,
   cramped dashes we can't space out, so paint the left stripe with a gradient
   instead — thinner and clearly separated: 5px dash, 6px gap. */
.todo-card--do {
  border-left-width: 0;              /* drop the solid bar; the stripe replaces it */
  padding-left: 11px;                /* room for the thinner stripe */
  background-image: linear-gradient(
    to bottom,
    var(--cat-color, var(--accent)) 0, var(--cat-color, var(--accent)) 5px,
    transparent 5px, transparent 11px
  );
  background-size: 3px 11px;         /* 3px-wide (thinner) stripe down the left edge */
  background-repeat: repeat-y;
  background-position: left top;
}

/* What a "do on" item is working toward — the deadline's name, then its date
   on its own line. The arrow hangs in the indent so both lines start at the
   same column, and a long name wraps instead of stretching the column. */
.todo-link-chip {
  position: relative;
  margin-top: 3px;
  padding-left: 11px;
  font-size: 0.7rem;
  color: var(--muted);
  line-height: 1.35;
}
.todo-link-arrow { position: absolute; left: 0; top: 0; }
.todo-link-name { overflow-wrap: anywhere; }
.todo-link-due { opacity: 0.85; }
.todo-card:hover { background: #eef0f3; }
.todo-card input { margin-top: 2px; flex-shrink: 0; }
.todo-title { line-height: 1.3; word-break: break-word; }
.todo-card.done .todo-title { text-decoration: line-through; color: var(--muted); }

/* ============================================================
   SCALE FIELDS — clear "answered vs not answered" + clear button
   ============================================================ */
.scale-controls { display: inline-flex; align-items: center; gap: 8px; }
.scale-out { font-weight: 600; font-size: 0.95rem; min-width: 24px; text-align: right; color: var(--accent); }
.scale-clear {
  border: none; background: none; cursor: pointer;
  color: var(--muted); font-size: 1.1rem; line-height: 1; padding: 0 2px;
  border-radius: 4px;
}
.scale-clear:hover { color: #b91c1c; background: #fee2e2; }

/* Unanswered state: greyed slider, muted "Not answered", hide the clear (×) */
.scale-field.unanswered .scale-slider { opacity: 0.4; }
.scale-field.unanswered .scale-out { color: var(--muted); font-weight: 400; font-style: italic; font-size: 0.8rem; }
.scale-field.unanswered .scale-clear { display: none; }

/* ============================================================
   COLOUR-CODED CATEGORY SELECT
   ============================================================ */
#evtCategory, #todoCategory { transition: border-color 0.12s ease; }

/* ============================================================
   TO-DO CARD — time/estimate meta line
   ============================================================ */
.todo-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* Let the meta (time · estimate) wrap onto a new line rather than overflowing a
   narrow card. Wrapping happens at the spaces around the "·", so "11:00 PM" and
   "~3h" stay intact; overflow-wrap is only a fallback for an over-long token. */
.todo-meta { font-size: 0.72rem; color: var(--muted); white-space: normal; overflow-wrap: anywhere; }
.todo-card.done .todo-meta { color: var(--border); }

/* Goal card: linked category line */