/*
 * Layout for the pattern "Launcher" (DESIGN.md): start page listing the tools of a collection.
 * Needs design.css and editor.css (masthead and status line come from there), linked in that order.
 *
 * <div class="launcher">
 *   <header class="masthead t-l">…</header>
 *   <main class="list">
 *     <section class="list-group">
 *       <h2 class="list-title">Group</h2>
 *       <div class="list-row"><a class="action name" href="…">Tool</a><span class="desc">…</span><span class="meta">SVG · PNG</span></div>
 *     </section>
 *   </main>
 *   <footer class="status t-s caps">…</footer>
 * </div>
 */

/* The start page scrolls, unlike the editor */
html, body { overflow: auto; }

.launcher {
  display: grid;
  grid-template-rows: var(--masthead-h) 1fr auto;
  grid-template-areas:
    "head"
    "list"
    "status";
  min-height: 100vh;
}

/* ---------- List: left-aligned with the masthead, at most 960px ---------- */

.list {
  grid-area: list;
  width: 100%;
  max-width: calc(960px + 2 * var(--s-24));
  padding: 0 var(--s-24) var(--s-48);
}
.list-group + .list-group { margin-top: var(--s-24); }
.list-title {
  display: flex;
  align-items: center;
  height: var(--row-h);
  border-bottom: 1px solid var(--line);
  font-size: var(--t-s);
  line-height: var(--t-s-lh);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--caps);
}

/* Row: name (action) · description · formats */
.list-row {
  display: grid;
  grid-template-columns: 24ch minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--s-24);
  height: var(--row-h);
  border-bottom: 1px solid var(--line);
}
.list-row .name { justify-self: start; overflow: hidden; text-overflow: ellipsis; }
.list-row .desc { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-row .meta {
  color: var(--ink-2);
  font-size: var(--t-s);
  line-height: var(--t-s-lh);
  text-transform: uppercase;
  letter-spacing: var(--caps);
  white-space: nowrap;
}

/* Narrow window: the description column is dropped */
@media (max-width: 640px) {
  .list-row { grid-template-columns: minmax(0, 1fr) auto; }
  .list-row .desc { display: none; }
}