/* Albumy stylesheet.
 *
 * STYLING CONTRACT — these class hooks are intentionally stable. Theme the site
 * by overriding the CSS custom properties in :root (and the [data-theme=…]
 * variants below), or by overriding these classes. They will not be renamed out
 * from under custom CSS:
 *   chrome   .nav .brand .spacer .user .theme-switch .site-main .site-footer
 *   index    .albums .album-card (.title .meta)
 *   album    .album-grid .photo-cell .photo-caption
 *   single   .single
 *   login    .login .error
 *   admin    .album-meta .editor-grid .editor-cell (.thumb .cap) .cell-actions
 *            .share-row .share-label .share-box (.share-link .revoke) .saved .err
 */

/* ---------- design tokens ---------- */
:root {
  --bg:#faf9f7; --surface:#ffffff; --fg:#1f1d1b; --muted:#7a756e; --line:#e7e3dd;
  --accent:#3b6ea5; --accent-fg:#ffffff;
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-head:var(--font-body);
  --maxw:1100px; --radius:8px; --gap:1rem; --space:1.5rem;
  --shadow:0 1px 3px rgba(0,0,0,.06);
  --band:rgba(0,0,0,.03);     /* zebra tint for alternating year rows */
}
:root[data-theme="dark"] {
  --bg:#141414; --surface:#1e1e1e; --fg:#ececec; --muted:#9a958c; --line:#2e2e2e;
  --accent:#7aa7d8; --accent-fg:#0b0b0b; --shadow:0 1px 3px rgba(0,0,0,.4);
  --band:rgba(255,255,255,.04);
}

/* ---------- base ---------- */
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.5 var(--font-body);
  -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3 { font-family:var(--font-head); font-weight:600; letter-spacing:-.01em; }
img { max-width:100%; }
.site-main { max-width:var(--maxw); margin:0 auto; padding:var(--space); }
.site-footer { max-width:var(--maxw); margin:3rem auto 0; padding:1rem var(--space) var(--space);
  border-top:1px solid var(--line); color:var(--muted); font-size:.8rem; }

/* ---------- header / nav ---------- */
.nav { display:flex; align-items:center; flex-wrap:wrap; gap:var(--gap);
  padding:.75rem var(--space); background:var(--surface); border-bottom:1px solid var(--line); }
.nav .brand { font-weight:700; color:var(--fg); }
.nav .brand-sep { color:var(--muted); margin:0 .4rem; }
.nav .brand-crumb { color:var(--muted); }
.nav .spacer { flex:1; }
.nav .user { color:var(--muted); font-size:.9rem; }
.nav form { margin:0; }
.nav button, .theme-switch { font:inherit; background:none; border:1px solid var(--line);
  border-radius:6px; padding:.3rem .6rem; color:var(--fg); cursor:pointer; }
.theme-switch { font-size:.85rem; }

/* ---------- album index (continuous square flow + year rail) ----------
   The covers are one densely-packed square grid (multiple years can share a
   row). A left rail labels each year once, positioned by JS (yearrail.js) at
   the row where that year's first album lands; years sharing a row stack. */
.timeline { display:grid; grid-template-columns:3.5rem 1fr; gap:.5rem; align-items:start; }
.year-rail { position:relative; }
.year-rail-label { position:absolute; left:0; right:.5rem; text-align:right;
  font-weight:600; font-size:.95rem; color:var(--muted); white-space:nowrap; }
.cover-grid { list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fill,150px); justify-content:start; gap:.5rem; }
.cover { margin:0; }
.cover a { position:relative; display:block; color:#fff; }
.cover img { width:150px; height:150px; object-fit:cover; display:block;
  border-radius:var(--radius); background:var(--line); box-shadow:var(--shadow); }
.cover-name { position:absolute; left:0; right:0; bottom:0; padding:.9rem .5rem .35rem;
  font-size:.75rem; line-height:1.15; border-radius:0 0 var(--radius) var(--radius);
  background:linear-gradient(transparent, rgba(0,0,0,.72));
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* admin index keeps the simple captioned-card grid */
.albums { list-style:none; padding:0; margin:0; display:grid;
  grid-template-columns:repeat(auto-fill,180px); justify-content:start; gap:1rem; }
.album-card a { display:block; color:var(--fg); }
.album-card img { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--radius);
  background:var(--line); display:block; box-shadow:var(--shadow); }
.album-card .title { display:block; margin-top:.5rem; font-weight:600; }
.album-card .meta { display:block; color:var(--muted); font-size:.85rem; }

/* ---------- album page (viewer + public) ----------
   Borderless rounded square tiles, matching the index. (A justified-rows
   option is still possible later — aspect ratios are on each .photo-cell.) */
.album-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:.75rem; }
.photo-cell { margin:0; }
.photo-cell > a { display:block; }
.photo-cell img { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--radius);
  display:block; background:var(--line); box-shadow:var(--shadow); }
.photo-caption { color:var(--muted); font-size:.85rem; margin-top:.35rem; }
.album-date { color:var(--muted); font-size:.95rem; margin:-.3rem 0 1.2rem; }
.back-to-albums { margin:2rem 0 .5rem; text-align:center; }
.crumbs { margin:0 0 .25rem; font-size:.9rem; color:var(--muted); }
.crumbs a { color:var(--muted); }
.crumbs a:hover { color:var(--accent); }
.crumbs span { opacity:.6; margin:0 .15rem; }

/* public single photo */
.single { text-align:center; }
.single img { height:auto; border-radius:var(--radius); }
.single .photo-caption { margin-top:.6rem; }

/* ---------- login ---------- */
.login { max-width:320px; margin:8vh auto; }
.login label { display:block; margin:.75rem 0; }
.login input { width:100%; padding:.5rem; border:1px solid var(--line); border-radius:6px;
  background:var(--surface); color:var(--fg); }
.login button { width:100%; padding:.6rem; border:0; border-radius:6px; background:var(--accent);
  color:var(--accent-fg); font-weight:600; cursor:pointer; }
.error { color:#c0392b; }

/* ---------- admin editor ---------- */
.album-meta { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1rem; margin:1rem 0 1.5rem; display:grid; gap:.6rem; max-width:560px; }
.album-meta label { display:grid; gap:.2rem; font-size:.85rem; color:var(--muted); }
.album-meta input, .album-meta textarea { font:inherit; padding:.4rem; border:1px solid var(--line);
  border-radius:6px; background:var(--bg); color:var(--fg); }
.album-meta button { justify-self:start; padding:.4rem .9rem; border:0; border-radius:6px;
  background:var(--accent); color:var(--accent-fg); font-weight:600; cursor:pointer; }

.album-settings { margin:0 0 1.5rem; }
.album-settings summary { cursor:pointer; color:var(--accent); font-size:.9rem; }
.album-settings .album-meta { margin-top:.75rem; }

.editor-grid { display:grid; grid-template-columns:repeat(auto-fill,200px); justify-content:start; gap:1rem; }
.editor-cell { margin:0; display:flex; flex-direction:column; gap:.45rem; }
.editor-thumb { position:relative; }
.editor-thumb img { width:100%; height:200px; object-fit:cover; display:block;
  border-radius:var(--radius); box-shadow:var(--shadow); background:var(--line); }
.editor-cell.is-cover .editor-thumb img { outline:3px solid var(--accent); outline-offset:2px; }
.cover-badge { position:absolute; left:.4rem; bottom:.4rem; z-index:2; font-size:.7rem; padding:.1rem .45rem;
  border-radius:5px; background:var(--accent); color:var(--accent-fg); }

/* optional filename / EXIF-date overlays (toggled per-browser, default off) */
.view-opts { display:flex; align-items:center; gap:1rem; margin:0 0 1rem; color:var(--muted); font-size:.9rem; }
.view-opts label { display:inline-flex; align-items:center; gap:.3rem; cursor:pointer; }
.editor-thumb .ov { position:absolute; left:0; right:0; display:none; z-index:1; padding:.2rem .4rem;
  font-size:.7rem; line-height:1.25; color:#fff; background:rgba(0,0,0,.6);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:none; }
.editor-thumb .ov-name { top:0; border-radius:var(--radius) var(--radius) 0 0; }
.editor-thumb .ov-date { bottom:0; border-radius:0 0 var(--radius) var(--radius); }
body.show-filenames .editor-thumb .ov-name { display:block; }
body.show-dates .editor-thumb .ov-date { display:block; }
.thumb-actions { position:absolute; top:.4rem; right:.4rem; display:flex; gap:.3rem;
  opacity:0; transition:opacity .15s; }
.editor-cell:hover .thumb-actions { opacity:1; }
.thumb-actions button { width:1.7rem; height:1.7rem; font-size:.85rem; line-height:1; cursor:pointer;
  border:0; border-radius:6px; background:rgba(0,0,0,.55); color:#fff; }
.thumb-actions .del { background:rgba(192,57,43,.85); }
.editor-thumb .drag-handle { position:absolute; bottom:.4rem; right:.4rem; z-index:2; cursor:grab;
  font-size:1rem; line-height:1; padding:.05rem .35rem; border-radius:5px; color:#fff;
  background:rgba(0,0,0,.55); opacity:0; transition:opacity .15s; user-select:none; }
.editor-cell:hover .drag-handle { opacity:1; }
.editor-thumb .drag-handle:active { cursor:grabbing; }
.editor-cell.sortable-ghost { opacity:.4; }
.album-settings .danger { margin-top:1rem; padding:.4rem .9rem; cursor:pointer;
  background:none; border:1px solid #c0392b; color:#c0392b; border-radius:6px; }
.editor-cell .cap { font:inherit; width:100%; padding:.4rem; border:1px solid var(--line);
  border-radius:6px; background:var(--bg); color:var(--fg); transition:box-shadow .15s; }
/* per-photo actions stay hidden until hover, but a created share link keeps them visible */
.cell-actions { min-height:1.6rem; opacity:0; transition:opacity .15s; }
.editor-cell:hover .cell-actions, .cell-actions:has(.share-link) { opacity:1; }

/* bulk selection */
.editor-thumb .sel { position:absolute; top:.4rem; left:.4rem; z-index:2; width:1.15rem; height:1.15rem;
  cursor:pointer; opacity:0; transition:opacity .15s; }
.editor-cell:hover .sel, body.selecting .sel, .editor-thumb .sel:checked { opacity:1; }
.editor-cell:has(.sel:checked) .editor-thumb img { outline:3px solid var(--accent); outline-offset:2px; }
.bulk-bar { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  padding:.6rem .8rem; margin:0 0 1rem; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); }
.bulk-bar .bulk-count { font-weight:600; }
.bulk-bar input[type=text] { font:inherit; padding:.35rem; border:1px solid var(--line);
  border-radius:6px; background:var(--bg); color:var(--fg); flex:1; min-width:10rem; }
.bulk-bar button { font:inherit; padding:.35rem .7rem; cursor:pointer; border:1px solid var(--line);
  border-radius:6px; background:none; color:var(--fg); }
.bulk-bar .danger { border-color:#c0392b; color:#c0392b; }

/* sharing */
.share-row { display:flex; align-items:center; gap:.6rem; margin:0 0 1rem; flex-wrap:wrap; }
.resort { display:flex; align-items:center; gap:.6rem; margin:0 0 1.5rem; flex-wrap:wrap; }
.resort select, .resort button { font:inherit; padding:.3rem .6rem; border:1px solid var(--line);
  border-radius:6px; background:var(--bg); color:var(--fg); cursor:pointer; }
.resort .resort-rev { color:var(--muted); font-size:.9rem; display:inline-flex; align-items:center; gap:.3rem; }
.share-label { color:var(--muted); font-size:.9rem; }
.share-box { display:inline-flex; align-items:center; gap:.3rem; flex-wrap:wrap; }
.share-box button { font-size:.8rem; padding:.25rem .6rem; cursor:pointer; background:none;
  border:1px solid var(--line); border-radius:6px; color:var(--muted); }
.share-box .share-link { font:inherit; font-size:.8rem; padding:.25rem .4rem; width:18rem; max-width:60vw;
  border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--fg); }
.share-box .revoke { color:#c0392b; }

/* shares dashboard */
.shares-table { width:100%; border-collapse:collapse; }
.shares-table th, .shares-table td { text-align:left; padding:.5rem .6rem; font-size:.9rem;
  border-bottom:1px solid var(--line); vertical-align:middle; }
.shares-table th { color:var(--muted); font-weight:600; }
.shares-table .muted { color:var(--muted); }
.shares-table .link-cell { display:flex; align-items:center; gap:.4rem; }
.shares-table .share-link { flex:1; font:inherit; font-size:.8rem; padding:.25rem .4rem;
  border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--fg); }
.shares-table .revoke { color:#c0392b; cursor:pointer; background:none;
  border:1px solid var(--line); border-radius:6px; padding:.25rem .6rem; }

/* users dashboard */
.users-table { width:100%; max-width:680px; border-collapse:collapse; }
.users-table th, .users-table td { text-align:left; padding:.5rem .6rem; font-size:.9rem;
  border-bottom:1px solid var(--line); vertical-align:middle; }
.users-table th { color:var(--muted); font-weight:600; }
.users-table .muted { color:var(--muted); }
.users-table summary { cursor:pointer; color:var(--accent); }
.users-table form { display:flex; gap:.4rem; margin-top:.4rem; }
.users-table .revoke { color:#c0392b; cursor:pointer; background:none;
  border:1px solid var(--line); border-radius:6px; padding:.25rem .6rem; }
.users-table input { font:inherit; padding:.35rem; border:1px solid var(--line);
  border-radius:6px; background:var(--bg); color:var(--fg); }
.users-table button[type=submit] { font:inherit; padding:.35rem .8rem; cursor:pointer;
  border:0; border-radius:6px; background:var(--accent); color:var(--accent-fg); }
.add-user { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; max-width:680px; }
.add-user input, .add-user select { font:inherit; padding:.4rem; border:1px solid var(--line);
  border-radius:6px; background:var(--bg); color:var(--fg); }
.add-user button { font:inherit; padding:.4rem .9rem; cursor:pointer; border:0;
  border-radius:6px; background:var(--accent); color:var(--accent-fg); font-weight:600; }

/* save feedback */
.saved { box-shadow:0 0 0 2px #3a8a3a !important; }
.err   { box-shadow:0 0 0 2px #c0392b !important; }

/* ---------- lightbox caption (PhotoSwipe) ---------- */
.pswp-caption { position:absolute; bottom:0; left:0; right:0; z-index:10;
  padding:1rem 1.2rem; color:#fff; text-align:center;
  background:linear-gradient(transparent, rgba(0,0,0,.55)); pointer-events:none; }
.pswp-caption .pswp-cap { font-size:.95rem; }
.pswp-caption .pswp-exif { font-size:.8rem; opacity:.7; margin-top:.15rem; }
.photo-exif { color:var(--muted); font-size:.85rem; margin-top:.3rem; }

/* ---------- responsive ---------- */
@media (max-width:640px) {
  .site-main { padding:1rem; }
  .nav { gap:.5rem; padding:.6rem 1rem; }
  .nav .brand { flex:1; }            /* keep brand left, let the rest wrap under */
  .nav button, .theme-switch { padding:.4rem .6rem; }   /* roomier tap targets */
  .album-grid { grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:.4rem; }
  .editor-cell { width:calc(50% - .5rem); }
  .timeline { grid-template-columns:2.2rem 1fr; gap:.3rem; }
  .year-rail-label { font-size:.8rem; }
  .cover-grid, .albums { grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); }
  .cover img { width:100%; height:auto; aspect-ratio:1/1; }
  .editor-grid { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
  .editor-thumb img { height:auto; aspect-ratio:1/1; }
}