/* center-content.css — the Center Content Region (CCR): the fixed square panel
   in the middle of the gallery, its filter menu, and the fullscreen overlay.
   Markup lives in center-content.js. All selectors use the `ccr-` prefix.

   (Big-renderer content inside .ccr-view / .ccr-fs-body — .big-center,
   .photo-big, .hill-view, .notes-big, … — is styled by the renderers in
   styles.css, not here.) */

/* anchor: centres the panel; ignores pointer events so panning works around it */
.ccr-anchor {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10; pointer-events: none;
}

/* the bordered square; its width/height are set from app.js's layout tick */
.ccr-panel {
  background: #fff;
  pointer-events: all; display: flex; flex-direction: column; overflow: hidden;
  border: 4px solid #000; border-radius: 10px;
}

/* title bar */
.ccr-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px 6px; border-bottom: 1px solid #e8e8e8; flex-shrink: 0;
}
.ccr-title { font-size: 10px; font-weight: 500; color: #888; letter-spacing: 0.06em; }
.ccr-btns { display: flex; gap: 4px; }
.ccr-btns button {
  background: none; border: 1px solid #ccc; border-radius: 6px;
  padding: 2px 7px; font-size: 10px; color: #555; cursor: pointer;
  display: flex; align-items: center; gap: 3px; font-family: inherit;
}
.ccr-btns button:hover { background: #f0f0f0; }

/* scrollable interior: the centre square is small, so let content scroll within
   it rather than being clipped. The title bar stays fixed above this. */
.ccr-body { flex: 1; min-height: 0; display: flex; flex-direction: column;
  overflow-y: auto; overflow-x: hidden; }

/* filter menu (shown when nothing is selected) */
.ccr-filters { padding: 9px; display: flex; flex-direction: column; gap: 4px;
  flex: 1 0 auto; justify-content: center; }
.ccr-filter {
  background: #f5f4f0; border: 1px solid #ddd; border-radius: 9px;
  padding: 6px 9px; font-size: 11px; font-weight: 500; color: #222;
  cursor: pointer; display: flex; align-items: center; gap: 6px;
  font-family: inherit; transition: background 0.1s;
}
.ccr-filter:hover { background: #eae9e4; }
.ccr-filter.on { background: #EEEDFE; color: #3C3489; border-color: #AFA9EC; }
.ccr-filter i { font-size: 13px; }
.ccr-count { margin-left: auto; font-size: 9px; color: #aaa; font-weight: 400; }

/* selected thing's Big renderer (shown in the panel) */
.ccr-view { flex: 1 0 auto; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 10px; gap: 7px; }

/* fullscreen ("open") overlay */
.ccr-fs { position: absolute; inset: 0; background: #fff; z-index: 20;
  border-radius: var(--border-radius-lg); display: flex; flex-direction: column; }
.ccr-fs-bar { display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid #e0e0e0; flex-shrink: 0; }
.ccr-fs-bar span { font-size: 11px; font-weight: 500; color: #666; }
.ccr-fs-bar button { background: none; border: 1px solid #ccc; border-radius: 7px;
  padding: 3px 9px; font-size: 11px; color: #555; cursor: pointer;
  display: flex; align-items: center; gap: 3px; font-family: inherit; }
.ccr-fs-body { flex: 1; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 10px; padding: 20px; }