.kurs-notes { display: flex; flex-direction: column; height: min(var(--notes-available-height, 78dvh), 900px); min-height: 320px; min-width: 0; container: notes / inline-size; }
.kurs-notes, .notes-summary, .notes-popup, .notes-action-hint { font-weight: 450; }
.kurs-notes button, .notes-popup button, .notes-dialog .field-block span, .notes-dialog .voice-status { font-weight: 500; }
.kurs-notes h1, .notes-card h2, .notes-dialog h2, .notes-summary strong { font-weight: 600; }
.notes-scroll { overflow-y: auto; overscroll-behavior: contain; min-height: 0; padding: 12px; flex: 1; scrollbar-gutter: stable; }
.notes-header { padding: 12px 4px 24px; display: grid; gap: 16px; }
.notes-header h1 { font-size: clamp(24px, 3vw, 34px); margin: 0; }
.notes-header p { margin: 0; line-height: 1.5; color: var(--text-soft); }
.notes-toolbar, .notes-filters, .notes-meta { display: flex; gap: 10px; flex-wrap: wrap; }
.notes-filters [aria-pressed="true"] { background: var(--glass-strong); box-shadow: inset 0 0 0 2px var(--terracotta); }
.kurs-notes [data-list] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: stretch; }
.notes-card { position: relative; display: flex; margin: 0; padding: 16px; min-width: 0; scroll-margin: 16px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--note-tone, var(--bg)) 18%, var(--bg)); border: 1px solid color-mix(in srgb, var(--note-tone, var(--text-soft)) 45%, var(--border-soft)); color: var(--text); box-shadow: 0 5px 15px rgba(31, 26, 22, .06); }
.notes-card-content { display: flex; flex-direction: column; gap: 10px; width: 100%; min-width: 0; pointer-events: none; }
.notes-card h2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0; font-size: 1.075em; line-height: 1.4; overflow-wrap: anywhere; }
.notes-card .notes-preview { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.notes-card-date { display: flex; align-items: center; gap: 8px; min-height: 38px; padding-right: 44px; font-size: .8em; line-height: 1.5; color: var(--text-soft); overflow-wrap: anywhere; }
.notes-card .notes-meta { margin: auto 0 0; color: var(--text-soft); font-size: .8em; }
.notes-card .notes-meta:empty { display: none; }
.notes-pinned { display: inline-flex; color: var(--text); }
.notes-pinned .icon { width: 18px; height: 18px; }
.kurs-notes .notes-card-open { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; color: inherit; background: transparent; cursor: pointer; }
.notes-card-open:focus-visible { outline-offset: -4px; }
.notes-card > .notes-icon-button { position: absolute; z-index: 2; top: 8px; right: 8px; }
.notes-card[data-color="sand"], .notes-color-swatch[data-color="sand"] { --note-tone: var(--accent-2); }
.notes-card[data-color="sage"], .notes-color-swatch[data-color="sage"] { --note-tone: var(--sage); }
.notes-card[data-color="sky"], .notes-color-swatch[data-color="sky"] { --note-tone: var(--accent); }
.notes-card[data-color="lilac"], .notes-color-swatch[data-color="lilac"] { --note-tone: var(--lavender); }
@container notes (min-width: 37em) { .kurs-notes [data-list] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container notes (min-width: 56em) { .kurs-notes [data-list] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kurs-notes .notes-icon-button { display: inline-grid; place-items: center; flex: 0 0 46px; width: 46px; height: 46px; min-width: 46px; padding: 0; }
.notes-dialog .modal-actions .notes-icon-button { flex: 0 0 46px; }
.notes-icon-button .icon { width: 22px; height: 22px; pointer-events: none; }
.kurs-notes .notes-icon-button:not(.primary-button) { color: var(--text); background: var(--glass-strong); }
.notes-card-actions .notes-icon-button[aria-pressed="true"] { color: var(--terracotta); box-shadow: inset 0 0 0 2px var(--terracotta); }
.notes-icon-button:disabled { opacity: .5; cursor: not-allowed; }
.kurs-notes .notes-date-button { display: inline-flex; gap: 8px; width: auto; flex-basis: auto; padding: 0 12px; }
.notes-action-hint { z-index: 150; width: max-content; padding: 7px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--glass-strong); color: var(--text); box-shadow: var(--shadow-main); backdrop-filter: blur(20px); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; pointer-events: none; }
.notes-action-hint[hidden] { display: none; }
/* Missing shared glyphs reuse the accepted Diary outline paths. */
.kurs-notes .icon-notes-plus { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.kurs-notes .icon-notes-save { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h12l4 4v12a2 2 0 0 1-2 2ZM7 3v6h10V3M7 21v-8h10v8'/%3E%3C/svg%3E"); }
.kurs-notes .icon-notes-reset { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M3 10a9 9 0 1 1 2 8M3 4v6h6'/%3E%3C/svg%3E"); }
.kurs-notes .icon-notes-restore { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M3 10a9 9 0 1 1 2 8M3 4v6h6M12 8v5h4'/%3E%3C/svg%3E"); }
.kurs-notes .icon-notes-purge { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h18M8 6V4h8v2M19 6l-1 15H6L5 6m5 6 4 5m0-5-4 5'/%3E%3C/svg%3E"); }
.kurs-notes .icon-notes-up { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M5 4h14M12 21V9m-6 6 6-6 6 6'/%3E%3C/svg%3E"); }
.kurs-notes .icon-notes-pin { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M16 9V3H8v6l-3 3v2h14v-2ZM12 14v8'/%3E%3C/svg%3E"); }
/* Same shared outline paths, with a lighter stroke only inside Notes. */
.kurs-notes .icon-close { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E"); }
.kurs-notes .icon-arrow-left { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H5M12 19l-7-7 7-7'/%3E%3C/svg%3E"); }
.kurs-notes .icon-check { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m20 6-11 11-5-5'/%3E%3C/svg%3E"); }
.kurs-notes .icon-calendar { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M8 2v4M16 2v4M3 10h18'/%3E%3Crect width='18' height='18' x='3' y='4' rx='3'/%3E%3C/svg%3E"); }
.notes-meta { margin-top: 12px; font-size: 13px; line-height: 1.6; color: var(--text-muted); }
.notes-target { outline: 3px solid var(--text); outline-offset: 2px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--terracotta) 35%, transparent); }
.notes-footer { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 16px; min-height: 64px; border-top: 1px solid var(--border-soft); }
.notes-footer [data-status] { flex: 1; min-width: 120px; font-size: 14px; }
.notes-summary { width: 100%; text-align: left; gap: 8px; display: grid; }
.notes-summary strong, .notes-summary small { overflow-wrap: anywhere; }
.notes-summary small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
dialog.notes-dialog { position: fixed; inset: 0; margin: auto; padding: 0; border: 1px solid var(--border); width: min(720px, calc(100vw - 32px)); max-width: none; max-height: min(88dvh, 960px); color: var(--text); }
dialog.notes-dialog[open] { display: flex; flex-direction: column; }
dialog.notes-dialog:not([open]) { display: none; }
.notes-dialog::backdrop { background: rgba(13, 18, 25, .3); backdrop-filter: blur(14px); }
.notes-dialog .modal-head { gap: 16px; flex: none; }
.notes-dialog .modal-head h2 { overflow-wrap: anywhere; min-width: 0; font-size: 24px; }
.notes-dialog .modal-close { flex-shrink: 0; }
.notes-dialog .modal-body { display: grid; gap: 18px; overflow-y: auto; min-height: 0; padding: 22px; }
.notes-dialog .modal-actions { flex: none; flex-wrap: wrap; background: var(--glass-strong); padding: 16px; gap: 8px; }
.notes-dialog button, .kurs-notes button { min-height: 44px; }
.notes-dialog textarea { width: 100%; resize: vertical; min-height: 180px; }
.notes-dialog .field-block { min-width: 0; }
.notes-dialog .field-block small { line-height: 1.5; color: var(--text-muted); }
.notes-date-picker-host { display: contents; }
.notes-dialog .notes-date-picker { position: absolute; z-index: 8; width: min(360px, calc(100% - 16px)); padding: 8px; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); background: color-mix(in srgb, var(--bg) 97%, transparent); }
.notes-date-picker .birthday-date-grid > span { font-weight: 500; }
.notes-date-picker .birthday-date-grid { gap: 2px; }
.notes-date-picker .birthday-picker-head { grid-template-columns: 44px minmax(0, 1fr) 58px 44px 44px; gap: 2px; }
.notes-pin-field { display: flex; gap: 10px; align-items: center; min-height: 44px; padding: 8px 0; cursor: pointer; }
.notes-dialog .notes-pin-field input[type="checkbox"] { appearance: none; -webkit-appearance: none; display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; margin: 0; padding: 0; border: 1.5px solid var(--border-soft); border-radius: 7px; background: transparent; color: var(--text); cursor: pointer; }
.notes-pin-field input::after { content: ''; width: 18px; height: 18px; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m20 6-11 11-5-5'/%3E%3C/svg%3E") center/contain no-repeat; opacity: 0; }
.notes-pin-field input:checked::after { opacity: 1; }
.notes-pin-field input:disabled { opacity: .5; cursor: not-allowed; }
.notes-full-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; }
.kurs-notes :focus-visible, .notes-dialog :focus-visible, .notes-summary:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }
.notes-dialog input:focus, .notes-dialog textarea:focus, .kurs-notes input:focus { outline: 2px solid rgba(197, 106, 75, .7); outline-offset: 2px; border-color: var(--terracotta); box-shadow: none; }
.kurs-notes [hidden], .notes-dialog [hidden] { display: none !important; }
#notesModal .notes-host-body { padding: 0; overflow: hidden; min-height: 0; }
#notesRoot { --notes-available-height: 60dvh; min-width: 0; }
#notesModal { width: min(1120px, 100%); }
#notesRoot .notes-header > .modal-kicker, #notesRoot .notes-header > h1, #notesRoot .notes-header > p:first-of-type { display: none; }
#notesSummary, #notesSummary .thought-card { width: 100%; min-width: 0; }
.notes-voice-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; position: relative; }
.notes-voice-hint { position: absolute; z-index: 7; bottom: calc(100% + 6px); left: 0; max-width: min(280px, calc(100vw - 48px)); padding: 7px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--glass-strong); color: var(--text); box-shadow: var(--shadow-main); backdrop-filter: blur(20px); font-size: 13px; line-height: 1.4; pointer-events: none; }
.notes-dialog .notes-dictate { display: inline-grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; min-width: 44px; padding: 0; color: var(--terracotta); background: var(--glass-strong); }
.notes-dictate .icon { width: 22px; height: 22px; }
.notes-voice-tools .voice-status { flex-basis: 100%; margin: 0; line-height: 1.5; }
.notes-dialog .notes-dictate.voice-button--active { background: rgba(249, 115, 22, .16); }
.notes-dialog .notes-dictate.voice-button--recording { background: rgba(217, 107, 95, .18); }
.notes-dictate:is([data-notes-voice-state="listening"], [data-notes-voice-state="recording"]) .icon { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect x='5' y='5' width='14' height='14' rx='2'/%3E%3C/svg%3E"); }
.notes-dialog .modal-actions { justify-content: flex-end; }
.notes-popup { z-index: 160; width: 270px; padding: 6px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--bg-secondary); color: var(--text); box-shadow: var(--shadow-elevated); backdrop-filter: blur(28px); }
.notes-popup button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 10px; border: 0; border-radius: var(--radius-sm); text-align: left; color: var(--text); background: transparent; cursor: pointer; overflow-wrap: anywhere; }
.notes-popup button:is(:hover,:focus-visible) { outline: 2px solid var(--terracotta); outline-offset: -2px; background: var(--glass-strong); }
.notes-popup button:disabled { opacity: .5; cursor: not-allowed; }
.notes-popup button > span:not(.icon) { min-width: 0; }
.notes-popup .icon { flex: 0 0 22px; width: 22px; height: 22px; }
.notes-popup .icon-notes-pin { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M16 9V3H8v6l-3 3v2h14v-2ZM12 14v8'/%3E%3C/svg%3E"); }
.notes-popup .icon-notes-restore { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M3 10a9 9 0 1 1 2 8M3 4v6h6M12 8v5h4'/%3E%3C/svg%3E"); }
.notes-popup .icon-notes-purge { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h18M8 6V4h8v2M19 6l-1 15H6L5 6m5 6 4 5m0-5-4 5'/%3E%3C/svg%3E"); }
.notes-popup .icon-notes-palette { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18h1a2 2 0 0 0 1.5-3.3 1.5 1.5 0 0 1 1.1-2.5H18A4 4 0 0 0 22 11c0-5-5-8-10-8Z'/%3E%3Ccircle cx='7' cy='10' r='.5'/%3E%3Ccircle cx='10' cy='6' r='.5'/%3E%3Ccircle cx='15' cy='7' r='.5'/%3E%3C/svg%3E"); }
.notes-color-swatch { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--text-soft); background: color-mix(in srgb, var(--note-tone, var(--bg)) 28%, var(--bg)); }
.notes-color-check { margin-left: auto; font-weight: 500; }
@media (max-width: 600px) {
  .notes-scroll { padding: 6px; }
  .notes-card { padding: 16px; }
  dialog.notes-dialog { width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .notes-dialog .modal-body { padding: 16px; }
  .notes-dialog .modal-actions { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .notes-dialog .modal-actions button { flex: 1 1 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .kurs-notes *, .notes-dialog * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.notes-sync-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-block: 12px; }
.notes-sync-panel p { flex-basis: 100%; margin: 0; }
.notes-sync-panel button { min-height: 44px; }
.notes-conflict-text { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; max-width: 100%; }