/* Free planning tools (template-parts/components/planning-tools.php): the homepage engineering
   section and the Robotics page. Loaded on those two routes only. Colour tokens come from the
   host route (.ax-home in home.css, .ax-rb-tools in robotics.css); type and motion from foundation.css.

   Tool cards read as small applications: a header with a technical figure in a ruled plot
   cell, the three-step method, and a ruled footer holding a real control. No sample results. */
/* The block is the size container: columns and the narrow card depend on the room it gets. */
.ax-desk__tools { container: ax-tools / inline-size; }
.ax-desk__tools-head { align-items: baseline; display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; justify-content: space-between; margin-block-end: 1rem; }
.ax-desk__subhead { color: var(--ax-slate); font-family: var(--ax-sans); font-size: .9375rem; font-weight: 700; letter-spacing: .01em; line-height: 1.4; margin: 0; }
.ax-desk__more { margin: 0; }
.ax-desk__more a { color: var(--ax-ink); font-size: .9375rem; font-weight: 700; text-decoration-color: var(--ax-signal); text-decoration-thickness: 2px; }

/* Side by side, both cards share six row tracks (eyebrow, title, description, flow, action and
   a spare; narrow cards put the figure first). Placement is by line number: named areas do
   not map onto subgridded rows. Side by side, the titles, descriptions and flows start level whatever the copy length
   or language. Nothing is reserved or clipped: a stacked card is only as tall as its own text. */
.ax-desk__tool-list { display: grid; gap: .9rem; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.ax-desk__tool-list > li { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; }
.ax-tool-card { background: var(--ax-surface); border: 1px solid var(--ax-tile-line); border-radius: var(--ax-r-panel); color: var(--ax-ink); column-gap: clamp(1rem, 2.5vw, 2rem); display: grid; grid-row: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: subgrid; padding: clamp(1.25rem, 2.4vw, 1.75rem) clamp(1.25rem, 2.4vw, 1.75rem) 0; row-gap: 0; text-decoration: none; transition: border-color var(--ax-fast) var(--ax-ease); }
.ax-tool-card__figure { align-self: start; background-color: var(--ax-card); background-image: linear-gradient(color-mix(in srgb, var(--ax-slate) 9%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--ax-slate) 9%, transparent) 1px, transparent 1px); background-position: -1px -1px; background-size: 12px 12px; border: 1px solid var(--ax-tile-line); border-radius: var(--ax-r-control); color: var(--ax-slate); grid-area: 1 / 2 / 4 / 3; inline-size: clamp(7.5rem, 11cqi, 9.5rem); padding: .5rem; }
.ax-tool-card__figure svg { block-size: auto; display: block; fill: none; inline-size: 100%; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.ax-tool-card__fig-axis { stroke: color-mix(in srgb, var(--ax-ink) 45%, transparent); stroke-width: 1.2; }
.ax-tool-card__fig-guide { stroke-dasharray: 3 3; stroke-width: 1.1; }
.ax-tool-card__fig-mark { fill: var(--ax-signal); stroke: var(--ax-signal); }
.ax-tool-card__eyebrow { color: var(--ax-slate); font-size: .8125rem; font-weight: 700; grid-area: 1 / 1; letter-spacing: .02em; line-height: 1.5; }
.ax-tool-card__title { font-family: var(--ax-serif); font-size: clamp(1.45rem, 2.2vw, 1.9rem); font-weight: 700; grid-area: 2 / 1; line-height: 1.15; margin-block: .35rem .4rem; }
.ax-tool-card__desc { color: var(--ax-ink-soft); font-size: .9375rem; grid-area: 3 / 1; line-height: 1.5; max-inline-size: 42ch; }
.ax-tool-card__flow { align-items: center; align-self: start; display: flex; flex-wrap: wrap; gap: 1.6rem; grid-area: 4 / 1 / 5 / -1; margin-block: 1.35rem 1.5rem; }
.ax-tool-card__node { background: var(--ax-card); border: 1px solid var(--ax-tile-line); border-radius: 2px; color: var(--ax-slate); font-family: var(--ax-mono); font-size: .75rem; font-weight: 600; line-height: 1.3; padding: .45rem .7rem; position: relative; }
.ax-tool-card__node:not(:last-child)::after { background: color-mix(in srgb, var(--ax-slate) 60%, transparent); content: ""; height: 1px; inset-block-start: 50%; inset-inline-start: calc(100% + .3rem); position: absolute; width: 1rem; }
.ax-tool-card__node:not(:last-child)::before { border-block-start: 1px solid color-mix(in srgb, var(--ax-slate) 60%, transparent); border-inline-end: 1px solid color-mix(in srgb, var(--ax-slate) 60%, transparent); content: ""; height: .4rem; inset-block-start: calc(50% - .2rem); inset-inline-start: calc(100% + 1.05rem); position: absolute; transform: rotate(45deg); width: .4rem; }
.ax-tool-card__node--result { background: var(--ax-surface); border-color: var(--ax-signal); color: var(--ax-ink); }
.ax-tool-card__action { align-items: center; align-self: end; border-top: 1px solid var(--ax-tile-line); display: flex; font-size: .9375rem; font-weight: 700; gap: .55rem; grid-area: 5 / 1 / 6 / -1; margin-inline: calc(-1 * clamp(1.25rem, 2.4vw, 1.75rem)); padding: .9rem clamp(1.25rem, 2.4vw, 1.75rem); transition: background-color var(--ax-fast) var(--ax-ease); }
.ax-tool-card__action .ax-arrow { block-size: 1.15em; color: var(--ax-action); flex: none; inline-size: 1.15em; }
.ax-tool-card:hover, .ax-tool-card:focus-visible { border-color: var(--ax-tile-line-hover); }
.ax-tool-card:hover .ax-tool-card__action, .ax-tool-card:focus-visible .ax-tool-card__action { background: var(--ax-action); color: var(--ax-paper); }
.ax-tool-card:hover .ax-tool-card__action .ax-arrow, .ax-tool-card:focus-visible .ax-tool-card__action .ax-arrow { color: var(--ax-paper); }
.ax-tool-card:hover .ax-tool-card__title, .ax-tool-card:focus-visible .ax-tool-card__title { text-decoration: underline; text-decoration-color: var(--ax-signal); text-decoration-thickness: .06em; text-underline-offset: .18em; }

/* Narrow card: one column. The plot cell leads, centred and large enough to read; the method
   becomes a centred vertical pipeline of equal-width steps, its connectors on the node axis.
   Eyebrow, title and description stay left-aligned for reading. */
/* About 26rem of card content: a lone card under 29rem, or a pair under 60rem. */
@container ax-tools (width <= 29rem) or ((width > 46rem) and (width <= 60rem)) {
  .ax-tool-card { grid-template-columns: minmax(0, 1fr); }
  .ax-tool-card__eyebrow { grid-area: 2 / 1; }
  .ax-tool-card__title { grid-area: 3 / 1; }
  .ax-tool-card__desc { grid-area: 4 / 1; }
  .ax-tool-card__flow { grid-area: 5 / 1; }
  .ax-tool-card__action { grid-area: 6 / 1; }
  .ax-tool-card__figure { box-sizing: border-box; grid-area: 1 / 1; inline-size: min(100%, 15rem); justify-self: center; margin-block-end: 1.25rem; }
  .ax-tool-card__flow { align-items: center; flex-direction: column; flex-wrap: nowrap; gap: .8rem; margin-block: 1.15rem 1.35rem; }
  .ax-tool-card__node { max-inline-size: 100%; min-inline-size: min(100%, 12.5rem); padding-block: .4rem; text-align: center; }
  .ax-tool-card__node:not(:last-child)::after { height: .4rem; inset-block-start: calc(100% + .2rem); inset-inline-start: 50%; width: 1px; }
  .ax-tool-card__node:not(:last-child)::before { inset-block-start: calc(100% + .25rem); inset-inline-start: calc(50% - .2rem); transform: rotate(135deg); }
}

@container ax-tools (width <= 46rem) {
  .ax-desk__tool-list { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: no-preference) {
  .ax-tool-card__action .ax-arrow { transition: transform var(--ax-normal) var(--ax-ease); }
  .ax-tool-card:hover .ax-tool-card__action .ax-arrow, .ax-tool-card:focus-visible .ax-tool-card__action .ax-arrow { transform: translateX(3px); }
}