/* EMO UI 2026 — Misto Skin inspired */ /* * Канонічна шкала брейкпоінтів (D3). Нові @media — лише ці пороги: * mobile ≤ 480px * (small ≤ 640px — санкціонований опційний 4-й рівень) * tablet ≤ 768px * desktop ≤ 1024px * Нормалізовано: 720→768, 560→480, 900/960/1100→1024. 640 лишено навмисно. */ :root { --emo-primary: #0f62fe; --emo-primary-hover: #0353e9; --emo-primary-bg: #e5f6ff; --emo-surface-1: #ffffff; --emo-surface-2: #f3f4f6; --emo-border: #e5e7eb; --emo-text: #111827; --emo-text-muted: #6b7280; --emo-success-soft: #d1fae5; --emo-success-text: #065f46; --emo-warning-soft: #fef3c7; --emo-warning-text: #92400e; --emo-danger-soft: #fee2e2; --emo-danger-text: #b91c1c; --emo-radius: 10px; --emo-radius-sm: 6px; --emo-gap-sm: 8px; --emo-shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04); /* Shared entity-card tokens — single source of truth for all list/card surfaces */ --emo-card-bg: var(--emo-surface-1); --emo-card-border: var(--emo-border); --emo-card-radius: var(--emo-radius); --emo-card-shadow: var(--emo-shadow); --emo-sidebar-w: 260px; --emo-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* WOW semantic tokens */ --emo-ok: #059669; --emo-warn: #d97706; --emo-risk: #dc2626; /* Пастельна палітра для СМУЖОК (прогрес/міні-бари) — стандарт: м'якша за семантичні --emo-ok/warn/risk */ --emo-bar-ok: #8fd6b3; --emo-bar-warn: #f2d18f; --emo-bar-risk: #f0aca8; --emo-bar-inwork: #a9caf0; --emo-bar-inwork-2: #d3e3f8; --emo-danger: #dc2626; /* alias semantic danger → risk-red (раніше токен не визначався → ламані fallback'и) */ --emo-neutral: #6b7280; /* Семантичні кольори категорій (фінанси: total/content/ads) — централізовано замість inline-hex */ --emo-cat-total: #0ea5e9; --emo-cat-content: #10b981; --emo-cat-ads: #f59e0b; --emo-accent: var(--emo-primary); --emo-review: #8a3ffc; --emo-radius-xl: 14px; --emo-background-secondary: var(--emo-surface-2); --emo-text-primary: var(--emo-primary); --success-strong: var(--emo-ok); --error-strong: var(--emo-risk); --warning-strong: var(--emo-warn); --border-1: var(--emo-border); --border-2: color-mix(in srgb, var(--emo-border) 65%, var(--emo-text-muted)); /* Аліаси раніше-невизначених токенів → канонічні (через var() автоматично theme-aware). Раніше ці var(--emo-*) у в'юхах/CSS падали на різні fallback'и або 'unset' (зламаний колір). */ --emo-success: var(--emo-ok); --emo-success-bg: var(--emo-success-soft); --emo-success-border: var(--emo-ok); --emo-warning: var(--emo-warn); --emo-warn-color: var(--emo-warn); --emo-warn-text: var(--emo-warning-text); --emo-warn-bg: var(--emo-warning-soft); --emo-warn-soft: var(--emo-warning-soft); --emo-risk-bg: var(--emo-danger-soft); --emo-risk-border: var(--emo-risk); --emo-info: var(--emo-accent); --emo-info-text: var(--emo-accent); --emo-info-soft: color-mix(in srgb, var(--emo-accent) 14%, transparent); --emo-link: var(--emo-primary); --emo-muted: var(--emo-text-muted); --emo-muted-color: var(--emo-text-muted); --emo-muted-bg: var(--emo-surface-2); --emo-surface: var(--emo-surface-1); --emo-surface-inset: var(--emo-surface-2); --emo-surface-muted: var(--emo-surface-2); --emo-shadow-card: var(--emo-card-shadow); } /* Темна тема — лише за вибором користувача (data-emo-theme на ) */ html[data-emo-theme="dark"] { --emo-primary: #60a5fa; --emo-primary-hover: #93c5fd; --emo-primary-bg: #1e3a5f; --emo-surface-1: #111827; --emo-surface-2: #0b1220; --emo-border: #374151; --emo-text: #f3f4f6; --emo-text-muted: #9ca3af; --emo-success-soft: #064e3b; --emo-success-text: #6ee7b7; --emo-warning-soft: #78350f; --emo-warning-text: #fcd34d; --emo-danger-soft: #7f1d1d; --emo-danger-text: #fca5a5; --emo-ok: #34d399; --emo-warn: #fbbf24; --emo-risk: #f87171; /* Пастель для смужок (темна тема) */ --emo-bar-ok: #56b892; --emo-bar-warn: #d7ad61; --emo-bar-risk: #cf8480; --emo-bar-inwork: #6f9fd4; --emo-bar-inwork-2: #3f5f86; --emo-danger: #f87171; /* alias semantic danger → risk-red (dark) */ --emo-neutral: #9ca3af; --emo-accent: #60a5fa; --emo-review: #a78bfa; --emo-shadow: 0 1px 3px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.35); --emo-on-primary: #0b1220; --border-2: color-mix(in srgb, var(--emo-border) 55%, var(--emo-text-muted)); color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; } body { margin: 0; font-family: var(--emo-font); color: var(--emo-text); background: var(--emo-surface-2); line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: var(--emo-primary); text-decoration: none; } a:hover { text-decoration: underline; } /* Auth shell */ .emo-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: linear-gradient(145deg, #e5f6ff 0%, var(--emo-surface-2) 50%); } .emo-auth__card { width: 100%; max-width: 400px; background: var(--emo-surface-1); border-radius: var(--emo-radius); box-shadow: var(--emo-shadow); padding: 32px; border: 1px solid var(--emo-border); } .emo-auth__logo { font-size: 1.5rem; font-weight: 700; color: var(--emo-primary); margin: 0 0 8px; } .emo-auth__sub { color: var(--emo-text-muted); margin: 0 0 24px; font-size: 0.9rem; } .emo-auth--landing .emo-auth__card { max-width: 920px; padding: 40px 44px; } .emo-auth-landing { display: grid; grid-template-columns: 1fr minmax(280px, 340px); gap: 40px 48px; align-items: start; } .emo-auth-landing__badge { display: inline-block; margin: 0 0 12px; padding: 4px 10px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--emo-primary); background: color-mix(in srgb, var(--emo-primary) 12%, transparent); border-radius: 999px; } .emo-auth-landing__lead { margin: 0 0 16px; font-size: 1.05rem; line-height: 1.55; color: var(--emo-text); } .emo-auth-landing__text { margin: 0 0 20px; font-size: 0.92rem; line-height: 1.6; } .emo-auth-landing__features { margin: 0 0 20px; padding-left: 1.2rem; font-size: 0.9rem; line-height: 1.7; color: var(--emo-text); } .emo-auth-landing__note { margin: 0; font-size: 0.82rem; line-height: 1.5; } .emo-auth-landing__panel { padding: 24px; background: var(--emo-surface-2); border: 1px solid var(--emo-border); border-radius: var(--emo-radius); } .emo-auth-landing__panel-title { margin: 0 0 4px; font-size: 1.1rem; font-weight: 600; } .emo-auth-form { flex-direction: column; align-items: stretch; } .emo-auth-form .emo-input { min-width: 100%; } .emo-auth-form__submit { width: 100%; margin-top: 8px; } .emo-topbar__cluster { display: flex; align-items: center; gap: 8px; min-width: 0; } .emo-topbar__cluster--start { flex: 1 1 auto; } .emo-topbar__cluster--end { flex: 0 1 auto; justify-content: flex-end; } .emo-topbar__scope { flex-shrink: 0; } .emo-topbar__scope-label { flex-shrink: 0; font-size: 0.72rem; font-weight: 600; color: var(--emo-text-muted); } .emo-topbar__scope.emo-segmented { margin-bottom: 0; } .emo-topbar__scope.emo-segmented a, .emo-topbar__scope.emo-segmented button { padding: 6px 12px; font-size: 0.8125rem; white-space: nowrap; } .emo-topbar__scope a { text-decoration: none; } @media (max-width: 768px) { .emo-topbar__scope { display: none; } } @media (max-width: 1024px) { .emo-topbar__user-name { display: none; } } @media (max-width: 1024px) { .emo-topbar__scope.emo-segmented a, .emo-topbar__scope.emo-segmented button { padding: 6px 10px; font-size: 0.75rem; } } @media (max-width: 768px) { .emo-auth--landing .emo-auth__card { padding: 28px 24px; } .emo-auth-landing { grid-template-columns: 1fr; gap: 28px; } } /* App shell */ .emo-app { display: flex; min-height: 100vh; } .emo-sidebar { width: var(--emo-sidebar-w); background: var(--emo-surface-1); border-right: 1px solid var(--emo-border); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 100; transition: transform .2s ease; } .emo-sidebar__brand { display: block; padding: 0; font-weight: 700; font-size: 1.15rem; line-height: 1.2; color: var(--emo-primary); text-decoration: none; } .emo-sidebar__brand:hover { text-decoration: none; color: var(--emo-primary-hover); } .emo-sidebar__nav { flex: 1; overflow-y: auto; padding: 8px 12px; } .emo-sidebar__footer { padding: 8px 12px 12px; border-top: 1px solid var(--emo-border); margin-top: auto; } .emo-nav-icon.dashicons { flex-shrink: 0; width: 20px; height: 20px; font-size: 20px; line-height: 20px; display: inline-block; vertical-align: middle; speak: never; } .emo-sidebar__link .emo-nav-icon { margin-right: 2px; color: var(--emo-text-muted); } .emo-sidebar__link:hover .emo-nav-icon { color: var(--emo-text); } .emo-sidebar__link--active .emo-nav-icon { color: var(--emo-primary); } .emo-sidebar__link-label { flex: 1; min-width: 0; } .emo-sidebar__group { font-size: 0.7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--emo-text-muted); padding: 16px 8px 6px; font-weight: 600; } .emo-sidebar__link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--emo-radius-sm); color: var(--emo-text); font-size: 0.9rem; font-weight: 500; margin-bottom: 2px; } .emo-sidebar__link:hover { background: var(--emo-surface-2); text-decoration: none; } .emo-sidebar__link--active { background: var(--emo-primary-bg); color: var(--emo-primary); } .emo-main { flex: 1; margin-left: var(--emo-sidebar-w); display: flex; flex-direction: column; min-width: 0; transition: margin-left .2s ease; } .emo-topbar { background: var(--emo-surface-1); border-bottom: 1px solid var(--emo-border); padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: 0; z-index: 50; } .emo-topbar__menu { display: none; background: none; border: 1px solid var(--emo-border); border-radius: var(--emo-radius-sm); padding: 8px 12px; cursor: pointer; font-size: 1.1rem; } .emo-topbar__user { font-size: 0.9rem; color: var(--emo-text-muted); } .emo-topbar__user strong { color: var(--emo-text); } .emo-content { padding: 24px; flex: 1; max-width: 1280px; width: 100%; } .emo-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 90; } .emo-overlay--open { display: block; } @media (max-width: 768px) { .emo-sidebar { transform: translateX(-100%); } .emo-sidebar--open { transform: translateX(0); box-shadow: 4px 0 24px rgba(0,0,0,.12); } .emo-main { margin-left: 0; } .emo-topbar__menu { display: block; } .emo-content { padding: 16px; padding-bottom: max(16px, env(safe-area-inset-bottom)); } .emo-topbar { padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top)); flex-wrap: nowrap; gap: 8px; } .emo-topbar__cluster--start { flex: 1 1 0; } .emo-topbar__cluster--end { flex: 0 0 auto; gap: 6px; } .emo-topbar__logout { padding-inline: 10px; } .emo-page-title { font-size: 1.25rem; } .emo-page-header__actions { width: 100%; justify-content: stretch; } .emo-page-header__actions .emo-btn { flex: 1 1 auto; } .emo-page-header__actions .emo-segmented { width: 100%; } .emo-page-header__actions .emo-segmented a { flex: 1; text-align: center; padding: 10px 8px; } .emo-form-row .emo-field { flex: 1 1 100%; min-width: 0; } .emo-form-row .emo-input, .emo-form-row .emo-select { width: 100%; min-width: 0; } .emo-form-row > .emo-btn { width: 100%; } .emo-channel-filters .emo-segmented { display: flex; width: 100%; } .emo-channel-filters .emo-segmented a { flex: 1; text-align: center; } .emo-layout-2col { grid-template-columns: 1fr; } .emo-stat-grid { grid-template-columns: 1fr; } .emo-card { padding: 16px; } .emo-tabs--scroll { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-left: -4px; margin-right: -4px; padding-left: 4px; padding-right: 4px; } .emo-tabs--scroll::-webkit-scrollbar { display: none; } .emo-tabs--scroll .emo-tabs__item { flex-shrink: 0; white-space: nowrap; } .emo-input, .emo-select, .emo-textarea { font-size: 16px; } .emo-topbar__user .emo-topbar__profile-link { display: none; } .emo-content { padding-bottom: calc(72px + env(safe-area-inset-bottom)); } } .emo-bottom-nav { display: none; } @media (max-width: 768px) { .emo-bottom-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; background: var(--emo-surface-1); border-top: 1px solid var(--emo-border); padding-bottom: env(safe-area-inset-bottom); } .emo-bottom-nav__item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; padding: 8px 4px; font-size: 0.65rem; color: var(--emo-text-muted); text-decoration: none; background: none; border: none; cursor: pointer; font-family: inherit; } .emo-bottom-nav__icon.dashicons { width: 22px; height: 22px; font-size: 22px; line-height: 22px; display: block; margin: 0 auto 2px; } .emo-bottom-nav__label { line-height: 1.2; } .emo-bottom-nav__more-link { display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: 0.875rem; color: var(--emo-text); text-decoration: none; } .emo-bottom-nav__item--active { color: var(--emo-accent); font-weight: 600; } } .emo-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } /* Page header */ .emo-page-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px 16px; margin-bottom: 20px; } .emo-page-header__main { flex: 1 1 200px; min-width: 0; } .emo-page-header__actions { flex: 1 1 auto; justify-content: flex-end; } /* Typography */ .emo-page-title { margin: 0 0 4px; font-size: 1.5rem; font-weight: 700; } .emo-page-sub { margin: 0; color: var(--emo-text-muted); font-size: 0.9rem; } .emo-section-intro { margin: 8px 0 0; padding: 8px 12px; border-left: 3px solid var(--emo-primary); background: var(--emo-surface-2); border-radius: var(--emo-radius-sm, 6px); color: var(--emo-text-muted); font-size: 0.85rem; max-width: 70ch; } .emo-breadcrumb { font-size: 0.8rem; color: var(--emo-text-muted); margin-bottom: 8px; } .emo-breadcrumb a { color: var(--emo-text-muted); } .emo-muted { color: var(--emo-text-muted); font-size: 0.875rem; } /* Card */ .emo-card { background: var(--emo-card-bg); border: 1px solid var(--emo-card-border); border-radius: var(--emo-card-radius); box-shadow: var(--emo-card-shadow); padding: 20px; margin-bottom: 20px; } .emo-card__title { margin: 0 0 12px; font-size: 1rem; font-weight: 600; } .emo-card--danger { border-color: var(--emo-danger-text); background: var(--emo-danger-soft); } /* Buttons */ .emo-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px; font-size: 0.875rem; font-weight: 600; font-family: inherit; border-radius: var(--emo-radius-sm); border: 1px solid transparent; cursor: pointer; transition: background .15s, border-color .15s; } .emo-btn--primary { background: var(--emo-primary); color: #fff; } .emo-btn--primary:hover { background: var(--emo-primary-hover); } .emo-btn--ghost { background: var(--emo-surface-1); border-color: var(--emo-border); color: var(--emo-text); } .emo-btn--ghost:hover { background: var(--emo-surface-2); } .emo-btn--danger { background: #dc2626; color: #fff; } .emo-btn--danger:hover { background: #b91c1c; } .emo-btn--sm { padding: 6px 12px; font-size: 0.8rem; } .emo-btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } /* Alerts */ .emo-alerts { margin-bottom: 20px; } .emo-alert { padding: 12px 16px; border-radius: var(--emo-radius-sm); margin-bottom: 8px; font-size: 0.9rem; border: 1px solid; } .emo-alert--success { background: var(--emo-success-soft); border-color: #6ee7b7; color: var(--emo-success-text); } .emo-alert--error { background: var(--emo-danger-soft); border-color: #fca5a5; color: var(--emo-danger-text); } .emo-alert--info { background: var(--emo-primary-bg); border-color: #93c5fd; color: #1e40af; } .emo-alert--warning { background: var(--emo-warning-soft); border-color: #fcd34d; color: var(--emo-warning-text); } /* Badge */ .emo-badge { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; } /* Канон + аліаси (одне правило, щоб не розʼїжджалися): success≡ok, warn≡warning, risk≡danger. */ .emo-badge--success, .emo-badge--ok { background: var(--emo-success-soft); color: var(--emo-success-text); } .emo-badge--warn, .emo-badge--warning { background: var(--emo-warning-soft); color: var(--emo-warning-text); } .emo-badge--risk, .emo-badge--danger { background: var(--emo-danger-soft); color: var(--emo-danger-text); } .emo-badge--muted { background: #f3f4f6; color: #4b5563; } .emo-badge--info { background: var(--emo-primary-bg); color: var(--emo-primary); } .emo-badge--review { background: color-mix(in srgb, var(--emo-review) 16%, transparent); color: var(--emo-review); } /* Глобальний плаваючий toast (заміна нативного alert для помилок/попереджень). */ .emo-flash-toast-host { position: fixed; z-index: 1000; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; max-width: min(92vw, 460px); } .emo-flash-toast { pointer-events: auto; background: var(--emo-surface-1, #fff); color: var(--emo-text, #111827); border: 1px solid var(--emo-border); border-left: 3px solid var(--emo-primary); border-radius: var(--emo-radius-sm, 6px); box-shadow: var(--emo-card-shadow, 0 4px 16px rgba(0, 0, 0, 0.18)); padding: 10px 14px; font-size: 0.85rem; white-space: pre-line; opacity: 0; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease; } .emo-flash-toast.is-shown { opacity: 1; transform: translateY(0); } .emo-flash-toast--error { border-left-color: var(--emo-risk); } /* Стилізоване підтвердження () — заміна нативного confirm для деструктиву. */ .emo-confirm-dialog { border: 1px solid var(--emo-border); border-radius: var(--emo-radius-sm, 8px); box-shadow: var(--emo-card-shadow, 0 8px 32px rgba(0, 0, 0, 0.24)); background: var(--emo-surface-1, #fff); color: var(--emo-text, #111827); padding: 18px 20px; max-width: min(92vw, 380px); } .emo-confirm-dialog::backdrop { background: rgba(0, 0, 0, 0.4); } .emo-confirm-dialog__msg { margin: 0 0 16px; font-size: 0.92rem; } .emo-confirm-dialog__actions { display: flex; justify-content: flex-end; gap: 8px; } /* Роль-залежний банер у формі рядка: хто ви · чия черга · наступна дія. */ .emo-task-role-banner { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0 0 12px; padding: 8px 12px; border-radius: var(--emo-radius-sm, 6px); border-left: 3px solid var(--emo-primary); background: var(--emo-surface-2); font-size: 0.85rem; } .emo-task-role-banner__who { font-weight: 700; } .emo-task-role-banner__now { color: var(--emo-text-muted); } .emo-task-role-banner--editor { border-left-color: var(--emo-review); } .emo-task-role-banner--assignee { border-left-color: var(--emo-primary); } .emo-task-role-banner--creator { border-left-color: var(--emo-warn); } .emo-task-role-banner--wait { border-left-color: var(--emo-border); background: transparent; } /* Tabs */ .emo-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; padding: 4px; background: var(--emo-surface-1); border-radius: var(--emo-radius); border: 1px solid var(--emo-border); } .emo-tabs__item { padding: 8px 14px; border-radius: var(--emo-radius-sm); font-size: 0.85rem; font-weight: 500; color: var(--emo-text-muted); } .emo-tabs__item:hover { background: var(--emo-surface-2); text-decoration: none; color: var(--emo-text); } .emo-tabs__item--active { background: var(--emo-primary); color: #fff; } /* Segmented */ .emo-segmented { display: inline-flex; border: 1px solid var(--emo-border); border-radius: var(--emo-radius-sm); overflow: hidden; margin-bottom: 16px; } .emo-segmented a, .emo-segmented button { padding: 8px 16px; font-size: 0.85rem; font-weight: 500; color: var(--emo-text-muted); background: var(--emo-surface-1); border: none; border-right: 1px solid var(--emo-border); cursor: pointer; font-family: inherit; } .emo-segmented a:last-child, .emo-segmented button:last-child { border-right: none; } .emo-segmented a--active, .emo-segmented a.active, .emo-segmented button.active { background: var(--emo-primary-bg); color: var(--emo-primary); font-weight: 600; } /* Forms */ .emo-form-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 16px; } .emo-field { display: flex; flex-direction: column; gap: 4px; } .emo-field label { font-size: 0.8rem; font-weight: 500; color: var(--emo-text-muted); } .emo-field--attention { padding: 8px 10px; border-radius: var(--emo-radius-sm); background: var(--emo-warning-soft); border: 1px solid #fcd34d; } .emo-profile-incomplete-notice__list { margin: 8px 0 0; padding-left: 1.2rem; } .emo-profile-incomplete-notice__list li + li { margin-top: 4px; } .emo-input, .emo-select { padding: 10px 12px; border: 1px solid var(--emo-border); border-radius: var(--emo-radius-sm); font-size: 0.9rem; font-family: inherit; background: var(--emo-surface-1); min-width: 140px; } .emo-textarea { padding: 10px 12px; border: 1px solid var(--emo-border); border-radius: var(--emo-radius-sm); font-size: 0.9rem; font-family: inherit; background: var(--emo-surface-1); width: 100%; min-height: 120px; resize: vertical; } .emo-input:focus, .emo-select:focus, .emo-textarea:focus { outline: none; border-color: var(--emo-primary); box-shadow: 0 0 0 3px rgba(15, 98, 254, .15); } /* Table */ .emo-table-wrap { overflow-x: auto; border: 1px solid var(--emo-border); border-radius: var(--emo-radius); background: var(--emo-surface-1); } .emo-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .emo-table th { text-align: left; padding: 12px 14px; background: var(--emo-surface-2); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--emo-text-muted); border-bottom: 1px solid var(--emo-border); position: sticky; top: 0; } .emo-table td { padding: 12px 14px; border-bottom: 1px solid var(--emo-border); vertical-align: top; } .emo-table tr:last-child td { border-bottom: none; } .emo-table tbody tr:hover { background: #fafafa; } @media (max-width: 768px) { .emo-table--responsive thead { display: none; } .emo-table--responsive tr { display: block; margin-bottom: 12px; border: 1px solid var(--emo-border); border-radius: var(--emo-radius-sm); padding: 8px; } .emo-table--responsive td { display: flex; justify-content: space-between; gap: 12px; border: none; padding: 8px 10px; } .emo-table--responsive td::before { content: attr(data-label); font-weight: 600; font-size: 0.75rem; color: var(--emo-text-muted); flex-shrink: 0; } /* Публікації — справжня картка: підпис НАД вмістом (не збоку), усе на всю ширину, заголовок першим і помітнішим. Інакше довгий заголовок чавиться у вузьку колонку, а мовні чипи/смуга обрізаються за екраном (загальний key-value патерн не тягне складні комірки). */ .emo-pub-table.emo-table--responsive tr { display: flex; flex-direction: column; } .emo-pub-table.emo-table--responsive td { flex-direction: column; align-items: stretch; gap: 3px; padding: 6px 10px; } .emo-pub-table.emo-table--responsive td::before { font-size: 0.64rem; letter-spacing: 0.03em; text-transform: uppercase; font-weight: 600; } .emo-pub-table.emo-table--responsive td[data-label="Публікація"] { order: -1; padding-top: 2px; } .emo-pub-table.emo-table--responsive td[data-label="Публікація"]::before { display: none; } .emo-pub-table.emo-table--responsive .emo-pub-title { font-size: 0.95rem; } .emo-pub-table.emo-table--responsive .emo-pub-lang-grid { width: 100%; } } /* Stat grid */ .emo-stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; } .emo-stat { background: var(--emo-surface-1); border: 1px solid var(--emo-border); border-radius: var(--emo-radius); padding: 16px; box-shadow: var(--emo-shadow); } .emo-stat__label { font-size: 0.75rem; color: var(--emo-text-muted); text-transform: uppercase; letter-spacing: .04em; } .emo-stat__value { font-size: 1.1rem; font-weight: 600; margin-top: 4px; } /* Empty */ .emo-empty { text-align: center; padding: 48px 24px; background: var(--emo-surface-1); border: 1px dashed var(--emo-border); border-radius: var(--emo-radius); } .emo-empty__title { font-size: 1.1rem; font-weight: 600; margin: 0 0 8px; } .emo-empty__text { color: var(--emo-text-muted); margin: 0 0 16px; } /* Profile grid */ .emo-profile-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: 20px; align-items: start; } .emo-profile-grid__main, .emo-profile-grid__side { display: flex; flex-direction: column; gap: 16px; min-width: 0; } @media (max-width: 1024px) { .emo-profile-grid { grid-template-columns: 1fr; } } .emo-dl { margin: 0; } .emo-dl dt { font-size: 0.75rem; color: var(--emo-text-muted); margin-top: 12px; } .emo-dl dd { margin: 4px 0 0; font-weight: 500; min-width: 0; overflow-wrap: anywhere; word-break: break-word; } .emo-profile-read-dl dd { max-width: 100%; } .emo-profile-url { display: inline-block; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } .emo-profile-bio { white-space: pre-wrap; font-weight: 400; line-height: 1.5; } .emo-profile-break { overflow-wrap: anywhere; word-break: break-word; } .emo-profile-iban { text-transform: uppercase; letter-spacing: 0.02em; } .emo-profile-header { flex-wrap: wrap; } .emo-profile-header__main { flex: 1; min-width: 0; } .emo-profile-avatar-error { margin-top: 8px; width: 100%; } .emo-profile-edit-card { margin-bottom: 16px; } .emo-profile-edit-notice { margin-bottom: 16px; } .emo-profile-edit-form { display: flex; flex-direction: column; gap: 20px; min-width: 0; } .emo-profile-form-section { min-width: 0; } .emo-profile-form-section + .emo-profile-form-section { padding-top: 16px; border-top: 1px solid var(--emo-border); } .emo-profile-form-section__title { margin: 0 0 10px; font-size: 0.95rem; font-weight: 600; } .emo-profile-form-section__lead { margin: -4px 0 12px; } .emo-profile-form-grid { display: grid; gap: 12px; min-width: 0; } .emo-profile-form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 640px) { .emo-profile-form-grid--2 { grid-template-columns: 1fr; } } .emo-profile-form-grid__full { grid-column: 1 / -1; } .emo-profile-edit-form .emo-input, .emo-profile-edit-form .emo-select, .emo-profile-edit-form .emo-textarea { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } .emo-field-hint { margin: 4px 0 0; font-size: 0.75rem; color: var(--emo-text-muted); line-height: 1.4; } .emo-profile-form-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .emo-profile-stats__total { font-weight: 700; color: var(--emo-primary); } .emo-profile-error-list { margin: 0; padding-left: 1.1rem; } .emo-profile-deadlines-title { margin: 10px 0 4px; } .emo-profile-mo-hint { margin-top: 12px; } .emo-profile-avatar-hint { padding: 8px 10px; border-radius: 8px; margin-top: 8px; } .emo-field--checkbox { display: flex; align-items: flex-end; min-height: 42px; } .emo-pre { font-size: 0.75rem; background: var(--emo-surface-2); padding: 10px; border-radius: var(--emo-radius-sm); overflow: auto; max-height: 200px; white-space: pre-wrap; word-break: break-word; } /* Avatar */ .emo-avatar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; overflow: hidden; background: var(--emo-primary-bg); color: var(--emo-primary); font-weight: 600; vertical-align: middle; } .emo-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .emo-avatar__initials { line-height: 1; } .emo-avatar--sm { width: 28px; height: 28px; font-size: 0.65rem; } .emo-avatar--md { width: 40px; height: 40px; font-size: 0.8rem; } .emo-avatar--lg { width: 80px; height: 80px; font-size: 1.25rem; } .emo-name-cell { display: inline-flex; align-items: center; gap: 10px; } .emo-topbar__user { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; text-decoration: none; color: inherit; } .emo-topbar__user:hover { text-decoration: none; color: inherit; } .emo-topbar__user strong { color: var(--emo-text); } .emo-online-widget__team-link { font-size: 1.1rem; line-height: 1; text-decoration: none; margin-left: 6px; opacity: 0.75; } .emo-online-widget__team-link:hover { opacity: 1; } .emo-profile-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; min-width: 0; } .emo-profile-avatar-upload { position: relative; display: inline-flex; cursor: pointer; border-radius: 999px; } .emo-profile-avatar-upload__overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: inherit; background: color-mix(in srgb, var(--emo-text) 45%, transparent); color: #fff; font-size: 1.5rem; font-weight: 700; opacity: 0; transition: opacity 0.15s ease; } .emo-profile-avatar-upload:hover .emo-profile-avatar-upload__overlay, .emo-profile-avatar-upload:focus-within .emo-profile-avatar-upload__overlay, .emo-profile-avatar-upload--empty .emo-profile-avatar-upload__overlay { opacity: 1; } .emo-profile-avatar-upload--empty .emo-profile-avatar-upload__overlay { opacity: 0.72; } .emo-profile-work-kpi { margin-bottom: 8px; } .emo-profile-task-list { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 4px; } .emo-profile-rubric-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; } .emo-profile-rubric-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border: 1px solid var(--emo-border); border-radius: 999px; font-size: 0.78rem; color: var(--emo-text); background: var(--emo-surface-muted, #f8f9fb); } html[data-emo-theme="dark"] .emo-profile-rubric-chip { background: var(--emo-surface-1); color: var(--emo-text); } .emo-profile-rubric-chip__count { font-weight: 700; color: var(--emo-primary); font-size: 0.72rem; } .emo-profile-bank-cards { margin: 12px 0 0; padding: 12px 0 0; border: none; border-top: 1px solid var(--emo-border); } .emo-profile-bank-cards__hint { margin: 0 0 10px; } .emo-profile-bank-card-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; } .emo-profile-bank-card-row__head { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 600; cursor: pointer; } .emo-profile-bank-cards-display { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; } .emo-profile-bank-cards-display__item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.85rem; } .emo-profile-bank-cards-display__label { font-weight: 600; min-width: 7rem; } .emo-profile-bank-cards-display__number { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.04em; } /* Presence */ .emo-presence { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; } .emo-presence__dot { width: 8px; height: 8px; border-radius: 50%; background: #9ca3af; } .emo-presence__dot--online { background: #10b981; } .emo-presence__dot--recent { background: #f59e0b; } /* Pagination */ .emo-pagination { margin-top: 20px; display: flex; gap: 8px; flex-wrap: wrap; } .emo-pagination a, .emo-pagination span { padding: 8px 12px; border: 1px solid var(--emo-border); border-radius: var(--emo-radius-sm); font-size: 0.85rem; background: var(--emo-surface-1); } .emo-pagination span { background: var(--emo-primary-bg); border-color: var(--emo-primary); color: var(--emo-primary); } /* Admin system bar */ .emo-admin-system { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; margin: -8px 0 20px; background: var(--emo-surface-1); border: 1px solid var(--emo-border); border-radius: var(--emo-radius); box-shadow: var(--emo-shadow); position: sticky; top: 0; z-index: 20; } .emo-admin-system__label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; color: var(--emo-text-muted); margin-right: 4px; } .emo-admin-subnav { display: flex; flex-wrap: wrap; gap: 16px 24px; padding: 12px 16px; margin-bottom: 20px; background: var(--emo-surface-1); border: 1px solid var(--emo-border); border-radius: var(--emo-radius); } .emo-admin-subnav__group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; } .emo-admin-subnav__label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; color: var(--emo-text-muted); margin-right: 4px; } .emo-admin-subnav__link { font-size: 0.85rem; padding: 4px 10px; border-radius: 6px; color: var(--emo-text); text-decoration: none; } .emo-admin-subnav__link:hover { background: var(--emo-surface-2); } .emo-admin-subnav__link.is-active { background: var(--emo-primary-bg); color: var(--emo-primary); font-weight: 600; } .emo-admin-form .emo-form-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; } .emo-input--full { width: 100%; max-width: 100%; } .emo-code-block { font-size: 0.75rem; max-height: 200px; overflow: auto; padding: 12px; background: var(--emo-surface-2); border-radius: var(--emo-radius); } .emo-filter-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } /* Utilities */ .emo-inline-form { display: inline; } .emo-text-sm { font-size: 0.85rem; } .emo-text-xs { font-size: 0.7rem; } .emo-url { word-break: break-all; font-size: 0.8rem; color: var(--emo-text-muted); } .emo-collapse summary { cursor: pointer; color: var(--emo-text-muted); font-size: 0.8rem; } /* Channel / dashboard layouts */ .emo-layout-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; } .emo-channel-filters { margin-bottom: 0; } /* Shared compact filters toolbar (tasks, publications, ads, traffic, thematic) */ .emo-filters-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; } .emo-filters-toolbar.emo-form-row, .emo-form-row.emo-filters-toolbar { margin-bottom: 0; } .emo-filters-toolbar--compact { gap: 8px; } .emo-filters-card--compact.emo-card, .emo-card--compact.emo-card { padding: 10px 12px; margin-bottom: 10px; } .emo-card--compact .emo-card__title { margin-bottom: 8px; font-size: 0.9rem; } .emo-filters-toolbar--compact .emo-field label { font-size: 0.72rem; margin-bottom: 2px; } .emo-filters-toolbar--compact .emo-input, .emo-filters-toolbar--compact .emo-select:not(.ts-hidden-accessible) { height: 32px; padding: 0 8px; font-size: 0.8125rem; line-height: 30px; box-sizing: border-box; } .emo-filters-toolbar--compact .emo-filters-toolbar__actions .emo-btn--sm { height: 32px; padding-top: 0; padding-bottom: 0; box-sizing: border-box; } .emo-filters-toolbar--compact .emo-toggle-pill--filter { min-height: 32px; box-sizing: border-box; } .emo-filters-toolbar--compact .emo-form-row { margin-bottom: 0; gap: 8px; } .emo-filters-toolbar--compact .emo-field--grow { flex: 1 1 140px; min-width: 120px; } .emo-filters-toolbar__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex-shrink: 0; } .emo-tab-pills-scroll--compact { margin: 8px 0 10px; gap: 6px; } .emo-tab-pills-scroll--compact .emo-tab-pill { padding: 6px 12px; font-size: 0.8125rem; } /* Міні-вкладка «Дозрівання» біля «Індексація» — легша, як прогрес-підказка. */ .emo-tab-pill--mini { padding: 4px 10px; font-size: 0.72rem; opacity: 0.82; } .emo-tab-pill--mini.emo-tab-pill--active { opacity: 1; } /* Кольорові ікони у вкладках Публікацій (Dashicons; активна вкладка фарбується через emo-tab-pill--color-*, як у Завданнях). */ .emo-tab-ic { font-size: 15px; width: 15px; height: 15px; line-height: 1; flex: none; vertical-align: middle; } .emo-tab-ic--gray { color: #9ca3af; } .emo-tab-ic--blue { color: #3b82f6; } .emo-tab-ic--green { color: #22c55e; } .emo-tab-ic--orange { color: #f97316; } .emo-tab-ic--red { color: #ef4444; } .emo-tab-ic--purple { color: #a855f7; } /* Активна вкладка успадковує колір тексту — ікона теж (щоб не дисонувала). */ .emo-tab-pill--active .emo-tab-ic { color: currentColor; } /* Група «Дозрівання → Індексація» — похідне одне від одного, вирівняне по центру. */ .emo-pub-bonus-row { display: flex; flex-wrap: nowrap; gap: 7px; align-items: center; } .emo-tab-grp { display: inline-flex; flex-wrap: nowrap; white-space: nowrap; align-items: center; gap: 6px; padding: 2px 6px; border: 1px dashed var(--emo-border); border-radius: 999px; } .emo-tab-grp .emo-tab-pill { margin: 0; } .emo-tab-grp__arrow { flex: none; color: var(--emo-text-muted); font-size: 0.85rem; line-height: 1; } .emo-pub-type-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } .emo-pub-scope-zones--compact { gap: 8px 14px; margin-bottom: 10px; flex-wrap: nowrap; overflow-x: auto; align-items: flex-start; padding-bottom: 3px; } /* Усередині одного рядка зони/пігулки не переносимо — рядок горизонтально гортається. */ .emo-pub-scope-zones--compact .emo-tab-pills-scroll { flex-wrap: nowrap; margin: 0; overflow: visible; } .emo-pub-scope-zones--compact .emo-pub-scope-zone { flex: 0 0 auto; } .emo-pub-scope-zones--compact .emo-pub-scope-zone { gap: 4px; } .emo-pub-scope-zones--compact .emo-pub-scope-zone__label { font-size: 0.6rem; letter-spacing: 0.05em; } .emo-keys-summary--compact { padding: 6px 10px; margin-bottom: 10px; font-size: 0.8125rem; } /* .emo-mb-sm визначено нижче (8px, ~L1450) — тут був дубль 10px, перебитий; видалено. */ .emo-preview-panel { margin-top: 16px; } .emo-u-hidden { display: none !important; } /* WOW visual patterns */ .emo-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 16px; } .emo-kpi-tile { background: var(--emo-surface-1); border: 1px solid var(--emo-border); border-radius: var(--emo-radius); padding: 16px; } .emo-kpi-tile__value { font-size: 1.5rem; font-weight: 700; line-height: 1.2; } .emo-kpi-tile__label { font-size: 0.8rem; color: var(--emo-text-muted); margin-top: 4px; } .emo-estimate-badge { display: inline-block; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--emo-warning-soft); color: var(--emo-warning-text); } .emo-skeleton { background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%); background-size: 200% 100%; animation: emo-shimmer 1.2s infinite; border-radius: var(--emo-radius-sm); min-height: 1rem; } @keyframes emo-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .emo-waterfall { display: flex; flex-direction: column; gap: 8px; } .emo-waterfall__row { display: flex; align-items: center; gap: 12px; font-size: 0.9rem; } .emo-waterfall__bar-wrap { flex: 1; height: 24px; background: var(--emo-surface-2); border-radius: var(--emo-radius-sm); overflow: hidden; } .emo-waterfall__bar { height: 100%; border-radius: var(--emo-radius-sm); min-width: 2px; transition: width .2s ease; } .emo-waterfall__bar--base { background: var(--emo-neutral); opacity: .35; } .emo-waterfall__bar--add { background: var(--emo-ok); } .emo-waterfall__bar--deduct { background: var(--emo-risk); } .emo-progress-ring { display: inline-block; vertical-align: middle; } .emo-donut { max-width: 120px; } .emo-sparkline { display: block; width: 100%; max-width: 120px; height: 32px; } .emo-presence-strip { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .emo-presence-strip__item { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; } .emo-presence__dot--away { background: var(--emo-warn); } .emo-presence__dot--off { background: var(--emo-neutral); } .emo-online-widget { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 1; min-width: 0; max-width: 180px; } @media (max-width: 1024px) { .emo-online-widget { display: none; } } .emo-online-stack { display: flex; padding-left: 8px; } .emo-online-avatar { position: relative; width: 32px; height: 32px; margin-left: -8px; transition: transform 0.2s ease, z-index 0.2s; cursor: help; } .emo-online-avatar:first-child { margin-left: 0; } .emo-online-avatar:hover { transform: translateY(-4px); z-index: 10; } .emo-online-avatar .emo-avatar { width: 100%; height: 100%; border: 2px solid var(--emo-surface-1); box-sizing: border-box; } .emo-online-dot { position: absolute; bottom: 0; right: 0; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--emo-surface-1); box-sizing: border-box; flex-shrink: 0; } .emo-online-dot--online { background-color: var(--emo-ok); } .emo-online-dot--away { background-color: var(--emo-warn); } .emo-online-dot--off { background-color: var(--emo-neutral); } .emo-online-widget__hint { display: none !important; } .emo-online-widget__link { color: var(--emo-primary); font-weight: 600; text-decoration: none; } .emo-online-widget__link:hover { text-decoration: underline; } .emo-team-presence-inline { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; } .emo-team-presence-inline .emo-online-dot { position: static; border: none; width: 8px; height: 8px; } .emo-team-name-cell { display: flex; flex-direction: column; } .emo-hide-xs { display: flex; } @media (max-width: 768px) { .emo-hide-xs { display: none !important; } } .emo-view-as-banner { background: var(--emo-warning-soft); border: 1px solid #f0c33c; padding: 8px 16px; margin-bottom: 16px; border-radius: var(--emo-radius-sm); font-size: 0.9rem; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .emo-health-tile--ok { border-left: 4px solid var(--emo-ok); } .emo-health-tile--warn { border-left: 4px solid var(--emo-warn); } .emo-health-tile--risk { border-left: 4px solid var(--emo-risk); } /* .emo-badge--ok/warn/risk → канонізовано вище (аліаси success/warning/danger) */ .emo-timeline-cap { display: flex; gap: 4px; margin-top: 8px; } .emo-timeline-cap__seg { flex: 1; height: 8px; border-radius: 4px; background: var(--emo-surface-2); } .emo-timeline-cap__seg--active { background: var(--emo-warn); } .emo-timeline-cap__seg--past { background: var(--emo-risk); } /* WOW §8 focus_now + insight_feed */ /* Що горить — дедлайн-таймлайн (Завдання, особистий) */ .emo-deadline-timeline { border: 1px solid var(--emo-border); border-radius: var(--emo-radius); background: var(--emo-surface-1); padding: 12px 14px; } .emo-deadline-timeline__revision, .emo-deadline-timeline__review { margin-bottom: 10px; } .emo-deadline-timeline__head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; } .emo-deadline-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .emo-deadline-list__item { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--emo-border); } .emo-deadline-list__item:last-child { border-bottom: none; } .emo-deadline-list__link { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; text-decoration: none; color: var(--emo-text); } .emo-deadline-list__link:hover .emo-deadline-list__title { color: var(--emo-primary); } .emo-deadline-list__title { font-weight: 600; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .emo-deadline-list__site { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .emo-deadline-list__chip { white-space: nowrap; flex-shrink: 0; } /* КП — live-прев'ю листа клієнту */ .emo-cq-preview { border: 1px solid var(--emo-border); border-radius: var(--emo-radius); overflow: hidden; } .emo-cq-preview__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 8px 12px; background: var(--emo-surface-2); border-bottom: 1px solid var(--emo-border); } .emo-cq-preview__body { padding: 16px; background: var(--emo-surface-1); overflow-x: auto; } .emo-focus-hero { background: var(--emo-surface-1); border: 1px solid var(--emo-border); border-left: 3px solid var(--emo-accent); border-radius: 0 var(--emo-radius) var(--emo-radius) 0; padding: 20px; margin-bottom: 16px; } .emo-focus-hero--risk { border-left-color: var(--emo-risk); } .emo-focus-hero--warn { border-left-color: var(--emo-warn); } .emo-focus-hero--ok { border-left-color: var(--emo-ok); } .emo-focus-hero__head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; justify-content: space-between; } .emo-focus-hero__meta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 12px; font-size: 0.85rem; color: var(--emo-text-muted); } .emo-focus-queue { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 20px; -webkit-overflow-scrolling: touch; } .emo-focus-queue__item { flex: 0 0 auto; min-width: 160px; max-width: 220px; background: var(--emo-surface-1); border: 1px solid var(--emo-border); border-radius: var(--emo-radius-sm); padding: 12px; font-size: 0.85rem; } .emo-focus-queue__item:hover { border-color: var(--emo-accent); } .emo-progress-bar { height: 8px; background: var(--emo-surface-2); border-radius: 999px; overflow: hidden; } .emo-progress-bar__fill { height: 100%; background: var(--emo-bar-ok); border-radius: 999px; transition: width .2s ease; } .emo-progress-bar__fill--warn { background: var(--emo-bar-warn); } .emo-progress-bar__fill--risk { background: var(--emo-bar-risk); } .emo-score-header { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; margin-bottom: 20px; } .emo-score-header__text { flex: 1; min-width: 200px; } .emo-insight-feed { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; } .emo-insight-feed__item { display: flex; gap: 12px; align-items: flex-start; background: var(--emo-surface-1); border: 1px solid var(--emo-border); border-left: 3px solid var(--emo-neutral); border-radius: 0 var(--emo-radius-sm) var(--emo-radius-sm) 0; padding: 12px 14px; } .emo-insight-feed__item--ok { border-left-color: var(--emo-ok); } .emo-insight-feed__item--warn { border-left-color: var(--emo-warn); } .emo-insight-feed__item--risk { border-left-color: var(--emo-risk); } .emo-insight-feed__icon { font-size: 1rem; line-height: 1.4; flex-shrink: 0; } .emo-trend-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--emo-border); } .emo-trend-row__title { flex: 1; min-width: 180px; } .emo-trend-row__spark { flex: 0 0 100px; } .emo-badge__icon { margin-right: 4px; } .emo-card--preview-disabled { opacity: .95; } .emo-card--preview-disabled [data-emo-editable] { pointer-events: none; } /* Layout utilities */ .emo-flex { display: flex; } .emo-flex--between { justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .emo-flex--wrap { flex-wrap: wrap; } .emo-card-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .emo-card--warn { border-color: var(--emo-warning-text); background: var(--emo-warning-soft); } .emo-mt-sm { margin-top: 8px; } .emo-mb-sm { margin-bottom: 8px; } .emo-list-plain { margin: 0; padding: 0; list-style: none; } .emo-list-plain > li + li { margin-top: 8px; } .emo-link-strong { font-weight: 600; } .emo-focus-fold { margin-bottom: 12px; } .emo-focus-hero__title { margin: 0 0 8px; font-size: 1.25rem; } .emo-focus-hero__site { margin: 0; } .emo-focus-hero__progress-label { margin-bottom: 6px; } .emo-focus-hero__progress { margin: 14px 0; } .emo-focus-hero__head-main { flex: 1; min-width: 200px; } .emo-card-inset { margin-bottom: 12px; padding: 12px; border: 1px solid var(--emo-border); border-radius: 8px; } .emo-overview-widget-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 16px; } .emo-overview-cal-today { display: flex; flex-direction: column; gap: 8px; } .emo-overview-cal-today__status { font-weight: 600; } .emo-overview-deadlines { list-style: none; margin: 0; padding: 0; } .emo-overview-deadlines li { padding: 6px 0; border-bottom: 1px solid var(--emo-border); font-size: 0.875rem; } .emo-overview-deadlines li:last-child { border-bottom: none; } .emo-home-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; } .emo-home-start { border: 1px solid var(--emo-card-border); border-left: 3px solid var(--emo-primary); border-radius: var(--emo-card-radius); background: var(--emo-card-bg); box-shadow: var(--emo-card-shadow); padding: 12px 14px; } .emo-home-start__summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 700; list-style: none; } .emo-home-start__summary::-webkit-details-marker { display: none; } .emo-home-start__summary::before { content: '▸'; color: var(--emo-text-muted); font-size: 0.8em; transition: transform 0.15s ease; } .emo-home-start[open] .emo-home-start__summary::before { transform: rotate(90deg); } .emo-home-start__title { font-size: 1rem; } .emo-home-start__badge { font-size: 0.66rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--emo-primary-bg); color: var(--emo-primary); } .emo-home-start__body { margin-top: 10px; } .emo-home-start__steps { margin: 0 0 12px; padding-left: 20px; display: flex; flex-direction: column; gap: 5px; font-size: 0.9rem; } .emo-home-start__steps li { color: var(--emo-text); } .emo-home-action { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid var(--emo-border); border-radius: var(--emo-radius, 8px); background: var(--emo-surface); text-decoration: none; color: inherit; transition: border-color 0.15s, background 0.15s; } .emo-home-action:hover { border-color: var(--emo-primary); background: var(--emo-surface-2); text-decoration: none; } .emo-home-action__value { font-size: 1.75rem; font-weight: 700; line-height: 1.1; color: var(--emo-text); } .emo-home-action__label { font-size: 0.95rem; font-weight: 600; } .emo-home-action__hint { font-size: 0.75rem; color: var(--emo-muted, #6b7280); } .emo-home-focus { list-style: none; margin: 0; padding: 0; } .emo-home-focus__item { border-bottom: 1px solid var(--emo-border); } .emo-home-focus__item:last-child { border-bottom: none; } .emo-home-focus__link { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; text-decoration: none; color: inherit; } .emo-home-focus__link:hover .emo-home-focus__label { color: var(--emo-primary); } .emo-home-focus__label { font-weight: 600; font-size: 0.9rem; } .emo-home-focus__meta { font-size: 0.8rem; color: var(--emo-muted, #6b7280); } .emo-flex-wrap { flex-wrap: wrap; } .emo-gap-sm { gap: 8px; } .emo-badge-row { display: flex; flex-wrap: wrap; gap: 4px; } .emo-network-focus-badge { display: none; margin-left: 4px; } .emo-kpi-grid--network { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); max-width: 22rem; } .emo-network-site-list { display: flex; flex-direction: column; gap: 12px; } .emo-network-site { padding: 12px 14px; border: 1px solid var(--emo-border, #e5e7eb); border-radius: 10px; background: var(--emo-surface-inset, #f9fafb); } .emo-network-site__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; } .emo-network-site__title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; } .emo-network-site__name { font-size: 0.95rem; } .emo-network-site__metrics { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex-shrink: 0; } .emo-network-site__stat { font-size: 0.85rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; } .emo-network-site__stat-unit { font-weight: 500; opacity: 0.85; } .emo-network-site__stat--editorial { color: var(--emo-text, #111827); background: var(--emo-surface, #fff); border: 1px solid var(--emo-border, #e5e7eb); } .emo-network-site__stat--ads { color: var(--emo-muted, #6b7280); background: transparent; border: 1px dashed var(--emo-border, #d1d5db); } .emo-network-site__focus { font-size: 0.75rem; } .emo-network-site__action { margin-left: 4px; } .emo-network-site__radar-hint, .emo-network-site__empty-editorial { margin-top: 8px; } .emo-network-site__rubrics { margin-top: 10px; } .emo-network-site__rubrics-label { display: block; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--emo-muted, #6b7280); margin-bottom: 6px; } .emo-network-site__rubric-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .emo-network-site__rubric-chip strong { font-weight: 700; margin-left: 2px; } .emo-network-site__rubric-chip--dim { opacity: 0.75; } .emo-network-site__types { margin-top: 10px; } .emo-network-site__types-summary { cursor: pointer; font-size: 0.75rem; color: var(--emo-muted, #6b7280); user-select: none; } .emo-network-site__types-body { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; } .emo-network-site__type-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .emo-network-site__type-group-label { font-size: 0.7rem; font-weight: 600; color: var(--emo-muted, #6b7280); min-width: 5.5rem; } .emo-network-site__type-group--ads .emo-network-site__type-pill { opacity: 0.85; } .emo-network-site__type-pill { font-size: 0.72rem; padding: 2px 7px; border-radius: 6px; background: var(--emo-surface, #fff); border: 1px solid var(--emo-border, #e5e7eb); color: var(--emo-text-muted, #4b5563); } .emo-network-radar .emo-card__body, .emo-network-radar > div:not([class]) { padding-top: 0; } .emo-network-radar__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .emo-network-radar__title { margin: 0 0 6px; font-size: 1.05rem; font-weight: 600; } .emo-network-radar__lead { margin: 0; max-width: 36rem; line-height: 1.45; } .emo-network-radar__focus { color: #b45309; } .emo-network-radar__control--author { flex: 1 1 200px; min-width: 180px; } .emo-network-radar__control--author .emo-select { width: 100%; max-width: 280px; } .emo-network-radar__author-meta { margin-bottom: 12px; padding: 10px 12px; border-radius: 8px; border: 1px dashed var(--emo-border); background: var(--emo-surface-1); } .emo-network-radar__author-rubrics { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; } .emo-network-radar__author-rubrics-label { font-size: 0.75rem; color: var(--emo-text-muted); margin-right: 4px; } .emo-network-radar-card__badges { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; } .emo-network-radar-card__tier, .emo-network-radar-card__rubric { font-size: 0.65rem; padding: 2px 6px; border-radius: 999px; font-weight: 600; background: var(--emo-border); color: var(--emo-text-muted); } .emo-network-radar-card__tier--city { background: color-mix(in srgb, var(--emo-info, #0f62fe) 14%, transparent); color: var(--emo-info-text, #0043ce); } .emo-network-radar-card__rubric { background: color-mix(in srgb, var(--emo-success, #198038) 14%, transparent); color: var(--emo-success-text, #198038); } .emo-network-radar__controls { display: flex; flex-wrap: wrap; gap: 12px 16px; padding: 10px 14px; background: var(--emo-surface-2, #f8fafc); border: 1px solid var(--emo-border); border-radius: var(--emo-radius-sm, 6px); } .emo-network-radar__control { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; margin: 0; } .emo-network-radar__control + .emo-network-radar__control { padding-left: 16px; border-left: 1px solid var(--emo-border); } .emo-network-radar__control-label { color: var(--emo-text-muted); white-space: nowrap; } .emo-network-radar__range { width: 72px; cursor: pointer; accent-color: var(--emo-primary); } .emo-network-radar__range-val { min-width: 1.5rem; text-align: center; font-variant-numeric: tabular-nums; } .emo-network-radar__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .emo-network-radar-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--emo-surface-1); border: 1px solid var(--emo-border); border-radius: var(--emo-radius-sm, 6px); box-shadow: var(--emo-shadow, 0 1px 2px rgba(0, 0, 0, 0.04)); min-height: 100%; } .emo-network-radar-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .emo-network-radar-card__name { font-size: 0.875rem; font-weight: 600; line-height: 1.3; word-break: break-word; } .emo-network-radar-card__score { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; font-size: 0.6875rem; white-space: nowrap; } .emo-network-radar-card__metrics { font-size: 0.75rem; padding-bottom: 8px; border-bottom: 1px solid var(--emo-border); } .emo-network-radar-card__metric { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; } .emo-network-radar-card__dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .emo-network-radar-card__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; } .emo-network-radar-card__actions-label { width: 100%; font-size: 0.6875rem; color: var(--emo-text-muted); margin-bottom: 2px; } .emo-network-radar__empty { grid-column: 1 / -1; padding: 12px 4px; } @media (max-width: 768px) { .emo-network-radar__control + .emo-network-radar__control { padding-left: 0; border-left: none; } } .emo-mt-xs { margin-top: 4px; } .emo-action-stack--end { margin-top: 8px; justify-content: flex-end; } .emo-table__check-col { width: 36px; } /* Ads overview (EMO_PASSPORT §8e) */ :root { --emo-ads-teal: #0d9488; --emo-ads-purple: #9333ea; --emo-ads-purple-light: #c084fc; } .emo-ads-layout { display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px; } .emo-ads-layout__form, .emo-ads-layout__feed { width: 100%; min-width: 0; } .emo-ads-claim-card { margin-bottom: 0; } .emo-ads-claim-card .emo-section-title { margin-bottom: 4px; } .emo-ads-claim-form { display: flex; flex-direction: column; gap: 10px; } .emo-ads-claim-form .emo-field { margin-bottom: 0; } .emo-ads-claim-form__top { display: grid; gap: 10px 14px; grid-template-columns: 1fr; } @media (min-width: 768px) { .emo-ads-claim-form__top { grid-template-columns: minmax(0, 2fr) minmax(140px, 1fr) minmax(0, 2fr); align-items: end; } } @media (min-width: 1024px) { .emo-ads-claim-form__top { grid-template-columns: minmax(0, 1.4fr) minmax(130px, 0.6fr) minmax(0, 2fr) minmax(0, 1.4fr); } } .emo-ads-claim-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-top: 4px; } .emo-ads-type-row { display: flex; flex-wrap: wrap; gap: 10px 16px; padding: 8px 12px; border-radius: var(--emo-radius-sm, 8px); border: 1px solid var(--emo-border); background: var(--emo-surface-2, var(--emo-surface-1)); } .emo-ads-type-option { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; cursor: pointer; } .emo-ads-url-panel { padding: 10px 12px; border-radius: var(--emo-radius-sm, 8px); border: 1px solid rgba(147, 51, 234, 0.15); background: rgba(147, 51, 234, 0.04); } .emo-ads-lang-badge { display: inline-block; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; color: var(--emo-ads-purple); letter-spacing: 0.03em; } .emo-ads-dup-error { color: var(--emo-danger-text); } .emo-btn--promo { background: var(--emo-ads-purple); border-color: var(--emo-ads-purple); color: #fff; } .emo-btn--promo:hover { filter: brightness(1.05); } .emo-btn--xs { font-size: 0.7rem; padding: 2px 6px; min-height: auto; } .emo-kpi-tile--warn .emo-kpi-tile__value { color: var(--emo-warn); } .emo-ads-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; } .emo-ads-card { display: flex; background: var(--emo-surface-1); border: 1px solid var(--emo-border); border-radius: var(--emo-radius); overflow: hidden; box-shadow: var(--emo-shadow); } .emo-ads-card__accent { width: 4px; flex-shrink: 0; } .emo-ads-card--teal .emo-ads-card__accent { background: var(--emo-ads-teal); } .emo-ads-card--purple .emo-ads-card__accent { background: var(--emo-ads-purple); } .emo-ads-card--purple-light .emo-ads-card__accent { background: var(--emo-ads-purple-light); } .emo-ads-card__body { flex: 1; padding: 14px 16px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: flex-start; min-width: 0; } .emo-ads-card__main { flex: 1; min-width: 0; } .emo-ads-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; } .emo-ads-card__avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .emo-ads-card__title { margin: 0 0 8px; font-size: 1rem; font-weight: 600; line-height: 1.35; } .emo-ads-card__meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .emo-ads-card__amount { text-align: right; flex-shrink: 0; } .emo-ads-card__amount-value { font-weight: 700; font-size: 1.1rem; line-height: 1.2; } .emo-ads-card__amount-label { font-size: 0.75rem; color: var(--emo-text-muted); text-transform: lowercase; } .emo-ads-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; font-size: 0.85rem; color: var(--emo-text-muted); } .emo-ads-legend__item { display: inline-flex; align-items: center; gap: 6px; } .emo-ads-legend__swatch { width: 12px; height: 12px; border-radius: 2px; flex-shrink: 0; } .emo-ads-url-grid { display: grid; gap: 8px 12px; grid-template-columns: 1fr; } @media (min-width: 640px) { .emo-ads-url-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } } .emo-ads-url-slot { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .emo-ads-url-slot .emo-input { width: 100%; min-width: 0; } .emo-ads-claim-form .emo-field--grow { flex: 1; min-width: 0; } .emo-ads-legend__swatch--teal { background: var(--emo-ads-teal); } .emo-ads-legend__swatch--purple { background: var(--emo-ads-purple); } .emo-ads-legend__swatch--purple-light { background: var(--emo-ads-purple-light); } /* Touch-friendly targets */ @media (hover: none) and (pointer: coarse) { .emo-btn, .emo-sidebar__link, .emo-tabs__item, .emo-topbar__menu, .emo-segmented a { min-height: 44px; } .emo-sidebar__link { align-items: center; } .emo-tabs__item { display: inline-flex; align-items: center; } } /* Traffic pool & clusters */ .emo-avatar-list { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .emo-user-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 1px solid var(--emo-border); } .emo-user-avatar--placeholder { display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 600; background: var(--emo-surface-2); color: var(--emo-text-muted); } .emo-pool-stats { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; padding: 12px 14px; background: var(--emo-surface-1); border: 1px solid var(--emo-border); border-radius: var(--emo-radius); } .emo-pool-stats__label { font-size: 0.75rem; font-weight: 600; color: var(--emo-text-muted); margin-bottom: 6px; } .emo-pool-stats__chips { display: flex; flex-wrap: wrap; gap: 6px; } .emo-pool-stats__chip { font-size: 0.8rem; padding: 4px 8px; border-radius: 4px; background: var(--emo-surface-2); border: 1px solid var(--emo-border); } .emo-pool-stats__chip--seo strong { color: var(--emo-accent, #2563eb); } .emo-pool-stats--compact { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 10px; padding: 8px 10px; } .emo-pool-stats--compact .emo-pool-stats__label { margin: 0; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; } .emo-pool-stats--compact .emo-pool-stats__chips { display: inline-flex; flex-wrap: wrap; gap: 4px; } .emo-pool-stats--compact .emo-pool-stats__chip { font-size: 0.72rem; padding: 2px 6px; } .emo-pool-table-wrap { margin-top: 0; } .emo-table--compact th { padding: 6px 10px; font-size: 0.72rem; } .emo-table--compact td { padding: 6px 10px; vertical-align: middle; } .emo-pool-table { font-size: 0.8125rem; } .emo-pool-source { display: flex; align-items: center; gap: 6px; min-width: 0; } .emo-pool-source__icon { flex-shrink: 0; border-radius: 2px; } .emo-pool-source__host { font-weight: 600; color: inherit; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; } a.emo-pool-source__host:hover { text-decoration: underline; } .emo-pool-status { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .emo-pool-status__takes { font-size: 0.72rem; color: var(--emo-text-muted); font-variant-numeric: tabular-nums; } .emo-pool-seo { display: flex; flex-direction: column; gap: 3px; min-width: 88px; } .emo-pool-seo__metrics { font-size: 0.72rem; color: var(--emo-text-muted); white-space: nowrap; } .emo-score--inline { gap: 4px; } .emo-score--inline .emo-score__bar { width: 36px; height: 5px; } .emo-score--inline .emo-score__num { font-size: 0.72rem; } .emo-pool-takers { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; max-width: 220px; } .emo-pool-taker { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 6px 2px 2px; border-radius: 999px; border: 1px solid var(--emo-border); background: var(--emo-surface-2); color: inherit; text-decoration: none; font-size: 0.72rem; line-height: 1.2; transition: border-color 0.15s, background 0.15s; } .emo-pool-taker:hover { border-color: var(--emo-accent, #2563eb); background: var(--emo-surface-1); text-decoration: none; } .emo-pool-taker .emo-avatar--sm { width: 20px; height: 20px; font-size: 0.6rem; } .emo-pool-taker__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 72px; } .emo-pool-taker__more { font-size: 0.7rem; color: var(--emo-text-muted); padding: 0 4px; } .emo-pool-actions { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; } .emo-pool-actions-cell { width: 1%; white-space: nowrap; } .emo-traffic-workspace--pool { gap: 10px; } .emo-traffic-toolbar-card--compact.emo-card, .emo-traffic-toolbar-card.emo-filters-card--compact.emo-card { padding: 10px 12px; } .emo-traffic-toolbar--compact, .emo-traffic-toolbar.emo-filters-toolbar--compact { gap: 8px; } .emo-traffic-toolbar--compact .emo-field label, .emo-traffic-toolbar.emo-filters-toolbar--compact .emo-field label { font-size: 0.72rem; margin-bottom: 2px; } .emo-traffic-toolbar--compact .emo-input, .emo-traffic-toolbar--compact .emo-select:not(.ts-hidden-accessible), .emo-traffic-toolbar.emo-filters-toolbar--compact .emo-input, .emo-traffic-toolbar.emo-filters-toolbar--compact .emo-select:not(.ts-hidden-accessible) { height: 32px; padding: 0 8px; font-size: 0.8125rem; line-height: 30px; box-sizing: border-box; } .emo-pagination--compact { margin-top: 8px; } .emo-cluster-card { margin-bottom: 12px; } .emo-cluster-card__hub { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: start; } .emo-cluster-card__title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; } .emo-cluster-card__sats { margin-top: 12px; padding-left: 16px; border-left: 2px solid var(--emo-border); display: flex; flex-direction: column; gap: 8px; } .emo-cluster-card__sat-row { display: grid; grid-template-columns: 2fr 1fr auto auto; gap: 8px; align-items: center; } .emo-site-picker-preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin-top: 8px; } .emo-site-picker-preview__item { display: flex; flex-direction: column; gap: 2px; padding: 8px; border: 1px dashed var(--emo-border); border-radius: var(--emo-radius); font-size: 0.85rem; opacity: 0.85; } .emo-section-title { font-size: 1rem; font-weight: 600; margin: 0 0 12px; } .emo-traffic-guide { padding: 12px 14px; background: var(--emo-surface-1); border: 1px solid var(--emo-border); border-radius: var(--emo-radius); margin-bottom: 16px; } .emo-traffic-guide__summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; } .emo-traffic-guide__steps { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; } .emo-traffic-guide__step { display: flex; gap: 12px; align-items: flex-start; } .emo-traffic-guide__num { width: 28px; height: 28px; border-radius: 50%; background: var(--emo-accent, #2563eb); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; flex-shrink: 0; } .emo-traffic-preview__steps { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .emo-traffic-preview__step { font-size: 0.8rem; padding: 4px 10px; border-radius: 999px; background: var(--emo-surface-2); color: var(--emo-text-muted); } .emo-traffic-preview__step--active { background: var(--emo-accent, #2563eb); color: #fff; } .emo-traffic-preview__step--done { opacity: 0.7; text-decoration: line-through; } .emo-traffic-preview__source-card { display: flex; gap: 10px; align-items: center; padding: 12px; margin: 8px 0 12px; background: var(--emo-surface-2); border-radius: var(--emo-radius); } .emo-traffic-preview__summary { padding: 12px; background: var(--emo-surface-2); border-radius: var(--emo-radius); } .emo-traffic-preview__hub-block { margin-bottom: 12px; } .emo-traffic-preview__sat-list { margin: 8px 0 0; padding-left: 18px; } .emo-site-picker-preview--interactive .emo-site-picker-preview__item { cursor: pointer; opacity: 1; } .emo-site-picker-preview--interactive .emo-site-picker-preview__item:has(input:checked) { border-color: var(--emo-accent, #2563eb); background: color-mix(in srgb, var(--emo-accent, #2563eb) 8%, transparent); } .emo-site-picker-preview__item--disabled { opacity: 0.45; pointer-events: none; } .emo-action-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } .emo-mb-md { margin-bottom: 16px; } .emo-m-0 { margin: 0; } .emo-mb-xs { margin-bottom: 4px; } /* Thematic sprint wizard (shell як .emo-task-create-card) */ .emo-thematic-wizard { width: 100%; } .emo-thematic-wizard__steps { min-height: 200px; } .emo-thematic-wizard .emo-task-create-card, #emo-thematic-create-panel { margin-top: 0; margin-bottom: 12px; } #emo-thematic-create-panel[hidden] { display: none !important; } #emo-thematic-create-panel.is-open { border-color: color-mix(in srgb, var(--emo-primary) 45%, var(--emo-border)); } .emo-thematic-wizard .emo-task-create-card__footer #wizard-create-btn[hidden] { display: none !important; } .emo-wizard-site-meta { margin-top: 12px; padding: 10px 12px; border-radius: var(--emo-radius-sm); background: color-mix(in srgb, var(--emo-primary) 4%, var(--emo-surface-1)); border: 1px solid color-mix(in srgb, var(--emo-primary) 14%, var(--emo-border)); } .emo-wizard-site-meta__row { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; margin-bottom: 6px; } .emo-wizard-site-meta__row:last-child { margin-bottom: 0; } .emo-wizard-rubrics-chips { display: flex; flex-wrap: wrap; gap: 4px; } .emo-wizard-step__title { margin: 0 0 16px; font-size: 1.1rem; } .emo-wizard-nav { display: flex; justify-content: flex-end; gap: 8px; } .emo-stepper__desktop { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; gap: 0; } .emo-stepper__mobile { display: none; margin-bottom: 12px; } .emo-stepper__item { display: flex; align-items: center; gap: 8px; } .emo-stepper__circle { width: 18px; height: 18px; border-radius: 50%; font-size: 0.65rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--emo-border); color: var(--emo-text-muted); } .emo-stepper__item--active .emo-stepper__circle { background: var(--emo-text-primary); color: #fff; border-color: var(--emo-text-primary); } .emo-stepper__item--done .emo-stepper__circle { background: var(--emo-ok); color: #fff; border-color: var(--emo-ok); } .emo-stepper__line { width: 24px; height: 1px; background: var(--emo-border); list-style: none; } .emo-stepper__label { font-size: 0.8rem; color: var(--emo-text-muted); } .emo-stepper__item--active .emo-stepper__label { color: var(--emo-text); font-weight: 600; } .emo-wizard-prompt-wrap { position: relative; } .emo-wizard-prompt { background: var(--emo-background-secondary); font-family: ui-monospace, monospace; font-size: 0.8rem; padding: 36px 12px 12px; border-radius: var(--emo-radius-sm); white-space: pre-wrap; max-height: 420px; overflow: auto; margin: 0; border: 1px solid color-mix(in srgb, var(--emo-border) 90%, transparent); } .emo-wizard-prompt-copy { position: absolute; top: 8px; right: 8px; z-index: 1; } .emo-wizard-freshness { margin-top: 12px; padding: 10px 12px; border-radius: var(--emo-radius-sm); background: var(--emo-background-secondary); font-size: 0.9rem; } .emo-wizard-freshness--warn { border-left: 3px solid var(--emo-warn); } .emo-wizard-freshness--risk { border-left: 3px solid var(--emo-risk); } .emo-wizard-freshness--ok { border-left: 3px solid var(--emo-ok); } .emo-wizard-parse-report { margin-top: 12px; padding: 10px 12px; border-radius: var(--emo-radius-sm); font-size: 0.9rem; } .emo-wizard-parse-report--ok { background: var(--emo-success-soft); color: var(--emo-success-text); } .emo-wizard-parse-report--risk { background: var(--emo-danger-soft); color: var(--emo-danger-text); } .emo-wizard-schedule-preview { margin-bottom: 12px; padding: 10px 12px; background: var(--emo-primary-bg); border-radius: var(--emo-radius-sm); font-size: 0.95rem; } .emo-badge-inline { display: inline-block; margin: 2px 4px 2px 0; padding: 2px 8px; background: var(--emo-surface-2); border-radius: 4px; font-size: 0.8rem; } .emo-wizard-row--dup { opacity: 0.55; } .emo-wizard-status--ok { color: var(--emo-ok); } .emo-wizard-status--warn { color: var(--emo-warn); } .emo-wizard-status--risk { color: var(--emo-risk); } @media (max-width: 768px) { .emo-stepper__desktop { display: none; } .emo-stepper__mobile { display: block; } .emo-thematic-wizard .emo-task-create-card__footer .emo-task-wizard-nav { flex-direction: column-reverse; align-items: stretch; } .emo-thematic-wizard .emo-task-create-card__footer .emo-btn { width: 100%; justify-content: center; } } /* Publications — MO-like scope tabs */ .emo-tab-pills-scroll { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; overflow-x: auto; padding-bottom: 4px; } .emo-tab-pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--emo-border); background: var(--emo-surface-1); color: var(--emo-text); text-decoration: none; font-size: 0.875rem; font-weight: 500; white-space: nowrap; transition: background 0.15s, border-color 0.15s; } .emo-tab-pill:hover { background: var(--emo-surface-2); color: var(--emo-primary); } .emo-tab-pill--active { border-color: var(--emo-primary); background: var(--emo-primary-bg); color: var(--emo-primary); } .emo-tab-count { display: inline-block; min-width: 1.25rem; padding: 1px 7px; font-size: 0.75rem; font-weight: 600; border-radius: 10px; background: var(--emo-surface-2); text-align: center; } .emo-tab-pill--active .emo-tab-count { background: #dbeafe; color: #1e40af; } .emo-tab-count--success { background: var(--emo-success-soft); color: var(--emo-success-text); } .emo-tab-count--danger { background: var(--emo-danger-soft); color: var(--emo-danger-text); } .emo-tab-count--warn { background: var(--emo-warning-soft); color: var(--emo-warning-text); } .emo-keys-summary { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 10px 14px; margin-bottom: 12px; background: var(--emo-surface-1); border: 1px solid var(--emo-border); border-radius: var(--emo-radius); font-size: 0.875rem; } .emo-keys-summary__ok { color: var(--emo-success-text); } .emo-keys-summary__no { color: var(--emo-danger-text); } .emo-pub-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .emo-pub-title { font-weight: 600; flex: 1; min-width: 0; } .emo-pub-reclamation-risk { font-size: 0.75rem; color: var(--emo-warn-text, #b45309); margin-top: 4px; } .emo-pub-focus-kw { margin-top: 4px; } .emo-pub-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .emo-pub-diag-trigger { display: inline-flex; align-items: center; gap: 2px; padding: 0; border: none; background: none; cursor: pointer; font: inherit; margin-bottom: 6px; } .emo-pub-diag-trigger:hover { opacity: 0.85; } .emo-pub-feed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin: 12px 0; } .emo-pub-feed-card { padding: 14px; background: var(--emo-card-bg); border: 1px solid var(--emo-card-border); border-radius: var(--emo-card-radius); display: flex; flex-direction: column; gap: 10px; } .emo-pub-feed-card__head { display: flex; justify-content: space-between; gap: 10px; } .emo-pub-feed-card__title { margin: 4px 0 0; font-size: 0.95rem; font-weight: 600; line-height: 1.35; } .emo-pub-feed-card__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .emo-pub-feed-card__kpi { font-weight: 700; color: var(--emo-ok); font-size: 0.875rem; } .emo-pub-feed-spark { display: flex; align-items: flex-end; gap: 4px; height: 40px; } .emo-pub-feed-spark__bar { flex: 1; min-width: 6px; background: var(--emo-primary); border-radius: 2px 2px 0 0; opacity: 0.75; } .emo-pub-feed-card__foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .emo-pub-hint-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; } .emo-pub-hint-modal[hidden] { display: none !important; } .emo-pub-hint-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(2px); } .emo-pub-hint-modal__panel { position: relative; width: 100%; max-width: 480px; max-height: 80vh; background: var(--emo-surface-1); border-radius: 16px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); overflow: hidden; display: flex; flex-direction: column; } .emo-pub-hint-modal__head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--emo-border); } .emo-pub-hint-modal__head h3 { margin: 0; font-size: 1rem; } .emo-pub-hint-modal__close { border: none; background: none; font-size: 1.5rem; line-height: 1; color: var(--emo-text-muted); cursor: pointer; } .emo-pub-hint-modal__body { padding: 20px; overflow-y: auto; } .emo-pub-hint-block { border: 1px solid var(--emo-border); border-radius: 8px; padding: 14px; margin-bottom: 12px; } .emo-pub-hint-block__title { margin-bottom: 6px; } .emo-pub-hint-block__url { display: block; font-size: 0.8rem; word-break: break-all; margin-bottom: 8px; color: var(--emo-primary); } .emo-pub-hint-action { font-size: 0.8125rem; margin: 8px 0 0; color: var(--emo-text); } .emo-pub-hint-action--risk { color: var(--emo-danger-text); } .emo-pub-hint-block .emo-btn { margin-top: 8px; margin-right: 6px; } .emo-pub-toolbar .js-emo-pub-ai-hint { align-self: flex-end; } body.emo-pub-hint-modal-open { overflow: hidden; } .emo-field--grow { flex: 1; min-width: 160px; } .emo-analytics-fold summary { cursor: pointer; font-weight: 600; color: var(--emo-text-muted); } /* Tasks — workflow pills + card stream */ .emo-tab-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .emo-tab-dot--gray { background: #9ca3af; } .emo-tab-dot--blue { background: #3b82f6; } .emo-tab-dot--orange { background: #f97316; } .emo-tab-dot--purple { background: #a855f7; } .emo-tab-dot--red { background: #ef4444; } .emo-tab-dot--green { background: #22c55e; } .emo-tab-pill--active.emo-tab-pill--color-blue { border-color: #93c5fd; background: #eff6ff; color: #1e40af; } .emo-tab-pill--active.emo-tab-pill--color-orange { border-color: #fdba74; background: #fff7ed; color: #9a3412; } .emo-tab-pill--active.emo-tab-pill--color-purple { border-color: #d8b4fe; background: #faf5ff; color: #6b21a8; } .emo-tab-pill--active.emo-tab-pill--color-green { border-color: #86efac; background: #f0fdf4; color: #15803d; } .emo-tab-pill--active.emo-tab-pill--color-red { border-color: #fca5a5; background: #fef2f2; color: #b91c1c; } .emo-tab-pill--active.emo-tab-pill--color-gray { border-color: var(--emo-border); background: var(--emo-surface-2); } @keyframes emo-pulse-orange { 0%, 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.35); } 50% { box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.15); } } @keyframes emo-pulse-blue { 0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.35); } 50% { box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15); } } @keyframes emo-pulse-red { 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.35); } 50% { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15); } } .emo-pulse-orange { animation: emo-pulse-orange 2s ease-in-out infinite; } .emo-pulse-blue { animation: emo-pulse-blue 2s ease-in-out infinite; } .emo-pulse-red { animation: emo-pulse-red 2s ease-in-out infinite; } .emo-task-stream { display: flex; flex-direction: column; gap: 8px; } .emo-task-card { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--emo-card-bg); border: 1px solid var(--emo-card-border); border-left: 3px solid var(--emo-neutral, #9ca3af); border-radius: var(--emo-card-radius); box-shadow: var(--emo-card-shadow); } .emo-task-card__shell { display: flex; flex-direction: column; gap: 4px; width: 100%; } .emo-task-card__shell > .emo-task-card__articles-stage { margin-top: 4px; margin-bottom: 2px; } .emo-task-card--done { border-left-color: var(--emo-ok); } .emo-task-card--revision { border-left-color: var(--emo-risk); } .emo-task-card--review { border-left-color: var(--emo-review); } .emo-task-card--auto { border-left-style: dashed; border-left-color: var(--emo-warn, #f59e0b); } .emo-task-card--progress { border-left-color: var(--emo-neutral, #9ca3af); } .emo-task-card__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; } .emo-task-card__top-left { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; flex: 1; } .emo-task-card__badges-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; } .emo-task-card__badge { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px; font-size: 0.6875rem; font-weight: 600; line-height: 1.25; white-space: nowrap; } .emo-task-card__badge--done { background: color-mix(in srgb, var(--emo-ok) 18%, transparent); color: var(--emo-ok); } .emo-task-card__badge--review { background: color-mix(in srgb, var(--emo-review) 18%, transparent); color: var(--emo-review); } .emo-task-card__badge--revision { background: color-mix(in srgb, var(--emo-risk) 15%, transparent); color: var(--emo-risk); } .emo-task-card__badge--auto { background: color-mix(in srgb, var(--emo-warn, #f59e0b) 18%, transparent); color: var(--emo-warn, #d97706); } .emo-task-card__badge--progress { background: var(--emo-surface-2); color: var(--emo-text-muted); } .emo-task-card__chip { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 0.625rem; font-weight: 500; color: var(--emo-text-muted); background: var(--emo-surface-2); border: 1px solid var(--emo-border); } .emo-task-card__context { margin: 0; font-size: 0.75rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .emo-task-card__ai-context { margin: 0; font-size: 0.75rem; line-height: 1.3; } .emo-task-card__context-id { color: var(--emo-text-muted); } .emo-task-card__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin-top: 2px; padding-top: 4px; border-top: 1px solid color-mix(in srgb, var(--emo-border) 70%, transparent); } .emo-task-card__footer-main { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 120px; } .emo-task-card__footer-progress { max-width: min(100%, 240px); } .emo-task-card__footer-progress .emo-progress { flex: 1; min-width: 72px; height: 5px; } .emo-task-card__progress-count { flex-shrink: 0; font-size: 0.75rem; font-variant-numeric: tabular-nums; } .emo-task-card__footer-assign { flex-wrap: wrap; gap: 6px; } .emo-task-card__footer-assign p { font-size: 0.75rem; } .emo-task-card__footer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; flex-shrink: 0; } .emo-task-card__avatar-wrap { position: relative; width: 28px; height: 28px; flex-shrink: 0; } .emo-task-card__avatar, .emo-task-card__avatar-img { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; } .emo-task-card__avatar { background: var(--emo-primary-bg); color: var(--emo-primary); display: flex; align-items: center; justify-content: center; font-weight: 700; } .emo-task-card__avatar-img { object-fit: cover; border: 1px solid var(--emo-border); background: var(--emo-surface-1); } .emo-task-card__avatar-img--creator, .emo-task-card__avatar-ui--creator { position: absolute; bottom: -2px; right: -3px; width: 16px; height: 16px; border: 1.5px solid var(--emo-surface-1); box-shadow: var(--emo-shadow); } .emo-task-card__avatar-ui--creator.emo-avatar--sm { width: 16px; height: 16px; font-size: 0.5rem; } .emo-task-card__deadline--overdue { color: var(--emo-risk); font-weight: 600; } .emo-task-card__overdue-icon { margin-right: 4px; } .emo-task-card__site-missing { color: var(--emo-risk); } .emo-task-card__site-link { color: inherit; text-decoration: underline; text-decoration-style: dotted; } .emo-task-card__site-link:hover { color: var(--emo-primary); } .emo-task-card__ai-context a { color: var(--emo-primary); } .emo-task-card__articles-stage { display: flex; flex-direction: column; gap: 10px; padding: 10px 12px; background: var(--emo-background-secondary); border-radius: var(--emo-radius-sm, 6px); border: 1px solid var(--emo-border); } .emo-article-row { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .emo-article-row--revision { padding: 6px 8px; margin: 0 -4px; border-radius: var(--emo-radius-sm, 6px); background: color-mix(in srgb, var(--error-strong) 8%, transparent); } .emo-article-row__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-width: 0; } .emo-article-row__title { flex: 1; min-width: 0; font-size: 0.8125rem; font-weight: 600; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .emo-article-row__badge { flex-shrink: 0; padding: 2px 8px; border-radius: 999px; font-size: 0.6875rem; font-weight: 600; line-height: 1.3; white-space: nowrap; } .emo-article-row__badge--done { background: color-mix(in srgb, var(--success-strong) 18%, transparent); color: var(--success-strong); } .emo-article-row__badge--review { background: color-mix(in srgb, var(--emo-review) 18%, transparent); color: var(--emo-review); } .emo-article-row__badge--revision { background: color-mix(in srgb, var(--error-strong) 15%, transparent); color: var(--error-strong); } .emo-article-row__badge--topic { background: color-mix(in srgb, var(--warning-strong) 18%, transparent); color: var(--warning-strong); } .emo-article-row__badge--progress { background: var(--emo-surface-1); color: var(--emo-text-muted); border: 1px solid var(--emo-border); } .emo-article-row__meta { margin: 0 0 4px; line-height: 1.3; } .emo-article-row__stage-hint { margin: 0 0 6px; line-height: 1.35; font-weight: 600; color: var(--emo-text); } .emo-stage--open { cursor: pointer; text-decoration: none; border-radius: var(--emo-radius-sm, 6px); margin: 0 -4px; padding: 4px; transition: background 0.15s ease; } .emo-stage--open:hover { background: color-mix(in srgb, var(--emo-primary, #0f62fe) 8%, transparent); } .emo-stage--open:focus-visible { outline: 2px solid var(--emo-primary, #0f62fe); outline-offset: 2px; } .emo-stage--setup { background: color-mix(in srgb, var(--emo-primary) 8%, transparent); border-radius: var(--emo-radius-sm, 8px); padding: 2px 4px; } .emo-article-setup-diagram__gate { margin-bottom: 10px; } .emo-task-show-article--focused { scroll-margin-top: 72px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--emo-primary, #0f62fe) 35%, transparent); border-radius: var(--emo-radius-sm, 8px); } .emo-stage { display: block; width: 100%; min-width: 0; } .emo-stage__rail { display: flex; align-items: flex-start; width: 100%; gap: 0; } .emo-stage__step { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; } .emo-stage__step--current .emo-stage__label { font-weight: 700; color: var(--emo-text); } .emo-stage__step--done .emo-stage__label { color: var(--success-strong); } .emo-stage__label { font-size: 0.625rem; line-height: 1.2; text-align: center; color: var(--emo-text-muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .emo-stage__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .emo-stage__dot--done { background: var(--success-strong); } .emo-stage__dot--current-topic { background: var(--warning-strong); box-shadow: 0 0 0 2px color-mix(in srgb, var(--warning-strong) 35%, transparent); } .emo-stage__dot--current-review { background: var(--emo-review); box-shadow: 0 0 0 2px color-mix(in srgb, var(--emo-review) 35%, transparent); } .emo-stage__dot--current-revision { background: var(--error-strong); box-shadow: 0 0 0 2px color-mix(in srgb, var(--error-strong) 35%, transparent); } .emo-stage__dot--current-progress { background: var(--warning-strong); box-shadow: 0 0 0 2px color-mix(in srgb, var(--warning-strong) 35%, transparent); } .emo-stage__dot--future { border: 1.5px solid var(--border-2); box-sizing: border-box; background: transparent; } .emo-stage__line { flex: 0 0 12px; width: 12px; height: 2px; margin-top: 3px; flex-shrink: 0; } .emo-stage__line--done { background: var(--success-strong); } .emo-stage__line--future { background: var(--border-1); } .emo-stage-legend { margin: 2px 0 0; font-size: 0.6875rem; letter-spacing: 0.02em; text-align: center; } .emo-task-assignee-picks { margin-bottom: 8px; } .emo-task-assignee-picks__label { display: block; margin-bottom: 6px; } .emo-task-assignee-picks__list { display: flex; flex-direction: column; gap: 6px; } .emo-task-assignee-picks__item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; width: 100%; padding: 8px 10px; border: 1px solid var(--emo-border); border-radius: 8px; background: var(--emo-surface-1); cursor: pointer; text-align: left; font: inherit; color: inherit; transition: border-color 0.15s, background 0.15s; } .emo-task-assignee-picks__item:hover { border-color: color-mix(in srgb, var(--emo-primary, #0f62fe) 40%, var(--emo-border)); } .emo-task-assignee-picks__item.is-active { border-color: var(--emo-primary, #0f62fe); background: color-mix(in srgb, var(--emo-primary, #0f62fe) 8%, var(--emo-surface-1)); } .emo-task-assignee-picks__name { font-weight: 600; font-size: 0.82rem; } .emo-task-assignee-picks__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; } .emo-task-assignee-picks__load { font-size: 0.65rem; font-weight: 700; padding: 2px 6px; border-radius: 999px; background: var(--emo-border); color: var(--emo-text-muted); } .emo-task-assignee-picks__load--free { background: color-mix(in srgb, var(--emo-success, #198038) 16%, transparent); color: var(--emo-success-text, #198038); } .emo-task-assignee-picks__load--busy { background: color-mix(in srgb, var(--emo-warning, #f97316) 16%, transparent); color: var(--emo-warning-text, #c2410c); } .emo-task-assignee-picks__load--full { background: color-mix(in srgb, var(--emo-danger, #da1e28) 14%, transparent); color: var(--emo-danger, #da1e28); } .emo-task-assignee-picks__tag { font-size: 0.62rem; padding: 2px 5px; border-radius: 999px; background: var(--emo-border); color: var(--emo-text-muted); font-weight: 600; } .emo-task-assignee-picks__tag--rubric { background: color-mix(in srgb, var(--emo-success, #198038) 12%, transparent); color: var(--emo-success-text, #198038); } .emo-task-assignee-picks__tag--online { background: color-mix(in srgb, var(--emo-info, #0f62fe) 12%, transparent); color: var(--emo-info-text, #0043ce); } .emo-task-assignee-toggle { color: var(--emo-text-muted); } .emo-task-assignee-rubric-warn { color: var(--emo-warn); margin-top: 6px; } .emo-task-assignee-rubric-warn--avoid { color: var(--emo-danger); font-weight: 600; } .emo-task-rubric-fill-label { margin-top: 8px; margin-bottom: 0; } .emo-task-rubric-fill { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .emo-task-create-niche-hint { margin-top: 8px; } .emo-task-rubric-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--emo-border); background: var(--emo-surface-1); font-size: 0.75rem; cursor: pointer; color: inherit; } .emo-task-rubric-chip:hover { border-color: var(--emo-primary); color: var(--emo-primary); } .emo-task-rubric-chip--sparse { border-color: color-mix(in srgb, var(--emo-risk) 45%, var(--emo-border)); background: color-mix(in srgb, var(--emo-risk) 8%, var(--emo-surface-1)); color: var(--emo-risk); } .emo-task-card__details { width: 100%; border: 1px solid var(--emo-border); border-radius: var(--emo-radius-sm, 6px); overflow: hidden; } .emo-task-card__details-summary { padding: 6px 10px; background: var(--emo-surface-2); cursor: pointer; font-weight: 500; font-size: 0.8125rem; color: var(--emo-text-muted); list-style: none; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .emo-task-card__details-summary::-webkit-details-marker { display: none; } .emo-task-card__details-body { padding: 10px 12px; border-top: 1px solid var(--emo-border); background: var(--emo-surface-1); } .emo-task-card__tz-body { font-size: 0.875rem; line-height: 1.6; color: var(--emo-text); word-break: break-word; } .emo-task-card__tz-badge { font-size: 0.65rem; } .emo-task-card-mini-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; } .emo-task-card-mini-table th, .emo-task-card-mini-table td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--emo-border); vertical-align: top; } .emo-task-card-mini-table th { color: var(--emo-text-muted); font-weight: 600; font-size: 0.75rem; } .emo-task-row-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; } /* —— Tasks: shared compact forms —— */ .emo-task-form .emo-field--compact { gap: 3px; margin-bottom: 0; } .emo-field-label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; color: var(--emo-text-muted); text-transform: uppercase; } .emo-field-label__badge { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 999px; font-size: 0.65rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--emo-text-muted); background: var(--emo-surface-2); border: 1px solid var(--emo-border); } .emo-task-form-hint { margin: 4px 0 0; font-size: 0.7rem; line-height: 1.35; color: var(--emo-text-muted); } .emo-task-form__grid { display: grid; gap: 8px 12px; grid-template-columns: 1fr; margin-bottom: 8px; } .emo-task-form__grid:last-child { margin-bottom: 0; } .emo-task-form__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .emo-task-form__grid--2:has(.emo-task-form__grid--wide) { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .emo-task-form__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .emo-task-form__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .emo-task-form__grid--4 .emo-task-form__grid--wide { grid-column: span 2; } .emo-task-form__grid--article-head { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); } .emo-task-form__grid--full { grid-column: 1 / -1; } .emo-task-form__actions--inline { margin-top: 0; padding-top: 0; border-top: none; } .emo-task-form .emo-select, .emo-task-form .emo-input { width: 100%; min-width: 0; } .emo-task-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--emo-border); } .emo-task-form-block { padding: 10px 12px; border: 1px solid var(--emo-border); border-radius: var(--emo-radius-sm, 8px); background: var(--emo-surface-1); } .emo-task-form-block__title { margin: 0 0 8px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--emo-text-muted); } .emo-task-form-block__title--spaced { margin-top: 10px; } .emo-toggle-pill { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 5px 12px; border: 1px solid var(--emo-border); border-radius: 999px; background: var(--emo-surface-2); font-size: 0.8125rem; cursor: pointer; user-select: none; transition: border-color 0.15s, background 0.15s, color 0.15s; } .emo-toggle-pill--wide { display: flex; width: 100%; margin-top: 10px; flex-wrap: wrap; } .emo-toggle-pill--filter { margin-top: 0; min-height: 32px; } .emo-toggle-pill:has(input:checked) { border-color: color-mix(in srgb, var(--emo-primary) 55%, var(--emo-border)); background: var(--emo-primary-bg); color: var(--emo-primary); } .emo-toggle-pill:has(input:checked) .emo-field-label__badge { border-color: color-mix(in srgb, var(--emo-primary) 40%, var(--emo-border)); color: var(--emo-primary); } .emo-toggle-pill input { width: 14px; height: 14px; margin: 0; accent-color: var(--emo-primary); flex-shrink: 0; } .emo-toggle-pill .emo-badge { margin-left: 2px; } .emo-task-preset-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .emo-task-preset-row__input { flex: 1 1 72px; min-width: 72px; max-width: 120px; } .emo-task-create-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 16px; align-items: start; } .emo-task-create-col { display: flex; flex-direction: column; gap: 0; min-width: 0; } .emo-task-create-compact { padding: 8px 10px; } .emo-task-create-compact .emo-task-form-block__title { margin-bottom: 6px; display: flex; align-items: center; gap: 6px; } .emo-task-create-compact .emo-task-form-block__title::before { content: ''; width: 3px; height: 0.85em; border-radius: 2px; background: var(--emo-primary); flex-shrink: 0; } .emo-task-create-compact .emo-task-form-block__title--spaced { margin-top: 8px; } .emo-task-create-compact .emo-task-form__grid { gap: 6px 10px; margin-bottom: 6px; } .emo-task-create-compact .emo-task-form-hint { margin-top: 2px; } .emo-task-create-compact .emo-task-assignee-toggle { margin-top: 4px; } .emo-task-create-compact .emo-toggle-pill--compact { margin-top: 6px; padding: 4px 10px; } .emo-task-create-col--topics .emo-task-create-topics-toggle { margin-top: 0; margin-bottom: 8px; } .emo-task-create-col--topics .emo-task-ai-topics-assignee { margin-top: 0; } .emo-task-create-compact .emo-task-preset-row__input { max-width: 108px; } .emo-task-create-compact .emo-task-ai-topics-assignee { margin: 4px 0 2px; padding: 6px 8px; border: 1px dashed var(--emo-border); border-radius: var(--emo-radius-sm, 8px); background: var(--emo-surface-muted, #f8f9fb); } .emo-btn-row--compact { gap: 6px; flex-wrap: wrap; } .emo-task-create-card { margin: 0 0 12px; padding: 0; overflow: hidden; border-color: color-mix(in srgb, var(--emo-primary) 28%, var(--emo-border)); box-shadow: var(--emo-shadow-card, 0 2px 12px rgba(0, 0, 0, 0.05)); } .emo-task-create-card.is-open { border-color: color-mix(in srgb, var(--emo-primary) 45%, var(--emo-border)); } .emo-task-create-card[hidden] { display: none !important; } .emo-task-create-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 10px 14px; background: linear-gradient( 135deg, color-mix(in srgb, var(--emo-primary) 8%, var(--emo-surface-1)) 0%, var(--emo-surface-1) 72% ); border-bottom: 1px solid var(--emo-border); } .emo-task-create-card__title { margin: 0; font-size: 0.95rem; font-weight: 600; } .emo-task-create-card__subtitle { margin: 2px 0 0; font-size: 0.75rem; } .emo-task-create-card__body { padding: 10px 14px 0; } .emo-task-create-stepper { margin-bottom: 10px; } .emo-task-create-card__footer { position: sticky; bottom: 0; margin: 0 -14px; padding: 8px 14px 12px; background: color-mix(in srgb, var(--emo-surface-1) 92%, transparent); backdrop-filter: blur(6px); border-top: 1px solid var(--emo-border); } .emo-task-create-card__footer [data-emo-task-create-error] { margin: 0 0 6px; } .emo-task-create-card__footer .emo-task-form__actions, .emo-task-create-card__footer .emo-task-wizard-nav { margin-top: 0; padding-top: 0; border-top: none; } .emo-task-wizard-summary { padding: 12px 14px; border-radius: var(--emo-radius-sm, 8px); background: var(--emo-surface-1); border: 1px solid var(--emo-border); font-size: 0.9rem; } .emo-task-wizard-summary p { margin: 0 0 8px; } .emo-task-wizard-summary p:last-child { margin-bottom: 0; } .emo-task-ai-topics-assignee { margin-top: 8px; padding: 8px 10px; border: 1px solid var(--emo-border); border-radius: var(--emo-radius-sm, 8px); background: var(--emo-primary-bg, #edf5ff); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .emo-task-ai-topics-assignee__hint { margin: 0; } .emo-task-ai-topics-assignee__status { margin: 0; } .emo-task-wizard-topics-quick { margin: 0; padding-left: 1.1rem; font-size: 0.78rem; color: var(--emo-text); max-width: 100%; } .emo-task-wizard-topics-quick li { margin: 2px 0; } .emo-task-create-presets { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 0; } .emo-task-create-presets .emo-btn { min-width: 1.75rem; padding: 2px 8px; font-size: 0.75rem; } .emo-task-create-presets .emo-btn.is-active { border-color: var(--emo-primary); color: var(--emo-primary); background: var(--emo-primary-bg); } .emo-task-meta-form .emo-task-form__actions { margin-top: 8px; padding-top: 8px; } .emo-task-card__meta-panel .emo-task-meta-form { padding: 2px 0 0; } .emo-task-card__meta-panel .emo-task-form__actions { margin-top: 8px; padding-top: 8px; } .emo-task-article-form__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--emo-border); } .emo-task-article-form__index { font-size: 0.75rem; font-weight: 700; color: var(--emo-text-muted); } .emo-task-filter-toggle { display: flex; align-items: flex-end; } @media (max-width: 1024px) { .emo-task-create-layout { grid-template-columns: 1fr; gap: 8px; } .emo-task-create-compact .emo-task-form__grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .emo-task-create-compact .emo-task-form__grid--3 .emo-field:last-child { grid-column: 1 / -1; } .emo-task-form__grid--3, .emo-task-form__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .emo-task-form__grid--4 .emo-task-form__grid--wide { grid-column: span 2; } .emo-task-form__grid--article-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .emo-task-form__grid--article-head .emo-task-form__grid--wide { grid-column: 1 / -1; } } @media (max-width: 640px) { .emo-task-create-card__head, .emo-task-create-card__body { padding-left: 10px; padding-right: 10px; } .emo-task-create-card__footer { margin: 0 -10px; padding-left: 10px; padding-right: 10px; } .emo-task-create-compact .emo-task-form__grid--2, .emo-task-create-compact .emo-task-form__grid--3 { grid-template-columns: 1fr; } .emo-task-create-compact .emo-task-form__grid--3 .emo-field:last-child { grid-column: auto; } .emo-task-form__grid--2, .emo-task-form__grid--3, .emo-task-form__grid--4, .emo-task-form__grid--article-head { grid-template-columns: 1fr; } .emo-task-form__grid--2:has(.emo-task-form__grid--wide) { grid-template-columns: 1fr; } .emo-task-form__grid--4 .emo-task-form__grid--wide { grid-column: auto; } .emo-task-article-form__footer { flex-direction: column; align-items: stretch; } .emo-task-show-kpi { width: 100%; } .emo-task-wizard-nav { flex-wrap: wrap; } .emo-task-wizard-nav .emo-btn { flex: 1 1 auto; } } .emo-task-wizard--preview, .emo-task-article-form--preview { border: 1px solid color-mix(in srgb, var(--emo-primary) 18%, var(--emo-border)); border-radius: var(--emo-radius-sm, 8px); } .emo-task-wizard--preview .emo-task-wizard-panel__body, .emo-task-article-form--preview .emo-task-article-form__fields { opacity: 0.98; } .emo-task-article-form__fields { border: 0; margin: 0; padding: 0; min-width: 0; } .emo-task-wizard-step[hidden] { display: none !important; } .emo-task-create-card__footer .emo-task-wizard-nav, .emo-task-wizard-panel__footer .emo-task-wizard-nav { justify-content: flex-end; gap: 8px; } .emo-task-wizard-topics { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; } .emo-task-wizard-ai-suggestions { margin-bottom: 10px; padding: 8px 10px 8px 12px; border: 1px solid color-mix(in srgb, var(--emo-primary) 22%, var(--emo-border)); border-left: 3px solid var(--emo-primary); border-radius: var(--emo-radius-sm, 8px); background: color-mix(in srgb, var(--emo-primary) 5%, var(--emo-surface-muted, #f8f9fb)); } .emo-task-wizard-ai-suggestions__title, .emo-task-wizard-custom-topics__title { margin: 0 0 6px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--emo-primary); } .emo-task-wizard-custom-topics__title { margin-top: 4px; color: var(--emo-text-muted); } .emo-task-wizard-topic-pick { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start; padding: 6px 8px; margin: 0 -4px; border-radius: var(--emo-radius-sm, 8px); transition: background 0.12s ease, box-shadow 0.12s ease; } .emo-task-wizard-topic-pick:has(input:checked) { background: var(--emo-primary-bg); box-shadow: inset 3px 0 0 var(--emo-primary); } .emo-task-wizard-topic-pick + .emo-task-wizard-topic-pick { border-top: 1px solid var(--emo-border); } .emo-task-wizard-topic-pick:has(input:checked) + .emo-task-wizard-topic-pick, .emo-task-wizard-topic-pick:has(+ .emo-task-wizard-topic-pick input:checked) { border-top-color: transparent; } .emo-task-wizard-topic-pick__label { display: flex; flex-direction: column; gap: 2px; cursor: pointer; font-size: 0.875rem; } .emo-task-wizard-topic-pick__rationale { font-size: 0.75rem; color: var(--emo-text-muted); } .emo-task-wizard-topic-pick__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; } .emo-task-wizard-topic-pick__traffic-note { font-size: 0.75rem; color: var(--emo-text-muted); } .emo-task-wizard-traffic { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 999px; font-size: 0.68rem; font-weight: 600; line-height: 1.4; } .emo-task-wizard-traffic--high { background: color-mix(in srgb, var(--emo-ok) 18%, transparent); color: var(--emo-success-text, #198038); } .emo-task-wizard-traffic--mid { background: color-mix(in srgb, var(--emo-warn) 16%, transparent); color: var(--emo-text); } .emo-task-wizard-traffic--low { background: color-mix(in srgb, var(--emo-risk) 12%, transparent); color: var(--emo-danger-text, #da1e28); } .emo-task-wizard-topic-row { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; } .emo-task-wizard-topic-source-badge { font-size: 0.68rem; font-weight: 600; color: var(--emo-primary); white-space: nowrap; } .emo-task-wizard-site-check { margin: 8px 0 10px; padding: 8px 10px; border: 1px solid #f0c36d; border-radius: var(--emo-radius-sm, 8px); background: #fff8e8; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; } .emo-task-wizard-site-check__text { margin: 0; font-size: 0.78rem; color: var(--emo-text); } .emo-task-wizard-site-check__link { font-size: 0.78rem; font-weight: 600; } .emo-task-wizard-site-check__confirm { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: 0.78rem; cursor: pointer; } .emo-task-topics-submit-banner .emo-btn-row { margin-top: 8px; } .emo-task-wizard-role-hint { margin: 0 0 10px; padding: 8px 10px; border-radius: var(--emo-radius-sm, 8px); background: var(--emo-surface-muted, #f8f9fb); border: 1px solid var(--emo-border); font-size: 0.78rem; color: var(--emo-text-muted); } .emo-task-wizard-role-hint--assignee { border-color: var(--emo-ok, #2d8a4e); background: var(--emo-success-soft, #edf8f0); color: var(--emo-text); } .emo-task-wizard-role-hint--editor { border-color: #f0c36d; background: #fff8e8; color: var(--emo-text); } .emo-task-topic-rules { margin: 0 0 10px; padding: 8px 10px; border-radius: var(--emo-radius-sm, 8px); background: var(--emo-surface-muted, #f8f9fb); border: 1px solid var(--emo-border); font-size: 0.78rem; color: var(--emo-text-muted); } .emo-task-topic-rules__summary { cursor: pointer; font-weight: 600; color: var(--emo-text); list-style: none; } .emo-task-topic-rules__summary::-webkit-details-marker { display: none; } .emo-task-topic-rules__summary::before { content: '▸'; margin-right: 6px; color: var(--emo-text-muted); } .emo-task-topic-rules[open] .emo-task-topic-rules__summary::before { content: '▾'; } .emo-task-topic-rules__head { margin: 8px 0 2px; font-weight: 600; } .emo-task-topic-rules__head--ok { color: var(--emo-ok, #2d8a4e); } .emo-task-topic-rules__head--no { color: var(--emo-risk, #da1e28); } .emo-task-topic-rules__list { margin: 0 0 4px; padding-left: 18px; } .emo-task-topic-rules__list li { margin: 2px 0; } .emo-task-topics-setup__role-banner { margin-bottom: 10px; font-size: 0.78rem; } .emo-task-topics-attribution__text { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } /* --- Task wizard visual accents (drawer A + show B/C/D) --- */ .emo-task-wizard-step-pane__card { margin-bottom: 0; } .emo-task-wizard-step-pane__section + .emo-task-wizard-step-pane__section, .emo-task-wizard-site-check + .emo-task-wizard-step-pane__section { margin-top: 10px; padding-top: 10px; border-top: 1px dashed color-mix(in srgb, var(--emo-border) 90%, transparent); } .emo-task-wizard-step-pane__section--ai { padding: 8px 10px; border-radius: var(--emo-radius-sm, 8px); background: color-mix(in srgb, var(--emo-primary) 4%, var(--emo-surface-1)); border: 1px solid color-mix(in srgb, var(--emo-primary) 14%, var(--emo-border)); } .emo-task-wizard-ai-toolbar { gap: 6px; flex-wrap: wrap; } .emo-task-ai-modes { display: grid; gap: 10px; margin-top: 8px; } @media (min-width: 480px) { .emo-task-ai-modes:not(.emo-task-ai-modes--compact) { grid-template-columns: 1fr 1fr; align-items: start; } } .emo-task-ai-modes--compact { gap: 8px; } .emo-task-ai-modes--diagram { margin-top: 0; } .emo-task-ai-mode { display: grid; gap: 8px; padding: 10px 12px; border-radius: var(--emo-radius-sm, 8px); background: var(--emo-surface-1); } .emo-task-ai-mode--auto { border: 1px solid color-mix(in srgb, var(--emo-primary) 28%, var(--emo-border)); background: color-mix(in srgb, var(--emo-primary) 5%, var(--emo-surface-1)); } .emo-task-ai-mode--manual { border: 1px dashed color-mix(in srgb, var(--emo-text-muted) 35%, var(--emo-border)); } .emo-task-ai-mode--exhausted { opacity: 0.72; border-style: dashed; border-color: color-mix(in srgb, var(--emo-text-muted) 40%, var(--emo-border)); background: color-mix(in srgb, var(--emo-text-muted) 6%, var(--emo-surface-1)); } .emo-task-ai-mode--exhausted .emo-task-ai-mode__badge--auto { color: var(--emo-text-muted); background: color-mix(in srgb, var(--emo-text-muted) 14%, transparent); } .emo-task-ai-mode__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; } .emo-task-ai-mode__badge { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; } .emo-task-ai-mode__badge--auto { color: var(--emo-primary); background: color-mix(in srgb, var(--emo-primary) 14%, transparent); } .emo-task-ai-mode__badge--manual { color: var(--emo-text-muted); background: color-mix(in srgb, var(--emo-text-muted) 12%, transparent); } .emo-task-ai-mode__title { margin: 0; font-size: 0.8125rem; font-weight: 700; } .emo-task-ai-mode__lead { margin: 0; font-size: 0.75rem; color: var(--emo-text-muted); line-height: 1.45; } .emo-task-ai-mode__steps { margin: 0; padding-left: 1.1rem; font-size: 0.75rem; color: var(--emo-text-muted); line-height: 1.45; } .emo-task-ai-mode__step-link { padding: 0; border: 0; background: none; color: var(--emo-primary); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; } .emo-task-ai-mode__action { justify-self: start; } .emo-task-ai-json-paste--nested { margin-top: 2px; } .emo-ai-topics-modes-diagram { display: grid; gap: 10px; } .emo-ai-topics-modes-diagram__flow { margin-top: 4px; } .emo-task-ai-json-paste { margin-top: 8px; border-radius: var(--emo-radius-sm, 8px); border: 1px dashed color-mix(in srgb, var(--emo-primary) 22%, var(--emo-border)); background: color-mix(in srgb, var(--emo-surface-1) 92%, transparent); } .emo-task-ai-json-paste__summary { padding: 8px 10px; cursor: pointer; font-size: 0.8125rem; font-weight: 600; color: var(--emo-text-muted); list-style: none; } .emo-task-ai-json-paste__summary::-webkit-details-marker { display: none; } .emo-task-ai-json-paste__body { padding: 0 10px 10px; } .emo-task-ai-json-paste__hint { margin: 0 0 6px; } .emo-task-ai-json-paste__input { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.75rem; } .emo-task-ai-json-paste--revealed { border-color: color-mix(in srgb, var(--emo-primary) 45%, var(--emo-border)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--emo-primary) 18%, transparent); } .emo-task-wizard-step-pane__lead { margin: 0 0 10px; font-size: 0.8125rem; color: var(--emo-text-muted); } .emo-task-wizard-status { margin: 6px 0 0; } .emo-task-wizard-status--ok { color: var(--emo-success-text, #198038); font-weight: 600; } .emo-task-wizard-status--warn { color: var(--emo-danger-text, #da1e28); } .emo-task-wizard-status--muted { color: var(--emo-text-muted); } .emo-task-wizard-count-badge--partial { border-color: color-mix(in srgb, var(--emo-warn) 45%, var(--emo-border)); color: var(--emo-text); background: color-mix(in srgb, var(--emo-warn) 12%, var(--emo-surface-2)); } .emo-task-wizard-count-badge--done { border-color: color-mix(in srgb, var(--emo-ok) 45%, var(--emo-border)); color: var(--emo-success-text, #198038); background: color-mix(in srgb, var(--emo-ok) 14%, var(--emo-surface-2)); } .emo-task-wizard-step-pane__title-accent { margin: 0 0 10px; padding: 8px 10px; border-radius: var(--emo-radius-sm, 8px); background: var(--emo-primary-bg); border-left: 3px solid var(--emo-primary); color: var(--emo-text); } .emo-task-wizard-check-results { margin-top: 8px; border: 1px solid var(--emo-border); border-radius: var(--emo-radius-sm, 8px); overflow: hidden; background: var(--emo-surface-1); } .emo-task-wizard-check-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 8px 10px; border-bottom: 1px solid var(--emo-border); font-size: 0.8125rem; } .emo-task-wizard-check-row:last-child { border-bottom: none; } .emo-task-wizard-check-row--warn { background: color-mix(in srgb, var(--emo-warn) 8%, var(--emo-surface-1)); } .emo-task-wizard-check-row--ok { background: color-mix(in srgb, var(--emo-ok) 5%, var(--emo-surface-1)); } .emo-task-wizard-check-row__tags { display: inline-flex; flex-wrap: wrap; gap: 4px; } .emo-task-wizard-check-tag { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px; font-size: 0.68rem; font-weight: 600; line-height: 1.45; } .emo-task-wizard-check-tag--ok { background: color-mix(in srgb, var(--emo-ok) 16%, transparent); color: var(--emo-success-text, #198038); } .emo-task-wizard-check-tag--warn { background: color-mix(in srgb, var(--emo-warn) 18%, transparent); color: var(--emo-text); } .emo-task-wizard-check-tag--risk { background: color-mix(in srgb, var(--emo-risk, #da1e28) 16%, transparent); color: var(--emo-risk, #da1e28); } .emo-task-wizard-check-row__reason { margin: 4px 0 0; font-size: 0.72rem; color: var(--emo-risk, #da1e28); } .emo-docs-lang-result { margin: 8px 0 0; padding: 8px 10px; border-radius: var(--emo-radius-sm, 8px); background: var(--emo-surface-muted, #f8f9fb); border: 1px solid var(--emo-border); } .emo-docs-lang-result__head { margin: 0 0 6px; font-size: 0.78rem; font-weight: 600; color: var(--emo-text); } .emo-docs-lang-result__err { margin: 0; font-size: 0.78rem; color: var(--emo-risk, #da1e28); } .emo-docs-lang-result__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; } .emo-docs-lang-seg { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.74rem; color: var(--emo-text-muted); padding: 3px 6px; border-radius: 6px; } .emo-docs-lang-seg--primary { background: color-mix(in srgb, var(--emo-ok, #198038) 12%, transparent); color: var(--emo-text); } .emo-docs-lang-seg__lang { font-weight: 600; min-width: 88px; } .emo-docs-lang-seg__badge { font-size: 0.66rem; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--emo-ok, #198038) 18%, transparent); color: var(--emo-success-text, #198038); } .emo-docs-lang-seg__preview { flex: 1 1 100%; color: var(--emo-text-muted); opacity: 0.85; } .emo-task-wizard-check-tag--seo-high { background: color-mix(in srgb, var(--emo-primary) 14%, transparent); color: var(--emo-primary); } .emo-task-wizard-check-tag--seo-mid { background: var(--emo-surface-2); color: var(--emo-text-muted); } .emo-task-wizard-check-tag--seo-low { background: color-mix(in srgb, var(--emo-risk) 12%, transparent); color: var(--emo-danger-text, #da1e28); } .emo-task-wizard-summary--accent { border-left: 3px solid var(--emo-primary); background: color-mix(in srgb, var(--emo-primary) 4%, var(--emo-surface-1)); } /* --- Task wizard panel (B/C/D — shell як drawer «Нове завдання» / .emo-wizard) --- */ .emo-stepper-wrap { padding-bottom: 12px; border-bottom: 1px solid color-mix(in srgb, var(--emo-border) 85%, transparent); } .emo-task-create-stepper.emo-stepper-wrap, .emo-task-wizard-panel .emo-stepper-wrap { padding: 8px 10px 10px; margin-bottom: 10px; border-bottom: none; border-radius: var(--emo-radius-sm, 8px); background: color-mix(in srgb, var(--emo-primary) 5%, var(--emo-surface-1)); border: 1px solid color-mix(in srgb, var(--emo-primary) 12%, var(--emo-border)); } .emo-task-create-stepper .emo-stepper__item--active .emo-stepper__circle, .emo-task-wizard-panel .emo-stepper__item--active .emo-stepper__circle { background: var(--emo-primary); border-color: var(--emo-primary); color: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--emo-primary) 20%, transparent); } .emo-task-create-stepper .emo-stepper__item--active .emo-stepper__label, .emo-task-wizard-panel .emo-stepper__item--active .emo-stepper__label { color: var(--emo-primary); font-weight: 700; } .emo-task-create-stepper .emo-stepper__item--done + .emo-stepper__line, .emo-task-wizard-panel .emo-stepper__item--done + .emo-stepper__line { background: var(--emo-ok); height: 2px; } .emo-task-create-stepper.emo-stepper-wrap { margin-bottom: 10px; } .emo-task-wizard-panel { margin-bottom: 12px; overflow: hidden; background: var(--emo-surface-1); border: 1px solid color-mix(in srgb, var(--emo-primary) 28%, var(--emo-border)); border-radius: var(--emo-radius-xl, 12px); box-shadow: var(--emo-shadow-card, 0 2px 12px rgba(0, 0, 0, 0.05)); } .emo-task-wizard-panel--wait { opacity: 0.94; } .emo-task-wizard-panel__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 10px 14px; background: linear-gradient( 135deg, color-mix(in srgb, var(--emo-primary) 8%, var(--emo-surface-1)) 0%, var(--emo-surface-1) 72% ); border-bottom: 1px solid var(--emo-border); } .emo-task-wizard-panel__head-main { display: flex; align-items: flex-start; gap: 10px; min-width: 0; } .emo-task-wizard-panel__head-badges { display: flex; flex-wrap: wrap; gap: 4px; flex-shrink: 0; } .emo-task-wizard-panel__index { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 1.75rem; padding: 2px 7px; border-radius: 999px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; line-height: 1.45; color: var(--emo-primary); background: var(--emo-primary-bg); border: 1px solid color-mix(in srgb, var(--emo-primary) 35%, var(--emo-border)); } .emo-task-wizard-panel__title { margin: 0; font-size: 0.95rem; font-weight: 600; line-height: 1.3; } .emo-task-wizard-panel__subtitle { margin-top: 2px; font-size: 0.72rem; letter-spacing: 0.01em; } .emo-task-wizard-panel__body { padding: 12px 14px 0; } .emo-task-wizard-panel__stepper { margin-bottom: 12px; } .emo-task-wizard-panel__footer { padding: 10px 14px 12px; border-top: 1px solid color-mix(in srgb, var(--emo-primary) 18%, var(--emo-border)); background: color-mix(in srgb, var(--emo-surface-1) 94%, transparent); } .emo-task-wizard-panel__footer .emo-task-workflow-actions { margin: 0; } .emo-task-wizard-panel__footer .emo-task-article-setup__toast, .emo-task-wizard-panel__footer .emo-task-topics-setup__toast { margin: 8px 0 0; } .emo-task-wizard__stepper { margin-bottom: 0; } .emo-task-wizard-step[hidden], .emo-task-wizard-step-pane[hidden], .emo-task-topics-setup-step[hidden], .emo-task-article-setup-step[hidden] { display: none !important; } .emo-task-wizard-panel__body > .emo-task-wizard-step-pane, .emo-task-wizard-panel__body > .emo-task-topics-setup-step, .emo-task-wizard-panel__body > .emo-task-article-setup-step, .emo-task-create-wizard > .emo-task-wizard-step-pane { margin-bottom: 12px; } .emo-task-wizard-panel__body > .emo-task-wizard-step-pane:last-child, .emo-task-wizard-panel__body > .emo-task-topics-setup-step:last-child, .emo-task-wizard-panel__body > .emo-task-article-setup-step:last-child, .emo-task-create-wizard > .emo-task-wizard-step-pane:last-child { margin-bottom: 0; } .emo-task-wizard-panel .emo-task-wizard-step-pane__card > .emo-task-wizard-summary, .emo-task-create-card .emo-task-wizard-step-pane__card > .emo-task-wizard-summary { margin-top: 0; } .emo-task-wizard-panel .emo-task-wizard-step-pane__card .emo-task-wizard-summary--accent, .emo-task-create-card .emo-task-wizard-step-pane__card .emo-task-wizard-summary--accent { border: 1px solid color-mix(in srgb, var(--emo-primary) 18%, var(--emo-border)); border-left-width: 3px; border-left-color: var(--emo-primary); } .emo-task-topics-setup__toast { margin: 0; } .emo-task-article-setup__hint { margin: 0 0 10px; } .emo-task-article-setup__title-preview { margin: 0 0 10px; } .emo-task-article-setup__toast { margin: 0; } .emo-task-wizard-nav { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border-top: none; } .emo-task-wizard { display: block; } .emo-task-wizard--task { margin-bottom: 16px; } .emo-task-wizard--row { margin-bottom: 0; } .emo-task-wizard__surface + .emo-task-wizard__surface { margin-top: 12px; } .emo-task-row-wizard__body { margin: 0; } .emo-task-wizard-step-pane__card .emo-task-row-wizard__body { margin: 0; } .emo-task-row-wizard__title { margin: 0 0 6px; font-size: 1rem; font-weight: 600; line-height: 1.35; padding: 8px 10px; border-radius: var(--emo-radius-sm, 8px); background: var(--emo-primary-bg); border-left: 3px solid var(--emo-primary); } .emo-task-topic-submit-wizard .emo-task-workflow-actions, .emo-task-topic-review-wizard .emo-task-workflow-actions, .emo-task-material-review-wizard .emo-task-workflow-actions { margin-top: 0; } .emo-task-wizard-summary-topics { margin: 8px 0 0; padding-left: 1.2rem; } .emo-task-docs-review-hint { margin: 8px 0; } .emo-task-ai-review { margin-top: 8px; } .emo-task-ai-review__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; } .emo-task-ai-review__title { font-weight: 600; } .emo-task-ai-review__at { margin-left: auto; white-space: nowrap; } .emo-task-ai-review__section { margin-top: 8px; } .emo-task-ai-review__section-title { font-weight: 600; font-size: 12px; margin-bottom: 4px; } .emo-task-ai-review__section--blockers .emo-task-ai-review__section-title { color: var(--emo-danger-text); } .emo-task-ai-review__section--quality .emo-task-ai-review__section-title { color: var(--emo-primary); } .emo-task-ai-review__list { padding-left: 1.1rem; margin: 0; } .emo-task-ai-review__author-comment { margin-top: 8px; } .emo-task-ai-review__editor-note { margin-top: 6px; } .emo-task-ai-review__actions { margin-top: 8px; } .emo-task-card__bulk-check { flex-shrink: 0; padding-top: 2px; margin: -2px 0; } .emo-task-card__ai-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 10px; background: var(--emo-primary-bg); border: 1px solid var(--emo-border); border-radius: var(--emo-radius-sm, 6px); font-size: 0.8125rem; } .emo-task-articles-board .emo-task-show-article { padding: 10px 0; border-bottom: 1px solid var(--emo-border); } .emo-task-articles-board .emo-task-show-article:last-child { border-bottom: none; } .emo-task-article-form .emo-task-form__grid { gap: 6px 8px; margin-bottom: 4px; } .emo-task-article-form .emo-field--compact:not(:last-child) { margin-bottom: 4px; } .emo-task-article-form .emo-task-form__actions { margin-top: 8px; padding-top: 8px; } .emo-task-article-form__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--emo-border); } .emo-task-article-form__footer .emo-task-workflow-actions { margin: 0; flex: 1 1 auto; } .emo-task-inline-btn { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 1px 7px; border: 1px solid var(--emo-border); border-radius: 4px; background: var(--emo-surface-2); color: var(--emo-primary); font-size: 0.65rem; font-weight: 600; text-transform: none; letter-spacing: 0; cursor: pointer; vertical-align: middle; } .emo-task-inline-btn:hover { background: var(--emo-primary-bg); border-color: var(--emo-primary); } .emo-task-inline-btn:disabled:not(.is-active) { opacity: 0.45; cursor: not-allowed; } .emo-task-inline-btn.is-active { background: var(--emo-primary-bg); border-color: var(--emo-primary); color: var(--emo-primary); opacity: 1; cursor: default; box-shadow: inset 0 0 0 1px var(--emo-primary); } .emo-task-inline-btn[hidden] { display: none !important; } .emo-adp-contact-row { display: flex; align-items: center; gap: var(--emo-gap-sm, 8px); min-width: 0; } .emo-adp-contact-row .emo-input { flex: 1 1 auto; min-width: 0; width: 100%; } .emo-adp-price-tools { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; vertical-align: middle; } .emo-field-label { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; } .emo-field-label--nowrap { flex-wrap: nowrap; white-space: nowrap; } .emo-field-label .emo-task-inline-btn { margin-left: 4px; padding: 1px 5px; } .emo-adp-add-toolbar { display: flex; flex-direction: column; gap: 0; } .emo-adp-add-triggers { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; } .emo-adp-add-trigger > summary { cursor: pointer; list-style: none; } .emo-adp-add-trigger > summary::-webkit-details-marker { display: none; } .emo-adp-add-panel__body { width: 100%; } .emo-adp-add-panel__body[hidden] { display: none !important; } .emo-adp-add-sign::before { content: '+ '; } .emo-adp-add-trigger[open] .emo-adp-add-sign::before { content: '− '; } .emo-adp-bulk-form { display: flex; flex-direction: column; gap: 0; width: 100%; } .emo-adp-bulk-form > .emo-form-row { width: 100%; } .emo-adp-bulk-paste textarea { width: 100%; min-height: 88px; resize: vertical; } .emo-adp-bulk-paste__actions { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; } .emo-adp-bulk-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .emo-adp-bulk-head__tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .emo-adp-bulk-table .emo-input { width: 100%; min-width: 0; } .emo-adp-bulk-table__price { min-width: 200px; } .emo-adp-bulk-table__net { width: 110px; } .emo-adp-bulk-table__rm { width: 36px; text-align: center; } .emo-adp-price-cell { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .emo-adp-price-cell .js-adp-base { flex: 1 1 72px; min-width: 72px; max-width: 120px; } .emo-adp-price-cell .emo-adp-price-tools { margin-left: 0; flex-shrink: 0; } .emo-task-inline-btn__icon { font-size: 0.85em; line-height: 1; } .emo-task-show-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 10px; } .emo-task-show-kpi { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; font-size: 0.8125rem; } .emo-task-show-kpi > div { display: inline-flex; align-items: baseline; gap: 6px; } .emo-task-show-kpi dt { margin: 0; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--emo-text-muted); } .emo-task-show-kpi dd { margin: 0; font-weight: 600; } .emo-task-articles-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .emo-task-articles-card__head .emo-card__title { margin-bottom: 0; } .emo-task-context-card__summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; list-style: none; } .emo-task-context-card__summary::-webkit-details-marker { display: none; } .emo-task-context-dl { display: grid; gap: 6px 12px; margin: 8px 0 0; font-size: 0.8125rem; } .emo-task-context-dl > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 8px; align-items: baseline; } .emo-task-context-dl dt { margin: 0; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; color: var(--emo-text-muted); } .emo-task-context-dl dd { margin: 0; } .emo-task-instructions__summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; list-style: none; } .emo-task-instructions__summary::-webkit-details-marker { display: none; } .emo-task-instructions__body { margin-top: 8px; line-height: 1.45; } .emo-task-instructions__body p { margin: 0 0 6px; } .emo-task-instructions__body p:last-child { margin-bottom: 0; } .emo-task-lifecycle { display: grid; gap: 14px; } .emo-task-lifecycle--compact .emo-task-lifecycle__phase-title { font-size: 0.72rem; } .emo-task-lifecycle__phase-title { margin: 0 0 8px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--emo-text); } .emo-task-lifecycle__phase-title span { font-weight: 500; text-transform: none; letter-spacing: 0; } .emo-task-lifecycle__lanes { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin-bottom: 8px; } .emo-task-lifecycle__lane { padding: 8px 10px; border: 1px solid var(--emo-border); border-radius: 8px; background: var(--emo-surface-1); } .emo-task-lifecycle__subflow { margin-top: 4px; } .emo-task-lifecycle__or { font-size: 0.68rem; font-weight: 600; color: var(--emo-text-muted); text-transform: uppercase; } .emo-task-lifecycle__open-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border: 1px dashed var(--emo-border); border-radius: 8px; background: var(--emo-surface-1); } .emo-task-lifecycle__mini-stage { display: inline-flex; align-items: center; gap: 2px; vertical-align: middle; } .emo-task-lifecycle__mini-stage--card { width: 100%; margin: 4px 0; } .emo-task-lifecycle__mini-stage .emo-stage__dot { width: 6px; height: 6px; } .emo-task-lifecycle__mini-stage .emo-stage__line { flex: 1; min-width: 8px; height: 2px; } .emo-task-lifecycle__legend { margin-top: 8px; } .emo-task-instructions__body code { font-size: 0.85em; padding: 1px 4px; border-radius: 4px; background: var(--emo-surface-2); } .emo-task-seo-compact { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; border: 1px solid var(--emo-border); border-radius: var(--emo-radius-sm, 6px); padding: 4px; background: var(--emo-surface-1); } .emo-task-seo-compact .js-emo-focus-kw { flex: 1; min-width: 120px; } .emo-task-seo-toggle { width: 28px; height: 28px; border: 1px solid var(--emo-border); border-radius: 4px; background: var(--emo-surface-2); font-weight: 800; cursor: pointer; } .emo-task-url-grid__row { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; } .emo-task-url-grid__row:last-child { margin-bottom: 0; } .emo-task-url-grid__lang { font-size: 0.7rem; font-weight: 700; color: var(--emo-text-muted); min-width: 28px; } .emo-task-url-grid__row .js-emo-grid-input { flex: 1; } /* Єдиний індикатор стану перевірки (нейтрально / перевіряю / ок / ризик). Спільна візуальна мова для всіх «перевірок» — URL-пінг, формат тощо. */ .emo-task-ghost-dot, .emo-check-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--emo-border); flex-shrink: 0; transition: background 0.15s ease; } .emo-task-ghost-dot--checking, .emo-check-dot--checking { background: var(--emo-warn); animation: emo-check-pulse 0.9s ease-in-out infinite; } .emo-task-ghost-dot--ok, .emo-check-dot--ok { background: var(--emo-ok); } .emo-task-ghost-dot--risk, .emo-check-dot--risk { background: var(--emo-risk); } @keyframes emo-check-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .emo-task-topic-results { border: 1px solid var(--emo-border); border-radius: var(--emo-radius-sm, 6px); background: var(--emo-surface-1); max-height: 160px; overflow-y: auto; margin-top: 4px; } .emo-task-topic-results__item { display: block; width: 100%; text-align: left; padding: 8px 10px; border: none; background: none; cursor: pointer; font-size: 0.8125rem; } .emo-task-topic-results__item:hover:not(:disabled) { background: var(--emo-surface-2); } .emo-task-topic-results__item:disabled { opacity: 0.5; cursor: not-allowed; } .emo-task-show-article--locked-me { box-shadow: inset 3px 0 0 var(--emo-primary); } .emo-task-show-article--locked-other { background: #fff5f5; box-shadow: inset 3px 0 0 var(--emo-risk); } .emo-task-show-article--revision { border-left: 2px solid var(--emo-risk); } .emo-task-show-article:has(.emo-task-article-write-panel) { padding: 0; border: none; background: transparent; border-radius: 0; box-shadow: none; } .emo-task-show-article--revision:has(.emo-task-article-write-panel) { border-left: none; } .emo-task-article-write-panel--revision { border-color: color-mix(in srgb, var(--emo-risk) 32%, var(--emo-border)); } .emo-task-article-write-panel .emo-task-wizard-step-pane__card + .emo-task-wizard-step-pane__card { margin-top: 12px; } .emo-task-article-write-panel .emo-task-review-comments, .emo-task-article-write-panel .emo-task-review-comments__history { margin-bottom: 10px; } .emo-task-article-write-panel .emo-task-wizard-panel__footer { flex-wrap: wrap; gap: 8px; } .emo-task-article-write-panel .emo-task-wizard-panel__footer .emo-task-workflow-actions { flex: 1 1 auto; margin: 0; } .emo-task-article-write-panel .emo-task-wizard-panel__footer .emo-task-wizard-nav { flex-shrink: 0; } .emo-task-row-lock-banner { display: flex; align-items: center; gap: 6px; color: var(--emo-risk); margin: 0 0 8px; padding: 4px 8px; font-weight: 600; font-size: 0.8125rem; border-radius: var(--emo-radius-sm, 8px); background: color-mix(in srgb, var(--emo-risk) 10%, var(--emo-surface-1)); border: 1px solid color-mix(in srgb, var(--emo-risk) 28%, var(--emo-border)); } .emo-task-row-lock-banner::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--emo-risk); flex-shrink: 0; animation: emo-pulse-red 2s ease-in-out infinite; } .emo-task-show-article--locked-other { outline: 1px dashed color-mix(in srgb, var(--emo-risk) 35%, var(--emo-border)); outline-offset: 2px; } .emo-tasks-bulk-bar { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 200; max-width: min(640px, calc(100vw - 24px)); padding: 12px 16px; background: var(--emo-surface-1); border: 1px solid var(--emo-border); border-radius: var(--emo-radius); box-shadow: var(--emo-shadow); } .emo-tasks-bulk-bar--visible, .emo-tasks-bulk-bar:not([hidden]) { display: block; } .emo-tasks-bulk-bar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .emo-task-article-rows { display: flex; flex-direction: column; gap: 12px; } .emo-task-article-row { padding: 10px 0; border-bottom: 1px solid var(--emo-border); } .emo-task-article-row:last-child { border-bottom: none; } .emo-task-article-row__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; } .emo-task-article-row__index { font-weight: 700; color: var(--emo-text-muted); } .emo-task-article-row__plan { font-size: 0.75rem; padding: 2px 8px; border-radius: 12px; background: var(--emo-surface-2); border: 1px solid var(--emo-border); } .emo-task-article-row__pub-link { font-size: 0.8125rem; color: var(--emo-primary); } .emo-task-article-row__title { margin: 4px 0; font-weight: 600; } .emo-task-article-row__seo-svc { display: inline-block; font-weight: 800; font-size: 0.7rem; margin-right: 4px; color: var(--emo-warn, #f97316); } .emo-task-article-row__revision-alert { margin-top: 8px; padding: 8px 10px; border-radius: 6px; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-size: 0.8125rem; } .emo-task-article-row__url { word-break: break-all; } .emo-task-articles-show { display: flex; flex-direction: column; gap: 8px; } .emo-task-show-article { padding: 8px 10px; border: 1px solid var(--emo-border); border-radius: var(--emo-radius-sm, 8px); background: var(--emo-surface-2); } .emo-task-workflow-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; } .emo-task-workflow-wait { padding: 6px 10px; border-radius: 6px; background: var(--emo-surface-1); border: 1px solid var(--emo-border); } .emo-pub-lang-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .emo-pub-lang-item { border: 1px solid var(--emo-border); border-radius: 6px; overflow: hidden; display: flex; align-items: center; height: 26px; background: var(--emo-surface-1); } .emo-pub-lang-code { width: 28px; height: 100%; display: flex; justify-content: center; align-items: center; font-size: 10px; font-weight: 700; color: #fff; text-decoration: none; } /* Статус-кольори мовних чипів — theme-aware (раніше хардкод-hex, у темній не адаптувались). 0 = нема даних (нейтральний), 1 = в індексі (ok), 2 = не в індексі (risk), 3 = частково (warn). */ .emo-pub-lang-code--status-0 { background: var(--emo-surface-2); color: var(--emo-text-muted); } .emo-pub-lang-code--status-1 { background: var(--emo-ok); } .emo-pub-lang-code--status-2 { background: var(--emo-risk); } .emo-pub-lang-code--status-3 { background: var(--emo-warn); } /* Мовна версія без валідного URL — не клікабельна (раніше вела на портал ЕМО). */ .emo-pub-lang-code--nourl { opacity: 0.5; cursor: not-allowed; } .emo-pub-lang-days { padding: 0 6px; font-size: 10px; font-weight: 600; color: #166534; background: #f0fdf4; border-left: 1px solid var(--emo-border); } .emo-pub-btn-recheck { border: none; background: transparent; border-left: 1px solid var(--emo-border); color: var(--emo-text-muted); width: 28px; cursor: pointer; display: flex; justify-content: center; align-items: center; height: 100%; font-size: 14px; line-height: 1; padding: 0; } .emo-pub-btn-recheck:hover:not(:disabled) { color: var(--emo-primary); background: var(--emo-primary-bg); } .emo-pub-btn-recheck.is-loading { animation: emo-spin 1s infinite linear; color: var(--emo-primary); } .emo-pub-btn-recheck:disabled { cursor: not-allowed; opacity: 0.5; } @keyframes emo-spin { 100% { transform: rotate(360deg); } } .emo-pub-date-age { font-size: 0.75rem; color: var(--emo-text-muted); margin-top: 2px; } .emo-pub-tranche-wrap { margin-top: 6px; } .emo-tranche { display: flex; gap: 3px; height: 10px; width: 170px; max-width: 100%; } .emo-tranche__seg { border-radius: 3px; min-width: 0; } .emo-tranche__seg--base { background: var(--emo-ok); } .emo-tranche__seg--paid { background: var(--emo-ok); opacity: 0.45; } .emo-tranche__seg--possible { border: 1px dashed var(--emo-border); box-sizing: border-box; background: transparent; } .emo-pub-tranche-hint { font-size: 0.7rem; color: var(--emo-text-muted); margin-top: 4px; line-height: 1.3; } /* Підписані сегменти оплати (заміна тонкої смуги): нараховане — зелений чип з ✓, ще ні — пунктирний muted. Переносяться: у вузькій колонці стають стовпчиком, на картці — в ряд. */ .emo-pay-segs { display: flex; flex-wrap: wrap; gap: 4px; } .emo-pay-seg { display: inline-flex; align-items: center; font-size: 0.68rem; line-height: 1; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--emo-border); color: var(--emo-text-muted); white-space: nowrap; } .emo-pay-seg--done { background: var(--emo-success-soft); color: var(--emo-success-text); border-color: transparent; } .emo-pay-seg--wait { border-style: dashed; } /* Видимість: приклади пошукових запитів як зелені чипи (колір вкладки). */ .emo-pub-kw-samples { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } .emo-pub-kw-chip { font-size: 0.7rem; padding: 2px 8px; border-radius: 999px; background: var(--emo-success-soft); color: var(--emo-success-text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .emo-pub-tranche-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; } .emo-pub-tranche-legend__label { font-weight: 600; color: var(--emo-text); } .emo-tranche--legend { width: 120px; height: 8px; } .emo-pub-tranche-legend__sep { opacity: 0.5; } .emo-pub-scope-zones { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; } .emo-pub-scope-zone { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 280px; } .emo-pub-scope-zone__label { font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.65rem; } .emo-pub-scope-divider { width: 1px; align-self: stretch; min-height: 36px; background: var(--emo-border); flex: 0 0 1px; } @media (max-width: 768px) { .emo-pub-scope-divider { width: 100%; height: 1px; min-height: 0; flex: 1 1 100%; } .emo-pub-scope-zone { flex: 1 1 100%; } /* Мобільний: повертаємо стек (на десктопі — один горизонтальний рядок). */ .emo-pub-scope-zones--compact { flex-wrap: wrap; overflow-x: visible; } .emo-pub-scope-zones--compact .emo-pub-scope-zone { flex: 1 1 100%; } .emo-pub-scope-zones--compact .emo-tab-pills-scroll, .emo-pub-bonus-row { flex-wrap: wrap; } } .emo-pub-author-cell { display: flex; align-items: center; gap: 10px; } .emo-pub-author-cell img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; } .emo-task-card__title { margin: 0; font-size: 0.9375rem; line-height: 1.25; font-weight: 600; } .emo-task-card__title a { color: inherit; text-decoration: none; } .emo-task-card__title a:hover { color: var(--emo-primary); } .emo-task-card__deadline { flex-shrink: 0; text-align: right; white-space: nowrap; font-size: 0.75rem; } @media (max-width: 480px) { .emo-task-card__context-langs { display: none; } .emo-task-card__footer { flex-direction: column; align-items: stretch; } .emo-task-card__footer-main { max-width: 100%; } .emo-task-card__footer-actions { justify-content: flex-end; } .emo-stage__dot { width: 7px; height: 7px; } .emo-stage__line { min-width: 2px; } .emo-article-row__head { flex-wrap: wrap; } .emo-article-row__badge { margin-left: auto; } .emo-article-row__title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } } .emo-row-status { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; } .emo-row-status__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .emo-focus-fold summary { cursor: pointer; font-weight: 600; color: var(--emo-text-muted); } /* Tasks module */ .emo-tabs__badge { display: inline-block; margin-left: 6px; padding: 1px 7px; font-size: 0.75rem; border-radius: 10px; background: var(--emo-surface-2); } .emo-tabs__item--pulse.emo-tabs__item--active, .emo-tabs__item--pulse:hover { box-shadow: 0 0 0 2px var(--emo-warn-soft, rgba(255, 180, 0, 0.25)); } .emo-drawer { position: fixed; inset: 0; z-index: 200; display: flex; justify-content: flex-end; } .emo-drawer[hidden] { display: none !important; } .emo-drawer__backdrop { flex: 1; background: rgba(0, 0, 0, 0.35); } .emo-drawer__panel { width: min(420px, 100%); max-height: 100vh; overflow-y: auto; background: var(--emo-surface-1); border-left: 1px solid var(--emo-border); padding: 16px 20px; box-shadow: var(--emo-shadow-card, -4px 0 24px rgba(0, 0, 0, 0.08)); } .emo-drawer__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .emo-drawer__body .emo-field { margin-bottom: 12px; } .emo-select--sm:not(.ts-hidden-accessible), .emo-input--sm { height: 30px; font-size: 0.85rem; padding: 0 8px; line-height: 28px; box-sizing: border-box; } .emo-ads-claim-form__top .emo-input:not(.ts-hidden-accessible), .emo-ads-claim-form__top .emo-select:not(.ts-hidden-accessible) { height: 30px; } .emo-thematic-workspace { display: flex; flex-direction: column; gap: 16px; } .emo-thematic-toolbar-card { margin-bottom: 0; } .emo-thematic-persona-map { border: 1px solid var(--emo-border); border-radius: var(--emo-radius-sm, 6px); background: var(--emo-surface-1); padding: 8px 12px; } .emo-thematic-persona-map > summary { cursor: pointer; font-weight: 600; } .emo-thematic-persona-map__list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .emo-thematic-persona-map__list li { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; } .emo-thematic-persona-map__rubric { min-width: 160px; color: var(--emo-text-muted); } .emo-thematic-persona-map__persona { font-weight: 600; } .emo-thematic-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; } .emo-thematic-toolbar__site { flex: 1 1 240px; min-width: 200px; } .emo-thematic-toolbar__site .emo-input { min-width: 250px; } .emo-thematic-section-title { font-size: 1.05rem; font-weight: 600; margin: 8px 0 4px; color: var(--emo-text, #111); } /* Thematic — згортувані панелі / статистика (чистка inline-стилів) */ .emo-thematic-summary { cursor: pointer; padding: 12px 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .emo-thematic-panel-body { padding: 0 16px 16px; } .emo-thematic-panel-body--grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .emo-minibar { height: 8px; border-radius: 4px; background: var(--emo-surface-2); overflow: hidden; margin-top: 3px; } .emo-minibar--sm { height: 6px; border-radius: 3px; margin-top: 2px; } .emo-minibar__fill { display: block; height: 100%; } /* Пастельний стандарт заповнення міні-бару (за статусом) */ .emo-minibar__fill--ok { background: var(--emo-bar-ok); } .emo-minibar__fill--warn { background: var(--emo-bar-warn); } .emo-minibar__fill--risk { background: var(--emo-bar-risk); } /* Стековий міні-бар: сегмент «факт» + сегмент «у роботі» іншим (пастельним) кольором в одному треку */ .emo-minibar--stacked { display: flex; } .emo-minibar--stacked .emo-minibar__fill { flex-shrink: 0; } .emo-minibar__fill--inwork { background: repeating-linear-gradient(45deg, var(--emo-bar-inwork), var(--emo-bar-inwork) 4px, var(--emo-bar-inwork-2) 4px, var(--emo-bar-inwork-2) 8px); } .emo-stat-num { font-size: 1.5rem; font-weight: 700; } .emo-stat-num--primary { color: var(--emo-primary); } .emo-stat-num--muted { color: var(--emo-muted-color); } .emo-stat-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; padding-top: 12px; } .emo-kv-row { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; border-bottom: 1px solid var(--emo-border); } .emo-thematic-row-badge { font-size: 0.7rem; margin-left: 4px; } .emo-thematic-help { border: 1px solid var(--emo-border); border-radius: var(--emo-radius, 8px); background: var(--emo-surface-2, #f3f4f6); margin-bottom: 8px; } .emo-thematic-help summary { padding: 10px 14px; cursor: pointer; font-weight: 600; list-style: none; } .emo-thematic-help summary::-webkit-details-marker { display: none; } .emo-thematic-help__body { padding: 12px 16px; border-top: 1px solid var(--emo-border); font-size: 0.875rem; color: var(--emo-text-muted, #4b5563); } .emo-thematic-sprint-feed { display: flex; flex-direction: column; gap: 12px; } .emo-thematic-completed-feed { margin-top: 20px; } .emo-thematic-completed-feed__summary, .emo-thematic-analytics__summary { cursor: pointer; list-style: none; } .emo-thematic-completed-feed__summary::-webkit-details-marker, .emo-thematic-analytics__summary::-webkit-details-marker { display: none; } .emo-thematic-completed-feed__summary::before, .emo-thematic-analytics__summary::before { content: '▸'; display: inline-block; margin-right: 6px; transition: transform .15s ease; } .emo-thematic-completed-feed[open] .emo-thematic-completed-feed__summary::before, .emo-thematic-analytics[open] .emo-thematic-analytics__summary::before { transform: rotate(90deg); } .emo-thematic-analytics { margin-top: 24px; } .emo-thematic-analytics > .emo-card { margin-top: 12px; } .emo-thematic-history-more { margin-top: 8px; } .emo-thematic-history-more summary { cursor: pointer; } .emo-thematic-sprint { border: 1px solid var(--emo-card-border); border-radius: var(--emo-card-radius); background: var(--emo-card-bg); box-shadow: var(--emo-card-shadow); overflow: hidden; } .emo-thematic-sprint__summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; background: var(--emo-surface-1); border-bottom: 1px solid transparent; } .emo-thematic-sprint[open] .emo-thematic-sprint__summary { border-bottom-color: var(--emo-border); } .emo-thematic-sprint__summary::-webkit-details-marker { display: none; } .emo-thematic-sprint__main { display: flex; align-items: flex-start; gap: 10px; flex: 1 1 280px; min-width: 0; } .emo-thematic-sprint__chevron { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid var(--emo-text-muted, #6b7280); margin-top: 6px; flex-shrink: 0; transition: transform 0.2s; } .emo-thematic-sprint[open] .emo-thematic-sprint__chevron { transform: rotate(90deg); } .emo-thematic-sprint__head-text { min-width: 0; flex: 1; } .emo-thematic-sprint__title { font-weight: 600; line-height: 1.35; } .emo-thematic-sprint__meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; } .emo-thematic-sprint__preview { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .emo-thematic-sprint__preview-item::before { content: "• "; } .emo-thematic-sprint__preview-item:first-child::before { content: ""; } .emo-site-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; padding: 2px 8px; font-size: 0.7rem; font-weight: 700; border-radius: 4px; background: var(--emo-surface-2, #f3f4f6); border: 1px solid var(--emo-border); flex-shrink: 0; } .emo-thematic-stat-writing { margin-left: 8px; color: var(--emo-primary, #0f62fe); } .emo-thematic-actions--completed { flex-direction: column; align-items: flex-start; gap: 8px; } .emo-thematic-sprint__stats { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; } .emo-thematic-sprint__counts { text-align: right; font-size: 0.8rem; line-height: 1.3; } .emo-thematic-sprint__progress { width: 120px; text-align: right; } .emo-thematic-sprint__progress .emo-progress-bar { margin-bottom: 4px; } .emo-sprint-progress { display: flex; gap: 2px; height: 7px; border-radius: 4px; overflow: hidden; width: 100%; margin-bottom: 4px; } .emo-sprint-progress__seg--done { background: var(--emo-ok); } .emo-sprint-progress__seg--working { background: var(--emo-warn); } .emo-sprint-progress__seg--pending { background: var(--emo-border); } .emo-persona-chip { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--emo-info-soft, #e0f2fe); color: var(--emo-accent, #2563eb); font-size: 9px; font-weight: 500; overflow: hidden; vertical-align: middle; margin-top: 4px; } .emo-persona-chip img { width: 100%; height: 100%; object-fit: cover; } .emo-thematic-row-topic { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .emo-thematic-row-topic .emo-persona-chip { margin-top: 0; flex-shrink: 0; } .emo-thematic-rubric { min-width: 120px; max-width: 180px; } .emo-thematic-rubric-cell { display: flex; flex-direction: column; gap: 6px; min-width: 140px; } .emo-thematic-persona-preview-wrap { line-height: 1.2; } .emo-thematic-persona-preview { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 0.75rem; } .emo-thematic-persona-preview--fallback { opacity: 0.85; } .emo-thematic-persona-preview__name { color: var(--emo-text-muted, #6b7280); font-weight: 500; } .emo-thematic-persona-preview--fallback .emo-thematic-persona-preview__name { font-weight: 400; } .emo-thematic-persona-preview .emo-persona-chip { width: 16px; height: 16px; font-size: 8px; margin-top: 0; } .emo-thematic-col--rubric { min-width: 160px; } .emo-persona-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .emo-persona-rubric-select { min-width: 160px; max-width: 220px; } .emo-thematic-sprint__body { padding: 0; overflow-x: auto; } .emo-thematic-table { width: 100%; font-size: 0.85rem; } .emo-thematic-table textarea.emo-input { min-width: 200px; font-size: 0.8rem; width: 100%; } .emo-thematic-row--active { background: var(--emo-primary-bg, #edf5ff); } .emo-thematic-row--active:hover { background: var(--emo-primary-bg, #edf5ff); } .emo-thematic-row--stale { background: #fff8f0; } .emo-thematic-row--stale:hover { background: #fff3e6; } .emo-thematic-row--affinity { border-left: 3px solid var(--emo-success, #22c55e); } .emo-input--warn { border-color: var(--emo-warn-color, #f59e0b) !important; } .emo-thematic-actions-cell { min-width: 320px; } .emo-thematic-col--rubric { width: 150px; } .emo-thematic-col--date { width: 96px; } .emo-thematic-col--status { width: 130px; } .emo-thematic-col--actions { width: 380px; } .emo-thematic-url-stack { display: flex; flex-direction: column; gap: 6px; min-width: 240px; } .emo-thematic-url-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .emo-thematic-url-row .emo-thematic-url { flex: 1 1 160px; min-width: 140px; } .emo-thematic-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .emo-thematic-actions--stack { flex-direction: column; align-items: stretch; gap: 8px; } .emo-thematic-actions__buttons { display: flex; flex-wrap: wrap; gap: 6px; } .emo-thematic-actions__hint { margin-bottom: 2px; } .emo-status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle; } .emo-status-dot--writing { background: var(--emo-primary, #0f62fe); } .emo-status-dot--done { background: var(--emo-success, #198038); } .emo-status-dot--pending { background: var(--emo-text-muted, #9ca3af); } .emo-tag { display: inline-block; padding: 2px 8px; font-size: 0.75rem; border-radius: 4px; background: var(--emo-surface-2, #f3f4f6); border: 1px solid var(--emo-border); color: var(--emo-text-muted, #4b5563); } .emo-lang-pill { display: inline-block; padding: 2px 6px; font-size: 0.7rem; font-weight: 600; border-radius: 4px; text-decoration: none; background: var(--emo-surface-2); border: 1px solid var(--emo-border); color: var(--emo-primary, #0f62fe); } .emo-thematic-lang-links { display: flex; flex-wrap: wrap; gap: 4px; } .emo-thematic-list { list-style: none; padding: 0; margin: 0; } .emo-thematic-list li { padding: 4px 0; border-bottom: 1px solid var(--emo-border); font-size: 0.85rem; } .emo-thematic-list--compact li { border-bottom: none; } .emo-thematic-backlog { border: 1px solid var(--emo-border); border-radius: var(--emo-radius, 8px); padding: 0 12px 12px; background: var(--emo-surface-1); } .emo-thematic-backlog summary { padding: 10px 4px; cursor: pointer; font-weight: 600; } .emo-drawer--thematic { z-index: 210; } .emo-drawer--thematic.emo-drawer--open { display: flex; } .emo-drawer__panel--wide { width: min(480px, 100vw); } .emo-drawer--thematic .emo-wizard-prompt { max-height: 220px; overflow: auto; } .emo-traffic-workspace { display: flex; flex-direction: column; gap: 16px; } .emo-traffic-toolbar-card { position: sticky; top: 0; z-index: 50; } .emo-traffic-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; } .emo-traffic-hub-feed { display: flex; flex-direction: column; gap: 12px; } .emo-traffic-hub-accordion[open] { border-left: 3px solid var(--emo-accent, #2563eb); } .emo-traffic-hub-accordion { border: 1px solid var(--emo-border); border-radius: var(--emo-radius, 8px); background: var(--emo-surface-1); } .emo-traffic-hub-accordion__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; list-style: none; } .emo-traffic-hub-accordion__head::-webkit-details-marker { display: none; } .emo-traffic-hub-accordion__title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1; } .emo-traffic-hub-accordion__body { padding: 0 16px 16px; border-top: 1px solid var(--emo-border); } .emo-traffic-hub-toolbar { display: flex; gap: 8px; align-items: center; margin: 12px 0; } .emo-sat-health { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; margin-left: 4px; } .emo-sat-health__dot { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; } .emo-sat-health__dot--active { background: var(--emo-ok); } .emo-sat-health__dot--indexing { background: var(--emo-warn); } .emo-sat-health__dot--legacy, .emo-sat-health__dot--draft { border: 1px solid var(--emo-border); box-sizing: border-box; background: transparent; } .emo-sat-health__overflow { margin-left: 2px; } .emo-score { display: flex; align-items: center; gap: 6px; } .emo-score__bar { width: 42px; height: 6px; background: var(--emo-border); border-radius: 3px; overflow: hidden; flex-shrink: 0; } .emo-score__fill { display: block; height: 100%; } .emo-score__fill--hi { background: var(--emo-ok); } .emo-score__fill--mid { background: var(--emo-warn); } .emo-score__fill--lo { background: var(--emo-text-muted, #9ca3af); } .emo-score__num { font-size: 0.8rem; font-weight: 600; font-variant-numeric: tabular-nums; } .emo-pool-row--hot { background: var(--emo-success-soft); } .emo-pool-row--exhausted { opacity: 0.65; } .emo-traffic-row--active { background: rgba(15, 98, 254, 0.04); } .emo-traffic-url-grid { display: flex; flex-direction: column; gap: 6px; min-width: 180px; } .emo-traffic-url-slot { display: flex; flex-direction: column; gap: 2px; } .emo-traffic-url-readonly li + li { margin-top: 4px; } .emo-drawer--traffic { z-index: 210; } .emo-drawer--traffic.emo-drawer--open { display: flex; } .emo-text-success { color: var(--emo-success-text, #198038); font-weight: 600; } .emo-p-md { padding: 16px; } .emo-w-full { width: 100%; } /* Finance receipt (MO parity) */ .emo-finance-receipt { margin-top: 16px; } .emo-finance-receipt__nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 12px; } .emo-finance-receipt__nav-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--emo-radius, 8px); border: 1px solid var(--emo-border); text-decoration: none; color: var(--emo-text); } .emo-finance-receipt__nav-label { font-weight: 600; min-width: 140px; text-align: center; } .emo-finance-receipt__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--emo-border); border-radius: var(--emo-radius, 8px); background: var(--emo-surface-1); } .emo-finance-receipt__owner { margin: 0 0 8px; font-size: 1.25rem; } .emo-finance-receipt__head-main { flex: 1 1 200px; } .emo-finance-receipt__head-side { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; justify-content: flex-end; } .emo-finance-receipt__plan { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 0.75rem; color: var(--emo-text-muted); } .emo-finance-receipt__total { text-align: right; } .emo-finance-receipt__total-value { font-size: 1.5rem; font-weight: 700; display: block; } .emo-finance-badge { display: inline-block; padding: 2px 8px; font-size: 0.7rem; font-weight: 700; border-radius: 4px; margin-right: 6px; } .emo-finance-badge--open { background: #e0e7ff; color: #3730a3; } .emo-finance-badge--approved { background: #fef3c7; color: #92400e; } .emo-finance-badge--paid { background: #d1fae5; color: #065f46; } .emo-finance-badge--warn { background: #fee2e2; color: #991b1b; } .emo-finance-alert { margin: 12px 0; padding: 10px 14px; border-radius: var(--emo-radius, 8px); font-size: 0.875rem; } .emo-finance-alert--confidential { background: #fff7ed; border: 1px solid #fdba74; color: #9a3412; } .emo-finance-kpi-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; } .emo-finance-kpi { flex: 1 1 120px; padding: 10px 12px; border: 1px solid var(--emo-border); border-radius: var(--emo-radius, 8px); background: var(--emo-surface-1); } .emo-finance-kpi__label { display: block; font-size: 0.75rem; color: var(--emo-text-muted); } .emo-finance-kpi__value { font-weight: 600; } /* Finance — Network Production Flow (звіт production_flow) */ .emo-flow-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .emo-flow-head__title { font-size: 1rem; font-weight: 600; } .emo-flow-head__tools { display: flex; align-items: center; gap: 10px; } .emo-flow-nav { display: flex; align-items: center; gap: 4px; } .emo-flow-nav__label { font-size: 0.9rem; min-width: 110px; text-align: center; } .emo-flow-form { display: flex; align-items: center; gap: 6px; } .emo-flow-pace { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 10px; font-size: 13px; } .emo-flow-pace__pill { padding: 5px 12px; background: var(--emo-surface-2); border: 1px solid var(--emo-border); border-radius: var(--emo-radius-sm, 6px); } .emo-flow-pace__val { font-weight: 600; margin-left: 4px; } .emo-flow-pace__note { font-size: 0.72rem; align-self: center; } .emo-flow-chart { height: 280px; position: relative; } .emo-text-cat-total { color: var(--emo-cat-total); } .emo-text-cat-content { color: var(--emo-cat-content); } .emo-text-cat-ads { color: var(--emo-cat-ads); } /* daily grid table */ .emo-flow-table { white-space: nowrap; } .emo-flow-table .emo-col-div { border-right: 2px solid var(--emo-border); } .emo-flow-grp { text-align: center; background: var(--emo-surface-2); } .emo-flow-grp--ops { text-align: center; background: var(--emo-primary-bg); } .emo-flow-subhead { font-size: 10px; color: var(--emo-text-muted); } .emo-flow-royalty-head { text-align: right; background: var(--emo-surface-2); } .emo-flow-row--today { background: var(--emo-primary-bg); } .emo-flow-date { font-weight: 600; } .emo-flow-num { text-align: center; } .emo-flow-num--empty { color: var(--emo-text-muted); } .emo-flow-num--filled { font-weight: 600; } .emo-flow-num--ads { color: var(--emo-cat-ads); font-weight: 600; } .emo-flow-royalty { text-align: right; font-weight: 600; color: var(--emo-primary); } .emo-flow-empty { text-align: center; padding: 32px; } .emo-flow-total { background: var(--emo-text); color: var(--emo-surface-1); font-weight: 600; } .emo-flow-total__royalty { text-align: right; font-size: 1rem; background: var(--emo-primary); color: var(--emo-on-primary, #fff); } .emo-flow-help__summary { cursor: pointer; font-size: 0.8rem; } .emo-flow-help__body { margin-top: 8px; font-size: 0.8rem; line-height: 1.6; } /* Team */ .emo-team-page__body { display: flex; flex-direction: column; gap: 16px; } .emo-team-page__body > .emo-card { margin-bottom: 0; } .emo-team-toolbar__form { width: 100%; } .emo-team-toolbar__form .emo-field { min-width: 160px; } .emo-team-toolbar__links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; } .emo-team-kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; } .emo-team-kpi-strip .emo-kpi-tile { margin: 0; height: 100%; } .emo-team-sections { display: flex; flex-direction: column; gap: 16px; } .emo-team-section--flush { padding: 0; overflow: hidden; margin-bottom: 0; } .emo-team-section__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--emo-border); background: var(--emo-surface-1); } .emo-team-section__title { margin: 0; font-size: 0.95rem; font-weight: 600; line-height: 1.3; } .emo-team-section__count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; padding: 2px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; color: var(--emo-text-muted); background: var(--emo-surface-2); flex-shrink: 0; } .emo-team-section__table.emo-table-wrap { border: none; border-radius: 0; background: transparent; } .emo-team-table th, .emo-team-table td { vertical-align: middle; } .emo-team-table__col-name { min-width: 200px; width: 22%; } .emo-team-table__col-role { min-width: 180px; width: 24%; } .emo-team-table__col-kpi { min-width: 220px; width: 30%; } .emo-team-table__col-finance { min-width: 110px; width: 12%; text-align: right; } .emo-team-table__col-actions { width: 1%; white-space: nowrap; text-align: right; } .emo-team-table thead .emo-team-table__col-finance, .emo-team-table thead .emo-team-table__col-actions { text-align: right; } .emo-team-table .emo-team-table__col-name, .emo-team-table .emo-team-table__col-role, .emo-team-table .emo-team-table__col-kpi { vertical-align: top; } .emo-team-name-cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .emo-team-name-cell .emo-team-presence-inline { margin-top: 0; } .emo-team-name-cell__top { display: flex; align-items: center; gap: 10px; min-width: 0; } .emo-team-name-cell__name { font-weight: 600; font-size: 0.9rem; line-height: 1.35; min-width: 0; } .emo-team-role-cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .emo-team-role-cell__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .emo-team-role { font-weight: 600; font-size: 0.875rem; line-height: 1.3; } .emo-team-grade { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; line-height: 1.4; color: var(--emo-text-muted); background: var(--emo-surface-2); border: 1px solid var(--emo-border); } .emo-team-context { font-size: 0.8125rem; line-height: 1.35; color: var(--emo-text-muted); } .emo-team-kpi-cell { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .emo-team-kpi-cell__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 0.8125rem; line-height: 1.35; } .emo-team-kpi-cell__pct { font-weight: 600; color: var(--emo-text); } .emo-team-kpi-cell__pct--ops { font-weight: 500; color: var(--emo-text-muted); } .emo-team-kpi-cell__pct--maturing { font-weight: 600; font-size: 0.75rem; color: var(--emo-warn, #b45309); } .emo-team-kpi-metrics { display: flex; flex-wrap: wrap; gap: 6px; } .emo-team-kpi-metric { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 500; line-height: 1.35; color: var(--emo-text-muted); background: var(--emo-surface-2); border: 1px solid var(--emo-border); white-space: nowrap; } .emo-team-finance-cell { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 0; } .emo-team-finance-cell__amount { font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums; line-height: 1.3; text-decoration: none; color: var(--emo-text); } .emo-team-finance-cell__amount:hover { color: var(--emo-primary); } .emo-team-finance-cell__badge { font-size: 0.68rem; } .emo-team-finance-cell__maturing { font-size: 0.72rem; font-weight: 600; color: var(--emo-warn, #b45309); font-variant-numeric: tabular-nums; } /* NB: НЕ display:flex — клас на самому , а flex скасовує table-cell і клітинка випадає з сітки (кнопки наїжають на сусідні). Лишаємо table-cell + inline-кнопки. */ .emo-team-table__actions { white-space: nowrap; text-align: right; } .emo-team-table__actions > * { vertical-align: middle; } .emo-team-table__actions > * + * { margin-left: 6px; } .emo-team-table__profile-link { font-size: 0.8125rem; font-weight: 500; } .emo-team-row--me { background: color-mix(in srgb, var(--emo-primary) 8%, var(--emo-surface-1)); } .emo-team-row--me:hover { background: color-mix(in srgb, var(--emo-primary) 12%, var(--emo-surface-1)); } .emo-team-plan-bar { height: 6px; border-radius: 999px; background: var(--emo-surface-2, #e5e7eb); overflow: hidden; } .emo-team-plan-bar::after { content: ''; display: block; height: 100%; width: var(--emo-plan-pct, 0%); max-width: 100%; background: var(--emo-primary, #0f62fe); border-radius: 999px; } .emo-team-plan-bar--inline { margin-top: 6px; max-width: 120px; } .emo-team-plan-bar--stacked { display: flex; align-items: stretch; gap: 1.5px; height: 6px; border-radius: 999px; background: var(--emo-surface-2, #e5e7eb); overflow: hidden; } .emo-team-plan-bar--stacked::after { display: none; } .emo-team-plan-bar__seg { display: block; height: 100%; min-width: 0; flex-shrink: 0; } .emo-team-plan-bar__seg--fact { background: var(--emo-primary, #0f62fe); } .emo-team-plan-bar__seg--ops { background: var(--emo-review); } .emo-team-plan-bar__seg--maturing { background: var(--emo-cat-ads); } /* Team table — дизайн-полиш: чіткіший hover (канонічний #fafafa ледь видно), лівий акцент «мого» рядка, трохи повітря, вищі прогрес-смужки. */ .emo-team-table tbody tr { transition: background-color 0.12s ease; } /* Зебра — список довгий (≈153 рядки на проді), смугування різко полегшує скан. Парні рядки злегка тоновані; «мій» рядок і hover мають пріоритет (нижче). */ .emo-team-table tbody tr:nth-child(even):not(.emo-team-row--me) { background: color-mix(in srgb, var(--emo-text-muted) 3%, var(--emo-surface-1)); } .emo-team-table tbody tr:not(.emo-team-row--me):hover { background: color-mix(in srgb, var(--emo-primary) 5%, var(--emo-surface-1)); } /* Акцент «мого» рядка — на першій клітинці (box-shadow на із border-collapse ненадійний). */ .emo-team-row--me > td:first-child { box-shadow: inset 3px 0 0 var(--emo-primary); } .emo-team-table td { padding-top: 14px; padding-bottom: 14px; } .emo-team-plan-bar, .emo-team-plan-bar--stacked { height: 7px; } .emo-team-medals { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; } .emo-team-task-load { display: flex; align-items: center; gap: 8px; min-width: 0; } .emo-team-task-load__track { flex: 1; max-width: 96px; height: 4px; border-radius: 999px; background: var(--emo-border, #e2e8f0); overflow: hidden; } .emo-team-task-load__bar { height: 100%; border-radius: 999px; max-width: 100%; } .emo-team-task-load__bar--success { background: #22c55e; } .emo-team-task-load__bar--warn { background: #f59e0b; } .emo-team-task-load__bar--danger { background: #ef4444; } .emo-team-task-load__label { font-size: 0.72rem; color: var(--emo-text-muted); white-space: nowrap; } .emo-team-medal { font-size: 1rem; line-height: 1; } .emo-team-bonus-row { gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } @media (max-width: 768px) { .emo-team-table.emo-table--responsive tr { padding: 12px; margin-bottom: 0; } .emo-team-table.emo-table--responsive td { align-items: flex-start; padding: 10px 4px; } .emo-team-table.emo-table--responsive td.emo-team-table__col-finance, .emo-team-table.emo-table--responsive td.emo-team-table__col-actions { align-items: stretch; } .emo-team-finance-cell { align-items: flex-start; width: 100%; } .emo-team-table__actions { justify-content: flex-start; width: 100%; } .emo-team-toolbar__links { margin-left: 0; width: 100%; } } /* Team modal */ .emo-team-modal.emo-modal { max-width: min(720px, calc(100vw - 24px)); } .emo-modal { border: 1px solid var(--emo-border); border-radius: var(--emo-radius, 12px); padding: 0; max-width: min(640px, calc(100vw - 24px)); max-height: calc(100vh - 32px); overflow: hidden; box-shadow: var(--emo-shadow, 0 12px 40px rgba(0, 0, 0, 0.15)); background: var(--emo-surface-1); color: var(--emo-text); } .emo-modal::backdrop { background: rgba(15, 23, 42, 0.45); } .emo-modal__body { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; max-height: calc(100vh - 32px); overflow-y: auto; } .emo-modal__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--emo-border); } .emo-team-modal__header { padding-bottom: 8px; margin-bottom: 2px; border-bottom: 1px solid var(--emo-border); } .emo-team-modal__title { margin: 0; font-size: 1.05rem; font-weight: 600; } .emo-team-modal__subtitle { margin: 4px 0 0; font-size: 0.78rem; color: var(--emo-text-muted); } .emo-team-modal__grid { display: grid; gap: 8px 12px; } .emo-team-modal__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .emo-team-modal__fop { display: flex; align-items: flex-end; } .emo-team-modal__fop .emo-toggle-pill { margin-top: 0; width: 100%; justify-content: center; } .emo-team-modal__section { padding: 10px 12px; border: 1px solid var(--emo-border); border-radius: var(--emo-radius-sm, 8px); background: var(--emo-surface-2); } .emo-team-modal__section-title { margin: 0 0 8px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--emo-text-muted); } .emo-team-modal__hint { margin: 4px 0 0; font-size: 0.68rem; line-height: 1.35; color: var(--emo-text-muted); } .emo-team-matrix-select { width: 100%; min-height: 108px; padding: 4px 6px; font-size: 0.8125rem; } .emo-team-rubric-picker { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; } .emo-team-rubric-picker__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; } .emo-team-rubric-picker__head .emo-field-label { margin: 0; } .emo-team-rubric-search { flex: 1 1 160px; max-width: 220px; min-width: 120px; } .emo-team-rubric-picker__selected { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .emo-team-matrix-panel__tiers.emo-team-rubric-picker__selected { grid-template-columns: 1fr; gap: 10px; } .emo-team-matrix-panel__tier { min-height: auto; } .emo-team-matrix-panel__city-value { display: inline-block; width: 100%; max-width: 280px; padding: 6px 10px; border: 1px solid var(--emo-border); border-radius: var(--emo-radius-sm, 8px); font-size: 0.8125rem; background: var(--emo-surface-1); } .emo-team-matrix-panel__city-select { max-width: 280px; } .emo-team-matrix-panel__catalog, .emo-team-matrix-panel__admin { margin-top: 10px; border: 1px solid var(--emo-border); border-radius: var(--emo-radius-sm, 8px); background: var(--emo-surface-1); padding: 8px 10px; } .emo-team-matrix-panel__catalog-summary { cursor: pointer; font-size: 0.78rem; font-weight: 600; color: var(--emo-text-muted); list-style: none; } .emo-team-matrix-panel__catalog-summary::-webkit-details-marker { display: none; } .emo-team-rubric-picker__catalog-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; } .emo-team-rubric-picker__network-label { font-size: 0.78rem; font-weight: 600; color: var(--emo-text-muted); } .emo-team-rubric-network { flex: 1 1 180px; max-width: 260px; min-width: 140px; } .emo-team-rubric-picker__catalog-count { margin-left: auto; font-size: 0.72rem; color: var(--emo-text-muted); white-space: nowrap; } .emo-team-rubric-picker__pinned { border-bottom: 1px solid var(--emo-border); margin-bottom: 4px; padding-bottom: 4px; } .emo-team-rubric-picker__pinned-label { padding: 4px 10px 2px; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--emo-text-muted); } .emo-team-rubric-item--pinned { background: var(--emo-primary-bg); } .emo-team-rubric-item--orphan .emo-team-rubric-item__label { color: var(--emo-warning-text, #b45309); } .emo-team-rubric-item__orphan-note { font-size: 0.68rem; color: var(--emo-warning-text, #b45309); } .emo-team-rubric-chip__pub { display: inline-flex; align-items: center; justify-content: center; min-width: 1rem; margin-left: 4px; padding: 0 4px; border-radius: 999px; font-size: 0.62rem; font-weight: 600; line-height: 1.3; background: rgba(255, 255, 255, 0.55); } .emo-team-matrix-panel__catalog[open] .emo-team-rubric-picker__list { margin-top: 8px; max-height: min(42vh, 320px); overflow-y: auto; border: 1px solid var(--emo-border); border-radius: var(--emo-radius-sm, 8px); background: var(--emo-surface-1); } .emo-team-matrix-panel-preview { pointer-events: none; user-select: none; } .emo-team-matrix-panel-preview .emo-team-modal__section { margin: 0; } .emo-team-matrix-panel-preview .emo-team-rubric-chip { cursor: default; } .emo-team-rubric-tier { padding: 8px; border: 1px solid var(--emo-border); border-radius: var(--emo-radius-sm, 8px); background: var(--emo-surface-1); min-height: 52px; } .emo-team-rubric-tier__label { display: block; margin-bottom: 6px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--emo-text-muted); } .emo-team-rubric-tier__count { font-weight: 600; color: var(--emo-primary); } .emo-team-rubric-tier__chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: 24px; } .emo-team-rubric-tier__empty { font-size: 0.75rem; color: var(--emo-text-muted); } .emo-team-rubric-chip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--emo-border); font-size: 0.72rem; cursor: pointer; background: var(--emo-surface-2); } .emo-team-rubric-chip--primary { border-color: color-mix(in srgb, var(--emo-primary) 45%, var(--emo-border)); background: var(--emo-primary-bg); color: var(--emo-primary); } .emo-team-rubric-chip--secondary { border-color: color-mix(in srgb, var(--emo-text-muted) 35%, var(--emo-border)); background: var(--emo-surface-2); } .emo-team-matrix-summary { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; } /* Матриця рубрик згорнута за замовчуванням — розвантажує щільну комірку «Роль». */ .emo-team-matrix-summary__fold > summary { cursor: pointer; list-style: none; line-height: 1.35; } .emo-team-matrix-summary__fold > summary::-webkit-details-marker { display: none; } .emo-team-matrix-summary__sum::before { content: '▸'; margin-right: 3px; font-size: 0.85em; } .emo-team-matrix-summary__fold[open] .emo-team-matrix-summary__sum::before { content: '▾'; } .emo-team-matrix-summary__fold > summary:hover { color: var(--emo-text); } .emo-team-matrix-summary__body { display: flex; flex-direction: column; gap: 4px; margin-top: 5px; } .emo-team-matrix-summary__city-name { color: var(--emo-text); font-weight: 500; } .emo-team-matrix-summary__tier { display: flex; flex-direction: column; gap: 4px; } .emo-team-matrix-summary__tier-label { display: block; } .emo-team-matrix-summary__chips { display: flex; flex-wrap: wrap; gap: 4px; } .emo-team-matrix-summary .emo-team-rubric-chip { font-size: 0.72rem; padding: 2px 7px; } .emo-team-rubric-picker__list { max-height: 200px; overflow-y: auto; border: 1px solid var(--emo-border); border-radius: var(--emo-radius-sm, 8px); background: var(--emo-surface-1); } .emo-team-rubric-picker__empty { margin: 0; padding: 12px; font-size: 0.8125rem; color: var(--emo-text-muted); text-align: center; } .emo-team-rubric-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--emo-border); } .emo-team-rubric-item:last-child { border-bottom: none; } .emo-team-rubric-item__meta { min-width: 0; display: flex; flex-direction: column; gap: 1px; } .emo-team-rubric-item__title-row { display: flex; align-items: center; gap: 6px; min-width: 0; } .emo-team-rubric-item__label { font-size: 0.8125rem; font-weight: 500; line-height: 1.25; min-width: 0; } .emo-team-rubric-item__pub-badge { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; padding: 0 5px; border-radius: 999px; font-size: 0.68rem; font-weight: 600; line-height: 1.35; color: var(--emo-primary); background: var(--emo-primary-bg); } .emo-team-rubric-item__pub-badge.is-zero { color: var(--emo-text-muted); background: var(--emo-surface-2); font-weight: 500; } .emo-team-rubric-item__network { font-size: 0.72rem; color: var(--emo-text-muted); } .emo-team-rubric-item__network--none { font-style: italic; } .emo-team-rubric-item__slug { font-size: 0.68rem; color: var(--emo-text-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .emo-team-rubric-item__tiers { display: flex; flex-shrink: 0; gap: 4px; } .emo-team-rubric-tier-btn { padding: 3px 8px; border: 1px solid var(--emo-border); border-radius: 999px; background: var(--emo-surface-2); font-size: 0.68rem; font-weight: 600; cursor: pointer; color: var(--emo-text-muted); white-space: nowrap; } .emo-team-rubric-tier-btn:hover { border-color: var(--emo-primary); color: var(--emo-primary); } .emo-team-rubric-tier-btn.is-active { border-color: var(--emo-primary); background: var(--emo-primary-bg); color: var(--emo-primary); } .emo-team-rubric-tier-btn.is-active[data-rubric-tier="secondary"] { border-color: color-mix(in srgb, var(--emo-text-muted) 50%, var(--emo-border)); background: var(--emo-surface-2); color: var(--emo-text); } @media (max-width: 640px) { .emo-team-modal__grid--2, .emo-team-rubric-picker__selected:not(.emo-team-matrix-panel__tiers) { grid-template-columns: 1fr; } .emo-team-rubric-item { flex-direction: column; align-items: stretch; } .emo-team-rubric-item__tiers { justify-content: flex-end; } } .emo-breadcrumb__sep { margin: 0 6px; color: var(--emo-muted, #94a3b8); } .emo-section-toolbar { margin-bottom: 16px; } .emo-team-mode-banner { padding: 8px 12px; } .emo-tasks-pilot-banner { margin: 0 0 12px; padding: 6px 10px; font-size: 0.8125rem; line-height: 1.4; border-radius: var(--emo-radius-sm, 8px); border: 1px solid color-mix(in srgb, var(--emo-primary) 22%, var(--emo-border)); background: color-mix(in srgb, var(--emo-primary) 7%, var(--emo-surface-1)); color: var(--emo-text-muted); display: flex; align-items: flex-start; gap: 8px; } .emo-section-presence { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; padding: 8px 10px; font-size: 0.8125rem; border-radius: var(--emo-radius-sm, 8px); border: 1px solid color-mix(in srgb, var(--emo-success-text, #198038) 20%, var(--emo-border)); background: color-mix(in srgb, var(--emo-success-text, #198038) 6%, var(--emo-surface-1)); } .emo-section-presence__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; } .emo-section-presence__row[hidden] { display: none !important; } .emo-section-presence__title { font-weight: 600; color: var(--emo-text-muted); white-space: nowrap; } .emo-section-presence__stack { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; } .emo-section-presence__avatar { position: relative; display: inline-flex; width: 26px; height: 26px; border-radius: 50%; overflow: visible; border: 2px solid var(--emo-surface-1); margin-left: -4px; background: var(--emo-surface-2); } .emo-section-presence__stack .emo-section-presence__avatar:first-child { margin-left: 0; } .emo-section-presence__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; } .emo-section-presence__avatar--initials span:first-child { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 0.65rem; font-weight: 700; color: var(--emo-primary); } .emo-section-presence__avatar .emo-online-dot { position: absolute; right: -1px; bottom: -1px; width: 8px; height: 8px; border-width: 1px; } .emo-section-presence__meta { flex: 1 1 180px; min-width: 0; } .emo-task-recent-activity { margin: -4px 0 10px; padding: 0 2px; } .emo-task-recent-activity__label { font-weight: 600; } .emo-tasks-pilot-banner__dot { width: 6px; height: 6px; margin-top: 0.42em; border-radius: 50%; background: var(--emo-primary); flex-shrink: 0; box-shadow: 0 0 0 2px color-mix(in srgb, var(--emo-primary) 22%, transparent); } .emo-sidebar__link--sub { padding-left: 28px; font-size: 0.85rem; } /* Heatmap */ /* Coverage heatmap (Аналітика — clicks по місту). Раніше клас не був визначений → клітинки без висоти = невидима сітка; aspect-ratio робить їх квадратними. */ .emo-heatmap { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 3px; } .emo-heatmap__cell { aspect-ratio: 1; min-height: 24px; border-radius: var(--emo-radius-sm); border: 1px solid var(--emo-border); } .emo-heatmap-wrap { overflow-x: auto; margin-top: 12px; } .emo-heatmap-header, .emo-heatmap-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; min-width: max-content; } .emo-heatmap-header__name, .emo-heatmap-row__name { flex: 0 0 140px; font-size: 0.8rem; } .emo-heatmap-header__days, .emo-heatmap-row__cells { display: inline-flex; gap: 2px; } .emo-heatmap-day-label { width: 10px; font-size: 0.55rem; text-align: center; color: var(--emo-text-muted); } .emo-heatmap-cell { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: #e5e7eb; } /* NB: палітра .emo-heatmap-cell--1..4 визначена нижче (секція Evaluation, ~L6219) і перебивала тутешню → тут видалено дубль. Timesheet і Evaluation хітмапи ділять класи .emo-heatmap-cell--N, тож виглядають однаково (за потреби різних палітр — розвести назви класів). */ .emo-heatmap-legend .emo-heatmap-cell { margin-right: 4px; vertical-align: middle; } /* Sidebar nav builder */ .emo-sidebar__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 12px 10px; } .emo-sidebar__brand-wrap { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .emo-sidebar__version { font-size: 0.66rem; color: var(--emo-text-muted); letter-spacing: 0.02em; white-space: nowrap; } .emo-sidebar__collapse { border: 1px solid var(--emo-border); background: var(--emo-surface-1); border-radius: 6px; padding: 4px 8px; cursor: pointer; } .emo-nav-badge { display: inline-block; min-width: 18px; padding: 0 5px; font-size: 0.65rem; font-weight: 700; border-radius: 10px; background: var(--emo-primary, #0f62fe); color: #fff; margin-left: 6px; text-align: center; } .emo-nav-badge--sm { font-size: 0.6rem; min-width: 14px; } body.emo-sidebar-collapsed .emo-sidebar { width: 56px; } body.emo-sidebar-collapsed .emo-main { margin-left: 56px; } body.emo-sidebar-collapsed .emo-sidebar__link-label, body.emo-sidebar-collapsed .emo-sidebar__group, body.emo-sidebar-collapsed .emo-sidebar__brand, body.emo-sidebar-collapsed .emo-sidebar__version, body.emo-sidebar-collapsed .emo-sidebar__team-badge, body.emo-sidebar-collapsed .emo-nav-badge { display: none; } body.emo-sidebar-collapsed .emo-sidebar__link { justify-content: center; padding: 10px 8px; } body.emo-sidebar-collapsed .emo-sidebar__head { justify-content: center; padding: 12px 8px; } body.emo-sidebar-collapsed .emo-sidebar__collapse { margin: 0 auto; } @media (max-width: 768px) { body.emo-sidebar-collapsed .emo-main { margin-left: 0; } .emo-sidebar__collapse { display: none; } } /* Timesheet */ .emo-timesheet-layout { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; } .emo-timesheet-main { flex: 1 1 640px; min-width: 0; } .emo-timesheet-sidebar { flex: 0 0 240px; } .emo-timesheet-scroll { overflow-x: auto; } /* Колонки клітинок = колонки заголовка: однакова сітка фіксованих 32px треків, тож кожен підпис легенди стоїть рівно над своєю цифрою. Клітинки вузькі — під число. */ .emo-timesheet-ops-grid { display: grid; grid-auto-flow: column; grid-auto-columns: 32px; gap: 4px; justify-content: start; } .emo-timesheet-op { width: 100%; height: 26px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; border: 1px solid var(--emo-border); border-radius: 4px; background: var(--emo-surface-2); } .emo-timesheet-op.has-data { background: #e0e7ff; font-weight: 600; } .emo-timesheet-input { width: 100%; height: 26px; padding: 2px; text-align: center; } .emo-timesheet-row--weekend { background: #fafafa; } .emo-timesheet-row--today { outline: 2px solid var(--emo-primary); outline-offset: -2px; } .emo-timesheet-row--locked input { opacity: 0.5; pointer-events: none; } .emo-timesheet-leader { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--emo-border); } .emo-timesheet-leader--me { font-weight: 600; } .emo-timesheet-matrix-wrap { overflow-x: auto; } .emo-timesheet-matrix__name { min-width: 140px; position: sticky; left: 0; background: var(--emo-surface-1); } .emo-timesheet-matrix__day { min-width: 28px; text-align: center; font-size: 0.7rem; } .emo-timesheet-matrix__cell { text-align: center; font-size: 0.75rem; } .emo-timesheet-matrix__day--weekend { color: #d97706; background: #fcfcfc; } .emo-timesheet-matrix__day--today { outline: 2px solid var(--emo-primary); } .emo-timesheet-matrix__cell--weekend { background: #fafafa; } .emo-timesheet-row--summary { background: #fffbeb; } /* Легенда заголовка — та сама 32px-сітка, що й клітинки → підписи над колонками. */ .emo-timesheet-legend { display: grid; grid-auto-flow: column; grid-auto-columns: 32px; gap: 4px; justify-content: start; margin-top: 4px; font-size: 0.56rem; font-weight: 600; color: #64748b; } .emo-timesheet-legend span { padding: 1px 0; background: #f1f5f9; border-radius: 3px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .emo-timesheet-legend--chief span:last-child { color: #d97706; } .emo-timesheet-help { margin-top: 12px; font-size: 0.8rem; } .emo-timesheet-help summary { cursor: pointer; font-weight: 600; } .emo-timesheet-leader__rank--top { color: #d97706; font-size: 0.9rem; } .emo-heatmap-cell--1 { background: #f0fdf4; } .emo-heatmap-cell--2 { background: #dcfce7; font-weight: 600; } .emo-heatmap-cell--3 { background: #bbf7d0; font-weight: 700; } .emo-heatmap-cell--4 { background: #86efac; font-weight: 700; } /* Evaluation */ .emo-evaluation-avg { padding: 10px 14px; border-radius: 8px; margin: 12px 0; font-size: 0.9rem; } .emo-evaluation-avg--ok { background: var(--emo-success-bg, #ecfdf5); border: 1px solid var(--emo-success-border, #a7f3d0); } .emo-evaluation-avg--bad { background: var(--emo-risk-bg, #fef2f2); border: 1px solid var(--emo-risk-border, #fecaca); } .emo-evaluation-avg--inline { display: inline-block; margin: 4px 0 0; padding: 6px 12px; font-size: 1.1rem; font-weight: 700; } .emo-eval-table thead tr { background: var(--emo-surface-2, #f3f4f6); } .emo-eval-col--author { width: 250px; } .emo-eval-col--score { width: 300px; } .emo-eval-user-card { display: flex; gap: 10px; align-items: flex-start; } .emo-eval-avatar { width: 32px; height: 32px; border-radius: 50%; background: #e0e7ff; color: #3730a3; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; } .emo-eval-toggle-details { display: block; margin-top: 4px; border: none; background: none; color: var(--emo-primary); font-size: 0.7rem; cursor: pointer; padding: 0; } .emo-score-picker { display: flex; gap: 4px; align-items: center; background: #f3f4f6; padding: 4px; border-radius: 6px; flex-wrap: wrap; } .emo-score-picker input[type="radio"] { display: none; } .emo-score-picker label { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; font-size: 11px; font-weight: 600; border: 1px solid transparent; border-radius: 4px; cursor: pointer; background: #fff; color: #666; } .emo-score-picker input:checked + label { color: #fff; border-color: transparent; } .emo-score-picker input[value="3"]:checked + label, .emo-score-picker input[value="3.5"]:checked + label { background: #f59e0b; } .emo-score-picker input[value="4"]:checked + label, .emo-score-picker input[value="4.5"]:checked + label { background: #3b82f6; } .emo-score-picker input[value="5"]:checked + label { background: #10b981; } .emo-eval-score-clear { border: none; background: #fff; color: #9ca3af; cursor: pointer; width: 28px; height: 28px; border-radius: 4px; font-size: 14px; } .emo-eval-score-clear:hover { color: #dc2626; background: #fee2e2; } .emo-eval-details-row { background: var(--emo-surface-2, #f8fafc); } .emo-eval-details-row--hidden { display: none; } .emo-eval-details-inner { padding: 8px 8px 8px 40px; } .emo-eval-details-label { font-size: 0.65rem; font-weight: 700; color: #666; margin-bottom: 8px; } .emo-eval-article-row { padding: 6px; border-bottom: 1px solid #eee; } .emo-eval-article-row--best { background: var(--emo-success-bg, #d1fae5) !important; } .emo-eval-log-table .emo-eval-log-row--mine { background: var(--emo-warn-bg, #fffbeb); } .emo-eval-article-main { display: flex; align-items: center; gap: 10px; } .emo-eval-article-title { font-size: 0.75rem; } .emo-eval-article-links { padding-left: 36px; display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; } .emo-best-select { position: relative; } .emo-best-select input[type="radio"] { opacity: 0; position: absolute; } .emo-best-select label { cursor: pointer; font-size: 16px; opacity: 0.25; filter: grayscale(100%); transition: 0.2s; } .emo-best-select input:checked + label { opacity: 1; filter: none; transform: scale(1.15); } .emo-mini-lang-badge { font-size: 9px; background: #fff; border: 1px solid #d1d5db; padding: 1px 4px; border-radius: 3px; text-decoration: none; color: #6b7280; font-weight: 600; text-transform: uppercase; } .emo-mini-lang-badge:hover { color: #2563eb; border-color: #2563eb; background: #eff6ff; } .emo-eval-footer { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--emo-border); } .emo-eval-footer-actions { display: flex; align-items: center; gap: 12px; } .emo-eval-save-status { font-size: 0.75rem; color: #6b7280; } .emo-eval-save-status--dirty { color: #d97706; } .emo-eval-log-actions { display: inline-flex; align-items: center; gap: 6px; } .emo-eval-log-remove-bonus { border: none; background: none; color: #d97706; font-size: 0.85rem; cursor: pointer; padding: 2px 4px; } .emo-eval-log-remove-bonus:hover { color: #b45309; } .emo-eval-log-delete { border: none; background: none; color: #dc2626; font-size: 1.2rem; font-weight: 700; cursor: pointer; } .emo-eval-bonus-title { color: #d97706; font-weight: 600; } /* Operational calendar */ .emo-calendar-wrapper { margin-top: 12px; } .emo-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; } .emo-cal-header { font-weight: 600; font-size: 0.75rem; color: var(--emo-text-muted); text-align: center; padding: 8px 0; text-transform: uppercase; } .emo-cal-header--weekend { color: #dc2626; } .emo-cal-day { min-height: 180px; padding: 10px; display: flex; flex-direction: column; border: 1px solid var(--emo-border); border-radius: 8px; background: var(--emo-surface-1); } .emo-cal-day--empty { visibility: hidden; min-height: 0; padding: 0; border: none; } .emo-cal-day--off { opacity: 0.75; background: #f9fafb; } .emo-cal-day--summary { border-color: #fbbf24; background: #fffbeb; } .emo-cal-day--today { outline: 2px solid var(--emo-primary); } .emo-cal-day-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; } .emo-cal-date-num { font-weight: 700; font-size: 1rem; } .emo-cal-deadline-pill { font-size: 0.65rem; padding: 2px 6px; background: #fee2e2; color: #b91c1c; border-radius: 4px; } .emo-cal-checklist { list-style: none; margin: 0 0 10px; padding: 0; flex: 1; font-size: 0.7rem; } .emo-cal-checklist li { margin-bottom: 4px; display: flex; gap: 4px; align-items: flex-start; } .emo-cal-controls { margin-top: auto; display: flex; flex-direction: column; gap: 6px; } @media (max-width: 1024px) { .emo-calendar-grid { gap: 6px; } .emo-cal-day { min-height: 140px; padding: 6px; } } @media (max-width: 640px) { .emo-calendar-grid { grid-template-columns: repeat(2, 1fr); } .emo-cal-header { display: none; } .emo-cal-day--empty { display: none; } } /* Mobile nav more drawer */ .emo-bottom-nav__more-wrap { position: relative; } .emo-bottom-nav__more-panel { display: none; position: fixed; bottom: 56px; left: 0; right: 0; background: var(--emo-surface-1); border-top: 1px solid var(--emo-border); padding: 12px 16px; z-index: 9001; box-shadow: 0 -4px 20px rgba(0,0,0,0.08); } .emo-bottom-nav__more-panel.is-open { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .emo-bottom-nav__more-panel a { padding: 10px 12px; border-radius: 8px; background: var(--emo-surface-2); text-decoration: none; color: inherit; font-size: 0.85rem; text-align: center; } .emo-sidebar__team-badge { font-size: 0.6rem; padding: 1px 5px; margin-left: 6px; background: #dbeafe; color: #1d4ed8; border-radius: 4px; font-weight: 600; } /* Компактна tier-позначка доступу в меню (заміна verbose access-hint; лише менеджер/адмін). */ .emo-sidebar__tier { flex-shrink: 0; font-size: 0.6rem; font-weight: 600; line-height: 1; padding: 2px 6px; border-radius: 999px; letter-spacing: 0.02em; color: var(--emo-text-muted); background: var(--emo-surface-2); border: 1px solid var(--emo-border); } .emo-sidebar__tier--editor { color: var(--emo-info-text); } .emo-sidebar__tier--manager { color: var(--emo-warn); } .emo-sidebar__tier--finance { color: var(--emo-ok); } .emo-sidebar__status-badge { flex-shrink: 0; font-size: 0.65rem; font-weight: 600; color: var(--emo-muted, #6b7280); margin-left: 4px; } .emo-sidebar__status-badge--ready { color: var(--emo-ok, #059669); font-size: 0.75rem; line-height: 1; } .emo-sidebar__status-badge--wip { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 1px 6px; border-radius: 999px; background: var(--emo-warn-soft, color-mix(in srgb, var(--emo-warn) 16%, transparent)); color: var(--emo-warn); } .emo-sidebar__status-badge--beta { color: var(--emo-warn); font-weight: 700; } /* wip-розділ трохи приглушений — щоб новачок бачив, що він ще готується */ .emo-sidebar__link--wip:not(.emo-sidebar__link--active) .emo-sidebar__link-label { opacity: 0.72; } body.emo-sidebar-collapsed .emo-sidebar__tier, body.emo-sidebar-collapsed .emo-sidebar__status-badge { display: none; } .emo-score-picker { display: flex; gap: 4px; flex-wrap: wrap; } .emo-score-picker input { display: none; } .emo-score-picker label span { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border: 1px solid var(--emo-border); border-radius: 4px; cursor: pointer; font-size: 0.8rem; } .emo-score-picker input:checked + span { background: var(--emo-primary); color: #fff; border-color: transparent; } .emo-persona-help { margin-bottom: 16px; border: 1px solid var(--emo-border); border-radius: 8px; overflow: hidden; } .emo-persona-help summary { padding: 12px 16px; cursor: pointer; font-weight: 600; } .emo-persona-help__body { padding: 12px 16px; border-top: 1px solid var(--emo-border); font-size: 0.85rem; color: var(--emo-text-muted); } .emo-persona-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; } .emo-persona-toolbar .emo-input { padding: 6px 8px; font-size: 0.8125rem; } .emo-persona-toolbar__search { flex: 1 1 200px; } .emo-persona-feed { display: flex; flex-direction: column; gap: 12px; } .emo-persona-card { border: 1px solid var(--emo-border); border-radius: 12px; background: var(--emo-surface-1, #fff); overflow: hidden; } .emo-persona-card:hover { border-color: var(--emo-primary-bg, #dbeafe); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05); } .emo-persona-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 12px 16px; } .emo-persona-card__toggle { display: flex; align-items: flex-start; gap: 10px; flex: 1; border: none; background: transparent; text-align: left; cursor: pointer; padding: 0; } .emo-persona-card__chevron { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid var(--emo-text-muted); margin-top: 10px; flex-shrink: 0; } .emo-persona-card__toggle[aria-expanded="true"] .emo-persona-card__chevron { transform: rotate(90deg); } .emo-persona-card__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .emo-persona-card__avatar--placeholder { display: inline-flex; align-items: center; justify-content: center; background: var(--emo-surface-2); font-weight: 700; } .emo-persona-avatar-upload { cursor: pointer; position: relative; } .emo-persona-owner-badge { display: inline-block; font-size: 0.7rem; padding: 2px 8px; border-radius: 10px; background: var(--emo-surface-2); color: var(--emo-text-muted); margin-left: 6px; } .emo-persona-card__body { padding: 16px; border-top: 1px solid var(--emo-border); background: #fafafa; display: flex; flex-direction: column; gap: 12px; } .emo-persona-card__footer { display: flex; gap: 8px; } .emo-persona-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 10px; border: 1px solid var(--emo-border); border-radius: 8px; background: var(--emo-surface-1); } .emo-persona-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; background: var(--emo-surface-2); font-size: 0.8rem; } .emo-persona-tag__remove { border: none; background: transparent; cursor: pointer; opacity: 0.6; padding: 0 2px; } .emo-persona-tags-input { border: none; outline: none; flex: 1; min-width: 100px; font-size: 0.85rem; background: transparent; } .emo-persona-vars { display: flex; flex-wrap: wrap; gap: 6px; } .emo-persona-var { font-family: monospace; font-size: 0.75rem; padding: 2px 6px; border: 1px solid var(--emo-border); border-radius: 4px; color: var(--emo-primary); cursor: pointer; } .emo-persona-sites-picker { max-height: 280px; overflow-y: auto; border: 1px solid var(--emo-border); border-radius: 8px; } .emo-persona-site-option { display: block; padding: 8px 12px; border-bottom: 1px solid var(--emo-border); cursor: pointer; } .emo-persona-site-option:last-child { border-bottom: none; } .emo-topbar__scope-mobile { display: none; flex: 1 1 auto; min-width: 0; } .emo-topbar__scope-select { width: 100%; max-width: 132px; } @media (max-width: 768px) { .emo-topbar__scope-mobile { display: block; } } /* Tom Select — emo.css loads after tom-select.default.min.css */ :root { --emo-ts-h: 36px; --emo-ts-h-compact: 32px; --emo-ts-h-sm: 30px; } .emo-filters-toolbar--compact, .emo-traffic-toolbar--compact { --emo-ts-h: var(--emo-ts-h-compact); } .emo-task-form, .emo-ads-claim-form { --emo-ts-h: var(--emo-ts-h-sm); } .emo-field .ts-wrapper, .emo-form-row .ts-wrapper, .emo-task-form__grid .ts-wrapper, .emo-ads-claim-form__top .ts-wrapper { width: 100%; min-width: 0; display: block !important; min-height: 0 !important; } .ts-wrapper.single .ts-control, .ts-wrapper.multi .ts-control { height: var(--emo-ts-h) !important; min-height: 0 !important; max-height: var(--emo-ts-h) !important; padding: 0 calc(8px + 1.35rem) 0 10px !important; border: 1px solid var(--emo-border) !important; border-radius: var(--emo-radius-sm) !important; background: var(--emo-surface-1) !important; background-image: none !important; color: var(--emo-text) !important; font-size: 0.9rem !important; line-height: calc(var(--emo-ts-h) - 2px) !important; box-sizing: border-box !important; box-shadow: none !important; display: flex !important; flex-wrap: nowrap !important; align-items: center !important; overflow: hidden !important; } .ts-wrapper.emo-ts--compact .ts-control { height: var(--emo-ts-h-compact) !important; max-height: var(--emo-ts-h-compact) !important; padding: 0 calc(8px + 1.25rem) 0 8px !important; font-size: 0.8125rem !important; line-height: calc(var(--emo-ts-h-compact) - 2px) !important; } .ts-wrapper.emo-ts--sm .ts-control { height: var(--emo-ts-h-sm) !important; max-height: var(--emo-ts-h-sm) !important; padding: 0 calc(8px + 1.25rem) 0 8px !important; font-size: 0.85rem !important; line-height: calc(var(--emo-ts-h-sm) - 2px) !important; } .ts-wrapper.emo-ts--compact.emo-ts--sm .ts-control { height: var(--emo-ts-h-compact) !important; max-height: var(--emo-ts-h-compact) !important; font-size: 0.8125rem !important; line-height: calc(var(--emo-ts-h-compact) - 2px) !important; } .ts-wrapper.single .ts-control > .item { line-height: 1.2 !important; padding: 0 !important; margin: 0 !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; flex: 1 1 auto; min-width: 0; } .ts-wrapper .ts-control > input { font-size: inherit !important; line-height: inherit !important; min-height: 0 !important; max-height: 100% !important; min-width: 0 !important; flex: 1 1 0 !important; padding: 0 !important; margin: 0 !important; } .ts-wrapper.single.has-items:not(.input-active):not(.dropdown-active) .ts-control > input, .ts-wrapper.single.has-items.input-hidden .ts-control > input { position: absolute !important; width: 1px !important; min-width: 0 !important; flex: 0 0 0 !important; opacity: 0 !important; pointer-events: none; } .ts-wrapper.single.focus .ts-control, .ts-wrapper.multi.focus .ts-control, .ts-wrapper.focus .ts-control { border-color: var(--emo-primary) !important; box-shadow: 0 0 0 2px var(--emo-primary-bg) !important; } .ts-wrapper.single .ts-control::after { margin-top: -2px; } .ts-dropdown { border: 1px solid var(--emo-border); background: var(--emo-surface-1); color: var(--emo-text); z-index: 120; } .ts-dropdown .option.active { background: var(--emo-primary-bg); color: var(--emo-primary); } .plugin-dropdown_input .dropdown-input { box-shadow: none !important; border-color: var(--emo-border) !important; padding: 6px 8px !important; font-size: 0.8125rem !important; } .emo-admin-subnav__link.is-active { background: var(--emo-primary); color: #fff; } @media (max-width: 768px) { .emo-thematic-actions-cell { min-width: 0; } .emo-thematic-url-stack { min-width: 0; width: 100%; } .emo-thematic-url-row { flex-direction: column; align-items: stretch; } .emo-thematic-url-row .emo-thematic-url { min-width: 0; width: 100%; flex: 1 1 auto; } .emo-thematic-actions__buttons { width: 100%; } .emo-thematic-actions__buttons .emo-btn { flex: 1 1 auto; } .emo-finance-receipt__head-side { width: 100%; justify-content: space-between; } } @media (max-width: 480px) { .emo-table--responsive td { flex-direction: column; align-items: flex-start; gap: 4px; } .emo-table--responsive td::before { margin-bottom: 2px; } .emo-pagination a, .emo-pagination span { min-width: 44px; text-align: center; } } /* --- Topbar prefs (theme + page guide) --- */ .emo-topbar__tools { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .emo-topbar__tool { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid var(--emo-border); border-radius: var(--emo-radius-sm); background: var(--emo-surface-1); color: var(--emo-text-muted); font-size: 0.8rem; font-weight: 500; font-family: inherit; cursor: pointer; line-height: 1.2; transition: background .15s, border-color .15s, color .15s; } .emo-topbar__tool:hover { background: var(--emo-surface-2); color: var(--emo-text); } .emo-topbar__tool--active, .emo-topbar__tool[aria-pressed="true"] { border-color: var(--emo-primary); background: var(--emo-primary-bg); color: var(--emo-primary); } .emo-topbar__tool-icon { font-size: 1rem; line-height: 1; } .emo-auth__prefs { position: fixed; top: 16px; right: 16px; z-index: 10; } /* --- Section FAQ links (розділи → Довідка) --- */ .emo-section-faq-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-size: 0.82rem; color: var(--emo-text-muted); padding: 8px 12px; border: 1px solid var(--emo-border); border-radius: 8px; background: var(--emo-surface-1); } .emo-section-faq-links__hub { font-weight: 600; color: var(--emo-text); } .emo-section-faq-links__sep { margin: 0 6px; color: var(--emo-border); user-select: none; } .emo-section-faq-links a:not(.emo-section-faq-links__hub) { color: var(--emo-link, #0f62fe); text-decoration: none; } .emo-section-faq-links a:hover { text-decoration: underline; } /* --- Section help (collapsed details, legacy) --- */ .emo-page-guide__summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; list-style: none; padding: 10px 14px; border: 1px solid var(--emo-border); border-radius: var(--emo-radius); background: var(--emo-surface-1); color: var(--emo-text-muted); } .emo-page-guide__summary::-webkit-details-marker { display: none; } .emo-page-guide[open] > .emo-page-guide__summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: transparent; color: var(--emo-text); } .emo-page-guide__panel { padding: 14px 16px; border: 1px solid var(--emo-border); border-top: 0; border-radius: 0 0 var(--emo-radius) var(--emo-radius); background: color-mix(in srgb, var(--emo-primary-bg) 55%, var(--emo-surface-1)); } .emo-page-guide__steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; } .emo-page-guide__step { display: flex; gap: 12px; align-items: flex-start; } .emo-page-guide__num { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--emo-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; } html[data-emo-theme="dark"] .emo-page-guide__num { color: var(--emo-on-primary, #0b1220); } .emo-page-guide__diagram { margin-top: 12px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--emo-primary) 22%, var(--emo-border)); overflow-x: auto; } .emo-page-guide__diagram .emo-matrix-guide__viz { margin: 0; } .emo-page-guide__diagram .emo-task-lifecycle { margin: 0; } .emo-page-guide__diagram .emo-wizard-diagram__steps-row--3, .emo-page-guide__diagram .emo-wizard-diagram__steps-row--4 { grid-template-columns: 1fr; } .emo-page-guide__diagram .emo-author-wizards-diagram { gap: 12px; } .emo-page-guide__diagram .emo-wizard-diagram__section-title { font-size: 0.82rem; } .emo-task-instructions__body .emo-wizard-diagram__steps-row--4 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 768px) { .emo-task-instructions__body .emo-wizard-diagram__steps-row--3, .emo-task-instructions__body .emo-wizard-diagram__steps-row--4 { grid-template-columns: 1fr; } } .emo-page-guide__footer { margin-top: 10px; } .emo-page-guide__footer a { font-size: 0.82rem; } /* --- Hints mode (topbar toggle → html[data-emo-hints="on"]) --- */ html[data-emo-hints="on"] [data-emo-hint] { outline: 2px dashed color-mix(in srgb, var(--emo-primary) 65%, transparent); outline-offset: 3px; border-radius: var(--emo-radius-sm, 6px); } html[data-emo-hints="on"] [data-emo-hint][data-emo-hint-label] { position: relative; } html[data-emo-hints="on"] [data-emo-hint][data-emo-hint-label]::after { content: attr(data-emo-hint-label); position: absolute; top: 0; left: 0; transform: translateY(calc(-100% - 4px)); max-width: min(240px, 90vw); padding: 3px 8px; font-size: 0.6875rem; font-weight: 600; line-height: 1.3; color: #fff; background: var(--emo-primary); border-radius: 4px; white-space: normal; z-index: 20; pointer-events: none; box-shadow: 0 2px 8px rgb(0 0 0 / 12%); } html[data-emo-theme="dark"] [data-emo-hints="on"] [data-emo-hint][data-emo-hint-label]::after { color: var(--emo-on-primary, #0b1220); } /* --- Editor matrix guide (team / FAQ) --- */ .emo-matrix-guide { margin-bottom: 16px; padding: 14px 16px; border: 1px solid var(--emo-border); border-radius: var(--emo-radius, 10px); background: var(--emo-surface-1); } .emo-matrix-guide--compact { padding: 0; border-color: color-mix(in srgb, var(--emo-primary) 28%, var(--emo-border)); background: color-mix(in srgb, var(--emo-primary) 6%, var(--emo-surface-1)); } .emo-matrix-guide__collapse { margin: 0; } .emo-matrix-guide__summary { display: flex; align-items: center; gap: 8px; padding: 12px 14px; cursor: pointer; font-weight: 600; font-size: 0.92rem; list-style: none; } .emo-matrix-guide__summary::-webkit-details-marker { display: none; } .emo-matrix-guide__collapse-body { padding: 0 14px 14px; } .emo-matrix-guide__title { margin: 0 0 6px; font-size: 1rem; } .emo-matrix-guide__steps { display: grid; gap: 10px; margin: 12px 0; } .emo-matrix-guide__step { display: flex; gap: 10px; align-items: flex-start; } .emo-matrix-guide__step-num { flex-shrink: 0; width: 1.5rem; height: 1.5rem; border-radius: 999px; background: var(--emo-primary); color: var(--emo-on-primary, #fff); font-size: 0.75rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .emo-matrix-guide__viz { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: stretch; margin: 14px 0; } @media (max-width: 768px) { .emo-matrix-guide__viz { grid-template-columns: 1fr; } .emo-matrix-guide__viz-arrow { transform: rotate(90deg); justify-self: center; } } /* Wrap variant for diagrams with more than the default 2 columns + arrow */ .emo-matrix-guide__viz--wrap { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; } .emo-matrix-guide__viz--wrap .emo-matrix-guide__viz-col { flex: 1 1 150px; } .emo-matrix-guide__viz--wrap .emo-matrix-guide__viz-arrow { padding-top: 2.2rem; } .emo-matrix-guide__viz-col { min-width: 0; } .emo-matrix-guide__viz-label { display: block; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--emo-muted); margin-bottom: 6px; } .emo-matrix-guide__viz-arrow { display: flex; align-items: center; font-size: 1.4rem; color: var(--emo-muted); padding-top: 1.5rem; } .emo-matrix-guide__mock-modal, .emo-matrix-guide__mock-task { border: 1px dashed var(--emo-border); border-radius: 8px; padding: 10px; background: var(--emo-surface-2, #f8fafc); min-height: 100%; } .emo-matrix-guide__mock-field { margin-bottom: 10px; } .emo-matrix-guide__mock-lbl { display: block; font-size: 0.72rem; color: var(--emo-muted); margin-bottom: 4px; } .emo-matrix-guide__mock-select { display: inline-block; padding: 4px 8px; border: 1px solid var(--emo-border); border-radius: 6px; font-size: 0.82rem; background: var(--emo-surface-1); } .emo-matrix-guide__mock-tier { margin-bottom: 8px; } .emo-matrix-guide__mock-tier:last-child { margin-bottom: 0; } .emo-matrix-guide__mock-tier-lbl { display: block; font-size: 0.72rem; color: var(--emo-muted); margin-bottom: 4px; } .emo-matrix-guide__mock-count { display: inline-block; min-width: 1rem; text-align: center; padding: 0 4px; border-radius: 999px; background: var(--emo-border); font-size: 0.68rem; } .emo-matrix-guide__mock-row { display: flex; justify-content: space-between; gap: 8px; font-size: 0.82rem; margin-bottom: 8px; } .emo-matrix-guide__mock-row--assignee { flex-wrap: wrap; align-items: flex-start; } .emo-matrix-guide__mock-assignee-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; justify-content: flex-end; text-align: right; } .emo-matrix-guide__mock-assignees { display: grid; gap: 6px; } .emo-matrix-guide__mock-assignee { display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--emo-border); font-size: 0.8rem; background: var(--emo-surface-1); } .emo-matrix-guide__mock-assignee--top { border-color: color-mix(in srgb, var(--emo-success, #198038) 45%, var(--emo-border)); background: color-mix(in srgb, var(--emo-success, #198038) 8%, var(--emo-surface-1)); } .emo-matrix-guide__mock-assignee--good { border-color: color-mix(in srgb, var(--emo-info, #0f62fe) 30%, var(--emo-border)); } .emo-matrix-guide__mock-assignee--warn-row { border-color: color-mix(in srgb, var(--emo-warning, #f97316) 45%, var(--emo-border)); background: color-mix(in srgb, var(--emo-warning, #f97316) 6%, var(--emo-surface-1)); } .emo-matrix-guide__mock-assignee--avoid { opacity: 0.72; border-color: color-mix(in srgb, var(--emo-danger, #da1e28) 45%, var(--emo-border)); background: color-mix(in srgb, var(--emo-danger, #da1e28) 5%, var(--emo-surface-1)); } .emo-matrix-guide__mock-assignee--dim { opacity: 0.55; } .emo-matrix-guide__mock-tier-num { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.65rem; font-weight: 700; background: var(--emo-border); color: var(--emo-text-muted); } .emo-matrix-guide__mock-assignee--top .emo-matrix-guide__mock-tier-num { background: color-mix(in srgb, var(--emo-success, #198038) 22%, var(--emo-border)); color: var(--emo-success-text, #198038); } .emo-matrix-guide__mock-assignee-main { display: grid; gap: 2px; min-width: 0; } .emo-matrix-guide__mock-assignee-badges { display: flex; flex-wrap: wrap; gap: 4px; } .emo-matrix-guide__mock-assignee-name { font-weight: 600; } .emo-matrix-guide__mock-assignee-meta { font-size: 0.7rem; } .emo-matrix-guide__mock-badge { font-size: 0.65rem; padding: 2px 6px; border-radius: 999px; background: var(--emo-border); color: var(--emo-muted); font-weight: 600; } .emo-matrix-guide__mock-badge--lg { font-size: 0.7rem; } .emo-matrix-guide__mock-badge--ok { background: color-mix(in srgb, var(--emo-success, #198038) 18%, transparent); color: var(--emo-success-text, #198038); } .emo-matrix-guide__mock-badge--warn { background: color-mix(in srgb, var(--emo-warning, #f97316) 18%, transparent); color: var(--emo-warning-text, #c2410c); } .emo-matrix-guide__mock-badge--danger { background: color-mix(in srgb, var(--emo-danger, #da1e28) 16%, transparent); color: var(--emo-danger, #da1e28); } .emo-matrix-guide__mock-badge--city { background: color-mix(in srgb, var(--emo-info, #0f62fe) 14%, transparent); color: var(--emo-info-text, #0043ce); } .emo-matrix-guide__mock-badge--info { background: color-mix(in srgb, var(--emo-info) 14%, transparent); color: var(--emo-info-text); } .emo-matrix-guide__mock-badge--risk { background: color-mix(in srgb, var(--emo-risk) 16%, transparent); color: var(--emo-risk); } .emo-format-standards-table { min-width: 960px; font-size: 0.78rem; } .emo-format-standards-table th { white-space: nowrap; line-height: 1.35; } .emo-format-standards-table td { white-space: nowrap; } .emo-format-standards-table td:nth-child(2) { white-space: normal; min-width: 8rem; } .emo-matrix-guide__priority-ladder { margin: 0 0 10px; padding-left: 1.1rem; display: grid; gap: 4px; } .emo-matrix-guide__assignee-priority { display: flex; flex-direction: column; gap: 10px; } .emo-matrix-guide__priority-mark { margin-left: 4px; font-size: 0.9em; } .emo-matrix-guide__priority-mark--warn { color: var(--emo-warning-text, #c2410c); } .emo-matrix-guide__priority-mark--avoid { color: var(--emo-danger, #da1e28); } .emo-matrix-guide__assignee-priority-more { margin-top: 2px; } .emo-matrix-guide__viz-caption { margin-top: 8px; } .emo-matrix-guide__viz-col--assignees { min-width: min(100%, 280px); } .emo-matrix-guide__rules { margin-top: 12px; } .emo-matrix-guide__rules-subhead { margin-top: 14px; } .emo-matrix-guide__rules-list { margin: 8px 0 0; padding-left: 1.2rem; } .emo-matrix-guide__rules-list--ordered { list-style: decimal; } .emo-matrix-guide__flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--emo-border); } .emo-matrix-guide__flow-node { padding: 6px 10px; border-radius: 999px; border: 1px solid var(--emo-border); font-size: 0.78rem; font-weight: 600; background: var(--emo-surface-1); } .emo-matrix-guide__flow-node--accent { border-color: var(--emo-primary); background: color-mix(in srgb, var(--emo-primary) 12%, var(--emo-surface-1)); color: var(--emo-primary); } .emo-matrix-guide__flow-line { flex: 1 1 12px; min-width: 12px; height: 2px; background: linear-gradient(90deg, var(--emo-border), var(--emo-primary), var(--emo-border)); border-radius: 1px; } @media (max-width: 480px) { .emo-matrix-guide__flow-line { display: none; } } /* --- FAQ guides (shared with matrix guide) --- */ .emo-faq-toc { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; } .emo-faq-toc__section { display: flex; flex-direction: column; gap: 6px; } .emo-faq-toc__group { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 0; padding: 0; list-style: none; } .emo-faq-toc__heading { margin: 0; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--emo-muted); } .emo-faq-toc__section + .emo-faq-toc__section { margin-top: 4px; } .emo-faq-toc a { font-size: 0.82rem; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--emo-border); background: var(--emo-surface-1); text-decoration: none; } .emo-faq-toc a:hover { border-color: var(--emo-primary); color: var(--emo-primary); } .emo-faq-section { margin-bottom: 20px; } .emo-faq-section__title { margin: 0 0 12px; padding-bottom: 6px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--emo-muted); border-bottom: 1px solid var(--emo-border); } .emo-faq-section__title:not(:first-child) { margin-top: 8px; } .emo-faq-guide__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 6px; } .emo-faq-guide__head .emo-matrix-guide__title { margin: 0; } .emo-faq-guide__updated { margin-top: 4px; font-style: italic; } .emo-task-verification-diagram__lanes { display: grid; gap: 14px; margin-top: 12px; } @media (min-width: 1024px) { .emo-task-verification-diagram__lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .emo-task-verification-diagram--compact .emo-task-verification-diagram__lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .emo-task-verification-diagram__lane { border: 1px solid var(--emo-border); border-radius: var(--emo-radius, 8px); padding: 12px; background: var(--emo-surface, #fff); } .emo-task-verification-diagram__lane--editor { border-color: color-mix(in srgb, var(--emo-primary, #2563eb) 35%, var(--emo-border)); } .emo-task-verification-diagram__lane-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; } .emo-task-verification-diagram__lane-num { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 999px; background: var(--emo-muted-bg, #f3f4f6); font-size: 0.75rem; font-weight: 700; flex-shrink: 0; } .emo-task-verification-diagram__flow { margin-top: 14px; } .emo-faq-audience { display: flex; flex-wrap: wrap; gap: 4px; } .emo-faq-audience--block { margin-bottom: 10px; } .emo-faq-payment__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 8px; } .emo-faq-payment__head h3 { margin: 0; } .emo-faq-flow__track { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; } .emo-faq-flow__node { flex: 1 1 88px; min-width: 72px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--emo-border); background: var(--emo-surface-1); text-align: center; } .emo-faq-flow__node--editor { border-color: color-mix(in srgb, var(--emo-primary) 40%, var(--emo-border)); background: color-mix(in srgb, var(--emo-primary) 8%, var(--emo-surface-1)); } .emo-faq-flow__node--ok { border-color: color-mix(in srgb, var(--emo-success, #198038) 45%, var(--emo-border)); background: color-mix(in srgb, var(--emo-success, #198038) 10%, var(--emo-surface-1)); } .emo-faq-flow__node-title { display: block; font-size: 0.8rem; font-weight: 700; } .emo-faq-flow__node-hint { display: block; font-size: 0.68rem; color: var(--emo-muted); margin-top: 2px; } .emo-faq-flow__arrow { color: var(--emo-muted); font-size: 1.1rem; flex-shrink: 0; } .emo-faq-mock-card { padding: 10px; border: 1px solid var(--emo-border); border-radius: 8px; background: var(--emo-surface-1); display: grid; gap: 6px; } .emo-faq-mock-pills { display: flex; flex-wrap: wrap; gap: 4px; } .emo-faq-mock-pill { font-size: 0.68rem; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--emo-primary) 14%, var(--emo-surface-2)); color: var(--emo-primary); font-weight: 600; } a.emo-faq-mock-pill { text-decoration: none; } a.emo-faq-mock-pill:hover { opacity: 0.85; } .emo-faq-mock-pill--muted { background: var(--emo-border); color: var(--emo-muted); font-weight: 500; } .emo-faq-mock-pill--active { border: 1px solid color-mix(in srgb, var(--emo-primary) 45%, var(--emo-border)); background: color-mix(in srgb, var(--emo-primary) 18%, var(--emo-surface-1)); } .emo-faq-mock-pill--done { border: 1px solid color-mix(in srgb, var(--emo-success-text, #198038) 35%, var(--emo-border)); background: color-mix(in srgb, var(--emo-success-text, #198038) 10%, var(--emo-surface-1)); color: var(--emo-muted); font-weight: 500; } .emo-article-setup-diagram__seo { border-color: color-mix(in srgb, var(--emo-primary) 35%, var(--emo-border)); } /* --- FAQ wizard diagrams (topics + article setup) --- */ .emo-wizard-diagram { display: grid; gap: 10px; } .emo-wizard-diagram__lead { margin-bottom: 4px; } .emo-wizard-diagram__section-title { margin: 0 0 8px; font-size: 0.88rem; font-weight: 700; } .emo-wizard-diagram__section-title .emo-muted { font-weight: 500; } .emo-wizard-diagram__stepper { margin-bottom: 4px; } .emo-wizard-diagram__steps-row { display: grid; gap: 8px; align-items: start; } .emo-wizard-diagram__steps-row--3 { grid-template-columns: repeat(3, 1fr); } .emo-wizard-diagram__steps-row--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1024px) { .emo-wizard-diagram__steps-row--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .emo-wizard-diagram__steps-row--3, .emo-wizard-diagram__steps-row--4 { grid-template-columns: 1fr; } } .emo-wizard-diagram__step { min-width: 0; } .emo-wizard-diagram__note { margin-top: 8px; } .emo-matrix-guide__mock-select--tall { min-height: 2.4em; } .emo-faq-mock-ai-toolbar { margin: 6px 0; flex-wrap: wrap; } .emo-faq-mock-json-paste { margin-top: 6px; font-size: 0.75rem; } .emo-faq-mock-json-code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.6875rem; margin-bottom: 6px; } .emo-matrix-guide__mock-matrix-summary { max-width: 220px; } .emo-faq-mock-checks { display: grid; gap: 2px; margin: 0; } .emo-faq-mock-ai-box { margin: 6px 0; padding: 8px 10px; border: 1px solid var(--emo-border); border-radius: var(--emo-radius-sm, 8px); background: color-mix(in srgb, var(--emo-primary) 6%, var(--emo-surface-1)); } .emo-faq-mock-check { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start; font-size: 0.78rem; padding: 4px 0; border-top: 1px solid var(--emo-border); } .emo-faq-mock-check:first-child { border-top: 0; padding-top: 0; } .emo-faq-mock-check input { margin-top: 3px; accent-color: var(--emo-primary); } .emo-faq-mock-check--on { color: var(--emo-text); } .emo-faq-mock-check--on strong { color: var(--emo-primary); } .emo-faq-mock-check__hint { display: block; font-size: 0.68rem; color: var(--emo-muted); margin-top: 1px; } .emo-author-wizards-diagram { display: grid; gap: 16px; } .emo-author-wizards-diagram__bridge { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 4px 0; } .emo-author-wizards-diagram__block + .emo-author-wizards-diagram__block { padding-top: 4px; border-top: 1px dashed color-mix(in srgb, var(--emo-primary) 25%, var(--emo-border)); } .emo-create-panel-diagram { display: grid; gap: 10px; } .emo-create-panel-diagram__lane { display: grid; gap: 6px; } .emo-create-panel-diagram__lane-title { margin-bottom: 2px; } .emo-create-panel-diagram__or { text-align: center; font-size: 0.72rem; color: var(--emo-muted); } .emo-task-create-diagram__drawer { min-width: 0; } .emo-tasks-full-flow { display: grid; gap: 12px; } .emo-tasks-full-flow__block + .emo-tasks-full-flow__block { padding-top: 4px; border-top: 1px dashed color-mix(in srgb, var(--emo-primary) 25%, var(--emo-border)); } @media (max-width: 768px) { .emo-task-create-diagram { grid-template-columns: 1fr; } .emo-task-create-diagram .emo-matrix-guide__viz-arrow { transform: rotate(90deg); justify-self: center; } } .emo-row-workflow-wizards { display: grid; gap: 10px; } .emo-row-workflow-wizards__track { margin-bottom: 4px; } .emo-row-workflow-wizards__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; } .emo-row-workflow-wizards--compact .emo-row-workflow-wizards__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .emo-author-wizards-diagram .emo-row-workflow-wizards--compact .emo-row-workflow-wizards__cards .emo-faq-mock-card { padding: 8px 10px; } @media (max-width: 768px) { .emo-row-workflow-wizards--compact .emo-row-workflow-wizards__cards { grid-template-columns: 1fr; } } /* --- Revision / home / ads FAQ diagrams --- */ .emo-revision-diagram__node--revision { border-color: color-mix(in srgb, var(--emo-risk, #da1e28) 45%, var(--emo-border)); background: color-mix(in srgb, var(--emo-risk, #da1e28) 10%, var(--emo-surface-1)); } .emo-revision-diagram__card { border-color: color-mix(in srgb, var(--emo-risk, #da1e28) 35%, var(--emo-border)); } .emo-revision-diagram__mini-stage { display: flex; align-items: center; gap: 2px; margin: 6px 0; } .emo-revision-diagram__mini-stage .emo-stage__dot { width: 8px; height: 8px; } .emo-revision-diagram__mini-stage .emo-stage__line { width: 14px; height: 2px; } .emo-revision-diagram__flow { margin-bottom: 10px; } .emo-revision-diagram__viz { margin: 0; } .emo-home-overview-diagram__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .emo-home-overview-diagram__card { padding: 8px 6px; border: 1px solid var(--emo-border); border-radius: 8px; background: var(--emo-surface-1); text-align: center; display: grid; gap: 2px; } .emo-home-overview-diagram__card strong { font-size: 1.1rem; color: var(--emo-primary); } .emo-home-overview-diagram__card span { font-size: 0.68rem; color: var(--emo-muted); } .emo-home-overview-diagram__card--muted { opacity: 0.85; } .emo-home-overview-diagram__nav { margin-top: 10px; } .emo-ads-diagram .emo-wizard-diagram__stepper { margin-bottom: 8px; } .emo-faq-sprint-rows { display: grid; gap: 6px; margin-top: 6px; } .emo-faq-sprint-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 0.78rem; padding: 4px 0; border-bottom: 1px dashed var(--emo-border); } .emo-faq-sprint-row:last-child { border-bottom: none; } .emo-faq-pub-bar { display: flex; height: 28px; border-radius: 6px; overflow: hidden; border: 1px solid var(--emo-border); margin-bottom: 12px; font-size: 0.65rem; font-weight: 700; } .emo-faq-pub-bar__seg { display: flex; align-items: center; justify-content: center; color: #fff; min-width: 0; padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .emo-faq-pub-bar__seg--base { background: #64748b; } .emo-faq-pub-bar__seg--index { background: #0f62fe; } .emo-faq-pub-bar__seg--keys { background: #198038; } .emo-faq-payment-crediting__flow { flex-wrap: wrap; margin-bottom: 14px; } .emo-faq-payment-crediting__viz { margin-top: 4px; } .emo-faq-payment-other__pills { margin-bottom: 8px; } .emo-faq-payment-dates__bar { margin-bottom: 10px; } /* --- Dark theme polish --- */ html[data-emo-theme="dark"] .emo-auth { background: linear-gradient(145deg, #1e3a5f 0%, var(--emo-surface-2) 55%); } html[data-emo-theme="dark"] .emo-sidebar { background: var(--emo-surface-1); border-color: var(--emo-border); } html[data-emo-theme="dark"] .emo-sidebar__link:hover, html[data-emo-theme="dark"] .emo-sidebar__link--active { background: color-mix(in srgb, var(--emo-primary) 18%, transparent); } html[data-emo-theme="dark"] .emo-card--danger { border-color: #7f1d1d; background: color-mix(in srgb, #7f1d1d 25%, var(--emo-surface-1)); } html[data-emo-theme="dark"] .emo-card--warn { background: color-mix(in srgb, var(--emo-warning-soft) 80%, var(--emo-surface-1)); } html[data-emo-theme="dark"] .emo-badge--muted { background: #374151; color: #d1d5db; } html[data-emo-theme="dark"] .emo-table tbody tr:hover { background: rgba(255, 255, 255, 0.04); } html[data-emo-theme="dark"] .emo-input, html[data-emo-theme="dark"] .emo-select, html[data-emo-theme="dark"] .emo-textarea { background: var(--emo-surface-2); color: var(--emo-text); border-color: var(--emo-border); } html[data-emo-theme="dark"] .emo-input::placeholder { color: #6b7280; } html[data-emo-theme="dark"] .ts-control { background: var(--emo-surface-2) !important; border-color: var(--emo-border) !important; color: var(--emo-text) !important; } html[data-emo-theme="dark"] .ts-dropdown { background: var(--emo-surface-1) !important; border-color: var(--emo-border) !important; color: var(--emo-text) !important; } html[data-emo-theme="dark"] .ts-dropdown .option.active { background: var(--emo-primary-bg) !important; color: var(--emo-primary) !important; } html[data-emo-theme="dark"] .emo-tab-pill--active .emo-tab-count { background: var(--emo-primary-bg); color: var(--emo-primary); } html[data-emo-theme="dark"] .emo-tab-pill--active.emo-tab-pill--color-blue { border-color: #3b82f6; background: #1e3a5f; color: #93c5fd; } html[data-emo-theme="dark"] .emo-tab-pill--active.emo-tab-pill--color-orange { border-color: #ea580c; background: #431407; color: #fdba74; } html[data-emo-theme="dark"] .emo-tab-pill--active.emo-tab-pill--color-green { border-color: #16a34a; background: #052e16; color: #86efac; } html[data-emo-theme="dark"] .emo-tab-pill--active.emo-tab-pill--color-red { border-color: #dc2626; background: #450a0a; color: #fca5a5; } html[data-emo-theme="dark"] .emo-tab-pill--active.emo-tab-pill--color-purple { border-color: #9333ea; background: #3b0764; color: #d8b4fe; } html[data-emo-theme="dark"] .emo-mobile-nav { background: var(--emo-surface-1); border-color: var(--emo-border); } html[data-emo-theme="dark"] .emo-overlay { background: rgba(0, 0, 0, 0.65); } html[data-emo-theme="dark"] .emo-skeleton { background: linear-gradient(90deg, #1f2937 25%, #374151 50%, #1f2937 75%); } html[data-emo-theme="dark"] code { background: rgba(255, 255, 255, 0.08); color: #e5e7eb; } html[data-emo-theme="dark"] .emo-home-action { background: var(--emo-surface-1); border-color: var(--emo-border); } html[data-emo-theme="dark"] .emo-drawer__panel, html[data-emo-theme="dark"] .emo-modal__panel { background: var(--emo-surface-1); color: var(--emo-text); } html[data-emo-theme="dark"] .emo-task-form-block { background: color-mix(in srgb, var(--emo-surface-1) 90%, #000); } html[data-emo-theme="dark"] .emo-toggle-pill { background: color-mix(in srgb, var(--emo-surface-2) 80%, #000); } html[data-emo-theme="dark"] .emo-task-create-card__head { background: linear-gradient( 135deg, color-mix(in srgb, var(--emo-primary) 14%, var(--emo-surface-1)) 0%, var(--emo-surface-1) 70% ); } html[data-emo-theme="dark"] .emo-task-create-card__footer { background: color-mix(in srgb, var(--emo-surface-1) 94%, transparent); } html[data-emo-theme="dark"] .emo-task-wizard-panel__head { background: linear-gradient( 135deg, color-mix(in srgb, var(--emo-primary) 14%, var(--emo-surface-1)) 0%, var(--emo-surface-1) 70% ); } html[data-emo-theme="dark"] .emo-task-wizard-panel__footer { background: color-mix(in srgb, var(--emo-surface-1) 94%, transparent); } html[data-emo-theme="dark"] .emo-task-wizard-step-pane__section--ai, html[data-emo-theme="dark"] .emo-task-wizard-ai-suggestions, html[data-emo-theme="dark"] .emo-task-wizard-summary--accent, html[data-emo-theme="dark"] .emo-task-ai-mode--auto { background: color-mix(in srgb, var(--emo-primary) 10%, var(--emo-surface-1)); } html[data-emo-theme="dark"] .emo-task-create-stepper.emo-stepper-wrap, html[data-emo-theme="dark"] .emo-task-wizard-panel .emo-stepper-wrap { background: color-mix(in srgb, var(--emo-primary) 10%, var(--emo-surface-1)); } html[data-emo-theme="dark"] .emo-task-wizard-site-check { background: color-mix(in srgb, var(--emo-warn) 12%, var(--emo-surface-1)); border-color: color-mix(in srgb, var(--emo-warn) 35%, var(--emo-border)); } /* ── Featured publications (holding top-5) ───────────────────────────── */ .emo-featured-list { display: flex; flex-direction: column; gap: 6px; } .emo-featured-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--emo-border); } .emo-featured-row:last-child { border-bottom: none; } .emo-featured-row__title { font-weight: 600; flex: 1 1 200px; min-width: 0; } .emo-featured-modal { width: min(640px, 94vw); } .emo-featured-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .emo-featured-modal__search { margin: 10px 0 6px; width: 100%; } .emo-featured-counter { margin-bottom: 8px; } .emo-featured-options { display: flex; flex-direction: column; gap: 4px; max-height: 48vh; overflow-y: auto; } .emo-featured-opt { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border: 1px solid var(--emo-border); border-radius: var(--emo-radius-sm); cursor: pointer; background: var(--emo-surface-1); } .emo-featured-opt:hover { background: var(--emo-surface-2); } .emo-featured-opt--on { border-color: var(--emo-primary); background: var(--emo-primary-bg); } .emo-featured-opt--off { opacity: 0.5; cursor: not-allowed; } .emo-featured-opt input { margin-top: 3px; } .emo-featured-opt__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .emo-featured-opt__title { font-weight: 600; } .emo-featured-opt__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .emo-featured-opt__reason { color: var(--emo-danger-text); font-size: 0.75rem; } /* ========================================================================= Utility layer (D1). Конвенція: нові стилі — через ці утиліти/токени, а не inline style="". Кольори статусів беруть наявні токени (--emo-risk/warn/ok). ========================================================================= */ /* Статус-текст */ .emo-text-danger { color: var(--emo-risk); } .emo-text-warning { color: var(--emo-warn); } .emo-text-ok { color: var(--emo-ok); } .emo-text-muted { color: var(--emo-text-muted); } .emo-text-strong { font-weight: 600; } /* Вирівнювання / поведінка тексту */ .emo-text-center { text-align: center; } .emo-text-right { text-align: right; } .emo-pre-wrap { white-space: pre-wrap; } .emo-clickable { cursor: pointer; } .emo-no-pointer { pointer-events: none; } /* Відступи — px-шкала під реальне вживання в blade. Аліаси -1/-2/-3 = 4/8/16px. */ .emo-mt-0 { margin-top: 0; } .emo-mt-4, .emo-mt-1 { margin-top: 4px; } .emo-mt-6 { margin-top: 6px; } .emo-mt-8, .emo-mt-2 { margin-top: 8px; } .emo-mt-10 { margin-top: 10px; } .emo-mt-12 { margin-top: 12px; } .emo-mt-14 { margin-top: 14px; } .emo-mt-16, .emo-mt-3 { margin-top: 16px; } .emo-mt-20 { margin-top: 20px; } .emo-mt-24 { margin-top: 24px; } .emo-mb-0 { margin-bottom: 0; } .emo-mb-4, .emo-mb-1 { margin-bottom: 4px; } .emo-mb-6 { margin-bottom: 6px; } .emo-mb-8, .emo-mb-2 { margin-bottom: 8px; } .emo-mb-10 { margin-bottom: 10px; } .emo-mb-12 { margin-bottom: 12px; } .emo-mb-14 { margin-bottom: 14px; } .emo-mb-16, .emo-mb-3 { margin-bottom: 16px; } .emo-mb-20 { margin-bottom: 20px; } .emo-mb-24 { margin-bottom: 24px; } /* Вертикальні відступи (margin: Y 0) */ .emo-my-8 { margin: 8px 0; } .emo-my-12 { margin: 12px 0; } .emo-my-16 { margin: 16px 0; } /* Розкладка (.emo-flex / .emo-flex-wrap визначені вище — тут дублі видалено) */ .emo-flex-col { display: flex; flex-direction: column; } .emo-items-center { align-items: center; } .emo-justify-between { justify-content: space-between; } .emo-gap-1 { gap: 0.25rem; } .emo-gap-2 { gap: 0.5rem; } .emo-gap-3 { gap: 1rem; } .emo-gap-6 { gap: 6px; } .emo-gap-12 { gap: 12px; } .emo-gap-24 { gap: 24px; } .emo-items-baseline { align-items: baseline; } .emo-items-end { align-items: flex-end; } .emo-items-start { align-items: flex-start; } .emo-flex-1 { flex: 1; } .emo-flex-none { flex: 0 0 auto; } .emo-relative { position: relative; } .emo-grid { display: grid; } .emo-d-block { display: block; } .emo-no-underline { text-decoration: none; } .emo-list-indent { padding-left: 1.2rem; } .emo-ml-4 { margin-left: 4px; } .emo-ml-6 { margin-left: 6px; } /* Ширини колонок таблиць (px) */ .emo-w-32 { width: 32px; } .emo-w-50 { width: 50px; } .emo-w-80 { width: 80px; } .emo-w-90 { width: 90px; } .emo-w-100 { width: 100px; } .emo-w-120 { width: 120px; } .emo-w-150 { width: 150px; } .emo-w-160 { width: 160px; } /* КП для клієнта — ширини полів форми (flex) */ .emo-cq-field { flex: 1; min-width: 240px; } .emo-cq-field--wide { flex: 1; min-width: 200px; max-width: 280px; } .emo-cq-field--100 { flex: 0 0 100px; } .emo-cq-field--120 { flex: 0 0 120px; } .emo-cq-field--160 { flex: 0 0 160px; } .emo-cq-field--180 { flex: 0 0 180px; } /* КП → «Де підняти ціну» — таблиця кандидатів на підвищення ціни */ .emo-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .emo-cq-raise-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--emo-gap-sm, 8px); flex-wrap: wrap; } .emo-cq-raise-site { font-weight: 600; color: var(--emo-text, #111827); text-decoration: none; } a.emo-cq-raise-site:hover { text-decoration: underline; } .emo-cq-raise-table th.emo-text-right, .emo-cq-raise-table td.emo-text-right { white-space: nowrap; } .emo-cq-raise-total td { border-top: 2px solid var(--emo-border, #d1d5db); background: var(--emo-surface-2, #f9fafb); } /* Адаптивна сітка «плиток» (auto-fit) */ .emo-grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.375rem 1rem; } /* NB: тут раніше був дубль .emo-table (padding:2px 0), що глобально клобачив канонічний .emo-table (~рядок 772, padding:12px 14px) і ламав відступи в усіх таблицях (Публікації/Команда тощо). Видалено — канонічний лишається єдиним. */ /* ========================================================================= A11y — доступність. focus-visible = лише Tab-навігація (не зачіпає клік мишею). ========================================================================= */ /* Текст лише для скрінрідерів (visually-hidden) — раніше клас вживався в blade, але не був визначений → текст показувався візуально (напр. «Вибір» у КП). */ .emo-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Видимий фокус-ринг для інтерактивних елементів (клавіатура) */ .emo-btn:focus-visible, .emo-sidebar__link:focus-visible, .emo-topbar__user:focus-visible, .emo-topbar__menu:focus-visible, .emo-tab:focus-visible, [role="tab"]:focus-visible, summary:focus-visible, .emo-pill:focus-visible, a:focus-visible, button:focus-visible, [tabindex]:focus-visible, .emo-radio-pill:has(input:focus-visible), .emo-checkbox-label:has(input:focus-visible) { outline: 2px solid var(--emo-primary); outline-offset: 2px; } /* Менше руху — вимикаємо переходи/анімації за бажанням користувача (vestibular) */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Реклама → Розміщення: чип рекламодавця + рядок редагування в таблиці */ .emo-adv-chip { border: 1px solid var(--emo-border); border-radius: var(--emo-radius-sm); padding: 6px 10px; background: var(--emo-surface-1); } .emo-adv-chip > summary { cursor: pointer; list-style: none; } .emo-adv-editrow > td { background: var(--emo-surface-2); }