/* css/suggest.css — панель правок карточки от читателей (js/suggest.js, docs/suggest.md) */

.sg-root {
	--sg-bg: #ffffff;
	--sg-fg: #1c1c1c;
	--sg-muted: #777777;
	--sg-line: #dddddd;
	--sg-soft: #f5f5f3;
	--sg-accent: #0061cc;
	--sg-changed: #fff7d6;
	--sg-changed-line: #e0b400;
	--sg-bad: #c00000;
	--sg-ok: #1a7f37;
	font: 15px/1.45 Arial, Helvetica, sans-serif;
	color: var(--sg-fg);
	text-align: left;
}

@media (prefers-color-scheme: dark) {
	.sg-root {
		--sg-bg: #1e1f22;
		--sg-fg: #e8e8e8;
		--sg-muted: #9a9a9a;
		--sg-line: #3a3b3f;
		--sg-soft: #26272b;
		--sg-accent: #6aa9ff;
		--sg-changed: #3a3317;
		--sg-changed-line: #c9a100;
		--sg-bad: #ff7b72;
		--sg-ok: #56d364;
	}
}

.sg-root * { box-sizing: border-box; }

html.sg-open { overflow: hidden; }

.sg-shade {
	position: fixed; inset: 0;
	background: rgba(0, 0, 0, .45);
	z-index: 99998;
}

/* Широкое окно по центру: полям нужно место */
.sg-panel {
	position: fixed; top: 3vh; bottom: 3vh; left: 50%;
	width: 1040px; max-width: 96vw;
	transform: translateX(-50%);
	background: var(--sg-bg);
	border-radius: 10px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
	display: flex; flex-direction: column;
	overflow: hidden;
	z-index: 99999;
}

.sg-panel-note { bottom: auto; top: 20vh; width: 460px; padding: 24px; gap: 14px; }

.sg-inline .sg-panel {
	position: static; width: auto; max-width: none;
	transform: none; overflow: visible;
	box-shadow: none;
	border: 1px solid var(--sg-line); border-radius: 8px;
}

.sg-loading {
	position: fixed; top: 40%; left: 0; width: 100%;
	text-align: center; color: #fff; z-index: 99999;
}
.sg-inline .sg-loading { position: static; width: auto; color: var(--sg-muted); padding: 30px 0; }

.sg-head {
	position: relative;
	padding: 16px 52px 12px 20px;
	border-bottom: 1px solid var(--sg-line);
}
.sg-title { font-size: 19px; font-weight: bold; }
.sg-subtitle { color: var(--sg-muted); margin-top: 2px; }

.sg-close {
	position: absolute; top: 8px; right: 10px;
	width: 38px; height: 38px;
	border: 0; background: none; color: var(--sg-muted);
	font-size: 28px; line-height: 1; cursor: pointer; border-radius: 6px;
}
.sg-close:hover { background: var(--sg-soft); color: var(--sg-fg); }

.sg-body { flex: 1 1 auto; overflow-y: auto; padding: 14px 28px 20px; }
.sg-head { padding-left: 28px; }
.sg-foot { padding-left: 28px; padding-right: 28px; }

/* Поля группы — в две колонки; длинные (сюжет, списки) — на всю ширину */
.sg-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.sg-fields .sg-wide { grid-column: 1 / -1; }
.sg-sources { max-width: none; }
.sg-inline .sg-body { overflow: visible; }

.sg-intro { color: var(--sg-muted); margin-bottom: 12px; }

.sg-group { border-top: 1px solid var(--sg-line); padding: 4px 0; }
.sg-group-title {
	cursor: pointer; padding: 10px 0;
	font-weight: bold; font-size: 16px;
}
.sg-group-note { font-weight: normal; font-size: 13px; color: var(--sg-muted); margin-left: 10px; }

.sg-field { margin: 0 0 14px; padding: 8px 10px; border-radius: 6px; border-left: 3px solid transparent; }
.sg-field.sg-changed { background: var(--sg-changed); border-left-color: var(--sg-changed-line); }

.sg-field-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sg-label { display: block; font-size: 13px; color: var(--sg-muted); margin-bottom: 4px; }

.sg-reset {
	display: none;
	border: 0; background: none; padding: 0;
	color: var(--sg-accent); font-size: 13px; cursor: pointer; text-decoration: underline;
}
.sg-changed .sg-reset { display: inline; }

.sg-input {
	display: block; width: 100%;
	padding: 8px 10px;
	font: inherit; color: var(--sg-fg);
	background: var(--sg-bg);
	border: 1px solid var(--sg-line); border-radius: 6px;
	resize: vertical;
}
.sg-input:focus { outline: 2px solid var(--sg-accent); outline-offset: -1px; }

.sg-hint { font-size: 13px; color: var(--sg-muted); margin-top: 4px; }

.sg-pending {
	margin-top: 6px; padding: 6px 8px;
	font-size: 13px; background: var(--sg-soft); border-radius: 6px;
	display: flex; justify-content: space-between; gap: 10px;
	overflow-wrap: anywhere;
}

.sg-link {
	border: 0; background: none; padding: 0;
	color: var(--sg-accent); font-size: 13px; cursor: pointer; text-decoration: underline;
	white-space: nowrap;
}

.sg-select {
	font: inherit; font-size: 13px; color: var(--sg-fg);
	background: var(--sg-bg);
	border: 1px solid var(--sg-line); border-radius: 6px; padding: 5px 6px;
	max-width: 100%;
}

.sg-drop {
	border: 2px dashed var(--sg-line); border-radius: 8px;
	padding: 22px 14px; text-align: center; cursor: pointer;
	margin-bottom: 12px;
}
.sg-drop:hover, .sg-drop-over { border-color: var(--sg-accent); background: var(--sg-soft); }

.sg-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.sg-thumb {
	width: 140px; padding: 6px;
	border: 1px solid var(--sg-line); border-radius: 6px;
	display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
}
.sg-thumb img { width: 100%; height: 100px; object-fit: contain; background: var(--sg-soft); border-radius: 4px; }
.sg-thumb-wait { opacity: .8; }

.sg-video { display: flex; gap: 8px; margin: 8px 0; }
.sg-video .sg-input { flex: 1 1 auto; }

.sg-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.sg-foot {
	border-top: 1px solid var(--sg-line);
	padding: 10px 20px 14px;
	background: var(--sg-bg);
}
.sg-foot-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sg-counter { color: var(--sg-muted); font-size: 14px; }

.sg-msg { font-size: 14px; }
.sg-msg-bad { color: var(--sg-bad); margin-bottom: 8px; }
.sg-msg-ok { color: var(--sg-ok); margin-bottom: 8px; }

.sg-btn {
	display: inline-block;
	padding: 9px 18px;
	font: inherit; color: var(--sg-fg);
	background: var(--sg-soft);
	border: 1px solid var(--sg-line); border-radius: 6px;
	cursor: pointer; text-decoration: none;
}
.sg-btn-main { background: var(--sg-accent); border-color: var(--sg-accent); color: #fff; font-weight: bold; }
.sg-btn:disabled { opacity: .5; cursor: default; }

.sg-done { padding: 30px 0; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.sg-done-title { font-size: 18px; font-weight: bold; }

/* Кнопка в шапке карточки: справа от названия, прижата к правому краю */
#movies_hd .suggest_open, .suggest_open {
	position: absolute; right: 10px; bottom: 12px;
	display: inline-block;
	padding: 5px 12px 5px 28px;
	font: 13px/1.3 Arial, Helvetica, sans-serif;
	color: #666; text-decoration: none; cursor: pointer;
	border: 1px solid #c8c8c8; border-radius: 15px;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23888' d='M11.5 1.5l3 3L5 14l-3.6.6L2 11z'/%3E%3C/svg%3E") no-repeat 9px 50% / 13px 13px;
	white-space: nowrap;
}
#movies_hd .suggest_open:hover, .suggest_open:hover { color: #0061cc; border-color: #0061cc; }

@media (max-width: 700px) {
	.sg-panel { top: 0; bottom: 0; width: 100%; max-width: 100%; border-radius: 0; }
	.sg-fields { grid-template-columns: 1fr; }
	.sg-body, .sg-head, .sg-foot { padding-left: 14px; padding-right: 14px; }
	.sg-head { padding-right: 52px; }
	#movies_hd .suggest_open, .suggest_open { position: static; margin: 0 0 10px; }
	.sg-video { flex-direction: column; }
	.sg-thumb { width: calc(50% - 5px); }
}