/* TTID brand loader — production standard (see LOADER.md).
   Preferred UI: <img> of ttid-loader-128.gif, CSS-scaled (sm|md|lg|xl).
   Background urls are RELATIVE to this CSS file so preview.html (file://) works too. */

.ttid-loader {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  vertical-align: middle;
  overflow: visible;
}

.ttid-loader__gif {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
  border: 0;
  vertical-align: middle;
}

.ttid-loader--sm .ttid-loader__gif { width: 22px; height: 22px; }
.ttid-loader--md .ttid-loader__gif { width: 40px; height: 40px; }
.ttid-loader--lg .ttid-loader__gif { width: 56px; height: 56px; }
.ttid-loader--xl .ttid-loader__gif { width: 72px; height: 72px; }

@media (prefers-reduced-motion: reduce) {
  .ttid-loader__gif {
    content: url("preview-frame.png");
  }
}

/* HTMX */
.ttid-loader.htmx-indicator {
  opacity: 0;
  transition: opacity 0.15s ease;
}
.htmx-request .ttid-loader.htmx-indicator,
.htmx-request.ttid-loader.htmx-indicator {
  opacity: 1;
}

/* —— Automatic Bootstrap spinner → brand GIF ——
   Relative url → resolves next to this stylesheet. */
.spinner-border,
.spinner-grow {
  --bs-spinner-border-width: 0;
  --bs-spinner-animation-speed: 0s;
  width: 1.35rem;
  height: 1.35rem;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("ttid-loader-64.gif") center / contain no-repeat !important;
  animation: none !important;
  vertical-align: -0.2em;
  opacity: 0.95;
}
.spinner-border-sm,
.spinner-grow-sm {
  width: 1rem;
  height: 1rem;
  vertical-align: -0.125em;
}
.spinner-border.htmx-indicator,
.spinner-grow.htmx-indicator {
  opacity: 0;
}
.htmx-request .spinner-border.htmx-indicator,
.htmx-request.spinner-border.htmx-indicator,
.htmx-request .spinner-grow.htmx-indicator,
.htmx-request.spinner-grow.htmx-indicator {
  opacity: 0.95;
}

@media (prefers-reduced-motion: reduce) {
  .spinner-border,
  .spinner-grow {
    background-image: url("preview-frame.png") !important;
  }
}

/* Section loading — dim host + centered brand loader (Workbench pattern) */
.ttid-loading-host {
  position: relative;
}
.ttid-loading-host.is-loading .ttid-loading-dim {
  opacity: 0.42;
  pointer-events: none;
  filter: brightness(0.88);
  transition: opacity 0.2s ease, filter 0.2s ease;
}
.ttid-loading-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 3;
  align-items: center;
  justify-content: center;
  background: rgba(13, 17, 23, 0.28);
  pointer-events: none;
}
.ttid-loading-host.is-loading .ttid-loading-overlay {
  display: flex;
}
.ttid-loading-overlay .ttid-loader {
  filter: drop-shadow(0 0 10px rgba(248, 81, 73, 0.18))
          drop-shadow(0 0 12px rgba(62, 207, 142, 0.18));
}

/* —— Full-page load screen (app-wide standard) ——
   Dim viewport + brand GIF + label. Mobile + desktop.
   See LOADER.md § Page load screen · JS: ttid-page-loader.js */
.ttid-page-loader {
  position: fixed;
  inset: 0;
  /* Below Bootstrap modal (1055) so confirm dialogs stay on top. */
  z-index: 1040;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(1rem, env(safe-area-inset-top, 0px))
           max(1rem, env(safe-area-inset-right, 0px))
           max(1rem, env(safe-area-inset-bottom, 0px))
           max(1rem, env(safe-area-inset-left, 0px));
  /* Light dim — page stays readable; overlay never captures clicks. */
  background: rgba(0, 0, 0, 0.22);
  backdrop-filter: brightness(0.92) saturate(0.98);
  -webkit-backdrop-filter: brightness(0.92) saturate(0.98);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, visibility 0.18s ease;
}
.ttid-page-loader.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
}
.ttid-page-loader__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  text-align: center;
  max-width: min(20rem, 100%);
}
.ttid-page-loader__panel .ttid-loader {
  filter: drop-shadow(0 0 12px rgba(248, 81, 73, 0.22))
          drop-shadow(0 0 14px rgba(62, 207, 142, 0.2));
}
.ttid-page-loader__label {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #e6edf3;
}
.ttid-page-loader__hint {
  margin: 0;
  font-size: 0.75rem;
  color: #8b949e;
}
/* Keep scroll/interaction; do not further darken #sidebar/#main. */
body.ttid-page-loading {
  overflow: auto;
}

@media (max-width: 575.98px) {
  .ttid-page-loader__label { font-size: 0.88rem; }
  .ttid-page-loader__panel { gap: 0.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ttid-page-loader {
    transition: none;
  }
}