/* Notifications (ADR-049): the header bell's count and panel, the Notifications page, the project's evidence card
   and the Operations rule ladder. Severity colours come from each severity's design token, set inline. */

.icon-button .badge-count {
    position: absolute; bottom: 5px; right: 5px;
    width: 14px; height: 14px; padding: 0;
    border-radius: 50%;
    background: var(--color-danger);
    color: #fff;
    font-size: 8px;
    font-weight: var(--font-weight-semibold);
    line-height: 14px;
    text-align: center;
    border: 1.5px solid var(--color-surface);
    box-sizing: content-box;
}

.notification-menu { min-width: 320px; max-width: min(380px, calc(100vw - 32px)); }
.notification-menu__empty { margin: 0; padding: var(--spacing-2) var(--spacing-3); font-size: var(--font-size-sm); color: var(--color-text-muted); }
.notification-menu__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--spacing-1) var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    border-bottom: 1px solid var(--color-border);
}
.notification-menu__icon { display: grid; place-items: center; padding-top: 2px; }
.notification-menu__title { font-size: var(--font-size-sm); color: var(--color-text); }
.notification-menu__title:hover { text-decoration: underline; }
.notification-menu__item form { grid-column: 2; }
.notification-menu__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-2); padding-top: var(--spacing-1); }

.btn--compact { padding: 2px var(--spacing-2); font-size: var(--font-size-xs); min-height: 0; }

/* The Notifications page and the project card */
.notification-list { list-style: none; margin: 0; padding: 0; }
.notification-list__item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--spacing-3);
    align-items: start;
    padding: var(--spacing-3) 0;
    border-bottom: 1px solid var(--color-border);
}
.notification-list__item:last-child { border-bottom: 0; }
.notification-list__item.is-seen { opacity: 0.7; }
.notification-list__title { font-weight: var(--font-weight-semibold); color: var(--color-text); }
.notification-list__meta { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: 2px; }
.notification-list__text { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-top: var(--spacing-1); }

.notification-seen { font-size: var(--font-size-xs); color: var(--color-success); white-space: nowrap; }
.notification-unseen { font-size: var(--font-size-xs); color: var(--color-danger); white-space: nowrap; }

/* The project page's evidence card (side column): one line per person, wrapping cleanly when narrow */
.project-notifications { list-style: none; margin: var(--spacing-3) 0 0; padding: 0; }
.project-notifications__item { padding: var(--spacing-3) 0; border-top: 1px solid var(--color-border); }
.project-notifications__item:first-child, .project-notifications__item.is-page-first { border-top: 0; padding-top: 0; }
/* The project-page modal pages the list in the browser (projectNotifications.js): items off the page are hidden. */
.project-notifications__item[hidden] { display: none; }
.project-notifications__head { display: flex; align-items: flex-start; gap: var(--spacing-2); }
.project-notifications__icon { display: grid; place-items: center; padding-top: 2px; }
.project-notifications__title { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text); }
.project-notifications__meta { font-size: var(--font-size-xs); color: var(--color-text-muted); margin: 2px 0 var(--spacing-2); }
.project-notifications__people { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spacing-2); }
.project-notifications__people li { display: flex; flex-direction: column; gap: 1px; font-size: var(--font-size-sm); }
.project-notifications__who { color: var(--color-text); }
.project-notifications__who strong { font-weight: var(--font-weight-semibold); }
.project-notifications__when { font-size: var(--font-size-xs); color: var(--color-text-secondary); white-space: nowrap; }

/* Operations: the ladder grid */
.notification-ladder td, .notification-ladder th { vertical-align: middle; }
.notification-ladder input[type="number"] { width: 5.5rem; }
.notification-ladder .num { text-align: right; }

/* Answering an outstanding action (ADR-059): the latest answer, the resolution, and the respond form on the Notifications page */
.notification-list__answer { font-size: var(--font-size-xs); color: var(--color-text-secondary); margin-top: var(--spacing-1); }
.notification-list__resolved { font-size: var(--font-size-xs); color: var(--color-success); margin-top: var(--spacing-1); }
.notification-respond {
    margin-top: var(--spacing-2);
    padding-top: var(--spacing-2);
    border-top: 1px dashed var(--color-border);
}
.notification-respond > summary { list-style: none; cursor: pointer; width: fit-content; }
.notification-respond > summary::-webkit-details-marker { display: none; }
.notification-respond__choices { display: grid; gap: var(--spacing-2); margin-top: var(--spacing-2); }
/* One small form per answer: what it needs on the left, the button on the right. */
.notification-respond__choice { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--spacing-2); align-items: center; }
@media (max-width: 600px) {
    .notification-respond__choice { grid-template-columns: 1fr; }
}

/* Decisions ("not needed", with a reason and a name): the fee-letter card and the sub-contractor rows */
.decision__state { font-size: var(--font-size-sm); }
.decision__reason { font-size: var(--font-size-xs); color: var(--color-text-secondary); font-style: italic; }
.decision__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--spacing-2); align-items: center; margin-top: var(--spacing-2); }
.decision__toggle > summary { list-style: none; cursor: pointer; width: fit-content; }
.decision__toggle > summary::-webkit-details-marker { display: none; }
.decision__history { list-style: none; margin: var(--spacing-2) 0 0; padding: var(--spacing-2) 0 0 var(--spacing-3); border-left: 2px solid var(--color-border); display: grid; gap: var(--spacing-1); font-size: var(--font-size-xs); color: var(--color-text-secondary); }

/* The project card: answers under the people, and the resolution line */
.project-notifications__item.is-resolved { opacity: 0.75; }
.project-notifications__answers { list-style: none; margin: var(--spacing-2) 0 0; padding: var(--spacing-2) 0 0 var(--spacing-3); border-left: 2px solid var(--color-border); display: grid; gap: var(--spacing-1); }
.project-notifications__answers li { display: flex; flex-direction: column; gap: 1px; font-size: var(--font-size-sm); }
.project-notifications__note { font-size: var(--font-size-xs); color: var(--color-text-secondary); font-style: italic; }
.project-notifications__resolved { font-size: var(--font-size-xs); color: var(--color-text-secondary); margin-top: var(--spacing-2); }

/* The Managing Director's Actionable Insights page (ADR-059 rule 3) */
.insights-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-3); margin-bottom: var(--spacing-4); }
.insights-toolbar .segmented__btn { text-decoration: none; display: inline-flex; align-items: center; gap: var(--spacing-1-5); }
.insights-toolbar__count { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.insights-toolbar__actions { display: flex; gap: var(--spacing-2); }
.insights-pager { padding-inline: 0; }
.escalation { margin-bottom: var(--spacing-4); }
/* A card is a disclosure: the head is its summary, the table opens beneath it. */
.escalation__head { display: grid; grid-template-columns: 1fr auto auto; align-items: start; gap: var(--spacing-2) var(--spacing-4); cursor: pointer; list-style: none; }
.escalation__head::-webkit-details-marker { display: none; }
.escalation__head::marker { content: ""; }
.escalation__heading { display: grid; gap: var(--spacing-2); min-width: 0; }
.escalation__chips { display: flex; flex-wrap: wrap; gap: var(--spacing-1-5); }
.escalation__context { font-size: var(--font-size-sm); text-align: right; }
.escalation__chevron { display: grid; place-items: center; color: var(--color-text-muted); transition: transform 0.15s ease; }
.escalation[open] .escalation__chevron { transform: rotate(180deg); }
.escalation:not([open]) .escalation__head { border-bottom: 0; }
.escalation__table td { vertical-align: top; }
.escalation__table tr.is-paused { opacity: 0.8; }
.escalation__icon { display: grid; place-items: center; padding-top: 2px; }
.escalation__title { font-weight: var(--font-weight-semibold); color: var(--color-text); }
.escalation__meta { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: 2px; }
.escalation__people { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: var(--font-size-sm); }
/* Told and Seen list the same people in the same order, one line each, so the two columns read across. */
.escalation__people li { min-height: 1.5em; white-space: nowrap; }
.escalation__answer { font-size: var(--font-size-sm); }
.escalation__note { font-size: var(--font-size-xs); color: var(--color-text-secondary); font-style: italic; margin-top: 2px; }
.escalation__paused { font-size: var(--font-size-xs); color: var(--color-warning); margin-top: 2px; }

@media (max-width: 640px) {
    .escalation__head { grid-template-columns: 1fr auto; }
    .escalation__context { grid-column: 1; text-align: left; }
    .escalation__chevron { grid-row: 1; grid-column: 2; }
    .notification-list__item { grid-template-columns: auto 1fr; }
    .notification-list__item > form { grid-column: 2; }
}

/* Create project: the reason appears once "Fee letter not needed" is ticked */
.fee-letter-not-needed__reason { display: none; margin-top: var(--spacing-2); }
.fee-letter-not-needed:has(input[type="checkbox"]:checked) .fee-letter-not-needed__reason { display: block; }