/** * PaperDojo shared layout shell — gutters, content width, nav, modals, overflow guards. * Activate with (and nav.pd-app-nav on unified pages). */ html.pd-paperdojo { --pd-content-max: 800px; --pd-shell-max: 1200px; --pd-workspace-sidebar-w: 372px; /* Leaderboard column: caps width on large screens; never wider than its share of the row */ --pd-workspace-lb-w: min(300px, 30vw); --pd-gutter: 24px; --pd-gutter-sm: 16px; --pd-nav-h: 64px; --pd-safe-top: env(safe-area-inset-top, 0px); --pd-safe-right: env(safe-area-inset-right, 0px); --pd-safe-bottom: env(safe-area-inset-bottom, 0px); --pd-safe-left: env(safe-area-inset-left, 0px); --pd-modal-pad: 20px; --pd-modal-max-w: 800px; --pd-modal-max-w-sm: 600px; --pd-modal-max-w-medal: 500px; --pd-reading-max-w: 700px; --pd-nav-stack-h: calc(var(--pd-nav-h) + var(--pd-safe-top)); } @media (max-width: 640px) { html.pd-paperdojo { --pd-gutter: var(--pd-gutter-sm); } } html.pd-paperdojo { overflow-x: clip; } html.pd-paperdojo body { overflow-x: clip; } /* ----- App nav (paperdojo, my-papers, about PaperDojo) ----- */ html.pd-paperdojo nav.pd-app-nav, html.pd-paperdojo nav#pdAppNav { position: fixed; top: 0; left: 0; right: 0; z-index: 999; padding-top: var(--pd-safe-top); background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border, #e5e7eb); box-sizing: border-box; } html.pd-paperdojo nav.pd-app-nav .nav-container, html.pd-paperdojo nav#pdAppNav .nav-container { width: 100%; max-width: none; margin: 0; padding: 16px var(--pd-gutter); min-height: var(--pd-nav-h); height: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; box-sizing: border-box; } html.pd-paperdojo nav.pd-app-nav .nav-logo, html.pd-paperdojo nav#pdAppNav .nav-logo { display: flex; align-items: center; text-decoration: none; color: var(--text, #1a1a1a); font-weight: 600; font-size: 18px; min-width: 0; flex: 0 0 auto; } /* * Single trailing flex child: link cluster + mobile button share one margin-left:auto, * so we never rely on distributing free space across three siblings (logo, links, button). */ html.pd-paperdojo nav.pd-app-nav .pd-nav-trailing, html.pd-paperdojo nav#pdAppNav .pd-nav-trailing { display: flex; align-items: center; flex: 0 0 auto; margin-left: 0; min-width: 0; gap: 0; } html.pd-paperdojo nav.pd-app-nav .nav-logo img, html.pd-paperdojo nav#pdAppNav .nav-logo img { height: 36px; width: auto; max-width: 160px; object-fit: contain; } html.pd-paperdojo nav.pd-app-nav .nav-logo.hidden, html.pd-paperdojo nav#pdAppNav .nav-logo.hidden { display: none; } html.pd-paperdojo nav.pd-app-nav .nav-links, html.pd-paperdojo nav#pdAppNav .nav-links { display: flex; align-items: center; gap: 32px; flex-shrink: 0; margin-left: 0; width: max-content; max-width: 100%; } /* * Default signed-out chrome (no inline styles on links). Session hint * `html.pd-nav-hint-signed-in` matches last known Clerk session for stable cross-page paint. * Include #navLinksMobile so the body-appended menu clone matches desktop auth shape. */ html.pd-paperdojo #navLinks #navMyPapers, html.pd-paperdojo #navLinksMobile #navMyPapers { display: none; } html.pd-paperdojo #navLinks #navSignOut, html.pd-paperdojo #navLinksMobile #navSignOut { display: none; } html.pd-paperdojo #navLinks #navSignIn, html.pd-paperdojo #navLinksMobile #navSignIn { display: inline-block; } @media (min-width: 769px) { html.pd-paperdojo.pd-nav-hint-signed-in #navLinks #navMyPapers { display: inline-block; } html.pd-paperdojo.pd-nav-hint-signed-in #navLinks #navSignOut { display: inline-block; } html.pd-paperdojo.pd-nav-hint-signed-in #navLinks #navSignIn { display: none; } } @media (max-width: 768px) { html.pd-paperdojo.pd-nav-hint-signed-in #navLinksMobile #navMyPapers { display: flex; } html.pd-paperdojo.pd-nav-hint-signed-in #navLinksMobile #navSignOut { display: flex; } html.pd-paperdojo.pd-nav-hint-signed-in #navLinksMobile #navSignIn { display: none; } } html.pd-paperdojo nav.pd-app-nav .nav-links a, html.pd-paperdojo nav#pdAppNav .nav-links a { text-decoration: none; color: var(--muted, #6b7280); font-size: 14px; font-weight: 500; transition: color 0.2s ease; white-space: nowrap; } html.pd-paperdojo nav.pd-app-nav .nav-links a:hover, html.pd-paperdojo nav#pdAppNav .nav-links a:hover { color: var(--text, #1a1a1a); } html.pd-paperdojo nav.pd-app-nav .nav-links a.active, html.pd-paperdojo nav#pdAppNav .nav-links a.active { color: var(--text, #1a1a1a); font-weight: 600; text-decoration: underline; text-underline-offset: 6px; } html.pd-paperdojo nav.pd-app-nav .mobile-menu-btn, html.pd-paperdojo nav#pdAppNav .mobile-menu-btn { display: none; background: none; border: none; cursor: pointer; padding: 8px; flex-shrink: 0; } html.pd-paperdojo nav.pd-app-nav .mobile-menu-btn svg, html.pd-paperdojo nav#pdAppNav .mobile-menu-btn svg { width: 24px; height: 24px; stroke: var(--text, #1a1a1a); } html.pd-paperdojo .nav-mobile-backdrop { display: none; } html.pd-paperdojo .nav-mobile-backdrop.open { display: none; } html.pd-paperdojo #navLinksMobile.open { z-index: 1002 !important; position: fixed !important; pointer-events: auto !important; } html.pd-paperdojo #navLinksMobile { position: fixed !important; top: var(--pd-nav-stack-h) !important; left: 0 !important; right: 0 !important; background: #ffffff !important; flex-direction: column; gap: 0; padding: 16px 0; border-bottom: 1px solid var(--border, #e5e7eb); z-index: 1002 !important; max-height: calc(100dvh - var(--pd-nav-stack-h)); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); pointer-events: auto !important; display: none; box-sizing: border-box; } /* * Mobile menu links: clone is appended to (see paperdojo-shared-nav.js), * so they never match nav .nav-links a — must mirror desktop link styling here, * including :link/:visited or UA blue/purple wins. */ html.pd-paperdojo #navLinksMobile a, html.pd-paperdojo #navLinksMobile a:link, html.pd-paperdojo #navLinksMobile a:visited { text-decoration: none; color: var(--muted, #6b7280); font-size: 14px; font-weight: 500; transition: color 0.2s ease; -webkit-tap-highlight-color: transparent; } html.pd-paperdojo #navLinksMobile a:hover { color: var(--text, #1a1a1a); } html.pd-paperdojo #navLinksMobile a:active { color: var(--text, #1a1a1a); } html.pd-paperdojo #navLinksMobile a.active { color: var(--text, #1a1a1a); font-weight: 600; text-decoration: underline; text-underline-offset: 6px; } @media (max-width: 768px) { html.pd-paperdojo nav.pd-app-nav .nav-links, html.pd-paperdojo nav#pdAppNav .nav-links { display: none !important; } html.pd-paperdojo nav.pd-app-nav .pd-nav-trailing, html.pd-paperdojo nav#pdAppNav .pd-nav-trailing { margin-left: auto; } html.pd-paperdojo #navLinksMobile { display: none !important; } html.pd-paperdojo #navLinksMobile.open { display: flex !important; } html.pd-paperdojo .nav-links a, html.pd-paperdojo #navLinksMobile a { padding: 14px var(--pd-gutter); width: 100%; min-height: 44px; display: flex; align-items: center; box-sizing: border-box; } html.pd-paperdojo nav.pd-app-nav .mobile-menu-btn, html.pd-paperdojo nav#pdAppNav .mobile-menu-btn { display: block; margin-left: 0; } html.pd-paperdojo nav.pd-app-nav .nav-logo img, html.pd-paperdojo nav#pdAppNav .nav-logo img { height: 32px; } } /* ----- Page column (aligned with nav inner padding) ----- */ html.pd-paperdojo .pd-page { width: 100%; max-width: var(--pd-content-max); margin-left: auto; margin-right: auto; padding-left: var(--pd-gutter); padding-right: var(--pd-gutter); box-sizing: border-box; margin-top: calc(var(--pd-nav-h) + 16px + var(--pd-safe-top)); margin-bottom: 96px; } html.pd-paperdojo .pd-page--tight-top { margin-top: calc(var(--pd-nav-h) + 12px + var(--pd-safe-top)); } /* Column width + gutters only (no top margin — e.g. below landing hero) */ html.pd-paperdojo .pd-content-wide { width: 100%; max-width: var(--pd-content-max); margin-left: auto; margin-right: auto; padding-left: var(--pd-gutter); padding-right: var(--pd-gutter); box-sizing: border-box; } html.pd-paperdojo .pd-page--leaderboard-preview { margin-bottom: 160px; } html.pd-paperdojo .pd-page--my-papers { margin-bottom: 40px; } /* ----- Leaderboard tabs ----- */ html.pd-paperdojo .pd-tabs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-bottom: 24px; border-bottom: 2px solid var(--border, #e5e7eb); } html.pd-paperdojo .pd-tab-btn { padding: 10px 16px; border: none; background: none; color: var(--muted, #6b7280); font-weight: 600; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; font-size: 14px; max-width: 100%; text-align: center; box-sizing: border-box; } html.pd-paperdojo .pd-tab-btn.active { color: var(--text, #1a1a1a); border-bottom-color: var(--accent, #79c0ff); } @media (max-width: 380px) { html.pd-paperdojo .pd-tab-btn { padding: 8px 12px; font-size: 13px; } } /* ----- Leaderboard rows (markup from paperdojo.js) ----- */ html.pd-paperdojo .pd-lb-card { border-radius: 8px; padding: 12px 16px; margin-bottom: 8px; box-sizing: border-box; max-width: 100%; overflow: hidden; } html.pd-paperdojo .pd-lb-row { display: flex; align-items: flex-start; gap: 12px; min-width: 0; } html.pd-paperdojo .pd-lb-rank { flex-shrink: 0; font-size: 16px; font-weight: 700; color: var(--muted, #6b7280); min-width: 2.25ch; line-height: 1.3; } html.pd-paperdojo .pd-lb-main { flex: 1; min-width: 0; } html.pd-paperdojo .pd-lb-name { font-weight: 600; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.pd-paperdojo .pd-lb-sub { font-size: 13px; color: var(--muted, #6b7280); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.pd-paperdojo .pd-lb-stat { flex-shrink: 0; text-align: right; font-weight: 600; font-size: 16px; max-width: 42%; overflow-wrap: anywhere; line-height: 1.3; } html.pd-paperdojo .pd-lb-user-card .pd-lb-row { align-items: center; } html.pd-paperdojo .pd-lb-user-card .pd-lb-rank { font-size: 20px; color: var(--accent, #79c0ff); min-width: 40px; } html.pd-paperdojo .pd-lb-stat--xp { white-space: nowrap; } /* ----- Modal shells ----- */ html.pd-paperdojo .pd-modal-overlay { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding-top: max(var(--pd-modal-pad), var(--pd-safe-top)); padding-bottom: max(var(--pd-modal-pad), var(--pd-safe-bottom)); padding-left: max(var(--pd-modal-pad), var(--pd-safe-left)); padding-right: max(var(--pd-modal-pad), var(--pd-safe-right)); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; box-sizing: border-box; } html.pd-paperdojo .pd-modal-overlay--dark { background: rgba(0, 0, 0, 0.5); } html.pd-paperdojo .pd-modal-overlay--darker { background: rgba(0, 0, 0, 0.7); } /* Reading modal stacks under profile/onboarding (z-index 2000) */ html.pd-paperdojo .pd-modal-overlay--z-read { z-index: 1000; } html.pd-paperdojo .pd-modal-card { width: 100%; max-width: var(--pd-modal-max-w); max-height: min(90dvh, calc(100dvh - var(--pd-safe-top) - var(--pd-safe-bottom) - 32px)); overflow-x: hidden; overflow-y: auto; box-sizing: border-box; background: var(--bg, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 16px; padding: clamp(20px, 4vw, 32px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); position: relative; } html.pd-paperdojo .pd-modal-card--sm { max-width: var(--pd-modal-max-w-sm); } html.pd-paperdojo .pd-modal-card--reading { max-width: var(--pd-reading-max-w); display: flex; flex-direction: column; max-height: min(88dvh, calc(100dvh - var(--pd-safe-top) - var(--pd-safe-bottom) - 40px)); padding: 0; } html.pd-paperdojo .pd-modal-card--medal { max-width: var(--pd-modal-max-w-medal); border-width: 2px; text-align: center; } html.pd-paperdojo .pd-modal-scroll { overflow-x: hidden; overflow-y: auto; flex: 1; min-height: 0; padding: clamp(16px, 3vw, 32px); box-sizing: border-box; } html.pd-paperdojo .pd-modal-close { position: absolute; top: max(12px, var(--pd-safe-top)); right: max(12px, var(--pd-safe-right)); width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border, #e5e7eb); background: var(--card, #f8f9fa); color: var(--text, #1a1a1a); font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; box-sizing: border-box; } html.pd-paperdojo .pd-modal-close:hover { background: var(--border, #e5e7eb); } html.pd-paperdojo .pd-modal-close--plain { position: absolute; top: max(8px, var(--pd-safe-top)); right: max(8px, var(--pd-safe-right)); background: none; border: none; font-size: 24px; color: var(--muted, #6b7280); cursor: pointer; padding: 8px; line-height: 1; z-index: 10; } /* ----- Action rows (modals, reading, profile, onboarding) ----- */ html.pd-paperdojo .pd-action-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; } html.pd-paperdojo .pd-action-row > .btn { flex: 1 1 140px; min-width: min(100%, 120px); width: auto; } /* ----- Quiz options ----- */ html.pd-paperdojo .dojo-answer-option { display: flex; align-items: flex-start; padding: 14px; background: var(--bg, #fff); border: 2px solid var(--border, #e5e7eb); border-radius: 8px; cursor: pointer; box-sizing: border-box; max-width: 100%; } html.pd-paperdojo .dojo-answer-option .dojo-answer-text { flex: 1; min-width: 0; overflow-wrap: break-word; word-break: break-word; } html.pd-paperdojo #dojo-quiz-question-text { overflow-wrap: break-word; word-break: break-word; } /* ----- Profile project button label ----- */ html.pd-paperdojo #profile-project-switcher-btn { min-width: 0; } html.pd-paperdojo #profile-current-project-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; text-align: left; } /* ----- Hero feed card (primary workspace panel) ----- */ html.pd-paperdojo #dojo-hero-paper-card.pd-hero-paper-card { box-sizing: border-box; padding: 20px; border: 1px solid var(--border, #e5e7eb); border-radius: 16px; background: var(--card, #f8f9fa); margin-bottom: 16px; min-width: 0; display: flex; flex-direction: column; align-items: stretch; /* Tall enough to feel like a workspace panel; grows with content if needed */ min-height: clamp(300px, 68vh, 820px); } html.pd-paperdojo #dojo-hero-paper-card .pd-hero-building-overlay { display: none; position: absolute; inset: 0; z-index: 6; box-sizing: border-box; background: rgba(255, 255, 255, 0.95); border-radius: 16px; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center; } html.pd-paperdojo #dojo-hero-paper-card .pd-hero-paper-card__top { flex: 0 0 auto; padding-bottom: 12px; } html.pd-paperdojo #dojo-hero-paper-card .pd-hero-paper-card__snippet-wrap { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } html.pd-paperdojo #dojo-hero-snippet { flex: 1 1 auto; min-height: 0; line-height: 1.6; font-size: 0.95rem; color: var(--text, #1a1a1a); overflow-y: auto; -webkit-overflow-scrolling: touch; padding-right: 6px; } html.pd-paperdojo #dojo-hero-paper-card .pd-hero-snippet-fade { position: absolute; bottom: 0; left: 0; right: 0; height: 44px; background: linear-gradient(to bottom, transparent, var(--card, #f8f9fa)); pointer-events: none; } html.pd-paperdojo #dojo-hero-paper-card .pd-hero-paper-card__actions { flex: 0 0 auto; margin-top: auto; padding-top: 16px; } /* * Feed card: sidebar is hidden ≤900px — cap card height to the dynamic viewport so * Skip / Save / Stay visible without paging scroll. (769–900px was still using the * desktop min-height clamp before this breakpoint was widened.) */ @media (max-width: 900px) { html.pd-paperdojo #dojo-hero-paper-card.pd-hero-paper-card { min-height: 0; /* Nav + workspace top margin + mobile footer row + safe area buffer */ max-height: calc( 100dvh - var(--pd-nav-stack-h) - 80px - env(safe-area-inset-bottom, 0px) ); } html.pd-paperdojo #dojo-hero-paper-card .pd-hero-paper-card__snippet-wrap { flex: 1 1 auto; min-height: 0; } html.pd-paperdojo #dojo-hero-snippet { flex: 1 1 auto; min-height: 0; max-height: none; } html.pd-paperdojo #dojo-hero-paper-card .pd-hero-paper-card__actions { margin-top: auto; flex-shrink: 0; padding-top: 16px; } } @media (max-width: 768px) { html.pd-paperdojo #dojo-hero-title { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } html.pd-paperdojo #dojo-hero-authors { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } } /* Mobile workspace footer: Edit profile (sidebar rail is display:none ≤900px) */ html.pd-paperdojo .pd-mobile-workspace-footer { display: none; } @media (max-width: 900px) { html.pd-paperdojo.state-signedin .pd-mobile-workspace-footer { display: block; margin-top: 4px; margin-bottom: 8px; padding-bottom: env(safe-area-inset-bottom, 0px); } html.pd-paperdojo.state-signedin .pd-mobile-workspace-footer .pd-ws-edit-profile-btn { max-width: 420px; margin-left: auto; margin-right: auto; } } /* ----- Hero meta (feed card) ----- */ html.pd-paperdojo #dojo-hero-paper-card .meta, html.pd-paperdojo .dojo-paper-card .meta { flex-wrap: wrap; min-width: 0; } html.pd-paperdojo #dojo-hero-authors { min-width: 0; white-space: normal; overflow: visible; text-overflow: unset; overflow-wrap: anywhere; line-height: 1.45; } html.pd-paperdojo #dojo-hero-title, html.pd-paperdojo #dojo-paper-title { overflow-wrap: break-word; word-break: break-word; } @media (min-width: 769px) { html.pd-paperdojo #dojo-hero-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } } /* ----- Reading modal inner ----- */ html.pd-paperdojo #modal-title { overflow-wrap: break-word; word-break: break-word; padding-right: 44px; } html.pd-paperdojo #modal-abstract { overflow-wrap: break-word; word-break: break-word; overflow-x: hidden; } /* ----- Medal tally strip ----- */ html.pd-paperdojo #medal-tally { overflow-wrap: anywhere; word-break: break-word; font-size: clamp(1.125rem, 4vw, 1.75rem); } /* ----- About page (paperdojo brand) ----- */ html.pd-paperdojo main.pd-about-markdown { max-width: var(--pd-content-max); margin-left: auto; margin-right: auto; padding-left: var(--pd-gutter); padding-right: var(--pd-gutter); padding-bottom: 80px; padding-top: calc(var(--pd-nav-h) + 56px + var(--pd-safe-top)); box-sizing: border-box; } @media (max-width: 768px) { html.pd-paperdojo main.pd-about-markdown { padding-top: calc(var(--pd-nav-h) + 36px + var(--pd-safe-top)); padding-bottom: 60px; } } html.pd-paperdojo footer.pd-about-footer { max-width: var(--pd-content-max); margin-left: auto; margin-right: auto; padding: 40px var(--pd-gutter); box-sizing: border-box; } /* ----- PaperDojo workspace sidebar: fixed left rail (ChatGPT-style); main column offset ----- */ html.pd-paperdojo.state-signedin #dojo-root.pd-page { display: block; max-width: none; width: 100%; min-width: 0; margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0; padding-left: 0; padding-right: 0; padding-top: 0; box-sizing: border-box; } /* * Workspace row: true top-level flex shell (sidebar is fixed; this is center + right columns). * Keeps #pd-workspace-main as feed-only so the leaderboard is not width-coupled to the feed wrapper. */ html.pd-paperdojo #pd-workspace-row { display: flex; flex-direction: row; align-items: flex-start; gap: 20px; /* width:auto so margin-left (sidebar offset) does not add to 100% and clip the right edge */ width: auto; max-width: 100%; min-width: 0; box-sizing: border-box; margin-top: calc(var(--pd-nav-h) + 16px + var(--pd-safe-top)); margin-right: 0; margin-bottom: 96px; margin-left: 0; padding-left: var(--pd-gutter); padding-right: var(--pd-gutter); } @media (min-width: 901px) { /* * Reserve sidebar space as soon as state-signedin is set (synchronous, before * body.loaded). The old selector depended on .pd-workspace-sidebar:not(.hidden), * which is only true after refreshWorkspaceSidebar() resolves its async API * calls — causing a layout shift when the sidebar appeared. By keying on * state-signedin directly we get a stable layout from first paint. * pd-my-papers-train-boot is excluded because that flow hides the sidebar * intentionally and must not reserve its column. */ html.pd-paperdojo.state-signedin:not(.pd-my-papers-train-boot) #pd-workspace-row { margin-left: var(--pd-workspace-sidebar-w); } } html.pd-paperdojo #pd-workspace-main { flex: 1 1 0; min-width: 0; max-width: none; width: auto; margin: 0; padding: 0; box-sizing: border-box; } html.pd-paperdojo .pd-workspace-feed-column { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: stretch; } html.pd-paperdojo .pd-workspace-feed-inner { width: 100%; max-width: var(--pd-content-max); min-width: 0; margin-left: auto; margin-right: auto; box-sizing: border-box; } html.pd-paperdojo .pd-workspace-lb-panel { /* * shrink: 1; min-width: 0 — a fixed width here sets flex’s auto min-size (~300px) and was resisting * shrink, pushing the leaderboard past the viewport before the stack breakpoint fired. */ flex: 0 1 var(--pd-workspace-lb-w); align-self: flex-start; width: auto; max-width: min(100%, var(--pd-workspace-lb-w)); min-width: 0; box-sizing: border-box; position: sticky; top: calc(var(--pd-nav-stack-h) + 12px); max-height: calc(100vh - var(--pd-nav-stack-h) - 24px); overflow-x: hidden; overflow-y: auto; padding: 12px 12px 16px; background: rgba(248, 249, 250, 0.65); border: 1px solid var(--border, #e5e7eb); border-radius: 10px; -webkit-overflow-scrolling: touch; } /* * Wide desktop (~1181px+): sidebar + feed row + leaderboard (row uses width:auto; stacks below ~1180px). * Bias feed toward the leaderboard and widen the reading column slightly vs the global pd-content-max. */ @media (min-width: 1181px) { /* Gutter before the leaderboard; horizontal padding lives on #pd-workspace-row. */ html.pd-paperdojo .pd-workspace-feed-column { padding-right: var(--pd-gutter); box-sizing: border-box; } html.pd-paperdojo .pd-workspace-feed-inner { max-width: min(880px, 100%); margin-left: 0; margin-right: auto; } } /* * Narrower desktop (still shows project sidebar): two columns in the main area — * feed first, full-width leaderboard below so nothing clips at the viewport edge. */ @media (min-width: 901px) and (max-width: 1180px) { html.pd-paperdojo #pd-workspace-row { flex-direction: column; align-items: stretch; gap: 20px; } html.pd-paperdojo #pd-workspace-main { order: 1; width: 100%; max-width: 100%; } html.pd-paperdojo .pd-workspace-lb-panel { position: static; max-height: none; flex: none; width: 100%; max-width: 100%; min-width: 0; order: 2; } html.pd-paperdojo .pd-workspace-feed-column { max-width: 100%; } html.pd-paperdojo .pd-workspace-feed-inner { margin-left: auto; margin-right: auto; } } html.pd-paperdojo .pd-workspace-lb-panel .pd-lb-panel-title { margin: 0 0 10px 0; font-size: 15px; font-weight: 600; color: var(--muted, #6b7280); letter-spacing: 0.02em; } html.pd-paperdojo .pd-workspace-lb-panel .pd-tabs { margin-bottom: 10px; gap: 6px; } html.pd-paperdojo .pd-workspace-lb-panel .pd-tab-btn { padding: 8px 10px; font-size: 12px; } html.pd-paperdojo .pd-workspace-lb-panel #home-leaderboard-institution-name { font-size: 13px !important; margin-bottom: 10px !important; } html.pd-paperdojo .pd-workspace-lb-panel .pd-lb-card { padding: 10px 12px; font-size: 13px; } html.pd-paperdojo .pd-workspace-lb-panel .pd-lb-name { font-size: 13px; } html.pd-paperdojo .pd-workspace-lb-panel .pd-lb-sub { font-size: 11px; } html.pd-paperdojo .pd-workspace-sidebar { position: fixed; left: 0; top: var(--pd-nav-stack-h); width: var(--pd-workspace-sidebar-w); height: calc(100vh - var(--pd-nav-stack-h)); padding: 14px 12px 12px; border: none; border-right: 1px solid var(--border, #e5e7eb); border-radius: 0; background: var(--card, #f8f9fa); box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; z-index: 998; } html.pd-paperdojo .pd-workspace-sidebar-footer { flex-shrink: 0; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border, #e5e7eb); display: flex; flex-direction: column; gap: 6px; } html.pd-paperdojo .pd-ws-edit-profile-btn { display: block; width: 100%; margin: 0; padding: 8px 6px; border: none; border-radius: 8px; background: transparent; color: var(--muted, #6b7280); font: inherit; font-size: 12px; line-height: 1.35; text-align: center; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; transition: color 0.12s ease, background 0.12s ease; } html.pd-paperdojo .pd-ws-edit-profile-btn:hover { color: var(--text, #1a1a1a); background: rgba(0, 0, 0, 0.04); } html.pd-paperdojo .pd-workspace-sidebar.hidden { display: none !important; } html.pd-paperdojo .pd-workspace-sidebar-heading { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted, #6b7280); margin: 0 2px 8px; } html.pd-paperdojo .pd-workspace-sidebar-tree { overflow-y: auto; overflow-x: hidden; min-height: 0; flex: 1; padding-right: 2px; } html.pd-paperdojo .pd-ws-folder { margin-bottom: 6px; } /* Sidebar: paper buckets for project ids not on /api/projects/list (e.g. archived) — not full projects */ html.pd-paperdojo .pd-ws-folder--stub .pd-ws-folder-stub-head { flex: 1; min-width: 0; padding: 6px 8px; border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--muted, #6b7280); line-height: 1.3; } html.pd-paperdojo .pd-ws-folder--stub .pd-ws-folder-label { font-style: italic; } html.pd-paperdojo .pd-ws-folder-head { display: flex; align-items: center; gap: 4px; min-width: 0; } html.pd-paperdojo .pd-ws-folder-head .pd-ws-folder-btn { flex: 1; min-width: 0; width: auto; margin: 0; } html.pd-paperdojo .pd-ws-folder-menu-btn { flex-shrink: 0; align-self: center; width: 28px; min-width: 28px; height: 32px; margin: 0; padding: 0; border: none; border-radius: 6px; background: transparent; color: var(--muted, #6b7280); font-size: 18px; line-height: 1; cursor: pointer; transition: opacity 0.15s ease, background 0.12s ease, color 0.12s ease; } @media (hover: hover) { html.pd-paperdojo .pd-ws-folder:not(:hover) .pd-ws-folder-menu-btn:not(:focus-visible) { opacity: 0; } html.pd-paperdojo .pd-ws-folder:hover .pd-ws-folder-menu-btn, html.pd-paperdojo .pd-ws-folder-menu-btn:focus-visible { opacity: 1; } } html.pd-paperdojo .pd-ws-folder-menu-btn:hover { background: rgba(0, 0, 0, 0.06); color: var(--text, #1a1a1a); } html.pd-paperdojo .pd-ws-folder-menu-wrap { position: relative; flex-shrink: 0; align-self: center; } html.pd-paperdojo .pd-ws-folder-menu-wrap .pd-ws-folder-menu-btn { display: flex; align-items: center; justify-content: center; } html.pd-paperdojo .pd-ws-folder-menu-dropdown { position: absolute; top: 100%; right: 0; margin-top: 4px; min-width: 11rem; padding: 4px 0; background: var(--card, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); z-index: 1600; } html.pd-paperdojo .pd-ws-folder-menu-dropdown.hidden { display: none !important; } html.pd-paperdojo .pd-ws-menu-item { display: block; width: 100%; text-align: left; padding: 8px 12px; border: none; background: transparent; font: inherit; font-size: 13px; color: var(--text, #1a1a1a); cursor: pointer; } html.pd-paperdojo .pd-ws-menu-item:hover { background: rgba(0, 0, 0, 0.06); } html.pd-paperdojo .pd-ws-menu-item--danger { color: #b91c1c; font-weight: 500; } html.pd-paperdojo .pd-ws-menu-item--danger:hover { background: #fef2f2; color: #991b1b; } html.pd-paperdojo .pd-ws-delete-project-dialog { position: fixed; inset: 0; z-index: 2100; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, 0.45); box-sizing: border-box; } html.pd-paperdojo .pd-ws-delete-project-dialog.hidden { display: none !important; } html.pd-paperdojo .pd-ws-delete-project-dialog-card { width: 100%; max-width: 400px; padding: 24px; border-radius: 12px; background: var(--card, #fff); border: 1px solid var(--border, #e5e7eb); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18); } html.pd-paperdojo .pd-ws-delete-project-dialog-title { margin: 0 0 12px; font-size: 18px; font-weight: 700; color: var(--text, #1a1a1a); } html.pd-paperdojo .pd-ws-delete-project-dialog-warning { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: var(--muted, #6b7280); } html.pd-paperdojo .pd-ws-delete-project-dialog-name { margin: 0 0 16px; font-size: 14px; font-weight: 600; color: var(--text, #1a1a1a); } html.pd-paperdojo .pd-ws-delete-project-dialog-error { margin: 0 0 12px; font-size: 13px; color: #b91c1c; } html.pd-paperdojo .pd-ws-delete-project-dialog-error.hidden { display: none !important; } html.pd-paperdojo .pd-ws-delete-project-dialog-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; } html.pd-paperdojo .pd-ws-delete-project-dialog-cancel { padding: 10px 16px; border-radius: 8px; border: 1px solid var(--border, #e5e7eb); background: var(--bg, #f3f4f6); color: var(--text, #1a1a1a); font: inherit; font-size: 14px; cursor: pointer; } html.pd-paperdojo .pd-ws-delete-project-dialog-confirm { padding: 10px 16px; border-radius: 8px; border: none; background: #b91c1c; color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; } html.pd-paperdojo .pd-ws-delete-project-dialog-confirm:hover { background: #991b1b; } html.pd-paperdojo .pd-ws-delete-project-dialog-confirm:disabled { opacity: 0.65; cursor: not-allowed; } /* Sidebar footer: sole entry point for creating a project (profile switcher lists projects only). */ html.pd-paperdojo .pd-ws-sidebar-new-project-btn { display: flex; align-items: center; justify-content: center; width: 100%; margin: 0; padding: 9px 12px; border: 1px solid var(--border, #e5e7eb); border-radius: 8px; background: var(--bg, #ffffff); color: var(--text, #1a1a1a); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease; box-sizing: border-box; } html.pd-paperdojo .pd-ws-sidebar-new-project-btn:hover { background: rgba(0, 0, 0, 0.04); border-color: var(--muted, #9ca3af); } html.pd-paperdojo .pd-ws-sidebar-new-project-btn:focus-visible { outline: 2px solid var(--accent, #79c0ff); outline-offset: 2px; } html.pd-paperdojo .pd-ws-folder-btn { display: flex; align-items: center; gap: 6px; width: 100%; margin: 0 0 6px; padding: 8px 10px; border: none; border-radius: 8px; background: transparent; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; text-align: left; color: var(--text, #1a1a1a); transition: background 0.12s ease; } html.pd-paperdojo .pd-ws-folder-btn:hover { background: rgba(121, 192, 255, 0.12); } html.pd-paperdojo .pd-ws-folder-btn--active { background: rgba(121, 192, 255, 0.22); font-weight: 600; } html.pd-paperdojo .pd-ws-folder-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.pd-paperdojo .pd-ws-papers { list-style: none; margin: 0 0 8px 0; padding: 0 0 0 10px; } html.pd-paperdojo .pd-ws-paper-row { display: flex; align-items: stretch; gap: 2px; margin: 0 0 2px 0; padding: 0; list-style: none; } html.pd-paperdojo .pd-ws-paper-row .pd-ws-paper-btn { flex: 1; min-width: 0; } html.pd-paperdojo .pd-ws-paper-delete { -webkit-appearance: none; appearance: none; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; align-self: center; margin: 0; padding: 6px; min-width: 30px; min-height: 30px; border: none; border-radius: 6px; background: transparent; color: #dc2626; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.12s ease, background 0.12s ease; } html.pd-paperdojo .pd-ws-paper-row:hover .pd-ws-paper-delete, html.pd-paperdojo .pd-ws-paper-row:focus-within .pd-ws-paper-delete { opacity: 1; pointer-events: auto; } html.pd-paperdojo .pd-ws-paper-delete:hover { background: rgba(220, 38, 38, 0.12); } html.pd-paperdojo .pd-ws-paper-delete:focus-visible { opacity: 1; pointer-events: auto; outline: 2px solid rgba(220, 38, 38, 0.45); outline-offset: 1px; } html.pd-paperdojo .pd-ws-paper-delete-icon { display: block; } html.pd-paperdojo .pd-ws-paper-btn { -webkit-appearance: none; appearance: none; display: flex; align-items: center; gap: 8px; width: 100%; max-width: 100%; margin: 0; padding: 6px 8px; border: none; border-radius: 6px; background: transparent; cursor: pointer; font: inherit; font-size: 11.5px; line-height: 1.35; text-align: left; color: var(--muted, #6b7280); transition: background 0.12s ease, color 0.12s ease; min-width: 0; } /* * Status dot: use ::before on the button instead of a nested . * Some browsers (notably WebKit) do not reliably paint background on flex children inside