/* Сайт «Генератор чек-листов» — оформление вокруг макетов.
   Палитра из брендбука: кремовый 60 %, оранжевый 30 %, хаки 10 %. Сами макеты эти стили не трогают. */

:root{
  --cream:#FFF9EB;      /* кремовый — фон */
  --orange:#FF7700;     /* оранжевый — один большой блок и главные кнопки */
  --khaki:#454335;      /* хаки — текст и линии */
  --khaki-soft:rgba(69,67,53,.68);
  --line:rgba(69,67,53,.22);
  --tint:rgba(255,119,0,.12);
  --f-head:"Sofia Sans Extra Condensed","Arial Narrow",Arial,sans-serif;
  --f-body:"Jura","Segoe UI",Arial,sans-serif;
  --f-hand:"Pangolin","Segoe Print",cursive;
  --gutter:16px;
  --maxw:760px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--khaki);font:500 18px/1.45 var(--f-body);min-width:320px}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* шапка */
.top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;padding:14px 0 10px;border-bottom:2px solid var(--khaki)}
.brand{white-space:nowrap;font:800 30px/1 var(--f-head);letter-spacing:.02em;text-transform:uppercase;text-decoration:none}
.brand small{display:block;font:500 14px/1.2 var(--f-body);text-transform:none;letter-spacing:0;margin-top:4px;color:var(--khaki-soft)}
.top .org{font:400 15px/1.2 var(--f-hand);text-decoration:none;color:var(--khaki-soft);white-space:nowrap}
.top .org:hover{color:var(--khaki)}

/* оранжевый блок — одно смелое место */
.hero{background:var(--orange);color:var(--khaki);margin:18px calc(-1 * var(--gutter)) 0;padding:22px var(--gutter) 24px}
.hero .wrap{padding:0}
.hero h1{margin:0 0 10px;font:800 clamp(40px,11vw,64px)/.95 var(--f-head);text-transform:uppercase;letter-spacing:.01em}
.numrow{display:flex;gap:10px;align-items:stretch}
.numrow input{flex:1;min-width:0;width:100%;height:92px;border:3px solid var(--khaki);border-radius:8px;background:var(--cream);color:var(--khaki);
  font:800 64px/1 var(--f-head);text-align:center;padding:0 10px;letter-spacing:.04em}
.numrow input::placeholder{color:var(--khaki-soft);opacity:1}
.numrow button{flex:none;min-width:120px;height:92px;border:0;border-radius:8px;background:var(--khaki);color:var(--cream);font:700 20px/1 var(--f-body);cursor:pointer;padding:0 18px}
.numrow button:hover{background:#2f2e24}
.hero .hint{margin:10px 0 0;font:400 18px/1.3 var(--f-hand)}

/* поиск по названию */
.search{margin:22px 0 6px}
.search label{display:block;font:700 16px/1.3 var(--f-body);margin-bottom:6px}
.search input{width:100%;height:52px;border:2px solid var(--khaki);border-radius:8px;background:#fff;color:var(--khaki);font:500 18px/1 var(--f-body);padding:0 14px}
.search input::placeholder{color:var(--khaki-soft);opacity:1}

/* список макетов как оглавление */
.list{list-style:none;margin:10px 0 0;padding:0}
.row{display:grid;grid-template-columns:auto 1fr auto;gap:8px 14px;align-items:center;min-height:120px;
  padding:12px 0 12px;border-bottom:1.5px solid var(--line);text-decoration:none;color:inherit;margin-right:calc(-1 * var(--gutter))}
.row:first-child{border-top:1.5px solid var(--line)}
.row:hover .num,.row:focus-visible .num{color:var(--orange)}
.row .num{font:800 clamp(64px,14vw,96px)/.85 var(--f-head);min-width:1.1ch;text-align:right;transition:color .15s}
.row .txt{min-width:0}
.row .ttl{display:block;font:700 20px/1.25 var(--f-body);margin-bottom:4px}
.row .dsc{display:block;font:500 15px/1.35 var(--f-body);color:var(--khaki-soft)}
.row .pg{display:block;font:400 15px/1.3 var(--f-hand);margin-top:4px}
.row .th{width:84px;height:112px;object-fit:cover;object-position:left top;border:1.5px solid var(--line);border-right:0;border-radius:4px 0 0 4px;background:#fff;display:block}
@media (max-width:360px){.row .th{display:none}.row{grid-template-columns:auto 1fr}}
@media (min-width:600px){.row .th{width:120px;height:150px}.row{min-height:160px}}

/* город */
.numrow input.city-input{font:700 28px/1 var(--f-body);text-align:left;letter-spacing:0;padding:0 16px}
.note{margin:18px 0 0;font-size:16px;color:var(--khaki-soft)}
.top .org a{color:var(--khaki)}
.top .org b{color:var(--khaki);font-weight:400}

/* сообщения */
.msg{margin:14px 0 0;padding:14px 16px;border-left:5px solid var(--orange);background:#fff;border-radius:0 8px 8px 0;font-size:17px}
.msg.err{border-left-color:var(--khaki)}
.msg b{font-weight:700}

/* подвал */
.foot{margin:34px 0 28px;padding-top:14px;border-top:2px solid var(--khaki);font-size:15px;color:var(--khaki-soft);display:flex;flex-wrap:wrap;gap:8px 20px}
.foot a{color:var(--khaki)}

/* страница макета */
.bar{position:sticky;top:0;z-index:20;background:var(--cream);border-bottom:2px solid var(--khaki);margin:0 calc(-1 * var(--gutter));padding:10px var(--gutter)}
.bar .wrap{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:0}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 18px;border-radius:8px;border:2px solid var(--khaki);
  background:transparent;color:var(--khaki);font:700 17px/1 var(--f-body);cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--tint)}
.btn.main{background:var(--orange);border-color:var(--orange);color:var(--khaki)}
.btn.main:hover{background:#ff8a24;border-color:#ff8a24}
.btn.quiet{border-color:var(--line);font-weight:500}
.btn[disabled]{opacity:.55;cursor:default}
.bar .spacer{flex:1}
.layout-head{display:flex;align-items:baseline;gap:12px;margin:16px 0 8px}
.layout-head h1{margin:0;font:800 44px/1 var(--f-head);text-transform:uppercase}
.layout-head .pg{font:400 16px/1.3 var(--f-hand);color:var(--khaki-soft)}
.frame{display:block;width:100%;border:0;background:transparent;min-height:400px;margin:6px 0 0}
.files{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.files p{flex-basis:100%;margin:0 0 4px;font-size:15px;color:var(--khaki-soft)}
.progress{height:6px;background:var(--line);border-radius:3px;overflow:hidden;margin-top:10px}
.progress i{display:block;height:100%;width:0;background:var(--orange);transition:width .2s}
@media (max-width:420px){.bar .btn{padding:0 12px;font-size:15px}}

/* уважение к «уменьшить анимацию» */
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}