/* The writing tool (assets/js/ye-writer.js): writing and notes under a lesson. */

.ye-writer {
	--yw-ink: var(--lp-ink, var(--ye-ink));
	--yw-muted: var(--lp-muted, var(--ye-muted));
	--yw-border: var(--lp-border, var(--ye-border));
	--yw-accent: var(--lp-accent, var(--ye-accent));
	--yw-deep: var(--lp-deep, var(--ye-deep));
	--yw-tint: var(--lp-tint, var(--ye-tint));
	--yw-mark: #fff0a8;
	position: relative;
	min-width: 0;
	border: 1px solid var(--yw-border);
	border-radius: 18px;
	background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.ye-writer.is-focus { border-color: #b996e6; box-shadow: 0 0 0 4px rgba(111, 63, 192, .1); }
.ye-writer__source { display: block; width: 100%; min-height: 220px; padding: 16px 18px; border: 0; border-radius: 18px; background: none; color: var(--yw-ink); font: inherit; font-size: 16.5px; line-height: 1.9; resize: vertical; }
.ye-writer.is-ready .ye-writer__source { display: none; }

/* Toolbar: stays in sight under the lesson bar while a long text is written. */
.ye-writer__bar { position: sticky; top: calc(var(--lp-top, 0px) + var(--lp-bar-h, 0px)); z-index: 3; display: flex; align-items: center; gap: 2px; padding: 7px 8px; overflow-x: auto; border-bottom: 1px solid var(--yw-border); border-radius: 17px 17px 0 0; background: rgba(252, 250, 254, .97); scrollbar-width: none; }
.ye-writer__bar::-webkit-scrollbar { display: none; }
.ye-writer__tool { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--yw-muted); cursor: pointer; transition: background .12s ease, color .12s ease; }
.ye-writer__tool svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ye-writer__tool:hover { background: var(--yw-tint); color: var(--yw-deep); }
.ye-writer__tool:focus-visible { outline: 2px solid var(--yw-accent); outline-offset: 1px; }
.ye-writer__tool[aria-pressed="true"] { background: #ebe0f8; color: var(--yw-deep); }
.ye-writer__tool--mark[aria-pressed="true"] { background: var(--yw-mark); color: #6b5300; }
.ye-writer__tool--undo svg, .ye-writer__tool--redo svg { transform: scaleX(-1); }
.ye-writer__gap { flex: 0 0 auto; width: 1px; height: 20px; margin: 0 5px; background: var(--yw-border); }

/* The page */
.ye-writer__area { position: relative; min-height: 220px; padding: 16px 20px 10px; color: var(--yw-ink); font-size: 16.5px; line-height: 1.95; outline: 0; overflow-wrap: anywhere; cursor: text; }
.ye-writer__area[dir="ltr"] { text-align: left; }
.ye-writer__area > *, .ye-writer__area li { unicode-bidi: plaintext; text-align: start; }
.ye-writer__area p { margin: 0 0 .7em; }
.ye-writer__area ul, .ye-writer__area ol { margin: 0 0 .7em; padding-inline-start: 1.6em; }
.ye-writer__area li { margin: 0 0 .25em; }
.ye-writer__area ul > li { list-style: disc; }
.ye-writer__area ol > li { list-style: decimal; }
.ye-writer__area b, .ye-writer__area strong { font-weight: var(--ye-w-bold); }
.ye-writer__area mark, .ye-writer__area span[style*="background"] { padding: 0 2px; border-radius: 4px; background: var(--yw-mark) !important; color: inherit; }
.ye-writer.is-empty .ye-writer__area::before { content: attr(data-placeholder); position: absolute; inset-inline: 20px; top: 16px; color: #a39bad; pointer-events: none; }
.ye-writer.is-empty .ye-writer__area[dir="ltr"]::before { left: 20px; right: 20px; text-align: left; }

/* Words and what happened to the text */
.ye-writer__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 38px; padding: 6px 16px 8px; border-top: 1px dashed var(--yw-border); color: var(--yw-muted); font-size: 12.5px; font-weight: 650; }
.ye-writer__state { text-align: left; }
.ye-writer__state.is-ok { color: var(--ye-green); }
.ye-writer__state.is-info { color: var(--yw-deep); }
.ye-writer__state.is-error { color: #b42318; }

/* A short note: a smaller page. */
.ye-writer--note .ye-writer__area { min-height: 130px; }
.ye-writer--note .ye-writer__source { min-height: 130px; }

@media (max-width: 700px) {
	.ye-writer { border-radius: 16px; }
	.ye-writer__bar { padding: 6px; border-radius: 15px 15px 0 0; }
	.ye-writer__tool { width: 36px; height: 38px; }
	/* On a phone the keyboard has no shortcuts; undo stays, redo and clearing make room for the rest. */
	.ye-writer__tool--redo, .ye-writer__tool--clear { display: none; }
	.ye-writer__area { min-height: 200px; padding: 14px 15px 8px; font-size: 16px; }
	.ye-writer.is-empty .ye-writer__area::before { inset-inline: 15px; top: 14px; }
	.ye-writer.is-empty .ye-writer__area[dir="ltr"]::before { left: 15px; right: 15px; }
	.ye-writer__foot { padding: 6px 13px 8px; }
}