/* Success stories board, built on the notice board (notices/notices.css). */
.board-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.board-count { margin: 0; color: var(--vk-gray-70); font-size: 15px; }
.board-count b { color: var(--vk-gray-90); }
html[lang="en"] .count-unit { margin-left: .3em; }
.board-message { margin: 0 0 24px; }

/* "Write a story" menu */
.write-choice { position: relative; }
.write-button { list-style: none; }
.write-button::-webkit-details-marker { display: none; }
.write-choice[open] .write-button { border-color: var(--vk-primary-70); background: var(--vk-primary-70); }
.write-options { position: absolute; z-index: 5; top: calc(100% + 8px); right: 0; display: grid; width: min(360px, calc(100vw - 32px)); gap: 8px; padding: 12px; border: 1px solid var(--vk-gray-20); border-radius: var(--vk-radius-lg); background: #fff; box-shadow: var(--vk-shadow-lg); }
.write-options a { display: block; padding: 14px 16px; border: 1px solid var(--vk-gray-30); border-radius: var(--vk-radius-md); font-size: 16px; font-weight: 700; }
.write-options a:hover { border-color: var(--vk-primary-50); background: var(--vk-primary-5); color: var(--vk-primary-60); }
.write-options small { display: block; margin-top: 4px; color: var(--vk-gray-70); font-size: 14px; font-weight: 400; }

.testimonial-table .table-head, .testimonial-table .notice-row { grid-template-columns: 230px minmax(0, 1fr) 110px 110px 62px; }
.testimonial-table .exams { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 0 8px; }
.testimonial-table .notice-row strong { display: flex; min-width: 0; align-items: baseline; gap: 6px; overflow: visible; }
.testimonial-table .title-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.external-mark { flex: none; color: var(--vk-primary-60); }

/* Story form */
.story-form-wrap { max-width: 712px; }
.story-form { display: grid; gap: 28px; }
.story-form .vk-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.story-form legend { display: block; margin-bottom: 8px; padding: 0; font-size: 15px; font-weight: 700; }
.story-form legend em { margin-left: 6px; color: var(--vk-danger-60); font-size: 13px; font-style: normal; }
.story-form textarea { min-height: 280px; }
.exam-checks { display: flex; flex-wrap: wrap; gap: 10px; }
.exam-checks label { display: inline-flex; min-height: 52px; align-items: center; gap: 10px; margin: 0; padding: 0 18px; border: 1px solid var(--vk-gray-30); border-radius: var(--vk-radius-md); font-weight: 700; cursor: pointer; }
.exam-checks label:has(input:checked) { border-color: var(--vk-primary-50); background: var(--vk-primary-5); box-shadow: inset 0 0 0 1px var(--vk-primary-50); color: var(--vk-primary-60); }
.exam-checks input { width: 20px; height: 20px; margin: 0; accent-color: var(--vk-primary-60); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; }
.form-actions .vk-btn { padding: 0 32px; }

@media (max-width: 720px) {
  .testimonial-table .notice-row { grid-template-columns: 1fr auto; }
  .testimonial-table .exams { justify-content: flex-start; padding: 0; }
  .testimonial-table .notice-row strong { grid-column: 1 / -1; grid-row: 2; }
  .testimonial-table .title-text { white-space: normal; }
  .form-actions { flex-direction: column-reverse; }
}

/* Home page section: shares .section / .section-intro with the other home sections */
#stories { border-top: 1px solid var(--vk-gray-20); background: var(--vk-gray-5); }
.story-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 48px 0 0; padding: 0; list-style: none; }
.story-card { display: flex; height: 100%; flex-direction: column; gap: 14px; padding: 24px; border: 1px solid var(--vk-gray-20); border-radius: var(--vk-radius-lg); background: #fff; text-decoration: none; }
.story-card:hover { border-color: var(--vk-primary-50); background: var(--vk-primary-5); }
.story-exams { display: flex; flex-wrap: wrap; gap: 6px; }
.story-exams i { padding: 3px 9px; border-radius: var(--vk-radius-sm); background: var(--vk-primary-10); color: var(--vk-primary-70); font-size: 13px; font-style: normal; font-weight: 700; }
.story-title { display: block; font-size: 20px; font-weight: 700; line-height: 1.45; }
.story-author { margin-top: auto; color: var(--vk-gray-70); font-size: 15px; }
.stories-more { margin-top: 32px; }