/* --- Pastel rose palette ------------------------------------------------------
   Built around one colour: #FECFD9, a soft pastel rose (hue 347°).
   Every other shade is the same rose hue, just lighter or darker.
   Change the whole site's colours here. Every colour below is used through
   these variables, so the rest of the file never needs touching.
   The site is always light, whatever the browser or device is set to. */
:root {
  color-scheme: light;    /* keep built-in controls (dropdowns, scrollbars) light too */
  --bg: #fecfd9;          /* page background: the pastel rose itself */
  --surface: #ffffff;     /* cards, header */
  --field: #fff0f3;       /* text boxes and dropdowns */
  --text: #3d1119;        /* main text: darkest rose */
  --muted: #a3243f;       /* secondary text: deep rose */
  --accent: #C2244B;      /* buttons: rose */
  --on-accent: #ffffff;   /* text on accent buttons */
  --accent-text: #a3243f; /* rose used as text on pale backgrounds */
  --highlight: #F0607F;   /* decoration only (stripe, focus rings) */
  --accent-soft: #fff0f3; /* palest rose for messages and tints */
  --border: #f9b8c7;      /* thin lines */
  --danger: #b42318;      /* delete buttons */
  --on-danger: #ffffff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  border-top: 3px solid var(--highlight);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.brand { font-weight: 700; color: var(--text); text-decoration: none; }

nav a {
  margin-left: 1rem;
  color: var(--muted);
  text-decoration: none;
}
nav a:hover { color: var(--accent-text); }

main {
  flex: 1;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.hero h1 { margin-bottom: .25rem; }
.hero p { color: var(--muted); margin-top: 0; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-top: 1.5rem;
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  margin: 0;
}
.stats dt { font-size: .85rem; color: var(--muted); }
.stats dd { margin: 0; font-size: 1.4rem; font-weight: 600; }

.muted { color: var(--muted); font-size: .9rem; }
code { background: var(--border); padding: .1rem .35rem; border-radius: 4px; }

/* --- Login & buttons --- */
nav { display: flex; align-items: center; }

button {
  font: inherit;
  cursor: pointer;
  border: none;
  border-radius: 8px;
  padding: .55rem 1rem;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}
button:hover { filter: brightness(1.08); }

.logout { margin-left: 1rem; }
.logout button {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: .3rem .75rem;
  font-weight: 400;
}

.login { max-width: 380px; margin: 3rem auto 0; }
.login form { display: flex; flex-direction: column; gap: .35rem; }
.login label { font-size: .9rem; color: var(--muted); margin-top: .5rem; }
.login input {
  font: inherit;
  padding: .55rem .7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--field);
  color: var(--text);
}
.login input:focus { outline: 2px solid var(--highlight); outline-offset: 1px; }
.login button { margin-top: 1rem; }

.error {
  background: var(--accent-soft);
  color: var(--accent-text);
  border-radius: 8px;
  padding: .5rem .75rem;
}

/* --- Small screens: keep the header on one line --- */
.brand, nav a, .logout button { white-space: nowrap; }
header { flex-wrap: wrap; gap: .5rem; }

@media (max-width: 480px) {
  header { padding: .75rem 1rem; }
  nav { font-size: .95rem; }
  nav a, .logout { margin-left: .7rem; }
  .logout button { padding: .25rem .6rem; }
}

/* --- Gallery --- */
.gallery-head { display: flex; justify-content: space-between; align-items: baseline; }
.gallery-head h1 { margin: 0; }

.notice {
  background: var(--accent-soft);
  border-left: 3px solid var(--highlight);
  border-radius: 8px;
  padding: .5rem .75rem;
}

.upload {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
  margin-top: 1rem;
}
.upload input[type="file"] { flex: 1; min-width: 0; color: var(--muted); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .5rem;
  margin-top: 1.5rem;
}
.thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  transition: transform .15s;
}
.thumb:hover img { transform: scale(1.03); }
.empty { text-align: center; margin-top: 2rem; }

#lightbox {
  border: none;
  padding: 0;
  background: transparent;
  max-width: 95vw;
  max-height: 95vh;
}
#lightbox::backdrop { background: rgba(0, 0, 0, .88); }
#lightbox img {
  display: block;
  max-width: 95vw;
  max-height: 82vh;
  margin: 0 auto;
  border-radius: 8px;
}
.lightbox-bar {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-top: .75rem;
}
.lightbox-bar form { margin: 0; }
.lightbox-bar button { background: rgba(255, 255, 255, .15); min-width: 2.75rem; }
.lightbox-bar button.danger { background: var(--danger); color: var(--on-danger); }

/* --- Form fields and extra button styles --- */
.card input:not([type="file"]):not([type="hidden"]),
.photo-section input:not([type="hidden"]),
#lightbox textarea, select {
  font: inherit;
  padding: .5rem .65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--field);
  color: var(--text);
  min-width: 0;
}
button.secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
button.danger { background: var(--danger); color: var(--on-danger); }
button:disabled { opacity: .4; cursor: default; filter: none; }
label.inline { display: flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .9rem; }

.new-section {
  display: flex;
  gap: .75rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.new-section input { flex: 1; }

/* --- Titled sections --- */
.photo-section { margin-top: 2.25rem; scroll-margin-top: 1rem; }
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--border);
}
.section-head h2 { margin: 0; font-size: 1.3rem; overflow-wrap: anywhere; }
.photo-section > .muted { margin-top: .75rem; }
.photo-section .grid { margin-top: 1rem; }

.section-tools { position: relative; flex-shrink: 0; }
.section-tools summary {
  cursor: pointer;
  list-style: none;
  color: var(--muted);
  font-size: .9rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .2rem .7rem;
}
.section-tools summary::-webkit-details-marker { display: none; }
.section-tools[open] summary { color: var(--text); }
.tools-panel {
  position: absolute;
  right: 0;
  top: calc(100% + .4rem);
  z-index: 5;
  width: min(330px, calc(100vw - 2rem));
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: .9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
}
.tools-panel .row { display: flex; gap: .5rem; }
.tools-panel .row input { flex: 1; }
.tools-panel .row form, .tools-panel .row form button { flex: 1; width: 100%; }
.tools-panel > form:last-child button { width: 100%; }

/* --- Captions --- */
.photo { margin: 0; }
.photo figcaption {
  margin-top: .3rem;
  font-size: .85rem;
  color: var(--muted);
  line-height: 1.35;
  white-space: pre-line;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lightbox-caption {
  max-width: min(640px, 95vw);
  margin: .6rem auto 0;
  color: #f2f2f2;
  text-align: center;
  white-space: pre-line;
}
.lightbox-edit {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  width: min(480px, 95vw);
  margin: .75rem auto 0;
  padding: 1rem;
  background: var(--surface);
  border-radius: 12px;
}
.lightbox-edit[hidden] { display: none; }
#lightbox { overflow: auto; }
#lightbox.editing img { max-height: 42vh; } /* make room for the edit form */
.lightbox-edit label { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; color: var(--muted); }
.lightbox-edit textarea { resize: vertical; }

@media (max-width: 480px) {
  .new-section, .upload { flex-direction: column; align-items: stretch; }
  .upload input[type="file"] { width: 100%; }
  .upload label.inline select { flex: 1; }
}

footer {
  text-align: center;
  padding: 1rem;
  color: var(--muted);
  font-size: .85rem;
}

/* --- Long text on the home page --- */
.prose { padding: 1.75rem 2rem; }
.prose h1 { margin-top: 0; }
.prose h2 { margin-top: 2rem; font-size: 1.3rem; }
.prose p, .prose li { line-height: 1.75; }
.prose a { color: var(--accent-text); }
.prose blockquote {
  margin: 1.5rem 0;
  padding: .5rem 1rem;
  border-left: 3px solid var(--highlight);
  background: var(--accent-soft);
  border-radius: 0 8px 8px 0;
}
@media (max-width: 480px) { .prose { padding: 1.25rem; } }