/* =========================================================================
   Design tokens
   -------------------------------------------------------------------------
   Colors are consumed by Tailwind (see tailwind.config in base.html) through
   these CSS variables, so switching themes is a one-liner: add/remove .dark.
   ========================================================================= */
:root {
  --canvas: #F8F6F2;
  --surface: #FCFBF9;
  --raised: #FFFFFF;
  --line: #E8E5E0;
  --line-strong: #D9D4CC;
  --ink: #2E2C2A;
  --ink-muted: #7C7873;
  --paper: #FFFFFF;        /* document / reading surface */
  --paper-ink: #52525B;    /* soft reading text */
  --paper-strong: #18181B; /* headings & emphasis */
  --paper-line: #E4E4E7;   /* rules, code & table borders on paper */
  --brand: #FF6B5A;
  --brand-ink: #FFFFFF;
  --success: #768E64;
  --warning: #D1A054;
  --danger: #C6685B;
}

.dark {
  --canvas: #262833;
  --surface: #2F3140;
  --raised: #2A2C38;
  --line: #404358;
  --line-strong: #4D5064;
  --ink: #E9EAF0;
  --ink-muted: #9598AD;
  --paper: #26262B;        /* neutral dark paper */
  --paper-ink: #B9B9C0;    /* soft reading text */
  --paper-strong: #F4F4F5; /* headings & emphasis */
  --paper-line: #3A3A40;   /* rules, code & table borders on paper */
  --brand: #1a6351;
  --brand-ink: #e3e3e3;
  --success: #6F9B7A;
  --warning: #D0A15C;
  --danger: #C97972;
}

/* =========================================================================
   Base
   ========================================================================= */
html {
  scroll-behavior: smooth;
}

body {
  font-family: "Outfit", sans-serif;
}

input:focus,
textarea:focus,
select:focus,
button:focus {
  outline: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.bookfont   { font-family: "Literata", serif; }
.funfont    { font-family: "Caveat", cursive; }
.codefont   { font-family: "JetBrains Mono", monospace; }
.cursivefont{ font-family: "Petit Formal Script", cursive; }

/* =========================================================================
   Flash / toasts
   ========================================================================= */
.flash {
  transform: translateY(150%);
  animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards,
             slideDown 0.5s ease-in forwards;
  animation-delay: 0s, 8.5s;
}

@keyframes slideUp {
  to { transform: translateY(0); }
}
@keyframes slideDown {
  to { transform: translateY(150%); }
}

/* =========================================================================
   Drag engine
   ========================================================================= */
.dragarea {
  position: relative;
}

.dragable {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: grab;
}

.dragable.dragging {
  cursor: grabbing;
  opacity: 0.95;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.22), 0 2px 6px rgba(15, 23, 42, 0.12);
}

.dragable.drag-disabled,
.dragable[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
}

.drag-placeholder {
  box-sizing: border-box;
  border-radius: 10px;
  background: rgba(255, 107, 90, 0.08);
  border: 2px dashed rgba(255, 107, 90, 0.45);
}

body.dragengine-active {
  cursor: grabbing;
  -webkit-user-select: none;
  user-select: none;
}

/* =========================================================================
   Dropdown engine
   ========================================================================= */
dropdown {
  display: none;
  position: fixed;
  z-index: 9999 !important;
  min-width: 12rem;
  max-width: calc(100vw - 2rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  padding: 0.25rem 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px) scale(0.95);
  transition: opacity 150ms ease-out, transform 150ms ease-out;
  pointer-events: none;
}

dropdown.dropdown-open {
  display: block !important;
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

dropdown a,
dropdown button {
  display: block;
  width: 100%;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--ink);
  text-decoration: none;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background-color 100ms;
  white-space: nowrap;
}

dropdown a:hover,
dropdown button:hover {
  background-color: var(--line);
}

dropdown hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 0.25rem 0;
}

dropdown > div {
  padding: 0.5rem 1rem;
}

dropdown .text-muted,
dropdown small {
  color: var(--ink-muted);
  font-size: 0.75rem;
  line-height: 1rem;
  padding: 0.25rem 1rem;
  display: block;
}

/* =========================================================================
   Markdown (rendered by marked.js in the admin guide)
   ========================================================================= */
.markdown {
  color: var(--ink);
  font-size: 0.875rem;
  line-height: 1.7;
}
.markdown h1,
.markdown h2,
.markdown h3 {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.markdown h1 { font-size: 1.5rem; margin: 1.5rem 0 0.75rem; }
.markdown h2 { font-size: 1.2rem; margin: 1.5rem 0 0.5rem; }
.markdown h3 { font-size: 1rem; margin: 1.25rem 0 0.5rem; }
.markdown p { margin: 0.5rem 0; color: var(--ink-muted); }
.markdown ul,
.markdown ol { margin: 0.5rem 0 0.75rem; padding-left: 1.25rem; color: var(--ink-muted); }
.markdown li { margin: 0.25rem 0; }
.markdown code {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.75rem;
  background: var(--line);
  color: var(--ink);
  padding: 0.1rem 0.35rem;
  border-radius: 0.375rem;
}
.markdown pre {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  overflow-x: auto;
  margin: 0.75rem 0;
}
.markdown pre code {
  background: transparent;
  padding: 0;
  color: var(--ink);
}
.markdown a { color: var(--brand); text-decoration: none; }
.markdown a:hover { text-decoration: underline; }
.markdown table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.75rem 0;
  font-size: 0.8125rem;
}
.markdown th,
.markdown td {
  text-align: left;
  border-bottom: 1px solid var(--line);
  padding: 0.5rem 0.75rem;
}
.markdown th { color: var(--ink); font-weight: 600; }
.markdown td { color: var(--ink-muted); }

/* =========================================================================
   Documents (book-like paper surface)
   ========================================================================= */
.document-paper {
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.markdown-document {
  font-family: "Source Serif 4", "Literata", Georgia, serif;
  font-size: 0.8125rem;
  line-height: 1.85;
  color: var(--paper-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.markdown-document > :first-child { margin-top: 0; }
.markdown-document > :last-child { margin-bottom: 0; }
.markdown-document h1,
.markdown-document h2,
.markdown-document h3 {
  font-family: "Source Serif 4", "Literata", Georgia, serif;
  color: var(--paper-strong);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.markdown-document h1 { font-size: 1.25rem; margin: 2rem 0 0.75rem; }
.markdown-document h2 { font-size: 1.0625rem; margin: 1.75rem 0 0.6rem; }
.markdown-document h3 { font-size: 0.9375rem; margin: 1.5rem 0 0.5rem; }
.markdown-document p { color: var(--paper-ink); margin: 0.85rem 0; }
.markdown-document ul,
.markdown-document ol { color: var(--paper-ink); margin: 0.85rem 0 1rem; padding-left: 1.5rem; }
.markdown-document li { margin: 0.35rem 0; }
.markdown-document li::marker { color: var(--paper-strong); }
.markdown-document strong { color: var(--paper-strong); font-weight: 600; }
.markdown-document blockquote {
  margin: 1rem 0;
  padding: 0.1rem 0 0.1rem 1rem;
  border-left: 2px solid var(--paper-line);
  color: var(--paper-ink);
  font-style: italic;
}
.markdown-document code {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  background: rgba(24, 24, 27, 0.06);
  background: color-mix(in srgb, var(--paper-ink) 10%, transparent);
  color: var(--paper-strong);
  padding: 0.1rem 0.35rem;
  border-radius: 0.375rem;
}
.markdown-document pre {
  background: rgba(24, 24, 27, 0.04);
  background: color-mix(in srgb, var(--paper-ink) 7%, transparent);
  border: 1px solid var(--paper-line);
  border-radius: 0.5rem;
  padding: 0.9rem 1rem;
  overflow-x: auto;
  margin: 1rem 0;
}
.markdown-document pre code {
  background: transparent;
  padding: 0;
  color: var(--paper-ink);
}
.markdown-document a {
  color: var(--brand);
  text-decoration: none;
}
.markdown-document a:hover { text-decoration: underline; text-underline-offset: 2px; }
.markdown-document hr {
  border: none;
  border-top: 1px solid var(--paper-line);
  margin: 2rem 0;
}
.markdown-document table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.8125rem;
}
.markdown-document th,
.markdown-document td {
  text-align: left;
  border-bottom: 1px solid var(--paper-line);
  padding: 0.5rem 0.6rem;
  color: var(--paper-ink);
}
.markdown-document th { color: var(--paper-strong); font-weight: 600; }
.markdown-document img { border-radius: 0.5rem; }

/* =========================================================================
   Admin nav animated highlighter
   ========================================================================= */
.admin-nav-highlight {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  border-radius: 0.6rem;
  background: var(--raised);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
              width 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* =========================================================================
   Motion helpers
   ========================================================================= */
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.animate-in { animation: fadeSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; }