/* Reports and comments: the боксы under an profile (reports tab, discussion
   tab) and, in time, the archives and the member page — the same blocks
   everywhere. A comment on its own is the full-size block; inside a report
   the thread shrinks and grays out. */

/*-------------------------------
		Comment box
-------------------------------*/

.comment-box {margin: 25px 0; padding: 0 10px 10px; background: var(--panel); border: 1px solid var(--border);}

.comment-box h2 {text-align: center;}

/* The note panel: invitations and notices between the blocks */

.note-panel {width: 350px; margin: 10px auto; padding: 10px; text-align: center;
	font-size: 14px; background: #090909; border: 1px solid var(--border); border-width: 1px 0;}

.note-panel .button-primary {font-size: 13px; margin: 15px;}

/*-------------------------------
		A report
-------------------------------*/

.report {border: 1px solid #3a3a3a; border-width: 1px 0; padding: 10px 15px; margin: 15px 10px 30px;}

.report > header {display: flex; justify-content: space-between; align-items: flex-start;
	margin-bottom: 5px; font-size: 14px;}

.report header a, .comment header a {color: var(--text-strong); text-decoration: none;}

.report header a:hover, .comment header a:hover {text-decoration: underline;}

.report header .author, .comment header .author {border-bottom: 1px solid #5f5f5f;}

.report > header .when {font-size: 11px;}

.report > p {margin: 0 3px;}

/* "Комментировать" opens the invitation panel without a script. */

.commenting {text-align: right;}

.commenting summary, a.commenting-link {display: inline-block; cursor: pointer; list-style: none;
	padding: 1px 7px 2px; color: var(--text); font-weight: bold; text-decoration: underline;}

a.commenting-link:hover {text-decoration: none;}

.commenting-row {text-align: right;}

.commenting summary::-webkit-details-marker {display: none;}

.commenting summary:hover {text-decoration: none;}

/*-------------------------------
		A comment
-------------------------------*/

.comment {border: 1px solid var(--border); border-width: 1px 0 0; padding: 10px 15px; margin: 0 10px;}

.comment header {display: flex; justify-content: space-between; align-items: flex-start;
	margin-bottom: 5px; font-size: 13px;}

.comment header .when {font-size: 11px;}

.comment p {padding: 0 3px;}

.comment p a {color: var(--text);}

/* The thread under a report: indented, smaller, dimmed */

.report .comments {margin: 5px 10px 0 100px;}

.report .comment {padding: 3px 5px; margin: 0;}

.report .comment header {font-size: 11px;}

.report .comment header .when {font-size: 10px;}

.report .comment p {font-size: 11px; color: #555;}

/*-------------------------------
		Member and owner extras
-------------------------------*/

/* The subscription strip above the reports */
.subscription {display: flex; justify-content: space-between; align-items: center; font-size: 11px;
	margin: 20px 10px; padding: 10px; background: var(--panel); border: 1px solid var(--border); border-width: 1px 0;}

.subscription span {color: var(--text-muted);}

/* Approval state and its control in an entry's corner (owner only). An entry
   nobody moderated yet shows the select right away — the original renders no
   button for it. */
.report > header .when, .comment header .when {text-align: right;}

.vip-manage summary {list-style: none;}

.vip-manage summary::-webkit-details-marker {display: none;}

.vip-manage summary.button {padding: 1px 7px 2px;}

.vip-manage form, .vip-set {margin-top: 3px;}

.vip-mark .good {color: #40a040;}

.vip-mark .bad {color: var(--accent-border);}

/* The profile's owner comments under a pen name, shown in gold */
.comment header a.owner, .comment header a .owner {color: #A49270;}

/* A member's rank next to their name */
.report header .rank, .comment header .rank {color: #777147;}

/* The member's comment form inside «Комментировать» */
.commenting .comment-form {margin-top: 5px; padding: 10px; text-align: center;
	background: var(--panel); border: 1px solid var(--border); border-width: 1px 0;}

.commenting .comment-form textarea {display: block; width: min(300px, 100%); box-sizing: border-box; margin: 5px auto;}

/* The approval line sits under the date, the control under it */
.vip-mark {display: block;}

@media only screen and (max-width: 620px) {
	.comment header .when {font-size: 12px;}
	.report .comment header, .report .comment header .when, .report .comment p {font-size: 12px;}
}

/*---------------------------------------------------------------
  Продакшн-состояния и починки
---------------------------------------------------------------*/


/* Шапка отчёта на телефоне: автор и время в столбик, а не в две колонки.
   Базовое правило держит flex «автор слева — время справа», и на
   реальных узких экранах дата зажимается в правую колонку и переносится с
   дефисами («2 Октя-бря»), а подчёркивание автора расползается на две
   строки; легаси спасает его виртуальный ~495px-холст, которого у настоящей
   responsive-страницы нет. В столбик: автор своей строкой с подчёркиванием
   по содержимому, время под ним без переносов. */
@media only screen and (max-width: 620px) {
  .report > header {flex-direction: column; gap: 2px;}
  .report > header .author {align-self: flex-start;}
  .report > header .when {text-align: left; hyphens: none;}
  .report > header .when br {display: none;}

  /* Горизонтальные отступы текста отчёта: на десктопе margin 10px +
     padding 15px + 3px у абзаца оправданы шириной колонки, на телефоне
     они съедают ~28px с каждой стороны сверх паддинга main — текст
     становится узким столбиком с переносами. Держим только паддинг main. */
  .report {margin: 15px 0 30px; padding: 10px 5px;}
  .report > p {margin: 0;}

  /* Вложенные комментарии: desktop-отступ 100px на ~340px экрана оставлял
     тексту меньше половины ширины. */
  .report .comments {margin: 5px 0 0 32px;}

  /* Плашки «Только члены клуба...»: заданная выше ширина — жёсткие 350px,
     внутри отчёта на телефоне такой бокс выпирает за его края. Пусть
     занимает доступную ширину, но не больше десктопных 350px. */
  .note-panel {width: auto; max-width: 350px; box-sizing: border-box;}

  /* Записи обсуждения — в том же стиле, что отчёты: автор и время в
     столбик, без дефисных переносов даты и без лишних боковых слоёв.
     `>` не задевает мелкие приглушённые комментарии внутри отчёта. */
  .comment-box > .comment {padding: 10px 5px; margin: 0;}
  .comment-box > .comment header {flex-direction: column; gap: 2px;}
  .comment-box > .comment header .author {align-self: flex-start;}
  .comment-box > .comment header .when {text-align: left; hyphens: none;}
  .comment-box > .comment p {padding: 0;}
}