/* ===========================================================
   JOURNAL (docs/specs/journal.md §7): список, редакції, сторінка статті
   =========================================================== */

/* ---------- Спільні елементи ---------- */
.jr-chip{
  display:inline-block; padding:.2rem .65rem; border-radius:999px;
  border:1px solid var(--line); color:var(--muted); text-decoration:none;
  font-family:var(--font-sans); font-size:.78rem; line-height:1.4;
}
.jr-chip:hover{ color:var(--parchment); border-color:var(--purple); }
.jr-chip.active{ background:rgba(167,107,255,.14); border-color:var(--purple); color:var(--parchment); }
.jr-desks{ display:flex; flex-wrap:wrap; gap:.5rem; }
.jr-lang{ font-family:var(--font-mono); font-size:.7rem; border:1px solid var(--line); border-radius:4px; padding:0 .3rem; }

.jr-list{ display:grid; gap:1rem; }
.jr-card{
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:1rem 1.15rem;
}
.jr-card-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; color:var(--muted); font-size:.8rem; margin-bottom:.4rem; }
.jr-card-title{ font-size:1.25rem; line-height:1.3; margin:0 0 .35rem; }
.jr-card-title a{ color:var(--parchment); text-decoration:none; }
.jr-card-title a:hover{ text-decoration:underline; }
.jr-card-dek{ color:var(--muted); margin:0; font-size:.98rem; line-height:1.55; }

.jr-pager{ display:flex; align-items:center; justify-content:space-between; margin-top:1.5rem; }
.jr-desk-about p{ max-width:68ch; }

/* ---------- Сторінка статті: сітка «текст + панель» ----------
   Кожен блок — окремий елемент сітки, тож на мобільному порядок інший, ніж на
   десктопі (макет M2): текст → реакції → панель (реклама) → обговорення → далі.
   Реклама не ховається через display:none — лише переставляється order. */
.jr-grid{
  display:grid; gap:0;
  grid-template-columns:minmax(0,1fr);
}
.jr-grid > *{ min-width:0; }
.jr-main{ order:1; }
.jr-reactions{ order:2; }
.jr-aside{ order:3; display:flex; flex-direction:column; gap:1rem; margin-top:2rem; }
.jr-discussion{ order:4; }
.jr-readnext{ order:5; }

@media (min-width:992px){
  .jr-grid{ grid-template-columns:minmax(0,700px) 320px; column-gap:1.5rem; justify-content:center; align-items:start; }
  .jr-grid > *{ grid-column:1; }
  .jr-grid > .jr-aside{
    grid-column:2; grid-row:1 / span 6; margin-top:0;
    position:sticky; top:calc(var(--ml-header-h) + 1rem);
  }
}
body.zen .jr-aside{ display:none; }
@media (min-width:992px){
  body.zen .jr-grid{ grid-template-columns:minmax(0,700px); }
}

/* main.css має глобальне правило `header, footer {background:#222; padding}` — нейтралізуємо для наших header. */
.jr-header, .jr-comment-head{ background:transparent; color:inherit; padding:0; }
.jr-title{ font-family:var(--font-serif); font-weight:600; font-size:2.1rem; line-height:1.2; margin:0 0 .6rem; }
.jr-dek{ font-family:var(--font-serif); font-size:1.2rem; line-height:1.5; color:var(--muted); margin:0 0 .9rem; }
.jr-byline{ font-family:var(--font-sans); font-size:.85rem; color:var(--muted); margin:0 0 1.6rem; line-height:1.6; }
.jr-byline a{ color:var(--parchment); }
@media (max-width:575.98px){
  .jr-title{ font-size:1.65rem; }
  .jr-dek{ font-size:1.08rem; }
}

/* ---------- Текст статті ---------- */
.jr-prose{ font-family:var(--font-serif); font-size:var(--jr-font-size, 1.25rem); line-height:1.7; color:var(--parchment); }
.jr-prose p, .jr-prose li{ font-family:var(--font-serif); font-size:inherit; line-height:1.7; }
.jr-prose p{ margin:0 0 1.15em; }
.jr-prose h2{ font-size:1.55em; line-height:1.3; margin:1.9em 0 .6em; scroll-margin-top:calc(var(--ml-header-h) + 1rem); }
.jr-prose h3{ font-size:1.25em; line-height:1.35; margin:1.6em 0 .5em; scroll-margin-top:calc(var(--ml-header-h) + 1rem); }
.jr-prose ul, .jr-prose ol{ margin:0 0 1.15em; padding-left:1.4em; }
.jr-prose blockquote{ margin:1.4em 0; padding:.1em 1.1em; border-left:3px solid var(--purple); color:var(--muted); }
.jr-prose a{ color:var(--brass); text-underline-offset:.15em; }
.jr-prose table{ width:100%; border-collapse:collapse; margin:0 0 1.15em; font-size:.9em; }
.jr-prose th, .jr-prose td{ border:1px solid var(--line); padding:.4em .6em; text-align:left; }
.jr-prose code{ font-family:var(--font-mono); font-size:.88em; }
.jr-prose pre{ overflow-x:auto; padding:.8em 1em; background:var(--panel); border-radius:8px; }
@media (max-width:575.98px){
  .jr-prose{ font-size:var(--jr-font-size, 1.125rem); }
}

.jr-sources{ margin-top:2.2rem; padding-top:1.2rem; border-top:1px solid var(--line); font-family:var(--font-sans); font-size:.9rem; }
.jr-sources-title, .jr-section-title{ font-family:var(--font-serif); font-size:1.15rem; margin:0 0 .6rem; }
.jr-sources ol{ padding-left:1.2rem; }
.jr-sources li{ margin-bottom:.4rem; overflow-wrap:anywhere; }
.jr-readnext, .jr-reactions, .jr-discussion{ margin-top:2.2rem; }

/* ---------- Права панель ---------- */
.jr-toc, .jr-practise{
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:.9rem 1rem;
  font-family:var(--font-sans); font-size:.9rem;
}
.jr-aside-title{ font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:.5rem; }
.jr-toc ol{ margin:0; padding-left:1.1rem; }
.jr-toc li{ margin-bottom:.35rem; }
.jr-toc a{ color:var(--parchment); text-decoration:none; }
.jr-toc a:hover{ text-decoration:underline; }
.jr-practise-link{ color:var(--brass); text-decoration:none; font-weight:500; }
.jr-practise-link:hover{ text-decoration:underline; }

/* ---------- Прогрес читання ---------- */
.jr-progress{
  position:fixed; left:0; right:0; top:var(--ml-header-h); height:3px; z-index:1019;
  background:transparent; pointer-events:none;
}
.jr-progress-bar{
  height:100%; background:var(--brass);
  transform:scaleX(0); transform-origin:0 50%;
}

/* ---------- «Aa»: розмір шрифту ---------- */
.jr-fs-s{ --jr-font-size:1.075rem; }
.jr-fs-m{ --jr-font-size:1.25rem; }
.jr-fs-l{ --jr-font-size:1.45rem; }
@media (max-width:575.98px){
  .jr-fs-s{ --jr-font-size:1rem; }
  .jr-fs-m{ --jr-font-size:1.125rem; }
  .jr-fs-l{ --jr-font-size:1.3rem; }
}
.jr-fontsize{ display:flex; align-items:center; gap:.35rem; margin:-.8rem 0 1.4rem; font-family:var(--font-sans); }
.jr-fontsize-label{ color:var(--muted); font-size:.8rem; margin-right:.15rem; }
.jr-fs-btn{
  min-width:2rem; min-height:2rem; padding:0; border:1px solid var(--line); border-radius:8px;
  background:transparent; color:var(--muted); font-family:var(--font-serif); line-height:1;
}
.jr-fs-btn-s{ font-size:.8rem; }
.jr-fs-btn-m{ font-size:1rem; }
.jr-fs-btn-l{ font-size:1.25rem; }
.jr-fs-btn:hover{ color:var(--parchment); border-color:var(--purple); }
.jr-fs-btn.is-on{ color:var(--parchment); border-color:var(--purple); background:rgba(167,107,255,.14); }

/* ---------- Реакції ---------- */
.jr-reaction-form{ display:flex; flex-wrap:wrap; gap:.6rem; }
.jr-react{
  display:inline-flex; align-items:center; gap:.45rem; min-height:44px; padding:.45rem .95rem;
  border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--parchment);
  font-family:var(--font-sans); font-size:.9rem;
}
.jr-react:hover{ border-color:var(--purple); }
.jr-react.is-on{ background:rgba(167,107,255,.16); border-color:var(--purple); }

/* ---------- Реклама в панелі ---------- */
.jr-aside .ml-ad{ min-height:250px; }
@media (max-width:991.98px){
  /* На мобільному зміст і вправа живуть у плаваючій панелі; у потоці лишається реклама. */
  .jr-aside .jr-toc, .jr-aside .jr-practise{ display:none; }
  .jr-aside{ margin-top:0; }
  .jr-aside .ml-ad{ margin-top:2rem; }
}

/* ---------- Плаваюча панель (мобільний, M2) ---------- */
.jr-float{ display:none; }
@media (max-width:991.98px){
  .jr-float{
    display:flex; gap:.5rem; align-items:center; justify-content:center;
    position:fixed; left:0; right:0; bottom:0; z-index:1030;
    padding:.5rem .75rem calc(.5rem + env(safe-area-inset-bottom));
    background:var(--panel); border-top:1px solid var(--line);
  }
  .jr-grid{ padding-bottom:4.5rem; }
  body.zen .jr-float{ display:flex; }
}
.jr-float-btn{
  flex:0 1 auto; min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.4rem .9rem; border:1px solid var(--line); border-radius:999px; background:transparent;
  color:var(--parchment); text-decoration:none; font-family:var(--font-sans); font-size:.88rem; white-space:nowrap;
}
.jr-float-primary{ flex:1 1 auto; background:var(--brass); border-color:var(--brass); color:var(--ink); font-weight:500; }
.jr-offcanvas{ background:var(--panel); color:var(--parchment); max-height:70vh; }
.jr-toc-list{ padding-left:1.2rem; font-family:var(--font-sans); }
.jr-toc-list li{ margin-bottom:.6rem; }
.jr-toc-list a{ color:var(--parchment); text-decoration:none; }

/* ---------- Обговорення (§6.6) ---------- */
.jr-disc-summary{
  display:none; list-style:none; cursor:pointer; min-height:44px; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:999px; font-family:var(--font-sans); font-size:.92rem; color:var(--parchment);
}
.jr-disc-summary::-webkit-details-marker{ display:none; }
@media (max-width:991.98px){
  .jr-disc-summary{ display:flex; }
  .jr-disc-details[open] > .jr-disc-summary{ margin-bottom:1rem; }
}
.jr-notice{
  font-family:var(--font-sans); font-size:.9rem; padding:.6rem .9rem; border-radius:8px; margin-bottom:1rem;
  border:1px solid var(--line); background:var(--panel);
}
.jr-notice-success{ border-color:#3f8f5f; }
.jr-notice-warning, .jr-notice-danger{ border-color:#b8863b; }
.jr-thread{ display:grid; gap:1rem; margin-bottom:1.5rem; }
.jr-comment{ font-family:var(--font-sans); border-bottom:1px solid var(--line); padding-bottom:1rem; }
.jr-reply{ margin-left:1.25rem; padding-left:1rem; border-left:2px solid var(--line); border-bottom:0; }
.jr-comment-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem; font-size:.85rem; margin-bottom:.35rem; }
.jr-comment-author{ font-weight:600; color:var(--parchment); text-decoration:none; }
.jr-badge{ font-size:.72rem; border:1px solid var(--line); border-radius:999px; padding:0 .5rem; color:var(--muted); }
.jr-comment-body{ white-space:pre-wrap; overflow-wrap:anywhere; font-size:.98rem; line-height:1.6; }
.jr-comment-actions{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:.9rem; margin-top:.5rem; font-size:.82rem; }
.jr-reply summary{ cursor:pointer; color:var(--muted); list-style:none; }
.jr-reply summary::-webkit-details-marker{ display:none; }
.jr-reply[open] summary{ margin-bottom:.5rem; }
.jr-flag{ background:none; border:0; padding:0; color:var(--muted); font-size:.82rem; text-decoration:underline; text-underline-offset:.15em; }
.jr-flag:hover{ color:var(--parchment); }
.jr-comment-form textarea{ resize:vertical; min-height:6rem; }
.jr-comment-form-actions{ margin-top:.6rem; }
.jr-comment-form-compact{ min-width:min(100%, 28rem); }