/* UC Strum: שורת הפריטה + חלון העריכה. אותה שפה חזותית כמו שורת צלילי הפתיחה (uc-song-modes.css) */

/* ── השורה ── */
.uc-st {
	margin: .35em 0 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: .35em .5em;
	font-size: .95rem;
}
.uc-st.is-empty .uc-st-label, .uc-st.is-empty .uc-st-val { display: none; }
.uc-st-label { opacity: .75; }
.uc-st-val {
	display: inline-block;
	border: 1px solid rgba(216, 168, 110, .6);
	border-radius: 999px;
	padding: .05em .75em;
	font-weight: 700;
	color: var(--text-chord, inherit);
	letter-spacing: .06em;
	white-space: pre-wrap;
	unicode-bidi: isolate;
}
.uc-st-edit {
	font: inherit;
	font-size: .85em;
	background: none;
	color: inherit;
	cursor: pointer;
	border: 1px dashed rgba(216, 168, 110, .8);
	border-radius: 999px;
	padding: .05em .7em;
	opacity: .85;
}
.uc-st-edit:hover { border-color: currentColor; opacity: 1; }
.uc-st-edit:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media print { .uc-st-edit, .uc-st.is-empty { display: none; } }

/* ── חלון העריכה ── */
.uc-st-modal {
	--m-bg: #fffaf3; --m-fg: #0D1B33; --m-sub: #5a6475; --m-line: #DCD0C1; --m-acc: #B68C64; --m-key: #fff;
	position: fixed; inset: 0; z-index: 10050;
	background: rgba(0, 0, 0, .55);
	display: flex; align-items: center; justify-content: center;
	padding: 16px;
	direction: rtl;
}
.uc-st-modal.is-dark { --m-bg: #16233b; --m-fg: #f1e6d8; --m-sub: #b9c2d0; --m-line: #33445f; --m-acc: #d8a86e; --m-key: #1e2e4a; }
.uc-st-box {
	background: var(--m-bg); color: var(--m-fg);
	border-radius: 16px;
	padding: 18px 18px 14px;
	width: min(440px, 100%);
	max-height: calc(100vh - 32px); overflow: auto;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
	font-family: 'Assistant', 'Assistant-Regular', sans-serif;
}
.uc-st-box h2 { margin: 0 0 .3em; font-size: 1.3rem; color: var(--m-fg); }
.uc-st-help { margin: 0 0 .8em; color: var(--m-sub); font-size: .95rem; line-height: 1.5; }
.uc-st-preview {
	min-height: 2.2em; margin-bottom: .7em;
	padding: .3em .6em;
	border: 1px solid var(--m-line); border-radius: 10px;
	font-size: 1.5rem; font-weight: 700; text-align: center;
	letter-spacing: .08em; white-space: pre-wrap; overflow-wrap: anywhere;
	unicode-bidi: isolate;
}
.uc-st-preview.is-empty { font-size: .95rem; font-weight: 400; letter-spacing: 0; color: var(--m-sub); line-height: 2.2; }
.uc-st-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.uc-st-k {
	font: inherit; font-weight: 700; font-size: 1.05rem;
	min-height: 48px;
	border-radius: 10px; border: 1px solid var(--m-line);
	background: var(--m-key); color: var(--m-fg); cursor: pointer;
	touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.uc-st-big { font-size: 1.9rem; min-height: 60px; line-height: 1; }
.uc-st-k:active { background: var(--m-acc); color: #fff; }
.uc-st-flabel { display: block; margin: .9em 0 .25em; color: var(--m-sub); font-size: .9rem; }
.uc-st-input {
	box-sizing: border-box; width: 100%;
	font: inherit; font-size: 1.1rem;
	min-height: 44px; padding: .3em .6em;
	border: 1px solid var(--m-line); border-radius: 8px;
	background: var(--m-key); color: var(--m-fg);
}
.uc-st-presets { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 10px; }
.uc-st-preset {
	font: inherit; font-size: .9rem;
	min-height: 44px; padding: .2em .8em;
	display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2;
	border-radius: 10px; border: 1px dashed var(--m-line);
	background: transparent; color: var(--m-fg); cursor: pointer;
}
.uc-st-preset-v { font-weight: 700; letter-spacing: .06em; }
.uc-st-preset-n { font-size: .8em; color: var(--m-sub); }
.uc-st-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }
.uc-st-b {
	font: inherit; font-weight: 700; font-size: .95rem;
	padding: .45em 1.2em; min-height: 44px;
	border-radius: 8px; border: 1px solid var(--m-line);
	background: transparent; color: var(--m-fg); cursor: pointer;
}
.uc-st-b.uc-st-primary { background: var(--m-acc); border-color: var(--m-acc); color: #fff; }
.uc-st-b:disabled { opacity: .6; cursor: default; }
.uc-st-modal button:focus-visible, .uc-st-input:focus-visible { outline: 2px solid var(--m-acc); outline-offset: 2px; }
.uc-st-msg { margin: .5em 0 0; min-height: 1.2em; text-align: center; color: var(--m-sub); font-size: .9rem; }