/* How often each streaming site is asked anything. One shared number could not express
   "this one has started refusing and that one has not", which is what a shadow ban
   actually looks like from here. */
.checks-sites{display:flex;flex-direction:column;gap:14px;margin-bottom:8px}
.checks-site{padding:16px 18px;background:#141b16;border:1px solid var(--line);border-radius:10px}
.checks-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px}
.checks-head strong{font-size:13px;font-weight:600;color:#dbe8d9}
.checks-head span{font-size:11px;color:var(--muted);white-space:nowrap}
.checks-site label{margin-bottom:16px}
.checks-site select,.checks-site input{max-width:none;width:100%}
.checks-site .secondary{width:100%}
#checks-error:empty,#rules-error:empty{display:none}

/* One streamer's own rules, where the site's are not right for them. */
.rules-dialog{max-width:440px}
.rules-dialog h2{margin-bottom:4px}
.rules-dialog input,.rules-dialog select{width:100%;max-width:none}
.rules-pair{display:flex;gap:12px}
.rules-pair label{flex:1;min-width:0}
.rules-note{display:block;margin:-10px 0 22px;font-size:11px;line-height:1.7;color:var(--muted)}
.rules-dialog .dialog-actions{margin-top:4px}
@media(max-width:760px){
  .rules-pair{flex-direction:column;gap:0}
  .rules-dialog .dialog-actions button{flex:1}
}

/* Asking about one streamer now, on connections chosen for this one question. The rows
   of the answer are the point of the dialog, so the choice above them stays compact. */
/* The answers pile up under the choices, and a phone runs out of screen long before a
   desktop does. The middle scrolls on its own so that "Check again" stays where it was
   rather than being pushed off the bottom by the result of the last press. */
.check-dialog{max-width:440px;max-height:min(86dvh,780px);overflow:hidden}
/* The dialog itself is the column, not the form inside it: a height limit on the form
   has to be written as a length, and any length written there is wrong by the dialog's
   own padding, which is how the buttons ended up 56px below the box that clipped them. */
.check-dialog[open]{display:flex;flex-direction:column}
.check-dialog form{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.check-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.check-dialog .dialog-actions{flex:0 0 auto;padding-top:16px}
.check-dialog h2{margin-bottom:4px}
.check-dialog .muted{font-size:12px;margin:0 0 18px}
.check-routes{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.check-route{flex-direction:row;align-items:flex-start;gap:11px;margin:0;padding:11px 13px;
  background:#141b16;border:1px solid var(--line);border-radius:8px;cursor:pointer}
.check-route:hover{border-color:#44563e}
.check-route:has(:checked){border-color:var(--green);background:#1b241c}
.check-route input{margin:2px 0 0;accent-color:var(--green);flex-shrink:0}
.check-route span{display:block;font-size:12px;color:#dbe8d9}
.check-route small{display:block;color:var(--muted);font-size:11px;margin-top:3px}

/* What each connection saw. One line each, because the answer to the question being
   asked is the difference between the lines, not any one of them on its own. */
.check-lines{display:flex;flex-direction:column;gap:2px;margin-bottom:14px}
.check-line{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;
  padding:10px 13px;background:#141b16;border:1px solid var(--line);border-radius:8px;font-size:12px}
.check-line b{font-weight:500;color:#dbe8d9;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.check-line span{font-size:11px;color:#b7c8ba;white-space:nowrap}
.check-line small{grid-column:2/-1;font-size:11px;color:var(--muted);line-height:1.6}
.check-line .dot{background:#5f6f63}
.check-line.is-live{border-color:#4d5a3c;background:#1b241c}
.check-line.is-live .dot{background:var(--green);animation:pulse 2s infinite}
.check-line.is-live span{color:var(--green)}
.check-line.is-needs-login .dot,.check-line.is-error .dot{background:#e3c77e}
.check-line.is-needs-login span,.check-line.is-error span{color:#e3c77e}

.check-split,.check-note{font-size:11px;line-height:1.7;margin:0 0 14px;padding:11px 13px;border-radius:8px}
.check-split{color:#f1c89b;background:#3a2923;border:1px solid #654a34}
.check-note{color:#b7c8ba;background:#141b16;border:1px solid var(--line)}
.check-note.on{color:#d4edc2;background:#2c3628;border-color:#4c633a}
#check-error:empty{display:none}
@media(max-width:760px){
  .check-dialog .dialog-actions button{flex:1}
  /* The menu is a fixed tab bar at the bottom of a phone. A modal dialog is drawn above
     it, so its buttons would land on top of the tabs and be pressed by mistake. */
  .check-dialog{max-height:calc(100dvh - 104px - env(safe-area-inset-bottom,0px))}
}