/* Application styles — keep most styling in Tailwind utilities */ /* Shake animation for invalid magic link code */ @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } } .animate-shake { animation: shake 0.3s ease-in-out; } /* Trix editor styling */ trix-editor { min-height: 12rem; } trix-editor.trix-content { overflow-y: auto; } /* plans/03 §7/§16 — Redline.html's word-level / markup (attorney review "What changed" panel). Raw class names from app/lib/redline.rb, styled here since Tailwind can't safelist classes injected via server-rendered HTML. plans/06 P3 C1 (Tom's redline spec): insertions BLUE + BOLD, no underline; deletions red cross-out; MOVED text GREEN on both ends (struck where it left, plain where it landed). Exact blue shade may shift once Tom's black-line sample lands (C2). */ .redline-ins { background-color: #dbeafe; color: #1e3a8a; font-weight: 700; text-decoration: none; } .redline-del { background-color: #fee2e2; color: #7f1d1d; text-decoration: line-through; } .redline-replacement { display: block; margin: 0.7rem 0; } .redline-replacement > del, .redline-replacement > ins { display: block; padding: 0.6rem 0.75rem; white-space: pre-wrap; } .redline-replacement > del { border-left: 3px solid #b91c1c; } .redline-replacement > ins { margin-top: 0.35rem; border-left: 3px solid #2563eb; } .redline-move { background-color: #dcfce7; color: #14532d; } del.redline-move-from { text-decoration: line-through; } ins.redline-move-to { text-decoration: none; } /* plan 04 §C2 / #523 — theme toggle icon visibility, keyed off data-theme on (set by the FOUC script + the toggle's Alpine click handler). Binary light ↔ dark only (no system/auto icon). is never replaced by Turbo, so this survives Turbo visits with zero re-init flicker. */ .theme-toggle-btn .theme-icon { display: none; } html[data-theme="dark"] .theme-toggle-btn .theme-icon-dark { display: inline; } html:not([data-theme="dark"]) .theme-toggle-btn .theme-icon-light { display: inline; } /* WS1 (plan 09) — collapsible sidebar ICON RAIL. Width + label visibility are keyed off data-sidebar on (set by the FOUC script + the rail toggle), mirroring the theme/font no-flicker pattern: is never replaced by Turbo, so the collapsed width survives a Turbo visit with zero flash. Everything is scoped under #app-sidebar so the mobile drawer (which reuses the same _nav_links markup) is never collapsed — it always shows full labels. */ /* The rail width. Expanded is the utility class on the aside (w-[248px]); the rail state overrides it. A transition softens the collapse. */ #app-sidebar { transition: width 0.15s ease; } html[data-sidebar="rail"] #app-sidebar { width: 64px; } /* Hide the text side of every nav row (label + count chip + section header) and any other expanded-only chrome (search box, firm name, profile name) in rail. */ html[data-sidebar="rail"] #app-sidebar .rail-hide { display: none !important; } /* Center each icon in the rail: kill the row gap + horizontal padding so the lone icon sits centered in the 64px column. */ html[data-sidebar="rail"] #app-sidebar .nav-item, html[data-sidebar="rail"] #app-sidebar .sb-row { justify-content: center; gap: 0; padding-left: 0.5rem; padding-right: 0.5rem; } #app-sidebar .ico svg { width: 1rem; height: 1rem; } /* Rail-only affordances (the single Matters folder icon, the expand toggle icon): hidden by default, shown only when the sidebar is collapsed. */ .rail-only { display: none; } html[data-sidebar="rail"] #app-sidebar .rail-only { display: flex; } /* The collapse/expand toggle swaps its glyph with the state (same no-flicker idiom as the theme toggle icons). */ .rail-ico-collapse, .rail-ico-expand { display: none; } html[data-sidebar="expanded"] #app-sidebar .rail-ico-collapse, html[data-sidebar="rail"] #app-sidebar .rail-ico-expand { display: inline-flex; } /* b1-10 — sanitized-markdown chat bodies (the `render_markdown` helper output). Hand-rolled on the moonrise tokens — NOT @tailwindcss/typography — and scoped so it never leaks into the rest of the app. Colors reference the moonrise CSS vars, which flip automatically under . Tailwind preflight resets list styles, margins, and heading sizes; these unlayered rules re-establish them. Reused by the versions-diff feature — keep the class name exactly `md-prose`. Margins are tight so chat bubbles stay compact. */ .md-prose { overflow-wrap: anywhere; } .md-prose > :first-child { margin-top: 0; } .md-prose > :last-child { margin-bottom: 0; } .md-prose p { margin: 0.5em 0; } .md-prose h1, .md-prose h2, .md-prose h3, .md-prose h4, .md-prose h5, .md-prose h6 { margin: 0.75em 0 0.35em; font-weight: 600; line-height: 1.25; color: var(--color-ink); } .md-prose h1 { font-size: 1.25em; } .md-prose h2 { font-size: 1.15em; } .md-prose h3 { font-size: 1.05em; } .md-prose h4, .md-prose h5, .md-prose h6 { font-size: 1em; } /* Lists — restore markers + indent (preflight strips both). */ .md-prose ul, .md-prose ol { margin: 0.5em 0; padding-left: 1.5em; } .md-prose ul { list-style: disc; } .md-prose ol { list-style: decimal; } .md-prose li { margin: 0.2em 0; } .md-prose li > ul, .md-prose li > ol { margin: 0.2em 0; } /* Inline code + fenced blocks — subtle raised background, rounded, mono. */ .md-prose code { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.875em; background: var(--color-surface-raised); border: 1px solid var(--color-border-default); border-radius: 4px; padding: 0.1em 0.35em; } .md-prose pre { margin: 0.5em 0; padding: 0.75em 0.9em; background: var(--color-surface-raised); border: 1px solid var(--color-border-default); border-radius: 8px; overflow-x: auto; } .md-prose pre code { background: transparent; border: 0; border-radius: 0; padding: 0; } .md-prose a { color: var(--color-steel); text-decoration: underline; text-underline-offset: 2px; } /* WS4 (F3) — the citation popover's primary "Go to document" CTA. It renders INSIDE .md-prose, whose `a { color: steel; text-decoration: underline }` above (unlayered) overrides Tailwind's LAYERED text-white/no-underline utilities — which left dark, underlined text on the blue fill (illegible: the "black on blue" bug). Pin the fill + white text here so it wins. The fill is a FIXED medium Charles-blue: the --color-charles TEXT token lightens in dark mode, which would kill white-text contrast, so white stays legible in BOTH themes. */ .cite-go, .md-prose a.cite-go { background: #3f63a6; color: #fff; text-decoration: none; } /* Charles thinking orb. It appears only beside an empty answer target. Three translucent circles orbit one center, so waiting reads as active work rather than a generic typing ellipsis. Original CSS, dependency-free. */ .thinking-indicator { display: none; } .md-prose:empty + .thinking-indicator { position: relative; display: inline-flex; min-height: 32px; align-items: center; gap: 4px; padding: 4px 2px 4px 38px; } .thinking-indicator span { position: absolute; left: 12px; top: 10px; width: 13px; height: 13px; border-radius: 9999px; background: color-mix(in srgb, var(--color-charles) 72%, transparent); transform-origin: 1px 6px; animation: thinking-orbit 1.65s ease-in-out infinite; } .thinking-indicator span:nth-child(2) { animation-delay: -0.55s; opacity: 0.62; } .thinking-indicator span:nth-child(3) { animation-delay: -1.1s; opacity: 0.36; } .thinking-indicator small { color: var(--color-steel-muted); font-size: 0.7rem; } @keyframes thinking-orbit { 0% { transform: rotate(0deg) translateX(7px) scale(0.72); } 50% { transform: rotate(180deg) translateX(7px) scale(1); } 100% { transform: rotate(360deg) translateX(7px) scale(0.72); } } @media (prefers-reduced-motion: reduce) { .thinking-indicator span { animation: none; transform: none; } .thinking-indicator span:nth-child(2) { transform: translateX(5px); } .thinking-indicator span:nth-child(3) { transform: translateX(-5px); } } .md-prose blockquote { margin: 0.5em 0; padding-left: 0.9em; border-left: 3px solid var(--color-border-default); color: var(--color-steel-muted); } .md-prose strong { font-weight: 600; } .md-prose em { font-style: italic; } .md-prose del { text-decoration: line-through; } .md-prose hr { margin: 0.9em 0; border: 0; border-top: 1px solid var(--color-border-default); } /* Tables — bordered cells; a wide table scrolls inside itself instead of blowing out the bubble. `display:block` + overflow-x makes the its own scroll container, so no wrapper element is needed around the sanitized HTML. */ .md-prose table { display: block; width: max-content; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 0.5em 0; font-size: 0.95em; } .md-prose th, .md-prose td { border: 1px solid var(--color-border-default); padding: 0.35em 0.6em; text-align: left; vertical-align: top; } .md-prose thead th { background: var(--color-surface-raised); font-weight: 600; } /* ═══ WS2b (F1) — the client Preview pane: the document as ONE flowing, anchored HTML "page" (.paper), replacing the old paginated PDF iframe. Screen-only; the paginated look (@page, Page X of Y, the diagonal watermark, Changed-Pages-Only) lives SOLELY in the PDF export path. Paper is always light — it's paper — so it pins its own ink-on-white colors instead of the flipping moonrise tokens; a dark-mode viewer still reads a white document. Typography flows from the shared --doc-* tokens (print/tokens.css, which also rides into the Tailwind build) so the words match the exported PDF — "same words, different paper" — with only the base font-size differing. ══════════════════════════════════════════════════ */ .paper { position: relative; width: 100%; max-width: 816px; margin: 0 auto; background: #ffffff; color: #14202e; border-radius: 6px; box-shadow: 0 24px 60px -34px rgba(20, 34, 58, 0.34), 0 0 0 1px var(--color-border-default); overflow: hidden; } /* The repeating DRAFT band at the head and foot of the paper — the on-screen stand-in for the PDF's diagonal watermark. The view shows it only when watermark_label is present; the export path keeps the diagonal watermark. */ .draft-band { padding: 9px 0; text-align: center; font-family: var(--doc-font-family, "Times New Roman", Times, serif); letter-spacing: 14px; font-size: 15px; font-weight: 700; color: rgba(178, 44, 38, 0.34); user-select: none; overflow: hidden; white-space: nowrap; background: repeating-linear-gradient(90deg, transparent, transparent 4px, rgba(178, 44, 38, 0.05) 4px, rgba(178, 44, 38, 0.05) 8px); } /* The document body inside the paper. Reuses .md-prose for block structure, then overrides the compact chat rhythm with the shared document typography tokens. Extra left pad is the margin-flag gutter: flags sit at left:-52px on each section and must not clip under .paper { overflow: hidden }. */ .paper .md-prose { padding: clamp(28px, 6%, 104px); padding-top: 48px; padding-bottom: 56px; padding-left: clamp(64px, 10%, 120px); font-family: var(--doc-font-family, "Times New Roman", Times, Georgia, serif); font-size: 15px; line-height: var(--doc-line-height, 1.4); text-align: var(--doc-text-align, justify); color: #14202e; } .paper .md-prose h1, .paper .md-prose h2, .paper .md-prose h3, .paper .md-prose h4, .paper .md-prose h5, .paper .md-prose h6 { color: #14202e; line-height: var(--doc-heading-line-height, 1.25); font-weight: var(--doc-heading-weight, 700); } .paper .md-prose h1 { font-size: var(--doc-h1-size, 1.6em); text-align: var(--doc-h1-align, center); } .paper .md-prose h2 { font-size: var(--doc-h2-size, 1.15em); } .paper .md-prose h3 { font-size: var(--doc-h3-size, 1.05em); } .paper .md-prose p { margin: 0 0 var(--doc-para-spacing, 0.7em); text-align: var(--doc-text-align, justify); } .paper .md-prose a { color: #14202e; } /* WS2b — each heading run is a
(MarkdownRenderer wraps them). Give each a scroll anchor margin so goToDoc()'s scrollIntoView doesn't tuck the heading under the sticky tab bar, and make it a positioning context for margin flags. Both the rendered sections and the mockup's .sec class are covered. .margin-flag-host wraps a heading-less body so orphan flags still pin at top. */ .sec, .paper .md-prose > section, .paper .md-prose .margin-flag-host { position: relative; scroll-margin-top: 1.5rem; } /* Preview margin flags (Tom Prototype 6) — hard-coded brass/green on always-white paper (same posture as .hl). Multi-flag stack uses inline top: 1 + i*36 px. */ .paper .flag { position: absolute; left: -52px; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; border: 1px solid; transition: 0.15s; cursor: pointer; padding: 0; margin: 0; line-height: 0; z-index: 2; } .paper .flag svg { width: 15px; height: 15px; } .paper .flag.open { color: #9a6f24; background: rgba(205, 159, 94, 0.18); border-color: rgba(205, 159, 94, 0.5); } .paper .flag.open:hover { background: rgba(205, 159, 94, 0.3); } .paper .flag.closed { color: #4f7a58; background: rgba(127, 168, 134, 0.16); border-color: rgba(127, 168, 134, 0.45); } .paper .flag.closed:hover { background: rgba(127, 168, 134, 0.26); } /* WS2b — the jump-and-flash pulse. goToDoc() adds .flash to the target section after a forced reflow (void el.offsetWidth) so a repeat jump to the SAME section re-triggers the animation (Tom's mockup mechanic). */ @keyframes flash { 0%, 100% { background: transparent; } 22% { background: rgba(205, 159, 94, 0.16); } } .sec.flash, .paper .md-prose > section.flash { animation: flash 1.4s ease; } /* WS5 — the same jump-and-flash pulse for a question card, when goToQuestion() lands on it from a chat reference / persistent URL. Its own class (the .flash selectors above are preview-section-scoped); rounded to match the card. */ .q-flash { animation: flash 1.4s ease; border-radius: var(--radius-lg); } /* WS2b — persistent passage highlights WS4 (Charles citations) and WS5 (question anchors) wrap around a quoted span in the preview. Fixed amber (default) / green so they read on the always-white paper. */ .hl { background: rgba(205, 159, 94, 0.26); border-radius: 3px; padding: 0 2px; box-shadow: 0 0 0 1px rgba(205, 159, 94, 0.4); } .hl.green { background: rgba(127, 168, 134, 0.22); box-shadow: 0 0 0 1px rgba(127, 168, 134, 0.4); } /* ── Document Library table (ticket #230, Tom 2026-07-18 items #1/#2) ────────── Reference: docs/2026-07-14 Brenmere - Prototype 5 (client side) - Documents update.html (.dms-th / .dms-row). "each line is uniform height and if fields don't fit they are hidden with ellipses rather than wrapping onto a second line." Tailwind's `truncate` handles one element; a TABLE needs the rule on the cell itself, because a
in the view), so a long "Employment Agreement" ellipsizes inside its own column instead of shoving "Acme Law" out of the next one, and a narrow Notes column shows "Add a note…" rather than one character per line. Below the table's min-width the wrapper scrolls horizontally — overflow HIDDEN, per Tom, never jumbled. Cells opt out with .doc-cell-open (the kebab column, whose popover is teleported to anyway). The ellipsis is on
is the wrapping box. Paired with table-layout:fixed and a width on every column (a
ONLY. A filterable holds shared/_filterable_th, whose root is an `inline-flex` wrapper around a `w-full justify-between` button with an opacity-0 hover chevron pinned to its right edge. That wrapper is an atomic inline box that overflows the header's line box (measured on Version: scrollWidth 108 vs clientWidth 78), so text-overflow painted a stray "…" over content that is invisible anyway — a floating dot sitting between VERSION and LAST MODIFIED in every header row. Header labels are short and already clip cleanly under overflow:hidden, so dropping the ellipsis there costs nothing. */ .doc-table th, .doc-table td { overflow: hidden; white-space: nowrap; } .doc-table td { text-overflow: ellipsis; } .doc-table th.doc-cell-open, .doc-table td.doc-cell-open { overflow: visible; } /* Uniform row height. Every row is one band tall whatever it holds — a status pill, the notes input, the kebab — so the eye tracks straight across. */ .doc-table tbody tr { height: 3.25rem; } /* Ink & Paper spec §9.3 — Documents column headers (Name/Version/Owner…) read as dark ink, not faint grey, so the eye finds the table instantly. Scoped to .doc-table (every real Documents list: firm/client/client-portal) so it does not also darken unrelated list headers (Matters tab, matter-detail sub-tab) that never carried the .doc-table wrapper and are outside this spec's scope. */ .doc-table thead tr { color: var(--color-ink); } /* Staff shell (#659) — prototype tokens aliased onto existing Ink & Paper vars. Hexes stay in the existing @theme / .dark blocks; this chrome only reads vars. */ body.staff-shell { --railw: 252px; --serif: var(--font-serif); --sans: var(--font-sans); --ivory: var(--color-ink); --ivory-2: var(--color-steel); --dim: var(--color-steel-muted); --dim-2: var(--color-fog); --accent: var(--color-accent); --accent-soft: var(--color-accent-soft); --accent-rgb: var(--color-accent-rgb); --navy-900: var(--color-surface); --navy-850: var(--color-surface-raised); --navy-800: var(--color-canvas); --navy-750: var(--color-surface-raised); --navy-700: var(--color-navy-700); --navy-600: var(--color-navy-600); --line: var(--color-border-default); --line-soft: var(--color-line-soft); --glass: var(--color-glass); --barbg: var(--color-glass); --org-wea: var(--color-btn); --org-you: linear-gradient(135deg, #3a4048, #23272d); --org-client: linear-gradient(135deg, #0a6d4d, #075139); --org-co: linear-gradient(135deg, #6a4bbd, #4f3596); --org-opp: linear-gradient(135deg, #b23a00, #8c2d00); --org-counsel: linear-gradient(135deg, #7a5a00, #5c4400); --fit: var(--color-fit); --fit-rgb: var(--color-fit-rgb); --nofit: var(--color-nofit); --nofit-rgb: var(--color-nofit-rgb); } body.staff-shell .focusbar { display: flex; align-items: center; justify-content: center; gap: 12px; height: 30px; background: var(--accent); border-bottom: 1px solid rgba(0,0,0,0.18); color: var(--color-on-accent); font-size: 12.5px; font-weight: 600; letter-spacing: .2px; } body.staff-shell .focusbar .fx { display: inline-flex; align-items: center; gap: 6px; } body.staff-shell .focusbar svg { width: 13px; height: 13px; } body.staff-shell .focusbar button { background: none; border: 0; color: inherit; font-size: 12px; font-weight: 600; text-decoration: underline; } body.staff-shell .rail-search { position: relative; } body.staff-shell .rail-search-field { display: flex; align-items: center; gap: 7px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--navy-800); color: var(--dim); } body.staff-shell .rail-search-field input { min-width: 0; width: 100%; border: 0; padding: 0; color: var(--ivory); background: transparent; font: inherit; font-size: 12px; outline: 0; } body.staff-shell .rail-search-results { position: absolute; z-index: 40; top: calc(100% + 5px); left: 0; width: min(370px, calc(100vw - 24px)); max-height: min(54vh, 430px); overflow-y: auto; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--navy-800); box-shadow: var(--shadow-pop); } body.staff-shell .rail-search-label { margin: 5px 7px 3px; color: var(--dim-2); font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; } body.staff-shell .rail-search-results button { display: flex; align-items: baseline; gap: 8px; width: 100%; border: 0; border-radius: 6px; padding: 7px; color: var(--ivory); background: transparent; font: inherit; font-size: 12px; text-align: left; } body.staff-shell .rail-search-results button.is-selected, body.staff-shell .rail-search-results button:hover { background: var(--navy-700); } body.staff-shell .rail-search-results small { margin-left: auto; color: var(--dim); font-size: 10px; white-space: nowrap; } body.staff-shell .rail-search-empty { margin: 7px; color: var(--dim); font-size: 12px; } html[data-sidebar="rail"] body.staff-shell .rail-search, body.staff-shell.rail-collapsed .rail-search { display: none; } @media (max-width: 820px) { body.staff-shell .rail-search-results { width: min(370px, calc(100vw - 42px)); } } body.staff-shell .divider { height: 1px; background: var(--line); margin: 12px 9px; } body.staff-shell .rail-head { font-size: 10px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--dim-2); padding: 6px 11px 7px; white-space: nowrap; } body.staff-shell .recent { display: flex; align-items: center; gap: 11px; padding: 8px 11px; border-radius: 9px; color: var(--ivory-2); cursor: pointer; white-space: nowrap; text-decoration: none; } body.staff-shell .recent:hover { background: var(--navy-750); } body.staff-shell .recent .rd { width: 20px; height: 20px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 8.5px; font-weight: 600; color: #ece7da; background: linear-gradient(135deg, #5f7999, #354a67); border: 1.5px solid var(--navy-800); } body.staff-shell.light .recent .rd, html:not(.dark) body.staff-shell .recent .rd { border-color: #fff; } body.staff-shell.dark .recent .rd, html.dark body.staff-shell .recent .rd { background: linear-gradient(135deg, #8299bc, #43536f); } body.staff-shell .recent .rn { font-size: 13px; flex: 1; overflow: hidden; text-overflow: ellipsis; } body.staff-shell .recent .rc { font-size: 11px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; } html[data-sidebar="rail"] body.staff-shell .rail-recent, body.staff-shell.rail-collapsed .rail-recent { display: none; } body.staff-shell .pad { padding: 28px 42px 90px; max-width: 1180px; margin: 0 auto; } body.staff-shell .pad.narrow { max-width: 960px; } body.staff-shell .item { background: var(--navy-800); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 9px; overflow: hidden; transition: border-color .15s; } body.staff-shell .item:hover { border-color: var(--navy-600); } body.staff-shell .item-row { display: flex; align-items: flex-start; gap: 15px; padding: 14px 16px; cursor: pointer; } body.staff-shell .item-main { flex: 1; min-width: 0; } body.staff-shell .item-title { font-size: 14.5px; font-weight: 600; color: var(--ivory); line-height: 1.4; } body.staff-shell .item-sub { font-size: 12.5px; color: var(--dim); margin-top: 5px; display: flex; align-items: center; gap: 9px; } body.staff-shell .item-right { flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 118px; padding-top: 1px; } body.staff-shell .when { font-size: 12px; font-weight: 600; text-align: right; color: var(--dim-2); white-space: nowrap; } body.staff-shell .when.hard { color: var(--accent); font-weight: 700; display: inline-flex; align-items: center; gap: 5px; justify-content: flex-end; } body.staff-shell .when.hard svg { width: 12px; height: 12px; } body.staff-shell .when.soft { color: var(--dim-2); font-weight: 500; } body.staff-shell .flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } body.staff-shell .flag { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; letter-spacing: .2px; padding: 3px 9px; border-radius: 6px; white-space: nowrap; } body.staff-shell .flag svg { width: 11px; height: 11px; } body.staff-shell .flag.hard { color: var(--accent); background: var(--accent-soft); } body.staff-shell .flag.wait { color: var(--dim); background: var(--navy-700); } body.staff-shell .chk { width: 20px; height: 20px; border-radius: 50%; border: 1.7px solid var(--navy-600); background: transparent; flex: none; margin-top: 1px; display: grid; place-items: center; padding: 0; position: relative; } body.staff-shell .chk:hover { border-color: var(--accent); } body.staff-shell .chk.ghost { border-style: dashed; border-color: var(--line); cursor: default; } body.staff-shell .chk.on { background: var(--accent); border-color: var(--accent); color: var(--color-on-accent); font-size: 12px; font-weight: 800; } body.staff-shell .item.done { opacity: .55; } body.staff-shell .item.done .item-title { text-decoration: line-through; color: var(--dim); } body.staff-shell .subprog { font-size: 11px; color: var(--dim); background: var(--navy-750); border: 1px solid var(--line); border-radius: 6px; padding: 1px 8px; white-space: nowrap; } body.staff-shell .task-actions { display: flex; flex-direction: column; gap: 6px; } body.staff-shell .task-actions button, body.staff-shell .task-actions a { width: 100%; text-align: center; font-size: 12px; font-weight: 500; border-radius: 8px; padding: 6px 12px; border: 1px solid var(--navy-600); text-decoration: none; } body.staff-shell .task-actions .qassign { background: var(--navy-800); color: var(--ivory-2); } body.staff-shell .task-actions .qexec { background: var(--accent); color: var(--color-on-accent); border-color: var(--accent); font-weight: 600; } body.staff-shell .task-owner { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--dim); text-align: right; padding-top: 4px; justify-content: flex-end; } body.staff-shell .task-owner .av { width: 20px; height: 20px; font-size: 9px; } body.staff-shell .ownerstrip { display: flex; align-items: center; gap: 11px; background: var(--navy-850); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 13px; } body.staff-shell .ownerstrip .av { width: 28px; height: 28px; font-size: 11px; flex: none; } body.staff-shell .ownerstrip .oname { font-size: 13px; color: var(--ivory); font-weight: 600; } body.staff-shell .ownerstrip .orole { color: var(--dim); font-weight: 400; } body.staff-shell .ownerstrip .owhy { font-size: 12px; color: var(--dim); margin-top: 2px; line-height: 1.45; } body.staff-shell .obadge { font-size: 9.5px; letter-spacing: .4px; text-transform: uppercase; font-weight: 700; padding: 3px 9px; border-radius: 6px; flex: none; } body.staff-shell .obadge.wea { color: var(--accent); background: var(--accent-soft); } body.staff-shell .subwrap { margin-top: 5px; } body.staff-shell .subbar { height: 4px; border-radius: 4px; background: var(--navy-700); overflow: hidden; margin-bottom: 11px; } body.staff-shell .subbar > i { display: block; height: 100%; background: var(--accent); border-radius: 4px; } body.staff-shell .subitem { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; font-size: 13px; color: var(--ivory-2); } body.staff-shell .subitem.done > span { color: var(--dim-2); text-decoration: line-through; } body.staff-shell .subchk { width: 17px; height: 17px; border-radius: 5px; border: 1.6px solid var(--navy-600); background: transparent; flex: none; margin-top: 1px; display: grid; place-items: center; padding: 0; } body.staff-shell .subchk.on { background: var(--accent); border-color: var(--accent); color: var(--color-on-accent); font-size: 11px; font-weight: 800; } body.staff-shell .chev { color: var(--dim-2); display: grid; place-items: center; transition: transform .18s; } body.staff-shell .chev svg { width: 16px; height: 16px; } body.staff-shell .item.open .chev { transform: rotate(90deg); } body.staff-shell .item-detail { display: none; padding: 0 16px 15px 16px; } body.staff-shell .item.open .item-detail { display: block; } body.staff-shell .item-detail .dfield { display: flex; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; align-items: baseline; } body.staff-shell .item-detail .dfield .dk { flex: none; width: 158px; color: var(--dim-2); text-transform: uppercase; letter-spacing: .5px; font-size: 10.5px; font-weight: 600; } body.staff-shell .item-detail .dfield .dv { color: var(--ivory); font-weight: 500; } body.staff-shell .item-detail .dfield.col { flex-direction: column; gap: 7px; } body.staff-shell .dnote { min-height: 40px; background: var(--navy-750); border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; color: var(--ivory-2); font-size: 13px; line-height: 1.55; outline: none; width: 100%; } body.staff-shell .dlinks { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; } body.staff-shell .lnk { display: inline-flex; align-items: center; gap: 6px; color: var(--dim); font-size: 12.5px; font-weight: 500; text-decoration: none; } body.staff-shell .lnk:hover { color: var(--ivory); text-decoration: underline; } body.staff-shell .grouphead { font-size: 11px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--ivory); margin: 16px 0 8px; } body.staff-shell .sortbar { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--dim); } body.staff-shell .sortbar .slbl { color: var(--dim-2); } body.staff-shell .sortbar .sb { background: var(--navy-800); border: 1px solid var(--navy-600); border-radius: 8px; padding: 5px 11px; color: var(--dim); font-size: 12px; text-decoration: none; } body.staff-shell .sortbar .sb.on { background: var(--navy-700); color: var(--ivory); border-color: var(--navy-600); } body.staff-shell .seg { display: inline-flex; background: var(--navy-800); border: 1px solid var(--line); border-radius: 9px; padding: 2px; } body.staff-shell .seg a { font-size: 12px; color: var(--dim); background: none; border: 0; padding: 6px 13px; border-radius: 7px; text-decoration: none; } body.staff-shell .seg a.on { background: var(--navy-600); color: var(--ivory); } body.staff-shell .seg .cnt { font-size: 10.5px; color: var(--dim-2); margin-left: 5px; } body.staff-shell .seg a.on .cnt { color: var(--ivory-2); } body.staff-shell .pagebar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-bottom: 13px; } body.staff-shell .ptitle { font-family: var(--serif); font-size: 26px; font-weight: 500; margin: 0; } body.staff-shell .pb-r { margin-left: auto; display: flex; align-items: center; gap: 10px; } body.staff-shell .btn { padding: 9px 15px; border-radius: 9px; font-size: 13px; font-weight: 500; border: 1px solid var(--line); background: transparent; color: var(--ivory-2); text-decoration: none; } body.staff-shell .btn.primary { background: var(--accent); color: var(--color-on-accent); border-color: var(--accent); font-weight: 600; } body.staff-shell .ct-sel, body.staff-shell .ct-note { background: var(--navy-750); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; color: var(--ivory); font-size: 13.5px; outline: none; width: 100%; font-family: inherit; } body.staff-shell .ct-note { min-height: 64px; resize: vertical; line-height: 1.5; } body.staff-shell .ct-seg { display: inline-flex; background: var(--navy-800); border: 1px solid var(--line); border-radius: 9px; padding: 2px; } body.staff-shell .ct-seg button { font-size: 12.5px; color: var(--dim); background: none; border: 0; padding: 7px 14px; border-radius: 7px; } body.staff-shell .ct-seg button.on { background: var(--accent); color: var(--color-on-accent); font-weight: 600; } body.staff-shell .adv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } body.staff-shell .adv-f { display: flex; flex-direction: column; gap: 5px; } body.staff-shell .adv-f.full { grid-column: 1 / -1; } body.staff-shell .adv-f label { font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--dim-2); } body.staff-shell .adv-actions { display: flex; gap: 10px; margin-top: 18px; align-items: center; } body.staff-shell .adv-actions .btn.primary { margin-left: auto; } body.staff-shell .modal-shell { background: var(--navy-850); border: 1px solid var(--line); border-radius: 16px; width: 100%; max-width: 560px; } body.staff-shell .modal-h { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--line); } body.staff-shell .modal-h .mt { font-family: var(--serif); font-size: 17px; font-weight: 600; } body.staff-shell .modal-h .msub { font-size: 12px; color: var(--dim); margin-top: 3px; } body.staff-shell .modal-b { padding: 16px 20px 20px; } body.staff-shell .av { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; font-weight: 600; color: #ece7da; background: var(--org-wea); border: 1.5px solid var(--navy-800); margin-left: -6px; flex: none; } body.staff-shell .av:first-child { margin-left: 0; } body.staff-shell .av.you { background: var(--org-you); } body.staff-shell .av.wea { background: var(--org-wea); } body.staff-shell .av.client { background: var(--org-client); } body.staff-shell .av.co { background: var(--org-co); } body.staff-shell .av.opp { background: var(--org-opp); } body.staff-shell .av.counsel { background: var(--org-counsel); } body.staff-shell.light .av, html:not(.dark) body.staff-shell .av { border-color: #fff; } body.staff-shell .greeting { font-family: var(--serif); font-size: 31px; font-weight: 500; letter-spacing: .2px; line-height: 1.2; color: var(--ivory); } body.staff-shell .greeting .lt { color: var(--dim); } body.staff-shell .slabel { display: flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--dim-2); } body.staff-shell .slabel .ln { flex: 1; height: 1px; background: var(--line); } body.staff-shell .calbar { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 12px; margin-top: 6px; } body.staff-shell .calbar::-webkit-scrollbar { height: 7px; } body.staff-shell .calbar::-webkit-scrollbar-thumb { background: var(--navy-600); border-radius: 7px; } body.staff-shell .calcard { flex: none; width: 244px; background: var(--navy-800); border: 1px solid var(--line); border-radius: 13px; padding: 14px 15px; cursor: pointer; transition: border-color .15s; display: flex; flex-direction: column; text-decoration: none; color: inherit; } body.staff-shell .calcard:hover { border-color: var(--navy-600); } body.staff-shell .calcard.now { border-color: rgb(var(--accent-rgb) / 0.45); } body.staff-shell .cc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } body.staff-shell .cc-time { font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--ivory); } body.staff-shell .cc-time .dur { font-family: var(--sans); font-size: 11px; font-weight: 400; color: var(--dim-2); margin-left: 6px; } body.staff-shell .cc-now { font-size: 9.5px; letter-spacing: .5px; text-transform: uppercase; font-weight: 600; color: var(--accent); background: var(--accent-soft); border-radius: 5px; padding: 2px 7px; } body.staff-shell .cc-client { font-size: 11px; color: var(--dim); margin-bottom: 3px; } body.staff-shell .cc-title { font-size: 14px; font-weight: 600; color: var(--ivory); line-height: 1.35; flex: 1; } body.staff-shell .cc-foot { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line-soft); } body.staff-shell .cc-att { font-size: 11px; color: var(--dim); display: inline-flex; align-items: center; gap: 7px; } body.staff-shell .cc-ra { margin-left: auto; font-size: 11.5px; color: var(--ivory-2); font-weight: 500; display: inline-flex; align-items: center; gap: 5px; } body.staff-shell .cc-ra:hover { text-decoration: underline; } body.staff-shell .cc-ra.pending { color: var(--dim-2); font-weight: 400; } body.staff-shell .cc-ra svg { width: 12px; height: 12px; opacity: .8; } body.staff-shell .avstack { display: inline-flex; align-items: center; } body.staff-shell .feed { background: var(--navy-800); border: 1px solid var(--line); border-radius: 13px; padding: 4px 16px; } body.staff-shell .feed-day { font-size: 10px; letter-spacing: .8px; text-transform: uppercase; color: var(--dim-2); padding: 14px 0 4px; } body.staff-shell .fi { display: flex; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); } body.staff-shell .fi:last-child { border-bottom: 0; } body.staff-shell .fi:hover .fi-t { color: var(--ivory); } body.staff-shell .fi-ic { width: 26px; height: 26px; border-radius: 7px; flex: none; display: grid; place-items: center; background: var(--navy-750); color: var(--dim); } body.staff-shell .fi-ic svg { width: 14px; height: 14px; } body.staff-shell .fi-b { flex: 1; min-width: 0; } body.staff-shell .fi-t { font-size: 13px; color: var(--ivory-2); line-height: 1.5; transition: color .12s; } body.staff-shell .fi-t b { color: var(--ivory); font-weight: 600; } body.staff-shell .fi-m { font-size: 11px; color: var(--dim); margin-top: 3px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } body.staff-shell .fi-src { letter-spacing: .3px; text-transform: uppercase; font-weight: 600; color: var(--dim-2); font-size: 10px; } body.staff-shell .fi-time { font-size: 10.5px; color: var(--dim-2); flex: none; white-space: nowrap; } body.staff-shell .sep { color: var(--dim-2); } @media (max-width: 820px) { body.staff-shell .pad { padding: 18px 18px 80px; } body.staff-shell .item-row { flex-wrap: wrap; } body.staff-shell .item-main { min-width: calc(100% - 38px); } body.staff-shell .item-right { width: 100%; min-width: 0; padding-left: 35px; } body.staff-shell .task-actions { flex-direction: row; flex-wrap: wrap; } body.staff-shell .task-actions > * { flex: 1 1 140px; } } /* Prototype Documents skin. Scoped so Home and Messages keep their existing chrome. */ .client-documents-band, .client-documents-table { font-variant-numeric: tabular-nums; } .client-documents-band { max-width: 1720px; margin-inline: auto; padding-inline: 28px; } .client-documents-table .doc-table th { background: var(--surface-raised, #f4f0e8); } .client-documents-table .doc-table td, .client-documents-table .doc-table th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.hc .client-documents-table { border-width: 1.5px; } body.light .client-documents-table .doc-table th { background: #f4f0e8; } #client-doc-workspace .client-doc-charles { width: 330px; flex: none; } @media (max-width: 1240px) { #client-doc-workspace .client-doc-charles { width: 300px; } } @media (max-width: 980px) { #client-doc-workspace .client-doc-charles { display: none; } } body.hc #client-doc-workspace .client-doc-charles { border-width: 1.5px; } body.light #client-doc-workspace .client-doc-charles { background: #ffffff; }