/* ============================================================
   Site
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

.lucide {
  stroke-width: 2;
}

.lucide * {
  vector-effect: non-scaling-stroke;
}

.dragging {
  background-color: var(--theme-primary);
}

.app-shell {
  display: flex;
  min-height: 100dvh;
  align-items: flex-start;
}

@media not (max-width: 50rem) {
  .app-shell>neo-sidebar:not(:state(overlay)) {
    position: sticky;
    top: 0;
    height: 100dvh;
    max-height: 100dvh;
  }
}

.app-shell-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100dvh;
}

.app-bar {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem;
  border-bottom: 1px solid var(--btn-border);
  background: var(--page-bg);
}

.app-menu {
	width: 100%;
}

.main-viewport {
	flex: 1 1 auto;
  position: relative;
	padding: 1rem;
	overflow-y: auto;
}

.icon-current-color-crimson {
	color: crimson;
	font-size: 1.5rem;
}

.icon-sizes-4 {
	--neo-icon-size: 4rem;
}

table {
  border-spacing: 0;
}

th {
  text-align: start;
  border-block-end: var(--border-width-2) solid var(--btn-border);
}

th, td {
  padding: var(--size--1);
}

tbody > tr:nth-of-type(even) {
  background-color: var(--neo-button-bg);
}

fieldset {
  border-radius: var(--page-radius);
}

.post-header {
  border-block-end: 1px solid var(--btn-border);
  padding-inline: var(--neo-card-padding);
  padding-block-start: var(--neo-card-padding);
  padding-block-end: calc(var(--neo-card-padding) * 0.5);
}

.post-content {
  white-space: pre-line;
}

dialog {
  border: 1px solid var(--btn-border);
  border-radius: var(--page-radius);
  background: var(--page-bg);
}

.citation {
  border: 1px solid var(--btn-border);
  border-radius: var(--page-radius);
  background: var(--citation-bg);

  > * {
    padding-inline: calc(var(--neo-card-padding) * 0.5);
    padding-block-start: calc(var(--neo-card-padding) * 0.5);
    padding-block-end: calc(var(--neo-card-padding) * 0.25);
  }
}

p {
  margin-block: var(--size-1);
}

.auth-container {
	height: 100dvh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-inline: var(--size-5);
}

/* ============================================================
   Animations
   ============================================================ */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.animate.spin {
  transform-origin: center;
  animation-duration: var(--anim-duration-rotate);
  animation-name: spin;
  animation-iteration-count: infinite;
  animation-timing-function: var(--anim-ease-standard);
}

@keyframes pop {
  50% {
    transform: scale(var(--anim-scale-up-strong));
  }
}

.animate.pop {
  animation-duration: var(--anim-duration-slow);
  animation-name: pop;
  animation-timing-function: var(--anim-ease-standard);
}

/* ============================================================
   Morpheus
   ============================================================ */
a[data-neo-link]:where(:not([data-neo-link=false])).app-nav-link {
  justify-content: flex-start;
  padding-inline: var(--size--2);
}

.radio-pg-density {
	gap: 0.875rem 1.5rem;
}

.radio-pg-row {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
}

.squire-editor {
	border: 1px solid var(--btn-border);
	border-radius: var(--page-radius, 0.5rem);
  min-height: 5rem;
  padding: var(--size-0);
  background-color: var(--neo-button-bg);
  color: var(--neo-button-fg);
}

/* ============================================================
   Utilities
   ============================================================ */
.icon-sizes-1-5 {
  --neo-icon-size: 1.5rem;
}

.popover-nav {
  --neo-popover-padding: 0.25rem;
}

.popover-autoflip-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	width: 100%;
}

.popover-autoflip-list li {
	padding: 0.35rem 0.5rem;
	border-radius: 0.35rem;
}

.popover-autoflip-list li:hover {
	background: color-mix(in srgb, var(--accent) 16%, transparent);
}