:root { /* Surfaces (legacy names kept; values now near-white / clean SaaS) */ --parchment: #FBFAF6; --parchment-soft: #FFFFFF; --parchment-deep: #F5F2E9; --parchment-mid: #EDEAE0; --warm-border: #E5E0D0; --warm-border-strong: #C9BFA3; /* Text (legacy names kept; values now navy-tinted ink + cool slate) */ --warm-text: #1A1F2E; --warm-muted: #4A5468; --warm-faint: #8892A6; /* Brand accent — legacy name kept, now JMN navy */ --accent: #0C3054; --accent-light: #1A4575; --accent-dark: #062340; /* New: JMN gold for dividers, kickers, small accents */ --gold: #C0A860; --gold-deep: #A08E48; --gold-light: #D4BE7C; /* Spreadsheet grid header */ --grid-header: #0C3054; /* Shadows recolored navy-tinted (was brown rgba) */ --shadow-soft: 0 18px 40px rgba(12, 48, 84, 0.08); --shadow-card: 0 28px 50px rgba(12, 48, 84, 0.12); /* Global corner rounding — minimal site-wide. Single source of truth shared by custom classes here and the Tailwind rounded-* scale (see base.html). Circular elements (50% / 999px / rounded-full) intentionally opt out. */ --radius: 5px; } /* Dark mode — redefines the same tokens used by the rest of the file. Selectors elsewhere consume var(--accent), var(--parchment), etc., so they flip automatically when this attribute is present on . */ [data-theme="dark"] :root, [data-theme="dark"] { --parchment: #0F172A; --parchment-soft: #1E293B; --parchment-deep: #1A2436; --parchment-mid: #283549; --warm-border: #334155; --warm-border-strong: #475569; --warm-text: #F1F5F9; --warm-muted: #94A3B8; --warm-faint: #64748B; --accent: #60A5FA; --accent-light: #93C5FD; --accent-dark: #3B82F6; --gold: #D4BE7C; --gold-deep: #C0A860; --gold-light: #E8D9A8; --grid-header: #334155; --shadow-soft: 0 18px 40px rgba(0, 0, 0, 0.40); --shadow-card: 0 28px 50px rgba(0, 0, 0, 0.50); } html { background: var(--parchment); } body { background: var(--parchment); } nav, aside, main, #pdf-viewer-panel { position: relative; z-index: 2; } a, button, input, textarea { transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; } .top-nav { background: rgba(251, 250, 246, 0.92); backdrop-filter: blur(12px); } /* JMN brand mark — used in nav and on auth pages */ .brand-mark { display: inline-flex; align-items: center; gap: 0.65rem; } .brand-mark .brand-mark-jmn { font-family: "IBM Plex Serif", Georgia, serif; font-weight: 700; font-size: 22px; line-height: 1; color: var(--warm-text); letter-spacing: 0.01em; } .brand-mark .brand-mark-bar { display: inline-block; width: 2px; height: 22px; background: var(--gold); border-radius: 1px; } .brand-mark .brand-mark-sub { font-family: "IBM Plex Sans", system-ui, sans-serif; font-weight: 500; font-size: 10px; line-height: 1.15; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-deep); } .brand-divider { display: inline-block; width: 1px; height: 24px; background: var(--warm-border); margin: 0 0.25rem; } .product-name { font-family: "IBM Plex Serif", Georgia, serif; font-weight: 500; font-size: 22px; line-height: 1; color: var(--warm-text); letter-spacing: 0.01em; } .archive-chip { border: 1px solid rgba(185, 159, 128, 0.8); border-radius: var(--radius); background: rgba(255, 250, 244, 0.72); padding: 0.45rem 0.85rem; font-family: "JetBrains Mono", monospace; font-size: 0.63rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--warm-muted); } .archive-sidebar { background: var(--parchment-deep); } .sidebar-section-title { font-family: "JetBrains Mono", monospace; font-size: 0.64rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--warm-faint); } .sidebar-search { display: flex; align-items: center; gap: 0.7rem; border: 1px solid rgba(185, 159, 128, 0.75); border-radius: var(--radius); background: rgba(251, 248, 242, 0.88); padding: 0.78rem 0.95rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65); } .sidebar-search svg { color: var(--warm-faint); } .sidebar-link { color: var(--warm-muted); border: 1px solid transparent; } .sidebar-link:hover, .sidebar-link.active { background: rgba(255, 250, 244, 0.86); color: var(--warm-text); border-color: rgba(185, 159, 128, 0.65); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65); } .sidebar-book-dot { width: 0.8rem; height: 1.8rem; border-radius: 999px; border: 1px solid rgba(28, 23, 18, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); } .library-home { animation: fade-up 560ms ease both; } .archive-hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.9fr); gap: 1.5rem; align-items: stretch; } .archive-hero > * { min-width: 0; } .archive-hero > div, .catalog-note, .catalog-section, .manuscript-grid-shell { border: 1px solid rgba(185, 159, 128, 0.65); background: var(--parchment-soft); box-shadow: var(--shadow-soft); } .archive-hero > div { border-radius: var(--radius); padding: 2.4rem; } .archive-kicker { font-family: "JetBrains Mono", monospace; font-size: 0.66rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent); } .archive-title { max-width: 12ch; margin-top: 1rem; font-family: "IBM Plex Serif", Georgia, serif; font-size: clamp(3rem, 6vw, 5.2rem); line-height: 0.92; color: var(--warm-text); letter-spacing: -0.03em; } .archive-lede { max-width: 42rem; margin-top: 1.2rem; color: var(--warm-muted); font-size: 0.98rem; line-height: 1.8; } .archive-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.8rem; } .archive-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; border-radius: var(--radius); border: 1px solid rgba(152, 70, 21, 0.55); background: linear-gradient(180deg, var(--accent-light), var(--accent)); color: var(--parchment); padding: 0.95rem 1.35rem; font-size: 0.73rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; box-shadow: 0 14px 24px rgba(196, 96, 29, 0.18); } .archive-button:hover { transform: translateY(-1px); background: linear-gradient(180deg, #df8442, var(--accent-dark)); } .archive-button.secondary { background: rgba(255, 252, 247, 0.78); color: var(--warm-text); box-shadow: none; border-color: rgba(185, 159, 128, 0.75); } .catalog-note { border-radius: var(--radius); padding: 1.8rem; position: relative; overflow: hidden; } .catalog-note-label { position: relative; font-family: "JetBrains Mono", monospace; font-size: 0.66rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--warm-faint); } .catalog-note-grid { position: relative; display: grid; gap: 1.1rem; margin-top: 1.6rem; } .catalog-note-grid > div { border-top: 1px solid rgba(185, 159, 128, 0.65); padding-top: 1rem; } .catalog-note-value { font-family: "IBM Plex Serif", Georgia, serif; font-size: 2.5rem; line-height: 1; color: var(--warm-text); } .catalog-note-copy { margin-top: 0.35rem; color: var(--warm-muted); font-size: 0.84rem; line-height: 1.55; } .catalog-section { margin-top: 1.6rem; border-radius: var(--radius); padding: 2rem; } .catalog-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.6rem; } .catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .archive-card { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); min-height: 320px; border-radius: var(--radius); overflow: hidden; background: rgba(255, 252, 247, 0.86); border: 1px solid rgba(185, 159, 128, 0.72); box-shadow: 0 16px 34px rgba(56, 35, 18, 0.08); animation: shelf-rise 620ms ease both; } .archive-card:nth-child(2) { animation-delay: 90ms; } .archive-card:nth-child(3) { animation-delay: 160ms; } .archive-card:nth-child(4) { animation-delay: 220ms; } .archive-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55); pointer-events: none; } .archive-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); } .archive-card-spine { background: var(--agent-cover); border-right: 1px solid rgba(28, 23, 18, 0.08); position: relative; } .archive-card-sheet { display: flex; flex-direction: column; justify-content: space-between; padding: 1.35rem; background: var(--parchment-soft); } .archive-card-index, .archive-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; font-family: "JetBrains Mono", monospace; font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--warm-faint); } .archive-card-copy { padding: 1.15rem 0; border-top: 1px solid rgba(185, 159, 128, 0.52); border-bottom: 1px solid rgba(185, 159, 128, 0.52); } .archive-card-copy h3 { font-family: "IBM Plex Serif", Georgia, serif; font-size: 2rem; line-height: 0.96; color: var(--warm-text); } .archive-card-copy p { margin-top: 0.9rem; color: var(--warm-muted); font-size: 0.9rem; line-height: 1.7; } .archive-empty-state { display: grid; grid-template-columns: minmax(0, 560px) auto; align-items: center; justify-content: space-between; gap: 1.6rem; padding: 2rem 0 0.5rem; } .empty-preview { display: grid; grid-template-columns: 42px minmax(0, 1fr); width: min(100%, 560px); min-height: 250px; border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(185, 159, 128, 0.72); background: rgba(255, 252, 247, 0.9); box-shadow: var(--shadow-soft); } .empty-preview-spine { background: linear-gradient(160deg, var(--accent) 0%, var(--accent-dark) 100%); } .empty-preview-sheet { display: grid; align-content: center; gap: 0.8rem; padding: 2rem; } .archive-empty-action { display: flex; justify-content: flex-end; } .archive-modal { background: var(--parchment-soft); animation: fade-up 220ms ease; } .archive-modal-aside { background: var(--parchment-deep); } .confirm-dialog-panel { border: 1px solid rgba(185, 159, 128, 0.78); border-radius: var(--radius); background: var(--parchment-soft); box-shadow: 0 24px 52px rgba(28, 23, 18, 0.22); } .confirm-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.15rem 0.75rem; border-bottom: 1px solid rgba(212, 195, 174, 0.8); background: rgba(241, 233, 221, 0.78); } .confirm-dialog-kicker { font-family: "JetBrains Mono", monospace; font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); } .confirm-dialog-close { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--radius); color: var(--warm-faint); transition: background 150ms ease, color 150ms ease; } .confirm-dialog-close:hover { background: rgba(226, 212, 194, 0.72); color: var(--warm-text); } .confirm-dialog-body { padding: 1.2rem 1.15rem 1rem; } .confirm-dialog-title { font-family: "IBM Plex Serif", Georgia, serif; font-size: 2rem; line-height: 0.98; color: var(--warm-text); } .confirm-dialog-message { margin-top: 0.7rem; max-width: 48ch; font-size: 0.95rem; line-height: 1.72; color: var(--warm-muted); } .confirm-dialog-actions { display: flex; justify-content: flex-end; gap: 0.7rem; padding: 1rem 1.75rem 1.5rem; } .confirm-dialog-danger { background: linear-gradient(180deg, #ff6c61, #ff413d); border-color: rgba(186, 44, 39, 0.38); box-shadow: 0 14px 24px rgba(255, 65, 61, 0.16); } .confirm-dialog-danger:hover { background: linear-gradient(180deg, #ff7b72, #ef3f3a); } .create-agent-input { width: 100%; border: 1px solid rgba(212, 195, 174, 0.85); border-radius: var(--radius); background: rgba(251, 248, 242, 0.96); padding: 0.6rem 0.85rem; font-size: 0.9rem; line-height: 1.5; color: var(--warm-text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78); } .create-agent-input::placeholder { color: var(--warm-faint); } .create-agent-input:focus { outline: none; border-color: rgba(196, 96, 29, 0.88); box-shadow: 0 0 0 3px rgba(196, 96, 29, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8); } .create-agent-textarea { min-height: 4.5rem; resize: none; } /* Two-column create agent modal */ .create-agent-two-col { display: grid; grid-template-columns: 1fr 190px; gap: 2rem; padding: 1.75rem 1.75rem 0.5rem; } .create-agent-left { display: flex; flex-direction: column; } .create-agent-left .confirm-dialog-title { padding: 0; margin-bottom: 0.5rem; } .create-agent-left .confirm-dialog-message { padding: 0; margin-bottom: 0; } .create-agent-dialog-fields { display: grid; gap: 0.75rem; margin-top: 1.25rem; } .create-agent-right { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding-top: 0.25rem; } .create-agent-cover-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--warm-faint); align-self: flex-start; } .create-agent-cover-preview { width: 160px; height: 160px; border-radius: var(--radius); flex-shrink: 0; box-shadow: 0 6px 20px rgba(43, 33, 24, 0.22); border: 1px solid rgba(212, 195, 174, 0.4); } .create-agent-regen-btn { display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.9rem; border-radius: var(--radius); border: 1px solid rgba(212, 195, 174, 0.8); background: rgba(251, 248, 242, 0.96); color: var(--warm-text); font-size: 0.78rem; font-weight: 500; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .create-agent-regen-btn:hover { background: rgba(240, 232, 220, 1); border-color: var(--accent); color: var(--accent); } .archive-agent-page { background: transparent; } .agent-breadcrumb { background: linear-gradient(180deg, rgba(247, 243, 237, 0.75), rgba(247, 243, 237, 0)); } .agent-manuscript-header { background: rgba(247, 243, 237, 0.46); } .agent-header-bar { display: grid; grid-template-columns: auto minmax(280px, 1fr) auto; align-items: center; gap: 1.25rem 1.75rem; } .agent-header-title-block { min-width: 0; } .agent-kicker { font-family: "JetBrains Mono", monospace; font-size: 0.66rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent); } .agent-title-row { display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap; } .agent-title { margin: 0; /* Long sub-agent titles (e.g. "Foo — File Collection") would otherwise overflow the grid column and overlap the description block to the right. Allow wrapping at word boundaries so the title stays inside its column. */ overflow-wrap: anywhere; } .agent-header-description { margin: 0; min-width: 0; max-width: 52ch; padding-left: 1.2rem; border-left: 1px solid rgba(212, 195, 174, 0.95); color: var(--warm-muted); font-size: 0.92rem; line-height: 1.75; } .agent-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; flex-wrap: wrap; } .agent-header-meta { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; } .agent-meta-pill { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.75rem; border-radius: var(--radius); border: 1px solid var(--warm-border); background: var(--parchment-deep); } .agent-meta-pill .pill-label { font-family: "JetBrains Mono", monospace; font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--warm-faint); } .agent-meta-pill .pill-value { font-family: "JetBrains Mono", monospace; font-size: 0.88rem; font-weight: 600; color: var(--accent); } @media (max-width: 1180px) { .agent-header-bar { grid-template-columns: minmax(0, 1fr); align-items: start; } .agent-header-description { max-width: 70ch; padding-left: 0; border-left: none; padding-top: 0.15rem; } .agent-header-actions, .agent-header-meta { justify-content: flex-start; } } @media (max-width: 720px) { .agent-title { white-space: normal; } .agent-title-row { gap: 0.55rem; } .agent-header-actions { gap: 0.5rem; } } #grid-scroll { background: var(--parchment-soft); } .manuscript-grid-shell { overflow: visible; border-radius: var(--radius); border: 1px solid rgba(185, 159, 128, 0.7); box-shadow: none; /* Size to the full table width (not just the viewport) so the frame/border wraps every column even when the grid scrolls horizontally. */ width: max-content; min-width: 100%; } .resizable-col { overflow: hidden; } #agent-grid { width: max-content; min-width: 100%; background: rgba(255, 252, 247, 0.9); } #agent-grid thead th { background: var(--grid-header); } #agent-grid tbody td { border-color: rgba(212, 195, 174, 0.9) !important; background: rgba(251, 248, 242, 0.82); vertical-align: middle; } #agent-grid tbody td { height: 48px; max-height: 48px; overflow: hidden; } #agent-grid tbody tr:nth-child(even) td { background: rgba(247, 243, 237, 0.78); } #agent-grid tbody tr:hover td { background: rgba(255, 252, 247, 0.96); } #agent-grid tbody td.sticky { background: rgba(251, 248, 242, 0.96) !important; pointer-events: none; } #agent-grid tbody td.sticky .run-row-btn, #agent-grid tbody td.sticky .row-expand-btn, #agent-grid tbody td.sticky .row-export-btn, #agent-grid tbody td.sticky .row-delete-btn { pointer-events: auto; } .prop-cell { position: relative; } td.prop-cell[data-direction="output"] { cursor: pointer; } /* Compact row height — content-only, no extra space */ #agent-rows tr { height: 48px; } #agent-rows td { padding-top: 4px !important; padding-bottom: 4px !important; padding-left: 8px !important; padding-right: 8px !important; } #agent-rows .file-drop-zone, #agent-rows .output-cell { height: 40px !important; min-height: 40px !important; max-height: 40px !important; } /* No trailing separator under the last grid row — it only spanned the columns, leaving a half-width line at the bottom of the grid. Cover both the row and its cells (border-collapse can attribute the bottom edge to either). */ #agent-rows tr:last-child, #agent-rows tr:last-child td { border-bottom: none !important; } .file-drop-zone { justify-content: center; min-height: 0; max-height: 40px; overflow: hidden; padding: 0; } .file-drop-zone.file-drag-over { background: color-mix(in srgb, var(--accent) 8%, transparent); border: 2px dashed var(--accent); border-radius: var(--radius); } .file-drop-zone.file-drag-over .file-placeholder { color: var(--accent); } .file-placeholder, .file-add-hint { color: var(--warm-faint) !important; } .collection-link { color: var(--accent) !important; } #agent-grid .output-cell { align-items: center; max-height: 40px; overflow: hidden; cursor: pointer; user-select: none; } #agent-grid .output-cell pre { max-height: 40px; overflow: hidden; } #agent-grid .output-cell div[style*="-webkit-line-clamp"] { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } #agent-grid .collection-preview { max-height: 40px; overflow: hidden; } .prompt-editable:empty::before { content: attr(data-placeholder); color: var(--warm-faint); pointer-events: none; } .prompt-editable .mention-tag { display: inline; font-weight: 700; color: var(--accent); white-space: nowrap; } /* Context chips — single scrollable row, no wrapping */ .context-chips-strip { flex-wrap: nowrap; align-items: center; gap: 0.375rem; min-height: 1.75rem; overflow-x: auto !important; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: rgba(185, 159, 128, 0.65) transparent; } .context-chips-strip::-webkit-scrollbar { height: 6px; } .context-chips-strip::-webkit-scrollbar-thumb { background: rgba(185, 159, 128, 0.65); border-radius: 999px; } .input-chip { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 0.35rem; min-width: 0; max-width: 11rem; padding: 0.3rem 0.55rem; border-radius: var(--radius); white-space: nowrap; overflow: hidden; } .input-chip-remove { display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; flex: 0 0 auto; border: 0; border-radius: 999px; background: transparent; color: currentColor; opacity: 0.62; cursor: pointer; padding: 0; } .input-chip-remove:hover { opacity: 1; background: rgba(56, 35, 18, 0.08); } .input-chip-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Keyboard-highlighted item in the @ mention dropdown */ .mention-item-active { background: rgba(22, 163, 74, 0.08) !important; outline: none; } .col-resize-handle { position: absolute; top: 0; right: -5px; width: 10px; height: 100%; cursor: col-resize; z-index: 5; } .col-resize-handle::after { content: ""; position: absolute; top: 5px; bottom: 5px; left: 50%; transform: translateX(-50%); width: 2px; border-radius: 999px; background: transparent; transition: background 0.15s ease; } .col-resize-handle:hover::after, .col-resize-handle.active::after { background: var(--accent); } .col-resize-guide { position: absolute; top: 0; width: 2px; background: var(--accent); z-index: 50; pointer-events: none; min-height: 100%; height: 100vh; } body.col-resizing { cursor: col-resize !important; user-select: none; -webkit-user-select: none; } body.col-resizing * { cursor: col-resize !important; } body.col-resizing iframe { pointer-events: none; } .citation-badge { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin: 0 1px; border-radius: 50%; background: var(--accent); color: var(--parchment); font-size: 10px; font-weight: 700; line-height: 1; cursor: pointer; } .citation-badge:hover { background: var(--accent-dark); } #pdf-text-layer { line-height: 1; overflow: hidden; } #pdf-text-layer span { color: transparent; position: absolute; white-space: pre; pointer-events: none; line-height: 1.2; } .pdf-highlight { position: absolute; border: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 4px; pointer-events: none; } .pdf-highlight-badge { position: absolute; top: -10px; left: -10px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent); color: var(--parchment); font-size: 10px; font-weight: 700; pointer-events: none; } #side-panel { background: var(--parchment-soft); } #side-panel.open { display: block; width: 50%; } .side-panel-section { border-bottom: 1px solid rgba(212, 195, 174, 0.88); padding: 12px 16px; } .side-panel-section:last-child { border-bottom: none; } #pdf-viewer-panel { backdrop-filter: blur(8px); } #pdf-viewer-panel > div { background: var(--parchment-soft); border-color: rgba(185, 159, 128, 0.88); } #pdf-canvas-container { background: var(--parchment-mid) !important; } #pdf-page-wrapper { box-shadow: 0 24px 48px rgba(56, 35, 18, 0.18); } #bulk-action-bar { border-top-color: rgba(185, 159, 128, 0.82) !important; background: var(--grid-header) !important; } #bulk-rerun-btn { background: var(--accent) !important; } #bulk-rerun-btn:hover { background: var(--accent-dark) !important; } #bulk-delete-btn { background: #B91C1C !important; } #bulk-delete-btn:hover { background: #991B1B !important; } #btn-new-entity, #row-prompt-popover, #row-prompt-textarea { border-color: rgba(212, 195, 174, 0.9) !important; } #btn-new-entity { background: rgba(255, 252, 247, 0.88) !important; color: var(--warm-muted) !important; } #btn-new-entity:hover { background: rgba(251, 248, 242, 0.96) !important; color: var(--warm-text) !important; } #row-prompt-popover { background: var(--parchment-soft) !important; position: fixed !important; width: min(420px, calc(100vw - 32px)) !important; max-height: min(420px, calc(100vh - 32px)); box-shadow: 0 24px 48px rgba(56, 35, 18, 0.18), 0 2px 10px rgba(56, 35, 18, 0.08) !important; } #row-prompt-textarea { background: rgba(255, 252, 247, 0.92) !important; color: var(--warm-text) !important; min-height: 168px; font-family: "IBM Plex Sans", "Segoe UI", sans-serif; font-size: 12px; } #agent-grid .text-slate-800, #agent-grid .text-slate-700, #side-panel .text-slate-800, #side-panel .text-slate-700, #row-prompt-popover .text-slate-800, #row-prompt-popover .text-slate-700 { color: var(--warm-text) !important; } #agent-grid .text-slate-600, #agent-grid .text-slate-500, #side-panel .text-slate-600, #side-panel .text-slate-500, #row-prompt-popover .text-slate-600, #row-prompt-popover .text-slate-500 { color: var(--warm-muted) !important; } #agent-grid .text-slate-400, #side-panel .text-slate-400, #row-prompt-popover .text-slate-400 { color: var(--warm-faint) !important; } #agent-grid .border-slate-200, #side-panel .border-slate-200, #side-panel .border-slate-100, #row-prompt-popover .border-slate-200, #row-prompt-popover .border-slate-100 { border-color: rgba(212, 195, 174, 0.88) !important; } #agent-grid .bg-slate-50, #side-panel .bg-slate-50, #row-prompt-popover .bg-slate-50, #agent-grid .bg-white, #side-panel .bg-white, #row-prompt-popover .bg-white { background: rgba(255, 252, 247, 0.9) !important; } #agent-grid .text-cyan-600, #agent-grid .text-cyan-500, #side-panel .text-cyan-600, #side-panel .text-cyan-500 { color: var(--accent) !important; } #agent-grid .text-violet-600, #agent-grid .text-violet-500, #side-panel .text-violet-600, #side-panel .text-violet-500, #row-prompt-popover .text-violet-600, #row-prompt-popover .text-violet-500 { color: var(--accent) !important; } #agent-grid .bg-violet-600, #row-prompt-popover .bg-violet-600 { background: var(--accent) !important; } #agent-grid .hover\:bg-violet-700:hover, #row-prompt-popover .hover\:bg-violet-700:hover { background: var(--accent-dark) !important; } #agent-grid .text-amber-600, #agent-grid .text-amber-500 { color: #9a5b1a !important; } #agent-grid .text-emerald-500 { color: #6a7840 !important; } #prop-config-popover { border-radius: var(--radius) !important; border-color: rgba(212, 195, 174, 0.92) !important; background: var(--parchment-soft) !important; box-shadow: 0 20px 38px rgba(56, 35, 18, 0.16) !important; max-height: calc(100vh - 24px); overflow-y: auto !important; overflow-x: visible !important; } #prop-config-popover .rounded-lg, #prop-config-popover .rounded-md { border-radius: var(--radius) !important; } #prop-config-popover .rounded-full { border-radius: 8px !important; } #prop-config-popover .border-slate-200, #prop-config-popover .border-slate-100 { border-color: rgba(212, 195, 174, 0.88) !important; } #prop-config-popover .bg-white, #prop-config-popover .bg-slate-50, #prop-config-popover .bg-slate-100 { background: rgba(255, 252, 247, 0.92) !important; } #prop-config-popover .text-slate-800, #prop-config-popover .text-slate-700 { color: var(--warm-text) !important; } #prop-config-popover .text-slate-600, #prop-config-popover .text-slate-500 { color: var(--warm-muted) !important; } #prop-config-popover .text-slate-400 { color: var(--warm-faint) !important; } #output-preview-modal { position: fixed; z-index: 280; width: min(38vw, 520px); max-width: calc(100vw - 24px); height: 260px; overflow: hidden; border: 1px solid #1A1208; border-top: 2px solid var(--accent); border-radius: 0 0 var(--radius) var(--radius); background: var(--parchment-soft); box-shadow: 0 20px 48px rgba(28, 23, 18, 0.28), 0 4px 12px rgba(28, 23, 18, 0.12); } #output-preview-modal.hidden { display: none !important; } #output-preview-panel { display: flex; flex-direction: column; max-height: inherit; } #output-preview-header { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.55rem 0.75rem; border-bottom: 1px solid #1A1208; background: var(--grid-header); shrink: 0; } #output-preview-title { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #C8B8A0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #output-preview-type-badge { font-family: "JetBrains Mono", monospace; font-size: 0.62rem; letter-spacing: 0.16em; color: rgba(200, 184, 160, 0.9); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 3px; padding: 0.1rem 0.4rem; white-space: nowrap; flex-shrink: 0; } #output-preview-close { width: 1.6rem; height: 1.6rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; color: rgba(200, 184, 160, 0.65); border: 1px solid rgba(255,255,255,0.08); background: transparent; flex-shrink: 0; transition: background 0.15s, color 0.15s; } #output-preview-close:hover { background: rgba(255,255,255,0.08); color: #C8B8A0; } #output-preview-body { height: calc(260px - 44px); overflow-y: auto; overflow-x: auto; padding: 0; color: var(--warm-text); font-size: 0.88rem; line-height: 1.7; background: rgba(255, 252, 247, 0.98); } #output-preview-body .output-preview-rich { padding: 0.95rem 1rem 1rem; } #output-preview-body .output-preview-rich pre { margin: 0; padding: 0; background: transparent; border-radius: 0; } .output-preview-code { display: grid; grid-template-columns: 48px minmax(0, 1fr); min-width: max-content; font-family: "JetBrains Mono", monospace; font-size: 0.8rem; line-height: 1.65; background: rgba(252, 248, 242, 0.98); } .output-preview-line { display: contents; } .output-preview-ln { padding: 0.25rem 0.7rem 0.25rem 0.5rem; text-align: right; color: rgba(131, 110, 92, 0.82); background: rgba(238, 229, 216, 0.72); border-right: 1px solid rgba(212, 195, 174, 0.76); user-select: none; } .output-preview-txt { padding: 0.25rem 0.95rem; white-space: pre; color: var(--warm-text); } @media (max-width: 960px) { #output-preview-modal { width: min(80vw, 480px); height: 260px; } #output-preview-body { height: calc(260px - 44px); } } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(185, 159, 128, 0.9); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: var(--warm-muted); } @keyframes fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes shelf-rise { from { opacity: 0; transform: translateY(22px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (max-width: 1100px) { .archive-hero { grid-template-columns: 1fr; } .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .archive-empty-state { grid-template-columns: 1fr; } .archive-empty-action { justify-content: flex-start; } } @media (max-width: 800px) { body > div.flex.flex-1.overflow-hidden { flex-direction: column; } .archive-sidebar { width: 100%; max-height: 240px; border-right: none; border-bottom: 1px solid rgba(212, 195, 174, 0.88); } .catalog-heading { flex-direction: column; align-items: start; } .catalog-grid { grid-template-columns: 1fr; } .archive-hero > div, .catalog-note, .catalog-section { padding: 1.4rem; border-radius: var(--radius); } .archive-title { font-size: clamp(2.6rem, 16vw, 4rem); } #side-panel.open { width: 100%; } .archive-modal { flex-direction: column; max-height: 92vh; overflow-y: auto; } .archive-modal-aside { width: 100%; } } /* Template viewer document styles */ /* Template viewer — mammoth.js output styling */ .template-viewer-doc { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 0.9rem; color: #1c1712; line-height: 1.75; max-width: 780px; margin: 0 auto; background: #fff; padding: 48px 56px; border-radius: 4px; box-shadow: 0 2px 16px rgba(0,0,0,0.10); } .template-viewer-doc h1 { font-family: "IBM Plex Serif", Georgia, serif; font-size: 2rem; font-weight: 700; color: #1c1712; margin: 1.4em 0 0.3em; line-height: 1.2; } .template-viewer-doc h2 { font-family: "IBM Plex Serif", Georgia, serif; font-size: 1.4rem; font-weight: 700; color: #1c1712; margin: 1.3em 0 0.3em; padding-bottom: 0.2em; border-bottom: 1px solid #e2d4c2; } .template-viewer-doc h3 { font-size: 1rem; font-weight: 700; color: #1c1712; margin: 1.1em 0 0.2em; text-transform: uppercase; letter-spacing: 0.04em; } .template-viewer-doc h4, .template-viewer-doc h5, .template-viewer-doc h6 { font-size: 0.9rem; font-weight: 700; color: #3a3028; margin: 0.9em 0 0.2em; } .template-viewer-doc p { margin: 0.55em 0; } .template-viewer-doc table { border-collapse: collapse; width: 100%; margin: 1.2em 0; font-size: 0.825rem; line-height: 1.5; } .template-viewer-doc th, .template-viewer-doc td { border: 1px solid #d4c3ae; padding: 0.45em 0.9em; text-align: left; vertical-align: top; } .template-viewer-doc th { background: #ede5d8; font-weight: 700; color: #1c1712; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; } .template-viewer-doc tr:nth-child(even) td { background: #faf7f2; } .template-viewer-doc ul { list-style: disc; padding-left: 1.6em; margin: 0.6em 0; } .template-viewer-doc ol { list-style: decimal; padding-left: 1.6em; margin: 0.6em 0; } .template-viewer-doc li { margin: 0.25em 0; } .template-viewer-doc strong { font-weight: 700; } .template-viewer-doc em { font-style: italic; color: #5a4a3a; } .template-viewer-doc a { color: var(--accent); text-decoration: none; } .template-viewer-doc a:hover { text-decoration: underline; } .template-viewer-doc hr { border: none; border-top: 1px solid #d4c3ae; margin: 1.5em 0; } .template-viewer-doc blockquote { border-left: 3px solid var(--accent); margin: 1em 0; padding: 0.5em 1em; background: #faf7f2; color: #5a4a3a; font-style: italic; } /* Editable tag cells — hover-only clear button */ .tag-clear-btn { display: none; width: 14px; height: 14px; border-radius: 9999px; color: #94a3b8; align-items: center; justify-content: center; cursor: pointer; border: 0; background: transparent; padding: 0; } .output-cell:hover .tag-clear-btn { display: inline-flex; } .tag-clear-btn:hover { color: #ef4444; background: #fee2e2; } .tag-cell-wrapper:hover .empty-pill { color: var(--warm-muted); border-color: var(--warm-faint); } /* ===== Dark-mode selector-level overrides ===== */ /* Most surfaces theme via the variable block above. These selectors use hardcoded rgba() colours and won't flip automatically — they need explicit dark values. */ /* Top nav — uses hardcoded rgba(251,250,246,0.92) instead of --parchment */ [data-theme="dark"] .top-nav { background: rgba(15, 23, 42, 0.92); } /* Sidebar search box — hardcoded warm-white background */ [data-theme="dark"] .sidebar-search { background: rgba(30, 41, 59, 0.88); border-color: rgba(71, 85, 105, 0.75); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } /* Sidebar active / hover state — hardcoded warm-white */ [data-theme="dark"] .sidebar-link:hover, [data-theme="dark"] .sidebar-link.active { background: rgba(30, 41, 59, 0.86); border-color: rgba(71, 85, 105, 0.65); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } /* Brand mark — JMN logotype contrast against dark navbar */ [data-theme="dark"] .brand-mark .brand-mark-jmn { color: #F8FAFC; } [data-theme="dark"] .brand-mark .brand-mark-sub { color: var(--gold); } [data-theme="dark"] .product-name { color: #F8FAFC; } /* Spreadsheet grid header — already uses var(--grid-header), but the inline border in agent.html uses a hardcoded #1A1208 (warm brown). In dark mode push it cooler. */ [data-theme="dark"] #agent-grid thead th, [data-theme="dark"] #bulk-action-bar { border-color: #0F172A !important; } [data-theme="dark"] #agent-grid thead th { background: var(--grid-header) !important; } /* Status pills — bump saturation for legibility on slate backgrounds */ [data-theme="dark"] #agent-grid .text-amber-500, [data-theme="dark"] #agent-grid .text-amber-600 { color: #FBBF24 !important; } [data-theme="dark"] #agent-grid .text-emerald-500 { color: #6EE7B7 !important; } [data-theme="dark"] #agent-grid .text-red-500 { color: #FCA5A5 !important; } /* Output-preview modal — keeps its dark header in light theme; in dark theme the body should also follow the dark surface palette */ [data-theme="dark"] #output-preview-body { background: var(--parchment-soft) !important; } [data-theme="dark"] .output-preview-code { background: var(--parchment) !important; } [data-theme="dark"] .output-preview-ln { background: var(--parchment-deep) !important; border-right-color: var(--warm-border) !important; } /* User dropdown — currently hardcoded bg-white, border-slate-200, hover:bg-slate-50. Re-theme its surfaces in dark. */ [data-theme="dark"] #user-menu-dropdown { background: var(--parchment-soft); border-color: var(--warm-border); } [data-theme="dark"] #user-menu-dropdown a:hover, [data-theme="dark"] #user-menu-dropdown button:hover { background: var(--parchment-deep); } [data-theme="dark"] #user-menu-dropdown .border-slate-100 { border-color: var(--warm-border) !important; } /* PDF viewer header (dark grid-header background) — token-driven, fine. PDF canvas container background is var(--parchment-mid) — fine. */ /* Confirm-dialog danger button stays semantically red — no dark override beyond what the rule already declares. */ /* Grid body — hardcoded warm-white cell backgrounds */ [data-theme="dark"] #agent-grid { background: var(--parchment); } [data-theme="dark"] #agent-grid tbody td { background: var(--parchment-soft); border-color: var(--warm-border) !important; } [data-theme="dark"] #agent-grid tbody tr:nth-child(even) td { background: var(--parchment-deep); } [data-theme="dark"] #agent-grid tbody tr:hover td { background: var(--parchment-mid); } [data-theme="dark"] #agent-grid tbody td.sticky { background: var(--parchment-soft) !important; } [data-theme="dark"] #agent-grid tbody tr:hover td.sticky { background: var(--parchment-mid) !important; } /* Home page agent cards */ [data-theme="dark"] .archive-card { background: var(--parchment-soft); border-color: var(--warm-border); } /* Home page empty state — .empty-preview hardcodes a near-white sheet (like .archive-card did), so the theme-flipped (light) text became invisible on it in dark mode. Flip the surface the same way; light mode keeps its literal. */ [data-theme="dark"] .empty-preview { background: var(--parchment-soft); border-color: var(--warm-border); } /* Add-row button and row prompt textarea */ [data-theme="dark"] #btn-new-entity { background: var(--parchment-soft) !important; } [data-theme="dark"] #btn-new-entity:hover { background: var(--parchment-mid) !important; } [data-theme="dark"] #row-prompt-textarea { background: var(--parchment-soft) !important; } /* Sidebar — --parchment-deep (#1A2436) too close to page bg (#0F172A); use soft (#1E293B) */ [data-theme="dark"] .archive-sidebar { background: var(--parchment-soft); } /* Archive chip — hardcoded warm-cream background and tan border */ [data-theme="dark"] .archive-chip { background: var(--parchment-mid); border-color: var(--warm-border-strong); color: var(--warm-muted); } /* Secondary button — hardcoded rgba(255,252,247,...) warm-white */ [data-theme="dark"] .archive-button.secondary { background: var(--parchment-mid); border-color: var(--warm-border-strong); color: var(--warm-text); } /* Main section containers — hardcoded warm-tan border */ [data-theme="dark"] .archive-hero > div, [data-theme="dark"] .catalog-note, [data-theme="dark"] .catalog-section, [data-theme="dark"] .manuscript-grid-shell { border-color: var(--warm-border); } /* Catalog note internal dividers */ [data-theme="dark"] .catalog-note-grid > div { border-color: var(--warm-border); } /* ── Agent page header ──────────────────────────────────────────────── */ /* Warm rgba(247,243,237,0.46) overlay turns grayish-beige on dark slate — remove it */ [data-theme="dark"] .agent-manuscript-header { background: transparent; } /* Breadcrumb's light warm gradient turns into a muddy haze on dark — drop it */ [data-theme="dark"] .agent-breadcrumb { background: transparent; } /* Description left-border: hardcoded warm tan → slate token */ [data-theme="dark"] .agent-header-description { border-left-color: var(--warm-border); } /* ── Tailwind token overrides ──────────────────────────────────────── */ /* The Tailwind CDN config maps custom token names to hardcoded hex values, so utility classes like bg-parchment, text-warm-text, border-warm-border never respond to CSS variable changes. These rules re-apply the correct token value in dark mode for every utility class in the codebase. */ [data-theme="dark"] .text-warm-text { color: var(--warm-text) !important; } [data-theme="dark"] .text-warm-muted { color: var(--warm-muted) !important; } [data-theme="dark"] .text-warm-faint { color: var(--warm-faint) !important; } [data-theme="dark"] .bg-parchment { background-color: var(--parchment) !important; } [data-theme="dark"] .bg-parchment-soft { background-color: var(--parchment-soft) !important; } [data-theme="dark"] .bg-parchment-deep { background-color: var(--parchment-deep) !important; } [data-theme="dark"] .bg-parchment-mid { background-color: var(--parchment-mid) !important; } [data-theme="dark"] .bg-warm-border { background-color: var(--warm-border) !important; } [data-theme="dark"] .border-warm-border { border-color: var(--warm-border) !important; } [data-theme="dark"] .border-warm-border-strong { border-color: var(--warm-border-strong) !important; } [data-theme="dark"] .text-accent { color: var(--accent) !important; } [data-theme="dark"] .bg-accent { background-color: var(--accent) !important; } [data-theme="dark"] .hover\:bg-parchment-deep:hover { background-color: var(--parchment-deep) !important; } [data-theme="dark"] .hover\:bg-parchment-mid:hover { background-color: var(--parchment-mid) !important; } [data-theme="dark"] .hover\:text-accent:hover { color: var(--accent) !important; } /* ── Global dark fallbacks for non-theme utility classes ────────────────── The theme classes above are bridged, but Tailwind's neutral defaults (bg-white/slate, border-slate, text-slate) and semantic *-50 tints are static hexes, so anywhere outside the id-scoped containers below — settings, nav menus, and the floating popovers app.js appends to — they ignore the token swap and render light-on-light (invisible) or as washed-out panels. These plain-class selectors are LOWER specificity than the #agent-grid / #prop-config-popover / #side-panel / #row-prompt-popover rules, so those keep their tuned shades and only un-scoped surfaces fall back here. */ [data-theme="dark"] .bg-white, [data-theme="dark"] .bg-slate-50, [data-theme="dark"] .bg-slate-100 { background-color: var(--parchment-soft) !important; } [data-theme="dark"] .border-slate-100, [data-theme="dark"] .border-slate-200, [data-theme="dark"] .border-slate-300 { border-color: var(--warm-border) !important; } [data-theme="dark"] .hover\:bg-slate-50:hover, [data-theme="dark"] .hover\:bg-slate-100:hover, [data-theme="dark"] .hover\:bg-slate-200:hover { background-color: var(--parchment-mid) !important; } [data-theme="dark"] .disabled\:bg-slate-100:disabled { background-color: var(--parchment-mid) !important; } [data-theme="dark"] .text-slate-800, [data-theme="dark"] .text-slate-700 { color: var(--warm-text) !important; } [data-theme="dark"] .text-slate-600, [data-theme="dark"] .text-slate-500 { color: var(--warm-muted) !important; } [data-theme="dark"] .text-slate-400 { color: var(--warm-faint) !important; } /* Text-bearing inputs that opt into a white fill (settings, modals): the .bg-white rule darkens the fill above; this gives them readable light text (checkboxes/radios/file inputs don't carry .bg-white, so they're untouched). */ [data-theme="dark"] input.bg-white, [data-theme="dark"] select.bg-white, [data-theme="dark"] textarea.bg-white { color: var(--warm-text) !important; } /* Semantic banner/panel tints — Tailwind's light *-50 fills wash out on dark. */ [data-theme="dark"] .bg-red-50, [data-theme="dark"] .bg-red-50\/40 { background-color: rgba(239, 68, 68, 0.12) !important; } [data-theme="dark"] .border-red-200, [data-theme="dark"] .border-red-300 { border-color: rgba(239, 68, 68, 0.45) !important; } [data-theme="dark"] .text-red-800 { color: #FCA5A5 !important; } [data-theme="dark"] .text-red-700 { color: #F87171 !important; } [data-theme="dark"] .bg-green-50 { background-color: rgba(34, 197, 94, 0.12) !important; } [data-theme="dark"] .border-green-200 { border-color: rgba(34, 197, 94, 0.45) !important; } [data-theme="dark"] .text-green-800 { color: #86EFAC !important; } /* ── Property config popover (dark) ─────────────────────────────────── */ /* The popover's light-mode rules force warm-white fills and tan borders with !important, so they don't respond to the token swap. Re-theme each inner surface for dark. Popover base is --parchment-soft; controls sit one step lighter (--parchment-mid), hover one step lighter again (--warm-border). */ [data-theme="dark"] #prop-config-popover { border-color: var(--warm-border) !important; } [data-theme="dark"] #prop-config-popover .bg-white, [data-theme="dark"] #prop-config-popover .bg-slate-50, [data-theme="dark"] #prop-config-popover .bg-slate-100 { background: var(--parchment-mid) !important; } [data-theme="dark"] #prop-config-popover .border-slate-200, [data-theme="dark"] #prop-config-popover .border-slate-100 { border-color: var(--warm-border) !important; } /* Hover states inside the popover (output-type / tool triggers, list rows) */ [data-theme="dark"] #prop-config-popover .hover\:bg-slate-200:hover, [data-theme="dark"] #prop-config-popover .hover\:bg-slate-100:hover, [data-theme="dark"] #prop-config-popover .hover\:bg-slate-50:hover { background: var(--warm-border) !important; } /* Delete Property — light red hover becomes a subtle translucent red */ [data-theme="dark"] #prop-config-delete:hover { background: rgba(239, 68, 68, 0.14) !important; } /* Prompt editor — inline rgba warm background needs !important to override */ [data-theme="dark"] #prop-config-prompt { background: var(--parchment) !important; color: var(--warm-text) !important; } /* Number / select inputs (Max Tokens, Context Chunks, tag no-match) */ [data-theme="dark"] #prop-config-popover input, [data-theme="dark"] #prop-config-popover select, [data-theme="dark"] #prop-config-popover textarea { background: var(--parchment-mid) !important; color: var(--warm-text) !important; border-color: var(--warm-border) !important; } /* ── Agent grid / side panel / row-prompt popover (dark) ────────────────── */ /* Same situation as #prop-config-popover: the light-mode block above forces warm-white .bg-white/.bg-slate-* fills and tan .border-slate-* with !important, so they ignore the token swap — while .text-slate-* in these containers IS remapped to (now-light) --warm-* unconditionally. Without these, light text lands on a near-white fill (invisible). Re-theme to match. */ [data-theme="dark"] #agent-grid .bg-white, [data-theme="dark"] #agent-grid .bg-slate-50, [data-theme="dark"] #agent-grid .bg-slate-100, [data-theme="dark"] #side-panel .bg-white, [data-theme="dark"] #side-panel .bg-slate-50, [data-theme="dark"] #side-panel .bg-slate-100, [data-theme="dark"] #row-prompt-popover .bg-white, [data-theme="dark"] #row-prompt-popover .bg-slate-50, [data-theme="dark"] #row-prompt-popover .bg-slate-100 { background: var(--parchment-mid) !important; } [data-theme="dark"] #agent-grid .border-slate-200, [data-theme="dark"] #agent-grid .border-slate-100, [data-theme="dark"] #side-panel .border-slate-200, [data-theme="dark"] #side-panel .border-slate-100, [data-theme="dark"] #row-prompt-popover .border-slate-200, [data-theme="dark"] #row-prompt-popover .border-slate-100 { border-color: var(--warm-border) !important; } [data-theme="dark"] #agent-grid .hover\:bg-slate-50:hover, [data-theme="dark"] #agent-grid .hover\:bg-slate-100:hover, [data-theme="dark"] #side-panel .hover\:bg-slate-50:hover, [data-theme="dark"] #side-panel .hover\:bg-slate-100:hover, [data-theme="dark"] #row-prompt-popover .hover\:bg-slate-50:hover, [data-theme="dark"] #row-prompt-popover .hover\:bg-slate-100:hover { background: var(--warm-border) !important; } /* ── Python code editor (CodeMirror 5) — dark ───────────────────────── */ /* agent.html ships a hardcoded light .CodeMirror theme; override its surfaces and syntax tokens for dark. Higher specificity wins over the inline