/**
 * Overrides layered on top of the plugin's frontend.css.
 *
 * frontend.css sets `display:flex` on .ap-lightbox (and similar on other
 * overlays), which beats the HTML `hidden` attribute's default `display:none`.
 * Without this rule the lightbox covers the page permanently.
 */
[hidden] { display: none !important; }

/* Remove from tree: destructive, so it sits apart from Save and Cancel. */
.ap-ft-remove{margin-left:auto;color:#B30000}
.ap-ft-remove:hover{background:#fbf1f1}

/* Download one photograph, from the lightbox. */
.ap-lightbox-download{display:inline-block;margin-left:14px;color:#fff;opacity:.75;
  text-decoration:none;font-size:13px;border:1px solid rgba(255,255,255,.35);
  border-radius:8px;padding:4px 12px}
.ap-lightbox-download:hover{opacity:1;border-color:rgba(255,255,255,.7)}

/* The Help link in the album footer, beside "Powered by WPfoss". */
.ap-help-link{color:inherit;opacity:.75;text-decoration:none;margin-right:14px;font-size:inherit}
.ap-help-link:hover{opacity:1;text-decoration:underline}

/**
 * frontend.css gives .ap-ft-edit-modal position/inset/align/justify but never
 * `display`, so the plugin must have set it inline when opening. Without it the
 * dialog renders unpositioned in the top-left corner.
 */
.ap-ft-edit-modal { display: flex; }

/** Dragging a category pill to reorder. */
.ap-cat-pill[draggable="true"] { cursor: grab; }
.ap-cat-pill.ap-pill-dragging { opacity: .45; cursor: grabbing; }
.ap-cat-pill.ap-pill-drop-target { outline: 2px dashed var(--ap-red); outline-offset: 2px; }

/** Dialogs use z-index up to 99999; a toast behind one is a silent failure. */
.ap-toast { z-index: 100000; }

/**
 * frontend.css styles .ap-logout-btn as if it were a plain-text link (just
 * `color` at low opacity) but it's a real <button>, and nothing resets its
 * native background/border. The browser's default grey button face shows
 * through under the near-transparent white text, making "Sign out"
 * unreadable — reported directly: "the sign out button is not visible".
 */
.ap-logout-btn {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
}

/** Storage-usage bar in Settings > Plan & storage. */
.ap-storage-bar {
  height: 10px; border-radius: 6px; background: var(--ap-grey-1, #eee);
  overflow: hidden; margin-bottom: 8px;
}
.ap-storage-bar-fill {
  height: 100%; border-radius: 6px; background: var(--ap-red, #B30000);
  transition: width .3s ease, background .3s ease;
}
.ap-storage-bar-fill.ap-storage-ok { background: #3c7a4e; }
.ap-storage-bar-fill.ap-storage-warn { background: #c98a1b; }

/** Dragging a photo card to reorder the grid ("Custom Order" sort). */
.ap-photo-item[draggable="true"] { cursor: grab; }
.ap-photo-item.ap-photo-dragging { opacity: .45; cursor: grabbing; }
.ap-photo-item.ap-photo-drop-target { outline: 2px dashed var(--ap-red); outline-offset: -2px; }

/** DNS record rows with a copy button — people paste these into a registrar. */
.ap-dns-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--ap-grey-1, #eee);
}
.ap-dns-key { flex: 0 0 70px; font-size: 13px; color: var(--ap-grey-3, #777); }
.ap-dns-val {
  flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px; background: var(--ap-bg, #f7f4f0);
  padding: 7px 10px; border-radius: 6px; overflow-wrap: anywhere;
}
.ap-copy-btn { flex: 0 0 auto; min-width: 62px; }

/**
 * The demonstration album's strip.
 *
 * Fixed to the bottom rather than the top on purpose: the album's own header
 * is sticky, and a second bar above it would push the family's name off a
 * phone screen. The bottom edge is empty on every screen in this app.
 *
 * It says what this album is. Without it a visitor cannot tell a
 * demonstration from the product, and would reasonably conclude that every
 * album here is open to the public, which is the opposite of what is sold.
 */
.demo-strip {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: 10px 16px;
  background: #1b1b1b; color: #fff;
  font-size: 13px; line-height: 1.45; text-align: center;
  box-shadow: 0 -1px 6px rgba(0, 0, 0, .18);
}
/* So the last row of photographs is never hidden behind the strip. */
body:has(.demo-strip) .ap-app { padding-bottom: 64px; }
@media (max-width: 600px) {
  .demo-strip { font-size: 12px; padding: 8px 12px; }
  body:has(.demo-strip) .ap-app { padding-bottom: 76px; }
}

/**
 * Leadership, in a company album (leadership.js, 29/09/2026).
 *
 * Three views of one tab. In the first two the rows of people are put away,
 * and in the third they come back exactly as tree.js draws them; the panel's
 * data-view says which. A family album never has data-view, so nothing here
 * reaches it.
 */
#ap-panel-tree[data-view="leadership"] .ap-ft-toolbar,
#ap-panel-tree[data-view="leadership"] .ap-ft-canvas-wrap,
#ap-panel-tree[data-view="leadership"] .ap-ft-accordion,
#ap-panel-tree[data-view="structure"] .ap-ft-toolbar,
#ap-panel-tree[data-view="structure"] .ap-ft-canvas-wrap,
#ap-panel-tree[data-view="structure"] .ap-ft-accordion { display: none; }
#ap-panel-tree[data-view="people"] .ap-lead-view { display: none; }

.ap-lead-switch {
  display: flex; gap: 4px; flex-wrap: wrap; width: fit-content; max-width: 100%;
  margin: 0 0 18px; padding: 4px;
  background: var(--ap-paper-deep, #efe6d6); border-radius: 999px;
}
.ap-lead-switch-btn {
  border: 0; background: transparent; cursor: pointer;
  padding: 8px 16px; border-radius: 999px;
  font: 600 13.5px/1.2 var(--ap-body, inherit); color: var(--ap-ink-soft, #544a41);
}
.ap-lead-switch-btn:hover { color: var(--ap-ink, #18130f); }
/* On a phone the three sit side by side in equal thirds, a label wrapping
   inside its own third rather than the third view dropping to a second row. */
@media (max-width: 560px) {
  .ap-lead-switch { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; border-radius: 14px; }
  .ap-lead-switch-btn { padding: 8px 6px; font-size: 12.5px; border-radius: 10px; white-space: normal; }
}
.ap-lead-switch-btn.active {
  background: var(--ap-card, #fff); color: var(--ap-ink, #18130f);
  box-shadow: 0 1px 3px rgba(24,19,15,.12);
}

.ap-lead-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 16px;
}
.ap-lead-intro { margin: 0; color: var(--ap-dim, #7a6f64); font-size: 14px; }
.ap-lead-empty { padding: 40px 16px; }

/* Leadership over time: one card per title, holders newest first. */
.ap-lead-titles {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  align-items: start;
}
.ap-lead-title-card {
  background: var(--ap-card, #fff); border: 1px solid var(--ap-line, #e6dcc9);
  border-radius: var(--ap-r-sm, 12px); box-shadow: var(--ap-shadow);
  padding: 16px 16px 8px;
}
.ap-lead-title {
  margin: 0 0 10px; font: 400 21px/1.2 var(--ap-head, Georgia, serif); color: var(--ap-ink, #18130f);
}
.ap-lead-holders { list-style: none; margin: 0; padding: 0; }
.ap-lead-holder + .ap-lead-holder { border-top: 1px solid var(--ap-line-soft, #f0e9dc); }
.ap-lead-person, .ap-org-node {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: 0; background: none; cursor: pointer; text-align: left;
  padding: 8px 4px; font: inherit; color: inherit; border-radius: var(--ap-r-xs, 9px);
}
.ap-lead-person:hover, .ap-org-node:hover { background: var(--ap-tint); }
.ap-lead-avatar {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--ap-paper-deep, #efe6d6); color: var(--ap-ink-soft, #544a41);
  font-size: 12px; font-weight: 700;
}
.ap-lead-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ap-lead-holder-name { flex: 1; min-width: 0; font-size: 14.5px; color: var(--ap-ink, #18130f); }
.ap-lead-holder-years { flex: 0 0 auto; font-size: 13px; color: var(--ap-dim, #7a6f64); font-variant-numeric: tabular-nums; }
.ap-lead-holder.is-current .ap-lead-holder-name { font-weight: 700; }
.ap-lead-holder.is-current .ap-lead-holder-years { color: var(--ap-red, #B30000); font-weight: 600; }
.ap-lead-holder.is-current .ap-lead-avatar { box-shadow: 0 0 0 2px var(--ap-red, #B30000); }

/* Structure: nested lists, a line down the left of each level. Reads the
   same on a phone as on a laptop, with no library and no canvas. */
.ap-org { list-style: none; margin: 0; padding: 0 0 0 22px; }
.ap-org-top { padding-left: 0; }
.ap-org li { position: relative; }
.ap-org:not(.ap-org-top) > li::before {
  content: ''; position: absolute; left: -14px; top: 0; bottom: 0;
  border-left: 2px solid var(--ap-line, #e6dcc9);
}
.ap-org li:last-child::before { bottom: auto; height: 27px; }
.ap-org li > .ap-org-node { position: relative; max-width: 460px; }
.ap-org:not(.ap-org-top) > li > .ap-org-node::before {
  content: ''; position: absolute; left: -14px; top: 27px; width: 12px;
  border-top: 2px solid var(--ap-line, #e6dcc9);
}
.ap-org-text { display: flex; flex-direction: column; min-width: 0; }
.ap-org-name { font-size: 14.5px; font-weight: 600; color: var(--ap-ink, #18130f); }
.ap-org-titles { font-size: 13px; color: var(--ap-dim, #7a6f64); }
.ap-org-top > li { margin-bottom: 8px; }

/* A person's roles, and the stories about them, in their panel. */
.ap-lead-drawer {
  flex-shrink: 0; max-height: 45%; overflow-y: auto;
  padding: 12px 18px 14px; border-bottom: 1px solid var(--ap-line, #e6dcc9);
}
.ap-lead-roles { list-style: none; margin: 0 0 10px; padding: 0; }
.ap-lead-role {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;
  padding: 8px 0; border-bottom: 1px solid var(--ap-line-soft, #f0e9dc);
}
.ap-lead-role-title { font-weight: 600; font-size: 14px; color: var(--ap-ink, #18130f); }
.ap-lead-role.is-current .ap-lead-role-title { color: var(--ap-red, #B30000); }
.ap-lead-role-meta { font-size: 12.5px; color: var(--ap-dim, #7a6f64); }
.ap-lead-role-tools { display: flex; gap: 4px; width: 100%; }
.ap-lead-role-tools .ap-btn-sm { padding: 4px 10px; font-size: 12.5px; }
.ap-lead-none { margin: 0 0 10px; font-size: 13px; color: var(--ap-dim, #7a6f64); }
.ap-lead-stories:not(:empty) { margin-top: 14px; }
.ap-lead-story-list { list-style: none; margin: 0; padding: 0; }
.ap-lead-story-list li { padding: 6px 0; font-size: 13px; line-height: 1.45; }
.ap-lead-story-list li span { display: block; color: var(--ap-dim, #7a6f64); }

/* ── Opening ──────────────────────────────────────────────────────────
   The album is drawn once. Until app.js has the album, its photographs and
   its categories, the tabs and the page below them are hidden and a quiet
   line says what is happening. Before 30/09/2026 the empty markup showed
   and could be clicked, and was then redrawn over whatever had been
   clicked, which read as the album loading twice. */
.ap-app[data-state="opening"] .ap-tabs,
.ap-app[data-state="opening"] .ap-content > * {
  visibility: hidden;
  /* If the scripts never run at all, show the page anyway after 12 seconds
     rather than leave a blank one for ever. */
  animation: ap-open-anyway 0s linear 12s forwards;
}
.ap-app[data-state="opening"] .ap-content { position: relative; min-height: 50vh; }
.ap-app[data-state="opening"] .ap-content::before {
  content: "Opening the album\2026";
  position: absolute; top: 72px; left: 0; right: 0;
  text-align: center; color: #8a7f76; font-size: 15px;
  animation: ap-opening-hide 0s linear 12s forwards;
}
@keyframes ap-open-anyway { to { visibility: visible; } }
@keyframes ap-opening-hide { to { visibility: hidden; } }

/* ── Settings > Sections (sections.js) ─────────────────────────────── */
.ap-sections { display: flex; flex-direction: column; }
.ap-section-row { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid #e3ddd7; }
.ap-section-row:first-child { border-top: 0; }
.ap-section-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ap-section-name { font-size: 15px; font-weight: 500; color: #1a1614; }
.ap-section-what { font-size: 13.5px; color: #6b625d; }
.ap-switch {
  flex: none; position: relative; width: 44px; height: 26px; border-radius: 13px;
  border: 0; padding: 0; cursor: pointer; background: #cfc7c0; transition: background .15s;
}
.ap-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; transition: transform .15s;
}
.ap-switch[aria-checked="true"] { background: #1a7f37; }
.ap-switch[aria-checked="true"]::after { transform: translateX(18px); }
.ap-switch:focus-visible { outline: 2px solid #b30000; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .ap-switch, .ap-switch::after { transition: none; } }

/* Where a photograph was taken (places.js, 01/10/2026): a quiet line with a
   pin, above the caption in the lightbox and in the photo editor. */
.ap-place { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-size: 13px; color: var(--ap-dim, #7a6f64); }
.ap-place-pin { flex: 0 0 auto; }
.ap-lightbox-place { display: flex; justify-content: center; margin: 0 0 6px; color: #fff; opacity: .8; }
.ap-place-current { display: flex; align-items: center; gap: 12px; min-height: 22px; margin-bottom: 8px; }
.ap-place-remove { padding: 0; background: none; border: 0; font: inherit; font-size: 13px; color: var(--ap-red, #B30000); text-decoration: underline; cursor: pointer; }
.ap-place-search-row { display: flex; gap: 8px; }
.ap-place-search-row .ap-input { flex: 1; min-width: 0; }
.ap-place-results { list-style: none; margin: 8px 0 0; padding: 0; border: 1px solid var(--ap-line, #e6dcc9); border-radius: var(--ap-r-xs, 9px); overflow: hidden; }
.ap-place-result { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; background: none; border: 0; border-top: 1px solid var(--ap-line-soft, #f0e9dc); font: inherit; font-size: 14px; color: var(--ap-ink, #18130f); text-align: left; cursor: pointer; }
.ap-place-results li:first-child .ap-place-result { border-top: 0; }
.ap-place-result:hover, .ap-place-result:focus-visible { background: var(--ap-tint, #faf6f0); }
.ap-place-credit { margin: 6px 0 0; font-size: 11.5px; color: var(--ap-dim, #7a6f64); }
.ap-place-credit a { color: inherit; }

/* Settings > Sections > Places switched off (sections.js): every place goes,
   and comes back when it is switched on. Nothing stored is touched. */
.ap-places-off .ap-place, .ap-places-off .ap-place-filter, .ap-places-off .ap-place-field { display: none !important; }