/* 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);
}

/* There is a hand to deal behind Study. A presence, not a count: no number, and
   no color that escalates the longer you have been away (docs/no-backlog.md). */
.nav-waiting-dot {
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  margin-left: 0.4rem;
  vertical-align: 0.35em;
  border-radius: 50%;
  background: var(--bs-primary);
}

.navbar .dropdown-menu {
  box-shadow: 0 16px 32px -18px color-mix(in srgb, var(--shadow) 30%, transparent);
}

/* Doors: every menu item pairs its label with the one line that says what it is. */
.dropdown-menu-doors {
  min-width: 20rem;
}

.nav-door {
  display: flex;
  flex-direction: column;
  padding: 0.45rem 0.75rem;
  white-space: normal;
}

.nav-door-label {
  font-family: var(--display);
  font-weight: 600;
}

.nav-door-desc {
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--muted);
}

.nav-door:hover .nav-door-desc,
.nav-door:focus .nav-door-desc {
  color: inherit;
  opacity: 0.8;
}

/* The inventory pages, footed under the study actions: reachable, never competing. */
.nav-everything {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  margin: 0.4rem -0.4rem -0.4rem;
  padding: 0.55rem 1.15rem;
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--bs-dropdown-border-radius) var(--bs-dropdown-border-radius);
  background: var(--paper);
  font-size: 0.8rem;
  color: var(--muted);
}

.nav-everything a {
  color: inherit;
  text-decoration: none;
}

.nav-everything a:hover {
  color: var(--accent-deep);
  text-decoration: underline;
}


/* Quiet page openings. Expressive surfaces keep their own heroes; routine
   indexes, records, settings, and help pages share this responsive rhythm. */
.page-header {
  margin-bottom: 1.5rem;
}

.page-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
}

.page-header-title {
  margin: 0;
  font-size: clamp(1.85rem, 4vw, 2.35rem);
  letter-spacing: -0.025em;
  line-height: 1.08;
}

.page-header-actions {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

.page-header-subtitle {
  max-width: 48rem;
  margin: 0.45rem 0 0;
  color: var(--muted);
  line-height: 1.55;
}

@media (max-width: 575.98px) {
  .page-header-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .page-header-actions {
    justify-content: flex-start;
    width: 100%;
  }
}


/* 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 toasts: receipts, not interruptions. A card drops in at the top
   right (full width across the top on phones), clear of the study controls
   that live in thumb reach at the bottom. 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 toast(s)_controller.js; the dock ships with every
   logged-in layout. The legacy .toast-pill name stays because Bootstrap
   claims bare .toast (and hides it without its own .show class). */
.toasts {
  position: fixed;
  inset-inline: 0;
  top: max(1rem, env(safe-area-inset-top));
  z-index: 1090; /* over Bootstrap's modals: a receipt outranks any backdrop */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.65rem;
  padding: 0 1rem;
  pointer-events: none;
}

/* Where the dock exists, passkey ceremony messages surface as toasts
   (toasts#passkeyError), so the component's inline divs stay quiet. The
   marketing layout has no dock and keeps its styled inline messages. */
body:has(.toasts) .passkey-error {
  display: none;
}

.toast-pill {
  --toast-tone: var(--moss);
  --toast-tone-wash: var(--moss-wash);
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: min(26rem, 100%);
  min-height: 4rem;
  padding: 0.8rem 1.1rem;
  background: linear-gradient(105deg, color-mix(in srgb, var(--toast-tone-wash) 82%, var(--card)), color-mix(in srgb, var(--toast-tone-wash) 32%, var(--card)) 56%, color-mix(in srgb, var(--toast-tone-wash) 12%, var(--card)));
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--line) 82%, var(--accent));
  border-radius: 1.125rem;
  box-shadow:
    inset 0 1px color-mix(in srgb, var(--ink) 5%, transparent),
    0 1rem 2.5rem -1.25rem color-mix(in srgb, var(--shadow) 30%, transparent),
    0 0.2rem 0.6rem color-mix(in srgb, var(--shadow) 8%, transparent);
  font-size: 1rem;
  touch-action: pan-x; /* vertical swipes belong to the toast */
  transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.5, 1), opacity 0.25s ease;
  animation: toast-drop 0.35s cubic-bezier(0.34, 1.4, 0.5, 1);
}

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

.toast-leaving {
  transform: translateY(-60%);
  opacity: 0;
}

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

.toast-cure {
  flex: none;
  color: var(--toast-tone);
  filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--shadow) 10%, transparent));
}

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

.toast-message {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.35;
}

.toast-pill .button_to {
  display: contents;
}

.toast-controls {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.2rem;
}

.toast-action {
  border: 0;
  background: none;
  padding: 0.4rem 0.7rem;
  border-radius: var(--bs-border-radius-pill);
  background: var(--wash);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--accent-deep);
  text-decoration: none;
  white-space: nowrap;
}

.toast-action:hover {
  background: color-mix(in srgb, var(--accent) 14%, var(--wash));
}

.toast-close {
  border: 0;
  background: transparent;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: var(--bs-border-radius-pill);
  font-size: 1rem;
  line-height: 1;
  color: var(--accent-deep);
}

.toast-close:hover {
  color: var(--ink);
  background: transparent;
}

@media (max-width: 575.98px) {
  .toasts {
    align-items: stretch;
    padding-inline: 0.65rem;
  }

  .toast-pill {
    min-height: 3.75rem;
    padding: 0.7rem 0.9rem;
  }

  .toast-cure {
    width: 1.5rem;
    height: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .toast-pill,
  .toast-leaving {
    animation: none;
    transition: opacity 0.2s ease;
    transform: none;
  }
}