/* Витрина AUTERO: только /kalkulyator-shtrafov-pdd/. Подключается после journal-front-base.css.
   Цвета — токены --ds-* и --jf-*: тёмная тема собирается генератором build-dark-theme.py. */

.fc-hero { padding-top: 40px; padding-bottom: 120px; display: grid; gap: 18px; max-width: 900px; }

.fc-page [hidden] { display: none !important; }

.fc-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.fc-app-wrap { margin-top: -88px; position: relative; z-index: 1; }

.fc-app { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; background: #fff; border: 1px solid var(--ds-line); border-radius: var(--ds-r-lg); box-shadow: 0 24px 48px -24px rgba(0, 20, 10, .28); overflow: hidden; }

.fc-form { display: grid; align-content: start; gap: 22px; padding: 32px; }

.fc-field { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }

.fc-label { font-size: 15px; font-weight: 700; color: var(--jf-ink); padding: 0; }

.fc-input { width: 100%; height: 52px; padding: 0 16px; border: 1px solid var(--jf-field); border-radius: var(--ds-r-sm); background: #fff; color: var(--jf-ink); font: 400 17px/1.2 "Uber Move Text", Arial, sans-serif; transition: border-color .2s var(--jf-ease), box-shadow .2s var(--jf-ease); }

.fc-input:focus { outline: none; border-color: var(--jf-green); box-shadow: 0 0 0 3px rgba(27, 161, 76, .18); }

.fc-select { appearance: none; padding-right: 44px; background-image: linear-gradient(45deg, transparent 50%, var(--jf-muted) 50%), linear-gradient(135deg, var(--jf-muted) 50%, transparent 50%); background-position: calc(100% - 22px) 23px, calc(100% - 16px) 23px; background-size: 6px 6px; background-repeat: no-repeat; text-overflow: ellipsis; }

.fc-date { max-width: 240px; }

.fc-hint { font-size: 14px; line-height: 20px; color: var(--jf-muted); }

.fc-check, .fc-radio { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 22px; color: var(--jf-ink); cursor: pointer; }

.fc-check input, .fc-radio input { width: 20px; height: 20px; margin: 1px 0 0; flex: 0 0 20px; accent-color: var(--jf-green-2); }

.fc-docs { display: flex; flex-wrap: wrap; gap: 10px 22px; }

.fc-docs .fc-label { width: 100%; margin-bottom: 2px; }

.fc-result { padding: 32px; background: var(--ds-surface-soft); border-left: 1px solid var(--ds-line); display: grid; align-content: start; gap: 18px; min-width: 0; }

.fc-empty { display: grid; gap: 6px; color: var(--jf-muted); font-size: 16px; line-height: 24px; padding-top: 6px; }

.fc-empty__title { font-size: 21px; font-weight: 700; color: var(--jf-ink); }

.fc-kicker { font-size: 14px; line-height: 20px; color: var(--jf-muted); }

.fc-amount { font-size: 44px; line-height: 48px; font-weight: 700; letter-spacing: -1px; color: var(--jf-ink); font-variant-numeric: tabular-nums; margin-top: 4px !important; }

.fc-formula { font-size: 15px; color: var(--jf-muted); margin-top: 6px !important; }

.fc-discount { margin-top: 18px; padding: 16px 18px; border-radius: var(--ds-r-md); background: #fff; border: 1px solid var(--jf-soft-line); font-size: 16px; line-height: 24px; }

.fc-discount b { font-size: 22px; letter-spacing: -.3px; font-variant-numeric: tabular-nums; }

.fc-discount--no { border-color: var(--ds-line); color: var(--jf-ink); }

.fc-dates { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--ds-line); }

.fc-dates li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--ds-line); font-size: 15px; line-height: 22px; }

.fc-dates span { color: var(--jf-muted); }

.fc-dates b { white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }

.fc-dates small { display: block; font-size: 13px; line-height: 18px; color: var(--jf-muted); font-weight: 400; white-space: normal; }

.fc-warn { margin-top: 16px; padding: 14px 16px; border-radius: var(--ds-r-md); background: #FFF6E5; border: 1px solid #F2D49A; color: #5C3D00; font-size: 15px; line-height: 22px; }

.fc-cta { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--ds-line); display: grid; gap: 14px; }

.fc-cta p { font-size: 15px; line-height: 22px; color: var(--jf-ink); }

.fc-cta .jf-btn { justify-self: start; }

.fc-note { margin: 14px 4px 0 !important; font-size: 14px; line-height: 20px; color: var(--jf-muted); max-width: 900px; }

.fc-section { padding-top: 64px; }

.fc-group-title { font-size: var(--ds-h3); line-height: var(--ds-h3-lh); margin: 28px 0 12px !important; }

.fc-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--ds-line); border-radius: var(--ds-r-md); }

.fc-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 22px; min-width: 640px; }

.fc-table th { text-align: left; font-weight: 700; background: var(--ds-surface); padding: 12px 14px; }

.fc-table td { padding: 12px 14px; border-top: 1px solid var(--ds-line); vertical-align: top; }

.fc-table a { color: var(--jf-green) !important; text-decoration: underline !important; text-underline-offset: 3px; }

.fc-num { font-variant-numeric: tabular-nums; }

.fc-nowrap { white-space: nowrap; }

.fc-tag { display: block; font-size: 13px; color: var(--jf-muted); }

.fc-how { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }

.fc-how__item { padding: 24px; border: 1px solid var(--ds-line); border-radius: var(--ds-r-card); display: grid; gap: 8px; align-content: start; }

.fc-how__item h3 { font-size: 19px; line-height: 26px; }

.fc-how__item p { font-size: 16px; line-height: 25px; color: var(--jf-ink); }

.fc-how__item a, .fc-faq a, .fc-sources a { color: var(--jf-green) !important; text-decoration: underline !important; text-underline-offset: 3px; }

.fc-faq { display: grid; gap: 10px; max-width: 900px; }

.fc-faq__item { border: 1px solid var(--ds-line); border-radius: var(--ds-r-md); padding: 0 20px; }

.fc-faq__item summary { list-style: none; cursor: pointer; padding: 18px 28px 18px 0; font-size: 18px; line-height: 26px; font-weight: 700; position: relative; }

.fc-faq__item summary::-webkit-details-marker { display: none; }

.fc-faq__item summary::after { content: "+"; position: absolute; right: 0; top: 16px; font-size: 24px; font-weight: 400; color: var(--jf-green); }

.fc-faq__item[open] summary::after { content: "−"; }

.fc-faq__item p { padding: 0 0 18px; font-size: 16px; line-height: 26px; }

.fc-related { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }

.fc-related a { display: block; height: 100%; padding: 18px 20px; border: 1px solid var(--ds-line); border-radius: var(--ds-r-md); font-size: 17px; line-height: 24px; font-weight: 500; transition: border-color .2s var(--jf-ease), transform .2s var(--jf-ease); }

.fc-related a:hover { border-color: var(--jf-green); transform: translateY(-2px); }

.fc-sources { padding-top: 8px; padding-bottom: 56px; }

.fc-sources p { font-size: 14px; line-height: 21px; color: var(--jf-muted); max-width: 900px; }

@media (max-width: 900px) {
  .fc-app { grid-template-columns: 1fr; }
  .fc-result { border-left: 0; border-top: 1px solid var(--ds-line); }
}

@media (max-width: 720px) {
  .fc-hero { padding-top: 24px; padding-bottom: 96px; }
  .fc-app-wrap { margin-top: -72px; padding-left: 12px; padding-right: 12px; }
  .fc-form, .fc-result { padding: 22px 18px; }
  .fc-amount { font-size: 36px; line-height: 40px; }
  .fc-date { max-width: none; }
  .fc-cta .jf-btn { justify-self: stretch; }
  .fc-section { padding-top: 48px; }
  .fc-dates li { flex-direction: column; gap: 2px; }
  .fc-dates b { text-align: left; }
  /* Таблица штрафов на телефоне — карточками: название сверху, норма, МРП, сумма и скидка строкой ниже */
  .fc-table-scroll { overflow: visible; border: 0; border-radius: 0; }
  .fc-table { min-width: 0; display: block; }
  .fc-table thead { display: none; }
  .fc-table tbody { display: grid; gap: 10px; }
  .fc-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; padding: 14px 16px; border: 1px solid var(--ds-line); border-radius: var(--ds-r-md); }
  .fc-table td { display: block; padding: 0; border: 0; }
  .fc-table td.fc-td-title { grid-column: 1 / -1; font-weight: 700; }
  .fc-table td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; line-height: 16px; color: var(--jf-muted); }
}

@media (prefers-reduced-motion: reduce) {
  .fc-related a, .fc-input { transition: none; }
}

.fc-radio.is-disabled { opacity: .45; cursor: not-allowed; }

.fc-dates li.fc-dates__note { border-bottom: 0; padding-bottom: 0; }

.fc-dates li.fc-dates__note span { font-size: 13px; line-height: 18px; }

.fc-warn p + p { margin-top: 8px !important; }