/* CoPlan — Design Tokens + Base Styles */
:root {
color-scheme: light;
/* Colors */
/* Slightly cool and dark for a page background: white cards need
something to stand out against, or light mode reads as fog. */
--color-bg: #fafafa;
--color-bg-muted: #f2f2f2;
--color-surface: #ffffff;
--color-surface-muted: #fafafa;
--color-input-bg: var(--color-surface);
--color-text: #171717;
--color-text-muted: #666666;
--color-text-inverse: #ffffff;
--color-border: #ebebeb;
--color-border-strong: #d4d4d4;
--color-primary: #0070f3;
--color-primary-hover: #0761d1;
--color-primary-light: #ebf5ff;
--color-success: #0a7c3e;
--color-success-soft: #e9f8ee;
/* Orange means a viewer-specific task or unread review item, never interaction. */
--color-interaction-hover-bg: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
--color-interaction-active-bg: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
--color-warning: #f5a623;
--color-warning-soft: #fff4dc;
--color-danger: #ee0000;
--color-danger-hover: #c50000;
--color-danger-soft: #ffeded;
--color-agent: #7928ca;
--color-agent-bg: #f4ecfd;
--color-type-bg: #e9f8ee;
--color-type-text: #0a7c3e;
--color-tag-bg: #f2f2f2;
--color-tag-text: #4d4d4d;
--color-tag-hover-bg: #ebebeb;
--color-tag-hover-text: #171717;
--color-tag-active-bg: #171717;
--color-tag-active-hover-bg: #383838;
--color-code-bg: #f2f2f2;
/* Code blocks (fenced): block background + the terminal-style language
header. Inline code keeps --color-code-bg. */
--code-block-bg: #fafafa;
--code-header-bg: #f2f2f2;
--code-header-text: #666666;
/* Syntax highlighting tokens (highlight.js classes) — GitHub Light */
--code-comment: #6a737d;
--code-keyword: #d73a49;
--code-entity: #6f42c1;
--code-constant: #005cc5;
--code-string: #032f62;
--code-tag: #22863a;
--code-addition-fg: #22863a;
--code-addition-bg: #f0fff4;
--code-deletion-fg: #b31d28;
--code-deletion-bg: #ffeef0;
--color-overlay: rgba(0, 0, 0, 0.32);
--color-focus-ring: rgba(0, 112, 243, 0.16);
/* Status colors */
--color-status-considering: #f59e0b;
--color-status-considering-bg: #fef3c7;
--color-status-developing: #3b82f6;
--color-status-developing-bg: #dbeafe;
--color-status-live: #10b981;
--color-status-live-bg: #d1fae5;
--color-status-abandoned: #6b7280;
--color-status-abandoned-bg: #f3f4f6;
--color-diff-ins-bg: #d4edda;
--color-diff-ins-text: #155724;
--color-diff-del-bg: #f8d7da;
--color-diff-del-text: #721c24;
--color-quote-warning-bg: rgba(255, 213, 79, 0.1);
--color-quote-warning-bg-subtle: rgba(255, 213, 79, 0.08);
--color-quote-info-border: rgba(0, 112, 243, 0.55);
--color-quote-info-bg: rgba(0, 112, 243, 0.04);
--color-highlight-open-bg: rgba(0, 112, 243, 0.09);
--color-highlight-open-hover-bg: rgba(0, 112, 243, 0.17);
--color-highlight-open-border: rgba(0, 112, 243, 0.55);
--color-highlight-pending-bg: rgba(245, 158, 11, 0.12);
--color-highlight-pending-hover-bg: rgba(245, 158, 11, 0.22);
--color-highlight-pending-border: rgba(245, 158, 11, 0.6);
--color-highlight-todo-bg: rgba(59, 130, 246, 0.12);
--color-highlight-todo-hover-bg: rgba(59, 130, 246, 0.22);
--color-highlight-todo-border: rgba(59, 130, 246, 0.6);
--color-highlight-active-bg: rgba(0, 112, 243, 0.2);
--color-highlight-active-outline: rgba(0, 112, 243, 0.3);
--color-inbox-unread-bg: var(--color-primary-light);
--color-inbox-unread-hover-bg: #dcecff;
/* Spacing */
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-2xl: 3rem;
/* Typography */
--font-sans: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-mono: 'Geist Mono', "SF Mono", SFMono-Regular, ui-monospace, Menlo, monospace;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
/* Layout */
--max-width: 75rem;
--nav-height: 4rem;
--radius: 6px;
--radius-lg: 12px;
--shadow: 0 1px 1px rgba(0, 0, 0, 0.02), 0 2px 2px rgba(0, 0, 0, 0.04);
--shadow-lg: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 1px 1px rgba(0, 0, 0, 0.02), 0 8px 16px -4px rgba(0, 0, 0, 0.04), 0 24px 32px -8px rgba(0, 0, 0, 0.06);
--shadow-top: 0 -1px 0 rgba(0, 0, 0, 0.06);
--shadow-pop: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 2px 2px rgba(0, 0, 0, 0.04), 0 8px 16px -4px rgba(0, 0, 0, 0.04);
/* Flat Vercel-style surfaces: the old liquid-glass tokens are kept as
names so every panel picks up solid white cards on a soft canvas,
hairline edges and stacked hairline shadows. */
--mesh-1: transparent;
--mesh-2: transparent;
--mesh-3: transparent;
--glass-bg: #ffffff;
--glass-bg-strong: #ffffff;
--glass-edge: #ebebeb;
--glass-blur: none;
--shadow-glass: 0 1px 1px rgba(0, 0, 0, 0.02), 0 2px 2px rgba(0, 0, 0, 0.04);
--surface-translucent: #ffffff;
--card-edge: #ebebeb;
/* Vercel-style ink: the one primary call-to-action color. */
--color-ink: #171717;
--color-ink-hover: #383838;
--color-on-ink: #ffffff;
--color-nav-bg: rgba(255, 255, 255, 0.8);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
color-scheme: dark;
--color-bg: #000000;
--color-bg-muted: #1a1a1a;
--color-surface: #0a0a0a;
--color-surface-muted: #111111;
--color-input-bg: #0a0a0a;
--color-text: #ededed;
--color-text-muted: #a1a1a1;
--color-border: #262626;
--color-border-strong: #3d3d3d;
--color-primary: #3291ff;
--color-primary-hover: #52a8ff;
--color-primary-light: rgba(50, 145, 255, 0.14);
--color-success: #4ac776;
--color-success-soft: rgba(74, 199, 118, 0.14);
--color-warning: #f5a623;
--color-warning-soft: rgba(245, 166, 35, 0.16);
--color-danger: #ff4d4d;
--color-danger-hover: #ff6b6b;
--color-danger-soft: rgba(255, 77, 77, 0.14);
--color-agent: #c79bf5;
--color-agent-bg: rgba(121, 40, 202, 0.24);
--color-type-bg: rgba(74, 199, 118, 0.14);
--color-type-text: #7fdc9f;
--color-tag-bg: #1a1a1a;
--color-tag-text: #a1a1a1;
--color-tag-hover-bg: #262626;
--color-tag-hover-text: #ededed;
--color-tag-active-bg: #3d3d3d;
--color-tag-active-hover-bg: #525252;
--color-code-bg: #1a1a1a;
--code-block-bg: #0a0a0a;
--code-header-bg: #161616;
--code-header-text: #8f8f8f;
/* Syntax highlighting tokens — One Dark-inspired. Warmer than GitHub
Dark (which paints constants and strings in two shades of blue —
too much on our already-blue slate background). */
--code-comment: #7f848e;
--code-keyword: #c678dd;
--code-entity: #61afef;
--code-constant: #d19a66;
--code-string: #98c379;
--code-tag: #e06c75;
--code-addition-fg: #98c379;
--code-addition-bg: rgba(152, 195, 121, 0.14);
--code-deletion-fg: #e06c75;
--code-deletion-bg: rgba(224, 108, 117, 0.14);
--color-overlay: rgba(0, 0, 0, 0.6);
--color-focus-ring: rgba(50, 145, 255, 0.24);
--color-status-considering-bg: rgba(245, 158, 11, 0.16);
--color-status-developing-bg: rgba(59, 130, 246, 0.18);
--color-status-live-bg: rgba(16, 185, 129, 0.16);
--color-status-abandoned-bg: rgba(148, 163, 184, 0.16);
--color-diff-ins-bg: rgba(52, 211, 153, 0.16);
--color-diff-ins-text: #a7f3d0;
--color-diff-del-bg: rgba(248, 113, 113, 0.16);
--color-diff-del-text: #fecaca;
--color-quote-warning-bg: rgba(245, 158, 11, 0.16);
--color-quote-warning-bg-subtle: rgba(245, 158, 11, 0.12);
--color-quote-info-border: rgba(50, 145, 255, 0.8);
--color-quote-info-bg: rgba(50, 145, 255, 0.1);
--color-highlight-open-bg: rgba(50, 145, 255, 0.16);
--color-highlight-open-hover-bg: rgba(50, 145, 255, 0.26);
--color-highlight-open-border: rgba(50, 145, 255, 0.85);
--color-highlight-pending-bg: rgba(245, 158, 11, 0.18);
--color-highlight-pending-hover-bg: rgba(245, 158, 11, 0.28);
--color-highlight-pending-border: rgba(245, 158, 11, 0.85);
--color-highlight-todo-bg: rgba(59, 130, 246, 0.22);
--color-highlight-todo-hover-bg: rgba(59, 130, 246, 0.32);
--color-highlight-todo-border: rgba(59, 130, 246, 0.85);
--color-highlight-active-bg: rgba(50, 145, 255, 0.28);
--color-highlight-active-outline: rgba(50, 145, 255, 0.35);
--color-inbox-unread-bg: rgba(50, 145, 255, 0.1);
--color-inbox-unread-hover-bg: rgba(50, 145, 255, 0.16);
--shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
--shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 24px 48px -12px rgba(0, 0, 0, 0.8);
--shadow-top: 0 -1px 0 rgba(255, 255, 255, 0.08);
--shadow-pop: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 8px 16px -4px rgba(0, 0, 0, 0.6);
--mesh-1: transparent;
--mesh-2: transparent;
--mesh-3: transparent;
--glass-bg: #0a0a0a;
--glass-bg-strong: #0a0a0a;
--glass-edge: #262626;
--glass-blur: none;
--shadow-glass: none;
--surface-translucent: #0a0a0a;
--card-edge: #262626;
--color-ink: #ededed;
--color-ink-hover: #ffffff;
--color-on-ink: #0a0a0a;
--color-nav-bg: rgba(0, 0, 0, 0.75);
}
}
/* Forced dark theme — overrides system preference */
:root[data-theme="dark"] {
color-scheme: dark;
--color-bg: #000000;
--color-bg-muted: #1a1a1a;
--color-surface: #0a0a0a;
--color-surface-muted: #111111;
--color-input-bg: #0a0a0a;
--color-text: #ededed;
--color-text-muted: #a1a1a1;
--color-border: #262626;
--color-border-strong: #3d3d3d;
--color-primary: #3291ff;
--color-primary-hover: #52a8ff;
--color-primary-light: rgba(50, 145, 255, 0.14);
--color-success: #4ac776;
--color-success-soft: rgba(74, 199, 118, 0.14);
--color-warning: #f5a623;
--color-warning-soft: rgba(245, 166, 35, 0.16);
--color-danger: #ff4d4d;
--color-danger-hover: #ff6b6b;
--color-danger-soft: rgba(255, 77, 77, 0.14);
--color-agent: #c79bf5;
--color-agent-bg: rgba(121, 40, 202, 0.24);
--color-type-bg: rgba(74, 199, 118, 0.14);
--color-type-text: #7fdc9f;
--color-tag-bg: #1a1a1a;
--color-tag-text: #a1a1a1;
--color-tag-hover-bg: #262626;
--color-tag-hover-text: #ededed;
--color-tag-active-bg: #3d3d3d;
--color-tag-active-hover-bg: #525252;
--color-code-bg: #1a1a1a;
--code-block-bg: #0a0a0a;
--code-header-bg: #161616;
--code-header-text: #8f8f8f;
/* Syntax highlighting tokens — One Dark-inspired (see the media-query
dark block above). */
--code-comment: #7f848e;
--code-keyword: #c678dd;
--code-entity: #61afef;
--code-constant: #d19a66;
--code-string: #98c379;
--code-tag: #e06c75;
--code-addition-fg: #98c379;
--code-addition-bg: rgba(152, 195, 121, 0.14);
--code-deletion-fg: #e06c75;
--code-deletion-bg: rgba(224, 108, 117, 0.14);
--color-overlay: rgba(0, 0, 0, 0.6);
--color-focus-ring: rgba(50, 145, 255, 0.24);
--color-status-considering-bg: rgba(245, 158, 11, 0.16);
--color-status-developing-bg: rgba(59, 130, 246, 0.18);
--color-status-live-bg: rgba(16, 185, 129, 0.16);
--color-status-abandoned-bg: rgba(148, 163, 184, 0.16);
--color-diff-ins-bg: rgba(52, 211, 153, 0.16);
--color-diff-ins-text: #a7f3d0;
--color-diff-del-bg: rgba(248, 113, 113, 0.16);
--color-diff-del-text: #fecaca;
--color-quote-warning-bg: rgba(245, 158, 11, 0.16);
--color-quote-warning-bg-subtle: rgba(245, 158, 11, 0.12);
--color-quote-info-border: rgba(50, 145, 255, 0.8);
--color-quote-info-bg: rgba(50, 145, 255, 0.1);
--color-highlight-open-bg: rgba(50, 145, 255, 0.16);
--color-highlight-open-hover-bg: rgba(50, 145, 255, 0.26);
--color-highlight-open-border: rgba(50, 145, 255, 0.85);
--color-highlight-pending-bg: rgba(245, 158, 11, 0.18);
--color-highlight-pending-hover-bg: rgba(245, 158, 11, 0.28);
--color-highlight-pending-border: rgba(245, 158, 11, 0.85);
--color-highlight-todo-bg: rgba(59, 130, 246, 0.22);
--color-highlight-todo-hover-bg: rgba(59, 130, 246, 0.32);
--color-highlight-todo-border: rgba(59, 130, 246, 0.85);
--color-highlight-active-bg: rgba(50, 145, 255, 0.28);
--color-highlight-active-outline: rgba(50, 145, 255, 0.35);
--color-inbox-unread-bg: rgba(50, 145, 255, 0.1);
--color-inbox-unread-hover-bg: rgba(50, 145, 255, 0.16);
--shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
--shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 24px 48px -12px rgba(0, 0, 0, 0.8);
--shadow-top: 0 -1px 0 rgba(255, 255, 255, 0.08);
--shadow-pop: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 8px 16px -4px rgba(0, 0, 0, 0.6);
--mesh-1: transparent;
--mesh-2: transparent;
--mesh-3: transparent;
--glass-bg: #0a0a0a;
--glass-bg-strong: #0a0a0a;
--glass-edge: #262626;
--glass-blur: none;
--shadow-glass: none;
--surface-translucent: #0a0a0a;
--card-edge: #262626;
--color-ink: #ededed;
--color-ink-hover: #ffffff;
--color-on-ink: #0a0a0a;
--color-nav-bg: rgba(0, 0, 0, 0.75);
}
/* Forced light theme — overrides system dark preference */
:root[data-theme="light"] {
color-scheme: light;
}
/* Reset */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-family: var(--font-sans);
font-size: var(--text-base);
line-height: 1.6;
color: var(--color-text);
background-color: var(--color-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
/* Native-feel hard requirement: page width must NOT change between
navigations. Without a stable gutter, the scrollbar appearing or
disappearing between a long page and a short one re-centers the whole
layout — a "jiggle" on every workspace → plan hop. */
scrollbar-gutter: stable;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
background-color: var(--color-bg);
color: var(--color-text);
}
/* Vercel voice: display type is weight 600 with tight negative tracking;
never heavier. */
h1, h2, h3, h4 {
font-weight: 600;
letter-spacing: -0.02em;
}
h1 { letter-spacing: -0.04em; }
code, kbd, samp, pre {
font-family: var(--font-mono);
}
a {
color: var(--color-primary);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
img, svg {
max-width: 100%;
display: block;
}
/* Navigation */
.site-nav {
background: var(--color-nav-bg);
-webkit-backdrop-filter: saturate(1.8) blur(8px);
backdrop-filter: saturate(1.8) blur(8px);
border-bottom: 1px solid var(--color-border);
height: var(--nav-height);
position: sticky;
top: 0;
z-index: 100;
}
/* Three zones: brand + primary links cluster on the left (they're one
thought — "where am I?"), search floats in the middle, controls hold
the right edge. The auto margins on links/right split the free space,
so nothing drifts into detached islands at wide widths. */
.site-nav__inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 var(--space-lg);
height: 100%;
display: flex;
align-items: center;
gap: var(--space-md);
}
.site-nav__brand {
font-size: var(--text-base);
font-weight: 600;
letter-spacing: -0.02em;
color: var(--color-text);
text-decoration: none;
display: flex;
align-items: center;
gap: var(--space-sm);
flex-shrink: 0;
}
.site-nav__logo {
width: 28px;
height: 28px;
border-radius: 6px;
}
/* Non-production environment marker: a colored ring on the logo (favicon
palette) — layout-neutral, so dev and staging reproduce production's
nav spacing exactly. */
.site-nav__logo--development {
box-shadow: 0 0 0 2px #10b981;
}
.site-nav__logo--staging {
box-shadow: 0 0 0 2px #f59e0b;
}
.site-nav__brand:hover {
text-decoration: none;
color: var(--color-text);
opacity: 0.8;
}
/* The right cluster — search, notifications, menu — pinned to the right so
the bar reads left-to-right as identity → context → tools. Nothing here
shrinks: a search crushed to a sliver or a ☰ that drifts reads as breakage
(search folds to an icon at ≤900px, the bell into the menu at ≤640px). */
.site-nav__right {
display: flex;
align-items: center;
gap: var(--space-md);
margin-left: auto;
min-width: 0;
}
.site-nav__menu,
.inbox-dropdown {
flex-shrink: 0;
}
.site-nav__menu {
position: relative;
}
.site-nav__menu-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px;
border: none;
background: none;
border-radius: var(--radius);
color: var(--color-text-muted);
cursor: pointer;
transition: color 0.15s, background 0.15s;
}
.site-nav__menu-btn:hover {
color: var(--color-text);
background: var(--color-bg);
}
/* When the bell has folded into the menu (phone widths), the ☰ carries a
small unread dot so a waiting notification is still visible at a glance.
coplan--inbox-badge toggles .site-nav--has-unread from the live count;
the dot itself only shows once the bell is gone (see the phone block). */
.site-nav__menu-btn::after {
content: "";
position: absolute;
top: 6px;
right: 6px;
width: 8px;
height: 8px;
border-radius: 9999px;
background: var(--color-danger);
display: none;
}
/* Scroll-aware plan context in the top nav: containing folder + document title.
Collapsed to zero width while the masthead is visible, so it steals no
space and causes no reflow at the top of a plan. coplan--nav-title reveals
the whole context once #plan-header scrolls behind the bar. */
.site-nav__plan-context {
display: flex;
align-items: center;
gap: var(--space-xs);
/* Barely shrinkable itself; the search box (below) yields first and far
faster, down to a usable floor. So a short title shows in full, and a
long one only ellipsizes once the search has already given up its
slack — never the other way round. */
flex: 0 1 auto;
min-width: 0;
width: 0;
max-width: 0;
overflow: hidden;
opacity: 0;
color: var(--color-text-muted);
font-size: var(--text-sm);
font-weight: 600;
line-height: 1;
white-space: nowrap;
text-decoration: none;
pointer-events: none;
/* Grow a touch slower than the fade, so it reads as sliding in from the
links rather than shoving the search box aside. */
transition: width 0.28s ease, max-width 0.28s ease, opacity 0.18s ease;
}
.site-nav__plan-context--visible {
width: 25rem;
max-width: 25rem;
opacity: 1;
pointer-events: auto;
}
.site-nav__doc-title {
display: flex;
align-items: center;
gap: var(--space-xs);
min-width: 0;
color: var(--color-text-muted);
text-decoration: none;
}
.site-nav__doc-title:hover {
color: var(--color-text);
text-decoration: none;
}
.site-nav__doc-title-text {
overflow: hidden;
text-overflow: ellipsis;
}
.site-nav__doc-title .plan-type-icon {
flex-shrink: 0;
}
/* The title sits in the left cluster right after the brand; .site-nav__right
is pushed away by its own margin-left:auto, so the title simply grows into
the free space between them — no margin juggling needed now that the bar
holds nothing else on the left. On a phone it's the ONLY plan context (the
Contents sidebar is hidden < 1024px), so let it take more of the row. */
@media (max-width: 640px) {
.site-nav__plan-context--visible {
max-width: 58vw;
}
}
/* Main content */
.main-content {
flex: 1;
max-width: var(--max-width);
margin: 0 auto;
padding: var(--space-xl) var(--space-lg);
width: 100%;
}
/* Page header */
.page-header {
margin-bottom: var(--space-xl);
display: flex;
align-items: center;
justify-content: space-between;
}
.page-header h1 {
font-size: var(--text-2xl);
font-weight: 600;
}
/* The plan masthead: two visual rows. Row one is the title (wrapping
naturally, as wide as it needs). Row two is the byline on the left and
the viewer-relative side column (presence + toolbar) on the right —
bottom-aligning the side column against the header makes the toolbar
sit level with the byline, so the whole block reads as two bands even
though it's two DOM subtrees (broadcasts own the left, the request
owns the right). */
.plan-masthead {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-sm) var(--space-lg);
flex-wrap: wrap;
margin-bottom: var(--space-md);
}
.plan-masthead__side {
display: flex;
align-items: center;
gap: var(--space-md);
margin-left: auto;
flex-shrink: 0;
/* Level the toolbar pill's baseline band with the byline text. */
margin-bottom: -2px;
}
/* Compact "up to containing folder" control. In the masthead it lives in
the byline, where it takes no width away from the title; its accessible
name and tooltip carry the full folder path. */
.plan-location-link {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
color: var(--color-text-muted);
background: transparent;
border: 0;
border-radius: 6px;
text-decoration: none;
transition: color 0.15s, background 0.15s;
}
.plan-location-link:hover,
.plan-location-link:focus-visible {
color: var(--color-primary);
background: var(--color-primary-light);
text-decoration: none;
}
.plan-location-link--masthead {
width: 24px;
height: 24px;
margin: -2px 0 -2px 2px;
}
.plan-location-link--nav {
width: 26px;
height: 26px;
color: var(--color-text);
background: var(--color-surface-muted);
}
.plan-location-link--nav svg {
width: 16px;
height: 16px;
}
/* Plan page header: one lockup — the file icon beside a text stack
(title over byline) that shares a single left edge. The icon anchors
to the title's first line (36px icon inside a ~38px line box), so it
reads as the document's mark whether or not the title wraps, and the
byline hangs in the title's text column instead of being fake-indented.
Everything here is broadcast-safe; viewer-relative chrome (Save, owner
toolbar) lives in the masthead's side column, outside this subtree. */
.page-header--plan {
display: flex;
align-items: flex-start;
justify-content: flex-start;
gap: var(--space-sm);
margin-bottom: 0;
flex: 1;
min-width: min(24rem, 100%);
}
.page-header--plan .plan-type-icon {
flex-shrink: 0;
margin-top: 1px;
}
/* Center the back arrow (24px hit area) against the title's first line. */
.page-header--plan .history-back {
margin-top: 7px;
}
.page-header__text {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.page-header__title {
min-width: 0;
overflow-wrap: anywhere;
}
.page-header__byline {
display: flex;
align-items: center;
gap: var(--space-xs);
flex-wrap: wrap;
min-width: 0;
}
/* Plan viewers / presence */
.plan-viewers {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.plan-viewers__avatars {
display: flex;
flex-direction: row-reverse;
}
/* Each avatar is wrapped in a profile link — the link owns the stacking
overlap and the tooltip (::after can't render on an ![]()
). */
.plan-viewers__avatar-link {
display: flex;
margin-left: -0.5rem;
border-radius: 50%;
position: relative;
}
.plan-viewers__avatar-link:hover {
z-index: 1;
transform: translateY(-1px);
}
.plan-viewers__avatar {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 50%;
background: var(--color-primary);
color: var(--color-text-inverse);
font-size: 0.7rem;
font-weight: 600;
border: 2px solid var(--color-surface);
object-fit: cover;
}
.plan-viewers__avatar--you {
background: var(--color-success);
}
.plan-viewers__avatar-link::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
background: var(--color-text);
color: var(--color-surface);
padding: 4px 8px;
border-radius: var(--radius);
font-size: 0.75rem;
font-weight: 500;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 0.15s;
z-index: 10;
}
.plan-viewers__avatar-link:hover::after {
opacity: 1;
}
.plan-viewers__avatars > :last-child {
margin-left: 0;
}
.plan-viewers__overflow {
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 50%;
background: var(--color-border);
color: var(--color-text-muted);
font-size: 0.7rem;
font-weight: 600;
border: 2px solid var(--color-surface);
margin-left: -0.5rem;
}
.plan-viewers__label {
font-size: var(--text-sm);
color: var(--color-text-muted);
white-space: nowrap;
}
/* Agent presence pill — live state of an agent session on this plan.
Broadcast-replaced; must read at a glance as "the agent is engaged". */
.plan-agent-sessions {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.agent-pill {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.25rem 0.65rem;
border-radius: 999px;
font-size: var(--text-sm);
font-weight: 500;
color: var(--color-text-muted);
background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
white-space: nowrap;
}
.agent-pill__icon {
flex-shrink: 0;
color: var(--color-primary);
}
.agent-pill__dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color-primary);
animation: agent-pill-pulse 1.4s ease-in-out infinite;
}
/* Listening: just the agent's name and a green pulse — a mic-live
indicator, not a status message. Chrome stays muted so working states
still out-rank it visually. */
.agent-pill--watching {
background: color-mix(in srgb, var(--color-text-muted) 6%, var(--color-surface));
border-color: color-mix(in srgb, var(--color-text-muted) 20%, transparent);
}
.agent-pill--watching .agent-pill__icon {
color: var(--color-text-muted);
}
.agent-pill--watching .agent-pill__dot {
background: var(--color-success);
box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-success) 60%, transparent);
animation: agent-pill-listen 2s ease-in-out infinite;
}
@keyframes agent-pill-listen {
0%, 100% {
opacity: 1;
box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-success) 55%, transparent);
}
50% {
opacity: 0.7;
box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-success) 0%, transparent);
}
}
.agent-pill--awaiting_input {
background: color-mix(in srgb, var(--color-warning, #b45309) 10%, var(--color-surface));
border-color: color-mix(in srgb, var(--color-warning, #b45309) 30%, transparent);
}
.agent-pill--awaiting_input .agent-pill__dot,
.agent-pill--awaiting_input .agent-pill__icon {
color: var(--color-warning, #b45309);
background: var(--color-warning, #b45309);
animation: none;
}
.agent-pill--awaiting_input .agent-pill__icon {
background: none;
}
@keyframes agent-pill-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.35; transform: scale(0.8); }
}
/* Live-edit diff flashes — applied by live_update_controller when a
broadcast revision lands: changed blocks tint-and-fade, inline
insertions get an wash, removed text lingers struck-through in a
then collapses. Green wash = new words, not "success". */
.agent-flash-block {
animation: agent-flash-bg 2.4s ease-out;
}
ins.agent-flash {
text-decoration: none;
border-radius: 2px;
animation: agent-flash-ins 2.4s ease-out;
}
del.agent-flash {
text-decoration: line-through;
border-radius: 2px;
color: var(--color-text-muted);
animation: agent-flash-del 2.4s ease-out forwards;
}
@keyframes agent-flash-bg {
0% { background: color-mix(in srgb, var(--color-primary) 14%, transparent); }
100% { background: transparent; }
}
@keyframes agent-flash-ins {
0% { background: color-mix(in srgb, var(--color-success) 30%, transparent); }
100% { background: transparent; }
}
@keyframes agent-flash-del {
0% { background: color-mix(in srgb, var(--color-danger, #b91c1c) 22%, transparent); opacity: 1; }
60% { background: transparent; opacity: 0.7; }
100% { opacity: 0; font-size: 0; }
}
@media (prefers-reduced-motion: reduce) {
.agent-pill__dot { animation: none; }
.agent-flash-block, ins.agent-flash { animation: none; }
del.agent-flash { animation: none; display: none; }
}
/* Voice push-to-talk — mic button + transient transcript/status text. */
/* The mic follows the scroll. A dictated comment is pinned to whatever
passage is on screen when you speak, so a control that lives in the
masthead would make you scroll away from the thing you're talking
about in order to say anything about it. */
.voice-control {
position: fixed;
right: var(--space-lg);
bottom: var(--space-lg);
z-index: 40;
display: inline-flex;
align-items: center;
flex-direction: row-reverse;
gap: var(--space-sm);
}
.voice-control .voice-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
border-radius: 50%;
color: var(--color-text-muted, currentColor);
background: var(--color-surface);
border: 1px solid var(--color-border);
box-shadow: 0 2px 12px rgb(0 0 0 / 12%);
backdrop-filter: blur(8px);
transition: transform 120ms ease, color 120ms ease, background 120ms ease;
}
.voice-control .voice-btn:hover {
background: var(--color-surface-raised, var(--color-surface));
color: var(--color-text, currentColor);
transform: scale(1.06);
}
/* Hovering names the key. Push-to-talk is chosen in Settings and nothing
else on the page says what it ended up as — a mic you have to hold the
right key for is only discoverable if the mic tells you which one.
Written by the controller, which knows the platform: the same
preference reads as ⌥ Option on a Mac and Alt everywhere else. */
.voice-control .voice-btn[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 8px);
right: 0;
background: var(--color-text);
color: var(--color-surface);
padding: 4px 8px;
border-radius: var(--radius);
font-size: 0.75rem;
font-weight: 500;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 0.15s;
z-index: 10;
}
.voice-control .voice-btn[data-tooltip]:hover::after {
opacity: 1;
}
/* Mid-take the button is a stop button, and the status text is already
saying what's happening — an instruction for starting would contradict
both. */
.voice-control .voice-btn--listening[data-tooltip]::after {
content: none;
}
/* Recording reads as recording: the button fills red, and a ring grows
with how loud you are. The fill says "the mic is open"; only the ring
says "it can hear you", which is the question you actually have while
talking to a button. */
.voice-control .voice-btn--listening,
.voice-control .voice-btn--listening:hover {
color: #fff;
background: var(--color-danger);
border-color: var(--color-danger);
transform: scale(1.06);
animation: voice-btn-pulse 1.2s ease-in-out infinite;
box-shadow:
0 2px 12px rgb(0 0 0 / 18%),
0 0 0 calc(var(--voice-level, 0) * 0.55rem) rgb(from var(--color-danger) r g b / 25%);
transition: box-shadow 90ms ease-out, transform 120ms ease;
}
@keyframes voice-btn-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.35; transform: scale(0.8); }
}
@media (prefers-reduced-motion: reduce) {
.voice-btn--listening {
animation: none;
}
}
/* Status sits to the left of the button, and only takes up room when it
has something to say. */
.voice-status {
max-width: 16rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.voice-status:not(:empty) {
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius);
background: var(--color-surface);
border: 1px solid var(--color-border);
box-shadow: 0 2px 12px rgb(0 0 0 / 12%);
}
@media (max-width: 640px) {
.voice-control {
right: var(--space-md);
bottom: calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
}
.voice-status {
max-width: 10rem;
}
}
.voice-status--error {
color: var(--color-danger);
}
/* Flash messages */
.flash {
padding: var(--space-md) var(--space-lg);
border-radius: var(--radius);
margin-bottom: var(--space-lg);
font-size: var(--text-sm);
}
.flash--notice {
background: var(--color-primary-light);
color: var(--color-primary);
border: 1px solid var(--color-primary);
}
.flash--alert {
background: var(--color-danger-soft);
color: var(--color-danger);
border: 1px solid var(--color-danger);
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
justify-content: center;
min-height: 2.25rem;
padding: 0 0.875rem;
font-size: var(--text-sm);
font-weight: 500;
letter-spacing: -0.01em;
border-radius: var(--radius);
border: 1px solid transparent;
cursor: pointer;
transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
text-decoration: none;
line-height: 1.4;
white-space: nowrap;
}
.btn:hover {
text-decoration: none;
}
.btn:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* Ink is the single call-to-action color (Vercel's black button). */
.btn--primary {
background: var(--color-ink);
color: var(--color-on-ink);
border-color: var(--color-ink);
}
.btn--primary:hover {
background: var(--color-ink-hover);
border-color: var(--color-ink-hover);
color: var(--color-on-ink);
}
.btn--primary:active {
transform: scale(0.98);
}
.btn--secondary {
background: var(--color-surface);
color: var(--color-text);
border-color: var(--color-border);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.02);
}
.btn--secondary:hover {
background: var(--color-bg-muted);
border-color: var(--color-border-strong);
}
/* Quiet text-style button for low-emphasis actions (e.g. Archive). */
.btn--ghost {
background: transparent;
color: var(--color-text-muted);
border-color: transparent;
}
.btn--ghost:hover {
background: var(--color-bg);
color: var(--color-text);
}
.btn--danger {
background: var(--color-danger);
color: var(--color-text-inverse);
}
.btn--danger:hover {
background: var(--color-danger-hover);
color: var(--color-text-inverse);
}
/* Cards */
.card {
background: var(--color-surface);
border: 1px solid var(--card-edge);
border-radius: var(--radius-lg);
padding: var(--space-lg);
box-shadow: var(--shadow-glass);
}
/* Status badges */
.badge {
display: inline-block;
padding: var(--space-xs) var(--space-sm);
font-size: 0.75rem;
font-weight: 500;
border-radius: 9999px;
line-height: 1.33;
}
/* Plan state badges. Published-and-active plans get no badge — these mark
the exceptional states only. (The --color-status-* tokens are shared
with comment-thread badges below.) */
.badge--archived { background: var(--color-status-abandoned-bg); color: var(--color-status-abandoned); }
/* Hidden-state flag: a quiet crossed-out eye + word, no background. The
normal (published) state is deliberately unmarked. */
.state-flag {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.75rem;
font-weight: 500;
color: var(--color-text-muted);
white-space: nowrap;
}
.state-flag__eye {
flex-shrink: 0;
opacity: 0.8;
}
.badge--open { background: var(--color-status-considering-bg); color: var(--color-status-considering); }
.badge--resolved { background: var(--color-status-live-bg); color: var(--color-status-live); }
.badge--success { background: var(--color-success-soft); color: var(--color-success); }
.badge--warning { background: var(--color-warning-soft); color: var(--color-warning); }
.badge--danger { background: var(--color-danger-soft); color: var(--color-danger); }
.badge--agent { background: var(--color-agent-bg); color: var(--color-agent); font-size: 0.65rem; padding: 1px 6px; vertical-align: middle; }
.badge--type { background: var(--color-type-bg); color: var(--color-type-text); }
.badge--tag { background: var(--color-tag-bg); color: var(--color-tag-text); text-decoration: none; font-size: 0.7rem; text-transform: none; letter-spacing: normal; }
.badge--tag:hover { background: var(--color-tag-hover-bg); color: var(--color-tag-hover-text); }
.badge--tag-active { background: var(--color-tag-active-bg); color: var(--color-text-inverse); }
.badge--tag-active:hover { background: var(--color-tag-active-hover-bg); color: var(--color-text-inverse); }
/* Document-type file icon: a colored rounded square with the type's
glyph, like a Drive/Finder file icon. It represents the file — it
leads the title and never reads as a tag; the type's name lives in the
tooltip. Tint classes are picked per type name (PLAN_TYPE_COLOR_COUNT
in PlansHelper must match the number of tints here). */
.plan-type-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 6px;
background: var(--color-type-bg);
color: var(--color-type-text);
}
.plan-type-icon--sm { width: 22px; height: 22px; border-radius: 5px; }
.plan-type-icon--sm svg { width: 12px; height: 12px; }
.plan-type-icon--md { width: 26px; height: 26px; }
.plan-type-icon--lg { width: 36px; height: 36px; border-radius: 9px; }
.plan-type-icon--lg svg { width: 19px; height: 19px; }
/* Saturated mid-tones read on both themes (like language dots). */
.plan-type-icon--0 { background: color-mix(in srgb, #5b8def 16%, transparent); color: #5b8def; }
.plan-type-icon--1 { background: color-mix(in srgb, #3fa876 16%, transparent); color: #3fa876; }
.plan-type-icon--2 { background: color-mix(in srgb, #d99a2b 16%, transparent); color: #d99a2b; }
.plan-type-icon--3 { background: color-mix(in srgb, #9c6fe0 16%, transparent); color: #9c6fe0; }
.plan-type-icon--4 { background: color-mix(in srgb, #e0637a 16%, transparent); color: #e0637a; }
.plan-type-icon--5 { background: color-mix(in srgb, #2fa8a0 16%, transparent); color: #2fa8a0; }
/* Avatars */
.avatar {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
vertical-align: middle;
flex-shrink: 0;
}
.avatar--sm { width: 1.5rem; height: 1.5rem; font-size: 0.6rem; }
.avatar--md { width: 2rem; height: 2rem; font-size: 0.7rem; }
.avatar--lg { width: 3rem; height: 3rem; font-size: 1rem; }
.avatar--xl { width: 4rem; height: 4rem; font-size: 1.3rem; }
.avatar--initials {
background: var(--color-primary);
color: var(--color-text-inverse);
font-weight: 600;
}
img.avatar {
object-fit: cover;
}
.avatar__image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border-radius: inherit;
object-fit: cover;
opacity: 0;
}
.avatar__image--loaded {
opacity: 1;
}
/* Forms */
.form-group {
margin-bottom: var(--space-lg);
}
.form-group label {
display: block;
font-size: var(--text-sm);
font-weight: 500;
margin-bottom: var(--space-xs);
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="url"],
.form-group textarea,
.form-group select {
width: 100%;
min-height: 2.5rem;
padding: var(--space-sm) 0.75rem;
font-size: var(--text-sm);
font-family: var(--font-sans);
border: 1px solid var(--color-border);
border-radius: var(--radius);
background: var(--color-input-bg);
color: var(--color-text);
transition: border-color 0.15s, box-shadow 0.15s;
}
.form-group input:hover,
.form-group textarea:hover,
.form-group select:hover {
border-color: var(--color-border-strong);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-focus-ring);
}
.form-group textarea {
min-height: 8rem;
resize: vertical;
}
/* Onboarding banner */
.onboarding-banner {
background: var(--color-primary-light);
border-bottom: 1px solid var(--color-primary);
padding: var(--space-sm) var(--space-lg);
font-size: var(--text-sm);
color: var(--color-text);
text-align: center;
}
.onboarding-banner a {
color: var(--color-primary);
font-weight: 600;
text-decoration: underline;
}
/* Empty states */
.empty-state {
text-align: center;
padding: var(--space-2xl);
color: var(--color-text-muted);
}
.empty-state p {
margin-bottom: var(--space-md);
}
/* Status filters (used on the notifications index) */
.status-filters {
display: flex;
gap: var(--space-sm);
margin-bottom: var(--space-xl);
flex-wrap: wrap;
}
.status-filter {
padding: 2px var(--space-sm);
font-size: var(--text-sm);
font-weight: 500;
border-radius: 9999px;
color: var(--color-text-muted);
border: 1px solid var(--color-border);
text-decoration: none;
transition: all 0.15s;
line-height: 1.5;
}
.status-filter:hover {
text-decoration: none;
border-color: var(--color-text-muted);
}
.status-filter--active {
background: var(--color-primary);
color: var(--color-text-inverse);
border-color: var(--color-primary);
}
/* Plans list */
.plans-list {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.active-filter {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
background: var(--color-surface-muted);
border: 1px solid var(--color-border);
border-radius: var(--radius);
font-size: var(--text-sm);
margin-bottom: var(--space-md);
}
.active-filter__clear {
color: var(--color-text-muted);
text-decoration: none;
font-size: var(--text-sm);
}
.active-filter__clear:hover {
color: var(--color-text);
}
/* Plan form */
.plan-form__actions {
display: flex;
gap: var(--space-sm);
margin-top: var(--space-md);
}
/* Chip-style tag editor: an input-shaped shell holding tag pills plus a
borderless inline text field. */
.tag-input {
padding: 6px;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius);
background: var(--color-input-bg);
cursor: text;
}
.tag-input:focus-within {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-focus-ring);
}
.tag-input__chips {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
}
.tag-input__chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 6px 2px 10px;
border-radius: 9999px;
background: var(--color-tag-bg);
color: var(--color-tag-text);
font-size: var(--text-sm);
line-height: 1.5;
}
.tag-input__remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
padding: 0;
border: none;
border-radius: 9999px;
background: transparent;
color: inherit;
font-size: 0.9rem;
line-height: 1;
cursor: pointer;
}
.tag-input__remove:hover {
background: var(--color-tag-hover-bg);
color: var(--color-danger);
}
.tag-input__field {
flex: 1;
min-width: 140px;
padding: 4px;
border: none;
background: transparent;
color: var(--color-text);
font-family: inherit;
font-size: var(--text-sm);
}
.tag-input__field:focus {
outline: none;
}
/* Plan content */
.plan-content pre {
font-family: var(--font-mono);
font-size: var(--text-sm);
line-height: 1.7;
white-space: pre-wrap;
word-wrap: break-word;
}
/* Version list */
/* History split view */
.history-split {
display: grid;
grid-template-columns: 280px 1fr;
gap: 0;
min-height: 400px;
}
.history-split__list {
border-right: 1px solid var(--color-border);
overflow-y: auto;
max-height: 70vh;
}
.history-split__item {
display: block;
padding: var(--space-sm) var(--space-md);
border-bottom: 1px solid var(--color-border);
text-decoration: none;
color: var(--color-text);
cursor: pointer;
transition: background 0.1s;
}
.history-split__item:hover {
background: var(--color-bg-muted);
text-decoration: none;
}
.history-split__item--active {
background: var(--color-primary-light);
border-left: 3px solid var(--color-primary);
padding-left: calc(var(--space-md) - 3px);
}
.history-split__item--active:hover {
background: var(--color-primary-light);
}
.history-split__version {
font-weight: 600;
font-size: var(--text-sm);
color: var(--color-primary);
}
.history-split__meta {
display: flex;
align-items: center;
gap: var(--space-xs);
font-size: var(--text-sm);
margin-top: 2px;
}
.history-split__summary {
font-size: var(--text-sm);
color: var(--color-text-muted);
margin-top: 2px;
}
.history-split__time {
font-size: 0.75rem;
color: var(--color-text-muted);
margin-top: 2px;
}
/* Metadata events in the history feed (status changes, tag adds, etc.).
Reuses .history-split__item layout but is non-interactive — clicking does
not load a diff because the event payload *is* the diff. */
.history-split__item--event {
cursor: default;
}
.history-split__item--event:hover {
background: inherit;
}
.history-split__event-chip {
display: inline-block;
padding: 1px 6px;
border-radius: var(--radius);
background: var(--color-bg-muted);
border: 1px solid var(--color-border);
font-size: 0.7rem;
font-weight: 500;
text-transform: uppercase;
font-family: var(--font-mono);
letter-spacing: 0.02em;
color: var(--color-text-muted);
}
.history-split__event-link {
color: var(--color-primary);
text-decoration: underline;
}
.history-split__detail {
padding: var(--space-md) var(--space-lg);
overflow-y: auto;
max-height: 70vh;
}
.history-split__placeholder {
display: flex;
align-items: center;
justify-content: center;
height: 200px;
}
/* On narrow screens the side-by-side split would crush the diff to a
word per line — stack instead: a short scrollable version list on
top, the detail below it at full width. */
@media (max-width: 720px) {
.history-split {
grid-template-columns: 1fr;
}
.history-split__list {
border-right: none;
border-bottom: 1px solid var(--color-border);
max-height: 260px;
}
.history-split__detail {
padding: var(--space-md);
max-height: none;
}
}
/* Version diff preview */
.version-diff-preview__header {
display: flex;
align-items: baseline;
gap: var(--space-md);
margin-bottom: var(--space-md);
flex-wrap: wrap;
}
.version-diff-preview__header h3 {
font-size: var(--text-xl);
font-weight: 600;
margin: 0;
}
/* Diff view */
.diff-view {
font-family: var(--font-mono);
font-size: var(--text-sm);
line-height: 1.6;
margin-top: var(--space-md);
overflow-x: auto;
}
.diff-view ul {
list-style: none;
padding: 0;
}
.diff-view li {
padding: 1px var(--space-sm);
white-space: pre-wrap;
}
.diff-view li.ins {
background: var(--color-diff-ins-bg);
color: var(--color-diff-ins-text);
}
.diff-view li.del {
background: var(--color-diff-del-bg);
color: var(--color-diff-del-text);
}
/* Utility */
.text-muted { color: var(--color-text-muted); }
.text-sm { font-size: var(--text-sm); }
.mt-md { margin-top: var(--space-md); }
.mb-md { margin-bottom: var(--space-md); }
/* "Changed since you last looked" — one-time, per-viewer section
highlights (changed_sections_controller). Quiet left accent + faint
tint; gone on the next visit. */
/* A run of adjacent changed blocks is one band, not one box per block:
the gap between blocks in a run becomes padding inside the tint instead
of untinted margin showing through, so a changed section reads as a
single stretch rather than a stack of stripes. Scoped under
.markdown-rendered to outrank its per-element margins. */
.markdown-rendered .section-changed {
box-shadow: inset 3px 0 0 var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 5%, transparent);
border-radius: 0;
padding-left: var(--space-sm);
margin-left: calc(-1 * var(--space-sm));
margin-bottom: 0;
padding-bottom: var(--space-md);
}
/* Headings inside a run keep their breathing room, as padding within the
band rather than a gap through it. The run's own first heading is
.section-changed--start and keeps its margin — that space separates the
band from the unchanged content above it. */
.markdown-rendered .section-changed:is(h1, h2, h3):not(.section-changed--start) {
margin-top: 0;
padding-top: var(--space-xl);
}
.markdown-rendered .section-changed--start {
border-top-right-radius: var(--radius);
padding-top: var(--space-sm);
}
.markdown-rendered .section-changed--end {
border-bottom-right-radius: var(--radius);
padding-bottom: var(--space-sm);
margin-bottom: var(--space-md);
}
.changed-sections-note {
display: flex;
align-items: center;
gap: var(--space-xs);
margin-bottom: var(--space-md);
}
.changed-sections-note a {
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
}
/* Rendered markdown */
.markdown-rendered h1,
.markdown-rendered h2,
.markdown-rendered h3,
.markdown-rendered h4,
.markdown-rendered h5,
.markdown-rendered h6 {
margin-top: var(--space-xl);
margin-bottom: var(--space-md);
font-weight: 600;
line-height: 1.3;
}
.markdown-rendered h1 { font-size: var(--text-2xl); }
.markdown-rendered h2 { font-size: var(--text-xl); }
.markdown-rendered h3 { font-size: var(--text-lg); }
.markdown-rendered h1:first-child,
.markdown-rendered h2:first-child,
.markdown-rendered h3:first-child { margin-top: 0; }
.section-heading {
display: flex;
align-items: center;
}
.section-heading__title {
min-width: 0;
}
.section-permalink {
display: flex;
flex: 0 0 1.5em;
align-items: center;
justify-content: center;
height: 1.5em;
margin-left: var(--space-xs);
border: 0;
color: var(--color-text-muted);
opacity: 0;
position: relative;
transition: opacity 120ms ease, color 120ms ease;
}
.markdown-rendered h1:hover > .section-permalink,
.markdown-rendered h2:hover > .section-permalink,
.markdown-rendered h3:hover > .section-permalink,
.section-permalink:focus-visible {
opacity: 1;
}
.section-permalink:hover,
.section-permalink:focus-visible {
color: var(--color-primary);
}
.section-permalink[data-copy-state="copied"] {
color: var(--color-success);
opacity: 1;
}
.section-permalink[data-copy-state="failed"] {
color: var(--color-danger);
opacity: 1;
}
.section-permalink[data-copy-state]::after {
content: attr(data-copy-message);
position: absolute;
left: calc(100% + var(--space-xs));
top: 50%;
transform: translateY(-50%);
padding: 0.25rem 0.45rem;
border: 1px solid var(--color-border);
border-radius: var(--radius);
background: var(--color-surface);
box-shadow: var(--shadow-pop);
color: var(--color-text);
font-size: 0.75rem;
font-weight: 500;
line-height: 1;
white-space: nowrap;
z-index: 2;
}
@media (hover: none) {
.section-permalink { opacity: 1; }
}
@media (max-width: 640px) {
.section-permalink[data-copy-state]::after {
left: auto;
right: 0;
}
}
.markdown-rendered p {
margin-bottom: var(--space-md);
line-height: 1.9;
}
.markdown-rendered ul,
.markdown-rendered ol {
margin-bottom: var(--space-md);
padding-left: var(--space-xl);
}
.markdown-rendered li {
margin-bottom: var(--space-xs);
line-height: 1.9;
}
.markdown-rendered .task-list {
list-style: none;
padding-left: var(--space-md);
}
.markdown-rendered .task-list-item label {
display: flex;
align-items: baseline;
gap: var(--space-sm);
cursor: pointer;
}
.markdown-rendered .task-list-item-content {
flex: 1;
min-width: 0;
}
.markdown-rendered .task-list-item input[type="checkbox"] {
cursor: pointer;
flex-shrink: 0;
margin: 0;
position: relative;
top: 1px;
}
.markdown-rendered pre {
background: var(--code-block-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: var(--space-md);
overflow-x: auto;
margin-bottom: var(--space-md);
font-family: var(--font-mono);
font-size: var(--text-sm);
line-height: 1.5;
}
/* Terminal-style header on fenced code blocks that declare a language:
traffic-light dots + the language name from the lang attribute. Pure CSS
(attr() in a pseudo-element) so it adds no DOM text — comment-anchor
matching against textContent never sees it. Mermaid blocks are excluded;
they get replaced by rendered diagrams. */
.markdown-rendered pre[lang]:not([lang="mermaid"]):not([lang="excalidraw"])::before {
content: attr(lang);
display: block;
position: sticky; /* stay pinned when the code scrolls horizontally */
left: 0;
margin: calc(-1 * var(--space-md)) calc(-1 * var(--space-md)) var(--space-md);
padding: 0.5em var(--space-md) 0.5em 4.6em;
background-color: var(--code-header-bg);
background-image:
radial-gradient(circle at 1.1em 50%, #ff5f57 0.3em, transparent 0.36em),
radial-gradient(circle at 2.2em 50%, #febc2e 0.3em, transparent 0.36em),
radial-gradient(circle at 3.3em 50%, #28c840 0.3em, transparent 0.36em);
border-bottom: 1px solid var(--color-border);
border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
color: var(--code-header-text);
font-size: 0.75rem;
line-height: 1.2;
letter-spacing: 0.04em;
user-select: none;
}
.markdown-rendered code {
font-family: var(--font-mono);
font-size: 0.875em;
}
.markdown-rendered :not(pre) > code {
background: var(--color-code-bg);
padding: 0.15em 0.35em;
border-radius: 3px;
}
/* Syntax highlighting — highlight.js token classes mapped onto the
--code-* theme variables (GitHub Light/Dark palettes above). Applied by
syntax_highlight_controller, which loads grammars on demand. */
.markdown-rendered .hljs-comment,
.markdown-rendered .hljs-quote {
color: var(--code-comment);
}
.markdown-rendered .hljs-keyword,
.markdown-rendered .hljs-doctag,
.markdown-rendered .hljs-template-tag,
.markdown-rendered .hljs-type {
color: var(--code-keyword);
}
.markdown-rendered .hljs-title,
.markdown-rendered .hljs-title.class_,
.markdown-rendered .hljs-title.function_,
.markdown-rendered .hljs-section {
color: var(--code-entity);
}
.markdown-rendered .hljs-number,
.markdown-rendered .hljs-literal,
.markdown-rendered .hljs-symbol,
.markdown-rendered .hljs-variable,
.markdown-rendered .hljs-template-variable,
.markdown-rendered .hljs-attr,
.markdown-rendered .hljs-attribute,
.markdown-rendered .hljs-built_in,
.markdown-rendered .hljs-operator,
.markdown-rendered .hljs-meta,
.markdown-rendered .hljs-selector-attr,
.markdown-rendered .hljs-selector-pseudo,
.markdown-rendered .hljs-link {
color: var(--code-constant);
}
.markdown-rendered .hljs-string,
.markdown-rendered .hljs-regexp,
.markdown-rendered .hljs-char.escape_ {
color: var(--code-string);
}
.markdown-rendered .hljs-name,
.markdown-rendered .hljs-tag,
.markdown-rendered .hljs-selector-tag,
.markdown-rendered .hljs-selector-id,
.markdown-rendered .hljs-selector-class,
.markdown-rendered .hljs-bullet {
color: var(--code-tag);
}
.markdown-rendered .hljs-addition {
color: var(--code-addition-fg);
background: var(--code-addition-bg);
}
.markdown-rendered .hljs-deletion {
color: var(--code-deletion-fg);
background: var(--code-deletion-bg);
}
.markdown-rendered .hljs-emphasis {
font-style: italic;
}
.markdown-rendered .hljs-strong {
font-weight: 600;
}
.markdown-rendered .mermaid-diagram {
position: relative;
margin-bottom: var(--space-md);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
cursor: default;
}
/* The diagram's scroll box, separate from the frame so the expand control
stays pinned to the corner instead of scrolling away with a wide
diagram. */
.markdown-rendered .mermaid-diagram__canvas {
display: flex;
justify-content: center;
overflow-x: auto;
padding: var(--space-md);
border-radius: inherit;
scrollbar-width: thin;
}
.markdown-rendered .mermaid-diagram__expand,
.markdown-rendered .image-frame__expand {
position: absolute;
top: var(--space-sm);
right: var(--space-sm);
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-xs);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
color: var(--color-text-muted);
cursor: zoom-in;
opacity: 0;
transition: opacity 0.15s ease;
}
.markdown-rendered .mermaid-diagram:hover .mermaid-diagram__expand,
.markdown-rendered .mermaid-diagram__expand:focus-visible,
.markdown-rendered .image-frame.is-expandable:hover .image-frame__expand,
.markdown-rendered .image-frame__expand:focus-visible {
opacity: 1;
}
/* An image's frame hugs the image, so the diagram's corner control sits on
the image itself. It lifts off the picture with a shadow, and appears
only once the image has loaded and is large enough to be worth it. */
.markdown-rendered .image-frame {
position: relative;
display: block;
width: fit-content;
max-width: 100%;
}
.markdown-rendered .image-frame__expand {
display: none;
box-shadow: var(--shadow-pop);
}
.markdown-rendered .image-frame.is-expandable .image-frame__expand {
display: flex;
}
/* The diagram's own SVG only — the expand button's icon is an svg inside
the same container, and it must keep its own 16px geometry. */
.markdown-rendered .mermaid-diagram__canvas > svg {
max-width: 100%;
height: auto;
}
/* Mermaid sizes node boxes assuming its own label line-height (~1.2); the
page's inherited line-height (1.6) makes wrapped labels taller than the
boxes mermaid measured, clipping the second line. Pin labels back to the
height mermaid laid out for. */
.markdown-rendered .mermaid-diagram foreignObject div,
.markdown-rendered .mermaid-diagram foreignObject span,
.markdown-rendered .mermaid-diagram foreignObject p,
.expander--diagram foreignObject div,
.expander--diagram foreignObject span,
.expander--diagram foreignObject p {
line-height: 1.2;
}
.markdown-rendered .mermaid-diagram--error {
border-color: var(--color-danger);
}
.markdown-rendered .mermaid-diagram__error-message {
display: block;
margin-bottom: var(--space-sm);
color: var(--color-danger);
font-family: var(--font-sans);
font-weight: 600;
}
.markdown-rendered blockquote {
border-left: 3px solid var(--color-border);
padding-left: var(--space-md);
color: var(--color-text-muted);
margin-bottom: var(--space-md);
}
.markdown-rendered table {
width: 100%;
border-collapse: collapse;
margin-bottom: var(--space-md);
}
.markdown-rendered th,
.markdown-rendered td {
border: 1px solid var(--color-border);
padding: var(--space-sm) var(--space-md);
text-align: left;
}
.markdown-rendered th {
background: var(--color-bg);
font-weight: 600;
}
/* ── Data grid: a markdown table in the document ──────────────────────────
The bare rules above still apply wherever a table isn't wrapped (deck
slides own their own tabular typography). Everywhere else the table sits
in a frame it can scroll inside, instead of a block it overflows. */
.markdown-rendered .data-grid {
position: relative;
margin-bottom: var(--space-md);
border: 1px solid var(--color-border);
border-radius: var(--radius);
background: var(--color-surface);
}
.markdown-rendered .data-grid__frame {
overflow: auto;
/* Tall tables scroll inside the frame so the header can pin; short ones
never reach this and are unaffected. */
max-height: 75vh;
border-radius: inherit;
scrollbar-width: thin;
}
.markdown-rendered .data-grid table {
/* Columns size to their content and the table still fills a narrow
frame. width:100% squeezed columns to nothing instead, which is how a
wide table ended up unreadable *and* off the page. */
width: max-content;
min-width: 100%;
margin: 0;
/* Collapsed borders don't travel with a sticky header — the header's own
border scrolls out from under it. Separate borders plus inset shadows
stay put. */
border-collapse: separate;
border-spacing: 0;
font-size: var(--text-sm);
}
.markdown-rendered .data-grid th,
.markdown-rendered .data-grid td {
border: none;
border-right: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
padding: var(--space-sm) var(--space-md);
text-align: left;
vertical-align: top;
min-width: 6ch;
max-width: 34ch;
overflow-wrap: anywhere;
}
.markdown-rendered .data-grid tr > *:last-child {
border-right: none;
}
.markdown-rendered .data-grid tbody tr:last-child > * {
border-bottom: none;
}
.markdown-rendered .data-grid thead th {
position: sticky;
top: 0;
z-index: 1;
background: var(--color-surface-muted);
white-space: nowrap;
font-weight: 600;
box-shadow: inset 0 -1px 0 var(--color-border);
}
.markdown-rendered .data-grid tbody tr:nth-child(even) > * {
background: var(--color-surface-muted);
}
/* Edge fades: the honest signal that the frame is holding more than it's
showing. Only lit when there really is more in that direction. */
.markdown-rendered .data-grid::before,
.markdown-rendered .data-grid::after {
content: "";
position: absolute;
top: 1px;
bottom: 1px;
width: 2rem;
z-index: 2;
pointer-events: none;
opacity: 0;
transition: opacity 0.15s ease;
}
.markdown-rendered .data-grid::before {
left: 1px;
border-radius: var(--radius) 0 0 var(--radius);
background: linear-gradient(to right, var(--color-surface), transparent);
}
.markdown-rendered .data-grid::after {
right: 1px;
border-radius: 0 var(--radius) var(--radius) 0;
background: linear-gradient(to left, var(--color-surface), transparent);
}
.markdown-rendered .data-grid.is-scrolled-start::before,
.markdown-rendered .data-grid.is-scrolled-end::after {
opacity: 1;
}
.markdown-rendered .data-grid__expand {
position: absolute;
top: var(--space-sm);
right: var(--space-sm);
z-index: 3;
display: none;
align-items: center;
justify-content: center;
padding: var(--space-xs);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
color: var(--color-text-muted);
box-shadow: var(--shadow-pop);
cursor: zoom-in;
opacity: 0;
transition: opacity 0.15s ease;
}
/* Offered only where it buys something — a four-column, five-row table is
already entirely visible. */
.markdown-rendered .data-grid.is-expandable .data-grid__expand {
display: flex;
}
.markdown-rendered .data-grid.is-expandable:hover .data-grid__expand,
.markdown-rendered .data-grid.is-expandable:focus-within .data-grid__expand,
.markdown-rendered .data-grid__expand:focus-visible {
opacity: 1;
}
.markdown-rendered .data-grid__expand:hover {
color: var(--color-text);
border-color: var(--color-border-strong);
}
/* Nothing hovers on a touch screen, and tap-to-expand isn't available
here — selecting table text is how a comment gets anchored. */
@media (hover: none) {
.markdown-rendered .data-grid.is-expandable .data-grid__expand {
opacity: 1;
}
}
.markdown-rendered hr {
border: none;
border-top: 1px solid var(--color-border);
margin: var(--space-xl) 0;
}
.markdown-rendered a {
color: var(--color-primary);
}
.markdown-rendered img {
max-width: 100%;
border-radius: var(--radius);
}
.markdown-rendered abbr[title] {
text-decoration: underline dotted;
text-underline-offset: 2px;
cursor: help;
}
.markdown-rendered details {
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: var(--space-sm) var(--space-md);
margin-bottom: var(--space-md);
}
.markdown-rendered details[open] {
padding-bottom: var(--space-md);
}
.markdown-rendered summary {
cursor: pointer;
font-weight: 600;
margin: calc(var(--space-sm) * -1) calc(var(--space-md) * -1);
padding: var(--space-sm) var(--space-md);
}
.markdown-rendered details[open] summary {
border-bottom: 1px solid var(--color-border);
margin-bottom: var(--space-md);
}
.markdown-rendered .footnote-ref a,
.markdown-rendered sup a[data-footnote-ref] {
text-decoration: none;
padding: 1px 4px;
border-radius: 999px;
background: var(--color-primary-light);
font-weight: 600;
}
.markdown-rendered .reference-anchor--section {
text-decoration: underline dotted;
text-underline-offset: 3px;
}
.markdown-rendered .reference-anchor:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
border-radius: 2px;
}
.markdown-rendered [id^="section-"] {
scroll-margin-top: calc(var(--nav-height) + var(--space-lg));
}
.markdown-rendered section[data-footnotes] {
margin-top: var(--space-xl);
border-top: 1px solid var(--color-border);
padding-top: var(--space-md);
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.markdown-rendered section[data-footnotes] .footnotes-title {
margin: 0 0 var(--space-md);
color: var(--color-text);
font-size: var(--text-lg);
}
.markdown-rendered section[data-footnotes] p {
margin-bottom: var(--space-xs);
}
.markdown-rendered a[data-footnote-backref] {
text-decoration: none;
}
/* Citation and internal-section previews. A single manual popover is filled
from the rendered target already on the page, so it opens without a fetch
and can coexist with comment popovers. */
.reference-preview {
display: none;
position: fixed;
inset: auto;
width: min(420px, calc(100vw - 32px));
max-height: min(55vh, 460px);
margin: 0;
padding: var(--space-md);
overflow-y: auto;
color: var(--color-text);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
z-index: 210;
}
.reference-preview:popover-open {
display: block;
}
/* Fallback for browsers without the Popover API. Kept as its own selector so
an older parser rejecting :popover-open does not discard this rule too. */
.reference-preview--open {
display: block;
}
.reference-preview__close {
display: inline-flex;
position: absolute;
top: var(--space-sm);
right: var(--space-sm);
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 0;
color: var(--color-text-muted);
background: transparent;
border: none;
border-radius: 50%;
font: inherit;
font-size: var(--text-lg);
cursor: pointer;
}
.reference-preview__close:hover {
color: var(--color-text);
background: var(--color-bg-muted);
}
.reference-preview__title {
display: block;
padding-right: calc(24px + var(--space-sm));
margin-bottom: var(--space-sm);
font-size: var(--text-sm);
line-height: 1.4;
}
.reference-preview__title[hidden] {
display: none;
}
.reference-preview__body {
padding-right: calc(24px + var(--space-sm));
color: var(--color-text-muted);
font-size: var(--text-sm);
line-height: 1.55;
}
.reference-preview__body p {
margin: 0;
}
.reference-preview__body a {
color: var(--color-primary);
overflow-wrap: anywhere;
}
.reference-preview__body .reference-preview__source {
display: flex;
flex-direction: column;
gap: 2px;
margin-top: var(--space-sm);
padding: var(--space-sm);
color: inherit;
background: var(--color-bg-muted);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
text-decoration: none;
}
.reference-preview__body .reference-preview__source:hover {
border-color: var(--color-primary);
}
.reference-preview__source-title {
color: var(--color-text);
font-weight: 600;
}
.reference-preview__source-meta {
color: var(--color-text-muted);
font-size: var(--text-xs);
}
.reference-preview__body .citation-source__content {
display: flex;
flex-direction: column;
gap: 2px;
}
.reference-preview__body .citation-source__title {
color: var(--color-text);
font-weight: 600;
}
.reference-preview__body .citation-source__meta {
color: var(--color-text-muted);
font-size: var(--text-xs);
}
.reference-preview--sheet {
top: auto !important;
left: 0 !important;
right: 0;
bottom: 0;
width: 100%;
max-height: 55vh;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
border-bottom: none;
}
/* Comment popover (appears on text selection) */
.comment-popover {
position: absolute;
z-index: 10;
animation: popover-fade-in 0.15s ease-out;
}
.comment-popover__action {
display: inline-flex;
align-items: center;
gap: 0.4rem;
min-height: 2.1rem;
padding: 0.25rem 0.45rem 0.25rem 0.3rem;
border: 1px solid var(--card-edge);
border-radius: 999px;
background: color-mix(in srgb, var(--color-surface) 92%, transparent);
box-shadow: var(--shadow-lg);
color: var(--color-text);
font: 500 0.75rem/1 var(--font-sans);
cursor: pointer;
transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.comment-popover__action:hover {
background: var(--color-interaction-hover-bg);
box-shadow: var(--shadow-pop);
transform: translateY(-1px);
}
.comment-popover__action:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.comment-popover__icon {
width: 1.15rem;
height: 1.15rem;
flex: none;
}
.comment-popover kbd {
padding: 0.15rem 0.3rem;
border: 1px solid var(--card-edge);
border-radius: 0.3rem;
background: color-mix(in srgb, var(--color-text) 4%, transparent);
color: var(--color-text-muted);
font-family: var(--font-mono);
font-size: 0.65rem;
}
@keyframes popover-fade-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
/* Anchor text highlights */
.anchor-highlight {
cursor: pointer;
transition: background 0.2s;
color: inherit;
}
.anchor-highlight--open {
background: var(--color-highlight-open-bg);
border-bottom: 2px solid var(--color-highlight-open-border);
cursor: pointer;
pointer-events: auto;
}
.anchor-highlight--open:hover {
background: var(--color-highlight-open-hover-bg);
}
.anchor-highlight--resolved {
background: none;
border-bottom: 1px dashed var(--color-text-muted);
cursor: pointer;
pointer-events: auto;
}
.plan-layout--hide-resolved .anchor-highlight--resolved {
border-bottom: none;
cursor: default;
pointer-events: none;
}
.anchor-highlight--active {
background: var(--color-highlight-active-bg);
border-bottom: 2px solid var(--color-primary);
outline: 2px solid var(--color-highlight-active-outline);
outline-offset: 1px;
}
/* Comment form anchor quote */
.comment-form__anchor {
margin-bottom: var(--space-sm);
}
.comment-form__quote {
border-left: 3px solid var(--color-quote-info-border);
padding: var(--space-xs) var(--space-sm);
margin: var(--space-xs) 0 0 0;
font-size: var(--text-sm);
color: var(--color-text-muted);
background: var(--color-quote-info-bg);
border-radius: 0 var(--radius) var(--radius) 0;
}
/* Server-side create errors (e.g. an anchor that doesn't resolve).
Empty until a failed submit fills it, so it takes no space at rest. */
.comment-form__error {
color: var(--color-danger);
}
.comment-form__error:not(:empty) {
margin-bottom: var(--space-sm);
}
.comment-form__actions {
display: flex;
gap: var(--space-sm);
}
/* Thread anchor quote */
.comment-thread__anchor-quote {
border-left: 3px solid var(--color-quote-info-border);
padding: var(--space-xs) var(--space-sm);
margin: var(--space-xs) 0 0 0;
font-size: var(--text-sm);
color: var(--color-text-muted);
background: var(--color-quote-info-bg);
border-radius: 0 var(--radius) var(--radius) 0;
}
/* Plan layout */
.plan-layout {
position: relative;
display: flex;
gap: 0;
}
.plan-layout__content {
position: relative;
flex: 1;
min-width: 0;
}
#plan-threads {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
pointer-events: none;
}
#plan-threads .thread-popover {
pointer-events: auto;
}
.detached-comments { margin-top: 28px; padding: 16px; border: 1px solid var(--color-border); border-radius: 10px; color: var(--color-text-muted); font-size: 13px; }
.detached-comments[hidden] { display: none; }
.detached-comments strong { display: block; color: var(--color-text); font-size: 14px; }
.detached-comments p { margin: 4px 0 10px; }
.detached-comments button { display: block; max-width: 100%; margin-top: 6px; padding: 6px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; border-radius: 5px; background: var(--color-surface-muted); color: var(--color-text); cursor: pointer; }
.detached-comments button:hover { color: var(--color-primary); }
.plan-layout--hide-resolved .detached-comments--all-resolved,
.plan-layout--hide-resolved .detached-comments__resolved { display: none; }
/* Comment form */
.comment-form {
position: absolute;
z-index: 100;
width: 360px;
padding: var(--space-md);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
}
.comment-form .form-group {
margin-bottom: var(--space-sm);
}
.comment-form textarea {
width: 100%;
padding: var(--space-sm);
font-family: var(--font-sans);
font-size: var(--text-sm);
border: 1px solid var(--color-border);
border-radius: var(--radius);
background: var(--color-input-bg);
color: var(--color-text);
resize: vertical;
min-height: 4rem;
}
.comment-form textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-focus-ring);
}
/* On phones the composer is a fixed, full-width bottom sheet — an
absolutely-positioned box runs off the viewport, and the software
keyboard fights it (text_selection_controller adds this class). */
.comment-form--sheet {
position: fixed;
top: auto !important;
left: 0 !important;
right: 0;
bottom: 0;
width: 100%;
max-height: 55vh;
overflow-y: auto;
margin: 0;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
border-bottom: none;
z-index: 300;
}
/* Comment thread */
.comment-thread {
padding: var(--space-md);
}
.comment-thread__header {
margin-bottom: var(--space-sm);
}
.comment-thread__meta {
display: flex;
gap: var(--space-xs);
flex-wrap: wrap;
align-items: center;
}
.comment-thread__comments {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
/* Individual comment */
.comment {
padding: var(--space-sm) 0;
border-bottom: 1px solid var(--color-border);
}
.comment:last-child {
border-bottom: none;
}
.comment__header {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.3rem;
margin-bottom: var(--space-xs);
}
.comment__agent-avatar {
width: 1.75rem;
height: 1.75rem;
flex-shrink: 0;
border-radius: 7px;
}
.comment__agent-name {
color: var(--color-agent);
}
.comment__agent-owner {
padding: 1px 6px;
border-radius: 999px;
background: var(--color-agent-bg);
color: var(--color-agent);
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.02em;
white-space: nowrap;
}
.comment__body .markdown-rendered {
font-size: var(--text-sm);
}
.comment__body .markdown-rendered p:last-child {
margin-bottom: 0;
}
/* Comment thread reply */
.comment-thread__reply {
margin-top: var(--space-sm);
padding-top: var(--space-sm);
border-top: 1px solid var(--color-border);
}
.comment-thread__reply textarea {
width: 100%;
padding: var(--space-sm);
font-family: var(--font-sans);
font-size: var(--text-sm);
border: 1px solid var(--color-border);
border-radius: var(--radius);
background: var(--color-input-bg);
color: var(--color-text);
resize: vertical;
min-height: 3rem;
}
.comment-thread__reply textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-focus-ring);
}
.comment-thread__reply .form-group {
margin-bottom: var(--space-xs);
}
/* Comment thread actions */
.comment-thread__actions {
display: flex;
gap: var(--space-xs);
margin-top: var(--space-sm);
padding-top: var(--space-sm);
border-top: 1px solid var(--color-border);
}
/* Small button variant */
.btn--sm {
min-height: 1.75rem;
padding: 0 0.625rem;
font-size: 0.8125rem;
}
/* Token reveal */
.token-reveal {
background: var(--color-success);
color: var(--color-text-inverse);
padding: var(--space-lg);
border-radius: var(--radius);
margin-bottom: var(--space-lg);
}
.token-reveal h3 {
margin: 0 0 var(--space-xs) 0;
}
.token-reveal p {
margin: 0 0 var(--space-sm) 0;
opacity: 0.9;
}
.token-reveal__value {
background: var(--color-overlay);
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius);
font-family: var(--font-mono);
font-size: var(--text-sm);
word-break: break-all;
user-select: all;
}
.token-reveal__value code {
color: var(--color-text-inverse);
background: none;
}
/* Data table */
.data-table {
width: 100%;
border-collapse: collapse;
}
.data-table th,
.data-table td {
padding: var(--space-sm) var(--space-md);
text-align: left;
border-bottom: 1px solid var(--color-border);
}
.data-table th {
font-family: var(--font-mono);
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--color-text-muted);
font-size: 0.75rem;
background: var(--color-surface-muted);
}
.data-table__row--muted td {
opacity: 0.5;
}
/* Form inline */
.form-inline {
display: flex;
align-items: flex-end;
gap: var(--space-md);
flex-wrap: wrap;
}
.form-inline .form-group {
flex: 1;
min-width: 200px;
margin-bottom: 0;
}
.settings-section-subtitle {
margin-bottom: var(--space-md);
color: var(--color-text-muted);
}
/* Honor [hidden] even on elements with explicit display rules (.btn etc.) */
[hidden] {
display: none !important;
}
/* Settings row */
.settings-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
}
.settings-row__label {
font-weight: 600;
color: var(--color-text);
}
.settings-row__main {
flex: 1 1 auto;
min-width: 0;
}
.settings-row__hint {
font-size: var(--text-sm);
color: var(--color-text-muted);
margin-top: var(--space-xs);
line-height: 1.5;
}
.settings-row__hint--error {
color: var(--color-danger);
}
.settings-row__action {
flex: 0 1 24rem;
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--space-xs);
}
.settings-row__status {
max-width: 100%;
overflow-wrap: anywhere;
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.settings-subsection {
margin-top: var(--space-md);
padding-top: var(--space-md);
border-top: 1px solid var(--color-border);
}
.settings-subsection__heading {
font-size: var(--text-sm);
font-weight: 500;
color: var(--color-text-muted);
text-transform: uppercase;
font-family: var(--font-mono);
letter-spacing: 0.02em;
margin-bottom: var(--space-sm);
}
.settings-subsection__hint {
font-size: var(--text-sm);
color: var(--color-text-muted);
margin-top: var(--space-sm);
margin-bottom: 0;
}
.device-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.device-list__item {
padding: var(--space-sm) var(--space-md);
background: var(--color-surface-alt, var(--color-surface));
border: 1px solid var(--color-border);
border-radius: var(--radius);
}
.device-list__name {
font-weight: 500;
color: var(--color-text);
font-size: var(--text-sm);
}
.device-list__meta {
font-size: var(--text-xs);
color: var(--color-text-muted);
margin-top: var(--space-xs);
}
/* Segmented control (theme switcher, push-to-talk key) */
.segmented {
display: inline-flex;
/* The control is the row's point; the explanation next to it is what
gives way when the window is narrow. */
flex: 0 0 auto;
border: 1px solid var(--color-border);
border-radius: var(--radius);
overflow: hidden;
}
.segmented__option {
cursor: pointer;
margin: 0;
}
.segmented__option input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.segmented__btn {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
/* Segments are labels for one choice each — a wrapped one reads as two
options and leaves the control ragged. */
white-space: nowrap;
padding: var(--space-sm) var(--space-md);
font-size: var(--text-sm);
font-weight: 500;
color: var(--color-text-muted);
transition: background 0.15s, color 0.15s;
border-right: 1px solid var(--color-border);
}
.segmented__option:last-child .segmented__btn {
border-right: none;
}
.segmented__btn svg {
flex-shrink: 0;
}
.segmented__option:hover .segmented__btn {
background: var(--color-bg-muted);
color: var(--color-text);
}
.segmented__option:has(input:checked) .segmented__btn {
background: var(--color-primary-light);
color: var(--color-primary);
font-weight: 600;
}
/* On a phone there is no width to negotiate over, so the label goes above
the control and the strip takes the whole row. Side by side, the four
push-to-talk options either run off the screen or crush the explanation
into one word per line.
Segments share the leftover width rather than splitting it evenly:
"Ctrl+Space" has no space to break at, so an equal quarter of a 320px
screen clips it, while sized-to-content segments fit with room over. */
@media (max-width: 640px) {
.settings-row {
flex-direction: column;
align-items: stretch;
gap: var(--space-sm);
}
.settings-row__action {
flex-basis: auto;
align-items: stretch;
}
.segmented {
display: flex;
width: 100%;
/* Below about 350px even sized-to-content segments run out of room,
so the strip takes a second line rather than hiding the last
option off the edge of the screen. */
flex-wrap: wrap;
}
.segmented__option {
flex: 1 1 auto;
}
/* A wrapped row needs a rule above it, which the horizontal strip
never did. */
.segmented__btn {
border-top: 1px solid var(--color-border);
margin-top: -1px;
}
.segmented__btn {
justify-content: center;
width: 100%;
padding: var(--space-sm) var(--space-xs);
font-size: var(--text-xs);
}
}
/* Thread popover data containers (hidden, provide data for JS) */
.thread-popover-data {
display: contents;
}
/* Thread popover (native HTML Popover API) */
.thread-popover {
position: fixed;
margin: 0;
padding: var(--space-md);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
width: 380px;
max-height: 60vh;
overflow-y: auto;
z-index: 200;
}
.thread-popover::backdrop {
background: transparent;
}
/* Thread popovers become a bottom sheet on phones (same treatment as the
composer — set by the positioning code, not a media query, because the
inline top/left must also be cleared). */
.thread-popover--sheet {
top: auto !important;
left: 0 !important;
right: 0;
bottom: 0;
width: 100%;
max-height: 60vh;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
border-bottom: none;
}
.thread-popover__header {
display: flex;
gap: var(--space-xs);
align-items: center;
margin-bottom: var(--space-sm);
}
.thread-popover__permalink {
margin-left: auto;
}
.thread-popover__quote {
border-left: 3px solid var(--color-quote-info-border);
padding: var(--space-xs) var(--space-sm);
margin: 0 0 var(--space-sm) 0;
font-size: var(--text-sm);
color: var(--color-text-muted);
background: var(--color-quote-info-bg);
border-radius: 0 var(--radius) var(--radius) 0;
}
.thread-popover__comments {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.thread-popover__reply {
margin-top: var(--space-sm);
padding-top: var(--space-sm);
border-top: 1px solid var(--color-border);
}
.thread-popover__reply textarea {
width: 100%;
padding: var(--space-sm);
font-family: var(--font-sans);
font-size: var(--text-sm);
border: 1px solid var(--color-border);
border-radius: var(--radius);
background: var(--color-input-bg);
color: var(--color-text);
resize: vertical;
min-height: 3rem;
}
.thread-popover__reply textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-focus-ring);
}
.thread-popover__reply .form-group {
margin-bottom: var(--space-xs);
}
.thread-popover__actions {
display: flex;
gap: var(--space-xs);
margin-top: var(--space-sm);
padding-top: var(--space-sm);
border-top: 1px solid var(--color-border);
}
/* Viewer-specific thread actions.
Broadcasts re-render thread partials for every subscriber with no
current_user, so these are rendered unconditionally and hidden by default.
The coplan--viewer-role controller tags each thread with the viewer's role
(.viewer-is-plan-author / .viewer-is-thread-author) to reveal them. */
.comment-actions--owner {
display: none;
}
.viewer-is-plan-author .comment-actions--owner,
.viewer-is-thread-author .comment-actions--owner {
display: flex;
}
/* Content navigation sidebar */
.content-nav {
position: sticky;
top: calc(var(--nav-height) + var(--space-lg));
align-self: flex-start;
width: 220px;
flex-shrink: 0;
max-height: calc(100vh - var(--nav-height) - var(--space-xl) * 2);
/* The nav is the scroll container — a long outline must not push the
back-matter links (References/Attachments) below the sticky bound
where no amount of page scrolling reaches them. */
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--color-border) transparent;
transition: width 0.2s ease, opacity 0.2s ease;
margin-right: var(--space-lg);
}
.content-nav--hidden {
width: 0;
opacity: 0;
overflow: hidden;
margin-right: 0;
}
/* No label anymore — the lone collapse control floats into the top-right
corner so the outline starts at the very top (no empty header band where
"Contents" used to sit) and the first item's text flows beside it. */
.content-nav__header {
float: right;
margin-left: var(--space-xs);
}
.content-nav__toggle {
background: none;
border: none;
cursor: pointer;
color: var(--color-text-muted);
padding: 2px;
font-size: var(--text-sm);
line-height: 1;
border-radius: var(--radius);
transition: color 0.15s;
}
.content-nav__toggle:hover {
color: var(--color-text);
}
.content-nav__list {
list-style: none;
padding: 0;
margin: 0;
/* No inner scroll region: the whole nav scrolls (see .content-nav), so
the outline and the back-matter links share one scroll. */
}
.content-nav__item {
margin: 0;
}
.content-nav__item--remote-change .content-nav__link {
animation: content-nav-remote-change 2.6s ease-out;
}
@keyframes content-nav-remote-change {
0% { background: color-mix(in srgb, var(--color-primary) 22%, transparent); color: var(--color-primary); }
100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
.content-nav__item--remote-change .content-nav__link { animation: none; }
}
.content-nav__item--h1 {
/* top level — no indent */
}
.content-nav__item--h2 {
padding-left: var(--space-md);
}
.content-nav__item--h3 {
padding-left: var(--space-xl);
}
.content-nav__link {
display: flex;
align-items: center;
gap: var(--space-xs);
padding: 3px var(--space-sm);
font-size: 0.8rem;
line-height: 1.4;
color: var(--color-text-muted);
text-decoration: none;
border-radius: var(--radius);
border-left: 2px solid transparent;
transition: color 0.15s, border-color 0.15s, background 0.15s;
word-break: break-word;
}
.content-nav__link:hover {
color: var(--color-text);
background: var(--color-bg);
text-decoration: none;
}
.content-nav__link--active {
color: var(--color-primary);
border-left-color: var(--color-primary);
font-weight: 600;
}
.content-nav__link-text {
flex: 1;
min-width: 0;
}
.content-nav__badge {
flex-shrink: 0;
font-size: 0.65rem;
font-weight: 600;
min-width: 16px;
height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
color: var(--color-text-inverse);
line-height: 1;
}
.content-nav__badge--open {
background: var(--color-status-considering);
}
/* Toggle button when sidebar is hidden — shown outside the sidebar */
.content-nav-show-btn {
position: sticky;
top: calc(var(--nav-height) + var(--space-lg));
align-self: flex-start;
flex-shrink: 0;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: var(--space-xs) var(--space-sm);
cursor: pointer;
color: var(--color-text-muted);
font-size: var(--text-sm);
box-shadow: var(--shadow);
transition: color 0.15s, box-shadow 0.15s;
margin-right: var(--space-sm);
display: none;
white-space: nowrap;
}
.content-nav-show-btn:hover {
color: var(--color-text);
box-shadow: var(--shadow-pop);
}
.content-nav-show-btn kbd {
font-family: var(--font-mono);
font-size: 0.7rem;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 3px;
padding: 0 4px;
color: var(--color-text-muted);
}
.content-nav--hidden + .content-nav-show-btn {
display: block;
}
/* The Present control above a slideshow's deck. The show itself is
deck.css territory (.deck--presenting); this is host chrome. */
.deck-toolbar {
display: flex;
justify-content: flex-end;
margin-bottom: var(--space-sm);
}
.deck-toolbar__present {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: var(--space-xs) var(--space-sm);
cursor: pointer;
color: var(--color-text-muted);
font-size: var(--text-sm);
transition: color 0.15s, box-shadow 0.15s;
}
.deck-toolbar__present:hover {
color: var(--color-text);
box-shadow: var(--shadow-pop);
}
.deck-toolbar__present kbd {
font-family: var(--font-mono);
font-size: 0.7rem;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 3px;
padding: 0 4px;
color: var(--color-text-muted);
}
.deck-region { margin-block: var(--space-lg); outline: none; }
.deck-region:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.deck-region .deck-slide:not(.deck-slide--current) { display: none; }
.deck-region .deck-toolbar { align-items: center; gap: var(--space-xs); }
.deck-toolbar__step { border: 1px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius); color: var(--color-text-muted); cursor: pointer; padding: var(--space-xs) var(--space-sm); }
.deck-toolbar__step:hover { color: var(--color-text); }
.deck-toolbar__step--previous::before { content: "←"; }
.deck-toolbar__step--next::before { content: "→"; }
.deck-toolbar__count::before { content: attr(data-count); color: var(--color-text-muted); font-size: var(--text-sm); }
.deck-toolbar__present::before { content: "▶ Present"; }
.deck-toolbar button:disabled { cursor: default; opacity: 0.45; }
.deck-toolbar button:disabled:hover { color: var(--color-text-muted); box-shadow: none; }
/* Add scroll-margin to headings — and the plan's own masthead header — so
they clear the sticky nav. The nav-title control scrolls to the very top
in JS; this keeps a no-JS #plan-header jump landing below the bar too. */
.markdown-rendered h1,
.markdown-rendered h2,
.markdown-rendered h3,
.markdown-rendered h4,
.markdown-rendered h5,
.markdown-rendered h6,
.page-header--plan {
scroll-margin-top: calc(var(--nav-height) + var(--space-lg));
}
/* Inbox badge */
.inbox-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
font-size: 0.7rem;
font-weight: 600;
color: var(--color-text-inverse);
background: var(--color-danger);
border-radius: 9999px;
line-height: 1;
}
.inbox-badge--hidden {
display: none;
}
/* Inbox dropdown */
.inbox-dropdown {
position: relative;
display: inline-flex;
}
.site-nav__bell {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
background: none;
border: none;
cursor: pointer;
color: var(--color-text-muted);
padding: var(--space-xs);
border-radius: var(--radius);
transition: color 0.15s, background 0.15s;
}
.site-nav__bell:hover {
color: var(--color-text);
background: var(--color-bg);
}
.site-nav__bell .inbox-badge {
position: absolute;
top: -2px;
right: -4px;
font-size: 0.6rem;
min-width: 16px;
height: 16px;
padding: 0 4px;
}
/* Floating inbox panel. Solid, not glass: it lives inside the nav,
whose own backdrop-filter blocks a descendant's backdrop-filter from
sampling the page — translucency here would just let the page bleed
through unblurred. */
.inbox-panel {
position: absolute;
top: calc(100% + var(--space-sm));
right: 0;
width: 420px;
max-height: 480px;
background: var(--color-surface);
border: 1px solid var(--glass-edge);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
z-index: 200;
overflow: hidden;
display: flex;
flex-direction: column;
}
.inbox-panel__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-sm) var(--space-md);
border-bottom: 1px solid var(--color-border);
flex-shrink: 0;
}
.inbox-panel__title {
font-weight: 600;
font-size: var(--text-sm);
}
.inbox-panel__list {
overflow-y: auto;
flex: 1;
}
.inbox-panel__empty {
padding: var(--space-xl) var(--space-md);
text-align: center;
color: var(--color-text-muted);
font-size: var(--text-sm);
}
.inbox-panel__loading {
padding: var(--space-xl) var(--space-md);
text-align: center;
color: var(--color-text-muted);
font-size: var(--text-sm);
}
/* Inbox rows */
.inbox-row {
display: flex;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
border-bottom: 1px solid var(--color-border);
text-decoration: none;
color: var(--color-text);
transition: background 0.1s;
}
.inbox-row:hover {
background: var(--color-bg);
text-decoration: none;
}
.inbox-row--unread {
background: var(--color-inbox-unread-bg);
}
.inbox-row--unread:hover {
background: var(--color-inbox-unread-hover-bg);
}
.inbox-row__indicator {
width: 8px;
flex-shrink: 0;
padding-top: 6px;
}
.inbox-row__dot {
display: block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-primary);
}
.inbox-row__main {
flex: 1;
min-width: 0;
}
.inbox-row__top {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-sm);
margin-bottom: 2px;
}
.inbox-row__author {
font-weight: 600;
font-size: var(--text-sm);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.inbox-row--unread .inbox-row__author {
color: var(--color-text);
}
.inbox-row__time {
font-size: 0.75rem;
color: var(--color-text-muted);
white-space: nowrap;
flex-shrink: 0;
}
.inbox-row__body {
font-size: var(--text-sm);
color: var(--color-text);
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.inbox-row:not(.inbox-row--unread) .inbox-row__body {
color: var(--color-text-muted);
}
.inbox-row__footer {
display: flex;
align-items: center;
gap: var(--space-xs);
margin-top: 2px;
}
.inbox-row__plan {
font-size: 0.75rem;
color: var(--color-text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Notifications full page (fallback) */
.notifications-list {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.notifications-list__item {
transition: opacity 0.15s;
}
.notifications-list__item--read {
opacity: 0.6;
}
.notifications-list__header {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-bottom: var(--space-xs);
}
.notifications-list__plan-title {
font-size: var(--text-lg);
font-weight: 600;
color: var(--color-text);
}
.notifications-list__plan-title:hover {
color: var(--color-primary);
}
.notifications-list__anchor {
font-style: italic;
color: var(--color-text-muted);
font-size: var(--text-sm);
}
.notifications-list__comment {
margin-top: var(--space-xs);
color: var(--color-text);
}
.notifications-list__meta {
margin-top: var(--space-sm);
}
/* Plan document + footnotes: one page, no tabs. The document is the main
glass card; references and attachments follow like back matter — same
page, quieter surface. */
/* Back matter lives inside the content column, closing out the document
after a rule — no card-within-card, no space below the sidebar. Empty
sections are a single quiet line. */
.plan-footnotes {
margin-top: var(--space-2xl);
padding-top: var(--space-lg);
border-top: 1px solid var(--color-border);
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
.plan-footnote {
scroll-margin-top: calc(var(--nav-height) + var(--space-lg));
}
.plan-footnote__header {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.plan-footnote__title {
margin: 0;
font-size: var(--text-sm);
font-weight: 500;
text-transform: uppercase;
font-family: var(--font-mono);
letter-spacing: 0.02em;
color: var(--color-text-muted);
}
.section-count {
font-size: 0.75rem;
color: var(--color-text-muted);
font-weight: 400;
}
/* The round "+" leading a footnote section — one click, opens the add
modal. Icon only; the section title is right beside it. */
.section-add {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 0;
background: var(--color-bg-muted);
border: 1px solid var(--color-border);
border-radius: 50%;
color: var(--color-text-muted);
cursor: pointer;
transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.section-add:hover {
color: var(--color-primary);
border-color: var(--color-primary);
background: var(--color-bg);
}
/* Back-matter links at the bottom of the document outline. */
.content-nav__list--footnotes {
margin-top: var(--space-sm);
padding-top: var(--space-sm);
border-top: 1px solid var(--color-border);
}
.content-nav__footnote-link {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-xs);
padding: 2px var(--space-sm);
font-size: var(--text-xs);
color: var(--color-text-muted);
text-decoration: none;
border-radius: var(--radius);
}
.content-nav__footnote-link:hover {
color: var(--color-text);
background: var(--color-bg-muted);
text-decoration: none;
}
/* Folder-picker navigator (the Save / Move-to-folder popover) */
.folder-picker__plan {
margin: 0 0 var(--space-sm);
}
.folder-picker__tree {
list-style: none;
margin: 0;
padding: 0;
max-height: 20rem;
overflow-y: auto;
}
.folder-picker__tree--nested {
padding-left: var(--space-md);
max-height: none;
overflow: visible;
}
.folder-picker__option {
display: flex;
align-items: center;
gap: var(--space-xs);
width: 100%;
padding: 5px var(--space-sm);
background: none;
border: none;
border-radius: var(--radius);
color: var(--color-text);
font-size: var(--text-sm);
font-family: inherit;
text-align: left;
cursor: pointer;
}
.folder-picker__option:hover {
background: var(--color-bg-muted);
color: var(--color-primary);
}
.folder-picker__icon {
flex-shrink: 0;
color: var(--color-text-muted);
}
.folder-picker__name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.folder-picker__check {
visibility: hidden;
color: var(--color-primary);
}
.folder-picker__option--current .folder-picker__check {
visibility: visible;
}
.folder-picker__option--current {
font-weight: 600;
}
/* "Remove from library" — shown in the navigator only when the trigger
was already saved. Letting go is a labeled, deliberate choice down
here, never a surprise toggle on the Save button itself. */
.folder-picker__remove {
display: flex;
align-items: center;
gap: var(--space-xs);
width: 100%;
margin-top: var(--space-sm);
padding: 5px var(--space-sm);
border: none;
border-top: 1px solid var(--color-border);
border-radius: 0 0 var(--radius) var(--radius);
background: none;
color: var(--color-text-muted);
font-size: var(--text-sm);
font-family: inherit;
text-align: left;
cursor: pointer;
padding-top: calc(5px + var(--space-xs));
}
.folder-picker__remove:hover {
color: var(--color-danger);
background: var(--color-danger-soft);
}
/* History page (the plan's time machine) */
.history-page {
padding: var(--space-lg);
}
.history-back {
display: inline-flex;
align-items: center;
padding: 4px;
border-radius: var(--radius);
color: var(--color-text-muted);
}
.history-back:hover {
color: var(--color-primary);
background: var(--color-bg-muted);
}
.history-title-link {
color: inherit;
text-decoration: none;
}
.history-title-link:hover {
color: var(--color-primary);
}
/* References section */
/* Empty attachment copy hangs under the header, indented past the round "+". */
.attachments-section {
padding: 0 0 0 calc(24px + var(--space-sm));
}
.plan-footnote__empty {
margin: var(--space-xs) 0 0;
font-size: var(--text-sm);
color: var(--color-text-muted);
}
#plan-citations:empty {
display: none;
}
.reference-citations {
margin-top: var(--space-md);
color: var(--color-text-muted);
font-size: var(--text-sm);
}
#footnote-references {
counter-reset: plan-reference;
}
.reference-citations > ol {
display: grid;
gap: var(--space-lg);
list-style: none;
margin: 0;
padding: 0;
}
.reference-citations > ol > li {
position: relative;
padding: 0 0 0 calc(24px + var(--space-md));
line-height: 1.55;
counter-increment: plan-reference;
scroll-margin-top: calc(var(--nav-height) + var(--space-lg));
}
.reference-citations > ol > li::before,
.references-list__item::before {
content: counter(plan-reference) ".";
position: absolute;
left: 0;
width: 24px;
color: var(--color-text-muted);
font-weight: 600;
text-align: right;
}
.reference-citations p {
margin: 0;
}
.reference-citations a[data-footnote-backref] {
position: absolute;
top: 0;
right: 0;
color: var(--color-text-muted);
text-decoration: none;
opacity: 0;
transition: opacity 0.15s, color 0.15s;
}
.reference-citations > ol > li:hover a[data-footnote-backref],
.reference-citations a[data-footnote-backref]:focus-visible {
color: var(--color-primary);
opacity: 1;
}
.citation-source--inline {
color: var(--color-primary);
}
.citation-source--block {
display: inline;
color: inherit;
text-decoration: none;
}
.citation-source--block:hover .citation-source__title {
color: var(--color-primary);
text-decoration: underline;
text-underline-offset: 2px;
}
.citation-source__content {
display: inline;
}
.citation-source__title {
color: var(--color-primary);
font-weight: 500;
}
.citation-source__meta {
color: var(--color-text-muted);
font-size: var(--text-xs);
}
.reference-citations .citation-source__meta::before {
content: " · ";
}
.references-list {
list-style: none;
padding: 0;
margin: var(--space-sm) 0 0;
}
.references-list__item {
display: flex;
align-items: flex-start;
position: relative;
padding: var(--space-xs) 0 var(--space-xs) calc(24px + var(--space-md));
counter-increment: plan-reference;
}
.references-list__item::before {
top: var(--space-xs);
font-size: var(--text-sm);
}
.references-list__content {
flex: 1;
min-width: 0;
}
.references-list__link {
display: inline;
color: var(--color-primary);
font-size: var(--text-sm);
font-weight: 500;
line-height: 1.35;
overflow-wrap: anywhere;
text-decoration: none;
}
.references-list__link:hover {
color: var(--color-primary);
text-decoration: underline;
text-underline-offset: 2px;
}
.references-list__meta {
display: inline;
color: var(--color-text-muted);
font-size: var(--text-xs);
}
.references-list__meta::before {
content: " · ";
}
.references-list__remove {
flex-shrink: 0;
background: none;
border: none;
color: var(--color-text-muted);
cursor: pointer;
padding: 2px 6px;
font-size: var(--text-sm);
border-radius: var(--radius);
opacity: 0;
transition: color 0.15s, background 0.15s, opacity 0.15s;
}
.references-list__item:hover .references-list__remove,
.references-list__remove:focus-visible {
opacity: 1;
}
.references-list__remove:hover {
color: var(--color-danger);
background: var(--color-bg);
}
@media (hover: none) {
.references-list__remove {
opacity: 1;
}
}
.references-section__header {
margin-bottom: var(--space-md);
}
/* Reusable "add" lightbox (references, attachments). Same glass treatment
as the search modal; the Popover API supplies backdrop and dismissal. */
.add-modal {
position: fixed;
top: 14vh;
left: 50%;
transform: translateX(-50%);
width: min(440px, 92vw);
max-height: 72vh;
padding: 0;
margin: 0;
border: 1px solid var(--glass-edge);
border-radius: var(--radius-lg);
background: var(--glass-bg-strong);
color: var(--color-text);
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
overflow: hidden;
}
.add-modal:not(:popover-open) {
display: none;
}
.add-modal:popover-open {
display: flex;
flex-direction: column;
}
.add-modal::backdrop {
background: rgba(0, 0, 0, 0.35);
}
.add-modal__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
padding: var(--space-md) var(--space-lg);
border-bottom: 1px solid var(--color-border);
}
.add-modal__title {
margin: 0;
font-size: var(--text-md);
font-weight: 600;
}
.add-modal__close {
display: flex;
align-items: center;
justify-content: center;
padding: 4px;
border: none;
border-radius: var(--radius);
background: transparent;
color: var(--color-text-muted);
cursor: pointer;
transition: color 0.15s, background 0.15s;
}
.add-modal__close:hover {
color: var(--color-text);
background: var(--color-bg);
}
.add-modal__body {
padding: var(--space-lg);
overflow-y: auto;
/* A flex child won't shrink below its content without this, so a tall
form was clipped at the dialog's max height instead of scrolling. */
min-height: 0;
}
@media (max-width: 640px) {
.add-modal { top: 4vh; max-height: 92dvh; }
}
.add-modal__form .form-group {
margin-bottom: var(--space-md);
}
.add-modal__form label {
display: block;
margin-bottom: 4px;
font-size: var(--text-sm);
font-weight: 500;
color: var(--color-text-muted);
}
.add-modal__form input[type="text"],
.add-modal__form input[type="url"],
.add-modal__form textarea,
.add-modal__form select {
width: 100%;
padding: 6px var(--space-sm);
font-size: var(--text-sm);
font-family: var(--font-sans);
border: 1px solid var(--color-border);
border-radius: var(--radius);
background: var(--color-input-bg);
color: var(--color-text);
transition: border-color 0.15s;
}
.add-modal__form input[type="text"]:focus,
.add-modal__form input[type="url"]:focus,
.add-modal__form textarea:focus,
.add-modal__form select:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-focus-ring);
}
.add-modal__form input[type="text"]::placeholder,
.add-modal__form input[type="url"]::placeholder,
.add-modal__form textarea::placeholder {
color: var(--color-text-muted);
}
.add-modal__actions {
display: flex;
justify-content: flex-end;
margin-top: var(--space-lg);
}
#new-plan-modal {
top: 50%;
width: min(860px, calc(100vw - 32px));
max-height: calc(100dvh - 32px);
transform: translate(-50%, -50%);
border-radius: 20px;
background: var(--color-surface);
box-shadow: 0 28px 80px rgba(0, 0, 0, 0.36);
}
#new-plan-modal::backdrop {
background: rgba(4, 9, 20, 0.58);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
}
#new-plan-modal .add-modal__header {
padding: 20px 24px 16px;
border-bottom: 0;
}
#new-plan-modal .add-modal__title {
font-size: 23px;
font-weight: 650;
letter-spacing: -0.025em;
}
#new-plan-modal .add-modal__close {
width: 32px;
height: 32px;
border-radius: 50%;
background: color-mix(in srgb, var(--color-text) 7%, transparent);
}
#new-plan-modal .add-modal__body {
padding: 4px 24px 24px;
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
}
.new-plan-types {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.new-plan-types__button {
display: grid;
grid-template-columns: 42px minmax(0, 1fr);
align-content: start;
column-gap: 11px;
row-gap: 9px;
width: 100%;
min-height: 116px;
padding: 14px;
border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
border-radius: 14px;
background: var(--color-surface-muted);
color: var(--color-text);
font: inherit;
text-align: left;
cursor: pointer;
text-decoration: none;
transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.new-plan-types__button:hover,
.new-plan-types__button:focus-visible {
border-color: var(--color-primary);
background: var(--color-interaction-hover-bg);
box-shadow: 0 6px 18px color-mix(in srgb, var(--color-primary) 10%, transparent);
transform: translateY(-2px);
}
.new-plan-types__button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.new-plan-types__button[aria-busy="true"] { opacity: 0.65; pointer-events: none; }
.new-plan-types__icon { grid-column: 1; grid-row: 1; }
.new-plan-types__button .plan-type-icon { width: 42px; height: 42px; border-radius: 11px; }
.new-plan-types__button .plan-type-icon svg { width: 22px; height: 22px; }
.new-plan-types__name { grid-column: 2; grid-row: 1; align-self: center; min-width: 0; font-size: 15px; line-height: 1.2; font-weight: 650; overflow-wrap: break-word; }
.new-plan-types__description { grid-column: 1 / -1; grid-row: 2; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--color-text-muted); font-size: 12px; line-height: 1.3; }
@media (prefers-reduced-motion: reduce) {
.new-plan-types__button { transition: none; }
.new-plan-types__button:hover, .new-plan-types__button:focus-visible { transform: none; }
}
@media (min-width: 641px) and (max-width: 800px) {
.new-plan-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
#new-plan-modal { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
#new-plan-modal .add-modal__header { padding: 16px 18px 10px; }
#new-plan-modal .add-modal__title { font-size: 20px; }
#new-plan-modal .add-modal__body { padding: 2px 18px 18px; overscroll-behavior: contain; }
.new-plan-types { grid-template-columns: minmax(0, 1fr); gap: 7px; }
.new-plan-types__button { grid-template-columns: 32px minmax(0, 1fr); min-height: 74px; padding: 10px 12px; column-gap: 12px; row-gap: 2px; align-content: center; }
.new-plan-types__icon { grid-row: 1 / span 2; align-self: center; }
.new-plan-types__button .plan-type-icon { width: 32px; height: 32px; border-radius: 8px; }
.new-plan-types__button .plan-type-icon svg { width: 18px; height: 18px; }
.new-plan-types__name { font-size: 15px; }
.new-plan-types__description { grid-column: 2; font-size: 12px; line-height: 1.25; }
}
/* Attachments section */
.attachments-section__header {
margin-bottom: var(--space-md);
}
.attachments-upload {
display: block;
}
/* The designed replacement for the native file input: a full-width,
softly dashed target that reacts to hover and drag. */
.dropzone {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
width: 100%;
padding: var(--space-lg) var(--space-md);
border: 1.5px dashed var(--color-border-strong);
border-radius: calc(var(--radius) * 2);
background: var(--color-surface-muted);
color: var(--color-text-muted);
font-family: inherit;
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.dropzone:hover,
.dropzone--active {
border-color: var(--color-primary);
background: var(--color-primary-light);
color: var(--color-primary);
}
.dropzone--busy {
pointer-events: none;
opacity: 0.85;
}
/* Live upload progress — fills as bytes actually leave the machine. */
.dropzone__progress {
width: min(18rem, 100%);
height: 5px;
margin-top: var(--space-xs);
border-radius: 999px;
background: color-mix(in srgb, var(--color-primary) 18%, transparent);
overflow: hidden;
}
.dropzone__progress-fill {
display: block;
height: 100%;
width: 0;
border-radius: inherit;
background: var(--color-primary);
transition: width 0.15s ease;
}
.dropzone__icon {
margin-bottom: 2px;
}
.dropzone__title {
font-size: var(--text-sm);
font-weight: 500;
color: var(--color-text);
}
.dropzone:hover .dropzone__title,
.dropzone--active .dropzone__title {
color: var(--color-primary);
}
.dropzone__hint {
font-size: 0.75rem;
}
.dropzone__input {
display: none;
}
.attachments-dropzone__input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.attachments-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.attachments-list__item {
display: flex;
align-items: center;
gap: var(--space-md);
padding: var(--space-sm) var(--space-md);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
transition: border-color 0.15s, box-shadow 0.15s;
}
.attachments-list__item:hover {
border-color: var(--color-border-strong);
box-shadow: var(--shadow);
}
.attachments-list__icon {
flex-shrink: 0;
width: 48px;
text-align: center;
font-size: var(--text-lg);
line-height: 1.4;
}
.attachments-list__thumb-link {
flex-shrink: 0;
line-height: 0;
}
.attachments-list__thumb {
width: 48px;
height: 48px;
object-fit: cover;
border-radius: var(--radius);
border: 1px solid var(--color-border);
background: var(--color-bg);
}
.attachments-list__content {
flex: 1;
min-width: 0;
}
.attachments-list__link {
display: block;
word-break: break-all;
font-size: var(--text-sm);
}
.attachments-list__meta {
display: block;
margin-top: 2px;
font-size: 0.75rem;
color: var(--color-text-muted);
}
.attachments-list__actions {
flex-shrink: 0;
}
.attachments-list__remove {
flex-shrink: 0;
background: none;
border: none;
color: var(--color-text-muted);
cursor: pointer;
padding: 2px 6px;
font-size: var(--text-sm);
border-radius: var(--radius);
transition: color 0.15s, background 0.15s;
}
.attachments-list__remove:hover {
color: var(--color-danger);
background: var(--color-bg);
}
/* Hide sidebar on small screens */
@media (max-width: 1024px) {
.content-nav {
display: none;
}
.content-nav-show-btn {
display: none !important;
}
}
/* @-mention chip — matches Google Docs style. Uses theme tokens so it
adapts to dark mode automatically via CoPlan's existing variables. */
.markdown-rendered .mention {
display: inline;
background: var(--color-primary-light);
color: var(--color-primary);
border-radius: 12px;
padding: 1px 8px;
font-weight: 500;
text-decoration: none;
white-space: nowrap;
}
/* Mention picker dropdown for the comment textarea */
.mention-picker {
position: absolute;
z-index: 100;
background: var(--color-surface);
color: var(--color-text);
border: 1px solid var(--color-border);
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
min-width: 240px;
max-width: 360px;
max-height: 240px;
overflow-y: auto;
list-style: none;
margin: 0;
padding: 4px 0;
}
.mention-picker[hidden] { display: none; }
.mention-picker__item {
padding: 6px 12px;
cursor: pointer;
display: flex;
flex-direction: column;
gap: 2px;
}
.mention-picker__item--highlighted {
background: var(--color-primary-light);
color: var(--color-primary);
}
.mention-picker__item--highlighted .mention-picker__name {
color: var(--color-primary);
}
.mention-picker__item--disabled {
cursor: not-allowed;
opacity: 0.55;
}
.mention-picker__item--disabled.mention-picker__item--highlighted {
background: transparent;
}
.mention-picker__name {
font-weight: 500;
color: var(--color-text);
}
.mention-picker__meta {
font-size: 0.85em;
color: var(--color-text-muted);
}
.mention-picker__empty {
padding: 6px 12px;
color: var(--color-text-muted);
font-size: 0.9em;
}
/* Web Push encouragement banner — bottom-right toast that appears after a
user posts a comment, inviting them to enable browser notifications. */
.web-push-banner {
position: fixed;
right: var(--space-lg);
bottom: var(--space-lg);
z-index: 60;
display: flex;
align-items: flex-start;
gap: var(--space-md);
width: min(420px, calc(100vw - var(--space-lg) * 2));
padding: var(--space-md) var(--space-lg);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
animation: web-push-banner-in 220ms ease-out;
}
@keyframes web-push-banner-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.web-push-banner[hidden] {
display: none;
}
.web-push-banner__icon {
flex-shrink: 0;
width: 2.25rem;
height: 2.25rem;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-surface-muted);
color: var(--color-text);
border-radius: 999px;
}
.web-push-banner__main {
flex: 1;
min-width: 0;
}
.web-push-banner__title {
font-weight: 600;
font-size: var(--text-sm);
color: var(--color-text);
margin-bottom: 2px;
}
.web-push-banner__hint {
font-size: var(--text-sm);
color: var(--color-text-muted);
line-height: 1.4;
}
.web-push-banner__hint a {
color: var(--color-text);
text-decoration: underline;
}
.web-push-banner__actions {
display: flex;
justify-content: flex-end;
gap: var(--space-sm);
margin-top: var(--space-md);
}
.web-push-banner__btn {
/* Slightly chunkier than the default btn--sm so the CTA reads as a real
decision point rather than a footnote. */
padding: 0.4rem 0.9rem;
font-weight: 600;
}
@media (max-width: 600px) {
.web-push-banner {
right: var(--space-md);
left: var(--space-md);
width: auto;
}
.web-push-banner__actions .btn {
flex: 1;
}
}
/* Landing page (rendered at "/" for users with no plans, and at "/welcome") */
.landing {
max-width: 60rem;
margin: 0 auto;
padding: var(--space-2xl) var(--space-lg);
}
.landing__hero {
text-align: center;
margin-bottom: var(--space-2xl);
}
.landing__title {
font-size: 2.25rem;
font-weight: 600;
line-height: 1.2;
margin: 0 0 var(--space-md);
color: var(--color-text);
}
.landing__lede {
font-size: var(--text-lg);
line-height: 1.6;
color: var(--color-text-muted);
max-width: 40rem;
margin: 0 auto var(--space-xl);
}
.landing__cta-row {
display: flex;
justify-content: center;
gap: var(--space-md);
flex-wrap: wrap;
}
.landing__section-title {
font-size: var(--text-xl);
font-weight: 600;
margin: 0 0 var(--space-lg);
color: var(--color-text);
}
.landing__how {
margin-bottom: var(--space-2xl);
}
.landing__steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: var(--space-lg);
}
.landing__step {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: var(--space-lg);
}
.landing__step h3 {
font-size: var(--text-lg);
font-weight: 600;
margin: var(--space-sm) 0;
color: var(--color-text);
}
.landing__step p {
margin: 0;
font-size: var(--text-sm);
line-height: 1.6;
color: var(--color-text-muted);
}
.landing__step-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 50%;
background: var(--color-primary);
color: var(--color-text-inverse);
font-weight: 600;
font-size: var(--text-sm);
}
.landing__agents {
background: var(--color-bg-muted);
border-radius: var(--radius);
padding: var(--space-xl);
margin-bottom: var(--space-xl);
}
.landing__agents p {
margin: 0;
font-size: var(--text-base);
line-height: 1.6;
color: var(--color-text);
}
.landing__inline-link {
color: var(--color-primary);
text-decoration: underline;
font-weight: 500;
}
.landing__footer {
text-align: center;
padding-top: var(--space-lg);
border-top: 1px solid var(--color-border);
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.landing__footer-oss {
margin: var(--space-sm) 0 0;
}
.landing__kicker {
display: inline-block;
margin: 0 0 var(--space-md);
padding: 0.25rem 0.75rem;
border: 1px solid var(--color-border);
border-radius: 999px;
background: var(--color-surface);
font-size: var(--text-sm);
font-weight: 500;
color: var(--color-text-muted);
letter-spacing: 0.01em;
}
.landing__features {
margin-bottom: var(--space-2xl);
}
.landing__feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: var(--space-lg);
}
.landing__feature {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: var(--space-lg);
}
.landing__feature h3 {
font-size: var(--text-base);
font-weight: 600;
margin: 0 0 var(--space-sm);
color: var(--color-text);
}
.landing__feature p {
margin: 0;
font-size: var(--text-sm);
line-height: 1.6;
color: var(--color-text-muted);
}
/* Copy-to-clipboard URL chip — shared partial coplan/shared/_copy_url */
.copy-url {
display: flex;
align-items: stretch;
gap: var(--space-sm);
flex-wrap: wrap;
}
.copy-url__value {
flex: 1 1 16rem;
display: flex;
align-items: center;
padding: 0.4rem 0.75rem;
background: var(--color-code-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius);
font-family: var(--font-mono);
font-size: var(--text-sm);
color: var(--color-text);
overflow-wrap: anywhere;
}
.landing__agents .copy-url {
margin-top: var(--space-md);
}
/* Landing mock — an illustrative, CSS-only rendering of the review loop
(anchored comment → agent edit → new version). Uses the same design tokens
as the real plan UI so it stays truthful in both light and dark themes. */
.landing-mock {
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
gap: var(--space-lg);
align-items: start;
margin-bottom: var(--space-2xl);
}
.landing-mock__doc {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
box-shadow: var(--shadow);
overflow: hidden;
}
.landing-mock__doc-header {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-md) var(--space-lg);
border-bottom: 1px solid var(--color-border);
background: var(--color-surface-muted);
}
.landing-mock__doc-title {
font-weight: 600;
font-size: var(--text-sm);
color: var(--color-text);
margin-right: auto;
}
.landing-mock__badge {
padding: 0.1rem 0.5rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
}
.landing-mock__badge--type {
background: var(--color-type-bg);
color: var(--color-type-text);
}
.landing-mock__badge--version {
background: var(--color-tag-bg);
color: var(--color-tag-text);
}
.landing-mock__doc-body {
padding: var(--space-lg);
}
.landing-mock__heading {
margin: 0 0 var(--space-sm);
font-size: var(--text-base);
font-weight: 600;
color: var(--color-text);
}
.landing-mock__line {
margin: 0 0 var(--space-sm);
font-size: var(--text-sm);
line-height: 1.7;
color: var(--color-text);
}
.landing-mock__line--dim {
color: var(--color-text-muted);
}
.landing-mock__highlight {
background: var(--color-highlight-open-bg);
border-bottom: 2px solid var(--color-highlight-open-border);
color: inherit;
padding: 0 0.1em;
border-radius: 2px;
}
.landing-mock__thread {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.landing-mock__comment {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: var(--space-md);
}
.landing-mock__comment p {
margin: 0;
font-size: var(--text-sm);
line-height: 1.6;
color: var(--color-text);
}
.landing-mock__comment--agent {
border-color: var(--color-agent-bg);
background: var(--color-surface-muted);
margin-left: var(--space-lg);
}
.landing-mock__author {
font-size: 0.75rem;
font-weight: 600;
color: var(--color-text-muted);
margin-bottom: var(--space-xs);
}
.landing-mock__agent-chip {
display: inline-block;
margin-left: 0.25rem;
padding: 0 0.4rem;
border-radius: 999px;
background: var(--color-agent-bg);
color: var(--color-agent);
font-size: 0.7rem;
font-weight: 500;
text-transform: uppercase;
font-family: var(--font-mono);
letter-spacing: 0.02em;
}
.landing-mock__provenance {
margin-top: var(--space-sm);
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--color-text-muted);
}
/* Copy-to-clipboard button feedback (see clipboard_controller.js) */
.copy-button--copied {
background: var(--color-success);
border-color: var(--color-success);
color: var(--color-text-inverse);
}
/* Human setup page. The copyable URL serves the agent its Markdown guide. */
.agent-setup {
max-width: 52rem;
margin: 0 auto;
padding: var(--space-2xl) var(--space-lg) calc(var(--space-2xl) * 2);
}
.agent-setup__header {
margin-bottom: var(--space-xl);
}
.agent-setup__eyebrow {
display: inline-flex;
align-items: center;
margin-bottom: var(--space-lg);
padding: 0.35rem 0.7rem;
border: 1px solid color-mix(in srgb, var(--color-primary) 20%, var(--glass-edge));
border-radius: 999px;
background: var(--color-primary-light);
color: var(--color-primary);
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: 0.02em;
text-transform: uppercase;
font-family: var(--font-mono);
}
.agent-setup__title {
font-size: clamp(2.25rem, 5vw, 3.25rem);
font-weight: 600;
letter-spacing: -0.045em;
line-height: 1.08;
margin: 0 0 var(--space-md);
color: var(--color-text);
}
.agent-setup__lede {
font-size: var(--text-lg);
line-height: 1.6;
color: var(--color-text-muted);
margin: 0;
}
.agent-setup__steps {
list-style: none;
margin: 0;
padding: var(--space-xs) var(--space-xl);
display: grid;
position: relative;
overflow: hidden;
isolation: isolate;
border: 1px solid var(--glass-edge);
border-radius: 1.5rem;
background: var(--glass-bg-strong);
box-shadow: var(--shadow-glass), 0 0 0 1px var(--card-edge);
}
.agent-setup__steps::before {
content: "";
position: absolute;
z-index: -1;
inset: 0 0 auto;
height: 15rem;
background: radial-gradient(26rem 13rem at 15% 0%, var(--color-primary-light), transparent 80%);
pointer-events: none;
}
.agent-setup__step {
display: grid;
grid-template-columns: 2.75rem minmax(0, 1fr);
gap: var(--space-xl);
align-items: start;
padding: var(--space-xl) 0;
}
.agent-setup__step + .agent-setup__step {
border-top: 1px solid var(--card-edge);
}
.agent-setup__number {
display: grid;
place-items: center;
width: 2.75rem;
height: 2.75rem;
border-radius: 0.9rem;
border: 1px solid color-mix(in srgb, var(--color-primary) 25%, var(--glass-edge));
background: linear-gradient(145deg, var(--color-primary-light), var(--glass-bg));
color: var(--color-primary);
font-weight: 600;
box-shadow: inset 0 1px 0 var(--glass-edge);
}
.agent-setup__step-body {
min-width: 0;
}
.agent-setup__step h2 {
margin: 0 0 var(--space-xs);
font-size: var(--text-lg);
font-weight: 600;
color: var(--color-text);
}
.agent-setup__step p {
margin: 0;
font-size: var(--text-sm);
color: var(--color-text-muted);
line-height: 1.5;
}
.agent-setup .copy-url {
margin-top: var(--space-lg);
}
.agent-setup .copy-url__value {
background: var(--glass-bg);
border-color: var(--card-edge);
}
.agent-setup .copy-url .btn {
background: var(--color-primary);
border-color: var(--color-primary);
color: #fff;
box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary) 25%, transparent);
}
.agent-setup .copy-url .btn:hover {
background: color-mix(in srgb, var(--color-primary) 85%, #000);
color: #fff;
}
.agent-setup__more {
margin: var(--space-lg) 0 0;
text-align: center;
color: var(--color-text-muted);
font-size: var(--text-sm);
line-height: 1.5;
}
.agent-setup__more a,
.agent-reference__back {
color: var(--color-primary);
text-decoration: underline;
text-underline-offset: 0.15em;
}
.agent-reference {
max-width: 52rem;
margin: 0 auto;
padding: var(--space-2xl) var(--space-lg);
}
.agent-reference__back {
display: inline-block;
margin-bottom: var(--space-xl);
font-size: var(--text-sm);
}
.agent-reference__header {
margin-bottom: var(--space-2xl);
}
.agent-reference__header h1 {
margin: 0 0 var(--space-sm);
color: var(--color-text);
font-size: 2rem;
}
.agent-reference__header p {
margin: 0;
color: var(--color-text-muted);
line-height: 1.6;
}
.agent-reference__doc {
border-top: 1px solid var(--color-border);
padding-top: var(--space-xl);
}
@media (max-width: 640px) {
.landing {
padding: var(--space-xl) var(--space-md);
}
.landing__title {
font-size: 1.75rem;
}
.landing-mock {
grid-template-columns: 1fr;
}
.landing-mock__comment--agent {
margin-left: var(--space-md);
}
.agent-setup {
padding: var(--space-xl) var(--space-md);
}
.agent-setup__steps {
padding: 0 var(--space-lg);
}
.agent-setup__step {
grid-template-columns: 2rem minmax(0, 1fr);
gap: var(--space-md);
padding: var(--space-lg) 0;
}
.agent-setup__number {
width: 2rem;
height: 2rem;
border-radius: 0.65rem;
}
.agent-setup__more {
margin-top: var(--space-lg);
}
.agent-setup .copy-url {
flex-direction: column;
}
.agent-setup .copy-url__value {
flex: none;
min-width: 0;
}
.agent-setup .copy-url .btn {
align-self: flex-start;
}
.agent-reference {
padding: var(--space-xl) var(--space-md);
}
}
/* Stale-content banner — shown when the plan body was updated in another tab
but the local tab has a dirty draft (textarea/contenteditable). User can't
safely auto-swap, so we warn them and offer a reload button. */
.plan-stale-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
margin: 0 0 var(--space-md);
padding: var(--space-md) var(--space-lg);
background: var(--color-warning-soft);
border: 1px solid var(--color-warning);
border-radius: var(--radius);
font-size: var(--text-sm);
color: var(--color-text);
position: sticky;
top: var(--space-sm);
z-index: 5;
}
.plan-stale-banner__message {
flex: 1;
line-height: 1.5;
}
.plan-stale-banner__reload {
flex-shrink: 0;
}
/* --- Sitewide search (COPLAN-21) -------------------------------------- */
.site-nav__search {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
padding: 6px 10px;
margin: 0;
flex: 0 1 320px;
min-width: 0;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius);
color: var(--color-text-muted);
font: inherit;
font-size: var(--text-sm);
cursor: pointer;
text-align: left;
transition: border-color 0.15s, color 0.15s;
}
.site-nav__search:hover {
border-color: var(--color-text-muted);
color: var(--color-text);
}
.site-nav__search-label {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.site-nav__search-kbd {
font-family: ui-monospace, SFMono-Regular, monospace;
font-size: 11px;
padding: 1px 6px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 4px;
color: var(--color-text-muted);
}
.search-modal {
/* Layout for the open state. The user-agent stylesheet keeps
`[popover]:not(:popover-open)` hidden by default, but we override
`display` here, so re-establish the hidden default explicitly. */
position: fixed;
top: 10vh;
left: 50%;
transform: translateX(-50%);
width: min(640px, 92vw);
max-height: 70vh;
padding: 0;
margin: 0;
border: 1px solid var(--glass-edge);
border-radius: var(--radius-lg);
background: var(--glass-bg-strong);
color: var(--color-text);
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
overflow: hidden;
flex-direction: column;
}
.search-modal:not(:popover-open) {
display: none;
}
.search-modal:popover-open {
display: flex;
}
.search-modal::backdrop {
background: rgba(0, 0, 0, 0.35);
}
.search-modal__header {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-md) var(--space-lg);
border-bottom: 1px solid var(--color-border);
}
.search-modal__input {
flex: 1;
border: 0;
outline: 0;
background: transparent;
font: inherit;
font-size: var(--text-md);
color: var(--color-text);
padding: 4px 0;
}
.search-modal__hint {
font-family: ui-monospace, SFMono-Regular, monospace;
font-size: 11px;
padding: 1px 6px;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 4px;
color: var(--color-text-muted);
}
.search-modal__body {
flex: 1;
overflow-y: auto;
}
.search-modal__section-label {
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
font-family: var(--font-mono);
letter-spacing: 0.02em;
color: var(--color-text-muted);
padding: var(--space-md) var(--space-lg) var(--space-xs);
}
.search-modal__list {
list-style: none;
margin: 0;
padding: 0;
}
.search-modal__result {
display: flex;
flex-direction: column;
gap: 2px;
padding: 10px var(--space-lg);
color: var(--color-text);
text-decoration: none;
border-left: 3px solid transparent;
}
.search-modal__result:hover,
.search-modal__result--selected {
background: var(--color-bg);
border-left-color: var(--color-primary);
text-decoration: none;
}
.search-modal__result--person,
.search-modal__result--plan {
flex-direction: row;
align-items: center;
gap: var(--space-sm);
}
.search-modal__result-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.search-modal__result-title {
font-weight: 500;
font-size: var(--text-md);
}
.search-modal__result-meta {
font-size: var(--text-sm);
color: var(--color-text-muted);
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
}
.search-modal__empty {
padding: var(--space-xl) var(--space-lg);
text-align: center;
color: var(--color-text-muted);
font-size: var(--text-sm);
}
/* Sitewide keyboard reference. One native modal dialog in
the layout: no navigation, scroll movement, or loading state to interrupt
the surface the user is on. */
.keyboard-shortcuts {
position: fixed;
inset: 7vh auto auto 50%;
transform: translateX(-50%);
width: min(760px, 92vw);
max-height: 86vh;
padding: 0;
margin: 0;
border: 1px solid var(--glass-edge);
border-radius: var(--radius-lg);
background: var(--glass-bg-strong);
color: var(--color-text);
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
overflow: hidden;
flex-direction: column;
}
.keyboard-shortcuts:not([open]) {
display: none;
}
.keyboard-shortcuts[open] {
display: flex;
}
.keyboard-shortcuts::backdrop {
background: rgba(0, 0, 0, 0.35);
}
.keyboard-shortcuts__header {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
padding: var(--space-md) var(--space-lg);
border-bottom: 1px solid var(--color-border);
}
.keyboard-shortcuts__title {
margin: 0;
font-size: var(--text-lg);
}
/* Initial focus announces the reference without highlighting an action.
Interactive controls keep their normal keyboard focus indicators. */
.keyboard-shortcuts__title:focus {
outline: none;
}
.keyboard-shortcuts__subtitle {
margin: 3px 0 0;
color: var(--color-text-muted);
font-size: var(--text-sm);
}
.keyboard-shortcuts__close {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 32px;
height: 32px;
padding: 0;
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-text-muted);
font: inherit;
line-height: 1;
cursor: pointer;
}
.keyboard-shortcuts__close:hover {
background: var(--color-bg-muted);
color: var(--color-text);
}
.keyboard-shortcuts__body {
min-height: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-lg) var(--space-xl);
padding: var(--space-lg);
overflow-y: auto;
overscroll-behavior: contain;
}
.keyboard-shortcuts__group h3 {
margin: 0 0 var(--space-sm);
color: var(--color-text-muted);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.02em;
text-transform: uppercase;
font-family: var(--font-mono);
}
.keyboard-shortcuts__group dl,
.keyboard-shortcuts__group dl > div {
margin: 0;
}
.keyboard-shortcuts__group dl > div {
display: grid;
grid-template-columns: 9rem minmax(0, 1fr);
align-items: center;
gap: var(--space-md);
min-height: 34px;
padding: 5px 0;
border-bottom: 1px solid var(--color-border);
}
.keyboard-shortcuts__group dl > div:last-child {
border-bottom: 0;
}
.keyboard-shortcuts__group dt {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 5px;
}
.keyboard-shortcuts__group dt span,
.keyboard-shortcuts__group dt b {
color: var(--color-text-muted);
font-size: 10px;
font-weight: 400;
}
.keyboard-shortcuts__group kbd {
min-width: 25px;
padding: 2px 6px;
border: 1px solid var(--color-border-strong);
border-bottom-width: 2px;
border-radius: 5px;
background: var(--color-surface);
color: var(--color-text);
font-family: var(--font-mono);
font-size: 11px;
line-height: 1.4;
text-align: center;
box-shadow: 0 1px 1px rgba(15, 23, 42, 0.06);
}
.keyboard-shortcuts__group dd {
margin: 0;
color: var(--color-text-muted);
font-size: 12px;
line-height: 1.35;
text-align: right;
}
@media (max-width: 640px) {
.keyboard-shortcuts {
inset: 0;
transform: none;
width: auto;
max-height: none;
border: 0;
border-radius: 0;
}
.keyboard-shortcuts__body {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-lg);
padding: var(--space-md);
}
.keyboard-shortcuts__group dl > div {
grid-template-columns: 8.5rem minmax(0, 1fr);
}
}
@media (pointer: coarse) {
.keyboard-shortcuts__close {
min-width: 44px;
min-height: 44px;
}
}
.search-page__form {
margin-bottom: var(--space-lg);
}
.search-page__input {
width: 100%;
padding: 10px 14px;
font-size: var(--text-md);
border: 1px solid var(--color-border);
border-radius: var(--radius);
background: var(--color-surface);
color: var(--color-text);
}
.search-page__results {
border: 1px solid var(--color-border);
border-radius: var(--radius);
overflow: hidden;
background: var(--color-surface);
}
/* Plan owner actions (show page): one glass pill at the top right of the
document, so the controls read as a single toolbar rather than icons
scattered along the edge. Falls back to a translucent solid where
backdrop-filter is unsupported (the tokens carry alpha regardless). */
.plan-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--space-xs);
padding: 3px;
border: 1px solid var(--glass-edge);
border-radius: 9999px;
background: var(--glass-bg);
box-shadow: var(--shadow-glass);
}
/* Inside the pill, buttons go fully round so the container's curve and
the controls' curves agree. */
.plan-actions .btn {
border-radius: 9999px;
}
/* Square icon-only button. */
.btn--icon {
min-height: 2rem;
padding: 0 var(--space-sm);
line-height: 1;
}
.btn--icon svg {
display: block;
}
/* Dropdown menu on the native Popover API — the toolbar's ⋯ overflow.
Same glass as the pill it hangs from. Position is set inline by
menu_controller (popovers open centered by default). */
.menu {
min-width: 13.5rem;
padding: var(--space-xs);
border: 1px solid var(--glass-edge);
border-radius: var(--radius-lg);
background: var(--glass-bg-strong);
box-shadow: var(--shadow-lg);
color: var(--color-text);
}
/* button_to wraps its button in a form — flatten it out of the layout. */
.menu__form {
display: contents;
}
.menu__item {
display: flex;
align-items: center;
gap: var(--space-sm);
width: 100%;
padding: 6px var(--space-sm);
border: none;
border-radius: var(--radius);
background: none;
color: var(--color-text);
font-size: var(--text-sm);
font-family: inherit;
text-align: left;
text-decoration: none;
cursor: pointer;
}
.menu__item:hover {
background: var(--color-bg-muted);
text-decoration: none;
}
.menu__item svg {
flex-shrink: 0;
color: var(--color-text-muted);
}
/* Destructive actions read as such before you commit to them. */
.menu__item--danger,
.menu__item--danger svg {
color: var(--color-danger);
}
.menu__item--danger:hover {
background: var(--color-danger-soft);
}
.menu__separator {
height: 1px;
margin: var(--space-xs) calc(-1 * var(--space-xs));
background: var(--color-border);
}
/* Notifications is a bar control (the bell) whenever there's room; this menu
copy is the phone fallback, revealed only once the bell folds away. */
.menu__item--notifications {
display: none;
}
/* Full-width state banner on the plan page (e.g. archived notice). */
.plan-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
padding: var(--space-sm) var(--space-md);
margin-bottom: var(--space-md);
border: 1px solid var(--color-border);
border-radius: var(--radius);
background: var(--color-status-abandoned-bg);
color: var(--color-text-muted);
font-size: var(--text-sm);
}
/* Archived rows stay legible but visually recede. */
.plan-row--archived {
opacity: 0.65;
}
/* Library browsing page (read-only shelves) */
.library {
max-width: 780px;
margin: 0 auto;
}
.library__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
margin-bottom: var(--space-lg);
}
.library__identity {
display: flex;
align-items: center;
gap: var(--space-md);
}
.library__title {
margin: 0;
font-size: 1.4rem;
}
.library__subtitle {
margin: 2px 0 0;
font-size: var(--text-sm);
}
.library__empty {
padding: var(--space-xl) 0;
text-align: center;
}
.library-shelf {
margin-bottom: var(--space-sm);
}
/* On the library page, each top-level shelf is its own glass panel
(profile pages embed shelves inside an existing panel). */
.library__shelves > .library-shelf {
padding: var(--space-sm) var(--space-md);
background: var(--glass-bg-strong);
border: 1px solid var(--glass-edge);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-glass);
}
.library-shelf .library-shelf {
margin-left: var(--space-lg);
margin-bottom: 0;
margin-top: var(--space-xs);
}
.library-shelf__summary {
display: flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius);
cursor: pointer;
font-weight: 600;
list-style: none;
}
.library-shelf__summary::-webkit-details-marker {
display: none;
}
.library-shelf__summary:hover {
background: var(--color-surface-hover);
}
.library-shelf__count {
font-size: var(--text-xs);
font-weight: 400;
}
.library-shelf__plans {
list-style: none;
margin: 0 0 var(--space-xs);
padding: 0 0 0 calc(var(--space-lg) + 2px);
display: flex;
flex-direction: column;
gap: 2px;
}
.library-shelf__plan {
display: flex;
align-items: baseline;
gap: var(--space-sm);
padding: 2px 0;
}
.library-shelf__plan-title {
text-decoration: none;
color: var(--color-text);
}
.library-shelf__plan-title:hover {
color: var(--color-primary);
text-decoration: underline;
}
.library-shelf__plan-meta {
font-size: var(--text-xs);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.library-shelf__empty {
margin: 0 0 var(--space-xs);
padding-left: calc(var(--space-lg) + 2px);
}
/* Author names linking to profiles — quiet by default, obvious on hover */
.profile-link {
color: inherit;
text-decoration: none;
}
.profile-link:hover {
color: var(--color-primary);
text-decoration: underline;
}
/* Profile pages */
.profile {
max-width: 960px;
margin: 0 auto;
}
.profile__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
margin-bottom: var(--space-xl);
}
.profile__identity {
display: flex;
align-items: center;
gap: var(--space-md);
}
.profile__name {
margin: 0;
font-size: 1.5rem;
}
.profile__meta {
margin: 2px 0 0;
font-size: var(--text-sm);
}
.profile__username {
margin-left: var(--space-xs);
color: var(--color-text-muted);
}
.profile__stats {
margin: 4px 0 0;
}
.profile__columns {
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
gap: var(--space-xl);
align-items: start;
}
@media (max-width: 800px) {
.profile__columns {
grid-template-columns: 1fr;
}
}
.profile__section-title {
font-size: var(--text-sm);
text-transform: uppercase;
font-family: var(--font-mono);
letter-spacing: 0.02em;
color: var(--color-text-muted);
margin: 0 0 var(--space-md);
}
/* The embedded shelf column is narrow — let plan meta wrap under the
title instead of ellipsizing into "by Hampton Lintorn-Catli…". */
.profile__library .library-shelf__plan {
flex-wrap: wrap;
}
.profile__library .library-shelf__plan-meta {
white-space: normal;
}
.profile__plan-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.profile__plan {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) 0;
border-bottom: 1px solid var(--color-border);
}
.profile__plan:last-child {
border-bottom: none;
}
.profile__plan-title {
text-decoration: none;
color: var(--color-text);
font-weight: 500;
}
.profile__plan-title:hover {
color: var(--color-primary);
text-decoration: underline;
}
.profile__plan-meta {
font-size: var(--text-xs);
white-space: nowrap;
margin-left: auto;
}
/* Home — the org-facing activity feed */
.home {
max-width: 760px;
margin: 0 auto;
}
.home__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-md);
margin-bottom: var(--space-xl);
}
.home__title {
margin: 0;
font-size: 1.5rem;
}
.home__empty {
padding: var(--space-xl) 0;
text-align: center;
}
.home__day {
margin-bottom: var(--space-lg);
}
.home__day-heading {
font-size: var(--text-sm);
text-transform: uppercase;
font-family: var(--font-mono);
letter-spacing: 0.02em;
color: var(--color-text-muted);
margin: 0 0 var(--space-sm);
}
/* Each day's rollup floats as one glass panel over the mesh. */
.home__feed {
list-style: none;
margin: 0;
padding: var(--space-xs) var(--space-lg);
background: var(--glass-bg-strong);
border: 1px solid var(--glass-edge);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-glass);
}
.home__item {
display: flex;
align-items: flex-start;
gap: var(--space-md);
padding: var(--space-sm) 0;
border-bottom: 1px solid var(--color-border);
}
.home__item:last-child {
border-bottom: none;
}
.home__item-avatar {
flex-shrink: 0;
padding-top: 2px;
}
.home__item-body {
min-width: 0;
flex: 1;
}
/* The item's first line flows as text — icon, title, and the activity
rollup sit inline, so a long title wraps like a sentence instead of
shattering the row (icon orphaned above, "new" stranded below). */
.home__item-line {
min-width: 0;
}
.home__item-line .plan-type-icon {
display: inline-flex;
vertical-align: text-bottom;
margin-right: var(--space-xs);
}
.home__item-title {
font-weight: 500;
color: var(--color-text);
text-decoration: none;
}
.home__item-title:hover {
color: var(--color-primary);
text-decoration: underline;
}
.home__item-activity {
font-size: var(--text-xs);
color: var(--color-text-muted);
white-space: nowrap;
margin-left: var(--space-xs);
}
/* A plan's first appearance gets a whisper of accent — not a badge. */
.home__item-activity--new {
color: var(--color-primary);
}
.home__item-meta {
font-size: var(--text-xs);
margin-top: 2px;
}
.home__item-tag {
color: var(--color-text-muted);
text-decoration: none;
margin-left: var(--space-xs);
}
.home__item-tag:hover {
color: var(--color-primary);
}
.home__item-time {
font-size: var(--text-xs);
white-space: nowrap;
padding-top: 3px;
}
/* Markdown editor (edit_content page) */
/* Title + tags row at the top of the unified editor. */
.editor__meta {
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
gap: var(--space-md);
margin-bottom: var(--space-md);
}
@media (max-width: 720px) {
.editor__meta {
grid-template-columns: 1fr;
}
}
.editor__tabs {
display: flex;
gap: var(--space-xs);
border-bottom: 1px solid var(--color-border);
margin-bottom: var(--space-md);
}
.editor__tab {
padding: var(--space-sm) var(--space-md);
background: none;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
color: var(--color-text-muted);
font-size: var(--text-sm);
}
.editor__tab--active {
color: var(--color-text);
border-bottom-color: var(--color-primary);
font-weight: 600;
}
.editor__textarea {
width: 100%;
min-height: 60vh;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: var(--text-sm);
line-height: 1.6;
padding: var(--space-md);
border: 1px solid var(--color-border);
border-radius: var(--radius);
background: var(--color-surface);
color: var(--color-text);
resize: vertical;
tab-size: 2;
}
.editor__preview {
min-height: 60vh;
padding: var(--space-md);
border: 1px solid var(--color-border);
border-radius: var(--radius);
}
.editor__draft-notice,
.editor__conflict {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
margin-bottom: var(--space-md);
border-radius: var(--radius);
font-size: var(--text-sm);
}
.editor__draft-notice {
background: var(--color-bg-muted);
border: 1px solid var(--color-border);
}
.editor__conflict {
background: var(--color-warning-soft);
border: 1px solid var(--color-warning);
display: block;
}
.editor__conflict[data-kind="save-error"] {
background: var(--color-bg-muted);
border-color: var(--color-border);
}
.editor__hint {
margin-left: auto;
}
.editor__hint kbd {
padding: 1px 5px;
border: 1px solid var(--color-border);
border-radius: 4px;
font-size: var(--text-xs);
background: var(--color-bg-muted);
}
/* ===================================================== Plans workspace (sidebar + grouped index)
============================================================ */
.workspace {
display: grid;
grid-template-columns: 15rem minmax(0, 1fr);
gap: var(--space-xl);
align-items: start;
}
.workspace__sidebar {
position: sticky;
top: calc(var(--nav-height) + var(--space-md));
font-size: var(--text-sm);
min-width: 0;
/* A sticky sidebar taller than the viewport pins its overflow below the
fold forever — page scroll can't reach it. Scroll the sidebar itself. */
max-height: calc(100vh - var(--nav-height) - var(--space-md) * 2);
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--color-border) transparent;
}
.workspace__sidebar-sections {
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
/* Mobile-only disclosure bar (see the 56rem media block); at desktop the
button vanishes and the sections always show. */
.workspace__sidebar-toggle {
display: none;
align-items: center;
gap: var(--space-xs);
width: 100%;
padding: var(--space-sm) var(--space-md);
background: var(--surface-translucent);
border: 1px solid var(--glass-edge);
border-radius: var(--radius);
color: var(--color-text);
font-family: inherit;
font-size: var(--text-sm);
font-weight: 600;
cursor: pointer;
}
.workspace__sidebar-toggle .workspace__sidebar-chevron {
margin-left: auto;
transition: transform 0.15s;
}
.workspace__sidebar-toggle[aria-expanded="true"] .workspace__sidebar-chevron {
transform: rotate(180deg);
}
.workspace__main {
min-width: 0;
}
/* A library identity should orient the reader, then get out of the way. */
.library-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 24px; }
.library-header__identity { display: flex; align-items: center; gap: 13px; min-width: 0; }
.library-header__identity .avatar--lg { width: 42px; height: 42px; flex: none; }
.library-header__text { min-width: 0; }
.library-header__name { margin: 0; font-size: clamp(22px, 2.7vw, 29px); line-height: 1.12; letter-spacing: -0.035em; }
.library-header__meta { margin: 4px 0 0; font-size: 12px; line-height: 1.35; }
.library-header__badge { padding: 5px 9px; border: 1px solid var(--color-border); border-radius: 999px; color: var(--color-text-muted); font-size: 11px; white-space: nowrap; }
.sidebar__filters { border-top: 1px solid var(--color-border); padding-top: 10px; }
.sidebar__filters-toggle { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; border-radius: 8px; color: var(--color-text-muted); font-size: 12px; font-weight: 600; cursor: pointer; list-style: none; }
.sidebar__filters-toggle::-webkit-details-marker { display: none; }
.sidebar__filters-toggle::after { content: "⌄"; font-size: 15px; line-height: 1; transition: transform 150ms ease; }
.sidebar__filters[open] .sidebar__filters-toggle::after { transform: rotate(180deg); }
.sidebar__filters-toggle:hover { color: var(--color-text); background: var(--color-interaction-hover-bg); }
.sidebar__filters-toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.sidebar__filters-content { display: flex; flex-direction: column; gap: 18px; padding-top: 15px; }
.workspace__filters {
flex-wrap: wrap;
}
.workspace__filter-chip {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: 2px var(--space-sm);
border: 1px solid var(--color-border);
border-radius: 9999px;
background: var(--color-surface);
font-size: 0.8rem;
}
.workspace__filter-clear {
color: var(--color-text-muted);
text-decoration: none;
font-size: 0.75rem;
}
.workspace__filter-clear:hover {
color: var(--color-danger);
}
/* Sidebar sections */
.sidebar__heading {
margin: 0 0 var(--space-xs);
font-size: 0.7rem;
font-weight: 500;
text-transform: uppercase;
font-family: var(--font-mono);
letter-spacing: 0.02em;
color: var(--color-text-muted);
}
.sidebar__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.sidebar__item {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-xs);
padding: 3px var(--space-sm);
border-radius: var(--radius);
color: var(--color-text);
text-decoration: none;
}
.sidebar__item:hover {
background: var(--color-bg-muted);
text-decoration: none;
}
.sidebar__item--active {
background: var(--color-primary-light);
color: var(--color-primary);
font-weight: 500;
}
.sidebar__item-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sidebar__count {
font-size: 0.7rem;
color: var(--color-text-muted);
flex-shrink: 0;
}
.sidebar__hint {
margin: var(--space-sm) 0 0;
line-height: 1.4;
}
/* Folder tree */
.folder-tree {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.folder-tree--nested {
padding-left: var(--space-sm);
}
/* The rooted tree: "My Plans" is the drive root; folders hang off it with
the same compact indent as regular nesting. */
.folder-tree__node--root > .folder-tree--nested {
padding-left: var(--space-sm);
margin-top: 1px;
}
.folder-tree__link--root {
font-weight: 600;
}
.folder-tree__branch > .folder-tree__summary {
display: flex;
align-items: center;
cursor: pointer;
list-style: none;
}
.folder-tree__summary::-webkit-details-marker {
display: none;
}
.folder-tree__summary::before {
content: "";
flex-shrink: 0;
width: 0.9rem;
height: 0.9rem;
margin-right: -0.9rem; /* overlap the link's padding */
position: relative;
left: -0.15rem;
background: currentColor;
color: var(--color-text-muted);
-webkit-mask: url('data:image/svg+xml,') center / contain no-repeat;
mask: url('data:image/svg+xml,') center / contain no-repeat;
transition: transform 0.15s;
}
.folder-tree__branch[open] > .folder-tree__summary::before {
transform: rotate(90deg);
}
.folder-tree__link {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-xs);
padding: 3px var(--space-sm) 3px 1.1rem;
border-radius: var(--radius);
color: var(--color-text);
text-decoration: none;
min-width: 0;
-webkit-user-select: none;
user-select: none;
}
/* Leaf nodes (no ) keep the same left padding so labels align. */
.folder-tree__node > .folder-tree__link {
display: flex;
}
.folder-tree__link:hover {
background: var(--color-bg-muted);
text-decoration: none;
}
.folder-tree__link--active {
background: var(--color-primary-light);
color: var(--color-primary);
font-weight: 500;
}
/* Live drop target under the cursor — folder links and group headings.
Loud on purpose: a solid ring, a glow, and primary-tinted contents, so
there's no squinting about where the drop will land. */
.dnd-drop {
outline: 2px solid var(--color-primary);
outline-offset: -2px;
background: var(--color-primary-light);
border-radius: var(--radius);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 22%, transparent);
color: var(--color-primary);
}
.dnd-drop .folder-row__icon,
.dnd-drop .folder-row__name,
.dnd-drop .folder-row__count,
.dnd-drop .folder-tree__name,
.dnd-drop .sidebar__count {
color: var(--color-primary);
}
/* Drop accepted, PATCH + refresh in flight — the target pulses until the
page re-renders so the move never feels like it silently stalled. */
.dnd-drop--busy {
outline: 2px solid var(--color-primary);
outline-offset: -2px;
background: var(--color-primary-light);
border-radius: var(--radius);
animation: dnd-busy-pulse 0.8s ease-in-out infinite;
}
@keyframes dnd-busy-pulse {
50% { opacity: 0.45; }
}
.workspace--moving,
.workspace--moving * {
cursor: progress;
}
/* The row that was just dropped stays ghosted (dragend strips the
--dragging class before the server round-trip finishes). */
.dnd-source--moving {
opacity: 0.4;
pointer-events: none;
}
/* Spring-loading, Finder-style: keep the drag hovering on a folder and it
pulses twice, then springs open. */
.dnd-spring {
animation: dnd-spring-pulse 0.3s ease-in-out 2;
}
@keyframes dnd-spring-pulse {
50% {
box-shadow: 0 0 0 8px color-mix(in srgb, var(--color-primary) 38%, transparent);
transform: scale(1.012);
}
}
/* Tunneled pane: springing a main-pane folder swaps the pane to that
folder's real level view mid-drag. A quick slide-in sells the "you just
went somewhere" feel each level down. */
.workspace__main--tunneled {
animation: dnd-tunnel-in 0.18s ease-out;
}
@keyframes dnd-tunnel-in {
from {
opacity: 0.4;
transform: translateY(4px);
}
}
/* The pane itself is the fallback drop target ("file into the folder
you're looking at"). Ring it quietly and don't tint its text — the loud
treatment belongs to specific rows/crumbs. */
.workspace__main.dnd-drop {
color: inherit;
box-shadow: none;
outline-style: dashed;
}
.folder-tree__link--dragging {
opacity: 0.5;
}
.folder-tree__name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* While dragging a row, make every folder read as a target — sidebar
tree, main-pane folder rows, and breadcrumb segments alike. */
.workspace--dragging .folder-tree__link,
.workspace--dragging .folder-row,
.workspace--dragging .workspace-crumbs__crumb {
outline: 1px dashed var(--color-border-strong);
outline-offset: -1px;
}
/* While a drag is live, the pane grows a runway below the level's
contents: an empty (or short) folder — especially one just tunneled
into — otherwise offers almost nothing to drop on. Padding, not
margin: padding is inside the element, so the runway IS the pane's
drop target. */
.workspace--dragging .workspace__main {
padding-bottom: 10rem;
min-height: 60vh;
}
/* Needs attention strip */
.attention {
margin-bottom: var(--space-lg);
padding: var(--space-sm) var(--space-md);
border: 1px solid var(--color-warning);
border-radius: var(--radius);
background: var(--color-warning-soft);
}
.attention__heading {
display: flex;
align-items: center;
gap: var(--space-xs);
margin: 0 0 var(--space-xs);
font-size: 0.8rem;
font-weight: 500;
text-transform: uppercase;
font-family: var(--font-mono);
letter-spacing: 0.02em;
color: var(--color-warning);
}
.attention__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.attention__item {
display: flex;
align-items: baseline;
gap: var(--space-sm);
font-size: var(--text-sm);
}
.attention__link {
font-weight: 500;
color: var(--color-text);
}
.attention__unread {
color: var(--color-text-muted);
font-size: 0.75rem;
white-space: nowrap;
}
/* Dismissal sits at the far right of the row, quiet until hovered — the
strip is a nudge, and getting rid of a nudge shouldn't be loud. */
.attention__clear-form {
margin: 0;
margin-left: auto;
}
/* A quiet ✕, matching the filter chips: the row already says what it is,
so the dismiss doesn't need a word. Padding buys a real hit area
without taking visual weight. */
.attention__clear {
flex-shrink: 0;
padding: 2px 6px;
border: 0;
border-radius: var(--radius);
background: none;
color: var(--color-text-muted);
font-size: var(--text-sm);
line-height: 1;
font-family: inherit;
cursor: pointer;
transition: color 0.15s, background 0.15s;
}
.attention__clear:hover {
color: var(--color-text);
background: var(--color-bg);
}
/* Clear is instant, not a task with a progress state: Turbo marks the
form aria-busy the moment it's pressed, and the row hides on that —
gone before the request finishes, with the response replacing the
strip a moment later. Turbo clears aria-busy on failure, so a rejected
request puts the row back without any JS of ours. */
.attention__item:has(.attention__clear-form[aria-busy="true"]) {
display: none;
}
/* Clearing the last row empties the strip, so take the whole thing with
it rather than flash an empty bordered box with a stale count. */
.attention:has(.attention__item:only-child .attention__clear-form[aria-busy="true"]) {
display: none;
}
/* "Since you last looked" strip — recency against your own reading
history, quieter than the warning-toned attention strip. */
.recent-updates {
margin-bottom: var(--space-lg);
padding: 9px 12px;
border: 1px solid var(--color-border);
border-radius: 10px;
background: var(--color-surface-muted);
}
.recent-updates__heading {
display: flex;
align-items: center;
gap: var(--space-xs);
margin: 0;
font-size: 11px;
font-weight: 600;
color: var(--color-text-muted);
cursor: pointer;
list-style: none;
}
.recent-updates__heading::-webkit-details-marker { display: none; }
.recent-updates__heading::after { content: "⌄"; margin-left: auto; font-size: 14px; }
.recent-updates[open] .recent-updates__heading::after { transform: rotate(180deg); }
.recent-updates__heading:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.recent-updates__count { margin-left: 3px; font-weight: 400; }
.recent-updates[open] .recent-updates__list { margin-top: 12px; }
.recent-updates__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
/* Roomy enough to scan — this read as one bunched block at 2px. */
gap: var(--space-sm);
}
.recent-updates__item {
display: flex;
align-items: baseline;
gap: var(--space-sm);
font-size: var(--text-sm);
min-width: 0;
}
.recent-updates__link {
font-weight: 500;
color: var(--color-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.recent-updates__badge {
flex-shrink: 0;
font-size: 0.7rem;
font-weight: 600;
padding: 0 6px;
border-radius: 9999px;
border: 1px solid var(--color-border);
color: var(--color-text-muted);
}
.recent-updates__badge--new-to-you {
border-color: var(--color-primary);
color: var(--color-primary);
}
.recent-updates__meta {
margin-left: auto;
font-size: 0.75rem;
white-space: nowrap;
}
/* Breadcrumbs — where you are in your library (Drive-style). */
.workspace-crumbs {
display: flex;
align-items: center;
gap: var(--space-xs);
margin-bottom: var(--space-md);
font-size: var(--text-sm);
flex-wrap: wrap;
}
.workspace-crumbs__crumb {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px var(--space-sm);
border-radius: var(--radius);
color: var(--color-text-muted);
text-decoration: none;
font-weight: 500;
}
.workspace-crumbs__crumb:hover {
color: var(--color-text);
background: var(--color-bg);
text-decoration: none;
}
.workspace-crumbs__crumb--current {
color: var(--color-text);
font-weight: 600;
}
.workspace-crumbs__sep {
color: var(--color-text-muted);
opacity: 0.6;
flex-shrink: 0;
}
.workspace-crumbs__spacer {
flex: 1;
}
/* A quiet glass add control that joins its right-aligned menu when open. */
.workspace-add__trigger {
display: inline-grid;
place-items: center;
width: 38px;
height: 38px;
padding: 0;
border: 1px solid var(--glass-edge);
border-radius: 50%;
background: var(--glass-bg);
color: var(--color-text);
box-shadow: var(--shadow);
}
.workspace-add__trigger:hover,
.workspace-add:has(.workspace-add__menu:popover-open) .workspace-add__trigger {
background: var(--glass-bg-strong);
border-color: color-mix(in srgb, var(--color-primary) 30%, var(--glass-edge));
}
.workspace-add__trigger:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.workspace-add:has(.workspace-add__menu:popover-open) .workspace-add__trigger {
border-bottom-right-radius: 8px;
}
.workspace-add__menu {
transform: translateY(-5px);
border-top-right-radius: 8px;
}
/* A folder in the main pane's level view — same surface language as plan
rows, but unmistakably a folder. */
.folder-row {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
background: var(--surface-translucent);
border: 1px solid var(--card-edge);
border-radius: var(--radius);
margin-bottom: var(--space-xs);
box-shadow: var(--shadow);
color: var(--color-text);
text-decoration: none;
transition: background 0.12s ease, box-shadow 0.12s ease;
-webkit-user-select: none;
user-select: none;
}
.folder-row:hover {
background: var(--color-bg);
text-decoration: none;
}
.folder-row__icon {
display: inline-flex;
color: var(--color-text-muted);
}
.folder-row__name {
font-weight: 600;
}
.folder-row__count {
margin-left: auto;
font-size: var(--text-xs);
}
/* Keyboard cursor (j/k) over folder and plan rows. */
.workspace-key-selected {
outline: 2px solid var(--color-primary);
outline-offset: -2px;
}
/* Compact plan rows */
.plan-row {
display: flex;
align-items: center;
gap: var(--space-md);
padding: var(--space-sm) var(--space-md);
/* Translucent without backdrop blur — rows are numerous and per-row
blur is a GPU tax; the mesh still glows through faintly. */
background: var(--surface-translucent);
border: 1px solid var(--card-edge);
border-radius: var(--radius);
margin-bottom: var(--space-xs);
box-shadow: var(--shadow);
transition: background 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
/* Selectable text hijacks press-and-drag: the browser starts a text
selection instead of the row drag, and the mouseup then *navigates*
the title link. Rows are chrome, not prose — don't select. */
-webkit-user-select: none;
user-select: none;
}
/* The file icon spans both text rows — a Drive/Finder file entry. */
.plan-row__icon {
display: inline-flex;
flex-shrink: 0;
}
.plan-row__main {
flex: 1;
min-width: 0;
}
.plan-row:hover {
background: var(--glass-bg-strong);
box-shadow: var(--shadow-pop);
transform: translateY(-1px);
cursor: pointer;
}
/* Whole-card click target: the title link stretches over the card, so
clicking (and hover-prefetching) works anywhere on the row. Every other
interactive element in the row rises above the stretch. */
.plan-row {
position: relative;
}
.plan-row__title::after {
content: "";
position: absolute;
inset: 0;
}
.plan-row a:not(.plan-row__title),
.plan-row button {
position: relative;
z-index: 1;
}
.plan-row--dragging {
opacity: 0.5;
}
.plan-row__line {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-xs);
}
.plan-row__title {
font-weight: 600;
color: var(--color-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
.plan-row__title:hover {
color: var(--color-primary);
}
.plan-row__folder {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 0.75rem;
color: var(--color-text-muted);
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 16rem;
}
.plan-row__folder:hover {
color: var(--color-primary);
text-decoration: none;
}
/* Byline pinned to the card's top-right corner: it must not ride along
with wrapping titles or drift to a second line mid-card. */
.plan-row__meta {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-left: auto;
align-self: flex-start;
flex-shrink: 0;
}
.plan-row__time {
font-size: 0.75rem;
white-space: nowrap;
}
.plan-row__avatar {
display: inline-flex;
}
.plan-row__summary {
margin: var(--space-xs) 0 0;
font-size: var(--text-sm);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Toasts (drag & drop feedback) */
.toasts {
position: fixed;
bottom: var(--space-lg);
right: var(--space-lg);
z-index: 100;
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.toasts__toast {
margin: 0;
box-shadow: var(--shadow-lg);
}
.archive-confirmation {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-sm) var(--space-lg);
margin-bottom: var(--space-md);
padding: var(--space-md);
background: var(--color-surface);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius);
}
.archive-confirmation__message,
.archive-confirmation__actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-sm);
}
.archive-confirmation__message strong {
color: var(--color-text);
}
.archive-confirmation__message span {
color: var(--color-text-muted);
}
.archive-confirmation .btn--primary {
background: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-bg);
}
.archive-confirmation .btn--primary:hover {
background: var(--color-primary-hover);
border-color: var(--color-primary-hover);
color: var(--color-bg);
}
/* Narrow viewports: stack the sidebar above the list */
@media (max-width: 56rem) {
.workspace {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-md);
}
/* The sidebar collapses into a "Filters & folders" bar at the top —
tap to expand, out of the way otherwise. */
.workspace__sidebar {
position: static;
max-height: none;
overflow: visible;
}
.workspace__sidebar-toggle {
display: flex;
}
.workspace__sidebar-sections {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
gap: var(--space-md);
padding: var(--space-md) var(--space-sm) var(--space-sm);
}
.workspace__sidebar-sections--closed {
display: none;
}
}
/* ---- Medium screens ----
The first thing the nav gives up is the search field's prose: the
placeholder and "/" hint fold into a round icon button before anything
else is allowed to compress. The name gets a truncation budget so the
controls never fight it for room. */
@media (max-width: 900px) {
.site-nav__search-label,
.site-nav__search-kbd {
display: none;
}
.site-nav__search {
flex: 0 0 auto;
gap: 0;
padding: 8px;
margin: 0;
border-radius: 9999px;
}
}
/* ---- Touch devices (any width) ----
A finger needs a bigger target than a cursor. On coarse pointers the icon
controls and menu rows grow to ~44px regardless of screen width, so a touch
tablet with the bell still on the bar is just as tappable. */
@media (pointer: coarse) {
.site-nav__menu-btn,
.site-nav__bell {
min-width: 44px;
min-height: 44px;
}
/* Preserve a 44px touch target without giving the compact control 44px
of layout footprint in the byline or sticky plan context. */
.plan-location-link {
width: 44px;
height: 44px;
}
.plan-location-link--masthead {
margin: -12px -10px -12px -8px;
}
.plan-location-link--nav {
margin: -9px;
}
.menu__item {
min-height: 44px;
padding: 10px var(--space-sm);
gap: var(--space-md);
}
.menu__item svg {
width: 18px;
height: 18px;
}
}
/* ---- Phone-sized screens ----
Reviewing your agents' work from a phone is a first-class flow —
reading, commenting, and finding the right doc all have to work at
~390px. Chrome collapses to icons; content goes single-column. */
@media (max-width: 640px) {
.site-nav__inner {
padding: 0 var(--space-sm);
gap: var(--space-sm);
}
/* Icons over labels: the brand wordmark yields to the logo alone, since
search and the ☰ menu are what a phone visit reaches for. */
.site-nav__brand-text {
display: none;
}
/* No room for the bell + its peek panel — the whole control folds into the
menu (its row is revealed there, linking to the full page), and the
unread signal moves to a dot on the ☰. */
.inbox-dropdown {
display: none;
}
.menu__item--notifications {
display: flex;
}
.site-nav--has-unread .site-nav__menu-btn::after {
display: block;
}
/* Finger-sized tap targets: the ☰ and the folded search icon each fill a
44px hit area, and menu rows get real height + spacing so they're not a
pixel-hunt to tap. */
.site-nav__menu-btn {
min-width: 44px;
min-height: 44px;
}
.site-nav__search {
min-width: 44px;
min-height: 44px;
padding: 12px;
}
.menu {
min-width: 15rem;
padding: var(--space-sm);
}
.menu__item {
min-height: 44px;
padding: 10px var(--space-sm);
gap: var(--space-md);
}
.menu__item svg {
width: 18px;
height: 18px;
}
.main-content {
padding: var(--space-lg) var(--space-md);
}
.page-header {
flex-wrap: wrap;
gap: var(--space-sm);
}
.page-header h1 {
font-size: var(--text-xl);
overflow-wrap: anywhere;
}
/* At phone widths the byline can wrap under itself freely. */
.page-header__byline {
flex-wrap: wrap;
}
.plan-document {
padding: var(--space-md);
}
.references-section,
.attachments-section {
padding-left: 0;
}
.plan-actions {
flex-wrap: wrap;
}
/* Comment surfaces clamp to the viewport instead of overflowing it. */
.comment-form {
width: min(360px, calc(100vw - 2 * var(--space-md)));
}
.thread-popover {
width: min(380px, calc(100vw - 2 * var(--space-md)));
}
/* Strip rows stack their meta under the title instead of squeezing it. */
.recent-updates__item,
.attention__item {
flex-wrap: wrap;
}
.recent-updates__meta {
margin-left: 0;
flex-basis: 100%;
}
/* Narrow screens: the timestamp stops being a side column (it was
squeezing titles to a word per line) and tucks under the byline,
indented to the body's left edge (2rem avatar + md gap). */
.home__item {
flex-wrap: wrap;
}
.home__item-time {
order: 3;
flex-basis: 100%;
padding-top: 0;
margin-left: calc(2rem + var(--space-md));
font-size: 0.75rem;
}
}
/* ═══ Expanded view ═══════════════════════════════════════════════════════
The shared takeover surface (coplan/expander.js) behind an expanded
Mermaid diagram and an expanded data table. The chrome — title bar,
toolbar, status line, dismissal — is identical for both; only the body
differs. */
/* showModal() dims the page but doesn't stop it scrolling behind the
overlay. */
.expander-open {
overflow: hidden;
}
.expander {
display: flex;
flex-direction: column;
width: 94vw;
height: 92vh;
max-width: 94vw;
max-height: 92vh;
padding: 0;
margin: auto;
overflow: hidden;
background: var(--color-surface);
color: var(--color-text);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
}
.expander::backdrop {
background: rgba(8, 12, 24, 0.55);
backdrop-filter: blur(2px);
}
.expander__bar {
display: flex;
align-items: center;
gap: var(--space-sm);
flex: none;
padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-md);
background: var(--color-surface-muted);
border-bottom: 1px solid var(--color-border);
}
.expander__title {
flex: 1;
min-width: 0;
margin: 0;
font-size: var(--text-base);
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.expander__tools {
display: flex;
align-items: center;
gap: var(--space-xs);
}
.expander__tool,
.expander__close {
display: flex;
align-items: center;
justify-content: center;
min-width: 2rem;
height: 2rem;
padding: 0 var(--space-xs);
background: var(--color-surface);
color: var(--color-text-muted);
border: 1px solid var(--color-border);
border-radius: var(--radius);
cursor: pointer;
}
.expander__tool:hover,
.expander__close:hover {
color: var(--color-text);
border-color: var(--color-border-strong);
}
.expander__tool.is-active {
color: var(--color-primary);
background: var(--color-primary-light);
border-color: var(--color-primary);
}
.expander__tool--hidden {
display: none;
}
.expander__close {
margin-left: var(--space-xs);
}
.expander__readout {
min-width: 3.5rem;
text-align: center;
font-size: var(--text-sm);
font-variant-numeric: tabular-nums;
color: var(--color-text-muted);
}
.expander__body {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}
.expander__status {
display: flex;
align-items: center;
gap: var(--space-sm);
flex: none;
padding: var(--space-xs) var(--space-md);
background: var(--color-surface-muted);
border-top: 1px solid var(--color-border);
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.expander__hint {
margin-left: auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ── Diagram body: the pan/zoom viewport ──────────────────────────────── */
.expander__canvas {
position: relative;
flex: 1;
min-height: 0;
overflow: hidden;
/* The browser's own pan and pinch would fight the controller's. */
touch-action: none;
cursor: grab;
}
.expander__canvas.is-grabbing {
cursor: grabbing;
}
.expander__canvas:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: -2px;
}
.expander__canvas > svg,
.expander__canvas > img {
display: block;
}
/* Pan by dragging the picture, not the browser's image drag or a text
selection. */
.expander__canvas > img {
border-radius: 0;
user-select: none;
-webkit-user-select: none;
-webkit-user-drag: none;
}
/* ── Table body: the spreadsheet ──────────────────────────────────────── */
.data-sheet {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}
.data-sheet__frame {
flex: 1;
min-height: 0;
overflow: auto;
scrollbar-width: thin;
}
.data-sheet__frame:focus {
outline: none;
}
.data-sheet__table {
width: max-content;
min-width: 100%;
background: var(--color-surface);
border-collapse: separate;
border-spacing: 0;
font-size: var(--text-sm);
}
/* Body cells are transparent on purpose: it lets a background on the
column's paint the crosshair band for free, however many rows the
table has. */
.data-sheet__table th,
.data-sheet__table td {
position: relative;
max-width: 40ch;
padding: var(--space-sm) var(--space-md);
background: transparent;
border-right: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
text-align: left;
vertical-align: top;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.data-sheet__frame.is-wrapped th,
.data-sheet__frame.is-wrapped td {
width: clamp(14rem, 28vw, 28rem);
min-width: min(14rem, 45vw);
max-width: 28rem;
white-space: normal;
overflow: visible;
overflow-wrap: anywhere;
}
.data-sheet__table tr > :first-child { max-width: min(32ch, 35vw); }
.data-sheet__frame.is-wrapped tr > :first-child { width: min(22rem, 35vw); min-width: min(10rem, 35vw); max-width: min(22rem, 35vw); }
.data-sheet__table code { font-family: var(--font-mono); font-size: 0.9em; }
.data-sheet__frame.is-wrapped code { white-space: normal; overflow-wrap: anywhere; }
.data-sheet__frame.is-wrapped pre { white-space: pre-wrap; }
.data-sheet__table :is(p, ul, ol, pre) { margin: 0 0 var(--space-sm); }
.data-sheet__table :is(p, ul, ol, pre):last-child { margin-bottom: 0; }
.data-sheet__table thead th {
position: sticky;
top: 0;
z-index: 3;
padding-right: calc(var(--space-md) + 0.75rem);
background: var(--color-surface-muted);
font-weight: 600;
cursor: pointer;
user-select: none;
box-shadow: inset 0 -1px 0 var(--color-border);
}
.data-sheet__table thead th:first-child {
left: 0;
z-index: 4;
}
/* The row-label column pins too — the header alone doesn't tell you which
row you're reading once you've scrolled sideways. Opaque, so the cells
it slides over disappear under it cleanly. */
.data-sheet__table tbody tr > *:first-child {
position: sticky;
left: 0;
z-index: 2;
background: var(--color-surface);
font-weight: 500;
box-shadow: inset -1px 0 0 var(--color-border);
}
/* The crosshair. Mixed from --color-primary rather than using
--color-primary-light, which is near-white in light mode and would make
the bands invisible on exactly the theme that needs them most.
Translucent on purpose: the row band paints over the column band, so
the cell where they cross deepens on its own. */
.data-sheet__table col.is-cursor-column,
.data-sheet__table tbody tr.is-cursor-row > * {
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}
/* The pinned cells can't be translucent — rows scrolling underneath would
show through them — so they take the same tint, mixed solid. */
.data-sheet__table tbody tr.is-cursor-row > *:first-child {
background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
}
.data-sheet__table thead th.is-cursor-column {
color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface-muted));
}
/* Written the long way round so it outranks the pinned first column's own
box-shadow — the cursor has to be visible in column A too. */
.data-sheet__table tbody tr > td.is-cursor,
.data-sheet__table tbody tr > th.is-cursor,
.data-sheet__table thead tr > th.is-cursor {
z-index: 5;
box-shadow: inset 0 0 0 2px var(--color-primary);
outline: none;
}
/* Sort state: a triangle in the header's reserved right-hand gutter. */
.data-sheet__table thead th::after {
content: "";
position: absolute;
right: var(--space-sm);
top: calc(50% - 2px);
border-left: 4px solid transparent;
border-right: 4px solid transparent;
opacity: 0;
transition: opacity 0.12s ease;
}
.data-sheet__table thead th:hover::after {
border-top: 5px solid currentColor;
opacity: 0.4;
}
.data-sheet__table thead th.is-sorted-asc::after {
border-top: none;
border-bottom: 5px solid var(--color-primary);
opacity: 1;
}
.data-sheet__table thead th.is-sorted-desc::after {
border-bottom: none;
border-top: 5px solid var(--color-primary);
opacity: 1;
}
/* A comment anchor inside a cell still shows, but as a mark, not as
something you can open — the sheet is a copy, and its threads live back
in the document. */
.data-sheet mark {
background: transparent;
color: inherit;
text-decoration: underline wavy var(--color-highlight-open-border);
text-decoration-skip-ink: none;
pointer-events: none;
}
.data-sheet__address {
min-width: 3.25rem;
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-weight: 600;
color: var(--color-text);
}
.data-sheet__address.is-copied {
color: var(--color-success);
}
.data-sheet__address.is-copied::after {
content: " copied";
font-family: var(--font-sans);
font-weight: 400;
}
.data-sheet__column {
min-width: 0;
max-width: 14rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 600;
color: var(--color-text);
}
.expander--grid .expander__status { flex-wrap: wrap; padding-block: var(--space-sm); }
.data-sheet__hint { display: flex; align-items: center; gap: 4px; color: var(--color-text); }
.expander--grid kbd { border: 1px solid var(--color-border-strong); border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px; font: 500 0.8rem var(--font-mono); color: var(--color-text); background: var(--color-surface); }
.data-sheet__comment { flex: none; }
.data-sheet__comment[hidden] { display: none; }
@media (max-width: 640px) {
/* A phone has no room for a framed dialog: the takeover takes the screen.
Sized by `inset` rather than 100vw/100dvh — a modal dialog's default
`margin: auto` centres it, so any disagreement between the viewport units
and the actual layout width leaves a sliver of backdrop down one edge. */
.expander {
inset: 0;
width: auto;
height: auto;
max-width: none;
max-height: none;
margin: 0;
border: none;
border-radius: 0;
}
/* No room for keyboard instructions beside the cell address — but the
diagram's hint is the only place the pan/zoom gestures are named, and
it's short enough to keep. */
.expander__hint {
display: none;
}
.expander--diagram .expander__hint,
.expander--image .expander__hint {
display: block;
}
.data-sheet__column { max-width: 6rem; }
.data-sheet__dimensions { margin-right: auto; }
}
/* Source-backed element commenting: steady document geometry, a floating
inspector on desktop, and a reachable bottom sheet on touch screens. */
[data-source-target] { cursor: pointer; }
th[data-source-target], td[data-source-target] { position: relative; }
.markdown-rendered .data-grid tr > :is(th, td):hover,
.data-sheet .data-sheet__table tr > :is(th, td):hover {
background-color: var(--color-interaction-hover-bg);
}
th[data-source-target]:focus-visible, td[data-source-target]:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: -2px;
}
.markdown-rendered .data-grid :is(th, td)[data-source-target].is-source-browsing,
.markdown-rendered .data-grid :is(th, td)[data-source-target].is-source-selected,
.data-sheet__table tr > :is(th, td)[data-source-target].is-source-selected {
outline: 2px solid var(--color-primary);
outline-offset: -2px;
background-color: var(--color-interaction-active-bg);
}
/* Focus follows the actual SVG shape, not the group box enlarged by badges. */
svg .node[data-source-target], svg path.flowchart-link[data-source-target] { outline: none; }
svg .node[data-source-target]:focus-visible .source-node-shape {
stroke: var(--color-primary) !important;
stroke-width: 3px !important;
}
svg .node.is-source-selected .source-node-shape {
stroke: var(--color-primary) !important;
stroke-width: 3px !important;
}
svg path.flowchart-link[data-source-target]:not(.source-edge-hit):focus-visible {
stroke: var(--color-primary) !important;
stroke-width: 4px !important;
}
svg path.flowchart-link.is-source-selected:not(.source-edge-hit) {
stroke: var(--color-primary) !important;
stroke-width: 4px !important;
}
svg path.source-edge-hit {
stroke: transparent !important;
stroke-width: 24px !important;
fill: none !important;
pointer-events: none;
vector-effect: non-scaling-stroke;
}
.source-thread-badge.anchor-highlight {
display: inline-block;
background: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface));
color: var(--color-primary);
border: 1px solid color-mix(in srgb, var(--color-primary) 55%, var(--color-surface));
border-radius: 999px;
font: 600 11px/18px var(--font-sans);
min-width: 20px;
text-align: center;
padding: 0;
margin-inline-start: 6px;
cursor: pointer;
}
td > .source-thread-badge, th > .source-thread-badge { position: absolute; top: 6px; margin: 0; }
/* Mermaid's diagram-ID selectors otherwise recolor these as node shapes. */
svg .source-thread-badge circle { fill: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface)) !important; stroke: color-mix(in srgb, var(--color-primary) 55%, var(--color-surface)) !important; stroke-width: 1px !important; }
svg .source-thread-badge text { fill: var(--color-primary) !important; font: 600 10px var(--font-sans); text-anchor: middle; }
.plan-layout--hide-resolved .source-thread-badge.anchor-highlight--resolved { display: none; }
/* Source selections use the same composer and thread chrome as text selections.
Only their top-layer positioning and multiple-thread container differ. */
.source-comments { position: fixed; margin: 0; max-width: calc(100vw - 32px); color: var(--color-text); }
.source-comments:not(.comment-form--sheet):not(.thread-popover--sheet) { inset: auto; }
.source-comments__discussion + .source-comments__discussion { border-top: 1px solid var(--color-border); margin-top: var(--space-md); padding-top: var(--space-md); }
.source-comments > .comment-form__actions { margin-top: var(--space-sm); }
.source-comments .comment-form__actions[hidden] { display: none; }
.data-sheet__sort { margin-left: 8px; border: 0; background: transparent; color: inherit; cursor: pointer; min-width: 32px; min-height: 32px; }
@media (max-width: 640px) {
.comment-form.comment-form--sheet, .thread-popover.thread-popover--sheet { width: 100%; max-width: 100%; }
}
@media (hover: none) {
.markdown-rendered .mermaid-diagram__expand,
.markdown-rendered .image-frame__expand { opacity: 1; min-width: 44px; min-height: 44px; }
}
.source-comments-outdated { grid-column: 1 / -1; justify-self: start; margin-top: var(--space-md); }
.is-comment-mode svg path.source-edge-hit { pointer-events: stroke; }
.diagram-comments { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm); }
.mermaid-diagram > .diagram-comments { padding: var(--space-sm); border-top: 1px solid var(--color-border); }
.diagram-comments__hint { color: var(--color-text-muted); font-size: var(--text-sm); }
.diagram-comments [hidden] { display: none; }
.diagram-comments:not(:has(> :not([hidden]))) { display: none; }
.is-comment-mode svg { user-select: none; -webkit-user-select: none; }
.diagram-comments kbd { font: inherit; border: 1px solid var(--color-border-strong); border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px; }
.diagram-comments__toggle[aria-pressed="true"] { color: var(--color-primary); border-color: var(--color-primary); background: var(--color-interaction-active-bg); }
.expander--diagram .expander__status { flex-wrap: wrap; }
.expander--diagram.is-comment-mode .expander__hint { display: none; }
.diagram-comments__whole { position: relative; }
/* Reading a compact row is deliberate; moving the cursor never adds a pane. */
.data-sheet__table tr.is-expanded > td {
white-space: normal;
overflow: visible;
overflow-wrap: anywhere;
}
.data-sheet__table tr.is-expanded code { white-space: normal; overflow-wrap: anywhere; }
.data-sheet__row-toggle { flex: none; }
.data-sheet__row-toggle[hidden] { display: none; }
/* Keep browsing cursors stable across shapes, labels and connection paths.
Only actual comment targets receive the speech-bubble pointer. */
:root {
--cursor-comment: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M3 2v22l5-6 4 9 4-2-4-9h8Z' fill='white' stroke='%230f172a' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M19 8h9a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-3l-4 4v-4h-2a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2Z' fill='%2360a5fa' stroke='%230f172a' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2, pointer;
}
:is(.mermaid-diagram__canvas, .expander__canvas) svg,
:is(.mermaid-diagram__canvas, .expander__canvas) svg :is([data-source-target], .node *, .source-edge-label *) {
cursor: inherit;
}
:is(.mermaid-diagram__canvas, .expander__canvas) svg .source-thread-badge,
.is-comment-mode svg :is(.node[data-source-target], path[data-source-target], .source-edge-label) {
cursor: var(--cursor-comment);
}
/* Hover and keyboard focus provide the same affordance, without repainting
every target or changing authored line styles when comment mode opens. */
.is-comment-mode:not(:has(.is-grabbing)) svg .node[data-source-target]:is(:hover, :focus-visible) .source-node-shape,
.is-comment-mode:not(:has(.is-grabbing)) svg path.flowchart-link[data-source-target]:not(.source-edge-hit):is(:hover, :focus-visible),
.is-comment-mode:not(:has(.is-grabbing)) svg path.flowchart-link:has(+ .source-edge-hit:hover),
.is-comment-mode:not(:has(.is-grabbing)) svg .source-edge-label:hover {
filter: drop-shadow(0 0 2px color-mix(in srgb, var(--color-primary) 40%, transparent));
}
.is-whole-diagram-comment :is(.mermaid-diagram__canvas, .expander__canvas):not(.is-grabbing) {
cursor: var(--cursor-comment);
}
.is-whole-diagram-comment :is(.mermaid-diagram__canvas, .expander__canvas):not(.is-grabbing):hover {
box-shadow: inset 0 0 4px color-mix(in srgb, var(--color-primary) 40%, transparent);
}
.expander__canvas.is-grabbing,
.expander__canvas.is-grabbing svg * { cursor: grabbing !important; }
.source-edge-badges { pointer-events: none; }
.source-edge-badges [data-source-badge] { pointer-events: all; }
/* Rich editing uses the same .markdown-rendered typography as reading. */
.document-editor { max-width: var(--max-width); margin: 0 auto; }
.document-editor__top { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.document-editor__identity { flex: 1; min-width: 0; }
.document-editor__title { width: 100%; font: inherit; font-size: 26px; font-weight: 600; letter-spacing: -0.04em; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--color-text); }
.document-editor__title:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.document-editor__toolbar { position: sticky; top: calc(var(--nav-height) + 8px); z-index: 5; display: flex; align-items: flex-start; gap: 12px; padding: 8px 12px; margin-bottom: 18px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); }
.document-editor__format-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 3px; min-width: 0; flex: 1; }
.document-editor__save-status { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 32px; min-height: 32px; flex-shrink: 0; color: var(--color-text-muted); }
.document-editor__save-status > svg { display: none; flex-shrink: 0; }
.document-editor__save-status[data-state="queued"] .document-editor__save-queued { display: block; opacity: .65; }
.document-editor__save-status[data-state="loading"] .document-editor__save-spinner,
.document-editor__save-status[data-state="saving"] .document-editor__save-spinner { display: block; animation: editor-save-spin 800ms linear infinite; }
.document-editor__save-status[data-state="saved"] .document-editor__save-check { display: block; animation: editor-save-fade 3s ease-out forwards; }
.document-editor__save-status[data-state="error"] { color: var(--color-danger); }
.document-editor__save-status[data-state="error"] .document-editor__save-error { display: block; }
.document-editor__save-status[data-state="conflict"] { color: var(--color-danger); }
.document-editor__save-status[data-state="conflict"] .document-editor__save-conflict { display: block; }
.document-editor__save-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.document-editor__save-status[data-state="error"] .document-editor__save-text { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal; max-width: 180px; font-size: 12px; }
@keyframes editor-save-spin { to { transform: rotate(360deg); } }
@keyframes editor-save-fade { 0%, 65% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
.document-editor__save-status[data-state] .document-editor__save-spinner { animation: none; }
.document-editor__save-status[data-state="saved"] .document-editor__save-check { animation-timing-function: step-end; }
}
.document-editor__toolbar button { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 32px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--color-text); cursor: pointer; }
.document-editor__toolbar select { width: 135px; border: 0; background: transparent; color: var(--color-text); font: inherit; font-size: 13px; padding: 6px; }
.document-editor__toolbar button:hover:not(:disabled) { background: var(--color-surface-muted); border-color: var(--color-border); }
.document-editor__toolbar button[aria-pressed="true"] { color: var(--color-primary); background: var(--color-primary-light); border-color: var(--color-primary); }
.document-editor__toolbar button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.document-editor__toolbar button:disabled, .document-editor__toolbar select:disabled { opacity: .35; cursor: default; }
.document-editor__tool-divider { height: 20px; width: 1px; background: var(--color-border); margin: 0 6px; }
.format-icon { font-size: 21px; line-height: 1; font-family: Georgia, serif; }
.format-icon--bold { font-weight: 700; font-size: 18px; }
.format-icon--italic { font-style: italic; font-size: 20px; }
.format-icon--code { font-family: monospace; font-size: 15px; }
.document-editor__paper { color: var(--color-text); min-height: 65vh; }
.document-editor__body .ProseMirror { min-height: 420px; outline: none; white-space: pre-wrap; overflow-wrap: break-word; }
.ProseMirror li { position: relative; }
.ProseMirror-selectednode { outline: 2px solid var(--color-primary); }
.ProseMirror-hideselection *::selection { background: transparent; }
.document-editor__preserved { padding: 12px; border: 1px dashed var(--color-border-strong); border-radius: 8px; margin: 12px 0; color: var(--color-text-muted); }
.document-editor__preserved pre { white-space: pre-wrap; font-size: 12px; }
.document-editor__recovery-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.editor__conflict pre { max-height: 260px; overflow: auto; white-space: pre-wrap; }
@media (max-width: 640px) { .document-editor__top { flex-wrap: wrap; } .document-editor__toolbar { padding: 6px; } .document-editor__tool-divider { margin: 0 2px; } }
.document-editor__actions { display: flex; align-items: center; gap: 24px; flex-shrink: 0; }
.document-editor__back { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; color: var(--color-text-muted); }
.document-editor__back:hover { color: var(--color-text); background: var(--color-surface-muted); }
.document-editor__back:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
@media (max-width: 800px) {
.document-editor__top { flex-wrap: wrap; }
.document-editor__identity { flex-basis: 100%; }
.document-editor__actions { width: 100%; justify-content: space-between; }
}
/* One segmented control, with a raised selected segment. */
.document-editor__mode { display: inline-flex; align-items: center; gap: 2px; padding: 3px; margin: 0; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface-muted); }
.document-editor__mode button { min-width: 76px; border: 0; border-radius: 7px; color: var(--color-text-muted); background: transparent; padding: 7px 16px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; transition: background-color 120ms, color 120ms, box-shadow 120ms; }
.document-editor__mode button:hover { color: var(--color-text); }
.document-editor__mode button[aria-pressed="true"] { color: var(--color-text); background: var(--color-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .14), inset 0 0 0 1px var(--color-border); }
.document-editor__mode button:focus-visible, .document-editor__toolbar select:focus-visible, .document-editor__code-language:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.document-editor__toolbar select, .document-editor__toolbar select option, .document-editor__code-language { background-color: var(--color-surface); color: var(--color-text); }
.document-editor__toolbar select:focus { background-color: var(--color-primary-light); }
.document-editor__raw .ProseMirror { min-height: 420px; outline: none; }
.document-editor__raw pre { margin: 0; padding: 0; border: none; background: transparent; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--color-text); font: 14px/1.75 var(--font-mono, monospace); tab-size: 2; }
.document-editor__block { margin: 16px 0; border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; white-space: normal; }
.document-editor__block-header { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 8px 12px; background: var(--color-surface-muted); font: 12px/1.5 var(--font-sans, sans-serif); color: var(--color-text-muted); }
.document-editor__block-header > span:first-child { margin-right: auto; }
.document-editor__block-header button { border: 0; padding: 3px 6px; background: transparent; color: var(--color-primary); font: inherit; cursor: pointer; }
.document-editor__code-window > .document-editor__block-header { justify-content: flex-start; flex-wrap: nowrap; background: var(--code-header-bg); color: var(--code-header-text); gap: 14px; padding: 7px 12px; border-bottom: 1px solid var(--color-border); }
.document-editor__window-controls { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.document-editor__window-dot, .document-editor__block-header .document-editor__window-close { width: 12px; height: 12px; border-radius: 50%; display: block; padding: 0; }
.document-editor__block-header .document-editor__window-close { background: #ff5f57; color: transparent; font: bold 12px/12px Arial, sans-serif; position: relative; }
.document-editor__window-close::before { content: ""; position: absolute; inset: -6px; }
.document-editor__block-header .document-editor__window-close:hover, .document-editor__block-header .document-editor__window-close:focus-visible { color: #64221e; }
.document-editor__window-close:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.document-editor__window-dot--yellow { background: #febc2e; }
.document-editor__window-dot--green { background: #28c840; }
.document-editor__code-language { width: 160px; min-width: 0; padding: 3px 6px !important; margin: 0 !important; border: 1px solid transparent; border-radius: 4px; font: inherit; }
.document-editor__code-window .document-editor__code-language { background: transparent; color: var(--code-header-text); }
.document-editor__code-language:hover, .document-editor__code-language:focus { border-color: var(--color-border); }
.document-editor__code-window > .document-editor__block-header > button:last-child { margin-left: auto; white-space: nowrap; }
.document-editor__block pre { margin: 0; border-radius: 0; white-space: pre-wrap; }
.document-editor__block-preview { padding: 12px; }
.document-editor__block-preview .markdown-rendered > :last-child { margin-bottom: 0; }
.document-editor__block-preview table { width: 100%; }
.document-editor__block-preview:empty { display: none; }
.document-editor__block-preview .mermaid-diagram { max-height: 360px; }
.document-editor__preview-note { color: var(--color-text-muted); font: 12px/1.5 var(--font-sans, sans-serif); }
.document-editor [hidden] { display: none !important; }
html[data-theme="dark"] .document-editor select, html[data-theme="dark"] .document-editor input { color-scheme: dark; }
html[data-theme="light"] .document-editor select, html[data-theme="light"] .document-editor input { color-scheme: light; }
@media (prefers-color-scheme: dark) { html:not([data-theme]) .document-editor select, html:not([data-theme]) .document-editor input { color-scheme: dark; } }
/* Each pane owns its selection; the form owns the shared draft/save queue. */
.document-editor[data-mode="dual"] .document-editor__paper { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.document-editor__raw, .document-editor__body { min-width: 0; }
.document-editor[data-mode="dual"] .document-editor__raw { padding-right: 24px; border-right: 1px solid var(--color-border); }
.document-editor__body .ProseMirror > p:last-child:empty { min-height: 1.75em; }
.document-editor__block > pre > code { display: block; font: inherit; white-space: pre-wrap; min-height: 1.5em; tab-size: 2; }
.document-editor__insert-code { position: relative; }
.inline-editor { width: 100%; }
.inline-editor--preparing { position: absolute; inset: 0 0 auto; visibility: hidden; pointer-events: none; }
.inline-editor .document-editor { max-width: none; margin: 0; }
.inline-editor .document-editor__toolbar { position: sticky; top: calc(var(--nav-height) + 8px); z-index: 20; align-items: center; gap: 8px; min-width: 0; margin-bottom: 14px; box-shadow: var(--shadow-pop); }
.inline-editor .document-editor__format-controls { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; }
.inline-editor .document-editor__format-controls::-webkit-scrollbar { display: none; }
.inline-editor .document-editor__format-controls > * { flex-shrink: 0; }
.inline-editor .document-editor__more-tools { flex-shrink: 0; width: 24px; height: 32px; border-left-color: var(--color-border); border-radius: 0; color: var(--color-text-muted); font-size: 24px; line-height: 1; }
.inline-editor .document-editor__inline-mode { flex-shrink: 0; }
.inline-editor .document-editor__toolbar .document-editor__inline-mode button { width: auto; height: 32px; min-width: 0; padding: 5px 9px; white-space: nowrap; font-size: 12px; }
.inline-editor .document-editor__toolbar .document-editor__inline-mode button:hover { color: var(--color-text); }
.inline-editor .document-editor__toolbar .document-editor__close-inline { position: relative; flex: 0 0 34px; color: var(--color-text-muted); opacity: .62; }
.inline-editor .document-editor__toolbar .document-editor__close-inline:hover { color: var(--color-text); opacity: 1; }
.inline-editor .document-editor__toolbar .document-editor__close-inline:disabled { opacity: .62; }
.inline-editor .document-editor__close-inline[data-state="queued"] .document-editor__close-icon,
.inline-editor .document-editor__close-inline[data-state="loading"] .document-editor__close-icon,
.inline-editor .document-editor__close-inline[data-state="saving"] .document-editor__close-icon,
.inline-editor .document-editor__close-inline[data-state="error"] .document-editor__close-icon,
.inline-editor .document-editor__close-inline[data-state="conflict"] .document-editor__close-icon { display: none; }
.inline-editor .document-editor__close-inline .document-editor__save-status { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; min-width: 0; min-height: 0; pointer-events: none; color: inherit; }
.inline-editor .document-editor__close-inline[data-state="queued"] .document-editor__save-status,
.inline-editor .document-editor__close-inline[data-state="loading"] .document-editor__save-status,
.inline-editor .document-editor__close-inline[data-state="saving"] .document-editor__save-status,
.inline-editor .document-editor__close-inline[data-state="error"] .document-editor__save-status,
.inline-editor .document-editor__close-inline[data-state="conflict"] .document-editor__save-status { display: flex; }
.inline-editor .document-editor__close-inline .document-editor__save-status > svg { width: 18px; height: 18px; }
.inline-editor .document-editor__close-inline[data-state="queued"] .document-editor__save-queued { display: none; }
.inline-editor .document-editor__close-inline[data-state="queued"] .document-editor__save-spinner { display: block; animation: editor-save-spin 3.6s linear infinite; }
.inline-editor .document-editor__close-inline[data-state="error"],
.inline-editor .document-editor__close-inline[data-state="conflict"] { color: var(--color-danger); opacity: 1; }
.inline-editor .document-editor__close-inline .document-editor__save-status .document-editor__save-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .inline-editor .document-editor__close-inline[data-state="queued"] .document-editor__save-spinner { animation: none; } }
.inline-editor__title { display: block; width: 100%; max-width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--color-text); font: inherit; font-size: var(--text-2xl); font-weight: 600; line-height: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
.inline-editor__title:focus { outline: none; }
.inline-editor__title:empty::before { content: attr(data-placeholder); color: var(--color-text-muted); pointer-events: none; }
.inline-editor__title:focus-visible { text-decoration: underline; text-decoration-color: var(--color-border); text-decoration-thickness: 1px; text-underline-offset: 5px; }
.page-header__title[hidden] { display: none; }
.inline-editor .document-editor__paper { min-height: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.inline-editor .document-editor__body .ProseMirror { min-height: 40vh; }
.inline-editor__error { margin: 12px 0 0; padding: 10px 12px; border-radius: 6px; background: var(--color-danger-bg, #fef2f2); color: var(--color-danger); font-size: 13px; }
.document-editor__details { width: min(360px, calc(100vw - 32px)); padding: 16px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); box-shadow: var(--shadow-lg); }
.document-editor__details label { display: block; margin: 0 0 5px; font-size: 12px; font-weight: 600; color: var(--color-text-muted); }
.document-editor__details-input { display: block; width: 100%; margin: 0 0 14px; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-input-bg); color: var(--color-text); font: inherit; }
.document-editor__details-input:last-child { margin-bottom: 0; }
.site-nav__edit { display: inline-flex; align-items: center; gap: 5px; margin-left: var(--space-sm); padding: 6px 9px; border-radius: 6px; color: var(--color-text-muted); font-size: 13px; font-weight: 600; text-decoration: none; }
.site-nav__edit:hover, .site-nav__edit:focus-visible { background: var(--color-surface-muted); color: var(--color-text); }
.site-nav__edit[data-editing="true"] { display: none; }
.plan-done-icon { display: none; }
.plan-done-label { display: none; }
[data-editing="true"] .plan-done-icon { display: inline; }
[data-editing="true"] .plan-edit-icon { display: none; }
[data-editing="true"] .plan-edit-label { display: none; }
[data-editing="true"] .plan-done-label { display: inline; }
@media (max-width: 700px) { .inline-editor .document-editor__toolbar { padding: 6px; } .inline-editor .document-editor__toolbar select { width: 116px; } .inline-editor .document-editor__inline-mode button { padding: 6px; } }
@media (max-width: 640px) { .inline-editor__title { font-size: var(--text-xl); } }
.document-editor__code-picker { position: fixed; inset: auto; margin: 0; width: 268px; max-width: calc(100vw - 16px); box-sizing: border-box; padding: 10px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-pop); overflow: auto; }
.document-editor__code-picker:popover-open { display: flex; flex-direction: column; gap: 8px; }
.document-editor__code-picker input { width: 100%; box-sizing: border-box; margin: 0; padding: 9px 10px; font: inherit; font-size: 13px; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 6px; }
.document-editor__code-options { overflow-y: auto; min-height: 0; max-height: 248px; flex-shrink: 1; }
.document-editor__code-picker .document-editor__code-options button { display: block; width: 100%; height: auto; min-height: 36px; padding: 8px 10px; text-align: left; font-size: 13px; font-weight: 400; color: var(--color-text); border-radius: 6px; }
.document-editor__code-picker .document-editor__code-options button:hover, .document-editor__code-picker .document-editor__code-options button[aria-selected="true"] { background: var(--color-primary-light); color: var(--color-primary); }
.document-editor__code-picker .document-editor__code-insert { flex-shrink: 0; width: 100%; height: auto; padding: 8px 10px; border-top: 1px solid var(--color-border); border-radius: 0; color: var(--color-primary); font-size: 13px; }
@media (max-width: 800px) {
.document-editor[data-mode="dual"] .document-editor__paper { grid-template-columns: minmax(0, 1fr); }
.document-editor[data-mode="dual"] .document-editor__raw { padding-right: 0; padding-bottom: 24px; border-right: 0; border-bottom: 1px solid var(--color-border); }
.document-editor[data-mode="dual"] .ProseMirror { min-height: 200px; }
}
/* One translucent window. The document supplies the color beneath the glass. */
.comment-window {
position: fixed;
inset: auto;
margin: 0;
width: 360px;
max-width: calc(100vw - 24px);
max-height: calc(100dvh - 24px);
padding: 10px 14px 28px;
border-radius: 16px;
border: 1px solid light-dark(#ffffffb3, #ffffff30);
background: linear-gradient(145deg, light-dark(#ffffffa6, #26354a80), light-dark(#f6f8fc70, #16203366));
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
box-shadow: inset 0 1px 0 #ffffff30, inset 0 -1px 0 #ffffff0a, 0 8px 30px #00000026;
color: var(--color-text);
overflow: auto;
}
.comment-window:popover-open { display: flex; flex-direction: column; }
/* Keep every nested scroller on the same glass surface, including textareas. */
.comment-window,
.comment-window * {
scrollbar-width: thin;
scrollbar-color: light-dark(#47556955, #ffffff40) transparent;
}
.comment-window:hover,
.comment-window *:hover,
.comment-window *:focus-visible {
scrollbar-color: light-dark(#47556988, #ffffff70) transparent;
}
@supports not (scrollbar-width: thin) {
.comment-window::-webkit-scrollbar,
.comment-window *::-webkit-scrollbar { width: 8px; height: 8px; }
.comment-window::-webkit-scrollbar-track,
.comment-window *::-webkit-scrollbar-track,
.comment-window::-webkit-scrollbar-corner,
.comment-window *::-webkit-scrollbar-corner { background: transparent; }
.comment-window::-webkit-scrollbar-thumb,
.comment-window *::-webkit-scrollbar-thumb {
border: 2px solid transparent;
border-radius: 999px;
background: light-dark(#47556955, #ffffff40);
background-clip: padding-box;
}
.comment-window::-webkit-scrollbar-thumb:hover,
.comment-window *::-webkit-scrollbar-thumb:hover { background-color: light-dark(#47556988, #ffffff70); }
}
.comment-window > * { flex-shrink: 0; }
.comment-window > .thread-popover__comments,
.comment-window > [data-coplan--source-comments-target="discussions"] { min-height: 0; overflow-y: auto; flex-shrink: 1; }
.comment-window > [data-coplan--source-comments-target="discussions"] { padding-bottom: 8px; scroll-padding-block: 8px; }
.comment-window__bar { display: flex; margin: -4px -6px 5px; }
.comment-window__move {
width: 100%; display: flex; align-items: center; gap: 6px; padding: 6px;
border: 0; border-radius: 7px; background: transparent; color: var(--color-text-muted);
font: 500 11px var(--font-sans); cursor: grab; touch-action: none; text-align: left;
}
.comment-window__move:active { cursor: grabbing; }
.comment-window__move:hover { background: var(--color-interaction-hover-bg); }
.comment-window__resize {
position: absolute; right: 2px; bottom: 2px; display: grid; place-items: center;
width: 22px; height: 22px; padding: 0; border-radius: 0;
border: 0; background: transparent;
box-shadow: none; color: var(--color-text-muted); cursor: nwse-resize; touch-action: none;
}
.comment-window button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.comment-window__resize:hover { color: var(--color-primary); background: transparent; }
.comment-window .comment-form__anchor > .text-muted { display: none; }
.comment-window .comment-form__quote, .comment-window .thread-popover__quote {
font-size: 12px; line-height: 1.5; max-height: 54px; overflow: auto;
border-left: 2px solid var(--color-primary); background: var(--color-interaction-hover-bg); margin: 0 0 8px;
}
.composer { min-width: 0; }
.composer__writing { display: flex; flex-direction: column; min-height: 0; }
.composer .composer__input {
width: 100%; min-height: 70px; padding: 9px 10px; margin: 0;
border: 1px solid light-dark(#ffffff70, #ffffff18); border-radius: 9px;
background: light-dark(#ffffff30, #07111d18); color: var(--color-text);
font: 13px/1.55 var(--font-sans); resize: none;
}
.composer .composer__input:focus { outline: none; border-color: color-mix(in srgb, var(--color-primary) 55%, transparent); box-shadow: 0 0 0 2px var(--color-focus-ring); }
.composer__input::placeholder { color: var(--color-text-muted); }
.composer__toolbar, .composer__send-actions { display: flex; align-items: center; gap: 5px; }
.composer__toolbar { justify-content: space-between; padding-top: 7px; }
.composer__dictate, .composer__cancel { display: inline-flex; align-items: center; gap: 4px; padding: 5px 6px; border: 0; border-radius: 7px; background: transparent; color: var(--color-text-muted); font: 12px var(--font-sans); cursor: pointer; }
.composer__dictate:hover, .composer__cancel:hover { background: var(--color-interaction-hover-bg); color: var(--color-primary); }
.composer__dictate[aria-pressed="true"] { color: var(--color-primary); background: var(--color-interaction-active-bg); }
.composer__dictate:disabled { opacity: .55; cursor: default; }
.composer .composer__submit { font-size: 12px; padding: 5px 10px; border-radius: 8px; gap: 6px; }
.composer__status:not(:empty), .composer .comment-form__error:not(:empty) { padding-top: 6px; font-size: 12px; }
.comment__editor[hidden], .comment__body[hidden], .comment__actions[hidden] { display: none; }
.comment__editor { margin-top: 8px; }
.comment__actions { display: flex; gap: 6px; }
.thread-popover__reply .comment-thread__reply { border: 0; margin: 0; padding: 0; }
.thread-popover:has(.comment__editor:not([hidden])) > .thread-popover__reply,
.source-comments__thread:has(.comment__editor:not([hidden])) > .thread-popover__reply { display: none; }
/* Extra space goes to writing, only after an explicit resize. */
.comment-window[data-resized] > form:not([hidden]),
.comment-window[data-resized] > .thread-popover__reply,
.comment-window[data-resized] .thread-popover__reply .comment-thread__reply,
.comment-window[data-resized] .thread-popover__reply form,
.comment-window[data-resized] .composer,
.comment-window[data-resized] .composer__writing { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.comment-window[data-resized] { overflow: hidden; }
.comment-window[data-resized] .composer__input { flex: 1; }
.comment-window[data-resized] .composer__toolbar,
.comment-window[data-resized] .composer__status,
.comment-window[data-resized] .comment-form__error { flex-shrink: 0; }
.comment-window[data-resized] > .thread-popover__reply { flex: 1 0 auto; min-height: 120px; }
.comment-window[data-resized] > .thread-popover__comments { min-height: 0; max-height: 40%; overflow: auto; flex-shrink: 1; }
.comment-window[data-resized] > form:not([hidden]) { overflow: auto; }
.comment-window.comment-form--sheet, .comment-window.thread-popover--sheet { width: 100%; max-width: 100%; border-radius: 16px 16px 0 0; }
@media (max-width: 640px) { .composer .composer__input { font-size: 16px; } }
@media (prefers-reduced-transparency: reduce) { .comment-window { background: var(--color-surface); backdrop-filter: none; -webkit-backdrop-filter: none; } }
.comment-window[data-resized] .thread-popover__comments:has(.comment__editor:not([hidden])) { flex: 1; max-height: none; }
.comment-window[data-resized] .comment:has(.comment__editor:not([hidden])),
.comment-window[data-resized] .comment__editor:not([hidden]),
.comment-window[data-resized] .comment__editor > form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.source-comments[data-resized] > [data-coplan--source-comments-target="discussions"]:not(:empty) { overflow: auto; max-height: 40%; }
.source-comments[data-resized]:has(> form[hidden]) > [data-coplan--source-comments-target="discussions"] { display: flex; flex-direction: column; flex: 1; min-height: 0; max-height: none; }
.source-comments[data-resized]:has(> form[hidden]) .source-comments__discussion,
.source-comments[data-resized]:has(> form[hidden]) .source-comments__thread { display: flex; flex-direction: column; flex: 1 0 auto; }
.source-comments[data-resized]:has(> form[hidden]) .thread-popover__reply { display: flex; flex-direction: column; flex: 1 0 auto; min-height: 120px; }
.source-comments[data-resized] .source-comments__thread:has(.comment__editor:not([hidden])) > .thread-popover__reply { display: none; }
.comment-window.comment-form--sheet, .comment-window.thread-popover--sheet { right: 0; bottom: 0; }
.composer__voice { display: flex; align-items: center; }
.microphone-settings { display: inline-flex; }
.microphone-settings__button { display: grid; place-items: center; width: 22px; height: 26px; padding: 0; border: 0; border-radius: 6px; color: var(--color-text-muted); background: transparent; cursor: pointer; }
.microphone-settings__button:hover { color: var(--color-primary); background: var(--color-interaction-hover-bg); }
.microphone-settings__panel { position: fixed; inset: auto; margin: 0; padding: 12px; width: 270px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-lg); font: 12px/1.5 var(--font-sans); }
.microphone-settings__panel:popover-open { display: flex; flex-direction: column; gap: 10px; }
.microphone-settings__panel label { display: flex; flex-direction: column; gap: 5px; font-weight: 600; }
.microphone-settings__panel select { width: 100%; padding: 6px; background: var(--color-input-bg); color: var(--color-text); border: 1px solid var(--color-border); border-radius: 6px; }
.microphone-settings__status { color: var(--color-text-muted); }
.voice-control .microphone-settings__button { height: 32px; }
.voice-status:not(:empty) { max-width: min(360px, calc(100vw - 100px)); white-space: normal; }
/* Quiet discussion tools share the title row; writing keeps its own space. */
.comment-window__bar { align-items: center; gap: 4px; }
.comment-window__move { flex: 1; min-width: 0; width: auto; }
.comment-window__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 26px; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--color-text-muted); opacity: .65; cursor: pointer; }
.comment-window__icon:hover, .comment-window__icon:focus-visible, .comment-window__icon[data-copied] { opacity: 1; color: var(--color-primary); background: var(--color-interaction-hover-bg); }
.comment-window__action { border: 0; border-radius: 5px; padding: 4px 5px; background: transparent; color: var(--color-text-muted); font: 11px var(--font-sans); cursor: pointer; white-space: nowrap; }
.comment-window__action:hover { color: var(--color-primary); background: var(--color-interaction-hover-bg); }
.comment-window__bar .thread-popover__actions { margin: 0; padding: 0; border: 0; }
.comment-window__bar .thread-popover__permalink { margin-left: 0; }
.thread-popover__header:empty { display: none; }
.comment-window .comment__actions { margin: 2px 0 0; padding: 0; gap: 3px; }
.comment-window .comment__body > :last-child { margin-bottom: 0; }
.comment-window .comment { padding: 10px 0; }
.comment-window .thread-popover__reply { margin-top: 8px; padding-top: 10px; }
.source-comments__thread > .comment-window__bar { justify-content: flex-end; margin-bottom: 0; }
.comment-window__tools { display: flex; align-items: center; gap: 4px; }
.comment-window__tools:empty { display: none; }
.comment-window .comment__meta { flex-basis: 100%; font-size: 11px; line-height: 1.4; }
.comment-window .comment__header { gap: 3px 5px; margin-bottom: 6px; }
.comment__actions { align-items: center; }
.comment__actions > form { display: flex; margin: 0; }
.comment__actions .comment-window__action { line-height: 18px; }
.thread-popover__permalink { position: relative; }
.comment-window__copy-feedback {
position: absolute; z-index: 1; top: calc(100% + 4px); right: 0;
padding: 5px 8px; border: 1px solid light-dark(#ffffffb3, #ffffff30); border-radius: 7px;
background: light-dark(#f7f9fce6, #26354ae6); color: var(--color-text);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
box-shadow: 0 3px 12px #0000001a; font: 11px/1.4 var(--font-sans);
white-space: nowrap; pointer-events: none; opacity: 0;
}
.thread-popover__permalink:hover .comment-window__copy-feedback,
.thread-popover__permalink:focus-visible .comment-window__copy-feedback,
.thread-popover__permalink[data-copied] .comment-window__copy-feedback,
.thread-popover__permalink[data-copy-failed] .comment-window__copy-feedback { opacity: 1; }
/* Ask bar: ask about the whole document, pinned under it. Leaves room on
the right for the voice button and below the document so nothing hides
behind it. */
.ask-bar {
position: fixed;
left: 50%;
bottom: var(--space-lg);
z-index: 39;
width: min(36rem, calc(100vw - 2 * var(--space-lg) - 6rem));
transform: translateX(-50%);
display: flex;
align-items: center;
gap: var(--space-xs);
padding: 0.3rem 0.3rem 0.3rem 0.9rem;
border: 1px solid var(--card-edge);
border-radius: 999px;
background: var(--glass-bg-strong);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
box-shadow: var(--shadow-lg);
}
.ask-bar:focus-within { border-color: var(--color-primary); }
.ask-bar[data-busy] { opacity: 0.75; }
.ask-bar__input {
flex: 1;
min-width: 0;
border: 0;
background: transparent;
color: var(--color-text);
font: inherit;
font-size: 0.9rem;
outline: none;
padding: 0.35rem 0;
}
.ask-bar__input::placeholder { color: var(--color-text-muted); }
.ask-bar__kbd {
font: 11px/1 var(--font-sans);
color: var(--color-text-muted);
border: 1px solid var(--color-border);
border-radius: 4px;
padding: 2px 5px;
}
.ask-bar:focus-within .ask-bar__kbd { display: none; }
.ask-bar__modes {
display: inline-flex;
padding: 2px;
border-radius: 999px;
background: color-mix(in srgb, var(--color-text) 6%, transparent);
}
.ask-bar__mode { position: relative; cursor: pointer; }
.ask-bar__mode input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ask-bar__mode span {
display: block;
padding: 0.2rem 0.6rem;
border-radius: 999px;
font-size: 0.75rem;
color: var(--color-text-muted);
}
.ask-bar__mode input:checked + span { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-pop); }
.ask-bar__mode input:focus-visible + span { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.ask-bar__mode:hover span { color: var(--color-text); }
.ask-bar__send {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border: 0;
border-radius: 50%;
background: var(--color-primary);
color: #fff;
cursor: pointer;
}
.ask-bar__send:hover { background: var(--color-primary-hover); }
.ask-bar__send:disabled { cursor: progress; }
.ask-bar__error:empty { display: none; }
.ask-bar__error {
position: absolute;
left: 1rem;
bottom: calc(100% + 6px);
font-size: 0.75rem;
color: var(--color-danger, #dc2626);
}
body:has(.ask-bar) .main-content { padding-bottom: 5rem; }
/* Anything scrolled into view (focus, links, j/k) stops above the bar. */
html:has(.ask-bar) { scroll-padding-bottom: 5rem; }
@media (max-width: 640px) {
.ask-bar { left: var(--space-md); right: calc(var(--space-md) + 3.5rem); width: auto; transform: none; bottom: var(--space-md); }
.ask-bar__kbd { display: none; }
}
/* Excalidraw drawings (excalidraw_controller). Framed like a Mermaid
diagram; Edit and expand sit in the corner and show on hover. */
.markdown-rendered .excalidraw-drawing {
position: relative;
margin: 0 0 var(--space-md);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
}
.markdown-rendered .excalidraw-drawing__canvas {
display: flex;
justify-content: center;
overflow-x: auto;
padding: var(--space-md);
}
.markdown-rendered .excalidraw-drawing__svg { max-width: 100%; height: auto; }
.markdown-rendered .excalidraw-drawing--empty .excalidraw-drawing__canvas {
min-height: 7rem;
align-items: center;
color: var(--color-text-muted);
font-size: 0.9rem;
border-radius: inherit;
}
.markdown-rendered .excalidraw-drawing--empty:has(.excalidraw-drawing__edit) .excalidraw-drawing__canvas { cursor: pointer; }
.markdown-rendered .excalidraw-drawing--empty:has(.excalidraw-drawing__edit) .excalidraw-drawing__canvas:hover {
background: var(--color-interaction-hover-bg);
}
.markdown-rendered .excalidraw-drawing--error { padding: var(--space-md); color: var(--color-text-muted); }
.markdown-rendered .excalidraw-drawing__actions {
position: absolute;
top: var(--space-sm);
right: var(--space-sm);
display: flex;
align-items: center;
gap: var(--space-xs);
opacity: 0;
transition: opacity 0.15s ease;
}
.markdown-rendered .excalidraw-drawing__actions:empty { display: none; }
.markdown-rendered .excalidraw-drawing__expand {
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-xs);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
color: var(--color-text-muted);
cursor: zoom-in;
}
.markdown-rendered .excalidraw-drawing__comment kbd {
font: 10px/1 var(--font-sans);
padding: 1px 4px;
border: 1px solid var(--color-border);
border-radius: 3px;
color: var(--color-text-muted);
}
/* Hover, keyboard focus, or discussions on it keep the actions visible. */
.markdown-rendered .excalidraw-drawing:hover .excalidraw-drawing__actions,
.markdown-rendered .excalidraw-drawing:focus-visible .excalidraw-drawing__actions,
.markdown-rendered .excalidraw-drawing__actions:focus-within,
.markdown-rendered .excalidraw-drawing__actions:has(.has-source-comments) {
opacity: 1;
}
.markdown-rendered .excalidraw-drawing:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
/* An empty drawing invites drawing outright. */
.markdown-rendered .excalidraw-drawing--empty .excalidraw-drawing__actions { opacity: 1; }
@media (hover: none) {
.markdown-rendered .excalidraw-drawing__actions { opacity: 1; }
}
/* The editor takes over the window while you draw. */
.drawing-editor {
position: fixed;
inset: 0;
z-index: 1000;
width: 100vw;
height: 100dvh;
max-width: none;
max-height: none;
margin: 0;
padding: 0;
border: 0;
display: flex;
flex-direction: column;
background: var(--color-surface);
color: var(--color-text);
}
.drawing-editor__bar {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
border-bottom: 1px solid var(--color-border);
}
.drawing-editor__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawing-editor__status { font-size: 0.8rem; color: var(--color-text-muted); }
.drawing-editor__canvas { flex: 1; min-height: 0; position: relative; }
html.drawing-editor-open { overflow: hidden; }
/* A drawing's scene JSON in the document editor: collapsed under its preview. */
.document-editor__code--collapsed { max-height: 4.5em; overflow: hidden; opacity: 0.6; }
.document-editor__code--collapsed:focus-within { max-height: 16em; overflow: auto; opacity: 1; }
/* Excalidraw puts its dialogs (Mermaid to Excalidraw, image export, help)
in a layer on , placed for an unscrolled page. The editor fills the
window, so pin that layer to the window too, or a dialog opened from a
scrolled page lands off screen. */
html.drawing-editor-open .excalidraw-modal-container { position: fixed; }
/* Excalifont, Excalidraw's hand-drawn font (0.18.0), with the same subsets
Excalidraw itself uses. Drawings measure and wrap their labels with it, so
it has to be loaded before they render, or labels wrap with a narrower
fallback font and then clip (excalidraw_controller waits for it). */
@font-face { font-family: "Excalifont"; src: url("https://cdn.jsdelivr.net/npm/@excalidraw/excalidraw@0.18.0/dist/prod/fonts/Excalifont/Excalifont-Regular-a88b72a24fb54c9f94e3b5fdaa7481c9.woff2") format("woff2"); unicode-range: U+20-7e,U+a0-a3,U+a5-a6,U+a8-ab,U+ad-b1,U+b4,U+b6-b8,U+ba-ff,U+131,U+152-153,U+2bc,U+2c6,U+2da,U+2dc,U+304,U+308,U+2013-2014,U+2018-201a,U+201c-201e,U+2020,U+2022,U+2024-2026,U+2030,U+2039-203a,U+20ac,U+2122,U+2212; font-display: swap; }
@font-face { font-family: "Excalifont"; src: url("https://cdn.jsdelivr.net/npm/@excalidraw/excalidraw@0.18.0/dist/prod/fonts/Excalifont/Excalifont-Regular-be310b9bcd4f1a43f571c46df7809174.woff2") format("woff2"); unicode-range: U+100-130,U+132-137,U+139-149,U+14c-151,U+154-17e,U+192,U+1fc-1ff,U+218-21b,U+237,U+1e80-1e85,U+1ef2-1ef3,U+2113; font-display: swap; }
@font-face { font-family: "Excalifont"; src: url("https://cdn.jsdelivr.net/npm/@excalidraw/excalidraw@0.18.0/dist/prod/fonts/Excalifont/Excalifont-Regular-b9dcf9d2e50a1eaf42fc664b50a3fd0d.woff2") format("woff2"); unicode-range: U+400-45f,U+490-491,U+2116; font-display: swap; }
@font-face { font-family: "Excalifont"; src: url("https://cdn.jsdelivr.net/npm/@excalidraw/excalidraw@0.18.0/dist/prod/fonts/Excalifont/Excalifont-Regular-41b173a47b57366892116a575a43e2b6.woff2") format("woff2"); unicode-range: U+37e,U+384-38a,U+38c,U+38e-393,U+395-3a1,U+3a3-3a8,U+3aa-3cf,U+3d7; font-display: swap; }
@font-face { font-family: "Excalifont"; src: url("https://cdn.jsdelivr.net/npm/@excalidraw/excalidraw@0.18.0/dist/prod/fonts/Excalifont/Excalifont-Regular-3f2c5db56cc93c5a6873b1361d730c16.woff2") format("woff2"); unicode-range: U+2c7,U+2d8-2d9,U+2db,U+2dd,U+302,U+306-307,U+30a-30c,U+326-328,U+212e,U+2211,U+fb01-fb02; font-display: swap; }
@font-face { font-family: "Excalifont"; src: url("https://cdn.jsdelivr.net/npm/@excalidraw/excalidraw@0.18.0/dist/prod/fonts/Excalifont/Excalifont-Regular-349fac6ca4700ffec595a7150a0d1e1d.woff2") format("woff2"); unicode-range: U+462-463,U+472-475,U+4d8-4d9,U+4e2-4e3,U+4e6-4e9,U+4ee-4ef; font-display: swap; }
@font-face { font-family: "Excalifont"; src: url("https://cdn.jsdelivr.net/npm/@excalidraw/excalidraw@0.18.0/dist/prod/fonts/Excalifont/Excalifont-Regular-623ccf21b21ef6b3a0d87738f77eb071.woff2") format("woff2"); unicode-range: U+300-301,U+303; font-display: swap; }
/* Tag chips: on library rows (they filter the library) and under a
document's title. */
.plan-tag {
display: inline-flex;
align-items: center;
padding: 1px 8px;
border-radius: 999px;
font-size: 0.72rem;
line-height: 1.5;
color: var(--color-text-muted);
background: color-mix(in srgb, var(--color-text) 6%, transparent);
text-decoration: none;
white-space: nowrap;
}
a.plan-tag:hover { color: var(--color-primary); background: var(--color-interaction-hover-bg); }
.plan-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }
/* New question form (host partial interview_prep/_new_question). */
.new-question__open { display: inline-flex; align-items: center; gap: 6px; margin-right: var(--space-xs); }
#new-question-modal { width: min(560px, 92vw); }
.new-question textarea { resize: vertical; min-height: 6rem; line-height: 1.45; }
.new-question__row { display: grid; grid-template-columns: 1fr 9rem; gap: var(--space-sm); }
.new-question__claude { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-text); margin-top: var(--space-xs); cursor: pointer; }
.new-question__claude input { margin: 0; }
/* Phones: let a long title wrap rather than lose it to the timestamp. */
@media (max-width: 640px) {
.plan-row__title { white-space: normal; overflow-wrap: anywhere; }
.new-question textarea { min-height: 4.5rem; }
}