:root {
  --bg: #fafafa;
  --surface: #ffffff;
  --border: #dbdbdb;
  --text: #262626;
  --muted: #8e8e8e;
  --accent: #405de6;
  --danger: #ed4956;
  --radius: 12px;
  --gap: 16px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --surface: #121212;
    --border: #262626;
    --text: #fafafa;
    --muted: #a8a8a8;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.45;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Layout */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.brand {
  font-family: "Snell Roundhand", "Segoe Script", cursive;
  font-size: 1.5rem;
  color: var(--text);
}

.content {
  max-width: 935px;
  margin: 0 auto;
  padding: var(--gap);
}

.feed-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 var(--gap);
}

.section-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 8px;
}

.muted {
  color: var(--muted);
}

.error {
  color: var(--danger);
}

/* Feed grid */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--gap);
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.card-media {
  position: relative;
  display: block;
}

/* Play affordance, shared by the feed tile (decorative, inside the link) and
   the detail player (a real button that starts playback). */
.play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.22);
  cursor: pointer;
}

.card-media .play-overlay {
  pointer-events: none;
}

.play-icon {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  border: 2px solid rgba(255, 255, 255, 0.85);
}

.play-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #ffffff;
}

.card-meta {
  margin: 0;
  padding: 8px 10px;
  font-size: 0.8rem;
  color: var(--muted);
}

/* Single post */

.post {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--gap);
}

.post-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  margin-bottom: var(--gap);
}

/* The full-size image links to its own file so a click opens the untouched
   photo in the browser, the same as "open image in new tab" would. */
.post-image-link {
  display: block;
}

.post-image {
  /* Fit the whole photo inside the window while leaving room for at least
     three lines of caption underneath. The reserved space covers the sticky
     topbar plus the page and card padding, so the caption stays readable
     without scrolling. */
  width: auto;
  max-width: 100%;
  max-height: calc(100vh - 16rem);
  max-height: calc(100dvh - 16rem);
  margin: 0 auto;
}

/* Image slideshow: only the image changes, everything below stays static. */

.slideshow {
  text-align: center;
}

.slideshow-viewport {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.slideshow-slides {
  display: grid;
  justify-items: center;
  align-items: center;
}

/* Stack every image in one grid cell and reveal only the active one, so the
   box never resizes as you navigate. */
.slideshow-slides .slide {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.slideshow-slides .slide.is-active {
  visibility: visible;
  opacity: 1;
}

/* Vertical, translucent navigation bands over the left and right edges of the
   image, each with a white arrow. */
.slideshow-arrow {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  width: 18%;
  min-width: 48px;
  padding: 0;
  border: none;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
}

.slideshow-arrow[hidden] {
  display: none;
}

.slideshow-arrow--prev {
  left: 0;
  justify-content: flex-start;
  padding-left: 10px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
}

.slideshow-arrow--next {
  right: 0;
  justify-content: flex-end;
  padding-right: 10px;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
}

.slideshow-arrow:hover {
  background-color: rgba(0, 0, 0, 0.18);
}

.slideshow-arrow:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.slideshow-arrow svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

/* Position dots: thin translucent rings, the active one filled. Capped at
   three by the template. */
.slideshow-dots {
  position: absolute;
  right: 0;
  bottom: 10px;
  left: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 7px;
  pointer-events: none;
}

.slideshow-dot {
  width: 9px;
  height: 9px;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  transition: background 0.18s ease, transform 0.18s ease;
}

.slideshow-dot.is-active {
  background: #ffffff;
  transform: scale(1.15);
}

.video-frame {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.post-video {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: calc(100vh - 16rem);
  max-height: calc(100dvh - 16rem);
  margin: 0 auto;
  background: #000;
}

.video-frame.is-playing .play-overlay {
  display: none;
}
.caption {
  margin: var(--gap) 0;
}

/* Comments */

.comments {
  margin-top: var(--gap);
  padding-top: var(--gap);
  border-top: 1px solid var(--border);
}

.comment {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.comment:last-child {
  border-bottom: none;
}

.comment-author {
  margin: 0;
  font-weight: 600;
  font-size: 0.9rem;
}

.comment-body {
  margin: 2px 0;
}

.comment-meta {
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted);
}

.comment-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.comment-edit summary {
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--accent);
}

.comment-edit form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.comment-edit textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  resize: vertical;
}

.comment-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: var(--gap);
}

.comment-form textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  resize: vertical;
}

/* Reactions */

.reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--gap);
}

.reaction {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.reaction:hover {
  border-color: var(--accent);
}

.reaction.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.reaction-emoji {
  font-size: 1.05rem;
}

.reaction-count {
  font-size: 0.8rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Auth pages */

.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--gap);
}

.auth-card {
  width: 100%;
  max-width: 380px;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: var(--gap);
  text-align: left;
}

.auth-form label {
  font-size: 0.85rem;
  font-weight: 600;
}

.auth-form input {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

.auth-form .btn {
  margin-top: 8px;
}

/* Buttons */

.btn {
  padding: 9px 16px;
  border: none;
  border-radius: 8px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.btn-primary {
  background: var(--accent);
  color: #ffffff;
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}

.inline-form {
  display: inline;
  margin: 0;
}

.admin-list {
  padding-left: 18px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Admin */

.admin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  margin-bottom: var(--gap);
}

.admin-head h1 {
  margin: 0;
  font-size: 1.25rem;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.admin-table th,
.admin-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.admin-table tbody tr:last-child td {
  border-bottom: none;
}

.admin-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
}

.admin-thumb-wrap {
  position: relative;
  display: inline-block;
}

.admin-badge {
  position: absolute;
  left: 4px;
  bottom: 4px;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  font-size: 0.65rem;
}

.admin-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-preview {
  max-width: 320px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.admin-images {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.admin-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.admin-image .admin-preview {
  max-width: 160px;
}

.admin-image-remove {
  font-size: 0.8rem;
  color: var(--muted);
}

.post-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 520px;
  padding: var(--gap);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.post-form label {
  font-size: 0.85rem;
  font-weight: 600;
}

.post-form input[type="file"],
.post-form textarea {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

.post-form .btn {
  margin-top: 8px;
  align-self: flex-start;
}

.btn-link-danger {
  padding: 0;
  border: none;
  background: none;
  color: var(--danger);
  font: inherit;
  cursor: pointer;
}

.btn-link-danger:hover {
  text-decoration: underline;
}

.pager {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: var(--gap);
}

.admin-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-danger {
  background: var(--danger);
  color: #ffffff;
}

.admin-path {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  word-break: break-all;
}