/*!*****************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./src/app/globals.css ***! \*****************************************************************************************************************************************************************************************************************************************************************/ /* ═══ THEME SYSTEM ═══ * Default `:root` values define the LIGHT theme ("warm paper" — soft * cream surfaces with cool ORAIN brand teal-blue as the brand pop). * `:root[data-theme="dark"]` overrides the same custom properties for * DARK ("cool charcoal"). The `data-theme` attribute is set by: * 1. an inline script in (FOUC prevention) reading localStorage * 2. the ThemeToggle component (manual override) writing localStorage * 3. when the user picks "system", the script resolves it against * `prefers-color-scheme` and listens for OS-level changes. * * Surface palette is intentionally warm-neutral (paper / cream): warm * canvases feel inviting and human, while the cool ORAIN blue accent * pops against them as a clear brand mark. The semantic `--cyan` and * dialog `--btn` tokens are still consolidated onto the brand-blue * ramp so code text, info badges, and primary CTAs all read as one * brand colour. Token names are stable; only values shift. Contrast * targets: body text ≥ 4.5:1 (WCAG AA), large/UI ≥ 3:1. * light --t1 #1A1714 on --bg #FAF8F3 ≈ 16.6:1 * light --t2 #46413B on --bg #FAF8F3 ≈ 9.1:1 * light --t3 #75706A on --bg #FAF8F3 ≈ 4.7:1 * light --accent #2696BE on #FFFFFF ≈ 3.40:1 (UI/large-text only) * light --accent-strong #1B7898 on #FFFFFF ≈ 5.30:1 (filled buttons; white text passes AA) * dark --t1 #E8EEF2 on --bg #13191D ≈ 14.5:1 * dark --t2 #BCC4CC on --bg #13191D ≈ 10.0:1 * dark --t3 #828B95 on --bg #13191D ≈ 5.0:1 */ :root { /* "Paper" surface pair — the editorial cream stack used by the Orain IDE * three-pane shell. --paper-0 is the page/center canvas; --paper-1 is * the side rails (a touch brighter so the rails frame the center page). * These feed --ide-bg0 / --ide-bg1 below and T_LIGHT.bg0/bg1 in * orain/theme.ts — keep all three in sync. */ --paper-0: #F4F0E7; --paper-1: #F8F4EC; --color-background-primary: #FAF8F3; --color-background-secondary: #F4F1EA; --color-background-tertiary: #F4F1EA; --color-border-primary: rgba(40, 33, 25, 0.08); --color-border-secondary: rgba(40, 33, 25, 0.14); --color-border-tertiary: rgba(40, 33, 25, 0.22); --color-text-primary: #1A1714; --color-text-secondary: #46413B; --color-text-tertiary: #75706A; /* ORAIN brand: #2696BE primary, #D3EFFB pale, #1B7898 strong (deeper, AA-safe for white text) */ --color-accent: #2696BE; --color-accent-soft: #D3EFFB; --color-accent-strong: #1B7898; --color-status-background: #1B7898; --color-status-border: #0F4D60; --color-status-text: #B5DDF1; --color-status-text-strong: #D3EFFB; /* Existing aliases kept for compatibility */ --bg: var(--color-background-primary); --bg-panel: var(--color-background-secondary); --bg-sidebar: var(--color-background-tertiary); --bg-white: #FFFFFF; --bg-hover: rgba(40, 33, 25, 0.04); --bg-active: rgba(40, 33, 25, 0.07); --border: var(--color-border-primary); --border-md: var(--color-border-secondary); /* Brand / status colors — consolidated around ORAIN blue */ --cyan: #1B7898; --cyan-bg: rgba(27, 120, 152, 0.08); --cyan-border: rgba(27, 120, 152, 0.22); --violet: #5575A8; --violet-bg: rgba(85, 117, 168, 0.08); --teal: #2E7D5B; --teal-bg: rgba(46, 125, 91, 0.08); --amber: #B07000; --amber-bg: rgba(176, 112, 0, 0.1); --red: #B53A2D; --green: #2E7D5B; /* Accent — ORAIN brand blue (aliased to --color-accent) */ --accent: #2696BE; --accent-bg: rgba(38, 150, 190, 0.10); /* Categorical series slots for charts (stacked shares, multi-series bars). * Assigned in fixed order, never cycled — a category keeps its hue when the * set it sits in changes. The brand tokens above are deliberately muted and * analogous, which is right for chrome and wrong for a chart: as a * categorical set they fail the chroma floor and land two neighbours 14 ΔE * apart, below the normal-vision floor of 15. These are stepped per mode and * validated (worst adjacent CVD ΔE 9.1 light / 8.4 dark). Light slots 3–5 sit * under 3:1 against the page, so anything painted with them carries a visible * label — never colour alone. */ --viz-1: #2a78d6; --viz-2: #eb6834; --viz-3: #1baf7a; --viz-4: #eda100; --viz-5: #e87ba4; /* Button surface aliases — used by ProjectNameDialog and other * primary-action components. --color-accent-strong (#1B7898) is the * AA-safe filled-button shade; white text on it passes WCAG AA. */ --btn: var(--color-accent-strong); --btn-strong: var(--color-accent-strong); --btnText: #FFFFFF; /* Text */ --t1: #1A1714; --t2: #46413B; --t3: #75706A; --t4: #A39E96; /* Shadows (light) */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04); --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.05); /* Radius */ --r-sm: 5px; --r: 8px; --r-lg: 12px; --r-xl: 16px; /* Font */ --f: "Inter", sans-serif; --fm: "JetBrains Mono", monospace; --f-serif: "Tiempos Text", "Source Serif Pro", "Iowan Old Style", "Charter", Georgia, serif; /* ── Semantic type scale ── * Token-driven scale (audit priority 1). Use these instead of inline * `fontSize: N` numbers. JS callers can read parallel `theme.font.*`. */ --text-xs: 12px; --text-sm: 13px; --text-base: 14px; --text-md: 16px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px; --text-3xl: 36px; --leading-tight: 1.25; --leading-snug: 1.4; --leading-base: 1.55; --leading-relaxed: 1.6; /* ── Orain IDE chrome tokens (light) ── * These are consumed via `var(--ide-*)` from chrome components and via * `T_LIGHT` from graphics renderers (Cytoscape, Mol*, Viv, …) that need * real hex strings. Keep the two in sync: a change here should be matched * in `frontend/src/components/orain/theme.ts`. */ --ide-bg0: var(--paper-0); --ide-bg1: var(--paper-1); --ide-bg2: #F4F1EA; --ide-bg3: #EFEBE2; --ide-bg4: #E5DFD2; --ide-border: rgba(40, 33, 25, 0.08); --ide-border-strong: rgba(40, 33, 25, 0.14); --ide-text0: #1A1714; --ide-text1: #46413B; --ide-text2: #75706A; --ide-text3: #A39E96; --ide-accent: #2696BE; --ide-purple: #5575A8; --ide-success: #2E7D5B; --ide-warning: #B07000; --ide-danger: #B53A2D; --ide-cyan: #1B7898; --ide-icon-default: var(--ide-text2); --ide-icon-emphasis: var(--ide-accent); --ide-icon-chrome: var(--ide-text1); color-scheme: light; } :root[data-theme="dark"] { /* Cool charcoal with a faint cyan undertone, paired with ORAIN blue accent */ /* Dark-mode "paper" pair — kept defined so any component reading * var(--paper-*) outside the IDE chrome doesn't fall back to white. * Same direction as light: paper-0 is the brighter page surface, paper-1 * is the slightly darker rails framing it. */ --paper-0: #181F23; --paper-1: #10161A; --color-background-primary: #13191D; --color-background-secondary: #181F23; --color-background-tertiary: #1F262B; --color-border-primary: rgba(220, 235, 245, 0.08); --color-border-secondary: rgba(220, 235, 245, 0.14); --color-border-tertiary: rgba(220, 235, 245, 0.22); --color-text-primary: #E8EEF2; --color-text-secondary: #BCC4CC; --color-text-tertiary: #828B95; /* ORAIN on warm-charcoal: lifted #4FB3D9 for legibility, pale #D3EFFB as text on filled accent */ --color-accent: #4FB3D9; --color-accent-soft: rgba(38, 150, 190, 0.22); --color-accent-strong: #D3EFFB; --color-status-background: #1B7898; --color-status-border: #0F4D60; --color-status-text: #B5DDF1; --color-status-text-strong: #D3EFFB; --bg-white: #21282D; --bg-hover: rgba(220, 235, 245, 0.05); --bg-active: rgba(220, 235, 245, 0.08); --bg-panel: var(--color-background-secondary); --bg-sidebar: var(--color-background-tertiary); --border: var(--color-border-primary); --border-md: var(--color-border-secondary); /* Brand / status colors (dark, cool-leaning) */ --cyan: #79A3D6; --cyan-bg: rgba(121, 163, 214, 0.10); --cyan-border: rgba(121, 163, 214, 0.22); --violet: #B79CE8; --violet-bg: rgba(183, 156, 232, 0.10); --teal: #6FCB99; --teal-bg: rgba(111, 203, 153, 0.10); --amber: #E2B25C; --amber-bg: rgba(226, 178, 92, 0.12); --red: #E0796A; --green: #6FCB99; /* Accent — ORAIN brand blue, lifted for dark legibility */ --accent: #4FB3D9; --accent-bg: rgba(38, 150, 190, 0.22); /* Categorical series slots — the same five hues re-stepped for the dark * surface, not a separate palette and not an automatic flip. */ --viz-1: #3987e5; --viz-2: #d95926; --viz-3: #199e70; --viz-4: #c98500; --viz-5: #d55181; /* Legacy text aliases — keep MessageUI / ChatPanel readable in dark */ --t1: #E8EEF2; --t2: #BCC4CC; --t3: #828B95; --t4: #5C6470; /* Shadows (dark) — deeper, slightly cooler */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.35); --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.4); /* ── Orain IDE chrome tokens (dark) ── kept in sync with `T_DARK` in orain/theme.ts. * bg0 is the brighter center page; bg1 is the slightly darker rails. */ --ide-bg0: #181F23; --ide-bg1: #10161A; --ide-bg2: #181F23; --ide-bg3: #1F262B; --ide-bg4: #283038; --ide-border: rgba(220, 235, 245, 0.08); --ide-border-strong: rgba(220, 235, 245, 0.14); --ide-text0: #E8EEF2; --ide-text1: #BCC4CC; --ide-text2: #828B95; --ide-text3: #5C6470; --ide-accent: #4FB3D9; --ide-purple: #B79CE8; --ide-success: #6FCB99; --ide-warning: #E2B25C; --ide-danger: #E0796A; --ide-cyan: #79A3D6; --ide-icon-default: var(--ide-text2); --ide-icon-emphasis: var(--ide-accent); --ide-icon-chrome: var(--ide-text1); color-scheme: dark; } /* Smooth theme transitions, scoped to the brief window when the theme is * actually swapping (set by useTheme.applyDOM). Outside that window the * universal transition is off, so routine hover/focus state changes don't * get the 220ms tax. * * `.no-theme-transition` is added by the inline FOUC script in and * cleared on the first animation frame — it suppresses any transition during * the initial paint. */ :root.theme-transitioning *, :root.theme-transitioning *::before, :root.theme-transitioning *::after { transition-property: background-color, color, border-color, fill, stroke; transition-duration: 180ms; transition-timing-function: ease; } :root.no-theme-transition, :root.no-theme-transition * { transition: none !important; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; overflow: hidden; font-family: var(--f); background: var(--bg); color: var(--t1); font-size: var(--text-base); line-height: var(--leading-base); } /* Serif utility for hero headings — system fallback chain (Iowan/Charter * /Georgia) until a webfont is wired in. */ .font-serif { font-family: var(--f-serif); font-weight: 400; } a { color: inherit; text-decoration: none; } /* ═══ ANIMATIONS ═══ */ @keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } @keyframes up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes dot { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } } /* IDE file preview: indeterminate bar while worker builds pyramid / indexes */ @keyframes orainPreviewBuildShimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } } @keyframes orainStatusDotPulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } } @keyframes pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.8; } } /* Indeterminate run-progress bar — a short highlight that sweeps across the track when a live run has no real percent yet (tool-call progress card). */ @keyframes orainRunIndeterminate { 0% { left: -40%; } 100% { left: 100%; } } /* ═══ SCROLLBAR ═══ */ ::-webkit-scrollbar { width: 3px; height: 3px; } ::-webkit-scrollbar-thumb { background: var(--border-md); border-radius: 99px; } ::-webkit-scrollbar-corner { background: transparent; } * { scrollbar-width: thin; } /* Utility: completely hide the scrollbar (overflow:auto still works). Used by the session-tab strip, which signals overflow via gradient fades instead. */ .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; } /* ═══ FORM ELEMENTS ═══ */ .input { width: 100%; background: var(--bg-white); color: var(--t1); border: 1px solid var(--border-md); border-radius: var(--r-lg); padding: 10px 12px; font-family: var(--f); font-size: 13px; } .input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); } .input::placeholder { color: var(--t4); } /* ═══ DASHBOARD PAGE ═══ */ .page { max-width: 1120px; margin: 0 auto; padding: 24px; } .card { background: var(--bg-white); border: 1px solid var(--border-md); border-radius: var(--r-lg); padding: 16px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } .btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-md); background: var(--bg-white); color: var(--t2); border-radius: var(--r-lg); padding: 8px 12px; cursor: pointer; font-weight: 500; font-size: 13px; transition: all 0.12s; font-family: var(--f); } .btn:hover { background: var(--bg-hover); border-color: var(--accent); color: var(--cyan); } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); grid-gap: 12px; gap: 12px; } /* ═══ CHAT MESSAGE MARKDOWN (light theme, mobile/ChatPanel) ═══ */ /* Scoped markdown for MessageUI component (light background panels) */ .message-md p { margin: 0 0 6px 0; line-height: 1.6; } .message-md p:last-child { margin-bottom: 0; } .message-md h1, .message-md h2, .message-md h3, .message-md h4 { font-size: 13px; font-weight: 600; color: var(--t1); margin: 8px 0 4px 0; line-height: 1.4; } .message-md ul, .message-md ol { margin: 4px 0 6px 0; padding-left: 16px; } .message-md li { margin-bottom: 3px; line-height: 1.55; } .message-md strong { font-weight: 600; color: var(--t1); } .message-md em { color: var(--t2); } .message-md code { font-family: var(--fm); font-size: 11px; background: var(--bg-hover); border: 1px solid var(--border); border-radius: 3px; padding: 1px 4px; color: var(--cyan); } .message-md pre { background: var(--bg-panel); border: 1px solid var(--border-md); border-radius: 5px; padding: 8px 10px; margin: 6px 0; overflow-x: auto; } .message-md pre code { background: none; border: none; padding: 0; font-size: 11px; color: var(--t2); } .message-md blockquote { border-left: 2px solid var(--accent); margin: 4px 0; padding: 4px 8px; color: var(--t3); font-style: italic; } /* ═══ BIOMNI MARKDOWN ═══ */ /* Scoped markdown styles for Biomni chat messages. Theme-aware via --ide-* vars so the panel reads correctly in both dark and light. Sized to track the bubble body (14px) — Claude Code's reference renderer keeps inline code, emphasis and headings within ±15% of body so prose doesn't look "highlighted." Tables get GFM treatment because the chat assistant leans on pipe tables for structured answers. */ .biomni-md { min-width: 0; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } /* Collapsible "Show the technical detail" section under a plain-language chat answer. The agent keeps the visible answer simple and puts extra depth after a ``%%DETAILS%%`` marker; the frontend renders that tail inside this toggle so newcomers see a clean reply and experts can expand it. */ .orain-more-detail { margin: 8px 0 2px 0; border-top: 1px solid var(--ide-border, rgba(127, 127, 127, 0.22)); padding-top: 6px; } .orain-more-detail > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 500; color: var(--ide-text2, #6b7280); -webkit-user-select: none; -moz-user-select: none; user-select: none; outline: none; } .orain-more-detail > summary::-webkit-details-marker { display: none; } .orain-more-detail > summary::before { content: "▸"; font-size: 10px; transition: transform 0.12s ease; display: inline-block; } .orain-more-detail[open] > summary::before { transform: rotate(90deg); } .orain-more-detail > summary:hover { color: var(--ide-text0, #111827); } .orain-more-detail[open] > summary { margin-bottom: 6px; } .biomni-md p { margin: 0 0 6px 0; line-height: 1.65; } .biomni-md p:last-child { margin-bottom: 0; } .biomni-md h1 { font-size: 16px; font-weight: 600; color: var(--ide-text0); margin: 12px 0 6px 0; line-height: 1.35; } .biomni-md h2 { font-size: 15px; font-weight: 600; color: var(--ide-text0); margin: 10px 0 5px 0; line-height: 1.35; } .biomni-md h3 { font-size: 14px; font-weight: 600; color: var(--ide-text0); margin: 10px 0 4px 0; line-height: 1.4; } .biomni-md h4 { font-size: 13px; font-weight: 600; color: var(--ide-text1); margin: 8px 0 4px 0; line-height: 1.4; } .biomni-md ul, .biomni-md ol { margin: 4px 0 6px 0; padding-left: 18px; } .biomni-md li { margin-bottom: 3px; line-height: 1.55; } .biomni-md strong { color: inherit; font-weight: 600; } .biomni-md em { color: inherit; font-style: italic; } .biomni-md code, .orain-inline-tech { font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace; font-size: 0.92em; background: color-mix(in srgb, var(--ide-accent) 16%, transparent); border: none; border-radius: 4px; padding: 1px 5px; color: color-mix(in srgb, var(--ide-accent) 88%, var(--ide-text0)); } .orain-reviewer-evidence .orain-inline-tech { font-size: 12px; } .biomni-md pre { background: var(--ide-bg2); border: 1px solid var(--ide-border); border-radius: 6px; padding: 8px 10px; margin: 6px 0; max-width: 100%; overflow-x: auto; } .biomni-md pre code { background: none; border: none; padding: 0; font-size: 12px; color: var(--ide-text1); } .biomni-md a { color: var(--ide-accent); text-decoration: underline; text-underline-offset: 2px; } .biomni-md blockquote { border-left: 2px solid var(--ide-border-strong); margin: 6px 0; padding: 2px 10px; color: var(--ide-text2); } /* GFM table rendering — without these the pipe-table syntax falls back to browser defaults and the rows touch the bubble edges. */ .biomni-md table { display: block; border-collapse: collapse; margin: 8px 0; font-size: 13px; width: 100%; max-width: 100%; overflow-x: auto; } .biomni-md th, .biomni-md td { padding: 6px 10px; border-bottom: 1px solid var(--ide-border); text-align: left; vertical-align: top; } .biomni-md th { font-weight: 600; color: var(--ide-text0); border-bottom-color: var(--ide-border-strong); } .biomni-md td { color: var(--ide-text1); } .biomni-md hr { border: none; border-top: 1px solid var(--ide-border); margin: 10px 0; } /* ═══ DOSSIER REPORT MARKDOWN ═══ */ /* Scoped styles for ReactMarkdown in dossier ReportDetailView. Inherits font/color from the parent div; only resets browser prose defaults. */ .dossier-md p { margin: 0 0 8px 0; line-height: 1.55; } .dossier-md p:last-child { margin-bottom: 0; } .dossier-md h1, .dossier-md h2, .dossier-md h3, .dossier-md h4 { font-size: 13px; font-weight: 600; color: var(--ide-text0); margin: 10px 0 4px 0; line-height: 1.4; } .dossier-md ul, .dossier-md ol { margin: 4px 0 6px 0; padding-left: 18px; } .dossier-md li { margin-bottom: 4px; line-height: 1.55; } .dossier-md strong { font-weight: 600; } .dossier-md em { font-style: italic; } .dossier-md code { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 0.9em; background: color-mix(in srgb, var(--ide-accent) 12%, transparent); border-radius: 3px; padding: 1px 4px; } .dossier-md table { border-collapse: collapse; margin: 8px 0; font-size: 12px; width: 100%; overflow-x: auto; display: block; } .dossier-md th, .dossier-md td { padding: 5px 10px; border-bottom: 1px solid var(--ide-border); text-align: left; } .dossier-md th { font-weight: 600; } .dossier-md hr { border: none; border-top: 1px solid var(--ide-border); margin: 10px 0; } /* ═══ DOCUMENT MARKDOWN (file viewer) ═══ */ /* A markdown *file* opened in the workspace is read as a document, not skimmed as a chat bubble — so it gets document type: a real heading hierarchy (a report's structure is how you navigate it; `.dossier-md` flattens h1–h4 to a single size, which is right inside a dossier card and wrong on a full page) and a comfortable measure. Kept separate from `.dossier-md` rather than widened into it, so the dossier surface can't regress. Inline code and tables deliberately mirror it: an accent-tinted pill, and hairline rules with no outer border. */ .orain-doc { font-size: 14px; line-height: 1.65; color: var(--ide-text1); } .orain-doc h1 { font-size: 21px; } .orain-doc h2 { font-size: 17px; } .orain-doc h3 { font-size: 15px; } .orain-doc h4, .orain-doc h5, .orain-doc h6 { font-size: 14px; } .orain-doc h1, .orain-doc h2, .orain-doc h3, .orain-doc h4, .orain-doc h5, .orain-doc h6 { font-weight: 600; color: var(--ide-text0); line-height: 1.3; margin: 22px 0 8px 0; } .orain-doc > :first-child { margin-top: 0; } .orain-doc p { margin: 0 0 12px 0; } .orain-doc ul, .orain-doc ol { margin: 0 0 12px 0; padding-left: 22px; } .orain-doc li { margin-bottom: 5px; } .orain-doc strong { font-weight: 600; color: var(--ide-text0); } .orain-doc em { font-style: italic; } .orain-doc code { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 0.88em; background: color-mix(in srgb, var(--ide-accent) 12%, transparent); border-radius: 4px; padding: 1px 5px; } .orain-doc pre code { background: none; padding: 0; font-size: inherit; } .orain-doc table { border-collapse: collapse; margin: 12px 0; font-size: 13px; width: 100%; display: block; overflow-x: auto; } .orain-doc th, .orain-doc td { padding: 8px 14px; border-bottom: 1px solid var(--ide-border); text-align: left; white-space: nowrap; } .orain-doc th { font-weight: 600; color: var(--ide-text2); } .orain-doc hr { border: none; border-top: 1px solid var(--ide-border); margin: 20px 0; } .orain-doc blockquote { margin: 12px 0; padding-left: 14px; border-left: 2px solid var(--ide-border-strong); color: var(--ide-text2); } /* A figure in a report is the result — give it room and a surface to sit on, rather than letting it bleed into the page at whatever intrinsic size it happens to have. */ .orain-doc img { max-width: 100%; height: auto; display: block; margin: 14px 0; border-radius: 8px; background: #fff; border: 1px solid var(--ide-border); } .orain-msg-bubble { min-width: 0; max-width: 100%; } /* Orain IDE — run tab row (left sidebar): keyboard focus */ button.orain-run-tab:focus-visible, button.orain-run-tab-new:focus-visible { outline: 1px solid var(--ide-accent); outline-offset: -1px; } /* Theme toggle (segmented control): three buttons in a pill. */ .theme-toggle { display: inline-flex; align-items: center; padding: 2px; gap: 1px; border-radius: var(--r); border: 1px solid var(--border-md); background: var(--bg-white); } .theme-toggle__btn { display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: calc(var(--r) - 3px); background: transparent; color: var(--t3); cursor: pointer; padding: 0; font-family: var(--f); } .theme-toggle__btn:hover { background: var(--bg-hover); color: var(--t2); } .theme-toggle__btn[aria-pressed="true"] { background: var(--bg-active); color: var(--t1); } .theme-toggle__btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; } /* Tools panel "running" indicator: outward pulse around the dot so the user can spot a live tool from across the room. */ @keyframes orain-tool-pulse { 0% { box-shadow: 0 0 0 0 rgba(61, 202, 138, 0.55); } 70% { box-shadow: 0 0 0 6px rgba(61, 202, 138, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 202, 138, 0); } } @media (prefers-reduced-motion: reduce) { @keyframes orain-tool-pulse { 0%, 100% { box-shadow: none; } } }