/* Кримінальний кодекс 2.0 — the 2021 qualification-formula prototype, restyled
 * in GLeX colours on top of Bootstrap 4.6. Light theme only: the prototype is
 * a working tool with long legal wording, kept plain and high-contrast.
 */

@font-face{
  font-family:"Golos Text"; font-style:normal; font-weight:400 900; font-display:swap;
  src:url("/fonts/golos-text-cyrillic.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:"Golos Text"; font-style:normal; font-weight:400 900; font-display:swap;
  src:url("/fonts/golos-text-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --blue:#2E7CBF; --blue-strong:#22608F; --blue-deep:#173F60; --blue-tint:#E4EFF9;
  --ink:#3F3F3F; --title:#333333; --muted:#6E7783; --faint:#9AA3AE;
  --surface:#FFFFFF; --canvas:#F4F7FA; --surface-alt:#F1F5F9;
  --line:#DDE3E9;
  --ok:#1F8A5B; --warn:#C77A12; --err:#C0392B;
  --ok-tint:#E6F4ED; --warn-tint:#FBF0DF; --err-tint:#FBEBE8;
  --accent:#FFE7A3;
  --font:"Golos Text",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --r-field:8px; --r-card:12px; --r-sheet:18px;
  --shadow-card:0 2px 6px rgba(34,60,90,.07);
  --shadow-lift:0 8px 24px rgba(34,60,90,.14);
  --focus:0 0 0 3px rgba(46,124,191,.28);
}

body{
  font-family:var(--font); color:var(--ink); background:var(--canvas);
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
a{color:var(--blue)}
a:hover{color:var(--blue-strong)}
b,strong{font-weight:600}

.skip{position:absolute; left:-9999px; top:8px; z-index:2000; padding:8px 14px; border-radius:var(--r-field);
      background:var(--surface); color:var(--blue-strong); font-weight:600; box-shadow:var(--shadow-lift)}
.skip:focus{left:12px}

/* ── app bar ─────────────────────────────────────────────────────────────── */
.appbar{background:linear-gradient(120deg, var(--blue-deep), var(--blue-strong) 70%); color:#fff}
.appbar__in{display:flex; align-items:center; gap:16px; max-width:1320px; margin:0 auto; padding:12px 16px}
.appbar__brand{flex:none; display:block; border-radius:10px; background:#F7FAFC; padding:3px}
.appbar__brand img{display:block; width:40px; height:40px}
.appbar__brand:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(255,255,255,.55)}
.appbar__title{flex:1; min-width:0}
.appbar__eyebrow{display:block; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; opacity:.8}
.appbar h1{margin:0; font-size:20px; font-weight:700; line-height:1.25; color:#fff}
.appbar__actions{display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end}
.appbar .btn{border-radius:var(--r-field); font-weight:600}
.appbar .btn-light{color:var(--blue-strong)}
@media (max-width:575.98px){
  .appbar__in{flex-wrap:wrap}
  .appbar__title{flex-basis:calc(100% - 64px)}
  .appbar__actions{flex-basis:100%; justify-content:flex-start}
  .appbar h1{font-size:17px}
}

/* ── page ────────────────────────────────────────────────────────────────── */
.page{padding:20px 0 64px}
.container-xl{max-width:1320px}

/* Every step of the algorithm is a card; steps appear one after another as
   the answers come in. */
#form > fieldset:not(#act):not(#subjective_side),
#form > .form-group,
#form > .link-step,
#act > .form-group,
#subjective_side > .form-group{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  box-shadow:var(--shadow-card); padding:18px 20px; margin:0 0 14px;
  animation:step-in .25s ease-out;
}
#form fieldset{min-width:0}
#form fieldset .form-group{margin-bottom:12px}
#form fieldset .form-row > [class*="col"]{margin-bottom:8px}
@keyframes step-in{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ #form *{animation:none !important} }

#form h6{
  margin:0 0 12px; font-size:12.5px; font-weight:700; letter-spacing:.12em; color:var(--blue-strong);
}
#subjective_side > h6{margin:22px 0 10px 2px}
#form label{display:block; margin-bottom:6px; font-weight:600; color:var(--title); line-height:1.4}
#form label b{color:var(--blue-strong)}
#form .form-text{margin-top:8px; color:var(--muted); font-size:13.5px}

.form-control{
  border-color:var(--line); border-radius:var(--r-field); color:var(--ink);
  min-height:44px; font-size:15.5px;
}
.form-control:focus{border-color:var(--blue); box-shadow:var(--focus)}
.form-control[readonly]{background:var(--surface-alt); color:var(--muted)}
select.form-control{height:auto; padding-right:2rem; text-overflow:ellipsis}
/* A long legal option is read in full in the summary on the right. */
select.form-control option{white-space:normal}

/* The multi-select of features that raise the gravity by one degree. */
.bootstrap-select.form-control{min-height:44px}
.bootstrap-select > .dropdown-toggle{
  min-height:44px; border:1px solid var(--line); border-radius:var(--r-field); background:var(--surface);
  color:var(--ink); font-size:15.5px; white-space:normal; text-align:left;
}
.bootstrap-select > .dropdown-toggle:focus{outline:none !important; box-shadow:var(--focus)}
.bootstrap-select .filter-option-inner-inner{white-space:normal}
.bootstrap-select .dropdown-menu{width:100%; max-width:100%; box-sizing:border-box; border-radius:var(--r-field)}
.bootstrap-select .dropdown-menu li a{white-space:normal; padding:8px 12px 8px 34px; font-size:14.5px; line-height:1.4}
.bootstrap-select .dropdown-menu li.selected a{background:var(--blue-tint); color:var(--title)}
.bootstrap-select.show-tick .dropdown-menu .selected span.check-mark{top:10px; left:10px; right:auto; color:var(--ok)}
.bootstrap-select .dropdown-menu li a span.text{white-space:normal}
.bootstrap-select .notify{
  background:var(--warn-tint); border:1px solid var(--warn); color:var(--title);
  font-size:14px; border-radius:var(--r-field);
}

/* ── summary on the right ────────────────────────────────────────────────── */
.summary{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  box-shadow:var(--shadow-card); padding:18px 20px;
}
@media (min-width:992px){ .summary{position:sticky; top:16px} }
@media (max-width:991.98px){ .summary{margin-top:6px} }
.summary__title{margin:0 0 12px; font-size:15px; font-weight:700; color:var(--blue-strong);
                letter-spacing:.08em; text-transform:uppercase}
.summary__list{list-style:none; margin:0 0 12px; padding:0 0 12px; border-bottom:1px solid var(--line)}
.summary__list li{display:grid; grid-template-columns:150px minmax(0,1fr); gap:4px 12px; padding:3px 0; font-size:14.5px}
.summary__list li:empty{display:none}
.summary__list .k{color:var(--muted)}
.summary__list .v{color:var(--title); font-weight:500; overflow-wrap:anywhere}
@media (max-width:575.98px){ .summary__list li{grid-template-columns:1fr; gap:0} }
.summary__note{margin:0; color:var(--muted); font-size:13px}

/* ── result sheets (modals) ──────────────────────────────────────────────── */
.modal-backdrop.show{opacity:.55}
.sheet{border:0; border-radius:var(--r-sheet); overflow:hidden; box-shadow:0 18px 50px rgba(15,35,60,.35)}
.sheet__head{background:linear-gradient(120deg, var(--blue-deep), var(--blue-strong)); color:#fff; padding:18px 24px 16px}
.sheet__eyebrow{display:block; font-size:12px; letter-spacing:.12em; text-transform:uppercase; opacity:.8}
.sheet__title{margin:2px 0 0; font-size:22px; font-weight:700; color:#fff}
.sheet .modal-body{padding:20px 24px}
.sheet .modal-footer{padding:12px 24px 18px; border-top:1px solid var(--line); gap:8px}
.sheet .modal-footer > *{margin:0}
.sheet .btn{border-radius:var(--r-field); font-weight:600}
.sheet__lead{font-size:18px; color:var(--title)}
.facts{margin:0; padding-left:1.2em; color:var(--ink)}
.facts li + li{margin-top:6px}
.btn-primary{background:var(--blue); border-color:var(--blue)}
.btn-primary:hover,.btn-primary:focus{background:var(--blue-strong); border-color:var(--blue-strong)}

.kv{list-style:none; margin:0 0 14px; padding:0}
.kv li{display:grid; grid-template-columns:150px minmax(0,1fr); gap:2px 12px; padding:2px 0}
.kv .k{color:var(--muted)}
@media (max-width:575.98px){ .kv li{grid-template-columns:1fr; gap:0} }

.verdict{margin:16px 0 0; padding:14px 16px; border-radius:var(--r-card); background:var(--blue-tint);
         font-size:17px; color:var(--title)}

.sheet__tabs{margin-bottom:16px; border-bottom:2px solid var(--line)}
.sheet__tabs .nav-link{border:0; border-bottom:3px solid transparent; margin-bottom:-2px; color:var(--muted);
                       font-weight:600; padding:10px 14px}
.sheet__tabs .nav-link:hover{color:var(--blue-strong)}
.sheet__tabs .nav-link.active{color:var(--blue-strong); border-bottom-color:var(--blue); background:none}

.findings{list-style:none; margin:16px 0; padding:0}
.findings li{position:relative; padding:6px 0 6px 18px; color:var(--title)}
.findings li::before{content:""; position:absolute; left:2px; top:15px; width:7px; height:7px; border-radius:50%; background:var(--blue)}

.formula{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-card); margin-top:8px}
.formula__table{margin:0; min-width:860px; font-size:13.5px}
.formula__table caption{caption-side:top; padding:12px 14px 6px; color:var(--blue-strong); font-weight:700}
.formula__table thead th{background:var(--surface-alt); color:var(--muted); font-weight:600; vertical-align:middle;
                         text-align:center; border-top:0; border-bottom:1px solid var(--line); width:calc(100%/9)}
.formula__table tbody th,.formula__table tbody td{background:var(--accent); color:var(--title); font-weight:600;
                                                  text-align:center; vertical-align:middle; border-top:0}

#determSeverityOfCrimeContent p{margin-bottom:6px}
.wrongdoing,.voluntarilyRefused{font-size:17px; color:var(--title)}
.conclusions{margin-top:18px; padding-top:14px; border-top:1px solid var(--line)}
.conclusions__title{font-size:18px; font-weight:700; color:var(--blue-strong); margin:0 0 8px}
.degreeWarning{padding:10px 14px; border-radius:var(--r-field); background:var(--warn-tint); color:var(--title);
               border-left:3px solid var(--warn)}
.sanction{margin-top:12px; padding:14px 16px; border-radius:var(--r-card); background:var(--accent); color:var(--title)}
.sanction__title{display:block; font-weight:700; margin-bottom:4px}
.sanction ol{margin:0; padding-left:1.4em}

/* ── notices ─────────────────────────────────────────────────────────────── */
.notices{position:fixed; right:16px; bottom:16px; z-index:2000; display:grid; gap:10px; width:min(420px, calc(100% - 32px))}
.notice{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:start;
        padding:12px 14px; border-radius:var(--r-card); background:var(--surface); color:var(--title);
        border:1px solid var(--line); border-left:4px solid var(--warn); box-shadow:var(--shadow-lift);
        animation:step-in .2s ease-out}
.notice--info{border-left-color:var(--blue)}
.notice button{border:0; background:none; color:var(--muted); font-size:20px; line-height:1; padding:0 2px; cursor:pointer}
.notice button:hover{color:var(--title)}