/* shanaty.ru/devlog — page-specific styles. Shared styles (header, floor band, notices) are in site.css. */

.feedline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 24px; margin-top: 22px; color: var(--muted); font-size: 15px; animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both; }
.feedline .more { color: var(--ink); font-size: 15px; }

/* One row per day: the date on the left, that day's entries on the right. */
.days { display: grid; gap: clamp(40px, 6vw, 88px); }
.day { display: grid; grid-template-columns: minmax(150px, 2fr) minmax(0, 7fr); gap: 20px 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.day-label { position: sticky; top: 92px; align-self: start; min-width: 0; }
.day-date { font: 700 clamp(22px, 2.6vw, 34px) / 1.1 var(--head); letter-spacing: -0.04em; }
.day-weekday { margin-top: 6px; font-size: 15px; color: var(--muted); }

.entries { display: grid; gap: 48px; min-width: 0; }
.entry { position: relative; min-width: 0; padding-left: 30px; scroll-margin-top: 100px; }
.entry::before { content: ''; position: absolute; left: 0; top: 4px; bottom: -48px; width: 2px; background: var(--line); }
.entry:last-child::before { bottom: 0; }
.entry::after { content: ''; position: absolute; left: -5px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2.5px var(--z); }
.entry.newest::after { background: var(--x); box-shadow: 0 0 0 4px color-mix(in srgb, var(--x) 22%, transparent); }
.entry:target::after { background: var(--y); box-shadow: 0 0 0 4px color-mix(in srgb, var(--y) 28%, transparent); }

.entry-time { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.entry h3 { margin: 6px 0 12px; font: 700 clamp(20px, 2vw, 28px) / 1.2 var(--head); letter-spacing: -0.04em; overflow-wrap: anywhere; }
.entry .summary { max-width: 62ch; color: var(--ink-2); }

.repos { display: grid; gap: 14px; margin-top: 22px; max-width: 72ch; }
.repo { display: grid; grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); gap: 2px 20px; align-items: baseline; }
.repo-name { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: var(--ink-line); overflow-wrap: anywhere; transition: color 0.2s, text-decoration-color 0.2s; }
.repo-name:hover { color: var(--z-text); text-decoration-color: currentColor; }
.repo-head { min-width: 0; }
.repo-count { display: block; margin-top: 2px; font-size: 13.5px; color: var(--muted); }
.repo-note { color: var(--ink-2); font-size: 15.5px; min-width: 0; }

.skeleton.lines { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.skeleton.lines span { aspect-ratio: auto; height: 92px; }

@media (max-width: 800px) {
  .day { grid-template-columns: minmax(0, 1fr); }
  .day-label { position: static; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
  .day-weekday { margin-top: 0; }
  .repo { grid-template-columns: minmax(0, 1fr); }
  .repo-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
  .repo-count { margin: 0; }
}