/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
  color-scheme: light;
  --theme-bg: #fafaf8;
  --theme-panel: #ffffff;
  --theme-panel-soft: #f4f4f5;
  --theme-panel-strong: #ffffff;
  --theme-text: #09090b;
  --theme-muted: #52525b;
  --theme-subtle: #71717a;
  --theme-border: #e4e4e7;
  --theme-accent: #0f766e;
  --theme-accent-label: #134e4a;
  --theme-accent-strong: #134e4a;
  --theme-accent-ink: #ffffff;
  --theme-danger: #be123c;
  --theme-warning: #92400e;
  --theme-shadow: 0 16px 40px rgba(9, 9, 11, 0.12);
  --theme-focus: #0f766e;
  --theme-font: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --theme-bg: #0b0f14;
  --theme-panel: #111827;
  --theme-panel-soft: #172033;
  --theme-panel-strong: #0f172a;
  --theme-text: #ffffff;
  --theme-muted: #ffffff;
  --theme-subtle: #cbd5e1;
  --theme-border: #263448;
  --theme-accent: #5eead4;
  --theme-accent-label: #ffffff;
  --theme-accent-strong: #99f6e4;
  --theme-accent-ink: #001412;
  --theme-danger: #fb7185;
  --theme-warning: #fbbf24;
  --theme-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
  --theme-focus: #5eead4;
}

:root[data-theme="paper"] {
  color-scheme: light;
  --theme-bg: #fbf7ed;
  --theme-panel: #fffdf6;
  --theme-panel-soft: #f0eadc;
  --theme-panel-strong: #ffffff;
  --theme-text: #1f2731;
  --theme-muted: #5f665e;
  --theme-subtle: #77705f;
  --theme-border: #d9cfbb;
  --theme-accent: #2d6c68;
  --theme-accent-label: #2d6c68;
  --theme-accent-strong: #1f4f4c;
  --theme-accent-ink: #fffdf6;
  --theme-danger: #a83f3f;
  --theme-warning: #7c4a12;
  --theme-shadow: 0 16px 40px rgba(31, 39, 49, 0.1);
  --theme-focus: #2d6c68;
}

:root[data-theme="terminal"] {
  color-scheme: dark;
  --theme-bg: #000000;
  --theme-panel: #030603;
  --theme-panel-soft: #071307;
  --theme-panel-strong: #000000;
  --theme-text: #39ff88;
  --theme-muted: #8bd8aa;
  --theme-subtle: #64b87f;
  --theme-border: #16803d;
  --theme-accent: #39ff88;
  --theme-accent-label: #39ff88;
  --theme-accent-strong: #a1ffc7;
  --theme-accent-ink: #001b09;
  --theme-danger: #ff6b6b;
  --theme-warning: #d7ff7a;
  --theme-shadow: 0 16px 40px rgba(57, 255, 136, 0.12);
  --theme-focus: #39ff88;
  --theme-font: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

:root[data-theme="amber"] {
  color-scheme: dark;
  --theme-bg: #100800;
  --theme-panel: #1a0d02;
  --theme-panel-soft: #261504;
  --theme-panel-strong: #120900;
  --theme-text: #ffd27a;
  --theme-muted: #d8aa62;
  --theme-subtle: #b88949;
  --theme-border: #7c4a12;
  --theme-accent: #ffd27a;
  --theme-accent-label: #ffd27a;
  --theme-accent-strong: #fff1c9;
  --theme-accent-ink: #1a0d02;
  --theme-danger: #ff8f7a;
  --theme-warning: #ffd27a;
  --theme-shadow: 0 16px 40px rgba(255, 210, 122, 0.11);
  --theme-focus: #ffd27a;
  --theme-font: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

html {
  background: var(--theme-bg);
}

body {
  background: var(--theme-bg);
  color: var(--theme-text);
  font-family: var(--theme-font);
}

html.theme-applying *,
html.theme-applying *::before,
html.theme-applying *::after {
  transition: none !important;
}

:where(
  a[href],
  button:not(:disabled),
  input[type="button"]:not(:disabled),
  input[type="reset"]:not(:disabled),
  input[type="submit"]:not(:disabled),
  label[for],
  summary,
  [role="button"]:not([aria-disabled="true"])
) {
  cursor: pointer;
}

.skip-link {
  position: fixed;
  inset-block-start: 0.75rem;
  inset-inline-start: 0.75rem;
  z-index: 100;
  transform: translateY(-150%);
  border-radius: 0.5rem;
  background: #18181b;
  color: white;
  font-size: 0.875rem;
  font-weight: 700;
  padding: 0.65rem 0.9rem;
  transition: transform 120ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.theme-picker {
  display: grid;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
}

.theme-picker__label {
  color: var(--theme-subtle);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
}

.theme-picker__select {
  width: 100%;
  border: 1px solid var(--theme-border);
  border-radius: 0.375rem;
  background: var(--theme-panel-strong);
  color: var(--theme-text);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.45rem 0.55rem;
}

.site-header {
  background-color: color-mix(in srgb, var(--theme-bg) 90%, transparent);
  border-color: var(--theme-border);
  color: var(--theme-text);
}

.site-chrome-button {
  background-color: var(--theme-panel-strong);
  border-color: var(--theme-border);
  color: var(--theme-text);
  box-shadow: var(--theme-shadow);
}

.site-chrome-button:hover {
  background-color: var(--theme-accent);
  border-color: var(--theme-accent);
  color: var(--theme-accent-ink);
}

.site-brand:hover {
  background-color: var(--theme-panel);
}

.site-menu-panel {
  background-color: var(--theme-panel);
  border-color: var(--theme-border);
  color: var(--theme-text);
  box-shadow: var(--theme-shadow);
}

html[data-theme] :is(.bg-stone-50, .bg-zinc-50) {
  background-color: var(--theme-bg) !important;
}

html[data-theme] .bg-stone-50\/90 {
  background-color: color-mix(in srgb, var(--theme-bg) 90%, transparent) !important;
}

html[data-theme] .bg-white {
  background-color: var(--theme-panel) !important;
}

html[data-theme] :is(.bg-white\/90, .bg-white\/95) {
  background-color: color-mix(in srgb, var(--theme-panel) 94%, transparent) !important;
}

html[data-theme] :is(.bg-zinc-100, .bg-zinc-200) {
  background-color: var(--theme-panel-soft) !important;
}

html[data-theme] :is(input, select, textarea, button.bg-white, summary.bg-white, a.bg-white) {
  background-color: var(--theme-panel) !important;
  color: var(--theme-text) !important;
  -webkit-text-fill-color: var(--theme-text);
}

html[data-theme] :is(button, summary, a).border:not(.bg-zinc-950, .bg-teal-700, .bg-rose-800, .bg-amber-900) {
  color: var(--theme-text) !important;
  -webkit-text-fill-color: var(--theme-text);
}

html[data-theme="dark"] :is(.bg-white, input, select, textarea, button.bg-white, summary.bg-white, a.bg-white) {
  background-color: #111827 !important;
}

html[data-theme="terminal"] :is(.bg-white, input, select, textarea, button.bg-white, summary.bg-white, a.bg-white) {
  background-color: #030603 !important;
}

html[data-theme="amber"] :is(.bg-white, input, select, textarea, button.bg-white, summary.bg-white, a.bg-white) {
  background-color: #1a0d02 !important;
}

html[data-theme] .bg-teal-50 {
  background-color: color-mix(in srgb, var(--theme-accent) 16%, var(--theme-panel)) !important;
}

html[data-theme] .bg-amber-50 {
  background-color: color-mix(in srgb, var(--theme-warning) 18%, var(--theme-panel)) !important;
}

html[data-theme] .bg-rose-50 {
  background-color: color-mix(in srgb, var(--theme-danger) 14%, var(--theme-panel)) !important;
}

html[data-theme] :is(a, button, summary).bg-zinc-950 {
  background-color: var(--theme-accent) !important;
  color: var(--theme-accent-ink) !important;
  -webkit-text-fill-color: var(--theme-accent-ink);
}

html[data-theme] :is(.text-zinc-950, .text-zinc-900, .text-zinc-800, .text-black) {
  color: var(--theme-text) !important;
}

html[data-theme] :is(.text-zinc-700, .text-zinc-600, .text-zinc-500, .text-zinc-400) {
  color: var(--theme-muted) !important;
}

html[data-theme] :is(.text-teal-900, .text-teal-800, .text-teal-700, .text-teal-600) {
  color: var(--theme-accent-label) !important;
}

html[data-theme] :is(.text-rose-950, .text-rose-900, .text-rose-800, .text-rose-700, .text-red-700) {
  color: var(--theme-danger) !important;
}

html[data-theme] :is(.text-amber-950, .text-amber-900) {
  color: var(--theme-warning) !important;
}

html[data-theme] :is(.border-zinc-100, .border-zinc-200, .border-zinc-300, .border-teal-200, .border-rose-200, .border-amber-200) {
  border-color: var(--theme-border) !important;
}

html[data-theme] :is(.decoration-zinc-300, .decoration-teal-200) {
  text-decoration-color: var(--theme-border) !important;
}

html[data-theme] :is(.shadow-sm, .shadow-lg, .shadow-2xl) {
  box-shadow: var(--theme-shadow) !important;
}

html[data-theme] :is(.hover\:bg-white:hover, .hover\:bg-zinc-100:hover, .hover\:bg-teal-50:hover, .hover\:bg-rose-50:hover, .hover\:bg-red-50:hover) {
  background-color: var(--theme-panel-soft) !important;
}

html[data-theme] :is(.hover\:bg-zinc-950:hover, .hover\:bg-zinc-800:hover, .hover\:bg-teal-700:hover, .hover\:bg-teal-800:hover, .hover\:bg-rose-800:hover, .hover\:bg-rose-950:hover, .hover\:bg-amber-900:hover) {
  background-color: var(--theme-accent) !important;
  color: var(--theme-accent-ink) !important;
}

html[data-theme] :is(.hover\:border-zinc-950:hover, .hover\:border-teal-700:hover, .hover\:border-teal-800:hover, .hover\:border-rose-800:hover, .hover\:border-red-700:hover, .hover\:border-amber-900:hover) {
  border-color: var(--theme-accent) !important;
}

html[data-theme] :is(input, select, textarea) {
  accent-color: var(--theme-accent);
}

:is(
  a[href],
  button,
  summary,
  input,
  select,
  textarea,
  [role="button"],
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: 3px solid var(--theme-focus);
  outline-offset: 3px;
}

:is(
  .photo-viewer-shell,
  .photo-detail-frame
) :is(
  a[href],
  button,
  summary,
  input,
  select,
  textarea,
  [role="button"],
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline-color: #ffffff;
  box-shadow: 0 0 0 5px rgba(15, 118, 110, 0.72);
}

.selection-control {
  opacity: 0;
  transition: opacity 140ms ease, transform 140ms ease;
}

.group:hover .selection-control,
.selection-control:focus-within,
.selection-control:has(input:checked) {
  opacity: 1;
}

.selection-control input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.selection-circle {
  display: grid;
  place-items: center;
  inline-size: 1.35rem;
  block-size: 1.35rem;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  background: rgba(24, 24, 27, 0.18);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
}

.selection-control input:checked + .selection-circle {
  border-color: #e0f2fe;
  background: #2563eb;
  color: white;
}

.selection-control:focus-within .selection-circle {
  outline: 2px solid white;
  outline-offset: 2px;
}

.day-selection-control .selection-circle {
  inline-size: 1.45rem;
  block-size: 1.45rem;
  border-color: rgba(24, 24, 27, 0.82);
  background: white;
  color: rgba(24, 24, 27, 0.82);
  box-shadow: 0 1px 4px rgba(24, 24, 27, 0.22);
}

.day-selection-control input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.day-selection-control:hover {
  background: rgba(24, 24, 27, 0.08);
}

.day-selection-control:hover .selection-circle {
  border-color: #18181b;
  background: #f4f4f5;
  color: #18181b;
}

.day-selection-control:focus-within {
  outline: 2px solid #0f766e;
  outline-offset: 2px;
}

.day-selection-control:focus-within .selection-circle {
  outline: none;
}

.day-selection-control input:checked + .selection-circle {
  border-color: #bfdbfe;
  background: #2563eb;
  color: white;
}

.day-selection-control input:indeterminate + .selection-circle {
  border-color: #cbd5e1;
  background: #64748b;
  color: transparent;
}

.day-selection-control input:indeterminate + .selection-circle::before {
  content: "-";
  color: white;
  font-size: 0.9rem;
}

.bulk-action-disabled {
  cursor: not-allowed;
  opacity: 0.42;
  pointer-events: none;
}

.photo-day-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, var(--photo-tile-width, 13rem)));
  grid-auto-rows: var(--photo-tile-height, 220px);
  gap: var(--photo-tile-row-gap, 1.6rem) var(--photo-tile-gap, 0.5rem);
  padding-block-start: var(--photo-day-marker-offset, 1.6rem);
}

.photo-grid-size-compact {
  --photo-tile-width: 9.75rem;
  --photo-tile-height: 156px;
  --photo-tile-gap: 0.3rem;
  --photo-tile-row-gap: 1.5rem;
  --photo-day-marker-offset: 1.6rem;
}

.photo-grid-size-medium {
  --photo-tile-width: 13rem;
  --photo-tile-height: 220px;
  --photo-day-marker-offset: 1.75rem;
}

.photo-grid-size-large {
  --photo-tile-width: 16rem;
  --photo-tile-height: 284px;
  --photo-day-marker-offset: 1.75rem;
}

.photo-day-group {
  display: contents;
}

.photo-day-marker {
  inset-block-start: calc(-1 * var(--photo-day-marker-offset, 1.6rem));
  inset-inline-start: 0;
  max-width: min(100%, 16rem);
}

.photo-card-frame {
  overflow: hidden;
}

.photo-day-group-grid {
  display: contents;
}

.photo-flat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, var(--photo-tile-width, 13rem)));
  grid-auto-rows: var(--photo-tile-height, 220px);
  gap: var(--photo-tile-gap, 0.75rem);
}

.photo-flat-pages {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, var(--photo-tile-width, 13rem)));
  grid-auto-rows: var(--photo-tile-height, 220px);
  gap: var(--photo-tile-gap, 0.75rem);
}

.photo-flat-pages > .photo-flat-grid {
  display: contents;
}

.photo-flat-pages > [data-infinite-scroll-target="sentinel"] {
  grid-column: 1 / -1;
  min-height: 2rem;
  padding-block: 0.5rem;
}

.photo-card-caption {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

@media (min-width: 640px) {
  .photo-day-groups {
    grid-template-columns: repeat(auto-fill, minmax(var(--photo-tile-width, 13rem), 1fr));
  }

  .photo-flat-grid {
    grid-template-columns: repeat(auto-fill, minmax(var(--photo-tile-width, 13rem), 1fr));
  }

  .photo-flat-pages {
    grid-template-columns: repeat(auto-fill, minmax(var(--photo-tile-width, 13rem), 1fr));
  }
}

.ui-tooltip {
  position: relative;
}

.ui-tooltip:hover::after,
.ui-tooltip:focus-visible::after {
  content: attr(data-tooltip);
  position: absolute;
  inset-block-start: calc(100% + 0.55rem);
  inset-inline-end: 0;
  z-index: 60;
  width: max-content;
  max-width: 14rem;
  padding: 0.42rem 0.58rem;
  border-radius: 0.35rem;
  background: #18181b;
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
  pointer-events: none;
}

.ui-tooltip--left:hover::after,
.ui-tooltip--left:focus-visible::after {
  inset-inline: 0 auto;
}

html:has(body.photo-detail-page),
body.photo-detail-page {
  block-size: 100%;
  overflow: hidden;
}

.photo-detail-frame,
.photo-viewer-shell {
  block-size: 100vh;
  min-block-size: 0;
  overflow: hidden;
}

@supports (block-size: 100dvh) {
  .photo-detail-frame,
  .photo-viewer-shell {
    block-size: 100dvh;
  }
}

.photo-detail-media {
  border-radius: 0;
  box-shadow: none;
  max-block-size: 100vh;
  max-inline-size: 100vw;
}

@supports (max-block-size: 100dvh) {
  .photo-detail-media {
    max-block-size: 100dvh;
  }
}

.photo-stream-navigation {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity 160ms ease, transform 200ms ease, right 200ms ease;
}

.photo-viewer-topbar {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.42) 42%, rgba(0, 0, 0, 0.16) 72%, rgba(0, 0, 0, 0));
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, right 200ms ease;
}

.photo-viewer-topbar :is(a, button) {
  pointer-events: none;
}

.photo-viewer-action {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}

.photo-viewer-shell:hover .photo-stream-navigation,
.photo-viewer-shell:focus-within .photo-stream-navigation {
  opacity: 1;
  pointer-events: auto;
}

.photo-viewer-shell:hover .photo-viewer-topbar,
.photo-viewer-shell:focus-within .photo-viewer-topbar {
  opacity: 1;
}

.photo-viewer-shell:hover .photo-viewer-topbar :is(a, button),
.photo-viewer-shell:focus-within .photo-viewer-topbar :is(a, button) {
  pointer-events: auto;
}

.photo-viewer-shell.info-panel-open [data-info-panel-button] {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .photo-viewer-shell .photo-zoom-frame {
    transition: transform 170ms ease;
    will-change: transform;
  }

  .photo-viewer-shell--exit-next .photo-zoom-frame {
    transform: translateY(-2rem);
  }

  .photo-viewer-shell--exit-previous .photo-zoom-frame {
    transform: translateY(2rem);
  }

  .photo-viewer-shell--enter-next .photo-zoom-frame {
    transform: translateY(2rem);
  }

  .photo-viewer-shell--enter-previous .photo-zoom-frame {
    transform: translateY(-2rem);
  }

  .photo-viewer-shell--entered .photo-zoom-frame {
    transform: translateY(0);
  }
}

@media (min-width: 1024px) {
  .photo-viewer-shell.info-panel-open {
    padding-right: calc(390px + 1.5rem);
  }

  .photo-viewer-shell.info-panel-open .photo-viewer-topbar {
    right: calc(390px + 1rem);
  }

  .photo-viewer-shell.info-panel-open .photo-zoom-minimap {
    right: calc(390px + 1rem);
  }

  .photo-viewer-shell.info-panel-open .photo-stream-navigation {
    right: calc(390px + 1rem);
  }
}

@media (min-width: 1024px) {
  html:has(body.stream-timeline-scrollbar) {
    scrollbar-width: none;
  }

  html:has(body.stream-timeline-scrollbar)::-webkit-scrollbar {
    inline-size: 0;
    block-size: 0;
  }

  .stream-timeline-scrollbar {
    scrollbar-width: none;
  }

  .stream-timeline-scrollbar::-webkit-scrollbar {
    inline-size: 0;
    block-size: 0;
  }
}

.stream-timeline {
  pointer-events: none;
}

.stream-timeline__rail {
  pointer-events: auto;
  inline-size: 100%;
}

.stream-timeline__track {
  position: absolute;
  inset-block: 0.75rem;
  inset-inline-end: 0.85rem;
  inline-size: 2px;
  border-radius: 999px;
  background: rgba(161, 161, 170, 0.72);
}

.stream-timeline__thumb {
  position: absolute;
  inset-inline-end: 0.48rem;
  inline-size: 0.85rem;
  block-size: 2.25rem;
  border: 2px solid white;
  border-radius: 999px;
  background: #0f766e;
  box-shadow: 0 6px 16px rgba(15, 118, 110, 0.28);
  transform: translateY(-50%);
  z-index: 2;
}

.stream-timeline__item {
  inset-inline-end: 0.55rem;
  justify-content: flex-end;
  min-inline-size: 4.25rem;
  line-height: 1;
}

.stream-timeline__dot {
  inline-size: 0.25rem;
  block-size: 0.25rem;
}

.stream-timeline__dot--year,
.stream-timeline__item--active .stream-timeline__dot {
  inline-size: 0.4rem;
  block-size: 0.4rem;
}

.stream-timeline__label {
  inset-inline-end: 2.35rem;
  z-index: 3;
  padding: 0.42rem 0.6rem;
  border-radius: 0.45rem;
  background: rgba(24, 24, 27, 0.96);
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24);
  white-space: nowrap;
}

.stream-timeline__label::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: -0.32rem;
  inline-size: 0.65rem;
  block-size: 0.65rem;
  background: rgba(24, 24, 27, 0.96);
  transform: translateY(-50%) rotate(45deg);
}