/* Page layouts: home shelves, the watch page, lists. */
/* ---------- shelves (home) ---------- */
.shelf { margin: 0 0 40px; container-type: inline-size; }
.shelf-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; }
.shelf-head h2 { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); margin: 0; }
.shelf-head .path { color: var(--faint); font-size: var(--font-size-sm); }
.shelf-head a.more { margin-left: auto; color: var(--accent-text); font-size: var(--font-size-md); font-weight: var(--font-weight-medium); }
.shelf-head a.more:hover { text-decoration: underline; }
.row { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 60px) / 4); gap: 20px; overflow-x: auto;
  scroll-snap-type: x proximity; padding-bottom: 8px; scrollbar-width: thin; }
.row .card { scroll-snap-align: start; }
@container (max-width: 1000px) { .row { grid-auto-columns: calc((100% - 40px) / 3); } }
@container (max-width: 700px) { .row { grid-auto-columns: calc((100% - 20px) / 2); } }
@container (max-width: 440px) { .row { grid-auto-columns: 85%; } }
.shelf-nav { margin-left: auto; display: flex; gap: 2px; }
.shelf-nav .icon-btn { width: 32px; height: 32px; }
.shelf-head a.more { margin-left: 8px; }
.hero-stats { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 28px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 18px; min-width: 150px; }
.stat b { display: block; font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; }
.stat span { color: var(--muted); font-size: var(--font-size-sm); }

/* ---------- entry (watch) page ---------- */
.watch { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail-w); gap: 28px; max-width: var(--content-max); margin: 0 auto; }
.watch.no-rail { grid-template-columns: minmax(0, 1fr); max-width: var(--content-no-rail-max); }
@media (max-width: 1200px) { .watch { grid-template-columns: minmax(0, 1fr); } }
.entry-title { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); line-height: 1.45; margin: 18px 0 8px; }
.entry-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; color: var(--muted); font-size: var(--font-size-md); }
.entry-meta a.cat { color: var(--accent-text); }
.entry-meta a.cat:hover { text-decoration: underline; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 6px; }
.watch.reader { max-width: var(--reader-max); }
.reader .entry-title { font-size: var(--font-size-4xl); margin-top: 8px; }
/* right rail */
.rail h3 { font-size: var(--font-size-base); font-weight: var(--font-weight-bold); margin: 0 0 12px; }
.rail-item { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 10px; margin-bottom: 12px; cursor: pointer; border-radius: var(--radius-md); }
.rail-item .thumb { border-radius: var(--radius-sm); }
.rail-item .badge { right: 5px; bottom: 5px; font-size: var(--font-size-2xs); padding: 2px 5px; }
.rail-item .card-title { font-size: var(--font-size-md); }
.rail-item.current { background: var(--surface-2); }
.rail-nav { display: flex; gap: 8px; margin-bottom: 16px; }
.rail-nav .btn { flex: 1; justify-content: center; }
/* ---------- search / lists ---------- */
.result { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; padding: 12px; border-radius: var(--radius-lg); cursor: pointer; }
.result:hover { background: var(--surface); }
.result .card-title { font-size: var(--font-size-lg); -webkit-line-clamp: 2; }
.result .snippet { color: var(--muted); font-size: var(--font-size-md); line-height: 1.75; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden; }
.where { display: inline-flex; gap: 6px; margin-left: 8px; }
.where span { font-size: var(--font-size-2xs); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 1px 6px; color: var(--muted); }
@media (max-width: 760px) { .result { grid-template-columns: minmax(0, 1fr); } .list-row { grid-template-columns: 120px minmax(0, 1fr) auto; } }
.day-head { font-size: var(--font-size-base); font-weight: var(--font-weight-bold); margin: 26px 0 12px; color: var(--muted); }
.list-row { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 16px; padding: 10px; border-radius: var(--radius-lg); align-items: center; cursor: pointer; }
.list-row:hover { background: var(--surface); }
.list-row .note-excerpt { color: var(--muted); font-size: var(--font-size-md); line-height: 1.7; margin-top: 4px; white-space: pre-wrap; display: -webkit-box;
  -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 10px; }
.tag-cloud a { background: var(--surface); border: 1px solid var(--border); padding: 8px 16px; border-radius: var(--radius-pill); font-size: var(--font-size-base); }
.tag-cloud a:hover { border-color: var(--accent); color: var(--accent-text); }
.tag-cloud a .n { color: var(--faint); font-size: var(--font-size-xs); margin-left: 6px; }