/* ============================================================================
   admin-documents.css — Document Library admin surfaces

   Extends the editorial vocabulary already established in crm-design.css and
   the per-page paea- styles in EulaVersions.razor. Class prefix: doclib-.

   Surfaces covered:
     1. /admin/documents                         — Document list (Index)
     2. /admin/documents/{Key}                   — Version timeline (Detail)
     3. /admin/documents/{Key}/versions/{Id}/edit — Editor split-pane
     4. /admin/documents/{Key}/diff?from=&to=    — Side-by-side diff

   Tokens reused from crm-design.css:
     --ink, --paper, --paper-sunk, --paper-raised, --rule, --rule-soft
     --neutral-50..900
     --indigo-600, --indigo-700, --indigo-50, --indigo-100
     --coral-700, --coral-50
     --mint-600, --mint-700, --mint-50
     --amber-700, --amber-50
     --font-display, --font-body, --font-mono
     --ease-out, --t-fast, --t-med, --t-slow

   New tokens introduced (scoped to .doclib-*):
     --doclib-pill-draft-bg / --doclib-pill-draft-fg
     --doclib-pill-published-bg / --doclib-pill-published-fg
     --doclib-pill-current-bg / --doclib-pill-current-fg
     --doclib-pill-archived-bg / --doclib-pill-archived-fg
     --doclib-rail            (timeline rail color)
     --doclib-rail-bullet     (timeline bullet ring)
   ============================================================================ */

.doclib-page {
    /* ── Editorial design tokens ──────────────────────────────────────────
       crm-design.css scopes these on .crm-layout, which doesn't wrap admin
       pages. Redeclare them here so .doclib-page is self-contained. Keep
       them in lockstep with crm-design.css values; this is intentional
       duplication, not drift. */
    --ink:           #0B0D12;
    --paper:         #FAF8F4;
    --paper-sunk:    #F3EFE7;
    --paper-raised:  #FFFDF8;
    --rule:          #E8E4DC;
    --rule-soft:     #EFEBE3;

    --neutral-50:    #F6F2EA;
    --neutral-100:   #EBE6DC;
    --neutral-200:   #DCD6C8;
    --neutral-300:   #B3AC9A;
    --neutral-400:   #958E7E;
    --neutral-500:   #645E50;
    --neutral-600:   #4E4A3D;
    --neutral-700:   #3A362C;
    --neutral-800:   #2A2822;
    --neutral-900:   #15140F;

    --indigo-600:    #4F46E5;
    --indigo-700:    #3730A3;
    --indigo-50:     rgba(79, 70, 229, 0.08);
    --indigo-100:    rgba(79, 70, 229, 0.14);

    --amber-700:     #9A3412;
    --amber-50:      rgba(194, 65, 12, 0.08);

    --mint-600:      #059669;
    --mint-700:      #065F46;
    --mint-50:       rgba(5, 150, 105, 0.08);

    --coral-700:     #991B1B;
    --coral-50:      rgba(185, 28, 28, 0.08);

    --font-display:  Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body:     Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:     Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --ease-out:      cubic-bezier(0.2, 0.8, 0.2, 1);
    --t-fast:        160ms;
    --t-med:         240ms;
    --t-slow:        320ms;

    /* ── Status pill palette ── */
    --doclib-pill-draft-bg:      var(--neutral-100);
    --doclib-pill-draft-fg:      var(--neutral-700);
    --doclib-pill-published-bg:  rgba(11, 13, 18, 0.86);
    --doclib-pill-published-fg:  #FCFBF8;
    --doclib-pill-current-bg:    var(--indigo-50);
    --doclib-pill-current-fg:    var(--indigo-700);
    --doclib-pill-archived-bg:   var(--neutral-50);
    --doclib-pill-archived-fg:   var(--neutral-400);

    --doclib-rail:               var(--rule);
    --doclib-rail-bullet:        var(--paper-raised);

    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    min-height: calc(100vh - 4rem);
    padding: 2.25rem 2.5rem 4rem;
}

/* Body font cascades to all descendants — the * selector in MudBlazor's
   reset zeroes border + padding on every element, including ours, so we
   restore the typographic defaults explicitly inside .doclib-page. */
.doclib-page * {
    font-family: inherit;
}

/* ─── Page chrome ──────────────────────────────────────────────────────────
   Same masthead vocabulary as the CRM/admin pages: eyebrow + title with an
   italic continuation phrase + subtext. Restrained, editorial.
   ────────────────────────────────────────────────────────────────────────── */

.doclib-masthead {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    padding-bottom: 1.5rem;
}

.doclib-masthead__lead {
    max-width: 56ch;
    min-width: 0;
}

.doclib-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--neutral-500);
    margin-bottom: 0.5rem;
}

.doclib-title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 2.6vw, 2.25rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.018em;
    color: var(--ink);
    margin: 0 0 0.625rem;
}

.doclib-title__addendum {
    font-style: italic;
    font-weight: 400;
    color: var(--neutral-500);
}

.doclib-subtext {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--neutral-700);
    margin: 0;
}

.doclib-masthead__actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.doclib-rule {
    height: 1px;
    background: var(--rule);
    margin: 0 0 2rem;
}

/* ─── Buttons ──────────────────────────────────────────────────────────────
   Three flavors: primary (filled near-black), ghost (hairline), danger
   (coral hairline). All quiet. None shouty.
   ────────────────────────────────────────────────────────────────────────── */

.doclib-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    height: 2.25rem;
    padding: 0 0.875rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.005em;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--t-fast) var(--ease-out),
                border-color var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out);
}

.doclib-btn svg { width: 14px; height: 14px; }

.doclib-btn--primary {
    background: var(--ink);
    color: var(--paper-raised);
    border-color: var(--ink);
}

.doclib-btn--primary:hover {
    background: var(--neutral-800);
    border-color: var(--neutral-800);
}

.doclib-btn--ghost {
    border-color: var(--rule);
    color: var(--neutral-700);
}

.doclib-btn--ghost:hover {
    border-color: var(--neutral-300);
    color: var(--ink);
    background: var(--paper-raised);
}

.doclib-btn--danger {
    color: var(--coral-700);
    border-color: rgba(153, 27, 27, 0.22);
}

.doclib-btn--danger:hover {
    background: var(--coral-50);
    border-color: var(--coral-700);
}

.doclib-btn--small { height: 1.875rem; padding: 0 0.625rem; font-size: 0.8125rem; }

.doclib-btn[disabled],
.doclib-btn[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* ─── Status pills ─────────────────────────────────────────────────────────
   Semantic <span class="doclib-pill doclib-pill--current">Current</span>.
   Never use MudChip — these stay close to the row's typographic rhythm.
   ────────────────────────────────────────────────────────────────────────── */

.doclib-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.1875rem 0.5rem;
    background: var(--neutral-100);
    color: var(--neutral-700);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 3px;
    line-height: 1.15;
}

.doclib-pill--draft     { background: var(--doclib-pill-draft-bg);     color: var(--doclib-pill-draft-fg); }
.doclib-pill--published { background: var(--doclib-pill-published-bg); color: var(--doclib-pill-published-fg); }
.doclib-pill--current   { background: var(--doclib-pill-current-bg);   color: var(--doclib-pill-current-fg); }
.doclib-pill--archived  { background: var(--doclib-pill-archived-bg);  color: var(--doclib-pill-archived-fg); }

.doclib-pill-group {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    flex-wrap: wrap;
}

/* ─── Loading + empty states ───────────────────────────────────────────────
   Quiet, in-place loaders. No skeletons. Real content arrives fast.
   ────────────────────────────────────────────────────────────────────────── */

.doclib-loading {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 1.25rem 0;
    font-size: 0.875rem;
    color: var(--neutral-500);
}

.doclib-spinner {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--rule);
    border-top-color: var(--ink);
    animation: doclib-spin 720ms linear infinite;
}

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

.doclib-empty {
    border: 1px dashed var(--rule);
    border-radius: 10px;
    padding: 3rem 2rem;
    text-align: center;
    color: var(--neutral-500);
    background: var(--paper-raised);
}

.doclib-empty svg {
    width: 32px;
    height: 32px;
    color: var(--neutral-400);
    margin-bottom: 0.875rem;
}

.doclib-empty__title {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 0.375rem;
}

.doclib-empty__text {
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

/* ============================================================================
   SURFACE 1 — /admin/documents (Index)
   List of all legal documents. Each row is an editorial entry: doc name,
   description, current version label, modified-by, modified-at, status pill.
   ============================================================================ */

.doclib-list {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.doclib-list__item {
    display: block;  /* the <a class="doclib-row"> child paints the row chrome */
}

.doclib-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr) auto;
    gap: 1.75rem;
    align-items: center;
    padding: 1.25rem 1.5rem;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 10px;
    text-decoration: none;
    color: var(--ink);
    cursor: pointer;
    transition: border-color var(--t-fast) var(--ease-out),
                box-shadow var(--t-med) var(--ease-out),
                transform var(--t-fast) var(--ease-out);
}

.doclib-row:hover {
    border-color: var(--neutral-300);
    box-shadow: 0 6px 22px -12px rgba(11, 13, 18, 0.10);
    transform: translateY(-1px);
}

.doclib-row__lead { min-width: 0; }

.doclib-row__name {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
    margin-bottom: 0.25rem;
}

.doclib-row__key {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--neutral-500);
    margin-bottom: 0.5rem;
}

.doclib-row__description {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--neutral-700);
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.doclib-row__meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--neutral-500);
}

.doclib-row__meta-item {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4375rem;
}

.doclib-row__meta-label {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--neutral-500);
}

.doclib-row__meta-value {
    color: var(--ink);
    font-weight: 500;
}

.doclib-row__meta-value--mono { font-family: var(--font-mono); font-weight: 500; }

.doclib-row__trailing {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    flex-shrink: 0;
}

.doclib-row__chevron {
    color: var(--neutral-400);
    width: 16px;
    height: 16px;
    transition: transform var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}

.doclib-row:hover .doclib-row__chevron {
    color: var(--ink);
    transform: translateX(2px);
}

/* ============================================================================
   SURFACE 2 — /admin/documents/{Key} (Detail)
   Spotlight for the current published version, then a semantic <ol> timeline
   of every version. NEVER MudTimeline.
   ============================================================================ */

/* ── Spotlight (current version) ── */

.doclib-spotlight {
    display: grid;
    grid-template-columns: 4px 1fr auto;
    gap: 1.5rem;
    padding: 1.625rem 1.75rem;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 12px;
    margin-bottom: 2rem;
}

.doclib-spotlight__bar {
    background: var(--ink);
    border-radius: 2px;
}

.doclib-spotlight__body { min-width: 0; }

.doclib-spotlight__badge {
    display: inline-block;
    background: var(--indigo-50);
    color: var(--indigo-700);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.1875rem 0.5rem;
    border-radius: 3px;
    margin-bottom: 0.625rem;
}

.doclib-spotlight__version {
    font-family: var(--font-mono);
    font-size: 1.875rem;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.018em;
    line-height: 1;
    margin-bottom: 0.375rem;
}

.doclib-spotlight__title {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 0.4375rem;
}

.doclib-spotlight__summary {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--neutral-700);
    margin: 0 0 0.875rem;
}

.doclib-spotlight__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    font-size: 0.8125rem;
    color: var(--neutral-500);
}

.doclib-spotlight__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
}

.doclib-spotlight__meta-item strong {
    color: var(--ink);
    font-weight: 600;
}

.doclib-spotlight__cta {
    align-self: flex-start;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4375rem;
}

/* ── Section header (above timeline) ── */

.doclib-section-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 1rem;
}

.doclib-section-label {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--neutral-500);
}

.doclib-section-count {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--neutral-400);
}

/* ── Timeline (semantic <ol>) ──
   The rail is a 1px line in front of each entry. Bullet is a 9px disc with
   white ring so it punches through the rail. Each entry collapses cleanly on
   mobile (rail moves to inline-start at 0, then content stacks).
*/

.doclib-timeline {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0 0 0 1.25rem;
}

.doclib-timeline::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0.625rem;
    bottom: 0.625rem;
    width: 1px;
    background: var(--doclib-rail);
}

.doclib-timeline__entry {
    position: relative;
    padding: 0.875rem 0 0.875rem 1.5rem;
    border-bottom: 1px solid var(--rule-soft);
}

.doclib-timeline__entry:last-child { border-bottom: 0; }

.doclib-timeline__entry::before {
    content: '';
    position: absolute;
    inset-inline-start: -0.3125rem;
    top: 1.5rem;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ink);
    box-shadow: 0 0 0 3px var(--doclib-rail-bullet);
}

.doclib-timeline__entry--draft::before    { background: var(--neutral-400); }
.doclib-timeline__entry--archived::before { background: var(--neutral-300); }
.doclib-timeline__entry--current::before  { background: var(--indigo-600); }

.doclib-timeline__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 0.875rem;
    margin-bottom: 0.4375rem;
}

.doclib-timeline__version {
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.005em;
}

.doclib-timeline__title {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--ink);
    flex: 1;
    min-width: 0;
}

.doclib-timeline__summary {
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--neutral-700);
    margin: 0 0 0.5rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.doclib-timeline__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 0.75rem;
    font-size: 0.75rem;
    color: var(--neutral-500);
    margin-bottom: 0.5rem;
}

.doclib-timeline__meta-item { display: inline-flex; align-items: baseline; gap: 0.3125rem; }
.doclib-timeline__meta-item strong { color: var(--ink); font-weight: 500; }

.doclib-timeline__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.5rem;
}

/* ============================================================================
   SURFACE 3 — /admin/documents/{Key}/versions/{Id}/edit (Editor)
   Two-pane layout. Left: section chips + Quill toolbar + Quill editor. Right:
   merge field palette (top) + live preview (bottom).
   ============================================================================ */

.doclib-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 1.5rem;
    align-items: start;
    min-height: calc(100vh - 16rem);
}

@media (max-width: 1100px) {
    .doclib-editor {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── Editor main pane ── */

.doclib-editor__main {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    min-width: 0;
}

.doclib-editor__pane {
    background: var(--paper-raised);
    border: 1px solid var(--neutral-200);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(11, 13, 18, 0.04);
    overflow: hidden;
}

.doclib-editor__pane-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--neutral-200);
    background: var(--paper-sunk);
}

.doclib-editor__pane-title {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--neutral-500);
    font-weight: 500;
}

.doclib-editor__pane-meta {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--neutral-400);
}

/* Section chip selector — semantic <button> list, never MudTabs. */
.doclib-editor__sections {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4375rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--neutral-200);
    background: var(--paper-sunk);
}

.doclib-editor__chip {
    appearance: none;
    border: 1px solid var(--neutral-200);
    border-radius: 999px;
    background: var(--paper-raised);
    color: var(--neutral-700);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    padding: 0.375rem 0.8125rem;
    cursor: pointer;
    transition: border-color var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out),
                background var(--t-fast) var(--ease-out),
                box-shadow var(--t-fast) var(--ease-out);
}

.doclib-editor__chip:hover {
    border-color: var(--neutral-400);
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(11, 13, 18, 0.06);
}

.doclib-editor__chip[aria-pressed="true"],
.doclib-editor__chip.is-active {
    background: var(--ink);
    color: var(--paper-raised);
    border-color: var(--ink);
}

.doclib-editor__chip-dirty::after {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-inline-start: 0.4375rem;
    border-radius: 50%;
    background: var(--amber-700);
    vertical-align: 0.0625rem;
}

/* Quill (Blazored.TextEditor) host. The library renders .ql-toolbar +
   .ql-container; we restyle them to fit warm paper. */

.doclib-editor__quill {
    min-height: 480px;
    display: flex;
    flex-direction: column;
}

.doclib-editor__quill .ql-toolbar.ql-snow {
    border: 0;
    border-bottom: 1px solid var(--neutral-200);
    background: var(--paper-raised);
    padding: 0.625rem 0.875rem;
    font-family: var(--font-body);
}

/* Stroke + fill overrides — only target Quill's icon paths, leave fills that
   should be transparent (fill: none) alone via the :not() guard. */
.doclib-editor__quill .ql-toolbar.ql-snow .ql-stroke,
.doclib-editor__quill .ql-toolbar.ql-snow .ql-stroke-miter {
    stroke: var(--neutral-700);
}
.doclib-editor__quill .ql-toolbar.ql-snow .ql-fill:not([fill="none"]) {
    fill: var(--neutral-700);
}
.doclib-editor__quill .ql-toolbar.ql-snow button {
    height: 28px;
    width: 28px;
    padding: 4px;
}
.doclib-editor__quill .ql-toolbar.ql-snow button:hover,
.doclib-editor__quill .ql-toolbar.ql-snow button.ql-active {
    background: var(--paper-sunk);
    border-radius: 4px;
}
.doclib-editor__quill .ql-toolbar.ql-snow button:hover .ql-stroke,
.doclib-editor__quill .ql-toolbar.ql-snow button.ql-active .ql-stroke {
    stroke: var(--ink);
}
.doclib-editor__quill .ql-toolbar.ql-snow button:hover .ql-fill:not([fill="none"]),
.doclib-editor__quill .ql-toolbar.ql-snow button.ql-active .ql-fill:not([fill="none"]) {
    fill: var(--ink);
}
.doclib-editor__quill .ql-toolbar.ql-snow .ql-picker-label {
    color: var(--neutral-700);
}

.doclib-editor__quill .ql-container.ql-snow {
    border: 0;
    background: var(--paper-raised);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ink);
    min-height: 420px;
    flex: 1;
}

.doclib-editor__quill .ql-editor {
    padding: 1.5rem 1.75rem 2.25rem;
    min-height: 420px;
}

.doclib-editor__quill .ql-editor h1,
.doclib-editor__quill .ql-editor h2,
.doclib-editor__quill .ql-editor h3 {
    font-family: var(--font-display);
    color: var(--ink);
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* ── Editor side rail (palette + preview stack) ── */

.doclib-editor__side {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0.875rem;
    position: sticky;
    top: 1.5rem;
    align-self: start;
    max-height: calc(100vh - 4rem);
}

/* Merge palette — list of insertable {{tags}} */

.doclib-merge-palette {
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 10px;
    overflow: hidden;
}

.doclib-merge-palette__head {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--rule);
    background: var(--paper-sunk);
}

.doclib-merge-palette__title {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--neutral-500);
    font-weight: 500;
    margin-bottom: 0.1875rem;
}

.doclib-merge-palette__caption {
    font-size: 0.75rem;
    color: var(--neutral-500);
    line-height: 1.4;
    margin: 0;
}

.doclib-merge-palette__add {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.625rem;
    padding: 0.4rem 0.7rem;
    background: transparent;
    border: 1px dashed var(--rule);
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease-out),
                border-color var(--t-fast) var(--ease-out);
}

.doclib-merge-palette__add:hover {
    background: var(--paper-raised);
    border-color: var(--ink);
}

.doclib-merge-palette__add svg {
    width: 14px;
    height: 14px;
}

/* Head-action row holds the Add + Scan buttons on a single line. */
.doclib-merge-palette__head-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.625rem;
}

.doclib-merge-palette__head-actions .doclib-merge-palette__add {
    margin-top: 0;            /* row supplies the spacing now */
}

/* Scan-body shares visual weight with Add but uses a brand-teal hint so
   it reads as the "discovery" affordance, not a primary CTA. */
.doclib-merge-palette__scan {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.7rem;
    background: transparent;
    border: 1px dashed rgba(0, 166, 156, 0.55);
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    color: #006d66;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease-out),
                border-color var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out);
}

.doclib-merge-palette__scan:hover {
    background: rgba(0, 166, 156, 0.08);
    border-color: #00A69C;
    color: #004D49;
}

.doclib-merge-palette__scan svg {
    width: 14px;
    height: 14px;
}

/* ── Scan dialog ────────────────────────────────────────────────────────── */

.doclib-merge-scan__lede {
    margin: 0 0 1rem;
    color: var(--ink);
    font-size: 0.875rem;
    line-height: 1.5;
}

.doclib-merge-scan__list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    max-height: 360px;
    overflow-y: auto;
    border: 1px solid var(--neutral-200);
    border-radius: 6px;
    background: var(--paper-raised);
}

.doclib-merge-scan__row {
    border-bottom: 1px solid var(--neutral-200);
}

.doclib-merge-scan__row:last-child {
    border-bottom: 0;
}

.doclib-merge-scan__label {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease-out);
}

.doclib-merge-scan__label:hover {
    background: var(--paper-sunk);
}

.doclib-merge-scan__label input[type="checkbox"] {
    accent-color: #00A69C;
    width: 1rem;
    height: 1rem;
    cursor: pointer;
}

.doclib-merge-scan__name {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--ink);
    font-weight: 500;
}

.doclib-merge-scan__hint {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--neutral-500);
}

.doclib-merge-scan__details {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--neutral-200);
}

.doclib-merge-scan__details > summary {
    cursor: pointer;
    font-size: 0.8125rem;
    color: var(--neutral-500);
    margin-bottom: 0.5rem;
    user-select: none;
}

.doclib-merge-scan__details > summary:hover {
    color: var(--ink);
}

.doclib-merge-scan__unused {
    list-style: none;
    margin: 0.5rem 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.doclib-merge-scan__unused > li code {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    background: var(--paper-sunk);
    border: 1px solid var(--neutral-200);
    border-radius: 4px;
    padding: 0.125rem 0.4rem;
    color: var(--neutral-700);
}

.doclib-merge-scan__caption {
    margin: 0.5rem 0 0;
    font-size: 0.75rem;
    color: var(--neutral-500);
    line-height: 1.4;
}

.doclib-merge-palette__list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 320px;
    overflow-y: auto;
}

.doclib-merge-palette__field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: center;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--rule-soft);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease-out);
}

.doclib-merge-palette__field:last-child { border-bottom: 0; }

.doclib-merge-palette__field:hover { background: var(--paper-sunk); }

.doclib-merge-palette__field-body {
    flex: 1;
    min-width: 0;
}

.doclib-merge-palette__field-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.25;
}

.doclib-merge-palette__field-desc {
    font-size: 0.75rem;
    color: var(--neutral-500);
    line-height: 1.4;
    margin-top: 0.125rem;
}

.doclib-merge-palette__field-sample {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--neutral-500);
    line-height: 1.4;
    margin-top: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.doclib-merge-palette__field-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.doclib-merge-palette__field-tag {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    background: var(--neutral-100);
    color: var(--neutral-700);
    padding: 0.1875rem 0.4375rem;
    border-radius: 4px;
    white-space: nowrap;
}

.doclib-merge-palette__field:hover .doclib-merge-palette__field-tag {
    background: var(--ink);
    color: var(--paper-raised);
}

.doclib-merge-palette__field-icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 3px;
    color: var(--neutral-500);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--t-fast) var(--ease-out),
                background var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out);
}

.doclib-merge-palette__field:hover .doclib-merge-palette__field-icon,
.doclib-merge-palette__field:focus-within .doclib-merge-palette__field-icon {
    opacity: 1;
}

.doclib-merge-palette__field-icon:hover {
    background: var(--paper-raised);
    color: var(--ink);
}

.doclib-merge-palette__field-icon svg {
    width: 14px;
    height: 14px;
}

/* Preview frame — iframe loads /preview.pdf */

.doclib-preview {
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.doclib-preview__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--rule);
    background: var(--paper-sunk);
}

.doclib-preview__title {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--neutral-500);
    font-weight: 500;
}

.doclib-preview__refresh {
    background: transparent;
    border: 0;
    color: var(--neutral-500);
    cursor: pointer;
    padding: 0.1875rem;
    display: inline-flex;
    transition: color var(--t-fast) var(--ease-out);
}

.doclib-preview__refresh:hover { color: var(--ink); }

.doclib-preview__refresh svg { width: 14px; height: 14px; }

.doclib-preview__frame {
    width: 100%;
    flex: 1;
    border: 0;
    background: var(--neutral-50);
    min-height: 360px;
}

.doclib-preview__frame--rendering { opacity: 0.5; transition: opacity var(--t-fast) var(--ease-out); }

/* ── Save bar (sticky bottom) ── */

.doclib-save-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1rem;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 10px;
    position: sticky;
    bottom: 1rem;
    box-shadow: 0 -8px 28px -16px rgba(11, 13, 18, 0.18);
    margin-top: 1rem;
}

.doclib-save-bar__status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--neutral-500);
}

.doclib-save-bar__status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--neutral-300);
}

.doclib-save-bar__status--dirty .doclib-save-bar__status-dot { background: var(--amber-700); }
.doclib-save-bar__status--saved .doclib-save-bar__status-dot { background: var(--mint-600); }

.doclib-save-bar__actions { display: flex; gap: 0.5rem; }

/* ============================================================================
   SURFACE 4 — /admin/documents/{Key}/diff?from=&to= (Diff)
   Per-section diff. Three columns: slug · from-html · to-html. Unchanged rows
   collapsed via <details><summary>; changed rows expanded by default with
   side-by-side panes.
   ============================================================================ */

.doclib-diff {
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 10px;
    overflow: hidden;
}

.doclib-diff__head {
    display: grid;
    grid-template-columns: 200px 1fr 1fr;
    gap: 1rem;
    padding: 0.875rem 1.25rem;
    background: var(--paper-sunk);
    border-bottom: 1px solid var(--rule);
}

.doclib-diff__head-label {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--neutral-500);
    font-weight: 500;
}

.doclib-diff__head-version {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ink);
    margin-top: 0.1875rem;
}

.doclib-diff__row {
    display: grid;
    grid-template-columns: 200px 1fr 1fr;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--rule-soft);
    align-items: start;
}

.doclib-diff__row:last-child { border-bottom: 0; }

.doclib-diff__row--unchanged { opacity: 0.55; }

.doclib-diff__slug {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--ink);
    font-weight: 500;
    word-break: break-word;
}

.doclib-diff__slug-status {
    display: block;
    margin-top: 0.375rem;
}

.doclib-diff__pane {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--neutral-700);
    max-height: 320px;
    overflow-y: auto;
}

.doclib-diff__pane--empty {
    color: var(--neutral-400);
    font-style: italic;
    background: var(--paper-sunk);
}

.doclib-diff__pane h1, .doclib-diff__pane h2, .doclib-diff__pane h3,
.doclib-diff__pane p, .doclib-diff__pane ul, .doclib-diff__pane ol {
    margin: 0 0 0.625rem;
}

.doclib-diff__pane h3 { font-size: 0.9375rem; font-weight: 600; color: var(--ink); }

/* Inline diff highlight — DiffPlex-style insert / delete spans. */
.doclib-diff__ins {
    background: var(--mint-50);
    color: var(--mint-700);
    padding: 0.0625rem 0.1875rem;
    border-radius: 2px;
    text-decoration: none;
}

.doclib-diff__del {
    background: var(--coral-50);
    color: var(--coral-700);
    padding: 0.0625rem 0.1875rem;
    border-radius: 2px;
    text-decoration: line-through;
}

/* Collapsed unchanged rows */
.doclib-diff__details {
    border-top: 1px solid var(--rule-soft);
    padding: 0;
}

.doclib-diff__summary {
    list-style: none;
    cursor: pointer;
    padding: 0.75rem 1.25rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--neutral-500);
    background: var(--paper-sunk);
}

.doclib-diff__summary::-webkit-details-marker { display: none; }
.doclib-diff__summary::marker { content: ''; }

.doclib-diff__summary::before {
    content: '+';
    display: inline-block;
    width: 1em;
    color: var(--neutral-400);
}

.doclib-diff__details[open] .doclib-diff__summary::before { content: '−'; }

/* ============================================================================
   Responsive — stack panes, drop the timeline rail width
   ============================================================================ */

@media (max-width: 800px) {
    .doclib-page { padding: 1.5rem 1.25rem 3rem; }

    .doclib-row {
        grid-template-columns: 1fr;
        gap: 0.875rem;
    }

    .doclib-row__trailing { justify-content: flex-end; }

    .doclib-spotlight {
        grid-template-columns: 4px 1fr;
    }
    .doclib-spotlight__cta {
        grid-column: 2;
        margin-top: 0.875rem;
        flex-direction: row;
    }

    .doclib-diff__head,
    .doclib-diff__row {
        grid-template-columns: 1fr;
    }

    .doclib-diff__slug { padding-bottom: 0.375rem; border-bottom: 1px solid var(--rule-soft); }
}

/* ── Merge palette binding-source badge ─────────────────────────────────── */

.doclib-merge-palette__field-badge {
    display: inline-flex;
    align-items: center;
    margin-top: 0.35rem;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    line-height: 1;
}

.doclib-merge-palette__field-badge--unbound {
    background: rgba(155, 116, 67, 0.10);   /* warm muted amber */
    color: #8a5a30;
}

.doclib-merge-palette__field-badge--bound {
    background: rgba(0, 166, 156, 0.10);    /* brand teal */
    color: #006d66;
}

/* ── Source / Preview editor (Monaco + iframe) ──────────────────────────────
   Replaces the Tiptap WYSIWYG. Two-tab UI inside the editor pane:
     · Source  — Monaco HTML code editor
     · Preview — sandboxed iframe rendering the admin's raw HTML
   Editorial design language — warm paper, low-contrast tab strip, no
   Bootstrap aesthetic. The Monaco theme (doclib-paper, defined in
   code-editor.js) reads against this palette. */

.doclib-source {
    display: flex;
    flex-direction: column;
    min-height: 560px;
    background: var(--paper-raised);
    overflow: hidden;
}

/* Tab strip — semantic <button role="tab">, never MudTabs. */
.doclib-source__tabs {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border-bottom: 1px solid var(--neutral-200);
    background: var(--paper-sunk);
    min-height: 2.5rem;
}

.doclib-source__tab {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--neutral-500);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0 1rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    cursor: pointer;
    position: relative;
    transition:
        color var(--t-fast, 140ms) var(--ease-out, ease-out),
        background var(--t-fast, 140ms) var(--ease-out, ease-out);
    border-right: 1px solid var(--neutral-200);
}

.doclib-source__tab svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.doclib-source__tab:hover {
    color: var(--ink);
    background: var(--paper-raised);
}

.doclib-source__tab.is-active {
    color: var(--ink);
    background: var(--paper-raised);
}

/* The active tab gets a 2px ink-colored underline that visually "lifts" the
   tab into the pane below. Pure cosmetic — not a button selector. */
.doclib-source__tab.is-active::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: var(--ink);
}

.doclib-source__tab:focus-visible {
    outline: 2px solid var(--accent, var(--ink));
    outline-offset: -2px;
    z-index: 1;
}

.doclib-source__tabs-spacer {
    flex: 1 1 auto;
}

.doclib-source__tabs-meta {
    display: inline-flex;
    align-items: center;
    padding: 0 1rem;
    color: var(--neutral-400);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    user-select: none;
}

/* Panes — mutually exclusive (Razor sets hidden=true on the inactive one). */

.doclib-source__pane {
    flex: 1 1 auto;
    min-height: 520px;
    background: var(--paper-raised);
    display: flex;
    flex-direction: column;
}

.doclib-source__pane[hidden] {
    display: none !important;
}

/* Monaco host — the .monaco-editor div Monaco creates fills this container.
   automaticLayout is enabled in the JS factory, so resizes are handled. */

.doclib-source__monaco {
    flex: 1 1 auto;
    min-height: 520px;
    width: 100%;
    background: var(--paper-raised);
}

/* Preview iframe — full-bleed, no border (the pane already has one). */

.doclib-source__iframe {
    flex: 1 1 auto;
    min-height: 520px;
    width: 100%;
    border: 0;
    background: var(--paper-edge, #f3eee2);
    display: block;
}