/* The Model page (/model/, /ru/model/): the lead, the interactive chart, the explanation of its knobs and the scenario table.
   Tokens only; both themes come from tokens.css and tokens-dark.css. */
.mdl .mdl__head > * + *{margin-top:var(--ds-spacing-md)}
.mdl h1{font-size:clamp(32px,8vw,44px);line-height:1.1}
@media (min-width:768px){.mdl h1{font-size:var(--ds-font-size-2xl)}}
.mdl .mdl__body > * + *{margin-top:var(--ds-spacing-md)}
.mdl .mdl__body > h3{margin-top:var(--ds-spacing-xl);font-size:var(--ds-font-size-lg)}
.mdl .mdl__body p,.mdl .mdl__body li{overflow-wrap:anywhere}
.mdl .mdl__body td,.mdl .mdl__body th{overflow-wrap:break-word}
.mdl .mdl__table td.nw{overflow-wrap:normal;white-space:nowrap}
.mdl .mdl__body a:not(.btn){color:var(--ds-text-link)}
.mdl .mdl__lead{font-size:var(--ds-font-size-md);line-height:1.4}
.mdl .mdl-lead{max-width:var(--ds-size-measure-text)}
.mdl .mdl-lead > * + *{margin-top:var(--ds-spacing-sm)}
.mdl .mdl-lead .mdl__lead{font-size:var(--ds-font-size-lg)}

.mdl .mdl__list{display:grid;gap:var(--ds-spacing-sm);padding:0;margin-block:var(--ds-spacing-sm)}
.mdl ul.mdl__list{list-style:none}
.mdl ul.mdl__list > li{position:relative;padding-inline-start:var(--ds-spacing-lg)}
.mdl ul.mdl__list > li::before{content:"";position:absolute;inset-inline-start:var(--ds-spacing-xs);inset-block-start:.7em;inline-size:var(--ds-spacing-xs);block-size:var(--ds-spacing-xs);background:currentColor}

.mdl .mdl__tw{overflow-x:auto;border:1px solid var(--ds-border-default);background:var(--ds-bg-surface)}
.mdl .mdl__table{border-collapse:collapse;inline-size:100%;min-inline-size:34em;font-size:var(--ds-type-caption-size);line-height:1.4}
.mdl .mdl__table th,.mdl .mdl__table td{padding:var(--ds-spacing-sm) var(--ds-spacing-md);border-bottom:1px solid var(--ds-border-default);vertical-align:top}
.mdl .mdl__table th{font-weight:var(--ds-font-weight-semibold);color:var(--ds-text-secondary);background:var(--ds-bg-muted);letter-spacing:.04em;text-align:start;white-space:normal;vertical-align:bottom}
.mdl .mdl__table tbody tr:last-child td{border-bottom:0}
.mdl .a-right{text-align:end;font-variant-numeric:tabular-nums}

.mdl .mdl-sec{scroll-margin-top:var(--ds-spacing-xl);margin-top:var(--ds-spacing-3xl)}
.mdl .mdl-sec > h2{font-size:var(--ds-font-size-xl);line-height:1.15}
.mdl .mdl-sec > .mdl__body{margin-top:var(--ds-spacing-lg)}
.mdl .mdl-sec .mdl__body > p,.mdl .mdl-sec .mdl__body > ul.mdl__list{max-width:var(--ds-size-measure-text)}

/* components.css uses .ic for an icon box (fixed size); the chart host carries the same class, so its size is reset here */
.mdl .mdl-chart.ic{inline-size:auto;block-size:auto;margin-bottom:0}
.mdl .mdl-chart{padding:var(--ds-spacing-md);background:var(--ds-bg-surface);border:1px solid var(--ds-border-default);min-inline-size:0}
@media (min-width:768px){.mdl .mdl-chart{padding:var(--ds-spacing-lg)}}