/* The design of the mockup approved by the client (docs/mockup/index.html). */

/* Fonts are served from the site, not from Google, so visitors' addresses go nowhere else.
   Subsets from Google Fonts (SIL Open Font License, see /fonts/OFL-*.txt). */
@font-face{font-family:"PT Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/pt-sans-400-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"PT Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/pt-sans-400-latin.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:"PT Sans";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/pt-sans-700-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"PT Sans";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/pt-sans-700-latin.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}
/* Only the logo uses Merriweather, in Latin letters. */
@font-face{font-family:"Merriweather";font-style:normal;font-weight:900;font-display:swap;src:url(/fonts/merriweather-900-latin.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}

:root{
  --steel:#5D6B84;
  --steel-dark:#48546A;
  --steel-light:#D9DFEB;
  --steel-bg:#EEF1F6;
  --blue:#3B689B;
  --blue-dark:#2F5580;
  --text:#232B38;
  --muted:#5E6878;
  --border:#D3D9E3;
}
*{box-sizing:border-box}
body{margin:0;background:#fff;color:var(--text);font:16px/1.6 "PT Sans",Arial,sans-serif}
a{color:var(--blue)}
a:hover{color:var(--blue-dark)}
img{max-width:100%;display:block}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
h1,h2,h3{line-height:1.25;margin:0 0 12px}
h1{font-size:26px}
h2{font-size:22px;margin-top:36px}
h3{font-size:18px}
p{margin:0 0 14px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* header */
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:14px;padding-bottom:14px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.logo svg{flex:none}
.logo .name{font-family:Merriweather,Georgia,serif;font-weight:900;font-size:30px;line-height:1;color:#2E3A55;letter-spacing:.01em}
.logo .tag{display:block;font-size:13px;color:var(--muted);margin-top:6px}
.top-right{text-align:right;font-size:14px;color:var(--muted)}
.top-right .phone{display:block;font-size:18px;font-weight:700;color:var(--text);text-decoration:none}

nav.menu{background:var(--steel)}
nav.menu .wrap{overflow-x:auto}
nav.menu ul{list-style:none;margin:0;padding:0;display:flex}
nav.menu a{display:block;color:#fff;text-decoration:none;padding:11px 16px;white-space:nowrap}
nav.menu a:hover,nav.menu a.on{background:var(--steel-dark)}

/* search */
.search{background:var(--steel-bg);border:1px solid var(--border);border-radius:4px;padding:22px 24px;margin-top:24px}
.search p.note{color:var(--muted);margin-bottom:16px}
.fields{display:grid;grid-template-columns:1.2fr 1.2fr 1.1fr .8fr auto;gap:12px;align-items:end}
label{display:block;font-size:14px;font-weight:700;margin-bottom:4px}
input[type=text],input[type=password],select{width:100%;height:42px;padding:0 10px;border:1px solid #B9C2D0;border-radius:3px;font:inherit;background:#fff;color:var(--text)}
select{padding-right:6px}
input:focus,select:focus{outline:2px solid var(--blue);outline-offset:-1px;border-color:var(--blue)}
.btn{display:inline-block;height:42px;padding:0 22px;border:0;border-radius:3px;background:var(--blue);color:#fff;font:inherit;font-weight:700;cursor:pointer;text-decoration:none;line-height:42px;white-space:nowrap}
.btn:hover{background:var(--blue-dark);color:#fff}
.btn.grey{background:#fff;color:var(--text);border:1px solid #B9C2D0;line-height:40px}
.btn.grey:hover{background:var(--steel-bg)}
.btn[aria-busy=true]{opacity:.6;cursor:progress}
.popular{margin-top:14px;font-size:15px;color:var(--muted)}
.popular a{margin:0 4px}

/* results */
.results{margin-top:28px;scroll-margin-top:12px}
.res-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.res-head h2{margin:0}
.res-head span{color:var(--muted)}
.searched{margin:0 0 12px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 16px}
.searched b{color:var(--text)}
.ref-note{background:var(--steel-bg);border-left:4px solid var(--blue);padding:10px 14px;margin-bottom:12px}
table{width:100%;border-collapse:collapse;font-size:15px}
th{background:var(--steel);color:#fff;text-align:left;font-weight:700;padding:8px 10px;white-space:nowrap}
td{padding:7px 10px;border-bottom:1px solid var(--border);vertical-align:middle}
tbody tr:nth-child(even){background:#F6F8FB}
tbody tr:hover{background:#E9EEF6}
td.num,th.num{text-align:right;white-space:nowrap}
td.frc{font-weight:700}
td.act{text-align:right;width:1%;white-space:nowrap;font-size:14px}
.more{text-align:center;margin-top:16px}
.empty{background:#FFF8E6;border:1px solid #F0DDA8;border-radius:4px;padding:14px 16px}
.empty p{margin:0}

/* content */
.cols{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:40px;margin:12px 0 48px}
.photos{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
.photos figure{margin:0}
.photos .img{height:150px;border:1px solid var(--border);border-radius:3px;overflow:hidden;background:#f3f3f3}
.photos img{width:100%;height:100%;object-fit:cover}
.photos img.right{object-position:right center}
.photos figcaption{font-size:14px;color:var(--muted);margin-top:6px;line-height:1.45}
ul.plain{margin:0;padding-left:20px}
ul.plain li{margin-bottom:6px}
aside .box{border:1px solid var(--border);border-radius:4px;margin-top:36px}
aside .box + .box{margin-top:20px}
aside .box h3{background:var(--steel-bg);border-bottom:1px solid var(--border);font-size:16px;padding:10px 16px;margin:0}
aside .box .in{padding:14px 16px}
aside dl{margin:0 0 12px}
aside dt{font-size:14px;color:var(--muted)}
aside dd{margin:0 0 8px;font-weight:700}
.btns{display:flex;flex-wrap:wrap;gap:8px}
.page h1{margin-top:28px}
.page p{max-width:44em}
dl.contact{margin:0 0 20px}
dl.contact dt{font-size:14px;color:var(--muted)}
dl.contact dd{margin:0 0 12px;font-size:18px;font-weight:700}
aside ol{margin:0 0 4px;padding-left:20px}
aside ol li{margin-bottom:6px}

/* privacy */
.privacy h2{font-size:19px;margin-top:28px}
.small{font-size:14px;color:var(--muted)}

/* admin */
.admin-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:28px 0 20px}
.admin-head h1{margin:0}
.admin .card{border:1px solid var(--border);border-radius:4px;padding:16px 18px;margin:0 0 20px}
.admin .card h2{margin-top:0;font-size:19px}
.admin .card p:last-child{margin-bottom:0}
.admin .card.attention{border-color:#F0DDA8;background:#FFF8E6}
.admin .narrow{max-width:420px;margin-top:20px}
.admin .narrow input{margin-bottom:14px}
.admin input[type=file]{display:block;font:inherit;margin:4px 0 14px}
.flash{border-radius:4px;padding:12px 16px;margin:0 0 20px}
.flash p{margin:0}
.flash ul{margin:8px 0 0;padding-left:20px;font-size:14px}
.flash.ok{background:#EAF5EC;border:1px solid #B7DCC0}
.flash.error{background:#FDECEC;border:1px solid #F1BCBC}
.scroll{overflow-x:auto}
table.log{font-size:14px}
table.log td.imported{color:#2F7A3E;font-weight:700}
table.log td.rejected{color:#B3261E;font-weight:700}

footer{background:var(--steel-dark);color:#D9DFEB;font-size:14px}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:18px;padding-bottom:18px}
footer a{color:#fff;text-decoration:none;margin-left:14px}
footer a:hover{color:#fff;text-decoration:underline}

@media (max-width:960px){
  .fields{grid-template-columns:1fr 1fr}
  .fields .go{grid-column:1/-1}
  .fields .go .btn{width:100%}
}
@media (max-width:860px){
  .cols{grid-template-columns:1fr;gap:0}
}
@media (max-width:600px){
  .wrap{padding:0 14px}
  .top .wrap{flex-direction:column;align-items:flex-start;gap:8px}
  .top-right{text-align:left;display:flex;gap:14px;align-items:baseline;flex-wrap:wrap}
  .logo .name{font-size:26px}
  .logo svg{width:44px;height:46px}
  .search{padding:16px 14px}
  h1{font-size:22px}
  .fields{grid-template-columns:1fr}
  .photos{grid-template-columns:1fr}
  .photos .img{height:190px}
  /* On a phone each result is a card. */
  .results table,.results thead,.results tbody,.results tr,.results td{display:block}
  .results thead{display:none}
  .results tbody tr{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:10px 4px;border-bottom:1px solid var(--border)}
  .results tbody tr:nth-child(even){background:none}
  .results td{padding:0;border:0}
  .results td.b{grid-column:1;font-weight:700}
  .results td.m{grid-column:1}
  .results td.t{grid-column:1;color:var(--muted);font-size:14px}
  .results td.frc{grid-column:2;grid-row:1;text-align:right}
  .results td.frc::before{content:"№ FRC ";font-weight:400;color:var(--muted)}
  .results td.num{grid-column:2;grid-row:2}
  .results td.act{grid-column:2;grid-row:3;width:auto}
  .admin-head{flex-wrap:wrap}
  footer a{margin:0 14px 0 0}
}