/* Smart Locker Technologies — Partner API docs branding
   Colors aligned with https://www.smartlockertec.com/
   Accent: #33CCCC | Dark surfaces: #12120d / #080808 | Light: #FFFFFF
*/

:root {
  --slt-accent: #33cccc;
  --slt-accent-hover: #2bb3b3;
  --slt-dark-0: #080808;
  --slt-dark-1: #12120d;
  --slt-dark-2: #1a1a1a;
  --slt-dark-3: #242323;
  --slt-gray: #b2b3b3;
  --slt-gray-muted: #8f8f8f;
  --slt-light-0: #ffffff;
  --slt-light-1: #f5f5f5;
  --slt-light-2: #e2e2e2;
  --slt-text-on-dark: #ffffff;
  --slt-text-on-light: #12120d;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---- Branded header ---- */
.slt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid color-mix(in srgb, var(--slt-accent) 35%, transparent);
  background: var(--slt-dark-1);
  color: var(--slt-text-on-dark);
  position: sticky;
  top: 0;
  z-index: 100;
}

html.light-mode .slt-header {
  background: var(--slt-light-0);
  color: var(--slt-text-on-light);
  border-bottom-color: color-mix(in srgb, var(--slt-accent) 45%, var(--slt-light-2));
}

.slt-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

/* Dark variant palette (default) */
.slt-brand-mark {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: block;
  overflow: visible;
  --slt-mark-core: #33cccc;
  --slt-mark-inner: #b2b3b3;
  --slt-mark-outer: #3a3a36;
  --slt-mark-halo: #33cccc;
  --slt-mark-halo-min: 0.14;
  --slt-mark-halo-max: 0.62;
  /* Resting opacity of a ring while another ring holds the highlight */
  --slt-mark-dim: 0.32;
  --slt-mark-core-dim: 0.6;
  /* One full chase cycle; each of the 3 rings owns a third of it */
  --slt-mark-chase: 5.4s;
}

/* Light variant palette — deeper teal + darker greys keep contrast on white */
html.light-mode .slt-brand-mark {
  --slt-mark-core: #12a3a3;
  --slt-mark-inner: #5f6360;
  --slt-mark-outer: #d0d2d1;
  --slt-mark-halo: #12a3a3;
  --slt-mark-halo-min: 0.06;
  --slt-mark-halo-max: 0.3;
  --slt-mark-dim: 0.42;
  /* Teal stays identifiable on white even in its resting phase */
  --slt-mark-core-dim: 0.82;
}

/* The blur bloom only reads well against dark surfaces */
html.light-mode .slt-brand-mark .slt-core,
html.light-mode .slt-brand-mark .slt-glow-ring {
  filter: none;
}

/* ---- Logo mark animation ----
   transform-box: view-box anchors every rotation/scale to the viewBox centre
   (32,32) instead of each element's own bounding box, which is what made the
   arcs look off-centre. */
.slt-brand-mark .slt-spin-slow,
.slt-brand-mark .slt-spin-rev,
.slt-brand-mark .slt-core,
.slt-brand-mark .slt-glow-ring {
  transform-box: view-box;
  transform-origin: 50% 50%;
}

.slt-brand-mark .slt-spin-slow {
  animation: slt-spin 14s linear infinite;
}

.slt-brand-mark .slt-spin-rev {
  animation: slt-spin-rev 18s linear infinite;
}

/* Sequential chase: core lights up, then the inner arc, then the outer arc, and
   round again. The arcs carry only opacity so they never fight the rotation
   transform on their parent group. */
.slt-brand-mark .slt-core {
  animation: slt-chase-core var(--slt-mark-chase) ease-in-out infinite;
}

.slt-brand-mark .slt-glow-ring {
  opacity: var(--slt-mark-halo-min);
  animation: slt-chase-halo var(--slt-mark-chase) ease-in-out infinite;
}

.slt-brand-mark .slt-inner-arc {
  opacity: var(--slt-mark-dim);
  animation: slt-chase var(--slt-mark-chase) ease-in-out infinite;
  animation-delay: calc(var(--slt-mark-chase) / 3);
}

.slt-brand-mark .slt-outer-arc {
  opacity: var(--slt-mark-dim);
  animation: slt-chase var(--slt-mark-chase) ease-in-out infinite;
  animation-delay: calc(var(--slt-mark-chase) / 3 * 2);
}

@keyframes slt-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes slt-spin-rev {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

@keyframes slt-chase {
  0% { opacity: var(--slt-mark-dim); }
  11% { opacity: 1; }
  22% { opacity: 1; }
  33% { opacity: var(--slt-mark-dim); }
  100% { opacity: var(--slt-mark-dim); }
}

@keyframes slt-chase-core {
  0% { opacity: var(--slt-mark-core-dim); transform: scale(1); }
  11% { opacity: 1; transform: scale(1.08); }
  22% { opacity: 1; transform: scale(1.08); }
  33% { opacity: var(--slt-mark-core-dim); transform: scale(1); }
  100% { opacity: var(--slt-mark-core-dim); transform: scale(1); }
}

@keyframes slt-chase-halo {
  0% { opacity: var(--slt-mark-halo-min); transform: scale(1); }
  11% { opacity: var(--slt-mark-halo-max); transform: scale(1.16); }
  22% { opacity: var(--slt-mark-halo-max); transform: scale(1.16); }
  33% { opacity: var(--slt-mark-halo-min); transform: scale(1); }
  100% { opacity: var(--slt-mark-halo-min); transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .slt-brand-mark .slt-spin-slow,
  .slt-brand-mark .slt-spin-rev,
  .slt-brand-mark .slt-core,
  .slt-brand-mark .slt-glow-ring,
  .slt-brand-mark .slt-inner-arc,
  .slt-brand-mark .slt-outer-arc {
    animation: none !important;
  }

  .slt-brand-mark .slt-core,
  .slt-brand-mark .slt-inner-arc,
  .slt-brand-mark .slt-outer-arc {
    opacity: 1;
  }
}

.slt-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}

.slt-brand-text strong {
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slt-brand-text span {
  font-size: 0.75rem;
  color: var(--slt-gray);
  white-space: nowrap;
}

html.light-mode .slt-brand-text span {
  color: var(--slt-gray-muted);
}

.slt-header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.slt-link {
  color: var(--slt-accent);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
}

.slt-link:hover {
  color: var(--slt-accent-hover);
  text-decoration: underline;
}

.slt-theme-toggle {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--slt-accent) 50%, transparent);
  background: transparent;
  color: inherit;
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  cursor: pointer;
}

.slt-theme-toggle:hover {
  border-color: var(--slt-accent);
  color: var(--slt-accent);
}

#api-reference-host {
  min-height: calc(100vh - 64px);
}

/* ---- Scalar theme overrides (works with theme: none) ---- */
.dark-mode,
.light-mode {
  --scalar-color-accent: var(--slt-accent) !important;
  --scalar-button-1: var(--slt-accent) !important;
  --scalar-button-1-hover: var(--slt-accent-hover) !important;
  --scalar-button-1-color: #081010 !important;
}

.dark-mode {
  --scalar-background-1: var(--slt-dark-1) !important;
  --scalar-background-2: var(--slt-dark-2) !important;
  --scalar-background-3: var(--slt-dark-3) !important;
  --scalar-border-color: #2e2e2a !important;
  --scalar-color-1: #f5f5f5 !important;
  --scalar-color-2: #d0d0d0 !important;
  --scalar-color-3: var(--slt-gray) !important;
}

.light-mode {
  --scalar-background-1: var(--slt-light-0) !important;
  --scalar-background-2: var(--slt-light-1) !important;
  --scalar-background-3: var(--slt-light-2) !important;
  --scalar-border-color: #d8d8d8 !important;
  --scalar-color-1: var(--slt-text-on-light) !important;
  --scalar-color-2: #3a3a3a !important;
  --scalar-color-3: var(--slt-gray-muted) !important;
  --scalar-button-1-color: #041414 !important;
}

/* Redoc page */
.slt-redoc-wrap {
  background: var(--slt-dark-1);
}

html.light-mode .slt-redoc-wrap {
  background: var(--slt-light-0);
}