/* Copyright 2026 by David Barron. All rights reserved. Patent pending. */
/*#if (SampleContent)*/
html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

/*#endif*/
h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.status-bar-safe-area {
    display: none;
}

@supports (-webkit-touch-callout: none) {
    .status-bar-safe-area {
        display: flex;
        position: sticky;
        top: 0;
        height: env(safe-area-inset-top);
        background-color: #f7f7f7;
        width: 100%;
        z-index: 1;
    }

    .flex-column, .navbar-brand {
        padding-left: env(safe-area-inset-left);
    }
}

/* History tree (SVG node-link graph) — HistoryTreeGraph.razor. Row-per-node: each row is
   absolutely positioned; the SVG under it draws connector curves + node markers. */
.lw-tree { font-size: 0.9rem; }
.lw-tree-row { display: flex; align-items: center; }
.lw-tree-row.lw-tree-cur { background: rgba(224,168,0,0.12); border-radius: 4px; }
.lw-tree-caret { position: absolute; width: 14px; text-align: center; cursor: pointer;
                 color: #6c757d; -webkit-user-select: none; user-select: none; font-size: 0.8rem; }
/* Every row (articles too, now prunable) reserves space on the right for its delete control. */
.lw-tree-label { position: absolute; right: 50px; cursor: pointer; white-space: nowrap;
                 overflow: hidden; text-overflow: ellipsis; color: #212529;
                 text-decoration: none; }
.lw-tree-label:hover { text-decoration: underline; }
.lw-tree-q { color: #5a4b7a; }
/* Full-row-height, wide-padded hit target so the delete control is easy to tap on mobile
   (was a ~10px glyph that needed zoom + repeated taps). */
.lw-tree-x { position: absolute; right: 0; top: 0; height: 100%; display: flex; align-items: center;
             color: #adb5bd; cursor: pointer; padding: 0 11px; font-size: 1.2rem; line-height: 1;
             background: none; border: none; }
.lw-tree-x:hover { color: #dc3545; }

/* History top-sheet overlay — HistoryOverlay.razor. Fixed, semi-translucent; pane descends from
   the top on open and ascends on close (transform transition on a persistent .open-toggled node,
   so both directions animate). Does not push page content. */
.lw-hist-overlay { position: fixed; inset: 0; z-index: 1060; background: rgba(0,0,0,0);
                   pointer-events: none; transition: background 0.3s ease; }
.lw-hist-overlay.open { background: rgba(0,0,0,0.4); pointer-events: auto; }
.lw-hist-sheet { position: fixed; top: 0; left: 0; right: 0; margin: 0 auto; max-width: 760px;
                 max-height: 85vh; display: flex; flex-direction: column; overflow: hidden;
                 background: rgba(255,255,255,0.97); -webkit-backdrop-filter: blur(3px);
                 backdrop-filter: blur(3px); border-radius: 0 0 14px 14px;
                 box-shadow: 0 8px 28px rgba(0,0,0,0.28);
                 transform: translateY(-100%); transition: transform 0.32s cubic-bezier(.4,0,.2,1); }
.lw-hist-overlay.open .lw-hist-sheet { transform: translateY(0); }
.lw-hist-head { display: flex; align-items: center; justify-content: space-between;
                padding: 0.75rem 1rem; border-bottom: 1px solid #e2e2e2; }
.lw-hist-body { flex: 1 1 auto; overflow-y: auto; padding: 0.75rem 1rem; }
@media (prefers-reduced-motion: reduce) {
    .lw-hist-sheet { transition: none; }
    .lw-hist-overlay { transition: none; }
}

/* Indented-list fallback — HistoryTreeList.razor. Works under browser-default list styling with
   no SVG and (mostly) no CSS; these rules just tighten it up when CSS is available. */
.lw-treelist { list-style: none; padding-left: 1.1rem; margin: 0; }
.lw-treelist .lw-treelist { border-left: 1px solid #e2e2e2; }
.lw-treelist li { line-height: 1.7; }
.lw-treelist-caret { border: none; background: none; padding: 0; cursor: pointer;
                     color: #6c757d; font-size: 0.8rem; }
.lw-treelist-q { color: #5a4b7a; text-decoration: none; }
.lw-treelist-x { border: none; background: none; padding: 4px 10px; cursor: pointer; color: #adb5bd; font-size: 1.15rem; line-height: 1; }
.lw-treelist-x:hover { color: #dc3545; }


/* Synthesis pane — HistoryTreeContent share button. A scrollable research summary of one saved
   tree (its questions + the passage chunks its hops were drawn on) with source links and the
   share/email actions at the bottom. z-index above the history top-sheet (1060). */
.lw-synth-overlay { position: fixed; inset: 0; z-index: 1080; background: rgba(0,0,0,0.35);
                    display: flex; align-items: center; justify-content: center; }
.lw-synth-pane { background: #fff; border-radius: 10px; width: min(560px, 94vw); max-height: 86vh;
                 display: flex; flex-direction: column; box-shadow: 0 8px 28px rgba(0,0,0,0.3); }
.lw-synth-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
                 padding: 0.8rem 1.1rem; border-bottom: 1px solid #e9ecef; }
.lw-synth-body { overflow-y: auto; padding: 0.9rem 1.1rem 1.1rem; }
.lw-synth-summary { white-space: pre-wrap; line-height: 1.55; }
.lw-synth-sources { padding-left: 1.2rem; margin-bottom: 1rem; }
.lw-synth-sources li { margin-bottom: 0.45rem; }
.lw-synth-actions { margin-top: 0.5rem; }

/* 3D relationship map container — HistoryMap3D.razor / lwMap3d. Fixed height so the WebGL canvas
   has room inside the history sheet; the dark bg matches the force-graph scene. */
.lw-map3d { width: 100%; height: min(58vh, 460px); border-radius: 8px; overflow: hidden;
            background: #0b0d16; }
.lw-map3d canvas { display: block; }

/* ── UC-R4: annotations + jump/wash highlights + selection toolbar ─────────────────────── */
/* Medium-style light green for reader annotations; light yellow for shared-term wash; a
   brief pulse for the jump target. mark resets keep Wikipedia inner styling intact. */
mark.lw-ann  { background: #d3f3df; padding: 0; color: inherit; }
/* Deliberately pale: the shared-term wash should register peripherally and let the
   eye glide over it while reading, not compete with the text for attention. */
mark.lw-term { background: #fdf7cf; padding: 0; color: inherit; }
mark.lw-jump { background: #d8e7ff; padding: 0; color: inherit; animation: lw-jump-pulse 3.5s ease-out; }
@keyframes lw-jump-pulse { 0% { background: #9cc2ff; } 100% { background: #d8e7ff; } }

.lw-sel-toolbar { position: fixed; z-index: 1080; display: none; gap: 0;
    background: #222; border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,.35); overflow: hidden; }
.lw-sel-toolbar button { background: #222; color: #fff; border: 0; padding: 8px 12px;
    font-size: .82rem; cursor: pointer; white-space: nowrap; }
.lw-sel-toolbar button + button { border-left: 1px solid #444; }
.lw-sel-toolbar button:hover { background: #3a3a3a; }

.lw-sel-notebox { position: fixed; z-index: 1080; display: none; width: min(320px, 92vw);
    background: #fff; border: 1px solid #ccc; border-radius: 8px; padding: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,.25); }
.lw-sel-notebox textarea { width: 100%; border: 1px solid #ddd; border-radius: 4px;
    font-size: .85rem; padding: 6px; resize: vertical; }
.lw-sel-notebox-row { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }
.lw-sel-notebox-row button { border: 1px solid #ccc; border-radius: 4px; background: #f7f7f7;
    padding: 4px 12px; font-size: .8rem; cursor: pointer; }
.lw-sel-notebox-row button[data-act="save"] { background: #1a7f37; border-color: #1a7f37; color: #fff; }


/* ── Landing-control tooltips ──────────────────────────────────────────────────────────────
   Native title= tooltips were present in the DOM but frequently never appeared: they are
   hover-only with a ~1s delay, and any Blazor re-render patches the node and cancels the
   browser's pending timer (and touch devices have no hover at all). These are pure CSS, so
   they are immune to DOM patching, appear immediately, and also show on :focus-visible so
   keyboard and tap users get them. pointer-events:none so a tip can never eat a click. */
.lw-tip { position: relative; }
.lw-tip::after {
    content: attr(data-tip);
    position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    background: #222; color: #fff; font-size: 0.72rem; line-height: 1.25; font-style: normal;
    font-weight: 400; padding: 4px 8px; border-radius: 4px; white-space: nowrap;
    pointer-events: none; opacity: 0; transition: opacity 0.12s ease 0.04s; z-index: 1090;
    max-width: 80vw; overflow: hidden; text-overflow: ellipsis;
}
.lw-tip:hover::after { opacity: 1; }
.lw-tip:focus-visible::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .lw-tip::after { transition: none; } }