/* 歌词创作台 /lyrics-studio/ —— 三栏：作品架与曲式 · 分段写词 · 韵图与体检。
 * 与 .gm-nv（小说）、.gm-diary（日记）同一套骨架和语汇，全部作用在 .gm-ly 下。 */

.gm-ly {
	--ly-rail: 244px;
	--ly-side: 320px;
	max-width: 1660px;
	margin: 0 auto;
	padding: 16px 22px 76px;
	color: var(--gm-text, #202428);
}

@media (min-width: 1200px) {
	.gm-ly { padding-left: 58px; padding-right: 58px; }      /* 给右边缘的竖排字印让位 */
	.gm-ly.is-focus { padding-left: 0; padding-right: 0; }
}

/* ---------- 门脸 ---------- */

.gm-ly__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px 24px;
	margin-bottom: 18px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--gm-border, rgba(31, 35, 39, .1));
}

.gm-ly__head p {
	margin: 0 0 6px;
	font: 11px/1.4 var(--mono, ui-monospace, monospace);
	letter-spacing: .2em;
	color: #a47c49;
}

.gm-ly__head h1 { margin: 0; font: 500 34px/1.2 var(--gm-serif, serif); letter-spacing: -.02em; }
.gm-ly__head > span { color: var(--gm-muted, #606870); font-size: 13.5px; }

/* 公开工具的说明条：只给游客看 */
.gm-ly__notice {
	margin: 0 0 18px;
	padding: 14px 18px;
	border: 1px solid var(--gm-border, rgba(31, 35, 39, .1));
	border-left: 3px solid #a47c49;
	border-radius: 12px;
	background: var(--gm-surface, #fffdf8);
	font-size: 13px;
	line-height: 1.9;
	color: var(--gm-muted, #606870);
	max-width: 900px;
}

.gm-ly__notice b { color: var(--gm-text, #202428); }

/* ---------- 骨架 ---------- */

.gm-ly__wrap {
	display: grid;
	grid-template-columns: var(--ly-rail) minmax(0, 1fr) var(--ly-side);
	gap: 16px;
	height: clamp(600px, calc(100vh - 300px), 980px);
}

.gm-ly__rail,
.gm-ly__side {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

.gm-ly__rail-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 4px 2px 8px;
	font: 600 12px/1.4 var(--gm-sans, sans-serif);
	letter-spacing: .1em;
	color: var(--gm-muted, #606870);
	text-transform: uppercase;
	border-bottom: 1px solid var(--gm-border, rgba(31, 35, 39, .1));
	position: sticky;
	top: 0;
	background: var(--gm-bg, #f7f3eb);
	z-index: 2;
}

.gm-ly__rail-head--sub { margin-top: 8px; }

.gm-ly__rail-head button {
	border: 1px solid var(--gm-border-strong, rgba(31, 35, 39, .18));
	background: var(--gm-surface, #fffdf8);
	color: var(--gm-accent, #244f6d);
	border-radius: 999px;
	padding: 3px 10px;
	font-size: 12px;
	cursor: pointer;
	letter-spacing: 0;
	text-transform: none;
}

.gm-ly__rail-head button:hover { background: var(--gm-accent-soft, #e7eff4); }

/* ---------- 左栏 ---------- */

.gm-ly__songs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }

.gm-ly__songs li {
	display: flex;
	border-radius: 10px;
	padding: 8px 9px;
	cursor: pointer;
	border: 1px solid transparent;
	line-height: 1.35;
}

.gm-ly__songs li:hover { background: var(--gm-surface, #fffdf8); border-color: var(--gm-border, rgba(31, 35, 39, .1)); }
.gm-ly__songs li.is-on { background: var(--gm-accent-soft, #e7eff4); border-color: var(--gm-accent, #244f6d); }
.gm-ly__songs li.gm-ly__empty { cursor: default; color: var(--gm-muted, #606870); font-size: 13px; }

.gm-ly__row-main { flex: 1; min-width: 0; }
.gm-ly__row-name { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-ly__row-sub { display: block; font-size: 11px; color: var(--gm-muted, #606870); margin-top: 2px; }

.gm-ly__forms { display: flex; flex-direction: column; gap: 6px; }

.gm-ly__forms button {
	text-align: left;
	border: 1px solid var(--gm-border, rgba(31, 35, 39, .1));
	background: var(--gm-surface, #fffdf8);
	border-radius: 10px;
	padding: 8px 10px;
	cursor: pointer;
	font: inherit;
}

.gm-ly__forms button:hover { border-color: var(--gm-accent, #244f6d); }
.gm-ly__forms b { display: block; font-size: 13px; font-weight: 600; }
.gm-ly__forms span { display: block; font-size: 11px; color: var(--gm-muted, #606870); margin-top: 2px; }

/* ---------- 中栏 ---------- */

.gm-ly__main {
	display: flex;
	flex-direction: column;
	min-height: 0;
	min-width: 0;
	background: var(--gm-surface, #fffdf8);
	border: 1px solid var(--gm-border, rgba(31, 35, 39, .1));
	border-radius: var(--gm-radius-md, 16px);
	box-shadow: 0 14px 40px rgba(55, 49, 40, .05);
	overflow: hidden;
}

.gm-ly__bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	border-bottom: 1px solid var(--gm-border, rgba(31, 35, 39, .1));
	background: var(--gm-surface, #fffdf8);
}

.gm-ly__title {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	font: 600 18px/1.4 var(--gm-serif, serif);
	color: var(--gm-text, #202428);
	padding: 4px 2px;
}

.gm-ly__title:focus { outline: 0; box-shadow: inset 0 -2px 0 var(--gm-accent, #244f6d); }
.gm-ly__title:disabled { color: var(--gm-muted, #606870); }

.gm-ly__state {
	font-size: 12px;
	color: var(--gm-muted, #606870);
	white-space: nowrap;
	max-width: 30ch;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gm-ly__state.is-warn { color: #b4522c; }

.gm-ly__ghost,
.gm-ly__bar .is-primary,
.gm-ly__acts button {
	border-radius: 9px;
	padding: 7px 14px;
	font: inherit;
	font-size: 13px;
	cursor: pointer;
	white-space: nowrap;
}

.gm-ly__ghost {
	border: 1px solid var(--gm-border-strong, rgba(31, 35, 39, .18));
	background: transparent;
	color: var(--gm-muted, #606870);
}

.gm-ly__ghost:hover { color: var(--gm-accent, #244f6d); border-color: var(--gm-accent, #244f6d); }
.gm-ly__ghost.is-on { background: var(--gm-accent-soft, #e7eff4); color: var(--gm-accent, #244f6d); border-color: var(--gm-accent, #244f6d); }

.is-primary { border: 1px solid #292621; background: #292621; color: #fff; }
.gm-ly__bar .is-primary:hover, .gm-ly__acts .is-primary:hover { background: #3a352d; }
.is-primary:disabled { opacity: .45; cursor: default; }
.is-danger { border: 1px solid #c9a9a0; background: transparent; color: #a8503a; }
.is-danger:hover { background: #fbf0ec; }

.gm-ly__mount { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 0 40px; }
.gm-ly__blank { color: var(--gm-muted, #606870); text-align: center; padding: 90px 20px; font-size: 14px; }
.gm-ly__sheet { max-width: 760px; margin: 0 auto; padding: 0 30px; }

/* ---------- 段落块 ---------- */

.gm-ly__sec {
	border: 1px solid var(--gm-border, rgba(31, 35, 39, .1));
	border-left: 3px solid var(--gm-border-strong, rgba(31, 35, 39, .18));
	border-radius: 12px;
	padding: 10px 14px 12px;
	margin-bottom: 12px;
	background: var(--gm-surface, #fffdf8);
	transition: box-shadow .25s, border-color .25s;
}

.gm-ly__sec.is-flash { box-shadow: 0 0 0 3px rgba(164, 124, 73, .28); }

/* 段落类型用左边那道色条区分——扫一眼就知道曲式长什么样 */
.gm-ly__sec.is-verse     { border-left-color: #6b7c8c; }
.gm-ly__sec.is-prechorus { border-left-color: #b7791f; }
.gm-ly__sec.is-chorus    { border-left-color: #c0392b; background: #fffaf4; }
.gm-ly__sec.is-bridge    { border-left-color: #6b4fa0; }
.gm-ly__sec.is-hook      { border-left-color: #2f7d32; }
.gm-ly__sec.is-intro,
.gm-ly__sec.is-outro     { border-left-color: #a49e94; }
.gm-ly__sec.is-spoken    { border-left-color: #97417f; }

.gm-ly__sechead { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }

.gm-ly__type {
	border: 1px solid var(--gm-border, rgba(31, 35, 39, .1));
	border-radius: 7px;
	background: var(--gm-bg, #f7f3eb);
	font: inherit;
	font-size: 12px;
	padding: 3px 6px;
	cursor: pointer;
}

.gm-ly__seclabel { font-size: 12.5px; font-weight: 600; }
.gm-ly__secmeta { font: 11px/1.4 var(--mono, ui-monospace, monospace); color: var(--gm-muted, #606870); }
.gm-ly__secacts { margin-left: auto; display: flex; gap: 2px; }

.gm-ly__secacts button {
	border: 0;
	background: none;
	cursor: pointer;
	font-size: 12px;
	line-height: 1;
	padding: 4px 5px;
	color: var(--gm-muted, #606870);
	border-radius: 5px;
}

.gm-ly__secacts button:hover { background: var(--gm-surface-soft, #eee7dc); color: var(--gm-text, #202428); }

.gm-ly__ta {
	display: block;
	width: 100%;
	box-sizing: border-box;
	border: 0;
	background: transparent;
	resize: none;
	overflow: hidden;
	padding: 2px 0;
	font-family: var(--gm-serif, serif);
	font-size: 16.5px;
	line-height: 2.05;
	color: var(--gm-text, #202428);
	min-height: 4.1em;   /* 空段也留两行的落笔处；高度由 JS 按内容量 */
}

/* 给写了 display 的元素挂 hidden，hidden 会失效——「写／校韵」两个视图会一起显示出来。
 * 同一个坑在小说创作台的抽屉上踩过一次，这里直接补死。 */
.gm-ly__ta[hidden],
.gm-ly__proofbox[hidden] { display: none !important; }

.gm-ly__ta:focus { outline: 0; }
.gm-ly__ta::placeholder { color: #bdb7ab; }

/* 校韵视图：行号 · 词 · 字数 · 辙色点 */
.gm-ly__pline {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-family: var(--gm-serif, serif);
	font-size: 16.5px;
	line-height: 2.05;
}

.gm-ly__pline.is-gap { line-height: 1.2; }
.gm-ly__pline i { font: 10px/1 var(--mono, ui-monospace, monospace); color: #c2bcb1; width: 16px; flex: none; font-style: normal; }
.gm-ly__pline span { flex: 1; min-width: 0; }
.gm-ly__pline b { font-weight: 700; }
.gm-ly__pline u { font: 10px/1 var(--mono, ui-monospace, monospace); color: var(--gm-muted, #606870); text-decoration: none; flex: none; }
.gm-ly__pline em { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.gm-ly__pline em.is-none { background: transparent; box-shadow: inset 0 0 0 1px #d4cec3; }

.gm-ly__add { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 2px 0; }
.gm-ly__add span { font-size: 12px; color: var(--gm-muted, #606870); }

.gm-ly__add button {
	border: 1px dashed var(--gm-border-strong, rgba(31, 35, 39, .18));
	background: transparent;
	border-radius: 999px;
	padding: 4px 11px;
	font: inherit;
	font-size: 12px;
	cursor: pointer;
	color: var(--gm-muted, #606870);
}

.gm-ly__add button:hover { border-style: solid; color: var(--gm-accent, #244f6d); border-color: var(--gm-accent, #244f6d); }

.gm-ly__foot {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border-top: 1px solid var(--gm-border, rgba(31, 35, 39, .1));
	font-size: 12px;
	color: var(--gm-muted, #606870);
	background: var(--gm-surface, #fffdf8);
}

.gm-ly__dot { opacity: .45; }
.gm-ly__foot-right { margin-left: auto; font: 11px/1 var(--mono, ui-monospace, monospace); }

/* ---------- 右栏卡片 ---------- */

.gm-ly__card {
	background: var(--gm-surface, #fffdf8);
	border: 1px solid var(--gm-border, rgba(31, 35, 39, .1));
	border-radius: var(--gm-radius-md, 16px);
	padding: 14px;
}

.gm-ly__card h2 {
	font: 600 12px/1.4 var(--gm-sans, sans-serif);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--gm-muted, #606870);
	margin: 0 0 10px;
}

.gm-ly__tip { margin: 8px 0 0; font-size: 11.5px; line-height: 1.75; color: var(--gm-muted, #606870); }
.gm-ly__tip a { color: var(--gm-accent, #244f6d); word-break: break-all; }

/* 韵图 */
.gm-ly__mapsec + .gm-ly__mapsec { margin-top: 10px; }
.gm-ly__mapsec > b { display: block; font-size: 11px; color: var(--gm-muted, #606870); margin-bottom: 4px; }
.gm-ly__mapsec ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

.gm-ly__mapsec li {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 2px 5px;
	border-radius: 6px;
	cursor: pointer;
}

.gm-ly__mapsec li:hover { background: var(--gm-bg, #f7f3eb); }
.gm-ly__mapsec i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid transparent; flex: none; }
.gm-ly__mapsec span { font: 13px/1 var(--gm-serif, serif); }
.gm-ly__mapsec u { margin-left: auto; font: 10px/1 var(--mono, ui-monospace, monospace); color: #b3ada2; text-decoration: none; }

/* 体检 */
.gm-ly__rv {
	font-size: 12px;
	line-height: 1.75;
	padding: 8px 10px;
	border-radius: 8px;
	margin-bottom: 6px;
	border-left: 3px solid;
}

.gm-ly__rv.is-warn { background: #fff6ec; border-color: #d08a3a; color: #7a4c16; }
.gm-ly__rv.is-tip  { background: var(--gm-bg, #f7f3eb); border-color: #c3bdb1; color: #5d574d; }
.gm-ly__ok { margin: 0; font-size: 12px; color: #2f7d32; }

/* 辙口选字 */
.gm-ly__lookup input {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--gm-border-strong, rgba(31, 35, 39, .18));
	border-radius: 8px;
	padding: 6px 9px;
	font: inherit;
	font-size: 13px;
	background: var(--gm-bg, #f7f3eb);
}

.gm-ly__lookout { margin: 6px 0 10px; font-size: 11.5px; line-height: 1.7; color: var(--gm-muted, #606870); }
.gm-ly__lookout span { display: block; }

.gm-ly__zhe { display: flex; flex-wrap: wrap; gap: 4px; }

.gm-ly__zhe button {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	border: 1px solid var(--gm-border, rgba(31, 35, 39, .1));
	background: var(--gm-bg, #f7f3eb);
	border-radius: 999px;
	padding: 3px 9px;
	font: inherit;
	font-size: 11.5px;
	cursor: pointer;
}

.gm-ly__zhe button.is-on { background: #fff; border-color: #292621; font-weight: 600; }
.gm-ly__zhe i { width: 7px; height: 7px; border-radius: 50%; flex: none; }

.gm-ly__tones { display: flex; gap: 4px; margin: 8px 0 6px; }

.gm-ly__tones button {
	border: 1px solid var(--gm-border, rgba(31, 35, 39, .1));
	background: transparent;
	border-radius: 6px;
	padding: 2px 8px;
	font: inherit;
	font-size: 11px;
	cursor: pointer;
	color: var(--gm-muted, #606870);
}

.gm-ly__tones button.is-on { background: #292621; color: #fff; border-color: #292621; }

.gm-ly__poolhead { margin: 0 0 6px; font-size: 11px; color: var(--gm-muted, #606870); }
.gm-ly__poolhead em { float: right; font-style: normal; color: #b3ada2; }

.gm-ly__chars { display: flex; flex-wrap: wrap; gap: 3px; max-height: 208px; overflow-y: auto; scrollbar-width: thin; }

.gm-ly__chars button {
	border: 1px solid transparent;
	background: var(--gm-bg, #f7f3eb);
	border-radius: 6px;
	width: 27px;
	height: 27px;
	font: 14px/1 var(--gm-serif, serif);
	cursor: pointer;
	padding: 0;
}

.gm-ly__chars button:hover { border-color: var(--gm-accent, #244f6d); background: #fff; }

.gm-ly__more { display: block; margin-top: 8px; font-size: 11.5px; color: var(--gm-muted, #606870); }

/* 档案表单 */
.gm-ly__field { display: block; font-size: 11.5px; color: var(--gm-muted, #606870); margin-bottom: 9px; }

.gm-ly__field input,
.gm-ly__field textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin-top: 3px;
	border: 1px solid var(--gm-border-strong, rgba(31, 35, 39, .18));
	border-radius: 8px;
	padding: 6px 9px;
	font: inherit;
	font-size: 13px;
	color: var(--gm-text, #202428);
	background: var(--gm-bg, #f7f3eb);
	resize: vertical;
}

.gm-ly__grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.gm-ly__field--wide { grid-column: span 2; }
.gm-ly__acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; }
.gm-ly__acts button { flex: 1; }

.gm-ly__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.gm-ly__legend li { font-size: 11.5px; line-height: 1.75; color: var(--gm-muted, #606870); }
.gm-ly__legend b { color: var(--gm-text, #202428); }

/* ---------- 专注模式 ---------- */

html.gm-focus { margin-top: 0 !important; }

body.gm-focus #wpadminbar,
body.gm-focus .nav,
body.gm-focus .gm-site-header,
body.gm-focus .gm-site-footer,
body.gm-focus .gm-motto { display: none !important; }

body.gm-focus .gm-main { padding-top: 0 !important; }
body.gm-focus { background: var(--gm-bg, #f7f3eb); }

.gm-ly.is-focus { max-width: none; padding: 0; }
.gm-ly.is-focus .gm-ly__head,
.gm-ly.is-focus .gm-ly__rail,
.gm-ly.is-focus .gm-ly__side { display: none; }

.gm-ly.is-focus .gm-ly__wrap { grid-template-columns: minmax(0, 1fr); height: 100vh; gap: 0; }

.gm-ly.is-focus .gm-ly__main {
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	position: relative;
}

.gm-ly.is-focus .gm-ly__bar,
.gm-ly.is-focus .gm-ly__foot {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 5;
	border: 0;
	opacity: 0;
	transition: opacity .28s ease;
	pointer-events: none;
}

.gm-ly.is-focus .gm-ly__bar { top: 0; background: linear-gradient(var(--gm-bg, #f7f3eb) 62%, transparent); padding: 16px 26px 28px; }
.gm-ly.is-focus .gm-ly__foot { bottom: 0; background: linear-gradient(transparent, var(--gm-bg, #f7f3eb) 42%); padding: 28px 26px 14px; }

.gm-ly.is-focus.is-hint .gm-ly__bar,
.gm-ly.is-focus.is-hint .gm-ly__foot,
.gm-ly.is-focus .gm-ly__bar:hover,
.gm-ly.is-focus .gm-ly__foot:hover,
.gm-ly.is-focus .gm-ly__bar:focus-within { opacity: 1; pointer-events: auto; }

.gm-ly.is-focus .gm-ly__mount { padding: 0; scrollbar-width: none; }
.gm-ly.is-focus .gm-ly__mount::-webkit-scrollbar { width: 0; }
.gm-ly.is-focus .gm-ly__sheet { max-width: clamp(620px, 52vw, 860px); padding: 12vh 0 34vh; }
.gm-ly.is-focus .gm-ly__sec { background: transparent; border-color: transparent; border-left-width: 3px; }
.gm-ly.is-focus .gm-ly__sec.is-chorus { background: transparent; }

/* 专注模式下段落的那排控件退到背景里，鼠标挪过去才回来——
 * 段落类型还是要看得见（曲式本身是作品的一部分），但不该一直在视线里。 */
.gm-ly.is-focus .gm-ly__sechead { opacity: .22; transition: opacity .2s ease; }
.gm-ly.is-focus .gm-ly__sec:hover .gm-ly__sechead,
.gm-ly.is-focus .gm-ly__sec:focus-within .gm-ly__sechead { opacity: 1; }

/* ---------- 窄屏 ---------- */

@media (max-width: 1280px) {
	.gm-ly { --ly-rail: 208px; --ly-side: 276px; }
}

@media (max-width: 1080px) {
	.gm-ly__wrap { grid-template-columns: minmax(0, 1fr); height: auto; }
	.gm-ly__rail, .gm-ly__side { overflow: visible; }
	.gm-ly__main { order: 1; min-height: 66vh; }
	.gm-ly__side { order: 2; flex-direction: row; flex-wrap: wrap; }
	.gm-ly__side .gm-ly__card { flex: 1 1 268px; }
	.gm-ly__rail { order: 3; }
}

@media (max-width: 680px) {
	.gm-ly { padding: 14px 14px 64px; }
	.gm-ly__head h1 { font-size: 28px; }
	.gm-ly__bar { flex-wrap: wrap; padding: 10px 12px; }
	.gm-ly__title { flex: 1 1 100%; order: -1; }
	.gm-ly__sheet { padding: 0 14px; }
	.gm-ly__ta, .gm-ly__pline { font-size: 16px; }

	/* 窄屏上这排控件挤成一列会把「主歌 1」竖着劈开——让它规规矩矩折成两行 */
	.gm-ly__sechead { flex-wrap: wrap; row-gap: 4px; }
	.gm-ly__seclabel { white-space: nowrap; }
	.gm-ly__secmeta { flex-basis: 100%; order: 3; }
	.gm-ly__secacts { order: 2; }
	.gm-ly__grid3 { grid-template-columns: 1fr 1fr; }
	.gm-ly__field--wide { grid-column: span 2; }
	.gm-ly.is-focus .gm-ly__sheet { max-width: none; padding: 9vh 16px 30vh; }
}