/* The section «Модели» drawn a look's way (modelstrial.go): the stream of the catalog, and with it
   the section's head, the ranking, the comparison and a model's own page. The looks that were tried and not taken —
   the front, the labs, the ready choices, the chart of price and strength — left the sheet on
   2026-09-29; the repository keeps them under the tag looks-archive-2026-09-29. A look to try
   brings a sheet of its own. The type, the colours and the marks are the site's. */

.mt-front[hidden], .mt-found[hidden], .legal-foot[hidden] { display: none; }

/* The head of the section: its name and its three pages in a line, as «Главное» names its
   periods; the catalog's search at the far end of the line, under it on a phone. The field is a
   quiet plate with a lens, not a box. */
.mt-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem 1.5rem; margin-top: clamp(.9rem, 2.5vw, 1.75rem); }
.mt-bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 clamp(.6rem, 2vw, 1.1rem); min-width: 0; }
.mt-bar h1 { font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.1; }
.mt-tabs { display: flex; flex: none; gap: .1rem; font: 400 .875rem/1 var(--mono); }
.mt-tabs .chip { padding: .5em .6em; }
.mt-top .mt-find { flex: 0 1 19rem; display: block; margin: 0; }
.mt-find .mfind, .mt-find .cmp-box { max-width: none; }
.mt-find .mfind::before, .mt-find .cmp-box::before { content: ""; position: absolute; z-index: 1; top: 50%; left: .7rem; width: 1rem; height: 1rem; margin-top: -.5rem; background: var(--muted); pointer-events: none;
  -webkit-mask: var(--mt-lens) center / contain no-repeat; mask: var(--mt-lens) center / contain no-repeat; }
.mt-find { --mt-lens: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E"); }
.mt-find .cmp-search { padding: .55rem 2.6rem .55rem 2.2rem; border: 0; border-radius: .5rem; background: color-mix(in srgb, var(--ink) 5%, var(--paper)); font-size: 1rem; }
.mt-find .cmp-search::placeholder { color: var(--muted); opacity: 1; }
.mt-find .cmp-search:focus { background: var(--paper); box-shadow: 0 0 0 2px var(--accent); }
@media (max-width: 46rem) {
  .mt-top .mt-find { flex-basis: 100%; }
}
/* A phone narrower than 390 points: the line holds with a smaller name and tighter pages. */
@media (max-width: 24.3rem) {
  .mt-bar { gap: 0 .5rem; }
  .mt-bar h1 { font-size: 1.375rem; }
  .mt-tabs { font-size: .8125rem; }
  .mt-tabs .chip { padding: .5em .45em; }
}

/* What the looks share: a block under a heading, a model's name with its mark, the line under it. */
.mt-block { margin-top: clamp(1.4rem, 3.5vw, 2.25rem); }
.mt-front > .mt-block:first-child { margin-top: clamp(1rem, 2.5vw, 1.5rem); }
.mt-head { position: static; }
.mt-head h2 { font: inherit; letter-spacing: inherit; }
.mt-name { font-weight: 600; line-height: 1.25; letter-spacing: -.015em; color: var(--headline); overflow-wrap: break-word; }
.mt-name:hover { color: var(--headline); }
.mt-name .avatar { width: 1.05em; margin-right: .4em; vertical-align: -.14em; border-radius: .25em; }
.mt-name .avatar.is-glyph { padding: .1rem; }
.mt-name .avatar-mono { font-size: .45em; }
.mt-name span { background-image: linear-gradient(var(--select), var(--select)); background-repeat: no-repeat; background-size: 0% 100%; transition: background-size .38s cubic-bezier(.2, .7, .2, 1); }
.mt-name:hover span, .mt-name:focus-visible span { background-size: 100% 100%; }
.mt-by { display: flex; flex-wrap: wrap; gap: .1rem .75rem; margin-top: .25rem; font: 400 .8125rem/1.4 var(--mono); color: var(--muted); }
.mt-labref { color: var(--ink-2); }
.mt-labref:hover { color: var(--accent); }
.mt-about { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin-top: .4rem; font-size: .9375rem; line-height: 1.5; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) {
  .mt-name span { transition: none; }
}

/* Lines: a date or a place, then a model. */
.mt-lines li { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 0 .7rem; align-items: baseline; padding-block: .6rem; border-bottom: 1px solid var(--rule); }
.mt-lines time, .mt-n { font: 400 .8125rem/1.4 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mt-n { color: var(--ink); }
.mt-lines .mt-name { font-size: 1rem; }
.mt-lines .mt-by { margin-top: .1rem; }

/* ——— Лента выходов: a month under a month, a line a model, the notable ones large ———
   A model's line names whose it is, its context and its prices, as the catalog writes them (owner,
   2026-09-29: «контекст 1 млн $0,15 / $0,47 - приписки такие»). On a phone they stand under the
   name. On a wide screen the context and the prices are two tight columns at the far end, and the
   maker stands by the name («Справа плотнее прижать контекст и цену, придумать куда убрать
   название лабораторий рядом которые»). */

.mt-front > .periods + .mt-block { margin-top: clamp(.5rem, 1.5vw, 1rem); }
.mt-stream > :last-child { border-bottom: 0; } /* the next month's rule follows */
.mt-row { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: 0 .8rem; align-items: baseline; padding-block: .6rem; border-bottom: 1px solid var(--rule); }
.mt-row > * { grid-column: 2; }
.mt-row > time { grid-column: 1; grid-row: 1; font: 400 .8125rem/1.4 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.mt-who { min-width: 0; line-height: 1.25; } /* the name sets the line, not the page's text */
.mt-who .mt-labref, .mt-who .mt-open { display: none; font: 400 .8125rem/1.4 var(--mono); white-space: nowrap; }
.mt-open { color: var(--muted); }
.mt-row .mt-name { font-size: 1rem; }
.mt-row > .mt-about { order: 1; }
.mt-row > .mt-by { order: 2; margin-top: .15rem; }
.mt-by span, .mt-by time { white-space: nowrap; }
.mt-epoch, .mt-window, .mt-price { font-variant-numeric: tabular-nums; }
.mt-row.is-big { padding-block: 1.05rem 1.15rem; }
.mt-row.is-big > time { color: var(--ink); }
.mt-row.is-big .mt-name { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.5rem); letter-spacing: -.025em; line-height: 1.15; }
.mt-row.is-big > .mt-by { margin-top: .45rem; }
@media (min-width: 62.01rem) {
  .mt-row { grid-template-columns: 2rem minmax(0, 1fr) auto 7rem; gap: 0 .9rem; }
  .mt-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .7rem; }
  .mt-who .mt-labref, .mt-who .mt-open { display: inline; }
  .mt-row > .mt-by, .mt-rate > .mt-by { display: contents; }
  :is(.mt-row, .mt-rate) > .mt-by :is(.mt-labref, .mt-open) { display: none; }
  :is(.mt-row, .mt-rate) .mt-window { grid-column: 3; grid-row: 1; text-align: right; }
  :is(.mt-row, .mt-rate) .mt-price { grid-column: 4; grid-row: 1; text-align: right; }
  .mt-row > .mt-about { grid-column: 2; grid-row: 2; }
  .mt-row .mt-epoch { grid-column: 3 / 5; grid-row: 2; margin-top: .45rem; text-align: right; }
}

/* ——— Рейтинг: a line a model, all alike (owner, 2026-09-29: «В рейтинге все одинаковые, без
   "раскрытия сильных" как в каталоге») — the place, the name, the index and the mark to compare;
   the context and the prices as in the stream ——— */

.mt .mhead-lead { max-width: 42rem; margin-top: .7rem; font: 400 .9375rem/1.5 var(--sans); color: var(--ink-2); }
.mt .periods { margin-top: .8rem; font-size: .875rem; }
.mt-rateform { --mt-cols: 2rem minmax(0, 1fr) 6.25rem 1.75rem; --mt-index: 3; --mt-mark: 4; }
.mt-ratehead { display: grid; grid-template-columns: var(--mt-cols); gap: 0 .8rem; margin-top: .5rem; padding-bottom: .55rem; border-bottom: 1px solid var(--ink); font: 400 .75rem/1.3 var(--mono); color: var(--muted); }
.mt-ratehead > :first-child { grid-column: 1 / 3; }
.mt-ratehead > :last-child { grid-column: var(--mt-index); }
.mt-rate { display: grid; grid-template-columns: var(--mt-cols); gap: 0 .8rem; align-items: baseline; padding-block: .6rem .65rem; border-bottom: 1px solid var(--rule); scroll-margin-top: 4rem; }
.mt-rating > :last-child { border-bottom: 0; }
.mt-rate[hidden], .mt-waits[hidden], .mt-waits li[hidden], .mt-ratenone[hidden] { display: none; } /* what the search leaves out */
.mt-ratenone { margin-top: 1.5rem; }
.mt-ratefind { position: relative; } /* the ranking's search: the same plate as the catalog's */
.mt-rate > .mt-n { grid-column: 1; grid-row: 1; font: 600 1rem/1.25 var(--sans); letter-spacing: -.02em; text-align: right; }
.mt-rate > .mt-who { grid-column: 2; grid-row: 1; }
.mt-rate .mt-name { font-size: 1rem; }
.mt-index { grid-column: var(--mt-index); grid-row: 1; font: 400 .875rem/1.4 var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.mt-index span { margin-left: .6em; font-size: .75rem; color: var(--muted); }
.mt-check { grid-column: var(--mt-mark); grid-row: 1; align-self: center; justify-self: end; display: flex; margin: -.45rem -.45rem -.45rem 0; padding: .45rem; cursor: pointer; }
.mt-check input { -webkit-appearance: none; appearance: none; display: grid; place-content: center; width: 1.2rem; height: 1.2rem; margin: 0; border: 1.5px solid color-mix(in srgb, var(--muted) 60%, var(--paper)); border-radius: .3rem; background: var(--paper); cursor: pointer; }
.mt-check input::before { content: ""; width: .7rem; height: .7rem; background: var(--paper); clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 18%, 84% 4%, 38% 66%); transform: scale(0); }
.mt-check input:hover { border-color: var(--accent); }
.mt-check input:checked { border-color: var(--accent); background: var(--accent); }
.mt-check input:checked::before { transform: scale(1); }
.mt-check input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mt-rate > .mt-by { grid-column: 2 / -1; grid-row: 2; margin-top: .15rem; }
.mt-rate:target { background: var(--select); }
.mt-rate:has(input:checked) { background: color-mix(in srgb, var(--select) 55%, transparent); }
/* The bar comes up with the first mark. */
.mt-rateform:not(:has(input:checked)) .compare-bar { display: none; }
.mt .compare-bar { z-index: 2; margin-top: 0; padding-block: .7rem; }
.mt .compare-bar button, .mt .compare-pick button { border-radius: .5rem; }
@media (min-width: 62.01rem) {
  .mt-rateform { --mt-cols: 2rem minmax(0, 1fr) auto 7rem 6.25rem 1.75rem; --mt-index: 5; --mt-mark: 6; }
}
@media (max-width: 46rem) {
  .mt-rateform { --mt-cols: 2rem minmax(0, 1fr) 3rem 1.75rem; }
  .mt-index span { display: none; }
}

/* ——— Сравнение: the field in the section's head, ready-made comparisons as lines, a table that
   holds two models on a phone ——— */

.mt-find.compare-pick { font-size: .875rem; }
.mt-find.compare-pick:has(.cmp-box) > :is(label, button) { display: none; }
.mt-find.compare-pick select { flex: 1 1 100%; margin-block: .35rem; }
.mt-starts li { border-bottom: 1px solid var(--rule); }
.mt-starts li:last-child { border-bottom: 0; }
.mt-starts a { display: block; padding-block: .7rem .8rem; }
.mt-startname { display: block; font-size: 1rem; font-weight: 600; line-height: 1.25; letter-spacing: -.015em; color: var(--headline); }
.mt-starts a:hover .mt-startname { color: var(--accent); }
.mt-startlist { display: block; margin-top: .2rem; font: 400 .8125rem/1.45 var(--mono); color: var(--muted); }
.mt .cmp-chips { gap: .3rem; margin-top: .9rem; padding-block: .4rem; }
.mt .cmp-chip { border: 0; border-radius: .35rem; background: var(--select); font: 400 .875rem/1 var(--mono); }
.mt .cmp-chip-name { padding: .5rem .1rem .5rem .6rem; }
.mt .cmp-chip-x { margin-right: 0; padding: 0 .45rem; border-radius: 0 .35rem .35rem 0; }
.mt .cmp-chip-clear { background: none; }
.mt .cmp-chip-clear a { padding: .5rem .6rem; }
.mt .compare-scroll { margin-top: .5rem; }
.mt .compare { min-width: 0; margin-top: 0; }
.mt .compare.cmp-n3 { min-width: 38rem; }
.mt .compare.cmp-n4 { min-width: 46rem; }
.mt .compare .cmp-label { width: 10rem; }
.mt .cmp-group { padding: 2rem 0 .6rem !important; border-bottom: 1px solid var(--ink); font: 600 1.0625rem/1.2 var(--sans) !important; letter-spacing: -.01em; text-transform: none; color: var(--ink); }
@media (max-width: 46rem) {
  .mt .compare .cmp-label { width: 6.5rem; font-size: .8125rem; }
  .mt .compare th, .mt .compare td { padding-right: .6rem; }
  .mt .compare td { font-size: .8125rem; }
  .mt .compare.cmp-n3 { min-width: 30rem; }
  .mt .compare.cmp-n4 { min-width: 38rem; }
  .mt .cmp-name { font-size: .9375rem; }
  .mt .cmp-model { padding-right: 1.6rem !important; }
  .mt .cmp-remove { right: 0; }
  .mt .cmp-place { display: block; }
  .mt .cmp-place .mi-number { display: block; font-size: 1.75rem; }
  .mt .cmp-place .mi-place { font-size: .75rem; }
}

/* What the search found: the catalog's rows, a line of the date and the lab, a name, two lines of
   what the model is for. */
.mt-found .item.model { grid-template-columns: minmax(0, 1fr); padding-block: .8rem .9rem; }
.mt-found .model .item-meta { flex-direction: row; padding-top: 0; margin-bottom: .25rem; }
.mt-found .model-name { font-size: 1.125rem; }
.mt-found .model-about { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: .9375rem; }
.mt-found .model-news { display: none; }

/* ——— Страница модели (modelcard.go): the head is drawn by the rules of a company's page
   (tag-trials.css), a neighbour's line and the field by the rules above, a story's line by the
   glossary's; here is what is the page's own — the two columns, the specs, a line a value, Epoch's
   place and the benchmarks (owner, 2026-09-29: «переделай страницы самой модели под новый
   стиль») ——— */

.mp { --wrap: 74rem; }
.mp .tt-head h1 { overflow-wrap: anywhere; }
.mp-when { white-space: nowrap; }
.mp .tt-head .tt-links a { white-space: normal; }
/* The page's sheet comes before the sheet of a company's page, whose rules draw the head: what
   the page changes in them is said with the page's own class in front. */
.mp .mp-compare { flex: 1 1 14rem; max-width: 22rem; font-size: .875rem; }

/* Two columns: what the model is and the news about it, the specs and the neighbours beside. */
.mp-cols { display: grid; grid-template-columns: minmax(0, 1fr) 21.5rem; gap: 0 clamp(2rem, 4vw, 3.75rem); align-items: start; margin-top: clamp(.2rem, 1vw, .6rem); }
.mp-main, .mp-side { min-width: 0; }
.mp-cols .mt-block { margin-top: clamp(1.5rem, 3vw, 2.1rem); }
.mp-main > .mt-block:first-child, .mp-side > .mt-block:first-child { margin-top: clamp(.6rem, 2vw, 1.1rem); }
.mp-cols .day-date { margin-left: auto; }
.mp-cols a.day-date:hover { color: var(--accent); }
.mp-credit { margin-top: clamp(1.75rem, 4vw, 2.5rem); }

/* The specs: a line a value; a word that opens its line stays a word. */
.mp-specs { margin: 0; }
.mp-specs div { display: grid; grid-template-columns: 9.75rem minmax(0, 1fr); gap: 0 .8rem; align-items: baseline; padding-block: .55rem .6rem; border-bottom: 1px solid var(--rule); }
.mp-specs div:last-child { border-bottom: 0; }
.mp-specs dt { font: 400 .8125rem/1.4 var(--mono); color: var(--muted); }
.mp-specs dd a { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: .2em; }
.mp-specs dd a:hover { color: var(--accent); text-decoration-color: currentColor; }
.mp-family .mt-lines li { grid-template-columns: 4.1rem minmax(0, 1fr); }
.mp-near .mt-lines li { grid-template-columns: 2.6rem minmax(0, 1fr); }
.mp-specs dd { margin: 0; font-size: .9375rem; font-weight: 500; line-height: 1.35; font-variant-numeric: tabular-nums; color: var(--headline); overflow-wrap: anywhere; }

/* Epoch's place: the place is the figure, the index behind it the detail. */
.mp-place { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .9rem; padding-block: .9rem .75rem; border-bottom: 1px solid var(--rule); font: 400 .8125rem/1.4 var(--mono); font-variant-numeric: tabular-nums; color: var(--muted); }
.mp-place b { margin-right: -.35rem; font: 700 clamp(2rem, 1.6rem + 1.6vw, 2.75rem)/1 var(--sans); letter-spacing: -.04em; color: var(--ink); }
.mp-place:last-child { border-bottom: 0; }

/* A benchmark: its name and the result, the bar under them; on a wide screen all in a line, with
   the effort the result was reached at. */
.mp-epoch, .mp-news h2 { scroll-margin-top: 1rem; }
.mp-bench li, .mp-boards li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem .8rem; align-items: baseline; padding-block: .5rem .6rem; border-bottom: 1px solid var(--rule); }
.mp-bench li:last-child, .mp-boards li:last-child { border-bottom: 0; }
.mp-test, .mp-board { grid-column: 1; grid-row: 1; min-width: 0; font-size: .9375rem; font-weight: 500; line-height: 1.3; color: var(--headline); }
a.mp-board:hover { color: var(--accent); }
.mp-score { grid-column: 2; grid-row: 1; font: 400 .875rem/1.4 var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; color: var(--ink); }
.mp-bar { grid-column: 1 / -1; grid-row: 2; height: .3rem; overflow: hidden; border-radius: .15rem; background: color-mix(in srgb, var(--ink) 8%, var(--paper)); }
.mp-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.mp-effort { display: none; font: 400 .8125rem/1.4 var(--mono); color: var(--muted); }
.mp-boards .mp-effort { display: block; grid-column: 1 / -1; grid-row: 2; }
.mp-voice .models-credit { margin-top: .6rem; }
@media (min-width: 46.01rem) {
  .mp-bench li { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) 4rem 7.5rem; gap: 0 1rem; align-items: center; }
  .mp-bench .mp-bar { grid-column: 2; grid-row: 1; }
  .mp-bench .mp-score { grid-column: 3; }
  .mp-bench .mp-effort { display: block; grid-column: 4; grid-row: 1; }
  .mp-boards li { grid-template-columns: minmax(0, 1fr) 7rem minmax(0, 15rem); gap: 0 1rem; }
  .mp-boards .mp-score { text-align: left; }
  .mp-boards .mp-effort { grid-column: 3; grid-row: 1; }
}

/* What the model is: the site's own text, in the text's size. */
.mp-about p { max-width: 44rem; margin-top: .85rem; font-size: 1rem; line-height: 1.6; color: var(--ink); text-wrap: pretty; }
.mp-about .mp-from { margin-top: .9rem; font: 400 .8125rem/1.5 var(--mono); color: var(--muted); }
.mp .mp-from a { white-space: normal; }

/* A model just out, with nothing but its specs: they stand in the text's place, in two columns. */
.mp-cols.is-bare { grid-template-columns: minmax(0, 46rem); }
.mp-specs div { break-inside: avoid; }
@media (min-width: 46.01rem) {
  .is-bare .mp-specs { columns: 2; column-gap: clamp(1.75rem, 4vw, 3rem); }
}

/* A phone and a narrow window: a block under a block, the specs first — in two columns where the
   window has room for them. */
@media (min-width: 46.01rem) and (max-width: 62rem) {
  .mp-specs { columns: 2; column-gap: clamp(1.75rem, 4vw, 3rem); }
}
@media (max-width: 62rem) {
  .mp-cols { display: flex; flex-direction: column; align-items: stretch; }
  .mp-main, .mp-side { display: contents; }
  .mp-cols .mt-block { order: 5; margin-top: clamp(1.4rem, 5vw, 1.9rem); }
  .mp-cols .mp-facts { order: 1; margin-top: clamp(.6rem, 2vw, 1.1rem); }
  .mp-cols .mp-about { order: 2; }
  .mp-cols .mp-epoch { order: 3; }
  .mp-cols .mp-voice { order: 4; }
  .mp-cols .mp-near { order: 5; }
  .mp-cols .mp-family { order: 6; }
  .mp-cols .mp-news { order: 7; }
  .mp .mp-compare { max-width: none; }
}