/* The link preview checker (/link-preview-checker), on the tools' tool.css: on the left the link and what to fix
   for each network, then the tags they read; on the right the well, X above LinkedIn at their true widths, each with its
   crop map and one line (tool.css's checkers' well). On a narrower screen: the link, the cards, then the report. */
.links .tool { grid-template-areas: "ask view" "report view"; grid-template-rows: auto 1fr; }
.ask { grid-area: ask; }
.report { grid-area: report; }
.links .view { grid-area: view; }

/* The link: the foundation's field and the sheet's ink button. */
.url { display: flex; gap: 8px; }
.url .field { flex: 1; }
.url .btn:disabled { cursor: progress; }
.hint { min-height: 20px; margin: 12px 0 0; font-size: 14px; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }
.hint.bad { color: var(--bad); }

/* What to fix, a line each between hairlines, its weight a word in front: Fix in red, Note muted. */
.report { display: flex; flex-direction: column; gap: 32px; margin-top: 32px; }
.net { margin: 0 0 8px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.fixes { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hair); }
.fixes li {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 8px; padding: 10px 0; border-bottom: 1px solid var(--hair);
  font-size: 15px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; overflow-wrap: anywhere;
}
.fixes .lv { font-size: 13px; line-height: 22.5px; font-weight: 600; color: var(--muted); }
.fixes .fix { color: var(--ink); }
.fixes .fix .lv { color: var(--bad); }
.fixes .ok { display: block; color: var(--ok); font-weight: 500; }
/* The tags the networks read, and the image's facts. */
.tags { margin: 0; border-top: 1px solid var(--hair); }
.tags div { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 0 12px; padding: 8px 0; border-bottom: 1px solid var(--hair); font-size: 14px; line-height: 1.45; }
.tags dt { font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.tags dd { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-variant-numeric: tabular-nums; }
.tags .unset dd { color: var(--muted); }
.tags .bad dd { color: var(--bad); }

.links .stage { display: flex; flex-direction: column; align-items: stretch; gap: 56px; padding: 44px 24px 40px; }

@media (max-width: 1119px) {
  .links .tool { grid-template-areas: "ask" "view" "report"; grid-template-rows: none; }
  .report { margin-top: 0; }
}
@media (max-width: 759px) {
  .links .stage { gap: 44px; padding: 24px 0 32px; }
}