/* ═══════════════════════════════════════
   Christman Brand Tokens
   ═══════════════════════════════════════ */
:root {
    --christman-copper: #9F662D;
    --christman-dark-copper: #502C1E;
    --christman-gold: #C7893E;
    --christman-navy: #00467F;
    --christman-teal: #007481;
    --christman-dark-green: #205A41;
    --christman-rust: #A75248;
    --christman-cream: #ECD798;
    --christman-off-white: #F7F4F0;
}

/* ═══════════════════════════════════════
   Header Banner
   ═══════════════════════════════════════ */
.header-banner {
    position: relative;
    background: linear-gradient(135deg, var(--christman-dark-copper) 0%, var(--christman-copper) 50%, var(--christman-gold) 100%);
    color: white;
    padding: 18px 24px;
    border-radius: 8px;
    overflow: hidden;
}
.header-banner::after {
    content: '';
    position: absolute;
    top: -50%; right: -10%;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

/* ═══════════════════════════════════════
   Section Header Bars
   ═══════════════════════════════════════ */
.copper-bar {
    background: linear-gradient(90deg, var(--christman-copper), var(--christman-dark-copper));
    color: white; padding: 6px 14px; border-radius: 6px 6px 0 0;
}
.section-bar { color: white; padding: 6px 14px; border-radius: 6px 6px 0 0; }
.section-bar-navy { background: linear-gradient(90deg, var(--christman-navy), #003560); }
.section-bar-dark-copper { background: linear-gradient(90deg, var(--christman-dark-copper), #3a1f14); }
.section-bar-teal { background: linear-gradient(90deg, var(--christman-teal), #005a64); }
.section-bar-green { background: linear-gradient(90deg, var(--christman-dark-green), #163d2d); }
.section-bar-ai { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); }

/* ═══════════════════════════════════════
   KPI Cards
   ═══════════════════════════════════════ */
.kpi-card {
    padding: 11px 12px 10px;
    text-align: center;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    min-height: 108px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.kpi-card::before { content:''; position:absolute; top:0;left:0;right:0; height:3px; }
.kpi-clickable { cursor: pointer; }
.kpi-clickable:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.1); }
.kpi-clickable::after {
    content: '';
    position: absolute;
    right: 8px;
    top: 8px;
    width: 12px;
    height: 12px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5'><polyline points='9 18 15 12 9 6'></polyline></svg>") no-repeat center;
    opacity: 0.25;
}
.kpi-clickable:hover::after { opacity: 0.6; }

.kpi-card .mud-icon-root { font-size: 1.15rem !important; opacity: 0.85; }

.kpi-copper { background: linear-gradient(180deg, rgba(159,102,45,0.08) 0%, transparent 100%); }
.kpi-copper::before { background: var(--christman-copper); }
.kpi-copper .kpi-value, .kpi-copper .mud-icon-root { color: var(--christman-copper); }
.kpi-green { background: linear-gradient(180deg, rgba(32,90,65,0.08) 0%, transparent 100%); }
.kpi-green::before { background: var(--christman-dark-green); }
.kpi-green .kpi-value, .kpi-green .mud-icon-root { color: var(--christman-dark-green); }
.kpi-rust { background: linear-gradient(180deg, rgba(167,82,72,0.1) 0%, transparent 100%); }
.kpi-rust::before { background: var(--christman-rust); }
.kpi-rust .kpi-value, .kpi-rust .mud-icon-root { color: var(--christman-rust); }
.kpi-teal { background: linear-gradient(180deg, rgba(0,116,129,0.08) 0%, transparent 100%); }
.kpi-teal::before { background: var(--christman-teal); }
.kpi-teal .kpi-value, .kpi-teal .mud-icon-root { color: var(--christman-teal); }
.kpi-navy { background: linear-gradient(180deg, rgba(0,70,127,0.08) 0%, transparent 100%); }
.kpi-navy::before { background: var(--christman-navy); }
.kpi-navy .kpi-value, .kpi-navy .mud-icon-root { color: var(--christman-navy); }

/* Alert state — pulses subtly when there are items needing attention */
.kpi-alert::before { height: 5px; }
.kpi-alert .kpi-value { animation: kpi-alert-pulse 2.8s ease-in-out infinite; }
@keyframes kpi-alert-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}

.kpi-value {
    font-family:'Oswald',sans-serif;
    font-size: 2.1rem;
    font-weight: 600;
    line-height: 1;
    margin: 3px 0 3px;
    letter-spacing: -0.01em;
}
.kpi-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.85;
    font-weight: 700;
    margin-top: 1px;
}
.kpi-sublabel {
    font-size: 0.66rem;
    opacity: 0.55;
    font-weight: 500;
    margin-top: 3px;
    line-height: 1.25;
    max-width: 95%;
}

/* Dark mode */
.mud-theme-dark .kpi-copper { background: linear-gradient(180deg, rgba(199,137,62,0.12) 0%, transparent 100%); }
.mud-theme-dark .kpi-copper .kpi-value, .mud-theme-dark .kpi-copper .mud-icon-root { color: var(--christman-gold); }
.mud-theme-dark .kpi-green .kpi-value, .mud-theme-dark .kpi-green .mud-icon-root { color: #98B8AD; }
.mud-theme-dark .kpi-rust .kpi-value, .mud-theme-dark .kpi-rust .mud-icon-root { color: #E4605A; }
.mud-theme-dark .kpi-teal .kpi-value, .mud-theme-dark .kpi-teal .mud-icon-root { color: #5EB3E4; }
.mud-theme-dark .kpi-navy .kpi-value, .mud-theme-dark .kpi-navy .mud-icon-root { color: #5EB3E4; }

/* ═══════════════════════════════════════
   Impact/Effort Chart Grid
   ═══════════════════════════════════════ */
.chart-y-axis {
    display: flex;
    align-items: stretch;
    min-width: 28px;
}
.chart-y-title {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.62rem;
    font-weight: 600;
    opacity: 0.4;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
}
.chart-y-labels {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    text-align: right;
    padding: 0 5px;
    font-size: 0.68rem;
    font-weight: 600;
    opacity: 0.45;
}
.chart-x-labels {
    display: flex;
    justify-content: space-around;
    font-size: 0.68rem;
    font-weight: 600;
    opacity: 0.45;
    padding: 0 0 4px;
}

.chart-grid {
    position: relative;
    border-left: 2px solid rgba(0,0,0,0.15);
    border-bottom: 2px solid rgba(0,0,0,0.15);
    border-radius: 0 4px 0 0;
    overflow: visible;
}

/* Quadrant background zones */
.chart-quad {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    pointer-events: none;
}
.chart-quad-qw { top:0; left:0; width:50%; height:50%; background:rgba(32,90,65,0.1); color:rgba(32,90,65,0.35); border-radius: 0 0 0 0; }
.chart-quad-si { top:0; left:50%; right:0; height:50%; background:rgba(0,70,127,0.07); color:rgba(0,70,127,0.3); border-radius: 0 4px 0 0; }
.chart-quad-fi { top:50%; left:0; width:50%; bottom:0; background:rgba(236,215,152,0.15); color:rgba(159,102,45,0.3); }
.chart-quad-ra { top:50%; left:50%; right:0; bottom:0; background:rgba(167,82,72,0.07); color:rgba(167,82,72,0.3); }

/* Grid lines */
.chart-gridline-v { position:absolute; top:0; bottom:0; width:1px; background:rgba(0,0,0,0.07); pointer-events:none; }
.chart-gridline-h { position:absolute; left:0; right:0; height:1px; background:rgba(0,0,0,0.07); pointer-events:none; }

/* Project dots */
.chart-dot {
    position: absolute;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    z-index: 2;
}
.chart-dot:hover {
    transform: translate(-50%, -50%) scale(1.3);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    z-index: 20;
}
.chart-dot span:not(.chart-dot-tooltip) {
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    pointer-events: none;
    line-height: 1;
}

/* Hover tooltip for chart dots */
.chart-dot-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(30, 30, 30, 0.95);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.72rem;
    line-height: 1.4;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 100;
}
.chart-dot-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(30, 30, 30, 0.95);
}
.chart-dot:hover .chart-dot-tooltip {
    display: block;
}
.chart-dot-tooltip strong {
    font-size: 0.78rem;
}

/* Chart legend grid (numbered) */
.chart-legend-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 2px 8px;
}
.chart-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    padding: 1px 2px;
    border-radius: 3px;
}
.chart-legend-item:hover { background: rgba(159,102,45,0.1); }
.chart-legend-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    color: white;
    font-size: 0.55rem;
    font-weight: 700;
    flex-shrink: 0;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}
.chart-legend-name {
    font-size: 0.68rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mud-theme-dark .chart-legend-item:hover { background: rgba(255,255,255,0.08); }

/* Chart footer */
.chart-footer {
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.06);
}

.legend-dot { width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:3px; vertical-align:middle; }

/* Dark mode chart */
.mud-theme-dark .chart-grid { border-color: rgba(255,255,255,0.2); }
.mud-theme-dark .chart-gridline-v, .mud-theme-dark .chart-gridline-h { background: rgba(255,255,255,0.07); }
.mud-theme-dark .chart-quad-qw { background:rgba(32,90,65,0.15); color:rgba(32,90,65,0.5); }
.mud-theme-dark .chart-quad-si { background:rgba(0,70,127,0.1); color:rgba(0,70,127,0.4); }
.mud-theme-dark .chart-quad-fi { background:rgba(236,215,152,0.06); color:rgba(199,137,62,0.4); }
.mud-theme-dark .chart-quad-ra { background:rgba(167,82,72,0.08); color:rgba(167,82,72,0.4); }
.mud-theme-dark .chart-footer { border-top-color: rgba(255,255,255,0.08); }

/* ═══════════════════════════════════════
   Attention Panel + Timeline
   ═══════════════════════════════════════ */
.attention-panel { border-left: 4px solid var(--christman-rust); border-radius: 6px; }
.attention-header {
    display:flex; align-items:center; gap:8px;
    background: linear-gradient(90deg, rgba(167,82,72,0.1), rgba(167,82,72,0.03));
    color: var(--christman-rust);
    padding: 6px 14px; font-weight:700; font-size:0.85rem;
    border-radius: 6px 6px 0 0;
}

/* ═══════════════════════════════════════
   Highlight Cards (numbered)
   ═══════════════════════════════════════ */
/* Highlights grid — each card can be Small/Medium/Full width */
.highlights-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-content: flex-start;
    /* Cards take their natural / pinned height instead of stretching to match
       the tallest sibling — required for per-card height drag-resize to work */
    align-items: flex-start;
}
/* Legacy preset classes kept as fallbacks. New cards use an inline
   flex-basis based on WidthColumns (1-12) set by drag-resize. */
.highlight-size-small { flex: 0 0 calc(33.333% - 4px); }
.highlight-size-medium { flex: 0 0 calc(50% - 4px); }
.highlight-size-full { flex: 0 0 100%; }
/* On narrow viewports collapse to full width */
@media (max-width: 900px) {
    .highlight-size-small,
    .highlight-size-medium,
    .highlight-card-resizable {
        flex: 0 0 100% !important;
    }
}

/* ── Window-style resize for highlight cards ─────────────────────────
   Corner grip is the primary affordance (resizes both dimensions).
   Edge strips are secondary (one axis only). All hidden in print mode. */
.highlight-card-resizable {
    position: relative;
}

/* Bottom-right corner grip — diagonal stripes icon, always faintly visible */
.highlight-resize-grip {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 18px;
    height: 18px;
    cursor: nwse-resize;
    color: var(--christman-copper);
    opacity: 0.35;
    transition: opacity 0.15s ease, transform 0.1s ease;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}
.highlight-resize-grip svg { display: block; pointer-events: none; }
.highlight-card-resizable:hover .highlight-resize-grip { opacity: 0.7; }
.highlight-resize-grip:hover {
    opacity: 1 !important;
    transform: scale(1.15);
    background: rgba(159,102,45, 0.12);
}
.mud-theme-dark .highlight-resize-grip { color: var(--christman-gold); }
.mud-theme-dark .highlight-resize-grip:hover { background: rgba(199,137,62, 0.15); }

/* Edge strips for one-axis resize. Hidden until you hover the card,
   then a subtle accent line shows the grabbable area. */
.highlight-resize-edge {
    position: absolute;
    background: transparent;
    transition: background 0.15s ease;
    pointer-events: auto;
}
.highlight-resize-edge-right {
    top: 8px;
    bottom: 22px; /* leave room for the corner grip */
    right: 0;
    width: 6px;
    cursor: ew-resize;
}
.highlight-resize-edge-bottom {
    left: 8px;
    right: 22px; /* leave room for the corner grip */
    bottom: 0;
    height: 6px;
    cursor: ns-resize;
}
.highlight-card-resizable:hover .highlight-resize-edge-right {
    background: linear-gradient(to right, transparent, rgba(159,102,45, 0.25));
}
.highlight-card-resizable:hover .highlight-resize-edge-bottom {
    background: linear-gradient(to bottom, transparent, rgba(159,102,45, 0.25));
}
.highlight-resize-edge-right:hover {
    background: linear-gradient(to right, transparent, var(--christman-copper)) !important;
}
.highlight-resize-edge-bottom:hover {
    background: linear-gradient(to bottom, transparent, var(--christman-copper)) !important;
}
.mud-theme-dark .highlight-card-resizable:hover .highlight-resize-edge-right {
    background: linear-gradient(to right, transparent, rgba(199,137,62, 0.25));
}
.mud-theme-dark .highlight-card-resizable:hover .highlight-resize-edge-bottom {
    background: linear-gradient(to bottom, transparent, rgba(199,137,62, 0.25));
}
.mud-theme-dark .highlight-resize-edge-right:hover {
    background: linear-gradient(to right, transparent, var(--christman-gold)) !important;
}
.mud-theme-dark .highlight-resize-edge-bottom:hover {
    background: linear-gradient(to bottom, transparent, var(--christman-gold)) !important;
}

/* While actively resizing — disable transitions for crisp tracking,
   pop a subtle outline so the user sees what's being resized */
.highlight-card.is-resizing {
    transition: none !important;
    outline: 2px solid var(--christman-copper);
    outline-offset: -1px;
    box-shadow: 0 4px 16px rgba(159,102,45, 0.18);
}
.mud-theme-dark .highlight-card.is-resizing { outline-color: var(--christman-gold); }

/* Print: never show resize affordances on paper */
@media print {
    .highlight-resize-grip,
    .highlight-resize-edge { display: none !important; }
    .highlight-card { min-height: 0 !important; }
}

/* Width label shown in the edit controls ("4/12", "6/12", etc.) */
.highlight-width-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--christman-copper);
    background: rgba(159,102,45, 0.1);
    padding: 2px 6px;
    border-radius: 3px;
    letter-spacing: 0.03em;
    user-select: none;
}
.highlight-width-reset {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 1px 4px;
    line-height: 1;
    color: var(--christman-copper);
    opacity: 0.55;
    border-radius: 3px;
}
.highlight-width-reset:hover { opacity: 1; background: rgba(159,102,45, 0.1); }
.mud-theme-dark .highlight-width-label {
    color: var(--christman-gold);
    background: rgba(199,137,62, 0.15);
}
.mud-theme-dark .highlight-width-reset { color: var(--christman-gold); }

.highlight-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 0;
    position: relative;
    border-radius: 4px;
    border-left: 3px solid var(--christman-copper);
    background: var(--christman-off-white);
    transition: background 0.12s ease;
}
.highlight-card:hover { background: rgba(159,102,45,0.08); }
.highlight-number {
    font-family: 'Oswald', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--christman-copper);
    min-width: 20px;
    text-align: center;
    line-height: 1.2;
    flex-shrink: 0;
}
.highlight-text {
    font-size: 0.88rem;
    font-weight: 450;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
    color: rgba(59, 35, 20, 0.92);
}
.mud-theme-dark .highlight-text { color: rgba(255,248,240,0.92); }
.highlight-comment {
    white-space: pre-line;
    margin-top: 4px;
    line-height: 1.55;
    color: rgba(59, 35, 20, 0.85);
}
.mud-theme-dark .highlight-comment { color: rgba(255,248,240,0.82); }

/* ═══════════════════════════════════════
   Presentation Mode — screenshot-friendly styling
   Hides edit controls and bumps font sizes for cleaner exports
   ═══════════════════════════════════════ */
.ti-presentation-mode .highlight-controls,
.ti-presentation-mode .mud-icon-button[aria-label*="edit"],
.ti-presentation-mode .mud-button[href*="/highlights"],
.ti-presentation-mode .kpi-clickable::after,
.ti-presentation-mode button.mud-icon-button[icon*="Edit"] {
    display: none !important;
}
.ti-presentation-mode .copper-bar .mud-icon-button,
.ti-presentation-mode .section-bar .mud-icon-button {
    display: none !important;
}
.ti-presentation-mode .highlight-text { font-size: 0.95rem !important; line-height: 1.55 !important; }
.ti-presentation-mode .highlight-comment { font-size: 0.88rem !important; line-height: 1.6 !important; }
.ti-presentation-mode .highlight-card { padding: 10px 14px !important; }
.ti-presentation-mode .kpi-value { font-size: 2.4rem !important; }
.ti-presentation-mode .kpi-label { font-size: 0.8rem !important; }
.ti-presentation-mode .kpi-sublabel { font-size: 0.72rem !important; }
.ti-presentation-mode .chart-legend-name { font-size: 0.74rem !important; }
.ti-presentation-mode .copper-bar .mud-typography-subtitle1,
.ti-presentation-mode .section-bar .mud-typography-subtitle1 {
    font-size: 1.05rem !important;
}

/* AI rephrase panel inside HighlightDialog */
.ai-rephrase-panel {
    margin-top: 4px;
    margin-bottom: 8px;
}
.ai-rephrase-result {
    border-left: 3px solid var(--christman-teal);
    background: rgba(0, 116, 129, 0.05);
    padding: 10px 12px;
    border-radius: 4px;
}
.ai-rephrase-suggestion {
    white-space: pre-line;
    font-size: 0.92rem;
    line-height: 1.5;
    margin-top: 4px;
    color: rgba(59, 35, 20, 0.92);
}
.mud-theme-dark .ai-rephrase-result {
    background: rgba(94, 179, 228, 0.08);
    border-left-color: #5EB3E4;
}
.mud-theme-dark .ai-rephrase-suggestion { color: rgba(255, 248, 240, 0.92); }

/* Sub-item count badge — shows next to a project/app name when it has children */
.sub-item-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 6px 1px 4px;
    border-radius: 10px;
    background: rgba(159,102,45, 0.12);
    color: var(--christman-copper);
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}
.sub-item-badge .mud-icon-root { color: var(--christman-copper); }
.mud-theme-dark .sub-item-badge {
    background: rgba(199,137,62, 0.15);
    color: var(--christman-gold);
}
.mud-theme-dark .sub-item-badge .mud-icon-root { color: var(--christman-gold); }

/* Dark mode highlights */
.mud-theme-dark .highlight-card { background: rgba(255,255,255,0.04); border-left-color: var(--christman-gold); }
.mud-theme-dark .highlight-card:hover { background: rgba(255,255,255,0.08); }
.mud-theme-dark .highlight-number { color: var(--christman-gold); }

/* Markdown-rendered content inside highlight cards */
.highlight-markdown p {
    margin: 0 0 0.35em 0;
    line-height: inherit;
}
.highlight-markdown p:last-child { margin-bottom: 0; }
/* NUCLEAR: reset every element inside a markdown list so nothing can
   stealth-inject vertical space. We only allow vertical space via the
   explicit gap between <li> siblings (margin-top: 2px). */
.highlight-markdown ul,
.highlight-markdown ol {
    margin-block: 0.25em !important;
    margin-inline: 0 !important;
    padding-inline-start: 1.25em !important;
    line-height: 1.35 !important;
}
.highlight-markdown ul *,
.highlight-markdown ol * {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.35 !important;
    min-height: 0 !important;
}
.highlight-markdown ul li,
.highlight-markdown ol li {
    display: list-item !important;
}
.highlight-markdown ul li + li,
.highlight-markdown ol li + li {
    margin-top: 2px !important;
}
/* Force any <p>, <div>, <span> inside <li> to be inline so they cannot
   start a new block line */
.highlight-markdown li p,
.highlight-markdown li div {
    display: inline !important;
}
/* <br> tags inside list items — turn them off entirely; Markdig sometimes
   emits them from soft-line-break behavior */
.highlight-markdown li br {
    display: none !important;
}
/* Paragraph immediately before a list shouldn't add extra gap */
.highlight-markdown p + ul,
.highlight-markdown p + ol { margin-top: -0.15em !important; }
/* Tighten the gap between a bold headline paragraph and anything following */
.highlight-markdown p {
    margin-bottom: 0.1em !important;
}
/* And when a list follows the headline paragraph, pull it up further so
   the two blocks read as a single unit */
.highlight-markdown p + div,
.highlight-markdown p + ul,
.highlight-markdown p + ol {
    margin-top: 0 !important;
}

/* Collapse-to-headline — show only the first child of .highlight-markdown */
.highlight-card.is-collapsed .highlight-markdown > *:not(:first-child) {
    display: none !important;
}
.highlight-card.is-collapsed .highlight-markdown > p:first-child {
    margin-bottom: 0 !important;
}
/* Hide the 'Read more' toggle when collapsed — it's irrelevant */

/* The collapse button — small, subtle, top-right of the card */
.highlight-collapse-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    background: transparent;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: var(--christman-copper);
    opacity: 0;
    transition: opacity 0.15s ease;
    line-height: 0;
    border-radius: 3px;
}
.highlight-card:hover .highlight-collapse-btn,
.highlight-card.is-collapsed .highlight-collapse-btn {
    opacity: 0.55;
}
.highlight-collapse-btn:hover { opacity: 1 !important; background: rgba(159,102,45, 0.1); }
.highlight-collapse-btn .mud-icon-root { font-size: 1rem !important; color: inherit !important; }
.mud-theme-dark .highlight-collapse-btn { color: var(--christman-gold); }
.mud-theme-dark .highlight-collapse-btn:hover { background: rgba(199,137,62, 0.15); }

/* When the card is collapsed AND there are edit controls, the controls
   should move left to make room for the collapse button staying in the corner */
.highlight-card.is-collapsed .highlight-controls,
.highlight-collapse-btn ~ .highlight-controls {
    right: 28px;
}

.highlight-markdown strong {
    font-weight: 700;
    color: var(--christman-dark-copper);
}
.mud-theme-dark .highlight-markdown strong { color: var(--christman-gold); }
.highlight-markdown em { font-style: italic; }
.highlight-markdown a {
    color: var(--christman-teal);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.highlight-markdown a:hover { color: var(--christman-dark-copper); }
/* First strong at the start of a card acts as a visual headline */
.highlight-markdown > p:first-child strong:first-child {
    display: inline-block;
    font-size: 1.02em;
}

/* Highlight card controls (edit mode) — drag handle + size toggle */
.highlight-controls {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s;
}
.highlight-card:hover .highlight-controls { opacity: 1; }
.highlight-card[draggable="true"] { cursor: grab; }
.highlight-card[draggable="true"]:active { cursor: grabbing; }
.highlight-size-toggle {
    display: inline-flex;
    border: 1px solid rgba(159,102,45, 0.3);
    border-radius: 3px;
    overflow: hidden;
    background: rgba(255,255,255,0.85);
}
.highlight-size-toggle button {
    border: none;
    background: transparent;
    font-family: 'Oswald', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    padding: 2px 5px;
    cursor: pointer;
    color: var(--christman-dark-copper);
    transition: background 0.1s;
}
.highlight-size-toggle button:hover { background: rgba(159,102,45, 0.12); }
.highlight-size-toggle button.active {
    background: var(--christman-copper);
    color: white;
}
.mud-theme-dark .highlight-size-toggle {
    background: rgba(0,0,0,0.35);
    border-color: rgba(199,137,62, 0.4);
}
.mud-theme-dark .highlight-size-toggle button { color: rgba(255,248,240, 0.75); }
.mud-theme-dark .highlight-size-toggle button.active {
    background: var(--christman-gold);
    color: #1a1210;
}

/* ═══════════════════════════════════════
   Production Apps Status (Dashboard)
   ═══════════════════════════════════════ */
.app-status-group {
    border-radius: 6px;
    padding: 10px 12px;
    background: rgba(159,102,45, 0.04);
    border-left: 4px solid rgba(159,102,45, 0.5);
    height: 100%;
}
.app-status-group-maintenance { border-left-color: var(--christman-teal); background: rgba(0,116,129, 0.05); }
.app-status-group-atrisk { border-left-color: var(--christman-rust); background: rgba(167,82,72, 0.06); }
.app-status-group-sunset { border-left-color: #EEB111; background: rgba(238,177,17, 0.06); }
.app-status-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}
.app-status-chip {
    font-size: 0.62rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.app-status-count {
    font-family: 'Oswald', sans-serif;
    font-size: 1.35rem;
    font-weight: 600;
    opacity: 0.8;
    line-height: 1;
}
.app-status-hint {
    font-size: 0.68rem;
    opacity: 0.55;
    margin-bottom: 8px;
}
.app-status-item {
    padding: 6px 8px;
    margin-top: 4px;
    background: rgba(255,255,255,0.6);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s;
}
.app-status-item:hover { background: rgba(255,255,255,1); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.app-status-item-name {
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.2;
}
.app-status-item-meta {
    font-size: 0.68rem;
    opacity: 0.6;
    margin-top: 2px;
}
.app-status-item-note {
    font-size: 0.72rem;
    opacity: 0.8;
    margin-top: 4px;
    line-height: 1.35;
}

/* Dark mode */
.mud-theme-dark .app-status-group { background: rgba(255,255,255,0.03); }
.mud-theme-dark .app-status-group-maintenance { background: rgba(94,179,228, 0.06); }
.mud-theme-dark .app-status-group-atrisk { background: rgba(228,96,90, 0.07); }
.mud-theme-dark .app-status-group-sunset { background: rgba(238,177,17, 0.06); }
.mud-theme-dark .app-status-item { background: rgba(255,255,255,0.05); }
.mud-theme-dark .app-status-item:hover { background: rgba(255,255,255,0.1); }

/* ── Linked highlight badges (project / app) ── */
.highlight-link-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-weight: 700;
    font-size: 0.78rem;
    padding: 1px 6px;
    border-radius: 4px;
    margin-right: 4px;
}
.highlight-link-project {
    background: rgba(159,102,45,0.12);
    color: var(--christman-copper);
}
.highlight-link-app {
    background: rgba(0,116,129,0.10);
    color: #007481;
}
.highlight-status-inline {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 10px;
    letter-spacing: 0.02em;
    vertical-align: middle;
    margin-right: 2px;
}
.highlight-status-on-track { background: rgba(32,90,65,0.15); color: #205A41; }
.highlight-status-in-production { background: rgba(0,116,129,0.15); color: #007481; }
.highlight-status-at-risk { background: rgba(167,82,72,0.15); color: #A75248; }
.highlight-status-paused { background: rgba(238,177,17,0.15); color: #B88A00; }
.highlight-status-closed { background: rgba(117,117,117,0.15); color: #757575; }
.mud-theme-dark .highlight-link-project { background: rgba(238,177,17,0.15); color: var(--christman-gold); }
.mud-theme-dark .highlight-link-app { background: rgba(0,116,129,0.18); color: #4ecdc4; }
.mud-theme-dark .highlight-status-on-track { background: rgba(32,90,65,0.25); color: #6bcf9f; }
.mud-theme-dark .highlight-status-in-production { background: rgba(0,116,129,0.25); color: #4ecdc4; }
.mud-theme-dark .highlight-status-at-risk { background: rgba(167,82,72,0.25); color: #e8857c; }
.mud-theme-dark .highlight-status-paused { background: rgba(238,177,17,0.25); color: #EEB111; }
.mud-theme-dark .highlight-status-closed { background: rgba(117,117,117,0.25); color: #aaa; }

/* ═══════════════════════════════════════
   Priority Pills (for data grid)
   ═══════════════════════════════════════ */
.priority-pill {
    display: inline-block;
    padding: 1px 10px;
    border-radius: 10px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.priority-pill-high { background: var(--christman-copper); color: white; }
.priority-pill-medium { background: var(--christman-gold); color: white; }
.priority-pill-low { background: var(--christman-teal); color: white; }

/* Badges */
.badge {
    display:inline-flex; align-items:center;
    padding:1px 8px; border-radius:10px;
    font-size:0.65rem; font-weight:600; letter-spacing:0.02em;
}
.badge-outline { border:1px solid rgba(0,0,0,0.12); color:rgba(0,0,0,0.5); }
.badge-score { background:rgba(0,0,0,0.04); color:rgba(0,0,0,0.4); }

/* ═══════════════════════════════════════
   Team Chips
   ═══════════════════════════════════════ */
.team-chip {
    display:inline-flex; align-items:center; gap:6px;
    padding:4px 10px 4px 4px;
    border-radius:20px;
    background: var(--christman-off-white);
    font-size:0.78rem; font-weight:500;
    color: var(--christman-dark-copper);
    transition: box-shadow 0.12s ease;
}
.team-chip:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }

/* Team member cards (dashboard) */
.team-card-full {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.team-card-full:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* ═══════════════════════════════════════
   Status Chip Colors
   ═══════════════════════════════════════ */
.status-chip-on-track { background-color: var(--christman-dark-green) !important; color: white !important; }
.status-chip-in-production { background-color: var(--christman-teal) !important; color: white !important; }
.status-chip-at-risk { background-color: var(--christman-rust) !important; color: white !important; }
.status-chip-paused { background-color: #EEB111 !important; color: #502C1E !important; }
.status-chip-closed { background-color: #757575 !important; color: white !important; }

/* ═══════════════════════════════════════
   Dark Mode Overrides
   ═══════════════════════════════════════ */
.mud-theme-dark .attention-header { background: linear-gradient(90deg, rgba(167,82,72,0.2), rgba(167,82,72,0.05)); }
.mud-theme-dark .kpi-copper { background: linear-gradient(180deg, rgba(159,102,45,0.12) 0%, transparent 100%); }
.mud-theme-dark .kpi-green { background: linear-gradient(180deg, rgba(32,90,65,0.12) 0%, transparent 100%); }
.mud-theme-dark .kpi-rust { background: linear-gradient(180deg, rgba(167,82,72,0.12) 0%, transparent 100%); }
.mud-theme-dark .kpi-teal { background: linear-gradient(180deg, rgba(0,116,129,0.12) 0%, transparent 100%); }
.mud-theme-dark .priority-bg-high { background: linear-gradient(90deg, rgba(159,102,45,0.1), transparent) !important; }
.mud-theme-dark .priority-bg-medium { background: linear-gradient(90deg, rgba(199,137,62,0.1), transparent) !important; }
.mud-theme-dark .priority-bg-low { background: linear-gradient(90deg, rgba(0,116,129,0.1), transparent) !important; }
.mud-theme-dark .badge-outline { border-color:rgba(255,255,255,0.15); color:rgba(255,255,255,0.45); }
.mud-theme-dark .badge-score { background:rgba(255,255,255,0.06); color:rgba(255,255,255,0.35); }
.mud-theme-dark .team-chip { background:rgba(255,255,255,0.08); color:rgba(255,255,255,0.8); }

/* ═══════════════════════════════════════
   Print Styles — 11×17 Landscape
   ═══════════════════════════════════════ */
@page {
    size: 17in 11in;
    margin: 0.4in 0.45in;
    /* Suppress browser-default header (date + title) and footer (URL + page num)
       in browsers that honor CSS paged-media margin boxes. Some browsers
       only respect the user's print-dialog toggle — advise users to uncheck
       "Headers and footers" in the print dialog's "More settings". */
    @top-left { content: ""; }
    @top-center { content: ""; }
    @top-right { content: ""; }
    @bottom-left { content: ""; }
    @bottom-center { content: ""; }
    @bottom-right { content: ""; }
}

/* Utility classes — visible only on screen or only in print */
.no-print { }
.print-only { display: none; }

@media print {
    /* Force backgrounds and colors to print */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    /* Hide navigation chrome (drawer, app bar, footer) */
    .mud-appbar,
    .mud-drawer,
    .mud-drawer-overlay,
    .mud-overlay,
    .mud-snackbar-provider,
    .mud-dialog-container,
    .mud-popover,
    footer,
    .no-print {
        display: none !important;
    }

    /* Show print-only elements */
    .print-only { display: block !important; }

    /* Force light mode for print — dark mode produces unreadable PDFs */
    body,
    html,
    .mud-theme-dark,
    .mud-theme-dark * {
        background: white !important;
        color: #222 !important;
    }
    /* ...but preserve branded color backgrounds on explicit elements */
    .header-banner,
    .copper-bar,
    .section-bar,
    .section-bar-dark-copper,
    .section-bar-teal,
    .section-bar-green,
    .section-bar-ai,
    .kpi-card,
    .chart-dot,
    .app-status-chip,
    .mud-chip,
    .priority-pill,
    .chart-legend-num,
    .highlight-link-badge,
    .highlight-status-inline {
        /* keep original inline / class backgrounds + white text */
    }
    .header-banner *,
    .copper-bar *,
    .section-bar *,
    .section-bar-dark-copper *,
    .section-bar-teal *,
    .section-bar-green *,
    .section-bar-ai * {
        color: white !important;
    }

    /* Remove layout offset from drawer */
    .mud-main-content {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }
    .mud-layout { display: block !important; }
    .mud-drawer-open-responsive-lg-left + .mud-main-content,
    .mud-drawer-open-mini-left + .mud-main-content {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    /* Container fills the page */
    .mud-container {
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Remove shadows and transitions */
    .mud-paper {
        box-shadow: none !important;
        transition: none !important;
        border: 1px solid #ddd !important;
    }

    /* Header banner — compact */
    .header-banner {
        padding: 8px 14px !important;
        border-radius: 3px !important;
        margin-bottom: 6px !important;
        page-break-after: avoid;
        page-break-inside: avoid;
    }
    .header-banner .mud-typography-h4 {
        font-size: 1.1rem !important;
    }
    .header-banner .mud-typography-body2 {
        font-size: 0.68rem !important;
        margin-top: 3px !important;
    }

    /* KPI row — keep together, compact */
    .mud-grid:has(.kpi-card) { page-break-inside: avoid; }
    .kpi-card {
        padding: 6px 4px 4px !important;
        border-radius: 3px !important;
        min-height: 0 !important;
    }
    .kpi-card:hover { transform: none !important; box-shadow: none !important; }
    .kpi-clickable::after { display: none !important; }
    .kpi-alert .kpi-value { animation: none !important; }
    .kpi-value { font-size: 1.7rem !important; line-height: 1 !important; }
    .kpi-label { font-size: 0.62rem !important; }
    .kpi-sublabel { font-size: 0.55rem !important; }

    /* Section bars — compact */
    .copper-bar, .section-bar {
        padding: 3px 10px !important;
        border-radius: 3px 3px 0 0 !important;
    }
    .copper-bar .mud-typography-subtitle1,
    .section-bar .mud-typography-subtitle1 {
        font-size: 0.76rem !important;
    }

    /* Highlight cards */
    .highlight-card {
        padding: 3px 6px !important;
        margin-bottom: 2px !important;
        page-break-inside: avoid;
    }
    .highlight-number { font-size: 0.8rem !important; }
    .highlight-text { font-size: 0.66rem !important; line-height: 1.28 !important; }
    .highlight-comment { font-size: 0.64rem !important; line-height: 1.3 !important; }

    /* Impact/Effort Matrix — keep together */
    .chart-dot-tooltip { display: none !important; }
    .chart-dot { cursor: default !important; }
    .chart-dot:hover { transform: translate(-50%, -50%) !important; }
    .chart-footer { font-size: 0.55rem !important; }
    .chart-legend-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 1px 6px !important; }
    .chart-legend-name { font-size: 0.62rem !important; }
    .chart-legend-num { width: 14px !important; height: 14px !important; font-size: 0.5rem !important; }

    /* ── Production Apps Status section (print) ── */
    .app-status-group {
        padding: 6px 8px !important;
        page-break-inside: avoid;
    }
    .app-status-count { font-size: 1.1rem !important; }
    .app-status-hint { font-size: 0.62rem !important; }
    .app-status-chip { font-size: 0.55rem !important; padding: 1px 6px !important; }
    .app-status-item {
        padding: 3px 6px !important;
        margin-top: 3px !important;
        background: rgba(0,0,0,0.02) !important;
        box-shadow: none !important;
    }
    .app-status-item-name { font-size: 0.74rem !important; }
    .app-status-item-meta { font-size: 0.6rem !important; }
    .app-status-item-note { font-size: 0.62rem !important; line-height: 1.28 !important; }

    /* Data grids — compact print */
    .mud-table-root { font-size: 0.68rem !important; }
    .mud-table-cell { padding: 2px 6px !important; }
    .mud-table-head .mud-table-cell { padding: 3px 6px !important; font-size: 0.62rem !important; }
    .mud-table-row:hover { background: transparent !important; }
    .mud-table-sort-label .mud-icon-root { display: none !important; }
    /* Tabs — show all panels, hide tab header (prints both Projects + Apps) */
    .mud-tabs-header { display: none !important; }
    .mud-tabs-panels > * { display: block !important; }
    .mud-tab-panel { display: block !important; padding: 0 !important; }
    div[style*="display: none"].mud-tabpanel,
    div[style*="display:none"].mud-tabpanel {
        display: block !important;
    }

    /* AI Strategy section */
    .section-bar-ai { padding: 3px 10px !important; }

    /* Team cards — smaller, keep section intact */
    .team-card-full {
        padding: 4px 8px !important;
        gap: 6px !important;
        page-break-inside: avoid;
    }
    .team-card-full:hover { transform: none !important; box-shadow: none !important; }
    .team-card-full .mud-avatar { width: 30px !important; height: 30px !important; }

    /* MudGrid spacing — tighter */
    .mud-grid { margin: -3px !important; }
    .mud-grid > .mud-grid-item { padding: 3px !important; }

    /* General spacing overrides */
    .mb-3, .mb-4 { margin-bottom: 5px !important; }
    .pa-3, .pa-4 { padding: 5px !important; }
    .py-8 { padding-top: 0 !important; padding-bottom: 0 !important; }
    .mt-8, .mt-12 { margin-top: 0 !important; }

    /* Status chips — print-friendly */
    .mud-chip { border-radius: 8px !important; font-weight: 600 !important; }

    /* Keep MudPapers together when possible, but allow breaking between sections */
    .mud-paper { page-break-inside: avoid; }

    /* Priority pills keep color */
    .priority-pill { font-size: 0.6rem !important; }

    /* Progress bars */
    .mud-progress-linear { height: 4px !important; }

    /* MudBlazor body padding removal */
    body {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Don't force page breaks — let the content flow naturally
       and only break where necessary. Add hints to avoid orphaned
       headers by keeping the next 2-3 elements together. */
    .copper-bar, .section-bar { page-break-after: avoid; }

    /* Hide dialog / modal artifacts that shouldn't print */
    .mud-popover-provider,
    .mud-snackbar,
    .mud-tooltip { display: none !important; }

    /* Reset any opacity on icons that might be too faint for print */
    .mud-icon-root { opacity: 1 !important; }
}