/* Олимпиады и конкурсы · общий стиль. Тетрадь в клетку: бумага, тушь, красное поле. */
:root{
  --paper:#F6F8FB; --sheet:#FFFFFF; --field:#FFFFFF; --grid:#DCE4EF; --ink:#12203F; --ink-2:#4B5A78; --line:#C9D4E4;
  --sky:#0094C6; --sky-ink:#006E94; --gold:#E8A800; --red:#D93A2B; --focus:#0B5FFF;
  --a-steam:#0094C6; --a-adjacent:#5B6EE1; --a-teachers:#B87400; --a-humanities:#B2467A; --a-language:#2E9E6B;
  --a-arts:#D4572B; --a-music:#8A56C8; --a-sport:#3E8F3E; --a-ecology-tourism:#5C8A2E;
  --f-head:"Geologica","Onest",system-ui,sans-serif; --f-body:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --paper:#16233F; --sheet:#20315A; --field:#2B4070; --grid:#243A66; --ink:#F4F7FD; --ink-2:#BCC9E4; --line:#41578A;
    --sky:#5CCBF0; --sky-ink:#8BDCF6; --gold:#FFC738; --red:#FF7A6B; --focus:#9DBDFF;
    --a-steam:#5CCBF0; --a-adjacent:#A3AEFF; --a-teachers:#F0B24A; --a-humanities:#F08FBC; --a-language:#6FD3A3;
    --a-arts:#F59A74; --a-music:#C6A5F3; --a-sport:#8CD28C; --a-ecology-tourism:#ADD36E;}
  :root:not([data-theme=light]) .top{background:#0D162B}
}
:root[data-theme=dark]{
    --paper:#16233F; --sheet:#20315A; --field:#2B4070; --grid:#243A66; --ink:#F4F7FD; --ink-2:#BCC9E4; --line:#41578A;
    --sky:#5CCBF0; --sky-ink:#8BDCF6; --gold:#FFC738; --red:#FF7A6B; --focus:#9DBDFF;
    --a-steam:#5CCBF0; --a-adjacent:#A3AEFF; --a-teachers:#F0B24A; --a-humanities:#F08FBC; --a-language:#6FD3A3;
    --a-arts:#F59A74; --a-music:#C6A5F3; --a-sport:#8CD28C; --a-ecology-tourism:#ADD36E;}
:root[data-theme=dark] .top{background:#0D162B}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.6 var(--f-body);color:var(--ink);background-color:var(--paper);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:28px 28px;background-position:-1px -1px}
a{color:var(--sky-ink);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:2px}
h1,h2,h3{font-family:var(--f-head);line-height:1.15;margin:0;font-weight:800;letter-spacing:-.01em}
h1{font-size:clamp(30px,5.4vw,52px)}
h2{font-size:clamp(21px,3vw,28px);margin-bottom:14px}
h3{font-size:17px;font-weight:700}
p{margin:0 0 .8em;max-width:68ch}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.muted{color:var(--ink-2)}
.small{font-size:14px}

/* шапка */
.top{background:var(--ink);color:var(--paper)}
.top .wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap;min-height:56px;padding-top:6px;padding-bottom:6px}
.brand{font:800 20px var(--f-head);color:#fff;text-decoration:none;letter-spacing:-.01em}
.brand i{font-style:normal;color:var(--sky);font-weight:600;font-size:14px;margin-left:6px}
.top nav{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
.themebtn{background:transparent;border:1.5px solid rgba(255,255,255,.45);color:#fff;border-radius:3px;padding:5px 11px;font-size:14px;cursor:pointer}
.themebtn:hover{background:rgba(255,255,255,.14)}
.top nav a{color:#D5DDF0;text-decoration:none;padding:7px 12px;border-radius:3px;font-size:15px}
.top nav a:hover{background:rgba(255,255,255,.1);color:#fff}
.top nav a[aria-current=page]{background:var(--sky);color:#06202B;font-weight:600}

main{padding:30px 0 70px}
.sheet{background:var(--sheet);border:1px solid var(--line);border-radius:4px;padding:22px 24px}
section{margin-top:42px}

/* поле тетради: красная линия слева у крупных блоков */
.margin{border-left:3px solid var(--red);padding-left:18px}

/* метки области: цвет = область */
.tick{display:inline-block;width:10px;height:10px;border-radius:2px;background:var(--c,var(--sky));flex:none}
[data-area=steam]{--c:var(--a-steam)}[data-area=adjacent]{--c:var(--a-adjacent)}[data-area=teachers]{--c:var(--a-teachers)}
[data-area=humanities]{--c:var(--a-humanities)}[data-area=language]{--c:var(--a-language)}[data-area=arts]{--c:var(--a-arts)}
[data-area=music]{--c:var(--a-music)}[data-area=sport]{--c:var(--a-sport)}[data-area=ecology-tourism]{--c:var(--a-ecology-tourism)}

/* формы */
input,select,textarea,button{font:inherit;color:inherit}
input,select,textarea{padding:9px 11px;border:1px solid var(--line);border-radius:3px;background:var(--field);width:100%}
::placeholder{color:var(--ink-2);opacity:.9}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline-offset:0}
.btn{display:inline-block;padding:10px 18px;border:0;border-radius:3px;background:var(--ink);color:var(--paper);font-weight:600;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--sky-ink);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn:disabled{opacity:.55;cursor:default}

/* строки каталога */
.rows{border-top:2px solid var(--ink)}
.row{display:grid;grid-template-columns:18px 1fr auto;gap:4px 14px;align-items:start;padding:14px 4px;border-bottom:1px solid var(--line);background:var(--sheet)}
.row .tick{margin-top:7px}
.row h3 a{color:var(--ink);text-decoration:none}
.row h3 a:hover{color:var(--sky-ink);text-decoration:underline}
.meta{display:flex;flex-wrap:wrap;gap:2px 16px;color:var(--ink-2);font-size:14px;margin-top:3px}
.side{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:14px;text-align:right}
.badge{display:inline-block;padding:1px 8px;border-radius:2px;border:1.5px solid var(--ink);font-size:13px;font-weight:600;white-space:nowrap}
.badge.doc{background:var(--ink);color:var(--paper)}
.badge.in{border-color:var(--sky-ink);color:var(--sky-ink)}
.badge.out{border-style:dashed;border-color:var(--ink-2);color:var(--ink-2);font-weight:500}
.stars{color:var(--gold);letter-spacing:1px;white-space:nowrap}
@media(max-width:640px){.row{grid-template-columns:18px 1fr}.side{grid-column:2;flex-direction:row;align-items:center;text-align:left}}

/* подвал */
footer{border-top:1px solid var(--line);padding:22px 0 40px;color:var(--ink-2);font-size:14px}

/* списки с квадратными метками */
ul.sq{list-style:none;padding:0;margin:4px 0}
ul.sq li{position:relative;padding-left:20px;margin:6px 0;max-width:70ch}
ul.sq li::before{content:"";position:absolute;left:3px;top:.62em;width:7px;height:7px;background:var(--sky);border-radius:1px}

/* отзывы */
.cm h2{margin-bottom:6px}
.cm .it{padding:14px 0;border-bottom:1px solid var(--line)}
.cm .nm{font-weight:700}
.cm .tx{white-space:pre-wrap;margin:4px 0 0;overflow-wrap:anywhere;max-width:68ch}
.cm label{color:var(--ink-2)}
.cm .st{color:var(--gold);letter-spacing:1px}
.cm form{display:grid;gap:10px;margin-top:20px;padding:18px;border:1px solid var(--line);border-left:3px solid var(--red);border-radius:3px;background:var(--sheet);max-width:640px}
.cm form b{font-family:var(--f-head);font-size:17px}
.cm textarea{min-height:110px;resize:vertical}
.cm .msg{font-size:14px;min-height:1.2em}.cm .err{color:var(--red)}.cm .ok{color:var(--a-language)}
.cm .hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.cm .empty{border:1.5px dashed var(--line);border-radius:3px;padding:16px 18px;background:var(--sheet);max-width:640px}

@media (prefers-reduced-motion:no-preference){
  .bar{animation:grow .7s cubic-bezier(.2,.7,.2,1) both;transform-origin:left}
  @keyframes grow{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
}

.visually{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}