:root {
  --bg: #fff;
  --fg: #1a1a1a;
  --muted: #666;
  --line: #e2e2e2;
  --soft: #f5f5f5;
  --link: #0645ad;
  --photo-bg: #fff;
  --ph1: #eee;
  --ph2: #f7f7f7;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;
    --fg: #e8e8e8;
    --muted: #9a9a9a;
    --line: #2e2e2e;
    --soft: #1e1e1e;
    --link: #8ab4f8;
    --photo-bg: #000;
    --ph1: #1c1c1c;
    --ph2: #262626;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

main { max-width: 640px; margin: 0 auto; padding: 16px; }
body.wide main { max-width: 1600px; }

a { color: var(--link); }
[hidden] { display: none !important; }

h1 { margin: 8px 0 4px; font-size: 1.6rem; }
.intro { margin: 0 0 14px; color: var(--muted); font-size: 0.95rem; }

.views { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; margin-bottom: 16px; }
.views a { padding: 4px 16px; border-radius: 999px; text-decoration: none; color: var(--fg); font-size: 0.9rem; }
.views a[aria-current] { background: var(--fg); color: var(--bg); }

/* gallery view: a single column of posts */
.post { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 20px; overflow: hidden; scroll-margin-top: 12px; }
.post header { padding: 12px 14px 10px; }
.post h2 { margin: 0; font-size: 1.15rem; }
.post .meta { margin: 2px 0 0; color: var(--muted); font-size: 0.85rem; }
.post .cap { white-space: nowrap; }
.post > p, .post details { margin: 8px 14px; font-size: 0.95rem; }
.post .caption { margin-top: 8px; font-size: 0.85rem; }
.post .colors { color: var(--muted); }
.post details { margin-bottom: 14px; }
.post summary { cursor: pointer; color: var(--link); }

.carousel { position: relative; background: var(--photo-bg); }
.slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.slides::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; scroll-snap-align: start; padding: 0; border: 0; cursor: zoom-in; }
.slide img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }

/* placeholder while a photo loads, then a quick fade-in */
.slide, .thumb { background: var(--ph1); animation: pulse 1.2s ease-in-out infinite; }
.slide img, .thumb img { opacity: 0; transition: opacity 0.25s; }
.slide.loaded, .thumb.loaded { background: var(--photo-bg); animation: none; }
.slide.loaded img, .thumb.loaded img { opacity: 1; }
@keyframes pulse { 50% { background-color: var(--ph2); } }
@media (prefers-reduced-motion: reduce) {
  .slide, .thumb { animation: none; }
  .slide img, .thumb img { transition: none; }
}
.count {
  position: absolute; top: 10px; right: 10px; padding: 1px 8px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 0.75rem;
}
.nav {
  display: none; position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, 0.9); color: #000; font-size: 1.4rem; line-height: 1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.prev { left: 10px; }
.next { right: 10px; }
@media (hover: hover) { .nav { display: block; } }
.dots { position: absolute; bottom: 8px; left: 0; right: 0; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(0, 0, 0, 0.25); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6); }
.dots span.on { background: #0a84ff; }

.credit { color: var(--muted); font-size: 0.75rem; }
.credit a { color: inherit; }

dl.specs { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 8px 0 0; font-size: 0.875rem; }
dl.specs dt { color: var(--muted); }
dl.specs dd { margin: 0; }

/* phones: posts go edge to edge like a feed */
@media (max-width: 640px) {
  .post { border-width: 1px 0; border-radius: 0; margin-left: -16px; margin-right: -16px; }
}

/* table view */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 6px; }
table { border-collapse: collapse; width: 100%; font-size: 0.85rem; }
th, td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
thead th { background: var(--soft); white-space: nowrap; }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
tbody th { position: sticky; left: 0; z-index: 1; background: var(--bg); white-space: nowrap; }
tbody th a { display: block; margin-top: 2px; }
td.models { white-space: nowrap; }
td.screen, td.battery { min-width: 120px; }
td.formats { min-width: 130px; }
td.software { min-width: 190px; }
td.port { min-width: 80px; }
td.size { min-width: 90px; }
td.models span { display: block; }
td.models small { color: var(--muted); }
.thumb { display: block; padding: 0; border: 1px solid var(--line); border-radius: 6px; cursor: zoom-in; overflow: hidden; }
.thumb.loaded { background: #fff; }
.thumb img { display: block; width: 72px; height: 72px; object-fit: contain; }

/* photo viewer */
dialog {
  border: 0; padding: 0; background: #000; max-width: 100vw; max-height: 100vh;
  width: 100vw; height: 100vh; color: #eee;
}
dialog::backdrop { background: rgba(0, 0, 0, 0.9); }
.viewer { display: flex; flex-direction: column; height: 100%; padding: 12px; }
.viewer-img { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.viewer-img img { width: 100%; height: 100%; object-fit: contain; }
.viewer-bar { display: flex; align-items: center; gap: 10px; padding-top: 10px; font-size: 0.9rem; }
.viewer-bar p { flex: 1; margin: 0; }
.viewer-bar .credit { color: #aaa; }
.viewer-bar button {
  font: inherit; color: #eee; background: #333; border: 1px solid #555; border-radius: 4px;
  padding: 6px 12px; cursor: pointer;
}

footer { border-top: 1px solid var(--line); margin-top: 32px; padding-top: 12px; font-size: 0.8rem; color: var(--muted); }