/* --------------------------------------------------- */
/*                     TASK CARD                        */
/* --------------------------------------------------- */
/* Shared between the tasks page's own kanban cards (tasks/styles/
   taskCard.css) and the homepage's read-only task-overview cards (styles/
   styles.css) — the category row, name/tags row, and date/time/effort row
   render identically on both, built from the same markup (createNewTask,
   tasks/scripts/tasks.js; buildReadOnlyTaskCard, scripts/
   taskOverviewContainer.js). Each page's own file keeps whatever genuinely
   differs: base card background/box-shadow/theming, hover scope, the
   confirm-overlay spawn animation, and the tasks-page-only drag/done/
   relation-peer states. */
.task-card-container .card-category-watermark {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.4em;
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}
/* Left to right: tags filling all available space, then the category name
   flush against the row's right edge. */
.task-category-container {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1em;
}
.task-category-container .task-tags-container {
  flex: 1;
  min-width: 0;
}
/* Direct child only — not .task-category-container span, which would also
   catch the tag chips now sharing this row (nested inside
   .task-tags-container) and override their own font-size. margin-left:auto
   keeps it flush right even with no tags at all — .task-tags-container is
   display:none when :empty, so there's no flex:1 sibling left to push it
   there in that case; when tags ARE present they already consume all the
   spare width themselves, so this auto margin simply has nothing left to
   claim and is a no-op. */
.task-category-container > span {
  overflow-wrap: break-word;
  flex-shrink: 0;
  margin-left: auto;
  font-size: 0.85em;
}
/* The task's own color (set inline, createNewTask/buildReadOnlyTaskCard) is
   mirrored onto these so each line reads as belonging to its task rather
   than a generic rule. Used both flanking the title (task-name-container,
   one on each side) and previously beside the category name. */
/* min-width:0 (not some floor like 12px) is the point — flex-basis:0
   already means these only ever claim genuinely leftover space, never
   space the title actually needs, but a nonzero min-width would still put
   a floor under how far they can shrink, forcing the title narrower than
   it would be alone the moment the title needs more room than that. With
   a real floor removed, they shrink all the way to nothing and the title
   gets exactly the same width it would if the dividers didn't exist. */
.category-divider {
  flex: 1;
  min-width: 0;
  height: 1px;
}
/* One divider each side of the title, both taking up all available space
   so the title itself stays centered regardless of how long either line
   ends up being — but never at the title's expense (see .category-divider
   above). */
.task-name-container {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
}
.task-name-container .card-name {
  min-width: 0;
  overflow-wrap: break-word;
  font-size: 1em;
  color: var(--font-color-clear);
  text-align: center;
}
.task-date-time-container {
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 0.9em;
}
/* A plain colored dot rather than "Low"/"Mid"/"High" text — same dot the
   due-soon date used to carry (now removed there). The word is still on
   the element as its title attribute (tasks.js/taskOverviewContainer.js),
   so it's still available as a native hover tooltip. */
.task-date-time-container .card-effort {
  display: inline-block;
  width: 8px;
  height: 8px;
  padding: 0;
  margin-right: 5px;
  border-radius: 50%;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  flex-shrink: 0;
  color: var(--font-color-clear);
  background: currentColor;
}
/* .card-effort always sits at the row's far right — but only needs its own
   push when there's nothing else claiming that space. When a
   .relation-indicator is present (tasks page only), IT carries the
   margin-left: auto instead (taskDependencies.css) and effort just follows
   immediately after it in normal flow, so giving effort its own auto margin
   too would be redundant. */
.task-date-time-container:not(:has(.relation-indicator)) .card-effort {
  margin-left: auto;
}
/* Background above is currentColor-derived, so setting color per tier
   recolors both in one place — no separate background overrides needed. */
.task-date-time-container .card-effort[data-effort="low"] {
  color: var(--task-done);
}
.task-date-time-container .card-effort[data-effort="mid"] {
  color: var(--priority-two);
}
.task-date-time-container .card-effort[data-effort="high"] {
  color: var(--priority-one);
}
.task-date-time-container .card-date {
  padding-right: 5px;
  color: var(--font-color-clear);
}
.task-date-time-container .card-time {
  padding-left: 4px;
}
.task-date-time-container .card-time.border {
  border-left: 2px solid var(--font-color);
}
.task-date-time-container .card-date.warn {
  color: var(--priority-two);
  background: color-mix(in srgb, var(--priority-two) 18%, transparent);
  border-radius: 4px;
  padding: 2px 6px;
}
.task-date-time-container .card-date.alert {
  color: var(--priority-one);
  background: color-mix(in srgb, var(--priority-one) 18%, transparent);
  border-radius: 4px;
  padding: 2px 6px;
}