/* «Скачать статью». Built from the home page vocabulary in style.css:
   .hero, .search-form, .search-input, .search-queries-list, .how-it-works,
   .steps, .search-status. Only what those do not cover lives here. */

/* Examples: identifiers only, in the same sage pills as the PubMed queries. */
.ft-examples { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 1rem; }
.ft-examples-label { font-size: 0.8125rem; color: var(--ink-light); }
.ft-examples .search-queries-list { justify-content: center; }
.ft-examples .search-queries-list a { color: inherit; text-decoration: none; }
.ft-examples .search-queries-list li { transition: background 0.15s; }
.ft-examples .search-queries-list li:hover,
.ft-examples .search-queries-list li:focus-within { background: var(--sage-bg); }
.ft-examples .search-queries-list a:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; border-radius: 100px; }

/* Result page: the form shrinks to a toolbar above the answer. */
.ft-page { padding: 1.5rem 0 3rem; }
.ft-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.75rem; }
.ft-form--compact { max-width: none; margin: 0; }
.ft-result { margin-top: 1.5rem; }

/* Live check: the Podtema onboarding step track, set vertically. A grey dot
   turns sage with a check when its source answers; the active one breathes. */
.ft-progress { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.875rem; }
.ft-pstep { display: grid; grid-template-columns: 1.25rem 1fr auto; align-items: center; column-gap: 0.75rem; color: var(--ink-muted); font-size: 0.9375rem; transition: color 0.25s ease; }
.ft-pdot {
  width: 1.25rem; height: 1.25rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--border); color: var(--surface);
  transition: background 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.ft-pdot svg { opacity: 0; transform: scale(0.4); transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.ft-pnote { font-size: 0.8125rem; color: var(--ink-light); }
.ft-pstep.is-active { color: var(--ink); }
.ft-pstep.is-active .ft-pdot { background: var(--sage-light); box-shadow: 0 0 0 0 rgba(27, 67, 50, 0.25); animation: ft-breathe 1.2s ease-out infinite; }
.ft-pstep.is-done { color: var(--ink); }
.ft-pstep.is-done .ft-pdot { background: var(--sage); }
.ft-pstep.is-done .ft-pdot svg { opacity: 1; transform: scale(1); }
.ft-pstep.is-error { color: var(--ink-light); }
.ft-pstep.is-error .ft-pdot { background: var(--ink-muted); }
.ft-pstep.is-skipped { opacity: 0.45; }
@keyframes ft-breathe { 0% { box-shadow: 0 0 0 0 rgba(27, 67, 50, 0.28); } 100% { box-shadow: 0 0 0 0.5rem rgba(27, 67, 50, 0); } }
/* Shown only if the script never takes over the list (blocked or failed). */
.ft-fallback { margin-top: 1.25rem; font-size: 0.875rem; opacity: 0; visibility: hidden; animation: ft-reveal 0s linear 20s forwards; }
.ft-fallback a { color: var(--sage); }
@keyframes ft-reveal { to { opacity: 1; visibility: visible; } }
.ft-result--live.is-ready { animation: ft-in 0.3s ease-out; }
@keyframes ft-in { from { opacity: 0; } to { opacity: 1; } }

.ft-message { padding: 1rem 1.25rem; background: var(--sage-bg); border-radius: var(--radius); }
.ft-article-title { font-weight: 600; line-height: 1.4; text-wrap: balance; }
.ft-article-meta { color: var(--ink-light); font-size: 0.8125rem; margin-top: 0.25rem; overflow-wrap: anywhere; }
.ft-article-links { font-size: 0.875rem; margin-top: 0.5rem; }
.ft-article-links a, .ft-todo a:not(.btn), .ft-block a:not(.btn) { color: var(--sage); text-underline-offset: 0.2em; }

.ft-headline { font-size: 1.375rem; font-weight: 600; line-height: 1.3; margin: 2rem 0 1rem; text-wrap: balance; }

.ft-block { margin-bottom: 2rem; }
.ft-block h3 { font-size: 1.0625rem; font-weight: 600; margin-bottom: 0.75rem; }
.ft-block p { margin-bottom: 0.75rem; max-width: 65ch; }
.ft-block--podtema { padding: 1.25rem; background: var(--sage-light); border-radius: var(--radius); }
.ft-hint { font-size: 0.8125rem; color: var(--ink-light); margin-top: 0.75rem; }
.ft-hint a { color: var(--sage); }
.ft-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Free copies: one card, one link (PubWiki rule: cards only link). */
.ft-copies { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.ft-copy {
  display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; row-gap: 0.25rem; align-items: center;
  padding: 1rem 1.25rem; min-height: 44px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--ink); text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ft-copy:hover { border-color: var(--sage); box-shadow: 0 2px 8px rgba(27, 67, 50, 0.08); }
.ft-copy:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }
.ft-copy-kind { font-weight: 600; grid-column: 1; }
.ft-copy-meta { grid-column: 1; font-size: 0.8125rem; color: var(--ink-light); overflow-wrap: anywhere; }
.ft-copy-note { grid-column: 1; font-size: 0.8125rem; color: var(--ink-light); }
.ft-copy-go { grid-column: 2; grid-row: 1 / span 3; font-size: 0.875rem; font-weight: 500; color: var(--sage); }

.ft-more { margin-bottom: 2rem; }
.ft-more summary { cursor: pointer; font-size: 1rem; font-weight: 600; min-height: 44px; display: flex; align-items: center; color: var(--ink); }
.ft-more summary:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; border-radius: var(--radius); }
.ft-more .ft-todo { margin-top: 0.25rem; }
.ft-dates, .ft-todo { padding-left: 1.25rem; max-width: 65ch; }
.ft-dates li, .ft-todo li { margin-bottom: 0.5rem; }


@media (max-width: 520px) {
  .search-form.ft-form { flex-direction: column; }
  .search-form.ft-form .btn-primary { width: 100%; min-height: 44px; }
  .search-form.ft-form .search-input { min-height: 44px; font-size: 1rem; }
  .ft-copy { grid-template-columns: 1fr; }
  .ft-copy-go { grid-column: 1; grid-row: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .ft-pstep.is-active .ft-pdot { animation: none; }
  .ft-pdot, .ft-pdot svg, .ft-pstep { transition: none; }
  .ft-result--live.is-ready { animation: none; }
}

/* Disclosure chevron for the folded block (flex summaries lose the native marker). */
.ft-more summary { list-style: none; gap: 0.5rem; }
.ft-more summary::-webkit-details-marker { display: none; }
.ft-more summary::after {
  content: ''; width: 0.4rem; height: 0.4rem; margin-top: -0.2rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform 0.15s ease, margin 0.15s ease;
}
.ft-more[open] summary::after { transform: rotate(225deg); margin-top: 0.2rem; }
@media (prefers-reduced-motion: reduce) { .ft-more summary::after { transition: none; } }

/* «Наша статистика»: one tall segmented bar (dataviz: part-to-whole at a
   glance, <= 6 parts), ordered best → none on one sage ramp; shares printed
   on the blocks, a names-only legend, then four figures by age. */
.ft-stats { padding: 2.5rem 0 1rem; border-top: 1px solid var(--border); margin-top: 1rem; }
.ft-stats h2 { font-size: 1.25rem; margin-bottom: 0.75rem; text-align: center; }
.ft-stats-lead { color: var(--ink-light); font-size: 0.875rem; line-height: 1.55; text-align: center; max-width: 520px; margin: 0 auto 1.5rem; }
.ft-bar { display: flex; gap: 2px; height: 28px; }
.ft-seg { display: flex; align-items: center; padding: 0 0.5rem; border-radius: 4px; min-width: 0; overflow: hidden; }
.ft-seg-pct { font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
.ft-seg--free { background: #1B4332; color: #fff; }
.ft-seg--rsl { background: #3F7A5F; color: #fff; }
.ft-seg--later { background: #8DB5A2; color: var(--ink); }
.ft-seg--none { background: #E3E7E4; color: var(--ink); }
.ft-legend { list-style: none; padding: 0; margin: 0.75rem 0 0; display: flex; flex-wrap: wrap; gap: 0.375rem 1.25rem; font-size: 0.8125rem; color: var(--ink-light); }
.ft-legend li { display: inline-flex; align-items: center; gap: 0.375rem; }
.ft-swatch { width: 0.75rem; height: 0.75rem; border-radius: 3px; display: inline-block; }
.ft-stats-note { font-size: 0.8125rem; color: var(--ink-light); margin-top: 0.75rem; }
.ft-stats-sub { font-size: 1rem; font-weight: 600; margin: 2rem 0 0.75rem; }
/* By age: one measure across five ages, so thin bars on a shared baseline,
   one sage hue, value at the end of each bar (no card per number). */
.ft-agebars { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.ft-agebar { display: grid; grid-template-columns: 5.5rem 1fr 2.75rem; align-items: center; column-gap: 0.75rem; font-size: 0.875rem; }
.ft-agebar-label { color: var(--ink-light); }
.ft-agebar-track { height: 10px; background: var(--border); border-radius: 0 4px 4px 0; overflow: hidden; }
.ft-agebar-fill { display: block; height: 100%; background: var(--sage); border-radius: 0 4px 4px 0; }
.ft-agebar-pct { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) {
  .ft-seg--narrow .ft-seg-pct { display: none; }
  .ft-agebar { grid-template-columns: 4.75rem 1fr 2.5rem; column-gap: 0.5rem; }
}

/* RSL how-to: a quiet numbered list under the buttons. */
.ft-howto { padding: 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); }
.ft-howto-steps { padding-left: 1.25rem; margin: 0; max-width: 65ch; }
.ft-howto-steps li { margin-bottom: 0.625rem; font-size: 0.9375rem; line-height: 1.5; }
.ft-howto-steps li:last-child { margin-bottom: 0; }

/* Author letter composer: Russian fields above an English letter. What the
   doctor still has to fill stands out in rust capitals; what we filled in
   gets a light sage tint so it is easy to check. */
.ft-author { margin-bottom: 0.75rem; }
.ft-letter-open { margin: 0.5rem 0 0; }
/* The composer opens as a modal: a centred sheet on desktop, full screen on phones. */
.ft-letter-dialog {
  width: min(640px, calc(100vw - 2rem)); max-height: calc(100dvh - 3rem); padding: 0; margin: auto;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--ink);
  box-shadow: 0 12px 40px rgba(31, 42, 55, 0.18); overscroll-behavior: contain;
}
.ft-letter-dialog::backdrop { background: rgba(31, 42, 55, 0.45); }
.ft-letter-dialog[open] { animation: ft-in 0.2s ease-out; }
.ft-letter-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 0.75rem 0.75rem 1.25rem; background: var(--surface); border-bottom: 1px solid var(--border); }
.ft-letter-head h3 { font-size: 1.0625rem; font-weight: 600; margin: 0; }
.ft-letter-close { width: 44px; height: 44px; border: 0; border-radius: var(--radius); background: transparent; color: var(--ink-light); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.ft-letter-close:hover { background: var(--sage-bg); color: var(--ink); }
.ft-letter-close:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }
.ft-letter-inner { padding: 1rem 1.25rem 1.25rem; }
.ft-letter-lead { font-size: 0.875rem; color: var(--ink-light); margin-bottom: 0.75rem; }
.ft-letter-form { display: grid; gap: 0.75rem; margin-bottom: 1rem; }
.ft-field { display: grid; gap: 0.25rem; }
.ft-field-label { font-size: 0.8125rem; font-weight: 600; }
.ft-field input { font: inherit; font-size: 1rem; min-height: 44px; padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--ink); }
.ft-field input:focus { outline: 2px solid var(--sage); outline-offset: 1px; border-color: var(--sage); }
.ft-field-hint { font-size: 0.75rem; color: var(--ink-light); }
.ft-field--date { max-width: 14rem; margin-bottom: 0.75rem; }
.ft-letter-status { font-size: 0.8125rem; color: var(--ink-light); align-self: center; }
.ft-letter-form .ft-actions { align-items: center; margin: 0; }
.ft-mail { display: grid; gap: 0.5rem; margin-bottom: 0.75rem; }
.ft-mail-row { display: grid; grid-template-columns: 3.5rem 1fr 44px; align-items: start; column-gap: 0.5rem; padding: 0.5rem 0.25rem 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.ft-mail-label { font-size: 0.8125rem; color: var(--ink-light); padding-top: 0.6rem; }
.ft-mail-value { font-size: 0.9375rem; line-height: 1.5; padding-top: 0.5rem; padding-bottom: 0.25rem; overflow-wrap: anywhere; min-width: 0; }
.ft-mail-to { font-weight: 600; }
.ft-mail-text { white-space: pre-wrap; font-size: 0.875rem; line-height: 1.55; }
.ft-copy-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: var(--radius); background: transparent; color: var(--ink-light); cursor: pointer; }
.ft-copy-btn:hover { background: var(--sage-bg); color: var(--sage); }
.ft-copy-btn:focus-visible { outline: 2px solid var(--sage); outline-offset: 1px; }
.ft-copy-btn .ft-ico-done { display: none; }
.ft-copy-btn.is-done { color: var(--sage); }
.ft-copy-btn.is-done .ft-ico-copy { display: none; }
.ft-copy-btn.is-done .ft-ico-done { display: block; }
.ft-letter-status.is-busy { display: inline-flex; align-items: center; gap: 0.5rem; }
.ft-letter-status.is-busy::before { content: ''; width: 14px; height: 14px; border: 2px solid var(--sage-light); border-top-color: var(--sage); border-radius: 50%; animation: ft-spin 0.8s linear infinite; }
@keyframes ft-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ft-letter-status.is-busy::before { animation-duration: 2s; } }
@media (max-width: 520px) { .ft-mail-row { grid-template-columns: 1fr 44px; } .ft-mail-label { grid-column: 1 / -1; padding-top: 0; } .ft-mail-value { padding-top: 0; } .ft-copy-btn { grid-row: 2; grid-column: 2; } }
.ft-blank { color: #B4441C; font-weight: 700; letter-spacing: 0.01em; }
.ft-filled { background: var(--sage-light); border-radius: 3px; padding: 0 0.15em; }
.ft-letter-sub { font-size: 0.9375rem; font-weight: 600; margin: 1.25rem 0 0.25rem; }
@media (max-width: 520px) {
  .ft-letter-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .ft-letter-inner { padding: 0.875rem 1rem 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { .ft-letter-dialog[open] { animation: none; } }