/*
 * The tile grid (src/web/tile-grid.ts): the profile's three columns and Discover's two are one component.
 *
 * Every tile is the same size (--pk-tile-ratio, 4 / 5), the gutter is 2px everywhere, the pane behind it is neutral
 * near-black (colour never sits behind media), and a tile is the picture and at most one corner glyph. No hover
 * overlay: a press dims the picture a little and nothing else. Its class names are new, so paint.css and the Glass look both
 * leave them alone.
 */

:root {
  --pk-tile-ratio: 4 / 5;
  --pk-tile-gap: 2px;
  --pk-tile-pane: #070709;
  --pk-tile-blank: #0e0e11;
  --pk-tile-ink: #f5f2f1;
  --pk-tile-quiet: #b9b3b7;
  --pk-tile-faint: #928c90;
  --pk-tile-line: rgba(245, 242, 241, .16);
  /* The bottom sheet's pane (Discover's Crafts): near-black, and warm paper in Matinee. */
  --pk-sheet: #17141c;
}
:root[data-look="matinee"] { --pk-sheet: #fffaf1; }

/* The pane a grid, its tabs, a list or an empty note sit on. */
.pk-tile-pane { overflow: hidden; border-radius: 18px; background: var(--pk-tile-pane); color: var(--pk-tile-ink); }
.pk-tile-empty { margin: 0; padding: 40px 24px; color: var(--pk-tile-quiet); font-size: 15px; line-height: 1.5; text-align: center; }

.pk-tiles { display: grid; grid-template-columns: repeat(var(--pk-tile-cols, 3), minmax(0, 1fr)); gap: var(--pk-tile-gap); margin: 0; padding: 0; list-style: none; background: var(--pk-tile-pane); }
.pk-tiles--2 { --pk-tile-cols: 2; --pk-tile-text: 15px; }
.pk-tiles--3 { --pk-tile-cols: 3; --pk-tile-text: 12.5px; }
.pk-tile-item { position: relative; min-width: 0; margin: 0; padding: 0; list-style: none; }
.pk-tile-frame { position: relative; }

.pk-tile { position: relative; display: block; aspect-ratio: var(--pk-tile-ratio, 4 / 5); overflow: hidden; border: 0; border-radius: 0; background: var(--pk-tile-blank); color: var(--pk-tile-ink); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.pk-tile-picture { display: contents; }
.pk-tile-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; margin: 0; border-radius: 0; background: var(--pk-tile-blank); object-fit: cover; transform: none; transition: none; }
/* A press dims the picture a little (a filter, never a bar or a scrim); a mouse pointer gets no overlay at all. */
.pk-tile:active .pk-tile-img, .pk-tile:active .pk-tile-text { filter: brightness(.8); }
.pk-tile:focus-visible { outline: var(--pk-focus-width) solid var(--pk-focus); outline-offset: -3px; }

/* The one corner glyph: top right, no scrim. */
.pk-tile-glyph { position: absolute; top: 6px; right: 6px; z-index: 1; width: 18px; height: 18px; color: #fff; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .7)); pointer-events: none; }

/* A text post is a tile: the first lines, centred, in the one sans. */
.pk-tile--text { display: grid; place-items: center; padding: 18px 14px; background: #131317; }
.pk-tile-text { display: -webkit-box; max-width: 100%; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 6; font-family: inherit; font-size: var(--pk-tile-text, clamp(13px, 3.9vw, 16px)); font-weight: 600; letter-spacing: -.01em; line-height: 1.32; text-align: center; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; color: var(--pk-tile-ink); }
.pk-tile--text .pk-tile-glyph { color: var(--pk-tile-quiet); filter: none; }

/* Covered as sensitive: no picture was sent; the tile opens the post page. */
.pk-tile--covered { display: grid; place-items: center; }
.pk-tile--covered .pk-tile-glyph { position: static; width: 26px; height: 26px; color: var(--pk-tile-quiet); filter: none; }
.pk-tile--blank { background: var(--pk-tile-blank); }

/* A clip's pause control is there for the keyboard and a screen reader; it shows only while it holds focus. */
.pk-tile-toggle { position: absolute; left: 6px; bottom: 6px; z-index: 2; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; border: 0; clip-path: inset(50%); white-space: nowrap; }
.pk-tile-toggle:focus-visible { width: auto; height: auto; min-height: 44px; padding: 0 16px; clip-path: none; border: 1px solid rgba(245, 242, 241, .3); border-radius: 999px; background: rgba(5, 5, 6, .86); color: var(--pk-tile-ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }

/* The same tile while a page of them loads. */
.pk-tile-item--skeleton .pk-tile { animation: pk-skeleton-pulse 900ms var(--pk-ease-quick) infinite alternate; }
@media (prefers-reduced-motion: reduce) { .pk-tile-item--skeleton .pk-tile { animation: none; } }
html.pk-save-data .pk-tile-item--skeleton .pk-tile { animation: none; }

@media (min-width: 760px) { .pk-tiles--3 { --pk-tile-text: 14px; } .pk-tiles--2 { --pk-tile-text: 16px; } .pk-tile-glyph { top: 8px; right: 8px; width: 20px; height: 20px; } }