/* SourceBook – gemeinsames Rich-Text-Content-Styling.
 *
 * EINZIGE QUELLE für die Darstellung von explanatoryText/Notizen-HTML.
 * build.js kopiert diese Datei nach:
 *   - Projects/SourceBookMac/Resources/sb-content.css  (Mac: Editor + Viewer, inline injiziert)
 *   - SourceBookWeb/css/sb-content.css                 (Web-Viewer)
 * NIE die Kopien editieren – immer hier, dann `node build.js`.
 *
 * Scope: .sb-content – der Container, in dem Tiptap-HTML gerendert wird.
 * Editor-spezifische Interaktion (Placeholder, Resize-Handles) bleibt in
 * tiptap-editor.html; Web-Farbanpassungen ans dunkle Theme in style.css
 * (wird NACH dieser Datei geladen und überschreibt gezielt). */

.sb-content p          { margin-bottom: 0.75em;
                         /* Tabs sichtbar rendern (TabKey-Extension), Sprungweite 4 */
                         white-space: pre-wrap; tab-size: 4; }
.sb-content p:last-child { margin-bottom: 0; }
.sb-content h1         { font-size: 1.4em; font-weight: 700; margin-bottom: 0.5em; }
.sb-content h2         { font-size: 1.2em; font-weight: 600; margin-bottom: 0.5em; }
.sb-content h3         { font-size: 1.05em; font-weight: 600; margin-bottom: 0.4em; }
.sb-content ul,
.sb-content ol         { padding-left: 1.4em; margin-bottom: 0.75em; }
.sb-content li         { margin-bottom: 0.2em; }
.sb-content code       { font-family: 'SF Mono', Menlo, monospace; font-size: 0.88em;
                         background: rgba(0,0,0,0.06); padding: 0.1em 0.35em;
                         border-radius: 3px; }
.sb-content pre        { background: rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.08);
                         border-radius: 6px; padding: 0.75em 1em; overflow-x: auto;
                         margin-bottom: 0.75em; }
.sb-content pre code   { background: none; padding: 0; }
.sb-content strong     { font-weight: 600; }
.sb-content a          { color: #25BCB5; text-decoration: none; }
.sb-content a:hover    { text-decoration: underline; }
.sb-content blockquote { border-left: 3px solid #25BCB5; padding-left: 0.75em;
                         color: #666; margin-bottom: 0.75em; }
.sb-content hr         { border: none; border-top: 1px solid rgba(0,0,0,0.15);
                         margin: 1.2em 0; }
.sb-content img        { max-width: 100%; height: auto; display: block; margin: 0.5em 0; }

.sb-content .sb-image-wrapper     { position: relative; display: inline-block; max-width: 100%;
                                    margin: 0.5em 0; line-height: 0; }
.sb-content .sb-image-wrapper img { display: block; max-width: 100%; height: auto; margin: 0; }

/* Tabellen (Tiptap Table-Extension) */
.sb-content .tableWrapper { overflow-x: auto; margin-bottom: 0.75em; }
.sb-content table      { border-collapse: collapse; table-layout: fixed; width: 100%;
                         margin: 0; overflow: hidden; }
.sb-content th,
.sb-content td         { border: 1px solid rgba(0,0,0,0.18); padding: 0.35em 0.6em;
                         vertical-align: top; position: relative;
                         min-width: 2em; word-break: break-word; }
.sb-content th         { background: rgba(0,0,0,0.05); font-weight: 600; text-align: left; }
.sb-content table p    { margin-bottom: 0; }

/* Dokumenthintergrund (sb-doc-bg-Wrapper, Farbe kommt als Inline-Style) */
.sb-content.sb-doc-bg,
.sb-content .sb-doc-bg { padding: 12px 16px; border-radius: 8px; }

/* Zeichenfläche (sbDrawing-Node, Formen als SVG im HTML) */
.sb-content svg.sb-drawing { width: 100%; height: auto; display: block; margin: 0.5em 0;
                             border: 1px solid rgba(0,0,0,0.12); border-radius: 8px; }
.sb-content svg.sb-drawing text { font-family: -apple-system, BlinkMacSystemFont,
                                  'Helvetica Neue', sans-serif; }

.sb-content .sb-missing-media {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    background: rgba(255, 152, 0, 0.10);
    border: 1px solid rgba(255, 152, 0, 0.35);
    border-radius: 4px;
    color: #bf5800;
    font-size: 0.85em;
    margin: 0.3em 0;
}

@media (prefers-color-scheme: dark) {
    .sb-content a    { color: #6EE8E2; }
    .sb-content code { background: rgba(255,255,255,0.1); }
    .sb-content pre  { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }
    .sb-content hr   { border-top-color: rgba(255,255,255,0.18); }
    .sb-content th,
    .sb-content td   { border-color: rgba(255,255,255,0.22); }
    .sb-content th   { background: rgba(255,255,255,0.08); }
    .sb-content svg.sb-drawing { border-color: rgba(255,255,255,0.15); }
    .sb-content .sb-missing-media {
        background: rgba(255, 152, 0, 0.12);
        border-color: rgba(255, 152, 0, 0.30);
        color: #ffb74d;
    }
}