/* Styles every element renderDescriptionText (shared/scripts/
   taskDescriptionRenderer.js) can produce inside a .read-task-text-container
   — checkboxes, bullets/enumerations, links, bold/italic/highlight, inline
   code and code blocks, dividers. Shared between the tasks page's own read
   panel and the homepage's inline one (scripts/taskReadPanel.js) so a
   task's formatted description looks identical wherever it's read. */
/* Resets the global `a` rule (styles.css) meant for the homepage's own
   bookmark links — display:flex/width:100%/16px-bold would otherwise force
   a description link onto its own full-width line at the wrong size instead
   of flowing inline with the surrounding text at its own font size. */
/* Overrides the homepage's app-wide *:not(input) { user-select: none }
   reset (styles.css) — loaded before this stylesheet, so equal specificity
   resolves by source order. Description text (esp. checkbox labels used as
   page-title checklists) is worth selecting/copying, unlike the read panel
   chrome that reset is meant for. */
.read-task-text-container,
.read-task-text-container * {
  user-select: text;
}
.read-task-text-container a {
  display: inline;
  width: auto;
  min-height: 0;
  border-radius: 0;
  font-size: inherit;
  font-weight: normal;
  text-decoration: none;
  color: var(--secondary-color);
}
.read-task-text-container a:visited {
  color: var(--secondary-color);
}
.read-task-text-container div {
  display: flex;
  align-items: center;
  word-wrap: break-word;
  margin-left: 10px;
  min-height: 16px;
}
/* Same treatment for every list-shaped row a description can produce —
   numbered (.enumeration), bulleted (.bullet), and checkbox (.checkbox)
   rows all get this container class from addElementToDescription (shared/
   scripts/taskDescriptionRenderer.js). */
.read-task-text-container div.enumeration,
.read-task-text-container div.bullet,
.read-task-text-container div.checkbox {
  margin-left: 0;
  /* Top-align instead of the default center — with center, a multi-line
     item's marker (number/bullet icon/checkbox) sits at its vertical
     midpoint, which reads as ambiguous about which line it belongs to once
     a later item also wraps. Keeps the marker pinned to the FIRST line. */
  align-items: flex-start;
  /* Without this, consecutive items' own left border (below) touch
     edge-to-edge and read as one unbroken line down the whole list instead
     of a separate marker per item. */
  margin-bottom: 5px;
}
/* .checkbox-marker (below) is the checkbox's own hover/sibling target now,
   not the input directly — hovering anywhere in its (larger) 25px box
   still highlights the actual checkbox inside it, a more forgiving hit
   area than the small native control alone. */
.read-task-text-container .checkbox-marker:hover input[type="checkbox"] {
  outline: 2px solid var(--highlight);
  cursor: var(--cursor-pointer, pointer);
}
.read-task-text-container .checkbox-marker:hover + label {
  color: var(--highlight);
}
/* Reserves the exact same 25px-wide marker column for every list-shaped
   row's own marker — number, bullet-marker, or checkbox-marker — so the
   text's own border-left "pipe" (below) always starts at the same x
   position no matter which of the three a given item actually is; without
   this, the number's own 20px column (span.number's old width) never
   lined up with the bullet/checkbox's intrinsic (unset) width.
   bullet-marker/checkbox-marker are wrappers (taskDescriptionRenderer.js)
   around the actual icon/<input> specifically so THEY get sized to this
   column instead of the marker itself — forcing the checkbox's own native
   control to 25x25 made for a comically oversized checkbox; these
   wrappers reserve the same column width/height while the icon/checkbox
   inside keeps its own normal (smaller) size, just centered (below). */
.read-task-text-container span.number,
.read-task-text-container .bullet-marker,
.read-task-text-container .checkbox-marker {
  width: 25px;
  flex-shrink: 0;
}
.read-task-text-container span.number {
  text-align: end;
  color: var(--secondary-color);
  font-weight: bold;
}
/* Bullet/checkbox markers are naturally shorter than a line of text (the
   icon's own smaller font-size, below; a native checkbox's small
   intrinsic size) — sized to exactly one line's height via the `lh` unit
   and centered within it (both wrappers get their own inline-flex
   centering just below), rather than left at their own shorter natural
   height where their row's flex-start alignment (above) pins them flush
   to the row's very top edge instead of the first line's vertical center.
   `1lh` specifically (not a fixed px value) so this keeps tracking
   whatever the read panel's line-height slider is currently set to,
   instead of drifting off-center the moment it's changed — this only
   works because NEITHER wrapper overrides its own font-size (unlike the
   icon/checkbox inside them), so the unitless line-height they inherit
   from .read-task-text-container computes against the same font-size the
   sibling text itself uses, rather than a smaller one of their own. A
   number needs no such fix at all — being plain text at that same
   font-size directly, it already sits naturally alongside the first line
   regardless of line-height. */
.read-task-text-container .bullet-marker,
.read-task-text-container .checkbox-marker {
  height: 1lh;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.read-task-text-container .checkbox-marker {
  /* The wrapper's own click handler (taskDescriptionRenderer.js) toggles
     the checkbox for a click anywhere in this box, not just the small
     native control itself — the cursor needs to say so too, since :hover's
     cursor (above) only applies while the pointer is over the checkbox
     itself, not this wrapper's padding around it. */
  cursor: var(--cursor-pointer, pointer);
}
.read-task-text-container .bullet-marker > i {
  font-size: 12px;
}
/* Same "pipe" treatment for every list-shaped row's own text — was only
   ever on span.enumeration ("Replaces the old 'N.' dot"); label (checkbox)
   and span.bullet used to just be plain indented text with no border at
   all, same ambiguous-on-wrap problem the numbered-list fix solved. A
   border on the (possibly multi-line) text naturally spans every wrapped
   line of this item, showing which lines its marker (number/bullet
   icon/checkbox) belongs to. */
.read-task-text-container label,
.read-task-text-container span.bullet,
.read-task-text-container span.enumeration {
  width: 86%;
  padding-left: 8px;
  margin-left: 3px;
  border-left: 2px solid var(--secondary-color);
}
.read-task-text-container i {
  color: var(--secondary-color);
  font-size: 0.8em;
}
.read-task-text-container label:hover {
  color: var(--highlight);
  cursor: var(--cursor-pointer, pointer);
}
.read-task-text-container .fat {
  font-weight: bold;
}
.read-task-text-container .italic {
  font-style: italic;
}
.read-task-text-container .line-through {
  text-decoration: line-through;
}
.read-task-text-container code.inline-code {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 0.92em;
}
.read-task-text-container .code-block-container {
  position: relative;
  display: block;
  margin-left: 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 8px 36px 8px 12px;
  min-height: 38px;
  width: 100%;
  box-sizing: border-box;
}
.read-task-text-container .code-block-container pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-all;
  font-size: 0.88em;
  color: var(--font-color-clear);
}
.code-block-copy-btn {
  position: absolute;
  aspect-ratio: 1;
  top: 6px;
  right: 6px;
  background: none;
  border: 1px solid var(--font-color-weak);
  border-radius: 4px;
  padding: 2px 6px;
  cursor: var(--cursor-pointer, pointer);
  color: var(--font-color);
  font-size: 0.75em;
  transition:
    border-color 150ms,
    color 150ms;
}
.code-block-copy-btn:hover {
  border-color: var(--highlight);
  color: var(--highlight);
}
.read-task-text-container hr.description-hr {
  border: none;
  border-top: 1px solid var(--secondary-color);
  margin: 6px 0;
  width: 100%;
  opacity: 0.4;
}
/* Collapsible §-marked description sections (_buildDescriptionCollapseSection,
   shared/scripts/taskDescriptionRenderer.js) - a chevron-rotate + real
   JS-measured pixel-height animation (that function's own click handler),
   not a pure-CSS trick - .read-task-text-container's own blanket "every div
   is a flex row, min-height:16px" rule (above) fights a CSS-only grid/
   max-height approach too unpredictably in this specific container, so an
   explicit inline height (always wins over any stylesheet, any specificity)
   sidesteps that fight entirely. Overrides this file's own generic
   ".read-task-text-container div" rule (display:flex/margin-left, above)
   the same way .code-block-container already does, for the same reason -
   these aren't a two-column marker+text row like a bullet/enumeration/
   checkbox is. */
.read-task-text-container .description-collapse {
  display: block;
  margin-left: 0;
  margin-bottom: 5px;
}
.read-task-text-container .description-collapse-header {
  display: flex;
  align-items: center;
  gap: 0;
  margin-left: 0;
  min-height: 0;
  padding: 4px 0 0 0;
  cursor: var(--cursor-pointer, pointer);
  user-select: none;
  color: var(--font-color-weak);
  transition: color 150ms ease;
}
.read-task-text-container .description-collapse-header:hover {
  color: var(--highlight);
}
.read-task-text-container .description-collapse-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* Overrides the generic ".read-task-text-container div" rule (above) the
     same way every other structural element in here already does
     (.code-block-container etc.) - without it, this being a genuine <div>
     now (it was an <i> before being wrapped, and never caught by that rule)
     picked up its own margin-left:10px/min-height:16px, nudging the circle
     away from the header's actual left edge and fighting the fixed
     width/aspect-ratio sizing below. */
  margin-left: 0;
  min-height: 0;
  /* A definite size on both axes, not left to the icon's own intrinsic box
     - aspect-ratio:1 alone still needs at least one dimension pinned to
     resolve the other from, and centering a flex-shrink:0 circle at a fixed
     em size keeps it round and consistently sized regardless of whichever
     icon glyph ends up inside it. */
  width: 1.7em;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid var(--secondary-color);
  transition: transform 200ms ease;
}
.read-task-text-container .description-collapse-chevron-icon {
  font-size: 0.85em;
  color: var(--secondary-color);
}
.read-task-text-container
  .description-collapse.collapsed
  .description-collapse-chevron {
  transform: rotate(-90deg);
}
.read-task-text-container .description-collapse-title {
  font-size: 1.1em;
  padding: 1px 10px 0px 10px;
  border: 1px solid var(--secondary-color);
  background-color: color-mix(in srgb, var(--secondary-color) 14%, transparent);
  border-radius: 10px;
  color: var(--font-color-clear);
}
/* flex:1 on a header that's already display:flex (above) is what makes this
   fill exactly whatever space is left after the chevron (and title, if any)
   - no title, and it starts right after the chevron; with a title, right
   after the title text - same border-top-as-a-line technique as
   hr.description-hr (above), so a collapse header reads as "a divider with
   a chevron/label on it", not text trailing off into empty space. */
.read-task-text-container .description-collapse-rule {
  flex: 1;
  border-bottom: 2px solid var(--secondary-color);
}
/* display:block + overflow:hidden is ALL this needs, structurally - the
   actual open/close animation sets a real inline height directly
   (_buildDescriptionCollapseSection's own click handler), and the
   ".collapsed" default below only matters for the very first render, before
   any click has ever set an inline height of its own. margin-left:0
   overrides the generic ".read-task-text-container div" rule the same way
   every other structural block on this page already does (.code-block-container,
   above) - this isn't a two-column marker+text row. */
.read-task-text-container .description-collapse-body {
  display: block;
  overflow: hidden;
  margin-left: 0;
  /* Isolates this element's own layout/paint from the rest of the page -
     the one-time height snap on open/close (_buildDescriptionCollapseSection's
     click handler, shared/scripts/taskDescriptionRenderer.js) still touches
     layout, so this keeps that single reflow scoped to this box instead of
     the whole scrolling container (.read-task-text-container's own
     overflow-y:auto) re-checking its scrollable height/scrollbar too. Safe
     here specifically because this element's own box never needs to size
     itself to unpredictable outside content (paint) or leak its own
     internal changes upward in a way anything outside relies on (layout) -
     exactly what CSS containment is for. */
  contain: layout paint;
}
.read-task-text-container
  .description-collapse.collapsed
  .description-collapse-body {
  height: 0;
}
/* The left border/indent is the same "this is one visually grouped block"
   language a checklist/bullet/enumeration item's own label already uses
   (.read-task-text-container label, above), so an expanded section reads
   as clearly nested under its own header. */
.read-task-text-container .description-collapse-body-inner {
  display: block;
  min-height: 0;
  margin-left: 8px;
  padding-left: 10px;
  border-left: 2px solid var(--secondary-color);
}
.read-task-text-container .highlight {
  background: color-mix(in srgb, #b8860b 35%, transparent);
  border-radius: 2px;
  padding: 1px 3px;
}
.desc-image-thumb {
  display: inline-block;
  max-width: 120px;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
  vertical-align: middle;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  cursor: var(--cursor-pointer, pointer);
  transition: border-color 150ms;
}
.desc-image-thumb:hover {
  border-color: var(--secondary-color);
}
.desc-image-lightbox {
  position: fixed;
  inset: 0;
  /* Above .read-task-container.preview's own z-index: 1111 (readTaskPanel.css
     - the highest of .reading/.preview/.relation-panel-peek's shared 1101/
     1111 tier) - an image opened full-view from a task's own description
     used to render BEHIND that same task, since this used to sit at 1000,
     below all three. Tasks winning against Quick Search/Chat is the general
     rule (that tier's own comment, readTaskPanel.css) - viewing an image you
     just clicked FROM one of those tasks is the one case that still needs
     to come out on top of it instead. */
  z-index: 1150;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  animation: desc-image-lightbox-fade-in 150ms ease-out;
}
@keyframes desc-image-lightbox-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.desc-image-lightbox img {
  /* Overrides the homepage's global img{width:25px;height:25px} (link-icon
     sizing, styles.css) — that rule targets no class, so it still wins on
     these two properties even though max-width/max-height below are scoped
     more specifically; only an explicit width/height override here beats it. */
  width: auto;
  height: auto;
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
}

/* Right-click menu on a .desc-image-thumb or the lightbox's own full-size
   image (_openDescImageContextMenu, taskDescriptionRenderer.js) - one
   "Download image" option. Self-contained rather than reusing the
   homepage's own .menu-container (scripts/rightClickMenu.js) - that file
   never loads on the standalone tasks page, which renders task
   descriptions (and this exact menu) too - but styled to match its look
   closely (same dark pill, colored top/bottom border, hover highlight).
   z-index above .desc-image-lightbox's own 1150 - opening this FROM inside
   the lightbox needs to sit on top of it, not behind. */
.desc-image-context-menu {
  position: fixed;
  z-index: 1151;
  min-width: 160px;
  background-color: var(--main-theme-darker);
  border-top: 2px solid var(--secondary-color);
  border-bottom: 2px solid var(--secondary-color);
  border-radius: 10px;
  padding: 4px;
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.5);
  font-size: 13px;
  color: var(--font-color-clear);
  user-select: none;
}
.desc-image-context-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  background: none;
  border: none;
  border-radius: 6px;
  color: inherit;
  font: inherit;
  text-align: left;
}
.desc-image-context-menu button i {
  width: 16px;
  color: var(--secondary-color);
  text-align: center;
}
.desc-image-context-menu button:hover {
  color: var(--highlight);
  cursor: var(--cursor-pointer, pointer);
}
.desc-image-context-menu button:hover i {
  color: var(--highlight);
}