/* The video checker (/video-checker), on the foundation and the tools' tool.css: the editor is the file (a drop tile, then
   what the file says about itself between hairlines), the well holds a verdict for each network, the ffmpeg line and the
   pennant follow, and each network's limits stand on the field below. */

/* The editor: a file dragged over it tints it, as in the image size checker. */
.video .editor { border-radius: 12px; transition: background .15s ease-out, box-shadow .15s ease-out; }
.video .editor.drop { background: var(--well); box-shadow: 0 0 0 12px var(--well); }
.pick {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 168px;
  padding: 24px; border: 0; border-radius: 12px; background: var(--well); color: var(--ink); cursor: pointer; transition: box-shadow .15s ease-out;
}
.pick b { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.pick span { font-size: 14.5px; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
@media (hover: hover) { .pick:hover { box-shadow: inset 0 0 0 1px var(--hair); } }
/* A touch screen has no files to drag: the tile only chooses. */
.pick .coarse { display: none; }
@media (pointer: coarse) { .pick .fine { display: none; } .pick .coarse { display: inline; } }

/* What the file says: its name, then a fact a row, the value in ink on the right. */
.facts { margin-top: 24px; }
.facts .name { margin: 0; padding-bottom: 12px; border-bottom: 1px solid var(--hair); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.facts dl { margin: 0; }
.facts dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0 12px; border-bottom: 1px solid var(--hair); }
.facts dt { flex: none; font-size: 14.5px; color: var(--muted); }
.facts dd { min-width: 0; margin: 0; font-size: 15px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.facts dd.unread { font-weight: 400; color: var(--muted); }
.hint { min-height: 20px; margin: 12px 0 0; font-size: 14px; line-height: 1.45; color: var(--muted); }

/* The well: one network a row, its name beside its verdict, what to change under it. */
.video .stage { display: block; min-height: 0; padding: 4px 32px; }
.net { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: baseline; gap: 0 24px; padding: 28px 0 30px; }
.net + .net { border-top: 1px solid var(--hair); }
.net h2 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.verdict { margin: 0; font-size: 36px; font-weight: 700; line-height: 1.05; letter-spacing: -0.04em; text-wrap: balance; }
.verdict.ok { color: var(--ok); }
.verdict.no { color: var(--bad); }
.changes, .met { grid-column: 2; }
.changes { margin: 0; padding: 0; list-style: none; }
.changes li { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--ink-2); text-wrap: balance; font-variant-numeric: tabular-nums; }
.changes li:first-child { margin-top: 14px; }
.met { margin: 12px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.met:empty { display: none; }

/* The ffmpeg line: one command on a tinted tile, copied whole. */
.fix { grid-column: 1 / -1; margin-top: 24px; }
.fix[hidden] { display: none; }
.fix-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.fix h2 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.fix pre { margin: 4px 0 0; padding: 16px 18px; border-radius: 12px; background: var(--well); }
.fix code { font: 13.5px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.fix code span { white-space: nowrap; }
.copied { min-height: 20px; margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.copied:empty { margin: 0; min-height: 0; }
.numbers.bad { color: var(--bad); }

/* Each network's limits, on the field: the limit in big type, a line on what else it takes, as the image size checker
   sets its sizes. */
.nets { display: grid; gap: var(--s-7); }
.nets h3 { margin: 0 0 8px; font-size: 18px; font-weight: 600; line-height: 1.45; letter-spacing: -0.01em; }
.nets dl { margin: 0; }
.nets dl > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 24px; padding: 20px 0 22px; border-top: 1px solid var(--on-hair); }
.nets dl > div:last-child { border-bottom: 1px solid var(--on-hair); }
.nets dt { font-size: 16px; color: var(--on-2); }
.nets dd { margin: 0; }
.nets .n b { font-weight: inherit; }
.nets .n { grid-row: span 2; align-self: start; font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nets dd:not(.n) { grid-column: 1; font-size: 15px; line-height: 1.45; color: var(--on-2); text-wrap: pretty; }

@media (max-width: 1119px) {
  .video .editor { position: static; }
}
@media (max-width: 759px) {
  .pick { min-height: 136px; }
  /* On a phone the well runs edge to edge: each network's name sits over its verdict. */
  .video .stage { padding: 0 20px; }
  .net { grid-template-columns: 1fr; padding: 24px 0 26px; }
  .net h2 { margin-bottom: 6px; }
  .changes, .met { grid-column: 1; }
  .verdict { font-size: 30px; }
  .fix { margin-top: 20px; }
  .nets .n { font-size: 32px; }
}
@media (max-width: 359px) {
  .video .stage { padding: 0 16px; }
  .nets .n { font-size: 28px; }
}