/*
 * 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.
 */

/* Responsive Sidebar Styles */
@media (max-width: 768px) {
  /* Ensure sidebar is properly positioned on mobile */
  .sidebar-mobile {
    position: fixed;
    z-index: 50;
  }

  /* Optional: Add backdrop for overlay behavior on mobile if needed */
  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 40;
  }
}

/* Smooth transitions for all sidebar-related elements */
.sidebar-transition {
  transition: width 0.3s ease-in-out, padding 0.3s ease-in-out;
}

/* Ensure main content transitions smoothly when the sidebar is toggled.
   Gated on .sidebar-animated, which sidebar_controller adds only after it has
   applied its initial state. Unconditionally, this also animated the very first
   pl-16 -> pl-72 change on page load: the sidebar is server-rendered collapsed
   and JS expands it on connect, so every load slid the whole content area 212px
   to the right over 300ms -- a visible lurch, and a moving click target for
   anything (system tests included) interacting during that window. */
.main-content.sidebar-animated {
  transition: padding-left 0.3s ease-in-out;
}

.content-display {
  h1 {
    font-size: 2rem;
    font-weight: 600;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  h2 {
    font-size: 1.5rem;
    font-weight: 600;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  h3 {
    font-size: 1rem;
    font-weight: 600;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  h4 {
    font-size: 0.875rem;
    font-weight: 600;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  h5 {
    font-size: 0.75rem;
    font-weight: 600;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  h6 {
    font-size: 0.625rem;
    font-weight: 600;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  p {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  ul {
    padding-top: 5px;
    padding-bottom: 5px;
  }

  li {
    padding-bottom: 5px;
  }

  pre {
    text-wrap: auto;
  }

  code {
    text-wrap: auto;
  }
}

.markdown-ul {
  list-style: disc;
}

.markdown-ol {
  list-style: decimal;
}

ul.markdown-list, ol.markdown-list {
  margin: 0;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 1.5rem;
}

.markdown-list-item {
  margin: 0.5rem 0;
}

.markdown-paragraph {
  margin: 0;
  line-height: 1.6;
}

/* Code Block Styling */
.code-block-wrapper {
  margin: 1rem 0;
  border: 1px solid #e1e5e9;
  border-radius: 8px;
  overflow: hidden;
  background-color: #f6f8fa;
}

.code-block-header {
  background-color: #f1f3f4;
  border-bottom: 1px solid #e1e5e9;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  color: #656d76;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
}

.code-language {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.code-block-wrapper pre {
  margin: 0;
  padding: 1rem;
  background-color: #f6f8fa;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.875rem;
  line-height: 1.5;
}

.code-block-fallback {
  background-color: #f6f8fa;
  border: 1px solid #e1e5e9;
  border-radius: 6px;
  padding: 1rem;
  margin: 1rem 0;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Rouge Syntax Highlighting Styles */
.highlight table td { padding: 5px; }
.highlight table pre { margin: 0; }
.highlight, .highlight .w {
  color: #24292f;
  background-color: #f6f8fa;
}
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt, .highlight .kv {
  color: #cf222e;
}
.highlight .gr {
  color: #f6f8fa;
}
.highlight .gd {
  color: #82071e;
  background-color: #ffebe9;
}
.highlight .nb {
  color: #953800;
}
.highlight .nc {
  color: #953800;
}
.highlight .no {
  color: #953800;
}
.highlight .nn {
  color: #953800;
}
.highlight .sr {
  color: #116329;
}
.highlight .na {
  color: #116329;
}
.highlight .nt {
  color: #116329;
}
.highlight .gi {
  color: #116329;
  background-color: #dafbe1;
}
.highlight .ges {
  font-weight: bold;
  font-style: italic;
}
.highlight .kc {
  color: #0550ae;
}
.highlight .l, .highlight .ld, .highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx {
  color: #0550ae;
}
.highlight .sb {
  color: #0550ae;
}
.highlight .bp {
  color: #0550ae;
}
.highlight .ne {
  color: #0550ae;
}
.highlight .nl {
  color: #0550ae;
}
.highlight .py {
  color: #0550ae;
}
.highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi, .highlight .vm {
  color: #0550ae;
}
.highlight .o, .highlight .ow {
  color: #0550ae;
}
.highlight .gh {
  color: #0550ae;
  font-weight: bold;
}
.highlight .gu {
  color: #0550ae;
  font-weight: bold;
}
.highlight .s, .highlight .sa, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .se, .highlight .sh, .highlight .sx, .highlight .s1, .highlight .ss {
  color: #0a3069;
}
.highlight .nd {
  color: #8250df;
}
.highlight .nf, .highlight .fm {
  color: #8250df;
}
.highlight .err {
  color: #f6f8fa;
  background-color: #82071e;
}
.highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cp, .highlight .cpf, .highlight .c1, .highlight .cs {
  color: #6e7781;
}
.highlight .gl {
  color: #6e7781;
}
.highlight .gt {
  color: #6e7781;
}
.highlight .ni {
  color: #24292f;
}
.highlight .si {
  color: #24292f;
}
.highlight .ge {
  color: #24292f;
  font-style: italic;
}
.highlight .gs {
  color: #24292f;
  font-weight: bold;
}
/* Featured Swizzel Card Title */
.featured-card-title {
  line-height: 1.5;
  font-weight: 400;
  font-size: 1.1875rem;
  color: #ffffff;
  margin: 0;
  padding: 0;
  text-align: left;
}

/* Soft Blink Animation for Validation Feedback */
@keyframes soft-blink {
  0%, 100% {
    background-color: transparent;
  }
  50% {
    background-color: rgba(96, 165, 250, 0.15);
  }
}

.soft-blink {
  animation: soft-blink 0.5s ease-in-out 3;
  border-radius: 0.75rem;
}

.reading-progress-ring {
  transition: stroke-dashoffset 0.4s ease;
}

.reading-progress-bar-enter {
  animation: readingProgressBarSlideUp 0.3s ease-out;
}

@keyframes readingProgressBarSlideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.note-item {
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: bold;
  }

  ol {
    list-style-type: decimal;
  }

  ul {
    list-style-type: disc;
  }

  ol, ul, menu {
    margin-inline-start: 1.5rem;
    padding: 0;
  }
}

mark.swizzel-highlight {
  border-radius: 0.2rem;
  cursor: pointer;
  padding: 0.05rem 0;
  transition: background-color 0.18s ease, box-shadow 0.18s ease, text-decoration-thickness 0.18s ease;
}

mark.swizzel-highlight[data-highlight-color="blue"] {
  background-color: rgba(59, 130, 246, 0.15);
}

mark.swizzel-highlight[data-highlight-color="yellow"] {
  background-color: rgba(234, 179, 8, 0.18);
}

mark.swizzel-highlight[data-highlight-color="green"] {
  background-color: rgba(16, 185, 129, 0.16);
}

mark.swizzel-highlight[data-highlight-color="red"] {
  background-color: rgba(239, 68, 68, 0.14);
}

mark.swizzel-highlight[data-highlight-color="purple"] {
  background-color: rgba(168, 85, 247, 0.15);
}

/* The reader's own warm grey (stone), not Tailwind's cooler gray. */
mark.swizzel-highlight[data-highlight-color="grey"] {
  background-color: rgba(120, 113, 108, 0.16);
}

/* Underline swaps the fill for a line in the same color, so these rules follow
   the fills above and override them on source order. The explicit transparent
   background also keeps the browser's default yellow <mark> fill from showing
   through. Line colors are a shade darker than the fills, which are tints. */
mark.swizzel-highlight[data-highlight-underlined="true"] {
  background-color: transparent;
  text-decoration-line: underline;
  text-decoration-thickness: max(1.5px, 0.09em);
  text-underline-offset: 0.2em;
}

mark.swizzel-highlight[data-highlight-underlined="true"][data-highlight-color="blue"] {
  text-decoration-color: #2563eb;
}

mark.swizzel-highlight[data-highlight-underlined="true"][data-highlight-color="yellow"] {
  text-decoration-color: #ca8a04;
}

mark.swizzel-highlight[data-highlight-underlined="true"][data-highlight-color="green"] {
  text-decoration-color: #059669;
}

mark.swizzel-highlight[data-highlight-underlined="true"][data-highlight-color="red"] {
  text-decoration-color: #dc2626;
}

mark.swizzel-highlight[data-highlight-underlined="true"][data-highlight-color="purple"] {
  text-decoration-color: #9333ea;
}

mark.swizzel-highlight[data-highlight-underlined="true"][data-highlight-color="grey"] {
  text-decoration-color: #57534d;
}

mark.swizzel-highlight.highlight-emphasized {
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.18);
}

mark.swizzel-highlight.highlight-emphasized[data-highlight-color="blue"] {
  background-color: rgba(59, 130, 246, 0.24);
}

mark.swizzel-highlight.highlight-emphasized[data-highlight-color="yellow"] {
  background-color: rgba(234, 179, 8, 0.28);
}

mark.swizzel-highlight.highlight-emphasized[data-highlight-color="green"] {
  background-color: rgba(16, 185, 129, 0.24);
}

mark.swizzel-highlight.highlight-emphasized[data-highlight-color="red"] {
  background-color: rgba(239, 68, 68, 0.22);
}

mark.swizzel-highlight.highlight-emphasized[data-highlight-color="purple"] {
  background-color: rgba(168, 85, 247, 0.24);
}

mark.swizzel-highlight.highlight-emphasized[data-highlight-color="grey"] {
  background-color: rgba(120, 113, 108, 0.26);
}

/* The generic inset outline would box the underlined text, and the per-color
   rules above would fill it, so emphasize with a heavier line and a faint
   neutral tint instead. */
mark.swizzel-highlight.highlight-emphasized[data-highlight-underlined="true"] {
  background-color: rgba(15, 23, 42, 0.05);
  box-shadow: none;
  text-decoration-thickness: max(2px, 0.14em);
}