/*
 * firsenko.com — дополнения к утверждённой вёрстке v6 (site.css) для серверной версии на Laravel:
 * нативные диалоги и мобильное меню, вкладки, баннер согласия, формы входа и кабинета, ролик о сайте.
 * Палитра — только четыре базовых цвета ТЗ: #FFFFFF, #242424, #494FC4, #C74324 (+ прозрачность).
 */
:root {
  --fc-white: #fff;
  --fc-ink: #242424;
  --fc-indigo: #494fc4;
  --fc-accent: #c74324;
  --fc-line: rgba(36, 36, 36, .14);
  --fc-soft: rgba(36, 36, 36, .04);
  --fc-muted: rgba(36, 36, 36, .66);
  --fc-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ── Доступность ─────────────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--fc-indigo); outline-offset: 3px; }
.hp-field { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
[hidden] { display: none !important; }
button[aria-busy="true"] { opacity: .6; pointer-events: none; }

/* ── Диалоги (<dialog>) ──────────────────────────────────────────────── */
dialog.site-dialog, dialog.mobile-sheet {
  border: 0; color: var(--fc-ink); background: var(--fc-white); padding: 0; margin: auto;
  box-shadow: 0 30px 80px rgba(36, 36, 36, .22);
}
dialog::backdrop { background: rgba(36, 36, 36, .45); }
dialog[open] { animation: fc-dialog-in .22s var(--fc-ease); }
dialog[open]::backdrop { animation: fc-fade-in .22s ease; }
dialog.is-closing { animation: fc-dialog-out .16s ease forwards; }
dialog.site-dialog { width: min(500px, calc(100% - 32px)); display: none; flex-direction: column; gap: 18px; padding: 35px !important; border-radius: 3px; position: fixed; inset: 0; height: fit-content; max-height: calc(100% - 32px); overflow: auto; }
dialog.site-dialog[open] { display: flex; }
dialog.search-dialog { width: min(760px, calc(100% - 32px)); }
dialog.site-dialog h2 { margin: 0; padding-right: 30px; }
dialog.site-dialog p { margin: 0; }
dialog.site-dialog .button { align-self: flex-start; }
.dialog-close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: transparent; color: var(--fc-ink); cursor: pointer; border-radius: 50%; transition: background .2s; }
.dialog-close:hover { background: var(--fc-soft); }

dialog.mobile-sheet { position: fixed; inset: 0 0 0 auto; margin: 0; height: 100%; max-height: none; width: min(88vw, 400px) !important; padding: 30px !important; display: none; flex-direction: column; overflow-y: auto; }
dialog.mobile-sheet[open] { display: flex; animation: fc-sheet-in .3s var(--fc-ease); }
dialog.mobile-sheet.is-closing { animation: fc-sheet-out .16s ease forwards; }
.mobile-sheet .sheet-brand { margin: 0; }
.mobile-sheet .sheet-desc { margin: 6px 0 0; color: var(--fc-muted); font-size: 14px; }

@keyframes fc-fade-in { from { opacity: 0; } }
@keyframes fc-dialog-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes fc-dialog-out { to { opacity: 0; transform: translateY(6px) scale(.99); } }
@keyframes fc-sheet-in { from { transform: translateX(100%); } }
@keyframes fc-sheet-out { to { transform: translateX(100%); } }

/* ── Слайдер ─────────────────────────────────────────────────────────── */
.carousel-viewport { overflow: hidden; }
.project-slides { display: flex; will-change: transform; }
.carousel-ready .project-slides { transition: transform .7s var(--fc-ease); }
.project-slide { flex: 0 0 100%; min-width: 0; }
.slide-status [data-autoplay] .autoplay-pause, .slide-status [data-autoplay].is-playing .autoplay-play { display: none; }
.slide-status [data-autoplay].is-playing .autoplay-pause { display: inline-flex; }
.project-slide .project-hero-copy > * { transition: opacity .5s ease, transform .6s var(--fc-ease); }
.carousel-ready .project-slide:not(.is-active) .project-hero-copy > * { opacity: 0; transform: translateY(14px); }
.carousel-ready .project-slide.is-active .project-hero-copy > :nth-child(2) { transition-delay: .06s; }
.carousel-ready .project-slide.is-active .project-hero-copy > :nth-child(3) { transition-delay: .12s; }
.carousel-ready .project-slide.is-active .project-hero-copy > :nth-child(4) { transition-delay: .18s; }
.hero-custom-image img { width: 100%; height: 100%; object-fit: cover; }

/* ── Вкладки и фильтры ───────────────────────────────────────────────── */
.filter-tabs { display: flex; position: relative; }
.filter-tabs [data-slot="tabs-trigger"] { position: relative; background: none; cursor: pointer; font-family: inherit; }
.filter-tabs [data-slot="tabs-trigger"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--fc-accent); opacity: 0; transform: scaleX(.4); transition: opacity .25s, transform .3s var(--fc-ease); }
.filter-tabs [data-state="active"]::after { opacity: 1; transform: none; }
.project-filter { margin-bottom: 30px !important; }
.book-catalog-search { margin-bottom: 26px; }

/* ── Сообщения ───────────────────────────────────────────────────────── */
.flash-message { margin-top: 18px; padding: 14px 18px; border: 1px solid rgba(73, 79, 196, .28); border-radius: 2px; background: rgba(73, 79, 196, .05); font-size: 14px; }
.form-errors { margin: 0 0 22px; padding: 14px 18px; border: 1px solid rgba(199, 67, 36, .32); border-radius: 2px; background: rgba(199, 67, 36, .05); font-size: 14px; color: var(--fc-ink); }
.form-errors ul { margin: 6px 0 0; padding-left: 18px; }
.form-success { margin: 0 0 22px; padding: 16px 18px; border: 1px solid rgba(73, 79, 196, .28); border-radius: 2px; background: rgba(73, 79, 196, .05); font-size: 14px !important; color: var(--fc-ink) !important; line-height: 1.6; }
.form-success strong { display: block; font-size: 16px; margin-bottom: 4px; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--fc-accent) !important; }
.consent-check { display: flex !important; gap: 10px; align-items: flex-start; font-weight: 400 !important; font-size: 13px !important; line-height: 1.5; margin: 4px 0 18px; }
.consent-check input { width: 18px !important; height: 18px; margin: 2px 0 0 !important; flex: none; accent-color: var(--fc-accent); }
.consent-check a { text-decoration: underline; }

/* ── Баннер согласия на аналитику ────────────────────────────────────── */
.consent-banner { position: fixed; left: 16px; bottom: 16px; z-index: 60; max-width: 560px; background: var(--fc-white); color: var(--fc-ink); border: 1px solid var(--fc-line); box-shadow: 0 18px 50px rgba(36, 36, 36, .16); padding: 20px 22px; display: grid; gap: 14px; animation: fc-dialog-in .3s var(--fc-ease); }
.consent-banner p { margin: 0; font-size: 14px; line-height: 1.55; }
.consent-banner a { text-decoration: underline; }
.consent-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.footer-link-button { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.footer-link-button:hover { color: var(--fc-accent); }

/* ── Поля форм кабинета и входа ──────────────────────────────────────── */
.auth-form label, .account-form-card label, .travel-edit-form label, .access-invite-form label, .metrics-provider label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 16px; }
.auth-form input:not([type="checkbox"]), .account-form-card input:not([type="checkbox"]), .account-form-card textarea,
.travel-edit-form input, .travel-edit-form textarea, .travel-edit-form select,
.access-invite-form input:not([type="checkbox"]), .access-invite-form select, .metrics-provider input:not([type="checkbox"]),
.travel-filter input {
  display: block; width: 100%; margin-top: 7px; padding: 11px 13px; font: inherit; font-size: 16px; font-weight: 400; color: var(--fc-ink);
  background: var(--fc-white); border: 1px solid var(--fc-line); border-radius: 2px; transition: border-color .2s, box-shadow .2s;
}
.auth-form input:focus, .account-form-card input:focus, .account-form-card textarea:focus, .travel-edit-form input:focus, .travel-edit-form textarea:focus,
.travel-edit-form select:focus, .access-invite-form input:focus, .access-invite-form select:focus, .metrics-provider input:focus {
  border-color: var(--fc-indigo); box-shadow: 0 0 0 3px rgba(73, 79, 196, .14); outline: none;
}
.field-optional { color: var(--fc-muted); font-weight: 400; font-size: 12px; margin-left: 4px; }
.form-note { color: var(--fc-muted); }
.form-note .text-link { font-size: inherit; }
.text-link.danger { color: var(--fc-accent); }
button.text-link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }

/* ── Вход, регистрация, приглашение ──────────────────────────────────── */
.auth-page { display: grid; grid-template-columns: 1fr minmax(0, 460px); gap: 80px; align-items: start; padding-block: 90px 110px; }
.auth-intro h1 { font-size: clamp(42px, 6vw, 76px); line-height: .98; letter-spacing: -.05em; font-weight: 500; margin: 18px 0 22px; }
.auth-intro h1 em { font-family: "PT Serif", Georgia, serif; font-weight: 400; color: var(--fc-accent); }
.auth-intro p { max-width: 520px; color: var(--fc-muted); font-size: 16px; line-height: 1.6; }
.auth-card { border: 1px solid var(--fc-line); padding: 34px; background: var(--fc-white); }
.auth-form .button { width: 100%; margin-top: 6px; }
.auth-links { display: flex; justify-content: space-between; gap: 16px; margin-top: 20px; font-size: 14px; }
@media (width <= 860px) { .auth-page { grid-template-columns: 1fr; gap: 30px; padding-block: 50px 70px; } .auth-card { padding: 24px; } }

/* ── Кабинет ─────────────────────────────────────────────────────────── */
.account-title { margin-bottom: 28px; }
.account-logout { background: none; border: 0; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; padding: 0; font: inherit; }
.account-forms-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.account-form-card { border: 1px solid var(--fc-line); padding: 26px; display: flex; flex-direction: column; }
.account-form-card h2 { font-size: 22px; letter-spacing: -.03em; font-weight: 600; margin: 0 0 18px; }
.account-form-card .button { align-self: flex-start; margin-top: auto; }
.account-form-actions { grid-column: 1 / -1; }
.ui-switch { width: 44px; height: 24px; border-radius: 99px; border: 0; background: rgba(36, 36, 36, .2); position: relative; cursor: pointer; transition: background .2s; flex: none; }
.ui-switch span { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--fc-white); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .25s var(--fc-ease); }
.ui-switch.is-on { background: var(--fc-accent); }
.ui-switch.is-on span { transform: translateX(20px); }
.registration-setting form { display: flex; align-items: center; gap: 14px; }
.switch-row { display: flex !important; align-items: center; justify-content: space-between; gap: 14px; }
.ui-switch-input { appearance: none; -webkit-appearance: none; width: 44px !important; height: 24px; border-radius: 99px; background: rgba(36, 36, 36, .2); position: relative; cursor: pointer; transition: background .2s; margin: 0 !important; padding: 0 !important; border: 0 !important; flex: none; }
.ui-switch-input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--fc-white); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .25s var(--fc-ease); }
.ui-switch-input:checked { background: var(--fc-accent); }
.ui-switch-input:checked::after { transform: translateX(20px); }
.permission-checkbox { display: flex !important; align-items: center; gap: 10px; font-weight: 400 !important; margin-bottom: 8px !important; }
.permission-checkbox input { width: 18px; height: 18px; accent-color: var(--fc-accent); margin: 0; }
.access-invite-form fieldset { border: 1px solid var(--fc-line); padding: 14px 16px 6px; margin: 0 0 18px; }
.access-invite-form legend { font-size: 13px; font-weight: 600; padding: 0 6px; }
.access-user-row { flex-wrap: wrap; }
.access-edit { width: 100%; }
.access-edit summary { cursor: pointer; list-style: none; margin-top: 8px; }
.access-edit[open] .access-invite-form { margin-top: 16px; border-top: 1px solid var(--fc-line); padding-top: 16px; }
.travel-status-filter, .period-switch { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 10px 0 22px; font-size: 14px; }
.travel-status-filter a, .period-switch a { color: var(--fc-muted); padding-bottom: 4px; border-bottom: 2px solid transparent; }
.travel-status-filter a.active, .period-switch a.active { color: var(--fc-ink); border-bottom-color: var(--fc-accent); }
.travel-admin-list article form, .access-user-list form { display: inline; }
.travel-admin-list article > div:last-child { display: flex; gap: 16px; flex-wrap: wrap; }
.status-published { color: var(--fc-indigo); }
.status-hidden, .status-archived, .status-draft { color: var(--fc-muted); }
.status-failed, .status-spam { color: var(--fc-accent) !important; }
.status-sent { color: var(--fc-indigo) !important; }
.request-list { display: grid; gap: 16px; }
.request-item { border: 1px solid var(--fc-line); padding: 20px 22px; }
.request-item.is-processed { opacity: .62; }
.request-item header { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.request-item h3 { margin: 6px 0 0; font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.request-message { white-space: pre-wrap; margin: 14px 0; font-size: 15px; line-height: 1.6; }
.request-item footer { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--fc-muted); }
.request-item footer div { display: flex; gap: 16px; }
.simple-pagination { display: flex; gap: 20px; justify-content: center; margin-top: 26px; font-size: 14px; color: var(--fc-muted); }
.simple-pagination a { color: var(--fc-ink); }
.metrics-connection-status a { text-decoration: underline; margin-right: 10px; }
.book-facts { display: flex; gap: 30px; margin: 22px 0 0; }
.book-facts dt { font-size: 12px; color: var(--fc-muted); text-transform: uppercase; letter-spacing: .06em; }
.book-facts dd { margin: 4px 0 0; font-size: 15px; }

/* ── Карта ───────────────────────────────────────────────────────────── */
.travel-map-wrap { position: relative; }
.travel-map-wrap .map-message[hidden] { display: none !important; }
.travel-location-pin .travel-pin-drop.is-selected { filter: drop-shadow(0 0 0 var(--fc-indigo)); }
.travel-place-card.is-selected { border-color: var(--fc-accent) !important; }
.travel-place-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 14px 0; }
.travel-place-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.travel-place-photos figcaption { font-size: 12px; color: var(--fc-muted); margin-top: 4px; }
.travel-filter input { max-width: 420px; }

/* ── Ролик о сайте ───────────────────────────────────────────────────── */
.site-video-frame { position: relative; aspect-ratio: 16 / 9; background: var(--fc-ink); overflow: hidden; }
.site-video-frame video { width: 100%; height: 100%; display: block; object-fit: cover; background: var(--fc-ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .carousel-ready .project-slide:not(.is-active) .project-hero-copy > * { opacity: 1; transform: none; }
}

/* Кнопка панели связи на телефоне: одна иконка в каждом состоянии. */
.dock-mobile-toggle .dock-icon-open, .dock-mobile-toggle .dock-icon-close { display: inline-flex; }
.contact-dock:not(.dock-open) .dock-icon-close, .contact-dock.dock-open .dock-icon-open { display: none; }

/* ── Шлифовка (impeccable polish): поверхности браузера, ритм текста, детали карточек ───────── */
::selection { background: rgba(199, 67, 36, .18); color: var(--fc-ink); }
html { caret-color: var(--fc-accent); scrollbar-color: rgba(36, 36, 36, .32) transparent; scrollbar-width: thin; }
html { scroll-padding-top: 96px; }
[id] { scroll-margin-top: 96px; }
a, button, input, select, textarea, summary { -webkit-tap-highlight-color: rgba(73, 79, 196, .12); }
:where(a, button, summary, [tabindex]):focus-visible { outline: 2px solid var(--fc-indigo); outline-offset: 3px; border-radius: 2px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; }

/* Заголовки: ровные строки, без «висячих» слов; абзацы — аккуратный перенос. */
h1, h2, h3, .contact-lead, blockquote { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
.page-intro p, .project-page-intro > p, .privacy-content p, .lead-paragraph, .book-note p { max-width: 68ch; }
.real-book-info h3, .book-detail-copy h1, .search-results h2, .actual-works-list h3 { hyphens: auto; overflow-wrap: anywhere; }
.privacy-content a, .form-errors a, .consent-banner a, .form-success a { text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* Цифры в счётчиках, годах и статусах — одинаковой ширины. */
.work-year, .index-links strong, .slide-status, .account-stats strong, .catalog-count, .book-stage-index,
.real-book-stage > span, .company-card-top, .metrics-events code, .map-coordinate-readout, .travel-map-heading span { font-variant-numeric: tabular-nums; }

/* Обложки: мягкая глубина при наведении (смещение + размытие), без резких теней. */
.real-book-stage > img { transition: transform .45s var(--fc-ease), box-shadow .45s var(--fc-ease); box-shadow: 0 1px 2px rgba(36, 36, 36, .08); }
.real-book-stage:hover > img, .real-book-stage:focus-visible > img { box-shadow: 0 18px 32px -14px rgba(36, 36, 36, .38); }
.about-art img, .actual-detail-cover img { box-shadow: 0 22px 40px -22px rgba(36, 36, 36, .45); }

/* Карточки проектов: лёгкий подъём логотипа и акцентная линия сверху (цвет раздела). */
.actual-company-card .company-mark img { transition: transform .4s var(--fc-ease); }
.actual-company-card:hover .company-mark img, .actual-company-card:focus-within .company-mark img { transform: scale(1.04); }
.company-domain [aria-hidden] { display: inline-block; transition: transform .3s var(--fc-ease); }
.actual-company-card:hover .company-domain [aria-hidden] { transform: translate(2px, -2px); }

/* Результаты поиска и места на карте — понятная реакция на наведение. */
.search-results > a { transition: background-color .25s ease; }
.search-results > a:hover { background: rgba(36, 36, 36, .025); }
.search-results > a svg { transition: transform .3s var(--fc-ease); }
.search-results > a:hover svg { transform: rotate(90deg); color: var(--fc-accent); }
.travel-place-card { transition: border-color .25s ease, transform .3s var(--fc-ease); }
.travel-place-card:hover { transform: translateY(-2px); }

/* Кнопки: нажатие ощущается. */
.button { transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s var(--fc-ease); }
.button:active { transform: translateY(1px) scale(.99); }

/* Медиа без сдвига вёрстки. */
.actual-detail-cover img, .about-art img { height: auto; }
.video-image img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }

@media (hover: none) {
  .real-book-stage:hover > img, .actual-company-card:hover .company-mark img, .travel-place-card:hover { transform: none; }
}
.book-detail-copy h1.is-long-title { font-size: clamp(26px, 3.2vw, 44px); line-height: 1.12; letter-spacing: -.03em; }