/* kranium.so deltas on the shared site.css (Score's 2026-11-13 kranium.so
   site spec). site.css stays byte-identical across kranium.co/, kranium.ai/
   and kranium.so/; only what is new on kranium.so lives here. Every value is
   a GL-003 token or a GL-008 reserved literal, except the icon-tile corner
   (spec §10), which is Insekt's own 112/512 ratio, not a family token. */

/* kranium.so is a child: on its dark neutral surfaces the focus ring and
   glyphs take --field-so, its text-safe dark colour (GL-003 §2.5, §2.6;
   5.78 on dark n0). Links stay n5. */
.property-so .surface--dark {
  --surface-focus: var(--field-so);
  --surface-glyph: var(--field-so);
}

/* ------------------------------------------------------- product icons */
/* Spec §10. The files are unaltered; the container clips them. The tile
   keeps its square while loading or if the file fails, so nothing shifts
   and only the surface shows (empty alt: no broken-image text). */
.app-icon {
  display: block;
  flex: none;
  width: var(--app-icon-size);
  height: var(--app-icon-size);
  border-radius: 21.875%;
  overflow: hidden;
}

.app-icon img {
  display: block;
  width: 100%;
  height: 100%;
}

.app-icon--row { --app-icon-size: var(--space-xl); }
.app-icon--object { --app-icon-size: var(--space-6xl); }

@media (max-width: 767px) {
  .app-icon--object { --app-icon-size: var(--space-5xl); }
}

/* ------------------------------------------------------ product index */
/* With the role column empty (SO-C3 default), the tag takes the role's
   line when the row stacks, so no empty line opens up. */
@media (max-width: 767px) {
  .index__tag { grid-row: 2; }
}

/* -------------------------------------------------- product sections */
/* Body and icon share the body grid. bp-wide: body columns 1-6, icon
   right-aligned to column 12, level with the body's first line.
   bp-medium: body 1-8. bp-narrow and bp-compact: icon first, left, then
   --space-2xl, then the body. */
.product__body {
  align-items: start;
  row-gap: var(--space-2xl);
}

.product__body > .product__text { grid-column: 1 / span 6; grid-row: 1; }
.product__body > .product__object { grid-column: 7 / -1; grid-row: 1; justify-self: end; }

@media (max-width: 991px) {
  .product__body > .product__text { grid-column: 1 / span 8; }
  .product__body > .product__object { grid-column: 9 / -1; }
}

@media (max-width: 767px) {
  .product__body > .product__object { grid-column: 1 / -1; grid-row: 1; justify-self: start; }
  .product__body > .product__text { grid-column: 1 / -1; grid-row: 2; }
}

/* bp-compact: the tag drops beneath the (absent) links, left-aligned. */
@media (max-width: 479px) {
  .product .bottom-row > .tag:only-child { margin-left: 0; }
}

/* ------------------------------------------------------------- footer */
/* Group 3 (legal) is withheld until kranium.co's policies name kranium.so
   (spec §3 block 8, M2). Its slot keeps the column lines; when stacked it
   takes no space. */
@media (max-width: 479px) {
  .footer__withheld { display: none; }
}