/* Quieter status surfaces; text keeps the full ink contrast. */
html #projects-inner#projects-inner details.project > summary .wl-case-stage {
  --stage-progress: rgb(217 220 214 / .55);
  opacity: 1;
  border-color: color-mix(in srgb, var(--ink, currentColor) 8%, transparent);
}
html[data-theme="dark"] #projects-inner#projects-inner details.project > summary .wl-case-stage {
  --stage-progress: rgb(78 83 75 / .55);
}
/* Tablet metadata share the name/category axes of the eight-column grid. */
@media (min-width:761px) and (max-width:1099px) {
  html[lang="pl"] #projects-inner#projects-inner details.project > summary .project-year {
    /* Each group spans three parent tracks: the same width as name/category. */
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: var(--wl-gap, 24px) !important;
    white-space: nowrap !important;
  }
  html[lang="pl"] #projects-inner#projects-inner details.project > summary .wl-case-stage {
    grid-column: 2 / 3;
    grid-row: 1;
    justify-self: start;
  }
  html[lang="pl"][data-wl-composition="right"] #projects-inner#projects-inner details.project > summary {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  }
  html[lang="pl"][data-wl-composition="right"] #projects-inner#projects-inner details.project > summary > .project-number {grid-column:8 !important;}
  html[lang="pl"][data-wl-composition="right"] #projects-inner#projects-inner details.project > summary > h3 {grid-column:5 / 8 !important;}
  html[lang="pl"][data-wl-composition="right"] #projects-inner#projects-inner details.project > summary > .project-category {grid-column:2 / 5 !important;}
  html[lang="pl"][data-wl-composition="right"] #projects-inner#projects-inner details.project > summary > .project-plus {grid-column:1 !important;grid-row:1 / 3 !important;}
  html[lang="pl"][data-wl-composition="right"] #projects-inner#projects-inner details.project > summary > .project-year {
    grid-column:2 / 8 !important;
    grid-row:2 !important;
    direction:ltr;
  }
  html[lang="pl"][data-wl-composition="right"] #projects-inner#projects-inner details.project > summary .wl-case-stage {grid-column:1 / 2;justify-self:end;}
}
/* Match the existing compact composition breakpoint; never retain five tracks at 701–760. */
@media (min-width:701px) and (max-width:760px) {
  html[lang="pl"][data-wl-composition="right"] #projects-inner#projects-inner details.project > summary {grid-template-columns:24px minmax(0,1fr) 28px !important;}
  html[lang="pl"][data-wl-composition="right"] #projects-inner#projects-inner details.project > summary > .project-number {grid-column:3 !important;grid-row:1 !important;}
  html[lang="pl"][data-wl-composition="right"] #projects-inner#projects-inner details.project > summary > h3 {grid-column:2 !important;grid-row:1 !important;}
  html[lang="pl"][data-wl-composition="right"] #projects-inner#projects-inner details.project > summary > .project-category {grid-column:2 !important;grid-row:2 !important;}
  html[lang="pl"][data-wl-composition="right"] #projects-inner#projects-inner details.project > summary > .project-year {grid-column:2 !important;grid-row:3 !important;}
  html[lang="pl"][data-wl-composition="right"] #projects-inner#projects-inner details.project > summary > .project-plus {grid-column:1 !important;grid-row:1 !important;}
}
/* Keep the complete archived-project label at 320px without shrinking its type. */
@media (max-width:400px) {
  html #projects-inner#projects-inner details.project > summary .wl-case-stage {padding-inline:6px;}
}
@media (forced-colors:active) {
  html #projects-inner#projects-inner details.project > summary .wl-case-stage {border-color:CanvasText;}
}

/* A small response belongs to the project name; metadata stays on the grid. */
@media (min-width:761px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  html[lang="pl"]:not(.motion-paused) #projects-inner details.project > summary h3 {
    translate: 0 0;
    transition: translate 280ms cubic-bezier(.22, .61, .36, 1);
  }
  html[lang="pl"]:not(.motion-paused) #projects-inner details.project > summary:is(:hover, :focus-visible) h3 {
    translate: 4px 0;
  }
  html[lang="pl"][data-wl-composition="right"]:not(.motion-paused) #projects-inner details.project > summary:is(:hover, :focus-visible) h3 {
    translate: -4px 0;
  }
}