/* ════════════════════════════════════════════════════════════════════
   notes.css — Teaching Notes module
   ──────────────────────────────────────────────────────────────────
   REWRITTEN 2026-08-03. This module used to be a design island: its own
   `--n-*` palette, its own buttons, its own modals, its own dropzone, and
   `font-family: Arial` on the wrapper. Because Arial had no !important it
   lost to css/transtally.css for inputs and buttons and to css/responsive.css
   for labels, but won for everything else — so the page rendered FOUR
   typefaces at once: Space Grotesk headings, Plus Jakarta inputs, system-ui
   labels and Arial prose.

   Panels, fields, steps, dropzone, chips, choice cards and buttons now come
   from css/icms-forms.css, exactly as in Documents and Exam. What remains
   here is only what is genuinely Notes-specific.

   ⚠️  LOAD ORDER: notes/notes.php links this sheet at the BOTTOM OF THE BODY,
   after partials/_scripts.html — i.e. AFTER icms-forms.css. Anything declared
   here beats the shared layer at equal specificity. That is why the shared
   primitives were DELETED rather than left in place to be overridden; do not
   reintroduce rules for .field, .icms-drop, .icms-choice or .icms-steps here.
   ════════════════════════════════════════════════════════════════════ */

/* No --n-* palette. Colours come from the :root scale in css/icms-modern.css
   (--ink-*, --gold-*, --surface-*), the same source the other two modules use. */

.notes-wrap {
	max-width: 1180px;
	margin: 12px auto 60px;
	padding: 0 16px;
	/* Deliberately NO font-family — see the header note. The page inherits
	   --font-body from transtally.css like every other workspace page. */
	color: var(--ink-800);
}
.notes-hidden { display: none !important; }

/* Cards are the shared .icms-form panel; this only adds the rhythm between
   the three stacked sections. */
.notes-card { margin-top: 16px; }

/* ── Status line ─────────────────────────────────────────────────
   Notes' one genuinely distinct component: a persistent live-region strip
   that reports extraction progress. Documents/Exam use toasts for this. */
.notes-status {
	margin-top: 16px;
	padding: 11px 14px;
	border-radius: 10px;
	border: 1px solid var(--ink-200);
	background: var(--ink-50);
	color: var(--ink-600);
	font-size: 13px;
	line-height: 1.5;
}
.notes-status.is-ok  { background: var(--success-100); border-color: #a7f3d0; color: var(--success-700); }
.notes-status.is-err { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.notes-status.is-busy { background: var(--gold-100); border-color: var(--gold-300); color: var(--gold-700); }

.notes-muted { color: var(--ink-500); font-size: 13.5px; line-height: 1.55; }
.notes-balance { margin-top: 12px; font-size: 12.5px; color: var(--ink-500); }

/* ── Extraction editor ───────────────────────────────────────────
   Built at runtime by notes/js/app.js, which reads .notes-lo-editor and the
   .exLoTitle / .exLoContent / .exLoAssess inputs inside it (~line 298). The
   class names are a JS contract — restyle freely, do not rename. */
.notes-extract-preview { display: grid; gap: 12px; margin-top: 14px; }
.notes-extract-preview .notes-lo-editor {
	display: grid;
	gap: 8px;
	padding: 14px;
	border: 1px solid var(--ink-200);
	border-radius: 12px;
	background: var(--ink-50);
}
.notes-extract-preview .notes-lo-editor h4 {
	margin: 0;
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 700;
	color: var(--ink-900);
}
.notes-extract-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 12px 0; }
.notes-extract-tools label,
.notes-extract-preview label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-700);
}
.notes-extract-preview textarea,
.notes-extract-preview input,
.notes-extract-tools select {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid var(--ink-200);
	border-radius: 10px;
	background: var(--surface-card);
	color: var(--ink-900);
	font-family: var(--font-body);
	font-size: 14px;
}
.notes-extract-preview textarea:focus,
.notes-extract-preview input:focus,
.notes-extract-tools select:focus {
	outline: none;
	border-color: var(--gold-500);
	box-shadow: 0 0 0 4px rgba(201, 150, 47, .16);
}
.notes-extract-preview .notes-warn {
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid var(--gold-300);
	background: var(--gold-50);
	color: var(--gold-700);
	font-size: 12.5px;
}

/* ── Buttons ─────────────────────────────────────────────────────
   .notes-btn / --gold / --ghost are a JS contract: notes/js/app.js toggles
   the two modifiers on the download button to swap its emphasis (~line 583).
   Rather than rewrite that logic, the classes are kept and mapped onto the
   shared button look, so they are indistinguishable from Documents/Exam.
   The markup carries the shared .icms-btn classes too — these rules exist so
   the JS-driven swap still works after this sheet wins on source order. */
.notes-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	height: 46px;
	padding: 0 22px;
	border: 1px solid transparent;
	border-radius: 10px;
	font-family: var(--font-body);
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s var(--ease, ease), border-color .15s var(--ease, ease), transform .12s var(--ease, ease);
}
.notes-btn:active { transform: translateY(1px); }
.notes-btn--gold { background: var(--gold-500); color: var(--ink-900); }
.notes-btn--gold:hover { background: var(--gold-600); color: #fff; }
.notes-btn--ghost { background: var(--surface-card); border-color: var(--ink-200); color: var(--ink-700); }
.notes-btn--ghost:hover { border-color: var(--ink-300); background: var(--ink-50); }
.notes-btn--block { width: 100%; margin-top: 16px; }
.notes-btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ── Modals ──────────────────────────────────────────────────────
   Notes keeps its own lightweight modal rather than the shared one: its
   panels are opened and closed purely by toggling .notes-hidden, with no
   dependency on js/ui-polish.js's animation shim. Restyled to match the
   shared surfaces. `.notes-modal__box` is queried directly by
   notes/js/app.js (~lines 589 and 1040) — do not rename it. */
.notes-modal {
	position: fixed;
	inset: 0;
	z-index: 9000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(15, 23, 42, .55);
}
.notes-modal__box {
	position: relative;
	width: 100%;
	max-width: 480px;
	max-height: 90vh;
	overflow: auto;
	padding: 26px;
	border-radius: 16px;
	background: var(--surface-card);
	box-shadow: 0 24px 60px rgba(15, 23, 42, .3);
}
.notes-modal__box--wide { max-width: 880px; }
.notes-modal__box h3 {
	margin: 0 0 6px;
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--ink-900);
}
.notes-modal__x {
	position: absolute;
	top: 12px;
	right: 14px;
	border: 0;
	background: none;
	font-size: 26px;
	line-height: 1;
	color: var(--ink-400);
	cursor: pointer;
}
.notes-modal__x:hover { color: var(--ink-700); }

/* On-screen preview document — renders buildNotesHtml() output inline so the
   user SEES the handout before paying (not just a silent PDF download). */
.notes-preview-doc {
	margin-top: 14px;
	max-height: 64vh;
	overflow: auto;
	padding: 20px 22px;
	border: 1px solid var(--ink-200);
	border-radius: 12px;
	background: var(--surface-card);
	box-shadow: inset 0 1px 4px rgba(15, 23, 42, .04);
}
.notes-preview-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.notes-preview-actions .notes-btn { flex: 1; min-width: 200px; }

/* ── My notes list ───────────────────────────────────────────────── */
.notes-mylist { margin-top: 14px; }
.notes-myitem {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 9px;
	padding: 12px 14px;
	border: 1px solid var(--ink-200);
	border-radius: 12px;
}
.notes-myitem__t { font-size: 13.5px; font-weight: 700; color: var(--ink-900); }
.notes-myitem__m { margin-top: 2px; font-size: 12px; color: var(--ink-500); font-family: var(--font-mono); }
.notes-myitem__btns { display: flex; gap: 8px; flex: 0 0 auto; }
.notes-myitem__btn { height: 36px; padding: 0 13px; font-size: 12.5px; flex: 0 0 auto; }

@media (max-width: 620px) {
	.notes-extract-tools { grid-template-columns: 1fr; }
	.notes-myitem { flex-direction: column; align-items: flex-start; }
	.notes-myitem__btns { width: 100%; }
	.notes-myitem__btn { flex: 1; }
	.notes-preview-actions .notes-btn { min-width: 0; flex: 1 1 100%; }
	.notes-modal__box { padding: 20px 16px; }
}

/* ── Loading animation ───────────────────────────────────────────
   Notes loads the shared writing-hand SVG inside its own modal. Give every SVG
   part concrete colors here so unresolved app-theme variables cannot render it
   as a black block on the dark loading card. */
#notesLoading .icms-writing-anim {
	width: 140px !important;
	height: 110px !important;
	margin: 0 auto 22px !important;
}
#notesLoading .icms-writing-anim .iw-svg {
	width: 100% !important;
	height: 100% !important;
	display: block !important;
	overflow: visible !important;
}
#notesLoading .iw-paper {
	fill: #ffffff !important;
	stroke: #dbe3ef !important;
	stroke-width: 1.5 !important;
	filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .24));
}
#notesLoading .iw-rule {
	stroke: #dbe3ef !important;
	stroke-width: 1.5 !important;
}
#notesLoading .iw-ink {
	stroke: #d97706 !important;
	stroke-width: 3 !important;
	stroke-dasharray: 200 !important;
	stroke-dashoffset: 200;
	animation: notes-iw-draw 4.8s ease-in-out infinite !important;
}
#notesLoading .iw-ink-1 { animation-delay: 0s !important; }
#notesLoading .iw-ink-2 { animation-delay: 1.15s !important; }
#notesLoading .iw-ink-3 { animation-delay: 2.3s !important; }
#notesLoading .iw-pen-body { fill: #f59e0b !important; }
#notesLoading .iw-pen-grip { fill: #b45309 !important; }
#notesLoading .iw-pen-nib { fill: #111827 !important; }
#notesLoading .iw-fist {
	fill: #fee2c5 !important;
	stroke: #e7b98e !important;
	stroke-width: 1.5 !important;
}
#notesLoading .iw-hand {
	animation: notes-iw-hand-move 4.8s ease-in-out infinite !important;
}
@keyframes notes-iw-draw {
	0% { stroke-dashoffset: 200; opacity: 1; }
	22% { stroke-dashoffset: 0; }
	72% { stroke-dashoffset: 0; opacity: 1; }
	84% { stroke-dashoffset: 0; opacity: 0; }
	85% { stroke-dashoffset: 200; opacity: 0; }
	100% { stroke-dashoffset: 200; opacity: 0; }
}
@keyframes notes-iw-hand-move {
	0% { transform: translate(28px, 37px); }
	22% { transform: translate(92px, 37px); }
	24% { transform: translate(28px, 55px); }
	46% { transform: translate(92px, 55px); }
	48% { transform: translate(28px, 73px); }
	70% { transform: translate(92px, 73px); }
	84% { transform: translate(102px, 20px); }
	100% { transform: translate(28px, 37px); }
}