/* Icons (task 34): our own line glyphs in /static/icons (24-unit grid, 1.75 stroke, round caps), drawn
   in the spirit of SF Symbols, which are licensed for Apple-platform apps only and are not used.

   Each icon is a CSS mask tinted by background-color, bound to a selector that already exists, so no
   template carries an icon, the CSP allows it (img-src 'self') and it scales with the text (em). Every
   one is decorative: generated content, or a span that is already aria-hidden, with the words beside
   it. If an icon fails to load its mask is empty and only the words remain. Under forced colours a
   mask would be painted in Canvas and vanish, so it is drawn in CanvasText instead. */

:is(
    .bucket > summary,
    .part > summary,
    .phase-details > summary h2,
    .ask-claude > summary
  )::after,
:is(
    .as-table,
    .history,
    .impact-item,
    .impact-group,
    .impact-table,
    .dgroup-decided,
    .chg-details,
    .chg-more-filters,
    #notes details
  ) > summary::before,
.back-link::before,
.panel-error h2::before,
.empty::before,
.dref::before,
.ddecided::before,
.item-done::before,
.chg-opt:has(input:checked)::before,
.chg-search .field:has(> input[type="search"])::before,
.box.done::after,
.check input[type="checkbox"]:checked::after,
.banner-icon,
.flash-check,
.key-icon,
.chg-x {
  content: "";
  flex: none;
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: var(--icon-color, currentColor);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

/* Disclosure: a chevron that turns down when the group is open. */
:is(.bucket > summary, .part > summary, .phase-details > summary h2, .ask-claude > summary)::after,
:is(.as-table, .history, .impact-item, .impact-group, .impact-table, .dgroup-decided, .chg-details, .chg-more-filters, #notes details) > summary::before {
  --icon: url("/static/icons/chevron-right.svg");
  --icon-color: var(--ink-3);
  transition: transform var(--duration-fast) var(--ease-out);
}
:is(.bucket, .part, .ask-claude)[open] > summary::after,
.phase-details[open] > summary h2::after,
:is(.as-table, .history, .impact-item, .impact-group, .impact-table, .dgroup-decided, .chg-details, .chg-more-filters, #notes details)[open] > summary::before {
  transform: rotate(90deg);
}
.back-link::before {
  --icon: url("/static/icons/chevron-left.svg");
  width: 1.1em;
  height: 1.1em;
}

/* Status */
.banner-icon {
  --icon: url("/static/icons/exclamationmark-triangle.svg");
  width: 1.25rem;
  height: 1.25rem;
}
.flash-check {
  --icon: url("/static/icons/checkmark.svg");
  width: 1.25rem;
  height: 1.25rem;
}
.panel-error h2::before {
  --icon: url("/static/icons/exclamationmark-circle.svg");
  margin-right: 0.3em;
  vertical-align: -0.12em;
}
.empty::before {
  --icon: url("/static/icons/tray.svg");
  --icon-color: var(--ink-3);
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  margin: 0 auto var(--space-2);
}
.dref::before,
.ddecided::before,
.item-done::before {
  --icon: url("/static/icons/checkmark.svg");
  margin-right: 0.25em;
  vertical-align: -0.12em;
}

/* Controls (the key icon's span has font-size 0, so its size is in rem, not em) */
.key-icon {
  width: 1.125rem;
  height: 1.125rem;
}
.key-good .key-icon {
  --icon: url("/static/icons/checkmark.svg");
}
.key-hold .key-icon {
  --icon: url("/static/icons/pause.svg");
}
.key-bad .key-icon {
  --icon: url("/static/icons/xmark.svg");
}
.chg-x {
  --icon: url("/static/icons/xmark.svg");
  --icon-color: var(--ink-3);
  width: 0.875rem;
  height: 0.875rem;
}
.chg-opt:has(input:checked)::before {
  --icon: url("/static/icons/checkmark.svg");
  width: 0.875em;
  height: 0.875em;
}
.box.done::after,
.check input[type="checkbox"]:checked::after {
  --icon: url("/static/icons/checkmark.svg");
  --icon-color: var(--surface);
  width: 0.875rem;
  height: 0.875rem;
}
.chg-search .field:has(> input[type="search"]) {
  position: relative;
}
.chg-search .field:has(> input[type="search"])::before {
  --icon: url("/static/icons/magnifyingglass.svg");
  --icon-color: var(--ink-3);
  position: absolute;
  left: var(--space-3);
  bottom: calc((var(--hit) - 1.125rem) / 2);
  width: 1.125rem;
  height: 1.125rem;
  pointer-events: none;
}
.chg-search .field:has(> input[type="search"]) > input {
  padding-left: 2.5rem;
}

@media (forced-colors: active) {
  :is(.bucket > summary, .part > summary, .phase-details > summary h2, .ask-claude > summary)::after,
  :is(.as-table, .history, .impact-item, .impact-group, .impact-table, .dgroup-decided, .chg-details, .chg-more-filters, #notes details) > summary::before,
  .back-link::before,
  .panel-error h2::before,
  .empty::before,
  .dref::before,
  .ddecided::before,
  .item-done::before,
  .chg-opt:has(input:checked)::before,
  .chg-search .field:has(> input[type="search"])::before,
  .box.done::after,
  .check input[type="checkbox"]:checked::after,
  .banner-icon,
  .flash-check,
  .key-icon,
  .chg-x {
    forced-color-adjust: none;
    background-color: CanvasText;
  }
  .chg-opt:has(input:checked)::before {
    background-color: HighlightText; /* on the chosen option's Highlight fill (desk-controls.css) */
  }
}