.tt-tiptap {
    background-color: #ffffff;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
}

.tt-tiptap .tt-tiptap-toolbar {
    align-items: center;
    background-color: #ffffff;
    border-bottom: 1px solid #ced4da;
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
    gap: 2px;
    padding: 4px 8px;
}

/* Flat toolbar button, mirrors v3's TipTap toolbar look. No bootstrap btn
 * classes — those add a heavy outline / pill that doesn't match the
 * minimal v3 style. Active uses v1's brand blue (#2F72DE, same as
 * .c-btn-blue / .c-text-blue in main.css) instead of v3's teal so the
 * toolbar still feels native inside v1's blue-accented UI. */
.tt-tiptap .tt-tiptap-toolbar .tt-tt-btn {
    align-items: center;
    background-color: transparent;
    border: none;
    border-radius: 4px;
    color: #25282A;
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    height: 28px;
    justify-content: center;
    line-height: 1;
    min-width: 28px;
    padding: 2px 6px;
}

.tt-tiptap .tt-tiptap-toolbar .tt-tt-btn .fa {
    font-size: 14px;
    line-height: 1;
}

.tt-tiptap .tt-tiptap-toolbar .tt-tt-btn:hover {
    background-color: #f1f3f4;
}

.tt-tiptap .tt-tiptap-toolbar .tt-tt-btn--active,
.tt-tiptap .tt-tiptap-toolbar .tt-tt-btn--active:hover {
    background-color: #2F72DE;
    color: #ffffff;
}

.tt-tiptap .tt-tiptap-toolbar .tt-tt-btn[disabled],
.tt-tiptap .tt-tiptap-toolbar .tt-tt-btn:disabled {
    background-color: transparent;
    cursor: default;
    opacity: 0.3;
    pointer-events: none;
}

.tt-tiptap .tt-tiptap-toolbar .tt-tt-divider {
    background-color: #ced4da;
    display: inline-block;
    height: 20px;
    margin: 0 4px;
    width: 1px;
}

/* Inline link-input mode. Replaces the toolbar contents in place when the
 * user clicks the Link button, so we don't have to launch a second modal
 * via window.showModal — the global #modal element only supports one
 * modal at a time, and reusing it would close the parent edit modal the
 * editor is mounted in. Inline swap works in any mount context. */
.tt-tiptap .tt-tiptap-toolbar .tt-tt-link-row {
    align-items: center;
    display: flex;
    flex: 1;
    gap: 4px;
    min-width: 0;
}

.tt-tiptap .tt-tiptap-toolbar .tt-tt-link-input {
    background-color: #ffffff;
    border: 1px solid #ced4da;
    border-radius: 4px;
    color: #25282A;
    flex: 1;
    font-family: inherit;
    font-size: 13px;
    height: 28px;
    min-width: 0;
    outline: none;
    padding: 4px 8px;
}

.tt-tiptap .tt-tiptap-toolbar .tt-tt-link-input:focus {
    border-color: #2F72DE;
}

.tt-tiptap .tt-tiptap-toolbar .tt-tt-btn--primary,
.tt-tiptap .tt-tiptap-toolbar .tt-tt-btn--primary:hover {
    background-color: #2F72DE;
    color: #ffffff;
    padding: 2px 12px;
}

.tt-tiptap .tiptap,
.tt-tiptap .ProseMirror {
    color: #212529;
    font-size: 14px;
    line-height: 1.5;
    min-height: 150px;
    outline: none;
    padding: 0.75rem 1rem;
    overflow-y: auto;
}

.tt-tiptap .tiptap p,
.tt-tiptap .ProseMirror p {
    margin: 0 0 0.25rem;
}

.tt-tiptap .tiptap ul,
.tt-tiptap .tiptap ol,
.tt-tiptap .ProseMirror ul,
.tt-tiptap .ProseMirror ol {
    margin: 0 0 0.25rem;
    padding-left: 1.5rem;
    /* font-size: inherit forces the editor's 14px to win over parent
     * surfaces (`.todoDetails ol`, `.headlineDetails ol`) that set
     * `font-size: 12px` directly on <ol>. Without this, ordered lists
     * inside the inline editor render at 12px while paragraphs and
     * other content stay at 14px. */
    font-size: inherit;
}

/* Re-apply list markers on TipTap content. Parent surfaces like
 * `.todoDetails li` / `.headlineDetails li` set `list-style-type: none` and
 * `cursor: pointer` in the L10 page stylesheets, which cascade into the
 * inline TipTap editor and erase the bullet/number markers. We bump the
 * specificity (`.tt-tiptap .ProseMirror ul li` = 0,2,1) above those parent
 * rules (= 0,1,1) so markers render again. */
.tt-tiptap .tiptap ul li,
.tt-tiptap .ProseMirror ul li {
    list-style-type: disc;
    cursor: text;
}

.tt-tiptap .tiptap ol li,
.tt-tiptap .ProseMirror ol li {
    list-style-type: decimal;
    cursor: text;
}

.tt-tiptap .tiptap h1,
.tt-tiptap .tiptap h2,
.tt-tiptap .tiptap h3,
.tt-tiptap .ProseMirror h1,
.tt-tiptap .ProseMirror h2,
.tt-tiptap .ProseMirror h3 {
    line-height: 1.3;
    margin: 0.5rem 0 0.25rem;
}

.tt-tiptap .tiptap h1,
.tt-tiptap .ProseMirror h1 {
    font-size: 20px;
}

.tt-tiptap .tiptap h2,
.tt-tiptap .ProseMirror h2 {
    font-size: 18px;
}

.tt-tiptap .tiptap h3,
.tt-tiptap .ProseMirror h3 {
    font-size: 16px;
}

.tt-tiptap .tiptap pre,
.tt-tiptap .ProseMirror pre {
    background-color: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0.25rem;
    margin: 0 0 0.25rem;
    overflow-x: auto;
    padding: 0.75rem 1rem;
}

.tt-tiptap .tiptap pre code,
.tt-tiptap .ProseMirror pre code {
    background: none;
    border: none;
    color: inherit;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    padding: 0;
}

.tt-tiptap .tiptap code,
.tt-tiptap .ProseMirror code {
    background-color: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0.1875rem;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    padding: 0.125rem 0.25rem;
}

.tt-tiptap .tiptap a,
.tt-tiptap .ProseMirror a {
    color: #0d6efd;
    cursor: pointer;
    text-decoration: underline;
}

.tt-tiptap .tiptap blockquote,
.tt-tiptap .ProseMirror blockquote {
    border-left: 0.1875rem solid #ced4da;
    margin: 0 0 0.25rem 0;
    padding-left: 1rem;
}

.tt-tiptap .tiptap img,
.tt-tiptap .ProseMirror img {
    height: auto;
    margin: 0 0 0.25rem;
    max-width: 100%;
}

.tt-tiptap .tiptap img.ProseMirror-selectednode,
.tt-tiptap .ProseMirror img.ProseMirror-selectednode {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

.tt-tiptap .tiptap p.is-editor-empty:first-child::before,
.tt-tiptap .ProseMirror p.is-editor-empty:first-child::before {
    color: #6c757d;
    content: attr(data-placeholder);
    float: left;
    height: 0;
    pointer-events: none;
}

/* L10 inline editor surfaces (Todo / Headline / Rock): make the editor
 * fill the inline-panel height instead of capping at min-height. Scoped
 * by the three details container IDs so the modal surface (#modalBody)
 * and any other TipTap mount point stay unaffected.
 *
 * overflow: hidden enables the inherited `resize: vertical` from
 * `.<entity>Details .details` to render a working drag handle (browsers
 * suppress the handle when overflow is `visible`, which is the default).
 * Internal content scrolls inside .ProseMirror's overflow-y: auto, so
 * clipping at the host level doesn't hide editor content. */
#todoDetails .tt-tiptap-host,
#headlineDetails .tt-tiptap-host,
#rock-details .tt-tiptap-host {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: hidden;
}

#todoDetails .tt-tiptap-host .tt-tiptap,
#headlineDetails .tt-tiptap-host .tt-tiptap,
#rock-details .tt-tiptap-host .tt-tiptap {
    flex-grow: 1;
    /* min-height: 0 lets this flex item shrink below its content size so
     * .ProseMirror's overflow-y: auto can finally trigger. Default
     * min-height: auto would force the item to grow with content,
     * defeating the host's JS-set pixel height. */
    min-height: 0;
}

/* The wrapper that @tiptap/react's <EditorContent> renders between
 * .tt-tiptap and .ProseMirror needs to participate in the flex chain too,
 * otherwise it grows with content and breaks the height constraint
 * propagation. We explicitly classed it as .tt-tiptap-content. */
#todoDetails .tt-tiptap-host .tt-tiptap .tt-tiptap-content,
#headlineDetails .tt-tiptap-host .tt-tiptap .tt-tiptap-content,
#rock-details .tt-tiptap-host .tt-tiptap .tt-tiptap-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;
}

#todoDetails .tt-tiptap-host .tt-tiptap .tiptap,
#todoDetails .tt-tiptap-host .tt-tiptap .ProseMirror,
#headlineDetails .tt-tiptap-host .tt-tiptap .tiptap,
#headlineDetails .tt-tiptap-host .tt-tiptap .ProseMirror,
#rock-details .tt-tiptap-host .tt-tiptap .tiptap,
#rock-details .tt-tiptap-host .tt-tiptap .ProseMirror {
    flex-grow: 1;
    min-height: 0;
}

/* Edit-modal surface (Todo / Headline / Rock edit modals mount TipTap into
 * #modal). The etherpad iframe in this same spot gets `min-height: 168px`
 * + `resize: vertical` from main.css, so the modal stays compact. Without
 * a height bound here, .ProseMirror grows with content and pushes the
 * whole modal past the viewport. Match the etherpad behavior: fixed
 * baseline height, user-resizable, internal scrolling via the flex chain.
 *
 * Mirrors the inline-panel chain (above), but with a pixel height instead
 * of flex-grow:1 since the modal body isn't a flex container. */
#modal .tt-tiptap-host {
    display: flex;
    flex-direction: column;
    height: 250px;
    resize: vertical;
    overflow: hidden;
}

#modal .tt-tiptap-host .tt-tiptap {
    flex-grow: 1;
    min-height: 0;
}

#modal .tt-tiptap-host .tt-tiptap .tt-tiptap-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;
}

#modal .tt-tiptap-host .tt-tiptap .tiptap,
#modal .tt-tiptap-host .tt-tiptap .ProseMirror {
    flex-grow: 1;
    min-height: 0;
}