/* =========================================================================
   OC EOS Meetings, Headlines, To-Dos, Issues
   ----------------------------------------------------------------------
   All design tokens come from oc-theme.css. Do not hard-code colors,
   spacing, radius, or shadow values here.
   ========================================================================= */


/* =========================================================================
   1. Shared toolbars (Meetings landing, Headlines, To-Dos)
   ========================================================================= */

.oc-meetings-toolbar,
.oc-headlines-toolbar,
.oc-todos-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--oc-space-4);
    margin: var(--oc-space-5) 0 var(--oc-space-4);
    flex-wrap: wrap;
}

.oc-meetings-field,
.oc-headlines-field,
.oc-todos-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 220px;
}

.oc-meetings-field-label,
.oc-headlines-field-label,
.oc-todos-field-label {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    font-size: var(--oc-fs-xs);
    color: var(--oc-gray-600);
}

.oc-meetings-select,
.oc-headlines-select,
.oc-todos-select {
    appearance: none;
    border: 1px solid var(--oc-gray-300);
    border-radius: var(--oc-radius-sm);
    background: var(--oc-surface);
    padding: 0.45rem 0.75rem;
    font-size: var(--oc-fs-body);
    color: var(--oc-gray-900);
    min-width: 220px;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%236b7280' d='M3.204 5h9.592L8 10.481z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.65rem center;
    padding-right: 1.75rem;
}

.oc-meetings-select:focus,
.oc-headlines-select:focus,
.oc-todos-select:focus {
    outline: none;
    border-color: var(--oc-orange-600);
    box-shadow: var(--oc-shadow-focus);
}

.oc-headlines-check,
.oc-todos-check {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--oc-fs-sm);
    color: var(--oc-gray-700);
    cursor: pointer;
    user-select: none;
    padding: 0.5rem 0;
}


/* Tabs (segmented control) */
.oc-meetings-tabs {
    display: inline-flex;
    gap: 0;
    background: var(--oc-gray-100);
    border-radius: var(--oc-radius-md);
    padding: 3px;
}

.oc-meetings-tab {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--oc-gray-700);
    font-weight: 600;
    font-size: var(--oc-fs-sm);
    padding: 0.5rem 1rem;
    border-radius: var(--oc-radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: background var(--oc-dur-fast) var(--oc-ease), color var(--oc-dur-fast) var(--oc-ease);
}

.oc-meetings-tab:hover {
    color: var(--oc-gray-900);
}

.oc-meetings-tab.is-active {
    background: var(--oc-surface);
    color: var(--oc-gray-900);
    box-shadow: var(--oc-shadow-xs);
}

.oc-meetings-tab i {
    font-size: 0.95em;
    color: var(--oc-gray-500);
}

.oc-meetings-tab.is-active i {
    color: var(--oc-orange);
}


/* =========================================================================
   2. Meeting hero (live / idle)
   ========================================================================= */

.oc-meeting-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--oc-space-5);
    padding: var(--oc-space-6) var(--oc-space-7);
    border-radius: var(--oc-radius-lg);
    margin: var(--oc-space-3) 0 var(--oc-space-6);
    background: var(--oc-surface);
    border: 1px solid var(--oc-gray-200);
    box-shadow: var(--oc-shadow-sm);
}

.oc-meeting-hero--live {
    background: linear-gradient(135deg, var(--oc-orange-50) 0%, var(--oc-surface) 65%);
    border-color: var(--oc-orange-100);
}

.oc-meeting-hero--idle {
    background: linear-gradient(135deg, var(--oc-gray-50) 0%, var(--oc-surface) 65%);
}

.oc-meeting-hero__body {
    flex: 1 1 auto;
    min-width: 0;
}

.oc-meeting-hero__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--oc-fs-xs);
    font-weight: 700;
    color: var(--oc-gray-600);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: var(--oc-space-2);
}

.oc-meeting-hero--live .oc-meeting-hero__eyebrow {
    color: var(--oc-orange-700);
}

.oc-meeting-hero__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--oc-orange);
    box-shadow: 0 0 0 0 var(--oc-orange);
    animation: oc-meeting-pulse 1.8s infinite;
}

.oc-meeting-hero__title {
    font-size: var(--oc-fs-h1);
    line-height: var(--oc-lh-tight);
    font-weight: 700;
    margin: 0 0 var(--oc-space-3);
    color: var(--oc-gray-900);
}

.oc-meeting-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--oc-space-4);
    color: var(--oc-gray-600);
    font-size: var(--oc-fs-sm);
}

.oc-meeting-hero__meta i {
    margin-right: 0.35rem;
    color: var(--oc-gray-500);
}

.oc-meeting-hero__actions {
    flex: 0 0 auto;
}


/* =========================================================================
   3. Tables (Upcoming / Past meetings)
   ========================================================================= */

.oc-meeting-table {
    background: var(--oc-surface);
    border: 1px solid var(--oc-gray-200);
    border-radius: var(--oc-radius-md);
    box-shadow: var(--oc-shadow-xs);
    overflow: hidden;
}

.oc-meeting-table .table {
    margin-bottom: 0;
}

.oc-meeting-table thead th {
    background: var(--oc-gray-50);
    color: var(--oc-gray-600);
    font-size: var(--oc-fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--oc-gray-200);
    padding: 0.75rem 1rem;
}

.oc-meeting-table tbody td {
    padding: 0.85rem 1rem;
    border-top: 1px solid var(--oc-gray-100);
    color: var(--oc-gray-800);
    font-size: var(--oc-fs-body);
    vertical-align: middle;
}

.oc-meeting-table tbody tr:first-child td {
    border-top: 0;
}

.oc-meeting-row {
    cursor: pointer;
    transition: background var(--oc-dur-fast) var(--oc-ease);
}

.oc-meeting-row:hover {
    background: var(--oc-orange-50);
}


/* =========================================================================
   4. Agenda grid + cards
   ========================================================================= */

.oc-agenda-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--oc-space-5);
    margin-top: var(--oc-space-3);
}

.oc-agenda-card {
    display: flex;
    flex-direction: column;
    gap: var(--oc-space-4);
    padding: var(--oc-space-6);
    background: var(--oc-surface);
    border: 1px solid var(--oc-gray-200);
    border-radius: var(--oc-radius-lg);
    box-shadow: var(--oc-shadow-xs);
    transition: transform var(--oc-dur-fast) var(--oc-ease), box-shadow var(--oc-dur-fast) var(--oc-ease), border-color var(--oc-dur-fast) var(--oc-ease);
}

.oc-agenda-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--oc-shadow-md);
    border-color: var(--oc-gray-300);
}

.oc-agenda-card.is-disabled {
    opacity: 0.65;
    background: var(--oc-gray-50);
}

.oc-agenda-card.is-disabled:hover {
    transform: none;
    box-shadow: var(--oc-shadow-xs);
    border-color: var(--oc-gray-200);
}

.oc-agenda-card__icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--oc-radius-md);
    background: var(--oc-orange-50);
    color: var(--oc-orange-700);
    font-size: 1.35rem;
}

.oc-agenda-card.is-disabled .oc-agenda-card__icon {
    background: var(--oc-gray-100);
    color: var(--oc-gray-500);
}

.oc-agenda-card__body h3 {
    font-size: var(--oc-fs-h3);
    font-weight: 700;
    color: var(--oc-gray-900);
    margin: 0 0 4px;
}

.oc-agenda-card__body p {
    color: var(--oc-gray-600);
    font-size: var(--oc-fs-sm);
    line-height: var(--oc-lh-snug);
    margin: 0 0 var(--oc-space-4);
}

.oc-agenda-card__sections {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.oc-agenda-card__section {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--oc-gray-100);
    border-radius: var(--oc-radius-pill);
    font-size: var(--oc-fs-xs);
    color: var(--oc-gray-700);
}

.oc-agenda-card__section small {
    color: var(--oc-gray-500);
    font-size: var(--oc-fs-xs);
}

.oc-agenda-card__actions {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}


/* =========================================================================
   5. Start meeting modal
   ========================================================================= */

.oc-start-meeting__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--oc-space-2);
    max-height: 60vh;
    overflow: auto;
}

.oc-start-meeting__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--oc-space-3);
    padding: 0.75rem 1rem;
    border: 1px solid var(--oc-gray-200);
    border-radius: var(--oc-radius-md);
    background: var(--oc-surface);
    cursor: pointer;
    transition: border-color var(--oc-dur-fast) var(--oc-ease), background var(--oc-dur-fast) var(--oc-ease);
}

.oc-start-meeting__item:hover {
    border-color: var(--oc-orange-600);
    background: var(--oc-orange-50);
}

.oc-start-meeting__item.is-selected {
    border-color: var(--oc-orange-600);
    background: var(--oc-orange-50);
    box-shadow: var(--oc-shadow-focus);
}

.oc-start-meeting__item.is-disabled {
    /* 0.55 dimmed the text below readable on the modal bg; 0.85 still looks
       "off / coming soon" but every label reads. Also explicitly mute the text
       so dark-mode renders the row as a clear "inactive" state. */
    opacity: 0.85;
    cursor: not-allowed;
    background: var(--oc-gray-50);
    color: var(--oc-text-muted);
}
.oc-start-meeting__item.is-disabled strong,
.oc-start-meeting__item.is-disabled .text-muted {
    color: var(--oc-text-muted);
}

.oc-start-meeting__item.is-disabled:hover {
    border-color: var(--oc-gray-200);
    background: var(--oc-gray-50);
}

.oc-start-meeting__item-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.oc-start-meeting__item-main strong {
    color: var(--oc-gray-900);
    font-size: var(--oc-fs-body);
}

.oc-start-meeting__item-main span {
    font-size: var(--oc-fs-xs);
}


/* =========================================================================
   6. Meeting Run page (live runner)
   ========================================================================= */

.oc-meeting-run {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: var(--oc-space-5);
    align-items: stretch;
    min-height: 0;
}

/* Desktop: the live meeting runner bounds each of its three columns to the
   viewport itself (see MeetingRun.razor.css), so it doesn't need the page's
   tall default bottom padding. Trim it so the columns can sit lower without a
   page scroll. No fixed height / overflow here — the columns own their sizing,
   so the bottom buttons can never get clipped by this wrapper. */
@media (min-width: 993px) {
    .oc-content-inner:has(.oc-meeting-run:not(.is-present)) {
        padding-bottom: var(--oc-space-4);
    }
}

@media (max-width: 992px) {
    .oc-meeting-run {
        grid-template-columns: 1fr;
    }
}

.oc-meeting-run__rail {
    background: var(--oc-surface);
    border: 1px solid var(--oc-gray-200);
    border-radius: var(--oc-radius-lg);
    box-shadow: var(--oc-shadow-sm);
    padding: var(--oc-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--oc-space-4);
    height: fit-content;
    position: sticky;
    top: calc(var(--oc-shell-topbar-h) + 0.75rem);
}

.oc-meeting-run__header {
    border-bottom: 1px solid var(--oc-gray-100);
    padding-bottom: var(--oc-space-4);
}

.oc-meeting-run__back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--oc-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--oc-gray-500);
    text-decoration: none;
    margin-bottom: var(--oc-space-2);
}

.oc-meeting-run__back:hover {
    color: var(--oc-orange-700);
}

/* Read-only "this meeting has ended" view, shown when a finished meeting's
   URL is opened (refresh / past-meeting link) instead of the live runner. */
.oc-meeting-run__ended {
    max-width: 860px;
    margin: 0 auto;
    padding: var(--oc-space-5) var(--oc-space-4);
}

.oc-meeting-run__paused-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 0.5rem;
    padding: 2px 8px;
    border-radius: var(--oc-radius-pill);
    background: var(--oc-orange-50);
    color: var(--oc-orange-700);
    font-size: var(--oc-fs-xs);
    font-weight: 700;
}

.oc-meeting-run__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--oc-fs-xs);
    font-weight: 700;
    color: var(--oc-orange-700);
    margin-bottom: 4px;
}

.oc-meeting-run__title {
    font-size: var(--oc-fs-h2);
    font-weight: 700;
    color: var(--oc-gray-900);
    margin: 0 0 var(--oc-space-2);
    line-height: var(--oc-lh-tight);
}

.oc-meeting-run__meta {
    color: var(--oc-gray-600);
    font-size: var(--oc-fs-sm);
}

.oc-meeting-run__meta i {
    color: var(--oc-gray-500);
    margin-right: 4px;
}

.oc-meeting-run__timers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--oc-space-2);
}

.oc-meeting-run__timer {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--oc-space-3);
    background: var(--oc-gray-50);
    border-radius: var(--oc-radius-md);
    border: 1px solid var(--oc-gray-100);
}

.oc-meeting-run__timer-label {
    font-size: var(--oc-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--oc-gray-600);
    font-weight: 600;
}

.oc-meeting-run__timer-value {
    font-family: var(--oc-font-mono);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--oc-gray-900);
    font-variant-numeric: tabular-nums;
}

.oc-meeting-run__timer-value.is-over {
    color: var(--oc-danger);
}

/* Tiny pause/resume toggle inside the Section timer tile. */
.oc-meeting-run__timer-pause {
    all: unset;
    cursor: pointer;
    align-self: flex-start;
    margin-top: 2px;
    padding: 2px 6px;
    border-radius: var(--oc-radius-sm);
    color: var(--oc-gray-600);
    line-height: 1;
}

.oc-meeting-run__timer-pause:hover {
    background: var(--oc-orange-50);
    color: var(--oc-orange-700);
}

.oc-meeting-run__timer-pause:focus-visible {
    box-shadow: var(--oc-shadow-focus);
}

.oc-meeting-run__controls {
    display: flex;
    /* Three controls (Pause / Next / Waiting room) at flex-basis 50% each overflowed the
       320px rail with no wrap — the Waiting room button ran off the panel (2026-07-01).
       Wrap instead: two per row, the third drops to its own full-width row. */
    flex-wrap: wrap;
    gap: 0.5rem;
}

.oc-meeting-run__controls > * {
    flex: 1 1 calc(50% - 0.5rem);
    min-width: 0;
}


/* Section list (numbered, current/done states) */
.oc-meeting-run__sections {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.oc-meeting-run__section {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: var(--oc-space-3);
    padding: 0.55rem 0.65rem;
    border-radius: var(--oc-radius-sm);
    cursor: pointer;
    color: var(--oc-gray-700);
    transition: background var(--oc-dur-fast) var(--oc-ease), color var(--oc-dur-fast) var(--oc-ease);
}

.oc-meeting-run__section:hover {
    background: var(--oc-gray-50);
}

.oc-meeting-run__section.is-done {
    color: var(--oc-gray-500);
}

.oc-meeting-run__section.is-current {
    background: var(--oc-orange-50);
    color: var(--oc-orange-700);
    font-weight: 600;
}

.oc-meeting-run__section.is-current:hover {
    background: var(--oc-orange-100);
}

.oc-meeting-run__section-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--oc-gray-100);
    color: var(--oc-gray-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--oc-fs-xs);
    font-weight: 700;
}

.oc-meeting-run__section.is-done .oc-meeting-run__section-num {
    background: var(--oc-gray-300);
    color: #fff;
}

.oc-meeting-run__section.is-current .oc-meeting-run__section-num {
    background: var(--oc-orange);
    color: #fff;
    box-shadow: 0 0 0 3px var(--oc-orange-100);
}

.oc-meeting-run__section-name {
    font-size: var(--oc-fs-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.oc-meeting-run__section-mins {
    font-family: var(--oc-font-mono);
    font-size: var(--oc-fs-xs);
    color: var(--oc-gray-500);
    font-variant-numeric: tabular-nums;
}


/* Attendees panel */
.oc-meeting-run__attendees {
    border-top: 1px solid var(--oc-gray-100);
    padding-top: var(--oc-space-4);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.oc-meeting-run__attendees h4 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--oc-space-2);
    font-size: var(--oc-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--oc-gray-600);
    font-weight: 700;
    margin: 0 0 var(--oc-space-2);
}

/* Live "N here" badge — how many people are connected to the meeting now. */
.oc-meeting-run__attendee-count {
    flex: 0 0 auto;
    padding: 1px 8px;
    border-radius: var(--oc-radius-pill);
    background: var(--oc-gray-100);
    color: var(--oc-gray-600);
    font-size: var(--oc-fs-xs);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
}

.oc-meeting-run__attendee {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: var(--oc-fs-sm);
    color: var(--oc-gray-800);
    padding: 2px 0;
    transition: color var(--oc-dur-fast) var(--oc-ease);
}

/* People not currently connected read dimmer than those live in the meeting. */
.oc-meeting-run__attendee.is-away {
    color: var(--oc-gray-500);
}
.oc-meeting-run__attendee.is-online {
    color: var(--oc-gray-900);
    font-weight: 600;
}

.oc-meeting-run__attendee-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--oc-gray-300);
    flex: 0 0 auto;
}

.oc-meeting-run__attendee-dot.is-on {
    background: #2ea44f;
    box-shadow: 0 0 0 2px rgba(46, 164, 79, 0.18);
}

.oc-meeting-run__finish {
    margin-top: auto;
    padding-top: var(--oc-space-3);
    border-top: 1px solid var(--oc-gray-100);
}


/* Main pane */
.oc-meeting-run__main {
    position: relative;          /* anchors the screen-share takeover overlay */
    background: var(--oc-surface);
    border: 1px solid var(--oc-gray-200);
    border-radius: var(--oc-radius-lg);
    box-shadow: var(--oc-shadow-sm);
    padding: var(--oc-space-6) var(--oc-space-7);
    display: flex;
    flex-direction: column;
    gap: var(--oc-space-5);
    min-width: 0;
}

/* Screen-share body takeover: the shared screen fills the meeting body, large, for
   everyone (and is what the recorder captures big). Dismissable via the close button. */
.oc-share-takeover {
    position: absolute;
    inset: 0;
    z-index: 30;
    border-radius: var(--oc-radius-lg);
    background: #000;                 /* letterbox around the shared screen */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.oc-share-takeover__video {
    width: 100%;
    height: 100%;
    object-fit: contain;              /* show the whole screen, no crop */
    background: #000;
    display: block;
}
.oc-share-takeover__close {
    position: absolute;
    top: var(--oc-space-3, 12px);
    right: var(--oc-space-3, 12px);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 1.05rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease;
}
.oc-share-takeover__close:hover { background: rgba(0, 0, 0, .8); }

/* Pop-out: opens the share in its own window (multi-monitor). Same chip style as the
   close button, sitting just to its left. Overlay-on-video controls stay literal
   black/white in BOTH themes (they sit on the video, not on themed surfaces). */
.oc-share-takeover__popout {
    position: absolute;
    top: var(--oc-space-3, 12px);
    right: calc(var(--oc-space-3, 12px) + 48px);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease;
}
.oc-share-takeover__popout:hover { background: rgba(0, 0, 0, .8); }

/* Admin/manager (tier 80+) force-stop — red text pill left of the pop-out button.
   Overlay-on-video control: literal colors on purpose (sits on the video, both themes). */
.oc-share-takeover__forcestop {
    position: absolute;
    top: var(--oc-space-3, 12px);
    right: calc(var(--oc-space-3, 12px) + 96px);
    height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(220, 38, 38, .7);
    background: rgba(0, 0, 0, .55);
    color: #f87171;                 /* red — reads as danger on the dark video */
    font-size: .8rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: background .15s ease;
}
.oc-share-takeover__forcestop:hover { background: rgba(127, 29, 29, .75); color: #fff; }

.oc-meeting-run__section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--oc-space-4);
    border-bottom: 1px solid var(--oc-gray-100);
    padding-bottom: var(--oc-space-4);
}

.oc-meeting-run__section-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--oc-fs-xs);
    font-weight: 700;
    color: var(--oc-gray-500);
}

.oc-meeting-run__head-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
}

.oc-meeting-run__section-head h2 {
    font-size: var(--oc-fs-h1);
    font-weight: 700;
    color: var(--oc-gray-900);
    margin: 4px 0 0;
    line-height: var(--oc-lh-tight);
}

.oc-meeting-run__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--oc-space-3);
    border-top: 1px solid var(--oc-gray-100);
    padding-top: var(--oc-space-4);
    margin-top: auto;
}

.oc-meeting-run__foot:has(> :only-child) {
    justify-content: flex-end;
}


/* =========================================================================
   6b. Present mode (projector view)

   MeetingRun.razor toggles two hooks together:
     - body.eos-present        (via window.ocPresentMode in script/helper.js)
       hides the app-shell chrome, which lives outside the page subtree.
     - .oc-meeting-run.is-present
       collapses the left rail into a slim hover-to-expand overlay strip.
   Esc exits (handled in MeetingRun.razor's OnRootKeyDown).
   ========================================================================= */

/* Hide the portal chrome; let the content area claim the whole viewport.
   OcAppShell's grid columns are overridden so the empty sidebar track does
   not leave a dead gutter on the left. */
body.eos-present .oc-topbar,
body.eos-present .oc-sidebar,
body.eos-present .oc-right-rail,
body.eos-present .oc-bottombar,
body.eos-present .oc-shell-backdrop {
    display: none !important;
}

body.eos-present .oc-shell {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
        "topbar"
        "content" !important;
}

body.eos-present .oc-content-inner {
    max-width: none;
    padding: var(--oc-space-4);
}

/* ---------------------------------------------------------------------------
   In-meeting chrome (whole live meeting, not just present mode).
   body.eos-in-meeting is toggled by window.ocInMeeting from MeetingRun for the
   entire time the live runner is up. Hide the portal top header + left sidebar so
   attendees stay focused and don't accidentally navigate out of the call; both come
   back the instant the class clears (leaving the runner / meeting finished). The
   meeting's OWN rail + camera + content stay fully visible — only the portal shell
   chrome is hidden. "Open Portal in new tab" (in the meeting rail) covers reaching
   the portal without leaving. Present mode (below) layers on top of this to also
   collapse the meeting's own rail for projector use.
   --------------------------------------------------------------------------- */
body.eos-in-meeting .oc-topbar,
body.eos-in-meeting .oc-sidebar,
body.eos-in-meeting .oc-shell-backdrop {
    display: none !important;
}

body.eos-in-meeting .oc-shell {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
        "topbar"
        "content" !important;
}

/* ===========================================================================
   GREEN ROOM (meeting pre-entry / waiting room).
   While body.eos-greenroom is set (toggled by window.ocGreenRoom from MeetingVideo),
   hide every portal AND meeting chrome element so the full-screen green-room overlay
   (rendered position:fixed by MeetingVideo) is the only thing the user can touch — they
   cannot navigate into the meeting until they Join or Exit. The video column that hosts
   the green-room overlay is forced visible so it shows regardless of the phone Nav/Body/
   Cameras view. =========================================================================== */
body.eos-greenroom .oc-topbar,
body.eos-greenroom .oc-sidebar,
body.eos-greenroom .oc-right-rail,
body.eos-greenroom .oc-bottombar,
body.eos-greenroom .oc-shell-backdrop,
body.eos-greenroom .oc-meeting-run__rail,
body.eos-greenroom .oc-meeting-run__main,
body.eos-greenroom .oc-meeting-run__mnav,
body.eos-greenroom .oc-body-speaker {
    display: none !important;
}
/* the overlay lives inside the video column — keep it rendered (not display:none) in every
   phone view so position:fixed has a painting context. */
body.eos-greenroom .oc-meeting-run__video {
    display: block !important;
}

/* Inline-SVG meeting icons (MeetingIcon.razor): align like the old <i class="bi">. */
.oc-mi { display: inline-block; vertical-align: -0.125em; flex: 0 0 auto; }

/* ---- Waiting room (host): top-of-rail button, phone-nav badge, roster panel ---- */
.oc-meeting-run__waiting-btn {
    display: flex; align-items: center; gap: 8px; width: 100%;
    /* No own margin — the rail's flex gap provides the spacing; an extra bottom
       margin here doubled the gap around this button (CEO 2026-07-06). */
    margin: 0;
    padding: 9px 12px; border-radius: var(--oc-radius-md, 10px);
    border: 1px solid var(--oc-gray-200); background: var(--oc-surface, #fff);
    color: var(--oc-gray-800); font-weight: 600; font-size: var(--oc-fs-sm, .875rem); cursor: pointer;
}
.oc-meeting-run__waiting-btn:hover { background: var(--oc-gray-50); }

/* "Open Portal in new tab" — sits under the Waiting room button in the rail. Lets
   attendees reach the portal without leaving the call (the portal top nav is hidden
   for the whole meeting). Quieter than the waiting button so it doesn't compete. */
.oc-meeting-run__newtab {
    display: flex; align-items: center; gap: 8px; width: 100%;
    margin: 0; /* rail flex gap spaces it — see waiting-btn note */
    padding: 9px 12px; border-radius: var(--oc-radius-md, 10px);
    border: 1px solid var(--oc-gray-200); background: var(--oc-surface, #fff);
    color: var(--oc-text-muted, #6b7280); font-weight: 600; font-size: var(--oc-fs-sm, .875rem);
    text-decoration: none; cursor: pointer;
}
.oc-meeting-run__newtab:hover { background: var(--oc-gray-50); color: var(--oc-gray-800); }
.oc-meeting-run__newtab i { font-size: 1rem; flex: 0 0 auto; }

/* ---- Live reactions: rail button row + the floating emoji layer ---- */
.oc-meeting-run__reactions {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin: 0; /* rail flex gap spaces it — see waiting-btn note */
}
.oc-reaction-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 10px; border-radius: var(--oc-radius-md, 10px);
    border: 1px solid var(--oc-gray-200); background: var(--oc-surface, #fff);
    cursor: pointer; line-height: 1; font-size: 1.15rem;
    transition: transform var(--oc-dur-fast, 120ms) var(--oc-ease, ease), background var(--oc-dur-fast, 120ms) var(--oc-ease, ease);
}
.oc-reaction-btn:hover { background: var(--oc-gray-50); transform: translateY(-1px) scale(1.05); }
.oc-reaction-btn:active { transform: scale(.94); }
.oc-reaction-btn:disabled { opacity: .55; cursor: default; }
.oc-reaction-btn .oc-reaction-lbl { font-size: var(--oc-fs-sm, .875rem); font-weight: 700; color: var(--oc-gray-800); }
/* Tangent gets the flag + a warm, attention-grabbing treatment (it's the loud one). */
.oc-reaction-btn.is-tangent {
    flex: 1 1 auto; justify-content: center;
    border-color: var(--oc-amber-300, #fcd34d); background: var(--oc-amber-50, #fffbeb);
}
.oc-reaction-btn.is-tangent:hover { background: var(--oc-amber-100, #fef3c7); }
.oc-reaction-btn.is-tangent .oc-reaction-lbl { color: var(--oc-amber-700, #b45309); }

/* Fixed, click-through layer the floating reactions animate in. Below modals (10500+) but
   above the meeting content so a burst of 🎉 drifts over the whole call. */
.oc-reactions-layer {
    position: fixed; inset: 0; overflow: hidden;
    pointer-events: none; z-index: 1400;
}
.oc-reaction-float {
    position: absolute; bottom: 4%;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    /* Solid the whole ride: a quick pop-in, then it rises at full opacity and exits OFF the
       top of the screen (-110vh clears any viewport) — no mid-air fade (CEO 2026-07-05). */
    animation: oc-reaction-rise 3.4s cubic-bezier(.25, .6, .5, 1) forwards;
    will-change: transform;
}
.oc-reaction-float-emoji {
    display: inline-block;
    font-size: 3.6rem; line-height: 1;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .3));
}
/* USA reaction is an inline flag graphic (emoji flags don't render on Windows); size it to the
   surrounding emoji font-size so it sits at the same scale in the rail button AND the big float. */
.oc-reaction-flag { display: inline-flex; align-items: center; }
.oc-reaction-flag svg { height: .82em; width: auto; display: block; border-radius: 2px; }
.oc-reaction-float-name {
    font-size: .8rem; font-weight: 700; color: #fff;
    background: rgba(17, 20, 24, .78); border-radius: 999px; padding: 2px 10px;
    white-space: nowrap; max-width: 40vw; overflow: hidden; text-overflow: ellipsis;
}
@keyframes oc-reaction-rise {
    0%   { transform: translateY(24px) scale(.4); opacity: 0; }
    8%   { transform: translateY(0) scale(1.12);  opacity: 1; }
    14%  { transform: translateY(-3vh) scale(1); }
    100% { transform: translateY(-110vh) scale(1); opacity: 1; }
}

/* Physical motion per reaction, layered on the INNER emoji (the wrapper owns the rise so the
   two transforms never fight): clapping hands smack, the thumb pumps, the party popper shakes,
   the raised hand waves. Runs the whole way up. */
.oc-r-anim-clap {
    transform-origin: 50% 80%;
    animation: oc-r-clap .32s ease-in-out infinite;
}
@keyframes oc-r-clap {
    0%, 100% { transform: scaleX(1) rotate(-6deg); }
    50%      { transform: scaleX(.72) rotate(8deg); }
}
.oc-r-anim-thumbsup {
    animation: oc-r-thumb .5s ease-in-out infinite;
}
@keyframes oc-r-thumb {
    0%, 100% { transform: translateY(0) rotate(-8deg); }
    50%      { transform: translateY(-10px) rotate(6deg); }
}
.oc-r-anim-celebrate {
    transform-origin: 50% 85%;
    animation: oc-r-party .42s ease-in-out infinite;
}
@keyframes oc-r-party {
    0%, 100% { transform: rotate(-16deg) scale(1); }
    50%      { transform: rotate(14deg) scale(1.12); }
}
.oc-r-anim-handup {
    transform-origin: 70% 90%;   /* pivot near the wrist — a wave, not a spin */
    animation: oc-r-wave .7s ease-in-out infinite;
}
@keyframes oc-r-wave {
    0%, 100% { transform: rotate(-14deg); }
    50%      { transform: rotate(16deg); }
}
.oc-r-anim-heart {
    transform-origin: 50% 55%;
    animation: oc-r-beat .55s ease-in-out infinite;
}
@keyframes oc-r-beat {
    0%, 100% { transform: scale(1); }
    25%      { transform: scale(1.28); }
    50%      { transform: scale(1.05); }
    75%      { transform: scale(1.22); }
}
.oc-r-anim-usa {
    transform-origin: 0% 50%;   /* flap from the flagpole side */
    animation: oc-r-flag .5s ease-in-out infinite;
}
@keyframes oc-r-flag {
    0%, 100% { transform: rotate(-5deg) skewX(6deg); }
    50%      { transform: rotate(5deg) skewX(-6deg); }
}
.oc-r-anim-frog {
    animation: oc-r-hop .5s ease-in-out infinite;
}
@keyframes oc-r-hop {
    0%, 100% { transform: translateY(0) scaleY(1); }
    30%      { transform: translateY(2px) scaleY(.82); }   /* crouch */
    60%      { transform: translateY(-14px) scaleY(1.12); } /* leap */
}

/* Raise-hand rail button: lit while YOUR hand is up. Fixed min-width so the button keeps the
   same size when its label flips Raise hand <-> Lower (no row reflow — CEO 2026-07-05). */
.oc-reaction-btn.is-hand { min-width: 116px; justify-content: center; }
.oc-reaction-btn.is-hand.is-active {
    border-color: var(--oc-info, #2563eb); background: var(--oc-info-bg, #eff6ff);
}
.oc-reaction-btn.is-hand.is-active .oc-reaction-lbl { color: var(--oc-info-text, #1d4ed8); }
.oc-reaction-btn.is-hand .oc-reaction-lbl { color: var(--oc-gray-800); }

/* Host-only reaction controls: lower all hands + reactions on/off for the room. */
.oc-meeting-run__hostreax { display: flex; gap: 6px; margin: 0; /* rail flex gap spaces it */ }
.oc-hostreax-btn {
    flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 7px 8px; border-radius: var(--oc-radius-md, 10px);
    border: 1px solid var(--oc-gray-200); background: var(--oc-surface, #fff);
    color: var(--oc-text-muted, #6b7280); font-weight: 700; font-size: var(--oc-fs-xs, .72rem);
    cursor: pointer; white-space: nowrap;
}
.oc-hostreax-btn:hover { background: var(--oc-gray-50); color: var(--oc-gray-800); }
.oc-hostreax-btn.is-off { border-color: var(--oc-danger, #dc2626); color: var(--oc-danger, #dc2626); }
.oc-meeting-run__reactions-off {
    margin: 0; padding: 8px 10px; /* rail flex gap spaces it */
    border-radius: var(--oc-radius-md, 10px); background: var(--oc-gray-50);
    color: var(--oc-text-muted, #6b7280); font-size: var(--oc-fs-sm, .875rem); text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .oc-reaction-float { animation-duration: 2s; }
    .oc-reaction-btn:hover { transform: none; }
    .oc-r-anim-clap, .oc-r-anim-thumbsup, .oc-r-anim-celebrate, .oc-r-anim-handup,
    .oc-r-anim-heart, .oc-r-anim-usa, .oc-r-anim-frog { animation: none; }
}
.oc-meeting-run__waiting-btn.has-waiting { border-color: var(--oc-orange, #ee572c); color: var(--oc-orange-text, #c2410c); }
.oc-waiting-badge {
    margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; background: var(--oc-orange, #ee572c); color: #fff;
    font-size: .72rem; font-weight: 700;
}
/* phone bottom-nav waiting button: count badge floats over the icon */
.oc-mnav-waiting-wrap { position: relative; display: inline-flex; }
.oc-mnav-btn.has-waiting { color: var(--oc-orange, #ee572c); }
.oc-mnav-badge {
    position: absolute; top: -6px; right: -10px; min-width: 16px; height: 16px; padding: 0 4px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; background: var(--oc-orange, #ee572c); color: #fff;
    font-size: .62rem; font-weight: 700; line-height: 1;
}

.oc-waiting-backdrop {
    position: fixed; inset: 0; z-index: 1600;
    display: flex; align-items: center; justify-content: center;
    padding: var(--oc-space-4, 16px); background: rgba(17, 20, 24, .45);
}
.oc-waiting-panel {
    width: 100%; max-width: 380px;
    background: var(--oc-surface, #fff); color: var(--oc-text, #1f2430);
    border-radius: var(--oc-radius-lg, 14px); box-shadow: 0 18px 48px rgba(0, 0, 0, .3);
    padding: var(--oc-space-4, 16px); display: flex; flex-direction: column; gap: var(--oc-space-3, 12px);
}
.oc-waiting-panel__head { display: flex; align-items: center; justify-content: space-between; }
.oc-waiting-panel__head h3 { margin: 0; font-size: 1.05rem; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.oc-waiting-panel__close {
    border: none; background: transparent; cursor: pointer; color: var(--oc-text-muted, #6b7280);
    width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem;
}
.oc-waiting-panel__close:hover { background: var(--oc-gray-100); }
.oc-waiting-panel__empty { color: var(--oc-text-muted, #6b7280); font-size: var(--oc-fs-sm, .875rem); margin: 0; }
.oc-waiting-panel__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 40vh; overflow-y: auto; }
.oc-waiting-panel__list li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: var(--oc-gray-50); font-size: var(--oc-fs-sm, .875rem); }
.oc-waiting-panel__actions { display: flex; }
.oc-waiting-panel__letin, .oc-waiting-panel__hold {
    flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 14px; border-radius: var(--oc-radius-pill, 999px); border: 1px solid transparent;
    font-weight: 700; font-size: .95rem; cursor: pointer;
}
.oc-waiting-panel__letin { background: var(--oc-orange, #ee572c); color: #fff; }
.oc-waiting-panel__hold { background: var(--oc-gray-100); color: var(--oc-gray-800); border-color: var(--oc-gray-200); }
.oc-waiting-panel__letin:disabled, .oc-waiting-panel__hold:disabled { opacity: .6; cursor: default; }

/* Single column: the rail leaves the grid flow and floats as an overlay. */
.oc-meeting-run.is-present {
    grid-template-columns: 1fr;
    min-height: calc(100vh - 2 * var(--oc-space-4));
    outline: none;
}

.oc-meeting-run.is-present .oc-meeting-run__main {
    /* Keep clear of the collapsed rail strip on the left. When the rail slides out
       (hover/focus, rule below) the presentation SHRINKS to make room instead of the
       rail overlapping + clipping it — animated for a smooth expand/contract. */
    margin-left: 22px;
    transition: margin-left var(--oc-dur-med, 240ms) var(--oc-ease, ease);
}

/* Rail expanded -> push the presentation over by the rail's full width so nothing is
   ever hidden underneath it. :has() lets the content react to the sibling rail's hover. */
.oc-meeting-run.is-present:has(.oc-meeting-run__rail:hover) .oc-meeting-run__main,
.oc-meeting-run.is-present:has(.oc-meeting-run__rail:focus-within) .oc-meeting-run__main {
    margin-left: 320px;
}

/* The rail becomes a fixed, mostly off-screen panel; a slim orange strip
   stays visible as the affordance. Hover (or keyboard focus within, e.g.
   tabbing to the Pause button) slides it out. */
.oc-meeting-run.is-present .oc-meeting-run__rail {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 320px;
    max-height: none;
    height: auto;
    overflow-y: auto;
    z-index: 1050;
    border-radius: 0;
    border-top: 0;
    border-bottom: 0;
    border-left: 0;
    box-shadow: var(--oc-shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.18));
    transform: translateX(calc(-100% + 14px));
    transition: transform var(--oc-dur-fast, 150ms) var(--oc-ease, ease);
}

.oc-meeting-run.is-present .oc-meeting-run__rail:hover,
.oc-meeting-run.is-present .oc-meeting-run__rail:focus-within {
    transform: translateX(0);
}

/* The visible strip: a slim brand-colored band on the rail's right edge. */
.oc-meeting-run.is-present .oc-meeting-run__rail::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 14px;
    background: linear-gradient(180deg, var(--oc-orange), var(--oc-orange-700));
    opacity: 0.85;
}

.oc-meeting-run.is-present .oc-meeting-run__rail:hover::after,
.oc-meeting-run.is-present .oc-meeting-run__rail:focus-within::after {
    opacity: 0;
    pointer-events: none;
}


/* =========================================================================
   7. Section: Segue
   ========================================================================= */

.oc-section-segue p:first-child {
    color: var(--oc-gray-600);
    font-size: var(--oc-fs-body);
    margin-bottom: var(--oc-space-4);
}

.oc-section-segue__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--oc-space-3);
}

.oc-section-segue__card {
    display: flex;
    align-items: center;
    gap: var(--oc-space-3);
    padding: var(--oc-space-3) var(--oc-space-4);
    border: 1px solid var(--oc-gray-200);
    border-radius: var(--oc-radius-md);
    background: var(--oc-surface);
}

.oc-section-segue__card.is-present {
    border-color: var(--oc-orange-100);
    background: var(--oc-orange-50);
}

.oc-section-segue__card.is-absent {
    background: var(--oc-gray-50);
    color: var(--oc-gray-500);
}

/* Segue cards use <OcAvatar Size="sm" /> for attendees; absent attendees
   get faded via the .is-absent card class, not a per-avatar override. */


/* =========================================================================
   7b. Section: static facilitator cards
       (Objectives, Check-In, Next Steps in the Quarterly Session)
   ========================================================================= */

.oc-section-card {
    display: flex;
    justify-content: center;
    padding: var(--oc-space-4) 0;
}

.oc-section-card__panel {
    background: var(--oc-surface);
    border: 1px solid var(--oc-gray-200);
    border-radius: var(--oc-radius-md);
    padding: var(--oc-space-5) var(--oc-space-6);
    max-width: 760px;
    width: 100%;
    box-shadow: var(--oc-shadow-sm);
}

.oc-section-card__title {
    font-size: var(--oc-fs-h3);
    font-weight: 600;
    color: var(--oc-gray-900);
    margin: 0 0 var(--oc-space-4);
}

.oc-section-card__bullets {
    list-style: disc;
    padding-left: var(--oc-space-5);
    margin: 0 0 var(--oc-space-4);
    color: var(--oc-orange-700);
    font-size: var(--oc-fs-body);
}

.oc-section-card__bullets li {
    margin-bottom: var(--oc-space-3);
}

.oc-section-card__bullets li::marker {
    color: var(--oc-gray-900);
}

.oc-section-card__steps {
    list-style: none;
    counter-reset: ocstep;
    padding: 0;
    margin: 0 0 var(--oc-space-4);
}

.oc-section-card__steps > li {
    counter-increment: ocstep;
    display: flex;
    gap: var(--oc-space-3);
    align-items: flex-start;
    padding: var(--oc-space-2) 0;
    color: var(--oc-gray-800);
    font-size: var(--oc-fs-body);
}

.oc-section-card__steps > li::before {
    content: counter(ocstep);
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--oc-black);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--oc-fs-xs);
    font-weight: 700;
    margin-top: 2px;
}

.oc-section-card__tip {
    margin: var(--oc-space-4) 0 0;
    font-size: var(--oc-fs-sm);
    color: var(--oc-gray-700);
}

.oc-section-card__tip strong {
    color: var(--oc-gray-900);
}


/* =========================================================================
   7c. Section: EOS Tools (Anthropic-generated growth-sector videos)
   ========================================================================= */

.oc-section-eostools {
    display: flex;
    flex-direction: column;
    gap: var(--oc-space-5);
    padding: var(--oc-space-4) 0;
}

.oc-section-eostools__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--oc-space-4);
    flex-wrap: wrap;
}

.oc-section-eostools__head h3 {
    margin: 0;
    font-size: var(--oc-fs-h3);
    font-weight: 700;
    color: var(--oc-gray-900);
}

.oc-section-eostools__subtitle {
    margin: var(--oc-space-2) 0 0;
    color: var(--oc-gray-700);
    font-size: var(--oc-fs-body);
    max-width: 60ch;
}

.oc-section-eostools__meta {
    margin: var(--oc-space-2) 0 0;
    color: var(--oc-gray-500);
    font-size: var(--oc-fs-xs);
}

.oc-section-eostools__skeleton {
    display: flex;
    flex-direction: column;
    gap: var(--oc-space-4);
}

.oc-section-eostools__skel-sector {
    display: flex;
    flex-direction: column;
    gap: var(--oc-space-3);
}

.oc-section-eostools__skel-title {
    width: 220px;
    height: 18px;
    border-radius: var(--oc-radius-sm);
    background: var(--oc-gray-100);
    animation: oc-pulse 1.4s ease-in-out infinite;
}

.oc-section-eostools__skel-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--oc-space-3);
}

.oc-section-eostools__skel-card {
    height: 200px;
    border-radius: var(--oc-radius-md);
    background: var(--oc-gray-100);
    animation: oc-pulse 1.4s ease-in-out infinite;
}

@keyframes oc-pulse {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
}

.oc-eostools-sector {
    background: var(--oc-gray-50);
    border: 1px solid var(--oc-gray-100);
    border-radius: var(--oc-radius-md);
    padding: var(--oc-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--oc-space-3);
}

.oc-eostools-sector__head h4 {
    margin: 0 0 var(--oc-space-2);
    font-size: var(--oc-fs-h4);
    font-weight: 700;
    color: var(--oc-gray-900);
}

.oc-eostools-sector__head p {
    margin: 0;
    color: var(--oc-gray-700);
    font-size: var(--oc-fs-sm);
    max-width: 70ch;
}

.oc-eostools-sector__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--oc-space-3);
    margin-top: var(--oc-space-2);
}

.oc-eostools-card {
    background: var(--oc-surface);
    border: 1px solid var(--oc-gray-200);
    border-radius: var(--oc-radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--oc-shadow-sm);
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.oc-eostools-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--oc-shadow-md);
}

.oc-eostools-card__thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--oc-gray-900);
}

.oc-eostools-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.oc-eostools-card__thumb-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--oc-gray-300);
    font-size: 56px;
}

.oc-eostools-card__duration {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background: rgba(0, 0, 0, 0.78);
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.oc-eostools-card__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.9);
    font-size: 48px;
    opacity: 0;
    transition: opacity 120ms ease;
    pointer-events: none;
}

.oc-eostools-card__thumb:hover .oc-eostools-card__play {
    opacity: 1;
}

.oc-eostools-card__body {
    padding: var(--oc-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--oc-space-2);
}

.oc-eostools-card__title {
    color: var(--oc-gray-900);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--oc-fs-sm);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.oc-eostools-card__title:hover {
    color: var(--oc-orange-700);
    text-decoration: underline;
}

.oc-eostools-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--oc-space-2);
    font-size: var(--oc-fs-xs);
    color: var(--oc-gray-600);
}

.oc-eostools-card__channel {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.oc-eostools-card__pill {
    background: var(--oc-orange-50);
    color: var(--oc-orange-700);
    border: 1px solid var(--oc-orange-100);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex: 0 0 auto;
}

/* View count + publish date, verified via the YouTube Data API. Whole row
   is omitted (not just empty) when the video shipped unverified. */
.oc-eostools-card__stats {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--oc-fs-xs);
    color: var(--oc-gray-500);
    white-space: nowrap;
}

.oc-eostools-card__dot {
    color: var(--oc-gray-400);
}


/* =========================================================================
   8. Section: Headlines (in-meeting)
   ========================================================================= */

.oc-meeting-headlines,
.oc-headlines-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--oc-space-5);
}

.oc-meeting-headlines__col,
.oc-headlines-col {
    background: var(--oc-gray-50);
    border: 1px solid var(--oc-gray-100);
    border-radius: var(--oc-radius-md);
    padding: var(--oc-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--oc-space-3);
}

.oc-meeting-headlines__col h3,
.oc-headlines-col h3 {
    font-size: var(--oc-fs-h3);
    font-weight: 700;
    color: var(--oc-gray-900);
    margin: 0;
}

.oc-meeting-headlines__add,
.oc-headlines-add {
    display: flex;
    gap: 0.5rem;
}

.oc-meeting-headlines__add input,
.oc-headlines-add input {
    flex: 1 1 auto;
    border: 1px solid var(--oc-gray-300);
    border-radius: var(--oc-radius-sm);
    padding: 0.45rem 0.65rem;
    font-size: var(--oc-fs-body);
    background: var(--oc-surface);
}

.oc-meeting-headlines__add input:focus,
.oc-headlines-add input:focus {
    outline: none;
    border-color: var(--oc-orange-600);
    box-shadow: var(--oc-shadow-focus);
}

.oc-meeting-headlines__list,
.oc-headlines-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.oc-meeting-headlines__list li,
.oc-headlines-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.55rem 0.65rem;
    background: var(--oc-surface);
    border: 1px solid var(--oc-gray-100);
    border-radius: var(--oc-radius-sm);
    font-size: var(--oc-fs-sm);
    color: var(--oc-gray-900);
}

.oc-meeting-headlines__list li > span:first-child,
.oc-headlines-list li > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.oc-meeting-headlines__list li small,
.oc-headlines-list li small {
    color: var(--oc-gray-500);
    flex: 0 0 auto;
}

.oc-headlines-list li.is-archived {
    opacity: 0.55;
    text-decoration: line-through;
}

.oc-meeting-headlines__list .btn-link,
.oc-headlines-row-actions .btn-link {
    color: var(--oc-gray-500);
    padding: 0 4px;
}

.oc-meeting-headlines__list .btn-link:hover,
.oc-headlines-row-actions .btn-link:hover {
    color: var(--oc-orange-700);
}


/* =========================================================================
   9. Section: To-Dos (in-meeting + standalone)
   ========================================================================= */

.oc-meeting-todos,
.oc-todos-add {
    display: flex;
    flex-direction: column;
    gap: var(--oc-space-3);
}

.oc-meeting-todos__add,
.oc-todos-add {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.oc-meeting-todos__add input,
.oc-todos-add input {
    flex: 1 1 auto;
    border: 1px solid var(--oc-gray-300);
    border-radius: var(--oc-radius-sm);
    padding: 0.55rem 0.75rem;
    font-size: var(--oc-fs-body);
    background: var(--oc-surface);
}

.oc-meeting-todos__add input:focus,
.oc-todos-add input:focus {
    outline: none;
    border-color: var(--oc-orange-600);
    box-shadow: var(--oc-shadow-focus);
}

.oc-meeting-todos__group,
.oc-todos-group {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--oc-fs-xs);
    font-weight: 700;
    color: var(--oc-gray-600);
    margin: var(--oc-space-4) 0 var(--oc-space-2);
}

.oc-meeting-todos__list,
.oc-todos-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* In-meeting "Todos" section keeps the simple flex row — that surface
   is dense and isn't using the standalone column layout below. */
.oc-meeting-todos__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--oc-space-3);
    padding: 0.55rem 0.75rem;
    background: var(--oc-surface);
    border: 1px solid var(--oc-gray-100);
    border-radius: var(--oc-radius-sm);
    font-size: var(--oc-fs-body);
    transition: background var(--oc-dur-fast) var(--oc-ease);
}

.oc-meeting-todos__row:hover {
    background: var(--oc-gray-50);
}

.oc-meeting-todos__check {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    flex: 1 1 auto;
    min-width: 0;
}

.oc-meeting-todos__check input {
    width: 16px;
    height: 16px;
    accent-color: var(--oc-orange);
    flex: 0 0 auto;
}

.oc-meeting-todos__check span {
    color: var(--oc-gray-900);
    overflow: hidden;
    text-overflow: ellipsis;
}

.oc-meeting-todos__list--done .oc-meeting-todos__check span {
    color: var(--oc-gray-500);
    text-decoration: line-through;
}

.oc-meeting-todos__meta {
    display: inline-flex;
    align-items: center;
    gap: var(--oc-space-3);
    font-size: var(--oc-fs-xs);
    color: var(--oc-gray-500);
    flex: 0 0 auto;
    padding-top: 2px;
}

.oc-meeting-todos__overdue {
    color: var(--oc-danger);
    font-weight: 600;
}

/* =========================================================================
   Standalone /eos/todos — Ninety-style card with column rows + drawer.
   ========================================================================= */

/* Filter chip bar above the card */
.oc-todos-filterbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--oc-space-3);
    margin: var(--oc-space-3) 0 var(--oc-space-4);
}

.oc-todos-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 12px;
    background: var(--oc-surface);
    border: 1px solid var(--oc-gray-200);
    border-radius: 999px;
    font-size: var(--oc-fs-xs);
    color: var(--oc-gray-700);
    position: relative;
}

.oc-todos-chip-label {
    color: var(--oc-gray-500);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

.oc-todos-chip-select {
    border: 0;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    font-size: var(--oc-fs-xs);
    color: var(--oc-gray-900);
    cursor: pointer;
    padding-right: 16px;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 16 16'%3E%3Cpath fill='%236b7280' d='M3.204 5h9.592L8 10.481z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 center;
}

.oc-todos-chip-select:focus {
    outline: none;
}

.oc-todos-chip--toggle {
    cursor: pointer;
    user-select: none;
}

.oc-todos-chip--toggle input[type="checkbox"] {
    accent-color: var(--oc-orange);
}

.oc-todos-chip--multi {
    padding-right: 6px;
}

.oc-todos-chip-value {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--oc-gray-900);
}

.oc-todos-chip-plus {
    color: var(--oc-gray-500);
}

.oc-todos-chip-toggle {
    border: 0;
    background: transparent;
    color: var(--oc-gray-500);
    cursor: pointer;
    padding: 2px 4px;
}

.oc-todos-chip-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 50;
    min-width: 220px;
    max-height: 280px;
    overflow-y: auto;
    background: var(--oc-surface);
    border: 1px solid var(--oc-gray-200);
    border-radius: var(--oc-radius-sm);
    box-shadow: var(--oc-shadow-md);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.oc-todos-chip-menu-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: var(--oc-fs-sm);
    color: var(--oc-gray-900);
}

.oc-todos-chip-menu-row:hover {
    background: var(--oc-gray-50);
}

.oc-todos-chip-menu-row input[type="checkbox"] {
    accent-color: var(--oc-orange);
}

/* Card */
.oc-todos-card {
    background: var(--oc-surface);
    border: 1px solid var(--oc-gray-200);
    border-radius: var(--oc-radius-md);
    box-shadow: var(--oc-shadow-xs);
    overflow: hidden;
}

.oc-todos-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--oc-gray-100);
}

.oc-todos-card-title {
    font-weight: 700;
    font-size: var(--oc-fs-h5, 16px);
    color: var(--oc-gray-900);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.oc-todos-card-count {
    background: var(--oc-gray-100);
    color: var(--oc-gray-700);
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
}

.oc-todos-card-foot {
    border-top: 1px solid var(--oc-gray-100);
    padding: 12px 18px;
}

/* Row grid: circle | body (title + badges + overdue) | due | owner */
.oc-todos-colhead {
    display: grid;
    grid-template-columns: 36px 1fr 110px 56px;
    gap: var(--oc-space-3);
    padding: 6px 18px;
    background: var(--oc-gray-50);
    border-bottom: 1px solid var(--oc-gray-100);
    font-size: var(--oc-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--oc-gray-500);
    font-weight: 600;
}

.oc-todos-colhead-title { grid-column: 2 / 3; }
.oc-todos-colhead-due   { grid-column: 3 / 4; }
.oc-todos-colhead-owner { grid-column: 4 / 5; text-align: center; }

.oc-todos-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.oc-todos-row {
    display: grid;
    grid-template-columns: 36px 1fr 110px 56px;
    gap: var(--oc-space-3);
    align-items: center;
    padding: 10px 18px;
    border-bottom: 1px solid var(--oc-gray-100);
    background: var(--oc-surface);
    transition: background var(--oc-dur-fast) var(--oc-ease);
}

.oc-todos-row:last-child {
    border-bottom: 0;
}

.oc-todos-row:hover {
    background: var(--oc-gray-50);
}

.oc-todos-row.is-done {
    background: transparent;
}

.oc-todos-circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--oc-gray-300);
    background: transparent;
    color: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
    padding: 0;
    justify-self: center;
}

.oc-todos-circle:hover {
    border-color: var(--oc-orange);
}

.oc-todos-circle.is-done {
    background: var(--oc-orange);
    border-color: var(--oc-orange);
    color: #ffffff;
}

/* Single per-row completion checkbox (replaces the old select-box + circle
   pair). Sits in the row's first 36px column; check = mark the to-do done. */
.oc-todos-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.oc-todos-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--oc-orange);
}

/* EOS command-palette trigger (the search icon in the EOS header). Global (not
   the palette's scoped css) because the button now lives in EosSectionHeader
   while the palette overlay is hosted at the layout root. */
.oc-eospal-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--oc-border, var(--oc-gray-200));
    border-radius: 8px;
    background: var(--oc-surface);
    color: var(--oc-text-muted, var(--oc-gray-500));
    cursor: pointer;
    font-size: 14px;
}
.oc-eospal-trigger:hover {
    border-color: var(--oc-primary, #ee572c);
    color: var(--oc-primary, #ee572c);
}

.oc-todos-body {
    border: 0;
    background: transparent;
    padding: 0;
    text-align: left;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--oc-gray-900);
    font-size: var(--oc-fs-body);
    line-height: 1.35;
    min-width: 0;
    overflow: hidden;
}

.oc-todos-body:hover .oc-todos-title {
    color: var(--oc-orange-600, var(--oc-orange));
}

.oc-todos-title {
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.oc-todos-row.is-done .oc-todos-title {
    color: var(--oc-gray-500);
    text-decoration: line-through;
}

.oc-todos-overdue-icon {
    color: var(--oc-danger);
    font-size: 14px;
    flex: 0 0 auto;
}

.oc-todos-cmtbadge,
.oc-todos-linkbadge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--oc-gray-100);
    color: var(--oc-gray-700);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 11px;
    flex: 0 0 auto;
}

.oc-todos-due {
    font-size: var(--oc-fs-xs);
    color: var(--oc-gray-700);
    text-align: left;
}

.oc-todos-due--overdue {
    color: var(--oc-danger);
    font-weight: 700;
}

.oc-todos-due--today {
    color: var(--oc-orange-700, var(--oc-orange));
    font-weight: 600;
}

.oc-todos-due--upcoming {
    color: var(--oc-gray-700);
}

.oc-todos-row.is-done .oc-todos-due {
    color: var(--oc-gray-500);
    text-decoration: line-through;
}

.oc-todos-owner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.oc-todos-owner--blank {
    width: 28px;
    height: 28px;
}

/* Inherit the strikethrough style on the legacy in-meeting view */
.oc-todos-list--done .oc-todos-title { color: var(--oc-gray-500); text-decoration: line-through; }


/* =========================================================================
   10. Section: IDS (Identify / Discuss / Solve)
   ========================================================================= */

/* Issues + Discuss sit side-by-side on top; Solved is a full-width row
   underneath them (CEO 2026-06-16). */
.oc-meeting-ids {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    grid-template-areas:
        "issues discuss"
        "solved solved";
    gap: var(--oc-space-4);
    align-items: stretch;
    min-height: 620px;
}

.oc-meeting-ids__col--issues { grid-area: issues; }
.oc-meeting-ids__col--discuss { grid-area: discuss; }
.oc-meeting-ids__col--solved { grid-area: solved; }

@media (max-width: 768px) {
    .oc-meeting-ids {
        grid-template-columns: 1fr;
        grid-template-areas:
            "issues"
            "discuss"
            "solved";
        min-height: 0;
    }
}

.oc-meeting-ids__col {
    background: var(--oc-gray-50);
    border: 1px solid var(--oc-gray-100);
    border-radius: var(--oc-radius-md);
    padding: var(--oc-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--oc-space-3);
}

.oc-meeting-ids__col--discuss {
    background: var(--oc-surface);
    border-color: var(--oc-orange-100);
    box-shadow: var(--oc-shadow-sm);
}

.oc-meeting-ids__col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.oc-meeting-ids__col-head h3 {
    font-size: var(--oc-fs-h3);
    font-weight: 700;
    color: var(--oc-gray-900);
    margin: 0;
}

.oc-meeting-ids__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    border-radius: var(--oc-radius-pill);
    background: var(--oc-orange);
    color: #fff;
    font-size: var(--oc-fs-xs);
    font-weight: 700;
}

.oc-meeting-ids__add {
    display: flex;
    gap: 0.5rem;
}

.oc-meeting-ids__add input {
    flex: 1 1 auto;
    border: 1px solid var(--oc-gray-300);
    border-radius: var(--oc-radius-sm);
    padding: 0.45rem 0.65rem;
    font-size: var(--oc-fs-sm);
    background: var(--oc-surface);
}

.oc-meeting-ids__add input:focus {
    outline: none;
    border-color: var(--oc-orange-600);
    box-shadow: var(--oc-shadow-focus);
}

.oc-meeting-ids__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
}

/* Tall enough to show ~10 issues before it starts scrolling (CEO 2026-06-16). */
.oc-meeting-ids__col--issues .oc-meeting-ids__list {
    min-height: 520px;
    max-height: 62vh;
}

/* Solved is a wide bottom row now: lay its chips out horizontally. */
.oc-meeting-ids__col--solved .oc-meeting-ids__list--solved {
    flex-direction: row;
    flex-wrap: wrap;
    overflow-y: visible;
}

.oc-meeting-ids__col--solved .oc-meeting-ids__item.is-solved {
    flex: 0 1 auto;
}

.oc-meeting-ids__item {
    padding: 0.6rem 0.75rem;
    background: var(--oc-surface);
    border: 1px solid var(--oc-gray-200);
    border-radius: var(--oc-radius-sm);
    cursor: pointer;
    transition: border-color var(--oc-dur-fast) var(--oc-ease), background var(--oc-dur-fast) var(--oc-ease);
}

.oc-meeting-ids__item:hover {
    border-color: var(--oc-orange-600);
}

.oc-meeting-ids__item.is-selected {
    border-color: var(--oc-orange-600);
    background: var(--oc-orange-50);
    box-shadow: var(--oc-shadow-focus);
}

.oc-meeting-ids__item.is-solved {
    background: var(--oc-gray-50);
    cursor: default;
    border-color: var(--oc-gray-200);
}

.oc-meeting-ids__item-title {
    font-size: var(--oc-fs-body);
    color: var(--oc-gray-900);
    font-weight: 600;
}

/* "raised" chip: the issue came out of another EOS item (Raise as Issue)
   and was flagged for this IDS - those rows sort to the top of the backlog. */
.oc-meeting-ids__raised-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0 6px;
    margin-right: 6px;
    border-radius: var(--oc-radius-pill);
    background: var(--oc-warning-bg);
    color: var(--oc-warning-text);
    font-size: var(--oc-fs-xs);
    font-weight: 700;
    letter-spacing: 0.02em;
    vertical-align: middle;
    white-space: nowrap;
}

.oc-meeting-ids__item-sub {
    font-size: var(--oc-fs-xs);
    color: var(--oc-gray-500);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* --- 1-click solve on each list row --- */

.oc-meeting-ids__item-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.oc-meeting-ids__item-main {
    flex: 1 1 auto;
    min-width: 0;
}

/* --- IDS top-3 vote toggle --- always visible so vote counts stay
   scannable while the room argues priorities. */

.oc-meeting-ids__vote {
    all: unset;
    cursor: pointer;
    flex: 0 0 auto;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: 30px;
    padding: 0.15rem 0.3rem;
    border-radius: var(--oc-radius-sm);
    border: 1px solid var(--oc-gray-200);
    background: var(--oc-surface);
    color: var(--oc-gray-500);
    font-size: var(--oc-fs-xs);
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
}

.oc-meeting-ids__vote:hover {
    border-color: var(--oc-orange-100);
    background: var(--oc-orange-50);
    color: var(--oc-orange-700);
}

.oc-meeting-ids__vote:focus-visible {
    box-shadow: var(--oc-shadow-focus);
}

.oc-meeting-ids__vote.is-active {
    border-color: var(--oc-orange-100);
    background: var(--oc-orange-50);
    color: var(--oc-orange-700);
}

.oc-meeting-ids__vote[disabled] {
    opacity: 0.45;
    cursor: default;
}

/* "x of 3 votes left" hint in the Issues column header. */
.oc-meeting-ids__votes-left {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--oc-fs-xs);
    font-weight: 600;
    color: var(--oc-gray-500);
    white-space: nowrap;
}

.oc-meeting-ids__discuss h2 {
    font-size: var(--oc-fs-h2);
    font-weight: 700;
    color: var(--oc-gray-900);
    margin: 0 0 var(--oc-space-3);
    line-height: var(--oc-lh-tight);
}

.oc-meeting-ids__discuss p {
    color: var(--oc-gray-700);
    font-size: var(--oc-fs-body);
    line-height: var(--oc-lh-normal);
    margin: 0 0 var(--oc-space-3);
    white-space: pre-wrap;
}

.oc-meeting-ids__discuss-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: var(--oc-space-4);
    align-items: center;
}

.oc-meeting-ids__discuss-actions input {
    flex: 1 1 240px;
    min-width: 0;
    border: 1px solid var(--oc-gray-300);
    border-radius: var(--oc-radius-sm);
    padding: 0.45rem 0.65rem;
    font-size: var(--oc-fs-sm);
}

.oc-meeting-ids__discuss-actions input:focus {
    outline: none;
    border-color: var(--oc-orange-600);
    box-shadow: var(--oc-shadow-focus);
}

/* "Wrong team? Move this issue to..." - a quiet secondary action under the
   primary Solve/Skip row, so it reads as an escape hatch, not a main verb. */
.oc-meeting-ids__move {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: var(--oc-space-3);
    padding-top: var(--oc-space-3);
    border-top: 1px dashed var(--oc-gray-200);
}

.oc-meeting-ids__move-label {
    font-size: var(--oc-fs-sm);
    color: var(--oc-gray-600);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
}

.oc-meeting-ids__move-select {
    flex: 0 1 220px;
    min-width: 0;
    border: 1px solid var(--oc-gray-300);
    border-radius: var(--oc-radius-sm);
    padding: 0.4rem 0.6rem;
    font-size: var(--oc-fs-sm);
    background: var(--oc-white);
}

.oc-meeting-ids__move-select:focus {
    outline: none;
    border-color: var(--oc-orange-600);
    box-shadow: var(--oc-shadow-focus);
}

.oc-meeting-ids__move-select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Keep a long Discuss pane (notes + actions) from blowing out the grid row. */
.oc-meeting-ids__col--discuss {
    overflow-y: auto;
}

/* --- AI discussion notes (perspectives + potential solves) --- */
.oc-ids-notes {
    margin-top: var(--oc-space-3);
    border: 1px solid var(--oc-gray-200);
    border-radius: var(--oc-radius-md);
    background: var(--oc-gray-50);
    padding: var(--oc-space-3);
}

.oc-ids-notes__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: var(--oc-space-2);
}

.oc-ids-notes__title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: var(--oc-fs-sm);
    color: var(--oc-gray-900);
}

.oc-ids-notes__title i { color: var(--oc-orange); }

.oc-ids-notes__refresh {
    all: unset;
    cursor: pointer;
    font-size: var(--oc-fs-xs);
    font-weight: 700;
    color: var(--oc-orange-700);
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--oc-orange-100);
    border-radius: var(--oc-radius-pill);
    background: var(--oc-surface);
    white-space: nowrap;
}

.oc-ids-notes__refresh:hover { background: var(--oc-orange-50); }
.oc-ids-notes__refresh:focus-visible { box-shadow: var(--oc-shadow-focus); }
.oc-ids-notes__refresh[disabled] { opacity: 0.55; cursor: default; }

.oc-ids-notes__summary {
    font-size: var(--oc-fs-sm);
    color: var(--oc-gray-700);
    margin: 0 0 var(--oc-space-2);
    line-height: var(--oc-lh-normal);
}

.oc-ids-notes__subhead {
    font-size: var(--oc-fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--oc-gray-500);
    margin: var(--oc-space-2) 0 4px;
}

.oc-ids-notes__list {
    list-style: none;
    margin: 0 0 var(--oc-space-2);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.oc-ids-notes__persp {
    font-size: var(--oc-fs-sm);
    color: var(--oc-gray-700);
    line-height: var(--oc-lh-normal);
}

.oc-ids-notes__persp b { color: var(--oc-gray-900); }

.oc-ids-notes__solve {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    font-size: var(--oc-fs-sm);
    color: var(--oc-gray-700);
    line-height: var(--oc-lh-normal);
}

.oc-ids-notes__solve i {
    color: var(--oc-amber-700, var(--oc-orange-700));
    margin-top: 2px;
    flex: 0 0 auto;
}

.oc-ids-notes__hint,
.oc-ids-notes__empty {
    font-size: var(--oc-fs-sm);
    color: var(--oc-gray-500);
    margin: 0;
}

/* --- "AI is thinking" indicator (shared by notes + action generation) --- */
.oc-ids-thinking {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--oc-fs-sm);
    color: var(--oc-gray-700);
    padding: 4px 0;
}

.oc-ids-spinner {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    flex: 0 0 auto;
    border: 2px solid var(--oc-gray-300);
    border-top-color: var(--oc-orange);
    animation: oc-scribe-spin 700ms linear infinite;
}

/* --- "Generate assigned actions for solve" (bottom of Discuss) --- */
.oc-ids-actions-gen {
    margin-top: var(--oc-space-4);
    padding-top: var(--oc-space-3);
    border-top: 1px dashed var(--oc-gray-200);
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

.oc-ids-gen-btn {
    all: unset;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.5rem 0.9rem;
    border-radius: var(--oc-radius-md);
    background: var(--oc-orange);
    color: #fff;
    font-weight: 700;
    font-size: var(--oc-fs-sm);
}

.oc-ids-gen-btn:hover { filter: brightness(0.96); }
.oc-ids-gen-btn:focus-visible { box-shadow: var(--oc-shadow-focus); }
.oc-ids-gen-btn[disabled] { opacity: 0.6; cursor: default; }


/* =========================================================================
   11. Section: Conclude (rate + recap)
   ========================================================================= */

.oc-section-conclude {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: var(--oc-space-5);
    align-items: start;
}

@media (max-width: 992px) {
    .oc-section-conclude {
        grid-template-columns: 1fr;
    }
}

.oc-section-conclude__recap,
.oc-section-conclude__rate,
.oc-section-conclude__list {
    background: var(--oc-gray-50);
    border: 1px solid var(--oc-gray-100);
    border-radius: var(--oc-radius-md);
    padding: var(--oc-space-5);
}

.oc-section-conclude__recap {
    grid-column: 1;
    grid-row: 1;
}

.oc-section-conclude__rate {
    grid-column: 1;
    grid-row: 2;
}

.oc-section-conclude__list {
    grid-column: 2;
    grid-row: 1 / span 2;
    background: var(--oc-surface);
    box-shadow: var(--oc-shadow-sm);
}

@media (max-width: 992px) {
    .oc-section-conclude__recap,
    .oc-section-conclude__rate,
    .oc-section-conclude__list {
        grid-column: 1;
        grid-row: auto;
    }
}

.oc-section-conclude h3 {
    font-size: var(--oc-fs-h3);
    font-weight: 700;
    color: var(--oc-gray-900);
    margin: 0 0 var(--oc-space-3);
}

.oc-section-conclude__recap ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--oc-gray-700);
    font-size: var(--oc-fs-body);
}

.oc-section-conclude__recap strong {
    color: var(--oc-gray-900);
}

.oc-section-conclude__scale {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 6px;
    margin: var(--oc-space-3) 0 var(--oc-space-3);
}

.oc-section-conclude__scale-btn {
    appearance: none;
    border: 1px solid var(--oc-gray-300);
    background: var(--oc-surface);
    color: var(--oc-gray-700);
    border-radius: var(--oc-radius-sm);
    padding: 0.55rem 0;
    font-weight: 700;
    font-size: var(--oc-fs-sm);
    cursor: pointer;
    transition: background var(--oc-dur-fast) var(--oc-ease), color var(--oc-dur-fast) var(--oc-ease), border-color var(--oc-dur-fast) var(--oc-ease);
}

.oc-section-conclude__scale-btn:hover {
    border-color: var(--oc-orange-600);
    color: var(--oc-orange-700);
}

.oc-section-conclude__scale-btn.is-active {
    background: var(--oc-orange);
    color: #fff;
    border-color: var(--oc-orange);
    box-shadow: var(--oc-shadow-focus);
}

.oc-section-conclude__comment {
    width: 100%;
    border: 1px solid var(--oc-gray-300);
    border-radius: var(--oc-radius-sm);
    padding: 0.55rem 0.75rem;
    font-size: var(--oc-fs-body);
    margin-bottom: var(--oc-space-3);
    resize: vertical;
}

.oc-section-conclude__comment:focus {
    outline: none;
    border-color: var(--oc-orange-600);
    box-shadow: var(--oc-shadow-focus);
}

.oc-section-conclude__avg {
    font-size: var(--oc-fs-h2);
    color: var(--oc-gray-900);
    margin-bottom: var(--oc-space-3);
}

.oc-section-conclude__avg strong {
    font-size: 1.6em;
    color: var(--oc-orange);
    margin-right: 4px;
}

.oc-section-conclude__rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--oc-space-2);
    max-height: 480px;
    overflow-y: auto;
}

.oc-section-conclude__rows li {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.55rem 0.75rem;
    background: var(--oc-gray-50);
    border-radius: var(--oc-radius-sm);
    font-size: var(--oc-fs-sm);
    color: var(--oc-gray-800);
}

/* name + score on the top line; the note (if any) sits on its own readable line below. */
.oc-section-conclude__rowhead {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.oc-section-conclude__rows li strong {
    color: var(--oc-gray-900);
}

.oc-section-conclude__note {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    color: var(--oc-text-muted);
    line-height: 1.4;
    padding-left: 0.1rem;
}
.oc-section-conclude__note .bi { margin-top: 0.15rem; opacity: 0.8; }

.oc-section-conclude__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 24px;
    padding: 0 8px;
    background: var(--oc-orange);
    color: #fff;
    font-weight: 700;
    border-radius: var(--oc-radius-pill);
    font-size: var(--oc-fs-xs);
}


/* =========================================================================
   12. Standalone Headlines page row actions  (legacy - kept for in-meeting
        component fallback only; the standalone /eos/headlines page now uses
        the .oc-hl-* classes in section 14 below.)
   ========================================================================= */

.oc-headlines-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}


/* =========================================================================
   13. Reduced motion
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
    .oc-meeting-hero__dot {
        animation: none;
    }
    .oc-hl-live-dot.is-live {
        animation: none;
    }
}


/* =========================================================================
   14. Standalone Headlines page  (oc-hl-*)
   --------------------------------------------------------------------------
   Modern layout for /eos/headlines: KPI strip, segmented filter, two
   category cards with composer, list items with avatars and inline actions.
   The in-meeting MeetingSectionHeadlines component still uses the older
   .oc-meeting-headlines__* classes in section 8 above.
   ========================================================================= */

/* ---- KPI strip ---- */
.oc-hl-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--oc-space-3);
    margin: var(--oc-space-5) 0 var(--oc-space-4);
}
@media (max-width: 900px) {
    .oc-hl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.oc-hl-kpi {
    background: var(--oc-surface);
    border: 1px solid var(--oc-gray-200);
    border-radius: var(--oc-radius-lg);
    padding: var(--oc-space-4) var(--oc-space-5);
    box-shadow: var(--oc-shadow-xs);
    position: relative;
    overflow: hidden;
    transition: transform 120ms ease, box-shadow 120ms ease;
}
.oc-hl-kpi::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--oc-orange-50) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 200ms ease;
    pointer-events: none;
}
.oc-hl-kpi:hover { transform: translateY(-2px); box-shadow: var(--oc-shadow-md); }
.oc-hl-kpi:hover::before { opacity: 1; }

.oc-hl-kpi-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--oc-fs-xs);
    color: var(--oc-gray-600);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    position: relative;
    z-index: 1;
}
.oc-hl-kpi-label i { color: var(--oc-orange); font-size: 0.95em; }

.oc-hl-kpi-value {
    margin: 0.4rem 0 0;
    font-size: clamp(1.6rem, 1.5vw + 1rem, 2.1rem);
    line-height: 1;
    font-weight: 800;
    color: var(--oc-gray-900);
    letter-spacing: -0.02em;
    position: relative;
    z-index: 1;
}
.oc-hl-kpi-sub {
    margin: 0.35rem 0 0;
    font-size: var(--oc-fs-xs);
    color: var(--oc-gray-500);
    position: relative;
    z-index: 1;
}

/* ---- Toolbar (team picker + segmented filter + live indicator) ---- */
.oc-hl-toolbar {
    display: flex;
    align-items: center;
    gap: var(--oc-space-4);
    flex-wrap: wrap;
    margin-bottom: var(--oc-space-4);
}

.oc-hl-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 220px;
}
.oc-hl-field-label {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    font-size: var(--oc-fs-xs);
    color: var(--oc-gray-600);
}
.oc-hl-select {
    appearance: none;
    border: 1px solid var(--oc-gray-300);
    border-radius: var(--oc-radius-md);
    background: var(--oc-surface);
    padding: 0.5rem 0.85rem;
    font-size: var(--oc-fs-body);
    color: var(--oc-gray-900);
    min-width: 220px;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%236b7280' d='M3.204 5h9.592L8 10.481z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.65rem center;
    padding-right: 1.85rem;
}
.oc-hl-select:focus {
    outline: none;
    border-color: var(--oc-orange);
    box-shadow: var(--oc-shadow-focus);
}

.oc-hl-filter {
    display: inline-flex;
    background: var(--oc-gray-100);
    border-radius: var(--oc-radius-md);
    padding: 3px;
    align-self: flex-end;
}
.oc-hl-filter-tab {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--oc-gray-700);
    font-weight: 600;
    font-size: var(--oc-fs-sm);
    padding: 0.45rem 0.85rem;
    border-radius: var(--oc-radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}
.oc-hl-filter-tab:hover { color: var(--oc-gray-900); }
.oc-hl-filter-tab.is-active {
    background: var(--oc-surface);
    color: var(--oc-gray-900);
    box-shadow: var(--oc-shadow-xs);
}
.oc-hl-filter-tab i { color: var(--oc-orange); }

.oc-hl-live {
    margin-left: auto;
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--oc-gray-500);
    font-size: var(--oc-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.oc-hl-live-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--oc-gray-300);
    box-shadow: 0 0 0 0 transparent;
}
.oc-hl-live-dot.is-live {
    background: var(--oc-orange);
    animation: oc-hl-pulse 2s ease-out infinite;
}
@keyframes oc-hl-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(238, 87, 44, 0.45); }
    70%  { box-shadow: 0 0 0 8px rgba(238, 87, 44, 0); }
    100% { box-shadow: 0 0 0 0 rgba(238, 87, 44, 0); }
}

/* ---- Two-column card grid ---- */
.oc-hl-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--oc-space-5);
}
@media (max-width: 900px) {
    .oc-hl-grid { grid-template-columns: 1fr; }
}

.oc-hl-card {
    background: var(--oc-surface);
    border: 1px solid var(--oc-gray-200);
    border-radius: var(--oc-radius-lg);
    box-shadow: var(--oc-shadow-xs);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.oc-hl-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--oc-space-3);
    padding: var(--oc-space-4) var(--oc-space-5);
    background: linear-gradient(180deg, var(--oc-orange-50) 0%, var(--oc-surface) 100%);
    border-bottom: 1px solid var(--oc-gray-100);
}
.oc-hl-card-id {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}
.oc-hl-card-id h3 {
    margin: 0;
    font-size: var(--oc-fs-h3);
    font-weight: 700;
    color: var(--oc-gray-900);
}
.oc-hl-card-id small {
    color: var(--oc-gray-600);
    font-size: var(--oc-fs-xs);
}
.oc-hl-card-icon {
    width: 38px; height: 38px;
    border-radius: var(--oc-radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    flex-shrink: 0;
    box-shadow: var(--oc-shadow-xs);
}
.oc-hl-card-icon--customer { background: linear-gradient(135deg, var(--oc-orange) 0%, var(--oc-orange-700) 100%); }
.oc-hl-card-icon--employee { background: linear-gradient(135deg, var(--oc-gray-700) 0%, var(--oc-gray-900) 100%); }

.oc-hl-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 28px;
    padding: 0 0.6rem;
    border-radius: var(--oc-radius-pill);
    background: var(--oc-surface);
    border: 1px solid var(--oc-gray-200);
    color: var(--oc-gray-800);
    font-weight: 700;
    font-size: var(--oc-fs-sm);
    font-variant-numeric: tabular-nums;
}

/* ---- Composer ---- */
.oc-hl-composer {
    display: flex;
    gap: 0.5rem;
    padding: var(--oc-space-4) var(--oc-space-5);
    border-bottom: 1px solid var(--oc-gray-100);
}
.oc-hl-composer-input {
    flex: 1 1 auto;
    border: 1px solid var(--oc-gray-300);
    border-radius: var(--oc-radius-md);
    padding: 0.55rem 0.85rem;
    font-size: var(--oc-fs-body);
    background: var(--oc-surface);
    color: var(--oc-gray-900);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.oc-hl-composer-input::placeholder { color: var(--oc-gray-400); }
.oc-hl-composer-input:focus {
    outline: none;
    border-color: var(--oc-orange);
    box-shadow: var(--oc-shadow-focus);
}

/* ---- List ---- */
.oc-hl-list {
    list-style: none;
    margin: 0;
    padding: var(--oc-space-2) 0;
}

.oc-hl-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem var(--oc-space-5);
    border-top: 1px solid var(--oc-gray-100);
    transition: background 120ms ease;
}
.oc-hl-item:first-child { border-top: 0; }
.oc-hl-item:hover { background: var(--oc-gray-50); }
.oc-hl-item .oc-avatar { flex-shrink: 0; margin-top: 2px; }

.oc-hl-item-body { min-width: 0; }
.oc-hl-item-text {
    margin: 0 0 0.2rem;
    font-size: var(--oc-fs-body);
    color: var(--oc-gray-900);
    line-height: 1.4;
    word-wrap: break-word;
}
.oc-hl-item-meta {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--oc-fs-xs);
    color: var(--oc-gray-500);
}
.oc-hl-item-author { font-weight: 600; color: var(--oc-gray-700); }
.oc-hl-item-dot { color: var(--oc-gray-300); }
.oc-hl-item-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 1px 0.5rem;
    border-radius: var(--oc-radius-pill);
    background: var(--oc-orange-50);
    color: var(--oc-orange-700);
    font-weight: 600;
    font-size: 0.7rem;
}
.oc-hl-item-tag--archived {
    background: var(--oc-gray-100);
    color: var(--oc-gray-600);
}

.oc-hl-item.is-archived .oc-hl-item-text {
    color: var(--oc-gray-500);
    text-decoration: line-through;
}

.oc-hl-item-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    transition: opacity 120ms ease;
}
.oc-hl-item:hover .oc-hl-item-actions,
.oc-hl-item:focus-within .oc-hl-item-actions { opacity: 1; }

.oc-hl-iconbtn {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    color: var(--oc-gray-500);
    width: 30px; height: 30px;
    border-radius: var(--oc-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.oc-hl-iconbtn:hover {
    background: var(--oc-orange-50);
    color: var(--oc-orange-700);
    border-color: var(--oc-orange-100);
}

/* ---- Per-card empty state ---- */
.oc-hl-empty {
    padding: var(--oc-space-6) var(--oc-space-5);
    text-align: center;
    color: var(--oc-gray-500);
    background: var(--oc-gray-50);
}
.oc-hl-empty i {
    font-size: 1.6rem;
    color: var(--oc-gray-300);
    display: block;
    margin-bottom: 0.4rem;
}
.oc-hl-empty p { margin: 0 0 0.2rem; color: var(--oc-gray-700); }
.oc-hl-empty small { font-size: var(--oc-fs-xs); }

.oc-hl-loading {
    color: var(--oc-gray-500);
    margin: var(--oc-space-5) 0;
    font-style: italic;
}

/* ---- Print (hide chrome, flatten cards) ---- */
@media print {
    .oc-hl-toolbar,
    .oc-hl-composer,
    .oc-hl-item-actions,
    .oc-hl-live { display: none !important; }
    .oc-hl-card { box-shadow: none; border: 1px solid var(--oc-gray-300); }
    .oc-hl-card-head { background: none; }
}

/* =========================================================================
   12. Standalone To-Dos page - scope filter pills, bulk multi-select,
       always-on owner column (WS-F lists UX, 2026-06-12)
   ========================================================================= */

.oc-todos-pills {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--oc-gray-100);
    border-radius: 999px;
    padding: 4px;
    margin: var(--oc-space-4) 0 var(--oc-space-3);
}

.oc-todos-pill {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 0;
    background: transparent;
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    font-size: var(--oc-fs-sm);
    font-weight: 600;
    color: var(--oc-gray-600);
    cursor: pointer;
    transition: background var(--oc-dur-fast) var(--oc-ease),
                color var(--oc-dur-fast) var(--oc-ease);
}

.oc-todos-pill:hover { color: var(--oc-gray-900); }

.oc-todos-pill.is-active {
    background: var(--oc-surface);
    color: var(--oc-gray-900);
    box-shadow: var(--oc-shadow-xs);
}

.oc-todos-pill i { font-size: 0.9em; color: var(--oc-orange); }

/* Bulk action bar - appears while at least one row is multi-selected.
   Mirrors .oc-issues-bulkbar / .oc-rocks-bulkbar. */
.oc-todos-bulkbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--oc-space-3);
    margin: 0 0 var(--oc-space-3);
    padding: 0.45rem 0.75rem;
    background: var(--oc-orange-50, #fff7ed);
    border: 1px solid var(--oc-orange-200, #fed7aa);
    border-radius: var(--oc-radius-md);
    box-shadow: var(--oc-shadow-xs);
}

.oc-todos-bulkbar-count {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    font-size: var(--oc-fs-sm);
    color: var(--oc-orange-700, #c2410c);
}

.oc-todos-bulkbar-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.oc-todos-bulkbar-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--oc-surface);
    border: 1px solid var(--oc-gray-300);
    border-radius: var(--oc-radius-sm);
    padding: 0.35rem 0.7rem;
    font-size: var(--oc-fs-xs);
    font-weight: 600;
    color: var(--oc-gray-800);
    cursor: pointer;
    transition: border-color var(--oc-dur-fast) var(--oc-ease),
                color var(--oc-dur-fast) var(--oc-ease);
}
.oc-todos-bulkbar-btn:hover:not(:disabled) {
    border-color: var(--oc-orange-400, #fb923c);
    color: var(--oc-orange-700, #c2410c);
}
.oc-todos-bulkbar-btn:disabled { opacity: 0.55; cursor: default; }

.oc-todos-bulkbar-link {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--oc-gray-600);
    font-size: var(--oc-fs-xs);
    font-weight: 600;
    cursor: pointer;
    padding: 0.35rem 0.45rem;
    border-radius: var(--oc-radius-sm);
}
.oc-todos-bulkbar-link:hover:not(:disabled) {
    background: var(--oc-orange-100, #ffedd5);
    color: var(--oc-orange-700, #c2410c);
}

/* Square multi-select checkbox column (page rows only - the in-meeting
   to-do list keeps the original 4-column grid). */
.oc-todos-colhead.has-select,
.oc-todos-row.has-select {
    grid-template-columns: 24px 36px 1fr 110px 56px;
}

.oc-todos-colhead.has-select .oc-todos-colhead-title { grid-column: 3 / 4; }
.oc-todos-colhead.has-select .oc-todos-colhead-due   { grid-column: 4 / 5; }
.oc-todos-colhead.has-select .oc-todos-colhead-owner { grid-column: 5 / 6; }

.oc-todos-selbox {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    cursor: pointer;
}

.oc-todos-selbox input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--oc-gray-600);
    cursor: pointer;
}

/* Owner column on a private row - there is no assignee to show. */
.oc-todos-owner--dash {
    color: var(--oc-gray-400);
    font-weight: 600;
}

/* "Private" chip on merged (All) rows. */
.oc-todos-privbadge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--oc-gray-100);
    color: var(--oc-gray-600);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 11px;
    flex: 0 0 auto;
}

/* =========================================================================
   13. Headlines page - clickable KPI filters, inline edit, undo snackbar
       (WS-F lists UX, 2026-06-12)
   ========================================================================= */

/* KPI tiles that act as filters (buttons, so reset button chrome). */
.oc-hl-kpi--btn {
    appearance: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    width: 100%;
}

.oc-hl-kpi--btn.is-selected {
    border-color: var(--oc-orange-400, #fb923c);
    box-shadow: 0 0 0 2px var(--oc-orange-100, #ffedd5);
}
.oc-hl-kpi--btn.is-selected::before { opacity: 1; }

/* When a category KPI tile focuses one column, let it use the full width. */
.oc-hl-grid--single { grid-template-columns: minmax(0, 1fr); }

/* Inline headline edit row. */
.oc-hl-edit {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.oc-hl-edit-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid var(--oc-orange-300, #fdba74);
    border-radius: var(--oc-radius-sm);
    padding: 0.3rem 0.55rem;
    font-size: var(--oc-fs-body);
    color: var(--oc-gray-900);
    background: var(--oc-surface);
}
.oc-hl-edit-input:focus {
    outline: none;
    border-color: var(--oc-orange);
    box-shadow: 0 0 0 2px var(--oc-orange-100, #ffedd5);
}

.oc-hl-iconbtn--save { color: var(--oc-success, #16a34a); }
.oc-hl-iconbtn--save:disabled { opacity: 0.5; cursor: default; }

/* Undo-archive snackbar (bottom center, 5s lifetime). */
.oc-hl-undo {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 1080;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--oc-gray-900);
    color: #ffffff;
    border-radius: var(--oc-radius-md);
    padding: 0.6rem 1rem;
    font-size: var(--oc-fs-sm);
    box-shadow: var(--oc-shadow-lg, 0 10px 30px rgba(0,0,0,0.25));
}

.oc-hl-undo i { color: var(--oc-orange-300, #fdba74); }

.oc-hl-undo-btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--oc-orange-300, #fdba74);
    font-weight: 700;
    font-size: var(--oc-fs-sm);
    cursor: pointer;
    padding: 0.1rem 0.3rem;
    border-radius: var(--oc-radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.oc-hl-undo-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* =====================================================================
   Meeting prep card (WS-N) - expandable readiness packet on the
   Meetings landing page. See MeetingPrepCard.razor.
   ===================================================================== */

.oc-meeting-prep {
    margin: 1rem 0;
    border: 1px solid var(--oc-gray-200);
    border-radius: var(--oc-radius-md, 10px);
    background: var(--oc-surface);
}

.oc-meeting-prep__toggle {
    appearance: none;
    border: 0;
    background: transparent;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1rem;
    cursor: pointer;
    font-size: var(--oc-fs-sm);
    font-weight: 600;
    color: var(--oc-gray-800);
    text-align: left;
}

.oc-meeting-prep__toggle i { color: var(--oc-orange-500, #f97316); }

.oc-meeting-prep__title { flex: 0 0 auto; }

.oc-meeting-prep__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--oc-orange-100, #ffedd5);
    color: var(--oc-orange-700, #c2410c);
    font-size: var(--oc-fs-xs, 0.75rem);
    font-weight: 700;
}

.oc-meeting-prep__clear {
    color: var(--oc-green-600, #16a34a);
    font-size: var(--oc-fs-xs, 0.75rem);
    font-weight: 600;
}
.oc-meeting-prep__clear i { color: inherit; }

.oc-meeting-prep__chevron {
    margin-left: auto;
    color: var(--oc-gray-400);
}

.oc-meeting-prep__body {
    border-top: 1px solid var(--oc-gray-100);
    padding: 0.8rem 1rem 1rem;
}

.oc-meeting-prep__allclear {
    margin: 0;
    color: var(--oc-green-600, #16a34a);
    font-size: var(--oc-fs-sm);
}

.oc-meeting-prep__groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.oc-meeting-prep__group h4 {
    font-size: var(--oc-fs-sm);
    font-weight: 700;
    margin: 0 0 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.oc-meeting-prep__group h4 i { color: var(--oc-orange-500, #f97316); }

.oc-meeting-prep__group h4 span {
    color: var(--oc-gray-500);
    font-weight: 600;
}

.oc-meeting-prep__group ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: var(--oc-fs-sm);
}

/* =====================================================================
   Incoming cascades card (WS-N) - read-only cascading messages from
   other teams shown in the Headlines section of a live meeting.
   ===================================================================== */

.oc-meeting-cascades-in {
    grid-column: 1 / -1;
    margin-bottom: 1rem;
    border: 1px solid var(--oc-gray-200);
    border-left: 3px solid var(--oc-orange-500, #f97316);
    border-radius: var(--oc-radius-md, 10px);
    background: var(--oc-orange-50, #fff7ed);
    padding: 0.7rem 1rem;
}

.oc-meeting-cascades-in h3 {
    font-size: var(--oc-fs-sm);
    font-weight: 700;
    margin: 0 0 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.oc-meeting-cascades-in h3 i { color: var(--oc-orange-500, #f97316); }

.oc-meeting-cascades-in ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: var(--oc-fs-sm);
}

/* Recap email block on the Conclude section of a finished meeting (WS-N). */
.oc-section-conclude__email-recap {
    margin-top: 1rem;
    border: 1px solid var(--oc-gray-200);
    border-radius: var(--oc-radius-md, 10px);
    padding: 0.8rem 1rem;
    background: var(--oc-gray-50);
}

.oc-section-conclude__email-recap h3 {
    font-size: var(--oc-fs-sm);
    font-weight: 700;
    margin: 0 0 0.4rem;
}

.oc-section-conclude__email-body {
    font-size: var(--oc-fs-sm);
    color: var(--oc-gray-700);
}

/* Saved James Meme on a finished meeting's recap. */
.oc-section-conclude__meme {
    margin-top: 1rem;
    border: 1px solid var(--oc-gray-200);
    border-radius: var(--oc-radius-md, 10px);
    padding: 0.8rem 1rem;
    background: var(--oc-gray-50);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
}
.oc-section-conclude__meme h3 {
    font-size: var(--oc-fs-sm);
    font-weight: 700;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.oc-section-conclude__meme h3 i { color: var(--oc-orange, #ee572c); }
.oc-section-conclude__meme-img {
    width: 100%;
    max-width: 320px;
    height: auto;
    display: block;
    border-radius: 10px;
    background: var(--oc-gray-100);
    box-shadow: var(--oc-shadow-md);
}