/* AI Math Results: a list of titles and one page for each. The content uses the same frame
   as the masthead. On a wide screen each page has a text column and a margin column for its
   one figure. The shared theme owns tokens, type and math. */
.ai-math-shell { width: var(--site-frame-width, min(74rem, calc(100% - 5rem))); margin: 0 auto; padding: clamp(1.25rem, 3vw, 2rem) 0 3.5rem; }

/* Landing list. */
.ai-math-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: 0 2.5rem; margin: 0; padding: 0; list-style: none; }
.ai-math-list li { border-bottom: 1px solid var(--line); }
.ai-math-result { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; padding: .85rem 0; color: var(--ink); font: 700 1.2rem/1.3 var(--display); letter-spacing: -.01em; text-decoration: none; }
.ai-math-result .ui-link-arrow { color: var(--muted); }
.ai-math-result:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.ai-math-result:hover .ui-link-arrow { color: currentColor; }

/* Explainer. */
.ai-math-article { --side: 22rem; --side-gap: 3rem; max-width: none; font-size: 1.0625rem; line-height: 1.6; }
.ai-math-article h1 { margin: 0 0 1rem; font-size: clamp(1.75rem, 3.4vw, 2.3rem); font-weight: 400; line-height: 1.15; letter-spacing: -.01em; }
.ai-math-article h1 .ui-math-char { font-size: 1.04em; }
.ai-math-article p { margin: 0 0 .95rem; }
.ai-math-article dfn { font-style: italic; }
.ai-math-nobreak { white-space: nowrap; }

/* The margin figure sits in the text flow on a narrow screen. */
.ai-math-side { margin: 1.25rem 0 1.4rem; font-size: 1rem; }
.ai-math-side svg { display: block; width: 100%; max-width: 24rem; height: auto; max-height: 19rem; }
.ai-math-side figcaption { margin-top: .5rem; color: var(--muted-strong); font: var(--text-ui)/1.5 var(--ui, var(--serif)); }
.ai-math-side .table-scroll { border-top: 1px solid var(--line-strong); }
.ai-math-side .ui-table { width: 100%; font-family: var(--ui, var(--serif)); }
/* A table in the text column, for a worked example. */
.ai-math-article > .table-scroll { margin: 0 0 .95rem; }

/* On a wide screen the title spans both columns and the figure starts beside the first
   paragraph. Text stays in the first column, whatever its position in the source. A page
   can scroll past the figure, so the figure stays in view beside the text. */
@media (min-width: 60rem) {
  .ai-math-article { display: grid; grid-template-columns: minmax(0, 1fr) var(--side); column-gap: var(--side-gap); }
  .ai-math-article > * { grid-column: 1; min-width: 0; }
  .ai-math-article > h1 { grid-column: 1 / -1; }
  .ai-math-article > .ai-math-side { grid-column: 2; grid-row: 2 / span 40; align-self: start; margin: .3rem 0 1rem; }
}
@media (min-width: 60rem) and (min-height: 40rem) {
  .ai-math-article > .ai-math-side { position: sticky; top: 1.25rem; }
}
@media (min-width: 76rem) {
  .ai-math-article { --side: 24rem; }
}

/* Figures: calculated SVG on theme tokens. */
.fig-line, .fig-line-closed { fill: none; stroke: var(--ink); stroke-width: 1.25; }
.fig-guide { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.fig-guide-strong { fill: none; stroke: var(--muted); stroke-width: 1.2; }
.fig-accent { fill: none; stroke: var(--blue); stroke-width: 1.7; }
.fig-dash { fill: none; stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 4; }
.fig-open { fill: var(--paper); stroke: var(--blue); stroke-width: 1.5; }
.fig-ball { fill: var(--surface-blue); stroke: var(--blue); stroke-width: 1.2; }
.fig-dot { fill: var(--ink); }
.fig-grid { fill: var(--line-strong); }
.fig-dot-accent { fill: var(--blue); }
.fig-solid { fill: var(--muted); stroke: none; }
.fig-band { fill: var(--surface-blue); stroke: none; }
.fig-cell-plus { fill: var(--ink); }
.fig-cell-minus { fill: var(--surface); stroke: var(--line); stroke-width: .5; }
.fig-node { fill: var(--paper); stroke: var(--ink); stroke-width: 1.2; }
.fig-label { fill: var(--ink); font: 13px var(--ui, var(--serif)); }
.fig-note { fill: var(--muted-strong); font: 12.5px var(--ui, var(--serif)); paint-order: stroke; stroke: var(--paper); stroke-width: 3px; }
.fig-note-accent { fill: var(--blue); font: 13px var(--ui, var(--serif)); paint-order: stroke; stroke: var(--paper); stroke-width: 3px; }
.fig-node-label { fill: var(--ink); font: 11.5px var(--mono); }
.fig-math { fill: var(--ink); font: italic 14px var(--math, var(--serif)); }

@media (pointer: coarse) {
  .ai-math-result { align-items: center; min-height: 2.75rem; }
}
@media print {
  .ai-math-article { display: block; }
  .ai-math-article > .ai-math-side { position: static; margin: 1rem 0; }
  .ai-math-side svg { max-width: 22rem; }
}