/* Bootstrap's own smallest container width, unconditional so source order
   beats its breakpoint rules without us declaring a breakpoint. */
.container {
  max-width: 540px;
}

/* .text-truncate needs a shrinkable flex item; Bootstrap ships no min-width utility. */
.ss-tile-body {
  min-width: 0;
}

/* Play's shelf: the peeking cut edge is the invitation to swipe, no button needed.
   min-width: 0 keeps a long curator note's unwrapped text from growing the
   panel past its 88% basis. */
.ss-shelf-panel {
  flex: 0 0 88%;
  min-width: 0;
  scroll-snap-align: start;
}

.ss-shelf-track {
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.ss-shelf-track::-webkit-scrollbar {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .ss-shelf-track {
    scroll-behavior: smooth;
  }
}

/* The listing page's fixed CTA bar. bg-body/border-top utilities already
   carry both colour modes; only the safe-area inset needs a hand-written
   rule, since Bootstrap ships no utility for env(). */
.ss-cta-bar {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Reserves the bar's rendered height in document flow so it never covers the
   page's last paragraph. Matches the bar's own generous padding budget. */
.ss-cta-bar-spacer {
  height: calc(4.5rem + env(safe-area-inset-bottom, 0px));
}

/* The monogram palette; the indexes must match MONOGRAM_PALETTE_SIZE in models.py. */
:root {
  --ss-color-monogram-letter: #fff;
  --ss-color-monogram-0: #1f6feb;
  --ss-color-monogram-1: #8250df;
  --ss-color-monogram-2: #bf3989;
  --ss-color-monogram-3: #bc4c00;
  --ss-color-monogram-4: #1a7f37;
  --ss-color-monogram-5: #9a6700;
}

/* One rule per index because CSS cannot build a property name from a value. */
/* -bg, not --ss-color-*: only that prefix must have a value in both modes. */
[data-monogram-palette="0"] {
  --ss-monogram-bg: var(--ss-color-monogram-0);
}

[data-monogram-palette="1"] {
  --ss-monogram-bg: var(--ss-color-monogram-1);
}

[data-monogram-palette="2"] {
  --ss-monogram-bg: var(--ss-color-monogram-2);
}

[data-monogram-palette="3"] {
  --ss-monogram-bg: var(--ss-color-monogram-3);
}

[data-monogram-palette="4"] {
  --ss-monogram-bg: var(--ss-color-monogram-4);
}

[data-monogram-palette="5"] {
  --ss-monogram-bg: var(--ss-color-monogram-5);
}

/* The 96px fallbacks match the partials' default size; without them an
   omitted size collapses the box. */
.ss-monogram,
.ss-app-icon::after {
  background: var(--ss-monogram-bg, var(--ss-color-monogram-0));
  color: var(--ss-color-monogram-letter);
  font-weight: 600;
  font-size: calc(var(--ss-monogram-size, 96px) * 0.5);
}

.ss-monogram {
  width: var(--ss-monogram-size, 96px);
  height: var(--ss-monogram-size, 96px);
}

/* position is the ::after's containing block; contain letterboxes a
   non-square icon instead of stretching it to the square box. */
.ss-app-icon {
  position: relative;
  object-fit: contain;
}

/* On the image itself, not an underlay: it paints only when the image fails,
   and it has to cover the broken-image glyph Chrome draws over an underlay. */
.ss-app-icon::after {
  content: attr(data-monogram-letter);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bs-border-radius);
}

/* Bootstrap 5.3.8's [data-bs-theme=dark] block, copied verbatim onto :root.
   Bootstrap's own colour mode is JavaScript-driven and this chrome carries no
   script, so the values are re-applied by media query instead. Re-copy them
   from the dist stylesheet on every Bootstrap upgrade. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bs-body-color: #dee2e6;
    --bs-body-color-rgb: 222, 226, 230;
    --bs-body-bg: #212529;
    --bs-body-bg-rgb: 33, 37, 41;
    --bs-emphasis-color: #fff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: rgba(222, 226, 230, 0.75);
    --bs-secondary-color-rgb: 222, 226, 230;
    --bs-secondary-bg: #343a40;
    --bs-secondary-bg-rgb: 52, 58, 64;
    --bs-tertiary-color: rgba(222, 226, 230, 0.5);
    --bs-tertiary-color-rgb: 222, 226, 230;
    --bs-tertiary-bg: #2b3035;
    --bs-tertiary-bg-rgb: 43, 48, 53;
    --bs-primary-text-emphasis: #6ea8fe;
    --bs-secondary-text-emphasis: #a7acb1;
    --bs-success-text-emphasis: #75b798;
    --bs-info-text-emphasis: #6edff6;
    --bs-warning-text-emphasis: #ffda6a;
    --bs-danger-text-emphasis: #ea868f;
    --bs-light-text-emphasis: #f8f9fa;
    --bs-dark-text-emphasis: #dee2e6;
    --bs-primary-bg-subtle: #031633;
    --bs-secondary-bg-subtle: #161719;
    --bs-success-bg-subtle: #051b11;
    --bs-info-bg-subtle: #032830;
    --bs-warning-bg-subtle: #332701;
    --bs-danger-bg-subtle: #2c0b0e;
    --bs-light-bg-subtle: #343a40;
    --bs-dark-bg-subtle: #1a1d20;
    --bs-primary-border-subtle: #084298;
    --bs-secondary-border-subtle: #41464b;
    --bs-success-border-subtle: #0f5132;
    --bs-info-border-subtle: #087990;
    --bs-warning-border-subtle: #997404;
    --bs-danger-border-subtle: #842029;
    --bs-light-border-subtle: #495057;
    --bs-dark-border-subtle: #343a40;
    --bs-heading-color: inherit;
    --bs-link-color: #6ea8fe;
    --bs-link-hover-color: #8bb9fe;
    --bs-link-color-rgb: 110, 168, 254;
    --bs-link-hover-color-rgb: 139, 185, 254;
    --bs-code-color: #e685b5;
    --bs-highlight-color: #dee2e6;
    --bs-highlight-bg: #664d03;
    --bs-border-color: #495057;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
    --bs-form-valid-color: #75b798;
    --bs-form-valid-border-color: #75b798;
    --bs-form-invalid-color: #ea868f;
    --bs-form-invalid-border-color: #ea868f;
  }
}

/* Ours, in a block of its own: the one above is re-copied wholesale on every
   Bootstrap upgrade. */
@media (prefers-color-scheme: dark) {
  :root {
    --ss-color-monogram-letter: #fff;
    --ss-color-monogram-0: #1a4f8f;
    --ss-color-monogram-1: #5b3b9e;
    --ss-color-monogram-2: #8c2d66;
    --ss-color-monogram-3: #8a3a06;
    --ss-color-monogram-4: #175f30;
    --ss-color-monogram-5: #6f4a00;
  }
}