/* The comparison in detail (Hector, 2026-10-27): views/plans.xml draws it
   from controllers/plans.py (compare_values). Loaded after koeia-pages.css,
   which keeps the table itself (its card, hairlines and pinned first column
   on a phone); this file adds what the detail needs: a label row for each
   section, a line under every row's name, the areas over their apps, and
   values that may wrap. */

/* a section: the site's eyebrow, a little air above it */
.compare__table .compare__section th {
  padding-top: 34px;
  padding-bottom: 12px;
  text-align: left;
}
.compare__table thead + .compare__group .compare__section th { padding-top: 26px; }
.compare__section-t {
  font-size: var(--text-2xs, 11px);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nix-text-soft);
}

/* a row: its name, and under it what it means in practice */
.compare__table .compare__row { vertical-align: top; }
.compare__row-t { display: block; }
.compare__row-d {
  display: block;
  margin-top: 4px;
  max-width: 34em;
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.45;
  color: var(--nix-text-soft);
}
.compare__table .compare__group td { vertical-align: top; padding-top: 16px; }
.compare__table .compare__val { display: inline-block; max-width: 13em; line-height: 1.35; }

/* the apps: each area over its apps, the apps a step lighter */
.compare__table .compare__area th {
  padding-top: 24px;
  padding-bottom: 10px;
  text-align: left;
}
.compare__area-t {
  display: block;
  font-size: 15px;
  font-weight: 400;
  color: var(--nix-text);
}
.compare__table .compare__app .compare__row,
.compare__table .compare__app td { padding-top: 10px; padding-bottom: 10px; }
.compare__table .compare__app td { padding-top: 12px; }
.compare__app .compare__row-t { font-size: 14px; }
.compare__app .compare__row-d { margin-top: 2px; }

/* a phone: the labels that span the table stay in view as it scrolls */
@media (max-width: 760px) {
  .compare__section-t,
  .compare__area-t,
  .compare__area .compare__row-d {
    position: sticky;
    left: 10px;
    display: block;
    width: max-content;
    max-width: calc(100vw - 72px);
    white-space: normal;
  }
  .compare__row-d { font-size: 11.5px; }
  .compare__table .compare__val { font-size: 12px; }
}