/* Time machine and model portfolios (pipeline/pages/timemachine.py, js/timemachine.js).
   Builds on the «Яркий справочник» classes of style.css: .card, .sentence + .dd,
   .result, .big/.mid, .pill, .ico, .chips/.seg, .btn. */

/* calculator: a sentence whose blanks are the inputs */
.tm-form { margin: 22px 0 0; display: grid; gap: 14px; }
.tm-sentence { margin: 0; }
.tm-sentence .dd { padding: 0 10px; }
.tm-sentence .dd > span { color: var(--muted); }
.tm-sentence input, .tm-sentence select { font: inherit; color: var(--ink); background: transparent; border: 0; padding: 2px 0; margin: 0; cursor: pointer; }
.tm-sentence input { width: 7.5ch; cursor: text; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.tm-sentence input::-webkit-outer-spin-button, .tm-sentence input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tm-sentence select + select { margin-left: 4px; }
.tm-sentence .dd:focus-within { box-shadow: 0 0 0 2px var(--accent); }
.tm-sentence input:focus, .tm-sentence select:focus { outline: none; }
.tm-sentence option { font: 500 15px var(--font); }
.tm-assets { justify-self: start; }
.tm-chip { display: inline-flex; align-items: center; gap: 7px; }
.ico.tm-xs { width: 20px; height: 20px; border-radius: 6px; font-size: 7px; box-shadow: none; }
th .ico.tm-xs { margin-right: 8px; vertical-align: -5px; }
.tm-res { display: contents; }
.tm-form .result { margin-top: 4px; align-items: center; }
.tm-form .result .pill { align-self: center; }
.tm-chip:focus-visible, .tm-form .btn:focus-visible, .tm-tools button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* results */
.tm-headline { margin: 30px 0 12px; color: var(--ink-2); max-width: 80ch; }
.tm-headline b { color: var(--ink); }
.tm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 16px; margin: 0 0 16px; }
.tm-card { display: grid; gap: 8px; align-content: start; }
.tm-card .mid { margin-top: 4px; }
.tm-card.is-na { opacity: 0.6; }
.tm-chart-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 0 8px 10px; }
.tm-chart-head .legend { margin: 0; }
.tm-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.tm-chart > .legend { padding: 0 8px 4px; }
.tm-chart .legend svg { display: inline-block; width: 22px; height: 10px; }
.tm-sw { width: 22px; height: 10px; flex: none; vertical-align: middle; }
th .tm-sw { margin-right: 8px; }
.tm-plot { min-height: 300px; }
.tm-error { padding: 24px 12px; margin: 0; }
.tm-table { margin: 18px 0 0; }
th[scope="row"] { font-weight: 600; color: var(--ink); }
.tm-sub { display: block; font-size: 11px; font-weight: 500; line-height: 1.3; color: var(--muted); }
td.tm-na { color: var(--muted); text-align: left; }
tbody tr.tm-this { background: var(--accent-soft); }
.tm-years-table td a { color: inherit; text-decoration-color: var(--axis); }
.tm-years-table td a:hover { color: var(--accent-ink); }
.tm-years-table thead th { white-space: nowrap; }

/* ready answers and the portfolio teaser */
.tm-groups { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); align-items: start; }
.tm-years { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px 12px; font-size: 14px; }
.tm-years a { font-weight: 600; }
.tm-years .num { color: var(--muted); font-size: 13px; }
.tm-teaser { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.tm-teaser p { margin: 0; flex: 1 1 360px; color: var(--ink-2); }

/* scenario and portfolio pages */
.hero .ico.l { align-self: center; }
.tm-stats { margin: 18px 0; }
.tm-cta { margin: 24px 0 0; }
.tm-why p { margin: 0 0 12px; }
.tm-more p { margin: 0 0 8px; color: var(--ink-2); }

@media (max-width: 640px) {
  .tm-sentence { line-height: 2.1; }
  .tm-form .result .btn { margin-left: 0; }
}