/* styles/sections/tool-table.css
 * The live tools table: what you bring, the tool, what comes back (lead, numbered sections, delivery
 * line) and its Run it link. A list of rows; each value carries its label as text. M stacks each row
 * with the mono labels above the values; from D the labels are visually hidden and the aria-hidden
 * header row draws them once over four columns. Geometry is the Tools frames (YXS1e 390, hOy4y 1440,
 * f0K9R 1920). Lines sit on whole pixels, as Pencil draws them. */
@layer sections {
  /* The band that holds the table and the roadmap: 48 apart on M, 80 from D; section-sm below. */
  .tool-catalog {
    padding-bottom: var(--section-sm);
  }

  .tool-table {
    --tool-cols: minmax(0, 220fr) minmax(0, 330fr) minmax(0, 550fr) minmax(0, 180fr);

    margin-bottom: var(--space-48);
  }

  /* Header row (D and W): 11/600 caps on a 1px ink rule, 14 above it. */
  .tool-table__head {
    display: none;
  }

  .tool-table__head,
  .tool-row__delivery {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    line-height: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ink-muted);
  }

  /* M: a row stacks its cells 14 apart, 32 above and 36 below, on a soft rule (none under the last). */
  .tool-row {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-block: var(--space-32) 36px;
  }

  /* Rules sit inside the box, as Pencil draws strokes: inset shadows, borders again in forced colors. */
  .tool-row:not(:last-child) {
    box-shadow: inset 0 -1px var(--line);
  }

  /* The frames break lines greedily (390: "…your closest / competitors.") */
  .tool-row p {
    margin: 0;
    text-wrap: wrap;
  }

  .tool-row__bring,
  .tool-row__tool,
  .tool-row__back {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }

  /* M inline labels: mono 10, tracked 0.8, ink 55. */
  .tool-row__label {
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: 12px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--ink-55);
  }

  .tool-row__input {
    font-size: 15px;
    line-height: 21px;
    color: var(--ink-muted);
  }

  /* Tool name: h5 role (20, 24), h4 role on W (40). */
  .tool-row__name {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--t-h5-size);
    font-weight: 600;
    line-height: round(nearest, var(--t-h5-lh) * 1em, 1px);
    letter-spacing: var(--t-h5-ls);
    color: var(--ink);
    text-wrap: wrap;
  }

  .tool-row__lead {
    font-size: 16px;
    line-height: 24px;
    color: var(--ink);
  }

  /* Numbered sections: the muted indexed row (serif 17) under a soft rule, 12 between index and
     title on M (16 from D), 27px lines on M (24 from D). */
  .tool-row__sections {
    margin: 0;
    padding: 0;
    list-style: none;
    box-shadow: inset 0 1px var(--line);
  }

  /* The muted row's rule is inside its 9px pad, as the frames draw it. */
  .tool-row__section {
    column-gap: var(--space-12);
    padding-block: 9px 8px;
  }

  .tool-row__section-title {
    font-size: 17px;
    line-height: 27px;
  }

  .tool-row__meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }

  .tool-row__disclaimer {
    font-size: 12px;
    line-height: round(nearest, 1.45em, 1px);
    color: var(--ink-muted);
  }

  /* Run it: the fern arrow link at the row's end, 5 down, in the frames' Run Link wrapper (CTv7N,
     xm2Nw, mTZjL): a 1px fern rule under label and arrow, 3 below the 18px link, the rule inside that
     pad as Pencil draws strokes. The link's own states (chip, arrow) are the actions board's. */
  .tool-row__action {
    display: flex;
    justify-content: flex-end;
    padding-top: 5px;
  }

  .tool-row__run {
    display: inline-flex;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--fern);
  }

  /* D: four columns (220, 330, 550, 180 at 1280, as fractions below it); the labels move to the
     header row; the output stacks 16 apart. */
  @media (min-width: 900px) {
    .tool-table {
      margin-bottom: var(--space-80);
    }

    .tool-table__head {
      display: grid;
      grid-template-columns: var(--tool-cols);
      padding-bottom: 14px;
      box-shadow: inset 0 -1px var(--ink);
    }

    .tool-row {
      display: grid;
      grid-template-columns: var(--tool-cols);
      align-items: start;
      gap: 0;
    }

    .tool-row__label {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }

    .tool-row__bring {
      padding: 6px var(--space-40) 0 0;
    }

    .tool-row__back {
      gap: var(--space-16);
      padding: var(--space-4) var(--space-40) 0 0;
    }

    .tool-row__section {
      column-gap: var(--space-16);
    }

    .tool-row__section-title {
      line-height: 24px;
    }
  }

  /* W: 340, 560, 640, 140 at 1680; the name is the h4 role (40) with 40 clear at its end. */
  @media (min-width: 1680px) {
    .tool-table {
      --tool-cols: minmax(0, 340fr) minmax(0, 560fr) minmax(0, 640fr) minmax(0, 140fr);
    }

    .tool-row__tool {
      padding-right: var(--space-40);
    }

    .tool-row__name {
      font-size: var(--t-h4-size);
      line-height: round(nearest, var(--t-h4-lh) * 1em, 1px);
      letter-spacing: var(--t-h4-ls);
    }
  }

  @media (forced-colors: active) {
    .tool-table__head,
    .tool-row:not(:last-child) {
      box-shadow: none;
      border-bottom: 1px solid;
    }

    .tool-row__sections {
      box-shadow: none;
      border-top: 1px solid;
    }
  }
}