/* ==========================================================================
   Calls & messages · what you can do
   ==========================================================================
   A small table, and small on purpose: five things you can do, each said in
   one sentence. It is drawn the way the number-choice board below it is drawn
   — hairlines that dissolve before the edges, one axis between the columns,
   the page's mint mark opening every line — so the two tables of this page
   read as one family.

   Nothing here is boxed. The only surfaces on this page are the two option
   plates further down, because they are the choice being offered; a table is
   data, and data sits on the open page.

   Loaded by the page shell after shared/Lanes.css, which owns the mint mark
   each line opens with and the hairline they are all drawn with.
   ========================================================================== */

.feat-capabilities {
  --cap-gap: clamp(1.25rem, 3vw, 2.75rem);
}

/* The title is authored as two clauses, with the comma as its primary break.
   It speaks at the page's full volume, which is why the head gets the whole
   container back in the page's own tuning sheet (../../PageTuning.css).
   Long clauses then wrap naturally inside that widest useful measure. */
.feat-capabilities .feat-title > span {
  display: block;
}

/* Centred under a centred head, the lede drops the family's justified setting
   — a short centred paragraph justified would open rivers — and the
   hyphenation that came with it. */
.feat-capabilities__lede {
  max-width: 56ch;
  text-align: center;
  hyphens: manual;
}

/* --- The table --------------------------------------------------------------
   Two tracks: what you do, then what that means. Each row borrows them through
   `subgrid`, which is what lets a row own its hairline and its axis segment
   while its two cells stay on the table's columns. */
.feat-cap-table {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
  width: min(100%, 880px);
  margin-inline: auto;
}

.feat-cap-row {
  position: relative;
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  gap: var(--cap-gap);
  align-items: center;
  padding: clamp(0.95rem, 1.6vw, 1.25rem) 0;
}

/* Rules between rows only — the table opens and closes in the page, never on a
   line, and each rule dissolves before the outer edges like every other
   hairline on this page. */
.feat-cap-row + .feat-cap-row::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--cm-line) 14%,
    var(--cm-line) 86%,
    transparent
  );
}

/* The table's axis, drawn exactly halfway across the gap, row by row — the
   same line the board draws between its two columns further down. */
.feat-cap-row__label::after {
  content: '';
  position: absolute;
  top: 0.55rem;
  bottom: 0.55rem;
  left: calc(100% + var(--cap-gap) / 2);
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent,
    var(--cm-line) 26%,
    var(--cm-line) 74%,
    transparent
  );
}

/* --- Rows -------------------------------------------------------------------
   The thing you do, at full ink, opened by the mark that says it is included —
   the page's mint "handled in the app", the same glyph the board uses. */
.feat-cap-row__label {
  position: relative;
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
  margin: 0;
  color: var(--feat-text);
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  font-weight: 600;
  letter-spacing: -0.016em;
  line-height: 1.35;
  text-wrap: pretty;
}

.feat-cap-row__label .feat-state-tag__mark {
  flex: none;
  /* Baseline-aligned with the first line of the label, not with its box. */
  translate: 0 0.1rem;
  color: rgb(var(--tag-rgb));
}

.feat-cap-row__detail {
  margin: 0;
  color: var(--feat-muted);
  font-size: 0.97rem;
  line-height: 1.55;
  text-wrap: pretty;
}

/* --- Closing note ------------------------------------------------------------ */

.feat-capabilities__note {
  max-width: 60ch;
  margin: clamp(1.8rem, 2.8vw, 2.4rem) auto 0;
  color: var(--feat-muted);
  font-size: 0.95rem;
  line-height: 1.65;
  text-align: center;
  text-wrap: pretty;
}

/* --- Folded table -------------------------------------------------------------
   Two columns are one too many on a phone: what you do stands on its own line,
   and what it means follows under it. The axis goes with the gap it was drawn
   in, and the mark keeps opening the line. */
@media (max-width: 700px) {
  .feat-cap-table {
    grid-template-columns: minmax(0, 1fr);
  }

  .feat-cap-row {
    grid-template-columns: none;
    gap: 0.4rem;
    padding: clamp(1rem, 4vw, 1.3rem) 0;
  }

  .feat-cap-row__label::after {
    content: none;
  }

  /* The detail lines up under the label's text, past the mark that opens it. */
  .feat-cap-row__detail {
    padding-left: calc(0.85rem + 0.7rem);
  }
}