/* Iconography */
.k-icon {
  display: block;
  flex: none;
  width: 24px;
  height: 24px;
  color: currentColor;
  /* Override shared svg fills; symbol marks retain their explicit fills. */
  fill: none;
}
.k-icon--24 { width: 24px; height: 24px; }
.k-icon--32 { width: 32px; height: 32px; }
.k-icon--48 { width: 48px; height: 48px; }
[aria-current]:not([aria-current="false"]) > .k-icon,
.k-row--current > .k-icon { color: var(--color-accent-2, currentColor); }

/* The Build square */
.k-icon.k-mark--build,
#k-icon-build > rect { color: var(--color-route); }

/* The person stop route */
#k-icon-person-stop > path { stroke: var(--color-route); }

/* Person squares intentionally stay in ink. The accent never marks a person. */
#k-icon-people > rect[fill="currentColor"],
#k-icon-monthly-note > rect[fill="currentColor"],
#k-icon-person-stop > rect[fill="currentColor"],
#k-icon-checkpoint > rect[fill="currentColor"],
#k-icon-larger-organisations > rect[fill="currentColor"],
#k-icon-no-certification > rect[fill="currentColor"] {
  color: var(--color-text-primary);
}

/* The sprite */
.k-icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Iconography */
.i-page { width: calc(100% - 96px); max-width: var(--grid-1440-content-max); }
.i-page a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.i-page a:focus-visible { outline: 1.5px solid var(--color-focus-ring); outline-offset: 4px; }
.i-density { display: flex; gap: 24px; }
.i-intro { padding-block: 96px 64px; }
.i-intro h1 { margin-top: 0; }
.i-index { display: flex; flex-wrap: wrap; gap: 16px 32px; max-width: 1000px; margin-top: 40px; }
.i-index a { font-size: 16px; line-height: 24px; }
.i-section { margin-bottom: 64px; padding-top: 0; border-top: 0; box-shadow: inset 0 1.5px 0 var(--color-line-structure); }
.i-heading, .i-row { display: grid; grid-template-columns: 24px 202px minmax(0, 1fr) 64px 64px 80px; column-gap: 24px; align-items: center; }
.i-heading { min-height: 88px; }
.i-heading h2 { grid-column: 1 / 4; font: 400 28px/32px var(--p-font-family-display); }
.i-heading > span { text-align: center; font-size: 12px; line-height: 16px; color: var(--color-text-secondary); }
.i-row { min-height: 96px; padding-block: 20px; box-shadow: inset 0 1px 0 var(--color-line-construction); break-inside: avoid; }
.i-name { font-size: 16px; line-height: 24px; }
.i-meaning { font-size: 16px; line-height: 24px; color: var(--color-text-secondary); }
.i-size { display: flex; align-items: center; justify-content: center; min-height: 48px; }
@media (max-width: 1100px) {
  .i-heading, .i-row { grid-template-columns: 24px 170px minmax(0, 1fr) 48px 48px 64px; column-gap: 16px; }
}
@media (max-width: 767px) {
  .i-page { width: auto; max-width: none; margin-inline: 0; padding-inline: 20px; }
  .i-intro { padding-block: 48px 40px; }
  .i-intro h1 { font-size: 38px; line-height: 44px; }
  .i-index { gap: 12px 24px; margin-top: 32px; }
  .i-heading { grid-template-columns: minmax(0, 1fr) 32px 40px 48px; column-gap: 12px; min-height: 88px; }
  .i-heading h2 { grid-column: 1; font-size: 21px; line-height: 28px; }
  .i-row { grid-template-columns: 24px minmax(0,1fr) 32px 40px 48px; grid-template-rows: auto auto; gap: 12px; min-height: 128px; padding-block: 20px; }
  .i-placement { grid-column: 1; grid-row: 1; }
  .i-name { grid-column: 2; grid-row: 1; overflow-wrap: anywhere; }
  .i-meaning { grid-column: 1 / -1; grid-row: 2; }
  .i-size { grid-row: 1; }
  .i-section { margin-bottom: 48px; }
}