/* ═══════════════════════════════════════════════════════════════════════════
   ONE! Family Profile — стили анкеты.
   Дизайн-система: ONE! International School (бренд-бук).
   Кнопки — всегда пилюли, оранжевый — только для одного действия на экране,
   карточки 16 px радиус + тень, фокус — оранжевая рамка + кольцо.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Arimo, локальные файлы. Внешних запросов нет: страница собирает
   персональные данные, IP посетителя не должен уходить на сторонние CDN. ─── */
@font-face{font-family:'Arimo';font-style:italic;font-weight:400;font-display:swap;src:url(../assets/fonts/arimo-cyrillic-400-italic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Arimo';font-style:italic;font-weight:400;font-display:swap;src:url(../assets/fonts/arimo-latin-400-italic.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Arimo';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/arimo-cyrillic-400-normal.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Arimo';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/arimo-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Arimo';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/arimo-cyrillic-700-normal.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Arimo';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/arimo-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ─── ONE! design tokens (brandbook: navy #142245, orange #FA7F30, Helvetica) ─── */
:root{
  --font-brand:"Helvetica Neue",Helvetica,Arimo,Arial,sans-serif;
  --navy-900:#051d42;--navy-800:#142245;--navy-100:#dde2ec;--navy-050:#eef1f6;
  --orange-600:#e06a1a;--orange-500:#fa7f30;--orange-100:#ffe6d4;
  --white:#fff;--grey-050:#fafafa;--grey-100:#f2f2f2;--grey-200:#e5e5e5;--grey-400:#b3b3b3;--grey-600:#737373;--grey-800:#3d3d3d;
  --text-body:var(--grey-800);--text-muted:var(--grey-600);--border-hairline:var(--grey-200);--danger:#ab241f;
  --shadow-card:0 2px 10px rgba(5,29,66,.08);
  --ease:cubic-bezier(.4,0,.2,1);
}

/* ─── reset / base ─── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--grey-050);color:var(--text-body);font:400 16px/1.6 var(--font-brand);-webkit-font-smoothing:antialiased}
input,textarea,button{font-family:var(--font-brand)}
a{color:var(--orange-500);text-decoration:none}
a:hover{color:var(--orange-600)}
:focus-visible{outline:none;border-color:var(--orange-500)!important;box-shadow:0 0 0 3px rgba(250,127,48,.22)}

/* ─── animations ─── */
@keyframes ofp-reveal{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes ofp-spin{to{transform:rotate(360deg)}}

/* ─── header ─── */
.ofp-header{background:var(--white);border-bottom:1px solid var(--border-hairline);min-height:76px;display:flex;align-items:center;gap:14px;padding:12px 20px;position:sticky;top:0;z-index:5}
.ofp-header img{height:56px;width:56px;object-fit:contain;display:block;flex-shrink:0}
.ofp-header span{font:700 19px/1.15 var(--font-brand);letter-spacing:-.01em;color:var(--navy-800)}
.ofp-wrap{max-width:720px;margin:0 auto;padding:24px 16px 64px}

/* ─── progress bar ─── */
.ofp-progress{margin:0 0 22px}
.ofp-progress-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 8px}
.ofp-progress-top b{font:700 20px/1.35 var(--font-brand);color:var(--navy-800)}
.ofp-progress-top i{font:400 12px/1.45 var(--font-brand);font-style:normal;color:var(--text-muted);white-space:nowrap}
.ofp-bars{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.ofp-bars div{height:6px;border-radius:999px;background:var(--navy-100);transition:background .2s var(--ease)}
.ofp-bars div.on{background:var(--orange-500)}

/* ─── buttons ─── */
.ofp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;font:700 14px/1 var(--font-brand);letter-spacing:.08em;text-transform:uppercase;transition:background .12s var(--ease),color .12s var(--ease),border-color .12s var(--ease),transform .12s var(--ease)}
.ofp-btn:active{transform:scale(.98)}
.ofp-btn--primary{background:var(--orange-500);color:var(--white)}
.ofp-btn--primary:hover{background:var(--orange-600)}
.ofp-btn--outline{background:transparent;color:var(--navy-800);border-color:var(--navy-800)}
.ofp-btn--outline:hover{background:var(--navy-050)}
.ofp-btn--lg{min-height:56px;padding:0 32px;font-size:16px}
.ofp-btn--md{min-height:48px;padding:0 26px;min-width:150px}
.ofp-btn--sm{min-height:44px;padding:0 18px;font-size:13px}
.ofp-btn[disabled]{opacity:.6;cursor:default;pointer-events:none}

/* ─── hero (welcome screen) ─── */
.ofp-hero{background:var(--white);border:1px solid var(--border-hairline);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-card)}
.ofp-hero-photo{position:relative;height:230px;background:var(--navy-900)}
.ofp-hero-photo picture{position:absolute;inset:0;display:block}
/* object-position выше центра: лица в верхней трети кадра, и при любой
   высоте шапки обрезается низ с плиткой, а не головы. */
.ofp-hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block;background:var(--navy-900)}
.ofp-hero-photo .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,29,66,0) 0%,rgba(5,29,66,.06) 45%,rgba(5,29,66,.55) 74%,rgba(5,29,66,.93) 100%)}
.ofp-hero-photo h1{position:absolute;left:22px;right:22px;bottom:20px;margin:0;font:700 32px/1.22 var(--font-brand);color:var(--white);text-wrap:pretty}
.ofp-hero-body{padding:26px 22px 28px;border-top:4px solid var(--orange-500)}
.ofp-hero-body p{margin:0 0 16px;font:400 18px/1.55 var(--font-brand);text-wrap:pretty}
.ofp-hero-body p.fine{margin:0 0 26px;font:400 14px/1.55 var(--font-brand);font-style:italic;color:var(--text-muted)}

/* ─── question blocks ─── */
.ofp-block{margin:0 0 18px}
.ofp-heading{display:flex;align-items:center;gap:10px;margin:30px 0 14px;padding-bottom:10px;border-bottom:1px solid var(--border-hairline)}
.ofp-heading span{width:5px;height:22px;background:var(--orange-500);border-radius:3px;flex-shrink:0}
.ofp-heading h2{margin:0;font:700 20px/1.35 var(--font-brand);color:var(--navy-800)}

.ofp-q{overflow-wrap:anywhere;border:1px solid var(--border-hairline);border-radius:16px;background:var(--white);padding:18px;min-width:0;box-shadow:var(--shadow-card);animation:ofp-reveal .28s var(--ease)}
.ofp-q.invalid{border-color:var(--danger)}
.ofp-q-title{display:block;margin:0 0 14px;font:700 18px/1.45 var(--font-brand);color:var(--navy-800);text-wrap:pretty}
.ofp-q-title .num,.ofp-q-title .star{color:var(--orange-500)}
.ofp-q-title .num{margin-right:6px}

/* ─── form fields ─── */
.ofp-field{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--border-hairline);border-radius:8px;font:400 16px/1.6 var(--font-brand);color:var(--text-body);background:var(--white)}
textarea.ofp-field{min-height:96px;resize:vertical}

/* ─── children list ─── */
.ofp-kids{display:grid;gap:10px}
.ofp-kid{display:flex;gap:8px;align-items:center}
.ofp-kid-del{width:48px;height:48px;flex-shrink:0;border:1px solid var(--border-hairline);background:var(--white);border-radius:8px;color:var(--grey-600);font-size:20px;line-height:1;cursor:pointer;transition:border-color .12s var(--ease),color .12s var(--ease)}
.ofp-kid-del:hover{border-color:var(--danger);color:var(--danger)}

/* ─── option tiles (radio / checkbox) ─── */
.ofp-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(290px,100%),1fr));gap:10px}
.ofp-opt{display:flex;gap:12px;align-items:flex-start;min-height:48px;padding:13px 14px;border-radius:8px;cursor:pointer;font:400 14px/1.55 var(--font-brand);background:var(--white);border:1.5px solid var(--border-hairline);transition:border-color .12s var(--ease),background .12s var(--ease)}
.ofp-opt:hover{border-color:var(--orange-400,#ff9a56)}
.ofp-opt input{width:20px;height:20px;margin:1px 0 0;flex-shrink:0;accent-color:var(--orange-500);cursor:pointer}
.ofp-opt span.label{flex:1;text-wrap:pretty}
.ofp-opt.checked{background:var(--orange-100);border-color:var(--orange-500)}

/* ─── reveal fields (custom input below option) ─── */
.ofp-reveal{padding:10px 0 2px 4px;animation:ofp-reveal .28s var(--ease)}
.ofp-reveal label{display:block;font:400 12px/1.45 var(--font-brand);color:var(--text-muted);margin:0 0 6px}
.ofp-reveal input{min-height:44px;font-size:16px}   /* не меньше 16px: иначе iOS зумит страницу при фокусе */

/* ─── errors ─── */
.ofp-err{margin-top:12px;display:flex;gap:8px;align-items:flex-start;font:400 14px/1.55 var(--font-brand);color:var(--danger)}
.ofp-step-err{margin:14px 0 0;font:400 14px/1.55 var(--font-brand);color:var(--danger);text-align:center}
.ofp-limit{margin:8px 0 0;font:400 13px/1.5 var(--font-brand);color:var(--text-muted)}

/* ─── navigation ─── */
.ofp-nav{display:flex;gap:12px;margin:26px 0 0;align-items:center;justify-content:space-between}
.ofp-nav.single{justify-content:flex-end}

/* ─── consent checkbox ─── */
.ofp-consent{margin:22px 0 0;border:1px solid var(--border-hairline);border-radius:16px;background:var(--white);padding:18px;box-shadow:var(--shadow-card)}
.ofp-consent.invalid{border-color:var(--danger)}
.ofp-consent label{display:flex;gap:12px;align-items:flex-start;cursor:pointer;font:400 14px/1.55 var(--font-brand)}
.ofp-consent input{width:20px;height:20px;margin:1px 0 0;flex-shrink:0;accent-color:var(--orange-500);cursor:pointer}

/* ─── consent modal ───
   Окно согласия перед началом анкеты. На мобильных прижимается к низу
   экрана: до кнопок дотягивается большой палец, а длинный текст скроллится
   внутри окна, а не уезжает за край. ─── */
.ofp-locked{overflow:hidden}
.ofp-modal-back{position:fixed;inset:0;z-index:50;background:rgba(5,29,66,.55);display:flex;align-items:center;justify-content:center;padding:16px;overflow-y:auto;animation:ofp-fade .16s var(--ease)}
.ofp-modal{background:var(--white);border-radius:20px;box-shadow:0 12px 40px rgba(5,29,66,.28);width:100%;max-width:560px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);display:flex;flex-direction:column;padding:26px 24px 22px;animation:ofp-pop .18s var(--ease)}
.ofp-modal-title{margin:0 0 14px;font:700 24px/1.25 var(--font-brand);letter-spacing:-.01em;color:var(--navy-800)}
.ofp-modal-body{overflow-y:auto;-webkit-overflow-scrolling:touch;min-height:0}
.ofp-modal-body p{margin:0 0 14px;font:400 16px/1.55 var(--font-brand);text-wrap:pretty}
.ofp-modal .ofp-consent{margin:6px 0 0;box-shadow:none;background:var(--navy-050);border-color:transparent}
.ofp-modal .ofp-consent.invalid{border-color:var(--danger);background:var(--white)}
.ofp-modal-nav{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap;margin:20px 0 0}
.ofp-declined{margin:0 0 20px;padding:14px 16px;border-radius:12px;background:var(--orange-100);border:1px solid var(--orange-500);font:400 15px/1.55 var(--font-brand);color:var(--navy-800)}
@keyframes ofp-fade{from{opacity:0}to{opacity:1}}
@keyframes ofp-pop{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.ofp-restored{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:0 0 18px;padding:12px 16px;border-radius:12px;background:var(--navy-050);border:1px solid var(--navy-100);font:400 14px/1.5 var(--font-brand);color:var(--navy-800)}
.ofp-restored span{flex:1;min-width:180px}
.ofp-restored-clear{flex-shrink:0;min-height:44px;padding:0 4px;background:none;border:none;font:700 13px/1 var(--font-brand);letter-spacing:.04em;text-transform:uppercase;color:var(--orange-600);cursor:pointer;text-decoration:underline}

/* ─── spinner ─── */
.ofp-spin{width:16px;height:16px;border:2px solid rgba(255,255,255,.45);border-top-color:var(--white);border-radius:50%;animation:ofp-spin .7s linear infinite}

/* ─── send error ─── */
.ofp-send-err{margin:18px 0 0;padding:16px 18px;border:1px solid var(--danger);border-radius:16px;background:var(--white);font:400 14px/1.55 var(--font-brand);color:var(--text-body)}
.ofp-send-err b{display:block;margin:0 0 6px;color:var(--danger);font:700 15px/1.45 var(--font-brand)}

/* ─── honeypot ─── */
.ofp-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ─── thank-you screen ─── */
.ofp-thanks{background:var(--white);border:1px solid var(--border-hairline);border-top:4px solid var(--orange-500);border-radius:16px;padding:30px 22px;box-shadow:var(--shadow-card)}
.ofp-thanks img{height:64px;width:auto;display:block;margin:0 0 20px}
.ofp-thanks p.lead{margin:0 0 16px;font:700 20px/1.35 var(--font-brand);color:var(--navy-800);text-wrap:pretty}
.ofp-thanks p{margin:0;font:400 18px/1.55 var(--font-brand);text-wrap:pretty}

/* ─── debug payload ─── */
.ofp-debug{margin:18px 0 0}
.ofp-debug button{background:none;border:none;padding:8px 0;font:400 14px/1.55 var(--font-brand);color:var(--navy-800);text-decoration:underline;cursor:pointer;min-height:44px}
.ofp-debug pre{margin:6px 0 0;padding:16px;background:var(--navy-900);color:#dbe6f5;border-radius:12px;overflow:auto;font:400 12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;max-height:60vh}

/* ═══════════════════════════════════════════════════════════════════════════
   Адаптив.
   База свёрстана «мобильной первой»: резиновые ширины, тач-цели от 44px,
   сетка вариантов сама складывается в одну колонку. Ниже — правки под
   конкретные размеры и особенности телефонов.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── безопасные зоны iPhone ───
   С viewport-fit=cover страница уходит под чёлку и под полоску Home.
   Без этих отступов шапка налезает на чёлку, а кнопка «Далее» в самом низу
   попадает под полоску и не нажимается. На Android и старых iPhone
   env(...) равен нулю — правила безвредны. */
.ofp-header{
  padding-top:calc(12px + env(safe-area-inset-top));
  padding-left:calc(20px + env(safe-area-inset-left));
  padding-right:calc(20px + env(safe-area-inset-right));
}
.ofp-wrap{
  padding-left:calc(16px + env(safe-area-inset-left));
  padding-right:calc(16px + env(safe-area-inset-right));
  padding-bottom:calc(64px + env(safe-area-inset-bottom));
}
.ofp-modal{padding-bottom:calc(22px + env(safe-area-inset-bottom))}

/* ─── планшет и десктоп ─── */
@media (min-width:900px){
  .ofp-wrap{padding-top:32px}
  .ofp-hero-photo{height:280px}
  .ofp-hero-photo h1{font-size:38px}
  .ofp-hero-body{padding:32px 30px 34px}
  .ofp-q{padding:22px}
}

/* ─── телефон: крупные и средние ─── */
@media (max-width:560px){
  .ofp-modal-back{align-items:flex-end;padding:0}
  .ofp-modal{max-width:none;border-radius:20px 20px 0 0;max-height:92vh;max-height:92dvh;padding:22px 18px 18px;padding-bottom:calc(18px + env(safe-area-inset-bottom))}
  .ofp-modal-title{font-size:21px}
  .ofp-modal-nav{flex-direction:column-reverse;gap:10px}
  .ofp-modal-nav .ofp-btn{width:100%}

  /* Шапка липкая: на невысоком экране 76px — заметная доля высоты. */
  .ofp-header{min-height:64px;gap:12px}
  .ofp-header img{height:44px;width:44px}
  .ofp-header span{font-size:17px}

  .ofp-q-title{font-size:17px}
  .ofp-progress-top b{font-size:18px}
}

/* ─── телефон: узкие экраны (iPhone SE, бюджетные Android — 320–375px) ─── */
@media (max-width:420px){
  .ofp-hero-photo{height:180px}
  .ofp-hero-photo h1{font-size:26px;left:16px;right:16px;bottom:16px}
  .ofp-hero-body{padding:22px 16px 24px}
  .ofp-hero-body p{font-size:17px}

  .ofp-wrap{padding-top:18px}
  .ofp-q{padding:15px;border-radius:14px}
  .ofp-opt{padding:12px}
  .ofp-thanks{padding:24px 18px}

  /* Две кнопки в ряд не помещались: «Назад» и «Далее» с min-width 150px
     требуют 312px, а на 320-пиксельном экране доступно 288px. */
  .ofp-nav{gap:10px}
  .ofp-nav .ofp-btn--md{min-width:0;flex:1;padding:0 14px;letter-spacing:.04em}
}

/* ─── телефон в горизонтальной ориентации ───
   Высоты мало: сокращаем фото и не даём модалке занять весь экран. */
@media (max-height:480px) and (orientation:landscape){
  .ofp-hero-photo{height:150px}
  .ofp-hero-photo h1{font-size:24px}
  .ofp-header{min-height:52px;position:static}
  .ofp-modal{max-height:96vh;max-height:96dvh;padding:16px 18px}
  .ofp-modal-title{margin-bottom:8px;font-size:19px}
}

/* ─── прочее ─── */
@media (hover:none){
  /* На тач-устройствах hover «залипает» после нажатия. */
  .ofp-btn--primary:hover{background:var(--orange-500)}
  .ofp-btn--outline:hover{background:transparent}
}
@media (prefers-reduced-motion:reduce){
  .ofp-spin{animation-duration:2s}
  .ofp-q,.ofp-reveal,.ofp-modal,.ofp-modal-back{animation:none}
}