/* /tools/ only: the section-index opening, the two tools beside the raised sheet (the moment's slot),
   the origin on teal with the page's display sentence, the FAQ lead.
   Owner: ux-designer builder (e). Shared components come from layout.css. */

/* ---- opening: H1 at 3x, the sub-line held to its end ------------------- */
main > .tl-open { padding-block: var(--space-8) 0; }
.tl-open__grid { display: grid; gap: var(--space-4) var(--gutter); }
.tl-open__title { font-size: var(--t-h1); line-height: 1.08; max-inline-size: 12em; }
.tl-open__sub { font-size: var(--t-lead); line-height: 1.6; color: var(--text-2); max-inline-size: 30rem; }
@media (min-width: 1024px) {
  main > .tl-open { padding-block-start: var(--space-9); }
  .tl-open__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
  .tl-open__title { grid-column: 1 / span 8; }
  .tl-open__sub { grid-column: 9 / span 4; padding-block-end: 0.35em; }
}

/* ---- 1. the index ------------------------------------------------------ */
main > .tl-index { padding-block-start: var(--space-7); }
@media (min-width: 900px) { main > .tl-index { padding-block-start: var(--space-8); } }
.tl { display: grid; gap: var(--space-7); }
/* the index opens on the heavy rule that marks it as the list the H1 names */
.tl__list { border-block-start: 3px solid var(--text); }
.tl__row {
  display: grid;
  gap: var(--space-4);
  padding-block: var(--space-6);
  border-block-end: 1px solid var(--rule);
}
.tl__name { font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem); line-height: 1.12; }
.tl__line { font-size: var(--t-lead); line-height: 1.6; max-inline-size: 40rem; }
.tl__facts > div {
  display: grid;
  gap: 2px var(--space-5);
  padding-block: var(--space-3);
  border-block-start: 1px solid var(--rule);
}
.tl__facts dt { display: flex; align-items: baseline; gap: var(--space-2); font-weight: 700; color: var(--mark); }
/* the marker is the mark's triangle, pointing along the reading direction */
.tl__facts dt::before {
  content: "";
  flex: none;
  inline-size: 9px;
  block-size: 10px;
  background-color: var(--mark);
  clip-path: polygon(100% 0, 100% 100%, 0 50%);
}
.tl__facts dd { color: var(--text); }
.tl__end { margin-block-start: var(--space-2); }
@media (min-width: 700px) {
  .tl__facts > div { grid-template-columns: 7rem minmax(0, 1fr); align-items: baseline; }
}

/* the sheet: an A4 page raised off the white, sized so the moment lands without a shift.
   Under 1024 it stands above the rows at a phone's reading size. */
.tl__figure { order: -1; }
.tl__sheet {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: min(100%, 300px);
  aspect-ratio: 210 / 297;
  margin-inline: auto;
  padding: var(--space-5);
  border-radius: var(--r-card);
  background-color: var(--paper-50);
  color: var(--teal-700);
  box-shadow: var(--shadow-raised);
}
.tl__sheet > svg { display: block; inline-size: 100%; block-size: 100%; }
@media (min-width: 1024px) {
  .tl { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .tl__list { grid-column: 1 / span 7; }
  .tl__figure { grid-column: 9 / span 4; order: 0; align-self: stretch; }
  .tl__sheet {
    position: sticky;
    inset-block-start: calc(var(--head-h) + var(--space-6));
    inline-size: 100%;
    max-block-size: calc(100vh - var(--head-h) - 2 * var(--space-6));
    margin-inline: 0;
  }
}

/* ---- 2. origin: the display sentence on teal, then the order of work ---- */
.tl-origin__grid { display: grid; gap: var(--space-6) var(--gutter); }
.tl-origin__title { font-size: var(--t-display); line-height: 1.04; max-inline-size: 14em; }
.tl-origin__lead { color: var(--text); max-inline-size: 36rem; }
.tl-steps { border-block-start: 3px solid var(--text); }
.tl-steps__item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 4px var(--space-4);
  padding-block: var(--space-5);
  border-block-end: 1px solid var(--rule);
}
.tl-steps__num {
  grid-row: 1 / span 2;
  font-family: var(--face-display);
  font-size: 2.25rem;
  line-height: 1;
  color: var(--mark);
  font-variant-numeric: tabular-nums;
}
.tl-steps__name { font-size: var(--t-h3); line-height: 1.25; }
.tl-steps__how { color: var(--text-2); }
.tl-origin__close { margin-block-start: var(--space-5); font-weight: 700; font-size: var(--t-lead); line-height: 1.5; }
@media (min-width: 1100px) {
  .tl-origin__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .tl-origin__title { grid-column: 1 / -1; }
  .tl-origin__lead { grid-column: 1 / span 5; }
  .tl-origin__method { grid-column: 7 / span 6; }
}

/* ---- 3. FAQ lead under the held heading -------------------------------- */
.tl-faq__lead { margin-block-start: var(--space-4); font-size: var(--t-body); line-height: var(--lh-text); }