/* Software page only (imported by src/pages/software.astro). Tokens only.

   The records of the tools in columns (the owner's words of 2026-11-14: "one column the date, one
   column the tool, and then the description, and then ... one column on the right that is have the
   screenshot of the tool"). The list is a .rows list of site.css, section 7, with its own columns:
   - on a phone one column: the year, the name, the description and the developers, then the
     screenshot under them, as wide as the text (at most 22.5rem);
   - from 48rem three columns: the year, the name over the description, the screenshot (13.75rem);
   - from 80rem four columns: the year, the name, the description, the screenshot (17.5rem).
   The year column is only as wide as a year here (not --col-when), so that the four columns fit.

   The screenshot stands in the frame of the first page of a paper (site.css .sheet: the border,
   the corners and the change of colour on hover), 16 to 10, with the whole picture kept inside it
   on the surface colour. A tool without a screenshot keeps the empty frame, drawn dashed. */

/* A description that prints a full address as a link breaks it anywhere (site.css, .entry-text a). */

.tools .tool-name { overflow-wrap: break-word; }
.tools .tool-text { min-width: 0; }

.sheet.is-shot {
  aspect-ratio: 16 / 10;
  width: 100%;
  max-width: 22.5rem;
  margin-top: var(--s2);
  background: var(--wash);
}
.sheet.is-shot img { object-fit: contain; mix-blend-mode: normal; }
.sheet.is-shot.is-empty { border-style: dashed; }
a.sheet.is-shot:focus-visible { border-color: var(--focus); }
@media (hover: hover) and (pointer: fine) {
  a.sheet.is-shot:hover { border-color: var(--link-hover); }
}

@media (min-width: 48rem) {
  .rows.tools { grid-template-columns: max-content minmax(0, 1fr) 13.75rem; }
  .tools > li { grid-template-rows: auto 1fr; }
  .tools .when { grid-column: 1; grid-row: 1 / span 2; }
  .tools .tool-name { grid-column: 2; grid-row: 1; }
  .tools .tool-text { grid-column: 2; grid-row: 2; }
  .tools .sheet.is-shot { grid-column: 3; grid-row: 1 / span 2; max-width: none; margin-top: 0; }
}

@media (min-width: 80rem) {
  .rows.tools {
    grid-template-columns: max-content minmax(0, 1fr) minmax(0, 1.75fr) 17.5rem;
    max-width: 72rem;
  }
  .tools > li { grid-template-rows: auto; }
  .tools .when,
  .tools .tool-name,
  .tools .tool-text,
  .tools .sheet.is-shot { grid-row: 1; }
  .tools .tool-text { grid-column: 3; }
  .tools .sheet.is-shot { grid-column: 4; }
  .tools .tool-text > .entry-text { margin-top: 0; }
}