/* Deep Research — research library landing.
 *
 * LIGHT, and only here. The library is a reading surface, so it takes the
 * document skin; the compose view next door stays dark because that is where
 * you pick disciplines and start a run. Light reads, dark edits — the same
 * split the rest of the app uses.
 *
 * The light tokens are scoped to #library-pane, NOT to :root. Everything
 * outside this pane — the nav, the top bar, compose — keeps the dark theme
 * from styles.css untouched. That is what makes this a document panel on a
 * dark desk rather than a second global theme.
 *
 * The tokens come from the doc-skin class in styles.css; index.html puts that
 * class on the pane, so it is static markup and not a runtime decision — there
 * is no state that could turn it off. They are NOT copied from public/mockups/embed-deepresearch.html:
 * the mockup predates a contrast fix and still carries ink-3 at the old pale
 * value, which fails AA at the sizes used below.
 *
 * CONTRAST, measured against the pane background rather than assumed:
 *   ink-0 16.6   ink-1 12.0   ink-2 6.1   ink-3 4.8   accent 9.0   accent-2 6.0
 *   ink-4 2.3  <- FAILS AA. Never put text on it here.
 * The dark theme uses its own ink-4 for 11px counts and labels. Those map to
 * ink-3 below, not to the like-named token, because the like-named one is
 * unreadable on cream. A 1:1 token swap would have shipped that.
 */

#library-pane { display: none; }

.research-center.dr-show-library > #library-pane {
  display: block;
  background: var(--doc-bg);
  color: var(--doc-ink-1);
  border-radius: var(--radius-lg);
  /* Inset from the dark chrome so the edge reads as a deliberate boundary. */
  margin: var(--space-1) 0 var(--space-6);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .28), 0 8px 24px rgba(0, 0, 0, .18);
}

.research-center.dr-show-library > #stepper,
.research-center.dr-show-library > #stepper-caption,
.research-center.dr-show-library > .stage,
.research-center.dr-show-library > .compose-section { display: none !important; }
.research-center.dr-show-library #dr-back-to-library { display: none; }

.dr-lib { max-width: 880px; margin: 0 auto; padding: var(--space-6) var(--space-6) 72px; }
.dr-lib-head { display: flex; align-items: flex-end; gap: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--doc-line); margin-bottom: 24px; }
.dr-lib-eyebrow { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--doc-accent); font-weight: 700; }
.dr-lib-title { font-family: var(--doc-serif); font-size: calc(var(--fs-2xl) + var(--space-2)); color: var(--doc-ink-0); margin: 6px 0 6px; font-weight: 500; letter-spacing: -.01em; }
.dr-lib-sub { color: var(--doc-ink-2); font-size: 14px; margin: 0; max-width: 60ch; line-height: 1.5; }
.dr-lib-head .run-btn { margin-left: auto; flex: none; }

.dr-lib-section { margin: 28px 0; }
.dr-lib-sec-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.dr-lib-sec-h h2 { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--doc-ink-2); font-weight: 700; margin: 0; }
.dr-lib-count { font-size: 12px; color: var(--doc-ink-3); font-weight: 600; }

.dr-lib-runs { display: flex; flex-direction: column; }
.dr-lib-run { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; text-align: left; width: 100%; background: transparent; border: none; border-top: 1px solid var(--doc-line); padding: 13px 4px; cursor: pointer; }
.dr-lib-run:last-child { border-bottom: 1px solid var(--doc-line); }
.dr-lib-run:hover { background: var(--doc-wash); }
.dr-lib-run-q { font-size: 15px; font-weight: 600; color: var(--doc-ink-0); line-height: 1.35; }
.dr-lib-run:hover .dr-lib-run-q { color: var(--doc-accent-2); }
.dr-lib-run-m { font-size: 11.5px; color: var(--doc-ink-3); letter-spacing: .01em; }
.dr-lib-empty { color: var(--doc-ink-2); font-size: 13.5px; padding: 14px 4px; border-top: 1px solid var(--doc-line); }

.dr-lib-disc { margin-bottom: 14px; }
.dr-lib-disc-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 7px; }
.dr-lib-disc-n { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--doc-ink-3); font-weight: 700; }
.dr-lib-disc-c { font-size: 11px; color: var(--doc-ink-3); }
.dr-lib-ag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 7px; }
.dr-lib-ag { background: var(--doc-wash); border: 1px solid var(--doc-line); border-radius: 9px; padding: 9px 12px; }
.dr-lib-ag-n { display: block; font-size: 13px; font-weight: 600; color: var(--doc-ink-1); }
.dr-lib-ag-r { display: block; font-size: 11.5px; color: var(--doc-ink-2); line-height: 1.3; margin-top: 2px; }

.dr-lib-planned { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .dr-lib-planned { grid-template-columns: 1fr; } }
/* White card, not the wash: the amber badge below clears AA on the card white (4.7)
 * and does not on the wash (4.3). The card colour is carrying that. */
.dr-lib-plan-card { background: var(--doc-card); border: 1px dashed var(--doc-line-2); border-radius: 12px; padding: 16px 18px; }
.dr-lib-plan-h { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.dr-lib-badge { font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--doc-amber); border: 1px solid var(--doc-line-2); border-radius: 20px; padding: 2px 8px; }
.dr-lib-plan-t { font-size: 14.5px; font-weight: 600; color: var(--doc-ink-1); }
.dr-lib-plan-card p { margin: 0; font-size: 13px; color: var(--doc-ink-2); line-height: 1.5; }

/* The run button is styled for dark chrome; it sits inside the light pane. */
.dr-lib-head .run-btn { background: var(--doc-accent); border-color: var(--doc-accent); color: var(--doc-card); }
.dr-lib-head .run-btn:hover { background: var(--doc-accent-2); border-color: var(--doc-accent-2); }