/* ===========================================================================
   MedDex Journals
   ===========================================================================
   The workspace borrows the app's own tokens rather than inventing a palette,
   so a paper opened here belongs to the same product as the chat that sent
   you to it. Everything sizes from the viewport, so the one file covers phone,
   iPad and desktop without a breakpoint per device.
   ========================================================================= */

.mdxj {
  --j-ink: #0e1726;
  --j-muted: #5c6a82;
  --j-faint: #93a0b4;
  --j-line: rgba(18, 24, 40, 0.09);
  --j-wash: #f6f8fc;
  --j-blue: #1769ff;
  padding: clamp(12px, 2.4vw, 28px) clamp(14px, 3vw, 34px) 140px;
  max-width: 1120px;
  margin-inline: auto;
  color: var(--j-ink);
}

/* ------------------------------------------------------------------ hero */
/* THE SPHERE IS PART OF THE PAGE, NOT HOVERING OVER IT.
   Centred above the heading it read as a separate object dropped on top, and
   at the top of a phone screen it sat half under the header. It now sits on
   the same line as the state it reports, left-aligned with the search field,
   so the hero reads as one component: sphere, state, question, search. */
.mdxj-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: clamp(4px, 1.4vh, 14px); }
.mdxj-mark { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 2px; }

/* The Sphere, in the same material as Home and the transcript — smaller,
   because here it is reporting rather than presiding. */
.mdxj-sphere {
  flex: none;
  width: clamp(38px, 5vw, 52px);
  height: clamp(38px, 5vw, 52px);
  border-radius: 50%;
  background:
    radial-gradient(42% 42% at 33% 34%, rgba(214, 200, 255, 0.95), rgba(214, 200, 255, 0) 70%),
    radial-gradient(40% 40% at 68% 62%, rgba(178, 158, 255, 0.85), rgba(178, 158, 255, 0) 72%),
    radial-gradient(58% 58% at 50% 50%, rgba(24, 20, 54, 0.5), rgba(24, 20, 54, 0) 74%),
    conic-gradient(from 210deg, #b9a6ff, #efeaff, #8f7ce8, #d7ccff, #b9a6ff);
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.55), 0 0 0 1px rgba(150, 128, 240, 0.2), 0 0 22px rgba(139, 116, 232, 0.4);
  animation: mdxjSpin 7s linear infinite;
}
.mdxj-sphere.is-working { animation: mdxjSpin 2.6s linear infinite, mdxjPulse 1.6s ease-in-out infinite; }
@keyframes mdxjSpin { to { transform: rotate(360deg); } }
@keyframes mdxjPulse {
  0%, 100% { box-shadow: inset 0 0 10px rgba(255,255,255,0.55), 0 0 0 1px rgba(150,128,240,0.2), 0 0 22px rgba(139,116,232,0.4); }
  50% { box-shadow: inset 0 0 14px rgba(255,255,255,0.7), 0 0 0 4px rgba(150,128,240,0.12), 0 0 34px rgba(139,116,232,0.6); }
}
@media (prefers-reduced-motion: reduce) { .mdxj-sphere, .mdxj-sphere.is-working { animation: none; } }

.mdxj-state {
  margin-top: 0;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em;
  color: var(--j-faint); text-transform: uppercase;
}
.mdxj-ask {
  margin: 12px 0 4px;
  font-size: clamp(1.35rem, 3.1vw, 2.05rem);
  font-weight: 760; letter-spacing: -0.022em; line-height: 1.16;
  text-wrap: balance;
}
.mdxj-sub { margin: 0 0 16px; color: var(--j-muted); font-size: 0.92rem; }

/* ----------------------------------------------------------------- search */
.mdxj-form { width: 100%; max-width: 720px; }
.mdxj-field {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 14px;
  border: 1px solid var(--j-line); border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 30px rgba(16, 24, 40, 0.06);
}
.mdxj-field:focus-within { border-color: rgba(23, 105, 255, 0.5); box-shadow: 0 0 0 4px rgba(23, 105, 255, 0.12); }
.mdxj-field-ic { display: inline-flex; color: var(--j-faint); }
.mdxj-field-ic svg { width: 20px; height: 20px; }
.mdxj-input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 0.98rem; color: var(--j-ink); padding: 10px 0;
}
.mdxj-go {
  border: 0; border-radius: 11px; padding: 10px 18px; cursor: pointer;
  font: inherit; font-weight: 660; font-size: 0.88rem; color: #fff;
  background: linear-gradient(180deg, #2f7bff, var(--j-blue));
}
.mdxj-go:active { transform: translateY(1px); }

.mdxj-filters {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin: 14px 0 4px; max-width: 820px;
}
.mdxj-chip, .mdxj-years {
  border: 1px solid var(--j-line); background: #fff; color: var(--j-muted);
  border-radius: 999px; padding: 7px 13px; font: inherit; font-size: 0.8rem; font-weight: 560;
  cursor: pointer;
}
.mdxj-chip.is-on { background: rgba(23, 105, 255, 0.1); border-color: rgba(23, 105, 255, 0.32); color: #0b3fa8; }
.mdxj-years { padding-right: 26px; }

/* ---------------------------------------------------------------- results */
.mdxj-results { margin-top: clamp(18px, 3vh, 30px); display: flex; flex-direction: column; gap: 12px; }
.mdxj-resulthead {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  color: var(--j-muted); font-size: 0.84rem; flex-wrap: wrap;
}
.mdxj-resulthead code {
  font-size: 0.74rem; color: var(--j-faint); background: var(--j-wash);
  padding: 4px 9px; border-radius: 8px; max-width: 100%; overflow-wrap: anywhere;
}

.mdxj-card {
  border: 1px solid var(--j-line); border-radius: 16px; background: #fff;
  padding: 16px 18px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}
.mdxj-card.is-flagged { border-color: rgba(217, 69, 95, 0.4); background: #fffafb; }
.mdxj-title { margin: 0 0 6px; font-size: 1.02rem; font-weight: 680; line-height: 1.34; letter-spacing: -0.012em; }
.mdxj-meta { margin: 0; color: var(--j-muted); font-size: 0.85rem; }
.mdxj-source { margin: 2px 0 10px; color: var(--j-faint); font-size: 0.82rem; }
.mdxj-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.mdxj-pill {
  font-size: 0.7rem; font-weight: 620; letter-spacing: 0.01em;
  padding: 4px 9px; border-radius: 999px;
  background: var(--j-wash); color: var(--j-muted);
}
.mdxj-pill.is-type { background: rgba(23, 105, 255, 0.09); color: #0b3fa8; }
.mdxj-pill.is-prov { background: rgba(14, 159, 143, 0.1); color: #0a6d62; }
.mdxj-ids { display: flex; flex-wrap: wrap; gap: 12px; color: var(--j-faint); font-size: 0.74rem; margin-bottom: 12px; }

.mdxj-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mdxj-act {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--j-line); background: #fff; color: var(--j-ink);
  border-radius: 10px; padding: 8px 12px; font: inherit; font-size: 0.82rem; font-weight: 580;
  cursor: pointer; text-decoration: none;
}
.mdxj-act svg { width: 16px; height: 16px; }
.mdxj-act:hover { background: var(--j-wash); }
.mdxj-act.is-primary { background: linear-gradient(180deg, #2f7bff, var(--j-blue)); border-color: transparent; color: #fff; }

.mdxj-flag {
  display: flex; align-items: flex-start; gap: 8px;
  background: rgba(217, 69, 95, 0.09); color: #96253a;
  border-radius: 11px; padding: 9px 12px; margin-bottom: 10px; font-size: 0.82rem; font-weight: 560;
}
.mdxj-flag svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.mdxj-flag.is-loud { font-size: 0.9rem; }

.mdxj-note {
  border: 1px solid var(--j-line); border-radius: 14px; background: var(--j-wash);
  padding: 16px 18px; color: var(--j-muted); font-size: 0.9rem; line-height: 1.5;
}
.mdxj-note code { background: #fff; padding: 2px 6px; border-radius: 6px; font-size: 0.8rem; overflow-wrap: anywhere; }
.mdxj-note.is-error { background: rgba(217, 69, 95, 0.08); color: #96253a; border-color: rgba(217, 69, 95, 0.25); }
.mdxj-note.is-soft { background: rgba(23, 105, 255, 0.06); color: #0b3fa8; border-color: rgba(23, 105, 255, 0.18); }

/* ------------------------------------------------------------- paper view */
.mdxj-paper {
  position: fixed; inset: 0; z-index: 2600;
  background: #fff; overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(14px, 3vw, 30px) clamp(14px, 4vw, 44px) 120px;
}
@media (min-width: 1024px) {
  /* Docked, the reader opens beside the sidebar rather than over it. */
  body.mdx-docked .mdxj-paper { left: var(--mdx-side-w, 0px); }
  .mdxj-paper > * { max-width: 780px; margin-inline: auto; }
}
.mdxj-paperhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.mdxj-back {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--j-line); background: #fff; border-radius: 10px;
  padding: 8px 13px; font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; color: var(--j-ink);
}
.mdxj-back svg { width: 17px; height: 17px; }
.mdxj-paperpills { display: flex; gap: 6px; flex-wrap: wrap; }
.mdxj-papertitle { margin: 0 0 8px; font-size: clamp(1.2rem, 2.6vw, 1.6rem); font-weight: 720; line-height: 1.26; letter-spacing: -0.018em; }
.mdxj-paperauthors { margin: 0; color: var(--j-muted); font-size: 0.88rem; }
.mdxj-papersource { margin: 4px 0 16px; color: var(--j-faint); font-size: 0.8rem; overflow-wrap: anywhere; }

.mdxj-licence {
  display: flex; flex-direction: column; gap: 3px;
  border: 1px solid var(--j-line); border-left: 3px solid var(--j-blue);
  border-radius: 11px; padding: 11px 14px; margin-bottom: 16px; background: var(--j-wash);
  font-size: 0.83rem; color: var(--j-muted);
}
.mdxj-licence strong { color: var(--j-ink); font-size: 0.86rem; }

.mdxj-aibar { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.mdxj-aitask {
  border: 1px solid rgba(23, 105, 255, 0.24); background: rgba(23, 105, 255, 0.06);
  color: #0b3fa8; border-radius: 999px; padding: 7px 13px;
  font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer;
}
.mdxj-aitask:hover { background: rgba(23, 105, 255, 0.12); }

/* MedDex's reading is visibly NOT the article. Different ground, different
   box, and it says so at the bottom. */
.mdxj-ai {
  border: 1px solid rgba(23, 105, 255, 0.2); border-radius: 14px;
  background: linear-gradient(180deg, rgba(23, 105, 255, 0.05), rgba(23, 105, 255, 0.02));
  padding: 14px 16px; margin-bottom: 18px;
}
.mdxj-ai-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.mdxj-ai-head span { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #0b3fa8; }
.mdxj-ai-head em { font-style: normal; font-size: 0.74rem; color: var(--j-muted); }
.mdxj-ai-body { font-size: 0.92rem; line-height: 1.6; color: var(--j-ink); }
.mdxj-ai-body p { margin: 0 0 9px; }
.mdxj-ai-body.is-error { color: #96253a; }
.mdxj-ai-working { color: var(--j-muted); font-size: 0.88rem; }
.mdxj-ai-foot { margin: 10px 0 0; font-size: 0.72rem; color: var(--j-faint); }

.mdxj-section { margin-bottom: 22px; }
.mdxj-section h3 { display: flex; align-items: center; gap: 8px; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--j-faint); margin: 0 0 8px; }
.mdxj-section h4 { font-size: 0.8rem; font-weight: 700; color: var(--j-ink); margin: 12px 0 4px; }
.mdxj-section p { margin: 0 0 9px; font-size: 0.93rem; line-height: 1.62; color: #26314a; }
.mdxj-none { color: var(--j-muted); font-style: italic; }

/* Dark mode follows the app's own switch. */
body.dark-mode .mdxj { --j-ink: #eef2fa; --j-muted: #9fadc4; --j-faint: #7c8aa2; --j-line: rgba(255,255,255,0.1); --j-wash: rgba(255,255,255,0.05); }
body.dark-mode .mdxj-card, body.dark-mode .mdxj-field, body.dark-mode .mdxj-chip,
body.dark-mode .mdxj-years, body.dark-mode .mdxj-act, body.dark-mode .mdxj-back { background: rgba(255,255,255,0.05); color: var(--j-ink); }
body.dark-mode .mdxj-paper { background: #0b1220; }

/* ---------------------------------------------------------------- the screen
   Journals OWNS the content region rather than taking its turn in the flow.
   As an ordinary `.screen` it rendered nine hundred pixels down the page,
   below the Home layer that the shell keeps laid out — present, correct, and
   entirely off the bottom of the window. Anchoring it under the header makes
   it independent of what the shell is doing above it. */
#journalsScreen { display: none; }
#journalsScreen.active {
  display: block;
  position: fixed;
  inset: var(--mdx-top-h, 60px) 0 0 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fbfcfe;
  z-index: 6;
}
body.dark-mode #journalsScreen.active { background: #0b1220; }
@media (min-width: 1024px) {
  body.mdx-docked #journalsScreen.active { left: var(--mdx-side-w, 0px); }
}

/* The chat furniture belongs to Home. Journals has its own search field, and
   two ways to type into one screen is one too many. */
body.mdxj-open .mdx-bar,
body.mdxj-open .mdx-switch,
body.mdxj-open #mdxModeSwitch,
/* NOT `.mdxs` — that layer paints the app's light ground, and hiding it
   exposed the dark base underneath the header. Only the Home sphere itself
   stands down; Journals has its own. */
body.mdxj-open .mdxs-home,
body.mdxj-open .mdxs-stage,
body.mdxj-open .mdx-ai-fab,
/* The shell's section is still "lens" underneath — it is what the app opens
   on — so its floating camera controls and dark chrome were painted around a
   literature workspace. They belong to Lens and stand down here. */
body.mdxj-open .mdx-lens-controls,
body.mdxj-open .install-prompt { display: none !important; }

/* The header needs no override: the shell now knows this is its own section
   (see SCREEN_TO_SECTION) and dresses itself accordingly. */

/* Similar papers: a list of doors, not another set of cards — they are a way
   onward from this paper rather than a second result set. */
.mdxj-similar { margin-bottom: 22px; }
.mdxj-similar h3 { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--j-faint); margin: 0 0 8px; }
.mdxj-similarrow {
  display: block; width: 100%; text-align: left;
  border: 1px solid var(--j-line); border-radius: 12px; background: #fff;
  padding: 11px 14px; margin-bottom: 8px; cursor: pointer; font: inherit;
}
.mdxj-similarrow:hover { background: var(--j-wash); }
.mdxj-similarrow strong { display: block; font-size: 0.9rem; font-weight: 640; line-height: 1.36; color: var(--j-ink); margin-bottom: 3px; }
.mdxj-similarrow span { font-size: 0.78rem; color: var(--j-muted); }
body.dark-mode .mdxj-similarrow { background: rgba(255,255,255,0.05); }

/* --------------------------------------------------------- the real Sphere
   `MedDexSphere.create` paints its own canvas into this box, so the CSS
   treatment below is only the fallback for a device with no WebGL. */
/* THE REAL SPHERE, WITH ITS OWN MATERIAL BEHIND IT.
   The component is mounted and running; at status size on a software renderer
   it can come back empty, and an empty square beside the word READY reads as a
   bug. So the host keeps the Sphere's own palette as a backdrop and the canvas
   draws over it — the glass where it renders, the material where it does not,
   and never a hole. */
/* ONCE THE REAL SPHERE IS MOUNTED, THE CSS DISC GETS OUT OF ITS WAY.
   The flat gradient below is only a fallback for a browser with no WebGL. Left
   painted behind the live canvas it is what showed through as a purple blob —
   a disc where the glass should be. The canvas is the Sphere; nothing else
   should be drawn under it. */
.mdxj-sphere.is-live {
  width: 104px;
  height: 104px;
  background: none;
  box-shadow: none;
  animation: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.mdxj-sphere.is-live canvas { display: block; }
/* The stage the Sphere builds inside must not be squeezed by the flex row. */
.mdxj-sphere.is-live > * { flex: none; }

/* Specialty tabs on the landing page. */
.mdxj-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 4px; }
.mdxj-tab {
  border: 1px solid var(--j-line); background: #fff; color: var(--j-muted);
  border-radius: 999px; padding: 6px 13px; font: inherit; font-size: 0.79rem; font-weight: 580; cursor: pointer;
}
.mdxj-tab.is-on { background: rgba(23,105,255,0.1); border-color: rgba(23,105,255,0.32); color: #0b3fa8; }
body.dark-mode .mdxj-tab { background: rgba(255,255,255,0.05); }

/* The way into a literature review, above the results it would be built from. */
.mdxj-reviewbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.mdxj-reviewnote { font-size: 0.79rem; color: var(--j-faint); }

/* A citation in a review is a door to the paper it names. */
.mdxj-cite {
  color: #0b3fa8; font-weight: 640; text-decoration: none;
  border-bottom: 1px solid rgba(23,105,255,0.35); cursor: pointer;
}
.mdxj-cite:hover { background: rgba(23,105,255,0.1); }
.mdxj-cite.is-bad { color: #96253a; border-bottom-color: rgba(217,69,95,0.5); }

/* The reader is a PAGE, not an expansion inside the list: it covers the whole
   window including the header, and scrolls on its own. */
.mdxj-paper { inset: 0 !important; z-index: 2700; }
@media (min-width: 1024px) { body.mdx-docked .mdxj-paper { left: var(--mdx-side-w, 0px) !important; } }
body.mdxj-reading .mdx-topline { pointer-events: none; }

/* --------------------------------------------------- picking papers, decks */
.mdxj-card { position: relative; padding-left: 44px; }
.mdxj-pick {
  position: absolute; left: 14px; top: 17px;
  width: 20px; height: 20px; padding: 0; cursor: pointer;
  border: 1.6px solid var(--j-line); border-radius: 6px; background: #fff;
}
.mdxj-pick span { display: block; width: 100%; height: 100%; border-radius: 4px; }
.mdxj-card.is-chosen { border-color: rgba(23,105,255,0.42); box-shadow: 0 0 0 3px rgba(23,105,255,0.08); }
.mdxj-card.is-chosen .mdxj-pick { border-color: var(--j-blue); background: var(--j-blue); }
.mdxj-card.is-chosen .mdxj-pick span {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center/13px no-repeat;
}

.mdxj-deckopts { margin: 2px 0 8px; }
.mdxj-deckopts h3 { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--j-faint); margin: 0 0 6px; }
.mdxj-deckrow { display: flex; flex-wrap: wrap; gap: 8px; }

.mdxj-deck { margin: 4px 0 10px; }
.mdxj-deckwork, .mdxj-deckdone {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--j-line); border-radius: 14px; background: var(--j-wash);
  padding: 14px 16px;
}
.mdxj-deckwork b, .mdxj-deckdone b { font-size: 0.92rem; }
.mdxj-deckdone span { color: var(--j-muted); font-size: 0.84rem; flex: 1 1 200px; }
.mdxj-deckdot {
  width: 14px; height: 14px; border-radius: 50%;
  background: conic-gradient(from 210deg, #b9a6ff, #efeaff, #8f7ce8, #b9a6ff);
  animation: mdxjSpin 1.5s linear infinite;
}

/* The Sphere builds its own root inside this host, and that root carries the
   Home layout's height. Left alone it painted a 400px-tall canvas inside a
   56px box — present, correct, and almost entirely below the visible square.
   Constraining the root is what makes `measure()` see the box it was given. */
.mdxj-sphere.is-live { overflow: hidden; }
.mdxj-sphere.is-live > *,
.mdxj-sphere.is-live .mdxs,
.mdxj-sphere.is-live .mdxs-stage {
  width: 104px !important;
  height: 104px !important;
  min-height: 0 !important;
  max-height: 104px !important;
  margin: 0 !important;
  padding: 0 !important;
}