/*
 * Game Notes (Phase C) - the per-coach SCRATCHPAD: an always-on, auto-saving TipTap editor docked in the
 * Film Room rail, its inline time-marker chip, and the "/" slash menu. GLOBAL stylesheet (linked after
 * pond-theme.css), Pond tokens, no glyph font. The slash menu is appended to <body>, so its rules are global.
 */

/* ---- Docked scratchpad panel (Film Room rail) ---- */
.pond-fr-notes { margin-top: 0.85rem; }
.pond-fr-notes .pond-panel-head { display: flex; align-items: center; gap: 0.5rem; }
.pond-fr-notes-status { margin-left: auto; color: var(--muted-foreground); font-size: 0.72rem; font-style: italic; }
.pond-fr-notes-body { display: flex; flex-direction: column; gap: 0.4rem; }

.pond-note-hint { margin: 0; color: var(--muted-foreground); font-size: 0.72rem; line-height: 1.4; }
.pond-note-hint kbd {
    font-family: var(--font-display, monospace); font-size: 0.7rem; padding: 0.02rem 0.3rem; border-radius: 4px;
    border: 1px solid var(--border); background: var(--surface-2); color: var(--foreground);
}

/* ---- The editor surface (ProseMirror) ---- */
.pond-note-editor .ProseMirror {
    outline: none;
    min-height: 7rem;
    max-height: 22rem;
    overflow-y: auto;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--foreground);
    font-size: 0.9rem;
    line-height: 1.5;
}
.pond-note-editor .ProseMirror:focus-within { border-color: color-mix(in oklch, var(--primary) 55%, transparent); }
.pond-note-editor .ProseMirror > * + * { margin-top: 0.45rem; }
.pond-note-editor .ProseMirror p { margin: 0; }
.pond-note-editor .ProseMirror ul,
.pond-note-editor .ProseMirror ol { padding-left: 1.15rem; margin: 0; }
.pond-note-editor .ProseMirror h2,
.pond-note-editor .ProseMirror h3 { font-family: var(--font-condensed); margin: 0; line-height: 1.2; }
.pond-note-editor .ProseMirror blockquote {
    border-left: 2px solid var(--border); padding-left: 0.6rem; color: var(--muted-foreground); margin: 0;
}
.pond-note-editor .ProseMirror hr { border: 0; border-top: 1px solid var(--border); margin: 0.5rem 0; }
.pond-note-editor .ProseMirror code {
    background: var(--surface-2); border-radius: 4px; padding: 0.05rem 0.3rem; font-size: 0.85em;
}
.pond-note-editor .ProseMirror p.is-editor-empty:first-child::before {
    content: attr(data-placeholder);
    color: var(--muted-foreground);
    float: left;
    height: 0;
    pointer-events: none;
}

/* ---- Inline time-marker chip (in the editor; click-to-seek) ---- */
.pond-note-tm {
    display: inline-flex;
    align-items: center;
    padding: 0.02rem 0.42rem;
    margin: 0 0.08rem;
    border-radius: 999px;
    background: color-mix(in oklch, var(--primary) 16%, transparent);
    border: 1px solid color-mix(in oklch, var(--primary) 42%, transparent);
    color: var(--primary);
    font-family: var(--font-display, inherit);
    font-size: 0.76rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
    white-space: nowrap;
    vertical-align: baseline;
    user-select: none;
}
.pond-note-tm:hover { background: color-mix(in oklch, var(--primary) 26%, transparent); }

/* ---- The "/" slash menu (appended to <body>) ---- */
.pond-slash-menu {
    position: fixed;
    width: 17rem;
    max-height: 20rem;
    overflow: hidden;
    background: var(--popover);
    color: var(--foreground);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 0.2rem);
    box-shadow: 0 0.9rem 2rem rgba(0, 0, 0, 0.5);
    font-size: 0.86rem;
}
.pond-slash-scroll { max-height: 20rem; overflow-y: auto; padding: 0.3rem; }
.pond-slash-empty { color: var(--muted-foreground); font-size: 0.82rem; padding: 0.6rem 0.7rem; margin: 0; }
.pond-slash-group + .pond-slash-group { margin-top: 0.2rem; }
.pond-slash-section {
    margin: 0.25rem 0.5rem 0.15rem; color: var(--muted-foreground); font-family: var(--font-condensed);
    text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.64rem; font-weight: 700;
}
.pond-slash-item {
    display: flex; flex-direction: column; gap: 0.05rem; width: 100%; text-align: left;
    border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer;
    padding: 0.35rem 0.5rem; border-radius: var(--radius);
}
.pond-slash-item:hover, .pond-slash-item.is-active { background: color-mix(in oklch, var(--primary) 14%, transparent); }
.pond-slash-item__label { font-size: 0.85rem; font-weight: 600; }
.pond-slash-item__hint { font-size: 0.72rem; color: var(--muted-foreground); }