/* The Spotlight (#708, #709): the shared Standard and Minimized markup in
   hub/partials/_spotlight.html with its announcements (#890), and the Admin Tools > Spotlight
   page. Polls and their tally were removed in #890. Theme tokens only. */

/* ---- The Spotlight itself ---- */
.pl-spotlight {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 280px;
    font-family: var(--font-body);
    color: var(--hub-text);
}

.pl-spotlight--standard {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 12px;
    background-color: var(--hub-card-bg);
    border: 1px solid var(--hub-input-border);
}

.pl-spotlight__minimize {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--hub-text-muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.pl-spotlight__minimize:hover,
.pl-spotlight__minimize:focus-visible {
    background-color: var(--hub-surface);
    color: var(--hub-text);
}

.pl-spotlight__eyebrow {
    margin: 0 0 0.25rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hub-link);
}

/* The meeting under the announcements takes a rule above it; alone, it leads the card. */
.pl-spotlight__ann + .pl-spotlight__meeting {
    padding-top: 0.75rem;
    border-top: 1px solid var(--hub-input-border);
}

/* Every eyebrow in Standard stays clear of the minimize button in the corner. */
.pl-spotlight--standard .pl-spotlight__eyebrow {
    margin-right: 1.75rem;
}

.pl-spotlight__when {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.875rem;
}

.pl-spotlight__virtual,
.pl-spotlight__pill {
    display: inline-flex;
    align-items: center;
    padding: 0.0625rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
}

.pl-spotlight__virtual {
    background-color: rgba(61, 139, 212, 0.16);
    color: var(--hub-blue);
}

.pl-spotlight__pill {
    background-color: rgba(238, 180, 75, 0.18);
    color: var(--hub-link);
}

/* Minimized: two faded lines that brighten on hover or focus. */
.pl-spotlight__min {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid transparent;
    border-radius: 10px;
    background: none;
    color: var(--hub-text);
    font-family: var(--font-body);
    text-align: left;
    opacity: 0.6;
    cursor: pointer;
    transition: opacity 0.15s ease, border-color 0.15s ease;
}

.pl-spotlight__min:hover,
.pl-spotlight__min:focus-visible {
    opacity: 1;
    border-color: var(--hub-input-border);
}

.pl-spotlight__line {
    overflow: hidden;
    font-size: 0.8125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pl-spotlight__line--second {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    overflow: visible;
    color: var(--hub-text-muted);
}

/* The meeting name gives way; the date pill never does. */
.pl-spotlight__line--second > [data-spotlight-second] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pl-spotlight__line--second > .pl-spotlight__pill {
    flex-shrink: 0;
}

/* ---- Admin Tools > Spotlight ---- */
.pl-spotlight-admin {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.pl-spotlight-admin__title {
    margin: 0;
    font-size: 1rem;
    color: var(--hub-text);
}

.pl-spotlight-admin__split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 2rem;
    align-items: start;
}

.pl-spotlight-admin__form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pl-spotlight-admin__save {
    margin-top: 0.5rem;
}

.pl-spotlight-admin__preview {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    border-radius: 12px;
    background-color: var(--hub-sidebar-bg);
    border: 1px dashed var(--hub-input-border);
}

.pl-spotlight-admin__label {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--hub-text-muted);
}

.pl-spotlight-admin__errors {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background-color: rgba(220, 38, 38, 0.12);
    color: var(--hub-text);
    font-size: 0.875rem;
}

.pl-spotlight-admin__errors p {
    margin: 0;
}

@media (max-width: 768px) {
    .pl-spotlight-admin__split {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* A button directly in a card keeps its own width rather than the column's. */
.pl-spotlight-admin > .pl-btn {
    align-self: flex-start;
}

/* ---- The member Spotlight (#709) ---- */
/* Standard or Minimized follows <html data-spotlight-min>, set before first paint and kept in
   step by static/js/spotlight.js; no inline display on either block. */
html[data-spotlight-min] .pl-spotlight-live .pl-spotlight--standard,
html:not([data-spotlight-min]) .pl-spotlight-live .pl-spotlight--minimized {
    display: none;
}

.hub-sidebar__spotlight {
    padding: 0 0.75rem 0.75rem;
}

.hub-sidebar__spotlight .pl-spotlight {
    max-width: none;
}

.pl-spotlight-live .pl-spotlight__min {
    position: relative;
}

.pl-spotlight__dot {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-tuscan-yellow);
    box-shadow: 0 0 0 3px rgba(238, 180, 75, 0.25);
}

/* Phones: the Spotlight sits at the top of Home, since the sidebar starts closed. */
.pl-spotlight-home {
    display: none;
}

@media (max-width: 768px) {
    .pl-spotlight-home {
        display: block;
        margin-bottom: 1.25rem;
    }

    .pl-spotlight-home .pl-spotlight {
        max-width: none;
    }
}

/* The Expanded panel. */
.pl-spotlight-panel__main,
.pl-spotlight-panel__changelog {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.pl-spotlight-panel__section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pl-spotlight-panel__section + .pl-spotlight-panel__section {
    padding-top: 1.25rem;
    border-top: 1px solid var(--hub-input-border);
}

.pl-spotlight-panel__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    color: var(--hub-text);
}

.pl-spotlight-panel__text {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--hub-text-muted);
}

.pl-spotlight-panel__actions {
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

.pl-spotlight-panel__version {
    align-self: flex-start;
    padding: 0;
    border: none;
    background: none;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--hub-text-muted);
    cursor: pointer;
}

.pl-spotlight-panel__version:hover,
.pl-spotlight-panel__version:focus-visible {
    color: var(--hub-text);
    text-decoration: underline;
}

.pl-spotlight-panel__back {
    align-self: flex-start;
}

/* Minimized in the narrow sidebar: room for the dot, and the date pill drops under the
   meeting name rather than cutting it short. */
.pl-spotlight-live .pl-spotlight__min {
    padding-right: 1.5rem;
}

.pl-spotlight-live .pl-spotlight__line--second {
    flex-wrap: wrap;
    row-gap: 0.25rem;
}

/* The newest update, in Expanded when no announcement is live (#709, #890). */
.pl-spotlight__update {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.pl-spotlight__update-title {
    margin-right: 1.5rem;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--hub-text);
    text-decoration: none;
}

.pl-spotlight__update-title:hover,
.pl-spotlight__update-title:focus-visible {
    color: var(--hub-link);
    text-decoration: underline;
}

.pl-spotlight__update-date {
    margin: 0;
    font-size: 0.8rem;
    color: var(--hub-text-muted);
}

.pl-spotlight-admin__states {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pl-spotlight-admin__hidden-note {
    margin: 0;
    font-size: 0.85rem;
    color: var(--hub-text-muted);
}

/* ---- Felix's visual fixes (#717) ---- */
/* Minimized: the dot sits left of the two lines, centred on the first. The slot keeps its
   width with no dot, so the text never jumps when the dot clears. */
.pl-spotlight-live .pl-spotlight__min {
    flex-direction: row;
    align-items: flex-start;
    gap: 0.5rem;
    padding-right: 0.75rem;
}

.pl-spotlight__dot-slot {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    width: 8px;
    height: calc(0.8125rem * 1.5);
}

.pl-spotlight-live .pl-spotlight__dot {
    position: static;
}

.pl-spotlight__min-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

/* Quiet: no announcement and no meeting. The version pill that sat under the logo before the
   Spotlight with the newest update's date under it, and an outlined Details on the right. */
.pl-spotlight--quiet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.75rem 0.75rem 0.875rem;
    border-radius: 10px;
    background-color: var(--hub-card-bg);
}

.pl-spotlight__quiet-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3125rem;
    min-width: 0;
}

.pl-spotlight__quiet-date {
    font-size: 0.6rem;
    color: var(--hub-text-muted);
    white-space: nowrap;
}

.pl-spotlight__quiet-details {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.125rem;
    min-height: 30px;
    padding: 0.1875rem 0.375rem 0.1875rem 0.625rem;
    border: 1px solid rgba(238, 180, 75, 0.35);
    border-radius: 999px;
    background: none;
    color: var(--hub-link);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pl-spotlight__quiet-details:hover,
.pl-spotlight__quiet-details:focus-visible {
    border-color: var(--color-tuscan-yellow);
    background-color: rgba(238, 180, 75, 0.15);
}

/* In the sidebar, Quiet's card sits inside the logo block, above its divider: the logo gives
   up its divider and bottom padding, and the card's wrapper takes both. */
.pl-brand--quiet {
    padding-bottom: 0.75rem;
    border-bottom: none;
}

.hub-sidebar__spotlight--quiet {
    padding: 0 0.75rem 1rem;
    border-bottom: 1px solid var(--hub-sidebar-border);
}

/* ---- Announcements in the Spotlight (#890) ---- */
/* The announcement's own rich text, wherever it shows: the Spotlight, the Home banner and the admin rows. */
.pl-ann-body p + p {
    margin-top: 0.5rem;
}

.pl-ann-body strong {
    font-weight: 700;
}

.pl-ann-body a {
    color: var(--hub-link);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pl-spotlight__ann-body {
    color: var(--hub-text);
    font-size: 0.875rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

/* With two or more, one compact row under the text: previous, "2 of 3", next, and the pause button on the right,
   then the thin time bar. The controls partial's overlay and nav give their buttons to the stage's grid. */
.pl-spotlight__ann .pl-rotator__stage {
    display: grid;
    grid-template-columns: auto auto auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 0.25rem;
}

.pl-spotlight__ann .pl-rotator__slides {
    grid-column: 1 / -1;
}

.pl-spotlight__ann .pl-rotator__overlay,
.pl-spotlight__ann .pl-rotator__nav {
    display: contents;
}

.pl-spotlight__ann .pl-rotator__arrow,
.pl-spotlight__ann .pl-rotator__count,
.pl-spotlight__ann .pl-rotator__pause {
    grid-row: 2;
    margin-top: 0.625rem;
}

.pl-spotlight__ann .pl-rotator__arrow {
    position: static;
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid var(--hub-border-strong);
    background: transparent;
    color: var(--hub-text-muted);
    opacity: 1;
    transform: none;
}

.pl-spotlight__ann .pl-rotator__arrow:hover {
    background: var(--hub-elevated);
    color: var(--hub-text);
}

.pl-spotlight__ann .pl-rotator__arrow svg {
    width: 14px;
    height: 14px;
}

.pl-spotlight__ann .pl-rotator__arrow--prev {
    grid-column: 1;
}

.pl-spotlight__ann .pl-rotator__count {
    grid-column: 2;
    min-width: 3rem;
    color: var(--hub-text-muted);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
    white-space: nowrap;
}

.pl-spotlight__ann .pl-rotator__arrow--next {
    grid-column: 3;
}

.pl-spotlight__ann .pl-rotator__pause {
    grid-column: 5;
}

.pl-spotlight__ann .pl-rotator__track {
    position: static;
    grid-column: 1 / -1;
    grid-row: 3;
    height: 2px;
    margin-top: 0.625rem;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-tuscan-yellow) 20%, transparent);
}

/* Standard's foot: the version pill and "Updated X" on the left, Details on the right, as in Quiet. */
.pl-spotlight__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--hub-input-border);
}

/* Expanded: every live announcement in full, in order. */
.pl-spotlight-panel__announcements {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pl-spotlight-panel__announcement {
    padding: 0.75rem 1rem;
    border-left: 3px solid var(--color-tuscan-yellow);
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-tuscan-yellow) 8%, var(--hub-card-bg));
    color: var(--hub-text);
    font-size: 0.9375rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}