/* The four labelled lesson-note boxes (public/lesson-note-editor.js, issues #971 and #981). Since #981 every
   surface has the same box: the card's shape, 84px tall and growing with the note, the same focus look. A look
   now sets only colours (and the form's row spacing). Design spec:
   docs/superpowers/specs/2026-10-10-lesson-notes-surfaces-alike-design.md (mockup and its generator next to it).
   The dictation bars (dictation.css), the draft status line (lesson-note-draft.css) and the publish dialog
   (lesson-note-publish.css) are styled by their owners. The Mental Game tip picker and its Replace dialog are
   styled here (moved from admin.css), because both pages show them. */

/* ---- Base: every surface ---- */
.note-box-label { display: block; }
/* One box (#981): the card's shape everywhere. The editor grows it to fit the note; min-height is the floor. */
.note-box {
  display: block; width: 100%; box-sizing: border-box; resize: vertical;
  min-height: 84px; padding: 10px 12px;
  font-family: inherit; font-size: 0.92rem; line-height: 1.5;
  border: 1px solid var(--border); border-radius: 6px;
}
/* One focus look: the form's green edge and soft ring. A box being dictated into keeps dictation.css's red edge. */
.note-box:focus:not(.is-dictating) {
  outline: none; border-color: var(--green-dark); box-shadow: 0 0 0 2px rgba(30, 85, 39, 0.1);
}
[data-theme="dark"] .note-box:focus:not(.is-dictating) { box-shadow: 0 0 0 2px rgba(61, 153, 80, 0.3); }
/* Spec N12: 42px from one section's buttons to the next label, a 1px line in the middle. A look sets the
   space above the line (--note-box-above-line) and the line's colour (--note-box-line). */
.note-box-field + .note-box-field {
  margin-top: var(--note-box-above-line, 21px);
  padding-top: 21px;
  border-top: 1px solid var(--note-box-line, var(--border));
}

/* ---- Card: Students tab lesson row and Bookings → Past pop-up. Hard-coded light in both themes (#398). ---- */
.note-boxes--card { margin-bottom: 22px; --note-box-line: #b7d3c1; }
.note-boxes--card .note-box-label { margin: 0 0 6px; font-size: 0.88rem; font-weight: 600; color: #1f4d33; }
.note-boxes--card .note-box { border-color: #b7d3c1; background: #fff; }
.note-boxes--card .note-box[readonly] { background: #f6faf7; color: #444; }
.note-boxes--card .note-box:focus:not(.is-dictating) { border-color: #2e7d4f; box-shadow: 0 0 0 2px rgba(46, 125, 79, 0.15); }
.note-boxes--card .tip-picker label { color: #1f4d33; }
.note-boxes--card .tip-picker select { color: #1a1a1a; background: #fff; border-color: #b7d3c1; }

/* ---- Form (Create Booking → Log a lesson) and To Do (Account → To Do): follow the theme. ---- */
.note-boxes--form .note-box,
.note-boxes--todo .note-box { background: var(--white); color: var(--text); }
/* The form's labels are its own (.settings-field label); the field's 20px margin-bottom is the space above the line. */
.note-boxes--form { --note-box-above-line: 0; }
/* Disabled until a student is looked up, and while submitting: as the form's other inputs (.settings-input:disabled). */
.note-boxes--form .note-box:disabled { background: rgba(30, 85, 39, 0.04); color: var(--text-muted); opacity: 1; }
[data-theme="dark"] .note-boxes--form .note-box:disabled { background: rgba(30, 85, 39, 0.12); }
.note-boxes--todo .note-box-label { margin: 0 0 6px; font-size: 0.88rem; font-weight: 600; }

/* ---- Mental Game tip picker and its Replace dialog (moved unchanged from admin.css) ---- */
/* The dropdown above the Mental Game box. Default colors are theme tokens (the
   Log Past form follows the theme); the lesson editor card is hardcoded light
   (#398), so its copy uses hardcoded colors like the fields around it. */
.tip-picker { margin: 0 0 8px; }
.tip-picker label { display: block; margin: 0 0 4px; font-size: 0.82rem; font-weight: 600; color: var(--text-muted); }
.tip-picker select {
  max-width: 100%; min-width: 260px; box-sizing: border-box; padding: 7px 10px;
  font: inherit; font-size: 0.9rem; color: var(--text); background: var(--white);
  border: 1px solid var(--border); border-radius: 6px;
}
.tip-picker select:disabled { opacity: 0.6; cursor: not-allowed; }
/* The Replace dialog is a native modal <dialog> wrapping the .publish-dialog card
   (same look as the approved mockup). The wrapper is transparent; the card
   keeps its white ground, so its text is pinned dark in both themes. */
dialog.tip-replace-dialog {
  width: 92vw; max-width: 520px; margin: auto; padding: 0; border: 0; background: transparent; overflow: visible;
}
dialog.tip-replace-dialog::backdrop { background: rgba(0, 0, 0, 0.4); }
dialog.tip-replace-dialog .publish-dialog { width: 100%; box-sizing: border-box; color: #1a1a1a; }
/* Both tip dialogs name a tip, whose title can be 100 characters with no
   spaces (#879 D6). Wrap it inside the card instead of overflowing. */
dialog.tip-replace-dialog .publish-dialog strong { overflow-wrap: anywhere; }
/* On Log a lesson the picker's label used to lose to the form's `.settings-field label`, which comes later in
   admin.css. This file loads after admin.css, so that outcome is written out here, unchanged. */
.note-boxes--form .tip-picker label { font-size: 0.85rem; font-weight: 600; color: var(--text); }

/* Source-credit pick refusals (#1002): plain visible text. */
.tip-picker .tip-picker-status { margin: 8px 0 0; font-size: 0.88rem; color: var(--text); }
.tip-picker .tip-picker-status:empty { display: none; }
.note-boxes--card .tip-picker .tip-picker-status { color: #1f4d33; }

/* Copy-safe hanging indent for read-only note views (spec 2026-10-14-lesson-note-skills-design.md,
   "Hanging indent (D9)"). Each line is one inline run (.nl-lead is an inline span, never a flex item), so
   copying returns the source text. --hang is the lead's measured width, set by LessonNoteSections.hang(). */
.note-text--lines .nl { padding-left: var(--hang, 0px); text-indent: calc(-1 * var(--hang, 0px)); }
.note-text--lines .nl-lead { white-space: pre; tab-size: 4; }
/* A skill title (a top-level bullet with indented points under it), bullet included. */
.note-text--lines .nl-title { font-weight: 700; }
/* The Mental Game tip title in the student's lesson history (LessonNoteSections.leadTitle). */
.mental-game-text .note-title { font-weight: 700; }

/* Lesson Note Skills: + Add item under What we worked on, and its pop-up (spec
   2026-10-14-lesson-note-skills-design.md, "Coach side: + Add item"; mockup frames 1-7). */
.skill-add-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 8px; }
.skill-add-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px;
  padding: 8px 16px; border-radius: 999px; border: 1.5px solid #2d7a3a; background: #fff; color: #1e5527;
  font: inherit; font-size: 0.92rem; font-weight: 700; cursor: pointer;
}
.skill-add-btn:hover:not(:disabled) { background: #e8f5ea; }
.skill-add-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.skill-add-msg { font-size: 0.85rem; color: #8a2a22; }
.note-boxes--form .skill-add-btn, .note-boxes--todo .skill-add-btn { background: var(--white); color: var(--green-dark); border-color: var(--green); }
.note-boxes--form .skill-add-msg, .note-boxes--todo .skill-add-msg { color: var(--emergency-accent); }

/* The pop-up: the same native modal <dialog> + .publish-dialog card as the tip Replace dialog. */
dialog.skill-picker-dialog { width: 92vw; max-width: 520px; margin: auto; padding: 0; border: 0; background: transparent; overflow: visible; }
dialog.skill-picker-dialog::backdrop { background: rgba(0, 0, 0, 0.4); }
dialog.skill-picker-dialog .publish-dialog { width: 100%; box-sizing: border-box; color: #1a1a1a; padding: 20px; }
.skill-picker-list { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 14px; }
.skill-picker-cat { margin: 12px 0 2px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #555; }
.skill-picker-item {
  display: block; width: 100%; min-height: 48px; padding: 9px 12px; text-align: left; cursor: pointer;
  font: inherit; color: #1a1a1a; background: #fff; border: 1px solid #d0e8d3; border-radius: 8px;
}
.skill-picker-item:hover, .skill-picker-item:focus-visible { background: #e8f5ea; border-color: #2d7a3a; }
.skill-picker-name { display: block; font-weight: 700; font-size: 0.95rem; }
.skill-picker-preview { display: block; margin-top: 2px; font-size: 0.82rem; color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skill-picker-own { border-style: dashed; border-color: #2d7a3a; }
.skill-picker-empty { margin: 8px 0 0; font-size: 0.85rem; color: #555; font-style: italic; }