/* Блок «Диаграммы и площадь» (уроки 84–91): рисунки и виджеты. Префикс: ar */

/* ---------- рисунки ---------- */
.fig .ar-g { fill: none; stroke: var(--line); stroke-width: 1; }
.fig .ar-g.ar-gm { stroke: var(--ink-2); stroke-opacity: .5; }
.fig .ar-ax { fill: none; stroke: currentColor; stroke-width: 2.2; }
.fig .ar-bar { fill: var(--ink); fill-opacity: .8; stroke: var(--ink); stroke-width: 1.6; }
.fig .ar-bar.hi { fill: var(--red); fill-opacity: .75; stroke: var(--red); }
.fig text.ar-t { font-size: 11px; font-weight: 400; fill: var(--ink-2); }
.fig text.ar-c { font-size: 12.5px; font-weight: 700; }
.fig text.ar-v { font-size: 12px; font-weight: 700; }
.fig text.ar-q { font-size: 24px; font-weight: 700; fill: var(--red); }
.fig.ar-mini text.ar-t { font-size: 9.5px; }
.fig.ar-mini text.ar-c { font-size: 10.5px; }
.fig.ar-mini text.ar-q { font-size: 16px; }
.fig.ar-mini .ar-bar { stroke-width: 1.2; }

.ar-cap { display: block; margin-bottom: .2em; }
.ar-q { display: block; margin-top: .25em; }
.ar-tab { margin: .5em 0 .3em; }
.ar-tab th, .ar-tab td { text-align: center; }

/* варианты-рисунки в задании на выбор */
.choices:has(.ar-opt) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice:has(.ar-opt) { padding: .4em .5em; }
.ar-opt { display: block; }
.ar-opt .fig { margin: 0 auto; width: 100%; max-width: 230px; }

/* ---------- виджеты ---------- */
.ar-wrow { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; margin: 0 0 8px; }
.ar-wrow .winput.sm { width: 7ch; }
.ar-warn { color: var(--warn); background: var(--warn-bg); border-radius: 8px; padding: 6px 10px; }

/* ---------- площадь: клетки, прямоугольники, составные фигуры ---------- */
.fig .ar-cell { fill: var(--ink); fill-opacity: .2; stroke: var(--ink-2); stroke-width: 1.2; }
.fig .ar-cell.alt { fill-opacity: .1; }
.fig .ar-cell.hi { fill: var(--red); fill-opacity: .38; }
.fig .ar-cell.ar-empty { fill: none; stroke: var(--line); }
.fig .ar-out { fill: none; stroke: var(--ink); stroke-width: 2.4; }
.fig text.ar-t2 { font-size: 13px; font-weight: 700; }
.fig text.ar-small { font-size: 11.5px; }
.fig text.ar-vx { font-size: 16px; font-weight: 700; }
.fig .ar-ruler { fill: var(--soft); stroke: var(--ink); stroke-width: 1.6; }
.fig .ar-tick { stroke: var(--ink); stroke-width: 1.4; fill: none; }
.fig .ar-cap { stroke: var(--ink); stroke-width: 2.4; fill: none; }
.fig .ar-fill { stroke: none; }
.fig .ar-fill.p1 { fill: var(--red); fill-opacity: .2; }
.fig .ar-fill.p2 { fill: var(--green); fill-opacity: .25; }
.fig .ar-line { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linejoin: round; }
.fig .ar-poly { stroke-linejoin: round; }
.fig .ar-hole { fill: var(--paper); stroke: var(--ink-2); stroke-width: 1.8; stroke-dasharray: 5 4; }
.fig .ar-dim { fill: none; stroke: var(--red); stroke-width: 1.6; }
.ar-pair { display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: flex-end; margin: .4em 0 .6em; }
.ar-pair figure { margin: 0; text-align: center; font-size: .9rem; color: var(--ink-2); }
.ar-pair .fig { margin: 0 auto; }
.ar-pair figcaption { font-weight: 700; }

/* виджеты: закрашивание клеток, укладка рядов, прямоугольник */
.ar-paint svg { display: block; max-width: 100%; height: auto; margin: 0 0 8px; touch-action: manipulation; }
.ar-pc { fill: var(--surface); stroke: var(--line); stroke-width: 1.2; cursor: pointer; }
.ar-pc.on { fill: var(--ink); fill-opacity: .55; stroke: var(--ink); }
.ar-wbtns { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.ar-wbtns .btn { font-size: .85rem; padding: .5em .9em; }
.ar-big { font-size: 1.15rem; }
.ar-wout svg { margin: 0 0 6px; }