/* The Spotlight (#708, #709): the shared Standard and Minimized markup in
   hub/partials/_spotlight.html, the poll tally, and the Admin Tools > Spotlight page.
   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);
}

.pl-spotlight__question {
    margin: 0 1.5rem 0.5rem 0;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
}

.pl-spotlight__choices {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.pl-spotlight__choice {
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--hub-input-border);
    border-radius: 8px;
    background-color: var(--hub-surface);
    color: var(--hub-text);
    font-family: var(--font-body);
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
}

.pl-spotlight__choice:hover:not(:disabled),
.pl-spotlight__choice:focus-visible {
    border-color: var(--color-tuscan-yellow);
}

.pl-spotlight__choice:disabled {
    cursor: default;
}

.pl-spotlight__past {
    align-self: flex-start;
    font-size: 0.8rem;
    color: var(--hub-text-muted);
}

.pl-spotlight__meeting {
    padding-top: 0.75rem;
    border-top: 1px solid var(--hub-input-border);
}

.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);
}

.pl-spotlight__details {
    align-self: flex-start;
}

/* 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;
}

/* ---- A poll's tally ---- */
.pl-poll-results {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pl-poll-results__label {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
}

.pl-poll-results__count {
    flex-shrink: 0;
    color: var(--hub-text-muted);
    font-size: 0.8125rem;
}

.pl-poll-results__bar {
    display: block;
    width: 100%;
    height: 8px;
    border: none;
    border-radius: 999px;
    background-color: var(--hub-surface);
    appearance: none;
    overflow: hidden;
}

.pl-poll-results__bar::-webkit-progress-bar {
    background-color: var(--hub-surface);
}

.pl-poll-results__bar::-webkit-progress-value {
    background-color: var(--color-tuscan-yellow);
    border-radius: 999px;
}

.pl-poll-results__bar::-moz-progress-bar {
    background-color: var(--color-tuscan-yellow);
    border-radius: 999px;
}

/* ---- 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__question {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--hub-text);
}

.pl-spotlight-admin__meta {
    margin: -0.5rem 0 0;
    font-size: 0.875rem;
}

.pl-spotlight-admin__choices {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    border: none;
}

/* The legend and hint match form_field.html's label and hint beside it. */
.pl-spotlight-admin__choices legend {
    margin-bottom: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--hub-text-muted);
}

.pl-spotlight-admin__choices small {
    font-size: 0.8125rem;
}

.pl-spotlight-admin__choice {
    display: flex;
    gap: 0.5rem;
    width: 100%;
    max-width: 520px;
}

.pl-spotlight-admin__input {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--hub-input-border);
    border-radius: 6px;
    background-color: var(--hub-input-bg);
    color: var(--hub-text);
    font-family: var(--font-body);
    font-size: 0.9rem;
}

.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;
}

/* ---- Member polls: /polls/ and the poll card the Spotlight reuses (#708 part 2) ---- */
.pl-poll-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 720px;
}

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

.pl-poll-card--open {
    border-color: var(--color-tuscan-yellow);
}

.pl-poll-card__question {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--hub-text);
}

.pl-poll-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    margin: 0.375rem 0 0;
    font-size: 0.8125rem;
    color: var(--hub-text-muted);
}

.pl-poll-card__status {
    padding: 0.0625rem 0.5rem;
    border-radius: 999px;
    background-color: rgba(238, 180, 75, 0.18);
    color: var(--hub-link);
    font-weight: 700;
}

.pl-poll-card__choices {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pl-poll-card__choice {
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--hub-input-border);
    border-radius: 8px;
    background-color: var(--hub-surface);
    color: var(--hub-text);
    font-family: var(--font-body);
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
}

.pl-poll-card__choice:hover,
.pl-poll-card__choice:focus-visible {
    border-color: var(--color-tuscan-yellow);
}

.pl-poll-card__hint {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    color: var(--hub-text-muted);
}

.pl-poll-results__row--mine .pl-poll-results__label {
    font-weight: 600;
}

.pl-poll-results__mine {
    display: inline-block;
    margin-left: 0.375rem;
    padding: 0 0.4375rem;
    border-radius: 999px;
    background-color: rgba(61, 139, 212, 0.16);
    color: var(--hub-blue);
    font-size: 0.6875rem;
    font-weight: 700;
    vertical-align: 0.1em;
}

.pl-poll-list__pages {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

/* ---- 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);
}

/* The poll card's compact copy inside Standard. */
.pl-poll-card--spotlight {
    gap: 0.5rem;
    padding: 0;
    border: none;
    background: none;
}

.pl-poll-card--spotlight .pl-poll-card__question {
    margin-right: 1.5rem;
    font-size: 0.95rem;
}

.pl-poll-card--spotlight .pl-poll-card__choice {
    padding: 0.45rem 0.75rem;
    font-size: 0.85rem;
}

.pl-poll-card--spotlight .pl-poll-results__label {
    font-size: 0.8125rem;
}

.pl-poll-card--spotlight .pl-poll-results__count {
    font-size: 0.75rem;
}

.pl-poll-card--panel {
    padding: 1rem;
}

/* 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__link {
    align-self: flex-start;
    font-size: 0.875rem;
    color: var(--hub-link);
}

.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;
}

/* In the narrow sidebar, the count sits under the answer instead of beside it. */
.pl-poll-card--spotlight .pl-poll-results__label {
    flex-direction: column;
    gap: 0.125rem;
}

.pl-poll-results__mine {
    white-space: nowrap;
}

/* 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;
}

/* No open poll: the newest update in the poll's place (#709). */
.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) ---- */
/* Standard: the Virtual pill and Details share one row; Details keeps the right. */
.pl-spotlight__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.pl-spotlight__actions .pl-spotlight__details {
    margin-left: auto;
}

/* 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;
}

/* Past polls reads as a link: the accent colour, an arrow, underline on hover, a real target. */
.pl-spotlight__past,
.pl-spotlight-panel__link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    align-self: flex-start;
    min-height: 32px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--hub-link);
    text-decoration: none;
}

.pl-spotlight__past:hover,
.pl-spotlight__past:focus-visible,
.pl-spotlight-panel__link:hover,
.pl-spotlight-panel__link:focus-visible {
    text-decoration: underline;
}

/* Quiet: no poll 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.75rem;
    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);
}