/* SAGE Homepage — DOM-based kanban layout for topics + system views
   Uses design system tokens from design-system.css and layout-tokens.css */

/* ============================================================
   TOPIC ACCENT COLORS
   Sourced from PixiFlowRenderer TOPIC_ZONE_COLORS palette.
   ============================================================ */
:root {
    --topic-color-0: #6B7FBF;
    --topic-color-1: #8BC49E;
    --topic-color-2: #D4A574;
    --topic-color-3: #B07FB5;
    --topic-color-4: #7BBCD4;
    --topic-color-5: #D47B7B;
    --topic-color-6: #BBB574;
    --topic-color-7: #7B9FD4;

    --domain-actor: #4a9eff;
    --domain-system: #8B5CF6;
    --domain-intent: #51cf66;
    --domain-outcome: #ffa94d;
    --domain-default: var(--grey-light);

    --hp-column-width: 280px;
    --hp-column-gap: 32px;
    --hp-card-gap: 6px;
    --hp-row-unit: 65px;
}

/* ============================================================
   HOMEPAGE CONTAINER
   ============================================================ */
.homepage {
    padding: 24px;
    overflow: auto;
    height: 100%;
    box-sizing: border-box;
}

/* ============================================================
   KNOWLEDGE GRAPH (SVG force-directed layout)
   ============================================================ */
.homepage-graph-svg {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}
.homepage-graph-svg .topic-label {
    cursor: grab;
}
.homepage-graph-svg .topic-label:active {
    cursor: grabbing;
}

/* ============================================================
   MODULAR GRID (card fallback — kept for HomepageView)
   ============================================================ */
.homepage__columns {
    display: grid;
    grid-auto-columns: var(--hp-column-width);
    grid-auto-rows: var(--hp-row-unit);
    column-gap: var(--hp-column-gap);
    row-gap: var(--hp-card-gap);
    grid-auto-flow: row dense;
}

/* ============================================================
   TOPIC CARD
   ============================================================ */
.topic-card {
    position: relative;
    border-radius: var(--border-radius-lg);
    padding-bottom: var(--layout-padding);
    overflow: visible;
    box-sizing: border-box;
}

/* Modular-grid size tiers */
.topic-card--large   { grid-row: span 4; }  /* 4×65 + 3×6 = 278px ≈ 1:1 */
.topic-card--medium  { grid-row: span 2; }  /* 2×65 + 1×6 = 136px */
.topic-card--slim    { grid-row: span 1; }  /* 1×65 = 65px — heading + meta only */

.topic-card--selected {
    border-color: var(--topic-accent, #3b82f6);
    border-width: 2px;
}
.topic-card--ungrouped {
    cursor: default;
}
.topic-card--ungrouped .topic-card__name {
    font-size: var(--font-size-lg);
}

/* ── Sticky heading (wraps name + meta + active list header) ── */
.topic-card__heading {
    position: sticky;
    top: -24px;
    background: inherit;
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
    z-index: 2;
}
.topic-card--expanded .topic-card__heading {
    border-bottom: var(--border-default);
}
.topic-card__heading--stuck {
    border-bottom: var(--border-default);
    border-radius: 0;
}
.card-base .topic-card__heading--stuck {
    border-top: var(--border-default);
}

.topic-card__name {
    margin: 0;
    color: var(--text-secondary);
    padding: var(--layout-padding) var(--layout-padding) 0;
    font-size: var(--font-size-lg);
}
.topic-card--large .topic-card__name {
    font-size: var(--font-size-xl);
}
.topic-card--slim .topic-card__name {
    font-size: var(--font-size-base);
}

.topic-card__meta {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    font-weight: var(--font-weight-semibold);
    padding: 4px var(--layout-padding);
}

.topic-card__meta-link {
    cursor: pointer;
    transition: color 0.15s ease;
}
.topic-card__meta-link:hover {
    color: var(--text-primary);
    text-decoration: underline;
}

/* ── Sentinel (zero-height marker for IntersectionObserver) ── */
.topic-card__sentinel {
    height: 0;
    overflow: hidden;
}

/* ── List header (inside sticky heading, hidden until list is active) ── */
.topic-card__list-header {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 4px var(--layout-padding);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
}
.topic-card__list-header--active {
    display: flex;
}
.topic-card__list-close {
    flex-shrink: 0;
}

/* ── Card body (desc + list items, below sticky heading) ── */
.topic-card__body {
    font-size: var(--font-size-sm);
}

.topic-card__desc {
    margin: 0 0 8px 0;
    padding: 8px var(--layout-padding) 0;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Hide description when slim or when a list is open */
.topic-card--slim .topic-card__desc,
.topic-card--expanded .topic-card__desc {
    display: none;
}

/* ============================================================
   EXPANDABLE LISTS (entities / stories)
   ============================================================ */
.topic-card__list {
    display: none;
}
.topic-card__list--expanded {
    display: block;
}

.topic-card__entity-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px var(--layout-padding);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    border-bottom: var(--border-default);
}
.topic-card__entity-row:last-child {
    border-bottom: none;
}

.topic-card__entity-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--border-radius-pill);
    flex-shrink: 0;
    background: var(--dot-color, var(--domain-default));
}

.topic-card__entity-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
    text-decoration: none;
}
.topic-card__entity-name:hover {
    text-decoration: underline;
}

.topic-card__story-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px var(--layout-padding);
    font-size: var(--font-size-sm);
    border-bottom: var(--border-default);
}
.topic-card__story-row:last-child {
    border-bottom: none;
}
.topic-card__story-link {
    color: var(--text-primary);
    text-decoration: none;
}
.topic-card__story-link:hover {
    text-decoration: underline;
}

.topic-card__task-badge {
    flex-shrink: 0;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--border-radius-pill);
    background: var(--color-red-500, #cd243a);
    color: #fff;
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    line-height: 16px;
    text-align: center;
}

.topic-card__meta-badge {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 4px;
    border-radius: var(--border-radius-full, 50%);
    background: var(--color-red-500, #cd243a);
    vertical-align: middle;
}

.topic-card__subtopic-row {
    padding: 4px var(--layout-padding);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    border-bottom: var(--border-default);
}
.topic-card__subtopic-row:last-child {
    border-bottom: none;
}

.topic-card__list-more {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    padding: 4px 0;
    text-align: center;
}

/* ============================================================
   EXPAND BUTTON (sub-topics link)
   ============================================================ */
.topic-card__expand {
    display: none;
    margin-top: 8px;
    padding: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.15s ease;
}
.topic-card--has-children .topic-card__expand {
    display: inline-block;
}
.topic-card__expand:hover {
    color: var(--text-primary);
}

/* ============================================================
   DRILL-IN HEADER (back arrow + topic name)
   ============================================================ */
.homepage__drill-header {
    display: flex;
    align-items: center;
    gap: var(--layout-gap, 12px);
    padding-bottom: var(--layout-padding, 16px);
}
.homepage__back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    background: none;
    border: var(--border-default);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.homepage__back-btn:hover {
    background: var(--bg-lower);
    border-color: var(--grey-dark);
    color: var(--text-primary);
}
.homepage__drill-title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
}

/* ============================================================
   CANVAS CONTROL PANEL (floating overlay — filter + tasks)
   ============================================================ */
.canvas-panel-group {
    position: absolute;
    right: 16px;
    top: 16px;
    z-index: 10;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.canvas-panel {
    width: fit-content;
    display: flex;
    flex-direction: column;
    background: var(--bg-base);
    color: var(--text-primary);
    border: var(--border-default);
    border-radius: var(--border-radius-xl);
    overflow: hidden;
}
.canvas-panel--expanded {
    width: 320px;
    max-height: calc(100vh - var(--header-height, 48px) - 32px);
}
/* ── Panel header (tabs + chevron) ── */
.canvas-panel__header {
    display: flex;
    align-items: stretch;
    height: 42px;
    padding: 0;
    flex-shrink: 0;
}
.canvas-panel__header .underline-tabs {
    padding: 0 1.5rem 0 20px;
}
.canvas-panel__chevron {
    margin-left: auto;
    margin-right: 9px;
    flex-shrink: 0;
    align-self: center;
}

/* ── Panel body (scrollable tab content) ── */
.canvas-panel__body {
    overflow: hidden;
    flex: 1;
    display: none;
}
.canvas-panel--expanded .canvas-panel__body {
    display: flex;
}
.canvas-panel__tab-pane {
    display: none;
}
.canvas-panel__tab-pane--active {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
}

/* ── Filter list items ── */
.canvas-panel__filter-list {
    padding: 0 0 8px 0;
}
.canvas-panel__filter-item {
    padding: 6px 20px;
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    transition: color 0.12s ease, background 0.12s ease;
}
.canvas-panel__filter-item--child {
    padding-left: 32px;
}
.canvas-panel__filter-item:hover {
    color: var(--text-primary);
    background: var(--bg-raised-hover);
}
.canvas-panel__filter-item--active {
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
    background: var(--bg-raised);
}

/* ── Tasks tab content ── */
.canvas-panel__tasks-empty {
    padding: 24px 20px;
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}
.canvas-panel__tasks-header {
    flex-shrink: 0;
    border-bottom: var(--border-default);
}
.canvas-panel__tasks-summary {
    padding: 8px 20px;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}
.canvas-panel__tasks-batch {
    padding: 4px 20px 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    font-size: var(--font-size-xs);
}
.canvas-panel__tasks-list {
    overflow-y: auto;
    flex: 1;
}
.canvas-panel__auto-execute {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    cursor: pointer;
}
.canvas-panel__auto-execute input {
    margin: 0;
    cursor: pointer;
}
.canvas-panel__task-card {
    padding: 20px;
    font-size: var(--font-size-sm);
    border-bottom: var(--border-default);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.canvas-panel__task-card:last-child {
    border-bottom: none;
}

/* ============================================================
   PROJECT MENU (popover from footer button)
   ============================================================ */
.project-menu {
    position: fixed;
    z-index: 900;
    min-width: 200px;
    max-width: 280px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--bg-raised, #fff);
    border: var(--border-default);
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    padding: 6px;
}
.project-menu__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 6px;
    background: none;
    text-decoration: none;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s ease;
    font-family: inherit;
}
.project-menu__item:hover {
    background: var(--bg-lower, #f5f5f5);
}
.project-menu__name {
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary, #222);
    line-height: 1.3;
}
.project-menu__meta {
    font-size: 11px;
    color: var(--text-tertiary, #999);
}
.project-menu__divider {
    height: 1px;
    margin: 4px 8px;
    background: var(--grey-soft);
}
.project-menu__new .project-menu__name {
    color: var(--accent-primary, #4a9eff);
    font-weight: var(--font-weight-bold);
}