/* ═══════════════════════════════════════════════════════════════
   JOURNAL — Journal editor, TipTap toolbar, footnotes, page
   styling, context menu, docx integration
   ═══════════════════════════════════════════════════════════════ */

  /* ── Journal view ─────────────────────────────────────── */
  .journal-view{
    flex:1;display:flex;flex-direction:column;min-width:0;
    background:var(--cream-dark);
  }
  .journal-header{
    flex-shrink:0;padding:16px 28px 14px;
    background:var(--white);border-bottom:1px solid var(--border);
    display:flex;align-items:center;gap:16px;
  }

  /* ── Journal project dropdown (in jws-bar) ─────────── */
  .jws-project-select{
    flex:1;max-width:260px;
    height:30px;padding:0 8px;
    border:1.5px solid var(--border);border-radius:6px;
    background:var(--white);color:var(--brown-dark);
    font-family:var(--sans);font-size:.82rem;font-weight:600;
    cursor:pointer;outline:none;
    transition:border-color .15s;
  }
  .jws-project-select:hover{border-color:var(--gold)}
  .jws-project-select:focus{border-color:var(--gold);box-shadow:0 0 0 2px rgba(158,122,60,.15)}

  /* Item 45 (2026-05-09): Mira-skinned document switcher. ID selector
   * wins over the .jws-project-select defaults above; cream background,
   * brown-dark border, custom inline-SVG caret to remove the platform
   * native control chrome. */
  #journalProjectSelect{
    appearance:none;
    -webkit-appearance:none;
    background:#FAF6F0;
    border:1px solid rgba(53, 32, 26, 0.2);
    color:#35201A;
    font-family:var(--serif,'Times New Roman',Georgia,serif);
    padding:4px 28px 4px 10px;
    border-radius:5px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2335201A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 8px center;
  }
  #journalProjectSelect:focus{
    border-color:#9E7A3C;
    outline:none;
  }
  .jws-new-btn{
    padding:4px 12px;
    border:1.5px dashed var(--border);border-radius:6px;
    background:none;color:var(--accent);
    font-family:var(--sans);font-size:.76rem;font-weight:700;
    cursor:pointer;transition:border-color .15s,background .15s;
    white-space:nowrap;
  }
  .jws-new-btn:hover{border-color:var(--accent);background:rgba(139,69,19,.03)}
  .jws-delete-btn{
    width:24px;height:24px;border:none;background:none;
    color:var(--text-muted);font-size:1rem;line-height:1;
    cursor:pointer;border-radius:4px;
    display:flex;align-items:center;justify-content:center;
    transition:background .12s,color .12s;
  }
  .jws-delete-btn:hover{background:rgba(183,28,28,.08);color:#B71C1C}

  /* ── Journal workspace ────────────────────────────────── */
  .journal-workspace{
    flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden;
  }
  .jws-bar{
    flex-shrink:0;display:flex;align-items:center;gap:10px;
    padding:8px 24px;
    background:var(--cream-dark);
    /* Item 48 (2026-05-09): deliberate divider that reads against the
     * cream background instead of blending into --border-light. */
    border-bottom:1px solid rgba(53, 32, 26, 0.12);
  }
  .jws-bar .project-color-dot{
    width:10px;height:10px;border-radius:50%;flex-shrink:0;
  }
  .jws-empty{
    flex:1;display:flex;align-items:center;justify-content:center;
    font-family:var(--sans);font-size:.88rem;color:var(--text-muted);
    font-style:italic;
  }
  .jws-empty p{margin:0}
  /* Unified toolbar (format buttons left, doc tools right) */
  .jt-toolbar{
    flex-shrink:0;display:flex;align-items:center;gap:4px;
    padding:6px 16px;background:var(--white);
    border-bottom:1px solid var(--border-light);flex-wrap:wrap;
  }
  .jt-toolbar-spacer{flex:1}
  .jt-tool-btn{
    position:relative;width:30px;height:30px;
    border:1.5px solid var(--border);border-radius:6px;
    background:var(--white);color:var(--text-muted);
    cursor:pointer;display:flex;align-items:center;justify-content:center;
    transition:background .15s,color .15s;
  }
  .jt-tool-btn:hover{background:var(--border-light);color:var(--brown)}
  .jt-tool-btn[data-tip]::after{
    content:attr(data-tip);position:absolute;top:calc(100% + 6px);left:50%;
    transform:translateX(-50%);background:var(--brown-dark);color:var(--cream);
    font-family:var(--sans);font-size:.7rem;font-weight:600;
    padding:4px 10px;border-radius:5px;white-space:nowrap;
    opacity:0;pointer-events:none;transition:opacity .15s;z-index:20;
  }
  .jt-tool-btn:hover::after{opacity:1}
  .journal-editor-wrap{
    flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;
  }
  /* ── Mira File-Ops Strip ──────────────────────────────
   * A Mira-styled strip ABOVE SuperDoc's native toolbar. Mira owns the
   * file menu (Open/Save/Save As/Sync/Unlink/Download/Print/Find/Comments);
   * SuperDoc owns formatting. Visually they form ONE unit — shared cream
   * background + bottom-only border on the strip so the SuperDoc toolbar
   * butts up against it without a double seam.
   */
  .mfo-strip{
    flex-shrink:0;display:flex;align-items:center;gap:6px;
    padding:6px 14px;background:#FAF6F0;
    border-bottom:1px solid #D7CCC8;
    font-family:var(--sans);
  }
  .mfo-strip-left,.mfo-strip-right{
    display:flex;align-items:center;gap:4px;flex:0 0 auto;
  }
  .mfo-strip-center{
    flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
    min-width:0;
  }
  .mfo-filename{
    font-family:var(--serif,'Times New Roman',Georgia,serif);
    font-size:.92rem;color:#35201A;font-weight:600;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:340px;
  }
  .mfo-dirty-dot{
    font-size:1rem;line-height:1;flex-shrink:0;
    width:14px;text-align:center;cursor:default;
  }
  .mfo-dirty-dot.mfo-dirty{color:#7A3A10}
  .mfo-dirty-dot.mfo-clean{color:#9E7A3C;opacity:.55}
  .mfo-sep{
    width:1px;height:18px;background:#D7CCC8;margin:0 4px;flex-shrink:0;
  }
  .mfo-btn{
    position:relative;width:28px;height:28px;
    border:1px solid transparent;border-radius:5px;
    background:transparent;color:#35201A;
    cursor:pointer;display:flex;align-items:center;justify-content:center;
    transition:background .12s,border-color .12s,color .12s;
  }
  .mfo-btn:hover{background:#F0EBE3;border-color:#D7CCC8;color:#7A3A10}
  .mfo-btn:active{background:#E8DFD3}
  .mfo-btn.is-active{background:#9E7A3C;color:#FAF6F0;border-color:#9E7A3C}
  .mfo-btn[disabled]{opacity:.4;cursor:not-allowed}
  .mfo-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;
  }
  /* Tooltips on left-strip buttons (Open/Save/Save As/Sync/Unlink) would
   * extend past the editor-wrap left edge when centered, and overflow:hidden
   * on .journal-editor-wrap clips them. Anchor at the button's left edge
   * so the tooltip extends right (always visible). */
  .mfo-strip-left .mfo-btn[data-tip]::after{ left:0; transform:none; }
  /* Mirror on the right side so rightmost-button tooltips don't extend past
   * the editor area's right edge. */
  .mfo-strip-right .mfo-btn[data-tip]::after{ left:auto; right:0; transform:none; }
  .mfo-btn:hover::after{opacity:.96}
  /* Visually merge the strip with SuperDoc's toolbar below.
   * SuperDoc paints into #superdocToolbar with its own background; we
   * remove top border from the toolbar so the seam is single. */
  .superdoc-mira-toolbar{border-top:0}

  /* ── SuperDoc native toolbar — Mira aesthetic skin ────────────
   * Targets ONLY the verified runtime classes:
   *   .superdoc-toolbar    — SuperDoc-rendered inner wrapper (paints white by
   *                          default via --sd-ui-toolbar-bg). Must be cream.
   *   .toolbar-item-ctn    — button container (sized 28×28 to match .mfo-btn)
   *   .toolbar-button      — visible button surface (bg/border/color)
   *   .toolbar-separator   — 20×32 wrapper around the 2×20 .separator-inner.
   *                          Wrapper MUST stay transparent — only the inner
   *                          rule is allowed to carry the divider color.
   *                          Painting the wrapper produces 20×32 tan boxes
   *                          between every group (Smoke 34 regression).
   *   .sd-tooltip-content  — tooltip popup (Vue Teleport sibling of body)
   *   .sd-tooltip-arrow    — tooltip arrow
   * NEVER target .sd-tooltip-trigger — it's an invisible wrapper around
   * every button; styling it paints over every button as a dark pill.
   * That was the 2026-05-09 reverted-block bug. Do not regress.
   *
   * SuperDoc exposes CSS custom properties (verified via vendor/superdoc
   * /style.css) that we override at the host element so internal rules
   * pick them up instead of needing !important everywhere. */
  #superdocToolbar{
    background:#FAF6F0;
    border-top:1px solid #D7CCC8;

    /* Variables consumed by SuperDoc's internal toolbar CSS */
    --sd-ui-bg:#FAF6F0;
    --sd-ui-toolbar-bg:#FAF6F0;
    --sd-ui-toolbar-height:28px;
    --sd-ui-toolbar-item-padding:4px;
    --sd-ui-toolbar-padding-y:6px;
    --sd-ui-toolbar-padding-x:14px;
    --sd-ui-radius:5px;
    --sd-ui-toolbar-button-hover-bg:#F0EBE3;
    --sd-ui-toolbar-button-active-bg:#E8DFD3;
    --sd-ui-hover-bg:#F0EBE3;
    --sd-ui-active-bg:#E8DFD3;
    --sd-ui-border:#D7CCC8;
  }

  /* SuperDoc's inner wrapper paints white through --sd-ui-toolbar-bg above,
   * but belt-and-braces: also pin it directly. Without this, smoke 34 showed
   * a bright-white strip 4px taller than the toolbar row. */
  #superdocToolbar .superdoc-toolbar{
    background:#FAF6F0 !important;
  }

  /* Button container — match Mira's .mfo-btn sizing + spacing */
  #superdocToolbar .toolbar-item-ctn{
    min-width:28px;
    height:28px;
    border-radius:5px;
    transition:background .12s,border-color .12s,color .12s;
  }

  /* The actual visible button surface */
  #superdocToolbar .toolbar-button{
    background:transparent !important;
    color:#35201A !important;
    border:1px solid transparent !important;
    border-radius:5px !important;
    padding:4px !important;
    /* Pin height so .toolbar-dropdown.toolbar-button doesn't grow to 41px
     * from internal label/caret stacking — keeps every button on the row. */
    height:28px !important;
    max-height:28px !important;
    line-height:1 !important;
    transition:background .12s,border-color .12s,color .12s !important;
  }

  /* Toolbar-dropdowns are inline-flex without an explicit height; clamp them
   * so the Style/Font/Size/Align/List/Table/Image dropdowns sit on the row. */
  #superdocToolbar .toolbar-dropdown,
  #superdocToolbar .toolbar-dropdown-trigger{
    height:28px !important;
    max-height:28px !important;
    align-items:center !important;
  }

  /* Hover — cream-dark with subtle border + warm-brown icon */
  #superdocToolbar .toolbar-item-ctn:not(.disabled):hover .toolbar-button,
  #superdocToolbar .toolbar-button:hover{
    background:#F0EBE3 !important;
    border-color:#D7CCC8 !important;
    color:#7A3A10 !important;
  }

  /* Active / pressed (mouse-down) */
  #superdocToolbar .toolbar-button:active{
    background:#E8DFD3 !important;
  }

  /* Selected/active state (e.g. Bold pressed when cursor is in bold text) */
  #superdocToolbar .toolbar-button.active,
  #superdocToolbar .toolbar-button[aria-pressed="true"],
  #superdocToolbar .toolbar-item-ctn.active .toolbar-button{
    background:#9E7A3C !important;
    color:#FAF6F0 !important;
    border-color:#9E7A3C !important;
  }

  /* Disabled — mirror Mira's .4 opacity convention. SuperDoc ships
   * `.disabled{opacity:.5}` at .superdoc-toolbar scope; our !important wins. */
  #superdocToolbar .toolbar-item-ctn.disabled,
  #superdocToolbar .toolbar-button.disabled{
    opacity:.4 !important;
  }

  /* Icons — inherit color from parent so they pick up our brown */
  #superdocToolbar .toolbar-icon,
  #superdocToolbar .toolbar-icon__icon,
  #superdocToolbar svg{
    color:inherit !important;
  }

  /* Dropdown caret — match icon color */
  #superdocToolbar .toolbar-button__caret,
  #superdocToolbar .dropdown-caret{
    color:inherit !important;
  }

  /* Split-button vertical divider between main + caret halves — keep subtle */
  #superdocToolbar .toolbar-button.split .toolbar-button__caret::before{
    background-color:#D7CCC8 !important;
  }

  /* Group separators — ONLY paint the 2×20 inner line, NEVER the 20×32
   * wrapper. Painting the wrapper showed up as cream-tan rectangles between
   * every group in Smoke 34 — that was the "strange boxes" maintainer called
   * out. The wrapper must stay transparent. */
  #superdocToolbar .toolbar-separator{
    background:transparent !important;
  }
  #superdocToolbar .separator-inner{
    background:#D7CCC8 !important;
  }

  /* Font-size input — Mira input look */
  #superdocToolbar .button-text-input{
    background:#FAF6F0 !important;
    color:#35201A !important;
    border:1px solid #D7CCC8 !important;
    border-radius:4px !important;
    font-family:var(--sans) !important;
    font-size:.72rem !important;
  }
  #superdocToolbar .button-text-input:focus{
    border-color:#9E7A3C !important;
    outline:none !important;
  }

  /* Inline-text-input wrapper (zoom %, font-size) — strip the wrapper box
   * so only the input itself shows chrome, matching the upper strip's
   * "icon-only chip" aesthetic. */
  #superdocToolbar .toolbar-button.has-inline-text-input{
    background:transparent !important;
    border-color:transparent !important;
  }
  #superdocToolbar .toolbar-button.has-inline-text-input:hover{
    background:#F0EBE3 !important;
    border-color:#D7CCC8 !important;
  }

  /* TOOLTIP POPUP — target ONLY .sd-tooltip-content (the popover element).
   * NEVER target .sd-tooltip-trigger (the wrapper around every button).
   * The previous attempt used [class*="tooltip"] which matched the trigger
   * and broke every button. */
  .sd-tooltip-content{
    background:#35201A !important;
    color:#FAF6F0 !important;
    font-family:var(--sans) !important;
    font-size:.68rem !important;
    font-weight:600 !important;
    padding:3px 8px !important;
    border-radius:4px !important;
    white-space:nowrap !important;
    box-shadow:0 2px 8px rgba(40,25,15,.18) !important;
    line-height:1.2 !important;
  }

  /* Tooltip arrow — match the brown-dark of the popup */
  .sd-tooltip-arrow{
    background:#35201A !important;
    border-color:#35201A !important;
  }

  /* ── Comments + Tracked-Changes side panel ─────────────
   * Hidden by default; #mfoCommentsBtn toggles `display:flex`.
   * SuperComments mounts inside #mfoCpComments via the documented
   * superdoc.addCommentsList(panelEl) call (Agent C confirmed API). */
  .manuscript-editor-area{position:relative;flex:1;display:flex;min-width:0;overflow:hidden}
  /* Comments panel slides in from the right edge of the editor area
   * (Item 44, 2026-05-09). Position:absolute keeps the editor's flex
   * width unchanged when the panel opens; transform animates the
   * slide. JS toggles `.is-open` instead of mutating style.display. */
  .mfo-comments-panel{
    position:absolute;top:0;right:0;height:100%;
    width:280px;flex:0 0 280px;
    display:flex;flex-direction:column;
    background:#FAF6F0;
    border-left:1px solid #D7CCC8;
    color:#35201A;font-family:var(--sans);
    overflow:hidden;
    transform:translateX(100%);
    transition:transform .22s ease;
    z-index:5;
  }
  .mfo-comments-panel.is-open{
    transform:translateX(0);
  }
  .mfo-cp-header{
    flex-shrink:0;display:flex;align-items:center;justify-content:space-between;
    padding:10px 12px;border-bottom:1px solid #D7CCC8;
    background:#F0EBE3;
  }
  .mfo-cp-title{
    font-size:.82rem;font-weight:700;color:#35201A;letter-spacing:.2px;
  }
  .mfo-cp-actions{
    flex-shrink:0;display:flex;gap:6px;padding:8px 12px;
    border-bottom:1px solid #D7CCC8;
  }
  /* Item 46 (2026-05-09): Accept/Reject all buttons take 14×14 SVG
   * icons before their label, matching the file-ops strip's icon
   * style (stroke=currentColor, viewBox 0 0 16 16). Flex layout
   * keeps icon+label inline; height 28px matches the strip's button
   * convention. */
  .mfo-cp-actions .btn-sm{
    flex:1;height:28px;padding:5px 8px;
    display:flex;align-items:center;justify-content:center;gap:6px;
    border:1px solid #D7CCC8;border-radius:4px;
    background:#FAF6F0;color:#35201A;
    font-family:var(--sans);font-size:.72rem;font-weight:600;
    cursor:pointer;transition:background .12s,border-color .12s;
  }
  .mfo-cp-actions .btn-sm svg{flex-shrink:0}
  .mfo-cp-actions .btn-sm:hover{background:#F0EBE3;border-color:#9E7A3C}
  .mfo-cp-comments{
    flex:1;overflow-y:auto;padding:10px 12px;
    font-size:.78rem;line-height:1.45;color:#35201A;
  }
  .mfo-cp-comments:empty::before{
    content:"No comments yet.";
    display:block;color:#9E7A3C;font-style:italic;font-size:.78rem;
  }

  /* ── Mira File-Ops Strip — premium feedback layer ───────
   * Status banner, filename flash, dirty-dot pulse, button click-state,
   * Find popover. All animations 180-280ms cubic-bezier. Layout-stable:
   * status reserves no space when empty so strip doesn't reflow.
   */
  .mfo-strip-center{
    /* Allow the status to layer below filename without pushing it. */
    flex-wrap:wrap;flex-direction:row;
    position:relative;
  }
  .mfo-status{
    display:inline-block;
    font-family:var(--serif,'Times New Roman',Georgia,serif);
    font-size:.78rem;font-style:italic;
    color:#9E7A3C;
    max-width:340px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    opacity:0;transform:translateY(-2px);
    transition:opacity 200ms cubic-bezier(.22,.61,.36,1),
               transform 200ms cubic-bezier(.22,.61,.36,1),
               color 200ms cubic-bezier(.22,.61,.36,1);
    pointer-events:none;
    /* Empty state takes no horizontal space so center column doesn't widen. */
    width:0;margin-left:0;
  }
  .mfo-status.is-visible{
    opacity:1;transform:translateY(0);
    width:auto;margin-left:4px;
  }
  .mfo-status.mfo-status-progress{color:#9E7A3C}
  .mfo-status.mfo-status-success{color:#9E7A3C}
  .mfo-status.mfo-status-error{color:#7A3A10}
  .mfo-status.mfo-status-info{color:#9E7A3C;opacity:.85}
  .mfo-status .mfo-status-glyph{
    display:inline-block;margin-right:4px;font-style:normal;
    font-size:.82rem;line-height:1;vertical-align:baseline;
  }
  /* Animated ellipsis for in-progress states. We append .mfo-status-dots
   * inside the status text so the dots animate without re-layout. */
  .mfo-status-dots{
    display:inline-block;width:1.1em;text-align:left;font-style:normal;
  }
  .mfo-status-dots::after{
    content:".";
    animation:mfo-status-ellipsis 1200ms steps(3,end) infinite;
  }
  @keyframes mfo-status-ellipsis{
    0%   { content:"."; }
    33%  { content:".."; }
    66%  { content:"..."; }
    100% { content:"."; }
  }

  /* Filename flash — cream → gold-tint → cream, brief scale. */
  .mfo-filename.is-flashing{
    animation:mfo-filename-flash 600ms cubic-bezier(.22,.61,.36,1);
  }
  @keyframes mfo-filename-flash{
    0%   { background-color:transparent;transform:scale(1.00);
           box-shadow:0 0 0 0 rgba(158,122,60,0); }
    35%  { background-color:#F0EBE3;transform:scale(1.04);
           box-shadow:0 0 0 3px rgba(158,122,60,.18); }
    100% { background-color:transparent;transform:scale(1.00);
           box-shadow:0 0 0 0 rgba(158,122,60,0); }
  }
  .mfo-filename{
    /* Allow the flash background to render around the text. */
    padding:1px 6px;border-radius:4px;
    transition:background-color 200ms cubic-bezier(.22,.61,.36,1);
  }

  /* Dirty-dot pulse on save-confirm. Subtle gold ring expands + fades. */
  .mfo-dirty-dot.is-pulsing{
    animation:mfo-dot-pulse 300ms cubic-bezier(.22,.61,.36,1);
  }
  @keyframes mfo-dot-pulse{
    0%   { transform:scale(1.00);text-shadow:0 0 0 rgba(158,122,60,0); }
    50%  { transform:scale(1.30);text-shadow:0 0 6px rgba(158,122,60,.55); }
    100% { transform:scale(1.00);text-shadow:0 0 0 rgba(158,122,60,0); }
  }
  .mfo-dirty-dot{
    transition:color 180ms cubic-bezier(.22,.61,.36,1);
  }

  /* Button click feedback — briefly raised look so user sees the click. */
  .mfo-btn.mfo-btn-active{
    background:#F0EBE3;
    border-color:#9E7A3C;
    color:#7A3A10;
    box-shadow:inset 0 1px 2px rgba(40,25,15,.12),
               0 0 0 2px rgba(158,122,60,.18);
    transition:background 180ms cubic-bezier(.22,.61,.36,1),
               border-color 180ms cubic-bezier(.22,.61,.36,1),
               box-shadow 200ms cubic-bezier(.22,.61,.36,1);
  }

  /* ── Find popover ────────────────────────────────────── */
  #mfoFindPopover{
    position:absolute;z-index:40;
    display:none;align-items:center;gap:6px;
    padding:6px 8px;
    background:#FAF6F0;
    border:1px solid #D7CCC8;
    border-radius:5px;
    box-shadow:0 2px 8px rgba(40,25,15,.18);
    font-family:var(--sans);
    color:#35201A;
  }
  #mfoFindPopover.is-open{
    display:flex;
    animation:mfo-find-slidein 220ms cubic-bezier(.22,.61,.36,1);
  }
  @keyframes mfo-find-slidein{
    0%   { opacity:0;transform:translateY(-8px); }
    100% { opacity:1;transform:translateY(0); }
  }
  #mfoFindPopover .mfo-find-icon{
    width:16px;height:16px;color:#9E7A3C;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
  }
  #mfoFindPopover .mfo-find-input{
    width:200px;height:24px;padding:2px 8px;
    background:#F5EFE6;border:1px solid #D7CCC8;color:#35201A;
    font-family:var(--sans);font-size:.8rem;
    border-radius:4px;outline:none;
    transition:border-color 180ms cubic-bezier(.22,.61,.36,1),
               box-shadow 180ms cubic-bezier(.22,.61,.36,1);
  }
  #mfoFindPopover .mfo-find-input:focus{
    border-color:#9E7A3C;
    outline:none;
  }
  #mfoFindPopover .mfo-find-counter{
    font-family:var(--serif,'Times New Roman',Georgia,serif);
    color:#35201A;font-size:.78rem;font-weight:600;
    min-width:60px;text-align:center;
    transition:color 180ms cubic-bezier(.22,.61,.36,1);
  }
  #mfoFindPopover .mfo-find-counter.is-empty{color:#7A3A10}
  #mfoFindPopover .mfo-find-nav,
  #mfoFindPopover .mfo-find-close{
    width:22px;height:22px;
    border:1px solid transparent;border-radius:4px;
    background:transparent;color:#35201A;
    cursor:pointer;display:flex;align-items:center;justify-content:center;
    font-family:var(--sans);font-size:.78rem;line-height:1;
    transition:background 150ms cubic-bezier(.22,.61,.36,1),
               border-color 150ms cubic-bezier(.22,.61,.36,1),
               color 150ms cubic-bezier(.22,.61,.36,1);
  }
  #mfoFindPopover .mfo-find-nav:hover,
  #mfoFindPopover .mfo-find-close:hover{
    background:#F0EBE3;border-color:#D7CCC8;color:#7A3A10;
  }
  #mfoFindPopover .mfo-find-nav[disabled]{opacity:.4;cursor:not-allowed}

  /* Bibliography fade-in on first render. */
  .mira-biblio-fadein{
    animation:mfo-biblio-fadein 800ms cubic-bezier(.22,.61,.36,1);
  }
  @keyframes mfo-biblio-fadein{
    0%   { background-color:rgba(158,122,60,.18); }
    100% { background-color:transparent; }
  }
  .jt-linked-info{
    display:flex;align-items:center;gap:8px;
    font-family:var(--sans);font-size:.78rem;color:var(--text);
  }
  .jt-linked-name{
    font-weight:700;color:var(--brown-dark);max-width:200px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .jt-unlink-btn{
    padding:2px 8px;border:1px solid var(--border);background:transparent;
    border-radius:4px;cursor:pointer;color:var(--text-muted);
    font-family:var(--sans);font-size:.68rem;font-weight:600;
    transition:background .12s,color .12s;
  }
  .jt-unlink-btn:hover{background:rgba(139,69,19,.06);color:var(--accent)}
  .jt-send-count{
    font-family:var(--sans);font-size:.7rem;font-weight:600;
    color:var(--gold);margin-left:auto;
  }
  /* Context menu */
  .journal-ctx-menu{
    position:fixed;background:var(--white);border:1px solid var(--border);
    border-radius:8px;box-shadow:0 6px 24px var(--shadow);z-index:100;
    min-width:210px;padding:4px 0;display:none;
    font-family:var(--sans);font-size:.8rem;
  }
  .journal-ctx-menu.visible{display:block}
  .journal-ctx-menu-item{
    display:flex;align-items:center;gap:8px;padding:8px 14px;
    cursor:pointer;color:var(--text);transition:background .1s;
  }
  .journal-ctx-menu-item:hover{background:rgba(139,69,19,.05)}
  .journal-ctx-menu-item svg{flex-shrink:0;opacity:.55}
  .ctx-menu-sep{height:1px;background:var(--border-light);margin:4px 0}
  .ctx-type-badge{
    display:inline-block;font-size:.6rem;font-weight:700;
    text-transform:uppercase;letter-spacing:.3px;
    padding:1px 6px;border-radius:3px;margin-left:auto;
  }
  .ctx-source{background:rgba(158,122,60,.12);color:var(--gold)}
  .ctx-llm{background:rgba(139,69,19,.1);color:var(--accent)}
  .ctx-researcher{background:rgba(93,64,55,.08);color:var(--brown-light)}
  /* Toast notification */
  .journal-toast{
    position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(20px);
    background:var(--brown-dark);color:var(--cream);
    font-family:var(--sans);font-size:.78rem;font-weight:600;
    padding:10px 22px;border-radius:8px;
    box-shadow:0 4px 16px var(--shadow);
    opacity:0;pointer-events:none;z-index:200;
    transition:opacity .25s,transform .25s;
  }
  .journal-toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
  .journal-editor{
    flex:1;overflow-y:auto;padding:0;
    font-family:'Times New Roman',serif;font-size:1rem;line-height:1.5;
    color:var(--text);outline:none;
    background:var(--cream-dark);
  }
  .journal-editor::-webkit-scrollbar{width:7px}
  .journal-editor::-webkit-scrollbar-thumb{background:var(--border);border-radius:9px}
  .journal-editor:empty::before{
    content:attr(data-placeholder);
    color:var(--text-muted);font-style:italic;pointer-events:none;
  }
  /* TipTap / ProseMirror — paper page styling.
     Page size is driven by CSS custom properties written onto
     #journalEditorWrap by the Pagination extension. Defaults are
     US Letter (8.5×11 at 96dpi, 1" margins). Soft page boundaries
     are rendered as .journal-page-gutter decoration widgets (see
     below); hard Ctrl+Enter breaks are .journal-page-break nodes.
     The ProseMirror element itself stays a single tall page that
     the gutter widgets slice into visually-distinct pages. */
  #journalEditorWrap{
    --page-w: 816px;
    --page-h: 1056px;
    --page-margin-top: 96px;
    --page-margin-right: 96px;
    --page-margin-bottom: 96px;
    --page-margin-left: 96px;
    --page-gutter: 40px;
  }
  .journal-editor .ProseMirror{
    outline:none;
    font-family:'Times New Roman',serif;font-size:12pt;line-height:2;
    color:#000;
    background:var(--white);
    max-width:var(--page-w);
    box-sizing:border-box;
    margin:28px auto;
    padding:var(--page-margin-top) var(--page-margin-right)
            var(--page-margin-bottom) var(--page-margin-left);
    box-shadow:0 2px 12px rgba(62,39,35,.12),0 0 0 1px rgba(62,39,35,.04);
    border-radius:2px;
    /* min-height so an empty document still shows one full page. */
    min-height:var(--page-h);
  }
  /* maintainer 2026-05-11: Times New Roman is the unconditional default for
   * everything inside the editor. SuperDoc / TipTap's textStyle schema
   * stamps `style="font-family: Arial"` on new paragraphs (the schema
   * default), which overrides our CSS via inline-style specificity.
   * Force Times New Roman on every descendant with !important so the
   * inline Arial loses. Toolbar font-picker still works because those
   * picker selections set a data-mira-font attribute, which the
   * exception rule below restores to its picked value. */
  .journal-editor .ProseMirror,
  .journal-editor .ProseMirror p,
  .journal-editor .ProseMirror div,
  .journal-editor .ProseMirror span,
  .journal-editor .ProseMirror li,
  .journal-editor .ProseMirror blockquote,
  .journal-editor .ProseMirror h1,
  .journal-editor .ProseMirror h2,
  .journal-editor .ProseMirror h3,
  .journal-editor .ProseMirror h4,
  .journal-editor .ProseMirror h5,
  .journal-editor .ProseMirror h6{
    font-family:'Times New Roman',Georgia,serif !important;
  }
  /* Toolbar font-picker overrides still win when the user explicitly
   * picks a non-default family — the picker tags the span with
   * data-mira-font="<name>" and we let the inline style through. */
  .journal-editor .ProseMirror [data-mira-font]:not([data-mira-font="Times New Roman"]){
    font-family:revert !important;
  }
  /* Backstop — content saved with explicit inline font-family:Arial
   * (the SuperDoc schema default for new paragraphs) gets coerced
   * back to Times New Roman at render time. */
  .journal-editor .ProseMirror [style*="font-family: Arial"],
  .journal-editor .ProseMirror [style*='font-family:Arial'],
  .journal-editor .ProseMirror [style*='font-family: "Arial"']{
    font-family:'Times New Roman',Georgia,serif !important;
  }
  /* SuperDoc (D1+D3+D4 work, maintainer 2026-05-08) — match the TipTap
   * .ProseMirror page-look: white page, max-width 816px (US Letter at
   * 96dpi), centered with `margin: 28px auto`, soft shadow, rounded
   * corners. SuperDoc renders its document into nested elements; we
   * style every plausible candidate so whichever one is the visible
   * page surface picks up the centering. */
  .mira-superdoc-host{
    display:flex;
    flex-direction:column;
    background:var(--cream-dark);
    overflow-y:auto;
  }
  .mira-superdoc-mount{
    flex:1;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding:28px 0;
  }
  /* 2026-05-09: Removed the speculative page-styling block that targeted
   * `.superdoc, .sd-page, .superdoc-page, [class*="Page"], > div:first-child > div`.
   *
   * SuperDoc 1.31 emits the layered DOM `.superdoc → .superdoc__layers
   * → .superdoc__document → .super-editor-container → .super-editor →
   * .ProseMirror`. The 2-level-descendant heuristic (`> div > div`)
   * landed on `.superdoc__layers` (NOT a page surface), forcing
   * max-width:816px + box-shadow + background:white onto a layout
   * container — combined with SuperDoc's own `.super-editor{overflow:hidden}`
   * (vendor/superdoc/style.css:302), the real `.ProseMirror` two layers
   * deeper got clipped off-screen. The `PresentationInputBridge` then
   * couldn't discover the correct visible host, breaking click→focus
   * forwarding and making the document untypable.
   *
   * SuperDoc styles its own page via the `--sd-layout-page-bg` /
   * `--sd-layout-page-shadow` design tokens; Mira's `_injectFallbackThemeCSS`
   * (journal/journal-superdoc.js:127–145) already overrides those.
   * Centering happens via SuperDoc's `.superdoc--web-layout` flex layout. */
  /* Inner content (ProseMirror surface SuperDoc creates) — typography
   * matches TipTap's. SuperDoc emits a .ProseMirror under its host so
   * this rule complements (does not conflict with) the .journal-editor
   * .ProseMirror block above. */
  .mira-superdoc-host .ProseMirror{
    font-family:'Times New Roman',serif;font-size:12pt;line-height:2;
    color:#000;outline:none;
    padding:var(--page-margin-top) var(--page-margin-right)
            var(--page-margin-bottom) var(--page-margin-left);
  }
  /* maintainer 2026-05-11: same Times-New-Roman-default treatment for the
   * SuperDoc editor surface as the legacy ProseMirror block above.
   * SuperDoc stamps `style="font-family:Arial"` on new paragraphs from
   * its schema; this rule + the data-mira-font exception override the
   * inline style without breaking the toolbar font picker. */
  .mira-superdoc-host .ProseMirror,
  .mira-superdoc-host .ProseMirror p,
  .mira-superdoc-host .ProseMirror div,
  .mira-superdoc-host .ProseMirror span,
  .mira-superdoc-host .ProseMirror li,
  .mira-superdoc-host .ProseMirror blockquote,
  .mira-superdoc-host .ProseMirror h1,
  .mira-superdoc-host .ProseMirror h2,
  .mira-superdoc-host .ProseMirror h3,
  .mira-superdoc-host .ProseMirror h4,
  .mira-superdoc-host .ProseMirror h5,
  .mira-superdoc-host .ProseMirror h6{
    font-family:'Times New Roman',Georgia,serif !important;
  }
  .mira-superdoc-host .ProseMirror [data-mira-font]:not([data-mira-font="Times New Roman"]){
    font-family:revert !important;
  }
  .mira-superdoc-host .ProseMirror [style*="font-family: Arial"],
  .mira-superdoc-host .ProseMirror [style*='font-family:Arial'],
  .mira-superdoc-host .ProseMirror [style*='font-family: "Arial"']{
    font-family:'Times New Roman',Georgia,serif !important;
  }
  .journal-editor .ProseMirror:focus{outline:none}
  .journal-editor .ProseMirror p.is-editor-empty:first-child::before{
    content:"Begin writing...";
    color:var(--text-muted);font-style:italic;pointer-events:none;
    float:left;height:0;
  }
  /* Format buttons (inside .jt-toolbar) */
  .jt-fmt-btn{
    position:relative;width:30px;height:30px;
    border:1.5px solid var(--border);border-radius:6px;
    background:var(--white);color:var(--text-muted);
    cursor:pointer;display:flex;align-items:center;justify-content:center;
    font-family:var(--serif);font-size:.82rem;font-weight:600;
    transition:background .15s,color .15s;
  }
  .jt-fmt-btn:hover{background:var(--border-light);color:var(--brown)}
  .jt-fmt-btn.active{background:var(--gold);color:var(--white);border-color:var(--gold)}
  .jt-fmt-btn[data-tip]::after{
    content:attr(data-tip);position:absolute;top:calc(100% + 6px);left:50%;
    transform:translateX(-50%);background:var(--brown-dark);color:var(--cream);
    font-family:var(--sans);font-size:.7rem;font-weight:600;
    padding:4px 10px;border-radius:5px;white-space:nowrap;
    opacity:0;pointer-events:none;transition:opacity .15s;z-index:20;
  }
  .jt-fmt-btn:hover::after{opacity:1}
  .jt-fmt-sep{
    width:1px;height:20px;background:var(--border);margin:0 4px;
  }
  .jt-font-select,.jt-fontsize-select,.jt-spacing-select{
    height:28px;border:1.5px solid var(--border);border-radius:6px;
    background:var(--white);color:var(--text);
    font-family:var(--sans);font-size:.75rem;
    padding:0 6px;cursor:pointer;outline:none;
  }
  .jt-font-select{max-width:130px}
  .jt-fontsize-select{width:48px;text-align:center}
  .jt-spacing-select{width:52px;text-align:center}
  .jt-spacing-wrap{position:relative;display:inline-flex}
  .jt-spacing-wrap[data-tip]::after{
    content:attr(data-tip);position:absolute;top:calc(100% + 6px);left:50%;
    transform:translateX(-50%);background:var(--brown-dark);color:var(--cream);
    font-family:var(--sans);font-size:.7rem;font-weight:600;
    padding:4px 10px;border-radius:5px;white-space:nowrap;
    opacity:0;pointer-events:none;transition:opacity .15s;z-index:20;
  }
  .jt-spacing-wrap:hover::after{opacity:1}
  .jt-font-select:hover,.jt-fontsize-select:hover,.jt-spacing-select:hover{border-color:var(--gold)}
  .jt-font-select:focus,.jt-fontsize-select:focus,.jt-spacing-select:focus{border-color:var(--gold);box-shadow:0 0 0 2px rgba(158,122,60,.15)}
  /* Page break visual — hard break (Ctrl+Enter). Uses the same
     page-margin variables so the break bleeds to the page edges. */
  .journal-page-break{
    margin-left:calc(-1 * var(--page-margin-left, 96px));
    margin-right:calc(-1 * var(--page-margin-right, 96px));
    user-select:none;
  }
  .jpb-edge-bottom{
    height:12px;background:var(--white);
    box-shadow:0 2px 6px rgba(62,39,35,.1);
  }
  .jpb-gap{
    height:24px;background:var(--cream-dark);
  }
  .jpb-edge-top{
    height:12px;background:var(--white);
    box-shadow:0 -2px 6px rgba(62,39,35,.1);
  }

  /* Soft page boundary — inserted by the Pagination extension as
     a ProseMirror Decoration widget. Looks like two facing page
     edges with a dark gutter between, labelled "— Page N —" on
     each side. The negative margins bleed through the editor's
     padding so the gutter spans the full paper width. The
     extension keeps the document model clean — these are visual
     only, never serialise to .docx (Word repaginates on open). */
  .journal-page-gutter{
    margin-left:calc(-1 * var(--page-margin-left, 96px));
    margin-right:calc(-1 * var(--page-margin-right, 96px));
    user-select:none;
    position:relative;
    background:var(--cream-dark);
  }
  .journal-page-gutter .jpg-filler{
    background:var(--white);
    box-shadow:0 2px 6px rgba(62,39,35,.10);
  }
  .journal-page-gutter .jpg-band{
    background:var(--cream-dark);
    display:flex;align-items:center;justify-content:center;
  }
  .journal-page-gutter .jpg-band .jpg-label{
    font-family:var(--sans);font-size:.65rem;font-weight:600;
    color:var(--text-muted);
    letter-spacing:.12em;text-transform:uppercase;
    opacity:.7;
  }
  .journal-page-gutter .jpg-top-margin{
    background:var(--white);
    box-shadow:0 -2px 6px rgba(62,39,35,.10);
  }

  /* Hard Ctrl+Enter PageBreak node: in paginated mode the
     Pagination extension emits a gutter widget in front of this
     node and handles the visual break. Hide the node's own
     decorative divs so we don't end up with two stacked breaks. */
  .journal-page-break{display:none !important}

  /* Filler pins footnotes to the bottom of the page's content
     area (flex justify-content:flex-end). Padding-bottom equals
     the page's bottom margin so the footnotes sit ABOVE the
     margin strip, exactly where Word places them.
     `overflow: hidden` is a safety net: if actual footnote block
     height exceeds the reserved space (should be rare now that
     the extension measures real heights), the overflow is clipped
     inside the filler box rather than painting over body text
     above — ugly but not catastrophic. */
  .journal-page-gutter .jpg-filler{
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:0 var(--page-margin-right, 96px) var(--page-margin-bottom, 96px) var(--page-margin-left, 96px);
    box-sizing:border-box;
    overflow:hidden;
  }
  .journal-page-gutter .jpg-footnotes{
    font-family:'Times New Roman',serif;
    font-size:10pt;line-height:1.35;color:#000;
    padding-top:8px;
  }
  .journal-page-gutter .jpg-footnotes-rule{
    border:none;border-top:1px solid #888;
    margin:0 0 6px;
    width:40%;
  }
  .journal-page-gutter .jpg-fn-entry{
    display:flex;gap:6px;margin:0 0 3px;
  }
  .journal-page-gutter .jpg-fn-num{
    flex:0 0 auto;font-variant-numeric:tabular-nums;
  }
  .journal-page-gutter .jpg-fn-text{
    flex:1 1 auto;
  }
  .journal-page-gutter .jpg-fn-empty{
    color:var(--text-muted);font-style:italic;
  }

  /* Final-page widget — no band or top-margin, just the content
     filler so footnotes on the last page pin to the bottom. */
  .journal-page-gutter-final{
    background:transparent;
  }

  /* The legacy aggregated footer under ProseMirror is obsolete
     once per-page footnotes are rendered inside the gutter
     widgets. Hide it so users don't see the same footnotes
     twice (once per page + once at the document end). */
  .journal-footnotes-footer{display:none !important}

  /* Page size picker — same visual weight as the other toolbar selects. */
  .jt-pagesize-select{
    height:28px;border:1.5px solid var(--border);border-radius:6px;
    background:var(--white);color:var(--text);
    font-family:var(--sans);font-size:.75rem;
    padding:0 6px;cursor:pointer;outline:none;
    min-width:110px;
  }
  .jt-pagesize-select:hover{border-color:var(--gold)}
  .jt-pagesize-select:focus{border-color:var(--gold);box-shadow:0 0 0 2px rgba(158,122,60,.15)}
  .jt-pagesize-wrap{position:relative;display:inline-flex}
  .jt-pagesize-wrap[data-tip]::after{
    content:attr(data-tip);position:absolute;top:calc(100% + 6px);left:50%;
    transform:translateX(-50%);background:var(--brown-dark);color:var(--cream);
    font-family:var(--sans);font-size:.7rem;font-weight:600;
    padding:4px 10px;border-radius:5px;white-space:nowrap;
    opacity:0;pointer-events:none;transition:opacity .15s;z-index:20;
  }
  .jt-pagesize-wrap:hover::after{opacity:1}
  /* Footnote inline marker — academic style */
  sup.journal-footnote{
    font-family:'Times New Roman',serif;font-size:.65em;font-weight:normal;
    color:#000;cursor:pointer;vertical-align:super;
    line-height:0;padding:0 1px;
  }
  sup.journal-footnote:hover{text-decoration:underline}
  /* Legacy: when footnotes existed, the editor shrank its bottom
     padding so the .journal-footnotes-footer could visually butt
     up against it. In the paginated layout, footnotes render
     per-page inside the gutter widgets and the footer is hidden,
     so ProseMirror must keep its full bottom margin regardless
     of whether footnotes exist. Override the shrink. */
  .journal-editor .ProseMirror.has-footnotes{
    margin-bottom:28px !important;
    padding-bottom:var(--page-margin-bottom, 96px) !important;
    border-radius:2px;
    box-shadow:0 2px 12px rgba(62,39,35,.12),0 0 0 1px rgba(62,39,35,.04);
  }
  .journal-footnotes-footer{
    max-width:816px;box-sizing:border-box;
    margin:-4px auto 28px;padding:4px 96px 96px;
    background:var(--white);position:relative;z-index:1;
    box-shadow:0 4px 12px rgba(62,39,35,.10);
    border-radius:0 0 2px 2px;
    font-family:'Times New Roman',serif;font-size:10pt;line-height:1.45;
    color:#000;user-select:text;cursor:default;
  }
  .jff-rule{
    border:none;border-top:1px solid #000;
    margin:0 0 8px;width:30%;
  }
  .jff-entry{
    display:flex;align-items:baseline;gap:6px;padding:2px 0;cursor:default;
  }
  .jff-num{flex-shrink:0;font-size:10pt;min-width:16px;cursor:pointer}
  .jff-text{flex:1;line-height:1.4}
  .jff-text[contenteditable]{
    outline:none;cursor:text;min-height:1.4em;
  }
  .jff-text[contenteditable]:focus{
    background:none;box-shadow:none;
  }
  .jff-text[data-empty]::before{
    content:attr(data-placeholder);
    color:#999;font-style:italic;
    pointer-events:none;
  }
  /* Legacy footnote panel (hidden) */
  .journal-footnotes-panel{display:none!important}
  /* maintainer 2026-05-10: default Writing Desk font is Times New Roman.
   * SuperDoc's editor extension default is Arial; setFontFamily()
   * applied at onReady doesn't always stick on empty paragraphs (the
   * mark needs text to bind to) and the toolbar's font-family display
   * lags. CSS sets the typed-text default unambiguously — text the
   * user types in a fresh blank doc renders in Times New Roman. When
   * the user opens a real .docx, that doc's own font specs take over
   * via inline style attributes (more specific than this rule). */
  #journalEditor .ProseMirror,
  #journalEditor .ProseMirror p,
  #journalEditor .ProseMirror span:not([style*="font-family"]),
  .superdoc .ProseMirror,
  .superdoc .ProseMirror p{
    font-family:"Times New Roman", Times, serif;
  }
  .journal-editor p{margin:1px 0}
  .journal-editor h2{font-size:1.3rem;font-weight:700;margin:10px 0 4px;color:#000}
  .journal-editor h3{font-size:1.05rem;font-weight:700;margin:8px 0 2px;color:#000}
  .journal-editor blockquote{
    border-left:3px solid var(--gold);margin:6px 0;padding:6px 14px;
    background:rgba(158,122,60,.06);color:var(--text-light);font-style:italic;
  }
  .journal-editor ul,.journal-editor ol{margin:4px 0;padding-left:28px}
  .journal-editor li{margin:2px 0}
  .journal-editor hr{border:none;border-top:1px solid #000;margin:10px 0}
  .journal-editor [data-llm-content]{
    margin:4px 0;padding:8px 12px;border-radius:5px;
    background:rgba(158,122,60,.04);font-size:.88rem;line-height:1.5;
  }
  .journal-editor [data-llm-content]+p{margin-top:6px}
  .journal-editor [data-llm-content]>p:first-child strong{
    color:#CC0000;font-size:.72rem;text-transform:uppercase;letter-spacing:.5px;
  }
  .journal-editor [data-source-quote] blockquote{
    border-left:none;margin:6px 0 6px 24px;padding:0;
    background:none;font-style:italic;color:var(--text);
  }
  .journal-pull-quote{
    margin:4px 0;padding:7px 12px 6px;border-radius:6px;
    border-left:4px solid var(--gold);background:#FDF8EE;
    font-family:var(--serif);font-size:.84rem;line-height:1.35;
  }
  .journal-pull-quote.jpq-from-search{border-left-color:var(--accent)}
  .journal-pull-quote.jpq-from-explore{border-left-color:var(--brown)}
  .journal-pull-quote .jpq-source{
    display:inline-flex;align-items:center;gap:5px;
    font-family:var(--sans);
    font-size:.65rem;font-weight:800;letter-spacing:.7px;
    text-transform:uppercase;margin-bottom:5px;
    padding:3px 10px 3px 8px;border-radius:3px;
  }
  .journal-pull-quote .jpq-source.src-search{background:var(--accent);color:#fff}
  .journal-pull-quote .jpq-source.src-explore{background:var(--brown);color:var(--cream)}
  .journal-pull-quote .jpq-source::before{
    content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
    border:2px solid currentColor;flex-shrink:0;
  }
  .journal-pull-quote .jpq-meta{
    font-family:var(--sans);font-size:.68rem;font-weight:600;color:var(--text-muted);
    letter-spacing:.2px;margin-bottom:1px;
  }
  .journal-pull-quote .jpq-text{color:var(--brown-dark);font-style:italic;line-height:1.35}
  .journal-pull-quote .jpq-badge{display:none}
  .journal-empty{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    flex:1;color:var(--text-muted);text-align:center;padding:40px;
  }
  .journal-empty svg{margin-bottom:14px;opacity:.4}
  .journal-empty .je-empty-title{font-size:1rem;font-weight:700;margin-bottom:6px;color:var(--text-light)}
  .journal-empty .je-empty-sub{font-size:.82rem;line-height:1.5}
  .selection-bar .sel-journal{
    padding:5px 14px;
    background:var(--gold);color:var(--white);
    border:none;border-radius:6px;font-weight:600;font-size:.76rem;
    cursor:pointer;transition:background .15s;
    display:flex;align-items:center;gap:5px;
    margin-right:6px;
  }
  .selection-bar .sel-journal:hover{background:var(--gold-light)}
  .explorer-save-journal{
    padding:5px 12px;background:transparent;color:var(--text-muted);
    border:1px solid var(--border);border-radius:6px;font-size:.73rem;
    font-weight:600;cursor:pointer;font-family:var(--sans);
    display:flex;align-items:center;gap:5px;
    transition:border-color .15s,color .15s,background .15s;
    position:relative;
  }
  .explorer-save-journal:hover{border-color:var(--gold);color:var(--gold);background:rgba(158,122,60,.05)}
  .explorer-save-journal[data-tip]::after{
    content:attr(data-tip);
    position:absolute;top:calc(100% + 8px);right:0;
    background:var(--brown-dark);color:var(--cream);
    font-family:var(--sans);font-size:.7rem;font-weight:600;
    letter-spacing:.3px;padding:5px 11px;border-radius:6px;
    white-space:nowrap;opacity:0;pointer-events:none;
    transition:opacity .2s;
    box-shadow:0 3px 12px rgba(0,0,0,.2);
    z-index:70;
  }
  .explorer-save-journal[data-tip]:hover::after{opacity:1}
  .eq-source{
    margin-top:8px;font-family:var(--sans);font-size:.72rem;
    color:var(--text-muted);font-style:normal;
  }
  .eq-action-btn.ctx-active{
    background:rgba(158,122,60,.10);color:var(--gold);
    border-color:var(--gold);
  }
  .eq-context{
    display:none;margin-top:10px;padding:10px 12px;border-radius:5px;
    background:var(--cream-dark);font-size:.8rem;line-height:1.6;
    font-family:var(--serif);
  }
  .eq-context.visible{display:block}
  .eq-context-chunk{
    padding:6px 0;color:var(--text-light);
  }
  .eq-context-chunk + .eq-context-chunk{
    border-top:1px dashed var(--border-light);margin-top:4px;padding-top:10px;
  }
  .eq-context-current{
    color:var(--text-muted);font-style:italic;
    opacity:.6;
  }
  .eq-source-badge{
    display:inline-block;font-size:.62rem;font-weight:700;
    text-transform:uppercase;letter-spacing:.4px;
    padding:2px 7px;border-radius:3px;margin-left:6px;
    vertical-align:middle;
  }
  .eq-source-badge.badge-primary{background:rgba(139,69,19,.1);color:var(--accent)}
  .eq-source-badge.badge-editorial{background:rgba(184,134,11,.12);color:var(--gold)}
  .eq-source-badge.badge-notes{background:rgba(109,76,65,.1);color:var(--brown-light)}
  .eq-narrative{
    font-family:var(--sans);font-size:.85rem;
    line-height:1.65;color:var(--text);margin:0 0 10px;
  }
  .eq-narrative:last-child{margin-bottom:0}
  .explorer-response p{
    margin:0 0 10px;line-height:1.65;font-family:var(--sans);
    font-size:.85rem;color:var(--text);
  }
  .explorer-response p:last-child{margin-bottom:0}

  /* (removed: research-context-panel — moved to explorer settings modal) */

  /* (removed: explorer-attach-btn and explorer-input-hint — moved to settings modal) */

  /* Architecture diagram icon — global centered overlay */
  .arch-icon{
    position:fixed;top:0;left:var(--sidebar-w,220px);right:0;
    height:62px;
    display:flex;align-items:center;justify-content:center;
    pointer-events:none;z-index:50;
    opacity:.55;transition:opacity .2s;
  }
  .arch-icon:hover{opacity:.85}
  .arch-icon svg{height:52px;width:auto;pointer-events:auto;cursor:help}
  /* Active node highlighting per page */
  .arch-icon [data-node]{
    transition:transform .2s ease;
    transform-box:fill-box;transform-origin:center;
  }
  .arch-icon[data-active="acquire"] [data-node="acquire"],
  .arch-icon[data-active="organize"] [data-node="organize"],
  .arch-icon[data-active="read"] [data-node="read"],
  .arch-icon[data-active="research"] [data-node="research"],
  .arch-icon[data-active="write"] [data-node="write"],
  .arch-icon[data-active="architecture"] [data-node="architecture"]{
    transform:scale(1.6);
  }
  .arch-icon[data-active="acquire"] [data-node="acquire"] .arch-shape,
  .arch-icon[data-active="organize"] [data-node="organize"] .arch-shape,
  .arch-icon[data-active="read"] [data-node="read"] .arch-shape,
  .arch-icon[data-active="research"] [data-node="research"] .arch-shape,
  .arch-icon[data-active="write"] [data-node="write"] .arch-shape,
  .arch-icon[data-active="architecture"] [data-node="architecture"] .arch-shape{
    fill:rgba(139,69,19,.25)!important;stroke-width:1.5!important;
  }
  .arch-tooltip{
    position:absolute;pointer-events:none;z-index:999;
    background:var(--brown-dark,#3e2723);color:var(--cream,#fdf6ec);
    font-family:var(--sans);font-size:13px;font-weight:600;
    padding:6px 12px;border-radius:6px;white-space:nowrap;
    box-shadow:0 2px 8px rgba(0,0,0,.25);
    opacity:0;transition:opacity .15s ease;
  }
  .arch-tooltip.visible{opacity:1}
  .arch-tooltip::after{
    content:'';position:absolute;bottom:100%;left:50%;
    transform:translateX(-50%);border:5px solid transparent;
    border-bottom-color:var(--brown-dark,#3e2723);
  }
  .arch-node .arch-shape{transition:fill .15s ease}
  .arch-node:hover .arch-shape{fill:rgba(139,69,19,.3)}
  .arch-node[data-node]{cursor:pointer}
  .arch-node[data-node]:active .arch-shape{fill:rgba(139,69,19,.45)}

  /* ── Mode tab disabled state ────────────────────── */
  .mode-tab:disabled,.mode-tab[disabled]{
    opacity:.4;cursor:not-allowed;pointer-events:none;
  }

  /* ── Explorer stop button ─────────────────────────── */
  .explorer-stop-btn{
    padding:5px 14px;background:rgba(183,28,28,.08);color:#B71C1C;
    border:1.5px solid rgba(183,28,28,.25);border-radius:6px;
    font-size:.73rem;font-weight:700;cursor:pointer;
    font-family:var(--sans);letter-spacing:.3px;
    transition:background .15s,border-color .15s;
  }
  .explorer-stop-btn:hover{
    background:rgba(183,28,28,.15);border-color:rgba(183,28,28,.4);
  }

  /* ── Tool-call indicators ─────────────────────────── */
  .tool-call-indicator{
    display:flex;align-items:center;gap:8px;flex-wrap:wrap;
    padding:var(--ex-tc-pad, 8px 14px);margin:var(--ex-tc-margin, 4px 0);border-radius:6px;
    background:rgba(139,69,19,.04);border:1px solid var(--border-light);
    font-family:var(--sans);font-size:var(--ex-tc-font, .78rem);
    max-width:680px;
  }
  .tc-icon{
    flex-shrink:0;display:flex;align-items:center;justify-content:center;
    width:22px;height:22px;border-radius:5px;
    background:rgba(139,69,19,.07);color:var(--accent);
  }
  .tc-icon svg{width:13px;height:13px}
  .tc-label{
    font-family:var(--serif);font-size:.78em;
    font-weight:600;color:var(--brown-dark);letter-spacing:.2px;
  }
  .tc-params{
    color:var(--text-muted);font-size:.82em;font-style:italic;
    font-family:var(--serif);
  }
  .tc-status{
    margin-left:auto;font-size:.72em;font-weight:600;
    letter-spacing:.3px;text-transform:uppercase;
    font-family:var(--sans);
  }
  .tc-running{color:var(--gold)}
  .tc-done{color:var(--brown-light)}
  .tc-results-toggle{
    width:auto;margin-top:4px;padding:0;border:none;background:none;
    font-family:var(--sans);font-size:.72em;color:var(--accent);
    cursor:pointer;text-align:left;
    border-bottom:1px dotted rgba(139,69,19,.3);
    display:inline;letter-spacing:.2px;
  }
  .tc-results-toggle:hover{color:var(--gold);border-bottom-color:var(--gold)}
  .tc-results{
    display:none;width:100%;margin-top:6px;padding:8px 10px;
    background:var(--cream-dark);border-radius:4px;
    font-size:.88em;line-height:1.5;color:var(--text-light);
    max-height:200px;overflow-y:auto;
  }
  .tc-results.visible{display:block}
  .tc-result-item{
    padding:4px 0;
  }
  .tc-result-item + .tc-result-item{
    border-top:1px dashed var(--border-light);margin-top:4px;padding-top:8px;
  }
  .tc-result-title{font-weight:600;color:var(--brown-dark);font-size:.92em;font-family:var(--serif)}
  .tc-result-meta{font-size:.82em;color:var(--text-muted);margin-top:1px;font-family:var(--serif)}
  @keyframes tcPulse{
    0%,100%{opacity:1} 50%{opacity:.4}
  }
  .tc-running{animation:tcPulse 1.4s ease-in-out infinite}

  /* ── Status messages ──────────────────────────────── */
  /* Animated pulse so users see the task is alive (added 2026-05-03
   * per maintainer's "static text" feedback — "Synthesizing final
   * analysis…" was just sitting there with no motion and gave the
   * impression of being hung). Two layered cues:
   *   1. The whole line breathes (swarm-status-pulse: scale + opacity)
   *   2. A 3-dot ellipsis after the text travels through 0→1→2→3
   *      dots so even users with reduced-motion preferences see
   *      activity. Pure CSS, no JS tick.
   * Inline-block needed for transform:scale to apply.
   * Author of the message must NOT include their own trailing dots —
   * the .status-msg-dots span supplies them. */
  .status-msg{
    text-align:center;font-family:var(--sans);font-size:var(--ex-tc-font, .78rem);
    color:var(--text-muted);font-style:italic;padding:var(--ex-status-pad, 6px 0);
    max-width:680px;align-self:center;
    display:inline-block;
    animation:swarm-status-pulse 1.8s ease-in-out infinite;
    transform-origin:center center;
  }
  .status-msg-dots{
    display:inline-block;
    width:1.2em;       /* reserve fixed width so text doesn't jiggle as dots cycle */
    text-align:left;
  }
  @keyframes status-dots-cycle{
    0%, 19%   { content:""; }
    20%, 39%  { content:"."; }
    40%, 59%  { content:".."; }
    60%, 79%  { content:"..."; }
    80%, 100% { content:""; }
  }
  .status-msg-dots::after{
    content:"";
    animation:status-dots-cycle 1.6s steps(1, end) infinite;
  }
  /* Reduced-motion users get a static ellipsis — no scale, no dot
   * cycle — but the breath/dot motion stays subtle for everyone else. */
  @media (prefers-reduced-motion:reduce){
    .status-msg{ animation:none; }
    .status-msg-dots::after{ animation:none; content:"\\2026"; }
  }
  /* Static variant: informational header, no pulse, no dots (added
   * 2026-05-03 per maintainer's "this is still flashing even after the
   * synthesis lands" report). Used for one-shot labels like
   * "Multi-agent research: 5 agents, est. ~$0.190" that are NOT
   * progress indicators. */
  .status-msg-static{
    animation:none;
    transform:none;
  }

  /* ── API error display ──────────────────────────── */
  .explorer-error{
    background:#fef2f2;border:1px solid #e8a0a0;border-radius:8px;
    padding:14px 18px;margin:8px 0;max-width:680px;align-self:center;
    font-family:var(--sans);font-size:.8rem;line-height:1.5;color:#6b2121;
  }
  .explorer-error p{margin:4px 0 8px}
  .explorer-error p:first-child{margin-top:0}
  .explorer-error p:last-child{margin-bottom:0}
  .explorer-error strong{color:#4a1515}
  .explorer-error code{
    background:#fde8e8;padding:1px 5px;border-radius:3px;
    font-size:.74rem;font-family:var(--mono);
  }
  .explorer-error ul{margin:4px 0 8px 20px;padding:0}
  .explorer-error li{margin:2px 0}
  .explorer-error a{color:#8b3a3a;text-decoration:underline}
  .explorer-error a:hover{color:#4a1515}
  .explorer-error .error-context{
    font-size:.72rem;color:#8b5a5a;border-top:1px solid #e8c0c0;
    padding-top:6px;margin-top:8px;
  }

  /* ── Thinking blocks ────────────────────────────────── */
  .thinking-block{
    margin:8px 0;border-radius:6px;
    border-left:3px solid var(--gold);
    background:rgba(184,134,11,.04);
    max-width:680px;
  }
  .thinking-header{
    display:flex;align-items:center;gap:8px;
    padding:8px 12px;cursor:pointer;user-select:none;
  }
  .thinking-icon{
    display:flex;align-items:center;justify-content:center;
    color:var(--gold);opacity:.8;flex-shrink:0;
  }
  .thinking-label{
    font-family:var(--serif);font-size:.76rem;font-style:italic;
    color:var(--gold);font-weight:600;
  }
  .thinking-toggle-arrow{
    font-size:.58rem;color:var(--text-muted);margin-left:auto;
    transition:transform .2s;display:flex;align-items:center;
  }
  .thinking-body{
    display:none;padding:0 12px 10px;
    font-family:var(--serif);font-size:.78rem;font-style:italic;
    color:var(--brown-light);line-height:1.6;
    white-space:pre-wrap;word-break:break-word;
  }
  .thinking-block.expanded .thinking-body{display:block}
  .thinking-redacted{color:var(--text-muted);font-size:.74rem}

  /* ── SuperDoc filesystem toolbar (iteration 2.a) ─────── */
  .jt-sd-fs{
    display:flex;align-items:center;gap:4px;
  }
  .jt-sd-fs .jt-tool-btn[disabled]{
    opacity:.4;cursor:not-allowed;
  }
  .jt-sd-fs .jt-tool-btn[disabled]:hover{
    background:var(--white);color:var(--text-muted);
  }
  .jt-sd-fallback-notice{
    display:inline-flex;align-items:center;
    font-family:var(--sans);font-size:.66rem;font-weight:600;
    color:var(--text-muted);background:var(--cream-dark);
    padding:2px 8px;border-radius:3px;letter-spacing:.4px;
    text-transform:uppercase;cursor:help;
    border:1px solid var(--border-light);
    margin-left:4px;
  }
  .jt-sd-recent-wrap{display:inline-flex}
  .jt-sd-recent-menu{
    position:absolute;top:calc(100% + 6px);right:0;
    list-style:none;margin:0;padding:4px 0;min-width:240px;max-width:360px;
    background:var(--white);border:1px solid var(--border);border-radius:6px;
    box-shadow:0 6px 24px var(--shadow);z-index:30;
    font-family:var(--sans);font-size:.78rem;
  }
  .jt-sd-recent-empty{
    padding:8px 14px;color:var(--text-muted);font-style:italic;cursor:default;
  }
  .jt-sd-recent-item{
    display:flex;align-items:center;gap:8px;padding:8px 14px;cursor:pointer;
    color:var(--text);transition:background .1s;
  }
  .jt-sd-recent-item:hover{background:rgba(139,69,19,.06)}
  .jt-sd-recent-name{
    flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    color:var(--brown-dark);font-weight:600;
  }
  .jt-sd-recent-hint{
    font-size:.62rem;font-weight:600;color:var(--gold);text-transform:uppercase;
    letter-spacing:.4px;
  }

/* ═══════════════════════════════════════════════════════════════
   Wave Q (maintainer 2026-05-11) — block quotes sent from Atelier to
   the Writing Desk.
   Centered, double-justified, narrower than body margins.
   Curly quotation marks KEPT (maintainer's directive).
   Not italic (maintainer's directive).

   CMOS NOTES — intentional deviations:
   (1) CMOS 17/18 prescribes left-indent 0.5" only for block quotes;
       Mira centers + double-justifies per maintainer's design directive.
   (2) CMOS omits surrounding quotation marks for block quotes (the
       indent serves as the quotation marker); Mira keeps the curly
       quotes per maintainer's directive — the text content itself is
       wrapped in "…" upstream in journal-superdoc.js:_insertAnchorText.
   ═══════════════════════════════════════════════════════════════ */
  .journal-editor blockquote.mira-desk-block-quote,
  .journal-editor .mira-desk-block-quote,
  .journal-editor p[data-mira-blockquote="1"]{
    display:block;
    margin:12px 2em;            /* narrower than body margins */
    padding:8px 0;
    text-align:justify;         /* "double justified" — fills line width */
    text-align-last:center;     /* short last line still centers */
    text-justify:inter-word;
    font-style:normal;          /* NOT italic */
    font-family:var(--serif, Georgia, "Times New Roman", serif);
    border:none;
    background:none;
    color:var(--text);
    line-height:1.55;
  }
  /* Center the whole block within its parent column. */
  .journal-editor blockquote.mira-desk-block-quote{
    margin-left:auto;
    margin-right:auto;
    max-width:calc(100% - 4em);
  }