/* The image size checker (/image-size-checker), on the previewers' tool.css: the editor is the images (a drop tile,
   then a row for each), the well holds X above LinkedIn at their true widths, each with its crop maps and one line
   under it, and the sizes to use stand on the field below. Profiles are drawn here from preview/sizes.js; posts by the
   renderers in ./r/. */

/* The editor: what the images are for, then the images. A file dragged over it tints it, as in the previewers. */
.checker .editor { border-radius: 12px; transition: background .15s ease-out, box-shadow .15s ease-out; }
.checker .editor.drop { background: var(--well); box-shadow: 0 0 0 12px var(--well); }
.checker .seg.use { margin-bottom: 24px; }
.pick {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 216px;
  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; } }
.pick[hidden], .slots[hidden], .bar[hidden], .link[hidden] { display: none; }
.list { margin: 0; padding: 0; list-style: none; }
.list:not(:empty) { border-top: 1px solid var(--hair); }
.row { display: flex; align-items: center; gap: 16px; min-height: 80px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.thumb { flex: none; display: block; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: var(--well); cursor: pointer; }
span.thumb { cursor: default; }
.thumb.round { border-radius: 999px; }
.thumb img { display: block; width: 56px; height: 56px; object-fit: cover; }
.about { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.about b { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.about span { font-size: 14px; line-height: 1.45; color: var(--muted); font-variant-numeric: tabular-nums; }
.checker .bar { border-top: 0; }
.hint { min-height: 20px; margin: 12px 0 0; font-size: 14px; line-height: 1.45; color: var(--muted); }

/* The well: X, then LinkedIn, each at its true width; its name, crop maps and line keep to the frame's left edge. */
.checker .stage { display: flex; flex-direction: column; align-items: stretch; gap: 56px; padding: 44px 24px 40px; }
.shown { display: flex; flex-direction: column; align-items: center; }
.shown > .where, .shown > .maps, .shown > .said { width: var(--w, 100%); max-width: 100%; }
.where { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; margin: 0 0 4px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.where .link { font-size: 14px; }
.maps { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 20px; margin-top: 20px; }
.maps:empty { display: none; }
.map { margin: 0; }
.map canvas { display: block; border-radius: 6px; box-shadow: 0 0 0 .5px var(--hair); }
.map figcaption { margin-top: 6px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.said { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; font-variant-numeric: tabular-nums; }

/* A profile as each network draws it: the banner, the photo in a ring of the page's colour, the name. Sizes and places
   are set from preview/sizes.js; the rest is the networks' own type (x.css's face for X, li.css's for LinkedIn). */
.frame.prof { position: relative; border: 0; overflow: hidden; }
.prof.fh-x { background: #fff; color: rgb(15, 20, 25); font-family: TwitterChirp, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.prof.fh-x.dark { background: #000; color: rgb(231, 233, 234); }
.prof.fh-li { border-radius: 8px; background: #fff; color: rgba(0, 0, 0, .9);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Oxygen, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif; }
.prof.fh-li.dark { background: rgb(27, 31, 35); color: rgba(255, 255, 255, .9); }
.prof.fh-li.phone { border-radius: 14px; }
.pf-banner { position: relative; overflow: hidden; background: rgb(207, 217, 222); }
.dark .pf-banner { background: rgb(51, 54, 57); }
.pf-banner img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pf-photo { position: absolute; box-sizing: border-box; border-style: solid; border-color: #fff; border-radius: 999px; overflow: hidden; background: #fff; }
.prof.fh-x.dark .pf-photo { border-color: #000; background: #000; }
.prof.fh-li.dark .pf-photo { border-color: rgb(27, 31, 35); background: rgb(27, 31, 35); }
.pf-photo img { display: block; width: 100%; height: 100%; border-radius: 999px; object-fit: cover; }
.pf-ids { display: flex; flex-direction: column; padding: 0 16px 20px; }
.fh-x .pf-ids b { font-size: 20px; line-height: 24px; font-weight: 700; }
.fh-x .pf-ids span { font-size: 15px; line-height: 20px; color: rgb(83, 100, 113); }
.fh-x.dark .pf-ids span { color: rgb(113, 118, 123); }
.pf-edit { position: absolute; right: 16px; display: flex; align-items: center; height: 36px; padding: 0 16px; border: 1px solid rgb(207, 217, 222); border-radius: 999px; font-size: 15px; font-weight: 700; }
.fh-x.dark .pf-edit { border-color: rgb(83, 100, 113); }
.fh-li .pf-ids { padding: 0 24px 24px; }
.fh-li .pf-ids b { font-size: 24px; line-height: 30px; font-weight: 600; }
.fh-li .pf-ids span { font-size: 16px; line-height: 20px; }
.fh-li.phone .pf-ids { padding: 0 16px 20px; }
.fh-li.phone .pf-ids b { font-size: 20px; line-height: 26px; }
.fh-li.phone .pf-ids span { font-size: 14px; }

/* The sizes to use, on the field: each network's three, the size in big type, a line on how it's shown. */
.sizes { margin-top: 120px; }
.sizes h2 { margin: 0 0 32px; font-weight: 700; font-size: 40px; line-height: 1; letter-spacing: -0.04em; }
.nets { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; max-width: 1080px; }
.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) {
  .checker .editor { position: static; }
}
@media (max-width: 899px) {
  .nets { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width: 759px) {
  .pick { min-height: 168px; }
  .checker .stage { gap: 44px; padding: 24px 0 32px; }
  .shown > .where, .shown > .maps, .shown > .said { padding: 0 20px; width: 100%; }
  .stage .frame.prof { border-radius: 0; }
  .sizes { margin-top: 84px; }
  .sizes h2 { font-size: 32px; margin-bottom: 20px; }
  .nets .n { font-size: 32px; }
}
@media (max-width: 359px) {
  .shown > .where, .shown > .maps, .shown > .said { padding: 0 16px; }
  .nets .n { font-size: 28px; }
}