:root {
    color-scheme: dark;
    --color-canvas: #0b0e14;
    --color-surface-1: #111620;
    --color-surface-2: #171d29;
    --color-surface-3: #202938;
    --color-border: #2b3648;
    --color-border-strong: #3b4b64;
    --color-text-primary: #f2f5f8;
    --color-text-secondary: #a8b4c4;
    --color-text-muted: #718096;
    --color-accent: #4dd7e8;
    --color-accent-soft: #163b45;
    --color-ai: #a78bfa;
    --color-ai-soft: #30264e;
    --color-success: #55d69a;
    --color-warning: #f4c96b;
    --color-danger: #ff7f8f;
    --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --text-xs: 0.72rem;
    --text-sm: 0.82rem;
    --text-md: 0.95rem;
    --text-lg: 1.25rem;
    --text-xl: 1.7rem;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --radius-sm: 0.4rem;
    --radius-md: 0.7rem;
    --radius-lg: 1rem;
    --radius-pill: 999px;
    --shadow-panel: 0 18px 42px rgb(0 0 0 / 20%);
    --shadow-focus: 0 0 0 3px rgb(77 215 232 / 28%);
    --focus-ring: 0 0 0 2px var(--color-canvas), 0 0 0 4px var(--color-accent);
    --motion-fast: 120ms;
    --motion-standard: 180ms;
    --motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --content-max: 90rem;
    --rail-wide: 15rem;
}

html {
    min-width: 18rem;
    background: var(--color-canvas);
}

body {
    min-width: 18rem;
    min-height: 100vh;
    margin: 0;
    color: var(--color-text-primary);
    background: radial-gradient(circle at 78% -10%, rgb(77 215 232 / 5%), transparent 30rem), var(--color-canvas);
    font-family: var(--font-sans);
    font-size: var(--text-md);
    line-height: 1.45;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button {
    margin: 0;
    color: inherit;
}

a {
    color: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

[hidden] {
    display: none !important;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: fixed;
    z-index: 20;
    top: var(--space-3);
    left: var(--space-3);
    padding: var(--space-2) var(--space-3);
    color: var(--color-canvas);
    background: var(--color-accent);
    border-radius: var(--radius-sm);
    transform: translateY(-180%);
    transition: transform var(--motion-fast) var(--motion-ease);
}

.skip-link:focus {
    transform: translateY(0);
}

.design-app {
    display: grid;
    grid-template-columns: var(--rail-wide) minmax(0, 1fr);
    min-height: 100vh;
}

.design-sidebar {
    display: flex;
    position: sticky;
    top: 0;
    flex-direction: column;
    justify-content: space-between;
    width: var(--rail-wide);
    height: 100vh;
    padding: var(--space-5) var(--space-3) var(--space-4);
    background: rgb(17 22 32 / 92%);
    border-right: 1px solid var(--color-border);
}

.sidebar-top,
.sidebar-bottom,
.primary-nav,
.secondary-nav {
    display: grid;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-2) var(--space-2) var(--space-6);
    color: inherit;
    text-decoration: none;
}

.brand-mark {
    display: grid;
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    place-items: center;
    color: var(--color-canvas);
    background: linear-gradient(145deg, var(--color-accent), #8df0da);
    border-radius: 0.6rem;
    box-shadow: 0 0 1.2rem rgb(77 215 232 / 18%);
    font-weight: 800;
}

.brand-copy,
.workspace-status-copy,
.user-copy {
    display: grid;
    min-width: 0;
}

.brand-name {
    font-size: 1rem;
    font-weight: 750;
    letter-spacing: -0.02em;
}

.brand-label,
.workspace-status-copy span,
.user-copy span {
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-label {
    margin: var(--space-3) var(--space-3) var(--space-2);
    color: var(--color-text-muted);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.primary-nav,
.secondary-nav {
    gap: var(--space-1);
}

.secondary-nav {
    margin-top: var(--space-6);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    min-height: 2.35rem;
    padding: 0 var(--space-3);
    color: var(--color-text-secondary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--text-sm);
    text-align: left;
    text-decoration: none;
    transition: color var(--motion-fast) var(--motion-ease), background var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease);
}

button.nav-item {
    width: 100%;
}

.nav-item:hover {
    color: var(--color-text-primary);
    background: rgb(255 255 255 / 4%);
    border-color: rgb(255 255 255 / 5%);
}

.nav-item.active,
.nav-item.is-active {
    color: var(--color-text-primary);
    background: linear-gradient(90deg, rgb(77 215 232 / 13%), rgb(77 215 232 / 3%));
    border-color: rgb(77 215 232 / 17%);
    box-shadow: inset 2px 0 0 var(--color-accent);
}

.nav-icon {
    display: inline-grid;
    flex: 0 0 1.1rem;
    width: 1.1rem;
    place-items: center;
    color: currentColor;
    font-family: var(--font-mono);
    font-size: 0.95rem;
}

.nav-count {
    min-width: 1.5rem;
    margin-left: auto;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-align: right;
}

.nav-count.is-accent {
    color: var(--color-accent);
}

.nav-dot,
.notification-dot {
    display: inline-block;
    width: 0.42rem;
    height: 0.42rem;
    margin-left: auto;
    background: var(--color-ai);
    border-radius: 50%;
    box-shadow: 0 0 0.65rem rgb(167 139 250 / 70%);
}

.workspace-status {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    margin: 0 0 var(--space-4);
    padding: var(--space-3);
    color: var(--color-text-secondary);
    background: rgb(85 214 154 / 4%);
    border: 1px solid rgb(85 214 154 / 13%);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
}

.workspace-status:hover {
    background: rgb(85 214 154 / 8%);
    border-color: rgb(85 214 154 / 23%);
}

.status-orb {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
}

.status-orb.is-online,
.app-status-orb {
    background: var(--color-success);
    box-shadow: 0 0 0.7rem rgb(85 214 154 / 65%);
}

.status-orb.is-processing {
    background: var(--color-accent);
    box-shadow: 0 0 0.7rem rgb(77 215 232 / 65%);
}

.status-orb.is-error {
    background: var(--color-danger);
    box-shadow: 0 0 0.7rem rgb(255 127 143 / 55%);
}

.workspace-status-copy strong,
.user-copy strong {
    overflow: hidden;
    color: var(--color-text-primary);
    font-size: var(--text-xs);
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.status-chevron {
    color: var(--color-text-muted);
    font-size: 1.2rem;
}

.user-chip {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    border-top: 1px solid var(--color-border);
}

.avatar {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    color: var(--color-accent);
    background: var(--color-accent-soft);
    border: 1px solid rgb(77 215 232 / 28%);
    border-radius: 50%;
    font-size: var(--text-sm);
    font-weight: 700;
}

.icon-button {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    padding: 0;
    place-items: center;
    color: var(--color-text-secondary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}

.icon-button:hover {
    color: var(--color-text-primary);
    background: var(--color-surface-3);
    border-color: var(--color-border);
}

.design-content {
    display: flex;
    min-width: 0;
    min-height: 100vh;
    flex-direction: column;
}

.design-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 4.25rem;
    padding: 0 clamp(var(--space-5), 4vw, var(--space-10));
    border-bottom: 1px solid rgb(43 54 72 / 70%);
}

.topbar-context {
    display: flex;
    align-items: center;
}

.topbar-context {
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.context-current {
    color: var(--color-text-secondary);
}

.context-divider {
    color: var(--color-border-strong);
}

kbd {
    margin-left: auto;
    padding: 0.12rem 0.35rem;
    color: var(--color-text-muted);
    background: var(--color-canvas);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    line-height: 1.2;
}

.notification-dot {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    width: 0.3rem;
    height: 0.3rem;
}

.design-main {
    position: relative;
    width: min(100%, var(--content-max));
    flex: 1;
    margin: 0 auto;
    padding: clamp(var(--space-6), 5vw, var(--space-10)) clamp(var(--space-5), 4vw, var(--space-10)) 6rem;
}

.design-footer {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) clamp(var(--space-5), 4vw, var(--space-10));
    color: var(--color-text-muted);
    border-top: 1px solid rgb(43 54 72 / 70%);
    font-size: var(--text-xs);
}

.design-footer a,
.cookie-notice a,
.cookie-consent-banner a {
    color: var(--color-text-secondary);
    text-underline-offset: 0.2em;
}

.design-footer a:hover,
.cookie-notice a:hover,
.cookie-consent-banner a:hover {
    color: var(--color-accent);
}

.status-panel,
.page-panel,
.panel,
.surface-panel {
    color: var(--color-text-primary);
    background: linear-gradient(145deg, rgb(23 29 41 / 92%), rgb(17 22 32 / 96%));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-panel);
}

.status-panel {
    margin-bottom: var(--space-4);
    padding: var(--space-4) var(--space-5);
}

.status-panel[data-state="authenticated"] {
    border-color: rgb(85 214 154 / 35%);
    background: rgb(85 214 154 / 6%);
}

.status-panel[data-state="api-error"],
.status-panel[data-state="configuration-error"] {
    border-color: rgb(255 127 143 / 42%);
    background: rgb(255 127 143 / 8%);
}

.page-panel {
    min-width: 0;
    padding: var(--space-5);
}

.page-panel > #page-content-body {
    min-width: 0;
}

.inline-error {
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    color: var(--color-danger);
    background: rgb(255 127 143 / 8%);
    border: 1px solid rgb(255 127 143 / 28%);
    border-radius: var(--radius-sm);
}

.empty-message,
.muted-label,
.form-help {
    color: var(--color-text-muted);
}

.secondary-button,
.danger-button,
.page-panel button[type="submit"],
.page-panel button:not(.icon-button) {
    margin: 0;
    min-height: 2.4rem;
    padding: 0 var(--space-4);
    color: var(--color-text-secondary);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: 650;
}

.secondary-button:hover,
.page-panel button[type="submit"]:hover,
.page-panel button:not(.icon-button):hover {
    color: var(--color-text-primary);
    background: var(--color-surface-3);
    border-color: var(--color-border-strong);
}

.danger-button {
    color: var(--color-danger);
    border-color: rgb(255 127 143 / 28%);
}

.danger-button:hover {
    background: rgb(255 127 143 / 10%);
}

input,
select,
textarea,
details > summary {
    color: var(--color-text-primary);
    background: var(--color-canvas);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

input,
select,
textarea {
    width: 100%;
    padding: var(--space-2) var(--space-3);
}

input::placeholder,
textarea::placeholder {
    color: var(--color-text-muted);
}

label,
.agenda-filter-label {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: 600;
}

.stacked-form,
.item-form,
.mail-search-form {
    color: var(--color-text-secondary);
}

.chat-panel,
.recap-section,
.item-create-section,
.mail-import-section,
.items-section,
.agenda-list-view,
.agenda-calendar-view,
.agenda-unscheduled {
    margin-top: var(--space-5);
    padding: var(--space-5);
    background: rgb(17 22 32 / 72%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.app-header-footer {
    display: contents;
}

.chat-workspace {
    display: grid;
    grid-template-columns: minmax(12rem, 0.35fr) minmax(0, 1fr);
    gap: var(--space-4);
}

.chat-conversation-nav,
.chat-active-pane {
    min-width: 0;
}

.chat-conversation-nav {
    padding: var(--space-4);
    background: var(--color-surface-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.chat-conversation-list {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.chat-conversation-list button {
    width: 100%;
    min-height: 2.5rem;
    padding: var(--space-2) var(--space-3);
    color: var(--color-text-secondary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: left;
}

.chat-conversation-list button:hover,
.chat-conversation-list button[aria-current="true"] {
    color: var(--color-text-primary);
    background: var(--color-surface-3);
    border-color: var(--color-border);
}

.chat-message-log {
    display: grid;
    gap: var(--space-3);
    max-height: 32rem;
    overflow: auto;
    padding: var(--space-4);
    background: var(--color-canvas);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.chat-message {
    padding: var(--space-3);
    background: var(--color-surface-2);
    border-radius: var(--radius-sm);
}

.chat-message-user {
    border-left: 2px solid var(--color-accent);
}

.chat-message-assistant {
    border-left: 2px solid var(--color-ai);
}

.cookie-notice,
.cookie-consent-banner {
    display: flex;
    position: fixed;
    z-index: 10;
    right: var(--space-5);
    bottom: var(--space-5);
    left: max(var(--space-5), calc(var(--rail-wide) + var(--space-5)));
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    max-width: 58rem;
    margin: auto;
    padding: var(--space-3) var(--space-4);
    color: var(--color-text-primary);
    background: rgb(23 29 41 / 96%);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-panel);
}

.cookie-consent-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    width: 100%;
}

.cookie-consent-content h2,
.cookie-consent-content p {
    margin: 0;
}

.cookie-consent-content h2 {
    font-size: var(--text-sm);
}

.cookie-consent-content p {
    max-width: 54rem;
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
}

.cookie-consent-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--space-3);
}

.cookie-consent-actions button {
    min-height: 2.2rem;
    padding: 0 var(--space-3);
    color: var(--color-canvas);
    background: var(--color-accent);
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--text-xs);
    font-weight: 700;
    white-space: nowrap;
}

.cookie-consent-status {
    color: var(--color-danger) !important;
}

.view-panel,
.page-panel {
    min-width: 0;
}

.eyebrow {
    margin: 0 0 var(--space-2);
    color: var(--color-text-muted);
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.eyebrow-ai {
    color: var(--color-ai);
}

.page-heading,
.panel-heading,
.section-heading,
.assistant-preview-footer,
.topic-toolbar,
.heading-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.page-heading {
    align-items: end;
    margin-bottom: var(--space-8);
}

.page-heading h1,
.panel-heading h2,
.section-heading h2 {
    margin: 0;
    color: var(--color-text-primary);
    letter-spacing: -0.03em;
}

.page-heading h1 {
    max-width: 42rem;
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1.08;
}

.page-lede {
    max-width: 46rem;
    margin: var(--space-3) 0 0;
    color: var(--color-text-secondary);
}

.heading-actions {
    flex: 0 0 auto;
}

.heading-actions button,
.heading-actions .button {
    margin: 0;
}

.button,
.text-button,
.panel-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
}

.button {
    margin: 0;
    min-height: 2.55rem;
    padding: 0 var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: 700;
}

.button-primary {
    color: var(--color-canvas);
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.button-primary:hover {
    background: #86e7ef;
    border-color: #86e7ef;
}

.button-secondary {
    color: var(--color-text-secondary);
    background: var(--color-surface-2);
}

.button-secondary:hover {
    color: var(--color-text-primary);
    background: var(--color-surface-3);
}

.text-button,
.panel-link {
    padding: 0;
    color: var(--color-accent);
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: 700;
}

.text-button:hover,
.panel-link:hover {
    color: #9af3f5;
}

.signal-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.signal-card {
    display: grid;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-5);
    background: linear-gradient(145deg, rgb(32 41 56 / 82%), rgb(17 22 32 / 96%));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.signal-card-ai {
    border-color: rgb(167 139 250 / 28%);
    background: linear-gradient(145deg, rgb(48 38 78 / 35%), rgb(17 22 32 / 96%));
}

.signal-card-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.signal-label,
.signal-detail {
    font-size: var(--text-sm);
}

.signal-label {
    color: var(--color-accent);
}

.signal-detail {
    color: var(--color-text-muted);
}

.signal-value {
    color: var(--color-text-primary);
    font-family: var(--font-mono);
    font-size: clamp(1.6rem, 4vw, 2.25rem);
    line-height: 1;
}

.signal-icon {
    display: grid;
    width: 1.8rem;
    height: 1.8rem;
    place-items: center;
    border-radius: 0.55rem;
    font-family: var(--font-mono);
}

.signal-icon.is-cyan,
.agenda-line.is-cyan {
    color: var(--color-accent);
    background: var(--color-accent-soft);
}

.signal-icon.is-amber,
.agenda-line.is-amber {
    color: var(--color-warning);
    background: rgb(244 201 107 / 13%);
}

.signal-icon.is-violet,
.agenda-line.is-violet {
    color: var(--color-ai);
    background: var(--color-ai-soft);
}

.dashboard-layout {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
}

.surface-panel {
    min-width: 0;
    padding: var(--space-5);
}

.panel-heading {
    align-items: start;
    margin-bottom: var(--space-5);
}

.panel-heading.compact {
    margin-bottom: var(--space-4);
}

.panel-heading h2 {
    font-size: var(--text-lg);
}

.topics-panel,
.dashboard-aside {
    min-width: 0;
}

.topics-panel {
    grid-column: span 2;
}

.dashboard-aside {
    display: grid;
    align-content: start;
    grid-column: span 1;
    gap: var(--space-5);
}

.topic-toolbar {
    align-items: stretch;
    margin-bottom: var(--space-4);
}

.filter-input {
    display: flex;
    align-items: center;
    flex: 1 1 12rem;
    gap: var(--space-2);
    min-width: 10rem;
    padding: 0 var(--space-3);
    color: var(--color-text-muted);
    background: var(--color-canvas);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.filter-input input {
    min-width: 0;
    padding-inline: 0;
    background: transparent;
    border: 0;
}

.chip-group {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1);
    background: var(--color-canvas);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.filter-chip {
    min-height: 2rem;
    padding: 0 var(--space-3);
    color: var(--color-text-muted);
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--text-xs);
    font-weight: 700;
}

.filter-chip:hover,
.filter-chip.is-selected {
    color: var(--color-text-primary);
    background: var(--color-surface-3);
}

.topic-list {
    display: grid;
    gap: var(--space-2);
}

.topic-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-4);
    background: rgb(17 22 32 / 68%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.topic-card h2,
.topic-card p {
    margin: 0;
}

.topic-card h2 {
    min-width: 0;
    font-size: var(--text-md);
}

.topic-card h2 a {
    color: var(--color-text-primary);
    text-decoration: none;
}

.topic-card h2 a:hover {
    color: var(--color-accent);
}

.topic-card-description {
    grid-column: 1 / -1;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.topic-card-details {
    display: flex;
    grid-column: 1 / -1;
    gap: var(--space-4);
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.topic-card-details div {
    display: flex;
    gap: var(--space-1);
}

.topic-card-details dt {
    font-weight: 700;
}

.topic-card-details dd {
    margin: 0;
}

.topic-card-actions {
    display: flex;
    align-items: start;
    gap: var(--space-2);
}

.topic-card-actions button {
    min-height: 2rem;
    padding: 0 var(--space-2);
    color: var(--color-text-muted);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--text-xs);
}

.list-status {
    min-height: 1.25rem;
    margin: var(--space-3) 0 0;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.onboarding-panel {
    margin-bottom: var(--space-5);
}

.onboarding-lede {
    margin: var(--space-2) 0 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.onboarding-steps {
    display: grid;
    gap: var(--space-3);
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
}

.onboarding-step {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: start;
    padding: var(--space-4);
    background: rgb(17 22 32 / 55%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.onboarding-step.is-complete {
    border-color: rgb(85 214 154 / 28%);
    background: rgb(85 214 154 / 6%);
}

.onboarding-step-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    color: var(--color-canvas);
    background: var(--color-accent);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 700;
}

.onboarding-step.is-complete .onboarding-step-marker {
    background: #55d69a;
}

.onboarding-step-copy {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
}

.onboarding-step-copy strong {
    font-size: var(--text-sm);
}

.onboarding-step-copy p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.onboarding-step-copy .button {
    justify-self: start;
}

.onboarding-step-status {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.onboarding-step.is-complete .onboarding-step-status {
    color: #55d69a;
}

.topic-list-empty {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.topic-list-empty-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

@media (max-width: 720px) {
    .onboarding-step {
        grid-template-columns: 2rem minmax(0, 1fr);
    }

    .onboarding-step-status {
        grid-column: 2;
    }
}

.agenda-preview-list {
    display: grid;
    gap: var(--space-2);
}

.agenda-preview-item {
    display: grid;
    grid-template-columns: 3.5rem 0.25rem minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    padding: var(--space-2) 0;
    color: inherit;
    text-decoration: none;
}

.agenda-preview-item:hover .agenda-preview-copy strong {
    color: var(--color-accent);
}

.agenda-time {
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

.agenda-line {
    width: 0.25rem;
    height: 2.4rem;
    border-radius: var(--radius-pill);
}

.agenda-preview-copy {
    display: grid;
    min-width: 0;
}

.agenda-preview-copy strong {
    overflow: hidden;
    font-size: var(--text-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agenda-preview-copy small {
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assistant-preview {
    border-color: rgb(167 139 250 / 25%);
}

.assistant-layout {
    display: grid;
    grid-template-columns: minmax(15rem, 0.34fr) minmax(0, 1fr);
    gap: var(--space-5);
}

.conversation-sidebar,
.assistant-panel {
    min-width: 0;
}

.conversation-sidebar {
    display: flex;
    min-height: 34rem;
    flex-direction: column;
}

.conversation-list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    overflow: auto;
    list-style: none;
}

.conversation-item {
    display: flex;
    align-items: stretch;
    gap: var(--space-1);
    min-width: 0;
}

.conversation-item button {
    min-width: 0;
    color: var(--color-text-secondary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: left;
}

.chat-conversation-open {
    display: grid;
    flex: 1;
    gap: var(--space-1);
    padding: var(--space-3);
}

.conversation-item:hover .chat-conversation-open,
.conversation-item.is-selected .chat-conversation-open {
    color: var(--color-text-primary);
    background: var(--color-surface-3);
    border-color: var(--color-border);
}

.chat-conversation-date {
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: 0.65rem;
}

.chat-conversation-preview {
    overflow: hidden;
    font-size: var(--text-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-conversation-delete {
    flex: 0 0 auto;
    min-width: 2rem;
    padding: 0 var(--space-2);
    font-size: var(--text-xs);
}

.conversation-sidebar-footer {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-4);
    color: var(--color-text-muted);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-xs);
}

.assistant-panel {
    display: flex;
    min-height: 34rem;
    flex-direction: column;
}

.assistant-panel-header,
.assistant-identity {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.assistant-panel-header {
    justify-content: space-between;
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.assistant-identity > div {
    display: grid;
}

.assistant-identity span:not(.ai-orbit) {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.assistant-context-details {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3) 0;
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-sm);
}

.assistant-context-details p {
    margin: 0;
}

.source-pill-list,
.message-source-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.source-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    color: var(--color-ai);
    background: var(--color-ai-soft);
    border: 1px solid rgb(167 139 250 / 25%);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    text-decoration: none;
}

.source-pill:hover {
    color: var(--color-text-primary);
}

.assistant-feedback {
    min-height: 1.25rem;
    margin: var(--space-3) 0;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.conversation-messages {
    display: grid;
    flex: 1;
    align-content: start;
    gap: var(--space-4);
    min-height: 13rem;
    max-height: 34rem;
    overflow: auto;
    padding: var(--space-2) 0;
}

.chat-message {
    max-width: 90%;
    padding: var(--space-4);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.chat-message-user {
    justify-self: end;
    background: var(--color-accent-soft);
    border-color: rgb(77 215 232 / 25%);
}

.chat-message-author,
.chat-message-content {
    margin: 0;
}

.chat-message-author {
    margin-bottom: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.chat-message-content {
    color: var(--color-text-secondary);
    white-space: pre-wrap;
}

.message-source-row {
    margin-top: var(--space-3);
}

.pending-plan {
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: rgb(167 139 250 / 7%);
    border: 1px solid rgb(167 139 250 / 28%);
    border-radius: var(--radius-md);
}

.pending-plan h3,
.chat-plan-summary p {
    margin: 0;
}

.chat-plan-status {
    color: var(--color-ai);
    font-size: var(--text-sm);
    font-weight: 700;
}

.chat-action-list {
    margin: var(--space-3) 0;
    padding-left: var(--space-5);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.chat-plan-controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.assistant-composer {
    display: flex;
    align-items: end;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.composer-input {
    display: flex;
    align-items: end;
    flex: 1;
    gap: var(--space-2);
    padding: var(--space-2);
    background: var(--color-canvas);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.composer-input textarea {
    min-height: 2.6rem;
    resize: vertical;
    background: transparent;
    border: 0;
}

.composer-input kbd {
    margin-bottom: var(--space-2);
}

@media (max-width: 54rem) {
    .assistant-layout {
        grid-template-columns: 1fr;
    }

    .conversation-sidebar,
    .assistant-panel {
        min-height: auto;
    }
}

@media (max-width: 44rem) {
    .assistant-composer {
        align-items: stretch;
        flex-direction: column;
    }

    .assistant-composer .button {
        justify-content: center;
    }
}

.assistant-preview-copy {
    min-height: 3.5rem;
    margin: 0 0 var(--space-5);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.assistant-preview-footer {
    align-items: center;
}

.ai-orbit {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    color: var(--color-ai);
    background: var(--color-ai-soft);
    border: 1px solid rgb(167 139 250 / 25%);
    border-radius: 50%;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.3rem 0.55rem;
    color: var(--color-success);
    background: rgb(85 214 154 / 8%);
    border: 1px solid rgb(85 214 154 / 22%);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 700;
}

.status-badge.badge-ai {
    color: var(--color-ai);
    background: rgb(167 139 250 / 8%);
    border-color: rgb(167 139 250 / 22%);
}

.recap-status-button {
    min-height: 0;
    padding: 0.3rem 0.55rem;
    cursor: pointer;
}

.recap-status-button:hover:not(:disabled) {
    color: var(--color-ai);
    background: rgb(167 139 250 / 8%);
    border-color: rgb(167 139 250 / 22%);
    transform: none;
}

.recap-status-action {
    display: none;
}

.recap-status-button:hover:not(:disabled) .recap-status-label,
.recap-status-button:focus-visible:not(:disabled) .recap-status-label {
    display: none !important;
}

.recap-status-button:hover:not(:disabled) .recap-status-action,
.recap-status-button:focus-visible:not(:disabled) .recap-status-action {
    display: inline !important;
}

.status-marker {
    width: 0.4rem;
    height: 0.4rem;
    background: currentColor;
    border-radius: 50%;
}

.create-topic-dialog {
    width: min(32rem, calc(100% - 2rem));
    padding: 0;
    color: var(--color-text-primary);
    background: var(--color-surface-1);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    box-shadow: 0 1rem 4rem rgb(0 0 0 / 45%);
}

.create-topic-dialog::backdrop {
    background: rgb(4 7 11 / 72%);
    backdrop-filter: blur(0.25rem);
}

.create-topic-form {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-6);
}

.create-topic-form h2,
.create-topic-form p {
    margin: 0;
}

.create-topic-form p {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.dialog-actions {
    display: flex;
    justify-content: end;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.topic-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 20rem);
    align-items: start;
    gap: var(--space-5);
}

.topic-detail-main,
.topic-content-groups {
    display: grid;
    min-width: 0;
    gap: var(--space-5);
}

.topic-metadata-form {
    display: grid;
    gap: var(--space-3);
}

.topic-metadata-form h2 {
    margin: 0 0 var(--space-2);
    font-size: var(--text-lg);
}

.topic-metadata-form button[type="submit"] {
    justify-self: start;
}

.topic-context-panel {
    position: sticky;
    top: var(--space-5);
    max-height: calc(100vh - 8rem);
    overflow: auto;
}

.context-summary {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.context-avatar {
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    flex: 0 0 2.35rem;
    place-items: center;
    color: var(--color-accent);
    background: var(--color-accent-soft);
    border: 1px solid rgb(77 215 232 / 28%);
    border-radius: 0.7rem;
    font-size: var(--text-xs);
    font-weight: 750;
}

.context-summary > div {
    display: grid;
    min-width: 0;
}

.context-summary strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.context-summary span:not(.context-avatar) {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.context-section {
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.context-section + .context-section {
    margin-top: var(--space-4);
}

.context-section-label {
    margin: 0 0 var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.context-owner,
.context-recap {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.context-list,
.related-topic-list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.context-list li,
.related-topic-list a {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.related-topic-list a {
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    color: var(--color-text-secondary);
    background: rgb(255 255 255 / 2%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    text-decoration: none;
}

.related-topic-list a:hover {
    color: var(--color-accent);
    border-color: rgb(77 215 232 / 28%);
}

.source-mark,
.mini-avatar {
    display: grid;
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 1.5rem;
    place-items: center;
    color: var(--color-text-secondary);
    background: var(--color-surface-3);
    border-radius: 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
}

.context-list-meta {
    margin-left: auto;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

.context-list-empty {
    color: var(--color-text-muted) !important;
    font-size: var(--text-xs) !important;
}

.badge-active {
    color: var(--color-success);
    background: rgb(85 214 154 / 8%);
    border-color: rgb(85 214 154 / 22%);
}

.badge-archived {
    color: var(--color-text-muted);
    background: rgb(113 128 150 / 12%);
    border-color: var(--color-border);
}

.agenda-filter-heading {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.agenda-filter-heading h2 {
    margin: 0;
    font-size: var(--text-lg);
}

.segmented-control {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1);
    background: var(--color-surface-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.segment-button {
    min-height: 2.2rem;
    padding: 0 var(--space-3);
    color: var(--color-text-muted);
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--text-xs);
    font-weight: 700;
}

.segment-button:hover,
.segment-button.is-selected,
.segment-button[aria-pressed="true"] {
    color: var(--color-text-primary);
    background: var(--color-surface-3);
}

.agenda-filters {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.agenda-filter-heading,
.agenda-filter-help {
    grid-column: 1 / -1;
}

.agenda-filter-field,
.list-only-control {
    min-width: 0;
}

.agenda-filter-label,
.list-only-control label {
    display: block;
    margin-bottom: var(--space-2);
}

.agenda-filter-dropdown {
    position: relative;
}

.agenda-filter-dropdown summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 2.45rem;
    padding: 0 var(--space-3);
    cursor: pointer;
    list-style: none;
}

.agenda-filter-dropdown summary::-webkit-details-marker {
    display: none;
}

.agenda-filter-dropdown summary::after {
    color: var(--color-text-muted);
    content: "⌄";
}

.agenda-filter-options {
    display: grid;
    position: absolute;
    z-index: 3;
    top: calc(100% + var(--space-1));
    right: 0;
    left: 0;
    gap: var(--space-1);
    min-width: 12rem;
    padding: var(--space-2);
    background: var(--color-surface-1);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-panel);
}

.agenda-filter-option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    color: var(--color-text-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--text-sm);
}

.agenda-filter-option:hover {
    background: var(--color-surface-3);
}

.agenda-filter-option input {
    width: auto;
}

.agenda-filter-help {
    margin: 0;
}

.agenda-list-view,
.agenda-calendar-view,
.agenda-unscheduled {
    margin-top: 0;
}

.agenda-list {
    display: grid;
    gap: var(--space-5);
}

.agenda-group {
    display: grid;
    gap: var(--space-3);
}

.agenda-group h2,
.agenda-card h2,
.agenda-card h3 {
    margin: 0;
}

.agenda-group h2 {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.agenda-card {
    padding: var(--space-4);
    background: rgb(17 22 32 / 72%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.item-card-header,
.card-actions,
.calendar-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.item-card-header h2 {
    font-size: var(--text-md);
}

.type-badge {
    padding: 0.25rem 0.5rem;
    color: var(--color-accent);
    background: var(--color-accent-soft);
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

.item-fields {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--space-1) var(--space-3);
    margin: var(--space-4) 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.item-fields dt {
    color: var(--color-text-muted);
}

.item-fields dd {
    margin: 0;
}

.agenda-card > p {
    color: var(--color-text-secondary);
}

.source-link {
    display: inline-flex;
    margin: var(--space-3) 0;
    color: var(--color-accent);
    font-size: var(--text-sm);
}

.card-actions {
    justify-content: start;
    flex-wrap: wrap;
    margin-top: var(--space-3);
}

.agenda-edit-form {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.calendar-toolbar {
    align-items: start;
    margin-bottom: var(--space-5);
}

.calendar-toolbar h2 {
    margin: 0;
    font-size: var(--text-lg);
}

.calendar-weekdays,
.calendar-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--space-1);
}

.calendar-weekdays {
    margin-bottom: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    text-align: center;
}

.calendar-grid {
    display: grid;
    gap: var(--space-1);
}

.calendar-day {
    min-height: 7rem;
    padding: var(--space-2);
    background: rgb(17 22 32 / 72%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.calendar-day-empty {
    background: rgb(17 22 32 / 35%);
}

.calendar-day.is-today {
    border-color: rgb(77 215 232 / 58%);
    box-shadow: inset 0 2px 0 var(--color-accent);
}

.calendar-day-number {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--color-text-secondary);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

.calendar-day-items {
    display: grid;
    gap: var(--space-1);
}

.calendar-agenda-card {
    padding: var(--space-2);
}

.calendar-agenda-card .item-card-header h2 {
    overflow: hidden;
    font-size: var(--text-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-agenda-card .item-fields,
.calendar-agenda-card .source-link,
.calendar-agenda-card .card-actions,
.calendar-agenda-card .preserve-lines {
    display: none;
}

.calendar-item-due {
    margin: var(--space-1) 0 0;
    color: var(--color-text-muted) !important;
    font-size: 0.65rem;
}

.agenda-unscheduled {
    margin-top: var(--space-5);
}

@media (max-width: 68rem) {
    .agenda-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 44rem) {
    .agenda-filter-heading,
    .calendar-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .agenda-filters {
        grid-template-columns: 1fr;
    }

    .agenda-page-heading .heading-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .segmented-control {
        width: 100%;
    }

    .segment-button {
        flex: 1;
    }

    .calendar-day {
        min-height: 4.5rem;
        padding: var(--space-1);
    }

    .calendar-day .calendar-day-items {
        display: none;
    }
}

@media (max-width: 68rem) {
    .topic-detail-layout {
        grid-template-columns: minmax(0, 1fr) minmax(15rem, 18rem);
    }
}

@media (max-width: 54rem) {
    .topic-detail-layout {
        grid-template-columns: 1fr;
    }

    .topic-context-panel {
        position: static;
        max-height: none;
    }
}

@media (max-width: 54rem) {
    .dashboard-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 44rem) {
    .page-heading,
    .topic-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .heading-actions {
        justify-content: start;
    }

    .signal-grid {
        grid-template-columns: 1fr;
    }

    .signal-card {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .signal-card-topline,
    .signal-card .signal-detail {
        grid-column: 1 / -1;
    }

    .filter-input,
    .chip-group {
        width: 100%;
    }

    .chip-group {
        justify-content: space-between;
    }

    .filter-chip {
        flex: 1;
    }
}

@media (max-width: 68rem) {
    .design-app {
        grid-template-columns: 4.5rem minmax(0, 1fr);
    }

    .design-sidebar {
        width: 4.5rem;
        padding-inline: var(--space-2);
    }

    .brand {
        justify-content: center;
        padding-inline: 0;
    }

    .brand-copy,
    .nav-label,
    .nav-item > span:not(.nav-icon),
    .workspace-status-copy,
    .status-chevron,
    .user-copy,
    .user-chip > .icon-button {
        display: none;
    }

    .nav-item {
        position: relative;
        justify-content: center;
        padding-inline: 0;
    }

    .nav-count,
    .nav-dot {
        position: absolute;
        top: 0.15rem;
        right: 0.15rem;
        margin: 0;
    }

    .nav-count {
        min-width: auto;
        color: var(--color-accent);
        font-size: 0.56rem;
    }

    .workspace-status {
        grid-template-columns: 1fr;
        justify-items: center;
        padding-inline: 0;
    }

    .user-chip {
        grid-template-columns: 1fr;
        justify-items: center;
        padding-inline: 0;
    }

    .cookie-notice,
    .cookie-consent-banner {
        left: calc(4.5rem + var(--space-5));
    }
}

@media (max-width: 54rem) {
    .chat-workspace {
        grid-template-columns: 1fr;
    }

    .cookie-consent-content {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 44rem) {
    .design-app {
        display: block;
    }

    .design-sidebar {
        position: sticky;
        z-index: 4;
        top: 0;
        display: block;
        width: 100%;
        height: auto;
        padding: var(--space-2) var(--space-3);
        background: rgb(17 22 32 / 97%);
        border-right: 0;
        border-bottom: 1px solid var(--color-border);
        backdrop-filter: blur(1rem);
    }

    .sidebar-top {
        display: flex;
        align-items: center;
        gap: var(--space-3);
    }

    .brand {
        flex: 0 0 auto;
        padding: 0;
    }

    .brand-copy {
        display: grid;
    }

    .primary-nav {
        display: flex;
        min-width: 0;
        gap: var(--space-1);
        overflow-x: auto;
        scrollbar-width: none;
    }

    .primary-nav::-webkit-scrollbar {
        display: none;
    }

    .primary-nav .nav-label,
    .secondary-nav,
    .sidebar-bottom {
        display: none;
    }

    .nav-item,
    button.nav-item {
        width: auto;
        min-height: 2.25rem;
        flex: 0 0 auto;
        justify-content: start;
        padding: 0 var(--space-3);
    }

    .nav-item > span:not(.nav-icon) {
        display: inline;
    }

    .nav-item .nav-count,
    .nav-item .nav-dot {
        position: static;
        margin-left: var(--space-1);
    }

    .nav-item .nav-count {
        min-width: 1.5rem;
        font-size: var(--text-xs);
    }

    .design-topbar {
        min-height: 3.5rem;
        padding-inline: var(--space-4);
    }

    .context-kicker,
    .context-divider {
        display: none;
    }

    .design-main {
        padding: var(--space-6) var(--space-4) 7rem;
    }

    .design-footer {
        align-items: start;
        flex-direction: column;
        padding-inline: var(--space-4);
    }

    .cookie-notice,
    .cookie-consent-banner {
        right: var(--space-3);
        bottom: var(--space-3);
        left: var(--space-3);
        align-items: end;
        padding: var(--space-3);
    }

    .cookie-consent-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .cookie-consent-actions button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Draft parity layer for the authenticated workspace pages. */
.page-panel {
    min-width: 0;
    padding: 0;
    color: var(--color-text-primary);
    background: transparent;
    border: 0;
    box-shadow: none;
}

.page-panel > #page-content-body {
    min-width: 0;
}

.page-heading {
    align-items: end;
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

h1,
h2,
h3 {
    letter-spacing: -0.03em;
}

h1 {
    max-width: 42rem;
    margin-bottom: var(--space-3);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.05;
}

h2 {
    margin-bottom: 0;
    font-size: var(--text-lg);
    line-height: 1.2;
}

h3 {
    margin-bottom: var(--space-2);
    font-size: 1rem;
    line-height: 1.25;
}

.signal-grid {
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.signal-card,
.surface-panel {
    background: linear-gradient(145deg, rgb(23 29 41 / 92%), rgb(17 22 32 / 96%));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: none;
}

.signal-card {
    min-height: 8.5rem;
    padding: var(--space-5);
}

.dashboard-layout {
    gap: var(--space-3);
}

.topics-panel,
.agenda-preview,
.assistant-preview {
    padding: var(--space-5);
}

.topic-toolbar {
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.filter-input {
    flex: 1;
    max-width: 18rem;
    height: 2.3rem;
    border-radius: var(--radius-md);
}

.filter-input:focus-within {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-focus);
}

#dashboard-view .filter-input input {
    width: 100%;
    height: 100%;
    padding: 0;
    color: var(--color-text-primary);
    background: transparent;
    border: 0;
    border-radius: 0;
    outline: 0;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
    font-size: var(--text-sm);
}

.topic-card {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-3);
    padding: var(--space-4);
    background: rgb(11 14 20 / 40%);
    border: 1px solid transparent;
}

.topic-card:hover {
    background: var(--color-surface-3);
    border-color: var(--color-border-strong);
}

.topic-accent {
    align-self: stretch;
    width: 0.2rem;
    min-height: 3.3rem;
    border-radius: var(--radius-pill);
}

.topic-card-main {
    min-width: 0;
}

.topic-title-row,
.topic-meta,
.topic-card-actions {
    display: flex;
    align-items: center;
}

.topic-title-row {
    gap: var(--space-2);
    min-width: 0;
}

.topic-page-heading .topic-title-row {
    flex-wrap: wrap;
    gap: var(--space-3);
}

.topic-page-heading .topic-title-row .status-badge {
    flex: 0 0 auto;
}

.topic-card h3 {
    overflow: hidden;
    margin: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topic-description {
    display: -webkit-box;
    overflow: hidden;
    margin: var(--space-1) 0 var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.topic-meta {
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

.topic-card-actions {
    justify-content: end;
}

.topic-card-actions .text-button {
    white-space: nowrap;
}

.filter-chip.is-selected,
.state-button.is-selected {
    color: var(--color-accent);
    background: var(--color-accent-soft);
    border-color: rgb(77 215 232 / 23%);
}

.topic-detail-layout {
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 20rem);
    gap: var(--space-4);
}

.topic-detail-layout.is-context-hidden {
    grid-template-columns: minmax(0, 1fr);
}

.topic-detail-main {
    display: grid;
    min-width: 0;
    gap: var(--space-4);
}

.recap-panel {
    position: relative;
    background: linear-gradient(145deg, rgb(48 38 78 / 37%), rgb(17 22 32 / 96%));
    border-color: rgb(167 139 250 / 25%);
}

.recap-panel-heading {
    display: block;
}

.recap-heading-row,
.recap-title-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.recap-heading-row {
    justify-content: space-between;
    flex-wrap: wrap;
}

.recap-title-row {
    min-width: 0;
    flex-wrap: wrap;
}

.recap-title-row h2 {
    flex: 0 0 auto;
}

.recap-title-row .recap-meta {
    margin-top: 0;
}

.recap-status-button {
    position: absolute;
    top: var(--space-5);
    right: var(--space-5);
}

.recap-copy {
    max-width: 55rem;
    margin-bottom: var(--space-5);
    color: var(--color-text-primary);
    font-size: 1.05rem;
    line-height: 1.65;
}

.recap-meta {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-top: var(--space-5);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.recap-meta > span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.topic-information-heading,
.topic-content-group-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.topic-information-heading {
    padding-inline: var(--space-1);
}

.topic-content-groups {
    display: grid;
    min-width: 0;
    gap: var(--space-4);
}

.topic-content-group {
    min-width: 0;
    padding: var(--space-5);
    background: rgb(17 22 32 / 74%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.topic-content-group-heading {
    margin-bottom: var(--space-4);
}

.topic-content-list {
    display: grid;
    gap: var(--space-2);
}

.content-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-3);
    background: rgb(11 14 20 / 42%);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
}

.content-item:hover {
    background: var(--color-surface-3);
    border-color: var(--color-border-strong);
}

.content-item-mark,
.conversation-icon {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    flex: 0 0 auto;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

.content-item-mark.is-cyan,
.conversation-icon.is-cyan {
    color: var(--color-accent);
    background: var(--color-accent-soft);
}

.content-item-mark.is-amber,
.conversation-icon.is-amber {
    color: var(--color-warning);
    background: rgb(244 201 107 / 12%);
}

.content-item-mark.is-violet,
.conversation-icon.is-violet {
    color: var(--color-ai);
    background: var(--color-ai-soft);
}

.content-item-main {
    min-width: 0;
}

.content-item-heading {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.content-item-heading h3 {
    overflow: hidden;
    margin: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.content-item-type {
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

.content-item-summary {
    overflow: hidden;
    margin: var(--space-1) 0 var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.content-item-meta {
    display: flex;
    gap: var(--space-3);
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

.content-item-actions {
    display: flex;
    align-items: start;
    gap: var(--space-2);
}

.content-item-action {
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding: 0 var(--space-2);
    color: var(--color-text-secondary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.content-item-action:hover {
    color: var(--color-text-primary);
    background: var(--color-surface-3);
    border-color: var(--color-border);
}

.content-item-details {
    grid-column: 2 / -1;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.topic-context-panel {
    padding: var(--space-5);
}

.topic-context-panel > .status-badge {
    margin-bottom: var(--space-3);
}

.topic-context-panel[hidden] {
    display: none;
}

.context-summary {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

.context-summary > div {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
}

.context-summary strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.context-summary span:not(.context-avatar) {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.context-section {
    padding: var(--space-5) 0;
    border-bottom: 1px solid var(--color-border);
}

.context-section-label {
    margin-bottom: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.context-list {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.context-list li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.source-mark {
    display: grid;
    width: 1.45rem;
    height: 1.45rem;
    place-items: center;
    color: var(--color-accent);
    background: var(--color-accent-soft);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.62rem;
}

.source-mark.is-owner {
    border-radius: 50%;
}

.source-mark.is-amber {
    color: var(--color-warning);
    background: rgb(244 201 107 / 12%);
}

.source-mark.is-violet {
    color: var(--color-ai);
    background: var(--color-ai-soft);
}

.context-list-meta {
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

.related-topic-list {
    display: grid;
    gap: var(--space-2);
}

.related-topic-list a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.related-topic-list a:hover {
    color: var(--color-text-primary);
}

.related-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
}

.related-dot.is-amber {
    background: var(--color-warning);
}

.related-dot.is-violet {
    background: var(--color-ai);
}

.context-footer {
    padding-top: var(--space-4);
}

.workspace-dialog {
    width: min(42rem, calc(100% - 2rem));
    max-height: min(90vh, 54rem);
    padding: 0;
    color: var(--color-text-primary);
    background: var(--color-surface-1);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

.workspace-dialog::backdrop,
.create-topic-dialog::backdrop {
    background: rgb(4 6 10 / 72%);
    backdrop-filter: blur(0.25rem);
}

.modal-form {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-5);
}

.dialog-heading {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-2);
}

.dialog-heading h2 {
    margin-bottom: var(--space-2);
}

.dialog-heading p:last-child {
    margin-bottom: 0;
    color: var(--color-text-secondary);
}

.dialog-actions {
    display: flex;
    justify-content: end;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.agenda-filters {
    margin-bottom: var(--space-4);
}

.select-filter-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(10rem, auto);
    align-items: end;
    gap: var(--space-3);
}

.select-filter {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
}

.select-filter > span {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: 650;
}

.select-filter select {
    width: 100%;
    min-height: 2.35rem;
    padding: 0 var(--space-3);
    color: var(--color-text-secondary);
    background: var(--color-canvas);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--text-sm);
}

.select-filter select:focus {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-focus);
}

.agenda-filter-summary {
    display: inline-flex;
    align-items: center;
    justify-content: end;
    gap: var(--space-2);
    min-height: 2.35rem;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    white-space: nowrap;
}

.agenda-view-panel {
    min-width: 0;
}

.agenda-groups {
    display: grid;
    gap: var(--space-4);
}

.agenda-group {
    min-width: 0;
}

.agenda-group-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 0 var(--space-2) var(--space-2);
}

.agenda-group-date {
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    font-weight: 700;
}

.agenda-group-date span {
    margin-left: var(--space-2);
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
}

.agenda-group-count {
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: 0.66rem;
}

.agenda-items {
    display: grid;
    gap: var(--space-2);
}

.agenda-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-3) var(--space-4);
    background: linear-gradient(145deg, rgb(23 29 41 / 92%), rgb(17 22 32 / 96%));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.agenda-item:hover {
    border-color: var(--color-border-strong);
}

.agenda-item-marker {
    align-self: stretch;
    width: 0.2rem;
    min-height: 3.2rem;
    border-radius: var(--radius-pill);
}

.agenda-item-marker.is-cyan {
    background: var(--color-accent);
}

.agenda-item-marker.is-violet {
    background: var(--color-ai);
}

.agenda-item-marker.is-amber {
    background: var(--color-warning);
}

.agenda-item-main {
    min-width: 0;
}

.agenda-item-title-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.agenda-item-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agenda-type-badge,
.agenda-status-open,
.agenda-status-suggested,
.agenda-status-completed,
.agenda-status-dismissed {
    flex: 0 0 auto;
    font-size: var(--text-xs);
}

.agenda-type-badge {
    padding: 0.2rem var(--space-2);
    color: var(--color-text-muted);
    background: var(--color-surface-3);
    border-radius: var(--radius-pill);
}

.agenda-status-open {
    color: var(--color-warning);
    background: rgb(244 201 107 / 8%);
    border-color: rgb(244 201 107 / 22%);
}

.agenda-status-dismissed {
    color: var(--color-danger);
    background: rgb(255 127 143 / 8%);
    border-color: rgb(255 127 143 / 22%);
}

.agenda-status-suggested {
    color: var(--color-accent);
    background: rgb(77 215 232 / 8%);
    border-color: rgb(77 215 232 / 22%);
}

.agenda-item-description {
    margin: var(--space-1) 0 var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.agenda-item-meta {
    display: flex;
    gap: var(--space-3);
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

.agenda-item-topic {
    color: var(--color-text-muted);
}

.agenda-item-topic:hover {
    color: var(--color-accent);
}

.agenda-item-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    align-self: center;
}

.agenda-item-action {
    min-height: 2.25rem;
    padding: 0 var(--space-3);
    color: var(--color-text-secondary);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--text-xs);
    font-weight: 650;
}

.agenda-item-action:hover {
    color: var(--color-text-primary);
    background: var(--color-surface-3);
    border-color: var(--color-border-strong);
}

.agenda-edit-action,
.agenda-dismiss-action {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.agenda-item {
    position: relative;
}

.agenda-item:hover .agenda-edit-action,
.agenda-item:focus-within .agenda-edit-action,
.agenda-item:hover .agenda-dismiss-action,
.agenda-item:focus-within .agenda-dismiss-action {
    position: static;
    opacity: 1;
    pointer-events: auto;
}

.conversation-sidebar {
    position: sticky;
    top: var(--space-5);
    min-height: 0;
    padding-bottom: var(--space-4);
}

.conversation-list {
    display: grid;
    gap: var(--space-1);
}

.conversation-item {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    padding: var(--space-3);
    color: var(--color-text-secondary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
}

.conversation-item:hover,
.conversation-item.is-selected {
    color: var(--color-text-primary);
    background: var(--color-surface-3);
    border-color: var(--color-border);
}

.conversation-item.is-selected {
    box-shadow: inset 2px 0 0 var(--color-ai);
}

.chat-conversation-open {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
}

.conversation-copy {
    display: grid;
    min-width: 0;
    gap: var(--space-1);
}

.conversation-copy strong,
.conversation-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conversation-copy strong {
    font-size: var(--text-sm);
    font-weight: 650;
}

.conversation-copy small {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.chat-conversation-delete {
    position: absolute;
    top: 50%;
    right: var(--space-2);
    min-height: 2.25rem;
    padding: 0 var(--space-2);
    opacity: 0;
    transform: translateY(-50%);
}

.conversation-item:hover .chat-conversation-delete,
.conversation-item:focus-within .chat-conversation-delete {
    opacity: 1;
}

@media (max-width: 70rem) {
    .select-filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .agenda-filter-summary {
        grid-column: 1 / -1;
        justify-content: start;
    }
}

@media (max-width: 58rem) {
    .topic-detail-layout,
    .dashboard-layout,
    .assistant-layout {
        grid-template-columns: 1fr;
    }

    .topics-panel,
    .dashboard-aside {
        grid-column: auto;
    }

    .conversation-sidebar {
        position: static;
    }

    .select-filter-grid {
        grid-template-columns: 1fr;
    }

    .agenda-filter-summary {
        grid-column: auto;
    }
}

@media (max-width: 42rem) {
    .page-heading {
        align-items: start;
        flex-direction: column;
    }

    .heading-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .topic-card,
    .agenda-item,
    .content-item {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .topic-card-actions,
    .agenda-item-actions,
    .content-item-actions {
        grid-column: 2;
        justify-content: start;
    }

    .agenda-item-marker,
    .content-item-mark {
        grid-row: span 2;
    }
}

/* Final visual parity adjustments. */
.eyebrow-accent {
    color: var(--color-accent);
}

#new-topic-button,
#new-agenda-item-button {
    color: var(--color-canvas);
    background: var(--color-accent);
    border-color: var(--color-accent);
}

#new-topic-button:hover,
#new-agenda-item-button:hover {
    color: var(--color-canvas);
    background: #86e7ef;
    border-color: #86e7ef;
}

.chip-group {
    flex-wrap: wrap;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

#dashboard-view .filter-chip {
    min-height: 2rem;
    margin-top: 0;
    padding: 0 var(--space-3);
    color: var(--color-text-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-size: var(--text-xs);
    font-weight: 650;
}

#dashboard-view .filter-chip:hover {
    color: var(--color-text-secondary);
    background: var(--color-surface-3);
    border-color: transparent;
}

#dashboard-view .filter-chip.is-selected,
#dashboard-view .filter-chip[aria-pressed="true"] {
    color: var(--color-accent);
    background: var(--color-accent-soft);
    border-color: rgb(77 215 232 / 24%);
}

.topic-card {
    grid-template-columns: 0.2rem minmax(0, 1fr);
    color: inherit;
    text-decoration: none;
}

.topic-card .topic-accent {
    grid-row: 1 / -1;
    width: 0.2rem;
    background: var(--color-accent);
}

.topic-card .topic-title-row {
    align-items: center;
}

.topic-card .status-badge {
    min-height: 1.2rem;
    padding: 0.12rem 0.45rem;
    font-size: 0.62rem;
    line-height: 1;
}

.topic-card .status-marker {
    width: 0.35rem;
    height: 0.35rem;
}

.topic-card:hover h3 {
    color: var(--color-accent);
}

.recap-key-points,
.recap-key-points li {
    color: var(--color-text-secondary);
}

.select-filter-grid {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(12rem, 1fr)) minmax(12rem, auto);
}

.select-filter select {
    min-width: 11rem;
}

.segmented-control {
    display: inline-flex;
    align-self: center;
    gap: 0;
    padding: 0.2rem;
    background: var(--color-surface-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.agenda-page-heading .heading-actions {
    display: flex;
    align-items: center;
}

.agenda-page-heading .heading-actions .segmented-control,
.agenda-page-heading .heading-actions .button,
.agenda-page-heading .heading-actions button {
    margin: 0;
}

@media (min-width: 44.01rem) {
    .agenda-page-heading .heading-actions {
        align-items: center;
    }

    .agenda-page-heading .heading-actions .segmented-control,
    .agenda-page-heading .heading-actions .button,
    .agenda-page-heading .heading-actions button {
        align-self: center;
    }
}

.page-panel .segmented-control .segment-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 2rem;
    margin-top: 0;
    padding: 0 var(--space-3);
    color: var(--color-text-muted);
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    box-shadow: none;
    cursor: pointer;
    font-size: var(--text-xs);
    font-weight: 650;
    transition: color var(--motion-fast) var(--motion-ease), background var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease);
}

.page-panel .segmented-control .segment-button.is-selected,
.page-panel .segmented-control .segment-button[aria-pressed="true"] {
    color: var(--color-text-primary);
    background: var(--color-surface-3);
    box-shadow: inset 0 0 0 1px var(--color-border-strong);
}

.page-panel .segmented-control .segment-button:hover {
    color: var(--color-text-primary);
}

.page-panel .segmented-control .segment-button:not(.is-selected):hover,
.page-panel .segmented-control .segment-button[aria-pressed="false"]:hover {
    background: transparent;
    box-shadow: none;
}

.page-panel .segmented-control .segment-button:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

@media (max-width: 70rem) {
    .select-filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .select-filter select {
        min-width: 0;
    }
}

@media (max-width: 58rem) {
    .select-filter-grid {
        grid-template-columns: 1fr;
    }
}