/* kanban.html: the glasses character is triage's (assets/speck/triage.css + triage.js).
 * This file holds only kanban's layout overrides, loaded after triage.css.
 *
 * Wide (>= 720 px): the character keeps triage's sticky right-hand lane in every
 * numbered section, so nothing may run into that lane. A sticky element is held
 * by its whole .wrap, not by the grid rows it spans, so a full-width block would
 * scroll straight under it. The .wide blocks (phone mocks, columns, the fence)
 * therefore stay in the text column, and the phone mocks scale to its width.
 *
 * The hero is the one exception: the take player needs the full 1040 px row. Its
 * slot is not sticky there; it sits beside the heading and scrolls away with it
 * before the player reaches the top. */
@media (min-width:720px){
  .hero[data-speck-state]>.wrap>.tri-slot{grid-row:1 / span 3;position:relative;top:auto}
  .hero[data-speck-state]>.wrap>.wide{grid-column:1 / -1}
}

/* The two mock grids in the text column: two phones side by side, as large as the
   column allows, capped at 352 px. A mock's phone is its width minus 26 px (scrim
   padding and border) for a 386-unit phone, so --d follows the column. */
@media (min-width:881px){
  .mocks--snap,.mocks--pair{container-type:inline-size;grid-template-columns:repeat(2,minmax(0,352px));column-gap:28px}
  .mocks--snap .mock,.mocks--pair .mock,.mock-stack{width:min(352px,calc((100cqw - 28px) / 2))}
  .mocks--snap .bp,.mocks--pair .bp{--d:calc((min(352px,(100cqw - 28px) / 2) - 26px) / 386)}
}