:root { --bg: #fff8e7; --fg: #1a1a1a; --muted:#666; }
html, body { height: 100%; }
body { margin:0; background:var(--bg); color:var(--fg); font: 16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; }
.wrap, .recent, .gridwrap, .grid { box-sizing: border-box; }
body { overflow-x: hidden; }
.wrap { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr; }

/* Top: recent strip */
.recent { padding: 10px 12px; border-bottom: 1px solid #e3dcc8; background: var(--bg); }
.recent .sec-title { font-weight: 600; font-size: 14px; color: var(--muted); margin: 0 0 6px 2px; }
.row { display: flex; flex-wrap: nowrap; gap: 10px; overflow: hidden; padding-bottom: 6px; }
.recent .item { position: relative; display: inline-block; }
.recent .cover { width: auto; height: auto; object-fit: cover; background:#f5f5f5; border: 1px solid #e8e2cd; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.recent .tile { width: clamp(64px, 8vw, 110px); height: calc(clamp(64px, 8vw, 110px) * 1.5); display:flex; align-items:center; justify-content:center; text-align:center; padding:4px; background:#f5f5f5; border:1px solid #e8e2cd; box-shadow: 0 2px 8px rgba(0,0,0,0.08); font-size: 12px; color:#333; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }

/* Bottom grid */
.gridwrap { position: relative; padding: 10px 12px; background: var(--bg); border-bottom: 1px solid #e3dcc8; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; overflow: hidden; width: 100%; }
.grid .cell { position: relative; aspect-ratio: 2/3; background:#f5f5f5; border: 1px solid #e8e2cd; }
.grid .cell img { position:absolute; inset:0; width:100%; height:100%; object-fit: cover; }
.grid .cell .nocover { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:6px; font-size: 12px; color:#333; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; }

/* Hover icons (bottom-right) */
.icons { position: absolute; right: 4px; bottom: 4px; display: flex; gap: 3px; opacity: 0; transition: opacity 200ms ease-in-out; z-index: 2; }
.grid .cell:hover .icons, .recent .item:hover .icons { opacity: 1; }
.icon { display:inline-flex; align-items:center; justify-content:center; width: 16px; height: 16px; border-radius: 3px; background: #e7d8ad; border: 1px solid #c8b98f; color:#333; font: 600 10px/1 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; text-decoration: none; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.icon:hover { background: #e2cf97; }

/* Hover status badges (bottom-left) */
.badges { position: absolute; left: 4px; bottom: 4px; display: flex; gap: 4px; opacity: 0; transition: opacity 200ms ease-in-out; z-index: 2; }
.grid .cell:hover .badges, .recent .item:hover .badges { opacity: 1; }
.badge { display:inline-flex; align-items:center; justify-content:center; width: 16px; height: 16px; border-radius: 3px; background: rgba(255,255,255,0.92); border: 1px solid #d0c6a8; font: 700 10px/1 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; color:#2f7d32; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.badge.toread { color: #b46b07; }

/* More visible highlight for items with reviews */
.has-review { position: relative; }
.has-review::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 2px rgba(170, 40, 30, 0.45); border-radius: 2px; pointer-events: none; z-index: 1; }
.has-review::before { content: ""; position: absolute; left: 4px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: #c6503b; box-shadow: 0 0 0 1px rgba(0,0,0,0.15); pointer-events: none; z-index: 3; }

/* Popover overlay */
.popover { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 3000; }
.popover[hidden] { display: none; }
.pop-card { position: absolute; pointer-events: auto; background: rgba(255,255,255,0.98); border: 1px solid #e3dcc8; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.12); padding: 12px 14px; width: clamp(300px, 33vw, 700px); }
.pop-title { font-weight: 700; margin-bottom: 2px; }
.pop-author { color: var(--muted); margin-bottom: 8px; }
.pop-review { white-space: pre-wrap; max-width: 60ch; }
.pop-date { margin-top: 8px; font-size: 13px; color: #555; }
.pop-card.mini { width: max-content; max-width: 90vw; display: inline-block; padding: 10px 12px; }
.pop-date-label { font-weight: 600; color: #333; }
.pop-date-value { color: #444; margin-top: 2px; }
.pop-links { margin-top: 8px; font-size: 14px; }
.pop-links a { color: #1f4ab8; text-decoration: none; opacity: 0.85; margin-right: 12px; }
.pop-links a:hover { text-decoration: underline; opacity: 1; }

.home-link { position: fixed; right: 12px; bottom: 12px; z-index: 1000; opacity: 0.4; }
.home-link img { width: 28px; height: 28px; display: block; }
.home-link:hover { opacity: 0.7; }

@media (max-width: 900px) {
  .pop-card { max-width: 90vw; }
  /* Make grid cell width align with recent thumbnails on mobile */
  .grid { grid-template-columns: repeat(auto-fill, minmax(clamp(64px, 8vw, 110px), clamp(64px, 8vw, 110px))); }
}

/* Legend (top-right) */
.legend { position: fixed; right: 12px; top: var(--legend-top, 12px); z-index: 1100; background: rgba(255,255,255,0.97); border: 1px solid #e3dcc8; border-radius: 10px; padding: 10px 12px 26px 12px; box-shadow: 0 8px 20px rgba(0,0,0,0.1); font-size: 13px; color: #444; }
.legend-row { display: flex; align-items: center; gap: 6px; margin: 2px 0; }
.legend-text { opacity: 0.9; }
.legend .legend-dot { width: 9px; height: 9px; border-radius: 50%; background: #c6503b; box-shadow: 0 0 0 1px rgba(0,0,0,0.15); display: inline-block; }
.legend .home-link { position: absolute; right: 6px; bottom: 6px; display: inline-flex; opacity: 0.55; }
.legend .home-link img { width: 16px; height: 16px; }
.legend .home-link:hover { opacity: 0.8; }

/* Legend chevron toggle */
.legend .toggle { position: absolute; right: 6px; top: 6px; width: 22px; height: 22px; border: 1px solid #e3dcc8; background: #fff; color: #444; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
.legend .toggle:hover { background: #faf8f1; }
.legend .toggle svg { width: 14px; height: 14px; transition: transform 150ms ease; }
.legend.collapsed { padding: 6px 8px; }
.legend.collapsed .legend-row, .legend.collapsed .home-link { display: none; }
.legend.collapsed .toggle svg { transform: rotate(180deg); }