") */
body.editorial-calm .ec-eyebrow-inline {
font: 500 10.5px/1 var(--font-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg-muted);
margin-right: 2px;
}
/* Transcript headerbar — visitor + presence + session row */
body.editorial-calm .ec-transcript-headerbar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
font: 400 12px/1.4 var(--font-sans);
color: var(--fg-muted);
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border);
}
/* Presence pill — visitor online/offline indicator */
body.editorial-calm .ec-presence-pill {
display: inline-flex;
align-items: center;
font: 600 11px/1 var(--font-sans);
padding: 3px 10px;
border-radius: var(--radius-pill);
letter-spacing: -0.005em;
}
body.editorial-calm .ec-presence-pill.is-online { background: #D1FAE5; color: #065F46; }
/* Offline is a normal, expected state (visitor closed their tab) — a neutral
grey, not amber, so it reads as info rather than a warning. */
body.editorial-calm .ec-presence-pill.is-offline { background: var(--bg-secondary); color: var(--fg-muted); }
/* Session id — kept for support/debugging but visually recessive so it doesn't
compete with the visitor + presence in the header. */
body.editorial-calm .ec-session-ref {
font: 500 11px/1 var(--font-mono);
color: var(--fg-muted);
opacity: 0.7;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 160px;
}
/* Status pill — assignment/state indicator */
body.editorial-calm .ec-status-pill {
display: inline-flex;
align-items: center;
font: 600 11px/1 var(--font-sans);
padding: 4px 12px;
border-radius: var(--radius-pill);
letter-spacing: -0.005em;
}
body.editorial-calm .ec-status-pill--bot { background: var(--bg-secondary); color: var(--fg-muted); }
body.editorial-calm .ec-status-pill--awaiting_agent { background: #FEF3C7; color: #92400E; }
body.editorial-calm .ec-status-pill--assigned { background: var(--accent-soft); color: var(--accent); }
body.editorial-calm .ec-status-pill--resolved { background: #D1FAE5; color: #065F46; }
body.editorial-calm .ec-status-pill--archived { background: var(--bg-secondary); color: var(--fg-muted); }
/* Assignment bar — status pill + action buttons row */
body.editorial-calm .ec-assignment-bar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 10px 12px;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: var(--radius-md);
margin-bottom: 12px;
flex-wrap: wrap;
}
body.editorial-calm .ec-assignment-actions {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
/* Reassign picker (revealed when user clicks Reassign…) */
body.editorial-calm .ec-assignment-picker {
padding: 10px 12px;
background: #FEF3C7;
border: 1px solid #FDE68A;
border-radius: var(--radius-md);
margin-bottom: 12px;
}
body.editorial-calm .ec-assignment-picker__label {
font: 500 12px/1 var(--font-sans);
color: var(--fg);
margin-bottom: 6px;
}
body.editorial-calm .ec-assignment-picker__row {
display: flex;
gap: 6px;
align-items: center;
}
body.editorial-calm .ec-assignment-picker__select { flex: 1; min-width: 0; }
/* Tags panel — chips + add-form */
body.editorial-calm .ec-tags-panel {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 12px;
padding: 6px 0;
}
body.editorial-calm .ec-tags-panel__label {
font: 500 10.5px/1 var(--font-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg-muted);
margin-right: 4px;
}
body.editorial-calm .ec-tags-panel__chips {
display: inline-flex;
gap: 6px;
flex-wrap: wrap;
align-items: center;
}
body.editorial-calm .ec-tags-panel__add {
display: inline-flex;
gap: 4px;
align-items: center;
}
body.editorial-calm .ec-tags-panel__input { width: 140px; }
body.editorial-calm .ec-tag-chip {
display: inline-flex;
align-items: center;
gap: 4px;
background: var(--accent-soft);
color: var(--accent);
font: 500 11px/1.3 var(--font-sans);
padding: 3px 8px;
border-radius: var(--radius-pill);
}
body.editorial-calm .ec-tag-chip__x {
background: transparent;
border: 0;
cursor: pointer;
color: var(--accent);
font-weight: 700;
line-height: 1;
padding: 0 2px;
opacity: 0.6;
}
body.editorial-calm .ec-tag-chip__x:hover { opacity: 1; }
body.editorial-calm .ec-tags-empty {
color: var(--fg-muted);
font: 400 12px/1.4 var(--font-sans);
}
/* Notes panel — agent-only internal notes */
body.editorial-calm .ec-notes-panel {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--border);
}
body.editorial-calm .ec-notes-panel__label {
display: flex;
align-items: baseline;
gap: 8px;
font: 500 10.5px/1 var(--font-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg-muted);
margin-bottom: 10px;
}
body.editorial-calm .ec-notes-panel__hint {
font-family: var(--font-sans);
text-transform: none;
letter-spacing: 0;
font-weight: 400;
color: var(--fg-muted);
}
body.editorial-calm .ec-notes-list {
max-height: 220px;
overflow-y: auto;
margin-bottom: 10px;
}
body.editorial-calm .ec-notes-add {
display: flex;
gap: 6px;
}
body.editorial-calm .ec-notes-textarea {
flex: 1 1 auto;
resize: vertical;
min-height: 44px;
font-size: 13px;
}
body.editorial-calm .ec-notes-add-btn {
align-self: flex-end;
width: auto;
min-width: 70px;
flex: 0 0 auto;
}
/* Transcript message thread */
body.editorial-calm .ec-transcript-thread {
display: flex;
flex-direction: column;
gap: 2px;
margin: 4px 0;
}
body.editorial-calm .ec-transcript-row {
display: flex;
margin-bottom: 4px;
}
body.editorial-calm .ec-transcript-row.is-user { justify-content: flex-end; }
body.editorial-calm .ec-transcript-row.is-assistant { justify-content: flex-start; }
body.editorial-calm .ec-transcript-bubble {
max-width: 75%;
padding: 12px 16px;
border-radius: var(--radius-lg);
white-space: pre-wrap;
word-wrap: break-word;
font: 400 14px/1.55 var(--font-sans);
}
body.editorial-calm .ec-transcript-bubble.is-user {
background: var(--bg-secondary);
border: 1px solid var(--border);
color: var(--fg);
border-bottom-right-radius: 6px;
}
body.editorial-calm .ec-transcript-bubble.is-assistant {
background: var(--bg-elevated);
border: 1px solid var(--border);
color: var(--fg-body);
border-bottom-left-radius: 6px;
box-shadow: var(--shadow-1);
}
body.editorial-calm .ec-transcript-meta {
font: 500 11px/1 var(--font-mono);
color: var(--fg-muted);
letter-spacing: 0.04em;
margin: 2px 4px 12px 0;
}
body.editorial-calm .ec-transcript-meta.is-user { text-align: right; margin-right: 4px; }
body.editorial-calm .ec-transcript-meta.is-assistant { text-align: left; margin-left: 4px; }
body.editorial-calm .ec-transcript-empty {
color: var(--fg-muted);
font: 400 14px/1.55 var(--font-sans);
text-align: center;
padding: 24px 0;
}
/* Reply composer */
body.editorial-calm .ec-transcript-composer {
display: flex;
gap: 8px;
margin-top: 16px;
padding-top: 12px;
border-top: 1px solid var(--border);
}
body.editorial-calm .ec-transcript-textarea {
flex: 1 1 auto;
resize: vertical;
min-height: 44px;
font: 400 14px/1.55 var(--font-sans);
}
body.editorial-calm .ec-transcript-send {
align-self: flex-end;
width: auto;
min-width: 88px;
flex: 0 0 auto;
}
body.editorial-calm .ec-transcript-status {
font: 500 11.5px/1.4 var(--font-mono);
color: var(--fg-muted);
letter-spacing: 0.04em;
margin-top: 6px;
}
/* ─────────────────────────────────────────────
Form patterns (used inside modals)
───────────────────────────────────────────── */
body.editorial-calm .modal-content--lg { max-width: 720px; max-height: 90vh; overflow-y: auto; }
body.editorial-calm .ec-form-lede {
font: 400 14px/1.55 var(--font-sans);
color: var(--fg-muted);
margin: 0 0 18px;
}
body.editorial-calm .form-group {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 16px;
}
body.editorial-calm .form-group label {
font: 500 12px/1 var(--font-sans);
letter-spacing: 0;
color: var(--fg);
margin: 0;
text-transform: none;
display: inline-flex;
align-items: baseline;
gap: 6px;
}
body.editorial-calm .ec-field-required {
font: 600 10.5px/1 var(--font-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-danger);
}
body.editorial-calm .ec-field-optional {
font: 500 10.5px/1 var(--font-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg-muted);
}
/* Form input field defaults inside modal (overrides legacy .form-control) */
body.editorial-calm .modal-body .form-control,
body.editorial-calm .modal-body input.form-control,
body.editorial-calm .modal-body textarea.form-control {
width: 100%;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 10px 14px;
font: 400 14px/1.5 var(--font-sans);
color: var(--fg);
margin: 0;
}
body.editorial-calm .modal-body select.form-control { width: 100%; }
/* Two-column inline field row (select + free-text fallback, etc.) */
body.editorial-calm .ec-field-row {
display: flex;
gap: 8px;
align-items: center;
}
body.editorial-calm .ec-field-row__half { flex: 0 0 50%; }
body.editorial-calm .ec-field-row .form-control:not(.ec-field-row__half) { flex: 1; }
/* iOS-style toggle (replaces legacy .toggle-input checkbox) */
body.editorial-calm .ec-toggle-group { padding: 8px 0 4px; }
body.editorial-calm .ec-toggle-label {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
user-select: none;
}
body.editorial-calm .ec-toggle-input {
position: absolute;
width: 1px; height: 1px;
margin: -1px;
border: 0;
clip: rect(0 0 0 0);
overflow: hidden;
}
body.editorial-calm .ec-toggle-track {
position: relative;
width: 34px;
height: 20px;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 999px;
flex-shrink: 0;
transition: background var(--duration-fast) var(--easing-standard),
border-color var(--duration-fast) var(--easing-standard);
}
body.editorial-calm .ec-toggle-track::before {
content: "";
position: absolute;
top: 1px;
left: 1px;
width: 16px;
height: 16px;
border-radius: 999px;
background: var(--bg-elevated);
box-shadow: var(--shadow-1);
transition: transform var(--duration-fast) var(--easing-standard);
}
body.editorial-calm .ec-toggle-input:checked + .ec-toggle-track {
background: var(--accent);
border-color: var(--accent);
}
body.editorial-calm .ec-toggle-input:checked + .ec-toggle-track::before {
transform: translateX(14px);
}
body.editorial-calm .ec-toggle-input:focus-visible + .ec-toggle-track {
outline: 2px solid var(--color-teal-400);
outline-offset: 2px;
}
body.editorial-calm .ec-toggle-text {
font: 500 13.5px/1.3 var(--font-sans);
color: var(--fg);
}
body.editorial-calm .ec-toggle-hint {
font: 500 11.5px/1.3 var(--font-mono);
color: var(--fg-muted);
letter-spacing: 0.04em;
}
/* Inline progress block inside a form */
body.editorial-calm .ec-form-progress {
margin-top: 18px;
padding: 12px 14px;
background: var(--bg-secondary);
border-radius: var(--radius-md);
}
body.editorial-calm .ec-form-progress__label {
font: 500 13px/1.4 var(--font-sans);
color: var(--fg-body);
margin: 0 0 10px;
display: flex;
align-items: center;
gap: 8px;
}
/* Input box — single pill row */
body.editorial-calm .input-wrapper {
display: flex;
align-items: flex-end;
gap: 8px;
}
body.editorial-calm .input-box {
flex: 1;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 12px 16px;
display: flex;
flex-direction: column;
gap: 8px;
transition: border-color var(--duration-fast) var(--easing-standard);
}
body.editorial-calm .input-box:focus-within {
border-color: var(--accent);
box-shadow: none;
}
body.editorial-calm .input-field {
width: 100%;
border: 0;
outline: 0;
resize: none;
background: transparent;
font: 400 14.5px/1.55 var(--font-sans);
color: var(--fg);
min-height: 24px;
max-height: 220px;
padding: 0;
}
body.editorial-calm .input-field::placeholder {
color: var(--fg-muted);
}
body.editorial-calm .input-hint {
font: 500 11px/1 var(--font-mono);
color: var(--fg-muted);
letter-spacing: 0.04em;
display: flex;
align-items: center;
gap: 8px;
}
/* Send button — primary teal pill, lifts out of the input box */
body.editorial-calm .btn-send {
flex: 0 0 auto;
align-self: flex-end;
padding: 0 18px;
background: var(--accent);
color: #fff;
border: 0;
border-radius: var(--radius-pill);
font: 600 13.5px/1 var(--font-sans);
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
transition: background var(--duration-fast) var(--easing-standard);
min-height: 44px;
}
body.editorial-calm .btn-send:hover:not(:disabled) {
background: var(--accent-hover);
}
body.editorial-calm .btn-send:disabled {
background: var(--color-ink-300);
cursor: not-allowed;
}
/* Sessions panel (left side of chat page) */
body.editorial-calm .session-item {
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 12px 14px;
margin-bottom: 6px;
transition: border-color var(--duration-fast) var(--easing-standard),
background var(--duration-fast) var(--easing-standard);
}
body.editorial-calm .session-item:hover {
border-color: var(--border-strong);
background: var(--bg-secondary);
}
body.editorial-calm .session-item.active {
border-color: var(--accent);
background: var(--accent-soft);
}
body.editorial-calm .session-name {
font: 600 13.5px/1.35 var(--font-sans);
color: var(--fg);
letter-spacing: -0.005em;
}
body.editorial-calm .session-meta,
body.editorial-calm .session-item-header + div {
font: 500 11px/1 var(--font-mono);
letter-spacing: 0.06em;
color: var(--fg-muted);
margin-top: 4px;
}
/* ─────────────────────────────────────────────
Modals — confirm dialogs, file preview, profile edit,
invite member, delete chat, etc.
Two roots: .modal-overlay (used in some places) and
.modal (used by confirm-modal.js). Style both.
───────────────────────────────────────────── */
body.editorial-calm .modal-overlay,
body.editorial-calm .modal {
background: rgba(27, 28, 32, 0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
padding: var(--space-6);
}
body.editorial-calm .modal-content {
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-3);
max-width: 540px;
width: 100%;
}
body.editorial-calm .modal-small .modal-content { max-width: 440px; }
body.editorial-calm .modal-large .modal-content { max-width: 920px; }
/* Extracted-text modal: bound the height and let the body scroll (extractions
can run to many pages). Chunks flow at natural height — the modal scrolls,
not each chunk, so reading is one smooth scroll. */
body.editorial-calm #context-modal .modal-content {
max-height: 85vh;
display: flex;
flex-direction: column;
}
body.editorial-calm #context-modal .modal-body {
overflow-y: auto;
flex: 1 1 auto;
min-height: 0;
}
body.editorial-calm #context-modal .context-content { max-height: none; overflow: visible; }
/* Section summary (content-type shown once) + numbered section labels
(replace the content-type badge that was repeated on every chunk). */
body.editorial-calm #context-modal .context-summary { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
body.editorial-calm #context-modal .context-summary-count { color: var(--fg-muted); font-size: 12px; }
body.editorial-calm #context-modal .context-section-label {
font: 600 11px/1 var(--font-sans);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--fg-muted);
}
/* Rendered Markdown — real headings, lists, emphasis instead of raw text. */
body.editorial-calm #context-modal .context-content.markdown-body { white-space: normal; }
body.editorial-calm #context-modal .markdown-body > *:first-child { margin-top: 0; }
body.editorial-calm #context-modal .markdown-body > *:last-child { margin-bottom: 0; }
body.editorial-calm #context-modal .markdown-body h1,
body.editorial-calm #context-modal .markdown-body h2,
body.editorial-calm #context-modal .markdown-body h3,
body.editorial-calm #context-modal .markdown-body h4 { font-weight: 600; line-height: 1.3; margin: 14px 0 6px; }
body.editorial-calm #context-modal .markdown-body h1 { font-size: 18px; }
body.editorial-calm #context-modal .markdown-body h2 { font-size: 16px; }
body.editorial-calm #context-modal .markdown-body h3 { font-size: 14px; }
body.editorial-calm #context-modal .markdown-body h4 { font-size: 13px; }
body.editorial-calm #context-modal .markdown-body p { margin: 6px 0; }
body.editorial-calm #context-modal .markdown-body ul,
body.editorial-calm #context-modal .markdown-body ol { margin: 6px 0; padding-left: 20px; }
body.editorial-calm #context-modal .markdown-body li { margin: 2px 0; }
body.editorial-calm #context-modal .markdown-body strong { font-weight: 600; }
body.editorial-calm #context-modal .markdown-body a { color: var(--accent); }
body.editorial-calm #context-modal .markdown-body code {
background: var(--bg-secondary); padding: 1px 5px; border-radius: 4px;
font-family: var(--font-mono); font-size: 0.9em;
}
body.editorial-calm #context-modal .markdown-body pre {
background: var(--bg-secondary); padding: 10px 12px; border-radius: 6px; overflow-x: auto; margin: 8px 0;
}
body.editorial-calm #context-modal .markdown-body pre code { background: none; padding: 0; }
body.editorial-calm #context-modal .markdown-body blockquote {
border-left: 3px solid var(--border); margin: 8px 0; padding: 2px 0 2px 12px; color: var(--fg-muted);
}
body.editorial-calm #context-modal .markdown-body table { border-collapse: collapse; margin: 8px 0; }
body.editorial-calm #context-modal .markdown-body th,
body.editorial-calm #context-modal .markdown-body td { border: 1px solid var(--border); padding: 4px 8px; text-align: left; }
/* Deploy (WhatsApp/widget/hosted) connect+edit modal: wider so the full-width
handoff fields and 2-col rows aren't squeezed. Scoped to the deploy modal so
other modals are unaffected. (Note: the generic .modal-content--lg modifier is
itself shadowed by the 540px base above due to source order — a separate latent
bug; this scoped rule sidesteps it.) */
body.editorial-calm #deploy-modal .modal-content.deploy-modal-content {
max-width: 820px; max-height: 92vh; overflow-y: auto;
}
/* CTA: keep footer buttons content-width and right-aligned — the primary
shouldn't stretch across the modal. Scoped to the deploy modal. */
body.editorial-calm #deploy-modal .modal-footer { justify-content: flex-end; }
body.editorial-calm #deploy-modal .modal-footer .btn { flex: 0 0 auto; width: auto; min-width: 104px; }
/* Inline info trigger with hover/focus tooltip — used in form labels to give
extra context without cluttering the field (e.g. the WhatsApp handoff rule). */
body.editorial-calm .ec-field-info {
align-self: center;
display: inline-flex; align-items: center; justify-content: center;
width: 16px; height: 16px; padding: 0; border: 0; background: none;
color: var(--color-ink-400, #9ca3af); cursor: help; position: relative;
}
body.editorial-calm .ec-field-info:hover,
body.editorial-calm .ec-field-info:focus-visible { color: var(--accent); outline: none; }
body.editorial-calm .ec-field-info::after {
content: attr(data-ec-tip);
position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
width: 340px; max-width: 80vw; white-space: normal; text-align: left;
background: var(--color-ink-900, #1B1C20); color: #fff;
font: 400 12.5px/1.55 var(--font-sans);
padding: 11px 13px; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.18);
opacity: 0; visibility: hidden; transition: opacity .15s, visibility .15s;
z-index: 1000; pointer-events: none;
}
body.editorial-calm .ec-field-info:hover::after,
body.editorial-calm .ec-field-info:focus-visible::after { opacity: 1; visibility: visible; }
body.editorial-calm .modal-header {
padding: 22px 24px 14px;
border-bottom: 1px solid var(--border);
background: transparent;
position: relative;
}
/* Optional eyebrow above the title — add data-eyebrow="..." on .modal-header */
body.editorial-calm .modal-header[data-eyebrow]::before {
content: attr(data-eyebrow);
display: block;
font: 500 10.5px/1 var(--font-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 8px;
}
body.editorial-calm .modal-header h2,
body.editorial-calm .modal-header h3 {
font: 400 22px/1.25 var(--font-serif);
letter-spacing: -0.015em;
color: var(--fg);
font-weight: 400;
margin: 0;
}
body.editorial-calm .modal-close {
position: absolute;
top: 14px;
right: 14px;
width: 32px;
height: 32px;
background: transparent;
border: 1px solid transparent;
border-radius: var(--radius-md);
color: var(--fg-muted);
font-size: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
}
body.editorial-calm .modal-close:hover {
background: var(--bg-secondary);
border-color: var(--border);
color: var(--fg);
}
body.editorial-calm .modal-body {
padding: 18px 24px 24px;
background: transparent;
}
body.editorial-calm .modal-body p {
font: 400 14.5px/1.6 var(--font-sans);
color: var(--fg-body);
margin: 0 0 10px;
}
body.editorial-calm .modal-body p:last-child { margin-bottom: 0; }
/* Description block that may contain block-level children (lists, alerts) —
same look as a modal paragraph but a valid wrapper. */
body.editorial-calm .modal-body-text {
font: 400 14.5px/1.6 var(--font-sans);
color: var(--fg-body);
margin: 0 0 16px;
}
body.editorial-calm .modal-body p em {
font-family: var(--font-serif);
font-style: italic;
color: var(--fg);
}
body.editorial-calm .modal-body label {
display: block;
font: 500 12px/1 var(--font-sans);
color: var(--fg);
margin-bottom: 6px;
}
body.editorial-calm .modal-footer {
padding: 14px 24px 20px;
border-top: 1px solid var(--border);
background: transparent;
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
gap: 8px;
}
/* Lists inside modal bodies get a readable indent (was an inline style on the
cloud-error modal). */
body.editorial-calm .modal-body ul { margin: 8px 0 0 20px; color: var(--fg-body); }
/* Connected-account panel in the cloud-error modal (was fully inline-styled). */
body.editorial-calm .modal-account-info {
background: var(--bg-secondary);
padding: 12px;
border-radius: var(--radius-md);
margin-bottom: 16px;
}
body.editorial-calm .modal-account-info__label { font-size: 12px; color: var(--fg-body); }
body.editorial-calm .modal-account-info__email { font-weight: 500; margin: 4px 0; }
/* Paste-text dialog: opens OVER the questions modal, so it must stack above the
standard z-index:1000 overlay. Textarea was previously inline-styled. */
body.editorial-calm #textarea-dialog-overlay { z-index: 10000; }
body.editorial-calm .ec-textarea-dialog-input {
width: 100%; height: 200px; padding: 12px;
border: 1px solid var(--border); border-radius: var(--radius-md);
font-family: var(--font-sans); font-size: 14px; resize: vertical;
}
body.editorial-calm .modal-footer .btn {
padding: 8px 18px;
border-radius: var(--radius-pill);
font: 600 13px/1 var(--font-sans);
/* Override the global `.btn-primary { width: 100% }` (styles.css): in a
flex footer that makes the primary action stretch to fill the row while
the secondary stays content-width — a lopsided CTA. Footer buttons are
auto-width and cluster at flex-end. */
width: auto;
}
body.editorial-calm .modal-footer .btn-secondary {
background: transparent;
color: var(--fg);
border: 1px solid var(--border);
}
body.editorial-calm .modal-footer .btn-secondary:hover {
background: var(--bg-secondary);
}
/* Inline form/input inside modal body */
body.editorial-calm .modal-body input[type="text"],
body.editorial-calm .modal-body input[type="email"],
body.editorial-calm .modal-body input[type="password"],
body.editorial-calm .modal-body textarea,
body.editorial-calm .modal-body select {
width: 100%;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 10px 14px;
font: 400 14px/1.5 var(--font-sans);
color: var(--fg);
margin-bottom: 14px;
}
body.editorial-calm .modal-body input:focus,
body.editorial-calm .modal-body textarea:focus,
body.editorial-calm .modal-body select:focus {
border-color: var(--accent);
outline: none;
}
/* ─────────────────────────────────────────────
Files page — inline expanded preview
(rendered inside .preview-row > .file-preview-container)
───────────────────────────────────────────── */
body.editorial-calm .expand-preview-btn {
width: 24px;
height: 24px;
padding: 0;
background: transparent;
border: 1px solid transparent;
border-radius: var(--radius-sm);
color: var(--fg-muted);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform var(--duration-fast) var(--easing-standard),
background var(--duration-fast) var(--easing-standard);
}
body.editorial-calm .expand-preview-btn:hover { background: var(--bg-secondary); color: var(--fg); }
body.editorial-calm .expand-preview-btn.expanded { transform: rotate(90deg); color: var(--accent); }
body.editorial-calm .expand-preview-btn svg { width: 14px; height: 14px; }
body.editorial-calm tr.preview-row { background: var(--bg-secondary); }
body.editorial-calm tr.preview-row > td {
padding: 0 !important;
border-bottom: 1px solid var(--border);
}
body.editorial-calm .file-preview-container {
padding: 18px 24px;
background: var(--bg-secondary);
}
body.editorial-calm .file-preview-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
body.editorial-calm .file-preview-title {
font: 500 10.5px/1 var(--font-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent);
}
body.editorial-calm .file-preview-actions {
display: inline-flex;
align-items: center;
gap: 6px;
}
body.editorial-calm .file-preview-actions .btn,
body.editorial-calm .file-preview-actions button {
padding: 5px 12px;
font: 600 12px/1 var(--font-sans);
border-radius: var(--radius-pill);
background: var(--bg-elevated);
border: 1px solid var(--border);
color: var(--fg-body);
cursor: pointer;
}
body.editorial-calm .file-preview-actions .btn:hover,
body.editorial-calm .file-preview-actions button:hover {
background: var(--bg);
color: var(--fg);
border-color: var(--border-strong);
}
body.editorial-calm .file-preview-content {
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 14px 16px;
font: 400 13.5px/1.65 var(--font-sans);
color: var(--fg-body);
white-space: pre-wrap;
max-height: 360px;
overflow-y: auto;
}
body.editorial-calm .file-preview-content pre,
body.editorial-calm .file-preview-content code {
font-family: var(--font-mono);
font-size: 12.5px;
background: var(--bg-secondary);
padding: 2px 6px;
border-radius: 6px;
}
body.editorial-calm .file-preview-truncated {
margin-top: 8px;
padding: 8px 12px;
background: #FEF3C7;
border: 1px solid #FDE68A;
border-radius: var(--radius-md);
font: 500 12px/1.5 var(--font-sans);
color: #92400E;
display: flex;
align-items: center;
gap: 8px;
}
body.editorial-calm .file-preview-meta {
margin-top: 14px;
display: flex;
flex-wrap: wrap;
gap: 18px;
}
body.editorial-calm .file-preview-meta-item {
display: flex;
flex-direction: column;
gap: 2px;
}
body.editorial-calm .file-preview-meta-label {
font: 500 10.5px/1 var(--font-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg-muted);
}
body.editorial-calm .file-preview-meta-value {
font: 600 13px/1.2 var(--font-sans);
color: var(--fg);
}
/* Loading / error / empty states inside the preview card */
body.editorial-calm .file-preview-loading,
body.editorial-calm .file-preview-error,
body.editorial-calm .file-preview-empty {
padding: 24px;
text-align: center;
background: var(--bg-elevated);
border: 1px dashed var(--border-strong);
border-radius: var(--radius-md);
font: 400 13.5px/1.55 var(--font-sans);
color: var(--fg-muted);
}
body.editorial-calm .file-preview-error { color: #92400E; border-color: #FDE68A; background: #FEF3C7; }
/* ─────────────────────────────────────────────
Workspace Settings (team-settings.html)
───────────────────────────────────────────── */
/* Top workspace profile card */
body.editorial-calm #team-profile-section { padding: 0; }
body.editorial-calm #team-profile-section .card-body {
display: flex;
align-items: center;
gap: 18px;
padding: 18px 22px !important;
}
body.editorial-calm .team-logo-display,
body.editorial-calm .team-logo-large {
width: 56px;
height: 56px;
border-radius: var(--radius-md);
background: var(--bg-secondary);
border: 1px solid var(--border);
overflow: hidden;
display: grid;
place-items: center;
flex-shrink: 0;
}
body.editorial-calm .team-logo-display img,
body.editorial-calm .team-logo-large img { width: 100%; height: 100%; object-fit: cover; }
/* Workspace identity stack (name + edit hint) */
body.editorial-calm #team-profile-section .team-name {
font: 600 18px/1.2 var(--font-sans);
letter-spacing: -0.005em;
color: var(--fg);
background: none;
padding: 0;
border: 0;
display: block;
white-space: normal;
}
body.editorial-calm .team-name-edit-hint,
body.editorial-calm #team-profile-section .edit-hint {
font: 500 11px/1.4 var(--font-mono);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--fg-muted);
}
/* Preferences grid — variants for 2-col / 4-col */
body.editorial-calm .preferences-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
}
body.editorial-calm .preferences-grid.grid-4 {
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
body.editorial-calm .preferences-card {
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 18px 20px;
display: flex;
flex-direction: column;
gap: 10px;
}
/* Members table (users-table) */
body.editorial-calm .users-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
body.editorial-calm .users-table thead th {
font: 500 10.5px/1 var(--font-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg-muted);
background: var(--bg-secondary);
text-align: left;
padding: 12px 16px;
border-bottom: 1px solid var(--border);
}
body.editorial-calm .users-table tbody td {
padding: 14px 16px;
border-bottom: 1px solid var(--border);
font-family: var(--font-sans);
}
body.editorial-calm .user-row { transition: background var(--duration-fast) var(--easing-standard); }
body.editorial-calm .user-row:hover { background: var(--bg-secondary); }
body.editorial-calm .user-cell {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
}
body.editorial-calm .user-avatar-small {
width: 32px;
height: 32px;
border-radius: 999px;
background: oklch(0.92 0.04 200);
color: oklch(0.4 0.07 200);
display: grid;
place-items: center;
font: 600 12px var(--font-sans);
flex-shrink: 0;
text-transform: uppercase;
}
body.editorial-calm .user-name-cell {
font: 600 13.5px/1.3 var(--font-sans);
color: var(--fg);
}
body.editorial-calm .user-email-cell {
font: 400 12px/1.3 var(--font-sans);
color: var(--fg-muted);
margin-top: 2px;
}
/* Role badges — colored pills per role */
body.editorial-calm .role-badge {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: var(--radius-pill);
font: 600 10.5px/1 var(--font-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
border: 1px solid transparent;
}
body.editorial-calm .role-badge.role-master {
background: var(--accent-soft);
color: var(--accent);
}
body.editorial-calm .role-badge.role-admin {
background: #FEE2E2;
color: #991B1B;
}
body.editorial-calm .role-badge.role-editor {
background: var(--bg-secondary);
color: var(--fg-body);
border-color: var(--border);
}
body.editorial-calm .role-badge.role-viewer {
background: transparent;
color: var(--fg-muted);
border-color: var(--border);
}
/* Status badge in members table (active / suspended / pending) */
body.editorial-calm .status-badge {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: var(--radius-pill);
font: 600 10.5px/1 var(--font-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
background: transparent;
border: 1px solid var(--border);
color: var(--fg-muted);
}
body.editorial-calm .status-badge.active,
body.editorial-calm .status-badge.status-active {
background: #D1FAE5;
color: #065F46;
border-color: transparent;
}
body.editorial-calm .status-badge.suspended,
body.editorial-calm .status-badge.status-suspended {
background: #FEE2E2;
color: #991B1B;
border-color: transparent;
}
/* Action buttons in the user row */
body.editorial-calm .users-table .btn-icon {
width: 28px;
height: 28px;
background: transparent;
border: 1px solid transparent;
border-radius: var(--radius-md);
color: var(--fg-muted);
}
body.editorial-calm .users-table .btn-icon:hover {
background: var(--bg-elevated);
border-color: var(--border);
color: var(--fg);
}
/* "Role Permissions" + "Invite Member" buttons row above the table */
body.editorial-calm #team-profile-section + .stats-grid,
body.editorial-calm .stats-grid.section-gap { margin-bottom: 24px; }
/* ─────────────────────────────────────────────
Deploy + Inbox shared resource tables
(.resource-table is used on hosted pages, widgets, whatsapp,
and the inbox conversation list)
───────────────────────────────────────────── */
body.editorial-calm .resource-table {
width: 100%;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
}
body.editorial-calm .resource-table th {
font: 500 10.5px/1 var(--font-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg-muted);
background: var(--bg-secondary);
text-align: left;
padding: 12px 14px;
border-bottom: 1px solid var(--border);
}
body.editorial-calm .resource-table td {
padding: 14px;
border-bottom: 1px solid var(--border);
font-family: var(--font-sans);
font-size: 13.5px;
color: var(--fg-body);
vertical-align: middle;
}
body.editorial-calm .resource-table tbody tr:last-child td { border-bottom: 0; }
body.editorial-calm .resource-table tbody tr { transition: background var(--duration-fast) var(--easing-standard); }
body.editorial-calm .resource-table tbody tr:hover { background: var(--bg-secondary); }
/* Inbox unread row marker — override the inline yellow style with cream + accent */
/* Mono "key" chip for slugs / source ids / api keys / spaces */
body.editorial-calm .kbd-key {
display: inline-flex;
align-items: center;
font: 500 11.5px/1 var(--font-mono);
letter-spacing: 0.02em;
background: var(--bg-secondary);
color: var(--fg-body);
padding: 3px 8px;
border-radius: 6px;
border: 1px solid var(--border);
}
/* Pill status badges (Active / Inactive / Pending / Suspended) */
body.editorial-calm .badge-pill {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: var(--radius-pill);
font: 600 10.5px/1 var(--font-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
background: transparent;
border: 1px solid var(--border);
color: var(--fg-muted);
}
body.editorial-calm .badge-pill.badge-active {
background: #D1FAE5;
color: #065F46;
border-color: transparent;
}
body.editorial-calm .badge-pill.badge-inactive {
background: var(--bg-secondary);
color: var(--fg-muted);
border-color: var(--border);
}
body.editorial-calm .badge-pill.badge-warning,
body.editorial-calm .badge-pill.badge-pending {
background: #FEF3C7;
color: #92400E;
border-color: transparent;
}
body.editorial-calm .badge-pill.badge-danger,
body.editorial-calm .badge-pill.badge-error {
background: #FEE2E2;
color: #991B1B;
border-color: transparent;
}
/* Copy button next to slugs */
body.editorial-calm .copy-btn {
background: transparent;
border: 1px solid var(--border);
color: var(--fg-muted);
border-radius: var(--radius-pill);
padding: 3px 10px;
font: 600 10.5px/1 var(--font-mono);
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
margin-left: 8px;
transition: background var(--duration-fast) var(--easing-standard),
color var(--duration-fast) var(--easing-standard);
}
body.editorial-calm .copy-btn:hover {
background: var(--bg-secondary);
color: var(--fg);
}
/* Row action cluster */
body.editorial-calm .row-actions {
display: inline-flex;
align-items: center;
gap: 4px;
}
body.editorial-calm .row-actions .btn-sm {
padding: 5px 12px;
font: 600 12px/1 var(--font-sans);
border-radius: var(--radius-pill);
}
/* Inbox tag chip (.conv-tag-chip is inline-styled, override) */
body.editorial-calm .conv-tag-chip {
display: inline-flex !important;
align-items: center;
padding: 2px 8px !important;
border-radius: var(--radius-pill) !important;
background: var(--bg-secondary) !important;
color: var(--fg-body) !important;
font: 500 11px/1.3 var(--font-sans) !important;
border: 1px solid var(--border);
}
body.editorial-calm .conv-tag-chip:hover {
background: var(--bg) !important;
border-color: var(--accent);
color: var(--accent) !important;
}
/* Deploy filter empty state */
body.editorial-calm .deploy-filter-empty {
padding: 32px 24px;
text-align: center;
background: var(--bg-secondary);
border: 1px dashed var(--border-strong);
border-radius: var(--radius-lg);
font: 400 13.5px/1.55 var(--font-sans);
color: var(--fg-muted);
}
/* Deploy filter bar (search + count) */
body.editorial-calm .deploy-filter-bar {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
}
body.editorial-calm .deploy-filter-bar input[type="search"],
body.editorial-calm .deploy-filter-bar input[type="text"] {
flex: 1;
max-width: 360px;
padding: 8px 14px;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-md);
font: 400 13.5px/1 var(--font-sans);
}
body.editorial-calm .deploy-filter-bar input:focus { border-color: var(--accent); outline: none; }
/* Deploy summary cards (top stat row on Deploy) */
body.editorial-calm .deploy-summary-strip {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 16px !important;
}
@media (max-width: 1080px) {
body.editorial-calm .deploy-summary-strip { grid-template-columns: repeat(2, 1fr) !important; }
}
/* Stat tiles — flat, inset, no border. Passive "at a glance" numbers; visually
the opposite of the raised, clickable surface cards below them. */
body.editorial-calm .deploy-summary-card {
background: var(--bg-secondary) !important;
border: 0 !important;
border-radius: var(--radius-md) !important;
padding: 12px 16px !important;
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
box-shadow: none !important;
text-decoration: none !important;
color: var(--fg) !important;
}
body.editorial-calm .deploy-summary-card::before { display: none !important; }
body.editorial-calm .deploy-summary-card [data-card-label],
body.editorial-calm .deploy-summary-card .summary-label,
body.editorial-calm .deploy-summary-card .deploy-summary-label {
font: 500 10px/1 var(--font-mono) !important;
letter-spacing: 0.07em !important;
text-transform: uppercase !important;
color: var(--fg-muted) !important;
margin-bottom: 0 !important;
}
body.editorial-calm .deploy-summary-card [data-card-value],
body.editorial-calm .deploy-summary-card .summary-value,
body.editorial-calm .deploy-summary-card .deploy-summary-value {
font: 400 26px/1 var(--font-serif) !important;
letter-spacing: -0.02em !important;
color: var(--fg) !important;
margin: 2px 0 0 !important;
}
body.editorial-calm .deploy-summary-link:hover { background: var(--bg-tertiary, #ECEAE2) !important; }
/* ─────────────────────────────────────────────
Tables
───────────────────────────────────────────── */
body.editorial-calm table {
border-collapse: separate;
border-spacing: 0;
}
body.editorial-calm th {
font: 500 10.5px/1 var(--font-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg-muted);
background: var(--bg-secondary);
border-bottom: 1px solid var(--border);
text-align: left;
padding: 12px 14px;
}
body.editorial-calm td {
border-bottom: 1px solid var(--border);
padding: 14px;
font-family: var(--font-sans);
color: var(--fg-body);
}
/* ─────────────────────────────────────────────
Icon buttons — small ghost squares used in table rows,
doc cards, popovers (.btn-icon set across the app)
───────────────────────────────────────────── */
body.editorial-calm .btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
padding: 0;
background: transparent;
border: 1px solid transparent;
border-radius: var(--radius-md);
color: var(--fg-muted);
font-size: 14px;
line-height: 1;
cursor: pointer;
transition: background var(--duration-fast) var(--easing-standard),
border-color var(--duration-fast) var(--easing-standard),
color var(--duration-fast) var(--easing-standard);
}
body.editorial-calm .btn-icon:hover {
background: var(--bg-secondary);
color: var(--fg);
border-color: var(--border);
}
body.editorial-calm .btn-icon:focus-visible {
outline: var(--focus-ring);
outline-offset: 2px;
}
/* Danger-flavoured variant (delete actions). Matches both legacy onclick
buttons and the CSP-safe data-action="delete-file" / "delete-*" buttons. */
body.editorial-calm .btn-icon[onclick*="delete" i],
body.editorial-calm .btn-icon[onclick*="trash" i],
body.editorial-calm .btn-icon[data-action*="delete" i],
body.editorial-calm .btn-icon[data-action*="trash" i],
body.editorial-calm .btn-icon.btn-delete,
body.editorial-calm .btn-icon.btn-danger {
color: var(--color-danger);
}
body.editorial-calm .btn-icon[onclick*="delete" i]:hover,
body.editorial-calm .btn-icon[onclick*="trash" i]:hover,
body.editorial-calm .btn-icon[data-action*="delete" i]:hover,
body.editorial-calm .btn-icon[data-action*="trash" i]:hover,
body.editorial-calm .btn-icon.btn-delete:hover,
body.editorial-calm .btn-icon.btn-danger:hover {
background: var(--color-danger-soft);
border-color: transparent;
color: var(--color-danger);
}
/* Row cells that group multiple .btn-icon get standard gap */
body.editorial-calm td .btn-icon + .btn-icon,
body.editorial-calm .actions .btn-icon + .btn-icon { margin-left: 4px; }
/* ─────────────────────────────────────────────
User avatar — guarantee a readable initial when no image
───────────────────────────────────────────── */
body.editorial-calm .user-avatar,
body.editorial-calm #user-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-sans);
font-weight: 600;
color: oklch(0.4 0.07 200);
background: oklch(0.92 0.04 200);
border: 0;
text-transform: uppercase;
letter-spacing: 0;
}
body.editorial-calm .user-avatar img {
width: 100%; height: 100%; border-radius: inherit; object-fit: cover;
}
/* ─────────────────────────────────────────────
Source chip (.ub-source) — extends tokens.css with row-friendly
sizing + a label-prefix variant for citation lines.
───────────────────────────────────────────── */
body.editorial-calm .ub-sources {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}
body.editorial-calm .ub-sources .ub-sources__label {
font: 500 10.5px/1 var(--font-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg-muted);
margin-right: 2px;
}
/* Local-source variant — no icon, dimmer */
body.editorial-calm .ub-source--local {
background: var(--bg-secondary);
color: var(--fg-muted);
border-color: transparent;
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* ─────────────────────────────────────────────
Editorial Calm — page structure utilities
(Used by the dashboard rewrite; designed to be reusable
on Files, Documents, etc. when they get the same pass.)
───────────────────────────────────────────── */
/* Hero — big Newsreader display headline with italic em accent */
body.editorial-calm .ec-hero {
border-bottom: 1px solid var(--border);
padding-bottom: 28px;
margin-bottom: 28px;
max-width: 880px;
}
body.editorial-calm .ec-hero-title {
font: 400 44px/1.05 var(--font-serif) !important;
letter-spacing: -0.025em !important;
color: var(--fg) !important;
margin: 0 0 14px !important;
max-width: 760px;
}
body.editorial-calm .ec-hero-title em {
font-style: italic;
color: var(--accent);
font-weight: 400;
}
body.editorial-calm .ec-hero-lede {
font: 400 17px/1.55 var(--font-sans) !important;
letter-spacing: -0.005em;
color: var(--fg-muted) !important;
margin: 0 !important;
max-width: 640px;
}
/* Hero CTAs — primary + secondary pair under the lede */
body.editorial-calm .ec-hero-cta {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 18px;
align-items: center;
justify-content: flex-start;
}
body.editorial-calm .ec-hero-cta .btn {
padding: 10px 22px;
width: auto !important;
flex: 0 0 auto;
text-decoration: none;
}
/* Section — eyebrow + h2 above a card/grid */
body.editorial-calm .ec-section {
margin-bottom: 36px;
}
body.editorial-calm .ec-section-head {
margin-bottom: 14px;
}
/* Row variant — left content + right-aligned action(s) */
body.editorial-calm .ec-section-head--row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
body.editorial-calm .ec-section-head--row > div:first-child { flex: 1; min-width: 0; }
body.editorial-calm .ec-section-head .ub-eyebrow {
display: block;
margin-bottom: 6px;
}
body.editorial-calm .ec-section-head h2 {
font: 400 26px/1.2 var(--font-serif);
letter-spacing: -0.02em;
color: var(--fg);
margin: 0;
font-weight: 400;
}
body.editorial-calm .ec-section-sub {
font: 400 14px/1.55 var(--font-sans);
color: var(--fg-muted);
margin: 6px 0 0;
max-width: 560px;
}
/* 3-col grid (and auto-fit for smaller widths) */
body.editorial-calm .ec-grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
@media (max-width: 960px) {
body.editorial-calm .ec-grid-3 { grid-template-columns: 1fr; }
}
/* Stat grid — pilot pattern (no icons, mono label + serif number + trend) */
body.editorial-calm .ec-stats-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 16px;
}
body.editorial-calm .ec-stat {
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 18px 20px 16px;
display: flex;
flex-direction: column;
gap: 4px;
box-shadow: none;
/* Override the inherited teal-top-border treatment from styles.css */
border-top: 1px solid var(--border);
}
body.editorial-calm .ec-stat::before { display: none; } /* kill any old ::before bar */
body.editorial-calm .ec-stat .stat-label {
font: 500 10.5px/1 var(--font-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg-muted);
}
body.editorial-calm .ec-stat .ec-stat-value {
font: 400 36px/1 var(--font-serif);
letter-spacing: -0.025em;
color: var(--fg) !important;
margin: 4px 0 6px;
text-align: left !important;
}
body.editorial-calm .ec-stat .ec-stat-trend {
font: 500 12px/1.4 var(--font-sans);
color: var(--fg-muted);
min-height: 1.4em;
}
/* Reserve the brand accent for genuinely positive trends, not every label. */
body.editorial-calm .ec-stat .ec-stat-trend--positive { color: var(--accent); }
body.editorial-calm .ec-stat.clickable {
cursor: pointer;
transition: border-color var(--duration-fast) var(--easing-standard),
box-shadow var(--duration-fast) var(--easing-standard);
}
body.editorial-calm .ec-stat.clickable:hover {
border-color: var(--border-strong);
box-shadow: var(--shadow-1);
}
/* Card with eyebrow header + body content (Master/Editor system stats) */
body.editorial-calm .ec-card {
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 20px 22px;
display: flex;
flex-direction: column;
gap: 12px;
margin: 0 !important; /* override legacy .card margin-bottom */
box-shadow: none;
}
body.editorial-calm .ec-card--lg { padding: 24px; }
body.editorial-calm .ec-card .ub-eyebrow { margin: 0; }
body.editorial-calm .ec-card-stat {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
body.editorial-calm .ec-card-stat-value {
font: 400 32px/1 var(--font-serif);
letter-spacing: -0.02em;
color: var(--fg);
}
/* Pending count is a *count*, not a warning. Keep it ink; the eyebrow + meta
carry the meaning. Red gets reserved for true alerts (failed jobs, errors). */
body.editorial-calm .ec-card-stat-value--warning { color: var(--fg); }
body.editorial-calm .ec-card-stat-meta {
font: 400 13px/1.4 var(--font-sans);
color: var(--fg-muted);
}
body.editorial-calm .ec-card-foot {
display: flex;
justify-content: space-between;
font: 500 12px/1.4 var(--font-sans);
color: var(--fg-muted);
padding-top: 8px;
border-top: 1px solid var(--border);
}
body.editorial-calm .ec-card-loading {
padding: 8px 0;
color: var(--fg-muted);
}
/* Progress bar refinement */
body.editorial-calm .ec-progress {
background: var(--bg-secondary);
border-radius: 999px;
height: 6px;
overflow: hidden;
margin: 0;
}
body.editorial-calm .ec-progress .progress-bar-fill {
background: var(--accent);
height: 100%;
border-radius: 999px;
transition: width var(--duration-base) var(--easing-emphasis);
}
/* Default progress-fill start state — kills inline style="width:0%" need */
body.editorial-calm .progress-bar-fill {
width: 0;
transition: width var(--duration-base) var(--easing-emphasis);
}
/* Questions-by-user rows (under "Open Questions" master card) */
body.editorial-calm .ec-questions-by-user {
display: flex;
flex-direction: column;
gap: 6px;
padding-top: 6px;
border-top: 1px solid var(--border);
margin-top: 4px;
font: 400 13px/1.4 var(--font-sans);
color: var(--fg-body);
}
body.editorial-calm .ec-questions-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 0;
border-bottom: 1px solid var(--border);
font: 400 13px/1.4 var(--font-sans);
}
body.editorial-calm .ec-questions-row:last-of-type { border-bottom: 0; }
body.editorial-calm .ec-questions-row__name { color: var(--fg); }
body.editorial-calm .ec-questions-row__count {
color: var(--fg);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
body.editorial-calm .ec-questions-row__more {
display: block;
text-align: center;
padding: 8px 0;
color: var(--accent);
font: 500 12px/1 var(--font-sans);
text-decoration: none;
margin-top: 4px;
}
body.editorial-calm .ec-questions-row__more:hover { text-decoration: underline; }
body.editorial-calm .ec-questions-empty,
body.editorial-calm .ec-load-failed {
color: var(--fg-muted);
text-align: center;
font: 500 12.5px/1.4 var(--font-sans);
padding: 10px 0;
margin: 0;
}
/* Files-by-type chart rows */
body.editorial-calm .ec-type-row { margin-bottom: 10px; }
body.editorial-calm .ec-type-row__head {
display: flex;
justify-content: space-between;
margin-bottom: 4px;
font: 400 13px/1.4 var(--font-sans);
color: var(--fg-body);
}
body.editorial-calm .ec-type-row__name {
text-transform: capitalize;
}
body.editorial-calm .ec-type-row__count {
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--fg);
}
body.editorial-calm .ec-type-row__bar { height: 6px; }
body.editorial-calm .ec-type-row__bar .progress-bar-fill { background: var(--accent); }
body.editorial-calm .ec-type-row__total {
text-align: center;
padding-top: 6px;
font: 500 12px/1.4 var(--font-sans);
color: var(--fg-muted);
}
/* File-icon emoji wrapper (replaces inline font-size: 20px in JS) */
body.editorial-calm .file-icon--emoji {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--fg-muted);
width: 28px;
height: 28px;
background: var(--bg-secondary, #F1EFE9);
border-radius: var(--radius-sm, 6px);
}
body.editorial-calm .file-icon--emoji svg { width: 16px; height: 16px; }
/* File-type label ("TEXT" / "PDF" / "AUDIO") — should read as a mono tag,
not body type that competes with the filename. */
body.editorial-calm .file-type-label {
font: 500 10.5px/1 var(--font-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg-muted);
}
/* Badge sizing — match the spec (11.5px Manrope 600 with tight tracking) */
body.editorial-calm .badge,
body.editorial-calm .badge-pending,
body.editorial-calm .badge-processing,
body.editorial-calm .badge-ready,
body.editorial-calm .badge-failed {
font-family: var(--font-sans);
font-size: 11.5px;
font-weight: 600;
letter-spacing: -0.005em;
padding: 4px 10px;
border-radius: var(--radius-pill);
}
/* Status badge tones from the semantic soft tokens (were legacy hardcoded hex
inherited from styles.css). */
body.editorial-calm .badge-ready { background: var(--color-success-soft, #D1FAE5); color: var(--color-success-fg, #065F46); border-color: transparent; }
body.editorial-calm .badge-pending { background: var(--color-warning-soft, #FEF3C7); color: var(--color-warning-fg, #92400E); border-color: transparent; }
body.editorial-calm .badge-processing { background: var(--color-info-soft, #DBEAFE); color: var(--color-info-fg, #1E40AF); border-color: transparent; }
body.editorial-calm .badge-failed { background: var(--color-danger-soft, #FEE2E2); color: var(--color-danger-fg, #991B1B); border-color: transparent; }
/* Neutral type badge (was legacy .badge-secondary on --light/--dark tokens). */
body.editorial-calm .badge-secondary { background: var(--bg-secondary); color: var(--fg-body); border: 1px solid var(--border); }
/* Context-modal caption meta (section date + quality) — was inline font/colour. */
body.editorial-calm #context-modal .context-section-meta { font: 500 12px/1.5 var(--font-sans); color: var(--fg-muted); margin-top: 8px; }
/* Error variant of a file-details value (was inline colour). */
body.editorial-calm .detail-value--error { color: var(--color-danger); }
/* Bulk-selection bar — legacy styles.css painted it a bold var(--primary)
(wrong teal) band with translucent-white buttons + hardcoded #dc2626 red,
heavier than the calm page. Re-tone to a soft branded selection surface. */
body.editorial-calm .bulk-actions-bar {
background: var(--accent-soft);
color: var(--fg);
border: 1px solid var(--border);
border-radius: var(--radius-md);
}
body.editorial-calm .bulk-actions-left span,
body.editorial-calm #selected-count { color: var(--accent); font-weight: 600; }
body.editorial-calm .bulk-actions-bar .btn-secondary {
background: var(--bg-elevated); border-color: var(--border); color: var(--fg-body);
}
body.editorial-calm .bulk-actions-bar .btn-secondary:hover {
background: var(--bg); border-color: var(--border-strong, var(--border)); color: var(--fg);
}
body.editorial-calm .bulk-actions-bar .btn-danger {
background: var(--color-danger); border-color: var(--color-danger); color: #fff;
}
/* Block-button modifier (replaces inline width:100%) */
body.editorial-calm .btn.btn--block,
body.editorial-calm .btn--block { width: 100%; justify-content: center; }
/* Modal width modifier (replaces inline max-width on .modal-content) */
body.editorial-calm .modal-content--sm { max-width: 500px; }
/* Empty-state icon — circular muted container holding a line icon */
body.editorial-calm .ec-empty-icon {
width: 56px;
height: 56px;
border-radius: 999px;
background: var(--bg-elevated);
border: 1px solid var(--border);
color: var(--fg-muted);
display: grid;
place-items: center;
margin: 0 auto 14px;
}
/* ─────────────────────────────────────────────
Validator-driven fixes
───────────────────────────────────────────── */
/* F10: kill the legacy .page-header flex:row layout on the hero —
.ec-hero is a vertical stack (eyebrow → h1 → lede → CTAs). */
body.editorial-calm .ec-hero {
display: block;
align-items: initial;
justify-content: initial;
}
/* F4: flat file-list rows. Drop the boxy 6px-radius chip-in-card nesting,
replace with rule-separated list rows that hover-tint. */
body.editorial-calm .file-list .file-item {
background: transparent;
border: 0;
border-bottom: 1px solid var(--border);
border-radius: 0;
margin: 0;
padding: 14px 4px;
display: flex;
align-items: center;
gap: 12px;
transition: background var(--duration-fast) var(--easing-standard);
}
body.editorial-calm .file-list .file-item:last-child { border-bottom: 0; }
body.editorial-calm .file-list .file-item:hover { background: var(--bg-secondary); }
body.editorial-calm .file-list .file-item .file-icon {
width: 32px;
height: 32px;
background: transparent;
border: 0;
font-size: 18px;
flex-shrink: 0;
display: grid;
place-items: center;
}
body.editorial-calm .file-list .file-item .file-info { flex: 1; min-width: 0; }
body.editorial-calm .file-list .file-item .file-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
margin-top: 4px;
}
body.editorial-calm .file-list .file-item .file-meta .badge { margin: 0; }
body.editorial-calm .file-list .file-item .file-actions {
display: inline-flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
/* F7: upload-zone + cloud-import-zone — single 1px dashed border-strong,
matching .empty-state weight. */
body.editorial-calm .upload-zone,
body.editorial-calm .cloud-import-zone {
border: 1px dashed var(--border-strong);
border-radius: var(--radius-lg);
background: var(--bg-secondary);
padding: 28px 24px;
transition: border-color var(--duration-fast) var(--easing-standard),
background var(--duration-fast) var(--easing-standard);
}
body.editorial-calm .upload-zone:hover,
body.editorial-calm .upload-zone.drag-over {
border-color: var(--accent);
background: var(--accent-soft);
}
body.editorial-calm .upload-zone h4,
body.editorial-calm .cloud-import-zone h4 {
font: 600 14.5px/1.3 var(--font-sans);
letter-spacing: -0.005em;
color: var(--fg);
margin: 8px 0 4px;
}
body.editorial-calm .upload-zone p,
body.editorial-calm .cloud-import-zone p,
body.editorial-calm .cloud-import-zone .cloud-hint {
font: 400 13px/1.55 var(--font-sans);
color: var(--fg-muted);
margin: 0;
}
body.editorial-calm .upload-icon { margin-bottom: 4px; }
body.editorial-calm .upload-divider span {
font: 500 10.5px/1 var(--font-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg-muted);
padding: 0 10px;
background: var(--bg);
}
/* F8: provider-icon-btn — use Editorial Calm surface + radius */
body.editorial-calm .provider-icon-btn {
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 10px;
transition: border-color var(--duration-fast) var(--easing-standard),
background var(--duration-fast) var(--easing-standard),
transform var(--duration-fast) var(--easing-standard);
}
body.editorial-calm .provider-icon-btn:hover {
border-color: var(--accent);
background: var(--accent-soft);
transform: translateY(-1px);
}
body.editorial-calm .provider-icon-btn .provider-label {
font: 500 11.5px/1.4 var(--font-sans);
color: var(--fg);
}
body.editorial-calm .provider-icon-btn.coming-soon { opacity: 0.6; cursor: not-allowed; }
body.editorial-calm .provider-icon-btn.coming-soon:hover { transform: none; background: var(--bg-elevated); border-color: var(--border); }
body.editorial-calm .provider-badge {
font: 500 10px/1 var(--font-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 2px 6px;
background: var(--bg-secondary);
color: var(--fg-muted);
border-radius: var(--radius-pill);
}
/* Spinner — use accent */
body.editorial-calm .spinner,
body.editorial-calm .spinner-sm {
border-top-color: var(--accent);
}
/* Destructive action hover — any ghost button with a delete intent
gains a soft red tint on hover so intent is visible without screaming
at rest. Targets data-action="delete-*" so it generalises across
delete-file, delete-page, delete-chat, etc. */
body.editorial-calm .btn[data-action^="delete"],
body.editorial-calm .btn.btn-danger-ghost,
body.editorial-calm .btn-icon[data-action="delete-file"] {
transition: background var(--duration-fast) var(--easing-standard),
border-color var(--duration-fast) var(--easing-standard),
color var(--duration-fast) var(--easing-standard);
}
body.editorial-calm .btn[data-action^="delete"]:hover,
body.editorial-calm .btn.btn-danger-ghost:hover,
body.editorial-calm .btn-icon[data-action="delete-file"]:hover {
background: #FEE2E2;
border-color: transparent;
color: var(--color-danger);
}
body.editorial-calm .btn[data-action^="delete"]:focus-visible,
body.editorial-calm .btn-icon[data-action="delete-file"]:focus-visible {
outline: 2px solid var(--color-danger);
outline-offset: 2px;
}
/* Files page — icon buttons in table rows.
Lucide-style line SVGs at 16px, ghost square, hover bg-secondary. */
body.editorial-calm .table-actions {
display: inline-flex;
align-items: center;
gap: 2px;
}
body.editorial-calm .table-actions .btn-icon {
width: 30px;
height: 30px;
padding: 0;
background: transparent;
border: 1px solid transparent;
border-radius: var(--radius-md);
color: var(--fg-muted);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
position: relative;
}
body.editorial-calm .table-actions .btn-icon svg {
width: 16px;
height: 16px;
display: block;
}
body.editorial-calm .table-actions .btn-icon:hover {
background: var(--bg-secondary);
color: var(--fg);
border-color: var(--border);
}
/* Question flash: brief accent ring when scrolled into view (was an inline
box-shadow toggle in files.js). Self-fades via keyframes. */
@keyframes ecQuestionFlash {
0% { box-shadow: 0 0 0 2px var(--accent); }
100% { box-shadow: 0 0 0 2px transparent; }
}
body.editorial-calm .ec-question-flash { animation: ecQuestionFlash 1.5s ease-out; }
@keyframes ecQuestionFlashSuccess {
0% { box-shadow: 0 0 0 2px var(--color-success); }
100% { box-shadow: 0 0 0 2px transparent; }
}
body.editorial-calm .ec-question-flash--success { animation: ecQuestionFlashSuccess 2s ease-out; }
/* Questions icon state colors — match data severity, calm at rest */
body.editorial-calm .btn-icon--questions.is-pending { color: var(--color-warning); }
body.editorial-calm .btn-icon--questions.is-pending:hover {
background: var(--color-warning-soft);
border-color: transparent;
color: var(--color-warning-fg);
}
body.editorial-calm .btn-icon--questions.is-resolved { color: var(--color-success); }
body.editorial-calm .btn-icon--questions.is-neutral { color: var(--fg-muted); }
body.editorial-calm .btn-icon-badge {
position: absolute;
top: 2px;
right: 2px;
background: var(--color-warning-fg);
color: #fff;
font: 600 9px/1 var(--font-mono);
padding: 1px 4px;
border-radius: 999px;
min-width: 14px;
text-align: center;
}
/* ─────────────────────────────────────────────
Auth pages — login / signup / forgot-password / accept-invitation
Common chrome shared by all 5 auth surfaces. Scoped to .editorial-calm
so legacy styles still work if the class is removed.
───────────────────────────────────────────── */
body.editorial-calm .login-container {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg) !important;
padding: 32px 20px;
}
body.editorial-calm .login-box {
background: var(--bg-elevated, #fff) !important;
border: 1px solid var(--border-color) !important;
border-radius: var(--radius-lg, 14px) !important;
box-shadow: var(--shadow-1, 0 1px 2px rgba(27, 28, 32, 0.04)) !important;
padding: 36px 36px 32px !important;
width: 100%;
max-width: 420px;
}
body.editorial-calm .login-box.login-box--wide { max-width: 480px; }
/* Brand mark + product name above the title */
body.editorial-calm .ec-auth-mark {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
color: var(--accent);
}
body.editorial-calm .ec-auth-mark svg { width: 28px; height: 28px; }
body.editorial-calm .login-header {
text-align: center !important;
margin-bottom: 24px !important;
border-bottom: none !important;
padding-bottom: 0 !important;
}
body.editorial-calm .login-header .ub-eyebrow {
display: inline-block;
margin-bottom: 8px;
}
body.editorial-calm .login-header h1 {
font: 400 26px/1.15 var(--font-serif) !important;
letter-spacing: -0.015em !important;
color: var(--fg) !important;
margin: 0 0 8px !important;
}
body.editorial-calm .login-header h1 em {
font-style: italic;
color: var(--accent);
font-weight: 400;
}
body.editorial-calm .login-header p {
font: 400 14px/1.5 var(--font-sans) !important;
color: var(--fg-muted) !important;
margin: 0 !important;
}
/* Form fields inside auth box */
body.editorial-calm .login-box .form-group { margin-bottom: 14px; }
body.editorial-calm .login-box .form-group label {
font: 500 11px/1 var(--font-mono) !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
color: var(--fg-muted) !important;
margin-bottom: 6px !important;
display: block;
}
body.editorial-calm .login-box .form-control {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--border-color) !important;
border-radius: var(--radius-md, 10px) !important;
background: var(--bg-elevated, #fff) !important;
font: 400 14px/1.4 var(--font-sans) !important;
color: var(--fg) !important;
transition: border-color 160ms var(--ease-standard, ease), box-shadow 160ms var(--ease-standard, ease);
}
body.editorial-calm .login-box .form-control:focus-visible {
outline: 2px solid var(--color-teal-400, #2DD4BF);
outline-offset: 2px;
border-color: var(--accent) !important;
}
/* Primary CTA — full-width inside the auth box (override the global
inline-flex narrowing for hero CTAs) */
body.editorial-calm .login-box .btn.btn-primary,
body.editorial-calm .login-box button[type="submit"].btn-primary {
width: 100% !important;
display: inline-flex !important;
justify-content: center !important;
padding: 11px 16px !important;
font-weight: 500;
}
/* "or" divider between password + Google OAuth */
body.editorial-calm .oauth-divider {
display: flex;
align-items: center;
gap: 12px;
margin: 18px 0;
color: var(--fg-muted);
font: 500 11px/1 var(--font-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
}
body.editorial-calm .oauth-divider::before,
body.editorial-calm .oauth-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--border-color);
}
body.editorial-calm .oauth-divider span {
background: transparent !important;
padding: 0 !important;
color: var(--fg-muted) !important;
}
/* Google OAuth pill */
body.editorial-calm .btn-google {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
/* Match the primary CTA height/width treatment exactly (see .login-box .btn-primary):
pill radius + 11px 16px padding. Google button stays a secondary/outline pill. */
padding: 11px 16px !important;
background: var(--bg-elevated, #fff) !important;
border: 1px solid var(--border-color) !important;
border-radius: var(--radius-pill) !important;
color: var(--fg) !important;
/* line-height 1.6 matches .login-box .btn-primary so the Google pill is the
same height as the Sign In pill (was /1 → ~4px shorter). */
font: 500 14px/1.6 var(--font-sans) !important;
text-decoration: none !important;
cursor: pointer;
transition: background 160ms var(--ease-standard, ease), border-color 160ms var(--ease-standard, ease);
}
body.editorial-calm .btn-google:hover {
background: var(--bg-secondary, #F1EFE9) !important;
border-color: var(--fg-muted) !important;
}
/* Footer link block */
body.editorial-calm .login-footer {
margin-top: 22px;
text-align: center;
font: 400 13px/1.5 var(--font-sans);
color: var(--fg-muted);
}
body.editorial-calm .login-footer a,
body.editorial-calm .login-box a {
color: var(--accent) !important;
text-decoration: none;
}
body.editorial-calm .login-footer a:hover,
body.editorial-calm .login-box a:hover {
text-decoration: underline;
}
/* ─────────────────────────────────────────────
Documents page — category tab strip + table layout
Mirrors A.Documents spec from design directions.
───────────────────────────────────────────── */
/* Tab strip — All / / … with inline counts */
body.editorial-calm .ec-doc-tabs {
display: flex;
align-items: stretch;
gap: 18px;
border-bottom: 1px solid var(--border-color);
margin: 4px 0 18px;
overflow-x: auto;
}
body.editorial-calm .ec-doc-tab {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 0;
margin-bottom: -1px;
background: transparent;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
font: 400 13px/1 var(--font-sans);
color: var(--fg-muted);
white-space: nowrap;
transition: color 160ms var(--ease-standard, ease), border-color 160ms var(--ease-standard, ease);
}
body.editorial-calm .ec-doc-tab:hover { color: var(--fg); }
body.editorial-calm .ec-doc-tab.is-active {
color: var(--fg);
font-weight: 500;
border-bottom-color: var(--fg);
}
body.editorial-calm .ec-doc-tab__count {
font-family: var(--font-mono);
font-size: 11px;
color: var(--fg-muted);
letter-spacing: 0.04em;
}
body.editorial-calm .ec-doc-tab.is-active .ec-doc-tab__count { color: var(--fg); }
body.editorial-calm .ec-doc-tab__icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: currentColor;
}
body.editorial-calm .ec-doc-tab__icon svg { width: 14px; height: 14px; }
/* Recycle bin — header stats and table */
body.editorial-calm .ec-recycle-stats {
display: inline-flex;
align-items: center;
gap: 10px;
font: 500 11px/1 var(--font-mono);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--fg-muted);
margin: 0 0 16px;
}
body.editorial-calm .ec-recycle-stats__value {
color: var(--fg);
font-weight: 500;
}
body.editorial-calm .ec-recycle-stats__dot { color: var(--border-color); }
/* Recycle bin table — match Documents list-view treatment */
body.editorial-calm .recycle-bin-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: var(--bg-elevated, #fff);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg, 14px);
overflow: hidden;
}
body.editorial-calm .recycle-bin-table thead th {
font: 500 11px/1 var(--font-mono) !important;
letter-spacing: 0.06em !important;
text-transform: uppercase;
color: var(--fg-muted) !important;
text-align: left;
padding: 10px 22px !important;
border-bottom: 1px solid var(--border-color);
background: transparent !important;
}
body.editorial-calm .recycle-bin-table tbody td {
padding: 14px 22px;
border-bottom: 1px solid var(--border-color);
font-size: 13px;
color: var(--fg);
vertical-align: middle;
}
body.editorial-calm .recycle-bin-table tbody tr:last-child td { border-bottom: none; }
body.editorial-calm .recycle-bin-table tbody tr:hover { background: var(--bg-secondary, #F1EFE9); }
body.editorial-calm .recycle-bin-table .deleted-info,
body.editorial-calm .recycle-bin-table .deleted-by {
font: 500 11px/1.4 var(--font-mono);
color: var(--fg-muted);
letter-spacing: 0.04em;
}
/* List header — mono uppercase column labels */
body.editorial-calm .ec-doc-list-header {
font: 500 11px/1 var(--font-mono) !important;
letter-spacing: 0.06em !important;
text-transform: uppercase;
color: var(--fg-muted) !important;
background: transparent !important;
border-bottom: 1px solid var(--border-color) !important;
padding: 10px 22px !important;
}
body.editorial-calm .ec-doc-list-header .sortable {
cursor: pointer;
user-select: none;
}
body.editorial-calm .ec-doc-list-header .sortable:hover { color: var(--fg) !important; }
/* List view container — wrap items in a card */
body.editorial-calm .documents-grid.list-view {
background: var(--bg-elevated, #fff);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg, 14px);
overflow: hidden;
display: flex;
flex-direction: column;
gap: 0 !important;
padding: 0 !important;
}
body.editorial-calm .documents-grid.list-view .document-card {
border-bottom: 1px solid var(--border-color);
border-radius: 0;
padding: 14px 22px;
background: transparent;
box-shadow: none;
transition: background 160ms var(--ease-standard, ease);
}
body.editorial-calm .documents-grid.list-view .document-card:last-child { border-bottom: none; }
body.editorial-calm .documents-grid.list-view .document-card:hover { background: var(--bg-secondary, #F1EFE9); }
body.editorial-calm .documents-grid.list-view .document-title {
font: 500 14px/1.3 var(--font-sans) !important;
letter-spacing: -0.005em !important;
color: var(--fg) !important;
margin: 0 !important;
}
body.editorial-calm .documents-grid.list-view .document-preview {
font: 400 12.5px/1.5 var(--font-sans) !important;
color: var(--fg-muted) !important;
padding: 0 12px !important; /* match header .col-preview so the description doesn't touch the category badge */
}
body.editorial-calm .documents-grid.list-view .document-meta,
body.editorial-calm .documents-grid.list-view .document-author,
body.editorial-calm .documents-grid.list-view .document-version,
body.editorial-calm .documents-grid.list-view .document-size,
body.editorial-calm .documents-grid.list-view .document-date {
font: 500 11px/1 var(--font-mono) !important;
letter-spacing: 0.04em !important;
color: var(--fg-muted) !important;
}
body.editorial-calm .documents-grid.list-view .category-badge {
/* Flow in column order (after the title) to match the Title→Category header.
The grid-view rule sets order:-1 to make it a card eyebrow; in the list that
wrongly pulls it ahead of the title, so reset it here. */
order: 0;
align-self: center;
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: 999px;
font: 500 10.5px/1.4 var(--font-mono);
letter-spacing: 0.06em;
text-transform: uppercase;
background: var(--bg-secondary, #F1EFE9);
color: var(--fg-muted);
border: 1px solid var(--border);
/* Truncate long category names instead of wrapping into a tall "blob". */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
body.editorial-calm .documents-grid.list-view .category-badge.category-empty {
background: transparent;
border-color: transparent;
color: var(--fg-muted);
padding-left: 0;
}
/* Status pill: pulse for generating state (keeps the existing animation) */
body.editorial-calm .ec-status-pill--pending.is-generating {
animation: ec-pulse 2s infinite;
}
@keyframes ec-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
/* ═══════════════════════════════════════════════
Document surface v1.0 — Read/Edit chrome
Top action bar · title block · byline · right TOC
═══════════════════════════════════════════════ */
/* Hide legacy chrome in editorial-calm doc view — title now lives in .ec-doc-title-block.
#legacy-page-header needs !important: .page-header{display:flex} overrides the [hidden] attr. */
body.editorial-calm #legacy-page-header,
body.editorial-calm .document-info-card,
body.editorial-calm .purpose-container { display: none !important; }
/* ── Top action bar ── */
body.editorial-calm .ec-doc-topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 24px;
}
body.editorial-calm .ec-doc-breadcrumb {
display: inline-flex;
align-items: center;
gap: 7px;
min-width: 0;
font: 500 12.5px/1 var(--font-sans);
}
body.editorial-calm .ec-doc-breadcrumb__link {
color: var(--fg-muted);
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
body.editorial-calm a.ec-doc-breadcrumb__link:hover { color: var(--accent); }
body.editorial-calm .ec-doc-breadcrumb__sep {
display: inline-flex;
color: var(--fg-faint, var(--fg-muted));
opacity: 0.6;
}
body.editorial-calm .ec-doc-breadcrumb__current {
color: var(--fg);
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 280px;
}
body.editorial-calm .ec-doc-topbar__actions {
display: inline-flex;
align-items: center;
gap: 8px;
}
body.editorial-calm .ec-doc-topbar__divider {
width: 1px;
height: 20px;
background: var(--border);
margin: 0 2px;
}
body.editorial-calm .ec-doc-saved {
display: inline-flex;
align-items: center;
gap: 6px;
font: 500 11px/1 var(--font-mono);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--fg-muted);
white-space: nowrap;
}
body.editorial-calm .ec-doc-saved__dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
flex-shrink: 0;
}
body.editorial-calm .ec-doc-saved.is-saving .ec-doc-saved__dot {
background: var(--color-warning, #F59E0B);
animation: ec-doc-pulse 1.2s ease-in-out infinite;
}
@keyframes ec-doc-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
/* Uniform pill height/padding for all three top-bar buttons (Back/Export/Edit).
Overrides the tighter #back-btn padding so the row aligns. */
body.editorial-calm .ec-doc-topbar .btn-sm,
body.editorial-calm .ec-doc-topbar #back-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px !important;
font: 600 12.5px/1 var(--font-sans);
line-height: 1;
white-space: nowrap;
border-radius: var(--radius-pill);
}
body.editorial-calm .ec-doc-topbar .btn-sm svg { flex-shrink: 0; }
/* ── Overflow menu ── */
body.editorial-calm .ec-doc-overflow { position: relative; }
body.editorial-calm .ec-doc-overflow__menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
min-width: 188px;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-2, 0 8px 24px rgba(0,0,0,0.12));
padding: 6px;
z-index: 120;
}
body.editorial-calm .ec-doc-overflow__menu[hidden] { display: none; }
body.editorial-calm .ec-doc-overflow__item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 8px 10px;
background: transparent;
border: 0;
border-radius: var(--radius-sm, 6px);
font: 500 13px/1 var(--font-sans);
color: var(--fg-body);
text-align: left;
cursor: pointer;
}
body.editorial-calm .ec-doc-overflow__item[hidden] { display: none !important; }
body.editorial-calm .ec-doc-overflow__item:hover {
background: var(--bg-secondary);
color: var(--fg);
}
body.editorial-calm .ec-doc-overflow__item svg { color: var(--fg-muted); }
body.editorial-calm .ec-doc-overflow__item:hover svg { color: var(--fg); }
body.editorial-calm .ec-doc-overflow__item--danger { color: var(--color-danger); }
body.editorial-calm .ec-doc-overflow__item--danger svg { color: var(--color-danger); }
body.editorial-calm .ec-doc-overflow__item--danger:hover {
background: #FEE2E2;
color: var(--color-danger);
}
body.editorial-calm .ec-doc-overflow__item--danger:hover svg { color: var(--color-danger); }
body.editorial-calm .ec-doc-overflow__divider {
height: 1px;
background: var(--border);
margin: 6px 4px;
}
/* ── Title block ── */
body.editorial-calm .ec-doc-title-block {
margin-bottom: 28px;
padding-bottom: 22px;
border-bottom: 1px solid var(--border);
}
body.editorial-calm .ec-doc-eyebrow { margin-bottom: 12px; }
body.editorial-calm .ec-doc-title {
font: 400 44px/1.1 var(--font-serif);
letter-spacing: -0.02em;
color: var(--fg);
margin: 0 0 16px;
}
body.editorial-calm .ec-doc-byline {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
font: 500 13px/1.3 var(--font-sans);
color: var(--fg-muted);
}
body.editorial-calm .ec-doc-byline__author {
display: inline-flex;
align-items: center;
gap: 8px;
}
body.editorial-calm .ec-doc-byline__avatar {
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--accent-soft);
color: var(--accent);
display: inline-flex;
align-items: center;
justify-content: center;
font: 600 11px/1 var(--font-sans);
text-transform: uppercase;
flex-shrink: 0;
}
body.editorial-calm .ec-doc-byline__name { color: var(--fg); font-weight: 600; }
body.editorial-calm .ec-doc-byline__dot { color: var(--fg-faint, var(--fg-muted)); opacity: 0.5; }
body.editorial-calm .ec-doc-byline__version {
font-family: var(--font-mono);
font-size: 11.5px;
letter-spacing: 0.02em;
}
body.editorial-calm .ec-doc-byline__sources {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--accent);
font-weight: 600;
}
body.editorial-calm .ec-doc-byline__sources[hidden] { display: none; }
body.editorial-calm .ec-doc-byline__sources svg { color: var(--accent); }
/* ── View layout: prose left (1080max), TOC sticky right ── */
body.editorial-calm .ec-doc-view-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 280px;
gap: 40px;
align-items: start;
}
body.editorial-calm .ec-doc-view-layout.is-toc-collapsed {
grid-template-columns: minmax(0, 1fr) 56px;
}
body.editorial-calm .ec-doc-content-wrapper {
min-width: 0;
max-width: 1080px;
}
body.editorial-calm .ec-doc-content-wrapper .document-content {
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: none;
padding: 48px 56px;
}
/* ── TOC right rail ── */
body.editorial-calm .ec-doc-toc {
position: sticky;
top: 20px;
width: auto;
align-self: start;
background: transparent;
border-left: 1px solid var(--border);
border-radius: 0;
box-shadow: none;
padding: 4px 0 4px 24px;
max-height: calc(100vh - 120px);
overflow-y: auto;
}
body.editorial-calm .ec-doc-toc__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 14px;
padding-bottom: 0;
border-bottom: 0;
}
body.editorial-calm .ec-doc-toc__toggle {
width: 26px;
height: 26px;
flex-shrink: 0;
transition: transform 0.2s ease;
}
body.editorial-calm .ec-doc-view-layout.is-toc-collapsed .ec-doc-toc__toggle {
transform: rotate(180deg);
}
body.editorial-calm .ec-doc-toc__nav { display: flex; flex-direction: column; gap: 2px; }
/* Collapsed: 56px rail with sideways label */
body.editorial-calm .ec-doc-view-layout.is-toc-collapsed .ec-doc-toc {
padding: 4px 0;
display: flex;
flex-direction: column;
align-items: center;
}
body.editorial-calm .ec-doc-view-layout.is-toc-collapsed .ec-doc-toc__nav { display: none; }
body.editorial-calm .ec-doc-view-layout.is-toc-collapsed .ec-doc-toc__header {
flex-direction: column-reverse;
gap: 14px;
margin-bottom: 0;
}
body.editorial-calm .ec-doc-view-layout.is-toc-collapsed .ec-doc-toc__header .ub-eyebrow {
writing-mode: vertical-rl;
transform: rotate(180deg);
white-space: nowrap;
}
@media (max-width: 960px) {
body.editorial-calm .ec-doc-view-layout,
body.editorial-calm .ec-doc-view-layout.is-toc-collapsed {
grid-template-columns: 1fr;
}
body.editorial-calm .ec-doc-toc { display: none; }
body.editorial-calm .ec-doc-content-wrapper .document-content { padding: 28px 22px; }
body.editorial-calm .ec-doc-title { font-size: 32px; }
}
/* Document editor — export-option rows in the export modal */
body.editorial-calm .ec-export-option {
display: flex !important;
align-items: center;
gap: 12px;
padding: 14px 16px !important;
border-radius: var(--radius-md, 10px) !important;
font-size: 14px !important;
text-align: left;
width: 100%;
justify-content: flex-start !important;
border: 1px solid var(--border-color) !important;
background: var(--bg-elevated, #fff) !important;
}
body.editorial-calm .ec-export-option:hover {
background: var(--bg-secondary, #F1EFE9) !important;
border-color: var(--fg-muted) !important;
}
body.editorial-calm .ec-export-option__icon {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--bg-secondary, #F1EFE9);
border-radius: var(--radius-sm, 6px);
color: var(--accent);
flex: 0 0 auto;
}
body.editorial-calm .ec-export-option__body {
display: flex;
flex-direction: column;
gap: 2px;
}
body.editorial-calm .ec-export-option__title {
font-weight: 500;
color: var(--fg);
}
body.editorial-calm .ec-export-option__hint {
font-size: 12px;
color: var(--fg-muted);
}
/* Search-in-doc control buttons */
body.editorial-calm .btn-search {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 0;
border: 1px solid transparent;
border-radius: var(--radius-sm, 6px);
background: transparent;
color: var(--fg-muted);
cursor: pointer;
}
body.editorial-calm .btn-search:hover {
background: var(--bg-secondary, #F1EFE9);
color: var(--fg);
border-color: var(--border-color);
}
/* TOC sidebar header — eyebrow + collapse button */
body.editorial-calm .toc-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
/* Inline icon + label inside a .btn (e.g. "+ Invite Member") */
body.editorial-calm .btn > span[data-ec-icon] {
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: -2px;
margin-right: 2px;
}
body.editorial-calm .btn > span[data-ec-icon] svg {
width: 14px;
height: 14px;
}
/* Row click affordance for Files table */
body.editorial-calm .ec-file-row { cursor: pointer; }
body.editorial-calm .ec-file-row:hover { background: var(--bg-secondary); }
body.editorial-calm .ec-row-actions-cell { white-space: nowrap; }
/* TYPE column: a touch wider + tighter cell/badge padding so short cloud labels
(Slides/Drawing/Notion) fit on one line and never bleed into the SIZE column. */
body.editorial-calm .files-table th:nth-child(3),
body.editorial-calm .files-table td:nth-child(3) { width: 88px; }
body.editorial-calm .files-table td:nth-child(3) { padding-left: 10px; padding-right: 4px; }
body.editorial-calm .files-table td:nth-child(3) .badge { white-space: nowrap; padding: 4px 8px; }
/* File-name cell on ONE line: the eye + type icon + source badge never shrink,
and the name truncates. (Previously flex-wrap:wrap stacked it onto 3 lines,
giving 122px-tall rows that broke the list's column alignment.) */
body.editorial-calm .ec-file-namecell { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: nowrap; }
body.editorial-calm .ec-file-namecell > .expand-preview-btn,
body.editorial-calm .ec-file-namecell > .ub-source,
body.editorial-calm .ec-file-namecell > .file-icon--emoji,
body.editorial-calm .ec-file-namecell > .tab-badge,
body.editorial-calm .ec-file-namecell > img,
body.editorial-calm .ec-file-namecell > svg { flex-shrink: 0; }
body.editorial-calm .ec-file-namecell > .file-name-cell { flex: 0 1 auto; min-width: 0; }
/* File name as a real control (button local / link cloud): reset UA styling so
it reads as the former plain-text span; underline on hover/focus for affordance. */
body.editorial-calm .file-name-open {
border: none;
background: none;
padding: 0;
font: inherit;
color: inherit;
text-align: left;
text-decoration: none;
cursor: pointer;
}
body.editorial-calm .file-name-open:hover,
body.editorial-calm .file-name-open:focus-visible { text-decoration: underline; }
/* File-list checkboxes: consistent 16px in the brand colour (were the browser's
chunky native default). */
body.editorial-calm .files-table input.file-checkbox,
body.editorial-calm .files-table input#select-all-checkbox {
width: 16px; height: 16px; margin: 0; cursor: pointer; accent-color: var(--accent);
}
/* ── Topics / Tags: re-tone the off-brand Material blue + purple (legacy
styles.css uses #2196f3 / #7c3aed / grey gradients) to the teal palette.
Scoped to Editorial Calm so the legacy rules are unaffected elsewhere. ── */
body.editorial-calm .tag-badge {
background: var(--accent-soft);
border: 1px solid transparent;
color: var(--accent);
box-shadow: none;
font-weight: 600;
}
body.editorial-calm .tag-badge:hover {
background: var(--accent-soft); border-color: var(--accent); box-shadow: none; transform: none;
}
/* Hidden overflow tags: .tag-hidden stays as the query marker; .is-revealed
(toggled by the "See All" button) controls visibility instead of inline style. */
body.editorial-calm .tag-badge.tag-hidden { display: none; }
body.editorial-calm .tag-badge.tag-hidden.is-revealed { display: inline-flex; }
body.editorial-calm .tag-remove-btn { color: var(--accent); }
body.editorial-calm .tag-remove-btn:hover { background-color: var(--bg-secondary); color: var(--color-danger); }
/* Confidence tiers → teal intensity (were blue-opacity swatches) */
body.editorial-calm .tag-badge.tag-confidence-high {
background: var(--accent); border-color: var(--accent); color: #fff;
}
body.editorial-calm .tag-badge.tag-confidence-high:hover { background: var(--accent); border-color: var(--accent); box-shadow: none; }
body.editorial-calm .tag-badge.tag-confidence-medium {
background: var(--accent-soft); border-color: var(--accent); color: var(--accent);
}
body.editorial-calm .tag-badge.tag-confidence-medium:hover { background: var(--accent-soft); border-color: var(--accent); box-shadow: none; }
body.editorial-calm .tag-badge.tag-confidence-low,
body.editorial-calm .tag-badge.tag-confidence-very-low {
background: var(--accent-soft); border-color: transparent; color: var(--accent);
}
body.editorial-calm .tag-badge.tag-confidence-low:hover,
body.editorial-calm .tag-badge.tag-confidence-very-low:hover { background: var(--accent-soft); border-color: var(--accent); box-shadow: none; }
/* User-added tags → semantic success green (distinct from AI teal) */
body.editorial-calm .tag-badge.tag-user-added {
background: var(--color-success-soft); border-color: transparent; color: var(--color-success-fg);
}
body.editorial-calm .tag-badge.tag-user-added:hover { background: var(--color-success-soft); border-color: var(--color-success); box-shadow: none; }
body.editorial-calm .tag-confidence-badge { background: rgba(255, 255, 255, 0.35); }
/* Tag action buttons → ghost pill / teal-primary (were Material blue + purple) */
body.editorial-calm .btn-see-all-tags,
body.editorial-calm .btn-tag-action {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-sans); font-weight: 600; font-size: 13px;
padding: 6px 12px; cursor: pointer;
background: transparent; border: 1px solid var(--border); color: var(--fg-body);
border-radius: 999px; box-shadow: none; transform: none;
}
body.editorial-calm .btn-see-all-tags:hover,
body.editorial-calm .btn-tag-action:hover {
background: var(--bg-secondary); border-color: var(--border-strong, var(--border)); color: var(--fg); box-shadow: none; transform: none;
}
body.editorial-calm .btn-tag-action.primary,
body.editorial-calm .btn-tag-action.btn-generate-tags {
background: var(--accent); border-color: var(--accent); color: #fff;
}
body.editorial-calm .btn-tag-action.primary:hover,
body.editorial-calm .btn-tag-action.btn-generate-tags:hover {
background: var(--accent-strong, var(--accent)); border-color: var(--accent-strong, var(--accent));
}
body.editorial-calm .btn-tag-action.btn-regenerate-tags {
background: var(--accent-soft); border-color: transparent; color: var(--accent);
}
body.editorial-calm .btn-tag-action.btn-regenerate-tags:hover { background: var(--accent-soft); border-color: var(--accent); }
/* ─────────────────────────────────────────────
Layout root: app uses a sidebar + main grid pattern
already; ensure full height and no double bg.
───────────────────────────────────────────── */
body.editorial-calm .app-container,
body.editorial-calm .layout,
body.editorial-calm .app {
background: var(--bg);
}
/* ─────────────────────────────────────────────
Workspace Settings — Editorial Calm
───────────────────────────────────────────── */
/* 4-up stat grid (mirrors .ec-grid-3) */
body.editorial-calm .ec-grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
@media (max-width: 1080px) {
body.editorial-calm .ec-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
/* Section head actions cluster (right-aligned buttons next to eyebrow+h2) */
body.editorial-calm .ec-section-head__actions {
display: flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
}
/* Members toolbar — flat row, not boxed */
body.editorial-calm .ec-members-toolbar {
display: flex;
align-items: center;
gap: 12px;
margin: 16px 0 12px;
flex-wrap: wrap;
}
body.editorial-calm .ec-members-toolbar .filter-select {
min-width: 140px;
}
/* Search field with leading icon */
body.editorial-calm .ec-search-field {
position: relative;
flex: 1;
min-width: 220px;
max-width: 360px;
}
body.editorial-calm .ec-search-field input {
width: 100%;
padding: 8px 12px 8px 36px;
border: 1px solid var(--border-color);
border-radius: var(--radius-md, 10px);
background: var(--surface, #fff);
font-family: var(--font-sans);
font-size: 13px;
color: var(--fg);
transition: border-color 160ms var(--ease-standard, ease), box-shadow 160ms var(--ease-standard, ease);
}
body.editorial-calm .ec-search-field input::placeholder { color: var(--fg-muted); }
body.editorial-calm .ec-search-field input:focus-visible {
outline: 2px solid var(--color-teal-400, #2DD4BF);
outline-offset: 2px;
border-color: var(--accent);
}
body.editorial-calm .ec-search-field__icon {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
color: var(--fg-muted);
pointer-events: none;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Members body — no card wrap, just clean table. Scroll the wide member table
within its pane on narrow viewports instead of forcing the whole settings
column wider (which made the Workspace pane overflow vs the Space pane). */
body.editorial-calm .ec-members-body { margin-top: 4px; overflow-x: auto; }
body.editorial-calm .ec-members-body .users-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
body.editorial-calm .ec-members-body .users-table thead,
body.editorial-calm .ec-members-body .users-table thead tr {
background: transparent !important;
}
body.editorial-calm .ec-members-body .users-table thead th {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--fg-muted) !important;
text-align: left;
padding: 10px 12px;
border-bottom: 1px solid var(--border-color);
background: transparent !important;
}
body.editorial-calm .ec-members-body .users-table tbody td {
padding: 12px;
border-bottom: 1px solid var(--border-color);
font-size: 13px;
color: var(--fg);
vertical-align: middle;
}
body.editorial-calm .ec-members-body .users-table tbody tr:last-child td { border-bottom: none; }
body.editorial-calm .ec-members-body .users-table tbody tr:hover { background: var(--bg-secondary, rgba(0,0,0,0.02)); }
body.editorial-calm .ec-members-body .user-cell { display: flex; align-items: center; gap: 10px; }
body.editorial-calm .ec-members-body .user-name-cell { font-weight: 500; color: var(--fg); }
body.editorial-calm .ec-members-body .user-email-cell { font-size: 12px; color: var(--fg-muted); }
body.editorial-calm .ec-members-body .clickable-profile { cursor: pointer; }
body.editorial-calm .ec-members-body .clickable-profile:hover .user-name-cell { color: var(--accent); }
/* Numeric cells (Files, Tokens) — ink, mono numerals, not accent */
body.editorial-calm .ec-num {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
color: var(--fg);
}
body.editorial-calm .ec-num--muted { color: var(--fg-muted); }
/* Meta cells (dates, "You", expiry text) */
body.editorial-calm .ec-cell-meta {
font-size: 12px;
color: var(--fg-muted);
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
}
body.editorial-calm .ec-cell-meta.is-expired { color: #B91C1C; }
/* Role pills — muted variants, not bright */
body.editorial-calm .ec-role-pill {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: 999px;
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
background: var(--bg-secondary, #F1EFE9);
color: var(--fg-muted);
border: 1px solid var(--border-color);
}
body.editorial-calm .ec-role-pill--master { background: var(--accent-soft, #CCFBF1); color: #0F766E; border-color: rgba(15,118,110,0.18); }
body.editorial-calm .ec-role-pill--admin { background: #FEF3C7; color: #92400E; border-color: rgba(146,64,14,0.18); }
body.editorial-calm .ec-role-pill--editor { background: #DBEAFE; color: #1E40AF; border-color: rgba(30,64,175,0.18); }
body.editorial-calm .ec-role-pill--member { background: var(--bg-secondary, #F1EFE9); color: var(--fg); border-color: var(--border-color); }
body.editorial-calm .ec-role-pill--viewer { background: var(--bg-secondary, #F1EFE9); color: var(--fg-muted); border-color: var(--border-color); }
/* Status pills — active / inactive / pending (re-use & extend) */
body.editorial-calm .ec-status-pill {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: 999px;
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
}
body.editorial-calm .ec-status-pill--active { background: #D1FAE5; color: #065F46; }
body.editorial-calm .ec-status-pill--inactive { background: var(--bg-secondary, #F1EFE9); color: var(--fg-muted); }
body.editorial-calm .ec-status-pill--pending { background: #FEF3C7; color: #92400E; }
/* ── docs-v1 list/grid badges: Draft / AI-drafted / Generating ── */
body.editorial-calm .ec-doc-badge {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 1.5px 6px;
border-radius: 3px;
font-family: var(--font-mono);
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
flex-shrink: 0;
}
body.editorial-calm .ec-doc-badge--draft { background: #FEF3C7; color: #92400E; }
body.editorial-calm .ec-doc-badge--generating { background: var(--bg-secondary); color: var(--fg-muted); }
body.editorial-calm .ec-doc-badge__pulse {
width: 6px; height: 6px; border-radius: 50%;
background: var(--fg-muted);
animation: ec-doc-pulse 1.2s ease-in-out infinite;
}
/* ── Live presence chip (real online-collaborator count) ── */
body.editorial-calm .ec-doc-presence {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--color-success, #10B981);
flex-shrink: 0;
}
body.editorial-calm .ec-doc-presence__dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--color-success, #10B981);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-success, #10B981) 22%, transparent);
}
/* Generating-doc card affordances (replaces former inline styles) */
body.editorial-calm .resume-btn { margin-top: 8px; }
body.editorial-calm .ec-doc-interrupted { color: var(--fg-muted); font-style: italic; }
/* Author cell now wraps optional presence + name */
body.editorial-calm .document-author {
display: inline-flex;
align-items: center;
gap: 7px;
min-width: 0;
}
body.editorial-calm .document-author__name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
/* ══════════════════════════════════════════════
Documents empty state — docs-v1 start paths
══════════════════════════════════════════════ */
body.editorial-calm .ec-docs-empty {
display: flex;
flex-direction: column;
align-items: center;
padding: 56px 24px;
}
body.editorial-calm .ec-docs-empty__hero {
max-width: 640px;
text-align: center;
margin-bottom: 36px;
}
body.editorial-calm .ec-docs-empty__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 16px;
background: var(--bg-secondary);
border: 1px solid var(--border);
color: var(--accent);
margin-bottom: 20px;
}
body.editorial-calm .ec-docs-empty__hero .ub-eyebrow { margin-bottom: 10px; }
body.editorial-calm .ec-docs-empty__hero h2 {
font: 400 44px/1.08 var(--font-serif);
letter-spacing: -0.025em;
color: var(--fg);
margin: 0 0 12px;
}
body.editorial-calm .ec-docs-empty__hero p {
font: 400 16px/1.6 var(--font-sans);
color: var(--fg-body);
margin: 0;
max-width: 540px;
margin-inline: auto;
}
body.editorial-calm .ec-docs-empty__paths {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
width: 100%;
max-width: 720px;
}
body.editorial-calm .ec-start-card {
display: flex;
flex-direction: column;
gap: 12px;
text-align: left;
padding: 22px 22px 20px;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: 14px;
cursor: pointer;
text-decoration: none;
transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
font-family: var(--font-sans);
}
body.editorial-calm .ec-start-card:hover {
border-color: var(--accent);
box-shadow: var(--shadow-1);
transform: translateY(-1px);
}
body.editorial-calm .ec-start-card--feature {
background: var(--accent-soft);
border-color: transparent;
}
body.editorial-calm .ec-start-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 10px;
background: var(--bg-secondary);
border: 1px solid var(--border);
color: var(--fg-body);
}
body.editorial-calm .ec-start-card--feature .ec-start-card__icon {
background: color-mix(in srgb, var(--accent) 12%, transparent);
border-color: transparent;
color: var(--accent);
}
body.editorial-calm .ec-start-card__title {
font: 400 22px/1.2 var(--font-serif);
letter-spacing: -0.015em;
color: var(--fg);
}
body.editorial-calm .ec-start-card--feature .ec-start-card__title { color: var(--accent); }
body.editorial-calm .ec-start-card__desc {
font: 400 13px/1.55 var(--font-sans);
color: var(--fg-body);
}
body.editorial-calm .ec-start-card--feature .ec-start-card__desc { color: var(--accent); opacity: 0.85; }
body.editorial-calm .ec-start-card__cta {
margin-top: auto;
display: inline-flex;
align-items: center;
gap: 6px;
font: 600 13px/1 var(--font-sans);
color: var(--fg);
}
body.editorial-calm .ec-start-card--feature .ec-start-card__cta { color: var(--accent); }
body.editorial-calm .ec-start-card__cta svg { width: 13px; height: 13px; }
body.editorial-calm .ec-docs-empty__connect {
display: flex;
align-items: center;
gap: 14px;
margin-top: 36px;
padding: 16px 22px;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 12px;
max-width: 720px;
width: 100%;
}
body.editorial-calm .ec-docs-empty__connect > [data-ec-icon],
body.editorial-calm .ec-docs-empty__connect svg { color: var(--fg-muted); flex-shrink: 0; }
body.editorial-calm .ec-docs-empty__connect-text {
flex: 1;
font: 400 13px/1.5 var(--font-sans);
color: var(--fg-body);
}
body.editorial-calm .ec-docs-empty__connect-text strong { color: var(--fg); font-weight: 600; }
body.editorial-calm .ec-docs-empty__brands {
display: flex;
gap: 5px;
flex-shrink: 0;
}
body.editorial-calm .ec-docs-empty__brands img {
width: 20px;
height: 20px;
border-radius: 4px;
}
@media (max-width: 720px) {
body.editorial-calm .ec-docs-empty__paths { grid-template-columns: 1fr; }
body.editorial-calm .ec-docs-empty__connect { flex-wrap: wrap; }
}
/* ══════════════════════════════════════════════
Floating dark bulk-select bar — docs-v1
══════════════════════════════════════════════ */
body.editorial-calm .ec-bulk-bar {
position: fixed;
left: 50%;
bottom: 24px;
transform: translateX(-50%);
z-index: 200;
display: flex;
align-items: center;
gap: 4px;
padding: 10px 12px 10px 16px;
background: var(--fg);
color: var(--bg);
border-radius: 14px;
box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22), 0 4px 12px rgba(15, 23, 42, 0.1);
font-family: var(--font-sans);
}
body.editorial-calm .ec-bulk-bar__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 6px;
border-radius: 6px;
background: var(--accent);
color: #fff;
font: 700 11px/1 var(--font-sans);
}
body.editorial-calm .ec-bulk-bar__label {
font: 600 13px/1 var(--font-sans);
margin: 0 10px 0 4px;
color: var(--bg);
}
body.editorial-calm .ec-bulk-bar__action {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border: 0;
border-radius: 7px;
background: rgba(255, 255, 255, 0.06);
color: var(--bg);
font: 600 12.5px/1 var(--font-sans);
cursor: pointer;
white-space: nowrap;
transition: background 0.12s;
}
body.editorial-calm .ec-bulk-bar__action:hover { background: rgba(255, 255, 255, 0.14); }
body.editorial-calm .ec-bulk-bar__action svg { width: 13px; height: 13px; }
body.editorial-calm .ec-bulk-bar__action--danger {
color: #FCA5A5;
background: rgba(239, 68, 68, 0.12);
}
body.editorial-calm .ec-bulk-bar__action--danger:hover { background: rgba(239, 68, 68, 0.22); }
body.editorial-calm .ec-bulk-bar__divider {
width: 1px;
height: 20px;
background: rgba(255, 255, 255, 0.16);
margin: 0 6px;
}
body.editorial-calm .ec-bulk-bar__close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: 0;
border-radius: 7px;
background: transparent;
color: rgba(255, 255, 255, 0.6);
cursor: pointer;
transition: background 0.12s, color 0.12s;
}
body.editorial-calm .ec-bulk-bar__close:hover {
background: rgba(255, 255, 255, 0.1);
color: var(--bg);
}
/* Export format menu — pops above the dark bar */
body.editorial-calm .ec-bulk-export-menu {
position: absolute;
bottom: calc(100% + 8px);
left: 0;
min-width: 200px;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-2, 0 8px 24px rgba(0,0,0,0.12));
padding: 6px;
}
body.editorial-calm .ec-bulk-export-menu .export-option {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 8px 10px;
border: 0;
border-radius: var(--radius-sm, 6px);
background: transparent;
color: var(--fg-body);
font: 500 13px/1 var(--font-sans);
text-align: left;
cursor: pointer;
}
body.editorial-calm .ec-bulk-export-menu .export-option:hover { background: var(--bg-secondary); color: var(--fg); }
body.editorial-calm .ec-bulk-export-menu .export-option svg { color: var(--fg-muted); }
/* Row action icon buttons — flat, hover-tinted */
body.editorial-calm .ec-row-actions {
display: inline-flex;
align-items: center;
gap: 4px;
}
body.editorial-calm .ec-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
border-radius: var(--radius-sm, 6px);
background: transparent;
border: 1px solid transparent;
color: var(--fg-muted);
cursor: pointer;
transition: background 160ms var(--ease-standard, ease), color 160ms var(--ease-standard, ease), border-color 160ms var(--ease-standard, ease);
}
body.editorial-calm .ec-icon-btn:hover {
background: var(--bg-secondary, #F1EFE9);
color: var(--fg);
border-color: var(--border-color);
}
body.editorial-calm .ec-icon-btn:focus-visible {
outline: 2px solid var(--color-teal-400, #2DD4BF);
outline-offset: 2px;
}
body.editorial-calm .ec-icon-btn[data-ec-icon] svg,
body.editorial-calm .ec-icon-btn span svg,
body.editorial-calm .ec-icon-btn span[data-ec-icon] { width: 16px; height: 16px; }
body.editorial-calm .ec-icon-btn--danger:hover { background: #FEE2E2; color: #B91C1C; border-color: rgba(185,28,28,0.18); }
/* Form helpers — used in invite/edit modals */
/* Mono uppercase eyebrow above a field/group (e.g. "Invitation method") */
body.editorial-calm label.ec-field-eyebrow,
body.editorial-calm .form-group > label.ec-field-eyebrow,
body.editorial-calm .ec-field-eyebrow {
display: block;
font-family: var(--font-mono) !important;
font-size: 10.5px !important;
font-weight: 500 !important;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg-muted) !important;
margin-bottom: 8px;
}
/* Input + side-button row (e.g. password + Generate) */
body.editorial-calm .ec-input-with-action {
display: flex;
align-items: center;
gap: 8px;
}
body.editorial-calm .ec-input-with-action > .form-control { flex: 1; min-width: 0; }
body.editorial-calm .ec-input-with-action > .btn { flex: 0 0 auto; }
/* Radio cards — used for invite method choice */
body.editorial-calm .ec-radio-group {
display: flex;
flex-direction: column;
gap: 10px;
}
body.editorial-calm .ec-radio-card {
display: grid;
grid-template-columns: 18px 1fr;
grid-template-rows: auto auto;
column-gap: 12px;
row-gap: 4px;
padding: 12px 14px;
border: 1px solid var(--border-color);
border-radius: var(--radius-md, 10px);
background: var(--surface, #fff);
cursor: pointer;
transition: border-color 160ms var(--ease-standard, ease), background 160ms var(--ease-standard, ease);
}
body.editorial-calm .ec-radio-card:hover { border-color: var(--accent); }
body.editorial-calm .ec-radio-card input[type="radio"] {
grid-column: 1;
grid-row: 1 / span 2;
margin: 2px 0 0 0;
accent-color: var(--accent);
cursor: pointer;
}
body.editorial-calm .ec-radio-card__title {
grid-column: 2;
grid-row: 1;
font-weight: 500;
font-size: 14px;
color: var(--fg);
}
body.editorial-calm .ec-radio-card__hint {
grid-column: 2;
grid-row: 2;
font-size: 12.5px;
color: var(--fg-muted);
line-height: 1.4;
}
body.editorial-calm .ec-radio-card:has(input:checked) {
border-color: var(--accent);
background: var(--accent-soft, #ECFDF5);
}
/* Checkbox card — used for reset-password toggle */
body.editorial-calm .ec-checkbox-card {
display: grid;
grid-template-columns: 18px 1fr;
grid-template-rows: auto auto;
column-gap: 12px;
row-gap: 4px;
padding: 12px 14px;
border: 1px solid var(--border-color);
border-radius: var(--radius-md, 10px);
background: var(--surface, #fff);
cursor: pointer;
}
body.editorial-calm .ec-checkbox-card input[type="checkbox"] {
grid-column: 1;
grid-row: 1 / span 2;
margin: 2px 0 0 0;
accent-color: var(--accent);
cursor: pointer;
}
body.editorial-calm .ec-checkbox-card__title { grid-column: 2; grid-row: 1; font-weight: 500; font-size: 14px; color: var(--fg); }
body.editorial-calm .ec-checkbox-card__hint { grid-column: 2; grid-row: 2; font-size: 12.5px; color: var(--fg-muted); line-height: 1.4; }
body.editorial-calm .ec-checkbox-card:has(input:checked) { border-color: var(--accent); background: var(--accent-soft, #ECFDF5); }
/* Success card — credentials display after creating user */
body.editorial-calm .ec-success-card {
margin-top: 16px;
padding: 16px 18px;
border: 1px solid var(--accent);
border-radius: var(--radius-md, 10px);
background: var(--accent-soft, #ECFDF5);
}
body.editorial-calm .ec-success-card__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
body.editorial-calm .ec-success-card__title {
font-family: var(--font-serif);
font-size: 18px;
font-weight: 400;
letter-spacing: -0.01em;
color: var(--fg);
margin: 0 0 12px;
}
body.editorial-calm .ec-success-card__list {
display: grid;
gap: 8px;
margin: 0;
}
body.editorial-calm .ec-success-card__list > div {
display: grid;
grid-template-columns: 140px 1fr;
gap: 12px;
align-items: center;
}
body.editorial-calm .ec-success-card__list dt {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--fg-muted);
margin: 0;
}
body.editorial-calm .ec-success-card__list dd {
margin: 0;
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--fg);
}
body.editorial-calm .ec-password-chip {
font-family: var(--font-mono);
font-size: 13px;
padding: 4px 8px;
background: var(--surface, #fff);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm, 6px);
color: var(--fg);
}
/* ============================================================
WhatsApp connect wizard (deploy.html → WhatsApp tab → modal)
------------------------------------------------------------
Phase A — three-step wizard inside the existing connect modal.
Steps: 1) path picker 2) coexistence limits 3) credentials.
Edit mode skips the wizard and uses the standard form.
============================================================ */
body.editorial-calm .wa-step { display: none; }
body.editorial-calm .wa-step.active { display: block; }
body.editorial-calm .wa-step-eyebrow {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-ink-500, #6b7280);
margin-bottom: 6px;
}
body.editorial-calm .wa-step-title {
font-size: 17px;
font-weight: 600;
color: var(--color-ink-900, #111827);
margin: 0 0 4px 0;
}
body.editorial-calm .wa-step-lede {
font-size: 13px;
line-height: 1.55;
color: var(--color-ink-600, #4b5563);
margin: 0 0 16px 0;
}
body.editorial-calm .wa-back-link {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 13px;
color: var(--color-ink-500, #6b7280);
text-decoration: none;
cursor: pointer;
margin-bottom: 12px;
background: none;
border: none;
padding: 0;
font-family: inherit;
}
body.editorial-calm .wa-back-link:hover {
color: var(--color-ink-700, #374151);
}
body.editorial-calm .wa-path-grid {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
@media (min-width: 720px) {
body.editorial-calm .wa-path-grid {
grid-template-columns: repeat(3, 1fr);
}
}
body.editorial-calm .wa-path-card {
position: relative;
display: flex;
flex-direction: column;
text-align: left;
padding: 16px;
border: 1px solid var(--color-border, #e5e7eb);
border-radius: var(--radius-md, 8px);
background: var(--color-paper, #ffffff);
cursor: pointer;
transition: border-color var(--duration-fast, 150ms) var(--easing-standard, ease),
background-color var(--duration-fast, 150ms) var(--easing-standard, ease);
}
body.editorial-calm .wa-path-card:hover {
background: var(--color-paper-2, #f9fafb);
border-color: var(--color-ink-300, #d1d5db);
}
body.editorial-calm .wa-path-card.selected {
border-color: var(--color-teal-400);
background: var(--color-teal-50, #f0fdfa);
}
body.editorial-calm .wa-path-card .wa-path-title {
font-weight: 600;
font-size: 14px;
margin-bottom: 6px;
color: var(--color-ink-900, #111827);
}
/* Badge now straddles the top edge (outside the box), so the title needs
no extra top reservation. */
body.editorial-calm .wa-path-card:has(.wa-recommend-badge) .wa-path-title {
margin-top: 0;
}
body.editorial-calm .wa-path-card .wa-path-sub {
font-size: 13px;
line-height: 1.5;
color: var(--color-ink-600, #4b5563);
margin-bottom: 12px;
}
body.editorial-calm .wa-path-card .wa-path-tradeoff {
font-size: 12px;
line-height: 1.5;
color: var(--color-ink-500, #6b7280);
margin-top: auto;
padding-top: 8px;
border-top: 1px dashed var(--color-border, #e5e7eb);
}
/* Sits on the card's top edge (half outside the box) as a "recommended" tab. */
body.editorial-calm .wa-recommend-badge {
position: absolute;
top: -11px;
left: 14px;
right: auto;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #fff;
background: var(--color-teal-700, #0f766e);
padding: 3px 9px;
border-radius: 999px;
border: 1px solid var(--color-teal-700, #0f766e);
box-shadow: 0 1px 3px rgba(15, 118, 110, .25);
}
body.editorial-calm .wa-limits-list {
list-style: none;
padding: 0;
margin: 0 0 14px 0;
border: 1px solid var(--color-border, #e5e7eb);
border-radius: var(--radius-md, 8px);
overflow: hidden;
background: var(--color-paper, #ffffff);
}
body.editorial-calm .wa-limits-list li {
padding: 10px 14px;
font-size: 13px;
line-height: 1.5;
color: var(--color-ink-700, #374151);
border-bottom: 1px solid var(--color-border, #e5e7eb);
display: flex;
gap: 8px;
align-items: flex-start;
}
body.editorial-calm .wa-limits-list li:last-child { border-bottom: none; }
body.editorial-calm .wa-limits-list li::before {
content: "—";
color: var(--color-ink-400, #9ca3af);
flex-shrink: 0;
}
body.editorial-calm .wa-limits-list li strong {
color: var(--color-ink-900, #111827);
font-weight: 600;
}
body.editorial-calm .wa-limits-ack {
display: flex;
gap: 10px;
align-items: flex-start;
padding: 12px 14px;
background: var(--color-paper-2, #f9fafb);
border: 1px solid var(--color-border, #e5e7eb);
border-radius: var(--radius-md, 8px);
font-size: 13px;
line-height: 1.5;
color: var(--color-ink-800, #1f2937);
cursor: pointer;
}
body.editorial-calm .wa-limits-ack input[type="checkbox"] {
margin-top: 2px;
flex-shrink: 0;
}
/* ── Embedded Signup block (step 3 "Connect with Facebook") ── */
body.editorial-calm .wa-es-block {
margin: 0 0 18px 0;
}
body.editorial-calm .wa-es-btn {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: #1877F2; /* Meta blue — intentional brand cue, not the app accent */
border-color: #1877F2;
}
body.editorial-calm .wa-es-btn:hover:not(:disabled) {
background: #166fe0;
border-color: #166fe0;
}
body.editorial-calm .wa-es-btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 3px;
background: #fff;
color: #1877F2;
font-weight: 800;
font-size: 13px;
line-height: 1;
}
body.editorial-calm .wa-es-hint {
font-size: 12px;
line-height: 1.5;
color: var(--color-ink-500, #6b7280);
margin: 8px 2px 0;
text-align: center;
}
body.editorial-calm .wa-es-divider {
display: flex;
align-items: center;
gap: 12px;
margin: 16px 0 4px;
color: var(--color-ink-400, #9ca3af);
font-size: 12px;
}
body.editorial-calm .wa-es-divider::before,
body.editorial-calm .wa-es-divider::after {
content: "";
flex: 1;
height: 1px;
background: var(--color-border, #e5e7eb);
}
/* WhatsApp wizard: stack paired field rows on narrow viewports so the two-up
inputs aren't cramped on mobile. Mobile-first, matching the 720px breakpoint
used by .wa-path-grid above. Scoped to .wa-step so the shared .form-row
helper is unchanged elsewhere. */
body.editorial-calm .wa-step .form-row { flex-direction: column; }
@media (min-width: 720px) {
body.editorial-calm .wa-step .form-row { flex-direction: row; }
}
/* ═══════════════════════════════════════════════
Generate-document flow — G1 (Topic + template)
═══════════════════════════════════════════════ */
body.editorial-calm .ec-gen-topbar {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 32px;
border-bottom: 1px solid var(--border);
background: var(--bg);
flex-wrap: wrap;
}
body.editorial-calm .ec-gen-topbar__brand {
display: inline-flex;
align-items: center;
gap: 7px;
font: 600 10.5px/1 var(--font-mono);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--accent);
}
body.editorial-calm .ec-gen-topbar__brand svg { color: var(--accent); }
body.editorial-calm .ec-gen-topbar__actions { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; }
/* Step strip */
body.editorial-calm .ec-gen-steps { display: inline-flex; align-items: center; gap: 8px; }
body.editorial-calm .ec-gen-step {
display: inline-flex;
align-items: center;
gap: 6px;
font: 600 10px/1 var(--font-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg-faint, var(--fg-muted));
}
body.editorial-calm .ec-gen-step__num {
width: 16px; height: 16px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
font: 700 9px/1 var(--font-mono);
border: 1.5px solid var(--fg-faint, var(--fg-muted));
color: var(--fg-muted);
}
body.editorial-calm .ec-gen-step.is-active { color: var(--accent); }
body.editorial-calm .ec-gen-step.is-active .ec-gen-step__num { background: var(--accent); border-color: var(--accent); color: #fff; }
body.editorial-calm .ec-gen-step.is-done { color: var(--fg-body); }
body.editorial-calm .ec-gen-step.is-done .ec-gen-step__num { background: var(--fg); border-color: var(--fg); color: #fff; }
body.editorial-calm .ec-gen-step__bar { width: 16px; height: 1px; background: var(--border); }
/* Body */
body.editorial-calm .ec-gen-body { flex: 1; overflow-y: auto; padding: 48px 56px 64px; }
body.editorial-calm .ec-gen-inner { max-width: 880px; margin: 0 auto; }
body.editorial-calm .ec-gen-eyebrow { margin-bottom: 10px; }
body.editorial-calm .ec-gen-title {
font: 400 44px/1.1 var(--font-serif);
letter-spacing: -0.025em;
color: var(--fg);
margin: 0 0 14px;
}
body.editorial-calm .ec-gen-lede {
font: 400 15px/1.6 var(--font-sans);
color: var(--fg-body);
margin: 0 0 24px;
max-width: 640px;
}
body.editorial-calm .ec-gen-space {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 28px;
padding: 7px 12px;
background: var(--accent-soft);
border-radius: var(--radius-pill);
font: 500 12px/1 var(--font-sans);
color: var(--accent);
}
body.editorial-calm .ec-gen-space__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
body.editorial-calm .ec-gen-space strong { font-weight: 700; }
/* Topic input card */
body.editorial-calm .ec-gen-topic {
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: 14px;
padding: 20px 22px;
box-shadow: var(--shadow-1);
}
body.editorial-calm .ec-gen-topic__label { display: block; margin-bottom: 8px; }
body.editorial-calm .ec-gen-topic__input {
width: 100%;
border: 0;
outline: none;
resize: none;
background: transparent;
font: 400 22px/1.4 var(--font-serif);
letter-spacing: -0.015em;
color: var(--fg);
min-height: 60px;
}
body.editorial-calm .ec-gen-topic__input::placeholder { color: var(--fg-faint, var(--fg-muted)); opacity: 0.6; }
body.editorial-calm .ec-gen-topic__foot {
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
body.editorial-calm .ec-gen-tones { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body.editorial-calm .ec-gen-tone {
padding: 5px 12px;
border-radius: var(--radius-pill);
font: 600 11.5px/1 var(--font-sans);
background: var(--bg-elevated);
color: var(--fg-body);
border: 1px solid var(--border);
cursor: pointer;
}
body.editorial-calm .ec-gen-tone.is-active { background: var(--fg); color: var(--bg); border-color: transparent; }
body.editorial-calm .ec-gen-charcount { font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.04em; color: var(--fg-muted); white-space: nowrap; }
/* Templates */
body.editorial-calm .ec-gen-section { margin-top: 36px; }
body.editorial-calm .ec-gen-section__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
body.editorial-calm .ec-gen-section__count { font: 400 12px/1 var(--font-sans); color: var(--fg-muted); }
body.editorial-calm .ec-gen-templates { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
body.editorial-calm .ec-gen-tpl {
text-align: left;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: 12px;
padding: 14px 14px 12px;
display: flex;
flex-direction: column;
gap: 10px;
cursor: pointer;
font-family: var(--font-sans);
transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
body.editorial-calm .ec-gen-tpl:hover { border-color: var(--accent); box-shadow: var(--shadow-1); transform: translateY(-1px); }
body.editorial-calm .ec-gen-tpl.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
body.editorial-calm .ec-gen-tpl__icon {
width: 30px; height: 30px; border-radius: 8px;
background: var(--bg-secondary);
border: 1px solid var(--border);
color: var(--fg-body);
display: inline-flex; align-items: center; justify-content: center;
}
body.editorial-calm .ec-gen-tpl.is-muted .ec-gen-tpl__icon { color: var(--fg-muted); }
body.editorial-calm .ec-gen-tpl__name { display: block; font: 600 13px/1.2 var(--font-sans); color: var(--fg); letter-spacing: -0.005em; }
body.editorial-calm .ec-gen-tpl__desc { display: block; font: 400 11.5px/1.4 var(--font-sans); color: var(--fg-muted); margin-top: 2px; }
/* Suggested prompts */
body.editorial-calm .ec-gen-prompts { display: flex; flex-wrap: wrap; gap: 8px; }
body.editorial-calm .ec-gen-prompt {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: var(--radius-pill);
background: var(--accent-soft);
color: var(--accent);
border: 0;
font: 600 12.5px/1.3 var(--font-sans);
letter-spacing: -0.005em;
cursor: pointer;
text-align: left;
}
body.editorial-calm .ec-gen-prompt svg { color: var(--accent); flex-shrink: 0; }
body.editorial-calm .ec-gen-prompt:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
@media (max-width: 860px) {
body.editorial-calm .ec-gen-templates { grid-template-columns: repeat(2, 1fr); }
body.editorial-calm .ec-gen-body { padding: 32px 22px 48px; }
body.editorial-calm .ec-gen-title { font-size: 32px; }
}
/* ── Generate flow — G3 (Outline preview / edit) ── */
body.editorial-calm .ec-gen-split {
flex: 1;
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
overflow: hidden;
}
body.editorial-calm .ec-gen-split__main { overflow-y: auto; padding: 40px 56px 100px; }
body.editorial-calm .ec-gen-split__rail {
border-left: 1px solid var(--border);
padding: 40px 28px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 24px;
background: var(--bg);
}
body.editorial-calm .ec-gen-title--sm { font-size: 32px; margin-bottom: 12px; }
body.editorial-calm .ec-gen-outline { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
body.editorial-calm .ec-gen-osec {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: flex-start;
gap: 14px;
padding: 14px 16px;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: 12px;
}
body.editorial-calm .ec-gen-osec__handle {
display: inline-flex;
align-items: center;
gap: 8px;
padding-top: 6px;
color: var(--fg-faint, var(--fg-muted));
}
body.editorial-calm .ec-gen-osec__num {
font: 600 11px/1 var(--font-mono);
letter-spacing: 0.04em;
color: var(--fg-muted);
width: 18px;
}
body.editorial-calm .ec-gen-osec__body { min-width: 0; }
body.editorial-calm .ec-gen-osec__title {
width: 100%;
border: 0;
outline: none;
background: transparent;
font: 600 15px/1.3 var(--font-sans);
letter-spacing: -0.01em;
color: var(--fg);
padding: 0;
}
body.editorial-calm .ec-gen-osec__desc {
width: 100%;
border: 0;
outline: none;
resize: none;
background: transparent;
font: 400 13px/1.5 var(--font-sans);
color: var(--fg-body);
margin-top: 4px;
padding: 0;
overflow: hidden;
}
body.editorial-calm .ec-gen-osec__remove {
width: 28px; height: 28px;
display: inline-flex; align-items: center; justify-content: center;
border: 0; border-radius: var(--radius-md);
background: transparent;
color: var(--fg-muted);
cursor: pointer;
}
body.editorial-calm .ec-gen-osec__remove:hover { background: #FEE2E2; color: var(--color-danger); }
body.editorial-calm .ec-gen-outline-add {
margin-top: 10px;
width: 100%;
padding: 12px 16px;
border: 1px dashed var(--border);
border-radius: 12px;
background: transparent;
color: var(--fg-muted);
font: 600 13px/1 var(--font-sans);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
body.editorial-calm .ec-gen-outline-add:hover { border-color: var(--accent); color: var(--accent); }
/* Right rail rows */
body.editorial-calm .ec-gen-rail-rows { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
body.editorial-calm .ec-gen-rail-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
font: 500 13px/1.3 var(--font-sans);
}
body.editorial-calm .ec-gen-rail-row > span:first-child { color: var(--fg-muted); font-size: 12px; }
body.editorial-calm .ec-gen-rail-row > span:last-child { color: var(--fg); font-weight: 600; text-align: right; }
body.editorial-calm .ec-gen-rail-out { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
body.editorial-calm .ec-gen-rail-outitem {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--bg-elevated);
font: 500 12px/1.3 var(--font-sans);
color: var(--fg-body);
}
body.editorial-calm .ec-gen-rail-outitem svg { color: var(--fg-muted); flex-shrink: 0; }
@media (max-width: 860px) {
body.editorial-calm .ec-gen-split { grid-template-columns: 1fr; }
body.editorial-calm .ec-gen-split__rail { display: none; }
body.editorial-calm .ec-gen-split__main { padding: 32px 22px 80px; }
}
/* Generate flow — full-screen "generating" overlay (G3; G4 will replace with streaming) */
body.editorial-calm .ec-gen-overlay {
position: fixed;
inset: 0;
z-index: 400;
display: none;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--bg) 78%, transparent);
backdrop-filter: blur(2px);
}
body.editorial-calm .ec-gen-overlay.is-visible { display: flex; }
body.editorial-calm .ec-gen-overlay__card {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
padding: 36px 44px;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: 16px;
box-shadow: var(--shadow-2, 0 18px 48px rgba(15,23,42,.18));
text-align: center;
max-width: 420px;
}
body.editorial-calm .ec-gen-overlay__spinner {
width: 28px; height: 28px;
border-radius: 50%;
border: 2.5px solid var(--accent-soft);
border-top-color: var(--accent);
animation: ec-gen-spin 0.8s linear infinite;
}
@keyframes ec-gen-spin { to { transform: rotate(360deg); } }
body.editorial-calm .ec-gen-overlay__title { font: 400 22px/1.25 var(--font-serif); letter-spacing: -0.015em; color: var(--fg); }
body.editorial-calm .ec-gen-overlay__sub { font: 400 13px/1.5 var(--font-sans); color: var(--fg-muted); }
/* ── Generate flow — G4 (Full-screen streaming) ── */
body.editorial-calm .ec-gen-stream {
flex: 1;
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
overflow: hidden;
position: relative;
}
body.editorial-calm .ec-gen-stream__main { overflow-y: auto; padding: 40px 56px 120px; }
body.editorial-calm .ec-gen-stream__rail {
border-left: 1px solid var(--border);
padding: 36px 24px;
overflow-y: auto;
background: var(--bg);
}
body.editorial-calm .ec-gen-stream__byline {
display: flex;
align-items: center;
gap: 8px;
margin: 14px 0 28px;
font: 500 12.5px/1 var(--font-sans);
color: var(--fg-muted);
}
body.editorial-calm .ec-gen-stream__avatar {
width: 22px; height: 22px; border-radius: 50%;
background: var(--accent-soft); color: var(--accent);
display: inline-flex; align-items: center; justify-content: center;
}
body.editorial-calm .ec-gen-stream__dot { color: var(--fg-faint, var(--fg-muted)); opacity: 0.5; }
/* Section rows in the main column */
body.editorial-calm .ec-gen-stream__sections { display: flex; flex-direction: column; gap: 4px; }
body.editorial-calm .ec-gen-srow {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 4px;
font: 400 22px/1.25 var(--font-serif);
letter-spacing: -0.018em;
color: var(--fg-muted);
transition: color 0.2s;
}
body.editorial-calm .ec-gen-srow__mark {
width: 20px; height: 20px; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
}
body.editorial-calm .ec-gen-srow.is-done { color: var(--fg); }
body.editorial-calm .ec-gen-srow.is-done .ec-gen-srow__mark svg { color: var(--color-success, #10B981); }
body.editorial-calm .ec-gen-srow.is-pending { color: var(--fg-faint, var(--fg-muted)); opacity: 0.55; font-size: 18px; }
body.editorial-calm .ec-gen-srow.is-pending .ec-gen-srow__mark::before {
content: ""; width: 9px; height: 9px; border-radius: 50%;
border: 1.5px solid var(--fg-faint, var(--fg-muted));
}
body.editorial-calm .ec-gen-srow.is-active {
display: block;
margin: 10px 0;
padding: 16px 18px;
background: var(--accent-soft);
border: 1px dashed var(--accent);
border-radius: 12px;
color: var(--fg);
}
body.editorial-calm .ec-gen-srow.is-active .ec-gen-srow__writing {
display: inline-flex; align-items: center; gap: 8px;
font: 700 11px/1 var(--font-mono);
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--accent);
margin-bottom: 10px;
}
body.editorial-calm .ec-gen-srow.is-active .ec-gen-srow__pulse {
width: 8px; height: 8px; border-radius: 50%;
background: var(--accent);
animation: ec-gen-pulse 1.4s ease-in-out infinite;
}
body.editorial-calm .ec-gen-srow.is-active .ec-gen-srow__name {
display: block;
font: 400 26px/1.2 var(--font-serif);
letter-spacing: -0.02em;
color: var(--fg);
}
@keyframes ec-gen-pulse { 0%, 100% { opacity: 0.5; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.15); } }
/* Right rail progress */
body.editorial-calm .ec-gen-stream__progress { margin-top: 14px; display: flex; flex-direction: column; gap: 4px; }
body.editorial-calm .ec-gen-prow {
display: flex; align-items: center; gap: 9px;
padding: 8px 10px; border-radius: 8px;
font: 500 12.5px/1.3 var(--font-sans);
color: var(--fg-muted);
}
body.editorial-calm .ec-gen-prow.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
body.editorial-calm .ec-gen-prow.is-done { color: var(--fg-body); }
body.editorial-calm .ec-gen-prow__icon { width: 14px; height: 14px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
body.editorial-calm .ec-gen-prow.is-done .ec-gen-prow__icon svg { color: var(--color-success, #10B981); }
body.editorial-calm .ec-gen-prow__spin {
width: 12px; height: 12px; border-radius: 50%;
border: 2px solid var(--accent); border-top-color: transparent;
animation: ec-gen-spin 0.8s linear infinite;
}
body.editorial-calm .ec-gen-prow__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--bg-secondary); }
body.editorial-calm .ec-gen-prow__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Sticky dark control bar */
body.editorial-calm .ec-gen-stream__bar {
position: absolute;
left: 50%; bottom: 24px;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 12px 9px 16px;
background: var(--fg);
color: var(--bg);
border-radius: 14px;
box-shadow: 0 18px 48px rgba(15,23,42,.22), 0 4px 10px rgba(15,23,42,.08);
z-index: 50;
}
body.editorial-calm .ec-gen-stream__bardot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--accent);
animation: ec-gen-pulse 1.4s ease-in-out infinite;
}
body.editorial-calm .ec-gen-stream__barlabel { font: 600 12.5px/1 var(--font-sans); }
body.editorial-calm .ec-gen-stream__bardiv { width: 1px; height: 18px; background: rgba(255,255,255,.16); margin: 0 4px; }
body.editorial-calm .ec-gen-stream__stop {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px; border: 0; border-radius: 8px;
background: rgba(239,68,68,.18); color: #FCA5A5;
font: 700 12.5px/1 var(--font-sans);
cursor: pointer;
}
body.editorial-calm .ec-gen-stream__stop:hover { background: rgba(239,68,68,.28); }
@media (max-width: 860px) {
body.editorial-calm .ec-gen-stream { grid-template-columns: 1fr; }
body.editorial-calm .ec-gen-stream__rail { display: none; }
}
/* Generate flow — make the [hidden] attribute authoritative over the display rules
on the step views (grid/flex) and the top-bar buttons (.btn inline-flex). */
body.editorial-calm .ec-gen-body[hidden],
body.editorial-calm .ec-gen-split[hidden],
body.editorial-calm .ec-gen-stream[hidden],
body.editorial-calm .ec-gen-topbar .btn[hidden] { display: none !important; }
/* ════════════════════════════════════════════
Merged from _ec-add-chat.css
════════════════════════════════════════════ */
/* =====================================================
Editorial Calm — chat page additions (staging)
Extracted from the former inline