/* Neo-brutalist skin for the public content pages (/yield, /quiz).
   The vocabulary is NOT invented here - it is the one the brutalist landing template already
   ships (app/views/landings/templates/brutalist.html.erb): 2px black borders, hard offset
   shadows, mono uppercase labels, flat yellow/lime blocks. The views use Tailwind utilities
   for that, exactly like the landing does; this file only holds what a utility can't express:
   the press interaction, and the overrides that square off prose.css and the quiz choices.

   Everything is scoped under `.bt` (set on the page wrapper) so the signed-in app, the admin
   and the other landing templates are untouched. Loaded AFTER prose.css so it wins. */

/* ---- Press interaction ---- */
/* Mirrors the landing CTA: the element slides into its own shadow instead of lifting. */
.bt-press {
  transition: transform .12s ease, box-shadow .12s ease;
}
@media (hover: hover) {
  .bt-press:hover {
    transform: translate(3px, 3px);
    box-shadow: 3px 3px 0 0 #000 !important;
  }
  .bt-press-sm:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 0 #000 !important;
  }
}
.bt-press:active {
  transform: translate(4px, 4px);
  box-shadow: 2px 2px 0 0 #000 !important;
}
@media (prefers-reduced-motion: reduce) {
  .bt-press { transition: none; }
}

/* ---- Generated card cover ---- */
/* The index cards show the entry's own first code block instead of an image nobody has
   produced yet. Clamped so a long snippet can't stretch the grid row. */
.bt-cover {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: .8125rem;
  line-height: 1.5;
  color: #24292f;
  margin: 0;
}

/* ---- Inline code outside prose ---- */
/* Entry titles are Markdown too ("`Float(nil)` refuses what `nil.to_f` forgives") and render
   through QuizAnswer#title_html, so their <code> spans land in headings and card titles where
   the .prose rules don't reach. The more specific `.bt .prose code` above still wins inside
   article bodies. */
.bt code {
  background: #f6f8fa;
  border: 1px solid #d0d7de;
  padding: 0 .18em;
  font-size: .92em;
}

/* ---- prose.css, squared off ---- */
/* Rouge's colours are deliberately left alone - only the containers change. */
.bt .prose pre {
  border: 2px solid #000;
  border-radius: 0;
}
.bt .prose code {
  border-radius: 0;
  border: 1px solid #d0d7de;
}
.bt .prose pre code { border: 0; }
.bt .prose a {
  color: #000;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.bt .prose a:hover { background: #fde047; color: #000; }
.bt .prose blockquote {
  border-left: 6px solid #000;
  color: #374151;
  font-style: normal;
}
.bt .prose img { border: 2px solid #000; border-radius: 0; }
.bt .prose th, .bt .prose td { border-color: #000; }
.bt .prose th { background: #fde047; }
.bt .prose hr { border-top: 4px solid #000; }

/* ---- Quiz choices ---- */
/* Class names are the ones the request specs assert (quiz-choice, --correct, --wrong); only
   the styling changes. The correct row is filled AND shadowed, so it never relies on colour
   alone to be spotted. */
.bt .quiz-choice {
  border: 2px solid #000;
  border-radius: 0;
  background: #fff;
  padding: .875rem 1rem;
  gap: 1rem;
}
.bt .quiz-choice--correct {
  background: #bef264;
  border-color: #000;
  border-left-width: 2px;
  box-shadow: 5px 5px 0 0 #000;
  font-weight: 700;
}
.bt .quiz-choice--wrong {
  opacity: 1;
  color: #000;
}
.bt .quiz-choice code {
  border-radius: 0;
  border: 1px solid #d0d7de;
  background: #f6f8fa;
}

/* ---- Comment bodies ---- */
/* Comments render Markdown (CommentMarkdown), so they reuse `.prose` to inherit the Rouge code
   colours defined once in prose.css. `.comment-md` then pulls the scale back to comment size -
   an article's 2.25rem heading margins inside a three-line reply look absurd - and clamps what a
   heading can be: CommentMarkdown already demotes h1 to h4, and this makes sure even that cannot
   shout louder than the nickname above it.
   Not scoped under `.bt`, so the rules hold anywhere a rendered body is shown. The admin
   moderation queue deliberately shows the RAW source instead (escaped, `whitespace-pre-line`):
   a moderator needs to see what was actually typed, not the tidied-up rendering of it. */
.comment-md {
  margin-top: .5rem;
  font-size: .875rem;
  line-height: 1.65;
}
.comment-md > :first-child { margin-top: 0; }
.comment-md > :last-child { margin-bottom: 0; }
.comment-md p { margin: .6rem 0; }
.comment-md h4, .comment-md h5, .comment-md h6 {
  margin: 1rem 0 .35rem;
  font-size: .9375rem;
  font-weight: 700;
  color: #111827;
}
.comment-md ul, .comment-md ol { margin: .6rem 0; padding-left: 1.35rem; }
.comment-md li { margin: .2rem 0; }
.comment-md pre {
  margin: .75rem 0;
  padding: .75rem;
  font-size: .8125rem;
  border: 2px solid #000;
  border-radius: 0;
}
.comment-md code {
  font-size: .875em;
  border-radius: 0;
  border: 1px solid #d0d7de;
  background: #f6f8fa;
}
.comment-md pre code { border: 0; background: none; }
.comment-md blockquote {
  margin: .75rem 0;
  padding-left: .75rem;
  border-left: 4px solid #000;
  font-style: normal;
  color: #6b7280;
}
.comment-md table { margin: .75rem 0; font-size: .8125rem; }
.comment-md th, .comment-md td { border-color: #000; }
.comment-md th { background: #fde047; }
.comment-md hr { margin: .9rem 0; border-top: 2px solid #000; }
/* Reader-supplied links: visibly links, and visibly not ours. */
.comment-md a { color: #000; text-decoration-thickness: 2px; text-underline-offset: 2px; }
.comment-md a:hover { background: #fde047; }

/* ---- Filter bar ---- */
/* Horizontal scroll on phones without a visible scrollbar eating the 44px hit targets. */
.bt-scroller {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.bt-scroller::-webkit-scrollbar { display: none; }