@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/MaterialIcons-Regular.woff2') format('woff2');
    font-display: block;
}

@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/MaterialSymbolsOutlined.woff2') format('woff2');
    font-display: block;
}

.material-icons,
.material-symbols-outlined,
.material-symbols-rounded {
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

.material-icons { font-family: 'Material Icons'; }
.material-symbols-outlined,
.material-symbols-rounded { font-family: 'Material Symbols Outlined'; }

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
}

/* ─── Design tokens ─────────────────────────────────────────────── */
:root {
    /* Primitive brand hues */
    --ind-blue: #0876c9;
    --ind-blue-mid: #0aa6df;
    --ind-blue-light: #d9efff;
    --ind-blue-pale: #f6fbff;
    --ind-blue-dark: #052767;
    --ind-ink: #071a2f;
    --ind-purple: #3557d6;
    --ind-accent: #0876c9;
    --ind-accent-soft: #e3f3ff;
    --ind-teal: #0f766e;
    --ind-coral: #f9735b;

    /* Semantic colors */
    --bg-page: var(--ind-blue-pale);
    --bg-surface: #ffffff;
    --bg-raised: #fbfcff;
    --bg-sunken: #edf1f7;
    --bg-overlay: rgba(15,23,42,0.38);
    --bg-toast: rgba(255,255,255,0.88);
    --bg-header: rgba(255,255,255,0.74);
    --bg-favicon: #f8fafc;
    --bg-brand-glass: rgba(255,255,255,0.16);
    --bg-brand-glass-strong: rgba(255,255,255,0.30);

    --fg-primary: #111827;
    --fg-secondary: #334155;
    --fg-muted: #64748b;
    --fg-disabled: #94a3b8;
    --fg-placeholder: #c5cfdd;
    --fg-inverse: #ffffff;
    --fg-on-accent: #ffffff;
    --fg-on-brand-muted: rgba(255,255,255,0.78);

    --border-subtle: #e7f2fb;
    --border-default: #cfe0ee;
    --border-strong: #a8bfd4;
    --border-on-brand: rgba(255,255,255,0.5);

    --accent: var(--ind-accent);
    --accent-hover: #052767;
    --accent-soft: var(--ind-accent-soft);
    --accent-fg: #ffffff;

    --success: #15803d;
    --warning: #b45309;
    --danger: #dc2626;
    --success-soft: #dcfce7;
    --warning-soft: #fff7d6;
    --danger-soft: #fef2f2;

    --shadow-sm: 0 1px 2px rgba(15,23,42,0.06), 0 1px 1px rgba(15,23,42,0.04);
    --shadow-md: 0 8px 24px rgba(15,23,42,0.08), 0 1px 2px rgba(15,23,42,0.06);
    --shadow-lg: 0 16px 42px rgba(15,23,42,0.12), 0 3px 8px rgba(15,23,42,0.08);
    --shadow-xl: 0 24px 64px rgba(15,23,42,0.16), 0 6px 16px rgba(15,23,42,0.10);
    --shadow-pressed: inset 0 1px 2px rgba(15,23,42,0.12);
    --shadow-focus-ring: 0 0 0 3px rgba(8,118,201,0.32);
    --shadow-appbar: var(--shadow-md);

    /* Component tokens */
    --gradient-brand: linear-gradient(135deg, var(--ind-blue-dark), var(--ind-blue) 42%, var(--ind-blue-mid) 78%, #7dd3fc);
    --gradient-brand-compact: linear-gradient(135deg, var(--ind-blue), var(--ind-blue-mid));
    --gradient-avatar: linear-gradient(135deg, var(--ind-blue-dark), var(--ind-blue) 56%, var(--ind-blue-mid));
    --gradient-primary: linear-gradient(135deg, var(--ind-blue-dark), var(--accent) 58%, var(--ind-blue-mid));
    --gradient-primary-hover: linear-gradient(135deg, var(--accent-hover), var(--ind-blue-dark));
    --gradient-sidebar: linear-gradient(180deg, var(--ind-ink) 0%, var(--ind-blue-dark) 100%);
    --gradient-page-wash: linear-gradient(180deg, rgba(8,118,201,0.10), rgba(255,255,255,0) 18rem);
    --gradient-skeleton: linear-gradient(90deg, var(--bg-raised) 0%, var(--border-default) 50%, var(--bg-raised) 100%);
    --shadow-primary: 0 8px 18px rgba(8,118,201,0.20);
    --shadow-primary-hover: 0 12px 28px rgba(8,118,201,0.28);
    --shadow-segment-inset: inset 0 1px 2px rgba(15,23,42,0.05);
    --bg-segment-indicator: var(--bg-surface);
    --bg-segment-indicator-dark: rgba(125,211,252,0.16);
    --border-segment-indicator-dark: rgba(125,211,252,0.36);

    /* Legacy aliases */
    --surface: var(--bg-surface);
    --surface-raised: var(--bg-raised);
    --surface-page: var(--bg-page);
    --border-light: var(--border-default);
    --text-primary: var(--fg-primary);
    --text-muted: var(--fg-muted);
    --text-light: var(--fg-disabled);

    color-scheme: light;

    /* Type scale */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    --fw-regular: 450;
    --fw-medium: 550;
    --fw-semibold: 650;
    --fw-bold: 750;
    --fs-display: 2.5rem;
    --fs-h1: 1.75rem;
    --fs-h2: 1.375rem;
    --fs-h3: 1.125rem;
    --fs-body: 0.9375rem;
    --fs-small: 0.8125rem;
    --fs-caption: 0.75rem;
    --lh-tight: 1.2;
    --lh-base: 1.5;
    --lh-relaxed: 1.65;
    --ls-tight: 0;
    --ls-wide: 0.05em;

    /* Rhythm */
    --content-readable: 720px;
    --content-default: 900px;
    --content-workspace: 1120px;
    --content-wide: 1280px;
    --section-gap-compact: 0.75rem;
    --section-gap: 1rem;
    --section-gap-roomy: 1.5rem;
    --surface-pad-compact: 0.875rem;
    --surface-pad: 1.25rem;
    --surface-pad-roomy: 1.5rem;

    /* Radii / motion */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-pill: 999px;
    --radius-card:     var(--radius-lg);
    --radius-btn:      8px;
    --radius-input:    8px;
    --shadow-card:     var(--shadow-md);
    --shadow-card-hover: var(--shadow-lg);
    --shadow-card-active: var(--shadow-sm);
    --lift-hover-y: -2px;
    --lift-active-y: 0;
    --transition:      180ms ease;
    --ease-standard: cubic-bezier(.2,0,0,1);
    --ease-emphasized: cubic-bezier(.2,.8,.2,1);
    --ease-decelerate: cubic-bezier(0,0,.2,1);
    --dur-fast: 120ms;
    --dur-base: 220ms;
    --dur-slow: 360ms;
    --stagger-1: 40ms;
    --stagger-2: 90ms;
    --stagger-3: 140ms;
    --stagger-4: 190ms;

    /* Mobile chrome sizing for popup safe bounds */
    --mobile-header-height: 56px;
    --mobile-footer-height: 64px;
}

[data-theme="dark"] {
    --bg-page: #07111f;
    --bg-surface: #0d1b2e;
    --bg-raised: #12243a;
    --bg-sunken: #050c16;
    --bg-overlay: rgba(0,0,0,0.6);
    --bg-toast: rgba(17,24,39,0.90);
    --bg-header: rgba(7,17,31,0.78);
    --bg-favicon: #f8fafc;

    --fg-primary: #f8fafc;
    --fg-secondary: #cbd5e1;
    --fg-muted: #94a3b8;
    --fg-disabled: #526077;
    --fg-placeholder: #758399;
    --fg-inverse: #07111f;
    --fg-on-accent: #ffffff;

    --border-subtle: #13253a;
    --border-default: #20364f;
    --border-strong: #36536f;

    --accent: #38bdf8;
    --accent-hover: #7dd3fc;
    --accent-soft: rgba(56,189,248,0.14);
    --accent-fg: #071a2f;

    --success: #86efac;
    --warning: #facc15;
    --danger: #f87171;
    --success-soft: rgba(134,239,172,0.12);
    --warning-soft: rgba(250,204,21,0.12);
    --danger-soft: rgba(248,113,113,0.12);

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.32);
    --shadow-md: 0 10px 28px rgba(0,0,0,0.34), 0 1px 2px rgba(0,0,0,0.24);
    --shadow-lg: 0 18px 48px rgba(0,0,0,0.42), 0 4px 12px rgba(0,0,0,0.28);
    --shadow-xl: 0 28px 72px rgba(0,0,0,0.52), 0 8px 20px rgba(0,0,0,0.34);
    --shadow-pressed: inset 0 1px 2px rgba(0,0,0,0.5);
    --shadow-focus-ring: 0 0 0 3px rgba(56,189,248,0.38);

    --gradient-brand: linear-gradient(135deg, #052767, #0876c9 44%, #38bdf8 78%, #7dd3fc);
    --gradient-brand-compact: linear-gradient(135deg, #0876c9, #38bdf8);
    --gradient-avatar: linear-gradient(135deg, #052767, #0876c9 58%, #38bdf8);
    --gradient-primary: linear-gradient(135deg, #052767, #0876c9 58%, #38bdf8);
    --gradient-primary-hover: linear-gradient(135deg, #0876c9, #38bdf8 72%, #7dd3fc);
    --gradient-page-wash: linear-gradient(180deg, rgba(8,118,201,0.14), rgba(7,17,31,0) 18rem);
    --shadow-primary: 0 10px 28px rgba(56,189,248,0.22);
    --shadow-primary-hover: 0 14px 34px rgba(56,189,248,0.30);

    color-scheme: dark;
}

/* ─── Global page background ─────────────────────────────────────── */
html, body {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: var(--lh-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background:
        var(--gradient-page-wash),
        var(--bg-page);
    color: var(--fg-primary);
    overscroll-behavior: contain;
}

[data-theme="dark"] body {
    background:
    var(--gradient-page-wash),
        var(--bg-page);
}

h1 {
    font-size: var(--fs-h1);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-tight);
    line-height: var(--lh-tight);
}

p {
    overflow-wrap: anywhere;
}

h2 {
    font-size: var(--fs-h2);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-tight);
    line-height: var(--lh-tight);
}

h3 {
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
}

.section-header {
    display: grid;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.section-header.has-icon {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    column-gap: 0.875rem;
}

.section-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-pill);
    background: var(--gradient-avatar);
    color: var(--fg-on-accent);
    box-shadow: var(--shadow-sm);
    flex: 0 0 auto;
}

.section-header-icon .material-icons,
.section-header-icon .material-symbols-outlined { font-size: 1.5rem; line-height: 1; }

.page-hero-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-pill);
    background: var(--gradient-avatar);
    color: var(--fg-on-accent);
    box-shadow: var(--shadow-sm);
    flex: 0 0 auto;
}

.page-hero-avatar .material-icons,
.page-hero-avatar .material-symbols-outlined { font-size: 1.5rem; line-height: 1; }

.section-header-content {
    min-width: 0;
    display: grid;
    gap: 0.5rem;
}

.section-header h1,
.section-header h2,
.section-header h3,
.section-header p {
    margin: 0;
}

.section-header p {
    color: var(--fg-secondary);
    font-size: var(--fs-body);
    max-width: var(--content-readable);
}

.section-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.goals-workspace-actions,
.focus-today-actions,
.discover-hero-actions,
.asset-hero-actions {
    margin-left: auto;
    justify-content: flex-end;
}

.section-header-actions > .btn-primary,
.goals-workspace-actions > .btn-primary,
.focus-today-actions > .btn-primary,
.discover-hero-actions > .btn-primary,
.asset-hero-actions > .btn-primary,
.asset-hero-actions > a.btn-primary,
.form-actions > .btn-primary,
.fallback-actions > .btn-primary,
.focus-start-actions > .btn-primary,
.focus-onboarding-actions > .btn-primary,
.focus-work-actions > .btn-primary,
.goal-detail-actions > .btn-primary,
.onboarding-actions > .btn-primary,
.landing-actions > .btn-primary,
.extension-capture-actions > .btn-primary {
    order: 1;
}

.section-header-actions > .btn,
.goals-workspace-actions > .btn,
.focus-today-actions > .btn,
.discover-hero-actions > .btn,
.asset-hero-actions > .btn,
.asset-hero-actions > a.btn {
    flex: 0 0 auto;
    max-width: 100%;
}
.section-header.goals-workspace-copy,
.section-header.discover-hero-copy,
.section-header.search-command-copy,
.section-header.focus-start-copy,
.section-header.focus-goal-brief-title,
.section-header.new-goal-hero,
.section-header.capture-hero-copy,
.section-header.entity-workspace-copy,
.section-header.entity-detail-hero-body,
.section-header.support-hero,
.section-header.edge-capture-hero,
.section-header.public-profile-meta,
.section-header.work-item-toolbar-copy,
.section-header.fallback-copy,
.section-header.focus-onboarding-copy,
.section-header.goal-work-items-copy,
.section-header.discover-ai-copy {
    margin-bottom: 0;
}

.work-item-toolbar-copy { min-width: 0; }
.goal-work-items-copy { min-width: 0; }
.discover-ai-copy { min-width: 0; }

small, .text-small {
    font-size: var(--fs-small);
}

.text-caption {
    font-size: var(--fs-caption);
    color: var(--fg-muted);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    font-weight: var(--fw-medium);
}

:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus-ring);
    border-radius: inherit;
}

.e-btn:focus-visible,
.e-input:focus-visible,
.e-list-item:focus-visible,
.tab-item:focus-visible,
.seg-tab:focus-visible,
.theme-opt:focus-visible {
    outline: none !important;
    box-shadow: var(--shadow-focus-ring) !important;
}

button, .e-btn {
    transition: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}

button:active, .e-btn:active {
    transform: scale(0.97);
}

/* ─── Shared page section ────────────────────────────────────────── */
.page-section {
    padding: 1.5rem;
    width: 100%;
    max-width: var(--content-default);
    margin-inline: auto;
    box-sizing: border-box;
}

.page-section-readable { max-width: var(--content-readable); }
.page-section-workspace { max-width: var(--content-workspace); }
.page-section-wide { max-width: var(--content-wide); }

.density-compact { --density-gap: var(--section-gap-compact); --density-pad: var(--surface-pad-compact); }
.density-default { --density-gap: var(--section-gap); --density-pad: var(--surface-pad); }
.density-roomy { --density-gap: var(--section-gap-roomy); --density-pad: var(--surface-pad-roomy); }

.stack-compact,
.stack-default,
.stack-roomy {
    display: flex;
    flex-direction: column;
}

.stack-compact { gap: var(--section-gap-compact); }
.stack-default { gap: var(--section-gap); }
.stack-roomy { gap: var(--section-gap-roomy); }

.text-truncate {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-clamp-2,
.text-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-clamp-2 { -webkit-line-clamp: 2; }
.text-clamp-3 { -webkit-line-clamp: 3; }

.break-anywhere { overflow-wrap: anywhere; word-break: break-word; }

/* ─── Page title row ─────────────────────────────────────────────── */
.page-title-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
}

.page-title-row h3, .page-title-row h4 {
    margin: 0;
    font-weight: 700;
    color: var(--accent-hover);
}

/* ─── Modern card ────────────────────────────────────────────────── */
.ind-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-card);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}

.ind-card:hover {
    transform: translateY(var(--lift-hover-y));
    box-shadow: var(--shadow-card-hover);
}

.ind-card:active {
    transform: translateY(var(--lift-active-y));
    box-shadow: var(--shadow-card-active);
}

.elevated {
    box-shadow: var(--shadow-card);
}

.elevated-interactive {
    transition: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}

.elevated-interactive:hover {
    transform: translateY(var(--lift-hover-y));
    box-shadow: var(--shadow-card-hover);
}

.elevated-interactive:active {
    transform: translateY(var(--lift-active-y));
    box-shadow: var(--shadow-card-active);
}

/* ─── Iconography ───────────────────────────────────────────────── */
.ui-icon,
.e-icons,
.material-icons {
    flex-shrink: 0;
}

.ui-icon {
    width: 1rem;
    height: 1rem;
    display: block;
}

.ind-icon-btn,
.btn-icon,
.toast-close,
.rdialog-close {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ind-icon-btn,
.btn-icon {
    border-radius: var(--radius-pill);
}

.btn:focus-visible,
.ind-icon-btn:focus-visible,
.btn-icon:focus-visible,
.toast-close:focus-visible,
.rdialog-close:focus-visible,
.asset-card-main:focus-visible,
.more-tile:focus-visible,
.goals-filter-tab:focus-visible,
.seg-tab:focus-visible,
.theme-opt:focus-visible,
.chip-item:focus-within,
.chip-action:focus-visible,
.chip-social:focus-visible,
.asset-hero-host:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus-ring);
}

.ind-icon-btn .e-icons,
.btn-icon .e-icons,
.btn-icon .material-icons,
.btn-icon .material-symbols-rounded {
    color: currentColor;
    font-size: 1.15rem;
    line-height: 1;
}

[data-theme="dark"] .btn-icon,
[data-theme="dark"] .asset-action-btn,
[data-theme="dark"] .chip-item .chip-social,
[data-theme="dark"] .chip-item .chip-action,
[data-theme="dark"] .more-tile > .material-icons:last-child,
[data-theme="dark"] .search-icon,
[data-theme="dark"] .asset-chev,
[data-theme="dark"] .goal-row-chev {
    color: var(--fg-secondary);
}

[data-theme="dark"] .btn-icon:hover,
[data-theme="dark"] .asset-action-btn:hover,
[data-theme="dark"] .chip-item .chip-social:hover,
[data-theme="dark"] .chip-item .chip-action:hover,
[data-theme="dark"] .more-tile:hover > .material-icons:last-child {
    color: var(--accent-hover);
}

.ind-icon-btn:hover,
.btn-icon:hover {
    background: var(--accent-soft);
    color: var(--accent);
}

.row-action-cluster {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    flex: 0 0 auto;
}

.row-action-cluster > .btn-icon,
.asset-card-actions > .btn-icon,
.entity-delete-btn {
    flex: 0 0 auto;
}

.row-action-cluster > .row-action-secondary,
.asset-card-actions > .row-action-secondary,
.mission-card-actions > .row-action-secondary,
.work-item-actions > .row-action-secondary,
.action-order-controls.row-action-secondary {
    order: 0;
}

.row-action-cluster > .btn-icon:not(.row-action-secondary),
.asset-card-actions > .btn-icon:not(.row-action-secondary),
.mission-card-actions > .btn-icon:not(.row-action-secondary),
.work-item-actions > .btn-icon:not(.row-action-secondary) {
    order: 1;
}

.row-action-secondary,
.row-actions-reveal {
    opacity: 1;
    transition: opacity var(--dur-fast), transform var(--dur-fast);
}

@media (hover: hover) and (pointer: fine) {
    .row-actions-reveal .row-action-secondary {
        opacity: 0;
        pointer-events: none;
        transform: translateX(0.25rem);
    }

    .asset-card.row-actions-reveal .asset-card-actions {
        opacity: 0;
        pointer-events: none;
        transform: translateX(0.25rem);
        transition: opacity var(--dur-fast), transform var(--dur-fast);
    }

    .row-actions-reveal:hover .row-action-secondary,
    .row-actions-reveal:focus-within .row-action-secondary,
    .asset-card.row-actions-reveal:hover .asset-card-actions,
    .asset-card.row-actions-reveal:focus-within .asset-card-actions {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(0);
    }
}

/* ─── Loading spinner ────────────────────────────────────────────── */
.ind-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    gap: 0.75rem;
    color: var(--fg-muted);
}

.ind-spinner span,
.ind-spinner p {
    margin: 0;
    color: var(--fg-muted);
    font-size: var(--fs-small);
    line-height: var(--lh-base);
}

.ind-loading-row {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--fg-muted);
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    padding: 0.875rem 1rem;
}

.ind-spinner .spinner-ring {
    width: 36px;
    height: 36px;
    border: 3px solid var(--ind-blue-light);
    border-top-color: var(--ind-blue);
    border-radius: 50%;
    animation: ind-spin 0.7s linear infinite;
}

.skeleton {
    background: var(--gradient-skeleton);
    background-size: 1000px 100%;
    animation: shimmer 1.6s linear infinite;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.skeleton-text {
    height: 0.875rem;
    margin-bottom: 0.5rem;
}

.skeleton-text.lg {
    height: 1.25rem;
}

.skeleton-text.short {
    width: 40%;
}

.skeleton-text.med {
    width: 70%;
}

.skeleton-circle {
    border-radius: var(--radius-pill);
}

.skeleton-card {
    border-radius: var(--radius-lg);
    padding: 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-sm);
}

.skeleton-list {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

@keyframes ind-spin { to { transform: rotate(360deg); } }

/* ─── Empty state ────────────────────────────────────────────────── */
.ind-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    gap: 0.75rem;
    color: var(--fg-muted);
    text-align: center;
}

.ind-empty .e-icons,
.ind-empty .material-icons {
    font-size: 2.5rem;
    color: var(--ind-blue-light);
}

/* ─── Inline alert banners ───────────────────────────────────────── */
.ind-alert {
    border-radius: var(--radius-md);
    padding: 0.875rem 1rem;
    font-size: var(--fs-small);
    margin-bottom: 1rem;
    border: 1px solid transparent;
    line-height: var(--lh-base);
    box-shadow: var(--shadow-sm);
}

.ind-alert-warn {
    background: var(--warning-soft);
    border-color: var(--warning);
    color: var(--warning);
}

.ind-alert-success {
    background: var(--success-soft);
    border-color: var(--success);
    color: var(--success);
}

/* ─── Route fallback surfaces ───────────────────────────────────── */
.fallback-page {
    min-height: min(30rem, calc(100dvh - 8rem));
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.fallback-surface {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-surface) 94%, var(--bg-raised)), var(--bg-surface));
    border: 1px solid color-mix(in srgb, var(--border-default) 88%, transparent);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    color: var(--fg-muted);
}

.fallback-surface-accent {
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--accent-soft) 62%, transparent), transparent 42%),
        linear-gradient(180deg, color-mix(in srgb, var(--bg-surface) 94%, var(--bg-raised)), var(--bg-surface));
}

.fallback-icon {
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.fallback-copy {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    max-width: 38rem;
}

.fallback-copy h1 {
    margin: 0;
    color: var(--fg-primary);
    font-size: var(--fs-h1);
    line-height: var(--lh-tight);
    overflow-wrap: anywhere;
}

.fallback-copy p {
    margin: 0;
    color: var(--fg-muted);
    line-height: var(--lh-relaxed);
}

.fallback-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ind-unauth {
    text-align: left;
    margin-top: 2rem;
}

.auth-required {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}

.signin-label-desktop {
    display: inline;
}

.signin-label-mobile {
    display: none;
}

@media (max-width: 767.98px) {
    .signin-label-desktop {
        display: none;
    }

    .signin-label-mobile {
        display: inline;
    }
}

a, .btn-link {
    color: var(--accent);
}

.btn-primary {
    color: var(--fg-on-accent);
    background-color: var(--accent);
    border-color: var(--accent-hover);
    border-radius: var(--radius-btn);
    transition: background-color var(--transition), box-shadow var(--transition);
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
    box-shadow: var(--shadow-primary-hover);
}

app {
    position: relative;
    display: flex;
    /*flex-direction: column;*/ /*This is removed to enable column width to be set correctly in Chrome Extension*/
}

.top-row {
    height: 3.5rem;
    display: flex;
    align-items: center;
}

h1, h2, h3, h4, h5 {
    color: var(--fg-primary);
}

.main {
    flex: 1;
}

    .main .top-row {
        background-color: var(--bg-raised);
        border-bottom: 1px solid var(--border-default);
        justify-content: flex-end;
    }

        .main .top-row > a, .main .top-row .btn-link {
            white-space: nowrap;
            margin-left: 1.5rem;
        }

.main .top-row a:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar {
    background-image: var(--gradient-sidebar); /* Indevices branding */
}

    .sidebar .top-row {
        background-color: var(--bg-overlay);
    }

    .sidebar .navbar-brand {
        font-size: 1.1rem;
    }

    .sidebar .oi {
        width: 2rem;
        font-size: 1.1rem;
        vertical-align: text-top;
        top: -2px;
    }

    .sidebar .nav-item {
        font-size: 0.9rem;
        padding-bottom: 0.5rem;
    }

        .sidebar .nav-item:first-of-type {
            padding-top: 1rem;
        }

        .sidebar .nav-item:last-of-type {
            padding-bottom: 1rem;
        }

        .sidebar .nav-item a {
            color: var(--fg-on-brand-muted);
            border-radius: 4px;
            height: 3rem;
            display: flex;
            align-items: center;
            line-height: 3rem;
        }

            .sidebar .nav-item a.active {
                background-color: var(--bg-brand-glass-strong);
                color: var(--fg-on-accent);
            }

            .sidebar .nav-item a:hover {
                background-color: var(--bg-brand-glass);
                color: var(--fg-on-accent);
            }

.content {
    padding-top: 1.1rem;
}

.navbar-toggler {
    background-color: var(--bg-brand-glass);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--success);
}

.invalid {
    outline: 1px solid var(--danger);
}

.validation-message {
    color: var(--danger);
    font-size: 0.8125rem;
    margin-top: 0.25rem;
}

#blazor-error-ui {
    background: var(--warning-soft);
    bottom: 0;
    box-shadow: 0 -1px 2px var(--shadow-sm);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

@media (max-width: 767.98px) {
    .main .top-row:not(.auth) {
        display: none;
    }

    .main .top-row.auth {
        justify-content: space-between;
    }

    .main .top-row a, .main .top-row .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 768px) {
    app {
        flex-direction: row;
    }

    .sidebar {
        width: 250px;
        height: 100dvh;
        position: sticky;
        top: 0;
    }

    .main .top-row {
        position: sticky;
        top: 0;
    }

    .main > div {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }

    .navbar-toggler {
        display: none;
    }

    .sidebar .collapse {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
}

@keyframes fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

@keyframes scale-in {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

.fade-up {
    animation: fade-up var(--dur-base) var(--ease-emphasized) both;
}

.fade-delay-1 { animation-delay: var(--stagger-1); }
.fade-delay-2 { animation-delay: var(--stagger-2); }
.fade-delay-3 { animation-delay: var(--stagger-3); }
.fade-delay-4 { animation-delay: var(--stagger-4); }

.fade-in {
    animation: fade-in var(--dur-base) var(--ease-standard) both;
}

.scale-in {
    animation: scale-in var(--dur-base) var(--ease-emphasized) both;
}

/* Toasts */
.toast-stack {
    position: fixed;
    top: calc(env(safe-area-inset-top) + 0.875rem);
    right: 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    z-index: 2000;
    width: min(380px, calc(100vw - 1.75rem));
    pointer-events: none;
}

.toast-stack > * { pointer-events: auto; }

.toast-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 0.875rem 0.875rem 1rem;
    background: color-mix(in srgb, var(--bg-toast) 88%, var(--bg-surface));
    border: 1px solid var(--border-default);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    font-size: var(--fs-small);
    color: var(--fg-primary);
    backdrop-filter: blur(18px) saturate(1.15);
    transform-origin: top right;
}

.toast-success { border-left-color: var(--success); }
.toast-success .toast-icon { color: var(--success); }
.toast-error { border-left-color: var(--danger); }
.toast-error .toast-icon { color: var(--danger); }
.toast-warning { border-left-color: var(--warning); }
.toast-warning .toast-icon { color: var(--warning); }
.toast-info .toast-icon { color: var(--accent); }

.toast-icon {
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    background: var(--bg-raised);
    font-size: 1rem;
    margin-top: -0.125rem;
}
.toast-body { flex: 1; display: flex; flex-direction: column; gap: 0.125rem; }
.toast-body strong { font-weight: var(--fw-semibold); font-size: var(--fs-body); }

.toast-close {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--fg-muted);
    padding: 0;
    border-radius: var(--radius-pill);
    transition: background var(--dur-fast), color var(--dur-fast);
    margin: -0.625rem -0.625rem -0.625rem 0;
}

.toast-close:hover { background: var(--bg-raised); color: var(--fg-primary); }

.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: currentColor;
    opacity: 0.4;
    animation: toast-progress linear forwards;
    width: 100%;
}

.toast-success .toast-progress { color: var(--success); }
.toast-error .toast-progress { color: var(--danger); }
.toast-warning .toast-progress { color: var(--warning); }
.toast-info .toast-progress { color: var(--accent); }

@keyframes toast-progress { from { transform: scaleX(1); transform-origin: left; } to { transform: scaleX(0); transform-origin: left; } }

/* Responsive dialog */
.rdialog {
    border: none;
    padding: 0;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--bg-surface) 94%, var(--bg-raised)) 0%, var(--bg-surface) 100%);
    color: var(--fg-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    max-width: 480px;
    width: calc(100% - 2rem);
    max-height: 85dvh;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid color-mix(in srgb, var(--border-default) 82%, transparent);
    backdrop-filter: blur(20px) saturate(1.08);
    isolation: isolate;
}

.rdialog[open] { display: flex; animation: scale-in var(--dur-base) var(--ease-emphasized); }

.rdialog::backdrop {
    background: var(--bg-overlay);
    backdrop-filter: blur(8px);
    animation: fade-in var(--dur-base) var(--ease-standard);
}

.rdialog-grabber { display: none; }

.rdialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.875rem;
    padding: 1rem 1rem 0.875rem 1.25rem;
    border-bottom: 1px solid color-mix(in srgb, var(--border-default) 78%, transparent);
    background: color-mix(in srgb, var(--bg-raised) 70%, var(--bg-surface));
}

.rdialog-header h2 { min-width: 0; margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-semibold); line-height: var(--lh-tight); overflow-wrap: anywhere; }

.rdialog-close {
    flex: 0 0 auto;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    cursor: pointer;
    padding: 0;
    border-radius: var(--radius-pill);
    color: var(--fg-muted);
    box-shadow: var(--shadow-sm);
    transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
}

.rdialog-close .material-icons { font-size: 1.15rem; }

.rdialog-close:hover { background: var(--bg-raised); border-color: var(--border-strong); color: var(--fg-primary); transform: translateY(-1px); box-shadow: var(--shadow-md); }

.rdialog-body { padding: 1rem 1.25rem 1.25rem; overflow-y: auto; flex: 1; min-height: 0; }

.rdialog-message {
    margin: 0 0 1rem;
    color: var(--fg-primary);
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);
}

.rdialog-footer {
    padding: 0.875rem 1.25rem 1rem;
    border-top: 1px solid color-mix(in srgb, var(--border-default) 78%, transparent);
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    background: color-mix(in srgb, var(--bg-raised) 88%, var(--bg-surface));
    flex-wrap: wrap;
}

.rdialog-footer:empty { display: none; }

.rdialog.focus-area-dialog { max-width: min(92vw, 36rem); }
.rdialog.focus-area-dialog .rdialog-body { padding-bottom: 0.875rem; }
.rdialog.focus-delete-dialog { max-width: min(92vw, 30rem); }

.rdialog.modal-new-goal {
    /* Desktop: inherit centered <dialog> defaults from .rdialog. */
    max-height: min(320px, 85dvh);
}

.rdialog.modal-new-goal .rdialog-body {
    flex: 0 0 auto;
    overflow: visible;
}

.rdialog.modal-new-goal[open] {
    animation: none !important;
}

.modal-new-goal-field {
    margin: 0;
    position: relative;
    z-index: 2;
}

.modal-new-goal-field > label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--fg-secondary);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
}

.dialog-form-intro {
    margin: 0;
    color: var(--fg-muted);
    font-size: var(--fs-small);
    line-height: var(--lh-normal);
}

.modal-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    margin: 0;
    padding: 0.75rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--bg-raised) 72%, var(--bg-surface));
    color: var(--fg-primary);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    line-height: var(--lh-normal);
    cursor: pointer;
}

.modal-checkbox-row input {
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    margin: 0.1rem 0 0;
    accent-color: var(--accent);
}

.modal-checkbox-row:focus-within {
    border-color: var(--accent);
    box-shadow: var(--shadow-focus-ring);
}

.rdialog.modal-new-goal .modal-new-goal-input,
.rdialog.work-item-dialog .modal-new-goal-input {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--fg-primary) !important;
    -webkit-text-fill-color: var(--fg-primary);
    box-sizing: border-box;
    padding: 0 0.875rem;
    line-height: var(--lh-base);
    position: relative;
    z-index: 3;
}

.rdialog.modal-new-goal input.modal-new-goal-input,
.rdialog.modal-new-goal select.modal-new-goal-input,
.rdialog.work-item-dialog input.modal-new-goal-input,
.rdialog.work-item-dialog select.modal-new-goal-input {
    height: 44px;
    line-height: 42px;
}

.rdialog.modal-new-goal textarea.modal-new-goal-input,
.rdialog.work-item-dialog textarea.modal-new-goal-input {
    height: auto;
    padding: 0.75rem 0.875rem;
    line-height: var(--lh-normal);
    resize: vertical;
}

.rdialog.modal-new-goal .modal-new-goal-input:focus,
.rdialog.modal-new-goal .modal-new-goal-input:focus-visible,
.rdialog.work-item-dialog .modal-new-goal-input:focus,
.rdialog.work-item-dialog .modal-new-goal-input:focus-visible,
.rdialog.work-item-dialog .form-select-native:focus,
.rdialog.work-item-dialog .form-select-native:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--shadow-focus-ring);
}

@supports (-webkit-touch-callout: none) {
    .rdialog.modal-new-goal {
        width: min(480px, calc(100% - max(1rem, env(safe-area-inset-left) + env(safe-area-inset-right))));
        max-height: min(320px, 80dvh);
    }

    .rdialog.modal-new-goal .rdialog-body {
        -webkit-overflow-scrolling: touch;
    }
}

/* Inputs */
.e-input-group, .e-control-wrapper, .e-textbox-wrap {
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--border-default) !important;
    background: var(--bg-surface) !important;
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
    min-height: 44px;
    box-sizing: border-box;
    box-shadow: none !important;
    outline: none !important;
}

.e-input-group::before,
.e-input-group::after,
.e-control-wrapper::before,
.e-control-wrapper::after,
.e-textbox-wrap::before,
.e-textbox-wrap::after {
    display: none !important;
}

.e-control-wrapper .e-input-group,
.e-control-wrapper .e-textbox-wrap,
.e-input-group .e-input-group {
    border: 0 !important;
    box-shadow: none !important;
    min-height: auto;
}

.e-input-group:hover, .e-control-wrapper:hover, .e-textbox-wrap:hover { border-color: var(--border-strong) !important; }

.e-input-group.e-input-focus, .e-control-wrapper.e-input-focus,
.e-input-group:focus-within,
.e-control-wrapper:focus-within,
.e-textbox-wrap:focus-within {
    border-color: var(--accent) !important;
    box-shadow: var(--shadow-focus-ring) !important;
}

.e-input { font-family: var(--font-sans) !important; font-size: var(--fs-body) !important; color: var(--fg-primary) !important; }
.ind-input {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-input);
    background: var(--bg-surface);
    color: var(--fg-primary);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: var(--lh-base);
    padding: 0 0.875rem;
    box-sizing: border-box;
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
}

.ind-input:hover { border-color: var(--border-strong); }
.ind-input:focus,
.ind-input:focus-visible {
    border-color: var(--accent);
    box-shadow: var(--shadow-focus-ring);
    outline: none;
}

.ind-input:disabled {
    background: var(--bg-sunken);
    color: var(--fg-disabled);
    border-color: var(--border-subtle);
    cursor: not-allowed;
}

.ind-input::placeholder,
.modal-new-goal-input::placeholder,
.form-select-native:invalid {
    color: var(--fg-placeholder);
    opacity: 0.74;
}

.ind-textarea {
    min-height: 7rem;
    padding: 0.75rem 0.875rem;
    line-height: var(--lh-base);
    resize: vertical;
}

.field .ind-input { width: 100%; }
.e-input-group input.e-input,
.e-control-wrapper input.e-input {
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    min-height: 42px !important;
    height: 42px !important;
    line-height: 42px !important;
    padding: 0 0.875rem !important;
}
.e-input-group textarea.e-input,
.e-control-wrapper textarea.e-input {
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    line-height: var(--lh-base) !important;
    padding: 0.75rem 0.875rem !important;
}
.e-ddl.e-control-wrapper,
.e-dropdownlist.e-control-wrapper,
.e-control-wrapper.e-ddl {
    display: flex !important;
    align-items: center !important;
}
.e-ddl.e-control-wrapper .e-input,
.e-dropdownlist.e-control-wrapper .e-input,
.e-control-wrapper.e-ddl .e-input {
    display: flex !important;
    align-items: center !important;
}
.e-float-text, .e-input-group .e-float-text { color: var(--fg-muted) !important; font-weight: var(--fw-medium); }
.e-input::placeholder { color: var(--fg-placeholder); opacity: 0.74; }
.e-input-group.e-input-focus .e-float-text,
.e-input-group.e-valid-input .e-float-text { color: var(--accent) !important; }

/* Syncfusion alignment */
.e-control,
.e-css,
.e-input,
.e-btn,
.e-popup,
.e-dialog,
.e-list-item {
    font-family: var(--font-sans) !important;
}

.e-control-wrapper.e-disabled,
.e-input-group.e-disabled,
.e-input-group.e-disabled input.e-input,
.e-control-wrapper.e-disabled input.e-input,
.e-disabled .e-input,
.e-btn.e-disabled,
.e-btn:disabled {
    color: var(--fg-disabled) !important;
    -webkit-text-fill-color: var(--fg-disabled) !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
}

.e-control-wrapper.e-disabled,
.e-input-group.e-disabled,
.e-control-wrapper.e-readonly,
.e-input-group.e-readonly {
    background: var(--bg-sunken) !important;
    border-color: var(--border-subtle) !important;
}

.e-error,
.e-input-group.e-error,
.e-control-wrapper.e-error {
    border-color: var(--danger) !important;
}

.e-popup,
.e-popup.e-control,
.e-dropdown-popup,
.e-ddl.e-popup {
    background: var(--bg-surface) !important;
    color: var(--fg-primary) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-lg) !important;
    overflow: hidden;
}

.e-popup .e-content,
.e-dropdown-popup .e-content,
.e-ddl.e-popup .e-content {
    background: var(--bg-surface) !important;
    color: var(--fg-primary) !important;
}

.e-list-item,
.e-dropdownbase .e-list-item {
    color: var(--fg-primary) !important;
    font-size: var(--fs-body) !important;
    min-height: 44px;
    display: flex;
    align-items: center;
}

.e-list-item.e-hover,
.e-list-item:hover,
.e-dropdownbase .e-list-item.e-hover {
    background: var(--bg-raised) !important;
    color: var(--fg-primary) !important;
}

.e-list-item.e-active,
.e-dropdownbase .e-list-item.e-active,
.e-dropdownbase .e-list-item.e-item-focus {
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
    font-weight: var(--fw-semibold) !important;
}

.e-switch-wrapper,
.e-switch-wrapper .e-switch-inner {
    font-family: var(--font-sans) !important;
}

.e-switch-wrapper .e-switch-on {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
}

.e-switch-wrapper .e-switch-off {
    background: var(--bg-sunken) !important;
    border-color: var(--border-default) !important;
}

.e-switch-wrapper .e-switch-handle {
    box-shadow: var(--shadow-sm) !important;
}

.e-switch-wrapper:focus-within .e-switch-inner,
.e-switch-wrapper.e-focus .e-switch-inner {
    box-shadow: var(--shadow-focus-ring) !important;
}

.e-switch-wrapper.e-switch-disabled {
    opacity: 1 !important;
    filter: grayscale(0.15);
}

/* Native select (used inside top-layer dialogs where Syncfusion popups are clipped) */
.form-select-native {
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-default);
    background-color: var(--bg-surface);
    color: var(--fg-primary);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    padding: 0 2.25rem 0 0.875rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='4 6 8 10 12 6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.form-select-native:hover { border-color: var(--border-strong); }
.form-select-native:focus-visible {
    border-color: var(--accent);
    box-shadow: var(--shadow-focus-ring);
    outline: none;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    padding: 0.5rem 0.95rem;
    min-height: 40px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
    text-decoration: none;
    line-height: 1;
}

.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary, .e-btn.btn-primary {
    background: var(--gradient-primary);
    color: var(--fg-on-accent);
    border-color: var(--accent);
    box-shadow: var(--shadow-primary);
}

.btn-primary:hover { background: var(--gradient-primary-hover); border-color: var(--accent-hover); box-shadow: var(--shadow-primary-hover); }

[data-theme="dark"] .btn-primary,
[data-theme="dark"] .e-btn.btn-primary {
    background: var(--gradient-primary);
    color: var(--fg-on-accent);
    border-color: var(--accent);
    box-shadow: var(--shadow-primary);
}

[data-theme="dark"] .btn-primary:hover { background: var(--gradient-primary-hover); box-shadow: var(--shadow-primary-hover); }

.btn-secondary, .e-btn.btn-secondary {
    background: var(--bg-surface);
    color: var(--accent);
    border-color: var(--border-strong);
}

.btn-secondary:hover { background: var(--accent-soft); }

.btn-ghost, .e-btn.btn-ghost {
    background: transparent;
    color: var(--fg-primary);
    border-color: transparent;
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
    background: var(--bg-raised);
    color: var(--fg-primary);
}

[data-theme="dark"] .btn-ghost:hover,
[data-theme="dark"] .btn-ghost:focus-visible {
    color: var(--fg-primary);
}

.btn-danger, .e-btn.btn-danger { background: var(--danger); color: var(--fg-on-accent); border-color: var(--danger); }
.btn-danger:hover { background: var(--danger); }
.btn-icon { padding: 0; }
.btn-sm { min-height: 36px; padding: 0.3rem 0.625rem; font-size: var(--fs-small); }
.btn-icon.btn-sm,
.e-btn.btn-icon.btn-sm {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
}
.btn-icon.btn-sm .e-icons,
.btn-icon.btn-sm .material-icons { font-size: 1.05rem; }

@media (max-width: 640px) {
    .btn-label-optional { display: none; }

    .btn.btn-ghost:not(.btn-icon):has(> .e-icons),
    .btn.btn-ghost:not(.btn-icon):has(> .material-icons),
    .btn.btn-ghost:not(.btn-icon):has(> .material-symbols-rounded),
    .btn.btn-ghost:not(.btn-icon):has(> .ui-icon),
    .btn.btn-secondary:not(.btn-icon):has(> .e-icons),
    .btn.btn-secondary:not(.btn-icon):has(> .material-icons),
    .btn.btn-secondary:not(.btn-icon):has(> .material-symbols-rounded),
    .btn.btn-secondary:not(.btn-icon):has(> .ui-icon) {
        width: 44px;
        min-width: 44px;
        padding: 0;
        gap: 0;
        overflow: hidden;
        font-size: 0;
    }

    .btn.btn-ghost:not(.btn-icon):has(> .e-icons) > .e-icons,
    .btn.btn-ghost:not(.btn-icon):has(> .material-icons) > .material-icons,
    .btn.btn-ghost:not(.btn-icon):has(> .material-symbols-rounded) > .material-symbols-rounded,
    .btn.btn-ghost:not(.btn-icon):has(> .ui-icon) > .ui-icon,
    .btn.btn-secondary:not(.btn-icon):has(> .e-icons) > .e-icons,
    .btn.btn-secondary:not(.btn-icon):has(> .material-icons) > .material-icons,
    .btn.btn-secondary:not(.btn-icon):has(> .material-symbols-rounded) > .material-symbols-rounded,
    .btn.btn-secondary:not(.btn-icon):has(> .ui-icon) > .ui-icon {
        font-size: 1.15rem;
    }
}

.btn-lg { min-height: 52px; padding: 0.875rem 1.5rem; font-size: 1rem; }

@media (pointer: coarse) {
    .btn { min-height: 44px; }
    .btn-sm { min-height: 44px; padding: 0.375rem 0.75rem; }
    .ind-icon-btn,
    .btn-icon,
    .btn-icon.btn-sm,
    .e-btn.btn-icon.btn-sm {
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
    }
}

@media (max-width: 640px) {
    .toast-stack {
        top: calc(env(safe-area-inset-top) + 0.5rem);
        left: 0.75rem;
        right: 0.75rem;
        width: auto;
        max-width: none;
        align-items: stretch;
    }

    .toast-item {
        border-radius: var(--radius-md);
        transform-origin: top center;
    }

    .rdialog {
        position: fixed;
        top: calc(env(safe-area-inset-top) + var(--mobile-header-height) + 0.5rem);
        right: max(0.5rem, env(safe-area-inset-right));
        bottom: calc(env(safe-area-inset-bottom) + var(--mobile-footer-height) + 0.5rem);
        left: max(0.5rem, env(safe-area-inset-left));
        /* Explicit height so Safari/WebKit computes the flex layout correctly.
           <dialog> in the top layer does not derive height from top+bottom alone. */
        height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--mobile-header-height) - var(--mobile-footer-height) - 1rem);
        max-width: none;
        width: auto;
        max-height: none;
        margin: 0;
        border-radius: var(--radius-lg);
        padding-bottom: 0;
    }

    .rdialog-header {
        padding: 0.75rem 0.875rem 0.625rem 1rem;
    }

    .rdialog-body {
        padding: 0.875rem 1rem 1rem;
    }

    .rdialog-footer {
        padding: 0.75rem 1rem calc(0.875rem + env(safe-area-inset-bottom));
        justify-content: stretch;
    }

    .rdialog-footer .btn {
        flex: 1 1 10rem;
    }

    .rdialog.focus-area-dialog,
    .rdialog.focus-delete-dialog { max-width: none; }
    .rdialog.focus-area-dialog .rdialog-body { padding-bottom: 0.75rem; }
    .focus-picker { max-height: calc(100dvh - var(--mobile-header-height) - var(--mobile-footer-height) - 15rem); }

    .rdialog.modal-new-goal {
        /* Inherit mobile bottom-sheet positioning from .rdialog above. */
        max-height: none;
    }

    .rdialog[open] { animation: slide-up var(--dur-base) var(--ease-emphasized) !important; }

    .rdialog.modal-new-goal[open] { animation: none !important; }

    .rdialog-grabber {
        display: block;
        width: 36px;
        height: 4px;
        background: var(--border-default);
        border-radius: var(--radius-pill);
        margin: 0.625rem auto 0;
    }

    .rdialog.modal-new-goal .rdialog-grabber {
        display: none;
    }

    /* Keep Syncfusion popups aligned with inputs and clear of sticky header/footer */
    .e-popup,
    .e-popup.e-control,
    .e-dropdown-popup,
    .e-ddl.e-popup,
    .e-ddl.e-popup.e-popup-open {
        z-index: 2200 !important;
        max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--mobile-header-height) - var(--mobile-footer-height) - 1rem) !important;
    }

    .e-dropdown-popup .e-content,
    .e-ddl.e-popup .e-content {
        max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--mobile-header-height) - var(--mobile-footer-height) - 4.5rem) !important;
    }

    .fallback-page {
        min-height: auto;
        justify-content: flex-start;
    }

    .fallback-surface {
        padding: 1.125rem;
        gap: 0.875rem;
    }

    .fallback-copy h1 {
        font-size: var(--fs-h2);
    }

    .fallback-actions {
        width: 100%;
    }

    .fallback-actions .btn,
    .fallback-surface > .btn {
        width: 100%;
        justify-content: center;
    }
}

@keyframes slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* PR 4 Focus dashboard */
.focus-page {
    width: min(100%, var(--content-workspace));
    max-width: var(--content-workspace);
}

/* ── Search page ── */
.search-page { width: min(100%, var(--content-workspace)); max-width: var(--content-workspace); }
.search-command-hero { display: flex; flex-direction: column; gap: 0.875rem; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 1rem 1.125rem; margin-bottom: 1rem; }
.search-command-copy { display: flex; flex-direction: column; gap: 0.25rem; }
.search-command-hero h1 { margin: 0; font-size: var(--fs-h2); color: var(--fg-primary); line-height: var(--lh-tight); }
.search-command-hero p { margin: 0; max-width: 52ch; color: var(--fg-muted); font-size: var(--fs-small); }
.search-input-wrap { position: relative; display: flex; align-items: center; background: var(--bg-raised); border: 1px solid var(--border-default); border-radius: var(--radius-pill); padding: 0 0.625rem 0 0.75rem; box-shadow: var(--shadow-sm); transition: box-shadow var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast); }
.search-input-wrap:focus-within { box-shadow: var(--shadow-focus-ring); border-color: var(--accent); }
.search-icon { color: var(--fg-muted); font-size: 1rem; flex-shrink: 0; }
.search-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: var(--fs-body); color: var(--fg-primary); padding: 0.625rem 0.5rem; }
.search-input:focus, .search-input:focus-visible { outline: none; box-shadow: none; }
.search-input::placeholder { color: var(--fg-placeholder); opacity: 1; }
.search-clear { flex-shrink: 0; }
.search-prompt { padding: 2rem 0; text-align: center; }
.search-prompt-text { color: var(--fg-muted); margin: 0; }
.search-starter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.search-starter-item { min-height: 7rem; padding: 0.875rem; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: var(--shadow-sm); }
.search-starter-item .material-icons { color: var(--accent); margin-bottom: 0.5rem; }
.search-starter-item strong, .search-starter-item small { display: block; }
.search-starter-item small { margin-top: 0.25rem; color: var(--fg-muted); line-height: var(--lh-base); }
.search-status-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.75rem; padding: 0 0.25rem; }
.search-status-row strong { color: var(--fg-primary); font-size: var(--fs-small); }
.search-status-row span { color: var(--fg-muted); font-size: var(--fs-small); }
.search-group { margin-bottom: 1.5rem; }
.search-group-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.search-group-head h3 { margin: 0; font-size: var(--fs-small); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-muted); }
.search-result-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--bg-raised); flex-shrink: 0; color: var(--fg-secondary); }
.search-goal-badge { display: inline-block; font-size: 0.7rem; color: var(--fg-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 640px) {
    .search-starter { grid-template-columns: 1fr; }
    .search-starter-item { min-height: 0; padding: 0.75rem 0.875rem; }
    .search-command-hero { padding: 0.875rem; }
}

.hero-card {
    background: linear-gradient(135deg, var(--ind-ink) 0%, var(--ind-blue-dark) 54%, var(--ind-blue) 100%);
    color: var(--fg-on-accent);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}

.hero-card::after {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, var(--bg-brand-glass), transparent 70%);
    border-radius: 50%;
}

.hero-card > * { position: relative; z-index: 1; }
.hero-greeting .text-caption { color: var(--fg-on-brand-muted); }
.hero-greeting h2 { color: var(--fg-on-accent); margin: 0.25rem 0 1.25rem; font-size: var(--fs-h1); font-weight: var(--fw-semibold); }
.hero-focus-label { font-size: var(--fs-caption); letter-spacing: var(--ls-wide); opacity: 0.8; }
.hero-focus h3 { color: var(--fg-on-accent); font-size: 1.25rem; margin: 0.375rem 0 1rem; line-height: var(--lh-tight); }
.hero-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.hero-actions .btn-primary { background: var(--fg-on-accent); color: var(--accent); border-color: var(--fg-on-accent); }
.hero-actions .btn-primary:hover { background: var(--accent-soft); }
.hero-actions .btn-secondary { background: transparent; color: var(--fg-on-accent); border-color: var(--border-on-brand); }
.hero-actions .btn-secondary:hover { background: var(--bg-brand-glass); }
.hero-empty p { margin: 0 0 0.875rem; opacity: 0.9; }

.stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.stat-pill {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 0.625rem 0.75rem;
    font-size: var(--fs-small);
    color: var(--fg-muted);
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    text-align: center;
}

.stat-pill span { font-size: 1.25rem; font-weight: var(--fw-semibold); color: var(--fg-primary); }
.stat-open span { color: var(--accent); }
.stat-focus span { color: var(--ind-purple); }
.stat-done span { color: var(--success); }

.section-head { display: flex; align-items: center; justify-content: space-between; margin: 1rem 0 0.75rem; gap: 1rem; }
.section-head h3 { margin: 0; }
.goals-desktop { display: none; }
.goals-mobile { display: block; }
.focus-assets-section { margin-top: 1.25rem; }

@media (min-width: 769px) {
    .goals-desktop { display: block; }
    .goals-mobile { display: none; }
}

/* Empty state */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 13rem;
    padding: 2rem 1.25rem;
    text-align: center;
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-surface) 94%, var(--bg-raised)), var(--bg-surface));
    border: 1px dashed color-mix(in srgb, var(--border-default) 84%, var(--accent));
    border-radius: var(--radius-lg);
    gap: 0.625rem;
    isolation: isolate;
    box-shadow: var(--shadow-sm);
}

.empty-state h3 { margin: 0.25rem 0 0; font-size: var(--fs-h3); line-height: var(--lh-tight); }
.empty-state p { margin: 0 0 0.75rem; color: var(--fg-muted); max-width: 34ch; line-height: var(--lh-base); }
.empty-state .btn { margin-top: 0.125rem; }
.empty-illustration { line-height: 0; opacity: 0.95; filter: drop-shadow(0 14px 28px color-mix(in srgb, var(--accent) 13%, transparent)); }
.empty-illustration svg { width: 5.75rem; height: 5.75rem; }

/* Mobile goal list */
.goal-list { display: flex; flex-direction: column; gap: 1.25rem; }
.goal-group-head { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.25rem 0.5rem; font-size: var(--fs-small); color: var(--fg-muted); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.status-onhold { background: var(--warning); }
.status-discarded { background: var(--danger); }
.status-open { background: var(--accent); }
.status-infocus { background: var(--ind-purple); }
.status-completed { background: var(--success); }
.goal-group-name { font-weight: var(--fw-semibold); color: var(--fg-primary); text-transform: capitalize; }
.goal-group-count { background: var(--bg-raised); color: var(--accent); padding: 0 0.5rem; border-radius: var(--radius-pill); font-weight: var(--fw-semibold); }

.goal-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 0.875rem 1rem;
    margin-top: 0.5rem;
    cursor: pointer;
    transition: transform var(--dur-fast), box-shadow var(--dur-fast), border-color var(--dur-fast);
}

.goal-row:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.goal-row:active { transform: scale(0.99); }
.goal-row-body { flex: 1; min-width: 0; }
.goal-row-body h4 { margin: 0; font-size: var(--fs-body); font-weight: var(--fw-semibold); }
.goal-row-body p { margin: 0.25rem 0 0; font-size: var(--fs-small); color: var(--fg-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.goal-row-chev { color: var(--fg-muted); }

/* Desktop Kanban polish */
.goal-kanban { display: block; }
.goal-kanban .e-kanban-content { min-height: 260px; }
.goal-kanban .e-card { border: none !important; background: transparent !important; box-shadow: none !important; }
.goal-kanban .e-card-content { padding: 0 !important; }
.kanban-header-chip { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--fg-primary); }
.kanban-goal-card { display: flex; gap: 0.75rem; align-items: flex-start; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 0.875rem 1rem; }
.kanban-card-grip { color: var(--fg-muted); cursor: grab; padding-top: 0.125rem; }
.kanban-card-grip[aria-label] { min-width: 44px; min-height: 44px; display: inline-flex; align-items: flex-start; justify-content: center; border-radius: var(--radius-pill); }
.kanban-card-body { flex: 1; min-width: 0; }
.kanban-card-body h4 { margin: 0; font-size: var(--fs-body); font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; }
.kanban-card-actions { display: flex; align-items: center; gap: 0.125rem; flex-wrap: wrap; margin-top: 0.625rem; }

@media (max-width: 768px) {
    .goal-kanban { display: none; }
}

@media (max-width: 640px) {
    .goal-row { align-items: flex-start; padding: 0.75rem 0.875rem; }
    .goal-row-body p { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}

/* Assets cards */
.asset-section { position: relative; }
.segmented-tabs { position: relative; display: inline-flex; background: color-mix(in srgb, var(--bg-sunken) 82%, var(--bg-surface)); border: 1px solid var(--border-default); border-radius: var(--radius-pill); padding: 4px; margin: 0 0 1rem; box-shadow: var(--shadow-segment-inset); }
.segmented-tabs-2,
.segmented-tabs-3,
.segmented-tabs-4 { display: flex; width: 100%; max-width: 360px; }
.segmented-tabs-4 { max-width: 520px; }
.segmented-tabs-2 .seg-tab,
.segmented-tabs-3 .seg-tab,
.segmented-tabs-4 .seg-tab { flex: 1 1 0; justify-content: center; padding-left: 0.5rem; padding-right: 0.5rem; }
.seg-tab { position: relative; z-index: 1; background: transparent; border: none; padding: 0.5rem 1.125rem; min-height: 44px; font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--fg-muted); border-radius: var(--radius-pill); cursor: pointer; transition: color var(--dur-base); display: inline-flex; align-items: center; gap: 0.375rem; }
.seg-tab:hover { color: var(--fg-primary); }
.seg-tab:active { transform: scale(0.98); }
.seg-tab.active { color: var(--accent); }
.seg-count { background: var(--accent-soft); color: var(--accent); padding: 0 0.5rem; border-radius: var(--radius-pill); font-size: var(--fs-caption); }
.seg-indicator { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); background: var(--bg-segment-indicator); border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); transition: transform var(--dur-base) var(--ease-emphasized); }
[data-theme="dark"] .seg-indicator { background: var(--bg-segment-indicator-dark); box-shadow: inset 0 0 0 1px var(--border-segment-indicator-dark); border: none; }
.seg-discard { transform: translateX(100%); }
.segmented-tabs-3 .seg-read { transform: translateX(100%); }
.segmented-tabs-3 .seg-discard { transform: translateX(200%); }
.segmented-tabs-4 .seg-mission-onhold { transform: translateX(100%); }
.segmented-tabs-4 .seg-mission-completed { transform: translateX(200%); }
.segmented-tabs-4 .seg-mission-all { transform: translateX(300%); }
.segmented-tabs-4 .seg-indicator { width: calc(25% - 4px); }
.segmented-tabs-4 .seg-completed { transform: translateX(100%); }
.segmented-tabs-4 .seg-onhold { transform: translateX(200%); }
.segmented-tabs-4 .seg-discarded { transform: translateX(300%); }
.segmented-tabs-5 { display: flex; width: 100%; max-width: 640px; }
.segmented-tabs-5 .seg-tab { flex: 1 1 0; justify-content: center; padding-left: 0.5rem; padding-right: 0.5rem; }
.segmented-tabs-5 .seg-indicator { width: calc(20% - 4px); }
.segmented-tabs-5 .seg-mission-onhold,
.segmented-tabs-5 .seg-goal-onhold { transform: translateX(100%); }
.segmented-tabs-5 .seg-mission-completed,
.segmented-tabs-5 .seg-goal-completed { transform: translateX(200%); }
.segmented-tabs-5 .seg-mission-discarded,
.segmented-tabs-5 .seg-goal-discarded { transform: translateX(300%); }
.segmented-tabs-5 .seg-mission-all,
.segmented-tabs-5 .seg-goal-all { transform: translateX(400%); }
.assets-page,
.actions-page,
.missions-page,
.asset-detail-page,
.takeaways-page { width: min(100%, var(--content-workspace)); max-width: var(--content-workspace); }
.asset-section { display: flex; flex-direction: column; gap: 0.75rem; }
.asset-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.asset-card { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; min-height: 4.25rem; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); transition: box-shadow var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast); overflow: hidden; box-shadow: var(--shadow-sm); }
.asset-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); transform: translateY(-1px); }
.asset-card-main { flex: 1; min-width: 0; min-height: 4.25rem; display: flex; align-items: center; gap: 0.875rem; padding: 0.75rem 0.5rem 0.75rem 1rem; background: transparent; border: none; color: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.asset-card-main:hover { background: transparent; }
.asset-card-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0; padding-right: 0.375rem; flex-shrink: 0; }
.asset-ai-recommendation {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.375rem;
    padding-left: 0.625rem;
    border-left: 2px solid var(--border-default);
    margin-bottom: 0;
    color: var(--fg-muted);
    font-size: var(--fs-caption);
    line-height: var(--lh-relaxed);
    font-weight: var(--fw-regular);
    overflow-wrap: anywhere;
}

.asset-ai-recommendation-loading small {
    color: inherit;
    font-size: inherit;
}
.goals-mgmt-description { margin: 0; color: var(--fg-muted); font-size: var(--fs-small); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.asset-action-btn { color: var(--fg-muted); text-decoration: none; flex: 0 0 auto; }
.asset-action-btn:hover { color: var(--accent); }
.asset-action-delete:hover { color: var(--danger) !important; }
.asset-action-read:hover { color: var(--success) !important; }
.asset-favicon { width: 36px; height: 36px; border-radius: var(--radius-sm); flex-shrink: 0; background: var(--bg-favicon); padding: 4px; }
.asset-avatar { width: 36px; height: 36px; border-radius: var(--radius-pill); flex-shrink: 0; background: var(--gradient-avatar); color: var(--fg-on-accent); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-small); font-weight: var(--fw-semibold); line-height: 1; }
.asset-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.375rem; }
.asset-body h4 { margin: 0; font-size: var(--fs-body); font-weight: var(--fw-semibold); min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.asset-meta { display: flex; align-items: center; gap: 0.5rem; min-width: 0; flex-wrap: wrap; }
.asset-host { font-size: var(--fs-small); color: var(--fg-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: anywhere; }
.asset-category { display: inline-flex; align-items: center; min-height: 1.35rem; font-size: var(--fs-caption); font-weight: var(--fw-medium); line-height: 1; color: var(--fg-muted); background: var(--bg-raised); border: 1px solid var(--border-default); border-radius: var(--radius-pill); padding: 0.1875rem 0.5rem; max-width: 100%; }
.asset-chev { color: var(--fg-muted); }
.rdialog.asset-feedback-dialog { max-width: min(92vw, 32rem); }
.rdialog.asset-feedback-dialog .rdialog-body { padding-top: 1.125rem; }
.asset-feedback-panel { display: flex; flex-direction: column; gap: 1rem; }
.asset-feedback-options,
.asset-feedback-reasons { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.asset-feedback-chip { min-height: 2.375rem; padding: 0.4375rem 0.8125rem; font-size: var(--fs-small); border-radius: var(--radius-pill); background: var(--bg-surface); border-color: var(--border-default); box-shadow: var(--shadow-xs); }
.asset-feedback-chip:hover:not(:disabled) { border-color: var(--border-strong); background: var(--bg-raised); }
.asset-feedback-chip.active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent); }
.asset-feedback-save { min-height: 2.25rem; }
.asset-feedback-signal { display: flex; flex-direction: column; gap: 0.625rem; padding: 0.875rem; border: 1px solid color-mix(in srgb, var(--border-default) 86%, transparent); border-radius: var(--radius-md); background: color-mix(in srgb, var(--bg-raised) 78%, var(--bg-surface)); }
.asset-feedback-signal-copy { display: flex; flex-direction: column; gap: 0.125rem; }
.asset-feedback-signal-copy strong { font-size: var(--fs-small); color: var(--fg-default); }
.asset-feedback-signal-copy span { font-size: var(--fs-caption); color: var(--fg-muted); }

.focus-summary { margin-top: 1rem; padding-top: 0.875rem; border-top: 1px solid var(--border-default); display: flex; flex-direction: column; gap: 0.875rem; }
.focus-summary-group h4 { margin: 0 0 0.5rem; font-size: var(--fs-small); color: var(--fg-muted); text-transform: uppercase; letter-spacing: var(--ls-wide); }

/* Pull to refresh */
.ptr-indicator { height: 0; overflow: hidden; transition: height var(--dur-base); display: flex; align-items: center; justify-content: center; }
.ptr-spinner { width: 24px; height: 24px; border: 3px solid var(--border-default); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.9s linear infinite; }
.ptr-indicator.refreshing .ptr-spinner { animation-duration: 0.6s; }
@keyframes spin { to { transform: rotate(360deg); } }

/* PR 5 Forms and page polish */
.field {
    position: relative;
    display: block;
    padding-top: 0.75rem;
    margin-bottom: 0.875rem;
}

.field-label {
    position: absolute;
    top: 1.425rem;
    left: 0.875rem;
    color: var(--fg-muted);
    font-size: var(--fs-body);
    pointer-events: none;
    transform-origin: left top;
    transition: transform var(--dur-base) var(--ease-emphasized), color var(--dur-base), opacity var(--dur-base);
    background: var(--bg-surface);
    padding: 0 0.25rem;
    z-index: 2;
}

.field.is-focused .field-label,
.field.has-value .field-label {
    transform: translateY(-1.325rem) scale(0.78);
    color: var(--accent);
}

.field.has-error .field-label { color: var(--danger); }
.field.has-error .e-input-group,
.field.has-error .e-control-wrapper,
.field.has-error .ind-input { border-color: var(--danger) !important; }
.field.is-focused .e-input-group,
.field.is-focused .e-control-wrapper,
.field.is-focused .ind-input { border-color: var(--accent) !important; box-shadow: var(--shadow-focus-ring) !important; }

.field-helper,
.field-error {
    display: block;
    font-size: var(--fs-caption);
    margin-top: 0.3125rem;
    padding-left: 0.875rem;
    color: var(--fg-muted);
}

.field-error { color: var(--danger); display: inline-flex; align-items: center; gap: 0.25rem; }
.field .e-input-group,
.field .e-control-wrapper,
.field .ind-input { width: 100%; }

.field:not(.is-focused):not(.has-value) .ind-input::placeholder,
.field:not(.is-focused):not(.has-value) .e-input::placeholder {
    color: transparent;
}

.autosave { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 1.625rem; border-radius: var(--radius-pill); padding: 0.1875rem 0.5rem; background: color-mix(in srgb, var(--bg-raised) 78%, transparent); border: 1px solid color-mix(in srgb, var(--border-default) 70%, transparent); font-size: var(--fs-caption); color: var(--fg-muted); }
.autosave-saved { color: var(--success); }
.autosave-error { color: var(--danger); }
.autosave .ptr-spinner { width: 12px; height: 12px; border-width: 2px; }

.form-card {
    background: color-mix(in srgb, var(--bg-surface) 96%, var(--bg-raised));
    border: 1px solid color-mix(in srgb, var(--border-default) 86%, transparent);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.form-context { display: flex; flex-direction: column; gap: 0.125rem; margin-bottom: 0.75rem; }
.capture-page { width: min(100%, var(--content-workspace)); max-width: var(--content-workspace); }
.capture-form { display: flex; flex-direction: column; gap: 0.875rem; }
.new-goal-page,
.extension-page,
.admin-focus-page { width: min(100%, var(--content-workspace)); max-width: var(--content-workspace); }
.new-goal-form { display: flex; flex-direction: column; gap: 0.875rem; }
.new-goal-hero { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem 1.125rem; background: var(--bg-raised); border: 1px solid var(--border-default); border-radius: var(--radius-lg); }
.new-goal-hero h1 { margin: 0; color: var(--fg-primary); font-size: var(--fs-h2); line-height: var(--lh-tight); overflow-wrap: anywhere; }
.new-goal-hero p { margin: 0; color: var(--fg-muted); font-size: var(--fs-small); line-height: var(--lh-relaxed); }
.capture-hero { display: flex; align-items: stretch; justify-content: space-between; gap: 1rem; background: var(--bg-raised); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 1rem 1.125rem; margin-bottom: 0; }
.capture-hero-copy { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.capture-hero-copy h1 { margin: 0; color: var(--fg-primary); font-size: var(--fs-h2); line-height: var(--lh-tight); overflow-wrap: anywhere; }
.capture-hero-copy p { margin: 0; color: var(--fg-muted); font-size: var(--fs-small); line-height: var(--lh-relaxed); }
.capture-hero-stats { display: grid; grid-template-columns: repeat(3, minmax(3.75rem, 1fr)); gap: 0.5rem; flex-shrink: 0; }
.capture-stat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; min-height: 3.5rem; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-surface); color: var(--fg-muted); }
.capture-stat.complete { border-color: var(--success); color: var(--success); background: var(--success-soft); }
.capture-stat .material-icons { font-size: 1.125rem; }
.capture-stat small { font-size: var(--fs-caption); }
.capture-section { background: var(--bg-surface); }
.capture-two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.form-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-default); }
.form-actions-inline { justify-content: flex-end; border-top: none; padding-top: 0; margin: -0.25rem 0 1rem; }
.form-subsection { border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 0.875rem 1rem; margin-bottom: 0; }
.form-subsection header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.form-subsection h3 { margin: 0; font-size: var(--fs-body); }
.form-subsection-empty { margin: 0.75rem 0 0; color: var(--fg-muted); font-size: var(--fs-small); }
.asset-detail-display { display: grid; gap: 0.875rem; }
.action-detail-edit-form { display: grid; gap: 0.875rem; }
.action-detail-form-group { display: flex; flex-direction: column; gap: 0.5rem; }
.action-detail-nested-field { display: flex; flex-direction: column; gap: 0.25rem; }
.action-detail-edit-form .field { margin-bottom: 0; }
.asset-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.asset-detail-field { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; padding: 0.75rem 0.875rem; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-raised); }
.asset-detail-field-wide { grid-column: 1 / -1; }
.asset-detail-field span { color: var(--fg-muted); font-size: var(--fs-caption); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-wide); }
.asset-detail-field strong,
.asset-detail-field a { min-width: 0; color: var(--fg-primary); font-size: var(--fs-body); line-height: var(--lh-normal); overflow-wrap: anywhere; }
.asset-detail-field a { color: var(--accent); text-decoration: none; }
.asset-detail-field a:hover { text-decoration: underline; }
.inline-actions { display: flex; align-items: center; gap: 0.25rem; }
.chip-list { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0.75rem 0 0; }
.chip-item { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.25rem; border: 1px solid var(--border-default); border-radius: var(--radius-pill); padding: 0.3125rem 0.625rem; background: var(--bg-surface); font-size: var(--fs-small); cursor: pointer; transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast); }
.chip-item:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.chip-item:focus-within { box-shadow: var(--shadow-focus-ring); }
.chip-item.recently-added { border-color: var(--success); background: var(--success-soft); color: var(--success); }
.chip-item.chip-select-only { cursor: default; }
.chip-item.chip-select-only:hover { transform: none; box-shadow: none; }
.chip-item.selected { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.chip-item .chip-name { min-width: 0; line-height: 1.2; overflow-wrap: anywhere; }
.chip-item .chip-social,
.chip-item .chip-action { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; min-width: 2rem; min-height: 2rem; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--fg-default); text-decoration: none; opacity: 0.85; padding: 0; flex: 0 0 2rem; }
.chip-item .chip-social svg,
.chip-item .chip-action svg { display: block; width: 0.875rem; height: 0.875rem; }
.chip-item .chip-social:hover,
.chip-item .chip-action:hover { color: var(--accent); background: var(--accent-soft); opacity: 1; }
.chip-item .chip-action:focus-visible { box-shadow: var(--shadow-focus-ring); }
.chip-item.recently-added .chip-social,
.chip-item.recently-added .chip-action { color: var(--success); }
.chip-item.selected .chip-social,
.chip-item.selected .chip-action { color: var(--accent); }

.url-preview { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--bg-raised); border: 1px solid var(--border-default); border-radius: var(--radius-pill); padding: 0.375rem 0.75rem; font-size: var(--fs-small); color: var(--fg-muted); margin: -0.5rem 0 1rem; }
.url-preview img { width: 18px; height: 18px; border-radius: var(--radius-xs); }
.capture-preview { border-radius: var(--radius-md); padding: 0.625rem 0.75rem; margin: -0.25rem 0 1rem; }
.capture-preview img { width: 28px; height: 28px; }
.capture-preview div { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.capture-preview strong { color: var(--fg-primary); font-size: var(--fs-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.capture-preview small { color: var(--fg-muted); font-size: var(--fs-caption); text-transform: capitalize; }

@media (max-width: 640px) {
    .asset-card { align-items: stretch; }
    .asset-card-main { min-height: 3.75rem; padding: 0.75rem 0.75rem 0.75rem 0.875rem; }
    .asset-card-actions { width: 100%; justify-content: flex-end; padding: 0 0.5rem 0.5rem; }
    .row-action-cluster { width: 100%; justify-content: flex-end; flex-wrap: wrap; }
    .empty-state {
        min-height: 11rem;
        padding: 1.5rem 1rem;
    }

    .empty-illustration svg {
        width: 5rem;
        height: 5rem;
    }

    .form-card { padding: 1.25rem; }
    .capture-hero { flex-direction: column; }
    .capture-hero-stats,
    .capture-two-col,
    .asset-detail-grid { grid-template-columns: 1fr; }
    .form-actions { position: sticky; bottom: 0; background: var(--bg-surface); padding-bottom: env(safe-area-inset-bottom); margin: 1rem -1.25rem -1.25rem; padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom)); }
    .form-actions-inline { position: static; margin: -0.25rem 0 1rem; padding: 0; }
}

.profile-page { width: min(100%, var(--content-workspace)); max-width: var(--content-workspace); }
.profile-hero { display: flex; align-items: center; gap: 0.875rem; padding: 1rem 1.125rem; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); margin-bottom: 0.875rem; }
.entity-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.entity-detail-head h3 { margin: 0; }
.entity-delete-btn { color: var(--danger); }
.entity-delete-btn:hover { color: var(--danger); background: var(--danger-soft); }
.entity-page,
.entity-detail-page { width: min(100%, var(--content-workspace)); max-width: var(--content-workspace); }
.entity-page .goals-filter-bar { margin-bottom: 0.875rem; }
.entity-page .asset-card-main { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.entity-detail-hero { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.125rem; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); margin-bottom: 0.875rem; }
.entity-detail-hero-body { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.entity-detail-hero-body h1 { margin: 0; font-size: var(--fs-h2); line-height: var(--lh-tight); overflow-wrap: anywhere; }
.entity-detail-hero-body p { margin: 0; color: var(--fg-muted); font-size: var(--fs-small); line-height: var(--lh-relaxed); }
.entity-detail-form { display: grid; gap: 0.875rem; }
.entity-detail-section-head h2 { margin: 0; font-size: 1.125rem; line-height: 1.25; }
.entity-detail-section-head p,
.form-subsection header p { margin: 0.25rem 0 0; color: var(--fg-muted); font-size: var(--fs-small); }
.entity-related-list { display: grid; gap: 0.5rem; }
.entity-related-row { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.625rem; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-raised); color: var(--fg-primary); text-align: left; padding: 0.625rem 0.75rem; cursor: pointer; transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast); }
.entity-related-row:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.entity-related-row:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); }
.entity-related-row .material-icons { color: var(--accent); font-size: 1.1rem; }
.entity-related-row strong { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entity-related-row small { display: block; min-width: 0; margin-top: 0.125rem; color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { width: 56px; height: 56px; border-radius: var(--radius-pill); background: var(--gradient-avatar); color: var(--fg-on-accent); display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: var(--fw-semibold); flex-shrink: 0; }
.profile-meta { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.profile-meta h2 { margin: 0; font-size: var(--fs-h2); line-height: var(--lh-tight); overflow-wrap: anywhere; }
.profile-meta p { margin: 0.375rem 0 0; color: var(--fg-muted); font-size: var(--fs-small); }
.tier-badge { align-self: flex-start; font-size: var(--fs-caption); font-weight: var(--fw-semibold); padding: 0.125rem 0.5rem; background: var(--accent-soft); color: var(--accent); border-radius: var(--radius-pill); margin-top: 0.25rem; }
.profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 0.875rem; }
.profile-control-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
.profile-stat { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 0.75rem 0.875rem; text-align: left; display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.stat-num { font-size: 1.25rem; font-weight: var(--fw-semibold); color: var(--accent); line-height: var(--lh-tight); }
.stat-label { font-size: var(--fs-caption); color: var(--fg-muted); text-transform: uppercase; letter-spacing: var(--ls-wide); }
.profile-card { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 0.9375rem 1.0625rem; margin-bottom: 0.875rem; box-shadow: var(--shadow-sm); }
.profile-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; gap: 1rem; }
.profile-card-head h3 { margin: 0; font-size: 1rem; }
.profile-card-head p { margin: 0.25rem 0 0; color: var(--fg-muted); font-size: var(--fs-small); }
.focus-list { list-style: none; padding: 0; margin: 0; }
.focus-item { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0; border-bottom: 1px solid var(--border-default); }
.focus-item:last-child { border-bottom: none; }
.focus-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.focus-name { flex: 1; font-weight: var(--fw-medium); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.focus-dialog-meta { color: var(--fg-muted); font-size: var(--fs-small); margin-top: -0.25rem; }
.focus-picker { display: grid; gap: 0.875rem; max-height: min(24rem, 52vh); overflow: auto; padding-right: 0.25rem; }
.focus-picker-group { display: grid; gap: 0.5rem; }
.focus-picker-group h4 { margin: 0; color: var(--fg-muted); font-size: var(--fs-caption); font-weight: var(--fw-semibold); line-height: var(--lh-normal); }
.focus-picker-list { display: grid; gap: 0.375rem; }
.focus-picker-option { display: flex; align-items: center; gap: 0.625rem; min-height: 2.75rem; padding: 0.625rem 0.75rem; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: color-mix(in srgb, var(--bg-raised) 56%, var(--bg-surface)); color: var(--fg-primary); font-size: var(--fs-small); font-weight: var(--fw-medium); cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast), color var(--dur-fast); }
.focus-picker-option:hover { border-color: color-mix(in srgb, var(--accent) 34%, var(--border-default)); background: var(--bg-raised); color: var(--fg-primary); }
.focus-picker-option.selected { border-color: color-mix(in srgb, var(--accent) 52%, var(--border-default)); background: var(--accent-soft); color: var(--accent); }
.focus-picker-option:focus-within { border-color: var(--accent); box-shadow: var(--shadow-focus-ring); }
.focus-picker-option:has(input:disabled) { opacity: 0.55; cursor: not-allowed; }
.focus-picker-option input { flex: 0 0 auto; width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--accent); }
.focus-picker-option span { min-width: 0; overflow-wrap: anywhere; line-height: var(--lh-snug); }
.focus-delete-confirmation { display: flex; align-items: flex-start; gap: 0.875rem; padding: 0.875rem; border: 1px solid color-mix(in srgb, var(--danger) 24%, var(--border-default)); border-radius: var(--radius-md); background: color-mix(in srgb, var(--danger) 8%, var(--bg-raised)); }
.focus-delete-confirmation .rdialog-message { margin-bottom: 0.25rem; }
.focus-delete-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 2rem; width: 2rem; height: 2rem; border-radius: var(--radius-md); background: color-mix(in srgb, var(--danger) 12%, var(--bg-surface)); color: var(--danger); }
@media (max-width: 640px) {
    .focus-picker { max-height: calc(100dvh - var(--mobile-header-height) - var(--mobile-footer-height) - 15rem); }
}
.pref-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--border-default); }
.pref-row:last-child { border-bottom: none; }
.pref-row strong { display: block; font-size: var(--fs-body); }
.pref-row p { margin: 0; font-size: var(--fs-small); color: var(--fg-muted); }
.pref-row-dialog { align-items: flex-start; }
.pref-row-dialog > div:first-child { min-width: 10rem; }
.ai-config-summary { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 0 1rem; border-bottom: 1px solid var(--border-default); }
.ai-config-summary-icon { width: 2.25rem; height: 2.25rem; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; color: var(--accent); background: var(--accent-soft); flex: 0 0 auto; }
.ai-config-summary strong { display: block; font-size: var(--fs-body); }
.ai-config-summary p { margin: 0; color: var(--fg-muted); font-size: var(--fs-small); }
.ai-config-list { display: grid; gap: 0.625rem; padding-top: 0.875rem; }
.ai-config-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-raised); }
.ai-config-main { min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.ai-config-provider { font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-config-meta { color: var(--fg-muted); font-size: var(--fs-small); }
.ai-config-actions { display: flex; align-items: center; gap: 0.375rem; flex: 0 0 auto; }
.ai-config-badge { border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent); font-size: var(--fs-caption); font-weight: var(--fw-semibold); padding: 0.125rem 0.5rem; }
.ai-config-dialog-form { display: grid; gap: 0.875rem; }
.ai-config-dialog-form .pref-row-dialog { flex-direction: column; gap: 0.625rem; padding: 0.75rem 0 0.875rem; }
.ai-config-dialog-form .pref-row-dialog > div:first-child { min-width: 0; width: 100%; }
.ai-option-group { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; min-width: 0; }
.ai-config-dialog-form .ai-option-group { justify-content: flex-start; width: 100%; }
.ai-option { min-height: 2.25rem; border: 1px solid var(--border-default); border-radius: var(--radius-pill); background: var(--bg-surface); color: var(--fg-primary); padding: 0.375rem 0.75rem; font: inherit; font-size: var(--fs-small); font-weight: var(--fw-medium); cursor: pointer; transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast); }
.ai-config-dialog-form .ai-option { flex: 1 1 min(12rem, 100%); overflow-wrap: anywhere; text-align: center; }
.ai-option:hover { border-color: var(--accent); background: var(--accent-soft); }
.ai-option:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); }
.ai-option.selected { border-color: var(--accent); background: var(--accent); color: var(--fg-on-accent); }
.ai-key-status { display: inline-flex; align-items: center; gap: 0.375rem; width: fit-content; margin-bottom: 0.5rem; padding: 0.25rem 0.625rem; border-radius: var(--radius-pill); background: var(--success-soft); color: var(--success); font-size: var(--fs-small); font-weight: var(--fw-medium); }
.profile-advanced { margin-top: 0.875rem; }
.profile-advanced summary { cursor: pointer; padding: 0.5rem 0; color: var(--fg-muted); font-weight: var(--fw-medium); }
.danger-zone { background: var(--danger-soft); border: 1px solid var(--danger); border-radius: var(--radius-md); padding: 1rem 1.25rem; margin-top: 0.75rem; }
.danger-zone h4 { margin: 0 0 0.25rem; color: var(--danger); }
.danger-zone p { margin: 0 0 0.75rem; font-size: var(--fs-small); color: var(--fg-muted); }
@media (max-width: 640px) {
    .entity-detail-hero { align-items: flex-start; }
    .entity-related-row { align-items: flex-start; min-height: 3rem; padding: 0.75rem; }
    .entity-related-row strong,
    .entity-related-row small { white-space: normal; overflow-wrap: anywhere; }
    .profile-hero { align-items: flex-start; }
    .profile-control-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .profile-card-head { align-items: flex-start; }
    .ai-config-item { align-items: stretch; flex-direction: column; }
    .ai-config-actions { justify-content: flex-end; }
    .pref-row-dialog { flex-direction: column; gap: 0.5rem; }
    .pref-row-dialog > div:first-child { min-width: 0; }
    .ai-option-group { justify-content: flex-start; width: 100%; }
    .ai-option { flex: 1 1 auto; }
    .pref-row-dialog .e-control-wrapper,
    .pref-row-dialog .e-dropdownlist { width: 100%; }
}
.theme-toggle {
    display: inline-flex;
    background: color-mix(in srgb, var(--bg-sunken) 86%, var(--bg-surface));
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
    padding: 4px;
    gap: 2px;
    box-shadow: inset 0 1px 2px rgba(15,23,42,0.06);
}

.theme-opt {
    background: transparent;
    border: none;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--fg-muted);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    cursor: pointer;
    transition: background var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
    min-height: 44px;
}

.theme-opt .material-icons { font-size: 1.125rem; }
.theme-opt:hover { color: var(--fg-primary); }
.theme-opt.active { background: var(--bg-surface); color: var(--accent); box-shadow: var(--shadow-sm); }
.theme-opt-label { display: inline; }

@media (max-width: 420px) {
    .theme-opt-label { display: none; }
}

.asset-hero { display: flex; gap: 0.875rem; align-items: center; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 1rem 1.125rem; margin-bottom: 0.875rem; }
.asset-hero-favicon { width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--bg-favicon); padding: 7px; box-shadow: var(--shadow-sm); }
.action-detail-hero-icon { background: var(--bg-favicon); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; font-size: 1.45rem; }
.asset-hero-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.asset-hero-kicker { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.375rem; }
.asset-hero-body h1 { margin: 0; font-size: var(--fs-h2); font-weight: var(--fw-semibold); line-height: var(--lh-tight); overflow-wrap: anywhere; }
.asset-hero-body p { margin: 0; color: var(--fg-muted); font-size: var(--fs-small); line-height: var(--lh-relaxed); }
.asset-hero-host { font-size: var(--fs-small); color: var(--accent); display: inline-flex; align-items: center; gap: 0.25rem; text-decoration: none; }
.asset-hero-host:hover { text-decoration: underline; }
.asset-goal-badge { display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.375rem; font-size: var(--fs-caption); color: var(--fg-muted); }
.asset-hero-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.75rem; }
.segmented-tabs-2 .seg-takeaways { transform: translateX(100%); }
.segmented-tabs-3 .seg-indicator { width: calc(33.333% - 4px); }
.segmented-tabs-3 .seg-takeaways { transform: translateX(100%); }
.segmented-tabs-3 .seg-notes { transform: translateX(200%); }
.takeaway-row { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.75rem 0; border-bottom: 1px solid var(--border-default); }
.takeaway-row:last-child { border-bottom: none; }
.takeaway-card { display: flex; align-items: flex-start; gap: 0.75rem; min-width: 0; padding: 0.875rem 0.95rem; border: 1px solid color-mix(in srgb, var(--border-default) 88%, transparent); border-radius: var(--radius-md); background: linear-gradient(180deg, color-mix(in srgb, var(--bg-surface) 92%, var(--bg-raised)), var(--bg-surface)); box-shadow: var(--shadow-sm); transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast); }
.takeaway-card:hover { border-color: color-mix(in srgb, var(--accent) 26%, var(--border-default)); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.takeaway-card-main { display: flex; align-items: flex-start; gap: 0.75rem; min-width: 0; flex: 1 1 auto; }
.takeaway-card-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 2rem; width: 2rem; height: 2rem; border-radius: var(--radius-md); background: color-mix(in srgb, var(--accent-soft) 72%, var(--bg-raised)); color: var(--accent); font-size: 1.1rem; }
.takeaway-card-body { min-width: 0; flex: 1 1 auto; display: grid; gap: 0.35rem; }
.takeaway-card-text { margin: 0; color: var(--fg-primary); font-size: var(--fs-body); line-height: var(--lh-relaxed); overflow-wrap: anywhere; }
.takeaway-card-meta { width: fit-content; max-width: 100%; min-height: 1.45rem; display: inline-flex; align-items: center; padding: 0.0625rem 0.5rem; border: 1px solid color-mix(in srgb, var(--border-default) 80%, transparent); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--bg-raised) 72%, transparent); color: var(--fg-muted); font-size: var(--fs-caption); font-weight: var(--fw-medium); line-height: var(--lh-normal); overflow-wrap: anywhere; }
.takeaway-card-editing { align-items: center; background: color-mix(in srgb, var(--accent-soft) 16%, var(--bg-surface)); border-color: color-mix(in srgb, var(--accent) 20%, var(--border-default)); }
.takeaway-card-editing .takeaway-card-icon,
.takeaway-card-editing .takeaway-actions { align-self: center; }
.takeaway-text { flex: 1; cursor: text; min-width: 0; color: var(--fg-primary); line-height: var(--lh-relaxed); overflow-wrap: anywhere; }
.takeaway-text.editing { padding: 0; }
.takeaway-text.editing .e-control-wrapper { width: 100%; }
.takeaway-actions { display: flex; gap: 0.25rem; opacity: 0; transition: opacity var(--dur-fast); flex: 0 0 auto; }
.takeaway-actions.always-visible,
.takeaway-row:hover .takeaway-actions,
.takeaway-card:hover .takeaway-actions,
.takeaway-card:focus-within .takeaway-actions { opacity: 1; }
.asset-takeaway-intro { margin: 0.25rem 0 0; color: var(--fg-muted); font-size: var(--fs-small); line-height: var(--lh-relaxed); }

@media (max-width: 720px) {
    .asset-hero { flex-direction: column; align-items: flex-start; }
    .asset-hero-actions { width: 100%; align-items: center; }
    .asset-hero-actions .btn { flex: 0 1 auto; min-width: 0; }
}

@media (max-width: 480px) {
    .asset-hero-actions { gap: 0.375rem; }
    .asset-hero-actions .btn { min-height: 40px; padding-left: 0.75rem; padding-right: 0.75rem; }
}

.privacy-hero,
.support-hero,
.extension-hero { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 1rem 1.125rem; margin-bottom: 0.875rem; box-shadow: var(--shadow-md); }
.privacy-hero h2,
.support-hero h2,
.extension-hero h2 { margin: 0 0 0.5rem; font-size: 1.25rem; }
.privacy-hero p,
.support-hero p,
.extension-hero p { margin: 0 0 1rem; color: var(--fg-muted); }
.support-hero { display: flex; flex-direction: column; gap: 0.25rem; background: var(--bg-surface); }
.support-hero h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); }
.support-hero p { max-width: 52rem; margin-bottom: 0; }
.legal-hero p { margin-bottom: 0.75rem; }
.legal-meta { display: flex; align-items: center; gap: 0.5rem; }

.support-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.625rem; margin-bottom: 0.875rem; }
.support-summary-card { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 0.75rem 0.875rem; display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.support-summary-card .material-icons { width: 2rem; height: 2rem; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); font-size: 1.0625rem; }
.support-summary-card strong { font-weight: var(--fw-semibold); color: var(--fg-primary); }
.support-summary-card small { color: var(--fg-muted); font-size: var(--fs-small); line-height: var(--lh-relaxed); }

.about-hero p {
    margin-bottom: 0;
}

.about-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.about-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 0.875rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.about-card h3 {
    margin: 0;
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
}

.about-card p {
    margin: 0;
    color: var(--fg-muted);
    font-size: var(--fs-small);
    line-height: var(--lh-relaxed);
}

@media (max-width: 720px) {
    .support-summary-grid,
    .about-grid {
        grid-template-columns: 1fr;
    }
}

.privacy-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.privacy-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 0.875rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.privacy-card-head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.privacy-card-head h3 {
    margin: 0;
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
}

.privacy-index {
    width: 1.625rem;
    height: 1.625rem;
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    flex-shrink: 0;
}

.privacy-card p {
    margin: 0;
    color: var(--fg-muted);
    font-size: var(--fs-small);
    line-height: var(--lh-relaxed);
}

@media (max-width: 720px) {
    .privacy-grid {
        grid-template-columns: 1fr;
    }
}

.more-grid {
    display: grid;
    gap: 0.625rem;
}

.more-section { margin-bottom: 0.875rem; }
.more-section-head { margin-bottom: 0.625rem; }
.more-section-head h3 { margin: 0; font-size: 1rem; }
.more-section-head p { margin: 0.25rem 0 0; color: var(--fg-muted); font-size: var(--fs-small); }

.more-tile {
    width: 100%;
    min-height: 4rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.875rem;
    padding: 0.8125rem 0.9375rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-default);
    background: var(--bg-surface);
    color: var(--fg-primary);
    cursor: pointer;
    text-align: left;
    transition: transform var(--dur-fast) var(--ease-standard), border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
}

.more-tile:hover {
    transform: translateY(var(--lift-hover-y));
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
    background: var(--bg-raised);
}

.more-tile:active {
    transform: translateY(var(--lift-active-y));
}

.more-tile-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
}

.more-tile-content {
    display: inline-flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.more-tile-content strong {
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    line-height: 1.2;
}

.more-tile-content small {
    color: var(--fg-muted);
    font-size: var(--fs-small);
    line-height: 1.35;
}

.more-tile > .material-icons:last-child {
    color: var(--fg-muted);
    font-size: 1.25rem;
}

/* Plans and pricing */
.pricing-preview-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.8125rem 0.9375rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--accent);
    background: var(--accent-soft);
    color: var(--fg-primary);
}
.pricing-preview-banner .material-icons { color: var(--accent); font-size: 1.25rem; }
.pricing-preview-banner strong { display: block; font-weight: var(--fw-semibold); }
.pricing-preview-banner small { color: var(--fg-muted); font-size: var(--fs-small); }

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.pricing-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-default);
    background: var(--bg-surface);
    box-shadow: var(--shadow-sm);
}

.pricing-card-current {
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
}

.pricing-card-unavailable { opacity: 0.72; }

.pricing-card-head { display: flex; flex-direction: column; gap: 0.35rem; }
.pricing-card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.pricing-card-title-row h3 { margin: 0; font-size: 1.0625rem; }
.pricing-price { margin: 0; font-weight: var(--fw-semibold); color: var(--accent); }
.pricing-tagline { margin: 0; color: var(--fg-muted); font-size: var(--fs-small); line-height: 1.35; }

.pricing-badge {
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}
.pricing-badge-current { background: var(--accent); color: var(--accent-contrast, #fff); }
.pricing-badge-soon { background: var(--bg-raised); color: var(--fg-muted); border: 1px solid var(--border-default); }

.pricing-benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.pricing-benefits li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: var(--fs-small); line-height: 1.4; }
.pricing-benefits li .material-icons { color: var(--accent); font-size: 1rem; margin-top: 0.05rem; }

.pricing-addons {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.8125rem 0.9375rem;
    border-radius: var(--radius-md);
    border: 1px dashed var(--border-strong);
    background: var(--bg-surface);
}
.pricing-addons .material-icons { color: var(--fg-muted); font-size: 1.25rem; }
.pricing-addons strong { display: block; font-weight: var(--fw-semibold); }
.pricing-addons small { color: var(--fg-muted); font-size: var(--fs-small); }

@media (max-width: 640px) {
    .pricing-grid { grid-template-columns: 1fr; }
}

.contact-hero p {
    margin-bottom: 0;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.contact-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 0.875rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 220px;
}
.contact-card-head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.contact-card-head h3 {
    margin: 0;
    font-size: var(--fs-h3);
}

.contact-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.0625rem;
}

.contact-card p {
    margin: 0;
    color: var(--fg-muted);
}

.contact-card .btn {
    margin-top: auto;
    align-self: flex-start;
}

@media (max-width: 720px) {
    .support-summary-grid {
        grid-template-columns: 1fr;
    }

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

    .contact-card {
        min-height: 0;
    }
}
.admin-focus-editor .ai-config-dialog-form { gap: 0.75rem; }
.admin-focus-catalog .focus-item { gap: 0.75rem; }
.admin-focus-catalog .focus-item .text-small { flex: 0 0 auto; }
.extension-page .profile-card { margin-bottom: 0.875rem; }
.extension-page .hero-actions { margin-top: 0.625rem; }
.extension-focus-card,
.extension-page-card { display: flex; align-items: center; gap: 0.75rem; background: var(--bg-raised); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 0.75rem 0.875rem; }
.extension-focus-card div,
.extension-page-card div { flex: 1; min-width: 0; }
.extension-focus-card p,
.extension-page-card p { margin: 0.125rem 0 0; font-size: var(--fs-small); color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.extension-page-card .material-symbols-rounded { color: var(--accent); }
.extension-capture-form { display: grid; gap: 0.625rem; margin-top: 0.75rem; }
.extension-capture-form .field-label { margin: 0; font-size: var(--fs-small); font-weight: 650; color: var(--fg-secondary); }
.extension-mode-group { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.extension-mode-button { display: flex; align-items: center; justify-content: center; gap: 0.375rem; min-height: 2.5rem; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-surface); color: var(--fg-secondary); font: inherit; font-weight: 650; }
.extension-mode-button.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-hover); box-shadow: var(--shadow-focus-ring); }
.extension-capture-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.125rem; }
.extension-capture-actions .btn { justify-content: center; }
.extension-features { display: grid; gap: 0.5rem; }
.extension-features div { display: flex; align-items: center; gap: 0.5rem; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 0.625rem 0.875rem; color: var(--fg-muted); }
.extension-features .e-icons { color: var(--success); }

.edge-capture-hero { display: flex; flex-direction: column; gap: 0.25rem; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 1rem 1.125rem; margin-bottom: 0.75rem; }
.edge-capture-hero h2 { margin: 0; font-size: var(--fs-h2); line-height: var(--lh-tight); }
.edge-capture-hero p { margin: 0; color: var(--fg-muted); font-size: var(--fs-small); line-height: var(--lh-relaxed); max-width: 52rem; }
.share-receive-goal { border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-raised); padding: 0.875rem; margin-bottom: 0.875rem; }
.share-receive-preview { margin-bottom: 0.75rem; }
.share-receive-preview .url-preview { margin: 0 0 0.5rem; max-width: 100%; }
.share-receive-url { margin: 0; overflow-wrap: anywhere; }
.public-profile-hero { display: flex; align-items: center; gap: 0.875rem; padding: 1rem 1.125rem; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); margin-bottom: 0.875rem; }
.public-profile-meta { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.public-profile-meta h2 { margin: 0; font-size: var(--fs-h2); line-height: var(--lh-tight); overflow-wrap: anywhere; }
.public-profile-meta p { margin: 0.375rem 0 0; color: var(--fg-muted); font-size: var(--fs-small); }

@media (max-width: 640px) {
    .public-profile-hero { align-items: flex-start; }
}

.discover-page { width: min(100%, var(--content-workspace)); max-width: var(--content-workspace); }
.discover-hero { display: flex; flex-direction: column; gap: 0.875rem; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 1rem; margin-bottom: 0.875rem; }
.discover-hero-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 0.875rem; }
.discover-hero-heading { display: flex; flex: 1 1 auto; min-width: 0; flex-direction: column; gap: 0.35rem; }
.discover-hero-copy { flex: 1 1 auto; min-width: 0; }
.discover-hero h1 { margin: 0.125rem 0 0.25rem; font-size: var(--fs-h2); line-height: var(--lh-tight); color: var(--fg-primary); overflow-wrap: anywhere; }
.discover-hero-context { display: flex; flex: 1 0 100%; width: 100%; margin: 0; color: var(--fg-muted); font-size: var(--fs-small); line-height: var(--lh-relaxed); overflow-wrap: anywhere; }
.discover-hero-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; gap: 0.5rem; }
.discover-next-suggestion { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.75rem 0.875rem; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-raised); }
.discover-next-suggestion .material-icons { color: var(--fg-accent); font-size: 1.1rem; margin-top: 0.05rem; flex: 0 0 auto; }
.discover-next-suggestion p { margin: 0; color: var(--fg-primary); font-size: var(--fs-small); line-height: var(--lh-relaxed); overflow-wrap: anywhere; }
.discover-mode-summary { margin: -0.5rem 0 0.875rem; }
.discover-group { margin: 0 0 0.875rem; }
.discover-group-title { margin-bottom: 0.25rem; }
.discover-group-title .section-header-icon { width: 1.75rem; height: 1.75rem; border-radius: var(--radius-sm); }
.discover-group-title .section-header-icon .material-icons { font-size: 1.05rem; }
.discover-group-title h2 { font-size: var(--fs-h4); }
.discover-group .discover-list { margin-top: 0.25rem; }
.discover-web-loading { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 0; }
.discover-web-empty { margin: 0.25rem 0 0; }
.discover-web-card .asset-card-actions .material-icons,
.discover-action-suggestion-card .asset-card-actions .material-icons { font-size: 1.1rem; }
.discover-mode-tabs { margin-bottom: 0.875rem; }
.seg-discover { transform: translateX(100%); }
.discover-list { margin-top: 0.75rem; }
.discover-info-action .material-icons { font-size: 1.05rem; line-height: 1; }
.discover-info-action:hover,
.discover-info-action:focus-visible { color: var(--accent); background: var(--accent-soft); }
.discover-action-composer,
.discover-ai-panel { display: flex; align-items: center; justify-content: space-between; gap: 0.875rem; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 0.875rem; margin-bottom: 0.75rem; }
.discover-action-composer h2,
.discover-ai-panel h2 { margin: 0; color: var(--fg-primary); font-size: var(--fs-h4); line-height: var(--lh-tight); }
.discover-action-composer p,
.discover-ai-panel p { margin: 0.25rem 0 0; color: var(--fg-muted); font-size: var(--fs-small); line-height: var(--lh-relaxed); }
.discover-action-form,
.discover-ai-actions { display: flex; align-items: center; gap: 0.5rem; min-width: min(100%, 24rem); }
.discover-action-list { display: grid; gap: 0.625rem; margin: 0 0 0.75rem; padding: 0; list-style: none; }
.discover-action-card { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 0.875rem; box-shadow: var(--shadow-sm); }
.discover-action-card.row-actions-reveal { grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; }
.discover-action-main { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 0.875rem; align-items: start; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.discover-action-main > .material-icons,
.discover-action-main > .material-symbols-outlined { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: var(--fg-accent); font-size: 1.25rem; }
.discover-action-main:hover h3 { color: var(--fg-accent); }
.discover-action-suggestion-card .discover-action-main { grid-template-columns: minmax(0, 1fr); gap: 0; cursor: default; }
.discover-action-suggestion-card .discover-action-main:hover h3 { color: var(--fg-primary); }
.discover-action-card h3 { margin: 0; color: var(--fg-primary); font-size: var(--fs-body); line-height: var(--lh-tight); overflow: hidden; display: flex; align-items: center; gap: 0.25rem; overflow-wrap: anywhere; }
.discover-action-card h3 > span:not(.discover-focus-indicator),
.discover-list .asset-body h4 > span:not(.discover-focus-indicator),
.discover-action-suggestion-card .asset-body h4 > span:not(.discover-focus-indicator) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.discover-action-suggestion-main { cursor: default; }
.discover-action-suggestion-icon { width: 36px; height: 36px; border-radius: var(--radius-sm); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-favicon); color: var(--fg-accent); font-size: 1.25rem; }
.discover-action-card p { display: flex; align-items: center; gap: 0.375rem; margin: 0.2rem 0 0; color: var(--fg-muted); font-size: var(--fs-small); line-height: var(--lh-normal); overflow: hidden; white-space: nowrap; }
.discover-action-card p > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.discover-focus-indicator { flex: 0 0 auto; padding: 0.05rem 0.35rem; }
.discover-focus-indicator .ui-icon { width: 0.9rem; height: 0.9rem; }
.discover-list .asset-card-main { min-width: 0; }
.discover-list .asset-body h4 { overflow: hidden; display: flex; align-items: center; gap: 0.25rem; overflow-wrap: anywhere; }
.discover-list .asset-meta { min-width: 0; overflow: hidden; }
.discover-list .asset-host,
.discover-list .search-goal-badge { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.goal-work-items { display: flex; flex-direction: column; gap: 0.75rem; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 1rem; margin-bottom: 0.875rem; }
.goal-work-items-copy h2 { margin: 0; color: var(--fg-primary); font-size: 1rem; line-height: var(--lh-tight); }
.goal-work-items-copy p { margin: 0.25rem 0 0; color: var(--fg-muted); font-size: var(--fs-small); line-height: var(--lh-relaxed); }
.work-item-section { display: flex; flex-direction: column; gap: 0.875rem; }
.work-item-dialog-form { display: grid; gap: 0.875rem; }
.work-item-dialog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.work-item-dialog .form-select-native { min-height: 44px; }
.habit-day-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.5rem; container-type: inline-size; }
.habit-day-chip { appearance: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-subtle); background: var(--bg-surface); color: var(--fg-muted); border-radius: 999px; padding: 0.35rem 0.7rem; font-size: var(--fs-small); font-weight: 600; line-height: 1; min-height: 34px; min-width: 34px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.habit-day-chip:hover { border-color: var(--border-strong); color: var(--fg-primary); }
.habit-day-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.habit-day-chip.is-selected { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast, #fff); }
.habit-day-full { display: none; }
.habit-day-mini { display: inline; }
@container (min-width: 420px) {
    .habit-day-full { display: inline; }
    .habit-day-mini { display: none; }
}
.form-input-native { width: 100%; min-height: 44px; box-sizing: border-box; border-radius: var(--radius-sm); border: 1px solid var(--border-default); background-color: var(--bg-surface); color: var(--fg-primary); font-family: var(--font-sans); font-size: var(--fs-body); padding: 0 0.875rem; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.form-input-native:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft, rgba(80, 120, 255, 0.25)); }
.time-slot-toggle { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; font-weight: 600; color: var(--fg-primary); }
.time-slot-toggle input { width: 1rem; height: 1rem; }
.time-slot-editor { width: 100%; margin-top: 0.6rem; display: flex; flex-direction: column; gap: 0.6rem; }
.time-slot-fields { display: flex; flex-direction: column; gap: 0.75rem; }
.time-slot-field { display: flex; flex-direction: column; gap: 0.25rem; }
.time-slot-field > label { color: var(--fg-muted); font-size: var(--fs-small); font-weight: 600; }
.time-slot-duration-inputs { display: grid; grid-template-columns: minmax(0, 5rem) minmax(0, 4.25rem); gap: 0.5rem; align-items: center; width: fit-content; max-width: 100%; }
.time-slot-duration-inputs .form-input-native,
.time-slot-duration-inputs .form-select-native { max-width: none; min-width: 0; }
.time-slot-duration-inputs .form-select-native { padding-left: 0.65rem; padding-right: 1.65rem; background-position: right 0.45rem center; }
.time-input-24 { display: inline-flex; align-items: center; gap: 0.35rem; }
.time-input-24 .form-select-native { max-width: 4.5rem; }
.time-input-24__separator { color: var(--fg-muted); font-weight: 600; }
.series-bound-field { margin-top: 0.6rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.series-bound-field .form-input-native { max-width: 12rem; }
.preferred-day-field { margin-top: 0.6rem; display: flex; flex-direction: column; gap: 0.25rem; }
.preferred-day-field > label { color: var(--fg-muted); font-size: var(--fs-small); font-weight: 600; }
.preferred-day-field .form-input-native { max-width: 12rem; }
.dialog-field-hint { margin: 0.4rem 0 0; color: var(--fg-muted); font-size: var(--fs-small); }

@media (max-width: 480px) {
    .time-slot-duration-inputs { grid-template-columns: minmax(0, 5rem) minmax(0, 4.25rem); width: fit-content; }
}

.count-capture { display: flex; flex-direction: column; gap: 0.5rem; }
.count-capture-caption { color: var(--fg-muted); font-size: var(--fs-small); font-weight: 600; }
.count-capture-control { display: inline-flex; align-items: center; gap: 0.5rem; align-self: flex-start; padding: 0.35rem; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--bg-surface); }
.count-capture-step { appearance: none; border: none; background: var(--bg-sunken); color: var(--fg-primary); width: 34px; height: 34px; border-radius: 9px; font-size: 1.15rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s ease; }
.count-capture-step:hover:not(:disabled) { background: var(--border-subtle); }
.count-capture-step:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.count-capture-step:disabled { opacity: 0.4; cursor: not-allowed; }
.count-capture-value { width: 3.5rem; text-align: center; border: none; background: transparent; color: var(--fg-primary); font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.count-capture-value::-webkit-outer-spin-button, .count-capture-value::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.count-capture-value:focus-visible { outline: none; }
.count-capture-of { color: var(--fg-muted); font-size: var(--fs-small); font-variant-numeric: tabular-nums; padding-right: 0.25rem; }
.count-capture-progress { height: 4px; border-radius: 999px; background: var(--bg-sunken); overflow: hidden; max-width: 12rem; }
.count-capture-progress > span { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width 0.2s ease; }
.action-dialog-guidance { margin: -0.25rem 0 0; color: var(--fg-muted); font-size: var(--fs-small); line-height: var(--lh-normal); }
.work-item-toolbar,
.goal-work-items-header,
.focus-work-actions,
.work-item-card,
.work-item-main,
.work-item-actions { display: flex; align-items: center; gap: 0.75rem; }
.work-item-toolbar,
.goal-work-items-header,
.work-item-card { justify-content: space-between; }
.work-item-toolbar-headerless { justify-content: flex-end; }
.focus-work-tabs-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-width: 0; }
.focus-up-next-planner { display: grid; gap: 0.75rem; align-items: stretch; }
.focus-up-next-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; min-width: 0; }
.focus-up-next-planner p { margin: 0.25rem 0 0; color: var(--fg-muted); font-size: var(--fs-small); line-height: var(--lh-relaxed); }
.focus-work-tabs { margin: 0 0 0.75rem; }
.focus-work-tabs .seg-actions { transform: translateX(0); }
.focus-work-tabs .seg-takeaways { transform: translateX(100%); }
.focus-work-tabs .seg-milestones { transform: translateX(200%); }
.focus-work-tab-panel { display: grid; gap: 0.625rem; }
.focus-work-manage { flex: 0 0 auto; gap: 0.25rem; }
.work-item-toolbar h2 { margin: 0; color: var(--fg-primary); font-size: var(--fs-h3); line-height: var(--lh-tight); overflow-wrap: anywhere; }
.work-item-toolbar p { margin: 0.25rem 0 0; color: var(--fg-muted); font-size: var(--fs-small); line-height: var(--lh-relaxed); }
.work-item-list { display: grid; gap: 0.625rem; margin: 0; padding: 0; list-style: none; }
.work-item-card { min-height: 4.5rem; padding: 0.875rem 1rem; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: var(--shadow-sm); }
.mission-workspace { border-radius: var(--radius-lg); transition: background var(--dur-fast), box-shadow var(--dur-fast); }
.mission-workspace.mission-drag-active { background: color-mix(in srgb, var(--accent-soft) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent); }
.mission-card { cursor: default; }
.mission-card-header { align-items: center; }
.mission-title-toggle { flex: 1 1 auto; }
.mission-card-actions { flex: 0 0 auto; }
.mission-map-next { color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent); }
.mission-context-note { margin: -0.1rem 0 0.1rem; color: var(--fg-muted); font-size: var(--fs-small); line-height: var(--lh-normal); overflow-wrap: anywhere; }
.mission-status-chip,
.mission-count-chip { display: inline-flex; align-items: center; min-height: 1.5rem; padding: 0 0.5rem; border-radius: var(--radius-pill); font-size: var(--fs-caption); font-weight: 700; }
.mission-status-chip { background: color-mix(in srgb, var(--success-soft) 70%, var(--bg-raised)); color: var(--success); }
.mission-status-chip.mission-status-onhold { background: color-mix(in srgb, var(--warning-soft) 72%, var(--bg-raised)); color: var(--warning); }
.mission-status-chip.mission-status-completed { background: color-mix(in srgb, var(--bg-raised) 82%, var(--border-default)); color: var(--fg-muted); }
.mission-status-chip.mission-status-discarded { background: color-mix(in srgb, var(--danger-soft) 72%, var(--bg-raised)); color: var(--danger); }
.mission-count-chip { border: 1px solid var(--border-default); background: var(--bg-raised); color: var(--fg-muted); }
.mission-goal-chain-list { grid-column: 1 / -1; margin-top: 0.25rem; }
.mission-empty-goals { grid-column: 1 / -1; margin-top: 0.25rem; padding: 0.75rem 0.875rem; border: 1px dashed var(--border-default); border-radius: var(--radius-md); background: color-mix(in srgb, var(--bg-raised) 64%, transparent); color: var(--fg-muted); font-size: var(--fs-small); line-height: var(--lh-normal); }
.mission-goal-card { min-height: 4rem; }
.mission-goal-group { cursor: default; }
.action-parallel-chip { display: inline-flex; align-items: center; min-height: 1.5rem; padding: 0 0.5rem; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent); font-size: var(--fs-caption); font-weight: 700; }
.action-selection-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.875rem; padding: 0.8rem 0.95rem; border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border-default)); border-radius: var(--radius-md); background: linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 68%, var(--bg-surface)), var(--bg-raised)); box-shadow: var(--shadow-sm); }
.action-selection-bar strong { display: block; color: var(--fg-primary); font-size: var(--fs-body); line-height: var(--lh-tight); }
.action-selection-bar span { display: block; margin-top: 0.2rem; color: var(--fg-muted); font-size: var(--fs-caption); }
.action-status-tabs { margin-bottom: 0; }
.action-chain-list { gap: 0.75rem; }
.action-list-drop-tail { min-height: 0.75rem; margin-top: -0.25rem; }
.action-chain-list.action-drag-active .action-list-drop-tail { min-height: 7rem; }
.mission-list-drop-tail { display: flex; align-items: center; justify-content: center; min-height: 2.75rem; border: 1px dashed color-mix(in srgb, var(--accent) 35%, var(--border-default)); border-radius: var(--radius-md); background: color-mix(in srgb, var(--accent-soft) 28%, transparent); list-style: none; }
.action-management-card { align-items: flex-start; cursor: grab; transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast), opacity var(--dur-fast); }
.action-management-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.action-management-card.dragging { opacity: 0.58; border-color: var(--accent); box-shadow: var(--shadow-focus-ring); cursor: grabbing; }
.action-group-section { display: grid; gap: 0.5rem; padding: 0.625rem; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: color-mix(in srgb, var(--bg-raised) 72%, var(--bg-surface)); box-shadow: var(--shadow-sm); cursor: grab; transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast), opacity var(--dur-fast); }
.action-group-section:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.action-group-section.dragging { opacity: 0.58; border-color: var(--accent); box-shadow: var(--shadow-focus-ring); cursor: grabbing; }
.action-group-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-width: 0; }
.action-group-toggle { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; }
.action-group-toggle:focus-visible { outline: none; border-radius: var(--radius-sm); box-shadow: var(--shadow-focus-ring); }
.action-group-toggle > .material-icons { flex: 0 0 auto; color: var(--fg-muted); font-size: 1.2rem; }
.action-group-title { min-width: 0; color: var(--fg-primary); font-size: var(--fs-body); font-weight: var(--fw-semibold); line-height: var(--lh-tight); overflow-wrap: anywhere; }
.action-group-count { flex: 0 0 auto; color: var(--fg-muted); font-size: var(--fs-caption); }
.action-group-list { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.action-group-card { background: var(--bg-surface); }
.work-item-main { align-items: center; min-width: 0; }
.action-edit-target { cursor: pointer; border-radius: var(--radius-sm); }
.action-edit-target:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); }
.work-item-main > div { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.work-item-main h3 { margin: 0; color: var(--fg-primary); font-size: var(--fs-body); line-height: var(--lh-tight); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-item-main p { margin: 0; color: var(--fg-muted); font-size: var(--fs-small); line-height: var(--lh-normal); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-item-icon { color: var(--fg-accent); flex: 0 0 auto; font-size: 1.25rem; }
.work-item-actions { justify-content: flex-end; flex: 0 0 auto; }
.work-item-status { width: auto; min-width: 8.5rem; }
.action-select-check { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: var(--radius-pill); border: 1px solid var(--border-default); background: color-mix(in srgb, var(--bg-surface) 82%, var(--bg-raised)); color: var(--fg-muted); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bg-raised) 80%, transparent); cursor: pointer; transition: background var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast), color var(--dur-fast), transform var(--dur-fast); }
.action-select-check input { position: absolute; opacity: 0; pointer-events: none; }
.action-select-check .material-icons { font-size: 1rem; opacity: 0; }
.action-select-check:hover { border-color: color-mix(in srgb, var(--accent) 48%, var(--border-default)); color: var(--fg-accent); }
.action-select-check:has(input:checked) { border-color: var(--accent); background: var(--accent); color: var(--fg-on-accent); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.action-select-check:has(input:checked) .material-icons { opacity: 1; }
.action-select-check:focus-within { box-shadow: var(--shadow-focus-ring); border-color: var(--accent); }
.action-order-badge { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-pill); background: var(--bg-raised); border: 1px solid var(--border-default); color: var(--fg-muted); font-size: var(--fs-caption); font-weight: 700; }
.action-order-controls { display: inline-flex; align-items: center; gap: 0.25rem; }
.action-order-controls .material-icons { font-size: 1.15rem; }
.action-state-actions { display: inline-flex; align-items: center; gap: 0; }
.action-state-actions .material-icons { font-size: 1.15rem; }

@media (max-width: 640px) {
    .row-actions-reveal { position: relative; overflow: hidden; touch-action: pan-y; }
    .asset-card.row-actions-reveal { flex-wrap: nowrap; align-items: center; min-height: 3.75rem; }
    .asset-card.row-actions-reveal .asset-card-main { min-height: 3.75rem; width: 100%; padding-right: 2.75rem; }
    .asset-card.row-actions-reveal .asset-card-actions,
    .mission-card.row-actions-reveal .mission-card-actions,
    .goals-mgmt-card.row-actions-reveal .goals-mgmt-actions,
    .work-item-card.row-actions-reveal .work-item-actions,
    .notification-item.row-actions-reveal .notification-actions,
    .ai-config-item.row-actions-reveal .ai-config-actions,
    .takeaway-card.row-actions-reveal .takeaway-actions,
    .discover-action-card.row-actions-reveal .asset-card-actions {
        position: absolute;
        inset: 0 0 0 auto;
        z-index: 2;
        width: min(15rem, 58%);
        max-width: 15rem;
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0;
        padding: 0 0.5rem;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
        background: linear-gradient(90deg, color-mix(in srgb, var(--bg-surface) 12%, transparent), var(--bg-surface) 24%, var(--bg-surface));
        box-shadow: -0.75rem 0 1rem color-mix(in srgb, var(--shadow-color, #000) 10%, transparent);
        opacity: 0;
        pointer-events: none;
        transform: translateX(100%);
        transition: opacity var(--dur-fast), transform var(--dur-fast);
    }
    .asset-card.row-actions-reveal .asset-card-actions::-webkit-scrollbar,
    .mission-card.row-actions-reveal .mission-card-actions::-webkit-scrollbar,
    .goals-mgmt-card.row-actions-reveal .goals-mgmt-actions::-webkit-scrollbar,
    .work-item-card.row-actions-reveal .work-item-actions::-webkit-scrollbar,
    .notification-item.row-actions-reveal .notification-actions::-webkit-scrollbar,
    .ai-config-item.row-actions-reveal .ai-config-actions::-webkit-scrollbar,
    .takeaway-card.row-actions-reveal .takeaway-actions::-webkit-scrollbar,
    .discover-action-card.row-actions-reveal .asset-card-actions::-webkit-scrollbar { display: none; }
    .asset-card.row-actions-reveal.swiped .asset-card-actions,
    .asset-card.row-actions-reveal:focus-within .asset-card-actions,
    .mission-card.row-actions-reveal.swiped .mission-card-actions,
    .mission-card.row-actions-reveal:focus-within .mission-card-actions,
    .goals-mgmt-card.row-actions-reveal.swiped .goals-mgmt-actions,
    .goals-mgmt-card.row-actions-reveal:focus-within .goals-mgmt-actions,
    .work-item-card.row-actions-reveal.swiped .work-item-actions,
    .work-item-card.row-actions-reveal:focus-within .work-item-actions,
    .notification-item.row-actions-reveal.swiped .notification-actions,
    .notification-item.row-actions-reveal:focus-within .notification-actions,
    .ai-config-item.row-actions-reveal.swiped .ai-config-actions,
    .ai-config-item.row-actions-reveal:focus-within .ai-config-actions,
    .takeaway-card.row-actions-reveal.swiped .takeaway-actions,
    .takeaway-card.row-actions-reveal:focus-within .takeaway-actions,
    .discover-action-card.row-actions-reveal.swiped .asset-card-actions,
    .discover-action-card.row-actions-reveal:focus-within .asset-card-actions {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(0);
    }
    .goals-mgmt-card.row-actions-reveal,
    .mission-card.row-actions-reveal,
    .notification-item.row-actions-reveal,
    .ai-config-item.row-actions-reveal,
    .takeaway-card.row-actions-reveal,
    .discover-action-card.row-actions-reveal { min-height: 3.75rem; }
    .goals-mgmt-card.row-actions-reveal { align-items: center; padding-right: 2.75rem; }
    .goals-mgmt-card.row-actions-reveal .goals-mgmt-body { flex: 1 1 auto; width: 100%; }
    .mission-card.row-actions-reveal { padding-right: 2.75rem; }
    .mission-card.row-actions-reveal .mission-card-header { min-width: 0; }
    .mission-card.row-actions-reveal .mission-title-toggle { min-width: 0; padding-right: 0; }
    .mission-card.row-actions-reveal .mission-title-toggle .action-group-title,
    .mission-goal-group.row-actions-reveal .action-group-toggle .action-group-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
    .mission-goal-group.row-actions-reveal .action-group-toggle { min-width: 0; }
    .mission-card.row-actions-reveal .mission-card-actions { align-self: stretch; gap: 0.25rem; width: min(15rem, 58%); max-width: 15rem; }
    .notification-item.row-actions-reveal { padding-right: 2.75rem; }
    .ai-config-item.row-actions-reveal { flex-direction: row; align-items: center; padding-right: 2.75rem; }
    .ai-config-item.row-actions-reveal .ai-config-main { flex: 1 1 auto; width: 100%; }
    .takeaway-card.row-actions-reveal { align-items: center; padding-right: 2.75rem; }
    .takeaway-card.row-actions-reveal .takeaway-card-body { width: 100%; }
    .discover-action-card.row-actions-reveal { position: relative; padding-right: 2.75rem; }
    .discover-action-card.row-actions-reveal .discover-action-main { min-width: 0; width: 100%; }
    .row-actions-reveal .btn:has(> .material-icons),
    .row-actions-reveal .btn:has(> .material-symbols-outlined),
    .row-actions-reveal .btn:has(> .e-icons),
    .row-actions-reveal .btn:has(> .ui-icon) { width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0; justify-content: center; font-size: 0; }
    .row-actions-reveal .btn:has(> .material-icons) > .material-icons,
    .row-actions-reveal .btn:has(> .material-symbols-outlined) > .material-symbols-outlined,
    .row-actions-reveal .btn:has(> .e-icons) > .e-icons,
    .row-actions-reveal .btn:has(> .ui-icon) > .ui-icon { font-size: 1.15rem; }
    .row-actions-reveal .btn:has(> .material-icons) .btn-label,
    .row-actions-reveal .btn:has(> .material-symbols-outlined) .btn-label,
    .row-actions-reveal .btn:has(> .e-icons) .btn-label,
    .row-actions-reveal .btn:has(> .ui-icon) .btn-label,
    .row-actions-reveal .btn-label-optional { display: none; }
    .work-item-card.row-actions-reveal { min-height: 3.75rem; align-items: stretch; padding: 0; cursor: default; }
    .work-item-card.row-actions-reveal .work-item-main { flex: 1 1 auto; width: 100%; min-height: 3.75rem; padding: 0.75rem 2.75rem 0.75rem 0.875rem; }
    .work-item-card.row-actions-reveal .work-item-main > div { flex-direction: column; align-items: flex-start; gap: 0.15rem; overflow: hidden; }
    .work-item-card.row-actions-reveal .work-item-main h3,
    .work-item-card.row-actions-reveal .work-item-main p { max-width: 100%; }
    .work-item-card.row-actions-reveal .work-item-main p { display: block; }
    .work-item-card.row-actions-reveal .work-item-icon { font-size: 1.15rem; }
    .work-item-card.row-actions-reveal .btn-icon.btn-sm { width: 40px; min-width: 40px; height: 40px; min-height: 40px; }
    .row-actions-reveal.swiped { box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--accent) 22%, var(--border-default)); }
}

.action-mapping-step { display: grid; gap: 0.875rem; padding: 0.875rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: color-mix(in srgb, var(--bg-raised) 72%, var(--bg-surface)); }
.action-mapping-step p { margin: 0; color: var(--fg-muted); font-size: var(--fs-small); line-height: var(--lh-normal); }
.action-mapping-step .form-select-native,
.action-group-map-input { width: 100%; min-height: 44px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background-color: var(--bg-surface); color: var(--fg-primary); font-size: var(--fs-small); padding: 0 0.75rem; }
.action-group-map-input:focus,
.action-group-map-input:focus-visible,
.action-mapping-step .form-select-native:focus,
.action-mapping-step .form-select-native:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--shadow-focus-ring); }
.work-item-meta-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.45rem; }
.work-item-meta-chips span { display: inline-flex; max-width: 100%; padding: 0.15rem 0.5rem; border-radius: var(--radius-pill); background: var(--bg-raised); border: 1px solid var(--border-default); color: var(--fg-muted); font-size: var(--fs-caption); overflow-wrap: anywhere; }
.milestone-shortcode,
.milestone-inline-link { display: inline-flex; align-items: center; min-height: 1.35rem; padding: 0 0.45rem; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--fg-accent); font-size: var(--fs-caption); font-weight: 700; line-height: 1; vertical-align: middle; }
.milestone-inline-link { margin-left: 0.35rem; text-decoration: none; }
.milestone-inline-link:hover,
.milestone-inline-link:focus-visible { color: var(--accent); box-shadow: var(--shadow-focus-ring); outline: none; }
.focus-upcoming-milestone { display: grid; gap: 0.625rem; padding-top: 0.875rem; border-top: 1px solid var(--border-subtle); }
.focus-upcoming-milestone-card { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 4.5rem; padding: 0.75rem; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: color-mix(in srgb, var(--bg-raised) 72%, var(--bg-surface)); }
.focus-upcoming-milestone-card > div:first-child { min-width: 0; }
.focus-upcoming-milestone-card strong { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.35rem; color: var(--fg-primary); font-size: var(--fs-body); line-height: var(--lh-tight); overflow-wrap: anywhere; }
.focus-upcoming-milestone-card p { margin: 0.25rem 0 0; color: var(--fg-muted); font-size: var(--fs-caption); line-height: var(--lh-normal); overflow-wrap: anywhere; }
.focus-upcoming-milestone-date { margin-left: 0.35rem; color: var(--fg-muted); font-size: var(--fs-caption); font-weight: var(--fw-semibold); line-height: var(--lh-tight); white-space: nowrap; }
.focus-milestone-slide { cursor: default; }
.focus-milestone-slide:hover { border-color: var(--border-default); box-shadow: none; }
.focus-action-runner { display: grid; grid-template-columns: 1.875rem minmax(0, 1fr) 1.875rem; align-items: center; column-gap: 0.5rem; row-gap: 0.35rem; }
.focus-action-slider { grid-column: 2; min-width: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 0.625rem; overflow-x: auto; overscroll-behavior-inline: contain; scroll-behavior: smooth; scroll-padding-inline: 0; scroll-snap-type: x mandatory; touch-action: pan-x pinch-zoom; padding: 0.125rem 0 0.35rem; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; }
.focus-action-slider::-webkit-scrollbar { width: 0; height: 0; display: none; }
.focus-action-slide { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "body status actions"; align-items: center; gap: 0.625rem; min-height: 4.5rem; padding: 0.75rem; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-raised); color: inherit; text-align: left; cursor: pointer; scroll-snap-align: start; scroll-snap-stop: always; }
.focus-action-slide:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.focus-action-slide-body { grid-area: body; min-width: 0; }
.focus-action-slide-body strong { display: block; color: var(--fg-primary); font-size: var(--fs-body); line-height: var(--lh-tight); overflow-wrap: anywhere; }
.focus-action-slide-body small { display: block; margin-top: 0.25rem; color: var(--fg-muted); font-size: var(--fs-caption); line-height: var(--lh-normal); overflow-wrap: anywhere; }
.focus-action-slide .badge { grid-area: status; justify-self: start; }
.focus-action-slide-actions { grid-area: actions; display: flex; align-items: center; justify-content: flex-end; gap: 0.125rem; }
.focus-action-item-slide { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "icon body status actions"; }
.focus-milestone-item-slide { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icon body actions"; align-items: center; }
.focus-slide-leading-icon { grid-area: icon; color: var(--fg-primary); font-size: 1.25rem; line-height: 1; }
.focus-action-nav { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border: 1px solid color-mix(in srgb, var(--border-default) 72%, transparent); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--bg-surface) 78%, transparent); color: var(--fg-muted); box-shadow: none; cursor: pointer; transition: background var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast), color var(--dur-fast), transform var(--dur-fast), opacity var(--dur-fast); }
.focus-action-nav:hover { color: var(--fg-accent); border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.focus-action-nav:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); border-color: var(--accent); }
.focus-action-nav .material-icons { font-size: 1rem; }
.focus-action-nav-prev { grid-column: 1; justify-self: start; }
.focus-action-nav-next { grid-column: 3; justify-self: end; }

/* Hide the runner arrows when there is only one slide (nothing to page through) */
.focus-action-runner:has(.focus-action-slider > .focus-action-slide:only-child) .focus-action-nav { visibility: hidden; pointer-events: none; }

/* On hover-capable pointers keep the arrows minimized until the runner is hovered or focused; touch keeps them visible */
@media (hover: hover) and (pointer: fine) {
    .focus-action-runner .focus-action-nav { opacity: 0; }
    .focus-action-runner:hover .focus-action-nav,
    .focus-action-runner:focus-within .focus-action-nav { opacity: 1; }
}

@media (max-width: 640px) {
    .discover-hero { align-items: flex-start; flex-direction: column; }
    .section-header.has-icon { grid-template-columns: 1fr; }
    .discover-hero-actions { width: 100%; }
    .discover-action-composer,
    .discover-ai-panel { align-items: stretch; flex-direction: column; }
    .discover-action-form,
    .discover-ai-actions { align-items: stretch; flex-direction: column; width: 100%; }
    .work-item-toolbar,
    .goal-work-items-header,
    .work-item-card { align-items: stretch; flex-direction: column; }
    .action-selection-bar { align-items: stretch; flex-direction: column; }
    .segmented-tabs-4 { max-width: 100%; overflow-x: auto; }
    .segmented-tabs-4 .seg-tab { min-width: 7rem; }
    .segmented-tabs-4 .seg-indicator { display: none; }
    .segmented-tabs-5 { max-width: 100%; overflow-x: auto; }
    .segmented-tabs-5 .seg-tab { min-width: 7rem; }
    .segmented-tabs-5 .seg-indicator { display: none; }
    .focus-upcoming-milestone-card { align-items: stretch; flex-direction: column; }
    .focus-work-tabs-row { align-items: stretch; flex-direction: column; }
    .focus-up-next-planner { gap: 0.75rem; }
    .focus-up-next-header { align-items: flex-start; flex-direction: row; gap: 0.75rem; }
    .focus-work-tabs { max-width: 360px; overflow-x: visible; width: 100%; }
    .focus-work-tabs .seg-tab { min-width: 0; }
    .focus-work-tabs .seg-indicator { display: block; }
    .focus-work-manage { justify-content: center; width: auto; }
    .focus-work-actions,
    .work-item-actions { justify-content: flex-end; flex-wrap: wrap; }
    .work-item-status { width: 100%; }
    .work-item-dialog-grid { grid-template-columns: 1fr; }
    .focus-action-runner { grid-template-columns: minmax(0, 1fr); }
    .focus-action-slider { grid-column: 1; grid-row: 1; }
    .focus-action-nav { display: none; }
    .focus-action-slide { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "body status"; align-items: center; }
    .focus-action-item-slide { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icon body status"; }
    .focus-milestone-item-slide { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon body"; }
    .focus-action-slide-body strong,
    .focus-action-slide-body small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
    .focus-action-slide-actions { display: none; }
}

.entity-workspace-hero {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 0.875rem 1rem;
    margin-bottom: 0.75rem;
}

.entity-workspace-copy {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.entity-workspace-copy h1 {
    margin: 0;
    font-size: var(--fs-h2);
    line-height: var(--lh-tight);
    color: var(--fg-primary);
    overflow-wrap: anywhere;
}

.entity-workspace-copy p {
    margin: 0;
    color: var(--fg-muted);
    font-size: var(--fs-small);
    line-height: var(--lh-relaxed);
}

.entity-row-cue {
    color: var(--fg-muted);
    font-size: var(--fs-caption);
}

@media (max-width: 640px) {
    .entity-workspace-hero {
        flex-direction: column;
    }

}

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

    .roadmap li.active > span,
    .skeleton,
    .toast-progress,
    .ptr-spinner,
    .ind-spinner .spinner-ring {
        animation: none !important;
    }

    .skeleton { background: var(--bg-raised); }
    .seg-indicator,
    .side-rail,
    .chip-item,
    .asset-card,
    .asset-card-main,
    .more-tile,
    .goals-filter-tab,
    .seg-tab,
    .theme-opt,
    .toast-item,
    .rdialog,
    .ptr-indicator { transition: none !important; }
}

/* ── Focus redesign (Today + quick-add) ── */
.focus-onboarding-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: linear-gradient(135deg, var(--accent-soft), var(--bg-surface));
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 1rem 1.125rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-sm);
}

.focus-onboarding-welcome h2 {
    margin: 0.125rem 0 0.25rem;
    font-size: var(--fs-h2);
    color: var(--fg-primary);
}

.focus-onboarding-welcome p {
    margin: 0;
    color: var(--fg-muted);
    line-height: var(--lh-base);
}

.focus-onboarding-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex: 0 0 auto;
}

.focus-next-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.focus-next-action {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
    min-height: 3.75rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-raised);
    color: var(--fg-primary);
    text-align: left;
    cursor: pointer;
}

.focus-next-action:hover {
    border-color: var(--border-strong);
    background: var(--bg-surface);
}

.focus-next-action .material-icons {
    color: var(--accent);
    flex: 0 0 auto;
}

.focus-next-action strong,
.focus-next-action small {
    display: block;
}

.focus-next-action strong {
    margin-bottom: 0.125rem;
    font-size: var(--fs-body);
}

.focus-next-action small {
    color: var(--fg-muted);
    line-height: var(--lh-base);
}

.focus-today-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.875rem;
    background: linear-gradient(135deg, var(--bg-surface), var(--bg-raised));
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 0.875rem 1rem;
    margin-bottom: 0.75rem;
    box-shadow: var(--shadow-sm);
}

.focus-today-main { flex: 1 1 auto; min-width: 0; }

.focus-today-main h1 {
    margin: 0.125rem 0 0.25rem;
    max-width: 24ch;
    font-size: var(--fs-h2);
    color: var(--fg-primary);
    overflow-wrap: anywhere;
}

.focus-today-main p {
    margin: 0;
    max-width: 48ch;
    color: var(--fg-muted);
    font-size: var(--fs-small);
    line-height: var(--lh-tight);
}

.focus-today-actions {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 0.5rem;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

.focus-ai-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2rem;
}

.focus-goal-brief {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 0.875rem;
    box-shadow: var(--shadow-sm);
}

.focus-goal-brief-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.875rem;
}

.focus-goal-brief-heading {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    gap: 0.35rem;
}

.focus-goal-brief-title {
    flex: 1 1 auto;
    min-width: 0;
}

.focus-goal-brief-title h1 {
    margin: 0.125rem 0 0.25rem;
    font-size: var(--fs-h2);
    color: var(--fg-primary);
    line-height: var(--lh-tight);
    overflow-wrap: anywhere;
}

.focus-goal-brief-title p,
.focus-goal-brief-copy p {
    margin: 0.125rem 0 0;
    color: var(--fg-muted);
    font-size: var(--fs-small);
    line-height: var(--lh-relaxed);
    overflow-wrap: anywhere;
}

.focus-goal-context-inline {
    display: flex;
    align-items: flex-start;
    flex: 1 0 100%;
    gap: 0.5rem;
    width: 100%;
    max-width: none;
}

.focus-goal-context-inline p {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0.125rem 0 0;
    color: var(--fg-primary);
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);
    overflow-wrap: anywhere;
}

.focus-goal-context-inline .btn-icon {
    flex: 0 0 auto;
}

.focus-goal-brief-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.focus-goal-brief-body:empty { display: none; }

.focus-goal-brief-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-subtle);
}

.focus-goal-brief-row-ai {
    justify-content: flex-start;
}

.focus-ai-assistance-row {
    align-items: center;
}

.focus-ai-assistance-icon {
    color: var(--accent);
    flex: 0 0 auto;
}

.focus-ai-assistance-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex: 0 0 auto;
}

.focus-goal-brief-copy {
    flex: 1 1 auto;
    min-width: 0;
}

.focus-assistant-panel {
    background: var(--bg-raised);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 0.875rem;
}

.focus-assistant-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.focus-assistant-section {
    display: grid;
    gap: 0.125rem;
    margin-top: 0.5rem;
}

.focus-assistant-section:first-of-type { margin-top: 0; }

.focus-assistant-label {
    color: var(--fg-muted);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0;
}

.focus-assistant-next-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--fg-primary);
    font-size: var(--fs-small);
    line-height: var(--lh-relaxed);
}

.focus-assistant-next-row > span {
    flex: 1 1 auto;
    min-width: 0;
}

.focus-goal-brief-copy strong {
    display: block;
    margin-top: 0.35rem;
    color: var(--fg-primary);
    font-size: var(--fs-small);
}

.notification-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.notification-item {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    max-width: 100%;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-raised);
    padding: 0.625rem;
}

.notification-icon {
    color: var(--accent);
    flex: 0 0 auto;
}

.notification-copy {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.125rem;
}

.notification-copy strong,
.notification-copy small,
.notification-empty span:last-child {
    overflow-wrap: anywhere;
}

.notification-copy small,
.notification-empty {
    color: var(--fg-muted);
    font-size: var(--fs-small);
}

.notification-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex: 0 0 auto;
}

.notification-empty {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0;
}

.notification-empty .material-icons { font-size: 1.125rem; }
}

.focus-ai-brief {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 0.875rem 1rem;
    margin-bottom: 0.75rem;
    box-shadow: var(--shadow-sm);
}

.focus-goal-context {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0.875rem 1rem;
    margin-bottom: 0.75rem;
}

.focus-goal-context-main {
    flex: 1 1 auto;
    min-width: 0;
}

.focus-goal-context-main p {
    margin: 0.125rem 0 0;
    color: var(--fg-primary);
    font-size: var(--fs-small);
    line-height: var(--lh-relaxed);
    overflow-wrap: anywhere;
}

.goals-context-add {
    align-self: flex-start;
    margin-top: 0.125rem;
}

.focus-ai-brief-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--accent);
    flex: 0 0 auto;
}

.focus-ai-brief-copy { flex: 1 1 auto; min-width: 0; }
.focus-ai-brief-copy p { margin: 0.125rem 0 0; color: var(--fg-primary); font-size: var(--fs-small); line-height: var(--lh-relaxed); }
.capture-goal-lens { margin-bottom: 0.875rem; }
.focus-ai-brief-signals { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.5rem; }
.focus-ai-brief-signals span,
.focus-ai-brief-signals a { display: inline-flex; align-items: center; justify-content: center; min-width: 1.55rem; height: 1.55rem; max-width: 100%; padding: 0 0.45rem; border-radius: var(--radius-pill); background: var(--bg-surface); color: var(--fg-muted); border: 1px solid var(--border-default); font-size: var(--fs-caption); font-weight: var(--fw-semibold); text-decoration: none; overflow-wrap: anywhere; }
.focus-ai-brief-signals a:hover,
.focus-ai-brief-signals a:focus-visible { color: var(--accent); border-color: var(--accent); }

@media (max-width: 768px) {
    .focus-goal-brief-header,
    .focus-goal-brief-row {
        flex-direction: column;
    }

    .focus-goal-brief-row-ai {
        flex-direction: row;
    }

    .focus-today-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .focus-primary-action {
        justify-content: center;
    }

    .focus-primary-action-label {
        display: inline;
    }
}

.focus-stat-label {
    margin-top: 0.3rem;
    font-size: var(--fs-small);
    color: var(--fg-muted);
}

.focus-start-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 1.125rem;
    box-shadow: var(--shadow-md);
}

.focus-start-copy h2 {
    margin: 0.2rem 0 0.4rem;
    color: var(--fg-primary);
}

.focus-start-copy p {
    margin: 0;
    max-width: 58ch;
    color: var(--fg-muted);
}

.focus-goal-picker {
    display: grid;
    gap: 0.625rem;
}

.focus-goal-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: 4rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-raised);
    color: var(--fg-primary);
    text-align: left;
    cursor: pointer;
}

.focus-goal-option:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
}

.focus-goal-option strong,
.focus-goal-option small {
    display: block;
}

.focus-goal-option small {
    margin-top: 0.25rem;
    color: var(--fg-muted);
    line-height: var(--lh-base);
}

.focus-goal-option-icon {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    color: var(--accent);
    background: var(--accent-soft);
    flex: 0 0 auto;
}

.focus-start-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.focus-quick-add { margin-bottom: 1rem; }

.quick-add-form {
    background: var(--bg-surface);
    border: 1px solid var(--accent);
    border-radius: var(--radius-lg);
    padding: 0.875rem 1rem;
    box-shadow: var(--shadow-focus-ring);
}

.quick-add-input {
    width: 100%;
    box-sizing: border-box;
    border: none;
    outline: none;
    background: transparent;
    font-size: var(--fs-body);
    color: var(--fg-primary);
    padding: 0.375rem 0.625rem 0.625rem;
    border-bottom: 1px solid var(--border-default);
    margin-bottom: 0.625rem;
}

.quick-add-input::placeholder { color: var(--fg-placeholder); opacity: 1; }

.quick-add-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.quick-add-hint {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0 0.625rem;
    color: var(--fg-muted);
    font-size: var(--fs-caption);
}

.quick-add-hint .material-icons { font-size: 1rem; }

.quick-add-kind {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.625rem;
}

.quick-add-kind-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--fg-muted);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}

.quick-add-kind-chip .material-icons,
.quick-add-kind-chip .material-symbols-outlined { font-size: 1rem; }

.quick-add-kind-chip:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.quick-add-kind-chip.is-selected {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}

.focus-recent-takeaway-card {
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.6rem;
}

.focus-takeaway-slide {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "icon body";
    align-items: flex-start;
}

.focus-takeaway-slide .focus-recent-takeaway-icon { grid-area: icon; }

.focus-recent-takeaway-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: var(--fg-primary);
    font-size: 1.125rem;
}

.btn-add-asset {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: transparent;
    border: 1.5px dashed var(--border-default);
    border-radius: var(--radius-md);
    color: var(--fg-muted);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}

.btn-add-asset:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}

/* ── Goals page ── */
.goals-page {
    width: min(100%, var(--content-workspace));
    max-width: var(--content-workspace);
}

.goal-detail-page {
    width: min(100%, var(--content-workspace));
    max-width: var(--content-workspace);
}

.goal-detail-hero {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 1rem 1.125rem;
    margin-bottom: 0;
}

.goal-detail-hero .section-header-actions {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.goal-detail-hero-avatar {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-pill);
    background: var(--gradient-avatar);
    color: var(--fg-on-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
}

.goal-detail-hero-avatar .material-icons { font-size: 1.5rem; }

.goal-detail-badges {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
    margin-bottom: 0.125rem;
}

.goal-detail-header-tools {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.625rem;
    flex: 0 0 min(20rem, 38%);
    min-width: 16rem;
}

.goal-detail-ai-row {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-raised);
}

.goal-detail-ai-icon {
    color: var(--accent);
    font-size: 1.1rem;
}

.goal-detail-ai-row strong {
    display: block;
    color: var(--fg-primary);
    font-size: var(--fs-small);
    line-height: var(--lh-tight);
}

.goal-detail-ai-row p {
    margin: 0.125rem 0 0;
    color: var(--fg-muted);
    font-size: var(--fs-caption);
    line-height: var(--lh-normal);
}

.goal-detail-hero-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.goal-detail-hero-body h1 {
    margin: 0;
    color: var(--fg-primary);
    font-size: var(--fs-h2);
    line-height: var(--lh-tight);
    overflow-wrap: anywhere;
}

.goal-detail-hero-body p {
    margin: 0;
    color: var(--fg-muted);
    font-size: var(--fs-small);
    line-height: var(--lh-relaxed);
}

.goal-detail-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.375rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.goal-detail-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.625rem;
}

.goal-detail-summary-card {
    min-width: 0;
    min-height: 4.25rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "icon count" "icon label";
    align-items: center;
    column-gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-raised);
    color: inherit;
    text-decoration: none;
    text-align: left;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: transform var(--motion-fast, 0.15s) ease, border-color var(--motion-fast, 0.15s) ease, box-shadow var(--motion-fast, 0.15s) ease, color var(--motion-fast, 0.15s) ease;
}

.goal-detail-summary-card:hover,
.goal-detail-summary-card.active {
    border-color: var(--accent);
    color: var(--fg-accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.goal-detail-summary-card.active {
    background: color-mix(in srgb, var(--accent-soft) 68%, var(--bg-raised));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent), var(--shadow-md);
}

.goal-detail-summary-card .material-icons,
.goal-detail-summary-card .material-symbols-outlined {
    grid-area: icon;
    color: var(--fg-accent);
    font-size: 1.35rem;
}

.goal-detail-summary-card strong {
    grid-area: count;
    color: var(--fg-primary);
    font-size: var(--fs-h4);
    line-height: var(--lh-tight);
}

.goal-detail-summary-card small {
    grid-area: label;
    color: var(--fg-muted);
    font-size: var(--fs-caption);
}

.goal-work-section {
    display: grid;
    gap: 0.75rem;
    padding: 0.875rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--bg-surface) 94%, var(--bg-raised));
    box-shadow: var(--shadow-sm);
}

.goal-work-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.875rem;
}

.goal-work-section-copy {
    min-width: 0;
    display: grid;
    gap: 0.125rem;
}

.goal-work-section-kicker {
    color: var(--fg-accent);
    font-size: var(--fs-caption);
    font-weight: 700;
    line-height: var(--lh-tight);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
}

.goal-work-section-header h2 {
    margin: 0;
    color: var(--fg-primary);
    font-size: var(--fs-h3);
    line-height: var(--lh-tight);
    overflow-wrap: anywhere;
}

.goal-work-section-header p {
    margin: 0;
    color: var(--fg-muted);
    font-size: var(--fs-small);
    line-height: var(--lh-relaxed);
}

.goal-work-list {
    display: grid;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.goal-work-card {
    min-height: 4.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
    padding: 0.75rem 0.75rem 0.75rem 0.875rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
}

.goal-work-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.goal-work-card-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: inherit;
}

.goal-work-card-button {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.goal-work-card-button:hover { background: transparent; }

.goal-work-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 2.125rem;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--accent-soft) 72%, var(--bg-raised));
    color: var(--accent);
    font-size: 1.1rem;
    font-weight: var(--fw-semibold);
    line-height: 1;
}

.goal-work-card-avatar {
    border-radius: var(--radius-pill);
    background: var(--gradient-avatar);
    color: var(--fg-on-accent);
}

.goal-work-card-body {
    min-width: 0;
    flex: 1 1 auto;
    display: grid;
    gap: 0.3rem;
}

.goal-work-card-head {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
}

.goal-work-card-head h3 {
    min-width: 0;
    margin: 0;
    color: var(--fg-primary);
    font-size: var(--fs-body);
    line-height: var(--lh-tight);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.goal-work-card-meta {
    margin: 0;
    color: var(--fg-muted);
    font-size: var(--fs-small);
    line-height: var(--lh-normal);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.goal-work-card-chip {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    max-width: 12rem;
    min-height: 1.45rem;
    padding: 0.0625rem 0.5rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
    background: var(--bg-raised);
    color: var(--fg-muted);
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    line-height: var(--lh-normal);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.goal-work-card-actions {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.125rem;
}

.goal-milestone-timeline {
    display: flex;
    gap: 0.625rem;
    margin: 0;
    padding: 0.125rem 0 0.25rem;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x proximity;
}

.goal-milestone-timeline-item {
    position: relative;
    flex: 0 0 min(16rem, 82vw);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    scroll-snap-align: start;
}

.goal-milestone-timeline-item::before {
    content: "";
    position: absolute;
    left: 1.1rem;
    right: -0.75rem;
    top: 0.48rem;
    height: 1px;
    background: var(--border-default);
}

.goal-milestone-timeline-item:last-child::before { display: none; }

.goal-milestone-node {
    z-index: 1;
    width: 0.85rem;
    height: 0.85rem;
    margin-left: 0.25rem;
    border-radius: var(--radius-pill);
    border: 2px solid var(--accent);
    background: var(--bg-surface);
    box-shadow: 0 0 0 3px var(--bg-default);
}

.goal-milestone-timeline-item.completed .goal-milestone-node {
    border-color: var(--success);
    background: var(--success);
}

.goal-milestone-card {
    min-width: 0;
    display: grid;
    gap: 0.35rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    box-shadow: var(--shadow-sm);
}

.goal-milestone-card-head {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.goal-milestone-card h3 {
    margin: 0;
    color: var(--fg-primary);
    font-size: var(--fs-body);
    line-height: var(--lh-tight);
    overflow-wrap: anywhere;
}

.goal-milestone-card p,
.goal-milestone-card small {
    margin: 0;
    color: var(--fg-muted);
    font-size: var(--fs-small);
    line-height: var(--lh-normal);
    overflow-wrap: anywhere;
}

@media (max-width: 640px) {
    .goal-detail-hero { align-items: stretch; flex-direction: column; }
    .goal-detail-header-tools { align-items: stretch; flex-basis: auto; min-width: 0; width: 100%; }
    .goal-detail-actions { justify-content: flex-end; }
    .goal-detail-summary-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.375rem; }
    .goal-detail-summary-card { min-height: 3.75rem; grid-template-columns: 1fr; grid-template-areas: "icon" "count"; justify-items: center; text-align: center; row-gap: 0.125rem; padding: 0.5rem 0.375rem; }
    .goal-detail-summary-card small { display: none; }
    .goal-detail-summary-card .material-icons,
    .goal-detail-summary-card .material-symbols-outlined { font-size: 1.2rem; }
    .goal-detail-summary-card strong { font-size: var(--fs-body); }
}

@media (max-width: 768px) {
    .goal-detail-header-tools,
    .goal-detail-actions,
    .work-item-toolbar,
    .work-item-actions,
    .goals-workspace-actions,
    .goals-mgmt-actions {
        flex-wrap: wrap;
    }

    .work-item-card {
        align-items: stretch;
        flex-direction: column;
    }

    .work-item-main,
    .work-item-main > div,
    .work-item-actions {
        min-width: 0;
        width: 100%;
    }

    .work-item-actions {
        justify-content: flex-end;
    }

    .work-item-main h3,
    .work-item-main p,
    .goals-mgmt-title {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .goal-milestone-timeline {
        min-width: 0;
        padding-bottom: 0.45rem;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    .goal-milestone-timeline-item {
        flex-basis: min(15rem, 86vw);
    }
}

.goals-workspace-hero {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 1rem;
    margin-bottom: 0.875rem;
}

.goals-workspace-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.875rem;
}

.goals-workspace-heading {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    gap: 0.35rem;
}

.goals-workspace-copy {
    flex: 1 1 auto;
    min-width: 0;
}

.goals-workspace-copy h1 {
    margin: 0.125rem 0 0.25rem;
    font-size: var(--fs-h2);
    line-height: var(--lh-tight);
    color: var(--fg-primary);
    overflow-wrap: anywhere;
}

.goals-workspace-context {
    display: flex;
    flex: 1 0 100%;
    width: 100%;
    margin: 0;
    color: var(--fg-muted);
    font-size: var(--fs-small);
    line-height: var(--lh-relaxed);
    overflow-wrap: anywhere;
}

.goals-workspace-actions {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 0.5rem;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

.goals-highlight-planner {
    display: grid;
    grid-template-columns: minmax(12rem, 0.7fr) 1fr;
    gap: 1rem;
    align-items: center;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--bg-raised);
    padding: 0.875rem 1rem;
    margin-bottom: 0.875rem;
}

.goals-highlight-planner p {
    margin: 0.25rem 0 0;
    color: var(--fg-muted);
    font-size: var(--fs-small);
    line-height: var(--lh-relaxed);
}

.goals-highlight-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.375rem;
}

.goals-highlight-mobile {
    display: none;
}

.goals-highlight-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    min-width: 0;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-default);
    color: var(--fg-default);
    padding: 0.5rem 0.375rem;
    cursor: pointer;
}

.goals-highlight-day.active {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.goals-highlight-day span,
.goals-highlight-day small {
    color: var(--fg-muted);
    font-size: var(--fs-caption);
}

.goals-highlight-day strong {
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
}

@media (max-width: 768px) {
    .goals-highlight-planner {
        grid-template-columns: 1fr;
        align-items: stretch;
        min-width: 0;
    }

    .goals-highlight-days-desktop {
        display: none;
    }

    .goals-highlight-mobile {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.5rem;
        min-width: 0;
        max-width: 100%;
    }

    .goals-highlight-days-mobile {
        display: grid;
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: calc((100% - 0.5rem) / 2);
        gap: 0.5rem;
        min-width: 0;
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-behavior: smooth;
        scroll-padding-inline: 0;
        scroll-snap-type: x mandatory;
        touch-action: pan-x pinch-zoom;
        padding: 0.125rem 0 0.35rem;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
    }

    .goals-highlight-days-mobile::-webkit-scrollbar {
        display: none;
    }

    .goals-highlight-day {
        min-height: 3.75rem;
        min-width: 0;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .goals-highlight-nav {
        width: 2.5rem;
        height: 2.5rem;
        min-width: 2.5rem;
        align-self: stretch;
        margin-block: auto;
    }
}

.goals-focus-panel {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    border: 1px solid var(--border-default);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-lg);
    background: var(--bg-raised);
    padding: 0.875rem 1rem;
    margin-bottom: 0.875rem;
}

.goals-focus-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--fg-muted);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
}

.goals-focus-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.goals-focus-main h2 {
    margin: 0;
    font-size: var(--fs-h3);
    color: var(--fg-primary);
}

.goals-focus-main p {
    margin: 0.25rem 0 0;
    color: var(--fg-muted);
    font-size: var(--fs-small);
    line-height: var(--lh-relaxed);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.goals-focus-actions {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
}

.goals-page .action-selection-bar { margin-bottom: 0.875rem; }
.goals-list-controls { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; }
.goals-status-tabs { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.goals-list-actions { flex: 0 0 auto; justify-content: flex-end; flex-wrap: wrap; }

.goals-filter-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.375rem;
    margin-bottom: 0.875rem;
}

.goals-filter-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-height: 3rem;
    padding: 0.55rem 0.75rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
    color: var(--fg-muted);
}

.goals-filter-tab:hover { border-color: var(--border-strong); color: var(--fg-primary); transform: translateY(-1px); }

.goals-filter-tab.active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent-soft) 68%, var(--bg-surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent), var(--shadow-sm);
    color: var(--fg-primary);
}

.goals-filter-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    min-height: 1.5rem;
    padding: 0 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    line-height: 1;
}

.goals-filter-label {
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
}

.goals-mgmt-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.625rem;
}

.goals-mgmt-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 0.875rem 0.75rem 0.875rem 1.125rem;
    box-shadow: var(--shadow-sm);
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}

.goals-mgmt-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }

.goals-mgmt-card--focus {
    border-color: var(--ind-purple);
    background: linear-gradient(135deg, var(--bg-surface) 80%, rgba(124, 58, 237, 0.04));
}

.goals-mission-memberships {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.375rem;
    min-width: 0;
    overflow: hidden;
}

.goals-mission-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    gap: 0.275rem;
    min-height: 1.5rem;
    padding: 0 0.5rem;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border-default));
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--accent-soft) 46%, var(--bg-surface));
    color: var(--fg-secondary);
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.goals-mission-chip .material-icons {
    flex: 0 0 auto;
    color: var(--accent);
    font-size: 0.95rem;
}

.goals-mgmt-body {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    border: 0;
    background: transparent;
    color: inherit;
    padding: 0;
    text-align: left;
    cursor: pointer;
}

.goals-mgmt-body:focus-visible {
    outline: none;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-focus-ring);
}

.goals-mgmt-title {
    margin: 0;
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    color: var(--fg-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.goals-mgmt-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    flex-wrap: nowrap;
}

.goals-mgmt-cue {
    color: var(--fg-muted);
    font-size: var(--fs-caption);
}

.goals-mgmt-actions {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}

.goals-action-btn { color: var(--fg-muted); }
.goals-action-btn:hover { color: var(--accent); }
.goals-action-delete:hover { color: var(--danger); }

.goals-highlight-action {
    color: var(--accent);
}

.goals-highlight-action .material-icons {
    font-size: 1.125rem;
}

.goals-highlight-action:hover,
.goals-highlight-action.active {
    color: var(--accent-strong);
    background: var(--accent-soft);
}

@media (max-width: 768px) {
    .goals-workspace-hero {
        padding: 0.875rem;
    }

    .goals-workspace-actions {
        width: 100%;
    }

    .goals-workspace-actions .btn {
        justify-content: center;
        min-width: 0;
    }

    .goals-list-controls {
        align-items: stretch;
        flex-direction: column;
    }

    .goals-status-tabs {
        max-width: 100%;
        width: 100%;
    }

    .goals-status-tabs .seg-tab {
        min-width: 0;
        padding-left: 0.375rem;
        padding-right: 0.375rem;
    }

    .goals-status-tabs .seg-count {
        padding-left: 0.375rem;
        padding-right: 0.375rem;
    }

    .goals-status-tabs .seg-indicator,
    .goals-status-tabs .goals-filter-all {
        display: none;
    }

    .goals-list-actions {
        justify-content: flex-start;
        width: 100%;
    }

    .goals-mgmt-card {
        align-items: center;
        flex-direction: row;
        gap: 0.5rem;
        padding: 0.875rem;
    }

    .goals-mgmt-card > .action-select-check {
        align-self: flex-start;
    }

    .goals-mgmt-body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "title meta"
            "missions missions";
        align-items: center;
        gap: 0.375rem 0.625rem;
        flex: 1 1 auto;
        min-width: 0;
    }

    .goals-mgmt-title {
        grid-area: title;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        overflow-wrap: normal;
    }

    .goals-mgmt-meta {
        grid-area: meta;
        justify-self: end;
    }

    .goals-mission-memberships {
        grid-area: missions;
        flex-wrap: nowrap;
        overflow: hidden;
    }

    .goals-mission-chip {
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        overflow-wrap: normal;
    }

    .goals-mgmt-actions {
        align-self: center;
        justify-content: flex-end;
        flex-direction: row;
        gap: 0.125rem;
        width: auto;
        padding-top: 0;
        border-top: 0;
    }

    .goals-mgmt-actions .btn-icon {
        min-width: 40px;
        min-height: 40px;
    }

    .goals-mgmt-card.row-actions-reveal .goals-mgmt-actions {
        align-self: stretch;
        gap: 0.25rem;
        width: min(15rem, 58%);
        max-width: 15rem;
    }
}

@media (max-width: 420px) {
    .asset-hero-actions .btn,
    .asset-hero-actions a.btn {
        width: 40px;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
        padding: 0;
        justify-content: center;
    }

    .asset-hero-action-label { display: none; }
}

.goals-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    width: fit-content;
}

.goals-status-infocus {
    background: rgba(124, 58, 237, 0.12);
    color: var(--ind-purple);
}

.goals-status-open {
    background: var(--bg-raised);
    color: var(--fg-muted);
}

.goals-status-completed {
    background: rgba(16, 185, 129, 0.12);
    color: var(--success);
}

.goals-status-onhold {
    background: color-mix(in srgb, var(--warning-soft) 72%, var(--bg-raised));
    color: var(--warning);
}

.goals-status-discarded {
    background: color-mix(in srgb, var(--danger-soft) 72%, var(--bg-raised));
    color: var(--danger);
}

[data-theme="dark"] .goals-status-infocus {
    background: rgba(167, 139, 250, 0.22);
    border-color: rgba(196, 181, 253, 0.45);
    color: #f1eaff;
}

[data-theme="dark"] .goals-status-open {
    background: rgba(78, 163, 245, 0.2);
    border-color: rgba(125, 193, 249, 0.45);
    color: #dbeeff;
}

[data-theme="dark"] .goals-status-completed {
    background: rgba(74, 222, 128, 0.2);
    border-color: rgba(134, 239, 172, 0.45);
    color: #e8ffef;
}

[data-theme="dark"] .goals-status-onhold {
    background: rgba(245, 158, 11, 0.2);
    border-color: rgba(251, 191, 36, 0.45);
    color: #fff4d6;
}

[data-theme="dark"] .goals-status-discarded {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(248, 113, 113, 0.42);
    color: #ffe4e6;
}

/* ── Goal switcher modal ── */
.goal-switcher-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    color: var(--fg-muted);
    text-align: center;
}

.goal-switcher-empty .ui-icon { width: 2rem; height: 2rem; color: var(--border-strong); }
.goal-switcher-empty p { margin: 0; font-size: var(--fs-small); }

.goal-switcher-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.goal-switcher-group { display: flex; flex-direction: column; gap: 0.25rem; }
.goal-switcher-group > ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.25rem; }

.goal-switcher-group-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--fg-muted);
    padding: 0 0.25rem 0.25rem;
    border-bottom: 1px solid var(--border-default);
    margin-bottom: 0.125rem;
}

.goal-switcher-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    padding: 0.75rem 0.875rem;
    text-align: left;
    cursor: pointer;
    color: var(--fg-primary);
    font-size: var(--fs-body);
    transition: background var(--dur-fast), border-color var(--dur-fast);
    min-height: 44px;
}

.goal-switcher-item:hover:not(:disabled) {
    background: var(--bg-raised);
    border-color: var(--border-default);
}

.goal-switcher-item--current {
    background: rgba(124, 58, 237, 0.06);
    border-color: var(--ind-purple);
    cursor: default;
    color: var(--ind-purple);
    font-weight: var(--fw-semibold);
}

[data-theme="dark"] .goal-switcher-item--current {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

.goal-switcher-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.goal-switcher-current-badge {
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    background: rgba(124, 58, 237, 0.12);
    color: var(--ind-purple);
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-pill);
    flex-shrink: 0;
}

[data-theme="dark"] .goal-switcher-current-badge {
    background: var(--accent-soft);
    color: var(--accent);
}

.goal-switcher-action-icon { color: var(--fg-muted); flex-shrink: 0; }
.goal-switcher-item:hover .goal-switcher-action-icon { color: var(--accent); }

/* ── Pagination ── */
.pagination-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem 0 0.5rem;
}

/* When pagination lives in a dialog footer, fill the footer and remove its own padding. */
.rdialog-footer .pagination-row--dialog {
    flex: 1 1 auto;
    padding: 0;
    gap: 0.75rem;
}

@media (max-width: 480px) {
    .goals-workspace-hero,
    .goals-focus-main {
        flex-direction: column;
        align-items: stretch;
    }
    .goals-workspace-actions,
    .goals-focus-actions { justify-content: flex-end; }
    .goals-filter-bar { gap: 0.375rem; }
    .goals-filter-num { font-size: 1.125rem; }
    .goals-filter-label { font-size: 10px; }
    .goals-mgmt-actions { gap: 0; }
    .focus-onboarding-welcome { flex-direction: column; align-items: flex-start; }
    .focus-onboarding-actions { width: 100%; justify-content: flex-end; }
    .focus-next-actions { grid-template-columns: 1fr; }
    .focus-today-hero { flex-direction: column; }
    .focus-today-actions { justify-content: flex-end; }
}

/* ── Add Person / Add Organization modals ── */
.rdialog .modal-tab-bar {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem;
    background: var(--bg-raised);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
}

.rdialog .modal-tab {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--fg-secondary);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--dur-fast), color var(--dur-fast);
    min-height: 36px;
}

.rdialog .modal-tab:hover { color: var(--fg-primary); }

.rdialog .modal-tab.active {
    background: var(--bg-surface);
    color: var(--fg-primary);
    box-shadow: var(--shadow-sm);
}

.rdialog .person-picker-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 320px;
    overflow-y: auto;
}

.rdialog .person-picker-list > li { margin: 0; }

.rdialog .picker-section-title {
    margin: 0.75rem 0 0.375rem;
    color: var(--fg-muted);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
}

.rdialog .person-picker-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    padding: 0.625rem 0.875rem;
    text-align: left;
    cursor: pointer;
    color: var(--fg-primary);
    font-size: var(--fs-body);
    transition: background var(--dur-fast), border-color var(--dur-fast);
    min-height: 44px;
}

.rdialog .person-picker-item:hover {
    background: var(--bg-raised);
    border-color: var(--border-default);
}

.rdialog .person-picker-item.selected {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

.rdialog .person-picker-name {
    font-weight: var(--fw-semibold);
    line-height: 1.25;
}

.rdialog .person-picker-sub {
    font-size: var(--fs-small);
    color: var(--fg-muted);
    line-height: 1.2;
}

.rdialog .person-picker-item.selected .person-picker-sub { color: var(--accent); opacity: 0.85; }

.rdialog .picker-search { margin: 0 0 0.5rem; }
.rdialog .picker-empty { padding: 0.75rem 0.25rem; color: var(--fg-muted); font-size: var(--fs-small); }
.rdialog .picker-empty .btn { margin-left: 0.5rem; }

.rdialog .form-group {
    margin: 0 0 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.rdialog .form-group:last-child { margin-bottom: 0; }

.rdialog .form-group > label {
    color: var(--fg-secondary);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
}

.rdialog .ind-loading-row {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 0;
}

.rdialog .validation-message {
    color: var(--danger);
    font-size: var(--fs-small);
}

.rdialog .validation-summary-errors {
    color: var(--danger);
    font-size: var(--fs-small);
    background: rgba(220, 38, 38, 0.08);
    border: 1px solid rgba(220, 38, 38, 0.2);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    list-style: none;
}

.rdialog .validation-summary-errors ul { margin: 0; padding-left: 1rem; }