@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    @apply text-neutral-800 dark:text-neutral-200 antialiased;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply text-neutral-900 dark:text-neutral-100 font-medium;
    letter-spacing: -0.02em;
  }
}

@layer components {
  .card {
    @apply bg-white dark:bg-neutral-800 rounded-xl shadow-card border border-neutral-200/50 dark:border-neutral-700/50;
  }
  
  .btn-primary {
    @apply bg-accent-500 hover:bg-accent-600 text-white font-medium px-4 py-3 sm:px-6 rounded-lg transition-colors duration-200 shadow-subtle touch-manipulation;
  }
  
  .btn-secondary {
    @apply bg-neutral-100 dark:bg-neutral-700 hover:bg-neutral-200 dark:hover:bg-neutral-600 text-neutral-700 dark:text-neutral-300 font-medium px-4 py-3 sm:px-6 rounded-lg transition-colors duration-200 touch-manipulation;
  }
  
  .input-field {
    @apply border-neutral-200 dark:border-neutral-600 focus:border-accent-500 focus:ring-accent-500/20 rounded-lg bg-white dark:bg-neutral-700 px-4 py-3 text-neutral-900 dark:text-neutral-100 placeholder-neutral-500 dark:placeholder-neutral-400 transition-colors duration-200;
  }
}

/* Turbo progress bar styling */
.turbo-progress-bar {
  background-color: #ef4444 !important; /* accent-500 color */
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* Homepage specific styles */
.homepage-bg {
  background-color: #f7f6f1;
}

.homepage .bg-white {
  background-color: #f7f6f1 !important;
}

[data-native-app] .native-auth-main {
  padding-top: calc(4rem + env(safe-area-inset-top)) !important;
}

.auth-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.auth-logo__image {
  display: block;
  width: auto;
  height: 2.4rem;
}

.native-enhancement-main {
  padding-top: calc(2rem + env(safe-area-inset-top));
  padding-bottom: calc(2rem + env(safe-area-inset-bottom));
}

.show-page-main {
  display: grid;
  grid-template-columns: minmax(10.5rem, 1fr) minmax(0, 56rem) minmax(10.5rem, 1fr);
  column-gap: 1.25rem;
  width: min(100%, 80rem);
  margin-inline: auto;
  padding-top: 1.35rem;
}

.show-page-header {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: start;
  margin-bottom: 0.9rem;
}

.show-page-header__back {
  grid-column: 1;
  display: flex;
  justify-content: flex-start;
  padding-top: 0.1rem;
}

.show-page-header__heading {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

.show-page-header__actions {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  align-self: start;
  justify-content: flex-start;
  justify-self: start;
  min-width: 0;
  padding-left: 1rem;
  z-index: 1;
}

.show-page-card {
  grid-column: 2;
  min-height: calc(100vh - 13rem);
  border: 1px solid rgb(229 229 229);
  border-radius: 0.75rem;
  background: rgb(255 255 255);
  padding: 2rem;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
}

.show-page-title {
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0 0 0.22rem;
  color: rgb(17 24 39);
  font-size: 2.35rem;
  font-weight: 780;
  letter-spacing: 0;
  line-height: 1.05;
}

.show-page-note {
  margin: 0.72rem 0 0;
  padding: 0 0 0.18rem;
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.45;
}

.show-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  width: fit-content;
  height: 2.55rem;
  max-width: 100%;
  margin: 0 1rem 0.85rem;
  border: 1px solid rgb(229 229 229);
  border-radius: 9999px;
  background: rgb(255 255 255);
  padding: 0 0.72rem;
  color: #666666;
  box-shadow: 0 0.55rem 1.5rem rgb(15 23 42 / 0.08);
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  overflow: visible;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.show-page-header .show-back-link {
  margin: 0;
}

.show-back-link:hover {
  transform: translateY(-1px);
  border-color: rgb(212 212 216);
  background: rgb(250 250 250);
  color: rgb(17 24 39);
}

.show-back-link:focus-visible {
  outline: 2px solid rgb(239 65 53);
  outline-offset: 3px;
}

.show-back-link__icon {
  width: 0.98rem;
  height: 0.98rem;
  flex: 0 0 auto;
}

.show-page-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.55rem;
  height: 2.55rem;
  border: 1px solid rgb(229 229 229);
  border-radius: 9999px;
  background: rgb(255 255 255);
  color: rgb(82 82 91);
  box-shadow: 0 0.55rem 1.5rem rgb(15 23 42 / 0.08);
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.show-page-action-button:hover {
  transform: translateY(-1px);
  border-color: rgb(212 212 216);
  background: rgb(250 250 250);
  color: rgb(17 24 39);
}

.show-page-action-button:focus-visible {
  outline: 2px solid rgb(239 65 53);
  outline-offset: 3px;
}

.show-page-primary-action {
  display: inline-flex;
  gap: 0.38rem;
  height: 2.55rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: rgb(59 130 246);
  padding: 0 1rem;
  color: rgb(255 255 255);
  box-shadow: 0 0.55rem 1.5rem rgb(37 99 235 / 0.18);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: background-color 150ms ease, transform 150ms ease;
}

.show-page-primary-action:hover {
  transform: translateY(-1px);
  background: rgb(37 99 235);
}

.show-page-primary-action:focus-visible {
  outline: 2px solid rgb(96 165 250);
  outline-offset: 3px;
}

.show-page-action-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 2.55rem;
  border: 1px solid rgb(229 229 229);
  /* Explicit half-height radius (not 9999px) so squaring one corner doesn't let
     the adjacent corner's radius balloon to the full height. */
  border-radius: 1.275rem;
  background: rgb(255 255 255);
  box-shadow: 0 0.55rem 1.5rem rgb(15 23 42 / 0.08);
}

.show-page-action-pill__segment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.85rem;
  height: 100%;
  border: 0;
  background: transparent;
  color: #666666;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.show-page-action-pill__segment + .show-page-action-pill__segment {
  border-left: 1px solid rgb(229 229 229);
}

.show-page-action-pill__segment:first-child {
  border-top-left-radius: 1.275rem;
  border-bottom-left-radius: 1.275rem;
}

.show-page-action-pill__segment:last-child,
.show-page-action-pill__segment:has(+ [data-dropdown-target]) {
  border-top-right-radius: 1.275rem;
  border-bottom-right-radius: 1.275rem;
}

.show-page-action-pill__segment:hover {
  background: rgb(250 250 250);
  color: rgb(17 24 39);
}

.show-page-action-pill__segment:focus-visible {
  outline: 2px solid rgb(239 65 53);
  outline-offset: -2px;
}

.show-page-action-pill__segment[data-tooltip] {
  position: relative;
}

.show-page-action-pill__segment[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: rgb(23 23 23);
  color: rgb(255 255 255);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1;
  padding: 0.42rem 0.6rem;
  border-radius: 0.45rem;
  box-shadow: 0 0.5rem 1rem rgb(15 23 42 / 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
  z-index: 20;
}

.show-page-action-pill__segment[data-tooltip]:hover::after,
.show-page-action-pill__segment[data-tooltip]:focus-visible::after {
  opacity: 1;
}

/* When the menu is open, square off the pill's bottom corners so it reads as a
   flat-bottomed container above the dropdown. Top corners stay rounded. */
.show-page-action-pill.menu-open {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.show-page-action-pill.menu-open .show-page-action-pill__segment:first-child {
  border-bottom-left-radius: 0;
}

.show-page-action-pill.menu-open .show-page-action-pill__segment:has(+ [data-dropdown-target]) {
  border-bottom-right-radius: 0;
}

@media (min-width: 640px) {
  .show-back-link {
    margin-inline: 0;
  }
}

@media (max-width: 767px) {
  .show-page-main {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 0.75rem;
    padding-top: 0.85rem;
  }

  .show-page-header {
    grid-template-columns: subgrid;
    padding-inline: 1rem;
  }

  /* The back control moves into the navbar's left slot on phones. Scoped to the
     slot for specificity so it beats the later unconditional `display: none`. */
  .navigation-menu__slot--start .navigation-menu__back {
    display: inline-flex;
  }

  .show-page-header__back {
    display: none;
  }

  .show-page-header__heading {
    grid-column: 1;
    grid-row: 1;
    padding-right: 0;
  }

  .show-page-header__actions {
    grid-column: 2;
    grid-row: 1;
    align-items: flex-start;
  }

  .show-page-card {
    grid-column: 1 / -1;
    min-height: calc(100vh - 13rem);
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    padding: 1.25rem 1rem 2rem;
  }

  .show-page-title {
    max-width: none;
    font-size: 2rem;
  }

  .show-page-note {
    font-size: 1rem;
  }

  .show-page-primary-action {
    max-width: 9rem;
    padding-inline: 0.78rem;
    text-align: center;
  }
}

.index-page {
  min-height: calc(100vh - 4rem);
  background: rgb(255 255 255);
}

.index-page-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  width: min(100%, 80rem);
  margin-inline: auto;
  padding: 0.65rem 1rem 1.15rem;
}

.index-page-header__actions {
  display: flex;
  min-width: 0;
  align-items: center;
}

.index-page-header__actions--start {
  justify-content: flex-start;
}

.index-page-header__actions--end {
  justify-content: flex-end;
}

.index-page-header__title {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: rgb(17 24 39);
  font-size: clamp(1.65rem, 2.45vw, 2.25rem);
  font-weight: 720;
  letter-spacing: 0;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.index-page-header__separator {
  color: rgb(163 163 163);
  font-weight: 500;
}

.index-page-header__context {
  color: rgb(82 82 82);
  font-weight: 550;
}

.index-page-header__button {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 0.58rem;
  border-radius: 9999px;
  min-height: 2.35rem;
  padding: 0.46rem 1.18rem;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  touch-action: manipulation;
  transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.index-page-header__button:hover {
  transform: translateY(-1px);
}

.index-page-header__button--primary {
  background: rgb(239 65 53);
  color: rgb(255 255 255);
}

.index-page-header__button--primary:hover {
  background: rgb(220 38 38);
}

.index-page-header__button--template-primary {
  background: rgb(59 130 246);
  color: rgb(255 255 255);
}

.index-page-header__button--template-primary:hover {
  background: rgb(37 99 235);
}

.index-page-header__button--secondary {
  background: rgb(239 65 53);
  color: rgb(255 255 255);
}

.index-page-header__button--secondary:hover {
  background: rgb(220 38 38);
}

.index-page-header__button-icon,
.index-page-header__button svg {
  width: 1.45rem;
  height: 1.45rem;
  flex: 0 0 auto;
}

.index-page__content {
  display: flex;
  min-height: calc(100vh - 9.5rem);
  width: min(100%, 80rem);
  margin-inline: auto;
}

.index-page__sidebar {
  width: 100%;
  flex: 0 0 auto;
  background: rgb(255 255 255);
}

.index-page__sidebar-inner {
  padding: 0.85rem 0.75rem 1.5rem;
}

.index-page__main {
  min-width: 0;
  flex: 1 1 auto;
  padding: 0.85rem 1rem 2.5rem;
}

/* Experiment: on phones the folder picker is a compact dropdown that lives in
   the navbar's left slot (next to the logo). On desktop it is hidden in favour
   of the full sidebar list. */
.folder-navbar-nav {
  position: relative;
  display: inline-flex;
}

.folder-navbar-nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  border-radius: 9999px;
  border: 1px solid rgb(229 229 229);
  background: rgb(255 255 255);
  padding: 0.3rem 0.55rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgb(17 24 39);
}

.folder-navbar-nav__icon {
  display: inline-flex;
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  color: rgb(115 115 115);
}

.folder-navbar-nav__icon > svg {
  width: 1rem;
  height: 1rem;
}

.folder-navbar-nav__chevron {
  display: inline-flex;
  width: 0.85rem;
  height: 0.85rem;
  flex: 0 0 0.85rem;
  color: rgb(115 115 115);
  transition: transform 150ms ease;
}

.folder-navbar-nav__chevron > svg {
  width: 0.85rem;
  height: 0.85rem;
}

.folder-navbar-nav:has(.folder-navbar-nav__menu:not(.hidden)) .folder-navbar-nav__chevron {
  transform: rotate(180deg);
}

.folder-navbar-nav__menu {
  position: absolute;
  inset-inline-start: 0;
  top: calc(100% + 0.4rem);
  z-index: 60;
  width: max-content;
  min-width: 13rem;
  max-width: min(18rem, calc(100vw - 1.5rem));
  max-height: 70vh;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  border-radius: 0.85rem;
  border: 1px solid rgb(229 229 229);
  background: rgb(255 255 255);
  padding: 0.4rem;
  box-shadow: 0 12px 28px -8px rgb(0 0 0 / 0.18);
}

.folder-navbar-nav__menu > li + li {
  margin-top: 0.15rem;
}

.folder-navbar-nav__menu-icon {
  display: inline-flex;
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  color: rgb(115 115 115);
}

.folder-navbar-nav__menu-icon > svg {
  width: 1rem;
  height: 1rem;
}

@media (prefers-color-scheme: dark) {
  .folder-navbar-nav__trigger {
    border-color: rgb(64 64 64);
    background: rgb(38 38 38);
    color: rgb(245 245 245);
  }

  .folder-navbar-nav__menu {
    border-color: rgb(64 64 64);
    background: rgb(38 38 38);
  }
}

@media (min-width: 768px) {
  .folder-navbar-nav {
    display: none;
  }

  .index-page__sidebar {
    width: 16rem;
  }

  .index-page__main {
    padding-inline: 1.5rem;
  }
}

@media (max-width: 767px) {
  .index-page-header {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 0.75rem;
    padding-block: 0;
  }

  /* No index page passes a left action today; collapse the empty slot so the
     title and button share one row instead of stacking. */
  .index-page-header__actions--start:empty {
    display: none;
  }

  .index-page-header__title {
    grid-column: 1;
    grid-row: 1;
    text-align: left;
    font-size: 1.85rem;
  }

  /* When a folder is selected, stack the page name over the folder name as a
     breadcrumb so a long folder name does not push the title off-screen. */
  .index-page-header__title:has(.index-page-header__context) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
  }

  .index-page-header__title:has(.index-page-header__context) .index-page-header__base {
    font-size: 0.95rem;
    font-weight: 600;
    color: rgb(115 115 115);
  }

  .index-page-header__title:has(.index-page-header__context) .index-page-header__separator {
    display: none;
  }

  .index-page-header__title:has(.index-page-header__context) .index-page-header__context {
    max-width: 100%;
    overflow: hidden;
    font-weight: 720;
    color: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .index-page-header__actions--end {
    grid-column: 2;
    grid-row: 1;
  }

  .index-page__content {
    flex-direction: column;
  }

  /* The folder picker now lives in the navbar on phones, so the sidebar has
     nothing left to show here. */
  .index-page__sidebar {
    display: none;
  }

  /* The folder pill is icon-only on phones, so the leading and trailing tracks
     stay equal (1fr) and the logo sits at the exact centre of the bar. Only
     bars that carry the pill (index pages) are restyled. */
  .navigation-menu__bar:has(.folder-navbar-nav) {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    column-gap: 0.5rem;
  }

  .navigation-menu__slot--start {
    justify-content: flex-start;
  }
}

.navigation-menu {
  position: relative;
  z-index: 40;
  background: rgb(255 255 255);
}

.navigation-menu:has(.navigation-menu__dialog[open]) {
  z-index: 80;
}

.navigation-menu__bar {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem;
  align-items: center;
  width: min(100%, 80rem);
  margin-inline: auto;
  padding: 0.8rem 1rem;
}

.navigation-menu__slot {
  min-width: 2.5rem;
}

.navigation-menu__slot--end {
  display: flex;
  justify-content: flex-end;
}

/* Icon-only back arrow shown in the navbar's left slot on phones (replaces the
   stacked "Back" row above the title on show pages). Hidden on desktop, where
   the labeled pill in the page gutter is used instead. */
.navigation-menu__back {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  border: 1px solid rgb(229 229 229);
  border-radius: 9999px;
  background: rgb(255 255 255);
  color: rgb(39 39 42);
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.navigation-menu__back:hover {
  border-color: rgb(212 212 216);
  background: rgb(250 250 250);
  color: rgb(17 24 39);
}

.navigation-menu__back > svg {
  width: 1.05rem;
  height: 1.05rem;
}

@media (prefers-color-scheme: dark) {
  .navigation-menu__back {
    border-color: rgb(64 64 64);
    background: rgb(38 38 38);
    color: rgb(229 229 229);
  }
}

.navigation-menu__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  gap: 0.34rem;
  max-width: 100%;
  border-radius: 9999px;
  padding: 0.34rem 0.78rem;
  color: rgb(17 24 39);
  cursor: pointer;
  font-size: 0.98rem;
  font-weight: 650;
  line-height: 1;
  transition: background-color 150ms ease, box-shadow 150ms ease;
}

.navigation-menu__trigger:hover,
.navigation-menu__trigger[aria-expanded="true"] {
  background: rgb(238 238 238);
}

.navigation-menu__avatar {
  display: inline-grid;
  place-items: center;
  width: 1.86rem;
  height: 1.86rem;
  border: 1px solid rgb(226 232 240);
  border-radius: 9999px;
  background: rgb(248 250 252);
  color: rgb(17 24 39);
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.75) inset,
    0 0.1rem 0.25rem rgb(15 23 42 / 0.08);
  font-size: 0.78rem;
  font-weight: 800;
}

.navigation-menu__logo {
  display: block;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.navigation-menu__logo--trigger {
  height: 1.65rem;
}

.navigation-menu__logo--header {
  height: 1.75rem;
  margin-inline: auto;
}

.navigation-menu__trigger-chevron {
  width: 0.9rem;
  height: 0.9rem;
  flex: 0 0 auto;
  color: currentColor;
  transition: transform 150ms ease;
}

.navigation-menu__trigger[aria-expanded="true"] .navigation-menu__trigger-chevron {
  transform: rotate(180deg);
}

.navigation-menu__avatar {
  text-transform: uppercase;
}

.navigation-menu__dialog {
  position: fixed;
  inset: 0 0 auto;
  width: min(calc(100vw - 1.25rem), 34rem);
  max-height: calc(100dvh - 1.5rem);
  margin: 0.55rem auto 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgb(23 23 23);
  opacity: 0;
  overflow: visible;
  transform: scale(0.2);
  transform-origin: top center;
  transition: 180ms ease-out allow-discrete;
  transition-property: display, opacity, overlay, transform;
}

.navigation-menu__dialog[open] {
  opacity: 1;
  transform: scale(1);
}

@starting-style {
  .navigation-menu__dialog[open] {
    opacity: 0;
    transform: scale(0.2);
  }
}

.navigation-menu__dialog::backdrop {
  background: rgb(255 255 255 / 0.01);
}

.navigation-menu__panel {
  display: flex;
  flex-direction: column;
  gap: 0.72rem;
  max-height: calc(100dvh - 1.5rem);
  overflow: auto;
  border: 1px solid rgb(254 202 202);
  border-radius: 1.35rem;
  background: rgb(255 255 255);
  padding: 0.9rem 1.15rem 0.82rem;
  box-shadow:
    0 0 0 1px rgb(239 65 53 / 0.035),
    0 0.5rem 1.25rem rgb(239 65 53 / 0.07),
    0 1.25rem 2.5rem rgb(15 23 42 / 0.11);
}

.navigation-menu__panel:focus {
  outline: none;
}

.navigation-menu__header {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) 1.5rem;
  align-items: center;
  gap: 0.4rem;
}

.navigation-menu__title {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  overflow: hidden;
  color: rgb(15 23 42);
  font-size: 1.34rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.15;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navigation-menu__close {
  display: none;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  color: rgb(82 82 82);
  font-size: 1.35rem;
  line-height: 1;
}

.navigation-menu__close:hover {
  background: rgb(245 245 245);
  color: rgb(23 23 23);
}

.navigation-menu__tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

.navigation-menu__tile {
  display: flex;
  min-width: 0;
  aspect-ratio: 5 / 2.95;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  border-radius: 0.62rem;
  background: rgb(245 245 245);
  color: rgb(15 23 42);
  padding: 0.52rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  transition: background-color 150ms ease, color 150ms ease;
}

.navigation-menu__tile:focus,
.navigation-menu__row:focus {
  outline: none;
}

.navigation-menu__tile:focus-visible,
.navigation-menu__row:focus-visible {
  outline: 2px solid rgb(239 65 53);
  outline-offset: 2px;
}

.navigation-menu__tile:hover {
  background: rgb(238 238 238);
}

.navigation-menu__tile--current {
  background: rgb(254 232 230);
  color: rgb(225 45 35);
}

.navigation-menu__tile-icon {
  width: 1.58rem;
  height: 1.58rem;
  flex: 0 0 auto;
}

.navigation-menu__sections {
  display: flex;
  flex-direction: column;
}

.navigation-menu__section {
  padding: 0.42rem 0;
}

.navigation-menu__section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgb(15 23 42);
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.navigation-menu__section-title::-webkit-details-marker {
  display: none;
}

.navigation-menu__section-chevron {
  width: 0.88rem;
  height: 0.88rem;
  transition: transform 150ms ease;
}

.navigation-menu__section:not([open]) .navigation-menu__section-chevron {
  transform: rotate(-90deg);
}

.navigation-menu__list {
  display: flex;
  flex-direction: column;
  gap: 0.04rem;
  margin: 0.32rem 0 0;
  padding: 0;
  padding-left: 1.32rem;
  list-style: none;
}

.navigation-menu__row {
  display: flex;
  align-items: center;
  gap: 0.92rem;
  min-width: 0;
  border-radius: 0.48rem;
  padding: 0.48rem 0.5rem;
  color: rgb(17 24 39);
  font-size: 1.05rem;
  font-weight: 550;
  transition: background-color 150ms ease, color 150ms ease;
}

.navigation-menu__row:hover {
  background: rgb(247 247 247);
}

.navigation-menu__row--current {
  color: rgb(225 45 35);
}

.navigation-menu__icon {
  width: 1.3rem;
  height: 1.3rem;
  flex: 0 0 auto;
}

.navigation-menu__row-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navigation-menu__check {
  width: 1.22rem;
  height: 1.22rem;
  flex: 0 0 auto;
  margin-left: auto;
  color: rgb(239 65 53);
}

@media (max-width: 640px) {
  .navigation-menu__dialog {
    width: min(calc(100vw - 1rem), 34rem);
  }

  .navigation-menu__panel {
    border-radius: 1.1rem;
    padding: 0.9rem;
  }

  .navigation-menu__tiles {
    gap: 0.45rem;
  }

  .navigation-menu__tile {
    font-size: 0.84rem;
  }
}

@media (any-hover: none) {
  .navigation-menu__close {
    display: inline-grid;
  }
}

.folder-nav-icon {
  position: relative;
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 1.25rem;
  color: rgb(64 64 64);
}

.folder-nav-icon > svg {
  width: 1.25rem;
  height: 1.25rem;
}

.folder-state-icon > svg {
  position: absolute;
  inset: 0;
  transform-origin: 50% 70%;
}

.folder-state-icon__open {
  opacity: 0;
  transform: scale(0.98);
}

.folder-state-icon__closed {
  opacity: 1;
  transform: scale(1);
}

.folder-state-icon.is-open .folder-state-icon__closed {
  animation: folder-close-away 120ms ease-out both;
}

.folder-state-icon.is-open .folder-state-icon__open {
  animation: folder-open-settle 180ms ease-out both;
}

.folder-state-icon.is-open .folder-state-icon__tab {
  animation: folder-tab-lift 180ms ease-out both;
  transform-origin: 25% 45%;
}

.folder-state-icon.is-open .folder-state-icon__tray {
  animation: folder-tray-slide 180ms ease-out both;
  transform-origin: 50% 80%;
}

.folder-count-badge {
  display: inline-flex;
  min-width: 1.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: rgb(229 229 229);
  padding: 0.125rem 0.45rem;
  font-size: 0.6875rem;
  font-weight: 650;
  line-height: 1;
  color: rgb(82 82 82);
  font-variant-numeric: tabular-nums;
}

@keyframes folder-close-away {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.98);
  }
}

@keyframes folder-open-settle {
  0% {
    opacity: 0;
    transform: scale(0.98);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes folder-tab-lift {
  0% {
    transform: translateY(1px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes folder-tray-slide {
  0% {
    transform: translateY(1px);
  }
  100% {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .folder-state-icon.is-open .folder-state-icon__closed,
  .folder-state-icon.is-open .folder-state-icon__open,
  .folder-state-icon.is-open .folder-state-icon__tab,
  .folder-state-icon.is-open .folder-state-icon__tray {
    animation: none;
  }

  .folder-state-icon.is-open .folder-state-icon__closed {
    opacity: 0;
  }

  .folder-state-icon.is-open .folder-state-icon__open {
    opacity: 1;
    transform: none;
  }
}

.generate-modal-card {
  position: relative;
  overflow: hidden;
}

.generate-modal-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
  background: rgb(124 58 237);
}

.generate-modal-card.is-generating::before {
  opacity: 1;
}

.generate-modal-card > * {
  position: relative;
}

.generate-modal-card.is-generating .generate-form-panel {
  display: none;
}

.generate-loading {
  display: none;
  color: rgb(255 255 255);
}

.generate-modal-card.is-generating .generate-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
}

/* flex: none keeps children from collapsing when the locked card height runs tight */
.generate-loading > * {
  flex: none;
}

.generate-loading__scene {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1.125rem;
}

.generate-loading__bird-wrap {
  position: relative;
}

.generate-loading__bird {
  display: block;
  width: 2.25rem;
  height: auto;
  transform-origin: 30% 90%;
  animation: generate-peck 1.6s ease-in-out infinite;
}

@keyframes generate-peck {
  0%,
  45%,
  100% {
    transform: rotate(0deg);
  }
  55% {
    transform: rotate(13deg);
  }
  63% {
    transform: rotate(1deg);
  }
  71% {
    transform: rotate(13deg);
  }
  80% {
    transform: rotate(0deg);
  }
}

.generate-loading__star {
  position: absolute;
  background: rgb(255 255 255 / 0.9);
  clip-path: polygon(50% 0%, 63% 37%, 100% 50%, 63% 63%, 50% 100%, 37% 63%, 0% 50%, 37% 37%);
  animation: generate-twinkle 1.8s ease-in-out infinite;
}

.generate-loading__star--1 {
  top: -10px;
  left: -14px;
  width: 11px;
  height: 11px;
}

.generate-loading__star--2 {
  top: 2px;
  right: -13px;
  width: 8px;
  height: 8px;
  animation-delay: 0.6s;
}

.generate-loading__star--3 {
  bottom: 2px;
  left: -17px;
  width: 7px;
  height: 7px;
  animation-delay: 1.2s;
}

@keyframes generate-twinkle {
  0%,
  100% {
    opacity: 0.25;
    transform: scale(0.6) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1) rotate(20deg);
  }
}

.generate-loading__title {
  font-size: 1.0625rem;
  font-weight: 600;
}

.generate-loading__prompt {
  margin-top: 0.25rem;
  max-width: 100%;
  padding: 0 1rem;
  font-size: 0.8125rem;
  color: rgb(237 233 254 / 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.generate-loading__rows {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  width: 12rem;
}

.generate-loading__row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  opacity: 0;
  animation: generate-row 4.2s ease-in-out infinite;
  animation-delay: calc(var(--row-index) * 0.4s);
}

@keyframes generate-row {
  0% {
    opacity: 0;
    transform: translateX(-6px);
  }
  10%,
  82% {
    opacity: 1;
    transform: translateX(0);
  }
  94%,
  100% {
    opacity: 0;
  }
}

.generate-loading__check {
  position: relative;
  flex: none;
  width: 1rem;
  height: 1rem;
  border: 2px solid rgb(255 255 255 / 0.9);
  border-radius: 9999px;
}

.generate-loading__check::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 8px;
  border-right: 2px solid rgb(255 255 255 / 0.8);
  border-bottom: 2px solid rgb(255 255 255 / 0.8);
  opacity: 0;
  transform: translate(-50%, -60%) rotate(45deg) scale(0);
  animation: generate-check 4.2s ease-in-out infinite;
  animation-delay: calc(var(--row-index) * 0.4s);
}

@keyframes generate-check {
  0%,
  20% {
    opacity: 0;
    transform: translate(-50%, -60%) rotate(45deg) scale(0);
  }
  28%,
  82% {
    opacity: 1;
    transform: translate(-50%, -60%) rotate(45deg) scale(1);
  }
  94%,
  100% {
    opacity: 0;
    transform: translate(-50%, -60%) rotate(45deg) scale(1);
  }
}

.generate-loading__bar {
  height: 0.625rem;
  border-radius: 9999px;
  background: rgb(255 255 255 / 0.4);
}

.generate-loading__status {
  margin-top: 1.125rem;
  font-size: 0.75rem;
  color: rgb(237 233 254 / 0.8);
  min-height: 1rem;
}

.generate-loading__status--swap {
  animation: generate-status-swap 0.4s ease-out;
}

@keyframes generate-status-swap {
  0% {
    opacity: 0;
    transform: translateY(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .generate-loading__bird,
  .generate-loading__star,
  .generate-loading__status--swap {
    animation: none;
  }

  .generate-loading__row {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .generate-loading__check::after {
    animation: none;
    opacity: 1;
    transform: translate(-50%, -60%) rotate(45deg) scale(1);
  }
}

@media (prefers-color-scheme: dark) {
  .show-page-card {
    border-color: rgb(64 64 64);
    background: rgb(38 38 38);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.22);
  }

  .show-page-title {
    color: rgb(245 245 245);
  }

  .show-back-link {
    border-color: rgb(64 64 64);
    background: rgb(23 23 23);
    color: rgb(245 245 245);
    box-shadow: 0 0.55rem 1.5rem rgb(0 0 0 / 0.28);
  }

  .show-back-link:hover {
    border-color: rgb(82 82 82);
    background: rgb(38 38 38);
    color: rgb(255 255 255);
  }

  .show-page-action-button {
    border-color: rgb(64 64 64);
    background: rgb(23 23 23);
    color: rgb(212 212 216);
    box-shadow: 0 0.55rem 1.5rem rgb(0 0 0 / 0.28);
  }

  .show-page-action-button:hover {
    border-color: rgb(82 82 82);
    background: rgb(38 38 38);
    color: rgb(255 255 255);
  }

  .show-page-action-pill {
    border-color: rgb(64 64 64);
    background: rgb(23 23 23);
    box-shadow: 0 0.55rem 1.5rem rgb(0 0 0 / 0.28);
  }

  .show-page-action-pill__segment {
    color: rgb(115 115 115);
  }

  .show-page-action-pill__segment + .show-page-action-pill__segment {
    border-left-color: rgb(64 64 64);
  }

  .show-page-action-pill__segment:hover {
    background: rgb(38 38 38);
    color: rgb(255 255 255);
  }

  .index-page {
    background: rgb(23 23 23);
    color: rgb(229 229 229);
  }

  .index-page-header__title {
    color: rgb(245 245 245);
  }

  .index-page-header__separator {
    color: rgb(115 115 115);
  }

  .index-page-header__context {
    color: rgb(212 212 212);
  }

  .index-page__sidebar {
    background: rgb(23 23 23);
  }

  .navigation-menu {
    background: rgb(23 23 23);
  }

  .navigation-menu__trigger,
  .navigation-menu__avatar {
    color: rgb(245 245 245);
  }

  .navigation-menu__trigger:hover,
  .navigation-menu__trigger[aria-expanded="true"] {
    background: rgb(54 54 54);
  }

  .navigation-menu__avatar {
    border-color: rgb(82 82 82);
    background: rgb(23 23 23);
    color: rgb(245 245 245);
  }

  .navigation-menu__panel {
    border-color: rgb(239 65 53);
    background: rgb(38 38 38);
    box-shadow:
      0 0 0 1px rgb(239 65 53 / 0.1),
      0 0.5rem 1.25rem rgb(0 0 0 / 0.22),
      0 1.25rem 2.5rem rgb(0 0 0 / 0.3);
  }

  .navigation-menu__title,
  .navigation-menu__section-title,
  .navigation-menu__row {
    color: rgb(245 245 245);
  }

  .navigation-menu__close {
    color: rgb(212 212 212);
  }

  .navigation-menu__close:hover,
  .navigation-menu__row:hover,
  .navigation-menu__tile:hover {
    background: rgb(54 54 54);
  }

  .navigation-menu__tile {
    background: rgb(54 54 54);
    color: rgb(245 245 245);
  }

  .navigation-menu__tile--current {
    background: rgb(127 29 29);
    color: rgb(254 226 226);
  }

  .navigation-menu__row--current,
  .navigation-menu__check {
    color: rgb(248 113 113);
  }

  .folder-nav-icon {
    color: rgb(212 212 212);
  }

  .folder-count-badge {
    background: rgb(64 64 64);
    color: rgb(212 212 212);
  }
}