/* Плакат: Swiss poster. Off-white paper, black rules, heavy grotesk, one red. */

:root {
  --bg: #efede6;
  --fg: #111;
  --muted: #6b6963;
  --line: #111;
  --soft: #e3e0d6;
  --accent: #e5341f;
  --ok: #efede6;
  --ok-bg: #111;
  --first: #fff;
  --first-bg: #e5341f;
  --no: #e5341f;
  --no-bg: transparent;
  --wait: #111;
  --wait-bg: transparent;
  --frozen: #6b6963;
  --frozen-bg: transparent;
  --font: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --radius: 0;
  --cell: 56px;
  --row: 54px;
}

body { font-size: 16px; }
.top { align-items: flex-end; border-bottom: 3px solid var(--fg); padding: 26px var(--gutter) 14px; gap: 10px 26px; }
.brand { font-size: 38px; font-weight: 800; letter-spacing: -.04em; line-height: .85; text-transform: uppercase; }
.nav { gap: 20px; padding-bottom: 2px; }
.nav a { text-transform: uppercase; font-weight: 700; font-size: 13px; letter-spacing: .02em; color: var(--fg); }
.nav a.on { color: var(--accent); }
.clock { font-size: 38px; font-weight: 800; letter-spacing: -.04em; line-height: .85; color: var(--accent); }
.clock.ph-after, .clock.ph-before { font-size: 20px; font-weight: 700; color: var(--fg); text-transform: uppercase; }
.who { font-weight: 600; font-size: 13px; text-transform: uppercase; color: var(--fg); padding-bottom: 2px; }
.who .me { color: var(--fg); }
.linklike { color: var(--fg); }
.badge { border-radius: 0; background: var(--accent); }
.main { padding-top: 22px; }

.board { --rankw: 64px; border-collapse: collapse; }
.board thead th { color: var(--fg); font-weight: 800; font-size: 22px; letter-spacing: -.02em; border-bottom: 3px solid var(--fg); height: 46px; vertical-align: bottom; padding-bottom: 6px; }
.board thead th.team, .board thead th.pen, .board thead th.solved { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.board thead th.rank { font-size: 12px; text-align: left; }
.board tbody td { border-bottom: 1px solid var(--fg); }
.board .rank { text-align: left; padding-left: 0; font-size: 30px; font-weight: 800; letter-spacing: -.05em; color: var(--fg); }
.board .team { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.board .cell { box-shadow: inset 0 0 0 3px var(--bg); }
.board .cell b { font-size: 17px; font-weight: 800; }
.board .cell i { opacity: .85; font-weight: 600; }
.board .cell.no { box-shadow: none; }
.board .cell.wait b, .board .cell.frozen b { font-weight: 800; }
.board .cell.wait { box-shadow: inset 0 0 0 3px var(--bg), inset 0 0 0 5px var(--fg); }
.board .cell.frozen { box-shadow: inset 0 0 0 3px var(--bg), inset 0 0 0 5px var(--muted); }
.board .solved { font-size: 30px; font-weight: 800; letter-spacing: -.04em; }
.board .pen { color: var(--fg); font-weight: 600; }
.board tfoot td { font-weight: 700; color: var(--fg); border-top: 3px solid var(--fg); }
.board tr.me .team, .board tr.me .rank { color: var(--accent); }

@media (max-width: 760px) {
  :root { --cell: 48px; --row: 48px; }
  .brand, .clock { font-size: 28px; }
  .board { --rankw: 46px; }
  .board .rank { font-size: 24px; }
  .board .team { font-size: 16px; }
}

.pitem a { border-bottom: 1px solid var(--fg); padding: 16px 0; grid-template-columns: 48px 1fr auto 40px; }
.plist { border-top: 3px solid var(--fg); }
.pcode { border-radius: 0; box-shadow: none; width: auto; height: auto; font-size: 26px; font-weight: 800; letter-spacing: -.03em; justify-content: flex-start; }
.ptitle { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.pstate { font-size: 16px; font-weight: 800; }
.pstate.ok { color: var(--fg); }
.pstate.no { color: var(--accent); }
.pitem.is-ok .ptitle { text-decoration: line-through; text-decoration-thickness: 2px; }
.phead { border-bottom: 3px solid var(--fg); padding-bottom: 12px; }
.phead .pcode { font-size: 44px; width: auto; height: auto; }
.phead h1 { font-size: 44px; font-weight: 800; letter-spacing: -.04em; line-height: .95; }
.phead .pstate { font-size: 22px; }

input[type=text], input[type=email], input:not([type]), textarea, select { border: 0; border-bottom: 2px solid var(--fg); background: transparent; padding: 10px 2px; }
.flabel { color: var(--fg); text-transform: uppercase; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.submit, .button, .inline-form button, .filters button { background: var(--fg); color: var(--bg); text-transform: uppercase; font-weight: 800; letter-spacing: .02em; padding: 13px 24px; }
.submit:hover { background: var(--accent); }
.flash { border-left: 6px solid var(--fg); background: transparent; padding: 6px 14px; }
.flash-ok { color: var(--fg); background: transparent; }
.flash-no, .flash-error { border-color: var(--accent); color: var(--accent); background: transparent; }
.flash-wait { color: var(--fg); background: transparent; }
.verdict.v-accepted, .v-accepted { color: var(--fg); }
button.btn-ok { background: var(--fg); color: var(--bg); }
.history h2 { color: var(--fg); text-transform: uppercase; font-size: 13px; font-weight: 800; border-bottom: 3px solid var(--fg); padding-bottom: 8px; }
.subs td { border-top: 1px solid var(--fg); }

.xw-cell, .sd-grid { border-color: var(--fg); }
.xw-cell input:focus, .sd-cell input:focus { background: #f6c9c2; }
.xw-cell.in-word { background: #e3e0d6; }
.guesses .w span { border: 2px solid var(--fg); border-radius: 0; }
.guesses tr.hit .w span { background: var(--fg); color: var(--bg); }
.qitem, .card { border: 0; border-top: 3px solid var(--fg); border-radius: 0; padding: 14px 0; }
.subnav { border-bottom: 3px solid var(--fg); }
.subnav a { text-transform: uppercase; font-weight: 700; font-size: 13px; color: var(--fg); }
.subnav a.on { color: var(--accent); }
/* a question in a quiz reads as a sentence, not as a caption */
.f-choice > legend.flabel, .f-multi > legend.flabel { text-transform: none; font-size: 16px; letter-spacing: 0; line-height: 1.35; }