/* Shared app-side overrides on top of Frank's compiled app.css, loaded after
   it in base.html. Use this for custom CSS that spans more than one page;
   page-scoped tweaks still live in per-template <style> blocks (the existing
   convention — see detail.html, login.html, etc.). Keep entries minimal and
   documented; the design system of record is Frank's SCSS, so anything durable
   here should be folded back into his source. (admin.css is the separate,
   admin-only override wired via settings.) */

/* Lightbox caption: Frank's _lightbox.scss never set a max-width because the
   mockup was mobile-first (narrow viewport wraps naturally) with a one-line
   placeholder caption. On desktop the unconstrained block stretches the full
   viewport, and the longer AI photo descriptions make it a single illegible
   line. Constrain to a readable measure, centered under the image.
   TODO(frank): fold a max-width on .lightbox-copy into the SCSS. */
.modal-lightbox .lightbox-copy {
  max-width: 640px;
  margin-inline: auto;
}

/* Lightbox prev/next navigation. Frank's mockup was a single-image modal with
   no notion of moving between photos; the gallery lightbox now walks the photo
   list (arrow keys + these buttons). Overlay them on the image area, vertically
   centered, left/right inset. Hidden by default in the partial and only un-hidden
   by the gallery script (the vision-board lightbox reuses the same partial and
   stays single-image). TODO(frank): consider a left-chevron asset so these can
   use the .icon mask system instead of text glyphs. */
.modal-lightbox .lightbox-image {
  position: relative;
}
.modal-lightbox .lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.modal-lightbox .lightbox-nav:hover {
  background: rgba(0, 0, 0, 0.7);
}
.modal-lightbox .lightbox-prev {
  left: 8px;
}
.modal-lightbox .lightbox-next {
  right: 8px;
}
.modal-lightbox .lightbox-nav > span {
  margin-top: -3px; /* optically center the chevron glyph */
}

/* Map marker-cap notice (partials/_map_cap_note.html). When a result set
   exceeds the marker cap the map only carries the newest matches; this pill
   says so instead of letting the map silently under-report. Overlaid
   bottom-center of .map-container (position:relative in Frank's CSS); no
   .icon/badge equivalent exists in the compiled app.css for a map overlay.
   TODO(frank): fold into the SCSS if the cap sticks around post map rework. */
.map-container .map-cap-note {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.75rem;
  white-space: nowrap;
  pointer-events: none;
}

/* Account detail rows: the row chevron is a background image
   (account-arrow.svg) pinned `no-repeat right center` on the <a> in Frank's
   `.account-group ul a` rule. Don't quote the rule with its url() here —
   Django's manifest static-files processing scans url() tokens even inside
   comments and fails collectstatic on the unresolvable path. The value span
   has no
   right gutter, so a long value runs underneath the arrow. Short values
   ("Not set", masked password, a short name) don't reach it, which is why only
   the email address visibly overlaps (Trello #207). Reserve room for the arrow
   and ellipsize rather than collide. TODO(frank): add the right gutter to
   `.account-group ul a .values` in the SCSS. */
.account-page .account-group ul a .values {
  min-width: 0;
  padding-right: 24px;
}
.account-page .account-group ul a .values {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Invalid form fields on account pages (Trello #199): Frank's
   `.form-control.invalid` rule places one invalid-icon at `no-repeat right 8px
   center`, but the higher-specificity `.account-page .account-form
   .form-control` rule later sets a `background:` SHORTHAND, which resets
   background-repeat/position to their defaults (repeat, 0 0). Only the icon
   itself survives — its declaration is the only one marked important — so the
   icon tiles across the whole field. Re-assert the two reset longhands at
   higher specificity. TODO(frank): drop the shorthand in the SCSS in favor of
   background-color. */
.account-page .account-form .form-control.invalid {
  background-repeat: no-repeat;
  background-position: right 8px center;
}

/* Hub tab nav (partials/_hub_header.html, .nav-hub) horizontal overflow on
   narrow phones (Trello #210). Frank's `.nav-hub` is `display:flex;gap:20px`
   with three `flex:1` `.nav-item` pills; each pill's icon has
   `flex-shrink:0` and its `.label` has `white-space:nowrap`, so a flex
   item's automatic minimum size is its content width — the pills can't
   compress below ~135px each. Three pills + gaps + padding floors the nav
   at ~405px, wider than a 375/390px iPhone viewport, so `main` becomes
   horizontally scrollable and iOS renders the whole page shifted left
   (reported as clipped content / a white gutter). Rather than compress the
   pills (shrinking padding/gap or wrapping labels would break the pill
   look), let the nav scroll horizontally in its own container so `main`
   itself never overflows — same pattern as a mobile tab strip. Scoped to
   narrow viewports only; nav already fits above ~420px.
   TODO(frank): consider `min-width:0` + intentional pill shrink in the SCSS
   if a design pass wants the pills visible without scrolling on iPhone SE. */
@media (max-width: 420px) {
  .nav-hub {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav-hub .nav-item {
    flex: 0 0 auto;
  }
}

/* "All favorites" card with a single favorite: Frank's `.hub-favorites li` has
   `flex-grow:1` inside a wrapping flexbox, so one item stretches to the full row
   width, and `aspect-ratio:80/76` then drives the height to match — an
   oversized card (Trello #202). Multi-item rows share the width and look fine.
   Cap the lone item to the half-width the other hub cards use for their lead
   tile. TODO(frank): fold a `:only-child` cap into the SCSS. */
.hub-group.hub-favorites li:only-child {
  flex: 0 0 calc(50% - 0.1875rem);
}