/** C0142 +link · C0143 +four+link — Solutions (/use-cases) page rules only.

   Loaded after inner-craft.css and nowhere else. Four things live here:

   1. The four-across cell field. The contract's field is three per row; this
      page has FOUR peer workflows, which three-up would leave as three plus an
      orphan. The ladder below is the contract's own ladder re-keyed from 3 to 4,
      using the contract's own values, restated at each tier only because the
      contract's `:nth-child(3n+1)` pattern lands on the wrong cells at four up.
   2. A cell arrow that no longer orphans beside a wrapped title.
   3. Two repairs to the reused `.spec-row-link`: its surface tint is dropped
      (C0142 answers a hover with its rule and its ordinal, not with a fill), and
      its 48px arrow gutter is restored (it was outranked by `.dgrid-row`).
   4. The air the held statement owes the content below it.

   No new colours, no new fonts, no new timings. Every value is a v2 token or a
   number already declared in inner-craft.css.

   NOT here on purpose: sub-nav gutters and sub-nav landing offsets. The contract
   now owns both (`.subnav .shell`, `.sec[id]{scroll-margin-top}`), so this page
   uses them as shipped. */

/* ---------- C0143 +four: four peer cells, one continuous band --------------
   Measured: at four up the paragraph column holds a steady 225px from 1101px
   upward, and 443px or wider once it is two across. Dropping to two at the
   contract's own 1000px would have left a 179px measure at 1024, which is not a
   readable column, so the drop happens at 1100px instead. */

.cfield--four{grid-template-columns:repeat(4,minmax(0,1fr))}
.cfield--four>*:not(:first-child){padding-left:28px;border-left:1px solid var(--line)}
.cfield--four>*:first-child{padding-left:0;border-left:0}

@media (max-width:1100px){
  .cfield--four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cfield--four>*:nth-child(odd){padding-left:0;border-left:0}
  .cfield--four>*:nth-child(even){padding-left:28px;border-left:1px solid var(--line)}
  /* the second row needs the hairline the contract already uses between
     stacked cells, or the two rows read as a gap rather than a structure */
  .cfield--four>*:nth-child(n+3){border-top:1px solid var(--line);padding-top:26px}
}

/* One column. Restated with the contract's own values because the two blocks
   above outrank the contract's single-column rules on source order. */
@media (max-width:700px){
  .cfield--four{grid-template-columns:minmax(0,1fr)}
  .cfield--four>*,
  .cfield--four>*:not(:first-child),
  .cfield--four>*:nth-child(odd),
  .cfield--four>*:nth-child(even),
  .cfield--four>*:nth-child(n+3){
    /* the bottom step is the arrow's room; it is set here rather than in the
       arrow block because these list selectors outrank a bare `>*` */
    padding:22px 0 56px;border-left:0;border-top:1px solid var(--line);
  }
  .cfield--four>*:first-child{border-top:0;padding-top:0}
}

/* Restated last: the `border-left` shorthands above carry a colour, so without
   this the contract's own divider-lights-on-hover would be outranked and the
   cell would lose one of its four hover signals. Same token, same behaviour. */
.cfield--four>*:hover{border-left-color:var(--blue-line)}

/* ---------- C0143 +link: the arrow moves to the cell foot ------------------
   The site's linked-card arrow sits inline after the title. In a four-across
   field the titles wrap, and on `Scheduling and Appointment Management` the
   arrow was orphaned onto a line of its own. At the foot of the cell it cannot
   orphan, and because grid items stretch, the four arrows land on one shared
   baseline — which also gives the row the floor the reference cell row has.
   Same glyph, same accent, same 3px travel on the same token duration: only the
   position changed. */

.cfield--four>*{position:relative;padding-bottom:60px}
.cfield--four .card-link h3::after{content:none}
.cfield--four .card-link::after{
  content:"\2192";position:absolute;left:28px;bottom:26px;
  font-size:20px;line-height:1;color:var(--blue);
  transition:transform var(--t-base) var(--ease);
}
.cfield--four .card-link:hover::after{transform:translateX(3px)}
.cfield--four>*:first-child.card-link::after{left:0}
@media (max-width:1100px){
  .cfield--four>*:nth-child(odd).card-link::after{left:0}
}
@media (max-width:700px){
  .cfield--four .card-link::after{left:0;bottom:22px}
}

/* ---------- C0142 +link: keep the drafting hover, drop the inherited tint ---
   `.spec-row-link` is reused for its persistent arrow, link reset and focus
   ring, but not for its surface tint. C0142 answers a hover with the row's own
   bottom rule and its own ordinal warming to accent: no fill anywhere in the
   register. These four rows are the only linked instances of the component, and
   a component that tints on one page and rules on two is a defect, not a
   variant. (The original reason recorded here, that the tint would stop short
   of a numeral sitting out in the margin, retired with the margin numeral when
   C0142 moved its counter above the row title.) */

.dgrid .spec-row-link:hover{background:transparent}

/* `.spec-row-link` reserves 48px on the right for its arrow, but `.dgrid-row`
   sets `padding:26px 0` from a later-loaded file at equal specificity, so the
   reservation was lost and the arrow printed over the last line of the copy at
   narrow widths. This restores the row's original right-hand gutter — same
   48px the live page has always used. */
.dgrid .spec-row-link{padding-right:48px}

/* ---------- C0144 spacing ---------------------------------------------------
   The "its type must not animate" clause needs nothing here: `site-craft.js`
   now skips any heading inside `[data-band-hold]`, verified — `#pick-h` is the
   one `h2.h2` on this page that is never split.

   The held statement replaces `.sec-head`, so it carries the same air down to
   the content beneath it that `.sec-head` did (v2.css: 56px, 40px below 1080). */

.band-hold{margin-bottom:56px}
@media (max-width:1080px){.band-hold{margin-bottom:40px}}
