/* Header, market tabs / side rail, layout, game strip */
/* ---------- chrome: one header (brand · Odds | Arbs · search · status · books · settings), the game strip under it,
   then the market tabs. All three share the page's width and gutter so their edges line up. ---------- */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
/* the whole page a fifth bigger on a desktop (phones keep their own sizes): the header, the board and the popups scale
   as one; the sticky rail's height is in the scaled units */
@media (min-width: 1100px) {
  body > .board,
  body > .lgbar,
  body > .slatebar,
  body > .layout,
  body > .pop {
    zoom: 1.2;
  }
  .layout .secnav {
    max-height: calc(100vh / 1.2 - 2 * var(--s4));
  }
}
.board {
  background: var(--surface);
}
.board-in {
  display: flex;
  align-items: center;
  gap: var(--s4);
  height: 56px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font: 700 var(--t-xl)/1 var(--brand);
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
}
.brand img {
  width: 26px;
  height: 26px;
}
.brand i {
  font-style: normal;
  color: #1fa36a;
} /* the logo's green, same in both themes */
.views {
  display: flex;
  align-items: stretch;
  align-self: stretch;
  gap: var(--s1);
  margin-left: var(--s2);
}
.views button,
.views a {
  display: flex;
  text-decoration: none;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0 var(--s3);
  font: 500 var(--t-md)/1 var(--body);
  color: var(--muted);
  box-shadow: inset 0 -2px 0 transparent;
  transition:
    color 0.15s ease,
    box-shadow 0.15s ease;
}
.views button:hover,
.views a:hover {
  color: var(--ink);
}
.views button.on,
.views a.on {
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--ink);
}
.views a em,
.views button em {
  font: 600 var(--t-xs)/1 var(--body);
  font-style: normal;
  color: var(--pos);
  background: var(--pos-tint);
  padding: 3px 6px;
  border-radius: 999px;
}
.views a em:empty,
.views button em:empty {
  display: none;
}
.tools {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-left: auto;
}
.search {
  position: relative;
}
.search input {
  font: var(--t-md)/1 var(--body);
  width: 260px;
  max-width: 100%;
  height: var(--ctl);
  padding: 0 var(--s3) 0 34px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--raised);
  color: var(--ink);
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}
.search input:focus {
  outline: none;
  border-color: var(--line-strong);
  background: var(--surface);
}
.search input::placeholder {
  color: var(--faint);
}
.search svg {
  position: absolute;
  left: var(--s3);
  top: 50%;
  translate: 0 -50%;
  width: 14px;
  height: 14px;
  stroke: var(--faint);
  fill: none;
  stroke-width: 2;
}
.health {
  display: flex;
  gap: 6px;
  align-items: center;
}
.health span {
  position: relative;
  display: inline-flex;
}
.health img {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  opacity: 0.9;
}
.health i {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--faint);
  box-shadow: 0 0 0 2px var(--surface);
}
.health i.ok {
  background: var(--pos);
}
.health i.warn {
  background: var(--near);
}
.health i.bad {
  background: var(--bad);
}
/* Your books: a small dropdown in the top bar */
.mine {
  position: relative;
}
.mine summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--s1);
  height: var(--ctl);
  padding: 0 var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  cursor: pointer;
  background: var(--surface);
  transition: border-color 0.15s ease;
}
.mine summary:hover,
.mine[open] summary {
  border-color: var(--line-strong);
}
.mine summary::-webkit-details-marker {
  display: none;
}
.mine summary img {
  width: 18px;
  height: 18px;
  border-radius: 4px;
}
.mine summary b {
  font: 500 var(--t-md)/1 var(--body);
  color: var(--ink);
}
.ftog {
  display: none;
}
.mine summary::after {
  content: '';
  width: 6px;
  height: 6px;
  margin: 0 2px 3px 6px;
  border-right: 1.5px solid var(--faint);
  border-bottom: 1.5px solid var(--faint);
  rotate: 45deg;
}
.mine .menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 10;
  display: grid;
  gap: 2px;
  min-width: 190px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
}
/* the books button: three logos stacked, then the count; no chevron (it opens a popup) */
#mine summary {
  gap: var(--s2);
  padding: 0 var(--s3);
}
#mine summary::after {
  display: none;
}
#mine summary .lg {
  display: flex;
}
#mine summary .lg img {
  width: 16px;
  height: 16px;
  box-shadow: 0 0 0 2px var(--surface);
}
#mine summary .lg img + img {
  margin-left: -5px;
}
/* Your books (a popup, the line popup's card): sportsbooks and prediction markets side by side (stacked on a phone) */
.bkpick {
  width: min(780px, 100%);
}
.bkpick .x {
  margin-left: auto;
}
.bkpick .cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 12px;
}
.bkpick .col {
  display: grid;
  gap: 2px;
  align-content: start;
}
.bkpick .col + .col {
  padding-left: 12px;
  border-left: 1px solid var(--line);
}
.bkpick .mh {
  padding: 4px 8px 6px;
  font: 600 var(--t-xs)/1 var(--body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
@media (max-width: 640px) {
  .bkpick .cols {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .bkpick .col + .col {
    padding: 10px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}
.bkpick .col button,
.mine .menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 0;
  border-radius: 4px;
  background: none;
  cursor: pointer;
  font: 500 var(--t-md)/1 var(--body);
  color: var(--muted);
  text-align: left;
}
.bkpick .col button:hover,
.mine .menu button:hover {
  background: var(--raised);
}
.bkpick .col button img,
.mine .menu button img {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  filter: grayscale(1);
  opacity: 0.5;
}
.bkpick .col button.on,
.mine .menu button.on {
  color: var(--ink);
}
.bkpick .col button.on img,
.mine .menu button.on img {
  filter: none;
  opacity: 1;
}
.bkpick .col button::after,
.mine .menu button::after {
  content: '';
  margin-left: auto;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1.5px solid var(--line-strong);
}
.bkpick .col button.on::after,
.mine .menu button.on::after {
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: inset 0 0 0 2.5px var(--surface);
}
.settings summary::after {
  display: none;
}
.settings summary {
  width: var(--ctl);
  justify-content: center;
  padding: 0;
}
.settings summary svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.75;
}
.settings .menu .mh {
  padding: 4px 8px 6px;
  font: 600 var(--t-xs)/1 var(--body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.settings .menu button small {
  margin-left: 8px;
  font: 400 var(--t-sm)/1 var(--num);
  color: var(--faint);
}
.settings .menu button::after {
  border-radius: 50%;
}
/* market tabs: one row above the board (hidden with nothing to show: the NFL grid and Arbs) */
/* (a game's market tabs: a row above the board; on a wide screen a list on its left, see the media query below) */
.secnav {
  order: -1;
  min-width: 0;
  border-bottom: 1px solid var(--line);
}
.secnav:has(> #nav[hidden]) {
  display: none;
}
.secnav .subtabs {
  margin: 0;
}
/* the page's period: a row of short buttons over the tabs (on a wide screen, at the top of the rail: Game, the halves, the quarters) */
.gper {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) 0;
}
.gper .ng {
  flex: none;
  padding: 0 var(--s2) 0 var(--s4);
  font: 600 var(--t-xs)/1 var(--body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.gper .seg {
  display: inline-flex;
  gap: 1px;
  background: var(--line-strong);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  overflow: hidden;
}
.gper .seg button {
  border: 0 !important;
  background: var(--surface);
  padding: 6px 10px;
  font: 600 var(--t-sm)/1 var(--body);
  color: var(--muted);
  cursor: pointer;
  transition:
    background-color 0.15s,
    color 0.15s;
}
.gper .seg button:hover {
  color: var(--ink);
}
.gper .seg button.on {
  background: var(--sunk);
  color: var(--ink);
}
/* motion: the board fades in on a new tab or period; tabs that appear fade in */
#sections.swap {
  animation: swapin 0.18s ease-out;
}
@keyframes swapin {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
#nav.swap button {
  animation: tabin 0.2s ease-out;
} /* on a new period only (counts redraw the list often) */
@keyframes tabin {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  #sections.swap,
  #nav.swap button {
    animation: none;
  }
  .gper .seg button {
    transition: none;
  }
}
/* a group's heading in the tab list (Game, Players, Defense & special teams): a small label, not a tab */
.subtabs .ng {
  flex: none;
  align-self: center;
  padding: 0 var(--s2) 0 var(--s4);
  font: 600 var(--t-xs)/1 var(--body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}
.subtabs button.ng {
  border: 0;
  background: none;
  box-shadow: none;
  cursor: default;
  pointer-events: none;
} /* a label on the phone's row of tabs */
.subtabs button.ng em {
  display: none;
}
@media (min-width: 1240px) {
  .layout:has(> .secnav > #nav:not([hidden])) {
    grid-template-columns: 196px minmax(0, 1fr);
  }
  .secnav {
    order: -1;
    position: sticky;
    top: var(--s4);
    max-height: calc(100vh - 2 * var(--s4));
    overflow-y: auto;
    border: 0;
  }
  .secnav .subtabs {
    flex-direction: column;
    gap: 1px;
    overflow: visible;
  }
  .secnav .subtabs button {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 12px;
    border-radius: 4px;
    text-align: left;
    box-shadow: none;
  }
  .secnav .subtabs button:hover {
    background: var(--raised);
  }
  .secnav .subtabs button.on {
    background: var(--raised);
    box-shadow: inset 2px 0 0 var(--ink);
  }
  .secnav .subtabs .ng {
    align-self: stretch;
    padding: var(--s4) 12px var(--s1);
    white-space: normal;
    line-height: 1.3;
  }
  /* a group's heading folds it: a chevron at its right, turned when shut; shut, its tabs hide and it shows their count */
  .secnav .subtabs button.ng {
    display: flex;
    align-items: center;
    gap: var(--s2);
    width: 100%;
    text-align: left;
    pointer-events: auto;
    cursor: pointer;
    border-radius: 4px;
    font: 600 var(--t-xs)/1.3 var(--body);
  }
  .secnav .subtabs button.ng:hover {
    color: var(--ink);
  }
  .secnav .subtabs button.ng::after {
    content: '';
    width: 6px;
    height: 6px;
    margin-left: auto;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    rotate: 45deg;
    translate: 0 -2px;
    transition: rotate 0.15s;
  }
  .secnav .subtabs button.ng[aria-expanded='false']::after {
    rotate: -45deg;
    translate: 0 0;
  }
  .secnav .subtabs button.ng em {
    display: inline;
    margin-left: auto;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--faint);
    font-variant-numeric: tabular-nums;
  }
  .secnav .subtabs button.ng:has(em)::after {
    margin-left: var(--s2);
  }
  .secnav .subtabs button[data-shut] {
    display: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .secnav .subtabs button.ng::after {
      transition: none;
    }
  }
  .gper {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s1);
    padding: 0 0 var(--s2);
  }
  .gper .ng {
    padding: 0 12px var(--s1);
  }
  .gper .seg {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
  .gper .seg button {
    padding: 8px 0;
    text-align: center;
  }
  /* the game's shape: Game across, each half over its two quarters, the quarters under (each in its place if one's missing) */
  .gper .seg button[data-gper='full'] {
    grid-area: 1 / 1 / 2 / 5;
  }
  .gper .seg button[data-gper='1h'] {
    grid-area: 2 / 1 / 3 / 3;
  }
  .gper .seg button[data-gper='2h'] {
    grid-area: 2 / 3 / 3 / 5;
  }
  .gper .seg button[data-gper='1q'] {
    grid-area: 3 / 1;
  }
  .gper .seg button[data-gper='2q'] {
    grid-area: 3 / 2;
  }
  .gper .seg button[data-gper='3q'] {
    grid-area: 3 / 3;
  }
  .gper .seg button[data-gper='4q'] {
    grid-area: 3 / 4;
  }
  /* hockey: 60 min across its three periods, With OT (the game: overtime and the shootout) beside both rows */
  .gper .seg.nhl button[data-gper='reg'] {
    grid-area: 1 / 1 / 2 / 4;
  }
  .gper .seg.nhl button[data-gper='1p'] {
    grid-area: 2 / 1;
  }
  .gper .seg.nhl button[data-gper='2p'] {
    grid-area: 2 / 2;
  }
  .gper .seg.nhl button[data-gper='3p'] {
    grid-area: 2 / 3;
  }
  .gper .seg.nhl button[data-gper='full'] {
    grid-area: 1 / 4 / 3 / 5;
  }
}

/* ---------- layout ---------- */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s5);
  padding-block: var(--s5) 40px;
  align-items: start;
}

/* ---------- league row: under the header, a tab per league with games; its games in the strip below ---------- */
.lgbar {
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.lgs {
  display: flex;
  gap: 4px;
  height: 40px;
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: none;
  margin-inline: calc(var(--s3) * -1);
}
.lgs::-webkit-scrollbar {
  display: none;
}
.lgs button {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 var(--s3);
  border: 0;
  background: none;
  color: var(--muted);
  font: 700 var(--t-lg)/1 var(--display);
  letter-spacing: 0.02em;
  cursor: pointer;
}
.lgs button img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.lgs button small {
  font: 500 var(--t-xs)/1 var(--body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.lgs button:hover,
.lgs button.on {
  color: var(--ink);
}
.lgs button.on {
  box-shadow: inset 0 -2px 0 var(--ink);
}

/* ---------- game strip: under the league row, one chip per game of the shown league ---------- */
.slatebar {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.slate {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  margin-inline: calc(var(--s3) * -1);
}
.lgopts {
  display: none; /* the phone's league list (phone.css) */
}
.slate::-webkit-scrollbar {
  display: none;
}
.game {
  flex: none;
  display: grid;
  gap: 6px;
  align-content: start;
  width: 148px;
  padding: 10px var(--s3);
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: background-color 0.15s ease;
}
.game + .game::before {
  content: '';
  position: absolute;
  left: 0;
  top: var(--s3);
  bottom: var(--s3);
  width: 1px;
  background: var(--line);
}
.game:hover {
  background: var(--raised);
}
.game.on {
  background: var(--raised);
  box-shadow: inset 0 -2px 0 var(--ink);
}
.game.on::before,
.game.on + .game::before,
.game:hover::before,
.game:hover + .game::before {
  opacity: 0;
}
.game .when {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 14px;
  font: 500 var(--t-xs)/1 var(--body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.game .mrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.game .mt {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 700 var(--t-lg)/1 var(--display);
  letter-spacing: 0.02em;
}
.game .mt img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}
.game .ml {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 500 var(--t-sm)/1 var(--body);
  color: var(--muted);
}
.game .ml .bk {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}
.game .league {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font: 700 var(--t-xl)/1 var(--display);
  letter-spacing: 0.02em;
}
.game .league img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}
.game .livechip {
  font: 600 var(--t-xs)/1 var(--body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bad);
  background: var(--flash-down);
  padding: 2px 5px;
  border-radius: var(--r-sm);
}
.game .arbdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pos);
  margin-left: auto;
}
.dfs-sample {
  flex-basis: 100%;
  font-size: var(--t-xs);
  color: var(--near);
}
.game .gp {
  height: 12px;
  font: 500 var(--t-xs)/1 var(--body);
  color: var(--faint);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* market tabs: one scrolling row under the game title */
.subtabs {
  display: flex;
  gap: var(--s1);
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: var(--s4);
}
.subtabs::-webkit-scrollbar {
  display: none;
}
.subtabs button {
  flex: none;
  border: 0;
  background: none;
  padding: var(--s3) var(--s3) 13px;
  border-radius: 0;
  cursor: pointer;
  font: 500 var(--t-md)/1 var(--body);
  color: var(--muted);
  white-space: nowrap;
  box-shadow: inset 0 -2px 0 transparent;
  transition:
    color 0.15s ease,
    box-shadow 0.15s ease;
}
.subtabs button:hover {
  color: var(--ink);
}
.subtabs button.on {
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--ink);
}
/* the Arbs tab's filters (arbs.js arbFilters): Books, Games, Markets, each the header's menu (.mine), picked ones dark */
.afbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
}
.afl .menu {
  left: 0;
  right: auto;
  max-height: min(60vh, 480px);
  overflow-y: auto;
}
.afl .menu button em {
  margin-left: auto;
  font-style: normal;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
/* a book's or game's name (logo, code, @, logo, code): one row, its logos centred on the text, in the button and the menu */
.afl .afn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.mine.afl .afn img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  border-radius: 3px;
}
.afl .afn i {
  font-style: normal;
  color: var(--faint);
}
.afl summary b {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.afl.on summary {
  background: var(--ink);
  border-color: var(--ink);
}
.afl.on summary b {
  color: var(--ground);
}
.afl.on summary::after {
  border-color: var(--ground);
}
.subtabs button em {
  font-style: normal;
  font-weight: 500;
  color: var(--faint);
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
}

/* accounts (account.js): Sign in in the top bar, signed in a round initial with the account menu; the sign-in popup
   (the line popup's card): email, then the 6-digit code (Avi 10/15, notes/mock-sign-in.html) */
.acctslot:empty {
  display: none;
}
.signin {
  height: var(--ctl);
  padding: 0 var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  font: 500 var(--t-md)/1 var(--body);
  cursor: pointer;
}
.signin:hover {
  border-color: var(--line-strong);
}
.acct summary {
  width: var(--ctl);
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  border-color: var(--line-strong);
  background: var(--raised);
  font: 600 13px/1 var(--body);
  color: var(--ink);
}
.acct summary::after {
  display: none;
}
.acct .menu {
  min-width: 230px;
}
.acct .menu .who {
  padding: 8px 10px 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.acct .menu .who small {
  display: block;
  margin-bottom: 6px;
  font: 600 var(--t-xs)/1 var(--body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.acct .menu .who b {
  font: 500 var(--t-md)/1.2 var(--body);
  color: var(--ink);
  word-break: break-all;
}
.acct .menu button::after {
  display: none;
}
.signcard {
  width: min(400px, 100%);
}
.signcard .x {
  margin-left: auto;
}
.signcard .sf {
  display: grid;
  gap: 6px;
  font: 500 var(--t-xs)/1 var(--body);
  color: var(--muted);
}
.signcard .sem {
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--sunk);
  color: var(--ink);
  font: 400 15px/1 var(--body);
  outline: none;
}
.signcard .sem:focus,
.signcard .scode input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
.signcard .sgo {
  height: 44px;
  border: 0;
  border-radius: 6px;
  background: var(--ink);
  color: var(--surface);
  font: 600 15px/1 var(--body);
  cursor: pointer;
}
.signcard .sgo:disabled {
  opacity: 0.45;
  cursor: default;
}
.signcard .ssub {
  margin: -6px 0 0;
  color: var(--muted);
}
.signcard .ssub b {
  color: var(--ink);
  font-weight: 500;
}
.signcard .scode {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.signcard .scode input {
  height: 52px;
  min-width: 0;
  text-align: center;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--sunk);
  color: var(--ink);
  font: 500 22px/1 var(--num);
  outline: none;
}
.signcard .scode.bad input {
  border-color: var(--bad);
  animation: sshake 0.3s;
}
@keyframes sshake {
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .signcard .scode.bad input {
    animation: none;
  }
}
.signcard .serr {
  margin: -6px 0 0;
  color: var(--bad);
  font-size: var(--t-sm);
}
.signcard .slinks {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--t-sm);
}
.signcard .slinks button {
  border: 0;
  padding: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--faint);
  text-underline-offset: 3px;
}
.signcard .slinks button:hover {
  color: var(--ink);
}
.signcard .slinks button:disabled {
  color: var(--faint);
  text-decoration: none;
  cursor: default;
}
.signcard .pg {
  font: 600 18px/1 var(--body);
  letter-spacing: 0;
}