/**
 * Photo Archive — component styles.
 *
 * Everything is scoped under .pa and driven by custom properties, so your
 * theme can restyle it without touching this file. Override any --pa-* value
 * in your own stylesheet (or in Appearance > Customize > Additional CSS).
 */

.pa {
  /* Colours resolve from the theme where possible, with sane fallbacks. */
  --pa-ink: #1b1f1c;
  --pa-ink-soft: #5f6862;
  --pa-ground: transparent;
  --pa-surface: #ffffff;
  --pa-line: #dcdfd8;
  --pa-line-soft: #eceee9;
  --pa-accent: #9a6b12;
  --pa-accent-ink: #ffffff;
  --pa-focus: #2f6f8f;

  --pa-gap: 1.5rem;
  --pa-radius: 2px;
  --pa-rail-width: 15rem;
  --pa-tile-min: 15rem;
  --pa-masonry-gap: 0.5rem; /* space between photographs in masonry */
  --pa-col-min: 260;        /* px: narrowest a masonry column gets before one drops */

  color: var(--pa-ink);
  background: var(--pa-ground);
  font-size: 1rem;
  line-height: 1.5;
}

/* Dark only when asked for.
 *
 * Following the visitor's OS was wrong: a light WordPress theme then hosts a
 * dark gallery whenever someone's system is in dark mode, which reads as
 * pale text on a white page. The page decides, not the operating system.
 *
 * Use theme="dark" on the shortcode for a dark theme, or theme="auto" to
 * follow the visitor's system after all.
 */
@media (prefers-color-scheme: dark) {
  .pa[data-pa-theme="auto"] {
    --pa-ink: #e7eae3;
    --pa-ink-soft: #9aa39c;
    --pa-surface: #1e221f;
    --pa-line: #343a35;
    --pa-line-soft: #282d29;
    --pa-accent: #ddb04a;
    --pa-accent-ink: #171a17;
    --pa-focus: #7fb9d6;
  }
}

.pa[data-pa-theme="dark"] {
  --pa-ink: #e7eae3;
  --pa-ink-soft: #9aa39c;
  --pa-surface: #1e221f;
  --pa-line: #343a35;
  --pa-line-soft: #282d29;
  --pa-accent: #ddb04a;
  --pa-accent-ink: #171a17;
  --pa-focus: #7fb9d6;
}

.pa *,
.pa *::before,
.pa *::after { box-sizing: border-box; }

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

/* Several components below set an explicit display, which would otherwise
   beat the browser's own [hidden] rule and leave them on screen. */
.pa [hidden] { display: none !important; }

/* ---------------- Layout ---------------- */

.pa-layout {
  display: grid;
  grid-template-columns: var(--pa-rail-width) minmax(0, 1fr);
  gap: calc(var(--pa-gap) * 1.6);
  align-items: start;
}

.pa-main { min-width: 0; }

.pa-filter-toggle { display: none; }

@media (max-width: 800px) {
  .pa-layout { grid-template-columns: minmax(0, 1fr); gap: var(--pa-gap); }

  .pa-filter-toggle {
    display: block;
    width: 100%;
    margin-bottom: var(--pa-gap);
    padding: 0.75rem 1rem;
    font: inherit;
    font-weight: 600;
    color: var(--pa-ink);
    background: var(--pa-surface);
    border: 1px solid var(--pa-line);
    border-radius: var(--pa-radius);
    cursor: pointer;
  }

  .pa-rail { display: none; }
  .pa--rail-open .pa-rail {
    display: block;
    padding-bottom: var(--pa-gap);
    border-bottom: 1px solid var(--pa-line);
  }
}

/* ---------------- Filter rail ---------------- */

.pa-rail {
  display: flex;
  flex-direction: column;
  gap: calc(var(--pa-gap) * 1.15);
}

.pa-facet { display: flex; flex-direction: column; gap: 0.5rem; }

.pa-facet-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--pa-line);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pa-facet-count {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--pa-accent);
}

.pa-matchall {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  color: var(--pa-ink-soft);
  cursor: pointer;
}

.pa-terms {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

/* Indent by real tree depth, so Canada > Alberta > Jasper steps three times. */
.pa-term--child { padding-left: calc(var(--pa-depth, 1) * 0.9rem); }

.pa-term-label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.22rem 0;
  cursor: pointer;
}

.pa-term-label input { margin: 0; }

.pa-term-name { min-width: 0; }

.pa-term-n {
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--pa-ink-soft);
}

.pa-term.is-empty { opacity: 0.38; }
.pa-term.is-empty .pa-term-label { cursor: default; }

/* ---------------- Summary ---------------- */

.pa-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: var(--pa-gap);
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--pa-line);
}

.pa-summary-text {
  margin: 0;
  max-width: 52ch;
  font-size: 1rem;
  color: var(--pa-ink);
}

.pa-clear {
  padding: 0;
  font: inherit;
  font-size: 0.8rem;
  color: var(--pa-ink-soft);
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  cursor: pointer;
}

.pa-clear:hover { color: var(--pa-accent); }

/* ---------------- Grid ---------------- */

.pa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--pa-tile-min), 1fr));
  gap: var(--pa-gap);
  align-items: start;
}

.pa-tile {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}

/* One ratio across the grid, so rows stay even however the archive is
   filtered. Mixed ratios leave large holes whenever a result set is small.
   True proportions are shown in the lightbox. Override --pa-tile-ratio to
   change the crop, e.g. 1 for squares or 3/2 for a wider frame. */
.pa-tile-frame {
  display: block;
  overflow: hidden;
  aspect-ratio: var(--pa-tile-ratio, 4 / 3);
  max-width: 100%;
  background: var(--pa-line-soft);
  border-radius: var(--pa-radius);
}

.pa-tile-img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  transition: transform 260ms ease;
}

.pa-tile:hover .pa-tile-img,
.pa-tile:focus-visible .pa-tile-img { transform: scale(1.028); }

.pa-tile-cap { display: flex; flex-direction: column; gap: 0.1rem; }

.pa-tile-title { font-size: 0.9rem; line-height: 1.3; }

.pa-tile-place {
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  color: var(--pa-ink-soft);
}

/* ---------------- Masonry ----------------
   Each photograph at its own proportions; placement is done in JS. The
   column-gap is read by the script as the space between photographs. */

.pa-grid--masonry {
  display: block;
  position: relative;
  column-gap: var(--pa-masonry-gap);
}

.pa-grid--masonry.is-laid-out > .pa-tile {
  position: absolute;
  width: var(--pa-col-w);
}

.pa-grid--masonry .pa-tile { gap: 0.4rem; }

.pa-grid--masonry .pa-tile-frame {
  aspect-ratio: var(--pa-ratio, 3 / 2);
  border-radius: 0;
}

.pa-grid--masonry .pa-empty { position: static; }

@media (prefers-reduced-motion: reduce) {
  .pa-tile-img { transition: none; }
  .pa-tile:hover .pa-tile-img,
  .pa-tile:focus-visible .pa-tile-img { transform: none; }
}

/* ---------------- Empty state / pagination ---------------- */

.pa-empty {
  grid-column: 1 / -1;
  padding: calc(var(--pa-gap) * 2) 0;
  border-top: 1px solid var(--pa-line-soft);
}

.pa-empty-title { margin: 0 0 0.35rem; font-size: 1.05rem; }
.pa-empty-body { margin: 0; color: var(--pa-ink-soft); }

.pa-more {
  display: block;
  margin: calc(var(--pa-gap) * 1.5) auto 0;
  padding: 0.7rem 1.4rem;
  font: inherit;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  color: var(--pa-ink);
  background: none;
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-radius);
  cursor: pointer;
}

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

.pa-loading,
.pa-error { margin: 0; color: var(--pa-ink-soft); }

/* ---------------- Lightbox ---------------- */

html.pa-lb-open { overflow: hidden; }

.pa-lb {
  position: fixed;
  inset: 0;
  z-index: 100000; /* above the WordPress toolbar when logged in */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  padding-top: calc(clamp(1rem, 4vw, 3rem) + env(safe-area-inset-top, 0px));
  padding-bottom: calc(clamp(1rem, 4vw, 3rem) + env(safe-area-inset-bottom, 0px));
  background: rgba(14, 17, 15, 0.97);
  overflow: auto;
}

.pa-lb {
  /* Room kept clear for the close and arrow buttons. */
  --pa-lb-edge: 4.25rem;
  padding: 1.5rem var(--pa-lb-edge);
}

/* The photograph is sized to fit the screen whatever its shape, and the
   details panel sits at the same place for every photograph, so nothing
   jumps or gets pushed off screen as you step through. */
.pa-lb-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16rem;
  gap: clamp(1rem, 3vw, 2.5rem);
  width: 100%;
  max-width: 96rem;
  height: 100%;
  color: #eceee9;
}

.pa-lb-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  height: 100%;
}

.pa-lb-stage img,
.pa-lb-stage canvas {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 0;
}

.pa-lb-meta {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  align-self: start;
  max-height: 100%;
  overflow-y: auto;
  padding-top: 1rem;
}

@media (max-width: 760px) {
  .pa-lb {
    --pa-lb-edge: 1rem;
    align-items: flex-start;
    padding-top: calc(4.5rem + env(safe-area-inset-top, 0px));
    padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
  }
  .pa-lb-inner { grid-template-columns: minmax(0, 1fr); height: auto; }
  .pa-lb-stage { height: auto; }
  .pa-lb-stage img,
  .pa-lb-stage canvas { max-height: 70vh; }
  .pa-lb-meta { max-height: none; overflow: visible; padding-top: 0; }
}

.pa-lb-title { margin: 0; font-size: 1.25rem; line-height: 1.25; font-weight: normal; }

.pa-lb-title.pa-lb-refcode { font-size: 1.35rem; }

.pa-lb-caption { margin: 0; font-size: 0.9rem; color: #b9c0b8; }

.pa-lb-row { display: flex; flex-direction: column; gap: 0.35rem; }

.pa-lb-label {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #939c93;
}

.pa-lb-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.pa-lb-value { font-size: 0.95rem; line-height: 1.45; color: #eceee9; }

.pa-chip {
  padding: 0.22rem 0.55rem;
  font: inherit;
  font-size: 0.78rem;
  color: #eceee9;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  cursor: pointer;
}

.pa-chip:hover {
  color: #171a17;
  background: #ddb04a;
  border-color: #ddb04a;
}

.pa-lb-pos {
  margin: 0;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
  color: #939c93;
}

.pa-lb-close,
.pa-lb-nav {
  position: fixed;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 0;
  margin: 0;
  text-transform: none;
  letter-spacing: normal;
  box-shadow: none;
  width: 2.75rem;
  height: 2.75rem;
  font: inherit;
  font-size: 1.6rem;
  line-height: 1;
  color: #eceee9;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  cursor: pointer;
}

.pa-lb-close {
  top: calc(1rem + env(safe-area-inset-top, 0px));
  right: 1rem;
}

.pa-lb-nav { top: 50%; transform: translateY(-50%); }
.pa-lb-prev { left: 0.75rem; }
.pa-lb-next { right: 0.75rem; }

.pa-lb-close:hover,
.pa-lb-nav:hover { background: rgba(255, 255, 255, 0.2); }

@media (max-width: 760px) {
  .pa-lb-nav { top: auto; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); transform: none; }
}

/* Reference number in the lightbox. Selectable on purpose: it exists to be
   copied into an email. */
.pa-lb-ref {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
}

.pa-lb-reflabel {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #939c93;
}

.pa-lb-refcode {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  color: #eceee9;
  user-select: all;
}

/* ================================================================
   Query bar — the condition builder
   ================================================================ */

.pa-querybar {
  margin-bottom: var(--pa-gap);
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--pa-line);
}

.pa-qhead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.pa-clauses {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.7rem;
}

.pa-clause {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.5rem;
  background: var(--pa-surface);
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-radius);
}

.pa-clause-facet {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pa-ink-soft);
}

.pa-op {
  font: inherit;
  font-size: 0.8rem;
  color: var(--pa-ink);
  background: none;
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-radius);
  padding: 0.1rem 0.2rem;
}

.pa-op--static {
  border-color: transparent;
  color: var(--pa-ink-soft);
  font-style: italic;
}

.pa-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }

.pa-chipadd {
  width: 1.4rem;
  height: 1.4rem;
  padding: 0;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1;
  color: var(--pa-ink-soft);
  background: none;
  border: 1px dashed var(--pa-line);
  border-radius: 999px;
  cursor: pointer;
}

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

.pa-clause-drop {
  padding: 0 0.2rem;
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  color: var(--pa-ink-soft);
  background: none;
  border: 0;
  cursor: pointer;
}

.pa-clause-drop:hover { color: var(--pa-accent); }

.pa-addcond {
  padding: 0.4rem 0.7rem;
  font: inherit;
  font-size: 0.82rem;
  color: var(--pa-ink);
  background: none;
  border: 1px dashed var(--pa-line);
  border-radius: var(--pa-radius);
  cursor: pointer;
}

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

/* The query bar's chips sit on the page, not on the dark lightbox. */
.pa-querybar .pa-chip,
.pa-picker .pa-chip {
  color: var(--pa-ink);
  background: var(--pa-line-soft);
  border-color: var(--pa-line);
}

.pa-querybar .pa-chip:hover {
  color: var(--pa-accent-ink);
  background: var(--pa-accent);
  border-color: var(--pa-accent);
}

/* ---------------- Term picker ---------------- */

.pa-picker {
  flex: 1 1 100%;
  max-width: 22rem;
  margin-top: 0.4rem;
  padding: 0.5rem;
  background: var(--pa-surface);
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-radius);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.pa-picksearch {
  width: 100%;
  margin-bottom: 0.4rem;
  padding: 0.35rem 0.45rem;
  font: inherit;
  font-size: 0.85rem;
  color: var(--pa-ink);
  background: var(--pa-surface);
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-radius);
}

.pa-picklist { max-height: 15rem; overflow: auto; }

.pa-pickitem {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  width: 100%;
  padding: 0.28rem 0.4rem;
  padding-left: calc(0.4rem + var(--pa-depth, 0) * 0.8rem);
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  color: var(--pa-ink);
  background: none;
  border: 0;
  border-radius: var(--pa-radius);
  cursor: pointer;
}

.pa-pickitem:hover { background: var(--pa-line-soft); }
.pa-pickitem.is-on { font-weight: 700; color: var(--pa-accent); }
.pa-pickitem.is-empty { opacity: 0.4; }

.pa-pickn { font-size: 0.72rem; font-variant-numeric: tabular-nums; color: var(--pa-ink-soft); }

.pa-picknone { margin: 0.3rem 0.4rem; font-size: 0.85rem; color: var(--pa-ink-soft); }

.pa-picker--facets { max-width: 14rem; }

/* ================================================================
   Landing — a way in, not a wall
   ================================================================ */

.pa-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: calc(var(--pa-gap) * 1.4);
}

.pa-intro-count { margin: 0; font-size: 1.05rem; }

.pa-intro-hint {
  flex: 1 1 18rem;
  margin: 0;
  max-width: 48ch;
  font-size: 0.9rem;
  color: var(--pa-ink-soft);
}

.pa-querybar[hidden] { display: none; }


/* ================================================================
   The search block
   The archive opens on this, not on its contents.
   ================================================================ */

.pa-querybar {
  margin-bottom: var(--pa-gap);
  padding: 0.9rem 1rem;
  background: var(--pa-surface);
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-radius);
}

.pa-querybar.is-empty .pa-clauses { margin-top: 0; }

.pa-querybar.is-empty .pa-addcond {
  padding: 0.65rem 1.1rem;
  font-size: 0.95rem;
  border-style: solid;
}

.pa-intro { margin-top: 0.5rem; }

/* ================================================================
   Surviving a theme

   Themes style bare elements — li, label, span, button — with selectors
   that beat plain inheritance, so a component that only colours its
   container gets washed out. Everything here states its own colour.

   Scoped to .pa-layout so the dark lightbox keeps its own palette.
   ================================================================ */

.pa-layout,
.pa-layout p,
.pa-layout div,
.pa-layout span,
.pa-layout ul,
.pa-layout li,
.pa-layout label,
.pa-layout h2,
.pa-layout h3,
.pa-layout button,
.pa-layout select,
.pa-layout input {
  color: var(--pa-ink);
}

.pa-layout .pa-facet-title,
.pa-layout .pa-clause-facet,
.pa-layout .pa-matchall,
.pa-layout .pa-term-n,
.pa-layout .pa-tile-place,
.pa-layout .pa-intro-hint,
.pa-layout .pa-empty-body,
.pa-layout .pa-pickn,
.pa-layout .pa-picknone,
.pa-layout .pa-op--static,
.pa-layout .pa-clause-drop,
.pa-layout .pa-clear,
.pa-layout .pa-loading {
  color: var(--pa-ink-soft);
}

.pa-layout .pa-facet-count { color: var(--pa-accent); }
.pa-layout .pa-error { color: #b32d2e; }
.pa-layout .pa-pickitem.is-on { color: var(--pa-accent); }

/* Buttons get a theme's own background, border, casing and letter-spacing.
   The ones that must look like controls restate all of it. */
.pa-layout .pa-addcond,
.pa-layout .pa-more,
.pa-layout .pa-picksearch {
  font: inherit;
  text-transform: none;
  letter-spacing: normal;
  color: var(--pa-ink);
  background: var(--pa-surface);
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-radius);
}

.pa-layout .pa-addcond { border-style: dashed; }
.pa-layout .pa-addcond:hover,
.pa-layout .pa-more:hover {
  color: var(--pa-accent);
  border-color: var(--pa-accent);
}

/* The ones that must not look like buttons at all. */
.pa-layout .pa-tile,
.pa-layout .pa-pickitem,
.pa-layout .pa-clause-drop,
.pa-layout .pa-chipadd {
  text-transform: none;
  letter-spacing: normal;
  background: none;
  box-shadow: none;
}

.pa-layout .pa-tile {
  padding: 0;
  border: 0;
  border-radius: 0;
}

.pa-layout .pa-clear {
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  text-transform: none;
  letter-spacing: normal;
}

.pa-layout .pa-chip {
  text-transform: none;
  letter-spacing: normal;
  color: var(--pa-ink);
  background: var(--pa-line-soft);
  border: 1px solid var(--pa-line);
}

.pa-layout .pa-chip:hover {
  color: var(--pa-accent-ink);
  background: var(--pa-accent);
  border-color: var(--pa-accent);
}

.pa-layout .pa-op {
  font: inherit;
  font-size: 0.8rem;
  text-transform: none;
  letter-spacing: normal;
  color: var(--pa-ink);
  background: var(--pa-surface);
  border: 1px solid var(--pa-line);
}

.pa-layout .pa-term-label,
.pa-layout .pa-matchall { cursor: pointer; }

/* Themes often force images to a fixed aspect or add borders. */
.pa-layout .pa-tile-img {
  max-width: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* ---------------- Condition counts and empty-result diagnosis ---------------- */

.pa-clause-n {
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--pa-ink-soft);
}

.pa-why {
  margin: 0.6rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.92rem;
}

.pa-why-item { margin-bottom: 0.25rem; }

.pa-why-drop {
  padding: 0;
  font: inherit;
  font-size: 0.85rem;
  color: var(--pa-accent);
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  cursor: pointer;
}

.pa-empty-note {
  margin: 0.8rem 0 0;
  padding: 0.6rem 0.75rem;
  max-width: 60ch;
  font-size: 0.9rem;
  color: var(--pa-ink);
  background: var(--pa-line-soft);
  border-left: 3px solid var(--pa-accent);
}

.pa-layout .pa-clause-n { color: var(--pa-ink-soft); }
.pa-layout .pa-why-drop { color: var(--pa-accent); background: none; border: 0; border-bottom: 1px solid currentColor; }
.pa-layout .pa-empty-note { color: var(--pa-ink); }

/* ---------------- Joiner and exclusions ---------------- */

.pa-qlead {
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--pa-ink-soft);
}

.pa-joiner {
  flex: 0 0 100%;
  margin: 0.15rem 0;
  font-size: 0.85rem;
}

.pa-joiner--static {
  padding-left: 0.2rem;
  color: var(--pa-ink-soft);
  font-style: italic;
}

.pa-joinersel {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.1rem 0.25rem;
  color: var(--pa-ink);
  background: var(--pa-surface);
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-radius);
}

.pa-excludes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--pa-line);
}

.pa-excludes .pa-qlead { flex: 0 0 100%; margin: 0; }

.pa-layout .pa-qlead,
.pa-layout .pa-joiner--static { color: var(--pa-ink-soft); }

.pa-layout .pa-joinersel {
  font: inherit;
  font-size: 0.85rem;
  text-transform: none;
  letter-spacing: normal;
  color: var(--pa-ink);
  background: var(--pa-surface);
  border: 1px solid var(--pa-line);
}

.pa-clause-n--neg { color: var(--pa-ink-soft); font-style: italic; }
.pa-layout .pa-clause-n--neg { color: var(--pa-ink-soft); }

/* ---------------- Gallery editor tiles ---------------- */

.pa-editcell { display: flex; flex-direction: column; gap: 0.35rem; }

.pa-editcell.is-hidden .pa-tile { opacity: 0.35; }
.pa-editcell.is-pinned .pa-tile-frame { outline: 2px solid var(--pa-accent); outline-offset: 2px; }

.pa-edittools { display: flex; gap: 0.3rem; }

.pa-edittool {
  flex: 1 1 auto;
  padding: 0.2rem 0.4rem;
  font: inherit;
  font-size: 0.72rem;
  color: var(--pa-ink-soft);
  background: var(--pa-surface);
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-radius);
  cursor: pointer;
}

.pa-edittool:hover { color: var(--pa-accent); border-color: var(--pa-accent); }
.pa-edittool.is-on { color: var(--pa-accent-ink); background: var(--pa-accent); border-color: var(--pa-accent); }

.pa-layout .pa-edittool { font: inherit; font-size: 0.72rem; text-transform: none; letter-spacing: normal; }

/* A gallery on a page has no filter rail. */
.pa-layout--bare { grid-template-columns: minmax(0, 1fr); }


/* ---------------- Picker: hover is the signal, not focus ----------------
   Focusing the first item drew a ring around it, which read as a heading
   rather than as one choice among several. The menu holds focus instead.
   ---------------------------------------------------------------------- */

.pa-picker:focus { outline: none; }

.pa-pickitem {
  transition: background-color 120ms ease, color 120ms ease;
}

.pa-layout .pa-pickitem:hover,
.pa-layout .pa-pickitem:focus-visible {
  background: var(--pa-accent);
  color: var(--pa-accent-ink);
}

.pa-layout .pa-pickitem:hover .pa-pickn,
.pa-layout .pa-pickitem:focus-visible .pa-pickn {
  color: var(--pa-accent-ink);
  opacity: 0.85;
}

/* A chosen term stays legible while hovered. */
.pa-layout .pa-pickitem.is-on:hover,
.pa-layout .pa-pickitem.is-on:focus-visible { color: var(--pa-accent-ink); }

.pa-pickitem:focus-visible { outline: 2px solid var(--pa-focus); outline-offset: -2px; }

@media (prefers-reduced-motion: reduce) {
  .pa-pickitem { transition: none; }
}

/* The facet menu drops onto its own line under the button rather than
   crowding it. */
.pa-picker--facets { margin-left: 0; }

/* ---------------- Editor: drag to reorder ---------------- */

.pa-editcell[draggable="true"] { cursor: grab; }
.pa-editcell.is-dragging { opacity: 0.35; }
.pa-editcell { position: relative; }
.pa-editcell.is-drop-before::before,
.pa-editcell.is-drop-after::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--pa-accent);
  border-radius: 2px;
  pointer-events: none;
}
.pa-editcell.is-drop-before::before { left: calc(var(--pa-gap) / -2 - 1.5px); }
.pa-editcell.is-drop-after::after { right: calc(var(--pa-gap) / -2 - 1.5px); }