/* --------------------------------------------------- */
/*                      TASK TAGS                       */
/* --------------------------------------------------- */
/* Shared between the tasks page and the homepage (renderTaskTagsInto,
   shared/scripts/taskTags.js) — small GitHub-issue-style named labels shown
   alongside a task's title, both on its card and in its read/preview panel. */
.task-tag-chip {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  /* border-box, not the default content-box - height below needs to mean
     the chip's own TOTAL rendered height (padding/border included), the
     same thing every other fixed-size box in this app already means by
     "height", not just its text line's content area with padding/border
     added on top of that (which would make the actual chip taller than
     16px, defeating the point of pinning it down at all). */
  box-sizing: border-box;
  /* Fixed, not left to the text's own line-height/padding math (which is
     what every rule above/below this one is otherwise busy getting exactly
     right) - confirmed wanted: every chip should render at the exact same
     height as every other one regardless of its own text's specific
     ascender/descender mix, not just be consistently CENTERED within
     whatever height its own content happens to produce. */
  height: 16px;
  padding: 2px 7px;
  border: 1px solid currentColor;
  border-radius: 10px;
  font-size: 0.8em;
  font-weight: bold;
  /* line-height: 1 instead of a relative value like 1.5 - a relative
     line-height adds extra leading split evenly above/below the font's own
     ascent/descent box, but Fira Code's ascent/descent split isn't itself
     even, so that leading was compounding an existing top/bottom
     imbalance instead of just padding it out evenly. Tightening to 1 and
     letting the (equal, explicit) padding above do the vertical spacing
     instead keeps top/bottom distance-to-edge actually equal. */
  line-height: 1;
  /* 0.8em, not 0.72em (this chip's own original size) - a chip renders
     inside the tasks workspace's own .main-container, which
     applyTasksWorkspaceScale (scripts/tasksWorkspace.js) shrinks via a
     dynamically-computed, non-round transform: scale() to fit whatever
     viewport width is actually available - narrower on a smaller/laptop
     screen (more shrink needed) than on a larger monitor (less/none).
     text-box-trim/text-box-edge (cap alphabetic - previously used here
     instead of this size bump, to trim the line box down to the font's own
     cap-height/baseline for genuine optical centering) turned out to hit an
     unlucky font-metric sub-pixel rounding point specifically once this
     chip's fixed 16px height renders close to its own full, unscaled size
     (a larger monitor needing little/no workspace shrink) - confirmed as a
     real, reported bug: the same chip centered correctly once shrunk
     smaller (a laptop screen needing more workspace scale-down), but not at
     full size. 0.8em was found, by direct testing on both a shrunk and a
     full-size render, to avoid that rounding point on both - text-box-trim
     itself no longer does anything useful here and was removed rather than
     kept as unused, since this is size-specific tuning with no clear model
     for why one value works and another doesn't - if a future font change
     ever reopens this, that'll need re-verifying from scratch either way. */
  white-space: nowrap;
  /* Each chip's own color/border-color/background is set inline per tag
     (getTagColor) — only the shape is shared here. */
}
/* Task card — sits inside .task-name-container (tasks/styles/taskCard.css
   on the tasks page; styles/styles.css for the homepage's own read-only
   overview cards), one MORE flex child among the icon-sized ones there,
   not the row itself. On the tasks page that container is a column with
   this placed below .card-name via order (taskCard.css); on the homepage
   it's still the original single row. */
.task-tags-container {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 1;
  flex-wrap: nowrap;
  min-width: 0;
  overflow: hidden;
  mask-image: linear-gradient(
    to right,
    black calc(100% - 24px),
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    black calc(100% - 24px),
    transparent 100%
  );
}
.task-tags-container:empty {
  display: none;
}
/* Read/preview panel — its own full-width row between the category row's
   .line and .read-task-name-container (readTaskPanel.css), so unlike the
   card variant above it can wrap onto multiple lines if a task ever ends
   up with many tags. Now a flex CHILD of .read-task-tags-row (below)
   alongside the quick-edit tag button, rather than the full row itself -
   that button needs to keep showing even with zero tags, so the row
   itself can no longer just disappear via :empty the way this container
   still does on its own. */
.read-task-tags-row {
  width: 100%;
  min-height: 25px;
  display: flex;
  align-items: center;
  gap: 8px;
  /* Was on .read-task-tags-container itself before it became a flex CHILD
     of this row - a negative margin on a flex item doesn't collapse
     through to affect spacing with whatever follows this row the way it
     did back when this container was a plain block-level element in
     normal flow, so it moved up here, onto the actual block-level sibling
     in that flow now. */
  margin-bottom: -5px;
}
.read-task-tags-container {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}
.read-task-tags-container:empty {
  display: none;
}