/* App-wide chrome that belongs to no one screen. Propshaft serves every file
   in this directory, concatenated alphabetically: _theme.css loads first so
   the brand tokens are defined before any component reads them, then the
   per-screen files (atlas, cards, grid, rabbit_hole, suggestions, week, ...)
   in name order. */

/* Navbar styling */
.navbar .nav-link {
  transition: color 0.2s, border-color 0.2s;
  border-bottom: 2px solid transparent;
  padding-bottom: calc(0.5rem - 2px);
}

.navbar .nav-link:hover {
  border-bottom-color: color-mix(in srgb, var(--bs-emphasis-color) 25%, transparent);
}

.navbar .nav-link.active {
  border-bottom-color: var(--bs-primary);
}

.navbar .dropdown-menu {
  box-shadow: 0 16px 32px -18px rgba(72, 58, 128, 0.3);
}


/* Field trip live gleaning */
.photo-tile {
  overflow: hidden;
  border-radius: var(--bs-border-radius);
}

.photo-tile img {
  width: 100%;
}

.photo-tile.is-reading img {
  filter: saturate(0.7) brightness(0.92);
  transition: filter 0.4s ease;
}

.photo-tile-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}

.photo-tile-scan::before {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  height: 34%;
  top: -40%;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(103, 232, 249, 0.25) 40%,
    rgba(103, 232, 249, 0.55) 50%,
    rgba(103, 232, 249, 0.25) 60%,
    transparent
  );
}

.photo-tile-status {
  position: absolute;
  bottom: 0.375rem;
  left: 0.375rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.photo-tile-status-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: rgb(103, 232, 249);
}

@media (prefers-reduced-motion: no-preference) {
  .photo-tile-scan::before {
    animation: photo-tile-scan 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  .photo-tile-status-dot {
    animation: photo-tile-status-dot 1.2s ease-in-out infinite;
  }

  .live-entrance > .list-group-item {
    animation: live-entrance-rise 0.35s ease-out both;
  }
}

@keyframes photo-tile-scan {
  0% { top: -40%; }
  60% { top: 105%; }
  100% { top: 105%; }
}

@keyframes photo-tile-status-dot {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1); }
}

@keyframes live-entrance-rise {
  from { opacity: 0; transform: translateY(0.4rem); }
  to { opacity: 1; transform: none; }
}

.widened-facts:has(> .list-group:empty) {
  display: none;
}


/* Podcast transcript player */
.transcript-segment {
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.15s;
}

.transcript-segment:hover {
  background-color: color-mix(in srgb, var(--accent) 8%, transparent);
}

.transcript-current {
  background-color: color-mix(in srgb, var(--accent) 18%, transparent);
}

.transcript-clipped {
  background-color: color-mix(in srgb, var(--accent) 35%, transparent);
  transition: background-color 0.6s;
}


/* Flash droplets: receipts, not interruptions. A pill rises bottom-center in
   thumb reach, its dot cures from sponge ring to solid stone as the notice's
   time runs out, then it settles away. Alerts arrive already solid and wait.
   Behavior lives in droplet(s)_controller.js; the dock ships with every
   logged-in layout. */
.droplets {
  position: fixed;
  inset-inline: 0;
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 1090; /* over Bootstrap's modals: a receipt outranks any backdrop */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1rem;
  pointer-events: none;
}

.droplet {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  max-width: min(28rem, 100%);
  padding: 0.55rem 1rem 0.55rem 0.8rem;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--bs-border-radius-pill);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--ink) 16%, transparent),
    0 2px 8px color-mix(in srgb, var(--ink) 8%, transparent);
  font-size: 0.92rem;
  touch-action: pan-x; /* vertical swipes belong to the droplet */
  transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.5, 1), opacity 0.25s ease;
  animation: droplet-rise 0.35s cubic-bezier(0.34, 1.4, 0.5, 1);
}

@keyframes droplet-rise {
  from {
    transform: translateY(120%);
    opacity: 0;
  }
}

/* older receipts recede: smaller and quieter the further from the edge */
.droplet:nth-last-child(2) {
  transform: scale(0.96);
  opacity: 0.88;
}

.droplet:nth-last-child(n + 3) {
  transform: scale(0.92);
  opacity: 0.7;
}

.droplet-leaving {
  transform: translateY(60%) scale(0.96);
  opacity: 0;
}

.droplet-swiping {
  transition: none;
  animation: none;
}

.droplet-notice .droplet-cure {
  color: var(--moss);
}

.droplet-alert .droplet-cure {
  color: var(--rose);
}

.droplet-alert {
  border-color: color-mix(in srgb, var(--rose) 35%, var(--line));
}

.droplet-cure {
  flex: none;
}

.droplet-message {
  min-width: 0;
  overflow-wrap: anywhere;
}

.droplet .button_to {
  display: contents;
}

.droplet-action {
  border: 0;
  background: none;
  padding: 0.15rem 0.4rem;
  border-radius: var(--bs-border-radius-sm);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--accent-deep);
  white-space: nowrap;
}

.droplet-action:hover {
  background: var(--wash);
}

.droplet-close {
  border: 0;
  background: none;
  padding: 0.2rem 0.45rem;
  border-radius: var(--bs-border-radius-pill);
  font-size: 1rem;
  line-height: 1;
  color: var(--muted);
}

.droplet-close:hover {
  color: var(--ink);
  background: var(--wash);
}

@media (prefers-reduced-motion: reduce) {
  .droplet,
  .droplet:nth-last-child(2),
  .droplet:nth-last-child(n + 3),
  .droplet-leaving {
    animation: none;
    transition: opacity 0.2s ease;
    transform: none;
  }
}