/* Light Accessible — site-wide theme.
   High-contrast light palette with green accent, replacing the dark
   editorial theme for readers who prefer a lighter, more accessible
   reading experience. Loaded via layout.html AFTER style.css. */

:root {
  --paper: #fbfaf7;
  --card:  #ffffff;
  --card-2:#f0ede6;
  --ink:   #2b2823;
  --muted: #5c574c;
  --line:  #e4ddd0;
  --accent:#2f6b4f;
  --accent-deep:#25563f;
  --terra: #2f6b4f;
  --stage: #141210;
  --ok:    #4a8a5c;
  --danger:#c8553d;
  --react-bg: rgba(47,107,79,.10);
  --shadow: 0 1px 0 rgba(20,15,10,.06), 0 8px 20px -14px rgba(20,15,10,.18);
  --shadow-lift: 0 1px 0 rgba(20,15,10,.08), 0 18px 34px -18px rgba(20,15,10,.28);
}

body { background: var(--paper); color: var(--ink); }
::selection { background: var(--accent); color: #fff; }

/* Global focus-visible — ensure keyboard focus is always visible
   on the light paper background. Placed early so element-specific
   rules (form-input box-shadow, stagetool outlines, etc.) override it
   where they provide their own visible indicators. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Masthead + nav */
.mast { background: var(--paper); border-bottom-color: var(--line); }
.brand { color: var(--ink); }
.brand:hover { color: var(--accent); }
.tabs { border-top-color: var(--line); }
.tab { color: var(--muted); }
.tab:not(.active):hover { color: var(--ink); }
.tab.active { color: #fff; background: var(--accent); border-bottom-color: transparent; border-radius: 999px; }
.tab-add { color: var(--accent); }
.tab-add:hover { color: var(--accent); }
.tab-admin { color: var(--muted); }

.textsize-btn { color: var(--ink); border-color: var(--line); background: transparent; }
.textsize-btn:hover { border-color: var(--accent); color: var(--accent); }
.textsize-btn[aria-pressed="true"], .textsize-btn.active {
  background: var(--accent); color: #fff; border-color: var(--accent);
}

.theme-btn { min-height:44px; min-width:44px; border:1px solid var(--line); background:transparent; color:var(--ink); border-radius:0; font-family:var(--sans); font-weight:600; cursor:pointer; }
.theme-btn:hover { border-color: var(--accent); color: var(--accent); }
.theme-btn[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }

.signed-in { color: var(--muted); }
.signout-form .btn-text:hover { color: var(--accent); }

/* Links + headings */
a { color: var(--accent); }
a:hover { color: var(--accent-deep); }
h1, h2, h3 { color: var(--ink); }

/* Album + photo tiles */
.album-cover { background: var(--card-2); }
.album-card-count { color: var(--muted); }
.photo-thumb { background: var(--card-2); }

/* Chips */
.person-chip { background: var(--card); color: var(--ink); border-color: var(--line); }
.person-chip:hover { border-color: var(--accent); color: var(--accent); }
.chip-av { background: var(--card-2); }

/* Comments */
.comment { border-top-color: var(--line); }
.comment-when { color: var(--muted); }
.comment-form label { color: var(--ink); }

/* Forms */
.form-input, .form-textarea, .form-select, .comment-form textarea,
.new-album-input, .new-person-input,
.person-row-tools input, .person-row-tools select,
.search-form select, .search-form .search-text {
  background: var(--card); color: var(--ink); border-color: var(--line);
}
.form-input:focus, .form-textarea:focus, .form-select:focus,
.comment-form textarea:focus,
.new-album-input:focus, .new-person-input:focus,
.search-form select:focus, .search-form .search-text:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.form-label, .member-role-label, .member-add-label { color: var(--ink); }
.form-help, .album-description { color: var(--muted); }

/* Buttons — green primary */
.btn-primary, .comment-form button, .btn-primary-sm {
  background: var(--accent); color: #fff; font-weight: 600;
}
.btn-primary:hover, .comment-form button:hover, .btn-primary-sm:hover {
  background: var(--accent-deep); color: #fff;
}
.btn-danger, .btn-danger-sm { background: var(--danger); color: #fff; }
.btn-danger-sm:hover { background: #a8432b; }
.btn-text { color: var(--accent); }
.btn-text:hover { color: var(--accent-deep); }

/* Reaction + favorite pills */
.react { background: var(--card); color: var(--ink); border-color: var(--line); }
.react .n { color: var(--muted); }
.react.on { background: rgba(47,107,79,.10); border-color: var(--accent); color: var(--ink); }
.fav { background: var(--card); color: var(--ink); border-color: var(--line); }
.fav.on { background: rgba(47,107,79,.10); border-color: var(--accent); color: var(--accent); }
.heart { color: var(--muted); }
.heart.on { color: var(--accent); }

.engage { border-top-color: var(--line); border-bottom-color: var(--line); }
.date-line { color: var(--muted); }

/* Timeline rail */
.year-rail { border-right-color: var(--line); }
.decade-label { opacity: .55; }
.year-rail-link { color: var(--muted); }
.year-rail-link:hover { color: var(--ink); background: var(--card); }
.year-rail-link.is-current { color: #fff; background: var(--accent); }
.tl-year-head { background: var(--paper); color: var(--ink); border-bottom-color: var(--line); }
.tl-month-head { background: var(--paper); color: var(--ink); }
.search-advanced summary { color: var(--accent); }
.search-advanced[open] summary { color: var(--ink); }
@media (max-width: 780px) {
  .year-rail { background: var(--paper); border-bottom-color: var(--line); }
  .decade-label { display: none; }
  .year-rail-link.is-current { color: #fff; background: var(--accent); }
}

/* Empty + notice states */
.empty-state, .video-processing-notice { color: var(--muted); }

/* Admin tables */
.admin-table { color: var(--ink); }
.admin-table th {
  color: var(--muted); border-bottom-color: var(--line);
}
.admin-table td { border-bottom-color: var(--line); }
.admin-table tr:hover td { background: rgba(47,107,79,.04); }
.result-item { border-bottom-color: var(--line); }

/* Join / magic link picker */
.picker-link { background: var(--accent); color: #fff; border-color: var(--accent); }
.picker-link:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }

/* Upload dropzone */
.upload-dropzone { background: var(--card); color: var(--muted); border-color: var(--line); }
.upload-dropzone:hover, .upload-dropzone.dragover {
  background: rgba(47,107,79,.06); border-color: var(--accent); color: var(--ink);
}
.dz-title { color: var(--ink); }
.up-bar { background: var(--line); }
.up-fill { background: var(--accent); }
.up-status { color: var(--muted); }
.up-row.up-done .up-fill { background: var(--ok); }
.up-row.up-error .up-fill { background: var(--danger); }
.up-row.up-done .up-status { color: var(--ok); }
.up-row.up-error .up-status { color: var(--danger); }

/* Add-album chooser */
.add-album-list a { background: var(--card); color: var(--ink); border-color: var(--line); }
.add-album-list a:hover { border-color: var(--accent); color: var(--accent); }

/* Members admin cards */
.member-card { background: var(--card); border-color: var(--line); box-shadow: var(--shadow); }
.member-card-email, .member-card-meta { color: var(--muted); }
.member-role-viewer { background: var(--card-2); color: var(--ink); }
.member-role-contributor { background: var(--accent); color: #fff; }
.member-role-admin { background: var(--danger); color: #fff; }

/* Person management rows */
.person-row { background: var(--card); border-color: var(--line); }
.person-row-main { color: var(--ink); }
.person-row-count { color: var(--muted); }
.person-av { background: var(--card-2); }

/* Photo viewer chrome — rounded dark stage, visible nav buttons */
.photo-viewer { background: var(--stage); border-radius:12px; box-shadow:0 30px 60px -30px rgba(20,15,10,.35); }
.stagetool[aria-pressed="true"] { color: #fff; }
.viewer-shortcuts { color: var(--muted); }
.viewer-shortcuts kbd { background: var(--card); color: var(--ink); border-color: var(--line); }

/* Nav zones: visible round buttons inset from edge */
.nav-zone {
  position:absolute; width:52px; height:52px; min-width:unset; bottom:auto;
  top:50%; transform:translateY(-50%);
  display:flex; align-items:center; justify-content:center;
  font-size:1.8rem; text-decoration:none; color:var(--ink); z-index:2;
  background:var(--card); border:1px solid var(--line);
  border-radius:50%; box-shadow:var(--shadow);
  text-shadow:none; transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.nav-zone-prev { left:12px; }
.nav-zone-prev:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
.nav-zone-next { right:12px; }
.nav-zone-next:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
.nav-zone:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.nav-zone-disabled { opacity:.35; pointer-events:none; background:var(--card); color:var(--muted); border-color:var(--line); }
.photo-viewer:has(video) .nav-zone { bottom:auto; }

@media (max-width: 640px) {
  .nav-zone { display: none; }
}

/* Suggestions carousel — visible round nav buttons, static tools */
.carousel-stage { border-radius:12px; }
.carousel-nav {
  width:52px; height:52px; top:50%; transform:translateY(-50%);
  font-size:1.8rem; color:var(--ink); border-radius:50%;
  background:var(--card); border:1px solid var(--line);
  box-shadow:var(--shadow); text-shadow:none;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.carousel-nav-prev { left:12px; }
.carousel-nav-prev:hover:not(:disabled) { background:var(--accent); color:#fff; border-color:var(--accent); }
.carousel-nav-next { right:12px; }
.carousel-nav-next:hover:not(:disabled) { background:var(--accent); color:#fff; border-color:var(--accent); }
.carousel-nav:disabled { opacity:.35; pointer-events:none; background:var(--card); color:var(--muted); border-color:var(--line); }
.carousel-nav:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.carousel-stagetools { top:16px; right:16px; }
.carousel-stagetools .stagetool { background:var(--card); border:1px solid var(--line); border-radius:999px; padding:8px 12px; }
.carousel-counter { text-align:right; }

.stagetool {
  background:var(--card); color:var(--ink); border:1px solid var(--line);
  border-radius:999px; padding:8px 16px;
  font-family:var(--sans); font-weight:500; font-size:.9rem;
  cursor:pointer; min-height:44px;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.stagetool:hover { background:rgba(47,107,79,.08); border-color:var(--accent); color:var(--accent); }
.stagetool:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.stagetool[aria-pressed="true"] { background:var(--accent); color:#fff; border-color:var(--accent); }
.stagetool[disabled] { opacity:.45; cursor:not-allowed; }

/* Download link: matches stagetool pill styling */
.download-link { display:inline-flex; align-items:center; text-decoration:none; }

/* Photo viewer bar */
.back-link.viewer-crumb { margin-top: 0; }

/* Photo meta toggle */
.photo-details > summary { color: var(--muted); }
.photo-details > summary:hover { color: var(--ink); }
.photo-details-body { background: var(--card); border-color: var(--line); }
.photo-details dt { color: var(--muted); }
.photo-details dd { color: var(--ink); }

/* Extra-small button */
.btn-primary-xs {
  min-height: 28px; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .2rem .55rem; background: var(--accent); color: #fff;
  border: none; border-radius: calc(var(--radius) - 2px); cursor: pointer;
  font-family: var(--sans); font-weight: 600; text-decoration: none;
}
.btn-primary-xs:hover { background: var(--accent-deep); text-decoration: none; }