/* ── AI assistants, the MCP connector: the public site's rules for it ─────────────────
   A stylesheet of its own, linked by views/partials/mk_head.eta only on the pages that use it
   (/pricing, /features and /features/ai-assistants, the `aiCss` the routes pass) and only
   while the connector is public (plans.ts MCP_PUBLIC). The reason it is not in marketing.css,
   beside the rules it extends: that file's content hash is in the <link> of every public
   page (src/web/assets.ts), so a single rule added to it would change every page's bytes in
   the off and private modes too, where the site has to be exactly what it was before the
   connector existed. Once MCP_MODE=on is the only mode, this can move into marketing.css.

   It loads after marketing.css, so where a rule here and one there have the same
   specificity, this one wins: that is what the grid overrides below rely on. */

/* /pricing, the two cards: a ninth row. The shared tracks are twelve for the eight rows
   ("the two cards are ONE grid" in marketing.css), so the ninth needs a thirteenth track and a
   row list spanning nine. Only where the subgrid layout is in force: stacked on a phone,
   and in a browser without subgrid, the cards are plain columns and need nothing. */
@media (min-width: 821px) {
  @supports (grid-template-rows: subgrid) {
    .mk-plans--ai { grid-template-rows: repeat(13, auto); }
    .mk-plans--ai .mk-spec { grid-row: span 9; }
  }
}
/* What paying changes, four of them: two by two from 1000px, icon beside the text, instead
   of three columns with the fourth stranded on a row of its own. Below 1000px the base
   rules already give each one a full row. */
@media (min-width: 1000px) {
  .mk-diffs--4 > li { flex-basis: calc((100% - var(--gx)) / 2); flex-direction: row; gap: 1rem; }
  .mk-diffs--4 p { max-width: 60ch; }
}
/* /features: five jobs instead of four. The row of in-page links holds four at 60rem; five
   in English are just past it, and wrapped four and one, so the row gets a little more room.
   Longer languages still wrap, three and two, which reads as balanced. */
.feat-jump { max-width: 64rem; }
/* On a phone the links are two columns (marketing.css), so the fifth sat alone under the
   first; it takes the whole last row instead. And a label that needs two lines breaks where a
   reader would: greedy wrapping split «Розкласти дані по-своєму» after its hyphen, leaving
   «своєму» alone on the second line. */
@media (max-width: 560px) {
  .feat-jump > a:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .feat-jump a span { text-wrap: balance; }
}
/* A paid-only feature says so on its card, as a plain line in the plan colour. Not a pill:
   the site has none, and a badge on one card of fourteen reads as "new" or "sale". */
.pr-feat p.pr-feat-paid, .mk-card p.feat-paid { margin-top: .35rem; font-size: .82rem; font-weight: 650; color: var(--plum); line-height: 1.4; }

/* The drawn conversation on /features/ai-assistants (views/partials/fx/ai-hero.eta). A chat
   in the plainest form that still reads as one: the question on the right, the answer on
   the left, and between them the one line that is Clode's part, the request. The label
   that came back with the figures is set apart in the answer, with the plan colour's
   rule down its side, because it is the point of the drawing. */
.fxa-chat { margin: 0; min-width: 0; }
.fxa-win {
  display: grid; gap: .7rem; min-width: 0; font-size: .92rem; line-height: 1.5;
  border: 1px solid var(--mk-line); border-radius: 18px; background: var(--surface);
  padding: clamp(.9rem, 2.4vw, 1.35rem); box-shadow: var(--sh-sm);
}
.fxa-msg { min-width: 0; padding: .65rem .85rem .75rem; border-radius: 14px; }
.fxa-msg p { margin: 0; color: var(--ink); }
.fxa-msg.is-you { justify-self: end; max-width: 88%; background: var(--tint); border: 1px solid var(--tint-line); border-bottom-right-radius: 5px; }
.fxa-msg.is-asst { justify-self: stretch; background: var(--surface-2); border: 1px solid var(--mk-line); border-bottom-left-radius: 5px; }
.fxa-who { display: block; margin-bottom: .15rem; font-size: .76rem; font-weight: 650; color: var(--mute); }
.fxa-call { justify-self: center; display: flex; align-items: center; gap: .4rem; margin: 0; max-width: 100%;
  font-size: .8rem; color: var(--mk-ink-soft); text-align: center; }
.fxa-call svg { flex: none; color: var(--plum); }
.fxa-tbl { width: 100%; border-collapse: collapse; margin: .55rem 0 .1rem; font-size: .85rem; }
.fxa-tbl th { padding: .3rem .45rem; text-align: left; font-size: .76rem; font-weight: 600; color: var(--mute); border-bottom: 1px solid var(--mk-line); }
.fxa-tbl td { padding: .38rem .45rem; color: var(--ink); border-bottom: 1px solid var(--mk-line); vertical-align: top; }
.fxa-tbl tbody tr:last-child td { border-bottom: 0; }
.fxa-tbl .n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fxa-tbl td.is-was { color: var(--mute); }
.fxa-url { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; overflow-wrap: anywhere; }
.fxa-meta { margin-top: .7rem; padding: .6rem .75rem .65rem; border-radius: 10px; background: var(--surface);
  border: 1px solid var(--tint-line); border-left: 3px solid var(--plum); }
.fxa-meta-h { margin: 0 0 .3rem; font-size: .8rem; font-weight: 700; color: var(--plum); }
.fxa-meta dl { margin: 0; display: grid; gap: .22rem; }
.fxa-meta dl > div { display: grid; grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); gap: .6rem; }
.fxa-meta dt { font-size: .8rem; font-weight: 600; color: var(--ink); }
.fxa-meta dd { margin: 0; font-size: .8rem; color: var(--mk-ink-soft); }
.fxa-cap { margin: .65rem .25rem 0; font-size: .82rem; line-height: 1.5; color: var(--mute); }
@media (max-width: 440px) {
  .fxa-msg.is-you { max-width: 94%; }
  /* Two lines of a centred sentence leave the arrow stranded at the far left; start-aligned,
     the arrow sits at the head of the line it introduces. */
  .fxa-call { justify-self: start; align-items: flex-start; text-align: left; padding: 0 .2rem; }
  .fxa-call svg { margin-top: .2em; }
  .fxa-meta dl > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .fxa-meta dl > div + div { margin-top: .2rem; }
}