/* ═══════════════════════════════════════════════════════════════
   READER — E-reader overlay, typography, TOC, navigation
   ═══════════════════════════════════════════════════════════════ */

  /* ── Text reader overlay ───────────────────────── */
  .text-reader-overlay{z-index:250}
  .text-reader-panel{
    background:#FBF8F3;border-radius:12px;
    box-shadow:0 16px 60px rgba(0,0,0,.25);
    width:min(900px,92vw);height:min(88vh,900px);
    display:flex;flex-direction:column;position:relative;
    font-family:var(--serif);
  }
  .text-reader-header{
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 24px 12px;border-bottom:1px solid var(--border-light);
    flex-shrink:0;
  }
  .text-reader-title{
    font-size:1.1rem;font-weight:700;color:var(--brown-dark);
  }
  .text-reader-controls{
    display:flex;align-items:center;gap:6px;
  }
  .text-reader-font-btn{
    padding:4px 8px;border:1px solid var(--border);border-radius:4px;
    background:var(--card-bg);color:var(--text-light);cursor:pointer;
    font-size:.72rem;font-weight:700;font-family:var(--sans);
  }
  .text-reader-font-btn:hover{border-color:var(--accent);color:var(--accent)}
  .text-reader-close{
    background:none;border:none;font-size:1.3rem;
    color:var(--text-muted);cursor:pointer;padding:4px 8px;
  }
  .text-reader-close:hover{color:var(--text)}
  .text-reader-layout{
    display:flex;flex:1;min-height:0;
  }
  .text-reader-toc{
    width:200px;flex-shrink:0;overflow-y:auto;
    padding:12px 8px;border-right:1px solid var(--border-light);
    font-family:var(--sans);font-size:.72rem;
    display:flex;flex-direction:column;gap:2px;
  }
  .text-reader-toc:empty,.text-reader-toc:has(.reader-toc-empty){
    display:none;
  }
  .reader-toc-item{
    display:block;padding:4px 8px;border-radius:4px;
    color:var(--text-light);text-decoration:none;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .reader-toc-item:hover{background:rgba(158,122,60,.06);color:var(--brown)}
  .reader-toc-empty{color:var(--text-muted);font-style:italic;padding:8px}
  .text-reader-body{
    flex:1;overflow-y:auto;padding:32px 48px;
    font-size:18px;line-height:1.75;color:var(--text);
    max-width:680px;margin:0 auto;
  }
  .text-reader-body p{
    margin:0 0 1em;text-indent:1.5em;
  }
  .text-reader-body p:first-child{text-indent:0}
  .reader-heading{
    font-family:var(--serif);font-size:1.15em;font-weight:700;
    color:var(--brown-dark);margin:1.5em 0 .5em;text-indent:0;
    border-bottom:1px solid var(--border-light);padding-bottom:4px;
  }
  .reader-loading,.reader-empty{
    text-align:center;color:var(--text-muted);
    font-family:var(--sans);font-size:.85rem;
    padding:40px 20px;
  }

  /* ── Fullscreen reader overlay ────────────────── */
  .reader-view.reader-view-fullscreen{
    position:fixed;inset:0;z-index:9500;
    background:var(--cream,#FBF8F3);
    height:100vh;width:100vw;
  }

  /* ── Toolbar controls — disabled / labelled ─────
   * maintainer 2026-05-11: disabled state now visually identical to enabled.
   * Previously opacity:.4 created a jarring visual jump when the user
   * selected text — buttons "lit up" into a new appearance. With the
   * loader → buttons reveal pattern, the first time a user sees the
   * buttons they're in the disabled state, then they brighten on
   * selection; maintainer wants them to look the same before and after.
   * Now they look identical; only the cursor signals enabled state
   * (cursor:not-allowed when disabled), and the data-tip tooltip tells
   * the user "Select text first to send to ...". */
  .reader-toolbar-btn[disabled]{
    cursor:not-allowed;
    pointer-events:none; /* don't swap hover colors */
    /* Color/opacity intentionally NOT changed — visual parity. */
  }
  /* maintainer 2026-05-09: all three reader toolbar buttons (Send to Draft,
   * Annotate, Send to Atelier) unified to the Mira top-strip aesthetic.
   * Cream-tinted hover instead of solid brown so the button doesn't
   * visually block content. Same palette as .mfo-btn. */
  .reader-research-btn,
  .reader-send-btn,
  .reader-annotate-btn{
    background:#FAF6F0 !important;
    border:1px solid #D7CCC8 !important;
    color:#35201A !important;
    font-family:var(--sans);
    font-weight:600;
    border-radius:5px;
    transition:background .12s,border-color .12s,color .12s;
  }
  .reader-research-btn:hover,
  .reader-send-btn:hover,
  .reader-annotate-btn:hover{
    background:#F0EBE3 !important;
    border-color:#9E7A3C !important;
    color:#7A3A10 !important;
  }
  .reader-research-btn:active,
  .reader-send-btn:active,
  .reader-annotate-btn:active{
    background:#E8DFD3 !important;
  }
  /* Mira-styled CSS tooltip for reader chrome buttons — replaces the
   * native OS tooltip from `title=""` (which renders purple/yellow per
   * OS theme and is fully un-styled). Mirrors .mfo-btn[data-tip]::after
   * for consistency with the file-ops strip on the Writing Desk.
   *
   * maintainer 2026-05-09 (Item 26): widened the selector list so theme
   * switchers, find-bar nav, annotation-popover dots/close, search
   * submit, mode tabs, and the reader-shelf open-file label all share
   * the same tooltip render path. Disabled-tab variant (.mode-tab
   * disabled) still shows its tip — useful to surface the
   * "Requires intake server connection" reason. */
  /* `.search-submit` deliberately omitted (maintainer 2026-05-10): the button
   * needs `position:absolute` to dock on the right edge of its
   * `.search-input-wrap`. An absolute-positioned element is itself a
   * containing block for its `::after`, so the tooltip pattern below
   * still anchors correctly without forcing `position:relative` here. */
  .reader-toolbar-btn,
  .reader-theme-btn,
  .reader-find-nav-btn,
  .reader-find-close-btn,
  .reader-ann-color-dot,
  .reader-ann-pop-close,
  .mode-tab,
  .reader-shelf-open-btn{ position:relative; }
  .reader-toolbar-btn[data-tip]::after,
  .reader-theme-btn[data-tip]::after,
  .reader-find-nav-btn[data-tip]::after,
  .reader-find-close-btn[data-tip]::after,
  .reader-ann-color-dot[data-tip]::after,
  .reader-ann-pop-close[data-tip]::after,
  .search-submit[data-tip]::after,
  .mode-tab[data-tip]::after,
  .reader-shelf-open-btn[data-tip]::after{
    content:attr(data-tip);
    position:absolute;top:calc(100% + 5px);left:50%;
    transform:translateX(-50%);
    background:#35201A;color:#FAF6F0;
    font-family:var(--sans);font-size:.68rem;font-weight:600;
    padding:3px 8px;border-radius:4px;white-space:nowrap;
    opacity:0;pointer-events:none;
    transition:opacity .15s;
    z-index:30;
    box-shadow:0 2px 8px rgba(40,25,15,.18);
  }
  .reader-toolbar-btn[data-tip]:not([disabled]):hover::after,
  .reader-theme-btn[data-tip]:hover::after,
  .reader-find-nav-btn[data-tip]:hover::after,
  .reader-find-close-btn[data-tip]:hover::after,
  .reader-ann-color-dot[data-tip]:hover::after,
  .reader-ann-pop-close[data-tip]:hover::after,
  .search-submit[data-tip]:hover::after,
  .mode-tab[data-tip]:hover::after,
  .reader-shelf-open-btn[data-tip]:hover::after{ opacity:.96; }

  /* ── Text engine — paginated two-column book view ────
     The wrapper is a fixed-size viewport; the inner element uses
     CSS multi-column layout with column-fill: auto, so content
     overflows horizontally. Page turns translate the inner by
     wrapper-width. This mirrors how epub.js's paginated flow
     works under the hood. */
  .reader-view-paginated .reader-scroll{
    overflow:hidden; /* pagination handles its own advance */
  }
  .reader-view-paginated .reader-content{
    padding:0; max-width:none; height:100%;
  }
  .reader-text-paginated{
    position:relative;height:100%;width:100%;
    overflow:hidden;
    background:var(--cream,#FBF8F3);
  }
  .reader-text-paginated-inner{
    height:100%;box-sizing:border-box;
    column-count:2;column-gap:48px;column-fill:auto;
    padding:32px 48px;
    font-family:var(--serif);font-size:18px;line-height:1.7;
    color:var(--text);
    transition:transform .18s ease;
    will-change:transform;
  }
  .reader-text-paginated-inner p{
    margin:0 0 1em;text-indent:1.5em;
    break-inside:avoid-column; /* keep paragraphs together when possible */
  }
  .reader-text-paginated-inner p:first-child,
  .reader-text-paginated-inner .reader-heading + p,
  .reader-text-paginated-inner .reader-text-doc-header + .reader-text-body > p:first-child{
    text-indent:0;
  }
  .reader-text-paginated-inner .reader-heading{
    font-family:var(--serif);font-size:1.15em;font-weight:700;
    color:var(--brown-dark);margin:1.25em 0 .5em;
    border-bottom:1px solid var(--border-light);padding-bottom:4px;
    break-after:avoid-column;
  }
  .reader-text-paginated-inner img{max-width:100%;height:auto}
  .reader-text-doc-header{
    break-after:column; /* header on its own opening page */
    margin-bottom:16px;
  }

  /* ── Unsupported-format panel ─────────────────── */
  .reader-unsupported-panel{
    max-width:640px;margin:48px auto;padding:32px 40px;
    background:#FBF8F3;border:1px solid var(--border-light);
    border-radius:12px;
    font-family:var(--serif);color:var(--text);
    box-shadow:0 6px 24px rgba(0,0,0,.06);
  }
  .reader-unsupported-title{
    font-size:1.2rem;font-weight:700;color:var(--brown-dark);
    margin:0 0 8px;word-break:break-word;
  }
  .reader-unsupported-status{
    display:inline-block;font-family:var(--sans);font-size:.72rem;
    text-transform:uppercase;letter-spacing:.05em;
    padding:4px 10px;border-radius:12px;
    background:rgba(158,122,60,.08);color:var(--brown);
    margin-bottom:16px;
  }
  .reader-unsupported-mode-processing-failed .reader-unsupported-status{
    background:rgba(200,60,60,.08);color:#b34040;
  }
  .reader-unsupported-mode-still-processing .reader-unsupported-status{
    background:rgba(60,120,180,.08);color:#3d6c9a;
  }
  .reader-unsupported-mode-intake-unreachable .reader-unsupported-status{
    background:rgba(200,140,40,.10);color:#8a5a1a;
  }
  .reader-unsupported-body p{
    margin:0 0 12px;line-height:1.6;font-size:.95rem;
  }
  .reader-unsupported-hint{
    font-family:var(--sans);font-size:.78rem;color:var(--text-muted);
  }
  .reader-unsupported-error{
    background:rgba(0,0,0,.04);border:1px solid var(--border-light);
    border-radius:6px;padding:10px 12px;
    font-family:var(--mono,ui-monospace,monospace);font-size:.78rem;
    color:var(--text-light);white-space:pre-wrap;overflow-x:auto;
    margin:0 0 12px;
  }
  .reader-unsupported-formats{
    margin-top:20px;padding-top:16px;
    border-top:1px solid var(--border-light);
  }
  .reader-unsupported-formats h4{
    font-family:var(--sans);font-size:.72rem;font-weight:700;
    text-transform:uppercase;letter-spacing:.05em;
    color:var(--text-light);margin:0 0 10px;
  }
  .reader-unsupported-formats-list{
    display:grid;grid-template-columns:auto 1fr;gap:4px 16px;
    margin:0;font-family:var(--sans);font-size:.82rem;
  }
  .reader-unsupported-formats-list dt{
    font-weight:700;color:var(--brown-dark);
  }
  .reader-unsupported-formats-list dd{
    margin:0;color:var(--text-light);
  }

  /* ── Send to Draft button — unified Mira aesthetic at line ~85 ─────
   * Per-button colour styling moved to the unified .reader-research-btn /
   * .reader-send-btn / .reader-annotate-btn block above (maintainer 2026-05-09).
   * Old gold-on-brown hover removed because the solid background was
   * blocking text. Dark theme inherits the same cream/brown palette. */

  /* ── Find bar ─────────────────────────────────── */
  .reader-find-bar{
    display:none;align-items:center;gap:8px;
    padding:6px 16px;
    background:var(--cream, #FBF8F3);
    border-bottom:1px solid var(--border-light, #eee);
    font-family:var(--sans);font-size:.8rem;
  }
  .reader-find-bar.open{
    display:flex;
  }
  .reader-find-input{
    flex:1;max-width:300px;
    padding:5px 10px;font-size:.8rem;
    font-family:var(--sans);
    border:1px solid var(--border, #d0c5b0);
    border-radius:5px;
    background:var(--white, #fff);color:var(--text);
    outline:none;
  }
  .reader-find-input:focus{
    border-color:var(--accent, #9e7a3c);
    box-shadow:0 0 0 2px rgba(158,122,60,.12);
  }
  .reader-find-input::placeholder{
    color:var(--text-muted);opacity:.6;
  }
  .reader-find-count{
    font-size:.76rem;color:var(--text-light);
    min-width:60px;text-align:center;
    white-space:nowrap;
  }
  .reader-find-count.no-matches{
    color:#B71C1C;
  }
  .reader-find-nav-btn{
    width:26px;height:26px;
    border:1px solid var(--border, #d0c5b0);border-radius:4px;
    background:var(--card-bg, #fff);
    color:var(--text-light);cursor:pointer;
    font-size:.65rem;line-height:1;
    display:flex;align-items:center;justify-content:center;
    transition:background .12s,color .12s;
  }
  .reader-find-nav-btn:hover{
    background:var(--accent);color:var(--white);
  }
  .reader-find-close-btn{
    background:none;border:none;
    font-size:1.1rem;color:var(--text-muted);
    cursor:pointer;padding:0 4px;line-height:1;
  }
  .reader-find-close-btn:hover{
    color:var(--text);
  }

  /* Find match highlights — high-contrast yellow so they pop on the
     cream reader body. Active match gets an orange outline. */
  .reader-find-match{
    background:#ffe066;
    color:inherit;
    border-radius:2px;
    padding:0 1px;
    box-shadow:0 0 0 1px #f5b800;
  }
  .reader-find-match-active{
    background:#ff9933;
    color:#1a1a1a;
    outline:2px solid #d97700;
    outline-offset:0;
    border-radius:2px;
  }

  /* Dark theme find bar — maintainer 2026-05-09 (Item 27): retuned to the
   * Mira warm-brown palette so the find bar matches the surrounding
   * reader chrome. Old slate-blue swatches replaced with the same
   * cream/brown tokens used by the toolbar. */
  [data-reader-theme="dark"] .reader-find-bar{
    background:#1c120e;border-color:#3a2820;
  }
  [data-reader-theme="dark"] .reader-find-input{
    background:#2a1f1a;border-color:#3a2820;color:#f0e6dc;
  }
  [data-reader-theme="dark"] .reader-find-nav-btn{
    background:#2a1f1a;border-color:#3a2820;color:#c8b8a8;
  }
  [data-reader-theme="dark"] .reader-find-nav-btn:hover{
    background:#9E7A3C;color:#241813;
  }
  [data-reader-theme="dark"] .reader-find-match{
    background:rgba(255,200,0,.2);
  }
  [data-reader-theme="dark"] .reader-find-match-active{
    background:rgba(255,140,0,.4);
    outline-color:rgba(255,140,0,.5);
  }

  /* Sepia theme find bar */
  [data-reader-theme="sepia"] .reader-find-bar{
    background:#f5edd6;border-color:#d4c5a0;
  }

  /* ── Annotate button — unified Mira aesthetic at line ~85 ─────
   * Removed the purple #8b6bb5 colour scheme that maintainer flagged
   * (2026-05-09 "the purple is strange"). Now uses the same cream/
   * brown/gold palette as Send to Draft and Send to Atelier. */

  /* ── Annotation highlights ─────────────────────── */
  .reader-annotation-highlight{
    cursor:pointer;
    border-radius:2px;
    transition:background .15s;
    /* maintainer 2026-05-11: critical fix for the "double text" bug in
     * PDF.js. The PDF text layer renders spans with color:transparent
     * so the canvas-rendered glyphs show through. When we wrap one of
     * those spans in <mark>, the user-agent default styling for
     * <mark> sets color:black, which makes the previously-invisible
     * text spans VISIBLE on top of the canvas — producing a doubled,
     * misaligned, illegible result. Forcing color:inherit makes the
     * mark inherit whatever the parent span had (transparent for PDF
     * text layers, normal color for HTML/EPUB), so the highlight
     * background renders but the text stays single-rendered. */
    color:inherit;
  }
  /* maintainer 2026-05-11: "pending" highlight rendered the moment the
   * Annotate button (or shortcut) fires, before the modal even
   * opens. The browser collapses the user's text-selection when
   * focus moves to the modal's textarea, so without this the
   * highlighted text "disappears" from view while the user is mid-
   * note. Rendered with the same gold color as a committed
   * annotation highlight; converted to a permanent mark on save,
   * removed on cancel. */
  .reader-annotation-pending{
    background:rgba(218,185,80,.35);
    border-radius:2px;
    color:inherit;
    animation:annPendingPulse 1.4s ease-in-out infinite;
  }
  @keyframes annPendingPulse{
    0%, 100% { background:rgba(218,185,80,.35); }
    50%      { background:rgba(218,185,80,.55); }
  }
  .reader-hl-gold{
    background:rgba(218,185,80,.28);
  }
  .reader-hl-gold:hover{
    background:rgba(218,185,80,.45);
  }
  .reader-hl-rose{
    background:rgba(200,100,100,.22);
  }
  .reader-hl-rose:hover{
    background:rgba(200,100,100,.38);
  }
  .reader-hl-sage{
    background:rgba(100,160,100,.22);
  }
  .reader-hl-sage:hover{
    background:rgba(100,160,100,.38);
  }
  .reader-hl-blue{
    background:rgba(80,130,200,.22);
  }
  .reader-hl-blue:hover{
    background:rgba(80,130,200,.38);
  }

  /* Dark theme highlights — brighter for contrast */
  [data-reader-theme="dark"] .reader-hl-gold{
    background:rgba(218,185,80,.18);
  }
  [data-reader-theme="dark"] .reader-hl-gold:hover{
    background:rgba(218,185,80,.32);
  }
  [data-reader-theme="dark"] .reader-hl-rose{
    background:rgba(220,120,120,.18);
  }
  [data-reader-theme="dark"] .reader-hl-rose:hover{
    background:rgba(220,120,120,.32);
  }
  [data-reader-theme="dark"] .reader-hl-sage{
    background:rgba(120,180,120,.18);
  }
  [data-reader-theme="dark"] .reader-hl-sage:hover{
    background:rgba(120,180,120,.32);
  }
  [data-reader-theme="dark"] .reader-hl-blue{
    background:rgba(100,150,220,.18);
  }
  [data-reader-theme="dark"] .reader-hl-blue:hover{
    background:rgba(100,150,220,.32);
  }

  /* ── Annotation pin (maintainer 2026-05-11, revised) ─────────
   * The PIN is the visible "this passage has a note" indicator —
   * persistent, clickable, and DELIBERATELY noticeable. Previously
   * it was a transparent-background serif glyph in the left margin,
   * easy to miss. Now it's a solid colored circular badge with a
   * 📝 glyph that announces itself. Sits at the top-right of the
   * annotated passage (or page, for orphan anchors). */
  .reader-annotation-pin{
    width:24px;height:24px;
    padding:0;margin:0;
    border:1.5px solid rgba(176,122,26,.85);
    background:rgba(253,241,208,.85);
    color:#5a3e2b;
    font-family:var(--sans);
    font-size:13px;font-weight:700;line-height:21px;
    text-align:center;
    cursor:pointer;
    border-radius:50%;
    box-shadow:0 2px 6px rgba(40,25,15,.18);
    /* Slight translucency by default so when the pin lands on
     * narrow-gutter layouts and slightly overlaps text, the text
     * underneath is still partly readable. On hover the pin becomes
     * fully opaque + scales up for definitive interaction. */
    opacity:.92;
    transition:transform .12s,background .12s,border-color .12s,box-shadow .12s,opacity .12s;
    user-select:none;
    z-index:50;
  }
  .reader-annotation-pin:hover{
    transform:scale(1.15);
    background:rgba(248,225,152,1);
    border-color:rgba(176,122,26,1);
    box-shadow:0 4px 10px rgba(40,25,15,.32);
    opacity:1;
  }
  .reader-annotation-pin-gold{background:#FDF1D0;border-color:#B07A1A;color:#5a3e2b}
  .reader-annotation-pin-rose{background:#F5D7D5;border-color:#A04848;color:#5a2b2b}
  .reader-annotation-pin-sage{background:#DBEAD2;border-color:#5A8040;color:#2b4a1f}
  .reader-annotation-pin-blue{background:#D6E1F0;border-color:#3A5A8A;color:#1f3258}
  /* maintainer 2026-05-11: flash animation applied via .is-fresh class
   * for ~1.6s right after a NEW annotation is created. The pin
   * pulses with a shadow halo so the user can't miss where it
   * landed. Class is removed by JS after the animation. */
  .reader-annotation-pin.is-fresh{
    animation:annPinFlash 1.6s ease-in-out 1;
    z-index:60;
  }
  @keyframes annPinFlash{
    0%   { transform:scale(1);    box-shadow:0 0 0 0 rgba(218,185,80,.55); }
    35%  { transform:scale(1.35); box-shadow:0 0 0 14px rgba(218,185,80,0); }
    70%  { transform:scale(1.1);  box-shadow:0 0 0 4px rgba(218,185,80,.25); }
    100% { transform:scale(1);    box-shadow:0 2px 6px rgba(40,25,15,.22); }
  }
  /* Tooltip on hover — uses the existing data-tip pattern. */
  .reader-annotation-pin[data-tip]{position:relative}
  .reader-annotation-pin[data-tip]::after{
    content:attr(data-tip);
    position:absolute;left:calc(100% + 6px);top:50%;
    transform:translateY(-50%);
    background:#35201A;color:#FAF6F0;
    font-family:var(--sans);font-size:.7rem;font-weight:500;
    padding:4px 8px;border-radius:4px;
    white-space:nowrap;max-width:260px;
    overflow:hidden;text-overflow:ellipsis;
    opacity:0;pointer-events:none;
    transition:opacity .15s;z-index:300;
    box-shadow:0 2px 8px rgba(40,25,15,.18);
  }
  .reader-annotation-pin[data-tip]:hover::after{opacity:.96}

  /* ── Annotation-entry modal (maintainer 2026-05-11) ──
   * Compact panel docked to the RIGHT side of the viewport rather
   * than a full-screen modal. No dim overlay — the reader stays
   * visible and interactive so the user can re-read the passage
   * they're annotating while typing. The overlay is kept only as
   * a positioning anchor with pointer-events: none so clicks pass
   * through to the document below. z-index 10000 sits above the
   * reader fullscreen (9500) AND the toolbar so the panel is
   * always reachable. Esc cancels, Ctrl+Enter saves. */
  .reader-annotation-modal-overlay{
    position:fixed;inset:0;
    background:transparent;
    pointer-events:none;       /* clicks pass through to the reader */
    z-index:10000;
    animation:annModalFadeIn .14s ease;
  }
  @keyframes annModalFadeIn{
    from{opacity:0}
    to{opacity:1}
  }
  .reader-annotation-modal-dialog{
    position:absolute;
    top:80px;                  /* below the reader toolbar */
    right:24px;
    width:340px;               /* default; user-resizable via CSS resize */
    height:auto;
    min-width:260px;
    max-width:90vw;
    min-height:240px;
    max-height:calc(100vh - 120px);
    overflow:auto;
    /* maintainer 2026-05-11 (revised): grip on BOTTOM-LEFT corner.
     * CSS `resize` puts the grip in the bottom-right by default, but
     * the modal is docked to the right edge (right:24px), so grabbing
     * the bottom-right corner pulls the dialog rightward and either
     * collides with the viewport edge or fights against the right
     * docking. Moving the grip to bottom-left gives a natural "make
     * me wider away from the right edge" gesture.
     *
     * Browsers don't expose a direct way to choose grip corner. The
     * standard trick is direction:rtl on the resizable element — this
     * flips the grip to bottom-left — then direction:ltr on the
     * children so text/content reads left-to-right normally. */
    direction:rtl;
    resize:both;
    pointer-events:auto;       /* dialog is interactive */
    background:var(--cream-light, #FBF8F3);
    color:#35201A;
    border:1px solid #D7CCC8;
    border-radius:10px;
    box-shadow:0 14px 44px rgba(20,12,8,.32);
    padding:18px 18px 16px;
    font-family:var(--sans);
    animation:annModalPopIn .18s ease;
  }
  @keyframes annModalPopIn{
    from{opacity:0;transform:translateX(12px)}
    to{opacity:1;transform:translateX(0)}
  }
  /* maintainer 2026-05-11: the dialog has direction:rtl to flip the
   * resize grip to bottom-left. Restore direction:ltr on the
   * content so the textarea, labels, and buttons read left-to-right
   * as expected. */
  .reader-annotation-modal-dialog > *{
    direction:ltr;
    text-align:left;
  }
  .reader-annotation-modal-title{
    margin:0 0 10px;
    font-family:var(--serif, 'Times New Roman', Georgia, serif);
    font-size:1.12rem;
    font-weight:600;
    color:#35201A;
  }
  .reader-annotation-modal-quote{
    font-family:'Times New Roman', Georgia, serif;
    font-style:italic;
    font-size:.86rem;
    line-height:1.4;
    color:#4a3328;
    background:#F5EFE3;
    border-left:3px solid #B07A1A;
    padding:8px 10px;
    margin:0 0 14px;
    border-radius:4px;
    max-height:110px;
    overflow:auto;
  }
  .reader-annotation-modal-label{
    display:block;
    font-size:.72rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:#6b5240;
    margin:0 0 5px;
  }
  .reader-annotation-modal-textarea{
    width:100%;
    box-sizing:border-box;
    min-height:96px;
    padding:8px 10px;
    font-family:var(--sans);
    font-size:.88rem;
    line-height:1.45;
    color:#35201A;
    background:#FFFDF7;
    border:1px solid #D7CCC8;
    border-radius:6px;
    resize:vertical;
    outline:none;
    transition:border-color .12s,box-shadow .12s;
  }
  .reader-annotation-modal-textarea:focus{
    border-color:#9E7A3C;
    box-shadow:0 0 0 3px rgba(176,122,26,.18);
  }
  .reader-annotation-modal-colors{
    display:flex;align-items:center;gap:8px;
    margin:14px 0 0;
  }
  .reader-annotation-modal-footer{
    display:flex;justify-content:flex-end;gap:10px;
    margin-top:20px;
  }
  .reader-annotation-modal-cancel,
  .reader-annotation-modal-save{
    font-family:var(--sans);
    font-size:.86rem;
    font-weight:600;
    padding:8px 16px;
    border-radius:6px;
    cursor:pointer;
    transition:background .12s,border-color .12s,color .12s;
  }
  .reader-annotation-modal-cancel{
    background:#FAF6F0;
    border:1px solid #D7CCC8;
    color:#5a3e2b;
  }
  .reader-annotation-modal-cancel:hover{
    background:#F0EBE3;
    border-color:#9E7A3C;
  }
  .reader-annotation-modal-save{
    background:#6B201A;
    border:1px solid #6B201A;
    color:#FBF8F3;
  }
  .reader-annotation-modal-save:hover{
    background:#5a1814;
    border-color:#5a1814;
  }
  .reader-annotation-modal-save[disabled]{
    opacity:.6;cursor:wait;
  }
  /* maintainer 2026-05-11: Delete button (edit mode only). Left-aligned
   * via margin-right:auto pushing Cancel/Save to the right. Red
   * outlined to signal destructive action without dominating the
   * primary Save action. */
  .reader-annotation-modal-delete{
    margin-right:auto;
    background:transparent;
    border:1px solid #B5524C;
    color:#6B201A;
    font-family:var(--sans);
    font-size:.84rem;
    font-weight:600;
    padding:7px 14px;
    border-radius:6px;
    cursor:pointer;
    transition:background .12s,color .12s;
  }
  .reader-annotation-modal-delete:hover{
    background:#B5524C;
    color:#FBF8F3;
  }

  /* ── Annotation popover ────────────────────────── */
  /* maintainer 2026-05-11: z-index 10001 sits above the reader's
   * fullscreen overlay (9500) AND the annotation-entry modal overlay
   * (10000). Previously z-index:300 left the popover hidden behind
   * the reader, so clicking a pin appeared to do nothing. */
  .reader-annotation-popover{
    position:fixed;z-index:10001;
    width:280px;padding:0;
    background:var(--card-bg, #FBF8F3);
    border:1px solid var(--border, #e0d5c0);
    border-radius:10px;
    box-shadow:0 8px 30px rgba(0,0,0,.18);
    font-family:var(--sans);font-size:.8rem;
    animation:annPopIn .15s ease;
  }
  @keyframes annPopIn{
    from{opacity:0;transform:translateY(4px)}
    to{opacity:1;transform:translateY(0)}
  }
  .reader-ann-pop-header{
    display:flex;align-items:center;gap:6px;
    padding:10px 12px 6px;
  }
  .reader-ann-color-dot{
    width:18px;height:18px;border-radius:50%;
    border:2px solid transparent;cursor:pointer;
    transition:transform .1s,border-color .15s;
  }
  .reader-ann-color-dot:hover{transform:scale(1.15)}
  .reader-ann-color-dot.active{border-color:var(--brown-dark, #5a3e2b)}
  .reader-ann-dot-gold{background:rgba(218,185,80,.6)}
  .reader-ann-dot-rose{background:rgba(200,100,100,.5)}
  .reader-ann-dot-sage{background:rgba(100,160,100,.5)}
  .reader-ann-dot-blue{background:rgba(80,130,200,.5)}
  .reader-ann-pop-close{
    margin-left:auto;background:none;border:none;
    font-size:1.1rem;color:var(--text-muted);cursor:pointer;
    padding:0 4px;line-height:1;
  }
  .reader-ann-pop-close:hover{color:var(--text)}

  .reader-ann-pop-quote{
    padding:4px 12px 8px;font-style:italic;
    color:var(--text-light, #6b5d4f);font-size:.76rem;
    line-height:1.45;border-bottom:1px solid var(--border-light, #eee);
  }

  .reader-ann-pop-note-area{
    padding:8px 12px;
  }
  .reader-ann-pop-note{
    color:var(--text);line-height:1.5;
    margin-bottom:6px;white-space:pre-wrap;
  }
  /* maintainer 2026-05-09 (Item 31): Mira ghost-button styling for the
   * annotation-popover Edit/Add and Remove buttons. Old "link"
   * underline-on-hover read as a textual hyperlink, not a button.
   * Now matches the cream/brown ghost-button family used elsewhere
   * (mfo-btn, reader-toolbar-btn). */
  .reader-ann-pop-edit-btn,
  .reader-ann-pop-delete{
    background:transparent;
    border:1px solid var(--border, #D7CCC8);
    color:var(--brown-dark, #35201A);
    padding:4px 10px;
    border-radius:4px;
    font-family:var(--sans);
    font-size:.72rem;
    font-weight:600;
    cursor:pointer;
    transition:background .12s, border-color .12s, color .12s;
  }
  .reader-ann-pop-edit-btn:hover{
    background:#F0EBE3;
    border-color:var(--gold, #9E7A3C);
    color:var(--accent, #7A3A10);
    text-decoration:none;
  }
  .reader-ann-pop-textarea{
    width:100%;min-height:60px;resize:vertical;
    padding:8px;font-size:.78rem;font-family:var(--sans);
    border:1px solid var(--border);border-radius:6px;
    background:var(--white, #fff);color:var(--text);
    outline:none;margin-bottom:6px;
  }
  .reader-ann-pop-textarea:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 2px rgba(158,122,60,.12);
  }
  .reader-ann-pop-save-btn{
    padding:5px 14px;font-size:.74rem;font-weight:600;
    background:var(--accent, #9e7a3c);color:var(--white, #fff);
    border:none;border-radius:5px;cursor:pointer;
    font-family:var(--sans);
  }
  .reader-ann-pop-save-btn:hover{opacity:.85}

  .reader-ann-pop-footer{
    display:flex;align-items:center;justify-content:space-between;
    padding:6px 12px 10px;
    border-top:1px solid var(--border-light, #eee);
  }
  /* Delete button shares the ghost-button base above; only the
   * destructive hover differs — accent (Mira deep-rust) tinge instead
   * of the gold tinge used by Edit. */
  .reader-ann-pop-delete:hover{
    background:rgba(122, 58, 16, 0.08);
    border-color:var(--accent, #7A3A10);
    color:var(--accent, #7A3A10);
    text-decoration:none;
  }
  .reader-ann-pop-time{
    font-size:.68rem;color:var(--text-muted);
  }

  /* Dark theme popover */
  [data-reader-theme="dark"] .reader-annotation-popover{
    background:#252540;border-color:#3a3a5c;
    color:#ddd;
  }
  [data-reader-theme="dark"] .reader-ann-pop-quote{
    color:#aaa;border-color:#3a3a5c;
  }
  [data-reader-theme="dark"] .reader-ann-pop-textarea{
    background:#1e1e36;border-color:#3a3a5c;color:#ddd;
  }
  [data-reader-theme="dark"] .reader-ann-pop-footer{
    border-color:#3a3a5c;
  }

  /* Sepia theme popover */
  [data-reader-theme="sepia"] .reader-annotation-popover{
    background:#f5edd6;border-color:#d4c5a0;
  }

  /* ── PDF.js viewer ────────────────────────────── */
  .pdfjs-viewer{
    display:flex;flex-direction:column;align-items:center;
    gap:12px;padding:16px 0;
  }
  .pdfjs-page{
    background:var(--white);
    box-shadow:0 2px 8px rgba(0,0,0,.12);
    overflow:hidden;
  }
  .pdfjs-page canvas{
    display:block;
  }

  /* v4 M3: canonical PDF.js text-layer CSS. Container passes events
   * through; spans capture for selection. user-select: all + cursor: text
   * restore the click-and-drag selection that was broken. Mirrors the
   * upstream `mozilla/pdf.js/web/text_layer_builder.css` pattern so
   * highlights (overlay-divs) sit ABOVE the text layer in z-order while
   * spans remain selectable underneath. */
  .pdfViewer .page,
  .pdfjs-page,
  .mira-reader-page {
    position: relative;
  }

  .pdfViewer canvas,
  .pdfjs-canvas,
  .mira-reader-canvas {
    position: relative;
    z-index: 0;
  }

  .textLayer,
  .pdfjs-text-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;          /* container passes events through */
    z-index: 1;
    overflow: hidden;
    opacity: 1;
    line-height: 1;
  }

  .textLayer > span,
  .pdfjs-text-layer > span {
    position: absolute;
    color: transparent;
    white-space: pre;
    pointer-events: auto;          /* spans capture for selection */
    /* maintainer 2026-05-08: was `user-select: all`, which made every
     * click select the WHOLE span as a single unit and broke
     * click-and-drag selection across glyphs. Upstream PDF.js
     * (web/text_layer_builder.css) leaves user-select on spans at
     * the browser default ("text" for inline text content) so users
     * can drag partial selections word-by-word. `user-select: text`
     * is the explicit form that preserves partial selection. */
    user-select: text;
    cursor: text;
    transform-origin: 0% 0%;
  }

  .textLayer ::selection,
  .pdfjs-text-layer ::selection {
    background: rgba(184, 144, 32, 0.3);
  }

  /* v4 M3: highlight overlay (was .mira-pdf-highlight). Sits ABOVE
   * the text layer in z-order so it's always visible. pointer-events:
   * none so user selection still works through the overlay. */
  .atelier-highlight {
    position: absolute;
    background-color: rgba(184, 144, 32, 0.35);
    pointer-events: none;
    z-index: 2;
    border-radius: 2px;
    animation: atelier-highlight-pulse 2.4s ease-out 1;
  }

  @keyframes atelier-highlight-pulse {
    0%   { background: rgba(184, 144, 32, 0.85); box-shadow: 0 0 0 0 rgba(184, 144, 32, 0.5); }
    60%  { background: rgba(184, 144, 32, 0.55); box-shadow: 0 0 0 6px rgba(184, 144, 32, 0); }
    100% { background: rgba(184, 144, 32, 0.35); box-shadow: 0 0 0 0 rgba(184, 144, 32, 0); }
  }

  .pdfjs-loading{
    text-align:center;color:var(--text-muted);
    font-family:var(--sans);font-size:.85rem;
    padding:40px 20px;
  }
  /* Dark theme: invert PDF pages for comfortable reading */
  [data-reader-theme="dark"] .pdfjs-page canvas{
    filter:invert(.88) hue-rotate(180deg);
  }
  [data-reader-theme="dark"] .pdfjs-text-layer ::selection{
    background:rgba(200,180,120,.4);
  }
  /* Sepia theme: subtle warm tint on PDF pages */
  [data-reader-theme="sepia"] .pdfjs-page canvas{
    filter:sepia(.15) brightness(.97);
  }

  /* ── Texts search bar ─────────────────────────── */
  .lib-texts-toolbar{
    display:flex;align-items:center;gap:8px;margin-bottom:8px;
  }
  .lib-texts-filter{
    flex:1;min-width:0;padding:6px 10px;
    font-size:.76rem;font-family:var(--sans);
    border:1px solid var(--border);border-radius:6px;
    background:var(--white);color:var(--text);outline:none;
    transition:border-color .15s,box-shadow .15s;
  }
  .lib-texts-filter:focus{
    border-color:var(--gold);
    box-shadow:0 0 0 2px rgba(158,122,60,.15);
  }
  .lib-texts-filter::placeholder{color:var(--text-muted);opacity:.6}

  /* ── Tooltip ? icon ──────────────────────────── */
  .info-tip{
    display:inline-flex;align-items:center;justify-content:center;
    width:15px;height:15px;border-radius:50%;
    font-size:.58rem;font-weight:700;color:var(--text-muted);
    background:rgba(0,0,0,.06);cursor:help;position:relative;
    margin-left:4px;vertical-align:middle;
    border:1px solid rgba(0,0,0,.08);
  }
  .info-tip:hover{background:rgba(0,0,0,.1);color:var(--brown-dark)}
  .info-tip .info-tip-text{
    position:absolute;bottom:calc(100% + 8px);left:50%;
    transform:translateX(-50%) translateY(4px);width:240px;padding:10px 12px;
    background:var(--brown-dark);color:var(--cream);
    font-family:var(--sans);font-size:.72rem;font-weight:400;line-height:1.5;
    letter-spacing:.2px;text-transform:none;
    border-radius:6px;box-shadow:0 3px 10px var(--shadow);
    z-index:100;pointer-events:none;text-align:left;
    opacity:0;transition:opacity .2s,transform .2s;
  }
  .info-tip .info-tip-text::after{
    content:"";position:absolute;top:100%;left:50%;
    transform:translateX(-50%);border:5px solid transparent;
    border-top-color:var(--brown-dark);
  }
  .info-tip:hover .info-tip-text{opacity:1;transform:translateX(-50%) translateY(0)}

  .process-panel{
    display:none;margin-top:10px;padding:14px 16px;
    background:var(--white);border:1px solid var(--border);border-radius:8px;
    box-shadow:0 2px 8px var(--shadow);
  }
  .process-panel.visible{display:block}
  .process-panel-title{
    font-family:var(--sans);font-size:.8rem;font-weight:700;
    color:var(--brown-dark);margin-bottom:10px;
  }
  .process-panel-row{
    display:flex;align-items:center;gap:12px;margin-bottom:10px;
    font-family:var(--sans);font-size:.78rem;color:var(--text);
  }
  .process-panel-row label{
    font-weight:600;color:var(--text-light);min-width:90px;
  }
  .process-panel-row input[type="range"]{
    flex:1;max-width:200px;height:4px;
    -webkit-appearance:none;appearance:none;
    background:var(--border);border-radius:2px;outline:none;cursor:pointer;
  }
  .process-panel-row input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none;width:14px;height:14px;border-radius:50%;
    background:var(--accent);border:2px solid var(--white);
    box-shadow:0 1px 4px var(--shadow);cursor:pointer;
  }
  .process-panel-row input[type="range"]::-moz-range-thumb{
    width:14px;height:14px;border-radius:50%;
    background:var(--accent);border:2px solid var(--white);
    box-shadow:0 1px 4px var(--shadow);cursor:pointer;
  }
  .process-panel-value{
    font-weight:700;color:var(--accent);min-width:50px;
  }
  .process-panel-hint{
    font-size:.7rem;color:var(--text-muted);font-style:italic;
    margin-bottom:12px;line-height:1.4;
  }
  .process-panel-actions{
    display:flex;gap:10px;align-items:center;
  }
  .process-panel-start{
    padding:7px 20px;background:var(--accent);color:var(--white);
    border:none;border-radius:6px;font-size:.78rem;font-weight:700;
    cursor:pointer;font-family:var(--sans);letter-spacing:.3px;
    transition:background .15s;
  }
  .process-panel-start:hover{background:var(--brown-dark)}
  .process-panel-cancel{
    padding:6px 14px;background:transparent;color:var(--text-muted);
    border:1px solid var(--border);border-radius:6px;font-size:.76rem;
    font-weight:600;cursor:pointer;font-family:var(--sans);
    transition:border-color .15s,color .15s;
  }
  .process-panel-cancel:hover{border-color:var(--accent);color:var(--accent)}
  .process-panel-summary{
    font-size:.72rem;color:var(--text-muted);margin-left:auto;
  }
  .process-mode-row{
    flex-wrap:wrap;gap:6px 16px;
  }
  .process-mode-row > label:first-child{
    width:100%;min-width:90px;flex:none;
  }
  .process-mode-option{
    display:flex;align-items:center;gap:5px;
    font-size:.76rem;color:var(--text);cursor:pointer;
    padding:4px 10px;border:1px solid var(--border-light);border-radius:5px;
    transition:border-color .15s,background .15s;
  }
  .process-mode-option:has(input:checked){
    border-color:var(--accent);background:rgba(158,122,60,.06);
  }
  .process-mode-option input[type="radio"]{margin:0}
  .process-mode-desc{
    font-size:.68rem;color:var(--text-muted);font-style:italic;
  }

  /* Duplicate resolution panel */
  .duplicate-panel{
    display:none;margin-top:10px;padding:14px 16px;
    background:#fef9f0;border:1px solid #e0c88e;border-radius:8px;
    box-shadow:0 2px 8px var(--shadow);
  }
  .duplicate-panel.visible{display:block}
  .duplicate-panel-title{
    font-family:var(--sans);font-size:.82rem;font-weight:700;
    color:var(--brown-dark);margin-bottom:4px;
  }
  .duplicate-panel-subtitle{
    font-family:var(--sans);font-size:.72rem;color:var(--text-muted);
    margin-bottom:12px;line-height:1.35;
  }
  .duplicate-panel-list{
    max-height:160px;overflow-y:auto;margin-bottom:12px;
    border:1px solid var(--border);border-radius:6px;background:var(--white);
  }
  .duplicate-panel-item{
    display:flex;align-items:center;gap:8px;padding:5px 10px;
    font-family:var(--sans);font-size:.72rem;color:var(--text);
    border-bottom:1px solid var(--border);
  }
  .duplicate-panel-item:last-child{border-bottom:none}
  .duplicate-panel-item .dup-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .duplicate-panel-item .dup-status{
    font-size:.66rem;color:var(--text-muted);font-style:italic;
  }
  .duplicate-panel-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
  .dup-action-btn{
    padding:6px 14px;border-radius:6px;font-size:.76rem;font-weight:600;
    cursor:pointer;font-family:var(--sans);transition:background .15s,border-color .15s;
  }
  .dup-action-skip{
    background:var(--accent);color:var(--white);border:none;
  }
  .dup-action-skip:hover{background:var(--brown-dark)}
  .dup-action-replace{
    background:transparent;color:var(--accent);border:1.5px solid var(--accent);
  }
  .dup-action-replace:hover{background:var(--accent);color:var(--white)}
  .dup-action-both{
    background:transparent;color:var(--text-muted);border:1px solid var(--border);
  }
  .dup-action-both:hover{border-color:var(--accent);color:var(--accent)}
  .dup-action-cancel{
    background:transparent;color:var(--text-muted);border:1px solid var(--border);
  }
  .dup-action-cancel:hover{border-color:var(--accent);color:var(--accent)}
  .duplicate-panel-summary{
    font-size:.7rem;color:var(--text-muted);margin-left:auto;
  }

  .lib-card-toggle{
    width:22px;height:22px;border:1.5px solid var(--border);border-radius:5px;
    background:var(--cream);color:var(--text-muted);cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    font-size:.6rem;transition:background .15s,color .15s,transform .2s;
    flex-shrink:0;margin-left:auto;
  }
  .lib-card-toggle:hover{background:var(--border-light);color:var(--brown)}
  .lib-card-toggle.expanded{transform:rotate(180deg)}

  .lib-card-body{
    animation:fadeIn .2s ease;
  }

  .lib-card-expandable{
    margin-top:12px;padding-top:12px;
    border-top:1px solid var(--border-light);
    animation:fadeIn .2s ease;
  }

  .archive-upload{
    padding:20px;
    border:2px dashed var(--border);border-radius:10px;
    background:var(--cream);text-align:center;
    cursor:pointer;transition:border-color .2s,background .2s;
  }
  .archive-upload:hover,.archive-upload.dragover{
    border-color:var(--accent);background:rgba(139,69,19,.03);
  }
  .archive-upload svg{margin-bottom:6px;opacity:.5}
  .archive-upload-label{
    font-size:.82rem;color:var(--text);margin-bottom:4px;
  }
  .archive-browse{
    color:var(--accent);font-weight:600;text-decoration:underline;
    cursor:pointer;
  }
  .archive-upload-hint{
    font-size:.7rem;color:var(--text-muted);
  }

  /* Create New Archive card */
  .lib-card-new{
    border-style:dashed;border-color:var(--border);
  }
  .lib-card-new .lib-card-header{cursor:default}
  .lib-card-new .lib-card-title h3{color:var(--text-muted);font-weight:600}
  .lib-pipeline-disabled .lib-pipeline-stage{opacity:.35}
  .pipe-disabled .pipe-icon{color:var(--text-muted)}
  .pipe-disabled .pipe-label{color:var(--text-muted)}

  .new-archive-sources{
    display:flex;flex-direction:column;gap:6px;
    margin-top:14px;
  }
  .new-archive-source{
    display:flex;align-items:center;gap:10px;
    padding:10px 14px;border-radius:8px;
    font-size:.85rem;color:var(--text);
    border:1px solid var(--border-light);
    cursor:pointer;transition:background .15s,border-color .15s;
  }
  .new-archive-source:hover:not(.disabled){
    background:rgba(139,69,19,.04);border-color:var(--accent);
  }
  .new-archive-source.disabled{
    opacity:.4;cursor:default;
  }
  .new-archive-source svg{flex-shrink:0;opacity:.6}
  .new-archive-local svg{stroke:var(--brown);opacity:.8}
  .source-coming-soon{
    margin-left:auto;font-size:.7rem;font-style:italic;
    color:var(--text-muted);
  }

  .archive-file-list{
    margin:0;
  }
  .archive-file-header{
    display:grid;grid-template-columns:1fr 60px 80px 100px 40px;
    gap:8px;padding:8px 12px;
    font-size:.7rem;font-weight:700;text-transform:uppercase;
    letter-spacing:.6px;color:var(--text-muted);
    border-bottom:1.5px solid var(--border);
  }
  .archive-file-row{
    display:grid;grid-template-columns:1fr 60px 80px 100px 40px;
    gap:8px;padding:12px;align-items:center;
    border-bottom:1px solid var(--border-light);
    font-size:.84rem;
  }
  .archive-file-row:hover{background:rgba(139,69,19,.02)}
  .af-name{
    font-weight:600;color:var(--brown-dark);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .af-type{font-size:.73rem;color:var(--text-muted);font-weight:600;text-transform:uppercase}
  .af-size{font-size:.78rem;color:var(--text-light)}
  .af-status{
    font-size:.72rem;font-weight:700;letter-spacing:.3px;
    padding:3px 8px;border-radius:4px;text-align:center;
  }
  .af-indexed{background:rgba(46,125,50,.08);color:#2E7D32}
  .af-imported{background:rgba(30,90,160,.08);color:#1E5AA0}
  .af-processing{background:rgba(184,134,11,.1);color:var(--gold)}
  .af-error{background:rgba(183,28,28,.06);color:#B71C1C}
  .af-queued{background:rgba(109,76,65,.08);color:var(--brown-light)}
  .af-embed-btn,.af-read-btn{
    font-size:.68rem;font-weight:600;padding:2px 8px;
    border:1px solid var(--border-light);border-radius:4px;
    background:var(--card-bg);color:var(--text-light);cursor:pointer;
    margin-left:4px;transition:background .15s,color .15s;
  }
  .af-embed-btn:hover{background:rgba(30,90,160,.12);color:#1E5AA0;border-color:#1E5AA0}
  .af-read-btn:hover{background:rgba(109,76,65,.08);color:var(--brown)}
  .af-embed-btn:disabled{opacity:.5;cursor:not-allowed}
  .lt-imported{color:#1E5AA0;font-size:.72rem}
  .td-imported{color:#1E5AA0}
  .af-remove{
    width:24px;height:24px;border:none;border-radius:5px;
    background:transparent;color:var(--text-muted);cursor:pointer;
    font-size:1rem;font-weight:700;
    display:flex;align-items:center;justify-content:center;
    transition:background .15s,color .15s;
  }
  .af-remove:hover{background:rgba(183,28,28,.08);color:#B71C1C}

  /* ── Folder-tree file UX ─────────────────────────── */
  .af-summary-bar{
    display:flex;align-items:center;gap:12px;
    padding:10px 12px;margin-bottom:4px;
    font-size:.78rem;color:var(--text-muted);
    border-bottom:1.5px solid var(--border);
  }
  .af-file-count{font-weight:700;color:var(--text-light);white-space:nowrap}
  .af-total-size{white-space:nowrap}
  .af-summary-filter{
    margin-left:auto;
    padding:4px 10px;font-size:.76rem;font-family:var(--sans);
    border:1.5px solid var(--border);border-radius:5px;
    background:var(--cream);color:var(--text);
    outline:none;width:160px;
    transition:border-color .2s,box-shadow .2s;
  }
  .af-summary-filter::placeholder{color:var(--text-muted)}
  .af-summary-filter:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(139,69,19,.08)}

  /* ── Per-archive document type editor ────────────── */
  .archive-doc-types{
    padding:10px 12px;border-bottom:1.5px solid var(--border);
  }
  .archive-doc-types-label{
    font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
    color:var(--text-muted);margin-bottom:6px;
  }
  .archive-doc-types-tags{
    display:flex;flex-wrap:wrap;gap:5px;align-items:center;
  }
  .doc-type-chip{
    display:inline-flex;align-items:center;gap:4px;
    padding:3px 9px;font-size:.74rem;font-weight:600;
    background:rgba(158,122,60,.12);color:var(--brown-dark);
    border:1px solid rgba(158,122,60,.25);border-radius:4px;
    white-space:nowrap;
  }
  .doc-type-chip-remove{
    width:14px;height:14px;border:none;background:none;
    color:var(--text-muted);cursor:pointer;font-size:.8rem;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;transition:background .12s,color .12s;
    padding:0;line-height:1;
  }
  .doc-type-chip-remove:hover{background:rgba(183,28,28,.1);color:#B71C1C}
  .doc-type-add-btn{
    display:inline-flex;align-items:center;gap:3px;
    padding:3px 9px;font-size:.72rem;font-weight:600;
    color:var(--accent);background:none;
    border:1.5px dashed var(--border);border-radius:4px;
    cursor:pointer;font-family:var(--sans);
    transition:background .12s,border-color .12s;
  }
  .doc-type-add-btn:hover{background:var(--cream-dark);border-color:var(--accent)}
  .doc-type-input{
    width:120px;padding:3px 8px;font-size:.74rem;font-family:var(--sans);
    border:1.5px solid var(--border);border-radius:4px;
    background:var(--white);color:var(--text);outline:none;
  }
  .doc-type-input:focus{border-color:var(--accent)}

  .ft-folder-row{
    display:flex;align-items:center;gap:6px;
    padding:7px 12px;cursor:pointer;
    font-size:.82rem;border-bottom:1px solid var(--border-light);
    user-select:none;transition:background .12s;
  }
  .ft-folder-row:hover{background:rgba(139,69,19,.03)}
  .ft-folder-chevron{
    font-size:.6rem;color:var(--text-muted);
    transition:transform .15s;width:12px;text-align:center;flex-shrink:0;
  }
  .ft-folder-chevron.expanded{transform:rotate(90deg)}
  .ft-folder-icon{flex-shrink:0;font-size:.9rem}
  .ft-folder-name{font-weight:700;color:var(--brown-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ft-file-count{
    font-size:.7rem;color:var(--text-muted);font-weight:600;
    background:var(--border-light);padding:1px 7px;border-radius:9px;
    white-space:nowrap;
  }
  .ft-folder-size{font-size:.72rem;color:var(--text-muted);margin-left:auto;white-space:nowrap}
  .ft-folder-children{border-left:1.5px solid var(--border-light);margin-left:18px}

  .ft-depth-0{padding-left:12px}
  .ft-depth-1{padding-left:32px}
  .ft-depth-2{padding-left:52px}
  .ft-depth-3{padding-left:72px}

  .ft-file-row{
    display:flex;align-items:center;gap:8px;
    padding:5px 12px;font-size:.8rem;
    border-bottom:1px solid var(--border-light);
  }
  .ft-file-row:hover{background:rgba(139,69,19,.02)}
  .ft-file-name{
    font-weight:500;color:var(--brown-dark);flex:1;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .ft-file-size{font-size:.73rem;color:var(--text-light);white-space:nowrap}
  .ft-file-status{
    font-size:.68rem;font-weight:700;letter-spacing:.3px;
    padding:2px 7px;border-radius:4px;white-space:nowrap;
  }
  .ft-file-author{
    font-size:.7rem;color:var(--text-muted);white-space:nowrap;
    max-width:90px;overflow:hidden;text-overflow:ellipsis;
  }
  .ft-file-chunks{
    font-size:.68rem;color:var(--text-light);white-space:nowrap;
  }

  .af-show-more{
    display:block;width:100%;padding:10px;margin-top:4px;
    font-size:.78rem;font-weight:600;color:var(--accent);
    background:none;border:1.5px solid var(--border);border-radius:6px;
    cursor:pointer;font-family:var(--sans);
    transition:background .15s,border-color .15s;
  }
  .af-show-more:hover{background:rgba(139,69,19,.04);border-color:var(--accent)}

  .af-empty{
    padding:28px 16px;text-align:center;
    font-size:.82rem;color:var(--text-muted);
  }

  .af-add-folder-link{
    font-size:.75rem;font-weight:600;color:var(--accent);
    background:none;border:none;cursor:pointer;
    font-family:var(--sans);text-decoration:underline;
    transition:color .15s;
  }
  .af-add-folder-link:hover{color:var(--brown-dark)}

  .archive-summary{
    flex-shrink:0;padding:14px 32px;
    font-size:.78rem;color:var(--text-muted);
    border-top:1px solid var(--border);
    background:var(--white);
  }

/* ═══════════════════════════════════════════════════════════════
   READER SHELF — Document picker in Reading Room Read tab
   ═══════════════════════════════════════════════════════════════ */

.reader-shelf {
  padding: 32px;
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
}

.reader-shelf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.reader-shelf-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--brown);
  margin: 0;
}

.reader-shelf-open-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--brown);
  color: var(--cream);
  border: none;
  border-radius: 6px;
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s;
}
.reader-shelf-open-btn:hover {
  background: var(--brown-dark, #3e2c1c);
}
.reader-shelf-open-btn svg {
  stroke: var(--cream);
}

/* ── Section headers ──────────────────────────────── */
.reader-shelf-section {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  padding: 8px 0 6px;
  margin-top: 12px;
  border-bottom: 1px solid var(--border);
}
.reader-shelf-section:first-child {
  margin-top: 0;
}

/* ── Document cards ───────────────────────────────── */
.reader-shelf-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.reader-shelf-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s;
}
.reader-shelf-card:hover {
  background: var(--cream);
}

.reader-shelf-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .03em;
}

.reader-shelf-card-title {
  font-size: .92rem;
  font-weight: 600;
  color: var(--brown);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reader-shelf-card-meta {
  font-size: .78rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.reader-shelf-card-status {
  font-size: .72rem;
  color: var(--text-muted);
  opacity: 0.7;
  white-space: nowrap;
}

/* maintainer 2026-05-11: shelf cards now render as library items
 * (Author / container · year · format / status pill). Author line
 * styling + binary status-pill colors. */
.reader-shelf-card-author {
  font-size: .82rem;
  color: var(--brown-dark, #35201A);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reader-shelf-card-status.is-ready {
  color: #2F6B3F;
  opacity: 1;
  font-weight: 600;
}
.reader-shelf-card-status.is-processing {
  color: #B07A1A;
  opacity: 1;
  font-weight: 600;
}
.reader-shelf-card-passages {
  color: var(--text-muted);
  font-weight: 400;
  opacity: 0.7;
}

/* ── Reading Room library table (maintainer 2026-05-11) ────────
 * Mirrors the Main Library's .inv-row / .manage-inventory-table
 * grid so the Reading Room reads as the same kind of library
 * surface, not a different one. Columns: Title · Author ·
 * Container · Year · Type · Status. Identical row height,
 * border, and hover behaviors as the Main Library. */
.reader-shelf-table {
  border: 1px solid var(--border-light, #E2D9CC);
  border-radius: 8px;
  overflow: hidden;
  background: var(--cream-light, #FBF8F3);
}
.reader-shelf-row {
  display: grid;
  grid-template-columns:
    minmax(180px, 3fr)   /* title */
    minmax(120px, 1.4fr) /* author */
    minmax(140px, 1.8fr) /* container */
    72px                 /* year */
    60px                 /* type */
    minmax(120px, 1fr);  /* status */
  gap: 0;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-light, #E2D9CC);
  font-size: .82rem;
  cursor: pointer;
  transition: background .12s;
}
.reader-shelf-row:last-child {
  border-bottom: none;
}
.reader-shelf-row:not(.reader-shelf-row-header):hover {
  background: var(--cream, #F5EFE3);
}
.reader-shelf-row-header {
  background: var(--cream, #F5EFE3);
  color: var(--brown-dark, #35201A);
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: default;
}
.reader-shelf-row-header:hover {
  background: var(--cream, #F5EFE3) !important;
}
.reader-shelf-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 10px;
}
.reader-shelf-cell-title {
  font-weight: 600;
  color: var(--brown-dark, #35201A);
}
.reader-shelf-cell-author {
  color: var(--text, #4A2E1C);
  font-style: italic;
}
.reader-shelf-cell-container {
  color: var(--text-muted, #7A6B5C);
}
.reader-shelf-cell-year,
.reader-shelf-cell-type {
  color: var(--text-muted, #7A6B5C);
  font-variant-numeric: tabular-nums;
}
.reader-shelf-cell-status {
  text-align: left;
}
/* maintainer 2026-05-17 (Smoke 58): a record whose normal row build
 * threw is shown in a reduced-but-clickable form instead of taking
 * the whole list down with it. Muted, italic "metadata incomplete"
 * marker — no internal jargon. */
.reader-shelf-row-degraded {
  opacity: .85;
}
.reader-shelf-row-degraded:hover {
  opacity: 1;
}
.reader-shelf-meta-incomplete {
  color: var(--text-muted, #7A6B5C);
  font-style: italic;
  font-size: .78rem;
}
.reader-shelf-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
}
.reader-shelf-badge.is-ready {
  background: #E5F2E8;
  color: #2F6B3F;
  border: 1px solid #BFDDC6;
}
.reader-shelf-badge.is-processing {
  background: #FBEFD5;
  color: #8A5A0A;
  border: 1px solid #E6CFA0;
}

/* maintainer 2026-05-11: "📝 N" badge appended to the title cell when
 * the file has annotations. Sits inline after the title text, small
 * and quiet so it doesn't compete with the title itself. */
.reader-shelf-badge-notes {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #FBEFD5;
  color: #8A5A0A;
  border: 1px solid #E6CFA0;
  font-size: .72rem;
  font-weight: 600;
  vertical-align: middle;
  white-space: nowrap;
}

/* maintainer 2026-05-11 (revised): Reader toolbar loader sits IN-FLOW
 * (no position:absolute) inside the same toolbar-controls flex
 * container as the buttons-group, sharing the slot via display
 * toggling. This keeps the toolbar's overall height steady (no
 * pill-floats-above effect) and prevents jitter as the loader and
 * buttons swap. The loader's visual dimensions deliberately match
 * the buttons (same border-radius, similar padding, same height
 * via line-height) so the swap reads as ONE element changing label,
 * not two elements of different sizes alternating. */
.reader-send-buttons-group {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.reader-toolbar.is-loading .reader-send-buttons-group {
  display: none;
}
.reader-toolbar-loader {
  display: none;
  align-items: center;
  gap: 6px;
  /* Match the reader-toolbar-btn dimensions: same border-radius,
   * font-family, font-weight, similar padding so the swap doesn't
   * change the toolbar's apparent size. */
  background: #FAF6F0;
  border: 1px solid #D7CCC8;
  border-radius: 5px;
  padding: 4px 10px;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  color: #35201A;
  pointer-events: none;
  white-space: nowrap;
}
.reader-toolbar-loader.is-visible {
  display: inline-flex;
}
.reader-toolbar-loader.is-error {
  border-color: #B5524C;
  color: #6B201A;
  background: rgba(253, 244, 244, 0.96);
}
.reader-toolbar-loader-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid #D7CCC8;
  border-top-color: #6B201A;
  border-radius: 50%;
  animation: reader-toolbar-loader-spin 0.9s linear infinite;
  flex: 0 0 auto;
}
.reader-toolbar-loader.is-error .reader-toolbar-loader-spinner {
  animation: none;
  border: 2px solid #B5524C;
  border-top-color: #6B201A;
  border-radius: 0;
  position: relative;
}
/* X-mark for the error state */
.reader-toolbar-loader.is-error .reader-toolbar-loader-spinner::before,
.reader-toolbar-loader.is-error .reader-toolbar-loader-spinner::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 2px;
  background: #6B201A;
  transform-origin: center;
}
.reader-toolbar-loader.is-error .reader-toolbar-loader-spinner::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.reader-toolbar-loader.is-error .reader-toolbar-loader-spinner::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
@keyframes reader-toolbar-loader-spin {
  to { transform: rotate(360deg); }
}

/* ── Empty state ──────────────────────────────────── */
.reader-shelf-empty {
  text-align: center;
  padding: 60px 24px;
}

.reader-shelf-empty-icon {
  margin-bottom: 16px;
}

.reader-shelf-empty-text {
  font-size: 1rem;
  font-weight: 600;
  color: var(--brown);
  margin: 0 0 8px;
}

.reader-shelf-empty-hint {
  font-size: .85rem;
  color: var(--text-muted);
  margin: 0;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

/* ── Dark theme ───────────────────────────────────── */
[data-reader-theme="dark"] .reader-shelf-card:hover {
  background: rgba(255,255,255,.06);
}
[data-reader-theme="dark"] .reader-shelf-open-btn {
  background: #b8a07a;
  color: #1a1a1a;
}

/* ═══════════════════════════════════════════════════════════════
   CITATION PANEL — Right-pane chunk/citation viewer
   ══════════════════════════���════════════════════════════════════ */

  .rr-citation-panel {
    width: 35%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--border, #e0d5c0);
    background: var(--cream, #FBF8F3);
    overflow: hidden;
  }

  .rr-citation-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px 8px;
    border-bottom: 1px solid var(--border-light, #eee);
    flex-shrink: 0;
  }
  .rr-citation-header h3 {
    margin: 0;
    font-size: .82rem;
    font-weight: 700;
    color: var(--brown-dark, #5a3e2b);
    font-family: var(--sans);
    letter-spacing: .3px;
  }
  .rr-citation-header .icon-btn {
    font-size: .9rem;
    color: var(--text-muted);
    cursor: pointer;
    background: none;
    border: 1px solid var(--border, #d0c5b0);
    border-radius: 4px;
    padding: 2px 8px;
    font-family: var(--sans);
    transition: color .15s, border-color .15s;
  }
  .rr-citation-header .icon-btn:hover {
    color: var(--accent, #9e7a3c);
    border-color: var(--accent, #9e7a3c);
  }

  .rr-citation-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 12px;
  }

  /* ── Empty state ─────────────────────────────────── */
  .rr-citation-empty {
    text-align: center;
    color: var(--text-muted);
    font-family: var(--sans);
    font-size: .8rem;
    padding: 32px 16px;
    line-height: 1.5;
    font-style: italic;
  }

  /* ── Chunk cards ─────────────────────────────────── */
  .rr-citation-card {
    padding: 10px 12px;
    margin-bottom: 8px;
    background: var(--white, #fff);
    border: 1px solid var(--border-light, #eee);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
  }
  .rr-citation-card:hover {
    border-color: var(--accent, #9e7a3c);
    box-shadow: 0 2px 8px rgba(158, 122, 60, .1);
  }
  .rr-citation-card-active {
    border-color: var(--gold, #dab950);
    border-width: 2px;
    box-shadow: 0 2px 12px rgba(218, 185, 80, .2);
  }

  .rr-citation-seq {
    font-family: var(--sans);
    font-size: .68rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 4px;
  }

  .rr-citation-text {
    font-family: var(--serif, Georgia, serif);
    font-size: .78rem;
    line-height: 1.55;
    color: var(--text, #333);
    margin-bottom: 6px;
    word-break: break-word;
  }

  .rr-citation-meta {
    font-family: var(--sans);
    font-size: .7rem;
    color: var(--text-light, #6b5d4f);
    margin-bottom: 4px;
  }

  .rr-citation-cite {
    font-family: var(--sans);
    font-size: .68rem;
    color: var(--brown-light, #8b7355);
    font-style: italic;
    line-height: 1.4;
    margin-bottom: 4px;
  }

  /* ── Confidence badges ───────────────────────────── */
  .rr-citation-badge {
    display: inline-block;
    font-family: var(--sans);
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 2px 8px;
    border-radius: 10px;
  }
  .rr-citation-badge-high {
    background: rgba(39, 174, 96, .12);
    color: #27ae60;
  }
  .rr-citation-badge-medium {
    background: rgba(243, 156, 18, .12);
    color: #c0870f;
  }
  .rr-citation-badge-low {
    background: rgba(231, 76, 60, .12);
    color: #c0392b;
  }

  /* ── Dark theme ──────────────────────────────────── */
  [data-reader-theme="dark"] .rr-citation-panel {
    background: #1e1e36;
    border-left-color: #3a3a5c;
  }
  [data-reader-theme="dark"] .rr-citation-header {
    border-bottom-color: #3a3a5c;
  }
  [data-reader-theme="dark"] .rr-citation-header h3 {
    color: #ddd;
  }
  [data-reader-theme="dark"] .rr-citation-header .icon-btn {
    color: #aaa;
    border-color: #444;
  }
  [data-reader-theme="dark"] .rr-citation-header .icon-btn:hover {
    color: #e0a060;
    border-color: #e0a060;
  }
  [data-reader-theme="dark"] .rr-citation-card {
    background: #252540;
    border-color: #3a3a5c;
  }
  [data-reader-theme="dark"] .rr-citation-card:hover {
    border-color: #e0a060;
  }
  [data-reader-theme="dark"] .rr-citation-card-active {
    border-color: #dab950;
    box-shadow: 0 2px 12px rgba(218, 185, 80, .15);
  }
  [data-reader-theme="dark"] .rr-citation-text {
    color: #ddd;
  }
  [data-reader-theme="dark"] .rr-citation-meta {
    color: #aaa;
  }
  [data-reader-theme="dark"] .rr-citation-cite {
    color: #b8a07a;
  }
  [data-reader-theme="dark"] .rr-citation-empty {
    color: #888;
  }

  /* ── Sepia theme ─────────────────────────────────── */
  [data-reader-theme="sepia"] .rr-citation-panel {
    background: #f5edd6;
    border-left-color: #d4c5a0;
  }
  [data-reader-theme="sepia"] .rr-citation-header {
    border-bottom-color: #d4c5a0;
  }
  [data-reader-theme="sepia"] .rr-citation-card {
    background: #faf5e8;
    border-color: #e0d5c0;
  }

  /* ── Atelier "Open in reader" deep-link highlight ──
     v4 M3 (plan serialized-herding-knuth.md): the PDF engine now uses
     the overlay-div pattern (.atelier-highlight, defined above with the
     PDF.js viewer rules) instead of DOM-wrap <mark>. The text and HTML
     engines still wrap matches in <mark.mira-pdf-highlight> — that
     class is preserved here for those engines. Pulses once on first
     land, then settles into a steady golden tint that reads against
     paginated/scrollable HTML/text bodies. */
  mark.mira-pdf-highlight {
    background: rgba(184, 144, 32, 0.35);
    color: inherit;
    padding: 0 0.05em;
    border-radius: 2px;
    animation: mira-pdf-highlight-pulse 2.4s ease-out 1;
  }

  @keyframes mira-pdf-highlight-pulse {
    0%   { background: rgba(184, 144, 32, 0.85); box-shadow: 0 0 0 0 rgba(184, 144, 32, 0.5); }
    60%  { background: rgba(184, 144, 32, 0.55); box-shadow: 0 0 0 6px rgba(184, 144, 32, 0); }
    100% { background: rgba(184, 144, 32, 0.35); box-shadow: 0 0 0 0 rgba(184, 144, 32, 0); }
  }