/* Architext: Nocturnal Chameleon Theme */

html, body {
    height: 100%;
    margin: 0;
    font-family: var(--font-ui);
    background-color: var(--bg);
    color: var(--ink);
    overflow: hidden;
}

/* Responsive pane widths. On a wide monitor everything sits at its full size.
   As the viewport tightens, the give order is intentional: first the manuscript
   side gutters collapse (see the responsive padding in the editor surfaces), and
   only once they bottom out does the right pane start to narrow. Both stages are
   tuned to the same hinge — the workspace width at which the manuscript gutters
   hit their 24px floor: an 816px text column + 2*24px margin + 2px border = 866px,
   plus the 320px navigator = 1186px subtracted from the viewport — so the pane
   only shrinks after the gutters have nothing left to give. The pane stops at a
   still-usable floor (inspector 360, chat 440); below that the manuscript itself
   finally yields.

   --workspace-screen-offset is half the imbalance between the right pane and the
   navigator. Screen-relative centered surfaces (assembled view, book matter) add
   it to their left margin so the sheet sits at the viewport center rather than
   the workspace-pane center. It is derived from --inspector-width so centering
   stays correct as the pane flexes.
     Default: inspector 440, nav 320 → (440 - 320) / 2 = 60px.
     Chat:    inspector 640          → (640 - 320) / 2 = 160px.
     Hidden:  inspector 0            → (0   - 320) / 2 = -160px. */
:root {
    --nav-width: 320px;
    --inspector-width: clamp(360px, calc(100vw - 1186px), 440px);
    --workspace-screen-offset: calc((var(--inspector-width) - var(--nav-width)) / 2);
}

html:has(.pane-inspector--chat) {
    --inspector-width: clamp(440px, calc(100vw - 1186px), 640px);
}

html:has(.pane-inspector--hidden) {
    --inspector-width: 0px;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: var(--accent-hover);
}

.btn-primary {
    color: #fff;
    background-color: var(--accent);
    border-color: var(--accent);
    border-radius: var(--r);
}

.btn-primary:hover {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--bg), 0 0 0 0.25rem var(--accent-hover);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--status-success);
}

.invalid {
    outline: 1px solid var(--status-error);
}

.validation-message {
    color: var(--status-error);
}

/* ---- Find-match highlight classes (global — used by TipTap editor AND BoardNodeReplaceDialog) ---- */

.find-match {
    background-color: var(--color-find-match);
    color: inherit;
    border-radius: 2px;
}


.find-match--active {
    background-color: var(--color-find-match-active);
    color: inherit;
    outline: 1px solid var(--accent);
    outline-offset: 1px;
    border-radius: 2px;
}

/* ---- Entity mention highlight classes (global — rendered inside ProseMirror DOM) ---- */

/* Subtle: faint 1px dotted underline — near-invisible at reading distance */
.entity-mention-subtle {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: var(--mention-subtle-underline, var(--ink3));
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    cursor: pointer;
}

/* Vivid: bold weight + HSL tint from the entity's stable hue.
   --mention-hue is set inline per span by the JS plugin.
   --mention-vivid-lightness is defined per theme (dark themes: 35%, light themes: 40%). */
.entity-mention-vivid {
    font-weight: 700;
    color: hsl(var(--mention-hue, 200) 50% var(--mention-vivid-lightness, 38%));
    cursor: pointer;
}

/* ---- Inspector action buttons (shared across all inspectors) ---- */

.btn-action {
    width: 100%;
    padding: 10px 16px;
    background: var(--accent);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 150ms ease-in-out;
    box-sizing: border-box;
}

.btn-action:hover:not(:disabled) {
    background: var(--accent-hover);
}

.btn-action:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-danger {
    width: 100%;
    padding: 10px 16px;
    background: transparent;
    border: 1px solid var(--status-error);
    border-radius: 6px;
    color: var(--status-error);
    font-family: var(--font-ui);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 150ms ease-in-out;
    box-sizing: border-box;
}

.btn-danger:hover:not(:disabled) {
    background-color: rgba(229, 57, 53, 0.1);
}

.btn-danger:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-action-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: btn-action-spin 0.6s linear infinite;
}

@keyframes btn-action-spin {
    to { transform: rotate(360deg); }
}

.btn-secondary {
    padding: 10px 16px;
    background: transparent;
    border: 1px solid var(--accent);
    border-radius: 6px;
    color: var(--accent);
    font-family: var(--font-ui);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 150ms ease-in-out, color 150ms ease-in-out;
    box-sizing: border-box;
}

.btn-secondary:hover:not(:disabled) {
    background: var(--accent-lt);
    color: var(--accent-hover);
}

.btn-secondary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-ghost {
    background: transparent;
    border: none;
    color: var(--ink2);
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 0;
    transition: color 150ms ease-in-out;
}

.btn-ghost:hover {
    color: var(--accent);
}

.spinner-sm {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: btn-action-spin 0.6s linear infinite;
}

/* ---- Dialog / modal buttons (shared across all dialogs and modals) ----
   Canonical, auto-width footer buttons. Distinct from the full-width inspector
   .btn-action family above. Every dialog primary/cancel/destructive action
   button uses these — do not redefine them in component-scoped CSS. */

.btn-confirm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0.6rem 1.25rem;
    background: var(--accent);
    color: var(--accent-text);
    border: none;
    border-radius: var(--r);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    min-width: 90px;
    min-height: 38px;
    transition: background 150ms ease-in-out, opacity 150ms ease-in-out;
}

.btn-confirm:hover:not(:disabled) {
    background: var(--accent-hover);
}

.btn-confirm:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0.6rem 1.25rem;
    background: transparent;
    color: var(--ink2);
    border: 1px solid var(--border);
    border-radius: var(--r);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    min-height: 38px;
    transition: color 150ms ease-in-out, border-color 150ms ease-in-out, background 150ms ease-in-out;
}

.btn-cancel:hover:not(:disabled) {
    color: var(--ink);
    border-color: var(--border2);
    background: var(--bg3);
}

.btn-cancel:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0.6rem 1.25rem;
    background: var(--status-error);
    color: #ffffff;
    border: none;
    border-radius: var(--r);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    min-width: 90px;
    min-height: 38px;
    transition: background 150ms ease-in-out, opacity 150ms ease-in-out;
}

.btn-delete:hover:not(:disabled) {
    background: color-mix(in srgb, var(--status-error) 85%, black);
}

.btn-delete:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid color-mix(in srgb, var(--accent-text) 30%, transparent);
    border-top-color: var(--accent-text);
    border-radius: 50%;
    animation: btn-spin 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

.not-found {
    text-align: center;
    padding: 48px;
}

.not-found h1 {
    color: var(--ink);
}

.not-found p {
    color: var(--ink2);
}

/* Error UI */
#blazor-error-ui {
    background: color-mix(in srgb, var(--status-error) 20%, var(--bg2));
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: var(--ink);
}

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

.blazor-error-boundary {
    background: var(--status-error);
    padding: 1rem;
    color: white;
}

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

/* Pre-Blazor splash — matches .session-loading in MainLayout so the boot text
   doesn't visibly shift size/position when MainLayout takes over rendering. */
.loading-progress-text {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    font-size: 1rem;
    color: var(--ink2);
    background-color: var(--bg);
}

.loading-progress-text:after {
    content: "Loading…";
}

code {
    color: var(--ink3);
}

/* TipTap / ProseMirror — remove browser focus outline */
.ProseMirror,
.ProseMirror:focus,
.ProseMirror:active,
.ProseMirror:focus-visible {
    outline: none !important;
    outline-width: 0 !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
}

.ProseMirror p {
    line-height: var(--editor-line-height, 1.6);
}

.ProseMirror .auto-number-marker {
    color: var(--accent-hover);
}

/* TipTap table styles */
.ProseMirror table {
    border-collapse: collapse;
    width: 100%;
    margin: 1em 0;
}

.ProseMirror th,
.ProseMirror td {
    border: 1px solid var(--border);
    padding: 0.5em 0.75em;
    text-align: left;
}

.ProseMirror th {
    background-color: var(--bg3);
    font-weight: 600;
}

.ProseMirror tr:hover td {
    background-color: var(--bg2);
}

/* Assembled view — dynamically injected MarkupString content */
.assembled-content h1,
.assembled-content h2,
.assembled-content h3,
.assembled-content h4,
.assembled-content h5,
.assembled-content h6 {
    text-indent: 0;
    text-align: var(--heading-align, left);
    line-height: 1.3;
    margin: 1.2em 0 0.4em;
}

.assembled-content h1 { font-size: 1.5em; font-weight: 700; }
.assembled-content h2 { font-size: 1.3em; font-weight: 700; color: var(--accent); }
.assembled-content h3 { font-size: 1.15em; font-weight: 600; }
.assembled-content h4 { font-size: 1em; font-weight: 600; color: var(--ink2); }
.assembled-content h5 { font-size: 0.9em; font-weight: 600; color: var(--ink2); }
.assembled-content h6 { font-size: 0.85em; font-weight: 600; color: var(--ink3); }

.assembled-content p {
    margin: 0 0 var(--content-paragraph-gap, 1em);
}

.assembled-content ul,
.assembled-content ol {
    margin: 0.2em 0 var(--content-paragraph-gap, 1em);
    padding-left: 1.5em;
    text-indent: 0;
    text-align: left;
}

.assembled-content li {
    margin-bottom: 0.15em;
    line-height: 1.5;
}

.assembled-content li > ul,
.assembled-content li > ol {
    margin-top: 0.15em;
    margin-bottom: 0.15em;
}

.assembled-content strong {
    font-weight: 700;
}

.assembled-content em {
    font-style: italic;
    color: var(--ink2);
}

.assembled-content code {
    color: var(--ink3);
    background-color: rgba(255, 255, 255, 0.05);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 0.9em;
}

.assembled-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5em 0 var(--content-paragraph-gap, 1em);
    text-indent: 0;
    text-align: left;
    font-size: 0.95em;
}

.assembled-content th,
.assembled-content td {
    padding: 0.4em 0.75em;
    border: 1px solid var(--border);
    vertical-align: top;
    line-height: 1.4;
}

.assembled-content th {
    background-color: var(--bg2);
    font-weight: 600;
    color: var(--ink);
}

.assembled-content tr:hover td {
    background-color: var(--bg2);
}

/* Form inputs */
.form-control {
    background-color: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--ink);
}

.form-control:focus {
    background-color: var(--bg3);
    border-color: var(--accent);
    color: var(--ink);
}

/* ============================================================
   Book Matter Inspector — shared styles used across all
   per-type inspector components (Blazor scoped CSS cannot
   cross component boundaries, so these live in app.css).
   ============================================================ */

.bm-inspector {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 8px 0;
}

.bm-inspector-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 16px;
}

.bm-inspector-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ink2);
    margin: 0;
}

.bm-inspector-input {
    background-color: var(--bg);
    border: 1px solid var(--border2);
    border-radius: var(--r);
    color: var(--ink);
    font-size: 0.9rem;
    padding: 7px 10px;
    width: 100%;
    box-sizing: border-box;
    font-family: var(--font-ui);
    transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out, background-color 150ms ease-in-out;
}

.bm-inspector-input:hover {
    border-color: var(--ink3);
}

.bm-inspector-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-lt);
    background-color: var(--bg);
}

.bm-inspector-input::placeholder {
    color: var(--ink3);
}

.bm-inspector-textarea {
    background-color: var(--bg);
    border: 1px solid var(--border2);
    border-radius: var(--r);
    color: var(--ink);
    font-size: 0.9rem;
    padding: 7px 10px;
    width: 100%;
    box-sizing: border-box;
    font-family: var(--font-ui);
    resize: vertical;
    min-height: 80px;
    transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out, background-color 150ms ease-in-out;
}

.bm-inspector-textarea:hover {
    border-color: var(--ink3);
}

.bm-inspector-textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-lt);
    background-color: var(--bg);
}

.bm-inspector-textarea::placeholder {
    color: var(--ink3);
}

.bm-inspector-help {
    font-size: 0.8rem;
    color: var(--ink2);
    margin: 0;
    line-height: 1.4;
}

/* Also By inspector entry rows */
.bm-also-by-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bm-also-by-entry {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bm-also-by-entry-title {
    flex: 1;
}

.bm-also-by-entry-year {
    width: 72px;
    flex-shrink: 0;
}

.bm-also-by-delete-btn {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--ink3);
    display: flex;
    align-items: center;
    border-radius: var(--r);
    transition: color 150ms ease-in-out;
    flex-shrink: 0;
}

.bm-also-by-delete-btn:hover {
    color: var(--status-error);
}

.bm-add-btn {
    background: none;
    border: 1px dashed var(--border2);
    border-radius: var(--r);
    color: var(--ink2);
    font-size: 0.85rem;
    padding: 6px 12px;
    cursor: pointer;
    width: 100%;
    text-align: center;
    transition: border-color 150ms ease-in-out, color 150ms ease-in-out;
    font-family: var(--font-ui);
    margin-top: 4px;
}

.bm-add-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* -----------------------------------------------------------------------
   Welcome Tour — coachmark ring
   Applied by coachmark.js to the targeted element in MainLayout. Must live
   in app.css (not scoped CSS) because the target is outside WelcomeTour's
   component scope and scoped rules never cross component boundaries.
   ----------------------------------------------------------------------- */
.tour-target--active {
    outline: 2.5px solid var(--accent);
    outline-offset: 3px;
    border-radius: var(--r-md);
    transition: outline-color 150ms ease;
}