@import url('/blog/reading.20260922-covers.css');

/* Quotes and reusable prompts are visually distinct throughout the journal. */
.journal-public .prose blockquote{
  position:relative;
  border-left:4px solid var(--accent);
  background:#f0efe6;
  padding:48px 28px 24px 30px;
}
.journal-public .prose blockquote::before{
  content:'Цитата';
  position:absolute;
  top:18px;
  left:30px;
  color:var(--muted);
  font-size:.6875rem;
  font-weight:800;
  line-height:1;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.journal-public .prose blockquote.prompt-block{
  overflow:hidden;
  border:1px solid #d4d5ca;
  border-left:4px solid var(--accent);
  border-radius:10px;
  padding:0;
  background:var(--surface);
}
.journal-public .prose blockquote.prompt-block::before{content:none}
.journal-public .prose .prompt-block__body{padding:22px 24px 24px}
.journal-public .prose .prompt-block__body p:last-child{margin:0}
.journal-public .prose .content-block{
  margin:1.8em 0;
  overflow:hidden;
  border:1px solid #d4d5ca;
  border-radius:10px;
  background:var(--surface);
}
.journal-public .prose .content-block__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:48px;
  padding:7px 9px 7px 18px;
  border-bottom:1px solid #d4d5ca;
  background:#e8e8de;
}
.journal-public .prose .content-block__label{
  color:#51554d;
  font-size:.6875rem;
  font-weight:800;
  line-height:1.3;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.journal-public .prose .content-block pre{
  margin:0;
  padding:22px 24px 24px;
  border:0;
  border-radius:0;
  background:var(--surface);
}
.journal-public .prose .content-block .copy-code,.journal-public .prose .prompt-block .copy-code{
  flex:0 0 auto;
  min-height:36px;
  margin:0;
  border:1px solid #c3c5b9;
  border-radius:6px;
  background:var(--paper);
  color:var(--ink);
  font-family:Manrope,Arial,sans-serif;
  font-size:.75rem;
  font-weight:700;
  line-height:1;
  padding:10px 13px;
}
.journal-public .prose .content-block .copy-code:hover,.journal-public .prose .prompt-block .copy-code:hover{background:var(--accent);border-color:var(--accent)}
.journal-public .prose .content-block .copy-code:active,.journal-public .prose .prompt-block .copy-code:active{transform:translateY(1px)}

@media(max-width:600px){
  .journal-public .prose blockquote{padding:46px 20px 20px 22px}
  .journal-public .prose blockquote::before{left:22px}
  .journal-public .prose .content-block__header{padding-left:14px}
  .journal-public .prose .content-block pre{padding:18px}
  .journal-public .prose .prompt-block__body{padding:18px}
  .journal-public .prose .content-block .copy-code,.journal-public .prose .prompt-block .copy-code{min-height:38px}
}

@media print{
  .journal-public .prose .content-block{break-inside:avoid}
  .journal-public .prose .content-block__header{padding:6px 0;background:white;border-bottom:1px solid #bbb}
}