/* The personal timeline (Pages/Timeline) and the markers of its event types (also in the Admin list of the types): a
   horizontal line of the days of a period, each with its heading (the day of the week and the date: a click adds an event
   that day), its tick on the line and its markers, stacked under it; the days go on the next row when they do not fit.
   Today is green, the weekend days are shaded. The colour of a marker is its type's (timeline-marker--{color}); a scheduled deploy is hollow, a completed one
   filled with its tick. The form shows the fields of the type chosen with :has(), without JavaScript. */

.timeline-marker {
    --marker: var(--wn-timeline-gray);
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 1.9rem;
    height: 1.9rem;
    border: 2px solid var(--marker);
    border-radius: 50%;
    color: var(--wn-on-primary);
    background: var(--marker);
}
.timeline-marker svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.timeline-marker--blue { --marker: var(--wn-timeline-blue); }
.timeline-marker--purple { --marker: var(--wn-timeline-purple); }
.timeline-marker--orange { --marker: var(--wn-timeline-orange); }
.timeline-marker--yellow { --marker: var(--wn-timeline-yellow); }
.timeline-marker--green { --marker: var(--wn-timeline-green); }
.timeline-marker--red { --marker: var(--wn-timeline-red); }
.timeline-marker--teal { --marker: var(--wn-timeline-teal); }
.timeline-marker--gray { --marker: var(--wn-timeline-gray); }
/* A scheduled deploy: a hollow diamond, not done yet. */
.timeline-marker--scheduled { border-radius: 3px; transform: rotate(45deg) scale(.85); color: var(--marker); background: var(--wn-notebook-paper); }
.timeline-marker--scheduled svg { transform: rotate(-45deg); }
/* A completed deploy: filled, with a ring around it. */
.timeline-marker--completed { box-shadow: 0 0 0 2px var(--wn-notebook-paper), 0 0 0 4px var(--marker); }

/* The page: the context switch, then the panel of the period. Its overlays are in the page closed, ready for timeline.js
   (.modal would show them otherwise). */
.timeline-page dialog.modal:not([open]) { display: none; }
.timeline-page { display: grid; gap: 1rem; min-width: 0; }
.timeline-context { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.timeline-panel { min-width: 0; }
/* The timeline takes about 90% of the window width (the user's request of 2026-10-14), not the width of the other pages:
   the main area and the panel of the period drop their maximum widths on this page only. */
.site-main:has(.timeline-page) { width: 90%; max-width: none; padding-inline: 0; }
.timeline-page .timeline-panel { max-width: none; }
.timeline-panel[aria-busy="true"] { opacity: .7; transition: opacity var(--wn-motion); }

.timeline-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.25rem; margin-bottom: 1.25rem; }
.timeline-heading h1 { margin: 0; }
.timeline-heading__range { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .25rem 0 0; color: var(--wn-muted); font-variant-numeric: tabular-nums; }
/* Where the period is: the current one green, the previous and the next one outlined. */
.timeline-heading__position { padding: .1rem .5rem; border: 1px solid transparent; border-radius: 999px; font-size: .85rem; font-weight: 600; }
.timeline-heading__position--current { color: var(--wn-primary); background: var(--wn-success-bg); }
.timeline-heading__position--previous,
.timeline-heading__position--next { color: var(--wn-text); border-color: var(--wn-input-border); background: var(--wn-surface); }
.timeline-heading__nav { display: flex; flex-wrap: wrap; gap: .5rem; }
.timeline-heading__nav [aria-current="true"] { border-color: var(--wn-primary); }
/* The windows of time: a segmented choice, the current one filled. */
.timeline-heading__windows { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--wn-input-border); border-radius: var(--wn-radius); overflow: hidden; }
.timeline-window { display: inline-flex; align-items: center; min-height: 44px; padding: .4rem .85rem; color: var(--wn-text); text-decoration: none; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.timeline-window + .timeline-window { border-inline-start: 1px solid var(--wn-input-border); }
.timeline-window:hover { background: var(--wn-highlight); }
.timeline-window:focus-visible { outline: 2px solid var(--wn-primary); outline-offset: -3px; }
.timeline-window--current, .timeline-window--current:hover { color: var(--wn-on-primary); background: var(--wn-primary); }

/* The line: one column per day, never scrolled sideways: when the days do not fit the width of the page, they go on the
   next row (the user's request of 2026-10-15); each day draws its own piece of the line, so every row has one. */
.timeline-scroll { padding-bottom: .5rem; }
.timeline-line {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    row-gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.timeline-day { position: relative; display: grid; grid-template-rows: auto 1.25rem auto; justify-items: center; align-content: start; min-height: 11rem; padding: 0 .2rem .75rem; border-inline-start: 1px dashed var(--wn-notebook-rule); cursor: copy; }
/* The piece of the line of a day, through its tick. */
.timeline-day::before { content: ""; position: absolute; inset-inline: 0; top: 3.6rem; border-top: 3px solid var(--wn-border); }
/* Saturday and Sunday stand out (the user's request of 2026-10-14): a darker shade over the whole column, a band on top
   and the day's heading in the muted colour, its weekday in bold. */
.timeline-day--weekend { background: color-mix(in srgb, var(--wn-timeline-gray) 16%, transparent); box-shadow: inset 0 3px 0 color-mix(in srgb, var(--wn-timeline-gray) 55%, transparent); }
.timeline-day--weekend .timeline-day__head { color: var(--wn-muted); }
.timeline-day--weekend .timeline-day__weekday { font-weight: 700; }
.timeline-day__head { display: grid; justify-items: center; gap: .1rem; min-width: 44px; min-height: 44px; padding: .35rem .4rem; border-radius: var(--wn-radius); color: var(--wn-text); text-decoration: none; font-variant-numeric: tabular-nums; }
.timeline-day__head:hover { background: var(--wn-highlight); }
.timeline-day__head:focus-visible { outline: 2px solid var(--wn-primary); outline-offset: 2px; }
.timeline-day__weekday { color: var(--wn-muted); font-size: .8rem; text-transform: capitalize; }
.timeline-day__date { font-weight: 650; }
.timeline-day__tick { position: relative; z-index: 1; width: .7rem; height: .7rem; margin-top: .25rem; border: 2px solid var(--wn-border); border-radius: 50%; background: var(--wn-notebook-paper); }
/* Today: the whole column in green, the colour of the application, with a band on top (the user's request of 2026-10-15);
   after the weekend rules, so a Saturday or Sunday that is today is green. */
.timeline-day--today { background: color-mix(in srgb, var(--wn-primary) 18%, transparent); box-shadow: inset 0 4px 0 var(--wn-primary); }
.timeline-day--today .timeline-day__head { color: var(--wn-primary); background: transparent; }
.timeline-day--today .timeline-day__head:hover { background: var(--wn-highlight); }
.timeline-day--today .timeline-day__weekday { color: var(--wn-primary); font-weight: 700; }
.timeline-day--today::before { border-top-color: color-mix(in srgb, var(--wn-primary) 45%, var(--wn-border)); }
.timeline-day--today .timeline-day__tick { border-color: var(--wn-primary); background: var(--wn-primary); }

/* The events of a day, one under the other, never on top of each other. */
.timeline-day__events { justify-self: stretch; width: 100%; }
.timeline-empty { margin: .75rem 0 0; }

/* The card of an event, in its overlay. */
.timeline-card__type { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 .75rem; }
.timeline-card__state { padding: .1rem .5rem; border-radius: 999px; background: var(--wn-highlight); font-size: .85rem; }
.timeline-card__facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .35rem 1rem; margin: 0 0 1rem; }
.timeline-card__facts dt { color: var(--wn-muted); }
.timeline-card__facts dd { margin: 0; overflow-wrap: anywhere; }
.timeline-card__text { white-space: pre-line; }
/* The footer of an event's card: the visibility badge and the notes about it, in a small font, under a thin line. */
.timeline-card__footer { display: grid; justify-items: start; gap: .3rem; margin-top: 1rem; padding-top: .6rem;
    border-top: 1px solid var(--wn-border); color: var(--wn-muted); font-size: .8rem; line-height: 1.35; }
.timeline-card__note { display: block; }
.visibility-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .55rem; border: 1px solid var(--wn-primary);
    border-radius: 999px; background: var(--wn-success-bg); color: var(--wn-text); font-size: .75rem; font-weight: 600; }
.visibility-badge .visibility-icon { width: .8rem; height: .8rem; color: currentColor; }
.timeline-result { font-weight: 600; }
.timeline-result--succeeded { color: var(--wn-timeline-green); }
.timeline-result--failed { color: var(--wn-danger); }
.timeline-result--rolledback { color: var(--wn-warning); }

/* The form: the type first, as large choices. */
.timeline-dialog .modal-panel { width: min(46rem, 100%); }
/* The form is wide (the user's request of 2026-10-14): the five types on one row, then the fields side by side (the
   date and the time; the server, the environment and the version; the result and the scheduled deploy), one under the
   other on a narrow screen. */
.timeline-dialog--form .modal-panel { width: 100%; max-width: 64rem; }
.timeline-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0 1rem; }
.timeline-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .6rem; margin: 0 0 1rem; padding: 0; border: 0; }
.timeline-types legend { margin-bottom: .5rem; font-weight: 600; }
.timeline-type { position: relative; display: grid; justify-items: center; align-content: start; gap: .45rem; min-height: 5.5rem; padding: .75rem .5rem; border: 2px solid var(--wn-border); border-radius: var(--wn-radius-panel); text-align: center; cursor: pointer; transition: border-color var(--wn-motion), background var(--wn-motion); }
.timeline-type:hover { background: var(--wn-highlight); }
.timeline-type input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.timeline-type:has(input:checked) { border-color: var(--wn-primary); background: var(--wn-success-bg); }
.timeline-type:has(input:focus-visible) { outline: 2px solid var(--wn-primary); outline-offset: 2px; }
.timeline-type .timeline-marker { width: 2.4rem; height: 2.4rem; }
.timeline-type__name { font-weight: 600; }

/* The visibility of an event: two choices side by side (a segmented control), the one chosen marked as a type. */
.timeline-form fieldset.timeline-visibility { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; padding: 0; border: 0; }
.timeline-visibility legend { width: 100%; margin-bottom: .35rem; font-weight: 600; }
.timeline-visibility__choice { position: relative; display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: .4rem .9rem;
    border: 2px solid var(--wn-border); border-radius: 999px; font-weight: 600; cursor: pointer; transition: border-color var(--wn-motion), background var(--wn-motion); }
.timeline-visibility__choice:hover { background: var(--wn-highlight); }
.timeline-visibility__choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.timeline-visibility__choice:has(input:checked) { border-color: var(--wn-primary); background: var(--wn-success-bg); }
.timeline-visibility__choice:has(input:focus-visible) { outline: 2px solid var(--wn-primary); outline-offset: 2px; }
.timeline-visibility__choice .visibility-icon { width: 1.1rem; height: 1.1rem; }

/* The indicator of the visibility: a globe for a public event, a lock for a private one (the title says it). */
.visibility-icon { display: inline-flex; flex: none; width: .85rem; height: .85rem; color: var(--wn-muted); vertical-align: middle; }
.visibility-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.visibility-icon--private { color: var(--wn-text); }

.timeline-form fieldset.timeline-form__deployment, .timeline-form fieldset.timeline-form__completed { margin: 0 0 1rem; padding: 0; border: 0; }
.timeline-form__deployment legend { margin-bottom: .35rem; font-weight: 600; }
/* Only the fields of the type chosen: the deployment details for a deploy, the result and the link for a completed one. */
.timeline-form__deployment, .timeline-form__completed { display: none; }
.timeline-form:has([data-deployment="true"]:checked) .timeline-form__deployment { display: block; }
.timeline-form:has([data-completed="true"]:checked) .timeline-form__completed { display: block; }
/* Where the deploy runs: nothing until the client environment is chosen, then the server of the list (local servers) or
   the client and the server typed (on premise). */
.timeline-form__local, .timeline-form__on-premise { display: none; }
.timeline-form:has([data-client-environment] option[value="LOCAL_SERVERS"]:checked) .timeline-form__local,
.timeline-form:has([data-client-environment] option[value="ON_PREMISE"]:checked) .timeline-form__on-premise { display: flex; }
.timeline-label--scheduled:not(.timeline-label--default), .timeline-label--completed { display: none; }
.timeline-form:has([data-scheduled="true"]:checked) .timeline-label--default:not(.timeline-label--scheduled) { display: none; }
.timeline-form:has([data-scheduled="true"]:checked) .timeline-label--scheduled { display: inline; }
.timeline-form:has([data-completed="true"]:checked) .timeline-label--default { display: none; }
.timeline-form:has([data-completed="true"]:checked) .timeline-label--completed { display: inline; }
.timeline-form__error { margin: 0 0 1rem; padding: .6rem .9rem; border-inline-start: 3px solid var(--wn-danger); border-radius: 4px; color: var(--wn-danger); background: var(--wn-danger-bg); }

/* The wait while a form is sent: a small turning ring in the button. */
.timeline-busy { display: none; width: 1em; height: 1em; margin-inline-end: .4rem; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; vertical-align: -.15em; }
.is-busy .timeline-busy { display: inline-block; animation: timeline-turn .8s linear infinite; }
@keyframes timeline-turn { to { transform: rotate(360deg); } }

/* The choices of the Admin form of the types: each colour and icon with its marker. */
.timeline-choices { display: flex; flex-wrap: wrap; gap: .5rem .9rem; margin: 0 0 1rem; padding: 0; border: 0; }
.timeline-choices legend { width: 100%; margin-bottom: .35rem; font-weight: 600; }
.timeline-choices--flags { display: grid; gap: .35rem; }
.timeline-choice { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; cursor: pointer; }

@media (max-width: 640px) {
    .site-main:has(.timeline-page) { width: 100%; padding-inline: clamp(1rem, 4vw, 3rem); }
    .timeline-heading__nav-text { display: none; }
    .timeline-line { grid-template-columns: repeat(auto-fit, minmax(4.25rem, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .is-busy .timeline-busy { animation: none; border-inline-end-color: currentColor; }
    .timeline-type, .timeline-panel[aria-busy="true"] { transition: none; }
}

@media (forced-colors: active) {
    .timeline-marker { border-color: CanvasText; background: Canvas; color: CanvasText; forced-color-adjust: none; }
    .timeline-marker--completed { box-shadow: none; outline: 2px solid CanvasText; outline-offset: 2px; }
    .timeline-day::before, .timeline-day__tick { border-color: CanvasText; }
    .timeline-type:has(input:checked), .timeline-visibility__choice:has(input:checked) { outline: 2px solid Highlight; }
    .visibility-icon { color: CanvasText; }
    .visibility-badge { border-color: CanvasText; }
    .timeline-day--today { background: none; box-shadow: none; outline: 3px solid Highlight; outline-offset: -3px; }
    .timeline-day--weekend { background: none; box-shadow: none; border-block-start: 3px solid GrayText; }
    .timeline-window--current { outline: 2px solid Highlight; outline-offset: -3px; }
}

/* The time field of the form (time-field.js): the masked text with the clock button inside it, and the picker under it:
   a popup anchored to the field, not an overlay. */
.time-field, .date-field { position: relative; }
.time-field input, .date-field input { width: 100%; padding-inline-end: 3rem; font-variant-numeric: tabular-nums; }
.time-field__toggle { position: absolute; inset-block-start: 0; inset-inline-end: 0; display: inline-grid; place-items: center; width: 44px; height: 100%; min-height: 44px; padding: 0; border: 0; border-radius: var(--wn-radius); color: var(--wn-primary); background: transparent; cursor: pointer; }
.time-field__toggle[hidden] { display: none; }
.time-field__toggle:hover { background: var(--wn-highlight); }
.time-field__toggle:focus-visible { outline: 2px solid var(--wn-primary); outline-offset: -3px; }
.time-field__toggle svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.time-field__picker { position: absolute; z-index: 5; inset-block-start: calc(100% + .25rem); inset-inline-end: 0; display: flex; gap: .25rem; max-height: 16rem; padding: .4rem; border: 1px solid var(--wn-border); border-radius: var(--wn-radius); background: var(--wn-surface); box-shadow: var(--wn-shadow-paper); }
.time-field__picker[hidden] { display: none; }
.time-field__column { display: flex; flex-direction: column; gap: .1rem; min-width: 3.25rem; overflow-y: auto; }
.time-field__heading { position: sticky; top: 0; padding: .15rem 0; color: var(--wn-muted); background: var(--wn-surface); font-size: .75rem; font-weight: 600; text-align: center; }
.time-field__option { min-height: 36px; padding: .2rem .5rem; border: 0; border-radius: var(--wn-radius); color: var(--wn-text); background: transparent; font: inherit; font-variant-numeric: tabular-nums; cursor: pointer; }
.time-field__option:hover { background: var(--wn-highlight); }
.time-field__option:focus-visible { outline: 2px solid var(--wn-primary); outline-offset: -2px; }
.time-field__option[aria-pressed="true"] { color: var(--wn-on-primary); background: var(--wn-primary); font-weight: 700; }
/* The calendar of the date field (date-field.js): the month between its arrows, the names of the days and a grid of days,
   today ringed, the chosen day filled; anchored under the field like the time picker. */
.date-field__picker { position: absolute; z-index: 5; inset-block-start: calc(100% + .25rem); inset-inline-end: 0; width: 17.5rem; max-width: calc(100vw - 2rem); padding: .5rem; border: 1px solid var(--wn-border); border-radius: var(--wn-radius); background: var(--wn-surface); box-shadow: var(--wn-shadow-paper); }
.date-field__picker[hidden] { display: none; }
.date-field__head { display: flex; align-items: center; justify-content: space-between; gap: .25rem; margin-bottom: .35rem; }
.date-field__title { font-weight: 700; text-align: center; }
.date-field__nav { min-width: 36px; min-height: 36px; border: 0; border-radius: var(--wn-radius); color: var(--wn-primary); background: transparent; font: inherit; font-size: 1.2rem; cursor: pointer; }
.date-field__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .1rem; }
.date-field__weekday { padding: .15rem 0; color: var(--wn-muted); font-size: .72rem; font-weight: 600; text-align: center; }
.date-field__day { min-height: 34px; padding: 0; border: 0; border-radius: var(--wn-radius); color: var(--wn-text); background: transparent; font: inherit; font-variant-numeric: tabular-nums; cursor: pointer; }
.date-field__day:hover, .date-field__nav:hover { background: var(--wn-highlight); }
.date-field__day:focus-visible, .date-field__nav:focus-visible { outline: 2px solid var(--wn-primary); outline-offset: -2px; }
.date-field__day[aria-current="date"] { box-shadow: inset 0 0 0 1px var(--wn-primary); }
.date-field__day[aria-pressed="true"] { color: var(--wn-on-primary); background: var(--wn-primary); font-weight: 700; }
@media (forced-colors: active) {
    .time-field__picker, .date-field__picker { border-color: CanvasText; }
    .date-field__day[aria-pressed="true"] { color: HighlightText; background: Highlight; }
    .time-field__option[aria-pressed="true"] { color: HighlightText; background: Highlight; }
}

/* The timeline of the points of discussion of the Dashboard (_DiscussionTimeline): an overlay only to look at, the band of
   the days of a period (14 on one row when the overlay is wide enough, a week a row otherwise, an agenda on a phone), each
   status a label with the code of its point of discussion in a fixed width (a long code in a smaller font, pod-chip--fit-N)
   and the code of the status with its time hanging from its corner. The kinds of statuses have a colour and a shape (the
   mark of the hanging tag and of the legend): Created a ring, a functional status a dot, a delivery stage a square, a Git
   status a diamond. */
.pod-timeline-dialog:not([open]), .pod-event-dialog:not([open]) { display: none; }
/* The details of an event of the timeline (the body of its label opens them): the card of the event, only to look at. */
.pod-event-dialog__panel { width: min(34rem, calc(100vw - 2rem)); }
.pod-event-dialog [hidden] { display: none; }
.pod-event-dialog__body { overflow-y: auto; }
.pod-event-details .timeline-card__facts { margin: 0; }
.pod-timeline-dialog__panel { max-width: min(100%, 112rem); }
.pod-timeline-dialog .modal-heading h2 { margin-bottom: 1rem; }
.pod-timeline { container-type: inline-size; --pod-chip-width: 6.25rem; }
.pod-timeline__heading { margin-bottom: .75rem; }
.pod-timeline__message:empty { display: none; }
.pod-timeline__message { margin: 0 0 .5rem; color: var(--wn-muted); }
.pod-timeline__summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.25rem; margin-bottom: .5rem; }
.pod-timeline__legend { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin: 0; padding: 0; list-style: none; font-size: .875rem; }
.pod-legend { display: inline-flex; align-items: center; gap: .4rem; }
.pod-timeline__notes { color: var(--wn-muted); font-size: .875rem; }
.pod-timeline__notes p { margin: 0 0 .5rem; }
.pod-timeline__empty { margin: .5rem 0 1rem; }

.pod-legend--functional, .pod-chip--functional { --pod-color: var(--wn-primary); }
.pod-legend--delivery, .pod-chip--delivery { --pod-color: var(--wn-warning); }
.pod-legend--git, .pod-chip--git { --pod-color: var(--wn-git-merged); }

/* The shape of a kind: a dot, a square for a delivery stage (Created is one), a diamond for a Git status. */
.pod-legend__mark,
.pod-chip__status::before { content: ""; flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.pod-legend__mark { color: var(--pod-color); }
.pod-legend--delivery .pod-legend__mark,
.pod-chip--delivery .pod-chip__status::before { border-radius: 1px; }
.pod-legend--git .pod-legend__mark,
.pod-chip--git .pod-chip__status::before { border-radius: 1px; transform: rotate(45deg) scale(.85); }

.pod-timeline__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--wn-border); }
@container (min-width: 94rem) { .pod-timeline__days { grid-template-columns: repeat(14, minmax(0, 1fr)); } }
.pod-day { min-width: 0; min-height: 6.5rem; padding: .35rem .2rem 1rem; border-left: 1px dashed var(--wn-border); border-bottom: 1px solid var(--wn-border); }
.pod-day--weekend { background: color-mix(in srgb, var(--wn-border) 28%, transparent); }
.pod-day__head { display: flex; flex-direction: column; align-items: center; margin: 0 0 .25rem; padding-bottom: .25rem; border-bottom: 2px solid var(--wn-border); color: var(--wn-muted); line-height: 1.2; }
.pod-day__weekday { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
.pod-day__date { font-weight: 600; font-variant-numeric: tabular-nums; }
.pod-day--today .pod-day__head { color: var(--wn-primary); border-bottom-color: var(--wn-primary); }
.pod-day--today { background: color-mix(in srgb, var(--wn-primary) 7%, transparent); }
/* The chips of a day, one under the other in the middle of its column, the same in the preview and on the page of the
   timeline. */
.pod-day__statuses, .timeline-day__events { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin: 0; padding: .9rem 0 0; list-style: none; }
/* On the page of the timeline a day's column ends at the edge of the page: room for the time and the actions that hang
   out of a chip. */
.timeline-day__events { box-sizing: border-box; min-width: 0; padding-inline: .4rem; }

/* A day whose statuses are on their way (the waiting icon), or failed to come (a discreet mark and Retry). */
.pod-day__waiting { display: flex; justify-content: center; padding-top: 1.25rem; }
.pod-day__spinner { width: 1.1rem; height: 1.1rem; border: 2px solid var(--wn-border); border-top-color: var(--wn-primary); border-radius: 50%;
    animation: pod-day-spin .8s linear infinite; }
@keyframes pod-day-spin { to { transform: rotate(360deg); } }
.pod-day__failed { display: flex; flex-direction: column; align-items: center; gap: .25rem; margin: 0; padding-top: 1rem; color: var(--wn-muted); font-size: .75rem; }
.pod-day__failed-mark { display: inline-grid; place-items: center; width: 1.1rem; height: 1.1rem; border: 1.5px solid var(--wn-danger); border-radius: 50%;
    color: var(--wn-danger); font-size: .7rem; font-weight: 700; line-height: 1; }
.pod-day__retry { padding: .15rem .45rem; border: 1px solid var(--wn-input-border); border-radius: var(--wn-radius); background: var(--wn-surface);
    color: var(--wn-text); font: inherit; cursor: pointer; }
.pod-day__retry:hover { border-color: var(--wn-primary); color: var(--wn-primary); }
.pod-day__retry:focus-visible { outline: 3px solid var(--wn-primary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .pod-day__spinner { animation-duration: 2.4s; } }

/* A label: the code of the point of discussion, in a fixed width; the status and its time hang from its top-right corner. */
.pod-chip { position: relative; width: var(--pod-chip-width); max-width: 100%; border: 1px solid var(--wn-input-border); border-left: 4px solid var(--pod-color);
    border-radius: var(--wn-radius); background: var(--wn-surface); box-shadow: var(--wn-shadow); }
.pod-chip__code { display: block; overflow: hidden; padding: .45rem .3rem .3rem; color: var(--wn-text); font-family: var(--wn-font-mono); font-size: .8125rem;
    font-weight: 600; line-height: 1.2; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
a.pod-chip__code:hover { text-decoration: underline; }
.pod-chip__code:focus-visible { outline: 3px solid var(--wn-primary); outline-offset: 2px; border-radius: var(--wn-radius); }
.pod-chip__status { position: absolute; top: -.7rem; right: -.35rem; display: inline-flex; align-items: center; gap: .25rem; max-width: calc(100% + .3rem);
    overflow: hidden; padding: .05rem .35rem; border-radius: 999px; background: var(--pod-color); color: var(--wn-on-primary); font-size: .625rem;
    font-weight: 700; line-height: 1.35; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pod-chip__status-code { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pod-chip__status time { flex: none; font-weight: 500; }
.pod-chip--tag-small .pod-chip__status { font-size: .57rem; }
.pod-chip--tag-smaller .pod-chip__status { font-size: .53rem; }
.pod-chip--tag-smallest .pod-chip__status { font-size: .5rem; }
/* A longer code takes a smaller font, so the label keeps its width (DiscussionTimelinePresentation.FitClass). */
.pod-chip--fit-11 .pod-chip__code { font-size: .78rem; }
.pod-chip--fit-12 .pod-chip__code { font-size: .72rem; }
.pod-chip--fit-13 .pod-chip__code { font-size: .665rem; }
.pod-chip--fit-14 .pod-chip__code { font-size: .62rem; }
.pod-chip--fit-15 .pod-chip__code { font-size: .58rem; }
.pod-chip--fit-16 .pod-chip__code { font-size: .54rem; }
.pod-chip--fit-17 .pod-chip__code { font-size: .51rem; }
.pod-chip--fit-18 .pod-chip__code { font-size: .48rem; }

/* The point of discussion highlighted (a click on a label, discussion-timeline.js): its labels marked in the colour of their
   kind, everything else on the days dimmed; the heading names it on one line (the whole text in its tooltip), with the
   button that ends the highlight. Its place is kept while nothing is highlighted (invisible, out of the tab order), so
   nothing under it moves. */
/* contain: its text never widens the overlay. On a narrow screen it has its own row under the title, kept as well. */
.pod-timeline__selection { display: flex; flex: 1 1 0; align-items: center; justify-content: flex-end; gap: .75rem; min-width: 0; visibility: hidden;
    contain: inline-size; }
.pod-timeline__selection--shown { visibility: visible; }
.pod-timeline__selection p { min-width: 0; margin: 0; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.pod-timeline__selection .btn { flex: none; }
@media (max-width: 48rem) {
    .pod-timeline-dialog .modal-heading { flex-wrap: wrap; }
    .pod-timeline__selection { order: 3; flex-basis: 100%; justify-content: space-between; margin-bottom: .75rem; }
    /* Two lines at most, their height always kept. */
    .pod-timeline__selection p { display: -webkit-box; height: calc(2 * 1.3em); line-height: 1.3; font-size: .875rem; white-space: normal;
        -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
}
.pod-chip, .event-chip { transition: opacity var(--wn-motion), box-shadow var(--wn-motion); }
.pod-timeline__body--focused .pod-chip:not(.pod-chip--selected),
.pod-timeline__body--focused .event-chip { opacity: .3; }
.pod-chip--selected { z-index: 2; background: color-mix(in srgb, var(--pod-color) 16%, var(--wn-surface));
    box-shadow: 0 0 0 2px var(--wn-surface), 0 0 0 4px var(--pod-color), var(--wn-shadow); }
@media (prefers-reduced-motion: reduce) { .pod-chip, .event-chip { transition: none; } }
/* The buttons of a highlighted label (shown only then): the note over its bottom-right corner and, to its right, the history, over
   the gap and the next column rather than the text, so nothing moves; the highlighted label stays above its neighbours. */
.pod-chip__open, .pod-chip__history { position: absolute; z-index: 1; right: -.55rem; bottom: -.7rem; display: none; place-items: center; width: 1.75rem; height: 1.75rem;
    border: 1.5px solid var(--pod-color); border-radius: 50%; color: var(--pod-color); background: var(--wn-surface); box-shadow: var(--wn-shadow); }
.pod-chip--selected .pod-chip__open, .pod-chip--selected .pod-chip__history { display: grid; }
/* The history icon right of the note's (in its place without a note), so the two buttons never overlap. */
.pod-chip__history { padding: 0; font: inherit; cursor: pointer; }
.pod-chip__open ~ .pod-chip__history { right: -2.5rem; }
.pod-chip__open svg, .pod-chip__history svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pod-chip__open:hover, .pod-chip__history:hover { color: var(--wn-on-primary); background: var(--pod-color); }
.pod-chip__open:focus-visible, .pod-chip__history:focus-visible { outline: 3px solid var(--wn-primary); outline-offset: 2px; }

/* An event of the personal timeline (_TimelineEventChip), the same chip in the Timeline Preview (among the statuses, only
   to look at) and on the page of the timeline (selected, with its actions): a rounded label in the colour of its type,
   with its marker, its name and, for a deploy, where it went; its time hangs from its corner as a status's. */
.pod-legend--event .pod-legend__mark { width: .65rem; height: .65rem; border: 1.5px solid var(--wn-timeline-gray); border-radius: 999px; background: transparent; }
.event-chip { position: relative; width: var(--pod-chip-width, 6.25rem); max-width: 100%; border: 1px solid var(--marker); border-radius: 1rem;
    background: color-mix(in srgb, var(--marker) 12%, var(--wn-surface)); box-shadow: var(--wn-shadow); }
.event-chip__body { display: flex; align-items: center; gap: .3rem; min-width: 0; padding: .2rem .45rem .2rem .2rem; border-radius: 1rem; color: var(--wn-text);
    text-decoration: none; }
a.event-chip__body, .event-chip__body[data-pod-event] { cursor: pointer; }
.event-chip__body:focus-visible { outline: 3px solid var(--wn-primary); outline-offset: 2px; }
.event-chip .timeline-marker { flex: none; width: 1.35rem; height: 1.35rem; border-width: 1.5px; }
.event-chip .timeline-marker svg { width: .8rem; height: .8rem; }
.event-chip .timeline-marker--completed { box-shadow: 0 0 0 1.5px var(--wn-surface), 0 0 0 3px var(--marker); }
.event-chip__text { display: grid; min-width: 0; }
/* The name on at most two lines (Sprint Review), then cut; the tooltip has it whole. */
.event-chip__name { display: -webkit-box; min-width: 0; overflow: hidden; font-size: .72rem; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere;
    -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
/* The indicator of the visibility on the bottom-right corner of the marker, so the name keeps its width. */
.event-chip__marker { position: relative; flex: none; display: inline-flex; }
.event-chip__marker .visibility-icon { position: absolute; right: -.3rem; bottom: -.25rem; width: .75rem; height: .75rem; padding: .08rem;
    border-radius: 50%; background: var(--wn-surface); box-shadow: 0 0 0 1px var(--wn-border); }
/* Where a deploy went (the client or the server): smaller, on one line cut with an ellipsis; never a scrollbar. */
.event-chip__place { min-width: 0; overflow: hidden; color: var(--wn-muted); font-size: .62rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.event-chip__time { position: absolute; top: -.7rem; right: -.35rem; padding: .05rem .35rem; border-radius: 999px; background: var(--marker);
    color: var(--wn-on-primary); font-size: .625rem; font-weight: 500; line-height: 1.35; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* The selected chip, marked as a highlighted point of discussion (.pod-chip--selected): a ring in its colour. */
.event-chip--selected { z-index: 2; background: color-mix(in srgb, var(--marker) 20%, var(--wn-surface));
    box-shadow: 0 0 0 2px var(--wn-surface), 0 0 0 4px var(--marker), var(--wn-shadow); }
/* The buttons over the bottom-right corner, as a highlighted label's, so nothing moves: the list of points of discussion
   (the preview), or, on the selected chip of the page of the timeline, edit and, to its right, delete. */
.event-chip__subjects, .event-chip__action { position: absolute; z-index: 1; right: -.55rem; bottom: -.7rem; display: grid; place-items: center; width: 1.6rem;
    height: 1.6rem; padding: 0; border: 1.5px solid var(--marker); border-radius: 50%; color: var(--marker); background: var(--wn-surface);
    box-shadow: var(--wn-shadow); font: inherit; cursor: pointer; }
.event-chip__actions { display: none; }
.event-chip--selected .event-chip__actions { display: block; }
.event-chip__action { right: 1.2rem; }
.event-chip__action--delete { right: -.55rem; color: var(--wn-danger); border-color: var(--wn-danger); }
.event-chip__subjects svg, .event-chip__action svg { width: .9rem; height: .9rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.event-chip__subjects:hover, .event-chip__action:hover { color: var(--wn-on-primary); background: var(--marker); }
.event-chip__action--delete:hover { color: var(--wn-on-primary); background: var(--wn-danger); }
.event-chip__subjects:focus-visible, .event-chip__action:focus-visible { outline: 3px solid var(--wn-primary); outline-offset: 2px; }
.event-chip:has(.event-chip__subjects), .event-chip:has(.event-chip__actions) { margin-bottom: .45rem; }
/* The popup of a deploy's points of discussion: a code opens its history. */
.pod-deploy__code { padding: 0; border: 0; background: none; color: var(--wn-primary); font: inherit; font-weight: 700; text-decoration: underline;
    text-underline-offset: .15em; cursor: pointer; }
.pod-deploy__code:focus-visible { outline: 3px solid var(--wn-primary); outline-offset: 2px; }
/* The refresh and close icons of its heading; a refresh on its way turns. */
.pod-subjects__actions { display: inline-flex; flex: none; align-items: center; gap: .25rem; margin: -.5rem -.5rem 0 0; }
.git-commits__header .pod-subjects__actions .note-editor-icon { margin: 0; }
/* The author filter of the list and the author of each row (the user's request of 2026-11-04). */
.pod-subjects__filter { display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 .6rem; }
.pod-subjects__filter select { min-height: 36px; max-width: 18rem; }
.pod-subjects__filter[hidden], .pod-subject[hidden] { display: none; }
.pod-subject__author { margin-right: .75rem; }
.pod-subjects__refresh svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[data-discussion-timeline-deploy][aria-busy="true"] .pod-subjects__refresh svg { animation: pod-subjects-refresh 1s linear infinite; }
@keyframes pod-subjects-refresh { to { transform: rotate(360deg); } }
/* A point of discussion's latest status in the interval (the colour of its catalog) and, as smaller badges, the other
   statuses it had there, each with its day. */
.pod-subject__status, .pod-subject__badge { --pod-color: var(--wn-muted); border: 1px solid var(--pod-color); border-radius: 999px; color: var(--pod-color); }
.pod-subject__status { padding: .05rem .45rem; font-size: .75rem; font-weight: 650; }
.pod-subject__status--functional { --pod-color: var(--wn-primary); }
.pod-subject__status--delivery { --pod-color: var(--wn-warning); }
.pod-subject__status--git { --pod-color: var(--wn-git-merged); }
.pod-subject__others { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0; }
.pod-subject__badge { padding: 0 .4rem; font-size: .68rem; font-weight: 600; line-height: 1.5; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pod-subject__badge time { font-weight: 500; }
.pod-subject__status[hidden], .pod-subject__others[hidden] { display: none; }
/* The checkbox "Include în versiune" at the start of the row, and its waiting icon while the choice is saved. */
.pod-subject__include { display: inline-flex; align-items: center; gap: .25rem; align-self: center; }
.pod-subject__check { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--wn-primary); cursor: pointer; }
.pod-subject__check:disabled { cursor: progress; }
.pod-subject__check:focus-visible { outline: 3px solid var(--wn-primary); outline-offset: 2px; }
.pod-subject__saving { display: inline-flex; }
.pod-subject__saving[hidden] { display: none; }
.pod-subject__saving .pod-day__spinner { width: .8rem; height: .8rem; }
.pod-subject__error { margin: 0; color: var(--wn-danger); font-size: .8rem; }
.pod-subject__error[hidden] { display: none; }
/* The list and the report of the version, two panels of the same overlay. Alone, the list is centred; with the report
   (the class of the overlay), the report is on the left and the list on the right, side by side, both shrinking to fit
   the window. Closed, the report folds to nothing and the list slides back to the centre. */
.pod-subjects { display: flex; align-items: center; justify-content: center; gap: 0; transition: gap .25s ease; }
.pod-subjects > .modal-panel { flex: 0 1 46rem; min-width: 0; }
.pod-subjects > .pod-report { flex-basis: 0; max-width: 0; padding-inline: 0; overflow: hidden; opacity: 0; visibility: hidden;
    transition: flex-basis .25s ease, max-width .25s ease, padding .25s ease, opacity .2s ease, visibility 0s linear .25s; }
.pod-subjects--with-report { gap: 1.5rem; }
.pod-subjects--with-report > .pod-report { flex-basis: 46rem; max-width: 46rem; padding-inline: clamp(1.25rem, 4vw, 2.5rem); opacity: 1;
    visibility: visible; transition-delay: 0s; }
.pod-report .git-commits__header h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .5rem; }
.pod-report__version { color: var(--wn-muted); font-family: var(--wn-font); font-size: .9rem; font-weight: 500; }
.pod-report__title-text { font-weight: 600; overflow-wrap: anywhere; }
.pod-subjects__report[aria-expanded="true"] { color: var(--wn-on-primary); background: var(--wn-primary); }
/* A narrow screen: the report over the list, which stays open behind it as it was. */
@media (max-width: 60rem) {
    .pod-subjects { display: grid; place-items: center; }
    .pod-subjects > .modal-panel { grid-area: 1 / 1; width: 100%; max-width: 46rem; }
    .pod-subjects > .pod-report { z-index: 1; padding-inline: clamp(1.25rem, 4vw, 2.5rem); transform: translateY(.75rem);
        transition: transform .25s ease, opacity .2s ease, visibility 0s linear .25s; }
    .pod-subjects--with-report > .pod-report { max-width: 46rem; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    [data-discussion-timeline-deploy][aria-busy="true"] .pod-subjects__refresh svg { animation: none; }
    .pod-subjects, .pod-subjects > .pod-report { transition: none; }
}
@media (forced-colors: active) {
    .pod-subject__status, .pod-subject__badge { border-color: CanvasText; color: CanvasText; }
    .pod-subjects__report[aria-expanded="true"] { outline: 2px solid Highlight; }
}

/* A phone: an agenda, a day a row, its labels side by side. */
@container (max-width: 48rem) {
    .pod-timeline__days { grid-template-columns: 1fr; }
    .pod-day { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); align-items: start; gap: .5rem; min-height: 0; padding: .5rem .25rem; border-left: 0; }
    .pod-day__head { margin: 0; border-bottom: 0; }
    .pod-day__statuses { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 1rem .75rem; padding-top: .75rem; }
    .pod-day__waiting, .pod-day__failed { justify-content: flex-start; padding-top: .35rem; }
    .pod-day__failed { flex-direction: row; }
}

@media (forced-colors: active) {
    .pod-chip { border-left-width: 4px; border-color: CanvasText; }
    .pod-chip__status { border: 1px solid CanvasText; background: Canvas; color: CanvasText; }
    .event-chip { border: 1px solid CanvasText; background: Canvas; }
    .pod-chip--selected { outline: 3px solid Highlight; outline-offset: 2px; }
    .pod-chip__open, .pod-chip__history { border-color: CanvasText; color: CanvasText; background: Canvas; }
    .event-chip__time { border: 1px solid CanvasText; background: Canvas; color: CanvasText; }
    .event-chip__subjects, .event-chip__action { border-color: CanvasText; color: CanvasText; background: Canvas; }
    .event-chip__place { color: CanvasText; }
    .event-chip--selected { outline: 3px solid Highlight; outline-offset: 2px; }
    .pod-legend--event .pod-legend__mark { border-color: CanvasText; }
    .pod-legend__mark, .pod-chip__status::before { forced-color-adjust: none; color: CanvasText; }
    .pod-day--today .pod-day__head { border-bottom-color: Highlight; color: Highlight; }
    .pod-day__spinner { border-color: CanvasText; border-top-color: Highlight; }
    .pod-day__failed-mark { border-color: CanvasText; color: CanvasText; }
}

/* The general points of discussion of the context (decision 249): the source repository, the switch that shows them and
   "Pull from GitHub", in a row under the heading of the Timeline Preview (one under the other on a narrow screen). */
.pod-timeline-dialog__panel { position: relative; }
.pod-general { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0 0 .5rem; }
/* Hidden until its source is read (general-subjects.js): display: flex must not override the hidden attribute. */
.pod-general[hidden] { display: none; }
.pod-general__field { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; margin: 0; }
.pod-general__field select { min-width: 0; max-width: 18rem; min-height: 36px; }
.pod-general__switch { display: inline-flex; align-items: center; gap: .35rem; min-height: 36px; margin: 0; cursor: pointer; }
.pod-general__switch input { width: 1.1rem; height: 1.1rem; accent-color: var(--wn-git-merged); }
.pod-general__switch:has(input:disabled) { color: var(--wn-disabled-text); cursor: default; }
.pod-general__pull { display: inline-flex; align-items: center; gap: .35rem; }
.pod-general__pull svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pod-general__note:empty { display: none; }
.pod-general__note { flex-basis: 100%; margin: 0; color: var(--wn-muted); font-size: .875rem; }
@media (max-width: 40rem) {
    .pod-general { flex-direction: column; align-items: stretch; }
    .pod-general__field { flex-wrap: wrap; }
    .pod-general__field select { max-width: 100%; flex: 1; }
}

/* Import progress over the timeline. Completion keeps the results visible until the user closes them. */
.pod-import { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 1rem; border-radius: var(--wn-radius);
    background: color-mix(in srgb, var(--wn-surface) 72%, transparent); }
.pod-import[hidden] { display: none; }
.pod-import__panel { width: min(100%, 30rem); padding: 1rem 1.25rem; box-shadow: var(--wn-shadow); }
.pod-import__title { margin: 0 0 .5rem; font-size: 1.05rem; }
.pod-import__step { display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; }
.pod-import__bar { width: 100%; height: .75rem; accent-color: var(--wn-primary); }
.pod-import__line { margin: .35rem 0 0; color: var(--wn-muted); font-size: .875rem; overflow-wrap: anywhere; }

/* The tab "References" of the dialog of a point of discussion: the cards of the popup of a reference, one under the other. */
.discussion-references { display: grid; gap: .35rem; margin: .25rem 0 0; padding: 0; list-style: none; }
.discussion-references .note-reference-lookup__group { margin-top: .4rem; color: var(--wn-muted); font-size: .8rem; font-weight: 600; }

@media (forced-colors: active) {
    .pod-import { background: Canvas; }
}

/* Decision 250: the own commits of the branches of a general point of discussion. On its label: their number (bottom
   right), the waiting icon while one of its branches is read and a discreet warning (top left); none takes a click. */
.pod-chip__commits { position: absolute; right: -.45rem; bottom: -.55rem; min-width: 1.1rem; padding: 0 .25rem; border: 1px solid var(--wn-git-merged);
    border-radius: 999px; background: var(--wn-surface); color: var(--wn-git-merged); font-size: .65rem; line-height: 1rem; text-align: center;
    pointer-events: none; }
.pod-chip__syncing, .pod-chip__sync-warning { position: absolute; left: -.5rem; top: -.55rem; display: grid; place-items: center; width: 1.1rem; height: 1.1rem;
    border-radius: 50%; background: var(--wn-surface); pointer-events: none; }
.pod-chip__syncing .pod-day__spinner { width: .8rem; height: .8rem; }
.pod-chip__sync-warning { border: 1px solid var(--wn-warning); color: var(--wn-warning); font-size: .7rem; font-weight: 700; }
.pod-chip__commits[hidden], .pod-chip__syncing[hidden], .pod-chip__sync-warning[hidden] { display: none; }
/* The same status in the same minute from several lines, shown once (bottom left): how many. */
.pod-chip__count { position: absolute; left: -.45rem; bottom: -.55rem; min-width: 1.1rem; padding: 0 .25rem; border: 1px solid var(--wn-border);
    border-radius: 999px; background: var(--wn-surface); color: var(--wn-muted); font-size: .65rem; line-height: 1rem; text-align: center; }

/* The second phase of an import: a small panel at the bottom of the timeline, which stays usable. */
.pod-import--compact { inset: auto .75rem .75rem auto; display: block; padding: 0; background: none; pointer-events: none; }
.pod-import--compact .pod-import__panel { pointer-events: auto; max-width: min(26rem, calc(100vw - 3rem)); padding: .6rem .8rem; box-shadow: var(--wn-shadow-raised); }
.pod-import--compact .pod-import__title { font-size: .95rem; }

/* The own commits in the tab "References": by branch or all of them. */
.discussion-commits { margin-top: 1rem; }
.discussion-commits__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.discussion-commits__title { margin: 0; font-size: 1rem; }
.discussion-commits__views { display: flex; gap: .25rem; }
.discussion-commits__views [aria-pressed="true"] { border-color: var(--wn-primary); color: var(--wn-primary); font-weight: 600; }
.discussion-commits__group { margin-top: .75rem; }
.discussion-commits__branch { margin: 0; font-size: .9rem; overflow-wrap: anywhere; }
.discussion-commits__meta, .discussion-commits__empty { margin: .15rem 0; color: var(--wn-muted); font-size: .8rem; }
.discussion-commits__warning { margin: .15rem 0; color: var(--wn-warning); font-size: .8rem; }
.discussion-commits__warning[hidden] { display: none; }
.discussion-commits__list { margin: .35rem 0 0; padding: 0; list-style: none; }
.discussion-commits__item { display: grid; grid-template-columns: auto 1fr; column-gap: .5rem; padding: .3rem 0; border-top: 1px dashed var(--wn-border); }
.discussion-commits__sha { grid-row: span 2; font-family: var(--wn-font-mono); font-size: .8rem; }
.discussion-commits__summary { overflow-wrap: anywhere; }
.discussion-commits__by { color: var(--wn-muted); font-size: .75rem; }
/* The Git projects of a branch (decision 266): chips (a confirmed one outlined, a rejected one struck), the add list. */
.discussion-projects { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin: .3rem 0; font-size: .8rem; }
.discussion-projects[hidden], .discussion-projects__add[hidden] { display: none; }
.discussion-projects__label { color: var(--wn-muted); font-weight: 600; }
.discussion-projects__list { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
.discussion-projects__chip { display: inline-flex; align-items: center; gap: .2rem; padding: 0 .1rem 0 .45rem; border: 1px solid var(--wn-border);
    border-radius: 999px; background: var(--wn-surface); }
.discussion-projects__chip--confirmed { border-color: var(--wn-primary); border-width: 2px; }
.discussion-projects__chip--rejected { color: var(--wn-muted); text-decoration: line-through; border-style: dashed; }
.discussion-projects__action { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: .85rem; line-height: 1; padding: .1rem .3rem;
    border-radius: 50%; text-decoration: none; }
.discussion-projects__action:focus-visible { outline: 2px solid var(--wn-primary); outline-offset: 1px; }
.discussion-projects__add { min-height: 28px; max-width: 12rem; font-size: .8rem; }
/* A key commit (decision 263): a base brought into the branch (dashed) or its integration into a base (in the colour of
   the Git statuses); the label above its summary. */
.discussion-commits__role { grid-column: 2; color: var(--wn-git-merged); font-size: .72rem; font-weight: 700; }
.discussion-commits__role[hidden] { display: none; }
.discussion-commits__item--base .discussion-commits__sha, .discussion-commits__item--integration .discussion-commits__sha { grid-row: span 3; }
.discussion-commits__item--base { border-left: 3px dashed var(--wn-git-merged); padding-left: .4rem; }
.discussion-commits__item--integration { border-left: 3px solid var(--wn-git-merged); padding-left: .4rem; background: var(--wn-git-merged-bg); }
@media (forced-colors: active) {
    .pod-chip__commits, .pod-chip__sync-warning, .pod-chip__count { border-color: CanvasText; color: CanvasText; forced-color-adjust: none; background: Canvas; }
    .discussion-commits__views [aria-pressed="true"] { border-color: Highlight; }
}

.discussion-history__panel { min-height: 0; overflow: hidden; }
.discussion-history__header, .discussion-history__tabs, .discussion-history__subtitle { flex-shrink: 0; }
.discussion-history__tabpanel { min-height: 0; overflow-y: auto; overflow-x: hidden; }
.discussion-commits__body { max-height: min(48dvh, 30rem); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-gutter: stable; overscroll-behavior: contain; }
.discussion-commits__item { grid-template-columns: auto minmax(0, 1fr); }
.discussion-commits__summary, .discussion-commits__by, .discussion-commits__meta, .discussion-commits__warning { min-width: 0; overflow-wrap: anywhere; }
@media (max-height: 600px) { .discussion-commits__body { max-height: 32dvh; } }

.pod-chip__author { position: absolute; bottom: -.5rem; left: -.45rem; border: 1px solid var(--wn-border); border-radius: 50%; background: var(--wn-surface); color: var(--wn-primary); font-size: .75rem; line-height: 1; width: 1.2rem; height: 1.2rem; cursor: pointer; }
.pod-author[popover] { position-area: block-end; inset: auto; margin: .4rem; max-width: min(20rem, calc(100vw - 2rem)); padding: 1rem 2.5rem 1rem 1rem; border: 1px solid var(--wn-border); border-radius: .5rem; color: var(--wn-text); box-shadow: var(--wn-shadow); }
.pod-author > strong, .pod-author > span, .pod-author > time { display: block; overflow-wrap: anywhere; }
.pod-author__close { position: absolute; right: .25rem; top: .25rem; }
.discussion-history__panel [data-history-panel="references"]:not([hidden]) { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.discussion-commits:not([hidden]) { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.discussion-commits__head { flex-shrink: 0; }
.discussion-commits__body { flex: 1 1 auto; min-height: 0; }
.discussion-history__refresh, [data-history-note-association] { flex-shrink: 0; }
.discussion-references { flex: 0 1 auto; max-height: 18dvh; overflow-y: auto; overflow-x: hidden; }

.pod-chip__author:focus-visible { outline: 3px solid var(--wn-primary); outline-offset: 2px; }
@media (max-height: 600px) {
    .discussion-history__panel { padding: 1rem; gap: .4rem; margin-block: 0; }
    .discussion-history__tab { padding: .35rem .5rem; }
    .discussion-history__panel .discussion-commits { margin-top: .4rem; }
    .discussion-history__panel .discussion-references { margin-block: .2rem; max-height: 12dvh; }
}
.discussion-history__actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem; flex-shrink: 0; }
.discussion-history__panel .git-commits__status:empty { display: none; }

.pod-import-results { margin: .4rem 0; color: var(--wn-muted); font-size: .8rem; }
.pod-import-results__list { max-height: min(25dvh, 12rem); overflow-y: auto; overflow-x: hidden; margin: .5rem 0 0; padding-left: 1.2rem; font-size: .8rem; }
.pod-import-results__list li { overflow-wrap: anywhere; margin-bottom: .3rem; }
.pod-import-results__error { color: var(--wn-danger); }

.pod-import-results__warning { color: var(--wn-warning); }

.pod-import__header { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; flex-shrink: 0; }
.pod-import__header .pod-import__title { margin: 0; }
.pod-import__header .note-editor-icon { flex: none; }
.pod-import__panel { display: flex; flex-direction: column; max-height: calc(100dvh - 4rem); overflow: hidden; }
.pod-import__panel .pod-import-results__list { flex: 0 1 auto; min-height: 0; }

/* The Git projects (the user's request of 2026-11-05). Their colors are classes, .git-project--{id}, written by the server
   (_GitProjectStyles) from Admin; --git-project-color falls back to the muted text. A label of the timeline and a row of an
   event's list show them as a thin band of segments, one per project, the name on hover; Admin shows a swatch. */
.git-project-band { display: flex; gap: 1px; }
.git-project-band[hidden] { display: none; }
.git-project-band__segment, .git-project-swatch, .pod-filter__swatch { background: var(--git-project-color, var(--wn-muted)); }
.git-project-band__segment { flex: 1 1 0; min-width: .4rem; }
.pod-chip__projects { position: absolute; right: 0; bottom: 0; left: 0; height: 4px; overflow: hidden; border-radius: 0 0 var(--wn-radius) 0; }
.pod-subject__projects { display: inline-flex; width: 4.5rem; height: .45rem; overflow: hidden; border-radius: 999px; vertical-align: middle; }
.git-project-swatch, .pod-filter__swatch { display: inline-block; width: .85rem; height: .85rem; border: 1px solid var(--wn-input-border); border-radius: 3px;
    vertical-align: middle; }
.pod-filter__swatch[hidden] { display: none; }
.git-project-color-input { width: 4rem; min-height: 36px; padding: .15rem; }
/* A label the filters leave out (timeline-filters.js); the events and the days stay. */
.pod-chip--filtered { display: none; }

/* The filters of the timeline: one compact line over the days, each category a button with its anchored list of
   checkboxes; the reset and how many subjects are shown. */
.pod-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin: 0 0 .5rem; }
.pod-filters[hidden], .pod-filters__empty[hidden] { display: none; }
.pod-filters__label { color: var(--wn-muted); font-size: .8125rem; font-weight: 600; }
.pod-filters__count { margin: 0; color: var(--wn-muted); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.pod-filters__reset { min-height: 32px; padding-block: .2rem; }
.pod-filters__empty { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 .5rem; color: var(--wn-muted); }
.pod-filter { position: relative; }
.pod-filter__summary { display: inline-flex; align-items: center; gap: .35rem; min-height: 32px; padding: .2rem .6rem; border: 1px solid var(--wn-input-border);
    border-radius: 999px; background: var(--wn-surface); font-size: .8125rem; cursor: pointer; list-style: none; }
.pod-filter__summary::-webkit-details-marker { display: none; }
.pod-filter__summary::after { content: "▾"; color: var(--wn-muted); font-size: .7rem; }
.pod-filter[open] .pod-filter__summary, .pod-filter__summary:hover { border-color: var(--wn-primary); }
.pod-filter__summary:focus-visible { outline: 3px solid var(--wn-primary); outline-offset: 2px; }
.pod-filter__count { padding: 0 .35rem; border-radius: 999px; background: var(--wn-primary); color: var(--wn-on-primary); font-size: .7rem; font-weight: 700; }
.pod-filter__count[hidden] { display: none; }
.pod-filter__panel { position: absolute; z-index: 5; top: calc(100% + .25rem); left: 0; min-width: 14rem; max-width: min(22rem, 80vw); max-height: 18rem;
    overflow: auto; padding: .4rem; }
.pod-filter__none { margin: .2rem .3rem; }
.pod-filter__none[hidden] { display: none; }
.pod-filter__options { margin: 0; padding: 0; list-style: none; }
.pod-filter__option { display: flex; align-items: center; gap: .4rem; padding: .25rem .3rem; border-radius: var(--wn-radius); font-size: .8125rem; cursor: pointer; }
.pod-filter__option:hover { background: color-mix(in srgb, var(--wn-primary) 8%, transparent); }
.pod-filter__group { margin: .35rem .3rem .1rem; color: var(--wn-muted); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
@media (forced-colors: active) {
    .git-project-band__segment, .git-project-swatch, .pod-filter__swatch { forced-color-adjust: none; }
}