/* ============================================================
   БРИФ SOFTFLOW
   Здесь находятся только стили страницы brief.html.
   Основные цвета можно менять в переменных ниже.
============================================================ */
:root {
    --brief-brown: #65432e;
    --brief-muted: #8b7464;
    --brief-gold: #b9782b;
    --brief-line: rgba(171, 111, 43, .28);
    --brief-paper: rgba(255, 252, 246, .94);
    --brief-shadow: 0 20px 55px rgba(91, 54, 24, .16);
}

.brief-page { position: relative; z-index: 2; min-height: 70vh; padding: 56px 18px 70px; font-family: "Montserrat", sans-serif; color: var(--brief-brown); }
.brief-intro { width: min(780px, 100%); margin: 0 auto 28px; text-align: center; }
.brief-kicker { margin: 0 0 12px; color: #9c6428; font-size: 12px; font-weight: 600; letter-spacing: .22em; }
.brief-intro h1 { margin: 0; font-size: clamp(30px, 5vw, 48px); font-weight: 500; }
.brief-intro > p:last-child { max-width: 650px; margin: 15px auto 0; color: #765e4e; line-height: 1.7; }

.brief-shell { width: min(900px, 100%); margin: auto; padding: 30px; border: 1px solid var(--brief-line); border-radius: 28px; background: var(--brief-paper); box-shadow: var(--brief-shadow); backdrop-filter: blur(10px); }
.brief-topbar { margin-bottom: 30px; }
.brief-topbar > div:first-child { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 12px; color: var(--brief-muted); font-size: 12px; }
.brief-progress { height: 4px; overflow: hidden; border-radius: 10px; background: rgba(118, 76, 40, .12); }
.brief-progress span { display: block; width: 16.666%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #a76622, #efc779); transition: width .3s ease; }

.brief-step { min-width: 0; margin: 0; padding: 0; border: 0; }
.brief-step[hidden] { display: none; }
.brief-step legend { width: 100%; margin-bottom: 8px; font-size: clamp(23px, 4vw, 32px); font-weight: 500; text-align: center; }
.brief-step-hint { margin: 0 0 28px; color: var(--brief-muted); font-size: 13px; line-height: 1.6; text-align: center; }

.brief-fields { display: grid; gap: 18px; }
.brief-fields--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.brief-fields label, .brief-wide-label { display: grid; gap: 8px; color: #654632; font-size: 13px; font-weight: 600; }
.brief-fields input, .brief-fields textarea, .brief-fields select, .brief-wide-label textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--brief-line); border-radius: 14px; outline: none; background: rgba(255,255,255,.78); padding: 13px 15px; color: #5f4434; font: inherit; font-weight: 400; transition: border-color .2s, box-shadow .2s; }
.brief-fields textarea, .brief-wide-label textarea { resize: vertical; line-height: 1.55; }
.brief-fields input:focus, .brief-fields textarea:focus, .brief-fields select:focus, .brief-wide-label textarea:focus { border-color: #c17c2e; box-shadow: 0 0 0 3px rgba(193,124,46,.12); }
.brief-wide-label { margin-top: 22px; }
.brief-honeypot { display: none !important; }

.brief-choice-group { margin-top: 28px; }
.brief-label { display: block; margin-bottom: 12px; font-size: 14px; font-weight: 600; }
.brief-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.brief-choice-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.brief-choice { position: relative; display: block; cursor: pointer; }
.brief-choice input { position: absolute; opacity: 0; pointer-events: none; }
.brief-choice span { display: grid; align-content: center; gap: 6px; min-height: 82px; box-sizing: border-box; padding: 15px; border: 1px solid var(--brief-line); border-radius: 16px; background: rgba(255,255,255,.72); transition: transform .2s, border-color .2s, background .2s, box-shadow .2s; }
.brief-choice strong { font-size: 13px; line-height: 1.35; }
.brief-choice small { color: var(--brief-muted); font-size: 11px; line-height: 1.45; }
.brief-choice:hover span { transform: translateY(-2px); border-color: rgba(177,111,36,.7); }
.brief-choice input:checked + span { border-color: #b87325; background: linear-gradient(135deg, #fff8eb, #f7dba9); box-shadow: 0 8px 20px rgba(115,70,27,.12), inset 0 0 0 1px rgba(255,255,255,.5); }
.brief-choice input:focus-visible + span { outline: 3px solid rgba(184,115,37,.25); outline-offset: 2px; }

.brief-actions { display: flex; justify-content: space-between; gap: 14px; margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(111,74,44,.12); }
.brief-actions > :only-child, .brief-actions [data-next]:first-child { margin-left: auto; }
.brief-button { min-height: 48px; padding: 12px 24px; border: 1px solid #b97627; border-radius: 999px; background: linear-gradient(135deg, #edc275, #d99f49); box-shadow: 0 8px 18px rgba(115,69,25,.15); color: #5b3b29; font: 600 13px "Montserrat", sans-serif; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.brief-button:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(115,69,25,.2); }
.brief-button:disabled { opacity: .55; cursor: wait; transform: none; }
.brief-button--secondary { border-color: var(--brief-line); background: rgba(255,255,255,.75); box-shadow: none; }
.brief-error { min-height: 20px; margin: 15px 0 -12px; color: #a13c2e; font-size: 12px; font-weight: 600; text-align: center; }

.brief-summary { display: grid; gap: 12px; }
.brief-summary__item { display: grid; grid-template-columns: minmax(150px,.55fr) minmax(0,1fr); gap: 18px; padding: 14px 16px; border-radius: 13px; background: rgba(249,229,196,.38); font-size: 12px; line-height: 1.55; }
.brief-summary__item span { color: var(--brief-muted); }
.brief-summary__item strong { color: #62422d; overflow-wrap: anywhere; }
.brief-consent { display: flex; gap: 11px; align-items: flex-start; margin-top: 22px; padding: 15px; border: 1px solid var(--brief-line); border-radius: 14px; background: rgba(255,255,255,.6); color: #725744; font-size: 12px; line-height: 1.55; }
.brief-consent input { width: 18px; height: 18px; accent-color: #b87325; flex: 0 0 auto; }
.brief-consent a { color: #8c551f; }

.brief-notice { position: fixed; z-index: 9999; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(68,45,29,.42); backdrop-filter: blur(7px); opacity: 0; visibility: hidden; transition: .25s; }
.brief-notice.is-visible { opacity: 1; visibility: visible; }
.brief-notice__card { width: min(420px,100%); padding: 32px; border: 1px solid rgba(205,145,62,.5); border-radius: 24px; background: #fff5e4; box-shadow: 0 25px 70px rgba(56,34,18,.3); text-align: center; }
.brief-notice__card > span { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 15px; border-radius: 50%; background: white; color: #ae6a21; font-size: 20px; }
.brief-notice__card h2 { margin: 0 0 10px; font-size: 23px; }
.brief-notice__card p { margin: 0 0 22px; color: var(--brief-muted); line-height: 1.6; }

@media (max-width: 700px) {
    .brief-page { padding: 28px 12px 45px; }
    .brief-shell { padding: 22px 15px; border-radius: 22px; }
    .brief-fields--two, .brief-choice-grid, .brief-choice-grid--three { grid-template-columns: 1fr; }
    .brief-choice span { min-height: 68px; }
    .brief-summary__item { grid-template-columns: 1fr; gap: 5px; }
    .brief-actions { flex-direction: column-reverse; }
    .brief-actions .brief-button { width: 100%; }
}
